From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/_redirects.txt | 1987 ++ files/es/_wikihistory.json | 23774 +++++++++++++++++++ .../index.html | 23 + .../index.html | 87 + .../index.html | 229 + .../index.html | 161 + .../index.html" | 54 + files/es/administrador_de_perfiles/index.html | 52 + files/es/almacenamiento/index.html | 204 + files/es/api_de_acceso_a_canales/index.html | 166 + files/es/api_del_toolkit/index.html | 34 + .../index.html | 102 + .../index.html" | 66 + files/es/archive/add-ons/index.html | 8 + .../add-ons/observer_notifications/index.html | 155 + .../index.html" | 54 + .../index.html" | 295 + files/es/archive/api/index.html | 13 + files/es/archive/api/navigator/index.html | 8 + .../api/navigator/moznotification/index.html | 64 + files/es/archive/apps/advanced_topics/index.html | 74 + files/es/archive/apps/index.html | 8 + files/es/archive/b2g_os/api/callevent/index.html | 117 + .../b2g_os/api/cameramanager/getcamera/index.html | 126 + .../es/archive/b2g_os/api/cameramanager/index.html | 62 + files/es/archive/b2g_os/api/index.html | 120 + files/es/archive/b2g_os/api/mozactivity/index.html | 69 + .../b2g_os/api/mozvoicemailstatus/index.html | 67 + files/es/archive/b2g_os/api/navigator/index.html | 12 + .../b2g_os/api/navigator/mozalarms/index.html | 116 + .../b2g_os/api/navigator/mozapps/index.html | 96 + .../b2g_os/api/navigator/moztelephony/index.html | 83 + files/es/archive/b2g_os/api/telephony/index.html | 141 + .../b2g_os/api/telephonycall/hangup/index.html | 118 + .../es/archive/b2g_os/api/telephonycall/index.html | 185 + .../b2g_os/api/telephonycall/number/index.html | 125 + .../b2g_os/api/telephonycall/onincoming/index.html | 120 + files/es/archive/b2g_os/api/window/index.html | 27 + .../b2g_os/application_development/index.html | 11 + .../index.html | 29 + files/es/archive/b2g_os/apps/index.html | 62 + files/es/archive/b2g_os/architecture/index.html | 759 + .../dispositivos_compatibles/index.html | 360 + .../firefox_os_build_process_summary/index.html | 109 + .../index.html | 82 + .../building_b2g_for_qemu_emulator/index.html | 37 + .../b2g_os/compilar_boot_to_gecko/index.html | 123 + files/es/archive/b2g_os/complementos/index.html | 58 + .../b2g_os/consejos_uso_firefox_os/index.html | 21 + .../debugging/depurar_b2g_usando_gdb/index.html | 79 + .../b2g_os/debugging/developer_settings/index.html | 194 + files/es/archive/b2g_os/debugging/index.html | 74 + .../personalizando_el_script_b2g.sh/index.html | 42 + .../archive/b2g_os/debugging/setting_up/index.html | 37 + .../entendiendo_el_codigo_base_de_gaia/index.html | 104 + files/es/archive/b2g_os/developing_gaia/index.html | 61 + .../running_the_gaia_codebase/index.html | 47 + .../elegir_como_ejecutar_gaia_o_b2g/index.html | 61 + .../firefox_os_apps/building_blocks/index.html | 195 + files/es/archive/b2g_os/firefox_os_apps/index.html | 85 + .../firefox_os_build_prerequisites/index.html | 204 + .../archive/b2g_os/gaia_hacking_guide/index.html | 6 + files/es/archive/b2g_os/gonk/index.html | 23 + files/es/archive/b2g_os/index.html | 94 + .../installing_on_a_mobile_device/index.html | 79 + files/es/archive/b2g_os/introduction/index.html | 27 + .../b2g_os/phone_guide/fairphone/index.html | 186 + .../flame/configuracion_inicial/index.html | 122 + .../es/archive/b2g_os/phone_guide/flame/index.html | 78 + .../flame/updating_your_flame/index.html | 301 + files/es/archive/b2g_os/phone_guide/fx0/index.html | 51 + .../b2g_os/phone_guide/geeksphone/index.html | 124 + files/es/archive/b2g_os/phone_guide/index.html | 43 + .../phone_guide/lista_dispositivos/index.html | 712 + .../archive/b2g_os/phone_guide/zte_open/index.html | 287 + .../b2g_os/phone_guide/zte_open_c/index.html | 226 + .../b2g_os/platform/gaia/hacking/index.html | 226 + files/es/archive/b2g_os/platform/gaia/index.html | 61 + .../platform/gaia/introduction_to_gaia/index.html | 13 + files/es/archive/b2g_os/platform/index.html | 94 + .../b2g_os/platform/settings_list/index.html | 709 + files/es/archive/b2g_os/portando/index.html | 369 + .../archive/b2g_os/porting_firefox_os/index.html | 71 + .../portando_de_cyanogenmod/index.html | 239 + .../preparing_for_your_first_b2g_build/index.html | 151 + .../archive/b2g_os/probando_firefox_os/index.html | 81 + .../archive/b2g_os/quickstart/app_tools/index.html | 16 + files/es/archive/b2g_os/quickstart/index.html | 49 + .../quickstart/intro_to_manifests/index.html | 90 + .../introduccion_a_las_open_web_apps/index.html | 108 + .../quickstart/tu_primera_aplicacion/index.html | 257 + files/es/archive/b2g_os/releases/2.0/index.html | 116 + files/es/archive/b2g_os/releases/2.1/index.html | 40 + files/es/archive/b2g_os/releases/index.html | 24 + .../index.html | 228 + .../security/application_security/index.html | 118 + files/es/archive/b2g_os/security/index.html | 72 + .../b2g_os/security/modelo_seguridad/index.html | 255 + files/es/archive/b2g_os/simulator/index.html | 258 + .../usando_el_b2g_escritorio_cliente/index.html | 134 + .../b2g_os/using_firefox_os_simulator/index.html | 57 + .../b2g_os/using_the_app_manager/index.html | 179 + .../building_blocks/action_menu/coding/index.html | 80 + .../ux/building_blocks/action_menu/index.html | 46 + .../b2g_os/ux/building_blocks/button/index.html | 231 + .../archive/b2g_os/ux/building_blocks/index.html | 268 + files/es/archive/b2g_os/ux/guia_estilo/index.html | 62 + .../es/archive/b2g_os/web_telephony_api/index.html | 28 + .../introduccion_a_la_webtelephony/index.html | 64 + files/es/archive/css3/index.html | 822 + .../index.html" | 201 + .../crear_microformatos_en_javascript/index.html" | 111 + .../es/archive/est\303\241ndares_web/index.html" | 64 + .../index.html" | 446 + .../index.html" | 268 + .../index.html" | 62 + files/es/archive/index.html | 21 + files/es/archive/jxon/index.html | 1509 ++ files/es/archive/mdn/index.html | 16 + files/es/archive/meta_docs/index.html | 15 + .../mdn_content_on_webplatform.org/index.html | 19 + .../meta_docs/mdn_page_layout_guide/index.html | 10 + .../index.html" | 97 + files/es/archive/misc_top_level/index.html | 8 + .../usar_las_preferencias_de_contenido/index.html | 38 + .../firefox/el_uso_de_microformatos/index.html | 218 + files/es/archive/mozilla/firefox/index.html | 8 + .../index.html | 264 + files/es/archive/mozilla/index.html | 10 + files/es/archive/mozilla/jetpack/index.html | 39 + .../table_layout_regression_tests/index.html | 204 + files/es/archive/mozilla/xbl/index.html | 27 + files/es/archive/mozilla/xul/action/index.html | 87 + files/es/archive/mozilla/xul/attribute/index.html | 304 + .../archive/mozilla/xul/bestiario_xul/index.html | 186 + .../index.html" | 187 + files/es/archive/mozilla/xul/dialog/index.html | 383 + files/es/archive/mozilla/xul/elementos/index.html | 323 + files/es/archive/mozilla/xul/events/index.html | 460 + .../xul/gu\303\255a_de_plantillas/index.html" | 6 + .../ordenar_resultados/index.html" | 100 + files/es/archive/mozilla/xul/index.html | 28 + files/es/archive/mozilla/xul/method/index.html | 174 + .../archive/mozilla/xul/property/align/index.html | 12 + .../mozilla/xul/property/buttons/index.html | 21 + files/es/archive/mozilla/xul/property/index.html | 273 + files/es/archive/mozilla/xul/style/index.html | 31 + .../tutorial_de_xul/actualizar_comandos/index.html | 62 + .../tutorial_de_xul/archivos_manifest/index.html | 155 + .../tutorial_de_xul/atajos_de_teclado/index.html | 376 + .../a\303\261adiendo_botones/index.html" | 111 + .../a\303\261adiendo_elementos_html/index.html" | 106 + .../index.html" | 54 + .../index.html" | 133 + .../index.html" | 98 + .../barra_de_herramientas/index.html | 60 + .../barras_de_desplazamiento/index.html | 74 + .../xul/tutorial_de_xul/cajas_de_grupo/index.html | 61 + .../index.html" | 39 + .../index.html" | 106 + .../xul/tutorial_de_xul/comandos/index.html | 171 + .../controles_de_entrada/index.html | 86 + .../tutorial_de_xul/controles_de_listas/index.html | 171 + .../creando_un_asistente/index.html | 138 + .../creando_un_instalador/index.html | 95 + .../tutorial_de_xul/creando_una_ventana/index.html | 105 + .../index.html" | 108 + .../detalles_del_modelo_de_caja/index.html | 89 + .../xul/tutorial_de_xul/divisores/index.html | 136 + .../di\303\241logos_abrir_y_guardar/index.html" | 85 + .../tutorial_de_xul/el_modelo_de_caja/index.html | 192 + .../emisores_y_receptores/index.html | 118 + .../xul/tutorial_de_xul/estructura_xul/index.html | 159 + .../foco_y_selecci\303\263n/index.html" | 179 + .../index.html | 44 + .../archive/mozilla/xul/tutorial_de_xul/index.html | 123 + .../tutorial_de_xul/instalando_scripts/index.html | 80 + .../tutorial_de_xul/interfaces_xpcom/index.html | 132 + .../introducci\303\263n/index.html" | 75 + .../introducci\303\263n_a_rdf/index.html" | 136 + .../xul/tutorial_de_xul/la_url_chrome/index.html | 59 + .../tutorial_de_xul/manipulando_listas/index.html | 168 + .../medidores_de_progreso/index.html | 41 + .../men\303\272s_con_desplazamiento/index.html" | 56 + .../men\303\272s_de_barras_simples/index.html" | 168 + .../men\303\272s_emergentes/index.html" | 228 + .../modelo_de_objeto_de_documento/index.html | 230 + .../modificando_una_interfaz_xul/index.html | 157 + .../m\303\241s_asistentes/index.html" | 88 + .../index.html" | 102 + .../index.html" | 132 + .../index.html" | 128 + .../m\303\241s_gestores_de_eventos/index.html" | 168 + .../objeto_de_caja_de_\303\241rbol/index.html" | 190 + .../paneles_de_contenidos/index.html | 48 + .../xul/tutorial_de_xul/plantillas/index.html | 191 + .../index.html | 229 + .../xul/tutorial_de_xul/rejillas/index.html | 141 + .../index.html" | 94 + .../tutorial_de_xul/usando_espaciadores/index.html | 103 + .../xul/tutorial_de_xul/\303\241rboles/index.html" | 194 + .../\303\241rboles_y_plantillas/index.html" | 138 + .../archive/mozilla/xul/xul_reference/index.html | 318 + .../xul_element_attributes/index.html | 551 + .../mozilla/xulrunner/componentes/index.html | 16 + files/es/archive/mozilla/xulrunner/index.html | 96 + .../primeros_pasos_con_xulrunner/index.html | 280 + files/es/archive/rss/index.html | 56 + files/es/archive/rss/primeros_pasos/index.html | 53 + files/es/archive/rss/versiones/index.html | 115 + .../index.html" | 78 + files/es/archive/security/index.html | 14 + .../index.html | 102 + files/es/archive/themes/index.html | 11 + .../tutoriales-para-principiantes/index.html | 8 + files/es/archive/web/index.html | 12 + files/es/archive/web/javascript/index.html | 12 + .../legacy_generator_function_statement/index.html | 63 + .../index.html | 85 + files/es/archive/web/liveconnect/index.html | 23 + files/es/archive/web/liveconnect/java/index.html | 15 + .../archive/web/liveconnect/javaarray/index.html | 65 + .../archive/web/liveconnect/javaclass/index.html | 64 + .../archive/web/liveconnect/javaobject/index.html | 61 + .../archive/web/liveconnect/javapackage/index.html | 39 + .../es/archive/web/liveconnect/netscape/index.html | 23 + .../es/archive/web/liveconnect/packages/index.html | 44 + files/es/archive/web/liveconnect/sun/index.html | 17 + files/es/arrastrar_y_soltar/index.html | 77 + .../index.html" | 47 + .../index.html" | 51 + .../index.html" | 53 + .../index.html" | 287 + .../configuraci\303\263n_r\303\241pida/index.html" | 73 + files/es/browserid/funciones_avanzadas/index.html | 43 + files/es/browserid/index.html | 5 + .../index.html | 39 + files/es/building_an_extension/index.html | 379 + files/es/bundles/index.html | 65 + .../es/cadenas_del_user_agent_de_gecko/index.html | 55 + files/es/cambios_del_tema_en_firefox_2/index.html | 883 + .../cambios_en_los_temas_de_firefox_3/index.html | 101 + .../cat\303\241logo/algoritmo_frecency/index.html" | 138 + .../direcciones_web_consultas_places/index.html" | 345 + "files/es/cat\303\241logo/index.html" | 19 + files/es/code_snippets/index.html | 5 + .../pesta\303\261as_del_navegador/index.html" | 13 + files/es/columnas_con_css-3/index.html | 68 + files/es/como_crear_un_microresumen/index.html | 175 + files/es/compilar_e_instalar/index.html | 72 + files/es/components.utils.import/index.html | 62 + .../index.html | 81 + files/es/consola_de_errores/index.html | 77 + .../index.html" | 72 + .../index.html | 154 + .../index.html" | 274 + .../interior_del_componente/index.html" | 216 + .../prefacio/index.html" | 39 + .../un_vistazo_de_xpcom/index.html" | 281 + .../uso_de_componentes_xpcom/index.html" | 318 + .../index.html" | 146 + .../como_empezar/index.html | 108 + .../creando_un_skin_para_firefox/uuid/index.html | 16 + files/es/creando_un_tema_para_firefox/index.html | 36 + "files/es/creando_una_extensi\303\263n/index.html" | 236 + .../index.html" | 122 + .../crear_un_panel_lateral_en_firefox/index.html | 163 + .../index.html" | 178 + .../index.html" | 205 + .../index.html" | 580 + files/es/css/media_queries/index.html | 828 + files/es/css/using_css_gradients/index.html | 386 + "files/es/css_din\303\241mico/index.html" | 339 + .../index.html" | 191 + .../index.html" | 108 + files/es/desarrollando_mozilla/index.html | 16 + files/es/desarrollo_web/index.html | 59 + files/es/desarrollo_web/web_adaptable/index.html | 39 + files/es/descripcion_general_sobre_nss/index.html | 19 + .../index.html" | 504 + .../index.html" | 56 + files/es/dhtml/index.html | 47 + .../index.html | 49 + .../index.html" | 5 + files/es/dibujar_texto_usando_canvas/index.html | 67 + files/es/dom/almacenamiento/index.html | 302 + files/es/dom/document.cookie/index.html | 119 + files/es/dom/index.html | 86 + .../ejemplo/index.html | 415 + .../index.html | 228 + files/es/dom/touch_events/index.html | 292 + files/es/dom_inspector/index.html | 29 + .../drag_and_drop/drag_and_drop_archivo/index.html | 117 + files/es/dragdrop/drag_and_drop/index.html | 57 + files/es/dragdrop/index.html | 10 + .../es/dragdrop/recommended_drag_types/index.html | 144 + files/es/e4x/index.html | 25 + files/es/empaquetado_de_extensiones/index.html | 29 + files/es/empaquetar_un_tema/index.html | 109 + .../escribir_c\303\263digo_localizable/index.html" | 25 + .../index.html | 108 + .../index.html" | 698 + .../etiquetas_audio_y_video_en_firefox/index.html | 46 + files/es/eventos_arrastrar_y_soltar/index.html | 31 + .../index.html" | 31 + .../extensions/bootstrapped_extensions/index.html | 226 + files/es/extensions/community/index.html | 19 + files/es/extensions/index.html | 107 + .../es/extensions/m\303\263vil_clone/index.html" | 86 + files/es/faq_de_mercurial/index.html | 237 + files/es/faq_incrustando_mozilla/index.html | 70 + .../es/firefox_1.5_para_desarrolladores/index.html | 164 + .../es/firefox_19_para_desarrolladores/index.html | 66 + files/es/firefox_2_para_desarrolladores/index.html | 157 + .../es/firefox_3.5_para_desarrolladores/index.html | 231 + files/es/firefox_3_para_desarrolladores/index.html | 283 + .../introduction_to_extensions/index.html | 159 + .../index.html | 78 + .../index.html | 43 + "files/es/fragmentos_de_c\303\263digo/index.html" | 13 + files/es/fuel/annotations/index.html | 121 + files/es/fuel/application/index.html | 81 + files/es/fuel/bookmark/index.html | 89 + files/es/fuel/bookmarkfolder/index.html | 144 + files/es/fuel/browsertab/index.html | 158 + files/es/fuel/console/index.html | 65 + files/es/fuel/eventitem/index.html | 56 + files/es/fuel/eventlistener/index.html | 49 + files/es/fuel/events/index.html | 72 + files/es/fuel/extension/index.html | 61 + files/es/fuel/extensions/index.html | 77 + files/es/fuel/index.html | 33 + files/es/fuel/preference/index.html | 81 + files/es/fuel/preferencebranch/index.html | 147 + files/es/fuel/sessionstorage/index.html | 97 + files/es/fuel/window/index.html | 87 + files/es/funciones/index.html | 8 + files/es/games/anatomy/index.html | 325 + files/es/games/herramients/asm.js/index.html | 29 + files/es/games/herramients/index.html | 46 + files/es/games/index.html | 74 + files/es/games/introduccion/index.html | 167 + .../index.html" | 108 + .../publishing_games/game_distribution/index.html | 140 + files/es/games/publishing_games/index.html | 32 + .../monetizaci\303\263n_de_los_juegos/index.html" | 100 + .../techniques/2d_collision_detection/index.html | 181 + files/es/games/techniques/3d_on_the_web/index.html | 113 + files/es/games/techniques/index.html | 32 + .../techniques/webrtc_data_channels/index.html | 93 + .../animations_and_tweens/index.html | 117 + .../2d_breakout_game_phaser/botones/index.html | 106 + .../collision_detection/index.html | 61 + .../2d_breakout_game_phaser/extra_lives/index.html | 127 + .../2d_breakout_game_phaser/game_over/index.html | 55 + .../tutorials/2d_breakout_game_phaser/index.html | 63 + .../initialize_the_framework/index.html | 81 + .../move_the_ball/index.html | 51 + .../rebotar_en_las_paredes/index.html | 51 + .../2d_breakout_game_phaser/scaling/index.html | 56 + .../2d_breakout_game_phaser/the_score/index.html | 78 + .../win_the_game/index.html | 60 + .../bounce_off_the_walls/index.html | 101 + .../construye_grupo_bloques/index.html | 126 + .../control_pala_y_teclado/index.html | 130 + .../controles_raton/index.html | 53 + .../create_the_canvas_and_draw_on_it/index.html | 108 + .../deteccion_colisiones/index.html | 128 + .../fin_del_juego/index.html | 75 + .../index.html | 52 + .../mueve_la_bola/index.html | 154 + .../terminando/index.html | 95 + .../track_the_score_and_win/index.html | 92 + .../index.html | 437 + files/es/games/workflows/index.html | 10 + files/es/gecko/index.html | 25 + files/es/gecko_sdk/index.html | 117 + "files/es/generaci\303\263n_de_guids/index.html" | 61 + files/es/glossary/404/index.html | 18 + files/es/glossary/502/index.html | 22 + files/es/glossary/abstraction/index.html | 29 + files/es/glossary/accessibility/index.html | 33 + files/es/glossary/accessibility_tree/index.html | 41 + files/es/glossary/adobe_flash/index.html | 21 + files/es/glossary/ajax/index.html | 32 + files/es/glossary/algoritmo/index.html | 9 + files/es/glossary/api/index.html | 15 + files/es/glossary/apple_safari/index.html | 29 + files/es/glossary/application_context/index.html | 13 + files/es/glossary/argumento/index.html | 20 + files/es/glossary/aria/index.html | 14 + files/es/glossary/arpa/index.html | 17 + files/es/glossary/arpanet/index.html | 14 + .../index.html" | 18 + files/es/glossary/arreglos/index.html | 41 + files/es/glossary/ascii/index.html | 15 + "files/es/glossary/as\303\255ncrono/index.html" | 31 + files/es/glossary/atag/index.html | 21 + files/es/glossary/atributo/index.html | 15 + files/es/glossary/atributo_global/index.html | 26 + files/es/glossary/bandwidth/index.html | 12 + files/es/glossary/bigint/index.html | 23 + files/es/glossary/blink/index.html | 25 + files/es/glossary/block/css/index.html | 16 + files/es/glossary/block/index.html | 8 + files/es/glossary/boolean/index.html | 25 + files/es/glossary/browser/index.html | 32 + files/es/glossary/browsing_context/index.html | 25 + files/es/glossary/buffer/index.html | 17 + files/es/glossary/cabecera_general/index.html | 8 + files/es/glossary/cacheable/index.html | 42 + "files/es/glossary/cach\303\251/index.html" | 17 + files/es/glossary/callback_function/index.html | 33 + files/es/glossary/canvas/index.html | 32 + files/es/glossary/caracter/index.html | 22 + files/es/glossary/cdn/index.html | 17 + files/es/glossary/challenge/index.html | 16 + files/es/glossary/character_encoding/index.html | 28 + files/es/glossary/chrome/index.html | 17 + files/es/glossary/cid/index.html | 17 + files/es/glossary/cifrado/index.html | 32 + .../index.html" | 18 + files/es/glossary/class/index.html | 22 + files/es/glossary/clausura/index.html | 22 + files/es/glossary/clave/index.html | 19 + files/es/glossary/codec/index.html | 23 + files/es/glossary/coercion/index.html | 22 + files/es/glossary/compile/index.html | 32 + files/es/glossary/compile_time/index.html | 15 + files/es/glossary/computer_programming/index.html | 21 + .../es/glossary/conjunto_de_caracteres/index.html | 31 + files/es/glossary/constante/index.html | 20 + files/es/glossary/constructor/index.html | 47 + files/es/glossary/cookie/index.html | 21 + files/es/glossary/copyleft/index.html | 21 + .../es/glossary/criptoan\303\241lisis/index.html" | 21 + "files/es/glossary/criptograf\303\255a/index.html" | 21 + files/es/glossary/cross-site_scripting/index.html | 34 + files/es/glossary/crud/index.html | 17 + files/es/glossary/csrf/index.html | 19 + files/es/glossary/css/index.html | 44 + files/es/glossary/descifrado/index.html | 33 + files/es/glossary/doctype/index.html | 22 + files/es/glossary/dom/index.html | 30 + files/es/glossary/domain/index.html | 30 + files/es/glossary/dtd/index.html | 6 + .../dynamic_programming_language/index.html | 16 + files/es/glossary/ecmascript/index.html | 23 + files/es/glossary/element/index.html | 19 + files/es/glossary/elemento/index.html | 7 + files/es/glossary/empty_element/index.html | 30 + files/es/glossary/encapsulation/index.html | 17 + "files/es/glossary/encriptaci\303\263n/index.html" | 23 + files/es/glossary/entidad/index.html | 60 + files/es/glossary/espacio_en_blanco/index.html | 45 + files/es/glossary/estructura_de_datos/index.html | 18 + files/es/glossary/event/index.html | 24 + files/es/glossary/flex/index.html | 46 + files/es/glossary/flex_container/index.html | 32 + files/es/glossary/flexbox/index.html | 44 + files/es/glossary/fps/index.html | 10 + files/es/glossary/ftp/index.html | 15 + .../glossary/funcion_de_primera_clase/index.html | 111 + "files/es/glossary/funci\303\263n/index.html" | 91 + files/es/glossary/gif/index.html | 19 + files/es/glossary/git/index.html | 18 + files/es/glossary/google_chrome/index.html | 126 + files/es/glossary/gpl/index.html | 30 + files/es/glossary/grid/index.html | 74 + files/es/glossary/grid_areas/index.html | 78 + files/es/glossary/grid_column/index.html | 27 + files/es/glossary/grid_lines/index.html | 176 + files/es/glossary/grid_rows/index.html | 27 + files/es/glossary/head/index.html | 20 + files/es/glossary/hilo_principal/index.html | 30 + files/es/glossary/hoisting/index.html | 93 + files/es/glossary/html/index.html | 47 + files/es/glossary/html5/index.html | 12 + files/es/glossary/http/index.html | 25 + files/es/glossary/https/index.html | 15 + files/es/glossary/hyperlink/index.html | 37 + files/es/glossary/hypertext/index.html | 24 + files/es/glossary/ide/index.html | 21 + files/es/glossary/identificador/index.html | 39 + files/es/glossary/iife/index.html | 53 + files/es/glossary/index.html | 30 + files/es/glossary/indexeddb/index.html | 13 + files/es/glossary/inmutable/index.html | 23 + files/es/glossary/internet/index.html | 16 + files/es/glossary/ip_address/index.html | 16 + files/es/glossary/ipv6/index.html | 17 + files/es/glossary/irc/index.html | 8 + files/es/glossary/isp/index.html | 20 + files/es/glossary/iu/index.html | 19 + files/es/glossary/java/index.html | 23 + files/es/glossary/javascript/index.html | 52 + files/es/glossary/jpeg/index.html | 14 + files/es/glossary/jquery/index.html | 64 + files/es/glossary/json/index.html | 16 + files/es/glossary/keyword/index.html | 22 + files/es/glossary/lgpl/index.html | 28 + files/es/glossary/long_task/index.html | 17 + files/es/glossary/metadato/index.html | 24 + files/es/glossary/miga-de-pan/index.html | 17 + files/es/glossary/mitm/index.html | 29 + files/es/glossary/mixin/index.html | 34 + files/es/glossary/mobile_first/index.html | 10 + files/es/glossary/mozilla_firefox/index.html | 30 + files/es/glossary/mvc/index.html | 54 + "files/es/glossary/m\303\251todo/index.html" | 28 + files/es/glossary/node.js/index.html | 27 + files/es/glossary/node/dom/index.html | 14 + files/es/glossary/node/index.html | 13 + files/es/glossary/nombre_de_dominio/index.html | 15 + .../nombre_de_encabezado_prohibido/index.html | 47 + files/es/glossary/null/index.html | 28 + files/es/glossary/numero/index.html | 24 + files/es/glossary/objecto/index.html | 13 + files/es/glossary/oop/index.html | 22 + files/es/glossary/operador/index.html | 17 + files/es/glossary/operando/index.html | 15 + files/es/glossary/parse/index.html | 23 + files/es/glossary/php/index.html | 57 + files/es/glossary/pila_llamadas/index.html | 92 + files/es/glossary/polyfill/index.html | 18 + files/es/glossary/pop/index.html | 28 + files/es/glossary/port/index.html | 22 + files/es/glossary/preflight_peticion/index.html | 33 + files/es/glossary/preprocesador_css/index.html | 21 + files/es/glossary/primitivo/index.html | 125 + .../es/glossary/progressive_enhancement/index.html | 24 + files/es/glossary/promise/index.html | 30 + files/es/glossary/propiedad/index.html | 11 + files/es/glossary/protocol/index.html | 20 + .../prototype-based_programming/index.html | 16 + files/es/glossary/prototype/index.html | 16 + files/es/glossary/pseudo-clase/index.html | 20 + "files/es/glossary/pseudoc\303\263digo/index.html" | 18 + .../es/glossary/public-key_cryptography/index.html | 18 + files/es/glossary/python/index.html | 24 + "files/es/glossary/recursi\303\263n/index.html" | 18 + files/es/glossary/reflow/index.html | 12 + files/es/glossary/regular_expression/index.html | 29 + files/es/glossary/responsive_web_design/index.html | 16 + files/es/glossary/rest/index.html | 30 + files/es/glossary/rgb/index.html | 27 + files/es/glossary/rss/index.html | 29 + files/es/glossary/ruby/index.html | 24 + files/es/glossary/scope/index.html | 41 + files/es/glossary/scv/index.html | 20 + files/es/glossary/seguro/index.html | 40 + files/es/glossary/sentencias/index.html | 23 + files/es/glossary/seo/index.html | 37 + files/es/glossary/sgml/index.html | 21 + files/es/glossary/simd/index.html | 20 + files/es/glossary/sincronico/index.html | 24 + files/es/glossary/sisd/index.html | 20 + .../glossary/sistema_gestion_contenidos/index.html | 18 + files/es/glossary/sld/index.html | 20 + files/es/glossary/sloppy_mode/index.html | 22 + files/es/glossary/slug/index.html | 17 + files/es/glossary/smtp/index.html | 33 + files/es/glossary/sql/index.html | 25 + files/es/glossary/string/index.html | 22 + files/es/glossary/svg/index.html | 33 + files/es/glossary/svn/index.html | 24 + files/es/glossary/symbol/index.html | 21 + .../glossary/symmetric-key_cryptography/index.html | 18 + files/es/glossary/tag/index.html | 24 + files/es/glossary/tcp/index.html | 27 + files/es/glossary/textocifrado/index.html | 19 + files/es/glossary/textosimple/index.html | 14 + files/es/glossary/three_js/index.html | 21 + .../es/glossary/tipado_din\303\241mico/index.html" | 24 + .../index.html" | 18 + files/es/glossary/truthy/index.html | 41 + files/es/glossary/type/index.html | 21 + files/es/glossary/undefined/index.html | 15 + files/es/glossary/unicode/index.html | 19 + files/es/glossary/uri/index.html | 20 + files/es/glossary/url/index.html | 34 + files/es/glossary/utf-8/index.html | 27 + files/es/glossary/ux/index.html | 22 + files/es/glossary/validador/index.html | 19 + files/es/glossary/valor/index.html | 19 + files/es/glossary/variable/index.html | 27 + files/es/glossary/vendor_prefix/index.html | 66 + files/es/glossary/viewport/index.html | 23 + files/es/glossary/wcag/index.html | 38 + files/es/glossary/webkit/index.html | 32 + files/es/glossary/websockets/index.html | 37 + files/es/glossary/webvtt/index.html | 29 + files/es/glossary/whatwg/index.html | 30 + files/es/glossary/world_wide_web/index.html | 42 + files/es/glossary/wrapper/index.html | 31 + files/es/glossary/xform/index.html | 14 + files/es/glossary/xml/index.html | 30 + "files/es/gr\303\241ficos_png_animados/index.html" | 548 + .../index.html" | 23 + .../index.html" | 192 + .../index.html" | 176 + files/es/herramientas/borrador/index.html | 56 + files/es/herramientas/index.html | 13 + files/es/how_to_create_a_dom_tree/index.html | 130 + files/es/html/elemento/datalist/index.html | 7 + files/es/html/elemento/form/index.html | 5 + files/es/html/elemento/section/index.html | 177 + files/es/html/html5/forms_in_html5/index.html | 118 + .../es/html/html5/formularios_en_html5/index.html | 44 + .../es/html/html5/html5_lista_elementos/index.html | 598 + files/es/html/html5/html5_parser/index.html | 64 + files/es/html/html5/index.html | 199 + .../html5/introducci\303\263n_a_html5/index.html" | 16 + .../html5/validacion_de_restricciones/index.html | 345 + files/es/incrustando_mozilla/comunidad/index.html | 7 + files/es/incrustando_mozilla/index.html | 47 + files/es/indexeddb/index.html | 145 + .../index.html" | 33 + .../index.html | 50 + files/es/introduccion_venkman/index.html | 261 + .../index.html" | 360 + .../index.html" | 248 + files/es/ipdl/index.html | 18 + files/es/javascript_code_modules/using/index.html | 138 + files/es/l10n_en_mercurial/index.html | 133 + files/es/la_plataforma_mozilla/index.html | 13 + .../accessibility_troubleshooting/index.html | 144 + .../accessibility/css_and_javascript/index.html | 359 + files/es/learn/accessibility/html/index.html | 588 + files/es/learn/accessibility/index.html | 60 + files/es/learn/accessibility/mobile/index.html | 346 + .../qu\303\251_es_la_accesibilidad/index.html" | 211 + files/es/learn/aprender_y_obtener_ayuda/index.html | 321 + files/es/learn/codificacion-scripting/index.html | 10 + .../common_questions/cuanto_cuesta/index.html | 162 + .../dise\303\261os_web_comunes/index.html" | 115 + .../how_does_the_internet_work/index.html | 99 + files/es/learn/common_questions/index.html | 145 + .../index.html | 119 + .../que_es_un_servidor_web/index.html | 120 + .../que_software_necesito/index.html | 226 + .../qu\303\251_es_una_url/index.html" | 152 + .../set_up_a_local_testing_server/index.html | 113 + .../thinking_before_coding/index.html | 177 + .../what_are_browser_developer_tools/index.html | 248 + .../what_are_hyperlinks/index.html | 91 + .../what_is_a_domain_name/index.html | 157 + files/es/learn/como_contribuir/index.html | 88 + .../building_blocks/cascada_y_herencia/index.html | 333 + .../contenido_desbordado/index.html | 123 + .../css/building_blocks/depurar_el_css/index.html | 198 + .../dimensionar_elementos_en_css/index.html | 129 + .../building_blocks/el_modelo_de_caja/index.html | 343 + .../css/building_blocks/fondos_y_bordes/index.html | 306 + .../index.html" | 193 + files/es/learn/css/building_blocks/index.html | 94 + .../index.html | 165 + .../selectores_css/combinadores/index.html | 111 + .../css/building_blocks/selectores_css/index.html | 223 + .../pseudo-clases_y_pseudo-elementos/index.html | 397 + .../selectores_de_atributos/index.html | 154 + .../selectores_de_tipo_clase_e_id/index.html | 117 + .../css/building_blocks/styling_tables/index.html | 282 + .../valores_y_unidades_css/index.html | 392 + .../css_layout/dise\303\261o_receptivo/index.html" | 324 + files/es/learn/css/css_layout/flexbox/index.html | 337 + files/es/learn/css/css_layout/floats/index.html | 505 + .../learn/css/css_layout/flujo_normal/index.html | 95 + files/es/learn/css/css_layout/grids/index.html | 696 + files/es/learn/css/css_layout/index.html | 87 + .../css/css_layout/introducci\303\263n/index.html" | 701 + .../es/learn/css/css_layout/positioning/index.html | 469 + .../soporte_a_navegadores_antiguos/index.html | 237 + .../css/first_steps/comenzando_css/index.html | 264 + .../css/first_steps/como_funciona_css/index.html | 156 + .../first_steps/como_se_estructura_css/index.html | 512 + files/es/learn/css/first_steps/index.html | 52 + .../css/first_steps/qu\303\251_es_css/index.html" | 127 + .../usa_tu_nuevo_conocimiento/index.html | 100 + files/es/learn/css/index.html | 63 + .../fundamental_css_comprehension/index.html | 117 + .../learn/css/styling_text/fuentes_web/index.html | 197 + .../learn/css/styling_text/fundamentals/index.html | 732 + files/es/learn/css/styling_text/index.html | 57 + .../css/styling_text/styling_links/index.html | 434 + .../css/styling_text/styling_lists/index.html | 392 + .../s\303\241bercomo/generated_content/index.html" | 178 + "files/es/learn/css/s\303\241bercomo/index.html" | 81 + files/es/learn/desarrollo_web_front-end/index.html | 201 + .../css_basics/index.html | 283 + .../c\303\263mo_funciona_la_web/index.html" | 100 + .../html_basics/index.html | 224 + .../learn/getting_started_with_the_web/index.html | 68 + .../instalacion_de_software_basico/index.html | 83 + .../javascript_basics/index.html | 456 + .../la_web_y_los_estandares_web/index.html | 172 + .../manejando_los_archivos/index.html | 120 + .../publishing_your_website/index.html | 195 + .../what_will_your_website_look_like/index.html | 113 + .../cross_browser_testing/index.html | 39 + .../learn/herramientas_y_pruebas/github/index.html | 92 + files/es/learn/herramientas_y_pruebas/index.html | 58 + .../index.html | 133 + .../react_getting_started/index.html | 476 + .../vue_primeros_pasos/index.html | 294 + .../understanding_client-side_tools/index.html | 46 + files/es/learn/html/como/index.html | 141 + .../html/como/usando_atributos_de_datos/index.html | 75 + .../index.html | 786 + .../forms/how_to_structure_an_html_form/index.html | 320 + files/es/learn/html/forms/index.html | 366 + .../index.html | 2003 ++ .../index.html | 75 + .../index.html | 87 + .../sending_and_retrieving_form_data/index.html | 328 + .../learn/html/forms/styling_html_forms/index.html | 345 + .../html/forms/the_native_form_widgets/index.html | 326 + .../learn/html/forms/tipos_input_html5/index.html | 276 + .../forms/validacion_formulario_datos/index.html | 845 + .../html/forms/your_first_html_form/index.html | 305 + files/es/learn/html/index.html | 66 + .../advanced_text_formatting/index.html | 695 + .../creating_hyperlinks/index.html | 346 + .../introduccion_a_html/debugging_html/index.html | 171 + .../html/introduccion_a_html/estructura/index.html | 298 + .../index.html" | 105 + files/es/learn/html/introduccion_a_html/index.html | 77 + .../html/introduccion_a_html/iniciar/index.html | 767 + .../marking_up_a_letter/index.html | 88 + .../html/introduccion_a_html/metados_en/index.html | 299 + .../index.html | 99 + .../index.html" | 72 + .../index.html | 67 + .../html/introduccion_a_html/texto/index.html | 970 + .../adding_vector_graphics_to_the_web/index.html | 366 + .../images_in_html/index.html | 510 + .../learn/html/multimedia_and_embedding/index.html | 73 + .../mozilla_splash_page/index.html | 138 + .../other_embedding_technologies/index.html | 371 + .../responsive_images/index.html | 265 + .../video_and_audio_content/index.html | 319 + .../index.html" | 563 + .../index.html | 471 + files/es/learn/html/tablas/index.html | 34 + .../html/tablas/structuring_planet_data/index.html | 72 + files/es/learn/index.html | 135 + .../javascript/asynchronous/async_await/index.html | 411 + .../javascript/asynchronous/concepts/index.html | 162 + files/es/learn/javascript/asynchronous/index.html | 43 + .../building_blocks/bucle_codigo/index.html | 923 + .../building_blocks/conditionals/index.html | 778 + .../construyendo_tu_propia_funcion/index.html | 252 + .../javascript/building_blocks/eventos/index.html | 578 + .../building_blocks/functions/index.html | 400 + .../building_blocks/galeria_de_imagenes/index.html | 144 + .../es/learn/javascript/building_blocks/index.html | 71 + .../building_blocks/return_values/index.html | 168 + .../client-side_storage/index.html | 788 + .../client-side_web_apis/fetching_data/index.html | 373 + .../javascript/client-side_web_apis/index.html | 53 + .../introducci\303\263n/index.html" | 274 + .../first_steps/a_first_splash/index.html | 613 + .../learn/javascript/first_steps/arrays/index.html | 665 + .../generador_de_historias_absurdas/index.html | 147 + files/es/learn/javascript/first_steps/index.html | 88 + .../first_steps/matem\303\241ticas/index.html" | 443 + .../index.html | 122 + .../qu\303\251_es_javascript/index.html" | 436 + .../javascript/first_steps/strings/index.html | 299 + .../test_your_skills_colon__math/index.html | 91 + .../test_your_skills_colon__variables/index.html | 84 + .../first_steps/useful_string_methods/index.html | 718 + .../javascript/first_steps/variables/index.html | 340 + .../first_steps/what_went_wrong/index.html | 268 + files/es/learn/javascript/howto/index.html | 317 + files/es/learn/javascript/index.html | 80 + .../adding_bouncing_balls_features/index.html | 205 + .../es/learn/javascript/objects/basics/index.html | 259 + .../index.html" | 301 + files/es/learn/javascript/objects/index.html | 67 + .../javascript/objects/inheritance/index.html | 400 + files/es/learn/javascript/objects/json/index.html | 339 + .../objects/object-oriented_js/index.html | 307 + .../objects/object_prototypes/index.html | 282 + files/es/learn/performance/index.html | 113 + .../learn/server-side/django/admin_site/index.html | 372 + .../server-side/django/authentication/index.html | 714 + .../learn/server-side/django/deployment/index.html | 672 + .../django/development_environment/index.html | 421 + .../django/django_assessment_blog/index.html | 307 + files/es/learn/server-side/django/forms/index.html | 661 + .../server-side/django/generic_views/index.html | 640 + .../learn/server-side/django/home_page/index.html | 403 + files/es/learn/server-side/django/index.html | 66 + .../django/introducci\303\263n/index.html" | 282 + .../es/learn/server-side/django/models/index.html | 490 + .../learn/server-side/django/sessions/index.html | 200 + .../server-side/django/skeleton_website/index.html | 397 + .../es/learn/server-side/django/testing/index.html | 906 + .../tutorial_local_library_website/index.html | 103 + .../django/web_application_security/index.html | 176 + .../development_environment/index.html | 407 + .../es/learn/server-side/express_nodejs/index.html | 76 + .../express_nodejs/introduction/index.html | 498 + .../server-side/express_nodejs/mongoose/index.html | 801 + .../express_nodejs/skeleton_website/index.html | 502 + .../tutorial_local_library_website/index.html | 83 + files/es/learn/server-side/index.html | 57 + .../node_server_without_framework/index.html | 81 + .../es/learn/server-side/primeros_pasos/index.html | 47 + .../primeros_pasos/introducci\303\263n/index.html" | 192 + .../primeros_pasos/seguridad_sitios_web/index.html | 177 + .../vision_general_cliente_servidor/index.html | 334 + .../primeros_pasos/web_frameworks/index.html | 306 + files/es/learn/using_github_pages/index.html | 103 + .../es/lo_b\303\241sico_de_mercurial/index.html" | 48 + "files/es/localizaci\303\263n/index.html" | 16 + .../es/localizaci\303\263n_y_plurales/index.html" | 386 + files/es/localizar_con_narro/index.html | 62 + .../index.html" | 645 + .../manifiesto_de_instalaci\303\263n/index.html" | 653 + .../index.html" | 123 + .../manual_de_compatibilidad_de_gecko/index.html | 187 + .../index.html" | 187 + files/es/mdn/about/index.html | 145 + files/es/mdn/comunidad/index.html | 54 + files/es/mdn/contribute/community/index.html | 118 + files/es/mdn/contribute/feedback/index.html | 46 + files/es/mdn/contribute/getting_started/index.html | 142 + .../convert_code_samples_to_be_live/index.html | 44 + .../contribute/howto/crear_cuenta_mdn/index.html | 32 + .../howto/document_a_css_property/index.html | 82 + .../plantilla_propiedad/index.html | 120 + .../howto/enlace_cuenta_github/index.html | 110 + .../howto/etiquetas_paginas_javascript/index.html | 83 + files/es/mdn/contribute/howto/index.html | 15 + .../howto/remover_macros_experimentales/index.html | 48 + .../contribute/howto/revision_editorial/index.html | 54 + .../contribute/howto/revision_tecnica/index.html | 44 + .../howto/set_the_summary_for_a_page/index.html | 118 + files/es/mdn/contribute/howto/tag/index.html | 385 + .../index.html" | 78 + .../write_a_new_entry_in_the_glossary/index.html | 72 + .../index.html | 106 + files/es/mdn/contribute/index.html | 70 + files/es/mdn/contribute/localize/index.html | 31 + .../localize/iniciar_una_localizacion/index.html | 108 + .../project_colon_localization_projects/index.html | 405 + .../project_colon_translating_mdn_pages/index.html | 57 + files/es/mdn/contribute/procesos/index.html | 14 + .../es/mdn/contribute/registro_persona/index.html | 36 + files/es/mdn/contribute/tareas/index.html | 17 + files/es/mdn/contribute/team_status/index.html | 93 + files/es/mdn/guidelines/content_blocks/index.html | 46 + .../convenciones_y_definiciones/index.html | 201 + files/es/mdn/guidelines/index.html | 10 + .../index.html" | 146 + files/es/mdn/index.html | 37 + .../kuma/contributing/getting_started/index.html | 15 + files/es/mdn/kuma/contributing/index.html | 49 + files/es/mdn/kuma/index.html | 55 + .../mdn/structures/ejemplos_ejecutables/index.html | 243 + files/es/mdn/structures/index.html | 16 + .../macros/commonly-used_macros/index.html | 210 + files/es/mdn/structures/macros/index.html | 53 + files/es/mdn/structures/macros/otras/index.html | 181 + .../structures/tablas_de_compatibilidad/index.html | 476 + files/es/mdn/tools/index.html | 45 + .../tools/introduction_to_kumascript/index.html | 683 + files/es/mdn/tools/page_regeneration/index.html | 32 + files/es/mdn/tools/template_editing/index.html | 14 + files/es/mdn/user_guide/index.html | 13 + files/es/mdn/user_guide/writing/index.html | 67 + files/es/mdn_en_diez/index.html | 39 + files/es/mejoras_css_en_firefox_3/index.html | 65 + files/es/mejoras_dom_en_firefox_3/index.html | 35 + .../index.html | 43 + files/es/mejoras_svg_en_firefox_3/index.html | 62 + files/es/mejoras_xul_en_firefox_3/index.html | 109 + files/es/mercurial/index.html | 35 + files/es/microsummary_topics/index.html | 64 + files/es/midas/index.html | 328 + .../index.html | 1067 + .../modo_casi_est\303\241ndar_de_gecko/index.html" | 46 + files/es/mozilla/add-ons/add-on_manager/index.html | 61 + .../mozilla/add-ons/add-on_repository/index.html | 159 + files/es/mozilla/add-ons/amo/index.html | 11 + .../mozilla/add-ons/amo/policy/contacto/index.html | 26 + files/es/mozilla/add-ons/amo/policy/index.html | 21 + .../add-ons/amo/policy/revisiones/index.html | 157 + files/es/mozilla/add-ons/code_snippets/index.html | 138 + .../add-ons/code_snippets/queryselector/index.html | 99 + files/es/mozilla/add-ons/index.html | 104 + .../lineamientos_de_complementos/index.html | 113 + .../mozilla/add-ons/overlay_extensions/index.html | 57 + files/es/mozilla/add-ons/sdk/builder/index.html | 13 + files/es/mozilla/add-ons/sdk/index.html | 84 + .../tutorials/add_a_context_menu_item/index.html | 119 + .../add_a_menu_item_to_firefox/index.html | 114 + .../adding_a_button_to_the_toolbar/index.html | 85 + .../sdk/tutorials/display_a_popup/index.html | 164 + .../sdk/tutorials/getting_started/index.html | 214 + files/es/mozilla/add-ons/sdk/tutorials/index.html | 146 + .../add-ons/sdk/tutorials/installation/index.html | 145 + .../sdk/tutorials/list_open_tabs/index.html | 66 + .../sdk/tutorials/listen_for_page_load/index.html | 38 + .../modifying_the_page_hosted_by_a_tab/index.html | 135 + .../modifying_web_pages_based_on_url/index.html | 227 + .../sdk/tutorials/open_a_web_page/index.html | 48 + .../sdk/tutorials/troubleshooting/index.html | 143 + .../es/mozilla/add-ons/themes/obsolete/index.html | 10 + .../add_toolbar_button/index.html | 33 + .../index.html | 13 + .../mozilla/add-ons/thunderbird/howtos/index.html | 128 + files/es/mozilla/add-ons/thunderbird/index.html | 137 + .../add_a_button_to_the_toolbar/index.html | 220 + .../anatomia_de_una_webextension/index.html | 120 + .../add-ons/webextensions/api/i18n/index.html | 94 + .../mozilla/add-ons/webextensions/api/index.html | 59 + .../add-ons/webextensions/api/storage/index.html | 115 + .../webextensions/api/storage/local/index.html | 95 + .../webextensions/api/storage/sync/index.html | 79 + .../webextensions/api/webnavigation/index.html | 144 + .../browser_support_for_javascript_apis/index.html | 15 + .../chrome_incompatibilities/index.html | 291 + .../webextensions/depuraci\303\263n/index.html" | 189 + .../add-ons/webextensions/examples/index.html | 24 + .../extending_the_developer_tools/index.html | 159 + .../implement_a_settings_page/index.html | 199 + files/es/mozilla/add-ons/webextensions/index.html | 155 + .../intercept_http_requests/index.html | 156 + .../webextensions/internationalization/index.html | 405 + .../webextensions/manifest.json/icons/index.html | 74 + .../add-ons/webextensions/manifest.json/index.html | 51 + .../webextensions/modify_a_web_page/index.html | 253 + .../packaging_and_installation/index.html | 90 + .../porting_from_google_chrome/index.html | 22 + .../add-ons/webextensions/prerequisitos/index.html | 17 + .../publishing_your_webextension/index.html | 105 + .../que_son_las_webextensions/index.html | 59 + .../tu_primera_webextension/index.html | 160 + .../add-ons/webextensions/tutorial/index.html | 459 + .../user_interface/accion_navegador/index.html | 50 + .../webextensions/user_interface/index.html | 95 + .../user_interface/page_actions/index.html | 96 + .../add-ons/webextensions/what_next_/index.html | 56 + files/es/mozilla/bugzilla/index.html | 59 + files/es/mozilla/bugzilla/testopia/index.html | 162 + .../index.html | 97 + files/es/mozilla/connect/index.html | 143 + .../index.html | 92 + files/es/mozilla/developer_guide/index.html | 149 + .../developer_guide/mozilla-central/index.html | 50 + .../index.html" | 343 + .../index.html" | 149 + .../mozilla/developer_guide/source_code/index.html | 56 + .../compilar_firefox_con_codigo_en_rust/index.html | 37 + .../edici\303\263n_de_desarrollador/index.html" | 59 + .../revertir/index.html" | 25 + .../firefox/experimental_features/index.html | 724 + files/es/mozilla/firefox/firefox_esr/index.html | 13 + files/es/mozilla/firefox/index.html | 73 + .../firefox/multiprocess_firefox/index.html | 75 + .../message_manager/index.html | 74 + .../message_manager/process_scripts/index.html | 81 + .../multiprocess_firefox/motivation/index.html | 46 + .../pitfalls_for_add-on_developers/index.html | 212 + .../remotepagemanager/index.html | 127 + .../index.html | 23 + .../technical_overview/index.html | 166 + .../types_of_message_manager/index.html | 179 + .../web_content_compatibility/index.html | 28 + .../which_uris_load_where/index.html | 61 + files/es/mozilla/firefox/privacy/index.html | 9 + .../errors/cookieblockedtracker/index.html | 97 + .../storage_access_policy/errors/index.html | 24 + .../privacy/storage_access_policy/index.html | 267 + .../firefox/privacy/tracking_protection/index.html | 80 + files/es/mozilla/firefox/releases/30/index.html | 92 + files/es/mozilla/firefox/releases/50/index.html | 203 + files/es/mozilla/firefox/releases/57/index.html | 299 + files/es/mozilla/firefox/releases/61/index.html | 135 + files/es/mozilla/firefox/releases/62/index.html | 235 + files/es/mozilla/firefox/releases/63/index.html | 274 + files/es/mozilla/firefox/releases/66/index.html | 162 + files/es/mozilla/firefox/releases/67/index.html | 198 + files/es/mozilla/firefox/releases/68/index.html | 233 + files/es/mozilla/firefox/releases/9/index.html | 237 + .../firefox/releases/9/updating_add-ons/index.html | 69 + files/es/mozilla/firefox/releases/index.html | 11 + files/es/mozilla/firefox_para_android/index.html | 65 + files/es/mozilla/git/index.html | 12 + files/es/mozilla/http_cache/index.html | 487 + .../index.html | 76 + files/es/mozilla/index.html | 6 + files/es/mozilla/instantbird/index.html | 58 + .../es/mozilla/javascript_code_modules/index.html | 146 + .../javascript_code_modules/promise.jsm/index.html | 134 + .../promise.jsm/promise/index.html | 218 + .../source-editor.jsm/index.html | 1549 ++ .../javascript_code_modules/timer.jsm/index.html | 32 + files/es/mozilla/localization/index.html | 24 + .../localization/l10n_style_guide/index.html | 363 + .../l10n_style_guide/your_language/index.html | 40 + .../localizing_with_pontoon/index.html | 139 + .../localization/notas_de_localizacion/index.html | 25 + .../quick_start_guide/fase_qa/index.html | 209 + .../localization/quick_start_guide/index.html | 55 + .../quick_start_guide/initial_setup/index.html | 99 + .../creating_localizable_web_content/index.html | 58 + files/es/mozilla/marketplace/apis/index.html | 42 + files/es/mozilla/marketplace/faq/index.html | 30 + files/es/mozilla/marketplace/index.html | 114 + .../marketplace/marketplace_apis/index.html | 56 + .../monetization/estatus_de_pagos/index.html | 32 + .../es/mozilla/marketplace/monetization/index.html | 80 + .../introduccion_monetizacion/index.html | 83 + .../normas_valoracion_usuario/index.html | 92 + .../options/introducci\303\263n/index.html" | 37 + files/es/mozilla/marketplace/publish/index.html | 69 + files/es/mozilla/marketplace/publishing/index.html | 9 + .../marketplace_screenshot_criteria/index.html | 78 + .../open_web_apps_for_android/index.html | 133 + .../publishing/packaged_apps/index.html | 190 + .../publishing/publish_options/index.html | 70 + .../marketplace/publishing/submit/index.html | 10 + .../publishing/submit/overview/index.html | 122 + .../publishing/updating_apps/index.html | 24 + files/es/mozilla/marketplace/submission/index.html | 9 + .../marketplace_review_criteria/index.html | 82 + .../submission/rating_your_content/index.html | 118 + .../testing_and_troubleshooting/index.html | 36 + files/es/mozilla/mathml_project/basics/index.html | 821 + files/es/mozilla/mathml_project/extras/index.html | 307 + files/es/mozilla/mathml_project/fonts/index.html | 60 + files/es/mozilla/mathml_project/index.html | 91 + .../mathml_project/mathml3testsuite/index.html | 64 + .../mozilla/mathml_project/screenshots/index.html | 14 + files/es/mozilla/mathml_project/start/index.html | 96 + files/es/mozilla/mathml_project/status/index.html | 325 + .../mathml_project/student_projects/index.html | 49 + files/es/mozilla/mathml_project/various/index.html | 36 + .../opciones_de_linea_de_comandos/index.html | 448 + .../index.html | 106 + files/es/mozilla/persona/branding/index.html | 42 + .../persona/browser_compatibility/index.html | 73 + files/es/mozilla/persona/faq/index.html | 59 + files/es/mozilla/persona/glosario/index.html | 67 + files/es/mozilla/persona/index.html | 131 + .../informaci\303\263n_general_idp/index.html" | 39 + files/es/mozilla/persona/quick_setup/index.html | 170 + .../persona/remote_verification_api/index.html | 199 + .../persona/security_considerations/index.html | 59 + files/es/mozilla/persona/why_persona/index.html | 30 + files/es/mozilla/preferences/index.html | 48 + files/es/mozilla/projects/index.html | 14 + .../es/mozilla/projects/nspr/reference/index.html | 770 + files/es/mozilla/projects/psm/index.html | 11 + files/es/mozilla/rendimiento/index.html | 135 + files/es/mozilla/rust/index.html | 45 + files/es/mozilla/security/index.html | 33 + .../mozilla/security/x509_certificates/index.html | 386 + files/es/mozilla/tech/index.html | 14 + files/es/mozilla/tech/toolkit_api/smile/index.html | 58 + files/es/mozilla/tech/xpcom/guide/index.html | 16 + .../tech/xpcom/language_bindings/index.html | 25 + files/es/mozilla/tech/xpcom/reference/index.html | 30 + files/es/mozilla/tech/xpidl/index.html | 26 + .../index.html" | 291 + .../agregar_barras_laterales/index.html | 198 + .../agregar_eventos_y_comandos/index.html | 135 + .../agregar_menus_y_submenus/index.html | 139 + .../agregar_ventanas_y_dialogos/index.html | 197 + .../escuela_xul/almacenamiento_local/index.html | 140 + .../index.html" | 57 + .../index.html" | 51 + .../index.html" | 210 + .../index.html" | 304 + .../index.html" | 244 + .../documentaci\303\263n_de_mozilla/index.html" | 72 + .../index.html" | 417 + .../enlazando_contenido_remoto/index.html | 231 + files/es/mozilla/tech/xul/escuela_xul/index.html | 77 + .../index.html" | 128 + .../tech/xul/escuela_xul/introduction/index.html | 54 + .../escuela_xul/manejo_de_preferencias/index.html | 305 + .../montando_un_ambiente_de_desarrollo/index.html | 244 + .../notificaciones_de_usuario_y_alertas/index.html | 94 + .../tech/xul/escuela_xul/objetos_xpcom/index.html | 378 + .../personalizar_elementos_xul_con_xbl/index.html | 544 + .../index.html" | 46 + .../uso_de_objetos_en_javascript/index.html | 338 + files/es/mozilla/thunderbird/index.html | 91 + .../thunderbird_in_the_enterprise/index.html | 37 + files/es/mozilla/toolkit_version_format/index.html | 61 + .../working_with_windows_in_chrome_code/index.html | 386 + .../xpcom/cambios_xpcom_en_gecko_2.0/index.html | 111 + .../xpcom/el_administrador_de_hilos/index.html | 33 + files/es/mozilla/xpcom/xpcom/index.html | 83 + files/es/mozistorageconnection/index.html | 470 + "files/es/m\303\263dulos_javascript/index.html" | 23 + "files/es/m\303\263vil/index.html" | 30 + .../es/m\303\263vil/viewport_meta_tag/index.html" | 89 + files/es/nsdirectoryservice/index.html | 11 + files/es/nsicancelable/index.html | 50 + files/es/nsichannel/index.html | 183 + files/es/nsidomofflineresourcelist/index.html | 228 + files/es/nsidownload/index.html | 116 + files/es/nsidownloadmanager/index.html | 442 + files/es/nsidownloadmanagerui/index.html | 126 + files/es/nsidownloadprogresslistener/index.html | 304 + files/es/nsidragservice/index.html | 317 + files/es/nsilocalfile/index.html | 121 + files/es/nsisimpleenumerator/index.html | 46 + files/es/nsisupports/addref/index.html | 20 + files/es/nsisupports/index.html | 44 + files/es/nsisupports/queryinterface/index.html | 43 + files/es/nsisupports/release/index.html | 18 + files/es/nsiuri/index.html | 441 + files/es/nsiwebprogress/index.html | 233 + files/es/nsizipwriter/index.html | 517 + files/es/nspr/index.html | 58 + files/es/nss/index.html | 17 + .../es/nss/nss_sources_building_testing/index.html | 68 + .../index.html | 24 + .../participar_en_el_proyecto_mozilla/index.html | 10 + files/es/persona/crypto/index.html | 21 + files/es/persona/iniciar_persona/index.html | 29 + files/es/persona/internationalization/index.html | 51 + files/es/persona/libraries_and_plugins/index.html | 165 + files/es/plantillas_en_firefox_3/index.html | 27 + files/es/plugins/index.html | 52 + .../index.html | 10 + .../index.html | 127 + .../index.html | 53 + .../index.html" | 5 + .../index.html" | 41 + .../index.html" | 36 + files/es/prtime/index.html | 432 + .../es/pruebas_automatizadas_de_mozilla/index.html | 51 + files/es/qa/bug_writing_guidelines/index.html | 111 + files/es/qa/confirming_unconfirmed_bugs/index.html | 44 + files/es/qa/index.html | 252 + files/es/qa/organizando_un_testday/index.html | 219 + files/es/qa/screening_duplicate_bugs/index.html | 157 + files/es/rdf/index.html | 56 + .../index.html | 161 + files/es/referencia_de_xul/index.html | 317 + .../c\303\263mo_espacioenblanco/index.html" | 476 + .../es/referencia_dom_de_gecko/ejemplos/index.html | 367 + .../es/referencia_dom_de_gecko/eventos/index.html | 72 + files/es/referencia_dom_de_gecko/index.html | 91 + .../introducci\303\263n/index.html" | 248 + .../index.html | 50 + .../es/referencia_dom_de_gecko/prefacio/index.html | 75 + files/es/rhino/comunidad/index.html | 13 + files/es/rhino/descarga_rhino/index.html | 106 + files/es/rhino/index.html | 16 + files/es/rhino/resumen/index.html | 45 + files/es/rhino_documentacon/index.html | 115 + files/es/sandbox/index.html | 29 + files/es/sax/index.html | 114 + .../index.html | 411 + files/es/seguridad_en_firefox_2/index.html | 13 + .../index.html" | 143 + files/es/server-sent_events/index.html | 99 + .../utilizando_server_sent_events_sse/index.html | 231 + files/es/servicios_web_xml/index.html | 20 + files/es/sistema_de_preferencias/index.html | 65 + files/es/social_api/glossary/index.html | 53 + files/es/social_api/guide/index.html | 32 + files/es/social_api/index.html | 65 + files/es/social_api/manifiesto/index.html | 38 + .../service_worker_api_reference/index.html | 377 + files/es/social_api/widgets/index.html | 16 + files/es/spidermonkey/index.html | 115 + files/es/storage/index.html | 252 + files/es/storage/performance/index.html | 196 + files/es/svg_en_firefox/index.html | 847 + files/es/temas/background/index.html | 99 + files/es/temas/index.html | 20 + files/es/temas/theme_concepts/index.html | 231 + files/es/thunderbird_localization/index.html | 100 + .../index.html | 46 + files/es/tools/3d_view/index.html | 83 + files/es/tools/about_colon_debugging/index.html | 255 + files/es/tools/accesos_directos/index.html | 1266 + files/es/tools/add-ons/index.html | 17 + files/es/tools/browser_console/index.html | 177 + files/es/tools/browser_toolbox/index.html | 64 + .../debugger/how_to/disable_breakpoints/index.html | 13 + files/es/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/set_a_breakpoint/index.html | 44 + .../how_to/uso_de_un_mapa_fuente/index.html | 36 + files/es/tools/debugger/index.html | 214 + .../es/tools/debugger/source_map_errors/index.html | 70 + "files/es/tools/desempe\303\261o/index.html" | 91 + .../es/tools/desempe\303\261o/ui_tour/index.html" | 134 + files/es/tools/editor_audio_web/index.html | 31 + files/es/tools/editor_estilo/index.html | 101 + files/es/tools/index.html | 211 + files/es/tools/monitor_de_red/index.html | 189 + .../tools/page_inspector/3er-panel_modo/index.html | 69 + .../how_to/abrir_el_inspector/index.html | 22 + .../index.html | 47 + .../how_to/examinar_y_editar_html/index.html | 364 + .../how_to/examine_and_edit_css/index.html | 228 + .../how_to/examine_grid_layouts/index.html | 131 + files/es/tools/page_inspector/how_to/index.html | 13 + .../inspeccionar_y_seleccionar_colores/index.html | 26 + .../index.html | 22 + .../how_to/select_an_element/index.html | 36 + .../how_to/work_with_animations/index.html | 112 + files/es/tools/page_inspector/index.html | 348 + files/es/tools/page_inspector/ui_tour/index.html | 98 + files/es/tools/profiler/index.html | 104 + .../debugging_over_a_network/index.html | 10 + .../firefox_para_android/index.html | 132 + files/es/tools/remote_debugging/index.html | 147 + files/es/tools/responsive_design_view/index.html | 18 + files/es/tools/settings/index.html | 206 + .../es/tools/storage_inspector/cookies/index.html | 51 + files/es/tools/storage_inspector/index.html | 124 + .../es/tools/tomar_capturas_de_pantalla/index.html | 42 + files/es/tools/tools_toolbox/index.html | 105 + files/es/tools/view_source/index.html | 83 + .../tools/web_console/console_messages/index.html | 391 + files/es/tools/web_console/index.html | 349 + .../iniciando_la_consola_web/index.html | 23 + .../index.html" | 188 + files/es/tools/webide/index.html | 298 + files/es/tools/webide/monitor/index.html | 158 + files/es/tools/webide/troubleshooting/index.html | 50 + files/es/tools/working_with_iframes/index.html | 28 + .../index.html | 90 + .../es/traducir_una_extensi\303\263n/index.html" | 161 + .../index.html | 337 + .../index.html | 377 + .../index.html" | 15 + files/es/usar_web_workers/index.html | 260 + .../index.html | 236 + files/es/using_the_w3c_dom_level_1_core/index.html | 93 + files/es/uso_de_nsiloginmanager/index.html | 177 + .../index.html" | 92 + files/es/venkman/index.html | 50 + files/es/vigilancia_de_plugins/index.html | 131 + files/es/vigilar_descargas/index.html | 247 + files/es/vigilar_plugins/index.html | 110 + files/es/web/accesibilidad/comunidad/index.html | 44 + files/es/web/accesibilidad/index.html | 93 + .../etiquetas_de_texto_y_nombres/index.html | 266 + .../accesibilidad/understanding_wcag/index.html | 56 + .../perceivable/color_contraste/index.html | 162 + .../understanding_wcag/perceivable/index.html | 336 + .../understanding_wcag/teclado/index.html | 92 + .../accessibility/aria/aria_techniques/index.html | 137 + .../usando_el_atributo_aria-required/index.html | 76 + .../usando_el_rol_alertdialog/index.html | 89 + .../using_the_alert_role/index.html | 138 + .../using_the_aria-label_attribute/index.html | 60 + .../accessibility/aria/forms/alertas/index.html | 147 + .../consejos_basicos_para_formularios/index.html | 115 + .../aria/forms/etiquetas_complejas/index.html | 47 + files/es/web/accessibility/aria/forms/index.html | 17 + files/es/web/accessibility/aria/index.html | 142 + files/es/web/api/abstractworker/index.html | 130 + files/es/web/api/ambient_light_events/index.html | 114 + files/es/web/api/analysernode/index.html | 218 + .../web/api/animation/animaci\303\263n/index.html" | 106 + files/es/web/api/animation/cancel/index.html | 119 + files/es/web/api/animation/effect/index.html | 104 + files/es/web/api/animation/finish/index.html | 147 + files/es/web/api/animation/id/index.html | 110 + files/es/web/api/animation/index.html | 147 + files/es/web/api/animation/oncancel/index.html | 115 + files/es/web/api/animation/onfinish/index.html | 131 + files/es/web/api/animation/pause/index.html | 106 + files/es/web/api/animation/play/index.html | 149 + files/es/web/api/animation/playbackrate/index.html | 162 + files/es/web/api/animation/playstate/index.html | 158 + files/es/web/api/animation/ready/index.html | 122 + files/es/web/api/animation/reverse/index.html | 136 + files/es/web/api/animation/starttime/index.html | 138 + files/es/web/api/animation/terminado/index.html | 120 + files/es/web/api/animation/tiempoactual/index.html | 114 + files/es/web/api/animation/timeline/index.html | 111 + .../api/animationevent/animationname/index.html | 101 + files/es/web/api/animationevent/index.html | 186 + .../web/api/api_de_almacenamiento_web/index.html | 146 + .../usando_la_api_de_almacenamiento_web/index.html | 272 + files/es/web/api/api_del_portapapeles/index.html | 76 + files/es/web/api/attr/index.html | 194 + files/es/web/api/audiobuffer/index.html | 108 + files/es/web/api/audionode/index.html | 154 + .../baseaudiocontext/createbiquadfilter/index.html | 130 + files/es/web/api/baseaudiocontext/index.html | 293 + .../es/web/api/batterymanager/charging/index.html | 28 + .../web/api/batterymanager/chargingtime/index.html | 26 + .../api/batterymanager/dischargingtime/index.html | 29 + files/es/web/api/batterymanager/index.html | 127 + files/es/web/api/batterymanager/level/index.html | 22 + .../api/batterymanager/onchargingchange/index.html | 20 + .../api/batterymanager/onlevelchange/index.html | 20 + files/es/web/api/beforeunloadevent/index.html | 70 + files/es/web/api/blob/blob/index.html | 75 + files/es/web/api/blob/index.html | 194 + files/es/web/api/blob/type/index.html | 121 + files/es/web/api/blobbuilder/index.html | 193 + files/es/web/api/body/formdata/index.html | 72 + files/es/web/api/body/index.html | 99 + files/es/web/api/body/json/index.html | 82 + files/es/web/api/cachestorage/index.html | 198 + files/es/web/api/cachestorage/keys/index.html | 74 + .../web/api/cameracapabilities/effects/index.html | 37 + .../api/cameracapabilities/fileformats/index.html | 37 + .../api/cameracapabilities/flashmodes/index.html | 37 + files/es/web/api/cameracapabilities/index.html | 86 + .../maxexposurecompensation/index.html | 33 + .../cameracapabilities/maxfocusareas/index.html | 33 + .../tutorial/compositing/ejemplo/index.html | 295 + .../api/canvas_api/tutorial/compositing/index.html | 117 + files/es/web/api/canvasimagesource/index.html | 42 + .../api/canvasrenderingcontext2d/arc/index.html | 226 + .../canvasrenderingcontext2d/beginpath/index.html | 180 + .../canvasrenderingcontext2d/clearrect/index.html | 203 + .../canvasrenderingcontext2d/drawimage/index.html | 232 + .../canvasrenderingcontext2d/fillrect/index.html | 169 + .../getimagedata/index.html | 103 + .../es/web/api/canvasrenderingcontext2d/index.html | 519 + .../canvasrenderingcontext2d/linecap/index.html | 131 + .../api/canvasrenderingcontext2d/rotate/index.html | 137 + .../api/canvasrenderingcontext2d/save/index.html | 91 + files/es/web/api/childnode/after/index.html | 181 + files/es/web/api/childnode/before/index.html | 175 + files/es/web/api/childnode/index.html | 180 + files/es/web/api/childnode/remove/index.html | 94 + files/es/web/api/childnode/replacewith/index.html | 141 + .../api/clipboardevent/clipboarddata/index.html | 58 + files/es/web/api/clipboardevent/index.html | 67 + files/es/web/api/closeevent/index.html | 237 + files/es/web/api/comment/index.html | 75 + files/es/web/api/console/assert/index.html | 140 + files/es/web/api/console/count/index.html | 168 + files/es/web/api/console/dir/index.html | 119 + files/es/web/api/console/dirxml/index.html | 103 + files/es/web/api/console/error/index.html | 179 + files/es/web/api/console/index.html | 254 + files/es/web/api/console/info/index.html | 163 + files/es/web/api/console/log/index.html | 190 + files/es/web/api/console/tabla/index.html | 212 + files/es/web/api/console/time/index.html | 122 + files/es/web/api/console/timeend/index.html | 57 + files/es/web/api/console/trace/index.html | 132 + files/es/web/api/console/warn/index.html | 63 + files/es/web/api/constraint_validation/index.html | 154 + files/es/web/api/crypto/index.html | 66 + files/es/web/api/crypto/subtle/index.html | 51 + files/es/web/api/css_object_model/index.html | 129 + files/es/web/api/cssrule/csstext/index.html | 22 + files/es/web/api/cssrule/index.html | 95 + .../es/web/api/cssrule/parentstylesheet/index.html | 27 + files/es/web/api/cssstyledeclaration/index.html | 73 + files/es/web/api/cssstylerule/index.html | 105 + .../web/api/cssstylerule/selectortext/index.html | 23 + .../es/web/api/cssstylesheet/deleterule/index.html | 21 + files/es/web/api/cssstylesheet/index.html | 64 + .../es/web/api/cssstylesheet/insertrule/index.html | 119 + .../es/web/api/cssstylesheet/ownerrule/index.html | 19 + .../api/customelementregistry/define/index.html | 239 + files/es/web/api/customelementregistry/index.html | 101 + files/es/web/api/customevent/index.html | 94 + files/es/web/api/datatransfer/index.html | 378 + .../api/detecting_device_orientation/index.html | 278 + files/es/web/api/devicemotionevent/index.html | 73 + files/es/web/api/document/abrir/index.html | 109 + files/es/web/api/document/adoptnode/index.html | 61 + files/es/web/api/document/alinkcolor/index.html | 36 + files/es/web/api/document/anchors/index.html | 95 + files/es/web/api/document/applets/index.html | 30 + files/es/web/api/document/async/index.html | 33 + files/es/web/api/document/bgcolor/index.html | 39 + files/es/web/api/document/body/index.html | 39 + files/es/web/api/document/characterset/index.html | 36 + files/es/web/api/document/clear/index.html | 31 + files/es/web/api/document/close/index.html | 27 + files/es/web/api/document/contenttype/index.html | 25 + files/es/web/api/document/crearatributo/index.html | 91 + .../api/document/createdocumentfragment/index.html | 119 + files/es/web/api/document/createelement/index.html | 180 + .../es/web/api/document/createelementns/index.html | 168 + files/es/web/api/document/createrange/index.html | 42 + .../es/web/api/document/createtextnode/index.html | 78 + files/es/web/api/document/defaultview/index.html | 35 + files/es/web/api/document/designmode/index.html | 56 + files/es/web/api/document/dir/index.html | 76 + files/es/web/api/document/doctype/index.html | 65 + .../es/web/api/document/documentelement/index.html | 42 + files/es/web/api/document/documenturi/index.html | 121 + .../web/api/document/documenturiobject/index.html | 39 + .../es/web/api/document/dragover_event/index.html | 338 + files/es/web/api/document/embeds/index.html | 48 + files/es/web/api/document/evaluate/index.html | 211 + files/es/web/api/document/execcommand/index.html | 288 + .../es/web/api/document/exitfullscreen/index.html | 75 + .../es/web/api/document/getelementbyid/index.html | 200 + .../api/document/getelementsbyclassname/index.html | 96 + .../web/api/document/getelementsbyname/index.html | 81 + .../api/document/getelementsbytagname/index.html | 104 + .../api/document/getelementsbytagnamens/index.html | 107 + files/es/web/api/document/getselection/index.html | 12 + files/es/web/api/document/hasfocus/index.html | 23 + files/es/web/api/document/head/index.html | 83 + files/es/web/api/document/height/index.html | 44 + files/es/web/api/document/hidden/index.html | 43 + files/es/web/api/document/importnode/index.html | 84 + files/es/web/api/document/index.html | 390 + files/es/web/api/document/keydown_event/index.html | 178 + files/es/web/api/document/keyup_event/index.html | 149 + .../web/api/document/pointerlockelement/index.html | 105 + files/es/web/api/document/queryselector/index.html | 136 + .../web/api/document/queryselectorall/index.html | 179 + files/es/web/api/document/readystate/index.html | 104 + .../es/web/api/document/registerelement/index.html | 115 + files/es/web/api/document/scripts/index.html | 84 + files/es/web/api/document/scroll_event/index.html | 104 + files/es/web/api/document/stylesheets/index.html | 21 + files/es/web/api/document/url/index.html | 71 + files/es/web/api/document/write/index.html | 76 + files/es/web/api/document/writeln/index.html | 40 + .../example/index.html | 40 + files/es/web/api/documentfragment/index.html | 129 + .../checkinstalled/index.html | 49 + .../getinstalled/index.html | 40 + .../es/web/api/domapplicationsregistry/index.html | 89 + .../api/domapplicationsregistry/install/index.html | 90 + .../installpackage/index.html | 36 + files/es/web/api/domerror/index.html | 130 + files/es/web/api/domparser/index.html | 227 + .../web/api/domstring/cadenas_binarias/index.html | 31 + files/es/web/api/domstring/index.html | 60 + files/es/web/api/dragevent/index.html | 110 + files/es/web/api/element/accesskey/index.html | 22 + files/es/web/api/element/animate/index.html | 208 + files/es/web/api/element/attachshadow/index.html | 158 + files/es/web/api/element/attributes/index.html | 157 + files/es/web/api/element/classlist/index.html | 215 + files/es/web/api/element/classname/index.html | 130 + files/es/web/api/element/click_event/index.html | 280 + files/es/web/api/element/clientheight/index.html | 61 + files/es/web/api/element/clientleft/index.html | 58 + files/es/web/api/element/clienttop/index.html | 54 + files/es/web/api/element/clientwidth/index.html | 60 + files/es/web/api/element/closest/index.html | 145 + .../es/web/api/element/computedstylemap/index.html | 99 + files/es/web/api/element/currentstyle/index.html | 80 + files/es/web/api/element/getattribute/index.html | 48 + .../web/api/element/getattributenodens/index.html | 38 + .../api/element/getboundingclientrect/index.html | 98 + files/es/web/api/element/getclientrects/index.html | 54 + .../api/element/getelementsbyclassname/index.html | 112 + .../api/element/getelementsbytagname/index.html | 50 + .../api/element/getelementsbytagnamens/index.html | 128 + files/es/web/api/element/hasattribute/index.html | 123 + files/es/web/api/element/id/index.html | 119 + files/es/web/api/element/index.html | 539 + files/es/web/api/element/innerhtml/index.html | 151 + .../api/element/insertadjacentelement/index.html | 115 + .../web/api/element/insertadjacenthtml/index.html | 99 + files/es/web/api/element/localname/index.html | 152 + files/es/web/api/element/matches/index.html | 120 + .../es/web/api/element/mousedown_event/index.html | 223 + files/es/web/api/element/name/index.html | 79 + files/es/web/api/element/namespaceuri/index.html | 125 + .../web/api/element/ongotpointercapture/index.html | 133 + .../api/element/onlostpointercapture/index.html | 132 + files/es/web/api/element/onwheel/index.html | 31 + files/es/web/api/element/outerhtml/index.html | 143 + files/es/web/api/element/prefix/index.html | 115 + files/es/web/api/element/queryselector/index.html | 187 + .../es/web/api/element/removeattribute/index.html | 41 + .../web/api/element/requestfullscreen/index.html | 104 + files/es/web/api/element/runtimestyle/index.html | 82 + files/es/web/api/element/scrollheight/index.html | 212 + files/es/web/api/element/scrollintoview/index.html | 151 + files/es/web/api/element/scrollleft/index.html | 153 + files/es/web/api/element/scrolltop/index.html | 69 + files/es/web/api/element/scrolltopmax/index.html | 80 + files/es/web/api/element/scrollwidth/index.html | 119 + files/es/web/api/element/setattribute/index.html | 88 + files/es/web/api/element/setattributens/index.html | 33 + files/es/web/api/element/setcapture/index.html | 86 + files/es/web/api/element/shadowroot/index.html | 83 + files/es/web/api/element/tagname/index.html | 44 + files/es/web/api/element/wheel_event/index.html | 320 + files/es/web/api/elementoshtmlparavideo/index.html | 202 + files/es/web/api/event/bubbles/index.html | 47 + files/es/web/api/event/cancelable/index.html | 38 + files/es/web/api/event/createevent/index.html | 34 + files/es/web/api/event/currenttarget/index.html | 75 + files/es/web/api/event/defaultprevented/index.html | 81 + files/es/web/api/event/event/index.html | 80 + files/es/web/api/event/index.html | 185 + files/es/web/api/event/initevent/index.html | 42 + files/es/web/api/event/preventdefault/index.html | 95 + files/es/web/api/event/stoppropagation/index.html | 103 + files/es/web/api/event/target/index.html | 138 + files/es/web/api/event/type/index.html | 103 + files/es/web/api/eventlistener/index.html | 44 + files/es/web/api/eventsource/index.html | 168 + files/es/web/api/eventsource/onopen/index.html | 127 + .../api/eventtarget/addeventlistener/index.html | 335 + .../web/api/eventtarget/dispatchevent/index.html | 35 + files/es/web/api/eventtarget/index.html | 119 + .../api/eventtarget/removeeventlistener/index.html | 217 + .../web/api/fetch_api/conceptos_basicos/index.html | 73 + files/es/web/api/fetch_api/index.html | 81 + .../web/api/fetch_api/utilizando_fetch/index.html | 377 + files/es/web/api/fetchevent/index.html | 176 + files/es/web/api/file/filename/index.html | 35 + files/es/web/api/file/index.html | 112 + files/es/web/api/file/lastmodifieddate/index.html | 101 + files/es/web/api/file/name/index.html | 70 + files/es/web/api/file/type/index.html | 72 + .../using_files_from_web_applications/index.html | 372 + .../es/web/api/file/webkitrelativepath/index.html | 132 + files/es/web/api/fileerror/index.html | 193 + files/es/web/api/filereader/index.html | 182 + files/es/web/api/filereader/onload/index.html | 29 + .../api/filereader/readasarraybuffer/index.html | 37 + .../es/web/api/filereader/readasdataurl/index.html | 68 + files/es/web/api/filereader/readastext/index.html | 109 + files/es/web/api/filereader/result/index.html | 107 + files/es/web/api/filesystem/index.html | 118 + files/es/web/api/fullscreen_api/index.html | 297 + files/es/web/api/gamepad_api/index.html | 95 + files/es/web/api/gamepadbutton/index.html | 90 + files/es/web/api/geolocation/clearwatch/index.html | 134 + .../api/geolocation/getcurrentposition/index.html | 130 + files/es/web/api/geolocation/index.html | 114 + .../web/api/geolocation/watchposition/index.html | 138 + files/es/web/api/geolocationcoordinates/index.html | 113 + .../api/geolocationcoordinates/latitude/index.html | 97 + files/es/web/api/geolocationposition/index.html | 63 + files/es/web/api/globaleventhandlers/index.html | 272 + .../web/api/globaleventhandlers/onblur/index.html | 90 + .../api/globaleventhandlers/onchange/index.html | 97 + .../web/api/globaleventhandlers/onclick/index.html | 139 + .../web/api/globaleventhandlers/onclose/index.html | 52 + .../web/api/globaleventhandlers/onerror/index.html | 65 + .../web/api/globaleventhandlers/onfocus/index.html | 94 + .../web/api/globaleventhandlers/oninput/index.html | 86 + .../api/globaleventhandlers/onkeydown/index.html | 93 + .../web/api/globaleventhandlers/onkeyup/index.html | 100 + .../web/api/globaleventhandlers/onload/index.html | 51 + .../onloadedmetadata/index.html | 48 + .../api/globaleventhandlers/onresize/index.html | 71 + .../api/globaleventhandlers/onscroll/index.html | 80 + .../api/globaleventhandlers/onselect/index.html | 74 + .../globaleventhandlers/onselectstart/index.html | 98 + .../api/globaleventhandlers/onsubmit/index.html | 125 + .../globaleventhandlers/ontouchstart/index.html | 126 + .../api/globaleventhandlers/onunload/index.html | 45 + files/es/web/api/headers/index.html | 135 + files/es/web/api/history/index.html | 86 + files/es/web/api/history/length/index.html | 56 + files/es/web/api/history/pushstate/index.html | 96 + files/es/web/api/htmlanchorelement/index.html | 279 + files/es/web/api/htmlaudioelement/index.html | 77 + .../api/htmlcanvaselement/getcontext/index.html | 284 + .../es/web/api/htmlcanvaselement/height/index.html | 121 + files/es/web/api/htmlcanvaselement/index.html | 249 + .../es/web/api/htmlcanvaselement/toblob/index.html | 261 + .../web/api/htmlcanvaselement/todataurl/index.html | 159 + .../es/web/api/htmlcanvaselement/width/index.html | 119 + files/es/web/api/htmlcollection/index.html | 99 + .../getdistributednodes/index.html | 95 + files/es/web/api/htmlcontentelement/index.html | 110 + .../web/api/htmlcontentelement/select/index.html | 95 + files/es/web/api/htmldivelement/index.html | 125 + .../es/web/api/htmlelement/change_event/index.html | 143 + files/es/web/api/htmlelement/click/index.html | 88 + .../web/api/htmlelement/contenteditable/index.html | 57 + files/es/web/api/htmlelement/dataset/index.html | 132 + files/es/web/api/htmlelement/focus/index.html | 164 + files/es/web/api/htmlelement/index.html | 402 + files/es/web/api/htmlelement/innertext/index.html | 84 + .../es/web/api/htmlelement/input_event/index.html | 329 + .../es/web/api/htmlelement/offsetheight/index.html | 65 + files/es/web/api/htmlelement/offsetleft/index.html | 141 + .../es/web/api/htmlelement/offsetparent/index.html | 52 + files/es/web/api/htmlelement/offsettop/index.html | 61 + .../es/web/api/htmlelement/offsetwidth/index.html | 62 + files/es/web/api/htmlelement/style/index.html | 52 + files/es/web/api/htmlformelement/index.html | 109 + files/es/web/api/htmlformelement/reset/index.html | 59 + files/es/web/api/htmlheadelement/index.html | 72 + files/es/web/api/htmlhtmlelement/index.html | 121 + files/es/web/api/htmlimageelement/image/index.html | 46 + files/es/web/api/htmlimageelement/index.html | 344 + files/es/web/api/htmlinputelement/index.html | 673 + .../api/htmlinputelement/invalid_event/index.html | 108 + .../es/web/api/htmlinputelement/select/index.html | 51 + files/es/web/api/htmllabelelement/index.html | 82 + files/es/web/api/htmllielement/index.html | 118 + .../api/htmlmediaelement/canplay_event/index.html | 109 + files/es/web/api/htmlmediaelement/index.html | 231 + .../htmlmediaelement/loadeddata_event/index.html | 130 + files/es/web/api/htmlmediaelement/pause/index.html | 52 + .../es/web/api/htmlmediaelement/paused/index.html | 56 + files/es/web/api/htmlmediaelement/play/index.html | 124 + .../htmlmediaelement/timeupdate_event/index.html | 82 + .../api/htmlselectelement/checkvalidity/index.html | 53 + files/es/web/api/htmlselectelement/index.html | 152 + .../htmlselectelement/setcustomvalidity/index.html | 52 + .../getdistributednodes/index.html | 93 + files/es/web/api/htmlshadowelement/index.html | 117 + files/es/web/api/htmlstyleelement/index.html | 125 + files/es/web/api/htmltableelement/align/index.html | 40 + files/es/web/api/htmltableelement/index.html | 72 + .../web/api/htmltableelement/insertrow/index.html | 144 + files/es/web/api/idbcursor/continue/index.html | 194 + files/es/web/api/idbcursor/index.html | 194 + files/es/web/api/idbdatabase/index.html | 258 + .../es/web/api/idbdatabase/transaction/index.html | 229 + files/es/web/api/idbobjectstore/add/index.html | 193 + files/es/web/api/idbobjectstore/index.html | 207 + files/es/web/api/imagebitmap/index.html | 65 + .../web/api/imagebitmaprenderingcontext/index.html | 37 + files/es/web/api/index.html | 37 + .../index.html | 216 + files/es/web/api/indexeddb_api/index.html | 144 + .../api/indexeddb_api/usando_indexeddb/index.html | 1308 + .../web/api/intersection_observer_api/index.html | 638 + .../api/keyboardevent/getmodifierstate/index.html | 253 + files/es/web/api/keyboardevent/index.html | 441 + files/es/web/api/keyboardevent/key/index.html | 212 + files/es/web/api/keyboardevent/metakey/index.html | 131 + files/es/web/api/keyboardevent/which/index.html | 62 + files/es/web/api/location/index.html | 212 + files/es/web/api/location/origin/index.html | 56 + files/es/web/api/location/reload/index.html | 75 + .../web/api/mediadevices/getusermedia/index.html | 300 + files/es/web/api/mediadevices/index.html | 172 + .../web/api/mediaquerylist/addlistener/index.html | 148 + files/es/web/api/mediaquerylist/index.html | 178 + files/es/web/api/mediaquerylist/matches/index.html | 108 + .../api/mediaquerylist/removelistener/index.html | 149 + files/es/web/api/mediasource/index.html | 182 + .../web/api/mediastreamaudiosourcenode/index.html | 129 + files/es/web/api/mediastreamtrack/index.html | 181 + files/es/web/api/messageevent/index.html | 195 + files/es/web/api/mimetype/index.html | 97 + files/es/web/api/mouseevent/index.html | 298 + .../web/api/mouseevent/initmouseevent/index.html | 60 + files/es/web/api/mouseevent/shiftkey/index.html | 126 + files/es/web/api/mozsocial/closepanel/index.html | 19 + files/es/web/api/mozsocial/getattention/index.html | 19 + files/es/web/api/mozsocial/getworker/index.html | 19 + files/es/web/api/mozsocial/index.html | 44 + files/es/web/api/mozsocial/isvisible/index.html | 22 + .../es/web/api/mozsocial/openchatwindow/index.html | 26 + files/es/web/api/mozsocial/openpanel/index.html | 30 + files/es/web/api/mutationobserver/index.html | 330 + .../mutationobserver/mutationobserver/index.html | 98 + .../es/web/api/mutationobserver/observe/index.html | 95 + files/es/web/api/navigator/donottrack/index.html | 111 + files/es/web/api/navigator/getusermedia/index.html | 184 + files/es/web/api/navigator/id/index.html | 16 + files/es/web/api/navigator/index.html | 141 + files/es/web/api/navigator/mozsocial/index.html | 48 + .../navigator/registerprotocolhandler/index.html | 33 + .../web-based_protocol_handlers/index.html | 132 + files/es/web/api/navigator/vibrate/index.html | 82 + .../hardwareconcurrency/index.html | 69 + .../web/api/navigatorconcurrenthardware/index.html | 71 + .../navigatorgeolocation/geolocation/index.html | 106 + files/es/web/api/navigatorgeolocation/index.html | 106 + files/es/web/api/navigatorlanguage/index.html | 148 + .../web/api/navigatorlanguage/language/index.html | 133 + .../eventos_online_y_offline/index.html | 91 + files/es/web/api/navigatoronline/index.html | 133 + files/es/web/api/navigatoronline/online/index.html | 166 + .../es/web/api/network_information_api/index.html | 93 + files/es/web/api/node/appendchild/index.html | 113 + files/es/web/api/node/childnodes/index.html | 103 + files/es/web/api/node/clonenode/index.html | 91 + files/es/web/api/node/contains/index.html | 56 + files/es/web/api/node/elementopadre/index.html | 46 + files/es/web/api/node/haschildnodes/index.html | 73 + files/es/web/api/node/index.html | 371 + files/es/web/api/node/insertarantes/index.html | 172 + files/es/web/api/node/issamenode/index.html | 110 + files/es/web/api/node/lastchild/index.html | 65 + files/es/web/api/node/namespaceuri/index.html | 145 + files/es/web/api/node/nextsibling/index.html | 87 + files/es/web/api/node/nodename/index.html | 107 + files/es/web/api/node/nodetype/index.html | 95 + files/es/web/api/node/nodevalue/index.html | 86 + files/es/web/api/node/nodoprincipal/index.html | 33 + files/es/web/api/node/ownerdocument/index.html | 118 + files/es/web/api/node/parentnode/index.html | 105 + files/es/web/api/node/previoussibling/index.html | 63 + files/es/web/api/node/removechild/index.html | 94 + files/es/web/api/node/replacechild/index.html | 73 + files/es/web/api/node/textcontent/index.html | 98 + files/es/web/api/nodelist/foreach/index.html | 132 + files/es/web/api/nodelist/index.html | 123 + .../es/web/api/nondocumenttypechildnode/index.html | 132 + .../nextelementsibling/index.html | 113 + .../previouselementsibling/index.html | 160 + files/es/web/api/notification/body/index.html | 63 + files/es/web/api/notification/dir/index.html | 59 + files/es/web/api/notification/icon/index.html | 58 + files/es/web/api/notification/index.html | 430 + files/es/web/api/notification/onclick/index.html | 61 + .../es/web/api/notification/permission/index.html | 191 + .../api/notification/requestpermission/index.html | 143 + files/es/web/api/notifications_api/index.html | 198 + .../usando_la_api_de_notificaciones/index.html | 294 + files/es/web/api/parentnode/append/index.html | 134 + .../api/parentnode/childelementcount/index.html | 126 + files/es/web/api/parentnode/children/index.html | 157 + .../api/parentnode/firstelementchild/index.html | 143 + files/es/web/api/parentnode/index.html | 151 + .../web/api/parentnode/lastelementchild/index.html | 146 + files/es/web/api/payment_request_api/index.html | 136 + files/es/web/api/performance/clearmarks/index.html | 95 + .../web/api/performance/clearmeasures/index.html | 96 + files/es/web/api/performance/index.html | 142 + files/es/web/api/performance/memory/index.html | 42 + files/es/web/api/performance/navigation/index.html | 58 + files/es/web/api/performance/now/index.html | 166 + files/es/web/api/performance/timeorigin/index.html | 48 + files/es/web/api/performance/timing/index.html | 57 + files/es/web/api/performancenavigation/index.html | 87 + files/es/web/api/positionoptions/index.html | 109 + files/es/web/api/push_api/index.html | 175 + .../web/api/push_api/using_the_push_api/index.html | 432 + files/es/web/api/pushmanager/index.html | 161 + .../web/api/pushmanager/permissionstate/index.html | 111 + .../supportedcontentencodings/index.html | 43 + files/es/web/api/randomsource/index.html | 110 + .../obtenervaloresaleatorios/index.html | 75 + files/es/web/api/range/collapsed/index.html | 35 + .../api/range/commonancestorcontainer/index.html | 35 + files/es/web/api/range/getclientrects/index.html | 103 + files/es/web/api/range/index.html | 108 + files/es/web/api/range/intersectsnode/index.html | 48 + files/es/web/api/range/setstart/index.html | 120 + files/es/web/api/request/headers/index.html | 68 + files/es/web/api/request/index.html | 170 + files/es/web/api/response/index.html | 128 + files/es/web/api/response/ok/index.html | 66 + files/es/web/api/response/response/index.html | 75 + files/es/web/api/response/status/index.html | 73 + .../cantrickleicecandidates/index.html | 87 + files/es/web/api/rtcpeerconnection/index.html | 444 + files/es/web/api/rtcrtpreceiver/index.html | 72 + files/es/web/api/screen/index.html | 89 + files/es/web/api/selection/addrange/index.html | 46 + files/es/web/api/selection/anchornode/index.html | 27 + files/es/web/api/selection/anchoroffset/index.html | 27 + files/es/web/api/selection/collapse/index.html | 50 + .../es/web/api/selection/collapsetoend/index.html | 27 + .../web/api/selection/collapsetostart/index.html | 29 + files/es/web/api/selection/containsnode/index.html | 49 + .../api/selection/deletefromdocument/index.html | 31 + files/es/web/api/selection/extend/index.html | 41 + files/es/web/api/selection/focusnode/index.html | 25 + files/es/web/api/selection/focusoffset/index.html | 27 + files/es/web/api/selection/getrangeat/index.html | 49 + files/es/web/api/selection/index.html | 105 + files/es/web/api/selection/iscollapsed/index.html | 25 + files/es/web/api/selection/rangecount/index.html | 28 + .../web/api/selection/removeallranges/index.html | 27 + files/es/web/api/selection/removerange/index.html | 45 + .../web/api/selection/selectallchildren/index.html | 45 + files/es/web/api/selection/tostring/index.html | 48 + files/es/web/api/service_worker_api/index.html | 311 + .../using_service_workers/index.html | 526 + files/es/web/api/serviceworkercontainer/index.html | 127 + .../api/serviceworkercontainer/register/index.html | 92 + .../web/api/serviceworkerregistration/index.html | 145 + files/es/web/api/simple_push_api/index.html | 235 + files/es/web/api/storage/clear/index.html | 131 + files/es/web/api/storage/getitem/index.html | 139 + files/es/web/api/storage/index.html | 162 + files/es/web/api/storage/length/index.html | 117 + files/es/web/api/storage/localstorage/index.html | 135 + files/es/web/api/storage/removeitem/index.html | 142 + files/es/web/api/storage/setitem/index.html | 136 + .../es/web/api/storagemanager/estimate/index.html | 90 + files/es/web/api/storagemanager/index.html | 55 + files/es/web/api/storagemanager/persist/index.html | 59 + .../es/web/api/storagemanager/persisted/index.html | 59 + files/es/web/api/stylesheet/disabled/index.html | 20 + files/es/web/api/stylesheet/href/index.html | 38 + files/es/web/api/stylesheet/index.html | 50 + files/es/web/api/stylesheet/media/index.html | 24 + files/es/web/api/stylesheet/ownernode/index.html | 35 + .../web/api/stylesheet/parentstylesheet/index.html | 24 + files/es/web/api/stylesheet/title/index.html | 13 + files/es/web/api/stylesheet/type/index.html | 17 + files/es/web/api/subtlecrypto/digest/index.html | 135 + files/es/web/api/subtlecrypto/encrypt/index.html | 142 + files/es/web/api/subtlecrypto/index.html | 290 + files/es/web/api/svgpoint/index.html | 13 + .../web/api/texttrack/cuechange_event/index.html | 109 + files/es/web/api/texttrack/index.html | 102 + files/es/web/api/touchevent/index.html | 190 + files/es/web/api/uievent/index.html | 158 + files/es/web/api/uievent/pagex/index.html | 102 + files/es/web/api/url/createobjecturl/index.html | 148 + files/es/web/api/url/host/index.html | 62 + files/es/web/api/url/index.html | 217 + files/es/web/api/url/port/index.html | 55 + files/es/web/api/url/url/index.html | 99 + files/es/web/api/urlsearchparams/index.html | 204 + .../api/urlsearchparams/urlsearchparams/index.html | 78 + files/es/web/api/using_the_browser_api/index.html | 159 + .../checking_authenticity_with_password/index.html | 30 + files/es/web/api/web_crypto_api/index.html | 85 + files/es/web/api/web_speech_api/index.html | 121 + .../uso_de_la_web_speech_api/index.html | 301 + files/es/web/api/web_workers_api/index.html | 226 + files/es/web/api/webgl_api/index.html | 98 + .../index.html | 276 + .../animating_objects_with_webgl/index.html | 119 + .../animating_textures_in_webgl/index.html | 106 + .../tutorial/getting_started_with_webgl/index.html | 106 + files/es/web/api/webgl_api/tutorial/index.html | 42 + .../objetos_3d_utilizando_webgl/index.html | 133 + .../index.html | 91 + .../wtilizando_texturas_en_webgl/index.html | 209 + files/es/web/api/webrtc_api/index.html | 126 + files/es/web/api/webrtc_api/protocols/index.html | 38 + files/es/web/api/websocket/close_event/index.html | 72 + files/es/web/api/websocket/index.html | 356 + files/es/web/api/websocket/onerror/index.html | 50 + .../escribiendo_servidor_websocket/index.html | 244 + .../index.html | 246 + files/es/web/api/websockets_api/index.html | 172 + .../index.html | 197 + files/es/web/api/webvr_api/index.html | 256 + .../api/webvr_api/using_the_webvr_api/index.html | 448 + files/es/web/api/webvtt_api/index.html | 903 + files/es/web/api/wheelevent/deltay/index.html | 95 + files/es/web/api/wheelevent/index.html | 174 + files/es/web/api/window/alert/index.html | 69 + .../es/web/api/window/applicationcache/index.html | 30 + .../web/api/window/cancelanimationframe/index.html | 118 + files/es/web/api/window/close/index.html | 76 + files/es/web/api/window/closed/index.html | 65 + files/es/web/api/window/confirm/index.html | 64 + files/es/web/api/window/crypto/index.html | 88 + .../es/web/api/window/devicepixelratio/index.html | 91 + files/es/web/api/window/dialogarguments/index.html | 14 + files/es/web/api/window/document/index.html | 46 + files/es/web/api/window/frameelement/index.html | 106 + files/es/web/api/window/fullscreen/index.html | 43 + .../es/web/api/window/getcomputedstyle/index.html | 26 + files/es/web/api/window/getselection/index.html | 53 + .../es/web/api/window/hashchange_event/index.html | 194 + files/es/web/api/window/history/index.html | 39 + files/es/web/api/window/index.html | 412 + files/es/web/api/window/innerheight/index.html | 79 + files/es/web/api/window/localstorage/index.html | 148 + files/es/web/api/window/location/index.html | 274 + files/es/web/api/window/locationbar/index.html | 66 + files/es/web/api/window/matchmedia/index.html | 67 + files/es/web/api/window/menubar/index.html | 42 + files/es/web/api/window/moveby/index.html | 70 + files/es/web/api/window/navigator/index.html | 60 + files/es/web/api/window/offline_event/index.html | 70 + files/es/web/api/window/open/index.html | 663 + files/es/web/api/window/opener/index.html | 28 + files/es/web/api/window/outerheight/index.html | 114 + files/es/web/api/window/outerwidth/index.html | 105 + files/es/web/api/window/print/index.html | 58 + files/es/web/api/window/prompt/index.html | 82 + .../api/window/requestanimationframe/index.html | 153 + .../web/api/window/requestidlecallback/index.html | 126 + files/es/web/api/window/scroll/index.html | 84 + files/es/web/api/window/scrollby/index.html | 85 + files/es/web/api/window/scrollto/index.html | 50 + files/es/web/api/window/scrollx/index.html | 124 + files/es/web/api/window/scrolly/index.html | 61 + files/es/web/api/window/sessionstorage/index.html | 143 + files/es/web/api/window/showmodaldialog/index.html | 95 + files/es/web/api/window/sidebar/index.html | 56 + files/es/web/api/window/statusbar/index.html | 72 + files/es/web/api/window/url/index.html | 101 + files/es/web/api/windowbase64/atob/index.html | 111 + .../base64_codificando_y_decodificando/index.html | 345 + files/es/web/api/windowbase64/index.html | 108 + files/es/web/api/windoweventhandlers/index.html | 184 + .../windoweventhandlers/onbeforeunload/index.html | 81 + .../windoweventhandlers/onhashchange/index.html | 165 + .../api/windoweventhandlers/onpopstate/index.html | 74 + .../windoworworkerglobalscope/caches/index.html | 127 + .../createimagebitmap/index.html | 108 + .../api/windoworworkerglobalscope/fetch/index.html | 177 + .../web/api/windoworworkerglobalscope/index.html | 169 + .../windoworworkerglobalscope/indexeddb/index.html | 141 + .../issecurecontext/index.html | 86 + .../web/api/windowtimers/clearinterval/index.html | 43 + .../web/api/windowtimers/cleartimeout/index.html | 63 + files/es/web/api/windowtimers/index.html | 118 + .../es/web/api/windowtimers/setinterval/index.html | 692 + .../es/web/api/windowtimers/settimeout/index.html | 340 + files/es/web/api/worker/index.html | 155 + files/es/web/api/worker/postmessage/index.html | 206 + files/es/web/api/worker/terminate/index.html | 107 + files/es/web/api/xmlhttprequest/abort/index.html | 120 + .../es/web/api/xmlhttprequest/formdata/index.html | 84 + files/es/web/api/xmlhttprequest/index.html | 428 + .../xmlhttprequest/onreadystatechange/index.html | 109 + .../web/api/xmlhttprequest/responsetext/index.html | 104 + .../index.html | 232 + files/es/web/api/xmlhttprequest/timeout/index.html | 67 + .../xmlhttprequest/using_xmlhttprequest/index.html | 447 + .../web/api/xmlhttprequesteventtarget/index.html | 68 + .../xmlhttprequesteventtarget/onload/index.html | 55 + files/es/web/css/--_star_/index.html | 106 + files/es/web/css/-moz-binding/index.html | 110 + .../web/css/-moz-border-bottom-colors/index.html | 136 + .../es/web/css/-moz-border-left-colors/index.html | 144 + .../es/web/css/-moz-border-right-colors/index.html | 136 + files/es/web/css/-moz-border-top-colors/index.html | 140 + files/es/web/css/-moz-box-flex/index.html | 155 + files/es/web/css/-moz-box-ordinal-group/index.html | 66 + files/es/web/css/-moz-box-pack/index.html | 184 + files/es/web/css/-moz-cell/index.html | 10 + .../es/web/css/-moz-context-properties/index.html | 79 + files/es/web/css/-moz-float-edge/index.html | 78 + .../web/css/-moz-font-language-override/index.html | 6 + .../css/-moz-force-broken-image-icon/index.html | 56 + files/es/web/css/-moz-image-rect/index.html | 143 + files/es/web/css/-moz-image-region/index.html | 37 + files/es/web/css/-moz-orient/index.html | 156 + .../css/-moz-outline-radius-bottomleft/index.html | 19 + .../css/-moz-outline-radius-bottomright/index.html | 21 + .../web/css/-moz-outline-radius-topleft/index.html | 19 + .../css/-moz-outline-radius-topright/index.html | 19 + files/es/web/css/-moz-outline-radius/index.html | 158 + files/es/web/css/-moz-stack-sizing/index.html | 57 + files/es/web/css/-moz-text-blink/index.html | 95 + files/es/web/css/-moz-user-focus/index.html | 113 + files/es/web/css/-moz-user-input/index.html | 64 + files/es/web/css/-moz-user-modify/index.html | 132 + files/es/web/css/-moz-window-shadow/index.html | 52 + files/es/web/css/-ms-accelerator/index.html | 75 + files/es/web/css/-ms-overflow-style/index.html | 40 + files/es/web/css/-webkit-border-before/index.html | 137 + files/es/web/css/-webkit-box-reflect/index.html | 116 + .../es/web/css/-webkit-mask-attachment/index.html | 95 + files/es/web/css/-webkit-mask-box-image/index.html | 130 + files/es/web/css/-webkit-mask-clip/index.html | 101 + files/es/web/css/-webkit-mask-composite/index.html | 121 + files/es/web/css/-webkit-mask-image/index.html | 156 + files/es/web/css/-webkit-mask-origin/index.html | 100 + .../es/web/css/-webkit-mask-position-x/index.html | 132 + .../es/web/css/-webkit-mask-position-y/index.html | 132 + files/es/web/css/-webkit-mask-position/index.html | 118 + files/es/web/css/-webkit-mask-repeat-x/index.html | 136 + files/es/web/css/-webkit-mask-repeat-y/index.html | 137 + files/es/web/css/-webkit-mask-repeat/index.html | 132 + files/es/web/css/-webkit-mask/index.html | 124 + .../web/css/-webkit-overflow-scrolling/index.html | 85 + .../web/css/-webkit-print-color-adjust/index.html | 102 + .../web/css/-webkit-tap-highlight-color/index.html | 43 + .../es/web/css/-webkit-text-fill-color/index.html | 100 + .../web/css/-webkit-text-stroke-color/index.html | 129 + .../web/css/-webkit-text-stroke-width/index.html | 118 + files/es/web/css/-webkit-text-stroke/index.html | 142 + files/es/web/css/-webkit-touch-callout/index.html | 106 + files/es/web/css/@charset/index.html | 123 + .../css/@counter-style/additive-symbols/index.html | 129 + files/es/web/css/@counter-style/index.html | 200 + files/es/web/css/@counter-style/symbols/index.html | 144 + files/es/web/css/@document/index.html | 82 + .../es/web/css/@font-face/font-display/index.html | 96 + files/es/web/css/@font-face/font-family/index.html | 116 + files/es/web/css/@font-face/font-style/index.html | 134 + files/es/web/css/@font-face/index.html | 162 + files/es/web/css/@font-face/src/index.html | 245 + .../es/web/css/@font-face/unicode-range/index.html | 86 + files/es/web/css/@font-feature-values/index.html | 134 + files/es/web/css/@import/index.html | 118 + files/es/web/css/@keyframes/index.html | 178 + files/es/web/css/@media/altura/index.html | 82 + files/es/web/css/@media/color/index.html | 80 + files/es/web/css/@media/display-mode/index.html | 90 + files/es/web/css/@media/hover/index.html | 70 + files/es/web/css/@media/index.html | 360 + files/es/web/css/@media/pointer/index.html | 101 + .../web/css/@media/resoluci\303\263n/index.html" | 88 + files/es/web/css/@media/width/index.html | 124 + files/es/web/css/@namespace/index.html | 71 + files/es/web/css/@page/index.html | 129 + files/es/web/css/@supports/index.html | 138 + files/es/web/css/@viewport/height/index.html | 125 + files/es/web/css/@viewport/index.html | 159 + files/es/web/css/@viewport/width/index.html | 122 + files/es/web/css/_colon_-moz-broken/index.html | 25 + files/es/web/css/_colon_-moz-drag-over/index.html | 42 + files/es/web/css/_colon_-moz-first-node/index.html | 48 + files/es/web/css/_colon_-moz-focusring/index.html | 90 + .../_colon_-moz-full-screen-ancestor/index.html | 83 + .../web/css/_colon_-moz-handler-blocked/index.html | 23 + .../web/css/_colon_-moz-handler-crashed/index.html | 23 + .../css/_colon_-moz-handler-disabled/index.html | 23 + files/es/web/css/_colon_-moz-last-node/index.html | 48 + .../es/web/css/_colon_-moz-list-bullet/index.html | 46 + .../es/web/css/_colon_-moz-list-number/index.html | 45 + files/es/web/css/_colon_-moz-loading/index.html | 19 + .../web/css/_colon_-moz-locale-dir(ltr)/index.html | 28 + .../web/css/_colon_-moz-locale-dir(rtl)/index.html | 33 + .../css/_colon_-moz-lwtheme-brighttext/index.html | 24 + .../css/_colon_-moz-lwtheme-darktext/index.html | 25 + files/es/web/css/_colon_-moz-lwtheme/index.html | 26 + .../web/css/_colon_-moz-only-whitespace/index.html | 36 + .../es/web/css/_colon_-moz-placeholder/index.html | 122 + .../web/css/_colon_-moz-submit-invalid/index.html | 76 + files/es/web/css/_colon_-moz-suppressed/index.html | 19 + .../index.html | 19 + .../index.html | 25 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 113 + .../_colon_-moz-tree-cell-text(hover)/index.html | 19 + .../web/css/_colon_-moz-tree-cell-text/index.html | 30 + files/es/web/css/_colon_-moz-tree-cell/index.html | 38 + .../es/web/css/_colon_-moz-tree-column/index.html | 29 + .../css/_colon_-moz-tree-drop-feedback/index.html | 29 + files/es/web/css/_colon_-moz-tree-image/index.html | 34 + .../css/_colon_-moz-tree-indentation/index.html | 27 + files/es/web/css/_colon_-moz-tree-line/index.html | 28 + .../css/_colon_-moz-tree-progressmeter/index.html | 28 + .../web/css/_colon_-moz-tree-row(hover)/index.html | 19 + files/es/web/css/_colon_-moz-tree-row/index.html | 50 + .../web/css/_colon_-moz-tree-separator/index.html | 29 + .../es/web/css/_colon_-moz-tree-twisty/index.html | 33 + files/es/web/css/_colon_-moz-ui-invalid/index.html | 94 + files/es/web/css/_colon_-moz-ui-valid/index.html | 94 + .../web/css/_colon_-moz-user-disabled/index.html | 18 + .../web/css/_colon_-moz-window-inactive/index.html | 99 + .../css/_colon_-ms-input-placeholder/index.html | 111 + .../es/web/css/_colon_-webkit-autofill/index.html | 80 + files/es/web/css/_colon_active/index.html | 97 + files/es/web/css/_colon_any-link/index.html | 78 + files/es/web/css/_colon_any/index.html | 186 + files/es/web/css/_colon_blank/index.html | 54 + files/es/web/css/_colon_checked/index.html | 197 + files/es/web/css/_colon_default/index.html | 99 + files/es/web/css/_colon_defined/index.html | 115 + files/es/web/css/_colon_dir/index.html | 108 + files/es/web/css/_colon_disabled/index.html | 127 + files/es/web/css/_colon_empty/index.html | 106 + files/es/web/css/_colon_enabled/index.html | 103 + files/es/web/css/_colon_first-child/index.html | 133 + files/es/web/css/_colon_first-of-type/index.html | 114 + files/es/web/css/_colon_first/index.html | 97 + files/es/web/css/_colon_focus-visible/index.html | 128 + files/es/web/css/_colon_focus-within/index.html | 96 + files/es/web/css/_colon_focus/index.html | 114 + files/es/web/css/_colon_fullscreen/index.html | 170 + files/es/web/css/_colon_has/index.html | 98 + files/es/web/css/_colon_host/index.html | 95 + files/es/web/css/_colon_hover/index.html | 105 + files/es/web/css/_colon_in-range/index.html | 115 + files/es/web/css/_colon_indeterminate/index.html | 134 + files/es/web/css/_colon_invalid/index.html | 149 + files/es/web/css/_colon_lang/index.html | 101 + files/es/web/css/_colon_last-child/index.html | 127 + files/es/web/css/_colon_last-of-type/index.html | 113 + files/es/web/css/_colon_left/index.html | 80 + files/es/web/css/_colon_link/index.html | 105 + files/es/web/css/_colon_not()/index.html | 112 + files/es/web/css/_colon_nth-child/index.html | 188 + files/es/web/css/_colon_nth-last-child/index.html | 197 + .../es/web/css/_colon_nth-last-of-type/index.html | 97 + files/es/web/css/_colon_nth-of-type/index.html | 107 + files/es/web/css/_colon_only-child/index.html | 136 + files/es/web/css/_colon_only-of-type/index.html | 97 + files/es/web/css/_colon_optional/index.html | 91 + files/es/web/css/_colon_out-of-range/index.html | 116 + .../es/web/css/_colon_placeholder-shown/index.html | 97 + files/es/web/css/_colon_read-only/index.html | 100 + files/es/web/css/_colon_read-write/index.html | 99 + files/es/web/css/_colon_required/index.html | 91 + files/es/web/css/_colon_right/index.html | 78 + files/es/web/css/_colon_root/index.html | 64 + files/es/web/css/_colon_target/index.html | 214 + files/es/web/css/_colon_valid/index.html | 83 + files/es/web/css/_colon_visited/index.html | 120 + .../css/_doublecolon_-moz-color-swatch/index.html | 56 + .../css/_doublecolon_-moz-page-sequence/index.html | 82 + files/es/web/css/_doublecolon_-moz-page/index.html | 27 + .../css/_doublecolon_-moz-placeholder/index.html | 108 + .../css/_doublecolon_-moz-progress-bar/index.html | 55 + .../_doublecolon_-moz-range-progress/index.html | 115 + .../css/_doublecolon_-moz-range-thumb/index.html | 119 + .../css/_doublecolon_-moz-range-track/index.html | 119 + .../index.html | 79 + .../es/web/css/_doublecolon_-ms-browse/index.html | 97 + files/es/web/css/_doublecolon_-ms-check/index.html | 114 + files/es/web/css/_doublecolon_-ms-clear/index.html | 113 + .../es/web/css/_doublecolon_-ms-expand/index.html | 25 + .../web/css/_doublecolon_-ms-fill-lower/index.html | 88 + .../web/css/_doublecolon_-ms-fill-upper/index.html | 88 + files/es/web/css/_doublecolon_-ms-fill/index.html | 106 + .../es/web/css/_doublecolon_-ms-reveal/index.html | 72 + files/es/web/css/_doublecolon_-ms-thumb/index.html | 44 + .../css/_doublecolon_-ms-ticks-after/index.html | 84 + files/es/web/css/_doublecolon_-ms-track/index.html | 48 + files/es/web/css/_doublecolon_-ms-value/index.html | 31 + .../index.html | 100 + .../index.html | 96 + .../index.html | 85 + .../css/_doublecolon_-webkit-meter-bar/index.html | 103 + .../index.html | 91 + .../index.html | 106 + .../index.html | 103 + .../index.html | 96 + .../index.html | 96 + .../_doublecolon_-webkit-progress-bar/index.html | 112 + .../index.html | 112 + .../_doublecolon_-webkit-progress-value/index.html | 111 + .../css/_doublecolon_-webkit-scrollbar/index.html | 37 + .../index.html | 40 + .../_doublecolon_-webkit-slider-thumb/index.html | 38 + files/es/web/css/_doublecolon_after/index.html | 182 + files/es/web/css/_doublecolon_backdrop/index.html | 132 + files/es/web/css/_doublecolon_before/index.html | 231 + files/es/web/css/_doublecolon_cue/index.html | 113 + .../web/css/_doublecolon_first-letter/index.html | 135 + .../es/web/css/_doublecolon_first-line/index.html | 122 + files/es/web/css/_doublecolon_marker/index.html | 91 + .../es/web/css/_doublecolon_placeholder/index.html | 152 + files/es/web/css/_doublecolon_selection/index.html | 94 + .../web/css/_doublecolon_spelling-error/index.html | 70 + files/es/web/css/actual_value/index.html | 36 + files/es/web/css/align-content/index.html | 261 + files/es/web/css/align-items/index.html | 169 + files/es/web/css/align-self/index.html | 137 + files/es/web/css/all/index.html | 219 + files/es/web/css/angle/index.html | 139 + files/es/web/css/animation-delay/index.html | 125 + files/es/web/css/animation-direction/index.html | 167 + files/es/web/css/animation-duration/index.html | 127 + files/es/web/css/animation-fill-mode/index.html | 233 + .../web/css/animation-iteration-count/index.html | 126 + files/es/web/css/animation-name/index.html | 134 + files/es/web/css/animation-play-state/index.html | 134 + .../web/css/animation-timing-function/index.html | 141 + files/es/web/css/animation/index.html | 127 + files/es/web/css/appearance/index.html | 1556 ++ files/es/web/css/at-rule/index.html | 73 + files/es/web/css/attr()/index.html | 246 + files/es/web/css/auto/index.html | 49 + files/es/web/css/azimuth/index.html | 70 + files/es/web/css/backdrop-filter/index.html | 145 + files/es/web/css/backface-visibility/index.html | 270 + files/es/web/css/background-attachment/index.html | 133 + files/es/web/css/background-blend-mode/index.html | 150 + files/es/web/css/background-clip/index.html | 171 + files/es/web/css/background-color/index.html | 141 + files/es/web/css/background-image/index.html | 135 + files/es/web/css/background-origin/index.html | 88 + files/es/web/css/background-position-x/index.html | 128 + files/es/web/css/background-position/index.html | 132 + files/es/web/css/background-repeat/index.html | 250 + files/es/web/css/background-size/index.html | 235 + files/es/web/css/background/index.html | 138 + files/es/web/css/basic-shape/index.html | 208 + files/es/web/css/blend-mode/index.html | 417 + files/es/web/css/block-size/index.html | 151 + files/es/web/css/border-block-color/index.html | 86 + files/es/web/css/border-block-end-color/index.html | 138 + files/es/web/css/border-block-end-style/index.html | 139 + files/es/web/css/border-block-end-width/index.html | 91 + files/es/web/css/border-block-end/index.html | 144 + .../es/web/css/border-block-start-color/index.html | 90 + .../es/web/css/border-block-start-style/index.html | 92 + .../es/web/css/border-block-start-width/index.html | 91 + files/es/web/css/border-block-start/index.html | 98 + files/es/web/css/border-block-style/index.html | 90 + files/es/web/css/border-block-width/index.html | 87 + files/es/web/css/border-block/index.html | 96 + files/es/web/css/border-bottom-color/index.html | 117 + .../web/css/border-bottom-left-radius/index.html | 264 + .../web/css/border-bottom-right-radius/index.html | 264 + files/es/web/css/border-bottom-style/index.html | 102 + files/es/web/css/border-bottom-width/index.html | 113 + files/es/web/css/border-bottom/index.html | 117 + files/es/web/css/border-collapse/index.html | 98 + files/es/web/css/border-color/index.html | 112 + files/es/web/css/border-end-end-radius/index.html | 98 + .../es/web/css/border-end-start-radius/index.html | 98 + files/es/web/css/border-image-outset/index.html | 138 + files/es/web/css/border-image-repeat/index.html | 123 + files/es/web/css/border-image-slice/index.html | 159 + files/es/web/css/border-image/index.html | 199 + files/es/web/css/border-inline-color/index.html | 86 + .../es/web/css/border-inline-end-color/index.html | 90 + .../es/web/css/border-inline-end-style/index.html | 92 + .../es/web/css/border-inline-end-width/index.html | 91 + files/es/web/css/border-inline-end/index.html | 98 + .../web/css/border-inline-start-color/index.html | 90 + .../web/css/border-inline-start-style/index.html | 92 + .../web/css/border-inline-start-width/index.html | 91 + files/es/web/css/border-inline-start/index.html | 98 + files/es/web/css/border-inline-style/index.html | 90 + files/es/web/css/border-inline-width/index.html | 88 + files/es/web/css/border-inline/index.html | 94 + files/es/web/css/border-left-color/index.html | 73 + files/es/web/css/border-left/index.html | 120 + files/es/web/css/border-radius/index.html | 320 + files/es/web/css/border-right/index.html | 109 + files/es/web/css/border-spacing/index.html | 104 + .../es/web/css/border-start-end-radius/index.html | 98 + .../web/css/border-start-start-radius/index.html | 98 + files/es/web/css/border-style/index.html | 242 + files/es/web/css/border-top-color/index.html | 105 + files/es/web/css/border-top-left-radius/index.html | 252 + .../es/web/css/border-top-right-radius/index.html | 256 + files/es/web/css/border-top/index.html | 151 + files/es/web/css/border-width/index.html | 101 + files/es/web/css/border/index.html | 117 + files/es/web/css/bottom/index.html | 86 + files/es/web/css/box-shadow/index.html | 178 + files/es/web/css/box-sizing/index.html | 119 + files/es/web/css/calc()/index.html | 199 + files/es/web/css/caret-color/index.html | 151 + files/es/web/css/cascade/index.html | 202 + files/es/web/css/child_combinator/index.html | 119 + files/es/web/css/class_selectors/index.html | 128 + files/es/web/css/clear/index.html | 239 + files/es/web/css/clip-path/index.html | 179 + files/es/web/css/clip/index.html | 148 + files/es/web/css/color/index.html | 260 + files/es/web/css/color_value/index.html | 1416 ++ files/es/web/css/column-count/index.html | 95 + files/es/web/css/column-span/index.html | 99 + files/es/web/css/columnas_css/index.html | 112 + files/es/web/css/comentarios/index.html | 49 + .../web/css/comenzando_(tutorial_css)/index.html | 40 + files/es/web/css/como_iniciar/index.html | 5 + .../css/como_iniciar/por_que_usar_css/index.html | 106 + .../es/web/css/como_iniciar/que_es_css/index.html | 145 + files/es/web/css/content/index.html | 58 + .../index.html" | 91 + files/es/web/css/css_animations/index.html | 136 + files/es/web/css/css_animations/tips/index.html | 150 + .../usando_animaciones_css/index.html | 351 + .../border-image_generador/index.html | 2615 ++ .../border-radius_generator/index.html | 1601 ++ .../web/css/css_background_and_borders/index.html | 154 + .../using_css_multiple_backgrounds/index.html | 56 + .../herramienta_para_seleccionar_color/index.html | 3220 +++ files/es/web/css/css_colors/index.html | 119 + files/es/web/css/css_containment/index.html | 124 + .../aligning_items_in_a_flex_container/index.html | 231 + .../backwards_compatibility_of_flexbox/index.html | 112 + .../casos_de_uso_tipicos_de_flexbox/index.html | 133 + .../conceptos_basicos_de_flexbox/index.html | 227 + .../es/web/css/css_flexible_box_layout/index.html | 118 + .../index.html | 190 + .../usando_las_cajas_flexibles_css/index.html | 375 + files/es/web/css/css_flow_layout/index.html | 43 + files/es/web/css/css_fonts/index.html | 148 + .../auto-placement_in_css_grid_layout/index.html | 613 + .../box_alignment_in_css_grid_layout/index.html | 703 + .../index.html" | 722 + .../css_grid_layout_and_accessibility/index.html | 169 + files/es/web/css/css_grid_layout/index.html | 251 + .../index.html | 597 + .../relacion_de_grid_layout/index.html | 642 + .../basic_concepts/index.html | 71 + .../dimensionamiento/index.html | 89 + .../floating_and_positioning/index.html | 206 + files/es/web/css/css_logical_properties/index.html | 172 + .../margins_borders_padding/index.html | 298 + files/es/web/css/css_modelo_caja/index.html | 165 + .../index.html" | 66 + .../mastering_margin_collapsing/index.html | 96 + files/es/web/css/css_motion_path/index.html | 78 + .../agregando_z-index/index.html | 179 + .../apilamiento_y_float/index.html | 144 + .../index.html | 132 + .../index.html | 137 + .../index.html | 183 + .../el_contexto_de_apilamiento/index.html | 231 + .../css_positioning/entendiendo_z_index/index.html | 47 + .../stacking_without_z-index/index.html | 141 + files/es/web/css/css_positioning/index.html | 115 + .../es/web/css/css_properties_reference/index.html | 314 + .../es/web/css/css_reglas_condicionales/index.html | 99 + files/es/web/css/css_transforms/index.html | 145 + .../css_transforms/using_css_transforms/index.html | 225 + files/es/web/css/css_transitions/index.html | 60 + files/es/web/css/css_types/index.html | 64 + files/es/web/css/css_writing_modes/index.html | 52 + files/es/web/css/cursor/index.html | 322 + .../index.html | 39 + files/es/web/css/descendant_combinator/index.html | 97 + files/es/web/css/direction/index.html | 54 + files/es/web/css/display/index.html | 647 + files/es/web/css/elemento_reemplazo/index.html | 19 + files/es/web/css/env()/index.html | 27 + files/es/web/css/especificidad/index.html | 239 + files/es/web/css/filter-function/blur()/index.html | 40 + .../css/filter-function/brightness()/index.html | 45 + files/es/web/css/filter-function/index.html | 65 + files/es/web/css/filter-function/url/index.html | 32 + files/es/web/css/filter/index.html | 1194 + files/es/web/css/fit-content/index.html | 119 + files/es/web/css/flex-basis/index.html | 280 + files/es/web/css/flex-direction/index.html | 158 + files/es/web/css/flex-flow/index.html | 135 + files/es/web/css/flex-grow/index.html | 194 + files/es/web/css/flex-shrink/index.html | 185 + files/es/web/css/flex-wrap/index.html | 121 + files/es/web/css/flex/index.html | 208 + files/es/web/css/float/index.html | 241 + files/es/web/css/font-family/index.html | 61 + files/es/web/css/font-size-adjust/index.html | 60 + files/es/web/css/font-size/index.html | 69 + files/es/web/css/font-style/index.html | 152 + .../es/web/css/font-variant-alternates/index.html | 155 + files/es/web/css/font-variant/index.html | 47 + files/es/web/css/font-weight/index.html | 181 + files/es/web/css/font/index.html | 123 + files/es/web/css/frequency/index.html | 161 + files/es/web/css/gradiente/index.html | 100 + files/es/web/css/grid-auto-columns/index.html | 209 + files/es/web/css/grid-auto-rows/index.html | 204 + files/es/web/css/grid-column-gap/index.html | 157 + files/es/web/css/grid-gap/index.html | 251 + files/es/web/css/grid-template-areas/index.html | 233 + files/es/web/css/grid-template-columns/index.html | 188 + files/es/web/css/grid-template-rows/index.html | 215 + files/es/web/css/grid/index.html | 237 + files/es/web/css/height/index.html | 231 + .../herramientas/cubic_bezier_generator/index.html | 320 + files/es/web/css/herramientas/index.html | 28 + files/es/web/css/hyphens/index.html | 148 + files/es/web/css/id_selectors/index.html | 85 + files/es/web/css/image-rendering/index.html | 108 + files/es/web/css/image/index.html | 209 + files/es/web/css/ime-mode/index.html | 50 + files/es/web/css/index.html | 113 + files/es/web/css/inherit/index.html | 64 + files/es/web/css/inheritance/index.html | 66 + files/es/web/css/initial/index.html | 46 + files/es/web/css/inline-size/index.html | 97 + files/es/web/css/inset-block-end/index.html | 99 + files/es/web/css/inset-block-start/index.html | 99 + files/es/web/css/inset-block/index.html | 97 + files/es/web/css/inset-inline-end/index.html | 99 + files/es/web/css/inset-inline-start/index.html | 99 + files/es/web/css/inset-inline/index.html | 97 + files/es/web/css/inset/index.html | 96 + files/es/web/css/integer/index.html | 16 + .../web/css/introducci\303\263n/boxes/index.html" | 334 + .../cascading_and_inheritance/index.html" | 124 + .../web/css/introducci\303\263n/color/index.html" | 363 + .../introducci\303\263n/how_css_works/index.html" | 127 + "files/es/web/css/introducci\303\263n/index.html" | 93 + .../web/css/introducci\303\263n/layout/index.html" | 383 + .../los_colon_estilos_de_texto/index.html" | 155 + .../web/css/introducci\303\263n/media/index.html" | 394 + .../css/introducci\303\263n/selectors/index.html" | 415 + files/es/web/css/isolation/index.html | 158 + files/es/web/css/justify-content/index.html | 222 + files/es/web/css/layout_cookbook/index.html | 77 + files/es/web/css/layout_mode/index.html | 31 + files/es/web/css/left/index.html | 144 + files/es/web/css/length/index.html | 332 + files/es/web/css/line-height/index.html | 125 + files/es/web/css/linear-gradient()/index.html | 261 + files/es/web/css/list-style-image/index.html | 72 + files/es/web/css/list-style-position/index.html | 97 + files/es/web/css/list-style-type/index.html | 117 + files/es/web/css/list-style/index.html | 82 + files/es/web/css/margin-block-start/index.html | 99 + files/es/web/css/margin-block/index.html | 108 + files/es/web/css/margin-bottom/index.html | 139 + files/es/web/css/margin-inline-end/index.html | 98 + files/es/web/css/margin-inline-start/index.html | 96 + files/es/web/css/margin-inline/index.html | 96 + files/es/web/css/margin-right/index.html | 26 + files/es/web/css/margin/index.html | 214 + files/es/web/css/max-block-size/index.html | 178 + files/es/web/css/max-height/index.html | 94 + files/es/web/css/max-inline-size/index.html | 94 + files/es/web/css/max-width/index.html | 158 + files/es/web/css/media_queries/index.html | 107 + files/es/web/css/min()/index.html | 120 + files/es/web/css/min-block-size/index.html | 94 + files/es/web/css/min-height/index.html | 72 + files/es/web/css/min-inline-size/index.html | 95 + files/es/web/css/min-width/index.html | 80 + files/es/web/css/minmax()/index.html | 214 + files/es/web/css/mozilla_extensions/index.html | 616 + files/es/web/css/normal/index.html | 10 + files/es/web/css/number/index.html | 8 + files/es/web/css/object-fit/index.html | 164 + files/es/web/css/object-position/index.html | 150 + files/es/web/css/opacity/index.html | 216 + files/es/web/css/order/index.html | 172 + files/es/web/css/outline-color/index.html | 152 + files/es/web/css/outline-offset/index.html | 136 + files/es/web/css/outline-style/index.html | 263 + files/es/web/css/outline-width/index.html | 176 + files/es/web/css/outline/index.html | 128 + files/es/web/css/overflow-y/index.html | 138 + files/es/web/css/overflow/index.html | 118 + files/es/web/css/padding-block-end/index.html | 96 + files/es/web/css/padding-block-start/index.html | 96 + files/es/web/css/padding-block/index.html | 96 + files/es/web/css/padding-bottom/index.html | 135 + files/es/web/css/padding-inline-end/index.html | 96 + files/es/web/css/padding-inline-start/index.html | 96 + files/es/web/css/padding-inline/index.html | 96 + files/es/web/css/padding-top/index.html | 135 + files/es/web/css/padding/index.html | 178 + files/es/web/css/perspective/index.html | 196 + files/es/web/css/porcentaje/index.html | 126 + files/es/web/css/position/index.html | 305 + .../css/preguntas_frecuentes_sobre_css/index.html | 118 + files/es/web/css/primeros_pasos/index.html | 39 + files/es/web/css/pseudo-classes/index.html | 135 + files/es/web/css/pseudoelementos/index.html | 86 + files/es/web/css/quotes/index.html | 86 + files/es/web/css/radial-gradient()/index.html | 299 + files/es/web/css/referencia_css/index.html | 246 + .../css/referencia_css/mix-blend-mode/index.html | 611 + files/es/web/css/repeat()/index.html | 147 + files/es/web/css/resize/index.html | 194 + "files/es/web/css/resoluci\303\263n/index.html" | 151 + files/es/web/css/resolved_value/index.html | 38 + files/es/web/css/right/index.html | 93 + files/es/web/css/rtl/index.html | 22 + files/es/web/css/scroll-behavior/index.html | 165 + files/es/web/css/selectores_atributo/index.html | 241 + files/es/web/css/selectores_css/index.html | 164 + .../index.html | 67 + .../css/selectores_hermanos_adyacentes/index.html | 135 + .../css/selectores_hermanos_generales/index.html | 117 + files/es/web/css/shorthand_properties/index.html | 155 + .../index.html" | 402 + files/es/web/css/specified_value/index.html | 43 + files/es/web/css/syntax/index.html | 81 + files/es/web/css/text-decoration-color/index.html | 148 + files/es/web/css/text-decoration-line/index.html | 100 + files/es/web/css/text-decoration-style/index.html | 200 + files/es/web/css/text-decoration/index.html | 202 + files/es/web/css/text-emphasis-color/index.html | 103 + files/es/web/css/text-emphasis/index.html | 178 + files/es/web/css/text-orientation/index.html | 104 + files/es/web/css/text-overflow/index.html | 308 + files/es/web/css/text-shadow/index.html | 197 + files/es/web/css/text-transform/index.html | 499 + files/es/web/css/texto_css/index.html | 123 + files/es/web/css/time/index.html | 84 + files/es/web/css/top/index.html | 138 + files/es/web/css/transform-function/index.html | 191 + .../web/css/transform-function/rotate()/index.html | 79 + .../css/transform-function/rotate3d()/index.html | 121 + .../web/css/transform-function/scale()/index.html | 122 + .../css/transform-function/translate()/index.html | 146 + .../css/transform-function/translatey()/index.html | 117 + .../css/transform-function/translatez()/index.html | 126 + files/es/web/css/transform-origin/index.html | 262 + files/es/web/css/transform-style/index.html | 74 + files/es/web/css/transform/index.html | 240 + files/es/web/css/transiciones_de_css/index.html | 700 + files/es/web/css/transition-delay/index.html | 388 + files/es/web/css/transition-duration/index.html | 341 + files/es/web/css/transition-property/index.html | 92 + files/es/web/css/transition/index.html | 128 + files/es/web/css/tutorials/index.html | 61 + files/es/web/css/type_selectors/index.html | 84 + files/es/web/css/universal_selectors/index.html | 106 + files/es/web/css/user-select/index.html | 138 + .../web/css/using_css_custom_properties/index.html | 267 + files/es/web/css/valor_calculado/index.html | 30 + files/es/web/css/valor_inicial/index.html | 26 + files/es/web/css/var()/index.html | 134 + files/es/web/css/vertical-align/index.html | 161 + files/es/web/css/visibility/index.html | 80 + files/es/web/css/white-space/index.html | 421 + files/es/web/css/widows/index.html | 113 + files/es/web/css/width/index.html | 404 + files/es/web/css/writing-mode/index.html | 247 + files/es/web/css/z-index/index.html | 127 + files/es/web/css/zoom/index.html | 141 + .../web/demos_of_open_web_technologies/index.html | 161 + files/es/web/events/abort/index.html | 67 + files/es/web/events/animationend/index.html | 81 + files/es/web/events/beforeunload/index.html | 215 + files/es/web/events/blur/index.html | 156 + files/es/web/events/domcontentloaded/index.html | 148 + files/es/web/events/domsubtreemodified/index.html | 27 + files/es/web/events/index.html | 1976 ++ files/es/web/events/load/index.html | 125 + files/es/web/events/loadend/index.html | 91 + files/es/web/events/pointerlockchange/index.html | 80 + files/es/web/events/transitioncancel/index.html | 163 + files/es/web/events/transitionend/index.html | 183 + files/es/web/exslt/exsl/index.html | 6 + files/es/web/exslt/exsl/node-set/index.html | 39 + files/es/web/exslt/exsl/object-type/index.html | 50 + files/es/web/exslt/index.html | 110 + files/es/web/exslt/math/highest/index.html | 37 + files/es/web/exslt/math/index.html | 6 + files/es/web/exslt/math/lowest/index.html | 37 + files/es/web/exslt/math/max/index.html | 37 + files/es/web/exslt/math/min/index.html | 39 + files/es/web/exslt/regexp/index.html | 6 + files/es/web/exslt/regexp/match/index.html | 67 + files/es/web/exslt/regexp/replace/index.html | 52 + files/es/web/exslt/regexp/test/index.html | 50 + files/es/web/exslt/set/difference/index.html | 41 + files/es/web/exslt/set/distinct/index.html | 37 + files/es/web/exslt/set/has-same-node/index.html | 39 + files/es/web/exslt/set/index.html | 6 + files/es/web/exslt/set/intersection/index.html | 39 + files/es/web/exslt/set/leading/index.html | 41 + files/es/web/exslt/set/trailing/index.html | 41 + files/es/web/exslt/str/concat/index.html | 37 + files/es/web/exslt/str/index.html | 6 + files/es/web/exslt/str/split/index.html | 52 + files/es/web/exslt/str/tokenize/index.html | 54 + files/es/web/guide/ajax/comunidad/index.html | 44 + files/es/web/guide/ajax/index.html | 90 + files/es/web/guide/ajax/primeros_pasos/index.html | 231 + files/es/web/guide/api/camera/index.html | 244 + .../index.html | 48 + files/es/web/guide/api/index.html | 24 + files/es/web/guide/api/vibration/index.html | 155 + .../guide/css/block_formatting_context/index.html | 45 + .../guide/css/probando_media_queries/index.html | 93 + .../index.html" | 144 + .../dom/events/eventos_controlador/index.html | 132 + files/es/web/guide/dom/events/index.html | 16 + files/es/web/guide/dom/index.html | 21 + files/es/web/guide/graphics/index.html | 53 + .../canvas_tutorial/advanced_animations/index.html | 380 + .../applying_styles_and_colors/index.html | 726 + .../canvas_tutorial/basic_animations/index.html | 333 + .../html/canvas_tutorial/basic_usage/index.html | 146 + .../canvas_tutorial/dibujando_formas/index.html | 513 + .../hit_regions_and_accessibility/index.html | 99 + files/es/web/guide/html/canvas_tutorial/index.html | 61 + .../canvas_tutorial/optimizing_canvas/index.html | 19 + .../pixel_manipulation_with_canvas/index.html | 301 + .../guide/html/categorias_de_contenido/index.html | 175 + .../es/web/guide/html/editable_content/index.html | 226 + .../html/introduction_alhtml_clone/index.html | 172 + files/es/web/guide/index.html | 72 + files/es/web/guide/movil/index.html | 75 + .../guide/parsing_and_serializing_xml/index.html | 133 + files/es/web/guide/performance/index.html | 12 + .../performance/usando_web_workers/index.html | 633 + .../web/guide/usando_objetos_formdata/index.html | 136 + .../anipular_video_por_medio_de_canvas/index.html | 126 + files/es/web/html/atributos/accept/index.html | 169 + .../es/web/html/atributos/autocomplete/index.html | 180 + files/es/web/html/atributos/index.html | 677 + files/es/web/html/atributos/min/index.html | 162 + files/es/web/html/atributos/minlength/index.html | 71 + files/es/web/html/atributos/multiple/index.html | 182 + .../atributos_de_configuracion_cors/index.html | 123 + .../html/atributos_globales/accesskey/index.html | 143 + .../atributos_globales/autocapitalize/index.html | 50 + .../web/html/atributos_globales/class/index.html | 105 + .../atributos_globales/contenteditable/index.html | 107 + .../html/atributos_globales/contextmenu/index.html | 139 + .../html/atributos_globales/data-_star_/index.html | 108 + .../es/web/html/atributos_globales/dir/index.html | 122 + .../html/atributos_globales/draggable/index.html | 108 + .../html/atributos_globales/dropzone/index.html | 99 + .../web/html/atributos_globales/hidden/index.html | 107 + files/es/web/html/atributos_globales/id/index.html | 113 + files/es/web/html/atributos_globales/index.html | 199 + files/es/web/html/atributos_globales/is/index.html | 67 + .../web/html/atributos_globales/itemid/index.html | 78 + .../html/atributos_globales/itemprop/index.html | 22 + .../web/html/atributos_globales/itemref/index.html | 106 + .../html/atributos_globales/itemscope/index.html | 284 + .../es/web/html/atributos_globales/lang/index.html | 108 + .../es/web/html/atributos_globales/slot/index.html | 46 + .../html/atributos_globales/spellcheck/index.html | 218 + .../web/html/atributos_globales/style/index.html | 111 + .../html/atributos_globales/tabindex/index.html | 118 + .../web/html/atributos_globales/title/index.html | 138 + .../html/atributos_globales/translate/index.html | 103 + .../x-ms-acceleratorkey/index.html | 32 + files/es/web/html/block-level_elements/index.html | 130 + .../web/html/canvas/a_basic_ray-caster/index.html | 59 + .../canvas/drawing_graphics_with_canvas/index.html | 161 + files/es/web/html/canvas/index.html | 170 + .../index.html" | 53 + files/es/web/html/elemento/a/index.html | 321 + files/es/web/html/elemento/abbr/index.html | 147 + files/es/web/html/elemento/acronym/index.html | 160 + files/es/web/html/elemento/address/index.html | 163 + files/es/web/html/elemento/applet/index.html | 236 + files/es/web/html/elemento/area/index.html | 212 + files/es/web/html/elemento/article/index.html | 60 + files/es/web/html/elemento/aside/index.html | 68 + files/es/web/html/elemento/audio/index.html | 105 + files/es/web/html/elemento/b/index.html | 168 + files/es/web/html/elemento/base/index.html | 158 + files/es/web/html/elemento/basefont/index.html | 124 + files/es/web/html/elemento/bdi/index.html | 140 + files/es/web/html/elemento/bdo/index.html | 144 + files/es/web/html/elemento/bgsound/index.html | 106 + files/es/web/html/elemento/big/index.html | 191 + files/es/web/html/elemento/blink/index.html | 100 + files/es/web/html/elemento/blockquote/index.html | 153 + files/es/web/html/elemento/body/index.html | 170 + files/es/web/html/elemento/br/index.html | 157 + files/es/web/html/elemento/button/index.html | 198 + files/es/web/html/elemento/canvas/index.html | 88 + files/es/web/html/elemento/caption/index.html | 167 + files/es/web/html/elemento/center/index.html | 116 + files/es/web/html/elemento/cite/index.html | 147 + files/es/web/html/elemento/code/index.html | 110 + files/es/web/html/elemento/col/index.html | 177 + files/es/web/html/elemento/colgroup/index.html | 163 + files/es/web/html/elemento/command/index.html | 152 + files/es/web/html/elemento/content/index.html | 167 + files/es/web/html/elemento/data/index.html | 141 + files/es/web/html/elemento/datalist/index.html | 106 + files/es/web/html/elemento/dd/index.html | 111 + files/es/web/html/elemento/del/index.html | 155 + files/es/web/html/elemento/details/index.html | 152 + files/es/web/html/elemento/dfn/index.html | 112 + files/es/web/html/elemento/dialog/index.html | 152 + files/es/web/html/elemento/dir/index.html | 121 + files/es/web/html/elemento/div/index.html | 152 + files/es/web/html/elemento/dl/index.html | 219 + files/es/web/html/elemento/dt/index.html | 103 + files/es/web/html/elemento/element/index.html | 110 + .../elemento/elementos_t\303\255tulos/index.html" | 240 + files/es/web/html/elemento/em/index.html | 60 + files/es/web/html/elemento/embed/index.html | 69 + .../etiqueta_personalizada_html5/index.html | 46 + files/es/web/html/elemento/fieldset/index.html | 124 + files/es/web/html/elemento/figcaption/index.html | 90 + files/es/web/html/elemento/figure/index.html | 60 + files/es/web/html/elemento/font/index.html | 152 + files/es/web/html/elemento/footer/index.html | 71 + files/es/web/html/elemento/form/index.html | 198 + files/es/web/html/elemento/frame/index.html | 167 + files/es/web/html/elemento/frameset/index.html | 157 + files/es/web/html/elemento/head/index.html | 147 + files/es/web/html/elemento/header/index.html | 74 + files/es/web/html/elemento/hgroup/index.html | 120 + files/es/web/html/elemento/hr/index.html | 156 + files/es/web/html/elemento/html/index.html | 176 + files/es/web/html/elemento/i/index.html | 112 + files/es/web/html/elemento/iframe/index.html | 304 + files/es/web/html/elemento/image/index.html | 18 + files/es/web/html/elemento/img/index.html | 339 + files/es/web/html/elemento/index.html | 106 + .../html/elemento/input/bot\303\263n/index.html" | 254 + .../es/web/html/elemento/input/checkbox/index.html | 130 + files/es/web/html/elemento/input/color/index.html | 308 + files/es/web/html/elemento/input/date/index.html | 567 + .../es/web/html/elemento/input/datetime/index.html | 147 + files/es/web/html/elemento/input/email/index.html | 423 + files/es/web/html/elemento/input/hidden/index.html | 201 + files/es/web/html/elemento/input/index.html | 1529 ++ files/es/web/html/elemento/input/number/index.html | 450 + .../es/web/html/elemento/input/password/index.html | 132 + files/es/web/html/elemento/input/range/index.html | 416 + files/es/web/html/elemento/input/text/index.html | 472 + files/es/web/html/elemento/ins/index.html | 137 + files/es/web/html/elemento/isindex/index.html | 44 + files/es/web/html/elemento/kbd/index.html | 120 + files/es/web/html/elemento/keygen/index.html | 128 + files/es/web/html/elemento/label/index.html | 138 + files/es/web/html/elemento/legend/index.html | 125 + files/es/web/html/elemento/li/index.html | 123 + files/es/web/html/elemento/link/index.html | 425 + files/es/web/html/elemento/main/index.html | 151 + files/es/web/html/elemento/map/index.html | 133 + files/es/web/html/elemento/mark/index.html | 142 + files/es/web/html/elemento/marquee/index.html | 207 + files/es/web/html/elemento/menu/index.html | 130 + files/es/web/html/elemento/meta/index.html | 134 + files/es/web/html/elemento/multicol/index.html | 20 + files/es/web/html/elemento/nav/index.html | 108 + files/es/web/html/elemento/nobr/index.html | 29 + files/es/web/html/elemento/noframes/index.html | 143 + files/es/web/html/elemento/noscript/index.html | 138 + files/es/web/html/elemento/object/index.html | 144 + files/es/web/html/elemento/ol/index.html | 132 + files/es/web/html/elemento/option/index.html | 150 + files/es/web/html/elemento/p/index.html | 131 + files/es/web/html/elemento/param/index.html | 131 + files/es/web/html/elemento/picture/index.html | 161 + files/es/web/html/elemento/pre/index.html | 128 + files/es/web/html/elemento/progress/index.html | 97 + files/es/web/html/elemento/q/index.html | 121 + files/es/web/html/elemento/s/index.html | 114 + files/es/web/html/elemento/samp/index.html | 63 + files/es/web/html/elemento/script/index.html | 255 + files/es/web/html/elemento/section/index.html | 143 + files/es/web/html/elemento/select/index.html | 198 + files/es/web/html/elemento/shadow/index.html | 152 + files/es/web/html/elemento/slot/index.html | 126 + files/es/web/html/elemento/small/index.html | 20 + files/es/web/html/elemento/source/index.html | 129 + files/es/web/html/elemento/span/index.html | 166 + files/es/web/html/elemento/strike/index.html | 60 + files/es/web/html/elemento/strong/index.html | 58 + files/es/web/html/elemento/style/index.html | 122 + files/es/web/html/elemento/sub/index.html | 101 + files/es/web/html/elemento/sup/index.html | 110 + files/es/web/html/elemento/table/index.html | 525 + files/es/web/html/elemento/td/index.html | 310 + files/es/web/html/elemento/template/index.html | 155 + files/es/web/html/elemento/textarea/index.html | 181 + files/es/web/html/elemento/th/index.html | 328 + files/es/web/html/elemento/time/index.html | 170 + .../html/elemento/tipos_de_elementos/index.html | 119 + files/es/web/html/elemento/title/index.html | 54 + files/es/web/html/elemento/tr/index.html | 232 + files/es/web/html/elemento/track/index.html | 179 + files/es/web/html/elemento/tt/index.html | 58 + files/es/web/html/elemento/u/index.html | 79 + files/es/web/html/elemento/ul/index.html | 151 + files/es/web/html/elemento/var/index.html | 54 + files/es/web/html/elemento/video/index.html | 128 + files/es/web/html/elemento/wbr/index.html | 115 + files/es/web/html/elemento/xmp/index.html | 47 + .../web/html/elementos_en_l\303\255nea/index.html" | 52 + .../index.html | 280 + .../web/html/imagen_con_cors_habilitado/index.html | 115 + files/es/web/html/index.html | 113 + .../index.html | 65 + files/es/web/html/microdatos/index.html | 207 + files/es/web/html/microformatos/index.html | 29 + .../index.html | 34 + .../html/quirks_mode_and_standards_mode/index.html | 53 + .../html/recursos_offline_en_firefox/index.html | 382 + files/es/web/html/referencia/index.html | 26 + files/es/web/html/tipos_de_enlaces/index.html | 381 + .../web/html/transision_adaptativa_dash/index.html | 77 + .../html/usando_audio_y_video_con_html5/index.html | 286 + "files/es/web/html/\303\255ndice/index.html" | 8 + files/es/web/http/access_control_cors/index.html | 491 + files/es/web/http/authentication/index.html | 119 + .../index.html | 71 + .../web/http/basics_of_http/datos_uris/index.html | 168 + .../basics_of_http/evolution_of_http/index.html | 197 + .../index.html" | 169 + files/es/web/http/basics_of_http/index.html | 51 + .../mime_types/common_types/index.html | 321 + .../web/http/basics_of_http/mime_types/index.html | 321 + files/es/web/http/caching/index.html | 155 + files/es/web/http/cookies/index.html | 240 + .../http/cors/errors/corsdidnotsucceed/index.html | 48 + .../cors/errors/corsmissingalloworigin/index.html | 49 + .../errors/corsnotsupportingcredentials/index.html | 34 + .../errors/corspreflightdidnotsucceed/index.html | 27 + .../http/cors/errors/corsrequestnothttp/index.html | 25 + files/es/web/http/cors/errors/index.html | 76 + files/es/web/http/csp/index.html | 198 + .../gestion_de_la_conexion_en_http_1.x/index.html | 86 + .../es/web/http/headers/accept-charset/index.html | 85 + files/es/web/http/headers/accept-ranges/index.html | 70 + files/es/web/http/headers/accept/index.html | 99 + .../access-control-allow-credentials/index.html | 99 + .../access-control-allow-headers/index.html | 93 + .../access-control-allow-methods/index.html | 81 + .../headers/access-control-allow-origin/index.html | 99 + .../access-control-expose-headers/index.html | 115 + files/es/web/http/headers/age/index.html | 75 + files/es/web/http/headers/allow/index.html | 61 + files/es/web/http/headers/authorization/index.html | 86 + files/es/web/http/headers/cache-control/index.html | 241 + .../http/headers/content-disposition/index.html | 144 + .../web/http/headers/content-encoding/index.html | 97 + .../es/web/http/headers/content-length/index.html | 60 + .../web/http/headers/content-location/index.html | 156 + .../headers/content-security-policy/index.html | 252 + files/es/web/http/headers/content-type/index.html | 111 + files/es/web/http/headers/cookie/index.html | 74 + .../cross-origin-resource-policy/index.html | 68 + files/es/web/http/headers/etag/index.html | 98 + files/es/web/http/headers/expires/index.html | 81 + files/es/web/http/headers/host/index.html | 75 + files/es/web/http/headers/index.html | 396 + files/es/web/http/headers/keep-alive/index.html | 93 + files/es/web/http/headers/link/index.html | 79 + files/es/web/http/headers/origin/index.html | 83 + files/es/web/http/headers/pragma/index.html | 77 + files/es/web/http/headers/referer/index.html | 84 + .../es/web/http/headers/referrer-policy/index.html | 237 + files/es/web/http/headers/server/index.html | 66 + files/es/web/http/headers/set-cookie/index.html | 217 + .../headers/strict-transport-security/index.html | 112 + .../web/http/headers/transfer-encoding/index.html | 117 + files/es/web/http/headers/user-agent/index.html | 140 + files/es/web/http/headers/vary/index.html | 81 + .../web/http/headers/www-authenticate/index.html | 87 + .../http/headers/x-content-type-options/index.html | 83 + .../es/web/http/headers/x-forwarded-for/index.html | 74 + .../es/web/http/headers/x-frame-options/index.html | 134 + .../web/http/headers/x-xss-protection/index.html | 87 + files/es/web/http/index.html | 85 + .../mecanismo_actualizacion_protocolo/index.html | 246 + files/es/web/http/messages/index.html | 140 + files/es/web/http/methods/connect/index.html | 85 + files/es/web/http/methods/get/index.html | 69 + files/es/web/http/methods/index.html | 69 + files/es/web/http/methods/patch/index.html | 98 + files/es/web/http/methods/post/index.html | 126 + files/es/web/http/methods/put/index.html | 100 + files/es/web/http/methods/trace/index.html | 75 + files/es/web/http/overview/index.html | 172 + .../web/http/peticiones_condicionales/index.html | 148 + .../http/recursos_y_especificaciones/index.html | 262 + "files/es/web/http/sesi\303\263n/index.html" | 158 + files/es/web/http/status/100/index.html | 47 + files/es/web/http/status/101/index.html | 56 + files/es/web/http/status/200/index.html | 54 + files/es/web/http/status/201/index.html | 41 + files/es/web/http/status/202/index.html | 38 + files/es/web/http/status/203/index.html | 45 + files/es/web/http/status/206/index.html | 79 + files/es/web/http/status/301/index.html | 54 + files/es/web/http/status/302/index.html | 50 + files/es/web/http/status/304/index.html | 56 + files/es/web/http/status/400/index.html | 38 + files/es/web/http/status/401/index.html | 54 + files/es/web/http/status/403/index.html | 49 + files/es/web/http/status/404/index.html | 64 + files/es/web/http/status/408/index.html | 42 + files/es/web/http/status/418/index.html | 45 + files/es/web/http/status/500/index.html | 39 + files/es/web/http/status/502/index.html | 48 + files/es/web/http/status/503/index.html | 54 + files/es/web/http/status/504/index.html | 47 + files/es/web/http/status/505/index.html | 33 + files/es/web/http/status/8080/index.html | 34 + files/es/web/http/status/index.html | 192 + files/es/web/index.html | 60 + .../web/javascript/acerca_de_javascript/index.html | 59 + files/es/web/javascript/closures/index.html | 320 + files/es/web/javascript/data_structures/index.html | 452 + .../index.html" | 87 + .../index.html | 333 + .../equality_comparisons_and_sameness/index.html | 487 + files/es/web/javascript/eventloop/index.html | 110 + .../web/javascript/gestion_de_memoria/index.html | 204 + .../guide/bucles_e_iteraci\303\263n/index.html" | 334 + .../guide/colecciones_indexadas/index.html | 603 + .../index.html | 456 + .../guide/details_of_the_object_model/index.html | 797 + .../guide/expressions_and_operators/index.html | 924 + files/es/web/javascript/guide/funciones/index.html | 706 + .../javascript/guide/grammar_and_types/index.html | 762 + files/es/web/javascript/guide/index.html | 138 + .../guide/introducci\303\263n/index.html" | 161 + .../guide/iterators_and_generators/index.html | 177 + .../javascript/guide/keyed_collections/index.html | 162 + .../javascript/guide/meta_programming/index.html | 305 + .../javascript/guide/m\303\263dulos/index.html" | 458 + .../javascript/guide/numbers_and_dates/index.html | 395 + .../regular_expressions/aserciones/index.html | 247 + .../clases_de_caracteres/index.html | 220 + .../regular_expressions/cuantificadores/index.html | 182 + .../escapes_de_propiedades_unicode/index.html | 177 + .../regular_expressions/grupos_y_rangos/index.html | 176 + .../hoja_de_referencia/index.html | 451 + .../guide/regular_expressions/index.html | 451 + .../javascript/guide/text_formatting/index.html | 254 + .../guide/trabajando_con_objectos/index.html | 493 + .../web/javascript/guide/usar_promesas/index.html | 344 + .../herencia_y_la_cadena_de_protipos/index.html | 410 + files/es/web/javascript/index.html | 143 + .../index.html" | 384 + .../index.html | 416 + .../web/javascript/language_resources/index.html | 146 + .../novedades_en_javascript/1.1/index.html | 74 + .../novedades_en_javascript/1.2/index.html | 100 + .../novedades_en_javascript/1.3/index.html | 141 + .../novedades_en_javascript/1.5/index.html | 47 + .../novedades_en_javascript/1.6/index.html | 79 + .../novedades_en_javascript/1.7/index.html | 534 + .../novedades_en_javascript/1.8.1/index.html | 30 + .../novedades_en_javascript/1.8.5/index.html | 151 + .../novedades_en_javascript/1.8/index.html | 150 + .../ecmascript_5_support_in_mozilla/index.html | 41 + .../ecmascript_6_support_in_mozilla/index.html | 273 + .../javascript/novedades_en_javascript/index.html | 81 + .../reference/errors/bad_octal/index.html | 45 + .../reference/errors/caracter_ilegal/index.html | 83 + .../errors/deprecated_source_map_pragma/index.html | 57 + .../index.html | 72 + .../errors/in_operator_no_object/index.html | 71 + .../es/web/javascript/reference/errors/index.html | 29 + .../errors/indicador_regexp_no-val/index.html | 113 + .../errors/invalid_array_length/index.html | 78 + .../reference/errors/invalid_date/index.html | 58 + .../errors/malformed_formal_parameter/index.html | 60 + .../missing_curly_after_property_list/index.html | 47 + .../errors/missing_formal_parameter/index.html | 75 + .../index.html | 51 + .../errors/more_arguments_needed/index.html | 51 + .../reference/errors/no_variable_name/index.html | 83 + .../reference/errors/not_a_codepoint/index.html | 51 + .../reference/errors/not_a_function/index.html | 124 + .../reference/errors/not_defined/index.html | 67 + .../reference/errors/precision_range/index.html | 96 + .../errors/property_access_denied/index.html | 46 + .../reference/errors/stmt_after_return/index.html | 74 + .../index.html" | 117 + .../reference/errors/too_much_recursion/index.html | 57 + .../reference/errors/undefined_prop/index.html | 63 + .../reference/errors/unexpected_token/index.html | 50 + .../reference/errors/unexpected_type/index.html | 61 + .../handler/getownpropertydescriptor/index.html | 129 + .../global_objects/proxy/handler/index.html | 83 + .../global_objects/proxy/handler/set/index.html | 122 + .../reference/global_objects/rangeerror/index.html | 163 + .../global_objects/rangeerror/prototype/index.html | 130 + .../reference/global_objects/reflect/index.html | 137 + .../global_objects/reflect/set/index.html | 148 + .../web/javascript/referencia/acerca_de/index.html | 158 + .../index.html" | 292 + .../the_legacy_iterator_protocol/index.html" | 72 + .../referencia/classes/class_fields/index.html | 386 + .../referencia/classes/constructor/index.html | 100 + .../referencia/classes/extends/index.html | 167 + .../web/javascript/referencia/classes/index.html | 372 + .../classes/private_class_fields/index.html | 201 + .../referencia/classes/static/index.html | 118 + .../funciones/arguments/callee/index.html | 48 + .../referencia/funciones/arguments/index.html | 229 + .../funciones/arguments/length/index.html | 131 + .../funciones/arrow_functions/index.html | 530 + .../javascript/referencia/funciones/get/index.html | 134 + .../web/javascript/referencia/funciones/index.html | 661 + .../funciones/method_definitions/index.html | 226 + .../funciones/parametros_por_defecto/index.html | 234 + .../funciones/parametros_rest/index.html | 266 + .../javascript/referencia/funciones/set/index.html | 217 + .../referencia/gramatica_lexica/index.html | 661 + files/es/web/javascript/referencia/index.html | 31 + .../referencia/iteration_protocols/index.html | 320 + .../javascript/referencia/modo_estricto/index.html | 368 + .../objetos_globales/aggregateerror/index.html | 87 + .../objetos_globales/array/@@iterator/index.html | 89 + .../objetos_globales/array/@@species/index.html | 76 + .../array/@@unscopables/index.html | 78 + .../objetos_globales/array/concat/index.html | 140 + .../objetos_globales/array/copywithin/index.html | 165 + .../objetos_globales/array/entries/index.html | 86 + .../objetos_globales/array/every/index.html | 195 + .../objetos_globales/array/fill/index.html | 145 + .../objetos_globales/array/filter/index.html | 219 + .../objetos_globales/array/find/index.html | 233 + .../objetos_globales/array/findindex/index.html | 187 + .../objetos_globales/array/flat/index.html | 174 + .../objetos_globales/array/flatmap/index.html | 128 + .../objetos_globales/array/foreach/index.html | 257 + .../objetos_globales/array/from/index.html | 242 + .../objetos_globales/array/includes/index.html | 181 + .../referencia/objetos_globales/array/index.html | 451 + .../objetos_globales/array/indexof/index.html | 248 + .../objetos_globales/array/isarray/index.html | 128 + .../objetos_globales/array/join/index.html | 110 + .../objetos_globales/array/keys/index.html | 84 + .../objetos_globales/array/lastindexof/index.html | 164 + .../objetos_globales/array/length/index.html | 143 + .../objetos_globales/array/map/index.html | 360 + .../objetos_globales/array/observe/index.html | 133 + .../objetos_globales/array/of/index.html | 97 + .../objetos_globales/array/pop/index.html | 94 + .../objetos_globales/array/prototype/index.html | 188 + .../objetos_globales/array/push/index.html | 140 + .../objetos_globales/array/reduce/index.html | 215 + .../objetos_globales/array/reduceright/index.html | 166 + .../objetos_globales/array/reverse/index.html | 88 + .../objetos_globales/array/shift/index.html | 124 + .../objetos_globales/array/slice/index.html | 287 + .../objetos_globales/array/some/index.html | 204 + .../objetos_globales/array/sort/index.html | 301 + .../objetos_globales/array/splice/index.html | 148 + .../array/tolocalestring/index.html | 177 + .../objetos_globales/array/tosource/index.html | 112 + .../objetos_globales/array/tostring/index.html | 78 + .../objetos_globales/array/unobserve/index.html | 127 + .../objetos_globales/array/unshift/index.html | 100 + .../objetos_globales/array/values/index.html | 82 + .../arraybuffer/@@species/index.html | 72 + .../arraybuffer/bytelength/index.html | 70 + .../objetos_globales/arraybuffer/index.html | 139 + .../arraybuffer/prototype/index.html | 68 + .../objetos_globales/boolean/boolean/index.html | 75 + .../referencia/objetos_globales/boolean/index.html | 126 + .../objetos_globales/boolean/tosource/index.html | 36 + .../objetos_globales/date/getdate/index.html | 119 + .../objetos_globales/date/getday/index.html | 124 + .../objetos_globales/date/getfullyear/index.html | 124 + .../objetos_globales/date/gethours/index.html | 119 + .../date/getmilliseconds/index.html | 121 + .../objetos_globales/date/getminutes/index.html | 118 + .../objetos_globales/date/getmonth/index.html | 125 + .../objetos_globales/date/getseconds/index.html | 83 + .../objetos_globales/date/gettime/index.html | 140 + .../date/getutcfullyear/index.html | 121 + .../objetos_globales/date/getutchours/index.html | 117 + .../referencia/objetos_globales/date/index.html | 132 + .../objetos_globales/date/now/index.html | 30 + .../objetos_globales/date/parse/index.html | 35 + .../objetos_globales/date/prototype/index.html | 200 + .../objetos_globales/date/setfullyear/index.html | 133 + .../objetos_globales/date/setmonth/index.html | 78 + .../objetos_globales/date/todatestring/index.html | 88 + .../objetos_globales/date/toisostring/index.html | 144 + .../objetos_globales/date/tojson/index.html | 61 + .../date/tolocaledatestring/index.html | 159 + .../date/tolocalestring/index.html | 163 + .../date/tolocaletimestring/index.html | 152 + .../objetos_globales/date/toutcstring/index.html | 105 + .../objetos_globales/date/utc/index.html | 78 + .../objetos_globales/decodeuri/index.html | 38 + .../objetos_globales/decodeuricomponent/index.html | 42 + .../objetos_globales/encodeuri/index.html | 61 + .../objetos_globales/encodeuricomponent/index.html | 161 + .../error/constructor_error/index.html | 69 + .../objetos_globales/error/filename/index.html | 48 + .../referencia/objetos_globales/error/index.html | 219 + .../objetos_globales/error/linenumber/index.html | 101 + .../objetos_globales/error/message/index.html | 114 + .../objetos_globales/error/name/index.html | 58 + .../objetos_globales/error/prototype/index.html | 153 + .../objetos_globales/error/tosource/index.html | 60 + .../objetos_globales/error/tostring/index.html | 98 + .../referencia/objetos_globales/escape/index.html | 91 + .../referencia/objetos_globales/eval/index.html | 309 + .../objetos_globales/evalerror/index.html | 163 + .../funcionesas\303\255ncronas/index.html" | 122 + .../objetos_globales/function/apply/index.html | 233 + .../objetos_globales/function/arguments/index.html | 44 + .../objetos_globales/function/arity/index.html | 32 + .../objetos_globales/function/bind/index.html | 293 + .../objetos_globales/function/call/index.html | 113 + .../objetos_globales/function/caller/index.html | 128 + .../function/displayname/index.html | 77 + .../function/funci\303\263n/index.html" | 92 + .../objetos_globales/function/index.html | 118 + .../function/isgenerator/index.html | 90 + .../objetos_globales/function/length/index.html | 151 + .../objetos_globales/function/name/index.html | 223 + .../objetos_globales/function/prototype/index.html | 64 + .../objetos_globales/function/tosource/index.html | 97 + .../objetos_globales/function/tostring/index.html | 130 + .../objetos_globales/generador/index.html | 228 + .../objetos_globales/generador/next/index.html | 109 + .../objetos_globales/generador/return/index.html | 102 + .../objetos_globales/generador/throw/index.html | 94 + .../referencia/objetos_globales/index.html | 203 + .../objetos_globales/infinity/index.html | 96 + .../constructor_internalerror/index.html | 55 + .../objetos_globales/internalerror/index.html | 98 + .../referencia/objetos_globales/intl/index.html | 126 + .../intl/numberformat/format/index.html | 92 + .../objetos_globales/intl/numberformat/index.html | 188 + .../intl/relativetimeformat/index.html | 106 + .../objetos_globales/isfinite/index.html | 114 + .../referencia/objetos_globales/isnan/index.html | 88 + .../referencia/objetos_globales/json/index.html | 231 + .../objetos_globales/json/parse/index.html | 178 + .../objetos_globales/json/stringify/index.html | 265 + .../objetos_globales/map/clear/index.html | 109 + .../objetos_globales/map/delete/index.html | 114 + .../objetos_globales/map/entries/index.html | 109 + .../objetos_globales/map/foreach/index.html | 94 + .../referencia/objetos_globales/map/get/index.html | 77 + .../referencia/objetos_globales/map/has/index.html | 65 + .../referencia/objetos_globales/map/index.html | 213 + .../objetos_globales/map/keys/index.html | 109 + .../objetos_globales/map/prototype/index.html | 134 + .../referencia/objetos_globales/map/set/index.html | 133 + .../objetos_globales/map/size/index.html | 110 + .../objetos_globales/map/values/index.html | 77 + .../objetos_globales/math/abs/index.html | 149 + .../objetos_globales/math/acos/index.html | 99 + .../objetos_globales/math/acosh/index.html | 94 + .../objetos_globales/math/asin/index.html | 144 + .../objetos_globales/math/asinh/index.html | 90 + .../objetos_globales/math/atan/index.html | 107 + .../objetos_globales/math/atan2/index.html | 141 + .../objetos_globales/math/atanh/index.html | 87 + .../objetos_globales/math/cbrt/index.html | 96 + .../objetos_globales/math/ceil/index.html | 166 + .../objetos_globales/math/cos/index.html | 74 + .../referencia/objetos_globales/math/e/index.html | 83 + .../objetos_globales/math/exp/index.html | 136 + .../objetos_globales/math/expm1/index.html | 89 + .../objetos_globales/math/floor/index.html | 124 + .../objetos_globales/math/fround/index.html | 199 + .../objetos_globales/math/hypot/index.html | 124 + .../referencia/objetos_globales/math/index.html | 196 + .../objetos_globales/math/ln10/index.html | 84 + .../objetos_globales/math/ln2/index.html | 83 + .../objetos_globales/math/log/index.html | 112 + .../objetos_globales/math/log10/index.html | 137 + .../objetos_globales/math/log10e/index.html | 130 + .../objetos_globales/math/log2/index.html | 96 + .../objetos_globales/math/log2e/index.html | 27 + .../objetos_globales/math/max/index.html | 145 + .../objetos_globales/math/min/index.html | 150 + .../referencia/objetos_globales/math/pi/index.html | 126 + .../objetos_globales/math/pow/index.html | 140 + .../objetos_globales/math/random/index.html | 132 + .../objetos_globales/math/round/index.html | 218 + .../objetos_globales/math/seno/index.html | 126 + .../objetos_globales/math/sign/index.html | 151 + .../objetos_globales/math/sqrt/index.html | 134 + .../objetos_globales/math/sqrt1_2/index.html | 123 + .../objetos_globales/math/sqrt2/index.html | 124 + .../objetos_globales/math/tan/index.html | 82 + .../objetos_globales/math/tanh/index.html | 95 + .../objetos_globales/math/trunc/index.html | 144 + .../referencia/objetos_globales/nan/index.html | 46 + .../referencia/objetos_globales/null/index.html | 129 + .../referencia/objetos_globales/number/index.html | 181 + .../objetos_globales/number/isfinite/index.html | 88 + .../objetos_globales/number/isinteger/index.html | 94 + .../objetos_globales/number/isnan/index.html | 140 + .../number/issafeinteger/index.html | 99 + .../number/max_safe_integer/index.html | 68 + .../objetos_globales/number/max_value/index.html | 131 + .../objetos_globales/number/min_value/index.html | 121 + .../objetos_globales/number/nan/index.html | 59 + .../number/negative_infinity/index.html | 117 + .../objetos_globales/number/parsefloat/index.html | 76 + .../objetos_globales/number/parseint/index.html | 80 + .../number/positive_infinity/index.html | 115 + .../objetos_globales/number/prototype/index.html | 15 + .../objetos_globales/number/tofixed/index.html | 147 + .../number/tolocalestring/index.html | 155 + .../objetos_globales/number/toprecision/index.html | 102 + .../objetos_globales/number/tostring/index.html | 63 + .../objetos_globales/number/valueof/index.html | 81 + .../object/__definegetter__/index.html | 144 + .../object/__lookupgetter__/index.html | 84 + .../objetos_globales/object/assign/index.html | 274 + .../objetos_globales/object/constructor/index.html | 161 + .../objetos_globales/object/count/index.html | 82 + .../objetos_globales/object/create/index.html | 377 + .../object/defineproperties/index.html | 194 + .../object/defineproperty/index.html | 419 + .../objetos_globales/object/entries/index.html | 161 + .../objetos_globales/object/freeze/index.html | 174 + .../objetos_globales/object/fromentries/index.html | 106 + .../objetos_globales/object/getnotifier/index.html | 92 + .../object/getownpropertydescriptor/index.html | 161 + .../object/getownpropertydescriptors/index.html | 117 + .../object/getownpropertynames/index.html | 163 + .../object/getownpropertysymbols/index.html | 123 + .../object/getprototypeof/index.html | 137 + .../object/hasownproperty/index.html | 186 + .../referencia/objetos_globales/object/index.html | 187 + .../objetos_globales/object/is/index.html | 172 + .../object/isextensible/index.html | 144 + .../objetos_globales/object/isfrozen/index.html | 190 + .../object/isprototypeof/index.html | 158 + .../objetos_globales/object/issealed/index.html | 140 + .../objetos_globales/object/keys/index.html | 156 + .../object/nosuchmethod/index.html | 198 + .../objetos_globales/object/observe/index.html | 188 + .../objetos_globales/object/parent/index.html | 244 + .../object/preventextensions/index.html | 176 + .../object/propertyisenumerable/index.html | 185 + .../objetos_globales/object/proto/index.html | 128 + .../objetos_globales/object/prototype/index.html | 194 + .../objetos_globales/object/seal/index.html | 167 + .../object/setprototypeof/index.html | 237 + .../object/tolocalestring/index.html | 106 + .../objetos_globales/object/tosource/index.html | 126 + .../objetos_globales/object/tostring/index.html | 70 + .../objetos_globales/object/unobserve/index.html | 138 + .../objetos_globales/object/unwatch/index.html | 37 + .../objetos_globales/object/valueof/index.html | 157 + .../objetos_globales/object/values/index.html | 97 + .../objetos_globales/object/watch/index.html | 104 + .../objetos_globales/parsefloat/index.html | 58 + .../objetos_globales/parseint/index.html | 89 + .../objetos_globales/promise/all/index.html | 123 + .../objetos_globales/promise/catch/index.html | 183 + .../objetos_globales/promise/finally/index.html | 95 + .../referencia/objetos_globales/promise/index.html | 222 + .../objetos_globales/promise/prototype/index.html | 68 + .../objetos_globales/promise/race/index.html | 112 + .../objetos_globales/promise/reject/index.html | 80 + .../objetos_globales/promise/resolve/index.html | 150 + .../objetos_globales/promise/then/index.html | 302 + .../referencia/objetos_globales/proxy/index.html | 439 + .../objetos_globales/referenceerror/index.html | 99 + .../objetos_globales/regexp/compile/index.html | 93 + .../objetos_globales/regexp/exec/index.html | 238 + .../objetos_globales/regexp/ignorecase/index.html | 142 + .../referencia/objetos_globales/regexp/index.html | 264 + .../objetos_globales/regexp/regexp/index.html | 114 + .../regexp/rightcontext/index.html | 54 + .../objetos_globales/regexp/test/index.html | 152 + .../objetos_globales/regexp/tostring/index.html | 171 + .../objetos_globales/set/@@iterator/index.html | 86 + .../referencia/objetos_globales/set/add/index.html | 124 + .../objetos_globales/set/clear/index.html | 119 + .../objetos_globales/set/delete/index.html | 117 + .../objetos_globales/set/entries/index.html | 71 + .../referencia/objetos_globales/set/has/index.html | 124 + .../referencia/objetos_globales/set/index.html | 230 + .../objetos_globales/set/size/index.html | 106 + .../objetos_globales/set/values/index.html | 72 + .../objetos_globales/string/anchor/index.html | 56 + .../objetos_globales/string/big/index.html | 54 + .../objetos_globales/string/blink/index.html | 42 + .../objetos_globales/string/bold/index.html | 43 + .../objetos_globales/string/charat/index.html | 143 + .../objetos_globales/string/charcodeat/index.html | 65 + .../objetos_globales/string/codepointat/index.html | 127 + .../objetos_globales/string/concat/index.html | 90 + .../objetos_globales/string/endswith/index.html | 88 + .../objetos_globales/string/fixed/index.html | 35 + .../objetos_globales/string/fontcolor/index.html | 122 + .../objetos_globales/string/fontsize/index.html | 123 + .../string/fromcharcode/index.html | 130 + .../string/fromcodepoint/index.html | 204 + .../objetos_globales/string/includes/index.html | 108 + .../referencia/objetos_globales/string/index.html | 385 + .../objetos_globales/string/indexof/index.html | 104 + .../objetos_globales/string/italics/index.html | 49 + .../objetos_globales/string/lastindexof/index.html | 79 + .../objetos_globales/string/length/index.html | 94 + .../objetos_globales/string/link/index.html | 56 + .../string/localecompare/index.html | 159 + .../objetos_globales/string/match/index.html | 78 + .../objetos_globales/string/matchall/index.html | 134 + .../objetos_globales/string/normalize/index.html | 126 + .../objetos_globales/string/padstart/index.html | 100 + .../objetos_globales/string/prototype/index.html | 117 + .../objetos_globales/string/raw/index.html | 112 + .../objetos_globales/string/repeat/index.html | 128 + .../objetos_globales/string/replace/index.html | 202 + .../objetos_globales/string/search/index.html | 153 + .../objetos_globales/string/slice/index.html | 161 + .../objetos_globales/string/small/index.html | 38 + .../objetos_globales/string/split/index.html | 240 + .../objetos_globales/string/startswith/index.html | 97 + .../objetos_globales/string/strike/index.html | 42 + .../objetos_globales/string/sub/index.html | 35 + .../objetos_globales/string/substr/index.html | 83 + .../objetos_globales/string/substring/index.html | 92 + .../objetos_globales/string/sup/index.html | 35 + .../string/tolocalelowercase/index.html | 113 + .../string/tolocaleuppercase/index.html | 100 + .../objetos_globales/string/tolowercase/index.html | 40 + .../objetos_globales/string/tosource/index.html | 56 + .../objetos_globales/string/tostring/index.html | 28 + .../objetos_globales/string/touppercase/index.html | 39 + .../objetos_globales/string/trim/index.html | 133 + .../objetos_globales/string/trimend/index.html | 82 + .../objetos_globales/string/valueof/index.html | 28 + .../objetos_globales/symbol/for/index.html | 153 + .../objetos_globales/symbol/hasinstance/index.html | 105 + .../referencia/objetos_globales/symbol/index.html | 364 + .../objetos_globales/symbol/iterator/index.html | 98 + .../objetos_globales/syntaxerror/index.html | 176 + .../syntaxerror/prototype/index.html | 132 + .../objetos_globales/typedarray/buffer/index.html | 110 + .../objetos_globales/typedarray/index.html | 317 + .../objetos_globales/uint8array/index.html | 260 + .../objetos_globales/undefined/index.html | 183 + .../objetos_globales/unescape/index.html | 123 + .../objetos_globales/urierror/index.html | 136 + .../objetos_globales/weakmap/clear/index.html | 52 + .../objetos_globales/weakmap/delete/index.html | 124 + .../objetos_globales/weakmap/get/index.html | 80 + .../objetos_globales/weakmap/has/index.html | 83 + .../referencia/objetos_globales/weakmap/index.html | 278 + .../objetos_globales/weakmap/prototype/index.html | 142 + .../objetos_globales/weakmap/set/index.html | 91 + .../referencia/objetos_globales/weakset/index.html | 227 + .../objetos_globales/webassembly/index.html | 120 + .../operadores/adici\303\263n/index.html" | 77 + .../operadores/aritm\303\251ticos/index.html" | 314 + .../operadores/array_comprehensions/index.html | 195 + .../referencia/operadores/asignacion/index.html | 62 + .../operadores/assignment_operators/index.html | 461 + .../operadores/async_function/index.html | 102 + .../referencia/operadores/await/index.html | 102 + .../operadores/bitwise_operators/index.html | 721 + .../referencia/operadores/class/index.html | 157 + .../referencia/operadores/comparacion/index.html | 129 + .../operadores/comparison_operators/index.html | 261 + .../operadores/conditional_operator/index.html | 171 + .../referencia/operadores/decremento/index.html | 83 + .../referencia/operadores/delete/index.html | 242 + .../operadores/destructuring_assignment/index.html | 442 + .../referencia/operadores/division/index.html | 77 + .../operadores/encadenamiento_opcional/index.html | 187 + .../operadores/expression_closures/index.html | 76 + .../referencia/operadores/function/index.html | 73 + .../operadores/function_star_/index.html | 91 + .../referencia/operadores/grouping/index.html | 128 + .../javascript/referencia/operadores/in/index.html | 139 + .../javascript/referencia/operadores/index.html | 280 + .../referencia/operadores/instanceof/index.html | 88 + .../referencia/operadores/miembros/index.html | 85 + .../referencia/operadores/new.target/index.html | 139 + .../referencia/operadores/new/index.html | 179 + .../referencia/operadores/operador_coma/index.html | 132 + .../operadores_l\303\263gicos/index.html" | 295 + .../operadores/operator_precedence/index.html | 297 + .../operadores/pipeline_operator/index.html | 78 + .../referencia/operadores/resto/index.html | 82 + .../operadores/sintaxis_spread/index.html | 242 + .../operadores/spread_operator/index.html | 219 + .../operadores/strict_equality/index.html | 101 + .../referencia/operadores/super/index.html | 178 + .../operadores/sustracci\303\263n/index.html" | 65 + .../referencia/operadores/this/index.html | 239 + .../referencia/operadores/typeof/index.html | 76 + .../referencia/operadores/void/index.html | 36 + .../referencia/operadores/yield/index.html | 130 + .../referencia/operadores/yield_star_/index.html | 199 + .../referencia/palabras_reservadas/index.html | 98 + .../referencia/sentencias/block/index.html | 89 + .../referencia/sentencias/break/index.html | 41 + .../referencia/sentencias/class/index.html | 148 + .../referencia/sentencias/const/index.html | 127 + .../referencia/sentencias/continue/index.html | 66 + .../referencia/sentencias/debugger/index.html | 125 + .../referencia/sentencias/default/index.html | 120 + .../referencia/sentencias/do...while/index.html | 49 + .../referencia/sentencias/empty/index.html | 141 + .../referencia/sentencias/export/index.html | 175 + .../sentencias/for-await...of/index.html | 144 + .../referencia/sentencias/for...in/index.html | 150 + .../referencia/sentencias/for...of/index.html | 319 + .../referencia/sentencias/for/index.html | 57 + .../referencia/sentencias/for_each...in/index.html | 67 + .../sentencias/funcion_asincrona/index.html | 173 + .../referencia/sentencias/function/index.html | 52 + .../sentencias/function_star_/index.html | 224 + .../referencia/sentencias/if...else/index.html | 109 + .../referencia/sentencias/import.meta/index.html | 93 + .../referencia/sentencias/import/index.html | 177 + .../javascript/referencia/sentencias/index.html | 141 + .../referencia/sentencias/label/index.html | 35 + .../referencia/sentencias/let/index.html | 393 + .../referencia/sentencias/return/index.html | 73 + .../referencia/sentencias/switch/index.html | 245 + .../referencia/sentencias/throw/index.html | 153 + .../referencia/sentencias/try...catch/index.html | 254 + .../referencia/sentencias/var/index.html | 163 + .../referencia/sentencias/while/index.html | 58 + .../referencia/sentencias/with/index.html | 166 + .../referencia/template_strings/index.html | 314 + files/es/web/javascript/shells/index.html | 41 + .../index.html" | 960 + .../es/web/javascript/vectores_tipados/index.html | 272 + files/es/web/manifest/index.html | 384 + files/es/web/mathml/attribute/index.html | 485 + files/es/web/mathml/authoring/index.html | 377 + files/es/web/mathml/elemento/index.html | 97 + files/es/web/mathml/elemento/math/index.html | 162 + files/es/web/mathml/examples/index.html | 24 + .../examples/mathml_pythagorean_theorem/index.html | 9 + files/es/web/mathml/index.html | 75 + files/es/web/media/formats/containers/index.html | 1329 ++ files/es/web/media/formats/index.html | 88 + files/es/web/media/index.html | 94 + files/es/web/performance/fundamentals/index.html | 233 + .../web/performance/how_browsers_work/index.html | 208 + files/es/web/performance/index.html | 242 + .../mejorando_rendimienot_inicial/index.html | 95 + .../progressive_web_apps/app_structure/index.html | 286 + .../developer_guide/index.html | 79 + .../developer_guide/instalar/index.html | 96 + files/es/web/progressive_web_apps/index.html | 107 + .../installable_pwas/index.html | 130 + .../progressive_web_apps/introduction/index.html | 169 + .../es/web/progressive_web_apps/loading/index.html | 155 + .../offline_service_workers/index.html | 208 + .../re-engageable_notifications_push/index.html | 251 + .../web/progressive_web_apps/ventajas/index.html | 62 + files/es/web/reference/api/index.html | 64 + files/es/web/reference/index.html | 56 + .../security/csp/csp_policy_directives/index.html | 708 + files/es/web/security/csp/index.html | 38 + .../introducing_content_security_policy/index.html | 56 + files/es/web/security/index.html | 17 + .../web/security/same-origin_politica/index.html | 271 + .../index.html | 77 + .../es/web/security/securing_your_site/index.html | 54 + files/es/web/svg/attribute/index.html | 467 + files/es/web/svg/attribute/stop-color/index.html | 59 + files/es/web/svg/attribute/transform/index.html | 144 + files/es/web/svg/element/a/index.html | 145 + files/es/web/svg/element/animate/index.html | 109 + files/es/web/svg/element/circle/index.html | 116 + files/es/web/svg/element/foreignobject/index.html | 133 + files/es/web/svg/element/g/index.html | 110 + files/es/web/svg/element/glifo/index.html | 114 + files/es/web/svg/element/index.html | 297 + files/es/web/svg/element/rect/index.html | 141 + files/es/web/svg/element/style/index.html | 112 + files/es/web/svg/element/svg/index.html | 110 + files/es/web/svg/element/text/index.html | 152 + files/es/web/svg/element/use/index.html | 154 + files/es/web/svg/index.html | 110 + files/es/web/svg/index/index.html | 6 + files/es/web/svg/svg_en_firefox_1.5/index.html | 60 + .../es/web/svg/tutorial/getting_started/index.html | 96 + files/es/web/svg/tutorial/index.html | 57 + .../svg/tutorial/introducci\303\263n/index.html" | 45 + .../tutorial/svg_in_html_introduction/index.html | 95 + files/es/web/svg/tutorial/tools_for_svg/index.html | 74 + files/es/web/tutoriales/index.html | 206 + .../web/web_components/custom_elements/index.html | 181 + files/es/web/web_components/index.html | 224 + .../using_custom_elements/index.html | 304 + .../web/web_components/using_shadow_dom/index.html | 199 + .../using_templates_and_slots/index.html | 335 + files/es/web/xml/index.html | 17 + .../web/xml/introducci\303\263n_a_xml/index.html" | 125 + .../es/web/xpath/ejes/ancestor-or-self/index.html | 8 + files/es/web/xpath/ejes/ancestor/index.html | 8 + files/es/web/xpath/ejes/attribute/index.html | 8 + files/es/web/xpath/ejes/child/index.html | 8 + .../web/xpath/ejes/descendant-or-self/index.html | 8 + files/es/web/xpath/ejes/descendant/index.html | 8 + .../es/web/xpath/ejes/following-sibling/index.html | 8 + files/es/web/xpath/ejes/following/index.html | 8 + files/es/web/xpath/ejes/index.html | 47 + files/es/web/xpath/ejes/namespace/index.html | 9 + files/es/web/xpath/ejes/parent/index.html | 8 + .../es/web/xpath/ejes/preceding-sibling/index.html | 8 + files/es/web/xpath/ejes/preceding/index.html | 8 + files/es/web/xpath/funciones/contains/index.html | 32 + files/es/web/xpath/funciones/index.html | 54 + files/es/web/xpath/funciones/substring/index.html | 37 + files/es/web/xpath/funciones/true/index.html | 29 + files/es/web/xpath/index.html | 14 + files/es/web/xslt/apply-imports/index.html | 36 + files/es/web/xslt/apply-templates/index.html | 43 + files/es/web/xslt/attribute-set/index.html | 43 + files/es/web/xslt/attribute/index.html | 43 + files/es/web/xslt/call-template/index.html | 40 + files/es/web/xslt/choose/index.html | 37 + files/es/web/xslt/comment/index.html | 37 + files/es/web/xslt/copy-of/index.html | 38 + files/es/web/xslt/copy/index.html | 40 + files/es/web/xslt/decimal-format/index.html | 99 + files/es/web/xslt/element/element/index.html | 46 + files/es/web/xslt/element/index.html | 66 + files/es/web/xslt/fallback/index.html | 38 + files/es/web/xslt/for-each/index.html | 42 + files/es/web/xslt/if/index.html | 39 + files/es/web/xslt/import/index.html | 39 + files/es/web/xslt/include/index.html | 39 + files/es/web/xslt/index.html | 55 + files/es/web/xslt/key/index.html | 44 + files/es/web/xslt/message/index.html | 40 + files/es/web/xslt/namespace-alias/index.html | 42 + files/es/web/xslt/number/index.html | 169 + files/es/web/xslt/otherwise/index.html | 37 + .../web/xslt/transformando_xml_con_xslt/index.html | 112 + files/es/web/xslt/when/index.html | 40 + files/es/web/xslt/with-param/index.html | 43 + files/es/web_audio_api/index.html | 510 + .../mobile/dise\303\261o_responsivo/index.html" | 44 + files/es/web_development/mobile/index.html | 17 + files/es/web_localizability/index.html | 19 + files/es/webapi/alarm/index.html | 180 + "files/es/webapi/c\303\241mara/index.html" | 20 + files/es/webapi/device_storage/index.html | 226 + files/es/webapi/estado_de_bateria/index.html | 39 + files/es/webapi/index.html | 143 + files/es/webapi/pointer_lock/index.html | 284 + files/es/webapi/using_geolocation/index.html | 232 + files/es/webassembly/concepts/index.html | 152 + files/es/webassembly/index.html | 119 + .../es/webassembly/loading_and_running/index.html | 111 + files/es/webrtc/index.html | 77 + files/es/webrtc/introduction/index.html | 21 + files/es/webrtc/mediastream_api/index.html | 445 + .../index.html | 99 + files/es/webrtc/taking_webcam_photos/index.html | 159 + files/es/websockets/index.html | 37 + files/es/xforms/index.html | 28 + files/es/xforms/soporte_en_mozilla/index.html | 116 + files/es/xhtml/index.html | 33 + files/es/xml_en_mozilla/index.html | 280 + .../xmlhttprequest_cambios_en_gecko1.8/index.html | 22 + files/es/xpcom_interface_reference/index.html | 17 + .../nsiloginmanager/index.html | 372 + files/es/xpcomutils.jsm/index.html | 509 + files/es/xpinstall/index.html | 54 + files/es/xpinstall_api_reference/index.html | 132 + files/es/xul_tutorial/index.html | 5 + files/es/zonas/index.html | 72 + .../es/zoom_a_p\303\241gina_completa/index.html" | 46 + 3523 files changed, 520862 insertions(+) create mode 100644 files/es/_redirects.txt create mode 100644 files/es/_wikihistory.json create mode 100644 files/es/acerca_del_modelo_de_objetos_del_documento/index.html create mode 100644 files/es/actualizar_aplicaciones_web_para_firefox_3/index.html create mode 100644 files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html create mode 100644 files/es/actualizar_extensiones_para_firefox_3/index.html create mode 100644 "files/es/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" create mode 100644 files/es/administrador_de_perfiles/index.html create mode 100644 files/es/almacenamiento/index.html create mode 100644 files/es/api_de_acceso_a_canales/index.html create mode 100644 files/es/api_del_toolkit/index.html create mode 100644 files/es/applying_svg_effects_to_html_content/index.html create mode 100644 "files/es/archive/add-ons/api_de_restauraci\303\263n_de_sesi\303\263n/index.html" create mode 100644 files/es/archive/add-ons/index.html create mode 100644 files/es/archive/add-ons/observer_notifications/index.html create mode 100644 "files/es/archive/add-ons/permitir_sugerencias_en_los_plugins_de_b\303\272squeda/index.html" create mode 100644 "files/es/archive/add-ons/versionado,_actualizaci\303\263n_y_compatibilidad_de_extensiones/index.html" create mode 100644 files/es/archive/api/index.html create mode 100644 files/es/archive/api/navigator/index.html create mode 100644 files/es/archive/api/navigator/moznotification/index.html create mode 100644 files/es/archive/apps/advanced_topics/index.html create mode 100644 files/es/archive/apps/index.html create mode 100644 files/es/archive/b2g_os/api/callevent/index.html create mode 100644 files/es/archive/b2g_os/api/cameramanager/getcamera/index.html create mode 100644 files/es/archive/b2g_os/api/cameramanager/index.html create mode 100644 files/es/archive/b2g_os/api/index.html create mode 100644 files/es/archive/b2g_os/api/mozactivity/index.html create mode 100644 files/es/archive/b2g_os/api/mozvoicemailstatus/index.html create mode 100644 files/es/archive/b2g_os/api/navigator/index.html create mode 100644 files/es/archive/b2g_os/api/navigator/mozalarms/index.html create mode 100644 files/es/archive/b2g_os/api/navigator/mozapps/index.html create mode 100644 files/es/archive/b2g_os/api/navigator/moztelephony/index.html create mode 100644 files/es/archive/b2g_os/api/telephony/index.html create mode 100644 files/es/archive/b2g_os/api/telephonycall/hangup/index.html create mode 100644 files/es/archive/b2g_os/api/telephonycall/index.html create mode 100644 files/es/archive/b2g_os/api/telephonycall/number/index.html create mode 100644 files/es/archive/b2g_os/api/telephonycall/onincoming/index.html create mode 100644 files/es/archive/b2g_os/api/window/index.html create mode 100644 files/es/archive/b2g_os/application_development/index.html create mode 100644 files/es/archive/b2g_os/apps/escribiendo_una_aplicacion_web_para_b2g/index.html create mode 100644 files/es/archive/b2g_os/apps/index.html create mode 100644 files/es/archive/b2g_os/architecture/index.html create mode 100644 files/es/archive/b2g_os/building_and_installing_boot_to_gecko/dispositivos_compatibles/index.html create mode 100644 files/es/archive/b2g_os/building_and_installing_boot_to_gecko/firefox_os_build_process_summary/index.html create mode 100644 files/es/archive/b2g_os/building_and_installing_boot_to_gecko/index.html create mode 100644 files/es/archive/b2g_os/building_b2g_for_qemu_emulator/index.html create mode 100644 files/es/archive/b2g_os/compilar_boot_to_gecko/index.html create mode 100644 files/es/archive/b2g_os/complementos/index.html create mode 100644 files/es/archive/b2g_os/consejos_uso_firefox_os/index.html create mode 100644 files/es/archive/b2g_os/debugging/depurar_b2g_usando_gdb/index.html create mode 100644 files/es/archive/b2g_os/debugging/developer_settings/index.html create mode 100644 files/es/archive/b2g_os/debugging/index.html create mode 100644 files/es/archive/b2g_os/debugging/personalizando_el_script_b2g.sh/index.html create mode 100644 files/es/archive/b2g_os/debugging/setting_up/index.html create mode 100644 files/es/archive/b2g_os/developing_gaia/entendiendo_el_codigo_base_de_gaia/index.html create mode 100644 files/es/archive/b2g_os/developing_gaia/index.html create mode 100644 files/es/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html create mode 100644 files/es/archive/b2g_os/elegir_como_ejecutar_gaia_o_b2g/index.html create mode 100644 files/es/archive/b2g_os/firefox_os_apps/building_blocks/index.html create mode 100644 files/es/archive/b2g_os/firefox_os_apps/index.html create mode 100644 files/es/archive/b2g_os/firefox_os_build_prerequisites/index.html create mode 100644 files/es/archive/b2g_os/gaia_hacking_guide/index.html create mode 100644 files/es/archive/b2g_os/gonk/index.html create mode 100644 files/es/archive/b2g_os/index.html create mode 100644 files/es/archive/b2g_os/installing_on_a_mobile_device/index.html create mode 100644 files/es/archive/b2g_os/introduction/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/fairphone/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/flame/configuracion_inicial/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/flame/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/fx0/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/geeksphone/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/lista_dispositivos/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/zte_open/index.html create mode 100644 files/es/archive/b2g_os/phone_guide/zte_open_c/index.html create mode 100644 files/es/archive/b2g_os/platform/gaia/hacking/index.html create mode 100644 files/es/archive/b2g_os/platform/gaia/index.html create mode 100644 files/es/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html create mode 100644 files/es/archive/b2g_os/platform/index.html create mode 100644 files/es/archive/b2g_os/platform/settings_list/index.html create mode 100644 files/es/archive/b2g_os/portando/index.html create mode 100644 files/es/archive/b2g_os/porting_firefox_os/index.html create mode 100644 files/es/archive/b2g_os/porting_firefox_os/portando_de_cyanogenmod/index.html create mode 100644 files/es/archive/b2g_os/preparing_for_your_first_b2g_build/index.html create mode 100644 files/es/archive/b2g_os/probando_firefox_os/index.html create mode 100644 files/es/archive/b2g_os/quickstart/app_tools/index.html create mode 100644 files/es/archive/b2g_os/quickstart/index.html create mode 100644 files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html create mode 100644 files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html create mode 100644 files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html create mode 100644 files/es/archive/b2g_os/releases/2.0/index.html create mode 100644 files/es/archive/b2g_os/releases/2.1/index.html create mode 100644 files/es/archive/b2g_os/releases/index.html create mode 100644 files/es/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html create mode 100644 files/es/archive/b2g_os/security/application_security/index.html create mode 100644 files/es/archive/b2g_os/security/index.html create mode 100644 files/es/archive/b2g_os/security/modelo_seguridad/index.html create mode 100644 files/es/archive/b2g_os/simulator/index.html create mode 100644 files/es/archive/b2g_os/usando_el_b2g_escritorio_cliente/index.html create mode 100644 files/es/archive/b2g_os/using_firefox_os_simulator/index.html create mode 100644 files/es/archive/b2g_os/using_the_app_manager/index.html create mode 100644 files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html create mode 100644 files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html create mode 100644 files/es/archive/b2g_os/ux/building_blocks/button/index.html create mode 100644 files/es/archive/b2g_os/ux/building_blocks/index.html create mode 100644 files/es/archive/b2g_os/ux/guia_estilo/index.html create mode 100644 files/es/archive/b2g_os/web_telephony_api/index.html create mode 100644 files/es/archive/b2g_os/web_telephony_api/introduccion_a_la_webtelephony/index.html create mode 100644 files/es/archive/css3/index.html create mode 100644 "files/es/archive/est\303\241ndares_web/analizar_microformatos_en_javascript/index.html" create mode 100644 "files/es/archive/est\303\241ndares_web/crear_microformatos_en_javascript/index.html" create mode 100644 "files/es/archive/est\303\241ndares_web/index.html" create mode 100644 "files/es/archive/est\303\241ndares_web/preguntas_frecuentes_sobre_rdf_en_mozilla/index.html" create mode 100644 "files/es/archive/est\303\241ndares_web/usando_el_marcado_correcto_para_llamar_a_los_plugins/index.html" create mode 100644 "files/es/archive/est\303\241ndares_web/ventajas_para_los_negocios_del_uso_de_est\303\241ndares_web/index.html" create mode 100644 files/es/archive/index.html create mode 100644 files/es/archive/jxon/index.html create mode 100644 files/es/archive/mdn/index.html create mode 100644 files/es/archive/meta_docs/index.html create mode 100644 files/es/archive/meta_docs/mdn_content_on_webplatform.org/index.html create mode 100644 files/es/archive/meta_docs/mdn_page_layout_guide/index.html create mode 100644 "files/es/archive/misc_top_level/im\303\241genes,_tablas_y_huecos_misteriosos/index.html" create mode 100644 files/es/archive/misc_top_level/index.html create mode 100644 files/es/archive/misc_top_level/usar_las_preferencias_de_contenido/index.html create mode 100644 files/es/archive/mozilla/firefox/el_uso_de_microformatos/index.html create mode 100644 files/es/archive/mozilla/firefox/index.html create mode 100644 files/es/archive/mozilla/firefox/soap_en_los_navegadores_basados_en_gecko/index.html create mode 100644 files/es/archive/mozilla/index.html create mode 100644 files/es/archive/mozilla/jetpack/index.html create mode 100644 files/es/archive/mozilla/table_layout_regression_tests/index.html create mode 100644 files/es/archive/mozilla/xbl/index.html create mode 100644 files/es/archive/mozilla/xul/action/index.html create mode 100644 files/es/archive/mozilla/xul/attribute/index.html create mode 100644 files/es/archive/mozilla/xul/bestiario_xul/index.html create mode 100644 "files/es/archive/mozilla/xul/c\303\263mo_implementar_un_componente_procesador_de_consultas_xul/index.html" create mode 100644 files/es/archive/mozilla/xul/dialog/index.html create mode 100644 files/es/archive/mozilla/xul/elementos/index.html create mode 100644 files/es/archive/mozilla/xul/events/index.html create mode 100644 "files/es/archive/mozilla/xul/gu\303\255a_de_plantillas/index.html" create mode 100644 "files/es/archive/mozilla/xul/gu\303\255a_de_plantillas/ordenar_resultados/index.html" create mode 100644 files/es/archive/mozilla/xul/index.html create mode 100644 files/es/archive/mozilla/xul/method/index.html create mode 100644 files/es/archive/mozilla/xul/property/align/index.html create mode 100644 files/es/archive/mozilla/xul/property/buttons/index.html create mode 100644 files/es/archive/mozilla/xul/property/index.html create mode 100644 files/es/archive/mozilla/xul/style/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_botones/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_elementos_html/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_etiquetas_e_imagenes/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_los_gestores_de_eventos/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_m\303\241s_elementos/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/caracter\303\255sticas_adicionales_de_la_instalaci\303\263n/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/caracter\303\255sticas_de_una_ventana/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_\303\241rbol/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/di\303\241logos_abrir_y_guardar/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selecci\303\263n/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/introducci\303\263n/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/introducci\303\263n_a_rdf/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_con_desplazamiento/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_de_barras_simples/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_emergentes/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_asistentes/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_caracter\303\255sticas_de_los_botones/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_caracter\303\255sticas_de_los_\303\241rboles/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_funciones_de_men\303\272/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_gestores_de_eventos/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_\303\241rbol/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/selecci\303\263n_en_un_\303\241rbol/index.html" create mode 100644 files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/\303\241rboles/index.html" create mode 100644 "files/es/archive/mozilla/xul/tutorial_de_xul/\303\241rboles_y_plantillas/index.html" create mode 100644 files/es/archive/mozilla/xul/xul_reference/index.html create mode 100644 files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html create mode 100644 files/es/archive/mozilla/xulrunner/componentes/index.html create mode 100644 files/es/archive/mozilla/xulrunner/index.html create mode 100644 files/es/archive/mozilla/xulrunner/primeros_pasos_con_xulrunner/index.html create mode 100644 files/es/archive/rss/index.html create mode 100644 files/es/archive/rss/primeros_pasos/index.html create mode 100644 files/es/archive/rss/versiones/index.html create mode 100644 "files/es/archive/security/encriptaci\303\263n_y_desencriptaci\303\263n/index.html" create mode 100644 files/es/archive/security/index.html create mode 100644 files/es/archive/themes/create_your_own_firefox_background_theme/index.html create mode 100644 files/es/archive/themes/index.html create mode 100644 files/es/archive/tutoriales-para-principiantes/index.html create mode 100644 files/es/archive/web/index.html create mode 100644 files/es/archive/web/javascript/index.html create mode 100644 files/es/archive/web/javascript/legacy_generator_function_statement/index.html create mode 100644 files/es/archive/web/javascript/proximo_soporte_de_ecmascript_en_mozilla/index.html create mode 100644 files/es/archive/web/liveconnect/index.html create mode 100644 files/es/archive/web/liveconnect/java/index.html create mode 100644 files/es/archive/web/liveconnect/javaarray/index.html create mode 100644 files/es/archive/web/liveconnect/javaclass/index.html create mode 100644 files/es/archive/web/liveconnect/javaobject/index.html create mode 100644 files/es/archive/web/liveconnect/javapackage/index.html create mode 100644 files/es/archive/web/liveconnect/netscape/index.html create mode 100644 files/es/archive/web/liveconnect/packages/index.html create mode 100644 files/es/archive/web/liveconnect/sun/index.html create mode 100644 files/es/arrastrar_y_soltar/index.html create mode 100644 "files/es/a\303\261adir_datos_para_la_protecci\303\263n_anti-phishing/index.html" create mode 100644 "files/es/a\303\261adir_lectores_de_canales_a_firefox/index.html" create mode 100644 "files/es/a\303\261adir_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" create mode 100644 "files/es/a\303\261adir_preferencias_a_una_extensi\303\263n/index.html" create mode 100644 "files/es/browserid/configuraci\303\263n_r\303\241pida/index.html" create mode 100644 files/es/browserid/funciones_avanzadas/index.html create mode 100644 files/es/browserid/index.html create mode 100644 files/es/bugs_importantes_solucionados_en_firefox_3/index.html create mode 100644 files/es/building_an_extension/index.html create mode 100644 files/es/bundles/index.html create mode 100644 files/es/cadenas_del_user_agent_de_gecko/index.html create mode 100644 files/es/cambios_del_tema_en_firefox_2/index.html create mode 100644 files/es/cambios_en_los_temas_de_firefox_3/index.html create mode 100644 "files/es/cat\303\241logo/algoritmo_frecency/index.html" create mode 100644 "files/es/cat\303\241logo/direcciones_web_consultas_places/index.html" create mode 100644 "files/es/cat\303\241logo/index.html" create mode 100644 files/es/code_snippets/index.html create mode 100644 "files/es/code_snippets/pesta\303\261as_del_navegador/index.html" create mode 100644 files/es/columnas_con_css-3/index.html create mode 100644 files/es/como_crear_un_microresumen/index.html create mode 100644 files/es/compilar_e_instalar/index.html create mode 100644 files/es/components.utils.import/index.html create mode 100644 files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html create mode 100644 files/es/consola_de_errores/index.html create mode 100644 "files/es/control_de_la_correcci\303\263n_ortogr\303\241fica_en_formularios_html/index.html" create mode 100644 files/es/creacion_de_plugins_opensearch_para_firefox/index.html create mode 100644 "files/es/creaci\303\263n_de_componentes_xpcom/index.html" create mode 100644 "files/es/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" create mode 100644 "files/es/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" create mode 100644 "files/es/creaci\303\263n_de_componentes_xpcom/un_vistazo_de_xpcom/index.html" create mode 100644 "files/es/creaci\303\263n_de_componentes_xpcom/uso_de_componentes_xpcom/index.html" create mode 100644 "files/es/creaci\303\263n_de_plugins_mozsearch/index.html" create mode 100644 files/es/creando_un_skin_para_firefox/como_empezar/index.html create mode 100644 files/es/creando_un_skin_para_firefox/uuid/index.html create mode 100644 files/es/creando_un_tema_para_firefox/index.html create mode 100644 "files/es/creando_una_extensi\303\263n/index.html" create mode 100644 "files/es/crear_un_m\303\263dulo_de_administrador_de_cuentas_almacenadas/index.html" create mode 100644 files/es/crear_un_panel_lateral_en_firefox/index.html create mode 100644 "files/es/crear_una_extensi\303\263n_din\303\241mica_en_la_barra_de_estado/index.html" create mode 100644 "files/es/crear_una_extensi\303\263n_en_la_barra_de_estado/index.html" create mode 100644 "files/es/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" create mode 100644 files/es/css/media_queries/index.html create mode 100644 files/es/css/using_css_gradients/index.html create mode 100644 "files/es/css_din\303\241mico/index.html" create mode 100644 "files/es/c\303\263mo_crear_un_componente_xpcom_en_javascript/index.html" create mode 100644 "files/es/c\303\263mo_incrustar_el_motor_javascript/index.html" create mode 100644 files/es/desarrollando_mozilla/index.html create mode 100644 files/es/desarrollo_web/index.html create mode 100644 files/es/desarrollo_web/web_adaptable/index.html create mode 100644 files/es/descripcion_general_sobre_nss/index.html create mode 100644 "files/es/detecci\303\263n_del_navegador_y_cobertura_a_m\303\272ltiples_navegadores/index.html" create mode 100644 "files/es/detectar_la_orientaci\303\263n_del_dispositivo/index.html" create mode 100644 files/es/dhtml/index.html create mode 100644 files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html create mode 100644 "files/es/dibujando_gr\303\241ficos_con_canvas/index.html" create mode 100644 files/es/dibujar_texto_usando_canvas/index.html create mode 100644 files/es/dom/almacenamiento/index.html create mode 100644 files/es/dom/document.cookie/index.html create mode 100644 files/es/dom/index.html create mode 100644 files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html create mode 100644 files/es/dom/manipulando_el_historial_del_navegador/index.html create mode 100644 files/es/dom/touch_events/index.html create mode 100644 files/es/dom_inspector/index.html create mode 100644 files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html create mode 100644 files/es/dragdrop/drag_and_drop/index.html create mode 100644 files/es/dragdrop/index.html create mode 100644 files/es/dragdrop/recommended_drag_types/index.html create mode 100644 files/es/e4x/index.html create mode 100644 files/es/empaquetado_de_extensiones/index.html create mode 100644 files/es/empaquetar_un_tema/index.html create mode 100644 "files/es/escribir_c\303\263digo_localizable/index.html" create mode 100644 files/es/esquema_del_administrador_de_descargas/index.html create mode 100644 "files/es/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" create mode 100644 files/es/etiquetas_audio_y_video_en_firefox/index.html create mode 100644 files/es/eventos_arrastrar_y_soltar/index.html create mode 100644 "files/es/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" create mode 100644 files/es/extensions/bootstrapped_extensions/index.html create mode 100644 files/es/extensions/community/index.html create mode 100644 files/es/extensions/index.html create mode 100644 "files/es/extensions/m\303\263vil_clone/index.html" create mode 100644 files/es/faq_de_mercurial/index.html create mode 100644 files/es/faq_incrustando_mozilla/index.html create mode 100644 files/es/firefox_1.5_para_desarrolladores/index.html create mode 100644 files/es/firefox_19_para_desarrolladores/index.html create mode 100644 files/es/firefox_2_para_desarrolladores/index.html create mode 100644 files/es/firefox_3.5_para_desarrolladores/index.html create mode 100644 files/es/firefox_3_para_desarrolladores/index.html create mode 100644 files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html create mode 100644 files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html create mode 100644 files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html create mode 100644 "files/es/fragmentos_de_c\303\263digo/index.html" create mode 100644 files/es/fuel/annotations/index.html create mode 100644 files/es/fuel/application/index.html create mode 100644 files/es/fuel/bookmark/index.html create mode 100644 files/es/fuel/bookmarkfolder/index.html create mode 100644 files/es/fuel/browsertab/index.html create mode 100644 files/es/fuel/console/index.html create mode 100644 files/es/fuel/eventitem/index.html create mode 100644 files/es/fuel/eventlistener/index.html create mode 100644 files/es/fuel/events/index.html create mode 100644 files/es/fuel/extension/index.html create mode 100644 files/es/fuel/extensions/index.html create mode 100644 files/es/fuel/index.html create mode 100644 files/es/fuel/preference/index.html create mode 100644 files/es/fuel/preferencebranch/index.html create mode 100644 files/es/fuel/sessionstorage/index.html create mode 100644 files/es/fuel/window/index.html create mode 100644 files/es/funciones/index.html create mode 100644 files/es/games/anatomy/index.html create mode 100644 files/es/games/herramients/asm.js/index.html create mode 100644 files/es/games/herramients/index.html create mode 100644 files/es/games/index.html create mode 100644 files/es/games/introduccion/index.html create mode 100644 "files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" create mode 100644 files/es/games/publishing_games/game_distribution/index.html create mode 100644 files/es/games/publishing_games/index.html create mode 100644 "files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" create mode 100644 files/es/games/techniques/2d_collision_detection/index.html create mode 100644 files/es/games/techniques/3d_on_the_web/index.html create mode 100644 files/es/games/techniques/index.html create mode 100644 files/es/games/techniques/webrtc_data_channels/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html create mode 100644 files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html create mode 100644 files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html create mode 100644 files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html create mode 100644 files/es/games/workflows/index.html create mode 100644 files/es/gecko/index.html create mode 100644 files/es/gecko_sdk/index.html create mode 100644 "files/es/generaci\303\263n_de_guids/index.html" create mode 100644 files/es/glossary/404/index.html create mode 100644 files/es/glossary/502/index.html create mode 100644 files/es/glossary/abstraction/index.html create mode 100644 files/es/glossary/accessibility/index.html create mode 100644 files/es/glossary/accessibility_tree/index.html create mode 100644 files/es/glossary/adobe_flash/index.html create mode 100644 files/es/glossary/ajax/index.html create mode 100644 files/es/glossary/algoritmo/index.html create mode 100644 files/es/glossary/api/index.html create mode 100644 files/es/glossary/apple_safari/index.html create mode 100644 files/es/glossary/application_context/index.html create mode 100644 files/es/glossary/argumento/index.html create mode 100644 files/es/glossary/aria/index.html create mode 100644 files/es/glossary/arpa/index.html create mode 100644 files/es/glossary/arpanet/index.html create mode 100644 "files/es/glossary/arquitectura_de_la_informaci\303\263n/index.html" create mode 100644 files/es/glossary/arreglos/index.html create mode 100644 files/es/glossary/ascii/index.html create mode 100644 "files/es/glossary/as\303\255ncrono/index.html" create mode 100644 files/es/glossary/atag/index.html create mode 100644 files/es/glossary/atributo/index.html create mode 100644 files/es/glossary/atributo_global/index.html create mode 100644 files/es/glossary/bandwidth/index.html create mode 100644 files/es/glossary/bigint/index.html create mode 100644 files/es/glossary/blink/index.html create mode 100644 files/es/glossary/block/css/index.html create mode 100644 files/es/glossary/block/index.html create mode 100644 files/es/glossary/boolean/index.html create mode 100644 files/es/glossary/browser/index.html create mode 100644 files/es/glossary/browsing_context/index.html create mode 100644 files/es/glossary/buffer/index.html create mode 100644 files/es/glossary/cabecera_general/index.html create mode 100644 files/es/glossary/cacheable/index.html create mode 100644 "files/es/glossary/cach\303\251/index.html" create mode 100644 files/es/glossary/callback_function/index.html create mode 100644 files/es/glossary/canvas/index.html create mode 100644 files/es/glossary/caracter/index.html create mode 100644 files/es/glossary/cdn/index.html create mode 100644 files/es/glossary/challenge/index.html create mode 100644 files/es/glossary/character_encoding/index.html create mode 100644 files/es/glossary/chrome/index.html create mode 100644 files/es/glossary/cid/index.html create mode 100644 files/es/glossary/cifrado/index.html create mode 100644 "files/es/glossary/clasificaci\303\263n_por_tarjetas_(card_sorting)/index.html" create mode 100644 files/es/glossary/class/index.html create mode 100644 files/es/glossary/clausura/index.html create mode 100644 files/es/glossary/clave/index.html create mode 100644 files/es/glossary/codec/index.html create mode 100644 files/es/glossary/coercion/index.html create mode 100644 files/es/glossary/compile/index.html create mode 100644 files/es/glossary/compile_time/index.html create mode 100644 files/es/glossary/computer_programming/index.html create mode 100644 files/es/glossary/conjunto_de_caracteres/index.html create mode 100644 files/es/glossary/constante/index.html create mode 100644 files/es/glossary/constructor/index.html create mode 100644 files/es/glossary/cookie/index.html create mode 100644 files/es/glossary/copyleft/index.html create mode 100644 "files/es/glossary/criptoan\303\241lisis/index.html" create mode 100644 "files/es/glossary/criptograf\303\255a/index.html" create mode 100644 files/es/glossary/cross-site_scripting/index.html create mode 100644 files/es/glossary/crud/index.html create mode 100644 files/es/glossary/csrf/index.html create mode 100644 files/es/glossary/css/index.html create mode 100644 files/es/glossary/descifrado/index.html create mode 100644 files/es/glossary/doctype/index.html create mode 100644 files/es/glossary/dom/index.html create mode 100644 files/es/glossary/domain/index.html create mode 100644 files/es/glossary/dtd/index.html create mode 100644 files/es/glossary/dynamic_programming_language/index.html create mode 100644 files/es/glossary/ecmascript/index.html create mode 100644 files/es/glossary/element/index.html create mode 100644 files/es/glossary/elemento/index.html create mode 100644 files/es/glossary/empty_element/index.html create mode 100644 files/es/glossary/encapsulation/index.html create mode 100644 "files/es/glossary/encriptaci\303\263n/index.html" create mode 100644 files/es/glossary/entidad/index.html create mode 100644 files/es/glossary/espacio_en_blanco/index.html create mode 100644 files/es/glossary/estructura_de_datos/index.html create mode 100644 files/es/glossary/event/index.html create mode 100644 files/es/glossary/flex/index.html create mode 100644 files/es/glossary/flex_container/index.html create mode 100644 files/es/glossary/flexbox/index.html create mode 100644 files/es/glossary/fps/index.html create mode 100644 files/es/glossary/ftp/index.html create mode 100644 files/es/glossary/funcion_de_primera_clase/index.html create mode 100644 "files/es/glossary/funci\303\263n/index.html" create mode 100644 files/es/glossary/gif/index.html create mode 100644 files/es/glossary/git/index.html create mode 100644 files/es/glossary/google_chrome/index.html create mode 100644 files/es/glossary/gpl/index.html create mode 100644 files/es/glossary/grid/index.html create mode 100644 files/es/glossary/grid_areas/index.html create mode 100644 files/es/glossary/grid_column/index.html create mode 100644 files/es/glossary/grid_lines/index.html create mode 100644 files/es/glossary/grid_rows/index.html create mode 100644 files/es/glossary/head/index.html create mode 100644 files/es/glossary/hilo_principal/index.html create mode 100644 files/es/glossary/hoisting/index.html create mode 100644 files/es/glossary/html/index.html create mode 100644 files/es/glossary/html5/index.html create mode 100644 files/es/glossary/http/index.html create mode 100644 files/es/glossary/https/index.html create mode 100644 files/es/glossary/hyperlink/index.html create mode 100644 files/es/glossary/hypertext/index.html create mode 100644 files/es/glossary/ide/index.html create mode 100644 files/es/glossary/identificador/index.html create mode 100644 files/es/glossary/iife/index.html create mode 100644 files/es/glossary/index.html create mode 100644 files/es/glossary/indexeddb/index.html create mode 100644 files/es/glossary/inmutable/index.html create mode 100644 files/es/glossary/internet/index.html create mode 100644 files/es/glossary/ip_address/index.html create mode 100644 files/es/glossary/ipv6/index.html create mode 100644 files/es/glossary/irc/index.html create mode 100644 files/es/glossary/isp/index.html create mode 100644 files/es/glossary/iu/index.html create mode 100644 files/es/glossary/java/index.html create mode 100644 files/es/glossary/javascript/index.html create mode 100644 files/es/glossary/jpeg/index.html create mode 100644 files/es/glossary/jquery/index.html create mode 100644 files/es/glossary/json/index.html create mode 100644 files/es/glossary/keyword/index.html create mode 100644 files/es/glossary/lgpl/index.html create mode 100644 files/es/glossary/long_task/index.html create mode 100644 files/es/glossary/metadato/index.html create mode 100644 files/es/glossary/miga-de-pan/index.html create mode 100644 files/es/glossary/mitm/index.html create mode 100644 files/es/glossary/mixin/index.html create mode 100644 files/es/glossary/mobile_first/index.html create mode 100644 files/es/glossary/mozilla_firefox/index.html create mode 100644 files/es/glossary/mvc/index.html create mode 100644 "files/es/glossary/m\303\251todo/index.html" create mode 100644 files/es/glossary/node.js/index.html create mode 100644 files/es/glossary/node/dom/index.html create mode 100644 files/es/glossary/node/index.html create mode 100644 files/es/glossary/nombre_de_dominio/index.html create mode 100644 files/es/glossary/nombre_de_encabezado_prohibido/index.html create mode 100644 files/es/glossary/null/index.html create mode 100644 files/es/glossary/numero/index.html create mode 100644 files/es/glossary/objecto/index.html create mode 100644 files/es/glossary/oop/index.html create mode 100644 files/es/glossary/operador/index.html create mode 100644 files/es/glossary/operando/index.html create mode 100644 files/es/glossary/parse/index.html create mode 100644 files/es/glossary/php/index.html create mode 100644 files/es/glossary/pila_llamadas/index.html create mode 100644 files/es/glossary/polyfill/index.html create mode 100644 files/es/glossary/pop/index.html create mode 100644 files/es/glossary/port/index.html create mode 100644 files/es/glossary/preflight_peticion/index.html create mode 100644 files/es/glossary/preprocesador_css/index.html create mode 100644 files/es/glossary/primitivo/index.html create mode 100644 files/es/glossary/progressive_enhancement/index.html create mode 100644 files/es/glossary/promise/index.html create mode 100644 files/es/glossary/propiedad/index.html create mode 100644 files/es/glossary/protocol/index.html create mode 100644 files/es/glossary/prototype-based_programming/index.html create mode 100644 files/es/glossary/prototype/index.html create mode 100644 files/es/glossary/pseudo-clase/index.html create mode 100644 "files/es/glossary/pseudoc\303\263digo/index.html" create mode 100644 files/es/glossary/public-key_cryptography/index.html create mode 100644 files/es/glossary/python/index.html create mode 100644 "files/es/glossary/recursi\303\263n/index.html" create mode 100644 files/es/glossary/reflow/index.html create mode 100644 files/es/glossary/regular_expression/index.html create mode 100644 files/es/glossary/responsive_web_design/index.html create mode 100644 files/es/glossary/rest/index.html create mode 100644 files/es/glossary/rgb/index.html create mode 100644 files/es/glossary/rss/index.html create mode 100644 files/es/glossary/ruby/index.html create mode 100644 files/es/glossary/scope/index.html create mode 100644 files/es/glossary/scv/index.html create mode 100644 files/es/glossary/seguro/index.html create mode 100644 files/es/glossary/sentencias/index.html create mode 100644 files/es/glossary/seo/index.html create mode 100644 files/es/glossary/sgml/index.html create mode 100644 files/es/glossary/simd/index.html create mode 100644 files/es/glossary/sincronico/index.html create mode 100644 files/es/glossary/sisd/index.html create mode 100644 files/es/glossary/sistema_gestion_contenidos/index.html create mode 100644 files/es/glossary/sld/index.html create mode 100644 files/es/glossary/sloppy_mode/index.html create mode 100644 files/es/glossary/slug/index.html create mode 100644 files/es/glossary/smtp/index.html create mode 100644 files/es/glossary/sql/index.html create mode 100644 files/es/glossary/string/index.html create mode 100644 files/es/glossary/svg/index.html create mode 100644 files/es/glossary/svn/index.html create mode 100644 files/es/glossary/symbol/index.html create mode 100644 files/es/glossary/symmetric-key_cryptography/index.html create mode 100644 files/es/glossary/tag/index.html create mode 100644 files/es/glossary/tcp/index.html create mode 100644 files/es/glossary/textocifrado/index.html create mode 100644 files/es/glossary/textosimple/index.html create mode 100644 files/es/glossary/three_js/index.html create mode 100644 "files/es/glossary/tipado_din\303\241mico/index.html" create mode 100644 "files/es/glossary/tipificaci\303\263n_est\303\241tica/index.html" create mode 100644 files/es/glossary/truthy/index.html create mode 100644 files/es/glossary/type/index.html create mode 100644 files/es/glossary/undefined/index.html create mode 100644 files/es/glossary/unicode/index.html create mode 100644 files/es/glossary/uri/index.html create mode 100644 files/es/glossary/url/index.html create mode 100644 files/es/glossary/utf-8/index.html create mode 100644 files/es/glossary/ux/index.html create mode 100644 files/es/glossary/validador/index.html create mode 100644 files/es/glossary/valor/index.html create mode 100644 files/es/glossary/variable/index.html create mode 100644 files/es/glossary/vendor_prefix/index.html create mode 100644 files/es/glossary/viewport/index.html create mode 100644 files/es/glossary/wcag/index.html create mode 100644 files/es/glossary/webkit/index.html create mode 100644 files/es/glossary/websockets/index.html create mode 100644 files/es/glossary/webvtt/index.html create mode 100644 files/es/glossary/whatwg/index.html create mode 100644 files/es/glossary/world_wide_web/index.html create mode 100644 files/es/glossary/wrapper/index.html create mode 100644 files/es/glossary/xform/index.html create mode 100644 files/es/glossary/xml/index.html create mode 100644 "files/es/gr\303\241ficos_png_animados/index.html" create mode 100644 "files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" create mode 100644 "files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" create mode 100644 "files/es/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" create mode 100644 files/es/herramientas/borrador/index.html create mode 100644 files/es/herramientas/index.html create mode 100644 files/es/how_to_create_a_dom_tree/index.html create mode 100644 files/es/html/elemento/datalist/index.html create mode 100644 files/es/html/elemento/form/index.html create mode 100644 files/es/html/elemento/section/index.html create mode 100644 files/es/html/html5/forms_in_html5/index.html create mode 100644 files/es/html/html5/formularios_en_html5/index.html create mode 100644 files/es/html/html5/html5_lista_elementos/index.html create mode 100644 files/es/html/html5/html5_parser/index.html create mode 100644 files/es/html/html5/index.html create mode 100644 "files/es/html/html5/introducci\303\263n_a_html5/index.html" create mode 100644 files/es/html/html5/validacion_de_restricciones/index.html create mode 100644 files/es/incrustando_mozilla/comunidad/index.html create mode 100644 files/es/incrustando_mozilla/index.html create mode 100644 files/es/indexeddb/index.html create mode 100644 "files/es/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" create mode 100644 files/es/interactuar_con_el_colector_de_ciclos_de_xpcom/index.html create mode 100644 files/es/introduccion_venkman/index.html create mode 100644 "files/es/introducci\303\263n_a_la_extensi\303\263n_de_la_api_de_audio/index.html" create mode 100644 "files/es/introducci\303\263n_al_shell_de_javascript/index.html" create mode 100644 files/es/ipdl/index.html create mode 100644 files/es/javascript_code_modules/using/index.html create mode 100644 files/es/l10n_en_mercurial/index.html create mode 100644 files/es/la_plataforma_mozilla/index.html create mode 100644 files/es/learn/accessibility/accessibility_troubleshooting/index.html create mode 100644 files/es/learn/accessibility/css_and_javascript/index.html create mode 100644 files/es/learn/accessibility/html/index.html create mode 100644 files/es/learn/accessibility/index.html create mode 100644 files/es/learn/accessibility/mobile/index.html create mode 100644 "files/es/learn/accessibility/qu\303\251_es_la_accesibilidad/index.html" create mode 100644 files/es/learn/aprender_y_obtener_ayuda/index.html create mode 100644 files/es/learn/codificacion-scripting/index.html create mode 100644 files/es/learn/common_questions/cuanto_cuesta/index.html create mode 100644 "files/es/learn/common_questions/dise\303\261os_web_comunes/index.html" create mode 100644 files/es/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/es/learn/common_questions/index.html create mode 100644 files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html create mode 100644 files/es/learn/common_questions/que_es_un_servidor_web/index.html create mode 100644 files/es/learn/common_questions/que_software_necesito/index.html create mode 100644 "files/es/learn/common_questions/qu\303\251_es_una_url/index.html" create mode 100644 files/es/learn/common_questions/set_up_a_local_testing_server/index.html create mode 100644 files/es/learn/common_questions/thinking_before_coding/index.html create mode 100644 files/es/learn/common_questions/what_are_browser_developer_tools/index.html create mode 100644 files/es/learn/common_questions/what_are_hyperlinks/index.html create mode 100644 files/es/learn/common_questions/what_is_a_domain_name/index.html create mode 100644 files/es/learn/como_contribuir/index.html create mode 100644 files/es/learn/css/building_blocks/cascada_y_herencia/index.html create mode 100644 files/es/learn/css/building_blocks/contenido_desbordado/index.html create mode 100644 files/es/learn/css/building_blocks/depurar_el_css/index.html create mode 100644 files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html create mode 100644 files/es/learn/css/building_blocks/el_modelo_de_caja/index.html create mode 100644 files/es/learn/css/building_blocks/fondos_y_bordes/index.html create mode 100644 "files/es/learn/css/building_blocks/im\303\241genes_medios_y_elementos_de_formulario/index.html" create mode 100644 files/es/learn/css/building_blocks/index.html create mode 100644 files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html create mode 100644 files/es/learn/css/building_blocks/selectores_css/combinadores/index.html create mode 100644 files/es/learn/css/building_blocks/selectores_css/index.html create mode 100644 files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html create mode 100644 files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html create mode 100644 files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html create mode 100644 files/es/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/es/learn/css/building_blocks/valores_y_unidades_css/index.html create mode 100644 "files/es/learn/css/css_layout/dise\303\261o_receptivo/index.html" create mode 100644 files/es/learn/css/css_layout/flexbox/index.html create mode 100644 files/es/learn/css/css_layout/floats/index.html create mode 100644 files/es/learn/css/css_layout/flujo_normal/index.html create mode 100644 files/es/learn/css/css_layout/grids/index.html create mode 100644 files/es/learn/css/css_layout/index.html create mode 100644 "files/es/learn/css/css_layout/introducci\303\263n/index.html" create mode 100644 files/es/learn/css/css_layout/positioning/index.html create mode 100644 files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html create mode 100644 files/es/learn/css/first_steps/comenzando_css/index.html create mode 100644 files/es/learn/css/first_steps/como_funciona_css/index.html create mode 100644 files/es/learn/css/first_steps/como_se_estructura_css/index.html create mode 100644 files/es/learn/css/first_steps/index.html create mode 100644 "files/es/learn/css/first_steps/qu\303\251_es_css/index.html" create mode 100644 files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html create mode 100644 files/es/learn/css/index.html create mode 100644 files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html create mode 100644 files/es/learn/css/styling_text/fuentes_web/index.html create mode 100644 files/es/learn/css/styling_text/fundamentals/index.html create mode 100644 files/es/learn/css/styling_text/index.html create mode 100644 files/es/learn/css/styling_text/styling_links/index.html create mode 100644 files/es/learn/css/styling_text/styling_lists/index.html create mode 100644 "files/es/learn/css/s\303\241bercomo/generated_content/index.html" create mode 100644 "files/es/learn/css/s\303\241bercomo/index.html" create mode 100644 files/es/learn/desarrollo_web_front-end/index.html create mode 100644 files/es/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 "files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" create mode 100644 files/es/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/es/learn/getting_started_with_the_web/index.html create mode 100644 files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html create mode 100644 files/es/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html create mode 100644 files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html create mode 100644 files/es/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html create mode 100644 files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html create mode 100644 files/es/learn/herramientas_y_pruebas/github/index.html create mode 100644 files/es/learn/herramientas_y_pruebas/index.html create mode 100644 files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html create mode 100644 files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html create mode 100644 files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html create mode 100644 files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html create mode 100644 files/es/learn/html/como/index.html create mode 100644 files/es/learn/html/como/usando_atributos_de_datos/index.html create mode 100644 files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html create mode 100644 files/es/learn/html/forms/how_to_structure_an_html_form/index.html create mode 100644 files/es/learn/html/forms/index.html create mode 100644 files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html create mode 100644 files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html create mode 100644 files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html create mode 100644 files/es/learn/html/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/es/learn/html/forms/styling_html_forms/index.html create mode 100644 files/es/learn/html/forms/the_native_form_widgets/index.html create mode 100644 files/es/learn/html/forms/tipos_input_html5/index.html create mode 100644 files/es/learn/html/forms/validacion_formulario_datos/index.html create mode 100644 files/es/learn/html/forms/your_first_html_form/index.html create mode 100644 files/es/learn/html/index.html create mode 100644 files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html create mode 100644 files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html create mode 100644 files/es/learn/html/introduccion_a_html/debugging_html/index.html create mode 100644 files/es/learn/html/introduccion_a_html/estructura/index.html create mode 100644 "files/es/learn/html/introduccion_a_html/estructuraci\303\263n_de_una_p\303\241gina_de_contenido/index.html" create mode 100644 files/es/learn/html/introduccion_a_html/index.html create mode 100644 files/es/learn/html/introduccion_a_html/iniciar/index.html create mode 100644 files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html create mode 100644 files/es/learn/html/introduccion_a_html/metados_en/index.html create mode 100644 files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html create mode 100644 "files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_b\303\241sico_html/index.html" create mode 100644 files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html create mode 100644 files/es/learn/html/introduccion_a_html/texto/index.html create mode 100644 files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html create mode 100644 files/es/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/es/learn/html/multimedia_and_embedding/index.html create mode 100644 files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html create mode 100644 files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html create mode 100644 files/es/learn/html/multimedia_and_embedding/responsive_images/index.html create mode 100644 files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html create mode 100644 "files/es/learn/html/tablas/conceptos_b\303\241sicos_de_las_tablas_html/index.html" create mode 100644 files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html create mode 100644 files/es/learn/html/tablas/index.html create mode 100644 files/es/learn/html/tablas/structuring_planet_data/index.html create mode 100644 files/es/learn/index.html create mode 100644 files/es/learn/javascript/asynchronous/async_await/index.html create mode 100644 files/es/learn/javascript/asynchronous/concepts/index.html create mode 100644 files/es/learn/javascript/asynchronous/index.html create mode 100644 files/es/learn/javascript/building_blocks/bucle_codigo/index.html create mode 100644 files/es/learn/javascript/building_blocks/conditionals/index.html create mode 100644 files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html create mode 100644 files/es/learn/javascript/building_blocks/eventos/index.html create mode 100644 files/es/learn/javascript/building_blocks/functions/index.html create mode 100644 files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html create mode 100644 files/es/learn/javascript/building_blocks/index.html create mode 100644 files/es/learn/javascript/building_blocks/return_values/index.html create mode 100644 files/es/learn/javascript/client-side_web_apis/client-side_storage/index.html create mode 100644 files/es/learn/javascript/client-side_web_apis/fetching_data/index.html create mode 100644 files/es/learn/javascript/client-side_web_apis/index.html create mode 100644 "files/es/learn/javascript/client-side_web_apis/introducci\303\263n/index.html" create mode 100644 files/es/learn/javascript/first_steps/a_first_splash/index.html create mode 100644 files/es/learn/javascript/first_steps/arrays/index.html create mode 100644 files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html create mode 100644 files/es/learn/javascript/first_steps/index.html create mode 100644 "files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" create mode 100644 files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html create mode 100644 "files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" create mode 100644 files/es/learn/javascript/first_steps/strings/index.html create mode 100644 files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html create mode 100644 files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html create mode 100644 files/es/learn/javascript/first_steps/useful_string_methods/index.html create mode 100644 files/es/learn/javascript/first_steps/variables/index.html create mode 100644 files/es/learn/javascript/first_steps/what_went_wrong/index.html create mode 100644 files/es/learn/javascript/howto/index.html create mode 100644 files/es/learn/javascript/index.html create mode 100644 files/es/learn/javascript/objects/adding_bouncing_balls_features/index.html create mode 100644 files/es/learn/javascript/objects/basics/index.html create mode 100644 "files/es/learn/javascript/objects/ejercicio_pr\303\241ctico_de_construcci\303\263n_de_objetos/index.html" create mode 100644 files/es/learn/javascript/objects/index.html create mode 100644 files/es/learn/javascript/objects/inheritance/index.html create mode 100644 files/es/learn/javascript/objects/json/index.html create mode 100644 files/es/learn/javascript/objects/object-oriented_js/index.html create mode 100644 files/es/learn/javascript/objects/object_prototypes/index.html create mode 100644 files/es/learn/performance/index.html create mode 100644 files/es/learn/server-side/django/admin_site/index.html create mode 100644 files/es/learn/server-side/django/authentication/index.html create mode 100644 files/es/learn/server-side/django/deployment/index.html create mode 100644 files/es/learn/server-side/django/development_environment/index.html create mode 100644 files/es/learn/server-side/django/django_assessment_blog/index.html create mode 100644 files/es/learn/server-side/django/forms/index.html create mode 100644 files/es/learn/server-side/django/generic_views/index.html create mode 100644 files/es/learn/server-side/django/home_page/index.html create mode 100644 files/es/learn/server-side/django/index.html create mode 100644 "files/es/learn/server-side/django/introducci\303\263n/index.html" create mode 100644 files/es/learn/server-side/django/models/index.html create mode 100644 files/es/learn/server-side/django/sessions/index.html create mode 100644 files/es/learn/server-side/django/skeleton_website/index.html create mode 100644 files/es/learn/server-side/django/testing/index.html create mode 100644 files/es/learn/server-side/django/tutorial_local_library_website/index.html create mode 100644 files/es/learn/server-side/django/web_application_security/index.html create mode 100644 files/es/learn/server-side/express_nodejs/development_environment/index.html create mode 100644 files/es/learn/server-side/express_nodejs/index.html create mode 100644 files/es/learn/server-side/express_nodejs/introduction/index.html create mode 100644 files/es/learn/server-side/express_nodejs/mongoose/index.html create mode 100644 files/es/learn/server-side/express_nodejs/skeleton_website/index.html create mode 100644 files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.html create mode 100644 files/es/learn/server-side/index.html create mode 100644 files/es/learn/server-side/node_server_without_framework/index.html create mode 100644 files/es/learn/server-side/primeros_pasos/index.html create mode 100644 "files/es/learn/server-side/primeros_pasos/introducci\303\263n/index.html" create mode 100644 files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html create mode 100644 files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html create mode 100644 files/es/learn/server-side/primeros_pasos/web_frameworks/index.html create mode 100644 files/es/learn/using_github_pages/index.html create mode 100644 "files/es/lo_b\303\241sico_de_mercurial/index.html" create mode 100644 "files/es/localizaci\303\263n/index.html" create mode 100644 "files/es/localizaci\303\263n_y_plurales/index.html" create mode 100644 files/es/localizar_con_narro/index.html create mode 100644 "files/es/lugares/gu\303\255a_para_migraci\303\263n_con_lugares/index.html" create mode 100644 "files/es/manifiesto_de_instalaci\303\263n/index.html" create mode 100644 "files/es/manipular_marcadores_usando_el_cat\303\241logo/index.html" create mode 100644 files/es/manual_de_compatibilidad_de_gecko/index.html create mode 100644 "files/es/marcado_xml_en_los_microres\303\272menes/index.html" create mode 100644 files/es/mdn/about/index.html create mode 100644 files/es/mdn/comunidad/index.html create mode 100644 files/es/mdn/contribute/community/index.html create mode 100644 files/es/mdn/contribute/feedback/index.html create mode 100644 files/es/mdn/contribute/getting_started/index.html create mode 100644 files/es/mdn/contribute/howto/convert_code_samples_to_be_live/index.html create mode 100644 files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html create mode 100644 files/es/mdn/contribute/howto/document_a_css_property/index.html create mode 100644 files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html create mode 100644 files/es/mdn/contribute/howto/enlace_cuenta_github/index.html create mode 100644 files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html create mode 100644 files/es/mdn/contribute/howto/index.html create mode 100644 files/es/mdn/contribute/howto/remover_macros_experimentales/index.html create mode 100644 files/es/mdn/contribute/howto/revision_editorial/index.html create mode 100644 files/es/mdn/contribute/howto/revision_tecnica/index.html create mode 100644 files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/es/mdn/contribute/howto/tag/index.html create mode 100644 "files/es/mdn/contribute/howto/usar_barras_laterales_de_navegaci\303\263n/index.html" create mode 100644 files/es/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html create mode 100644 files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html create mode 100644 files/es/mdn/contribute/index.html create mode 100644 files/es/mdn/contribute/localize/index.html create mode 100644 files/es/mdn/contribute/localize/iniciar_una_localizacion/index.html create mode 100644 files/es/mdn/contribute/localize/project_colon_localization_projects/index.html create mode 100644 files/es/mdn/contribute/localize/project_colon_translating_mdn_pages/index.html create mode 100644 files/es/mdn/contribute/procesos/index.html create mode 100644 files/es/mdn/contribute/registro_persona/index.html create mode 100644 files/es/mdn/contribute/tareas/index.html create mode 100644 files/es/mdn/contribute/team_status/index.html create mode 100644 files/es/mdn/guidelines/content_blocks/index.html create mode 100644 files/es/mdn/guidelines/convenciones_y_definiciones/index.html create mode 100644 files/es/mdn/guidelines/index.html create mode 100644 "files/es/mdn/guidelines/project_colon_gu\303\255a_de_estilo/index.html" create mode 100644 files/es/mdn/index.html create mode 100644 files/es/mdn/kuma/contributing/getting_started/index.html create mode 100644 files/es/mdn/kuma/contributing/index.html create mode 100644 files/es/mdn/kuma/index.html create mode 100644 files/es/mdn/structures/ejemplos_ejecutables/index.html create mode 100644 files/es/mdn/structures/index.html create mode 100644 files/es/mdn/structures/macros/commonly-used_macros/index.html create mode 100644 files/es/mdn/structures/macros/index.html create mode 100644 files/es/mdn/structures/macros/otras/index.html create mode 100644 files/es/mdn/structures/tablas_de_compatibilidad/index.html create mode 100644 files/es/mdn/tools/index.html create mode 100644 files/es/mdn/tools/introduction_to_kumascript/index.html create mode 100644 files/es/mdn/tools/page_regeneration/index.html create mode 100644 files/es/mdn/tools/template_editing/index.html create mode 100644 files/es/mdn/user_guide/index.html create mode 100644 files/es/mdn/user_guide/writing/index.html create mode 100644 files/es/mdn_en_diez/index.html create mode 100644 files/es/mejoras_css_en_firefox_3/index.html create mode 100644 files/es/mejoras_dom_en_firefox_3/index.html create mode 100644 files/es/mejoras_en_el_administrador_de_descargas_en_firefox_3/index.html create mode 100644 files/es/mejoras_svg_en_firefox_3/index.html create mode 100644 files/es/mejoras_xul_en_firefox_3/index.html create mode 100644 files/es/mercurial/index.html create mode 100644 files/es/microsummary_topics/index.html create mode 100644 files/es/midas/index.html create mode 100644 files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html create mode 100644 "files/es/modo_casi_est\303\241ndar_de_gecko/index.html" create mode 100644 files/es/mozilla/add-ons/add-on_manager/index.html create mode 100644 files/es/mozilla/add-ons/add-on_repository/index.html create mode 100644 files/es/mozilla/add-ons/amo/index.html create mode 100644 files/es/mozilla/add-ons/amo/policy/contacto/index.html create mode 100644 files/es/mozilla/add-ons/amo/policy/index.html create mode 100644 files/es/mozilla/add-ons/amo/policy/revisiones/index.html create mode 100644 files/es/mozilla/add-ons/code_snippets/index.html create mode 100644 files/es/mozilla/add-ons/code_snippets/queryselector/index.html create mode 100644 files/es/mozilla/add-ons/index.html create mode 100644 files/es/mozilla/add-ons/lineamientos_de_complementos/index.html create mode 100644 files/es/mozilla/add-ons/overlay_extensions/index.html create mode 100644 files/es/mozilla/add-ons/sdk/builder/index.html create mode 100644 files/es/mozilla/add-ons/sdk/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/installation/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html create mode 100644 files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html create mode 100644 files/es/mozilla/add-ons/themes/obsolete/index.html create mode 100644 files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html create mode 100644 files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html create mode 100644 files/es/mozilla/add-ons/thunderbird/howtos/index.html create mode 100644 files/es/mozilla/add-ons/thunderbird/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/i18n/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/storage/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/storage/local/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html create mode 100644 "files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" create mode 100644 files/es/mozilla/add-ons/webextensions/examples/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/internationalization/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/manifest.json/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/prerequisitos/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/tutorial/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/user_interface/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html create mode 100644 files/es/mozilla/add-ons/webextensions/what_next_/index.html create mode 100644 files/es/mozilla/bugzilla/index.html create mode 100644 files/es/mozilla/bugzilla/testopia/index.html create mode 100644 files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html create mode 100644 files/es/mozilla/connect/index.html create mode 100644 files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html create mode 100644 files/es/mozilla/developer_guide/index.html create mode 100644 files/es/mozilla/developer_guide/mozilla-central/index.html create mode 100644 "files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilaci\303\263n_de_mozilla/index.html" create mode 100644 "files/es/mozilla/developer_guide/source_code/c\303\263digo_fuente_de_mozilla_(cvs)/index.html" create mode 100644 files/es/mozilla/developer_guide/source_code/index.html create mode 100644 files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html create mode 100644 "files/es/mozilla/firefox/edici\303\263n_de_desarrollador/index.html" create mode 100644 "files/es/mozilla/firefox/edici\303\263n_de_desarrollador/revertir/index.html" create mode 100644 files/es/mozilla/firefox/experimental_features/index.html create mode 100644 files/es/mozilla/firefox/firefox_esr/index.html create mode 100644 files/es/mozilla/firefox/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html create mode 100644 files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html create mode 100644 files/es/mozilla/firefox/privacy/index.html create mode 100644 files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html create mode 100644 files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html create mode 100644 files/es/mozilla/firefox/privacy/storage_access_policy/index.html create mode 100644 files/es/mozilla/firefox/privacy/tracking_protection/index.html create mode 100644 files/es/mozilla/firefox/releases/30/index.html create mode 100644 files/es/mozilla/firefox/releases/50/index.html create mode 100644 files/es/mozilla/firefox/releases/57/index.html create mode 100644 files/es/mozilla/firefox/releases/61/index.html create mode 100644 files/es/mozilla/firefox/releases/62/index.html create mode 100644 files/es/mozilla/firefox/releases/63/index.html create mode 100644 files/es/mozilla/firefox/releases/66/index.html create mode 100644 files/es/mozilla/firefox/releases/67/index.html create mode 100644 files/es/mozilla/firefox/releases/68/index.html create mode 100644 files/es/mozilla/firefox/releases/9/index.html create mode 100644 files/es/mozilla/firefox/releases/9/updating_add-ons/index.html create mode 100644 files/es/mozilla/firefox/releases/index.html create mode 100644 files/es/mozilla/firefox_para_android/index.html create mode 100644 files/es/mozilla/git/index.html create mode 100644 files/es/mozilla/http_cache/index.html create mode 100644 files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html create mode 100644 files/es/mozilla/index.html create mode 100644 files/es/mozilla/instantbird/index.html create mode 100644 files/es/mozilla/javascript_code_modules/index.html create mode 100644 files/es/mozilla/javascript_code_modules/promise.jsm/index.html create mode 100644 files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html create mode 100644 files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html create mode 100644 files/es/mozilla/javascript_code_modules/timer.jsm/index.html create mode 100644 files/es/mozilla/localization/index.html create mode 100644 files/es/mozilla/localization/l10n_style_guide/index.html create mode 100644 files/es/mozilla/localization/l10n_style_guide/your_language/index.html create mode 100644 files/es/mozilla/localization/localizing_with_pontoon/index.html create mode 100644 files/es/mozilla/localization/notas_de_localizacion/index.html create mode 100644 files/es/mozilla/localization/quick_start_guide/fase_qa/index.html create mode 100644 files/es/mozilla/localization/quick_start_guide/index.html create mode 100644 files/es/mozilla/localization/quick_start_guide/initial_setup/index.html create mode 100644 files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html create mode 100644 files/es/mozilla/marketplace/apis/index.html create mode 100644 files/es/mozilla/marketplace/faq/index.html create mode 100644 files/es/mozilla/marketplace/index.html create mode 100644 files/es/mozilla/marketplace/marketplace_apis/index.html create mode 100644 files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html create mode 100644 files/es/mozilla/marketplace/monetization/index.html create mode 100644 files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html create mode 100644 files/es/mozilla/marketplace/normas_valoracion_usuario/index.html create mode 100644 "files/es/mozilla/marketplace/options/introducci\303\263n/index.html" create mode 100644 files/es/mozilla/marketplace/publish/index.html create mode 100644 files/es/mozilla/marketplace/publishing/index.html create mode 100644 files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html create mode 100644 files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html create mode 100644 files/es/mozilla/marketplace/publishing/packaged_apps/index.html create mode 100644 files/es/mozilla/marketplace/publishing/publish_options/index.html create mode 100644 files/es/mozilla/marketplace/publishing/submit/index.html create mode 100644 files/es/mozilla/marketplace/publishing/submit/overview/index.html create mode 100644 files/es/mozilla/marketplace/publishing/updating_apps/index.html create mode 100644 files/es/mozilla/marketplace/submission/index.html create mode 100644 files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html create mode 100644 files/es/mozilla/marketplace/submission/rating_your_content/index.html create mode 100644 files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html create mode 100644 files/es/mozilla/mathml_project/basics/index.html create mode 100644 files/es/mozilla/mathml_project/extras/index.html create mode 100644 files/es/mozilla/mathml_project/fonts/index.html create mode 100644 files/es/mozilla/mathml_project/index.html create mode 100644 files/es/mozilla/mathml_project/mathml3testsuite/index.html create mode 100644 files/es/mozilla/mathml_project/screenshots/index.html create mode 100644 files/es/mozilla/mathml_project/start/index.html create mode 100644 files/es/mozilla/mathml_project/status/index.html create mode 100644 files/es/mozilla/mathml_project/student_projects/index.html create mode 100644 files/es/mozilla/mathml_project/various/index.html create mode 100644 files/es/mozilla/opciones_de_linea_de_comandos/index.html create mode 100644 files/es/mozilla/participating_in_the_mozilla_project/index.html create mode 100644 files/es/mozilla/persona/branding/index.html create mode 100644 files/es/mozilla/persona/browser_compatibility/index.html create mode 100644 files/es/mozilla/persona/faq/index.html create mode 100644 files/es/mozilla/persona/glosario/index.html create mode 100644 files/es/mozilla/persona/index.html create mode 100644 "files/es/mozilla/persona/informaci\303\263n_general_idp/index.html" create mode 100644 files/es/mozilla/persona/quick_setup/index.html create mode 100644 files/es/mozilla/persona/remote_verification_api/index.html create mode 100644 files/es/mozilla/persona/security_considerations/index.html create mode 100644 files/es/mozilla/persona/why_persona/index.html create mode 100644 files/es/mozilla/preferences/index.html create mode 100644 files/es/mozilla/projects/index.html create mode 100644 files/es/mozilla/projects/nspr/reference/index.html create mode 100644 files/es/mozilla/projects/psm/index.html create mode 100644 files/es/mozilla/rendimiento/index.html create mode 100644 files/es/mozilla/rust/index.html create mode 100644 files/es/mozilla/security/index.html create mode 100644 files/es/mozilla/security/x509_certificates/index.html create mode 100644 files/es/mozilla/tech/index.html create mode 100644 files/es/mozilla/tech/toolkit_api/smile/index.html create mode 100644 files/es/mozilla/tech/xpcom/guide/index.html create mode 100644 files/es/mozilla/tech/xpcom/language_bindings/index.html create mode 100644 files/es/mozilla/tech/xpcom/reference/index.html create mode 100644 files/es/mozilla/tech/xpidl/index.html create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_\303\251stas/index.html" create mode 100644 files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_a_colon__rendimiento_de_los_add-ons/index.html" create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_b_colon__instalar_y_desinstalar_scripts/index.html" create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html" create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_d_colon__cargar_scripts/index.html" create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_e_colon__dom_e_inserci\303\263n_html/index.html" create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/documentaci\303\263n_de_mozilla/index.html" create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensi\303\263n/index.html" create mode 100644 files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/index.html create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/introducci\303\263n_a_las_extensiones_de_firefox/index.html" create mode 100644 files/es/mozilla/tech/xul/escuela_xul/introduction/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html create mode 100644 files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html create mode 100644 "files/es/mozilla/tech/xul/escuela_xul/sitios_\303\272tiles_de_la_comunidad_mozilla/index.html" create mode 100644 files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html create mode 100644 files/es/mozilla/thunderbird/index.html create mode 100644 files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html create mode 100644 files/es/mozilla/toolkit_version_format/index.html create mode 100644 files/es/mozilla/working_with_windows_in_chrome_code/index.html create mode 100644 files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html create mode 100644 files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html create mode 100644 files/es/mozilla/xpcom/xpcom/index.html create mode 100644 files/es/mozistorageconnection/index.html create mode 100644 "files/es/m\303\263dulos_javascript/index.html" create mode 100644 "files/es/m\303\263vil/index.html" create mode 100644 "files/es/m\303\263vil/viewport_meta_tag/index.html" create mode 100644 files/es/nsdirectoryservice/index.html create mode 100644 files/es/nsicancelable/index.html create mode 100644 files/es/nsichannel/index.html create mode 100644 files/es/nsidomofflineresourcelist/index.html create mode 100644 files/es/nsidownload/index.html create mode 100644 files/es/nsidownloadmanager/index.html create mode 100644 files/es/nsidownloadmanagerui/index.html create mode 100644 files/es/nsidownloadprogresslistener/index.html create mode 100644 files/es/nsidragservice/index.html create mode 100644 files/es/nsilocalfile/index.html create mode 100644 files/es/nsisimpleenumerator/index.html create mode 100644 files/es/nsisupports/addref/index.html create mode 100644 files/es/nsisupports/index.html create mode 100644 files/es/nsisupports/queryinterface/index.html create mode 100644 files/es/nsisupports/release/index.html create mode 100644 files/es/nsiuri/index.html create mode 100644 files/es/nsiwebprogress/index.html create mode 100644 files/es/nsizipwriter/index.html create mode 100644 files/es/nspr/index.html create mode 100644 files/es/nss/index.html create mode 100644 files/es/nss/nss_sources_building_testing/index.html create mode 100644 files/es/nuevas_tablas_de_compatibilidad_beta/index.html create mode 100644 files/es/participar_en_el_proyecto_mozilla/index.html create mode 100644 files/es/persona/crypto/index.html create mode 100644 files/es/persona/iniciar_persona/index.html create mode 100644 files/es/persona/internationalization/index.html create mode 100644 files/es/persona/libraries_and_plugins/index.html create mode 100644 files/es/plantillas_en_firefox_3/index.html create mode 100644 files/es/plugins/index.html create mode 100644 files/es/plugins/supporting_private_browsing_in_plugins/index.html create mode 100644 files/es/preferencias_del_administrador_de_descargas/index.html create mode 100644 files/es/preguntas_frecuentes_sobre_extensiones/index.html create mode 100644 "files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" create mode 100644 "files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" create mode 100644 "files/es/principios_b\303\241sicos_de_los_servicios_web/index.html" create mode 100644 files/es/prtime/index.html create mode 100644 files/es/pruebas_automatizadas_de_mozilla/index.html create mode 100644 files/es/qa/bug_writing_guidelines/index.html create mode 100644 files/es/qa/confirming_unconfirmed_bugs/index.html create mode 100644 files/es/qa/index.html create mode 100644 files/es/qa/organizando_un_testday/index.html create mode 100644 files/es/qa/screening_duplicate_bugs/index.html create mode 100644 files/es/rdf/index.html create mode 100644 files/es/recursos_en_modo_desconectado_en_firefox/index.html create mode 100644 files/es/referencia_de_xul/index.html create mode 100644 "files/es/referencia_dom_de_gecko/c\303\263mo_espacioenblanco/index.html" create mode 100644 files/es/referencia_dom_de_gecko/ejemplos/index.html create mode 100644 files/es/referencia_dom_de_gecko/eventos/index.html create mode 100644 files/es/referencia_dom_de_gecko/index.html create mode 100644 "files/es/referencia_dom_de_gecko/introducci\303\263n/index.html" create mode 100644 files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html create mode 100644 files/es/referencia_dom_de_gecko/prefacio/index.html create mode 100644 files/es/rhino/comunidad/index.html create mode 100644 files/es/rhino/descarga_rhino/index.html create mode 100644 files/es/rhino/index.html create mode 100644 files/es/rhino/resumen/index.html create mode 100644 files/es/rhino_documentacon/index.html create mode 100644 files/es/sandbox/index.html create mode 100644 files/es/sax/index.html create mode 100644 files/es/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/es/seguridad_en_firefox_2/index.html create mode 100644 "files/es/selecci\303\263n_de_modo_en_mozilla/index.html" create mode 100644 files/es/server-sent_events/index.html create mode 100644 files/es/server-sent_events/utilizando_server_sent_events_sse/index.html create mode 100644 files/es/servicios_web_xml/index.html create mode 100644 files/es/sistema_de_preferencias/index.html create mode 100644 files/es/social_api/glossary/index.html create mode 100644 files/es/social_api/guide/index.html create mode 100644 files/es/social_api/index.html create mode 100644 files/es/social_api/manifiesto/index.html create mode 100644 files/es/social_api/service_worker_api_reference/index.html create mode 100644 files/es/social_api/widgets/index.html create mode 100644 files/es/spidermonkey/index.html create mode 100644 files/es/storage/index.html create mode 100644 files/es/storage/performance/index.html create mode 100644 files/es/svg_en_firefox/index.html create mode 100644 files/es/temas/background/index.html create mode 100644 files/es/temas/index.html create mode 100644 files/es/temas/theme_concepts/index.html create mode 100644 files/es/thunderbird_localization/index.html create mode 100644 files/es/tipo_mime_incorrecto_en_archivos_css/index.html create mode 100644 files/es/tools/3d_view/index.html create mode 100644 files/es/tools/about_colon_debugging/index.html create mode 100644 files/es/tools/accesos_directos/index.html create mode 100644 files/es/tools/add-ons/index.html create mode 100644 files/es/tools/browser_console/index.html create mode 100644 files/es/tools/browser_toolbox/index.html create mode 100644 files/es/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/es/tools/debugger/how_to/index.html create mode 100644 files/es/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html create mode 100644 files/es/tools/debugger/index.html create mode 100644 files/es/tools/debugger/source_map_errors/index.html create mode 100644 "files/es/tools/desempe\303\261o/index.html" create mode 100644 "files/es/tools/desempe\303\261o/ui_tour/index.html" create mode 100644 files/es/tools/editor_audio_web/index.html create mode 100644 files/es/tools/editor_estilo/index.html create mode 100644 files/es/tools/index.html create mode 100644 files/es/tools/monitor_de_red/index.html create mode 100644 files/es/tools/page_inspector/3er-panel_modo/index.html create mode 100644 files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html create mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html create mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/es/tools/page_inspector/how_to/index.html create mode 100644 files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html create mode 100644 files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html create mode 100644 files/es/tools/page_inspector/how_to/select_an_element/index.html create mode 100644 files/es/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 files/es/tools/page_inspector/index.html create mode 100644 files/es/tools/page_inspector/ui_tour/index.html create mode 100644 files/es/tools/profiler/index.html create mode 100644 files/es/tools/remote_debugging/debugging_over_a_network/index.html create mode 100644 files/es/tools/remote_debugging/firefox_para_android/index.html create mode 100644 files/es/tools/remote_debugging/index.html create mode 100644 files/es/tools/responsive_design_view/index.html create mode 100644 files/es/tools/settings/index.html create mode 100644 files/es/tools/storage_inspector/cookies/index.html create mode 100644 files/es/tools/storage_inspector/index.html create mode 100644 files/es/tools/tomar_capturas_de_pantalla/index.html create mode 100644 files/es/tools/tools_toolbox/index.html create mode 100644 files/es/tools/view_source/index.html create mode 100644 files/es/tools/web_console/console_messages/index.html create mode 100644 files/es/tools/web_console/index.html create mode 100644 files/es/tools/web_console/iniciando_la_consola_web/index.html create mode 100644 "files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" create mode 100644 files/es/tools/webide/index.html create mode 100644 files/es/tools/webide/monitor/index.html create mode 100644 files/es/tools/webide/troubleshooting/index.html create mode 100644 files/es/tools/working_with_iframes/index.html create mode 100644 files/es/traducir_las_descripciones_de_las_extensiones/index.html create mode 100644 "files/es/traducir_una_extensi\303\263n/index.html" create mode 100644 files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html create mode 100644 files/es/usando_archivos_desde_aplicaciones_web/index.html create mode 100644 "files/es/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" create mode 100644 files/es/usar_web_workers/index.html create mode 100644 files/es/usar_xpinstall_para_instalar_plugins/index.html create mode 100644 files/es/using_the_w3c_dom_level_1_core/index.html create mode 100644 files/es/uso_de_nsiloginmanager/index.html create mode 100644 "files/es/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" create mode 100644 files/es/venkman/index.html create mode 100644 files/es/vigilancia_de_plugins/index.html create mode 100644 files/es/vigilar_descargas/index.html create mode 100644 files/es/vigilar_plugins/index.html create mode 100644 files/es/web/accesibilidad/comunidad/index.html create mode 100644 files/es/web/accesibilidad/index.html create mode 100644 files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html create mode 100644 files/es/web/accesibilidad/understanding_wcag/index.html create mode 100644 files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html create mode 100644 files/es/web/accesibilidad/understanding_wcag/perceivable/index.html create mode 100644 files/es/web/accesibilidad/understanding_wcag/teclado/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html create mode 100644 files/es/web/accessibility/aria/forms/alertas/index.html create mode 100644 files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html create mode 100644 files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html create mode 100644 files/es/web/accessibility/aria/forms/index.html create mode 100644 files/es/web/accessibility/aria/index.html create mode 100644 files/es/web/api/abstractworker/index.html create mode 100644 files/es/web/api/ambient_light_events/index.html create mode 100644 files/es/web/api/analysernode/index.html create mode 100644 "files/es/web/api/animation/animaci\303\263n/index.html" create mode 100644 files/es/web/api/animation/cancel/index.html create mode 100644 files/es/web/api/animation/effect/index.html create mode 100644 files/es/web/api/animation/finish/index.html create mode 100644 files/es/web/api/animation/id/index.html create mode 100644 files/es/web/api/animation/index.html create mode 100644 files/es/web/api/animation/oncancel/index.html create mode 100644 files/es/web/api/animation/onfinish/index.html create mode 100644 files/es/web/api/animation/pause/index.html create mode 100644 files/es/web/api/animation/play/index.html create mode 100644 files/es/web/api/animation/playbackrate/index.html create mode 100644 files/es/web/api/animation/playstate/index.html create mode 100644 files/es/web/api/animation/ready/index.html create mode 100644 files/es/web/api/animation/reverse/index.html create mode 100644 files/es/web/api/animation/starttime/index.html create mode 100644 files/es/web/api/animation/terminado/index.html create mode 100644 files/es/web/api/animation/tiempoactual/index.html create mode 100644 files/es/web/api/animation/timeline/index.html create mode 100644 files/es/web/api/animationevent/animationname/index.html create mode 100644 files/es/web/api/animationevent/index.html create mode 100644 files/es/web/api/api_de_almacenamiento_web/index.html create mode 100644 files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html create mode 100644 files/es/web/api/api_del_portapapeles/index.html create mode 100644 files/es/web/api/attr/index.html create mode 100644 files/es/web/api/audiobuffer/index.html create mode 100644 files/es/web/api/audionode/index.html create mode 100644 files/es/web/api/baseaudiocontext/createbiquadfilter/index.html create mode 100644 files/es/web/api/baseaudiocontext/index.html create mode 100644 files/es/web/api/batterymanager/charging/index.html create mode 100644 files/es/web/api/batterymanager/chargingtime/index.html create mode 100644 files/es/web/api/batterymanager/dischargingtime/index.html create mode 100644 files/es/web/api/batterymanager/index.html create mode 100644 files/es/web/api/batterymanager/level/index.html create mode 100644 files/es/web/api/batterymanager/onchargingchange/index.html create mode 100644 files/es/web/api/batterymanager/onlevelchange/index.html create mode 100644 files/es/web/api/beforeunloadevent/index.html create mode 100644 files/es/web/api/blob/blob/index.html create mode 100644 files/es/web/api/blob/index.html create mode 100644 files/es/web/api/blob/type/index.html create mode 100644 files/es/web/api/blobbuilder/index.html create mode 100644 files/es/web/api/body/formdata/index.html create mode 100644 files/es/web/api/body/index.html create mode 100644 files/es/web/api/body/json/index.html create mode 100644 files/es/web/api/cachestorage/index.html create mode 100644 files/es/web/api/cachestorage/keys/index.html create mode 100644 files/es/web/api/cameracapabilities/effects/index.html create mode 100644 files/es/web/api/cameracapabilities/fileformats/index.html create mode 100644 files/es/web/api/cameracapabilities/flashmodes/index.html create mode 100644 files/es/web/api/cameracapabilities/index.html create mode 100644 files/es/web/api/cameracapabilities/maxexposurecompensation/index.html create mode 100644 files/es/web/api/cameracapabilities/maxfocusareas/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/es/web/api/canvasimagesource/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/arc/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/beginpath/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/clearrect/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/drawimage/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/linecap/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/rotate/index.html create mode 100644 files/es/web/api/canvasrenderingcontext2d/save/index.html create mode 100644 files/es/web/api/childnode/after/index.html create mode 100644 files/es/web/api/childnode/before/index.html create mode 100644 files/es/web/api/childnode/index.html create mode 100644 files/es/web/api/childnode/remove/index.html create mode 100644 files/es/web/api/childnode/replacewith/index.html create mode 100644 files/es/web/api/clipboardevent/clipboarddata/index.html create mode 100644 files/es/web/api/clipboardevent/index.html create mode 100644 files/es/web/api/closeevent/index.html create mode 100644 files/es/web/api/comment/index.html create mode 100644 files/es/web/api/console/assert/index.html create mode 100644 files/es/web/api/console/count/index.html create mode 100644 files/es/web/api/console/dir/index.html create mode 100644 files/es/web/api/console/dirxml/index.html create mode 100644 files/es/web/api/console/error/index.html create mode 100644 files/es/web/api/console/index.html create mode 100644 files/es/web/api/console/info/index.html create mode 100644 files/es/web/api/console/log/index.html create mode 100644 files/es/web/api/console/tabla/index.html create mode 100644 files/es/web/api/console/time/index.html create mode 100644 files/es/web/api/console/timeend/index.html create mode 100644 files/es/web/api/console/trace/index.html create mode 100644 files/es/web/api/console/warn/index.html create mode 100644 files/es/web/api/constraint_validation/index.html create mode 100644 files/es/web/api/crypto/index.html create mode 100644 files/es/web/api/crypto/subtle/index.html create mode 100644 files/es/web/api/css_object_model/index.html create mode 100644 files/es/web/api/cssrule/csstext/index.html create mode 100644 files/es/web/api/cssrule/index.html create mode 100644 files/es/web/api/cssrule/parentstylesheet/index.html create mode 100644 files/es/web/api/cssstyledeclaration/index.html create mode 100644 files/es/web/api/cssstylerule/index.html create mode 100644 files/es/web/api/cssstylerule/selectortext/index.html create mode 100644 files/es/web/api/cssstylesheet/deleterule/index.html create mode 100644 files/es/web/api/cssstylesheet/index.html create mode 100644 files/es/web/api/cssstylesheet/insertrule/index.html create mode 100644 files/es/web/api/cssstylesheet/ownerrule/index.html create mode 100644 files/es/web/api/customelementregistry/define/index.html create mode 100644 files/es/web/api/customelementregistry/index.html create mode 100644 files/es/web/api/customevent/index.html create mode 100644 files/es/web/api/datatransfer/index.html create mode 100644 files/es/web/api/detecting_device_orientation/index.html create mode 100644 files/es/web/api/devicemotionevent/index.html create mode 100644 files/es/web/api/document/abrir/index.html create mode 100644 files/es/web/api/document/adoptnode/index.html create mode 100644 files/es/web/api/document/alinkcolor/index.html create mode 100644 files/es/web/api/document/anchors/index.html create mode 100644 files/es/web/api/document/applets/index.html create mode 100644 files/es/web/api/document/async/index.html create mode 100644 files/es/web/api/document/bgcolor/index.html create mode 100644 files/es/web/api/document/body/index.html create mode 100644 files/es/web/api/document/characterset/index.html create mode 100644 files/es/web/api/document/clear/index.html create mode 100644 files/es/web/api/document/close/index.html create mode 100644 files/es/web/api/document/contenttype/index.html create mode 100644 files/es/web/api/document/crearatributo/index.html create mode 100644 files/es/web/api/document/createdocumentfragment/index.html create mode 100644 files/es/web/api/document/createelement/index.html create mode 100644 files/es/web/api/document/createelementns/index.html create mode 100644 files/es/web/api/document/createrange/index.html create mode 100644 files/es/web/api/document/createtextnode/index.html create mode 100644 files/es/web/api/document/defaultview/index.html create mode 100644 files/es/web/api/document/designmode/index.html create mode 100644 files/es/web/api/document/dir/index.html create mode 100644 files/es/web/api/document/doctype/index.html create mode 100644 files/es/web/api/document/documentelement/index.html create mode 100644 files/es/web/api/document/documenturi/index.html create mode 100644 files/es/web/api/document/documenturiobject/index.html create mode 100644 files/es/web/api/document/dragover_event/index.html create mode 100644 files/es/web/api/document/embeds/index.html create mode 100644 files/es/web/api/document/evaluate/index.html create mode 100644 files/es/web/api/document/execcommand/index.html create mode 100644 files/es/web/api/document/exitfullscreen/index.html create mode 100644 files/es/web/api/document/getelementbyid/index.html create mode 100644 files/es/web/api/document/getelementsbyclassname/index.html create mode 100644 files/es/web/api/document/getelementsbyname/index.html create mode 100644 files/es/web/api/document/getelementsbytagname/index.html create mode 100644 files/es/web/api/document/getelementsbytagnamens/index.html create mode 100644 files/es/web/api/document/getselection/index.html create mode 100644 files/es/web/api/document/hasfocus/index.html create mode 100644 files/es/web/api/document/head/index.html create mode 100644 files/es/web/api/document/height/index.html create mode 100644 files/es/web/api/document/hidden/index.html create mode 100644 files/es/web/api/document/importnode/index.html create mode 100644 files/es/web/api/document/index.html create mode 100644 files/es/web/api/document/keydown_event/index.html create mode 100644 files/es/web/api/document/keyup_event/index.html create mode 100644 files/es/web/api/document/pointerlockelement/index.html create mode 100644 files/es/web/api/document/queryselector/index.html create mode 100644 files/es/web/api/document/queryselectorall/index.html create mode 100644 files/es/web/api/document/readystate/index.html create mode 100644 files/es/web/api/document/registerelement/index.html create mode 100644 files/es/web/api/document/scripts/index.html create mode 100644 files/es/web/api/document/scroll_event/index.html create mode 100644 files/es/web/api/document/stylesheets/index.html create mode 100644 files/es/web/api/document/url/index.html create mode 100644 files/es/web/api/document/write/index.html create mode 100644 files/es/web/api/document/writeln/index.html create mode 100644 files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html create mode 100644 files/es/web/api/documentfragment/index.html create mode 100644 files/es/web/api/domapplicationsregistry/checkinstalled/index.html create mode 100644 files/es/web/api/domapplicationsregistry/getinstalled/index.html create mode 100644 files/es/web/api/domapplicationsregistry/index.html create mode 100644 files/es/web/api/domapplicationsregistry/install/index.html create mode 100644 files/es/web/api/domapplicationsregistry/installpackage/index.html create mode 100644 files/es/web/api/domerror/index.html create mode 100644 files/es/web/api/domparser/index.html create mode 100644 files/es/web/api/domstring/cadenas_binarias/index.html create mode 100644 files/es/web/api/domstring/index.html create mode 100644 files/es/web/api/dragevent/index.html create mode 100644 files/es/web/api/element/accesskey/index.html create mode 100644 files/es/web/api/element/animate/index.html create mode 100644 files/es/web/api/element/attachshadow/index.html create mode 100644 files/es/web/api/element/attributes/index.html create mode 100644 files/es/web/api/element/classlist/index.html create mode 100644 files/es/web/api/element/classname/index.html create mode 100644 files/es/web/api/element/click_event/index.html create mode 100644 files/es/web/api/element/clientheight/index.html create mode 100644 files/es/web/api/element/clientleft/index.html create mode 100644 files/es/web/api/element/clienttop/index.html create mode 100644 files/es/web/api/element/clientwidth/index.html create mode 100644 files/es/web/api/element/closest/index.html create mode 100644 files/es/web/api/element/computedstylemap/index.html create mode 100644 files/es/web/api/element/currentstyle/index.html create mode 100644 files/es/web/api/element/getattribute/index.html create mode 100644 files/es/web/api/element/getattributenodens/index.html create mode 100644 files/es/web/api/element/getboundingclientrect/index.html create mode 100644 files/es/web/api/element/getclientrects/index.html create mode 100644 files/es/web/api/element/getelementsbyclassname/index.html create mode 100644 files/es/web/api/element/getelementsbytagname/index.html create mode 100644 files/es/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/es/web/api/element/hasattribute/index.html create mode 100644 files/es/web/api/element/id/index.html create mode 100644 files/es/web/api/element/index.html create mode 100644 files/es/web/api/element/innerhtml/index.html create mode 100644 files/es/web/api/element/insertadjacentelement/index.html create mode 100644 files/es/web/api/element/insertadjacenthtml/index.html create mode 100644 files/es/web/api/element/localname/index.html create mode 100644 files/es/web/api/element/matches/index.html create mode 100644 files/es/web/api/element/mousedown_event/index.html create mode 100644 files/es/web/api/element/name/index.html create mode 100644 files/es/web/api/element/namespaceuri/index.html create mode 100644 files/es/web/api/element/ongotpointercapture/index.html create mode 100644 files/es/web/api/element/onlostpointercapture/index.html create mode 100644 files/es/web/api/element/onwheel/index.html create mode 100644 files/es/web/api/element/outerhtml/index.html create mode 100644 files/es/web/api/element/prefix/index.html create mode 100644 files/es/web/api/element/queryselector/index.html create mode 100644 files/es/web/api/element/removeattribute/index.html create mode 100644 files/es/web/api/element/requestfullscreen/index.html create mode 100644 files/es/web/api/element/runtimestyle/index.html create mode 100644 files/es/web/api/element/scrollheight/index.html create mode 100644 files/es/web/api/element/scrollintoview/index.html create mode 100644 files/es/web/api/element/scrollleft/index.html create mode 100644 files/es/web/api/element/scrolltop/index.html create mode 100644 files/es/web/api/element/scrolltopmax/index.html create mode 100644 files/es/web/api/element/scrollwidth/index.html create mode 100644 files/es/web/api/element/setattribute/index.html create mode 100644 files/es/web/api/element/setattributens/index.html create mode 100644 files/es/web/api/element/setcapture/index.html create mode 100644 files/es/web/api/element/shadowroot/index.html create mode 100644 files/es/web/api/element/tagname/index.html create mode 100644 files/es/web/api/element/wheel_event/index.html create mode 100644 files/es/web/api/elementoshtmlparavideo/index.html create mode 100644 files/es/web/api/event/bubbles/index.html create mode 100644 files/es/web/api/event/cancelable/index.html create mode 100644 files/es/web/api/event/createevent/index.html create mode 100644 files/es/web/api/event/currenttarget/index.html create mode 100644 files/es/web/api/event/defaultprevented/index.html create mode 100644 files/es/web/api/event/event/index.html create mode 100644 files/es/web/api/event/index.html create mode 100644 files/es/web/api/event/initevent/index.html create mode 100644 files/es/web/api/event/preventdefault/index.html create mode 100644 files/es/web/api/event/stoppropagation/index.html create mode 100644 files/es/web/api/event/target/index.html create mode 100644 files/es/web/api/event/type/index.html create mode 100644 files/es/web/api/eventlistener/index.html create mode 100644 files/es/web/api/eventsource/index.html create mode 100644 files/es/web/api/eventsource/onopen/index.html create mode 100644 files/es/web/api/eventtarget/addeventlistener/index.html create mode 100644 files/es/web/api/eventtarget/dispatchevent/index.html create mode 100644 files/es/web/api/eventtarget/index.html create mode 100644 files/es/web/api/eventtarget/removeeventlistener/index.html create mode 100644 files/es/web/api/fetch_api/conceptos_basicos/index.html create mode 100644 files/es/web/api/fetch_api/index.html create mode 100644 files/es/web/api/fetch_api/utilizando_fetch/index.html create mode 100644 files/es/web/api/fetchevent/index.html create mode 100644 files/es/web/api/file/filename/index.html create mode 100644 files/es/web/api/file/index.html create mode 100644 files/es/web/api/file/lastmodifieddate/index.html create mode 100644 files/es/web/api/file/name/index.html create mode 100644 files/es/web/api/file/type/index.html create mode 100644 files/es/web/api/file/using_files_from_web_applications/index.html create mode 100644 files/es/web/api/file/webkitrelativepath/index.html create mode 100644 files/es/web/api/fileerror/index.html create mode 100644 files/es/web/api/filereader/index.html create mode 100644 files/es/web/api/filereader/onload/index.html create mode 100644 files/es/web/api/filereader/readasarraybuffer/index.html create mode 100644 files/es/web/api/filereader/readasdataurl/index.html create mode 100644 files/es/web/api/filereader/readastext/index.html create mode 100644 files/es/web/api/filereader/result/index.html create mode 100644 files/es/web/api/filesystem/index.html create mode 100644 files/es/web/api/fullscreen_api/index.html create mode 100644 files/es/web/api/gamepad_api/index.html create mode 100644 files/es/web/api/gamepadbutton/index.html create mode 100644 files/es/web/api/geolocation/clearwatch/index.html create mode 100644 files/es/web/api/geolocation/getcurrentposition/index.html create mode 100644 files/es/web/api/geolocation/index.html create mode 100644 files/es/web/api/geolocation/watchposition/index.html create mode 100644 files/es/web/api/geolocationcoordinates/index.html create mode 100644 files/es/web/api/geolocationcoordinates/latitude/index.html create mode 100644 files/es/web/api/geolocationposition/index.html create mode 100644 files/es/web/api/globaleventhandlers/index.html create mode 100644 files/es/web/api/globaleventhandlers/onblur/index.html create mode 100644 files/es/web/api/globaleventhandlers/onchange/index.html create mode 100644 files/es/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/es/web/api/globaleventhandlers/onclose/index.html create mode 100644 files/es/web/api/globaleventhandlers/onerror/index.html create mode 100644 files/es/web/api/globaleventhandlers/onfocus/index.html create mode 100644 files/es/web/api/globaleventhandlers/oninput/index.html create mode 100644 files/es/web/api/globaleventhandlers/onkeydown/index.html create mode 100644 files/es/web/api/globaleventhandlers/onkeyup/index.html create mode 100644 files/es/web/api/globaleventhandlers/onload/index.html create mode 100644 files/es/web/api/globaleventhandlers/onloadedmetadata/index.html create mode 100644 files/es/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/es/web/api/globaleventhandlers/onscroll/index.html create mode 100644 files/es/web/api/globaleventhandlers/onselect/index.html create mode 100644 files/es/web/api/globaleventhandlers/onselectstart/index.html create mode 100644 files/es/web/api/globaleventhandlers/onsubmit/index.html create mode 100644 files/es/web/api/globaleventhandlers/ontouchstart/index.html create mode 100644 files/es/web/api/globaleventhandlers/onunload/index.html create mode 100644 files/es/web/api/headers/index.html create mode 100644 files/es/web/api/history/index.html create mode 100644 files/es/web/api/history/length/index.html create mode 100644 files/es/web/api/history/pushstate/index.html create mode 100644 files/es/web/api/htmlanchorelement/index.html create mode 100644 files/es/web/api/htmlaudioelement/index.html create mode 100644 files/es/web/api/htmlcanvaselement/getcontext/index.html create mode 100644 files/es/web/api/htmlcanvaselement/height/index.html create mode 100644 files/es/web/api/htmlcanvaselement/index.html create mode 100644 files/es/web/api/htmlcanvaselement/toblob/index.html create mode 100644 files/es/web/api/htmlcanvaselement/todataurl/index.html create mode 100644 files/es/web/api/htmlcanvaselement/width/index.html create mode 100644 files/es/web/api/htmlcollection/index.html create mode 100644 files/es/web/api/htmlcontentelement/getdistributednodes/index.html create mode 100644 files/es/web/api/htmlcontentelement/index.html create mode 100644 files/es/web/api/htmlcontentelement/select/index.html create mode 100644 files/es/web/api/htmldivelement/index.html create mode 100644 files/es/web/api/htmlelement/change_event/index.html create mode 100644 files/es/web/api/htmlelement/click/index.html create mode 100644 files/es/web/api/htmlelement/contenteditable/index.html create mode 100644 files/es/web/api/htmlelement/dataset/index.html create mode 100644 files/es/web/api/htmlelement/focus/index.html create mode 100644 files/es/web/api/htmlelement/index.html create mode 100644 files/es/web/api/htmlelement/innertext/index.html create mode 100644 files/es/web/api/htmlelement/input_event/index.html create mode 100644 files/es/web/api/htmlelement/offsetheight/index.html create mode 100644 files/es/web/api/htmlelement/offsetleft/index.html create mode 100644 files/es/web/api/htmlelement/offsetparent/index.html create mode 100644 files/es/web/api/htmlelement/offsettop/index.html create mode 100644 files/es/web/api/htmlelement/offsetwidth/index.html create mode 100644 files/es/web/api/htmlelement/style/index.html create mode 100644 files/es/web/api/htmlformelement/index.html create mode 100644 files/es/web/api/htmlformelement/reset/index.html create mode 100644 files/es/web/api/htmlheadelement/index.html create mode 100644 files/es/web/api/htmlhtmlelement/index.html create mode 100644 files/es/web/api/htmlimageelement/image/index.html create mode 100644 files/es/web/api/htmlimageelement/index.html create mode 100644 files/es/web/api/htmlinputelement/index.html create mode 100644 files/es/web/api/htmlinputelement/invalid_event/index.html create mode 100644 files/es/web/api/htmlinputelement/select/index.html create mode 100644 files/es/web/api/htmllabelelement/index.html create mode 100644 files/es/web/api/htmllielement/index.html create mode 100644 files/es/web/api/htmlmediaelement/canplay_event/index.html create mode 100644 files/es/web/api/htmlmediaelement/index.html create mode 100644 files/es/web/api/htmlmediaelement/loadeddata_event/index.html create mode 100644 files/es/web/api/htmlmediaelement/pause/index.html create mode 100644 files/es/web/api/htmlmediaelement/paused/index.html create mode 100644 files/es/web/api/htmlmediaelement/play/index.html create mode 100644 files/es/web/api/htmlmediaelement/timeupdate_event/index.html create mode 100644 files/es/web/api/htmlselectelement/checkvalidity/index.html create mode 100644 files/es/web/api/htmlselectelement/index.html create mode 100644 files/es/web/api/htmlselectelement/setcustomvalidity/index.html create mode 100644 files/es/web/api/htmlshadowelement/getdistributednodes/index.html create mode 100644 files/es/web/api/htmlshadowelement/index.html create mode 100644 files/es/web/api/htmlstyleelement/index.html create mode 100644 files/es/web/api/htmltableelement/align/index.html create mode 100644 files/es/web/api/htmltableelement/index.html create mode 100644 files/es/web/api/htmltableelement/insertrow/index.html create mode 100644 files/es/web/api/idbcursor/continue/index.html create mode 100644 files/es/web/api/idbcursor/index.html create mode 100644 files/es/web/api/idbdatabase/index.html create mode 100644 files/es/web/api/idbdatabase/transaction/index.html create mode 100644 files/es/web/api/idbobjectstore/add/index.html create mode 100644 files/es/web/api/idbobjectstore/index.html create mode 100644 files/es/web/api/imagebitmap/index.html create mode 100644 files/es/web/api/imagebitmaprenderingcontext/index.html create mode 100644 files/es/web/api/index.html create mode 100644 files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html create mode 100644 files/es/web/api/indexeddb_api/index.html create mode 100644 files/es/web/api/indexeddb_api/usando_indexeddb/index.html create mode 100644 files/es/web/api/intersection_observer_api/index.html create mode 100644 files/es/web/api/keyboardevent/getmodifierstate/index.html create mode 100644 files/es/web/api/keyboardevent/index.html create mode 100644 files/es/web/api/keyboardevent/key/index.html create mode 100644 files/es/web/api/keyboardevent/metakey/index.html create mode 100644 files/es/web/api/keyboardevent/which/index.html create mode 100644 files/es/web/api/location/index.html create mode 100644 files/es/web/api/location/origin/index.html create mode 100644 files/es/web/api/location/reload/index.html create mode 100644 files/es/web/api/mediadevices/getusermedia/index.html create mode 100644 files/es/web/api/mediadevices/index.html create mode 100644 files/es/web/api/mediaquerylist/addlistener/index.html create mode 100644 files/es/web/api/mediaquerylist/index.html create mode 100644 files/es/web/api/mediaquerylist/matches/index.html create mode 100644 files/es/web/api/mediaquerylist/removelistener/index.html create mode 100644 files/es/web/api/mediasource/index.html create mode 100644 files/es/web/api/mediastreamaudiosourcenode/index.html create mode 100644 files/es/web/api/mediastreamtrack/index.html create mode 100644 files/es/web/api/messageevent/index.html create mode 100644 files/es/web/api/mimetype/index.html create mode 100644 files/es/web/api/mouseevent/index.html create mode 100644 files/es/web/api/mouseevent/initmouseevent/index.html create mode 100644 files/es/web/api/mouseevent/shiftkey/index.html create mode 100644 files/es/web/api/mozsocial/closepanel/index.html create mode 100644 files/es/web/api/mozsocial/getattention/index.html create mode 100644 files/es/web/api/mozsocial/getworker/index.html create mode 100644 files/es/web/api/mozsocial/index.html create mode 100644 files/es/web/api/mozsocial/isvisible/index.html create mode 100644 files/es/web/api/mozsocial/openchatwindow/index.html create mode 100644 files/es/web/api/mozsocial/openpanel/index.html create mode 100644 files/es/web/api/mutationobserver/index.html create mode 100644 files/es/web/api/mutationobserver/mutationobserver/index.html create mode 100644 files/es/web/api/mutationobserver/observe/index.html create mode 100644 files/es/web/api/navigator/donottrack/index.html create mode 100644 files/es/web/api/navigator/getusermedia/index.html create mode 100644 files/es/web/api/navigator/id/index.html create mode 100644 files/es/web/api/navigator/index.html create mode 100644 files/es/web/api/navigator/mozsocial/index.html create mode 100644 files/es/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html create mode 100644 files/es/web/api/navigator/vibrate/index.html create mode 100644 files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html create mode 100644 files/es/web/api/navigatorconcurrenthardware/index.html create mode 100644 files/es/web/api/navigatorgeolocation/geolocation/index.html create mode 100644 files/es/web/api/navigatorgeolocation/index.html create mode 100644 files/es/web/api/navigatorlanguage/index.html create mode 100644 files/es/web/api/navigatorlanguage/language/index.html create mode 100644 files/es/web/api/navigatoronline/eventos_online_y_offline/index.html create mode 100644 files/es/web/api/navigatoronline/index.html create mode 100644 files/es/web/api/navigatoronline/online/index.html create mode 100644 files/es/web/api/network_information_api/index.html create mode 100644 files/es/web/api/node/appendchild/index.html create mode 100644 files/es/web/api/node/childnodes/index.html create mode 100644 files/es/web/api/node/clonenode/index.html create mode 100644 files/es/web/api/node/contains/index.html create mode 100644 files/es/web/api/node/elementopadre/index.html create mode 100644 files/es/web/api/node/haschildnodes/index.html create mode 100644 files/es/web/api/node/index.html create mode 100644 files/es/web/api/node/insertarantes/index.html create mode 100644 files/es/web/api/node/issamenode/index.html create mode 100644 files/es/web/api/node/lastchild/index.html create mode 100644 files/es/web/api/node/namespaceuri/index.html create mode 100644 files/es/web/api/node/nextsibling/index.html create mode 100644 files/es/web/api/node/nodename/index.html create mode 100644 files/es/web/api/node/nodetype/index.html create mode 100644 files/es/web/api/node/nodevalue/index.html create mode 100644 files/es/web/api/node/nodoprincipal/index.html create mode 100644 files/es/web/api/node/ownerdocument/index.html create mode 100644 files/es/web/api/node/parentnode/index.html create mode 100644 files/es/web/api/node/previoussibling/index.html create mode 100644 files/es/web/api/node/removechild/index.html create mode 100644 files/es/web/api/node/replacechild/index.html create mode 100644 files/es/web/api/node/textcontent/index.html create mode 100644 files/es/web/api/nodelist/foreach/index.html create mode 100644 files/es/web/api/nodelist/index.html create mode 100644 files/es/web/api/nondocumenttypechildnode/index.html create mode 100644 files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html create mode 100644 files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html create mode 100644 files/es/web/api/notification/body/index.html create mode 100644 files/es/web/api/notification/dir/index.html create mode 100644 files/es/web/api/notification/icon/index.html create mode 100644 files/es/web/api/notification/index.html create mode 100644 files/es/web/api/notification/onclick/index.html create mode 100644 files/es/web/api/notification/permission/index.html create mode 100644 files/es/web/api/notification/requestpermission/index.html create mode 100644 files/es/web/api/notifications_api/index.html create mode 100644 files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html create mode 100644 files/es/web/api/parentnode/append/index.html create mode 100644 files/es/web/api/parentnode/childelementcount/index.html create mode 100644 files/es/web/api/parentnode/children/index.html create mode 100644 files/es/web/api/parentnode/firstelementchild/index.html create mode 100644 files/es/web/api/parentnode/index.html create mode 100644 files/es/web/api/parentnode/lastelementchild/index.html create mode 100644 files/es/web/api/payment_request_api/index.html create mode 100644 files/es/web/api/performance/clearmarks/index.html create mode 100644 files/es/web/api/performance/clearmeasures/index.html create mode 100644 files/es/web/api/performance/index.html create mode 100644 files/es/web/api/performance/memory/index.html create mode 100644 files/es/web/api/performance/navigation/index.html create mode 100644 files/es/web/api/performance/now/index.html create mode 100644 files/es/web/api/performance/timeorigin/index.html create mode 100644 files/es/web/api/performance/timing/index.html create mode 100644 files/es/web/api/performancenavigation/index.html create mode 100644 files/es/web/api/positionoptions/index.html create mode 100644 files/es/web/api/push_api/index.html create mode 100644 files/es/web/api/push_api/using_the_push_api/index.html create mode 100644 files/es/web/api/pushmanager/index.html create mode 100644 files/es/web/api/pushmanager/permissionstate/index.html create mode 100644 files/es/web/api/pushmanager/supportedcontentencodings/index.html create mode 100644 files/es/web/api/randomsource/index.html create mode 100644 files/es/web/api/randomsource/obtenervaloresaleatorios/index.html create mode 100644 files/es/web/api/range/collapsed/index.html create mode 100644 files/es/web/api/range/commonancestorcontainer/index.html create mode 100644 files/es/web/api/range/getclientrects/index.html create mode 100644 files/es/web/api/range/index.html create mode 100644 files/es/web/api/range/intersectsnode/index.html create mode 100644 files/es/web/api/range/setstart/index.html create mode 100644 files/es/web/api/request/headers/index.html create mode 100644 files/es/web/api/request/index.html create mode 100644 files/es/web/api/response/index.html create mode 100644 files/es/web/api/response/ok/index.html create mode 100644 files/es/web/api/response/response/index.html create mode 100644 files/es/web/api/response/status/index.html create mode 100644 files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html create mode 100644 files/es/web/api/rtcpeerconnection/index.html create mode 100644 files/es/web/api/rtcrtpreceiver/index.html create mode 100644 files/es/web/api/screen/index.html create mode 100644 files/es/web/api/selection/addrange/index.html create mode 100644 files/es/web/api/selection/anchornode/index.html create mode 100644 files/es/web/api/selection/anchoroffset/index.html create mode 100644 files/es/web/api/selection/collapse/index.html create mode 100644 files/es/web/api/selection/collapsetoend/index.html create mode 100644 files/es/web/api/selection/collapsetostart/index.html create mode 100644 files/es/web/api/selection/containsnode/index.html create mode 100644 files/es/web/api/selection/deletefromdocument/index.html create mode 100644 files/es/web/api/selection/extend/index.html create mode 100644 files/es/web/api/selection/focusnode/index.html create mode 100644 files/es/web/api/selection/focusoffset/index.html create mode 100644 files/es/web/api/selection/getrangeat/index.html create mode 100644 files/es/web/api/selection/index.html create mode 100644 files/es/web/api/selection/iscollapsed/index.html create mode 100644 files/es/web/api/selection/rangecount/index.html create mode 100644 files/es/web/api/selection/removeallranges/index.html create mode 100644 files/es/web/api/selection/removerange/index.html create mode 100644 files/es/web/api/selection/selectallchildren/index.html create mode 100644 files/es/web/api/selection/tostring/index.html create mode 100644 files/es/web/api/service_worker_api/index.html create mode 100644 files/es/web/api/service_worker_api/using_service_workers/index.html create mode 100644 files/es/web/api/serviceworkercontainer/index.html create mode 100644 files/es/web/api/serviceworkercontainer/register/index.html create mode 100644 files/es/web/api/serviceworkerregistration/index.html create mode 100644 files/es/web/api/simple_push_api/index.html create mode 100644 files/es/web/api/storage/clear/index.html create mode 100644 files/es/web/api/storage/getitem/index.html create mode 100644 files/es/web/api/storage/index.html create mode 100644 files/es/web/api/storage/length/index.html create mode 100644 files/es/web/api/storage/localstorage/index.html create mode 100644 files/es/web/api/storage/removeitem/index.html create mode 100644 files/es/web/api/storage/setitem/index.html create mode 100644 files/es/web/api/storagemanager/estimate/index.html create mode 100644 files/es/web/api/storagemanager/index.html create mode 100644 files/es/web/api/storagemanager/persist/index.html create mode 100644 files/es/web/api/storagemanager/persisted/index.html create mode 100644 files/es/web/api/stylesheet/disabled/index.html create mode 100644 files/es/web/api/stylesheet/href/index.html create mode 100644 files/es/web/api/stylesheet/index.html create mode 100644 files/es/web/api/stylesheet/media/index.html create mode 100644 files/es/web/api/stylesheet/ownernode/index.html create mode 100644 files/es/web/api/stylesheet/parentstylesheet/index.html create mode 100644 files/es/web/api/stylesheet/title/index.html create mode 100644 files/es/web/api/stylesheet/type/index.html create mode 100644 files/es/web/api/subtlecrypto/digest/index.html create mode 100644 files/es/web/api/subtlecrypto/encrypt/index.html create mode 100644 files/es/web/api/subtlecrypto/index.html create mode 100644 files/es/web/api/svgpoint/index.html create mode 100644 files/es/web/api/texttrack/cuechange_event/index.html create mode 100644 files/es/web/api/texttrack/index.html create mode 100644 files/es/web/api/touchevent/index.html create mode 100644 files/es/web/api/uievent/index.html create mode 100644 files/es/web/api/uievent/pagex/index.html create mode 100644 files/es/web/api/url/createobjecturl/index.html create mode 100644 files/es/web/api/url/host/index.html create mode 100644 files/es/web/api/url/index.html create mode 100644 files/es/web/api/url/port/index.html create mode 100644 files/es/web/api/url/url/index.html create mode 100644 files/es/web/api/urlsearchparams/index.html create mode 100644 files/es/web/api/urlsearchparams/urlsearchparams/index.html create mode 100644 files/es/web/api/using_the_browser_api/index.html create mode 100644 files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html create mode 100644 files/es/web/api/web_crypto_api/index.html create mode 100644 files/es/web/api/web_speech_api/index.html create mode 100644 files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html create mode 100644 files/es/web/api/web_workers_api/index.html create mode 100644 files/es/web/api/webgl_api/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html create mode 100644 files/es/web/api/webrtc_api/index.html create mode 100644 files/es/web/api/webrtc_api/protocols/index.html create mode 100644 files/es/web/api/websocket/close_event/index.html create mode 100644 files/es/web/api/websocket/index.html create mode 100644 files/es/web/api/websocket/onerror/index.html create mode 100644 files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html create mode 100644 files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html create mode 100644 files/es/web/api/websockets_api/index.html create mode 100644 files/es/web/api/websockets_api/writing_websocket_client_applications/index.html create mode 100644 files/es/web/api/webvr_api/index.html create mode 100644 files/es/web/api/webvr_api/using_the_webvr_api/index.html create mode 100644 files/es/web/api/webvtt_api/index.html create mode 100644 files/es/web/api/wheelevent/deltay/index.html create mode 100644 files/es/web/api/wheelevent/index.html create mode 100644 files/es/web/api/window/alert/index.html create mode 100644 files/es/web/api/window/applicationcache/index.html create mode 100644 files/es/web/api/window/cancelanimationframe/index.html create mode 100644 files/es/web/api/window/close/index.html create mode 100644 files/es/web/api/window/closed/index.html create mode 100644 files/es/web/api/window/confirm/index.html create mode 100644 files/es/web/api/window/crypto/index.html create mode 100644 files/es/web/api/window/devicepixelratio/index.html create mode 100644 files/es/web/api/window/dialogarguments/index.html create mode 100644 files/es/web/api/window/document/index.html create mode 100644 files/es/web/api/window/frameelement/index.html create mode 100644 files/es/web/api/window/fullscreen/index.html create mode 100644 files/es/web/api/window/getcomputedstyle/index.html create mode 100644 files/es/web/api/window/getselection/index.html create mode 100644 files/es/web/api/window/hashchange_event/index.html create mode 100644 files/es/web/api/window/history/index.html create mode 100644 files/es/web/api/window/index.html create mode 100644 files/es/web/api/window/innerheight/index.html create mode 100644 files/es/web/api/window/localstorage/index.html create mode 100644 files/es/web/api/window/location/index.html create mode 100644 files/es/web/api/window/locationbar/index.html create mode 100644 files/es/web/api/window/matchmedia/index.html create mode 100644 files/es/web/api/window/menubar/index.html create mode 100644 files/es/web/api/window/moveby/index.html create mode 100644 files/es/web/api/window/navigator/index.html create mode 100644 files/es/web/api/window/offline_event/index.html create mode 100644 files/es/web/api/window/open/index.html create mode 100644 files/es/web/api/window/opener/index.html create mode 100644 files/es/web/api/window/outerheight/index.html create mode 100644 files/es/web/api/window/outerwidth/index.html create mode 100644 files/es/web/api/window/print/index.html create mode 100644 files/es/web/api/window/prompt/index.html create mode 100644 files/es/web/api/window/requestanimationframe/index.html create mode 100644 files/es/web/api/window/requestidlecallback/index.html create mode 100644 files/es/web/api/window/scroll/index.html create mode 100644 files/es/web/api/window/scrollby/index.html create mode 100644 files/es/web/api/window/scrollto/index.html create mode 100644 files/es/web/api/window/scrollx/index.html create mode 100644 files/es/web/api/window/scrolly/index.html create mode 100644 files/es/web/api/window/sessionstorage/index.html create mode 100644 files/es/web/api/window/showmodaldialog/index.html create mode 100644 files/es/web/api/window/sidebar/index.html create mode 100644 files/es/web/api/window/statusbar/index.html create mode 100644 files/es/web/api/window/url/index.html create mode 100644 files/es/web/api/windowbase64/atob/index.html create mode 100644 files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html create mode 100644 files/es/web/api/windowbase64/index.html create mode 100644 files/es/web/api/windoweventhandlers/index.html create mode 100644 files/es/web/api/windoweventhandlers/onbeforeunload/index.html create mode 100644 files/es/web/api/windoweventhandlers/onhashchange/index.html create mode 100644 files/es/web/api/windoweventhandlers/onpopstate/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/caches/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/fetch/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/indexeddb/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html create mode 100644 files/es/web/api/windowtimers/clearinterval/index.html create mode 100644 files/es/web/api/windowtimers/cleartimeout/index.html create mode 100644 files/es/web/api/windowtimers/index.html create mode 100644 files/es/web/api/windowtimers/setinterval/index.html create mode 100644 files/es/web/api/windowtimers/settimeout/index.html create mode 100644 files/es/web/api/worker/index.html create mode 100644 files/es/web/api/worker/postmessage/index.html create mode 100644 files/es/web/api/worker/terminate/index.html create mode 100644 files/es/web/api/xmlhttprequest/abort/index.html create mode 100644 files/es/web/api/xmlhttprequest/formdata/index.html create mode 100644 files/es/web/api/xmlhttprequest/index.html create mode 100644 files/es/web/api/xmlhttprequest/onreadystatechange/index.html create mode 100644 files/es/web/api/xmlhttprequest/responsetext/index.html create mode 100644 files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html create mode 100644 files/es/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/es/web/api/xmlhttprequesteventtarget/index.html create mode 100644 files/es/web/api/xmlhttprequesteventtarget/onload/index.html create mode 100644 files/es/web/css/--_star_/index.html create mode 100644 files/es/web/css/-moz-binding/index.html create mode 100644 files/es/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/es/web/css/-moz-border-left-colors/index.html create mode 100644 files/es/web/css/-moz-border-right-colors/index.html create mode 100644 files/es/web/css/-moz-border-top-colors/index.html create mode 100644 files/es/web/css/-moz-box-flex/index.html create mode 100644 files/es/web/css/-moz-box-ordinal-group/index.html create mode 100644 files/es/web/css/-moz-box-pack/index.html create mode 100644 files/es/web/css/-moz-cell/index.html create mode 100644 files/es/web/css/-moz-context-properties/index.html create mode 100644 files/es/web/css/-moz-float-edge/index.html create mode 100644 files/es/web/css/-moz-font-language-override/index.html create mode 100644 files/es/web/css/-moz-force-broken-image-icon/index.html create mode 100644 files/es/web/css/-moz-image-rect/index.html create mode 100644 files/es/web/css/-moz-image-region/index.html create mode 100644 files/es/web/css/-moz-orient/index.html create mode 100644 files/es/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/es/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/es/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/es/web/css/-moz-outline-radius-topright/index.html create mode 100644 files/es/web/css/-moz-outline-radius/index.html create mode 100644 files/es/web/css/-moz-stack-sizing/index.html create mode 100644 files/es/web/css/-moz-text-blink/index.html create mode 100644 files/es/web/css/-moz-user-focus/index.html create mode 100644 files/es/web/css/-moz-user-input/index.html create mode 100644 files/es/web/css/-moz-user-modify/index.html create mode 100644 files/es/web/css/-moz-window-shadow/index.html create mode 100644 files/es/web/css/-ms-accelerator/index.html create mode 100644 files/es/web/css/-ms-overflow-style/index.html create mode 100644 files/es/web/css/-webkit-border-before/index.html create mode 100644 files/es/web/css/-webkit-box-reflect/index.html create mode 100644 files/es/web/css/-webkit-mask-attachment/index.html create mode 100644 files/es/web/css/-webkit-mask-box-image/index.html create mode 100644 files/es/web/css/-webkit-mask-clip/index.html create mode 100644 files/es/web/css/-webkit-mask-composite/index.html create mode 100644 files/es/web/css/-webkit-mask-image/index.html create mode 100644 files/es/web/css/-webkit-mask-origin/index.html create mode 100644 files/es/web/css/-webkit-mask-position-x/index.html create mode 100644 files/es/web/css/-webkit-mask-position-y/index.html create mode 100644 files/es/web/css/-webkit-mask-position/index.html create mode 100644 files/es/web/css/-webkit-mask-repeat-x/index.html create mode 100644 files/es/web/css/-webkit-mask-repeat-y/index.html create mode 100644 files/es/web/css/-webkit-mask-repeat/index.html create mode 100644 files/es/web/css/-webkit-mask/index.html create mode 100644 files/es/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/es/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/es/web/css/-webkit-tap-highlight-color/index.html create mode 100644 files/es/web/css/-webkit-text-fill-color/index.html create mode 100644 files/es/web/css/-webkit-text-stroke-color/index.html create mode 100644 files/es/web/css/-webkit-text-stroke-width/index.html create mode 100644 files/es/web/css/-webkit-text-stroke/index.html create mode 100644 files/es/web/css/-webkit-touch-callout/index.html create mode 100644 files/es/web/css/@charset/index.html create mode 100644 files/es/web/css/@counter-style/additive-symbols/index.html create mode 100644 files/es/web/css/@counter-style/index.html create mode 100644 files/es/web/css/@counter-style/symbols/index.html create mode 100644 files/es/web/css/@document/index.html create mode 100644 files/es/web/css/@font-face/font-display/index.html create mode 100644 files/es/web/css/@font-face/font-family/index.html create mode 100644 files/es/web/css/@font-face/font-style/index.html create mode 100644 files/es/web/css/@font-face/index.html create mode 100644 files/es/web/css/@font-face/src/index.html create mode 100644 files/es/web/css/@font-face/unicode-range/index.html create mode 100644 files/es/web/css/@font-feature-values/index.html create mode 100644 files/es/web/css/@import/index.html create mode 100644 files/es/web/css/@keyframes/index.html create mode 100644 files/es/web/css/@media/altura/index.html create mode 100644 files/es/web/css/@media/color/index.html create mode 100644 files/es/web/css/@media/display-mode/index.html create mode 100644 files/es/web/css/@media/hover/index.html create mode 100644 files/es/web/css/@media/index.html create mode 100644 files/es/web/css/@media/pointer/index.html create mode 100644 "files/es/web/css/@media/resoluci\303\263n/index.html" create mode 100644 files/es/web/css/@media/width/index.html create mode 100644 files/es/web/css/@namespace/index.html create mode 100644 files/es/web/css/@page/index.html create mode 100644 files/es/web/css/@supports/index.html create mode 100644 files/es/web/css/@viewport/height/index.html create mode 100644 files/es/web/css/@viewport/index.html create mode 100644 files/es/web/css/@viewport/width/index.html create mode 100644 files/es/web/css/_colon_-moz-broken/index.html create mode 100644 files/es/web/css/_colon_-moz-drag-over/index.html create mode 100644 files/es/web/css/_colon_-moz-first-node/index.html create mode 100644 files/es/web/css/_colon_-moz-focusring/index.html create mode 100644 files/es/web/css/_colon_-moz-full-screen-ancestor/index.html create mode 100644 files/es/web/css/_colon_-moz-handler-blocked/index.html create mode 100644 files/es/web/css/_colon_-moz-handler-crashed/index.html create mode 100644 files/es/web/css/_colon_-moz-handler-disabled/index.html create mode 100644 files/es/web/css/_colon_-moz-last-node/index.html create mode 100644 files/es/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/es/web/css/_colon_-moz-list-number/index.html create mode 100644 files/es/web/css/_colon_-moz-loading/index.html create mode 100644 files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html create mode 100644 files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html create mode 100644 files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html create mode 100644 files/es/web/css/_colon_-moz-lwtheme-darktext/index.html create mode 100644 files/es/web/css/_colon_-moz-lwtheme/index.html create mode 100644 files/es/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/es/web/css/_colon_-moz-placeholder/index.html create mode 100644 files/es/web/css/_colon_-moz-submit-invalid/index.html create mode 100644 files/es/web/css/_colon_-moz-suppressed/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html create mode 100644 files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-cell-text/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-cell/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-column/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-drop-feedback/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-image/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-indentation/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-line/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-progressmeter/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-row(hover)/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-row/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-separator/index.html create mode 100644 files/es/web/css/_colon_-moz-tree-twisty/index.html create mode 100644 files/es/web/css/_colon_-moz-ui-invalid/index.html create mode 100644 files/es/web/css/_colon_-moz-ui-valid/index.html create mode 100644 files/es/web/css/_colon_-moz-user-disabled/index.html create mode 100644 files/es/web/css/_colon_-moz-window-inactive/index.html create mode 100644 files/es/web/css/_colon_-ms-input-placeholder/index.html create mode 100644 files/es/web/css/_colon_-webkit-autofill/index.html create mode 100644 files/es/web/css/_colon_active/index.html create mode 100644 files/es/web/css/_colon_any-link/index.html create mode 100644 files/es/web/css/_colon_any/index.html create mode 100644 files/es/web/css/_colon_blank/index.html create mode 100644 files/es/web/css/_colon_checked/index.html create mode 100644 files/es/web/css/_colon_default/index.html create mode 100644 files/es/web/css/_colon_defined/index.html create mode 100644 files/es/web/css/_colon_dir/index.html create mode 100644 files/es/web/css/_colon_disabled/index.html create mode 100644 files/es/web/css/_colon_empty/index.html create mode 100644 files/es/web/css/_colon_enabled/index.html create mode 100644 files/es/web/css/_colon_first-child/index.html create mode 100644 files/es/web/css/_colon_first-of-type/index.html create mode 100644 files/es/web/css/_colon_first/index.html create mode 100644 files/es/web/css/_colon_focus-visible/index.html create mode 100644 files/es/web/css/_colon_focus-within/index.html create mode 100644 files/es/web/css/_colon_focus/index.html create mode 100644 files/es/web/css/_colon_fullscreen/index.html create mode 100644 files/es/web/css/_colon_has/index.html create mode 100644 files/es/web/css/_colon_host/index.html create mode 100644 files/es/web/css/_colon_hover/index.html create mode 100644 files/es/web/css/_colon_in-range/index.html create mode 100644 files/es/web/css/_colon_indeterminate/index.html create mode 100644 files/es/web/css/_colon_invalid/index.html create mode 100644 files/es/web/css/_colon_lang/index.html create mode 100644 files/es/web/css/_colon_last-child/index.html create mode 100644 files/es/web/css/_colon_last-of-type/index.html create mode 100644 files/es/web/css/_colon_left/index.html create mode 100644 files/es/web/css/_colon_link/index.html create mode 100644 files/es/web/css/_colon_not()/index.html create mode 100644 files/es/web/css/_colon_nth-child/index.html create mode 100644 files/es/web/css/_colon_nth-last-child/index.html create mode 100644 files/es/web/css/_colon_nth-last-of-type/index.html create mode 100644 files/es/web/css/_colon_nth-of-type/index.html create mode 100644 files/es/web/css/_colon_only-child/index.html create mode 100644 files/es/web/css/_colon_only-of-type/index.html create mode 100644 files/es/web/css/_colon_optional/index.html create mode 100644 files/es/web/css/_colon_out-of-range/index.html create mode 100644 files/es/web/css/_colon_placeholder-shown/index.html create mode 100644 files/es/web/css/_colon_read-only/index.html create mode 100644 files/es/web/css/_colon_read-write/index.html create mode 100644 files/es/web/css/_colon_required/index.html create mode 100644 files/es/web/css/_colon_right/index.html create mode 100644 files/es/web/css/_colon_root/index.html create mode 100644 files/es/web/css/_colon_target/index.html create mode 100644 files/es/web/css/_colon_valid/index.html create mode 100644 files/es/web/css/_colon_visited/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-color-swatch/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-page-sequence/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-page/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-placeholder/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-range-progress/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-range-thumb/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-range-track/index.html create mode 100644 files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-browse/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-check/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-clear/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-expand/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-fill-lower/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-fill-upper/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-fill/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-reveal/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-thumb/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-ticks-after/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-track/index.html create mode 100644 files/es/web/css/_doublecolon_-ms-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-bar/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-progress-bar/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-progress-value/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-scrollbar/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html create mode 100644 files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html create mode 100644 files/es/web/css/_doublecolon_after/index.html create mode 100644 files/es/web/css/_doublecolon_backdrop/index.html create mode 100644 files/es/web/css/_doublecolon_before/index.html create mode 100644 files/es/web/css/_doublecolon_cue/index.html create mode 100644 files/es/web/css/_doublecolon_first-letter/index.html create mode 100644 files/es/web/css/_doublecolon_first-line/index.html create mode 100644 files/es/web/css/_doublecolon_marker/index.html create mode 100644 files/es/web/css/_doublecolon_placeholder/index.html create mode 100644 files/es/web/css/_doublecolon_selection/index.html create mode 100644 files/es/web/css/_doublecolon_spelling-error/index.html create mode 100644 files/es/web/css/actual_value/index.html create mode 100644 files/es/web/css/align-content/index.html create mode 100644 files/es/web/css/align-items/index.html create mode 100644 files/es/web/css/align-self/index.html create mode 100644 files/es/web/css/all/index.html create mode 100644 files/es/web/css/angle/index.html create mode 100644 files/es/web/css/animation-delay/index.html create mode 100644 files/es/web/css/animation-direction/index.html create mode 100644 files/es/web/css/animation-duration/index.html create mode 100644 files/es/web/css/animation-fill-mode/index.html create mode 100644 files/es/web/css/animation-iteration-count/index.html create mode 100644 files/es/web/css/animation-name/index.html create mode 100644 files/es/web/css/animation-play-state/index.html create mode 100644 files/es/web/css/animation-timing-function/index.html create mode 100644 files/es/web/css/animation/index.html create mode 100644 files/es/web/css/appearance/index.html create mode 100644 files/es/web/css/at-rule/index.html create mode 100644 files/es/web/css/attr()/index.html create mode 100644 files/es/web/css/auto/index.html create mode 100644 files/es/web/css/azimuth/index.html create mode 100644 files/es/web/css/backdrop-filter/index.html create mode 100644 files/es/web/css/backface-visibility/index.html create mode 100644 files/es/web/css/background-attachment/index.html create mode 100644 files/es/web/css/background-blend-mode/index.html create mode 100644 files/es/web/css/background-clip/index.html create mode 100644 files/es/web/css/background-color/index.html create mode 100644 files/es/web/css/background-image/index.html create mode 100644 files/es/web/css/background-origin/index.html create mode 100644 files/es/web/css/background-position-x/index.html create mode 100644 files/es/web/css/background-position/index.html create mode 100644 files/es/web/css/background-repeat/index.html create mode 100644 files/es/web/css/background-size/index.html create mode 100644 files/es/web/css/background/index.html create mode 100644 files/es/web/css/basic-shape/index.html create mode 100644 files/es/web/css/blend-mode/index.html create mode 100644 files/es/web/css/block-size/index.html create mode 100644 files/es/web/css/border-block-color/index.html create mode 100644 files/es/web/css/border-block-end-color/index.html create mode 100644 files/es/web/css/border-block-end-style/index.html create mode 100644 files/es/web/css/border-block-end-width/index.html create mode 100644 files/es/web/css/border-block-end/index.html create mode 100644 files/es/web/css/border-block-start-color/index.html create mode 100644 files/es/web/css/border-block-start-style/index.html create mode 100644 files/es/web/css/border-block-start-width/index.html create mode 100644 files/es/web/css/border-block-start/index.html create mode 100644 files/es/web/css/border-block-style/index.html create mode 100644 files/es/web/css/border-block-width/index.html create mode 100644 files/es/web/css/border-block/index.html create mode 100644 files/es/web/css/border-bottom-color/index.html create mode 100644 files/es/web/css/border-bottom-left-radius/index.html create mode 100644 files/es/web/css/border-bottom-right-radius/index.html create mode 100644 files/es/web/css/border-bottom-style/index.html create mode 100644 files/es/web/css/border-bottom-width/index.html create mode 100644 files/es/web/css/border-bottom/index.html create mode 100644 files/es/web/css/border-collapse/index.html create mode 100644 files/es/web/css/border-color/index.html create mode 100644 files/es/web/css/border-end-end-radius/index.html create mode 100644 files/es/web/css/border-end-start-radius/index.html create mode 100644 files/es/web/css/border-image-outset/index.html create mode 100644 files/es/web/css/border-image-repeat/index.html create mode 100644 files/es/web/css/border-image-slice/index.html create mode 100644 files/es/web/css/border-image/index.html create mode 100644 files/es/web/css/border-inline-color/index.html create mode 100644 files/es/web/css/border-inline-end-color/index.html create mode 100644 files/es/web/css/border-inline-end-style/index.html create mode 100644 files/es/web/css/border-inline-end-width/index.html create mode 100644 files/es/web/css/border-inline-end/index.html create mode 100644 files/es/web/css/border-inline-start-color/index.html create mode 100644 files/es/web/css/border-inline-start-style/index.html create mode 100644 files/es/web/css/border-inline-start-width/index.html create mode 100644 files/es/web/css/border-inline-start/index.html create mode 100644 files/es/web/css/border-inline-style/index.html create mode 100644 files/es/web/css/border-inline-width/index.html create mode 100644 files/es/web/css/border-inline/index.html create mode 100644 files/es/web/css/border-left-color/index.html create mode 100644 files/es/web/css/border-left/index.html create mode 100644 files/es/web/css/border-radius/index.html create mode 100644 files/es/web/css/border-right/index.html create mode 100644 files/es/web/css/border-spacing/index.html create mode 100644 files/es/web/css/border-start-end-radius/index.html create mode 100644 files/es/web/css/border-start-start-radius/index.html create mode 100644 files/es/web/css/border-style/index.html create mode 100644 files/es/web/css/border-top-color/index.html create mode 100644 files/es/web/css/border-top-left-radius/index.html create mode 100644 files/es/web/css/border-top-right-radius/index.html create mode 100644 files/es/web/css/border-top/index.html create mode 100644 files/es/web/css/border-width/index.html create mode 100644 files/es/web/css/border/index.html create mode 100644 files/es/web/css/bottom/index.html create mode 100644 files/es/web/css/box-shadow/index.html create mode 100644 files/es/web/css/box-sizing/index.html create mode 100644 files/es/web/css/calc()/index.html create mode 100644 files/es/web/css/caret-color/index.html create mode 100644 files/es/web/css/cascade/index.html create mode 100644 files/es/web/css/child_combinator/index.html create mode 100644 files/es/web/css/class_selectors/index.html create mode 100644 files/es/web/css/clear/index.html create mode 100644 files/es/web/css/clip-path/index.html create mode 100644 files/es/web/css/clip/index.html create mode 100644 files/es/web/css/color/index.html create mode 100644 files/es/web/css/color_value/index.html create mode 100644 files/es/web/css/column-count/index.html create mode 100644 files/es/web/css/column-span/index.html create mode 100644 files/es/web/css/columnas_css/index.html create mode 100644 files/es/web/css/comentarios/index.html create mode 100644 files/es/web/css/comenzando_(tutorial_css)/index.html create mode 100644 files/es/web/css/como_iniciar/index.html create mode 100644 files/es/web/css/como_iniciar/por_que_usar_css/index.html create mode 100644 files/es/web/css/como_iniciar/que_es_css/index.html create mode 100644 files/es/web/css/content/index.html create mode 100644 "files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" create mode 100644 files/es/web/css/css_animations/index.html create mode 100644 files/es/web/css/css_animations/tips/index.html create mode 100644 files/es/web/css/css_animations/usando_animaciones_css/index.html create mode 100644 files/es/web/css/css_background_and_borders/border-image_generador/index.html create mode 100644 files/es/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/es/web/css/css_background_and_borders/index.html create mode 100644 files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html create mode 100644 files/es/web/css/css_colors/index.html create mode 100644 files/es/web/css/css_containment/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html create mode 100644 files/es/web/css/css_flow_layout/index.html create mode 100644 files/es/web/css/css_fonts/index.html create mode 100644 files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html create mode 100644 files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html create mode 100644 "files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" create mode 100644 files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html create mode 100644 files/es/web/css/css_grid_layout/index.html create mode 100644 files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html create mode 100644 files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html create mode 100644 files/es/web/css/css_logical_properties/basic_concepts/index.html create mode 100644 files/es/web/css/css_logical_properties/dimensionamiento/index.html create mode 100644 files/es/web/css/css_logical_properties/floating_and_positioning/index.html create mode 100644 files/es/web/css/css_logical_properties/index.html create mode 100644 files/es/web/css/css_logical_properties/margins_borders_padding/index.html create mode 100644 files/es/web/css/css_modelo_caja/index.html create mode 100644 "files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" create mode 100644 files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html create mode 100644 files/es/web/css/css_motion_path/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/index.html create mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html create mode 100644 files/es/web/css/css_positioning/index.html create mode 100644 files/es/web/css/css_properties_reference/index.html create mode 100644 files/es/web/css/css_reglas_condicionales/index.html create mode 100644 files/es/web/css/css_transforms/index.html create mode 100644 files/es/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/es/web/css/css_transitions/index.html create mode 100644 files/es/web/css/css_types/index.html create mode 100644 files/es/web/css/css_writing_modes/index.html create mode 100644 files/es/web/css/cursor/index.html create mode 100644 files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html create mode 100644 files/es/web/css/descendant_combinator/index.html create mode 100644 files/es/web/css/direction/index.html create mode 100644 files/es/web/css/display/index.html create mode 100644 files/es/web/css/elemento_reemplazo/index.html create mode 100644 files/es/web/css/env()/index.html create mode 100644 files/es/web/css/especificidad/index.html create mode 100644 files/es/web/css/filter-function/blur()/index.html create mode 100644 files/es/web/css/filter-function/brightness()/index.html create mode 100644 files/es/web/css/filter-function/index.html create mode 100644 files/es/web/css/filter-function/url/index.html create mode 100644 files/es/web/css/filter/index.html create mode 100644 files/es/web/css/fit-content/index.html create mode 100644 files/es/web/css/flex-basis/index.html create mode 100644 files/es/web/css/flex-direction/index.html create mode 100644 files/es/web/css/flex-flow/index.html create mode 100644 files/es/web/css/flex-grow/index.html create mode 100644 files/es/web/css/flex-shrink/index.html create mode 100644 files/es/web/css/flex-wrap/index.html create mode 100644 files/es/web/css/flex/index.html create mode 100644 files/es/web/css/float/index.html create mode 100644 files/es/web/css/font-family/index.html create mode 100644 files/es/web/css/font-size-adjust/index.html create mode 100644 files/es/web/css/font-size/index.html create mode 100644 files/es/web/css/font-style/index.html create mode 100644 files/es/web/css/font-variant-alternates/index.html create mode 100644 files/es/web/css/font-variant/index.html create mode 100644 files/es/web/css/font-weight/index.html create mode 100644 files/es/web/css/font/index.html create mode 100644 files/es/web/css/frequency/index.html create mode 100644 files/es/web/css/gradiente/index.html create mode 100644 files/es/web/css/grid-auto-columns/index.html create mode 100644 files/es/web/css/grid-auto-rows/index.html create mode 100644 files/es/web/css/grid-column-gap/index.html create mode 100644 files/es/web/css/grid-gap/index.html create mode 100644 files/es/web/css/grid-template-areas/index.html create mode 100644 files/es/web/css/grid-template-columns/index.html create mode 100644 files/es/web/css/grid-template-rows/index.html create mode 100644 files/es/web/css/grid/index.html create mode 100644 files/es/web/css/height/index.html create mode 100644 files/es/web/css/herramientas/cubic_bezier_generator/index.html create mode 100644 files/es/web/css/herramientas/index.html create mode 100644 files/es/web/css/hyphens/index.html create mode 100644 files/es/web/css/id_selectors/index.html create mode 100644 files/es/web/css/image-rendering/index.html create mode 100644 files/es/web/css/image/index.html create mode 100644 files/es/web/css/ime-mode/index.html create mode 100644 files/es/web/css/index.html create mode 100644 files/es/web/css/inherit/index.html create mode 100644 files/es/web/css/inheritance/index.html create mode 100644 files/es/web/css/initial/index.html create mode 100644 files/es/web/css/inline-size/index.html create mode 100644 files/es/web/css/inset-block-end/index.html create mode 100644 files/es/web/css/inset-block-start/index.html create mode 100644 files/es/web/css/inset-block/index.html create mode 100644 files/es/web/css/inset-inline-end/index.html create mode 100644 files/es/web/css/inset-inline-start/index.html create mode 100644 files/es/web/css/inset-inline/index.html create mode 100644 files/es/web/css/inset/index.html create mode 100644 files/es/web/css/integer/index.html create mode 100644 "files/es/web/css/introducci\303\263n/boxes/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/color/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/how_css_works/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/layout/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/media/index.html" create mode 100644 "files/es/web/css/introducci\303\263n/selectors/index.html" create mode 100644 files/es/web/css/isolation/index.html create mode 100644 files/es/web/css/justify-content/index.html create mode 100644 files/es/web/css/layout_cookbook/index.html create mode 100644 files/es/web/css/layout_mode/index.html create mode 100644 files/es/web/css/left/index.html create mode 100644 files/es/web/css/length/index.html create mode 100644 files/es/web/css/line-height/index.html create mode 100644 files/es/web/css/linear-gradient()/index.html create mode 100644 files/es/web/css/list-style-image/index.html create mode 100644 files/es/web/css/list-style-position/index.html create mode 100644 files/es/web/css/list-style-type/index.html create mode 100644 files/es/web/css/list-style/index.html create mode 100644 files/es/web/css/margin-block-start/index.html create mode 100644 files/es/web/css/margin-block/index.html create mode 100644 files/es/web/css/margin-bottom/index.html create mode 100644 files/es/web/css/margin-inline-end/index.html create mode 100644 files/es/web/css/margin-inline-start/index.html create mode 100644 files/es/web/css/margin-inline/index.html create mode 100644 files/es/web/css/margin-right/index.html create mode 100644 files/es/web/css/margin/index.html create mode 100644 files/es/web/css/max-block-size/index.html create mode 100644 files/es/web/css/max-height/index.html create mode 100644 files/es/web/css/max-inline-size/index.html create mode 100644 files/es/web/css/max-width/index.html create mode 100644 files/es/web/css/media_queries/index.html create mode 100644 files/es/web/css/min()/index.html create mode 100644 files/es/web/css/min-block-size/index.html create mode 100644 files/es/web/css/min-height/index.html create mode 100644 files/es/web/css/min-inline-size/index.html create mode 100644 files/es/web/css/min-width/index.html create mode 100644 files/es/web/css/minmax()/index.html create mode 100644 files/es/web/css/mozilla_extensions/index.html create mode 100644 files/es/web/css/normal/index.html create mode 100644 files/es/web/css/number/index.html create mode 100644 files/es/web/css/object-fit/index.html create mode 100644 files/es/web/css/object-position/index.html create mode 100644 files/es/web/css/opacity/index.html create mode 100644 files/es/web/css/order/index.html create mode 100644 files/es/web/css/outline-color/index.html create mode 100644 files/es/web/css/outline-offset/index.html create mode 100644 files/es/web/css/outline-style/index.html create mode 100644 files/es/web/css/outline-width/index.html create mode 100644 files/es/web/css/outline/index.html create mode 100644 files/es/web/css/overflow-y/index.html create mode 100644 files/es/web/css/overflow/index.html create mode 100644 files/es/web/css/padding-block-end/index.html create mode 100644 files/es/web/css/padding-block-start/index.html create mode 100644 files/es/web/css/padding-block/index.html create mode 100644 files/es/web/css/padding-bottom/index.html create mode 100644 files/es/web/css/padding-inline-end/index.html create mode 100644 files/es/web/css/padding-inline-start/index.html create mode 100644 files/es/web/css/padding-inline/index.html create mode 100644 files/es/web/css/padding-top/index.html create mode 100644 files/es/web/css/padding/index.html create mode 100644 files/es/web/css/perspective/index.html create mode 100644 files/es/web/css/porcentaje/index.html create mode 100644 files/es/web/css/position/index.html create mode 100644 files/es/web/css/preguntas_frecuentes_sobre_css/index.html create mode 100644 files/es/web/css/primeros_pasos/index.html create mode 100644 files/es/web/css/pseudo-classes/index.html create mode 100644 files/es/web/css/pseudoelementos/index.html create mode 100644 files/es/web/css/quotes/index.html create mode 100644 files/es/web/css/radial-gradient()/index.html create mode 100644 files/es/web/css/referencia_css/index.html create mode 100644 files/es/web/css/referencia_css/mix-blend-mode/index.html create mode 100644 files/es/web/css/repeat()/index.html create mode 100644 files/es/web/css/resize/index.html create mode 100644 "files/es/web/css/resoluci\303\263n/index.html" create mode 100644 files/es/web/css/resolved_value/index.html create mode 100644 files/es/web/css/right/index.html create mode 100644 files/es/web/css/rtl/index.html create mode 100644 files/es/web/css/scroll-behavior/index.html create mode 100644 files/es/web/css/selectores_atributo/index.html create mode 100644 files/es/web/css/selectores_css/index.html create mode 100644 files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html create mode 100644 files/es/web/css/selectores_hermanos_adyacentes/index.html create mode 100644 files/es/web/css/selectores_hermanos_generales/index.html create mode 100644 files/es/web/css/shorthand_properties/index.html create mode 100644 "files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" create mode 100644 files/es/web/css/specified_value/index.html create mode 100644 files/es/web/css/syntax/index.html create mode 100644 files/es/web/css/text-decoration-color/index.html create mode 100644 files/es/web/css/text-decoration-line/index.html create mode 100644 files/es/web/css/text-decoration-style/index.html create mode 100644 files/es/web/css/text-decoration/index.html create mode 100644 files/es/web/css/text-emphasis-color/index.html create mode 100644 files/es/web/css/text-emphasis/index.html create mode 100644 files/es/web/css/text-orientation/index.html create mode 100644 files/es/web/css/text-overflow/index.html create mode 100644 files/es/web/css/text-shadow/index.html create mode 100644 files/es/web/css/text-transform/index.html create mode 100644 files/es/web/css/texto_css/index.html create mode 100644 files/es/web/css/time/index.html create mode 100644 files/es/web/css/top/index.html create mode 100644 files/es/web/css/transform-function/index.html create mode 100644 files/es/web/css/transform-function/rotate()/index.html create mode 100644 files/es/web/css/transform-function/rotate3d()/index.html create mode 100644 files/es/web/css/transform-function/scale()/index.html create mode 100644 files/es/web/css/transform-function/translate()/index.html create mode 100644 files/es/web/css/transform-function/translatey()/index.html create mode 100644 files/es/web/css/transform-function/translatez()/index.html create mode 100644 files/es/web/css/transform-origin/index.html create mode 100644 files/es/web/css/transform-style/index.html create mode 100644 files/es/web/css/transform/index.html create mode 100644 files/es/web/css/transiciones_de_css/index.html create mode 100644 files/es/web/css/transition-delay/index.html create mode 100644 files/es/web/css/transition-duration/index.html create mode 100644 files/es/web/css/transition-property/index.html create mode 100644 files/es/web/css/transition/index.html create mode 100644 files/es/web/css/tutorials/index.html create mode 100644 files/es/web/css/type_selectors/index.html create mode 100644 files/es/web/css/universal_selectors/index.html create mode 100644 files/es/web/css/user-select/index.html create mode 100644 files/es/web/css/using_css_custom_properties/index.html create mode 100644 files/es/web/css/valor_calculado/index.html create mode 100644 files/es/web/css/valor_inicial/index.html create mode 100644 files/es/web/css/var()/index.html create mode 100644 files/es/web/css/vertical-align/index.html create mode 100644 files/es/web/css/visibility/index.html create mode 100644 files/es/web/css/white-space/index.html create mode 100644 files/es/web/css/widows/index.html create mode 100644 files/es/web/css/width/index.html create mode 100644 files/es/web/css/writing-mode/index.html create mode 100644 files/es/web/css/z-index/index.html create mode 100644 files/es/web/css/zoom/index.html create mode 100644 files/es/web/demos_of_open_web_technologies/index.html create mode 100644 files/es/web/events/abort/index.html create mode 100644 files/es/web/events/animationend/index.html create mode 100644 files/es/web/events/beforeunload/index.html create mode 100644 files/es/web/events/blur/index.html create mode 100644 files/es/web/events/domcontentloaded/index.html create mode 100644 files/es/web/events/domsubtreemodified/index.html create mode 100644 files/es/web/events/index.html create mode 100644 files/es/web/events/load/index.html create mode 100644 files/es/web/events/loadend/index.html create mode 100644 files/es/web/events/pointerlockchange/index.html create mode 100644 files/es/web/events/transitioncancel/index.html create mode 100644 files/es/web/events/transitionend/index.html create mode 100644 files/es/web/exslt/exsl/index.html create mode 100644 files/es/web/exslt/exsl/node-set/index.html create mode 100644 files/es/web/exslt/exsl/object-type/index.html create mode 100644 files/es/web/exslt/index.html create mode 100644 files/es/web/exslt/math/highest/index.html create mode 100644 files/es/web/exslt/math/index.html create mode 100644 files/es/web/exslt/math/lowest/index.html create mode 100644 files/es/web/exslt/math/max/index.html create mode 100644 files/es/web/exslt/math/min/index.html create mode 100644 files/es/web/exslt/regexp/index.html create mode 100644 files/es/web/exslt/regexp/match/index.html create mode 100644 files/es/web/exslt/regexp/replace/index.html create mode 100644 files/es/web/exslt/regexp/test/index.html create mode 100644 files/es/web/exslt/set/difference/index.html create mode 100644 files/es/web/exslt/set/distinct/index.html create mode 100644 files/es/web/exslt/set/has-same-node/index.html create mode 100644 files/es/web/exslt/set/index.html create mode 100644 files/es/web/exslt/set/intersection/index.html create mode 100644 files/es/web/exslt/set/leading/index.html create mode 100644 files/es/web/exslt/set/trailing/index.html create mode 100644 files/es/web/exslt/str/concat/index.html create mode 100644 files/es/web/exslt/str/index.html create mode 100644 files/es/web/exslt/str/split/index.html create mode 100644 files/es/web/exslt/str/tokenize/index.html create mode 100644 files/es/web/guide/ajax/comunidad/index.html create mode 100644 files/es/web/guide/ajax/index.html create mode 100644 files/es/web/guide/ajax/primeros_pasos/index.html create mode 100644 files/es/web/guide/api/camera/index.html create mode 100644 files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html create mode 100644 files/es/web/guide/api/index.html create mode 100644 files/es/web/guide/api/vibration/index.html create mode 100644 files/es/web/guide/css/block_formatting_context/index.html create mode 100644 files/es/web/guide/css/probando_media_queries/index.html create mode 100644 "files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" create mode 100644 files/es/web/guide/dom/events/eventos_controlador/index.html create mode 100644 files/es/web/guide/dom/events/index.html create mode 100644 files/es/web/guide/dom/index.html create mode 100644 files/es/web/guide/graphics/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/basic_animations/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/basic_usage/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html create mode 100644 files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html create mode 100644 files/es/web/guide/html/categorias_de_contenido/index.html create mode 100644 files/es/web/guide/html/editable_content/index.html create mode 100644 files/es/web/guide/html/introduction_alhtml_clone/index.html create mode 100644 files/es/web/guide/index.html create mode 100644 files/es/web/guide/movil/index.html create mode 100644 files/es/web/guide/parsing_and_serializing_xml/index.html create mode 100644 files/es/web/guide/performance/index.html create mode 100644 files/es/web/guide/performance/usando_web_workers/index.html create mode 100644 files/es/web/guide/usando_objetos_formdata/index.html create mode 100644 files/es/web/html/anipular_video_por_medio_de_canvas/index.html create mode 100644 files/es/web/html/atributos/accept/index.html create mode 100644 files/es/web/html/atributos/autocomplete/index.html create mode 100644 files/es/web/html/atributos/index.html create mode 100644 files/es/web/html/atributos/min/index.html create mode 100644 files/es/web/html/atributos/minlength/index.html create mode 100644 files/es/web/html/atributos/multiple/index.html create mode 100644 files/es/web/html/atributos_de_configuracion_cors/index.html create mode 100644 files/es/web/html/atributos_globales/accesskey/index.html create mode 100644 files/es/web/html/atributos_globales/autocapitalize/index.html create mode 100644 files/es/web/html/atributos_globales/class/index.html create mode 100644 files/es/web/html/atributos_globales/contenteditable/index.html create mode 100644 files/es/web/html/atributos_globales/contextmenu/index.html create mode 100644 files/es/web/html/atributos_globales/data-_star_/index.html create mode 100644 files/es/web/html/atributos_globales/dir/index.html create mode 100644 files/es/web/html/atributos_globales/draggable/index.html create mode 100644 files/es/web/html/atributos_globales/dropzone/index.html create mode 100644 files/es/web/html/atributos_globales/hidden/index.html create mode 100644 files/es/web/html/atributos_globales/id/index.html create mode 100644 files/es/web/html/atributos_globales/index.html create mode 100644 files/es/web/html/atributos_globales/is/index.html create mode 100644 files/es/web/html/atributos_globales/itemid/index.html create mode 100644 files/es/web/html/atributos_globales/itemprop/index.html create mode 100644 files/es/web/html/atributos_globales/itemref/index.html create mode 100644 files/es/web/html/atributos_globales/itemscope/index.html create mode 100644 files/es/web/html/atributos_globales/lang/index.html create mode 100644 files/es/web/html/atributos_globales/slot/index.html create mode 100644 files/es/web/html/atributos_globales/spellcheck/index.html create mode 100644 files/es/web/html/atributos_globales/style/index.html create mode 100644 files/es/web/html/atributos_globales/tabindex/index.html create mode 100644 files/es/web/html/atributos_globales/title/index.html create mode 100644 files/es/web/html/atributos_globales/translate/index.html create mode 100644 files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html create mode 100644 files/es/web/html/block-level_elements/index.html create mode 100644 files/es/web/html/canvas/a_basic_ray-caster/index.html create mode 100644 files/es/web/html/canvas/drawing_graphics_with_canvas/index.html create mode 100644 files/es/web/html/canvas/index.html create mode 100644 "files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" create mode 100644 files/es/web/html/elemento/a/index.html create mode 100644 files/es/web/html/elemento/abbr/index.html create mode 100644 files/es/web/html/elemento/acronym/index.html create mode 100644 files/es/web/html/elemento/address/index.html create mode 100644 files/es/web/html/elemento/applet/index.html create mode 100644 files/es/web/html/elemento/area/index.html create mode 100644 files/es/web/html/elemento/article/index.html create mode 100644 files/es/web/html/elemento/aside/index.html create mode 100644 files/es/web/html/elemento/audio/index.html create mode 100644 files/es/web/html/elemento/b/index.html create mode 100644 files/es/web/html/elemento/base/index.html create mode 100644 files/es/web/html/elemento/basefont/index.html create mode 100644 files/es/web/html/elemento/bdi/index.html create mode 100644 files/es/web/html/elemento/bdo/index.html create mode 100644 files/es/web/html/elemento/bgsound/index.html create mode 100644 files/es/web/html/elemento/big/index.html create mode 100644 files/es/web/html/elemento/blink/index.html create mode 100644 files/es/web/html/elemento/blockquote/index.html create mode 100644 files/es/web/html/elemento/body/index.html create mode 100644 files/es/web/html/elemento/br/index.html create mode 100644 files/es/web/html/elemento/button/index.html create mode 100644 files/es/web/html/elemento/canvas/index.html create mode 100644 files/es/web/html/elemento/caption/index.html create mode 100644 files/es/web/html/elemento/center/index.html create mode 100644 files/es/web/html/elemento/cite/index.html create mode 100644 files/es/web/html/elemento/code/index.html create mode 100644 files/es/web/html/elemento/col/index.html create mode 100644 files/es/web/html/elemento/colgroup/index.html create mode 100644 files/es/web/html/elemento/command/index.html create mode 100644 files/es/web/html/elemento/content/index.html create mode 100644 files/es/web/html/elemento/data/index.html create mode 100644 files/es/web/html/elemento/datalist/index.html create mode 100644 files/es/web/html/elemento/dd/index.html create mode 100644 files/es/web/html/elemento/del/index.html create mode 100644 files/es/web/html/elemento/details/index.html create mode 100644 files/es/web/html/elemento/dfn/index.html create mode 100644 files/es/web/html/elemento/dialog/index.html create mode 100644 files/es/web/html/elemento/dir/index.html create mode 100644 files/es/web/html/elemento/div/index.html create mode 100644 files/es/web/html/elemento/dl/index.html create mode 100644 files/es/web/html/elemento/dt/index.html create mode 100644 files/es/web/html/elemento/element/index.html create mode 100644 "files/es/web/html/elemento/elementos_t\303\255tulos/index.html" create mode 100644 files/es/web/html/elemento/em/index.html create mode 100644 files/es/web/html/elemento/embed/index.html create mode 100644 files/es/web/html/elemento/etiqueta_personalizada_html5/index.html create mode 100644 files/es/web/html/elemento/fieldset/index.html create mode 100644 files/es/web/html/elemento/figcaption/index.html create mode 100644 files/es/web/html/elemento/figure/index.html create mode 100644 files/es/web/html/elemento/font/index.html create mode 100644 files/es/web/html/elemento/footer/index.html create mode 100644 files/es/web/html/elemento/form/index.html create mode 100644 files/es/web/html/elemento/frame/index.html create mode 100644 files/es/web/html/elemento/frameset/index.html create mode 100644 files/es/web/html/elemento/head/index.html create mode 100644 files/es/web/html/elemento/header/index.html create mode 100644 files/es/web/html/elemento/hgroup/index.html create mode 100644 files/es/web/html/elemento/hr/index.html create mode 100644 files/es/web/html/elemento/html/index.html create mode 100644 files/es/web/html/elemento/i/index.html create mode 100644 files/es/web/html/elemento/iframe/index.html create mode 100644 files/es/web/html/elemento/image/index.html create mode 100644 files/es/web/html/elemento/img/index.html create mode 100644 files/es/web/html/elemento/index.html create mode 100644 "files/es/web/html/elemento/input/bot\303\263n/index.html" create mode 100644 files/es/web/html/elemento/input/checkbox/index.html create mode 100644 files/es/web/html/elemento/input/color/index.html create mode 100644 files/es/web/html/elemento/input/date/index.html create mode 100644 files/es/web/html/elemento/input/datetime/index.html create mode 100644 files/es/web/html/elemento/input/email/index.html create mode 100644 files/es/web/html/elemento/input/hidden/index.html create mode 100644 files/es/web/html/elemento/input/index.html create mode 100644 files/es/web/html/elemento/input/number/index.html create mode 100644 files/es/web/html/elemento/input/password/index.html create mode 100644 files/es/web/html/elemento/input/range/index.html create mode 100644 files/es/web/html/elemento/input/text/index.html create mode 100644 files/es/web/html/elemento/ins/index.html create mode 100644 files/es/web/html/elemento/isindex/index.html create mode 100644 files/es/web/html/elemento/kbd/index.html create mode 100644 files/es/web/html/elemento/keygen/index.html create mode 100644 files/es/web/html/elemento/label/index.html create mode 100644 files/es/web/html/elemento/legend/index.html create mode 100644 files/es/web/html/elemento/li/index.html create mode 100644 files/es/web/html/elemento/link/index.html create mode 100644 files/es/web/html/elemento/main/index.html create mode 100644 files/es/web/html/elemento/map/index.html create mode 100644 files/es/web/html/elemento/mark/index.html create mode 100644 files/es/web/html/elemento/marquee/index.html create mode 100644 files/es/web/html/elemento/menu/index.html create mode 100644 files/es/web/html/elemento/meta/index.html create mode 100644 files/es/web/html/elemento/multicol/index.html create mode 100644 files/es/web/html/elemento/nav/index.html create mode 100644 files/es/web/html/elemento/nobr/index.html create mode 100644 files/es/web/html/elemento/noframes/index.html create mode 100644 files/es/web/html/elemento/noscript/index.html create mode 100644 files/es/web/html/elemento/object/index.html create mode 100644 files/es/web/html/elemento/ol/index.html create mode 100644 files/es/web/html/elemento/option/index.html create mode 100644 files/es/web/html/elemento/p/index.html create mode 100644 files/es/web/html/elemento/param/index.html create mode 100644 files/es/web/html/elemento/picture/index.html create mode 100644 files/es/web/html/elemento/pre/index.html create mode 100644 files/es/web/html/elemento/progress/index.html create mode 100644 files/es/web/html/elemento/q/index.html create mode 100644 files/es/web/html/elemento/s/index.html create mode 100644 files/es/web/html/elemento/samp/index.html create mode 100644 files/es/web/html/elemento/script/index.html create mode 100644 files/es/web/html/elemento/section/index.html create mode 100644 files/es/web/html/elemento/select/index.html create mode 100644 files/es/web/html/elemento/shadow/index.html create mode 100644 files/es/web/html/elemento/slot/index.html create mode 100644 files/es/web/html/elemento/small/index.html create mode 100644 files/es/web/html/elemento/source/index.html create mode 100644 files/es/web/html/elemento/span/index.html create mode 100644 files/es/web/html/elemento/strike/index.html create mode 100644 files/es/web/html/elemento/strong/index.html create mode 100644 files/es/web/html/elemento/style/index.html create mode 100644 files/es/web/html/elemento/sub/index.html create mode 100644 files/es/web/html/elemento/sup/index.html create mode 100644 files/es/web/html/elemento/table/index.html create mode 100644 files/es/web/html/elemento/td/index.html create mode 100644 files/es/web/html/elemento/template/index.html create mode 100644 files/es/web/html/elemento/textarea/index.html create mode 100644 files/es/web/html/elemento/th/index.html create mode 100644 files/es/web/html/elemento/time/index.html create mode 100644 files/es/web/html/elemento/tipos_de_elementos/index.html create mode 100644 files/es/web/html/elemento/title/index.html create mode 100644 files/es/web/html/elemento/tr/index.html create mode 100644 files/es/web/html/elemento/track/index.html create mode 100644 files/es/web/html/elemento/tt/index.html create mode 100644 files/es/web/html/elemento/u/index.html create mode 100644 files/es/web/html/elemento/ul/index.html create mode 100644 files/es/web/html/elemento/var/index.html create mode 100644 files/es/web/html/elemento/video/index.html create mode 100644 files/es/web/html/elemento/wbr/index.html create mode 100644 files/es/web/html/elemento/xmp/index.html create mode 100644 "files/es/web/html/elementos_en_l\303\255nea/index.html" create mode 100644 files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html create mode 100644 files/es/web/html/imagen_con_cors_habilitado/index.html create mode 100644 files/es/web/html/index.html create mode 100644 files/es/web/html/la_importancia_de_comentar_correctamente/index.html create mode 100644 files/es/web/html/microdatos/index.html create mode 100644 files/es/web/html/microformatos/index.html create mode 100644 files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html create mode 100644 files/es/web/html/quirks_mode_and_standards_mode/index.html create mode 100644 files/es/web/html/recursos_offline_en_firefox/index.html create mode 100644 files/es/web/html/referencia/index.html create mode 100644 files/es/web/html/tipos_de_enlaces/index.html create mode 100644 files/es/web/html/transision_adaptativa_dash/index.html create mode 100644 files/es/web/html/usando_audio_y_video_con_html5/index.html create mode 100644 "files/es/web/html/\303\255ndice/index.html" create mode 100644 files/es/web/http/access_control_cors/index.html create mode 100644 files/es/web/http/authentication/index.html create mode 100644 files/es/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.html create mode 100644 files/es/web/http/basics_of_http/datos_uris/index.html create mode 100644 files/es/web/http/basics_of_http/evolution_of_http/index.html create mode 100644 "files/es/web/http/basics_of_http/identificaci\303\263n_recursos_en_la_web/index.html" create mode 100644 files/es/web/http/basics_of_http/index.html create mode 100644 files/es/web/http/basics_of_http/mime_types/common_types/index.html create mode 100644 files/es/web/http/basics_of_http/mime_types/index.html create mode 100644 files/es/web/http/caching/index.html create mode 100644 files/es/web/http/cookies/index.html create mode 100644 files/es/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/es/web/http/cors/errors/corsmissingalloworigin/index.html create mode 100644 files/es/web/http/cors/errors/corsnotsupportingcredentials/index.html create mode 100644 files/es/web/http/cors/errors/corspreflightdidnotsucceed/index.html create mode 100644 files/es/web/http/cors/errors/corsrequestnothttp/index.html create mode 100644 files/es/web/http/cors/errors/index.html create mode 100644 files/es/web/http/csp/index.html create mode 100644 files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html create mode 100644 files/es/web/http/headers/accept-charset/index.html create mode 100644 files/es/web/http/headers/accept-ranges/index.html create mode 100644 files/es/web/http/headers/accept/index.html create mode 100644 files/es/web/http/headers/access-control-allow-credentials/index.html create mode 100644 files/es/web/http/headers/access-control-allow-headers/index.html create mode 100644 files/es/web/http/headers/access-control-allow-methods/index.html create mode 100644 files/es/web/http/headers/access-control-allow-origin/index.html create mode 100644 files/es/web/http/headers/access-control-expose-headers/index.html create mode 100644 files/es/web/http/headers/age/index.html create mode 100644 files/es/web/http/headers/allow/index.html create mode 100644 files/es/web/http/headers/authorization/index.html create mode 100644 files/es/web/http/headers/cache-control/index.html create mode 100644 files/es/web/http/headers/content-disposition/index.html create mode 100644 files/es/web/http/headers/content-encoding/index.html create mode 100644 files/es/web/http/headers/content-length/index.html create mode 100644 files/es/web/http/headers/content-location/index.html create mode 100644 files/es/web/http/headers/content-security-policy/index.html create mode 100644 files/es/web/http/headers/content-type/index.html create mode 100644 files/es/web/http/headers/cookie/index.html create mode 100644 files/es/web/http/headers/cross-origin-resource-policy/index.html create mode 100644 files/es/web/http/headers/etag/index.html create mode 100644 files/es/web/http/headers/expires/index.html create mode 100644 files/es/web/http/headers/host/index.html create mode 100644 files/es/web/http/headers/index.html create mode 100644 files/es/web/http/headers/keep-alive/index.html create mode 100644 files/es/web/http/headers/link/index.html create mode 100644 files/es/web/http/headers/origin/index.html create mode 100644 files/es/web/http/headers/pragma/index.html create mode 100644 files/es/web/http/headers/referer/index.html create mode 100644 files/es/web/http/headers/referrer-policy/index.html create mode 100644 files/es/web/http/headers/server/index.html create mode 100644 files/es/web/http/headers/set-cookie/index.html create mode 100644 files/es/web/http/headers/strict-transport-security/index.html create mode 100644 files/es/web/http/headers/transfer-encoding/index.html create mode 100644 files/es/web/http/headers/user-agent/index.html create mode 100644 files/es/web/http/headers/vary/index.html create mode 100644 files/es/web/http/headers/www-authenticate/index.html create mode 100644 files/es/web/http/headers/x-content-type-options/index.html create mode 100644 files/es/web/http/headers/x-forwarded-for/index.html create mode 100644 files/es/web/http/headers/x-frame-options/index.html create mode 100644 files/es/web/http/headers/x-xss-protection/index.html create mode 100644 files/es/web/http/index.html create mode 100644 files/es/web/http/mecanismo_actualizacion_protocolo/index.html create mode 100644 files/es/web/http/messages/index.html create mode 100644 files/es/web/http/methods/connect/index.html create mode 100644 files/es/web/http/methods/get/index.html create mode 100644 files/es/web/http/methods/index.html create mode 100644 files/es/web/http/methods/patch/index.html create mode 100644 files/es/web/http/methods/post/index.html create mode 100644 files/es/web/http/methods/put/index.html create mode 100644 files/es/web/http/methods/trace/index.html create mode 100644 files/es/web/http/overview/index.html create mode 100644 files/es/web/http/peticiones_condicionales/index.html create mode 100644 files/es/web/http/recursos_y_especificaciones/index.html create mode 100644 "files/es/web/http/sesi\303\263n/index.html" create mode 100644 files/es/web/http/status/100/index.html create mode 100644 files/es/web/http/status/101/index.html create mode 100644 files/es/web/http/status/200/index.html create mode 100644 files/es/web/http/status/201/index.html create mode 100644 files/es/web/http/status/202/index.html create mode 100644 files/es/web/http/status/203/index.html create mode 100644 files/es/web/http/status/206/index.html create mode 100644 files/es/web/http/status/301/index.html create mode 100644 files/es/web/http/status/302/index.html create mode 100644 files/es/web/http/status/304/index.html create mode 100644 files/es/web/http/status/400/index.html create mode 100644 files/es/web/http/status/401/index.html create mode 100644 files/es/web/http/status/403/index.html create mode 100644 files/es/web/http/status/404/index.html create mode 100644 files/es/web/http/status/408/index.html create mode 100644 files/es/web/http/status/418/index.html create mode 100644 files/es/web/http/status/500/index.html create mode 100644 files/es/web/http/status/502/index.html create mode 100644 files/es/web/http/status/503/index.html create mode 100644 files/es/web/http/status/504/index.html create mode 100644 files/es/web/http/status/505/index.html create mode 100644 files/es/web/http/status/8080/index.html create mode 100644 files/es/web/http/status/index.html create mode 100644 files/es/web/index.html create mode 100644 files/es/web/javascript/acerca_de_javascript/index.html create mode 100644 files/es/web/javascript/closures/index.html create mode 100644 files/es/web/javascript/data_structures/index.html create mode 100644 "files/es/web/javascript/descripci\303\263n_de_las_tecnolog\303\255as_javascript/index.html" create mode 100644 files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html create mode 100644 files/es/web/javascript/equality_comparisons_and_sameness/index.html create mode 100644 files/es/web/javascript/eventloop/index.html create mode 100644 files/es/web/javascript/gestion_de_memoria/index.html create mode 100644 "files/es/web/javascript/guide/bucles_e_iteraci\303\263n/index.html" create mode 100644 files/es/web/javascript/guide/colecciones_indexadas/index.html create mode 100644 files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html create mode 100644 files/es/web/javascript/guide/details_of_the_object_model/index.html create mode 100644 files/es/web/javascript/guide/expressions_and_operators/index.html create mode 100644 files/es/web/javascript/guide/funciones/index.html create mode 100644 files/es/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/es/web/javascript/guide/index.html create mode 100644 "files/es/web/javascript/guide/introducci\303\263n/index.html" create mode 100644 files/es/web/javascript/guide/iterators_and_generators/index.html create mode 100644 files/es/web/javascript/guide/keyed_collections/index.html create mode 100644 files/es/web/javascript/guide/meta_programming/index.html create mode 100644 "files/es/web/javascript/guide/m\303\263dulos/index.html" create mode 100644 files/es/web/javascript/guide/numbers_and_dates/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/aserciones/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/index.html create mode 100644 files/es/web/javascript/guide/text_formatting/index.html create mode 100644 files/es/web/javascript/guide/trabajando_con_objectos/index.html create mode 100644 files/es/web/javascript/guide/usar_promesas/index.html create mode 100644 files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html create mode 100644 files/es/web/javascript/index.html create mode 100644 "files/es/web/javascript/introducci\303\263n_a_javascript_orientado_a_objetos/index.html" create mode 100644 files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html create mode 100644 files/es/web/javascript/language_resources/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.1/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.2/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.3/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.5/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.6/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.7/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.8.1/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.8.5/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/1.8/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/ecmascript_5_support_in_mozilla/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/ecmascript_6_support_in_mozilla/index.html create mode 100644 files/es/web/javascript/novedades_en_javascript/index.html create mode 100644 files/es/web/javascript/reference/errors/bad_octal/index.html create mode 100644 files/es/web/javascript/reference/errors/caracter_ilegal/index.html create mode 100644 files/es/web/javascript/reference/errors/deprecated_source_map_pragma/index.html create mode 100644 files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html create mode 100644 files/es/web/javascript/reference/errors/in_operator_no_object/index.html create mode 100644 files/es/web/javascript/reference/errors/index.html create mode 100644 files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html create mode 100644 files/es/web/javascript/reference/errors/invalid_array_length/index.html create mode 100644 files/es/web/javascript/reference/errors/invalid_date/index.html create mode 100644 files/es/web/javascript/reference/errors/malformed_formal_parameter/index.html create mode 100644 files/es/web/javascript/reference/errors/missing_curly_after_property_list/index.html create mode 100644 files/es/web/javascript/reference/errors/missing_formal_parameter/index.html create mode 100644 files/es/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.html create mode 100644 files/es/web/javascript/reference/errors/more_arguments_needed/index.html create mode 100644 files/es/web/javascript/reference/errors/no_variable_name/index.html create mode 100644 files/es/web/javascript/reference/errors/not_a_codepoint/index.html create mode 100644 files/es/web/javascript/reference/errors/not_a_function/index.html create mode 100644 files/es/web/javascript/reference/errors/not_defined/index.html create mode 100644 files/es/web/javascript/reference/errors/precision_range/index.html create mode 100644 files/es/web/javascript/reference/errors/property_access_denied/index.html create mode 100644 files/es/web/javascript/reference/errors/stmt_after_return/index.html create mode 100644 "files/es/web/javascript/reference/errors/strict_y_par\303\241metros_complejos/index.html" create mode 100644 files/es/web/javascript/reference/errors/too_much_recursion/index.html create mode 100644 files/es/web/javascript/reference/errors/undefined_prop/index.html create mode 100644 files/es/web/javascript/reference/errors/unexpected_token/index.html create mode 100644 files/es/web/javascript/reference/errors/unexpected_type/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html create mode 100644 files/es/web/javascript/reference/global_objects/reflect/index.html create mode 100644 files/es/web/javascript/reference/global_objects/reflect/set/index.html create mode 100644 files/es/web/javascript/referencia/acerca_de/index.html create mode 100644 "files/es/web/javascript/referencia/caracter\303\255sticas_desaprobadas/index.html" create mode 100644 "files/es/web/javascript/referencia/caracter\303\255sticas_desaprobadas/the_legacy_iterator_protocol/index.html" create mode 100644 files/es/web/javascript/referencia/classes/class_fields/index.html create mode 100644 files/es/web/javascript/referencia/classes/constructor/index.html create mode 100644 files/es/web/javascript/referencia/classes/extends/index.html create mode 100644 files/es/web/javascript/referencia/classes/index.html create mode 100644 files/es/web/javascript/referencia/classes/private_class_fields/index.html create mode 100644 files/es/web/javascript/referencia/classes/static/index.html create mode 100644 files/es/web/javascript/referencia/funciones/arguments/callee/index.html create mode 100644 files/es/web/javascript/referencia/funciones/arguments/index.html create mode 100644 files/es/web/javascript/referencia/funciones/arguments/length/index.html create mode 100644 files/es/web/javascript/referencia/funciones/arrow_functions/index.html create mode 100644 files/es/web/javascript/referencia/funciones/get/index.html create mode 100644 files/es/web/javascript/referencia/funciones/index.html create mode 100644 files/es/web/javascript/referencia/funciones/method_definitions/index.html create mode 100644 files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html create mode 100644 files/es/web/javascript/referencia/funciones/parametros_rest/index.html create mode 100644 files/es/web/javascript/referencia/funciones/set/index.html create mode 100644 files/es/web/javascript/referencia/gramatica_lexica/index.html create mode 100644 files/es/web/javascript/referencia/index.html create mode 100644 files/es/web/javascript/referencia/iteration_protocols/index.html create mode 100644 files/es/web/javascript/referencia/modo_estricto/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/concat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/entries/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/every/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/fill/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/filter/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/find/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/flat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/from/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/includes/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/join/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/keys/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/length/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/map/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/observe/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/of/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/pop/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/push/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/shift/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/slice/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/some/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/sort/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/splice/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/unobserve/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/array/values/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getday/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/now/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/parse/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/date/utc/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/filename/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/message/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/name/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/escape/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/eval/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/evalerror/index.html create mode 100644 "files/es/web/javascript/referencia/objetos_globales/funcionesas\303\255ncronas/index.html" create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/apply/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/arity/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/bind/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/call/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/caller/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html create mode 100644 "files/es/web/javascript/referencia/objetos_globales/function/funci\303\263n/index.html" create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/isgenerator/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/length/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/name/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/next/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/return/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/infinity/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/internalerror/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/isfinite/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/isnan/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/json/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/json/parse/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/clear/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/delete/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/entries/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/get/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/has/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/keys/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/set/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/size/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/map/values/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/abs/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/acos/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/asin/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atan/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/cos/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/e/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/exp/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/floor/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/fround/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log10/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log2/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/max/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/min/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/pi/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/pow/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/random/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/round/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/seno/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sign/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/tan/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/nan/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/null/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/nan/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/assign/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/count/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/create/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/entries/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getnotifier/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/is/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/keys/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/nosuchmethod/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/observe/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/parent/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/proto/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/seal/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/unobserve/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/unwatch/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/values/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/object/watch/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/parseint/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/all/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/race/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/then/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/proxy/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/add/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/clear/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/delete/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/entries/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/has/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/size/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/set/values/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/big/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/blink/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/bold/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/charat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/concat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/includes/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/italics/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/length/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/link/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/match/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/raw/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/replace/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/search/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/slice/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/small/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/split/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/strike/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/sub/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/substr/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/substring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/sup/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/trim/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/typedarray/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/uint8array/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/undefined/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/unescape/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/urierror/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/weakset/index.html create mode 100644 files/es/web/javascript/referencia/objetos_globales/webassembly/index.html create mode 100644 "files/es/web/javascript/referencia/operadores/adici\303\263n/index.html" create mode 100644 "files/es/web/javascript/referencia/operadores/aritm\303\251ticos/index.html" create mode 100644 files/es/web/javascript/referencia/operadores/array_comprehensions/index.html create mode 100644 files/es/web/javascript/referencia/operadores/asignacion/index.html create mode 100644 files/es/web/javascript/referencia/operadores/assignment_operators/index.html create mode 100644 files/es/web/javascript/referencia/operadores/async_function/index.html create mode 100644 files/es/web/javascript/referencia/operadores/await/index.html create mode 100644 files/es/web/javascript/referencia/operadores/bitwise_operators/index.html create mode 100644 files/es/web/javascript/referencia/operadores/class/index.html create mode 100644 files/es/web/javascript/referencia/operadores/comparacion/index.html create mode 100644 files/es/web/javascript/referencia/operadores/comparison_operators/index.html create mode 100644 files/es/web/javascript/referencia/operadores/conditional_operator/index.html create mode 100644 files/es/web/javascript/referencia/operadores/decremento/index.html create mode 100644 files/es/web/javascript/referencia/operadores/delete/index.html create mode 100644 files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html create mode 100644 files/es/web/javascript/referencia/operadores/division/index.html create mode 100644 files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html create mode 100644 files/es/web/javascript/referencia/operadores/expression_closures/index.html create mode 100644 files/es/web/javascript/referencia/operadores/function/index.html create mode 100644 files/es/web/javascript/referencia/operadores/function_star_/index.html create mode 100644 files/es/web/javascript/referencia/operadores/grouping/index.html create mode 100644 files/es/web/javascript/referencia/operadores/in/index.html create mode 100644 files/es/web/javascript/referencia/operadores/index.html create mode 100644 files/es/web/javascript/referencia/operadores/instanceof/index.html create mode 100644 files/es/web/javascript/referencia/operadores/miembros/index.html create mode 100644 files/es/web/javascript/referencia/operadores/new.target/index.html create mode 100644 files/es/web/javascript/referencia/operadores/new/index.html create mode 100644 files/es/web/javascript/referencia/operadores/operador_coma/index.html create mode 100644 "files/es/web/javascript/referencia/operadores/operadores_l\303\263gicos/index.html" create mode 100644 files/es/web/javascript/referencia/operadores/operator_precedence/index.html create mode 100644 files/es/web/javascript/referencia/operadores/pipeline_operator/index.html create mode 100644 files/es/web/javascript/referencia/operadores/resto/index.html create mode 100644 files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html create mode 100644 files/es/web/javascript/referencia/operadores/spread_operator/index.html create mode 100644 files/es/web/javascript/referencia/operadores/strict_equality/index.html create mode 100644 files/es/web/javascript/referencia/operadores/super/index.html create mode 100644 "files/es/web/javascript/referencia/operadores/sustracci\303\263n/index.html" create mode 100644 files/es/web/javascript/referencia/operadores/this/index.html create mode 100644 files/es/web/javascript/referencia/operadores/typeof/index.html create mode 100644 files/es/web/javascript/referencia/operadores/void/index.html create mode 100644 files/es/web/javascript/referencia/operadores/yield/index.html create mode 100644 files/es/web/javascript/referencia/operadores/yield_star_/index.html create mode 100644 files/es/web/javascript/referencia/palabras_reservadas/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/block/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/break/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/class/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/const/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/continue/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/debugger/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/default/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/do...while/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/empty/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/export/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/for-await...of/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/for...in/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/for...of/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/for/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/for_each...in/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/function/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/function_star_/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/if...else/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/import.meta/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/import/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/label/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/let/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/return/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/switch/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/throw/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/try...catch/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/var/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/while/index.html create mode 100644 files/es/web/javascript/referencia/sentencias/with/index.html create mode 100644 files/es/web/javascript/referencia/template_strings/index.html create mode 100644 files/es/web/javascript/shells/index.html create mode 100644 "files/es/web/javascript/una_re-introducci\303\263n_a_javascript/index.html" create mode 100644 files/es/web/javascript/vectores_tipados/index.html create mode 100644 files/es/web/manifest/index.html create mode 100644 files/es/web/mathml/attribute/index.html create mode 100644 files/es/web/mathml/authoring/index.html create mode 100644 files/es/web/mathml/elemento/index.html create mode 100644 files/es/web/mathml/elemento/math/index.html create mode 100644 files/es/web/mathml/examples/index.html create mode 100644 files/es/web/mathml/examples/mathml_pythagorean_theorem/index.html create mode 100644 files/es/web/mathml/index.html create mode 100644 files/es/web/media/formats/containers/index.html create mode 100644 files/es/web/media/formats/index.html create mode 100644 files/es/web/media/index.html create mode 100644 files/es/web/performance/fundamentals/index.html create mode 100644 files/es/web/performance/how_browsers_work/index.html create mode 100644 files/es/web/performance/index.html create mode 100644 files/es/web/performance/mejorando_rendimienot_inicial/index.html create mode 100644 files/es/web/progressive_web_apps/app_structure/index.html create mode 100644 files/es/web/progressive_web_apps/developer_guide/index.html create mode 100644 files/es/web/progressive_web_apps/developer_guide/instalar/index.html create mode 100644 files/es/web/progressive_web_apps/index.html create mode 100644 files/es/web/progressive_web_apps/installable_pwas/index.html create mode 100644 files/es/web/progressive_web_apps/introduction/index.html create mode 100644 files/es/web/progressive_web_apps/loading/index.html create mode 100644 files/es/web/progressive_web_apps/offline_service_workers/index.html create mode 100644 files/es/web/progressive_web_apps/re-engageable_notifications_push/index.html create mode 100644 files/es/web/progressive_web_apps/ventajas/index.html create mode 100644 files/es/web/reference/api/index.html create mode 100644 files/es/web/reference/index.html create mode 100644 files/es/web/security/csp/csp_policy_directives/index.html create mode 100644 files/es/web/security/csp/index.html create mode 100644 files/es/web/security/csp/introducing_content_security_policy/index.html create mode 100644 files/es/web/security/index.html create mode 100644 files/es/web/security/same-origin_politica/index.html create mode 100644 files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html create mode 100644 files/es/web/security/securing_your_site/index.html create mode 100644 files/es/web/svg/attribute/index.html create mode 100644 files/es/web/svg/attribute/stop-color/index.html create mode 100644 files/es/web/svg/attribute/transform/index.html create mode 100644 files/es/web/svg/element/a/index.html create mode 100644 files/es/web/svg/element/animate/index.html create mode 100644 files/es/web/svg/element/circle/index.html create mode 100644 files/es/web/svg/element/foreignobject/index.html create mode 100644 files/es/web/svg/element/g/index.html create mode 100644 files/es/web/svg/element/glifo/index.html create mode 100644 files/es/web/svg/element/index.html create mode 100644 files/es/web/svg/element/rect/index.html create mode 100644 files/es/web/svg/element/style/index.html create mode 100644 files/es/web/svg/element/svg/index.html create mode 100644 files/es/web/svg/element/text/index.html create mode 100644 files/es/web/svg/element/use/index.html create mode 100644 files/es/web/svg/index.html create mode 100644 files/es/web/svg/index/index.html create mode 100644 files/es/web/svg/svg_en_firefox_1.5/index.html create mode 100644 files/es/web/svg/tutorial/getting_started/index.html create mode 100644 files/es/web/svg/tutorial/index.html create mode 100644 "files/es/web/svg/tutorial/introducci\303\263n/index.html" create mode 100644 files/es/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 files/es/web/svg/tutorial/tools_for_svg/index.html create mode 100644 files/es/web/tutoriales/index.html create mode 100644 files/es/web/web_components/custom_elements/index.html create mode 100644 files/es/web/web_components/index.html create mode 100644 files/es/web/web_components/using_custom_elements/index.html create mode 100644 files/es/web/web_components/using_shadow_dom/index.html create mode 100644 files/es/web/web_components/using_templates_and_slots/index.html create mode 100644 files/es/web/xml/index.html create mode 100644 "files/es/web/xml/introducci\303\263n_a_xml/index.html" create mode 100644 files/es/web/xpath/ejes/ancestor-or-self/index.html create mode 100644 files/es/web/xpath/ejes/ancestor/index.html create mode 100644 files/es/web/xpath/ejes/attribute/index.html create mode 100644 files/es/web/xpath/ejes/child/index.html create mode 100644 files/es/web/xpath/ejes/descendant-or-self/index.html create mode 100644 files/es/web/xpath/ejes/descendant/index.html create mode 100644 files/es/web/xpath/ejes/following-sibling/index.html create mode 100644 files/es/web/xpath/ejes/following/index.html create mode 100644 files/es/web/xpath/ejes/index.html create mode 100644 files/es/web/xpath/ejes/namespace/index.html create mode 100644 files/es/web/xpath/ejes/parent/index.html create mode 100644 files/es/web/xpath/ejes/preceding-sibling/index.html create mode 100644 files/es/web/xpath/ejes/preceding/index.html create mode 100644 files/es/web/xpath/funciones/contains/index.html create mode 100644 files/es/web/xpath/funciones/index.html create mode 100644 files/es/web/xpath/funciones/substring/index.html create mode 100644 files/es/web/xpath/funciones/true/index.html create mode 100644 files/es/web/xpath/index.html create mode 100644 files/es/web/xslt/apply-imports/index.html create mode 100644 files/es/web/xslt/apply-templates/index.html create mode 100644 files/es/web/xslt/attribute-set/index.html create mode 100644 files/es/web/xslt/attribute/index.html create mode 100644 files/es/web/xslt/call-template/index.html create mode 100644 files/es/web/xslt/choose/index.html create mode 100644 files/es/web/xslt/comment/index.html create mode 100644 files/es/web/xslt/copy-of/index.html create mode 100644 files/es/web/xslt/copy/index.html create mode 100644 files/es/web/xslt/decimal-format/index.html create mode 100644 files/es/web/xslt/element/element/index.html create mode 100644 files/es/web/xslt/element/index.html create mode 100644 files/es/web/xslt/fallback/index.html create mode 100644 files/es/web/xslt/for-each/index.html create mode 100644 files/es/web/xslt/if/index.html create mode 100644 files/es/web/xslt/import/index.html create mode 100644 files/es/web/xslt/include/index.html create mode 100644 files/es/web/xslt/index.html create mode 100644 files/es/web/xslt/key/index.html create mode 100644 files/es/web/xslt/message/index.html create mode 100644 files/es/web/xslt/namespace-alias/index.html create mode 100644 files/es/web/xslt/number/index.html create mode 100644 files/es/web/xslt/otherwise/index.html create mode 100644 files/es/web/xslt/transformando_xml_con_xslt/index.html create mode 100644 files/es/web/xslt/when/index.html create mode 100644 files/es/web/xslt/with-param/index.html create mode 100644 files/es/web_audio_api/index.html create mode 100644 "files/es/web_development/mobile/dise\303\261o_responsivo/index.html" create mode 100644 files/es/web_development/mobile/index.html create mode 100644 files/es/web_localizability/index.html create mode 100644 files/es/webapi/alarm/index.html create mode 100644 "files/es/webapi/c\303\241mara/index.html" create mode 100644 files/es/webapi/device_storage/index.html create mode 100644 files/es/webapi/estado_de_bateria/index.html create mode 100644 files/es/webapi/index.html create mode 100644 files/es/webapi/pointer_lock/index.html create mode 100644 files/es/webapi/using_geolocation/index.html create mode 100644 files/es/webassembly/concepts/index.html create mode 100644 files/es/webassembly/index.html create mode 100644 files/es/webassembly/loading_and_running/index.html create mode 100644 files/es/webrtc/index.html create mode 100644 files/es/webrtc/introduction/index.html create mode 100644 files/es/webrtc/mediastream_api/index.html create mode 100644 files/es/webrtc/peer-to-peer_communications_with_webrtc/index.html create mode 100644 files/es/webrtc/taking_webcam_photos/index.html create mode 100644 files/es/websockets/index.html create mode 100644 files/es/xforms/index.html create mode 100644 files/es/xforms/soporte_en_mozilla/index.html create mode 100644 files/es/xhtml/index.html create mode 100644 files/es/xml_en_mozilla/index.html create mode 100644 files/es/xmlhttprequest_cambios_en_gecko1.8/index.html create mode 100644 files/es/xpcom_interface_reference/index.html create mode 100644 files/es/xpcom_interface_reference/nsiloginmanager/index.html create mode 100644 files/es/xpcomutils.jsm/index.html create mode 100644 files/es/xpinstall/index.html create mode 100644 files/es/xpinstall_api_reference/index.html create mode 100644 files/es/xul_tutorial/index.html create mode 100644 files/es/zonas/index.html create mode 100644 "files/es/zoom_a_p\303\241gina_completa/index.html" (limited to 'files/es') diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt new file mode 100644 index 0000000000..37d2fafac7 --- /dev/null +++ b/files/es/_redirects.txt @@ -0,0 +1,1987 @@ +# FROM-URL TO-URL +/es/docs/AJAX /es/docs/Web/Guide/AJAX +/es/docs/AJAX/Comunidad /es/docs/Web/Guide/AJAX/Comunidad +/es/docs/AJAX/Primeros_Pasos /es/docs/Web/Guide/AJAX/Primeros_Pasos +/es/docs/AJAX:Comunidad /es/docs/Web/Guide/AJAX/Comunidad +/es/docs/AJAX:Primeros_Pasos /es/docs/Web/Guide/AJAX/Primeros_Pasos +/es/docs/Accesibilidad /es/docs/Web/Accesibilidad +/es/docs/Accesibilidad/Comunidad /es/docs/Web/Accesibilidad/Comunidad +/es/docs/Accesibilidad:Comunidad /es/docs/Web/Accesibilidad/Comunidad +/es/docs/Accessibility /es/docs/Web/Accesibilidad +/es/docs/Aplicaciones /es/docs/Web/Aplicaciones +/es/docs/Aplicaciones/API_JavaScript_de_aplicaciones /es/docs/Web/Aplicaciones/API_JavaScript_de_aplicaciones +/es/docs/Aplicaciones/Aplicaciones_para_Android /es/docs/Web/Aplicaciones/Aplicaciones_para_Android +/es/docs/Aplicaciones/Apps_JavaScript_API /es/docs/Web/Aplicaciones/Apps_JavaScript_API +/es/docs/Aplicaciones/Arquitectura_de_aplicaciones /es/docs/Web/Aplicaciones/Build/Arquitectura_de_aplicaciones +/es/docs/Aplicaciones/CSP /es/docs/Web/Aplicaciones/CSP +/es/docs/Aplicaciones/Comenzando_aplicaciones /es/docs/Web/Aplicaciones/Comenzando_aplicaciones +/es/docs/Aplicaciones/Comenzar /es/docs/Web/Aplicaciones/Comenzando_aplicaciones +/es/docs/Aplicaciones/Comenzar_con_la_creaci%C3%B3n_de_aplicaciones /es/docs/Web/Aplicaciones/Comenzando_aplicaciones +/es/docs/Aplicaciones/Desarrollar_aplicaciones_para_juegos /es/docs/Web/Aplicaciones/Desarrollar_aplicaciones_para_juegos +/es/docs/Aplicaciones/Desarrollo_de_aplicaciones_para_desarrolladores_web /es/docs/Web/Aplicaciones/Desarrollo_de_aplicaciones_para_desarrolladores_web +/es/docs/Aplicaciones/Design /es/docs/Web/Aplicaciones/Design +/es/docs/Aplicaciones/Design/Navegacion_Adaptativa /es/docs/Web/Aplicaciones/Design/Navegacion_Adaptativa +/es/docs/Aplicaciones/Design/Planning_your_app /es/docs/Web/Aplicaciones/Design/Planning_your_app +/es/docs/Aplicaciones/Design_Guidelines /es/docs/Web/Aplicaciones/Design_Guidelines +/es/docs/Aplicaciones/Detalles_especificos_de_plataforma /es/docs/Web/Aplicaciones/Detalles_especificos_de_plataforma +/es/docs/Aplicaciones/Developing /es/docs/Web/Aplicaciones/Build +/es/docs/Aplicaciones/Developing/Manifest /es/docs/Web/Aplicaciones/Build/Manifest +/es/docs/Aplicaciones/FAQs /es/docs/Web/Aplicaciones/FAQs +/es/docs/Aplicaciones/FAQs/Preguntas_Generales /es/docs/Web/Aplicaciones/FAQs/Preguntas_Generales +/es/docs/Aplicaciones/FAQs/Sobre_aplicaciones /es/docs/Web/Aplicaciones/FAQs/Sobre_aplicaciones +/es/docs/Aplicaciones/FAQs/Sobre_manifiestos /es/docs/Web/Aplicaciones/FAQs/Sobre_manifiestos +/es/docs/Aplicaciones/Games /es/docs/Web/Aplicaciones/Games +/es/docs/Aplicaciones/Games/Consideraciones_especiales /es/docs/Web/Aplicaciones/Games/Consideraciones_especiales +/es/docs/Aplicaciones/Iniciarse /es/docs/Web/Aplicaciones/Comenzando_aplicaciones +/es/docs/Aplicaciones/Introducci%C3%B3n_a_la_creaci%C3%B3n_de_aplicaciones /es/docs/Web/Aplicaciones/Introducci%C3%B3n_a_la_creaci%C3%B3n_de_aplicaciones +/es/docs/Aplicaciones/Manifest /es/docs/Web/Aplicaciones/Build/Manifest +/es/docs/Aplicaciones/Manifiesto /es/docs/Web/Aplicaciones/Manifiesto +/es/docs/Aplicaciones/Para_desarrolladores_de_aplicaciones_para_dispositivos_m%C3%B3viles /es/docs/Web/Aplicaciones/Para_desarrolladores_de_aplicaciones_para_dispositivos_m%C3%B3viles +/es/docs/Aplicaciones/Para_desarrolladores_moviles /es/docs/Web/Aplicaciones/Para_desarrolladores_moviles +/es/docs/Aplicaciones/Para_desarrolladores_web /es/docs/Web/Aplicaciones/Para_desarrolladores_web +/es/docs/Aplicaciones/Preguntas_frecuentes /es/docs/Web/Aplicaciones/Preguntas_frecuentes +/es/docs/Aplicaciones/Quickstart /es/docs/Web/Aplicaciones/Quickstart +/es/docs/Aplicaciones/Quickstart/Design /es/docs/Web/Aplicaciones/Quickstart/Design +/es/docs/Aplicaciones/Quickstart/Design/Concept_A_great_app /es/docs/Web/Aplicaciones/Quickstart/Design/Concept_A_great_app +/es/docs/Aplicaciones/Quickstart/Design/Pautas_UI /es/docs/Web/Aplicaciones/Quickstart/Design/Pautas_UI +/es/docs/Aplicaciones/Quickstart/Design/Principios_de_dise%C3%B1o /es/docs/Web/Aplicaciones/Quickstart/Design/Principios_de_dise%C3%B1o +/es/docs/Aplicaciones/Reference /es/docs/Web/Aplicaciones/Reference +/es/docs/Aplicaciones/Reference_apps /es/docs/Web/Aplicaciones/Reference_apps +/es/docs/Aplicaciones/Tutorials /es/docs/Web/Aplicaciones/Tutorials +/es/docs/Aplicaciones/Tutorials/General /es/docs/Web/Aplicaciones/Tutorials/General +/es/docs/Aplicaciones/Usar_aplicaciones_sin_conexi%C3%B3n /es/docs/Web/Aplicaciones/Usar_aplicaciones_sin_conexi%C3%B3n +/es/docs/Aplicaciones/Using_apps_offline /es/docs/Web/Aplicaciones/Using_apps_offline +/es/docs/Aplicaciones/permisos_de_las_aplicaciones /es/docs/Web/Aplicaciones/permisos_de_las_aplicaciones +/es/docs/ArrastrarSoltar /en-US/docs/Web/API/HTML_Drag_and_Drop_API +/es/docs/ArrastrarSoltar/Arrastrar_y_soltar /es/docs/DragDrop/Drag_and_Drop +/es/docs/C%C3%B3digo_fuente_de_Mozilla_(CVS) /es/docs/Mozilla/Developer_guide/Source_Code/C%C3%B3digo_fuente_de_Mozilla_(CVS) +/es/docs/C%C3%B3digo_fuente_de_Mozilla_(Mercurial) /es/docs/Mozilla/Developer_guide/Source_Code/C%C3%B3digo_fuente_de_Mozilla_(Mercurial) +/es/docs/CSS /es/docs/Web/CSS +/es/docs/CSS/-moz-force-broken-image-icon /es/docs/Web/CSS/-moz-force-broken-image-icon +/es/docs/CSS/::selection /es/docs/Web/CSS/::selection +/es/docs/CSS/:active /es/docs/Web/CSS/:active +/es/docs/CSS/:default /es/docs/Web/CSS/:default +/es/docs/CSS/:empty /es/docs/Web/CSS/:empty +/es/docs/CSS/:first-child /es/docs/Web/CSS/:first-child +/es/docs/CSS/:hover /es/docs/Web/CSS/:hover +/es/docs/CSS/:invalid /es/docs/Web/CSS/:invalid +/es/docs/CSS/:last-child /es/docs/Web/CSS/:last-child +/es/docs/CSS/:last-of-type /es/docs/Web/CSS/:last-of-type +/es/docs/CSS/:nth-child /es/docs/Web/CSS/:nth-child +/es/docs/CSS/@font-face /es/docs/Web/CSS/@font-face +/es/docs/CSS/@import /es/docs/Web/CSS/@import +/es/docs/CSS/@keyframes /es/docs/Web/CSS/@keyframes +/es/docs/CSS/@media /es/docs/Web/CSS/@media +/es/docs/CSS/Comenzando_(tutorial_CSS) /es/docs/Web/CSS/Comenzando_(tutorial_CSS) +/es/docs/CSS/Como_iniciar /es/docs/Web/CSS/Como_iniciar +/es/docs/CSS/Como_iniciar/Por_que_usar_CSS /es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS +/es/docs/CSS/Como_iniciar/Porqu%C3%A9_usar_CSS /es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS +/es/docs/CSS/Como_iniciar/Que_es_CSS /es/docs/Web/CSS/Como_iniciar/Que_es_CSS +/es/docs/CSS/Consultas_multimedia /es/docs/CSS/Media_queries +/es/docs/CSS/Escribir_CSS_eficiente /es/docs/Web/CSS/Escribir_CSS_eficiente +/es/docs/CSS/Getting_Started /es/docs/Web/CSS/Comenzando_(tutorial_CSS) +/es/docs/CSS/Introducci%C3%B3n /es/docs/Web/CSS/Introducci%C3%B3n +/es/docs/CSS/Primeros_pasos /es/docs/Web/CSS/Primeros_pasos +/es/docs/CSS/Pseudoelementos /es/docs/Web/CSS/Pseudoelementos +/es/docs/CSS/Selectores_atributo /es/docs/Web/CSS/Selectores_atributo +/es/docs/CSS/Transiciones_de_CSS /es/docs/Web/CSS/Transiciones_de_CSS +/es/docs/CSS/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS +/es/docs/CSS/Usando_gradientes_con_CSS /es/docs/CSS/Using_CSS_gradients +/es/docs/CSS/Using_CSS_transforms /es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms +/es/docs/CSS/Uso_de_CSS_transforms /es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms +/es/docs/CSS/Valor_calculado /es/docs/Web/CSS/Valor_calculado +/es/docs/CSS/Valor_inicial /es/docs/Web/CSS/Valor_inicial +/es/docs/CSS/after /es/docs/Web/CSS/%3A%3Aafter +/es/docs/CSS/animation /es/docs/Web/CSS/animation +/es/docs/CSS/animation-delay /es/docs/Web/CSS/animation-delay +/es/docs/CSS/animation-direction /es/docs/Web/CSS/animation-direction +/es/docs/CSS/animation-duration /es/docs/Web/CSS/animation-duration +/es/docs/CSS/auto /es/docs/Web/CSS/auto +/es/docs/CSS/azimuth /es/docs/Web/CSS/azimuth +/es/docs/CSS/background /es/docs/Web/CSS/background +/es/docs/CSS/background-attachment /es/docs/Web/CSS/background-attachment +/es/docs/CSS/background-color /es/docs/Web/CSS/background-color +/es/docs/CSS/background-image /es/docs/Web/CSS/background-image +/es/docs/CSS/background-origin /es/docs/Web/CSS/background-origin +/es/docs/CSS/background-position /es/docs/Web/CSS/background-position +/es/docs/CSS/background-repeat /es/docs/Web/CSS/background-repeat +/es/docs/CSS/background-size /es/docs/Web/CSS/background-size +/es/docs/CSS/before /es/docs/Web/CSS/%3A%3Abefore +/es/docs/CSS/border /es/docs/Web/CSS/border +/es/docs/CSS/border-bottom /es/docs/Web/CSS/border-bottom +/es/docs/CSS/border-bottom-color /es/docs/Web/CSS/border-bottom-color +/es/docs/CSS/border-bottom-style /es/docs/Web/CSS/border-bottom-style +/es/docs/CSS/border-bottom-width /es/docs/Web/CSS/border-bottom-width +/es/docs/CSS/border-collapse /es/docs/Web/CSS/border-collapse +/es/docs/CSS/border-color /es/docs/Web/CSS/border-color +/es/docs/CSS/border-image /es/docs/Web/CSS/border-image +/es/docs/CSS/border-left /es/docs/Web/CSS/border-left +/es/docs/CSS/border-left-color /es/docs/Web/CSS/border-left-color +/es/docs/CSS/border-radius /es/docs/Web/CSS/border-radius +/es/docs/CSS/border-spacing /es/docs/Web/CSS/border-spacing +/es/docs/CSS/border-style /es/docs/Web/CSS/border-style +/es/docs/CSS/border-width /es/docs/Web/CSS/border-width +/es/docs/CSS/bottom /es/docs/Web/CSS/bottom +/es/docs/CSS/box-shadow /es/docs/Web/CSS/box-shadow +/es/docs/CSS/calc /es/docs/Web/CSS/calc() +/es/docs/CSS/capacidad_de_animacion_de_propiedades_CSS /es/docs/Web/CSS +/es/docs/CSS/clip /es/docs/Web/CSS/clip +/es/docs/CSS/color /es/docs/Web/CSS/color +/es/docs/CSS/computed_value /es/docs/Web/CSS/Valor_calculado +/es/docs/CSS/content /es/docs/Web/CSS/content +/es/docs/CSS/cursor /es/docs/Web/CSS/cursor +/es/docs/CSS/direction /es/docs/Web/CSS/direction +/es/docs/CSS/display /es/docs/Web/CSS/display +/es/docs/CSS/float /es/docs/Web/CSS/float +/es/docs/CSS/font /es/docs/Web/CSS/font +/es/docs/CSS/font-family /es/docs/Web/CSS/font-family +/es/docs/CSS/font-size /es/docs/Web/CSS/font-size +/es/docs/CSS/font-size-adjust /es/docs/Web/CSS/font-size-adjust +/es/docs/CSS/font-style /es/docs/Web/CSS/font-style +/es/docs/CSS/font-variant /es/docs/Web/CSS/font-variant +/es/docs/CSS/font-weight /es/docs/Web/CSS/font-weight +/es/docs/CSS/height /es/docs/Web/CSS/height +/es/docs/CSS/ime-mode /es/docs/Web/CSS/ime-mode +/es/docs/CSS/inherit /es/docs/Web/CSS/inherit +/es/docs/CSS/inheritance /es/docs/Web/CSS/inheritance +/es/docs/CSS/initial /es/docs/Web/CSS/initial +/es/docs/CSS/integer /es/docs/Web/CSS/integer +/es/docs/CSS/left /es/docs/Web/CSS/left +/es/docs/CSS/length /es/docs/Web/CSS/length +/es/docs/CSS/line-height /es/docs/Web/CSS/line-height +/es/docs/CSS/list-style /es/docs/Web/CSS/list-style +/es/docs/CSS/list-style-image /es/docs/Web/CSS/list-style-image +/es/docs/CSS/list-style-position /es/docs/Web/CSS/list-style-position +/es/docs/CSS/list-style-type /es/docs/Web/CSS/list-style-type +/es/docs/CSS/margin-right /es/docs/Web/CSS/margin-right +/es/docs/CSS/max-height /es/docs/Web/CSS/max-height +/es/docs/CSS/max-width /es/docs/Web/CSS/max-width +/es/docs/CSS/min-height /es/docs/Web/CSS/min-height +/es/docs/CSS/min-width /es/docs/Web/CSS/min-width +/es/docs/CSS/none /es/docs/Web/CSS/float +/es/docs/CSS/normal /es/docs/Web/CSS/normal +/es/docs/CSS/number /es/docs/Web/CSS/number +/es/docs/CSS/opacity /es/docs/Web/CSS/opacity +/es/docs/CSS/overflow /es/docs/Web/CSS/overflow +/es/docs/CSS/perspective /es/docs/Web/CSS/perspective +/es/docs/CSS/porcentaje /es/docs/Web/CSS/porcentaje +/es/docs/CSS/position /es/docs/Web/CSS/position +/es/docs/CSS/right /es/docs/Web/CSS/right +/es/docs/CSS/rtl /es/docs/Web/CSS/rtl +/es/docs/CSS/top /es/docs/Web/CSS/top +/es/docs/CSS/transform /es/docs/Web/CSS/transform +/es/docs/CSS/transform-origin /es/docs/Web/CSS/transform-origin +/es/docs/CSS/transition-delay /es/docs/Web/CSS/transition-delay +/es/docs/CSS/vac%C3%ADo /es/docs/Web/CSS/:empty +/es/docs/CSS/vertical-align /es/docs/Web/CSS/vertical-align +/es/docs/CSS/visibility /es/docs/Web/CSS/visibility +/es/docs/CSS/width /es/docs/Web/CSS/width +/es/docs/CSS/z-index /es/docs/Web/CSS/z-index +/es/docs/CSS::default /es/docs/Web/CSS/:default +/es/docs/CSS:Comunidad /es/docs/CSS/Comunidad +/es/docs/CSS:Media:Visual /es/docs/CSS/Media/Visual +/es/docs/CSS:Valor_calculado /es/docs/Web/CSS/Valor_calculado +/es/docs/CSS:Valor_inicial /es/docs/Web/CSS/Valor_inicial +/es/docs/CSS:after /es/docs/Web/CSS/%3A%3Aafter +/es/docs/CSS:auto /es/docs/Web/CSS/auto +/es/docs/CSS:azimuth /es/docs/Web/CSS/azimuth +/es/docs/CSS:background /es/docs/Web/CSS/background +/es/docs/CSS:background-attachment /es/docs/Web/CSS/background-attachment +/es/docs/CSS:background-color /es/docs/Web/CSS/background-color +/es/docs/CSS:background-image /es/docs/Web/CSS/background-image +/es/docs/CSS:background-position /es/docs/Web/CSS/background-position +/es/docs/CSS:background-repeat /es/docs/Web/CSS/background-repeat +/es/docs/CSS:before /es/docs/Web/CSS/%3A%3Abefore +/es/docs/CSS:border /es/docs/Web/CSS/border +/es/docs/CSS:border-bottom /es/docs/Web/CSS/border-bottom +/es/docs/CSS:border-bottom-color /es/docs/Web/CSS/border-bottom-color +/es/docs/CSS:border-bottom-style /es/docs/Web/CSS/border-bottom-style +/es/docs/CSS:border-bottom-width /es/docs/Web/CSS/border-bottom-width +/es/docs/CSS:border-collapse /es/docs/Web/CSS/border-collapse +/es/docs/CSS:border-color /es/docs/Web/CSS/border-color +/es/docs/CSS:border-left /es/docs/Web/CSS/border-left +/es/docs/CSS:border-left-color /es/docs/Web/CSS/border-left-color +/es/docs/CSS:border-spacing /es/docs/Web/CSS/border-spacing +/es/docs/CSS:border-style /es/docs/Web/CSS/border-style +/es/docs/CSS:border-width /es/docs/Web/CSS/border-width +/es/docs/CSS:bottom /es/docs/Web/CSS/bottom +/es/docs/CSS:color /es/docs/Web/CSS/color +/es/docs/CSS:computed_value /es/docs/Web/CSS/Valor_calculado +/es/docs/CSS:content /es/docs/Web/CSS/content +/es/docs/CSS:cursor /es/docs/Web/CSS/cursor +/es/docs/CSS:direction /es/docs/Web/CSS/direction +/es/docs/CSS:display /es/docs/Web/CSS/display +/es/docs/CSS:float /es/docs/Web/CSS/float +/es/docs/CSS:font /es/docs/Web/CSS/font +/es/docs/CSS:font-family /es/docs/Web/CSS/font-family +/es/docs/CSS:font-size /es/docs/Web/CSS/font-size +/es/docs/CSS:font-size-adjust /es/docs/Web/CSS/font-size-adjust +/es/docs/CSS:font-style /es/docs/Web/CSS/font-style +/es/docs/CSS:font-variant /es/docs/Web/CSS/font-variant +/es/docs/CSS:font-weight /es/docs/Web/CSS/font-weight +/es/docs/CSS:height /es/docs/Web/CSS/height +/es/docs/CSS:ime-mode /es/docs/Web/CSS/ime-mode +/es/docs/CSS:inherit /es/docs/Web/CSS/inherit +/es/docs/CSS:inheritance /es/docs/Web/CSS/inheritance +/es/docs/CSS:initial /es/docs/Web/CSS/initial +/es/docs/CSS:inline /es/docs/CSS/inline +/es/docs/CSS:integer /es/docs/Web/CSS/integer +/es/docs/CSS:left /es/docs/Web/CSS/left +/es/docs/CSS:length /es/docs/Web/CSS/length +/es/docs/CSS:line-height /es/docs/Web/CSS/line-height +/es/docs/CSS:list-style /es/docs/Web/CSS/list-style +/es/docs/CSS:list-style-image /es/docs/Web/CSS/list-style-image +/es/docs/CSS:list-style-position /es/docs/Web/CSS/list-style-position +/es/docs/CSS:list-style-type /es/docs/Web/CSS/list-style-type +/es/docs/CSS:ltr /es/docs/CSS/ltr +/es/docs/CSS:margin-right /es/docs/Web/CSS/margin-right +/es/docs/CSS:max-height /es/docs/Web/CSS/max-height +/es/docs/CSS:max-width /es/docs/Web/CSS/max-width +/es/docs/CSS:medium /es/docs/CSS/medium +/es/docs/CSS:min-height /es/docs/Web/CSS/min-height +/es/docs/CSS:min-width /es/docs/Web/CSS/min-width +/es/docs/CSS:none /es/docs/Web/CSS/float +/es/docs/CSS:normal /es/docs/Web/CSS/normal +/es/docs/CSS:number /es/docs/Web/CSS/number +/es/docs/CSS:position /es/docs/Web/CSS/position +/es/docs/CSS:right /es/docs/Web/CSS/right +/es/docs/CSS:rtl /es/docs/Web/CSS/rtl +/es/docs/CSS:static /es/docs/CSS/static +/es/docs/CSS:top /es/docs/Web/CSS/top +/es/docs/CSS:vac%C3%ADo /es/docs/Web/CSS/:empty +/es/docs/CSS:visibility /es/docs/Web/CSS/visibility +/es/docs/CSS:visible /es/docs/CSS/visible +/es/docs/CSS:width /es/docs/Web/CSS/width +/es/docs/Clic /en-US/docs/Template:Clic +/es/docs/Compilando_JavaXPCOM /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Compilando_JavaXPCOM +/es/docs/Complementos_de_Firefox._Guia_del_desarrollador /es/docs/Gu%C3%ADa_para_el_desarrollador_de_agregados_para_Firefox +/es/docs/Configurar_las_opciones_de_compilaci%C3%B3n /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Configurar_las_opciones_de_compilaci%C3%B3n +/es/docs/Core_JavaScript_1.5_Guide /es/docs/Web/JavaScript/Guide +/es/docs/Core_JavaScript_1.5_Guide/Calling_Functions /es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones +/es/docs/Core_JavaScript_1.5_Guide/Defining_Functions /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Core_JavaScript_1.5_Guide/Operators /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Core_JavaScript_1.5_Guide/Operators/Special_Operators /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects /es/docs/Web/JavaScript/Referencia +/es/docs/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/Core_JavaScript_1.5_Guide:Calling_Functions /es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones +/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods /es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods +/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type /es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties /es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties +/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function /es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function +/es/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References /es/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References +/es/docs/Core_JavaScript_1.5_Guide:Defining_Functions /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Core_JavaScript_1.5_Guide:Operators:Special_Operators /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/Core_JavaScript_1.5_Reference /es/docs/Web/JavaScript/Referencia +/es/docs/Core_JavaScript_1.5_Reference/Objects /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Core_JavaScript_1.5_Reference/Objects/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Core_JavaScript_1.5_Reference/Objects/String/small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small +/es/docs/Core_JavaScript_1.5_Reference:Objects:String:anchor /es/docs/Core_JavaScript_1.5_Reference/Objects/String/anchor +/es/docs/Core_JavaScript_1.5_Reference:Objects:String:small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small +/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM:Interior_del_Componente /es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Interior_del_Componente +/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM:Prefacio /es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Prefacio +/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM:Un_vistazo_de_XPCOM /es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Un_vistazo_de_XPCOM +/es/docs/Creaci%C3%B3n_de_Componentes_XPCOM:Uso_de_Componentes_XPCOM /es/docs/Creaci%C3%B3n_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM +/es/docs/Creando_Componentes_XPCOM /es/docs/Creaci%C3%B3n_de_Componentes_XPCOM +/es/docs/Creando_un_skin_para_Firefox /es/docs/Creando_un_tema_para_Firefox +/es/docs/Creando_un_skin_para_Firefox:UUID /es/docs/Creando_un_skin_para_Firefox/UUID +/es/docs/Creando_un_skin_para_Firefox:_Como_empezar /es/docs/Creando_un_skin_para_Firefox/Como_empezar +/es/docs/Creando_un_skin_para_Firefox:install.rdf /es/docs/Creando_un_skin_para_Firefox/install.rdf +/es/docs/Crear_una_barra_lateral_en_Firefox /es/docs/Crear_un_panel_lateral_en_Firefox +/es/docs/Creating_a_Skin_for_Firefox:contents.rdf /es/docs/Creating_a_Skin_for_Firefox/contents.rdf +/es/docs/DOM/CSS /es/docs/Web/CSS +/es/docs/DOM/CameraCapabilities /es/docs/Web/API/CameraCapabilities +/es/docs/DOM/CameraCapabilities.effects /es/docs/Web/API/CameraCapabilities/effects +/es/docs/DOM/CameraCapabilities.fileFormats /es/docs/Web/API/CameraCapabilities/fileFormats +/es/docs/DOM/CameraCapabilities.flashModes /es/docs/Web/API/CameraCapabilities/flashModes +/es/docs/DOM/CssRule /es/docs/Web/API/CSSRule +/es/docs/DOM/CssRule.cssText /es/docs/Web/API/CSSRule/cssText +/es/docs/DOM/CssRule.parentStyleSheet /es/docs/Web/API/CSSRule/parentStyleSheet +/es/docs/DOM/CssRule.selectorText /es/docs/Web/API/CSSStyleRule/selectorText +/es/docs/DOM/CssRule.style /es/docs/Web/API/CSSStyleRule/style +/es/docs/DOM/Document.styleSheets /es/docs/Web/API/Document/styleSheets +/es/docs/DOM/Element.setAttribute /es/docs/Web/API/Element/setAttribute +/es/docs/DOM/Element.style /es/docs/Web/API/HTMLElement/style +/es/docs/DOM/HTMLAudioElement /es/docs/Web/API/HTMLAudioElement +/es/docs/DOM/HTMLTableElement /es/docs/Web/API/HTMLTableElement +/es/docs/DOM/Manipulating_the_browser_history /es/docs/DOM/Manipulando_el_historial_del_navegador +/es/docs/DOM/MozSocial.closePanel /es/docs/Web/API/MozSocial/closePanel +/es/docs/DOM/MozSocial.getAttention /es/docs/Web/API/MozSocial/getAttention +/es/docs/DOM/MozSocial.getWorker /es/docs/Web/API/MozSocial/getWorker +/es/docs/DOM/MozSocial.isVisible /es/docs/Web/API/MozSocial/isVisible +/es/docs/DOM/MozSocial.openChatWindow /es/docs/Web/API/MozSocial/openChatWindow +/es/docs/DOM/MozSocial.openPanel /es/docs/Web/API/MozSocial/openPanel +/es/docs/DOM/Node.appendChild /es/docs/Web/API/Node/appendChild +/es/docs/DOM/Node.textContent /es/docs/Web/API/Node/textContent +/es/docs/DOM/Selection /es/docs/Web/API/Selection +/es/docs/DOM/Selection/addRange /es/docs/Web/API/Selection/addRange +/es/docs/DOM/Selection/anchorNode /es/docs/Web/API/Selection/anchorNode +/es/docs/DOM/Selection/anchorOffset /es/docs/Web/API/Selection/anchorOffset +/es/docs/DOM/Selection/collapse /es/docs/Web/API/Selection/collapse +/es/docs/DOM/Selection/collapseToEnd /es/docs/Web/API/Selection/collapseToEnd +/es/docs/DOM/Selection/collapseToStart /es/docs/Web/API/Selection/collapseToStart +/es/docs/DOM/Selection/containsNode /es/docs/Web/API/Selection/containsNode +/es/docs/DOM/Selection/deleteFromDocument /es/docs/Web/API/Selection/deleteFromDocument +/es/docs/DOM/Selection/extend /es/docs/Web/API/Selection/extend +/es/docs/DOM/Selection/focusNode /es/docs/Web/API/Selection/focusNode +/es/docs/DOM/Selection/focusOffset /es/docs/Web/API/Selection/focusOffset +/es/docs/DOM/Selection/getRangeAt /es/docs/Web/API/Selection/getRangeAt +/es/docs/DOM/Selection/isCollapsed /es/docs/Web/API/Selection/isCollapsed +/es/docs/DOM/Selection/rangeCount /es/docs/Web/API/Selection/rangeCount +/es/docs/DOM/Selection/removeAllRanges /es/docs/Web/API/Selection/removeAllRanges +/es/docs/DOM/Selection/removeRange /es/docs/Web/API/Selection/removeRange +/es/docs/DOM/Selection/selectAllChildren /es/docs/Web/API/Selection/selectAllChildren +/es/docs/DOM/Selection/toString /es/docs/Web/API/Selection/toString +/es/docs/DOM/Style.media /es/docs/Web/API/StyleSheet/media +/es/docs/DOM/Style.type /es/docs/Web/API/StyleSheet/type +/es/docs/DOM/Stylesheet /es/docs/Web/API/StyleSheet +/es/docs/DOM/Stylesheet.cssRules /es/docs/Web/API/CSSStyleSheet/insertRule +/es/docs/DOM/Stylesheet.deleteRule /es/docs/Web/API/CSSStyleSheet/deleteRule +/es/docs/DOM/Stylesheet.disabled /es/docs/Web/API/StyleSheet/disabled +/es/docs/DOM/Stylesheet.href /es/docs/Web/API/StyleSheet/href +/es/docs/DOM/Stylesheet.insertRule /es/docs/Web/API/CSSStyleSheet/insertRule +/es/docs/DOM/Stylesheet.media /es/docs/Web/API/StyleSheet/media +/es/docs/DOM/Stylesheet.ownerNode /es/docs/Web/API/StyleSheet/ownerNode +/es/docs/DOM/Stylesheet.ownerRule /es/docs/Web/API/CSSStyleSheet/ownerRule +/es/docs/DOM/Stylesheet.parentStyleSheet /es/docs/Web/API/StyleSheet/parentStyleSheet +/es/docs/DOM/Stylesheet.title /es/docs/Web/API/StyleSheet/title +/es/docs/DOM/Stylesheet.type /es/docs/Web/API/StyleSheet/type +/es/docs/DOM/Stylesheet_object /es/docs/Web/API/CSSStyleSheet +/es/docs/DOM/Window.getComputedStyle /es/docs/Web/API/Window/getComputedStyle +/es/docs/DOM/dispatchEvent_example /es/docs/Web/Guide/DOM/Events/Creating_and_triggering_events +/es/docs/DOM/document /es/docs/Web/API/Document +/es/docs/DOM/document.URL /es/docs/Web/API/Document/URL +/es/docs/DOM/document.activeElement /es/docs/Web/API/DocumentOrShadowRoot/activeElement +/es/docs/DOM/document.alinkColor /es/docs/Web/API/Document/alinkColor +/es/docs/DOM/document.anchors /es/docs/Web/API/Document/anchors +/es/docs/DOM/document.applets /es/docs/Web/API/Document/applets +/es/docs/DOM/document.bgColor /es/docs/Web/API/Document/bgColor +/es/docs/DOM/document.body /es/docs/Web/API/Document/body +/es/docs/DOM/document.characterSet /es/docs/Web/API/Document/characterSet +/es/docs/DOM/document.createEvent /es/docs/Web/API/Document/createEvent +/es/docs/DOM/document.createRange /es/docs/Web/API/Document/createRange +/es/docs/DOM/document.documentElement /es/docs/Web/API/Document/documentElement +/es/docs/DOM/document.documentURIObject /es/docs/Web/API/Document/documentURIObject +/es/docs/DOM/document.elementFromPoint /es/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/es/docs/DOM/document.firstChild /es/docs/Web/API/Node.firstChild +/es/docs/DOM/document.getElementById /es/docs/Web/API/Document/getElementById +/es/docs/DOM/document.getElementsByTagName /es/docs/Web/API/Document/getElementsByTagName +/es/docs/DOM/document.getElementsByTagNameNS /es/docs/Web/API/Document/getElementsByTagNameNS +/es/docs/DOM/document.hasFocus /es/docs/Web/API/Document/hasFocus +/es/docs/DOM/element /es/docs/Web/API/Element +/es/docs/DOM/element.activeElement /es/docs/Web/API/DocumentOrShadowRoot/activeElement +/es/docs/DOM/element.clientLeft /es/docs/Web/API/Element/clientLeft +/es/docs/DOM/element.clientTop /es/docs/Web/API/Element/clientTop +/es/docs/DOM/element.dispatchEvent /es/docs/Web/API/EventTarget/dispatchEvent +/es/docs/DOM/element.getBoundingClientRect /es/docs/Web/API/Element/getBoundingClientRect +/es/docs/DOM/element.getClientRects /es/docs/Web/API/Element/getClientRects +/es/docs/DOM/element.getElementsByTagName /es/docs/Web/API/Element/getElementsByTagName +/es/docs/DOM/element.hasFocus /es/docs/Web/API/Document/hasFocus +/es/docs/DOM/element.innerHTML /es/docs/Web/API/Element/innerHTML +/es/docs/DOM/element.nodeName /es/docs/Web/API/Node/nodeName +/es/docs/DOM/element.tagName /es/docs/Web/API/Element/tagName +/es/docs/DOM/elemento.addEventListener /es/docs/Web/API/EventTarget/addEventListener +/es/docs/DOM/event /es/docs/Web/API/Event +/es/docs/DOM/event.bubbles /es/docs/Web/API/Event/bubbles +/es/docs/DOM/event.cancelable /es/docs/Web/API/Event/cancelable +/es/docs/DOM/event.initEvent /es/docs/Web/API/Event/initEvent +/es/docs/DOM/event.initMouseEvent /es/docs/Web/API/MouseEvent/initMouseEvent +/es/docs/DOM/event.pageX /es/docs/Web/API/UIEvent/pageX +/es/docs/DOM/event.preventDefault /es/docs/Web/API/Event/preventDefault +/es/docs/DOM/event.type /es/docs/Web/API/Event/type +/es/docs/DOM/form /es/docs/Web/API/HTMLFormElement +/es/docs/DOM/navegador.id /es/docs/Web/API/Navigator/id +/es/docs/DOM/navigator.id /es/docs/Web/API/Navigator/id +/es/docs/DOM/navigator.mozSocial /es/docs/Web/API/Navigator/mozSocial +/es/docs/DOM/range /es/docs/Web/API/Range +/es/docs/DOM/range.collapsed /es/docs/Web/API/Range/collapsed +/es/docs/DOM/range.commonAncestorContainer /es/docs/Web/API/Range/commonAncestorContainer +/es/docs/DOM/range.intersectsNode /es/docs/Web/API/Range/intersectsNode +/es/docs/DOM/style /es/docs/Web/API/HTMLStyleElement +/es/docs/DOM/table /es/docs/Web/API/HTMLTableElement +/es/docs/DOM/window /es/docs/Web/API/Window +/es/docs/DOM/window.applicationCache /es/docs/Web/API/Window/applicationCache +/es/docs/DOM/window.fullScreen /es/docs/Web/API/Window/fullScreen +/es/docs/DOM/window.getSelection /es/docs/Web/API/Window/getSelection +/es/docs/DOM/window.navigator.geolocation /es/docs/Web/API/NavigatorGeolocation/geolocation +/es/docs/DOM/window.navigator.registerProtocolHandler /es/docs/Web/API/Navigator/registerProtocolHandler +/es/docs/DOM/window.navigator.vibrate /es/docs/Web/API/Navigator/vibrate +/es/docs/DOM/window.onload /es/docs/Web/API/GlobalEventHandlers/onload +/es/docs/DOM/window.onunload /es/docs/Web/API/GlobalEventHandlers/onunload +/es/docs/DOM/window.requestAnimationFrame /es/docs/Web/API/Window/requestAnimationFrame +/es/docs/DOM:Almacenamiento /es/docs/DOM/Almacenamiento +/es/docs/DOM:Comunidad /es/docs/DOM/Comunidad +/es/docs/DOM:Selection:addRange /es/docs/Web/API/Selection/addRange +/es/docs/DOM:Selection:anchorNode /es/docs/Web/API/Selection/anchorNode +/es/docs/DOM:Selection:anchorOffset /es/docs/Web/API/Selection/anchorOffset +/es/docs/DOM:Selection:collapse /es/docs/Web/API/Selection/collapse +/es/docs/DOM:Selection:collapseToEnd /es/docs/Web/API/Selection/collapseToEnd +/es/docs/DOM:Selection:collapseToStart /es/docs/Web/API/Selection/collapseToStart +/es/docs/DOM:Selection:containsNode /es/docs/Web/API/Selection/containsNode +/es/docs/DOM:Selection:deleteFromDocument /es/docs/Web/API/Selection/deleteFromDocument +/es/docs/DOM:Selection:extend /es/docs/Web/API/Selection/extend +/es/docs/DOM:Selection:focusNode /es/docs/Web/API/Selection/focusNode +/es/docs/DOM:Selection:focusOffset /es/docs/Web/API/Selection/focusOffset +/es/docs/DOM:Selection:getRangeAt /es/docs/Web/API/Selection/getRangeAt +/es/docs/DOM:Selection:isCollapsed /es/docs/Web/API/Selection/isCollapsed +/es/docs/DOM:Selection:rangeCount /es/docs/Web/API/Selection/rangeCount +/es/docs/DOM:Selection:removeAllRanges /es/docs/Web/API/Selection/removeAllRanges +/es/docs/DOM:Selection:removeRange /es/docs/Web/API/Selection/removeRange +/es/docs/DOM:Selection:selectAllChildren /es/docs/Web/API/Selection/selectAllChildren +/es/docs/DOM:Selection:toString /es/docs/Web/API/Selection/toString +/es/docs/DOM:dispatchEvent_example /es/docs/Web/Guide/DOM/Events/Creating_and_triggering_events +/es/docs/DOM:document /es/docs/Web/API/Document +/es/docs/DOM:document.URL /es/docs/Web/API/Document/URL +/es/docs/DOM:document.activeElement /es/docs/Web/API/DocumentOrShadowRoot/activeElement +/es/docs/DOM:document.alinkColor /es/docs/Web/API/Document/alinkColor +/es/docs/DOM:document.anchors /es/docs/Web/API/Document/anchors +/es/docs/DOM:document.applets /es/docs/Web/API/Document/applets +/es/docs/DOM:document.bgColor /es/docs/Web/API/Document/bgColor +/es/docs/DOM:document.body /es/docs/Web/API/Document/body +/es/docs/DOM:document.characterSet /es/docs/Web/API/Document/characterSet +/es/docs/DOM:document.cookie /es/docs/DOM/document.cookie +/es/docs/DOM:document.createEvent /es/docs/Web/API/Document/createEvent +/es/docs/DOM:document.createRange /es/docs/Web/API/Document/createRange +/es/docs/DOM:document.documentElement /es/docs/Web/API/Document/documentElement +/es/docs/DOM:document.documentURIObject /es/docs/Web/API/Document/documentURIObject +/es/docs/DOM:document.elementFromPoint /es/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/es/docs/DOM:document.firstChild /es/docs/Web/API/Node.firstChild +/es/docs/DOM:document.getElementById /es/docs/Web/API/Document/getElementById +/es/docs/DOM:document.getElementsByTagName /es/docs/Web/API/Document/getElementsByTagName +/es/docs/DOM:document.getElementsByTagNameNS /es/docs/Web/API/Document/getElementsByTagNameNS +/es/docs/DOM:document.hasFocus /es/docs/Web/API/Document/hasFocus +/es/docs/DOM:element /es/docs/Web/API/Element +/es/docs/DOM:element.activeElemen /es/docs/DOM/element.activeElemen +/es/docs/DOM:element.activeElement /es/docs/Web/API/DocumentOrShadowRoot/activeElement +/es/docs/DOM:element.clientLeft /es/docs/Web/API/Element/clientLeft +/es/docs/DOM:element.clientTop /es/docs/Web/API/Element/clientTop +/es/docs/DOM:element.dispatchEvent /es/docs/Web/API/EventTarget/dispatchEvent +/es/docs/DOM:element.getBoundingClientRect /es/docs/Web/API/Element/getBoundingClientRect +/es/docs/DOM:element.getClientRects /es/docs/Web/API/Element/getClientRects +/es/docs/DOM:element.getElementsByTagName /es/docs/Web/API/Element/getElementsByTagName +/es/docs/DOM:element.hasFocus /es/docs/Web/API/Document/hasFocus +/es/docs/DOM:element.nodeName /es/docs/Web/API/Node/nodeName +/es/docs/DOM:element.tagName /es/docs/Web/API/Element/tagName +/es/docs/DOM:event /es/docs/Web/API/Event +/es/docs/DOM:event.bubbles /es/docs/Web/API/Event/bubbles +/es/docs/DOM:event.cancelable /es/docs/Web/API/Event/cancelable +/es/docs/DOM:event.initEvent /es/docs/Web/API/Event/initEvent +/es/docs/DOM:event.initMouseEvent /es/docs/Web/API/MouseEvent/initMouseEvent +/es/docs/DOM:event.pageX /es/docs/Web/API/UIEvent/pageX +/es/docs/DOM:event.preventDefault /es/docs/Web/API/Event/preventDefault +/es/docs/DOM:form /es/docs/Web/API/HTMLFormElement +/es/docs/DOM:range /es/docs/Web/API/Range +/es/docs/DOM:range.cloneContents /es/docs/DOM/range.cloneContents +/es/docs/DOM:range.cloneRange /es/docs/DOM/range.cloneRange +/es/docs/DOM:range.collapse /es/docs/DOM/range.collapse +/es/docs/DOM:range.collapsed /es/docs/Web/API/Range/collapsed +/es/docs/DOM:range.commonAncestorContainer /es/docs/Web/API/Range/commonAncestorContainer +/es/docs/DOM:range.compareBoundaryPoints /es/docs/DOM/range.compareBoundaryPoints +/es/docs/DOM:range.compareNode /es/docs/DOM/range.compareNode +/es/docs/DOM:range.comparePoint /es/docs/DOM/range.comparePoint +/es/docs/DOM:range.createContextualFragment /es/docs/DOM/range.createContextualFragment +/es/docs/DOM:range.deleteContents /es/docs/DOM/range.deleteContents +/es/docs/DOM:range.detach /es/docs/DOM/range.detach +/es/docs/DOM:range.endContainer /es/docs/DOM/range.endContainer +/es/docs/DOM:range.endOffset /es/docs/DOM/range.endOffset +/es/docs/DOM:range.extractContents /es/docs/DOM/range.extractContents +/es/docs/DOM:range.insertNode /es/docs/DOM/range.insertNode +/es/docs/DOM:range.intersectsNode /es/docs/Web/API/Range/intersectsNode +/es/docs/DOM:range.isPointInRange /es/docs/DOM/range.isPointInRange +/es/docs/DOM:range.selectNode /es/docs/DOM/range.selectNode +/es/docs/DOM:range.selectNodeContents /es/docs/DOM/range.selectNodeContents +/es/docs/DOM:range.setEnd /es/docs/DOM/range.setEnd +/es/docs/DOM:range.setEndAfter /es/docs/DOM/range.setEndAfter +/es/docs/DOM:range.setEndBefore /es/docs/DOM/range.setEndBefore +/es/docs/DOM:range.setStart /es/docs/DOM/range.setStart +/es/docs/DOM:range.setStartAfter /es/docs/DOM/range.setStartAfter +/es/docs/DOM:range.setStartBefore /es/docs/DOM/range.setStartBefore +/es/docs/DOM:range.startContainer /es/docs/DOM/range.startContainer +/es/docs/DOM:range.startOffset /es/docs/DOM/range.startOffset +/es/docs/DOM:range.surroundContents /es/docs/DOM/range.surroundContents +/es/docs/DOM:range.toString /es/docs/DOM/range.toString +/es/docs/DOM:selection /es/docs/Web/API/Selection +/es/docs/DOM:style /es/docs/Web/API/HTMLStyleElement +/es/docs/DOM:table /es/docs/Web/API/HTMLTableElement +/es/docs/DOM:window /es/docs/Web/API/Window +/es/docs/DOM:window.applicationCache /es/docs/Web/API/Window/applicationCache +/es/docs/DOM:window.fullScreen /es/docs/Web/API/Window/fullScreen +/es/docs/DOM:window.getSelection /es/docs/Web/API/Window/getSelection +/es/docs/DOM:window.navigator.registerProtocolHandler /es/docs/Web/API/Navigator/registerProtocolHandler +/es/docs/DOM_Client_Object_Cross-Reference:navigator /es/docs/DOM_Client_Object_Cross-Reference/navigator +/es/docs/Desarrollo_Web:Comunidad /es/docs/Desarrollo_Web/Comunidad +/es/docs/Descargar_el_c%C3%B3digo_fuente_de_Mozilla /es/docs/Mozilla/Developer_guide/Source_Code/Descargar_el_c%C3%B3digo_fuente_de_Mozilla +/es/docs/Detecci%C3%B3n_del_navegador_y_soporte_entre_ellos /es/docs/Detecci%C3%B3n_del_navegador_y_cobertura_a_m%C3%BAltiples_navegadores +/es/docs/Developer_Guide /es/docs/Mozilla/Developer_guide +/es/docs/Developer_Guide/Source_Code /es/docs/Mozilla/Developer_guide/Source_Code +/es/docs/Documentaci%C3%B3n_de_compilado /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n +/es/docs/Documentaci%C3%B3n_para_la_compilaci%C3%B3n /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n +/es/docs/Documentaci%C3%B3n_para_la_compilaci%C3%B3n:TOC /es/docs/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/TOC +/es/docs/Drawing_text_using_a_canvas /es/docs/Dibujar_texto_usando_canvas +/es/docs/EXSLT /es/docs/Web/EXSLT +/es/docs/EXSLT/exsl /es/docs/Web/EXSLT/exsl +/es/docs/EXSLT/exsl/node-set /es/docs/Web/EXSLT/exsl/node-set +/es/docs/EXSLT/exsl/object-type /es/docs/Web/EXSLT/exsl/object-type +/es/docs/EXSLT/math /es/docs/Web/EXSLT/math +/es/docs/EXSLT/math/highest /es/docs/Web/EXSLT/math/highest +/es/docs/EXSLT/math/lowest /es/docs/Web/EXSLT/math/lowest +/es/docs/EXSLT/math/max /es/docs/Web/EXSLT/math/max +/es/docs/EXSLT/math/min /es/docs/Web/EXSLT/math/min +/es/docs/EXSLT/regexp /es/docs/Web/EXSLT/regexp +/es/docs/EXSLT/regexp/match /es/docs/Web/EXSLT/regexp/match +/es/docs/EXSLT/regexp/replace /es/docs/Web/EXSLT/regexp/replace +/es/docs/EXSLT/regexp/test /es/docs/Web/EXSLT/regexp/test +/es/docs/EXSLT/set /es/docs/Web/EXSLT/set +/es/docs/EXSLT/set/difference /es/docs/Web/EXSLT/set/difference +/es/docs/EXSLT/set/distinct /es/docs/Web/EXSLT/set/distinct +/es/docs/EXSLT/set/has-same-node /es/docs/Web/EXSLT/set/has-same-node +/es/docs/EXSLT/set/intersection /es/docs/Web/EXSLT/set/intersection +/es/docs/EXSLT/set/leading /es/docs/Web/EXSLT/set/leading +/es/docs/EXSLT/set/trailing /es/docs/Web/EXSLT/set/trailing +/es/docs/EXSLT/str /es/docs/Web/EXSLT/str +/es/docs/EXSLT/str/concat /es/docs/Web/EXSLT/str/concat +/es/docs/EXSLT/str/split /es/docs/Web/EXSLT/str/split +/es/docs/EXSLT/str/tokenize /es/docs/Web/EXSLT/str/tokenize +/es/docs/EXSLT:exsl:node-set /es/docs/Web/EXSLT/exsl/node-set +/es/docs/EXSLT:exsl:object-type /es/docs/Web/EXSLT/exsl/object-type +/es/docs/EXSLT:math:highest /es/docs/Web/EXSLT/math/highest +/es/docs/EXSLT:math:lowest /es/docs/Web/EXSLT/math/lowest +/es/docs/EXSLT:math:max /es/docs/Web/EXSLT/math/max +/es/docs/EXSLT:math:min /es/docs/Web/EXSLT/math/min +/es/docs/EXSLT:regexp:match /es/docs/Web/EXSLT/regexp/match +/es/docs/EXSLT:regexp:replace /es/docs/Web/EXSLT/regexp/replace +/es/docs/EXSLT:regexp:test /es/docs/Web/EXSLT/regexp/test +/es/docs/EXSLT:set:difference /es/docs/Web/EXSLT/set/difference +/es/docs/EXSLT:set:distinct /es/docs/Web/EXSLT/set/distinct +/es/docs/EXSLT:set:has-same-node /es/docs/Web/EXSLT/set/has-same-node +/es/docs/EXSLT:set:intersection /es/docs/Web/EXSLT/set/intersection +/es/docs/EXSLT:set:leading /es/docs/Web/EXSLT/set/leading +/es/docs/EXSLT:set:trailing /es/docs/Web/EXSLT/set/trailing +/es/docs/EXSLT:str:concat /es/docs/Web/EXSLT/str/concat +/es/docs/EXSLT:str:split /es/docs/Web/EXSLT/str/split +/es/docs/EXSLT:str:tokenize /es/docs/Web/EXSLT/str/tokenize +/es/docs/Errores_notables_corregidos_en_Firefox_3 /es/docs/Bugs_importantes_solucionados_en_Firefox_3 +/es/docs/Escribir_CSS_eficaz /es/docs/Web/CSS/Escribir_CSS_eficiente +/es/docs/Escribir_CSS_eficiente /es/docs/Web/CSS/Escribir_CSS_eficiente +/es/docs/Est%C3%A1ndares_Web:Comunidad /es/docs/Est%C3%A1ndares_Web/Comunidad +/es/docs/Eventos_online_y_offline /es/docs/Web/API/NavigatorOnLine/Eventos_online_y_offline +/es/docs/Extensi%C3%B3n_Firebug_(externo) https://addons.mozilla.org/extensions/moreinfo.php?id=1843&application=firefox +/es/docs/Extensiones:Comunidad /es/docs/Extensiones/Comunidad +/es/docs/FUEL:Annotations /es/docs/FUEL/Annotations +/es/docs/FUEL:Application /es/docs/FUEL/Application +/es/docs/FUEL:Bookmark /es/docs/FUEL/Bookmark +/es/docs/FUEL:BookmarkFolder /es/docs/FUEL/BookmarkFolder +/es/docs/FUEL:BrowserTab /es/docs/FUEL/BrowserTab +/es/docs/FUEL:Console /es/docs/FUEL/Console +/es/docs/FUEL:EventItem /es/docs/FUEL/EventItem +/es/docs/FUEL:EventListener /es/docs/FUEL/EventListener +/es/docs/FUEL:Events /es/docs/FUEL/Events +/es/docs/FUEL:Extension /es/docs/FUEL/Extension +/es/docs/FUEL:Extensions /es/docs/FUEL/Extensions +/es/docs/FUEL:Preference /es/docs/FUEL/Preference +/es/docs/FUEL:PreferenceBranch /es/docs/FUEL/PreferenceBranch +/es/docs/FUEL:SessionStorage /es/docs/FUEL/SessionStorage +/es/docs/FUEL:Window /es/docs/FUEL/Window +/es/docs/Firefox_1.5 /es/docs/Firefox_1.5_para_Desarrolladores +/es/docs/Firefox_2 /es/docs/Firefox_2_para_desarrolladores +/es/docs/Firefox_3.1_para_desarrolladores /es/docs/Firefox_3.5_para_desarrolladores +/es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.1_para_desarrolladores /es/docs/Firefox_3.5_para_desarrolladores +/es/docs/Firefox_3.5_para_desarrolladores/Firefox_3.5_para_desarrolladores /es/docs/Firefox_3.5_para_desarrolladores +/es/docs/Firefox_3_para_desarrolladores:Traducciones_pendientes /es/docs/Firefox_3_para_desarrolladores/Traducciones_pendientes +/es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions-redirect-1 /es/docs/Firefox_addons_developer_guide/Introduction_to_Extensions +/es/docs/Firefox_en_Android /es/docs/Mozilla/Firefox_para_Android +/es/docs/Firefox_para_desarrolladores /en-US/docs/Firefox_10_para_desarrolladores +/es/docs/Garant%C3%ADa_de_Calidad /es/docs/QA +/es/docs/Gesti%C3%B3n_del_foco_en_HTML /es/docs/Web/API/Document/hasFocus +/es/docs/Glossary/AOM /es/docs/Glossary/Accessibility_tree +/es/docs/Glossary/undefined_es /es/docs/Glossary/undefined +/es/docs/Gu%C3%ADa_JavaScript_1.5 /es/docs/Web/JavaScript/Guide +/es/docs/Gu%C3%ADa_JavaScript_1.5/Acerca_de_esta_gu%C3%ADa /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/Gu%C3%ADa_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/Gu%C3%ADa_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_los_m%C3%A9todos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_los_m.C3.A9todos +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_propiedades_para_un_tipo_de_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definici.C3.B3n_de_las_propiedades_de_un_tipo_de_objeto +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Indexando_las_propiedades_del_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Propiedades_del_objeto_indexado +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_this_para_referirse_al_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_this_para_las_referencias_a_objetos +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_una_funci%C3%B3n_constructora /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_una_funci.C3.B3n_constructora +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto +/es/docs/Gu%C3%ADa_JavaScript_1.5/Crear_una_expresi%C3%B3n_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Empleado /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee +/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee +/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Constructores_m%C3%A1s_flexibles /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles +/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Creando_la_jerarqu%C3%ADa /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia +/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Propiedades_de_objetos +/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/A%C3%B1adiendo_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#A.C3.B1adir_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/Heredando_las_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Herencia_de_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5/Escribir_un_patr%C3%B3n_de_expresi%C3%B3n_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Excepci%C3%B3n_del_DOM /es/docs/Web/API/DOMException +/es/docs/Gu%C3%ADa_JavaScript_1.5/Expresiones /es/docs/Web/JavaScript/Guide/Expressions_and_Operators +/es/docs/Gu%C3%ADa_JavaScript_1.5/Expresiones_Regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Expresiones_y_operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators +/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas /es/docs/Web/JavaScript/Guide/Funciones#Predefined_functions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_eval /es/docs/Web/JavaScript/Guide/Funciones#eval_Function +/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isFinite /es/docs/Web/JavaScript/Guide/Funciones#isFinite_function +/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isNaN /es/docs/Web/JavaScript/Guide/Funciones#isNaN_function +/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funciones_Number_y_String /es/docs/Web/JavaScript/Guide/Funciones#Number_and_String_functions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funciones_escape_y_unescape /es/docs/Web/JavaScript/Guide/Funciones#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5) +/es/docs/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funciones_parseInt_y_parseFloat /es/docs/Web/JavaScript/Guide/Funciones#parseInt_and_parseFloat_functions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/es/docs/Gu%C3%ADa_JavaScript_1.5/Literales /es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales +/es/docs/Gu%C3%ADa_JavaScript_1.5/Llamando_Funciones /es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones +/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Mas_sobre_herencia_de_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Determinando_relaciones_de_instancia /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Como_determinar_las_relaciones_entre_instancias +/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Herencia_no_m%C3%BAltiple /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple +/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Informaci%C3%B3n_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores +/es/docs/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Referencia +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Gu%C3%ADa_JavaScript_1.5/Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores +/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_aritm%C3%A9ticos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos +/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_asignaci%C3%B3n /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_asignaci.C3.B3n +/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string) /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators +/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_comparaci%C3%B3n /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_comparaci.C3.B3n +/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators +/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_l%C3%B3gicos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos +/es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_sobre_bits /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit +/es/docs/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencia_condicional /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales +/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_bucle /es/docs/Web/JavaScript/Guide/Loops_and_iteration +/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects +/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement +/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement +/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manipulaci%C3%B3n_de_objetos /es/docs/Web/JavaScript/Guide +/es/docs/Gu%C3%ADa_JavaScript_1.5/Sentencias_para_comentarios /es/docs/Web/JavaScript/Guide +/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_may%C3%BAsculas_y_min%C3%BAsculas_y_considerar_entrada_multil%C3%ADnea /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_ignorar_mayusculas_minusculas,_y_considerar_entrada_multilinea /es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil%C3%ADnea +/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5/Unicode /en-US/docs/Web/JavaScript/Reference/Lexical_grammar +/es/docs/Gu%C3%ADa_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Gu%C3%ADa_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Gu%C3%ADa_JavaScript_1.5/Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/Gu%C3%ADa_JavaScript_1.5/Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/Gu%C3%ADa_JavaScript_1.5:Acerca_de_esta_gu%C3%ADa /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/Gu%C3%ADa_JavaScript_1.5:Caracter%C3%ADsticas_generales_del_lenguaje /es/docs/Gu%C3%ADa_JavaScript_1.5/Caracter%C3%ADsticas_generales_del_lenguaje +/es/docs/Gu%C3%ADa_JavaScript_1.5:Concepto_General_de_LiveConnect:Conversiones_de_Tipo_de_Datos:Conversiones_de_Java_a_JavaScript /es/docs/Gu%C3%ADa_JavaScript_1.5/Concepto_General_de_LiveConnect/Conversiones_de_Tipo_de_Datos/Conversiones_de_Java_a_JavaScript +/es/docs/Gu%C3%ADa_JavaScript_1.5:Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/Gu%C3%ADa_JavaScript_1.5:Constantes /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Borrando_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Definiendo_las_funciones_get_y_set /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Definiendo_los_m%C3%A9todos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_los_m.C3.A9todos +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Definiendo_propiedades_para_un_tipo_de_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definici.C3.B3n_de_las_propiedades_de_un_tipo_de_objeto +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Indexando_las_propiedades_del_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Propiedades_del_objeto_indexado +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Usando_this_para_referirse_al_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_this_para_las_referencias_a_objetos +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Usando_una_funci%C3%B3n_constructora /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_una_funci.C3.B3n_constructora +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Using_Object_Initializers /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_nuevos_objetos:Utilizando_Objetos_Iniciadores /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto +/es/docs/Gu%C3%ADa_JavaScript_1.5:Crear_una_expresi%C3%B3n_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Empleado /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee +/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee +/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Constructores_m%C3%A1s_flexibles /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles +/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Creando_la_jerarqu%C3%ADa /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia +/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Propiedades_de_objetos /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Propiedades_de_objetos +/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Propiedades_de_objetos:A%C3%B1adiendo_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#A.C3.B1adir_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5:El_ejemplo_Employee:Propiedades_de_objetos:Heredando_las_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Herencia_de_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5:Escribir_un_patr%C3%B3n_de_expresi%C3%B3n_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Expresiones /es/docs/Web/JavaScript/Guide/Expressions_and_Operators +/es/docs/Gu%C3%ADa_JavaScript_1.5:Expresiones_Regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Expresiones_y_operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators +/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas /es/docs/Web/JavaScript/Guide/Funciones#Predefined_functions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funci%C3%B3n_eval /es/docs/Web/JavaScript/Guide/Funciones#eval_Function +/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funci%C3%B3n_isFinite /es/docs/Web/JavaScript/Guide/Funciones#isFinite_function +/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funci%C3%B3n_isNaN /es/docs/Web/JavaScript/Guide/Funciones#isNaN_function +/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funciones_Number_y_String /es/docs/Web/JavaScript/Guide/Funciones#Number_and_String_functions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funciones_escape_y_unescape /es/docs/Web/JavaScript/Guide/Funciones#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5) +/es/docs/Gu%C3%ADa_JavaScript_1.5:Funciones_predefinidas:Funciones_parseInt_y_parseFloat /es/docs/Web/JavaScript/Guide/Funciones#parseInt_and_parseFloat_functions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Lenguajes_basados_en_clases_frente_a_basados_en_prototipos /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/es/docs/Gu%C3%ADa_JavaScript_1.5:Literales /es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales +/es/docs/Gu%C3%ADa_JavaScript_1.5:Llamando_Funciones /es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones +/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Mas_sobre_herencia_de_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades:Determinando_relaciones_de_instancia /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Como_determinar_las_relaciones_entre_instancias +/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades:Herencia_no_m%C3%BAltiple /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple +/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades:Informaci%C3%B3n_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores +/es/docs/Gu%C3%ADa_JavaScript_1.5:M%C3%A1s_sobre_la_herencia_de_propiedades:Valores_locales_frente_a_los_heredados /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos /es/docs/Web/JavaScript/Referencia +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_base_predefinidos:Objeto_String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Gu%C3%ADa_JavaScript_1.5:Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_aritm%C3%A9ticos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_de_asignaci%C3%B3n /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_asignaci.C3.B3n +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_de_cadena_de_caracteres_(string) /es/docs/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_cadena_de_caracteres_(string) +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_de_cadenas_de_caracteres_(string) /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_de_comparaci%C3%B3n /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_comparaci.C3.B3n +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_especiales /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_l%C3%B3gicos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos +/es/docs/Gu%C3%ADa_JavaScript_1.5:Operadores:Operadores_sobre_bits /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit +/es/docs/Gu%C3%ADa_JavaScript_1.5:Predefined_Functions:eval_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencia_condicional /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales +/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencia_de_bloque /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_bucle /es/docs/Web/JavaScript/Guide/Loops_and_iteration +/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_manejo_de_excepciones /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects +/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_manejo_de_excepciones:throw /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement +/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_manejo_de_excepciones:try...catch /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement +/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_de_manipulaci%C3%B3n_de_objetos /es/docs/Web/JavaScript/Guide +/es/docs/Gu%C3%ADa_JavaScript_1.5:Sentencias_para_comentarios /es/docs/Web/JavaScript/Guide +/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares:Ejecutar_una_busqueda_global,_discriminar_may%C3%BAsculas_y_min%C3%BAsculas_y_considerar_entrada_multil%C3%ADnea /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares:Ejecutar_una_busqueda_global,_ignorar_mayusculas_minusculas,_y_considerar_entrada_multilinea /es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil%C3%ADnea +/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares:Ejemplos_de_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Trabajar_con_expresiones_regulares:Usar_coincidencias_de_subcadenas_parentizadas /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Gu%C3%ADa_JavaScript_1.5:Unicode /en-US/docs/Web/JavaScript/Reference/Lexical_grammar +/es/docs/Gu%C3%ADa_JavaScript_1.5:Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Gu%C3%ADa_JavaScript_1.5:Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Gu%C3%ADa_JavaScript_1.5:Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/Gu%C3%ADa_JavaScript_1.5:Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/Gu%C3%ADa_de_referencia_de_CSS /es/docs/Web/CSS/Referencia_CSS +/es/docs/HTML /es/docs/Web/HTML +/es/docs/HTML/Block-level_elements /es/docs/Web/HTML/Block-level_elements +/es/docs/HTML/Canvas /es/docs/Web/HTML/Canvas +/es/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas /es/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas +/es/docs/HTML/Canvas/Drawing_graphics_with_canvas /es/docs/Web/HTML/Canvas/Drawing_graphics_with_canvas +/es/docs/HTML/Consejos_para_la_creaci%C3%B3n_de_p%C3%A1ginas_HTML_de_carga_r%C3%A1pida /es/docs/Web/HTML/Consejos_para_la_creaci%C3%B3n_de_p%C3%A1ginas_HTML_de_carga_r%C3%A1pida +/es/docs/HTML/Element /es/docs/Web/HTML/Elemento +/es/docs/HTML/Element/a /es/docs/Web/HTML/Elemento/a +/es/docs/HTML/Element/form /es/docs/Web/HTML/Elemento/form +/es/docs/HTML/Element/hgroup /es/docs/Web/HTML/Elemento/hgroup +/es/docs/HTML/Element/iframe /es/docs/Web/HTML/Elemento/iframe +/es/docs/HTML/Element/section /es/docs/Web/HTML/Elemento/section +/es/docs/HTML/Element/tabla /es/docs/Web/HTML/Elemento/table +/es/docs/HTML/Element/table /es/docs/Web/HTML/Elemento/table +/es/docs/HTML/Element/video /es/docs/Web/HTML/Elemento/video +/es/docs/HTML/Elemento /es/docs/Web/HTML/Elemento +/es/docs/HTML/Elemento/%3Chtml%3E /es/docs/Web/HTML/Elemento/%3Chtml%3E +/es/docs/HTML/Elemento/Audio /es/docs/Web/HTML/Elemento/Audio +/es/docs/HTML/Elemento/Elementos_t%C3%ADtulos /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML/Elemento/Progreso /es/docs/Web/HTML/Elemento/progress +/es/docs/HTML/Elemento/Tipos_de_elementos /es/docs/Web/HTML/Elemento/Tipos_de_elementos +/es/docs/HTML/Elemento/a /es/docs/Web/HTML/Elemento/a +/es/docs/HTML/Elemento/abbr /es/docs/Web/HTML/Elemento/abbr +/es/docs/HTML/Elemento/acronym /es/docs/Web/HTML/Elemento/acronym +/es/docs/HTML/Elemento/address /es/docs/Web/HTML/Elemento/address +/es/docs/HTML/Elemento/applet /es/docs/Web/HTML/Elemento/applet +/es/docs/HTML/Elemento/area /es/docs/Web/HTML/Elemento/area +/es/docs/HTML/Elemento/article /es/docs/Web/HTML/Elemento/article +/es/docs/HTML/Elemento/aside /es/docs/Web/HTML/Elemento/aside +/es/docs/HTML/Elemento/b /es/docs/Web/HTML/Elemento/b +/es/docs/HTML/Elemento/base /es/docs/Web/HTML/Elemento/base +/es/docs/HTML/Elemento/basefont /es/docs/Web/HTML/Elemento/basefont +/es/docs/HTML/Elemento/bdo /es/docs/Web/HTML/Elemento/bdo +/es/docs/HTML/Elemento/big /es/docs/Web/HTML/Elemento/big +/es/docs/HTML/Elemento/blockquote /es/docs/Web/HTML/Elemento/blockquote +/es/docs/HTML/Elemento/body /es/docs/Web/HTML/Elemento/body +/es/docs/HTML/Elemento/br /es/docs/Web/HTML/Elemento/br +/es/docs/HTML/Elemento/button /es/docs/Web/HTML/Elemento/button +/es/docs/HTML/Elemento/canvas /es/docs/Web/HTML/Elemento/canvas +/es/docs/HTML/Elemento/caption /es/docs/Web/HTML/Elemento/caption +/es/docs/HTML/Elemento/center /es/docs/Web/HTML/Elemento/center +/es/docs/HTML/Elemento/cite /es/docs/Web/HTML/Elemento/cite +/es/docs/HTML/Elemento/code /es/docs/Web/HTML/Elemento/code +/es/docs/HTML/Elemento/col /es/docs/Web/HTML/Elemento/col +/es/docs/HTML/Elemento/colgroup /es/docs/Web/HTML/Elemento/colgroup +/es/docs/HTML/Elemento/dd /es/docs/Web/HTML/Elemento/dd +/es/docs/HTML/Elemento/del /es/docs/Web/HTML/Elemento/del +/es/docs/HTML/Elemento/dfn /es/docs/Web/HTML/Elemento/dfn +/es/docs/HTML/Elemento/dir /es/docs/Web/HTML/Elemento/dir +/es/docs/HTML/Elemento/div /es/docs/Web/HTML/Elemento/div +/es/docs/HTML/Elemento/dl /es/docs/Web/HTML/Elemento/dl +/es/docs/HTML/Elemento/dt /es/docs/Web/HTML/Elemento/dt +/es/docs/HTML/Elemento/em /es/docs/Web/HTML/Elemento/em +/es/docs/HTML/Elemento/embed /es/docs/Web/HTML/Elemento/embed +/es/docs/HTML/Elemento/etiqueta /es/docs/Web/HTML/Elemento/label +/es/docs/HTML/Elemento/fieldset /es/docs/Web/HTML/Elemento/fieldset +/es/docs/HTML/Elemento/figure /es/docs/Web/HTML/Elemento/figure +/es/docs/HTML/Elemento/font /es/docs/Web/HTML/Elemento/font +/es/docs/HTML/Elemento/footer /es/docs/Web/HTML/Elemento/footer +/es/docs/HTML/Elemento/frame /es/docs/Web/HTML/Elemento/frame +/es/docs/HTML/Elemento/frameset /es/docs/Web/HTML/Elemento/frameset +/es/docs/HTML/Elemento/h1 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML/Elemento/h2 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML/Elemento/h3 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML/Elemento/h4 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML/Elemento/h5 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML/Elemento/h6 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML/Elemento/head /es/docs/Web/HTML/Elemento/head +/es/docs/HTML/Elemento/header /es/docs/Web/HTML/Elemento/header +/es/docs/HTML/Elemento/hr /es/docs/Web/HTML/Elemento/hr +/es/docs/HTML/Elemento/html /es/docs/Web/HTML/Elemento/html +/es/docs/HTML/Elemento/i /es/docs/Web/HTML/Elemento/i +/es/docs/HTML/Elemento/img /es/docs/Web/HTML/Elemento/img +/es/docs/HTML/Elemento/input /es/docs/Web/HTML/Elemento/input +/es/docs/HTML/Elemento/ins /es/docs/Web/HTML/Elemento/ins +/es/docs/HTML/Elemento/kbd /es/docs/Web/HTML/Elemento/kbd +/es/docs/HTML/Elemento/keygen /es/docs/Web/HTML/Elemento/keygen +/es/docs/HTML/Elemento/label /es/docs/Web/HTML/Elemento/label +/es/docs/HTML/Elemento/legend /es/docs/Web/HTML/Elemento/legend +/es/docs/HTML/Elemento/li /es/docs/Web/HTML/Elemento/li +/es/docs/HTML/Elemento/link /es/docs/Web/HTML/Elemento/link +/es/docs/HTML/Elemento/main /es/docs/Web/HTML/Elemento/main +/es/docs/HTML/Elemento/map /es/docs/Web/HTML/Elemento/map +/es/docs/HTML/Elemento/mark /es/docs/Web/HTML/Elemento/mark +/es/docs/HTML/Elemento/menu /es/docs/Web/HTML/Elemento/menu +/es/docs/HTML/Elemento/meta /es/docs/Web/HTML/Elemento/meta +/es/docs/HTML/Elemento/nav /es/docs/Web/HTML/Elemento/nav +/es/docs/HTML/Elemento/noframes /es/docs/Web/HTML/Elemento/noframes +/es/docs/HTML/Elemento/noscript /es/docs/Web/HTML/Elemento/noscript +/es/docs/HTML/Elemento/ol /es/docs/Web/HTML/Elemento/ol +/es/docs/HTML/Elemento/p /es/docs/Web/HTML/Elemento/p +/es/docs/HTML/Elemento/param /es/docs/Web/HTML/Elemento/param +/es/docs/HTML/Elemento/pre /es/docs/Web/HTML/Elemento/pre +/es/docs/HTML/Elemento/preformato /es/docs/Web/HTML/Elemento/pre +/es/docs/HTML/Elemento/q /es/docs/Web/HTML/Elemento/q +/es/docs/HTML/Elemento/s /es/docs/Web/HTML/Elemento/s +/es/docs/HTML/Elemento/samp /es/docs/Web/HTML/Elemento/samp +/es/docs/HTML/Elemento/small /es/docs/Web/HTML/Elemento/small +/es/docs/HTML/Elemento/source /es/docs/Web/HTML/Elemento/source +/es/docs/HTML/Elemento/span /es/docs/Web/HTML/Elemento/span +/es/docs/HTML/Elemento/strike /es/docs/Web/HTML/Elemento/strike +/es/docs/HTML/Elemento/strong /es/docs/Web/HTML/Elemento/strong +/es/docs/HTML/Elemento/style /es/docs/Web/HTML/Elemento/style +/es/docs/HTML/Elemento/sub /es/docs/Web/HTML/Elemento/sub +/es/docs/HTML/Elemento/sup /es/docs/Web/HTML/Elemento/sup +/es/docs/HTML/Elemento/time /es/docs/Web/HTML/Elemento/time +/es/docs/HTML/Elemento/title /es/docs/Web/HTML/Elemento/title +/es/docs/HTML/Elemento/tt /es/docs/Web/HTML/Elemento/tt +/es/docs/HTML/Elemento/u /es/docs/Web/HTML/Elemento/u +/es/docs/HTML/Elemento/ul /es/docs/Web/HTML/Elemento/ul +/es/docs/HTML/Elemento/var /es/docs/Web/HTML/Elemento/var +/es/docs/HTML/Elemento/video /es/docs/Web/HTML/Elemento/video +/es/docs/HTML/Formatos_admitidos_de_audio_y_video_en_html5 /es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 +/es/docs/HTML/HTML5/Introduction_to_HTML5 /es/docs/HTML/HTML5/Introducci%C3%B3n_a_HTML5 +/es/docs/HTML/La_importancia_de_comentar_correctamente /es/docs/Web/HTML/La_importancia_de_comentar_correctamente +/es/docs/HTML:Canvas /es/docs/Web/HTML/Canvas +/es/docs/HTML:Comunidad /es/docs/HTML/Comunidad +/es/docs/HTML:Element /es/docs/Web/HTML/Elemento +/es/docs/HTML:Element:a /es/docs/Web/HTML/Elemento/a +/es/docs/HTML:Elemento /es/docs/Web/HTML/Elemento +/es/docs/HTML:Elemento:Tipos_de_elementos /es/docs/Web/HTML/Elemento/Tipos_de_elementos +/es/docs/HTML:Elemento:a /es/docs/Web/HTML/Elemento/a +/es/docs/HTML:Elemento:abbr /es/docs/Web/HTML/Elemento/abbr +/es/docs/HTML:Elemento:acronym /es/docs/Web/HTML/Elemento/acronym +/es/docs/HTML:Elemento:address /es/docs/Web/HTML/Elemento/address +/es/docs/HTML:Elemento:applet /es/docs/Web/HTML/Elemento/applet +/es/docs/HTML:Elemento:area /es/docs/Web/HTML/Elemento/area +/es/docs/HTML:Elemento:b /es/docs/Web/HTML/Elemento/b +/es/docs/HTML:Elemento:base /es/docs/Web/HTML/Elemento/base +/es/docs/HTML:Elemento:basefont /es/docs/Web/HTML/Elemento/basefont +/es/docs/HTML:Elemento:bdo /es/docs/Web/HTML/Elemento/bdo +/es/docs/HTML:Elemento:big /es/docs/Web/HTML/Elemento/big +/es/docs/HTML:Elemento:blockquote /es/docs/Web/HTML/Elemento/blockquote +/es/docs/HTML:Elemento:body /es/docs/Web/HTML/Elemento/body +/es/docs/HTML:Elemento:br /es/docs/Web/HTML/Elemento/br +/es/docs/HTML:Elemento:button /es/docs/Web/HTML/Elemento/button +/es/docs/HTML:Elemento:caption /es/docs/Web/HTML/Elemento/caption +/es/docs/HTML:Elemento:center /es/docs/Web/HTML/Elemento/center +/es/docs/HTML:Elemento:cite /es/docs/Web/HTML/Elemento/cite +/es/docs/HTML:Elemento:code /es/docs/Web/HTML/Elemento/code +/es/docs/HTML:Elemento:col /es/docs/Web/HTML/Elemento/col +/es/docs/HTML:Elemento:colgroup /es/docs/Web/HTML/Elemento/colgroup +/es/docs/HTML:Elemento:dd /es/docs/Web/HTML/Elemento/dd +/es/docs/HTML:Elemento:del /es/docs/Web/HTML/Elemento/del +/es/docs/HTML:Elemento:dfn /es/docs/Web/HTML/Elemento/dfn +/es/docs/HTML:Elemento:dir /es/docs/Web/HTML/Elemento/dir +/es/docs/HTML:Elemento:div /es/docs/Web/HTML/Elemento/div +/es/docs/HTML:Elemento:dl /es/docs/Web/HTML/Elemento/dl +/es/docs/HTML:Elemento:dt /es/docs/Web/HTML/Elemento/dt +/es/docs/HTML:Elemento:em /es/docs/Web/HTML/Elemento/em +/es/docs/HTML:Elemento:fieldset /es/docs/Web/HTML/Elemento/fieldset +/es/docs/HTML:Elemento:font /es/docs/Web/HTML/Elemento/font +/es/docs/HTML:Elemento:frame /es/docs/Web/HTML/Elemento/frame +/es/docs/HTML:Elemento:frameset /es/docs/Web/HTML/Elemento/frameset +/es/docs/HTML:Elemento:h1 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML:Elemento:h2 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML:Elemento:h3 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML:Elemento:h4 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML:Elemento:h5 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML:Elemento:h6 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/HTML:Elemento:head /es/docs/Web/HTML/Elemento/head +/es/docs/HTML:Elemento:hr /es/docs/Web/HTML/Elemento/hr +/es/docs/HTML:Elemento:html /es/docs/Web/HTML/Elemento/html +/es/docs/HTML:Elemento:i /es/docs/Web/HTML/Elemento/i +/es/docs/HTML:Elemento:ins /es/docs/Web/HTML/Elemento/ins +/es/docs/HTML:Elemento:kbd /es/docs/Web/HTML/Elemento/kbd +/es/docs/HTML:Elemento:label /es/docs/Web/HTML/Elemento/label +/es/docs/HTML:Elemento:legend /es/docs/Web/HTML/Elemento/legend +/es/docs/HTML:Elemento:li /es/docs/Web/HTML/Elemento/li +/es/docs/HTML:Elemento:link /es/docs/Web/HTML/Elemento/link +/es/docs/HTML:Elemento:map /es/docs/Web/HTML/Elemento/map +/es/docs/HTML:Elemento:menu /es/docs/Web/HTML/Elemento/menu +/es/docs/HTML:Elemento:meta /es/docs/Web/HTML/Elemento/meta +/es/docs/HTML:Elemento:noframes /es/docs/Web/HTML/Elemento/noframes +/es/docs/HTML:Elemento:noscript /es/docs/Web/HTML/Elemento/noscript +/es/docs/HTML:Elemento:ol /es/docs/Web/HTML/Elemento/ol +/es/docs/HTML:Elemento:p /es/docs/Web/HTML/Elemento/p +/es/docs/HTML:Elemento:param /es/docs/Web/HTML/Elemento/param +/es/docs/HTML:Elemento:pre /es/docs/Web/HTML/Elemento/pre +/es/docs/HTML:Elemento:q /es/docs/Web/HTML/Elemento/q +/es/docs/HTML:Elemento:s /es/docs/Web/HTML/Elemento/s +/es/docs/HTML:Elemento:samp /es/docs/Web/HTML/Elemento/samp +/es/docs/HTML:Elemento:small /es/docs/Web/HTML/Elemento/small +/es/docs/HTML:Elemento:span /es/docs/Web/HTML/Elemento/span +/es/docs/HTML:Elemento:strike /es/docs/Web/HTML/Elemento/strike +/es/docs/HTML:Elemento:strong /es/docs/Web/HTML/Elemento/strong +/es/docs/HTML:Elemento:style /es/docs/Web/HTML/Elemento/style +/es/docs/HTML:Elemento:sub /es/docs/Web/HTML/Elemento/sub +/es/docs/HTML:Elemento:sup /es/docs/Web/HTML/Elemento/sup +/es/docs/HTML:Elemento:title /es/docs/Web/HTML/Elemento/title +/es/docs/HTML:Elemento:tt /es/docs/Web/HTML/Elemento/tt +/es/docs/HTML:Elemento:u /es/docs/Web/HTML/Elemento/u +/es/docs/HTML:Elemento:ul /es/docs/Web/HTML/Elemento/ul +/es/docs/HTML:Elemento:var /es/docs/Web/HTML/Elemento/var +/es/docs/HTML:La_importancia_de_comentar_correctamente /es/docs/Web/HTML/La_importancia_de_comentar_correctamente +/es/docs/Herramientas_API /es/docs/API_del_Toolkit +/es/docs/Html_Validator_(externo) https://addons.mozilla.org/firefox/249/ +/es/docs/IndexedDB-840092-dup /es/docs/Web/API/IndexedDB_API +/es/docs/IndexedDB-840092-dup/Conceptos_Basicos_Detras_De_IndexedDB /es/docs/Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB +/es/docs/IndexedDB-840092-dup/Usando_IndexedDB /es/docs/Web/API/IndexedDB_API/Usando_IndexedDB +/es/docs/Instalar_el_manifest /es/docs/Manifiesto_de_instalaci%C3%B3n +/es/docs/Install_Manifests /es/docs/Manifiesto_de_instalaci%C3%B3n +/es/docs/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos /es/docs/Web/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos +/es/docs/Introducci%C3%B3n_a_XML /es/docs/Web/XML/Introducci%C3%B3n_a_XML +/es/docs/Introduction /es/docs/Mozilla/Developer_guide/Introduction +/es/docs/Introduction_to_using_XPath_in_JavaScript /es/docs/Web/JavaScript/Introduction_to_using_XPath_in_JavaScript +/es/docs/JavaScript /es/docs/Web/JavaScript +/es/docs/JavaScript/Acerca_de_JavaScript /es/docs/Web/JavaScript/Acerca_de_JavaScript +/es/docs/JavaScript/Guide /es/docs/Web/JavaScript/Guide +/es/docs/JavaScript/Guide/AcercaDe /es/docs/Web/JavaScript/Guide/Introducción +/es/docs/JavaScript/Guide/Closures /es/docs/Web/JavaScript/Closures +/es/docs/JavaScript/Guide/Details_of_the_Object_Model /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/es/docs/JavaScript/Guide/Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/JavaScript/Guide/Inheritance_Revisited /es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain +/es/docs/JavaScript/Guide/JavaScript_Overview /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/JavaScript/Guide/Obsolete_Pages /es/docs/Web/JavaScript/Guide +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5 /es/docs/Web/JavaScript/Guide +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Acerca_de_esta_gu%C3%ADa /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Constructores_m%C3%A1s_flexibles /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_los_m%C3%A9todos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_los_m.C3.A9todos +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_propiedades_para_un_tipo_de_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definici.C3.B3n_de_las_propiedades_de_un_tipo_de_objeto +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Indexando_las_propiedades_del_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Propiedades_del_objeto_indexado +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_this_para_referirse_al_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_this_para_las_referencias_a_objetos +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_una_funci%C3%B3n_constructora /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_una_funci.C3.B3n_constructora +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_una_expresi%C3%B3n_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Empleado /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Creando_la_jerarqu%C3%ADa /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Propiedades_de_objetos +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/A%C3%B1adiendo_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#A.C3.B1adir_propiedades +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/Heredando_las_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Herencia_de_propiedades +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Escribir_un_patr%C3%B3n_de_expresi%C3%B3n_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Excepci%C3%B3n_del_DOM /es/docs/Web/API/DOMException +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones /es/docs/Web/JavaScript/Guide/Expressions_and_Operators +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones_Regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones_y_operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_Number_y_String /es/docs/Web/JavaScript/Guide/Funciones#Number_and_String_functions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_escape_y_unescape /es/docs/Web/JavaScript/Guide/Funciones#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5) +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_parseInt_y_parseFloat /es/docs/Web/JavaScript/Guide/Funciones#parseInt_and_parseFloat_functions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas /es/docs/Web/JavaScript/Guide/Funciones#Predefined_functions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_eval /es/docs/Web/JavaScript/Guide/Funciones#eval_Function +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isFinite /es/docs/Web/JavaScript/Guide/Funciones#isFinite_function +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isNaN /es/docs/Web/JavaScript/Guide/Funciones#isNaN_function +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Literales /es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Llamando_Funciones /es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Mas_sobre_herencia_de_propiedades +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Determinando_relaciones_de_instancia /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Como_determinar_las_relaciones_entre_instancias +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Herencia_no_m%C3%BAltiple /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Informaci%C3%B3n_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Referencia +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_aritm%C3%A9ticos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_asignaci%C3%B3n /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_asignaci.C3.B3n +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string) /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_comparaci%C3%B3n /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_comparaci.C3.B3n +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_l%C3%B3gicos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_sobre_bits /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencia_condicional /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_bucle /es/docs/Web/JavaScript/Guide/Loops_and_iteration +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manipulaci%C3%B3n_de_objetos /es/docs/Web/JavaScript/Guide +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_para_comentarios /es/docs/Web/JavaScript/Guide +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_may%C3%BAsculas_y_min%C3%BAsculas_y_considerar_entrada_multil%C3%ADnea /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_ignorar_mayusculas_minusculas,_y_considerar_entrada_multilinea /es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil%C3%ADnea +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Unicode /en-US/docs/Web/JavaScript/Reference/Lexical_grammar +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/JavaScript/Guide/Trabajando_con_objectos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos +/es/docs/JavaScript/Guide/Valores,_variables_y_literales /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos /es/docs/Web/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos +/es/docs/JavaScript/Novedades_en_JavaScript /es/docs/Web/JavaScript/Novedades_en_JavaScript +/es/docs/JavaScript/Novedades_en_JavaScript/1.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.5 +/es/docs/JavaScript/Novedades_en_JavaScript/1.6 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.6 +/es/docs/JavaScript/Novedades_en_JavaScript/1.7 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.7 +/es/docs/JavaScript/Novedades_en_JavaScript/1.8 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8 +/es/docs/JavaScript/Novedades_en_JavaScript/1.8.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8.5 +/es/docs/JavaScript/Novedades_en_JavaScript/Novedades_en_JavaScript_1.8.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8.5 +/es/docs/JavaScript/Primeros_Pasos /es/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/es/docs/JavaScript/Reference/Global_Objects/Array/push /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push +/es/docs/JavaScript/Reference/Global_Objects/RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp +/es/docs/JavaScript/Reference/Operators/function /es/docs/Web/JavaScript/Referencia/Operadores/function +/es/docs/JavaScript/Reference/Operators/get /es/docs/Web/JavaScript/Referencia/Funciones/get +/es/docs/JavaScript/Reference/Operators/in /es/docs/Web/JavaScript/Referencia/Operadores/in +/es/docs/JavaScript/Reference/Operators/this /es/docs/Web/JavaScript/Referencia/Operadores/this +/es/docs/JavaScript/Referencia /es/docs/Web/JavaScript/Referencia +/es/docs/JavaScript/Referencia/Acerca_de /es/docs/Web/JavaScript/Referencia/Acerca_de +/es/docs/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas /es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas +/es/docs/JavaScript/Referencia/Caracter%C3%ADsticas_Despreciadas /es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas +/es/docs/JavaScript/Referencia/Comentarios /es/docs/Web/JavaScript/Referencia/Comentarios +/es/docs/JavaScript/Referencia/Comentarios/comentario /es/docs/temp_comentarios +/es/docs/JavaScript/Referencia/Funciones /es/docs/Web/JavaScript/Referencia/Funciones +/es/docs/JavaScript/Referencia/Funciones/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/JavaScript/Referencia/Funciones/arguments /es/docs/Web/JavaScript/Referencia/Funciones/arguments +/es/docs/JavaScript/Referencia/Funciones/arguments/callee /es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee +/es/docs/JavaScript/Referencia/Funciones_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/JavaScript/Referencia/Funciones_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/JavaScript/Referencia/Funciones_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/JavaScript/Referencia/Funciones_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object +/es/docs/JavaScript/Referencia/Funciones_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/JavaScript/Referencia/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI +/es/docs/JavaScript/Referencia/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent +/es/docs/JavaScript/Referencia/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI +/es/docs/JavaScript/Referencia/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent +/es/docs/JavaScript/Referencia/Funciones_globales/eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/JavaScript/Referencia/Funciones_globales/isFinite /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite +/es/docs/JavaScript/Referencia/Funciones_globales/isNaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN +/es/docs/JavaScript/Referencia/Funciones_globales/parseInt /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt +/es/docs/JavaScript/Referencia/Objetos_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/JavaScript/Referencia/Objetos_globales/Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/JavaScript/Referencia/Objetos_globales/Array/forEach /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach +/es/docs/JavaScript/Referencia/Objetos_globales/Array/indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf +/es/docs/JavaScript/Referencia/Objetos_globales/Array/push /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push +/es/docs/JavaScript/Referencia/Objetos_globales/Array/reduce /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce +/es/docs/JavaScript/Referencia/Objetos_globales/Array/reduceRight /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight +/es/docs/JavaScript/Referencia/Objetos_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/JavaScript/Referencia/Objetos_globales/Boolean/toSource /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource +/es/docs/JavaScript/Referencia/Objetos_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/JavaScript/Referencia/Objetos_globales/Date/UTC /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC +/es/docs/JavaScript/Referencia/Objetos_globales/Date/now /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now +/es/docs/JavaScript/Referencia/Objetos_globales/Date/parse /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse +/es/docs/JavaScript/Referencia/Objetos_globales/Error /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error +/es/docs/JavaScript/Referencia/Objetos_globales/Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function +/es/docs/JavaScript/Referencia/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/apply +/es/docs/JavaScript/Referencia/Objetos_globales/Function/arguments /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments +/es/docs/JavaScript/Referencia/Objetos_globales/Function/call /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/call +/es/docs/JavaScript/Referencia/Objetos_globales/Function/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype +/es/docs/JavaScript/Referencia/Objetos_globales/JSON /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON +/es/docs/JavaScript/Referencia/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify +/es/docs/JavaScript/Referencia/Objetos_globales/Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math +/es/docs/JavaScript/Referencia/Objetos_globales/Math/E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/E +/es/docs/JavaScript/Referencia/Objetos_globales/Math/LN10 /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN10 +/es/docs/JavaScript/Referencia/Objetos_globales/Math/LN2 /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN2 +/es/docs/JavaScript/Referencia/Objetos_globales/Math/LOG2E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E +/es/docs/JavaScript/Referencia/Objetos_globales/Math/floor /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/floor +/es/docs/JavaScript/Referencia/Objetos_globales/Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number +/es/docs/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY +/es/docs/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY +/es/docs/JavaScript/Referencia/Objetos_globales/Number/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype +/es/docs/JavaScript/Referencia/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString +/es/docs/JavaScript/Referencia/Objetos_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object +/es/docs/JavaScript/Referencia/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/constructor +/es/docs/JavaScript/Referencia/Objetos_globales/Object/create /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/create +/es/docs/JavaScript/Referencia/Objetos_globales/Object/defineProperties /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties +/es/docs/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty +/es/docs/JavaScript/Referencia/Objetos_globales/Object/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString +/es/docs/JavaScript/Referencia/Objetos_globales/Object/unwatch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch +/es/docs/JavaScript/Referencia/Objetos_globales/Object/watch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch +/es/docs/JavaScript/Referencia/Objetos_globales/RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp +/es/docs/JavaScript/Referencia/Objetos_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/JavaScript/Referencia/Objetos_globales/String/anchor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor +/es/docs/JavaScript/Referencia/Objetos_globales/String/big /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big +/es/docs/JavaScript/Referencia/Objetos_globales/String/blink /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink +/es/docs/JavaScript/Referencia/Objetos_globales/String/bold /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold +/es/docs/JavaScript/Referencia/Objetos_globales/String/charAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt +/es/docs/JavaScript/Referencia/Objetos_globales/String/charCodeAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt +/es/docs/JavaScript/Referencia/Objetos_globales/String/concat /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat +/es/docs/JavaScript/Referencia/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/JavaScript/Referencia/Objetos_globales/String/fixed /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed +/es/docs/JavaScript/Referencia/Objetos_globales/String/fromCharCode /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode +/es/docs/JavaScript/Referencia/Objetos_globales/String/indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf +/es/docs/JavaScript/Referencia/Objetos_globales/String/italics /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics +/es/docs/JavaScript/Referencia/Objetos_globales/String/lastIndexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf +/es/docs/JavaScript/Referencia/Objetos_globales/String/length /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length +/es/docs/JavaScript/Referencia/Objetos_globales/String/link /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link +/es/docs/JavaScript/Referencia/Objetos_globales/String/match /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match +/es/docs/JavaScript/Referencia/Objetos_globales/String/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype +/es/docs/JavaScript/Referencia/Objetos_globales/String/replace /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace +/es/docs/JavaScript/Referencia/Objetos_globales/String/search /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search +/es/docs/JavaScript/Referencia/Objetos_globales/String/slice /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice +/es/docs/JavaScript/Referencia/Objetos_globales/String/small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small +/es/docs/JavaScript/Referencia/Objetos_globales/String/split /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split +/es/docs/JavaScript/Referencia/Objetos_globales/String/strike /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike +/es/docs/JavaScript/Referencia/Objetos_globales/String/sub /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub +/es/docs/JavaScript/Referencia/Objetos_globales/String/substr /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr +/es/docs/JavaScript/Referencia/Objetos_globales/String/substring /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring +/es/docs/JavaScript/Referencia/Objetos_globales/String/sup /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup +/es/docs/JavaScript/Referencia/Objetos_globales/String/toLowerCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase +/es/docs/JavaScript/Referencia/Objetos_globales/String/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString +/es/docs/JavaScript/Referencia/Objetos_globales/String/toUpperCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase +/es/docs/JavaScript/Referencia/Objetos_globales/String/valueOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf +/es/docs/JavaScript/Referencia/Objetos_globales/eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/JavaScript/Referencia/Objetos_globales/parseFloat /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat +/es/docs/JavaScript/Referencia/Objetos_globlales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/JavaScript/Referencia/Objetos_globlales/Function/arguments /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments +/es/docs/JavaScript/Referencia/Operadores /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos /es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos +/es/docs/JavaScript/Referencia/Operadores/Especiales /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/JavaScript/Referencia/Operadores/Especiales/function /es/docs/Web/JavaScript/Referencia/Operadores/function +/es/docs/JavaScript/Referencia/Operadores/Especiales/instanceof /es/docs/Web/JavaScript/Referencia/Operadores/instanceof +/es/docs/JavaScript/Referencia/Operadores/Especiales/typeof /es/docs/Web/JavaScript/Referencia/Operadores/typeof +/es/docs/JavaScript/Referencia/Operadores/Especiales/void /es/docs/Web/JavaScript/Referencia/Operadores/void +/es/docs/JavaScript/Referencia/Operadores/Miembros /es/docs/Web/JavaScript/Referencia/Operadores/Miembros +/es/docs/JavaScript/Referencia/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Referencia/Operadores/this +/es/docs/JavaScript/Referencia/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence +/es/docs/JavaScript/Referencia/Operadores/String /es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos +/es/docs/JavaScript/Referencia/Operadores/function /es/docs/Web/JavaScript/Referencia/Operadores/function +/es/docs/JavaScript/Referencia/Operadores/get /es/docs/Web/JavaScript/Referencia/Funciones/get +/es/docs/JavaScript/Referencia/Operadores/in /es/docs/Web/JavaScript/Referencia/Operadores/in +/es/docs/JavaScript/Referencia/Operadores/instanceof /es/docs/Web/JavaScript/Referencia/Operadores/instanceof +/es/docs/JavaScript/Referencia/Operadores/new /es/docs/Web/JavaScript/Referencia/Operadores/new +/es/docs/JavaScript/Referencia/Operadores/this /es/docs/Web/JavaScript/Referencia/Operadores/this +/es/docs/JavaScript/Referencia/Operadores/typeof /es/docs/Web/JavaScript/Referencia/Operadores/typeof +/es/docs/JavaScript/Referencia/Operadores/void /es/docs/Web/JavaScript/Referencia/Operadores/void +/es/docs/JavaScript/Referencia/Operadores/void_ /es/docs/Web/JavaScript/Referencia/Operadores/void +/es/docs/JavaScript/Referencia/Palabras_Reservadas /es/docs/Web/JavaScript/Referencia/Palabras_Reservadas +/es/docs/JavaScript/Referencia/Propiedades_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/JavaScript/Referencia/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity +/es/docs/JavaScript/Referencia/Propiedades_globales/NaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN +/es/docs/JavaScript/Referencia/Propiedades_globales/undefined /es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined +/es/docs/JavaScript/Referencia/Sentencias /es/docs/Web/JavaScript/Referencia/Sentencias +/es/docs/JavaScript/Referencia/Sentencias/block /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/JavaScript/Referencia/Sentencias/break /es/docs/Web/JavaScript/Referencia/Sentencias/break +/es/docs/JavaScript/Referencia/Sentencias/const /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/JavaScript/Referencia/Sentencias/continue /es/docs/Web/JavaScript/Referencia/Sentencias/continue +/es/docs/JavaScript/Referencia/Sentencias/do...while /es/docs/Web/JavaScript/Referencia/Sentencias/do...while +/es/docs/JavaScript/Referencia/Sentencias/export /es/docs/Web/JavaScript/Referencia/Sentencias/export +/es/docs/JavaScript/Referencia/Sentencias/for /es/docs/Web/JavaScript/Referencia/Sentencias/for +/es/docs/JavaScript/Referencia/Sentencias/for...in /es/docs/Web/JavaScript/Referencia/Sentencias/for...in +/es/docs/JavaScript/Referencia/Sentencias/for_each...in /es/docs/Web/JavaScript/Referencia/Sentencias/for_each...in +/es/docs/JavaScript/Referencia/Sentencias/function /es/docs/Web/JavaScript/Referencia/Sentencias/function +/es/docs/JavaScript/Referencia/Sentencias/if...else /es/docs/Web/JavaScript/Referencia/Sentencias/if...else +/es/docs/JavaScript/Referencia/Sentencias/label /es/docs/Web/JavaScript/Referencia/Sentencias/label +/es/docs/JavaScript/Referencia/Sentencias/return /es/docs/Web/JavaScript/Referencia/Sentencias/return +/es/docs/JavaScript/Referencia/Sentencias/throw /es/docs/Web/JavaScript/Referencia/Sentencias/throw +/es/docs/JavaScript/Referencia/Sentencias/try...catch /es/docs/Web/JavaScript/Referencia/Sentencias/try...catch +/es/docs/JavaScript/Referencia/Sentencias/var /es/docs/Web/JavaScript/Referencia/Sentencias/var +/es/docs/JavaScript/Referencia/Sentencias/while /es/docs/Web/JavaScript/Referencia/Sentencias/while +/es/docs/JavaScript/Una_nueva_introducci%C3%B3n_a_JavaScript /es/docs/Web/JavaScript/Una_re-introducci%C3%B3n_a_JavaScript +/es/docs/JavaScript:Comunidad /es/docs/JavaScript/Comunidad +/es/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps +/es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/es/docs/Learn/CSS/Introduction_to_CSS/Combinaciones_y_selectores_multiples /en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators +/es/docs/Learn/CSS/Introduction_to_CSS/Como_funciona_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works +/es/docs/Learn/CSS/Introduction_to_CSS/Depuraci%C3%B3n_CSS /en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS +/es/docs/Learn/CSS/Introduction_to_CSS/Modelo_cajas /en-US/docs/Learn/CSS/Building_blocks/The_box_model +/es/docs/Learn/CSS/Introduction_to_CSS/Pseudo-clases_y_pseudo-elementos /en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +/es/docs/Learn/CSS/Introduction_to_CSS/Selectores /en-US/docs/Learn/CSS/Building_blocks/Selectors +/es/docs/Learn/CSS/Introduction_to_CSS/Selectores_de_Atributos /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors +/es/docs/Learn/CSS/Introduction_to_CSS/Selectores_simples /en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +/es/docs/Learn/CSS/Introduction_to_CSS/Sintaxis /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured +/es/docs/Learn/CSS/Introduction_to_CSS/Valores_y_unidades /en-US/docs/Learn/CSS/Building_blocks/Values_and_units +/es/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks +/es/docs/Learn/CSS/Styling_boxes/estilizando_tablas /es/docs/Learn/CSS/Building_blocks/Styling_tables +/es/docs/Learn/HTML/Forms/My_first_HTML_form /es/docs/Learn/HTML/Forms/Your_first_HTML_form +/es/docs/Localizaci%C3%B3n:Comunidad /es/docs/Localizaci%C3%B3n/Comunidad +/es/docs/Lugares:Gu%C3%ADa_para_migraci%C3%B3n_con_lugares /es/docs/Lugares/Gu%C3%ADa_para_migraci%C3%B3n_con_lugares +/es/docs/MDC /en-US/docs/Project:es/Como_ayudar +/es/docs/MDN/Comenzando /es/docs/MDN/Contribute/Getting_started +/es/docs/MDN/Contribute/Content /es/docs/MDN/Guidelines +/es/docs/MDN/Contribute/Content/Content_blocks /es/docs/MDN/Guidelines/Content_blocks +/es/docs/MDN/Contribute/Guidelines /es/docs/MDN/Guidelines +/es/docs/MDN/Contribute/Guidelines/Content_blocks /es/docs/MDN/Guidelines/Content_blocks +/es/docs/MDN/Contribute/Guidelines/Convenciones_y_definiciones /es/docs/MDN/Guidelines/Convenciones_y_definiciones +/es/docs/MDN/Contribute/Guidelines/Project:Gu%C3%ADa_de_estilo /es/docs/MDN/Guidelines/Project:Gu%C3%ADa_de_estilo +/es/docs/MDN/Contribute/Herramientas /es/docs/MDN/Tools +/es/docs/MDN/Contribute/Herramientas/Page_regeneration /es/docs/MDN/Tools/Page_regeneration +/es/docs/MDN/Contribute/Herramientas/Template_editing /es/docs/MDN/Tools/Template_editing +/es/docs/MDN/Contribute/Structures /es/docs/MDN/Structures +/es/docs/MDN/Contribute/Structures/Ejemplos_ejecutables /es/docs/MDN/Structures/Ejemplos_ejecutables +/es/docs/MDN/Contribute/Structures/Macros /es/docs/MDN/Structures/Macros +/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros /es/docs/MDN/Structures/Macros/Commonly-used_macros +/es/docs/MDN/Contribute/Structures/Macros/Otras /es/docs/MDN/Structures/Macros/Otras +/es/docs/MDN/Contribute/Structures/Tablas_de_compatibilidad /es/docs/MDN/Structures/Tablas_de_compatibilidad +/es/docs/MDN/Enviar_feedback_sobre_MDN /es/docs/MDN/Contribute/Feedback +/es/docs/MDN/Kuma/Introduction_to_KumaScript /es/docs/MDN/Tools/Introduction_to_KumaScript +/es/docs/Manipular_video_por_medio_de_canvas /es/docs/Web/HTML/anipular_video_por_medio_de_canvas +/es/docs/MathML /es/docs/Web/MathML +/es/docs/MathML/Elemento /es/docs/Web/MathML/Elemento +/es/docs/Monitoring_downloads /es/docs/Vigilar_descargas +/es/docs/Mozilla_Source_Code_Directory_Structure /es/docs/Mozilla/Developer_guide/Source_Code/Mozilla_Source_Code_Directory_Structure +/es/docs/Novedades_en_JavaScript_1.6 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.6 +/es/docs/Novedades_en_JavaScript_1.7 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.7 +/es/docs/Novedades_en_JavaScript_1.8 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.8 +/es/docs/Novedades_en_Javascript_1.5 /es/docs/Web/JavaScript/Novedades_en_JavaScript/1.5 +/es/docs/Participando_en_el_proyecto_Mozilla /es/docs/Participar_en_el_proyecto_Mozilla +/es/docs/Places:Migration_Guide /es/docs/Places/Migration_Guide +/es/docs/Plugins:Comunidad /es/docs/Plugins/Comunidad +/es/docs/Poniendo_al_d%C3%ADa_extensiones_para_Firefox_3 /es/docs/Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 +/es/docs/Portada /es/docs/Web +/es/docs/Preguntas_frecuentes_sobre_CSS /es/docs/Web/CSS/Preguntas_frecuentes_sobre_CSS +/es/docs/Preguntas_frecuentes_sobre_incrustaci%C3%B3n_en_Mozilla:Introducci%C3%B3n_a_Gecko_e_inscrustaci%C3%B3n /es/docs/Preguntas_frecuentes_sobre_incrustaci%C3%B3n_en_Mozilla/Introducci%C3%B3n_a_Gecko_e_inscrustaci%C3%B3n +/es/docs/Preguntas_frecuentes_sobre_la_compilaci%C3%B3n_de_Mozilla /es/docs/Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilaci%C3%B3n_de_Mozilla +/es/docs/Quirks_Mode_and_Standards_Mode /es/docs/Web/HTML/Quirks_Mode_and_Standards_Mode +/es/docs/RSS:Comunidad /es/docs/RSS/Comunidad +/es/docs/Recursos_offline_en_firefox /es/docs/Web/HTML/Recursos_offline_en_firefox +/es/docs/Referencia_CSS /es/docs/Web/CSS/Referencia_CSS +/es/docs/Referencia_CSS/Extensiones_CSS_Mozilla /es/docs/Web/CSS/Mozilla_Extensions +/es/docs/Referencia_CSS/Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions +/es/docs/Referencia_CSS:Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions +/es/docs/Referencia_DOM_de_Gecko:Ejemplos /es/docs/Referencia_DOM_de_Gecko/Ejemplos +/es/docs/Referencia_DOM_de_Gecko:Introducci%C3%B3n /es/docs/Referencia_DOM_de_Gecko/Introducci%C3%B3n +/es/docs/Referencia_DOM_de_Gecko:Prefacio /es/docs/Referencia_DOM_de_Gecko/Prefacio +/es/docs/Referencia_de_JavaScript_1.5 /es/docs/Web/JavaScript/Referencia +/es/docs/Referencia_de_JavaScript_1.5/Acerca_de /es/docs/Web/JavaScript/Referencia/Acerca_de +/es/docs/Referencia_de_JavaScript_1.5/Caracter%C3%ADsticas_Desaprobadas /es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas +/es/docs/Referencia_de_JavaScript_1.5/Caracter%C3%ADsticas_Despreciadas /es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas +/es/docs/Referencia_de_JavaScript_1.5/Comentarios /es/docs/Web/JavaScript/Referencia/Comentarios +/es/docs/Referencia_de_JavaScript_1.5/Comentarios/comentario /es/docs/temp_comentarios +/es/docs/Referencia_de_JavaScript_1.5/Funciones /es/docs/Web/JavaScript/Referencia/Funciones +/es/docs/Referencia_de_JavaScript_1.5/Funciones/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Referencia_de_JavaScript_1.5/Funciones/arguments /es/docs/Web/JavaScript/Referencia/Funciones/arguments +/es/docs/Referencia_de_JavaScript_1.5/Funciones/arguments/callee /es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Number /es/docs/JavaScript/Referencia/Funciones_globales/Number +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isNaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/parseFloat /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat +/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/parseInt /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt +/es/docs/Referencia_de_JavaScript_1.5/Functions /es/docs/JavaScript/Referencia/Functions +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/forEach /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/indexOf +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/push /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/push +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduce /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Array/reduceRight /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Boolean/toSource /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/UTC /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/now /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Date/parse /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Error /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/apply /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/apply +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/call /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/call +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Function/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/JSON/stringify /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/E +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LN10 /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN10 +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LN2 /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LN2 +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/LOG2E /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Math/floor /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/floor +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/NEGATIVE_INFINITY /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/POSITIVE_INFINITY /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Number/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/constructor +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/create /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/create +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/defineProperties /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/hasOwnProperty /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/unwatch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/Object/watch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/anchor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/big /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/blink /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/bold /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/charAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/charCodeAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/concat /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/fixed /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/fromCharCode /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/italics /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/lastIndexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/length /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/link /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/match /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/replace /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/search /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/slice /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/split /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/strike /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/sub /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/substr /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/substring /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/sup /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toLowerCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/toUpperCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globales/String/valueOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales/Function /es/docs/JavaScript/Referencia/Objetos_globlales/Function +/es/docs/Referencia_de_JavaScript_1.5/Objetos_globlales/Function/arguments /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments +/es/docs/Referencia_de_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Aritm%C3%A9ticos /es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/function /es/docs/Web/JavaScript/Referencia/Operadores/function +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/instanceof /es/docs/Web/JavaScript/Referencia/Operadores/instanceof +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/typeof /es/docs/Web/JavaScript/Referencia/Operadores/typeof +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Especiales/void /es/docs/Web/JavaScript/Referencia/Operadores/void +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Miembros /es/docs/Web/JavaScript/Referencia/Operadores/Miembros +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Referencia/Operadores/this +/es/docs/Referencia_de_JavaScript_1.5/Operadores/Operator_Precedence /es/docs/Web/JavaScript/Referencia/Operadores/Operator_Precedence +/es/docs/Referencia_de_JavaScript_1.5/Operadores/String /es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos +/es/docs/Referencia_de_JavaScript_1.5/Operadores/function /es/docs/Web/JavaScript/Referencia/Operadores/function +/es/docs/Referencia_de_JavaScript_1.5/Operadores/get /es/docs/Web/JavaScript/Referencia/Funciones/get +/es/docs/Referencia_de_JavaScript_1.5/Operadores/in /es/docs/Web/JavaScript/Referencia/Operadores/in +/es/docs/Referencia_de_JavaScript_1.5/Operadores/new /es/docs/Web/JavaScript/Referencia/Operadores/new +/es/docs/Referencia_de_JavaScript_1.5/Operadores/this /es/docs/Web/JavaScript/Referencia/Operadores/this +/es/docs/Referencia_de_JavaScript_1.5/Palabras_Reservadas /es/docs/Web/JavaScript/Referencia/Palabras_Reservadas +/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity +/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/NaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN +/es/docs/Referencia_de_JavaScript_1.5/Propiedades_globales/undefined /es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined +/es/docs/Referencia_de_JavaScript_1.5/Sentencias /es/docs/Web/JavaScript/Referencia/Sentencias +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/block /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/break /es/docs/Web/JavaScript/Referencia/Sentencias/break +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/const /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/continue /es/docs/Web/JavaScript/Referencia/Sentencias/continue +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/do...while /es/docs/Web/JavaScript/Referencia/Sentencias/do...while +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/export /es/docs/Web/JavaScript/Referencia/Sentencias/export +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for /es/docs/Web/JavaScript/Referencia/Sentencias/for +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for...in /es/docs/Web/JavaScript/Referencia/Sentencias/for...in +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/for_each...in /es/docs/Web/JavaScript/Referencia/Sentencias/for_each...in +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/function /es/docs/Web/JavaScript/Referencia/Sentencias/function +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/if...else /es/docs/Web/JavaScript/Referencia/Sentencias/if...else +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/label /es/docs/Web/JavaScript/Referencia/Sentencias/label +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/return /es/docs/Web/JavaScript/Referencia/Sentencias/return +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/throw /es/docs/Web/JavaScript/Referencia/Sentencias/throw +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/try...catch /es/docs/Web/JavaScript/Referencia/Sentencias/try...catch +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/var /es/docs/Web/JavaScript/Referencia/Sentencias/var +/es/docs/Referencia_de_JavaScript_1.5/Sentencias/while /es/docs/Web/JavaScript/Referencia/Sentencias/while +/es/docs/Referencia_de_JavaScript_1.5:Acerca_de /es/docs/Web/JavaScript/Referencia/Acerca_de +/es/docs/Referencia_de_JavaScript_1.5:Caracter%C3%ADsticas_Desaprobadas /es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas +/es/docs/Referencia_de_JavaScript_1.5:Caracter%C3%ADsticas_Despreciadas /es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas +/es/docs/Referencia_de_JavaScript_1.5:Comentarios:comentario /es/docs/temp_comentarios +/es/docs/Referencia_de_JavaScript_1.5:Funciones /es/docs/Web/JavaScript/Referencia/Funciones +/es/docs/Referencia_de_JavaScript_1.5:Funciones:String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Referencia_de_JavaScript_1.5:Funciones:arguments /es/docs/Web/JavaScript/Referencia/Funciones/arguments +/es/docs/Referencia_de_JavaScript_1.5:Funciones:arguments:callee /es/docs/Web/JavaScript/Referencia/Funciones/arguments/callee +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Number /es/docs/JavaScript/Referencia/Funciones_globales/Number +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isFinite /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isNaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:parseFloat /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseFloat +/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:parseInt /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array:reduce /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Array:reduceRight /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Boolean:toSource /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:UTC /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/UTC +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:now /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/now +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Date:parse /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date/parse +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Error /es/docs/Web/JavaScript/Referencia/Objetos_globales/Error +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Function:prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/prototype +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/prototype +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Number:toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number/toString +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/toString +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:unwatch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/unwatch +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:Object:watch /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/watch +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:anchor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/anchor +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:big /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/big +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:blink /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/blink +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:bold /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/bold +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:charAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charAt +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:charCodeAt /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:concat /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/concat +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:fixed /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fixed +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:fromCharCode /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:indexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/indexOf +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:italics /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/italics +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:lastIndexOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:length /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/length +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:link /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/link +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:match /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/match +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:prototype /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/prototype +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:replace /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/replace +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:search /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/search +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:slice /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/slice +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:small /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/small +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:split /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/split +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:strike /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/strike +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:sub /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sub +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:substr /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substr +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:substring /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/substring +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:sup /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/sup +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toLowerCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toString /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toString +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:toUpperCase /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globales:String:valueOf /es/docs/Web/JavaScript/Referencia/Objetos_globales/String/valueOf +/es/docs/Referencia_de_JavaScript_1.5:Objetos_globlales:Function:arguments /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function/arguments +/es/docs/Referencia_de_JavaScript_1.5:Operadores /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Aritm%C3%A9ticos /es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:function /es/docs/Web/JavaScript/Referencia/Operadores/function +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:instanceof /es/docs/Web/JavaScript/Referencia/Operadores/instanceof +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:typeof /es/docs/Web/JavaScript/Referencia/Operadores/typeof +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Especiales:void /es/docs/Web/JavaScript/Referencia/Operadores/void +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Miembros /es/docs/Web/JavaScript/Referencia/Operadores/Miembros +/es/docs/Referencia_de_JavaScript_1.5:Operadores:Operadores_especiales:Operador_this /es/docs/Web/JavaScript/Referencia/Operadores/this +/es/docs/Referencia_de_JavaScript_1.5:Operadores:String /es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos +/es/docs/Referencia_de_JavaScript_1.5:Palabras_Reservadas /es/docs/Web/JavaScript/Referencia/Palabras_Reservadas +/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:Infinity /es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity +/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:NaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN +/es/docs/Referencia_de_JavaScript_1.5:Propiedades_globales:undefined /es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined +/es/docs/Referencia_de_JavaScript_1.5:Sentencias /es/docs/Web/JavaScript/Referencia/Sentencias +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:block /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:break /es/docs/Web/JavaScript/Referencia/Sentencias/break +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:continue /es/docs/Web/JavaScript/Referencia/Sentencias/continue +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:do...while /es/docs/Web/JavaScript/Referencia/Sentencias/do...while +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:for /es/docs/Web/JavaScript/Referencia/Sentencias/for +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:for...in /es/docs/Web/JavaScript/Referencia/Sentencias/for...in +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:function /es/docs/Web/JavaScript/Referencia/Sentencias/function +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:if...else /es/docs/Web/JavaScript/Referencia/Sentencias/if...else +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:label /es/docs/Web/JavaScript/Referencia/Sentencias/label +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:return /es/docs/Web/JavaScript/Referencia/Sentencias/return +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:throw /es/docs/Web/JavaScript/Referencia/Sentencias/throw +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:try...catch /es/docs/Web/JavaScript/Referencia/Sentencias/try...catch +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:var /es/docs/Web/JavaScript/Referencia/Sentencias/var +/es/docs/Referencia_de_JavaScript_1.5:Sentencias:while /es/docs/Web/JavaScript/Referencia/Sentencias/while +/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_BeOS /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_BeOS +/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_Linux /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_Linux +/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_Mac_OS_X /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_Mac_OS_X +/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_OS_2 /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_OS_2 +/es/docs/Requerimientos_para_la_compilaci%C3%B3n_en_Windows /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Requerimientos_para_la_compilaci%C3%B3n_en_Windows +/es/docs/SVG /es/docs/Web/SVG +/es/docs/SVG/SVG_en_Firefox_1.5 /es/docs/Web/SVG/SVG_en_Firefox_1.5 +/es/docs/SVG/Tutorial /es/docs/Web/SVG/Tutorial +/es/docs/SVG/Tutorial/Getting_Started /es/docs/Web/SVG/Tutorial/Getting_Started +/es/docs/SVG:SVG_en_Firefox_1.5 /es/docs/Web/SVG/SVG_en_Firefox_1.5 +/es/docs/SVG_In_HTML_Introduction /es/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction +/es/docs/Screening_duplicate_bugs /es/docs/QA/Screening_duplicate_bugs +/es/docs/Secciones_y_contornos_de_un_documento_HTML5 /es/docs/Sections_and_Outlines_of_an_HTML5_document +/es/docs/Secciones_y_esquema_de_un_documento_HTML_5 /es/docs/Sections_and_Outlines_of_an_HTML5_document +/es/docs/Social_API-redirect-1 /es/docs/Social_API +/es/docs/Social_API-redirect-2 /es/docs/Social_API +/es/docs/Social_API/Glossary-redirect-1 /es/docs/Social_API/Glossary +/es/docs/Social_API/Glossary-redirect-2 /es/docs/Social_API/Glossary +/es/docs/Social_API/Guide-redirect-1 /es/docs/Social_API/Guide +/es/docs/Temas:Comunidad /es/docs/Temas/Comunidad +/es/docs/The_geo_microformat /es/docs/El_microformato_geo +/es/docs/Theme_changes_in_Firefox_3 /es/docs/El_colector_de_ciclo_XPCOM +/es/docs/Transformando_XML_con_XSLT /es/docs/Web/XSLT/Transformando_XML_con_XSLT +/es/docs/Tutorial_de_Canvas:Transformaciones /es/docs/Tutorial_de_Canvas/Transformaciones +/es/docs/Tutorial_de_XUL/Creando_Dialogos /es/docs/Tutorial_de_XUL/Creando_Di%C3%A1logos +/es/docs/Tutorial_de_XUL/Indicadores_de_progreso /es/docs/Tutorial_de_XUL/Medidores_de_progreso +/es/docs/Tutorial_de_XUL:Creando_Dialogos /es/docs/Tutorial_de_XUL/Creando_Di%C3%A1logos +/es/docs/Tutorial_de_XUL:El_modelo_de_caja /es/docs/Tutorial_de_XUL/El_modelo_de_caja +/es/docs/Tutorial_de_XUL:Indicadores_de_progreso /es/docs/Tutorial_de_XUL/Medidores_de_progreso +/es/docs/Usando_audio_y_video_con_HTML5 /es/docs/Web/HTML/Usando_audio_y_video_con_HTML5 +/es/docs/Usando_audio_y_video_en_Firefox /es/docs/Web/HTML/Usando_audio_y_video_con_HTML5 +/es/docs/Usando_m%C3%B3dulos_de_c%C3%B3digo_JavaScript /es/docs/JavaScript_code_modules/Using +/es/docs/Usar_audio_y_v%C3%ADdeo_en_Firefox /es/docs/Web/HTML/Usando_audio_y_video_con_HTML5 +/es/docs/Usar_gradientes /es/docs/CSS/Using_CSS_gradients +/es/docs/Usar_la_Geolocalizaci%C3%B3n /es/docs/WebAPI/Using_geolocation +/es/docs/Using_files_from_web_applications /es/docs/Web/API/File/Using_files_from_web_applications +/es/docs/Using_geolocation /es/docs/WebAPI/Using_geolocation +/es/docs/Uso_de_URL_como_valor_de_la_propiedad_cursor /es/docs/Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor +/es/docs/Vigilando_complementos /es/docs/Vigilar_plugins +/es/docs/Vigilando_descargas /es/docs/Vigilar_descargas +/es/docs/Vigilando_plugins /es/docs/Vigilar_plugins +/es/docs/Web/API/Apps.checkInstalled /es/docs/Web/API/DOMApplicationsRegistry/checkInstalled +/es/docs/Web/API/Apps.getInstalled /es/docs/Web/API/DOMApplicationsRegistry/getInstalled +/es/docs/Web/API/Apps.install /es/docs/Web/API/DOMApplicationsRegistry/install +/es/docs/Web/API/Apps.installPackage /es/docs/Web/API/DOMApplicationsRegistry/installPackage +/es/docs/Web/API/BatteryManager.charging /es/docs/Web/API/BatteryManager/charging +/es/docs/Web/API/BatteryManager.chargingTime /es/docs/Web/API/BatteryManager/chargingTime +/es/docs/Web/API/BatteryManager.dischargingTime /es/docs/Web/API/BatteryManager/dischargingTime +/es/docs/Web/API/BatteryManager.level /es/docs/Web/API/BatteryManager/level +/es/docs/Web/API/BatteryManager.onchargingchange /es/docs/Web/API/BatteryManager/onchargingchange +/es/docs/Web/API/BatteryManager.onlevelchange /es/docs/Web/API/BatteryManager/onlevelchange +/es/docs/Web/API/Blob.Blob /es/docs/Web/API/Blob/Blob +/es/docs/Web/API/CSSStyleSheet.insertRule /es/docs/Web/API/CSSStyleSheet/insertRule +/es/docs/Web/API/CameraCapabilities.maxExposureCompensation /es/docs/Web/API/CameraCapabilities/maxExposureCompensation +/es/docs/Web/API/CameraCapabilities.maxFocusAreas /es/docs/Web/API/CameraCapabilities/maxFocusAreas +/es/docs/Web/API/Constraint_validation/invalid_event /es/docs/Web/API/HTMLInputElement/invalid_event +/es/docs/Web/API/Coordinates /es/docs/Web/API/GeolocationCoordinates +/es/docs/Web/API/Coordinates/latitude /es/docs/Web/API/GeolocationCoordinates/latitude +/es/docs/Web/API/Document/activeElement /es/docs/Web/API/DocumentOrShadowRoot/activeElement +/es/docs/Web/API/Document/elementFromPoint /es/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/es/docs/Web/API/Document/firstChild /es/docs/Web/API/Node.firstChild +/es/docs/Web/API/Geolocalizaci%C3%B3n /es/docs/Web/API/Geolocation +/es/docs/Web/API/Geolocation.clearWatch /es/docs/Web/API/Geolocation/clearWatch +/es/docs/Web/API/Geolocation.getCurrentPosition /es/docs/Web/API/Geolocation/getCurrentPosition +/es/docs/Web/API/Geolocation.watchPosition /es/docs/Web/API/Geolocation/watchPosition +/es/docs/Web/API/HTMLElement/invalid_event /es/docs/Web/API/HTMLInputElement/invalid_event +/es/docs/Web/API/IDBObjectStore.add /es/docs/Web/API/IDBObjectStore/add +/es/docs/Web/API/Navigator.getUserMedia /es/docs/Web/API/Navigator/getUserMedia +/es/docs/Web/API/Node.nextSibling /es/docs/Web/API/Node/nextSibling +/es/docs/Web/API/Node/firstChild /es/docs/Web/API/Node.firstChild +/es/docs/Web/API/Position /es/docs/Web/API/GeolocationPosition +/es/docs/Web/API/WebGL_API/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +/es/docs/Web/API/WebGL_API/Getting_started_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/es/docs/Web/API/Window.clearTimeout /es/docs/Web/API/WindowTimers/clearTimeout +/es/docs/Web/API/Window.navigator /es/docs/Web/API/Window/navigator +/es/docs/Web/API/Window.onbeforeunload /es/docs/Web/API/WindowEventHandlers/onbeforeunload +/es/docs/Web/API/Window.setTimeout /es/docs/Web/API/WindowTimers/setTimeout +/es/docs/Web/API/WindowBase64.atob /es/docs/Web/API/WindowBase64/atob +/es/docs/Web/API/event.defaultPrevented /es/docs/Web/API/Event/defaultPrevented +/es/docs/Web/API/event.which /es/docs/Web/API/KeyboardEvent/which +/es/docs/Web/Aplicaciones/Arquitectura_de_aplicaciones /es/docs/Web/Aplicaciones/Build/Arquitectura_de_aplicaciones +/es/docs/Web/Aplicaciones/Comenzar /es/docs/Web/Aplicaciones/Comenzando_aplicaciones +/es/docs/Web/Aplicaciones/Comenzar_con_la_creaci%C3%B3n_de_aplicaciones /es/docs/Web/Aplicaciones/Comenzando_aplicaciones +/es/docs/Web/Aplicaciones/Developing /es/docs/Web/Aplicaciones/Build +/es/docs/Web/Aplicaciones/Developing/Manifest /es/docs/Web/Aplicaciones/Build/Manifest +/es/docs/Web/Aplicaciones/Iniciarse /es/docs/Web/Aplicaciones/Comenzando_aplicaciones +/es/docs/Web/Aplicaciones/Progressive /es/docs/Web/Progressive_web_apps +/es/docs/Web/Aplicaciones/Progressive/Introduction /es/docs/Web/Progressive_web_apps/Introduction +/es/docs/Web/Apps/Design /es/docs/Web/Aplicaciones/Design +/es/docs/Web/Apps/Design/Navegacion_Adaptativa /es/docs/Web/Aplicaciones/Design/Navegacion_Adaptativa +/es/docs/Web/Apps/Design/Planning_your_app /es/docs/Web/Aplicaciones/Design/Planning_your_app +/es/docs/Web/Apps/Developing /es/docs/Web/Aplicaciones/Build +/es/docs/Web/Apps/Developing/Manifest/Manifest /es/docs/Web/Aplicaciones/Build/Manifest +/es/docs/Web/Apps/Games /es/docs/Web/Aplicaciones/Games +/es/docs/Web/Apps/Games/Consideraciones_especiales /es/docs/Web/Aplicaciones/Games/Consideraciones_especiales +/es/docs/Web/Apps/Quickstart /es/docs/Web/Aplicaciones/Quickstart +/es/docs/Web/Apps/Quickstart/Design /es/docs/Web/Aplicaciones/Quickstart/Design +/es/docs/Web/Apps/Quickstart/Design/Concept_A_great_app /es/docs/Web/Aplicaciones/Quickstart/Design/Concept_A_great_app +/es/docs/Web/Apps/Quickstart/Design/Pautas_UI /es/docs/Web/Aplicaciones/Quickstart/Design/Pautas_UI +/es/docs/Web/Apps/Quickstart/Design/Principios_de_dise%C3%B1o /es/docs/Web/Aplicaciones/Quickstart/Design/Principios_de_dise%C3%B1o +/es/docs/Web/CSS/-moz-appearance /es/docs/Web/CSS/appearance +/es/docs/Web/CSS/Child_selectors /es/docs/Web/CSS/Child_combinator +/es/docs/Web/CSS/Como_iniciar/Porqu%C3%A9_usar_CSS /es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS +/es/docs/Web/CSS/Consultas_multimedia /es/docs/CSS/Media_queries +/es/docs/Web/CSS/Descendant_selectors /es/docs/Web/CSS/Descendant_combinator +/es/docs/Web/CSS/Getting_Started /es/docs/Web/CSS/Comenzando_(tutorial_CSS) +/es/docs/Web/CSS/Introducci%C3%B3n/Content /es/docs/Learn/CSS/S%C3%A1bercomo/Generated_content +/es/docs/Web/CSS/Referencia_CSS/Extensiones_CSS_Mozilla /es/docs/Web/CSS/Mozilla_Extensions +/es/docs/Web/CSS/Referencia_CSS/Extensiones_Mozilla /es/docs/Web/CSS/Mozilla_Extensions +/es/docs/Web/CSS/Referencia_CSS/background-blend-mode /es/docs/Web/CSS/background-blend-mode +/es/docs/Web/CSS/Usando_animaciones_CSS /es/docs/Web/CSS/CSS_Animations/Usando_animaciones_CSS +/es/docs/Web/CSS/Using_CSS_transforms /es/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms +/es/docs/Web/CSS/Using_CSS_variables /es/docs/Web/CSS/Using_CSS_custom_properties +/es/docs/Web/CSS/after /es/docs/Web/CSS/%3A%3Aafter +/es/docs/Web/CSS/animacion-iteracion-cuenta /es/docs/Web/CSS/animation-iteration-count +/es/docs/Web/CSS/animacion-nombre /es/docs/Web/CSS/animation-name +/es/docs/Web/CSS/attr /es/docs/Web/CSS/attr() +/es/docs/Web/CSS/before /es/docs/Web/CSS/%3A%3Abefore +/es/docs/Web/CSS/calc /es/docs/Web/CSS/calc() +/es/docs/Web/CSS/capacidad_de_animacion_de_propiedades_CSS /es/docs/Web/CSS +/es/docs/Web/CSS/computed_value /es/docs/Web/CSS/Valor_calculado +/es/docs/Web/CSS/env /es/docs/Web/CSS/env() +/es/docs/Web/CSS/filter-function/blur /es/docs/Web/CSS/filter-function/blur() +/es/docs/Web/CSS/filter-function/brightness /es/docs/Web/CSS/filter-function/brightness() +/es/docs/Web/CSS/filtro /es/docs/Web/CSS/filter +/es/docs/Web/CSS/kerning /en-US/docs/Web/CSS/font-kerning +/es/docs/Web/CSS/linear-gradient /es/docs/Web/CSS/linear-gradient() +/es/docs/Web/CSS/min /es/docs/Web/CSS/min() +/es/docs/Web/CSS/minmax /es/docs/Web/CSS/minmax() +/es/docs/Web/CSS/none /es/docs/Web/CSS/float +/es/docs/Web/CSS/padding_paspartu /es/docs/Web/CSS/padding +/es/docs/Web/CSS/radial-gradient /es/docs/Web/CSS/radial-gradient() +/es/docs/Web/CSS/repeat /es/docs/Web/CSS/repeat() +/es/docs/Web/CSS/transform-function/rotate /es/docs/Web/CSS/transform-function/rotate() +/es/docs/Web/CSS/transform-function/rotate3d /es/docs/Web/CSS/transform-function/rotate3d() +/es/docs/Web/CSS/transform-function/scale /es/docs/Web/CSS/transform-function/scale() +/es/docs/Web/CSS/transform-function/translate /es/docs/Web/CSS/transform-function/translate() +/es/docs/Web/CSS/transform-function/translateY /es/docs/Web/CSS/transform-function/translateY() +/es/docs/Web/CSS/transform-function/translateZ /es/docs/Web/CSS/transform-function/translateZ() +/es/docs/Web/CSS/var /es/docs/Web/CSS/var() +/es/docs/Web/Events/canplay /es/docs/Web/API/HTMLMediaElement/canplay_event +/es/docs/Web/Events/click /es/docs/Web/API/Element/click_event +/es/docs/Web/Events/close_websocket /es/docs/Web/API/WebSocket/close_event +/es/docs/Web/Events/dragover /es/docs/Web/API/Document/dragover_event +/es/docs/Web/Events/hashchange /es/docs/Web/API/Window/hashchange_event +/es/docs/Web/Events/keydown /es/docs/Web/API/Document/keydown_event +/es/docs/Web/Events/mousedown /es/docs/Web/API/Element/mousedown_event +/es/docs/Web/Events/offline /es/docs/Web/API/Window/offline_event +/es/docs/Web/Events/scroll /es/docs/Web/API/Document/scroll_event +/es/docs/Web/Events/tecla /es/docs/Web/API/Document/keyup_event +/es/docs/Web/Events/timeupdate /es/docs/Web/API/HTMLMediaElement/timeupdate_event +/es/docs/Web/Events/timeupdate_event /es/docs/Web/HTML/Elemento/audio/timeupdate_event +/es/docs/Web/Events/wheel /es/docs/Web/API/Element/wheel_event +/es/docs/Web/Guide/CSS /es/docs/Learn/CSS +/es/docs/Web/Guide/CSS/Cajas_flexibles /es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS +/es/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained /es/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained +/es/docs/Web/Guide/HTML /es/docs/Learn/HTML +/es/docs/Web/Guide/HTML/Forms /es/docs/Learn/HTML/Forms +/es/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form /es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form +/es/docs/Web/Guide/HTML/Forms/My_first_HTML_form /es/docs/Learn/HTML/Forms/Your_first_HTML_form +/es/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data +/es/docs/Web/Guide/HTML/Forms/Styling_HTML_forms /es/docs/Learn/HTML/Forms/Styling_HTML_forms +/es/docs/Web/Guide/HTML/Introduction_alhtml /es/docs/Learn/HTML/Introduccion_a_HTML +/es/docs/Web/HTML/Elemento/%3Cdata%3E /es/docs/Web/HTML/Elemento/data +/es/docs/Web/HTML/Elemento/Audio2 /es/docs/Web/HTML/Elemento/audio +/es/docs/Web/HTML/Elemento/Progreso /es/docs/Web/HTML/Elemento/progress +/es/docs/Web/HTML/Elemento/etiqueta /es/docs/Web/HTML/Elemento/label +/es/docs/Web/HTML/Elemento/h2 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/Web/HTML/Elemento/h3 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/Web/HTML/Elemento/h4 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/Web/HTML/Elemento/h5 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/Web/HTML/Elemento/h6 /es/docs/Web/HTML/Elemento/Elementos_t%C3%ADtulos +/es/docs/Web/HTML/Elemento/preformato /es/docs/Web/HTML/Elemento/pre +/es/docs/Web/HTML/Elemento/video/canplay_event /es/docs/Web/API/HTMLMediaElement/canplay_event +/es/docs/Web/HTML/Elemento/video/timeupdate_event /es/docs/Web/API/HTMLMediaElement/timeupdate_event +/es/docs/Web/HTML/Gesti%C3%B3n_del_foco_en_HTML /es/docs/Web/API/Document/hasFocus +/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME /es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +/es/docs/Web/JavaScript/Guide/AcercaDe /es/docs/Web/JavaScript/Guide/Introducción +/es/docs/Web/JavaScript/Guide/Closures /es/docs/Web/JavaScript/Closures +/es/docs/Web/JavaScript/Guide/Inheritance_Revisited /es/docs/Web/JavaScript/Inheritance_and_the_prototype_chain +/es/docs/Web/JavaScript/Guide/JavaScript_Overview /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/Web/JavaScript/Guide/Obsolete_Pages /es/docs/Web/JavaScript/Guide +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5 /es/docs/Web/JavaScript/Guide +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Acerca_de_esta_gu%C3%ADa /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Concepto_de_JavaScript /es/docs/Web/JavaScript/Guide/Introducci%C3%B3n +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Constantes /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Constructores_m%C3%A1s_flexibles /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Constructores_mas_flexibles +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Creando_nuevos_objetos +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Borrando_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Eliminando_propiedades +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_las_funciones_get_y_set /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_getters_y_setters +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_los_m%C3%A9todos /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definiendo_los_m.C3.A9todos +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Definiendo_propiedades_para_un_tipo_de_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Definici.C3.B3n_de_las_propiedades_de_un_tipo_de_objeto +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Indexando_las_propiedades_del_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Propiedades_del_objeto_indexado +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_this_para_referirse_al_objeto /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_this_para_las_referencias_a_objetos +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Usando_una_funci%C3%B3n_constructora /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Usando_una_funci.C3.B3n_constructora +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Using_Object_Initializers /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_nuevos_objetos/Utilizando_Objetos_Iniciadores /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#El_uso_de_inicializadores_de_objeto +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Crear_una_expresi%C3%B3n_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Definiendo_Funciones /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Empleado /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Ejemplo.3A_employee +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Creando_la_jerarqu%C3%ADa /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creacion_de_la_jerarquia +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Propiedades_de_objetos +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/A%C3%B1adiendo_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#A.C3.B1adir_propiedades +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/El_ejemplo_Employee/Propiedades_de_objetos/Heredando_las_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Herencia_de_propiedades +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Escribir_un_patr%C3%B3n_de_expresi%C3%B3n_regular /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Excepci%C3%B3n_del_DOM /es/docs/Web/API/DOMException +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones /es/docs/Web/JavaScript/Guide/Expressions_and_Operators +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones_Regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Expresiones_y_operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_Number_y_String /es/docs/Web/JavaScript/Guide/Funciones#Number_and_String_functions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_escape_y_unescape /es/docs/Web/JavaScript/Guide/Funciones#escape_and_unescape_functions(Obsoleted_above_JavaScript_1.5) +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_parseInt_y_parseFloat /es/docs/Web/JavaScript/Guide/Funciones#parseInt_and_parseFloat_functions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas /es/docs/Web/JavaScript/Guide/Funciones#Predefined_functions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_eval /es/docs/Web/JavaScript/Guide/Funciones#eval_Function +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isFinite /es/docs/Web/JavaScript/Guide/Funciones#isFinite_function +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Funciones_predefinidas/Funci%C3%B3n_isNaN /es/docs/Web/JavaScript/Guide/Funciones#isNaN_function +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Literales /es/docs/Web/JavaScript/Guide/Grammar_and_types#Literales +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Llamando_Funciones /es/docs/Web/JavaScript/Guide/Funciones#Llamando_funciones +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Mas_sobre_herencia_de_propiedades +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Determinando_relaciones_de_instancia /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Como_determinar_las_relaciones_entre_instancias +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Herencia_no_m%C3%BAltiple /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#No_existe_herencia_multiple +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Informaci%C3%B3n_global_en_los_constructores /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Informacion_global_en_los_constructores +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/M%C3%A1s_sobre_la_herencia_de_propiedades/Valores_locales_frente_a_los_heredados /es/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Valores_locales_frente_a_valores_heredados +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos /es/docs/Web/JavaScript/Referencia +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Array /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/Function +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Math /es/docs/Web/JavaScript/Referencia/Objetos_globales/Math +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_Number /es/docs/Web/JavaScript/Referencia/Objetos_globales/Number +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_RegExp /es/docs/Web/JavaScript/Referencia/Objetos_globales/RegExp +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_base_predefinidos/Objeto_String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Objetos_y_propiedades /es/docs/Web/JavaScript/Guide/Trabajando_con_objectos#Objetos_y_propiedades +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_aritm%C3%A9ticos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_aritm.C3.A9ticos +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_asignaci%C3%B3n /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_asignaci.C3.B3n +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_cadenas_de_caracteres_(string) /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#String_operators +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_de_comparaci%C3%B3n /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_de_comparaci.C3.B3n +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Special_operators +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_l%C3%B3gicos /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_l.C3.B3gicos +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Operadores/Operadores_sobre_bits /es/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operadores_Bit-a-bit +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Predefined_Functions/eval_Function /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencia_condicional /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Condicionales +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencia_de_bloque /es/docs/Web/JavaScript/Referencia/Sentencias/block +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_bucle /es/docs/Web/JavaScript/Guide/Loops_and_iteration +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#Utilizing_Error_objects +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/throw /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#throw_statement +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manejo_de_excepciones/try...catch /es/docs/Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores#try...catch_statement +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_de_manipulaci%C3%B3n_de_objetos /es/docs/Web/JavaScript/Guide +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Sentencias_para_comentarios /es/docs/Web/JavaScript/Guide +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_may%C3%BAsculas_y_min%C3%BAsculas_y_considerar_entrada_multil%C3%ADnea /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_ignorar_mayusculas_minusculas,_y_considerar_entrada_multilinea /es/docs/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejecutar_una_busqueda_global,_discriminar_mayusculas_y_minusculas_y_considerar_entrada_multil%C3%ADnea +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Ejemplos_de_expresiones_regulares /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Trabajar_con_expresiones_regulares/Usar_coincidencias_de_subcadenas_parentizadas /es/docs/Web/JavaScript/Guide/Regular_Expressions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Unicode /en-US/docs/Web/JavaScript/Reference/Lexical_grammar +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Usando_el_objeto_arguments /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Using_the_arguments_object /es/docs/Web/JavaScript/Guide/Funciones +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Valores /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Gu%C3%ADa_JavaScript_1.5/Variables /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/Predefined_Functions /en-US/docs/Web/JavaScript/Guide/Functions +/es/docs/Web/JavaScript/Guide/Obsolete_Pages/The_Employee_Example /en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/es/docs/Web/JavaScript/Guide/Valores,_variables_y_literales /es/docs/Web/JavaScript/Guide/Grammar_and_types +/es/docs/Web/JavaScript/New_in_JavaScript /es/docs/Web/JavaScript/Novedades_en_JavaScript +/es/docs/Web/JavaScript/Primeros_Pasos /es/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/es/docs/Web/JavaScript/Reference/Classes /es/docs/Web/JavaScript/Referencia/Classes +/es/docs/Web/JavaScript/Reference/Classes/static /es/docs/Web/JavaScript/Referencia/Classes/static +/es/docs/Web/JavaScript/Reference/Global_Objects/JSON /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON +/es/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify /es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/stringify +/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray /es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray +/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/buffer /es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer +/es/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/subarray /es/docs/Web/JavaScript/Referencia/Objetos_globales/TypedArray/subarray +/es/docs/Web/JavaScript/Reference/Statements /es/docs/Web/JavaScript/Referencia/Sentencias +/es/docs/Web/JavaScript/Reference/Statements/const /es/docs/Web/JavaScript/Referencia/Sentencias/const +/es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Despreciadas /es/docs/Web/JavaScript/Referencia/Caracter%C3%ADsticas_Desaprobadas +/es/docs/Web/JavaScript/Referencia/Comentarios/comentario /es/docs/temp_comentarios +/es/docs/Web/JavaScript/Referencia/Funciones/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Web/JavaScript/Referencia/Funciones_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Web/JavaScript/Referencia/Funciones_globales/Boolean /es/docs/Web/JavaScript/Referencia/Objetos_globales/Boolean +/es/docs/Web/JavaScript/Referencia/Funciones_globales/Date /es/docs/Web/JavaScript/Referencia/Objetos_globales/Date +/es/docs/Web/JavaScript/Referencia/Funciones_globales/Object /es/docs/Web/JavaScript/Referencia/Objetos_globales/Object +/es/docs/Web/JavaScript/Referencia/Funciones_globales/String /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI +/es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent +/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI +/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent +/es/docs/Web/JavaScript/Referencia/Funciones_globales/isFinite /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite +/es/docs/Web/JavaScript/Referencia/Funciones_globales/isNaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/isNaN +/es/docs/Web/JavaScript/Referencia/Funciones_globales/parseInt /es/docs/Web/JavaScript/Referencia/Objetos_globales/parseInt +/es/docs/Web/JavaScript/Referencia/Methods_Index /es/docs/Web/JavaScript/Referencia +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flatten /es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/flat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat /es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat +/es/docs/Web/JavaScript/Referencia/Objetos_globales/NumberFormat/format /es/docs/Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa/all /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/all +/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promesa/race /es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/race +/es/docs/Web/JavaScript/Referencia/Objetos_globales/String/constructor /es/docs/Web/JavaScript/Referencia/Objetos_globales/String +/es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeUR /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI +/es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite_ /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite +/es/docs/Web/JavaScript/Referencia/Objetos_globlales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Web/JavaScript/Referencia/Operadores/Especiales /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Web/JavaScript/Referencia/Operadores/Especiales/function /es/docs/Web/JavaScript/Referencia/Operadores/function +/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales /es/docs/Web/JavaScript/Referencia/Operadores +/es/docs/Web/JavaScript/Referencia/Operadores/Operadores_especiales/Operador_this /es/docs/Web/JavaScript/Referencia/Operadores/this +/es/docs/Web/JavaScript/Referencia/Operadores/String /es/docs/Web/JavaScript/Referencia/Operadores/Aritm%C3%A9ticos +/es/docs/Web/JavaScript/Referencia/Operadores/get /es/docs/Web/JavaScript/Referencia/Funciones/get +/es/docs/Web/JavaScript/Referencia/Properties_Index /es/docs/Web/JavaScript/Referencia +/es/docs/Web/JavaScript/Referencia/Propiedades_globales /es/docs/Web/JavaScript/Referencia/Objetos_globales +/es/docs/Web/JavaScript/Referencia/Propiedades_globales/Infinity /es/docs/Web/JavaScript/Referencia/Objetos_globales/Infinity +/es/docs/Web/JavaScript/Referencia/Propiedades_globales/NaN /es/docs/Web/JavaScript/Referencia/Objetos_globales/NaN +/es/docs/Web/JavaScript/Referencia/Propiedades_globales/undefined /es/docs/Web/JavaScript/Referencia/Objetos_globales/undefined +/es/docs/Web/JavaScript/Una_nueva_introducci%C3%B3n_a_JavaScript /es/docs/Web/JavaScript/Una_re-introducci%C3%B3n_a_JavaScript +/es/docs/Web/Reference/Events /es/docs/Web/Events +/es/docs/Web/Reference/Events/DOMContentLoaded /es/docs/Web/Events/DOMContentLoaded +/es/docs/Web/Reference/Events/DOMSubtreeModified /es/docs/Web/Events/DOMSubtreeModified +/es/docs/Web/Reference/Events/abort /es/docs/Web/Events/abort +/es/docs/Web/Reference/Events/animationend /es/docs/Web/Events/animationend +/es/docs/Web/Reference/Events/beforeunload /es/docs/Web/Events/beforeunload +/es/docs/Web/Reference/Events/blur /es/docs/Web/Events/blur +/es/docs/Web/Reference/Events/canplay /es/docs/Web/API/HTMLMediaElement/canplay_event +/es/docs/Web/Reference/Events/click /es/docs/Web/API/Element/click_event +/es/docs/Web/Reference/Events/close_websocket /es/docs/Web/API/WebSocket/close_event +/es/docs/Web/Reference/Events/dragover /es/docs/Web/API/Document/dragover_event +/es/docs/Web/Reference/Events/hashchange /es/docs/Web/API/Window/hashchange_event +/es/docs/Web/Reference/Events/keydown /es/docs/Web/API/Document/keydown_event +/es/docs/Web/Reference/Events/load /es/docs/Web/Events/load +/es/docs/Web/Reference/Events/loadend /es/docs/Web/Events/loadend +/es/docs/Web/Reference/Events/mousedown /es/docs/Web/API/Element/mousedown_event +/es/docs/Web/Reference/Events/pointerlockchange /es/docs/Web/Events/pointerlockchange +/es/docs/Web/Reference/Events/scroll /es/docs/Web/API/Document/scroll_event +/es/docs/Web/Reference/Events/tecla /es/docs/Web/API/Document/keyup_event +/es/docs/Web/Reference/Events/timeupdate /es/docs/Web/API/HTMLMediaElement/timeupdate_event +/es/docs/Web/Reference/Events/transitioncancel /es/docs/Web/Events/transitioncancel +/es/docs/Web/Reference/Events/transitionend /es/docs/Web/Events/transitionend +/es/docs/Web/Reference/Events/wheel /es/docs/Web/API/Element/wheel_event +/es/docs/Web/WebGL /es/docs/Web/API/WebGL_API +/es/docs/Web/WebGL/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +/es/docs/Web/WebGL/Getting_started_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/es/docs/Web/XSLT/Elementos /es/docs/Web/XSLT/Element +/es/docs/Web/XSLT/Elementos/element /es/docs/Web/XSLT/Element/element +/es/docs/WebGL /es/docs/Web/API/WebGL_API +/es/docs/WebGL/Animating_objects_with_WebGL /es/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +/es/docs/WebSockets-840092-dup /es/docs/Web/API/WebSockets_API +/es/docs/WebSockets-840092-dup/Escribiendo_servidor_WebSocket /es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket +/es/docs/WebSockets-840092-dup/Escribiendo_servidores_con_WebSocket /es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket +/es/docs/WebSockets-840092-dup/Writing_WebSocket_client_applications /es/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications +/es/docs/Windows_8 /es/docs/Mozilla/Developer_guide/Documentaci%C3%B3n_para_la_compilaci%C3%B3n/Windows_8 +/es/docs/XForms:Comunidad /es/docs/XForms/Comunidad +/es/docs/XForms:Soporte_en_Mozilla /es/docs/XForms/Soporte_en_Mozilla +/es/docs/XML:Comunidad /es/docs/XML/Comunidad +/es/docs/XMLHttpRequest /es/docs/Web/API/XMLHttpRequest +/es/docs/XMLHttpRequest/FormData /es/docs/Web/API/XMLHttpRequest/FormData +/es/docs/XMLHttpRequest/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest +/es/docs/XMLHttpRequest/abort /es/docs/Web/API/XMLHttpRequest/abort +/es/docs/XMLHttpRequest/onreadystatechange /es/docs/Web/API/XMLHttpRequest/onreadystatechange +/es/docs/XPath /es/docs/Web/XPath +/es/docs/XPath/Ejes /es/docs/Web/XPath/Ejes +/es/docs/XPath/Ejes/ancestor /es/docs/Web/XPath/Ejes/ancestor +/es/docs/XPath/Ejes/ancestor-or-self /es/docs/Web/XPath/Ejes/ancestor-or-self +/es/docs/XPath/Ejes/attribute /es/docs/Web/XPath/Ejes/attribute +/es/docs/XPath/Ejes/child /es/docs/Web/XPath/Ejes/child +/es/docs/XPath/Ejes/descendant /es/docs/Web/XPath/Ejes/descendant +/es/docs/XPath/Ejes/descendant-or-self /es/docs/Web/XPath/Ejes/descendant-or-self +/es/docs/XPath/Ejes/following /es/docs/Web/XPath/Ejes/following +/es/docs/XPath/Ejes/following-sibling /es/docs/Web/XPath/Ejes/following-sibling +/es/docs/XPath/Ejes/namespace /es/docs/Web/XPath/Ejes/namespace +/es/docs/XPath/Ejes/parent /es/docs/Web/XPath/Ejes/parent +/es/docs/XPath/Ejes/preceding /es/docs/Web/XPath/Ejes/preceding +/es/docs/XPath/Ejes/preceding-sibling /es/docs/Web/XPath/Ejes/preceding-sibling +/es/docs/XPath/Ejes/self /es/docs/Web/XPath/Ejes/self +/es/docs/XPath/Funciones /es/docs/Web/XPath/Funciones +/es/docs/XPath/Funciones-XPath/true /es/docs/Web/XPath/Funciones/true +/es/docs/XPath/Funciones/contains /es/docs/Web/XPath/Funciones/contains +/es/docs/XPath/Funciones/substring /es/docs/Web/XPath/Funciones/substring +/es/docs/XPath/Funciones/true /es/docs/Web/XPath/Funciones/true +/es/docs/XPath/funciones-xpath /es/docs/Web/XPath/Funciones +/es/docs/XPath/funciones-xpath/contains /es/docs/Web/XPath/Funciones/contains +/es/docs/XPath/funciones-xpath/substring /es/docs/Web/XPath/Funciones/substring +/es/docs/XPath:Ejes /es/docs/Web/XPath/Ejes +/es/docs/XPath:Ejes:ancestor /es/docs/Web/XPath/Ejes/ancestor +/es/docs/XPath:Ejes:ancestor-or-self /es/docs/Web/XPath/Ejes/ancestor-or-self +/es/docs/XPath:Ejes:attribute /es/docs/Web/XPath/Ejes/attribute +/es/docs/XPath:Ejes:child /es/docs/Web/XPath/Ejes/child +/es/docs/XPath:Ejes:descendant /es/docs/Web/XPath/Ejes/descendant +/es/docs/XPath:Ejes:descendant-or-self /es/docs/Web/XPath/Ejes/descendant-or-self +/es/docs/XPath:Ejes:following /es/docs/Web/XPath/Ejes/following +/es/docs/XPath:Ejes:following-sibling /es/docs/Web/XPath/Ejes/following-sibling +/es/docs/XPath:Ejes:namespace /es/docs/Web/XPath/Ejes/namespace +/es/docs/XPath:Ejes:parent /es/docs/Web/XPath/Ejes/parent +/es/docs/XPath:Ejes:preceding /es/docs/Web/XPath/Ejes/preceding +/es/docs/XPath:Ejes:preceding-sibling /es/docs/Web/XPath/Ejes/preceding-sibling +/es/docs/XPath:Ejes:self /es/docs/Web/XPath/Ejes/self +/es/docs/XPath:Funciones:contains /es/docs/Web/XPath/Funciones/contains +/es/docs/XPath:Funciones:substring /es/docs/Web/XPath/Funciones/substring +/es/docs/XPath:Funciones:true /es/docs/Web/XPath/Funciones/true +/es/docs/XSLT /es/docs/Web/XSLT +/es/docs/XSLT/Elementos /es/docs/Web/XSLT/Element +/es/docs/XSLT/apply-imports /es/docs/Web/XSLT/apply-imports +/es/docs/XSLT/apply-templates /es/docs/Web/XSLT/apply-templates +/es/docs/XSLT/attribute /es/docs/Web/XSLT/attribute +/es/docs/XSLT/attribute-set /es/docs/Web/XSLT/attribute-set +/es/docs/XSLT/call-template /es/docs/Web/XSLT/call-template +/es/docs/XSLT/choose /es/docs/Web/XSLT/choose +/es/docs/XSLT/comment /es/docs/Web/XSLT/comment +/es/docs/XSLT/copy /es/docs/Web/XSLT/copy +/es/docs/XSLT/copy-of /es/docs/Web/XSLT/copy-of +/es/docs/XSLT/decimal-format /es/docs/Web/XSLT/decimal-format +/es/docs/XSLT/element /es/docs/Web/XSLT/Element/element +/es/docs/XSLT/fallback /es/docs/Web/XSLT/fallback +/es/docs/XSLT/for-each /es/docs/Web/XSLT/for-each +/es/docs/XSLT/if /es/docs/Web/XSLT/if +/es/docs/XSLT/import /es/docs/Web/XSLT/import +/es/docs/XSLT/include /es/docs/Web/XSLT/include +/es/docs/XSLT/key /es/docs/Web/XSLT/key +/es/docs/XSLT/message /es/docs/Web/XSLT/message +/es/docs/XSLT/namespace-alias /es/docs/Web/XSLT/namespace-alias +/es/docs/XSLT/number /es/docs/Web/XSLT/number +/es/docs/XSLT/otherwise /es/docs/Web/XSLT/otherwise +/es/docs/XSLT/when /es/docs/Web/XSLT/when +/es/docs/XSLT/with-param /es/docs/Web/XSLT/with-param +/es/docs/XSLT:Elementos /es/docs/Web/XSLT/Element +/es/docs/XSLT:apply-imports /es/docs/Web/XSLT/apply-imports +/es/docs/XSLT:apply-templates /es/docs/Web/XSLT/apply-templates +/es/docs/XSLT:attribute /es/docs/Web/XSLT/attribute +/es/docs/XSLT:attribute-set /es/docs/Web/XSLT/attribute-set +/es/docs/XSLT:call-template /es/docs/Web/XSLT/call-template +/es/docs/XSLT:choose /es/docs/Web/XSLT/choose +/es/docs/XSLT:comment /es/docs/Web/XSLT/comment +/es/docs/XSLT:copy /es/docs/Web/XSLT/copy +/es/docs/XSLT:copy-of /es/docs/Web/XSLT/copy-of +/es/docs/XSLT:decimal-format /es/docs/Web/XSLT/decimal-format +/es/docs/XSLT:element /es/docs/Web/XSLT/Element/element +/es/docs/XSLT:fallback /es/docs/Web/XSLT/fallback +/es/docs/XSLT:for-each /es/docs/Web/XSLT/for-each +/es/docs/XSLT:if /es/docs/Web/XSLT/if +/es/docs/XSLT:import /es/docs/Web/XSLT/import +/es/docs/XSLT:include /es/docs/Web/XSLT/include +/es/docs/XSLT:key /es/docs/Web/XSLT/key +/es/docs/XSLT:message /es/docs/Web/XSLT/message +/es/docs/XSLT:namespace-alias /es/docs/Web/XSLT/namespace-alias +/es/docs/XSLT:number /es/docs/Web/XSLT/number +/es/docs/XSLT:otherwise /es/docs/Web/XSLT/otherwise +/es/docs/XSLT:when /es/docs/Web/XSLT/when +/es/docs/XSLT:with-param /es/docs/Web/XSLT/with-param +/es/docs/controladores_protocolos_web /es/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +/es/docs/en /en-US/ +/es/docs/firefox_Web_Developer_(externo) https://addons.mozilla.org/firefox/60/ +/es/docs/lugares /es/docs/Cat%C3%A1logo +/es/docs/mozilla-central /es/docs/Mozilla/Developer_guide/mozilla-central +/es/docs/nsISupports:AddRef /es/docs/nsISupports/AddRef +/es/docs/nsISupports:QueryInterface /es/docs/nsISupports/QueryInterface +/es/docs/nsISupports:Release /es/docs/nsISupports/Release +/es/docs/video /es/docs/Web/HTML/Elemento/video diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json new file mode 100644 index 0000000000..6a83fa982b --- /dev/null +++ b/files/es/_wikihistory.json @@ -0,0 +1,23774 @@ +{ + "Acerca_del_Modelo_de_Objetos_del_Documento": { + "modified": "2019-03-24T00:02:47.149Z", + "contributors": [ + "fscholz", + "Mgjbot", + "Nathymig", + "Jorolo" + ] + }, + "Actualizar_aplicaciones_web_para_Firefox_3": { + "modified": "2019-03-23T23:58:06.668Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Sheppy", + "trada", + "manueljrs", + "flaviog", + "Rafavs", + "Marcomavil", + "Mgjbot" + ] + }, + "Actualizar_extensiones_para_Firefox_3": { + "modified": "2019-03-23T23:58:10.215Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Pgulijczuk", + "deimidis", + "flaviog", + "Nukeador", + "Giovanisf13", + "Firewordy", + "Dfier", + "Rumont", + "Wrongloop", + "Mgjbot" + ] + }, + "Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3": { + "modified": "2019-12-13T20:34:57.052Z", + "contributors": [ + "wbamberg", + "lajaso", + "teoli", + "Sheppy", + "Pgulijczuk", + "deimidis", + "Nukeador", + "Ffranz", + "HenryGR" + ] + }, + "Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla": { + "modified": "2019-01-16T14:53:56.551Z", + "contributors": [ + "DoctorRomi", + "Superruzafa" + ] + }, + "Applying_SVG_effects_to_HTML_content": { + "modified": "2019-03-24T00:09:04.196Z", + "contributors": [ + "elPatox" + ] + }, + "Añadir_lectores_de_canales_a_Firefox": { + "modified": "2019-03-23T23:54:31.423Z", + "contributors": [ + "wbamberg", + "Mgjbot", + "RickieesES", + "Nukeador", + "Anyulled" + ] + }, + "Añadir_motores_de_búsqueda_desde_páginas_web": { + "modified": "2019-01-16T15:27:59.157Z", + "contributors": [ + "Mgjbot", + "Superruzafa", + "Lesmo sft", + "Nukeador" + ] + }, + "Bugs_importantes_solucionados_en_Firefox_3": { + "modified": "2019-03-23T23:53:21.447Z", + "contributors": [ + "wbamberg", + "Mgjbot", + "Nathymig", + "Nukeador", + "HenryGR", + "RickieesES", + "Ciberman osman" + ] + }, + "Building_an_Extension": { + "modified": "2019-03-23T23:19:24.053Z", + "contributors": [ + "martin.weingart", + "Josele89" + ] + }, + "CSS/Media_queries": { + "modified": "2019-10-03T11:52:26.928Z", + "contributors": [ + "danielblazquez", + "brunonra-dev", + "kitab15", + "Sebastianz", + "jsx", + "carlossuarez", + "mrstork", + "malayaleecoder", + "seeker8", + "Xaviju", + "sinfallas", + "maedca" + ] + }, + "CSS/Using_CSS_gradients": { + "modified": "2019-06-03T20:30:31.836Z", + "contributors": [ + "GasGen", + "undest", + "Sebastianz", + "Eneagrama" + ] + }, + "CSS_dinámico": { + "modified": "2019-01-16T14:14:46.881Z", + "contributors": [ + "RickieesES", + "Jorolo", + "Peperoni", + "Hande", + "Nukeador" + ] + }, + "Cadenas_del_User_Agent_de_Gecko": { + "modified": "2019-03-23T23:45:27.069Z", + "contributors": [ + "teoli", + "Orestesleal13022" + ] + }, + "Code_snippets": { + "modified": "2019-01-16T13:52:37.564Z", + "contributors": [ + "ffox" + ] + }, + "Code_snippets/Pestañas_del_navegador": { + "modified": "2019-01-16T13:52:57.159Z", + "contributors": [ + "ffox" + ] + }, + "Columnas_con_CSS-3": { + "modified": "2019-03-23T23:43:23.940Z", + "contributors": [ + "Mgjbot", + "Jorolo", + "Nukeador" + ] + }, + "Compilar_e_instalar": { + "modified": "2019-03-23T23:58:55.256Z", + "contributors": [ + "teoli", + "DoctorRomi", + "Mgjbot", + "Blank zero" + ] + }, + "Configurar_correctamente_los_tipos_MIME_del_servidor": { + "modified": "2020-07-16T22:36:04.341Z", + "contributors": [ + "Nukeador", + "Kroatan", + "Mtiscordio", + "Hostar", + "Iwa1", + "Markens", + "Brayan Habid" + ] + }, + "Control_de_la_corrección_ortográfica_en_formularios_HTML": { + "modified": "2019-03-23T23:54:20.583Z", + "contributors": [ + "raecillacastellana", + "vltamara", + "MxJ3susDi4z", + "teoli", + "Mgjbot", + "Jorolo", + "Omnisilver", + "Nukeador" + ] + }, + "Creacion_de_plugins_OpenSearch_para_Firefox": { + "modified": "2019-03-24T00:00:08.096Z", + "contributors": [ + "teoli", + "Etrigan", + "tbusca", + "Nukeador", + "Rodrigoknascimento", + "Citora", + "Mgjbot", + "Fenomeno" + ] + }, + "Creación_de_Componentes_XPCOM/Interior_del_Componente": { + "modified": "2019-04-20T03:45:43.371Z", + "contributors": [ + "wbamberg", + "Maharba" + ] + }, + "Creación_de_Componentes_XPCOM/Prefacio": { + "modified": "2019-04-20T03:45:45.365Z", + "contributors": [ + "wbamberg", + "Maharba" + ] + }, + "Creando_una_extensión": { + "modified": "2019-03-24T00:13:16.401Z", + "contributors": [ + "teoli", + "ethertank", + "Sheppy", + "athesto", + "StripTM", + "myfcr", + "DoctorRomi", + "Mgjbot", + "M4ur170", + "Nukeador", + "Wayner", + "El Hacker", + "Arcangelhak", + "Psanz", + "Victor-27-", + "Arteadonis", + "Gadolinio", + "Opevelyn", + "Verruckt", + "Spg2006", + "Gbulfon", + "Damien", + "Peperoni", + "CD77", + "Ordep", + "Indigo", + "Jp1", + "GMG", + "Ateneo", + "Doctormanfer", + "A Morenazo", + "Trace2x", + "Odo", + "Hatch", + "Jorolo", + "Lastjuan", + "Ulntux" + ] + }, + "Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System": { + "modified": "2019-04-26T15:53:18.603Z", + "contributors": [ + "cantineoqueteveo", + "2stapps", + "teoli", + "DoctorRomi", + "Carok", + "Gustavo Ruiz", + "Nukeador", + "JuninhoBoy95", + "Kuriboh", + "Mgjbot", + "RickieesES", + "Geomorillo", + "Blank zero", + "Haelmx", + "Superruzafa" + ] + }, + "DHTML": { + "modified": "2019-03-23T23:44:54.880Z", + "contributors": [ + "Mgjbot", + "Jorolo", + "Jos" + ] + }, + "DHTML_Demostraciones_del_uso_de_DOM_Style": { + "modified": "2019-01-16T16:07:51.712Z", + "contributors": [ + "Mgjbot", + "Superruzafa", + "Trace2x", + "Fedora-core", + "Nukeador" + ] + }, + "DOM": { + "modified": "2019-03-24T00:03:50.113Z", + "contributors": [ + "ethertank", + "fscholz", + "Mgjbot", + "Nukeador", + "Jorolo", + "Takenbot", + "julionc", + "Versae" + ] + }, + "DOM/Almacenamiento": { + "modified": "2019-03-24T00:11:21.014Z", + "contributors": [ + "AshfaqHossain", + "StripTM", + "RickieesES", + "inma_610", + "Mgjbot", + "Superruzafa", + "Nukeador" + ] + }, + "DOM/Manipulando_el_historial_del_navegador": { + "modified": "2019-09-07T17:44:48.428Z", + "contributors": [ + "seaug", + "HerniHdez", + "AlePerez92", + "SphinxKnight", + "talo242", + "mauroc8", + "javiernunez", + "dongerardor", + "StripTM", + "Galsas", + "teoli", + "Izel", + "Sheppy", + "translatoon" + ] + }, + "DOM/Manipulando_el_historial_del_navegador/Ejemplo": { + "modified": "2019-03-23T22:29:32.414Z", + "contributors": [ + "maitret" + ] + }, + "DOM/Touch_events": { + "modified": "2019-03-23T23:35:01.361Z", + "contributors": [ + "wbamberg", + "wffranco", + "fscholz", + "teoli", + "Fjaguero", + "jvmjunior", + "maedca" + ] + }, + "DOM/document.cookie": { + "modified": "2020-04-15T13:31:17.928Z", + "contributors": [ + "atiliopereira", + "Skattspa", + "aralvarez", + "SphinxKnight", + "khalid32", + "Ogquir", + "strongville", + "Ciencia Al Poder", + "Markens", + "DR" + ] + }, + "DOM_Inspector": { + "modified": "2020-07-16T22:36:24.191Z", + "contributors": [ + "Mgjbot", + "Jorolo", + "Tatan", + "TETSUO" + ] + }, + "Desarrollando_Mozilla": { + "modified": "2019-01-16T14:32:31.515Z", + "contributors": [ + "another_sam", + "Mgjbot", + "Jorolo", + "Nukeador", + "Turin" + ] + }, + "Desarrollo_Web": { + "modified": "2019-03-23T23:43:57.691Z", + "contributors": [ + "Mgjbot", + "Jorolo" + ] + }, + "Detectar_la_orientación_del_dispositivo": { + "modified": "2019-03-24T00:07:57.131Z", + "contributors": [ + "inma_610" + ] + }, + "Dibujando_Gráficos_con_Canvas": { + "modified": "2019-01-16T20:01:59.575Z", + "contributors": [ + "Firegooploer" + ] + }, + "Dibujar_texto_usando_canvas": { + "modified": "2019-01-16T15:31:41.845Z", + "contributors": [ + "Mgjbot", + "HenryGR", + "Nukeador", + "RickieesES", + "Debianpc" + ] + }, + "DragDrop": { + "modified": "2019-03-23T23:18:26.504Z", + "contributors": [ + "drewp" + ] + }, + "DragDrop/Drag_and_Drop": { + "modified": "2019-03-24T00:07:57.845Z", + "contributors": [ + "ethertank", + "inma_610" + ] + }, + "DragDrop/Drag_and_Drop/drag_and_drop_archivo": { + "modified": "2020-11-01T11:34:07.543Z", + "contributors": [ + "juanrueda", + "davidpala.dev", + "brahAraya", + "ajuni880", + "israteneda", + "RVidalki", + "clarii", + "rgomez" + ] + }, + "DragDrop/Recommended_Drag_Types": { + "modified": "2019-03-23T23:18:24.597Z", + "contributors": [ + "Evinton" + ] + }, + "Estructura_de_directorios_de_código_fuente_de_Mozilla": { + "modified": "2019-03-24T00:17:11.569Z", + "contributors": [ + "ethertank", + "MiguelFRomeroR", + "Sheppy" + ] + }, + "Etiquetas_audio_y_video_en_Firefox": { + "modified": "2019-03-23T23:59:36.294Z", + "contributors": [ + "Nukeador", + "deimidis" + ] + }, + "Extensiones/Actualización_de_extensiones_para_Firefox_4": { + "modified": "2019-03-24T00:05:58.390Z", + "contributors": [ + "inma_610" + ] + }, + "FAQ_Incrustando_Mozilla": { + "modified": "2019-01-16T16:20:13.874Z", + "contributors": [ + "Lastjuan" + ] + }, + "Firefox_1.5_para_Desarrolladores": { + "modified": "2019-03-23T23:47:34.365Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Rubenbae", + "Pachtonio", + "Sheppy", + "Mgjbot", + "Jorolo", + "Fedora-core", + "Nukeador", + "Takenbot", + "Willyaranda", + "Pasky", + "Angelr04", + "Epaclon" + ] + }, + "Firefox_19_para_desarrolladores": { + "modified": "2019-03-18T20:54:04.568Z", + "contributors": [ + "ulisestrujillo", + "wbamberg", + "Sebastianz", + "mannyatico" + ] + }, + "Firefox_2_para_desarrolladores": { + "modified": "2019-03-23T23:58:56.168Z", + "contributors": [ + "wbamberg", + "DoctorRomi", + "Markens", + "Mgjbot", + "Nukeador", + "Superruzafa", + "Guis", + "StripTM", + "Jorolo" + ] + }, + "Firefox_3.5_para_desarrolladores": { + "modified": "2019-03-24T00:03:16.036Z", + "contributors": [ + "wbamberg", + "ethertank", + "another_sam", + "deimidis", + "Nukeador" + ] + }, + "Firefox_3_para_desarrolladores": { + "modified": "2019-03-24T00:04:08.312Z", + "contributors": [ + "wbamberg", + "teoli", + "fscholz", + "Mgjbot", + "Nukeador", + "Surferosx", + "Nathymig", + "Dfier", + "Wrongloop", + "Garlock", + "Brahiam", + "Mariano", + "HenryGR", + "Jseldon" + ] + }, + "Firefox_addons_developer_guide/Introduction_to_Extensions": { + "modified": "2019-03-23T23:37:41.632Z", + "contributors": [ + "pacommozilla", + "AgustinAlvia" + ] + }, + "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions": { + "modified": "2019-03-18T21:16:06.336Z", + "contributors": [ + "AgustinAlvia" + ] + }, + "Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio": { + "modified": "2019-01-16T14:22:48.165Z", + "contributors": [ + "inma_610" + ] + }, + "Fragmentos_de_código": { + "modified": "2019-01-16T13:52:44.049Z", + "contributors": [ + "ffox" + ] + }, + "Funciones": { + "modified": "2019-01-16T16:18:04.260Z", + "contributors": [ + "Jorolo" + ] + }, + "Games": { + "modified": "2019-09-09T15:31:15.455Z", + "contributors": [ + "SphinxKnight", + "isocialweb", + "wbamberg", + "fscholz", + "ajspadial", + "Arudb79", + "atlas7jean", + "chrisdavidmills" + ] + }, + "Games/Anatomy": { + "modified": "2019-01-16T22:18:47.235Z", + "contributors": [ + "wbamberg", + "cnaucler" + ] + }, + "Games/Herramients": { + "modified": "2019-01-16T19:29:51.696Z", + "contributors": [ + "wbamberg", + "atlas7jean" + ] + }, + "Games/Herramients/asm.js": { + "modified": "2019-03-18T21:21:31.919Z", + "contributors": [ + "WilsonIsAliveClone", + "serarroy" + ] + }, + "Games/Introduccion": { + "modified": "2020-11-28T21:23:49.961Z", + "contributors": [ + "rayrojas", + "titox", + "gauchoscript", + "wbamberg", + "Mancux2", + "Albizures", + "atlas7jean" + ] + }, + "Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen)": { + "modified": "2019-08-05T12:49:59.324Z", + "contributors": [ + "WilsonIsAliveClone" + ] + }, + "Games/Publishing_games": { + "modified": "2019-03-18T21:22:03.542Z", + "contributors": [ + "carlosgocereceda", + "mikelmg", + "SphinxKnight", + "wbamberg" + ] + }, + "Games/Publishing_games/Game_distribution": { + "modified": "2020-08-09T16:02:37.394Z", + "contributors": [ + "katherincorredor", + "WilsonIsAliveClone", + "carlosgocereceda" + ] + }, + "Games/Publishing_games/Monetización_de_los_juegos": { + "modified": "2019-03-18T21:22:04.540Z", + "contributors": [ + "mikelmg", + "carlosgocereceda", + "WilsonIsAliveClone" + ] + }, + "Games/Techniques": { + "modified": "2019-01-17T02:01:32.309Z", + "contributors": [ + "wbamberg", + "chrisdavidmills" + ] + }, + "Games/Techniques/2D_collision_detection": { + "modified": "2019-01-17T02:34:23.543Z", + "contributors": [ + "wbamberg", + "SuperHostile" + ] + }, + "Games/Techniques/3D_on_the_web": { + "modified": "2019-03-18T21:23:46.780Z", + "contributors": [ + "wbamberg" + ] + }, + "Games/Techniques/WebRTC_data_channels": { + "modified": "2019-03-23T22:04:08.435Z", + "contributors": [ + "wbamberg", + "J4MP" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser": { + "modified": "2019-03-18T21:43:09.977Z", + "contributors": [ + "wbamberg", + "chrisdavidmills" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens": { + "modified": "2019-03-18T21:18:57.095Z", + "contributors": [ + "WilsonIsAliveClone", + "serarroy" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Botones": { + "modified": "2019-11-03T00:22:01.318Z", + "contributors": [ + "AdryDev92", + "carlosgocereceda", + "serarroy" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Collision_detection": { + "modified": "2019-03-18T21:21:35.455Z", + "contributors": [ + "WilsonIsAliveClone", + "serarroy" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Extra_lives": { + "modified": "2019-03-18T21:21:17.358Z", + "contributors": [ + "carlosgocereceda", + "WilsonIsAliveClone", + "serarroy" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Game_over": { + "modified": "2019-03-18T21:20:23.610Z", + "contributors": [ + "mikelmg", + "carlosgocereceda", + "WilsonIsAliveClone" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework": { + "modified": "2019-01-17T02:28:59.298Z", + "contributors": [ + "wbamberg", + "proncaglia" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball": { + "modified": "2019-03-18T21:21:15.950Z", + "contributors": [ + "WilsonIsAliveClone", + "serarroy" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes": { + "modified": "2019-03-18T21:18:55.239Z", + "contributors": [ + "WilsonIsAliveClone" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Scaling": { + "modified": "2019-01-17T02:28:53.459Z", + "contributors": [ + "wbamberg", + "proncaglia" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/The_score": { + "modified": "2019-03-18T21:21:15.588Z", + "contributors": [ + "mikelmg", + "WilsonIsAliveClone", + "serarroy" + ] + }, + "Games/Tutorials/2D_breakout_game_Phaser/Win_the_game": { + "modified": "2020-04-05T22:13:29.758Z", + "contributors": [ + "KevinPiola", + "carlosgocereceda", + "serarroy" + ] + }, + "Games/Workflows": { + "modified": "2019-01-16T19:25:39.809Z", + "contributors": [ + "wbamberg", + "groovecoder" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro": { + "modified": "2019-03-23T22:19:39.385Z", + "contributors": [ + "wbamberg", + "profesooooor", + "emolinerom", + "jolosan" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls": { + "modified": "2019-03-23T22:19:43.884Z", + "contributors": [ + "wbamberg", + "regisdark", + "profesooooor", + "emolinerom" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques": { + "modified": "2019-01-17T00:34:48.662Z", + "contributors": [ + "wbamberg", + "profesooooor", + "emolinerom" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado": { + "modified": "2019-01-17T00:34:24.542Z", + "contributors": [ + "wbamberg", + "profesooooor", + "emolinerom" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton": { + "modified": "2019-01-17T00:34:40.600Z", + "contributors": [ + "wbamberg", + "profesooooor", + "emolinerom" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it": { + "modified": "2019-01-17T00:33:08.752Z", + "contributors": [ + "wbamberg", + "profesooooor", + "jolosan" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones": { + "modified": "2019-03-18T20:48:38.662Z", + "contributors": [ + "juanedsa", + "wbamberg", + "profesooooor", + "emolinerom" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego": { + "modified": "2019-03-23T22:17:05.460Z", + "contributors": [ + "wbamberg", + "regisdark", + "profesooooor", + "jolosan" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola": { + "modified": "2019-03-23T22:19:10.641Z", + "contributors": [ + "wbamberg", + "profesooooor", + "jolosan", + "emolinerom" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando": { + "modified": "2019-01-17T01:08:54.537Z", + "contributors": [ + "wbamberg", + "profesooooor" + ] + }, + "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win": { + "modified": "2019-01-17T01:08:23.453Z", + "contributors": [ + "wbamberg", + "profesooooor" + ] + }, + "Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation": { + "modified": "2019-03-23T23:11:29.148Z", + "contributors": [ + "wbamberg", + "lauttttaro", + "chebit" + ] + }, + "Generación_de_GUIDs": { + "modified": "2019-03-24T00:06:07.388Z", + "contributors": [ + "ibnkhaldun" + ] + }, + "Glossary": { + "modified": "2020-10-07T11:08:11.871Z", + "contributors": [ + "peterbe", + "joseluisq", + "SphinxKnight", + "wbamberg", + "raecillacastellana", + "LauraHilliger" + ] + }, + "Glossary/404": { + "modified": "2019-03-23T22:37:45.365Z", + "contributors": [ + "pekechis" + ] + }, + "Glossary/502": { + "modified": "2019-03-23T22:37:47.150Z", + "contributors": [ + "pekechis" + ] + }, + "Glossary/AJAX": { + "modified": "2020-08-03T01:24:29.370Z", + "contributors": [ + "zgreco2000", + "hello", + "hectoraldairah", + "tonyrodrigues", + "memotronix", + "ekros" + ] + }, + "Glossary/API": { + "modified": "2019-03-23T23:14:34.833Z", + "contributors": [ + "teoli", + "AngelFQC" + ] + }, + "Glossary/ARIA": { + "modified": "2019-03-23T22:15:41.387Z", + "contributors": [ + "gparra989" + ] + }, + "Glossary/ARPA": { + "modified": "2019-03-18T21:31:13.320Z", + "contributors": [ + "dcantomo" + ] + }, + "Glossary/ASCII": { + "modified": "2019-03-23T22:15:33.120Z", + "contributors": [ + "lajaso", + "gparra989" + ] + }, + "Glossary/ATAG": { + "modified": "2019-03-23T22:15:44.329Z", + "contributors": [ + "gparra989" + ] + }, + "Glossary/Abstraction": { + "modified": "2019-03-23T22:24:49.785Z", + "contributors": [ + "feliperomero3", + "israel-munoz", + "ekros" + ] + }, + "Glossary/Accessibility": { + "modified": "2019-03-23T22:25:00.142Z", + "contributors": [ + "ekros" + ] + }, + "Glossary/Accessibility_tree": { + "modified": "2020-10-23T07:47:20.142Z", + "contributors": [ + "chrisdavidmills", + "caro-oviedo" + ] + }, + "Glossary/Adobe_Flash": { + "modified": "2019-03-18T20:57:35.400Z", + "contributors": [ + "yoshimii", + "ekros" + ] + }, + "Glossary/Algoritmo": { + "modified": "2019-01-17T00:09:54.063Z", + "contributors": [ + "ekros" + ] + }, + "Glossary/Apple_Safari": { + "modified": "2020-08-30T09:41:20.026Z", + "contributors": [ + "mastertrooper", + "ekros" + ] + }, + "Glossary/Argumento": { + "modified": "2019-03-23T22:15:34.303Z", + "contributors": [ + "gparra989" + ] + }, + "Glossary/Arpanet": { + "modified": "2020-03-15T22:50:09.715Z", + "contributors": [ + "kev8in", + "gparra989" + ] + }, + "Glossary/Arquitectura_de_la_información": { + "modified": "2020-09-06T16:32:32.362Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/Arreglos": { + "modified": "2020-05-28T13:51:10.546Z", + "contributors": [ + "fedoroffs", + "BubuAnabelas", + "Davids-Devel", + "Daniel_Martin", + "gparra989" + ] + }, + "Glossary/Asíncrono": { + "modified": "2020-05-04T10:40:03.360Z", + "contributors": [ + "jorgeCaster", + "fjluengo", + "gparra989" + ] + }, + "Glossary/Atributo": { + "modified": "2019-03-23T22:15:46.319Z", + "contributors": [ + "gparra989" + ] + }, + "Glossary/Atributo_global": { + "modified": "2019-03-18T21:19:21.658Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Bandwidth": { + "modified": "2019-03-23T22:15:45.908Z", + "contributors": [ + "gparra989" + ] + }, + "Glossary/BigInt": { + "modified": "2020-09-25T04:27:46.263Z", + "contributors": [ + "4rturd13" + ] + }, + "Glossary/Blink": { + "modified": "2019-03-18T21:44:06.201Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/Block": { + "modified": "2019-03-18T21:41:49.707Z", + "contributors": [ + "Esteban" + ] + }, + "Glossary/Block/CSS": { + "modified": "2020-06-24T23:38:45.496Z", + "contributors": [ + "LinkStrifer", + "BubuAnabelas", + "Esteban" + ] + }, + "Glossary/Boolean": { + "modified": "2019-03-23T22:58:03.390Z", + "contributors": [ + "Cleon" + ] + }, + "Glossary/Browser": { + "modified": "2019-03-18T21:43:56.678Z", + "contributors": [ + "Maletil", + "ferlopezcarr" + ] + }, + "Glossary/Browsing_context": { + "modified": "2019-04-04T14:36:22.033Z", + "contributors": [ + "danielblazquez" + ] + }, + "Glossary/Buffer": { + "modified": "2019-03-18T21:18:59.378Z", + "contributors": [ + "diegorhs" + ] + }, + "Glossary/CDN": { + "modified": "2020-05-28T16:24:22.721Z", + "contributors": [ + "jaimefdezmv", + "quirinolemanches" + ] + }, + "Glossary/CID": { + "modified": "2019-03-18T21:19:22.724Z", + "contributors": [ + "PabloDeTorre", + "sergiomgm" + ] + }, + "Glossary/CRUD": { + "modified": "2019-03-23T22:03:05.724Z", + "contributors": [ + "velizluisma" + ] + }, + "Glossary/CSRF": { + "modified": "2019-03-18T21:19:22.851Z", + "contributors": [ + "sergiomgm" + ] + }, + "Glossary/CSS": { + "modified": "2020-06-20T09:41:42.032Z", + "contributors": [ + "hello", + "Maletil", + "cawilff", + "Sergio_Gonzalez_Collado", + "analia.antenucci", + "sergio_p_d", + "memotronix" + ] + }, + "Glossary/Cabecera_general": { + "modified": "2019-03-18T21:34:28.155Z", + "contributors": [ + "Watermelonnable" + ] + }, + "Glossary/Caché": { + "modified": "2019-03-18T21:19:00.217Z", + "contributors": [ + "diegorhs" + ] + }, + "Glossary/Callback_function": { + "modified": "2019-04-22T16:14:36.669Z", + "contributors": [ + "faustom721", + "lcassettai", + "yomar-dev" + ] + }, + "Glossary/Canvas": { + "modified": "2020-09-21T20:35:53.439Z", + "contributors": [ + "Alejo1417", + "jorgeluispedro16" + ] + }, + "Glossary/Caracter": { + "modified": "2020-08-23T05:27:25.056Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/Chrome": { + "modified": "2019-03-18T21:42:29.056Z", + "contributors": [ + "amirtorrez" + ] + }, + "Glossary/Cifrado": { + "modified": "2019-03-18T21:19:02.237Z", + "contributors": [ + "PabloDeTorre", + "sergiomgm" + ] + }, + "Glossary/Clasificación_por_tarjetas_(card_sorting)": { + "modified": "2019-03-18T21:19:20.709Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Class": { + "modified": "2019-03-18T21:18:45.753Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/Clausura": { + "modified": "2020-08-12T18:07:27.330Z", + "contributors": [ + "l1oret" + ] + }, + "Glossary/Clave": { + "modified": "2020-02-18T06:49:22.148Z", + "contributors": [ + "joseluisq", + "sergiomgm", + "GCF7" + ] + }, + "Glossary/Codec": { + "modified": "2019-03-18T21:19:01.793Z", + "contributors": [ + "diegorhs" + ] + }, + "Glossary/Compile": { + "modified": "2019-03-18T21:19:15.661Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/Computer_Programming": { + "modified": "2019-03-23T22:02:08.531Z", + "contributors": [ + "israel-munoz" + ] + }, + "Glossary/Constante": { + "modified": "2019-03-18T21:19:15.794Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Constructor": { + "modified": "2019-03-23T22:15:36.356Z", + "contributors": [ + "untilbit", + "gparra989" + ] + }, + "Glossary/Cookie": { + "modified": "2019-03-18T21:19:00.075Z", + "contributors": [ + "diegorhs" + ] + }, + "Glossary/Copyleft": { + "modified": "2019-03-18T21:43:43.180Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/Criptoanálisis": { + "modified": "2019-03-18T21:18:36.783Z", + "contributors": [ + "sergiomgm", + "GCF7" + ] + }, + "Glossary/Criptografía": { + "modified": "2019-03-23T22:02:58.447Z", + "contributors": [ + "velizluisma" + ] + }, + "Glossary/Cross-site_scripting": { + "modified": "2020-04-13T08:31:08.536Z", + "contributors": [ + "Luiggy", + "qwerty726" + ] + }, + "Glossary/DOM": { + "modified": "2019-03-18T21:10:52.251Z", + "contributors": [ + "ChrisMHM", + "PabloDeTorre", + "vinyetcg", + "ferlopezcarr", + "HerberWest" + ] + }, + "Glossary/DTD": { + "modified": "2019-01-17T00:20:06.485Z", + "contributors": [ + "wilfridoSantos" + ] + }, + "Glossary/Descifrado": { + "modified": "2019-03-18T21:19:11.476Z", + "contributors": [ + "sergiomgm", + "GCF7" + ] + }, + "Glossary/Doctype": { + "modified": "2019-03-23T22:07:28.155Z", + "contributors": [ + "omertafox" + ] + }, + "Glossary/Domain": { + "modified": "2019-03-18T21:19:17.838Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Dynamic_programming_language": { + "modified": "2020-09-12T18:21:07.076Z", + "contributors": [ + "IsraFloores", + "DaniNz" + ] + }, + "Glossary/ECMAScript": { + "modified": "2020-08-31T05:49:16.882Z", + "contributors": [ + "Nachec", + "anaturrillo", + "Cleon" + ] + }, + "Glossary/Element": { + "modified": "2019-03-18T21:31:18.857Z", + "contributors": [ + "eddieurbina", + "carllewisc" + ] + }, + "Glossary/Empty_element": { + "modified": "2019-03-23T22:10:52.378Z", + "contributors": [ + "juanmmendez", + "DaniNz" + ] + }, + "Glossary/Encapsulation": { + "modified": "2019-03-18T21:19:13.092Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Encriptación": { + "modified": "2019-03-18T21:19:07.209Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie", + "sergiomgm" + ] + }, + "Glossary/Entidad": { + "modified": "2020-07-08T14:34:06.256Z", + "contributors": [ + "lucasreta" + ] + }, + "Glossary/Espacio_en_blanco": { + "modified": "2020-08-24T04:59:10.953Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/Estructura_de_datos": { + "modified": "2019-03-18T21:24:31.453Z", + "contributors": [ + "edsonv" + ] + }, + "Glossary/FPS": { + "modified": "2020-08-19T14:42:01.823Z", + "contributors": [ + "ianaya89" + ] + }, + "Glossary/FTP": { + "modified": "2020-06-22T03:59:10.085Z", + "contributors": [ + "Maose" + ] + }, + "Glossary/Flex": { + "modified": "2020-10-03T01:09:13.365Z", + "contributors": [ + "duduindo", + "FlashAmarillo" + ] + }, + "Glossary/Flex_Container": { + "modified": "2019-11-21T16:42:31.273Z", + "contributors": [ + "scaloner" + ] + }, + "Glossary/Flexbox": { + "modified": "2019-03-18T21:23:56.502Z", + "contributors": [ + "danpaltor", + "ericksonespejo" + ] + }, + "Glossary/Funcion_de_primera_clase": { + "modified": "2020-05-14T19:36:29.513Z", + "contributors": [ + "l1oret", + "hmorv", + "LaloHao" + ] + }, + "Glossary/Función": { + "modified": "2019-03-18T21:19:19.995Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/GPL": { + "modified": "2019-03-18T21:43:50.897Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/Git": { + "modified": "2019-03-18T21:19:20.412Z", + "contributors": [ + "PabloDeTorre", + "sergiomgm" + ] + }, + "Glossary/Google_Chrome": { + "modified": "2019-03-18T21:44:29.185Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/Grid": { + "modified": "2019-03-23T22:10:55.372Z", + "contributors": [ + "ocamachor", + "tipoqueno", + "welm" + ] + }, + "Glossary/Grid_Areas": { + "modified": "2019-03-18T21:46:28.612Z", + "contributors": [ + "tipoqueno" + ] + }, + "Glossary/Grid_Column": { + "modified": "2020-05-19T18:27:14.068Z", + "contributors": [ + "biclope13", + "amaiafilo" + ] + }, + "Glossary/Grid_Lines": { + "modified": "2019-05-27T03:46:29.561Z", + "contributors": [ + "asael2" + ] + }, + "Glossary/Grid_Rows": { + "modified": "2019-03-18T21:23:35.644Z", + "contributors": [ + "Xino" + ] + }, + "Glossary/HTML": { + "modified": "2020-01-23T12:51:04.156Z", + "contributors": [ + "editorUOC", + "edsonv", + "jpmontoya182", + "sergio_p_d", + "raecillacastellana" + ] + }, + "Glossary/HTML5": { + "modified": "2020-06-22T04:32:17.508Z", + "contributors": [ + "Maose" + ] + }, + "Glossary/HTTP": { + "modified": "2019-07-01T03:11:50.434Z", + "contributors": [ + "SphinxKnight", + "unaivalle", + "sdelrio", + "sergio_p_d" + ] + }, + "Glossary/Head": { + "modified": "2020-06-22T04:54:37.023Z", + "contributors": [ + "Maose" + ] + }, + "Glossary/Hilo_principal": { + "modified": "2020-03-12T06:05:36.693Z", + "contributors": [ + "elimperiodelaweb" + ] + }, + "Glossary/Hoisting": { + "modified": "2019-05-15T21:40:52.256Z", + "contributors": [ + "jevvilla", + "IsaacAaron", + "sminutoli" + ] + }, + "Glossary/Hyperlink": { + "modified": "2019-03-18T21:44:07.373Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/Hypertext": { + "modified": "2019-03-18T21:30:26.239Z", + "contributors": [ + "12g" + ] + }, + "Glossary/IDE": { + "modified": "2019-03-18T21:18:59.913Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/IIFE": { + "modified": "2019-03-18T20:50:02.318Z", + "contributors": [ + "danyparc", + "Efrain", + "bluesky11117", + "emorc" + ] + }, + "Glossary/IP_Address": { + "modified": "2020-06-22T03:38:12.516Z", + "contributors": [ + "Maose" + ] + }, + "Glossary/IPv6": { + "modified": "2020-06-03T01:33:08.312Z", + "contributors": [ + "geryescalier" + ] + }, + "Glossary/IRC": { + "modified": "2020-12-03T00:37:27.868Z", + "contributors": [ + "devil64-dev" + ] + }, + "Glossary/ISP": { + "modified": "2020-06-22T04:21:55.362Z", + "contributors": [ + "Maose" + ] + }, + "Glossary/IU": { + "modified": "2019-03-18T21:18:49.573Z", + "contributors": [ + "diegorhs" + ] + }, + "Glossary/Identificador": { + "modified": "2020-08-28T17:30:13.071Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/IndexedDB": { + "modified": "2019-03-23T22:36:07.366Z", + "contributors": [ + "Loque" + ] + }, + "Glossary/Inmutable": { + "modified": "2019-03-18T21:19:12.385Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Internet": { + "modified": "2020-04-27T00:09:14.977Z", + "contributors": [ + "candepineyro2015", + "r2cris", + "cawilff" + ] + }, + "Glossary/JSON": { + "modified": "2019-05-24T12:44:54.639Z", + "contributors": [ + "EstebanRK", + "chavesrdj", + "LeonardoDG" + ] + }, + "Glossary/Java": { + "modified": "2019-03-18T21:19:11.310Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/JavaScript": { + "modified": "2020-09-01T00:56:53.463Z", + "contributors": [ + "Nachec", + "c9009", + "missmakita", + "sergio_p_d", + "gorrotowi" + ] + }, + "Glossary/Keyword": { + "modified": "2020-05-04T10:31:29.902Z", + "contributors": [ + "jorgeCaster", + "blanchart", + "DaniNz" + ] + }, + "Glossary/LGPL": { + "modified": "2019-03-18T21:43:48.377Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/Long_task": { + "modified": "2020-08-08T01:38:15.029Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/MVC": { + "modified": "2020-01-31T17:55:57.978Z", + "contributors": [ + "deit", + "IsaacAlvrt" + ] + }, + "Glossary/Metadato": { + "modified": "2019-03-18T21:19:04.572Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/MitM": { + "modified": "2019-03-18T21:25:35.556Z", + "contributors": [ + "lcastrosaez" + ] + }, + "Glossary/Mixin": { + "modified": "2019-03-23T22:37:38.011Z", + "contributors": [ + "josepaez2", + "raecillacastellana", + "kramery" + ] + }, + "Glossary/Mobile_First": { + "modified": "2019-07-02T17:22:58.448Z", + "contributors": [ + "JuanMaRuiz" + ] + }, + "Glossary/Mozilla_Firefox": { + "modified": "2019-03-23T22:06:36.476Z", + "contributors": [ + "BrodaNoel" + ] + }, + "Glossary/Método": { + "modified": "2020-07-21T21:37:11.109Z", + "contributors": [ + "Assael02", + "Davids-Devel" + ] + }, + "Glossary/Node": { + "modified": "2019-05-17T13:24:16.608Z", + "contributors": [ + "GUEROZ", + "untilbit", + "klez" + ] + }, + "Glossary/Node.js": { + "modified": "2020-10-24T17:01:45.516Z", + "contributors": [ + "oism28", + "rlopezAyala", + "malonson", + "migdonio1" + ] + }, + "Glossary/Node/DOM": { + "modified": "2019-03-23T22:27:35.877Z", + "contributors": [ + "malonson" + ] + }, + "Glossary/Nombre_de_dominio": { + "modified": "2019-03-18T21:19:21.120Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Nombre_de_encabezado_prohibido": { + "modified": "2019-03-23T22:02:11.147Z", + "contributors": [ + "Luiggy", + "tonialfaro" + ] + }, + "Glossary/Null": { + "modified": "2019-03-23T22:58:02.167Z", + "contributors": [ + "Cleon" + ] + }, + "Glossary/Numero": { + "modified": "2019-03-23T22:58:03.851Z", + "contributors": [ + "Cleon" + ] + }, + "Glossary/OOP": { + "modified": "2019-03-18T21:19:20.278Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/Objecto": { + "modified": "2019-03-23T22:58:05.221Z", + "contributors": [ + "Cleon" + ] + }, + "Glossary/Operador": { + "modified": "2019-03-23T22:53:20.989Z", + "contributors": [ + "germanfr" + ] + }, + "Glossary/Operando": { + "modified": "2020-09-05T17:33:42.415Z", + "contributors": [ + "brayan-orellanos" + ] + }, + "Glossary/PHP": { + "modified": "2020-05-07T14:37:16.100Z", + "contributors": [ + "pascual143" + ] + }, + "Glossary/POP": { + "modified": "2020-04-18T03:21:04.687Z", + "contributors": [ + "itrjwyss" + ] + }, + "Glossary/Parse": { + "modified": "2020-12-05T08:25:54.330Z", + "contributors": [ + "StripTM" + ] + }, + "Glossary/Pila_llamadas": { + "modified": "2020-04-26T12:00:35.332Z", + "contributors": [ + "l1oret" + ] + }, + "Glossary/Polyfill": { + "modified": "2019-03-18T21:24:24.118Z", + "contributors": [ + "viabadia" + ] + }, + "Glossary/Port": { + "modified": "2020-04-18T03:24:57.722Z", + "contributors": [ + "itrjwyss", + "malonson" + ] + }, + "Glossary/Preflight_peticion": { + "modified": "2019-03-18T21:29:47.773Z", + "contributors": [ + "daviddelamo" + ] + }, + "Glossary/Preprocesador_CSS": { + "modified": "2019-03-23T22:02:54.782Z", + "contributors": [ + "ealch", + "velizluisma" + ] + }, + "Glossary/Primitivo": { + "modified": "2020-09-17T22:06:17.504Z", + "contributors": [ + "Nachec", + "cocososo", + "abaracedo", + "Cleon" + ] + }, + "Glossary/Progressive_Enhancement": { + "modified": "2019-07-07T08:35:50.920Z", + "contributors": [ + "JuanMaRuiz" + ] + }, + "Glossary/Promise": { + "modified": "2019-03-18T21:18:47.852Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/Protocol": { + "modified": "2020-06-22T04:02:41.549Z", + "contributors": [ + "Maose", + "itrjwyss", + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/Prototype": { + "modified": "2019-03-28T18:50:47.544Z", + "contributors": [ + "maruskina" + ] + }, + "Glossary/Prototype-based_programming": { + "modified": "2020-08-25T19:45:44.389Z", + "contributors": [ + "duduindo", + "paolazaratem" + ] + }, + "Glossary/Pseudo-clase": { + "modified": "2019-03-23T22:38:49.143Z", + "contributors": [ + "VictorAbdon" + ] + }, + "Glossary/Pseudocódigo": { + "modified": "2019-03-18T21:19:15.497Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Public-key_cryptography": { + "modified": "2019-03-18T21:18:41.396Z", + "contributors": [ + "GCF7" + ] + }, + "Glossary/Python": { + "modified": "2019-01-17T03:26:06.615Z", + "contributors": [ + "Guzmanr1", + "ax16mr" + ] + }, + "Glossary/REST": { + "modified": "2019-03-18T21:19:06.376Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/RGB": { + "modified": "2019-03-18T21:19:01.657Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/RSS": { + "modified": "2019-03-18T21:43:45.312Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/Recursión": { + "modified": "2019-03-18T21:19:02.064Z", + "contributors": [ + "PabloDeTorre", + "sergiomgm" + ] + }, + "Glossary/Reflow": { + "modified": "2020-11-16T21:27:00.470Z", + "contributors": [ + "ccamiloo" + ] + }, + "Glossary/Regular_expression": { + "modified": "2019-03-23T22:27:50.421Z", + "contributors": [ + "lurkinboss81", + "malonson" + ] + }, + "Glossary/Responsive_web_design": { + "modified": "2019-03-18T21:36:04.998Z", + "contributors": [ + "lajaso" + ] + }, + "Glossary/Ruby": { + "modified": "2019-03-18T21:18:51.137Z", + "contributors": [ + "diegorhs" + ] + }, + "Glossary/SCV": { + "modified": "2019-03-18T21:19:21.440Z", + "contributors": [ + "carlosCharlie", + "sergiomgm" + ] + }, + "Glossary/SEO": { + "modified": "2019-03-23T22:38:01.994Z", + "contributors": [ + "carlossuarez" + ] + }, + "Glossary/SGML": { + "modified": "2019-03-18T21:43:11.251Z", + "contributors": [ + "Undigon", + "cawilff" + ] + }, + "Glossary/SIMD": { + "modified": "2019-03-18T21:18:44.939Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/SISD": { + "modified": "2019-03-18T21:18:56.313Z", + "contributors": [ + "carlosCharlie" + ] + }, + "Glossary/SLD": { + "modified": "2019-04-30T13:59:51.577Z", + "contributors": [ + "manfredosanchez" + ] + }, + "Glossary/SMTP": { + "modified": "2020-04-18T03:31:14.904Z", + "contributors": [ + "itrjwyss" + ] + }, + "Glossary/SQL": { + "modified": "2019-03-18T21:18:56.658Z", + "contributors": [ + "diegorhs" + ] + }, + "Glossary/SVG": { + "modified": "2019-03-18T21:35:52.789Z", + "contributors": [ + "lajaso" + ] + }, + "Glossary/SVN": { + "modified": "2019-03-18T21:19:01.509Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/Scope": { + "modified": "2019-07-02T17:59:48.762Z", + "contributors": [ + "Angel10050" + ] + }, + "Glossary/Sentencias": { + "modified": "2019-03-23T22:57:58.260Z", + "contributors": [ + "abaracedo", + "Cleon" + ] + }, + "Glossary/Sincronico": { + "modified": "2020-11-14T06:15:42.366Z", + "contributors": [ + "Yuunichi" + ] + }, + "Glossary/Sistema_gestion_contenidos": { + "modified": "2020-05-23T07:15:12.062Z", + "contributors": [ + "l1oret" + ] + }, + "Glossary/Sloppy_mode": { + "modified": "2020-08-31T05:32:49.321Z", + "contributors": [ + "Nachec", + "dcarmal-dayvo" + ] + }, + "Glossary/Slug": { + "modified": "2019-03-18T21:43:51.297Z", + "contributors": [ + "LSanchez697" + ] + }, + "Glossary/String": { + "modified": "2019-03-23T22:58:03.956Z", + "contributors": [ + "Cleon" + ] + }, + "Glossary/Symbol": { + "modified": "2019-03-23T22:57:59.274Z", + "contributors": [ + "Cleon" + ] + }, + "Glossary/Symmetric-key_cryptography": { + "modified": "2019-03-18T21:18:28.720Z", + "contributors": [ + "sergiomgm", + "GCF7" + ] + }, + "Glossary/TCP": { + "modified": "2020-04-18T03:19:23.119Z", + "contributors": [ + "itrjwyss", + "DaniNz" + ] + }, + "Glossary/Tag": { + "modified": "2020-05-04T10:24:41.308Z", + "contributors": [ + "jorgeCaster", + "DaniNz" + ] + }, + "Glossary/TextoCifrado": { + "modified": "2019-03-18T21:19:21.003Z", + "contributors": [ + "sergiomgm", + "GCF7" + ] + }, + "Glossary/TextoSimple": { + "modified": "2019-03-18T21:19:20.138Z", + "contributors": [ + "sergiomgm", + "GCF7" + ] + }, + "Glossary/Three_js": { + "modified": "2020-11-09T17:44:33.436Z", + "contributors": [ + "Plumas" + ] + }, + "Glossary/Tipado_dinámico": { + "modified": "2020-05-04T14:10:14.107Z", + "contributors": [ + "Caav98" + ] + }, + "Glossary/Tipificación_estática": { + "modified": "2019-11-22T03:17:09.186Z", + "contributors": [ + "HugolJumex" + ] + }, + "Glossary/Truthy": { + "modified": "2019-03-18T21:45:50.903Z", + "contributors": [ + "AlePerez92", + "VlixesItaca", + "juandata" + ] + }, + "Glossary/Type": { + "modified": "2019-03-18T21:19:01.358Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/URI": { + "modified": "2019-03-18T21:33:53.970Z", + "contributors": [ + "DaniNz" + ] + }, + "Glossary/URL": { + "modified": "2020-09-05T02:39:54.712Z", + "contributors": [ + "Nachec", + "BubuAnabelas", + "Jabi" + ] + }, + "Glossary/UTF-8": { + "modified": "2020-08-28T17:54:39.004Z", + "contributors": [ + "Nachec", + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/UX": { + "modified": "2020-11-10T01:47:49.876Z", + "contributors": [ + "rockoldo" + ] + }, + "Glossary/Unicode": { + "modified": "2020-08-28T17:48:20.454Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/Validador": { + "modified": "2019-03-18T21:19:01.934Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie", + "sergiomgm" + ] + }, + "Glossary/Valor": { + "modified": "2020-09-01T08:20:32.500Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/Variable": { + "modified": "2020-09-01T08:00:19.523Z", + "contributors": [ + "Nachec", + "Oscarloray" + ] + }, + "Glossary/Vendor_Prefix": { + "modified": "2019-03-18T21:21:31.446Z", + "contributors": [ + "Carlos_Gutierrez" + ] + }, + "Glossary/Viewport": { + "modified": "2019-07-22T14:35:59.639Z", + "contributors": [ + "EBregains", + "ffcc" + ] + }, + "Glossary/WCAG": { + "modified": "2019-03-18T21:19:06.839Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/WHATWG": { + "modified": "2019-03-18T21:43:10.212Z", + "contributors": [ + "cawilff" + ] + }, + "Glossary/WebKit": { + "modified": "2019-03-18T21:43:49.861Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/WebSockets": { + "modified": "2019-03-23T22:10:09.047Z", + "contributors": [ + "spachecojimenez" + ] + }, + "Glossary/WebVTT": { + "modified": "2020-08-13T17:05:43.218Z", + "contributors": [ + "Pablo-No" + ] + }, + "Glossary/World_Wide_Web": { + "modified": "2020-07-07T13:22:38.798Z", + "contributors": [ + "pauli.rodriguez.c", + "camsa", + "SphinxKnight", + "r2cris", + "sergio_p_d" + ] + }, + "Glossary/Wrapper": { + "modified": "2019-03-18T21:18:59.254Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/XForm": { + "modified": "2019-03-23T22:15:44.959Z", + "contributors": [ + "gparra989" + ] + }, + "Glossary/XML": { + "modified": "2019-03-18T21:43:43.021Z", + "contributors": [ + "ferlopezcarr" + ] + }, + "Glossary/application_context": { + "modified": "2019-03-23T22:22:51.795Z", + "contributors": [ + "ekros" + ] + }, + "Glossary/cacheable": { + "modified": "2019-10-03T19:16:28.937Z", + "contributors": [ + "htmike" + ] + }, + "Glossary/challenge": { + "modified": "2019-03-23T22:03:38.845Z", + "contributors": [ + "_deiberchacon" + ] + }, + "Glossary/character_encoding": { + "modified": "2019-03-18T21:19:17.489Z", + "contributors": [ + "PabloDeTorre", + "carlosCharlie" + ] + }, + "Glossary/coercion": { + "modified": "2020-02-29T16:57:08.213Z", + "contributors": [ + "frankynztein" + ] + }, + "Glossary/compile_time": { + "modified": "2020-12-05T08:34:39.507Z", + "contributors": [ + "StripTM" + ] + }, + "Glossary/conjunto_de_caracteres": { + "modified": "2020-08-28T18:09:05.836Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/elemento": { + "modified": "2019-01-16T19:38:18.287Z", + "contributors": [ + "BubuAnabelas", + "HerberWest" + ] + }, + "Glossary/event": { + "modified": "2019-03-18T21:19:03.177Z", + "contributors": [ + "PabloDeTorre" + ] + }, + "Glossary/gif": { + "modified": "2019-03-18T21:44:23.965Z", + "contributors": [ + "lajaso", + "ferlopezcarr" + ] + }, + "Glossary/https": { + "modified": "2019-03-18T21:20:16.521Z", + "contributors": [ + "mikelmg", + "BubuAnabelas" + ] + }, + "Glossary/jQuery": { + "modified": "2019-03-23T22:02:49.153Z", + "contributors": [ + "yancarq", + "velizluisma" + ] + }, + "Glossary/jpeg": { + "modified": "2019-03-23T22:15:35.380Z", + "contributors": [ + "gparra989" + ] + }, + "Glossary/miga-de-pan": { + "modified": "2020-02-02T10:51:21.098Z", + "contributors": [ + "blanchart" + ] + }, + "Glossary/propiedad": { + "modified": "2020-08-28T18:32:40.804Z", + "contributors": [ + "Nachec" + ] + }, + "Glossary/seguro": { + "modified": "2019-03-18T21:18:23.904Z", + "contributors": [ + "SackmannDV" + ] + }, + "Glossary/undefined": { + "modified": "2019-03-23T22:58:03.590Z", + "contributors": [ + "teoli", + "Cleon" + ] + }, + "Guía_para_el_desarrollador_de_agregados_para_Firefox": { + "modified": "2019-01-16T14:29:03.747Z", + "contributors": [ + "teoli", + "Sheppy", + "Eloy" + ] + }, + "Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones": { + "modified": "2019-03-24T00:04:44.724Z", + "contributors": [ + "christopherccg", + "Sheppy", + "Eloy" + ] + }, + "Guía_para_la_migración_a_catálogo": { + "modified": "2019-01-16T15:34:19.890Z", + "contributors": [ + "HenryGR", + "Mgjbot" + ] + }, + "HTML/Elemento/datalist": { + "modified": "2019-01-16T19:13:20.868Z", + "contributors": [ + "Darkgyro", + "teoli" + ] + }, + "HTML/Elemento/form": { + "modified": "2019-01-16T21:24:44.882Z", + "contributors": [ + "eincioch" + ] + }, + "HTML/Elemento/section": { + "modified": "2019-03-23T23:08:59.333Z", + "contributors": [ + "Raulpascual2", + "carllewisc", + "GeorgeAviateur" + ] + }, + "HTML/HTML5": { + "modified": "2020-05-16T09:08:08.720Z", + "contributors": [ + "jonasdamher", + "SphinxKnight", + "anibalymariacantantes60", + "AzulMartin", + "264531666", + "fracp", + "damianed", + "alfredotemiquel", + "rossettistone", + "carlossuarez", + "teoli", + "JosueMolina", + "Pablo_Ivan", + "welm", + "bicentenario", + "jesusruiz", + "pierre_alfonso", + "pitufo_cabron", + "cesar_ortiz_elPatox", + "inma_610", + "vigia122", + "StripTM", + "deimidis", + "Izel" + ] + }, + "HTML/HTML5/Forms_in_HTML5": { + "modified": "2019-03-24T00:17:58.788Z", + "contributors": [ + "DGarCam", + "teoli", + "prieto.any", + "deibyod", + "Ces", + "hugohabel", + "deimidis" + ] + }, + "HTML/HTML5/Formularios_en_HTML5": { + "modified": "2019-03-24T00:07:51.068Z", + "contributors": [ + "inma_610", + "Izel", + "StripTM", + "deimidis" + ] + }, + "HTML/HTML5/HTML5_Parser": { + "modified": "2019-03-24T00:07:09.448Z", + "contributors": [ + "teoli", + "RickieesES", + "inma_610", + "StripTM", + "juanb", + "Izel" + ] + }, + "HTML/HTML5/HTML5_lista_elementos": { + "modified": "2020-01-21T22:36:54.135Z", + "contributors": [ + "losfroger", + "cocoletzimata", + "Duque61", + "raecillacastellana", + "maymaury", + "squidjam", + "on3_g" + ] + }, + "HTML/HTML5/Introducción_a_HTML5": { + "modified": "2019-03-24T00:05:36.058Z", + "contributors": [ + "teoli", + "inma_610" + ] + }, + "HTML/HTML5/Validacion_de_restricciones": { + "modified": "2020-08-11T08:06:04.309Z", + "contributors": [ + "gerardo750711", + "israel-munoz" + ] + }, + "Herramientas": { + "modified": "2019-01-16T13:52:37.109Z", + "contributors": [ + "teoli", + "StripTM", + "inma_610", + "camilourd" + ] + }, + "How_to_create_a_DOM_tree": { + "modified": "2019-03-23T23:22:26.711Z", + "contributors": [ + "carrillog.luis" + ] + }, + "Incrustando_Mozilla/Comunidad": { + "modified": "2019-03-23T22:39:14.279Z", + "contributors": [ + "vamm1981" + ] + }, + "IndexedDB": { + "modified": "2019-03-18T21:11:08.379Z", + "contributors": [ + "duduindo", + "teoli", + "semptrion", + "CHORVAT", + "inma_610" + ] + }, + "Instalación_de_motores_de_búsqueda_desde_páginas_web": { + "modified": "2019-01-16T16:13:53.798Z", + "contributors": [ + "teoli", + "Nukeador", + "Jorolo" + ] + }, + "Learn": { + "modified": "2020-10-06T09:14:51.258Z", + "contributors": [ + "blanchart", + "Nachec", + "Maose", + "methodx", + "npcsayfail", + "GilbertoHernan", + "ivanagui2", + "svarlamov", + "clarii", + "hamfree", + "raul782", + "astrapotro", + "karlalhdz", + "sillo01", + "carlosmartinezfyd", + "carlo.romero1991", + "nelruk", + "merol-dad", + "Pablo_Ivan", + "Da_igual", + "jhapik", + "cgsramirez", + "PedroFumero", + "Yanlu", + "Jenny-T-Type", + "Jeremie" + ] + }, + "Learn/Accessibility": { + "modified": "2020-07-16T22:39:56.491Z", + "contributors": [ + "adiccb", + "WilsonIsAliveClone", + "mikelmg" + ] + }, + "Learn/Accessibility/Accessibility_troubleshooting": { + "modified": "2020-09-27T07:55:30.040Z", + "contributors": [ + "UOCccorcoles", + "adiccb" + ] + }, + "Learn/Accessibility/CSS_and_JavaScript": { + "modified": "2020-09-25T04:23:21.491Z", + "contributors": [ + "UOCccorcoles" + ] + }, + "Learn/Accessibility/HTML": { + "modified": "2020-09-24T10:25:02.383Z", + "contributors": [ + "UOCccorcoles", + "diegocastillogz", + "jeronimonunez", + "WilsonIsAliveClone" + ] + }, + "Learn/Accessibility/Mobile": { + "modified": "2020-07-16T22:40:29.507Z", + "contributors": [ + "Adorta4", + "mikelmg" + ] + }, + "Learn/Accessibility/Qué_es_la_accesibilidad": { + "modified": "2020-07-16T22:40:03.734Z", + "contributors": [ + "editorUOC" + ] + }, + "Learn/Aprender_y_obtener_ayuda": { + "modified": "2020-09-02T21:15:54.167Z", + "contributors": [ + "Nachec" + ] + }, + "Learn/CSS": { + "modified": "2020-07-16T22:25:33.047Z", + "contributors": [ + "welm", + "javierpolit", + "TomatoSenpai", + "andrpueb", + "Aglezabad", + "RaulHernandez" + ] + }, + "Learn/CSS/Building_blocks": { + "modified": "2020-10-02T00:43:44.395Z", + "contributors": [ + "johanfvn", + "capitanzealot", + "Enesimus", + "SphinxKnight", + "inwm", + "edixonMoreno", + "rayrojas", + "chrisdavidmills" + ] + }, + "Learn/CSS/Building_blocks/Cascada_y_herencia": { + "modified": "2020-09-10T08:32:11.848Z", + "contributors": [ + "renatico", + "UOCccorcoles", + "Enesimus", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Contenido_desbordado": { + "modified": "2020-09-07T07:36:40.422Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Depurar_el_CSS": { + "modified": "2020-10-15T22:26:23.448Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS": { + "modified": "2020-07-16T22:29:20.704Z", + "contributors": [ + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/El_modelo_de_caja": { + "modified": "2020-09-06T15:07:38.107Z", + "contributors": [ + "UOCccorcoles", + "capitanzealot", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Fondos_y_bordes": { + "modified": "2020-09-06T17:26:53.330Z", + "contributors": [ + "UOCccorcoles", + "psotresc", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario": { + "modified": "2020-07-16T22:29:24.707Z", + "contributors": [ + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto": { + "modified": "2020-07-31T14:48:40.359Z", + "contributors": [ + "AndrewSKV", + "Enesimus" + ] + }, + "Learn/CSS/Building_blocks/Selectores_CSS": { + "modified": "2020-09-06T12:41:53.412Z", + "contributors": [ + "UOCccorcoles", + "VichoReyes", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Selectores_CSS/Combinadores": { + "modified": "2020-09-06T14:09:26.839Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos": { + "modified": "2020-09-06T13:58:30.411Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos": { + "modified": "2020-09-06T13:34:27.599Z", + "contributors": [ + "UOCccorcoles", + "psotresc", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID": { + "modified": "2020-09-06T13:13:47.580Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/Building_blocks/Styling_tables": { + "modified": "2020-09-14T09:45:44.143Z", + "contributors": [ + "UOCccorcoles", + "editorUOC", + "chrisdavidmills", + "otheym", + "wbamberg", + "IXTRUnai" + ] + }, + "Learn/CSS/Building_blocks/Valores_y_unidades_CSS": { + "modified": "2020-09-07T09:35:00.652Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/CSS_layout": { + "modified": "2020-07-31T15:01:33.453Z", + "contributors": [ + "AndrewSKV", + "untilbit", + "pantuflo", + "chrisdavidmills" + ] + }, + "Learn/CSS/CSS_layout/Diseño_receptivo": { + "modified": "2020-07-16T22:27:27.257Z", + "contributors": [ + "editorUOC" + ] + }, + "Learn/CSS/CSS_layout/Flexbox": { + "modified": "2020-09-15T16:36:01.723Z", + "contributors": [ + "UOCccorcoles", + "nachopo", + "chrisdavidmills", + "editorUOC", + "facundogqr", + "felixgomez", + "LuisL", + "amaiafilo", + "spachecojimenez" + ] + }, + "Learn/CSS/CSS_layout/Floats": { + "modified": "2020-10-16T12:52:48.804Z", + "contributors": [ + "zuruckzugehen", + "chrisdavidmills" + ] + }, + "Learn/CSS/CSS_layout/Flujo_normal": { + "modified": "2020-07-16T22:27:20.728Z", + "contributors": [ + "editorUOC" + ] + }, + "Learn/CSS/CSS_layout/Grids": { + "modified": "2020-07-16T22:26:58.625Z", + "contributors": [ + "editorUOC", + "chrisdavidmills", + "Luis_Calvo" + ] + }, + "Learn/CSS/CSS_layout/Introducción": { + "modified": "2020-09-15T13:39:37.384Z", + "contributors": [ + "UOCccorcoles", + "AndrewSKV", + "editorUOC", + "Jhonaz" + ] + }, + "Learn/CSS/CSS_layout/Positioning": { + "modified": "2020-07-16T22:26:42.380Z", + "contributors": [ + "fr3dth" + ] + }, + "Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos": { + "modified": "2020-07-16T22:27:17.501Z", + "contributors": [ + "editorUOC" + ] + }, + "Learn/CSS/First_steps": { + "modified": "2020-07-16T22:27:38.921Z", + "contributors": [ + "GiuMagnani", + "Enesimus", + "cinthylli", + "BiP00", + "jesquintero" + ] + }, + "Learn/CSS/First_steps/Comenzando_CSS": { + "modified": "2020-08-31T14:16:45.193Z", + "contributors": [ + "UOCccorcoles", + "AndrewSKV", + "tito-ramirez", + "editorUOC" + ] + }, + "Learn/CSS/First_steps/Como_funciona_CSS": { + "modified": "2020-09-18T07:47:46.630Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/First_steps/Como_se_estructura_CSS": { + "modified": "2020-08-31T16:55:37.346Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/First_steps/Qué_es_CSS": { + "modified": "2020-10-15T22:25:30.119Z", + "contributors": [ + "UOCccorcoles", + "Enesimus", + "editorUOC" + ] + }, + "Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento": { + "modified": "2020-08-23T19:45:30.596Z", + "contributors": [ + "capitanzealot", + "AndrewSKV", + "Enesimus" + ] + }, + "Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension": { + "modified": "2020-07-16T22:28:11.693Z", + "contributors": [ + "Creasick", + "Enesimus", + "javierpolit", + "DennisM" + ] + }, + "Learn/CSS/Styling_text": { + "modified": "2020-07-16T22:25:57.799Z", + "contributors": [ + "laatcode", + "wilton-cruz" + ] + }, + "Learn/CSS/Styling_text/Fuentes_web": { + "modified": "2020-09-01T07:26:18.054Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/CSS/Styling_text/Fundamentals": { + "modified": "2020-09-18T08:01:18.738Z", + "contributors": [ + "UOCccorcoles", + "editorUOC", + "laatcode", + "joseanpg" + ] + }, + "Learn/CSS/Styling_text/Styling_links": { + "modified": "2020-09-18T08:20:17.759Z", + "contributors": [ + "UOCccorcoles", + "editorUOC", + "Tull666" + ] + }, + "Learn/CSS/Styling_text/Styling_lists": { + "modified": "2020-09-01T06:14:44.024Z", + "contributors": [ + "UOCccorcoles", + "editorUOC", + "MARKO75", + "Tull666", + "laatcode", + "jmcavanzo" + ] + }, + "Learn/CSS/Sábercomo": { + "modified": "2020-07-16T22:25:42.139Z", + "contributors": [ + "alebarbaja", + "abestrad1" + ] + }, + "Learn/CSS/Sábercomo/Generated_content": { + "modified": "2020-07-16T22:25:47.515Z", + "contributors": [ + "chrisdavidmills", + "Juansereina", + "lavilofam1" + ] + }, + "Learn/Common_questions": { + "modified": "2020-07-16T22:35:23.102Z", + "contributors": [ + "eduardo-estrada", + "balderasric", + "soedrego", + "astrapotro", + "Miguelank", + "chrisdavidmills" + ] + }, + "Learn/Common_questions/Cuanto_cuesta": { + "modified": "2020-07-16T22:35:45.385Z", + "contributors": [ + "Beatriz_Ortega_Valdes" + ] + }, + "Learn/Common_questions/How_does_the_Internet_work": { + "modified": "2020-09-07T00:56:10.834Z", + "contributors": [ + "IsraFloores", + "Pau_Vera_S", + "Yel-Martinez-Consultor-Seo", + "Creasick", + "Tan_", + "punkyh", + "krthr", + "DaniNz" + ] + }, + "Learn/Common_questions/Pages_sites_servers_and_search_engines": { + "modified": "2020-07-16T22:35:39.645Z", + "contributors": [ + "benelliraul", + "MarcosN", + "DaniNz" + ] + }, + "Learn/Common_questions/Que_es_un_servidor_WEB": { + "modified": "2020-10-27T18:34:43.608Z", + "contributors": [ + "noksenberg", + "Yel-Martinez-Consultor-Seo", + "Spectrum369", + "Luisk955", + "Sebaspaco", + "flaki53", + "welm" + ] + }, + "Learn/Common_questions/Que_software_necesito": { + "modified": "2020-07-16T22:35:32.855Z", + "contributors": [ + "Beatriz_Ortega_Valdes" + ] + }, + "Learn/Common_questions/Qué_es_una_URL": { + "modified": "2020-07-16T22:35:29.126Z", + "contributors": [ + "ezzep66", + "BubuAnabelas" + ] + }, + "Learn/Common_questions/Thinking_before_coding": { + "modified": "2020-07-16T22:35:34.085Z", + "contributors": [ + "Beatriz_Ortega_Valdes", + "LourFabiM", + "DaniNz" + ] + }, + "Learn/Common_questions/What_are_browser_developer_tools": { + "modified": "2020-09-13T07:49:07.373Z", + "contributors": [ + "rockoldo", + "IsraFloores", + "Nachec", + "John19D", + "DaniNz" + ] + }, + "Learn/Common_questions/What_are_hyperlinks": { + "modified": "2020-07-16T22:35:42.995Z", + "contributors": [ + "ezzep66" + ] + }, + "Learn/Common_questions/What_is_a_domain_name": { + "modified": "2020-07-16T22:35:43.888Z", + "contributors": [ + "Beatriz_Ortega_Valdes", + "hmendezm90" + ] + }, + "Learn/Common_questions/diseños_web_comunes": { + "modified": "2020-07-16T22:35:42.298Z", + "contributors": [ + "Beatriz_Ortega_Valdes" + ] + }, + "Learn/Common_questions/set_up_a_local_testing_server": { + "modified": "2020-07-16T22:35:52.759Z", + "contributors": [ + "rjpu24", + "iseafa", + "DaniNz" + ] + }, + "Learn/Como_Contribuir": { + "modified": "2020-07-16T22:33:43.206Z", + "contributors": [ + "SphinxKnight", + "Code118", + "dervys19", + "javierdelpino", + "axgeon", + "Leonardo_Valdez", + "cgsramirez" + ] + }, + "Learn/Desarrollo_web_Front-end": { + "modified": "2020-11-18T03:33:37.370Z", + "contributors": [ + "SphinxKnight", + "marquezpedro151", + "andresf.duran", + "Nachec" + ] + }, + "Learn/Getting_started_with_the_web": { + "modified": "2020-09-22T16:37:42.904Z", + "contributors": [ + "Nachec", + "IsraFloores", + "Enesimus", + "rodririobo", + "escalant3", + "jimmypazos", + "ingridc", + "hamfree", + "npcsayfail", + "BrodaNoel", + "israel-munoz", + "Da_igual", + "welm", + "Diio", + "darbalma", + "chrisdavidmills" + ] + }, + "Learn/Getting_started_with_the_web/CSS_basics": { + "modified": "2020-11-10T20:04:05.272Z", + "contributors": [ + "rockoldo", + "Maose", + "JaviGonLope", + "hamfree", + "juanluis", + "montygabe", + "mamptecnocrata", + "juanqui", + "welm" + ] + }, + "Learn/Getting_started_with_the_web/Cómo_funciona_la_Web": { + "modified": "2020-07-16T22:33:59.672Z", + "contributors": [ + "Enesimus", + "Maose", + "rulo_diaz", + "SphinxKnight" + ] + }, + "Learn/Getting_started_with_the_web/HTML_basics": { + "modified": "2020-11-08T05:08:38.542Z", + "contributors": [ + "SphinxKnight", + "cesarmolina.sdb", + "egonzalez", + "Maose", + "Axes", + "NataliaCba", + "Armando-Cruz", + "hamfree", + "BrodaNoel", + "PhantomDemon", + "DaniNz", + "SandraMoreH", + "HeberRojo", + "welm", + "JoaquinBedoian", + "Huarseral" + ] + }, + "Learn/Getting_started_with_the_web/Instalacion_de_software_basico": { + "modified": "2020-11-10T01:28:22.294Z", + "contributors": [ + "rockoldo", + "Nachec", + "Maose", + "Anyito", + "ingridc", + "Enesimus", + "israel-munoz", + "Neto2412", + "AngelFQC", + "mads0306", + "Da_igual", + "Chrixos", + "darbalma" + ] + }, + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-08-17T06:23:11.691Z", + "contributors": [ + "Nachec", + "Enesimus", + "Maose", + "John19D", + "yavemu", + "pablopennisi", + "Sergio_Gonzalez_Collado", + "hamfree", + "Bluterg", + "jpmontoya182", + "sillo01", + "lfrasae", + "bartolocarrasco", + "nhuamani", + "ricardormeza", + "fcojgodoy", + "soulminato", + "chech", + "juanqui", + "RaulHernandez", + "joelomar", + "welm", + "derplak", + "sin_nombre365", + "germanfr", + "cgsramirez", + "nekludov" + ] + }, + "Learn/Getting_started_with_the_web/La_web_y_los_estandares_web": { + "modified": "2020-09-03T04:02:22.375Z", + "contributors": [ + "Nachec" + ] + }, + "Learn/Getting_started_with_the_web/Manejando_los_archivos": { + "modified": "2020-09-23T03:12:43.364Z", + "contributors": [ + "Nachec", + "chrisdavidmills", + "NavetsArev", + "Maose", + "airmind97", + "hamfree", + "israel-munoz", + "GuilleMiranda", + "merol-dad", + "samshara1", + "mads0306", + "mamptecnocrata", + "Huarseral", + "diazwatson" + ] + }, + "Learn/Getting_started_with_the_web/Publishing_your_website": { + "modified": "2020-11-11T14:35:28.910Z", + "contributors": [ + "Yuunichi", + "Maose", + "IrwinAcosta", + "rjpu24", + "ingridc", + "binariosistemas", + "emermao", + "Michelangeur", + "javierdelpino", + "krthr", + "DaniNz", + "Rivo23", + "alexguerrero", + "MaurooRen", + "Da_igual", + "welm", + "Yadira" + ] + }, + "Learn/Getting_started_with_the_web/What_will_your_website_look_like": { + "modified": "2020-09-22T18:59:15.940Z", + "contributors": [ + "Nachec", + "Maose", + "jimmy_ml", + "NataliaCba", + "vact", + "israel-munoz", + "DaniNz", + "7eacemaker", + "mads0306", + "Da_igual", + "Davixe", + "Chrixos", + "diazwatson", + "omar.fiscal" + ] + }, + "Learn/HTML": { + "modified": "2020-09-09T07:22:36.336Z", + "contributors": [ + "Nachec", + "Enesimus", + "mppfiles", + "titox", + "patoezequiel", + "mitodamabra", + "crispragmatico", + "chancherokerido", + "Athene2RM", + "Alejandra.B", + "welm", + "jpazos" + ] + }, + "Learn/HTML/Forms": { + "modified": "2020-07-16T22:20:56.050Z", + "contributors": [ + "xyvs", + "mikiangel10", + "chrisdavidmills", + "eljonims", + "sjmiles" + ] + }, + "Learn/HTML/Forms/How_to_structure_an_HTML_form": { + "modified": "2020-09-18T11:13:13.645Z", + "contributors": [ + "UOCccorcoles", + "UOCjcanovasi", + "editorUOC", + "chrisdavidmills", + "eljonims" + ] + }, + "Learn/HTML/Forms/Property_compatibility_table_for_form_controls": { + "modified": "2020-08-30T01:12:52.090Z", + "contributors": [ + "edchasw" + ] + }, + "Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles": { + "modified": "2020-07-16T22:22:12.140Z", + "contributors": [ + "Enesimus" + ] + }, + "Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5": { + "modified": "2020-07-16T22:22:11.445Z", + "contributors": [ + "Enesimus" + ] + }, + "Learn/HTML/Forms/Sending_and_retrieving_form_data": { + "modified": "2020-07-16T22:21:26.056Z", + "contributors": [ + "Rafasu", + "rocioDEV", + "MrGreen", + "OseChez", + "DaniNz", + "peternerd", + "SphinxKnight", + "chrisdavidmills", + "Ricky_Lomax" + ] + }, + "Learn/HTML/Forms/Styling_HTML_forms": { + "modified": "2020-07-16T22:21:30.546Z", + "contributors": [ + "OMEGAYALFA", + "chrisdavidmills", + "cizquierdof" + ] + }, + "Learn/HTML/Forms/The_native_form_widgets": { + "modified": "2020-09-15T08:02:23.197Z", + "contributors": [ + "UOCccorcoles", + "editorUOC", + "rayrojas" + ] + }, + "Learn/HTML/Forms/Tipos_input_HTML5": { + "modified": "2020-10-30T10:06:35.877Z", + "contributors": [ + "alejandro0619", + "panpy-web" + ] + }, + "Learn/HTML/Forms/Validacion_formulario_datos": { + "modified": "2020-11-19T13:12:47.854Z", + "contributors": [ + "tcebrian", + "UOCccorcoles", + "UOCjcanovasi", + "editorUOC", + "blanchart", + "israel-munoz" + ] + }, + "Learn/HTML/Forms/Your_first_HTML_form": { + "modified": "2020-09-15T05:57:07.460Z", + "contributors": [ + "UOCccorcoles", + "editorUOC", + "BraisOliveira", + "OMEGAYALFA", + "OrlandoDeJesusCuxinYama", + "Giikah", + "chrisdavidmills", + "HGARZON" + ] + }, + "Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados": { + "modified": "2020-07-16T22:21:55.231Z", + "contributors": [ + "laatcode" + ] + }, + "Learn/HTML/Introduccion_a_HTML": { + "modified": "2020-09-03T05:18:15.831Z", + "contributors": [ + "Nachec", + "Enesimus", + "ivanagui2", + "Sergio_Gonzalez_Collado", + "cizquierdof", + "AngelFQC" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting": { + "modified": "2020-09-05T21:21:55.228Z", + "contributors": [ + "Nachec", + "UOCccorcoles", + "Enesimus", + "jmalsar", + "editorUOC", + "RG52", + "luchiano199", + "AlieYin" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks": { + "modified": "2020-09-05T04:27:29.218Z", + "contributors": [ + "Nachec", + "UOCccorcoles", + "juan.grred", + "Enesimus", + "jmalsar", + "blanchart", + "editorUOC", + "Myuel", + "MichaelMejiaMora", + "ferlopezcarr", + "javierpolit" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Debugging_HTML": { + "modified": "2020-08-31T12:17:08.843Z", + "contributors": [ + "UOCccorcoles", + "editorUOC", + "javierpolit" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido": { + "modified": "2020-07-16T22:24:18.388Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter": { + "modified": "2020-07-16T22:23:11.881Z", + "contributors": [ + "jmalsar", + "luchiano199", + "javierpolit" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Metados_en": { + "modified": "2020-11-07T18:07:55.376Z", + "contributors": [ + "nilo15", + "Nachec", + "UOCccorcoles", + "ccorcoles", + "editorUOC", + "hector080", + "clarii", + "Myuel", + "dmipaguirre", + "Armando-Cruz", + "MichaelMejiaMora", + "soedrego", + "absaucedo", + "venomdj2011", + "CarlosJose" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces": { + "modified": "2020-07-16T22:24:22.922Z", + "contributors": [ + "Enesimus" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML": { + "modified": "2020-07-16T22:24:21.949Z", + "contributors": [ + "Enesimus" + ] + }, + "Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text": { + "modified": "2020-09-05T23:06:12.474Z", + "contributors": [ + "walter.boba79" + ] + }, + "Learn/HTML/Introduccion_a_HTML/estructura": { + "modified": "2020-09-06T16:55:31.460Z", + "contributors": [ + "Nachec", + "UOCccorcoles", + "editorUOC", + "chaerf", + "AlidaContreras", + "javierpolit", + "SoftwareRVG", + "welm" + ] + }, + "Learn/HTML/Introduccion_a_HTML/iniciar": { + "modified": "2020-11-24T21:57:47.560Z", + "contributors": [ + "nilo15", + "Nachec", + "UOCccorcoles", + "maodecolombia", + "Enesimus", + "editorUOC", + "narvmtz", + "dmipaguirre", + "BubuAnabelas", + "marlabarbz", + "erllanosr", + "r2fv", + "jonasmreza", + "Cjpertuz", + "yan-vega", + "Armando-Cruz", + "felixgomez", + "olvap", + "emermao", + "soedrego", + "Abihu", + "mitocondriaco", + "nahuelsotelo", + "dayamll", + "JimP99", + "EdwinTorres", + "salvarez1988", + "cizquierdof", + "juanluis", + "welm" + ] + }, + "Learn/HTML/Introduccion_a_HTML/texto": { + "modified": "2020-09-04T15:00:09.675Z", + "contributors": [ + "Nachec", + "UOCccorcoles", + "Enesimus", + "Maose", + "ccorcoles", + "editorUOC", + "hector080", + "JulianMahecha", + "BubuAnabelas", + "RafaelVentura", + "jadiosc", + "dcarmal-dayvo", + "Owildfox", + "Myuel", + "dmipaguirre", + "Dany07", + "welm" + ] + }, + "Learn/HTML/Multimedia_and_embedding": { + "modified": "2020-08-08T01:15:36.731Z", + "contributors": [ + "Nachec", + "Loba25", + "emibena75", + "tomandech", + "rayrojas", + "SphinxKnight", + "rickygutim", + "luchiano199", + "jonasmreza", + "vHarz", + "hell0h0la", + "J0rgeMG", + "yarochewsky" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web": { + "modified": "2020-08-13T15:11:41.992Z", + "contributors": [ + "JuanMejia" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Images_in_HTML": { + "modified": "2020-09-01T08:06:52.329Z", + "contributors": [ + "UOCccorcoles", + "jmalsar", + "editorUOC", + "ccorcoles", + "acvidelaa", + "BubuAnabelas", + "Alpha3-Developer", + "Makinita", + "Parziva_1", + "luchiano199", + "calvearc", + "soedrego", + "JuniorBO", + "JoseCuestas" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page": { + "modified": "2020-07-16T22:25:06.606Z", + "contributors": [ + "Loba25", + "henardemiguel" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies": { + "modified": "2020-07-16T22:25:00.943Z", + "contributors": [ + "Ismael_Diaz", + "cinthylli", + "duduindo", + "soedrego", + "luchiano199", + "SphinxKnight", + "dylanroman03" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Responsive_images": { + "modified": "2020-11-02T15:27:00.386Z", + "contributors": [ + "Daniel_Martin", + "LuisCA", + "baumannzone", + "JuanMejia", + "lucasan", + "pipe01", + "sebaLinares", + "kuntur-studio", + "iiegor", + "malonson", + "javierarcheni", + "alexuy51", + "SigridMonsalve", + "arnoldobr", + "anfuca" + ] + }, + "Learn/HTML/Multimedia_and_embedding/Video_and_audio_content": { + "modified": "2020-12-07T13:00:58.885Z", + "contributors": [ + "occu29", + "Leiner.lop", + "pabdani", + "Enesimus", + "soedrego", + "jesusgirao", + "acvidelaa", + "rayrojas" + ] + }, + "Learn/HTML/Tablas": { + "modified": "2020-07-16T22:25:11.000Z", + "contributors": [ + "Drathveloper", + "IXTRUnai" + ] + }, + "Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML": { + "modified": "2020-09-09T11:52:38.720Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad": { + "modified": "2020-09-14T06:33:13.790Z", + "contributors": [ + "UOCccorcoles", + "editorUOC" + ] + }, + "Learn/HTML/Tablas/Structuring_planet_data": { + "modified": "2020-07-16T22:25:29.339Z", + "contributors": [ + "IXTRUnai" + ] + }, + "Learn/HTML/como": { + "modified": "2020-07-16T22:22:28.075Z", + "contributors": [ + "Loba25", + "blanchart", + "welm" + ] + }, + "Learn/HTML/como/Usando_atributos_de_datos": { + "modified": "2020-10-29T15:52:03.444Z", + "contributors": [ + "angeljpa95", + "camsa", + "laatcode" + ] + }, + "Learn/Herramientas_y_pruebas": { + "modified": "2020-07-16T22:38:54.378Z", + "contributors": [ + "WilsonIsAliveClone", + "carlosgocereceda", + "mikelmg" + ] + }, + "Learn/Herramientas_y_pruebas/Cross_browser_testing": { + "modified": "2020-07-16T22:38:59.665Z", + "contributors": [ + "arnoldobr" + ] + }, + "Learn/Herramientas_y_pruebas/GitHub": { + "modified": "2020-10-01T17:01:32.394Z", + "contributors": [ + "IsraFloores", + "Nachec" + ] + }, + "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks": { + "modified": "2020-08-22T19:34:32.519Z", + "contributors": [ + "spaceinvadev", + "jhonarielgj" + ] + }, + "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started": { + "modified": "2020-08-22T19:52:35.580Z", + "contributors": [ + "spaceinvadev" + ] + }, + "Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos": { + "modified": "2020-09-17T18:53:24.146Z", + "contributors": [ + "Faem0220" + ] + }, + "Learn/Herramientas_y_pruebas/Understanding_client-side_tools": { + "modified": "2020-07-28T15:51:57.413Z", + "contributors": [ + "b3m3bi" + ] + }, + "Learn/JavaScript": { + "modified": "2020-08-08T12:13:32.547Z", + "contributors": [ + "Nachec", + "chrisdavidmills", + "NavetsArev", + "ivanagui2", + "Makinita", + "hamfree", + "tonymedrano", + "0sc4rR4v3l0" + ] + }, + "Learn/JavaScript/Asynchronous": { + "modified": "2020-08-07T20:26:22.020Z", + "contributors": [ + "Nachec", + "PatoDeTuring", + "duduindo", + "madmaxdios" + ] + }, + "Learn/JavaScript/Asynchronous/Async_await": { + "modified": "2020-11-12T21:09:30.375Z", + "contributors": [ + "sargentogato", + "oscartzgz", + "SphinxKnight" + ] + }, + "Learn/JavaScript/Asynchronous/Concepts": { + "modified": "2020-11-19T20:30:13.091Z", + "contributors": [ + "AndresSalomon1990", + "marcusdesantis" + ] + }, + "Learn/JavaScript/Building_blocks": { + "modified": "2020-07-17T01:46:33.034Z", + "contributors": [ + "Enesimus", + "InmobAli", + "rodririobo", + "josecampo", + "ivanagui2", + "ldeth", + "Makinita", + "jhonattanbenitez", + "Sergio_Gonzalez_Collado", + "Michelangeur", + "Elicar", + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Building_blocks/Bucle_codigo": { + "modified": "2020-10-10T18:54:10.014Z", + "contributors": [ + "GianGuerra", + "Enesimus", + "josecampo", + "jesusvillalta", + "yohanolmedo", + "Zenchy", + "SebastianMaciel" + ] + }, + "Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion": { + "modified": "2020-07-16T22:31:28.751Z", + "contributors": [ + "InmobAli", + "serarroy", + "carlosgocereceda" + ] + }, + "Learn/JavaScript/Building_blocks/Eventos": { + "modified": "2020-07-16T22:31:37.027Z", + "contributors": [ + "jhonarielgj", + "sebastiananea", + "maximilianotulian", + "ismamz" + ] + }, + "Learn/JavaScript/Building_blocks/Functions": { + "modified": "2020-10-10T22:09:39.322Z", + "contributors": [ + "GianGuerra", + "pmusetti", + "pablorebora", + "blanchart", + "Alessa", + "DanielAgustinTradito" + ] + }, + "Learn/JavaScript/Building_blocks/Galeria_de_imagenes": { + "modified": "2020-07-16T22:31:42.753Z", + "contributors": [ + "amIsmael" + ] + }, + "Learn/JavaScript/Building_blocks/Return_values": { + "modified": "2020-07-17T01:43:24.262Z", + "contributors": [ + "Enesimus", + "EnekoOdoo" + ] + }, + "Learn/JavaScript/Building_blocks/conditionals": { + "modified": "2020-11-28T22:20:55.059Z", + "contributors": [ + "willian593", + "Enesimus", + "InmobAli", + "BorisQF", + "markosaav", + "Atabord", + "jhonattanbenitez" + ] + }, + "Learn/JavaScript/Client-side_web_APIs": { + "modified": "2020-07-16T22:32:38.714Z", + "contributors": [ + "rayrojas", + "FedeRacun", + "dvincent" + ] + }, + "Learn/JavaScript/Client-side_web_APIs/Client-side_storage": { + "modified": "2020-09-22T05:14:27.901Z", + "contributors": [ + "Nachec", + "Enesimus" + ] + }, + "Learn/JavaScript/Client-side_web_APIs/Fetching_data": { + "modified": "2020-07-16T22:32:57.121Z", + "contributors": [ + "Dsabillon" + ] + }, + "Learn/JavaScript/Client-side_web_APIs/Introducción": { + "modified": "2020-07-16T22:32:44.249Z", + "contributors": [ + "robertsallent", + "gonzaa96", + "Usuario001", + "kevtinoco", + "Anonymous", + "OrlandoDeJesusCuxinYama" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-09-22T14:49:32.194Z", + "contributors": [ + "Nachec", + "IsraFloores", + "mvuljevas", + "Mario-new", + "lalaggv2", + "rodrigocruz13", + "antonygiomarx", + "rickygutim", + "ivanagui2", + "EliasMCaja", + "Creasick", + "Aussith_9NT", + "sergioqa123", + "RayPL", + "ernestomr", + "eliud-c-delgado", + "chrisdavidmills" + ] + }, + "Learn/JavaScript/First_steps/A_first_splash": { + "modified": "2020-08-09T09:51:52.684Z", + "contributors": [ + "Nachec", + "zgreco2000", + "Enesimus", + "jacobo.delgado", + "xisco", + "Creasick", + "JaviMartain", + "Alfacoy", + "bosspetta", + "NataliaCba", + "arnaldop10", + "recortes", + "Darkiring", + "oscarkb24", + "roberbnd", + "joosemi02" + ] + }, + "Learn/JavaScript/First_steps/Arrays": { + "modified": "2020-07-16T22:30:53.191Z", + "contributors": [ + "InmobAli", + "amIsmael", + "Creasick", + "DaniNz" + ] + }, + "Learn/JavaScript/First_steps/Generador_de_historias_absurdas": { + "modified": "2020-11-28T18:15:56.503Z", + "contributors": [ + "willian593", + "Enesimus", + "fj1261", + "keskyle17", + "antqted" + ] + }, + "Learn/JavaScript/First_steps/Matemáticas": { + "modified": "2020-08-11T20:21:00.937Z", + "contributors": [ + "Nachec", + "Enesimus", + "keskyle17", + "Creasick", + "Aussith_9NT", + "JaviMartain", + "guibetancur", + "domingoacd", + "jjpc" + ] + }, + "Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings": { + "modified": "2020-08-11T12:16:57.685Z", + "contributors": [ + "Nachec" + ] + }, + "Learn/JavaScript/First_steps/Qué_es_JavaScript": { + "modified": "2020-08-08T22:05:17.982Z", + "contributors": [ + "Nachec", + "zgreco2000", + "jacobo.delgado", + "console", + "c9009", + "Creasick", + "bosspetta", + "alejoWeb", + "JorgeAML", + "eliud-c-delgado", + "roberbnd" + ] + }, + "Learn/JavaScript/First_steps/Strings": { + "modified": "2020-09-06T21:18:25.448Z", + "contributors": [ + "brayan-orellanos", + "Nachec", + "Enesimus", + "keskyle17", + "wajari", + "Ale87GG", + "Creasick", + "malonson", + "punkcuadecuc" + ] + }, + "Learn/JavaScript/First_steps/Test_your_skills:_Math": { + "modified": "2020-10-27T13:03:04.825Z", + "contributors": [ + "mediodepan", + "FabianBeltran96", + "syntaxter" + ] + }, + "Learn/JavaScript/First_steps/Test_your_skills:_variables": { + "modified": "2020-09-05T01:09:05.732Z", + "contributors": [ + "FabianBeltran96", + "Nachec" + ] + }, + "Learn/JavaScript/First_steps/Useful_string_methods": { + "modified": "2020-10-19T12:56:16.453Z", + "contributors": [ + "chrisdavidmills", + "yeyskalyn", + "Enesimus", + "Rtf747", + "InmobAli", + "keskyle17", + "enekate", + "Creasick", + "DaniNz" + ] + }, + "Learn/JavaScript/First_steps/Variables": { + "modified": "2020-08-22T08:01:38.443Z", + "contributors": [ + "Nachec", + "Enesimus", + "jacobo.delgado", + "pmusetti", + "keskyle17", + "amIsmael", + "enekate", + "xisco", + "Creasick", + "TheJarX", + "hchelbat", + "JaviMartain", + "Dhelarius" + ] + }, + "Learn/JavaScript/First_steps/What_went_wrong": { + "modified": "2020-08-10T05:39:33.652Z", + "contributors": [ + "Nachec", + "Enesimus", + "CarlesBou", + "enekate", + "amIsmael", + "xisco", + "mamjerez", + "Creasick", + "Alfacoy", + "NataliaCba", + "esencialinux" + ] + }, + "Learn/JavaScript/Howto": { + "modified": "2020-07-16T22:33:09.029Z", + "contributors": [ + "FelipeAndrade" + ] + }, + "Learn/JavaScript/Objects": { + "modified": "2020-11-12T18:14:51.703Z", + "contributors": [ + "alejandro.fca", + "pablojp", + "ivanagui2", + "clarii", + "Irwin1985", + "jsanpedror", + "blaipas", + "Tzikin100", + "edu1464", + "chrisdavidmills" + ] + }, + "Learn/JavaScript/Objects/Adding_bouncing_balls_features": { + "modified": "2020-07-16T22:32:34.341Z", + "contributors": [ + "Enesimus", + "serarroy", + "carlosgocereceda" + ] + }, + "Learn/JavaScript/Objects/Basics": { + "modified": "2020-08-08T03:12:26.699Z", + "contributors": [ + "Nachec", + "Fernando-Funes", + "pmusetti", + "ivanagui2", + "djdouta", + "seba2305", + "B1tF8er", + "kevin-loal98" + ] + }, + "Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos": { + "modified": "2020-07-16T22:32:30.877Z", + "contributors": [ + "r-vasquez", + "rayrojas", + "luchiano199", + "Sergio_Gonzalez_Collado", + "pomarbar" + ] + }, + "Learn/JavaScript/Objects/Inheritance": { + "modified": "2020-07-28T01:53:21.821Z", + "contributors": [ + "Fernando-Funes", + "darkarth80", + "ivanagui2", + "cvillafraz", + "Adrian-Cuellar", + "B1tF8er" + ] + }, + "Learn/JavaScript/Objects/JSON": { + "modified": "2020-07-16T22:32:24.819Z", + "contributors": [ + "jorgeCaster", + "pmiranda-geo", + "Enesimus" + ] + }, + "Learn/JavaScript/Objects/Object-oriented_JS": { + "modified": "2020-08-08T09:41:13.386Z", + "contributors": [ + "Nachec", + "andyesp", + "Fernando-Funes", + "jhonarielgj", + "rimbener", + "ReneAG", + "EnekoOdoo", + "ivanagui2", + "cristianmarquezp", + "djdouta", + "paulaco", + "martinGerez", + "anyruizd", + "Michelangeur" + ] + }, + "Learn/JavaScript/Objects/Object_prototypes": { + "modified": "2020-11-22T14:56:33.662Z", + "contributors": [ + "VictoriaRamirezCharles", + "TextC0de", + "Cesaraugp", + "Fernando-Funes", + "joooni1998", + "kevin_Luna", + "asamajamasa", + "ddavalos", + "JuanMaRuiz", + "ivanagui2", + "salpreh", + "djangoJosele" + ] + }, + "Learn/Performance": { + "modified": "2020-07-16T22:40:38.336Z", + "contributors": [ + "mikelmg" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:56.070Z", + "contributors": [ + "davidenriq11", + "javierdelpino", + "IXTRUnai" + ] + }, + "Learn/Server-side/Django": { + "modified": "2020-07-16T22:36:31.705Z", + "contributors": [ + "jlpb97", + "javierdelpino", + "oscvic", + "faustinoloeza" + ] + }, + "Learn/Server-side/Django/Admin_site": { + "modified": "2020-07-16T22:37:02.726Z", + "contributors": [ + "ricardo-soria", + "cristianaguilarvelozo", + "SgtSteiner", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/Authentication": { + "modified": "2020-07-29T13:34:31.552Z", + "contributors": [ + "rayrojas", + "quijot", + "gatopadre", + "zelkovar", + "cbayonao", + "DTaiD", + "Carlosmgs111", + "ricardo-soria", + "GankerDev", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/Deployment": { + "modified": "2020-09-29T05:31:27.175Z", + "contributors": [ + "chrisdavidmills", + "LIBIDORI", + "taponato", + "joanvasa", + "banideus", + "LUISCR", + "ricardo-soria", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/Forms": { + "modified": "2020-09-03T20:14:00.959Z", + "contributors": [ + "FoulMangoPY", + "joserojas1270", + "panpy-web", + "taponato", + "gatopadre", + "gt67ma", + "soberanes", + "ricardo-soria", + "boleklolek", + "SgtSteiner", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/Generic_views": { + "modified": "2020-07-16T22:37:14.516Z", + "contributors": [ + "ricardo-soria", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/Home_page": { + "modified": "2020-07-16T22:37:08.036Z", + "contributors": [ + "dr2d4", + "MatiasJAco", + "ricardo-soria", + "cristianaguilarvelozo", + "AnPlandolit", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/Introducción": { + "modified": "2020-07-16T22:36:38.315Z", + "contributors": [ + "dr2d4", + "jlpb97", + "oalberto96", + "javierdelpino", + "oscvic" + ] + }, + "Learn/Server-side/Django/Models": { + "modified": "2020-08-27T11:46:51.559Z", + "contributors": [ + "FoulMangoPY", + "dr2d4", + "Kalisto", + "cuantosoft", + "cruzito626", + "ricardo-soria", + "CristianFonseca03", + "cristianaguilarvelozo", + "iehurtado", + "SgtSteiner", + "javierdelpino", + "Panchosama", + "MatiMateo" + ] + }, + "Learn/Server-side/Django/Sessions": { + "modified": "2020-09-02T12:56:54.473Z", + "contributors": [ + "FoulMangoPY", + "franpandol", + "ricardo-soria", + "tonyrodrigues", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/Testing": { + "modified": "2020-11-25T15:32:01.505Z", + "contributors": [ + "JanoVZ", + "joserojas1270", + "rayrojas", + "julyaann", + "ferxohn", + "ricardo-soria", + "R4v3n15", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/Tutorial_local_library_website": { + "modified": "2020-07-16T22:36:48.653Z", + "contributors": [ + "dr2d4", + "jfpIE16", + "ricardo-soria", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/development_environment": { + "modified": "2020-07-16T22:36:43.747Z", + "contributors": [ + "sign4l", + "cruzito626", + "ricardo-soria", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/django_assessment_blog": { + "modified": "2020-07-16T22:37:48.773Z", + "contributors": [ + "ricardo-soria", + "matiexe", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/skeleton_website": { + "modified": "2020-07-16T22:36:52.017Z", + "contributors": [ + "dr2d4", + "cuantosoft", + "gozarrojas", + "ricardo-soria", + "javierdelpino" + ] + }, + "Learn/Server-side/Django/web_application_security": { + "modified": "2020-07-16T22:37:45.102Z", + "contributors": [ + "sebastianmr6", + "ricardo-soria", + "javierdelpino" + ] + }, + "Learn/Server-side/Express_Nodejs": { + "modified": "2020-07-16T22:37:51.529Z", + "contributors": [ + "GUEROZ", + "deit", + "rmon_vfer", + "sergiodiezdepedro", + "javierdelpino", + "sergionunez" + ] + }, + "Learn/Server-side/Express_Nodejs/Introduction": { + "modified": "2020-07-16T22:38:09.037Z", + "contributors": [ + "evaferreira", + "threevanny", + "hernanfloresramirez1987", + "jorgesqm95", + "GUEROZ", + "Slb-Sbsz", + "tec.josec", + "crisaragon", + "Sergio_Gonzalez_Collado", + "fedechiappero", + "RigobertoUlloa", + "javierdelpino", + "SphinxKnight" + ] + }, + "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website": { + "modified": "2020-07-16T22:38:15.482Z", + "contributors": [ + "acasco", + "antiepoke" + ] + }, + "Learn/Server-side/Express_Nodejs/development_environment": { + "modified": "2020-07-16T22:37:58.161Z", + "contributors": [ + "sandromedina", + "threevanny", + "pajaro5", + "GUEROZ", + "maringenio" + ] + }, + "Learn/Server-side/Express_Nodejs/mongoose": { + "modified": "2020-07-16T22:38:20.335Z", + "contributors": [ + "danimrprofe", + "rmon_vfer" + ] + }, + "Learn/Server-side/Express_Nodejs/skeleton_website": { + "modified": "2020-07-16T22:38:03.936Z", + "contributors": [ + "juancorbacho", + "tec.josec", + "maringenio", + "mimz2563" + ] + }, + "Learn/Server-side/Node_server_without_framework": { + "modified": "2020-07-16T22:36:05.239Z", + "contributors": [ + "javierdelpino" + ] + }, + "Learn/Server-side/Primeros_pasos": { + "modified": "2020-07-16T22:36:08.254Z", + "contributors": [ + "javierdelpino" + ] + }, + "Learn/Server-side/Primeros_pasos/Introducción": { + "modified": "2020-07-16T22:36:13.094Z", + "contributors": [ + "AnaHertaj", + "SphinxKnight", + "mortyBL", + "javierdelpino" + ] + }, + "Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor": { + "modified": "2020-07-16T22:36:18.740Z", + "contributors": [ + "Slb-Sbsz", + "javierdelpino" + ] + }, + "Learn/Server-side/Primeros_pasos/Web_frameworks": { + "modified": "2020-07-16T22:36:23.784Z", + "contributors": [ + "Slb-Sbsz", + "javierdelpino" + ] + }, + "Learn/Server-side/Primeros_pasos/seguridad_sitios_web": { + "modified": "2020-07-16T22:36:27.856Z", + "contributors": [ + "isaine", + "Slb-Sbsz", + "javierdelpino" + ] + }, + "Learn/Using_Github_pages": { + "modified": "2020-07-16T22:35:51.571Z", + "contributors": [ + "DaniNz", + "LuyisiMiger", + "TAXIS" + ] + }, + "Learn/codificacion-scripting": { + "modified": "2020-07-16T22:22:13.785Z", + "contributors": [ + "hamfree" + ] + }, + "Localización": { + "modified": "2019-01-16T13:31:36.167Z", + "contributors": [ + "DirkS", + "RickieesES", + "Mgjbot", + "Verruckt", + "Jorolo", + "Takenbot", + "Nukeador", + "Radigar" + ] + }, + "Localizar_con_Narro": { + "modified": "2019-03-24T00:12:25.538Z", + "contributors": [ + "jvmjunior", + "deimidis" + ] + }, + "MDN": { + "modified": "2020-07-08T14:43:57.058Z", + "contributors": [ + "Maose", + "jswisher", + "SphinxKnight", + "Riszin", + "Beatriz_Ortega_Valdes", + "facufacu3789", + "wbamberg", + "0zxo", + "Jeremie", + "raecillacastellana", + "DonPrime", + "GersonLazaro", + "Arudb79", + "MauricioGil", + "Sheppy" + ] + }, + "MDN/About": { + "modified": "2020-05-03T01:47:58.469Z", + "contributors": [ + "Beatriz_Ortega_Valdes", + "ecedenyo", + "wbamberg", + "jswisher", + "hecaxmmx", + "SoftwareRVG", + "Jeremie", + "carloslazaro", + "cosmesantos", + "wilo", + "LuisArt", + "sinfallas", + "maedca" + ] + }, + "MDN/Comunidad": { + "modified": "2020-04-24T19:14:03.228Z", + "contributors": [ + "inwm", + "SphinxKnight", + "wbamberg", + "jenyvera", + "0zxo", + "Jeremie", + "LeoHirsch", + "luisgm76" + ] + }, + "MDN/Contribute": { + "modified": "2019-03-22T01:52:35.495Z", + "contributors": [ + "Beatriz_Ortega_Valdes", + "wbamberg", + "Rrxxxx", + "Ibrahim1997", + "LeoHirsch", + "MauricioGil", + "Mars" + ] + }, + "MDN/Contribute/Community": { + "modified": "2020-09-03T13:14:53.733Z", + "contributors": [ + "FoulMangoPY", + "jswisher", + "wbamberg", + "welm", + "Sebastian.Nagles" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-12-02T14:04:57.487Z", + "contributors": [ + "SphinxKnight", + "abcserviki", + "chrisdavidmills", + "Rafasu", + "jswisher", + "yohanolmedo", + "alex16jpv", + "wbamberg", + "astrapotro", + "Jabi", + "Sergio_Gonzalez_Collado", + "karl_", + "MARVINFLORENTINO", + "aresth+", + "DracotMolver" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-12-02T19:26:24.923Z", + "contributors": [ + "chrisdavidmills", + "Anibalismo", + "MIKE1203", + "gcjuan", + "clarii", + "wbamberg", + "0zxo", + "dariomaim", + "grover.velasquez", + "Primo18", + "maubarbetti", + "Arukantara", + "jsx", + "fraph", + "teoli", + "aguilaindomable", + "LeoHirsch", + "cototion" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2019-01-16T18:56:52.965Z", + "contributors": [ + "wbamberg", + "0zxo", + "astrapotro", + "MauricioGil", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2019-01-16T19:10:19.469Z", + "contributors": [ + "wbamberg", + "javierdp", + "gpadilla", + "RoxPulido", + "LeoHirsch" + ] + }, + "MDN/Contribute/Howto/Crear_cuenta_MDN": { + "modified": "2020-08-21T18:14:17.930Z", + "contributors": [ + "Tomillo", + "JADE-2006", + "wbamberg", + "JuniorBO", + "Arudb79", + "LeoHirsch" + ] + }, + "MDN/Contribute/Howto/Document_a_CSS_property": { + "modified": "2020-02-19T19:43:18.253Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg", + "teoli", + "stephaniehobson", + "MauricioGil" + ] + }, + "MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad": { + "modified": "2019-03-18T21:31:21.033Z", + "contributors": [ + "wbamberg", + "B1tF8er" + ] + }, + "MDN/Contribute/Howto/Etiquetas_paginas_javascript": { + "modified": "2019-01-16T19:47:18.318Z", + "contributors": [ + "wbamberg", + "LeoHirsch" + ] + }, + "MDN/Contribute/Howto/Remover_Macros_Experimentales": { + "modified": "2020-07-05T17:06:56.383Z", + "contributors": [ + "Anibalismo" + ] + }, + "MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2020-07-05T16:17:53.925Z", + "contributors": [ + "Anibalismo", + "Maose", + "wbamberg", + "gerard.am", + "LeoHirsch" + ] + }, + "MDN/Contribute/Howto/Tag": { + "modified": "2019-03-23T23:15:01.953Z", + "contributors": [ + "wbamberg", + "Creasick", + "blanchart", + "meCarrion17", + "rafamagno", + "teoli", + "PepeAntonio", + "CristianMar25", + "anmartinez", + "LeoHirsch" + ] + }, + "MDN/Contribute/Howto/Usar_barras_laterales_de_navegación": { + "modified": "2019-05-08T17:34:30.854Z", + "contributors": [ + "ivanagui2" + ] + }, + "MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary": { + "modified": "2019-03-23T23:09:23.417Z", + "contributors": [ + "wbamberg", + "astrapotro", + "teoli", + "L_e_o" + ] + }, + "MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web": { + "modified": "2020-06-26T02:13:25.044Z", + "contributors": [ + "Enesimus", + "pablorebora", + "blanchart", + "BubuAnabelas", + "SphinxKnight", + "FranciscoImanolSuarez" + ] + }, + "MDN/Contribute/Howto/revision_editorial": { + "modified": "2019-03-18T20:54:27.132Z", + "contributors": [ + "LauraJaime8", + "wbamberg", + "ElNobDeTfm", + "Arudb79", + "LeoHirsch" + ] + }, + "MDN/Contribute/Howto/revision_tecnica": { + "modified": "2019-01-16T18:56:48.857Z", + "contributors": [ + "wbamberg", + "MarkelCuesta", + "rowasc", + "LeoHirsch" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T17:46:06.700Z", + "contributors": [ + "wbamberg", + "Jeremie", + "meiyu333", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/Iniciar_una_localizacion": { + "modified": "2019-03-23T22:20:12.721Z", + "contributors": [ + "wbamberg", + "SoftwareRVG" + ] + }, + "MDN/Contribute/Localize/Project:Localization_Projects": { + "modified": "2019-05-18T11:53:27.961Z", + "contributors": [ + "wbamberg", + "AlePerez92", + "karlalhdz", + "Jeremie", + "LeoHirsch", + "Sheppy", + "Antiparticule", + "jorge_diaz", + "LuisArt", + "maedca", + "desiderantes" + ] + }, + "MDN/Contribute/Localize/Project:Translating_MDN_pages": { + "modified": "2020-10-10T03:14:55.439Z", + "contributors": [ + "elpetiso", + "Beatriz_Ortega_Valdes", + "jimmypazos", + "wbamberg", + "juan-ferrer-toribio", + "AlePerez92", + "manatico4", + "wilton-cruz", + "seidelw", + "JuanMacias", + "sergio_p_d", + "Jeremie", + "JessDev", + "humbertaco", + "LeoHirsch", + "sintaxis", + "maedca" + ] + }, + "MDN/Contribute/Procesos": { + "modified": "2019-01-17T02:12:44.469Z", + "contributors": [ + "wbamberg", + "astrapotro" + ] + }, + "MDN/Contribute/Tareas": { + "modified": "2019-01-16T18:56:38.941Z", + "contributors": [ + "wbamberg", + "MauricioGil", + "LeoHirsch" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:28:55.816Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Jeremie", + "LeoHirsch" + ] + }, + "MDN/Guidelines/Content_blocks": { + "modified": "2020-09-30T15:28:56.171Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Jeremie", + "LeoHirsch" + ] + }, + "MDN/Guidelines/Convenciones_y_definiciones": { + "modified": "2020-09-30T15:28:56.412Z", + "contributors": [ + "chrisdavidmills", + "Nachec" + ] + }, + "MDN/Guidelines/Project:Guía_de_estilo": { + "modified": "2020-09-30T15:28:56.038Z", + "contributors": [ + "chrisdavidmills", + "blanchart", + "clarii", + "wbamberg", + "Jeremie", + "Salamandra101", + "Dgeek", + "fscholz", + "LeoHirsch", + "teoli", + "Pgulijczuk", + "DoctorRomi", + "Nukeador", + "Nanomo", + "Eqx", + "Jorolo" + ] + }, + "MDN/Kuma": { + "modified": "2019-09-09T15:52:33.535Z", + "contributors": [ + "SphinxKnight", + "clarii", + "wbamberg", + "Jeremie", + "Diio", + "atlas7jean" + ] + }, + "MDN/Kuma/Contributing": { + "modified": "2019-03-23T23:15:25.956Z", + "contributors": [ + "wbamberg", + "Jeremie", + "MauricioGil" + ] + }, + "MDN/Kuma/Contributing/Getting_started": { + "modified": "2019-01-16T19:06:06.895Z", + "contributors": [ + "wbamberg", + "Jeremie", + "MauricioGil" + ] + }, + "MDN/Structures": { + "modified": "2020-09-30T09:06:15.403Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "jswisher" + ] + }, + "MDN/Structures/Ejemplos_ejecutables": { + "modified": "2020-09-30T09:06:15.983Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "emanuelvega", + "LUISTGMDN", + "elihro" + ] + }, + "MDN/Structures/Macros": { + "modified": "2020-09-30T09:06:16.658Z", + "contributors": [ + "chrisdavidmills", + "Nachec", + "wbamberg" + ] + }, + "MDN/Structures/Macros/Commonly-used_macros": { + "modified": "2020-09-30T09:06:17.138Z", + "contributors": [ + "chrisdavidmills", + "Nachec" + ] + }, + "MDN/Structures/Macros/Otras": { + "modified": "2020-09-30T09:06:17.522Z", + "contributors": [ + "chrisdavidmills", + "Nachec" + ] + }, + "MDN/Structures/Tablas_de_compatibilidad": { + "modified": "2020-10-15T22:33:39.399Z", + "contributors": [ + "chrisdavidmills", + "Nachec" + ] + }, + "MDN/Tools": { + "modified": "2020-09-30T16:48:18.728Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Jeremie", + "Arudb79", + "atlas7jean" + ] + }, + "MDN/Tools/Introduction_to_KumaScript": { + "modified": "2020-09-30T16:48:19.117Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "velizluisma", + "Jeremie", + "LeoHirsch" + ] + }, + "MDN/Tools/Page_regeneration": { + "modified": "2020-09-30T16:48:19.365Z", + "contributors": [ + "chrisdavidmills", + "Anibalismo" + ] + }, + "MDN/Tools/Template_editing": { + "modified": "2020-09-30T16:48:19.234Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "juan-ferrer-toribio" + ] + }, + "MDN/User_guide": { + "modified": "2020-12-07T17:30:04.089Z", + "contributors": [ + "wbamberg", + "Sheppy" + ] + }, + "MDN_en_diez": { + "modified": "2019-03-23T22:49:57.954Z", + "contributors": [ + "pabloveintimilla", + "diego.mauricio.meneses.rios" + ] + }, + "Mejoras_DOM_en_Firefox_3": { + "modified": "2019-03-23T23:50:52.840Z", + "contributors": [ + "wbamberg", + "Mgjbot", + "RickieesES", + "Nukeador", + "HenryGR", + "Talisker" + ] + }, + "Mejoras_SVG_en_Firefox_3": { + "modified": "2019-03-23T23:50:55.206Z", + "contributors": [ + "wbamberg", + "Mgjbot", + "RickieesES", + "Nukeador", + "Talisker" + ] + }, + "Mejoras_XUL_en_Firefox_3": { + "modified": "2019-03-24T00:02:34.038Z", + "contributors": [ + "wbamberg", + "fscholz", + "Nukeador", + "Mgjbot", + "Nathymig", + "Dukebody" + ] + }, + "Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla": { + "modified": "2019-03-23T23:59:56.566Z", + "contributors": [ + "teoli", + "Siyivan", + "krusch", + "Mgjbot", + "Mrgonzalez", + "Superruzafa", + "Ttataje", + "Nukeador" + ] + }, + "Modo_casi_estándar_de_Gecko": { + "modified": "2019-03-23T23:43:50.956Z", + "contributors": [ + "teoli", + "Mgjbot", + "Jorolo" + ] + }, + "Mozilla": { + "modified": "2019-01-16T13:16:23.082Z", + "contributors": [ + "cosmesantos", + "andersonvc89", + "Vladi05", + "Granpichi", + "yesypsb", + "Getachi", + "Izel" + ] + }, + "Mozilla/Add-ons": { + "modified": "2019-03-18T21:08:47.524Z", + "contributors": [ + "hecaxmmx", + "hamfree", + "Aldrin508", + "Arudb79", + "Psy", + "RaulVisa", + "LeoHirsch", + "rojo32" + ] + }, + "Mozilla/Add-ons/WebExtensions": { + "modified": "2019-07-18T20:39:33.007Z", + "contributors": [ + "hecaxmmx", + "ivanruvalcaba", + "AngelFQC", + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/API": { + "modified": "2019-05-09T20:52:57.986Z", + "contributors": [ + "Micronine", + "BubuAnabelas", + "chicocoulomb", + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/i18n": { + "modified": "2020-10-15T21:39:41.302Z", + "contributors": [ + "wbamberg", + "fitojb", + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/storage": { + "modified": "2020-10-15T22:13:52.747Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "grxdipgra" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/storage/local": { + "modified": "2020-10-15T22:13:52.742Z", + "contributors": [ + "wbamberg", + "grxdipgra" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/storage/sync": { + "modified": "2020-10-15T22:13:52.602Z", + "contributors": [ + "wbamberg", + "grxdipgra" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/webNavigation": { + "modified": "2020-10-15T21:52:47.862Z", + "contributors": [ + "wbamberg", + "tanclony" + ] + }, + "Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar": { + "modified": "2019-03-18T21:05:11.701Z", + "contributors": [ + "roberbnd" + ] + }, + "Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension": { + "modified": "2019-03-18T21:08:05.873Z", + "contributors": [ + "hecaxmmx", + "rgo", + "jde-gr", + "doztrock", + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { + "modified": "2020-10-15T20:55:02.467Z", + "contributors": [ + "rossc90" + ] + }, + "Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities": { + "modified": "2019-03-23T22:45:10.191Z", + "contributors": [ + "Nitram_G", + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/Depuración": { + "modified": "2019-03-18T21:05:20.525Z", + "contributors": [ + "Pau" + ] + }, + "Mozilla/Add-ons/WebExtensions/Examples": { + "modified": "2019-03-18T21:06:01.388Z", + "contributors": [ + "hecaxmmx" + ] + }, + "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { + "modified": "2020-09-27T05:32:44.293Z", + "contributors": [ + "omaralonsog" + ] + }, + "Mozilla/Add-ons/WebExtensions/Implement_a_settings_page": { + "modified": "2019-03-18T21:06:46.901Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests": { + "modified": "2019-03-18T21:06:03.133Z", + "contributors": [ + "juanbrujo", + "regisdark", + "hecaxmmx" + ] + }, + "Mozilla/Add-ons/WebExtensions/Internationalization": { + "modified": "2020-06-29T22:25:32.104Z", + "contributors": [ + "hugojavierduran9" + ] + }, + "Mozilla/Add-ons/WebExtensions/Modify_a_web_page": { + "modified": "2019-03-18T21:02:55.354Z", + "contributors": [ + "alexgilsoncampi" + ] + }, + "Mozilla/Add-ons/WebExtensions/Packaging_and_installation": { + "modified": "2019-03-23T22:45:27.399Z", + "contributors": [ + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome": { + "modified": "2019-03-18T21:08:10.456Z", + "contributors": [ + "fitojb", + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/Prerequisitos": { + "modified": "2019-03-23T22:45:28.352Z", + "contributors": [ + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension": { + "modified": "2019-03-18T21:05:24.379Z", + "contributors": [ + "FacundoCerezo", + "IXTRUnai" + ] + }, + "Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions": { + "modified": "2020-11-23T00:59:33.889Z", + "contributors": [ + "kenliten", + "hecaxmmx", + "13539" + ] + }, + "Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension": { + "modified": "2020-11-23T01:34:20.681Z", + "contributors": [ + "kenliten", + "IgnacioMilia", + "mppfiles", + "adderou", + "hecaxmmx", + "Maller_Lagoon" + ] + }, + "Mozilla/Add-ons/WebExtensions/Tutorial": { + "modified": "2019-04-25T06:15:12.057Z", + "contributors": [ + "Klius", + "IgnacioMilia", + "chicocoulomb", + "hecaxmmx", + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/What_next_": { + "modified": "2019-03-18T20:43:00.251Z", + "contributors": [ + "chicocoulomb" + ] + }, + "Mozilla/Add-ons/WebExtensions/manifest.json": { + "modified": "2020-10-15T21:39:41.879Z", + "contributors": [ + "wachunei", + "legomolina", + "yuniers" + ] + }, + "Mozilla/Add-ons/WebExtensions/manifest.json/icons": { + "modified": "2020-10-15T22:27:24.193Z", + "contributors": [ + "qwerty726" + ] + }, + "Mozilla/Add-ons/WebExtensions/user_interface": { + "modified": "2019-03-18T21:03:49.876Z", + "contributors": [ + "rebloor" + ] + }, + "Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador": { + "modified": "2019-03-18T21:03:34.447Z", + "contributors": [ + "adderou" + ] + }, + "Mozilla/Add-ons/WebExtensions/user_interface/Page_actions": { + "modified": "2019-08-12T17:02:44.540Z", + "contributors": [ + "rayrojas" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-23T23:34:39.883Z", + "contributors": [ + "chrisdavidmills", + "Etruscco" + ] + }, + "Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla": { + "modified": "2019-03-23T23:58:56.616Z", + "contributors": [ + "chrisdavidmills", + "fscholz", + "teoli", + "DoctorRomi", + "Nukeador", + "Mgjbot", + "Blank zero" + ] + }, + "Mozilla/Developer_guide/Source_Code": { + "modified": "2020-03-01T17:19:51.307Z", + "contributors": [ + "IngrownMink4", + "Allamc11", + "chrisdavidmills", + "jntesteves" + ] + }, + "Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS)": { + "modified": "2019-03-23T23:46:33.805Z", + "contributors": [ + "chrisdavidmills", + "teoli", + "Nukeador", + "Mgjbot", + "Blank zero" + ] + }, + "Mozilla/Developer_guide/mozilla-central": { + "modified": "2019-03-18T21:11:07.718Z", + "contributors": [ + "duduindo", + "chrisdavidmills", + "fscholz", + "RickieesES" + ] + }, + "Mozilla/Firefox": { + "modified": "2020-01-18T13:20:40.065Z", + "contributors": [ + "leela52452", + "SphinxKnight", + "wbamberg", + "jonasmreza", + "avelper", + "regisdark", + "AlmondCupcake", + "hecaxmmx", + "SecurityResearcher", + "Pablo_Ivan", + "Alejandro_Blanco", + "gabpull", + "nekside" + ] + }, + "Mozilla/Firefox/Experimental_features": { + "modified": "2019-04-01T12:56:43.181Z", + "contributors": [ + "johnboy-99", + "wbamberg", + "Maletil" + ] + }, + "Mozilla/Firefox/Releases": { + "modified": "2019-03-23T23:27:32.191Z", + "contributors": [ + "wbamberg", + "thzunder", + "Sheppy" + ] + }, + "Mozilla/Firefox/Releases/30": { + "modified": "2019-03-23T23:06:34.308Z", + "contributors": [ + "wbamberg", + "mrbyte007" + ] + }, + "Mozilla/Firefox/Releases/50": { + "modified": "2019-03-18T21:11:07.358Z", + "contributors": [ + "duduindo", + "wbamberg", + "frank-orellana", + "raiosxdxd" + ] + }, + "Mozilla/Firefox/Releases/57": { + "modified": "2019-03-23T22:03:40.720Z", + "contributors": [ + "wbamberg", + "fitojb" + ] + }, + "Mozilla/Firefox/Releases/61": { + "modified": "2019-03-18T21:34:25.134Z", + "contributors": [ + "wbamberg", + "JoaLop" + ] + }, + "Mozilla/Firefox/Releases/62": { + "modified": "2019-03-18T21:26:40.295Z", + "contributors": [ + "laptou" + ] + }, + "Mozilla/Firefox/Releases/63": { + "modified": "2019-03-18T21:22:18.650Z", + "contributors": [ + "SphinxKnight", + "Dev-MADJ" + ] + }, + "Mozilla/Firefox/Releases/66": { + "modified": "2019-05-09T17:56:10.878Z", + "contributors": [ + "Smartloony" + ] + }, + "Mozilla/Firefox/Releases/67": { + "modified": "2019-06-27T23:25:44.498Z", + "contributors": [ + "erickton", + "marcorichetta" + ] + }, + "Mozilla/Firefox/Releases/68": { + "modified": "2019-07-14T03:15:02.367Z", + "contributors": [ + "Gummox" + ] + }, + "Mozilla/Firefox/Releases/9": { + "modified": "2019-12-13T20:33:17.732Z", + "contributors": [ + "wbamberg", + "fscholz" + ] + }, + "Mozilla/Firefox/Releases/9/Updating_add-ons": { + "modified": "2019-03-23T23:09:25.426Z", + "contributors": [ + "wbamberg", + "Rickatomato" + ] + }, + "Módulos_JavaScript": { + "modified": "2019-03-23T23:53:21.168Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Mgjbot", + "Ffranz", + "Mariano" + ] + }, + "Participar_en_el_proyecto_Mozilla": { + "modified": "2019-03-24T00:07:54.638Z", + "contributors": [ + "teoli", + "inma_610" + ] + }, + "Plantillas_en_Firefox_3": { + "modified": "2019-03-24T00:02:45.436Z", + "contributors": [ + "wbamberg", + "fscholz", + "Nukeador", + "Kaltya", + "Mgjbot" + ] + }, + "Preguntas_frecuentes_sobre_incrustación_en_Mozilla": { + "modified": "2019-01-16T15:02:38.544Z", + "contributors": [ + "Anonymous" + ] + }, + "Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación": { + "modified": "2019-01-16T16:13:02.334Z", + "contributors": [ + "Jorolo", + "Lastjuan" + ] + }, + "Principios_básicos_de_los_servicios_Web": { + "modified": "2019-01-16T16:13:03.069Z", + "contributors": [ + "Jorolo", + "Xoan", + "Breaking Pitt" + ] + }, + "Recursos_en_modo_desconectado_en_Firefox": { + "modified": "2019-03-18T21:11:07.042Z", + "contributors": [ + "duduindo", + "Mgjbot", + "Nukeador", + "Nathymig", + "HenryGR" + ] + }, + "Referencia_DOM_de_Gecko": { + "modified": "2019-01-16T16:01:11.054Z", + "contributors": [ + "DR", + "Nathymig" + ] + }, + "Referencia_DOM_de_Gecko/Cómo_espacioenblanco": { + "modified": "2020-08-24T04:42:05.596Z", + "contributors": [ + "Nachec" + ] + }, + "Referencia_DOM_de_Gecko/Ejemplos": { + "modified": "2019-03-23T23:51:24.173Z", + "contributors": [ + "SphinxKnight", + "khalid32", + "Mgjbot", + "Manu", + "Markens", + "Nathymig" + ] + }, + "Referencia_DOM_de_Gecko/Eventos": { + "modified": "2019-03-18T21:45:13.362Z", + "contributors": [ + "recortes" + ] + }, + "Referencia_DOM_de_Gecko/Introducción": { + "modified": "2019-03-23T23:48:16.078Z", + "contributors": [ + "LuisSevillano", + "IsaacAaron", + "Sheppy", + "Uri", + "Nathymig" + ] + }, + "Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores": { + "modified": "2020-06-14T19:56:35.416Z", + "contributors": [ + "snickArg" + ] + }, + "Referencia_DOM_de_Gecko/Prefacio": { + "modified": "2019-06-16T19:12:21.185Z", + "contributors": [ + "jesusvillalta", + "Sheppy", + "Nathymig" + ] + }, + "Referencia_de_XUL": { + "modified": "2019-04-19T23:18:32.719Z", + "contributors": [ + "wbamberg", + "teoli", + "chukito" + ] + }, + "SVG_en_Firefox": { + "modified": "2019-03-23T23:43:25.545Z", + "contributors": [ + "teoli", + "Superruzafa", + "Jorolo" + ] + }, + "Sections_and_Outlines_of_an_HTML5_document": { + "modified": "2019-03-23T23:38:22.567Z", + "contributors": [ + "blanchart", + "eljonims", + "welm", + "javigaar", + "learnercys", + "pierre_alfonso", + "jesanchez" + ] + }, + "Seguridad_en_Firefox_2": { + "modified": "2019-03-23T23:42:29.185Z", + "contributors": [ + "wbamberg", + "teoli", + "Nukeador" + ] + }, + "Selección_de_modo_en_Mozilla": { + "modified": "2019-11-21T20:40:48.950Z", + "contributors": [ + "wbamberg", + "teoli", + "fscholz", + "Jorolo" + ] + }, + "Server-sent_events": { + "modified": "2019-03-23T23:24:42.323Z", + "contributors": [ + "ethertank" + ] + }, + "Server-sent_events/utilizando_server_sent_events_sse": { + "modified": "2019-04-16T06:11:09.003Z", + "contributors": [ + "albertoclarbrines", + "adlr", + "iamwao", + "jgutix", + "aztrock" + ] + }, + "Storage": { + "modified": "2019-03-24T00:09:02.141Z", + "contributors": [ + "teoli", + "elPatox", + "Francoyote", + "HenryGR", + "Mgjbot" + ] + }, + "Tipo_MIME_incorrecto_en_archivos_CSS": { + "modified": "2019-01-16T15:43:53.805Z", + "contributors": [ + "Dailosmm", + "Mgjbot", + "Jorolo", + "Nukeador", + "Epaclon", + "Pasky" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:14.436Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "sprodrigues", + "Bugrtn", + "guillermocamon", + "mautematico", + "superrebe", + "mishelashala", + "juan-castano", + "Joker_DC", + "rossif", + "ArcangelZith", + "adri1993", + "zota", + "danielUFO", + "Arudb79", + "Jacqueline", + "@Perlyshh_76", + "ivanlopez", + "Gusvar", + "cristel.ariana", + "jesusruiz", + "PabloDev", + "gorrotowi", + "SebastianRave", + "Houseboyzgz", + "hjaguen", + "foxtro", + "reoo", + "dinoop.p1" + ] + }, + "Tools/3D_View": { + "modified": "2020-07-16T22:34:25.151Z", + "contributors": [ + "rmilano" + ] + }, + "Tools/Accesos_directos": { + "modified": "2020-07-28T10:35:37.425Z", + "contributors": [ + "Anibalismo", + "ssm", + "hugojavierduran9", + "marcorichetta" + ] + }, + "Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.274Z", + "contributors": [ + "mfluehr" + ] + }, + "Tools/Browser_Console": { + "modified": "2020-07-16T22:35:42.205Z", + "contributors": [ + "AldoSantiago", + "almozara" + ] + }, + "Tools/Browser_Toolbox": { + "modified": "2020-07-16T22:35:55.417Z", + "contributors": [ + "norwie" + ] + }, + "Tools/Debugger": { + "modified": "2020-09-13T21:00:58.239Z", + "contributors": [ + "luuiizzaa9060", + "Juanchoib", + "jcmarcfloress", + "eroto", + "wbamberg", + "nacholereu", + "Pablo_Ivan", + "trevorh", + "cgsramirez", + "stephaniehobson", + "Jacqueline", + "C.E." + ] + }, + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:07.255Z", + "contributors": [ + "wbamberg" + ] + }, + "Tools/Debugger/How_to/Disable_breakpoints": { + "modified": "2020-07-16T22:35:11.175Z", + "contributors": [ + "drdavi7@hotmail.com" + ] + }, + "Tools/Debugger/How_to/Set_a_breakpoint": { + "modified": "2020-07-16T22:35:09.854Z", + "contributors": [ + "erickton" + ] + }, + "Tools/Debugger/How_to/Uso_de_un_mapa_fuente": { + "modified": "2020-07-16T22:35:12.325Z", + "contributors": [ + "Makinita" + ] + }, + "Tools/Debugger/Source_map_errors": { + "modified": "2020-07-16T22:35:19.165Z", + "contributors": [ + "Makinita" + ] + }, + "Tools/Desempeño": { + "modified": "2020-07-16T22:36:12.530Z", + "contributors": [ + "LesterGuerra", + "juanmapiquero", + "PorcoMaledette" + ] + }, + "Tools/Desempeño/UI_Tour": { + "modified": "2020-07-16T22:36:14.726Z", + "contributors": [ + "kynu", + "calcerrada", + "ramferposadas" + ] + }, + "Tools/Editor_Audio_Web": { + "modified": "2020-07-16T22:36:08.308Z", + "contributors": [ + "MPoli" + ] + }, + "Tools/Editor_Estilo": { + "modified": "2020-07-16T22:35:00.009Z", + "contributors": [ + "jwhitlock", + "cheline", + "SoftwareRVG", + "JosshuaCalixto1", + "maybe", + "padre629", + "CagsaBit" + ] + }, + "Tools/Monitor_de_Red": { + "modified": "2020-07-16T22:35:29.709Z", + "contributors": [ + "sevillacode", + "Makinita", + "_cuco_", + "Ivan-Perez", + "Dieg" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:27.363Z", + "contributors": [ + "amaiafilo", + "SoftwareRVG", + "maybe", + "webmaster", + "Jacqueline", + "MauricioGil" + ] + }, + "Tools/Page_Inspector/3er-panel_modo": { + "modified": "2020-07-16T22:34:53.611Z", + "contributors": [ + "welm" + ] + }, + "Tools/Page_Inspector/How_to": { + "modified": "2020-07-16T22:34:30.977Z", + "contributors": [ + "sidgan" + ] + }, + "Tools/Page_Inspector/How_to/Abrir_el_Inspector": { + "modified": "2020-07-16T22:34:32.611Z", + "contributors": [ + "amaiafilo" + ] + }, + "Tools/Page_Inspector/How_to/Examinar_y_editar_HTML": { + "modified": "2020-07-16T22:34:40.440Z", + "contributors": [ + "amaiafilo" + ] + }, + "Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel": { + "modified": "2020-07-16T22:34:34.150Z", + "contributors": [ + "amaiafilo" + ] + }, + "Tools/Page_Inspector/How_to/Examine_and_edit_CSS": { + "modified": "2020-07-16T22:34:42.117Z", + "contributors": [ + "amaiafilo" + ] + }, + "Tools/Page_Inspector/How_to/Examine_grid_layouts": { + "modified": "2020-07-16T22:34:47.093Z", + "contributors": [ + "welm" + ] + }, + "Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores": { + "modified": "2020-07-16T22:34:34.877Z", + "contributors": [ + "amaiafilo" + ] + }, + "Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina": { + "modified": "2020-07-16T22:34:45.756Z", + "contributors": [ + "alebarbaja" + ] + }, + "Tools/Page_Inspector/How_to/Select_an_element": { + "modified": "2020-07-16T22:34:33.474Z", + "contributors": [ + "amaiafilo" + ] + }, + "Tools/Page_Inspector/How_to/Work_with_animations": { + "modified": "2020-07-16T22:34:36.333Z", + "contributors": [ + "lyono666", + "angelmillan", + "fmagrosoto" + ] + }, + "Tools/Page_Inspector/UI_Tour": { + "modified": "2020-07-16T22:34:48.922Z", + "contributors": [ + "maruskina", + "amaiafilo" + ] + }, + "Tools/Profiler": { + "modified": "2020-07-16T22:35:28.621Z", + "contributors": [ + "MrDaza" + ] + }, + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.186Z", + "contributors": [ + "sonidos", + "mando", + "Xorgius", + "CesarS", + "Fani100", + "Patriposa", + "awbruna190", + "aguntinito" + ] + }, + "Tools/Remote_Debugging/Debugging_over_a_network": { + "modified": "2020-07-16T22:35:41.552Z", + "contributors": [ + "stephiemtz" + ] + }, + "Tools/Remote_Debugging/Firefox_para_Android": { + "modified": "2020-07-16T22:35:38.980Z", + "contributors": [ + "odelrio", + "pawer13", + "pacommozilla", + "StripTM" + ] + }, + "Tools/Responsive_Design_View": { + "modified": "2020-07-16T22:35:21.169Z", + "contributors": [ + "adolfotc", + "HugoM1682", + "amaiafilo", + "walter.atg", + "maedca" + ] + }, + "Tools/Settings": { + "modified": "2020-07-16T22:36:34.818Z", + "contributors": [ + "amaiafilo" + ] + }, + "Tools/Storage_Inspector": { + "modified": "2020-07-16T22:36:09.696Z", + "contributors": [ + "Sebastianz" + ] + }, + "Tools/Storage_Inspector/Cookies": { + "modified": "2020-07-16T22:36:11.000Z", + "contributors": [ + "Enesimus" + ] + }, + "Tools/Tomar_capturas_de_pantalla": { + "modified": "2020-07-16T22:36:38.280Z", + "contributors": [ + "picandocodigo" + ] + }, + "Tools/Tools_Toolbox": { + "modified": "2020-07-16T22:35:26.877Z", + "contributors": [ + "amaiafilo", + "Papicorito", + "am.garcia" + ] + }, + "Tools/View_source": { + "modified": "2020-07-16T22:35:02.649Z", + "contributors": [ + "StripTM" + ] + }, + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:05.366Z", + "contributors": [ + "elias_ramirez_elriso", + "cgsramirez", + "bassam", + "wbamberg" + ] + }, + "Tools/Web_Console/Console_messages": { + "modified": "2020-07-16T22:34:14.880Z", + "contributors": [ + "Enesimus", + "pacommozilla", + "JeidyVega" + ] + }, + "Tools/Web_Console/Iniciando_la_Consola_Web": { + "modified": "2020-07-16T22:34:17.075Z", + "contributors": [ + "JonoyeMasuso" + ] + }, + "Tools/Web_Console/La_línea_de_comandos_del_intérprete": { + "modified": "2020-08-27T20:06:30.290Z", + "contributors": [ + "Nachec" + ] + }, + "Tools/Working_with_iframes": { + "modified": "2020-07-16T22:36:11.768Z", + "contributors": [ + "carpasse" + ] + }, + "Tools/about:debugging": { + "modified": "2020-07-30T13:12:25.833Z", + "contributors": [ + "Anibalismo" + ] + }, + "Traducir_las_descripciones_de_las_extensiones": { + "modified": "2019-03-23T23:53:33.332Z", + "contributors": [ + "teoli", + "Nukeador", + "Sebastianzartner@gmx.de", + "D20v02d", + "Mgjbot" + ] + }, + "Traducir_una_extensión": { + "modified": "2019-03-23T23:57:54.041Z", + "contributors": [ + "Sebastianz", + "teoli", + "Sheppy", + "gironlievanos", + "Mgjbot", + "Superruzafa" + ] + }, + "Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM": { + "modified": "2019-03-23T23:20:26.633Z", + "contributors": [ + "lajaso", + "jucazam", + "pablo.turati" + ] + }, + "Usando_archivos_desde_aplicaciones_web": { + "modified": "2019-03-24T00:07:10.927Z", + "contributors": [ + "SphinxKnight", + "AngelFQC", + "StripTM", + "Izel", + "deimidis", + "maedca" + ] + }, + "Usar_XPInstall_para_instalar_plugins": { + "modified": "2019-01-16T16:11:23.781Z", + "contributors": [ + "Superruzafa", + "Fedora-core", + "Floot" + ] + }, + "Usar_código_de_Mozilla_en_otros_proyectos": { + "modified": "2019-03-24T00:09:00.370Z", + "contributors": [ + "maedca", + "inma_610" + ] + }, + "Usar_web_workers": { + "modified": "2019-03-24T00:07:32.918Z", + "contributors": [ + "teoli", + "ajimix", + "inma_610" + ] + }, + "Using_the_W3C_DOM_Level_1_Core": { + "modified": "2019-12-13T21:06:41.403Z", + "contributors": [ + "wbamberg", + "jswisher" + ] + }, + "Uso_del_núcleo_del_nivel_1_del_DOM": { + "modified": "2019-12-13T21:10:23.918Z", + "contributors": [ + "wbamberg", + "broxmgs", + "Superruzafa", + "Jorolo" + ] + }, + "Vigilar_plugins": { + "modified": "2019-01-16T15:35:57.481Z", + "contributors": [ + "HenryGR" + ] + }, + "Web": { + "modified": "2020-11-28T21:26:15.631Z", + "contributors": [ + "gabrielazambrano307", + "Nachec", + "Enesimus", + "blanchart", + "SoftwareRVG", + "danieldelvillar", + "raecillacastellana", + "jcbp", + "BubuAnabelas", + "Jacqueline", + "igualar.com", + "atlas7jean", + "luisgm76", + "Sheppy" + ] + }, + "Web/API": { + "modified": "2020-08-08T02:17:57.801Z", + "contributors": [ + "Nachec", + "Enesimus", + "fscholz", + "AJMG", + "tecniloco", + "teoli", + "maedca", + "ethertank", + "Sheppy" + ] + }, + "Web/API/API_de_almacenamiento_web": { + "modified": "2019-03-23T22:46:51.819Z", + "contributors": [ + "fherce", + "AlePerez92", + "VictorAbdon" + ] + }, + "Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web": { + "modified": "2020-08-14T20:09:18.391Z", + "contributors": [ + "Enesimus", + "fherce" + ] + }, + "Web/API/API_del_portapapeles": { + "modified": "2020-10-15T22:31:40.101Z", + "contributors": [ + "gato" + ] + }, + "Web/API/AbstractWorker": { + "modified": "2019-12-20T01:50:52.328Z", + "contributors": [ + "Kaliu", + "Gustavo_Armoa", + "AshWilliams" + ] + }, + "Web/API/Ambient_Light_Events": { + "modified": "2019-03-23T22:33:31.225Z", + "contributors": [ + "BubuAnabelas", + "RockoDev", + "guiller1998" + ] + }, + "Web/API/AnalyserNode": { + "modified": "2019-03-23T22:51:59.371Z", + "contributors": [ + "teoli", + "CarlosLinares" + ] + }, + "Web/API/Animation": { + "modified": "2020-10-15T21:57:43.283Z", + "contributors": [ + "AlePerez92", + "evaferreira", + "IngoBongo" + ] + }, + "Web/API/Animation/Animación": { + "modified": "2019-03-23T22:05:09.399Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/cancel": { + "modified": "2019-03-23T22:04:37.170Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/effect": { + "modified": "2019-03-18T21:15:31.270Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/finish": { + "modified": "2019-03-23T22:04:33.125Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/id": { + "modified": "2019-03-18T21:15:30.202Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/oncancel": { + "modified": "2019-03-23T22:05:09.237Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/onfinish": { + "modified": "2019-03-23T22:05:11.188Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/pause": { + "modified": "2020-10-15T21:58:07.078Z", + "contributors": [ + "AlePerez92", + "IngoBongo" + ] + }, + "Web/API/Animation/play": { + "modified": "2019-03-23T22:04:30.047Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/playState": { + "modified": "2019-03-23T22:05:06.415Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/playbackRate": { + "modified": "2019-03-23T22:05:12.184Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/ready": { + "modified": "2019-03-23T22:04:55.912Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/reverse": { + "modified": "2019-03-23T22:04:31.837Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/startTime": { + "modified": "2019-03-23T22:04:36.769Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/terminado": { + "modified": "2019-03-23T22:05:06.573Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/tiempoActual": { + "modified": "2019-03-23T22:05:12.506Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/Animation/timeline": { + "modified": "2019-03-23T22:04:30.790Z", + "contributors": [ + "IngoBongo" + ] + }, + "Web/API/AnimationEvent": { + "modified": "2019-03-23T22:31:58.545Z", + "contributors": [ + "fscholz", + "jzatarain", + "Vanessa85" + ] + }, + "Web/API/AnimationEvent/animationName": { + "modified": "2019-03-23T22:29:49.749Z", + "contributors": [ + "jzatarain" + ] + }, + "Web/API/Attr": { + "modified": "2020-04-04T11:16:16.397Z", + "contributors": [ + "MiguelHG2351", + "rayrojas", + "AlePerez92" + ] + }, + "Web/API/AudioBuffer": { + "modified": "2020-10-15T22:15:24.740Z", + "contributors": [ + "rayrojas" + ] + }, + "Web/API/AudioNode": { + "modified": "2020-10-15T22:15:25.198Z", + "contributors": [ + "rayrojas" + ] + }, + "Web/API/BaseAudioContext": { + "modified": "2019-03-18T21:00:34.809Z", + "contributors": [ + "SphinxKnight", + "miguelonce", + "chrisdavidmills" + ] + }, + "Web/API/BaseAudioContext/createBiquadFilter": { + "modified": "2019-03-23T22:04:57.563Z", + "contributors": [ + "GersonRosales" + ] + }, + "Web/API/BatteryManager": { + "modified": "2019-03-23T23:24:54.302Z", + "contributors": [ + "David_Marcos", + "maedca", + "sinfallas" + ] + }, + "Web/API/BatteryManager/charging": { + "modified": "2019-03-23T23:27:11.890Z", + "contributors": [ + "fscholz", + "Hasilt", + "LuisE" + ] + }, + "Web/API/BatteryManager/chargingTime": { + "modified": "2019-03-23T23:25:12.194Z", + "contributors": [ + "fscholz", + "palfrei" + ] + }, + "Web/API/BatteryManager/dischargingTime": { + "modified": "2019-03-23T23:27:15.312Z", + "contributors": [ + "fscholz", + "khalid32", + "LuisE" + ] + }, + "Web/API/BatteryManager/level": { + "modified": "2019-03-23T23:25:16.177Z", + "contributors": [ + "fscholz", + "eliezerb", + "maedca", + "David_Marcos", + "sinfallas", + "voylinux" + ] + }, + "Web/API/BatteryManager/onchargingchange": { + "modified": "2019-03-23T23:25:06.308Z", + "contributors": [ + "fscholz", + "Pau_Ilargia", + "voylinux" + ] + }, + "Web/API/BatteryManager/onlevelchange": { + "modified": "2019-03-23T23:25:08.174Z", + "contributors": [ + "fscholz", + "teoli", + "eliezerb", + "robertoasq", + "voylinux" + ] + }, + "Web/API/BeforeUnloadEvent": { + "modified": "2020-10-15T22:19:49.552Z", + "contributors": [ + "tuamigoxavi", + "matias981" + ] + }, + "Web/API/Blob": { + "modified": "2019-03-23T23:07:07.610Z", + "contributors": [ + "parzibyte", + "japho", + "fscholz", + "degrammer" + ] + }, + "Web/API/Blob/Blob": { + "modified": "2020-10-15T21:31:45.424Z", + "contributors": [ + "IsraelFloresDGA", + "BrodaNoel", + "fscholz", + "matajm" + ] + }, + "Web/API/Blob/type": { + "modified": "2019-03-23T22:06:34.982Z", + "contributors": [ + "BrodaNoel" + ] + }, + "Web/API/BlobBuilder": { + "modified": "2019-03-23T22:49:30.131Z", + "contributors": [ + "BrodaNoel", + "japho" + ] + }, + "Web/API/Body": { + "modified": "2020-10-15T22:17:35.545Z", + "contributors": [ + "SphinxKnight", + "bigblair81" + ] + }, + "Web/API/Body/formData": { + "modified": "2020-10-15T22:17:33.164Z", + "contributors": [ + "brauni800" + ] + }, + "Web/API/Body/json": { + "modified": "2020-10-15T22:29:20.361Z", + "contributors": [ + "camsa" + ] + }, + "Web/API/CSSRule": { + "modified": "2019-03-23T23:58:11.498Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/CSSRule/cssText": { + "modified": "2019-03-23T23:58:05.630Z", + "contributors": [ + "fscholz", + "arunpandianp", + "teoli", + "HenryGR" + ] + }, + "Web/API/CSSRule/parentStyleSheet": { + "modified": "2019-03-23T23:58:10.522Z", + "contributors": [ + "fscholz", + "arunpandianp", + "teoli", + "HenryGR" + ] + }, + "Web/API/CSSStyleDeclaration": { + "modified": "2019-03-23T22:44:46.721Z", + "contributors": [ + "guerratron" + ] + }, + "Web/API/CSSStyleRule": { + "modified": "2019-03-23T23:01:37.512Z", + "contributors": [ + "darioperez", + "fscholz" + ] + }, + "Web/API/CSSStyleRule/selectorText": { + "modified": "2019-03-23T23:58:12.055Z", + "contributors": [ + "fscholz", + "jsx", + "teoli", + "HenryGR" + ] + }, + "Web/API/CSSStyleSheet": { + "modified": "2019-03-23T23:58:09.423Z", + "contributors": [ + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/CSSStyleSheet/deleteRule": { + "modified": "2019-03-23T23:58:10.847Z", + "contributors": [ + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/CSSStyleSheet/insertRule": { + "modified": "2019-03-23T23:16:46.847Z", + "contributors": [ + "fscholz", + "LeoHirsch" + ] + }, + "Web/API/CSSStyleSheet/ownerRule": { + "modified": "2019-03-23T23:58:08.873Z", + "contributors": [ + "fscholz", + "khalid32", + "HenryGR" + ] + }, + "Web/API/CSS_Object_Model": { + "modified": "2019-03-23T22:01:23.472Z", + "contributors": [ + "dmelian" + ] + }, + "Web/API/CacheStorage": { + "modified": "2020-10-15T22:30:42.396Z", + "contributors": [ + "AprilSylph" + ] + }, + "Web/API/CacheStorage/keys": { + "modified": "2020-10-15T22:30:42.056Z", + "contributors": [ + "duduindo", + "ph4538157" + ] + }, + "Web/API/CanvasImageSource": { + "modified": "2019-03-23T22:09:10.185Z", + "contributors": [ + "alinarezrangel" + ] + }, + "Web/API/CanvasRenderingContext2D": { + "modified": "2019-03-23T22:54:41.294Z", + "contributors": [ + "rrodrigo", + "JoSaGuDu", + "iamwao", + "geodracs" + ] + }, + "Web/API/CanvasRenderingContext2D/arc": { + "modified": "2019-04-15T00:25:11.182Z", + "contributors": [ + "Rodrigo-Sanchez", + "Mancux2" + ] + }, + "Web/API/CanvasRenderingContext2D/beginPath": { + "modified": "2019-03-23T22:47:39.451Z", + "contributors": [ + "PepeBeat" + ] + }, + "Web/API/CanvasRenderingContext2D/clearRect": { + "modified": "2019-03-23T22:19:13.064Z", + "contributors": [ + "andrpueb" + ] + }, + "Web/API/CanvasRenderingContext2D/drawImage": { + "modified": "2019-03-23T22:47:09.124Z", + "contributors": [ + "iamwao" + ] + }, + "Web/API/CanvasRenderingContext2D/fillRect": { + "modified": "2019-03-23T22:32:43.881Z", + "contributors": [ + "eljonims" + ] + }, + "Web/API/CanvasRenderingContext2D/getImageData": { + "modified": "2020-10-15T22:03:53.553Z", + "contributors": [ + "LEUGIM99" + ] + }, + "Web/API/CanvasRenderingContext2D/lineCap": { + "modified": "2020-10-15T22:18:19.205Z", + "contributors": [ + "Ricardo_F." + ] + }, + "Web/API/CanvasRenderingContext2D/rotate": { + "modified": "2020-10-15T22:12:15.546Z", + "contributors": [ + "albertor21" + ] + }, + "Web/API/CanvasRenderingContext2D/save": { + "modified": "2020-10-15T22:23:30.799Z", + "contributors": [ + "feiss" + ] + }, + "Web/API/Canvas_API/Tutorial/Compositing": { + "modified": "2020-08-27T21:09:19.590Z", + "contributors": [ + "mastertrooper", + "stephaniehobson" + ] + }, + "Web/API/Canvas_API/Tutorial/Compositing/Ejemplo": { + "modified": "2019-03-18T21:36:04.043Z", + "contributors": [ + "lajaso" + ] + }, + "Web/API/ChildNode": { + "modified": "2019-03-29T14:12:39.589Z", + "contributors": [ + "jpmedley" + ] + }, + "Web/API/ChildNode/after": { + "modified": "2020-10-15T21:50:39.528Z", + "contributors": [ + "AlePerez92", + "SoftwareRVG" + ] + }, + "Web/API/ChildNode/before": { + "modified": "2019-03-23T22:23:28.772Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/ChildNode/remove": { + "modified": "2020-10-15T21:50:43.901Z", + "contributors": [ + "daniel.arango", + "teffcode", + "AlePerez92", + "SoftwareRVG" + ] + }, + "Web/API/ChildNode/replaceWith": { + "modified": "2019-03-23T22:23:34.633Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/ClipboardEvent": { + "modified": "2020-10-15T22:14:15.464Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/ClipboardEvent/clipboardData": { + "modified": "2020-10-15T22:14:15.340Z", + "contributors": [ + "Bumxu" + ] + }, + "Web/API/CloseEvent": { + "modified": "2020-11-24T05:35:48.408Z", + "contributors": [ + "netizen", + "jpmontoya182" + ] + }, + "Web/API/Comment": { + "modified": "2020-10-15T22:24:21.833Z", + "contributors": [ + "pablorebora" + ] + }, + "Web/API/Console": { + "modified": "2019-08-30T08:42:12.082Z", + "contributors": [ + "ajuanjojjj", + "fcanellas", + "vlguerrero", + "chrisdavidmills" + ] + }, + "Web/API/Console/count": { + "modified": "2019-03-23T22:07:26.644Z", + "contributors": [ + "deluxury", + "roberbnd" + ] + }, + "Web/API/Console/dir": { + "modified": "2020-11-11T11:46:41.122Z", + "contributors": [ + "jomoji", + "laloptk" + ] + }, + "Web/API/Console/dirxml": { + "modified": "2019-03-23T22:18:03.809Z", + "contributors": [ + "aeroxmotion" + ] + }, + "Web/API/Console/error": { + "modified": "2019-03-23T22:06:32.134Z", + "contributors": [ + "BrodaNoel" + ] + }, + "Web/API/Console/info": { + "modified": "2019-03-23T22:12:32.604Z", + "contributors": [ + "Lwissitoon" + ] + }, + "Web/API/Console/log": { + "modified": "2019-03-23T22:19:48.741Z", + "contributors": [ + "BrodaNoel", + "fcanellas" + ] + }, + "Web/API/Console/tabla": { + "modified": "2019-03-23T22:20:30.589Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Console/time": { + "modified": "2019-03-18T21:42:22.745Z", + "contributors": [ + "jotaoncode" + ] + }, + "Web/API/Console/timeEnd": { + "modified": "2020-10-15T22:13:11.825Z", + "contributors": [ + "xlhector10" + ] + }, + "Web/API/Console/trace": { + "modified": "2019-03-23T22:22:51.545Z", + "contributors": [ + "Axl-Nolasco" + ] + }, + "Web/API/Console/warn": { + "modified": "2020-10-15T21:53:36.780Z", + "contributors": [ + "juanluisrp", + "oderflaj" + ] + }, + "Web/API/Constraint_validation": { + "modified": "2019-04-22T15:33:44.796Z" + }, + "Web/API/Crypto": { + "modified": "2020-10-15T22:27:12.417Z", + "contributors": [ + "joseluisq" + ] + }, + "Web/API/Crypto/subtle": { + "modified": "2020-10-15T22:27:11.548Z", + "contributors": [ + "joseluisq" + ] + }, + "Web/API/CustomElementRegistry": { + "modified": "2020-10-15T22:29:44.444Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/API/CustomElementRegistry/define": { + "modified": "2020-10-15T22:29:45.200Z", + "contributors": [ + "aguilerajl" + ] + }, + "Web/API/CustomEvent": { + "modified": "2020-10-15T21:56:03.240Z", + "contributors": [ + "fscholz", + "AlePerez92", + "daniville" + ] + }, + "Web/API/DOMError": { + "modified": "2020-10-15T21:34:32.594Z", + "contributors": [ + "fscholz", + "MauroEldritch" + ] + }, + "Web/API/DOMParser": { + "modified": "2019-03-23T22:20:06.466Z", + "contributors": [ + "rferraris" + ] + }, + "Web/API/DOMString": { + "modified": "2019-03-18T21:41:05.316Z", + "contributors": [ + "jagomf" + ] + }, + "Web/API/DOMString/Cadenas_binarias": { + "modified": "2020-08-29T03:33:22.030Z", + "contributors": [ + "Nachec" + ] + }, + "Web/API/DataTransfer": { + "modified": "2019-03-23T23:17:03.398Z", + "contributors": [ + "wbamberg", + "nmarmon", + "vmv", + "fscholz", + "yonatanalexis22" + ] + }, + "Web/API/Detecting_device_orientation": { + "modified": "2020-08-11T08:30:00.189Z", + "contributors": [ + "juancarlos.rmr", + "rayrojas", + "jairopezlo" + ] + }, + "Web/API/DeviceMotionEvent": { + "modified": "2020-10-15T22:22:26.832Z", + "contributors": [ + "miguelaup" + ] + }, + "Web/API/Document": { + "modified": "2019-10-10T16:52:49.015Z", + "contributors": [ + "luis.iglesias", + "AlejandroCordova", + "fscholz", + "Crash", + "DoctorRomi", + "Mgjbot", + "DR", + "Carlosds", + "Nathymig" + ] + }, + "Web/API/Document/URL": { + "modified": "2020-10-15T21:18:01.820Z", + "contributors": [ + "AlePerez92", + "fscholz", + "DR" + ] + }, + "Web/API/Document/abrir": { + "modified": "2020-10-15T22:31:23.051Z", + "contributors": [ + "WillieMensa" + ] + }, + "Web/API/Document/adoptNode": { + "modified": "2020-10-15T22:06:16.900Z", + "contributors": [ + "AlePerez92", + "InfaSysKey", + "ANDRUS74" + ] + }, + "Web/API/Document/alinkColor": { + "modified": "2019-03-23T23:46:52.743Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Document/anchors": { + "modified": "2020-10-15T21:18:02.380Z", + "contributors": [ + "roocce", + "fscholz", + "DR" + ] + }, + "Web/API/Document/applets": { + "modified": "2019-03-23T23:46:53.464Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Document/async": { + "modified": "2019-03-23T22:57:43.989Z", + "contributors": [ + "MauroEldritch" + ] + }, + "Web/API/Document/bgColor": { + "modified": "2019-03-23T23:46:48.550Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Document/body": { + "modified": "2019-03-23T23:47:18.556Z", + "contributors": [ + "MauroEldritch", + "fscholz", + "Markens", + "DR" + ] + }, + "Web/API/Document/characterSet": { + "modified": "2019-03-23T23:46:47.961Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Document/clear": { + "modified": "2019-03-23T22:27:12.101Z", + "contributors": [ + "pekechis" + ] + }, + "Web/API/Document/close": { + "modified": "2019-03-23T22:33:21.768Z", + "contributors": [ + "AitorRodriguez990" + ] + }, + "Web/API/Document/contentType": { + "modified": "2019-03-23T22:57:42.530Z", + "contributors": [ + "MauroEldritch" + ] + }, + "Web/API/Document/crearAtributo": { + "modified": "2020-10-15T21:55:08.825Z", + "contributors": [ + "rodririobo", + "juanseromo12", + "FenixAlive" + ] + }, + "Web/API/Document/createDocumentFragment": { + "modified": "2020-08-12T01:13:43.917Z", + "contributors": [ + "zgreco2000", + "msaglietto" + ] + }, + "Web/API/Document/createElement": { + "modified": "2019-09-19T04:18:24.578Z", + "contributors": [ + "AlePerez92", + "Juandresyn", + "aitorllj93", + "BrodaNoel", + "McSonk", + "malonson", + "AlejandroBlanco", + "daesnorey_xy", + "JoaquinGonzalez" + ] + }, + "Web/API/Document/createElementNS": { + "modified": "2019-03-23T22:23:11.141Z", + "contributors": [ + "ErikMj69" + ] + }, + "Web/API/Document/createRange": { + "modified": "2019-08-27T15:00:09.804Z", + "contributors": [ + "iarah", + "fscholz", + "jsx", + "Mgjbot", + "DR" + ] + }, + "Web/API/Document/createTextNode": { + "modified": "2020-10-15T22:17:21.251Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Document/defaultView": { + "modified": "2019-03-23T22:54:20.024Z", + "contributors": [ + "ArcangelZith" + ] + }, + "Web/API/Document/designMode": { + "modified": "2020-10-15T21:40:52.052Z", + "contributors": [ + "AlePerez92", + "sohereitcomes" + ] + }, + "Web/API/Document/dir": { + "modified": "2019-03-23T22:57:39.171Z", + "contributors": [ + "MauroEldritch" + ] + }, + "Web/API/Document/doctype": { + "modified": "2019-03-23T22:43:25.055Z", + "contributors": [ + "joselix" + ] + }, + "Web/API/Document/documentElement": { + "modified": "2019-03-23T23:50:27.852Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Document/documentURI": { + "modified": "2019-03-23T22:39:59.389Z", + "contributors": [ + "Zholary" + ] + }, + "Web/API/Document/documentURIObject": { + "modified": "2019-03-23T23:50:26.462Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Document/dragover_event": { + "modified": "2019-04-30T14:24:25.773Z", + "contributors": [ + "wbamberg", + "fscholz", + "ExE-Boss", + "Vickysolo" + ] + }, + "Web/API/Document/embeds": { + "modified": "2020-10-15T22:22:17.171Z", + "contributors": [ + "iarah" + ] + }, + "Web/API/Document/evaluate": { + "modified": "2019-03-23T22:10:41.891Z", + "contributors": [ + "bryan3561" + ] + }, + "Web/API/Document/execCommand": { + "modified": "2019-03-23T22:59:11.227Z", + "contributors": [ + "MarkelCuesta", + "asero82", + "javatlacati" + ] + }, + "Web/API/Document/exitFullscreen": { + "modified": "2020-10-15T22:23:56.627Z", + "contributors": [ + "davidmartinezfl" + ] + }, + "Web/API/Document/getElementById": { + "modified": "2019-03-23T23:46:23.291Z", + "contributors": [ + "Enesimus", + "jlpindado", + "pclifecl", + "OLiiver", + "fscholz", + "teoli", + "tuxisma", + "Juan c c q" + ] + }, + "Web/API/Document/getElementsByClassName": { + "modified": "2019-03-23T22:48:57.077Z", + "contributors": [ + "JuanMacias", + "JungkookScript", + "ncaracci" + ] + }, + "Web/API/Document/getElementsByName": { + "modified": "2019-03-18T21:37:32.461Z", + "contributors": [ + "MikeGsus" + ] + }, + "Web/API/Document/getElementsByTagName": { + "modified": "2019-03-23T23:50:32.110Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "teoli", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Document/getElementsByTagNameNS": { + "modified": "2019-03-23T23:50:38.494Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "AlejandroSilva", + "leopic", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Document/getSelection": { + "modified": "2019-03-23T22:54:50.239Z", + "contributors": [ + "Diferno" + ] + }, + "Web/API/Document/hasFocus": { + "modified": "2019-03-23T23:53:13.498Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "Mgjbot", + "Talisker", + "HenryGR" + ] + }, + "Web/API/Document/head": { + "modified": "2019-03-23T22:55:43.504Z", + "contributors": [ + "federicobond" + ] + }, + "Web/API/Document/height": { + "modified": "2019-03-23T22:09:21.631Z", + "contributors": [ + "HarleySG" + ] + }, + "Web/API/Document/hidden": { + "modified": "2020-10-15T22:14:24.023Z", + "contributors": [ + "Elenito93" + ] + }, + "Web/API/Document/importNode": { + "modified": "2020-10-15T21:52:00.631Z", + "contributors": [ + "fscholz", + "wbamberg", + "AsLogd" + ] + }, + "Web/API/Document/keydown_event": { + "modified": "2020-04-03T23:31:41.800Z", + "contributors": [ + "camsa", + "irenesmith", + "ExE-Boss", + "fscholz", + "juan-ferrer-toribio" + ] + }, + "Web/API/Document/keyup_event": { + "modified": "2019-04-18T03:50:20.204Z", + "contributors": [ + "irenesmith", + "ExE-Boss", + "fscholz", + "gabojkz" + ] + }, + "Web/API/Document/pointerLockElement": { + "modified": "2019-03-23T22:05:31.350Z", + "contributors": [ + "arquigames" + ] + }, + "Web/API/Document/querySelector": { + "modified": "2019-03-23T22:58:51.923Z", + "contributors": [ + "BrodaNoel", + "Luis_Calvo", + "dannysalazar90" + ] + }, + "Web/API/Document/querySelectorAll": { + "modified": "2020-10-15T21:34:24.234Z", + "contributors": [ + "chrisdavidmills", + "AlePerez92", + "padrecedano", + "lfottaviano", + "joeljose" + ] + }, + "Web/API/Document/readyState": { + "modified": "2019-03-23T22:46:17.268Z", + "contributors": [ + "Codejobs" + ] + }, + "Web/API/Document/registerElement": { + "modified": "2019-03-23T22:58:15.536Z", + "contributors": [ + "SphinxKnight", + "AlePerez92", + "mclo", + "chrisdavidmills" + ] + }, + "Web/API/Document/scripts": { + "modified": "2019-03-23T22:57:42.662Z", + "contributors": [ + "MauroEldritch" + ] + }, + "Web/API/Document/scroll_event": { + "modified": "2020-04-13T22:20:51.709Z", + "contributors": [ + "camsa", + "irenesmith", + "ExE-Boss", + "arkgast", + "fscholz", + "PatoDeTuring", + "Thargelion" + ] + }, + "Web/API/Document/styleSheets": { + "modified": "2019-03-23T23:58:05.224Z", + "contributors": [ + "fscholz", + "jsx", + "teoli", + "HenryGR" + ] + }, + "Web/API/Document/write": { + "modified": "2019-03-23T22:26:37.503Z", + "contributors": [ + "JohnnyKB", + "bastiantowers" + ] + }, + "Web/API/Document/writeln": { + "modified": "2019-03-23T22:21:05.956Z", + "contributors": [ + "mauroc8" + ] + }, + "Web/API/DocumentFragment": { + "modified": "2020-10-15T22:29:37.426Z", + "contributors": [ + "JooseNavarro" + ] + }, + "Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example": { + "modified": "2019-03-23T22:06:28.946Z", + "contributors": [ + "BrodaNoel" + ] + }, + "Web/API/DragEvent": { + "modified": "2020-11-04T23:21:08.729Z", + "contributors": [ + "AngelFQC" + ] + }, + "Web/API/Element": { + "modified": "2019-03-24T00:06:42.464Z", + "contributors": [ + "carllewisc", + "JuanMacias", + "SphinxKnight", + "fscholz", + "teoli", + "webmaster", + "AshfaqHossain", + "MARCASTELEON", + "Markens", + "Mgjbot", + "Nathymig" + ] + }, + "Web/API/Element/accessKey": { + "modified": "2019-03-23T22:26:12.172Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/animate": { + "modified": "2019-03-23T22:26:03.841Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/attachShadow": { + "modified": "2020-10-15T22:29:44.635Z", + "contributors": [ + "aguilerajl" + ] + }, + "Web/API/Element/attributes": { + "modified": "2019-03-23T22:32:35.186Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Element/classList": { + "modified": "2019-08-07T11:56:45.170Z", + "contributors": [ + "AlePerez92", + "alkaithil", + "luispuchades" + ] + }, + "Web/API/Element/className": { + "modified": "2019-03-23T22:32:39.589Z", + "contributors": [ + "AlePerez92", + "Grijander81" + ] + }, + "Web/API/Element/click_event": { + "modified": "2019-03-18T20:47:32.813Z", + "contributors": [ + "irenesmith", + "ExE-Boss", + "fscholz", + "jvas28" + ] + }, + "Web/API/Element/clientHeight": { + "modified": "2019-03-18T20:59:01.264Z", + "contributors": [ + "SphinxKnight", + "maxijb", + "germanfr" + ] + }, + "Web/API/Element/clientLeft": { + "modified": "2019-03-23T23:50:22.640Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Element/clientTop": { + "modified": "2019-03-23T23:50:18.628Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "AshfaqHossain", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Element/clientWidth": { + "modified": "2020-10-15T21:46:17.283Z", + "contributors": [ + "SphinxKnight", + "Grijander81" + ] + }, + "Web/API/Element/closest": { + "modified": "2020-10-15T21:51:29.500Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Element/computedStyleMap": { + "modified": "2020-11-20T23:32:12.573Z", + "contributors": [ + "mrkadium" + ] + }, + "Web/API/Element/currentStyle": { + "modified": "2019-03-23T22:26:01.738Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/getAttribute": { + "modified": "2019-03-23T22:55:05.590Z", + "contributors": [ + "germanfr", + "hawkins" + ] + }, + "Web/API/Element/getAttributeNodeNS": { + "modified": "2019-03-18T21:40:41.705Z", + "contributors": [ + "FcoJavierEsc" + ] + }, + "Web/API/Element/getBoundingClientRect": { + "modified": "2020-10-15T21:16:26.376Z", + "contributors": [ + "AlePerez92", + "slam", + "cristianmartinez", + "SphinxKnight", + "joseanpg", + "jzatarain", + "fscholz", + "jsx", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Element/getClientRects": { + "modified": "2019-03-23T23:50:31.325Z", + "contributors": [ + "SphinxKnight", + "edhzsz", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Element/getElementsByClassName": { + "modified": "2019-03-23T22:32:46.843Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Element/getElementsByTagName": { + "modified": "2019-03-23T23:53:30.735Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "Mgjbot", + "HenryGR" + ] + }, + "Web/API/Element/getElementsByTagNameNS": { + "modified": "2019-03-18T21:15:33.018Z", + "contributors": [ + "cguimaraenz" + ] + }, + "Web/API/Element/hasAttribute": { + "modified": "2019-03-23T22:12:50.721Z", + "contributors": [ + "ElChiniNet" + ] + }, + "Web/API/Element/id": { + "modified": "2019-03-23T22:26:11.048Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/innerHTML": { + "modified": "2019-03-18T20:58:51.922Z", + "contributors": [ + "SphinxKnight", + "IsaacAaron", + "BrodaNoel", + "CristhianLora1", + "fscholz", + "teoli", + "JAparici" + ] + }, + "Web/API/Element/insertAdjacentElement": { + "modified": "2020-12-03T10:36:12.400Z", + "contributors": [ + "AlePerez92", + "alexlndn", + "AgustinPrieto" + ] + }, + "Web/API/Element/insertAdjacentHTML": { + "modified": "2020-10-15T21:56:01.516Z", + "contributors": [ + "AlePerez92", + "mikekrn" + ] + }, + "Web/API/Element/localName": { + "modified": "2019-03-23T22:26:08.984Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/matches": { + "modified": "2020-12-06T16:23:07.481Z", + "contributors": [ + "AlePerez92", + "amIsmael", + "nbouvrette", + "Grijander81" + ] + }, + "Web/API/Element/mousedown_event": { + "modified": "2019-03-18T20:41:57.554Z", + "contributors": [ + "irenesmith", + "ExE-Boss", + "fscholz", + "marydn" + ] + }, + "Web/API/Element/name": { + "modified": "2019-03-23T22:26:11.317Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/namespaceURI": { + "modified": "2019-03-23T22:25:51.573Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/ongotpointercapture": { + "modified": "2019-03-23T22:25:49.346Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/onlostpointercapture": { + "modified": "2019-03-23T22:25:49.190Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/onwheel": { + "modified": "2019-03-18T21:09:09.483Z", + "contributors": [ + "fscholz", + "SoftwareRVG" + ] + }, + "Web/API/Element/outerHTML": { + "modified": "2019-03-23T22:32:38.203Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Element/prefix": { + "modified": "2019-03-23T22:25:56.753Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/querySelector": { + "modified": "2020-10-01T13:45:10.425Z", + "contributors": [ + "Augusto-Ruiz", + "Luis_Calvo", + "Fx-Enlcxx" + ] + }, + "Web/API/Element/removeAttribute": { + "modified": "2019-03-23T22:32:43.147Z", + "contributors": [ + "AlePerez92", + "Grijander81" + ] + }, + "Web/API/Element/requestFullScreen": { + "modified": "2019-03-23T22:46:59.466Z", + "contributors": [ + "joseamn1" + ] + }, + "Web/API/Element/runtimeStyle": { + "modified": "2019-03-23T22:25:35.378Z", + "contributors": [ + "SoftwareRVG" + ] + }, + "Web/API/Element/scrollHeight": { + "modified": "2020-09-19T11:38:52.843Z", + "contributors": [ + "amfolgar", + "SphinxKnight", + "SoftwareRVG" + ] + }, + "Web/API/Element/scrollIntoView": { + "modified": "2020-08-02T20:51:14.523Z", + "contributors": [ + "maketas", + "avaleriani", + "magorismagor", + "germanfr" + ] + }, + "Web/API/Element/scrollLeft": { + "modified": "2019-03-18T20:59:11.327Z", + "contributors": [ + "SphinxKnight", + "SoftwareRVG" + ] + }, + "Web/API/Element/scrollTop": { + "modified": "2019-03-23T22:32:41.577Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Element/scrollTopMax": { + "modified": "2019-03-23T22:16:03.156Z", + "contributors": [ + "lizzie136" + ] + }, + "Web/API/Element/scrollWidth": { + "modified": "2020-10-15T21:46:17.244Z", + "contributors": [ + "SphinxKnight", + "Grijander81" + ] + }, + "Web/API/Element/setAttribute": { + "modified": "2019-03-23T23:58:09.577Z", + "contributors": [ + "AlePerez92", + "fscholz", + "AshfaqHossain", + "teoli", + "HenryGR" + ] + }, + "Web/API/Element/setAttributeNS": { + "modified": "2019-03-23T22:29:35.252Z", + "contributors": [ + "developersoul" + ] + }, + "Web/API/Element/setCapture": { + "modified": "2019-03-23T22:23:40.163Z", + "contributors": [ + "wbamberg", + "SoftwareRVG" + ] + }, + "Web/API/Element/shadowRoot": { + "modified": "2020-10-15T22:21:04.049Z", + "contributors": [ + "quintero_japon" + ] + }, + "Web/API/Element/tagName": { + "modified": "2019-03-23T23:53:26.081Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "Mgjbot", + "HenryGR" + ] + }, + "Web/API/Element/wheel_event": { + "modified": "2019-04-08T07:24:47.493Z", + "contributors": [ + "irenesmith", + "fscholz", + "ExE-Boss", + "dimuziop", + "Thargelion", + "PRDeving" + ] + }, + "Web/API/ElementosHTMLparaVideo": { + "modified": "2019-06-22T13:44:40.927Z", + "contributors": [ + "Santi72Alc", + "myrnafig" + ] + }, + "Web/API/Event": { + "modified": "2019-03-24T00:00:03.889Z", + "contributors": [ + "wbamberg", + "jesmarquez", + "fscholz", + "cesardelahoz", + "Mgjbot", + "Markens", + "DR", + "Nathymig" + ] + }, + "Web/API/Event/Event": { + "modified": "2020-10-15T21:51:25.582Z", + "contributors": [ + "fscholz", + "malonson" + ] + }, + "Web/API/Event/bubbles": { + "modified": "2019-03-23T23:50:25.843Z", + "contributors": [ + "SphinxKnight", + "DeiberChacon", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Event/cancelable": { + "modified": "2019-03-23T23:53:29.694Z", + "contributors": [ + "fscholz", + "hardhik", + "AshfaqHossain", + "Mgjbot", + "HenryGR" + ] + }, + "Web/API/Event/createEvent": { + "modified": "2019-03-23T22:01:26.841Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Event/currentTarget": { + "modified": "2020-10-15T21:56:21.779Z", + "contributors": [ + "AlePerez92", + "KacosPro", + "roberbnd" + ] + }, + "Web/API/Event/defaultPrevented": { + "modified": "2019-03-23T23:06:29.767Z", + "contributors": [ + "AlePerez92", + "fscholz", + "matajm" + ] + }, + "Web/API/Event/initEvent": { + "modified": "2019-03-23T23:53:14.885Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "AndresSaa", + "AshfaqHossain", + "Mgjbot", + "HenryGR" + ] + }, + "Web/API/Event/preventDefault": { + "modified": "2019-03-23T23:53:27.022Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "Mgjbot", + "HenryGR" + ] + }, + "Web/API/Event/stopPropagation": { + "modified": "2019-03-18T20:37:26.213Z", + "contributors": [ + "sebaLinares", + "theskear", + "AlePerez92" + ] + }, + "Web/API/Event/target": { + "modified": "2020-11-21T17:52:42.977Z", + "contributors": [ + "fernandoarmonellifiedler", + "luchosr", + "Eyurivilc", + "roberbnd" + ] + }, + "Web/API/Event/type": { + "modified": "2020-10-15T21:21:03.258Z", + "contributors": [ + "AlePerez92", + "javier1nc", + "fscholz", + "Chacho" + ] + }, + "Web/API/EventListener": { + "modified": "2019-03-23T22:49:37.176Z", + "contributors": [ + "gdlm91", + "japho" + ] + }, + "Web/API/EventSource": { + "modified": "2019-03-23T22:10:23.912Z", + "contributors": [ + "Jabi" + ] + }, + "Web/API/EventSource/onopen": { + "modified": "2019-03-23T22:03:59.180Z", + "contributors": [ + "Hoosep" + ] + }, + "Web/API/EventTarget": { + "modified": "2020-10-26T17:08:31.808Z", + "contributors": [ + "Ktoxcon", + "diazpolanco13", + "jorgeherrera9103", + "fscholz" + ] + }, + "Web/API/EventTarget/addEventListener": { + "modified": "2020-10-24T17:14:12.317Z", + "contributors": [ + "codesandtags", + "wbamberg", + "padrecedano", + "LuxDie", + "juanbrujo", + "StripTM", + "fscholz", + "samurai-code", + "Josias", + "edulon", + "Chacho" + ] + }, + "Web/API/EventTarget/dispatchEvent": { + "modified": "2020-05-25T14:53:28.357Z", + "contributors": [ + "OneLoneFox", + "SphinxKnight", + "fscholz", + "jsx", + "teoli", + "Mgjbot", + "HenryGR" + ] + }, + "Web/API/EventTarget/removeEventListener": { + "modified": "2020-10-15T21:33:28.829Z", + "contributors": [ + "IsraelFloresDGA", + "everblut", + "cmadrono" + ] + }, + "Web/API/FetchEvent": { + "modified": "2020-11-15T12:19:50.961Z", + "contributors": [ + "kuntur-studio", + "pavilion", + "fasalgad" + ] + }, + "Web/API/Fetch_API": { + "modified": "2020-10-15T21:38:02.526Z", + "contributors": [ + "PacoVela", + "SSantiago90", + "erpheus", + "AlePerez92", + "robermorales", + "jmcarnero", + "enlinea777" + ] + }, + "Web/API/Fetch_API/Conceptos_basicos": { + "modified": "2019-03-18T21:24:00.327Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/API/Fetch_API/Utilizando_Fetch": { + "modified": "2020-10-15T21:51:23.613Z", + "contributors": [ + "arturojimenezmedia", + "camsa", + "jccuevas", + "MateoVelilla", + "crimoniv", + "danielM9521", + "SphinxKnight", + "Ruluk", + "jpuerto", + "baumannzone", + "anjerago", + "icedrek", + "royexr", + "AlePerez92" + ] + }, + "Web/API/File": { + "modified": "2020-10-15T21:37:53.420Z", + "contributors": [ + "IsraelFloresDGA", + "mattkgross", + "AshWilliams" + ] + }, + "Web/API/File/Using_files_from_web_applications": { + "modified": "2019-03-24T00:06:11.527Z", + "contributors": [ + "chrisdavidmills", + "israelfl", + "pacommozilla", + "teoli", + "mare", + "Izel" + ] + }, + "Web/API/File/fileName": { + "modified": "2020-02-09T09:40:59.258Z", + "contributors": [ + "blanchart", + "IsraelFloresDGA", + "BrodaNoel" + ] + }, + "Web/API/File/lastModifiedDate": { + "modified": "2019-03-23T22:06:34.338Z", + "contributors": [ + "BrodaNoel" + ] + }, + "Web/API/File/name": { + "modified": "2020-10-15T21:56:43.088Z", + "contributors": [ + "IsraelFloresDGA", + "BrodaNoel" + ] + }, + "Web/API/File/type": { + "modified": "2020-10-15T22:26:46.640Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/API/File/webkitRelativePath": { + "modified": "2019-03-23T22:06:35.128Z", + "contributors": [ + "BrodaNoel" + ] + }, + "Web/API/FileError": { + "modified": "2019-03-23T22:51:12.244Z", + "contributors": [ + "Jarvanux" + ] + }, + "Web/API/FileReader": { + "modified": "2019-03-23T23:04:14.656Z", + "contributors": [ + "JuanjoVlado", + "V.Morantes", + "israelfl", + "Carlos-T", + "Clunaenc", + "fscholz", + "cm_rocanroll" + ] + }, + "Web/API/FileReader/onload": { + "modified": "2019-03-23T22:18:25.451Z", + "contributors": [ + "DaniMartiRamirez" + ] + }, + "Web/API/FileReader/readAsArrayBuffer": { + "modified": "2019-03-23T22:49:37.062Z", + "contributors": [ + "MarcoZepeda" + ] + }, + "Web/API/FileReader/readAsDataURL": { + "modified": "2019-03-23T22:48:53.339Z", + "contributors": [ + "teoli", + "empirreamm", + "developersoul" + ] + }, + "Web/API/FileReader/readAsText": { + "modified": "2019-03-23T22:11:54.836Z", + "contributors": [ + "owaremx" + ] + }, + "Web/API/FileReader/result": { + "modified": "2020-10-15T22:16:53.945Z", + "contributors": [ + "carlosbulnes" + ] + }, + "Web/API/FileSystem": { + "modified": "2019-07-04T14:31:32.136Z", + "contributors": [ + "lperezp", + "jpmontoya182" + ] + }, + "Web/API/Fullscreen_API": { + "modified": "2019-03-23T22:19:43.566Z", + "contributors": [ + "wbamberg", + "israel-munoz" + ] + }, + "Web/API/GamepadButton": { + "modified": "2020-10-15T22:31:36.770Z", + "contributors": [ + "kenliten" + ] + }, + "Web/API/Gamepad_API": { + "modified": "2020-10-15T22:24:50.048Z", + "contributors": [ + "LeonEmil" + ] + }, + "Web/API/Geolocation": { + "modified": "2019-03-23T23:21:41.383Z", + "contributors": [ + "AlePerez92", + "fscholz", + "AJMG" + ] + }, + "Web/API/Geolocation/clearWatch": { + "modified": "2019-03-23T23:21:31.757Z", + "contributors": [ + "franklevel", + "fscholz", + "AJMG" + ] + }, + "Web/API/Geolocation/getCurrentPosition": { + "modified": "2019-03-23T23:21:46.266Z", + "contributors": [ + "AlePerez92", + "fscholz", + "lupomontero", + "AJMG" + ] + }, + "Web/API/Geolocation/watchPosition": { + "modified": "2019-03-23T23:21:44.720Z", + "contributors": [ + "AlePerez92", + "fscholz", + "AJMG" + ] + }, + "Web/API/GeolocationCoordinates": { + "modified": "2019-12-10T09:34:21.214Z", + "contributors": [ + "chrisdavidmills", + "AlePerez92" + ] + }, + "Web/API/GeolocationCoordinates/latitude": { + "modified": "2019-12-10T09:34:21.409Z", + "contributors": [ + "chrisdavidmills", + "elxris" + ] + }, + "Web/API/GeolocationPosition": { + "modified": "2020-10-15T22:10:48.604Z", + "contributors": [ + "chrisdavidmills", + "sergitxu" + ] + }, + "Web/API/GlobalEventHandlers": { + "modified": "2020-10-15T21:33:09.443Z", + "contributors": [ + "Nachec", + "fscholz" + ] + }, + "Web/API/GlobalEventHandlers/onblur": { + "modified": "2019-03-23T22:33:17.308Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/GlobalEventHandlers/onchange": { + "modified": "2019-03-23T22:18:11.571Z", + "contributors": [ + "gama" + ] + }, + "Web/API/GlobalEventHandlers/onclick": { + "modified": "2019-08-28T11:37:06.287Z", + "contributors": [ + "J-Lobo", + "Noreen", + "gama" + ] + }, + "Web/API/GlobalEventHandlers/onclose": { + "modified": "2020-10-15T22:12:16.407Z", + "contributors": [ + "alexisrazok" + ] + }, + "Web/API/GlobalEventHandlers/onerror": { + "modified": "2019-03-23T22:53:42.268Z", + "contributors": [ + "wbamberg", + "galegosimpatico" + ] + }, + "Web/API/GlobalEventHandlers/onfocus": { + "modified": "2019-03-18T21:31:41.059Z", + "contributors": [ + "ANDRUS74" + ] + }, + "Web/API/GlobalEventHandlers/oninput": { + "modified": "2019-03-23T22:55:01.733Z", + "contributors": [ + "Diegosolo" + ] + }, + "Web/API/GlobalEventHandlers/onkeydown": { + "modified": "2019-03-18T21:31:44.954Z", + "contributors": [ + "ANDRUS74" + ] + }, + "Web/API/GlobalEventHandlers/onkeyup": { + "modified": "2019-03-18T21:31:50.304Z", + "contributors": [ + "ANDRUS74" + ] + }, + "Web/API/GlobalEventHandlers/onload": { + "modified": "2019-03-23T23:33:14.527Z", + "contributors": [ + "fscholz", + "khalid32", + "ehecatl" + ] + }, + "Web/API/GlobalEventHandlers/onloadedmetadata": { + "modified": "2020-10-15T22:34:40.071Z", + "contributors": [ + "winxde" + ] + }, + "Web/API/GlobalEventHandlers/onresize": { + "modified": "2019-03-23T22:38:35.801Z", + "contributors": [ + "NevinSantana" + ] + }, + "Web/API/GlobalEventHandlers/onscroll": { + "modified": "2019-03-23T22:33:14.134Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/GlobalEventHandlers/onselect": { + "modified": "2019-03-23T22:33:14.413Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/GlobalEventHandlers/onselectstart": { + "modified": "2019-03-18T21:23:16.974Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/GlobalEventHandlers/onsubmit": { + "modified": "2019-03-18T21:31:41.533Z", + "contributors": [ + "ANDRUS74" + ] + }, + "Web/API/GlobalEventHandlers/ontouchstart": { + "modified": "2019-03-23T22:32:02.059Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/GlobalEventHandlers/onunload": { + "modified": "2019-03-23T23:39:28.498Z", + "contributors": [ + "fscholz", + "khalid32", + "Sheppy" + ] + }, + "Web/API/HTMLAnchorElement": { + "modified": "2019-03-18T21:42:27.257Z", + "contributors": [ + "BubuAnabelas", + "LUISTGMDN" + ] + }, + "Web/API/HTMLAudioElement": { + "modified": "2019-03-24T00:05:48.645Z", + "contributors": [ + "wbamberg", + "fscholz", + "teoli", + "inma_610" + ] + }, + "Web/API/HTMLCanvasElement": { + "modified": "2019-03-23T22:50:27.840Z", + "contributors": [ + "AshWilliams" + ] + }, + "Web/API/HTMLCanvasElement/getContext": { + "modified": "2019-03-23T22:18:36.564Z", + "contributors": [ + "OrlandoIsay" + ] + }, + "Web/API/HTMLCanvasElement/height": { + "modified": "2019-03-23T22:47:48.394Z", + "contributors": [ + "empirreamm" + ] + }, + "Web/API/HTMLCanvasElement/toBlob": { + "modified": "2019-03-23T22:44:55.955Z", + "contributors": [ + "kodamirmo" + ] + }, + "Web/API/HTMLCanvasElement/toDataURL": { + "modified": "2020-10-15T21:38:42.950Z", + "contributors": [ + "jagomf", + "calmsz", + "genuinefafa", + "empirreamm" + ] + }, + "Web/API/HTMLCanvasElement/width": { + "modified": "2019-03-23T22:47:52.236Z", + "contributors": [ + "empirreamm" + ] + }, + "Web/API/HTMLCollection": { + "modified": "2020-10-15T21:37:48.821Z", + "contributors": [ + "AlePerez92", + "diego_bardelas", + "kromsoft", + "djrm" + ] + }, + "Web/API/HTMLContentElement": { + "modified": "2019-03-23T22:10:28.345Z", + "contributors": [ + "dkocho4" + ] + }, + "Web/API/HTMLContentElement/getDistributedNodes": { + "modified": "2019-03-23T22:10:26.488Z", + "contributors": [ + "dkocho4" + ] + }, + "Web/API/HTMLContentElement/select": { + "modified": "2019-03-23T22:10:36.116Z", + "contributors": [ + "dkocho4" + ] + }, + "Web/API/HTMLDivElement": { + "modified": "2019-03-23T22:03:41.348Z", + "contributors": [ + "jonvadillo" + ] + }, + "Web/API/HTMLElement": { + "modified": "2020-06-20T19:45:51.700Z", + "contributors": [ + "hernandoh", + "hpintos", + "fscholz" + ] + }, + "Web/API/HTMLElement/change_event": { + "modified": "2020-10-15T22:17:42.425Z", + "contributors": [ + "IsraelFloresDGA", + "AlePerez92" + ] + }, + "Web/API/HTMLElement/click": { + "modified": "2020-10-15T21:59:51.355Z", + "contributors": [ + "hecaxmmx", + "mtnalonso" + ] + }, + "Web/API/HTMLElement/contentEditable": { + "modified": "2020-10-15T22:23:54.889Z", + "contributors": [ + "lauramacdaleno" + ] + }, + "Web/API/HTMLElement/dataset": { + "modified": "2020-10-15T22:06:35.887Z", + "contributors": [ + "OneLoneFox", + "PacoVela", + "ultraklon", + "pipepico", + "AlePerez92" + ] + }, + "Web/API/HTMLElement/focus": { + "modified": "2020-10-15T21:51:27.517Z", + "contributors": [ + "IsraelFloresDGA", + "AlePerez92", + "jesumv" + ] + }, + "Web/API/HTMLElement/innerText": { + "modified": "2020-10-15T22:31:46.481Z", + "contributors": [ + "hugojavierduran9" + ] + }, + "Web/API/HTMLElement/input_event": { + "modified": "2020-10-15T22:17:41.989Z", + "contributors": [ + "mariomoreno", + "IsraelFloresDGA" + ] + }, + "Web/API/HTMLElement/offsetHeight": { + "modified": "2019-04-30T12:33:07.062Z", + "contributors": [ + "AlePerez92", + "SphinxKnight", + "germanfr" + ] + }, + "Web/API/HTMLElement/offsetLeft": { + "modified": "2019-03-18T20:59:09.140Z", + "contributors": [ + "SphinxKnight", + "gama" + ] + }, + "Web/API/HTMLElement/offsetParent": { + "modified": "2020-10-15T22:11:55.510Z", + "contributors": [ + "Vincetroid" + ] + }, + "Web/API/HTMLElement/offsetTop": { + "modified": "2020-10-15T21:46:16.171Z", + "contributors": [ + "SphinxKnight", + "santinogue", + "Grijander81" + ] + }, + "Web/API/HTMLElement/offsetWidth": { + "modified": "2020-10-15T21:50:38.562Z", + "contributors": [ + "SphinxKnight", + "Facu50196", + "jvas28" + ] + }, + "Web/API/HTMLElement/style": { + "modified": "2019-03-23T23:58:09.934Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/HTMLFormElement": { + "modified": "2019-03-23T23:46:38.218Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "DR", + "Nathymig" + ] + }, + "Web/API/HTMLFormElement/reset": { + "modified": "2020-11-28T13:27:49.559Z", + "contributors": [ + "hiperion" + ] + }, + "Web/API/HTMLHeadElement": { + "modified": "2020-10-15T22:31:07.133Z", + "contributors": [ + "jhonarielgj" + ] + }, + "Web/API/HTMLHtmlElement": { + "modified": "2019-03-23T22:27:47.579Z", + "contributors": [ + "raecillacastellana" + ] + }, + "Web/API/HTMLImageElement": { + "modified": "2019-03-23T22:42:00.195Z", + "contributors": [ + "thzunder" + ] + }, + "Web/API/HTMLImageElement/Image": { + "modified": "2019-03-23T22:12:14.962Z", + "contributors": [ + "gabo32", + "Jhandrox" + ] + }, + "Web/API/HTMLInputElement": { + "modified": "2020-08-25T19:55:45.034Z", + "contributors": [ + "duduindo", + "Enesimus", + "chrisdavidmills" + ] + }, + "Web/API/HTMLInputElement/invalid_event": { + "modified": "2019-04-30T13:47:32.409Z", + "contributors": [ + "wbamberg", + "estelle", + "IsraelFloresDGA" + ] + }, + "Web/API/HTMLInputElement/select": { + "modified": "2019-03-18T21:34:04.996Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/HTMLLIElement": { + "modified": "2019-03-23T22:21:38.998Z", + "contributors": [ + "elxris", + "bardcrack" + ] + }, + "Web/API/HTMLLabelElement": { + "modified": "2020-10-15T22:11:47.827Z", + "contributors": [ + "BubuAnabelas", + "mym2013" + ] + }, + "Web/API/HTMLMediaElement": { + "modified": "2020-10-15T22:13:56.798Z", + "contributors": [ + "mannypinillo" + ] + }, + "Web/API/HTMLMediaElement/canplay_event": { + "modified": "2019-03-18T20:49:26.430Z", + "contributors": [ + "estelle", + "ExE-Boss", + "fscholz", + "jjoselon" + ] + }, + "Web/API/HTMLMediaElement/loadeddata_event": { + "modified": "2020-10-15T22:25:54.605Z", + "contributors": [ + "NEVITS" + ] + }, + "Web/API/HTMLMediaElement/pause": { + "modified": "2020-10-15T22:24:10.390Z", + "contributors": [ + "chekoNava" + ] + }, + "Web/API/HTMLMediaElement/paused": { + "modified": "2020-10-15T22:24:09.151Z", + "contributors": [ + "chekoNava" + ] + }, + "Web/API/HTMLMediaElement/play": { + "modified": "2020-10-15T22:24:04.866Z", + "contributors": [ + "chekoNava" + ] + }, + "Web/API/HTMLMediaElement/timeupdate_event": { + "modified": "2019-03-18T20:49:28.173Z", + "contributors": [ + "estelle", + "ExE-Boss", + "fscholz", + "baldore" + ] + }, + "Web/API/HTMLSelectElement": { + "modified": "2020-10-15T22:06:34.378Z", + "contributors": [ + "wbamberg" + ] + }, + "Web/API/HTMLSelectElement/checkValidity": { + "modified": "2020-10-15T22:06:33.300Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/HTMLSelectElement/setCustomValidity": { + "modified": "2020-10-15T22:21:29.656Z", + "contributors": [ + "raul-arias" + ] + }, + "Web/API/HTMLShadowElement": { + "modified": "2019-03-23T22:10:24.059Z", + "contributors": [ + "dkocho4", + "Sebastianz" + ] + }, + "Web/API/HTMLShadowElement/getDistributedNodes": { + "modified": "2019-03-23T22:10:23.317Z", + "contributors": [ + "dkocho4" + ] + }, + "Web/API/HTMLStyleElement": { + "modified": "2019-03-24T00:07:06.618Z", + "contributors": [ + "fscholz", + "lcamacho", + "DoctorRomi", + "HenryGR", + "Markens", + "Nathymig" + ] + }, + "Web/API/HTMLTableElement": { + "modified": "2019-03-23T23:46:43.890Z", + "contributors": [ + "fscholz", + "khalid32", + "ethertank", + "DR", + "M3n3chm0", + "Nathymig" + ] + }, + "Web/API/HTMLTableElement/align": { + "modified": "2019-03-23T22:32:48.061Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/HTMLTableElement/insertRow": { + "modified": "2019-03-23T22:32:47.103Z", + "contributors": [ + "lalo", + "Grijander81" + ] + }, + "Web/API/Headers": { + "modified": "2020-10-15T22:07:38.324Z", + "contributors": [ + "Estebanrg21" + ] + }, + "Web/API/History": { + "modified": "2020-10-15T22:28:24.964Z", + "contributors": [ + "alattalatta" + ] + }, + "Web/API/History/length": { + "modified": "2020-10-15T22:34:59.646Z", + "contributors": [ + "cajotafer" + ] + }, + "Web/API/History/pushState": { + "modified": "2020-10-15T22:28:26.373Z", + "contributors": [ + "cajotafer", + "arcaela" + ] + }, + "Web/API/IDBCursor": { + "modified": "2019-09-04T06:41:50.466Z", + "contributors": [ + "jambsik", + "fscholz", + "chrisdavidmills" + ] + }, + "Web/API/IDBCursor/continue": { + "modified": "2019-03-23T22:40:02.950Z", + "contributors": [ + "BubuAnabelas", + "Alfalfa01" + ] + }, + "Web/API/IDBDatabase": { + "modified": "2019-03-23T22:23:43.090Z", + "contributors": [ + "jpmedley" + ] + }, + "Web/API/IDBDatabase/transaction": { + "modified": "2019-03-23T22:23:53.480Z", + "contributors": [ + "carlo.romero1991" + ] + }, + "Web/API/IDBObjectStore": { + "modified": "2019-03-23T23:01:30.975Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/IDBObjectStore/add": { + "modified": "2019-03-23T23:05:57.547Z", + "contributors": [ + "fscholz", + "AngelFQC" + ] + }, + "Web/API/ImageBitmap": { + "modified": "2020-10-15T22:03:23.639Z", + "contributors": [ + "necrobite" + ] + }, + "Web/API/ImageBitmapRenderingContext": { + "modified": "2020-10-15T22:03:23.985Z", + "contributors": [ + "teoli", + "necrobite" + ] + }, + "Web/API/IndexedDB_API": { + "modified": "2020-01-13T04:48:11.727Z", + "contributors": [ + "chrisdavidmills", + "thepianist2", + "GranRafa", + "semptrion", + "Fjaguero", + "MPoli" + ] + }, + "Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB": { + "modified": "2020-01-13T04:48:11.759Z", + "contributors": [ + "chrisdavidmills", + "fscholz", + "elin3t", + "sebasmagri" + ] + }, + "Web/API/IndexedDB_API/Usando_IndexedDB": { + "modified": "2020-01-13T04:48:12.209Z", + "contributors": [ + "chrisdavidmills", + "gama", + "Pcost8300", + "franvalmo", + "frank-orellana", + "otif11", + "urbanogb", + "AlePerez92", + "beatriz-merino", + "matajm", + "elin3t", + "maparrar" + ] + }, + "Web/API/Intersection_Observer_API": { + "modified": "2020-11-03T00:26:14.370Z", + "contributors": [ + "juanfelipejg", + "kuntur-studio", + "maketas", + "sandromedina", + "lacf95", + "midudev", + "joanvasa", + "AshWilliams" + ] + }, + "Web/API/KeyboardEvent": { + "modified": "2019-03-18T21:08:57.551Z", + "contributors": [ + "fscholz", + "pdro-enrique", + "wbamberg", + "pablodonoso" + ] + }, + "Web/API/KeyboardEvent/getModifierState": { + "modified": "2020-10-15T22:04:42.428Z", + "contributors": [ + "leoderja" + ] + }, + "Web/API/KeyboardEvent/key": { + "modified": "2020-10-15T22:10:09.653Z", + "contributors": [ + "isaacanet", + "aleju92" + ] + }, + "Web/API/KeyboardEvent/metaKey": { + "modified": "2019-03-23T22:47:47.329Z", + "contributors": [ + "empirreamm" + ] + }, + "Web/API/KeyboardEvent/which": { + "modified": "2019-03-23T23:25:30.040Z", + "contributors": [ + "fscholz", + "jsx", + "arthusu" + ] + }, + "Web/API/Location": { + "modified": "2020-03-11T08:46:40.807Z", + "contributors": [ + "nverino", + "BrodaNoel" + ] + }, + "Web/API/Location/origin": { + "modified": "2020-11-17T12:52:42.607Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Location/reload": { + "modified": "2020-10-30T03:50:17.206Z", + "contributors": [ + "SphinxKnight", + "MiguelHG2351", + "PatoDeTuring" + ] + }, + "Web/API/MediaDevices": { + "modified": "2019-03-23T22:36:21.378Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/API/MediaDevices/getUserMedia": { + "modified": "2019-03-23T22:36:21.202Z", + "contributors": [ + "AdanPalacios", + "titosobabas", + "RSalgadoAtala", + "Cristhian", + "matajm" + ] + }, + "Web/API/MediaQueryList": { + "modified": "2019-03-18T21:17:33.122Z", + "contributors": [ + "BubuAnabelas", + "PatoDeTuring" + ] + }, + "Web/API/MediaQueryList/addListener": { + "modified": "2019-03-18T21:16:20.430Z", + "contributors": [ + "PatoDeTuring" + ] + }, + "Web/API/MediaQueryList/matches": { + "modified": "2019-03-23T22:05:29.020Z", + "contributors": [ + "PatoDeTuring" + ] + }, + "Web/API/MediaQueryList/removeListener": { + "modified": "2019-03-23T22:05:31.060Z", + "contributors": [ + "PatoDeTuring" + ] + }, + "Web/API/MediaSource": { + "modified": "2019-03-23T22:38:20.191Z", + "contributors": [ + "Lazaro" + ] + }, + "Web/API/MediaStreamAudioSourceNode": { + "modified": "2019-03-18T20:35:52.439Z", + "contributors": [ + "davidtorroija", + "AndresMendozaOrozco" + ] + }, + "Web/API/MediaStreamTrack": { + "modified": "2019-03-23T23:10:18.897Z", + "contributors": [ + "matajm", + "maedca" + ] + }, + "Web/API/MessageEvent": { + "modified": "2019-03-18T21:44:05.386Z", + "contributors": [ + "jpmontoya182" + ] + }, + "Web/API/MimeType": { + "modified": "2019-03-18T21:36:36.016Z", + "contributors": [ + "daniel.duarte" + ] + }, + "Web/API/MouseEvent": { + "modified": "2019-03-23T23:01:32.904Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/MouseEvent/initMouseEvent": { + "modified": "2019-03-23T23:50:24.977Z", + "contributors": [ + "SphinxKnight", + "vectorderivative", + "jorgecasar", + "fscholz", + "khalid32", + "teoli", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/MouseEvent/shiftKey": { + "modified": "2019-03-23T22:05:24.832Z", + "contributors": [ + "evaferreira" + ] + }, + "Web/API/MutationObserver": { + "modified": "2019-05-13T04:27:12.587Z", + "contributors": [ + "mllambias", + "cesaruve", + "aeroxmotion", + "JordiCruells", + "alvaropinot" + ] + }, + "Web/API/MutationObserver/MutationObserver": { + "modified": "2020-10-15T22:18:30.706Z", + "contributors": [ + "mllambias" + ] + }, + "Web/API/MutationObserver/observe": { + "modified": "2020-10-15T22:18:29.107Z", + "contributors": [ + "mllambias" + ] + }, + "Web/API/Navigator": { + "modified": "2019-03-23T23:20:36.282Z", + "contributors": [ + "israel-munoz", + "khalid32", + "tpb" + ] + }, + "Web/API/Navigator/doNotTrack": { + "modified": "2019-03-18T21:35:42.847Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Navigator/getUserMedia": { + "modified": "2019-03-23T23:27:03.284Z", + "contributors": [ + "Jib", + "AlePerez92", + "fscholz", + "cm_rocanroll", + "franverona", + "py_crash", + "maedca" + ] + }, + "Web/API/Navigator/registerProtocolHandler": { + "modified": "2019-03-23T23:53:04.318Z", + "contributors": [ + "fscholz", + "khalid32", + "Nukeador", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers": { + "modified": "2019-03-23T22:06:43.969Z", + "contributors": [ + "chrisdavidmills", + "AngelFQC" + ] + }, + "Web/API/Navigator/vibrate": { + "modified": "2019-03-23T23:32:23.651Z", + "contributors": [ + "fscholz", + "jsx", + "mmednik" + ] + }, + "Web/API/NavigatorConcurrentHardware": { + "modified": "2020-10-15T22:25:58.692Z" + }, + "Web/API/NavigatorConcurrentHardware/hardwareConcurrency": { + "modified": "2020-10-15T22:26:06.271Z", + "contributors": [ + "Gnuxdar" + ] + }, + "Web/API/NavigatorGeolocation": { + "modified": "2019-03-23T23:01:31.642Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/NavigatorGeolocation/geolocation": { + "modified": "2019-03-23T23:31:55.176Z", + "contributors": [ + "jabarrioss", + "AlePerez92", + "fscholz", + "jsx", + "lfentanes" + ] + }, + "Web/API/NavigatorLanguage": { + "modified": "2019-03-23T22:46:20.556Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/NavigatorLanguage/language": { + "modified": "2019-03-23T22:46:24.341Z", + "contributors": [ + "cesiztel", + "jesus9ias" + ] + }, + "Web/API/NavigatorOnLine": { + "modified": "2019-03-23T22:07:33.991Z", + "contributors": [ + "abbycar" + ] + }, + "Web/API/NavigatorOnLine/Eventos_online_y_offline": { + "modified": "2019-01-16T15:46:38.836Z", + "contributors": [ + "chrisdavidmills", + "Mgjbot", + "Nukeador", + "RickieesES", + "Unixcoder" + ] + }, + "Web/API/NavigatorOnLine/onLine": { + "modified": "2019-03-23T22:07:34.200Z", + "contributors": [ + "MarkelCuesta" + ] + }, + "Web/API/Network_Information_API": { + "modified": "2020-11-17T00:17:37.419Z", + "contributors": [ + "tobiasalbirosa" + ] + }, + "Web/API/Node": { + "modified": "2019-05-06T01:19:55.862Z", + "contributors": [ + "robinHurtado", + "fscholz" + ] + }, + "Web/API/Node/appendChild": { + "modified": "2020-10-15T21:22:57.221Z", + "contributors": [ + "AlePerez92", + "IsaacAaron", + "fscholz", + "jsx", + "AzulCz" + ] + }, + "Web/API/Node/childNodes": { + "modified": "2020-10-15T22:02:15.961Z", + "contributors": [ + "AlePerez92", + "presercomp" + ] + }, + "Web/API/Node/cloneNode": { + "modified": "2020-10-15T21:49:33.676Z", + "contributors": [ + "AlePerez92", + "jyorch2", + "fewrare" + ] + }, + "Web/API/Node/contains": { + "modified": "2020-10-15T22:00:52.714Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Node/elementoPadre": { + "modified": "2020-10-15T21:55:42.512Z", + "contributors": [ + "AlePerez92", + "LRojas", + "tureey" + ] + }, + "Web/API/Node/hasChildNodes": { + "modified": "2020-10-15T22:08:41.278Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Node/insertarAntes": { + "modified": "2020-10-15T21:36:49.326Z", + "contributors": [ + "AlePerez92", + "danvao", + "Sedoy", + "carpasse" + ] + }, + "Web/API/Node/isSameNode": { + "modified": "2019-03-23T22:49:05.364Z", + "contributors": [ + "JordiCruells" + ] + }, + "Web/API/Node/lastChild": { + "modified": "2020-10-15T21:55:48.810Z", + "contributors": [ + "fscholz", + "AlePerez92", + "tureey" + ] + }, + "Web/API/Node/namespaceURI": { + "modified": "2019-03-23T22:08:52.990Z", + "contributors": [ + "tureey" + ] + }, + "Web/API/Node/nextSibling": { + "modified": "2020-10-15T21:27:47.909Z", + "contributors": [ + "wbamberg", + "AlePerez92", + "fscholz", + "Alexis88" + ] + }, + "Web/API/Node/nodeName": { + "modified": "2019-03-23T23:50:40.382Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "Hasilt", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Node/nodeType": { + "modified": "2019-03-23T22:58:04.685Z", + "contributors": [ + "minrock" + ] + }, + "Web/API/Node/nodeValue": { + "modified": "2019-08-30T02:00:09.176Z", + "contributors": [ + "Jamel-Seyek", + "tureey" + ] + }, + "Web/API/Node/nodoPrincipal": { + "modified": "2019-03-23T22:08:57.260Z", + "contributors": [ + "tureey" + ] + }, + "Web/API/Node/ownerDocument": { + "modified": "2019-10-09T11:24:36.349Z", + "contributors": [ + "ogallagher", + "tureey" + ] + }, + "Web/API/Node/parentNode": { + "modified": "2019-03-23T22:08:56.619Z", + "contributors": [ + "IsmaOrdas", + "tureey" + ] + }, + "Web/API/Node/previousSibling": { + "modified": "2020-10-15T22:05:25.453Z", + "contributors": [ + "wbamberg", + "AlePerez92" + ] + }, + "Web/API/Node/removeChild": { + "modified": "2019-03-23T22:51:59.032Z", + "contributors": [ + "IsaacAaron", + "jcmunioz" + ] + }, + "Web/API/Node/replaceChild": { + "modified": "2019-03-23T22:46:30.428Z", + "contributors": [ + "pakitometal" + ] + }, + "Web/API/Node/textContent": { + "modified": "2020-10-15T21:21:16.429Z", + "contributors": [ + "yohanolmedo", + "AlePerez92", + "IsaacAaron", + "fscholz", + "another_sam" + ] + }, + "Web/API/NodeList": { + "modified": "2020-10-15T22:00:48.268Z", + "contributors": [ + "AlePerez92", + "padrecedano" + ] + }, + "Web/API/NodeList/forEach": { + "modified": "2020-10-15T22:08:20.485Z", + "contributors": [ + "SphinxKnight", + "InfaSysKey", + "jesumv" + ] + }, + "Web/API/NonDocumentTypeChildNode": { + "modified": "2019-03-23T22:32:46.517Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/NonDocumentTypeChildNode/nextElementSibling": { + "modified": "2020-10-15T21:46:25.502Z", + "contributors": [ + "AlePerez92", + "Grijander81" + ] + }, + "Web/API/NonDocumentTypeChildNode/previousElementSibling": { + "modified": "2019-03-23T22:32:40.718Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Notifications_API": { + "modified": "2019-03-23T22:07:39.198Z", + "contributors": [ + "david_ross" + ] + }, + "Web/API/Notifications_API/Usando_la_API_de_Notificaciones": { + "modified": "2020-04-11T06:35:05.696Z", + "contributors": [ + "davidelx", + "IXTRUnai" + ] + }, + "Web/API/ParentNode": { + "modified": "2019-03-23T22:43:20.773Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/API/ParentNode/append": { + "modified": "2020-10-15T22:24:28.452Z", + "contributors": [ + "Kyuoraku" + ] + }, + "Web/API/ParentNode/childElementCount": { + "modified": "2019-03-23T22:43:24.721Z", + "contributors": [ + "joselix" + ] + }, + "Web/API/ParentNode/children": { + "modified": "2019-03-23T22:32:44.383Z", + "contributors": [ + "AlePerez92", + "aeroxmotion", + "Grijander81" + ] + }, + "Web/API/ParentNode/firstElementChild": { + "modified": "2019-03-23T22:32:44.779Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/ParentNode/lastElementChild": { + "modified": "2019-03-23T22:32:39.974Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Payment_Request_API": { + "modified": "2020-10-15T22:33:12.666Z", + "contributors": [ + "cjguajardo" + ] + }, + "Web/API/Performance": { + "modified": "2020-10-15T21:53:40.885Z", + "contributors": [ + "wachunei", + "juanarbol", + "fscholz", + "jpmedley" + ] + }, + "Web/API/Performance/clearMarks": { + "modified": "2020-10-15T22:22:33.810Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/API/Performance/clearMeasures": { + "modified": "2020-10-15T22:22:45.763Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/API/Performance/memory": { + "modified": "2020-10-15T22:22:31.707Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/API/Performance/navigation": { + "modified": "2020-10-15T22:22:32.714Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/API/Performance/now": { + "modified": "2019-03-23T22:13:15.954Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/Performance/timeOrigin": { + "modified": "2020-10-15T22:22:32.944Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/API/Performance/timing": { + "modified": "2020-10-15T22:22:30.788Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/API/PerformanceNavigation": { + "modified": "2020-10-15T22:22:46.223Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/API/PositionOptions": { + "modified": "2019-03-23T23:16:28.831Z", + "contributors": [ + "fscholz", + "LeoHirsch", + "lupomontero" + ] + }, + "Web/API/PushManager": { + "modified": "2019-03-23T22:40:00.540Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/API/PushManager/permissionState": { + "modified": "2019-03-23T22:39:59.979Z", + "contributors": [ + "maedca" + ] + }, + "Web/API/PushManager/supportedContentEncodings": { + "modified": "2020-10-15T22:03:55.545Z", + "contributors": [ + "Erto" + ] + }, + "Web/API/Push_API": { + "modified": "2019-03-23T22:44:48.332Z", + "contributors": [ + "gimco", + "omar10594", + "Erto", + "FMRonin", + "YulianD", + "mautematico" + ] + }, + "Web/API/Push_API/Using_the_Push_API": { + "modified": "2019-03-23T22:19:10.252Z", + "contributors": [ + "YulianD" + ] + }, + "Web/API/RTCPeerConnection": { + "modified": "2019-03-18T21:43:02.717Z", + "contributors": [ + "jgalvezsoax", + "maomuriel" + ] + }, + "Web/API/RTCPeerConnection/canTrickleIceCandidates": { + "modified": "2020-10-15T22:33:02.442Z", + "contributors": [ + "JaderLuisDiaz" + ] + }, + "Web/API/RTCRtpReceiver": { + "modified": "2020-10-15T22:27:25.068Z", + "contributors": [ + "qwerty726" + ] + }, + "Web/API/RandomSource": { + "modified": "2019-03-23T22:25:15.548Z", + "contributors": [ + "Jeremie" + ] + }, + "Web/API/RandomSource/Obtenervaloresaleatorios": { + "modified": "2020-10-15T21:49:57.084Z", + "contributors": [ + "hecmonter", + "joseluisq", + "julianmoji" + ] + }, + "Web/API/Range": { + "modified": "2019-03-23T23:47:18.258Z", + "contributors": [ + "wbamberg", + "maiky", + "fscholz", + "Markens", + "DR", + "Nathymig" + ] + }, + "Web/API/Range/collapsed": { + "modified": "2019-03-23T23:47:00.550Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Range/commonAncestorContainer": { + "modified": "2019-03-23T23:53:54.038Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Range/getClientRects": { + "modified": "2019-03-23T22:10:01.541Z", + "contributors": [ + "edhzsz" + ] + }, + "Web/API/Range/intersectsNode": { + "modified": "2019-03-23T23:53:59.214Z", + "contributors": [ + "fscholz", + "khalid32", + "Mgjbot", + "DR" + ] + }, + "Web/API/Range/setStart": { + "modified": "2019-03-23T22:13:01.685Z", + "contributors": [ + "Vincetroid" + ] + }, + "Web/API/Request": { + "modified": "2020-10-15T22:02:13.323Z", + "contributors": [ + "DiegoFT", + "fscholz" + ] + }, + "Web/API/Request/headers": { + "modified": "2020-10-15T22:02:12.572Z", + "contributors": [ + "carojaspaz" + ] + }, + "Web/API/Response": { + "modified": "2020-11-13T19:18:52.099Z", + "contributors": [ + "chux", + "kant", + "ignatius73", + "crrlos" + ] + }, + "Web/API/Response/Response": { + "modified": "2020-10-15T22:15:43.532Z", + "contributors": [ + "AzazelN28" + ] + }, + "Web/API/Response/ok": { + "modified": "2020-10-15T22:22:31.771Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/API/Response/status": { + "modified": "2020-10-15T22:24:09.432Z", + "contributors": [ + "FDSoil" + ] + }, + "Web/API/SVGPoint": { + "modified": "2019-03-23T23:03:09.725Z", + "contributors": [ + "fscholz", + "hasAngel" + ] + }, + "Web/API/Screen": { + "modified": "2019-10-10T16:45:22.609Z", + "contributors": [ + "jazdian", + "Grijander81" + ] + }, + "Web/API/Selection": { + "modified": "2019-03-23T23:54:01.018Z", + "contributors": [ + "CxRxExO", + "fscholz", + "DR", + "Juandavaus", + "Kroatan", + "Mgjbot", + "LaRy", + "Nathymig" + ] + }, + "Web/API/Selection/addRange": { + "modified": "2019-03-23T23:46:53.374Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/anchorNode": { + "modified": "2019-03-23T23:46:46.912Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/anchorOffset": { + "modified": "2019-03-23T23:46:55.279Z", + "contributors": [ + "fscholz", + "DR", + "Mgjbot" + ] + }, + "Web/API/Selection/collapse": { + "modified": "2019-03-23T23:46:57.541Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/collapseToEnd": { + "modified": "2019-03-23T23:47:01.187Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/collapseToStart": { + "modified": "2019-03-23T23:46:59.744Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/containsNode": { + "modified": "2019-03-23T23:46:51.997Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/deleteFromDocument": { + "modified": "2019-03-23T23:46:47.857Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/extend": { + "modified": "2019-03-23T23:46:54.795Z", + "contributors": [ + "fscholz", + "DR", + "Mgjbot" + ] + }, + "Web/API/Selection/focusNode": { + "modified": "2019-03-23T23:46:46.574Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Selection/focusOffset": { + "modified": "2019-03-23T23:46:54.969Z", + "contributors": [ + "fscholz", + "DR", + "Mgjbot" + ] + }, + "Web/API/Selection/getRangeAt": { + "modified": "2019-03-23T23:46:55.195Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Selection/isCollapsed": { + "modified": "2019-03-23T23:46:52.080Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Selection/rangeCount": { + "modified": "2019-03-23T23:46:50.030Z", + "contributors": [ + "fscholz", + "DR" + ] + }, + "Web/API/Selection/removeAllRanges": { + "modified": "2019-03-23T23:46:54.883Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/removeRange": { + "modified": "2019-03-23T23:46:55.069Z", + "contributors": [ + "fscholz", + "DR", + "Mgjbot" + ] + }, + "Web/API/Selection/selectAllChildren": { + "modified": "2019-03-23T23:46:50.124Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Selection/toString": { + "modified": "2019-03-23T23:47:28.897Z", + "contributors": [ + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/ServiceWorkerContainer": { + "modified": "2020-10-15T22:03:12.673Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/ServiceWorkerContainer/register": { + "modified": "2020-10-15T22:03:11.889Z", + "contributors": [ + "LuisOlive", + "marc2684" + ] + }, + "Web/API/ServiceWorkerRegistration": { + "modified": "2020-10-15T22:05:45.607Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/API/Service_Worker_API": { + "modified": "2019-03-23T22:09:38.478Z", + "contributors": [ + "Fedapamo", + "andrpueb", + "ibanlopez", + "eltioico", + "chrisdavidmills" + ] + }, + "Web/API/Service_Worker_API/Using_Service_Workers": { + "modified": "2019-03-23T22:09:43.848Z", + "contributors": [ + "JasonGlez", + "Vergara", + "GabrielSchlomo", + "Anibalismo", + "darioperez" + ] + }, + "Web/API/Storage": { + "modified": "2019-03-23T22:37:04.835Z", + "contributors": [ + "puma", + "Sebastianz" + ] + }, + "Web/API/Storage/LocalStorage": { + "modified": "2020-07-20T09:10:56.525Z", + "contributors": [ + "LucasMaciasAtala", + "moniqaveiga", + "Andresrodart", + "lsphantom" + ] + }, + "Web/API/Storage/clear": { + "modified": "2019-03-23T22:26:00.358Z", + "contributors": [ + "edwarfuentes97", + "theguitxo" + ] + }, + "Web/API/Storage/getItem": { + "modified": "2019-03-23T22:33:04.286Z", + "contributors": [ + "devconcept", + "aminguez" + ] + }, + "Web/API/Storage/length": { + "modified": "2019-03-23T22:25:49.492Z", + "contributors": [ + "Guitxo" + ] + }, + "Web/API/Storage/removeItem": { + "modified": "2020-06-16T13:11:43.937Z", + "contributors": [ + "jorgeCaster", + "aminguez" + ] + }, + "Web/API/Storage/setItem": { + "modified": "2019-03-23T22:37:01.770Z", + "contributors": [ + "aminguez", + "spideep" + ] + }, + "Web/API/StorageManager": { + "modified": "2020-10-15T22:18:18.423Z" + }, + "Web/API/StorageManager/estimate": { + "modified": "2020-10-15T22:18:17.461Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/StorageManager/persist": { + "modified": "2020-10-15T22:18:17.848Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/StorageManager/persisted": { + "modified": "2020-10-15T22:18:17.733Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/API/StyleSheet": { + "modified": "2019-03-18T21:12:49.649Z", + "contributors": [ + "diegovinie", + "SphinxKnight", + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/StyleSheet/disabled": { + "modified": "2019-03-23T23:58:08.612Z", + "contributors": [ + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/StyleSheet/href": { + "modified": "2019-03-23T23:58:07.932Z", + "contributors": [ + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/StyleSheet/media": { + "modified": "2019-03-23T23:58:05.417Z", + "contributors": [ + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/StyleSheet/ownerNode": { + "modified": "2019-03-23T23:58:23.239Z", + "contributors": [ + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/StyleSheet/parentStyleSheet": { + "modified": "2019-03-23T23:58:09.687Z", + "contributors": [ + "fscholz", + "khalid32", + "teoli", + "HenryGR" + ] + }, + "Web/API/StyleSheet/title": { + "modified": "2019-03-23T23:58:12.135Z", + "contributors": [ + "fscholz", + "xuancanh", + "teoli", + "HenryGR" + ] + }, + "Web/API/StyleSheet/type": { + "modified": "2019-03-23T23:58:05.312Z", + "contributors": [ + "fscholz", + "jsx", + "teoli", + "HenryGR" + ] + }, + "Web/API/SubtleCrypto": { + "modified": "2020-10-15T22:27:14.356Z", + "contributors": [ + "joseluisq" + ] + }, + "Web/API/SubtleCrypto/digest": { + "modified": "2020-10-15T22:27:30.018Z", + "contributors": [ + "joseluisq" + ] + }, + "Web/API/SubtleCrypto/encrypt": { + "modified": "2020-10-15T22:27:29.781Z", + "contributors": [ + "joseluisq" + ] + }, + "Web/API/TextTrack": { + "modified": "2020-10-15T22:33:08.345Z", + "contributors": [ + "joeyparrish" + ] + }, + "Web/API/TextTrack/cuechange_event": { + "modified": "2020-10-15T22:33:09.063Z", + "contributors": [ + "Pablo-No" + ] + }, + "Web/API/TouchEvent": { + "modified": "2019-03-23T22:32:05.809Z", + "contributors": [ + "ulisestrujillo", + "AlePerez92" + ] + }, + "Web/API/UIEvent": { + "modified": "2019-03-23T23:01:34.700Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/UIEvent/pageX": { + "modified": "2019-03-23T23:12:56.756Z", + "contributors": [ + "fscholz", + "khalid32", + "Nathymig", + "Julgon" + ] + }, + "Web/API/URL": { + "modified": "2019-03-23T22:19:12.735Z", + "contributors": [ + "zayle", + "wstaelens" + ] + }, + "Web/API/URL/Host": { + "modified": "2020-10-15T22:28:58.726Z", + "contributors": [ + "diegovlopez587" + ] + }, + "Web/API/URL/URL": { + "modified": "2020-10-15T22:21:36.171Z", + "contributors": [ + "roberth_dev" + ] + }, + "Web/API/URL/createObjectURL": { + "modified": "2019-03-23T22:19:19.805Z", + "contributors": [ + "OrlandoDeJesusCuxinYama", + "isafrus5", + "AzazelN28" + ] + }, + "Web/API/URL/port": { + "modified": "2020-10-15T22:21:35.297Z", + "contributors": [ + "roberth_dev" + ] + }, + "Web/API/URLSearchParams": { + "modified": "2019-03-23T22:08:25.598Z", + "contributors": [ + "aliveghost04" + ] + }, + "Web/API/URLSearchParams/URLSearchParams": { + "modified": "2020-10-15T22:28:05.327Z", + "contributors": [ + "daniel.duarte" + ] + }, + "Web/API/WebGL_API": { + "modified": "2019-03-24T00:07:50.182Z", + "contributors": [ + "fscholz", + "teoli", + "inma_610" + ] + }, + "Web/API/WebGL_API/Tutorial": { + "modified": "2019-03-23T22:48:50.519Z", + "contributors": [ + "SphinxKnight", + "lrlimon", + "fscholz" + ] + }, + "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context": { + "modified": "2019-03-18T21:16:52.110Z", + "contributors": [ + "Nekete", + "Erik12Ixec", + "WHK102", + "COBRILL4" + ] + }, + "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL": { + "modified": "2019-03-23T23:20:38.388Z", + "contributors": [ + "fscholz", + "teoli", + "luziiann" + ] + }, + "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL": { + "modified": "2019-03-23T22:34:48.400Z", + "contributors": [ + "pixelements" + ] + }, + "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL": { + "modified": "2019-03-23T23:06:04.656Z", + "contributors": [ + "fcanellas", + "Pablo_Bangueses", + "CarlosLinares", + "Inheritech", + "CandelarioGomez", + "fscholz", + "joeljose", + "Jorge0309" + ] + }, + "Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL": { + "modified": "2019-03-23T22:37:32.127Z", + "contributors": [ + "asarch", + "Giovan" + ] + }, + "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL": { + "modified": "2020-05-29T05:02:06.384Z", + "contributors": [ + "jmlocke1", + "Giovan" + ] + }, + "Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL": { + "modified": "2019-03-23T22:15:44.225Z", + "contributors": [ + "BubuAnabelas", + "marce_1994" + ] + }, + "Web/API/WebRTC_API": { + "modified": "2020-05-01T03:28:58.714Z", + "contributors": [ + "erito73", + "miguelsp" + ] + }, + "Web/API/WebRTC_API/Protocols": { + "modified": "2020-05-01T03:41:11.993Z", + "contributors": [ + "erito73", + "ValeriaRamos" + ] + }, + "Web/API/WebSocket": { + "modified": "2019-03-18T20:53:48.099Z", + "contributors": [ + "benja90", + "spachecojimenez", + "aranondo", + "dpineiden" + ] + }, + "Web/API/WebSocket/close_event": { + "modified": "2019-03-23T21:59:50.486Z", + "contributors": [ + "irenesmith", + "ExE-Boss", + "FLAVIOALFA" + ] + }, + "Web/API/WebSocket/onerror": { + "modified": "2020-10-15T22:13:54.439Z", + "contributors": [ + "Bumxu" + ] + }, + "Web/API/WebSockets_API": { + "modified": "2019-05-21T02:54:41.622Z", + "contributors": [ + "SphinxKnight", + "tpb", + "petisocarambanal", + "CesarBustios", + "mserracaldentey" + ] + }, + "Web/API/WebSockets_API/Escribiendo_servidor_WebSocket": { + "modified": "2019-05-21T02:54:42.354Z", + "contributors": [ + "SphinxKnight", + "manueljrs", + "Yantup", + "jjmontes" + ] + }, + "Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket": { + "modified": "2019-06-21T20:55:28.443Z", + "contributors": [ + "alesalva", + "SphinxKnight", + "juanmanuelramallo", + "8manuel", + "llekn", + "jjmontes", + "augus1990" + ] + }, + "Web/API/WebSockets_API/Writing_WebSocket_client_applications": { + "modified": "2019-05-21T02:54:42.026Z", + "contributors": [ + "SphinxKnight", + "neopablix", + "jevvilla", + "jvilla8a", + "AzazelN28", + "Unbrained", + "gabryk", + "MauroEldritch", + "frankzen" + ] + }, + "Web/API/WebVR_API": { + "modified": "2019-03-23T22:07:07.755Z", + "contributors": [ + "Alphaeolo", + "chrisdavidmills" + ] + }, + "Web/API/WebVR_API/Using_the_WebVR_API": { + "modified": "2020-10-12T08:06:57.683Z", + "contributors": [ + "SphinxKnight", + "MarioA19", + "geryescalier", + "karlalhdz" + ] + }, + "Web/API/WebVTT_API": { + "modified": "2020-10-15T22:33:07.538Z", + "contributors": [ + "Pablo-No" + ] + }, + "Web/API/Web_Crypto_API": { + "modified": "2020-02-12T20:20:09.829Z", + "contributors": [ + "joseluisq", + "anfuca", + "haxdai" + ] + }, + "Web/API/Web_Crypto_API/Checking_authenticity_with_password": { + "modified": "2019-03-23T22:10:43.026Z", + "contributors": [ + "haxdai" + ] + }, + "Web/API/Web_Speech_API": { + "modified": "2020-10-15T22:29:46.339Z", + "contributors": [ + "dianarryanti707" + ] + }, + "Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API": { + "modified": "2020-05-10T18:32:28.954Z", + "contributors": [ + "mcarou" + ] + }, + "Web/API/Web_Workers_API": { + "modified": "2020-04-14T23:36:47.242Z", + "contributors": [ + "krebking", + "thepianist2", + "jsanmor" + ] + }, + "Web/API/WheelEvent": { + "modified": "2019-03-23T22:40:53.687Z", + "contributors": [ + "StripTM" + ] + }, + "Web/API/WheelEvent/deltaY": { + "modified": "2019-03-23T22:26:41.848Z", + "contributors": [ + "Thargelion" + ] + }, + "Web/API/Window": { + "modified": "2020-08-14T20:26:23.156Z", + "contributors": [ + "Enesimus", + "Michelangeur", + "antoiba86", + "jjoselon", + "vggallego", + "fscholz", + "Crash", + "Monty", + "Markens", + "DR", + "Nathymig", + "Mgjbot" + ] + }, + "Web/API/Window/URL": { + "modified": "2019-03-23T22:38:17.598Z", + "contributors": [ + "israelfl" + ] + }, + "Web/API/Window/alert": { + "modified": "2019-03-23T22:27:29.008Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/API/Window/applicationCache": { + "modified": "2019-03-23T23:52:56.666Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "AshfaqHossain", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Window/cancelAnimationFrame": { + "modified": "2019-03-23T22:30:46.211Z", + "contributors": [ + "khrizenriquez" + ] + }, + "Web/API/Window/close": { + "modified": "2020-10-15T21:37:07.614Z", + "contributors": [ + "SphinxKnight", + "dgrizzla", + "Siro_Diaz" + ] + }, + "Web/API/Window/closed": { + "modified": "2019-03-18T20:59:11.710Z", + "contributors": [ + "SphinxKnight", + "developingo" + ] + }, + "Web/API/Window/confirm": { + "modified": "2019-03-23T22:45:47.266Z", + "contributors": [ + "julian3xl" + ] + }, + "Web/API/Window/crypto": { + "modified": "2020-02-12T20:26:38.795Z", + "contributors": [ + "joseluisq", + "AlePerez92", + "victorjavierss" + ] + }, + "Web/API/Window/devicePixelRatio": { + "modified": "2019-03-23T22:33:20.853Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Window/dialogArguments": { + "modified": "2019-03-23T22:33:21.065Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Window/document": { + "modified": "2019-03-18T21:17:09.045Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Window/frameElement": { + "modified": "2019-03-23T22:33:19.039Z", + "contributors": [ + "edmon1024", + "Grijander81" + ] + }, + "Web/API/Window/fullScreen": { + "modified": "2019-03-23T23:50:19.968Z", + "contributors": [ + "SphinxKnight", + "fscholz", + "khalid32", + "HenryGR", + "Mgjbot" + ] + }, + "Web/API/Window/getComputedStyle": { + "modified": "2019-03-23T23:58:07.622Z", + "contributors": [ + "fscholz", + "jsx", + "teoli", + "HenryGR" + ] + }, + "Web/API/Window/getSelection": { + "modified": "2019-09-18T11:51:48.070Z", + "contributors": [ + "AlePerez92", + "LittleSanti", + "fscholz", + "Mgjbot", + "DR" + ] + }, + "Web/API/Window/hashchange_event": { + "modified": "2019-04-01T11:56:33.015Z", + "contributors": [ + "fscholz", + "ExE-Boss", + "jorgerenteral" + ] + }, + "Web/API/Window/history": { + "modified": "2020-10-15T21:43:45.922Z", + "contributors": [ + "SphinxKnight", + "khrizenriquez" + ] + }, + "Web/API/Window/innerHeight": { + "modified": "2020-07-23T18:50:37.998Z", + "contributors": [ + "dongerardor", + "alfredoWs" + ] + }, + "Web/API/Window/localStorage": { + "modified": "2019-06-04T06:54:12.078Z", + "contributors": [ + "taumartin", + "nazarioa", + "McSonk", + "faliure", + "tinchosrok", + "DragShot", + "ianaya89" + ] + }, + "Web/API/Window/location": { + "modified": "2019-03-23T22:52:04.798Z", + "contributors": [ + "khrizenriquez", + "MaFranceschi" + ] + }, + "Web/API/Window/locationbar": { + "modified": "2019-03-23T22:16:35.650Z", + "contributors": [ + "ivannieto" + ] + }, + "Web/API/Window/matchMedia": { + "modified": "2020-10-15T21:54:30.059Z", + "contributors": [ + "AlePerez92", + "tipoqueno", + "tavo379" + ] + }, + "Web/API/Window/menubar": { + "modified": "2019-03-23T22:33:13.331Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Window/moveBy": { + "modified": "2020-10-15T22:08:26.636Z", + "contributors": [ + "pedrofmb" + ] + }, + "Web/API/Window/navigator": { + "modified": "2019-03-23T23:20:37.914Z", + "contributors": [ + "fscholz", + "khalid32", + "tpb" + ] + }, + "Web/API/Window/offline_event": { + "modified": "2019-04-30T14:21:22.454Z", + "contributors": [ + "wbamberg", + "irenesmith", + "Daniel-VQ" + ] + }, + "Web/API/Window/open": { + "modified": "2020-04-13T14:31:02.220Z", + "contributors": [ + "fj-ramirez", + "BubuAnabelas", + "jccharlie90", + "SphinxKnight", + "VictorAbdon", + "jjoselon" + ] + }, + "Web/API/Window/opener": { + "modified": "2019-03-23T22:46:00.877Z", + "contributors": [ + "carlosmunozrodriguez", + "f3rbarraza" + ] + }, + "Web/API/Window/outerHeight": { + "modified": "2019-03-18T21:15:44.722Z", + "contributors": [ + "rlopezAyala", + "GianlucaBobbio" + ] + }, + "Web/API/Window/outerWidth": { + "modified": "2019-03-23T22:04:23.293Z", + "contributors": [ + "shadairafael" + ] + }, + "Web/API/Window/print": { + "modified": "2019-07-11T23:43:54.339Z", + "contributors": [ + "EstebanDalelR", + "ErikMj69" + ] + }, + "Web/API/Window/prompt": { + "modified": "2019-03-23T22:20:58.413Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/API/Window/requestAnimationFrame": { + "modified": "2020-07-05T08:38:54.640Z", + "contributors": [ + "AlePerez92", + "mauriciabad", + "fortil", + "andrpueb", + "fscholz", + "jbalsas" + ] + }, + "Web/API/Window/requestIdleCallback": { + "modified": "2020-12-05T00:33:07.625Z", + "contributors": [ + "gnunezr", + "jsolana" + ] + }, + "Web/API/Window/scroll": { + "modified": "2020-10-15T21:54:58.717Z", + "contributors": [ + "AlePerez92", + "patoezequiel" + ] + }, + "Web/API/Window/scrollBy": { + "modified": "2019-03-23T22:40:05.334Z", + "contributors": [ + "plaso", + "Bcd" + ] + }, + "Web/API/Window/scrollTo": { + "modified": "2019-03-23T22:05:41.259Z", + "contributors": [ + "gyroscopico" + ] + }, + "Web/API/Window/scrollX": { + "modified": "2019-03-18T21:15:11.745Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/API/Window/scrollY": { + "modified": "2019-03-23T22:53:30.651Z", + "contributors": [ + "MaFranceschi" + ] + }, + "Web/API/Window/sessionStorage": { + "modified": "2019-03-23T22:57:50.655Z", + "contributors": [ + "svera", + "pedromagnus", + "develasquez" + ] + }, + "Web/API/Window/showModalDialog": { + "modified": "2019-03-18T20:58:55.311Z", + "contributors": [ + "SphinxKnight", + "BubuAnabelas", + "Grijander81" + ] + }, + "Web/API/Window/sidebar": { + "modified": "2019-03-23T22:02:56.395Z", + "contributors": [ + "IsaacSchemm" + ] + }, + "Web/API/Window/statusbar": { + "modified": "2019-03-23T22:14:36.556Z", + "contributors": [ + "UshioSan" + ] + }, + "Web/API/WindowBase64": { + "modified": "2019-03-23T23:03:15.466Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/WindowBase64/Base64_codificando_y_decodificando": { + "modified": "2020-10-08T22:36:13.676Z", + "contributors": [ + "kevinandresviedmanlopez", + "carloscasalar", + "Arukantara", + "sathyasanles" + ] + }, + "Web/API/WindowBase64/atob": { + "modified": "2019-03-23T23:03:12.715Z", + "contributors": [ + "fscholz", + "sathyasanles" + ] + }, + "Web/API/WindowEventHandlers": { + "modified": "2019-03-23T23:01:29.892Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/WindowEventHandlers/onbeforeunload": { + "modified": "2019-03-23T23:22:06.132Z", + "contributors": [ + "fscholz", + "AshfaqHossain", + "jota1410" + ] + }, + "Web/API/WindowEventHandlers/onhashchange": { + "modified": "2019-03-23T22:49:36.790Z", + "contributors": [ + "AlePerez92", + "daesnorey" + ] + }, + "Web/API/WindowEventHandlers/onpopstate": { + "modified": "2020-10-15T22:19:35.746Z", + "contributors": [ + "borxdev", + "jccuevas" + ] + }, + "Web/API/WindowOrWorkerGlobalScope": { + "modified": "2019-03-23T22:16:40.400Z", + "contributors": [ + "ivannieto", + "chrisdavidmills" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/caches": { + "modified": "2019-03-23T22:16:45.016Z", + "contributors": [ + "ivannieto" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/createImageBitmap": { + "modified": "2020-10-15T22:14:17.553Z", + "contributors": [ + "Bumxu" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/fetch": { + "modified": "2020-10-15T22:01:57.457Z", + "contributors": [ + "fscholz", + "jagomf" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/indexedDB": { + "modified": "2019-03-23T22:16:36.537Z", + "contributors": [ + "ivannieto" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/isSecureContext": { + "modified": "2019-03-23T22:16:45.834Z", + "contributors": [ + "ivannieto" + ] + }, + "Web/API/WindowTimers": { + "modified": "2019-03-23T23:01:30.065Z", + "contributors": [ + "fscholz" + ] + }, + "Web/API/WindowTimers/clearInterval": { + "modified": "2019-03-23T22:56:16.485Z", + "contributors": [ + "Guitxo" + ] + }, + "Web/API/WindowTimers/clearTimeout": { + "modified": "2019-06-18T10:20:27.972Z", + "contributors": [ + "AlePerez92", + "fscholz", + "basemnassar11", + "VictorArias" + ] + }, + "Web/API/WindowTimers/setInterval": { + "modified": "2020-08-24T18:02:23.092Z", + "contributors": [ + "mastertrooper", + "Makinita", + "Klius", + "claudionebbia" + ] + }, + "Web/API/WindowTimers/setTimeout": { + "modified": "2019-03-23T23:17:29.378Z", + "contributors": [ + "BubuAnabelas", + "vltamara", + "nauj27", + "fscholz", + "AshfaqHossain", + "VictorArias" + ] + }, + "Web/API/Worker": { + "modified": "2019-03-23T22:48:01.797Z", + "contributors": [ + "benjroy" + ] + }, + "Web/API/Worker/postMessage": { + "modified": "2020-04-23T06:46:10.302Z", + "contributors": [ + "aguilahorus", + "cristyansv", + "mar777" + ] + }, + "Web/API/Worker/terminate": { + "modified": "2019-03-23T22:19:14.265Z", + "contributors": [ + "AzazelN28" + ] + }, + "Web/API/XMLHttpRequest": { + "modified": "2019-05-02T19:52:03.482Z", + "contributors": [ + "wbamberg", + "Juvenal-yescas", + "ojgarciab", + "Sheppy", + "dgrcode", + "HadesDX", + "StripTM", + "mitogh", + "deimidis", + "Mgjbot", + "Jorolo" + ] + }, + "Web/API/XMLHttpRequest/FormData": { + "modified": "2020-10-15T21:22:58.694Z", + "contributors": [ + "AlePerez92", + "vladimirbat", + "alvaromorenomorales", + "ojgarciab", + "Sheppy", + "AngelFQC", + "wilo", + "marco_mucino" + ] + }, + "Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests": { + "modified": "2019-03-23T22:05:30.902Z", + "contributors": [ + "Juvenal-yescas" + ] + }, + "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { + "modified": "2020-03-17T04:09:47.273Z", + "contributors": [ + "jccuevas", + "camsa", + "david_ru", + "cesaruve", + "Sheppy", + "Sebastianz", + "iiegor", + "javierdp", + "bardackx", + "teoli", + "inma_610" + ] + }, + "Web/API/XMLHttpRequest/abort": { + "modified": "2019-03-23T22:12:16.683Z", + "contributors": [ + "Sheppy", + "todomagichere" + ] + }, + "Web/API/XMLHttpRequest/onreadystatechange": { + "modified": "2019-03-23T22:20:14.868Z", + "contributors": [ + "Sheppy", + "theUncanny" + ] + }, + "Web/API/XMLHttpRequest/responseText": { + "modified": "2019-03-23T22:09:05.708Z", + "contributors": [ + "midnight25" + ] + }, + "Web/API/XMLHttpRequest/timeout": { + "modified": "2020-10-15T22:26:49.508Z", + "contributors": [ + "mmednik" + ] + }, + "Web/API/XMLHttpRequestEventTarget": { + "modified": "2020-10-15T22:26:08.879Z" + }, + "Web/API/XMLHttpRequestEventTarget/onload": { + "modified": "2020-10-15T22:26:03.172Z", + "contributors": [ + "Akafadam" + ] + }, + "Web/API/console/assert": { + "modified": "2019-03-23T22:47:53.587Z", + "contributors": [ + "Takumakun", + "AlePerez92", + "danycoro" + ] + }, + "Web/API/notification": { + "modified": "2019-06-28T05:54:12.854Z", + "contributors": [ + "paumoreno", + "hhcarmenate", + "RockLee-BC", + "francotalarico93", + "frossi933", + "Irvandoval", + "LuyisiMiger", + "fscholz", + "elfoxero" + ] + }, + "Web/API/notification/body": { + "modified": "2019-03-23T22:59:34.974Z", + "contributors": [ + "joxhker" + ] + }, + "Web/API/notification/dir": { + "modified": "2019-03-23T22:59:36.852Z", + "contributors": [ + "joxhker" + ] + }, + "Web/API/notification/icon": { + "modified": "2019-03-23T22:59:32.492Z", + "contributors": [ + "joxhker" + ] + }, + "Web/API/notification/onclick": { + "modified": "2019-03-23T22:11:55.774Z", + "contributors": [ + "AndresTonello" + ] + }, + "Web/API/notification/permission": { + "modified": "2019-03-23T22:07:38.974Z", + "contributors": [ + "alanmacgowan", + "IXTRUnai" + ] + }, + "Web/API/notification/requestPermission": { + "modified": "2019-03-23T22:50:37.341Z", + "contributors": [ + "MarkelCuesta", + "jezdez", + "Davdriver" + ] + }, + "Web/Accesibilidad": { + "modified": "2020-09-22T14:24:03.363Z", + "contributors": [ + "FranciscoImanolSuarez", + "Gummox", + "Mediavilladiezj", + "cisval", + "monserratcallejaalmazan", + "chmutoff", + "teoli", + "DoctorRomi", + "Mgjbot", + "Jorolo", + "Lowprofile", + "Wikier", + "Nukeador", + "Gonzobonzoo" + ] + }, + "Web/Accesibilidad/Comunidad": { + "modified": "2019-03-23T23:41:25.430Z", + "contributors": [ + "teoli", + "Jorolo" + ] + }, + "Web/Accesibilidad/Understanding_WCAG": { + "modified": "2019-03-18T21:25:29.001Z", + "contributors": [ + "evaferreira" + ] + }, + "Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres": { + "modified": "2020-05-21T19:43:48.950Z", + "contributors": [ + "giioaj", + "IsraelFloresDGA" + ] + }, + "Web/Accesibilidad/Understanding_WCAG/Perceivable": { + "modified": "2019-03-18T21:25:19.991Z", + "contributors": [ + "evaferreira" + ] + }, + "Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste": { + "modified": "2020-06-09T06:15:36.471Z", + "contributors": [ + "11bits", + "apenab" + ] + }, + "Web/Accesibilidad/Understanding_WCAG/Teclado": { + "modified": "2020-09-28T17:32:58.697Z", + "contributors": [ + "megatux", + "IsraelFloresDGA" + ] + }, + "Web/Accessibility/ARIA": { + "modified": "2019-03-23T22:32:50.943Z", + "contributors": [ + "AlejandroC92", + "megatux", + "guumo", + "VNWK", + "imelenchon", + "teoli" + ] + }, + "Web/Accessibility/ARIA/ARIA_Techniques": { + "modified": "2019-03-23T22:46:27.954Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required": { + "modified": "2019-08-28T11:54:04.515Z", + "contributors": [ + "IsraelFloresDGA", + "Karla_Glez" + ] + }, + "Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog": { + "modified": "2019-08-28T12:48:39.532Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role": { + "modified": "2019-03-18T21:31:32.978Z", + "contributors": [ + "IsraelFloresDGA", + "mayrars" + ] + }, + "Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute": { + "modified": "2020-12-02T07:09:06.472Z", + "contributors": [ + "AlePerez92", + "mitsurugi", + "fraboto", + "blanchart", + "ErikMj69", + "NelsonWF" + ] + }, + "Web/Accessibility/ARIA/forms": { + "modified": "2020-08-13T01:50:29.740Z", + "contributors": [ + "Nachec", + "IsraelFloresDGA", + "malonson" + ] + }, + "Web/Accessibility/ARIA/forms/Etiquetas_complejas": { + "modified": "2019-11-27T15:16:55.571Z", + "contributors": [ + "IsaacAaron", + "IsraelFloresDGA" + ] + }, + "Web/Accessibility/ARIA/forms/alertas": { + "modified": "2020-08-13T01:22:34.331Z", + "contributors": [ + "Nachec" + ] + }, + "Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios": { + "modified": "2019-03-18T21:22:07.007Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/CSS": { + "modified": "2020-10-25T05:19:47.416Z", + "contributors": [ + "SphinxKnight", + "redondomoralesmelanny", + "Dolacres", + "boualidev", + "Enesimus", + "chrisdavidmills", + "NavetsArev", + "alazzuri", + "IsraelFloresDGA", + "lajaso", + "arturoblack", + "rogeliomtx", + "anecto", + "teoli", + "Luis_Calvo", + "alex_dm", + "ethertank", + "StripTM", + "inma_610", + "another_sam", + "fscholz", + "Wrongloop", + "Nathymig", + "Mgjbot", + "Nukeador", + "Jorolo", + "Lopez", + "Takenbot", + "Manu", + "Elrohir" + ] + }, + "Web/CSS/--*": { + "modified": "2020-11-18T17:43:24.329Z", + "contributors": [ + "jemilionautoch" + ] + }, + "Web/CSS/-moz-box-flex": { + "modified": "2019-03-23T22:36:18.128Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-moz-box-ordinal-group": { + "modified": "2019-03-23T22:36:12.257Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-box-pack": { + "modified": "2019-03-23T22:36:13.348Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-moz-cell": { + "modified": "2019-03-23T22:35:57.612Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-context-properties": { + "modified": "2020-10-15T22:13:14.061Z", + "contributors": [ + "Adorta4" + ] + }, + "Web/CSS/-moz-float-edge": { + "modified": "2019-03-23T22:36:02.702Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-font-language-override": { + "modified": "2019-03-23T23:13:49.521Z", + "contributors": [ + "martinezdario55" + ] + }, + "Web/CSS/-moz-force-broken-image-icon": { + "modified": "2019-03-23T23:21:21.736Z", + "contributors": [ + "Sebastianz", + "teoli", + "jota1410" + ] + }, + "Web/CSS/-moz-image-rect": { + "modified": "2019-03-23T22:35:59.460Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-image-region": { + "modified": "2019-03-23T22:35:58.872Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-orient": { + "modified": "2019-03-23T22:38:38.798Z", + "contributors": [ + "teoli", + "anytameleiro" + ] + }, + "Web/CSS/-moz-outline-radius": { + "modified": "2019-03-23T22:35:49.017Z", + "contributors": [ + "BubuAnabelas", + "teoli", + "Simplexible", + "Prinz_Rana", + "pekechis" + ] + }, + "Web/CSS/-moz-outline-radius-bottomleft": { + "modified": "2019-03-23T22:35:52.557Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-outline-radius-bottomright": { + "modified": "2019-03-23T22:35:53.397Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-outline-radius-topleft": { + "modified": "2019-03-23T22:35:51.509Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-outline-radius-topright": { + "modified": "2019-03-23T22:35:44.264Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-user-focus": { + "modified": "2019-03-23T22:35:52.089Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-moz-user-input": { + "modified": "2019-03-23T22:35:52.458Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-moz-user-modify": { + "modified": "2019-03-23T22:35:48.381Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-webkit-border-before": { + "modified": "2019-03-23T22:35:46.245Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-webkit-box-reflect": { + "modified": "2019-03-23T22:35:45.474Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-webkit-mask": { + "modified": "2019-03-23T22:35:50.079Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-attachment": { + "modified": "2019-03-23T22:35:53.127Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-box-image": { + "modified": "2019-03-23T22:35:44.795Z", + "contributors": [ + "Sebastianz", + "Prinz_Rana", + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-clip": { + "modified": "2019-03-23T22:35:47.057Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-composite": { + "modified": "2019-03-23T22:35:49.602Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-image": { + "modified": "2019-03-23T22:35:45.973Z", + "contributors": [ + "hectorcano", + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-origin": { + "modified": "2019-03-23T22:35:46.533Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-position": { + "modified": "2019-03-23T22:38:37.922Z", + "contributors": [ + "teoli", + "Simplexible", + "Prinz_Rana", + "pekechis", + "Kuiki" + ] + }, + "Web/CSS/-webkit-mask-position-x": { + "modified": "2019-03-23T22:34:17.919Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-position-y": { + "modified": "2019-03-23T22:34:11.674Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-repeat": { + "modified": "2019-03-23T22:35:46.401Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-repeat-x": { + "modified": "2019-03-23T22:34:04.348Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-mask-repeat-y": { + "modified": "2019-03-23T22:34:06.535Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-overflow-scrolling": { + "modified": "2020-10-15T21:44:50.401Z", + "contributors": [ + "AlePerez92", + "teoli", + "natav", + "pekechis" + ] + }, + "Web/CSS/-webkit-print-color-adjust": { + "modified": "2019-03-23T22:35:50.908Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-webkit-tap-highlight-color": { + "modified": "2019-03-23T22:35:33.059Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-text-fill-color": { + "modified": "2019-03-23T22:35:41.363Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-text-stroke": { + "modified": "2020-11-09T04:49:08.502Z", + "contributors": [ + "sideshowbarker", + "codingdudecom", + "NachoNav", + "pekechis" + ] + }, + "Web/CSS/-webkit-text-stroke-color": { + "modified": "2019-03-23T22:35:34.688Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/-webkit-text-stroke-width": { + "modified": "2019-03-23T22:35:36.221Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/-webkit-touch-callout": { + "modified": "2019-03-23T22:35:37.578Z", + "contributors": [ + "teoli", + "rankill", + "pekechis" + ] + }, + "Web/CSS/:-moz-broken": { + "modified": "2019-03-23T22:34:12.269Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-drag-over": { + "modified": "2019-03-23T22:34:06.375Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-first-node": { + "modified": "2019-03-23T22:34:12.741Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-focusring": { + "modified": "2019-03-23T22:34:12.588Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/:-moz-handler-blocked": { + "modified": "2019-03-23T22:33:34.259Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-handler-crashed": { + "modified": "2019-03-23T22:33:27.000Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-handler-disabled": { + "modified": "2019-03-23T22:33:35.339Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-last-node": { + "modified": "2019-03-18T21:15:45.566Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-list-bullet": { + "modified": "2019-03-23T22:29:23.137Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-list-number": { + "modified": "2019-03-23T22:29:22.603Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-loading": { + "modified": "2019-03-23T22:33:38.436Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-locale-dir(ltr)": { + "modified": "2019-03-23T22:33:43.908Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-locale-dir(rtl)": { + "modified": "2019-03-23T22:33:44.356Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-only-whitespace": { + "modified": "2019-03-23T22:33:33.786Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-placeholder": { + "modified": "2019-03-23T22:33:30.015Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/:-moz-submit-invalid": { + "modified": "2019-03-23T22:33:36.639Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-suppressed": { + "modified": "2019-03-23T22:33:37.212Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-ui-invalid": { + "modified": "2019-03-23T22:30:48.940Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/:-moz-ui-valid": { + "modified": "2019-03-23T22:29:23.305Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/:-moz-user-disabled": { + "modified": "2019-03-23T22:30:53.713Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:-moz-window-inactive": { + "modified": "2019-03-23T22:30:43.777Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/:-ms-input-placeholder": { + "modified": "2019-03-23T22:29:24.542Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/:-webkit-autofill": { + "modified": "2019-03-23T22:29:31.809Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-moz-color-swatch": { + "modified": "2020-10-15T22:13:15.247Z", + "contributors": [ + "Adorta4" + ] + }, + "Web/CSS/::-moz-page": { + "modified": "2019-03-23T22:29:23.000Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-moz-page-sequence": { + "modified": "2019-03-23T22:29:18.734Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-moz-placeholder": { + "modified": "2019-03-23T22:29:22.118Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-moz-progress-bar": { + "modified": "2019-03-23T22:29:21.640Z", + "contributors": [ + "lajaso", + "pekechis" + ] + }, + "Web/CSS/::-moz-range-progress": { + "modified": "2019-03-23T22:28:49.325Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-moz-range-thumb": { + "modified": "2019-03-23T22:28:56.558Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-moz-range-track": { + "modified": "2019-03-23T22:27:41.835Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-moz-scrolled-page-sequence": { + "modified": "2019-03-23T22:27:47.385Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-file-upload-button": { + "modified": "2019-03-18T21:21:36.190Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-inner-spin-button": { + "modified": "2019-03-18T21:17:13.569Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-input-placeholder": { + "modified": "2019-03-18T21:16:20.006Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-meter-bar": { + "modified": "2019-03-23T22:27:21.551Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-meter-even-less-good-value": { + "modified": "2019-03-18T21:15:16.586Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-meter-inner-element": { + "modified": "2019-03-23T22:27:02.054Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-meter-optimum-value": { + "modified": "2019-03-23T22:27:09.428Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-meter-suboptimum-value": { + "modified": "2019-03-23T22:27:08.613Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-outer-spin-button": { + "modified": "2019-03-23T22:27:04.174Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-progress-bar": { + "modified": "2019-03-23T22:26:48.592Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-progress-inner-element": { + "modified": "2019-03-23T22:27:11.051Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-progress-value": { + "modified": "2019-03-23T22:26:54.483Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-scrollbar": { + "modified": "2019-03-23T22:26:50.519Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/::-webkit-slider-runnable-track": { + "modified": "2019-03-23T22:26:41.971Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::-webkit-slider-thumb": { + "modified": "2019-03-23T22:26:41.006Z", + "contributors": [ + "teoli", + "pekechis" + ] + }, + "Web/CSS/::after": { + "modified": "2020-10-15T21:15:55.871Z", + "contributors": [ + "JFOG", + "IsraelFloresDGA", + "israel-munoz", + "Lorenzoygata", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/::backdrop": { + "modified": "2019-03-23T22:30:49.892Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/::before": { + "modified": "2020-11-24T07:28:22.113Z", + "contributors": [ + "chrisdavidmills", + "maketas", + "IsraelFloresDGA", + "israel-munoz", + "Yisus777", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/::cue": { + "modified": "2020-10-15T22:33:08.581Z", + "contributors": [ + "Pablo-No" + ] + }, + "Web/CSS/::first-letter": { + "modified": "2020-10-15T22:24:50.087Z", + "contributors": [ + "Plumas", + "adrymrtnz" + ] + }, + "Web/CSS/::first-line": { + "modified": "2020-10-15T22:24:51.827Z", + "contributors": [ + "Plumas", + "ivanenoriega", + "adrymrtnz" + ] + }, + "Web/CSS/::marker": { + "modified": "2020-10-15T22:22:16.686Z", + "contributors": [ + "qwerty726" + ] + }, + "Web/CSS/::placeholder": { + "modified": "2020-10-15T22:26:50.005Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/CSS/::selection": { + "modified": "2019-03-23T23:33:09.211Z", + "contributors": [ + "canobius", + "arroutado", + "jesu_abner", + "teoli", + "pepeheron" + ] + }, + "Web/CSS/::spelling-error": { + "modified": "2020-10-15T22:03:59.841Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/:active": { + "modified": "2020-10-15T21:21:49.325Z", + "contributors": [ + "pollirrata", + "lajaso", + "teoli", + "MrBlogger" + ] + }, + "Web/CSS/:any": { + "modified": "2019-03-23T22:17:18.601Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/:any-link": { + "modified": "2020-10-15T21:52:30.387Z", + "contributors": [ + "JFOG", + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/:blank": { + "modified": "2020-10-15T22:26:47.961Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/CSS/:checked": { + "modified": "2020-10-15T21:32:04.510Z", + "contributors": [ + "lajaso", + "zxhadow" + ] + }, + "Web/CSS/:default": { + "modified": "2020-10-15T21:15:24.516Z", + "contributors": [ + "lajaso", + "teoli", + "Mgjbot", + "Nathymig", + "HenryGR" + ] + }, + "Web/CSS/:defined": { + "modified": "2020-10-15T22:03:59.600Z", + "contributors": [ + "JFOG", + "lajaso" + ] + }, + "Web/CSS/:dir": { + "modified": "2020-10-15T21:44:46.376Z", + "contributors": [ + "lajaso", + "pekechis" + ] + }, + "Web/CSS/:disabled": { + "modified": "2020-10-15T21:43:53.936Z", + "contributors": [ + "lajaso", + "pekechis" + ] + }, + "Web/CSS/:empty": { + "modified": "2020-10-15T21:16:01.534Z", + "contributors": [ + "IsraelFloresDGA", + "lajaso", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/:enabled": { + "modified": "2020-10-15T21:44:29.292Z", + "contributors": [ + "lajaso", + "pekechis" + ] + }, + "Web/CSS/:first": { + "modified": "2020-10-15T21:43:42.281Z", + "contributors": [ + "lajaso", + "pekechis" + ] + }, + "Web/CSS/:first-child": { + "modified": "2020-10-15T21:19:55.452Z", + "contributors": [ + "lajaso", + "teoli", + "percy@mozilla.pe", + "jsalinas" + ] + }, + "Web/CSS/:first-of-type": { + "modified": "2020-10-15T21:44:49.790Z", + "contributors": [ + "lajaso", + "pekechis" + ] + }, + "Web/CSS/:focus": { + "modified": "2020-10-15T21:43:30.779Z", + "contributors": [ + "evaferreira", + "lajaso", + "pekechis" + ] + }, + "Web/CSS/:focus-visible": { + "modified": "2020-10-15T22:33:54.482Z", + "contributors": [ + "arauz.gus" + ] + }, + "Web/CSS/:focus-within": { + "modified": "2020-12-03T05:40:25.197Z", + "contributors": [ + "AlePerez92", + "carlosviteri", + "lajaso", + "AntonioNavajasOjeda" + ] + }, + "Web/CSS/:fullscreen": { + "modified": "2020-10-15T21:51:48.377Z", + "contributors": [ + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/:has": { + "modified": "2019-03-23T22:36:22.444Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/:host": { + "modified": "2020-10-15T22:04:25.470Z", + "contributors": [ + "rhssr", + "lajaso" + ] + }, + "Web/CSS/:hover": { + "modified": "2020-10-15T21:19:57.161Z", + "contributors": [ + "lajaso", + "teoli", + "percy@mozilla.pe", + "ccarruitero" + ] + }, + "Web/CSS/:in-range": { + "modified": "2020-10-15T21:52:29.381Z", + "contributors": [ + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/:indeterminate": { + "modified": "2020-10-15T21:52:30.617Z", + "contributors": [ + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/:invalid": { + "modified": "2020-10-15T21:25:32.434Z", + "contributors": [ + "lajaso", + "teoli", + "ccastillos" + ] + }, + "Web/CSS/:lang": { + "modified": "2020-10-15T21:49:25.234Z", + "contributors": [ + "lajaso", + "sapox" + ] + }, + "Web/CSS/:last-child": { + "modified": "2020-10-15T21:19:56.585Z", + "contributors": [ + "lajaso", + "MarkelCuesta", + "carloque", + "teoli", + "ccarruitero", + "percy@mozilla.pe" + ] + }, + "Web/CSS/:last-of-type": { + "modified": "2020-10-15T21:19:57.770Z", + "contributors": [ + "lajaso", + "teoli", + "jesanchez", + "jsalinas" + ] + }, + "Web/CSS/:left": { + "modified": "2020-10-15T22:03:35.116Z", + "contributors": [ + "Tartarin2018", + "lajaso", + "Skrinch" + ] + }, + "Web/CSS/:link": { + "modified": "2020-10-15T21:54:15.946Z", + "contributors": [ + "lajaso", + "Jhonatangiraldo" + ] + }, + "Web/CSS/:not()": { + "modified": "2020-11-30T09:54:17.195Z", + "contributors": [ + "blanchart", + "lajaso", + "teoli", + "jotadeaa", + "luisgagocasas" + ] + }, + "Web/CSS/:nth-child": { + "modified": "2020-10-15T21:20:38.559Z", + "contributors": [ + "ulisestrujillo", + "lajaso", + "teoli", + "tuxtitlan" + ] + }, + "Web/CSS/:nth-last-child": { + "modified": "2020-10-15T21:42:40.958Z", + "contributors": [ + "lajaso", + "alkaithil" + ] + }, + "Web/CSS/:nth-last-of-type": { + "modified": "2020-10-15T22:04:20.811Z", + "contributors": [ + "AltheaE", + "lajaso" + ] + }, + "Web/CSS/:nth-of-type": { + "modified": "2020-10-15T21:43:57.823Z", + "contributors": [ + "lajaso", + "edkalel" + ] + }, + "Web/CSS/:only-child": { + "modified": "2020-10-15T21:42:38.914Z", + "contributors": [ + "lajaso", + "alkaithil" + ] + }, + "Web/CSS/:only-of-type": { + "modified": "2020-10-15T22:04:23.870Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/:optional": { + "modified": "2020-10-15T22:03:59.272Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/:out-of-range": { + "modified": "2020-10-15T21:52:29.356Z", + "contributors": [ + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/:placeholder-shown": { + "modified": "2020-10-15T22:04:23.723Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/:read-only": { + "modified": "2020-10-15T21:58:16.699Z", + "contributors": [ + "lajaso", + "j-light" + ] + }, + "Web/CSS/:read-write": { + "modified": "2020-10-15T22:04:19.084Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/:required": { + "modified": "2020-10-15T21:44:28.186Z", + "contributors": [ + "lajaso", + "pekechis" + ] + }, + "Web/CSS/:right": { + "modified": "2020-10-15T22:04:16.818Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/:root": { + "modified": "2020-10-15T21:34:17.481Z", + "contributors": [ + "lajaso", + "JavierPeris", + "Xaviju" + ] + }, + "Web/CSS/:target": { + "modified": "2020-10-15T21:44:29.225Z", + "contributors": [ + "lajaso", + "moisesalmonte", + "pekechis" + ] + }, + "Web/CSS/:valid": { + "modified": "2020-10-15T21:45:32.621Z", + "contributors": [ + "lajaso", + "jorgesancheznet" + ] + }, + "Web/CSS/:visited": { + "modified": "2020-10-15T22:04:02.908Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/@charset": { + "modified": "2019-03-23T22:29:53.691Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/@counter-style": { + "modified": "2019-03-18T21:16:44.974Z", + "contributors": [ + "jamesbrown0" + ] + }, + "Web/CSS/@counter-style/additive-symbols": { + "modified": "2019-03-23T22:18:02.836Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/@counter-style/symbols": { + "modified": "2019-03-18T21:15:43.336Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/@document": { + "modified": "2020-10-15T22:01:34.650Z", + "contributors": [ + "SphinxKnight", + "lsosa81" + ] + }, + "Web/CSS/@font-face": { + "modified": "2019-09-26T12:01:00.515Z", + "contributors": [ + "ZodiacFireworks", + "fscholz", + "rtunon", + "ozkxr", + "teoli", + "ccarruitero", + "Nuc134rB0t", + "inma_610" + ] + }, + "Web/CSS/@font-face/font-display": { + "modified": "2020-10-15T21:59:11.206Z", + "contributors": [ + "AlePerez92", + "nuwanda555" + ] + }, + "Web/CSS/@font-face/font-family": { + "modified": "2019-03-23T22:37:47.693Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/@font-face/font-style": { + "modified": "2019-03-23T22:38:47.174Z", + "contributors": [ + "danielfdez" + ] + }, + "Web/CSS/@font-face/src": { + "modified": "2019-03-23T22:17:51.245Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/@font-face/unicode-range": { + "modified": "2020-10-15T21:50:47.753Z", + "contributors": [ + "SphinxKnight", + "giobeatle1794" + ] + }, + "Web/CSS/@font-feature-values": { + "modified": "2019-03-23T22:22:14.476Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/@import": { + "modified": "2019-03-23T23:38:27.735Z", + "contributors": [ + "JorgeCapillo", + "Guillaume-Heras", + "mrstork", + "fscholz", + "teoli", + "jsalinas", + "kamel.araujo" + ] + }, + "Web/CSS/@keyframes": { + "modified": "2019-03-23T23:36:20.944Z", + "contributors": [ + "Sebastianz", + "fscholz", + "Sheppy", + "teoli", + "jesanchez", + "Velociraktor" + ] + }, + "Web/CSS/@media": { + "modified": "2019-03-23T23:16:54.490Z", + "contributors": [ + "israel-munoz", + "fscholz", + "teoli", + "sanathy" + ] + }, + "Web/CSS/@media/altura": { + "modified": "2020-10-15T22:23:38.815Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/CSS/@media/color": { + "modified": "2019-03-18T21:15:44.481Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/@media/display-mode": { + "modified": "2020-10-15T22:23:39.088Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/CSS/@media/hover": { + "modified": "2020-10-15T22:23:44.104Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/CSS/@media/pointer": { + "modified": "2020-10-15T22:27:26.867Z", + "contributors": [ + "qwerty726" + ] + }, + "Web/CSS/@media/resolución": { + "modified": "2019-03-23T22:38:40.675Z", + "contributors": [ + "Conradin88" + ] + }, + "Web/CSS/@media/width": { + "modified": "2019-03-23T22:04:44.569Z", + "contributors": [ + "jswisher", + "wilton-cruz" + ] + }, + "Web/CSS/@namespace": { + "modified": "2020-10-15T22:29:21.901Z", + "contributors": [ + "qwerty726" + ] + }, + "Web/CSS/@page": { + "modified": "2019-03-18T21:35:50.476Z", + "contributors": [ + "luismj" + ] + }, + "Web/CSS/@supports": { + "modified": "2020-10-15T21:43:18.021Z", + "contributors": [ + "SJW", + "angelf", + "MilkSnake" + ] + }, + "Web/CSS/@viewport": { + "modified": "2019-03-18T21:16:54.012Z", + "contributors": [ + "cvrebert" + ] + }, + "Web/CSS/@viewport/height": { + "modified": "2019-03-18T21:38:59.253Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/@viewport/width": { + "modified": "2019-03-18T21:16:26.082Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/At-rule": { + "modified": "2019-03-23T22:29:55.371Z", + "contributors": [ + "Legioinvicta", + "israel-munoz" + ] + }, + "Web/CSS/CSS_Animations": { + "modified": "2019-03-23T22:43:48.247Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS": { + "modified": "2019-03-23T22:41:48.122Z", + "contributors": [ + "wbamberg", + "CristhianLora1", + "DracotMolver" + ] + }, + "Web/CSS/CSS_Animations/Tips": { + "modified": "2020-08-16T13:05:40.057Z", + "contributors": [ + "CamilaAchury", + "SphinxKnight", + "AlbertoVargasMoreno" + ] + }, + "Web/CSS/CSS_Animations/Usando_animaciones_CSS": { + "modified": "2020-07-06T16:16:21.887Z", + "contributors": [ + "Jazperist", + "miguelgilmartinez", + "fermelli", + "GasGen", + "KattyaCuevas", + "rod232", + "Jvalenz1982", + "SphinxKnight", + "teoli", + "onerbs", + "Luis_Calvo", + "ulisescab" + ] + }, + "Web/CSS/CSS_Background_and_Borders": { + "modified": "2019-03-23T22:41:48.399Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Background_and_Borders/Border-image_generador": { + "modified": "2019-03-23T22:41:48.777Z", + "contributors": [ + "teoli", + "mcclone2001" + ] + }, + "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "modified": "2019-03-18T21:15:42.476Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds": { + "modified": "2019-03-23T22:17:03.740Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/CSS_Colors": { + "modified": "2019-03-23T22:23:30.277Z", + "contributors": [ + "betelleclerc", + "Krenair" + ] + }, + "Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color": { + "modified": "2019-03-23T22:23:27.596Z", + "contributors": [ + "elihro" + ] + }, + "Web/CSS/CSS_Containment": { + "modified": "2020-10-21T02:39:25.867Z", + "contributors": [ + "SphinxKnight", + "RoqueAlonso" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout": { + "modified": "2019-03-23T22:43:42.897Z", + "contributors": [ + "danpaltor", + "tipoqueno", + "pepe2016", + "fscholz" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container": { + "modified": "2020-09-12T08:36:23.473Z", + "contributors": [ + "x-N0", + "FrankGalanB", + "JulianCGG", + "PauloColorado", + "Irvandoval", + "turuto" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox": { + "modified": "2019-11-06T19:10:32.985Z", + "contributors": [ + "tonyrodz" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox.": { + "modified": "2019-03-18T21:18:33.523Z", + "contributors": [ + "danpaltor" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox": { + "modified": "2020-03-25T21:15:58.856Z", + "contributors": [ + "amazing79", + "otello1971", + "cwalternicolas" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web": { + "modified": "2019-03-23T22:31:07.427Z", + "contributors": [ + "miguelsp" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS": { + "modified": "2019-05-15T19:01:41.614Z", + "contributors": [ + "luzbelmex", + "VictorSan45", + "NeXuZZ-SCM", + "Tonylu11", + "javier_junin", + "AlePerez92", + "MMariscal", + "fscholz", + "ArcangelZith", + "FNK", + "rippe2hl", + "StripTM", + "joan.leon", + "arturo_sanz" + ] + }, + "Web/CSS/CSS_Flow_Layout": { + "modified": "2019-03-18T21:21:28.417Z", + "contributors": [ + "ariasfernando" + ] + }, + "Web/CSS/CSS_Fonts": { + "modified": "2019-03-23T22:18:19.285Z", + "contributors": [ + "Squirrel18" + ] + }, + "Web/CSS/CSS_Grid_Layout": { + "modified": "2020-08-21T18:16:34.348Z", + "contributors": [ + "dongerardor", + "yomar-dev", + "amaiafilo", + "AlePerez92", + "aribet", + "StripTM" + ] + }, + "Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout": { + "modified": "2019-11-06T13:46:19.795Z", + "contributors": [ + "tonyrodz" + ] + }, + "Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout": { + "modified": "2019-05-30T17:37:47.442Z", + "contributors": [ + "narvmtz", + "ocamachor" + ] + }, + "Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility": { + "modified": "2019-06-05T03:51:45.202Z", + "contributors": [ + "blanchart" + ] + }, + "Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas": { + "modified": "2019-10-01T23:38:23.285Z", + "contributors": [ + "jcastillaingeniero", + "amaiafilo", + "IsraelFloresDGA", + "jorgemontoyab" + ] + }, + "Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout": { + "modified": "2019-03-18T21:34:10.349Z", + "contributors": [ + "amaiafilo" + ] + }, + "Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout": { + "modified": "2019-12-18T12:24:17.824Z", + "contributors": [ + "amazing79", + "natalygiraldo", + "amaiafilo", + "TavoTrash", + "aribet", + "jorgemontoyab" + ] + }, + "Web/CSS/CSS_Logical_Properties": { + "modified": "2019-03-18T21:11:22.321Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/CSS_Logical_Properties/Basic_concepts": { + "modified": "2019-10-17T05:37:57.001Z", + "contributors": [ + "blanchart", + "teffcode" + ] + }, + "Web/CSS/CSS_Logical_Properties/Dimensionamiento": { + "modified": "2019-03-19T19:17:23.927Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/CSS_Logical_Properties/Floating_and_positioning": { + "modified": "2019-03-18T20:35:38.553Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/CSS_Logical_Properties/Margins_borders_padding": { + "modified": "2019-03-19T13:30:41.950Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/CSS_Modelo_Caja": { + "modified": "2019-03-23T22:37:33.458Z", + "contributors": [ + "tipoqueno", + "pekechis" + ] + }, + "Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS": { + "modified": "2019-08-28T10:35:24.055Z", + "contributors": [ + "tipoqueno" + ] + }, + "Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing": { + "modified": "2019-03-23T22:32:15.462Z", + "contributors": [ + "amaiafilo", + "Ralexhx", + "javichito" + ] + }, + "Web/CSS/CSS_Motion_Path": { + "modified": "2020-10-15T22:26:49.512Z", + "contributors": [ + "josegarciamanez" + ] + }, + "Web/CSS/CSS_Positioning": { + "modified": "2019-03-23T22:32:36.509Z", + "contributors": [ + "javichito", + "davidhbrown" + ] + }, + "Web/CSS/CSS_Positioning/entendiendo_z_index": { + "modified": "2019-03-18T20:42:17.583Z", + "contributors": [ + "ChipTime", + "javichito" + ] + }, + "Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index": { + "modified": "2019-03-23T22:32:38.884Z", + "contributors": [ + "javichito" + ] + }, + "Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float": { + "modified": "2019-04-26T07:22:46.044Z", + "contributors": [ + "SphinxKnight", + "LaGallinaTuruleta", + "javichito" + ] + }, + "Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento": { + "modified": "2019-03-23T22:32:44.958Z", + "contributors": [ + "javichito" + ] + }, + "Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index": { + "modified": "2019-03-23T22:32:47.571Z", + "contributors": [ + "javichito" + ] + }, + "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento": { + "modified": "2019-03-23T22:32:36.821Z", + "contributors": [ + "javichito" + ] + }, + "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento": { + "modified": "2019-03-23T22:32:34.821Z", + "contributors": [ + "javichito" + ] + }, + "Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento": { + "modified": "2019-03-23T22:32:30.208Z", + "contributors": [ + "javichito" + ] + }, + "Web/CSS/CSS_Properties_Reference": { + "modified": "2019-03-18T21:24:27.305Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/CSS_Reglas_Condicionales": { + "modified": "2019-03-23T22:05:34.864Z", + "contributors": [ + "arnulfolg" + ] + }, + "Web/CSS/CSS_Transforms": { + "modified": "2019-03-23T22:43:47.978Z", + "contributors": [ + "Sebastianz", + "fscholz" + ] + }, + "Web/CSS/CSS_Transforms/Using_CSS_transforms": { + "modified": "2019-03-24T00:05:10.570Z", + "contributors": [ + "recortes", + "fscholz", + "teoli", + "cristianjav", + "ajimix", + "another_sam" + ] + }, + "Web/CSS/CSS_Transitions": { + "modified": "2019-07-24T08:01:48.708Z", + "contributors": [ + "SphinxKnight", + "FedericoMarmo", + "crojasf", + "pekechis" + ] + }, + "Web/CSS/CSS_Types": { + "modified": "2019-03-18T21:35:39.343Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/CSS_Writing_Modes": { + "modified": "2019-04-10T10:27:10.380Z", + "contributors": [ + "cristianmartinez" + ] + }, + "Web/CSS/Cascade": { + "modified": "2020-04-20T15:19:07.785Z", + "contributors": [ + "arjusgit", + "tw1ttt3r" + ] + }, + "Web/CSS/Child_combinator": { + "modified": "2019-03-23T22:17:17.663Z", + "contributors": [ + "ExE-Boss", + "maguz727", + "israel-munoz" + ] + }, + "Web/CSS/Class_selectors": { + "modified": "2019-03-23T22:17:19.977Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/Columnas_CSS": { + "modified": "2019-03-23T22:28:10.699Z", + "contributors": [ + "Anonymous" + ] + }, + "Web/CSS/Comentarios": { + "modified": "2019-03-23T22:16:58.806Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/Comenzando_(tutorial_CSS)": { + "modified": "2019-03-23T23:39:37.048Z", + "contributors": [ + "teoli", + "jsalinas" + ] + }, + "Web/CSS/Como_iniciar": { + "modified": "2019-01-16T13:59:37.327Z", + "contributors": [ + "teoli", + "Izel" + ] + }, + "Web/CSS/Como_iniciar/Por_que_usar_CSS": { + "modified": "2019-03-23T23:39:38.906Z", + "contributors": [ + "teoli", + "jsalinas" + ] + }, + "Web/CSS/Como_iniciar/Que_es_CSS": { + "modified": "2019-03-24T00:11:28.788Z", + "contributors": [ + "fernandomoreno605", + "DavidWebcreate", + "aguilarcarlos", + "teoli", + "LeoHirsch", + "dusvilopez", + "turekon", + "Izel" + ] + }, + "Web/CSS/Descendant_combinator": { + "modified": "2019-03-23T23:13:24.480Z", + "contributors": [ + "ExE-Boss", + "Makiber" + ] + }, + "Web/CSS/Elemento_reemplazo": { + "modified": "2019-03-23T23:08:30.961Z", + "contributors": [ + "jdbazagaruiz" + ] + }, + "Web/CSS/Especificidad": { + "modified": "2020-11-14T17:11:45.294Z", + "contributors": [ + "0neomar", + "fer", + "glrodasz", + "mariupereyra", + "arjusgit", + "DavidGalvis", + "gcjuan", + "LuisSevillano", + "deimidis2", + "aeroxmotion", + "padrecedano", + "Remohir" + ] + }, + "Web/CSS/Gradiente": { + "modified": "2019-03-23T22:37:34.623Z", + "contributors": [ + "devilkillermc", + "mym2013", + "Sebastianz", + "wizAmit", + "slayslot", + "Conradin88" + ] + }, + "Web/CSS/Herramientas": { + "modified": "2019-03-23T22:28:04.142Z", + "contributors": [ + "arturoblack" + ] + }, + "Web/CSS/Herramientas/Cubic_Bezier_Generator": { + "modified": "2019-03-18T21:20:03.429Z", + "contributors": [ + "gsalinase" + ] + }, + "Web/CSS/ID_selectors": { + "modified": "2020-10-15T21:52:30.474Z", + "contributors": [ + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/Introducción": { + "modified": "2019-03-24T00:09:12.368Z", + "contributors": [ + "luismj", + "javierdp", + "teoli", + "inma_610" + ] + }, + "Web/CSS/Introducción/Boxes": { + "modified": "2019-03-23T23:02:20.733Z", + "contributors": [ + "albaluna" + ] + }, + "Web/CSS/Introducción/Cascading_and_inheritance": { + "modified": "2019-03-23T23:02:26.342Z", + "contributors": [ + "carlos.millan3", + "eljonims", + "mamptecnocrata", + "albaluna" + ] + }, + "Web/CSS/Introducción/Color": { + "modified": "2019-03-23T22:59:44.751Z", + "contributors": [ + "albaluna" + ] + }, + "Web/CSS/Introducción/How_CSS_works": { + "modified": "2019-03-23T23:02:23.335Z", + "contributors": [ + "mamptecnocrata", + "albaluna" + ] + }, + "Web/CSS/Introducción/Layout": { + "modified": "2019-03-23T22:20:39.961Z", + "contributors": [ + "lavilofam1" + ] + }, + "Web/CSS/Introducción/Los:estilos_de_texto": { + "modified": "2019-03-23T23:02:09.062Z", + "contributors": [ + "albaluna" + ] + }, + "Web/CSS/Introducción/Media": { + "modified": "2019-03-18T21:15:11.297Z", + "contributors": [ + "luismj" + ] + }, + "Web/CSS/Introducción/Selectors": { + "modified": "2019-03-23T23:02:22.202Z", + "contributors": [ + "albaluna" + ] + }, + "Web/CSS/Layout_cookbook": { + "modified": "2019-03-18T21:22:35.394Z", + "contributors": [ + "StripTM" + ] + }, + "Web/CSS/Layout_mode": { + "modified": "2019-03-18T21:44:15.658Z", + "contributors": [ + "NeXuZZ-SCM" + ] + }, + "Web/CSS/Media_Queries": { + "modified": "2020-10-15T22:13:20.096Z", + "contributors": [ + "mikelmg" + ] + }, + "Web/CSS/Mozilla_Extensions": { + "modified": "2019-03-23T23:21:23.902Z", + "contributors": [ + "ExE-Boss", + "Sebastianz", + "teoli", + "jota1410" + ] + }, + "Web/CSS/Preguntas_frecuentes_sobre_CSS": { + "modified": "2020-07-16T22:25:44.798Z", + "contributors": [ + "teoli", + "inma_610" + ] + }, + "Web/CSS/Primeros_pasos": { + "modified": "2019-03-24T00:05:34.862Z", + "contributors": [ + "teoli", + "deimidis" + ] + }, + "Web/CSS/Pseudo-classes": { + "modified": "2020-02-22T08:04:35.419Z", + "contributors": [ + "BraisOliveira", + "MrEscape54", + "MrCoffey", + "alkaithil", + "viro" + ] + }, + "Web/CSS/Pseudoelementos": { + "modified": "2019-03-23T23:21:50.048Z", + "contributors": [ + "BubuAnabelas", + "VictorAbdon", + "teoli", + "jota1410" + ] + }, + "Web/CSS/Referencia_CSS": { + "modified": "2019-03-24T00:14:13.384Z", + "contributors": [ + "lajaso", + "israel-munoz", + "joshitobuba", + "mrstork", + "prayash", + "malayaleecoder", + "teoli", + "tregagnon", + "inma_610", + "fscholz", + "Nukeador" + ] + }, + "Web/CSS/Referencia_CSS/mix-blend-mode": { + "modified": "2020-10-15T21:37:53.265Z", + "contributors": [ + "Undigon", + "mrstork", + "teoli", + "Sebastianz", + "msanz" + ] + }, + "Web/CSS/Selectores_CSS": { + "modified": "2019-07-09T01:16:13.123Z", + "contributors": [ + "missmakita", + "blanchart", + "Benji1337", + "metal-gogo", + "kikolevante" + ] + }, + "Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores": { + "modified": "2020-07-31T07:57:08.167Z", + "contributors": [ + "blanchart", + "israel-munoz" + ] + }, + "Web/CSS/Selectores_atributo": { + "modified": "2020-10-15T21:26:03.862Z", + "contributors": [ + "blanchart", + "MoisesGuevara", + "lajaso", + "teoli", + "jota1410" + ] + }, + "Web/CSS/Selectores_hermanos_adyacentes": { + "modified": "2019-03-23T22:39:30.908Z", + "contributors": [ + "alkaithil" + ] + }, + "Web/CSS/Selectores_hermanos_generales": { + "modified": "2019-03-23T22:39:33.429Z", + "contributors": [ + "alkaithil" + ] + }, + "Web/CSS/Shorthand_properties": { + "modified": "2019-08-11T12:52:52.844Z", + "contributors": [ + "blanchart", + "EstebanRK", + "IsraelFloresDGA", + "huichops" + ] + }, + "Web/CSS/Sintaxis_definición_de_valor": { + "modified": "2019-03-23T22:38:52.899Z", + "contributors": [ + "apazacoder", + "Sebastianz", + "Guillaume-Heras", + "VictorAbdon" + ] + }, + "Web/CSS/Syntax": { + "modified": "2020-09-29T20:54:10.526Z", + "contributors": [ + "lucasmmaidana", + "joseanpg", + "mili01gm", + "Derhks" + ] + }, + "Web/CSS/Texto_CSS": { + "modified": "2019-03-23T22:36:23.444Z", + "contributors": [ + "pekechis" + ] + }, + "Web/CSS/Transiciones_de_CSS": { + "modified": "2019-08-01T05:58:17.579Z", + "contributors": [ + "chrisdavidmills", + "mrstork", + "alberdigital", + "teoli", + "inma_610", + "deimidis" + ] + }, + "Web/CSS/Tutorials": { + "modified": "2019-03-23T22:52:34.225Z", + "contributors": [ + "mariolugo" + ] + }, + "Web/CSS/Type_selectors": { + "modified": "2020-10-15T21:52:26.603Z", + "contributors": [ + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/Universal_selectors": { + "modified": "2020-10-15T21:52:26.325Z", + "contributors": [ + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/Using_CSS_custom_properties": { + "modified": "2020-11-26T20:11:21.130Z", + "contributors": [ + "lupomontero", + "betocantu93", + "sokaluis", + "chrisdavidmills", + "BubuAnabelas", + "Creasick", + "Maseria38", + "FlorTello" + ] + }, + "Web/CSS/Valor_calculado": { + "modified": "2019-03-23T23:53:20.456Z", + "contributors": [ + "teoli", + "Mgjbot", + "Firewordy", + "HenryGR" + ] + }, + "Web/CSS/Valor_inicial": { + "modified": "2019-01-16T15:32:31.295Z", + "contributors": [ + "teoli", + "Mgjbot", + "Nathymig", + "HenryGR" + ] + }, + "Web/CSS/actual_value": { + "modified": "2019-03-23T22:16:54.955Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/align-content": { + "modified": "2019-06-23T02:54:26.562Z", + "contributors": [ + "d0naldo", + "israel-munoz" + ] + }, + "Web/CSS/align-items": { + "modified": "2020-08-01T23:15:43.277Z", + "contributors": [ + "LorenzoSandoval", + "vanesa", + "AlePerez92", + "LuisJorgeLozano", + "israel-munoz" + ] + }, + "Web/CSS/align-self": { + "modified": "2019-03-18T21:17:16.430Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/all": { + "modified": "2019-03-18T21:16:29.697Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/angle": { + "modified": "2019-03-23T22:28:51.690Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/animation": { + "modified": "2019-03-23T23:38:13.777Z", + "contributors": [ + "evaferreira", + "teoli", + "Luis_Calvo", + "jesanchez", + "ccarruitero" + ] + }, + "Web/CSS/animation-delay": { + "modified": "2019-03-23T23:38:13.594Z", + "contributors": [ + "Maletil", + "teoli", + "Luis_Calvo", + "jesanchez", + "jsalinas" + ] + }, + "Web/CSS/animation-direction": { + "modified": "2019-03-23T23:38:14.261Z", + "contributors": [ + "teoli", + "Luis_Calvo", + "jesanchez", + "jsalinas" + ] + }, + "Web/CSS/animation-duration": { + "modified": "2019-03-23T23:31:43.672Z", + "contributors": [ + "teoli", + "Sebastianz", + "Luis_Calvo" + ] + }, + "Web/CSS/animation-fill-mode": { + "modified": "2019-03-23T23:03:51.180Z", + "contributors": [ + "teoli", + "Sebastianz", + "luigli", + "jesusr" + ] + }, + "Web/CSS/animation-iteration-count": { + "modified": "2019-03-23T22:59:21.919Z", + "contributors": [ + "teoli", + "Sebastianz", + "maiky" + ] + }, + "Web/CSS/animation-name": { + "modified": "2019-03-23T22:59:26.717Z", + "contributors": [ + "teoli", + "Sebastianz", + "maiky" + ] + }, + "Web/CSS/animation-play-state": { + "modified": "2019-03-23T22:44:18.177Z", + "contributors": [ + "Boton" + ] + }, + "Web/CSS/animation-timing-function": { + "modified": "2019-03-23T22:44:11.502Z", + "contributors": [ + "ndeniche", + "mrstork", + "Boton" + ] + }, + "Web/CSS/appearance": { + "modified": "2019-03-23T22:44:40.090Z", + "contributors": [ + "ExE-Boss", + "teoli", + "wbamberg", + "guerratron" + ] + }, + "Web/CSS/attr()": { + "modified": "2020-11-04T08:51:33.506Z", + "contributors": [ + "chrisdavidmills", + "mrstork", + "prayash", + "ismachine" + ] + }, + "Web/CSS/auto": { + "modified": "2019-01-16T15:41:51.944Z", + "contributors": [ + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/backdrop-filter": { + "modified": "2020-10-15T22:05:06.351Z", + "contributors": [ + "lajaso" + ] + }, + "Web/CSS/backface-visibility": { + "modified": "2019-03-23T22:18:09.464Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/background": { + "modified": "2020-04-23T17:42:59.807Z", + "contributors": [ + "JAMC", + "MMariscal", + "SphinxKnight", + "fscholz", + "teoli", + "sebasmagri", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/background-attachment": { + "modified": "2020-10-06T09:05:59.493Z", + "contributors": [ + "blanchart", + "smltalavera95", + "SphinxKnight", + "fscholz", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/background-blend-mode": { + "modified": "2019-03-23T22:59:28.908Z", + "contributors": [ + "ExE-Boss", + "israel-munoz", + "mrstork", + "teoli", + "Sebastianz", + "maiky" + ] + }, + "Web/CSS/background-clip": { + "modified": "2019-03-18T20:52:42.788Z", + "contributors": [ + "Beatriz_Ortega_Valdes", + "Carlos_Gutierrez", + "teoli", + "Sebastianz", + "rurigk" + ] + }, + "Web/CSS/background-color": { + "modified": "2019-10-10T16:45:24.871Z", + "contributors": [ + "SphinxKnight", + "danielfdez", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/background-image": { + "modified": "2020-05-06T04:02:29.611Z", + "contributors": [ + "blanchart", + "evaferreira", + "SphinxKnight", + "alexisCan", + "andrpueb", + "teoli", + "Rayber", + "Nathymig", + "ethertank" + ] + }, + "Web/CSS/background-origin": { + "modified": "2019-03-24T00:15:00.605Z", + "contributors": [ + "teoli", + "Seanwalker" + ] + }, + "Web/CSS/background-position": { + "modified": "2020-05-06T06:30:15.110Z", + "contributors": [ + "blanchart", + "SphinxKnight", + "teoli", + "FredB", + "Nathymig", + "ethertank" + ] + }, + "Web/CSS/background-position-x": { + "modified": "2020-10-15T22:33:04.718Z", + "contributors": [ + "Ismael_Diaz" + ] + }, + "Web/CSS/background-repeat": { + "modified": "2020-10-15T21:16:00.953Z", + "contributors": [ + "itxuixdev", + "SphinxKnight", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/background-size": { + "modified": "2019-03-23T23:38:13.094Z", + "contributors": [ + "blanchart", + "samuelrb", + "Simplexible", + "Sebastianz", + "Prinz_Rana", + "fscholz", + "teoli", + "chux", + "aguztinrs" + ] + }, + "Web/CSS/basic-shape": { + "modified": "2019-03-23T22:21:44.895Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/blend-mode": { + "modified": "2020-12-04T10:45:45.837Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/block-size": { + "modified": "2019-03-25T00:21:59.271Z", + "contributors": [ + "teffcode", + "israel-munoz" + ] + }, + "Web/CSS/border": { + "modified": "2020-09-27T22:17:02.248Z", + "contributors": [ + "usuarioMan", + "cgosorio", + "wbamberg", + "SphinxKnight", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/border-block": { + "modified": "2020-10-15T22:16:25.322Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-block-color": { + "modified": "2020-10-15T22:16:29.172Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-block-end": { + "modified": "2019-03-23T00:00:36.213Z", + "contributors": [ + "teffcode", + "israel-munoz" + ] + }, + "Web/CSS/border-block-end-color": { + "modified": "2019-03-24T11:12:10.336Z", + "contributors": [ + "teffcode", + "israel-munoz" + ] + }, + "Web/CSS/border-block-end-style": { + "modified": "2019-03-23T22:11:28.819Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/border-block-end-width": { + "modified": "2020-10-15T22:16:29.514Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-block-start": { + "modified": "2020-10-15T22:16:31.641Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-block-start-color": { + "modified": "2020-10-15T22:16:30.534Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-block-start-style": { + "modified": "2020-10-15T22:16:32.074Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-block-start-width": { + "modified": "2020-10-15T22:16:36.793Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-block-style": { + "modified": "2020-10-15T22:16:36.371Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-block-width": { + "modified": "2020-10-15T22:16:39.535Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-bottom": { + "modified": "2019-03-24T00:08:41.510Z", + "contributors": [ + "wbamberg", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/border-bottom-color": { + "modified": "2019-03-24T00:08:33.937Z", + "contributors": [ + "wbamberg", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/border-bottom-left-radius": { + "modified": "2019-03-18T21:16:45.497Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/border-bottom-right-radius": { + "modified": "2019-03-18T21:15:46.042Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/border-bottom-style": { + "modified": "2019-03-24T00:08:38.365Z", + "contributors": [ + "wbamberg", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/border-bottom-width": { + "modified": "2019-03-24T00:12:49.342Z", + "contributors": [ + "wbamberg", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/border-collapse": { + "modified": "2019-03-23T23:52:09.803Z", + "contributors": [ + "wbamberg", + "teoli", + "Mgjbot", + "Nathymig" + ] + }, + "Web/CSS/border-color": { + "modified": "2019-03-24T00:08:40.211Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/border-end-end-radius": { + "modified": "2020-10-15T22:16:36.075Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-end-start-radius": { + "modified": "2020-10-15T22:16:41.715Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-image": { + "modified": "2019-03-23T23:21:15.962Z", + "contributors": [ + "teoli", + "Sebastianz", + "JuanCastela", + "yeyxav" + ] + }, + "Web/CSS/border-image-outset": { + "modified": "2019-03-23T22:22:10.809Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/border-image-repeat": { + "modified": "2020-10-15T21:51:01.640Z", + "contributors": [ + "SphinxKnight", + "israel-munoz" + ] + }, + "Web/CSS/border-image-slice": { + "modified": "2019-03-23T22:22:00.674Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/border-inline": { + "modified": "2020-10-15T22:16:39.413Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-color": { + "modified": "2020-10-15T22:16:39.129Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-end": { + "modified": "2020-10-15T22:16:35.919Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-end-color": { + "modified": "2020-10-15T22:16:44.169Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-end-style": { + "modified": "2020-10-15T22:16:36.354Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-end-width": { + "modified": "2020-10-15T22:16:36.837Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-start": { + "modified": "2020-10-15T22:16:44.782Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-start-color": { + "modified": "2020-10-15T22:16:35.643Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-start-style": { + "modified": "2020-10-15T22:16:41.098Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-start-width": { + "modified": "2020-10-15T22:16:33.765Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-style": { + "modified": "2020-10-15T22:16:43.176Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-inline-width": { + "modified": "2020-10-15T22:16:39.409Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-left": { + "modified": "2019-03-24T00:08:37.376Z", + "contributors": [ + "fscholz", + "teoli", + "Yuichiro", + "Mgjbot", + "Wrongloop" + ] + }, + "Web/CSS/border-left-color": { + "modified": "2019-03-23T23:52:28.495Z", + "contributors": [ + "wbamberg", + "d8vjork", + "teoli", + "Wrongloop" + ] + }, + "Web/CSS/border-radius": { + "modified": "2019-03-23T23:37:30.234Z", + "contributors": [ + "Barleby", + "Simplexible", + "Sebastianz", + "Prinz_Rana", + "teoli", + "bytx", + "wilo" + ] + }, + "Web/CSS/border-right": { + "modified": "2020-10-15T22:17:02.534Z", + "contributors": [ + "dlopez525", + "osperi" + ] + }, + "Web/CSS/border-spacing": { + "modified": "2019-03-23T23:52:00.961Z", + "contributors": [ + "wbamberg", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/border-start-end-radius": { + "modified": "2020-10-15T22:16:40.778Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-start-start-radius": { + "modified": "2020-10-15T22:16:40.498Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/border-style": { + "modified": "2020-10-22T00:09:31.436Z", + "contributors": [ + "YairCaptain", + "SphinxKnight", + "javierpolit", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/border-top": { + "modified": "2019-03-23T22:41:47.976Z", + "contributors": [ + "cgosorio", + "mcclone2001" + ] + }, + "Web/CSS/border-top-color": { + "modified": "2020-10-15T21:59:59.493Z", + "contributors": [ + "jpmontoya182" + ] + }, + "Web/CSS/border-top-left-radius": { + "modified": "2019-03-23T22:27:25.384Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/border-top-right-radius": { + "modified": "2019-03-23T22:27:24.905Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/border-width": { + "modified": "2020-12-03T13:55:01.337Z", + "contributors": [ + "rc925e", + "davisorb95", + "wbamberg", + "SphinxKnight", + "Yisus777", + "teoli", + "Yuichiro", + "Nathymig" + ] + }, + "Web/CSS/bottom": { + "modified": "2019-01-16T15:42:01.210Z", + "contributors": [ + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/box-shadow": { + "modified": "2020-10-15T21:19:58.329Z", + "contributors": [ + "davidpala.dev", + "IsraelFloresDGA", + "Sebastianz", + "Prinz_Rana", + "teoli", + "carloshs92" + ] + }, + "Web/CSS/box-sizing": { + "modified": "2020-10-15T21:37:29.482Z", + "contributors": [ + "amazing79", + "Soyaine", + "manuelizo", + "IsraelFloresDGA", + "GiioBass", + "Derhks", + "Sebastianz", + "juandiegoles" + ] + }, + "Web/CSS/calc()": { + "modified": "2020-11-04T09:08:00.719Z", + "contributors": [ + "chrisdavidmills", + "blanchart", + "mrstork", + "prayash", + "teoli", + "MrBlogger" + ] + }, + "Web/CSS/caret-color": { + "modified": "2019-03-23T22:08:56.287Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/clear": { + "modified": "2020-10-30T03:42:19.832Z", + "contributors": [ + "SphinxKnight", + "Alxbrz19", + "javichito" + ] + }, + "Web/CSS/clip": { + "modified": "2019-03-23T23:33:36.877Z", + "contributors": [ + "Sebastianz", + "teoli", + "nadiafaya" + ] + }, + "Web/CSS/clip-path": { + "modified": "2020-10-15T21:54:58.750Z", + "contributors": [ + "fscholz", + "jorgeherrera9103", + "david-velilla", + "CarlosLinares" + ] + }, + "Web/CSS/color": { + "modified": "2020-10-15T21:15:23.982Z", + "contributors": [ + "rhssr", + "SphinxKnight", + "teoli", + "trada", + "Mgjbot", + "HenryGR" + ] + }, + "Web/CSS/color_value": { + "modified": "2019-03-23T22:37:22.211Z", + "contributors": [ + "blanchart", + "Sebastianz", + "Simplexible", + "pekechis" + ] + }, + "Web/CSS/column-count": { + "modified": "2020-10-15T21:40:29.448Z", + "contributors": [ + "AlePerez92", + "Anonymous", + "Sebastianz", + "Davier182" + ] + }, + "Web/CSS/column-span": { + "modified": "2020-10-15T22:21:55.127Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/CSS/content": { + "modified": "2019-03-23T23:51:59.928Z", + "contributors": [ + "teoli", + "Nathymig", + "HenryGR" + ] + }, + "Web/CSS/cursor": { + "modified": "2019-03-23T23:52:22.554Z", + "contributors": [ + "wbamberg", + "teoli", + "Wrongloop" + ] + }, + "Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor": { + "modified": "2019-03-24T00:04:04.275Z", + "contributors": [ + "teoli", + "fscholz", + "Mgjbot", + "Jorolo" + ] + }, + "Web/CSS/direction": { + "modified": "2019-01-16T15:40:27.790Z", + "contributors": [ + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/display": { + "modified": "2020-10-21T14:14:21.533Z", + "contributors": [ + "johanfvn", + "davidpala.dev", + "NeoFl3x", + "wbamberg", + "evaferreira", + "SphinxKnight", + "devCaso", + "FranciscoCastle" + ] + }, + "Web/CSS/env()": { + "modified": "2020-11-10T11:09:30.133Z", + "contributors": [ + "chrisdavidmills", + "severo" + ] + }, + "Web/CSS/filter": { + "modified": "2019-03-23T22:59:24.815Z", + "contributors": [ + "israel-munoz", + "Sebastianz", + "teoli", + "maiky" + ] + }, + "Web/CSS/filter-function": { + "modified": "2019-03-18T21:34:50.284Z", + "contributors": [ + "lajaso", + "mfluehr" + ] + }, + "Web/CSS/filter-function/blur()": { + "modified": "2020-11-05T09:45:32.642Z", + "contributors": [ + "chrisdavidmills", + "lajaso" + ] + }, + "Web/CSS/filter-function/brightness()": { + "modified": "2020-11-05T09:57:09.596Z", + "contributors": [ + "chrisdavidmills", + "mjsorribas" + ] + }, + "Web/CSS/filter-function/url": { + "modified": "2020-01-10T13:46:46.404Z", + "contributors": [ + "roocce" + ] + }, + "Web/CSS/fit-content": { + "modified": "2020-10-15T22:06:18.387Z", + "contributors": [ + "ocamachor" + ] + }, + "Web/CSS/flex": { + "modified": "2019-03-23T22:31:42.324Z", + "contributors": [ + "Luis_Calvo", + "joshitobuba", + "Enfokat" + ] + }, + "Web/CSS/flex-basis": { + "modified": "2020-08-16T18:24:46.422Z", + "contributors": [ + "metrapach", + "joshitobuba", + "jandrade" + ] + }, + "Web/CSS/flex-direction": { + "modified": "2020-10-15T21:29:59.011Z", + "contributors": [ + "Alex_Figueroa", + "evaferreira", + "Manuel-Kas", + "joshitobuba", + "fscholz", + "Sebastianz", + "elkinbernal" + ] + }, + "Web/CSS/flex-flow": { + "modified": "2019-03-18T21:15:12.282Z", + "contributors": [ + "carlos.millan3", + "abaracedo" + ] + }, + "Web/CSS/flex-grow": { + "modified": "2020-05-06T21:30:31.507Z", + "contributors": [ + "soniarecher", + "joshitobuba" + ] + }, + "Web/CSS/flex-shrink": { + "modified": "2020-10-15T22:00:16.924Z", + "contributors": [ + "deluxury", + "Facundo-Corradini" + ] + }, + "Web/CSS/flex-wrap": { + "modified": "2019-03-23T23:02:38.556Z", + "contributors": [ + "joshitobuba", + "fscholz", + "Sebastianz", + "Rober84" + ] + }, + "Web/CSS/float": { + "modified": "2020-11-07T16:01:06.351Z", + "contributors": [ + "ppalma1963", + "melisb3", + "wbamberg", + "SphinxKnight", + "teoli", + "fscholz", + "Mgjbot", + "Nathymig", + "HenryGR" + ] + }, + "Web/CSS/font": { + "modified": "2019-03-23T23:53:27.791Z", + "contributors": [ + "wbamberg", + "fscholz", + "teoli", + "Mgjbot", + "Nathymig", + "Nukeador", + "RickieesES", + "HenryGR" + ] + }, + "Web/CSS/font-family": { + "modified": "2019-03-23T23:52:00.350Z", + "contributors": [ + "wbamberg", + "fscholz", + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/font-size": { + "modified": "2019-03-23T23:52:02.387Z", + "contributors": [ + "wbamberg", + "fscholz", + "teoli", + "Nathymig", + "RickieesES", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/font-size-adjust": { + "modified": "2019-03-23T23:53:20.314Z", + "contributors": [ + "wbamberg", + "ivangrimaldo", + "fscholz", + "teoli", + "Mgjbot", + "Nathymig", + "HenryGR" + ] + }, + "Web/CSS/font-style": { + "modified": "2019-03-23T23:54:11.290Z", + "contributors": [ + "gustavodibasson", + "ivyixbvp", + "teoli", + "Mgjbot", + "Nathymig", + "RickieesES", + "HenryGR" + ] + }, + "Web/CSS/font-variant": { + "modified": "2019-03-23T23:54:15.244Z", + "contributors": [ + "wbamberg", + "fscholz", + "teoli", + "Mgjbot", + "Nathymig", + "RickieesES", + "HenryGR" + ] + }, + "Web/CSS/font-variant-alternates": { + "modified": "2019-03-23T22:18:05.471Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/font-weight": { + "modified": "2020-10-08T18:46:18.623Z", + "contributors": [ + "jorgetoloza", + "EzeRamirez84", + "UbaldoRosas", + "ivyixbvp", + "SphinxKnight", + "fscholz", + "teoli", + "Mgjbot", + "ethertank", + "Nathymig", + "RickieesES", + "HenryGR" + ] + }, + "Web/CSS/frequency": { + "modified": "2019-03-23T22:22:14.267Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/grid": { + "modified": "2019-03-23T22:08:26.115Z", + "contributors": [ + "macagua", + "andresrisso" + ] + }, + "Web/CSS/grid-auto-columns": { + "modified": "2020-10-15T22:07:00.570Z", + "contributors": [ + "melisb3", + "robyirloreto" + ] + }, + "Web/CSS/grid-auto-rows": { + "modified": "2020-10-15T22:00:41.266Z", + "contributors": [ + "chulesoft", + "deimidis2" + ] + }, + "Web/CSS/grid-column-gap": { + "modified": "2020-10-15T22:01:06.788Z", + "contributors": [ + "agarcilazo", + "klaufel" + ] + }, + "Web/CSS/grid-gap": { + "modified": "2019-03-23T22:13:30.250Z", + "contributors": [ + "ireneml.fr" + ] + }, + "Web/CSS/grid-template-areas": { + "modified": "2019-03-23T22:11:49.454Z", + "contributors": [ + "diroco" + ] + }, + "Web/CSS/grid-template-columns": { + "modified": "2020-10-15T21:57:16.414Z", + "contributors": [ + "fscholz", + "IsraelFloresDGA" + ] + }, + "Web/CSS/grid-template-rows": { + "modified": "2020-10-15T21:57:11.635Z", + "contributors": [ + "AlePerez92", + "fscholz", + "IsraelFloresDGA" + ] + }, + "Web/CSS/height": { + "modified": "2019-03-23T23:54:05.630Z", + "contributors": [ + "israel-munoz", + "teoli", + "Mgjbot", + "Nathymig", + "HenryGR" + ] + }, + "Web/CSS/hyphens": { + "modified": "2020-10-15T22:02:23.515Z", + "contributors": [ + "blanchart", + "AntonioNavajasOjeda" + ] + }, + "Web/CSS/image": { + "modified": "2019-03-23T22:28:08.883Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/image-rendering": { + "modified": "2020-10-15T22:02:06.401Z", + "contributors": [ + "rodrigorila" + ] + }, + "Web/CSS/ime-mode": { + "modified": "2019-01-16T14:38:44.597Z", + "contributors": [ + "teoli", + "fscholz", + "Mgjbot", + "Nathymig", + "HenryGR" + ] + }, + "Web/CSS/inherit": { + "modified": "2019-07-27T06:34:31.498Z", + "contributors": [ + "josepaternina", + "AlejandroJSR7", + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/inheritance": { + "modified": "2019-03-23T23:53:04.499Z", + "contributors": [ + "joseanpg", + "teoli", + "Mgjbot", + "Nathymig", + "HenryGR" + ] + }, + "Web/CSS/initial": { + "modified": "2019-01-16T15:42:24.130Z", + "contributors": [ + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/inline-size": { + "modified": "2020-10-15T22:16:34.800Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/inset": { + "modified": "2020-10-15T22:16:40.193Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/inset-block": { + "modified": "2020-10-15T22:16:40.204Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/inset-block-end": { + "modified": "2020-10-15T22:16:39.037Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/inset-block-start": { + "modified": "2020-10-15T22:16:44.127Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/inset-inline": { + "modified": "2020-10-15T22:16:43.251Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/inset-inline-end": { + "modified": "2020-10-15T22:16:39.864Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/inset-inline-start": { + "modified": "2020-10-15T22:16:43.418Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/integer": { + "modified": "2019-03-23T23:50:21.071Z", + "contributors": [ + "fscholz", + "teoli", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/isolation": { + "modified": "2019-03-23T22:32:29.363Z", + "contributors": [ + "SoftwareRVG", + "javichito" + ] + }, + "Web/CSS/justify-content": { + "modified": "2019-03-23T22:48:18.861Z", + "contributors": [ + "amaiafilo", + "angelfeliz", + "teoli", + "Sebastianz", + "JoaquinBedoian" + ] + }, + "Web/CSS/left": { + "modified": "2020-10-15T21:15:23.699Z", + "contributors": [ + "SphinxKnight", + "miltonjosuerivascastro100", + "Sebastianz", + "teoli", + "ethertank", + "Mgjbot", + "fiorella", + "HenryGR" + ] + }, + "Web/CSS/length": { + "modified": "2019-03-23T23:54:15.791Z", + "contributors": [ + "israel-munoz", + "fscholz", + "teoli", + "deibyod", + "Mgjbot", + "HenryGR" + ] + }, + "Web/CSS/line-height": { + "modified": "2019-06-20T19:43:18.097Z", + "contributors": [ + "jalonnun", + "Daniel_Martin", + "wbamberg", + "IsaacAaron", + "SphinxKnight", + "garolard", + "teoli", + "Mgjbot", + "Nathymig", + "RickieesES", + "HenryGR" + ] + }, + "Web/CSS/linear-gradient()": { + "modified": "2020-11-16T08:56:55.739Z", + "contributors": [ + "chrisdavidmills", + "efrenmartinez", + "rgomez", + "Miguelslo27", + "Sebastianz", + "prayash", + "scarnagot" + ] + }, + "Web/CSS/list-style": { + "modified": "2019-03-23T23:52:08.020Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/list-style-image": { + "modified": "2019-03-23T23:52:12.640Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/list-style-position": { + "modified": "2019-03-23T23:52:11.106Z", + "contributors": [ + "magdic", + "SphinxKnight", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/list-style-type": { + "modified": "2019-03-23T23:52:09.967Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Nathymig", + "ethertank" + ] + }, + "Web/CSS/margin": { + "modified": "2019-03-23T22:26:03.547Z", + "contributors": [ + "Limbian" + ] + }, + "Web/CSS/margin-block": { + "modified": "2020-10-15T22:16:43.806Z", + "contributors": [ + "mariadelrosario98", + "teffcode" + ] + }, + "Web/CSS/margin-block-start": { + "modified": "2020-10-15T22:16:40.788Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/margin-bottom": { + "modified": "2019-03-23T23:13:38.811Z", + "contributors": [ + "wbamberg", + "Sebastianz", + "fscholz", + "damesa" + ] + }, + "Web/CSS/margin-inline": { + "modified": "2020-10-15T22:16:41.777Z", + "contributors": [ + "karen-pal", + "teffcode" + ] + }, + "Web/CSS/margin-inline-end": { + "modified": "2020-10-15T22:16:40.105Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/margin-inline-start": { + "modified": "2020-10-15T22:16:38.735Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/margin-right": { + "modified": "2019-03-23T23:54:10.369Z", + "contributors": [ + "teoli", + "Marti1125" + ] + }, + "Web/CSS/max-block-size": { + "modified": "2020-10-15T22:16:39.543Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/max-height": { + "modified": "2019-03-23T23:52:01.295Z", + "contributors": [ + "wbamberg", + "marc31bilbao", + "teoli", + "Mgjbot", + "Nathymig" + ] + }, + "Web/CSS/max-inline-size": { + "modified": "2020-10-15T22:16:37.228Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/max-width": { + "modified": "2020-10-15T21:16:38.209Z", + "contributors": [ + "SphinxKnight", + "teoli", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/min()": { + "modified": "2020-12-03T10:19:50.144Z", + "contributors": [ + "AlePerez92", + "chrisdavidmills", + "meolivares06" + ] + }, + "Web/CSS/min-block-size": { + "modified": "2020-10-15T22:16:39.045Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/min-height": { + "modified": "2019-03-23T23:51:59.533Z", + "contributors": [ + "wbamberg", + "Sebastianz", + "teoli", + "Nathymig" + ] + }, + "Web/CSS/min-inline-size": { + "modified": "2020-10-15T22:16:37.579Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/min-width": { + "modified": "2019-03-23T23:50:19.370Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "teoli", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/minmax()": { + "modified": "2020-11-16T09:05:45.467Z", + "contributors": [ + "chrisdavidmills", + "jorgemontoyab" + ] + }, + "Web/CSS/normal": { + "modified": "2019-03-23T23:50:19.746Z", + "contributors": [ + "teoli", + "FredB", + "HenryGR" + ] + }, + "Web/CSS/number": { + "modified": "2019-03-23T23:53:45.345Z", + "contributors": [ + "fscholz", + "teoli", + "Mgjbot", + "HenryGR" + ] + }, + "Web/CSS/object-fit": { + "modified": "2020-10-15T21:53:59.281Z", + "contributors": [ + "AlePerez92", + "BubuAnabelas", + "Cristhian-Medina", + "fernandozarco", + "chrisvpr", + "cristianeph" + ] + }, + "Web/CSS/object-position": { + "modified": "2019-03-23T22:31:02.066Z", + "contributors": [ + "thezeeck" + ] + }, + "Web/CSS/opacity": { + "modified": "2019-08-20T11:36:11.809Z", + "contributors": [ + "Armando-Cruz", + "blanchart", + "Manten19", + "UlisesGascon", + "teoli" + ] + }, + "Web/CSS/order": { + "modified": "2019-03-23T22:28:06.551Z", + "contributors": [ + "evaferreira", + "joshitobuba" + ] + }, + "Web/CSS/outline": { + "modified": "2020-10-15T21:49:07.223Z", + "contributors": [ + "danielblazquez", + "IsaacAaron", + "israel-munoz" + ] + }, + "Web/CSS/outline-color": { + "modified": "2019-03-18T21:15:39.790Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/outline-offset": { + "modified": "2019-03-23T22:27:28.876Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/outline-style": { + "modified": "2019-03-18T21:45:18.063Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/outline-width": { + "modified": "2019-03-18T21:16:50.488Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/overflow": { + "modified": "2020-10-15T21:22:11.063Z", + "contributors": [ + "manuelizo", + "SJW", + "marc-ferrer", + "developingo", + "Sebastianz", + "Sheppy", + "teoli", + "_0x" + ] + }, + "Web/CSS/overflow-y": { + "modified": "2020-10-15T21:37:11.176Z", + "contributors": [ + "_deiberchacon", + "Silly-and_Clever", + "teoli", + "Sebastianz", + "yvesmh" + ] + }, + "Web/CSS/padding": { + "modified": "2020-07-02T20:44:00.780Z", + "contributors": [ + "kren.funes17", + "arielnoname", + "Sebastianz", + "fscholz", + "teoli", + "maiky" + ] + }, + "Web/CSS/padding-block": { + "modified": "2020-10-15T22:16:40.169Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/padding-block-end": { + "modified": "2020-10-15T22:16:44.832Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/padding-block-start": { + "modified": "2020-10-15T22:16:44.371Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/padding-bottom": { + "modified": "2019-03-23T22:12:06.885Z", + "contributors": [ + "qsanabria" + ] + }, + "Web/CSS/padding-inline": { + "modified": "2020-10-15T22:16:45.046Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/padding-inline-end": { + "modified": "2020-10-15T22:16:39.998Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/padding-inline-start": { + "modified": "2020-10-15T22:16:41.877Z", + "contributors": [ + "teffcode" + ] + }, + "Web/CSS/padding-top": { + "modified": "2019-03-23T22:12:05.180Z", + "contributors": [ + "qsanabria" + ] + }, + "Web/CSS/perspective": { + "modified": "2019-03-23T23:23:10.717Z", + "contributors": [ + "Sebastianz", + "Prinz_Rana", + "fscholz", + "teoli", + "AngelFQC" + ] + }, + "Web/CSS/porcentaje": { + "modified": "2019-03-23T23:25:05.075Z", + "contributors": [ + "fscholz", + "teoli", + "aerotrink" + ] + }, + "Web/CSS/position": { + "modified": "2020-10-15T21:15:59.180Z", + "contributors": [ + "mollzilla", + "ismamz", + "mauriciopaterninar", + "phurtado1112", + "sejas", + "OttoChamo", + "plaso", + "Aleks07m", + "welm", + "SphinxKnight", + "CarmenCamacho", + "enriqueabsurdum", + "killoblanco", + "teoli", + "Mgjbot", + "HenryGR" + ] + }, + "Web/CSS/quotes": { + "modified": "2020-10-15T21:46:00.335Z", + "contributors": [ + "SJW", + "arroutado" + ] + }, + "Web/CSS/radial-gradient()": { + "modified": "2020-11-18T14:42:09.252Z", + "contributors": [ + "chrisdavidmills", + "hectorcano", + "israel-munoz" + ] + }, + "Web/CSS/repeat()": { + "modified": "2020-11-18T14:44:16.857Z", + "contributors": [ + "chrisdavidmills", + "CrlsMrls", + "IsraelFloresDGA" + ] + }, + "Web/CSS/resize": { + "modified": "2019-03-23T22:49:42.378Z", + "contributors": [ + "SphinxKnight", + "Sebastianz", + "gonzalec" + ] + }, + "Web/CSS/resolución": { + "modified": "2019-03-23T22:38:44.850Z", + "contributors": [ + "Sebastianz", + "Prinz_Rana", + "Conradin88" + ] + }, + "Web/CSS/resolved_value": { + "modified": "2019-03-23T22:16:57.498Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/right": { + "modified": "2019-03-24T00:13:54.957Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Sebastianz", + "teoli", + "FredB", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/rtl": { + "modified": "2019-01-16T15:48:03.556Z", + "contributors": [ + "teoli", + "HenryGR" + ] + }, + "Web/CSS/scroll-behavior": { + "modified": "2019-03-23T22:07:41.439Z", + "contributors": [ + "pantuflo" + ] + }, + "Web/CSS/specified_value": { + "modified": "2019-03-23T22:16:53.752Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/text-decoration": { + "modified": "2019-03-23T22:21:38.548Z", + "contributors": [ + "fitojb", + "israel-munoz" + ] + }, + "Web/CSS/text-decoration-color": { + "modified": "2019-03-23T22:27:00.164Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/text-decoration-line": { + "modified": "2020-10-15T21:49:07.335Z", + "contributors": [ + "AlePerez92", + "israel-munoz" + ] + }, + "Web/CSS/text-decoration-style": { + "modified": "2019-03-18T21:17:28.073Z", + "contributors": [ + "JimP99", + "israel-munoz" + ] + }, + "Web/CSS/text-emphasis": { + "modified": "2019-03-23T22:09:46.786Z", + "contributors": [ + "studioArtbliss" + ] + }, + "Web/CSS/text-emphasis-color": { + "modified": "2020-10-15T21:57:48.189Z", + "contributors": [ + "BubuAnabelas", + "mym2013" + ] + }, + "Web/CSS/text-orientation": { + "modified": "2020-10-15T22:02:16.878Z", + "contributors": [ + "MikeOrtizTrivino" + ] + }, + "Web/CSS/text-overflow": { + "modified": "2020-10-15T21:59:14.245Z", + "contributors": [ + "davidelx", + "xpdv", + "plagasul", + "camilobuitrago" + ] + }, + "Web/CSS/text-shadow": { + "modified": "2019-03-23T22:27:32.186Z", + "contributors": [ + "israel-munoz" + ] + }, + "Web/CSS/text-transform": { + "modified": "2019-10-10T16:32:05.528Z", + "contributors": [ + "Makinita", + "evaferreira", + "israel-munoz" + ] + }, + "Web/CSS/time": { + "modified": "2020-10-15T21:50:52.581Z", + "contributors": [ + "lajaso", + "israel-munoz" + ] + }, + "Web/CSS/top": { + "modified": "2020-07-29T21:08:45.361Z", + "contributors": [ + "clancastor05", + "SphinxKnight", + "davidgg", + "solemoris", + "teoli", + "lcamacho", + "jaumesvdevelopers", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/transform": { + "modified": "2020-11-12T03:08:37.391Z", + "contributors": [ + "SphinxKnight", + "rolivo288", + "SoftwareRVG", + "Sebastianz", + "GersonLazaro", + "fscholz", + "bicentenario", + "Xaviju", + "teoli", + "limonada_prototype" + ] + }, + "Web/CSS/transform-function": { + "modified": "2019-03-23T23:10:41.562Z", + "contributors": [ + "israel-munoz", + "mrstork", + "prayash", + "limbus" + ] + }, + "Web/CSS/transform-function/rotate()": { + "modified": "2020-11-19T16:05:17.901Z", + "contributors": [ + "chrisdavidmills", + "danielblazquez", + "pekechis" + ] + }, + "Web/CSS/transform-function/rotate3d()": { + "modified": "2020-11-19T16:07:08.348Z", + "contributors": [ + "chrisdavidmills", + "jeronimonunez", + "jjyepez" + ] + }, + "Web/CSS/transform-function/scale()": { + "modified": "2020-11-30T10:15:28.610Z", + "contributors": [ + "chrisdavidmills", + "ileonpxsp", + "BubuAnabelas", + "lizbethrojano", + "yomar-dev", + "quiqueciria", + "maramal" + ] + }, + "Web/CSS/transform-function/translate()": { + "modified": "2020-11-30T10:30:15.561Z", + "contributors": [ + "chrisdavidmills", + "AlePerez92", + "hectoraldairah", + "Esteban26", + "murielsan", + "ShakMR" + ] + }, + "Web/CSS/transform-function/translateY()": { + "modified": "2020-11-30T13:00:51.105Z", + "contributors": [ + "chrisdavidmills", + "israel-munoz" + ] + }, + "Web/CSS/transform-function/translateZ()": { + "modified": "2020-11-30T13:02:44.123Z", + "contributors": [ + "chrisdavidmills", + "luisdev-works" + ] + }, + "Web/CSS/transform-origin": { + "modified": "2019-03-23T23:20:59.497Z", + "contributors": [ + "Sebastianz", + "fscholz", + "teoli", + "limonada_prototype" + ] + }, + "Web/CSS/transform-style": { + "modified": "2020-10-15T22:31:22.949Z", + "contributors": [ + "luisdev-works" + ] + }, + "Web/CSS/transition": { + "modified": "2019-03-23T22:53:01.094Z", + "contributors": [ + "FedericoMarmo", + "fscholz", + "adlr", + "Sebastianz", + "yvesmh" + ] + }, + "Web/CSS/transition-delay": { + "modified": "2019-03-23T23:21:44.912Z", + "contributors": [ + "mrstork", + "fscholz", + "Sebastianz", + "teoli", + "alcuinodeyork" + ] + }, + "Web/CSS/transition-duration": { + "modified": "2020-10-15T22:27:34.821Z", + "contributors": [ + "luisafvaca" + ] + }, + "Web/CSS/transition-property": { + "modified": "2020-10-15T21:58:20.034Z", + "contributors": [ + "juan-ferrer-toribio" + ] + }, + "Web/CSS/user-select": { + "modified": "2020-10-15T22:22:14.480Z", + "contributors": [ + "qwerty726" + ] + }, + "Web/CSS/var()": { + "modified": "2020-11-04T09:10:15.439Z", + "contributors": [ + "chrisdavidmills", + "jroji" + ] + }, + "Web/CSS/vertical-align": { + "modified": "2019-03-23T23:36:07.945Z", + "contributors": [ + "Sebastianz", + "teoli", + "riledhel" + ] + }, + "Web/CSS/visibility": { + "modified": "2019-03-23T23:52:08.163Z", + "contributors": [ + "wbamberg", + "teoli", + "Nathymig", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/white-space": { + "modified": "2019-06-12T21:57:59.855Z", + "contributors": [ + "jdaison", + "missmakita" + ] + }, + "Web/CSS/widows": { + "modified": "2020-10-15T21:59:52.045Z", + "contributors": [ + "jpmontoya182" + ] + }, + "Web/CSS/width": { + "modified": "2019-03-23T23:50:07.221Z", + "contributors": [ + "israel-munoz", + "diegocanal", + "teoli", + "HenryGR", + "Mgjbot" + ] + }, + "Web/CSS/writing-mode": { + "modified": "2019-03-23T22:28:35.899Z", + "contributors": [ + "fitojb" + ] + }, + "Web/CSS/z-index": { + "modified": "2020-03-20T18:20:08.966Z", + "contributors": [ + "camsa", + "javichito", + "teoli", + "AntonioNavajas" + ] + }, + "Web/CSS/zoom": { + "modified": "2019-03-23T22:35:36.401Z", + "contributors": [ + "carloque", + "Sebastianz", + "pekechis" + ] + }, + "Web/Demos_of_open_web_technologies": { + "modified": "2019-03-23T22:33:45.097Z", + "contributors": [ + "SoftwareRVG", + "elfoxero" + ] + }, + "Web/EXSLT": { + "modified": "2019-03-18T20:59:19.473Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Mgjbot", + "Talisker" + ] + }, + "Web/EXSLT/exsl": { + "modified": "2019-01-16T15:21:39.795Z", + "contributors": [ + "ExE-Boss", + "teoli", + "Anonymous" + ] + }, + "Web/EXSLT/exsl/node-set": { + "modified": "2019-03-18T20:59:21.647Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Mgjbot", + "Talisker" + ] + }, + "Web/EXSLT/exsl/object-type": { + "modified": "2019-03-23T23:51:27.324Z", + "contributors": [ + "ExE-Boss", + "lajaso", + "Mgjbot", + "Talisker" + ] + }, + "Web/EXSLT/math": { + "modified": "2019-01-16T15:25:29.279Z", + "contributors": [ + "ExE-Boss", + "teoli", + "Anonymous" + ] + }, + "Web/EXSLT/math/highest": { + "modified": "2019-03-18T20:59:18.500Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "lajaso", + "Mgjbot", + "Talisker" + ] + }, + "Web/EXSLT/math/lowest": { + "modified": "2019-03-18T20:59:17.805Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "lajaso", + "Mgjbot", + "Talisker" + ] + }, + "Web/EXSLT/math/max": { + "modified": "2019-03-18T20:59:18.804Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "lajaso", + "Talisker" + ] + }, + "Web/EXSLT/math/min": { + "modified": "2019-03-18T20:59:20.254Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "lajaso", + "Talisker" + ] + }, + "Web/EXSLT/regexp": { + "modified": "2019-01-16T15:23:22.952Z", + "contributors": [ + "ExE-Boss", + "teoli", + "Anonymous" + ] + }, + "Web/EXSLT/regexp/match": { + "modified": "2019-03-18T20:59:21.504Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/regexp/replace": { + "modified": "2019-03-18T20:59:20.093Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/regexp/test": { + "modified": "2019-03-18T20:59:20.575Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/set": { + "modified": "2019-01-16T15:23:27.004Z", + "contributors": [ + "ExE-Boss", + "teoli", + "Anonymous" + ] + }, + "Web/EXSLT/set/difference": { + "modified": "2019-03-18T20:59:18.953Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/set/distinct": { + "modified": "2019-03-18T20:59:22.067Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/set/has-same-node": { + "modified": "2019-03-18T20:59:20.421Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/set/intersection": { + "modified": "2019-03-18T20:59:18.660Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/set/leading": { + "modified": "2019-03-18T20:59:17.662Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "teoli", + "Talisker" + ] + }, + "Web/EXSLT/set/trailing": { + "modified": "2019-03-18T20:59:19.267Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "teoli", + "Talisker" + ] + }, + "Web/EXSLT/str": { + "modified": "2019-01-16T15:24:51.477Z", + "contributors": [ + "ExE-Boss", + "teoli", + "Anonymous" + ] + }, + "Web/EXSLT/str/concat": { + "modified": "2019-03-18T20:59:20.717Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/str/split": { + "modified": "2019-03-18T20:59:17.504Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/EXSLT/str/tokenize": { + "modified": "2019-03-18T20:59:19.116Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Talisker" + ] + }, + "Web/Events": { + "modified": "2019-03-23T23:21:27.399Z", + "contributors": [ + "ExE-Boss", + "wbamberg", + "gabo8611" + ] + }, + "Web/Events/DOMContentLoaded": { + "modified": "2019-09-06T00:37:43.389Z", + "contributors": [ + "wbamberg", + "jramcast", + "ExE-Boss", + "fscholz", + "AlexOfSoCal", + "jdmgarcia", + "daniville" + ] + }, + "Web/Events/abort": { + "modified": "2019-04-30T13:47:43.431Z", + "contributors": [ + "wbamberg", + "ExE-Boss", + "fscholz", + "balboag" + ] + }, + "Web/Events/animationend": { + "modified": "2019-03-23T22:31:35.580Z", + "contributors": [ + "ExE-Boss", + "soncco" + ] + }, + "Web/Events/beforeunload": { + "modified": "2019-04-30T14:05:00.135Z", + "contributors": [ + "wbamberg", + "ExE-Boss", + "anasyusef", + "Bant89" + ] + }, + "Web/Events/blur": { + "modified": "2019-03-23T22:40:57.440Z", + "contributors": [ + "ExE-Boss", + "AlePerez92", + "fscholz", + "teoli", + "javier-alba" + ] + }, + "Web/Events/load": { + "modified": "2019-04-30T13:43:52.776Z", + "contributors": [ + "wbamberg", + "ExE-Boss", + "AlePerez92" + ] + }, + "Web/Events/loadend": { + "modified": "2019-03-23T22:09:49.071Z", + "contributors": [ + "ExE-Boss", + "fscholz", + "darioperez" + ] + }, + "Web/Events/pointerlockchange": { + "modified": "2019-03-18T21:16:43.654Z", + "contributors": [ + "ExE-Boss", + "fscholz", + "arquigames" + ] + }, + "Web/Events/transitioncancel": { + "modified": "2019-04-30T14:14:15.478Z", + "contributors": [ + "wbamberg", + "ExE-Boss", + "juan-ferrer-toribio" + ] + }, + "Web/Events/transitionend": { + "modified": "2019-03-23T22:04:18.976Z", + "contributors": [ + "ExE-Boss", + "fscholz", + "juan-ferrer-toribio" + ] + }, + "Web/Guide": { + "modified": "2019-07-18T20:35:32.528Z", + "contributors": [ + "clarii", + "D3Portillo", + "Breaking Pitt", + "VictorAbdon", + "n2nand", + "Puchoti", + "DrTrucho", + "DanielCarron", + "daroswing", + "osodi", + "LeoHirsch", + "hjaguen", + "ethertank", + "Sheppy" + ] + }, + "Web/Guide/AJAX": { + "modified": "2019-03-18T21:14:54.246Z", + "contributors": [ + "AlePerez92", + "chrisdavidmills", + "ccarruitero", + "chukito", + "Mgjbot", + "Nukeador", + "Summit677", + "Pascalc", + "Jorolo", + "Marianov", + "Takenbot", + "Baluart", + "Breaking Pitt", + "Seres" + ] + }, + "Web/Guide/AJAX/Comunidad": { + "modified": "2019-03-23T23:41:30.919Z", + "contributors": [ + "chrisdavidmills", + "teoli", + "Jorolo" + ] + }, + "Web/Guide/AJAX/Primeros_Pasos": { + "modified": "2019-03-23T23:54:11.584Z", + "contributors": [ + "padrecedano", + "chrisdavidmills", + "mili01gm", + "Mgjbot", + "Luis Hidalgo", + "Hegael", + "Tatan", + "Takenbot", + "Jorolo", + "Puxaalonso", + "Nukeador", + "Noctuido", + "Seres" + ] + }, + "Web/Guide/API": { + "modified": "2019-09-11T09:31:45.916Z", + "contributors": [ + "SphinxKnight", + "VictorAbdon", + "Sheppy" + ] + }, + "Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained": { + "modified": "2019-03-23T23:27:10.499Z", + "contributors": [ + "Sheppy", + "rubencidlara" + ] + }, + "Web/Guide/API/Vibration": { + "modified": "2019-03-23T23:03:32.169Z", + "contributors": [ + "juancjara" + ] + }, + "Web/Guide/CSS/Block_formatting_context": { + "modified": "2019-03-23T22:32:27.340Z", + "contributors": [ + "Enesimus", + "javichito" + ] + }, + "Web/Guide/CSS/probando_media_queries": { + "modified": "2019-03-23T23:07:40.812Z", + "contributors": [ + "TibicenasDesign" + ] + }, + "Web/Guide/DOM": { + "modified": "2019-03-23T23:27:17.444Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Guide/DOM/Events": { + "modified": "2019-03-23T23:27:18.635Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Guide/DOM/Events/Creacion_y_Activación_Eventos": { + "modified": "2019-03-23T22:58:27.867Z", + "contributors": [ + "gAval997", + "juanpablocarrillo", + "BrunoViera", + "enreda", + "Soid" + ] + }, + "Web/Guide/DOM/Events/eventos_controlador": { + "modified": "2020-08-01T23:47:25.815Z", + "contributors": [ + "Enesimus", + "alesalva" + ] + }, + "Web/Guide/Graphics": { + "modified": "2020-05-19T14:31:25.384Z", + "contributors": [ + ".bkjop0", + "lassergraf", + "CarlosEduardoEncinas", + "pescadito.2007", + "rogeliomtx", + "CarlosQuijano", + "lalo2013" + ] + }, + "Web/Guide/HTML/Canvas_tutorial": { + "modified": "2019-03-23T23:18:23.090Z", + "contributors": [ + "fniwes", + "DeiberChacon", + "jeancgarciaq" + ] + }, + "Web/Guide/HTML/Canvas_tutorial/Advanced_animations": { + "modified": "2019-03-23T22:11:01.831Z", + "contributors": [ + "elagat" + ] + }, + "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors": { + "modified": "2020-05-15T18:35:37.655Z", + "contributors": [ + "dimaio77" + ] + }, + "Web/Guide/HTML/Canvas_tutorial/Basic_animations": { + "modified": "2019-10-10T16:52:52.102Z", + "contributors": [ + "Sergio_Gonzalez_Collado", + "lajaso", + "Huarseral" + ] + }, + "Web/Guide/HTML/Canvas_tutorial/Basic_usage": { + "modified": "2020-04-24T15:40:04.067Z", + "contributors": [ + "Davidaz", + "mariogalan", + "teoli", + "guillermomartinmarco", + "eoasakura", + "mamigove" + ] + }, + "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas": { + "modified": "2019-03-23T23:15:03.361Z", + "contributors": [ + "cepeami01", + "AlexisRC463", + "matiasrvergara", + "Blackangel1965", + "ErikMj69", + "alkaithil", + "faqndo", + "martinzaraterafael", + "gabriel15", + "Marezelej" + ] + }, + "Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility": { + "modified": "2019-03-18T21:31:01.983Z", + "contributors": [ + "cepeami01" + ] + }, + "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas": { + "modified": "2019-03-23T23:18:04.030Z", + "contributors": [ + "Cax" + ] + }, + "Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas": { + "modified": "2019-03-18T21:42:58.094Z", + "contributors": [ + "Luis_Gentil", + "JulianSoto", + "anfuca" + ] + }, + "Web/Guide/HTML/Editable_content": { + "modified": "2019-03-23T22:09:49.599Z", + "contributors": [ + "vinyetcg", + "JoaquinGiordano", + "V.Morantes" + ] + }, + "Web/Guide/HTML/Introduction_alhtml_clone": { + "modified": "2019-03-23T23:11:36.473Z", + "contributors": [ + "emanuelvega", + "Cristhoper" + ] + }, + "Web/Guide/HTML/categorias_de_contenido": { + "modified": "2020-09-06T09:32:45.431Z", + "contributors": [ + "Nachec", + "BrayanAvian", + "raecillacastellana", + "eljonims", + "eliasrodeloso" + ] + }, + "Web/Guide/Movil": { + "modified": "2019-03-23T22:48:50.706Z", + "contributors": [ + "miguelsp" + ] + }, + "Web/Guide/Parsing_and_serializing_XML": { + "modified": "2019-03-23T22:10:22.365Z", + "contributors": [ + "FenixAlive" + ] + }, + "Web/Guide/Performance": { + "modified": "2019-03-23T23:21:17.984Z", + "contributors": [ + "DeiberChacon", + "Sheppy" + ] + }, + "Web/Guide/Performance/Usando_web_workers": { + "modified": "2020-09-27T14:14:17.948Z", + "contributors": [ + "hendaniel", + "arbesulo", + "zynt1102", + "albertovelazmoliner", + "luisdos", + "EricMoIr", + "hmorv", + "DeiberChacon", + "rsalgado", + "mvargasmoran" + ] + }, + "Web/Guide/Usando_Objetos_FormData": { + "modified": "2019-03-23T23:19:26.530Z", + "contributors": [ + "ramingar", + "Siro_Diaz", + "wilo" + ] + }, + "Web/HTML": { + "modified": "2020-12-04T02:55:42.795Z", + "contributors": [ + "SphinxKnight", + "cesarmerino.ec71", + "barriosines07", + "Nachec", + "Enesimus", + "Neto503", + "hackertj", + "chrisdavidmills", + "blanchart", + "roocce", + "titox", + "donpaginasweboficial", + "Kenikser", + "RayPL", + "YeseniaMariela", + "gabriel-ar", + "PabloLajarin", + "JoseBarakat", + "raecillacastellana", + "israel-munoz", + "jsx", + "Hteemo", + "eduMXM", + "enesimo", + "MARVINFLORENTINO", + "pekechis", + "monserratcallejaalmazan", + "thzunder", + "roheru", + "vltamara", + "ArcangelZith", + "ronyworld", + "LeoHirsch", + "CarlosQuijano", + "AngelFQC" + ] + }, + "Web/HTML/Atributos": { + "modified": "2019-03-23T23:21:50.772Z", + "contributors": [ + "raecillacastellana", + "Cdam", + "vltamara", + "Shinigami-sama", + "welm", + "noografo", + "Benito", + "LeoHirsch", + "sha" + ] + }, + "Web/HTML/Atributos/accept": { + "modified": "2020-10-15T22:34:00.656Z", + "contributors": [ + "Nachec" + ] + }, + "Web/HTML/Atributos/autocomplete": { + "modified": "2019-04-06T00:39:59.162Z", + "contributors": [ + "qmarquez", + "Raulpascual2" + ] + }, + "Web/HTML/Atributos/min": { + "modified": "2020-10-15T22:33:58.169Z", + "contributors": [ + "Nachec" + ] + }, + "Web/HTML/Atributos/minlength": { + "modified": "2020-10-15T22:33:56.870Z", + "contributors": [ + "Nachec" + ] + }, + "Web/HTML/Atributos/multiple": { + "modified": "2020-09-08T01:48:55.405Z", + "contributors": [ + "Nachec" + ] + }, + "Web/HTML/Atributos_Globales": { + "modified": "2020-10-15T21:39:25.776Z", + "contributors": [ + "Nachec", + "PacoVela", + "imangas", + "vltamara" + ] + }, + "Web/HTML/Atributos_Globales/accesskey": { + "modified": "2019-03-23T22:41:37.238Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/autocapitalize": { + "modified": "2020-10-15T22:12:15.178Z", + "contributors": [ + "Nachec", + "carlosgocereceda", + "WilsonIsAliveClone", + "Raulpascual2" + ] + }, + "Web/HTML/Atributos_Globales/class": { + "modified": "2019-03-23T22:41:38.505Z", + "contributors": [ + "imangas", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/contenteditable": { + "modified": "2019-03-23T22:41:31.507Z", + "contributors": [ + "ManuAlvarado22", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/contextmenu": { + "modified": "2019-03-23T22:41:33.594Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/data-*": { + "modified": "2019-06-27T12:32:36.980Z", + "contributors": [ + "deyvirosado", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/dir": { + "modified": "2019-03-23T22:41:19.442Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/draggable": { + "modified": "2019-03-23T22:41:17.791Z", + "contributors": [ + "JuanSerrano02", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/dropzone": { + "modified": "2019-03-23T22:41:19.266Z", + "contributors": [ + "JuanSerrano02", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/hidden": { + "modified": "2019-03-23T22:41:18.690Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/id": { + "modified": "2019-03-23T22:45:39.709Z", + "contributors": [ + "vanesa", + "DavidZabaleta", + "eoasakura" + ] + }, + "Web/HTML/Atributos_Globales/is": { + "modified": "2020-10-15T22:04:27.264Z", + "contributors": [ + "daniel.duarte" + ] + }, + "Web/HTML/Atributos_Globales/itemid": { + "modified": "2019-03-23T22:37:36.858Z", + "contributors": [ + "pekechis" + ] + }, + "Web/HTML/Atributos_Globales/itemprop": { + "modified": "2019-03-23T22:41:15.543Z", + "contributors": [ + "rhssr", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/itemref": { + "modified": "2019-03-23T22:36:41.055Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/itemscope": { + "modified": "2020-10-15T21:41:28.202Z", + "contributors": [ + "JuanSerrano02", + "chrisvpr", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/lang": { + "modified": "2019-03-23T22:41:11.276Z", + "contributors": [ + "agonzalezml", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/slot": { + "modified": "2020-10-15T22:04:16.315Z", + "contributors": [ + "daniel.duarte" + ] + }, + "Web/HTML/Atributos_Globales/spellcheck": { + "modified": "2019-03-23T22:41:06.455Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/style": { + "modified": "2019-03-23T22:41:09.210Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/tabindex": { + "modified": "2019-07-12T03:22:15.997Z", + "contributors": [ + "ChrisMHM", + "bamvoo", + "cabetancourtc", + "StripTM", + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/title": { + "modified": "2019-03-23T22:40:44.282Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/translate": { + "modified": "2019-03-23T22:40:27.406Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Atributos_Globales/x-ms-acceleratorkey": { + "modified": "2019-03-18T21:20:44.665Z", + "contributors": [ + "WriestTavo" + ] + }, + "Web/HTML/Atributos_de_configuracion_CORS": { + "modified": "2019-03-23T22:46:11.986Z", + "contributors": [ + "eporta88", + "virlliNia", + "vltamara" + ] + }, + "Web/HTML/Block-level_elements": { + "modified": "2019-03-18T20:44:10.775Z", + "contributors": [ + "ManuelPalominochirote", + "raecillacastellana", + "dinael", + "pekechis", + "erdavo", + "vltamara", + "teoli", + "MILTON.AGUILAR" + ] + }, + "Web/HTML/Canvas": { + "modified": "2019-10-10T16:45:32.554Z", + "contributors": [ + "lajaso", + "jagomf", + "teoli", + "ethertank", + "jesusmercado", + "dextra", + "beto21", + "inma_610", + "RickieesES", + "Pgulijczuk", + "kourt_xand", + "Fifthtoe", + "Mgjbot" + ] + }, + "Web/HTML/Canvas/A_basic_ray-caster": { + "modified": "2019-03-19T08:57:21.057Z", + "contributors": [ + "AzazelN28", + "Fandres91", + "dkocho4", + "preteric" + ] + }, + "Web/HTML/Canvas/Drawing_graphics_with_canvas": { + "modified": "2019-03-23T23:19:53.719Z", + "contributors": [ + "teoli", + "rubencidlara" + ] + }, + "Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida": { + "modified": "2020-07-16T22:22:32.156Z", + "contributors": [ + "ZKoaLa", + "nazhaj", + "JuanC_01" + ] + }, + "Web/HTML/Elemento": { + "modified": "2020-07-13T03:12:39.708Z", + "contributors": [ + "Enesimus", + "IsraelFloresDGA", + "ivanhelo", + "gabriel-ar", + "raecillacastellana", + "imangas", + "jccancelo", + "vltamara", + "teoli", + "LinoJaime", + "Rkovac", + "betoscopio", + "semptrion", + "StripTM", + "deimidis", + "Mgjbot", + "Klosma", + "Jorolo" + ] + }, + "Web/HTML/Elemento/Elementos_títulos": { + "modified": "2019-03-23T23:41:24.635Z", + "contributors": [ + "evaferreira", + "chrisdavidmills", + "israel-munoz", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/Etiqueta_Personalizada_HTML5": { + "modified": "2019-03-23T22:40:57.260Z", + "contributors": [ + "Lazaro" + ] + }, + "Web/HTML/Elemento/Shadow": { + "modified": "2019-03-23T22:06:38.273Z", + "contributors": [ + "H4isan" + ] + }, + "Web/HTML/Elemento/Tipos_de_elementos": { + "modified": "2019-03-23T23:46:22.404Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "ethertank", + "Klosma", + "Jorolo" + ] + }, + "Web/HTML/Elemento/a": { + "modified": "2020-12-02T02:55:47.706Z", + "contributors": [ + "SphinxKnight", + "xtrs84zk", + "HectorFranco", + "sergio_p_d", + "julioematasv", + "ManuelSLemos", + "raecillacastellana", + "teoli", + "Nukeador", + "RickieesES", + "HenryGR", + "Mgjbot" + ] + }, + "Web/HTML/Elemento/abbr": { + "modified": "2019-03-23T23:41:48.686Z", + "contributors": [ + "vanesa", + "abaracedo", + "jigs12", + "welm", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/acronym": { + "modified": "2019-03-23T23:41:54.391Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/address": { + "modified": "2019-03-23T23:41:48.972Z", + "contributors": [ + "abaracedo", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/applet": { + "modified": "2019-03-23T23:42:26.076Z", + "contributors": [ + "Sebastianz", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/area": { + "modified": "2019-03-23T23:41:50.345Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/article": { + "modified": "2020-04-14T03:59:04.779Z", + "contributors": [ + "Jx1ls", + "wbamberg", + "teoli", + "deimidis" + ] + }, + "Web/HTML/Elemento/aside": { + "modified": "2019-05-13T08:38:38.128Z", + "contributors": [ + "blanchart", + "wbamberg", + "teoli", + "trevorh", + "ccarruitero", + "inma_610" + ] + }, + "Web/HTML/Elemento/audio": { + "modified": "2019-03-24T00:17:32.335Z", + "contributors": [ + "wbamberg", + "teoli", + "tregagnon", + "RickieesES", + "inma_610" + ] + }, + "Web/HTML/Elemento/b": { + "modified": "2019-03-23T23:41:59.385Z", + "contributors": [ + "gabrielvol", + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/base": { + "modified": "2019-03-23T23:41:55.648Z", + "contributors": [ + "raecillacastellana", + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/basefont": { + "modified": "2019-03-23T23:42:33.059Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/bdi": { + "modified": "2019-03-23T22:37:44.087Z", + "contributors": [ + "pekechis", + "teoli" + ] + }, + "Web/HTML/Elemento/bdo": { + "modified": "2019-03-23T23:41:59.174Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/bgsound": { + "modified": "2019-10-10T16:35:21.119Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Elemento/big": { + "modified": "2019-03-23T23:42:00.157Z", + "contributors": [ + "Sebastianz", + "jigs12", + "welm", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/blink": { + "modified": "2019-10-10T16:37:40.291Z", + "contributors": [ + "teoli", + "jcr4" + ] + }, + "Web/HTML/Elemento/blockquote": { + "modified": "2019-03-23T23:42:29.095Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/body": { + "modified": "2020-10-15T22:34:39.725Z", + "contributors": [ + "Nachec" + ] + }, + "Web/HTML/Elemento/br": { + "modified": "2019-03-23T23:42:25.427Z", + "contributors": [ + "vanesa", + "abaracedo", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/button": { + "modified": "2020-10-15T21:13:54.408Z", + "contributors": [ + "MarielaBR", + "evaferreira", + "Sebastianz", + "jigs12", + "oece", + "teoli", + "ethertank", + "Jorolo" + ] + }, + "Web/HTML/Elemento/canvas": { + "modified": "2019-03-24T00:07:43.236Z", + "contributors": [ + "wbamberg", + "evaferreira", + "teoli", + "inma_610", + "xaky" + ] + }, + "Web/HTML/Elemento/caption": { + "modified": "2019-03-23T23:42:13.711Z", + "contributors": [ + "camilai", + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/center": { + "modified": "2020-04-23T17:50:49.499Z", + "contributors": [ + "JAMC", + "blanchart", + "Sebastianz", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/cite": { + "modified": "2019-03-23T23:42:34.535Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/code": { + "modified": "2019-03-23T23:41:28.451Z", + "contributors": [ + "BubuAnabelas", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/col": { + "modified": "2019-03-23T23:42:14.518Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/colgroup": { + "modified": "2019-03-23T23:42:18.079Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/command": { + "modified": "2019-10-05T04:48:52.506Z", + "contributors": [ + "titox", + "jcr4" + ] + }, + "Web/HTML/Elemento/content": { + "modified": "2019-03-23T22:36:12.624Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Elemento/data": { + "modified": "2019-07-24T08:09:10.849Z", + "contributors": [ + "SphinxKnight", + "mikecolina", + "raecillacastellana" + ] + }, + "Web/HTML/Elemento/datalist": { + "modified": "2020-10-15T21:13:43.994Z", + "contributors": [ + "mfranzke", + "hernanarica", + "miguelgilmartinez", + "Luuis", + "SphinxKnight", + "teoli", + "translatoon", + "Izel" + ] + }, + "Web/HTML/Elemento/dd": { + "modified": "2020-10-15T21:18:43.107Z", + "contributors": [ + "IsraelFloresDGA", + "jigs12", + "johnmejia", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/del": { + "modified": "2019-03-18T21:11:06.542Z", + "contributors": [ + "duduindo", + "teoli", + "torresnicolas", + "Jorolo" + ] + }, + "Web/HTML/Elemento/details": { + "modified": "2019-07-23T13:52:13.415Z", + "contributors": [ + "Krnan", + "jcr4" + ] + }, + "Web/HTML/Elemento/dfn": { + "modified": "2019-03-18T21:11:06.323Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/dialog": { + "modified": "2020-10-15T21:43:09.315Z", + "contributors": [ + "danielblazquez", + "abaracedo" + ] + }, + "Web/HTML/Elemento/dir": { + "modified": "2019-03-18T21:11:06.122Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/div": { + "modified": "2019-03-23T23:42:24.990Z", + "contributors": [ + "Neto2412", + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/dl": { + "modified": "2020-10-15T21:18:47.033Z", + "contributors": [ + "iign", + "IsraelFloresDGA", + "jigs12", + "johnmejia", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/dt": { + "modified": "2020-10-15T21:18:46.570Z", + "contributors": [ + "IsraelFloresDGA", + "jigs12", + "ander2", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/element": { + "modified": "2019-03-23T22:38:36.820Z", + "contributors": [ + "raecillacastellana", + "kramery" + ] + }, + "Web/HTML/Elemento/em": { + "modified": "2019-03-23T23:41:24.943Z", + "contributors": [ + "BubuAnabelas", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/embed": { + "modified": "2019-03-24T00:07:02.501Z", + "contributors": [ + "wbamberg", + "teoli", + "inma_610" + ] + }, + "Web/HTML/Elemento/fieldset": { + "modified": "2019-03-24T00:04:28.839Z", + "contributors": [ + "dmarchena", + "Sebastianz", + "teoli", + "roperzh", + "ethertank", + "Klosma", + "Jorolo" + ] + }, + "Web/HTML/Elemento/figcaption": { + "modified": "2020-10-15T21:43:37.764Z", + "contributors": [ + "danieltacho", + "danielblazquez", + "BrayanAvian", + "pekechis" + ] + }, + "Web/HTML/Elemento/figure": { + "modified": "2019-03-24T00:07:44.105Z", + "contributors": [ + "wbamberg", + "teoli", + "inma_610", + "translatoon" + ] + }, + "Web/HTML/Elemento/font": { + "modified": "2019-03-23T23:42:25.753Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/footer": { + "modified": "2019-03-24T00:06:10.667Z", + "contributors": [ + "teoli", + "translatoon" + ] + }, + "Web/HTML/Elemento/form": { + "modified": "2019-03-23T23:38:31.636Z", + "contributors": [ + "teoli", + "jesanchez", + "jsalinas" + ] + }, + "Web/HTML/Elemento/frame": { + "modified": "2019-03-23T23:42:33.478Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/frameset": { + "modified": "2019-03-23T23:42:33.678Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/head": { + "modified": "2019-03-23T23:41:19.487Z", + "contributors": [ + "israel-munoz", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/header": { + "modified": "2019-09-22T13:38:40.530Z", + "contributors": [ + "duduindo", + "erix2016", + "wbamberg", + "teoli", + "trevorh", + "deimidis", + "translatoon" + ] + }, + "Web/HTML/Elemento/hgroup": { + "modified": "2020-04-16T18:54:49.840Z", + "contributors": [ + "camsa", + "wbamberg", + "eazel7", + "harthe13", + "teoli", + "ccarruitero", + "percy@mozilla.pe" + ] + }, + "Web/HTML/Elemento/hr": { + "modified": "2019-03-23T23:41:46.133Z", + "contributors": [ + "wissol", + "gabrielvol", + "jigs12", + "teoli", + "welm", + "Jorolo" + ] + }, + "Web/HTML/Elemento/html": { + "modified": "2019-03-23T23:41:20.478Z", + "contributors": [ + "raecillacastellana", + "arturoblack", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/i": { + "modified": "2019-03-18T21:11:05.917Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/iframe": { + "modified": "2020-10-15T21:20:22.917Z", + "contributors": [ + "mirinnes", + "nadya.serrano", + "danielblazquez", + "duduindo", + "wbamberg", + "antoiba86", + "jhonnycano@hotmail.com", + "teoli", + "aguztinrs" + ] + }, + "Web/HTML/Elemento/image": { + "modified": "2019-03-23T22:38:59.070Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Elemento/img": { + "modified": "2020-07-12T20:16:35.983Z", + "contributors": [ + "maodecolombia", + "thzunder", + "teoli", + "makoescalzo" + ] + }, + "Web/HTML/Elemento/input": { + "modified": "2020-07-14T01:15:57.719Z", + "contributors": [ + "maodecolombia", + "KacosPro", + "moisesalmonte", + "israel-munoz", + "Alejandra.B", + "garciaFullana", + "j-light", + "chech", + "dennistobar", + "welm", + "Johsua", + "byverdu", + "chipsweb", + "teoli", + "ovnicraft" + ] + }, + "Web/HTML/Elemento/input/Botón": { + "modified": "2019-04-18T16:11:40.984Z", + "contributors": [ + "IsaacAaron", + "joelarmad", + "LexAenima" + ] + }, + "Web/HTML/Elemento/input/checkbox": { + "modified": "2019-05-13T05:40:59.628Z", + "contributors": [ + "AlePerez92", + "BetsabethTorrres", + "j-light", + "FranRomero", + "JoseEnrique" + ] + }, + "Web/HTML/Elemento/input/color": { + "modified": "2019-03-23T22:37:43.300Z", + "contributors": [ + "fitojb", + "Alesan7" + ] + }, + "Web/HTML/Elemento/input/date": { + "modified": "2019-10-10T16:45:44.142Z", + "contributors": [ + "ANAIDJM1", + "fitojb" + ] + }, + "Web/HTML/Elemento/input/datetime": { + "modified": "2019-03-23T22:36:20.508Z", + "contributors": [ + "AngelMunoz", + "jcr4" + ] + }, + "Web/HTML/Elemento/input/email": { + "modified": "2020-10-15T22:11:48.198Z", + "contributors": [ + "Nachec", + "facuarmo", + "MarielaBR" + ] + }, + "Web/HTML/Elemento/input/hidden": { + "modified": "2020-10-15T22:10:33.714Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/HTML/Elemento/input/number": { + "modified": "2020-10-15T22:26:16.273Z", + "contributors": [ + "roocce" + ] + }, + "Web/HTML/Elemento/input/password": { + "modified": "2019-03-23T22:38:38.107Z", + "contributors": [ + "MarielaBR", + "xxx41", + "AlvaroNieto" + ] + }, + "Web/HTML/Elemento/input/range": { + "modified": "2019-03-18T20:57:13.760Z", + "contributors": [ + "SphinxKnight", + "KikeSan", + "Luis_Calvo" + ] + }, + "Web/HTML/Elemento/input/text": { + "modified": "2020-10-15T22:34:26.828Z", + "contributors": [ + "Nachec" + ] + }, + "Web/HTML/Elemento/ins": { + "modified": "2019-07-06T05:38:19.222Z", + "contributors": [ + "baumannzone", + "duduindo", + "welm", + "teoli", + "torresnicolas", + "Jorolo" + ] + }, + "Web/HTML/Elemento/isindex": { + "modified": "2019-03-23T22:36:13.994Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Elemento/kbd": { + "modified": "2019-03-18T21:11:05.093Z", + "contributors": [ + "duduindo", + "welm", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/keygen": { + "modified": "2019-03-24T00:06:20.618Z", + "contributors": [ + "wbamberg", + "teoli", + "deimidis" + ] + }, + "Web/HTML/Elemento/label": { + "modified": "2019-03-23T23:22:26.460Z", + "contributors": [ + "ardillan", + "gcejas", + "teoli", + "WillyMaikowski" + ] + }, + "Web/HTML/Elemento/legend": { + "modified": "2019-06-05T17:18:09.680Z", + "contributors": [ + "Ivnosing", + "Sebastianz", + "saski", + "teoli", + "Klosma", + "Jorolo" + ] + }, + "Web/HTML/Elemento/li": { + "modified": "2019-03-18T21:11:04.870Z", + "contributors": [ + "duduindo", + "chepegeek", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/link": { + "modified": "2019-03-23T23:41:37.686Z", + "contributors": [ + "pawer13", + "israel-munoz", + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/main": { + "modified": "2019-03-23T23:25:22.761Z", + "contributors": [ + "evaferreira", + "jesusbotella", + "teoli", + "jsalinas" + ] + }, + "Web/HTML/Elemento/map": { + "modified": "2019-03-23T23:41:43.985Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/mark": { + "modified": "2020-10-15T21:04:57.447Z", + "contributors": [ + "danielblazquez", + "feliperomero3", + "wbamberg", + "teoli", + "Flerex", + "hugohabel", + "inma_610", + "translatoon" + ] + }, + "Web/HTML/Elemento/marquee": { + "modified": "2019-03-18T20:57:46.110Z", + "contributors": [ + "gabriell24", + "erix2016", + "alexander171294" + ] + }, + "Web/HTML/Elemento/menu": { + "modified": "2019-03-18T21:11:04.661Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/meta": { + "modified": "2019-03-23T23:42:35.250Z", + "contributors": [ + "Sebastianz", + "feardarkness", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/multicol": { + "modified": "2019-03-23T22:36:14.458Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Elemento/nav": { + "modified": "2020-10-15T21:18:57.198Z", + "contributors": [ + "DagoGuevara", + "driconmax", + "teoli", + "martinbarce", + "makoescalzo" + ] + }, + "Web/HTML/Elemento/nobr": { + "modified": "2019-03-18T21:35:49.711Z", + "contributors": [ + "rhssr", + "Mexicotec" + ] + }, + "Web/HTML/Elemento/noframes": { + "modified": "2019-03-23T23:42:28.640Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/noscript": { + "modified": "2019-03-23T23:42:26.569Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/object": { + "modified": "2020-10-15T22:22:23.263Z", + "contributors": [ + "siregalado", + "iarah" + ] + }, + "Web/HTML/Elemento/ol": { + "modified": "2020-02-03T21:28:29.355Z", + "contributors": [ + "kevinar53", + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/option": { + "modified": "2019-03-23T22:38:56.017Z", + "contributors": [ + "pekechis" + ] + }, + "Web/HTML/Elemento/p": { + "modified": "2019-03-23T23:41:31.103Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/param": { + "modified": "2019-03-23T23:42:31.653Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/picture": { + "modified": "2019-07-20T20:15:37.196Z", + "contributors": [ + "DagoGuevara", + "JulianSoto", + "alexlndn", + "danieltacho", + "IsraelFloresDGA", + "diegos2" + ] + }, + "Web/HTML/Elemento/pre": { + "modified": "2019-03-18T21:11:04.209Z", + "contributors": [ + "duduindo", + "teoli", + "_0x" + ] + }, + "Web/HTML/Elemento/progress": { + "modified": "2020-10-15T21:22:45.390Z", + "contributors": [ + "SphinxKnight", + "androsfenollosa", + "wbamberg", + "teoli", + "rubencidlara" + ] + }, + "Web/HTML/Elemento/q": { + "modified": "2020-10-15T22:34:03.995Z", + "contributors": [ + "Nachec" + ] + }, + "Web/HTML/Elemento/s": { + "modified": "2019-03-18T21:11:03.985Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/samp": { + "modified": "2019-10-11T12:30:51.315Z", + "contributors": [ + "danielblazquez", + "duduindo", + "Johsua", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/script": { + "modified": "2019-03-23T22:38:36.106Z", + "contributors": [ + "ignasivs", + "raecillacastellana", + "ivandevp", + "alexander171294" + ] + }, + "Web/HTML/Elemento/section": { + "modified": "2020-07-15T11:06:51.948Z", + "contributors": [ + "timetrvlr", + "wbamberg", + "diegocanal", + "eljonims", + "teoli", + "ccarruitero", + "artopal" + ] + }, + "Web/HTML/Elemento/select": { + "modified": "2019-03-23T22:38:39.246Z", + "contributors": [ + "Fx-Enlcxx", + "AleV" + ] + }, + "Web/HTML/Elemento/slot": { + "modified": "2020-10-15T22:05:53.326Z", + "contributors": [ + "aguilerajl", + "Carlos-T", + "rhssr" + ] + }, + "Web/HTML/Elemento/small": { + "modified": "2019-04-04T15:23:46.402Z", + "contributors": [ + "danieltacho", + "drakzig", + "SphinxKnight", + "carloque", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/source": { + "modified": "2020-10-15T21:13:44.488Z", + "contributors": [ + "guillermomartinmarco", + "teoli", + "inma_610" + ] + }, + "Web/HTML/Elemento/span": { + "modified": "2019-03-24T00:17:34.814Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "torresnicolas", + "Jorolo" + ] + }, + "Web/HTML/Elemento/strike": { + "modified": "2019-03-18T21:11:03.623Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/strong": { + "modified": "2019-03-18T21:11:02.931Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/style": { + "modified": "2019-03-23T23:42:38.349Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/sub": { + "modified": "2020-10-15T21:18:49.449Z", + "contributors": [ + "IsaacAaron", + "carloque", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/sup": { + "modified": "2020-10-15T21:18:45.044Z", + "contributors": [ + "IsaacAaron", + "carloque", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/table": { + "modified": "2019-09-03T15:32:58.837Z", + "contributors": [ + "teoli", + "jesanchez", + "cortega", + "tany" + ] + }, + "Web/HTML/Elemento/td": { + "modified": "2019-03-23T22:38:37.555Z", + "contributors": [ + "Kerinoxio", + "Zarkiel", + "raecillacastellana", + "tolano97" + ] + }, + "Web/HTML/Elemento/template": { + "modified": "2020-10-15T21:52:05.945Z", + "contributors": [ + "aguilerajl", + "ArtistNeverStop", + "Diego674", + "AlePerez92" + ] + }, + "Web/HTML/Elemento/textarea": { + "modified": "2020-10-15T21:43:13.029Z", + "contributors": [ + "camsa", + "fscholz", + "pekechis" + ] + }, + "Web/HTML/Elemento/th": { + "modified": "2020-04-22T05:00:45.306Z", + "contributors": [ + "blanchart", + "AgustinDPino", + "IXTRUnai", + "sapales" + ] + }, + "Web/HTML/Elemento/time": { + "modified": "2020-10-15T21:18:39.499Z", + "contributors": [ + "pardo-bsso", + "blanchart", + "IsraelFloresDGA", + "dsolism", + "mauriciabad", + "teoli", + "sebasmagri", + "makoescalzo" + ] + }, + "Web/HTML/Elemento/title": { + "modified": "2019-10-10T16:32:45.843Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/tr": { + "modified": "2019-03-23T22:38:35.421Z", + "contributors": [ + "raecillacastellana", + "FelipeGL" + ] + }, + "Web/HTML/Elemento/track": { + "modified": "2020-10-15T22:33:21.321Z", + "contributors": [ + "Pablo-No" + ] + }, + "Web/HTML/Elemento/tt": { + "modified": "2019-03-18T21:11:03.301Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/u": { + "modified": "2019-03-18T21:11:03.114Z", + "contributors": [ + "duduindo", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/ul": { + "modified": "2019-03-23T23:42:39.154Z", + "contributors": [ + "Sebastianz", + "jigs12", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/var": { + "modified": "2019-03-23T23:41:16.113Z", + "contributors": [ + "BubuAnabelas", + "teoli", + "Jorolo" + ] + }, + "Web/HTML/Elemento/video": { + "modified": "2019-03-24T00:06:49.642Z", + "contributors": [ + "wbamberg", + "untilbit", + "AlePerez92", + "teoli", + "inma_610", + "Izel" + ] + }, + "Web/HTML/Elemento/wbr": { + "modified": "2019-04-26T19:10:14.131Z", + "contributors": [ + "reymundus2", + "jcr4" + ] + }, + "Web/HTML/Elemento/xmp": { + "modified": "2019-03-23T22:38:49.554Z", + "contributors": [ + "jcr4" + ] + }, + "Web/HTML/Elementos_en_línea": { + "modified": "2019-03-23T22:46:15.359Z", + "contributors": [ + "juanbrujo", + "raecillacastellana", + "vltamara" + ] + }, + "Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5": { + "modified": "2019-03-23T23:26:59.594Z", + "contributors": [ + "wbamberg", + "vltamara", + "teoli", + "nekside" + ] + }, + "Web/HTML/Imagen_con_CORS_habilitado": { + "modified": "2019-03-23T22:46:06.691Z", + "contributors": [ + "MrCesar107", + "antoiba86", + "vltamara" + ] + }, + "Web/HTML/La_importancia_de_comentar_correctamente": { + "modified": "2019-03-23T23:53:31.079Z", + "contributors": [ + "teoli", + "Mgjbot", + "Jorolo" + ] + }, + "Web/HTML/Microdatos": { + "modified": "2019-03-23T22:12:50.480Z", + "contributors": [ + "fitojb" + ] + }, + "Web/HTML/Optimizing_your_pages_for_speculative_parsing": { + "modified": "2019-03-23T23:15:52.979Z", + "contributors": [ + "jsapiains", + "joeljose", + "vltamara", + "manufosela", + "Montherdez" + ] + }, + "Web/HTML/Quirks_Mode_and_Standards_Mode": { + "modified": "2019-03-23T22:00:35.023Z", + "contributors": [ + "chrisdavidmills", + "alvaromontoro", + "mamptecnocrata", + "ungatoquecomesushi" + ] + }, + "Web/HTML/Recursos_offline_en_firefox": { + "modified": "2019-03-19T07:43:37.221Z", + "contributors": [ + "pixelmin", + "dmoralesm", + "teoli", + "vltamara", + "CodeMaxter", + "LuisArt", + "FCuchietti", + "MPoli", + "hugohabel", + "RickieesES", + "inma_610", + "Izel" + ] + }, + "Web/HTML/Referencia": { + "modified": "2019-09-09T07:16:42.154Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "raecillacastellana", + "cosmesantos", + "vltamara", + "MegaChrono" + ] + }, + "Web/HTML/Tipos_de_enlaces": { + "modified": "2019-03-23T22:46:17.969Z", + "contributors": [ + "cmmp0112", + "_delta_", + "moisesalmonte", + "alvaromontoro", + "ivansx", + "vltamara" + ] + }, + "Web/HTML/Transision_adaptativa_DASH": { + "modified": "2019-03-23T22:46:14.015Z", + "contributors": [ + "AzazelN28", + "vltamara" + ] + }, + "Web/HTML/Usando_audio_y_video_con_HTML5": { + "modified": "2019-10-10T16:52:54.661Z", + "contributors": [ + "ElNobDeTfm", + "estebanz01", + "hedmon", + "blanchart", + "teoli", + "ciroid", + "cesar_ortiz_elPatox", + "StripTM", + "AngelFQC" + ] + }, + "Web/HTML/anipular_video_por_medio_de_canvas": { + "modified": "2019-03-24T00:07:00.528Z", + "contributors": [ + "teoli", + "inma_610" + ] + }, + "Web/HTML/microformatos": { + "modified": "2019-03-23T22:46:15.016Z", + "contributors": [ + "vltamara" + ] + }, + "Web/HTML/Índice": { + "modified": "2019-01-16T22:12:02.767Z", + "contributors": [ + "raecillacastellana", + "pekechis" + ] + }, + "Web/HTTP": { + "modified": "2019-03-18T20:34:58.542Z", + "contributors": [ + "IsraelFloresDGA", + "MarioECU", + "locolauty97", + "Sergio_Gonzalez_Collado", + "Ferrmolina", + "raecillacastellana", + "migdonio1", + "Erto", + "teoli" + ] + }, + "Web/HTTP/Access_control_CORS": { + "modified": "2020-08-10T16:23:20.546Z", + "contributors": [ + "wbamberg", + "afelopez", + "jbarcas", + "cefaloide", + "alcastic", + "franklevel", + "JuanMacias", + "psyban", + "manatico4", + "signados", + "Ricardolau", + "afbayonac", + "aurigadl", + "dcruz", + "Manhru", + "maedca" + ] + }, + "Web/HTTP/Authentication": { + "modified": "2019-10-24T13:52:25.126Z", + "contributors": [ + "bood-dev", + "Gochip", + "fcanellas", + "diegorec", + "kraneok", + "JuanMacias", + "_deiberchacon", + "DavidPeniafiel" + ] + }, + "Web/HTTP/Basics_of_HTTP": { + "modified": "2020-04-20T02:59:31.392Z", + "contributors": [ + "obed3113", + "sanxofon", + "Sergio_Gonzalez_Collado", + "cissoid" + ] + }, + "Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs": { + "modified": "2019-03-18T21:22:07.450Z", + "contributors": [ + "Adorta4", + "carlosgocereceda" + ] + }, + "Web/HTTP/Basics_of_HTTP/Datos_URIs": { + "modified": "2019-03-23T22:24:54.977Z", + "contributors": [ + "Sergio_Gonzalez_Collado", + "AzazelN28", + "uclides" + ] + }, + "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": { + "modified": "2019-03-23T22:10:11.567Z", + "contributors": [ + "Sergio_Gonzalez_Collado", + "ChrisMHM" + ] + }, + "Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web": { + "modified": "2019-03-23T22:24:51.387Z", + "contributors": [ + "DaniNz", + "Sergio_Gonzalez_Collado", + "ChrisMHM", + "uclides" + ] + }, + "Web/HTTP/Basics_of_HTTP/MIME_types": { + "modified": "2019-11-18T08:03:54.325Z", + "contributors": [ + "IsaacAaron", + "sanxofon", + "Sergio_Gonzalez_Collado", + "kevinmont", + "juanrarodriguez18", + "strattadb" + ] + }, + "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": { + "modified": "2020-02-28T13:10:45.613Z", + "contributors": [ + "chrisdavidmills", + "sanxofon", + "franklevel", + "gabrielnoe" + ] + }, + "Web/HTTP/CORS/Errors": { + "modified": "2019-03-18T21:26:43.815Z", + "contributors": [ + "nchevobbe" + ] + }, + "Web/HTTP/CORS/Errors/CORSDidNotSucceed": { + "modified": "2020-03-20T09:22:59.137Z", + "contributors": [ + "javier.camus", + "rotcl", + "MarianoRDZ" + ] + }, + "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { + "modified": "2020-03-10T05:27:13.697Z", + "contributors": [ + "HermosinNunez", + "danhiel98", + "pyumbillo", + "rewin23" + ] + }, + "Web/HTTP/CORS/Errors/CORSNotSupportingCredentials": { + "modified": "2020-03-25T19:41:08.379Z", + "contributors": [ + "pablogalvezfotografiadeportiva" + ] + }, + "Web/HTTP/CORS/Errors/CORSPreflightDidNotSucceed": { + "modified": "2019-10-08T04:58:57.176Z", + "contributors": [ + "Concatenacion" + ] + }, + "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { + "modified": "2020-07-09T00:32:19.159Z", + "contributors": [ + "agf0710", + "advica2016", + "BubuAnabelas", + "Juan_Pablo" + ] + }, + "Web/HTTP/CSP": { + "modified": "2020-10-15T22:03:58.031Z", + "contributors": [ + "lautaropaske", + "herleym", + "BubuAnabelas", + "vk496", + "CarlosRomeroVera" + ] + }, + "Web/HTTP/Caching": { + "modified": "2019-03-18T21:21:15.259Z", + "contributors": [ + "WilsonIsAliveClone", + "serarroy", + "ulisestrujillo" + ] + }, + "Web/HTTP/Cookies": { + "modified": "2020-06-27T19:11:54.360Z", + "contributors": [ + "vinjatovix", + "SphinxKnight", + "g.baldemar.77", + "alexlndn", + "rayrojas", + "jesuscampos", + "nachoperassi", + "cguimaraenz", + "eortizromero", + "omertafox" + ] + }, + "Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x": { + "modified": "2019-03-23T22:03:37.565Z", + "contributors": [ + "jose89gp", + "Sergio_Gonzalez_Collado" + ] + }, + "Web/HTTP/Headers": { + "modified": "2019-12-10T13:29:15.931Z", + "contributors": [ + "OneLoneFox", + "hamethassaf", + "darianbenito", + "MrcRjs", + "Watermelonnable", + "JurgenBlitz", + "ampersand89", + "fjuarez", + "fscholz" + ] + }, + "Web/HTTP/Headers/Accept": { + "modified": "2020-10-15T21:55:42.853Z", + "contributors": [ + "gabriel-ar" + ] + }, + "Web/HTTP/Headers/Accept-Charset": { + "modified": "2020-10-15T22:13:56.858Z", + "contributors": [ + "ArnoldFZ" + ] + }, + "Web/HTTP/Headers/Accept-Ranges": { + "modified": "2020-10-15T21:52:24.088Z", + "contributors": [ + "gerardo1sanchez" + ] + }, + "Web/HTTP/Headers/Access-Control-Allow-Credentials": { + "modified": "2020-10-15T22:29:00.518Z", + "contributors": [ + "BubuAnabelas", + "IsraelFloresDGA" + ] + }, + "Web/HTTP/Headers/Access-Control-Allow-Headers": { + "modified": "2020-10-15T22:07:25.027Z", + "contributors": [ + "_deiberchacon" + ] + }, + "Web/HTTP/Headers/Access-Control-Allow-Methods": { + "modified": "2020-10-15T21:54:50.843Z", + "contributors": [ + "irsequisious" + ] + }, + "Web/HTTP/Headers/Access-Control-Allow-Origin": { + "modified": "2020-10-15T21:56:44.483Z", + "contributors": [ + "estrelow", + "IsraelFloresDGA", + "aranzuze35", + "_deiberchacon", + "anxobotana", + "JhonAguiar" + ] + }, + "Web/HTTP/Headers/Access-Control-Expose-Headers": { + "modified": "2020-10-15T22:06:29.086Z", + "contributors": [ + "jorgeCaster", + "kraneok" + ] + }, + "Web/HTTP/Headers/Age": { + "modified": "2020-10-15T22:10:53.345Z", + "contributors": [ + "0xCGonzalo" + ] + }, + "Web/HTTP/Headers/Allow": { + "modified": "2019-03-18T21:23:10.971Z", + "contributors": [ + "ogaston" + ] + }, + "Web/HTTP/Headers/Authorization": { + "modified": "2019-03-18T21:34:28.554Z", + "contributors": [ + "kraneok", + "Watermelonnable" + ] + }, + "Web/HTTP/Headers/Cache-Control": { + "modified": "2020-10-28T14:39:35.644Z", + "contributors": [ + "noksenberg", + "IsraelFloresDGA", + "ervin_santos" + ] + }, + "Web/HTTP/Headers/Content-Disposition": { + "modified": "2020-10-15T21:58:39.489Z", + "contributors": [ + "kbono", + "lagwy" + ] + }, + "Web/HTTP/Headers/Content-Encoding": { + "modified": "2020-10-15T21:53:14.848Z", + "contributors": [ + "IT-Rafa", + "sevillacode" + ] + }, + "Web/HTTP/Headers/Content-Length": { + "modified": "2020-10-15T22:07:26.889Z", + "contributors": [ + "aliciava00", + "efrencruz" + ] + }, + "Web/HTTP/Headers/Content-Location": { + "modified": "2020-10-15T22:29:48.071Z", + "contributors": [ + "hecmonter" + ] + }, + "Web/HTTP/Headers/Content-Security-Policy": { + "modified": "2020-10-15T22:18:45.176Z", + "contributors": [ + "rayrojas", + "mauril26", + "27z" + ] + }, + "Web/HTTP/Headers/Content-Type": { + "modified": "2020-10-15T21:58:35.257Z", + "contributors": [ + "ivanfretes", + "omertafox", + "ValeriaRamos" + ] + }, + "Web/HTTP/Headers/Cookie": { + "modified": "2020-10-15T21:55:41.792Z", + "contributors": [ + "SSantiago90" + ] + }, + "Web/HTTP/Headers/Cross-Origin-Resource-Policy": { + "modified": "2020-10-15T22:29:00.325Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/HTTP/Headers/ETag": { + "modified": "2020-10-15T21:57:09.273Z", + "contributors": [ + "zechworld", + "evalenzuela", + "stwilberth", + "edgarrod71" + ] + }, + "Web/HTTP/Headers/Expires": { + "modified": "2020-10-15T21:56:44.738Z", + "contributors": [ + "ernesto.palafox" + ] + }, + "Web/HTTP/Headers/Host": { + "modified": "2020-10-15T22:24:56.306Z", + "contributors": [ + "escatel.bernal10", + "Alvarito-056" + ] + }, + "Web/HTTP/Headers/Keep-Alive": { + "modified": "2020-10-15T22:02:52.123Z", + "contributors": [ + "fernomenoide" + ] + }, + "Web/HTTP/Headers/Link": { + "modified": "2020-10-15T22:28:59.441Z", + "contributors": [ + "threevanny" + ] + }, + "Web/HTTP/Headers/Origin": { + "modified": "2020-10-15T22:00:47.248Z", + "contributors": [ + "IsraelFloresDGA", + "Abelhg" + ] + }, + "Web/HTTP/Headers/Pragma": { + "modified": "2020-10-15T22:09:54.700Z", + "contributors": [ + "ervin_santos" + ] + }, + "Web/HTTP/Headers/Referer": { + "modified": "2020-10-15T21:53:10.093Z", + "contributors": [ + "LastCyborg", + "fitojb", + "UltimoOrejonDelTarro" + ] + }, + "Web/HTTP/Headers/Referrer-Policy": { + "modified": "2020-10-15T22:01:34.403Z", + "contributors": [ + "fitojb" + ] + }, + "Web/HTTP/Headers/Server": { + "modified": "2020-10-15T21:55:40.335Z", + "contributors": [ + "sevillacode", + "TheSgtPepper23", + "irsequisious" + ] + }, + "Web/HTTP/Headers/Set-Cookie": { + "modified": "2020-10-26T12:24:29.884Z", + "contributors": [ + "ignacio-ifm", + "IsraelFloresDGA", + "rayrojas", + "ramonserrano", + "garolard" + ] + }, + "Web/HTTP/Headers/Strict-Transport-Security": { + "modified": "2020-10-15T21:54:14.546Z", + "contributors": [ + "AmadPS", + "pipe01", + "heilop", + "JulianSoto", + "pablolopezmera", + "Oxicode" + ] + }, + "Web/HTTP/Headers/Transfer-Encoding": { + "modified": "2020-10-15T22:24:54.193Z", + "contributors": [ + "0xCGonzalo" + ] + }, + "Web/HTTP/Headers/User-Agent": { + "modified": "2020-10-15T22:00:44.883Z", + "contributors": [ + "LeoOliva", + "Imvi10" + ] + }, + "Web/HTTP/Headers/Vary": { + "modified": "2020-10-15T21:56:44.020Z", + "contributors": [ + "JhonAguiar" + ] + }, + "Web/HTTP/Headers/WWW-Authenticate": { + "modified": "2020-10-15T22:19:30.337Z", + "contributors": [ + "malonso", + "Gytree" + ] + }, + "Web/HTTP/Headers/X-Content-Type-Options": { + "modified": "2020-10-15T21:59:06.832Z", + "contributors": [ + "clbustos", + "tonialfaro" + ] + }, + "Web/HTTP/Headers/X-Forwarded-For": { + "modified": "2020-10-15T22:16:47.635Z", + "contributors": [ + "choadev", + "martinfrad", + "camsa" + ] + }, + "Web/HTTP/Headers/X-Frame-Options": { + "modified": "2020-10-15T21:57:01.709Z", + "contributors": [ + "ervin_santos", + "Luiggy", + "setlord" + ] + }, + "Web/HTTP/Headers/X-XSS-Protection": { + "modified": "2020-10-15T21:59:06.897Z", + "contributors": [ + "JulioMoreyra", + "francinysalles", + "tonialfaro" + ] + }, + "Web/HTTP/Messages": { + "modified": "2019-11-12T11:40:26.816Z", + "contributors": [ + "emiedes", + "jose89gp", + "anibalortegap", + "Sergio_Gonzalez_Collado" + ] + }, + "Web/HTTP/Methods": { + "modified": "2020-10-15T21:51:09.574Z", + "contributors": [ + "andrpueb", + "eddydeath", + "JRaiden", + "JulianSoto", + "RamsesMartinez" + ] + }, + "Web/HTTP/Methods/CONNECT": { + "modified": "2020-10-15T22:09:12.273Z", + "contributors": [ + "jadiosc" + ] + }, + "Web/HTTP/Methods/GET": { + "modified": "2020-10-15T22:07:33.379Z", + "contributors": [ + "SphinxKnight", + "sercorc.12", + "oespino", + "RetelboP" + ] + }, + "Web/HTTP/Methods/PATCH": { + "modified": "2020-10-04T20:15:30.024Z", + "contributors": [ + "hamishwillee", + "cnietoc", + "SackmannDV", + "noecende" + ] + }, + "Web/HTTP/Methods/POST": { + "modified": "2020-11-06T16:08:25.707Z", + "contributors": [ + "Max_Gremory", + "JGarnica", + "qmarquez", + "DavidGalvis", + "sammye70", + "Sheppy", + "mtnalonso", + "Juenesis" + ] + }, + "Web/HTTP/Methods/PUT": { + "modified": "2020-10-15T21:58:39.134Z", + "contributors": [ + "mtnalonso" + ] + }, + "Web/HTTP/Methods/TRACE": { + "modified": "2020-10-15T22:12:36.763Z", + "contributors": [ + "pablobiedma" + ] + }, + "Web/HTTP/Overview": { + "modified": "2020-08-07T11:46:49.430Z", + "contributors": [ + "marcusdesantis", + "Enesimus", + "Rafasu", + "ChrisMHM", + "LuisGalicia", + "jose89gp", + "DaniNz", + "cabaag", + "Sergio_Gonzalez_Collado" + ] + }, + "Web/HTTP/Peticiones_condicionales": { + "modified": "2019-03-18T21:19:37.220Z", + "contributors": [ + "christianmg99" + ] + }, + "Web/HTTP/Sesión": { + "modified": "2019-03-23T22:05:36.352Z", + "contributors": [ + "Sergio_Gonzalez_Collado" + ] + }, + "Web/HTTP/Status": { + "modified": "2020-10-01T02:41:07.109Z", + "contributors": [ + "SphinxKnight", + "gonzalestino924", + "manuelguido", + "juliocesardeveloper", + "ismanapa", + "santiago.lator", + "leticia-acib", + "josecarbajalbolbot", + "StarViruZ", + "amircp", + "SebastianBar", + "serivt", + "Jens.B" + ] + }, + "Web/HTTP/Status/100": { + "modified": "2020-10-15T21:56:53.445Z", + "contributors": [ + "serivt" + ] + }, + "Web/HTTP/Status/101": { + "modified": "2019-03-18T21:22:02.098Z", + "contributors": [ + "jlamasfripp" + ] + }, + "Web/HTTP/Status/200": { + "modified": "2020-10-15T22:05:24.611Z", + "contributors": [ + "SphinxKnight", + "alexibarra55", + "jlamasfripp", + "gbarriosf", + "snaven10", + "Adriel_from_Nav" + ] + }, + "Web/HTTP/Status/201": { + "modified": "2020-10-15T22:08:02.661Z", + "contributors": [ + "WriestTavo" + ] + }, + "Web/HTTP/Status/202": { + "modified": "2019-04-19T16:13:12.876Z", + "contributors": [ + "Hibot12" + ] + }, + "Web/HTTP/Status/203": { + "modified": "2020-06-14T20:53:26.311Z", + "contributors": [ + "rayrojas" + ] + }, + "Web/HTTP/Status/206": { + "modified": "2020-10-15T22:02:08.111Z", + "contributors": [ + "qpdian" + ] + }, + "Web/HTTP/Status/301": { + "modified": "2020-10-15T22:24:06.781Z", + "contributors": [ + "nullxx" + ] + }, + "Web/HTTP/Status/302": { + "modified": "2020-10-15T21:59:00.277Z", + "contributors": [ + "B1tF8er", + "kraptor", + "astrapotro" + ] + }, + "Web/HTTP/Status/304": { + "modified": "2020-10-15T22:12:46.751Z", + "contributors": [ + "jairoFg12" + ] + }, + "Web/HTTP/Status/400": { + "modified": "2019-08-03T10:06:53.857Z", + "contributors": [ + "molavec", + "Hibot12" + ] + }, + "Web/HTTP/Status/401": { + "modified": "2020-10-15T21:55:15.004Z", + "contributors": [ + "Clipi", + "JuanMacias", + "mjaque", + "andreximo" + ] + }, + "Web/HTTP/Status/403": { + "modified": "2020-10-15T21:58:50.466Z", + "contributors": [ + "JuanMacias" + ] + }, + "Web/HTTP/Status/404": { + "modified": "2020-10-15T21:56:47.503Z", + "contributors": [ + "BrodaNoel" + ] + }, + "Web/HTTP/Status/408": { + "modified": "2019-03-18T21:30:00.279Z", + "contributors": [ + "juusechec" + ] + }, + "Web/HTTP/Status/418": { + "modified": "2020-10-15T22:21:28.070Z", + "contributors": [ + "joseluisq", + "paolo667" + ] + }, + "Web/HTTP/Status/500": { + "modified": "2020-12-07T12:32:25.820Z", + "contributors": [ + "dayanhernandez353", + "karenonaly", + "duduindo", + "marcelokruk", + "Viejofon" + ] + }, + "Web/HTTP/Status/502": { + "modified": "2020-10-15T21:56:55.208Z", + "contributors": [ + "josecarbajalbolbot", + "AlePerez92", + "josmelnoel" + ] + }, + "Web/HTTP/Status/503": { + "modified": "2020-10-15T22:10:17.555Z", + "contributors": [ + "Parodper", + "ajuni880", + "diego-bustamante" + ] + }, + "Web/HTTP/Status/504": { + "modified": "2020-10-15T22:08:08.336Z", + "contributors": [ + "ojeanicolas" + ] + }, + "Web/HTTP/Status/505": { + "modified": "2020-04-03T20:59:26.896Z", + "contributors": [ + "lp4749791" + ] + }, + "Web/HTTP/Status/8080": { + "modified": "2020-03-18T21:09:54.600Z", + "contributors": [ + "guzmanoscaralexis" + ] + }, + "Web/HTTP/mecanismo_actualizacion_protocolo": { + "modified": "2019-03-18T21:45:03.291Z", + "contributors": [ + "patoezequiel", + "Sergio_Gonzalez_Collado" + ] + }, + "Web/HTTP/recursos_y_especificaciones": { + "modified": "2019-03-23T22:03:46.656Z", + "contributors": [ + "_deiberchacon" + ] + }, + "Web/JavaScript": { + "modified": "2020-11-23T12:49:37.646Z", + "contributors": [ + "SphinxKnight", + "kramosr68", + "ivanfernandez5209", + "Tonatew", + "alejogomes944", + "Nachec", + "victitor800", + "Enesimus", + "franchesco182001", + "pauli.rodriguez.c", + "jhonarielgj", + "Fegaan", + "OOJuanferOO", + "nicolas25ramirez", + "andreamv2807", + "tomasvillarragaperez", + "Yel-Martinez-Consultor-Seo", + "rodririobo", + "isabelsvelasquezv", + "fedegianni04", + "jaomix1", + "TheJarX", + "clarii", + "NataliaCba", + "NicoleCleto1998", + "JavScars", + "untilbit", + "AlePerez92", + "aluxito", + "luisNavasArg", + "jsx", + "carlossuarez", + "Pablo_Ivan", + "teoli", + "LeoHirsch", + "smarchioni", + "ricardo777", + "CarlosQuijano", + "Scipion", + "alquimista", + "Nukeador", + "ethertank", + "Jorge.villalobos", + "arleytriana", + "arpunk", + "inma_610", + "StripTM", + "Mgjbot", + "Superruzafa", + "Verruckt", + "Jorolo", + "Vyk", + "Takenbot", + "RJacinto" + ] + }, + "Web/JavaScript/Acerca_de_JavaScript": { + "modified": "2020-09-12T13:33:01.910Z", + "contributors": [ + "Nachec", + "fscholz", + "teoli", + "arpunk", + "inma_610", + "RickieesES", + "StripTM" + ] + }, + "Web/JavaScript/Closures": { + "modified": "2020-04-08T19:26:44.700Z", + "contributors": [ + "camsa", + "wbamberg", + "AzazelN28", + "JonasBrandel", + "fscholz", + "guty", + "Siro_Diaz", + "luigli", + "teoli", + "FNK", + "juanc.jara", + "Josias", + "neosergio", + "hjoaco" + ] + }, + "Web/JavaScript/Data_structures": { + "modified": "2020-08-30T02:21:59.996Z", + "contributors": [ + "Nachec", + "edwinmunguia", + "arzr", + "rayrojas", + "melgard", + "mmngreco", + "AngryDev", + "Gorzas", + "alejandrochung", + "IXTRUnai", + "damnyorch", + "devconcept", + "sancospi" + ] + }, + "Web/JavaScript/Descripción_de_las_tecnologías_JavaScript": { + "modified": "2020-09-02T05:54:39.004Z", + "contributors": [ + "Nachec", + "duduindo", + "threevanny", + "Bluterg", + "jairoambunad", + "geinerjv" + ] + }, + "Web/JavaScript/Equality_comparisons_and_sameness": { + "modified": "2020-03-24T18:47:23.011Z", + "contributors": [ + "camsa", + "abestrad1", + "EduardoCasanova", + "pekechis" + ] + }, + "Web/JavaScript/EventLoop": { + "modified": "2020-03-12T19:43:05.672Z", + "contributors": [ + "AzazelN28", + "omonteon", + "guillermojmc", + "eljonims", + "MrCoffey", + "Anonymous" + ] + }, + "Web/JavaScript/Gestion_de_Memoria": { + "modified": "2020-03-12T19:40:38.018Z", + "contributors": [ + "Jairgc", + "sergio_p_d", + "heliogabalo", + "elenatorro", + "JavierHspn", + "cesaralvarado9" + ] + }, + "Web/JavaScript/Guide": { + "modified": "2020-09-12T21:03:22.983Z", + "contributors": [ + "Nachec", + "AmazonianCodeGuy", + "tezece", + "MarcyG1", + "nhuamani", + "manuhdez", + "e.g.m.g.", + "Pablo_Ivan", + "nelson6e65", + "walterpaoli", + "joanvasa", + "fscholz", + "Benjalorc", + "teoli", + "mitogh", + "xavo7" + ] + }, + "Web/JavaScript/Guide/Bucles_e_iteración": { + "modified": "2020-10-21T16:48:14.421Z", + "contributors": [ + "sofi8825", + "Asj-code", + "edutangoeap", + "Nachec", + "AmazonianCodeGuy", + "Leopohf", + "Daniel_Martin", + "SphinxKnight", + "hmorv", + "01luisrene", + "danielfer", + "Pablo_Ivan", + "joanvasa" + ] + }, + "Web/JavaScript/Guide/Control_de_flujo_y_manejo_de_errores": { + "modified": "2020-09-14T09:17:05.043Z", + "contributors": [ + "Nachec", + "AmazonianCodeGuy", + "sergioqa123", + "Parziva_1", + "dcarmal-dayvo", + "Rovis", + "Enesimus", + "abelosky", + "Alfacoy", + "ashanterius", + "enriqueabsurdum", + "D4nny-dev", + "roadavid", + "eljonims", + "Nanyin", + "Igomezd", + "leandropio", + "MaFranceschi", + "Cleon", + "humbertaco", + "fscholz", + "isnardi" + ] + }, + "Web/JavaScript/Guide/Details_of_the_Object_Model": { + "modified": "2020-08-17T15:38:30.288Z", + "contributors": [ + "Nachec", + "MariaBarros", + "AmazonianCodeGuy", + "wbamberg", + "fherce", + "SphinxKnight", + "ObsoleteHuman", + "ValentinTapiaTorti", + "brodriguezs", + "DiegoA1114", + "montogeek", + "fscholz", + "teoli", + "pheras" + ] + }, + "Web/JavaScript/Guide/Expressions_and_Operators": { + "modified": "2020-09-13T21:58:37.783Z", + "contributors": [ + "Nachec", + "gcjuan", + "Orlando-Flores-Huanca", + "wajari", + "anglozm", + "recortes", + "Ernesto385291", + "Jkierem", + "gsalinase", + "abestrad1", + "milouri23", + "Odol", + "victorsanchezm", + "ElChiniNet", + "UshioSan", + "siluvana", + "juanbrujo", + "01luisrene", + "gustavgil", + "Jaston", + "Alexis88", + "smarquez1", + "ricardochavarri", + "fscholz", + "spachecojimenez" + ] + }, + "Web/JavaScript/Guide/Funciones": { + "modified": "2020-10-02T18:21:48.240Z", + "contributors": [ + "alejandro.fca", + "Nachec", + "AmazonianCodeGuy", + "Leopohf", + "BubuAnabelas", + "marscr", + "SantiagoHdez", + "beckod", + "sergio_p_d", + "01luisrene", + "yozen", + "gersonfa", + "HeberRojo", + "GabrielaMcr93", + "yakashiro", + "Cleon", + "fscholz", + "Glaucius", + "teoli", + "chebit", + "epcode" + ] + }, + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-09-12T23:09:43.446Z", + "contributors": [ + "Nachec", + "luis-al-merino", + "AmazonianCodeGuy", + "teknotica", + "feliperomero3", + "nullx5", + "abelosky", + "jlopezfdez", + "enriqueabsurdum", + "Ayman", + "AnthonyGareca", + "chuyinEF", + "estebancito", + "bytx", + "Pablo_Ivan", + "cgsramirez", + "eugenioNovas", + "marioalvazquez", + "joanvasa", + "fscholz", + "Cleon", + "angelnajera", + "vinixio", + "diegogaysaez", + "teoli", + "Amatos" + ] + }, + "Web/JavaScript/Guide/Introducción": { + "modified": "2020-09-14T00:29:05.489Z", + "contributors": [ + "Nachec", + "jlopezfdez", + "Th3Cod3", + "enriqueabsurdum", + "arfuengo", + "gfvcastro", + "RamiroNeher", + "fscholz", + "MauroEldritch", + "Cleon", + "orasio", + "angelnajera", + "rianby64" + ] + }, + "Web/JavaScript/Guide/Iterators_and_Generators": { + "modified": "2020-03-12T19:42:41.976Z", + "contributors": [ + "camsa", + "DJphilomath", + "mjaque", + "lassmann", + "eycopia", + "nefter", + "dieguezz", + "Breaking_Pitt" + ] + }, + "Web/JavaScript/Guide/Keyed_collections": { + "modified": "2020-09-02T02:09:58.803Z", + "contributors": [ + "Nachec", + "MariaBarros", + "jesus92gz", + "eljonims" + ] + }, + "Web/JavaScript/Guide/Meta_programming": { + "modified": "2020-08-18T02:34:39.284Z", + "contributors": [ + "Nachec", + "asamajamasa", + "jaomix1", + "jzatarain" + ] + }, + "Web/JavaScript/Guide/Módulos": { + "modified": "2020-10-15T22:27:31.770Z", + "contributors": [ + "Nachec", + "luis.m1tech", + "antonioHigueron", + "jorgeherrera9103", + "FDSoil" + ] + }, + "Web/JavaScript/Guide/Numbers_and_dates": { + "modified": "2020-09-14T23:27:03.154Z", + "contributors": [ + "Nachec", + "ds-developer1", + "la-syl", + "IsraelFloresDGA", + "ingcarlosperez", + "georgenevets", + "yakashiro" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions": { + "modified": "2020-10-15T21:29:34.015Z", + "contributors": [ + "Nachec", + "wilmer2000", + "Ricardo_F.", + "lebubic", + "franklevel", + "recortes", + "LuisSevillano", + "pangeasi", + "Jabi", + "bartolocarrasco", + "fortil", + "BoyFerruco", + "Lehmer", + "wffranco", + "eljonims", + "jpmontoya182", + "guillermomartinmarco", + "fscholz", + "eespitia.rea", + "jcvergar" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Aserciones": { + "modified": "2020-09-16T20:45:25.257Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Clases_de_caracteres": { + "modified": "2020-09-17T03:20:44.595Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Cuantificadores": { + "modified": "2020-09-15T21:48:26.513Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Escapes_de_propiedades_Unicode": { + "modified": "2020-09-17T10:02:16.387Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Grupos_y_rangos": { + "modified": "2020-09-17T10:14:04.470Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Guide/Regular_Expressions/Hoja_de_referencia": { + "modified": "2020-08-16T23:08:15.173Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Guide/Text_formatting": { + "modified": "2020-09-15T10:00:50.941Z", + "contributors": [ + "Nachec", + "surielmx", + "IsraelFloresDGA", + "diegarta", + "Enesimus", + "jalmeida" + ] + }, + "Web/JavaScript/Guide/Trabajando_con_objectos": { + "modified": "2020-08-18T17:28:58.690Z", + "contributors": [ + "Nachec", + "GonzaloFlores", + "asamajamasa", + "atascii", + "davidlondonor", + "4rturd13", + "GasGen", + "MariaBarros", + "jmlocke1", + "jccuevas", + "alerd0895", + "elin3t", + "SERGIOGLL", + "SphinxKnight", + "gsalinase", + "MarkelCuesta", + "Nalex6248", + "soulminato", + "imNicoSuarez", + "jigs12", + "rippe2hl", + "ajspadial", + "fscholz", + "acamposg71", + "chebit", + "teoli", + "fmagrosoto", + "neosergio", + "bluesky777" + ] + }, + "Web/JavaScript/Guide/Usar_promesas": { + "modified": "2020-05-16T20:15:48.240Z", + "contributors": [ + "angelmartinez", + "asamajamasa", + "javigallego", + "MariaBarros", + "JoseVf", + "hamfree" + ] + }, + "Web/JavaScript/Guide/colecciones_indexadas": { + "modified": "2020-08-20T18:50:37.500Z", + "contributors": [ + "Nachec", + "EstebanRK", + "ccasadom", + "jreyesgs", + "recortes", + "Cxistian", + "douwiD", + "frantcisko", + "joanvasa" + ] + }, + "Web/JavaScript/Herencia_y_la_cadena_de_protipos": { + "modified": "2020-03-12T19:41:32.707Z", + "contributors": [ + "LeChonch", + "SphinxKnight", + "Arcandres", + "cocososo", + "blaipas", + "Anonymous", + "abnerey", + "kdex", + "zgluis", + "mariodev12", + "tavofigse", + "guumo", + "alagos", + "metalback", + "MartinIbarra", + "10537", + "blacknack" + ] + }, + "Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos": { + "modified": "2020-03-12T19:36:14.050Z", + "contributors": [ + "ivanagui2", + "libre8bit", + "alejandrochung", + "victorsanchezm", + "gchifflet", + "hmorv", + "Lorenzoygata", + "xxxtonixxx", + "joan.leon", + "fscholz", + "DeiberChacon", + "chebit", + "teoli", + "arpunk", + "inma_610", + "StripTM" + ] + }, + "Web/JavaScript/Introduction_to_using_XPath_in_JavaScript": { + "modified": "2019-05-08T19:05:57.937Z", + "contributors": [ + "AlbertoPrado70", + "caber", + "chrisdavidmills", + "fscholz", + "joakku" + ] + }, + "Web/JavaScript/Language_Resources": { + "modified": "2020-03-12T19:47:17.832Z", + "contributors": [ + "lajaso", + "jpmontoya182" + ] + }, + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:45:01.208Z", + "contributors": [ + "JavScars", + "Sheppy" + ] + }, + "Web/JavaScript/Reference/Errors/Bad_octal": { + "modified": "2020-03-12T19:45:41.442Z", + "contributors": [ + "HaroldV" + ] + }, + "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": { + "modified": "2020-03-12T19:45:51.961Z", + "contributors": [ + "BubuAnabelas", + "Andres62", + "ingjosegarrido", + "JaimeNorato" + ] + }, + "Web/JavaScript/Reference/Errors/Falta_puntoycoma_antes_de_declaracion": { + "modified": "2020-03-12T19:46:13.102Z", + "contributors": [ + "jonatanroot", + "Lunacye" + ] + }, + "Web/JavaScript/Reference/Errors/Indicador_regexp_no-val": { + "modified": "2020-09-01T13:12:41.234Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:46:48.651Z", + "contributors": [ + "Tlauipil" + ] + }, + "Web/JavaScript/Reference/Errors/Invalid_date": { + "modified": "2020-03-12T19:47:15.708Z", + "contributors": [ + "untilbit" + ] + }, + "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { + "modified": "2019-10-12T12:26:22.919Z", + "contributors": [ + "JGmr5" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { + "modified": "2020-03-12T19:46:53.938Z", + "contributors": [ + "DGun17" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_formal_parameter": { + "modified": "2020-03-12T19:47:16.712Z", + "contributors": [ + "TheEpicSimple" + ] + }, + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { + "modified": "2020-03-12T19:46:54.683Z", + "contributors": [ + "hiuxmaycry", + "ivandevp" + ] + }, + "Web/JavaScript/Reference/Errors/More_arguments_needed": { + "modified": "2020-03-12T19:49:21.407Z", + "contributors": [ + "dragonmenorka" + ] + }, + "Web/JavaScript/Reference/Errors/No_variable_name": { + "modified": "2020-03-12T19:48:33.901Z", + "contributors": [ + "CatalinaCampos" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_codepoint": { + "modified": "2020-03-12T19:46:46.603Z", + "contributors": [ + "DGun17" + ] + }, + "Web/JavaScript/Reference/Errors/Not_a_function": { + "modified": "2020-03-12T19:45:06.322Z", + "contributors": [ + "PatoDeTuring", + "untilbit", + "josegarciaclm95" + ] + }, + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-10-08T09:22:13.757Z", + "contributors": [ + "ludoescribano.2016", + "FacuBustamaante", + "ozavala", + "ccorcoles", + "Heranibus", + "jsgaonac", + "Luis_Armando" + ] + }, + "Web/JavaScript/Reference/Errors/Precision_range": { + "modified": "2020-08-10T12:14:52.122Z", + "contributors": [ + "Sgewux" + ] + }, + "Web/JavaScript/Reference/Errors/Property_access_denied": { + "modified": "2020-03-12T19:46:35.795Z", + "contributors": [ + "untilbit", + "Tlauipil" + ] + }, + "Web/JavaScript/Reference/Errors/Stmt_after_return": { + "modified": "2020-03-12T19:46:14.065Z", + "contributors": [ + "WCHARRIERE", + "NanoSpicer", + "marco_Lozano" + ] + }, + "Web/JavaScript/Reference/Errors/Strict_y_parámetros_complejos": { + "modified": "2020-08-31T05:09:49.990Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-12T19:45:04.878Z", + "contributors": [ + "josegarciaclm95" + ] + }, + "Web/JavaScript/Reference/Errors/Undefined_prop": { + "modified": "2020-03-12T19:47:46.684Z", + "contributors": [ + "antixsuperstar" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:46:40.968Z", + "contributors": [ + "dariomaim" + ] + }, + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:45:53.118Z", + "contributors": [ + "BubuAnabelas", + "JaimeNorato" + ] + }, + "Web/JavaScript/Reference/Errors/caracter_ilegal": { + "modified": "2020-03-12T19:47:34.313Z", + "contributors": [ + "kaycdc" + ] + }, + "Web/JavaScript/Reference/Errors/in_operator_no_object": { + "modified": "2020-03-12T19:47:18.421Z", + "contributors": [ + "presercomp" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/handler": { + "modified": "2020-10-15T21:58:11.434Z", + "contributors": [ + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/handler/getOwnPropertyDescriptor": { + "modified": "2020-10-15T21:58:10.848Z", + "contributors": [ + "tutugordillo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Proxy/handler/set": { + "modified": "2020-10-15T21:58:32.473Z", + "contributors": [ + "tutugordillo" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2019-03-23T22:47:01.907Z", + "contributors": [ + "gfernandez", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RangeError/prototype": { + "modified": "2019-01-16T21:30:19.248Z", + "contributors": [ + "gfernandez" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Reflect": { + "modified": "2019-03-18T21:14:43.908Z", + "contributors": [ + "javierlopm", + "trofrigo", + "lecruz01", + "roberbnd", + "jameshkramer" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Reflect/set": { + "modified": "2019-03-23T22:08:25.189Z", + "contributors": [ + "pedro-otero" + ] + }, + "Web/JavaScript/Referencia": { + "modified": "2020-03-12T19:36:20.902Z", + "contributors": [ + "fscholz", + "teoli", + "zerospalencia", + "Scipion", + "ADP13", + "DSN_XP", + "Talisker", + "Sheppy", + "Nathymig", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Acerca_de": { + "modified": "2020-03-12T19:36:12.769Z", + "contributors": [ + "fscholz", + "teoli", + "Garf", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Características_Desaprobadas": { + "modified": "2020-08-12T05:30:59.632Z", + "contributors": [ + "Nachec", + "arturotena", + "teoli", + "Mgjbot", + "DSN XP" + ] + }, + "Web/JavaScript/Referencia/Características_Desaprobadas/The_legacy_Iterator_protocol": { + "modified": "2020-03-12T19:42:42.667Z", + "contributors": [ + "clystian" + ] + }, + "Web/JavaScript/Referencia/Classes": { + "modified": "2020-08-20T12:39:55.631Z", + "contributors": [ + "jorendorff-moz", + "PatoDeTuring", + "jenrrypc", + "superyaz", + "Alejandro_Hr_Mt", + "ivanagui2", + "sebaLinares", + "nadieenespecial", + "SphinxKnight", + "damianpm", + "andrpueb", + "carlosviteri", + "danielsalgadop", + "kdex", + "romanll", + "pipo02mix", + "coins5", + "ragutimar", + "jhia", + "Erto", + "Siro_Diaz", + "mishelashala", + "Albizures", + "fscholz", + "GoToLoop" + ] + }, + "Web/JavaScript/Referencia/Classes/Class_fields": { + "modified": "2020-10-15T22:24:11.873Z", + "contributors": [ + "mgg.isco", + "carlos.valicenti", + "juanarbol" + ] + }, + "Web/JavaScript/Referencia/Classes/Private_class_fields": { + "modified": "2020-10-15T22:33:54.045Z", + "contributors": [ + "aronvx" + ] + }, + "Web/JavaScript/Referencia/Classes/constructor": { + "modified": "2020-10-15T21:40:30.999Z", + "contributors": [ + "Mar.vin.26", + "kant", + "fscholz", + "SphinxKnight", + "balboag", + "bryanvargas" + ] + }, + "Web/JavaScript/Referencia/Classes/extends": { + "modified": "2020-03-12T19:43:14.828Z", + "contributors": [ + "miguelusque", + "PauPeinado" + ] + }, + "Web/JavaScript/Referencia/Classes/static": { + "modified": "2020-03-12T19:41:02.475Z", + "contributors": [ + "mizhac", + "SphinxKnight", + "rbonvall", + "fscholz", + "MauroEldritch" + ] + }, + "Web/JavaScript/Referencia/Funciones": { + "modified": "2020-03-12T19:37:38.529Z", + "contributors": [ + "ricardosikic", + "JoseHernan", + "sergioqa123", + "DavidGalvis", + "miguelitolaparra", + "FranciscoCastle", + "SantiagoHdez", + "arai", + "estebancito", + "hugoatenco", + "mishelashala", + "teoli", + "javiertarrio", + "Nathymig", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Funciones/Arrow_functions": { + "modified": "2020-10-15T21:39:05.489Z", + "contributors": [ + "Nachec", + "camsa", + "MateoOlarteCampo", + "Ivnosing", + "DavidGalvis", + "fcanellas", + "AlePerez92", + "crisaragon", + "SebastianHondarza", + "AVRILALEJANDRO", + "slam", + "frank-orellana", + "DiegoA1114", + "Omar.VzqzAc", + "oagarcia", + "davecarter" + ] + }, + "Web/JavaScript/Referencia/Funciones/Method_definitions": { + "modified": "2020-03-12T19:44:13.294Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/JavaScript/Referencia/Funciones/Parametros_por_defecto": { + "modified": "2020-10-15T21:39:27.233Z", + "contributors": [ + "Nachec", + "SphinxKnight", + "danielsalgadop", + "pancheps" + ] + }, + "Web/JavaScript/Referencia/Funciones/arguments": { + "modified": "2020-10-15T21:08:39.471Z", + "contributors": [ + "Nachec", + "gorydev", + "AlePerez92", + "oblomobka", + "teoli", + "DeiberChacon", + "leopic", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Funciones/arguments/callee": { + "modified": "2020-03-12T19:37:01.881Z", + "contributors": [ + "fscholz", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Funciones/arguments/length": { + "modified": "2020-03-12T19:44:25.066Z", + "contributors": [ + "hmorv", + "NestorAlbelo" + ] + }, + "Web/JavaScript/Referencia/Funciones/get": { + "modified": "2020-03-12T19:37:59.268Z", + "contributors": [ + "ramadis", + "DarkScarbo", + "MarkelCuesta", + "fscholz", + "teoli", + "carloshs92", + "jesanchez", + "ccarruitero" + ] + }, + "Web/JavaScript/Referencia/Funciones/parametros_rest": { + "modified": "2020-08-05T19:22:32.660Z", + "contributors": [ + "paching12", + "rlothbrock", + "Rhawen", + "DavidGalvis", + "deluxury", + "lacf95", + "angelcuenca", + "mikicegal14" + ] + }, + "Web/JavaScript/Referencia/Funciones/set": { + "modified": "2020-10-20T12:54:09.106Z", + "contributors": [ + "alejandro.fca", + "alannungaray", + "DavidBernal" + ] + }, + "Web/JavaScript/Referencia/Gramatica_lexica": { + "modified": "2020-10-15T22:24:10.289Z", + "contributors": [ + "Nachec", + "fitojb" + ] + }, + "Web/JavaScript/Referencia/Iteration_protocols": { + "modified": "2020-03-12T19:41:22.496Z", + "contributors": [ + "SphinxKnight", + "oagarcia" + ] + }, + "Web/JavaScript/Referencia/Modo_estricto": { + "modified": "2020-08-30T21:51:49.146Z", + "contributors": [ + "Nachec", + "martin_jaime", + "javier-aguilera", + "olijyat", + "Sotelio", + "juangpc", + "MateoVelilla", + "krthr", + "Phoneix", + "nhuamani", + "octopusinvitro", + "frasko21", + "Anonymous", + "federicobond", + "elkinbernal21", + "migueljo_12", + "seeker8" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales": { + "modified": "2020-03-12T19:36:16.167Z", + "contributors": [ + "Jethrotul", + "yohanolmedo", + "JoseGB", + "lajaso", + "Imvi10", + "chavesrdj", + "SphinxKnight", + "teoli", + "KENARKI", + "chebit", + "ethertank", + "Garf", + "tiangolo", + "Sheppy", + "Nathymig", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/AggregateError": { + "modified": "2020-10-15T22:31:08.318Z", + "contributors": [ + "Nachec", + "Gardeky" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array": { + "modified": "2020-10-15T21:15:06.394Z", + "contributors": [ + "JotaCé", + "Daniel1404", + "MartinCJ08", + "lorenzo-sc", + "Pagua", + "Marito10", + "lajaso", + "AlePerez92", + "patoezequiel", + "FranciscoCastle", + "Pulits", + "Th3Cod3", + "rec", + "BubuAnabelas", + "abaracedo", + "Pablo_Bangueses", + "gfernandez", + "davegomez", + "viartola", + "Albizures", + "germanio", + "a0viedo", + "teoli", + "LuisArt", + "Nukeador", + "ADP13", + "Errepunto", + "Sheppy", + "Nathymig", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/@@iterator": { + "modified": "2020-10-15T22:06:23.853Z", + "contributors": [ + "lajaso" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/@@species": { + "modified": "2020-10-15T22:07:11.429Z", + "contributors": [ + "lajaso" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/@@unscopables": { + "modified": "2020-10-15T22:04:47.805Z", + "contributors": [ + "lajaso" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/concat": { + "modified": "2020-10-15T21:38:20.137Z", + "contributors": [ + "AlePerez92", + "lajaso", + "germun", + "joseluisq", + "KurtPoehler", + "dgrcode", + "gonzalog" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/copyWithin": { + "modified": "2020-10-15T21:46:52.733Z", + "contributors": [ + "lajaso", + "chabisoriano", + "Aldomolina", + "eljonims" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/entries": { + "modified": "2020-10-15T21:45:28.326Z", + "contributors": [ + "lajaso", + "danielfelipe113", + "imNicoSuarez" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/every": { + "modified": "2020-10-15T21:38:36.565Z", + "contributors": [ + "camsa", + "thepianist2", + "lajaso", + "devrodriguez", + "cagodoy", + "vltamara" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/fill": { + "modified": "2020-10-15T21:37:55.734Z", + "contributors": [ + "camsa", + "lajaso", + "ticdenis", + "luisNavasArg", + "eljonims", + "cesarve77" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/filter": { + "modified": "2020-10-15T21:30:44.260Z", + "contributors": [ + "SphinxKnight", + "tenthlive", + "AlePerez92", + "lajaso", + "robe007", + "AdrianSkar", + "krthr", + "joseluisq", + "cesargtzyanez", + "josegarciaclm95", + "ezain", + "dgrcode", + "vltamara", + "averdion", + "li0t", + "matajm" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/find": { + "modified": "2020-10-15T21:37:55.410Z", + "contributors": [ + "AlePerez92", + "orgcompany", + "sancospi", + "chokozzy", + "adictovirtual", + "alo5" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/findIndex": { + "modified": "2020-10-15T21:46:40.264Z", + "contributors": [ + "AlePerez92", + "dannyjhonston", + "Aldomolina", + "luisrodriguezchaves", + "andrpueb" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/flat": { + "modified": "2020-10-15T22:04:41.717Z", + "contributors": [ + "amarin95", + "AlePerez92", + "BubuAnabelas", + "fscholz", + "lajaso" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/flatMap": { + "modified": "2020-10-15T22:04:40.380Z", + "contributors": [ + "alejandro.figuera", + "amarin95", + "lajaso" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/forEach": { + "modified": "2020-10-15T21:25:13.328Z", + "contributors": [ + "maximocapital", + "AlePerez92", + "lajaso", + "MiSStakes", + "Aldomolina", + "gfvcastro", + "Arnaldof", + "estebanav", + "pakitometal", + "007lva", + "fcomabella", + "everblut", + "fernandomg", + "teoli", + "elfoxero" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/from": { + "modified": "2020-10-15T21:41:11.903Z", + "contributors": [ + "AlePerez92", + "lajaso", + "Aldomolina", + "GiuMagnani", + "joakku", + "thzunder" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/includes": { + "modified": "2020-10-15T21:41:08.738Z", + "contributors": [ + "emilianot", + "AlePerez92", + "lajaso", + "jorgeyp", + "patoezequiel", + "Estoja", + "degj21", + "wffranco", + "DRayX" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/indexOf": { + "modified": "2020-10-15T21:21:34.369Z", + "contributors": [ + "ChristianMarca", + "lajaso", + "estrellalazaro", + "Aldomolina", + "Castillo05", + "teoli", + "AntonioNavajas" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/isArray": { + "modified": "2020-10-15T21:36:49.146Z", + "contributors": [ + "lajaso", + "Guatom", + "AlePerez92", + "sergiolunagarcia", + "EddieV1" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/join": { + "modified": "2020-10-15T21:37:05.645Z", + "contributors": [ + "lajaso", + "juanluisrp", + "davegomez" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/keys": { + "modified": "2020-10-15T21:46:47.383Z", + "contributors": [ + "lajaso", + "eljonims" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/lastIndexOf": { + "modified": "2020-10-15T21:44:42.909Z", + "contributors": [ + "luchosr", + "lajaso", + "AlePerez92", + "cesiztel" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/length": { + "modified": "2020-10-15T21:36:04.137Z", + "contributors": [ + "lajaso", + "abaracedo", + "gfernandez", + "martinweingart" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/map": { + "modified": "2019-07-29T10:38:41.705Z", + "contributors": [ + "AndCotOli", + "david_ru", + "ardillan", + "alejandrochung", + "shades3002", + "AlePerez92", + "VictorAbdon", + "andrxs", + "fcomabella" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/of": { + "modified": "2020-10-15T21:39:43.805Z", + "contributors": [ + "lajaso", + "missmakita", + "egosum", + "luisNavasArg", + "adelamata" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/pop": { + "modified": "2020-10-15T21:34:39.833Z", + "contributors": [ + "AlePerez92", + "abimael67", + "Insitu", + "VulpisDev", + "fceacero", + "estrellalazaro", + "Guitxo" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/prototype": { + "modified": "2020-10-15T21:35:31.913Z", + "contributors": [ + "lajaso", + "humbertaco" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/push": { + "modified": "2020-10-15T21:20:34.074Z", + "contributors": [ + "AlePerez92", + "_cuco_", + "fcojgodoy", + "Aldomolina", + "alvarouribe", + "teoli", + "mhauptma73" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/reduce": { + "modified": "2020-10-15T21:16:20.520Z", + "contributors": [ + "AlePerez92", + "ShakMR", + "bogdanned", + "diegoazh", + "UlisesGascon", + "eljonims", + "jeduan", + "vltamara", + "cpf", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/reduceRight": { + "modified": "2019-03-23T23:50:45.331Z", + "contributors": [ + "fuzzyalej", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/reverse": { + "modified": "2020-10-15T21:34:38.313Z", + "contributors": [ + "AlePerez92", + "JulianSoto", + "polacrin", + "eduardosada", + "Omar.VzqzAc", + "khrizenriquez", + "arthusu" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/shift": { + "modified": "2020-08-27T12:47:35.128Z", + "contributors": [ + "AlePerez92", + "Dandarprox", + "DsEsteban", + "gfernandez" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/slice": { + "modified": "2019-03-23T22:52:20.266Z", + "contributors": [ + "olijyat", + "DaFont", + "parzibyte", + "kosme", + "kdex", + "atl3", + "eljonims", + "Grijander81", + "asero82", + "oillescas" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/some": { + "modified": "2020-10-15T21:36:10.705Z", + "contributors": [ + "AlePerez92", + "thepianist2", + "Serabe", + "oillescas", + "fcomabella", + "martinweingart" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/sort": { + "modified": "2020-10-10T21:23:15.977Z", + "contributors": [ + "Gardeky", + "frfernandezdev", + "sebastian_romerola", + "Tepexic", + "carlosazaustre", + "jesuslombardo", + "reymundus2", + "CatalinaCampos", + "LuisSevillano", + "Newtrino", + "cristobal.pina", + "alejandrochung", + "AlePerez92", + "eljonims", + "rubenpizarrov", + "luisbd", + "lombareload" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/splice": { + "modified": "2020-10-15T21:33:06.435Z", + "contributors": [ + "AlePerez92", + "_cuco_", + "FelixJMaxwell", + "Joshuete1997", + "NoTengoBattery", + "pawer13", + "Guitxo", + "alvarouribe" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/toLocaleString": { + "modified": "2020-10-15T22:10:13.626Z", + "contributors": [ + "estebanpanelli" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/toSource": { + "modified": "2019-03-23T22:08:25.338Z", + "contributors": [ + "teoli", + "pedro-otero" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/toString": { + "modified": "2020-10-15T21:37:53.754Z", + "contributors": [ + "AlePerez92", + "juanluisrp", + "Dorumin", + "dgrizzla" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/unshift": { + "modified": "2020-10-15T21:36:39.291Z", + "contributors": [ + "AlePerez92", + "elhesuu" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Array/values": { + "modified": "2020-10-15T21:47:36.548Z", + "contributors": [ + "AlePerez92", + "chabisoriano", + "clystian" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer": { + "modified": "2020-10-15T21:40:07.554Z", + "contributors": [ + "lajaso", + "joseluisq", + "mlealvillarreal", + "AzazelN28", + "tamat" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/@@species": { + "modified": "2020-10-15T22:05:03.686Z", + "contributors": [ + "lajaso" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/byteLength": { + "modified": "2020-10-15T22:05:03.452Z", + "contributors": [ + "lajaso" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype": { + "modified": "2020-10-15T21:51:49.315Z", + "contributors": [ + "lajaso", + "AzazelN28" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Boolean": { + "modified": "2020-10-15T21:16:58.681Z", + "contributors": [ + "Nachec", + "jtenclay", + "IsaacAaron", + "MarkelCuesta", + "teoli", + "Talisker", + "Nathymig", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Boolean/Boolean": { + "modified": "2020-10-15T22:33:47.964Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Boolean/toSource": { + "modified": "2019-09-14T17:25:31.875Z", + "contributors": [ + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date": { + "modified": "2019-10-10T16:53:04.977Z", + "contributors": [ + "wbamberg", + "Eduardo_66", + "teoli", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/UTC": { + "modified": "2019-03-23T23:48:17.886Z", + "contributors": [ + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getDate": { + "modified": "2019-03-23T22:47:58.851Z", + "contributors": [ + "DanielFRB", + "helmantika", + "ycanales" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getDay": { + "modified": "2019-03-23T22:41:58.390Z", + "contributors": [ + "odelrio", + "davElsanto", + "thzunder" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getFullYear": { + "modified": "2020-04-12T08:54:11.729Z", + "contributors": [ + "Clipi", + "Guitxo" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getHours": { + "modified": "2019-03-23T22:25:54.207Z", + "contributors": [ + "davElsanto" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getMilliseconds": { + "modified": "2019-03-23T22:19:54.449Z", + "contributors": [ + "Undre4m" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getMinutes": { + "modified": "2019-03-23T22:50:56.451Z", + "contributors": [ + "jezdez", + "jorgeLightwave" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getMonth": { + "modified": "2019-03-23T22:51:30.861Z", + "contributors": [ + "cristobalramos" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getSeconds": { + "modified": "2020-10-15T22:04:39.573Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getTime": { + "modified": "2020-10-18T16:10:45.747Z", + "contributors": [ + "feliperomero3", + "maxbalter", + "Marttharomero" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getUTCFullYear": { + "modified": "2019-03-23T22:20:31.228Z", + "contributors": [ + "e.g.m.g." + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/getUTCHours": { + "modified": "2019-03-23T22:23:56.170Z", + "contributors": [ + "eltrikiman" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/now": { + "modified": "2019-03-23T23:48:17.746Z", + "contributors": [ + "teoli", + "ethertank", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/parse": { + "modified": "2019-03-23T23:48:18.384Z", + "contributors": [ + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/prototype": { + "modified": "2019-03-23T23:11:22.072Z", + "contributors": [ + "teoli" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/setFullYear": { + "modified": "2019-03-23T22:20:28.916Z", + "contributors": [ + "e.g.m.g." + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/setMonth": { + "modified": "2020-10-15T22:26:32.061Z", + "contributors": [ + "mavega998" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/toDateString": { + "modified": "2020-10-15T22:00:03.156Z", + "contributors": [ + "thisisalexis" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/toISOString": { + "modified": "2020-10-18T16:02:20.913Z", + "contributors": [ + "feliperomero3", + "Dandarprox", + "guillermomontero", + "chinogarcia", + "thzunder", + "developingo" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/toJSON": { + "modified": "2020-10-15T22:34:58.674Z", + "contributors": [ + "w3pdsoft" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleDateString": { + "modified": "2020-10-15T22:26:52.505Z", + "contributors": [ + "AntonioM." + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleString": { + "modified": "2020-10-15T22:28:03.714Z", + "contributors": [ + "jestebans", + "Juanpredev" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/toLocaleTimeString": { + "modified": "2020-10-15T22:28:25.409Z", + "contributors": [ + "antixsuperstar" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Date/toUTCString": { + "modified": "2020-10-15T22:26:46.954Z", + "contributors": [ + "batik" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error": { + "modified": "2020-10-15T21:17:01.621Z", + "contributors": [ + "Nachec", + "akadoshin", + "gfernandez", + "teoli", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error/constructor_Error": { + "modified": "2020-10-15T22:33:54.309Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error/fileName": { + "modified": "2020-10-15T22:33:52.450Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error/lineNumber": { + "modified": "2019-03-23T22:44:34.178Z", + "contributors": [ + "KikinRdz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error/message": { + "modified": "2019-03-23T22:31:48.655Z", + "contributors": [ + "RiazaValverde" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error/name": { + "modified": "2020-10-15T21:51:31.702Z", + "contributors": [ + "Nachec", + "Bumxu" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error/prototype": { + "modified": "2019-03-23T22:31:40.887Z", + "contributors": [ + "RiazaValverde" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error/toSource": { + "modified": "2020-10-15T22:33:54.410Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Error/toString": { + "modified": "2020-10-15T22:33:57.174Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/EvalError": { + "modified": "2020-08-30T20:35:42.248Z", + "contributors": [ + "YHWHSGP88", + "Undre4m" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Funcionesasíncronas": { + "modified": "2020-10-15T22:06:23.441Z", + "contributors": [ + "akacoronel", + "rayrojas", + "miguelrijo" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function": { + "modified": "2020-10-15T21:14:31.534Z", + "contributors": [ + "Nachec", + "Tzikin100", + "teoli", + "ethertank", + "Skorney", + "ADP13", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/Función": { + "modified": "2020-10-15T22:33:51.294Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/apply": { + "modified": "2019-03-23T23:31:02.682Z", + "contributors": [ + "AdrianSkar", + "swsoftware", + "jdmgarcia", + "juliandavidmr", + "JuanMaRuiz", + "elenatorro", + "eespitia.rea", + "emazarrasa", + "yakashiro", + "teoli", + "chebit", + "gtoroap" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/arguments": { + "modified": "2019-03-23T23:48:35.727Z", + "contributors": [ + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/bind": { + "modified": "2019-03-23T23:02:28.323Z", + "contributors": [ + "Imvi10", + "Silverium", + "marinatouceda", + "dimun", + "lennarth.anaya", + "Javingka", + "cobogt" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/call": { + "modified": "2020-11-13T21:36:49.496Z", + "contributors": [ + "alejandro.fca", + "saulrp7", + "cristianmartinez", + "teoli", + "bluesky777" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/caller": { + "modified": "2019-03-23T22:52:58.734Z", + "contributors": [ + "DavidBernal", + "fabianlucena" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/displayName": { + "modified": "2020-10-15T21:59:29.332Z", + "contributors": [ + "juliandavidmr" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/length": { + "modified": "2020-02-10T13:03:52.789Z", + "contributors": [ + "kant", + "Nanyin", + "HyMaN" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/name": { + "modified": "2019-03-18T20:38:56.122Z", + "contributors": [ + "SunWithIssues", + "pedro-otero", + "kdex", + "jorgecasar" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/prototype": { + "modified": "2019-03-23T23:53:55.022Z", + "contributors": [ + "mcardozo", + "teoli", + "shaggyrd", + "Mgjbot", + "Wrongloop", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/toSource": { + "modified": "2019-03-23T22:42:12.644Z", + "contributors": [ + "teoli", + "gpdiaz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Function/toString": { + "modified": "2019-03-23T22:31:32.582Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Generador": { + "modified": "2020-09-30T15:33:08.419Z", + "contributors": [ + "alejandro.fca", + "sdotson", + "Chofoteddy", + "nicolasolmos" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Generador/next": { + "modified": "2020-10-15T22:03:24.006Z", + "contributors": [ + "DJphilomath" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Generador/return": { + "modified": "2020-10-15T22:03:25.741Z", + "contributors": [ + "DJphilomath" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Generador/throw": { + "modified": "2020-10-15T22:03:23.876Z", + "contributors": [ + "DJphilomath" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Infinity": { + "modified": "2020-03-12T19:36:58.042Z", + "contributors": [ + "SphinxKnight", + "teoli", + "jarneygm", + "ADP13", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/InternalError": { + "modified": "2020-10-15T22:33:54.342Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/InternalError/Constructor_InternalError": { + "modified": "2020-10-15T22:33:52.933Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Intl": { + "modified": "2020-10-15T21:58:20.138Z", + "contributors": [ + "LucasDeFarias", + "eespitia.rea", + "puentesdiaz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat": { + "modified": "2020-10-15T21:29:49.289Z", + "contributors": [ + "fscholz", + "IsraelFloresDGA", + "eespitia.rea" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Intl/NumberFormat/format": { + "modified": "2020-10-15T22:26:32.434Z", + "contributors": [ + "fscholz", + "Daniel7Byte" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Intl/RelativeTimeFormat": { + "modified": "2020-10-15T22:33:27.123Z", + "contributors": [ + "midudev" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/JSON": { + "modified": "2020-09-19T17:44:12.200Z", + "contributors": [ + "cristian.valdivieso", + "Kroneaux", + "ulisestrujillo", + "lfottaviano", + "JefferHXC", + "rossif", + "teoli", + "fscholz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/JSON/parse": { + "modified": "2019-03-23T23:09:22.011Z", + "contributors": [ + "bufalo1973", + "aminguez", + "mbarbancho", + "rossif", + "PepeBeat" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/JSON/stringify": { + "modified": "2020-10-15T21:26:39.053Z", + "contributors": [ + "AlePerez92", + "Ivan-Perez", + "kip-13", + "imagentleman", + "raistmaj", + "JoseBarakat", + "danielbenedi6", + "inawrath", + "lfottaviano", + "julesdel", + "teland", + "teoli", + "carlosgctes" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map": { + "modified": "2020-10-15T21:30:28.950Z", + "contributors": [ + "Almiqui", + "AntonioSalazar", + "SphinxKnight", + "Sebastiancbvz", + "vaavJSdev", + "timgivois", + "aeroxmotion", + "PepeAleu", + "xavier.gallofre", + "rn3w", + "Grijander81", + "GustavoFernandez", + "rec", + "Kouen", + "facundoj" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/clear": { + "modified": "2019-03-23T22:33:57.332Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/delete": { + "modified": "2019-06-22T21:43:58.894Z", + "contributors": [ + "gerardonavart", + "Grijander81" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/entries": { + "modified": "2019-03-23T22:33:46.712Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/forEach": { + "modified": "2020-10-15T21:59:58.539Z", + "contributors": [ + "gerardonavart", + "PabloContreras", + "katuno1981" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/get": { + "modified": "2020-10-15T22:01:57.424Z", + "contributors": [ + "Marte", + "Sebastiancbvz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/has": { + "modified": "2020-10-15T22:32:18.735Z", + "contributors": [ + "fredydeltoro" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/keys": { + "modified": "2019-03-23T22:31:40.425Z", + "contributors": [ + "jesusfchavarro" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/prototype": { + "modified": "2019-03-23T22:06:29.334Z", + "contributors": [ + "JuanMacias" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/set": { + "modified": "2019-03-23T22:28:28.999Z", + "contributors": [ + "guillermojmc" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/size": { + "modified": "2019-03-23T22:34:02.057Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Map/values": { + "modified": "2020-10-15T22:12:33.830Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math": { + "modified": "2020-10-15T21:17:08.782Z", + "contributors": [ + "RomnSD", + "Pedro-vk", + "lajaso", + "Enesimus", + "maxbalter", + "raecillacastellana", + "mrajente47", + "enesimo", + "Jaston", + "AugustoEsquen", + "teoli", + "ethertank", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/E": { + "modified": "2020-10-15T21:21:06.485Z", + "contributors": [ + "lajaso", + "teoli", + "jessest" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/LN10": { + "modified": "2020-10-15T21:21:04.066Z", + "contributors": [ + "lajaso", + "teoli", + "jessest" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/LN2": { + "modified": "2020-10-15T21:21:06.933Z", + "contributors": [ + "lajaso", + "teoli", + "jessest" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/LOG10E": { + "modified": "2019-03-23T22:21:51.531Z", + "contributors": [ + "aocodermx" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/LOG2E": { + "modified": "2019-03-23T23:35:28.496Z", + "contributors": [ + "teoli", + "jessest" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/PI": { + "modified": "2019-03-23T22:21:48.729Z", + "contributors": [ + "aocodermx" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/SQRT1_2": { + "modified": "2019-03-23T22:22:44.049Z", + "contributors": [ + "aocodermx" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/SQRT2": { + "modified": "2019-03-23T22:18:15.216Z", + "contributors": [ + "geradrum" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/abs": { + "modified": "2019-10-29T19:51:46.768Z", + "contributors": [ + "jaomix1", + "jezdez", + "Sotelio" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/acos": { + "modified": "2020-10-15T21:58:17.630Z", + "contributors": [ + "Enesimus" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/acosh": { + "modified": "2020-10-15T21:59:09.931Z", + "contributors": [ + "nickobre", + "Enesimus" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/asin": { + "modified": "2019-03-23T22:11:21.124Z", + "contributors": [ + "hckt" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/asinh": { + "modified": "2020-10-15T22:00:15.403Z", + "contributors": [ + "josegarciamanez" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/atan": { + "modified": "2020-10-15T22:02:19.566Z", + "contributors": [ + "alejocas" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/atan2": { + "modified": "2019-03-23T22:52:46.887Z", + "contributors": [ + "maik10s" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/atanh": { + "modified": "2020-11-01T00:27:58.552Z", + "contributors": [ + "carlitosnu41" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/cbrt": { + "modified": "2020-11-01T15:23:46.179Z", + "contributors": [ + "carlitosnu41" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/ceil": { + "modified": "2020-10-15T21:49:24.207Z", + "contributors": [ + "RubiVG", + "AlePerez92", + "d-go", + "abestrad1", + "ManuelRubio", + "ars1614", + "Roberto2883" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/cos": { + "modified": "2020-10-15T22:32:41.209Z", + "contributors": [ + "JGalazan" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/exp": { + "modified": "2019-03-23T22:13:13.656Z", + "contributors": [ + "maramal" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/expm1": { + "modified": "2020-11-19T20:10:09.526Z", + "contributors": [ + "lpg7793" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/floor": { + "modified": "2020-11-03T13:27:31.226Z", + "contributors": [ + "LuisGalicia", + "reymundus2", + "dherrero", + "teoli", + "ethertank", + "harleshinn" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/fround": { + "modified": "2020-10-15T22:21:30.568Z", + "contributors": [ + "Itaiu" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/hypot": { + "modified": "2020-10-15T22:01:35.023Z", + "contributors": [ + "AzazelN28", + "MarioECU" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/log": { + "modified": "2020-10-15T22:16:12.754Z", + "contributors": [ + "reymundus2" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/log10": { + "modified": "2019-03-23T22:26:16.691Z", + "contributors": [ + "amcrsanchez" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/log2": { + "modified": "2020-10-15T22:02:09.980Z", + "contributors": [ + "asdrubalivan" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/max": { + "modified": "2019-03-23T22:58:23.136Z", + "contributors": [ + "roberbnd", + "kutyel", + "alonso.vazquez", + "teoli", + "allangonzalezmiceli" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/min": { + "modified": "2019-03-23T22:39:26.032Z", + "contributors": [ + "kutyel", + "alonso.vazquez" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/pow": { + "modified": "2020-05-11T01:41:03.777Z", + "contributors": [ + "paguilar", + "carral" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/random": { + "modified": "2019-03-23T23:00:21.676Z", + "contributors": [ + "hdesoto", + "CarlosLinares", + "Sotelio", + "daiant" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/round": { + "modified": "2020-07-28T16:21:17.637Z", + "contributors": [ + "FacundoF1", + "herediando", + "Maletil", + "emergugue", + "YerkoPalma" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/seno": { + "modified": "2019-03-23T22:51:39.313Z", + "contributors": [ + "jezdez", + "germanfr" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/sign": { + "modified": "2019-03-23T22:16:42.806Z", + "contributors": [ + "Vickysolo", + "frankman123" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/sqrt": { + "modified": "2019-03-23T22:28:35.014Z", + "contributors": [ + "MarioECU", + "periplox", + "javodg", + "LotarMC" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/tan": { + "modified": "2020-10-15T22:30:22.119Z", + "contributors": [ + "spaceinvadev" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/tanh": { + "modified": "2020-10-15T22:08:08.543Z", + "contributors": [ + "smuurf" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Math/trunc": { + "modified": "2020-06-23T08:00:29.509Z", + "contributors": [ + "GioSJ47", + "UlisesGascon", + "AldenGate", + "kenin4" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/NaN": { + "modified": "2020-03-12T19:36:10.137Z", + "contributors": [ + "jaomix1", + "mjimcua", + "SphinxKnight", + "teoli", + "Garf", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number": { + "modified": "2020-11-24T10:13:32.926Z", + "contributors": [ + "gise-s", + "charlietaracenadrums", + "carlintrujillo11", + "luispro19", + "Jethrotul", + "KamerrOficial", + "AlePerez92", + "olijyat", + "teoli", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/MAX_SAFE_INTEGER": { + "modified": "2020-10-15T22:00:45.784Z", + "contributors": [ + "urielmx" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/MAX_VALUE": { + "modified": "2019-03-23T22:40:03.550Z", + "contributors": [ + "abaracedo", + "UlisesGascon" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/MIN_VALUE": { + "modified": "2019-03-23T22:39:33.277Z", + "contributors": [ + "abaracedo" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/NEGATIVE_INFINITY": { + "modified": "2019-03-23T23:20:29.197Z", + "contributors": [ + "teoli", + "jarneygm" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/NaN": { + "modified": "2020-10-15T22:30:30.437Z", + "contributors": [ + "oldanirenzo" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/POSITIVE_INFINITY": { + "modified": "2019-03-23T23:20:30.481Z", + "contributors": [ + "teoli", + "jarneygm" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/isFinite": { + "modified": "2020-10-15T22:02:19.829Z", + "contributors": [ + "dahsser" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/isInteger": { + "modified": "2020-10-15T21:44:12.806Z", + "contributors": [ + "AlePerez92", + "Rafaelox" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/isNaN": { + "modified": "2020-10-14T19:49:07.774Z", + "contributors": [ + "alejandro.fca", + "abaracedo" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/isSafeInteger": { + "modified": "2020-10-15T22:02:33.932Z", + "contributors": [ + "chrishenx" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/parseFloat": { + "modified": "2020-10-15T22:11:38.614Z", + "contributors": [ + "pilichanampe", + "Chstrange", + "IsraelFloresDGA" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/parseInt": { + "modified": "2020-10-15T22:29:44.854Z", + "contributors": [ + "HarryzMoba_10" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/prototype": { + "modified": "2019-03-23T23:46:16.155Z", + "contributors": [ + "teoli", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/toFixed": { + "modified": "2020-05-26T21:48:51.844Z", + "contributors": [ + "EtelS", + "HarryzMoba_10", + "BubuAnabelas", + "Apkahym", + "capgros", + "isabido" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/toLocaleString": { + "modified": "2020-11-04T23:22:26.363Z", + "contributors": [ + "ccarruitero-mdn" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/toPrecision": { + "modified": "2020-10-15T22:05:51.600Z", + "contributors": [ + "jtorresheredia" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/toString": { + "modified": "2019-06-15T08:43:31.612Z", + "contributors": [ + "IbraBach", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Number/valueOf": { + "modified": "2020-10-15T21:58:23.022Z", + "contributors": [ + "Enesimus" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object": { + "modified": "2020-10-15T21:17:02.144Z", + "contributors": [ + "luisjorquera", + "fedoroffs", + "ramirobg94", + "marcelorodcla", + "hecsoto1", + "gabrielrincon", + "fscholz", + "DanielAmaro", + "taniaReyesM", + "pedro-otero", + "ragutimar", + "hmorv", + "mishelashala", + "teoli", + "diegogaysaez", + "neosergio", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/__defineGetter__": { + "modified": "2019-03-23T22:39:13.909Z", + "contributors": [ + "p1errot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/__lookupGetter__": { + "modified": "2020-10-15T21:59:55.328Z", + "contributors": [ + "al-shmlan", + "jerssonjgar" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/assign": { + "modified": "2020-10-15T21:34:18.548Z", + "contributors": [ + "camsa", + "AlePerez92", + "sillo01", + "garolard", + "kdex", + "aelena", + "sgmonda", + "dzegarra", + "fortil", + "raerpo", + "Anonymous", + "mishelashala", + "fscholz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/constructor": { + "modified": "2019-03-23T23:16:25.847Z", + "contributors": [ + "alejandrochung", + "hugoleon46", + "teoli", + "chebit", + "carlosmantilla" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/create": { + "modified": "2020-11-08T21:02:55.557Z", + "contributors": [ + "Hunter3195", + "jescas248", + "AlePerez92", + "jacoborus", + "teoli", + "Siro_Diaz", + "carlosmantilla" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/defineProperties": { + "modified": "2019-03-23T23:15:47.453Z", + "contributors": [ + "Thargelion", + "mishelashala", + "teoli", + "guillermojmc" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/defineProperty": { + "modified": "2019-03-23T23:08:49.016Z", + "contributors": [ + "JoanSerna", + "thejavo", + "EstherAF", + "mishelashala", + "victorgavilan", + "Siro_Diaz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/entries": { + "modified": "2019-07-12T06:16:58.372Z", + "contributors": [ + "ajuanjojjj", + "datencia", + "JooseNavarro" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/freeze": { + "modified": "2020-10-15T21:40:07.065Z", + "contributors": [ + "D3Portillo", + "mariogl", + "AndresSepar", + "tw1ttt3r", + "mishelashala" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/fromEntries": { + "modified": "2020-10-15T22:16:55.358Z", + "contributors": [ + "emileond", + "Belquira" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptor": { + "modified": "2020-04-01T17:55:45.485Z", + "contributors": [ + "SoyZatarain", + "vcastrejont", + "UlisesGascon", + "mishelashala" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyDescriptors": { + "modified": "2020-10-15T22:04:17.154Z", + "contributors": [ + "cbalderasc" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertyNames": { + "modified": "2019-03-23T23:11:13.666Z", + "contributors": [ + "teland" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/getOwnPropertySymbols": { + "modified": "2019-03-23T22:44:20.977Z", + "contributors": [ + "SphinxKnight", + "mishelashala" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/getPrototypeOf": { + "modified": "2019-03-23T23:08:23.955Z", + "contributors": [ + "tutugordillo", + "Siro_Diaz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/hasOwnProperty": { + "modified": "2019-03-23T23:16:40.759Z", + "contributors": [ + "mlealvillarreal", + "teoli", + "Siro_Diaz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/is": { + "modified": "2020-10-25T20:02:03.267Z", + "contributors": [ + "Cesaraugp", + "SphinxKnight", + "nothnk", + "adelamata" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/isExtensible": { + "modified": "2019-03-23T22:44:00.950Z", + "contributors": [ + "mishelashala" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/isFrozen": { + "modified": "2019-03-23T22:44:03.171Z", + "contributors": [ + "mishelashala" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/isPrototypeOf": { + "modified": "2019-03-23T22:31:29.220Z", + "contributors": [ + "Grijander81" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/isSealed": { + "modified": "2020-10-15T22:04:16.292Z", + "contributors": [ + "cbalderasc" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/keys": { + "modified": "2020-10-15T21:31:27.965Z", + "contributors": [ + "jose-setaworkshop", + "SphinxKnight", + "animanoir", + "D3Portillo", + "_cuco_", + "MarkelCuesta", + "kdex", + "andrpueb", + "PBartrina", + "Sanuzzi", + "cristianjav", + "rcchristiane" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/preventExtensions": { + "modified": "2019-04-27T00:07:22.331Z", + "contributors": [ + "mishelashala" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/propertyIsEnumerable": { + "modified": "2019-03-23T22:50:44.591Z", + "contributors": [ + "aldoromo88" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/proto": { + "modified": "2019-03-23T22:45:52.056Z", + "contributors": [ + "swsoftware", + "mishelashala", + "adelamata" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/prototype": { + "modified": "2020-10-15T21:28:24.470Z", + "contributors": [ + "lajaso", + "Sergio_Gonzalez_Collado", + "educalleja", + "AlexanderEstebanZapata1994", + "emilianodiaz", + "mishelashala", + "teoli", + "diegogaysaez" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/seal": { + "modified": "2019-04-27T00:05:41.633Z", + "contributors": [ + "JoniJnm", + "Grijander81" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/setPrototypeOf": { + "modified": "2019-03-23T22:43:30.332Z", + "contributors": [ + "SphinxKnight", + "imangas", + "mishelashala" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/toLocaleString": { + "modified": "2020-10-15T22:31:29.977Z", + "contributors": [ + "JotaCé" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/toSource": { + "modified": "2020-10-15T21:59:52.415Z", + "contributors": [ + "taniaReyesM" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/toString": { + "modified": "2019-03-23T23:48:33.504Z", + "contributors": [ + "gutyfas", + "pctux", + "lfottaviano", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/valueOf": { + "modified": "2019-03-23T23:07:28.561Z", + "contributors": [ + "JuanMacias", + "Gorzas", + "emiliot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Object/values": { + "modified": "2020-10-15T21:51:49.001Z", + "contributors": [ + "camsa", + "kraneok", + "AlePerez92", + "ramses512" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise": { + "modified": "2020-10-15T21:34:31.961Z", + "contributors": [ + "chrisdavidmills", + "javigaralva", + "ManuelEsp", + "atpollmann", + "jwhitlock", + "zgluis", + "joseconstela", + "luisrodriguezchaves", + "LazaroOnline", + "leopic", + "teoli", + "JhonAlx", + "dennistobar", + "alagos", + "jorgecasar" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise/all": { + "modified": "2020-10-15T21:50:20.796Z", + "contributors": [ + "baumannzone", + "isaies", + "jwhitlock", + "AlePerez92", + "FranBacoSoft" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise/catch": { + "modified": "2020-10-15T21:54:38.286Z", + "contributors": [ + "JuanMacias", + "JoseGB", + "walbuc" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise/finally": { + "modified": "2020-10-15T22:16:46.629Z", + "contributors": [ + "javigallego", + "smvilar" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise/prototype": { + "modified": "2020-10-15T21:52:03.650Z", + "contributors": [ + "atpollmann" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise/race": { + "modified": "2020-10-15T21:50:20.173Z", + "contributors": [ + "JuanMacias", + "jwhitlock", + "FranBacoSoft" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise/reject": { + "modified": "2020-10-15T22:00:43.489Z", + "contributors": [ + "edeyglez95", + "kalozoya", + "giturra" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise/resolve": { + "modified": "2020-10-15T22:06:37.624Z", + "contributors": [ + "HappyEduardoMilk", + "ChristianMarca" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Promise/then": { + "modified": "2020-11-30T12:11:41.749Z", + "contributors": [ + "StripTM", + "MichaelOrdaz", + "PatoDeTuring", + "FreakLevel", + "snake77se", + "Takyo", + "smvilar", + "Knskan3", + "JurgenBlitz", + "DaniLaguna", + "MarkelCuesta", + "manumora" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Proxy": { + "modified": "2020-10-30T19:48:13.357Z", + "contributors": [ + "Ramdhei-codes", + "CristalT", + "carloslfu", + "pedro-otero", + "eContento", + "kdex", + "pedropablomt95" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/ReferenceError": { + "modified": "2020-10-15T22:33:51.476Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/RegExp": { + "modified": "2020-10-15T21:12:12.221Z", + "contributors": [ + "Nachec", + "lord-reptilia", + "wbamberg", + "angeldomp49", + "F94Olivera", + "EstebanVictorio", + "teoli", + "fmvilas", + "Sole", + "marcoslhc", + "lmorchard", + "Scipion", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/RegExp/RegExp": { + "modified": "2020-10-15T22:34:22.734Z", + "contributors": [ + "Nachec" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/RegExp/compile": { + "modified": "2020-10-15T22:23:39.381Z", + "contributors": [ + "raiman264" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/RegExp/exec": { + "modified": "2019-03-23T22:08:57.043Z", + "contributors": [ + "Sebastiancbvz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/RegExp/ignoreCase": { + "modified": "2019-03-23T22:10:00.611Z", + "contributors": [ + "Cuadraman" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/RegExp/rightContext": { + "modified": "2020-10-15T22:22:06.547Z", + "contributors": [ + "higuitadiaz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/RegExp/test": { + "modified": "2019-03-23T22:20:42.368Z", + "contributors": [ + "Undre4m" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/RegExp/toString": { + "modified": "2019-03-23T22:20:44.971Z", + "contributors": [ + "Undre4m" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set": { + "modified": "2020-10-15T21:43:41.104Z", + "contributors": [ + "camsa", + "IsraelFloresDGA", + "albertor21", + "robe007", + "taniaReyesM", + "mjlescano", + "germanio", + "frank-orellana", + "Chofoteddy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set/@@iterator": { + "modified": "2020-10-15T22:23:37.310Z", + "contributors": [ + "devtoni" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set/add": { + "modified": "2019-03-23T22:37:23.989Z", + "contributors": [ + "Chofoteddy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set/clear": { + "modified": "2019-03-23T22:25:09.145Z", + "contributors": [ + "frank-orellana" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set/delete": { + "modified": "2019-03-23T22:25:14.047Z", + "contributors": [ + "frank-orellana" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set/entries": { + "modified": "2020-10-15T22:06:44.315Z", + "contributors": [ + "AMongeMoreno" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set/has": { + "modified": "2019-03-23T22:25:15.879Z", + "contributors": [ + "frank-orellana" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set/size": { + "modified": "2019-03-23T22:37:32.002Z", + "contributors": [ + "albertor21", + "Chofoteddy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Set/values": { + "modified": "2020-10-15T22:23:08.370Z", + "contributors": [ + "jvelasquez-cl" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String": { + "modified": "2020-10-15T21:15:27.929Z", + "contributors": [ + "Nachec", + "robertsallent", + "sujumayas", + "AriManto", + "BubuAnabelas", + "wbamberg", + "SphinxKnight", + "Gilbertrdz", + "vik231982", + "alejandrochung", + "DevManny", + "teoli", + "ADP13", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/Trim": { + "modified": "2019-08-18T16:00:14.454Z", + "contributors": [ + "valen2004vega", + "raulgg", + "baumannzone", + "andrpueb", + "thzunder", + "AnuarMB" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/anchor": { + "modified": "2019-03-23T23:48:20.117Z", + "contributors": [ + "paradoja", + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/big": { + "modified": "2019-03-23T23:48:12.468Z", + "contributors": [ + "Feder1997Clinton", + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/blink": { + "modified": "2019-03-23T23:48:14.789Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/bold": { + "modified": "2019-03-23T23:48:17.641Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/charAt": { + "modified": "2019-03-23T23:48:14.397Z", + "contributors": [ + "manatico4", + "thepianist2", + "Undre4m", + "AnuarMB", + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/charCodeAt": { + "modified": "2019-03-23T23:48:12.586Z", + "contributors": [ + "GermanRodrickson", + "VGamezz19", + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/codePointAt": { + "modified": "2020-10-15T21:56:01.225Z", + "contributors": [ + "thepianist2" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/concat": { + "modified": "2020-11-17T12:46:24.732Z", + "contributors": [ + "AlePerez92", + "thepianist2", + "Aldomolina", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/endsWith": { + "modified": "2020-11-17T13:03:14.946Z", + "contributors": [ + "AlePerez92", + "emibloque", + "SphinxKnight", + "thzunder" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/fixed": { + "modified": "2019-03-23T23:48:13.182Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/fontcolor": { + "modified": "2019-03-23T22:43:01.091Z", + "contributors": [ + "thzunder" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/fontsize": { + "modified": "2019-03-23T22:42:58.033Z", + "contributors": [ + "thzunder" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/fromCharCode": { + "modified": "2019-03-23T23:48:18.539Z", + "contributors": [ + "pierina27", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/fromCodePoint": { + "modified": "2019-03-23T22:54:48.266Z", + "contributors": [ + "SphinxKnight", + "iKenshu" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/includes": { + "modified": "2020-11-17T13:18:02.027Z", + "contributors": [ + "AlePerez92", + "Fjaguero", + "JuanMacias", + "mikekrn", + "jairoFg12" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/indexOf": { + "modified": "2019-03-18T21:12:49.473Z", + "contributors": [ + "aalmadar", + "diegoazh", + "ArisChuck", + "WillyMaikowski", + "teoli", + "Tetrix", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/italics": { + "modified": "2019-03-23T23:48:19.418Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/lastIndexOf": { + "modified": "2019-03-23T23:48:26.628Z", + "contributors": [ + "chepegeek", + "imNicoSuarez", + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/length": { + "modified": "2020-11-17T13:10:35.617Z", + "contributors": [ + "AlePerez92", + "perezale", + "padrecedano", + "thzunder", + "DevManny", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/link": { + "modified": "2019-03-23T23:48:12.131Z", + "contributors": [ + "germun", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/localeCompare": { + "modified": "2020-10-15T22:04:12.741Z", + "contributors": [ + "DesarrolloJon" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/match": { + "modified": "2019-03-23T23:48:25.734Z", + "contributors": [ + "germun", + "facugon", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/matchAll": { + "modified": "2020-10-15T22:22:31.534Z", + "contributors": [ + "juanarbol" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/normalize": { + "modified": "2020-10-15T22:04:13.627Z", + "contributors": [ + "daniel.duarte" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/padStart": { + "modified": "2019-03-23T22:19:55.544Z", + "contributors": [ + "teoli", + "Mamgui", + "EdgarOrtegaRamirez" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/prototype": { + "modified": "2019-03-23T23:53:48.515Z", + "contributors": [ + "DevManny", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/raw": { + "modified": "2020-10-15T21:58:34.921Z", + "contributors": [ + "leomicheloni", + "RaulRueda" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/repeat": { + "modified": "2020-10-15T21:38:22.279Z", + "contributors": [ + "SphinxKnight", + "josegarciamanez", + "chabisoriano", + "GabrielNicolasAvellaneda" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/replace": { + "modified": "2020-01-29T20:30:57.565Z", + "contributors": [ + "camsa", + "Fardenz", + "JasonGlez", + "xaviesteve", + "joselix", + "miljan-aleksic", + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/search": { + "modified": "2019-03-23T23:48:25.507Z", + "contributors": [ + "AlePerez92", + "diegoazh", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/slice": { + "modified": "2019-03-23T23:48:27.527Z", + "contributors": [ + "ibejarano", + "alejandrochung", + "vltamara", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/small": { + "modified": "2019-03-23T23:48:20.862Z", + "contributors": [ + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/split": { + "modified": "2019-03-23T23:52:25.005Z", + "contributors": [ + "germun", + "narigondelsiglo", + "davegomez", + "teoli", + "Juanromerocruz", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/startsWith": { + "modified": "2020-11-17T06:29:46.581Z", + "contributors": [ + "AlePerez92", + "ArianJM", + "SphinxKnight", + "mautematico" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/strike": { + "modified": "2019-03-23T23:48:19.929Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/sub": { + "modified": "2019-03-23T23:48:12.360Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/substr": { + "modified": "2019-03-23T23:59:51.386Z", + "contributors": [ + "olijyat", + "manuhdez", + "JaimeNorato", + "vltamara", + "teoli", + "Julien.stuby", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/substring": { + "modified": "2019-03-24T00:03:43.568Z", + "contributors": [ + "alejandrochung", + "teoli", + "ethertank", + "StripTM", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/sup": { + "modified": "2019-03-23T23:48:12.249Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/toLocaleLowerCase": { + "modified": "2020-10-15T22:11:36.514Z", + "contributors": [ + "MarkCBB" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/toLocaleUpperCase": { + "modified": "2020-10-15T21:55:35.801Z", + "contributors": [ + "padrecedano" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/toLowerCase": { + "modified": "2019-03-23T23:48:13.663Z", + "contributors": [ + "Daniel_Martin", + "AncaorDev", + "JaderLuisDiaz", + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/toSource": { + "modified": "2020-10-15T22:22:52.809Z", + "contributors": [ + "SoyZatarain" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/toString": { + "modified": "2019-03-23T23:48:26.799Z", + "contributors": [ + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/toUpperCase": { + "modified": "2019-03-23T23:48:19.033Z", + "contributors": [ + "hgutierrez", + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/trimEnd": { + "modified": "2020-10-15T22:32:40.984Z", + "contributors": [ + "cardotrejos" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/String/valueOf": { + "modified": "2019-03-23T23:48:30.713Z", + "contributors": [ + "teoli", + "Talisker", + "Mgjbot" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Symbol": { + "modified": "2019-06-24T09:01:16.062Z", + "contributors": [ + "PCASME", + "AnaDallos", + "MateoVelilla", + "onit4ku", + "Lenninlasd", + "SphinxKnight", + "roberbnd", + "javiergarciagonzalez", + "joseanpg" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Symbol/for": { + "modified": "2019-03-23T22:06:38.566Z", + "contributors": [ + "dariomaim" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Symbol/hasInstance": { + "modified": "2019-03-23T22:06:44.647Z", + "contributors": [ + "aeroxmotion" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Symbol/iterator": { + "modified": "2020-10-15T22:03:24.581Z", + "contributors": [ + "leovenezia", + "rderandom", + "DJphilomath" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/SyntaxError": { + "modified": "2019-03-23T22:31:22.099Z", + "contributors": [ + "BubuAnabelas" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype": { + "modified": "2019-03-23T22:31:16.833Z", + "contributors": [ + "BubuAnabelas" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/TypedArray": { + "modified": "2020-10-15T21:54:18.777Z", + "contributors": [ + "Nachec", + "DJphilomath", + "SphinxKnight", + "fscholz" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/TypedArray/buffer": { + "modified": "2019-03-23T22:12:04.645Z", + "contributors": [ + "SphinxKnight", + "joseluisq" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/URIError": { + "modified": "2020-10-15T22:14:48.739Z", + "contributors": [ + "omoldes" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/Uint8Array": { + "modified": "2019-03-23T22:26:47.572Z", + "contributors": [ + "joseluisq", + "misan", + "pelu" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WeakMap": { + "modified": "2020-10-06T14:36:19.625Z", + "contributors": [ + "oleksandrstarov", + "SphinxKnight", + "kdex", + "frank-orellana", + "oagarcia", + "willemsh" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WeakMap/clear": { + "modified": "2020-10-15T22:13:14.699Z", + "contributors": [ + "xochilpili" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WeakMap/delete": { + "modified": "2019-03-23T22:25:14.754Z", + "contributors": [ + "xochilpili", + "frank-orellana" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WeakMap/get": { + "modified": "2020-10-15T22:13:26.011Z", + "contributors": [ + "xochilpili" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WeakMap/has": { + "modified": "2020-10-15T22:13:17.587Z", + "contributors": [ + "xochilpili" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype": { + "modified": "2019-03-23T22:25:12.395Z", + "contributors": [ + "frank-orellana" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WeakMap/set": { + "modified": "2020-10-15T22:13:19.744Z", + "contributors": [ + "xochilpili" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WeakSet": { + "modified": "2019-03-23T22:06:27.270Z", + "contributors": [ + "OliverAcosta", + "roberbnd" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/WebAssembly": { + "modified": "2020-10-15T22:00:20.969Z", + "contributors": [ + "jvalencia" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/decodeURI": { + "modified": "2020-03-12T19:36:57.753Z", + "contributors": [ + "teoli", + "SphinxKnight", + "ADP13", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent": { + "modified": "2020-03-12T19:37:00.546Z", + "contributors": [ + "jabarrioss", + "SphinxKnight", + "teoli", + "ADP13", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/encodeURI": { + "modified": "2020-03-12T19:36:55.391Z", + "contributors": [ + "espipj", + "SphinxKnight", + "teoli", + "ADP13", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent": { + "modified": "2020-03-12T19:37:33.179Z", + "contributors": [ + "jazjay", + "SphinxKnight", + "teoli", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/escape": { + "modified": "2020-10-15T21:56:14.356Z", + "contributors": [ + "SphinxKnight", + "RozyP", + "IXTRUnai" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/eval": { + "modified": "2020-03-12T19:37:01.878Z", + "contributors": [ + "driera", + "sergio_p_d", + "_cuco_", + "ericmartinezr", + "SphinxKnight", + "teoli", + "Mgjbot", + "Talisker", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/isFinite": { + "modified": "2020-03-12T19:37:31.231Z", + "contributors": [ + "SphinxKnight", + "teoli", + "jarneygm", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/isNaN": { + "modified": "2020-10-15T21:17:00.242Z", + "contributors": [ + "jmmarco", + "juanarbol", + "SphinxKnight", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/null": { + "modified": "2020-03-12T19:42:06.401Z", + "contributors": [ + "mkiramu", + "ivanagui2", + "diegoazh", + "BubuAnabelas", + "hmorv", + "AugustoEsquen", + "AsLogd" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/parseFloat": { + "modified": "2020-07-04T20:00:21.182Z", + "contributors": [ + "pilichanampe", + "SphinxKnight", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/parseInt": { + "modified": "2020-03-12T19:37:31.195Z", + "contributors": [ + "mitsurugi", + "teoli", + "daiant", + "SphinxKnight", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/undefined": { + "modified": "2020-03-12T19:36:57.621Z", + "contributors": [ + "IsaacAaron", + "Undre4m", + "BubuAnabelas", + "SphinxKnight", + "teoli", + "ADP13", + "Talisker", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Objetos_globales/unescape": { + "modified": "2020-03-12T19:43:34.960Z", + "contributors": [ + "DracotMolver" + ] + }, + "Web/JavaScript/Referencia/Operadores": { + "modified": "2020-10-15T21:16:41.341Z", + "contributors": [ + "Nachec", + "BubuAnabelas", + "oagarcia", + "Alaon", + "SphinxKnight", + "Siro_Diaz", + "teoli", + "Mgjbot", + "Nathymig", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Operadores/Adición": { + "modified": "2020-10-15T22:31:13.303Z", + "contributors": [ + "lord-reptilia" + ] + }, + "Web/JavaScript/Referencia/Operadores/Aritméticos": { + "modified": "2020-10-15T21:17:29.666Z", + "contributors": [ + "lajaso", + "nelruk", + "enesimo", + "SphinxKnight", + "teoli", + "Mgjbot", + "Nathymig" + ] + }, + "Web/JavaScript/Referencia/Operadores/Asignacion": { + "modified": "2020-10-15T22:33:15.275Z", + "contributors": [ + "FranciscoImanolSuarez" + ] + }, + "Web/JavaScript/Referencia/Operadores/Assignment_Operators": { + "modified": "2020-07-23T18:11:35.190Z", + "contributors": [ + "n306r4ph", + "esreal12", + "BrodaNoel", + "maxbfmv55", + "maxbfmv" + ] + }, + "Web/JavaScript/Referencia/Operadores/Bitwise_Operators": { + "modified": "2020-03-12T19:42:13.818Z", + "contributors": [ + "Binariado", + "hugomosh", + "EduardoSebastian", + "jnreynoso", + "mizhac", + "lizzie136", + "josewhitetower", + "miparnisari", + "elenatorro", + "CarlosRuizAscacibar" + ] + }, + "Web/JavaScript/Referencia/Operadores/Comparacion": { + "modified": "2020-10-15T22:33:16.730Z", + "contributors": [ + "FranciscoImanolSuarez" + ] + }, + "Web/JavaScript/Referencia/Operadores/Comparison_Operators": { + "modified": "2020-10-15T21:37:54.340Z", + "contributors": [ + "FranciscoImanolSuarez", + "lajaso", + "mfuentesg" + ] + }, + "Web/JavaScript/Referencia/Operadores/Conditional_Operator": { + "modified": "2020-03-12T19:42:08.865Z", + "contributors": [ + "mauroflamig", + "osmar-vil", + "maedca", + "CesarBustios", + "eacp", + "cornezuelo", + "joeljose" + ] + }, + "Web/JavaScript/Referencia/Operadores/Decremento": { + "modified": "2020-11-17T13:27:35.616Z", + "contributors": [ + "FranciscoImanolSuarez" + ] + }, + "Web/JavaScript/Referencia/Operadores/Destructuring_assignment": { + "modified": "2020-10-15T21:38:20.062Z", + "contributors": [ + "Nachec", + "oscaretu", + "camsa", + "nstraub", + "FiliBits", + "SphinxKnight", + "emtsnz", + "moyadf", + "kdex", + "Anyulled", + "seleenne", + "rvazquezglez" + ] + }, + "Web/JavaScript/Referencia/Operadores/Division": { + "modified": "2020-10-15T22:33:13.828Z", + "contributors": [ + "FranciscoImanolSuarez" + ] + }, + "Web/JavaScript/Referencia/Operadores/Encadenamiento_opcional": { + "modified": "2020-10-15T22:30:07.517Z", + "contributors": [ + "glrodasz" + ] + }, + "Web/JavaScript/Referencia/Operadores/Grouping": { + "modified": "2020-03-12T19:41:24.847Z", + "contributors": [ + "oagarcia" + ] + }, + "Web/JavaScript/Referencia/Operadores/Miembros": { + "modified": "2020-03-12T19:37:28.144Z", + "contributors": [ + "fpoumian", + "MarkelCuesta", + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Operadores/Operadores_lógicos": { + "modified": "2020-03-12T19:42:52.811Z", + "contributors": [ + "albertor21", + "JuanMacias", + "lifescripter" + ] + }, + "Web/JavaScript/Referencia/Operadores/Operator_Precedence": { + "modified": "2020-03-12T19:39:15.282Z", + "contributors": [ + "lopezz", + "fscholz", + "teoli", + "aerotrink" + ] + }, + "Web/JavaScript/Referencia/Operadores/Pipeline_operator": { + "modified": "2020-10-15T22:24:00.271Z", + "contributors": [ + "nachofelpete" + ] + }, + "Web/JavaScript/Referencia/Operadores/Resto": { + "modified": "2020-12-04T18:18:23.327Z", + "contributors": [ + "lucasmmaidana" + ] + }, + "Web/JavaScript/Referencia/Operadores/Sintaxis_Spread": { + "modified": "2020-10-15T22:05:27.684Z", + "contributors": [ + "jeissonh", + "samm0023", + "jelduran", + "Aerz", + "duttyapps", + "alegnaaived" + ] + }, + "Web/JavaScript/Referencia/Operadores/Spread_operator": { + "modified": "2020-03-12T19:41:27.743Z", + "contributors": [ + "SphinxKnight", + "Scipion", + "oagarcia" + ] + }, + "Web/JavaScript/Referencia/Operadores/Strict_equality": { + "modified": "2020-10-15T22:31:14.496Z", + "contributors": [ + "lord-reptilia" + ] + }, + "Web/JavaScript/Referencia/Operadores/Sustracción": { + "modified": "2020-10-15T22:31:11.477Z", + "contributors": [ + "lord-reptilia" + ] + }, + "Web/JavaScript/Referencia/Operadores/async_function": { + "modified": "2020-10-15T22:26:51.970Z", + "contributors": [ + "IsraelFloresDGA" + ] + }, + "Web/JavaScript/Referencia/Operadores/await": { + "modified": "2020-10-15T21:58:10.309Z", + "contributors": [ + "esjuanma", + "jpinto7", + "JavierHspn", + "rcchristiane" + ] + }, + "Web/JavaScript/Referencia/Operadores/class": { + "modified": "2020-03-12T19:45:04.654Z", + "contributors": [ + "AlePerez92" + ] + }, + "Web/JavaScript/Referencia/Operadores/delete": { + "modified": "2020-03-12T19:40:27.821Z", + "contributors": [ + "abaracedo", + "elenatorro", + "oagarcia", + "rippe2hl" + ] + }, + "Web/JavaScript/Referencia/Operadores/function": { + "modified": "2020-03-12T19:37:57.703Z", + "contributors": [ + "germanf", + "SphinxKnight", + "teoli", + "jesanchez", + "artopal" + ] + }, + "Web/JavaScript/Referencia/Operadores/function*": { + "modified": "2020-10-15T22:04:00.800Z", + "contributors": [ + "daniel.duarte" + ] + }, + "Web/JavaScript/Referencia/Operadores/in": { + "modified": "2020-10-15T21:19:59.064Z", + "contributors": [ + "AlePerez92", + "MMarinero", + "SphinxKnight", + "teoli", + "carloshs92" + ] + }, + "Web/JavaScript/Referencia/Operadores/instanceof": { + "modified": "2020-03-12T19:37:27.128Z", + "contributors": [ + "KikeSan", + "oliverhr", + "SphinxKnight", + "olivercs", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Operadores/new": { + "modified": "2020-10-15T21:27:34.155Z", + "contributors": [ + "Nachec", + "fercreek", + "fel.gaete", + "edsonjmv", + "fscholz", + "SphinxKnight", + "teoli", + "jansanchez" + ] + }, + "Web/JavaScript/Referencia/Operadores/new.target": { + "modified": "2020-03-12T19:45:24.263Z", + "contributors": [ + "jorgecas" + ] + }, + "Web/JavaScript/Referencia/Operadores/operador_coma": { + "modified": "2020-03-12T19:43:05.807Z", + "contributors": [ + "aeroxmotion", + "eduardogm" + ] + }, + "Web/JavaScript/Referencia/Operadores/super": { + "modified": "2020-10-15T21:36:09.783Z", + "contributors": [ + "caepalomo", + "lajaso", + "SphinxKnight", + "oagarcia" + ] + }, + "Web/JavaScript/Referencia/Operadores/this": { + "modified": "2020-04-05T17:39:51.929Z", + "contributors": [ + "ridry", + "AugustoBarco", + "Litchstarken", + "xabitrigo", + "alejandrochung", + "garciadecastro", + "Miguel-Ramirez", + "FMauricioS", + "SphinxKnight", + "teoli", + "chebit", + "carloshs92" + ] + }, + "Web/JavaScript/Referencia/Operadores/typeof": { + "modified": "2020-03-12T19:37:27.888Z", + "contributors": [ + "dashaus", + "maurodibert", + "ggomez91", + "area73", + "carmelo12341", + "SphinxKnight", + "teoli", + "Siro_Diaz", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Operadores/void": { + "modified": "2020-03-12T19:37:37.188Z", + "contributors": [ + "JuanMaRuiz", + "mauroc8", + "dongerardor", + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Operadores/yield": { + "modified": "2020-10-15T21:59:31.243Z", + "contributors": [ + "Nachec", + "nicoan", + "Binariado", + "hamfree", + "juliandavidmr" + ] + }, + "Web/JavaScript/Referencia/Operadores/yield*": { + "modified": "2020-03-12T19:43:03.721Z", + "contributors": [ + "germanf" + ] + }, + "Web/JavaScript/Referencia/Palabras_Reservadas": { + "modified": "2019-03-23T23:46:34.387Z", + "contributors": [ + "gsalinase", + "Gabrielth2206", + "Heramalva", + "teoli", + "Sheppy", + "Nathymig" + ] + }, + "Web/JavaScript/Referencia/Sentencias": { + "modified": "2020-05-11T14:52:51.956Z", + "contributors": [ + "chrisdavidmills", + "Daniel_Martin", + "ffulgencio", + "BubuAnabelas", + "katrina.warsaw", + "SphinxKnight", + "teoli", + "Nathymig", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Sentencias/Empty": { + "modified": "2020-03-12T19:45:08.866Z", + "contributors": [ + "Undre4m" + ] + }, + "Web/JavaScript/Referencia/Sentencias/block": { + "modified": "2020-03-12T19:37:26.144Z", + "contributors": [ + "IsaacAaron", + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/break": { + "modified": "2020-03-12T19:37:25.893Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/class": { + "modified": "2020-03-12T19:43:15.247Z", + "contributors": [ + "AlePerez92", + "PauPeinado" + ] + }, + "Web/JavaScript/Referencia/Sentencias/const": { + "modified": "2020-05-18T16:35:39.912Z", + "contributors": [ + "jorgetoloza", + "Daniel_Martin", + "SphinxKnight", + "calbertts", + "IsaacAaron", + "MarkelCuesta", + "zucchinidev", + "teoli", + "Scipion" + ] + }, + "Web/JavaScript/Referencia/Sentencias/continue": { + "modified": "2020-03-12T19:37:24.424Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/debugger": { + "modified": "2020-03-12T19:43:07.073Z", + "contributors": [ + "VictorAbdon", + "ericpennachini" + ] + }, + "Web/JavaScript/Referencia/Sentencias/default": { + "modified": "2020-10-15T22:11:48.475Z", + "contributors": [ + "Davids-Devel" + ] + }, + "Web/JavaScript/Referencia/Sentencias/do...while": { + "modified": "2020-03-19T20:41:26.735Z", + "contributors": [ + "danielclavijo19380", + "AlePerez92", + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/export": { + "modified": "2020-10-15T21:13:05.178Z", + "contributors": [ + "AlePerez92", + "frank-orellana", + "fxisco", + "hmorv", + "guumo", + "Jdiaz", + "SphinxKnight", + "teoli", + "Scipion" + ] + }, + "Web/JavaScript/Referencia/Sentencias/for": { + "modified": "2020-03-12T19:37:24.852Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/for-await...of": { + "modified": "2020-10-15T22:22:58.735Z", + "contributors": [ + "daniel.duarte" + ] + }, + "Web/JavaScript/Referencia/Sentencias/for...in": { + "modified": "2020-10-15T21:14:45.435Z", + "contributors": [ + "Nachec", + "VichoReyes", + "antonygiomarx", + "tenthlive", + "enmanuelduran", + "manatico4", + "pardo-bsso", + "jsinner", + "Carlos-T", + "mariosotoxoom", + "SphinxKnight", + "teoli", + "angeldiaz", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/for...of": { + "modified": "2020-03-12T19:43:09.602Z", + "contributors": [ + "camsa", + "chabisoriano", + "petermota", + "Bumxu", + "jdazacon", + "Angarsk8" + ] + }, + "Web/JavaScript/Referencia/Sentencias/funcion_asincrona": { + "modified": "2020-10-15T21:53:45.353Z", + "contributors": [ + "docxml", + "fitojb", + "mnax001", + "lexnapoles", + "JooseNavarro", + "feserafim" + ] + }, + "Web/JavaScript/Referencia/Sentencias/function": { + "modified": "2020-03-12T19:37:28.203Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/function*": { + "modified": "2020-03-12T19:41:28.405Z", + "contributors": [ + "SphinxKnight", + "kdex", + "cnexans", + "mlealvillarreal", + "TheBronx", + "mrtuto2012", + "rippe2hl", + "germanfr" + ] + }, + "Web/JavaScript/Referencia/Sentencias/if...else": { + "modified": "2020-03-12T19:35:35.125Z", + "contributors": [ + "IsaacAaron", + "SphinxKnight", + "teoli", + "Pablo_Cabrera", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Sentencias/import": { + "modified": "2020-10-15T21:37:35.456Z", + "contributors": [ + "AlePerez92", + "frank-orellana", + "feserafim", + "guumo", + "javiernunez", + "Siro_Diaz", + "jepumares" + ] + }, + "Web/JavaScript/Referencia/Sentencias/import.meta": { + "modified": "2020-10-15T22:29:50.934Z", + "contributors": [ + "cinthylli" + ] + }, + "Web/JavaScript/Referencia/Sentencias/label": { + "modified": "2020-03-12T19:37:26.348Z", + "contributors": [ + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/let": { + "modified": "2020-12-07T12:54:41.333Z", + "contributors": [ + "FacuBustamaante", + "Nachec", + "jomoji", + "SphinxKnight", + "IsaacAaron", + "Braulyw8", + "MarkelCuesta", + "Th3Cod3", + "kdex", + "devlcp", + "fjcapdevila", + "mishelashala", + "madroneropaulo", + "nicobot", + "jtanori" + ] + }, + "Web/JavaScript/Referencia/Sentencias/return": { + "modified": "2020-03-12T19:37:28.480Z", + "contributors": [ + "devconcept", + "rrodriguez", + "SphinxKnight", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/switch": { + "modified": "2020-06-26T05:28:30.446Z", + "contributors": [ + "EliottoYT", + "RubiVG", + "nahif", + "jesusvillalta", + "SSantiago90", + "Herkom", + "renetejada7", + "rafaelgus", + "garciadecastro", + "MarioAr", + "Cubo", + "esmarti", + "christpher_c" + ] + }, + "Web/JavaScript/Referencia/Sentencias/throw": { + "modified": "2020-03-12T19:37:27.469Z", + "contributors": [ + "imNicoSuarez", + "SphinxKnight", + "teoli", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/try...catch": { + "modified": "2020-05-28T10:16:13.325Z", + "contributors": [ + "dkmstr", + "BubuAnabelas", + "henryvanner", + "AlePerez92", + "ManuelRubio", + "JooseNavarro", + "juanrapoport", + "habax", + "SphinxKnight", + "teoli", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/var": { + "modified": "2020-03-12T19:36:22.778Z", + "contributors": [ + "IsaacAaron", + "carlo.romero1991", + "SphinxKnight", + "teoli", + "Scipion", + "Mgjbot", + "Sheppy" + ] + }, + "Web/JavaScript/Referencia/Sentencias/while": { + "modified": "2020-03-12T19:35:40.292Z", + "contributors": [ + "MaurooRen", + "SphinxKnight", + "teoli", + "Pablo_Cabrera", + "Mgjbot", + "Talisker" + ] + }, + "Web/JavaScript/Referencia/Sentencias/with": { + "modified": "2020-03-12T19:42:08.065Z", + "contributors": [ + "MarkelCuesta", + "lokcito" + ] + }, + "Web/JavaScript/Referencia/template_strings": { + "modified": "2020-10-14T18:58:58.164Z", + "contributors": [ + "Magdiel", + "sanchezalvarezjp", + "JuanWTF", + "IsaacLf", + "theelmix", + "SphinxKnight", + "MarkelCuesta", + "kdex", + "mishelashala", + "orasio" + ] + }, + "Web/JavaScript/Shells": { + "modified": "2020-03-12T19:44:40.392Z", + "contributors": [ + "davidenriq11", + "mamptecnocrata" + ] + }, + "Web/JavaScript/Una_re-introducción_a_JavaScript": { + "modified": "2020-09-01T08:31:36.135Z", + "contributors": [ + "Nachec", + "pmcarballo", + "VictorSan45", + "DaniNz", + "jlopezfdez", + "mariodev12", + "javier_junin", + "GdoSan", + "unaisainz", + "oleurud", + "JavierHspn", + "jlmurgas", + "rivacubano", + "aaguilera", + "StripTM", + "bicentenario", + "NatiiDC", + "NicolasMendoza", + "LeoHirsch", + "lomejordejr", + "rogeliomtx", + "Jarkaos" + ] + }, + "Web/JavaScript/Vectores_tipados": { + "modified": "2020-10-15T21:37:33.978Z", + "contributors": [ + "Nachec", + "LeoE" + ] + }, + "Web/JavaScript/enumeracion_y_propietario_de_propiedades": { + "modified": "2020-08-30T03:56:15.697Z", + "contributors": [ + "Nachec", + "teoli", + "LeoHirsch" + ] + }, + "Web/Manifest": { + "modified": "2020-07-18T01:40:57.131Z", + "contributors": [ + "angelmlucero", + "ardillan", + "Zellius", + "Pablo_Bangueses", + "luisabarca", + "malonson", + "AlePerez92" + ] + }, + "Web/MathML": { + "modified": "2020-10-15T21:24:26.572Z", + "contributors": [ + "Undigon", + "teoli", + "fred.wang", + "ChaitanyaGSNR" + ] + }, + "Web/MathML/Attribute": { + "modified": "2019-03-23T23:26:57.621Z", + "contributors": [ + "LuifeR", + "ccarruitero", + "maedca" + ] + }, + "Web/MathML/Authoring": { + "modified": "2019-03-23T23:27:02.180Z", + "contributors": [ + "rafaqtro", + "fred.wang", + "voylinux", + "robertoasq", + "maedca" + ] + }, + "Web/MathML/Elemento": { + "modified": "2019-03-23T23:37:26.121Z", + "contributors": [ + "teoli", + "emejotados" + ] + }, + "Web/MathML/Elemento/math": { + "modified": "2020-10-15T22:06:20.810Z", + "contributors": [ + "Undigon" + ] + }, + "Web/MathML/Examples": { + "modified": "2019-03-23T23:25:26.042Z", + "contributors": [ + "nielsdg" + ] + }, + "Web/MathML/Examples/MathML_Pythagorean_Theorem": { + "modified": "2019-03-23T23:25:28.102Z", + "contributors": [ + "osvaldobaeza" + ] + }, + "Web/Media": { + "modified": "2020-07-15T09:47:41.711Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Media/Formats": { + "modified": "2020-07-15T09:47:42.018Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Media/Formats/Containers": { + "modified": "2020-07-15T09:47:51.166Z", + "contributors": [ + "hugojavierduran9" + ] + }, + "Web/Performance": { + "modified": "2019-04-04T19:28:41.844Z", + "contributors": [ + "arekucr", + "chrisdavidmills" + ] + }, + "Web/Performance/Fundamentals": { + "modified": "2019-05-05T06:54:02.458Z", + "contributors": [ + "c-torres" + ] + }, + "Web/Performance/How_browsers_work": { + "modified": "2020-09-10T10:11:23.592Z", + "contributors": [ + "sancarbar" + ] + }, + "Web/Performance/mejorando_rendimienot_inicial": { + "modified": "2019-04-04T17:42:18.542Z", + "contributors": [ + "c-torres" + ] + }, + "Web/Progressive_web_apps": { + "modified": "2020-09-20T04:18:55.064Z", + "contributors": [ + "Nachec", + "Enesimus", + "chrisdavidmills", + "hypnotic-frog", + "javichito" + ] + }, + "Web/Progressive_web_apps/App_structure": { + "modified": "2020-09-20T03:39:21.273Z", + "contributors": [ + "Nachec", + "NicolasKuhn" + ] + }, + "Web/Progressive_web_apps/Developer_guide": { + "modified": "2020-09-20T03:25:40.381Z", + "contributors": [ + "Deng_C1" + ] + }, + "Web/Progressive_web_apps/Developer_guide/Instalar": { + "modified": "2020-09-20T03:25:41.762Z", + "contributors": [ + "Nachec" + ] + }, + "Web/Progressive_web_apps/Installable_PWAs": { + "modified": "2020-09-20T03:54:28.154Z", + "contributors": [ + "Nachec" + ] + }, + "Web/Progressive_web_apps/Introduction": { + "modified": "2020-09-20T03:34:06.424Z", + "contributors": [ + "Nachec", + "gastono.442", + "tw1ttt3r", + "santi324", + "chrisdavidmills" + ] + }, + "Web/Progressive_web_apps/Loading": { + "modified": "2020-09-20T04:08:37.661Z", + "contributors": [ + "Nachec" + ] + }, + "Web/Progressive_web_apps/Offline_Service_workers": { + "modified": "2020-09-20T03:45:55.671Z", + "contributors": [ + "Nachec" + ] + }, + "Web/Progressive_web_apps/Re-engageable_Notifications_Push": { + "modified": "2020-09-20T04:04:04.639Z", + "contributors": [ + "Nachec" + ] + }, + "Web/Progressive_web_apps/Ventajas": { + "modified": "2019-11-03T14:52:14.998Z", + "contributors": [ + "totopizzahn" + ] + }, + "Web/Reference": { + "modified": "2019-03-23T23:21:27.898Z", + "contributors": [ + "raecillacastellana", + "vltamara", + "asero82", + "atlas7jean", + "Nickolay" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T23:20:25.941Z", + "contributors": [ + "AlePerez92", + "jhia", + "welm", + "vggallego", + "DeiberChacon", + "angmauricio", + "vitoco", + "CristianMar25", + "gesifred", + "cmeraz", + "davy.martinez" + ] + }, + "Web/SVG": { + "modified": "2019-03-23T23:44:20.243Z", + "contributors": [ + "Undigon", + "Noradrex", + "teoli", + "Verruckt", + "Jorolo", + "Mgjbot", + "Josebagar" + ] + }, + "Web/SVG/Attribute": { + "modified": "2019-08-04T03:46:23.452Z", + "contributors": [ + "jcortesa", + "chrisdavidmills" + ] + }, + "Web/SVG/Attribute/stop-color": { + "modified": "2020-10-15T22:06:34.292Z", + "contributors": [ + "andcal" + ] + }, + "Web/SVG/Attribute/transform": { + "modified": "2019-03-23T22:07:32.328Z", + "contributors": [ + "dimuziop" + ] + }, + "Web/SVG/Element": { + "modified": "2019-03-19T13:42:20.553Z", + "contributors": [ + "borja", + "jmanquez", + "kscarfone" + ] + }, + "Web/SVG/Element/a": { + "modified": "2020-10-15T22:16:15.979Z", + "contributors": [ + "borja" + ] + }, + "Web/SVG/Element/animate": { + "modified": "2020-10-15T22:09:39.514Z", + "contributors": [ + "evaferreira" + ] + }, + "Web/SVG/Element/circle": { + "modified": "2019-03-23T22:57:12.727Z", + "contributors": [ + "wbamberg", + "Sebastianz", + "humbertaco" + ] + }, + "Web/SVG/Element/foreignObject": { + "modified": "2019-03-23T23:05:21.297Z", + "contributors": [ + "Sebastianz", + "THernandez03" + ] + }, + "Web/SVG/Element/g": { + "modified": "2019-03-23T22:54:18.875Z", + "contributors": [ + "Sebastianz", + "teoli", + "FrankzWolf" + ] + }, + "Web/SVG/Element/glifo": { + "modified": "2019-03-23T22:53:24.929Z", + "contributors": [ + "Sebastianz", + "saeioul" + ] + }, + "Web/SVG/Element/rect": { + "modified": "2019-03-23T23:02:06.920Z", + "contributors": [ + "wbamberg", + "roadev", + "Sebastianz", + "jdgarrido" + ] + }, + "Web/SVG/Element/style": { + "modified": "2019-03-23T22:54:27.955Z", + "contributors": [ + "Sebastianz", + "teoli", + "rippe2hl" + ] + }, + "Web/SVG/Element/svg": { + "modified": "2020-11-04T10:23:00.659Z", + "contributors": [ + "hardy.rafael17", + "Mcch", + "diegovinie", + "BubuAnabelas", + "mbenitez01" + ] + }, + "Web/SVG/Element/text": { + "modified": "2020-05-14T06:42:53.448Z", + "contributors": [ + "danielhiguerasgoold", + "Sebastianz", + "emorc" + ] + }, + "Web/SVG/Element/use": { + "modified": "2019-03-23T22:58:09.476Z", + "contributors": [ + "andysierra", + "Sebastianz", + "jorge_castro" + ] + }, + "Web/SVG/Index": { + "modified": "2019-01-16T22:36:49.773Z", + "contributors": [ + "jwhitlock", + "ComplementosMozilla" + ] + }, + "Web/SVG/SVG_en_Firefox_1.5": { + "modified": "2019-03-23T23:42:07.791Z", + "contributors": [ + "teoli", + "Mgjbot", + "Jorolo", + "Arcnor" + ] + }, + "Web/SVG/Tutorial": { + "modified": "2020-01-15T20:06:40.249Z", + "contributors": [ + "dago.d.havana", + "jpriet0", + "d-go", + "Npmada", + "teoli", + "Jeremie" + ] + }, + "Web/SVG/Tutorial/Getting_Started": { + "modified": "2019-03-23T23:19:26.348Z", + "contributors": [ + "kevinricardojs", + "teoli", + "Alberpat" + ] + }, + "Web/SVG/Tutorial/Introducción": { + "modified": "2019-03-18T21:32:37.330Z", + "contributors": [ + "Undigon", + "d-go" + ] + }, + "Web/SVG/Tutorial/SVG_In_HTML_Introduction": { + "modified": "2019-03-23T23:21:05.945Z", + "contributors": [ + "chrisdavidmills", + "matrimonio", + "verma21", + "marelin" + ] + }, + "Web/SVG/Tutorial/Tools_for_SVG": { + "modified": "2019-03-20T13:46:46.393Z", + "contributors": [ + "James-Yaakov" + ] + }, + "Web/Security": { + "modified": "2019-09-10T16:32:01.356Z", + "contributors": [ + "SphinxKnight", + "npcsayfail", + "lejovaar7", + "fgcalderon", + "pablodonoso", + "marumari" + ] + }, + "Web/Security/CSP": { + "modified": "2019-03-23T22:48:09.013Z", + "contributors": [ + "Anteojudo", + "Nydv" + ] + }, + "Web/Security/CSP/CSP_policy_directives": { + "modified": "2019-03-23T22:46:40.903Z", + "contributors": [ + "rafamagno", + "maedca" + ] + }, + "Web/Security/CSP/Introducing_Content_Security_Policy": { + "modified": "2019-01-16T21:25:25.758Z", + "contributors": [ + "Anteojudo", + "Nydv" + ] + }, + "Web/Security/Same-origin_politica": { + "modified": "2019-10-30T15:38:34.673Z", + "contributors": [ + "robertsallent", + "Abelhg" + ] + }, + "Web/Security/Securing_your_site": { + "modified": "2019-03-23T22:04:13.465Z", + "contributors": [ + "fgcalderon", + "mbm" + ] + }, + "Web/Security/Securing_your_site/desactivar_autocompletado_formulario": { + "modified": "2019-03-23T22:04:06.546Z", + "contributors": [ + "samus128", + "Hoosep" + ] + }, + "Web/Tutoriales": { + "modified": "2020-11-30T04:19:10.869Z", + "contributors": [ + "blanchart", + "mastertrooper", + "Enesimus", + "ewan-m", + "Yes197", + "VlixesItaca", + "pucherico", + "CristopherAE", + "fperaltaN", + "isabelcarrod", + "Sheppy", + "iKenshu", + "JuanC_01", + "ubermensch79", + "cynthia", + "rubencidlara", + "fmagrosoto", + "CarlosQuijano", + "diegogaysaez" + ] + }, + "Web/Web_Components": { + "modified": "2020-05-21T13:06:07.299Z", + "contributors": [ + "aguilerajl", + "Ktoxcon", + "IsraelFloresDGA", + "mboo", + "Rodmore", + "maybe" + ] + }, + "Web/Web_Components/Custom_Elements": { + "modified": "2019-03-23T22:21:51.809Z", + "contributors": [ + "cawilff", + "AlePerez92", + "fipadron", + "V.Morantes" + ] + }, + "Web/Web_Components/Using_custom_elements": { + "modified": "2020-06-28T18:39:06.239Z", + "contributors": [ + "lupomontero", + "aguilerajl" + ] + }, + "Web/Web_Components/Using_shadow_DOM": { + "modified": "2020-10-24T17:36:39.409Z", + "contributors": [ + "jephsanchez", + "Charlemagnes", + "quintero_japon", + "DavidGalvis" + ] + }, + "Web/Web_Components/Using_templates_and_slots": { + "modified": "2020-03-26T15:38:45.869Z", + "contributors": [ + "olalinv", + "quintero_japon", + "BrunoUY", + "ulisestrujillo" + ] + }, + "Web/XML": { + "modified": "2019-03-18T21:18:03.528Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/XML/Introducción_a_XML": { + "modified": "2019-07-25T12:38:17.842Z", + "contributors": [ + "jugonzalez40", + "ExE-Boss", + "npcsayfail", + "israel-munoz", + "Mgjbot", + "Superruzafa", + "Fedora-core", + "Jorolo" + ] + }, + "Web/XPath": { + "modified": "2019-01-16T14:32:30.886Z", + "contributors": [ + "ExE-Boss", + "fscholz", + "Mgjbot", + "Jorolo" + ] + }, + "Web/XPath/Ejes": { + "modified": "2019-03-18T20:59:19.791Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Mgjbot", + "Jorolo", + "Cmayo" + ] + }, + "Web/XPath/Ejes/ancestor": { + "modified": "2019-01-16T16:11:09.049Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/ancestor-or-self": { + "modified": "2019-01-16T16:11:00.606Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/attribute": { + "modified": "2019-01-16T16:11:03.106Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/child": { + "modified": "2019-01-16T16:11:02.142Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/descendant": { + "modified": "2019-01-16T16:11:00.301Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/descendant-or-self": { + "modified": "2019-01-16T16:11:00.088Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/following": { + "modified": "2019-01-16T16:10:55.079Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/following-sibling": { + "modified": "2019-01-16T16:11:02.465Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/namespace": { + "modified": "2019-01-16T16:10:55.086Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/parent": { + "modified": "2019-01-16T16:10:56.130Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/preceding": { + "modified": "2019-01-16T16:11:08.778Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Ejes/preceding-sibling": { + "modified": "2019-01-16T16:10:57.298Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Funciones": { + "modified": "2019-03-23T22:09:03.742Z", + "contributors": [ + "ExE-Boss", + "Zoditu" + ] + }, + "Web/XPath/Funciones/contains": { + "modified": "2019-01-16T15:50:22.864Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Funciones/substring": { + "modified": "2019-01-16T15:50:01.578Z", + "contributors": [ + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XPath/Funciones/true": { + "modified": "2019-03-18T20:59:19.925Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Mgjbot", + "Cmayo" + ] + }, + "Web/XSLT": { + "modified": "2019-03-23T23:44:23.657Z", + "contributors": [ + "chrisdavidmills", + "Verruckt", + "Mgjbot", + "Jorolo", + "Nukeador", + "Piltrafeta" + ] + }, + "Web/XSLT/Element": { + "modified": "2019-03-18T20:59:16.316Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "chrisdavidmills", + "fscholz", + "Jorolo", + "ErickCastellanos" + ] + }, + "Web/XSLT/Element/element": { + "modified": "2019-03-18T20:59:21.788Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/Transformando_XML_con_XSLT": { + "modified": "2019-01-16T16:11:59.562Z", + "contributors": [ + "chrisdavidmills", + "Superruzafa", + "Mgjbot", + "Jorolo", + "Ivanfrade", + "Piltrafeta", + "Nukeador" + ] + }, + "Web/XSLT/apply-imports": { + "modified": "2019-03-18T20:59:15.544Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/apply-templates": { + "modified": "2019-03-18T20:59:18.352Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/attribute": { + "modified": "2019-03-18T20:59:20.857Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/attribute-set": { + "modified": "2019-03-18T20:59:20.997Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/call-template": { + "modified": "2019-03-18T20:59:16.448Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/choose": { + "modified": "2019-03-18T20:59:21.136Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" + ] + }, + "Web/XSLT/comment": { + "modified": "2019-03-18T20:59:15.680Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" + ] + }, + "Web/XSLT/copy": { + "modified": "2019-03-18T20:59:16.879Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/copy-of": { + "modified": "2019-03-18T20:59:18.212Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/decimal-format": { + "modified": "2019-03-18T20:59:17.054Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/fallback": { + "modified": "2019-03-18T20:59:15.971Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/for-each": { + "modified": "2019-03-18T20:59:16.114Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/if": { + "modified": "2019-03-18T20:59:17.200Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Jrbellido", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/import": { + "modified": "2019-03-18T20:59:15.818Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/include": { + "modified": "2019-03-18T20:59:17.940Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/key": { + "modified": "2019-03-18T20:59:21.931Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/message": { + "modified": "2019-03-18T20:59:16.585Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" + ] + }, + "Web/XSLT/namespace-alias": { + "modified": "2019-03-18T20:59:19.621Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/number": { + "modified": "2019-03-18T20:59:21.341Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos" + ] + }, + "Web/XSLT/otherwise": { + "modified": "2019-03-18T20:59:16.726Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" + ] + }, + "Web/XSLT/when": { + "modified": "2019-03-18T20:59:18.078Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" + ] + }, + "Web/XSLT/with-param": { + "modified": "2019-03-18T20:59:17.348Z", + "contributors": [ + "SphinxKnight", + "chrisdavidmills", + "Mgjbot", + "ErickCastellanos", + "Cmayo" + ] + }, + "WebAPI": { + "modified": "2019-03-23T23:32:09.157Z", + "contributors": [ + "wbamberg", + "fscholz", + "ccarruitero", + "maedca", + "ethertank", + "Jeremie" + ] + }, + "WebAPI/Estado_de_Bateria": { + "modified": "2019-03-23T23:25:28.703Z", + "contributors": [ + "sinfallas" + ] + }, + "WebAPI/Pointer_Lock": { + "modified": "2019-03-23T23:28:21.712Z", + "contributors": [ + "fscholz", + "arquigames", + "joredjs" + ] + }, + "WebAPI/Using_geolocation": { + "modified": "2019-05-04T15:09:02.013Z", + "contributors": [ + "mauroarcet", + "claudionebbia", + "pixelmin", + "guissellavillarreal", + "untilbit", + "BRIGIDAMATTERA", + "cizquierdof", + "rubencidlara", + "lfentanes", + "diegogarcia" + ] + }, + "WebAssembly": { + "modified": "2020-10-15T22:25:36.765Z", + "contributors": [ + "jonathan.reyes33" + ] + }, + "WebAssembly/Concepts": { + "modified": "2020-12-06T14:14:45.486Z", + "contributors": [ + "Sergio_Gonzalez_Collado", + "mastertrooper" + ] + }, + "WebAssembly/Loading_and_running": { + "modified": "2020-09-15T19:19:35.117Z", + "contributors": [ + "mastertrooper" + ] + }, + "WebRTC": { + "modified": "2019-03-23T23:26:58.291Z", + "contributors": [ + "sebasmagri" + ] + }, + "WebRTC/Introduction": { + "modified": "2019-03-23T23:26:58.387Z", + "contributors": [ + "maedca", + "voylinux" + ] + }, + "WebRTC/MediaStream_API": { + "modified": "2019-03-23T23:26:56.897Z", + "contributors": [ + "palfrei", + "maedca" + ] + }, + "WebRTC/Peer-to-peer_communications_with_WebRTC": { + "modified": "2019-03-23T23:27:02.999Z", + "contributors": [ + "pablocubico", + "maedca" + ] + }, + "WebRTC/Taking_webcam_photos": { + "modified": "2019-03-23T23:26:57.758Z", + "contributors": [ + "robertoasq", + "maedca" + ] + }, + "WebSockets": { + "modified": "2019-01-16T13:56:47.847Z", + "contributors": [ + "inma_610" + ] + }, + "Web_Audio_API": { + "modified": "2019-03-23T23:31:19.634Z", + "contributors": [ + "estebanborai", + "AngelFQC", + "Pau_Ilargia", + "maedca" + ] + }, + "Web_Development/Mobile": { + "modified": "2019-03-23T23:32:51.331Z", + "contributors": [ + "wbamberg" + ] + }, + "Web_Development/Mobile/Diseño_responsivo": { + "modified": "2019-03-23T23:32:50.922Z", + "contributors": [ + "fitojb", + "pacommozilla", + "wfranck", + "rafael_mora", + "htrellez" + ] + }, + "XHTML": { + "modified": "2019-03-23T23:46:04.272Z", + "contributors": [ + "Mgjbot", + "Jorolo", + "Nukeador" + ] + }, + "XPInstall_API_Reference": { + "modified": "2019-01-16T15:37:54.457Z", + "contributors": [ + "Eddomita" + ] + }, + "Zoom_a_página_completa": { + "modified": "2019-03-23T23:50:26.114Z", + "contributors": [ + "wbamberg", + "Nukeador", + "Mariano", + "Mgjbot" + ] + }, + "nsDirectoryService": { + "modified": "2019-03-23T23:40:31.943Z", + "contributors": [ + "teoli", + "Breaking Pitt" + ] + } +} \ No newline at end of file diff --git a/files/es/acerca_del_modelo_de_objetos_del_documento/index.html b/files/es/acerca_del_modelo_de_objetos_del_documento/index.html new file mode 100644 index 0000000000..b43b75fc89 --- /dev/null +++ b/files/es/acerca_del_modelo_de_objetos_del_documento/index.html @@ -0,0 +1,23 @@ +--- +title: Acerca del Modelo de Objetos del Documento +slug: Acerca_del_Modelo_de_Objetos_del_Documento +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +--- +

¿Qué es DOM?

+ +

El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido y visualización. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.

+ +

Todas las propiedades, métodos, y eventos disponibles por el desarrollador web para manipular y crear páginas web están organizados en objetos (por ejemplo: el objeto 'document' representa al documento en sí mismo, el objeto 'table' representa los elementos HTML para tablas, etcétera). En los navegadores modernos estos objetos son manejables con lenguajes de scripts.

+ +

Es muy común usar DOM conjuntamente con JavaScript. Así es, el código es escrito en JavaScript, pero éste usa DOM para tener acceso a la página Web y sus elementos. Sin embargo, DOM fue diseñado para ser independiente de cualquier lenguaje de programación concreto, poniendo la representación estructural del documento disponible en un solo API consistente. Aunque en este sitio nos centremos en JavaScript, las implementaciones de DOM pueden hacerse para cualquier lenguaje.

+ +

El Consorcio de World Wide Web establece un estándar para el DOM, llamado W3C DOM. Actualmente los navegadores más importantes lo soportan correctamente, ésto permite crear poderosas aplicaciones multi-navegador.

+ +

¿Por qué es importante el soporte que Mozilla da al DOM?

+ +

HTML dinámico (DHTML) es un término usado por muchos para describir la combinación de HTML, hojas de estilo y scripts que permite que los documentos sean dinámicos. El grupo de trabajo W3C DOM trabaja duro para asegurarse de que sus soluciones son interoperables e independientes del lenguaje (ver también la DOM FAQ). Cuando Mozilla reclama el título de "Plataforma para aplicaciones web", el soporte a DOM es uno de los rasgos más solicitados, y es necesario si Mozilla quiere ser una alternativa real a otros navegadores.

+ +

El hecho incluso más importante es que la interfaz de usuario de Firefox (también la de Mozilla Suite y Thunderbird) está construida usando XUL - un lenguaje XML para interfaces de usuario. Así Mozilla usa el DOM para manipular sus propias interfaces de usuario. (en inglés)

diff --git a/files/es/actualizar_aplicaciones_web_para_firefox_3/index.html b/files/es/actualizar_aplicaciones_web_para_firefox_3/index.html new file mode 100644 index 0000000000..e81f21fa49 --- /dev/null +++ b/files/es/actualizar_aplicaciones_web_para_firefox_3/index.html @@ -0,0 +1,87 @@ +--- +title: Actualizar aplicaciones web para Firefox 3 +slug: Actualizar_aplicaciones_web_para_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +--- +
{{FirefoxSidebar}}
+ +

{{ Fx_minversion_header(3) }} Existen varios cambios en el próximo Firefox 3 que pueden afectar tu sitio web o aplicación web, así como nuevas características que se pueden aprovechar. Este artículo servirá como punto de partida para actualizar el contenido web de modo que se pueda aprovechar Firefox 3 al máximo.

+ +

Cambios DOM

+ + +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.

+ +

Cambios HTML

+ +

Cambios en el conjunto de caracteres de herencia

+ +

Firefox 3 cierra un fallo en la seguridad en frames e iframes que les permitía heredar el conjunto de caracteres de donde eran derivadas. Esto podría causar problemas en ciertos casos. Ahora, las frames están solamente permitidas a heredar el conjunto de caracteres si ambos frames y el conjunto de caracteres fue cargado del mismo servidor. Si tienes páginas que asumen que las frames fueron cargadas de otro servidor heredará el mismo conjunto de caracteres, deberías actualizar los HTML de las frames para indicar el conjunto de caracteres específicamente.

+ +

Cambios en el elemento SCRIPT

+ +

Ahora hay que cerrar el elemento <script> en text/html con </script> en los documentos de HTML 4, incluso si no hay contenido dentro. En las versiones previas de Firefox, bastaba con hacer:

+ +
<script ...   />
+
+ +

Ahora se deben cumplir las especificaciones de HTML (si se trata de un HTML), y por lo tanto se deben cerrar, así:

+ +
<script ...></script>
+
+ +

Esto mejora tanto la compatibilidad como la seguridad.

+ +

Cambios en CSS

+ +

Cambio al tamaño de fuente basado en unidades em, ex

+ +

Los valores de fuente en unidades em y ex solían ser afectadas por el tamaño mínimo de fuente utilizado por el usuario: si una fuente se desplegaba más grande debido al tamaño mínimo, el ajuste de las unidades em y ex para el tamaño de fuente basados en esta se incrementarían de forma acorde. Esto era inconsistente con la forma en que las fuentes basadas en porcentaje se comportaban.

+ +

Los valores del tamaño de fuente en unidades em y ex ahora están basadas en un "tamaño de fuente intencionado" que no se ve afectado por el tamaño mínimo de fuente del usuario. En otras palabras, los tamaños de la fuente se calculan de acuerdo a las intenciones del diseñador y se ajustan al tamaño mínimo de fuente después de ello.

+ +

Ver {{ Bug(322943) }} para una demostración (se debe ver con un tamaño mínimo de fuente 6 para detectar la diferencia: las dos cajas en cascada se comportan diferente en Firefox 2, porque el tamaño de fuente basado en em "retorna" el tamaño mínimo de fuente.

+ +

Cambios de seguridad

+ +

Acceso Chrome

+ +

En versiones anteriores de Firefox, cualquier página web podía cargar scripts o imágenes chrome:// usando el protocolo chrome. Entre otras cosas, esto hizo posible que algunos sitios no detectaran la presencia de complementos,  lo cual podía ser usado para traspasar la seguridad del usuario saltando los complementos que agregaban medidas de seguridad al buscador.

+ +

Firefox 3 solo permite contenido web para acceder a los elementos en los espacios del chrome://browser/ y en espacio chrome://toolkit/. Estos archivos pretenden ser accesibles por el contenido web. Ahora cualquier otro contenido chrome es bloqueado para el sitio web.

+ +

Hay, sin embargo, métodos para ciertas extensiones que puden ser accedidos por la web. Se puede especificar una bandera en su archivo chrome.manifest de esta manera:

+ +
content mypackage location/ contentaccessible=yes
+
+ +

Esto no debería ser algo que se haga muy seguido, pero está disponible para aquellos casos raros en los que es necesario. Debe tomarse en cuenta que es posible que Firefox alerte al usuario que su extensión utiliza una bandera en el contentaccessible de alguna manera, ya que consituye un riesgo potencial en la seguridad.

+ +
Nota: Ya que Firefox 2 no entiende la bandera contentaccessible (ignorará la instrucción completa de que contiene la bandera), si se desea que el complemento sea compatible con Firefox 2 y Firefox 3, hay que hacer algo como esto: + +
content mypackage location/
+content mypackage location/ contentaccessible=yes
+
+
+ +

Campos para subir archivos

+ +

En versiones anteriores de Firefox, había casos en los que cuando el usuario seleccionaba un archivo para subir, la aplicación web podía ver la ruta completa del archivo. Esta pertinencia de privacidad ha sido resuelta en Firefox 3; ahora la aplicación web solo mostrará el nombre del archivo.

+ +

Cambios en JavaScript

+ +

Firefox 3 soporta JavaScript 1.8. Un cambio importante que quizás requiera actualizaciones en los sitios web o en las aplicaciones, es que los Script obsoletos y no-estandar no son soportados. Esto no es la etiqueta <script>, pero un objeto de JavaScript que nunca fue estandarizado. De cualquier manera es muy improbable que se use, así que probablemente no surgan problemas.

+ +

Vea también

+ + diff --git a/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html b/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html new file mode 100644 index 0000000000..e4c788c5bb --- /dev/null +++ b/files/es/actualizar_extensiones_para_firefox_3/actualizar_extensiones_para_firefox_3/index.html @@ -0,0 +1,229 @@ +--- +title: Actualizar extensiones para Firefox 3 +slug: Actualizar_extensiones_para_Firefox_3/Actualizar_extensiones_para_Firefox_3 +tags: + - Firefox 3 +--- +
+ +

Este artículo ofrece información que será de utilidad para desarrolladores que deseen actualizar sus extensiones, con el propósito de que éstas funcionen correctamente con Firefox 3.

+ +

Antes de continuar, queremos sugerirte algo: si el único cambio que requiere tu extensión es un empuje al campo maxVersion en el manifiesto de instalación, y la extensión está disponible en el servidor addons.mozilla.org, ¡no necesitas actualizar tu extensión a una nueva versión! Simplemente usa el Panel de Control para desarrolladores en AMO para ajustar maxVersion. De esta manera, puedes evitar el trabajo de tener que volver a revisar tu extensión.

+ +

Paso 1: Actualiza el manifiesto de instalación

+ +

El primer paso —y para muchas extensiones, el único que será necesario— es actualizar el archivo install.rdf dentro del manifiesto install manifest para indicar la compatibilidad con Firefox 3.

+ +

Simplemente encuentra la línea que indica el número de la versión máxima compatible de Firefox, lo que para Firefox 2 es algo como:

+ +
 <em:maxVersion>2.0.*</em:maxVersion>
+
+ +

Cámbiala para indicar compatibilidad con Firefox 3:

+ +
 <em:maxVersion>3.0.*</em:maxVersion>
+
+ +

A continuación, reinstala la extensión.

+ +

Recuerda que en Firefox 3 no necesitas incluir el ".0" extra en el número de versión, con lo que, en lugar de usar "3.0.0.*", sólo necesitas usar "3.0.*".

+ +
+

Nota: Ten en cuenta que actualmente, se esperan muchos cambios en Firefox 3. Estos cambios podrían romper algunas extensiones, por lo que no deberías ofrecer una nueva versión con maxVersion 3.0.* a los usuarios, hasta que salgan las versiones RC (release candidate). Durante el periodo Beta, deberías usar maxVersion 3.0b5.

+
+ +

Ha habido (y continuará habiendo) una serie de cambios en la API que muy probablemente romperá algunas extensiones. Aún estamos trabajando para hacer una lista de todos estos cambios.

+ +
+

Nota: Si tu extensión aún usa un script Install.js en lugar de un install manifest, necesitas hacer la transición a un manifiesto de instalación ahora. Firefox 3 ya no implementa scripts install.js en archivos XPI.

+
+ +

Agregar localizaciones al manifiesto de instalación

+ +

Firefox 3 tiene tres nuevas propiedades en el manifiesto de instalación para especificar descripciones de localización. Los métodos antiguos aún funcionan. Sin embargo, los nuevos permiten que Firefox escoja la localización aún cuando la extensión esté deshabilitada o pendiente de instalación. Visita Localizing extension descriptions para más detalles.

+ +

Paso 2: Asegúrate de suministrar actualizaciones seguras

+ +

Si tienes la extensión en tu propio servidor y no en un servidor seguro como addons.mozilla.org, debes suministrar un método para la descarga segura de la extensión. Esto puede hacerse manteniendo un servidor SSl, o usando claves criptográficas para firmar la información de la extensión. Lee Securing Updates para más información.

+ +

Paso 3: Debes estar al tanto de los cambios en las API

+ +

Muchas API han sido modificadas de forma significativa. Los cambios más importantes, que seguramente afectarán a muchas extensiones son:

+ +

DOM

+ + +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.

+ +

Marcadores e Historial

+ +

Si tu extensión accede a los marcadores o al historial de alguna forma, necesitarás un gran esfuerzo para hacerla compatible con Firefox 3. Los API antiguos que accedian a esta información, han sido reemplazados por la nueva arquitectura Catálogo. Ver Guía para la migración a catálogo para más detalles de cómo actualizar tus extensiones en el uso de las API de catálogo.

+ +

Administrador de descargas

+ +

El API del administrador de descargas ha cambiado ligeramente debido a la transición desde el uso del almacén de datos RDF al uso del API Storage. Esto debería ser una transición pequeña y fácil. Adicionalmente, el API para vigilar los procesos de descarga ha cambiado para que maneje varias escuchas de descarga. Ver nsIDownloadManager, nsIDownloadProgressListener, y Monitoring downloads para más información.

+ +

Administrador de contraseñas

+ +

Si tu extensión accede a información de identidad de usuario del Administrador de Contraseñas, necesitará ser actualizada para usar el nuevo API Administrador de Contraseñas.

+ + + +

También puedes sobre-escribir el almacén del administrador de contraseñas interno si quieres ofrecer tu propio almacén en tu extensión. Ver Creating a Login Manager storage module para más detalles.

+ +

Ventanas emergentes (Menús, Menús contextuales, Tooltips y Paneles)

+ +

En Firefox 3, se ha modificado sustancialmente el sistema XUL de ventanas emergentes. El sistema de ventanas emergentes, contempla ahora, menús, menús contextuales y paneles. Se ha creado una guía a using Popups, detallando cómo funciona este sistema. Una cosa a tener en cuenta, es que se desaconseja el uso de popup.showPopup en favor de los nuevos popup.openPopup y popup.openPopupAtScreen.

+ +

Autocompletado

+ +

El método handleEnter() del interfaz nsIAutoCompleteController ha cambiado para aceptar un argumento que indique si el texto ha sido seleccionado en una ventana de Autocompletado o por que el usuario ha pulsado Intro después de teclear algún texto.

+ +

Analizador del DOM (DOMParser)

+ + + +

Interfaces eliminados

+ +

Los siguientes interfaces han sido eliminados en Gecko 1.9, que es el motor de Firefox 3. Si tu extensión hace uso de cualquiera de estos interfaces, necesitas actualizar tu código:

+ + + +

Paso 4: Comprueba los cambios importantes en el chrome

+ +

Ha habido un cambio pequeño en el chrome que puede requerir cambis en tu código. Se ha añadido un nuevo vbox llamado "browser-bottombox", que integra la barra de búsqueda y la barra de estado en la parte baja de la ventana del navegador. Aunque esto no afecta a la apariencia de la pantalla, puede que afecte a tu extensión si está hace uso de los elementos descritos.

+ +

Por ejemplo, si has recubierto algún elemento del chrome antes de la barra de estado de esta manera:

+ +
<window id="main-window">
+  <something insertbefore="status-bar" />
+</window>
+
+ +

Debes cambiar tu código a algo como:

+ +
<vbox id="browser-bottombox">
+  <something insertbefore="status-bar" />
+</vbox>
+
+ +

O usar la siguiente técnica para hacer que el recubrimiento funciones tanto en Firefox 2 como Firefox 3:

+ +
<window id="main-window">
+  <vbox id="browser-bottombox" insertbefore="status-bar">
+    <something insertbefore="status-bar" />
+  <vbox>
+</window>
+
+ +
+

Nota: Este cambio es efectivo a partir de Firefox 3 beta 4.

+
+ +

Otros cambios

+ +

Añade los cambios sencillos que tengas que realizar al actualizar tu extensión para que funciones con Firefox 3.

+ + + +

Es necesario documentar los interfaces a y los relacionados con sus hilos.

+ + diff --git a/files/es/actualizar_extensiones_para_firefox_3/index.html b/files/es/actualizar_extensiones_para_firefox_3/index.html new file mode 100644 index 0000000000..fc3f91addd --- /dev/null +++ b/files/es/actualizar_extensiones_para_firefox_3/index.html @@ -0,0 +1,161 @@ +--- +title: Actualizar extensiones para Firefox 3 +slug: Actualizar_extensiones_para_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Este artículo ofrece información que será de utilidad para desarrolladores que deseen actualizar sus extensiones, para que éstas funcionen correctamente con Firefox 3.
+
+ Antes de continuar, queremos sugerirte algo: si el único cambio que requiere tu extensión es modificar el campo maxVersion en el manifiesto de instalación, la extensión está disponible en el servidor addons.mozilla.org y ¡no necesitarás actualizar tu extensión a una nueva versión! Simplemente usa el Panel de Control para desarrolladores en AMO para modificar maxVersion. De esta manera, puedes evitar el trabajo de tener que volver a revisar tu extensión.

+ +

 

+ +

Paso 1: Actualiza el manifiesto de instalación

+ +

El primer paso —y para la mayoría de las extensiones, el único que será necesario— es actualizar el archivo install.rdf dentro del manifiesto de instalación para indicar la compatibilidad con Firefox 3.

+ +

Sólo debes buscar la línea que indica la máxima versión compatible de Firefox, lo que para Firefox 2, probablemente sea:

+ +
 <em:maxVersion>2.0.*</em:maxVersion>
+
+ +

Cámbiala para indicar compatibilidad con Firefox 3:

+ +
 <em:maxVersion>3.0.*</em:maxVersion>
+
+ +

A continuación, reinstala la extensión.

+ +

Recuerda que en Firefox 3 no necesitas incluir el ".0" extra en el número de la versión. Por lo tanto, en lugar de escribir "3.0.0.*", sólo necesitas usar "3.0.*".

+ +

Ha habido (y continuará habiendo) una serie de cambios en las APIs, lo que muy probablemente averiará algunas extensiones. Aún estamos trabajando para confeccionar una lista completa de estos cambios.

+ +

Si tu extensión todavía usa un script Install.js en vez de un manifiesto de instalación, necesitas hacer la transición a un manifiesto de instalación lo más pronto posible. Firefox 3 no implementará el script install.js en documentos XPI.

+ +

Agregar localizaciones al manifiesto de instalación

+ +

Firefox 3 cuenta con tres nuevas propiedades en el manifiesto de instalación para especificar descripciones de localización. Los métodos antiguos todavía funcionan. Sin embargo, los nuevos permiten que Firefox escoja la localización, aún cuando la extensión esté deshabilitada o pendiente de instalación. Visita Localizar las_descripciones_de_las_extensiones para más detalles.

+ +

Paso 2: Asegúrate de suministrar actualizaciones seguras

+ +

Si suministras extensiones por tu propia cuenta y no usas un proveedor de hosting seguro como addons.mozilla.org, debes asegurarte de suministrar algún método seguro para la actualización de tus extensiones. Esto puede hacerse de dos formas: puedes usar un hosting con servicio de SSL o bien, puedes usar claves criptográficas para firmar la información de actualización. Lee Cómo hacer actualizaciones seguras para más información.

+ +

Paso 3: Debes estar al tanto de los cambios en las APIs

+ +

Muchas APIs han sido modificadas de forma significativa. Los cambios más importantes, que seguramente afectarán a muchas extensiones son:

+ +

DOM

+ +

Los nodos de documentos externos deberán copiarse idénticamente usando importNode() (o adoptarlos usando adoptNode()) antes de poder insertarlos en el documento actual. Para más información acerca de cuestiones relacionadas con ownerDocument, visita W3C DOM FAQ.

+ +

Actualmente, Firefox no exige hacerlo aunque sí lo hizo durante algún tiempo, durante el desarrollo de Firefox 3. Lo que ocurrió fue que muchos sitios sufrían averías cuando esta política era obligatoria. Nuestra recomendación para los desarrolladores web es que corrijan su código para cumplir con esta regla y así lograr una mejor compatibilidad a futuro.

+ +

Marcadores e Historial

+ +

Si de alguna forma tu extensión tiene acceso a Marcadores o Historial, necesitarás un gran esfuerzo para hacer que sea compatible con Firefox 3. Las APIs antiguas que daban acceso a esta información han sido reemplazadas por la nueva arquitectura Catálogo (Biblioteca). Visita la Guía para la migración a Catálogo (Biblioteca) para más detalles acerca de cómo actualizar tus extensiones para el uso de las APIs de Catálogo (Biblioteca).

+ +

Administrador de descargas

+ +

La API del Administrador de descargas ha cambiado ligeramente debido a la transición del almacén de datos RDF al uso de la API Almacenamiento. Esto debería ser una transición sencilla y fácil. Además , se ha modificado la API que controla los procesos de descarga para permitir varios receptores del administrador de descargas. Visita {{ Interface("nsIDownloadManager") }}, {{ Interface("nsIDownloadProgressListener") }} y Controlar descargas para más información.

+ +

Administrador de contraseñas

+ +

Si tu extensión tiene acceso a información de inicio de sesión de usuario en el Administrador de contraseñas, deberás actualizarla para poder utilizar la nueva API para el Administrador de inicio de sesión.

+ + + +

También puedes sobrescribir el almacén del administrador de contraseñas interno si quieres ofrecer tu propia implementación del almacén de contraseñas en la extensión. Visita Crear un módulo de almacenamiento para el Administrador de inicio de sesión para más detalles

+ +

Ventanas emergentes (Menús, Menús contextuales, Tooltips y Paneles)

+ +

En Firefox 3, se ha modificado sustancialmente el sistema XUL de ventanas emergentes. El sistema de ventanas emergentes ahora contempla menús principales, menús contextuales y paneles. Se ha creado una guía para Utilizar Ventanas emergentes que detalla cómo funciona este sistema. Algo que debes tener en cuenta, es que se desaconseja el uso de popup.showPopup en favor de los nuevos popup.openPopup y popup.openPopupAtScreen.

+ +
+

Autocompletar

+
+ +

El método handleEnter() de la interfaz nsIAutoCompleteController ha cambiado para aceptar un argumento que indique si el texto ha sido seleccionado desde una ventana emergente para Autocompletar o bien, por el usuario que ha pulsado la tecla Entrar (Enter) después de ingresar texto.

+ +

DOMParser

+ + + +

Interfaces eliminadas

+ +

Las siguientes interfaces han sido eliminadas en Gecko 1.9, el motor de renderizado de Firefox 3. Si tu extensión utiliza cualquiera de estas interfaces, deberás actualizar tu código:

+ + + +

Paso 4: Comprueba los cambios importantes en el chrome

+ +

Se ha producido un cambio menor en el chrome que puede requerir cambios en tu código. Se ha añadido un nuevo vbox llamado "browser-bottombox", que integra la barra de búsqueda y la barra de estado en la parte inferior de la ventana del navegador. Aunque esto no afecta la apariencia de la pantalla, puede que afecte tu extensión si el chrome se superpone, en relación a los elementos descriptos.

+ +

Por ejemplo, si has superpuesto algún elemento del chrome antes de la barra de estado de la siguiente manera:

+ +
<window id="main-window">
+  <something insertbefore="status-bar" />
+</window>
+
+ +

Debes cambiar tu código a algo que se parezca a:

+ +
<vbox id="browser-bottombox">
+  <something insertbefore="status-bar" />
+</vbox>
+
+ +

O bien, emplear la siguiente técnica para hacer que la superposición funcione en Firefox 2 y Firefox 3 por igual:

+ +
<window id="main-window">
+  <vbox id="browser-bottombox" insertbefore="status-bar">
+    <something insertbefore="status-bar" />
+  <vbox>
+</window>
+
+ +

{{ Note("Este cambio es efectivo para Firefox 3 beta 4 y la prebeta 4.") }}

+ +

Otros cambios

+ +

Añade aquí cambios sencillos que debas realizar cuando actualizas tu extensión para que funcione con Firefox 3.

+ + diff --git "a/files/es/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" "b/files/es/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" new file mode 100644 index 0000000000..b29ef38baf --- /dev/null +++ "b/files/es/actualizar_una_extensi\303\263n_para_que_soporte_m\303\272ltiples_aplicaciones_de_mozilla/index.html" @@ -0,0 +1,54 @@ +--- +title: Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla +slug: Actualizar_una_extensión_para_que_soporte_múltiples_aplicaciones_de_Mozilla +tags: + - Complementos + - Todas_las_Categorías + - extensiones +--- +

 

+

Este artículo muestra cómo coger una extensión existente y actualizarla para que pueda ser utilizada en otras aplicaciones de Mozilla. Utilizaremos como base la extensión de visualización de stocks creada en los artículos anteriores de esta serie, actualizándola para que pueda ser utilizada en Thunderbird y Sunbird (las anteriores versiones sólo funcionaban en Firefox).

+

Si aún no has creado una extensión o te gustaría refrescar la memoria, echa una ojeada a los anteriores artículos de la serie:

+ +

Descargar el ejemplo

+

Puedes descargar el código de ejemplo de este artículo para que puedas compararlo con el artículo o para utilizarlo como base para tu propia extensión.

+ +

Actualizar el manifiesto de instalación

+

El primer paso es revisar el manifiesto de instalación para indicar que puede ser instalado en Thunderbird y Sunbird. Esto se hace añadiendo nuevas etiquetas <targetApplication> al fichero install.rdf, como esta:

+
    <!-- Describe las versiones de Thunderbird soportadas -->
+
+    <em:targetApplication>
+      <Description>
+        <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>
+        <em:minVersion>1.5</em:minVersion>
+        <em:maxVersion>2.0.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Describe las versiones de Sunbird soportadas -->
+
+    <em:targetApplication>
+      <Description>
+        <em:id>	{718e30fb-e89b-41dd-9da7-e25a45638b28}</em:id>
+        <em:minVersion>0.2</em:minVersion>
+        <em:maxVersion>0.4.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+

Estos dos bloques indican que la extensión soporta las versiones de la 1.5 a la 2.0.0.x de Thunderbird y las de la 0.2 a la 0.4.x de Sunbird.

+

Después de introducir este código, puedes instalar la extensión en Firefox, Thunderbird o Sundbird, aunque no obtendrás ningún efecto ni en Thunderbird ni en Sunbird.

+

Esto pasa porque no hay nada que le diga a esas dos aplicaciones qué hacer con el chrome proporcionado por la extensión. Ahí es donde el manifiesto chrome entra en acción.

+

Actualizar el manifiesto chrome

+

¿Recuerdas el primer artículo de la serie cuando creamos nuestro manifiesto chrome, el cual no hemos tocado desde entonces? Es hora de tocarlo. Como podrás (o no) recordar, dicho fichero le dice a la aplicación sobre qué código XUL necesita la interfaz de tu extensión ser mezclada.

+

Para Firefox, sobrecargamos el browser.xul, que describe la ventana del navegador de Firefox. Necesitamos añadir líneas al manifiesto para Thunderbird y Sunbird, así:

+
# Thunderbird
+overlay chrome://messenger/content/messenger.xul chrome://stockwatcher2/content/stockwatcher2.xul
+
+# Sunbird
+
+overlay chrome://calendar/content/calendar.xul chrome://stockwatcher2/content/stockwatcher2.xul
+
+

Estas líneas provocan que la ventana principal con la lista de mensajes de Thunderbird y la ventana principal en Sundbird sean el objetivo de la sobrecarga que aplicaremos en el fichero stockwatcher2.xul.

+

Con estos dos simples giros, esta extensión funcionará en las tres aplicaciones y lo harà exactamente de la misma forma en todas ellas.

diff --git a/files/es/administrador_de_perfiles/index.html b/files/es/administrador_de_perfiles/index.html new file mode 100644 index 0000000000..ff800899ce --- /dev/null +++ b/files/es/administrador_de_perfiles/index.html @@ -0,0 +1,52 @@ +--- +title: Administrador de perfiles +slug: Administrador_de_perfiles +tags: + - perfiles +translation_of: Mozilla/Profile_Manager +--- +

Firefox y otras aplicaciones XULRunner guardan la configuración y los datos de los usuarios en carpetas especiales llamadas perfiles. Firefox proporciona un applet integrado para la gestión de estos perfiles, pero con el tiempo va a desaparecer (ver bug 214675), por lo que se ha creado una nueva aplicación de Administrador de perfiles independiente que funciona con cualquier aplicación XULRunner y que tiene muchas características que no se encuentran en la versión integrada de Firefox versión.

+

Descargar

+

Binarios

+


Puedes descargar el binario del  Administrador de perfiles desde ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/. No hay instalador, sólo tienes que  extraer los archivos desde el archivo.

Requisitos del sistema:

+ +

El código fuente

+

También puedes descargar el código fuente:

hg clone http://hg.mozilla.org/automation/profilemanager/

Las Instrucciones para la compilación pueden encontrarse en BUILD.txt.

+

Informar sobre fallos

+

Los errores sobre el Administrador de perfiles deberán cursarse en Bugzilla, en Testing - ProfileManager.

+


Iniciar el Administrador de perfiles

+

Para iniciar el Administrador de perfiles, simplemente lanza profilemanager.exe (en Windows) o profilemanager-bin (en Linux y Mac). De forma predeterminada, el Administrador de perfiles gestionará los perfiles de Firefox, pero también se puede utilizar para trabajar con perfiles de otras aplicaciones de xulrunner, como Thunderbird o SeaMonkey. Para utilizar el Administrador de perfiles con una aplicación distinta a Firefox, tienes que lanzarla utilizando el nombre de la aplicación como un argumento, por ejemplo:

bin profilemanager-seamonkey

+

 

+

Perfiles y versiones de las aplicaciones

+

El Administrador de perfiles gestiona dos listas diferentes: una de los perfiles de usuario y la otra de las versiones de aplicaciones que pueden ser utilizadas con los perfiles. De forma predeterminada, esto significa que sigue una lista de aplicaciones de Firefox que están instalados en tu sistema y ​​una lista de perfiles para el uso de Firefox.

Un perfil individual puede vincularse a una instalación específica de Firefox, de modo que la versión de Firefox se iniciará cuando ese perfil se haya seleccionado. Por ejemplo, Perfil A podría estar vinculado con una copia de Firefox 3.6.10, mientras que Perfil B podría estar vinculado con una copia de Firefox 3.5.3.

Cuando se inicia, el Administrador de perfiles se verá en algunas ubicaciones predeterminadas para las versiones instaladas de Firefox (u otra aplicación con la que estés utilizando el Administrador de perfiles). Además, puedes agregar manualmente las versiones de Firefox haciendo clic en el botón "Administrar versiones de Firefox ..." :

+



 

Cada versión de Firefox en la lista tiene las siguientes propiedades: la ruta, la versión y predeterminada. La propiedad predeterminada indica que esta versión de Firefox se puede utilizar con perfiles que no tienen una versión de la aplicación específica asociada con ellos.

+

Creación de un perfil

+


Para crear un nuevo perfil, haz clic en el botón Nuevo de la barra de herramientas del Administrador de perfiles de. Aparecerá un diálogo que te permite especificar el nombre del perfil y, opcionalmente, la ruta del perfil, y la versión de Firefox (u otra aplicación) que se usará con este perfil:

+

+

 

+

Lanzar Firefox con un perfil

+


Para lanzar Firefox con un perfil específico, selecciona el perfil en la ventana principal y pulsa el botón "Iniciar Firefox": Firefox se iniciará con ese perfil y se cerrará el Administrador de perfiles. La versión de Firefox que se lanzará se indica en el menú desplegable de la "versión de Firefox" situado en el cuadro Opciones de lanzamiento:

+



Hay varias opciones de lanzamiento adicionales disponibles para Firefox que permiten lanzar el navegador con varios argumentos de línea de comandos. Ver opciones de línea de comandos para obtener una descripción de los mismos.

+ +
Opción de lanzamiento Argumento de línea de comandos
Ejecutar Firefox en modo desconexión

-offline

 
Ejecutar Firefox  en modo seguro -safe-mode
Iniciar Firefox con una consola -console
Iniciar nueva instancia -no-remote
+


Nota: no es posible iniciar una segunda instancia de Firefox sin pasarle el argumento de línea de comandos -no-remote. Por esta razón, si se intenta lanzar Firefox usando el Administrador de perfiles y detecta que hay otra instancia de Firefox que ya se está ejecutando, se agregará automáticamente el argumento -no-remote, independientemente de si marcaste esta opción de lanzamiento.

+

Perfiles bloqueados

+

Algunos perfiles pueden mostrarse como bloqueados en la ventana principal. Estos perfiles están siendo utilizados por una instancia de Firefox. Si intentas realizar cualquier operación en un perfil bloqueado, recibirás una advertencia. Y si decides continuar a pesar de la advertencia, pueden producirse errores o dañar un perfil.

Es muy recomendable evitar las operaciones en los perfiles bloqueados. Si necesitas hacer algo con un perfil bloqueado, cierra la instancia de Firefox que está utilizando el primer perfil.

+

 

+

Realizar copias de seguridad y restaurar perfiles

+

El Administrador de perfiles ofrece dos mecanismos diferentes para realizar copias de seguridad y restauración de perfiles.

+

Carpeta de la copia de seguridad

+

El Administrador de perfiles tiene una carpeta de copia de seguridad local donde se pueden gestionar copias de seguridad del perfil. Esta es la forma más sencilla de hacer copias de seguridad y restauración de perfiles.

Para realizar copias de seguridad de un perfil: selecciona el perfil del que deseas hacer copia de seguridad y elige la opción "copia de seguridad"->"carpeta de copia de seguridad" en el menú de Copia de seguridad e la barra de herramientas. Se creará una copia de seguridad del perfil que aparecerá en la columna de copias de seguridad en la pantalla principal:

+

+


Para restaurar un perfil: selecciona la copia de seguridad en la pantalla principal, abre el menú contextual y elige la opción "restaurar". Cuando se restaura un perfil, la copia de seguridad se mantiene, por lo que se puede restaurar desde la misma copia de seguridad en una fecha posterior.

Para eliminar una copia de seguridad: selecciona la copia de seguridad en la pantalla principal, abre el menú contextual y elige la opción "borrar".

+


Perfil de archivos

+

El Administrador de perfiles también puede realizar copias de seguridad y restaurar desde archivos zip. El Administrador de perfiles no hace un seguimiento de estas copias de seguridad en la interfaz de usuario, pero la utilización de archivos de perfil es una manera fácil de mover los perfiles entre diferentes equipos.

Para realizar copias de seguridad de un perfil a un archivo: selecciona el perfil del que deseas hacer copia de seguridad y elige la opción "copia de seguridad->archivo" desde el menú Copia de seguridad de la barra de herramientas. Se te pedirá un nombre y una ubicación para el archivo.

Para crear un perfil de un archivo de perfil: Selecciona "restaurar-> archivo" desde el menú Copia de seguridad de la barra de herramientas. Se te pedirá la ubicación del archivo y luego el nombre del perfil que deseas crear desde el archivo.

+

Otras operaciones

+

Al hacer clic en el menú contextual de alguno de los perfiles de la lista de perfiles aparecerá un menú emergente con los siguientes comandos:

+ +


Mejoras futuras

+ +

{{ languages( { "en" : "en/Profile_Manager" } ) }}

 diff --git a/files/es/almacenamiento/index.html b/files/es/almacenamiento/index.html new file mode 100644 index 0000000000..fc56ce3e72 --- /dev/null +++ b/files/es/almacenamiento/index.html @@ -0,0 +1,204 @@ +--- +title: Almacenamiento +slug: Almacenamiento +tags: + - Toolkit API + - para_revisar +translation_of: Mozilla/Tech/XPCOM/Storage +--- +

 

+

Almacenamiento en Firefox 2 es un API de base de datos y una forma de respaldo en sqlite. Es un recurso sólo disponible para peticiones seguras, lo que significa su uso exclusivo para código chrome y extensiones, no así para páginas web. Actualmente está "descongelada", lo que significa que la API está sujeta a cambiar en cualquier momento. Es probable que la API sufra algunas modificaciones entre la versión Alfa 2 y la versión final de Firefox 2, así como entre Firefox 2 y Firefox 3.

+

Aunque a veces se confunde el Almacenamiento con el WHATWG DOM #scs-del-lado-del-cliente (una característica de Firefox 2 que permite el almacenamiento persistente de datos) la API Almacenamiento, está reservada sólo para extensiones de autoría y componentes de Firefox.

+

El presente documento abarca la API mozStorage y algunas peculiaridades de sqlite. No cubre SQL o el sqlite "regular". Para esos casos usted debe consultar sus manuales de SQL. Es recomendable que revise también su documentación de sqlite y especialmente el lenguaje de consultas de sqlite. Para acceder a la ayuda de la API mozStorage, debe consultar en mozilla.dev.apps.firefox o al servicio de informaciones en news.mozilla.org. En caso de querer reportar errores, use el Bugzilla (Producto: "Herramientas", Componente: "Almacenamiento").

+

Revise Almacenamiento:Funcionamiento para indagar sobre el buen funcionamiento de la conexión a su base de datos.

+

Comenzando

+

mozStorage está diseñada como muchos otros sistemas de bases de datos. El procedimiento general para usarlo es:

+ +

Abriendo una Conexión

+

La primera inicialización del servicio de almacenamiento debe hacerse en el hilo principal (un "hilo" es una unidad básica de ejecución). Se producirá un error si usted lo inicializa por cualquier otro hilo. Por lo tanto, si usted quisiera usar el servicio desde otro hilo, verifique llamando al getService desde el hilo principal para asegurarse que el servicio ha sido creado.

+

Ejemplo en C++ de la apertura de una conexión para "asdf.sqlite" en el directorio raiz del usuario:

+
nsCOMPtr<nsIFile> dbFile;
+rv = NS_GetSpecialDirectory(NS_APP_USER_PROFILE_50_DIR,
+                            getter_AddRefs(dbFile));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = dbFile->Append(NS_LITERAL_STRING("asdf.sqlite"));
+NS_ENSURE_SUCCESS(rv, rv);
+
+mDBService = do_GetService(MOZ_STORAGE_SERVICE_CONTRACTID, &rv);
+NS_ENSURE_SUCCESS(rv, rv);
+rv = mDBService->OpenDatabase(dbFile, getter_AddRefs(mDBConn));
+NS_ENSURE_SUCCESS(rv, rv);
+
+

MOZ_STORAGE_SERVICE_CONTRACTID está definido en storage/build/mozStorageCID.h, y su valor es "@mozilla.org/storage/service;1"

+

Ejemplo en JavaScript:

+
var file = Components.classes["@mozilla.org/file/directory_service;1"]
+                     .getService(Components.interfaces.nsIProperties)
+                     .get("ProfD", Components.interfaces.nsIFile);
+file.append("asdf.sqlite");
+
+var storageService = Components.classes["@mozilla.org/storage/service;1"]
+                        .getService(Components.interfaces.mozIStorageService);
+var mDBConn = storageService.openDatabase(file);
+
+
Nota: La función OpenDatabase está sujeta a cambios. Esta deberá ser destacada y simplificada al máximo para hacerla menos accesible a problemas.
+
+
Atención: Evite la tendencia a darle a su base de datos la terminación ".sdb" (por 's'qlite 'd'ata 'b'ase). Esta extensión está     reservada en Windows para una "Base de datos de Aplicación Compatible" y sus modificaciones son guardadas automáticamente como parte del sistema para restaurar su funcionalidad.
+

Crear una sentencia

+

Existen dos formas de crear una sentencia. Si no hay parámetros y la sentencia no devuelve nada, use mozIStorageConnection.executeSimpleSQL.

+
C++:
+rv = mDBConn->ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TABLE foo (a INTEGER)"));
+
+JS:
+mDBConn.executeSimpleSQL("CREATE TABLE foo (a INTEGER)");
+
+

En otro caso, se debería componer una sentencia utilizando mozIStorageConnection.createStatement:

+
C++:
+nsCOMPtr<mozIStorageStatement> statement;
+rv = mDBConn->CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+
+JS:
+var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1");
+
+

Este ejemplo utiliza un comodín "?1" para un parámetro que será referenciado más tarde (véase la siguiente sección).

+

Tras componer la sentencia se pueden enlazar parámetros a ella, ejecutarla y reiniciarla una y otra vez. Si una sentencia se ejecuta muchas veces, el uso de una sentencia precompilada derivará en una mejora notable del rendimiento ya que la consulta SQL no necesita ser analizada sintácticamente cada vez.

+

Si está familiarizado con sqlite, sabrá que las sentencias preparadas son invalidadas cuando el esquema de la base de datos cambia. Afortunadamente, mozIStorageStatement detecta el error y recompilará la sentencia según se necesite. Por tanto, una vez que se ha creado una sentencia, no es necesario preocuparse ante un cambio de esquema. Todas las sentencias continuarán trabajando de forma transparente.

+

Asignando parámetros

+

Por lo general es mejor asignar todos los parámetros por separado en lugar de intentar construir cadenas SQL al vuelo que contengan los parámetros. Entre otras cosas, esto evita ataques de inyección SQL, ya que un parámetro asignado nunca podrá ser ejecutado como SQL.

+

Se pueden asignar parámetros cualquier sentencia que tenga comodines. Los comodines son accedidos mediante índice empezando por "?1", luego "?2"... Para asignar dichos comodines hay que usar funciones de sentencia BindXXXParameter(0) BindXXXParameter(1)...

+
Cuidado: Los índices en los comodines empiezan en 1. Los enteros pasados a las funciones de asignación cuentan desde 0. Esto significa que "?1" se corresponde al parámetro 0, "?2" al 1, etc...
+
+

Un comodín puede aparecer múltiples veces en la cadena SQL y todas sus instancias serán reemplazadas con el valor asignado. Los parámetros no asignados se interpretarán como NULL.

+

Las funciones de asignación disponibles en mozIStorageStatement (véase storage/public/mozIStorageStatement.idl) son:

+ +

Ejemplo C++:

+
nsCOMPtr<mozIStorageStatement> statement;
+rv = mDBConn->CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1 AND b > ?2"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement->BindUTF8StringParameter(0, "hello"); // "hello" will be substituted for "?1"
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement->BindInt32Parameter(1, 1234); // 1234 will be substituted for "?2"
+NS_ENSURE_SUCCESS(rv, rv);
+
+

Ejemplo Javascript:

+
var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b > ?2");
+statement.bindUTF8StringParameter(0, "hello");
+statement.bindInt32Parameter(1, 1234);
+
+

Ejecutar una sentencia

+

La forma principal de ejecutar una sentencia es con mozIStorageStatement.executeStep. Esta función te permite enumerar todas las filas resultantes que la sentencia ha producido y te avisará cuando ya no haya más resultados.

+

Tras llamar a executeStep se pueden usar las funciones get de mozIStorageValueArray (véase storage/public/mozIStorageValueArray.idl. mozIStorageStatement implementa mozIStorageValueArray. Estas funciones son:

+ +

Se puede obtener el tipo de un valor con mozIStorageValueArray.getTypeOfIndex el cual devuelve el tipo de la columna especificada. Cuidado: sqlite no es una base de datos tipada. Se puede poner cualquier tipo en cualquier celda sin importar el tipo declarado para la columna. Si se pide un tipo diferente, sqlite hará lo que pueda para convertirlo y devolverá algún valor predeterminado si le es imposible. Por tanto, es imposible obtener errores a la hora de recuperar tipos aunque puede que te lleguen datos raros.

+

El código de C++ puede además usar las funciones AsInt32, AsDouble, etc... que devuelven el valor como valor devuelto de C++ más apropiado. Aunque hay que tener cuidado ya que no tendrás errores si el índice es inválido. Es imposible obtener cualquier otro error debido a que sqlite siempre convertirá los tipos, incluso cuando al hacerlo dejen de tener sentido.

+

Ejemplo C++:

+
PRBool hasMoreData;
+while (NS_SUCCEEDED(statement->ExecuteStep(&hasMoreData)) && hasMoreData) {
+  PRInt32 value = statement->AsInt32(0);
+  // use the value...
+}
+
+

Ejemplo Javascript:

+
while (statement.executeStep()) {
+  var value = statement.GetInt32(0);
+  // use the value...
+}
+
+

mozIStorageStatement.execute() en una función apropiada cuando no se esperan datos al ejecutar la sentencia. Itera una vez la sentencia y la reinicia. Esto puede ser útil para sentencias de inserción ya que simplifica el código:

+
var statement = mDBConn.createStatement("INSERT INTO my_table VALUES (?1)");
+statement.bindInt32Parameter(52);
+statement.execute();
+
+

Reiniciar una sentencia

+

Es importante reiniciar sentencias que ya no van a ser usadas más. Las sentencias de escritura no reiniciadas mantendrán bloqueadas las tablas e impedirán a otras sentencias acceder a ellas. Las sentencias de lectura no reiniciadas impedirán la escritura.

+

Cuando un objeto sentencia es liberado, su sentencia de base de datos correspondiente es cerrada. Si estás usando C++ y sabes que todas las referencias serán destruidas, no tienes porque reiniciar explícitamente la sentencia. Además, si usas mozIStorageStatement.execute(), tampoco necesitas reiniciar explícitamente la sentencia; esta función la reiniciará por ti. En otro caso, hay que llamar a mozIStorageStatement.reset().

+

Los que utilicen JavaScript deben asegurarse de que las sentencias son reiniciadas, siendo particularmente cuidadoso con las excepciones. Seguro que querrás estar seguro de que reinicias tus sentencias incluso cuando una excepción es lanzada o de lo contrario los siguientes accesos a la base de datos no serán posibles. El reinicio de una sentencia es un proceso relativamente sencillo y no ocurrirá nada si ya estaba reiniciada, por lo que no hay que preocuparse por reinicios innecesarios.

+
var statement = connection.createStatement(...);
+try {
+  // uso de la sentencia...
+} finally {
+  statement.reset();
+}
+
+

Los que usen C++ deben de hacer lo mismo. Existe un objeto de ámbito en storage/public/mozStorageHelper.h llamado mozStorageStatementScoper que asegura que una sentencia dada es reiniciada cuando se sale del ámbito al que pertenece. Es muy recomendable usar este objeto si es posible.

+
void someClass::someFunction()
+{
+  mozStorageStatementScoper scoper(mStatement)
+  // uso de la sentencia
+}
+
+

Transacciones

+

mozIStorageConnection posee funciones para comenzar y finalizar transacciones. Si no se usan transacciones de modo explícito, se creará una implícita para cada sentencia. Esto tiene consecuencias más directas relacionadas con el rendimiento. Existe algo así para cada transacción, especialmente para las confirmaciones (commits). Por tanto al final se notará una mejora en el rendimiento cuando se realicen múltiples sentencias en una fila si se ponen en una transacción. Véase Storage:Performance para más información relacionada con el rendimiento.

+

La gran diferencia entre otros sistemas de base de datos es que sqlite no soporta transacciones anidadas. Esto significa que una vez se ha abierto una transacción no se puede abrir otra. Se puede comprobar mozIStorageConnection.transactionInProgress para ver si una transacción está actualmente en progreso.

+

También se puede ejecutar "BEGIN TRANSACTION" y "END TRANSACTION" directamente como sentencias SQL (esto es lo que hace la conexión cuando se llaman a las funciones). Sin embargo, el uso de mozIStorageConnection.beginTransaction y las funciones relacionadas se recomienda encarecidamente ya que guarda el estado de la transacción en la conexión. De otro modo el atributo transacionInProgress tendrá un valor erróneo.

+

sqlite posee varios tipos de transacciones:

+ + + +

Se puede pasar este tipo de transacción a mozIStorageConnection.beginTransactionAs para determinar qué clase de transacción se necesita, teniendo en mente que si otra transacción se ha iniciado esta operación no tendrá éxito. Generalmente, el tipo predeterminado TRANSACTION_DEFERRED es suficiente y no se debería usar el resto de tipos a menos que realmente sepas por qué lo necesitas. Para más información, véase la documentación de sqlite sobre BEGIN TRANSACTION ybloqueos.

+
var ourTransaction = false;
+if (mDBConn.transactionInProgress) {
+  ourTransaction = true;
+  mDBConn.beginTransactionAs(mDBConn.TRANSACTION_DEFERRED);
+}
+
+// ... uso de la conexión ...
+
+if (ourTransaction)
+  mDBConn.commitTransaction();
+
+

En C++ se puede usar la clase de ayuda mozStorageTransaction definida en storage/public/mozStorageHelper.h. Esta clase comenzará una transacción del tipo especificado utilizando la conexión especificada cuando se alcance el ámbito y confirmará o deshará la transacción cuando salga del ámbito. Si ya había una transacción en progreso, la clase de ayuda de transacciones no hará nada.

+

También tiene funciones para confirmaciones explícitas. El uso típico es cuando se crea la clase para que deshaga los cambios de modo predeterminado para luego confirmar explícitamente la transacción cuando el proceso haya concluido con éxito.

+
nsresult someFunction()
+{
+  // deferred transaction (the default) with rollback on failure
+  mozStorageTransaction transaction(mDBConn, PR_FALSE);
+
+  // ... uso de la conexión ...
+
+  // todo ha ido bien, ahora confirmamos explícitamente
+  return transaction.Commit();
+}
+
+

Cómo corromper la base de datos

+ + + + + + +

Seguridad en hilos

+

Tanto el servicio mozStorage como sqlite son seguros a nivel de hilo. Sin embargo ningún otro objeto de mozStorage o de sqlite u operación es segura.

+ + + +

Bloqueo en SQLite

+

SQLite bloquea por completo la base de datos, es decir, se devolverá un SQLITE_BUSY a aquellos que estén leyendo e intenten escribir y lo mismo ocurrirá con aquellos que estén escribiendo e intenten leer. Una sentencia se considera activa desde el primer step() hasta que reset() es llamado. execute() llama tanto a step() como a reset(). Un problema común ocurre cuando se olvida reiniciar con reset() una sentencia después de haberla iterado con step().

+

Mientras que una conexión SQLite dada es capaz de manejar múltiples sentencias abiertas, su modelo de bloqueo limita lo que dichas sentencias pueden hacer concurrentemente (leer o escribir). De hecho es posible que múltiples sentencias estén activas leyendo a la vez. Sin embargo no es posible que múltiples sentencias estén leyendo y escribiendo a la vez en la misma tabla, incluso si son derivadas de la misma conexión.

+

SQLite posee un modelo de bloqueo a dos niveles: a nivel de conexión y a nivel de tabla. La mayoría de la gente estará familiarizada con el bloqueo a nivel de conexión (base de datos): múltiples lectores aunque sólo un escritor. Lo que bloquea el nivel de tabla (Árbol-B) es lo que puede a veces ser confundido (internamente, cada tabla en la base de datos posee su propio Árbol-B, por lo que "tabla" y "Árbol-B" son técnicamente sinónimos).

+
Bloqueo a nivel de tabla
+

Se podría pensar que si sólo se tiene una conexión y se bloquea la base de datos para escritura, se podrían usar múltiples sentencias para hacer todo lo que se quisiera. No del todo cierto. Hay que ser consciente del bloqueo a nivel de tabla (Árbol-B) el cual es mantenido por manejadores de sentencias a través de la base de datos (p.e. sentencias SELECT abiertas).

+

La regla general es esta: un manejador de sentencia puede no modificar una tabla (Árbol-B) la cual otros manejadores de sentencia están leyendo (tienen abiertos cursores sobre ella), incluso si ese manejador de sentencia comparte la misma conexión (contexto de transacción, bloqueo de base de datos, etc...) con otros manejadores de sentencias. Intentar hacerlo provocará el bloqueo (o devolverá SQLITE_BUSY).

+

Este problema generalmente aparece cuando se intenta iterar una tabla con una sentencia y modificar registros dentro de ella utilizando otra sentencia. Esto no funcionará (o conlleva una alta probabilidad de no funcionar, dependiendo de la implicación del optimizador (véase más abajo)). La sentencia de modificación provocará bloqueo ya que la sentencia de lectura tiene un cursor abierto en la tabla.

+
Trabajar con problemas de bloqueo
+

La solución es seguir (1) como se describe arriba. Teóricamente, (2) realmente no debería funcionar con SQLite 3.x. En este escenario, el bloqueo de la base de datos entra en juego (con múltiples conexiones) además del bloque de la tabla. La conexión 2 (conexión de modificación) no será capaz de modificar (escribir) en la base de datos mientras que la conexión 1 esté leyendo. La conexión 2 necesita un acceso exclusivo para ejecutar un comando SQL de modificación, acceso que no puede obtener mientras la conexión 1 tenga sentencias activas leyendo la base de datos (la conexión 1 posee un bloque de lectura compartido durante este tiempo el cual prohibe a cualquier otra conexión obtener un acceso exclusivo).

+

Otra opción es usar una tabla temporal. Crear una tabla temporal que contenga los resultados de la tabla en cuestión, iterarla (poniendo el bloqueo de la tabla de la sentencia de lectura en la tabla temporal) para que luego la sentencia de modificación pueda hacer cambios en la tabla real sin ningún problema. Esto puede ser hecho con sentencias derivadas de una única conexión (contexto de transacción). Este escenario a veces sucede en segundo plano ya que cosas como ORDER BY pueden producir tablas temporales internamente. Sin embargo, no es seguro asumir que el optimizador hará esto en todos los casos. Crear una tabla temporal explícitamente es la única forma segura de realizar esta última opción.

+ +

diff --git a/files/es/api_de_acceso_a_canales/index.html b/files/es/api_de_acceso_a_canales/index.html new file mode 100644 index 0000000000..7c21ceb776 --- /dev/null +++ b/files/es/api_de_acceso_a_canales/index.html @@ -0,0 +1,166 @@ +--- +title: API de acceso a canales +slug: API_de_acceso_a_canales +tags: + - Complementos + - Todas_las_Categorías + - extensiones +translation_of: Mozilla/Tech/Feed_content_access_API +--- +

Firefox 2 y Thunderbird 2 introducen una serie de interfaces que  hacen más sencillo que los autores de extensiones accedan a los canales RSS y Atom.

+

Interfaces del canal

+
+
+ nsIFeed
+
+ Representa un canal RSS o Atom.
+
+ nsIFeedContainer
+
+ Una clase básica subclasificada por varias interfaces relacionadas al canal.
+
+ nsIFeedElementBase
+
+ Una clase básica subclasificada por varias de las otras interfaces relacionadas con el canal.
+
+ nsIFeedEntry
+
+ Representa una única entrada en un canal RSS o Atom.
+
+ nsIFeedGenerator
+
+ Describe el programa que generó un canal RSS o Atom.
+
+ nsIFeedPerson
+
+ Representa a una persona. Contiene el nombre de la persona, la dirección de correo electrónico, y la dirección de la página personal.
+
+ nsIFeedProcessor
+
+ Analiza canales RSS y Atom.
+
+ nsIFeedProgressListener
+
+ Implementada por el programa que quiere analizar un canal RSS o Atom, para recibir mensajes durante el proceso de análisis.
+
+ nsIFeedResult
+
+ Describe el resultado al analizar un canal.
+
+ nsIFeedResultListener
+
+ Implementado por el programa que quiere analizar un canal RSS o Atom para recibir avisos cuando el análisis se complete.
+
+ nsIFeedTextConstruct
+
+ Representa valores de texto en un canal; incluye funciones que permiten traer el texto como texto sin formato o como HTML.
+
+ nsIScriptableUnescapeHTML
+
+ Una clase de utilidad que elimina las secuencias de escape de las cadenas HTML.
+
+

Ejemplo: Leer un canal de la Web

+

Realmente es bastante fácil leer y analizar un canal: Usa un XMLHttpRequest para cargar el canal, y luego pasa su cadena a un nsIFeedProcessor para analizarlo.

+

Cargar el canal y enviarlo al analizador sintáxtico se hace usando un código similar a éste:

+
  fetch: function(feedUrl)
+  {
+    var httpRequest = null;
+
+    function infoReceived() {
+      var data = httpRequest.responseText;
+
+      var ioService = Components.classes['@mozilla.org/network/io-service;1']
+                                         .getService(Components.interfaces.nsIIOService);
+      var uri = ioService.newURI(feedUrl, null, null);
+
+      if (data.length) {
+        var parser = Components.classes["@mozilla.org/feed-processor;1"]
+                                        .createInstance(Components.interfaces.nsIFeedProcessor);
+        var listener = new FeedTestResultListener();
+        try {
+          parser.listener = listener;
+          parser.parseFromString(data, uri);
+        }
+        catch(e) {
+          alert("Error al analizar el canal.");
+        }
+      }
+    }
+
+    httpRequest = new XMLHttpRequest();
+
+    httpRequest.open("GET", feedUrl, true);
+    try {
+      httpRequest.onload = infoReceived;
+      httpRequest.send(null);
+    }
+    catch(e) {
+      alert(e);
+    }
+  }
+
+

La interfaz nsIFeedProcessor te permite analizar los datos del canal desde varias fuentes distintas; en este caso, estamos cargando un documento en una cadena, para seguidamente analizar la cadena usando su método parseFromString(). Sin embargo, también se podría analizar desde un archivo usando parseFromStream(), o directamente desde una URL usando parseAsync().

+

El procesamiento real de análisis del canal se hace por un método llamado handleResult() en el objeto FeedTestResultListener. Ese código es similar a éste:

+
    FeedTestResultListener.prototype = {
+      handleResult: function(result) {
+        var feed = result.doc;
+
+        feed.QueryInterface(Components.interfaces.nsIFeed);
+
+        // Abre una nueva ventana
+
+        var win = window.open("", "FeedTest_Window");
+        var doc = win.document;
+
+        doc.open();
+
+        // Escribe la cabecera HTML y el título de la página
+
+        doc.write("<html><head><title>Feed: " + feed.title.text + "</title></head><body>");
+        doc.write("<h1>" + feed.title.text + "</h1><p>");
+
+        var itemArray = feed.items;
+        var numItems = itemArray.length;
+
+        // Write the article information
+
+        if (!numItems) {
+          doc.write("<i>¡Que no haya noticias es buena noticia!</i>");
+        }
+        else {
+          var i;
+          var theEntry;
+          var theUrl;
+          var info;
+
+          for (i=0; i<numItems; i++) {
+            theEntry = itemArray.queryElementAt(i, Components.interfaces.nsIFeedEntry);
+
+            if (theEntry) {
+              theUrl =
+              doc.write('<b><a href="' + theEntry.link.resolve("") + '">' + theEntry.title.text + '</a></b><br>');
+              if (theEntry.summary) {
+                info = theEntry.summary.text + "<p><hr><p>";
+              }
+              else {
+                info = theEntry.content.text + "<p><hr><p>";
+              }
+              doc.write("<blockquote>" + info);
+              doc.write("</blockquote><p>");
+            }
+          }
+        }
+
+        // Cerramos el documento; ¡hemos acabado!
+
+        doc.write("</body></html>");
+        doc.close();
+      }
+    }
+
+

La función handleResult() recibe como argumento un nsIFeedResult que describe un canal; su propiedad doc es un nsIFeed que contiene todos los datos del canal.

+

Para obtener el título del canal, se consulta la propiedad feed.title. El título es un nsIFeedTextConstruct que puede representar el texto en varios formatos; obtenemos su propiedad text para representar el título del canal como un texto codificado en HTML. Podríamos, alternativamente, usar su método plainText() para obtener una copia del título traducido a texto sin formato.

+

Luego examinamos el array (arreglo) de artículos en el canal consultando el feed.items nsIArray. Este array contiene los objetos nsIFeedEntry que describen cada artículo del canal.

+

Construimos el contenido de los documentos accediendo a las propiedades del título, enlace, resumen y contenido para cada artículo. La URL completa del enlace se recupera usando el método resolve() del enlace.

+

Para iniciar la lectura de un canal, simplemente llamamos fetch(url). Esto abre una nueva ventana con el contenido del canal, pudiendo hacer clic en cada título de las entradas que nos llevarán al artículo en sí.

+

Para los detalles de cada uno de las interfaces de acceso al canal, visita sus respectivas páginas de referencia.

diff --git a/files/es/api_del_toolkit/index.html b/files/es/api_del_toolkit/index.html new file mode 100644 index 0000000000..b639c14d6c --- /dev/null +++ b/files/es/api_del_toolkit/index.html @@ -0,0 +1,34 @@ +--- +title: API del Toolkit +slug: API_del_Toolkit +tags: + - Toolkit API +translation_of: Mozilla/Tech/Toolkit_API +--- +

El Mozilla Toolkit es un conjunto de interfaces de programación (APIs) construidas sobre Gecko que proporcionan servicios avanzados a las aplicaciones XUL. Estos servicios incluyen:

+ + +

Referencia oficial

+ +

Official References. Do not add to this list without contacting Benjamin Smedberg. Note that this page is included from the pages listed below. So: Don't Add Breadcrumbs! +

+
+ +

Más información

+ +

La siguientes páginas para desarrolladores contienen ejemplos y discusiones sobre temas concretos:

+ +

XUL; Overlays XUL; Desarrollar extensiones; XULRunner; Desarrollar temas; DOM; RDF; Almacenamiento; Crear documentación de ayuda

diff --git a/files/es/applying_svg_effects_to_html_content/index.html b/files/es/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..b5c8f17b51 --- /dev/null +++ b/files/es/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 +--- +

Aplicación de efectos de SVG para el contenido HTML.

+

{{ gecko_minversion_header("1.9.1") }}

+

Firefox 3.5 introduce soporte para usar SVG como un componente de estilos CSS para aplicar efectos de SVG para el contenido HTML.
+
+Puede especificar SVG en los estilos, ya sea dentro del mismo documento, o dentro de una hoja de estilos externa.

+
Nota: Las referencias a SVG en archivos externos deben ser de el mismo origen que el documento de origen.
+

Uso integrado SVG

+

Para aplicar un efecto SVG usando estilos CSS, primero tiene que crear el estilo CSS que hace referencia al SVG para aplicar.

+
<style>.stylename { mask: url(#localstyle); }</style>
+
+

 En el ejemplo anterior, el nuevo estilo, por "stylename," es una máscara de SVG que hace referencia a el identificador "localstyle". Una vez que se estableció, que la máscara se aplica a todos los elementos con este estilo CSS.
+
+Esto suena más complicado de lo que realmente es, echar un vistazo a los ejemplos para tener una buena idea de cómo funciona esto.
+
+Hay tres estilos que se pueden aplicar: puede usar la máscara, el recorrido de clip, o un filtro.

+

 

+

Ejemplo: Enmascaramiento (Máscara)

+

Por ejemplo, puede establecer un estilo CSS que proporciona una máscara de degradado para el contenido HTML con código SVG similar a lo siguiente en su documento HTML:

+

NOTA: El espaciamiento de nombre no es válida en HTML 5, dejar fuera de la "svg:" en las etiquetas de los documentos en formato HTML.

+
  <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>
+
+

Tenga en cuenta que en la línea 1, la máscara se especifica mediante una dirección URL para el ID "# M1", que es el identificador de la máscara de SVG que se especifican a continuación. Todo lo demás se especifican otros detalles sobre la misma máscara de degradado.

+

En realidad, de aplicar el efecto SVG a XHTML o HTML se hace simplemente asignar el estilo de destino definido anteriormente para el elemento, así:

+
<iframe class="target" src="http://mozilla.org"/>
+

En este ejemplo se incrusta un iframe que contiene el sitio web de Mozilla.org, que se representa con la máscara que se le aplica.

+

View this example live.

Ejemplo: Recorte

+

Este ejemplo muestra cómo utilizar SVG para recortar el contenido HTML. Cuando nos fijamos en la demostración en vivo, cuenta que incluso en las zonas calientes de los enlaces se recortan.

+
  <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>
+
+

Esto establece un área de recorte compuesto por un círculo y el rectángulo, y le asigna el ID # c1 ". Esto entonces se hace referencia en el estilo. Una vez que el estilo de destino se establece de esta manera, la ruta del clip se puede asignar a cualquier elemento.

+

Tenga en cuenta también que puede realizar cambios en el SVG en tiempo real y ver los cambios afectan inmediatamente a la prestación del HTML. Por ejemplo, puede cambiar el tamaño del círculo en el camino clip establecido:

+
    var circle = document.getElementById("circle");
+    circle.r.baseVal.value = 0.40 - circle.r.baseVal.value;
+
+

View this example live.  El ejemplo incluye un botón, puede hacer clic para cambiar la ruta de clip y ver que el cambio surta efecto.

Ejemplo: Filtrar

+

Este ejemplo muestra cómo se puede aplicar un filtro para el contenido HTML utilizando SVG. Establece varios filtros que se aplican con estilos para cada uno de los tres elementos, tanto en los Estados suspender normal y el ratón.
+
+Cualquier SVG filtro se puede aplicar de esta manera. Por ejemplo, para aplicar un efecto de desenfoque gaussiano, puede utilizar:

+
<svg:filter id="f1">
+  <svg:feGaussianBlur stdDeviation="3"/>
+</svg:filter>
+
+

También puede aplicar una matriz de color, de esta manera:

+
    <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>
+
+

Estos son sólo dos de los cinco filtros de muestra en este ejemplo. Asegúrese de echar un vistazo al código completo si le gustaría ver más.
+
+Los cinco filtros se aplican mediante el siguiente código CSS:

+
  <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>
+
+

View this example live.

Uso de referencias externas

+

Los elementos SVG se utiliza para cortar, el enmascaramiento, y así sucesivamente se pueden cargar desde un documento externo, mientras que el documento proviene del mismo origen que el documento HTML al que se aplica.
+
+Por ejemplo, si tu CSS en un archivo llamado default.css, puede tener el siguiente aspecto:

+
.target { clip-path: url(resources.svg#c1); }
+

El SVG se importa desde un archivo llamado resources.svg, utilizando la ruta del clip con el ID c1.

Véa también

+ +

 

+

 

+

                      CESAR ORTIZ GUTIERREZ - ELPATOX - wWw.Patito.Tk

diff --git "a/files/es/archive/add-ons/api_de_restauraci\303\263n_de_sesi\303\263n/index.html" "b/files/es/archive/add-ons/api_de_restauraci\303\263n_de_sesi\303\263n/index.html" new file mode 100644 index 0000000000..237857bc2e --- /dev/null +++ "b/files/es/archive/add-ons/api_de_restauraci\303\263n_de_sesi\303\263n/index.html" @@ -0,0 +1,66 @@ +--- +title: API de restauración de sesión +slug: Archive/Add-ons/API_de_restauración_de_sesión +tags: + - Complementos + - NecesitaRevisiónTécnica + - Todas_las_Categorías + - extensiones +translation_of: Archive/Add-ons/Session_store_API +--- +

Firefox 2 introduce el almacenamiento de sesiones, una nueva caracteristica que hace posible que las extensiones puedan fácilmente, guardar y restaurar datos a lo largo de sesiones de Firefox. Existe una API simple que permite que las extensiones accedan a la caracterìstica de almacenamiento de sesión.

+

Un escenario clave en el cual proveer esta caracteristica puede ser crucial para una extensión: Firefox 2 deja revertir el cerrado de pestañas. Para poder restaurar correctamente el estado de la extension cuando una pestaña es restaurada, necesita usar el metodo setTabValue() de la API de almacenamiento de sesion, para guardar la informaciòn que necesitarà para restaurar su estado, y luego invocar getTabValue() para obtener la configuraciòn previa cuando la pestaña es recuperada.

+

La API Almacenamiento de Sesion es implementada usando la interfaz nsISessionStore

+

Saber cuando restaurar

+

Cada vez que Firefox està por restaurar una pestaña, un evento de tipo SSTabRestoring es enviado. Si se quiere que la extensión sea capaz de restaurar los datos cuando las pestañas son restauradas, puede instalar un "centinela" como este:

+
function myExtensionHandleRestore(aEvent) {
+  Components.classes["@mozilla.org/consoleservice;1"].
+             getService(Components.interfaces.nsIConsoleService).
+             logStringMessage("restoring tabs");
+};
+
+document.addEventListener("SSTabRestoring", myExtensionHandleRestore, false);
+
+

Simplemente se debe reemplazar los contenidos de la función myExtensionHandleRestore() con cualquier cosa que se necesite hacer cuando la pestaña sea restaurada. En este ejemplo, nsIConsoleService es usado para desplegar un mensaje a la Consola.

+

Este evento es enviado justo antes de la restauracion de una pestaña. Un evento del tipo SSTabRestored es enviado después que la última pestaña ha sido restaurada.

+

El proceso de restauración de sesión

+

La secuencia exacta de eventos que ocurre cuando una sesión està siendo restaurada es:

+
  1. El estado de una sesión está a punto de ser restaurado. Esto puede ser al inicio del programa,o en respuesta a Deshacer Cerrar Pestaña, dado que las pestañas cerradas son restauradas como sesiones de una sola pestaña.
  2. Nuevas ventanas son abiertas como se requirieron (una por cada ventana que fue salvada durante el almacenamiento de sesión), y tanto cookies como la lista de pestañas recièn cerradas son restauradas.
    3. +
+

Después de esto, los siguientes pasos son seguidos por cada pestaña que està siendo restaurada:

+
  1. Se reutiliza una pestaña o se crea una nueva. En el último caso, el evento TabOpen es enviado.
  2. Los atributos persistentes XUL de la pestaña (aquellos que fueron salvados, debido a invocaciones de persistTabAttribute()) y permisos son restaurados.
  3. El evento SSTabRestoring es enviado.
  4. Se le ordena a la pestaña que cargue el URL que deberìa desplegar.
  5. Cuando la página ha terminado de cargar, los campos de texto y barras de desplazamiento son restaurados.
  6. Finalmente, el evento SSTabRestored es enviado.
    7. +
+

Si se quiere configurar permisos o manipular de alguna otra forma  una pestaña restaurada antes de que la página sea cargada, debería observar SSTabRestoring. Si se desea hacer algo después de que la pagina ha sido cargada, debería observar SSTabRestored.

+

Ambos eventos son siempre enviados por cada pestaña que està siendo restaurada. Se puede determinar cual pestaña esta siendo restaurada mirando el campo originalTarget del evento.

+

No existe una forma para determinar cuàndo ha sido restaurada la última pestaña, a menos que se determine cuantas pestañas necesitan ser restauradas y luego contar los eventos sSTabRestored.

+

Usando la API de almacenamiento de sesión

+

Esta sección provee algunos ejemplos de còmo usar la API de almacenamiento de sesión.

+

Guardando un valor con una pestaña.

+

El siguiente código adherirà un par llave/valor a una pestaña, asi-cuando èsta sea restaurada-, este par todavía estará asociada a ella.

+
 var ss = Components.classes["@mozilla.org/browser/sessionstore;1"].
+                             getService(Components.interfaces.nsISessionStore);
+ var currentTab = getBrowser().selectedTab;
+ var dataToAttach = "Yo quiero adherir esto";
+ ss.setTabValue(currentTab, "nombre-llave-aqui", dataToAttach);
+
+

El código asigna el valor de la llave "nombre-llave-aqui" a dataToAttach. Se puede usar cualquier objeto JavaScript como datos.

+

Recuperar un valor guardado

+

Se puede recuperar un valor asociado a una pestaña en cualquier momento (ya sea mientras la pestaña este siendo restaurada o no), usando un código similar al siguiente:

+
 var ss = Components.classes["@mozilla.org/browser/sessionstore;1"].
+                             getService(Components.interfaces.nsISessionStore);
+ var currentTab = getBrowser().selectedTab;
+ var retrievedData = ss.getTabValue(currentTab, "nombre-llave-aqui");
+
+

Despuès  que el código ha sido ejecutado, la variable retrievedData contiene el valor guardado en la llave "nombre-llave-aqui". retrievedData está indefinida si no existe un valor guardado para ese nombre de llave.

+

Borrando un valor asociado a una pestaña

+

Para borrar un valor de una pestaña, se puede utilizar un código como el siguiente:

+
 var ss = Components.classes["@mozilla.org/browser/sessionstore;1"].
+                             getService(Components.interfaces.nsISessionStore);
+ var currentTab = getBrowser().selectedTab;
+ deleteTabValue(currentTab, "nombre-llave-aqui");
+
+

Comentarios

+

El guardado de valores de la ventana y las funciones de restauración, funcionan exactamente como las funciones basadas en pestañas con nombres similares.

+

Ver También:

+

nsISessionStore

+

diff --git a/files/es/archive/add-ons/index.html b/files/es/archive/add-ons/index.html new file mode 100644 index 0000000000..d1851bd7ee --- /dev/null +++ b/files/es/archive/add-ons/index.html @@ -0,0 +1,8 @@ +--- +title: Add-ons +slug: Archive/Add-ons +translation_of: Archive/Add-ons +--- +

In progress. Archived add-ons documentation.

+ +

diff --git a/files/es/archive/add-ons/observer_notifications/index.html b/files/es/archive/add-ons/observer_notifications/index.html new file mode 100644 index 0000000000..571cebc9d4 --- /dev/null +++ b/files/es/archive/add-ons/observer_notifications/index.html @@ -0,0 +1,155 @@ +--- +title: Notificaciones Observer +slug: Archive/Add-ons/Observer_Notifications +translation_of: Mozilla/Tech/XPCOM/Observer_Notifications +--- +

+

« AnteriorSiguiente »

+

+ +

Sometimes you need your code to send a message to other parts of your code. For example, you might want to notify that a task is completed, and then several different actions must be performed. You could do that by calling all those functions directly, but XPCOM offers you a better and cleaner way to achieve that using observers and the observer service.

+ +

An observer is an object that is responsible to observe (wait for) notifications and then to carry out subsequent actions. To create an observer, you need to implement the nsIObserver interface. The interface has only one method observe() which takes three parameters. The first parameter (subject) can be any XPCOM object, the second parameter is a notification topic, and the final parameter is a string that further describes the notification.

+ +

This example code shows you what an implementation of the nsIObserver interface looks like:

+ +
+
+
let testObserver = {
+  observe : function(aSubject, aTopic, aData) {
+    if (aTopic == "xulschoolhello-test-topic") {
+      window.alert("Data received: " + aData);
+    }
+  }
+}
+
+
+ +

In order for this observer to work, you need to use the observer service that provides methods for you to add, remove, notify and enumerate observers.

+ +

Adding an observer to the observer service is simple, invoking the addObserver method with three parameters. The first parameter is an observer object, the second parameter is a notification topic, and the third parameter is a boolean which indicates whether the observer service should hold a weak reference to the observer. You should normally set the third parameter to false.

+ +
+
+
let observerService = Components.classes["@mozilla.org/observer-service;1"].
+    getService(Components.interfaces.nsIObserverService);
+
+observerService.addObserver(testObserver, "xulschoolhello-test-topic", false);
+
+
+ +
+
+
You should come up with a notification topic that is unique so you know it will not conflict with Firefox or other extensions topics.
+
+
+ +

To remove an observer for a specific topic, you use the removeObserver method. The method takes the observer object and notification topic as parameters.

+ +
+
+
observerService.removeObserver(testObserver, "xulschoolhello-test-topic");
+
+
+ +

After you have registered some observers to listen to a notification topic, you can then use the notifyObservers method to send a notification to all of them. The method takes three parameters. The first parameter can be any XPCOM object to pass to those observers (can be null), the second parameter is the notification topic and the last parameter is an additional string to pass to those observers (can be null).

+ +
+
+
observerService.notifyObservers(null, "xulschoolhello-test-topic", "hello");
+
+
+ +

Non-chrome to chrome communication

+ +

Non-chrome to chrome communication is one of the main uses of observers. By non-chrome we mean JavaScript Code Modules or XPCOM. As we saw in previous sections, you can use JavaScript Code Module and XPCOM objects very easily from the chrome. But given that chrome is window-dependent and non-chrome objects are not, it's tricky to send a message to the chrome. You would have to invoke a method for the chrome objects in all windows. It's much easier to use observers in this case.

+ +

Let's see the following example code on how to send out a notification from non-chrome code.

+ +
+
+
/**
+ * Notifies all the registered observers with the test notification topic.
+ */
+notifyTest : function() {
+  let observerService = Components.classes["@mozilla.org/observer-service;1"].
+      getService(Components.interfaces.nsIObserverService);
+  let subject = Components.classes["@mozilla.org/supports-string;1"].
+      createInstance(Components.interfaces.nsISupportsString);
+
+  // assign some text to data attribute
+  subject.data = "This is a test.";
+  // notify all registered observers
+  observerService.notifyObservers(
+    subject, "xulschoolhello-test-topic", "hello");
+}
+
+
+ +

In the notifyTest method, the notifyObservers call is used to notify all registered observers about the notification topic "xs-hw-test-topic". The input parameter is an instance of nsISupportsString with some text and the last input parameter is a string "Hello".

+ +

In a chrome browser overlay file, we register an observer to listen to the notification topic "xs-hw-test-topic" when the window loads. Keep in mind that you have to remove observers that are not longer needed. Not doing so will result in memory leaks. Therefore, the registered observer is unregistered when the browser window is unloaded.

+ +
+
+
/**
+ * Controls the browser overlay for the Hello World extension.
+ */
+XULSchoolChrome.BrowserOverlay = {
+  /* Observer service. */
+  _observerService : null,
+
+  /**
+   * Initializes this object.
+   */
+  init : function() {
+    this._observerService = Components.classes["@mozilla.org/observer-service;1"].
+       getService(Components.interfaces.nsIObserverService);
+    this._observerService.addObserver(this, "xulschoolhello-test-topic", false);
+  },
+
+  /**
+   * Unitializes this object.
+   */
+  uninit : function() {
+    this._observerService.removeObserver(
+      this, "xulschoolhello-test-topic");
+  },
+
+  /**
+   * Observes the registered notification topics.
+   * @param aSubject The nsISupports object associated with the notification.
+   * @param aTopic The notification topic.
+   * @param aData The additional string associated with the notification.
+   */
+  observe : function(aSubject, aTopic, aData) {
+    if (aTopic == "xulschoolhello-test-topic") {
+      aSubject.QueryInterface(Ci.nsISupportsString);
+      window.alert("Subject: " + aSubject.data);  // => "This is a test"
+      window.alert("Data: " + aData);  // => "Hello"
+    }
+  }
+}
+
+window.addEventListener(
+  "load", function() { XULSchoolChrome.BrowserOverlay.init(); }, false);
+window.addEventListener(
+  "unload", function() { XULSchoolChrome.BrowserOverlay.uninit(); }, false);
+
+
+ +

In the observe method the notification topic is verified because you can have one observer listening to several topics. You may notice that we explicitly set the interface of the aSubject object to nsISupportsString using the QueryInterface method. This is because the first parameter of the observe method is typed as nsISupports (the generic interface, as seen before), therefore its properties and methods cannot be accessed unless the correct interface is set to it.

+ +

When the notifyTest method is called, all observers registered with xulschoolhello-test-topic will get notified and display two alerts. If there are 2 Firefox windows open, the observer will be notified in both and the alerts will show up on both.

+ +

You can always listen for multiple notification topics using the same observer. Also, be careful not to add the same observer to a notification topic more than once, otherwise the same code in the observer will be run several times when a notification is sent.

+ +

Useful Firefox notifications

+ +

We have covered sending and receiving custom notification topics using observers and the observer service. In Firefox, there are many built-in observer topics that you can observe as well. The Observer Notifications page lists some useful topics and is definitely worth spending time studying it.

+ +

+

« AnteriorSiguiente »

+

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git "a/files/es/archive/add-ons/permitir_sugerencias_en_los_plugins_de_b\303\272squeda/index.html" "b/files/es/archive/add-ons/permitir_sugerencias_en_los_plugins_de_b\303\272squeda/index.html" new file mode 100644 index 0000000000..7e5d1f33de --- /dev/null +++ "b/files/es/archive/add-ons/permitir_sugerencias_en_los_plugins_de_b\303\272squeda/index.html" @@ -0,0 +1,54 @@ +--- +title: Permitir sugerencias en los plugins de búsqueda +slug: Archive/Add-ons/Permitir_sugerencias_en_los_plugins_de_búsqueda +tags: + - Plugins_de_búsqueda +translation_of: Archive/Add-ons/Supporting_search_suggestions_in_search_plugins +--- +

MozSearch admite sugerencias mientras el usuario escribe el la barra de búsqueda, Firefox 2 pregunta a la URL especificada por el plugins del motor de búsqueda para devolver sugerencias en tiempo real. +

Una vez que se ha obtenido la lista, se muestra en un cuadro emergente que aparece debajo de la barra de búsqueda, que permite al usuario seleccionar un término sugerido. Si el usuario continua escribiendo, se solicita una nueva lista de sugerencias al motor de búsqueda, y se muestra actualizada. +

Los plugins de Yahoo y Google incluidos en Firefox 2 admiten sugerencias de búsqueda. +

+

Implementar soporte para sugerencias en un plugin de búsqueda

+

Para soportar sugerencias, un plugin de búsquedaa necesita definir un elemento extra <Url> con su atributo type definido como "application/x-suggestions+json". (esto significa que los plugins con soporte para sugerencias tendrán dos elementos <Url>, siendo el otro la URL principal text/html.) +

Por ejemplo, el plugin de búsqueda de Yahoo tiene esta <Url>: +

+
<Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchTerms}"/>
+
+

Si el usuario escribe "fir" en la barra de búsqueda, y se detiene, Firefox insertará "fir" en el lugar de {searchTerms} y consultará esa URL: +

+
<Url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/>
+
+

Los resultados son usados para construir el diálogo con la lista de sugerencias. +

Lee Creación de plugins MozSearch para conocer mas sobre como implementar un plugin de búsqueda. +

+

Implementar las sugerencias en el servidor

+

La mayor parte del trabajo para manipular las sugerencias de búsqueda es realmente implementada en el lado del servidor. Si eres desarrollador web, y quieres soportar las sugerencias de búsqueda, necesitas implementar el soporte para devolver las sugerencias en JavaScript Object Notation (JSON) dado un termino de búsqueda. +

Cuando el navegador desea obtener posibles resultados de un término de búsqueda, envia una solicitud HTTP GET a la URL especificada por el elemento <Url>. +

Tu servidor debe entonces decidir que sugerencias debe ofrecer usando los medios que vea necesarios, y construyedo un JSON que consista en al menos dos, y como mucho cuatro, elementos: +

+
query string +
El primer elemento en el JSON es la cadena de búsqueda original. Esto permite a Firefox verificar que la sugerencia concuerda con el término de búsqueda actual. +
+
completion list +
Un array de los términos sugeridos. El array debe estar entre corchetes. Por ejemplo: <tt>["termino 1", "termino 2", "termino 3", "termino 4"]</tt> +
+
descriptions +
Este elemento opcional es un array de descripciones de cada sugerencia en la completion list. Esto puede ser cualquier información que el motor de búsqueda quiera devolver para que se muestre en el navegador, como el numero de resultados disponibles para dicha búsqueda. +
+
Las descripciones no son soportadas en Firefox 2, y son ignoradas si alguna es espeficificada.
+
query URLs +
Este elemento opcional es un array de URLs alternativas para cada sugerencia de la completion list. Por ejemplo, si quieres ofrecer un enlace a un mapa en vez de simplemente un resultado de búsqueda para una sugerencia, puedes devolver una URL a un mapa en este array. +
+
Si no especificas una URL para la petición, la petición por defecto se manda por defecto al elemento <Url> definido en la descripción XML del plugin. +
+
Las query URLs no son soportadas en Firefox 2, y son ignoradas.
+

Por ejemplo, si el término a buscar es "fir", y no necesitas devolver descripciones o urls alternativas, puedes devolver el siguiente JSON: +

+
["fir", ["firefox", "first choice", "mozilla firefox"]]
+
+

Date cuenta que en este ejemplo, solo se especifican la query string y el completion array, sin especificar los elementos opcionales. +

Tu completion list puede incluir tantas sugerencias como quieras, aunque debe mantenerse manejable, dado que los datos se estarán actualizando en tiempo real mientras el usuario está escribiendo una palabra. Además, el método que usas para elegir las sugerencias depende de ti. +

+
+
diff --git "a/files/es/archive/add-ons/versionado,_actualizaci\303\263n_y_compatibilidad_de_extensiones/index.html" "b/files/es/archive/add-ons/versionado,_actualizaci\303\263n_y_compatibilidad_de_extensiones/index.html" new file mode 100644 index 0000000000..45a3a213ca --- /dev/null +++ "b/files/es/archive/add-ons/versionado,_actualizaci\303\263n_y_compatibilidad_de_extensiones/index.html" @@ -0,0 +1,295 @@ +--- +title: 'Versionado, actualización y compatibilidad de extensiones' +slug: 'Archive/Add-ons/Versionado,_actualización_y_compatibilidad_de_extensiones' +tags: + - Complementos + - Todas_las_Categorías + - extensiones + - páginas_a_traducir +translation_of: 'Archive/Add-ons/Extension_Versioning,_Update_and_Compatibility' +--- +

Las versiones de extensiones

+ +

Las extensiones deberán especificar su versión utilizando la herramienta para el formato de versión. En general son unas cadenas de caracteres cortadas por un punto, algunos ejemplos:

+ + + +

Como determinan la compatibilidad las aplicaciones

+ +

Al instalar extensiones/complementos las aplicaciones (programas) comprueban las entradas targetApplication en el archivo de instalación (install.rdf) de la extensión. La identificación (ID) de una entrada debe coincidir con la ID de la aplicación. Además, el número de versión de la aplicación debe encontrarse dentro del rango definido en minVersion y maxVersion.

+ +

Si la aplicación tiene una entrada targetApplication pero es para una versión incompatible, la aplicación intentará obtendrá información actualizada sobre su compatibilidad del archivo updateURL.

+ +

Si el archivo de instalación tiene entradas en targetPlatform, la plataforma utilizada para instalar la aplicación debe aparecer listada en ella o se cancelará la instalación.

+ +

En las aplicaciones basadas en Gecko 1.9 se puede utilizar una entrada targetApplication con una ID toolkit@mozilla.org; minVersion, y maxVersion que coincidan con la versión de la aplicación. Esto permitirá garantizar que la extensión se podrá instalar en cualquier aplicación basada en Toolkit.

+ +

Cancelar el control de compatibilidad

+ +

Para la evaluación de extensiones se puede hacer que la aplicación ignore los controles de compatibilidad durante la instalación. Lo único que hay que hacer es crear la preferencia extensions.checkCompatibility y darle valor False.

+ +

Antes de la versión 1.5 de Firefox, se podía utilizar la preferencia app.extensions.version para que la aplicación ignorase su versión e instalar así extensiones de otra forma incompatibles.

+ +

Elección de minVersion y maxVersion

+ +

minVersion y maxVersion deberían especificar las diferentes versiones de la aplicación que se han probado. No se debe introducir un valor maxVersion superior a la versión disponible ya que no se saben qué cambios podrían introducirse en su interfaz de programación (API) y de usuario. Con la actualización de compatibilidad no hace falta publicar una versión nueva completa de la extensión, sólo habrá que aumentar su maxVersion.

+ +

Generalmente, en maxVersion es permitido sustituir el número de versión secundario de la aplicación por un asterisco '*', por ejemplo: 2.0.0.* significaría que admite cualquier actualización secundaria de la versión 2 de la aplicación. Normalmente, la aplicación suele sugerir al autor de extensiones con qué parte de la versión conviene más hacer lo antedicho.

+ +

El asterisco '*' no representa una versión por sí mismo. En realidad el * representa un número infinitamente alto, por lo que es más sensato usarlo en maxVersion que en minVersion ya que no suele producir el efecto deseado.

+ +

Comprobación automática de actualización de extensiones

+ +

Periódicamente, las aplicaciones buscarán actualizaciones de las extensiones instaladas recuperando el archivo updateURL. La información recuperada puede servir para notificar al usuario que existe una actualización de la extensión e informar a la aplicación de las nuevas versiones compatibles con la extensión.

+ +

Actualizaciones de compatibilidad

+ +

Durante la comprobación automática de actualizaciones, las aplicaciones buscan nuevas versiones e información actualizada sobre la compatibilidad de la versión instalada de una extensión. Esto quiere decir que si el manifiesto de la actualización incluye una entrada para la versión actual de la extensión instalada y el targetApplication de la entrada especifica un maxVersion mayor, la aplicación utilizará este valor en lugar del especificado en el archivo install.rdf de la extensión. Esto puede causar que se activen extensiones que estaban desactivadas por ser incompatibles y que se instalen aquellas que normalmente no se instalarían.

+ +

Formato RDF de actualización

+ +

Si alberga uno mismo el archivo updateURL del complemento será necesario devolver la información de la versión en un formato RDF. Encontrará un ejemplo de manifiesto de actualización más abajo. Muestra información sobre dos versiones diferentes de la extensión para la 'id' foobar@developer.mozilla.org. Las versiones incluidas son 2.2 y 2.5, y cada una especifica la compatibilidad con las versiones de Firefox 1.5 a 2.0.0.*. Para la versión 2.2 se utiliza un enlace de actualización https mientras que para la 2.5 es un enlace regular http con un 'hash' para verificar el archivo recuperado.

+ +

Es importante recuperar correctamente la descripción RDF inicial del atributo 'about'. Permite saber de que complemento se trata:

+ + + +

urn:mozilla:theme:<id>

+ + + +

En cualquiera de los ejemplos siguientes, la secuencia ordenada de las versiones dentro del elemento <RDF:Seq> es importante, con las versiones más nuevas después que las más antiguas. No hay que escribir todas las versiones intermedias si la última es suministrada.

+ +
<?xml version="1.0" encoding="UTF-8"?>
+
+<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <!-- Esta forma de descripción incluye toda la
+       información de actualización y compatibilidad
+       para un simple complemento con la id
+       foobar@developer.mozilla.org.
+       Un único archivo RDF admite listados con
+       información de varios complementos. -->
+  <RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org">
+    <em:updates>
+      <RDF:Seq>
+
+        <!-- Cada "li" es una versión diferente
+             del mismo complemento -->
+        <RDF:li>
+          <RDF:Description>
+            <em:version>2.2</em:version> <!-- Esto
+           es el número de la versión del complemento -->
+
+            <!-- Un targetApplication para cada aplicación
+                 compatible con el complemento -->
+            <em:targetApplication>
+              <RDF:Description>
+                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+                <em:minVersion>1.5</em:minVersion>
+                <em:maxVersion>2.0.0.*</em:maxVersion>
+
+                <!-- Dice donde hay que ir para descargar
+                     esa versión del complemento -->
+                <em:updateLink>https://www.mysite.com/foobar2.2.xpi</em:updateLink>
+
+                <!-- Una página sobre lo nuevo
+                     de esta actualización -->
+                <em:updateInfoURL>http://www.mysite.com/updateinfo2.2.xhtml</em:updateInfoURL>
+              </RDF:Description>
+            </em:targetApplication>
+          </RDF:Description>
+        </RDF:li>
+
+        <RDF:li>
+          <RDF:Description>
+            <em:version>2.5</em:version>
+            <em:targetApplication>
+              <RDF:Description>
+                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+                <em:minVersion>1.5</em:minVersion>
+                <em:maxVersion>2.0.0.*</em:maxVersion>
+                <em:updateLink>http://www.mysite.com/foobar2.5.xpi</em:updateLink>
+                <um:updateHash>sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6</em:updateHash>
+              </RDF:Description>
+            </em:targetApplication>
+          </RDF:Description>
+        </RDF:li>
+
+      </RDF:Seq>
+    </em:updates>
+
+    <!-- Una firma sólo es necesaria en el caso de haber
+         incluido un 'updateKey' en el archivo de
+         instalación 'install.rdf' del complemento. -->
+    <em:signature>MIGTMA0GCSqGSIb3DQEBBQUAA4GBAMO1O2gwSCCth1GwYMgscfaNakpN40PJfOWt
+                  ub2HVdg8+OXMciF8d/9eVWm8eH/IxuxyZlmRZTs3O5tv9eWAY5uBCtqDf1WgTsGk
+                  jrgZow1fITkZI7w0//C8eKdMLAtGueGfNs2IlTd5P/0KH/hf1rPc1wUqEqKCd4+L
+                  BcVq13ad</em:signature>
+  </RDF:Description>
+</RDF:RDF>
+
+ +

Mucha gente prefiere este formato alternativo (se ha quitado mucha información en este ejemplo para ver mejor la estructura básica):

+ +
<?xml version="1.0" encoding="UTF-8"?>
+
+<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <!-- Esta forma de descripción incluye toda la
+       información de actualización y compatibilidad
+       para un simple complemento con la id
+       foobar@developer.mozilla.org.
+       Un único archivo RDF admite listados con
+       información de varios complementos. -->
+  <RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org">
+    <em:updates>
+      <RDF:Seq>
+        <!-- El atributo de recurso apunta a una entrada
+             de descripción 'about' que está más abajo.
+             La uri actual puede ser cualquier cosa -->
+        <RDF:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.2"/>
+        <RDF:li resource="urn:mozilla:extension:foobar@developer.mozilla.org:2.5"/>
+      </RDF:Seq>
+    </em:updates>
+    <em:signature>MIGTMA0GCSqGSIb3DQEBBQUAA4GBAMO1O2gwSCCth1GwYMgscfaNakpN40PJfOWt
+                  ub2HVdg8+OXMciF8d/9eVWm8eH/IxuxyZlmRZTs3O5tv9eWAY5uBCtqDf1WgTsGk
+                  jrgZow1fITkZI7w0//C8eKdMLAtGueGfNs2IlTd5P/0KH/hf1rPc1wUqEqKCd4+L
+                  BcVq13ad</em:signature>
+  </RDF:Description>
+
+  <!-- Esto es lo mismo que la descripción con
+       'li' del ejemplo anterior -->
+  <RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.2">
+    <em:version>2.2</em:version>
+
+    <!-- El contenido de esta parte se ha quitado -->
+
+  </RDF:Description>
+  <RDF:Description about="urn:mozilla:extension:foobar@developer.mozilla.org:2.5">
+    <em:version>2.5</em:version>
+
+    <!-- El contenido de esta parte se ha quitado -->
+
+  </RDF:Description>
+</RDF:RDF>
+
+ +

Facilitar detalles sobre las actualizaciones

+ +

+ +

En general

+ +

Podemos dar a conocer a los usuarios las novedades incluidas en la versión actualizada de nuestro complemento. El usuario al recibir una notificación de que hay una nueva versión puede ver de un vistazo esa información que contiene las mejoras y los arreglos de cualquier problema de seguridad.

+ +

Para que así sea, hay que agregar una entrada updateInfoURL en el manifiesto de actualización (ver el ejemplo de encima). La página de esta URL será recuperada y mostrada, al usuario, fuera del contexto normal de una página web por lo cual su contenido es mucho más "limpio", lo que significa que hay muy pocas opciones de formatos y que las secuencias de órdenes e imágenes no están permitidas. Como regla general, sólo se admite el uso de las etiquetas siguientes (cualquier otra cosa se ignorará):

+ + + +

Dentro de las listas se usará la etiqueta habitual 'li' para cada ítem de la lista.

+ +

Dentro de las etiquetas 'h1', 'h2', 'h3', 'p' y 'li' se utilizará:

+ + + +

La página de información recuperada debe ser completamente válida en XHTML, y entregada con el tipo MIME application/xhtml+xml.

+ +

Para poder personalizar el texto según la configuración regional/local del usuario se colocará %APP_LOCALE% en updateInfoURL para que esta información esté incluida en la URL, o bien cualquier otras cadenas de substitución admitidas por updateURL, pero no es tan funcional.

+ +

Lo que ve el usuario final

+ +

El contenido de updateInfoURL será mostrado al usuario en una pantalla del complemento, con una lista de todas las actualizaciones disponibles. Entonces, el usuario puede hacer clic en el botón "Mostrar la información" y la verá a la derecha. (El botón cambiará a "Esconder la información")

+ +

Image:Example_updateInfoURL2.PNG

+ +

Asegurando las actualizaciones

+ +

+ +

Gecko 1.9 has added additional requirements designed to protect users from man-in-the-middle attacks and the like during add-on updates. In the install.rdf of the already installed add-on updateURL must be specified in one of the following ways:

+ + + +

Si se especifica una actualización de clave/firma (updateKey) en el archivo de instalación ( install.rdf), hay que incluir una firma digital en el manifiesto de actualización sino la información será rechazada.

+ +

In the update manifest delivered from the updateURL the updateLink must be specified in one of the following ways:

+ + + +

Any entries in the update manifest that do not meet one of those two requirements will be ignored when checking for new versions.

+ +

Note that https links to sites with invalid certificates or that redirect to http sites will fail for both the update.rdf and updateLink cases.

+ +

Los cifrados de actualización

+ +

Al fin de verificar la integridad del XPI descargado se puede proveer una entrada updateHash (cifrado de actualización) junto a updateLink. Este debe ser un cifrado generado desde los datos del fichero según un algoritmo admitido ('sha1', 'sha256', 'sha384' y 'sha512'). El algoritmo de cifrado utilizado debe anteponerse y separarse del cifrado en sí con ':'.

+ +
  <em:updateHash>sha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6</em:updateHash>
+
+ +

El valor updateHash, debe empezar con la cadena del algoritmo de cifrado, es un error común quitar ese prefijo al poner un valor nuevo en updateHash:\nsha1:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e6"

+ +

Además el cifrado del archivo descargado y el cifrado especificado también deben coincidir, sino dará un error.

+ +

Varias herramientas permiten generar un cifrado:

+ +

Diversas variantes de Unix incluyen: sha1sum, sha256sum y demás. Los usuarios de Windows pueden utilizar HashTab para un uso interactivo (fuera de compilación). Tienen también las utilidades para Win (aparte de los clásicos como Cygwin), las cuales son buenas para un uso no-interactivo:

+ +
sha1sum ARCHIVO
+
+ +

Además de md5deep que es múlti-plataforma

+ +
sha1deep FILE
+
+ +

OpenSSL también genera cifrado:

+ +
openssl sha1 FILE
+
+ +

Para los usuarios de Windows, HashTab es una extensión shell... un simple clic da valores de cifrado para cualquier archivo.

+ +

Aquí hay además un bug de mejoras sobre como insertar a McCoy la generación automática de cifrado en archivos XPI.

+ +

Y todos los lenguajes (de programación) populares lo ofrecen, por ejemplo: Python, Perl: CPAN Digest, PHP

+ +

Firmar el manifiesto de actualización

+ +

+ +

If you wish to serve your update RDF over regular http, Gecko 1.9 based applications will require that you digitally sign the update manifest to ensure that it's information isn't tampered with between you creating it and applications retrieving it. The McCoy tool should be used to sign the update RDF.

+ +

The technical details of the signing mechanism are beyond the scope of this document however the basics are as follows:

+ +

The add-on author creates a public/private RSA cryptographic key pair.

+ +

The public part of the key is DER encoded and then base 64 encoded and added to the add-on's install.rdf as an updateKey entry.

+ +

When the author creates the update rdf file a tool is used to sign it using the private part of the key. Roughly speaking the update information is converted to a string, then hashed using a sha512 hashing algorithm and this hash is signed using the private key. The resultant data is DER encoded then base 64 encoded for inclusion in the update rdf as an em:signature entry.

diff --git a/files/es/archive/api/index.html b/files/es/archive/api/index.html new file mode 100644 index 0000000000..02c6cf7eab --- /dev/null +++ b/files/es/archive/api/index.html @@ -0,0 +1,13 @@ +--- +title: API +slug: Archive/API +tags: + - API + - Archive + - NeedsTranslation + - TopicStub +translation_of: Archive/API +--- +

In progress. Archived documentation about obsolete web standards APIs.

+ +

Navigator
In progress. Features that used to hang off the Navigator interface, but have since been removed.

diff --git a/files/es/archive/api/navigator/index.html b/files/es/archive/api/navigator/index.html new file mode 100644 index 0000000000..37284b83b6 --- /dev/null +++ b/files/es/archive/api/navigator/index.html @@ -0,0 +1,8 @@ +--- +title: Navigator +slug: Archive/API/Navigator +translation_of: Archive/API/Navigator +--- +

In progress. Features that used to hang off the Navigator interface, but have since been removed.

+ +

diff --git a/files/es/archive/api/navigator/moznotification/index.html b/files/es/archive/api/navigator/moznotification/index.html new file mode 100644 index 0000000000..6cc45f16e6 --- /dev/null +++ b/files/es/archive/api/navigator/moznotification/index.html @@ -0,0 +1,64 @@ +--- +title: navigator.mozNotification +slug: Archive/API/Navigator/mozNotification +translation_of: Archive/API/Navigator/mozNotification +--- +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

Proporciona soporte para la creación de objetos notification, que son usados para mostrar alertas de notificaciones de escritorio al usuario. Actualmente, estos son admitidos sólamente en Firefox Mobile y Firefox OS. Vea Mostrar notificaciones para un ejemplo.

+ +

Resumen del método

+ + + + + + + +
notification createNotification(in DOMString title, in DOMString description, in DOMString iconURL Optional);
+ +

Métodos

+ +

createNotification()

+ +

Crea y devuelve un objeto notification que puede ser usado para mostrar el mensaje especificado con una URL opcional.

+ +
notification createNotification(
+  in DOMString title,
+  in DOMString description,
+  in DOMString iconURL Optional
+);
+
+ +
Parámetros
+ +
+
title
+
El título de la notificación.
+
description
+
El texto que se muestra en la notificación.
+
iconURL Optional
+
Un identificador URL de la imagen que se mostrará en la notificación.
+
+ +
Valor de retorno
+ +

Un nuevo objeto notification.

+ +

Permisos

+ +

Asegúrese de agregar en su archivo manifiesto el permiso "desktop-notification".

+ +
"permissions": {
+    "desktop-notification":{}
+}
+ +

Véase también

+ + diff --git a/files/es/archive/apps/advanced_topics/index.html b/files/es/archive/apps/advanced_topics/index.html new file mode 100644 index 0000000000..0db5a55e2b --- /dev/null +++ b/files/es/archive/apps/advanced_topics/index.html @@ -0,0 +1,74 @@ +--- +title: Temas avanzados +slug: Archive/Apps/Advanced_topics +translation_of: Archive/Apps/Advanced_topics +--- +

Este artículo provée información extra en temas más avanzados de Open Web Apps.

+
+

Documentación de arquitectura de apps

+
+
+ Arquitectura de web apps
+
+ Una revisión de la arquitectura detrás de los proyectos de Open Web Apps diseño e implementación.
+
+ Detalles específicos de la plataforma de instalación de apps
+
+ Hay algunas diferencias en cómo las apps son instaladas a través de varias plataformas que soportan Open Web Apps; este artículo te ayudará a entenderlas.
+
+ Open Web Apps para Android
+
+ Información acerca de instalar y testear Open Web Apps en un dispositivo Android.
+
+ Notas sobre el tiempo de ejecución de la App
+
+ Saca notas para las corridas y el funcionamiento en ejecución de las Web app para varias plataformas.
+
+

Otra documentación

+
+
+ Creando almacenamiento
+
+ Información qe podrá ser útil para ti si quieres compilar tu propio almacenamiento para la venta o distribución de las Open Web Apps.
+
+

Ver todo...

+
+
+

Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+
+

 

diff --git a/files/es/archive/apps/index.html b/files/es/archive/apps/index.html new file mode 100644 index 0000000000..10bb499435 --- /dev/null +++ b/files/es/archive/apps/index.html @@ -0,0 +1,8 @@ +--- +title: Apps +slug: Archive/Apps +translation_of: Archive/Apps +--- +

In progress. This page includes archived content for Apps, including obsolete web app content, Firefox OS app-related content, etc.

+ +

diff --git a/files/es/archive/b2g_os/api/callevent/index.html b/files/es/archive/b2g_os/api/callevent/index.html new file mode 100644 index 0000000000..ceb6219d5a --- /dev/null +++ b/files/es/archive/b2g_os/api/callevent/index.html @@ -0,0 +1,117 @@ +--- +title: CallEvent +slug: Archive/B2G_OS/API/CallEvent +translation_of: Archive/B2G_OS/API/CallEvent +--- +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

+

This API is available on Firefox OS for internal applications only.

+

+ +

Resumen

+ +

El DOM CallEvent representa eventos relacionados con las llamadas telefonicas.

+ +

Propiedades

+ +
+
CallEvent.call Read only
+
Un objeto TelephonyCall representa la llamada de la que se originó el evento.
+
+ +

Especificaciones

+ +

No es una implementacion estandar, pero se dicote en el W3C como parte del Grupo de trabajo de aplicaciones del sistema.

+ + + + + + + + + + + + + + + + +
EspecificacionEstatusComentario
Web TelephonyDraftEditor Draft (WIP).
+ +

Compatibilidad de navegador

+ +

Por razones obvias, el apoyo se espera principalmente en los navegadores móviles.

+ +

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basicoSin soporteSin soporteSin soporteSin soporteSin soporte
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte basicoSin soporte12.0 (12.0)Sin soporteSin soporteSin soporte
+
+ +

Ver también

+ + diff --git a/files/es/archive/b2g_os/api/cameramanager/getcamera/index.html b/files/es/archive/b2g_os/api/cameramanager/getcamera/index.html new file mode 100644 index 0000000000..605e8229b7 --- /dev/null +++ b/files/es/archive/b2g_os/api/cameramanager/getcamera/index.html @@ -0,0 +1,126 @@ +--- +title: CameraManager.getCamera() +slug: Archive/B2G_OS/API/CameraManager/getCamera +translation_of: Archive/B2G_OS/API/CameraManager/getCamera +--- +
+

This API is available on Firefox OS for privileged or certified applications only.

+
+ +

Resumen

+ +

Este método es usado para acceder a una de las camaras validas en el dispositivo basado en el identificador. Puedes obtener una lista de las camaras validas para ser llamadas por el método CameraManager.getListOfCameras() .

+ +

Sintaxis (pre Firefox OS 2.2)

+ +
CameraManager.getCamera(camera, cameraConfiguration, onsuccess[, onerror]);
+ +

Parametros

+ +
+
camera
+
Especifica la camara que desea usarse (el dispositivo puede tener mas de una camara).
+
cameraConfiguration
+
Un objeto permite al conjunto de opciones de la camara por esta camara: mode, previewSize y recorderProfile
+
onsuccess
+
una función de llamada que toma un objeto CameraControl como parametro.
+
onerror
+
Una opcional función de llamada que acepta una cadena de error como un parametro.
+
+ +

Ejemplo

+ +
var options = {
+  mode: 'picture',
+  recorderProfile: 'jpg',
+  previewSize: {
+    width: 352,
+    height: 288
+  }
+};
+
+var camera = navigator.mozCameras.getListOfCameras()[0];
+
+function onSuccess(camera) {
+  // Do stuff with the camera
+};
+
+function onError(error) {
+  console.warn(error);
+};
+
+navigator.mozCameras.getCamera(camera, options, onSuccess, onError);
+
+ +

Sintaxis (Firefox OS 2.2+)

+ +
Promise CameraManager.getCamera(camera, cameraConfiguration);
+ +

Parametros

+ +
+
camera
+
Especifica la camara que deseas usar (El dispositivo puede tener mas de una camara).
+
cameraConfiguration
+
Un objeto permite al conjunto de opciones de la camara por esta camara: mode, previewSize y recorderProfile
+
+ +

Valor de retorno

+ +

retorna un Promise.  La función Promise's .then() acepta dos argumentos en la función:

+ +
+
onsuccess
+
Una función de llamada que toma un objeto como parametro. Este objeto tiene la propiedad camara como objeto CameraControl y la configuracion de la propiedad como actual cameraConfiguration del dispositivo.
+
onerror
+
Una opcional función de llamada que acepta una cadena de error como un parametro.
+
+ +

Ejemplo

+ +
var options = {
+  mode: 'picture',
+  recorderProfile: 'jpg',
+  previewSize: {
+    width: 352,
+    height: 288
+  }
+};
+
+var camera = navigator.mozCameras.getListOfCameras()[0];
+
+function onSuccess(cameraObj) {
+  var cameraControl = cameraObj.camera;
+  // Do stuff with the cameraControl
+};
+
+function onError(error) {
+  console.warn(error);
+};
+
+navigator.mozCameras.getCamera(camera, options).then(onSuccess, onError);
+
+ +

Especificaciones

+ +

no forma parte de cualquier especificación aun; este propablemente será reemplazado por  WebRTC cuando este gane mas soporte generalizado en dispositivos moviles .

+ +

Permisos

+ +

Hasta Firefox OS 1.4, la api de la camara es una api certificada, pero no es accesible para aplicaciones  de tercera partes. Para Firefox OS 2.0 en adelante, el nivel de permisos han sido degradado a privilegiado, pero este es ahora valido para desarrolladores  que usen en sus aplicaciones.

+ +
"type": "privileged"
+ +
"permissions": {
+  "camera": {
+    "description": "Required for accessing cameras on the device."
+  }
+}
+ +

Ver también

+ + diff --git a/files/es/archive/b2g_os/api/cameramanager/index.html b/files/es/archive/b2g_os/api/cameramanager/index.html new file mode 100644 index 0000000000..492feb0803 --- /dev/null +++ b/files/es/archive/b2g_os/api/cameramanager/index.html @@ -0,0 +1,62 @@ +--- +title: CameraManager +slug: Archive/B2G_OS/API/CameraManager +tags: + - API + - B2G + - Certified Only + - DOM + - DOM Reference + - Firefox OS + - Graphics + - JavaScript + - NeedsTranslation + - Non-standard + - Reference + - Référence(2) + - TopicStub + - WebAPI + - camera +translation_of: Archive/B2G_OS/API/CameraManager +--- +

+ +

+

This API is available on Firefox OS for privileged or certified applications only.

+

+ +

The CameraManager interface provides access to any cameras available on the device being used.

+ +

Properties

+ +

This interface doesn't implements, nor inherits any property.

+ +

Methods

+ +
+
CameraManager.getCamera()
+
Gets a camera instance based on its identifier.
+
CameraManager.getListOfCameras()
+
Returns an Array of all camera identifiers available on the device.
+
+ +

Specification

+ +

Not part of any specification as yet; this will probably be replaced by WebRTC when it gains more widespread support on mobile devices.

+ +

Permissions

+ +

Up until Firefox OS 1.4, The Camera API was a certified API, so not accessible to third party apps. From Firefox OS 2.0 onwards, the permission level has been downgraded to privileged, so it is now available for developers to use in their apps.

+ +
"permissions": {
+  "camera": {
+    "description": "Required for accessing cameras on the device."
+  }
+}

+ +

See also

+ + diff --git a/files/es/archive/b2g_os/api/index.html b/files/es/archive/b2g_os/api/index.html new file mode 100644 index 0000000000..8826729643 --- /dev/null +++ b/files/es/archive/b2g_os/api/index.html @@ -0,0 +1,120 @@ +--- +title: Firefox OS APIs +slug: Archive/B2G_OS/API +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/API +--- +

+ +

This page lists all Firefox OS-specific APIs.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

diff --git a/files/es/archive/b2g_os/api/mozactivity/index.html b/files/es/archive/b2g_os/api/mozactivity/index.html new file mode 100644 index 0000000000..d3fb6a28fe --- /dev/null +++ b/files/es/archive/b2g_os/api/mozactivity/index.html @@ -0,0 +1,69 @@ +--- +title: MozActivity +slug: Archive/B2G_OS/API/MozActivity +translation_of: Archive/B2G_OS/API/MozActivity +--- +

+

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+

+

This API is available on Firefox or Firefox OS for installed or higher privileged applications.

+

+

Summary

+

The MozActivity interface allows apps to delegate an activity to another app.

+

This interface fully inherits from the DOMRequest interface excepts that it has a constructor that it takes a MozActivityOptions as a parameter.

+
+

Note: As soon as a MozActivity is instentiated, the system will prompt the user to choose an activity handler. It's not possible to instentiate an activity and wait to use it.

+
+

Properties

+

Inherited from DOMRequest:

+

+
DOMRequest.onsuccess
+
A callback handler called when the operation represented by the DOMRequest is completed.
+
DOMRequest.onerror
+
A callback handler that gets called when an error occurs while processing the operation.
+
DOMRequest.readyState
+
A string indicating whether or not the operation is finished running. Its value is either "done" or "pending".
+
DOMRequest.result
+
The operation's result.
+
DOMRequest.error
+
Error information, if any.
+

+
+
+

Methods

+

None.

+

Example

+
var activity = new MozActivity({
+  // The name of the activity the app wants to delegate the action
+  name: "pick",
+
+  // Data requierd by the activity. Each application acting as an activity handler
+  // can have it's own requirement for the activity. If the data does not fulfill
+  // all the requirement of any activity handler, the error event will be sent
+  // otherwise, the event sent depend on the activity handler itself.
+  data: {
+    type: "image/jpeg"
+  }
+});
+
+activity.onsuccess = function() {
+  console.log("Activity successfuly handled");
+
+  var imgSrc = this.result.blob;
+}
+
+activity.onerror = function() {
+  console.log("The activity encouter en error: " + this.error);
+}
+
+

Specification

+

Web Activities is not part of any specification. However, it has some overlap with the proposed Web Intents specification. Mozilla actually proposed Web Activities as a counter proposal to Web Intents. For more information about this, see discussion on the Web Intents Task Force ML.

+

See also

+ diff --git a/files/es/archive/b2g_os/api/mozvoicemailstatus/index.html b/files/es/archive/b2g_os/api/mozvoicemailstatus/index.html new file mode 100644 index 0000000000..b00c181193 --- /dev/null +++ b/files/es/archive/b2g_os/api/mozvoicemailstatus/index.html @@ -0,0 +1,67 @@ +--- +title: MozVoicemailStatus +slug: Archive/B2G_OS/API/MozVoicemailStatus +translation_of: Archive/B2G_OS/API/MozVoicemailStatus +--- + + +
+

This API is available on Firefox OS for internal applications only.

+
+ + + +

Summary

+ +

The MozVoicemailStatus API provides access to a voicemail status.

+ +

Interface overview

+ +
interface MozVoicemailStatus
+{
+  readonly attribute unsigned long serviceId;
+  readonly attribute boolean hasMessage;
+  readonly attribute long messageCount;
+  readonly attribute DOMString returnNumber;
+  readonly attribute DOMString returnMessage;
+};
+ +

Properties

+ +
+
MozVoicemailStatus.serviceId Read only
+
A number indicating the voicemail service ID.
+
MozVoicemailStatus.hasMessage Read only
+
A boolean indicating if there are messages available within the voicemail box.
+
MozVoicemailStatus.messageCount Read only
+
A number indicating the total message count.
+
MozVoicemailStatus.returnNumber Read only
+
A string representing the return call number for the voicemail status.
+
MozVoicemailStatus.returnMessage Read only
+
A string representing a displayable return call message for the voicemail status.
+
+ +

Methods

+ +

None.

+ +

Specification

+ +

Not part of any specification yet.

+ +

See also

+ + diff --git a/files/es/archive/b2g_os/api/navigator/index.html b/files/es/archive/b2g_os/api/navigator/index.html new file mode 100644 index 0000000000..1760c18acd --- /dev/null +++ b/files/es/archive/b2g_os/api/navigator/index.html @@ -0,0 +1,12 @@ +--- +title: Navigator (Firefox OS extensions) +slug: Archive/B2G_OS/API/Navigator +translation_of: Archive/B2G_OS/API/Navigator +--- +

(es translation)

+ +

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. This page represents the list of properties and methods added to Navigator on Firefox OS devices. For the list of properties and methods available to any Web sites, consult Navigator.

+ +

A Navigator object can be retrieved using the read-only Window.navigator property.

+ +

Navigator.mozApps
Retorna un objecto Apps que puedes usar para instalar, manejar y controlar Open Web Apps en el navegador.
Navigator.mozTelephony
Devuelve un objeto  Telephony que se puede utilizar para iniciar y controlar las llamadas telefónicas del navegador.
window.navigator.mozAlarms
Retorna un objeto MozAlarmsManager que puede usar para programar notificaciones o aplicaciones que se inicien en un momento determinado.

diff --git a/files/es/archive/b2g_os/api/navigator/mozalarms/index.html b/files/es/archive/b2g_os/api/navigator/mozalarms/index.html new file mode 100644 index 0000000000..d83b3dc520 --- /dev/null +++ b/files/es/archive/b2g_os/api/navigator/mozalarms/index.html @@ -0,0 +1,116 @@ +--- +title: window.navigator.mozAlarms +slug: Archive/B2G_OS/API/Navigator/mozAlarms +translation_of: Archive/B2G_OS/API/Navigator/mozAlarms +--- +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

+

This API is available on Firefox or Firefox OS for installed or higher privileged applications.

+

+ +

Resumen

+ +

Retorna un objeto MozAlarmsManager que puede usar para programar notificaciones o aplicaciones que se inicien en un momento determinado.

+ +

Sintaxis

+ +
var alarms = window.navigator.mozAlarms;
+
+ +

Valor

+ +

navigator.mozAlarms es un objeto MozAlarmsManager.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
Web Alarms APIObsoleteDefine la extensión para el objeto navigator .
+ +

Compatibilidad de navegadores

+ +

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic supportSin soporteSin soporteSin soporteSin soporteSin soporte
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox OSFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic supportSin soporte1.0Sin soporteSin soporteSin soporteSin soporte
+
+ +

Nota de implementación en Gecko

+ +

Esta API es disponible actualmente solo en Firefox OS para cualquier aplicación instalada. La especificación actual para esta API no es considerada lo suficientemente estable como para utilizar sin prefijo actualmente.

+ +

Ver también

+ + diff --git a/files/es/archive/b2g_os/api/navigator/mozapps/index.html b/files/es/archive/b2g_os/api/navigator/mozapps/index.html new file mode 100644 index 0000000000..a0df89d37c --- /dev/null +++ b/files/es/archive/b2g_os/api/navigator/mozapps/index.html @@ -0,0 +1,96 @@ +--- +title: Navigator.mozApps +slug: Archive/B2G_OS/API/Navigator/mozApps +tags: + - API + - API de aplicaciones + - No estandar + - aplicaciones +translation_of: Archive/B2G_OS/API/Navigator/mozApps +--- +

+ +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

Descripción

+ +

Retorna un objecto Apps que puedes usar para instalar, manejar y controlar Open Web Apps en el navegador.

+ +

Sintaxis

+ +
var apps = window.navigator.mozApps;
+
+ +

Valor

+ +

navigator.mozApps es un objecto Apps que puedes usar para instalar, manejar y controlar Open Web Apps en el navegador.

+ +

Especificación

+ +

No es parte de ninguna especificación; implementado en Gecko en la base del error 697383.

+ +

Compatibilidad de navegadores

+ +

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico---11.0 (11.0)---------
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico---11.0 (11.0)---------
+
+ +

 

diff --git a/files/es/archive/b2g_os/api/navigator/moztelephony/index.html b/files/es/archive/b2g_os/api/navigator/moztelephony/index.html new file mode 100644 index 0000000000..9a67f43f5c --- /dev/null +++ b/files/es/archive/b2g_os/api/navigator/moztelephony/index.html @@ -0,0 +1,83 @@ +--- +title: Navigator.mozTelephony +slug: Archive/B2G_OS/API/Navigator/MozTelephony +translation_of: Archive/B2G_OS/API/Navigator/MozTelephony +--- +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

+

This API is available on Firefox OS for internal applications only.

+

+ +

Resumen

+ +

Devuelve un objeto  Telephony que se puede utilizar para iniciar y controlar las llamadas telefónicas del navegador.

+ +

Sintaxis

+ +
var phone = window.navigator.mozTelephony;
+
+ +

Valor

+ +

navigator.mozTelephony es un objeto de Telephony que se puede utilizar para controlar las funciones de teléfono del dispositivo en el que se está ejecutando el navegador.

+ +

Especificaciones

+ +

Esta es una implementación no estándar, pero se discute en el W3C como parte del Grupo de trabajo de aplicaciones del sistema.

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
Web TelephonyDraftEditor Draft (WIP).
+ +

Compatibilidad del navegador

+ +

Por razones obvias, el apoyo se espera principalmente en los navegadores móviles.

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte básicoSin soporte12.0 (12.0)Sin soporteSin soporteSin soporte
+
+ +

Ver también

+ + diff --git a/files/es/archive/b2g_os/api/telephony/index.html b/files/es/archive/b2g_os/api/telephony/index.html new file mode 100644 index 0000000000..840ff8fbe0 --- /dev/null +++ b/files/es/archive/b2g_os/api/telephony/index.html @@ -0,0 +1,141 @@ +--- +title: Telephony +slug: Archive/B2G_OS/API/Telephony +translation_of: Archive/B2G_OS/API/Telephony +--- +
+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+
+

This API is available on Firefox OS for internal applications only.

+
+ +

Resumen

+ +

Proporciona soporte para marcar, contestar y manejar llamadas de teléfono en un dispositivo con soporte de telefonía.

+ +

Propiedades

+ +
+
Telephony.active
+
Un objeto TelephonyCall indicanda la llamada que está activa en ese momento. La llamada activa es la que recibe la entrada del micrófono y cualquier tono generado utilizando el metodo Telephony.startTone().
+
Telephony.calls
+
Matriz de objetos TelephonyCall, uno para cada llamada que está conectado en ese momento.
+
Telephony.muted
+
Se establece en true para silenciar el micrófono o false para activar el micrófono.
+
Telephony.speakerEnabled
+
Se establece en true para habilitar la funcionalidad de altavoz o false para desactivarla.
+
+ +

Manejo de eventos

+ +
+
Telephony.oncallschanged
+
Un controlador para el evento callschanged; este evento CallEvent se envía cada vez que la lista de llamadas presenta cambios.
+
Telephony.onincoming
+
Un controlador para el evento de entrada, lo que CallEvent envía cada vez que hay una nueva llamada entrante.
+
+ +

Metodos

+ +
+
Telephony.dial()
+
Marca el número de teléfono especificado, que se especifica como una cadena.
+
Telephony.startTone()
+
Comienza la generación del tono DTMF especificado.
+
Telephony.stopTone()
+
Detiene la generación del tono DTMF actualmente sonando.
+
+ +

Especificaciones

+ +

Esta es una implementación no estándar, pero se discute en el W3C como parte del Grupo de trabajo de aplicaciones del sistema.

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
Web TelephonyDraftEditor Draft (WIP).
+ +

Browser compatibility

+ +

Por razones obvias, el apoyo se espera principalmente en los navegadores móviles.

+ +

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básicoSin soporteSin soporteSin soporteSin soporteSin soporte
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte básicoSin soporte12.0 (12.0)Sin soporteSin soporteSin soporte
+
+ +

Ver también

+ + diff --git a/files/es/archive/b2g_os/api/telephonycall/hangup/index.html b/files/es/archive/b2g_os/api/telephonycall/hangup/index.html new file mode 100644 index 0000000000..1afab7cee9 --- /dev/null +++ b/files/es/archive/b2g_os/api/telephonycall/hangup/index.html @@ -0,0 +1,118 @@ +--- +title: TelephonyCall.hangUp +slug: Archive/B2G_OS/API/TelephonyCall/hangUp +translation_of: Archive/B2G_OS/API/TelephonyCall/hangUp +--- +

+ +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

+

This API is available on Firefox OS for internal applications only.

+

+ +

Resumen

+ +

Este método cuelga una llamada en curso.

+ +

Sintaxis

+ +
instanceOfTelephonyCall.hangUp();
+
+ +

Especificaciones

+ +

Esta es una implementación no estándar, pero se discute en el W3C como parte del Grupo de trabajo de aplicaciones del sistema.

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
Web TelephonyDraftEditor Draft (WIP).
+ +

Compatibilidad del navegador

+ +

Por razones obvias, el apoyo se espera principalmente en los navegadores móviles.

+ +

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basicoSin soporteSin soporteSin soporteSin soporteSin soporte
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte basicoSin soporte12.0 (12.0)Sin soporteSin soporteSin soporte
+
+ +

See also

+ + diff --git a/files/es/archive/b2g_os/api/telephonycall/index.html b/files/es/archive/b2g_os/api/telephonycall/index.html new file mode 100644 index 0000000000..118b5126fc --- /dev/null +++ b/files/es/archive/b2g_os/api/telephonycall/index.html @@ -0,0 +1,185 @@ +--- +title: TelephonyCall +slug: Archive/B2G_OS/API/TelephonyCall +translation_of: Archive/B2G_OS/API/TelephonyCall +--- +

+

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+

+

This API is available on Firefox OS for internal applications only.

+

+

Resumen

+

Representa una llamada telefonica, proporciona información sobre la llamada y ofreciendo mecanismos para controlar y detectar los cambios en su estado.

+

Propiedades

+
+
+ TelephonyCall.number Read only
+
+ Cadena que indica el número de teléfono correspondiente a la llamada.
+
+ TelephonyCall.state Read only
+
+ Una cadena que indica el estado de la llamada.
+
+

Controladores de eventos

+
+
+ TelephonyCall.onalerting
+
+ A function to be called when the call alerts. What does this mean?
+
+ TelephonyCall.onbusy
+
+ Una función que se llamará cuando se recibe una señal de ocupado al intentar marcar.
+
+ TelephonyCall.onconnected
+
+ Una función que se llamará una vez que se conecte la llamada.
+
+ TelephonyCall.onconnecting
+
+ Una función que se llamará después de marcar, a la espera de una conexión.
+
+ TelephonyCall.ondialing
+
+ Una función que se llamará cuando la llamada comienza a marcar el number.
+
+ TelephonyCall.ondisconnected
+
+ Una función que se llamará después de que la llamada haya terminado de desconectar.
+
+ TelephonyCall.ondisconnecting
+
+ Una función que se llamará cuando la llamada comienza a desconectar.
+
+ TelephonyCall.onincoming
+
+ Una función a llamar cuando se detecta una llamada entrante.
+
+ TelephonyCall.onstatechange
+
+ A function to be called when the state of the call changes.
+
+

Metodos

+
+
+ TelephonyCall.answer()
+
+ Responde a una llamada entrante
+
+ TelephonyCall.hangUp()
+
+ Cuelga la llamada
+
+ TelephonyCall.hold()
+
+ Permite poner una llamada en espera.
+
+ TelephonyCall.resume()
+
+ Permite recuperar una llamada en espera.
+
+

TelephonyCall también hereda métodos de EventTarget:

+

+
EventTarget.addEventListener()
+
Register an event handler of a specific event type on the EventTarget.
+
EventTarget.removeEventListener()
+
Removes an event listener from the EventTarget.
+
EventTarget.dispatchEvent()
+
Dispatch an event to this EventTarget.
+
+ +

Additional methods for Mozilla chrome code

+ +

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

+ +

+

Especificaciones

+

Se trata de una implementación no estándar, pero se está discutiendo en el W3C, como parte del Grupo de trabajo de aplicación del sistea.

+ + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
Web TelephonyDraftEditor Draft (WIP).
+

Compatibilidad de navegador

+

Por razones obvias, el apoyo se espera principalmente en los navegadores móviles.

+

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basicoSin soporteSin soporteSin soporteSin soporteSin soporte
+
+
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte basicoSin soporte12.0 (12.0)Sin soporteSin soporteSin soporte
+
+

Ver también

+ diff --git a/files/es/archive/b2g_os/api/telephonycall/number/index.html b/files/es/archive/b2g_os/api/telephonycall/number/index.html new file mode 100644 index 0000000000..7ac9efa096 --- /dev/null +++ b/files/es/archive/b2g_os/api/telephonycall/number/index.html @@ -0,0 +1,125 @@ +--- +title: TelephonyCall.number +slug: Archive/B2G_OS/API/TelephonyCall/number +translation_of: Archive/B2G_OS/API/TelephonyCall/number +--- +

+ +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

+

This API is available on Firefox OS for internal applications only.

+

+ +

Resumen

+ +

El número de teléfono asociado con una llamada telefónica. Solo lectura.

+ +

Sintaxis

+ +
var phoneNum = window.navigator.mozTelephony.number;
+
+ +

Valor

+ +


+ Una cadena (String) que indica el número asociado a la llamada. Esto puede ser o bien el número marcado durante una llamada saliente, o el número de teléfono informado por ID de llamada entrante.

+ +
Nota: El valor devuelto es probablemente "" para llamadas de personas con identificador de llamadas bloqueadas. ¡Esto es solo una conjetura! Por favor actualice esto cuando lo sepa a ciencia cierta.
+ +

Especificaciones

+ +

No es una implementacion estandar, pero se dicute en el W3C como parte del Grupo de trabajo de aplicaciones del sistema.

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
Web TelephonyDraftEditor Draft (WIP).
+ +

Compatibilidad de navegador

+ +

Por razones obvias, el apoyo se espera principalmente en los navegadores móviles.

+ +

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basicoSin soporteSin soporteSin soporteSin soporteSin soporte
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte basicoSin soporte12.0 (12.0)Sin soporteSin soporteSin soporte
+
+ +

See also

+ + diff --git a/files/es/archive/b2g_os/api/telephonycall/onincoming/index.html b/files/es/archive/b2g_os/api/telephonycall/onincoming/index.html new file mode 100644 index 0000000000..38514ab777 --- /dev/null +++ b/files/es/archive/b2g_os/api/telephonycall/onincoming/index.html @@ -0,0 +1,120 @@ +--- +title: TelephonyCall.onincoming +slug: Archive/B2G_OS/API/TelephonyCall/onincoming +translation_of: Archive/B2G_OS/API/TelephonyCall/onincoming +--- +

+ +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

+

This API is available on Firefox OS for internal applications only.

+

+ +

Resumen

+ +

Una referencia a una función que se llamará para manejar evento de incoming de la API de telefonía. Este evento se produce cuando se detecta una llamada entrante. El controlador de eventos se llama con un CallEvent como único parámetro.

+ +

Sintaxis

+ +
instanceOfTelephonyCall.onincoming = funcRef;
+
+ +

Donde funcRef es una función que se llamara cuando se resiva una llamda entrante incoming. Estos eventos son de tipo CallEvent.

+ +

Especificaciones

+ +

No es una implementacion estandar, pero se discute en el W3C como parte del Grupo de trabajo de aplicaciones del sistema.

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
Web TelephonyDraftEditor Draft (WIP).
+ +

Compatibilidad de navegador

+ +

Por razones obvias, el apoyo se espera principalmente en los navegadores móviles.

+ +

We're converting our compatibility data into a machine-readable JSON format. + This compatibility table still uses the old format, + because we haven't yet converted the data it contains. + Find out how you can help!

+ +
+ + +

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basicoSin soporteSin soporteSin soporteSin soporteSin soporte
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte basicoSin soporte12.0 (12.0)Sin soporteSin soporteSin soporte
+
+ +

See also

+ + diff --git a/files/es/archive/b2g_os/api/window/index.html b/files/es/archive/b2g_os/api/window/index.html new file mode 100644 index 0000000000..b5e3bcf899 --- /dev/null +++ b/files/es/archive/b2g_os/api/window/index.html @@ -0,0 +1,27 @@ +--- +title: Window (Firefox OS extensions) +slug: Archive/B2G_OS/API/Window +tags: + - Navegado +translation_of: Archive/B2G_OS/API/Window +--- + + + + +

The Window interface represents a window containing a DOM document. This page represents the list of properties and methods added to Window on Firefox OS devices. For the list of properties and methods available to any Web sites, consult Window.

+ +

Properties

+ +
+
Window.onmoztimechange
+
Contains the event handler to be called whent the event moztimechange is sent.
+
+ +

Methods

+ +

There is no Firefox OS-specific method on the Window interface.

diff --git a/files/es/archive/b2g_os/application_development/index.html b/files/es/archive/b2g_os/application_development/index.html new file mode 100644 index 0000000000..95eb0170fd --- /dev/null +++ b/files/es/archive/b2g_os/application_development/index.html @@ -0,0 +1,11 @@ +--- +title: Desarrollo de aplicaciones en Firefox OS +slug: Archive/B2G_OS/Application_development +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS +--- +

Las aplicaciones de Firefox OS no son mas que Open Web apps, esto es Aplicaciones HTML5, que estan instaladas en un dispositivo que ejecuta Firefox OS. Esto significa que puedes usar tus conocimientos que tienes actualmente sobre desarrollo front-end para crear aplicaciones que corran en los teléfonos Firefox OS.

+

Para más información sobre cómo desarrollar aplicaciones para Firefox OS en vez de sitios web puedes ver el tutorial Comenzando a construir aplicaciones. Desarrollar una aplicación para un sistema específico tiene algunas advertencias. Puedes obtener informaciton relevante sobre ellas en la guía: Escribiendo una aplicación web para B2G.

+

Una vez familiarizado con los puntos básicos, quizá puedas necesitar consultar la información sobre la API de Desarrollo de Aplicaciones. Para información básica sobre el desarrollo de apps en Firefox OS, puedes ver el Firefox Marketplace Developer Hub.

+

 

+
+ Nota: Actualmente Firefox OS se identifica usando la misma cadena UA que Firefox para los sistemas Android, excepto sin la clausula Android. Por ejemplo: Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1.
diff --git a/files/es/archive/b2g_os/apps/escribiendo_una_aplicacion_web_para_b2g/index.html b/files/es/archive/b2g_os/apps/escribiendo_una_aplicacion_web_para_b2g/index.html new file mode 100644 index 0000000000..e3ca09ccb8 --- /dev/null +++ b/files/es/archive/b2g_os/apps/escribiendo_una_aplicacion_web_para_b2g/index.html @@ -0,0 +1,29 @@ +--- +title: Escribiendo una aplicación web para B2G +slug: Archive/B2G_OS/Apps/Escribiendo_una_aplicacion_web_para_B2G +tags: + - Firefox OS + - aplicaciones + - aplicación +translation_of: Web/Apps/Fundamentals/Quickstart +--- +

Las aplicaciones de B2G son solo aplicaciones Web escritas con HTML, CSS y JavaScript. Las puedes publicar en la Web tal como publicarías cualquier otro sitio Web. Con el fin de hacer instalable el sitio Web como una aplicación Web en el dispositivo, solo tienes que adornarlo con un manifiesto y conectar un botón de instalación tal como se explica a continuación.

+

Los siguientes temas son puntos de partida recomendados:

+ +

Por supuesto, ¡no dudes en profundizar aún más en Open Web Apps!

+

Instalando la aplicación Web

+

Con la aplicación y el manifiesto publicados en la Web, necesitas hacer que Gecko sea conciente de ello. Al momento de la instalación, Gecko busca el manifiesto y agrega las entradas necesarias para la pantalla de inicio, etc.

+

Para instalar una aplicación, llamar a la  API navigator.mozApps.install. Aquí un ejemplo de un botón de instalación que podrías incluir en tu aplicación cuando la estas organizando:

+
<script>
+var manifest_url = "http://my.webapp.com/manifest.json";
+</script>
+
+<button onclick="navigator.mozApps.install(manifest_url); return false;">
+  ¡Instala esta impresionante aplicación en tu pantalla de inicio!
+</button>
+
+

Nota: El botón de instalación podría estar también en el app market, tal como el Firefox Marketplace, pero a menudo es muy importante tener un un botón "Instalar como una apliación web" en la página principal de tu sitio.

+

Ahora visita tu sitio web en el navegador de B2G y pulsa el botón de instalación.

diff --git a/files/es/archive/b2g_os/apps/index.html b/files/es/archive/b2g_os/apps/index.html new file mode 100644 index 0000000000..83e26c0f3f --- /dev/null +++ b/files/es/archive/b2g_os/apps/index.html @@ -0,0 +1,62 @@ +--- +title: Creando Aplicaciones para Firefox OS +slug: Archive/B2G_OS/Apps +translation_of: Web/Apps/Fundamentals +--- +

Las aplicaciones para dispositivos Firefox OS son simplemente aplicaciones Web; ellas consisten enteramente de tecnologías Web abiertas como JavaScript, HTML, y CSS. Mientras nuestra documentación primaria para aplicaciones cubre casi todo lo que necesitas saber, aquí hay algunos documentos específicos para desarrollar y probar Firefox OS.

+
+
+

DOCUMENTACIón y tutoriales

+
+
+ Escribiendo una aplicación web para Firefox OS
+
+ Un tutorial para crear tu primera aplicación para Firefox OS.
+
+ Experiencia de usuario
+
+ Guías para ayudarte a desarrollar aplicaciones con experiencia de usuario consistente y atractiva, incluyendo ejemplos de código y plantillas.
+
+ Tips y técnicas
+
+ Una surtida variedad de tips y trucos (tanto como soluciones a los problemas) que nuestros desarrolladores sugieren para ti.
+
+

Ver más...

+
+
+

recibiendo ayuda de la comunidad

+

¿Necesitas ayuda en un problema relacionado con tu aplicación y no encuentras la solución en la documentación?

+ +

No olvides la etiqueta de la red...

+

Herramientas

+ +

Ver más...

+ + +
+
+

 

diff --git a/files/es/archive/b2g_os/architecture/index.html b/files/es/archive/b2g_os/architecture/index.html new file mode 100644 index 0000000000..875eac916d --- /dev/null +++ b/files/es/archive/b2g_os/architecture/index.html @@ -0,0 +1,759 @@ +--- +title: Arquitectura del Sistema Operativo Firefox OS +slug: Archive/B2G_OS/Architecture +translation_of: Archive/B2G_OS/Architecture +--- +
+

Este artículo es un panorama de alto nivel de la arquitectura de la plataforma Firefox OS, que introduce conceptos fundamentales y explica cómo sus componentes interactúan a un nivel básico.

+
+ +
+

Nota: recuerda que Firefox OS todavía se encuentra en estado de pre-lanzamiento. La arquitectura descrita aquí no necesariamente es la final y que otros elementos todavía pueden estar sujetos a cambios.

+
+ +

Terminología de Firefox OS

+ +

Existen algunos términos que debes entender antes de continuar leyendo nuestra documentación sobre Firefox OS.

+ +
+
B2G
+
Sigla de Boot to Gecko.
+
Boot to Gecko
+
El nombre código de ingeniería para el sistema operativo Firefox OS.
+
Firefox OS
+
Es básicamente la marca y servicios de soporte de Mozilla (y sus socios de OEM) aplicados sobre Boot to Gecko para crear el producto final de lanzamiento.
+
Gaia
+
La interfaz de usuario de la plataforma Firefox OS. Cualquier cosa dibujada en la pantalla una vez que Firefox OS ha sido iniciado es un producto de la capa Gaia. La misma implementa la pantalla de seguridad (lock screen), pantalla principal (home screen) y todas las aplicaciones estándares de cualquier teléfono inteligente moderno. Gaia se implementa en su totalidad empleando HTML, CSS y JavaScript. Las interfaces subyacentes al sistema operativo son Web APIs de código abierto, que se implementan por medio de la capa Gecko. Las aplicaciones de terceros se pueden instalar en paralelo con la capa Gaia.
+
Gecko
+
Este es el runtime de aplicaciones de Firefox OS, es decir, la capa que provee todo el soporte para el trío de estándares de código abierto: HTML, CSS y JavaScript. Es responsable de que esas APIs funcionen bien en cualquier sistema operativo soportado por Gecko. Esto implica que Gecko incluya, además de otras cosas, paquetes de redes y de gráficos, un motor de diagramación, una máquina virtual de JavaScript y capas de adaptación (porting).
+
Gonk
+
Gonk es el sistema operativo de bajo nivel de la plataforma Firefox OS que consiste un núcleo/kernel Linux (basado sobre el Android Open Source Project (AOSP)) y una capa de abstracción de hardware de espacio de usuario (HAL por su sigla en inglés). El kernel y varias de las librerías de espacio de usuario son proyectos comunes de código abierto: Linux, libusb, bluez, y sucesivos. Algunas de las otras partes de la HAL se comparten con la AOSP: GPS, cámara y otros. Se podría decir que Gonk es una distribución de Linux muy sencilla. Gonk es una capa de adaptación (port) de dispositivos: un adaptador entre el hardware y Gecko. Gonk es una distribución de Linux bastante sencilla que puede ser tratada como un adaptador Gecko empardado con capas de adaptación Gecko —entonces Gonk es un objetivo para adaptar Gecko a Firefox OS así como también hay adaptadores de Gecko para OS X, Windows y Android. Como el Proyecto Firefox OS goza de control total sobre Gonk, podemos exponer interfaces a Gecko que no podrían ser expuestas en otros sistemas operativos. Por ejemplo, Gecko posee a través de Gonk acceso directo al conjunto completo de telefonía y al buffer de pantalla pero no tiene este acceso en otros sistemas operativos.
+
Jank
+
Este término, generalmente empleado en el área de las aplicaciones móviles, se refiere al efecto causado por código lento o ineficiente en una aplicación, que podría bloquear la actualización de la interfaz de usuario y provocar su lentitud o que no responda. Nuestros ingenieros de Gaia se valen de numerosas técnicas de optimización para evitar esto lo mejor posible.
+
+ +

Diagrama estructural

+ +

Firefox OS Architecture

+ +

Procedimiento de arranque de Firefox OS

+ +

Esta sección describe el proceso por el que los dipositivos con Firefox OS arrancan (butean), cuáles partes están involucradas en el proceso y dónde. A modo de referencia rápida, el flujo del arranque general del sistema va desde los cargadores de arranque (bootloaders) en el espacio del núcleo/kernel al init en el código nativo, a B2G y después a Geko en el espacio de usuario y después finalmente a la aplicación de sistema, gestor de ventanas y posteriormente a la pantalla de inicio de la aplicación en Gecko. Sobre ese conjunto se ejecutan todas las otras aplicaciones.

+ +

+ +

El proceso de arranque encadenado (bootstrapping)

+ +

Cuando un dispositivo con FirefoxOS se enciende, la ejecución se inicia en el cargador del arranque primario (bootloader). Desde allí, el proceso de la carga del SO principal procede normalmene; una sucesión de arranques de jerarquías crecientes inicia el siguiennte arranque en la cadena. Al final del proceso, se delega la ejecución al núcleo/kernel Linux.

+ +

Hay algunos puntos destcables sobre el proceso de arranque:

+ + + +

El kernel Linux

+ +

El núcleo Linux empleado por Gonk es muy similar a la versión de Linux difundida (upstreamed) de la que deriva (basada sobre el Android Open Source Project). Existen cambios hehos por el AOSP que todavía no han sido difundidos. Además, los fabricantes y vendedores a veces modifican el núcleo y cargan esos cambios a la versión de difusión de acuerdo con su intinerario. En términos generales, el núcleo Linux es muy parecido al original.

+ +

El proceso de arranque de Linux se encuentra bien documentado en la internet por lo tanto este artículo no lo cubrirá.

+ +

El núcleo Linux activará dispositivos y ejecutará procesos esenciales definidos en init.rc y su sucesor init.b2g.rc para arrancar procesos esenciales como b2g [procesos básicos de Firefox OS, contenedores de Gecko] y rild [un proceso relacionado con la telefonía que puede ser específico de cada chip] —vaya más abajo para ver más detalles. Al final del proceso, un proceso init de espacio de usuario (userspace) se lanza, como ocurre en la mayoría de los sistemas operativos del tipo UNIX.

+ +

Una vez que el proceso init se ha lanzado, el núcleo Linux administra las llamadas del sistema desde el espacio de usuario, las interrupciones y semejantes desde los dispositivos de hardware. Algunas de las características de hardware se exponen al espacio de usuario a través de sysfs. Por ejemplo, aquí hay un fragmento de código que lee el estado de la batería en Gecko:

+ +
FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &capacity);
+  fclose(capacityFile);
+}
+ +

Más sobre el proceso init

+ +

El proceso init en Gonk gestiona el montaje de los archivos de sistema requeridos y activa los procesos de systema. Después de eso, se mantiene activo como gestor de procesos. Esto es muy similar al init en otros sistemas operativos similares a UNIX. Interpreta scripts [los archivos init.rc] que consisten de comandos que describen lo que debería ser hecho para iniciar servicios varios. El init.rc de FirefoxOS suele ser el init.rc original de Android para ese dispositivo, parchado para incluir los requisitos de arranque de FirefoxOS, y varía de dispositivo a dispositivo.

+ +

Una de las tareas fundamentales que maneja el proceso init es el inicio del proceso b2g; éste es el núcleo del sistema operativo FirefoxOS.

+ +

El código para tal init.rc es el siguiente:

+ +
service b2g /system/bin/b2g.sh
+    class main
+    onrestart restart media
+ +
+

Nota: las variaciones de init.rc dependerán de dispositivo a dispositivo; a veces init.b2g.rc sólo es anexadoo, y a veces los parches son más significativos.

+
+ +

Arquitectura de los procesos del espacio de usuario (userspace)

+ +

Resulta muy útil echar un vistazo de alto nivel a cómo varios componentes del Firefox OS se articulan e interactúan entre sí. Este diagrama muestra los procesos primarios de espacio de usuario en Firefox OS.

+ +

Userspace diagram

+ +
+

Nota: recuerda que como Firefox OS se encuentra en desarrollo activo, este diagrama puede estar sujeto a cambios y puede ser impreciso parcialmente.

+
+ +

El proceso b2g es el proceso primario de sistema. Se ejecuta con privilegios altos; tiene acceso a la mayoría del hardware. b2g se comunica con el módem, almacena en el buffer de pantalla e interactúa con el GPS, cámaras y otros dispositivos. Internamemte, se ejecuta con una capa de Gecko (implementada por libxul.so). Ver Gecko para más detalles sobre cómo funciona la capa Gecko y cómo b2g se comunica con ella.

+ +

b2g

+ +

El proceso b2g puede dar lugar a un número de procesos de contenido de privilegios limitados. Estos procesos albergan la carga de aplicaciones web y otros contenidos. Estos procesos se comunican con el proceso principal del servidor Gecko a través de IPDL, un sistema de envio de mensajes.

+ +

El proceso b2g ejecuta lixbul, el cual referencia a b2g/app/b2g.js para obtener las preferencias de fábrica. De las preferencias se abrirá el archivo HTML descriptor b2g/chrome/content/shell.html, que es compilado en un archivo omni.ja. El shell.html incluye el archivo b2g/chrome/content/shell.js , que dispara la aplicación system de Gaia.

+ +

rild

+ +

El proceso rild es la interfaz del proceso del módem. rild es el daemon que implementa La capa de Interfaz de la Radio [Radio Interface Layer (RIL)]. Es un componente de codigo cerrado implementado por el fabricante/vendedor de hardware para comunicarse con el hardware del módem. rild hace posible que el código cliente se comunique con un empalme de dominio-UNIX al que se enlaza. Se inicia con un código como este en el init script:

+ +
service ril-daemon /system/bin/rild
+    socket rild stream 660 root radio
+ +

rilproxy

+ +

En Firefox OS, el cliente rild client es el proceso rilproxy. Este actúa como un proxy de reenvio mudo (dumb proxy) entre rild y b2g. Este proxy es necesario como un detalle de implementación; es de hecho necesario. El código de rilproxy se encuentra en GitHub.

+ +

mediaserver

+ +

El proceso mediaserver controla la reproducción de audio y video. Gecko se comunica con él a través de un mecanismo de Llamada de Procedimiento Remota de Android [Android Remote Procedure Call (RPC)]. Algunos de los contenidos multimedia que Gecko puede reproducir (OGG Vorbis audio, OGG Theora video, y WebM video) son decodificados por Gecko y enviados directamente al proceso mediaserver. Otros archivos multimedia son decodificados por libstagefright, que puede acceder códecs del fabricante y codificadores del hardware.

+ +
+

Nota: El proceso mediaserver es un componente "provisional" de Firefox OS; existe sólo para ayudar en el trabajo de desarrollo inicial pero se espera que se descarte con el tiempo; lo que seguramente no ocurrirá antes de la version 2.0 de Firefox OS.

+
+ +

netd

+ +

El proceso netd se usa para configurar interfaces de red.

+ +

wpa_supplicant

+ +

El proceso wpa_supplicant process es el daemon estándar tipo UNIX que maneja la conectividad con los puntos de acceso WiFi.

+ +

dbus-daemon

+ +

El dbus-daemon implementa el D-Bus, un sistema de mensajes de bus que Firefox OS emplea para las comunicaciones por Bluetooth.

+ +

Gecko

+ +

Gecko, como se lo mencionó previamente, es la implementación de estándares web (HTML, CSS, y JavaScript) que se usa para implementar todos lo que el usuario ve en Firefox OS, y controlar las interacciones con el hardware del telefono.

+ +

Las aplicaciones Web conectan HTML5 con el hardware de forma controlada a traves de API's web seguras, implementadas en Gecko. Las API's Web proveen de acceso programado a las caracteristicas implicitas en el hardware del dispositivo (como la bateria, o la vibracion), a medida que los datos son guardados, o estan disponibles, en el dispositivo. El contenido web invoca a las API's web accesibles con HTML5.

+ +

Una app consiste en una coleccion de codigos web HTML5 relacionados. Para construir aplicaciones web que funcionen en dispositivos Firefox OS, los desarrolladores simplemento ensamblan, empaquetan y distribuyen este contenido web. En tiempo de ejecucion, este contenido web es interpretado, compilado y renderizado en una navegador web. Para mas informacion sobre Apps, puedes consultar el App Center

+ +
+

Note: Para buscar en la base de código de Gecko, se puede usar http://dxr.mozilla.org. Es más elegante y ofrece buenas características de referemcias. pero con repositorios limitados. También podría usar el tradicional http://mxr.mozilla.org, que contiene más proyectos de Mozilla.

+
+ +

Diagrama de arquitectura de Gecko

+ +

+ +

 

+ + + +

 

+ +

Archivos de Gecko relacionados con Firefox OS

+ +

b2g/

+ +

La carpeta b2g contiene es su mayoría funciones relacionadas con Firefox OS.

+ +
b2g/chrome/content
+ +

Contiene archivos de Javascript ejecutados sobre la aplicación de sistema.

+ +
b2g/chrome/content/shell.html
+ +

El punto de entrada a Gaia — el HTML para la aplicación de sistema. shell.html toma de settings.js and shell.js:

+ +
 
+ +

settings.js contiene parámetros de configuración básicos (default) de sistema.

+ +
b2g/chrome/content/shell.js
+ +

shell.js es el primer script que se carga en la aplicación de sistema de Gaia.

+ +

shell.js importa todos los módulos requeridos, registra los detectores de clave (key listeners), define sendCustomEvent y sendChromeEvent para que se cominiquen con Gaia, y provee ayudantes de instalación de aplicaciones web: indexedDB quota, RemoteDebugger, ayudante de teclado, y la herramienta para captura de pantalla.

+ +

Pero la función más importante de shell.js es lanzar la aplicación de sistema de Gaia, después entregarle todo el trabajo general de administración del sistema.

+ +
let systemAppFrame =
+  document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe');
+    ...
+  container.appendChild(systemAppFrame);
+ +
b2g/app/b2g.js
+ +

Este script contiene configuraciones predefinidas, como about:config en el navegador, y la misma que Gaia's pref.js. Estas configuraciones se pueden cambiar desde la aplicación de congifuraciones y se pueden sobreescribir con user.js en el script de construcción Gaia.

+ +

dom/{API}

+ +

Nuevas implementaciones de la API (post-b2g) se localizarán en dom/. Las APIs anteiores se localizarán en dom/base, for example Navigator.cpp.

+ +
dom/apps
+ +

.jsm se cargarán implementaciones de API — .js API tales como webapp.js install, getSelf, etc.

+ +
dom/apps/PermissionsTable.jsm
+ +

Se definen todos los permisos en PermissionsTable.jsm

+ +

dom/webidl

+ +

WebIDL es el lenguaje empleado para definir web APIs. La información sobre los atributos soportados se encuentra en WebIDL_bindings.

+ +

hal/gonk

+ +

Este directorio contiene archivos sobre la capa de adaptación gonk..

+ +

Archivos generados

+ +
module/libpref/src/init/all.js
+ +

Contiene todos los archivos de configuración.

+ +
/system/b2g/ omni.ja and omni.js
+ +

Contiene el paquete de estilos para los recursos en el dispositivo.

+ +

Proceso de eventos de ingreso

+ +

La mayor parte de las acciones en Gecko se activan por acciones de usuario. Estas acciones son representadas por eventos de emtrada (tales como presionar botones, tocar la pantalla y similar). Estos eventos entran a Gecko a través de Gonk implementation perteneciente a nsIAppShell, que es una interfaz de Gecko empleada para representar los puntos de entrada primaria de una aplicación de Gecko, es decir, el controlador del dispositivo de ingreso llama métodos en el objeto nsAppShell que representa el subsistema de Gecko para así enviar eventos a la interfaz de usuario.

+ +

 

+ +

Por ejemplo:

+ +

 

+ +
void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell->NotifyNativeEvent();
+}
+ +

Estos eventos provienen del sistema estándar Linux input_event. Firefox OS emplea light abstraction layer sobre eso; lo que provee algunas características útiles como filtrar los eventos. Se puede ver el código que crea eventos de ingreso en el método EventHub::getEvents() que se encuentra en widget/gonk/libui/EventHub.cpp.

+ +

Un vez que Gecko recivió los eventos, se envían a DOM por nsAppShell:

+ +
static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+
+ +

Después de lo anterior, los eventos son consumidos por el propio Gecko o despachados a aplicaciones web como Eventos DOM para ser procesados posteriormente.

+ +

Graficos

+ +

En si nivel más inferior, Gecko emplea OpenGL ES 2.0 para establecer un contexto GL que envuelva los buffers del hardware. Esto es realizado en la implementación de Gonk en nsWindow por medio de un código similar a este:

+ +
gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);
+ +

La clase FramebufferNativeWindow es obtenida directamente desde Android; ver FramebufferNativeWindow.cpp. Este emplea la API de gralloc para acceder al controlador de gráficos con el fin de mapear los buffers del dispositivo framebuffer a la memoria del dispositivo.

+ +

Gecko emplea su sistema (de) Layers para componer contenido dibujado en la pantalla. En resumen, ocurre lo siguiente:

+ +
    +
  1. Gecko dibuja regiones distintas de las páginas en los buffers de memoria, A veces, estos buffers están en la memoria del sistema; otras veces, son texturas mapeadas en el espacio de direcciones de Gecko, lo que siginifica que Gecko está dibujando directamente en la memoria de video. Esto se realiza generalmente en el método BasicThebesLayer::PaintThebes().
    2. +
  2. Entonces, Gecko, compone todas estas texturas en la pantalla empleando comandos OpenGL. Esta composición tiene lugar en ThebesLayerOGL::RenderTo().
    3. +
+ +

Los detalles de cómo Gecko maneja el muestreo (rendenring) de contenido web se encuentra fuera del alcance de este documento.

+ +

Capa de Abstracción de Hardware (HAL)

+ +


+ La capa de abstracción de hardware de Gecko es una de sus capas de adaptación (porting). Gestiona los accesos de bajo nivel a las interfaces del sistema a lo largo de múltiples plataformas usando una API de C++ accesible desde los niveles superiores de Gecko. Estas APIs son implementadas plataforma a plataforma dentro de la HAL de Gecko. Esta capa de abstracción de hardware no es expuesta directamente a código JavaScript dentro de Gecko.

+ +

Cómo funciona HAL

+ +

Vamos a considerar la API Vibration como ejemplo. la HAL para esta API se define en hal/Hal.h. Resumiendo (simplificando el método de firma para hacerlo más claro), tienes esta función:

+ +
void Vibrate(const nsTArray &pattern);
+ +

Esta es la función que el código de Gecko llama par activar la vibración del dispositivo de acuerdo con un patrón específico; una función correspondiente existe para cancelar la vibración activa. La implementación de GONK para este método está en hal/gonk/GonkHal.cpp:

+ +
void Vibrate(const nsTArray &pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable->Vibrate(pattern);
+}
+
+ +

Este código envía la petición para el inicio de la vibración a otro conjunto de procesos, que se implementa en VibratorRunnable::Run(). El bucle principal de este hilo seria parecido a esto:

+ +
while (!mShuttingDown) {
+  if (mIndex < mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+
+ +

vibrator_on() es la API HAL de GONK que enciende el motor de vibración. Internamente, este método envía un mensaje al controlador de núcleo (kernel driver) al escribir un valor en un objeto de kernel empleando sysfs.

+ +

Implementaciones de la Fallback HAL API

+ +


+ Las APIs HAL de Gecko tienen soporte en todas las plataformas. Cuando se construye Gecko para una plataforma que no expone una interfaz a los motores de vibración (como una computadora de escritorio) entonces se vale de una implemenación de fallback de la API de HAL. Para la vibración, este esta implementado en hal/fallback/FallbackVibration.cpp.

+ +
void Vibrate(const nsTArray &pattern) {
+}
+ +

Implementaciones de Sandbox (entorno cerrado)

+ +

Debido a que la mayoría del contenido de la red se ejecuta en procesos de contenido con privilegios bajos, no podemos suponer que esos procesos tienen los privilegios necesarios para poder (por ejemplo) activar o desactivar el motor de vibración. Además, queremos tener una ubicación central para controlar las posibles condiciones de carrera (race conditions). En la HAL de Gecko, esto es realizado por medio de la implementación de una sandbox de la HAL. Esta sandbox simplemente funciona como un proxy para la peticiones realizadas por los procesos de contenido y las reenvía al proceso del "servidor Gecko". Las peticiones de proxy se envían empleando IPDL.

+ +

Para la vibración, la función Vibrate() se encarga de la gestión y se la implementa en hal/sandbox/SandboxHal.cpp:

+ +
void Vibrate(const nsTArray& pattern, const WindowIdentifier &id) {
+  AutoInfallibleTArray p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()->SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}
+ +

Esto envía un mensaje definido por la interfaz PHal, descrita por IPDL en hal/sandbox/PHal.ipdl. El método se describe aproximadamente de la siguiente manera:

+ +
Vibrate(uint32_t[] pattern);
+ +

El receptor de este mensaje es la HalParent::RecvVibrate() method in hal/sandbox/SandboxHal.cpp, el cual seria algo parecido a esto:

+ +
virtual bool RecvVibrate(const InfallibleTArray& pattern,
+            const InfallibleTArray &id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}
+ +

Este omite algunos detalles que no son relevantes a este punto pero, en cualquier caso, demuestra cómo el mensaje progresa desde un proceso de contenido a través de Gecko hasta Gonk, luego a la implementación de la HAL de Gonk Vibrate(), y finalmente al controlador de vibración.

+ +

APIs DOM

+ +

Las interfaces DOM son, esencialmente, la forma en la que el contenido web se comunica con Gecko. Hay más información al respecto y, si estás interesado en detalles extras, puedes leer sobre el DOM. Las interfaces DOM se definen empleando IDL, que compone una interfaz de función foránea (foreign function interface, FFI) y un objeto modelo (OM) entre JavaScript y C++.

+ +

La API de vibración se expone al contenido web por medio de una interfaz IDL, que se la provee en nsIDOMNavigator.idl:

+ +
[implicit_jscontext] void mozVibrate(in jsval aPattern);
+ +

El argumento jsval indica que mozVibrate() (que es nuestra implementación vendedor-prefijada de esta especificación no finalazida de vibración) acepta como ingreso cualquier valor de JavaScript. El compilador IDL, xpidl, genera una interfaz C++ que entonces se implementa por la clase Navigator en Navigator.cpp.

+ +
NS_IMETHODIMP Navigator::MozVibrate(const jsval& aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}
+ +

Hay mucho más código en este método de lo que ves aquí, pero no es importante para el proposito que estamos tratando. El hecho es que la llamada a hal::Vibrate() transfiere el control de DOM a la HAL Gecko. Desde allí, entramos a la implementación de HAL tratada en la sección previa y continuamos hacia el controlador. Además, la implementación DOM no se preocupa por la plataforma en la que está corriendo (Gonk, Windows, OS X, o cualquier otra). Tampoco le interesa si el código está corriendo en un proceso de contenido o en un proceso del servidor Gecko. Esos detalles se dejan de lado para que los gestionen los procesos de nivel bajo del sistema.

+ +

La API de vibración es muy simple, lo que la convierte un ejemplo excelente. La API de SMS es más compleja porque emplea su propia capa de envío remoto que conecta los procesos de contenido con el servidor.

+ +

Capa de Interfaz de Radio (CIR/RIL)

+ +

La RIL (Radio Interface Lyer) ya se mencionó en la sección The userspace process architecture. Esta sección examinará con más detalle cómo las diferentes partes de esta capa interactúan.

+ +

Los componentes principales involucrados en la RIL son los siguientes:

+ +
+
rild
+
El daemon que habla al firmware del módem de fábrica.
+
rilproxy
+
El daemon que referencia mensajes (proxy) entre rild y Gecko (que está implementado en el proceso b2g). Esto soluciona el problema de permisos que surje cuando se trata de comunicar con rild directamente ya que sólo se puede comunicar con rild desde el grupo radio.
+
b2g
+
Este proceso, también conocido como el proceso chrome, implementa Gecko. Las partes de el que se relacionan con la Capa de Interfaz de Radio son dom/system/gonk/ril_worker.js, las cuales implementan una cadena de procesos de trabajo (worker thread) que se comunica con rild a través de rilproxy es implementa el estadio radial (radio state machine) y la interfaz nsIRadioInterfaceLayer, que es el servicio XPCOM de la cadena de procesos principal, que actúa principalmente como un intercambio de mensajes entre la cadena ril_worker.js y otros numerosos componentes de Gecko, incluidos el proceso de contenido de Gecko.
+
Proceso de contenido de Gecko (Gecko's content process)
+
Dentro del proceso de contenido de Gecko, la interfaz nsIRILContentHelper provee un servicio XPCOM que permite a algunas partes de código implementado de DOM, tales como las APIs Telephony y SMS, comunicarse con la interfaz de radio, la cual es un proceso chrome.
+
+ +

Ejemplo: comunicación desde rild a DOM

+ +

Echemos una mirada al ejemplo de cómo las partes del nivel inferior del sistema se comunican con código DOM. Cuando el módem recibe una llamada entrante, la notifica a rild empleando un mecanismo de fábrica. entonces rild prepara un mensaje para su cliente de acuerdo con el protocolo "open", que se describe en ril.h. En el caso de una llamada entrante, se genera un mensaje RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED y lo envía rild a rilproxy.

+ +

rilproxy, implementada en rilproxy.c, recibe este mensaje en bucle principal, que envía (poll) la conexión a rild utilizando código como éste:

+ +
ret = read(rilproxy_rw, data, 1024);
+
+if(ret > 0) {
+  writeToSocket(rild_rw, data, ret);
+}
+ +

Una vez que el mensaje es recibido por rild, se lo reenvía a Gecko en el empalme que conecta rilproxy con Gecko. Gecko recibe el mensaje enviado en su IPC thread:

+ +
int ret = read(fd, mIncoming->Data, 1024);
+// ... handle errors ...
+mIncoming->mSize = ret;
+sConsumer->MessageReceived(mIncoming.forget());
+
+ +

El consumidor de estos mensajes es SystemWorkerManager, que reempaqueta los mensajer y los envía a la cadena ril_worker.js que implementa la máquina de estado RIL; que se realia en the RILReceiver::MessageReceived() method:

+ +
virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr dre(new DispatchRILEvent(aMessage));
+  mDispatcher->PostTask(dre);
+}
+ +

La tarea postada en esa cadena a su vez llama la función onRILMessage(), que se implemente en JavaScript. Esto se realiza empleando la función JS_CallFunctionName() de la API de JavaScript:

+ +
return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);
+ +

onRILMessage() está implementada en dom/system/gonk/ril_worker.js, que procesa los bytes del mensaje y los corta en fragmentos. Cada fragmento completo se envía a métodos de gestión (handler) individuales apropiadamente:

+ +
handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+
+ +

Este código trabaja por medio del tipo de petición (request) del objeto, asegurándose de que sea definido como una función en código de JavaScript, para después llamar al método. Ya que ril_worker.js implementa cada tipo de petición (request type) en un método con el mismo nombre que el tipo de petición, es muy sencillo.

+ +

En nuestro ejemplo RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED, se llama al siguiente handler:

+ +
RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};
+ +

Como puedes ver en el código de más arriba, cuando se recibe la notificación que el estado de la llamada ha cambiado, la máquina de estado (state machine) simplemente trae para sí el estado actual de la llamafa invocando el método getCurrentCall():

+ +
getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}
+ +

Esto envía una petición de vuelta a rild para solicitar el estado de todas las llamadas actuales. La petición regresa por un camino similar al que siguió el mensaje RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED message pero en la dirección opuesta (es decir, desde ril_worker.js a SystemWorkerManager a Ril.cpp, después a rilproxy y finalmente al rild socket). rild responde por el camino inverso y la respuesta llega al handler de ril_worker.js's handler para el mensaje REQUEST_GET_CURRENT_CALLS. Así es como se da lugar la comunicación bidireccional.

+ +

El estado de la llamda se procesay compara con el estado previo; si hay un cambio de estado, ril_worker.js notifica al servicio nsIRadioInterfaceLayer de la cadena principal:

+ +
_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}
+ +

Se implementa nsIRadioInterfaceLayer en dom/system/gonk/RadioInterfaceLayer.js; se recibe el mensaje por su método onmessage():

+ +
 onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+
+ +

Lo que todo esto realmente hace es enviar el mensaje al proceso de contenidos empleando el Administrador de Mensajes de Procesos Principales [Parent Process Message Manager (PPMM)]:

+ +
handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}
+ +

En el proceso de contenidos, el mensaje es recibido por el método receiveMessage() en el servicio nsIRILContentHelper, del Administrador de Mensajes de Procesos Secundarios [Child Process Message Manager (CPMM)]:

+ +
receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;
+ +

Esto, a su vez, llama a los métodos nsIRILTelephonyCallback.callStateChanged() de cada uno de los objetos registrados de las respuesta de telefonía (registered telephony callback object). Cada aplicación web que accede la API window.navigator.mozTelephony API ha registrado uno de ese tipo de objeto que envía los eventos al código JavaScript code en la aplicación web, así sea como un cambio de estado de un objeto de llamada existente o un nuevo evento de llamada incoming.

+ +
NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString& aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall->ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr event = CallEvent::Create(call);
+  nsresult rv = event->Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}
+ +

Las aplicaciones pueden recibir estos eventos y actualizar su interfaz de usuario:

+ +
handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}
+ +

Echa una mirada a la implementación de handleEvent() in the Dialer application como un ejemplo más.

+ +

Datos 3G

+ +

Hay un mensaje RIL que inicia una "petición de datos" al servicio móvil; este activa el modo de transferencia de datos en el modem. Esta petición de datos termina creando y activando una interfaz Point-to-Point Protocol (PPP) en el kernel Linux que pueden ser configuradas usando las interfaces comunes.

+ +
+

Nota: Esta sección necesita ser redactada

+
+ +

APIs relacionadas con DOM

+ +

Esta sección lista las APIs de DOM que estan relacionadas con comunicaciones RIL.

+ + + +

WiFi

+ +

El backend de WiFi para Firefox OS simplemente usa wpa_supplicant para hacer la mayor parte del trabajo.
+ Esto significa que el principal trabajo del backend es simplemente gestionar el supplicant, y hacer algunas tareas auxiliares como cargar el driver del WiFI y activar o desactivar la interfaz de red.
+ En resumen, esto significa que el backend es una maquina de estados, con los estados que indican el estado del supplicant.

+ +
+

Note: Muchas cosas interesantes que suceden en WiFi dependen profundamente de posibles cambios de estado en el proceso wpa_supplicant.

+
+ +

La implementación del componente WiFi esta dividida en dos archivos.

+ +
+
dom/wifi/DOMWifiManager.js
+
Implementa lo que la API muestra al contenido web, tal como esta definido en nsIWifi.idl.
+
dom/wifi/WifiWorker.js
+
Implementa la máquina de estados y el código que controla el supplicant.
+
+ +

Estos dos archivos se comunican con otro usando el gestor de mensajes.
+ El backend escucha los mensajes que requieran una determinada acción, como "asociar" y responde con una mensaje cuando la acción requerida ha sido completada.

+ +

El lado del DOM escucha los métodos de respuesta, asi como muchos mensajes de eventos que indican cambios de estado y actualización de información.

+ +
+

Note: Algunas API's síncronas de DOM son implementadas leyendo datos en el otro extremo de la tubería. Los mensajes síncronos son evitados siempre que es posible

+
+ +

WifiWorker.js

+ +

Este archivo implementa la logica principal detras de la interfaz WiFi. Se ejecuta en el proceso chrome (en construcciones multiproceso) y es instanciado por el SystemWorkerManager. El fichero es generalmente dividido en dos secciones: una gigantesca funcion anonima y WifiWorker (y su prototipo). La funcion anonima termina siendo el WifiManager proveyendo una API local, incluyendo notificaciones para eventos como una conexion al supplicant y escaneando los resultados cuando estan disponibles. En general. este contiene la logica simple y manda a su control exclusivo de consumidor sus acciones mientras estas simplemente responden a la informacion requerida y controla los detalles de la conexion con el supplicant.

+ +

El objeto WifiWorker se situa entre el WifiManager y el DOM. Este reacciona a eventos y los sigue al DOM; a su vez, este recibe las peticiones del DOM y realiza las acciones apropiadas en el supplicant. Este tambien mantiene informacion sobre el supplicant y lo siguiente que necesita hacer.

+ +

DOMWifiManager.js

+ +

Este implementa la API de DOM, transmitiendo mensajes hacia atras y llamadas de regreso y el actual WiFi worker. Hay muy poca logica envuelta aqui.

+ +
+

Nota: Para poder permitir mensajes sincronos al proceso chrome, el WiFi Manager necesita cachear el estado basado en el envio recibido.

+
+ +

Hay un solo mensaje sincrono, el cual es enviado en cuanto la API DOM se instancia, para poder obtener el estado actual del supplicant.

+ +

DHCP

+ +

DHCP y DND van de la mano con dhcpcd, el cliente DHCP estandar en Linux.
+ Sin embargo, este no permite reaccionar cuando la conexion de red se pierde.
+ Por eso, Firefox OS mata y reinicia dhcpcd cada vez que se conecta a una red inalambrica dada.

+ +

dhcpcd es tambien responsable de ajustar la ruta por defecto; nosotros llamamos al gestor de redes para informar al kernel sobre los servidores DNS.

+ +

Gestor de Redes

+ +

El Gestor de Redes configura las interfaces de red abiertas por los datos 3G y los componentes WiFi

+ +
+

Nota: Esto necesita ser redactado.

+
+ +

Procesos e hilos

+ +

Firefox OS usa los hilos de POSIX para implementar todos los hilos de las aplicaciones - esto incluye los hilos principales de cada aplicación asi como los trabajadores web y los hilos de ayuda. Los grupos de control son usados para priorizar procesos e hilos de ejecución que dependen del planificador completamente justo del kernel Linux. Dependiendo del estado del proceso le asignaremos un grupo de control distinto. Actualmente tenemos 6 niveles de prioridad correspondientes a 5 grupos de control

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Process priority levels
PriorityNiceUsed for
MASTER0proceso principal de b2g
FOREGROUND_HIGH0aplicaciones criticas que sostienen la cpu y el wakelock de alta prioridad.
+ Este es actualmente reservado para el reloj y las aplicaciones de comunicacion
FOREGROUND1aplicaciones en primer plano
FOREGROUND_KEYBOARD1aplicacion de teclado
BACKGROUND_PERCEIVABLE7aplicaciones en segundo plano que ejecuten audio o sostengan la CPU o el wakelock de alta prioridad y tengan al menos un controlador de mensajes de sistema registrado
BACKGROUND_HOMESCREEN18aplicacion de pantalla principal
BACKGROUND18resto de aplicaciones que se ejecuten en segundo plano
   
+ +

Algunos niveles comparten el mismo grupo de control, esto es asi porque dichos niveles actualmente difieren en la manera que son tratados por el liberador de memoria. Todas las prioridades pueden ser ajustadas en tiempo de ejecucion mediante preferencias; las entradas relativas a esto se pueden encontrar en el b2g/app/b2g.js file.

+ +

Actualmente se usan los siguientes grupos de control:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Grupos de Control
RutaOcupación de la CPUDescripción
 50% del tiempo total de CPUGrupo de control de Root reservado para el proceso principal de b2g y los servicios del sistema
apps50% del tiempo total de CPUAplicaciones comunes
apps/critical95% de las appsAplicaciones criticas
apps/bg_perceivable10% de las appsAplicaciones perceptibles en segundo plano
apps/bg_non_interactive5% de las appsAplicaciones en segundo plano
+ +
+

Nota: para mas informacion sobre el liberador de memoria, y como Firefox OS gestiona las situaciones de memoria baja, lease Out of memory management on Firefox OS

+
+ +

Sin un proceso, el hilo principal hereda el "valor seguro" del proceso, mientras que los procesos web en curso toman un "valor seguro" que es un punto mas alto que el hilo principal, que corre la prioridad mas baja.
+ Esto esta hecho para prevenir que los ciclos intensivos en curso de la CPU ralenticen excesivamente el hilo principal. Todos los hilos de una aplicación son actualmente asignados al mismo grupo de control. Las prioridades de los procesos son cambiadas cuando un evento importante sucede, como cuando una aplicación cambia de segundo plano al primer plano, o una nueva aplicación inicia, o una aplicación acapara la CPU.

+ +
+

Nota: los cgroups soportados en dispositivos ICS estan actualmente rotos debido a un bug del kernel.

+
+ +

 

diff --git a/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/dispositivos_compatibles/index.html b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/dispositivos_compatibles/index.html new file mode 100644 index 0000000000..009e1c5ab5 --- /dev/null +++ b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/dispositivos_compatibles/index.html @@ -0,0 +1,360 @@ +--- +title: Dispositivos compatibles +slug: Archive/B2G_OS/Building_and_installing_Boot_to_Gecko/Dispositivos_compatibles +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices +--- +
+

Instalar B2G OS en tu dispositivo es fácil con el instalador de B2G (Add-on de Firefox)

+
+ +
+

Nota: Todos los dispositivos tienen debajo de su nombre (ver el nombre). Por ejemplo para construir la imagen para Nexus 6 haz ./build.sh nexus-6-1. Los nombres en código de los dispositivos es proporcionado por los fabricantes. Puedes encontrar el archivo build.prop en una ROM stock.

+
+ +

Dispositivos de Desarrollo

+ +

Estos dispositivos son de referencia oficial para el desarrollo de B2G

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Imagen
Nombre
+ (Versión android)		Z3 Compact (Kitkat)
+ Sony Shinano platform		Z3 (Kitkat)
+ Sony Shinano platform		Flame (Kitkat)
Nombre en códigoaries-kkleo-kkflame-kk
Información de construcción e instalaciónhttps://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082 https://discourse.mozilla-community.org/t/flame-builds/8548
Disponible en B2G InstallerSíNoSí
+ +

Dispositivos Soportados por la Comunidad

+ +

Estos dispositivos son mantenidos por los esfurzos de la comunidad. ¡Siéntete libre de ayudar!

+ +
+

La frecuencia de la distribución de las builds depende del número de voluntarios y del tiempo disponible.

+
+ +

Dispositivos disponibles

+ +

Estos dispositivos tienen builds disponible para ejecutar B2G:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ImageN
Nombre
+ (Versión de Android)		ZTE Open CNexus 5WileyFox SwiftFairphone 2
Nombre en códigoopenc-fr / openc-ebay                         
Información de construcción e instalaciónhttps://discourse.mozilla-community.org/t/zte-open-c/8402/ +

https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1

+ 		  +

https://discourse.mozilla-community.org/t/fairphone-2-build/8641/
+ https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334

+
Disponible en B2G Installer +

No

+ +

(but a buildbot is available)

+ 		SíSí +

Dentro de poco.

+ +

Blobfull build working.

+
+ +

En progeso

+ +

Trabajando en soporte para estos dispositivos.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Imagen 
Nombre
+ (Versión de Android)		E3
+ Sony Yukon platform		Z1 Compact (Lollipop)
+ Sony Rhine platform		Xiaomi Redmi 1S
Nombre en códigoflamingo-lamami-larmani
Información de construcción e instalaciónhttps://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273
Estado de soporteBloqueado, hay problemas con las herramientas de flasheo.Versiones previas de pruebas.Versiones previas de pruebas
+ +

Dispositivos con posibilidad de portar el SO

+ +

Esto es una lista de dispositivos con potencial para portar B2G, gracias a las versiones de AOSP y Cyanogen Mod disponibles, o porque soportaban versiones anteriores de Firefox OS hasta la versión 2.6

+ +
+

Nota: No hay ports para estos dispositivos, pero es posible construir B2G. Mira la sección de cómo construir para más información. Eres bienvenido para ayudar al mantenimiento de estas builds.

+
+ +

Dispositivos Nexus

+ +

Estos dispositivos son (en parte) soportados por B2G porque son dispositivos de referencia de Google para AOSP

+ + + + + + + + + + + + + + + + +
Nexus 6Nexus 4
  
+ +

Dispositivos de Sony

+ +

Estos dispositivos pertenecen a la iniciativa Sony Mobile´s Open Devices, que tiene como objetivo el soporte de los móviles Xperia en AOSP

+ +

Estos dispositivos están construidos en base a AOSP Lollipop.

+ +
+

Ahora mismo la mayoría de los dispositivos Sony no tienen soporte para cámara. Esto depende del avance del trabajo de los desarrolladores de Sony. Además, nosotros contribuimos con el mantenimiento de estos ports.

+
+ +

Los dispositivos que está en curso el soporte para B2G no están listados aquí.

+ +

Sony Shinano Platform

+ + + + + + + + + + + + + + + + + + + + + + +
 
Z3 Z3 Tablet CompactZ2
leo-l scorpion-lsirius-l
+ +
+
+ +

Sony Rhine Platform

+ +
+

Los dispositivos Rhine utilizan un chip NFC Legacy, así que esta función no está disponible. Mira el bug 1226720. Necesitamos contribuidores para el mantenimiento de estos ports.

+
+ + + + + + + + + + + + + +
Z1
honami-l
+ +

Sony Yukon Platform

+ + + + + + + + + + + + + + + + + + + +
T2 UltraT3M2
tianchi-lseagull-leagle-l
+ +

Dispositivos Soportados CyanogenMod

+ +

Hay que completar.

+ +

Dispositivos Legacy

+ +

Muchos dispositivos antiguos no son mantenidos por la comunidad, pero es posible que voluntarios puedan mantenerlos vivos. El estado actual de estos dispositivos es desconocido, así que es probable que no se pueda instalar B2G.

+ +

No hay dispositivos aquí actualmente.

+ +

Obsolete Devices

+ +
+

Olvídate del soporte para estos dispositivos si tenes uno.

+
+ +

Varios dispositivos antiguos ya no son soportados por B2G OS, y no tenemos voluntarios para mantenerlos vivos. El estado actual de estos dispositivos es desconocido, lo que probablemente significa que no se puede actualizar B2G.

+ + + + + + + + + + + + + + + + + + + + + + +
Geeksphone PeakGeeksphone KeonZTE OpenTCL Fire
peakkeoninarihamachi
+ + + + + + + + + + + + + + + + + + + + + + +
Samsung Galaxy S2Galaxy NexusNexus SNexus S 4G
galaxy-s2galaxy-nexusnexus-snexus-s-4g
+ + + + + + + + + + + + + + + + + + + + + + +
Foxconn InFocusVia VixenPandaboardRaspberry Pi
flatfishvixenpandaboardrpi
diff --git a/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/firefox_os_build_process_summary/index.html b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/firefox_os_build_process_summary/index.html new file mode 100644 index 0000000000..2ba4b7b7b6 --- /dev/null +++ b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/firefox_os_build_process_summary/index.html @@ -0,0 +1,109 @@ +--- +title: Resumen del proceso de compilación de Firefox OS +slug: >- + Archive/B2G_OS/Building_and_installing_Boot_to_Gecko/Firefox_OS_build_process_summary +tags: + - Firefox OS + - compilar + - instalación + - instalar +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary +--- +
+

Compilar e Instalar Firefox OS requiere una significante cantidad de tiempo, ancho de banda de red, y poder computacional. Desafortunadamente, a lo largo del camino, las cosas son susceptibles de salir mal. Esta página describe los objetivos del proceso de compilación y  los pasos de este proceso con el fin de ayudar a los usuarios a lo largo del camino. Los detalles de cada paso son mostrados en los enlaces de su respectiva página.

+
+
+

Nota: El proceso de compilación de Firefox OS está lleno de referencias a 'B2G' o 'Boot2Gecko'. 'Boot2Gecko' fué el nombre clave original del proyecto Firefox OS.

+
+

El objetivo de la compilación: cuatro archivos 'image'

+

El objetivo general del proceso de compilación es la compilacióno de cuatro archivos que puedan ser copiados a un dispositivo Firefox OS.

+ + + + + + + + + + + + + + + + + + + +
boot.imgEl Kernel Linux y un root filesystem image, este último provee un útil conjunto de herramientas básicas de Unix.
system.imgEl núcleo de Firefox OS incluye partes de Gonk, el puerto de Gecko, y el ejecutable b2g.
userdata.imgEl perfil Gecko del usuario y la aplicación web Gaia para el dispositivo.
recovery.imgUn kernel Linux y una imagen del sistema de ficheros raíz, junto con una herramienta sencilla para que los usuarios puedan arreglar una mala instalación.
+

Una vez que se han creado las cuatro imágenes, estas pueden ser transferidas al dispositivo.

+

Firefox OS está compilado sobre la base de Android Open Source Project (AOSP). Las herramientas AOSP, adb y fastboot, proveen una potente vía para acceder y manipular un dispositivo. Notablemente, el comando adb reboot-bootloader puede ocasionar que un dispositivo conectado se reinicie (reboot) y se detenga en la fase inicial del  bootloader donde el comando fastboot flash $partition $image puede ser usado para copiar una imágen al dispositivo.

+

La imagen de arranque

+

La imagen de arranque (boot.img) es una combinación del Kernel Linux y una partición inicial del root proveyendo el software núcleo de utilidad y el script de inicialización. Este último será copiado en la memoria del dispositivo para uso eficiente por el dispositivo y por consiguiente es llamado "ramdisk". La imagen de arranque será copiada en la partición 'boot' en el dispositivo y el contenido del  ramdisk es visible iniciando en el directorio raíz (root) cuando el  filesystem del dispositivo es accedido en tiempo de ejecución (runtime), tal como cuando se usa adb shell.

+

La imágen de arranque también establece los permisos de los usuarios root en el archivo default.prop  en el directorio raíz.

+

También es posible modificar una imágen de arranque existente mediante la inspección de archivo, dividiendo el archivo en el Kernel y ramdisk image, extrayendo los contenidos de la imagen ramdisk, modificando esos contenidos, reensamblando la imagen ramdisk, entonces recompilando una boot.img funcional. Ver, por ejemplo, la página de Alcatel One Touch Fire Hacking (Mini) Guide.

+

La imagen de arranque puede ser probada antes de ser instalada por  'sideloading'; el dispositivo puede ser inicializado y pausado en el  bootloader y luego un  fastboot puede ser usado para arrancar desde la imagen de arranque sin instalarla usando el comando fastboot boot /some/path/to/boot.img.

+

La imagen del sistema

+

La imagen del sistema (system.img) provee el núcleo de  Firefox OS:

+ +
+

Vea la guía la pataforma Firefox OS para más información acerca de la arquitectura de la plataforma.

+
+

La imagen del sistema será copiada a la partición system  en el dispositivo y será visible en el directorio /system/ cuando el  filesystem del dispositivo sea accedido en tiempo de ejecución.

+
+

Nota: La Imagen del Sistema también provee las manchas binarias (blobs) que pueden ser usadas por el dispositivo, notablemente el RIL (Radio Interface Layer) controla la radio celular en el dispositivo.

+
+

La imagen de los datos de usuario

+

La imagen de los datos de usuario (userdata.img) provee las aplicaciones Gaia cargadas en tiempo de ejecución.

+

La imagen de los datos de usuario será copiada a la partición userdata en el dispositivo y los contenidos serán visibles en el directorio /data/ cuando el filesystem del dispositivo sea accedido en tiempo de ejecución. Notablemente el directorio /data/b2g/  contiene el   profile  de Mozilla Gecko del dispositivo del usuario mientras el directorio /data/local/webapps/ contiene la aplicación web actual disponible para el usuario.

+

La imagen de recuperación

+

La imagen de recuperación (recovery.img) contiene lo mismo que el Kernel y un similar ramdisk que están presentes en la partición de la imagen de arranque. La imagen de recuperación sin embargo utiliza un script de inicialización diferente, lo que lleva al usuario a un conjunto de recuperación de comandos de acceso utilizando los botones de hardware en el dispositivo.

+

La Imagen de recuperación será copiada a la partición recovery en el dispositivo,  que no es montada en el filesystem en tiempo de ejecución normal.

+

El proceso de compilación:  ajustar, configurar,  compilar, instalar

+

El proceso general de construcción e instalación de Firefox OS consta de cuatro pasos:

+ + + + + + + + + + + + + + + + + + + +
AjustarObtener copias de todos los programas usados por el proceso de construcción, tales como los compiladores y librerías.
ConfigurarDescargar el código fuente que será utilizado en la creación y construcción del archivo .configure que define las variables del entorno especificando las direcciones y otros valores utilizados en la construcción.
CompilarCompilar el perfil Gecko del usuario y la aplicación web Gaia para el dispositivo.
InstalarInstalar los archivos en el dispositivo.
+

 

+

Ajustar

+

El ajuste inicial debe ser hecho para asegurar el equipo que corre la compilación tenga todos el software requerido durante la compilación, tal como compiladores y herramientas de construcción.

+

Esta paso puede ser hecho a mano o usando un script. Los detalles los podemos ver en la página Prerrequisitos para compilar Firefox OS.

+
+

Nota: En UNIX y máquinas UNIX, la presencia de los software requeridos pueden ser comprobados usando el comando unix which con el nombre del programa requerido como parámetro.

+
+

Configuración

+

El actual proceso de compilación inicia obteniendo una copia del software Firefox OS (o B2G), por lo general mediante la creación de un clon Git del proyecto B2G. La configuración de compilación obtendrá copias de todo el código fuente que es compilado y crea el archivo .config que especifica las variables para la compilación.

+

Esto se ejecuta con el script config.sh. Más detalles podemos encontrar en la página Preparandote para tu primer binario B2G .

+

Es script necesario de configuración y parámetros especificando el tipo de dispositivo a compilar. Los nombre de compilación son códigos nombre enlazados a la arquitectura del CPU en lugar de un dispositivo específico, y actualmente no hay manera de establecer qué compilación trabaja para qué dispositivo físico. Una lista de códigos nombres  disponibles puede encontrarse aquí.

+

El paso de configuración también utilizará la herramienta Android Open Source Project repo para descargar (o actualizar) una copia de todo el código utilizado en la compilación. Estas copias serán almacenadas en el directorio .repo/projects. Debido a esta actividad, el paso de configuración puede tardar bastante tiempo y descargará una gran cantidad de datos.

+

Compilar

+

El paso de compilación lo qe hace es compilar todo el código fuente y produce como resultado las imagenes.

+

Esto se ejecuta con el script  build.sh. Para más detalles podemos encontrar en la página Compilando Firefox OS .

+

Por defecto, el paso de compilación es monolítico, intentando compilar todo a la vez desde las herramientas Android Open Source Project para el  kernel Linux a la aplicación web Gaia. Cuando la compilación falla,  puede a veces no ser claro en que paso ha fallado.

+

Es posible compilar solo ciertas partes de toda la pila Firefox. Por ejemplo, el sistema Gecko solo puede ser compilado mediante una llamada al script de compilación con el parámetro gecko. De igual manera, Gaia puede ser compilado de forma independiente utilizando el parámetro gaia. Estas partes pueden ser instaladas de forma separada en el dispositivo como se explica a mas adelante.

+

También se pueden compilar las imágenes mostradas en la primera parte de esta página. Por ejemplo, el sistema de imagen puede ser compilado utilizando./build.sh out/platform/$target/system.img, donde el parámetro $target es el mismo que el dado en el paso de configuración.

+

Instalar

+

El paso de instalación colocará nuevamente el código compilado en el dispositivo. Esto es ejecutado con el script flash.sh .

+

Partes individuales de la compilación pueden ser instaladas agregando un parámetro al script flash. Por ejemplo, es posible instalar sólo la aplicación web gaia especificando ./flash.sh gaia.

diff --git a/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/index.html b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/index.html new file mode 100644 index 0000000000..0e2cc7d35d --- /dev/null +++ b/files/es/archive/b2g_os/building_and_installing_boot_to_gecko/index.html @@ -0,0 +1,82 @@ +--- +title: Construyendo e instalando Firefox OS +slug: Archive/B2G_OS/Building_and_installing_Boot_to_Gecko +tags: + - B2G + - Documentación de construcción + - Firefox OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +
+

Debido a que Firefox OS está actualmente en un desarrollo activo, y se encuentra en estado preliminar, la mejor manera de asegurarse de que tienes una copia actualizada e instalada, es compilarla e instalarla tú mismo. Los artículos comprendidos en esta página te guiarán a través de la compilación y la instalación de Firefox OS en un emulador, dispositivo compatible, o en la interfaz de usuario de Gaia en el navegador Firefox.

+
+ + + + + + + +
+

Cómo obtener y compilar Firefox OS

+
+
+ Firefox OS visión general de la compilación
+
+ La compilación e instalación de Firefox OS requiere de una cantidad significativa de tiempo, ancho de banda y una computadora potente. Esta página describe los objetivos del proceso de compilación y de los pasos de este proceso con el fin de ayudar a los usuarios a lo largo del camino.
+
+ Firefox OS requisitos previos de compilación
+
+ Pasos a seguir antes de compilar Firefox OS por primera vez.
+
+ Preparándose para su primera compilación de Firefox OS
+
+ Antes de poder compilar Firefox OS, es necesario clonar el repositorio y configurar su construcción. En este artículo se explica cómo hacerlo.
+
+ Compilando Firefox OS
+
+ Cómo compilar Firefox OS.
+
+
+
+ Compilando la llama de Firefox OS en OSX
+
+ Cómo realizar la compilación de la llama de Firefox OS en OSX.
+
+
+
+ Portando a Firefox OS
+
+ Información sobre cómo portar Firefox OS a nuevos dispositivos.
+
+

Ver todo...

+ 		+

Instalación de Firefox OS y/o Gaia

+
+
+ Eligiendo cómo iniciar Gaia o Firefox OS
+
+ Puedes usar Gaia dentro de Firefox, o puedes ejecutar Firefox OS en un dispositivo móvil o en un simulador en el escritorio. Esta guía te ayudará a decidir cuál es mejor para tus necesidades.
+
+ Usando Gaia en Firefox
+
+ Cómo utilizar Gaia dentro de un navegador Firefox de escritorio.
+
+ Usando el cliente B2G de escritorio
+
+ Una guía para ejecutar y utilizar el cliente de escritorio de Firefox OS; esto simula el entorno Gaia en una aplicación de escritorio. Es más preciso que ejecutar Gaia en Firefox, pero no es tan preciso como los emuladores.
+
+ Usando los emuladores de Firefox OS
+
+ Una guía para compilar y usar los emuladores de Firefox OS y cuándo usar cada uno.
+
+ Instalando Firefox OS en un dispositivo móvil
+
+ Cómo instalar Firefox OS en un dispositivo móvil real.
+
+ Booteo doble de Firefox OS y Android en SGS2
+
+ Cómo configurar un entorno de booteo doble Firefox OS/Android en un Samsung Galaxy S2.
+
+
+

 

diff --git a/files/es/archive/b2g_os/building_b2g_for_qemu_emulator/index.html b/files/es/archive/b2g_os/building_b2g_for_qemu_emulator/index.html new file mode 100644 index 0000000000..af77d73b5f --- /dev/null +++ b/files/es/archive/b2g_os/building_b2g_for_qemu_emulator/index.html @@ -0,0 +1,37 @@ +--- +title: Compilando B2G para el emulador QEMU +slug: Archive/B2G_OS/Building_B2G_for_QEMU_Emulator +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +

Obsoleto
Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.

+ +

Éste artículo está obsoleto. Ver Compilando e instalando Boot to Gecko, una guía completa para compilar Firefox OS.

+ +

Suponemos que ya has configurado tu entorno de compilación y clonado los repositorios.

+ +

Los siguientes pasos  te permitirán compilar - y ejecutar - B2G en tu emulador.  NO ejecutar como root.

+ +

$ cd B2G
+ $ make sync

+ +

+ +

Compilar con la configuración para QEMU:
+ $ make config-qemu

+ +

Lo siguiente, construir el backend gonk y luego el propio sistema:
+ $ make gonk
+ $ make
+
+ NOTA:   si ./emu.sh - tu emulador - no se inicia a la primera, tendrás que hacerlo ejecutable:
+ $ chmod +x emu.sh
+
+ Después, ejecuta el emulador:
+ $ ./emu.sh

+ +

NOTA:  Después de clonar los repositorios o al crear tu compilación por primera vez, puedes "limpiar" them - e.g. put them into the state so that the latest pull is the same as a fresh clone.

+ +

To do this, from your repo root:
+ $ make sync; git clean -xfd; git submodule foreach "git clean -xfd"
+ Alternately, you can try:
+ $ make mrproper

diff --git a/files/es/archive/b2g_os/compilar_boot_to_gecko/index.html b/files/es/archive/b2g_os/compilar_boot_to_gecko/index.html new file mode 100644 index 0000000000..255f1a3db0 --- /dev/null +++ b/files/es/archive/b2g_os/compilar_boot_to_gecko/index.html @@ -0,0 +1,123 @@ +--- +title: Compilando Firefox OS +slug: Archive/B2G_OS/Compilar_Boot_to_Gecko +translation_of: Archive/B2G_OS/Building +--- +
+
+

Una vez que hayas preparado tu sistema para compilar y hayas realizado la clonación inicial y configurado el código, podrás compilar Boot to Gecko.

+

Actualizar tu código

+

Si no es la primera vez que compilas B2G, deberías actualizar el código antes de empezar a compilar. Para hacerlo, debes actualizar tanto las herramientas de B2G como las dependencias, usando los siguientes dos comandos:

+
git pull
+./repo sync
+
+

Puedes actualizar partes específicas del repositorio aclarando su nombre:

+
./repo sync gaia
+
+

El comando repo tiene otras opciones disponibles que pueden ser interesantes; repo help te dará mucha información.

+

Compilar

+
+

Nota: Antes de compilar, conviene que prepares un archivo .userconfig para personalizar la compilación. Mira Personalizar el archivo .userconfig para aprender cómo hacerlo.

+
+

Para compilar Boot to Gecko, debes usar simplemente la herramienta build.sh:

+
cd B2G
+./build.sh
+
+

Es hora de otra pausa para un café, o posiblemente una siesta (especialmente si es tu primera compilación). Así como en el paso de configuración de la página anterior, si usas un directorio de archivos de sistema de Android previamente extraídos, deberás establecer ANDROIDFS_DIR antes de ejecutar build.sh.

+

Compilar sólo ciertos módulos

+

Si sólo quieres compilar un módulo en particular, por ejemplo Gecko, puedes hacerlo incluyendo el nombre:

+
./build.sh gecko
+
+

Si sólo quieres actualizar una de las aplicaciones, puedes hacerlo compilando el módulo gaia y usando la variable de entorno BUILD_APP_NAME:

+
BUILD_APP_NAME=calendar ./build.sh gaia
+

Para ver una lista de los módulos que puedes compilar, haz:

+
./build.sh modules
+
+

Especificar cuántos núcleos de procesador usar

+

Por defecto, el compilador de B2G utiliza el número de procesadores que existan en tu ordenador, y establece dos como el número de tareas a ejecutar en paralelo. Puedes cambiar estos números especificando el parámetro -j cuando ejecutes build.sh. Esto es útil si estás usando el ordenador para otras cosas mientras compilas, y necesitas reducir el uso de CPU. También viene bien cuando tienes problemas con la compilación, ya que ejecutar tareas de una en una facilita la lectura de mensajes y registros.

+

Por ejemplo, para compilar ejecutando 2 tareas en paralelo, usa:

+
./build.sh -j2
+
+

El uso más común de esta opción es configurar la compilación para no ejecutar tareas en paralelo, lo cual facilita la lectura de mensajes y la resolución de errores. Para ello, usa:

+
./build.sh -j1
+
+

Construir para múltiples configuraciones regionales

+

Para crear un sistema que incluya varias configuraciones regionales, haz lo siguiente:

+

Gaia

+
    +
  1. Escoge el archivo de idioma que quieres usar. Ahora mismo hay dos en Gaia shared/resources/languages-dev.json y shared/resources/languages-all.json
    2. +
  2. Clona las configuraciones regionales que necesitas desde http://hg.mozilla.org/gaia-l10n a un directorio; nosotros usamos gaia-l10n/ . Tendrás que clonar un repositorio para cada uno de las configuraciones regionales incluidas en el archivo de idiomas.
    3. +
  3. En tu sistema, configura LOCALE_BASEDIR como la ruta absoluta al directorio que creaste en el paso 2. Configura LOCALES_FILE como la ruta absoluta al archivo que escogiste en el paso 1.
    4. +
+

Por ejemplo:

+
export LOCALE_BASEDIR=$PWD/gaia-l10n
+export LOCALES_FILE=$PWD/gecko/gaia/shared/resources/languages-dev.json
+
+

Gecko

+
    +
  1. Escoge el archivo de idioma que quieres usar. En Gecko, ahora mismo utilizamos b2g/locales/all-locales
    2. +
  2. Clona las configuraciones regionales que necesitas a un directorio; por ejemplo gecko-l10n/ . + +
    3. +
  3. Clona compare-locales.
    4. +
  4. +

    En tu sistema, configura L10NBASEDIR como la ruta absoluta al directorio que creaste en el paso 2. Configura MOZ_CHROME_MULTILOCALE como una lista de las configuraciones regionales que clonaste, separadas con espacios.

    +

    Añade el directorio compare-locales/scripts a tu PATH, y compare-locales/lib a tu PYTHONPATH.

    + Por ejemplo, + 
    export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+
    +

    Una vez hayas completado estos pasos, puedes ejecutar build.sh .

    +

    Al parecer, también es posible usar .userconfig.

    +

    Es posible que estas instrucciones cambien a medida de que avanza el proyecto.

    +

    Errores conocidos

    +
      +
    • +

      KeyedVector.h:193:31: error: indexOfKey was not declared in this scope

      +
      • +
    +

    Este error aparece cuando tu versión de gcc es demasiado reciente. Instala una versión 4.6.x de gcc/g++/g++-multilib.

    +

    Visita Prerrequisitos para compilar Firefox OS para más información.

    +
    +

    Aviso de la comunidad: Es posible utilizar gcc 4.7.x si modificas ligeramente el código de B2G (gcc te proporcionará instrucciones), pero no te podemos ayudar, ni a modificar el código ni con los errores que te puedas encontrar.

    +
    +
      +
    • +

      arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)

      +
      • +
    +

    Si ves este mensaje, lo más probable es que no tengas suficiente memoria libre. Asegúrate de tener suficiente memoria libre antes de ejecutar./build.sh. Normalmente, 4GB de ram son suficientes para compilar sin problemas.

    +
      +
    • +

      Si encuentras errores mientras el compilador está haciendo tests

      +
      • +
    +

    A veces (especialmente después de actualizar el compilador o el sistema operativo) puedes encontrarte con errores extraños mientras el compilador está haciendo test tras acabar de compilar. Algo como esto:

    + 
    Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2
    +

    En estos casos, prueba a eliminar el directorio gaia/xulrunner-sdk y haz "pull" para bajarte el código de nuevo:

    + 
    rm -r gaia/xulrunner-sdk
+
    +

    Este comando elimina la copia precompilada de XULRunner que el compilador se baja automáticamente. Cuando compiles de nuevo, el compilador obtendrá una nueva copia de XULRunner automáticamente.

    +

    Próximos pasos

    +

    Tras compilar, los pasos siguientes dependen de si has compilado Boot to Gecko para el emulador o para un teléfono móvil; lee los artículos siguientes para más información:

    + +
    5. +
diff --git a/files/es/archive/b2g_os/complementos/index.html b/files/es/archive/b2g_os/complementos/index.html new file mode 100644 index 0000000000..c6f9d4dca8 --- /dev/null +++ b/files/es/archive/b2g_os/complementos/index.html @@ -0,0 +1,58 @@ +--- +title: Complementos para Firefox OS +slug: Archive/B2G_OS/Complementos +translation_of: Archive/B2G_OS/Add-ons +--- +

Firefox OS 2.5 introduce el soporte para complementos, una característica que los usuarios de equipos de sobremesa han conocido y amado desde el principio de Firefox. Los complementos en Firefox OS son incluso aún más poderosos y pueden personalizar no solo el navegador, dando una experiencia completa con el teléfono, incluyendo modificaciones en la pantalla de inicio y aplicaciones del sistema como por ejemplo la aplicación de Correo o la de Mensajes. Esta página dice todo lo que necesitas saber para empezar con la creación de complementos para Firefox OS e involucrarse con la comunidad de desarrolladores de complementos.

+ +
+

Nota: Los complementos de Firefox OS se basan en la WebExtensions API, que tambien es compatible con Firefox para escritorio a partir de la versión 42 y es basado en la API de extensiones usada por Chrome y Opera.

+
+ +

Requisitos previos

+ +

Usted deberá seguir los pasos que se indican a continuación para empezar con el desarrollo de las extensiones.

+ +

1. Actualizar su teléfono a la versión Firefox OS 2.5

+ +

Los complementos en Firefox OS solo son compatibles con Firefox OS 2.5 y versiones posteriores. A continuación se muestra una lista con los dispositivos compatibles y cómo actualizarlos (esta lista está incompleta y se modificará en el futuro).

+ + + +

2. Habilitar la depuración USB

+ +

Ir a la aplicación de Ajustes del dispositivo, seleccione Desarrollador > Depurar vía USB > ADB y DevTools. Ahora debería ser capaz de depurar las apps instaladas mediante WebIDE, ya sea a través de un cable USB y por Wifi (no necesita cable USB.)

+ +

3. Configurar WebIDE

+ +

El herramienta de WebIDE es parte de Firefox y puede utilizarse para instalar complementos en el teléfono durante el desarrollo.

+ +

Véase también

+ +

Desarrollo

+ + + +

Distribución

+ + + +

Participar

+ + diff --git a/files/es/archive/b2g_os/consejos_uso_firefox_os/index.html b/files/es/archive/b2g_os/consejos_uso_firefox_os/index.html new file mode 100644 index 0000000000..057a2d39a9 --- /dev/null +++ b/files/es/archive/b2g_os/consejos_uso_firefox_os/index.html @@ -0,0 +1,21 @@ +--- +title: Consejos de uso de Firefox OS +slug: Archive/B2G_OS/Consejos_uso_Firefox_OS +translation_of: Archive/B2G_OS/Firefox_OS_usage_tips +--- +
+
+ Depuración remota
+
+ Como poner tu teléfono para la depuración remota.
+
+ Desbloqueando tu teléfono
+
+ Instrucciones básicas para desbloquear tu teléfono.
+
+  Hacer capturas de pantalla
+
+ Como hacer capturas de pantalla en tu teléfono con Firefox OS.
+
+  
+
diff --git a/files/es/archive/b2g_os/debugging/depurar_b2g_usando_gdb/index.html b/files/es/archive/b2g_os/debugging/depurar_b2g_usando_gdb/index.html new file mode 100644 index 0000000000..ff30152895 --- /dev/null +++ b/files/es/archive/b2g_os/debugging/depurar_b2g_usando_gdb/index.html @@ -0,0 +1,79 @@ +--- +title: Depurar B2G usando gdb +slug: Archive/B2G_OS/Debugging/Depurar_B2G_usando_gdb +translation_of: Archive/B2G_OS/Debugging/Debugging_B2G_using_gdb +--- +

+

Borrador
+ Esta página no está completa.

+ +

+

Depurar Firefox OS usando gdb es fácil. Este artículo lo ayudará a hacerlo aún más fácil.

+

Iniciar el depurador en modo proceso único

+
+

Nota: Antes de ejecutar el depurador, podría configurar un archivo .userconfig para personalizar ciertas cosas. Vea Personalización con el archivo .userconfig para más detalles.

+
+

Para reiniciar Firefox OS y ejecutarlo bajo el control de gdb, simplemente use el script run-gdb.sh:

+
./run-gdb.sh
+
+
+

Nota: Si desea depurar en el emulador, asegúrese de no tener teléfonos conectados; esto puede causar conflctos con la habilidad de gdb de conectarse al emulador.

+
+

Si ya se está ejecutando Firefox OS y desea adjuntarlo sin reiniciarlo, puede hacer algo como:

+
./run-gdb.sh attach
+
+

Depurar tareas fuera del proceso

+

Because of the threaded nature of Firefox OS, you often need to be able to debug tasks other than the main B2G task. To do this, the simplest way is to use the b2g-ps command to find out the PID of the process that you need to debug:

+
$ adb shell b2g-ps
+b2g              root      106   1     189828 56956 ffffffff 40101330 S /system/b2g/b2g
+Browser          app_0     4308  106   52688  16188 ffffffff 400db330 S /system/b2g/plugin-container
+
+

Aquí, Browser es el proceso hijo usado como el "proceso contenido" para la aplicación navegador. Así que si quiere depurar el proceso contenido, en este ejemplo, debería hacer:

+
$ ./run-gdb attach 4308
+

A veces es útil ser notificado inmediatamente de la creación de cualquier proceso hijo. Esto puede lograrse iniiando run-gdb.sh con la variable de entorno MOZ_DEBUG_CHILD_PROCESS:

+
MOZ_DEBUG_CHILD_PROCESS=1 ./run-gdb.sh
+

Habiendo hecho esto, lanzar una aplicación OOP en Firefox OS mostrará el PID de plugin-container para la nueva tarea y esperará 30 segundos, tiempo suficiente para hacer

+
$ ./run-gdb attach <pid>
+

como se mencionaba anteriormente.

+

Si está tratando de depurar algo que ocurre durante el booteo, deberá lanzar la instancia del depurador para la nueva aplicación con bastante rapidez. Una vez que el nuevo depurador fue lanzado, debería presionar inmediatamente "c" para continuar ejecutando la nueva tarea.

+

Soporte

+

Que nivel de funcionalidad se espera

+

Al menos las siguientes caracterísiticas de depuración deberían funcionar definitivamente. Si no lo hacen, lo más probable es que un simple ajuste a la configuración las haga funcionar:

+ +

Las siguientes características de depuración not están soportadas. No intente usarlas.

+ +

Solución de problemas

+

Hay unas pocas cosas que intentar cuando GDB no está funcionando como se describe anteriormente.

+

Asegúrese que el clon de B2G está actualizado

+

Siempre tenga en mente que para actualizar su clon de B2G debe ejecutar estos dos comandos:

+
git pull
+./repo sync
+

Olvidarse de git pull aquí es una típica razón por la que se terminará con un run-gdb.sh viejo y no se beneficiará de las mejoras recientes.

+

Asegúrese de adjuntarse al proceso correcto

+

Adjuntarse al proceso equivocado (ej. proceso principal de B2G en lugar del proceso Browser) podría explicar por que los breakpoints no se alcanzan.

+

Asegúrese que los símbolos se leyeron correctamente

+

En gdb, use info shared para verificar que los símbolos se leyeron correctamente:

+
(gdb) info shared
+From        To          Syms Read   Shared Object Library
+0xb0001000  0xb0006928  Yes         out/target/product/otoro/symbols/system/bin/linker
+0x40051100  0x4007ed74  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libc.so
+0x401ab934  0x401aba2c  Yes         /hack/b2g/B2G/out/target/product/otoro/symbols/system/lib/libstdc++.so
+...
+

La columna Syms Read debería decir Yes en todas partes. Quizás en algún teléfono android podría ver Yes (*) para algunas librerías del sistema o drivers; eso debería estar bien. No se debería ver ningún No.

+

Si se ve un No, ese es el primer problema y debe resolverlo antes de buscar otra cosa.

+

Busque cualquer mensaje de error en la salida de terminal justo después de tipear el comando run-gdb.sh.

+

También verifique en esa salida de terminal output que el comando GDB esté correcto. En particular, el último argumento de la línea de comando debería ser la ruta al ejecutable de b2g. Aquí hay un ejemplo correcto:

+
prebuilt/linux-x86/toolchain/arm-linux-androideabi-4.4.x/bin/arm-linux-androideabi-gdb -x /tmp/b2g.gdbinit.bjacob /hack/b2g/B2G/objdir-gecko/dist/bin/b2g
+

Verifique el valor de estas variables de GDB: solib-search-path y solib-absolute-prefix:

+
(gdb) show solib-search-path
+The search path for loading non-absolute shared library symbol files is /hack/b2g/B2G/objdir-gecko/dist/bin:out/target/product/otoro/symbols/system/lib:out/target/product/otoro/symbols/system/lib/hw:out/target/product/otoro/symbols/system/lib/egl:out/target/product/otoro/symbols/system/bin:out/target/product/otoro/system/lib:out/target/product/otoro/system/lib/egl:out/target/product/otoro/system/lib/hw:out/target/product/otoro/system/vendor/lib:out/target/product/otoro/system/vendor/lib/hw:out/target/product/otoro/system/vendor/lib/egl.
+(gdb) show solib-absolute-prefix
+The current system root is "out/target/product/otoro/symbols".
+

Si necesita ayuda, intente el canal de IRC #b2g. Si piensa que encontró un error, infórmelo en B2G issue tracker.

diff --git a/files/es/archive/b2g_os/debugging/developer_settings/index.html b/files/es/archive/b2g_os/debugging/developer_settings/index.html new file mode 100644 index 0000000000..3146b7c96d --- /dev/null +++ b/files/es/archive/b2g_os/debugging/developer_settings/index.html @@ -0,0 +1,194 @@ +--- +title: Developer settings for Firefox OS +slug: Archive/B2G_OS/Debugging/Developer_settings +translation_of: Archive/B2G_OS/Debugging/Developer_settings +--- +
+

Contained in the Firefox OS Settings app is the Developer panel. This panel offers a number of options that can make debugging your open web app on Firefox OS easier. This article covers the options available and how to make use of them.

+
+

The settings panel for developer options is intentionally buried deep to avoid having end users who have no need for these options inadvertently turning on options that make their device run more slowly or add strange visual effects to their displays. The panel looks something like this (the following is from a Geeksphone Keon running an April 2014 build of Firefox OS 2.0; yours may differ if you are running a different version):

+

+

The developer panel is reached as follows:

+ +

The following sections cover each of the options in the Developer panel, explaining what they do and why they're useful.

+
+

Importante: Estas herramientas pueden ocasionar fallos durante el uso normal del teléfono. Algunas características vienen desactivadas por defecto debido a los fallos que han sido reportados.

+
+

Ajustes para Desarrolladores

+

Depuración via USB

+

La opción "depuración remota" permite utilizar la depuración remota en tu dispositivo. Esto también activa los comandos ADB. En las versiones anteriores a Firefox 1.4 solo existe una casilla para activar estas funciones; en Firefox 1.4 y superior existen tres opciones diferentes:

+ +

HUD Desarrolladores

+

En versiones superiores a Firefox OS 1.4, seleccionando este menú entrarás a las opciones del HUD Desarrolladores.

+

+

Existen varias opciones que son explicadas a continuacion:

+ +

Cuadros por Segundo

+

Al activar esta opción se mostrarán tres números en la esquina izquierda de la pantalla, si bien estos numeros son "instantáneos" son sólo suposiciones y pueden no ser acertivos. A continuación se explica qué significa cada número:

+ +

A screenshot of Firefox OS, showing three numbers in the top left hand corner that are measurements of app framerate.

+

Time to load

+

Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time. The value shown by the tool — in the top right of the Firefox OS display — is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI, in milliseconds. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.

+

A screenshot of Firefox OS, showing a number in the top right hand corner that is a measurement of the current app startup time, in milliseconds.

+

App memory

+

Displays information on how much memory the app is using, and allows you to enable or disable the different items that use memory to show much each one is using in the current app. For example, the screen shot below only has App memory and JS objects checked, and the indicator on the bottom right is showing that the Settings app is using 414.77KB for JS objects.

+

+

Pseudo-localization

+

When enabled, pseudo-languages like Accented English and Mirrored English are available for selection in Settings > Languages.  With pseudo-localizations, you can test the localizability of your code in regular Gaia builds without having to add real language resources nor having to speak a foreign language.  For instance, you can make sure the layout scales well with longer strings, you can preview the app in a fake RTL language, or spot HTML elements wihout the data-l10n-id attribute (they will be displayed in regular English).

+

Screenshot of pseudolocales

+

You can turn pseudo-localizations on by default when you build Gaia by adding the following line into gaia/build/config/common-settings.json:

+
 "devtools.qps.enabled": true
+

Note: Pseudo-localizations are generated completely dynamically, each time an app is launched.  The performance and memory characteristics may be different than those of regular localizations.  If you specifically want to test performance of non-English languages, build multilocale Gaia with real locales.

+

Graphics settings

+

Flash repainted area

+

In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.

+

A screenshot of Firefox OS with a number of transparent overlays, showing the parts of the screen repainted with each new animation frame.

+

Enable APZ for all content (Async Pan/Zoom)

+

When enabled, the Async Pan/Zoom module allows panning and zooming to be performed on asynchronously, on another thread, with some noticeable differences to rendering behaviour. To find out more, read the MozillaWiki APZ article.

+

Overscrolling

+

This enables and disables the behaviour in Firefox 2.1+ where the display stretches in an elastic manner when you scroll past the end of a page, then shrinks back again when you stop dragging the display. The behaviour's full name is elastic overscroll.

+

Tiling (was Layers: Enable tiles)

+

Introduced in Firefox OS 1.4, this feature enables the painting of content to the screen in smaller chunks ("tiles") rather than painting the whole screen at once. This is mainly useful for platform QA work involving reducing checkerboarding and finding regression windows.

+

Simple tiling (was Layers: Simple tiles)

+

This flips between the two different content painting implementations described in the section above.

+

Low-precision painting

+

Enabling this option makes Gecko paint a low-precision (blurry) version of the content when scrolling really fast. This is useful because it's quicker to paint, and so helps us avoid displaying blank areas (i.e. checkerboarding) while scrolling quickly. It should only be visible to the user temporarily; once the user stops scrolling we fill in the low-precision areas with high-precision content.

+

Low-precision transparency

+

This is an additional flag for low-precision painting, which makes the low-precision content half transparent. This makes it a little more subtle and less jarring for the user.

+

Hardware composer (was Enable hardware compositing)

+

When enabled, this setting causes the device to use its Hardware Composer to composite visual elements (surfaces) to the screen.

+

Draw tile borders (was Layers: Draw tile borders)

+

This is very similar to the Draw layer borders option, the difference being that it also draws the borders for individual tiles as well as the borders around layers.

+

Draw layer borders

+

When this setting is enabled, a brightly colored border is added around all the different layers painted to the display — great for diagnosing layout issues.

+

A screenshot from Firefox OS showing an opened select form with the draw layers borders option enabled, resulting in colored borders being drawn on all the different rendered layers.

+

Dump layers tree

+

This option enables layers.dump, which causes a copy of the compositor's layer tree to be dumped to logcat on every frame composited to the screen; this is mainly useful for platform graphics performance work, rather than regular web development.

+

Cards View: Screenshots

+

When enabled, this specifies that app screenshots will be taken when the open apps are displayed in card view. If disabled, app icons are shown in the center of blank cards for the card view instead.

+

Window management settings

+

Software home button

+

Enabling this option creates a software home button that can provide the same functionality as the equivalent hardware button if it is not available. This is intended for future use on devices that are likely to not have hardware home buttons, like tablets.

+

Home gesture

+

Enabling this option allows you to swipe upwards towards the center from outside the screen to bring up the homescreen. Again, this can provide the same functionality as the equivalent hardware button if it is not available, and is intended for future use on devices that are likely to not have hardware home buttons, like tablets.

+

Continuous transition

+

This setting allows you to decide whether app keyboards open immediately or continuously (with a  transition). Disabling such transition effects are useful on low end devices, when they cause performance to suffer.

+

App transition

+

Turn this on and then off again and you will disable all app closing/opening transitions: all apps will now just show immediately, without the smooth animation, and keyboards will also open/close without animation. Like "Continuous transition enabled", this is meant for improving performance on low end devices, but it has more of an effect.

+

App suspending

+

If enabled, this specifies that when an app is killed in the background, it will be kept in history and reopened when you open it from homescreen/card view. If disabled, such apps are not kept in history/card view.

+

Debug settings

+

Log slow animations

+

This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded. The messages you'll get on the device will look like the following:

+
I/Gecko   ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
+
+

Geolocation output in ADB

+

Enables logging of geolocation data to adb logcat. This helps with debugging both the GPS stack (namely we get NMEA callback) and MLS use.

+

Wi-Fi output in adb

+

Enabling this option adds information about Wi-Fi to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Bluetooth output in adb

+

Enabling this option adds information about Bluetooth to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Console enabled

+

When enabled, this option lets you use the Web Console in Firefox to remotely access the console output on the device; without this option enabled, the console.log() function does nothing.

+

Gaia debug traces

+

Enabling this directly enables DEBUG traces in Gaia; see error 881672 for more details.

+
+

Note: Unfortunately, not every app supports this mechanism to print their debug log. Instead, they control a "DEBUG" flag in code directly, so enabling this flag does NOT ensure that you'll see all debug logs.

+
+

Show accessibility settings

+

This enables the accessibility settings menu, subsequently found at Settings > Accessibility. The options contained within the accessibility settings are as follows:

+

Screen reader

+

Enabling this option turns on Firefox OS's screen reader. This is technology that allows a blind person to use a Firefox OS device. Currently at a very early stage, it changes the way the standard touch events work. When the screen reader is on, you must interact with the screen as follows:

+ +
+

Note: If you have turned the screen reader on and wish to disable it again, you must navigate back to the setting via these new gestures and double-tap the checkbox once it is highlighted to turn it off again. That will restore the touch screen functionality to its default behaviour.

+
+

Note: In Firefox 1.4 and above, there is a quick toggle for the screen reader. Press volume up, then down, three times (up, down, up, down, up, down). The screen reader will instruct you to perform this same action again (volume up, down, up, down, up, down) to turn it on if it is not running, or to turn it off if it is already running. If you do not want to change the current toggle state, simply do something else. That way, you can turn it on and off at will to test your web application for accessibility without having to navigate the accessibility settings menu each time.

+

Speech volume

+

A slider that controls how loud the speech is delivered.

+

Speech rate

+

A slider that controls how fast the speech is delivered.

+

Use Marketplace reviewer certs

+

TBD

+

Shake to save system log

+

TBD

+

Verbose app permissions

+
+

Note: Introduced with Firefox 2.1

+
+

When this is enabled, developers (and privacy enthusiasts) may modify all permissions granted to installed privileged apps, using The "App Permission" pane in the Settings app. The app sub-pages under here are updated upon enabling the setting to provide a list of each API permission is requested for in the app's manifest file, along with choices to set that permission to. For example, "Schedule Alarms" appears with choices of Ask, Deny and Grant. Note that some apps may be unable to deal with changed permissions. If you experience any odd behavior, consider resetting the permission or re-installing the app.

+

Launch first time use

+

The "Launch first time use" button runs the "First-Time Use" (FTU) program; this lets you go through the initial setup and tutorial process, and is useful when trying to debug that process, or if you want to re-configure your device from scratch.

+

Software updates

+

Update channel

+

Enables you to specify different update channels to get software updates from when your device receives OTA updates. Options are nightly, aurora ... (others?)

+

Update URL

+

Enables you to specify different URLs from which to receive your updates.

+

Obsolete settings

+

This section lists settings that are no longer provided, or no longer exist in the same state, but might still be interesting if you are running an older version of Firefox OS.

+

Accessibility

+

In versions of Firefox earlier than newer 1.4 versions, this controls the accessibility settings, as explained in the Show_accessibility_settings section above.

+

Grid

+

The "Grid" option, when enabled, causes the Firefox OS display to be overlaid with a grid pattern to help you gauge positioning and alignment of items. For example, below we see the Browser app running with the Grid option enabled:

+

+

The grid's heavier lines are 32 pixels apart, both horizontally and vertically.

+

Show frames per second

+

In Firefox OS versions older than newer 1.4, enabling this displays frames per second, as explained in the Frames_per_second section above.

+

Show time to load

+

In Firefox OS versions older than newer 1.4, enabling this displays time to load information, as explained in the Time_to_load section above.

+

Rocketbar enabled

+

In Firefox OS versions older than newer 1.4, this option enables the new Firefox Rocketbar on your device, which provides a useful new way to switch between apps, search, and more. When enabled, you'll find a search icon at the top left of the device, and the RocketBar can be brought up by swiping from the top left of the device towards the bottom left.

+
+

Note: In newer versions of Firefox OS, Rocketbar is enabled automatically and cannot be turned off.

+
+

Contacts debugging output in adb

+

Enabling this option adds debugging information about contacts to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Progressive paint (was Layers: Progressive paint)

+

This was introduced to help with debugging of the Async Panning/Zoom module (APZ) during its implementation. Now APZ implementation is complete, this option is deprecated, and will be removed from future versions (see error 1003228).

+

Displayport Heuristics

+ +

These options were introduced to help with debugging of the Async Panning/Zoom module (APZ) during its implementation, specifically to allow QA to experiment with different repainting heuristics to see which resulted in the least amount of checkboarding.. Now APZ implementation is complete, these options are deprecated, and will be removed from future versions (see error 1003228).

+

Edges gesture

+

Enabling this option allows you to swipe left and right from outside the screen towards the center, to navigate to the next and previous sheets (either web pages in the browser, or views inside another app.) This basically works like the browser navigator bar in Firefox, but is enabled by default in Firefox 2.1+.

+

Keyboard layouts

+

In addition to the developer-specific options listed above, Firefox OS < 1.4's developer settings featured keyboard layout options. These let you toggle on and off the then-experimental Chinese input methods:

+

+

As of Firefox 1.4, these options have been removed. This is because the Chinese keyboard layout implementations (zhuyin and pinyin) have now been completed.

+
+

Note: For other keyboard layouts still under development, such as Japanese, we now have a build-time config to opt them in.

+
+

 

diff --git a/files/es/archive/b2g_os/debugging/index.html b/files/es/archive/b2g_os/debugging/index.html new file mode 100644 index 0000000000..a06052613e --- /dev/null +++ b/files/es/archive/b2g_os/debugging/index.html @@ -0,0 +1,74 @@ +--- +title: Depuración en Firefox OS +slug: Archive/B2G_OS/Debugging +translation_of: Archive/B2G_OS/Debugging +--- +

Hay tres tipos de depuración que puedes realizar con Firefox OS. Puedes hacer un nivel más elevado de depuración ejecutando Gaia (y por lo tanto muchas aplicaciones web compatibles con B2G) en Firefox 15 o posteriores en el escritorio, lo cual te permitirá utilizar las excelentes herramientas de desarrollador disponibles en Firefox que te ayudarán a depurar la IU de Gaia a la vez que tu aplicación web. Por otro lado puedes usar la aplicación de escritorio dedicada a B2G; o ejecutar Firefox OS en tu dispositivo móvil o en el emulador bajo el control de gdb debugger. Y hay herramientas disponibles para ti mientras ejecutes el cliente de escritorio B2G. Este artículo proporciona enlaces a información útil para todos estos métodos varios de depurar tu código de Firefox OS.

+ + + + + + + +
+

documentacion de depuracion Firefox OS

+
+
+ Depuración de aplicaciones de Firefox OS en Firefox para escritorio
+
+ Puedes utilizar Firefox de escritorio para depurar muchas aplicaciones web. Este artículo  te ofrece una guía de características de Firefox que te pueden venir muy bien mientras lo haces.
+
+ Preparándose para depurar código de Firefox OS
+
+ Antes de ponerte a usar la mayoría de herramientas integradas en Firefox para depurar código funcionando bajo Firefox OS, necesitarás realizar un poquito de trabajo de configuración previo. Este artículo te explica qué.
+
+ Utilizando el depurador
+
+ Puedes emplear el Depurador remoto integrado de Firefox para depurar código ejecutado bajo Firefox OS en un dispositivo usando una conexión compartida (tethering) o en el simulador de Firefox OS.
+
+ Usando la Consola web remota con Firefox OS
+
+ La característica Consola web remota incluida en Firefox te permite ver la salida de la consola en un dispositivo con Firefox OS.
+
+ Depurando B2G con gdb
+
+ El popular depurador gdb se puede utilizar para depurar Firefox OS y aplicaciones que estén en ejecución tanto en un dispositivo como en un emulador. Esta guía te mostrará cómo hacerlo.
+
+ Depurar utilizando el cliente de escritorio B2G
+
+ Hay una serie de características disponibles en el cliente de escritorio B2G que puedes utilizar para ayudarte a depurar tus aplicaciones. Aprende sobre ellas en este artículo.
+
+ Consejos generales para la depuración con B2G
+
+ Consejos de uso general aplicables a cualquier depuración con B2G que realices.
+
+ Personalizando el script b2g.sh
+
+ Puedes personalizar el script b2g.sh para ajustar las variables del entorno y así cambiar el comportamiento de Gecko.
+
+ Obtención de registros NSPR en B2G
+
+ Puedes usar los registros NSPR para grabar HTTP y otras redes.
+
+ Registro HTTP
+
+ Cómo registrar tráfico de red HTTP network para propósitos de depuración.
+
+

Ver todo...

+ 		+

obten ayuda de la comunidad

+

Si estás trabajando con Firefox OS, o desarrollando aplicaciones que te gustaría ejecutar en dipositivos con Firefox OS, ¡hay una serie de recursos de la comunidad que te pueden ayudar!

+ +

Y no te olvides de la netiqueta...

+
+

 

diff --git a/files/es/archive/b2g_os/debugging/personalizando_el_script_b2g.sh/index.html b/files/es/archive/b2g_os/debugging/personalizando_el_script_b2g.sh/index.html new file mode 100644 index 0000000000..fb75932f44 --- /dev/null +++ b/files/es/archive/b2g_os/debugging/personalizando_el_script_b2g.sh/index.html @@ -0,0 +1,42 @@ +--- +title: Personalizando el script b2g.sh +slug: Archive/B2G_OS/Debugging/Personalizando_el_script_b2g.sh +translation_of: Archive/B2G_OS/Developing_Firefox_OS/Customizing_the_b2g.sh_script +--- +

+

Borrador
+ Esta página no está completa.

+ +

+

En el teléfono, la aplicación b2g (que provee las APIs de Firefox OS entre otras cosas) se inicia a través del script /system/bin/b2g.sh. Se puede personalizar este script para cambiar el comportamiento de Firefox OS.

+

Establecer variables de entorno

+

Si desea establecer una variable de entorno para una ejecución simple de B2G, puede hacer lo siguiente:

+
adb shell stop b2g
+abd shell "export ENV_VAR=value && /system/bin/b2g.sh"
+
+

Si desea usar las mismas variables de entorno todo el tiempo, puede editar b2g.sh, como se describe en la siguiente sección.

+

Editando b2g.sh

+

Para depurar, usted puede desear establecer variables de entorno para conseguir inormación de registro o de otra manera afectar como se ejecuta el programa b2g. Puede hacer esto editando el script b2g.sh. No hay herramientas incluídas en el teléfono para editar este archivo en su lugar, así que necesitará copiarlo primero.

+

Connect the phone to your computer, open a terminal window, and execute the following command to edit the script:

+
adb pull /system/bin/b2g.sh
+

Edite el script para hacer todos los cambios que desee. Por ejemplo, supongamos que desea ver alguna salida de los registros (lo que require una compliación de depuración), debería agregar algo como:

+
export NSPR_LOG_FILE=/data/local/tmp/mylog.txt
+export NSPR_LOG_MODULES=Layers:5
+
+

Y luego hacer lo siguiente para subir el script b2g.sh al teléfono:

+
adb shell stop b2g
+adb remount
+adb push b2g.sh /system/bin
+adb shell chmod 0755 /system/bin/b2g.sh
+adb shell start b2g
+
+
+

Nota: /data/local/tmp es el único lugar del sistema de archivos en el que pueden escribir los procesos de contenido.

+
+

Véase también

+ +

 

diff --git a/files/es/archive/b2g_os/debugging/setting_up/index.html b/files/es/archive/b2g_os/debugging/setting_up/index.html new file mode 100644 index 0000000000..c223edb982 --- /dev/null +++ b/files/es/archive/b2g_os/debugging/setting_up/index.html @@ -0,0 +1,37 @@ +--- +title: Setting up to debug Firefox OS using Firefox developer tools +slug: Archive/B2G_OS/Debugging/Setting_up +translation_of: Archive/B2G_OS/Debugging/Setting_up +--- +
+

Firefox OS supports the same remote debugging protocol that Firefox mobile supports on Android. This means you can use the Firefox development tools to debug Gaia applications running on a Firefox OS device or emulator. In order to debug Firefox OS running on your device or on the Firefox OS Simulator, you need to use Firefox 18 or later; in addition, there are settings that need to be changed both in your desktop browser's configuration and on your Firefox OS device or simulator.

+
+
+

Note: If you want to debug apps on a Firefox OS device, and you are running Firefox 1.2+, your best option is to use the App Manager instead.

+
+

Firefox desktop

+

You need to be sure you have a build of Firefox 18 or later in order to have remote debugging support. If you don't already have a recent copy of Firefox, download the latest Nightly build to get access to all the latest features.

+

Once you're running an appropriate version of Firefox on your computer, type about:config in the URL bar and change the value of devtools.debugger.remote-enabled to true. Then you'll need to restart Firefox to get remote debugging enabled. After restarting Firefox, the Web Developer menu will have a new option, Tools > Connect...

+

Enabling debugging

+

When using the Firefox OS Simulator (or B2G Desktop), setting up for debugging is pretty easy. You don't need to do any port forwarding like you do when debugging on a physical device. Simply open your device's Developer settings and enable Remote Debugging.

+
+

Note: This no longer works on Firefox OS devices as of January 10, 2013. As of this date device builds of Firefox OS have debugging disabled. There will eventually be a way to build your own build with it re-enabled, but this doesn't exist yet. This document will be updated once that happens. In addition, the preference for turning off out-of-process support has been removed. For now, you'll need to do your debugging in the Firefox OS Simulator.

+
+

If using a real Firefox OS device, open the Developer settings and:

+ +
+

Note: If you flash your device, you'll need to redo these configuration changes.

+
+

Now you're ready to use the debugger!

+

Enabling console logging on a Firefox OS device

+

On production builds of Firefox OS, console logging (for example console.log()) is disabled by default. In order to enable it, go to your device's Developer settings and enable Console Enabled.

+

Note: read On-device console logging for more details about how to use console logging on Firefox OS.

+

See also

+ diff --git a/files/es/archive/b2g_os/developing_gaia/entendiendo_el_codigo_base_de_gaia/index.html b/files/es/archive/b2g_os/developing_gaia/entendiendo_el_codigo_base_de_gaia/index.html new file mode 100644 index 0000000000..6c1ea3499d --- /dev/null +++ b/files/es/archive/b2g_os/developing_gaia/entendiendo_el_codigo_base_de_gaia/index.html @@ -0,0 +1,104 @@ +--- +title: Entendiendo el código base de Gaia +slug: Archive/B2G_OS/Developing_Gaia/Entendiendo_el_codigo_base_de_Gaia +translation_of: Archive/B2G_OS/Developing_Gaia/Understanding_the_Gaia_codebase +--- +
+

Before you start to make your own changes to the Gaia codebase, you should understand the basics of how it is all structured, and what coding conventions are used. This article covers both of these points.

+
+

Gaia branches

+

There are many different branches in the Gaia codebase, and depending on what work you are doing (or what device you have) you might not just want to download, hack and make the master branch. Here is a brief guide to the most common repos you'll likely be interested in:

+ +

Gaia codebase structure

+

The following section outlines all the most important parts of the Gaia codebase.

+

apps/

+

This directory contains all of the main Gaia apps, both apps shown in the homescreen — such as calendar and camera — and underlying apps — such as system, homescreen, and keyboard.
+
+ The apps work in slightly different ways, but all have a number of common features, including:

+ +
+

Note: You can find more information about the apps actually work on our Gaia apps guide.

+
+

build/

+

This directory contains build scripts.

+

dev_apps/

+

This directory contains other apps that are included by customization. For example you could include custom apps that you want to include in custom builds in here.

+
+

Note: For more information about Gaia customization, read our Market customizations guide.

+
+

keyboard/

+

The keyboard directory contains keyboard dictionaries and layouts for different languages.

+

locales/

+

This directory contains a JSON file, languages_all.json, which defines what languages are supported on Gaia. For more insight into how apps are localized, read Getting started with app localization.

+

shared/

+

This directory contains a number of resources that multiple apps make use of; the most notable parts of these are:

+ +

tools/

+

The tools directory contains tools for build scripts and tests.

+

Gaia coding style

+

Gaia follows the Google JavaScript coding style.

+

Background information:

+ +

Specific rules

+
    +
  1. Make sure HTML files are declared with <!DOCTYPE html> (that is, as HTML5 documents). If you don't, Internet Explorer 9 and later will load them in compatibility mode.
    2. +
  2. Include the "use strict"; statement (just like that, including the quotes) to the top of your JavaScript files to put them into strict mode.
    3. +
  3. Always use two spaces for indentation, rather than tabs.
    4. +
  4. Please use line breaks to separate logical bits of code!
    5. +
  5. Multi-word file names should use the "underscore" character to separate words, like_this.js.
    6. +
  6. Use single quotes instead of double quotes for strings.
    7. +
  7. Use expanded conditional structures: + 
    Bad
+if (expression) doSomething();
+
+Correct
+if (expression) {
+  doSomething();
+}
    +
    8. +
  8. If you're working on the System app, check out the guidance listed here.
    9. +
+

Per commit coding style check

+

Gaia uses jshint to automatically check JS coding styles before each commit (via a git pre-commit hook). Once you submit a Pull Request to the Gaia repository, the Travis (Github Continuous Integration) server will run this linter to double check all styles are right.

+

The precommit hook script is in gaia/tools/pre-commit and will be copied to project's .git/hooks folder once a make command is executed.

+
+

Note: We used to use gjslint to check coding styles, but we have since deprecated its use as jshint is stricter and produces better results. We’ve been using JSHint since Firefox OS 1.4, and gjslint is now only recommended for legacy files that have not yet been moved to JSHint.

+
+

Running linting checks manually via Gaia

+

Before submitting a patch we recommend you run JSHint on it manually to check for any style errors.
+
+ You should look in the gaia/build/jshint directory for more details about jshint in Gaia; Gaia provides the build script for you. You can run:

+
$ make lint
+

to automatically run both the gjslint and jshint style checks. Or you can run

+
$ make hint
+

to just run the jshint style check.

+
+

Note: If you want to install jshint yourself, without using Gaia, you can use the following:

+ 
npm install jshint -g
+jshint myfile.js
+
+
+

 

diff --git a/files/es/archive/b2g_os/developing_gaia/index.html b/files/es/archive/b2g_os/developing_gaia/index.html new file mode 100644 index 0000000000..93fce20871 --- /dev/null +++ b/files/es/archive/b2g_os/developing_gaia/index.html @@ -0,0 +1,61 @@ +--- +title: Desarrollando Gaia +slug: Archive/B2G_OS/Developing_Gaia +tags: + - Construir + - Firefox OS + - Gaia + - Mozilla +translation_of: Archive/B2G_OS/Developing_Gaia +--- +
+

Gaia es la interfaz de usuario de Firefox OS y el conjunto de aplicaciones por defecto: Incluye la pantalla de bloqueo, la pantalla de inicio, marcadores, y otras aplicaciones. Esencialmente, Gaia es un conjunto de aplicaciones web complejas que se ejecutan en la capa superior de la plataforma Firefox OS. Este conjunto de articulos cubre todo lo que necesita saber para contribuir con el proyecto Gaia.

+
+

En esta guía te llevaremos a un proceso de trabajo eficaz para contribuir con Gaia — y por eso queremos decir la adición de características al codigo base de  Gaia y trabajando en errores presentes en el proyecto Gaia. El primer grupo de articulos se puden trabajar en orden, o se puede saltar a la sección que necesita para recordar un aspecto específico de el proceso.

+

Después de eso, se proporcionan materiales de referencia e información de temas adicionales.

+

+

Lo básico

+
    +
  1. Ejecutar el codigo base de Gaia
    2. +
  2. Entender el código base de Gaia
    3. +
  3. Hacer cambios en el código de Gaia
    4. +
  4. Probando los cambios en el código de Gaia
    5. +
  5. Enviar los cambios de Gaia
    6. +
+

Referencia contrucción de Gaia

+ +

Ver también

+ +

 

+

+ +
+

Join the Gaia community

+
+
Choose your preferred method for joining the discussion:
+ +
+
+ +
+
+

diff --git a/files/es/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html b/files/es/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html new file mode 100644 index 0000000000..334a44b435 --- /dev/null +++ b/files/es/archive/b2g_os/developing_gaia/running_the_gaia_codebase/index.html @@ -0,0 +1,47 @@ +--- +title: Ejecutar el codigo base de Gaia +slug: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase +tags: + - Gaia +translation_of: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase +--- +
+

Este artículo se muestra en detalle cómo ejecutar el código base de Gaia, y qué herramienta están disponibles en esta configuración.

+
+

Para empezar, debemos señalar que NO tiene que compilar Gecko, o B2G, para contribuir con Gaia. Sólo tienes que descargar el código fuente de Gaia y tendrás la capacidad de ejecutarlo y editarlo.
+
+ Hay diferentes formas de ejecutar Gaia:

+ +

Puedes encontrar información concisa de como ejecutar Gaia de estas diferentes maneras desde esta página, junto con enlaces e información detallada. En general, estos se ordenan de lo más complejo (experiencia más realista), a lo más fácil (experiencia menos realista).

+

En este artículo vamos a concentrarnos en el funcionamiento de Gaia dentro de Firefox Mulet o en el WebIDE — para la mayoría de los cambios que hagas en el código base de Gaia, este mecanismo ofrece la forma más rapida de probar los cambios, pero obviamente hay algunas características (tales como probar las API del dispositivo o la interaccíon con el hardware del teléfono) no estarán disponibles, ya que necesitara un dispositivo real.

+
+

Nota: Para obtener más ayuda con Gaia, los mejores lugares son el canal #gaia (ver Mozilla IRC para más información) y la lista de correo dev-gaia.

+
+

Ejecutar tu construcción de Gaia

+
    +
  1. Primero, hacer una bifurcación (fork) de el Repositorio de Gaia en Github.
    2. +
  2. Después, clona tu bifurcación localmente: + 
    git clone https://github.com/your-username/gaia.git
    +
    3. +
  3. Agrega tu producción (upstream) como esto: + 
    cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia
    +
    4. +
  4. Now you need to create a Gaia profile. Running make inside your repo folder creates a profile in the profile directory, which is setup for optimal debugging. It creates unpackaged (hosted versions) of the Gaia apps that can be served directly via the local HTTPD server bundled along with Firefox desktop as an extension. When you make a change you just need to refresh your browser window to see the result (as you'll see later), rather than having to rebuild the profile, repush it to the device, etc. This is really good for rapid CSS/JS/HTML hacking.
    5. +
  5. With your debug profile built, run it in Mulet or WebIDE, using the linked instructions.
    6. +
+

Troobleshooting and known issues

+

Error: Python executable "python3" is v3.x, which is not supported by gyp.

+

On some Linux distributions (eg: Archlinux), the default python is python3. This makes npm fail when running some commands (eg. when running tests). To fix it once and for all, you can run the following command:

+
npm config set python python2
+

You can look at this Stack Overflow page for other solutions.

+

Then you should delete your node_modules directory and run the failed command again.

+

Please Install NodeJS -- (use aptitude on linux or homebrew on osx)

+

So, you get this error although you think you installed it. Chances are you're running Debian or another Debian-based distribution like Ubuntu. On these distributions, NodeJS is contained in the nodejs package, and you can install the nodejs-legacy package to set up everything correctly:

+
sudo aptitude install nodejs-legacy
+

If you have issues installing this package, maybe you're using Chris Lea's PPA for Node; please remove it before moving forward.

diff --git a/files/es/archive/b2g_os/elegir_como_ejecutar_gaia_o_b2g/index.html b/files/es/archive/b2g_os/elegir_como_ejecutar_gaia_o_b2g/index.html new file mode 100644 index 0000000000..3a741cb101 --- /dev/null +++ b/files/es/archive/b2g_os/elegir_como_ejecutar_gaia_o_b2g/index.html @@ -0,0 +1,61 @@ +--- +title: Elegir cómo ejecutar Gaia o B2G +slug: Archive/B2G_OS/Elegir_como_ejecutar_Gaia_o_B2G +tags: + - B2G + - Firefox OS +translation_of: Archive/B2G_OS/Choosing_how_to_run_Gaia_or_B2G +--- +

+

Dependiendo de tus necesidades, tienes varias opciones a considerar cuando experimentes con Firefox OS o la interfaz gráfica Gaia. Puedes elegir entre las opciones que te presentamos en esta página; cada opción tiene ventajas y desventajas a tener en cuenta, y algunas opciones son más flexibles que otras.

+

Ejecutar B2G en un equipo

+

Es posible compilar un simulador de Firefox OS y ejecutar Gaia en él. Este programa está basado en Firefox pero se comporta de forma muy parecida a Firefox OS en un móvil. Actualmente, Mozilla proporciona versiones diarias de esta aplicación para desarrolladores. Si estás familiarizado con cómo compilar el código fuente de Firefox u otros proyectos en C++, puedes compilar la aplicación tú mismo siguiendo estas instrucciones.

+

Ventajas

+ +

Desventajas

+ +

Razones para utilizar el simulador B2G

+

El simulador es una sólida solución intermedia para desarollo y testeo. Es una buena manera de obtener una referencia de cómo tu aplicación o cualquier otro código funciona en un entorno similar a un móvil, sin tener que flashear un teléfono cada vez que quieras probar algo.

+
+ Atención: Antes de distribuir una aplicación, debes testearla primero en teléfonos de verdad.
+

Variantes del simulador

+

Hay diferentes variantes del simulador de Firefox OS:

+
+
+ Add-on
+
+ Esta extensión en la herramienta fundamental para testear apps en Firefox OS, y es la solución recomendada para la mayoría de usuarios. Es compatible con las herramientas para desarrolladores, agregar aplicaciones al entorno de testeo, etcétera.
+
+ Versiones "desktop" para desarrolladores
+
+ Estas versiones del simulador son aplicaciones independientes creadas para ayudar al equipo de desarrolladores de Firefox OS a verificar características técnicas.
+
+ Versiones "desktop" para traductores
+
+ Las versiones para traductores son útiles para los equipos de localización, que las usan en su trabajo y para probar las traducciones de Firefox OS y sus aplicaciones.
+
+

Ejecutar B2G en un dispositivo móvil

+

La forma más completa de probar tu código para B2G o Gaia, o tu aplicación web, es compilar e instalar Firefox OS en un dispositivo móvil de verdad. Ésta es también la forma más compleja.

+

Ventajas

+ +

Desventajas

+ +

Razones para utilizar B2G en un dispositivo móvil

+

Obviamente, ésta es la forma más realista de testear cualquier código o proyecto web en B2G o Gaia. Ejecutando en hardware real, te aseguras de que tu proyecto rinde bien, de que su presentación es correcta, y de que utiliza todos las APIs del dispositivo adecuadamente. Además, siempre debes probar tu código en hardware de verdad antes de distribuirlo; no hacerlo puede tener desafortunadas consecuencias que son difíciles de predecir.

diff --git a/files/es/archive/b2g_os/firefox_os_apps/building_blocks/index.html b/files/es/archive/b2g_os/firefox_os_apps/building_blocks/index.html new file mode 100644 index 0000000000..e3d6ceee63 --- /dev/null +++ b/files/es/archive/b2g_os/firefox_os_apps/building_blocks/index.html @@ -0,0 +1,195 @@ +--- +title: Firefox OS Building Blocks +slug: Archive/B2G_OS/Firefox_OS_apps/Building_blocks +tags: + - Design + - Design patterns + - Firefox OS + - NeedsTranslation + - TopicStub + - UI + - building blocks +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks +--- +

+ +
+

The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.

+
+ +

Using the Firefox OS Building Blocks

+ +

The code for the Firefox OS Building Blocks can be found in the Gaia Github repo under shared/style. Here, you can find a CSS file that contains the CSS for that particular Building Block, and a sub directory containing the HTML fragments and image assets. If you are creating your own standalone Web app, you can simply copy the CSS, HTML and image asset files across into your own project; if your app is intended to be installed on Firefox OS only (or you want to use these features only when the app is being used on Firefox OS), then you can link to the versions available inside Gaia.

+ +

The pages for the individual Building Block implementations can be found under the pages for each building block — see next section. These contain instructions on how to implement each one.

+ +
+

Note: The version 2.0 building block code is used in Firefox OS releases 2.0 through 2.2. Version 2.3 sees an update, with the building blocks being reimplemented using Web components — these provide the same functionality, but implemented in a much more powerful, flexible way. You'll see 2.3 pages appear underneath the main building block pages covering these Web components as soon as the information is available.

+
+ +
+

Note: We also have an old guide covering the v1.x building blocks used in older versions of Firefox OS. This is mainly for legacy information.

+
+ +

Web components preliminary setup

+ +

This section details the preliminary setup needed to use Gaia Web components.

+ +

Web components browser support

+ +

To use Gaia Web components at all, you need to run them using a browser that supports Web components. The state of support is as follows:

+ + + +

Web components are supported in Firefox OS from v2.1 onwards, although most of them weren't actually implemented until v2.3. Be aware also that currently Web components won't work for Firefox OS apps below internal (certified) level. This restriction should be lessened in the future.

+ +
+

Note: If your app is certified, the components will just work. You don't need to set a specific manifest permission.

+
+ +

Web components installation notes

+ +

Gaia Web components are installed in your app using the Bower package manager. To install this, you first need Node.js/npm and Git installed. Once they are installed you can install Bower with

+ +
npm install -g bower
+ +

At this point you could also install the Gaia Fira Sans font that Firefox OS uses in your app , with the following command:

+ +
bower install gaia-components/gaia-fonts
+ +

You can then make use of the font by including the following in your head (along with a font-family of FiraSans):

+ +
<link rel="stylesheet" type="text/css" href="bower_components/gaia-fonts/style.css"></link>
+ +

Firefox OS Building Blocks

+ +
+
+
+
Action menu
+
An action menu presents a list of actions, related to the app's content, from which the user may make a selection.
+
Banners
+
Banners (Status, in older versions of Firefox OS) provide information to the user in a transitory fashion, typically to confirm an action or to alert the user to a system event.
+
Buttons
+
Buttons are used to perform explicit actions. Buttons may be text or images.
+
Context menu
+
Accessed via a tap and hold gesture (sometimes called a long press), the Context Menu (called the Object Menu in older versions of Firefox OS) allows users to perform actions on objects without having to leave their current view.
+
Dialog
+
A Dialog (Confirm, in older versions of Firefox OS) provides the user with some important information, asks the user to take or confirm an action, or allows the user to make a choice or enter some information.
+
Drawer
+
The drawer is a scalable way for users to navigate between views or filter views. The drawer can also include links to app settings or other tools.
+
Header
+
A header is a dedicated space at the top of the screen, most often used to display the view title. It can also include navigation, action buttons and other controls.
+
Input area
+
An input area is a data entry field, and can be as simple as a text only entry field, or as complex as a multipart entry field with text entry, value selections, and buttons.
+
Layout
+
The Layout utility will help you to create common layout structures for your Firefox OS apps. Note that Layout is only available in Firefox OS 2.1 and above.
+
List items
+
List items are typically used to navigate to a new screen, or to display information or controls.
+
+
+ +
+
+
Picker
+
The Picker is designed to select a group of items as attachments for messaging and email.
+
Progress and activity
+
Progress and activity indicators provide the user with visual feedback that a process (such as a resource loading) is active.
+
Scrolling
+
Scrolling areas allow the user to move text and/or images across the device's display.
+
Search
+
Search is used to filter a list or find context-specific content.
+
Slider
+
A Slider (which was called Seekbar in older Firefox OS versions) is used to select a value from a continuous or discrete range of values by dragging the handle.
+
Select mode
+
Select Mode (which was called Edit Mode in older Firefox OS versions) is designed to select and perform actions on items.
+
Subheader
+
Subheaders are used to describe a subsection of content.
+
Switches
+
Switches (such as checkboxes, etc.) allow users to activate and deactivate items. Switches are also used to select items within a list.
+
Tab/Filter
+
A Tab/Filter gives the user a way to easily switch between views or to filter a set of data.
+
Toolbars
+
Toolbars contain actions, indicators and navigation elements associated with the current view.
+
Value selector
+
Value Selectors let the user choose from among a list of possible values.
+
+
+
+ +
+

Note: For a detailed guide to the design pattern followed by the building blocks when the Arabic locale (bidirectional) is selected, read Firefox OS in Arabic.

+
+ +

Cross browser CSS

+ +

Arnau March wrote a CSS file called cross browser CSS, containing rules to allow Firefox 2.0 building blocks to render properly across different browsers (ie 9, Firefox 18, Chrome 24, Safari 5.1.) If you want to write hosted apps that look ok across different browsers, include this CSS in your project.

+ +

Browse Firefox OS Building Block implementations by version

+ +

The pages below list links to pages covering the Firefox OS Building Block implementations as they appear in different versions of Firefox OS.

+ + diff --git a/files/es/archive/b2g_os/firefox_os_apps/index.html b/files/es/archive/b2g_os/firefox_os_apps/index.html new file mode 100644 index 0000000000..370236dd14 --- /dev/null +++ b/files/es/archive/b2g_os/firefox_os_apps/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox OS apps +slug: Archive/B2G_OS/Firefox_OS_apps +tags: + - Apps + - Building + - Components + - Firefox OS + - Installing + - NeedsTranslation + - TopicStub + - device APIs +translation_of: Archive/B2G_OS/Firefox_OS_apps +--- +

This section of the Firefox OS docs covers the specific techniques required — and available tools — for building Firefox OS apps. You'll find a number of details below, from Firefox OS building blocks/web components, to device APIs and App installation.

+ +

Building Firefox OS apps

+ +
+
Building apps for Firefox OS
+
Firefox OS/Firefox platform app specifics, including App installation and management APIs, manifest files, packaged and hosted apps, handling API permissions.
+
Localization
+
This set of articles provides information for developers wishing to provide localized versions of their apps.
+
Performance
+
This page lists performance-related topics specific to Firefox OS.
+
Firefox Accounts on Firefox OS
+
This article provides an overview of using Firefox Accounts in Firefox OS.
+
Reference apps
+
This page lists a number of sample apps we've put together for you to download, install, play with and learn from. Have fun!
+
Screencast series: App Basics for Firefox OS
+
In this collection of short videos, developers from Mozilla and Telenor explain in a few steps how you can get started with building applications for Firefox OS.
+
+ +

Building blocks

+ +
+
Building Blocks
+
The Firefox OS Building Blocks are reusable UI components (also called 'common controls') that reflect OS-wide design patterns. Building Blocks are used to create the interfaces of all Gaia default apps. You are free to make use of these components in your own Firefox OS apps, or general Web apps.
+
+ +

Styleguides

+ +
+
Firefox OS Visual styleguide
+
Our style guide for Firefox OS visual design, covering colours, typeface, backgrounds, app icons, and the design of specific UI elements.
+
Firefox OS Copy styleguide
+
This guide outlines the rules we follow for writing Firefox OS app copy, but can be used as a general guide to writing good copy for any app interfaces.
+
Firefox OS in Arabic
+
A guide to the specific UX design implementation Firefox OS has in place for dealing with Arabic (and other RTL languages.)
+
+ +

Assets

+ +
+
Firefox OS design asset library
+
In this section you'll find design assets, artwork, graphic templates, fonts and other materials that will be helpful as you design Firefox OS/Gaia apps.
+
Firefox OS icon font
+
Firefox OS has its own icon font set available: this article explains how to use it in your own apps.
+
Firefox OS transitions
+
A reference to some of the transitions used in Firefox OS to move between different states in apps, including animated GIFs demonstrating the animations used, plus code samples to show the CSS animation code needed to implement these animations.
+
+ +

References

+ +
+
Firefox OS device APIs
+
This article provides a list of pages covering those APIs, as well as the app manifest permissions for each one.
+
Firefox OS app tools
+
This page provides a list of useful tools, libraries, examples, etc. that are useful for Firefox OS app developers, whether you want a code template to copy, or need help with adding a specific feature to your Firefox OS app.
+
+ +

Other app topics

+ +
+
Porting Chrome apps to Firefox OS Apps
+
This article discusses the differences between Chrome apps and Firefox OS Apps, and how you can convert between the two.
+
App development FAQ
+
This FAQ is a compilation of answers to common app development questions.
+
+ +

See also

+ + diff --git a/files/es/archive/b2g_os/firefox_os_build_prerequisites/index.html b/files/es/archive/b2g_os/firefox_os_build_prerequisites/index.html new file mode 100644 index 0000000000..f21ca58901 --- /dev/null +++ b/files/es/archive/b2g_os/firefox_os_build_prerequisites/index.html @@ -0,0 +1,204 @@ +--- +title: Prerrequisitos para compilar Firefox OS +slug: Archive/B2G_OS/Firefox_OS_build_prerequisites +translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites +--- +

Antes de bajarte el código fuente para compilar Firefox OS, necesitas un sistema de compilación configurado correctamente. Ahora mismo, es posible compilar en distribuciones Linux de 64 bits, y en Mac OS X.

+

Necesitas un teléfono móvil compatible o un emulador

+

Esto es importante. Aunque hay varios teléfonos compatibles, algunos de ellos tienen variantes y es posible que sólo algunas de esas variantes sean compatibles. Además, algunos teléfonos son más compatibles que otros. Ahora mismo, puedes utilizar Firefox OS / B2G en los siguientes teléfonos y dispositivos:

+

Categoría 1

+

Dispositivos de Categoría 1 son aquellos que recomendamos para tareas de desarrollo, porque son los que primero reciben nueva funcionalidad y soluciones a problemas y errores. Los dispositivos de Categoría 1 son:

+
+
+ Unagi
+
+ Unagi es un teléfono que usamos como plataforma de prueba y desarrollo para smartphones simples o de mediana capacidad. Muchos de los desarrolladores del equipo de Firefox OS utilizan Unagi.
+
+ Otoro
+
+ Otoro es un teléfono que usamos como plataforma de prueba y desarrollo para smartphones simples o de mediana capacidad. Muchos de los desarrolladores del equipo de Firefox OS utilizan Otoro.
+
+ Pandaboard
+
+ Pandaboard es una mini placa base que se usa en el desarrollo de plataformas móviles. La placa está basada en la arquitectura OMAP 4.
+
+ Emulator (ARM and x86)
+
+ Hay dos emuladores: uno emula código ARM y el otro ejecuta en código x86.
+
+ Ordenador
+
+ También puedes construir una versión de Firefox OS para ordenador que ejecuta Gecko en una aplicación XULRunner y utiliza la experiencia de usuario que proporciona Gaia
+
+

La versión para ordenador y los emuladores no requieren teléfono.

+

Categoría 2

+

Los teléfonos de Categoría 2 en general funcionan, y muchos desarrolladores, especialmente desarrolladores de aplicaciones, los utilizan; pero tienden a recibir cambios y novedades más tarde.

+
+
+ Samsung Nexus S
+
+ Los modelos de Nexus S que sabemos funcionan son el GT-I9020A y el GT-I9023. Es posible que otros modelos también funcionen.
+
+ Samsung Nexus S 4G
+
+ El modelo SPH-D720 es compatible como Categoría 2.
+
+

Categoría 3

+

Se puede construir Firefox OS para estos teléfonos, pero los desarrolladores del equipo de Firefox OS no trabajan en ellos regularmente, así que su funcionamiento y funcionalidad puede que sean significativamente peores que los de Categorías 1 y 2.

+
+
+ Samsung Galaxy S2
+
+ El único modelo que funciona es el i9100. Ninguna de las otras variantes es oficialmente compatible. (Es posible que el i9100P también funcione, ya que la única diferencia es la adición del chip NFC).
+
+ Samsung Galaxy Nexus
+
+ En estos momentos no sabemos de ninguna variante que no sea compatible.
+
+
+ Importante: Sólo son compatibles los teléfonos que utilizan como mínimo Android 4 (alias Ice Cream Sandwich). Si tu teléfono se menciona en esta página pero usa una versión de Android más antigua, actualízalo primero.
+

Requisitos para Linux

+

Para compilar en Linux, necesitas:

+ +

Estos requisitos son más que el mínimo indispensable, pero los recomendamos porque la construcción puede fallar debido a falta de recursos.

+

Puedes utilizar otras distribuciones, pero recomendamos Ubuntu 12.04 porque es el sistema que más gente utiliza sin dar problemas. Distribuciones que quizá no funcionen: distribuciones de 32 bits y distribuciones recientes (Ubuntu 12.10, Fedora 17/18, Arch Linux debido a gcc 4.7).

+

También necesitas instalar las siguiente utilidades:

+ +

Ejemplos de instalación de 64 bits:

+

Ubuntu 12.04 / Linux Mint 13 / Debian 6

+
$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make
+

Cuando compiles en Ubuntu 64 bits, es posible que necesites crear enlaces simbólicos (symlinks) a las versiones de 32 bits de libX11.so y libGL.so:

+
$ sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+$ sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so
+

Ubuntu 12.10

+
$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make
+

Además del paso ya explicado para solucionar el problema con las versiones 32 bits de libX11.so y libGL.so, también necesitas especificar GCC 4.6 como el compilador del host por defecto antes de empezar a construir. Una vez que te hayas descargado el código, lee nuestras instrucciones al respecto.

+

Fedora 16:

+
$ sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686
+

Arch Linux (distribución aún incompatible):

+
$ sudo pacman -S --needed alsa-lib autoconf2.13 bison ccache curl firefox flex gcc-multilib git gperf libnotify libxt libx11 mesa multilib-devel wireless_tools yasm lib32-mesa lib32-ncurses lib32-readline lib32-zlib
+

Por defecto, Arch Linux utiliza Python3. Necesitas forzar el uso del antiguo python2:

+
$ cd /usr/bin
+
+$ sudo ln -fs python2 python
+

Requisitos para Mac OS X

+

Para compilar Firefox OS con Mac OS X, necesitas instalar Xcode, que está disponible en el Mac App Store.

+

Instalar las Utilidades de Línea de Comandos (XCode 4.3.1 y versiones más recientes)

+

Xcode 4.3.1 (OS X 10.7 "Lion") y versiones más recientes como 4.4.1+ (Mac OS X10.8 "Mountain Lion") no incluyen necesariamente las Utilidades de Línea de Comandos. Cuando instales Xcode, abre las Preferencias, luego el Panel de Descargas, e instala las Utilidades de Línea de Comandos. Además, asegúrate de que tienes como mínimo 20 GB de espacio libre en el disco duro.

+

Imagen de la opción de para bajarse la Utilidades de Línea de Comandos en Xcode

+
+ Atención: El emulador de Firefox OS necesita un procesador Core 2 Duo o más reciente, es decir, un sistema compatible con Mac OS X 10.7 "Lion". No tienes por qué utilizar Lion, pero tu sistema debe ser compatible con Lion. Esto es sólo para el emulador: puedes construir Firefox OS en Macs más antiguos.
+

Cómo iniciar Firefox OS en Mac

+

Abre una consola y ejecuta el comando siguiente:

+
curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash
+

Este comando obtiene y ejecuta un programa de inicio que se asegura de que tienes todo lo necesario para compilar el emulador. También solicitará permiso para instalar cualquier cosa que falte. El programa buscará e instalará lo siguiente:

+ +
+

Xcode

+

Si ya has actualizado Xcode a la versión 4.4+ pero recibes un mensaje diciendo que Xcode necesita actualización, revisa la ruta de Xcode con este comando:

+ 
xcode-select -print-path
+ Si la ruta todavía apunta a /Developer puedes actualizarla haciendo: + 
sudo xcode-select -switch /Applications/Xcode.app
+ Asegúrate también de que el SDK de Mac OS X 10.6 existe en: + 
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+

Si no existe, tendrás que extraerlo y copiarlo del archivo DMG de Xcode 4.3, que está disponible en el Portal para desarrolladores de Apple. Puedes usar una utilidad que se llama Pacifist para extraer el SDK 10.6. Asegúrate de crear un enlace simbólico (symlink) entre el SDK y el directorio /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/

+

Mountain Lion

+
+

Si construyendo en OS X 10.8 "Mountain Lion" (Xcode 4.4.1 o más reciente) te encuentras un error como éste:

+ 
external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)
+ Edita el archivo: B2G/external/qemu/makefile.android y añade en la línea 78:
+ 
MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+
+
+ Si usando Mountain Lion, y durante la instalación de las dependencias vía homebrew, te encuentras un error como éste:
+
+
+
+ 
clang: error: unable to execute command: Segmentation fault: 11
+

... prueba a reinstalar las dependencias manualmente añadiendo la opción --use-gcc como se muestra en el ejemplo:

+ 
brew install mpfr --use-gcc
+
+

Samsung Galaxy S2

+

Si tu intención es compilar para el Samsung Galaxy S2, también necesitarás instalar heimdall. Para más información, visita {{ anch("Instalación de heimdall") }}. ¡El programa de inicio no ejecuta este paso!

+
+ Atención: Si has instalado la utilidad Samsung Kies, que se utiliza para administrar los contenidos de muchos teléfonos Samsung, tienes que eliminarla antes de flashear Firefox OS en el teléfono. En Windows, puedes utilizar el procedimiento estándar para remover aplicaciones; en Mac, la imagen de Kies incluye una utilidad para desinstalar Kies completamente. Flashear Firefox OS fallará si tienes Kies instalado. Si se te olvida eliminar Kies, el sistema de compilación lo detectará y te recordará que debes desinstalarlo. Ten en cuenta que la utilidad de desinstalación no elimina correctamente el directorio ~/Library/Application Support/.FUS, y deja una referencia a cierta utilidad en ese directorio en la lista de programas a ejecutar en inicio. Necesitas eleminar el directorio y la refencia manualmente.
+
+ Atención: Mac OS X utiliza un sistema de archivos que ignora las mayúsculas, lo que no te permitirá construir Firefox OS en el futuro (NOTA DEL EDITOR: yo nunca he tenido problemas con esto). Te recomendamos que generes una imagen de disco "sparse" sensible a las mayúsculas y que trabajes desde ese directorio. Para construir una imagen de disco "sparse" sensible a las mayúsculas ejecuta:
+
hdiutil create -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.dmg
+

Monta la imagen ejecutando:

+
open ~/firefoxos.dmg
+

Navega al directorio de la imagen montada con:

+
cd /Volumes/untitled/
+

Cómo arreglar la dependencia de libmpc si no funciona

+

gcc 4.6 fue creado con libmpc 0.9; si utilizas homebrew para actualizar paquetes, libmpc se actualiza a la versión 1.0, pero homebrew no recompila gcc 4.6 tras el cambio de versión. Por ello debes crear un enlace simbólico (symlink) para asegurarte de que todo funciona correctamente. Creas el enlace así:

+
cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib
+

Opcional: Instalación de HAX

+

Intel proporciona un "driver" especial que permite al emulador x86 de B2G ejecutar código nativamente en el Mac en lugar de emularlo. Si quieres utilizar esta opción, puedes bajártela e instalarla. No es obligatorio, pero puede mejorar la estabilidad y velocidad de la emulación.

+

Instalación de adb

+

El proceso de compilado necesita obtener bloques binarios de la instalación de Android en el teléfono antes de compilar B2G (a menos, claro, que estés compilando el emulador). Para ello necesitas adb, el "Android Debug Bridge".

+

Para obtenerlo, debes instalar el paquete básico del Android SDK (Android SDK starter package) para tu versión de Android. Luego, ejecuta el gestor de paquetes haciendo $SDK_HOME/tools/android, y usa la interfaz gráfica para instalar las herramientas de sistema del Android SDK (Android SDK Platform-tools).

+

adb será instalado en $SDK_HOME/platform_tools. Asegúrate de añadir este directorio a tu PATH. Para ello, añade esta línea:

+
PATH=$SDK_HOME/platform_tools:$PATH
+

a tu ~/.bashrc o equivalente, sustituyendo $SDK_HOME con el directorio del Android SDK. También es recomendable ejecutar:

+
adb pull /system <backup target dir>/system
+
+

para hacer una copia de seguridad de la partición de Android en tu teléfono. Así tendrás una copia de todos los bloques binarios para Android en caso de que quieras eliminar los archivos de B2G. Dependiendo del teléfono, también necesitas hacer copia de seguridad de los directorios /data y/o /vendor:

+
adb pull /data <backup target dir>/data
+adb pull /vendor <backup target dir>/vendor
+
+

Instalación de heimdall

+

Heimdall es una utilidad para flashear el Samsung Galaxy S2. B2G la utiliza para reemplazar los contenidos del teléfono con Firefox OS, y para flashear versiones nuevas de B2G y Gaia. Necesitas Heimdall para instalar Firefox OS sólo en el Galaxy S2; no es necesaria para ningún otro teléfono. Para otros móviles, se construye y utiliza la utilidad fastboot.

+
+ Atención: Recuerda que heimdall se necesita sólo para instalar Firefox OS en el Samsung Galaxy S2.
+

Hay dos maneras de instalar heimdall:

+ +

Configuración de ccache

+

El tamaño estándar de ccache es 1GB; la compilación de B2G enseguida agota esta capacidad. Puedes cambiar el tamaño de tu cache con este comando:

+
$ ccache --max-size 2GB
+

Configuración de la regla udev en tu móvil

+

Llegado a este punto, puedes obtener el código de identificación del fabricante del USB ejecutando lsusb, pero por lo general es Google (código 18d1) o Samsung (código 04e8). Por tanto, añadir la línea siguiente:

+
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+

al archivo /etc/udev/rules.d/51-android.rules debería funcionar.

+

Guarda los cambios, cierra el archivo, y hazlo legible:

+
$ sudo chmod a+r /etc/udev/rules.d/51-android.rules
+
+

Configurar el teléfono

+

Antes de conectar tu teléfono al puerto USB, pon el USB en modo desarrollo, lo que te permitirá acceder al teléfono para depurar y flashear. Para ello, abre la aplicación de Ajustes, accede a la sección de Aplicaciones > Desarrollo, y selecciona la opción "Depuración USB".

+

Siguiente paso

+

Llegado a este punto, ¡ya estás listo para bajarte el código de Firefox OS!

diff --git a/files/es/archive/b2g_os/gaia_hacking_guide/index.html b/files/es/archive/b2g_os/gaia_hacking_guide/index.html new file mode 100644 index 0000000000..8d4ba30890 --- /dev/null +++ b/files/es/archive/b2g_os/gaia_hacking_guide/index.html @@ -0,0 +1,6 @@ +--- +title: Guía para hackear Gaia +slug: Archive/B2G_OS/Gaia_hacking_guide +translation_of: Archive/B2G_OS/Developing_Gaia +--- +

La guía para hackear Gaia aún no ha sido escrita. Sin embargo,  puedes hacer referencia a este artículo en el wiki de Mozilla, por el momento.

diff --git a/files/es/archive/b2g_os/gonk/index.html b/files/es/archive/b2g_os/gonk/index.html new file mode 100644 index 0000000000..e524f46f74 --- /dev/null +++ b/files/es/archive/b2g_os/gonk/index.html @@ -0,0 +1,23 @@ +--- +title: Gonk +slug: Archive/B2G_OS/Gonk +translation_of: Archive/B2G_OS/Platform/Gonk +--- +

+

Borrador
+ Esta página no está completa.

+ +

+
+

Gonk es un sistema operativo de bajo nivel de la plataforma Firefox OS que consiste de un kernel Linux basado sobre el Android Open Source Project (AOSP) y una capa de abstracción de hardware (HAL). Este artículo intenta explicar qué constituye Gonk; para obtener más información sobre la arquitectura general del Firefox OS y cómo Gonk encuadra en ella, lea nuestra guía sobre la Arquitectura de Firefox OS.

+
+

Panorama de Gonk

+

En el código fuente de Gecko hay una carpeta b2g\ que contiene el Gonk Port, el cual habilita las capacidades del hardware móvil para la Web. Consiste de un núcleo, o kernel, Linux, HAL y otras librerías OEM específicas. Varias librerías Gonk son proyectos de código abierto comunes: libusb, bluez, etcétera. Algunas de las otras partes de la HAL están compartidas con el Proyecto Android: GPS, cámara y otros.

+

Gonk es una capa de adaptación (port) de dispositivos: un adaptador entre el hardware y Gecko. Gonk es una distribución de Linux bastante sencilla que puede ser tratada como un adaptador Gecko empardado con capas de adaptación Gecko —entonces Gonk es un objetivo para adaptar Gecko a Firefox OS así como también hay adaptadores de Gecko para OS X, Windows y Android.

+
+

Nota: debido a que diferentes dispositivos móviles pueden tener diferentes chips y otras especificaciones de hardware, los dispositivos pueden tener diferentes distribuciones de Gonk.

+
+

Como el Proyecto Firefox OS goza de control total sobre Gonk, podemos exponer interfaces a Gecko que no podrían ser expuestas en otros sistemas operativos. Por ejemplo, Gecko posee a través de Gonk acceso directo al conjunto completo de telefonía y al buffer de pantalla.

+

Código fuente de Gonk

+

El repositorio B2g en Github contiene soporte oficial para todas las adaptaciones de Gonk para una variedad de dispositivos, así que puede tratarlo como un repositorio de Gonk. La lista de dispositivos soportados está en B2g/config.sh.

+

La mayor parte del trabajo diario realizado en Gonk implica adaptar el sistema a diferentes placas y asegurarse de que Gecko responda bien a los diferentes dispositivos.

diff --git a/files/es/archive/b2g_os/index.html b/files/es/archive/b2g_os/index.html new file mode 100644 index 0000000000..05e4a3fabb --- /dev/null +++ b/files/es/archive/b2g_os/index.html @@ -0,0 +1,94 @@ +--- +title: B2G OS +slug: Archive/B2G_OS +tags: + - B2G + - B2G OS + - Basic + - Empezando con B2G OS + - Gaia + - Gecko + - Gonk + - Mozilla + - Overview + - Principiante + - SO web Gecko + - SO web basado en Mozilla + - b2g smartphone os +translation_of: Archive/B2G_OS +--- +
B2G OS es un sistema operativo completo e independiente para un internet abierto. Es un proyecto de código abierto desarrollado por la comunidad de Mozilla, y conforma la base de los productos para Firefox OS.
+ +

B2G OS es un sistema operativo de código abierto mantenido por la comunidad, para teléfonos inteligentes, tabletas, televisiones inteligentes, y otros dispositivos conectados. El proyecto se comenzó en 2011, y está basado en el kernel de Linux y en el motor de renderizado Gecko. Toda la interfaz de usuario está hecha con tecnologías web (HTML, CSS y JavaScript), y se puede utilizar para lanzar y utilizar aplicaciones web. Desde que Mozilla discontinuó su programa comercial de Firefox OS para teléfonos inteligentes, la parte de teléfonos del proyecto es mantenida enteramente por la comunidad de voluntarios de Mozilla, y se ha renombrado a B2G OS.

+ +

+ +
+

Nota: Se ha realizado una Llamada a contribuir y una Llamada para la adopción de Apps para reunir a más gente, ¡siéntete libre de compartirlo!

+
+ +
+
+

Cómo puedes ayudar

+ +
    +
  • Reporta y soluciona bugs (el bug principal es el bug 1252143).
    • +
  • Ayúdanos a solucionar pruebas fallidas.
    • +
  • Migra a gaia una app de teléfono: +
      +
    1. Conviértela en una aplicación web (ó)
      2. +
    2. Conviértela en chrome:// (por qué?) y repórtalo
      3. +
    +
    • +
  • Porta B2G OS a tu teléfono, o ayúdanos a mantener una portabilidad.
    • +
  • Ayuda a mejorar y traducir esta documentación y la wiki.
    • +
  • Propón e implementa nuevas funcionalidades para teléfonos inteligentes.
    • +
+
+ +
+

Involúcrate

+ + + +

Para participar en reuniones y en los Grupos de Trabajo de la comunidad, regístrate en este Calendario. Se anuncia en Discourse, donde puedes encontrar información sobre cómo asistir y notas.

+
+ +
+

Dispositivos compatibles

+ + + +

Para más información visita esta página.
+ Flashea tu dispositivo fácilmente con B2G installer.
+ ¿Tu dispositivo no está en la lista? Prueba Mulet para escritorio.

+ +

*TEP = Trabajo En Progreso.

+
+
+ +

+

+

Nota: Se han movido algunas páginas a los Archivos de MDN — Haznos saber si tienes problemas para encontrar algo o si hay algo en los archivos que crees que debería regresar a esta sección.

+
+

diff --git a/files/es/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/es/archive/b2g_os/installing_on_a_mobile_device/index.html new file mode 100644 index 0000000000..690ea49147 --- /dev/null +++ b/files/es/archive/b2g_os/installing_on_a_mobile_device/index.html @@ -0,0 +1,79 @@ +--- +title: Instalar Firefox OS en un dispositivo móvil +slug: Archive/B2G_OS/Installing_on_a_mobile_device +tags: + - Firefox OS + - Flashear + - Galaxy S2 + - i9100 +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +

+

Una vez que se ha construido Boot to Gecko para un dispositivo móvil compatible, puede instalarlo. Este artículo le guiará a través del proceso.

+
+ Nota: La primera vez que flashea su teléfono, deberá tener Android 4 (Ice Cream Sandwich) instalado. De lo contrario el proceso no funcionará correctamente. Una vez que usted ha hecho su primera instalación de B2G, sin embargo, sólo tiene que actualizar en la parte superior de la misma.
+

Instalando ADB

+

En OSX:

+

Si tienes homebrew en OSX:

+
brew install android-platform-tools
+
+

De lo contrario descargue las Herramientas para Desarrolladores Android y agrega los binarios a tu PATH.

+

En Ubuntu:

+
sudo apt-get install android-tools-adb
+

Flasheando su telefono

+

Para actualizar todo a su teléfono, sólo tiene que conectar el teléfono y el tipear:

+
./flash.sh
+
+

Eso es todo. El B2G que tienes actualmente en construcción flasheara el dispositivo.

+

Configuración de la regla de udev para su dispositivo

+

En Linux, si obtine,

+
< waiting for device >
+

probablemente significa que usted no ha añadido una regla udev para el dispositivo fastboot, que no es el mismo que el de adb. Usted puede obtener el ID de proveedor USB al ejecutar lsusb ahora, pero por lo general es de Google: 18d1, por lo que añadir esta línea en el archivo / etc/udev/rules.d/51-android.rules funcionaría:

+
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+
+ Nota: Si usted recibe un error libusb muy útil "-3" en Linux, esto significa que usted tiene que ser root para tener el acceso necesario para el dispositivo USB. Ejecute el script de nuevo usando sudo.
+
+ Nota 2: Si tienes un un teléfono Keon Geeksphone o Unagi, necesita dos líneas como esta - una para la identificación del proveedor original del teléfono y otra para la de Google.
+

Notas especiales para el Samsung Galaxy S2

+

Si el teléfono es un Galaxy S2 y utiliza Heimdall 1.3.2 (la versión más reciente, use heimdall version para comprobar), es posible que vea un error alarmante "FACTORYFS upload failed!" seguido de "Heimdall flashing failed" y alguna información adicional. Esto es realmente una condición de finalización satisfactoria, y se puede hacer caso omiso de los consejos.

+
+  
+
+ Para deshacerse de este extraño comportamiento, tomar una copia de origen de Heimdall, degradar a la versión 1.3.1 ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06"), luego compilarlo según el README, a continuación, instalarlo para que el error desaparezca. Sin embargo, esto no es estrictamente necesario.
+
+  
+
+ Todas las versiones de Heimdall son incapaces de flashear una system.img mayor que 100 MB. hacer:
+
ls -l ./out/target/product/galaxys2/system.img
+
+

para ver qué tan grande es el suyo. Si es demasiado grande, pregunte en el IRC para aconsejarlo; hay maneras de hacerlo en dos etapas.

+

Paso añadido para el Samsung Galaxy S2

+

Si está flasheando el Galaxy S2, hay un paso adicional a seguir. Gaia no consigue flashear automáticamente por el script flash.sh, necesitará hacer también:

+
./flash.sh gaia
+
+

Flasheando particiones específicas para teléfonos fastboot

+

Usted puede flashear particiones específicas para teléfonos fastboot (es decir, cualquier teléfono que no sea el Samsung Galaxy S2). Por ejemplo:

+
./flash.sh system
+./flash.sh boot
+./flash.sh user
+
+

Actualización de módulos específicos

+

Puede actualizar los componentes específicos de B2G especificando sus nombres cuando flashea. Por ejemplo:

+
./flash.sh gaia
+./flash.sh gecko
+
+

Para actualizar sólo una aplicación puede utilizar la variable de entorno BUILD_APP_NAME:

+
BUILD_APP_NAME=calendar ./flash.sh gaia
+

Próximos pasos

+

En este punto, el teléfono debe estar ejecutando Boot to Gecko! Es hora de experimentar, escribir algo de código, prueba, o hacer algo de depuración!

+
+ Note: Un consejo útil de uso: si su estructura de B2G se inicia con la pantalla de bloqueo solicitar un código de acceso para desbloquear el teléfono, el código por defecto es 0000.
+

Solución de problemas

+

Aquí hay algunos consejos sobre qué hacer si el dispositivo no funciona correctamente después de instalar B2G, o actualizar a una nueva versión

+

Si la interfaz de usuario no se inicia

+

Si actualizas el teléfono y la interfaz de usuario no inicia, puede restablecerla para limpiar configuración fuera de fecha y similares. Esto puede traer de vuelta a la vida. He aquí cómo:

+
cd gaia
+make reset-gaia
+
+

"la imagen es demasiado grande" mensaje de error en la ejecución ./flash.sh

+

Podría significar que el teléfono necesita ser arraigada primero antes de flashear ella. Como b2g tiene que ser escrito en la partición root, el teléfono debe estar enraizado con el fin de instalarlo.

diff --git a/files/es/archive/b2g_os/introduction/index.html b/files/es/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..76ac08d8c4 --- /dev/null +++ b/files/es/archive/b2g_os/introduction/index.html @@ -0,0 +1,27 @@ +--- +title: Introducción a Firefox OS +slug: Archive/B2G_OS/Introduction +translation_of: Archive/B2G_OS/Introduction +--- +

Firefox OS (también llamado por su nombre clave "Boot to Gecko" o "B2G") es el sistema operativo de código abierto de Mozilla basado en Linux y la tecnología Gecko de Mozilla. La idea es esencialmente tener todo el software accesible al usuario ejecutándose en el teléfono siendo una aplicación web que use técnicas avanzadas de HTML5 y APIs de dispositivos para acceder al hardware del teléfono directamente vía JavaScript.

+

Para los desarrolladores web, la parte más importante a entender es que la interfaz de usuario completa es una aplicación web, que es capaz de mostrar e iniciar otras aplicaciones web. Cualquier modificación que haga a la interfaz de usuario y cualquier aplicación que crees para ejecutarse en Firefox OS son páginas web, aunque con acceso mejorado al hardware del dispositivo móvil y sus servicios.

+

Puede aprender cómo construir e instalar Firefox OS siguiendo nuestra guía práctica.

+

Tips de uso

+

Esta sección proporciona algunos consejos que realmente le ayudarán a usar Firefox OS. Esto es algo así como un marcador de posición hasta que tengamos real documentación de uso.

+

Desbloqueando el teléfono

+

Si tu versión de Firefox OS inicia preguntando por una clave para desbloquear el dispositivo, el código por defecto es 0000. Algunas versiones harán eso mientras desarrollamos y probamos la pantalla de bloqueo.

+

Capturando una pantalla

+

Actualmente no hay soporte en el dispositivo para capturar pantalla. Sin embargo, puede hacer desde la terminal en la computadora Linux o Mac OS X que tenga un sistema de construcción de Firefox OS instalado.

+
    +
  1. Asegúrese que tiene ffmpeg instalado. +
      +
    1. En Mac, si usa MacPorts, puede hacerlo con sudo port install ffmpeg. Para homebrew, haga brew install ffmpeg.
      2. +
    2. En Linux (Ubuntu/Debian), utilice sudo apt-get install ffmpeg.
      3. +
    +
    2. +
  2. Conecte su teléfono a la computadora usando un cable USB.
    3. +
  3. Navegue en su teléfono a cualquier situación donde desea obtener la captura de pantalla.
    4. +
  4. cd hacia el directorio B2G/gaia
    5. +
  5. make screenshot
    6. +
  6. Ahora puede tener una captura de pantalla llamada screenshot.png.
    7. +
diff --git a/files/es/archive/b2g_os/phone_guide/fairphone/index.html b/files/es/archive/b2g_os/phone_guide/fairphone/index.html new file mode 100644 index 0000000000..9f09a19917 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/fairphone/index.html @@ -0,0 +1,186 @@ +--- +title: Fairphone +slug: Archive/B2G_OS/Phone_guide/Fairphone +tags: + - B2G + - Celular + - Comercio justo + - Dispositivo + - Fairphone + - Firefox OS + - Gaia + - Guía +translation_of: Archive/B2G_OS/Phone_guide/Fairphone +--- +
+

Advertencia: Este dispositivo todavía no ejecuta Firefox OS, pero este es el objetivo final. Esta página pretende ser un punto central de información para la comunidad de la coordinación del trabajo de portabilidad.

+
+ +

El Fairphone es un smartphone de economía justa; centrado en el abastecimiento, la producción, la distribución, la auto-reparación y el reciclaje de productos electrónicos. No es completamente hardware software libre, pero es compatible con la idea de devolver al menos algún tipo de control de hardware para los usuarios.

+ +

Información de publicación del dispositivo

+ +

Fairphone ha lanzado dos dispositivos hasta ahora - la FP1 v1 Fairphone (primera edición) fue lanzado el 30 de diciembre del 2013 y el FP1U (segundo lote) fue lanzado el 22 de julio de 2014. Las ventas han llegado a su fin para el dispositivo v1. El v2 Fairphone fue lanzado el 16 de julio 2015 y se puede pedir a Fairphone.

+ + + + + + + + + + + + + + +
Fairphone v1Fairphone v2
A picture of the Fairphone v1 device, showing lockscreen and the back. Credit : Fairphone. CC BY-NC-SA.Fairphone 2 Black Matte
+ +
+

Nota: Puede seguir el progreso en el blog Fairphone, y revisar la estrategia anunciada y el enfoque.

+
+ +

Portabilidad de Firefox OS al dispositivo Fairphone

+ +

Esto aún no ha sucedido, pero se está trabajando.

+ +

Problemas reales

+ +

Fairphone v1 no pudo actualizar su sistema operativo Android personalizado porque el fabricante del chipset no dio a conocer un código abierto de banda actualizada o compilación.

+ +

En el Mobile World Congress 2015, Fairphone hizo un llamado a los posibles sistemas operativos alternativos disponibles para el próximo Fairphone v2. Estas conversaciones que se llevaron a cabo dieron por inicio la portabiliad de Firefox OS al dispositivo Fairphone. Una portabilidad de Firefox OS puede ser una manera de salvar al Fairphone v1, así como evitar estas cuestiones para las futuras generaciones de teléfonos. La colaboración de Mozilla con los tres principales proveedores de chipset también ayudaría.

+ +

Fairphone v2 es orientado a código abierto con contribuciones de la comunidad a código fuente y a compilación de Fairphone OS.

+ +

El progreso y la solución

+ +

En este momento el proyecto de portabilidad está empezando (fase de encendido). Esperamos que el trabajo de portabilidad comienze pronto — ver este espacio para más información. 

+ +

Contribuyendo

+ +

Si usted está interesado en saber más o contribuir al esfuerzo para la portabilidad, los siguientes enlaces le llevaran a donde usted necesita ir.

+ +

Si usted está interesado en saber más o contribuir al esfuerzo de llevar a cabo, los siguientes enlaces le llevaran a donde usted necesita ir.

+ +

Herramientas de Proyecto

+ + + +

Firefox OS

+ +

Si usted es un desarrollador de portabilidad y quieres saber más acerca del sistema operativo Firefox OS:

+ + + +

Comunidad de portabilidad XDA

+ +

Si usted es un desarrollador de Firefox OS y desea saber más acerca de portar un sistema operativo:

+ + + +

Especificaciones del dispositivo

+ +

Fairphone v1

+ +

Usted puede encontrar una lista detallada de las especificaciones en la página de las especificaciones de Fairphone.

+ +

Red

+ + + +

Hardware

+ + + +

Software

+ + + +

Fairphone v2

+ +

Usted puede encontrar una lista detallada de las especificaciones en la página de las especificaciones de Fairphone.

+ +

Red

+ + + +

Hardware

+ + + +

Software

+ + + +

Ver también

+ + diff --git a/files/es/archive/b2g_os/phone_guide/flame/configuracion_inicial/index.html b/files/es/archive/b2g_os/phone_guide/flame/configuracion_inicial/index.html new file mode 100644 index 0000000000..90bb74f775 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/flame/configuracion_inicial/index.html @@ -0,0 +1,122 @@ +--- +title: Configuración Inicial +slug: Archive/B2G_OS/Phone_guide/Flame/Configuracion_Inicial +tags: + - B2G + - Firefox OS + - Flame + - developer phone + - dispositivo de referencia(2) + - reference device + - teléfono desarrollador +translation_of: Archive/B2G_OS/Phone_guide/Flame/Initial_setup +--- +
+

Después de conseguir un Flame, hay un par de pasos que usted debe asegurarse de que usted sigue para su sistema operativo particular, antes de empezar a tratar de actualizar su dispositivo Flame, por ejemplo para actualizar la versión de Firefox OS de su Flame, o instalar aplicaciones a su teléfono. Ambos están cubiertos en los artículos siguientes, pero se debe trabajar a través de este artículo primero.

+
+ +

Todos los sistemas operativos

+ +

Necesita instalar ADB y Fastboot en su ordenador — estos son aplicaciones que le permiten interactuar con su teléfono desde la computadora cuando los dos están conectados a través de cable de carga USB del teléfono. Son necesarios para que pueda flashear el teléfono a una nueva versión de Firefox OS, recuperarse de un estado no interactivo, instalando aplicaciones a su teléfono, etc.

+ +
+

Nota: Si estás en Ubuntu puede instalar ADB y Fastboot simplemente usando sudo apt-get install android-tools-adb android-tools-fastboot en la línea de comandos.

+
+ +
+

Nota: Si usted está en Mac OS puede instalar ADB y Fastboot simplemente usando Homebrew en la línea de comandos. Mire Instalando y usando ADB.

+
+ +

ADB y Fastboot se encuentra disponible en Android Developer Toolkit:

+ +
    +
  1. Vaya al link anterior.
    2. +
  2. Presione el botón Download Eclipse ADT.
    3. +
  3. Acepte las condiciones de la licencia.
    4. +
  4. Elija entre la versión de 32 bits y 64 bits (elija 32-bit si no estás seguro).
    5. +
  5. Clic en el botón final Download Eclipse ADT with the Android SDK....
    6. +
  6. Una vez finalizada la descarga, descomprima el contenido del archivo zip en el escritorio de su ordenador.
    7. +
  7. El nombre de la carpeta es un poco complicado; cambiarle el nombre a simplemente adt.
    8. +
+ +

ADB es una herramienta que se ejecuta desde la línea de comandos. Si usted abre su terminal / simbolo de sistema, vaya a adt/sdk/platform-tools y ejecute el comando adb, debería ver una carga de la información arrojada de vuelta a usted acerca de lo que puede hacer con ADB. Ejecutando adb devices debe devolver la línea List of devices attached, y nada más, porque no tienes ningún dispositivo aún conectado.

+ +

En este punto, es necesario establecer la variable PATH para que apunte a la herramienta ADB, para que pueda ejecutarlo desde cualquier lugar, no sólo cuando se está en el directorio exacto en que está el ADB.

+ +

Para hacer esto en Windows 8 (Windows 7 será muy similar, pero con pocas diferencias de opciones de menú):

+ + + +
+

Nota: Para abrir el símbolo del sistema, haga clic en el botón derecho en el botón de Windows en la parte inferior izquierda y seleccione la línea de comandos.

+
+ +

En Mac/Linux:

+ + + +

Habilitando depuración remota

+ +

Asegúrese de depuración remota segura está activado en tu Flame, usando la opción Depuración Remota/Depuración via USB en Ajustes de desarrollador en el dispositivo (opción es diferente, dependiendo de si usted tiene Firefox 1.3 e inferior, o Firefox 1.4+ instalado).

+ +

Pasos extra para Linux

+ +

Dependiendo de su distro Linux, es probable que tenga que agregar una regla udev para su teléfono.

+ +

Para descubrir el ID de proveedor de su dispositivo, conectar su teléfono a través de USB y utilice el comando lsusb para ver los dispositivos detectados en el subsistema USB. Encuentre su teléfono en la lista, y tome nota de las cuatro primeras cifras inmediatamente seguido de "ID". Un ID común para Flame es 05c6, por lo que una regla udev en este caso sería:

+ +
SUBSYSTEM=="usb", ATTRS{idVendor}=="05c6", MODE="0666"
+
+ +

Si el dispositivo muestra un número diferente, utilice en su lugar. Por ejemplo:

+ +
SUBSYSTEM=="usb", ATTRS{idVendor}=="18d1", MODE="0666"
+
+ +

Asegúrese de ejecutar el comando udevadm control --reload-rules (podría ser automática dependiendo de su configuración), a continuación, desconecte y vuelva a conectar el dispositivo antes de continuar.

+ +

Pasos extra para Windows

+ +

Para acceder al dispositivo Flame con ADB y herramientas Mozilla dev como App Manager/WebIDE, se requiere un controlador USB. Siga los pasos descritos en las secciones siguientes para instalarlo.

+ +

Descargando el controlador

+ +

Descargue el controlador de Windows desde esta ubicación. Una vez descargado, extraer el contenido del archivo ZIP en un lugar adecuado en su disco duro.

+ +
+

Nota: Android Debug Bridge (ADB) se debe instalar primero: ver instrucciones anteriores si no has hecho esto ya.

+
+ +

Instalando el controlador USB

+ +

En este punto, conecte el dispositivo Flame al ordenador mediante un cable USB.

+ +

Para instalar el controlador abra el directorio Alcatel_USB_Driver_Q_4.0.0_2013_11_11_noinstall  dentro del archivo ZIP extraídos y haga doble clic sobre el ejecutable DriverInstaller.exe. Es posible que reciba una advertencia en este punto que el ejecutable es de un editor desconocido. Si es así, seleccione el botón Si y se pondrá en marcha el ejecutable.

+ +

Simple dialog box showing a picture of a phone along with install and uninstall buttons.

+ +

Clic en el botón Install para instalar el controlador.

+ +

Después de que el controlador se ha instalado, puede comprobar que está trabajando abriendo una ventana de línea de comandos y escribiendo adb devices.

+ +

Esto debe listar el dispositivo conectado con una salida algo como:

+ +
List of devices attached
+3561d02a          device
+ +

Si el dispositivo no aparece aquí, compruebe en el Administrador de dispositivos de Windows. Su Flame puede aparecer como "ACER ADB Interface". Puede confirmar esto desconectando el dispositivo y ver si desaparece del administrador de dispositivos. Desinstale el software del controlador haciendo clic derecho sobre "ACER ADB Interface" y haciendo clic en desinstalar.  Asegúrese de marcar la casilla en el cuadro de diálogo para eliminar el software del controlador. Ahora vuelva a ejecutar el instalador anteriormente. Es recomendable establecer el tiempo de espera de pantalla en su Flame a algo alto (Ajustes > Pantalla > Screen timeout) en Windows aparece a veces para volver a instalar los controladores predeterminados cuando la pantalla se apaga.

diff --git a/files/es/archive/b2g_os/phone_guide/flame/index.html b/files/es/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..caf801ff64 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,78 @@ +--- +title: Flame +slug: Archive/B2G_OS/Phone_guide/Flame +tags: + - Firefox OS + - Flame + - developer phone + - dispositivo de referência + - teléfono desarrollador +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +
+

Actualizaciones en tu Flame: Le animamos a unirse a la siguiente lista de correo para recibir actualizaciones periódicas sobre el software builds y otras noticias relacionadas a su dispositivo Flame: https://mail.mozilla.org/listinfo/flamenews

+
+ +

A picture of the Flame device, showing the Firefox OS homescreen containing several app icons.

+ +

Flame es el dispositivo de referencia oficial para el desarrollo, prueba y depuración de Firefox OS y aplicaciones web abiertas. Esta guía proporciona información básica acerca de sus especificaciones de hardware, así como documentación práctica específica experimentando con, desarrollando para, y prueba de software compatible con este teléfono.

+ +

El hardware de Flame ofrece un conjunto representativo de especificaciones — incluyendo pantalla FWVGA y procesador de doble núcleo — para ayudar a los desarrolladores a crear gran contenido y experiencias. Una única plataforma de hardware también es bueno para los probadores, por lo que es más fácil de probar y abordar cuestiones específicas de software sin tener que preocuparse de dispositivos de modelos específicos, errores, etc.

+ +

Si usted tiene su teléfono en la mano y quiere empezar a jugar con el, desarrollando y distribuyendo aplicaciones, o contribuir a la plataforma de Firefox, los siguientes enlaces le llevarán a donde necesita ir:

+ + + +

Si desea obtener más información sobre actualizar el sistema operativo, recuperación, instalación de aplicaciones, o especificaciones del teléfono, usted encontrará la información que necesita en los dos artículos siguientes:

+ + + +

Obtener un dispositivo

+ +

Las ventas de Flame han llegado a su fin. Todavía hay un montón de oportunidades para los colaboradores de Mozilla para obtener Flame gratuitos, incluyendo una próxima segunda ronda del programa Foxtrot. Si tiene preguntas acerca de cómo obtener un dispositivo gratis para desarrollo o pruebas, por favor, comuniquese con Asa Dotzler o Marcia Knous (marcia) en el canal #fxos en IRC.

+ +

Especificaciones del dispositivo

+ +

Usted puede encontrar más de las especificaciones del dispositivo que aparecen en nuestra página Phone and device specs.

+ +

Red

+ + + +

Hardware

+ + + +

Mire también

+ +

 

+ + + +

 

diff --git a/files/es/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html b/files/es/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html new file mode 100644 index 0000000000..62e3ec86a4 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/flame/updating_your_flame/index.html @@ -0,0 +1,301 @@ +--- +title: Actualiza tu Flame +slug: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame +tags: + - Firefox OS + - Flame + - developer phone + - dispositivo de referência + - reerence device + - teléfono desarrollador +translation_of: Archive/B2G_OS/Phone_guide/Flame/Updating_your_Flame +--- +
+

En este artículo se explica cómo actualizar el software en su Flame - incluyendo la actualización de Firefox OS e instalación de nuevas aplicaciones a su teléfono - junto con copias de seguridad de sus datos, y alguna otra solución útil de problemas e información de prueba. Antes de empezar a hacer algo de esto, usted debe asegurarse de que ha iniciado a través de la información de configuración inicial (Initial setup).

+
+ +

Actualizando el software del Flame

+ +

Tenemos dos principales "canales" de versiones Firefox OS para el Flame:

+ + + +

Imagen Base

+ +

Usted puede obtener archivos de recuperación y herramientas en los siguientes lugares de almacenamiento:

+ +

Up-to-date (utilice éstos a menos que tenga una buena razón para no hacerlo)

+ + + +
+

Nota: Puede averiguar qué imagen base está funcionando en su dispositivo con el comando adb shell getprop ro.bootloader. La versión son los últimos cuatro caracteres, con el último entonces removido, el prefijo 'v' (e.j. L1TC000118D0 > v18D).

+
+ +
+

Importante: Cuando se ejecuta un flasheo completo o poco profundo (shallow flash), se sobrescribirán los datos del teléfono: por lo tanto, debe hacer una copia de seguridad de sus datos antes de actualizar! Mire la sección Respaldando y restaurando su información del Flame para más detalles.

+
+ +

Obsoleto

+ +

Estas imágenes base de son solo estables y de producción.

+ + + +
+

Nota: Using a locale with base image v188 produces a mixed UI with locale and English languages.

+
+ +
+

Nota: Las Imágenes v180 de Firefox OS y anteriores se basan en Android KK (Kitkat, 4,4); Builds JB (Jellybean, 04.01 a 04.03) ahora han sido descontinuados y ya no son compatibles, por lo que no debe usar nada más antiguo a v180.

+
+ +

Instalación de imágen base

+ +

Para instalar la imagen base en su dispositivo:

+ +
    +
  1. Asegúrate de que la depuración remota esté habilitada en el Flame, utilizando la opción Depuración remota/Depuración vía USB en Ajustes de desarrollador (la opción es diferente, dependiendo de si usted tiene Firefox 1.3 e inferior, o Firefox 1.4+ instalado).
    2. +
  2. Conecta tu Flame al ordenador mediante un cable USB. Comprueba que el equipo está conectado al dispositivo mediante el comando adb devices en una terminal.
    3. +
  3. Descarga el archivo .zip mencionado anteriormente. Descomprímelo en tu escritorio.
    4. +
  4. Abre la carpeta en la que has extraído la Imágen y ejecuta: +
      +
    • En Windows, abriendo desde la línea de comandos flash.bat (o haz doble clic en el archivo en el explorador de archivos)
      + Nota: Si falta flash.bat, simplemente cambie el nombre del archivo flash.sh a flash.bat, a continuación, ejecute eso. Asegúrese de tener adb y fastboot instalado y disponible en PATH.
      • +
    • En Linux / OSX, entra en la carpeta mediante la terminal, a continuación, ejecuta el script flash.sh usando ./flash.sh (instrucciones previas le recomiendan utilizar sudo. No. Es muy peligroso utilizar sudo con las cosas que se descargan de Internet. Si el script de flasheo no encuentra su dispositivo, por favor compruebe que sus Reglas udev son correctas). Si usted no ve un archivo flash.sh, simplemente cambie el nombre del archivo flash.bat a flash.sh primero y luego usar el comando anterior.
      • +
    +
    5. +
+ +
+

Nota: Si usted recibe un error "permiso denegado" al ejecutar los comandos anteriores, el script de shell, probablemente no tiene los permisos adecuados. Ejecutando chmod +x flash.sh en él debe resolver este problema.

+
+ +
+

Nota: Si el script de flasheo queda atascado en "< waiting for device >" mientras la pantalla muestra "ThunderSoft (R)", el script no tiene permiso para acceder al dispositivo mientras está en modo fastboot. Necesita configurar las reglas udev para darle acceso. También puertos USB 3 no funcionan bien con fastboot y pueden ser la causa de este problema.

+
+ +
+

Nota: También te invitamos a construir su propio build para instalar en Flame: mire Compilando e instalando Firefox OS.

+
+ +

Arreglar la Fuente

+ +
+

Importante: Este paso sólo es necesario para la imagen base v180.

+
+ +

Después de actualizar Gecko y Gaia a Nightly con la imagen base v180, habrá una falta de correspondencia entre las fuentes que espera Gecko y Gaia y lo que la imagen base proporciona (esto se ha solucionado a partir de V188). Para solucionar esto, usted tiene dos opciones:

+ + + +

Actualizando su Flame a una build nightly

+ +
+

Nota: Para la versión actual, el desarrollo Nightly Builds de Firefox OS no es compatible con A-GPS, que puede conducir a un rendimiento lento de la funcionalidad GPS. Tenemos la intención de resolver esto de una futura actualización del canal Nightly.

+
+ +
+

Importante: Cuando se ejecuta un flasheo completo o poco profundo (shallow flash), se sobrescribirán los datos del teléfono: por lo tanto, debe hacer una copia de seguridad de sus datos antes de actualizar! Mire la sección Respaldando y restaurando su información del Flame para más detalles.

+
+ +
    +
  1. Antes de actualizar su teléfono a una build Nightly usted debe flashear la última imágen base para asegurarse de que los sistemas subyacentes están al día. Descargue una imágen base con la misma o una versión superior de Firefox OS de la versión que va a utilizar en el paso 3 y use esto para actualizar el software del dispositivo, como se explicó anteriormente.
    2. +
  2. Debido a que en el paso anterior se instala un sistema operativo nuevo en el dispositivo, tendrás que habilitar de nuevo la depuración remota en tu Flame, usando la opción Depuración remota en Ajustes de desarrollador del dispositivo.
    3. +
  3. A continuación, elija una build para instalar (las puedes encontrar en http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/). Usted querrá una de las siguientes: + +
    4. +
  4. Escoja una versión y descarge tanto el archivo b2g-XX.XX.en-US.android-arm.tar.gz y gaia.zip files. Guardelos dentro de un directorio en el escritorio llamado algo así como fxos.
    5. +
  5. Descarga el script de flasheo poco produnfo y guárdelo en el mismo directorio que los dos archivos anteriores.
    6. +
  6. Para usuarios de Windows: Descargue también el script windows shallow_flash.bat e instale Cygwin, que proporciona un entorno de comandos de Linux-como en Windows. Usted tendrá que instalar la categoría predeterminada Cygwin base más el paquete descomprimido pero shallow_flash.bat lo hará por usted si usted descarga y copia la configuración Cygwin * .exe en la misma carpeta que el script.
    7. +
  7. +

    Desde la línea de comandos o Terminal, utilice el cd para entrar en la carpeta en la que ha guardado los archivos y luego usa el siguiente comando:

    + +

    Linux:

    + + 
    ./shallow_flash.sh --gaia=gaia.zip --gecko=b2g-XX.XX.en-US.android-arm.tar.gz
+
    + +

    Mac:

    + + 
    ./shallow_flash.sh --gaia gaia.zip --gecko b2g-XX.XX.en-US.android-arm.tar.gz
    + +

    Windows:

    + +

    Doble clic en shallow_flash.bat (con el icono de engranajes) o ejecutarlo desde una consola de comandos (CMD). Se flasheará gaia.zip y un solo b2g-XX.XX.en-US.android-arm.tar.gz file.

    +
    8. +
+ +
+

Nota: Si usted recibe un error "permiso denegado" al ejecutar los comandos anteriores, el script de shell, probablemente no tiene los permisos adecuados. Ejecutando chmod +x flash.sh en él debe resolver este problema.

+
+ +
+

Nota: Un "shallow flash"actualiza Gecko y Gaia más directorios de datos, en lugar de un flash completo, que actualiza Gecko / Gaia, sino también la capa Gonk subyacente y binarios asociados en particular a este tipo de dispositivo. Es por esto que es una buena idea para actualizar a la primera base image, como se sugirió anteriormente, entonces flasheo poco produnfo sobre la parte superior de esa, una vez que tienes la correcta capa Gonk/binario.

+
+ +

Una vez que el proceso de instalación termina el teléfono debe reiniciarse en la build actualizada y mostrar primero el flujo de trabajo del usuario.

+ +

Cambiar al canal de actualización "nightly"l

+ +

En v2.2 usted puede cambiar el Canal de actualizaciones default por nightly en los Ajustes de desarrollador.

+ +

A continuación es el método más antiguo, si no encuentra esa configuración en su dispositivo.

+ +
    +
  1. Asegúrate de que la depuración remota esté habilitada en su Flame, usando la opción Depuración Remota en Ajustes de desarrollador del dispositivo.
    2. +
  2. Descarga el script cambiar canal: haz click en el enlace, pulsa el botón Raw, continuación utiliza la función "Guardar como" de su navegador y guarde la página como change_channel.sh.
    3. +
  3. En tu terminal, utiliza cd para acceder a la carpeta que contiene al script y ejecuta el siguiente comando:
    + + 
    ./change_channel.sh -v nightly
    +
    4. +
  4. Una vez que se reinicie el teléfono, revisa actualizaciones en Ajustes > Información > Revisar ahora.
    5. +
+ +

Ahora puedes obtener actualizaciones OTA (over-the-air) "nightly" en tu Flame.

+ +
+

Nota: Puede seleccionar entre varios canales de actualización diferentes. Ejecuta "./change_channel.sh -h" para ver otras opciones de canales.

+
+ +

Modo fastboot

+ +

Puede que al aplicar un Shallow Flash o una actualización de la imágen base el telefono deje de responder. Cuando esto ocurre debes reiniciar el teléfono en modo de recuperación. El modo de recuperación ofrece algunas opciones (Reiniciar, Actualizar desde adb, Limpiar datos, Limpiar cache, y Actualizar desde sdcard). Desafortunadamente, seleccionando Update from adb entra en un modo (sideload) en el que no puede utilizar los otros comandos de ADB. El comando adb sideload funcionaría pero los diversos script de flasheo dependen de otros comandos adb.

+ +

Puede forzar el modo fastboot de la siguiente manera:

+ +
    +
  1. Apague el teléfono (que puede implicar el remover la batería en casos extremos...)
    2. +
  2. Conecte el cable USB.
    3. +
  3. Encender el teléfono de nuevo pulsando los botones Bajar volumen y Encender, juntos.
    4. +
+ +

El teléfono debe mostrar el texto "FASTBOOT": este es el modo fastboot y está a la espera de una conexión USB.  En este punto conecta tu teléfono y ejecuta el siguiente comando fastboot devices. Tenga en cuenta que regularmente adb no vería el dispositivo — sólo fastboot puede verlo. En este modo, puedes usar el script flash para instalar la última imágen base como se explicó antes. A medida que el script hace uso de comandos tanto adb y fastboot, es posible que aparezca algún error inicial y advertencias de adb, pero el dispositivo será flasheado y funcionará de nuevo al final del procedimiento.

+ +

Modo descarga de Emergencia

+ +

Si al instalar una nueva build, el teléfono deja de responder y además no puedes entrar en el modo Fastboot, puedes usar el modo de emergencia para recuperarlo. Usted necesitará el cable USB de emergencia proporcionada con la etiqueta roja “Recovery Cable” en él y la Herramienta de descarrga de emergencia para entrar en este modo. Para obtener instrucciones completas, consulte el tutorial de la herramienta rescate de emergencia incluido en los archivos de la herramienta de descarga. Póngase en contacto con el fabricante del dispositivo (flameservice [at] thundersoft.com) si usted necesita cualquier ayuda técnica.

+ +

Emergency download tool dialog box as it is when it start.

+ +
+

Nota: La herramienta proporcionada es sólo para Windows.

+
+ +

Modo de Recuperación

+ +

Puedes entrar en modo de recuperación para borrar los datos del teléfono o actualizar manualmente el firmware. Hay dos maneras de entrar en este modo:

+ +

Si tu teléfono está apagado, presiona los botones Subir Volúmen + Encender, juntos.

+ + + +

Cuando ingreses al Modo de Recuperación presiona las teclas de Volumen (Subir y Bajar) para moverte dentro del menú y utiliza el botón de Encendido para seleccionar una opción. Asegurate de tener un respaldo de la información que tengas en el teléfono asi como en la tarjeta de memoria (SD) así como de haber descargado los ultimos paquetes de actualización.

+ +

Respaldando y restaurando su información del Flame

+ +

Cuando utiliza Flame, no querrá perder los contactos de su teléfono y otros datos, mientras actualiza a una nueva versión (como se ha explicado anteriormente en este artículo). Para respaldar y restaurar información puede utilizar nuestra herramienta Backup and restore profile, que está contenida en B2G-flash-tool Git repo.

+ +
    +
  1. Para utilizarlo, primero abra su  terminal / línea de comandos.
    2. +
  2. Clone el repositorio anterior (necesita tener Git instalado) usando + 
    git clone https://github.com/Mozilla-TWQA/B2G-flash-tool
    +
    3. +
  3. La herramienta es un archivo Python: backup_restore_profile.py. Asegúrese de que tiene instalado Python (2.7.x es probablemente el mejor.) Sistemas Linux y Mac deben tener esto fuera de la caja.
    4. +
  4. Entre al directorio que acaba de clonar utilizando cd B2G-flash-tool.
    5. +
+ +
+

Nota: Al utilizar esta herramienta, usted también tendrá que asegurarse de que su teléfono está conectado a través de USB al ordenador, y que ADB (mire Important steps to follow first antes) y que Depuración via USB (Ajustes de desarrollador en su dispositivo) está habilitado.

+
+ +
+

Nota: Si recibe un mensaje sobre la falta de permisos para ejecutar este archivo, use cd para el directorio donde guardó el archivo y ejecuta el siguiente comando:

+ +
chmod +x backup_restore_profile.py
+
+ +

Respaldando su información

+ +

Antes de realizar copias de seguridad usted debe asegurarse de que su dispositivo se ha actualizado con la actualización OTA más reciente. Para ello, en el teléfono vaya a Ajustes > Información > Actualizaciones > clic en Revisar ahora. Si hay una actualización disponible, usted debe obtener en breve una notificación de una actualización disponible. Elija instalar la actualización.

+ +

Ahora, en el directorio donde guardó backup_restore_profile.py, ejecute lo siguiente:

+ +
python backup_restore_profile.py -b
+ +

Esto debe guardar su perfil de dispositivo a un directorio llamado mozilla-profile, en el mismo directorio donde se encuentra el script.

+ +

Restaurando su información

+ +

Antes de restaurar usted debe asegurarse de que su dispositivo se ha actualizado con la actualización OTA más reciente.. Para ello, en el teléfono vaya a Ajustes > Información > Actualizaciones > clic en Revisar ahora. Si hay una actualización disponible, usted debe obtener en breve una notificación de una actualización disponible. Elija instalar la actualización.

+ +

En el directorio dondese encuentra mozilla-profile (mire la sección anterior), ejecute lo siguiente:

+ +
python backup_restore_profile.py -r
+ +
+

Nota: Usted puede obtener una lista de todas las opciones de la herramienta compatible con Python en ejecución
+ backup_restore_profile.py -h.

+
+ +

Instalando apps en tu Flame

+ +

Las herramientas App Manager y WebIDE hacen que sea fácil instalar aplicaciones a su teléfono, para pruebas, etc.

+ +

Ajuste de RAM

+ +

Puede ajustar la capacidad de la memoria RAM disponible para ver cómo las aplicaciones funcionan en los teléfonos Firefox OS con capacidad de memoria más bajos.

+ +

Esto se logra mediante la introducción al modo fastboot (primero instale fastboot, que está disponible en la misma página SDK como ADB) y ejecute:

+ +
adb reboot bootloader
+fastboot oem mem [0|256-1024]
+ +

“0” es la memoria detectada automáticamente y “256-1024” es el número en megabytes (MB). Por ejemplo, si deseas usar 512 MB de memoria RAM debes usar este comando:
+ fastboot oem mem 512.

+ +

Luego tendrás que reiniciar el dispositivo para que los cambios surtan efecto. Esto se puede hacer usando:

+ +
fastboot reboot
+ +

El tamaño de la memoria actual puede ser restaurado entrando en el modo fastboot y escribiendo:

+ +
fastboot getvar mem
+
diff --git a/files/es/archive/b2g_os/phone_guide/fx0/index.html b/files/es/archive/b2g_os/phone_guide/fx0/index.html new file mode 100644 index 0000000000..5decb58319 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/fx0/index.html @@ -0,0 +1,51 @@ +--- +title: Fx0 +slug: Archive/B2G_OS/Phone_guide/Fx0 +tags: + - Firefox OS + - Fx0 + - KDDI + - Phone + - consumer +translation_of: Archive/B2G_OS/Phone_guide/Fx0 +--- +
+
+ +
+

El Fx0 es un teléfono inteligente de consumo de gama alta Firefox OS, y marca el primer lanzamiento de teléfonos Firefox OS en Japón. Fue lanzado por KDDI en diciembre de 2014.

+ +

Obtener un dispositivo

+ +

El Fx0 está disponible para comprar a través de canales minoristas japoneses estándar. Es un dispositivo SIM-bloqueado, por lo que sólo puede ser utilizado en Japón.

+ +

Actualizando el software

+ +

La imágen del sistema del dispositivo está bloqueada, por lo que sólo puede actualizarse el software cuando el operador de la red publica una actualización OTA. La imagen del sistema del dispositivo está basada en Firefox OS 2.0.

+
+
+ +

Especificaciones

+ +

Usted puede encontrar más de las especificaciones del dispositivo que aparecen en nuestra página Phone and device specs.

+ +

Hardware

+ + + +

Vea también

+ + diff --git a/files/es/archive/b2g_os/phone_guide/geeksphone/index.html b/files/es/archive/b2g_os/phone_guide/geeksphone/index.html new file mode 100644 index 0000000000..e4cc268f49 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/geeksphone/index.html @@ -0,0 +1,124 @@ +--- +title: Geeksphone +slug: Archive/B2G_OS/Phone_guide/Geeksphone +tags: + - Firefox OS + - Gaia + - Geeksphone + - Tutorial + - Update + - actualizacion +translation_of: Archive/B2G_OS/Phone_guide/Geeksphone +--- +
+
Ediciones Developer Preview de teléfonos Firefox OS se están convirtiendo en una amplia difusión entre la comunidad, principalmente a través de Geeksphone. Dado que estos son para desarrolladores, naturalmente queremos que testees y juegues con ellos lo mas posible! En este articulo se cubriran algunos tips básicos sobre comó mantener el telefono actualizado y como ajustar las aplicaciones del sistema Gaia.
+
+
(Nota: Estas instrucciones son para los viejos modelos Keon y Peak, no necesariamente para el ultimo telefono Geeksphone Revolution)
+

 

+

Actualizando tu Geeksphone a las últimas versiones

+

Las actualizaciones de Firefox Os pueden ser descargadas desde la aplicación Configuración, que se encuentra bajo información del Dispositivo. Puede configurarse el dispositivo para que cheque por actualizaciones diriamente, semanalmente o  mensualmente. Además se proporciona un botón "checar ahora". Cuando hay una actualización disponible se le pedira que descargue e instale la versión actual.

+

The screen for checking updates on the Firefox OS settings app

+

Flasheando su teléfono

+

El equipo de Geeksphone también ofrece la última versión estable y nightly build como descargas autonomas para flasear tu telefono.

+

Configure su teléfono y computadora

+

Antes de intentar flashear su teléfono asegurese de que ha realizado las configuraciones descritas en la sección "Configuración del dispositivo Geeksphone" en  Instalando Apps Firefox OS al Geeksphone. Esto le asegurara que puede transferir datos a su teléfono. En esa misma sección, siga las instrucciones y asegurese que cuenta con los drivers USB correctos.

+
+

Nota: Es particularmente importante en las computadoras Windows esten configuradas con los drivers USB correctos.

+
+

Las imagenes estan localizadas en el sitio de descarga de Geeksphone. En este sitio se le presentaran varias opciones para seleccionar su dispositivo y que tipo de imagen desea utilizar.

+

Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one.

+

Descarge la imagen que usara y extraiga el archivo en su sistema de archivos. El archivo contiene imagenes y comandos requeridos para flashear el teléfono usando Windows, Mac OS, o Linux. Antes de empezar a flashear el teléfono asegúrese de que tiene habilitada la depuración remota en el teléfono. Esta opción puede ser habilitada lanzando la aplicación Configuraciones y navegando a Informació del dispositivo -> Mas información -> Desarrollador. Asi mismo, no intente flashear el dispositivo si la batería tiene menos del 50% de carga.

+

Enabling remote debugging on the Firefox OS Settings app

+
+

Nota: Si tu dispositivo no se encuentra con el script de los siguientes pasos, incluso si esta conectado via USB, tendrás que desbloquear tu teléfono y esperar a que aparezca en el sistema.

+
+
+

Nota: "Flashear" el teléfono eliminara todos los datos en el. Si deseas hacer un respaldo de tus datos y restaurarlos despues, sigue las siguientes instrucciones en  Copia de seguridad de la partición del sistema del teléfono.

+
+

Windows

+
+

Nota: Puede que tenga la necesidad de instalar los drivers USB en Windows. Para obtener estas instrucciones vea la sección "Configuración del dispositivo Geeksphone" en  Instalando Apps Firefox OS al Geeksphone.

+
+

Abra una linea de comandos(inicio -> escriba cmd in la busqueda -> enter en Windows 7, tecla de window + X -> seleccionar linea de comandos en Windos 8) y dirigete a la ruta del directorio donde se encuentran los archivos extraidos con  cd "ruta del directorio". Enter:

+
flash.bat
+
+

Esto instalara la nueva imagen en el teléfono. El teléfono necesitara ser configurado nuevamente ya que todos los datos habrán sido borrados.

+

Mac OS

+

Abra una ventana de Terminal (Cmd + espacio -> escriba terminal -> enter) y dirijase a la ruta del directorio que contiene los archivos extraidos. Enter:

+
./flash_mac.sh
+
+

Esto instalara la nueva imagen en el teléfono. El teléfono necesitara ser configurado nuevamente ya que todos los datos habrán sido borrados.

+

Linux

+

Para flashear un Keon desde Ubuntu hay que agregar la siguientes reglas a /etc/udev/rules.d/51-android.rules

+
+ SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"
+
+ SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"
+
+  
+

Abra una ventana de Terminal (control-alt-t en Ubuntu) y dirijase al directorio que contiene los archivos extraidos. Enter:

+
./flash.sh
+
+

Esto instalara la nueva imagen en el teléfono. El teléfono necesitara ser configurado nuevamente ya que todos los datos habrán sido borrados.

+

Esto debe flashear la nueva imagen en el teléfono. El teléfono debera configurarse de nuevo ya que toda la información ha sido borrada. Si quiere tener un respaldo de su información y restaurarla despues, puede seguir las instrucciones en Respaldo del sistema de partición del teléfono.

+
+

Otra forma de "Flashear" el Keon usando Ubuntu es de la siguiente manera:

+
+

Paso 1: Conecta el dispositivo

+

Paso 2: Abre la Terminal

+

Paso 3: Escribe el comando sudo nautilus, escribe tu contraseña de Root para abrir el sistema de ficheros

+
sudo nautilus
+

Paso 4: Pega la carpeta de Firefox O.S Geeks Phone Build en el directorio

+

Paso 5: Haz click en el archivo llamado "flash.sh"

+
./flash.sh
+

Si tiene un 'unagi' o un teléfono developer preview que no sea un Geeksphone

+

Si usted cuenta con un teléfono de desarrollador y no es Geeksphone como un 'unagi' o un dispositivo basado en Android, tal vez necesite realizar los siguientes pasos. Si este no es el caso, por favor siga a la siguiente sección.

+

Usted necesitara instalar el adb y fastboot. Estas utilidades se pueden enconrar en el Kid de herramientas de desarrollo Android (ADT).

+

No es necesario instalar todo el kit de desarrollo. Descargue el kit de desarrollo desde aqui y extraiga el contenido. Adb y fastboot se encuentrar en el directorio /platform-tools/carpeta. Estos pueden ser copiados a /usr/bin en Linux o Mac OS, o copiados en alguna carpeta siempre y cuando se especifique el $PATH de los binarios agregados.

+

Si usted esta tratando de flashear su dispositivo y tiene otro conectado via USB, su teléfono posiblemente no sea detectado por las utilidades correctamente. Solamente tenga conectado su teléfono mientras intente flashearlo.

+

Afinando Gaia

+

Si usted es parte de la industria, usted puede adaptar las aplicaciones por default en Gaia - la UI en Firefox OS. En esta sección se cubrira algunos aspectos básicos para clonar Gaia y hacer cambios en las aplicaciones por default del sistema. Tenga en cuenta que estos consejos son "bajo su propio riesgo" y pueden involucrar la sección "Ok, he brickeado mi teléfono". Antes de proceder, este seguro de tener instalado adb y fastboot en su sistema. Para verificar que los tiene instalado abra una ventana de Terminal y escriba   adb devices   con su dispositivo conectado. Usted deberia ver su teléfono listado bajo los dispositivos conectados.

+

Usted tambien puede correr fastboot desde terminal. Si usted corre fastboot, se debera mostrar un conjunto de opciones. Si usted no tiene instalado adb o fastboot, una busqueda rapida en Google con su sistema operativo volvera varios resultados sobre como instalarlos. Adicionalmente a adb y fastboot usted necesitara tener Git. Si no tiene instalado Git, de un vistazo a esta guia de configuració. Finalmente asegurese de que su teléfono esta configurado para la depuración remota, paso descrito en la sección previa.

+

Una vez que tenga todos los prerequisitos abra una terminal y dirijase al directorio donde le gustaría clonar el código fuente de Gaia. Escriba el siguiente comando:

+
git clone git://github.com/mozilla-b2g/gaia.git gaia
+cd gaia
+
+

Esto clonara la ultima versión del código de Gaia en su sistema.

+
+

Si su plan es subir cambios de regreso al código de Gaia, asegurese de hacer un fork del codigo antes de clonar como se describe en Hacking Gaia.

+
+

Recientemente el Geeksphone Keon ustiliza la rama v1.0.1 del código de Gaia, así que asigne la rama adecuada con el siguiente comando antes de hacer cualquier otra cosa:

+
git checkout -b v1.0.1 origin/v1.0.1
+
+

La mayor parte de las aplicaciones del sistema estan localizadas en el subdirectorio de aplicaciones de Gaia. Usted ahora puede hacer cualquier cambio que desee en las aplicaciones de Firefox OS. Una vez que haya hecho los cambios, asegurese que su dispositivo ha sido montado apropiadamente usando el siguiente comando:

+
adb remount
+

A continuación, ejecute el siguiente comando para hacer push de las aplicaciones modificadas en su teléfono. Esto hará push por defecto a todas las apps del teléfono:

+
B2G_SYSTEM_APPS=1 make install-gaia
+
+

Si sólo hizo cambios en una sola app puedes especificar los cambios de esta usando una sintaxis similar. En este ejemplo sólo la aplicación de calendario sera instalada en el teléfono:

+
APP=calendar B2G_SYSTEM_APPS=1 make install-gaia
+
+

Si tiene problemas mientras hace los cambios, puede reiniciar el teléfono a los valores por defecto usando los siguientes comandos:

+
make production
+make reset-gaia
+
+
+

Nota: Tenga en cuenta que cualquiera de los comandos anteriores limpiaran cualquier dato o aplicación lanzada en el teléfono. Si quiere hacer un respaldo de su información y restaurarla después, debe seguir las instrucciones en el apartado de Copia de seguridad de la partición del sistema del teléfono .

+
+

"Ok, he bloqueado mi teléfono"

+

Si esta en el proceso de modificación de su teléfono y "no responde" debería ser capaz de recuperarlo usando fastboot con un simple procedimiento. A continuación se ilustra como reestablecer el Keon pero con otros teléfonos el proceso debería ser similar. También necesitara verificar si tiene instalado fastboot.

+

Primero retire el cable USB y después remueva la batería del teléfono por 30 segundos. Entonces reinserte la batería y presiones el botón de bajar volumen  mientras mantiene el botón de encendido por unos cuantos segundos. A continuación reconecte el cable USB y ejecute los siguientes comandos desde una ventana de Terminal en el directorio que contiene los ultimos archivos img descritos en la primera sección de este post:

+
fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+
+

Este proceso debera recuperar su teléfono. Si no funciona, es posible que tenga que  intentar una segunda vez.

+

A jugar!

+

Esperamos que estas instrucciones te sean utiles, y naturalmente queremos que seas feliz con Firefox OS y las posibilidades que somos! Sientete libre de jugar con las actualizaciones de tu dispositivo, de hacer cambios/actualizaciones de las aplicaciones Gaia, y también sientete inspirado de construir tus propias Open Web Apps.

+

Ver también

+ diff --git a/files/es/archive/b2g_os/phone_guide/index.html b/files/es/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..6047637215 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,43 @@ +--- +title: Guía de Desarrollo en Firefox OS +slug: Archive/B2G_OS/Phone_guide +tags: + - B2G + - Firefox OS + - desarrollo + - telefonos +translation_of: Archive/B2G_OS/Phone_guide +--- +
+

Esta sección contiene información relevante para el desarrolladores sobre las especificaciones de los teléfonos que ejecutan Firefox OS. Tenemos información general disponible en Construir e instalar Firefox OS y Hacking Firefox OS, así que por favor vaya por la información acerca de construir e instalar la plataforma desde cero. Sin embargo, los desarrolladores que posean teléfonos especificos de desarrollo pueden encontrar los siguientes articulos de gran ayuda.

+
+

Información especifica del dispositivo

+
+
+ Datos del teléfono Firefox OS
+
+ En este artículo enumeramos los distintos teléfonos disponibles Firefox OS, junto con información como sus nombres en clave, la disponibilidad y características de hardware específicos.
+
+ Geeksphone
+
+ En este artículo vamos a cubrir algunos consejos básicos sobre cómo mantener su Geeksphone hasta a la fecha y la forma de modificar el sistema de aplicaciones de Gaia.
+
+ El ZTE OPEN Firefox OS
+
+ Este artículo es para compartir la información que tenemos disponible del dispositivo ZTE OPEN Firefox OS.
+
+

Información general de Firefox OS

+
+
+ Información general de las caracteristicas
+
+ Esta página muestra las características típicas de hardware Firefox OS y los requisitos mínimos de hardware.
+
+ Solución de problemas
+
+ Este artículo proporciona consejos para la solución de problemas comunes que pueden surgir al utilizar Firefox OS.
+
+ Mejores prácticas para dispositivos abiertos de referencia
+
+ Un conjunto de mejores prácticas que creemos y recomendamos para cualquier dispositivo de referencia abierto. Todas las recientes referencias de dispositivos Firefox OS siguen estas prácticas.
+
diff --git a/files/es/archive/b2g_os/phone_guide/lista_dispositivos/index.html b/files/es/archive/b2g_os/phone_guide/lista_dispositivos/index.html new file mode 100644 index 0000000000..86ac8aba87 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/lista_dispositivos/index.html @@ -0,0 +1,712 @@ +--- +title: Lista de Dispositivos +slug: Archive/B2G_OS/Phone_guide/lista_dispositivos +tags: + - B2G + - Dispositivos + - Especificaciones + - Firefox OS + - Guia(2) + - Guía + - Móvil + - Telefono + - movil(2) +translation_of: Archive/B2G_OS/Phone_guide/Phone_specs +--- +
+

Este artículo entrega información acerca de los dispositivos disponibles con Firefox OS. Incluye además las especificaciones del Hardware, nombres clave, la versión de Firefox OS con la que fue lanzado al mercado y mucho más.

+
+ +

Dispositivos con Firefox OS disponibles

+ +

Durante el desarrollo de Firefox OS hemos tenido diversos dispositivos para realizar pruebas. Hoy en día con la salida al mercado de Firefox OS contamos con diversos modelos de distintos vendedores.

+ +
+

Nota: Para información comercial de los dispositivos que se venden actualmente por favor revisa nuestra página para encontrar un dispositivo Firefox OS cerca tuyo.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Nombre / Nombre Clave

+ 		LanzamientoVersión FxOSDisponibleComentarios
+

Alcatel One Touch Fire

+ +

hamachi, buri

+ 		Julio 12, 20131.0.1Actualmente disponible +

Disponible publicamente en Brasil, Uruguay, Italia, Alemania, Grecia, Serbia, Hungria y Polonia. Disponible por revendedores en eBay.

+
Alcatel One Touch Fire EJulio 18, 20141.3.0Actualmente disponibleDisponible publicamente en Alemania.
otoro, unagi, inari   off the shelf ZTE phone used for development prior to the ZTE Open.
+

ZTE Open

+ +

ikura

+ 		Julio 2, 20131.0.1Actualmente disponibleSimilar al inari; Publicamente disponible en eBay
+

LG Fireweb

+ +

leo

+ 		Octubre 24, 20131.1Actualmente disponiblePublicamente disponible en Brasil.
+

Geeksphone Keon

+ +

keon

+ 		Abril 24, 20131.0.1Actualmente agotadoSolo para desarrolladores
+

Geeksphone Peak

+ +

peak

+ 		Abril 24, 20131.0.1Actualmente agotadoWas codenamed "twist" for a while; developer-only devices
Geeksphone Peak+---cancelado
Geeksphone RevolutionMarzo 4, 20141.3preActualmente disponibleDisponible en linea.
+

LG Google Nexus 4

+ +

nexus-4

+ 		   Experimental. Not supported by either LG or Google. Discontinued hardware.
+

Flame

+ +

"the reference device"

+ 		Fines de Abril, 20141.3 Available to pre-order
+

Spreadtrum

+ +

tarako

+ 		Al final del Q2, 2014 Pronto. 
ZTE Open CMayo 13, 20141.3DisponibleDisponible en linea.
Symphony GoFox F15Septiembre 16, 20141.4DisponibleAvailable through Grameenphone channels in Bangladesh only.
Intex Cloud Fx 1.3 DisponibleDisponible en Snapdeal, solo en India.
Spice Fire One (Mi-FX1) +
 
+ 		1.3DisponibleDisponible en Snapdeal, solo en India.
Alcatel OneTouch FireC 4020DOctubre 1, 20141.3DisponibleDisponible en Filpkart
Zen Fire 105Octubre 16, 20141.3DisponibleDisponible en Homeshop18
+ +

Versiones de Firefox OS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VersionFeature Complete (FC) dateRelease To Partner
+ (RTP) date		CodenameGecko versionIncluded security fixesRelease notes
1.0Diciembre 22, 2012Febrero 21, 2013TEFGecko 18Gecko 18 
1.0.1Enero 15, 2013Septiembre 6, 2013ShiraGecko 18Gecko 20Developer
+ Consumer
1.1Marzo 29, 2013Octubre 9, 2013LeoGecko 18+ (new APIs)Gecko 23Developer
+ Consumer
1.1.1 TBDHDSame as 1.1.0 with WVGAGecko 23 
1.2Septiembre 15, 2013Diciembre 9, 2013KoiGecko 26[39]Gecko 26Developer
+ Consumer
1.3Diciembre 9, 2013TBD Gecko 28Gecko 28Developer
+ Consumer
1.4Marzo 17, 2014TBD Gecko 30Gecko 30Developer
+ Consumer (TBD)
2.0TBDTBD Gecko 32Gecko 32Developer
+ Consumer (TBD)
+ +

Especificaciones de dispositivos

+ +

Nota hay algunos casos donde hay un upcoming device que no ha sido anunciado pero podemos compartir el nobre del codigo and (some of) the capabilities of the device.  DO NOT put extra info down for these devices unless Andreas Gal or someone else equally able to bless the public disclosure of the information has disclosed it.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreVersionesResoluciónPantalla (pulgadas)CPUCamara(s), MpxRAMROMStorageBattery (mAh)
+

Alcatel One Touch Fire

+ +

hamachi, buri

+ 		v1.0.1/v1.1 +

320 x 480
+ PX=1

+ 		3.5Qualcomm Snapdragon S1 MSM7227A 1 GHzRear: 3.2256MB512MB/data: probably the same as inari; specs say 160MB "end user memory"
+ Probably no built-in DeviceStorage, MicroSD card (up to 32GB) required
+  		1400
Alcatel One Touch Fire Ev1.3.0540 x 9604.5 +

Qualcomm Snapdragon 200
+ MSM8210
+ 1.2 GHz
+ dual-core
+  

+ 		Rear: 5512MB4GB 1700
+

ZTE Open / variants

+ +

ikura

+ 		v1.0.1 (as shipped)320 x 480
+ PX=1		3.5Qualcomm Snapdragon S1 MSM7225A 800 MHzRear: 3.2256MB512MB +

/data: 152M
+ No built-in DeviceStorage, MicroSD card required

+ 		1200
+

LG Fireweb

+ +

leo

+ 		v1.1320 x 480
+ PX=1		4Qualcomm  Snapdragon S1 MSM7227A 1 GHzRear: 5512MB4GB +

/data: 1007.90M
+ built-in DeviceStorage: yes, size unsure. possibly 3.7G, but that might be bad math.  (On an unhapy device /sys/devices/platform/msm_sdcc.3/mmc_host/mmc0/mmc0:0001/block/mmcblk0/block is 7733248, and then assuming a 512 byte block size, we get 3.7G)

+ 		1540
+

Geeksphone Keon

+ +

keon

+ 		+

v1.0.1 - nightly
+ downloads here

+ 		320 x 480
+ PX=1		3.5Qualcomm Snapdragon S1 7225AB 1 GHzRear: 3512MB4GB +

/data: 1.5G
+ built-in DeviceStorage: 1023.4M

+ 		1580
+

Geeksphone Peak

+ +

peak

+ 		v1.0.1 - nightly
+ downloads here		540 x 960
+ PX=1.5		4.3Qualcomm Snapdragon S4 8225 1.2 GHz dual-core +

Front: 2
+ Rear: 8

+ 		512MB4GB/data: 1.5G
+ built-in DeviceStorage: 1023.4M		1800
Geeksphone Revolutionv1.3pre (as shipped)540 x 960 PX=1.54.7Dual-core Intel® Atom™ processor Z2560 with up to 1.6GHz +

Front: 1.3 Rear: 8

+ 		1GB4GB +

/data: 2G
+ built-in DeviceStorage: 2.5GB

+ 		2000
+

Nexus 4

+ +

nexus-4

+ 		v1.3 - nightly768 x 1280
+ 720p		4.7 +

Qualcomm
+ Snapdragon S4 Pro
+ 1.5 GHz quad-core

+ 		Rear: 82GB8 or 16GBeverything exists in one big soup, there is no external (MicroSD) storage.  The size of the soup varies based on what model Nexus 4 you got.2100
+

Foxconn InFocus

+ +

flatfish

+ 		 1280 x 80010Allwinner A31, Cortex A7 Quad-Core 1.0 GHz +

Front: 2
+ Rear: 5

+ 		2GB16GB 7000
+

some phone thing

+ +

fugu

+ 		v1.2f (branch) per320 x 480   256MB   
+

Spreadtrum SC6821

+ +

tarako

+ 		v1.3 perHVGA
+ 320 x 480		3.5Spreadtrum SC6821, Cortex A5 1GHz0.3 (rear only?)128MB (zram)2GB NAND flash (external) + 1GB LPDDR1 (embedded)32GB micro SD card1100
+

VIA Vixen

+ +

community-driven customization of flatfish?

+ 		 1024 x 6007Cortex-A9 Dual Core 1.2 GHz +

Front: 0.3 Rear: 2
+  

+ 		1GB8GB  
+

Flame

+ +

"the reference device"

+ 		v1.3 +

FWVGA
+ 854 × 480
+ PX=1.5
+  

+ 		4.5 capacitive touch +

Qualcomm Snapdragon 200 MSM8210, 1.2GHZ Dual core processor

+ 		Front: 2
+ Rear: 5 auto focus with flash		256MB–1GB (adjustable by developer)8GB32GB micro SD card (USB 2.0)1800
ZTE Open Cv1.3 +

800 x 480 PX=1.5

+ 		4Qualcomm Snapdragon 200 MSM8210, 1.2GHZ Dual core processorRear: 3512MB4GB +

/data: 1G

+ 		1400
Symphony GoFox F15 +

v1.4

+ 		320 x 480
+ PX=?		3.5Spreadtrum 1 GHz Single Core Processor +

Front: 0.3
+ Rear: 3.2 with Flash

+ 		512MB512MB 1450
Intex Cloud FxV 1.3320 x 4803.5Spreadtrum 1 GHz
+ Rear: 2.0 without Flash		128 MB256 MB +

Data : 2G

+ +

Internal Storage: 46 MB(User Memory)

+ +

External -Micro SD Card : Upto 4GB Expanable

+ 		1250
Spice Fire One (Mi-FX1)V 1.3320 x 4803.5Spreadtrum 1 GHz +

Front :VGA

+ +

Rear 1.3

+ 		128 MB512 MB +

Data : 2G

+ +

Internal Storage: 67.9 MB(User Memory)

+ +

External -Micro SD Card: Upto 4GB Expanable

+ 		1400
Alcatel OneTouch FireC 4020DV 1.3320 x 4803.5Spreadtrum 1 GHz 128 MB256 MB +

Data : 2G

+ +

Internal Storage : 65 MB(User Memory)

+ +

External -Micro SD Card: Upto 32GB Expanable

+ 		1000
Zen Fire 105V 1.3320 x 4803.5Spreadtrum 1GHz +

Front :VGA

+ Rear 2 MP		128 MB256 MB +

Data : 2G

+ +

External -Micro SD Card: Upto 16GB Expanable

+ 		1200
+ +

Column explanations:

+ + diff --git a/files/es/archive/b2g_os/phone_guide/zte_open/index.html b/files/es/archive/b2g_os/phone_guide/zte_open/index.html new file mode 100644 index 0000000000..f5ae618098 --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/zte_open/index.html @@ -0,0 +1,287 @@ +--- +title: The Firefox OS ZTE OPEN +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN +--- +
+

Mozilla is partnered with ZTE. This partnership helped to create the ZTE OPEN, a powerful Firefox OS-based device aimed at developers and early adopters worldwide. They are unlocked and open for testing and experimentation.

+
+ +
+

Note: The instructions are not valid for the ZTE Open C device. If you have a ZTE Open C device you should go to our ZTE Open C page instead.

+
+ +

Purchasing a device

+ +

These devices are available through ZTE's US and UK eBay stores, and a separate Hong Kong page aimed at Asian and Oceanian customers who don't want to pay high postage costs. They are priced at $79.99/£59.99.

+ + + +

Upgrading Firefox OS

+ +

This section provides instructions for upgrading Firefox OS on your ZTE OPEN device.

+ +

General

+ +

In general, Firefox OS builds, updates and testing are done by connecting your phone to a computer using a USB cable, and using ADB (Android Debugging Bridge) and Fastboot to join the devices together and issue commands. You'll therefore need to install ADB and fastboot from the Android Developer Toolkit on your desktop machine. It is not necessary to install the entire toolkit. adb and fastboot are found in the /platform-tools/ folder.

+ +

Next, you need to go to your phone and enable remote debugging.

+ +

Firefox OS 1.1

+ +

On 10th December 2013: ZTE released a Firefox OS 1.1 upgrade for the ZTE OPEN. This now has fastboot enabled, which was caused the problems with the previous published builds.

+ +

At this point, it's best to first upgrade your phone to version 1.1, even if you wanted to go to version 1.2. To do this, download the 1.1 package that corresponds to your phone (OPEN (American Standard) or OPEN (European Standard)).  Note that you need to download the version with your OS revision in it (that is, download the "V1.1.0B02(for V1.0)" if you are upgrading from V1.0). The zip file you’ll download will also contain documentation for the upgrade.  Unzip it and copy the firmware ZIP (inside the downloaded zip) as described below.

+ +
+

Note: User data will be wiped by the SD package installation. You should backup your data before starting.

+
+ +

Now follow these steps:

+ +
    +
  1. Power off your phone, remove the battery to access the microSD card and extract the card from its holder.
    2. +
  2. Connect the microSD card to your desktop machine.
    3. +
  3. Move US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip or EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (depending on the version you downloaded) to the root directory of your microSD card. Do NOT unzip the file.
    4. +
  4. Disconnect the microSD card from your desktop computer and return it to your phone.
    5. +
  5. Hold the volume up button and power key down simultaneously. Volume up is activated by pressing the upper part of the long key on the left side of the phone. If you did it properly, you’ll enter the Firefox OS recovery mode. (Note: the Firefox OS logo may display briefly before you enter the recovery mode; sometimes this can take a little while.)
    6. +
  6. Use the volume up/down key to move from one item to the other in the menu, and choose “apply update from external storage.”
    7. +
  7. Press the power key to confirm the selection. You’ll see a new screen listing the files you have on the microSD card.
    8. +
  8. Again use volume up/down key to select the firmware: either US_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip or EU_DEV_FFOS_V1.1.0B04_UNFUS_SD.zip (depending on the version you downloaded), and press the power key to confirm.
    9. +
+ +

If everything went well, you’ll see a sequence of status messages, culminating with one that says, “Install from sdcard complete.”. You’ll need to select “reboot system now” after the installation has completed. Your phone will then reboot, and you’ll see the configuration screen you saw the first time you powered on the phone.

+ +

Firefox OS 1.2

+ +

In January 2014, ZTE released a beta version of Firefox OS 1.2 (fastboot enabled, with root access). It is basically version 1.1 baseline + version 1.2 Gecko and Gaia, and doesn't require the build to be put on the phone's SD Card.

+ +

With 1.1 installed as described above, open a terminal and check that the connection is made with the following command:

+ +
adb devices -l
+
+ +

You should see your device as something like, "roamer2    device usb:2-1.2", in response.

+ +

Download the appropriate version of the build from the Dropbox account ZTE has set up: US version or UK version. For Windows users, you can also download special instructions, and an upgrade tool to help you to install the new version easily. The steps below however will work on all operating systems – Linux, OS X, and Windows – without relying on the special tool.

+ +

Once you have the file, extract the contents, and open a console. Note that those steps will erase your personal data, so be sure to make a (backup) first. Then navigate to the folder where the files are. Still in the console, type this command:

+ +
adb reboot bootloader
+ +

While the phone is rebooting, execute the following command. (Fastboot only works inside a reboot):

+ +
sudo fastboot devices
+
+ +

If you see, "< waiting for device >", hit Ctrl-C and retry the command until you see something like, "ROAMER2    fastboot", in response.

+ +

Then, quickly execute the following commands while it is still rebooting:

+ +
fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot flash recovery recovery.img
+fastboot erase cache
+fastboot reboot
+ +
+

Note: If you keep encountering "waiting device" message. Try add sudo before the commands, like "sudo fastboot flash boot boot.img".

+
+ +

(The reboot completed before I was done entering all the commands as I was distracted. I simply restarted from the, "adb reboot bootloader".)

+ +

If everything went well, your phone should reboot at this point. You’ll find that this version of 1.2 from ZTE includes many test applications, which you can remove if you like.

+ +
+

Note: Upgrading your ZTE Open to Firefox 1.1 or 1.2 (fastboot enabled) by Frédéric Harper also provides a useful breakdown of the install process.

+
+ +
+

Note: There is a bug in ZTE's 1.2 build for the Open, whereby the notification tray won't pull down/open. This can be fixed by flashing the latest engineering version Firefox OS 1.2 to your phone. Make sure you have ADB installed and remote debugging turned on, then run the following commands in your terminal:
+
+ git clone -b v1.2 https://github.com/mozilla-b2g/gaia.git gaia_v1.2
+ cd gaia_v1.2
+ make reset-gaia

+
+ +

Firefox OS 1.3 and beyond

+ +

ZTE currently haven't released builds for Firefox OS 1.3 and beyond. To get these on your ZTE open you'll have to manually build and install a new Firefox OS/B2G build on it (start at the build prerequisite instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration). You can recover your phone if necessary, using the procedure cited in the I bricked my phone section.

+ +

Phone features

+ + + +
+

Note: the Hong Kong phones also support tri-band 3G Networks — HSDPA 850/1900/2100 (850/1900 for US, CA, 850/1900/2100 for Asia, AU, and 900/2100 for EU.)

+
+ +

Wireless carriers

+ +
+

Pricing information is for reference only and may not be accurate. Visit the associated link for official information.

+
+ +

US carriers

+ +

AT&T

+ + + +
Sampling of prepaid AT&T plans
+ +

Prepaid GoPhone®, Smartphone Plans

+ + + +

Aio

+ + + +
Sampling of prepaid Aio plans
+ + + +

Good2GO

+ + + +
Sampling of prepaid Good2GO plans
+ + + +

Other AT&T MVNOs

+ +

These carriers do not offer additional 3G data.

+ + + +

T-Mobile

+ + + +

Canadian carriers

+ +

The US version of the ZTE Open also work in Canada on carriers that use the Bell/Telus network, or the Rogers network. Some regional carriers like Sasktel or MTS that have UMTS should work too.

+ +

It will not work on carriers that do not use UMTS or GSM, like Public Mobile, nor on the carriers that use the AWS band like WIND Mobile, Mobilicity, Videotron or Eastlink.

+ +

Memory card

+ +

File system

+ +

In order to be recognized by the phone, the MicroSD card must be formatted as a FAT32 file system. If a card is new or has never been reformatted, it should work as is.

+ +

Device revisions

+ +

Revision 01

+ +

Phones produced before 09/27/2013 do not have fastboot enabled and must be updated. Normally, this would be handled by Software Updates, but since some users have reported trouble with this method, ZTE have made SD card packages available to enable fastboot on earlier devices. Flash images for:

+ + + +

The zip file is linked under Downloads.  Note that you need to download the version with your OS revision in it (that is, download the "V1.1.0B02(for V1.0)" if you are upgrading from V1.0).  Once the file is downloaded and unzipped, follow the instructions in the bundled PDF to flash the package to your phone.

+ +

Related Support Forum Questions:

+ + + +

Revision 02

+ +

Phones produced on or after 09/27/2013 are fastboot enabled by default. This includes the Hong Kong phones.

+ +
+

Note: If you are unsure of your phone's revision, check it in Settings > Device Information > Software. If it is older than the following version numbers, you will need to update your phone using the above SD packages to enable fastboot.

+ + +
+ +

Device support

+ +

Once your phone has fastboot enabled, you will then be able to build and install new Firefox OS/B2G builds on it (start at the build prerequisite instructions, and treat the ZTE like it is an Inari device, for the purposes of configuration), and recover your phone if necessary, using the procedure cited in the I bricked my phone section.

+ +

If you encounter errors about setting the system time while flashing a custom build, you may need to download a modified boot image.

+ +

I bricked my phone

+ +

If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with the following simple procedure.

+ +

First remove the USB cable and then remove the battery from the phone for 30 seconds. Then reinsert the battery and press the volume up button while holding the power button for a few seconds. Next reconnect the USB cable and run the following commands from a terminal window in the directory that contains the SD package files described above (it is worth checking for an update to the SD package before you do this):

+ +
fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+
+ +

This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.

+ +

Headphones not working?

+ +

We found that the headset jack is designed by a Chinese manufacturer that has compatibility problems with other brands of headsets that include microphones. You may have voice mute problems when you try to use headsets made by Apple, Samsung, HTC, and others. You can buy a 3.5 mm headset adapter that reverses the microphone and ground pins to avoid this problem. For more information, see error 812607.

+ +

Other support notes

+ +

Some customers have come across an Issue of FOTA updates failing to enable fastboot; this is still under investigation, and we are assisting ZTE to analyze every scenario. We will post more information as it is available.

+ +

If your phone was unfortunately damaged during the FOTA update because of ZTE providing false or wrong update files, you can attempt to restore it to factory settings using the appropriate SD image and instructions referenced in Revision 01. Otherwise, send your phone back to the eBay store you purchased it from in exchange for a new one. You may contact the store owner directly via an eBay message.

+ +

See also

+ +

Official Dev Phone page on Firefox Marketplace

+ +

Draft User Manual [en-US] - PDF

diff --git a/files/es/archive/b2g_os/phone_guide/zte_open_c/index.html b/files/es/archive/b2g_os/phone_guide/zte_open_c/index.html new file mode 100644 index 0000000000..985a7e413e --- /dev/null +++ b/files/es/archive/b2g_os/phone_guide/zte_open_c/index.html @@ -0,0 +1,226 @@ +--- +title: ZTE OPEN C +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C +tags: + - Dispositivos + - Gaia + - Guia(2) + - Móvil + - Open C + - Smarthpone + - Teléfono(2) + - Teléfonos(2) + - zte +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C +--- +
+

El ZTE Open C con Firefox OS es un móvil con Firefox OS mejorado por ZTE que ofrece un hardware más potente, incluyendo una cámara de 3MP y pantalla de 4 pulgadas con una calida WVGA, y viene instalado con Firefox OS 1.3. Este artículo proporciona información acerca del dispositivo, incluyendo como actualizarlo y detalles de como solucionar problemas.

+
+ +
+

Nota: Las instrucciones no son válidas para el ZTE Open. Si tienes un ZTE Open debes ir al link del ZTE Open

+
+ +
+

Nota: La herramienta de actualización que es necesaria para desbloquear el dispositivo (mirar abajo) solo está disponible para Windows en este momento. Sin embargo, hay una manera más complicada de desbloquear el dispositivo en OS X o Linux que es descrita más abajo.

+
+ +

El ZTE Open C es el primer dispositivo con las últimas actualizaciones de Firefox os de mediados de 2014 ofreciendo nuevas características incluyendo un acceso al reproductor de música desde la pantalla de bloqueo o la barra de notificaciones y compartir archivos por Bluetooth, permitiendo transferir varios archivos simultaneamente. Los usuarios pueden desplazarse por el dispositivo más rápido con las carpetas inteligentes que agrupan apicaciones o búsquedas de aplicaciones automaticamente en categorías, un sistema de scroll mejorado y aplicaciones del sistema que se inician más rápido.(ej: calendario, contactos, cámara...)

+ +

Obtén tu dispositivo

+ +

El dispositivo está disponible para comprar en ebay a un precio de 70$

+ + + +
+

Nota: Clientes de Francia deben echar un vistazo a la página francesa de MDN para obtener sus respectivos proveedores.

+
+ +
+

Nota: Los dispositivos no vienen con ninguna aplicación específica de cada operador o sus servicios y están liberados para todas las variantes de los primeros clientes.

+
+ +

Especificaciones del dispositivo

+ +

Puedes encontrar más información de sus especificaciones en el listado de especifiaciones del telefono y dispositivo.

+ +

Actualizando el software

+ +
+

Nota: La comunidad francesa de Mozilla proporciona builds actualizadas del ZTE Open C.

+
+ +

Para actualizar el software de tu ZTE Open C, la forma más facil usar las builds disponibles en la página de ZTE. Para encontrar esto, ve al centro de soporte de ZTE, selecciona tu región en la columna derecha, en la columa del centro selecciona Smartphones, y Open C (estándar europeo) o Open C (estándar americano), dependiendo de donde viniera el dispositivo que compraste. Sólo pudimos encontrar el ZTE Open C en España a partir de Agosto del 2014. Luego clickea en Seleccionar para ir a la página de descarga.

+ +

Cuandp vayas a descargar una build, deberás encontrar un PDF en un ZIP explicando como instalar la build.

+ +

Actualización manual.

+ +

Si quieres actualizar Gecko o Gaia tú mismo, el proceso es un poco complicado, porque el teléfono está bloqueado por defecto (no hay permisos root). Para desbloquear tu teléfono, puedes usar la herramienta de actualización del Open C.

+ +
+

Nota: Esta herramienta de actualización solo está disponible para Windows por ahora.

+
+ +

Si quieres desbloquear tu móvil desde OS X o Linux, esto es lo que tienes que hacer:

+ +
    +
  1. Descarga la build desde el link de Comebuy.com
    2. +
  2. Extrae la build del paso 1 y deberás encontrar un archivo boot.img dentro del zip.
    3. +
  3. +

    Añade las siguientes líneas en  in /etc/udev/android.rules :

    + + 
    SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", ATTR{idProduct}=="1350", MODE="0666", GROUP="plugdev"
+SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666", GROUP="plugdev"
    +
    4. +
  4. Para entrar en el modo fastboot usa los siguientes comandos en tu terminal: + 
     adb reboot-bootloader
    +
    5. +
  5. Para flashear el archivo boot.img del paso 2 al dispositivo, usa este comando: + 
     fastboot flash boot boot.img
    + si lo prefieres, para verificar que fumciona antes de flashear, deberás usar: + + 
     fastboot boot boot.img
    +
    6. +
  6. Para reiniciar el dispositivo usa: + 
     fastboot reboot
    +
    7. +
  7. Ahora deberás tener el móvil desbloqueado y funcionando: + 
    adb shell getprop ro.secure
    + deberás volver al paso 0.
    8. +
+ +

Actualizando Gecko y Gaia

+ +

Una vez que tu móvil esté en modo fastboot, podrás construir e instalar una nueva versión de Firefox OS/B2G y los componenetes Gecko y Gaia.

+ +
    +
  1. Comienza en instrucciones, y trata al Open C como al Flame en términos de configuración: esto es debido a que el Flame y el Open c están basados en Android Jellybean. + +
    +

    Cuidado: Esto no significa que puedas flashear una imagen del Flame. Hacer esto provocará un brick permanente en tu móvil que no podrá ser solucionado.

    +
    +
    2. +
  2. Durante el paso de configuración, necesitarás un archivo manifest para el Open C. Descargalo desde aquí y guardalo en cualquier lugar de tu disco local como openc.xml.
    3. +
  3. Limpia el  directorio B2G, borrando los directorios innecesarios: + 
    rm -rf objdir-gecko/ out/ backup-flame/
    +
    4. +
  4. Opcional: Antes de continuar, puedes escoger la versión de Gecko y Gaia que quieres construir. Para hacer eso, abre el archivo openc.xml, localiza las etiquetas gecko git, gaia y gonk-misc, y modifica el valor de su revisión para coincidir con la versión que quieres. Ejemplo: puedes construir la versión 2.2 de Gecko y Gaia, con lo siguiente: + 
    <project name="gecko.git" path="gecko" remote="mozillaorg" revision="v2.2"/>
+(...)
+<project name="gaia" path="gaia" remote="mozillaorg" revision="v2.2"/>
+<project name="gonk-misc" path="gonk-misc" remote="b2g" revision="v2.2"/>
    +
    5. +
  5. Ahora configura Firefox OS con los siguientes comandos: (Nota: el directorio no puede contener espacios, de otra manera no funcionará) + 
    ./config.sh flame /PATH/TO/openc.xml
    +
    6. +
  6. Puedes construir el componente Gecko y flashearlo en tu teléfono usando lo siguiente: + 
    ./build.sh gecko
+./flash.sh gecko
    + +
    +

    Nota: El último paso del comando flash.sh es para reiniciar el dispositivo, pero la secuencia de inicio no se completará (se congelará cuando salga el zorro animado). No te preocupes, esto es normal.

    +
    +
    7. +
  7. Ahora puedes actualizar Gaia, para que la nueva versión de Gecko funcione con la nueva versión de Gaia en tu dispositivo : + 
    cd gaia
+make reset-gaia
    +
    8. +
  8. Finalmente, puede que necesites actualizar las fuentes.
    9. +
+ +
+

Cuidado: Intentar flashear una imagen del Flame dejará tu móvil brickeado.

+
+ +

 

+ +

Actualizando Gaia

+ +

 

+ +

Para actualizar solo Gaia, dejando Gecko solo, necesitas clonar el repositorio de Gaia desde Github, luego flashealo en tu dispositivo.

+ +
    +
  1. Asegurate de que tienes ADB instalado.
    2. +
  2. Ve a https://github.com/mozilla-b2g/gaia, luego haz click en el botón "fork", situado en la esquina derecha arriba para forkearlo en tu repositorio.
    3. +
  3. Clona el código desde tu repositorio forkeado en tu escritorio ejecutando lo siguiente en tu terminal: + 
    git clone https://github.com/your-github-username/gaia.git
    +
    4. +
  4. Usa el comando cd en el directorio resultante.
    5. +
  5. En tu teléfono, activa la depuración remota (elige ADB y la opción Devtools)
    6. +
  6. Ahora conecta tu móvil al ordenador vía USB; asegurate de que es reconocido metiendo dispositivos adb en tu terminal.
    7. +
  7. Ejecuta los siguientes comandos para reiniciar tu móvil y actualiza con el nuevo código fuente de Gaia. + 
    make reset-gaia
    +
    8. +
+ +

Arreglar fuentes

+ +

Después de actualizar Gecko/Gaia, puede que encuentres diferencias entre las fuentes de Gecko y Gaia. Para arreglar esto, descarga nuestra actualización de fuentes, extraelo, accede al directorio creado tras la extracción, y ejecuta el script flash.sh.                                                                                                      
+
+ Otra opción es usar el script para actualizar las fuentes del sistema, que descarga y flashea las fuentes del sistema automaticamente.

+ +

Imágenes del sistema

+ +

Si no quieres compilar Gecko y Gaia por ti mismo, puedes usar una imágen compabitle del Flame ofrecida por Mozilla. Siempre que tu teléfono haya sido desbloqueado con la herramienta de ZTE, puedes flashear una imágen del sistema desde el directorio de imágenes de prueba (nightly builds). Este proceso borrará todos tus datos; para hacer una copia de seguridad de tu perfil de usuario usa este script antes de flashear el nuevo sistema.

+ +

Elige tu sabor favorito entre mozilla-centra, aurora, o vanilla y elige el entorno Gecko. Todas los directorios de imagen son llamados como "2014-10-06-xx-yy-zz-mozilla-your_flavor-device_codename" así que necesitarás buscar "2014-10-06-xx-yy-zz-mozilla-your_flavor-flame". La imágen de B2G que está dentro del directorio específico de Gecko tiene una versión y lenguaje básico, "b2g-34.0a2.en-US.android-arm.tar.gz" es la versión Gecko 34 y el lenguaje es inglés americano por defecto, descarga "Gaia.zip" si quieres actualizar Gaia también.

+ +

Para flashear estos archivos en el dispositivo necesitarás un script llamado shallow_flash; puedes encontrarlo aquí, descarga el script y ejecútalo vía terminal.

+ +

En Mac y Cygwin

+ +
./shallow_flash.sh -g gaia.zip -G b2g-XX.XX.en-US.android-arm.tar.gz
+ +

En Linux

+ +
./shallow_flash.sh -ggaia.zip -Gb2g-XX.XX.en-US.android-arm.tar.gz
+ +

 

+ +

He bloqueado (brick) mi teléfono

+ +

Si tu equipo no responde, deberías desbloquearlo (unbrick) utilizando las builds oficiales y las intrucciones para flashearlo vía tarjeta SD, en la página oficial de ZTE.

+ + + +

Sin embargo, si la partición de tu sistema es defectuosa, tendrás que repararlo usando directamente el acceso fastboot. Asumiendo que estás utilizando Ubuntu GNU/Linux:

+ +
    +
  1. Descarga la imágen del sistema de recuperación desde la página de soporte de ZTE y extrae el archivo update.zip en tu escritorio.
    2. +
  2. Extrae el archivo recovery.img desde update.zip.
    3. +
  3. Crea un directorio small-system/ en el escritorio y copia dentro el archivo build.prop, y los directorios lib/ y bin/ que encontrarás en el archivo update.zip.
    4. +
  4. Instala el paquete android-tools-fsutils ( o instala ext4_utils desde la fuente en XDAdevelopers.
    5. +
  5. Crea tu  small-system.img: + 
    ./make_ext4fs -l 40M small-system.img ~/Desktop/small-system/
    +
    6. +
  6. Mueve el archivo small-system.img a tu escritorio y enciende el dispositivo en modo fastboot presionando el botón power y el botón de bajar volumen a la vez.
    7. +
  7. Conecta el dispositivo a tu ordenador (los dispositivos fastboot se deberían mostrar) y flasea small-system.img + 
    fastboot flash system small-system.img
    +
    8. +
  8. Entonces enciende el móvil en modo recovery usando recovery.img: + 
    fastboot boot recovery.img
    +
    9. +
  9. En el menú de booteo, selecciona la entrada apply udate from ADB (usando volúmen arriba y volumen abajo para navegar y power para seleccionar) y entonces: + 
    adb sideload update.zip
    +
    10. +
  10. +

    Al finalizar el proceso, sólo tienes que reiniciar tu dispositivo.

    +
    11. +
+ +
+

Nota: Puedes hacer referencia a esta entrada de soporte para más información.

+
diff --git a/files/es/archive/b2g_os/platform/gaia/hacking/index.html b/files/es/archive/b2g_os/platform/gaia/hacking/index.html new file mode 100644 index 0000000000..22599068e9 --- /dev/null +++ b/files/es/archive/b2g_os/platform/gaia/hacking/index.html @@ -0,0 +1,226 @@ +--- +title: Hackeando Gaia +slug: Archive/B2G_OS/Platform/Gaia/Hacking +translation_of: Firefox_OS/Developing_Gaia +--- +
+

Esta página está dirigida a desarrolladores de Gaia. Si usted está buscando información acerca de cómo construir y ejecutar Firefox OS, debería consultar la página de Construyendo e Instalando Firefox OS en su lugar.

+
+ +

Gaia es la colección de aplicaciones web que forman la interfaz de Firefox OS. Cualquier cosa que usted vea en la pantalla del Firefox OS es creada usando tecnologías web abiertas. Esto incluye la pantalla de inicio y todas las aplicaciones predeterminadas.

+ +

Obteniendo el código fuente

+ +

Para obtener el código fuente de Gaia, fork us on GitHub and then clone your fork using git.

+ +
$ git clone https://github.com/mozilla-b2g/gaia.git
+ +

Ejecutando Gaia

+ +

Usted puede ejecutar Gaia en el escritorio, en Firefox, o en un un dispositivo móvil compatible.

+ +

B2G desktop

+ +

B2G desktop es una versión de escritorio de la aplicación de ejecución utilizada en los dispositivos Firefox OS, la cual puedes utilizar para correr Gaia en tu computadora de escritorio.

+ +

Puedes descargar una versión nightly de B2G desktop desde aquí.Dependiendo de qué versión estés utilizando, puede que quieres una versión específica de latest-mozilla-b2g18. Hay versiones para Linux (32 bits y 64 bits), Mac OS X y Windows.

+ +

Las versiones Nightly tienen empaquetadas con ellas una versión reciente de Gaia. Una vez que hayas descargado el archivo, todo lo que necesitas es extraerlo en una carpeta y correr el binario de b2g desde la carpeta extraída.

+ +
+

Nota: Las versiones de 64-bits de Linux no funcionan correctamente con algunas distribuciones, se trata del error 812484. Si tienes problemas trata con una versión de 32-bits en lugar de una de 64-bits

+
+ +
$ cd b2g
+$ ./b2g
+ +

Para correr B2G con tu propia versión de Gaia para propósitos de desarrollo primero necesitas una construir una versión de tu copia:

+ +
$ cd /path/to/gaia
+$ DEBUG=1 make
+ +

Esto generara un directorio en tu carpeta gaia llamada profile. La parte DEBUG correo Gaia como aplicaciones locales en servidor-web interno, en lugar las aplicaciones empaquetadas por defecto, estas tienen que ser re-empaquetadas después de cada cambio. Puedes encontrar la ruta del perfil de directorio tomando un vistazo a la última línea de salida después de ejecutar el comando de abajo, que debería verse así:

+ +
Profile Ready: please run [b2g|firefox] -profile /path/to/gaia/profile
+ +

Puedes entonces correr B2G Desktop con tu perfil generado como se indica abajo:

+ +
$ ./b2g /path/to/gaia/profile
+ +

Si quieres puedes compilar tu propio B2G desktop desde el código.

+ +

Usando Gaia en Firefox

+ +

It's also possible to run Gaia inside of Firefox. This gives you the advantages of having a rapid development cycle, as well as standard web development tools and debuggers. See Using Gaia in Firefox for details on how to do this.

+ +

Usando Gaia en un dispositivo

+ +

If you have a compatible mobile device you can also run Gaia by flashing it with Firefox OS. See Building and installing Firefox OS for details on how to do this. We also have documentation for how to test Firefox OS.

+ +

Unidad de pruebas

+ +

See Gaia unit tests for documentation about how to create and run unit tests for Gaia.

+ +

Presentando errores

+ +

Bugs are filed on Bugzilla under Firefox OS > Gaia. File a new bug under the Gaia component (or one of the sub-components).

+ +

Contribuyendo a Gaia

+ +

Mozilla depends on contributions from the open source community to help develop Gaia apps and we'd love you to get involved.

+ +

Some great places to find some bugs to start hacking on:

+ + + +

Estilos de codificación básicos

+ + + +

Reglas Adicionales

+ +

Mal:

+ +
if (expression) doSomething();
+
+ +

Correcto:

+ +
if (expression) {
+  doSomething();
+}
+
+ +

If you're working on the system app, check out the guidance listed here.

+ +

Before submitting a patch we recommend you run gjslint on it to check for any style errors:

+ +
gjslint --nojsdoc my_file.js
+ +

Enviando un parche

+ +

First file or assign a bug to yourself on Bugzilla, you'll need a Bugzilla account.

+ +

Then create a branch on your fork of Gaia:

+ +
$ git branch branchname
+$ git checkout branchname
+ +

Commit your changes:

+ +
$ git add /file/to/add
+$ git commit -m "Bug XXXXX - Fix the broken Gaia and save the world"
+ +

Push your branch:

+ +
$ git push origin branchname
+ +

Send a pull request by navigating to the branch in your fork on GitHub and finding the pull request button.

+ +

To request a review of your patch, add an attachment to the bug in Bugzilla referencing the URL of the pull request and set the review ("r") flag to "?" and enter the bugzilla ID of one of the module owners and peers. The Github tweaks for bugzilla extension on AMO can help automate this process by automatically creating the attachment and adding it to the bug; you will still need to set the review flag on Bugzilla.

+ +

The reviewer may ask you to make some changes. Once they're is happy with your patch, they will merge it into the master branch for you. Before they do this they would prefer it if you could squash all your changes into a single commit, so your contribution can be tracked easily.

+ +

The person who merge the commit (usually the reviewer) would add a r= flag in the comment of the merge commit.

+ +

Opciones de Make

+ +

There are many undocumented nor unsupported environment variable presists in the Makefile. Do not depend on them as they may be removed in the future.

+ +

Default

+ +
make
+ +

Make a profile with packaged apps, lunachable by B2G Desktop and can be pushed to device.

+ +

Debug make

+ +
DEBUG=1 make
+ +

The DEBUG part runs Gaia as hosted apps on a built-in web server, rather than the default packaged apps which have to be re-packaged after every change. Launch the profile with the latest Firefox Nightly will also give you nice B2G specific panels on the Firefox Developer Tools.

+ +

Push to device

+ +
make install-gaia
+
+make reset-gaia
+ +

With adb (Android Debug Bridge) setup, these make targets will push Gaia to the device. reset-gaia will purge the profile and all other webapps before pushing the new Gaia copy.

+ +

Selective build

+ +
APP=system make
+
+APP=system make install-gaia
+ +

With a profile already exists, APP allow you to specify which app to re-package, instead of re-pack and re-push all the Gaia apps.

+ +

High resolution image assets

+ +
GAIA_DEV_PIXELS_PER_PX=1.5 make
+ +

When packaging the app, replace images with their *@1.5x.(gif|jpg|png) ones if such image exists.

+ +

Gaia is currently targetting HBGA (320x240), qHD (540×960) and WVGA (480×800) only; use GAIA_DEV_PIXELS_PER_PX to make sure the images looks sharp on qHD and WVGA devices. see A pixel is not a pixel for more information about device pixels per css pixels.

+ +

Script compression and optimization

+ +
GAIA_OPTIMIZE=1 make
+ +

(TBA)

+ +

App selection

+ +
GAIA_APP_SRCDIRS=apps test_apps showcase_apps
+ +

(TBA)

+ +

App selection shortcuts

+ +
PRODUCTION=1
+DOGFOOD=1
+ +

(TBA)

+ +

Preference shortcuts

+ +
NOFTU=1
+REMOTE_DEBUGGER=1
+ +

(TBA)

+ +

Device webapp installation partation selection

+ +
B2G_SYSTEM_APPS=1
+ +

(TBA)

+ +

Distribution and market customization build

+ +
GAIA_DISTRIBUTION_DIR=./dir
+ +

Read Customization Overview for detail.

+ +

Contacting the Team

+ + diff --git a/files/es/archive/b2g_os/platform/gaia/index.html b/files/es/archive/b2g_os/platform/gaia/index.html new file mode 100644 index 0000000000..f8664fd4ee --- /dev/null +++ b/files/es/archive/b2g_os/platform/gaia/index.html @@ -0,0 +1,61 @@ +--- +title: Gaia +slug: Archive/B2G_OS/Platform/Gaia +tags: + - '#B2G #gaia' +translation_of: Archive/B2G_OS/Platform/Gaia +--- +

Gaia es la capa de interfaz de usuario de Firefox OS. Todo lo que aparece en la pantalla luego que Firefox OS inicia es presentado por Gaia, incluyendo la pantalla de bloqueo, el marcador y otras aplicaciones. Gaia está completamente escrito en HTML, CSS, y JavaScript. Su única interfaz al sistema operativo y hardware subyacentes es a través de interfaces web estándar (Web API), implementadas por Gecko.

+

Por su diseño, Gaia puede ser ejecutado no solo en dispositivos Firefox OS, sino en otros sistemas operativos y otros navegadores (aunque posiblemente con funcionalidad reducida dependiendo de las capacidades del navegador).

+

Aplicaciones de terceros instaladas junto a Gaia pueden ser cargados por Gaia.

+ + + + + + + +
+

Documentación sobre Gaia

+
+
+ Introducción a Gaia
+
+ Gaia es la intefaz de usuario para dispositivos Firefox OS; Es simplemente una aplicación web corriendo en la parte superior de Firefox OS. Esta guia te introducirá a Gaia.
+
+ Guía para hackear Gaia
+
+ La guía para hackear y modificar la interfaz de Gaia.
+
+

Ver todas...

+ 		+

Obteniendo ayuda de la comunidad

+

Si estas trabajando en Gaia, o desarrollando aplicaciones para Gaia, estos son los recursos de la comunidad para ayudarte

+ +
    +
  • Haz tus preguntas en el canal Gaia del irc de Mozilla: #gaia
    • +
+

No olvides como hacer adecuadamente tus preguntas...

+
+ + +

Recursos

+ +
+


+  

diff --git a/files/es/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html b/files/es/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html new file mode 100644 index 0000000000..14c7fb3e16 --- /dev/null +++ b/files/es/archive/b2g_os/platform/gaia/introduction_to_gaia/index.html @@ -0,0 +1,13 @@ +--- +title: Introducción a Gaia +slug: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia +translation_of: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia +--- +

Gaia es la interfaz de usuario de Boot to Gecko (B2G); es un conjunto de aplicaciones Web que se ejecutan en un dispositivo B2G, emulador, repertorio de escritorio, o versión de Firefox. Todo lo que necesitas conocer para añadir aplicaciones o realizar cambios a Gaia son tecnologías Web como JavaScript, HTML, and CSS.

+

Pantalla de bloqueo de Gaia

+

Predeterminadamente, la pantalla de bloqueo está habilitada, y el PIN por defecto para desbloquear el equipo es "0000". Es muy probable que esta característica cambie con el tiempo mientras es optimizada.

+

La interfaz por defecto de Gaia

+

La interfaz por defecto en Gaia es similar a lo que se observa en la mayoría de los teléfonos inteligentes, como se muestra aquí.

+

Gaia HomeEsta imagen es evidentemente de una versión preliminar del sistema operativo, con iconos de relleno (y algunas aplicaciones de prueba). La barra de estado en la parte superior indica la red en la que el teléfono está operando (o "No hay tarjeta SIM" para un dispositivo sin ninguna red telefónica), la intensidad de la red, la intensidad de la señal WiFi, nivel de batería, y la hora actual.

+

La sección media de la pantalla muestra los iconos de las aplicaciones; al deslizar hacia la izquierda y derecha se desplaza a través de pantallas de iconos.

+

En la parte inferior de la pantalla se localiza una barra con espacio para hasta siete de las aplicaciones más usadas. Puedes arrastrar y soltar aplicaciones a esta barra desde la sección media.

diff --git a/files/es/archive/b2g_os/platform/index.html b/files/es/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..1e6dda531b --- /dev/null +++ b/files/es/archive/b2g_os/platform/index.html @@ -0,0 +1,94 @@ +--- +title: La Plataforma Firefox OS +slug: Archive/B2G_OS/Platform +translation_of: Archive/B2G_OS/Platform +--- +

La Plataforma Firefox OS esta formada por varios componenetes. No obstante no es necesario comprender su arquitectura para desarrollar aplicaciones que funcionen en Firefox OS, si estás trabajando en el desarrollo o adaptación de esta plataforma, o simplemente estás curioseando, esta documentación puede resultar de tu interés.

+ + + + + + + +
+

DocumentaCion sobre la plataforma Firefox OS

+
+
+ Introducción al Firefox OS
+
+ Información introductoria sobre qué y cómo trabaja Firefox OS.
+
+ Instalación y Montaje de Firefox OS
+
+ Una guía para Instalar y Montar Firefox OS en terminales compatibles. Esta guía además incluye un emulador para poder arrancar Firefox OS en un PC.
+
+ Gaia
+
+ Documentacion sobre Gaia, la interfaz de usuario para los dispositivos Firefox OS; se trata de una Aplicación Web que se ejecuta en el propio dispositivo plataformado con Firefox OS.
+
+ Gonk
+
+ Documentación sobre Gonk, la capa del sistema operativo sobre el que corre Gaia. Está formado por un nucleo de Linux (Linux kernel) y una capa de drivers que permiten la comunicación entre Gecko y el propio dispositivo.
+
+ Gecko
+
+ Gecko es la capa de Firefox OS que proporciona a la plataforma los mismos estándares web abiertos, utilizados por Firefox y Thunderbird, así como muchas otras aplicaciones.
+
+ Feature support chart
+
+ A chart of which features are available in which types of Firefox OS builds.
+
+ Firefox OS architecture overview
+
+ An overview of how Firefox OS is structured internally; this is primarily of interest to platform developers and people doing porting work.
+
+ Firefox OS apps architecture
+
+ An overview of the application model on Firefox OS.
+
+ Testing Firefox OS
+
+ A guide to testing Firefox OS, including information about creating automated tests.
+
+ Porting Firefox OS
+
+ Information about how to port Firefox OS to new devices.
+
+ Customization with the .userconfig file
+
+ How to customize the build and execution of Firefox OS by changing the .userconfig file.
+
+

View All...

+ 		+

Getting help from the community

+

If you're working with Firefox OS, or developing applications you'd like to run on Firefox OS devices, there are community resources to help you!

+ +
    +
  • Ask your question on Mozilla's Boot to Gecko IRC channel: #b2g
    • +
+

Don't forget about the netiquette...

+
+ + +

Resources

+ +
+

 

diff --git a/files/es/archive/b2g_os/platform/settings_list/index.html b/files/es/archive/b2g_os/platform/settings_list/index.html new file mode 100644 index 0000000000..d5397affd8 --- /dev/null +++ b/files/es/archive/b2g_os/platform/settings_list/index.html @@ -0,0 +1,709 @@ +--- +title: Firefox OS settings list +slug: Archive/B2G_OS/Platform/Settings_list +translation_of: Archive/B2G_OS/Platform/Settings_list +--- +
+

Firefox OS offers a number of settings that configure the device and its built-in features. These settings can be accessed by certified apps using the Settings API.

+
+
+

Note: Because of differences in features provided by different devices and different releases of Firefox OS, this list may or may not be an exact match for what's available on every device.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Setting nameTypeDefault value
accessibility.invertBooleanfalse
accessibility.screenreaderBooleanfalse
alarm.enabledBooleanfalse
app.reportCrashesStringask
app.update.intervalNumber86400
audio.volume.alarmNumber15
audio.volume.bt_scoNumber15
audio.volume.dtmfNumber15
audio.volume.contentNumber15
audio.volume.notificationNumber15
audio.volume.ttsNumber15
audio.volume.telephonyNumber5
bluetooth.enabledBooleanfalse
bluetooth.debugging.enabledBooleanfalse
camera.shutter.enabledBooleantrue
clear.remote-windows.dataBooleanfalse
debug.grid.enabledBooleanfalse
debug.oop.disabledBooleanfalse
debug.fps.enabledBooleanfalse
debug.ttl.enabledBooleanfalse
debug.log-animations.enabledBooleanfalse
debug.paint-flashing.enabledBooleanfalse
debug.peformancedata.sharedBooleanfalse
deviceinfo.firmware_revisionString 
deviceinfo.hardwareString 
deviceinfo.osString 
deviceinfo.platform_build_idString 
deviceinfo.platform_versionString 
deviceinfo.softwareString 
deviceinfo.update_channelString 
gaia.system.checkForUpdatesBooleanfalse
general.useragent.updates.enabledBooleantrue
geolocation.enabledBooleantrue
keyboard.layouts.englishBooleantrue
keyboard.layouts.dvorakBooleanfalse
keyboard.layouts.otherlatinsBooleanfalse
keyboard.layouts.cyrillicBooleanfalse
keyboard.layouts.arabicBooleanfalse
keyboard.layouts.hebrewBooleanfalse
keyboard.layouts.zhuyinBooleanfalse
keyboard.layouts.pinyinBooleanfalse
keyboard.layouts.greekBooleanfalse
keyboard.layouts.japaneseBooleanfalse
keyboard.layouts.polishBooleanfalse
keyboard.layouts.portugueseBooleanfalse
keyboard.layouts.spanishBooleanfalse
keyboard.vibrationBooleanfalse
keyboard.clicksoundBooleanfalse
keyboard.autocorrectBooleantrue
keyboard.wordsuggestionBooleantrue
keyboard.currentStringen
language.currentStringen-US
lockscreen.passcode-lock.codeString0000
lockscreen.passcode-lock.timeoutNumber0
lockscreen.passcode-lock.enabledBooleanfalse
lockscreen.notifications-preview.enabledBooleantrue
lockscreen.enabledBooleantrue
lockscreen.lockedBooleantrue
lockscreen.unlock-sound.enabledBooleanfalse
mail.sent-sound.enabledBooleantrue
message.sent-sound.enabledBooleantrue
operatorvariant.mccString0
operatorvariant.mncString0
ril.iccInfo.mbdnString 
ril.sms.strict7BitEncoding.enabledBooleanfalse
ril.cellbroadcast.searchlistString 
debug.console.enabledBooleanfalse
phone.ring.keypadBooleantrue
powersave.enabledBooleanfalse
powersave.thresholdNumber0
privacy.donottrackheader.enabledBooleanfalse
ril.callwaiting.enabled  
ril.cf.enabledBooleanfalse
ril.data.enabledBooleanfalse
ril.data.apnString 
ril.data.carrierString 
ril.data.defaultServiceIdNumber0
ril.data.passwdString 
ril.data.httpProxyHostString 
ril.data.httpProxyPortNumber0
ril.data.mmscString 
ril.data.mmsproxyString 
ril.data.mmsportNumber0
ril.data.roaming_enabledBooleanfalse
ril.data.userString 
ril.mms.apnString 
ril.mms.carrierString 
ril.mms.httpProxyHostString 
ril.mms.httpProxyPortString 
ril.mms.mmscString 
ril.mms.mmsportString 
ril.mms.mmsproxyString 
ril.mms.passwdString 
ril.mms.userString 
ril.radio.preferredNetworkTypeString 
ril.radio.disabledBooleanfalse
ril.supl.apnString 
ril.supl.carrierString 
ril.supl.httpProxyHostString 
ril.supl.httpProxyPortString 
ril.supl.passwdString 
ril.supl.userString 
ril.sms.strict7BitEncoding.enabledBooleanfalse
ril.sms.defaultServiceIdNumber0
ril.telephony.defaultServiceIdNumber0
ring.enabledBooleantrue
screen.automatic-brightnessBooleantrue
screen.brightnessNumber1
screen.timeoutNumber60
tethering.usb.enabledBooleanfalse
tethering.usb.ipString192.168.0.1
tethering.usb.prefixString24
tethering.usb.dhcpserver.startipString192.168.0.10
tethering.usb.dhcpserver.endipString192.168.0.30
tethering.wifi.enabledBooleanfalse
tethering.wifi.ipString192.168.1.1
tethering.wifi.prefixString24
tethering.wifi.dhcpserver.startipString192.168.1.10
tethering.wifi.dhcpserver.endipString192.168.1.30
tethering.wifi.ssidStringFirefoxHotspot
tethering.wifi.security.typeStringopen
tethering.wifi.security.passwordString1234567890
tethering.wifi.connectedClientsNumber0
tethering.usb.connectedClientsNumber0
time.nitz.automatic-update.enabledBooleantrue
time.timezone  
ums.enabledBooleanfalse
ums.modeNumber0
vibration.enabledBooleantrue
wifi.enabledBooleantrue
wifi.screen_off_timeoutNumber600000
wifi.disabled_by_wakelockBooleanfalse
wifi.notificationBooleanfalse
wifi.connect_via_settingsBooleanfalse
icc.displayTextTimeoutNumber40000
icc.inputTextTimeoutNumber40000
+

See also

+ diff --git a/files/es/archive/b2g_os/portando/index.html b/files/es/archive/b2g_os/portando/index.html new file mode 100644 index 0000000000..6dada46208 --- /dev/null +++ b/files/es/archive/b2g_os/portando/index.html @@ -0,0 +1,369 @@ +--- +title: Portando a Boot to Gecko +slug: Archive/B2G_OS/Portando +tags: + - B2G + - portar + - porting +translation_of: Archive/B2G_OS/Porting_B2G_OS/basics +--- +

Boot to Gecko (FirefoxOS) utiliza un kernel derivado de Android, con una interfaz de usuario basada en Gecko sobre él. Este artículo provee la guía básica de cómo portar el sistema operativo en nuevos dispositivos.

+

Esta guía asume que tu estas portando en un dispositivo nuevo que está funcionando con Andriod; Si estás portando a otro dispositivo, el trabajo va a ser más enredado.

+

Prequisitos

+

Configurando la compilación de tu sistema

+

El primer paso es configurar la compilación del sistema; puedes seguir la guía en prerequisitos para compilar B2G.

+

Crear una copia de seguridad local del sistema original de Android

+

A continuación, deberás hacer una copia de seguridad de tu dispositivo Android antes de empezar a bombardearlo con tu compilación de pruebas de B2G. Además, algunos de estos comandos serán necesarios para el proceso de compilación e instalación.

+
mkdir my_device_backup
+cd my_device_backup
+adb pull /system system
+
+

Nota: Esto es opcional pero es recomendado, ya que algunas veces es posible tener perdidas mayores ocasionadas por problemas de compilaciones, en donde si no posees una copia de los archivos propietarios de tu telefono, lo mas probable es que el problema sea irreparable.

+
+

B2G

+

Crea un fork del repositorio de B2G

+

Para esto necesitas una cuenta en Github.com, si no la tienes, creala y luego realiza un fork del siguiente repositiorio:

+
https://github.com/mozilla-b2g/B2G
+

Si no sabes como crear un fork de un repositorio en visita este sitio para obtener ayuda.

+

Clona tu repositorio de B2G

+

Una vez hecho el fork anterior, para empezar a portar B2G a tu nuevo dispositivo, es necesario que clones el repositiorio en tu equipo, clonamos el reposiorio de la siguiente manera:

+
git clone https://github.com/Your-User-Name/B2G.git
+
+

Remplaza Your-User-Name con el usuario de tu cuenta de Github.

+
+

Agrega un nuevo dispositivo al config.sh

+

El siguiente paso, es agregar un nuevo dispositivo a config.sh; puedes usar uno de los existentes como plantilla. Esto básicamente consiste en proporcionar las instruciones para obtener los archivos correctos para hacer la compilación.

+

Busca la linea siguiente en tu archivo config.sh:

+
case "$1" in
+

Seguidamente agrega:

+
"device-name")
+
+echo DEVICE=device-name >> .tmp-config &&
+
+repo_sync $1
+
+;;
+
+

Nota: Debes remplazar la parte en que dice device-name, con el nombre de tu dispositivo, como por ejemplo si tu dispositivo fuera el Samsung Galaxy S3, quedaria asi:

+ 
"i9300")
+
+echo DEVICE=i9300 >> .tmp-config &&
+
+repo_sync $1
+
+;;
+
+

Como ultimo paso (opcional, no influye en nada si realizas o no este paso), buscas esta parte en tu archivo config.sh:

+
echo Usage: $0 \(device name\)
+
+echo
+
+echo Valid devices to configure are:
+
+echo - galaxy-s2
+
+echo - galaxy-nexus
+
+echo - nexus-s
+
+echo - nexus-s-4g
+
+echo - otoro
+
+echo - unagi
+
+echo - pandaboard
+
+echo - emulator
+
+echo - emulator-x86
+
+exit -1
+
+;;
+

Y agregas tu dispositivo:

+
echo - device-name
+
+
+

Nota: Debes remplazar la parte en que dice device-name, con el nombre de tu dispositivo, como por ejemplo si tu dispositivo fuera el Samsung Galaxy S3, quedaria asi:

+ 
echo - i9300
+
+

Crear un árbol de configuración para el nuevo dispositivo

+

Este arbol de configuracion debe incluir, al menos:

+ +

El contenido aquí puede variar en gran medida entre un dispositivo y otro. En particular, BoardConfig.mk y extract-files.sh podrían variar significativamente. Esta parte requiere un conjunto de hacking, pruebas, y depuración para averiguar que pedazos binarios deberán ser extraidos. Este arbol de configuracion debe estar hosteado en un repo en tu cuenta de Github, mira este repositorio de ejemplo para que te hagas una idea de como tiene que quedar. (Solo es un ejemplo y no tiene que quedar igual a este, todos los telefonos tienen distinto Hardware)

+
+

Nota: No es necesario que crees estos archivos por tu propia cuenta, por lo general la mayoria de los telefonos y dispositivos que corren CyanogenMod o AOKP tienen un repositorio en Github con todos estos archivos del arbol de configuracion, puedes distinguirlos, porque la mayoria de estos repositorios llevan el nombre de: ej "android_device_samsung_i9300" (como es en este caso ejemplo, el nombre varia dependiendo de tu dispositivo). Asi que es recomendable que antes de que empieces a crear estos archivos por tu cuenta, revises algunos de los repositorios de CyanogenMod o AOKP, para ver si el arbol de configuracion de tu dispositivo ya esta creado por alguien mas.

+

Caso contrario ocurre con los dispositivos ZTE o algunos otros dispositivos a los cuales CyanogenMod o AOKP aun no han llegado, que requieren que crees estos archivos por tu propia cuenta desde 0. El Foro XDA  es otro buen lugar para debatir y ver recursos.

+
+

Una vez que tengas estos archivos, si te ha tocado crearlos desde 0 o tienes los archivos del arbol de configuracion en tu equipo, es totalmente necesario que los subas a un repositorio en tu cuenta de Github como se habia mencionado anteriormente. Si no sabes como crear el repositorio en donde alojar tus archivos de configuracion, por favor revisa esta guia. Al final del proceso deberas tener un repositorio como este:

+
https://github.com/Your-User-Name/android-device-your-new-device
+
+

En donde dice Your-User-Name deberia aparecer tu nombre de usuario de tu cuenta en Github, y en donde dice android-device-new-device, deberia aparecer el nombre que le has puesto a tu repositiorio cuando estabas creandolo. (ej: android-device-samsung-i9300)

+
+

Si por el contrario has tenido suerte de encontrar que CyanogenMod o AOKP, o algun otro usuario ya ha creado estos archivos, tienes que hacer un fork del repo en tu cuenta. En pocas palabras, es necesario que tengas todos los repos de tu dispositivo ha realizar el port de FirefoxOS, alojados en tu cuenta de Github.

+

El Archivo Manifest

+

Crea un fork del repositorio b2g-manifest

+

De nuevo realizamos un fork al repositorio de b2g-manifest.

+
https://github.com/mozilla-b2g/b2g-manifest
+

Si no sabes como crear un fork de un repositorio en visita este sitio para obtener ayuda.

+
+

Este fork tiene que quedar igualmente en tu cuenta de Github.

+
+

Crea tu propio repositorio de b2g-manifest

+

Una vez mas, es necesario que el repositorio que acabas de clonar en el paso anterior, sea hosteado por una cuenta de Github tuya en donde puedas hacer las modificaciones especiales para tu dispositivo. Quedando de la siguiente manera:

+
git clone https://github.com/Your-User-Name/b2g-manifest.git
+

Crear el archivo de manifiesto para el nuevo dispositivo

+

Ahora necesitas agregar los repositorios requeridos para el archivo de manifiesto para el nuevo dispositivo; este archivo de manifiesto es llamado device-name.xml (el nombre de este archivo debe ser cambiado por el nombre de tu dispositivo, conservando la extension que lo caracteriza, el .xml). Este archivo debe tener la siguiente estructura:

+
+ 
<?xml version="1.0" encoding="UTF-8"?>
+
+<manifest>
+
+
+  <remote name="aosp"
+
+           fetch="https://android.googlesource.com/" />
+
+  <remote name="b2g"
+
+          fetch="git://github.com/mozilla-b2g/" />
+
+  <remote name="linaro"
+
+           fetch="git://android.git.linaro.org/" />
+
+  <remote name="mozilla"
+
+fetch="git://github.com/mozilla/" />
+
+  <remote name="mozillaorg"
+
+      fetch="https://git.mozilla.org/releases" />
+
+  <default revision="refs/tags/android-4.0.4_r1.2"
+
+           remote="linaro"
+
+           sync-j="4" />
+
+
+  <!-- Gonk specific things and forks -->
+
+  <project path="build" name="platform_build" remote="b2g" revision="master">
+
+    <copyfile src="core/root.mk" dest="Makefile" />
+
+  </project>
+
+  <project path="dalvik" name="fake-dalvik" remote="b2g" revision="master" />
+
+  <project path="gaia" name="gaia.git" remote="mozillaorg" revision="master" />
+
+  <project path="gecko" name="gecko.git" remote="mozillaorg" revision="master" />
+
+  <project path="gonk-misc" name="gonk-misc" remote="b2g" revision="master" />
+
+  <project path="rilproxy" name="rilproxy" remote="b2g" revision="master" />
+
+  <project path="external/moztt" name="moztt" remote="b2g" revision="master" />
+
+
+  <!-- Stock Android things -->
+
+  <project path="abi/cpp" name="platform/abi/cpp" />
+
+  <project path="bionic" name="platform/bionic" />
+
+  <project path="bootable/recovery" name="platform/bootable/recovery" />
+
+  <project path="device/common" name="device/common" />
+
+  <project path="device/sample" name="device/sample" />
+
+  <project path="external/apriori" name="platform_external_apriori" remote="b2g" revision="master" />
+
+  <project path="external/bluetooth/bluez" name="platform/external/bluetooth/bluez" />
+
+  <project path="external/bluetooth/glib" name="platform/external/bluetooth/glib" />
+
+  <project path="external/bluetooth/hcidump" name="platform/external/bluetooth/hcidump" />
+
+  <project path="external/bsdiff" name="platform/external/bsdiff" />
+
+  <project path="external/bzip2" name="platform/external/bzip2" />
+
+  <project path="external/dbus" name="platform/external/dbus" />
+
+  <project path="external/dhcpcd" name="platform/external/dhcpcd" />
+
+  <project path="external/dnsmasq" name="platform/external/dnsmasq" />
+
+  <project path="external/elfcopy" name="platform_external_elfcopy" remote="b2g" revision="master" />
+
+  <project path="external/elfutils" name="platform_external_elfutils" remote="b2g" revision="master" />
+
+  <project path="external/expat" name="platform/external/expat" />
+
+  <project path="external/fdlibm" name="platform/external/fdlibm" />
+
+  <project path="external/flac" name="platform/external/flac" />
+
+  <project path="external/freetype" name="platform/external/freetype" />
+
+  <project path="external/giflib" name="platform/external/giflib" />
+
+  <project path="external/gtest" name="platform/external/gtest" remote="linaro" revision="master" />
+
+  <project path="external/harfbuzz" name="platform/external/harfbuzz" />
+
+  <project path="external/icu4c" name="platform/external/icu4c" />
+
+  <project path="external/iptables" name="platform/external/iptables" />
+
+  <project path="external/jpeg" name="platform/external/jpeg" />
+
+  <project path="external/libgsm" name="platform/external/libgsm" />
+
+  <project path="external/liblzf" name="platform/external/liblzf" />
+
+  <project path="external/libnfc-nxp" name="platform/external/libnfc-nxp" />
+
+  <project path="external/libnl-headers" name="platform/external/libnl-headers" />
+
+  <project path="external/libpng" name="platform/external/libpng" />
+
+  <project path="external/libvpx" name="platform/external/libvpx" />
+
+  <project path="external/mksh" name="platform/external/mksh" />
+
+  <project path="external/opensans" name="platform_external_opensans" remote="b2g" revision="master" />
+
+  <project path="external/openssl" name="platform/external/openssl" />
+
+  <project path="external/protobuf" name="platform/external/protobuf" />
+
+  <project path="external/safe-iop" name="platform/external/safe-iop" />
+
+  <project path="external/screencap-gonk" name="screencap-gonk" remote="b2g" revision="master" />
+
+  <project path="external/sonivox" name="platform/external/sonivox" />
+
+  <project path="external/speex" name="platform/external/speex" />
+
+  <project path="external/sqlite" name="platform/external/sqlite" />
+
+  <project path="external/stlport" name="platform/external/stlport" />
+
+  <project path="external/strace" name="platform/external/strace" />
+
+  <project path="external/tagsoup" name="platform/external/tagsoup" />
+
+  <project path="external/tinyalsa" name="platform/external/tinyalsa" />
+
+  <project path="external/tremolo" name="platform/external/tremolo" />
+
+  <project path="external/webp" name="platform/external/webp" />
+
+  <project path="external/webrtc" name="platform/external/webrtc" />
+
+  <project path="external/wpa_supplicant" name="platform/external/wpa_supplicant" />
+
+  <project path="external/wpa_supplicant_8" name="platform/external/wpa_supplicant_8" />
+
+  <project path="external/zlib" name="platform/external/zlib" />
+
+  <project path="external/yaffs2" name="platform/external/yaffs2" />
+
+  <project path="frameworks/base" name="platform/frameworks/base" />
+
+  <project path="frameworks/opt/emoji" name="platform/frameworks/opt/emoji" />
+
+  <project path="frameworks/support" name="platform/frameworks/support" />
+
+  <project path="hardware/libhardware" name="platform/hardware/libhardware" />
+
+  <project path="hardware/libhardware_legacy" name="platform/hardware/libhardware_legacy" />
+
+  <project path="hardware/ril" name="platform/hardware/ril" />
+
+  <project path="libcore" name="platform/libcore" />
+
+  <project path="ndk" name="platform/ndk" />
+
+  <project path="prebuilt" name="platform/prebuilt" />
+
+  <project path="system/bluetooth" name="platform/system/bluetooth" />
+
+  <project path="system/core" name="platform/system/core" />
+
+  <project path="system/extras" name="platform/system/extras" />
+
+  <project path="system/media" name="platform/system/media" />
+
+  <project path="system/netd" name="platform/system/netd" />
+
+  <project path="system/vold" name="platform/system/vold" />
+
+
+  <!-- Cosas de tu dispositivo  -->
+
+
+
+</manifest>
+

El archivo manifesto es muy facil de crear, simplemente necesitaras el codigo anterior y entenderlo un poco. Copia el codigo anterior

+

Booteo de B2G

+
+

Recompilar boot.img

+

Una vez lo tengas todo hecho, necesitas recompilar la imágen de arranque. Esto no suele ser necesario para el propio Kernel, pero recoge los cambios en  init.rc.

+

Cambios a init.rc

+

El init.rc que utilizas no es el proporcionado por B2G; en su lugar, tienes que tirarlo desde el dispositivo

+

Las principales cosas que necesitarás modificar son:

+
Importar init.b2g.rc
+

Añade las siguientes líneas para importar init.b2g.rc:

+
on early-init
+    start ueventd
+    import /init.b2g.rc
+
Fijar permisos
+

Corrige los permisos en los archivos /system/b2g/b2g, /system/b2g/updater, /system/b2g/plugin-container; esto se deberá hacer después de las líneas que montan los archivos del sistema de lectura/escritura:

+
chmod 0755 /system/b2g/b2g
+chmod 0755 /system/b2g/updater
+chmod 0755 /system/b2g/plugin-container
+

Es posible que quieras iniciar modificando init.rc del nuevo dispositivo en vez de usar el init.rc proveido por la compilación del sistema; si es así, necesitas recordar configurar TARGET_PROVIDES_INIT_RC en BoardConfig.mk.

+

Kernel precompilado vs. compilando el kernel desde una fuente

+

Puedes usar un Kernel precompilado, o podrías compilar el Kernel desde una fuente. Para compilar el Kernel desde una fuente, añade AndroidKernel.mk  y la configuración del kernel al árbol de configuración del dispositivo.

+

El maguro en la vieja compilación del sistema es un ejemplo de compilación del kernel desde una fuente.

+

Flasheo del dispositivo

+

Añade el nuevo dispositivo a flash.sh

+

Añade el nuevo dispositivo a  flash.sh; las especificaciones de como hacer esto dependerán de que herramientas necesitas usar para flashear el nuevo dispositivo.

+

Primer arranque

+

Configura, compila y  flashea el nuevo dispositivo

+

Ahora puedes probar compilando y flasheando tu nuevo dispositivo:

+
ANDROIDFS_DIR=my_device_backup ./config.sh <device_id> default.xml
+./build.sh
+./flash.sh
+

Probar y depurar

+

Necesitamos añadir algunos detalles aqui; de hecho, este artículo podría usar algo de ayuda.

+

FAQ

+

¿A que dispiositivos se le puede hacer Port?

+

Si tu dispositivo corre Android 4.0.4 lo mas probable es que pueda correr FirefoxOS, no obstante no quiere decir que a la primera correra sin ningun problema. El Porting es todo un proceso de prueba y error, es posible que tardes mas tiempo solucionando problemas en los archivos que compiles, que recopilandolos todos.

+

Mi dispositivo es de arquitectura ARMv6, ¿correra alli?

+

Puede que si o puede que no, todo depende de tus conocimientos y de hasta donde puedas llegar con el Port, por ahora solo se conoce un caso en los foros de Geeksphone en donde un usuario a logrado completar un Port estable a uno de los telefonos que ofrece Geeksphone de arquitectura ARMv6.

+

¿Alguien mas esta trabajando en realizar Port a los diferentes dispositivos?

+

Quienes realizan los Port son desarrolladores, geeks o mozillians. No se puede definir un equipo especial de Mozilla que este trabajando en ello. Por otro lado la comunidad Mozilla Hispano tiene un proyecto conformado por un grupo de personas con el fin de lograr el Port a varios dispositivos. Para mas informacion puedes visitar este link.

+

¿Necesito algunos conocimientos previos para empezar a realizar el Port?

+

Si, de hecho hay dos tipos de casos que pueden suceder mientras realices el Port. El primero de ellos es que tengas la suerte de que todos los sources y archivos que encuentre en Github para tu Port esten bien y compilen sin ningun problema (Poco probable que suceda). El segundo caso es que te toque re escribir algunos, si no son todos los archivos y sources de tu dispositivo para lograr que compilen y que arranquen FirefoxOS (Es lo que probablemente te pueda suceder con seguridad). Por lo que por recomendacion, seria bueno que tuvieras previos conocimientos acerca del funcionamiento de Android, algo de C y C++.

+

Mira también

+ diff --git a/files/es/archive/b2g_os/porting_firefox_os/index.html b/files/es/archive/b2g_os/porting_firefox_os/index.html new file mode 100644 index 0000000000..9da87c1802 --- /dev/null +++ b/files/es/archive/b2g_os/porting_firefox_os/index.html @@ -0,0 +1,71 @@ +--- +title: Porting Firefox OS +slug: Archive/B2G_OS/Porting_Firefox_OS +tags: + - Firefox OS + - NeedsTranslation + - TopicStub + - porting +translation_of: Archive/B2G_OS/Porting_B2G_OS +--- +

This page lists the available resources for porting Firefox OS.

+ +
+
Porting basics
+
Basic information about how to port Firefox OS to new devices.
+
Porting on CyanogenMod
+
This article explains how to port Firefox using CyanogenMod.
+
diff --git a/files/es/archive/b2g_os/porting_firefox_os/portando_de_cyanogenmod/index.html b/files/es/archive/b2g_os/porting_firefox_os/portando_de_cyanogenmod/index.html new file mode 100644 index 0000000000..cc9e9b19a1 --- /dev/null +++ b/files/es/archive/b2g_os/porting_firefox_os/portando_de_cyanogenmod/index.html @@ -0,0 +1,239 @@ +--- +title: Portando en CyanogenMod +slug: Archive/B2G_OS/Porting_Firefox_OS/Portando_de_CyanogenMod +translation_of: Archive/B2G_OS/Porting_B2G_OS/Porting_on_CyanogenMod +--- +

+ +

Firefox OS es tradicionalmente compilado encima de AOSP. Esto no significa que nosotros solamente usemos AOSP. Varias ramas (forks) de AOSP existen que tienen como objetivo apoyar una amplia gama de hardware. CyanogenMod, el fork mas popular de AOSP, incluye cientos de añadiduras, modificaciones, y hacks para dar soporte a cientos de disposivitos Android al por menor. Este articulo explica como portar Firefox OS usando CyanogenMod.

+ +

Cuando compilamos Firefox OS encima de CyanogenMod podemos dar soporte al mismo numero de despositivos que CyanogenMod soporta. Debido a la gran cantidad de dispositivos soportados por CyanogenMod, es muy probable que ya tengas un dispositivo para el cual puedas compilar.

+ +
Importante: Esta guía es solamente para usuarios avanzados; debes de saber al menos cómo compilar CyanogenMod o AOSP.
+ +

Si nunca has compilado CyanogenMod para tu dispositivo entonces te sugerimos insistentemente que aprendas como hacerlo antes de portar Firefox OS. Esto tiene dos propositos: aprenderás como usar las herramientas necesarias para portar Firefox OS, y verificarás la calidad del 'port' de CyanogenMod.

+ +

Más explícitamente, ésta guía asume que tu dispositivo esta desbloqueado y tiene CyanogenMod instalado. Esta guia no te enseñara como rootear y/o desbloquear tu dispositivo, o como preparar tu maquina para compilar o como usar git para solucionar los fallos de combinación.

+ +

Un resumen de los pasos a seguir es el siguiente:

+ +
    +
  1. Descargar el codigo fuente
    2. +
  2. Modificar los 'repos' del dispositivo
    3. +
  3. Modicar el núcleo
    4. +
  4. Compilar e Instalar
    5. +
+ +

Descargar el código de fuente

+ +
Para hacer: Convinar el manifiesto de mozilla-b2g: Bugzilla: 1211870.
+ +

Tenemos varias herramientas útiles para construir Firefox OS, todas ellas contenidas en un simple repositorio. Descárga estas herramientas por git para crear tu directorio de trabajo.

+ +
git clone https://github.com/cm-b2g/B2G.git && cd B2G
+
+ +

Hecho esto, necesitamos descargar el código fuente:

+ +
./config.sh cm-porting
+
+ +

El archivo config.sh  inicializa la herramienta repo usando el manifiesto  base-l-cm.xml  que se encuentra en el repositorio b2g-manifest.  Éste archivo XML es en realidad una lista de repositorios específicos del SO necesarios para construir B2G OS.  Luego, utiliza la herramienta repo para descargar todo el código de fuente.

+ +

La descarga de estos repositorios, muchos de los cuales tienen varias gigas,  tomará bastante tiempo, así que te recomendamos hacer esto en la noche si tienes una conección lenta, o justo después del almuerzo si tienes una conección rápida.

+ +

Este paso también crea un archivo .config que podrás editar después.

+ +

Manifiesto local para tu dispositivo

+ +

El manifiesto anterior no contiene ningún repositorio específico de dispositivo, asunto diferente al típico manifiesto. Necesitaremos entonces crear un local_manifest.xml con todos los repositorios de tu dispositivo. La manera más rápida de hacerlo es usando breakfast, un herramienta automática escrita por CyanogenMod para crear un manifiesto local y descargar los repositorios adicionales directamente de la cuenta de CyanogenMod en GitHub.

+ +
. build/envsetup.sh && breakfast 123
+
+ +

Reemplace 123 por el nombre clave de su dispositivo.

+ +

Si tu dispositivo no está oficialmente soportado por CyanogenMod, pero hay un 'port' no oficial, tu puedes crear el archivo local_manifest.xml manualmente en la carpeta  .repo/local_manifests.

+ +
<?xml version="1.0" encoding="UTF-8"?>
+<manifest>
+     <remote name="xyz" fetch="git://github.com/xyz/" revision="cm-12.1" />
+     <project name="device_oem_123" path="device/oem/123" remote="xyz" />
+     <project name="device_oem_1xx-common" path="device/oem/1xx-common" remote="xyz" />
+     <project name="kernel_oem_1xx" path="kernel/oem/1xx" remote="xyz" />
+     <project name="vendor_oem" path="vendor/oem" remote="xyz" />
+</manifest>
+
+ +

Recuerda correr repo sync cuando hayas creado tu manifiesto.

+ +

Modificar los 'repos' del dispositivo

+ +

Parte de la configuración de un dispositivo se encuentra en los archivos XML de superposición, usados por el sistema de construcción AOSP para establecer las opciones por defecto en las apps de Android. Firefox OS no los usa así que podemos reimplementar algunas de estas opciones, tales como el botón de inicio de la pantalla, el almacenamiento emulado, etc.

+ +

Podemos establecer opciones predeterminadas más sanas mediante la inclusión de dos archivos desde vendor/cm. La primera línea podría ser agregada en la parte superior de device.mk y la segunda en la parte inferior de BoardConfig.mk:

+ +
# Extra mk import at the top of device.mk
+$(call inherit-product, vendor/cm/config/common_full.mk)
+
+# Extra mk import at the bottom of BoardConfig.mk
+include vendor/cm/BoardConfig.mk
+
+ +

Todavía se necesitan más opciones, ya que muchas son propiamente específicas del dispositivo . A continuación encontrarás una lista de adiciones y eliminaciones específicas de dispositivos comunes. Esta lista no es exhaustiva, pero agregando las dos líneas mencionadas arriba y configurando todas las de abajo,  tendrás un sistema funcional.

+ +
# for Gecko to use the correct resolution assets
+# Valid options are: 1.5 | 2 | 2.25
+GAIA_DEV_PIXELS_PER_PX := 2.25
+
+ +
# for Gecko to use the correct boot animation
+# Valid options are: hvga | fwvga | qHD | 720p | 1080p
+BOOTANIMATION_ASSET_SIZE := 1080p
+
+ +
# for Gecko to support separate internal storage partition
+# This is for legacy devices only. You must prvide your own volume.cfg file
+GECKO_BOARD_SEPARATE_STORAGE_PARTITON := true
+
+ +
# for Gecko to support virtual home button
+PRODUCT_PROPERTY_OVERRIDES += \
+    ro.moz.has_home_button=0
+
+ +
# for Gecko to support usb mass storage
+# You may need to add mass_storage to init.oem.usb.rc
+PRODUCT_DEFAULT_PROPERTY_OVERRIDES += \
+-    persist.sys.usb.config=mtp
++    persist.sys.usb.config=mass_storage
+
+ +
# for Gecko to support NFC
+PRODUCT_PROPERTY_OVERRIDES += \
+    ro.moz.nfc.enabled=true
+
+PRODUCT_PACKAGES += \
+    nfcd
+
+ +
# Changes in init.device.rc
+-on property:init.svc.bootanim=running
+-on property:init.svc.bootanim=stopped
+-on property:service.bootanim.exit=1
++on property:sys.boot_completed=1
+
+ +

Modificar el núcleo

+ +

Necesitamos habilitar en el núcleo algunas características de seguridad adicionales para Firefox OS. Estas características no estaban presentes en núcleos Android hasta Marshmallow así que muchos dispositivos necesitarán algunos parches 'backported' adicionales para el núcleo. Más información al respecto en Bugzilla: 790923.

+ +

Es suficiente tomar la mejor selección de parches para tu núcleo; el sistema de compilación habilitará automáticamente las nuevas características. Para un trabajo de ejemplo ver el LGE MSM8994 kernel.

+ +
Importante: Este paso es obligatorio. Firefox OS no arrancará sin estas características de seguridad.
+ +

Compilar e instalar

+ +

¿Recuerdas el archivo .config creado anteriormente? Ahora necesitamos reemplazar cm-porting con el nombre clave de tu dispositivo.

+ +
$ grep -r PRODUCT_NAME device/oem/123
+
+ +

Nota: No uses el valor en cm.mk, usa el que está en device.mk, este debería ser algo como full_123. Puedes hacer el reemplazo manualmente o con sed:

+ +
$ sed -i "s/cm-porting/full_123/g" .config
+
+ +

Ahora es momento de comenzar la compilación:

+ +
$ ./bldcm.sh
+
+ +

Esto tomará, en todo caso, de 30 minutos a un par de horas dependiendo de tu PC, así que podría ser un buen momento para ir a la tienda y preparar algo de comer, o ayudar en las tareas de la casa.

+ +

Instalar Firefox OS a través de fastboot

+ +

Si tu dispositivo soporta fastboot, puedes simplemente mandar las imágenes de partición directamente al dispositivo:

+ +
cd out/target/product/123/
+fastboot flash boot boot.img
+fastboot flash recovery recovery.img
+fastboot flash system system.img
+fastboot flash userdata userdata.img
+
+ +

Instalar Firefox OS através del recovery

+ +

Si tu dispositivo no soporta fastboot entonces puedes usar update.zip en su lugar. Este puede ser inicializado por el dispositivo a través de adb sideload. Una vez allí, deberás mandar el archivo .zip:

+ +
adb sideload out/target/product/123/fota/fullimg/update.zip
+
+ +

Solución de problemas

+ +

¿Algo no funciona? ¡Es momento de remangarse la camisa!

+ +

Lo primero que debes hacer es determinar si la característica está funcionando en CyanogenMod. Puede que simplemente falte  alguna configuración para Firefox OS.

+ +

Si la característica no funciona en CyanogenMod entonces significa que debes implementarla para tu 'port'. Sería bueno si también presionas tu revisión yendo atrás en el código.

+ +

Cámara

+ +

Algunas partes de Android fueron removidas del proceso de compilación por ser innecesarias. Si tu cámara  arrojaburbujas de queja sobre la pérdida de funciones, verifica los marcos o la base para ver si las funciones fueron removidas. Podría ser posible traerlas de vuelta.

+ +

WiFi

+ +

El dispositivo podría no ver ciertos Puntos de Acceso si no están en un canal oficial. Este parecería ser un problema de CyanogenMod o incluso de AOSP, ya que este afecta distintos tipos de hardware y diferentes OEMs.

diff --git a/files/es/archive/b2g_os/preparing_for_your_first_b2g_build/index.html b/files/es/archive/b2g_os/preparing_for_your_first_b2g_build/index.html new file mode 100644 index 0000000000..c0a20668ca --- /dev/null +++ b/files/es/archive/b2g_os/preparing_for_your_first_b2g_build/index.html @@ -0,0 +1,151 @@ +--- +title: Preparándote para tu primer binario de B2G +slug: Archive/B2G_OS/Preparing_for_your_first_B2G_build +translation_of: Archive/B2G_OS/Preparing_for_your_first_B2G_build +--- +

+ +

Antes de construir B2G, necesitas clonar el repositorio y configurar tu binario. Este artículo te explica cómo.

+ +

Cómo clonar el repositorio de B2G

+ +

El primer paso antes de empezar a construir tu primer binario es clonar el repositorio de B2G. Esto no lo bajará todo: bajará solamente el "build system" de B2G y las utilidades de configuración. La mayoría del código de B2G está en el repositorio general Mercurial de Mozilla.

+ +

Para clonar el repositorio, usa git:

+ +
git clone git://github.com/mozilla-b2g/B2G.git
+ +

Tras clonarlo (lo que debería tardar sólo un momento), cd al directorio de B2G:

+ +
cd B2G
+
+ +

Cómo copiar la estructura de B2G a otro ordenador

+ +

Si tienes un ordenador nuevo (¡vaya suerte!), tu vida será mucho más fácil si simplemente migras la estructura completa de B2G de un ordenador al otro.

+ +

Para ello, monta el disco duro de tu ordenador viejo en el nuevo, y haz:

+ +
rsync -a source/ dest/
+
+ +

Donde source es la ruta completa (incluida la barra oblicua del final) a la estructura del código, y dest es el destino al que la quieres mover (la barra oblicua del final también es importante en este caso).

+ +
+

Atención: Si copias los archivos de un ordenador con un sistema operativo diferente asegúrate de ejecutar './build.sh clean' antes de empezar el proceso de construcción. Si no, puedes causar problemas de compilación.

+
+ +

Si sigues estas instrucciones, puedes saltarte el resto de este artículo e ir directamente a la página de construcción.

+ +

Cómo configurar B2G en tu móvil

+ +
Importante: Recuerda que sólo son compatibles los móviles con Android 4 (alias Ice Cream Sandwich o ICS). Asegúrate de que tu teléfono tiene instalado ICS, si no este paso probablemente fallará ya que algunos "drivers" se obtienen de móviles que no son Nexus. Si tienes que flashear tu móvil con ICS, ten en cuenta que algunas extensiones USB no funcionan bien con utilidades para flashear, y que tendrás que conectar tu teléfono a uno de los puertos del ordenador.
+ +

Una vez tengas el "build system" de B2G, necesitas configurarlo para el móvil en el que lo vas a instalar. Para ver una lista de aparatos compatibles, puedes utilizar la herramienta config.sh:

+ +
./config.sh
+
+ +

Este comando te muestra una lista de aparatos compatibles. Por ejemplo:

+ +
Usage: ./config.sh [-cdflnq] (device name)
+Flags are passed through to |./repo sync|.
+
+Valid devices to configure are:
+- galaxy-s2
+- galaxy-nexus
+- nexus-4
+- nexus-4-kk
+- nexus-5
+- nexus-5-l
+- nexus-s
+- nexus-s-4g
+- flo (Nexus 7 2013)
+- otoro
+- unagi
+- inari
+- keon
+- peak
+- hamachi
+- helix
+- tarako
+- dolphin
+- dolphin-512
+- pandaboard
+- vixen
+- flatfish
+- flame
+- flame-kk
+- flame-l
+- rpi (Revision B)
+- emulator
+- emulator-jb
+- emulator-kk
+- emulator-l
+- emulator-x86
+- emulator-x86-jb
+- emulator-x86-kk
+- emulator-x86-l
+> Sony Xperia devices
+- aries (Z3 Compact KK)
+- aries-l (Z3 Compact L)
+- leo-kk (Z3 KK)
+- leo-l (Z3 L)
+- scorpion-l (Z3 Tablet Compact L)
+- sirius-l (Z2 L)
+- tianchi-l (T2U L)
+- flamingo-l (E3 L)
+ +

+Si tu aparato no está en la lista, no continúes: ayúdanos a hacer B2G compatible con tu aparato o espera a que alguien lo haga. ¡Pero siempre es mejor que seas tú el que nos ayudes!
+ +
 
+ +
Atención: Si por cualquier razón quieres construir una versión específica de B2G, lee el artículo Cómo construir una versión específica de Gecko antes de hacerlo.
+ +

Cómo configurar un teléfono móvil

+ +

Primero conecta tu móvil: el proceso de configuración necesita acceder al teléfono.

+ +

Si tu teléfono aparece en la lista de aparatos compatibles, puedes empezar el proceso de configuración ejecutando config.sh otra vez, pero ahora incluyendo el nombre del aparato. Por ejemplo, para construir para el Samsung Google Nexus S, escribirías:

+ +
./config.sh nexus-s
+
+ +

Al principio de la configuración es posible que tengas que configurar la opción de uso del color, tras lo cual el proceso continúa. Éste es un buen momento para tomarse un descanso, ya que es ahora cuando te estás descargando por primera vez todo el código necesario para construir B2G.

+ +

Si tu teléfono ya no tiene Android y tu estructura de B2G no tiene los bloques binarios, pero has hecho una copia de seguridad de la partición /system tal y como te recomendó el artículo Prerrequisitos para construir Firefox OS, puedes utilizar dicha copia de seguridad haciendo:

+ +
ANDROIDFS_DIR=<absolute path to parent dir of system dir> ./config.sh <target>
+
+ +

Configuración para construir un emulador

+ +

Si quieres construir uno de los emuladores, especifica "emulator" para construir la versión ARM, o "emulator-x86" para construir la versión x86. La versión x86 es más rápida, pero su simulación de dispositivos móviles es menos fiel a la realidad.

+ +

Por ejemplo, para construir el emulador ARM, escribirías lo siguiente:

+ +
./config.sh emulator
+
+ +

Al principio de la configuración es posible que tengas que configurar la opción de uso del color, tras lo cual el proceso continúa. Éste es un buen momento para tomarse un descanso, ya que es ahora cuando te estás descargando por primera vez todo el código necesario para construir B2G.

+ +
+

Atención: ./config.sh puede llevar más tiempo y consumir más recursos de red de lo que esperabas. Puedes parar el proceso haciendo Ctrl-C y reiniciarlo más tarde. Si sospechas que parte del proceso fue interrumpido antes de terminar, ejecuta './repo sync' para reparar cualquier posible error.

+
+ +

Cómo construir una versión específica de Gecko

+ +

Algunas veces querrás o necesitarás construir B2G basado en una versión de Gecko distinta de la que se usa por defecto (la que se especifica en el manifiesto). Puedes hacerlo editando el archivo.userconfig antes de hacer "pull" en el repositorio (es decir, antes de ejecutar config.sh). Por ejemplo, si quieres construir basándote en mozilla-central:

+ +
GECKO_PATH=/path/to/mozilla-central
+GECKO_OBJDIR=/path/to/mozilla-central/objdir-gonk
+
+ +
+

Atención: si construyes para otra versión de Gecko en Mac OS X, el directorio mozilla-central tiene que estar en un sistema de archivos sensible a las mayúsculas.

+
+ +

Lee Personalización del archivo .userconfig para más información sobre adaptaciones que puedes hacer.

+ +

Próximo paso: empieza a construir.

diff --git a/files/es/archive/b2g_os/probando_firefox_os/index.html b/files/es/archive/b2g_os/probando_firefox_os/index.html new file mode 100644 index 0000000000..282a2fc9cc --- /dev/null +++ b/files/es/archive/b2g_os/probando_firefox_os/index.html @@ -0,0 +1,81 @@ +--- +title: Probar Firefox OS +slug: Archive/B2G_OS/Probando_Firefox_OS +translation_of: Archive/B2G_OS/Automated_testing +--- +

+

Considerando que Boot to Gecko esta todavía en desarrollo y la compatibilidad para hardware nuevo está pensada para un futuro inmediato, es importante saber cómo probarlo. Esta página ofrece enlaces a artículos que proveen información sobre varios aspectos las pruebas de Boot to Gecko.

+ + + + + + + +
+

Pruebas de unidades

+ +
+
+

Temas de prueba diversos

+
+
+ Depurar OpenGL
+
+ Como depurar código OpenGL en Boot to Gecko.
+
+ Gráfico de soporte de características
+
+ Un gráfico de que características están soportadas por las diferentes compilaciones de Boot to Gecko.
+
+

Marionette para Boot to Gecko

+ +

Prueba de Gaia

+ +

Tutoriales de Marionette

+ +

Escribiendo pruebas para Marionette

+ +

Ver todo...

+ 		+

Obtener ayuda de la comunidad

+

Si está trabajando con Boot to Gecko o desarrollando aplicaciones que funcionarán en dispositivos basados en Boot to Gecko, hay recursos de la comunidad que lo ayudarán.

+ +
    +
  • Pregunte en el canal de IRC de Mozilla: #b2g
    • +
+

No se olvide de la netiquette...

+
+ + +
+

 

diff --git a/files/es/archive/b2g_os/quickstart/app_tools/index.html b/files/es/archive/b2g_os/quickstart/app_tools/index.html new file mode 100644 index 0000000000..a179d64a23 --- /dev/null +++ b/files/es/archive/b2g_os/quickstart/app_tools/index.html @@ -0,0 +1,16 @@ +--- +title: App tools +slug: Archive/B2G_OS/Quickstart/App_tools +translation_of: Archive/B2G_OS/Quickstart/App_tools +--- +
+

What do you use to build Open Web Apps? The answer is "anything you would normally use to build for the web." The following is a list of tools and resources to help you get started making Open Web Apps. They can be easily integrated into your existing web development workflow, if you have one, or you can build a new workflow around them.

+
+

App Validator

+

Is your app ready for the Firefox Marketplace? The App validator will check your manifest and show you any errors it may have, or warnings you should consider.

+

Firefox OS Simulator

+

Installing and using the Firefox OS Simulator is the easiest way to get up and running with your app. After installed the simulator is accessible via the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so that you may debug your application from within the simulator!

+

App Manager

+

The new kid on the block with regards to testing tools is called the App Manager. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.

+

Firefox Developer Tools

+

Firefox now ships with a default set of developer tools built from the ground up to ensure a great development experience that is both snappy and efficient. To find out more about how these tools work, and see a detailed list of what else Mozilla has to offer, head on over to our Tools zone.

diff --git a/files/es/archive/b2g_os/quickstart/index.html b/files/es/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/es/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +
+

Quickstart information on coding open web apps.

+
+
+
+ Introduction to open web apps
+
+ What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.
+
+ Your first app
+
+ This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.
+
+ Introduction to Firefox OS
+
+ An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.
+
+ Introduction to manifests
+
+ An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.
+
+ App development for web developers
+
+ If you're a web developer, how do open web apps differ from what you're used to? This article explains all.
+
+ App development for mobile developers
+
+ If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.
+
+ Developing app functionality
+
+ This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.
+
+ Payments
+
+ How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.
+
+ App tools
+
+ Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.
+
diff --git a/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html b/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html new file mode 100644 index 0000000000..84ab7f30d9 --- /dev/null +++ b/files/es/archive/b2g_os/quickstart/intro_to_manifests/index.html @@ -0,0 +1,90 @@ +--- +title: Introducción al manifest +slug: Archive/B2G_OS/Quickstart/Intro_to_manifests +translation_of: Archive/B2G_OS/Quickstart/Intro_to_manifests +--- +
+

Este articulo proporciona toda la información básica que usted necesita saber a cerca de trabajar con archivos de manifiesto open web app.

+
+
+
+ ¿Por qué mi aplicación necesita un app manifest?
+
+ La aplicación manifest proporciona útil información a cerca de una aplicación (tal como nombre, autor, icono y descripción)  es un simple documento usado por los usuarios y las tiendas de aplicacion. Lo mas importante, está contendra una lista de Web APIs (Tal como geolocation) que su aplicación necesita. Esto permite a usuarios tomar decisiones informadas a cerca de aplicaciones antes de instalarla.
+
+ Es la Open Web app manifest la misma cosa como el  manifest usado por la extensión de Google Chrome y las web app instalables? o el W3C Widgets manifest? o el  HTML5 cache manifest?
+
+ No a todos ellos. . La open web app manifest es probablemente la mas similar a google manifest, pero no son identicos. Es esperado que el Open web apps manifest llegará a ser un estandar.
+
+ ¿Qué es un origen?
+
+ El origen de una aplicación es el protocolo, dominio y puerto de la url junto. Cada una de las siguientes urls son diferentes a la original: +
    +
  • http://example.com
    • +
  • http://example.com:8080 (diferente puerto)
    • +
  • https://example.com (diferente protocolo)
    • +
  • http://www.example.com
    • +
  • http://myapp.example.com (subdominio)
    • +
+
+
+ Las siguientes urls son la misma original: +
    +
  • http://Example.com:80
    • +
  • http://example.com
    • +
+
+
+
+
+ Las siguientes urls son la misma original: +
    +
  • http://example.com/drawingApp
    • +
  • http://example.com/notesApp
    • +
+
+
+
+
+ ¿Por qué tengo que hospedar el app manifest en el mismo origen que mi aplicación?
+
+ Asumimos que solo usted puede alojar una aplicación manifest en el mismo origen que su aplicación. Esto significa que los usuarios pueden instalar su aplicación con confianza, sabiendo que la instalación es basada en su aplicación manifiesto y no en alguien más.  Los usuarios deberían tener esta confianza si están instalando su aplicación para Firefox OS Marketplace, para alguna otra tienda de aplicaciones o para su propio sitio web si es auto-publicada su aplicación.
+
+ Si la aplicación manifest no fué hospedada en el mismo origen que la aplicación misma, allí no habría nada para prevenir que terceros hagan directamente aplicaciones fuera de el contenido alojado en su origen.Incluso empeora, terceros podrían crear una aplicación manifiest usando su marca eso sería engañar a los usuarios para que instalen una aplicación que es una fachada para un robo de contraseñas u otros comportamientos imprevistos .
+
+ ¿hacer esto significa que no puedo incrusptar imagenes o javascript de otros origenes?
+
+ No.  La restricción de origen es sobre solo contenido (paginas HTML) . imagenes y otros recursos embebidos pueden ser localizados en otras partes (por ejemplo, en una red de entrega de contenido), excepto por el icono de la aplicación.
+
+ Puedo tener mas de una aplicación en mi origen?
+
+ No, allí solo puede estar una aplicación por origen. Si se permitiera multiples aplicaciones de un solo origen, ellos podrian vivir en una simple web sandbox — examinarían cada localStorage del otro , hace solicitud ajax a cada APIS del otro, o incluso roba acceso a las APIS privilegiadas que deberían de haber tenido concebida solo una de las aplicaciones. Esto sería especialmente peligroso para dominios públicos que públican contenido generado por usuario para muchos usuarios.
+
+ Nosotros recomendamos que use una separación de subdominios para cada una de sus aplicaciones. Por ejemplo, spreadsheet.mycoolapps.com por una aplicación y texteditor.mycoolapps.com por otro. Para mas información, ver Añadiendo un subdominio por una aplicación.
+
+ Muchos recursos y permisos en la web ya están en el ambito de un solo origen. por definición una aplicación y un origen como la misma cosa  que usamos la misma restrinción que son usados en otra parte de la web y en HTML5.
+
+ ¿Porqué no subir el manifiesto directamente al Firefox Os Marketplace?
+
+ Hay varios beneficios de alojas el manifiesto en su dominio y proporcionando la url de la aplicación manifest a el Marketplace: +
    +
  • Nosotros pretendiamos que el Marketplace (y otras tiendas de aplicaciones) revisarían periodicamente todo el manifiesto  en la URL proporcionada y verifique actualizaciones en ellos. Esto evita la necesidad de que vuelva a subir su aplicación manifiesto por cada actualización .
    • +
  • El marketplace pasará tanto el original contenido de la aplicación manifiesto como la URL para el dispositivo del usuario. esto permite al dispositivo verificar por bajos costos en la aplicación manifiesto que podría indicar la manipulación. Este será especialmente importante para aplicaciones que usen APIS web(por ejemplo geolocalización).
    • +
+ Nota: A partir de este escrito, nosotros estamos todavía diseñando un proceso por el cual el Marketplace pasará una actualizada aplicación  manifiesto a el dispositivo del usuario.
+
+
+ ¿Por qué mi servidor Web tiene que utilizar la cabecera Content-Type de HTTP adecuada al servir mi aplicación manifiesta?
+
+ Esta restricción previene a usuarios de un sitio web que permite contenido de usuarios generados (por ejemplo, un sitio pastebin) para inadvertidamente o inapropiadamente reclamando que todo sitio web como su aplicación.
+
+ Debería usar HTTPS para servir mi aplicación ?
+
+ Si, es una buena idea. Nosotros anticipamos que el firefox Os Marketplace requerirá cualquier aplicación usando APIS web (Tal como geolocación) para servir a su aplicación manifesto a través de HTTPS como una defensa adicional contra ataques hombre-en-el-medio. Si usas HTTPS para su manifiesto, usted necesita también usarla para todas las páginas en su sitio.
+
+ Qué pasa si alguien más entrega mi aplicación a el Markeplace de Firefox OS?
+
+ En el afortunado evento que alguien adivine la url de su aplicación manifiesto y lo entrega a el Marketplace de Firefox Os antes que usted, por favor presentar una queja con el equipo de apoyo del mercado.
+
+

Vease también

+

App manifest

diff --git a/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html b/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html new file mode 100644 index 0000000000..37caf3ab16 --- /dev/null +++ b/files/es/archive/b2g_os/quickstart/introduccion_a_las_open_web_apps/index.html @@ -0,0 +1,108 @@ +--- +title: Introducción a las Open Web Apps +slug: Archive/B2G_OS/Quickstart/Introduccion_a_las_open_web_apps +tags: + - Apps + - Web Open App +translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +--- +

Multi devices

+ +
+

Este artículo está diseñado para actuar como un buen punto de partida para cualquiera que desee aprender más sobre Open Web Apps, si usted es un desarrollador o administrador del proyecto, o tiene otro rol relevante en el desarrollo de aplicaciones o en la distribución. Aquí te ofrecemos un panorama claro de las Open Web Apps y la filosofía detrás de ellas.

+
+ +

Las Open Web Apps son esencialmente diferentes de sitios web estándar o páginas Web. Se construyen utilizando tecnologías web abiertas estándar - HTML, CSS, JavaScript, etc - y se pueden acceder mediante un navegador Web. Las principales diferencias radican en su capacidad para ser instaladas en un dispositivo, trabajar sin conexión y tener acceso a API's avanzadas que permiten la interacción con las características del dispositivo, como la cámara, agenda, y otras cosas. Además, se basan en tecnologías abiertas tanto como sea posible. Cuando las diferencias radican en la implementación de tecnología entre las plataformas, se deben hacer esfuerzos para asegurar que ambos son compatibles, a través de una combinación de detección de características y código apropiado para diferentes plataformas, y la degradación agraciada.

+ +

Ventajas de las Open Web Apps

+ +

Echemos un vistazo a las ventajas de Open Web Apps con más de detalle:

+ + + +

El siguiente video también se ve en las ventajas generales de las Open Web Apps, y el desarrollo para la plataforma Firefox OS:

+ +

+ +

La Web es la plataforma

+ +

Una Open Web App, como tal existe instalada en una plataforma como Firefox OS no es un bookmark - es una parte propia del sistema. Las Open Web Apps son una gran promesa. Se trata de una oportunidad que no hay que perderse, de lo contrario la web puede llegar a ser una vez más dividida. Con esto en mente, debe quedar claro que las Open Web Apps (OWA) están destinadas a ser estandarizadas y de formar parte de "la Web". Si tiene éxito, OWA debería eventualmente trabajar en todos los navegadores, sistemas operativos y dispositivos.

+ +

En Mozilla estamos trabajando duro para crear esta plataforma de aplicaciones que está respaldada en su totalidad por la open Web. No es la intención de ser la "plataforma Mozilla" o la "plataforma Firefox". La Web es la plataforma. Estamos creando un conjunto de APIs abiertas y las implementaciones para demostrar cómo pueden existir aplicaciones portátiles en la web sin dependencia de un proveedor. Otros grupos, como Facebook y Google Chrome también están trabajando en las plataformas de aplicaciones soportadas por la Web. Facebook apps estan hechas para encajar en Facebook y Chrome apps estan diseñadas para dispositivos Chrome OS y servidores de Google. Las Chrome apps son las más similares a las Open Web Apps. Seguimos colaborando con el equipo de Google Chrome como las normas de las apps evolucionan y que sin duda compartimos nuestra visión en gran parte. Existe un enorme potencial para todas las plataformas de apps basadas en la Web para converger e invitamos a todos los proveedores a ayudarnos a construir las correctas Open Web App APIs.

+ +

A pesar de que actualmente se debe tener un motor basado en Firefox Mozilla ("Web runtime") para usar las Open Web Apps, no se pretende que este será siempre el caso. Muchas partes del proyecto de aplicaciones Web abiertas aún se están elaborando y no es posible implementar todo en todos los navegadores a la vez. Aunque muchas partes de las Open Web Apps ya están estandarizadas, muchas otras partes todavía están en proceso de cambio. Se pretende y se espera que las Open Web Apps serán una estándar que estará disponible en los principales navegadores.

+ +

Por lo tanto, cuando usted lee las páginas  de MDN que tienen que ver con las Open Web Apps, por favor, tenga en cuenta que a pesar de que mucha de la información es específica para Firefox en este momento, es de esperar que  se permitirá desarrollar Open Web Apps para todos los navegadores en el futuro.

+ +

Estándares Web

+ +

La tecnología de OWA no es una sola pieza, es un paraguas que agrupa a muchas tecnologías diferentes y algunas de ellas son muy nuevas. Por el momento, partes de OWA están estandarizadas (HTML5, CSS, JavaScript, IndexedDB, etc.). Otras partes aún no están estandarizadas y la implementación Mozilla es solo específica para Firefox o a alguna otra tecnología de Mozilla. Como la misión de Mozilla es de compartir y potenciar a todos, esta situación es sólo temporal. Es por eso que en la documentación OWA vamos a tratar de identificar claramente las partes de OWA que no están todavía estandarizadas.

+ +

Tenga en cuenta también que puede haber algunas propuestas relacionadas con OWA y normas potenciales que no son utilizadas por Mozilla.

+ +

Normas eventualmente previstas.

+ +

Así que aquí están las piezas no estandarizadas aún a través de las distintas plataformas web y que aún son Firefox, sólo por el momento:

+ + + +

Marketplace

+ +

Compra una vez, Ejecuta donde sea

+ +

Desde el principio Mozilla ha construido un sistema de aplicaciones que permite a los usuarios comprar una aplicación una vez y ejecutarla en todos sus dispositivos HTML5. Muy pronto Mozilla lanzara el smartphone FirefoxOS pero eso será sólo un dispositivo en el que se ejecuten sus aplicaciones. Cuando usted compra una aplicación a través de la Firefox Marketplace, el sistema instala un recibo en su dispositivo. El recibo es un JSON Web Token con metadata que enlaza con la clave pública del mercado y su dirección URL del servicio de verificación. Cuando una aplicación se inicia, puede verificar el recibo pero el recibo en el dispositivo no está atado al Firefox MarketPlace. El recibo es sólo una prueba criptográficamente verificable de compra. Cualquiera puede vender Open Web Apps si siguen las especificaciones del recibo. Cuando usted compra una aplicación, se pretende que sea portable a través de cualquier dispositivo compatible con el sistema de Open Web Apps.

+ +
+
Mozilla está construyendo la infraestructura necesaria para ejecutar Open Web Apps en cualquier dispositivo HTML5. Firefox para Android le permitirá instalar y ejecutar aplicaciones (se puede probar hoy). Los iconos de las apps instaladas estarán en tu pantalla principal justo como en las aplicaciones normales de Android. También se puede instalar y ejecutar Open Web Apps en el escritorio de Windows, Mac o Linux usando Firefox (esto funciona actualmente). Actualmente se requiere alguna versión de Firefox, pero está previsto que el sistema de Open Web finalmente reciba el apoyo de todos los navegadores principales con un conjunto de normas. Desde el primer día Mozilla ha incluido todos los navegadores compatibles con HTML5 en su prueba de conceptos, se puede echar un vistazo a esta shim alojada en JavaScript para obtener ideas sobre cómo apoyar a la plataforma de aplicaciones en un navegador que no sea Firefox.
+ +
 
+
+ +

En el futuro, el sistema de Open Web Apps apoyará sinconizando tus apps instaladas entre dispositivos. Dado que los recibos son portátiles sólo podrías sincronizarlos tú mismo si quieres. En caso de que no, es obvio  que siempre se puede ejecutar una Open Web App gratis en cualquier navegador, ya que no es diferente de un sitio web. 

+ +
+
Se podría, sin embargo, utilizar las nuevas APIs especificas para mobiles que no se aplican en todas las plataformas.
+ +
 
+
+ +

El video a continuación ofrece un panorama útil de las ventajas de los MarketPlace abiertos y un enfoque para el descubrimiento de las Open Apps:

+ +

+ +

WebPayment API

+ +

Comercio para Apps

+ +
+
Parte del éxito de las plataformas de aplicaciones móviles como iOS y Android es que hacen que sea muy fácil de probar nuevos modelos de negocio a través de los pagos móviles. Estos modelos todavía están evolucionando pero el comercio es sin duda algo que, en el momento, es incómodo en la Web de escritorio y más natural en el móvil. En concreto, es muy conveniente para cargar algo a su factura de teléfono cuando usted ya está accediendo a ella desde el teléfono de todos modos. Con el lanzamiento de Firefox OS, el entorno de aplicaciones apoyará compras de aplicaciones y los pagos dentro de la aplicación a través de la WebPayment API. Apoyar el comercio es crucial para el crecimiento de una plataforma de aplicaciones. El uso de la API de pago propuesto es completamente opcional. Mozilla no impedirá que cualquier aplicación utilice su propio sistema de pago independiente.
+ +
 
+
+ +

Véase también

+ + diff --git a/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html b/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html new file mode 100644 index 0000000000..a1f58175e8 --- /dev/null +++ b/files/es/archive/b2g_os/quickstart/tu_primera_aplicacion/index.html @@ -0,0 +1,257 @@ +--- +title: Tu primera Aplicación +slug: Archive/B2G_OS/Quickstart/tu_primera_aplicacion +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +
+
+

Las aplicaciones de la web abierta le dan a los desarrolladores lo que justamente han querido por años: un entorno multiplataforma dedicado a la construccion de aplicaciones con HTML, CSS y Javascript, con Firefox OS siendo la primera plataforma dedicada a las aplicaciones web. Esta guía tiene como objetivo iniciarte y orientarte rápidamente en una estructura básica e instrucciones de construcción, ¡de tal manera que tú puedas crear la siguiente generación de aplicaciones!

+
+ +

Si deseas continuar con esta guía, puedes descargar nuestro quick start app template. Encuentra más provechoso el contenido leyendo la guía  Apps template.

+ +

Estructura de la Aplicación

+ +

Aplicaciones Empaquetadas vs. Aplicaciones Alojadas

+ +

Hay dos tipos de aplicaciones web abiertas: empaquetadas y  alojadas. Las aplicaciones empaquetadas son esencialmente archivos  zip  conteniendo todos los archivos necesarios: HTML, CSS, JavaScript, imágenes, manifest, etc. Las aplicaciones alojadas están corriendo desde un servidor en un dominio dado, como un sitio web estandard. Ambos tipos de aplicaciones  requieren un manifest válido. Cuando llega el momento de listar tu aplicación  en el Firefox Marketplace, ya sea que tu subas tu aplicación como un archivo zip o la URL del servidor donde está tu aplicación.

+ +
+
+

Hecho en colaboración con Treehouse: Check them out!

+
+
+ +

A los efectos de esta guía, crearás una aplicación alojada que vivirá en tu dirección localhost. Una vez que tu aplicación esté lista para ser publicada en el Firefox Marketplace, podras tomar la decisión de agruparla como una aplicación empaquetada o lanzarla como una aplicación alojada.

+ +

Manifest de la Aplicación

+ +

Cada aplicación de Firefox  requiere un archivo manifest.webapp en la raíz de la aplicación. El archivo manifest.webapp  proporciona información importante sobre la aplicación, como la versión, nombre, descripción, localización de íconos, strings locales, dominios donde la aplicación puede ser instalada, y mucho más. Sólo el nombre y la descripción son obligatorios. Una plantilla simple dentro de la aplicación es similar a lo que sigue:

+ +
{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "Your new awesome Open Web App",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Your Name",
+    "url": "http://yourawesomeapp.com"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    },
+    "it": {
+      "description": "Il vostro nuovo fantastico Open Web App",
+      "developer": {
+        "url": "http://yourawesomeapp.com"
+      }
+    }
+  },
+  "default_locale": "en"
+}
+ +
+
+

Hecho en colaboración con Treehouse: Check them out!

+
+
+ +

 

+ +

Un manifiesto básico es todo lo que necesitas para empezar. Para más detalles sobre los manifiestos, lee App Manifest.

+ +

App Layout & Design

+ +

El responsive design (diseño adaptativo) se ha convertido cada vez más importante a medida que más resoluciones de pantalla en diferentes dispositivos se convierten en la norma. Aunque el principal objetivo de tu aplicación sean las plataformas móviles como Firefox OS, otros dispositivos probablemente también tengan acceso a ella. Las CSS media queries permiten adaptar el diseño al dispositivo, como se muestra en este ejemplo de esqueleto en CSS:

+ +
/* The following are examples of different CSS media queries */
+
+/* Basic desktop/screen width sniff */
+@media only screen and (min-width : 1224px) {
+  /* styles */
+}
+
+/* Traditional iPhone width */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Device settings at different orientations */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}
+ +

Hay muchos frameworks JavaScript y CSS disponibles para ayudar en el diseño adaptativo y el desarrollo de aplicaciones móviles (Bootstrap, etc.). Elige el frameworks(s) que mejor se adapte a tu aplicación y estilo de desarrollo.

+ +

Web APIs

+ +

JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's WebAPI effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the WebAPI page. JavaScript feature detection is still the best practice, as shown in the following example:

+ +
// If this device supports the vibrate API...
+if('vibrate' in navigator) {
+    // ... vibrate for a second
+    navigator.vibrate(1000);
+}
+ +

In the following example, the display style of a <div> is modified based on changes in the battery state of the device:

+ +
// Create the battery indicator listeners
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Set listeners for changes
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Update immediately
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Update percentage width and text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Update charging status
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();
+ +

In the code sample above, once you confirm that the Battery API is supported, you can add event listeners for chargingchange and levelchange to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.

+ +

Check the WebAPI page frequently to keep up to date with device API statuses.

+ +

Install API functionality

+ +

In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:

+ +
<button id="install-btn">Install app</button>
+ +

This button's functionality is implemented using the Install API (see install.js):

+ +
var manifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+  // define the manifest URL
+  // install the app
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // App is installed, do something
+  };
+  installLocFind.onerror = function() {
+    // App wasn't installed, info is in
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+
+ +

Let's run through briefly what is going on:

+ +
    +
  1. We get a reference to the install button and store it in the variable button.
    2. +
  2. We use navigator.mozApps.checkInstalled to check whether the app defined by the manifest at http://people.mozilla.com/~cmills/location-finder/manifest.webapp is already installed on the device. This test is stored in the variable installCheck.
    3. +
  3. When the test is successfully carried out, its success event is fired, therefore installCheck.onsuccess = function() { ... } is run.
    4. +
  4. We then test for the existence of installCheck.result using an if statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.
    5. +
  5. If the app isn't installed, we add a click event listener to the button, so the install() function is run when the button is clicked.
    6. +
  6. When the button is clicked and the install() function is run, we store the manifest file location in a variable called manifest_url, and then install the app using navigator.mozApps.install(manifest_url), storing a reference to that installation in the installLocFind variable. You'll notice that this installation also fires success and error events, so you can run actions dependent on whether the install happened successfully or not.
    7. +
+ +

You may want to verify the implementation state of the API when first coming to Installable web apps.

+ +
+

Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allows you to install installable web apps on the desktop. See FAQs about apps manifests for more information on origins.

+
+ +

WebRT APIs (Permissions-based APIs)

+ +

There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the manifest.webapp file like so:

+ +
// New key in the manifest: "permissions"
+// Request access to any number of APIs
+// Here we request permissions to the systemXHR API
+"permissions": {
+    "systemXHR": {}
+}
+ +

The three levels of permission are as follows:

+ + + +

For more information on app permission levels, read Types of packaged apps. You can find out more information about what APIs require permissions, and what permissions are required, at App permissions.

+ +
+

It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.

+
+ +

Tools & Testing

+ +

Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps.

+ +

Firefox OS Simulator

+ +

Installing and using the Firefox OS Simulator is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.

+ +

App Manager

+ +

The new kid on the block with regards to testing tools is called the App Manager. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.

+ +

Unit Testing

+ +

Unit tests are extremely valuable when testing on different devices and builds. jQuery's QUnit is a popular client-side testing utility, but you can use any set of testing tools you'd like.

+ +

Installing Firefox OS on a Device

+ +

Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on MDN.

+ +

Dedicated Firefox OS developer preview devices are also available: read our Developer preview phone page for more information.

+ +

App Submission and Distribution

+ +

Once your app is complete, you can host it yourself like a standard web site or app (read Self-publishing apps for more information), or it can be submitted to the Firefox Marketplace. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.

+ +

More Marketplace & Listing Information

+ +
    +
  1. Submitting an App to the Firefox OS Marketplace
    2. +
  2. Marketplace Review Criteria
    3. +
  3. App Submission Video Walkthrough
    4. +
+
diff --git a/files/es/archive/b2g_os/releases/2.0/index.html b/files/es/archive/b2g_os/releases/2.0/index.html new file mode 100644 index 0000000000..df409eb076 --- /dev/null +++ b/files/es/archive/b2g_os/releases/2.0/index.html @@ -0,0 +1,116 @@ +--- +title: Firefox OS 2.0 para desarrolladores +slug: Archive/B2G_OS/Releases/2.0 +tags: + - '2.0' + - B2G + - Firefox OS + - Notas de la versión +translation_of: Archive/B2G_OS/Releases/2.0 +--- +
+

En esta página se detallan las características para desarrolladores recientemente implementadas en Gecko específicos para Firefox OS 2.0.

+
+
+

El componente Gecko de Firefox OS 2.0 esta basado en Firefox 31/32.

+
+

Nuevas características

+

Esta sección provee un resumen de las nuevas características disponibles en Firefox OS 2.0. Para mas detalles de cambios en una plataforma especifica (Adiciones API, etc.), revisa la sección Adiciones de la plataforma en detalle.

+
+
+ NFC
+
+ Esta versión incluye soporte para contenido de dispositivo a dispositivo compartido con la tecnología NFC (Near Field Communication). Tu puedes emparejar tu dispositivo con cualquier otro y luego deslizar para compartir tus contactos, multimedia o URL's favoritas con otros.
+
+ Telefonía
+
+ Firefox OS ahora soporta direcciones IPv4 e IPv6 en el administrador de red.
+
+ Encontrar Mi Dispositivo
+
+ Si has perdido tu teléfono Firefox OS, Encontrar Mi Dispositivo puede ayudarte a encontrarlo (ve al sitio web http://find.firefox.com). Puedes verlo en un mapa, hacer que reproduzca un sonido y que muestre un mensaje en pantalla. También puedes bloquearlo remotamente o borrar tu información personal. Para empezar, crea una cuenta Firefox (Ajustes > Firefox Accounts en tu dispositivo) y activa Encontrar Mi Dispositivo (Ajustes > Encontrar mi dispositivo).
+
+ Multimedia
+
+ Ahora puedes crear tus propios ringtones usando tu propia colección de música, o canciones que has descargado de la web.
+
+ Cámara
+
+ La aplicación de la cámara ahora soporta varios modos de enfoque: Touch, auto continuo, y seguimiento de rostro.
+
+ Productividad
+
+ Hemos realizado una actualización visual a las aplicaciones de Correo, Calendario y Reloj.
+
+ Pantalla de inicio
+
+ Firefox OS 2.0 introduce una pantalla de inicio con desplazamiento vertical sencillo e iconos mas grandes.
+
+ Cambio de aplicación con gestos en los bordes
+
+ Gestos en los bordes están ahora disponibles para intercambiar entre las diferentes aplicaciones (desliza tu pulgar desde el borde izquierdo de la pantalla hacia el derecho y viceversa, para cambiar entre las múltiples aplicaciones abiertas).
+
+

Nuevas características para socios

+
+
+ Integración E.ME 
+
+ La integración E.ME proporciona acceso directo a aplicaciones web mientras proveedores de búsqueda configurables pueden buscar en la web al mismo tiempo.
+
+

Nuevas características en las DevTools

+

Las Herramientas para desarrolladores de Firefox han tenido un gran numero de características añadidas en las versiones 31 y 32 de Firefox; estas no son especificas de Firefox OS, pero puede tomar ventaja de ellas depurando tus aplicaciones para Firefox OS mediante el WebIDE. Para saber mas, lea:

+ +

Adiciones de la plataforma en detalle

+
+

Nota: Esta lista incluye las características mas importantes de Firefox OS. Para una lista ampliada de característica añadidas a Gecko (que generalmente están presentes también en Firefox OS 2.0), consulta las notas de la versión para desarrolladores de Firefox 31 y las notas para desarrolladores de Firefox 32.

+
+

Web API

+ +

CSS

+ +

Mejoras en las tecnologías soportadas

+ +

Versiones Antiguas

+

+ +

diff --git a/files/es/archive/b2g_os/releases/2.1/index.html b/files/es/archive/b2g_os/releases/2.1/index.html new file mode 100644 index 0000000000..d43116ad1e --- /dev/null +++ b/files/es/archive/b2g_os/releases/2.1/index.html @@ -0,0 +1,40 @@ +--- +title: Firefox OS 2.1 para desarrolladores +slug: Archive/B2G_OS/Releases/2.1 +tags: + - '2.1' + - B2G + - Firefox OS + - Notas de la versión +translation_of: Archive/B2G_OS/Releases/2.1 +--- +
+

Firefox OS 2.1 está en una etapa de pre-lanzamiento en este momento. Su componente Gecko está basado en Firefox 33/34. En esta página se detallan las características para desarrolladores recientemente implementadas en Gecko específicamente para Firefox OS 2.1.

+
+
+

Nota: Para las características generales de Gecko que están también presentes en Firefox OS Gecko, consulta las notas de Firefox 33 para desarrolladores y notas de Firefox 34 para desarrolladores.

+
+

Cambios en la plataforma

+

Firefox OS tenia una política de seguridad de "Aplicación individual (single app) por origen", pero esto ha cambiado desde Firefox 34/Firefox OS 2.1 (leer FAQ para mas información). Si usted necesita compatibilidad con las versiones anteriores, considere alojar tus aplicaciones en orígenes separados; una estrategia posible es crear diferentes subdominios para tus aplicaciones.

+

Cambios en la API Web  

+ +

Mira también

+ +

Versiones Antiguas

+

+ +

diff --git a/files/es/archive/b2g_os/releases/index.html b/files/es/archive/b2g_os/releases/index.html new file mode 100644 index 0000000000..f4d3874b14 --- /dev/null +++ b/files/es/archive/b2g_os/releases/index.html @@ -0,0 +1,24 @@ +--- +title: Firefox OS developer release notes +slug: Archive/B2G_OS/Releases +tags: + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Releases +--- +

Firefox OS release notes by version

+

This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.

+
+
  1. Firefox OS 2.0 para desarrolladores
  2. Firefox OS 2.1 para desarrolladores
+

Other supporting information

+
+
+ Firefox OS API support table
+
+ Lists the different APIs available, and what versions of Firefox have support for them.
+
+ App permissions
+
+ Lists hosted, privileged and certified APIs, along with information on the permissions they need to have set in the App Manifest of your installable apps, such as the manifest permission name, app type required, description, access property, and default permission.
+
diff --git a/files/es/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html b/files/es/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html new file mode 100644 index 0000000000..77c5748c58 --- /dev/null +++ b/files/es/archive/b2g_os/screencast_series_colon__app_basics_for_firefox_os/index.html @@ -0,0 +1,228 @@ +--- +title: 'Series de Screencast: Lo Básico sobre Aplicaciones para Firefox OS' +slug: 'Archive/B2G_OS/Screencast_series:_App_Basics_for_Firefox_OS' +tags: + - API + - Apps + - B2G + - Firefox OS +translation_of: 'Archive/B2G_OS/Firefox_OS_apps/Screencast_series:_App_Basics_for_Firefox_OS' +--- +
+

Firefox OS es un sistema operativo que trae la Web a los dispositivos móviles; en lugar de ser un nuevo Sistema Operativo con nuevas tecnologías y entornos de desarrollo,  Firefox OS se basa en tecnologías web estándar que han estado en uso desde hace años. Si tu eres un desarrollador web y quieres construir una aplicación móvil, Firefox OS te da las herramientas para  hacerlo sin tener que cambiar tu flujo de trabajo o aprender un entorno de desarrollo totalmente nuevo. En esta colección de vídeos cortos, desarrolladores de Mozilla y Telenor se reunieron en Oslo, Noruega para explicar en pocos pasos como puedes empezar a construir aplicaciones para Firefox OS.

+
+ +

En esta serie aprenderás:

+ + + +
+

Nota: Cada uno de los screencast son lo suficientemente cortos para verlos durante un descanso. Toda la serie no debe tomar mas de una hora para observarla.

+
+ +

Código y entorno de desarrollo

+ +

Además de los screencasts, tu puedes descargar los códigos de ejemplo desde GitHub que los acompañan. Si deseas probar los códigos de ejemplo por ti mismo, necesitarás configurar un entorno de desarrollo muy sencillo. Todo lo que necesitas es:

+ + + +

Presentación de la serie

+ +

La serie nos muestra a Jan Jongboom (@janjongboom) y Sergi Mansilla (@sergimansilla) de Telenor Digital, y Chris Heilmann (@codepo8) de Mozilla; Fue grabada durante tres días en Oslo, Noruega en la sede central de Telenor en Febrero del 2014.

+ +

Aquí estamos nosotros tres hablándote acerca de la serie y qué puedes esperar de ella:

+ +

+ +

Sección 1: Construyendo tu primera aplicación para Firefox Os y como publicarla

+ +

En los primeros cinco screencast de la sección 1 mostraremos como construir una aplicación para Firefox Os, como depurarla y probarla en tu computadora y en un dispositivo real,  y como tenerla listada en el Firefox Marketplace. Esto puede sonar como mucho trabajo, pero pronto descubrirás que si ya sabes como construir un sitio web, tienes 90% del camino listo.

+ +

Más que un sitio web

+ +

Las aplicaciones de Firefox OS son HTML5, En esencia, estas usan las mismas tecnologías que los sitios web. Puedes empezar escribiendo un sitio web y convertirlo en una aplicación simplemente dándole un archivo de manifiesto (ver The app manifest para más detalles). Esto le dice a Firefox OS que estas escribiendo una aplicación y te permite:

+ + + +

En esencia, las aplicaciones HTML5 son sitios web sobre alimentados y deben seguir las mismas reglas, como por ejemplo:

+ + + +

La diferencia principal es que para que una página web se convierta en una gran aplicación, debes tener muy en cuenta a los usuarios móviles. Esto significa, ante todo, que tu aplicación debe:

+ + + +

En muchos casos, esto significa que necesitas hacer más ligera tu página web y simplificar la interface. La buena noticia es que todos tus usuarios serán beneficiados por eso.

+ +

+ +
+

Nota: Para encontrar más información acerca de cómo diseñar una buena aplicación HTML5, entra al App Center en MDN.

+
+ +

El archivo manifest de tu app

+ +

El App Manifest en Firefox OS en un archivo simple de JSON que le dice al sistema operativo acerca de tu aplicación. En esencia, esto es lo que convierte una página web en una Open Web App. Dentro del manifest, tu defines el nombre en diferentes localidades y solicitas al sistema operativo tener acceso a varios servicios y al hardware. Incluso puedes editar la orientación predeterminada de tu aplicación, y de ser necesario, bloquear la orientación.

+ +

+ +

Para más información acerca del manifest y herramientas que pueden ayudarte:

+ + + +

El gestor de aplicaciones

+ +

La forma más sencilla de empezar a trabajar con Firefox OS es probando el gestor de aplicaciones App Manager.  Esta herramienta se encuentra junto al Firefox developer tools for desktop y te permite conectarte a un simulador de Firefox OS en su computadora, o a un dispositivo real con Firefefox OS si tienes uno disponible. Desde allí, puedes jugar con Firefox OS, instalar aplicaciones directamente dentro del simulador o en un dispositivo real, y depurarlas como si se ejecutaran en un Firefox OS , viendo los cambios inmediatamente en tiempo real sin necesidad de desinstalar o actualizar las aplicaciones.

+ +

El siguiente video presenta los primeros pasos para el uso del App Manager junto con el simulador:

+ +

+ +
+

Nota: El App Manager te permite depurar tus propias aplicaciones sin ningun problema incluso cuando no estes conectado.

+
+ +

Para más información sobre el App Manager:

+ + + +

Probar en un Dispositivo Real

+ +

Probar tus aplicaciones en un simulador esta bien, pero solo te lleva tan lejos como un ambiente simulado puede hacerlo. Si quieres probar el rendimiento de la interacción de la aplicación o la reacción a algunas cosas como la orientación del dispositivo, necesitas un dispositivo real. Con las herramientas de desarrollo y el App Manager juntos, puedes usar el dispositivo y adentrarte en los detalles de lo que pasa dentro de tu aplicación mientras la usas.

+ +

+ +

Publicar en el Marketplace

+ +

El Marketplace de Firefox OS es el sitio mas conveniente para listas tus aplicaciones y ponerlas a disposicion de las personas en sus dispositivos y en la web. El Marketplace también te permite listar tu aplicación para otras plataformas como Firefox Desktop y Firefox para Android. Tambien puedes permitir que las personas valoren tu aplicación, den su opinión, y compren  tu aplicación usando un proceso simple de verificación. Listar tu aplicación es simple:

+ + + +

+ +

Las aplicaciones enviadas al Marketplace son revisadas por el equipo revisor de aplicaciones de Mozilla y se te notificara sobre el estado de tu envío en pocos días. Si existen problemas con tu aplicación recibirás un mensaje de validación durante el proceso, pero es posible que también recibas una explicación legible por humanos sobre lo que está mal y como solucionarlo.

+ +
+

Nota: Lee Submitting an application to the Firefox Marketplace para más nformación sobre el procesos de envío.

+
+ +

Sección 2: Tópicos Avanzados sobre Firefox OS

+ +

En los primeros videos te presentamos Firefox OS y como desarrollar tu primera aplicación. También abarcamos como depurar tu aplicación en el escritorio (y en un dispositivo real), y como listar tu aplicación en el Marketplace de Firefox. En los cinco videos restantes nos adentraremos en las tecnologías que permiten a Firefox OS ir un paso más adelante y darte acceso a las funcionalidades que hacen del desarrollo para smartphones y tablets interesante para los desarrolladores. Pese a que muchas de estas tecnologías actualmente solo funcionan en Firefox OS, son todas de código abierto y han sido enviadas como propuestas estándar. Trabajar hoy con estas APIs significa que estás preparado para otros dispositivos y plataformas que emergerán en el futuro cercado.

+ +

Web APIs

+ +

Los Smartphones están llenos de tecnología grandiosa (cámaras, acelerómetros, y GPS para nombras algunos).  El problemas era que ellas no eran accesibles para tecnologias web, si querías acceder a ellas necesitabas escribir aplicaciones nativas. Para solucionar esto, Mozilla y sus socios diseñaron un conjunto de APIs para permitir a los desarrolladores alcanzar las profundidades del hadrware de los dispositivos móviles usando JavaScript de una forma segura. Estas son llamadas Web APIs y estan definidas abiertamente y disponibles para que otros las implementen. Firefox OS es la primera plataforma que las usa.

+ +

 Más infromación en el siguiente screencast:

+ +

+ +

Para más información sobre las Web APIs:

+ + + +

Web Activities

+ +

Web Activities son métodos alternativos para acceder al hardware de un dispositivo. En vez de hacer que una API se comunique con el dispositivo directamente, Web Arctivities te permitirá crear un ecosistema de aplicaciones en el dispositivo que se comunican entre sí y comparten sus habilidades. Por ejemplo, en vez de acceder a la cámara directamente, tu aplicación puede usar un Web Activity para solicitar una imagen y el usuario del dispositivo puede usar su aplicación favorita para tomar una foto la cual es devuelta a la aplicación que realizo la petición originalmente.

+ +

En vez de solicitar a los usuarios acceso a los dispositivos (lo cual es importante en términos de seguridad), les permitirás usar aplicaciones en la que ellos ya confían para realizar dichas funciones. Además,  puedes registrar tus aplicaciones como las opciones preferidas para ciertas tareas en el sistema operativo. Puedes pensar sobre los Web Activities como el equivalente de hacer clic con el botón derecho sobre un documento en el escritorio del computador y seleccionar con cual aplicación abrir dicho documento. Aparecerán diferentes opciones más una opción para hacer que el sistema operativo utilice de manera predeterminada esta aplicación para abrir los archivos de ahora en adelante.

+ +

Web Activities permite a las aplicaciones comunicarse entre sí en el dispositivo sin ninguna necesidad de utilizar un servidor. Lo único que transmiten de una aplicación a la otra es la información final.

+ +

+ +

Para más información sobre Web Activities:

+ + + +

Notificaciones Push

+ +

Notificaciones Push (invocada usando el SimplePush Web API) son métodos para que una aplicación reaccione cuando el dispositivo recibe un mensaje específico. Esto te permitirá desarrollar aplicaciones que pueden estar cerradas (y ahorrando energía) hasta que sean necesarias. Las notificaciones creadas de esta manera tendrán el beneficio de no portar información y de esta manera Mozilla nunca obtendrá información sobre la aplicación y los atacantes no podrán acceder a la misma.

+ +

+ +

Para más información sobre cómo usar Notificaciones Push con SimplePush:

+ + + +

Funcionalidad sin conexión

+ +

Las aplicaciones no son muy útiles si no funcionan sin conexión web. Este es un motivo por el cual los usuarios prefieren aplicaciones ya instaladas en vez abrir el navegador del dispositivo y buscar el contenido en él. El término “aplicación web” pareciera indicar que se necesita de una conexión web para que la aplicación  se pueda usar.

+ +

Nuestros usuarios estarán sin conexión web en algunas ocasiones (ya sea en un avión, en el subterráneo o sin plan de datos en la tarjeta SIM) y necesitamos asegurarnos de que nuestras aplicaciones sean útiles cuando eso suceda. HTML5 ofrece algunas tecnologías que permiten funcionalidad sin conexión web, principalmente AppCache y DOMStorage.

+ +

+ +

Para más información sobre funcionalidad sin conexión:

+ + + +

Donde encontrar más

+ +

Esperamos que esta serie de videos te haya dado una clara introducción para el desarrollo de tus propias aplicaciones web abiertas. Si te interesa aprender más, existen algunos recursos y canales que puedes usar:

+ +

+ + + +

Esperamos verte allí.

+ +

Chris, Sergi y Jan

diff --git a/files/es/archive/b2g_os/security/application_security/index.html b/files/es/archive/b2g_os/security/application_security/index.html new file mode 100644 index 0000000000..0573a493e0 --- /dev/null +++ b/files/es/archive/b2g_os/security/application_security/index.html @@ -0,0 +1,118 @@ +--- +title: Seguridad en aplicaciones +slug: Archive/B2G_OS/Security/Application_security +translation_of: Archive/B2G_OS/Security/Application_security +--- +
+
+

Borrador
+ Esta página no está completa.

+ +
+

Los controles clave en la seguridad de las aplicaciones web introducidas por FirefoxOS son:

+ +

Tipos de aplicaciones

+

FirefoxOS soporta tres tipos de aplicaciones web: "web", "privilegiadas" y "certificadas". Un tipo de aplicacion es declarado en su manifest, y determina la lista de permisos que puede solicitar.

+ +

Para más detalles de los tres tipos, véase la documentación del App Manifest.

+

Entrega de aplicaciones

+

Las aplicaciones pueden ser  pueden ser entregadas por dos mecanismos diferentes en Firefox OS:  alojadas o enpaquetadas. Las aplicaciones web regulares pueden ser entregadas por cualquier mecanismo, mientras que las aplicaciones privilegiadas deben ser empaquetadas.

+

Aplicaciones alojadas

+

Una aplicación alojada consiste simplemente en un archivo manifest en el servidor del desarrollador. A menudo el manifest apunta también a un manifest de appcache que permite a la aplicación ser cacheada para un arranque más rápido y para habilitar el uso offline, pero de otra manera no afecta a la aplicación para nada. Desde el punto de vista de la seguridad, las aplicaciones alojadas funcionan como un sitio web normal. Cuando una aplicación alojada es cargada, la URL de las paginas cargadas son las URL que aquellas paginas tendrian normalmente en su servidor web. Así para enlazar a una página web específica o recurso en la aplicación, la misma URL es usada como cuando una URL es usada para enlazar a esa página o URL en un sitio web específico.

+

Aplicaciones empaquetadas

+

Una aplicación empaquetada es una Open Web App que tiene todos sus recursos (HTML, CSS, JavaScript, app manifest, etc.) contenidos en un archivo zip, en vez de tener sus recursos en un servidor web. Para más detalles en este formato, vease aplicaciones empaquetadas. 

+

Instalación de aplicaciones

+

Las aplicaciones son instaladas mediante la API Javascript de aplicaciones:

+ +

Para asegurarse que una aplicación realmente quiere ser instalada como una aplicación web tenemos que asegurar que no es posible engañar a un sitio web para que aloje un manifest de aplicación. Esto es hecho exigiendo que el manifest sea servido con un mime-type específico, "application/x-web-app-manifest+json". Esta restricción se relaja cuando la aplicación manifest, y por lo tanto el manifest de aplicación, es del mismo origen que la página que hizo el pedido para instalar la aplicación.

+

Actualizaciones

+

El proceso de actualizaciones para las aplicaciones está descrito aquí:  Actualizando apliaciones [en-US]

+

Permisos

+

Se le pueden otorgar privilegios adicionales a las aplicaciones por sobre los privilegios de un sitio normal. Por defecto las aplicaciones tienen los mismos permisos que las páginas web normales. Para poder ganar permisos adicionales, el primer paso es enumerar los permisos adicionales que esta necesita en el manifest de la aplicación.

+

Declaración del manifest

+

Para cada permiso adicional que la aplicación quiera, el manifest debe enumerar el permiso junto con una descripción sencilla de por qué la aplicación necesita ese permiso. Por ejemplo si una aplicación quiere usar la API navigator.geolocation, debe incluir en su archivo manifest:

+
"permissions": {
+  "geolocation":{
+    "description": "Requerido para el autocompletado en la pantalla compartida",
+  }
+},
+
+

Esto permite a la aplicación indicar el permiso para la geolocalización, de la misma manera que una página web normal lo haría. Para más detalles acerca de los manifest, véase App manifest.

+

Nota: Actualemente la intensión de uso de los permisos no se muestran al usuario - véase bug 823385.

+

Otorgando permisos

+

Cuando los permisos son solicitados en el manifest, el permiso es definido como "allow" (permitir) o "prompt" (preguntar). Los permisos permitidos son otorgados al ser declarados en el manifest sin necesidad de más aprobaciones. Para permisos preguntados, se le pide el permiso al usuario la primera vez que la aplicación accede a la API relacionada, y tiene que tomar la decisión antes de que el acceso a la API sea otorgado. En general, Firefox OS solo pide a los usarios acerca de los permisos cuando estos pueden tener un impacto en la privacidad, y es razonable para el usuario entender que esta siendo pedido. Por ejemplo el acceso a los contactos es pedido,  sin embargo el acceso para hacer una conección TCP es simplemente garantizada porque no razonable para un usuario entender  las implicaciones de seguridad implicadas en permitir estos permisos. El uso de permisos "allow" es revisado como parte de la revisión de seguridad del Marketplace para asegurar que los usuarios se encuentran protegidos.

+

Revocando permisos

+

Los usuarios pueden cambiar su opinión en cualquier momento acerca de permisos "prompt" en cualquier momento, y puede revocar los permisos a través de la aplicación de configuracion de Firefox OS. Los permisos "allow" no son configurables por el usuario.

+

Sandbox de las aplicaciones Web

+

Información almacenada por aplicación

+

Cada aplicación corre su propio sandbox, eso significa que toda la información guardada por una aplicación es separada de toda la información guardada por cualquier otra aplicación. Esto incluye cosas como información de cookies, información almacenada localmente, bases de datos indexadas localmente, y permisos de sitios.

+

Esto significa que si un usuario instaló dos aplicaciones, la Aplicación A y la Aplicación B, estas tendrán cookies completamente diferentes, diferente información local, y diferentes permisos. Esto se aplica inclusive si ambas aplicaciónes abren un <iframe> que apunta hacia el mismo origen. Por ejemplo, si ambas aplicaciones A y B abren un <iframe> que apunta a "http://www.mozilla.org", ambas mostrarán la misma página web, sin embargo el sitio será cargado y mostrado con diferentes cookies en las dos aplicaciones.

+

Un resultado de esto es que si un usuario se registra en, por ejemplo Facebook, cuando está usando la aplicación A, esto afecta la capacidad de B para interactuar con la cuenta del usuario en Facebook. La cookie que que usa facebook para registrarse cuando el usuario está usando la aplicación A está solo disponible para la aplicación A. Si la aplicación B abre un <iframe> a Facebook, la cookie no estará allí y entonces cuando la aplicación B abre Facebook, recibe la pantalla de registro en vez de la cuenta del usuario.

+

Las aplicaciones no se pueden abrir entre ellas

+

Esto significa que las aplicaciones no pueden abrir otras aplicaciones a través del uso de iframes. Si la aplicación A crea un iframe con el src de la aplicación B, esto no abrirá la aplicación B en el iframe. Esto simplemente abrirá el sitio web qe se encuentra en esa URL. No usará ninguna de las cookies de B y por lo tanto no se comportará diferente si la aplicación B no estuviera instalada en el dispositivo.

+

Esto se aplica inclusive para las aplicaciones empaquetadas (más información acerca de estas abajo). inclusive si la aplicación A intenta abrir la aplicación enpaquetada B usando un iframe que apunte a app:// Dirección de la aplicación B, esto simplemente no podrá cargar. Si esto resulta en un error 404 o algún tipo de error determinado todavía falta deteminarse, pero definitivamente fallará al cargar. Y fallará de la misma manera no importa si la aplicación está instalada en el dispositivo o no, de modo que es imposible determinar para la aplicación A si la aplicación B se encuentra instalada.

+

Lo mismo sucede si el marco superior de la aplicación A es navegado por una URL a la aplicación B. Nosotros sabremos para un determinado marco que aplicación lo abrio, y por lo tanto cuando intente cargar la URL de la aplicación B en el marco de la aplicación A, esto sucederá exactamente como las dos situaciones descriptas arriba, por ejemplo, no hay forma de que use los recursos de B, como ser cookies u otra información local.

+

Motivación

+

Hay tanto beneficios como desventajas con este enfoque. La desventaja es que si un usuario interactúa con el mismo sitio web a través de diferentes aplicaciones, deberá registrarse en cada aplicación. Así tambien si un sitio web necesita almacenar información localmente, y el usuario interactúa con ese sitio en varias aplicaciones, la información terminará dplicada en cada aplicación, lo cual puede ser un problema si hay grandes cantidades de información.

+

El principal beneficio de de este enfoque es un modelo mucho más estable. No hay forma de que varias aplicaciones puedan hacerlo a través de sitios web de terceros en formas inesperadas que harían que instalar una aplicación haga que otra aplicación deje de funcionar. Cuando una aplicación es desinstalada, no hay forma que la información necesaria para otra aplicación se pierda, o que una aplicación deje de funcionar debido a una dependencia funcional con la aplicación desinstalada.

+

Un usuario puede instalar de forma segura la "Fabulosa Aplicación Social" para registrarse en Facebook sin tener que preocuparse que la aplicación "El Juego de DIbujos" pueda montar algún tipo de ataque para obtener la información del usuario de Facebook usando algún tipo de error o atajo que pueda existir en el sitio web de facebook.

+

También existen buenos beneficios para la privacidad. El usuario puede instalar de forma segura la "Aplicación de mi partido político" sin tener que preocuparse de que la "Apliación de empleados de la Megacorporación" sea capaz de detectar que aplicación se encuentra instalada o que información fue creada.

+

Permisos aislados

+

Así como la información de un sitio web es aislada por medio de una sandbox, también son aislados los permisos otorgados. Si la aplicación A carga una página de http://maps.google.com y la página pide utilizar la geolocalización y el usuario dice "permitir y recordar la decisión", esto solo significa que http://maps.google.com tiene acceo a la geolocalización dentro de la aplicación A. Si la aplicación B abre http://maps.google.com, esa página no tendrá acceso a la geolocalización a menos que el usuario le garantice ese permiso de vuelta.

+

Y como en un navegador normal, los permisos se encuentran separados por origen. Si la aplicación A tiene el acceso garantizado para utilizar geolocalización, esto no significa que todos los origenes corriendo en la aplicación A tendrán ese permiso. Si la aplicación A abre un <iframe> a http://maps.google.com, entonces http://maps.google.com tiene que pedir permiso antes que el acceso a la geolocalización sea garantizado.

+

Sandbox de la API para Navegadores

+

Para una seguridad adicional para aquellas aplicaciones que necesitan abrir una gran cantidad de URLs, como por ejemplo navegadores, añadimos el "browserContent flag" (indicador de contenido de navegador). El browserContent flag permite que cada aplicación tenga no una, sino dos sandbox, una para la aplicación en sí, y otra para cualquier contenido web que abra. Por ejemplo:

+

Digamos que la aplicación "Mi Navegador" carga desde el sitio  https://minavegador.com. Este es el dominio de donde los scripts y otros recursos son cargados. Los scripts y recursos pertenecen a este dominio.

+

Ahora bien, si esta aplicación crea un <iframe mozbrowser>, un sandbox diferente es creado para este <iframe>, el cual será un sandbox diferente del usado por la aplicación - por ejemplo, si este oframe navega a https://minavegador.com, esto resultará en diferentes cookies usados dentro del <iframe mozbrowser>. Así también el contenido dentro del <iframe mozbrowser> verá diferentes IndexedDB y bases de datos localStorage de las que abrió la aplicación.

+

Esto también se aplica si "Mi Navegador" quiere crear integración con, por ejemplo, Google Maps para implementar navegación basada en  to implementar navegación basada en la ubicación. Si la aplicación abre un <iframe> a http://maps.google.com, esto abrirá un iframe que recibirá las cookies para el sitio http://maps.google.com. Si el usuario navega dentro del área de contenido web, por ejemplo del <iframe mozbrowser>, a http://maps.google.com, este usará cookies diferentes y permisos diferentes de los que existen a nivel de la aplicación.

+

Otro ejemplo donde esto sería util sería en una aplicación tipo Yelp. Yelp tiene la capacidad de visitar el website de un restaurante direntamente desde la aplicación. Al usar un <iframe mozbrowser> para abrir el sitio web de un restorante, la aplicación Yelp se asegura que el el sitio web no puede tener un <iframe> apuntando a la aplicación de Yelp (lo cual apuntaría a http://yelp.com). Si lo hiciera, el sitio web recibiría el sitio web de Yelp, en vez de la aplicación. Así no existe manera de que el sitio web pueda montar un ataque a la aplicación ya que el sitio web de Yelp no compartirá ninguno de los permisos o la información de la aplicación Yelp.

+

Resumen de la Seguridad en Aplicaciones

+

La tabla de abajo resume los diferente tipos de aplicaciones de Firefox OS, y describe el formato, instalación, y el proceso de actualización de las Open Web Apps corriendo en Firefox OS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tipos de aplicaciones web
TipoEntregaModelo de PermisosInstalaciónActualizaciones
WebAlojada o empaquetadaMenos sensible a los permisos que no son peligrosos para exponer a contenido web sin validadInstaladas desde cualquier lugarPueden ser actualizadas de forma transparente por el usuario o desde el marketplace, dependiendo de donde la aplicación fue instalada, y el mecanismo de entrega.
PrivilegiadaEmpaquetada y firmadaAPIs privilegiadas que requieren de validación y autenticación de la aplicaciónInstaladas desde un marketplace confiableActualizadas desde un marketplace confiable, al usuario se le pide aprovación para descargar e instalar las actualizaciones.
CertificadaEmpaquetadaAPIs poderosas y peligrosas que no se encuentran disponibles para aplicaciones de terceros.Preinstaladas en el dispositivoActualizadas solo como parte de las actualizaciones a nivel del sistema.
+

Nota: Para la  version 1.0 de Firefox OS, si bien las aplicaciones  web pueden ser instaladas desde cualquier sitio web o marketplace, las aplicaciones privilegiadas solo pueden ser instaladas desde el Mozilla Marketplace, como el soporte a multiples marketplaces confiable no está todavía completo.

diff --git a/files/es/archive/b2g_os/security/index.html b/files/es/archive/b2g_os/security/index.html new file mode 100644 index 0000000000..e88430f481 --- /dev/null +++ b/files/es/archive/b2g_os/security/index.html @@ -0,0 +1,72 @@ +--- +title: Firefox OS security +slug: Archive/B2G_OS/Security +tags: + - B2G + - Firefox OS + - Mobile + - Móvil + - Seguridad + - TopicStub + - movil(2) +translation_of: Archive/B2G_OS/Security +--- +

Los siguienes artículos cubren información sobre la seguridad de Firefox OS. Esto incluye caracerísticas generales de seguridad así como seguridad en las aplicaciones y mantener el proceso de instalación seguro.

+ + + + + + + + +
+

Documentación de seguridad de Firefox OS

+ +
+
Modelo de seguridad de Firefox os
+
Un vistazo al manual de seguridad de Firefox  OS
+
Seguridad del sistema
+
Detalles de los controles de seguridad integrados en el runtime de Firefox OS
+
Seguridad de aplicaciones en Firefox OS
+
Un vistazo de cómo las aplicaciones son seguras en Firefox OS
+
Instalación y actualización segura de aplicaciones
+
Cómo Firefox OS instala y acualiza las aplicaciones de forma segura.
+
Permisos de Software en Firefox OS
+
Una guía de qué tipos de software tienen permisos para realizar varias tareas en Firefox OS.
+
 Depuración y pruebas de seguridad con Firefox OS
+
Esta guía muestra los pasos básicos de las pruebas de seguridad, desde la apertura de abrir un depurador remoto de JavaScript hasta la creación de un proxy HTTP/S de intercepción contra una versión de escritorio de Firefox OS.
+
+ +

Ver Todo...

+ 		+

Obtener ayuda de la Comunidad

+ +

Si estás trabajando con Firefox OS, o desarrollando aplicaciones que te gustaría ejecutar en dispositivos Firefox OS, ¡Hay recursos de la comunidad para ayudarte!

+ + + +

No te olvides de la  netiquette...

+ + + + + +
+ +

 

+ +

+Firefox OS
diff --git a/files/es/archive/b2g_os/security/modelo_seguridad/index.html b/files/es/archive/b2g_os/security/modelo_seguridad/index.html new file mode 100644 index 0000000000..8c03acd89e --- /dev/null +++ b/files/es/archive/b2g_os/security/modelo_seguridad/index.html @@ -0,0 +1,255 @@ +--- +title: Introducción a la seguridad de Firefox OS +slug: Archive/B2G_OS/Security/modelo_seguridad +translation_of: Archive/B2G_OS/Security/Security_model +--- +

Este documento proporciona una visión general del marco de trabajo de seguridad del sistema operativo de Mozilla Firefox OS, que está diseñado para proteger los dispositivos móviles de las amenazas a la plataforma, aplicaciones y datos. En Firefox OS, Mozilla ha implementado un modelo exhaustivo, integrado y de múltiples capas de seguridad que ofrece una protección mejor frente a los riesgos de seguridad en los teléfonos móviles.

+

Seguridad de la plataforma

+

Firefox OS en su plataforma utiliza un modelo de seguridad de varias capas que esta diseñado para reducir los riesgos de seguridad en todos los niveles. Contramedidas de primera línea se combinan con una estrategia de defensa en profundidad que proporciona protección completa contra amenazas.

+

Arquitectura de la seguridad

+

Firefox OS conecta las aplicaciones basadas en la web con el hardware subyacente. Se trata de una pila de tecnologías integradas que consiste en los siguientes niveles:

+

+

Mobile device es el teléfono móvil ejecutando Firefox OS. Gonk consiste en el kernel de Linux, las librerías del sistema, el firmware y los controladores del dispositivo. Gecko es la capa de tiempo de ejecución de aplicaciones que proporciona el marco de trabajo para la ejecución de aplicaciones, e implementa las API Web que se usan para acceder a las funciones del dispositivo móvil. Gaia es la colección de aplicaciones web que conforman la experiencia de usuario (aplicaciones que contienen desde HTML5, CSS, JavaScript, imágenes, medios, y así sucesivamente).

+

Gecko es el portero que hace cumplir las políticas de seguridad diseñadas para proteger el dispositivo móvil de un mal uso. La Capa Gecko actúa como intermediario entre las aplicaciones web (en la capa Gaia) y el teléfono. Gonk le ofrece las características del hardware del teléfono móvil directamente a la capa Gecko . Las aplicaciones web acceden a las funcionalidades del teléfono móvil sólo a través de las API Web, y sólo si Gecko permite la petición de acceso, no hay accesos directos ni "puertas traseras" en el teléfono. Gecko aplica los permisos e impide el acceso a las solicitudes no autorizadas.

+

Implementación del sistema de seguridad

+

Firefox OS viene instalado en el teléfono inteligente. la imagen original del sistema es creada por un conocido, una fuente de confianza que por lo general es el OEM del dispositivo, el cuál es responsable de ensamblar, construir, probar y firmar digitalmente el paquete que se distribuye.

+

Las medidas de seguridad se utilizan en toda la pila de tecnologías. Los privilegios del sistema de archivos son impuestas por las listas del control de acceso de Linux`s (ACLs). Las aplicaciones del sistema se instalan en un volumen que es de solo lectura (excepto durante las actualizaciones, donde es temporalmente tienen lectura y escritura ). Sólo las áreas que contienen los datos de usuario son de lectura y escritura. Varios componentes del hardware del dispositivo tiene una función de protección que se aplican de forma predeterminada como la práctica estándar de la industria. Los fabricantes de Chipset, por ejemplo, emplean técnicas de endurecimiento para reducir las vulnerabilidades. El núcleo de la plataforma (Gecko and Gonk) se endurece para reforzar su defensa contra las amenazas potenciales, utilizándose en su caso las características de endurecimiento del compilador. Para más detalles ver Seguridad en tiempo de ejecución.

+

Actualizaciones seguras del sistema

+

Las actualizaciones y parches a la plataforma Firefox OS se implementan usando un proceso seguro de Mozilla que asegura la integridad de la imagen del sistema en el teléfono móvil. La actualización es creada por un conocido, una fuente de confianza que por lo general es el OEM del dispositivo, el cuál es responsable de ensamblar, construir, probar y firmar digitalmente el paquete que se distribuye.

+

Las actualizaciones del sistema pueden incluir la totalidad o una parte de la pila de Firefox OS. Si cambios en Gonk son incluidos en la actualización, entonces FOTA (Firmware sobre el aire ) es el proceso de instalación utilizado. La actualización por FOTA puede incluir cualquier otra parte de la pila de Firefox OS, incluyendo la gestión del dispositivo(FOTA, firmware / drivers), gestión de la configuración(configuraciones de Firefox OS), actualizaciones de seguridad, Gaia, Gecko y otros parches.

+

Actualizaciones que no involucren a Gonk pueden hacerse usando la utilidad de actualización de sistemas de Mozilla. Firefox OS utiliza el mismo marco de trabajo de actualizaciones, los procesos y el formato de archivos de Mozilla (MAR)  (usado para actualizar los paquetes) como el producto Firefox para Escritorio. Para más información, consulte https://wiki.mozilla.org/Software_Update.

+

Al integrar el servicio de actualización que puede ser proporcionado por el fabricante, en el teléfono móvil comprueba periódicamente si hay actualizaciones del sistema. Una vez que un paquete del sistema esta disponible y es detectado por el servicio de actualizaciones, se solicita al usuario que confirme la actualización. Antes de instalar las actualizaciones en dispositivo móvil, se comprueba que haya suficiente espacio para aplicar la actualización y la distribución se verifica para:

+ +

Las siguientes medidas de seguridad son utilizadas durante el proceso de actualización:

+ +

Rigurosas comprobaciones se llevan a cabo para asegurar que la actualización es aplicada correctamente en teléfono móvil.

+

Seguridad en aplicaciones

+

Firefox OS utiliza una estrategia de seguridad de tipo defensa en profundidad apara proteger el teléfono móvil de las aplicaciones intrusivas o maliciosos. Esta estrategia cuenta con una variedad de mecanismos, incluyendo los niveles de permisos implícitos basados en un modelo de aplicaciones de confianza, la ejecución de recinto de seguridad en tiempo de ejecución, únicamente acceso al hardware subyacente teléfono móvil a través del API, un modelo de permisos robusto y seguridad en la instalación y los procesos de actualización. Para obtener información técnica, consulte: Seguridad de las aplicaciones.

+

En Firefox OS, todas las aplicaciones son aplicaciones web - programas escritos utilizando HTML5, JavaScript, CSS, media y otras tecnologías web abiertas (las páginas que se ejecutan en el navegador no se conocen como aplicaciones Web en este contexto). Porque no hay binario ("nativo") las aplicaciones instaladas por el usuario, todo acceso al sistema está mediada estrictamente a través de las API Web. Incluso el acceso al sistema de archivos es sólo a través de las API de Web y una base de datos SQLite de fondo - no hay acceso directo desde las aplicaciones a los archivos almacenados en la tarjeta SD.

+

Firefox OS limita y hace cumplir el ámbito de los recursos que pueden ser accedidos o utilizados por una aplicación, mientras que también apoya una amplia gama de aplicaciones con diferentes niveles de permisos. Mozilla implementa controles estrictos sobre qué tipo de aplicaciones pueden acceder a qué APIs. Por ejemplo, sólo las aplicaciones certificadas (se suministran con el teléfono) pueden tener acceso a la API de telefonía. La aplicación Marcador tiene privilegios para acceder a la API de telefonía para hacer llamadas telefónicas, pero no todas las aplicaciones certificadas se puede acceder a esta API. Esto evita que un escenario, por ejemplo, en el que se instala una aplicación de terceros arbitraria, marca un número de teléfono de pago por uso (900 y 910), y por debajo te consume gran cantidad del saldo del teléfono celular. Sin embargo, otras aplicaciones OEM pueden darse de forma selectiva el acceso a la API de telefonía. Por ejemplo, un operador podría proporcionar una aplicación de gestión de sistemas que permite a los clientes administrar su cuenta, incluyendo la posibilidad de llamar a la facturación del operador o de la oficina de apoyo directamente.

+

Aplicaciones confiables y no confiables

+

Firefox OS clasifica las aplicaciones de acuerdo a los siguientes tipos:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

Tipo

+ 		+

Nivel de confianza

+ 		+

Descripción

+
+

Certificadas

+ 		+

Altamente confiable

+ 		+

Aplicaciones del sistema que han sido aprobadas por el operador o el OEM (debido al riesgo de corrupción para el dispositivo o riesgo para las funcionalidades críticas). Aplicaciones y servicios del sistema solamente, no destinadas a aplicaciones de terceros.
+ Esta designación se reserva para sólo un pequeño número de aplicaciones críticas. Ejemplos: SMS, Bluetooth, cámara, reloj del sistema, la telefonía y el marcador por defecto (para garantizar que los servicios de emergencia siempre están accesibles).

+
+

Privilegiadas

+ 		+

Confiables

+ 		+

Aplicaciones de terceros que han sido revisados, aprobados y firmados digitalmente por un mercado autorizado.

+
+

Web (todo lo demás)

+ 		+

No confiables

+ 		+

Contenido web regular. Incluye tanto las aplicaciones instaladas (almacenadas en el teléfono móvil) y las aplicaciones de servidor (almacenados remotamente, con sólo un archivo de manifiesto de aplicación almacenada en el teléfono móvil). El manifiesto para aplicaciones de servidor se puede obtener a través de un mercado de aplicaciones.

+
+

El nivel de confianza de una aplicación determina, en parte, su capacidad para acceder a la funcionalidades en el teléfono móvil.

+ +

Algunas operaciones, como el acceso a la red, se supone de un permiso implícito para todas las aplicaciones. En general, cuanto más sensible es la operación (por ejemplo, marcar un número de teléfono o el acceso a la lista de contactos), mayor es el nivel de confianza requerido en la aplicación para ejecutarla.

+

Principle of Least Permissions

+

For web apps, the Firefox OS security framework follows the principle of least permissions: start with the absolute minimum permissions, then selectively grant additional privileges only when required and reasonable. By default, an app starts with very low permissions, which is comparable to untrusted web content. If the app makes Web API calls that require additional permissions, it must enumerate these additional permissions in its manifest (described later in this document). Gecko will consider granting Web API access to an application only if the applicable privileges are explicitly requested in its manifest. Gecko will grant the requested permission only if the type of the Web App (certified, trusted, or web) is sufficiently qualified for access.

+

Review Process for Privileged Apps in the Marketplace

+

In order for an app to become privileged, the app provider must submit it for consideration to an authorized Marketplace. The Marketplace subjects the app to a rigorous code review process: verifying its authenticity and integrity, ensuring that requested permissions are used for the purposes stated (in the permission rationale), verifying that the use of implicit permissions is appropriate, and validating that any interfaces between privileged app content and unprivileged external content have the appropriate mitigations to prevent elevation of privilege attacks. The Marketplace has the responsibility to ensure that the web app will not behave maliciously with the permissions that it is granted.

+

After an app passes this review, it is approved for use, its app manifest is digitally signed by the Marketplace, and it is made available for mobile users to download. The signature ensures that, if the web store were somehow hacked, the hacker could not get away with installing arbitrary content or malicious code on users’ phones. Due to this vetting process, Firefox OS gives privileged apps obtained from a Marketplace a higher degree of trust than everyday (untrusted) web content.

+

Packaged and Hosted Apps

+

Apps for Firefox OS can be either packaged (stored on the mobile phone) or hosted (stored on a remote web server, with just a manifest stored on the mobile phone). There are some differences in the way in which security is managed for each. Nonetheless, packaged and hosted apps are both subject to application sandboxing, which is described later in this document.

+

Packaged Apps

+

A packaged app consists of a ZIP file containing application resources (HTML5, CSS, JavaScript, images, media), as well as a manifest that provides an explicit list of assets and their corresponding hashes. Certified and privileged apps must be packaged apps because the app manifest needs to be digitally signed. When a user obtains a packaged app, the ZIP file is downloaded onto the mobile phone, and the manifest is read from a known location inside the ZIP file. During the install process, app assets are verified and remain stored locally in the package. All explicit permissions are requested at runtime, showing the user the app's data usage intentions, and persisted by default.

+

To refer to app resources in a packaged app, the URL begins with app: using the following format:

+

app://identifier/path_within_zipfile/file.html

+

where app:// represents the mount point for the ZIP file, and identifier is a UUID that is generated when the app is installed on the mobile phone. This mechanism ensures that resources referred to with an app: URL are contained in the ZIP file. The path within an app: is relative, so relative links to resources in the ZIP file are allowed.

+

While packaged apps are primarily intended to be used for Certified or Privileged apps, regular web apps can also be packaged. However, they do not gain any increase in trust or permissions access simply because they are packaged.

+

Hosted Apps

+

Hosted apps are located on a web server and loaded via HTTP. Only the app manifest is stored on the mobile phone. Everything else is stored remotely. Certain APIs are available only to privileged and certified apps, which requires the app to be packaged due to signing requirements. Therefore, a hosted app will not have access to any of the Web APIs operations that require privileged or certified app status.

+

From a security point of view, hosted apps work very much like normal websites. A hosted app is loaded by invoking a hard-coded, fully-qualified URL that points to the startup page in the root directory of the app on that web server. Once a hosted app is loaded, the mobile phone links to pages using the same URLs that are used when browsing the web site.

+

App Manifest

+

An Open Web App manifest contains information that a Web browser needs in order to interact with an app. A manifest is a JSON file with (at a minimum) a name and description for the app. For further details, refer to FAQs about app manifests.

+

Example Manifest

+

The following code listing shows an example manifest with just basic settings:

+
{
+  "name": "My App",
+  "description": "My elevator pitch goes here",
+  "launch_path": "/",
+  "icons": {
+    "128": "/img/icon-128.png"
+  },
+  "developer": {
+    "name": "Your name or organization",
+    "url": "http://your-homepage-here.org"
+  },
+  "default_locale": "en"
+}
+

Security Settings in the App Manifest

+

The manifest can also contain other settings, including the following security settings:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
+

Field

+ 		+

Description

+
+

permissions

+ 		+

Permissions required by the app. An app must list every Web API it intends to use that requires user permission. Most permissions make sense for privileged apps or certified apps, but not for hosted apps. Properties per API:

+
    +
  • description - A string specifying the intent behind requesting use of this API. Required.
    • +
  • access - A string specifying the type of access required for the permission. Implicit permissions are granted at install time. Required for only a few APIs. Accepted values: read, readwrite, readcreate, and createonly.
    • +
+
+

installs_allowed_from

+ 		+

Origin of the app. Array of origins (scheme+unique hostname) that are allowed to trigger installation of this app. Allows app providers to restrict installs from only an authorized Marketplace (such as https://marketplace.firefox.com/).

+
+

csp

+ 		+

Content Security Policy (CSP). Applied to all pages loaded in the app. Used to harden the app against bugs that would allow an attacker to inject code into the app. If unspecified, privileged and certified apps have system-defined defaults. Syntax:
+ https://developer.mozilla.org/en-US/docs/Apps/Manifest#csp

+

Note that this directive can only increase the CSP applied. You cannot use it, for example, to reduce the CSP applied to a privileged App.

+
+

type

+ 		+

Type of application (web, privileged, or certified).

+
+

Firefox OS requires that the manifest be served with a specific mime-type ("application/x-web-app-manifest+json") and from the same fully-qualified host name (origin) from which the app is served. This restriction is relaxed when the manifest app (and thus the app manifest) is same-origin with the page that requested the app to be installed. This mechanism is used to ensure that it's not possible to trick a website into hosting an application manifest.

+

Sandboxed Execution

+

This section describes application and execution sandboxes.

+

Application Sandbox

+

The Firefox OS security framework uses sandboxing as a defense-in-depth strategy to mitigate risks and protect the mobile phone, platform, and data. Sandboxing is a way of putting boundaries and restrictions around an app during run-time execution. Each app runs in its own worker space and it has access only to the Web APIs and the data it is permitted to access, as well as the resources associated with that worker space (IndexedDB databases, cookies, offline storage, and so on). For details, see https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Security/Security_model.

+

The following figure provides an overview of this security model.

+

+

By isolating each app, its impact is contained within its own worker space. It cannot interfere with anything (such as other apps or their data) outside of that worker space.

+

Execution Sandbox

+

B2G (Gecko) runs in a highly-privileged system process that has access to hardware features in the mobile phone. At run-time, each app runs inside an execution environment that is a child process of the B2G system process. Each child process has a restricted set of OS privileges – for example, a child process cannot directly read or write arbitrary files on the file system. Privileged access is provided through Web APIs, which are mediated by the parent B2G process. The parent ensures that, when a child process requests a privileged API, it has the necessary permission to perform this action.

+

Apps communicate only with the B2G core process, not with other processes or apps. Apps do not run independently of B2G, nor can apps open each other. The only “communication” between apps is indirect (for example, when a listener process detects an event generated by some other process), and is mediated through the B2G process.

+

Hardware Access Only via the Web API

+

Web apps have only one entry point to access mobile phone functionality: the Firefox OS Web APIs, which are implemented in Gecko. Gecko provides the sole gateway to the mobile device and underlying services. The only way to access device hardware functionality is to make a Web API call. There is no “native” API and there are no other routes (no “back doors”) to bypass this mechanism and interact directly with the hardware or penetrate into low-level software layer.

+

Security Infrastructure

+

The following figure shows the components of this security framework:

+

+ +

Permissions Management and Enforcement

+

Firefox OS security is designed to verify and enforce the permissions granted to web apps.
+ The system grants a particular permission to an app only if the content requests it, and only if it has the appropriate permissions requested in the app’s manifest. Some permissions require further authorization from the user, who is prompted to grant permission (as in the case of an app requesting access to the user’s current location). This app-centric framework provides more granular control over permissions than traditional role-centric approaches (in which individual roles are each assigned a set of permissions).

+

A given Web API has a set of actions and listeners. Each Web API has a required level of permission. Every time a Web API is called, Gecko checks permission requirements (role lookup) based on:

+ +

If the request does not meet the permission criteria, then Gecko rejects the request. For example, untrusted apps cannot execute any Web APIs that are reserved for trusted apps.

+

Prompting Users for Permission

+

In addition to permissions that are implicitly associated with the web apps, certain operations require explicit permission from the user before they can be executed. For these operations, web apps are required to specify, in their manifest, their justification for requiring this permission. This data usage intention informs users about what the web app intends to do with this data if permission is granted, as well as any risk involved. This allows users to make informed decisions and maintain control over their data.

+

Secure App Update Process

+

+

For app upgrades and patches to a privileged app, app providers submit the updated package to an authorized Marketplace, where it is reviewed and, if approved, signed and made available to users. On Firefox OS devices, an App Update Utility periodically checks for app updates. If an update is available, then the user is asked whether they want to install it. Before a update is installed on the mobile device, the package is verified for:

+ +

Rigorous checks are in place to ensure that the update is applied properly to the mobile phone.
+ The complete update package must be downloaded in a specific and secure location before the update process begins. Installation does not overwrite any user data.

+

Device Security (Hardware)

+

Security mechanisms for the mobile device hardware are typically handled by the OEM. For example, an OEM might offer SIM (Subscriber Identity Module) card locks, along with PUK (PIN Unlock Key) codes to unlock SIM cards that have become locked following incorrect PIN entries. Contact the OEM for details. Firefox OS does allow users to configure passcodes and timeout screens, which are described in the next section.

+

Data Security

+

Users can store personal data on their phone that they want to keep private, including contacts, financial information (bank & credit card details), passwords, calendars, and so on. Firefox OS is designed to protect against malicious apps that could steal, exploit, or destroy sensitive data.

+

Passcode and Timeout Screens

+

Firefox OS allows users to set a passcode to their mobile phone so only those who supply the passcode can use the phone. Firefox OS also provides a timeout screen that is displayed after a configurable period of phone inactivity, requiring passcode authentication before resuming use of the phone.

+

Sandboxed Data

+

As described earlier, apps are sandboxed at run time. This prevents apps from accessing data that belongs to other apps unless that data is explicitly shared, and the app has sufficient permissions to access it.

+

Serialized Data

+

Web apps do not have direct read and write access to the file system. Instead, all access to storage occurs only through Web APIs. Web APIs read from, and write to, storage via a an intermediary SQLite database. There is no direct I/O access. Each app has its own data store, which is serialized to disk by the database.

+

Data Destruction

+

When a user uninstalls an app, all of the data (cookies, localStorage, Indexeddb, and so on) associated with that application is deleted.

+

Privacy

+

Mozilla is committed to protecting user privacy and user data according to its privacy principles (https://www.mozilla.org/privacy/), which stem from the Mozilla Manifesto (https://www.mozilla.org/about/manifesto.html). The Mozilla Firefox Privacy Policy describes how Mozilla collects and uses information about users of the Mozilla Firefox web browser, including what Firefox sends to websites, what Mozilla does to secure data, Mozilla data practices, and so on. For more information, see:

+ +

Firefox OS implements these principles by putting the control of the user data in the hands of the user, who gets to decide where this personal information goes. Firefox OS provides the following features:

+ +

 

diff --git a/files/es/archive/b2g_os/simulator/index.html b/files/es/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..e05c481b85 --- /dev/null +++ b/files/es/archive/b2g_os/simulator/index.html @@ -0,0 +1,258 @@ +--- +title: Simulador de Firefox OS +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +
+

El Simulador de Firefox OS está todavía en una etapa temprana de desarrollo, y aún no llega al nivel de confiabilidad que queremos.

+ +

Si encuentra un error de cualquier tipo, cree un informe en GitHub, y si quiere hacernos una pregunta, utilice la lista de correo dev-developer-tools o en el canal #devtools de irc.mozilla.org (en inglés).

+
+ +

El complemento Simulador de Firefox OS es una herramienta que le permite probar y depurar aplicaciones para Firefox OS en el escritorio. El ciclo de «programar–probar–depurar» es mucho más rápido con el Simulador que con un dispositivo de hardware real y, obviamente, no necesitará uno para utilizarlo.

+ +

En esencia, el complemento del Simulador consiste de:

+ + + +

La siguiente captura de pantalla muestra una sesión de depuración utilizando el Simulador.

+ +

El tablero se encuentra en la esquina superior derecha de la imagen, ubicado en una pestaña de Firefox. Hemos añadido una aplicación empaquetada, llamada «Where am I?». En la esquina superior izquierda, hay una aplicación ejecutándose en el Simulador. Asimismo, hemos conectado las herramientas de depuración, que están en la ventana inferior. Puede ver que se ha alcanzado un punto de interrupción en la aplicación.

+ +

+ +

Esta guía abarca los temas siguientes:

+ + + +

Para un tutorial práctivo que le muestra cómo utilizar el Simulador para depurar una aplicación web real, véase la página Paso a paso con el Simulador.

+ +

Instalar el complemento del Simulador

+ +

El Simulador está empaquetado y distribuido como un complemento de Firefox. Para instalarlo:

+ +
    +
  1. Mediante Firefox, vaya a la página del Simulador en addons.mozilla.org.
    2. +
  2. Pulse en «Añadir a Firefox».
    3. +
  3. Una vez que se haya descargado completamente el complemento, se le solicitará instalarlo: pulse en «Instalar ahora».
    4. +
+ +

Debido al tamaño del complemento, Firefox puede colgarse durante unos segundos mientras se instala, y es posible que aparezca el cuadro de diálogo «Aviso: script sin respuesta». Si esto ocurre, pulse en «Continuar» y espere a que la instalación finalice. Este problema se sigue en el error n.º 814505.
+
+ Una vez instalado el complemento, Firefox comprobará si hay actualizaciones regularmente y lo mantendrá actualizado automáticamente.

+ +

Cuando instala el Simulador, el tablero se abre automáticamente; y puede volverlo a abrir en cualquier momento yendo al menú «Firefox» (o el menú «Herramientas» en OS X y Linux) ▸ «Desarrollador web» ▸ «Firefox OS Simulator»:

+ +


+ El tablero es la herramienta que usará para añadir su aplicación al Simulador y ejecutarla. Así es como luce:
+

+ +

Añadir, actualizar y desinstalar aplicaciones

+ +

Añadir aplicaciones

+ +

Para añadir una aplicación empaquetada al Simulador, abra el tablero, pulse en «Añadir un directorio» y seleccione el archivo manifest para su aplicación.
+
+ Para añadir una aplicación alojada en la Web, escriba un URL en el cuadro de texto «URL de página o manifest.webapp», y luego pulse en «Añadir URL». Si el URL apunta a un manifest, ese manifest se utilizará. Si no, el tablero generará un manifest para el URL. De este modo puede añadir cualquier sitio como aplicación con tan solo introducir su URL.
+
+ Cuando añade una aplicación, el tablero ejecutará una sserie de pruebas en el archivo manifest para comprbar problemas comunes. Consulte la sección Validación de manifest para obtener detalles sobre las pruebas que se ejecutan.

+ +

A menos de que la validación del manifest muestre que su aplicación tiene errores, el tablero ejecutará la aplicación en el Simulador automáticamente.

+ +

Gestión de aplicaciones

+ +

Una vez que ha añadido una aplicación, ésta aparecerá en la lista de aplicaciones instaladas del gestor:
+
+ Cada entrada proporciona información sobre la aplicación:

+ + + +

También proporciona tres órdenes:

+ + + +

Si ha conectado un dispositivo con Firefox OS a su equipo, verá una cuarta orden llamada «Instalar en dispositivo».

+ +

Validación de manifest

+ +

Cuando proporciona un manifest, el gestor ejecutará algunas pruebas de validación en él. El gestor informa tres clases de problemas:

+ + + +

Se muestran resúmenes de los problemas encontrados en la entrada de la aplicación, al pulsar en los resúmenes se muestran más detalles.

+ +

Errores del manifest

+ +

El tablero informará las condiciones siguientes como errores, lo cual significa que no podrá ejecutar su aplicación si no los corrige:

+ + + +

A continuación se muestra el resultado de intentar añadir un archivo manifest que carece del campo «name»:
+
+

+ +

Avisos del manifest

+ +

El tablero informará de los siguientes problemas de manifest como avisos:

+ + + +

Avisos específicos del Simulador

+ +

Finalmente, el gestor emitirá avisos para las aplicaciones que utilicen funciones de Firefox OS que todavía no son totalmente compatibles con el Simulador:

+ + + +

Ejecutar el Simulador

+ +

El Simulador se puede abrir de dos maneras:

+ + + +

Una vez que inició el Simulador mediante cualquiera de estas formas, el botón «Detenido» se vuelve verde y su etiqueta cambia a «Ejecutándose». Para detener el Simulador, pulse en este botón de nuevo.
+
+ El Simulador aparece en una ventana separada cuyo tamaño simula las dimensiones de una pantalla de 320 × 480 píxeles, y posee una barra de herramientas en la parte inferior que contiene algunas funciones adicionales.

+ +

Para simular toques, puede pulsar con el ratón y arrastrar mientras mantiene oprimido el botón izquieerdo. Asi que, para ver las aplicaciones incorporadas en el sistema —y las que haya instalado—, pulse y arrastre con el ratón sobre la pantalla de inicio:

+ +

+ +

Barra de herramientas del Simulador

+ +

La barra de herramientas ubicada en la parte inferior de la ventana contiene tres botones:
+
+ De izquierda a derecha, son el botón «Inicio», «Simulación de giro» y «Simulación de geolocalización».

+ + + +

Activar el registro de consola

+ +

Si activa la casilla «Consola» que se ubica bajo el botón «Detenido/Ejecutándose», la Consola de errores se abrirá junto al Simulador. Su aplicación podrá crear registros en esta consola mediante el bojeto global «console».

+ +

Adjuntar herramientas para desarolladores

+ +

Puedes adjuntar herramientas para desarrolladores en el Simulador, para ayudar a depurar tu aplicación. Por el momento, puedes adjuntar únicamente el Depurador de JavaScript y la Consola Web, pero estamos trabajando para añadir soporte para mas herramientas para desarrolladores.

+ +

Mientras que el Simulador esté en funcionamiento otro botón aparecerá debajo de la casilla "Consola". Está etiquetado "Conectar...":

+ +

+ +

Haz clic, y te llevará a una página parecida a esta:

+ +

Haz clic en "Conectar" aquí y verás otra página, esta vez como esta:
+
+

+ +

Para usar el Depurador de JavaScript, selecciona aquí "chrome://prosthesis/content/shell.xul". Una vez ejecutado, necesitarás buscar los scripts de tu aplicación en el seleccionador de script, pero si abres tu aplicación y luego te conectas al depurador, el script principal de tu aplicación será seleccionado como predeterminado:

+ +

Para usar la Consola Web con tu aplicación, selecciona "Proceso Principal" en la ventana "Conectar a dispositivo remoto".

+ +

Lamentablemente, no hay depuración de objetivo único que funcione con ambos la Consola Web y el Depurador JS - pero puedes ejecutar dos dos casos simultáneamente de las herramientas de depuración, una dirigida a "shell.xul" y otra a "Proceso Principal".

+ +

Subir al dispositivo

+ +

Si tienes un dispositivo Firefox OS puedes conectarlo al Simulador, y por ello puedes subirlo desde el panel de control a el dispositivo.

+ +

Conectar un dispositivo

+ +

Para conectar un dispositivo, sigue las instrucciones en la guía de connecting a Firefox OS device to the desktop. Recuerda que no tienes que instalar adb, ya que el complemento del Simulador ya lo incluye.

+ +

 

+ +

Subir aplicaciones al dispositivo

+ +

Una vez que hayas configurado el dispositivo y escritorio, y conectado el dispositivo a tu escritorio mediante USB, verás aparecer el comentario "Dispositivo conectado." a la izquierda del panel de control, y un nuevo comando en la entrada por cada aplicación etiquetada "Subir":

+ +

+ +

Click "Push", and the app will be installed on the Firefox OS device.

+ +

Solucionar problemas en Linux

+ +

Si no puedes conectar tu dispositivo después de crear reglas udev, por favor vea este bug.

+ +

 

+ +

Limitaciones del Simulador

+ +

Recuerda que el Simulador de Firefox OS no es una simulación perfecta.

+ +

Limitaciones de hardware

+ +

Aparte del tamaño de la pantalla, el Simulador no simula las limitaciones de hardware del dispositivo Firefox OS tales como memoria disponible o velocidad de la CPU.

+ +

Códecs de Audio/Video

+ +

Los siguientes códecs dependen en decodificación acelerada por hardware y por lo cual no hay asistencia todavía:

+ + + +

Esto significa que no es posible usar el Simulador para probar la reproducción de video en aplicaciones y en páginas web como Youtube que dependen de esos códecs.

+ +

APIs no admitidas

+ +

Ciertas APIs que funcionan en el dispositivo no funcionarán en el Simulador, generalmente porque el soporte hardware no está disponible para el escritorio. Hemos implementado simulaciones para algunas APIs como geolocalización, y esperamos añadir más en futuras versiones. Sin embargo, por el momento las siguientes APIs no son compatibles. Usárlas podría traer errores o dar resultados incorrectos:

+ + + +

Obtener ayuda

+ +

Si encuentras algún bug, por favor archívalos en GitHub. Si tienes alguna cuestión, preguntanos en dev-developer-tools mailing list o en #devtools en irc.mozilla.org.

diff --git a/files/es/archive/b2g_os/usando_el_b2g_escritorio_cliente/index.html b/files/es/archive/b2g_os/usando_el_b2g_escritorio_cliente/index.html new file mode 100644 index 0000000000..0fbbe96e02 --- /dev/null +++ b/files/es/archive/b2g_os/usando_el_b2g_escritorio_cliente/index.html @@ -0,0 +1,134 @@ +--- +title: Usando el cliente de escritorio B2G +slug: Archive/B2G_OS/usando_el_B2G_escritorio_cliente +translation_of: Archive/B2G_OS/Building_the_B2G_OS_simulator +--- +

El cliente de escritorio Firefox OS, también llamado "Cliente de escritorio B2G", te permite correr Gaia y Apps Web en un entorno Gecko-based muy parecido a un dispositivo actual. No emula el hardware del dispositivo, por lo tanto no es apto para probar APIs de dispositivo, tampoco es un reemplazo para probar hardware actual. Sin embargo, tiene múltiples APIs habilitadas que no están disponibles en Firefox como las de Contactos y Opciones. Por lo tanto puede ser muy util durante el desarrollo de nuestra aplicación, o durante el trabajo con la intefaz de usuario de Gaia.

+

Este articulo trata sobre la descarga o compilación del cliente de escritorio Firefox OS i como utilizarlo.

+
+

Nota: La forma más sencilla para utilizar el cliente de escritorio de Firefox OS es utilizar el simulador de Firefox OS. No necesita de instalación de cliente por su parte.

+
+

Descarga una compilación "nightly"

+
+

Note: Firefox OS version 1.0 is based on a branch of Gecko 18. There are also nightly builds based on mozilla-central here:
+ http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/

+
+

Just like Firefox Nightlies, the Firefox OS desktop client is built every day from the latest source code. The latest build is available from the Mozilla FTP server. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.

+

Be sure to install the application in a writeable location; the application needs to be able to update included the Gaia profile.

+

You can now skip ahead to Running the desktop client, unless you actually want to build it for yourself.

+

Building the desktop client

+

The first thing we need to do is set up a standard Mozilla build environment. Once we have that, we can pull down the code we'll need and configure to build the Firefox OS desktop client.

+

Downloading the code for the first time

+

In a directory where we'd like the source code to go, let's clone the mozilla-central repository that contains all of Gecko:

+
 hg clone http://hg.mozilla.org/mozilla-central
+
+

Updating the code

+

When we do subsequent builds later, we'll want to make sure we have the latest code. Here's how to pull the latest changes:

+
cd mozilla-central
+hg pull -u
+
+

Create a mozconfig

+

Next, we need to create a mozconfig file in the mozilla-central directory to configure the build system to build the Boot to Gecko client instead of Firefox:

+
mk_add_options MOZ_OBJDIR=../build
+mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
+
+ac_add_options --enable-application=b2g
+ac_add_options --disable-libjpeg-turbo
+
+# This option is required if you want to be able to run Gaia's tests
+ac_add_options --enable-tests
+
+# turn on mozTelephony/mozSms interfaces
+# Only turn this line on if you actually have a dev phone
+# you want to forward to. If you get crashes at startup,
+# make sure this line is commented.
+#ac_add_options --enable-b2g-ril
+

Building

+

Now we're ready to build the desktop client with the following command issued from the mozilla-central directory:

+
make -f client.mk
+
+

The built client will be placed in the ../build/dist directory (based on the value you specify for MOZ_OBJDIR in the mozconfig file).

+

Downloading Gaia

+

By default the desktop client will show an empty screen because it doesn't know which Web app to load initially as the system app. The collection of system apps and default apps that come with Firefox OS is called Gaia.

+

To download Gaia for the first time, let's clone the source code repository on GitHub:

+
git clone https://github.com/mozilla-b2g/gaia
+cd gaia
+

To update an already existing clone of Gaia, we can pull in the latest changes from GitHub:

+
cd gaia
+git pull
+
+

Generating a profile

+

Next we need to set up Gaia's apps for the desktop client. This includes packaging the Gaia apps in the same way like they would be installed on the device, as well as setting up the permissions for the privileged system apps. We do this by generating a profile. The following command (run in the gaia directory) will take care of that:

+
make
+
+

This should create a profile directory below the gaia directory. The new profile contains a customized extension and other configuration needed to make B2G run properly.

+

Running the desktop client

+

Once you've built the client and downloaded Gaia (or downloaded and installed the nightly desktop application), you're ready to fire up the Firefox OS desktop client.

+

Running on Linux

+

To run the desktop client on Linux using the embedded Gaia profile, just run the b2g executable. If you want to specify a different Gaia profile, you need to bypass the b2g wrapper program and run the b2g-bin binary. The binary is in the archive you downloaded earlier or in the ../build/dist/bin directory if you built the client yourself.

+
.../b2g-bin -profile gaia/profile
+
+

You may experience annoying rendering problems. To avoid them, add the following line to your gaia/profile/user.js file:

+
user_pref("layers.acceleration.disabled", true);
+
+

Running on Mac

+

If you downloaded the nightly build, you can simply launch it from the Finder as usual. Any console output is visible by running the standard Console utility program included with your Mac.

+

If you want to specify a different Gaia profile, you need to bypass the b2g wrapper program and run the b2g-bin binary. The command line is slightly more complicated due to the location of the b2g-bin binary and the need for absolute paths when specifying the profile directory:

+
.../B2G.app/Contents/MacOS/b2g-bin -profile /full/path/to/gaia/profile
+
+

Running on Windows

+

Running the nightly build on Windows is as simple as launching b2g.exe. If you want to customize the execution, you can do so by running the b2g-bin.exe executable instead; this bypasses the wrapper program that automatically uses the bundled Gaia.

+

Command line options

+

There are a number of command line options you can use to adjust the runtime experience while using the desktop client. You can get a list by using the -help option. This section covers some of the particularly interesting ones.

+

Specifying the screen size

+

You can specify the screen size of the device you want to simulate using the --screen option:

+
b2g --screen=<width>x<height>[@<dpi>]
+

Where <width>, <height>, and <dpi> are fairly self-explanatory parameters: the width and height of the device's screen in pixels and the device resolution in DPI. For example:

+
b2g --screen=320x480
+b2g --screen=320x480@160
+
+

Optionally, you can specify certain devices by name to simulate their screen size and resolution:

+ +

Opening the JavaScript console

+

You can open the JavaScript console when launching the desktop B2G client by launching it from the command line with the -jsconsole flag. After building, just do:

+
.../b2g -jsconsole -profile /path/to/your/profile
+

If you've installed the nightly build on a Mac, you can do the following:

+
/Applications/B2G.app/Contents/MacOS/b2g-bin -jsconsole -profile /path/to/your/profile
+
+

Note: On production builds of Firefox OS, console logging (such as by console.log()) is disabled by default. In order to enable it, open the Settings app and navigate down through Device Information->More Information->Developer, then toggle on the "Console Enabled" preference.

+
+

Launching a specific application at startup

+

You can now specify an application to be launched automatically when b2g starts up in the desktop client. This is done as soon as the rest of the system is done loading up. To do this, just use the --runapp option, which takes as a parameter the name of the application to run. For example:

+
 .../b2g-bin -profile /path/to/your/gaia/profile --runapp email
+

Before looking for an app to launch, the specified name is normalized by converting it to all lower case and removing all dashes and spaces. This normalized name is then compared to similarly normalized names from the manifests of available apps' manifests.

+

For example, the name of the email app is currently "E-mail", but --runapp email will work because of this normalization.

+

If you specify the --runapp option without an argument, or with an empty argument, the b2g client will output to your terminal a list of the known applications as well as a brief usage message.

+
+

Note: Using the --runapp option disables the lock screen as a side effect and does not re-enable it. It's assumed that you won't use this command on a profile on which you will be testing the lock screen, or you will turn it back on manually in Settings application. Feel free to contribute a patch to change this behavior if it's a problem.

+
+

Usage tips

+

This section provides a few helpful tips to using the B2G desktop client.

+ +

Next steps

+

Now that you have a desktop build of Boot to Gecko running, you can do testing, development, and other work in it:

+ diff --git a/files/es/archive/b2g_os/using_firefox_os_simulator/index.html b/files/es/archive/b2g_os/using_firefox_os_simulator/index.html new file mode 100644 index 0000000000..158cdca809 --- /dev/null +++ b/files/es/archive/b2g_os/using_firefox_os_simulator/index.html @@ -0,0 +1,57 @@ +--- +title: Using Firefox OS Simulator +slug: Archive/B2G_OS/Using_Firefox_OS_Simulator +translation_of: Archive/B2G_OS/Simulator +--- +

The Firefox OS Simulator is a desktop platform tool that shows you what apps will look like on a phone that is running the Firefox OS. It is the easiest way to try out apps on Firefox OS before submitting them to the Firefox Marketplace. The Firefox OS Simulator was formerly called "r2d2b2g", but that name is too difficult.

+

The Simulator is packaged as a desktop Firefox add-on. You can use any recent version of Firefox from Firefox 17 onward.

+

Although there are other ways to run the Firefox OS desktop, the best and most convenient way for app developers is this one. If you're a core Firefox OS platform developer, or are working on localization, there are other tools that are better suited for your needs. The Simulator add-on includes support for adding apps to the test environment, and is configured to support remote debugging, remote Web console, and other features. It also provides a visible Home button you can click, and sets the user-agent string to the one used by Firefox OS on devices. The result is, in nearly every way, a better environment for app developers.

+

Installing Firefox OS Simulator

+
    +
  1. Using Firefox, go to this link: https://addons.mozilla.org/addon/firefox-os-simulator/
    2. +
  2. Click Add to Firefox. It's a large download. Follow the prompts that appear.
    3. +
+
+

Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and its unresponsive script dialog may appear, due to bug 814505. If it does, just click the Continue button, and Firefox will continue installing the add-on.

+
+

Starting the Simulator

+
    +
  1. On the Firefox menu (Windows) or the Tools menu (Mac, Linux), go to Web Developer and click Firefox OS Simulator. The dashboard appears. +

    Dashboard

    +
    2. +
  2. Click the Stopped button. It changes into the Running button and Firefox OS boots up in its own window. The default size for this window is 320x480. +

    Simulator

    +

    To stop the Simulator, click the Running button in the dashboard, or just close the Simulator window.

    +
    3. +
+
+

Note: You can also start and stop the Simulator in the Developer Toolbar command line using firefoxos start and firefoxos stop.

+
+ +

Imitate swipe motions in the Simulator by clicking and dragging with the mouse. The mouse scroll wheel will move a list up and down, such as in the Settings app. Click and hold down the mouse button to simulate a long press.

+

To get back to the home screen, click the home button at the bottom of the Simulator, or press the Home key on your keyboard. On Mac keyboards without a Home key, use Fn + Left Arrow.

+

Console checkbox

+

Click the Console check box before you start the Simulator to open an error console so you can spot errors that might occur while you're working on your app.

+

Web APIs in the Simulator

+

Mozilla is working on many Web APIs to make native platform capabilities available to Open Web Apps. The Web APIs currently supported in the Simulator are:

+ +

Installing an app in the Simulator

+

To install a hosted app in the Simulator, type the URL to the app's manifest in the URL box, and click Add Manifest. This will install the app in the Simulator. Here is a simple weather app that you can use as a test:

+
http://jlongster.github.com/weatherme/manifest.webapp
+

The app's icon will be added to one of the home screens in the Simulator.

+

You can also install a plain website in the same way. Just type the website's URL in the box and click Add URL, and an icon for the site will be added to a home screen. Autocompletion works if you have the website open in another tab.

+

To install a packaged app in the Simulator, click the Add Directory button, then select the mini-manifest of the app on your local filesystem.

+

To remove an app from the Simulator, click the Remove link for the app in the dashboard. You may have to restart the Simulator to see it gone.

+

Updating an app

+

If you are working on an app and need to update it in the Simulator, click the app's Update button in the dashboard. You will have to restart the Simulator. Hosted apps follow the usual rules for Website caching and working with appcache.

+

Reporting bugs

+

Remember that the Simulator is a brand-new tool and is still heavily under development. Please let us know if you find any bugs.

+

More information

+

The Simulator itself is the Firefox OS desktop client (also called the B2G desktop client), which is a build of Firefox OS that runs on Windows, Mac, and Linux. Firefox OS Simulator makes it easier to test apps on Firefox OS desktop because it includes functionality for adding apps to the environment and is configured/extended in a variety of ways to better meet the needs of app developers.

+

However, because the Simulator uses the Firefox OS desktop client, the documentation for B2G Desktop, Gaia, and B2G generally will also apply to the Simulator to some extent. Here are a couple of those docs:

+

Using the Firefox OS desktop client

+

Hacking Gaia

diff --git a/files/es/archive/b2g_os/using_the_app_manager/index.html b/files/es/archive/b2g_os/using_the_app_manager/index.html new file mode 100644 index 0000000000..bd8b6e6427 --- /dev/null +++ b/files/es/archive/b2g_os/using_the_app_manager/index.html @@ -0,0 +1,179 @@ +--- +title: Usando el App Manager +slug: Archive/B2G_OS/Using_the_App_Manager +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +
+

El App Manager es una nueva herramienta disponible en Firefox para escritorio, que provee una cantidad de útiles herramientas para ayudarte a probar, desarrollar y depurar aplicaciones HTML5 en teléfonos Firefox OS y el Simulador de Firefox OS, directamente en tu navegador.

+
+

El App Manager se compone de:

+ +

Instalación rápida:

+

Esta seccion esta diseñada para conseguir la puesta en funcionamiento lo antes posible; si necesitas mas detalles por favor siga adelante con la sección Configuración del dispositivo y sistema y continue leyendo desde allí. Vea también la sección Solución de problemas para obtener ayuda si tiene algún problema.

+
    +
  1. Asegúrate de tener Firefox para escritorio 26+ instalado
    2. +
  2. Abre el App Manager (en la barra de direcciones, tipea about:app-manager)
    3. +
  3. Si no tienes un dispositivo real: +
      +
    1. Install the Firefox OS Simulator
      2. +
    2. En la barra inferior del App Manager, haz clic en Start Simulator, después haz clic en el nombre del simulador instalado, que debe aparecer ahí.
      3. +
    +
    4. +
  4. Si tienes un dispositivo real: +
      +
    1. Asegúrate que tu dispositivo está corriendo Firefox OS 1.2+
      2. +
    2. En Opciones de tu dispositivo, desactiva el Bloqueo de pantalla (Opciones > Bloqueo de pantalla) y activa Depuración remota (Opciones > Información del dispositivo > Más información > Desarrollador)
      3. +
    3. Instala el ADB Helper como complemento en tu Firefox de escritorio
      4. +
    4. Conecta tu dispositivo a tu máquina vía cable USB
      5. +
    5. El nombre de tu dispositivo debería aparecer en la barra inferior del App Manager. Haz clic en él.
      6. +
    +
    5. +
  5. En la barra inferior debe aparecer "Conectar con: xxx"
    6. +
  6. Haz  clic en el panel de Apps y añade una app (empaquetada y hospedada)
    7. +
  7. El botón Iniciar valida tu app y la instala en el simulador / dispositivo
    8. +
  8. El botón Depurar conecta las herramientas para desarrolladores con la app arrancada
    9. +
+

Configuración del dispositivo y el sistema

+

Lo primero que tendrá que hacer cuando se utiliza el App Manager es asegurarse de que su sistema y el teléfono están configurados correctamente. En esta sección se ejecutarán todos los pasos necesarios.

+

Se requiere Firefox OS 1.2+

+

Asegúrese de que su dispositivo se está ejecutando Firefox OS 1.2/Boot2Gecko 1.2 o superior. Para comprobar qué versión de Firefox OS del dispositivo está funcionando, vaya a Ajustes > Información > Software.

+

Si usted no tiene una versión lo suficientemente alta instalada, dependiendo del teléfono que tiene, necesitará ya sea instalar una construcción nocturna disponible de Firefox OS 1.2 superior, o configurar y construir por sí mismo desde la fuente.

+

Construcciones disponibles:

+ +

Para construir tu propia distribución de Firefox OS 1.2+, siga las instrucciones que se encuentran en Building and installing Firefox OS, iniciando con Firefox OS build prerequisites.

+

Depuración remota

+

A continuación, debe habilitar la depuración remota en Firefox OS. Para ello, vaya a Ajustes> Información> Más información> Desarrollador y active la casilla de depuración remota.

+

ADB o ADB helper

+

El proceso utiliza el puente de depuración Android (ADB) para manejar la conexión y comunicación entre el dispositivo y la computadora. Hay dos opciones para ejecutar ADB:

+ +
+

Nota: no es necesario ejecutar este comando si tienes instalado el complemento ADB Helper.

+
+

Conectando tu disporitivo al App Manager

+

Con toda la configuración hecha, ahora es el momento de conectar el dispositivo a tu ordenador e iniciar el App Manager:

+
    +
  1. Conecta el dispositivo a tu computadora via USB
    2. +
  2. Desactiva el bloqueo de pantalla en tu dispositivo, vaya a Ajustes> Pantalla y desmarque la casilla Bloquear la pantalla. Esta es una buena idea, porque cuando la pantalla se bloquea, la conexión del teléfono se pierde, lo que significa que ya no está disponible para la depuración.
    3. +
  3. Inicia el App Manager, en el Navegador Firefox de escritorio seleccione la opción de menú Herramientas > Desarrollo web > App Manager, o escriba about:app-manager in la barra de direcciones.
    4. +
  4. En la parte inferior del App Manager, verás una barra de estado de conexión (vea la imagen de abajo). Usted debe ser capaz de conectar el dispositivo, haga clic en el botón "Connect to localhost: 6000".
    5. +
  5. Si esto funciona correctamente, un mensaje deberá aparecer en el dispositivo: "An incoming request to permit remote debugging connection was detected. Allow connection?". Pulsa el botón OK (También puede que tengas que pulsar el botón de encendido del teléfono para que pueda ver el mensaje.) La barra de estado de la conexión debe decir "Connected to B2G", con un botón Desconectar disponible para presionar si quieres cancelar la conexión.
    6. +
+

+
+

Tenga en cuenta que los otros controles en la barra de estado de la conexión permiten conectar un simulador para el Administrador de la aplicación, lo que vamos a cubrir en la siguiente sección, a continuación, y cambiar el puerto que la conexión pasa sucesivamente. Si cambia el puerto, también será necesario que habilite el reenvío de puertos para este puerto, así, como se indica en la sección ADB o ADB Helper.

+
+

Usar el complemento Firefox OS Simulator

+

Si no tienes un dispositivo real disponible para usar con el App Manager, puedes probarlo utilizando un el complemento Firefox OS Simulator. Para empezar, instala el simulador apropiado para su sistema operativo:

+

Install Simulator

+

Una vez que hayas instalado el simulador, tienes que ir a la barra de estado de la conexión en la parte inferior del App Manager, y haga clic en el botón "Start simulator". Aparecerán tres botones:

+ +

Panel de aplicaciones

+

 

+

Ahora que todo funciona, vamos a revisar la funcionalidad disponible dentro de la App Manager, empezando por el Panel de aplicaciones. A partir de aquí, puede importar una aplicación existente para instalar en su dispositivo y depurarlo:

+ +

La información sobre su aplicación debe aparecer en la parte derecha de la ventana, como se ve a continuación:

+

+

Editor del Manifiesto

+

Desde Firefox 28 en adelante, el panel de aplicaciones incluye un editor para el manifiesto de la aplicación:

+

+

Depuración

+

Al hacer clic en "Update" actualizará (o instalará) la aplicación en el dispositivo. Al hacer clic en "debug" se conectará una caja de herramientas de la aplicación, lo que le permite depurar su código directamente:

+

+
+

Nota: podrás disfrutar jugando con la caja de herramientas - intenta alterar el DOM, CSS, etc y verás los cambios reflejados en el dispositivo en tiempo real. Tales cambios se guardarán en el código de la aplicación instalada, las verás la próxima vez que abras la aplicación en el dispositivo.

+
+

Antes de Firefox 28, las herramientas se ponen en marcha en una ventana separada. Desde Firefox 28 en adelante, las herramientas se inician en una ficha independiente en la propia App Manager, junto con las aplicaciones y las fichas de dispositivos. La ficha tendrá el icono de la aplicación, así que es fácil de encontrar:

+

+

Errores

+

Si una aplicación no se ha añadido con éxito - por ejemplo, si la URL es incorrecta, o se ha seleccionado una carpeta aplicación empaquetada - una entrada se agrega a la página de esta aplicación, pero esto va a incluir información de errores.

+

+

También puedes eliminar una aplicación desde esta vista, el ratón encima del nombre/Descripción de la App en la izquierda de la ventana, y pulsando el botón "X" que aparece en cada caso. Sin embargo, esto no elimina la aplicación del dispositivo. Para ello es necesario eliminar manualmente la aplicación utilizando el propio dispositivo.

+

Panel del Dispositivo

+

La ficha de dispositivos muestra información sobre el dispositivo conectado. Desde la ventana "Aplicaciones instaladas", las aplicaciones en el dispositivo se pueden iniciar y depurar.

+

+
+

Nota: las aplicaciones certificadas no están listadas por defecto. Vea como depurar aplicaciones certificadas.

+
+

La ventana "Permissions" muestra los privilegios requeridos por las diferentes Web APIs en el dispositivo actual:

+

+

Finalmente, puedes tomar una captura de pantalla del dispositivo haciendo click en el botón "Screenshot". la imagen aparecerá en una nueva pestaña en Firefox, y desde allí podrás guardarla o descartarla si es tu elección.

+

Depurar aplicaciones certificadas

+

Actualmente, sólo los dispositivos que ejecutan una versión de desarrollo de Firefox OS 1.2 son capaces de depurar aplicaciones certificadas. Si tienes una versión en desarrollo, puede habilitar la depuración de aplicaciones certificadas por el cambio de las prefe-certificada devtools.debugger.forbid-apps en false en tu perfil. Para ello, siga los pasos a continuación:

+
    +
  1. +

    En tu computadora, ingresa el siguiente comando en el terminal para entrar al sistema de archivos de tu dispositivo via consola:

    + 
    adb shell
    +

    tu consola debe cambiar a root@android.

    +
    2. +
  2. +

    A continuación, detener B2G corriendo el siguiente comando:

    + 
    stop b2g
    +
    3. +
  3. +

    Navega al siguiente directorio:

    + 
    cd /data/b2g/mozilla/*.default/
    +
    4. +
  4. +

    Aquí, actualiza el archivo pref.js con la siguiente linea:

    + 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    5. +
  5. +

    Después de que termines de editar y salvar el archivo, inicia B2G usando el siguiente comando:

    + 
    start b2g
    +
    6. +
  6. +

    Sal del sistema de archivos del dispositivo cuando el comando exit; con esto regresarás a tu terminal normal.

    +
    7. +
  7. +

    Ahora reconecta el App Manager y deberías poder ver las aplicaciones certificadas para su depuración.

    +
    8. +
+
+

Nota: Si deseas agregar esta preferencia a tu construcción de Gaia puedes correr el comando make DEVICE_DEBUG=1 reset-gaia.

+
+

Solución de problemas

+

Si el dispositivo no es renonocido:

+ +

¿No puedes conectar tu dispositivo al App Manager o iniciar el simulador?  Háganos saber o abra un bug.

diff --git a/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html b/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html new file mode 100644 index 0000000000..a914e72083 --- /dev/null +++ b/files/es/archive/b2g_os/ux/building_blocks/action_menu/coding/index.html @@ -0,0 +1,80 @@ +--- +title: 'Coding guide: Action menus' +slug: Archive/B2G_OS/UX/Building_blocks/Action_menu/Coding +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu/Coding +--- +

Here you can find examples of how to create action menus on Firefox OS, as well as downloads for the CSS and image resources used by the built-in apps on Firefox OS. You can copy these resources into your app and make use of them to build apps that match these apps' appearances.

+ +
+

Note: Object menus are implemented using the same code; the only difference is that you never use a title in an object menu.

+
+ +

Implementing action menus

+ +

To implement an action menu using the style shown here, place the CSS and media files into your app and then import the CSS using the {{cssxref("@import")}} at-rule:

+ +
@import url(resources/action_menu.css);
+ +

Make sure the media files are in the location expected by the CSS (either by placing them in a corresponding location or by revising the CSS).

+ +

Examples

+ +

With title

+ +

HTML to create the menu

+ +

The HTML below creates the dialog with four buttons, one of which is disabled.

+ +
<form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu">
+  <header id="sample-title"> Title </header> <!-- this header is optional -->
+  <menu>
+    <button id="button1"> Action 1 </button>
+    <button id="button2" disabled> Action 2 (disabled) </button>
+    <button id="button3"> Action 3 </button>
+    <button id="cancel"> Cancel </button>
+  </menu>
+</form>
+
+ +

JavaScript content

+ +

The JavaScript below simply adds code to some of the buttons to change the title of the dialog when clicked.

+ +
var btn = document.querySelector("#button1");
+btn.addEventListener("click", function() {
+  var title = document.getElementById("sample-title");
+  title.innerHTML="Button 1";
+});
+
+var btn = document.querySelector("#button3");
+btn.addEventListener("click", function() {
+  var title = document.getElementById("sample-title");
+  title.innerHTML="Button 3";
+});
+
+ +

Working demo

+ +

You can try out the action menu in this live demonstration.

+ +

Without title

+ +

HTML to create the menu

+ +

The HTML below creates the dialog with four buttons, one of which is disabled.

+ +
<form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu">
+  <menu>
+    <button id="button1"> Action 1 </button>
+    <button id="button2" disabled> Action 2 (disabled) </button>
+    <button id="button3"> Action 3 </button>
+    <button id="cancel"> Cancel </button>
+  </menu>
+</form>
+
+ +

Working demo

+ +

You can try out the action menu in this live demonstration.

+ +

 

diff --git a/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html b/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html new file mode 100644 index 0000000000..e4263d2d1a --- /dev/null +++ b/files/es/archive/b2g_os/ux/building_blocks/action_menu/index.html @@ -0,0 +1,46 @@ +--- +title: Menú de acciones +slug: Archive/B2G_OS/UX/Building_blocks/Action_menu +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu +--- +

Un menú de acciones, como indica su nombre, muestra un listado de acciones, relativas al contenido de la aplicación, a traves del cual el usuario puede elegir qué hacer. Visita la Guía de código para saber cómo implementar un menú de acciones en tu aplicación.

+

Caracteristicas

+ +

Visuales

+ + + + + + + +
+

Estado de reposo

+

+

El boton de acciones abierto, esperando a que el usuario presione una seleccion.

+ 		+

Estado pulsado

+

+

Aspecto del menu mientras el dedo del usuario presiona la "Opcion 03".

+
+

Variaciones

+

Existen dos variaciones basicas en el menu de acciones: que el menu tenga o no una cadena de titulo en la parte superior.

+

+

Interaccion

+

El diagrama muestra como trabaja el flujo de interaccion del ususario con el menu de acciones.

+

+

Ver tambien

+ diff --git a/files/es/archive/b2g_os/ux/building_blocks/button/index.html b/files/es/archive/b2g_os/ux/building_blocks/button/index.html new file mode 100644 index 0000000000..a2e0612620 --- /dev/null +++ b/files/es/archive/b2g_os/ux/building_blocks/button/index.html @@ -0,0 +1,231 @@ +--- +title: Botón +slug: Archive/B2G_OS/UX/Building_blocks/Button +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button +--- +

Realiza una acción cuando es pulsado por el usuario. Son objetos de interfaz de usuario que tienen una amplia variedad de estilos. Consulta la Guía de codificación para informarte sobre cómo implementar botones con un aspecto como los que aquí se describen.

+

Características

+ +

Hay multiples tipo de botones:

+
+
+ Botones de acción
+
+ Se utilizan cuando solo hay unas pocas acciones y no es necesaria una lista. La acción principal del botón utiliza un color especial resatado para indicar que es la opción principal.
+
+ Botones de lista
+
+ Se utilizan para mostrar una lista de acciones,  o para activar la presentación de un valor de selección.
+
+ Botones de campo de entrada
+
+ Se utilizan para llevar a cabo acciones con campos de entrada.
+
+ Botones especiales/pesonalizados
+
+ Se utilizan para proporcionar acciones específicas incluyendo grabar, llamar y similares.
+
+

Visualización

+

Aquí hay varios ejemplos visuales de cómo deberían verse los botones. No olvides que puedes usar la hoja de estilos y los recursos de imágenes proporcionados en la Guía de codificación para implementarlos.

+

Botones de acción

+

Se utilizan cuando solo hay unas pocas acciones y no es necesaria una lista. La acción principal del botón utiliza un color especial resatado para indicar que es la opción principal.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Acción principalAcción secundariaBorrar
Normal
Presionado
Deshabilitado
+

Sobre fondo oscuro, los botones deshabilitados tienen un aspecto especial, como se ve abajo.

+ + + + + + + + + + + + + + + +
 Acción principalAcción secundaria
Disabled
+

Botones de lista

+

Se utilizan para mostrar una lista de acciones,  o para activar la presentación de un valor de selección.

+

Desencadenar acciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Desecadenar una acción en la vista actualDesencadenar una acción en una nueva vistaMostrar un selector de valores
Normal
Presionado
Deshabilitado
+

Selección de valores

+

Una vez que se abre un selector de valores, necesitarás al menos un botón en el panel de selección de valores para descartar el valor seleccionado. Estos botones deberían tener el siguiente aspecto:

+ + + + + + + + + + + + + + + +
NormalPresionadoDeshabilitado
+

Botones de campos de entrada

+

Los botones de campos de entrada son botones asociados a un campo de entrada, que cuando se presionan, llevan a cabo una acción relacionada con ese campo de entrada.

+ + + + + + + + + + + + + + + +
NormalPresionadoDeshabilitado
+

Botones especiales

+

Los botones especiales son botones visuales al estilo icono que se utilizan para propósitos especiales, tales como operar con la cámara del dispositivo, contestar o colgar el teléfono y activar el teclado de llamada. Por supuesto puedes encontrar otras utilidades a estos botones especiales.

+

Botones de cámara

+

Estos botones no tienen estado deshabilitado; simplemente no los muestras si la ocpión de tomar fotos no está disponible.

+ + + + + + + + + + + + + + + + + + + + + + + +
 Grabar videoDetener grabación videoTomar foto
Normal
Presionado
+

Botones de teléfono

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
 DescolgarColgarOcultar teclado
Normal
Presionado
Deshabilitado
+

Botones personalizados

+

Estos son ejemplos de botones personalizados; en este caso, para añadir un contacto.

+ + + + + + + + + + + + + + + +
Normal
Presionado
Deshabilitado
+

Ver también

+ diff --git a/files/es/archive/b2g_os/ux/building_blocks/index.html b/files/es/archive/b2g_os/ux/building_blocks/index.html new file mode 100644 index 0000000000..33fc3c8a70 --- /dev/null +++ b/files/es/archive/b2g_os/ux/building_blocks/index.html @@ -0,0 +1,268 @@ +--- +title: Componentes básicos de UX de Firefox OS +slug: Archive/B2G_OS/UX/Building_blocks +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x +--- +

Aquí encontrarás una descripción de los elementos de la interfaz de usuario comunes en las aplicaciones de Firefox  OS, además de ejemplos de cómo debe verse y funcionar.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Menú de acciones

+
+


+  Detalles
+ Guía del programador

+ 		+

 

+
+

Botón

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Confirmación

+
+

+ +

Detalles
+ Guía del programador
+  

+ 		+

 

+
+

Filtro

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Cabecera

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Área de entrada

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Lista

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Menú de objetos

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Indicador de progreso y actividad

+
+

+ +

Detalles
+ Guía del prgramador

+ 		+

 

+
+

Desplazamiento por letras

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Barra de búsqueda

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Estado

+
+


+ Detalles
+ Guía del programador

+ 		+

 

+
+

Interruptor

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Pestañas

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Barra de herramientas

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+

Selector de valor

+
+

+ +

Detalles
+ Guía del programador

+ 		+

 

+
+ +

 

diff --git a/files/es/archive/b2g_os/ux/guia_estilo/index.html b/files/es/archive/b2g_os/ux/guia_estilo/index.html new file mode 100644 index 0000000000..5a205c7bdf --- /dev/null +++ b/files/es/archive/b2g_os/ux/guia_estilo/index.html @@ -0,0 +1,62 @@ +--- +title: Guía de estilo de Firefox OS +slug: Archive/B2G_OS/UX/Guia_estilo +translation_of: Archive/B2G_OS/Firefox_OS_apps/Copy_styleguide +--- +

Hemos puesto a su disposición elementos de diseño visual, incluyendo componentes básicos, plantillas, fondos de pantalla y más, que puede descargarlos desde nuestra colección de elementos.

+

Iconos para aplicaciones

+

¿Necesita ayuda para crear un icono para su aplicación? Échele un vistazo a nuestras pautas y plantillas.

+

Tono de voz del texto

+

Títulos

+ +

Botones

+ +

Listas de selector de valores

+ +

Mejores prácticas generales

+ +

Formularios

+ +

Términos específicos

+ +

Cómo mostrar unidades de tamaños de archivo

+ +

Véase también

+ diff --git a/files/es/archive/b2g_os/web_telephony_api/index.html b/files/es/archive/b2g_os/web_telephony_api/index.html new file mode 100644 index 0000000000..149350095e --- /dev/null +++ b/files/es/archive/b2g_os/web_telephony_api/index.html @@ -0,0 +1,28 @@ +--- +title: Web Telephony API +slug: Archive/B2G_OS/Web_Telephony_API +tags: + - NeedsTranslation + - Phone + - Telephony + - TopicStub + - Voice + - WebAPI +translation_of: Archive/B2G_OS/Web_Telephony_API +--- +

WebTelephony is an API that makes it possible for web content to handle voice phone calls from JavaScript code.

+

The API is available using window.navigator.mozTelephony. See below for a full list of interfaces:

+

DOM interfaces

+ +

Sample code and introduction

+
+
+

See also

+ diff --git a/files/es/archive/b2g_os/web_telephony_api/introduccion_a_la_webtelephony/index.html b/files/es/archive/b2g_os/web_telephony_api/introduccion_a_la_webtelephony/index.html new file mode 100644 index 0000000000..1b7eb653f8 --- /dev/null +++ b/files/es/archive/b2g_os/web_telephony_api/introduccion_a_la_webtelephony/index.html @@ -0,0 +1,64 @@ +--- +title: Introducción a la WebTelephony +slug: Archive/B2G_OS/Web_Telephony_API/Introduccion_a_la_WebTelephony +translation_of: Archive/B2G_OS/Web_Telephony_API/Using_the_Web_Telephony_API +--- +

La base de acceder a la funcionalidad del teléfono es simplemente a través de navigator.mozTelephony, que es parte de la WebTelephony API. Una vez que tenga una referencia a ese objeto se puede empezar a hacer y de recibir llamadas. Aquí hay algunos ejemplos:

+
// Objeto telephony
+var tel = navigator.mozTelephony;
+
+// Comprueba si el teléfono está silenciado (propiedad de lectura/escritura)
+console.log(tel.muted);
+
+// Comprueba si el altavoz está activado (propiedad de lectura/escritura)
+console.log(tel.speakerEnabled);
+
+// Realizar una llamada
+var call = tel.dial("123456789");
+
+// Eventos para esa llamada
+call.onstatechange = function (event) {
+    /*
+        Valores posibles del estado:
+        "dialing", "ringing", "busy", "connecting", "connected",
+        "disconnecting", "disconnected", "incoming"
+    */
+    console.log(event.state);
+};
+
+// Opciones anteriores como eventos directos
+
+      // Conectar llamada
+       call.onconnected = function ();
+
+      // Desconectar llamada
+      call.ondisconnected = function ();
+
+      // Resivir una llamada
+      tel.onincoming = function (event) {
+      var incomingCall = event.call;
+
+    // Obtener el número de la llamada entrante
+    console.log(incomingCall.number);
+
+    // Responder a la llamada
+    incomingCall.answer();
+};
+
+// Desconectar llamada
+call.hangUp();
+
+
+// Iteración sobre las llamadas, y la adopción de medidas en función de su estado de cambiado
+tel.oncallschanged = function (event) {
+    tel.calls.forEach(function (call) {
+        // Registrar el estado de cada llamada
+        console.log(call.state);
+    });
+};
+
+

Ver también

+ diff --git a/files/es/archive/css3/index.html b/files/es/archive/css3/index.html new file mode 100644 index 0000000000..492e22e423 --- /dev/null +++ b/files/es/archive/css3/index.html @@ -0,0 +1,822 @@ +--- +title: CSS3 +slug: Archive/CSS3 +translation_of: Archive/CSS3 +--- +

CSS3 es la última evolución del lenguaje de las Hojas de Estilo en Cascada (Cascading Style Sheets), y pretende ampliar la versión CSS2.1. Trae consigo muchas novedades altamente esperadas , como las esquinas redondeadas, sombras, gradientes , transiciones o animaciones, y nuevos layouts como multi-columnas, cajas flexibles o maquetas de diseño en cuadrícula (grid layouts).

+ +

Las partes experimentales son particulares para cada navegador y deberían ser evitadas en entornos de producción, o usadas con extrema precaución, ya que tanto la sintaxis como la semántica pueden cambiar en el futuro.

+ +

Los módulos y el proceso de estandarización

+ +

El Nivel 2 de CSS necesitó 9 años, desde Agosto de 2002 hasta Junio de 2011, para alcanzar el estado de Recomendación. Esto fué debido al hecho de que algunas características secundarias fueron retiradas de las especificaciones globales, con el fin de acelerar la normalización de las características no problemáticas, el Grupo de Trabajo CSS de la W3C, en una decisión referida como la doctrina Beijing  dividió CSS en componentes más pequeños llamados módulos cada uno de estos módulos es ahora una parte independiente del lenguaje y se dirije a la estandarización a su propio ritmo mientras algunos módulos son ya recomendados de la W3C, otros todavía son borradores iniciales tambíen se añaden nuevos módulos cuando se identifican nuevas necesidades.

+ +

CSS Modules and Snapshots as defined since CSS3

+ +

Formalmente, no existe un estandar de CSS3 por sí solo cada módulo es estandarizado independientemente, por lo que el estandar CSS consiste en CSS2.1 modificado y extendido por módulos terminados, no necesariamente todos con el mismo nivel numérico por tanto, puede ser definido un panorama del CSS estandar listando (enumerando) CSS2.1 y los módulos maduros.

+ +

El consorcio W3 publica periodicamente ciertos snapshots(imágenes), como en 2007 o 2010.

+ +

Aunque hoy en día ningún módulo con nivel mayor al 3 es estandarizado, esto cambiará en el futuro. Algunos módulos, como Selectors 4 o CSS Borders y Backgrounds nivel 4 tienen ya un borrador de edición pese a que aún  no tienen un estatus de primer borrador de trabajo.

+ +

Estado de los módulos CSS

+ +

Módulos estables

+ +

Unos pocos módulos CSS son lo suficientemente estables y han alcanzado uno de los tres niveles de recomendación de CSSWG: Candidato (Candidate), Recomendación (Recommendation), Recomendación propuesta o Recomendación  (Proposed Recommendation or Recommendation). Estos puden ser usados sin un prefijo y son muy estables aunque algunas características aun pueden ser eliminadas de la etapa de Candidate Recommendation.

+ +

Estos módulos extienden y mejoran la especificación CSS2.1 la cual construye el núcleo de la especificación. Juntos, son el snapshot actual de la especificación CSS.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Colors", "", "") }}{{ Spec2("CSS3 Colors") }} desde el 7 de Junio de 2011
+

Agrega la propiedad {{ cssxref("opacity") }} y las funciones hsl(), hsla(), rgba() and rgb() para crear los valores {{cssxref("<color>")}}. También define la palabra clave currentColor como un color válido.

+ +

Ahora el color transparente es un color real (gracias al soporte para el canal alpha) y es un alias para rgba(0,0,0,0.0) .

+ +

Deja obsoleto las keyworks del sistema de colores (system-color) las cuales ya no deberían ser usadas en ambientes de producción.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Selectors", "", "") }}{{ Spec2("CSS3 Selectors") }} desde el 29 de Septiembre de 2011
+

Agrega:

+ +
    +
  • Atributo substring selector de igualdad, E[attribute^="value"] , E[attribute$="value"] , E[attribute*="value"] .
    • +
  • Nuevas pseudo-clases: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} y {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} y {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} y {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} y {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} y {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, y {{ cssxref(":not") }}.
    • +
  • Los Pseudo-elementos ahora son caracterizados por un par de dos puntos en vez de sólo uno: :after ahora es {{ cssxref("::after") }}, :before ahora es {{ cssxref("::before") }}, :first-letter ahora es {{ cssxref("::first-letter") }}, y :first-line ahora es {{ cssxref("::first-line") }}.
    • +
  • El nuevo combinador general de hermanos (general sibling combinator) ( h1~pre ).
    • +
+
+ +

La siguiente iteración de la especificación de Selectores ya está en progreso, aunque aún no ha alcanzado el estado de primer borrador público de trabajo.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Namespaces", "", "") }}{{ Spec2("CSS3 Namespaces") }} desde el 29 de Septiembre de 2011
+

Añade soporte para los nombres de espacio XML (namespaces) definiendo la noción de nombre CSS cualificado (CSS qualified name), usando la sintaxis ' | ' y agregando la regla CSS {{ cssxref("@namespace") }}.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Media Queries", "", "") }}{{ Spec2("CSS3 Media Queries") }} desde el 19 de Junio de 2012
+

Extiende los tipos anteriores de media ( print, screen, … ) a un lenguaje completo permitiendo queries sobre las capacidades de  media del dispositivo como only screen y color.

+ +

Los Media queries no sólo son usado en documentos CSS sino también en algunos atributos de elementos HTML, como el atributo {{ htmlattrxref("media","link") }} del elemento {{ HTMLElement("link") }}.

+
+ +

La siguiente generación de esta especificación está en progreso, permitiendo adaptar un sitio Web con respecto a los métodos de entrada disponibles en el agente del usuario con las nuevas características media como hover o pointer. También está propuesta la detección de soporte EcmaScript usando media script.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Style", "", "") }}{{ Spec2("CSS3 Style") }} desde el 7 de Noviembre de 2013
+

Define formalmente la sintaxis del contenido del atributo global style de HTML.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Backgrounds", "", "") }}{{ Spec2("CSS3 Backgrounds") }}
+

Agrega:

+ +
    +
  • Soporte en fondos para cualquier tipo de {{cssxref("<image>")}} y no solo las uri() definidas.
    • +
  • Soporte para multiples imágenes de fondo.
    • +
  • Los valores {{ cssxref("background-repeat") }} space y round, y para la sintaxis de dos-valores de esta propiedad CSS.
    • +
  • El valor local de {{ cssxref("background-attachment") }}.
    • +
  • Las propiedades CSS de {{ cssxref("background-origin") }}, {{ cssxref("background-size") }} y {{ cssxref("background-clip") }}.
    • +
  • Soporte para border curvos con las propiedades CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, y {{ cssxref("border-bottom-right-radius") }}.
    • +
  • Soporte para el uso de una {{cssxref("<image>")}} como borde con las propiedades CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, y {{ cssxref("border-image-repeat") }}.
    • +
  • Soporte para sombras de elemento con la propiedad CSS {{ cssxref("box-shadow") }}.
    • +
+ +

 

+
+ +

El CSS4 Iteración de fondos y Especificación de bordes ya está en progreso; aunque aún no ha alcanzado el estado del Primer Borrador de Trabajo Público, este planea agregar la característica de acortar los bordes (en el  CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, y {{ cssxref("border-clip-left") }} propiedades) o controlar la forma del borde en una esquina (usandopropiedad CSS {{ cssxref("border-corner-shape") }}).

+ + + + + + + + + + + +
{{ SpecName("CSS3 Multicol", "", "") }}{{ Spec2("CSS3 Multicol") }}
Se agrega soporte para el diseño fácil de multi-columnas usando CSS {{ cssxref("columns") }}, {{ cssxref("column-count") }}, {{ cssxref("column-fill") }}, {{ cssxref("column-gap") }}, {{ cssxref("column-rule") }}, {{ cssxref("column-rule-color") }}, {{ cssxref("column-rule-style") }}, {{ cssxref("column-rule-width") }}, {{ cssxref("column-span") }}, {{ cssxref("column-width") }}, {{ cssxref("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Speech", "", "") }}{{ Spec2("CSS3 Speech") }}
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Images", "", "") }}{{ Spec2("CSS3 Images") }}
+

Se define el tipo de dato {{cssxref("<image>")}}.

+ +

Se extiende la sintaxis  de url() para dar soporte a cortes de imágenes usando media fragments.

+ +

Agregados:

+ +
    +
  • La unidad dppx al tipo de dato {{cssxref("<resolution>")}}.
    • +
  • La función image() como una alternativa más flexible a  url() para definir una imagen desde una URL.
    + Un riesgo : Dado el insuficiente soporte por los navegadores, la estandarización de la función image() debe ser postergada a la siguiente iteración de este módulo .
    • +
  • Soporte para linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
    • +
  • La capacidad de definir cómo reemplazar el elemento que encaja en sus elementos, usando al propiedad CSS {{ cssxref("object-fit") }}.
    + Un riesgo : Dado el insuficiente soporte por los navegadores, la estandarización de  {{ cssxref("object-fit") }} y propiedad debe ser posterga a la siguiente iteración de este módulo.
    • +
  • La capacidad de sobreescribir la resolución y la orientacion de una imagen externa usando el CSS {{ cssxref("image-resolution") }} y {{ cssxref("image-orientation") }} .
    + RIESGO : debido al bajo soporte de los navegadores, la estandarización de {{ cssxref("image-resolution") }} y {{ cssxref("image-orientation") }} podría posponerse para la próxima iteración
    • +
+
+ +

The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Values", "", "") }}{{ Spec2("CSS3 Values") }}
+

Makes initial and inherit keywords usable on any CSS property.

+ +

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

+ +

Adds:

+ +
    +
  • Definition for new font-relative length units: rem and ch .
    • +
  • Definition for viewport-relative length units: vw, vh, vmax, and vmin .
    • +
  • Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
    • +
  • Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.
    • +
  • Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{ cssxref("<position>") }}.
    • +
  • Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and toggle() functional notations.
    + At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.
    • +
+
+ +

Several types definition, like <ident> and <custom-ident>, have been deferred to CSS Values and Units Module Level 4.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Flexbox", "", "") }}{{ Spec2("CSS3 Flexbox") }}
Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Conditional", "", "") }}{{ Spec2("CSS3 Conditional") }}
Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text-decoration", "", "") }}{{ Spec2("CSS3 Text-decoration") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.
    • +
+ +

Adds:

+ +
    +
  • Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.
    • +
  • Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.
    • +
+ +

Precises:

+ +
    +
  • The paint order of the decorations.
    • +
+ +

At risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fonts", "", "") }}{{ Spec2("CSS3 Fonts") }}
+

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

+ +

Adds:

+ +
    +
  • Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.
    • +
  • The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.
    • +
  • The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.
    • +
  • The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.
    • +
  • The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.
    • +
  • The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-features-values") }} at-rule.
    • +
  • The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Syntax", "", "") }}{{ Spec2("CSS3 Syntax") }}
Precises how charsets are determined; minor changes in parsing and tokenization algorithms.
+ +

Modules in the refining phase

+ +

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Basic UI", "", "") }}{{ Spec2("CSS3 Basic UI") }}
+

Adds:

+ +
    +
  • The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.
    + At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
    • +
  • Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.
    + At risk: due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to the next iteration of this module .
    • +
  • Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new icon value of the CSS {{ cssxref("content") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the icon value may be postponed to CSS4.
    • +
  • Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.
    • +
  • Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.
    • +
  • Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.
    + At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to the next iteration of this module .
    • +
  • The ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the {{ cssxref("cursor") }} property.
    • +
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.
    + At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
    • +
  • The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to the next iteration of this module .
    • +
+
+ +

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Transitions", "", "") }}{{ Spec2("CSS3 Transitions") }}
Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations") }}
Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Transforms", "", "") }}{{ Spec2("CSS3 Transforms") }}
+

Adds:

+ +
    +
  • the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
    • +
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: matrix 3d(), translate3d(), translateZ(),  scale3d(), scaleZ(), rotate3d(), rotateX() ,rotateY(), rotateZ(), and perspective().
    • +
+ +

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fragmentation", "", "") }}{{ Spec2("CSS3 Fragmentation") }}
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. +

Adds:

+ +
    +
  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text", "", "") }}{{ Spec2("CSS3 Text") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-transform") }} property with the value full-width.
    • +
  • the CSS {{ cssxref("text-align") }} property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
    • +
  • the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.
    • +
  • the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.
    • +
+ +

Adds:

+ +
    +
  • Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.
    • +
  • Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.
    • +
  • Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.
    • +
  • Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.
    • +
+
+ +

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

+ + + + + + + + + + + +
{{ SpecName("CSS3 Variables", "", "") }}{{ Spec2("CSS3 Variables") }}
Defines a mechanism allowing to define variables in CSS.
+ +

Modules in the revising phase

+ +

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntax are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Writing Modes", "", "") }}{{ Spec2("CSS3 Writing Modes") }}
Defines the writing modes of both horizontal and vertical scripts and precises how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.
+ +

Modules in the exploring phase

+ + + + + + + + + + + +
{{ SpecName("CSS4 Images", "", "") }}{{ Spec2("CSS4 Images") }}
+

Extends:

+ +
    +
  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
    • +
  • the {{ cssxref("image-orientation") }} property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.
    • +
+ +

Adds:

+ +
    +
  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
    • +
  • the element() functional notation allowing the use of part of the page as image.
    • +
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
    • +
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
    • +
  • the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Grid", "", "") }}{{ Spec2("CSS3 Grid") }}
Add a grid layout to the CSS display property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 GCPM", "", "") }}{{ Spec2("CSS3 GCPM") }}
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Exclusions and Shapes", "", "") }}{{ Spec2("CSS3 Exclusions and Shapes") }}
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Lists", "", "") }}{{ Spec2("CSS3 Lists") }}
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Regions", "", "") }}{{ Spec2("CSS3 Regions") }}
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("Filters 1.0", "", "") }}{{ Spec2("Filters 1.0") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Template", "", "") }}{{ Spec2("CSS3 Template") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Sizing", "", "") }}{{ Spec2("CSS3 Sizing") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Line Grid", "", "") }}{{ Spec2("CSS Line Grid") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Positioning", "", "") }}{{ Spec2("CSS3 Positioning") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Ruby", "", "") }}{{ Spec2("CSS3 Ruby") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSSOM", "", "") }}{{ Spec2("CSSOM") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Overflow", "", "") }}{{ Spec2("CSS3 Overflow") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Font Loading", "", "") }}{{ Spec2("CSS3 Font Loading") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Display", "", "") }}{{ Spec2("CSS3 Display") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Scope", "", "") }}{{ Spec2("CSS Scope") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS4 Media Queries", "", "") }}{{ Spec2("CSS4 Media Queries") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Non-element Selectors", "", "") }}{{ Spec2("CSS Non-element Selectors") }}
 
+ + + + + + + + + + + +
{{ SpecName("Geometry Interfaces", "", "") }}{{ Spec2("Geometry Interfaces") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Inline", "", "") }}{{ Spec2("CSS3 Inline") }}
 
+ +

Modules in the rewriting phase

+ +

Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Box", "", "") }}{{ Spec2("CSS3 Box") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Content", "", "") }}{{ Spec2("CSS3 Content") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Inline Layout", "", "") }}{{ Spec2("CSS3 Inline Layout") }}
 
+ +

 

diff --git "a/files/es/archive/est\303\241ndares_web/analizar_microformatos_en_javascript/index.html" "b/files/es/archive/est\303\241ndares_web/analizar_microformatos_en_javascript/index.html" new file mode 100644 index 0000000000..a187eb78c5 --- /dev/null +++ "b/files/es/archive/est\303\241ndares_web/analizar_microformatos_en_javascript/index.html" @@ -0,0 +1,201 @@ +--- +title: Analizar microformatos en JavaScript +slug: Archive/Estándares_Web/Analizar_microformatos_en_JavaScript +tags: + - Firefox 3 + - Microformats +translation_of: Archive/Web_Standards/Parsing_microformats_in_JavaScript +--- +

Firefox 3 introduces a new API for managing and parsing microformats. This article examines the generic microformat parsing API, which handles the heavy lifting of pulling data out of a microformat. This API is primarily intended to be used when implementing new microformats.

+ +

Methods

+ +

dateTimeGetter()

+ +

Specifically retrieves a date from a microformat node. After getting the text, it is normalized into an ISO 8601 date.

+ +
normalizedDate = Microformats.parser.dateTimeGetter(propnode, parentnode);
+
+ +
Parameters
+ +
+
propnode
+
The DOM node to check.
+
parentnode
+
The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.
+
+ +
Return value
+ +

A string containing the normalized date.

+ +

defaultGetter()

+ +

Uses the microformat patterns to decide what the correct text for a given microformat property is. This includes looking at thing such as abbr, img and alt, area and alt, and value excerpting.

+ +
propertyValue = Microformats.parser.defaultGetter(propnode, parentnode, datatype);
+
+ +
Parameters
+ +
+
propnode
+
The DOM node to check.
+
parentnode
+
The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.
+
datatype
+
"HTML" if the search should be done using innerHTML(), or "text" to use innerText(). The default is "text".
+
+ +
Return value
+ +

A string containing the property's value.

+ +

emailGetter()

+ +

Specifically retrieves an email address from a microformat node. This removes the subject if one is specified, as well as the mailto: prefix.

+ +
email = Microformats.parser.emailGetter(propnode, parentnode);
+
+ +
Parameters
+ +
+
propnode
+
The DOM node to check.
+
parentnode
+
The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.
+
+ +
Return value
+ +

A string containing the email address.

+ +

HTMLGetter()

+ +

Retrieves all the HTML from a particular DOM node.

+ +
html = Microformats.parser.HTMLGetter(propnode, parentnode);
+
+ +
Parameters
+ +
+
propnode
+
The DOM node to check.
+
parentnode
+
The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.
+
+ +
Return value
+ +

An object containing a function you can call to get the string and the HTML.

+ +

Nota: This doesn't return the HTML as a string, but an object with a few functions you can call to retrieve the HTML and do other tasks.

+ +

The functions you can call on the returned object are:

+ +
string = html.toString();
+
+ +

Returns a string using innerText().

+ +
string = html.toHTML();
+
+ +

Returns the node's HTML using innerHTML().

+ +
string = html.replace(a, b);
+
+ +

Returns a string in which all occurrences of a in the HTML are replaced with b.

+ +
string = html.match(a);
+
+ +

Performs the specified matching operation on the HTML and returns the result.

+ +

iso8601FromDate

+ +

Converts a JavaScript date object into an ISO 8601 formatted date.

+ +
isoDate = Microformats.parser.iso8601FromDate(date, punctuation)
+
+ +
Parameters
+ +
+
date
+
The JavaScript Date object to convert.
+
punctuation
+
true if the date should have "-" and "/" in it.
+
+ +
Return value
+ +

A string containing the ISO 8601 formatted date.

+ +

textGetter()

+ +

Retrieves all the text from a particular DOM node, including all tags. This calls defaultGetter() internally.

+ +
text = Microformats.parser.textGetter(propnode, parentnode);
+
+ +
Parameters
+ +
+
propnode
+
The DOM node to check.
+
parentnode
+
The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.
+
+ +
Return value
+ +

A string containing all the text from the specified microformat node, including the tags.

+ +

telGetter()

+ +

Specifically retrieves a telephone number from a microformat node. This handles the fact that telephone numbers use "value" as the name of one of their subproperties, but "value" is also used for value excerpting.

+ +
tel = Microformats.parser.telGetter(propnode, parentnode);
+
+ +
Parameters
+ +
+
propnode
+
The DOM node to check.
+
parentnode
+
The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.
+
+ +
Return value
+ +

A string containing the telephone number.

+ +

uriGetter()

+ +

Specifically retrieves a URI from a microformat node. This is done by looking at an href, img, object, or area to get the fully-qualified URI.

+ +
uri = Microformats.parser.uriGetter(propnode, parentnode);
+
+ +
Parameters
+ +
+
propnode
+
The DOM node to check.
+
parentnode
+
The property's parent node. If it is a subproperty, this is the parent property node. Otherwise this is the microformat node.
+
+ +
Return value
+ +

A string containing the fully-qualified URI.

+ +

See also

+ +

Using microformats, Describing microformats in JavaScript

diff --git "a/files/es/archive/est\303\241ndares_web/crear_microformatos_en_javascript/index.html" "b/files/es/archive/est\303\241ndares_web/crear_microformatos_en_javascript/index.html" new file mode 100644 index 0000000000..3fb594f13b --- /dev/null +++ "b/files/es/archive/est\303\241ndares_web/crear_microformatos_en_javascript/index.html" @@ -0,0 +1,111 @@ +--- +title: Crear microformatos en JavaScript +slug: Archive/Estándares_Web/Crear_microformatos_en_JavaScript +tags: + - Firefox 3 + - Microformats + - páginas_a_traducir +translation_of: Archive/Web_Standards/Describing_microformats_in_JavaScript +--- +

Los microformatos son descritos en JavaScript usando un formato de estructura estandarizada que tiene varios miembros estándar que describen el objeto.

+ +

Formato de definición de microformatos

+ +

La definición de microformatos debe contener las siguientes entradas:

+ +
+
mfVersion
+
Especifica el numero de versión del microformato API a la definición de la cual fue escrita. Para Firefox 3, este debe ser fijado a 0.8.
+
mfObject
+
El objeto JavaScript que implementa el microformato.
+
className
+
Una cadena especificando el nombre de las clase de microformato como es referenciada en HTML (class="className").
+
required
+
Un areglo indicando los nombres de todas las propiedades que deben ser especificadas. Este debe ser omitido si todas las propiedades son opcionales.
+
properties
+
Una estructura describiendo las propiedades del microformato.
+
+ +

Especificaciones de las propiedades

+ +

Cada propiedad en la estructura properties es especificada por su nombre, y debe incluir atributos adicionales si la propiedad lo requiere. Los atributos estándar son:

+ +
+
plural
+
Un valor booleano que, si  es true indica que la propiedad puede tener multiples valores. Si una propiedad es plural, este es retornado como un arreglo.
+
virtual
+
Un valor booleano que indica si la propiedad es virtual o no. Si esta es virtual, el metodo virtualGetter() sera llamado para intentar crear la propiedad si esta no existe.
+
virtualGetter
+
Una funcion que es creada para conseguir el valor de una propiedad virtual. Esta función es usada solo si virtual es true.
+
value
+
El valor por defecto de la propiedad.
+
subproperties
+
Es posible para una propiedad incluir en si misma mas propiedades; para hacer esto, se deben incluir en una estructura subproperties dentro de la propiedad.
+
dataType
+
El tipo de dato contenido por la propiedad. Los posibles valores son:
+
dateTime
+
Una fecha ISO
+
anyURI
+
Un URI
+
email
+
Una dirección de correo electrónico.
+
tel
+
Un numero de teléfono.
+
HTML
+
HTML incluyendo etiquetas.
+
float
+
Un numero de punto flotante.
+
microformat
+
Un microformato.
+
microformat_property
+
Una propiedad especifica dentro del microformato especificada por microformat.
+
custom
+
datos de aduana.
+
+ +

Un ejemplo simple

+ +

El microformato hCard para definir información de contactos hace uso del microformato adr para definir una dirección. el microformato adr es definido a continuación:

+ +
var adr_definition = {
+  mfVersion: 0.8,
+  mfObject: adr,
+  className: "adr",
+  properties: {
+    "type" : {
+      plural: true,
+      types: ["work", "home", "pref", "postal", "dom", "intl", "parcel"]
+    },
+    "post-office-box" : {
+    },
+    "street-address" : {
+      plural: true
+    },
+    "extended-address" : {
+    },
+    "locality" : {
+    },
+    "region" : {
+    },
+    "postal-code" : {
+    },
+    "country-name" : {
+    }
+  }
+};
+
+ +

Las propiedades aqui son absolutamente simples. La propiedad type indica el tipo de dirección representada por el objeto (trabajo, hogar, y asi sucesivamente). Desde que la propiedad plural sea true, multiples tipos pueden ser especificados. Esto permite a una dirección ser marcada como sea, por ejemplo, una dirección de trabajo para recibir paquetes.

+ +

La propiedad street-address es tambien plural. Esto permite que multiples líneas de información sean contenidas en el arreglo street-address.

+ +

El microformato esta registrado con el microformato API llamando Microformats.add(), como este:

+ +
Microformats.add("adr", adr_definition);
+
+ +

Nota:  Para ser claro: desde que el  microformato adr esta incluido por defecto en Firefox 3 y posteriores, usted no necesita agregarlo por si mismo si necesita usarlo.

+ +

Ver tambien

+ +

Using microformats, Parsing microformats in JavaScript

diff --git "a/files/es/archive/est\303\241ndares_web/index.html" "b/files/es/archive/est\303\241ndares_web/index.html" new file mode 100644 index 0000000000..2f6362a8af --- /dev/null +++ "b/files/es/archive/est\303\241ndares_web/index.html" @@ -0,0 +1,64 @@ +--- +title: Estándares Web +slug: Archive/Estándares_Web +tags: + - Estándares_Web +translation_of: Archive/Web_Standards +--- +

+

+
Estándares Web del W3C
+Una magnífica introducción al tema

Los estándares web se diseñan cuidadosamente para aportar las máximas ventajas al mayor número de usuarios, y aseguran la viabilidad a largo plazo de cualquier documento publicado en la Web. Diseñar y publicar con arreglo a estos estándares simplifica y reduce los costes de producción, Además, los sitios son accesibles a más gente, y a más tipos de dispositivos con acceso a Internet.[1]

La entidad encargada de crear, mantener y divulgar los estándares web es el W3C.

+
+

Documentación

+
Ventajas para los negocios del uso de estándares web +
Ser fiel a los estándares web, y dejar de lado las tecnologías propietarias puede contribuir a los objetivos comerciales de una compañía. +
+
El W3C de la A a la Z +
Documento cuyo objetivo principal es ofrecer una descripción breve y sencilla sobre las diferentes tecnologías del W3C, proporcionando así a los usuarios una mejor comprensión de las mismas. +
+
10 razones para usar los estándares +
Traducción del artículo sobre porqué aprender y usar estándares web +
+
¿Qué es el Consorcio World Wide Web? +
El W3C, en mil ocasiones habrás leido estas siglas, pero... ¿Qué hay detrás? +
+
Using Web Standards in your Web Pages (en) +
This article provides an overview of the process for upgrading the content of your web pages to conform to the W3C web standards. +
+

Ver Todos +

+		 +

Comunidad

+
  • En la comunidad Mozilla... +
+

+

+ +

Ver Todos +

+

Herramientas

+ + +

Ver Todos +

+

Temas relacionados

+
CSS, HTML, XML, Desarrollo Web +
+
+
+

Nota: 1
- The Web Standards Project +

Categorías +

Interwiki Language Links +


+

diff --git "a/files/es/archive/est\303\241ndares_web/preguntas_frecuentes_sobre_rdf_en_mozilla/index.html" "b/files/es/archive/est\303\241ndares_web/preguntas_frecuentes_sobre_rdf_en_mozilla/index.html" new file mode 100644 index 0000000000..cd499f080a --- /dev/null +++ "b/files/es/archive/est\303\241ndares_web/preguntas_frecuentes_sobre_rdf_en_mozilla/index.html" @@ -0,0 +1,446 @@ +--- +title: Preguntas frecuentes sobre RDF en Mozilla +slug: Archive/Estándares_Web/Preguntas_frecuentes_sobre_RDF_en_Mozilla +tags: + - RDF + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Archive/Web_Standards/RDF_in_Mozilla_FAQ +--- +

General

+ +

¿Por dónde empiezo?

+ +

RDF cumple dos objetivos primarios en Mozilla.

+ + + + + +

RDF en cincuenta palabras o menos es una rápida y muy buena descripción de qué hace RDF en Mozilla.

+ +

El documento RDF Arquitectura final describe con muchos más detalles como trabaja la conexión Mozilla y RDF, y da una explicación de los interfaces implicados.

+ +

Donde puedo encontrar información sobre Open Directory ("dmoz")?

+ +

Aquí no, desafortunadamente. Bien, aquí hay un poco... Debes empezar en http://www.dmoz.org/ para mas información acerca de Open Directory. El set de datos Open Directory está disponible como un, enorme, depósito RDF/XML. Describe miles de sitios Web que usan un mix de vocabulario de Dublin Core y de la "taxonomía" DMoz. Para más información mira sus páginas RDF, o los anuncios odp-rdf para actualizaciones relacionados con su formato de datos exacto. El sitio ChefMoz también esta disponible en RDF.

+ +

Si tienes problemas con los datos DMoz y ChefMoz, será mejor que contactes directamente esos proyectos. Pero si haces algo interesante con los contenidos (ej. cargando pedazos de los datos desde un sitio remoto hacia una interface de usuario XUL), no olvides hacerlo saber a las listas de mozilla-rdf y RDF Interest Group. Estas listas también estarán interesadas en herramientas para limpieza / re-procesamiento y almacenaje de datos DMoz. Para algunos directorios basados en ODP RDF puedes mirar las páginas de los sitios que usan ODP Data.

+ +

Qué es un datasource?

+ +

Generalmente, RDF puede ser visto desde dos puntos de vista: Como un gráfico con nodos y arcos, o como una sopa de declaraciones lógicas. Un datasource es un subgráfico (o coleccíon de declaraciones, dependiendo de tu punto de vista) que por alguna razón están recolectadas todas juntas. Los ejemplos de datasources que existen hoy en día son "marcadores de browser", "historial de navegación", "cuentas de correo IMAP", "servidores de noticia NNTP", y "archivos RDF/XML".

+ +

En Mozilla, las datasources pueden unirse usando composite data source. Es como superponer gráficos, o unir una colección de declaraciones ("microteorías"). Las declaraciones acerca de del mismo recurso RDF pueden ser mezcladas. Por ejemplo, "la última fecha de visita" de un sitio en particular proviene del historial de navegación, y el "atajo de teclado" que puedes usar para ese sitio proviene de los marcadores. Ambos datasources refieren al website a través del URL, esta es la "clave" que permite que el datasource sea mezclado con efectividad.

+ +

Para mas información acerca de como escribir un datasource por favor remitete a RDF Datasource How-To.

+ +

Cómo administra los datasource Mozilla?

+ +

El RDF service administra una tabla con todos los datasources cargados. A la tabla se le asigna una URI, que es algo asi como la URL del archivo RDF/XML, o una URI "especial" que empieza con rdf que hace referencia a un datasource Built-in.

+ +

Los datasources se pueden cargar a traves del servicio RDF, utilizando el método GetDataSource(). Si el argumento URI hace referencia a la URL de un archivo RDF/XML, entonces el servicio creará un datasource RDF. El datasource permanecerá "capturado" hasta que la última referencia al datasource sea liberada. Si el argumento URI hace referencia a un datasource Built-in, el servicio RDF utilizará el administrador de componentes XPCOM para cargar el componente cuya ContractID ha sido hecha utilizando la URI "especial" y el bien conocido prefijo@mozilla.org/rdf/datasource;1?name=.

+ +

Por ejemplo:

+ +

 

+ +
rdf:foo
+
+ +

que cargará:

+ +
@mozilla.org/rdf/datasource;1?name=foo
+
+ +

Igual que los datasources RDF/XML, un datasource que es respondida de esta manera, será "capturada" por el servicio RDF hasta que la última referencia es soltada.

+ +

Cómo creo datasources desde un archivo RDF/XML?

+ +

Puedes crear un datasource RDF/XML usando el método GetDataSource() del servicio RDF:

+ +
// Obten el servicio RDF
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// ...y desde allí, Obten el datasource. Aségurat de que el servidor web lo entregue como
+// text/xml (recomendado) o como text/rdf!
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// NOTA que  ds será cargado desincronizadamente, asi que los aciertos no serán
+// inmediatos
+
+ +

O puedes crear uno utilizando el administrador de componentes XPCOM directamente, Aquí hay un ejemplo.

+ +
// Crear un archivo RDF/XML usando el administrador de componentes XPCOM
+var ds =
+  Components
+  .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"]
+  .createInstance(Components.interfaces.nsIRDFDataSource);
+// La interface nsIRDFRemoteDataSource tiene las interfaces
+// que necesitamos para configurar el datasource.
+var remote =
+   ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+// Asegúrate de que el servidor entregue esto como text/xml (recomendado) o como text/rdf!
+remote.Init("http://www.mozilla.org/some-rdf-file.rdf");
+// Cárgalo! fijate que esto ocurrira desicronizadamente. Configura
+// aBlocking a true, podemos forzarlo pra que sea sincronizado pero
+// generalmente es una mala idea, porque se bloqueará tu interface de usuario!
+remote.Refresh(false);
+// NOTA queds será cargado desincronizadamente, los aciertos no
+// serán inmediatos
+
+ +

Si deseas que se cargue de forma sincronizada, deberías crearlo manualmente.

+ +

Cómo actualizo un datasource RDF/XML?

+ +

Puedes forzar un datasource RDF/XML (o cualquier datasource que soporte nsIRDFRemoteDataSource) utilizando el método Refresh()de nsIRDFRemoteDataSource. Refresh() tiene un solo parámetro que indica si te gustaría realizar la operacíon sincronizadamente ("blocking") o desincronizadamente ("non-blocking"). Nunca lo hagas sincronizadamente, a menos que sepas lo que estás haciendo, esta opción bloqueará la interfaz de usuario hasta que la carga sea completada.

+ +

Cómo sé si un datasource RDF/XML se cargó?

+ +

Es posible consultar la propiedad loaded utilizando la interfaz nsIRDFRemoteDataSource para determinar si el datasource está cargado o no.

+ +

 

+ +
// Obtén el servicio RDF
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// Obtén el datasource.
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// Ahora mira si se cargó o no...
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("El datasource ya está cargado!");
+}
+else {
+  alert("El datasource no se cargó, pero se está cargando ahora!");
+}
+
+ +

Digamos que el datasource no está cargado, y se está cargando desincronizadamente. Podríamos usar esta API y el setTimeout() de JavaScript para realizar un loop que chequee la propiedad loaded de forma continua. Sería malo no detectar una carga fallida, por ejemplo, que no hubiera ningun dato en le URL.

+ +

Por esta razón, hay una interfaz observadora que te permite espiar el progreso del datasource. El siguiente código ilustra como usarlo.

+ +

 

+ +
// Este es el objeto que observará el progreso de RDF/XML
+var Observer = {
+  onBeginLoad: function(aSink)
+    {},
+
+  onInterrupt: function(aSink)
+    {},
+
+  onResume: function(aSink)
+    {},
+
+  onEndLoad: function(aSink)
+    { alert("done!"); },
+
+  onError: function(aSink, aStatus, aErrorMsg)
+    { alert("error! " + aErrorMsg); }
+};
+// obtén el servicio RDF
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// Obtén el datasource.
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// ahora mira si se cargó o no...
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("El datasource ya está cargado!");
+}
+else {
+  alert("El datasource no se cargó, pero se está cargando  ahora!");
+  // los datasources RDF/XML son nsIRDFXMLSinks
+  var sink =
+    ds.QueryInterface(Components.interfaces.nsIRDFXMLSink);
+  // Adjunta el observador al  datasource
+  sink.addXMLSinkObserver(Observer);
+  // ahora serán llamados del métodos del  Observador como
+  // los progresos de carga.
+}
+
+ +


+ Nota que el observador permanecerá unido al datasource RDF/XML a menos que llamemos a XMLSinkObserver

+ +

Cómo accedo a la información de un datasource?

+ +

La interfaz nsIRDFDataSource es lo que te permitirá acceder y manipular las declaraciones en un datasource.

+ + + +

También puedes usar la interfaz RDF container para acceder a la información contenida en contenedores RDF.

+ +

Cómo cambio información en un datasource?

+ +

Usa "Assert" para agregar una declaración y "Unassert" para quitar una. Mira Mozilla RDF Back end Architecture

+ +
ds.Assert(homepage, FV_quality, value, true);
+ds.Unassert(homepage, FV_quality, value, true);
+
+ +

Cómo guardo los cambios en un datasource?

+ +

Se puede hacer QueryInterface a nsIRDFRemoteDataSource con un datasource. Esta interfaz tiene un método Flush() que re-escribe los contenidos de un datasource nuevamente hacia la URL desde donde fueron cargados. Usando un mecanismo de protocolo específico (ej. un file: URL simplemente escribe el archivo, un http: URL probablemente hará un HTTP-POST). Flush() sólo escribe el datasource si el contenido ha cambiado.

+ +

Cómo úno varios datasource para verlos cómo uno solo?

+ +

Utiliza nsIRDFCompositeDataSource. Esta interfaz proviene de nsIRDFDataSource. Implementar esta interfaz combinará las declaraciones de distintos datasources dentro de uno colectivo. Como la interfaz nsIRDFCompositeDataSource proviene de nsIRDFDataSource, puede ser llamada y modificada igual que un data source.

+ +

Cómo accedo a datasources "built-in"?

+ +

Un datasource buitl-in es un componente localmente-instalado que implementa nsIRDFDataSource. Por ejemplo, el servicio de marcadores. Primero, asegúrate de que eres capaz de acceder a un datasource haciendo click aquí. Hay grandes restricciones de seguridad para acceder a un datasource desde un XUL o JS "desconocido".

+ +

Como el datasource built-in es nada mas que un componente XPCOM, puedes acceder utilizando el componente administrador XPConnect.

+ +
// Usa el administrador de componentes para obtener los // marcadores
+var bookmarks =
+  Components.
+  classes["@mozilla.org/rdf/datasource;1?name=bookmarks"].
+  getService(Components.interfaces.nsIRDFDataSource);
+
+// Ahora haz algo con eso...
+if (bookmarks.HasAssertion(
+     RDF.GetResource("http://home.netscape.com/NC-rdf#BookmarksRoot"),
+     RDF.GetResource("http://home.netscape.com/NC-rdf#child"),
+     RDF.GetResource("http://home.netscape.com/NC-rdf#PersonalToolbarFolder"),
+     true) {
+  // ...
+}
+
+ +

Algunos datasources tienen ContractID "especiales" que hacen más fácil el acceso utilizando el método GetDataSource() de nsIRDFSerivce o el atributo datasource de una plantilla XUL. Estos ContractID son de:

+ +
@mozilla.org/rdf/datasource;1?name=name
+
+ +

Y son accesibles via GetDataSource y el atributo datasources usando rdf:name. Por ejemplo, el siguiente fragmento XUL muestra como colocar el servicio de marcadores dentro de una plantilla XUL.

+ +
<tree datasources="rdf:bookmarks">
+  ...
+</tree>
+
+ +

Cómo manipulo "contenedores" RDF?

+ +

Para manipular un "contenedor" RDF (un <rdf:SEq>, por ejemplo) puedes utilizar nsIRDFContainerUtils la cual puede ser llamada como un servicio a tráves del siguiente ContratID:

+ +
@mozilla.org/rdf/container-utils;1
+
+ +

Puedes usarlo para detectar si algo es un contenedor RDF utilizando IsSeq(), IsBag(), IsAlt(). Puedes "crear un recurso dentro de un contenedor", sino hubiera uno, utilizando MakeSeq(), MakeBag(), MakeAlt(). Estos métodos devuelven nsIRDFContainer que te permitirá hacer operaciones tipo-contenedor sin ensuciarte las manos.

+ +

Si tu datasource ya posee un objeto que es un contenedor RDF, puedes usar el objeto nsIRDFContainer con:

+ +
@mozilla.org/rdf/container;1
+
+ +

Utiliza COntractID y Init() con el datasource y el recurso como parámetros. Nota que esto fallará si el recurso todavia no es un contenedor.

+ +

Plantillas XUL

+ +

Las plantillas XUL se crean especificando un atributo datsource sobre un elemento en un documento XUL.

+ +

Hay dos "formas" de escribir plantillas XUL. La "simple", que es la mas comun en Mozilla, y la "extendida", que pertime mayor concordancia contra gráficos RDF. Mira también XUL:Template Guide (está ordenado de forma bizarra porque se intenta introducir primero la forma extendida, y luego la forma simple como una especie de simplificación de la forma extendida).

+ +

¿Qué puedo construir con una plantilla XUL?

+ +

Puedes construir cualquier clase de contenido usando una plantilla XUL. Puedes utilizar cualquier clase de etiqueta (incluso HTML o XML arbitrario) en la parte <action> de un <rule>.

+ +

Cuándo debo utilizar una plantilla XUL?

+ +

Una alternativa al uso de plantillas RDF y XUL es el uso de W3C DOM APIs, para crear y manipular modelos de contenido XUL (o HTML). Sin embargo, algunas veces suelen presentarse algunos incovenientes:

+ +
    +
  1. hay distintas </em>"vistas" de los datos</em>. Por ejemplo, Mozilla mail/news muestra la jerarquía de carpeta en la barra de herramientas, varios menues, y en algunas ventana de diálogo. Mejor que escribir tres pedazos de código JS (o C++) para construir los árboles DOM, uno para cada modelo de contenido, <menubutton>, <menu> y <tree>, seria que escribas tres sets compactos de reglas.
    2. +
  2. Los datos pueden cambiar. Por ejemplo un usuario de mail/news tal vez agregue o quite carpetas IMAP (nota como estos requerimientos complican la construcción de modelos de contenido) La plantila de construcción XUL utiliza reglas para mantener sincronizados, de forma automática, todos los modelos de contenidos acorde a tus cambios.
    3. +
+ +

Para poder tener la ventaja de estas funciones, debes ser capaz de expresar tu información en términos de RDF datasource API ya sea usando el built-in memory datasource, usando RDF/XUL para almacenar tu información, o escribiendo tu propia implementación de nsIRDFDataSource

+ +

Qué es lo que se carga cuando especifico "datasource=" ?

+ +

En el "root" de una plantilla, el atributo datasources especifica que se debe cargar una lista de URIs datasource que están separadas por un espacio en blanco. Pero, qué es una "URI datasource"? Puede ser:

+ + + +

En ambos casos, los datasources se cargan usando el método GetDataSource() de nsIRDFService asi que será manejado de igual manera para todos los datasources que asi se carguen.

+ +

Cuál es el modelo de seguridad para RDF/XML en XUL?

+ +

El documento XUL que es cargado de una URL "confiable" (cualquier chrome: URL) puede especificar cualquier URI datasource en el atributo datasources de la plantilla XUL.

+ +

El documento que es cargado desde una URL "no confiable", puede especificar solo un documento RDF/XML desde el mismo codebase (en el significado de Java) donde se origino el documento XUL. Los datasources que no son "especiales" (ej. rdf:) se cargarán desde un XUL "no confiable".

+ +

Cómo agrego un datasource a una plantila XUL?

+ +

Si bien es posible crear una plantilla XUL con un conjunto de datasources "implicitos" especificando el atributo datasource, abrá veces que no sabrás que datasource cargar hasta que la XUL esté cargada. Por ejemplo, tu XUL tal vez necesite computar el datasource que se desea mostrar en un manejador onload. O, tal vez necesites agregar datasources basado en la acción de un usuario.

+ +
<window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
+  ...
+  <tree id="my-tree" datasources="rdf:null">
+    ...
+  </tree>
+  ...
+</window>
+
+ +

Asumiendo que hemos adquirido el datasource de alguna manera (ej. así), el sig. ejemplo muestra cómo agregar un datasource a una plantila, y luego, forzar a la plantilla a reconstruirse basada en los nuevos contenidos agregados.

+ +
var ds = /* asumimos que tienes esto! */;
+// Obten el elemento DOM para 'my-tree'
+var tree = document.getElementById('my-tree');
+// agregamos nuestro datasource
+tree.database.AddDataSource(ds);
+// Forza al arbol a reconstruirse *ahora*. debes hacerlo "manual"!
+tree.builder.rebuild();
+
+ +

Cualquier elemento XUL con un atributo datasources "tendrá" una propiedad database y una builder. La primera refiere a un objeto nsIRDFCompositeDataSource que contiene los datasources desde donde son contruidas las plantillas.

+ +

La segunda propiedad refiere a un objeto nsIXULTemplateBuilder que es el "generador" que mantiene el estado de los contenidos de la plantilla.

+ +

Nota que el datasource rdf:null es un datasource especial que nos dice "hey, no tenemos un datasource todavía, pero vamos a agregar uno mas tarde, chequéalo!". Esto hace que database y builder se instalen, pero deja a database vacía de datasources, debes agregarlos tú mismo!

+ +

Puedo manipular plantillas XUL usando las APIs DOM?

+ +

Sí! puedes agragar, quitar reglas, cambiar las condiciones de una regla y cambiar el contenido que es generado por una regla. De hecho, puedes cambiar cualquier cosa de una plantilla usando W3C DOM APIs.

+ +

Eso si, debes llamar a rebuild() para que los cambios hagan efecto (del mismo modo que lo haces si agregas un datasource a una plantilla XUL).

+ +

Cómo agrego texto plano desde una plantilla?

+ +

Para agregar texto plano desde una plantilla usa el elemento <text>.

+ +
<template>
+  <rule>
+    <conditions>...</condition>
+    <bindings>...</bindings>
+    <action>
+      <text value="?alguna-variable" />
+    </action>
+  </rule>
+</template>
+
+ +

La plantilla arriba creará un modelo de contenido que ejecutará series de nodos de texto.

+ +

Solución de problemas

+ +

Trucos y secretos sobre el tema.

+ +

Mi archivo RDF/XML no carga.

+ +

La causa mas usual de este problema es un tipo de MIME incorrecto. Asegúrate que tu servidor esté enviando el archivo como text/xml (recomendado) o como text/rdf.

+ +

Nota que W3C RDF Core WG está registrando application/rdf+xml, aunque esto no funciona con ningún código Mozilla. (tenemos algún bug registrado para rastrear esto? -- danbri)

+ +

Otro problema posible: para XUL y RDF cargado de forma remota tal vez necesites ajustar las restricciones de seguridad de Mozilla (mira más abajo para ejemplos). Si XUL no está cargando tu RDF, y el tipo MIME está OK, tal vez este sea el problema.

+ +

Puedes usar los utilitarios rdfcat y rdfpoll para verificar que RDF/XML son válidos. Estos programas son generados en Windows por defecto, y en Linux cuando especificas configure --enable-tests.

+ + + +

Ambos programas son lentos para cargar y ejecutarse (pero se ejecutarán). Inician XPCOM y hacen que Necko pueda cargar y procesar URLs igual que lo hace Mozilla.

+ +

No sucede nada cuando llamo AddDataSource.

+ +

Nota que el generador de la plantilla no regenera automaticamente el contenido de una plantilla después de AddDataSource o RemoveDataSource, debe ser llamado desde database del generador. Debes llamar elt.builder.rebuild() manualmente para actualizar los contenidos de la plantilla

+ +

Por qué? Esto se diseño para que no se produzcan múltiple re-generaciones cuando más de un datasource es agregado a la database.

+ +

Ejemplos

+ +

Donde puedo encontrar algunos ejemplos?

+ +

Aquí hay algunos, son ejecutables directamente desde HTTP.

+ +

Mira también duplicates.rdf (directo desde Mozilla) también duplicates.xul. Nota que debes alivianar el modelo de seguridad de Mozilla para que funcionen. Para hacerlo, agrega la siguiente línea al archivo de preferencias. (primero debes reiniciar Mozilla para que escriba el archivo)

+ +
user_pref("signed.applets.codebase_principal_support", true);
+
+ +

Te preguntará si permites a los scripts en duplicates.xul accerder XPConnect, responde que SÍ.

+ +

Actualmente Mozilla no permite acceso a las interfaces y servicios RDF sin previlegios, mira el bug 122846 para detalles.

+ +

Por favor comunicate via mail con danbri si crees que deberíamos colocar algún otro link

+ +

Notas

+ +
    +
  1. Mira también W3C RDF y Semantic Web para más información acerca de RDF y tecnologías relacionadas.
    2. +
+ +

Contribuyentes

+ + + + + +

Autor: Chris Waterson

+ +
+

Información sobre documento original

+ +
+ +
+ +

Categorías

+ +

Interwiki Language Links

+ +

 

+ +
 
+
diff --git "a/files/es/archive/est\303\241ndares_web/usando_el_marcado_correcto_para_llamar_a_los_plugins/index.html" "b/files/es/archive/est\303\241ndares_web/usando_el_marcado_correcto_para_llamar_a_los_plugins/index.html" new file mode 100644 index 0000000000..11aa4d9829 --- /dev/null +++ "b/files/es/archive/est\303\241ndares_web/usando_el_marcado_correcto_para_llamar_a_los_plugins/index.html" @@ -0,0 +1,268 @@ +--- +title: Usando el marcado correcto para llamar a los plugins +slug: Archive/Estándares_Web/Usando_el_marcado_correcto_para_llamar_a_los_plugins +tags: + - HTML + - Plugins + - Todas_las_Categorías +translation_of: Archive/Web_Standards/Using_the_Right_Markup_to_Invoke_Plugins +--- +

Este artículo habla de cómo llamar correctamente a un plugin usando HTML. Habla de los elementos object y embed y muestra detalles sobre cómo llamar a aplicaciones Java con HTML en aplicaciones web.

+ +

El elemento <object>: Estándares W3C y los navegadores

+ +

El elemento object es parte de la especificación HTML 4.01, y es el mecanismo recomendado para llamar a los plugins. Su uso esta condicionado a unas pocas advertencias de las que esta sección habla.

+ +

Tradicionalmente, el elemento object ha sido usando de forma diferente por Microsoft Internet Explorer y los navegadores basados en Mozilla como Netscape 7. En IE, el elemento object es usado para llamar a un plugin creado con la arquitectura ActiveX. Aquí vemos un ejemplo de este tipo de uso por parte de IE:

+ +
<!-- IE ONLY CODE -->
+<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width="366" height="142" id="myFlash">
+    <param name="movie" value="javascript-to-flash.swf" />
+    <param name="quality" value="high" />
+    <param name="swliveconnect" value="true" />
+</object>
+
+ +

En el ejemplo de arriba, el atributo classid que va junto al elemento object apunta a un URN "clsid:" seguido de un único identificador de un control ActiveX (en el ejemplo de arriba, la cadena que comienza por "D27..."). Esto es, de hecho, el identificador único del plugin de Macromedia's Flash, y los desarrolladores se supone que conocen esos identificadores únicos para llamar al componente de su elección. El atributo codebase usado arriba apunta a la localización donde está el archivo CAB que contiene el control del ActiveX. En este contexto, el atributo codebase se usa como mecanismo de obtención (es decir, una forma de obtener el controlador si no esta presente). Si el control de ActiveX de Flash no está instalado, IE irá entonces a la URL indicada en el atributo codebase y obtendrá el control de ActiveX. Los elementos param adicionales (que son "hijos" del elemento object) especifican los parámetros de configuración para el plugin de Flash. Por ejemplo, param name="movie" indica al plugin de Flash la localización del archivo SWF para empezar a reproducirlo.

+ +

Con la salida de Netscape 7.1, este tipo de uso de elementos object de ActiveX está soportado con el uso del Microsoft® Windows Media Player. Sólo el Windows Media Player está soportado como control de ActiveX en Netscape 7.1. Los detalles se indican en otro artículo.

+ +

Navegadores como Netscape 7 no renderizarán el plugin Flash si se usa el marcado de arriba, porque Netscape 7 no soporta llamadas a componentes ActiveX o basados en ActiveX, con la excepción del Windows Media Player en Netscape 7.1. Los navegadores basados en Mozilla soportan la arquitectura de plugin de Netscape, los cuales no estan basados en COM como el ActiveX (y por ello, no son llamados vía identificador único) sino basados en el tipo MIME. Los navegadores basados en Mozilla suportan el uso del elemento object junto con el tipo MIME. A continuación se muestra un ejemplo de este uso, una vez más para el plugin de Macromedia Flash:

+ +
<object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
+width="366" height="142" id="myFlash">
+    <param name="movie" value="javascript-to-flash.swf" />
+    <param name="quality" value="high" />
+    <param name="swliveconnect" value="true" />
+    <p>You need Flash -- get the latest version from
+    <a href= "http://www.macromedia.com/downloads/">here.</a></p>
+</object>
+
+ +

En el ejemplo anterior, application/x-shockwave-flash es el tipo MIME de Flash e invocará la arquitectura Flash específica de Netscape en navegadores basados en Mozilla. Los punteros de atributos que apuntan al fichero SWF a ejecutar, y los parámetros de configuración (los elementos param) son ambos usados de una forma consistente por IE y por los navegadores basados en Mozilla como Netscape 7. De hecho, lo visto anteriormente también funcionará para IE, que interpreta las invocaciones de tipo MIME para ciertos tipos MIME como Flashademás de las invocaciones del estilo ActiveX classid.

+ +

Debido a que el uso de los tipos MIME para Flash funcionará tanto para IE como para Netscape 7, se puede usar el código anterior el plugin de Flash tanto en IE como en Netscape 7. Sin embargo, hay algunas advertencias que los desarrolladores deben tener en cuenta cuando usen el elemento object en navegadores basados en Mozilla como es Netscape 7 y en IE:

+ +

Advertencias

+ + + + + +
<!-- Usage Will Not Work As Intended -->
+<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width="366" height="142" id="myFlash">
+    <param name="movie" value="javascript-to-flash.swf" />
+    <param name="quality" value="high" />
+    <param name="swliveconnect" value="true" />
+
+	<object type="application/x-shockwave-flash" data="javascript-to-flash.swf"
+	 width="366" height="142" id="myFlashNSCP">
+		<param name="movie" value="javascript-to-flash.swf" />
+    		<param name="quality" value="high" />
+    		<param name="swliveconnect" value="true" />
+		<p>You need Flash -- get the latest version from
+		 <a href="http://www.macromedia.com/downloads/">
+		here.</a></p>
+	</object>
+
+</object>
+
+ + + + + +

Recomendaciones

+ +

Para superar el inconveniente de no poder anidar elementos object en IE y de no existir el modo de usar simplemente un elemento object de modo multiplataforma (con mecanismos de obtención específicos de la arquitectura), la mejor solución es escribir elementos object dinámicamente basándose en la arquitectura. Por ejemplo, en los navegadores que soportan ActiveX como IE, creando un elemento con un atributo classid y en navegadores que soportan la arquitectura de plugins de Netscape, usando un tipo MIME. A continuación se muestra un ejemplo en JavaScript que ilustra esto:

+ +
if (window.ActiveXObject)
+{
+
+// browser supports ActiveX
+// Create object element with
+// download URL for IE OCX
+
+document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"');
+document.write(' codebase="http://download.macromedia.com');
+document.write('/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"');
+document.write(' width="366" height="142" id="myFlash">');
+document.write(' <param name="movie" value="javascript-to-flash.swf" />');
+document.write(' <param name="quality" value="high" />');
+document.write(' <param name="swliveconnect" value="true" />');
+document.write('<\/object>');
+
+}
+
+else
+{
+
+// browser supports Netscape Plugin API
+
+document.write('<object id="myFlash" data="javascript-to-flash.swf"');
+document.write(' type="application/x-shockwave-flash"');
+document.write(' width="366" height="142">');
+document.write('<param name="movie" value="javascript-to-flash.swf" />');
+document.write('<param name="quality" value="high" />');
+document.write('<param name="swliveconnect" value="true" />');
+document.write('<p>You need Flash for this.');
+document.write(' Get the latest version from');
+document.write(' <a href="http://www.macromedia.com/downloads">here<\/a>.');
+document.write('<\/p>');
+document.write('<\/object>');
+
+}
+
+ +

Véase también: Flash Satay

+ +

El elemento object y Java

+ +

Los navegadores basados en Mozilla como Netscape 6.x, Netscape 7 y CompuServe 7 vienen con el plugin para Java que Sun proporciona. Los usuarios que instalen Netscape 6.x o Netscape 7 tienen la opción de instalar o no Java. A diferencia de Netscape Communicator 4.x, Netscape 6.x y 7 que no tienen por defecto una máquina virtual Java -- ellos dependen del plugin de Sun. Durante la época de Netscape Communicator 4.x, Netscape Communications solía desarrollar una máquina virtual Java que soportaba Java 1.5.0 y anterior. Ahora, con Netscape 6 y 7, la máquina virtual Java es un plugin de Sun. Netscape ya no desarrolla o incluye una máquina virtual Java por defecto con el nevegador.

+ +

El plugin para Java de Sun puede ser invocado por el elemento object, como cualquier otro plugin. Una vez más, Internet Explorer típicamente invoca el plugin de forma que el elemento object es usado conjuntamente con el atributo classid que apunta a un identificador único ActiveX. Cada versión superior del plugin tiene un identificador único. Este es un ejemplo del tipo de etiqueta que JRE 1.4.1 invocará en IE, usando el identificador único para JRE 1.4.1:

+ +
<!-- IE ONLY CODE -->
+<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
+     width="460" height="160"
+codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_1-windows-i586.cab#version=1,4,1">
+     <param...>
+     <param...>
+</object>
+
+ +

La invocación anterior no funcionará en navegadores basados en Mozilla como Netscape 7 a causa de la razón vista anteriormente: classid usado conjuntamente con el identificador único hace referencia a una arquitectura (ActiveX) que el código de Mozilla (y, por lo tanto, Netscape 7) no soporta. Puedes invocar el plugin de Java para Netscape 7 y otros navegadores basados en Mozilla usando el tipo MIME para Java apropiado. Aquí se muestra un ejemplo:

+ +
<object type="application/x-java-applet;jpi-version=1.4.1_01"
+width="460" height="160">
+	<param name="code" value="Animator.class" />
+	<param name="imagesource" value="images/Beans" />
+	<param name="backgroundcolor" value="0xc0c0c0" />
+	<param name="endimage" value="10" />
+	<param name="soundsource" value="audio">
+	<param name="soundtrack" value="spacemusic.au" />
+	<param name="sounds" value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au" />
+	<param name="pause" value="200" />
+	<p>You need the Java Plugin.
+         Get it from <a href="http://java.sun.com/products/plugin/index.html">here.</a></p>
+</object>
+
+ +

El código anterior menciona una versión específica de un tipo MIME, y si el navegador basado en Mozilla como Netscape 7 no tiene instalado JRE 1.4.1_01, el texto alterno es mostrado. No es necesario siempre dar una versión específica de un tipo MIME. Si no te estás aprovechando de las características específicas de alguna versión concreta, un tipo MIME más genérico como application/x-java-vm funcionará igual de bien. Los parámetros de configuración para el applet, incluyendo la clase que contiene el punto de entrada inicial (Animator.class, referenciado por el elemento param), son específicos en muchos elementos param.

+ +

Los navegadores basados en Mozilla como Netscape 7 también permiten el uso de un atributo especial classid. Este es el especial classid "java:". Aquí vemos un ejemplo usando este método de invocación:

+ +
<object classid="java:NervousText.class" width="534" height="50">
+	<param name="text" value="Java 2 SDK, Standard Edition v1.4" />
+	<p>You need the Java Plugin.
+	   Get it from
+	   <a href="http://java.sun.com/products/plugin/index.html">here.
+	   </a>
+	</p>
+</object>
+
+ +

el classid "java:" te permite referenciar la clase que proporciona el punto de entrada inicial. El resto de los parámetros de configuración funcionan gracias a los elementos param.

+ +

Applet, la elección típica

+ +

El elemento applet continúa siendo el más soportado, y sigue siendo la forma más popular de invocar applets en Java. En Netscape 7 y CompuServe 7, el elemento applet invoca directamente el plugin de Java. Aquí vemos un ejemplo:

+ +
<applet code="NervousText.class" width="534" height="50">
+	<param name="text" value="Java(TM) 2 SDK, Standard Edition v1.4" />
+</applet>
+
+ +

El elemento applet ha sido despreciado en la especificación HTML 4.01, pero una ventaja de usarlo es que en navegadores basados en Mozilla como Netscape 7, si has perdido Java, un mecanismo automático de obtención lo reemplaza. El navegador usará el Netscape's Plugin Finder Service para descargar el plugin de Java. La sección References reúne recursos de como usar el elemento applet.

+ +

El elemento embed

+ +

El elemento embed ha sido usado para invocar plugins desde los primeros tiempos de los navegadores Netscape. Típicamente, el elemento embed es anidado con un elemento object, tal que el otro elemento object invoca un control ActiveX para IE, mientras que el elemento interno embed invoca un plugin de Netscape. Aquí vemos un ejemplo de este uso:

+ +
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
+width=366 height=142 id="myFlash">
+	<param name="movie" value="javascript_to_flash.swf" />
+	<param name="quality" value="high" />
+	<param name="swliveconnect" value="true" />
+		<embed src="javascript_to_flash.swf" quality="high" width="366" height="142"
+    		type="application/x-shockwave-flash"
+    		pluginspage="http://www.macromedia.com/downloads/"
+    		name="myFlash" swliveconnect="true">
+    		</embed>
+</object>
+
+ +

Enlaces a las normas que marcan el uso del elemento embed pueden ser vistas en la sección References. El elemento embed es habitualmente el elemento más ampliamente usado para invocar plugins en navegadores Netscape. Es importante indicar, sin embargo, que el elemento embed no es parte de la especificación HTML 4.01, por lo que no es un estándar W3C. Algunas advertencias que marcan el uso del elemento embed son:

+ + + +

Nótese que el mecanismo de obtención para el elemento embed -- esto es, la forma en como un plugin se obtiene si se ha perdido -- viene a través del atributo pluginspage. Este atributo apunta a una página para coger el plugin si éste no se detecta por el navegador. El atributo pluginurl es otro atributo que puede ser usado, y puede ser usado para apuntar directamente a un archivo XPInstall para una descarga más racionalizada. Para el elemento embed en concreto, estos atributos en Netscape 7 y Mozilla son mandados por la opción Plugin Finder Service. Debajo de Editar | Preferencias | Navegador | Aplicaciones de ayuda es una opción para usar el Plugin Finder Service de Netscape. Si el usuario ha seleccionadoSiempre usar Netscape Plugin Finder Service para obtener Plugins entonces si estos atributos son o no especificados no produce ninguna diferencia -- el navegadorsiempre consultará con el Plugin Finder Service para determinar si tiene un plugin para manejar el tipo MIME perdido. Si esta opción no está marcada, el Plugin Finder Service será usado sólo si el autor de la página webNO especifica cualquiera de estos atributos.

+ +

Información del documento original

+ + + +

Referencias

+ +
General -- Especificaciones
+ + + +
El elemento <object>
+ + + +
El elemento <embed>
+ + + +
Java
+ + + +
Bugs y futuras direcciones en Netscape y Mozilla
+ + + +

Categorías

+ +

Interwiki, vínculos a otros idiomas

diff --git "a/files/es/archive/est\303\241ndares_web/ventajas_para_los_negocios_del_uso_de_est\303\241ndares_web/index.html" "b/files/es/archive/est\303\241ndares_web/ventajas_para_los_negocios_del_uso_de_est\303\241ndares_web/index.html" new file mode 100644 index 0000000000..acc168d514 --- /dev/null +++ "b/files/es/archive/est\303\241ndares_web/ventajas_para_los_negocios_del_uso_de_est\303\241ndares_web/index.html" @@ -0,0 +1,62 @@ +--- +title: Ventajas para los negocios del uso de estándares web +slug: Archive/Estándares_Web/Ventajas_para_los_negocios_del_uso_de_estándares_web +tags: + - Desarrollo_Web + - Estándares_Web + - Todas_las_Categorías +translation_of: Archive/Web_Standards/The_Business_Benefits_of_Web_Standards +--- +

Introducción

+

Más con menos, esta parece ser la misión imposible de los diseñadores web: Dirigirse a más clientes, a una audiencia creciente, con mayor diversidad de navegadores, mejorando la accesibilidad, con usuarios que piden más velocidad, y todo esto reduciendo los costes de mantenimiento o rediseño del sitio. Atrapados entre la espada y la pared, los webmasters afrontan un desafío formidable. Pero cuentan con un aliado insospechado en la batalla, los estándares web.

+

Este artículo explica cómo, ser fiel a los estándares web, y dejar de lado el código y las tecnologías propietarias, puede contribuir a los objetivos comerciales de una compañía.

+

Dar al sitio un diseño uniforme

+

Separando el contenido de la presentación los diseñadores web tienen mucho ganado. El estilo es definido con CSS, un lenguaje orientado a la presentación. Guardar el código CSS en un documento separado (hoja de estilo) y aplicarlo a un grupo de documentos HTML permite cambiar por completo el diseño para todos esos documentos fácilmente. El HTML estricto (a diferencia del marcado transicional), no permite el uso de etiquetas de estilo en los documentos HTML, forzando con naturalidad la separación de contenido y presentación.

+

Mejorar la experiencia de Usuario:

+

Cargar más rápido, consumiendo menos ancho de banda

+

El código HTML suele ser mucho más compacto cuando es usado conjuntamente con CSS, y por lo tanto es más fácil de leer y mantener. Según varios estudios sobre el caso, y Andy King, el autor de Speed Up Your Web Site: Web Site Optimization, CSS posibilita la transformación de maquetaciones a base de tablas en diseños basados en CSS. Hacerlo, suele reducir el tamaño de las páginas entre un 25 y un 50 %. Esto se traduce en una mejor experiencia de usuario, según el Gurú de la usabilidad Jakob Nielsen, que apunta que los usuarios tienden a cerrar una página Web cuando tarda más de 10 segundos en cargar.

+

Aumentar el tráfico del sitio

+

Mejorar el posicionamiento en los buscadores

+

Conseguir un buen posicionamiento es uno de los mayores desafíos que un webmasters debe afrontar. En este asunto toda ayuda es buena.

+

Los robots de los buscadores rastrean la web para indexarla. Comparados con una persona, los robots ven la web de un modo muy distinto. Los efectos dinámicos creados con JavaScript son ignorados (de flash ni hablamos), y el texto dentro de los gráficos tampoco será leído. La separación de contenidos y presentación aumenta el ratio información/código, haciendo los documentos basados en CSS más apropiados para su consulta por parte de usuarios no humanos, lo cual mejora su posición en los resultados de los buscadores.

+

Crear los títulos con texto y CSS en vez de gráficos también ayuda.

+

Adaptación a múltiples plataformas

+

Estándares y multiplataforma van de la mano. Mientras algunos navegadores caprichosos tienen comportamientos diferentes según la plataforma, los navegadores basados en Mozilla están diseñados para comportarse igual en todas las plataformas soportadas (Mac, Linux, Unix, Windows ...)

+

Pensando en el mañana

+

Una parte muy significativa de la información almacenada electrónicamente es producida para la web y escrita en formato HTML. La mayor parte de esta información usa HTML no válido, que puede ser mostrado correctamente en navegadores viejos más permisivos. Pero la web evoluciona; los navegadores web pueden ser menos permisivos, o comportarse de modo diferente cuando detectan código no válido (p.ej parsea los datos inválidos y los renderiza de otro modo). La utilización de código válido, conforme a los estándares asegura que los datos serán reutilizables durante mucho tiempo, porque las especificaciones de cómo analizar los formatos estándar están bien documentadas y son estables.

+

En contra de la creencia popular, escribir código estándar no significa producir contenidos menos atractivos. De hecho, siguiendo los estándares puede hacerse casi todo lo que se hace con las extensiones propietarias, con la ventaja añadida de ser multiplataforma y una apuesta de futuro.

+

Extensibilidad

+

Usar HTML estricto y separar la estructura del contenido prepara el terreno para XHTML, que es una versión de HTML compatible con XML. La Utilización de XHTML permitirá a los desarrolladores web usar herramientas del mundo XML, tales como XSLT, que permite manipular datos XML fácilmente.

+

El uso de XHTML es una introducción a la familia de estándares que conforman las tecnologías XML, como XML, XSLT (transformando documentos), SVG (gráficos animados), MathML (expresiones matemáticas)... Estas tecnologías han sido diseñadas para ser interoperables, y son la base de los Servicios Web. Este va mucho más allá del simple diseño web.

+

Reducir los costes de mantenimiento

+

El mantenimiento de un sitio Web es a menudo costoso y usar estándares web puede ayudar mucho en este aspecto.

+

Ventajas de CSS sobre JavaScript

+

Es frecuente usar gráficos o javaScript para añadir algún efecto especial al texto. Las hojas de estilo dan a los diseñadores un control total sobre la tipografía y permite efectos como los rollovers. Esto reduce la necesidad de crear gráficos y programar scripts, y lo que es más importante, reduce el ancho de banda que consumen las imágenes.

+

Código HTML bien formado

+

Uno de los principales dolores de cabeza de los desarrolladores es la diferencia en como los distintos navegadores muestran las páginas web. Tales diferencias de renderizado son propias de navegadores antiguos, la mayoría son conocidas y están documentadas. En muchos casos, las divergencias son causadas por un código ambiguo.

+

El código gramaticalmente correcto reduce considerablemente las diferencias de renderizado entre los navegadores. La utilización de instrumentos de validación como el validador del W3C ayudan a detectar los errores y a comprobar que el código HTML es gramaticalmente correcto, esto elimina la ambigüedad en el parseo que hacen los navegadores.

+

Compatibilidad con múltiples navegadores

+

Cada vez son más los navegadores, además del IE, usados para surfear por la web:

+ +

A grosso modo, para surfear en la web se usan 5 motores de renderizado diferentes, en docenas de navegadores, para las 3 plataformas principales.

+

Según todas las fuentes, los navegadores basados en Gecko son cada día más populares. Firefox ha sido descargado más de 200 millones de veces.

+

En un entorno cada vez más heterogéneo, probar las páginas Web en todas las configuraciones es imposible. el código estándar se convierte en la única solución viable. == The Netscape 4 and IE4 exceptions == The only drawback in using CSS is that older browsers (specifically IE4 and NS4) will not be able to render as intended. In some cases, where a significant portion of the audience is running Netscape 4.x, use of simple tables for layout and CSS for font control may be a solution. Another option is to serve HTML content to Netscape 4.x users, without CSS style. The content will be usable but not as attractively presented as in a modern browser. Furthermore, 4.x browsers are known to have security issues, so their users should be encouraged to upgrade.

+

Accesibilidad

+

Ser accesible es un requisito para las agencias gubernamentales de muchos países: EE.UU, España o Brasil y en algunos países como Australia, para cualquier organización el código estándar (en concreto,HTML estricto y CSS para la maquetación) hace de la accesibilidad un objetivo más fácil, porque los estándares han sido creados pensando en la accesibilidad.

+

Cuidando la accesibilidad seremos capaces de servir contenidos web a una mayor audiencia, y aumentamos la usabilidad del sitio, incluso para la gente sin minusvalía.

+

Reducir la dependencia del desarrollador

+

Cuando los webmasters asumen la dirección de un sitio creado por otros, el código escrito por los anteriores desarrolladores puede ser todo un reto. En muchos casos, tienen que enfrentarse con un código HTML de mala calidad, que además contiene características indocumentadas, hacks, o prácticas de marcado peculiares. La carencia de documentación es a menudo un problema.

+

El siguiente documento: standards-compliance in requirements, aporta un modo muy eficaz de medir la calidad del producto final, el W3C que es un juez imparcial.

+

Como los estándares están muy bien documentados, cualquier persona que asuma código estándar puede trabajar con él de inmediato; sin tener que familiarizarse con las prácticas de codificación del desarrollador anterior. Esto además, reduce considerablemente la dependencia de un desarrollador concreto.

+

Ventajas para los visitantes del sitio

+

Gracias a la accesibilidad, a la rapidez en la carga de las páginas y a la mayor compatibilidad con múltiples navegadores (sin limitarse a uno o dos navegadores usados en las pruebas), es más probable que sus visitantes aprecien sus servicios y vuelvan mañana.

+

Conclusión

+

Utilizar los estándares web y separar el diseño de los contenidos aporta un montón de ventajas, hoy y mañana.

+

Hoy esto significa ampliar la audiencia, reducir los coste de producción de nuevos contenidos, y mejorar la accesibilidad.

+

Mañana esto significará reducir la dependencia de proveedores, reducir costes en mantenimiento, y un diseño más flexible para el sitio. Por último pero no menos importante, el uso de estándares abre las puertas a las tecnologías XML.

+

Todos estos factores también contribuyen a facilitar la administración del sitio, aumentar el número de visitas y amortizar la inversión. Técnicos, vendedores, y contables, todos pueden beneficiarse de un sitio Web basado en estándares. Es más de lo que uno podría esperar.

+

Categorías

+

interwikis

+ +

diff --git a/files/es/archive/index.html b/files/es/archive/index.html new file mode 100644 index 0000000000..4f4a70c023 --- /dev/null +++ b/files/es/archive/index.html @@ -0,0 +1,21 @@ +--- +title: Archive of obsolete content +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +

Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.

+ +

There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should not be used for building new Web sites or apps for modern browsers. It's here for historical reference only.

+ +
+

Note to writers: We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are extremely obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the MDN Web Docs chat room before moving content here.

+
+ +

{{SubpagesWithSummaries}}

+ + + +

{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}

diff --git a/files/es/archive/jxon/index.html b/files/es/archive/jxon/index.html new file mode 100644 index 0000000000..9fb34dede3 --- /dev/null +++ b/files/es/archive/jxon/index.html @@ -0,0 +1,1509 @@ +--- +title: JXON +slug: Archive/JXON +tags: + - Documentos +translation_of: Archive/JXON +--- +

JXON (lossless JavaScript XML Object Notation) is a generic name by which is defined the representation of JavaScript Objects using XML. There are no real standards for this conversion, but some conventions begin to appear on the web. There are some cases in which the whole content of an XML document must be read from the JavaScript interpreter (like for web-apps languages or settings XML documents, for example). In these cases JXON could represent the most practical way.

+ +

In this article we will show how to convert a parsed XML document (i.e. an instance of Document) to a JavaScript Object tree (i.e. a tree of nested instances of Object) and viceversa, with some different algorithms. It could be useful to read the XML introduction article first.

+ +

If you want a complete bidirectional JXON library (modelled on the JSON global object), skip to the dedicated paragraph (but please read the note about the const statement compatibility).

+ +
Note: If you are interested to address only some parts of an XML document (and are not starting in JavaScript/JSON for templating purposes), use XPath instead of converting the whole document into JSON.
+ +

Conversion snippets

+ +

Now imagine you have this sample XML document:

+ +
example.xml
+ +
<?xml version="1.0"?>
+<!DOCTYPE catalog SYSTEM "catalog.dtd">
+<catalog>
+  <product description="Cardigan Sweater">
+   <catalog_item gender="Men's">
+     <item_number>QWZ5671</item_number>
+     <price>39.95</price>
+     <size description="Medium">
+       <color_swatch image="red_cardigan.jpg">Red</color_swatch>
+       <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
+     </size>
+     <size description="Large">
+       <color_swatch image="red_cardigan.jpg">Red</color_swatch>
+       <color_swatch image="burgundy_cardigan.jpg">Burgundy</color_swatch>
+     </size>
+   </catalog_item>
+   <catalog_item gender="Women's">
+     <item_number>RRX9856</item_number>
+     <discount_until>Dec 25, 1995</discount_until>
+     <price>42.50</price>
+     <size description="Medium">
+       <color_swatch image="black_cardigan.jpg">Black</color_swatch>
+     </size>
+   </catalog_item>
+  </product>
+  <script type="text/javascript"><![CDATA[function matchwo(a,b) {
+    if (a < b && a < 0) { return 1; }
+    else { return 0; }
+}]]></script>
+</catalog>
+
+ +

First, create a DOM tree like the previous example as described in the How to Create a DOM tree article. If you have already have a DOM tree from using XMLHttpRequest, skip to the next paragraph.

+ +
Note: If you are using an instance of XMLHttpRequest in order to retrieve your XML file, please use the yourRequest.responseXML property to get a parsed XML document. Don't use yourRequest.responseText!
+ +

The algorithms proposed here (see: #1, #2, #3, #4) will consider only the following types of nodes and their attributes:

+ +
    +
  1. Document (only as function argument),
    2. +
  2. DocumentFragment (only as function argument),
    3. +
  3. Element,
    4. +
  4. Text (never as function argument),
    5. +
  5. CDATASection (never as function argument),
    6. +
  6. Attr (never as function argument).
    7. +
+ +

This is a good and standardized compromise for a JavaScript usage, since all of the information of an XML Document is contained in these node types. All other information (like processing instructions, schemas, comments, etc.) will be lost. This type of algorithm is still considered lossless, since what is lost is meta-information and not information.

+ +

In order to avoid conflicts, the representation of nodes and attributes names is case insensitive (always rendered in lower case), so objects' local property names set using JavaScript must always have some kind of capitalization (that is, at least one capital letter somewhere in their names), as you can see below.

+ +

The following algorithms are somewhat based on the Parker convention, version 0.4, which prescribes the transformation of tags names into object properties names and the recognition of the typeof of all the collected text content of each tag (plain text parsing); but with some differences (so, one can say that we follow a our convention). Moreover, all algorithms are equally lossless for the contemplated nodes.

+ +

We consider the third algorithm as the most representative and practical JXON parsing algorithm.

+ +

Now let's serialize doc — the DOM tree — to a JavaScript Object Tree (you can read more about working with Objects and how Javascript is Object-Oriented). We can use several algorithms to convert its content to a Javascript Object Tree.

+ +

Algorithm #1: a verbose way

+ +

This simple recursive constructor will convert an XML DOM tree to a JavaScript Object tree. The text content of each element is stored into the keyValue property, while nodeAttributes, if they exist, are listed under the child object keyAttributes. The constructor's argument can be the entire XML Document, a DocumentFragment or simply an Element node.

+ +
/*\
+|*|
+|*|  JXON Snippet #1 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function parseText (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function JXONTree (oXMLParent) {
+  var nAttrLen = 0, nLength = 0, sCollectedTxt = "";
+  if (oXMLParent.hasChildNodes()) {
+    for (var oNode, sProp, vContent, nItem = 0; nItem < oXMLParent.childNodes.length; nItem++) {
+      oNode = oXMLParent.childNodes.item(nItem);
+      if ((oNode.nodeType - 1 | 1) === 3) { sCollectedTxt += oNode.nodeType === 3 ? oNode.nodeValue.trim() : oNode.nodeValue; } // nodeType is "Text" (3) or "CDATASection" (4)
+      else if (oNode.nodeType === 1 && !oNode.prefix) { // nodeType is "Element" (1)
+        sProp = oNode.nodeName.toLowerCase();
+        vContent = new JXONTree(oNode);
+        if (this.hasOwnProperty(sProp)) {
+          if (this[sProp].constructor !== Array) { this[sProp] = [this[sProp]]; }
+          this[sProp].push(vContent);
+        } else { this[sProp] = vContent; nLength++; }
+      }
+    }
+    this.keyValue = parseText(sCollectedTxt);
+  } else { this.keyValue = null; }
+  if (oParentNode.hasAttributes && oXMLParent.hasAttributes()) {
+    var oAttrib;
+    this.keyAttributes = {};
+    for (nAttrLen; nAttrLen < oXMLParent.attributes.length; nAttrLen++) {
+      oAttrib = oXMLParent.attributes.item(nAttrLen);
+      this.keyAttributes[oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+    }
+  }
+  /*
+  * Optional properties...
+
+  this.keyLength = nLength;
+  this.attributesLength = nAttrLen;
+  // this.DOMNode = oXMLParent;
+
+  */
+
+  /* Object.freeze(this); */
+}
+
+/*
+* Optional methods... Uncomment the optional properties first!
+
+JXONTree.prototype.valueOf = function () { return this.keyValue; };
+JXONTree.prototype.toString = function () { return String(this.keyValue); };
+JXONTree.prototype.getItem = function (nItem) {
+  if (nLength === 0) { return null; }
+  var nCount = 0;
+  for (var sKey in this) { if (nCount === nItem) { return this[sKey]; } nCount++; }
+  return null;
+};
+JXONTree.prototype.getAttribute = function (nAttrId) {
+  if (nAttrLen === 0 || nAttrId + 1 > nAttrLen) { return null; }
+  var nAttr = 0;
+  for (var sAttrName in this.keyAttributes) { if (nAttr === nAttrId) { return this.keyAttributes[sAttrName]; } nAttr++; }
+  return null;
+};
+JXONTree.prototype.hasChildren = function () { return this.keyLength > 0; };
+
+*/
+
+var myObject = new JXONTree(doc);
+// we got our javascript object! try: alert(JSON.stringify(myObject));
+
+ +
Note: If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: /* Object.freeze(this); */. The Object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.
+ +

With this algorithm our example becomes:

+ +
{
+ "catalog": {
+   "product": {
+     "catalog_item": [{
+       "item_number": {
+         "keyValue": "QWZ5671"
+       },
+       "price": {
+         "keyValue": 39.95
+       },
+       "size": [{
+         "color_swatch": [{
+           "keyValue": "Red",
+           "keyAttributes": {
+             "image": "red_cardigan.jpg"
+           }
+         }, {
+           "keyValue": "Burgundy",
+           "keyAttributes": {
+             "image": "burgundy_cardigan.jpg"
+           }
+         }],
+         "keyValue": null,
+         "keyAttributes": {
+           "description": "Medium"
+         }
+       }, {
+         "color_swatch": [{
+           "keyValue": "Red",
+           "keyAttributes": {
+             "image": "red_cardigan.jpg"
+           }
+         }, {
+           "keyValue": "Burgundy",
+           "keyAttributes": {
+             "image": "burgundy_cardigan.jpg"
+           }
+         }],
+         "purchased": {
+           "keyValue": null
+         },
+         "keyValue": null,
+         "keyAttributes": {
+           "description": "Large"
+         }
+       }],
+       "keyValue": null,
+       "keyAttributes": {
+         "gender": "Men's"
+       }
+     }, {
+       "item_number": {
+         "keyValue": "RRX9856"
+       },
+       "discount_until": {
+         "keyValue": new Date(1995, 11, 25)
+       },
+       "price": {
+         "keyValue": 42.5
+       },
+       "size": {
+         "color_swatch": {
+           "keyValue": "Black",
+           "keyAttributes": {
+             "image": "black_cardigan.jpg"
+           }
+         },
+         "keyValue": null,
+         "keyAttributes": {
+           "description": "Medium"
+         }
+       },
+       "keyValue": null,
+       "keyAttributes": {
+         "gender": "Women's"
+       }
+     }],
+     "keyValue": null,
+     "keyAttributes": {
+       "description": "Cardigan Sweater"
+     }
+   },
+   "script": {
+     "keyValue": "function matchwo(a,b) {\n if (a < b && a < 0) { return 1; }\n else { return 0; }\n}",
+     "keyAttributes": {
+       "type": "text/javascript"
+     }
+   },
+   "keyValue": null
+ },
+ "keyValue": null
+}
+
+ +

This is a recommanded technique if you don't know the structure of the XML document.

+ +

Algorithm #2: a less verbose way

+ +

Here is another, simpler, conversion method, in which nodeAttributes are listed under the same object of child nodes but have the “@” prefix (as suggested by the BadgerFish Convention). As above, the text content is stored into the keyValue property. The constructor's argument can be the entire XML Document, a DocumentFragment or simply an Element node of it.

+ +
/*\
+|*|
+|*|  JXON Snippet #2 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function parseText (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function JXONTree (oXMLParent) {
+  if (oXMLParent.hasChildNodes()) {
+    var sCollectedTxt = "";
+    for (var oNode, sProp, vContent, nItem = 0; nItem < oXMLParent.childNodes.length; nItem++) {
+      oNode = oXMLParent.childNodes.item(nItem);
+      if ((oNode.nodeType - 1 | 1) === 3) { sCollectedTxt += oNode.nodeType === 3 ? oNode.nodeValue.trim() : oNode.nodeValue; }
+      else if (oNode.nodeType === 1 && !oNode.prefix) {
+        sProp = oNode.nodeName.toLowerCase();
+        vContent = new JXONTree(oNode);
+        if (this.hasOwnProperty(sProp)) {
+          if (this[sProp].constructor !== Array) { this[sProp] = [this[sProp]]; }
+          this[sProp].push(vContent);
+        } else { this[sProp] = vContent; }
+      }
+    }
+    if (sCollectedTxt) { this.keyValue = parseText(sCollectedTxt); }
+  }
+  if (oParentNode.hasAttributes && oXMLParent.hasAttributes()) {
+    var oAttrib;
+    for (var nAttrib = 0; nAttrib < oXMLParent.attributes.length; nAttrib++) {
+      oAttrib = oXMLParent.attributes.item(nAttrib);
+      this["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+    }
+  }
+  /* Object.freeze(this); */
+}
+
+var myObject = new JXONTree(doc);
+// we got our javascript object! try: alert(JSON.stringify(myObject));
+
+ +
Note: If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: /* Object.freeze(this); */. The Object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.
+ +

With this algorithm our example becomes:

+ +
{
+  "catalog": {
+    "product": {
+      "catalog_item": [{
+        "item_number": {
+          "keyValue": "QWZ5671"
+        },
+        "price": {
+          "keyValue": 39.95
+        },
+        "size": [{
+          "color_swatch": [{
+            "keyValue": "Red",
+            "@image": "red_cardigan.jpg"
+          }, {
+            "keyValue": "Burgundy",
+            "@image": "burgundy_cardigan.jpg"
+          }],
+          "@description": "Medium"
+        }, {
+          "color_swatch": [{
+            "keyValue": "Red",
+            "@image": "red_cardigan.jpg"
+          }, {
+            "keyValue": "Burgundy",
+            "@image": "burgundy_cardigan.jpg"
+          }],
+          "@description": "Large"
+        }],
+        "@gender": "Men's"
+      }, {
+        "item_number": {
+          "keyValue": "RRX9856"
+        },
+        "discount_until": {
+          "keyValue": new Date(1995, 11, 25)
+        },
+        "price": {
+          "keyValue": 42.5
+        },
+        "size": {
+          "color_swatch": {
+            "keyValue": "Black",
+            "@image": "black_cardigan.jpg"
+          },
+          "@description": "Medium"
+        },
+        "@gender": "Women's"
+      }],
+      "@description": "Cardigan Sweater"
+    },
+    "script": {
+      "keyValue": "function matchwo(a,b) {\n  if (a < b && a < 0) { return 1; }\n  else { return 0; }\n}",
+      "@type": "text/javascript"
+    }
+  }
+}
+
+ +

This is a possible technique to use if you partially know the structure of the XML document.

+ +

Algorithm #3: a synthetic technique

+ +

Here is another method of conversion. This algorithm is the closest to the Parker convention. It is very similar to the previous one, except that nodes which do not contain other recognizable nodes than Text or CDATASection are not treated as objects, but directly as booleans, strings, numbers or Date objects (see the Parker convention). Empty nodes (i.e. which do not contain other Element nodes, Text nodes, CDATASection nodes or Attr nodes) have the default value true (see the Code considerations). Also, this time we use a function instead of a constructor. The function's argument can be the entire XML Document, a DocumentFragment, or simply an Element node within it. nodeAttributes have the “@” prefix, as suggested by the BadgerFish Convention. In many cases, this is the most practical conversion method.

+ +
/*\
+|*|
+|*|  JXON Snippet #3 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function parseText (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function getJXONTree (oXMLParent) {
+  var vResult = /* put here the default value for empty nodes! */ true, nLength = 0, sCollectedTxt = "";
+  if (oXMLParent.hasAttributes && oXMLParent.hasAttributes()) {
+    vResult = {};
+    for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
+      oAttrib = oXMLParent.attributes.item(nLength);
+      vResult["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+    }
+  }
+  if (oXMLParent.hasChildNodes()) {
+    for (var oNode, sProp, vContent, nItem = 0; nItem < oXMLParent.childNodes.length; nItem++) {
+      oNode = oXMLParent.childNodes.item(nItem);
+      if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
+      else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
+      else if (oNode.nodeType === 1 && !oNode.prefix) { /* nodeType is "Element" (1) */
+        if (nLength === 0) { vResult = {}; }
+        sProp = oNode.nodeName.toLowerCase();
+        vContent = getJXONTree(oNode);
+        if (vResult.hasOwnProperty(sProp)) {
+          if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
+          vResult[sProp].push(vContent);
+        } else { vResult[sProp] = vContent; nLength++; }
+      }
+    }
+  }
+  if (sCollectedTxt) { nLength > 0 ? vResult.keyValue = parseText(sCollectedTxt) : vResult = parseText(sCollectedTxt); }
+  /* if (nLength > 0) { Object.freeze(vResult); } */
+  return vResult;
+}
+
+var myObject = getJXONTree(doc);
+// we got our javascript object! try: alert(JSON.stringify(myObject));
+
+ +
Note: If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: /* if (nLength > 0) { Object.freeze(vResult); } */. The Object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.
+ +

With this algorithm, our example becomes:

+ +
{
+  "catalog": {
+    "product": {
+      "@description": "Cardigan Sweater",
+      "catalog_item": [{
+        "@gender": "Men's",
+        "item_number": "QWZ5671",
+        "price": 39.95,
+        "size": [{
+          "@description": "Medium",
+          "color_swatch": [{
+            "@image": "red_cardigan.jpg",
+            "keyValue": "Red"
+          }, {
+            "@image": "burgundy_cardigan.jpg",
+            "keyValue": "Burgundy"
+          }]
+        }, {
+          "@description": "Large",
+          "color_swatch": [{
+            "@image": "red_cardigan.jpg",
+            "keyValue": "Red"
+          }, {
+            "@image": "burgundy_cardigan.jpg",
+            "keyValue": "Burgundy"
+          }]
+        }]
+      }, {
+        "@gender": "Women's",
+        "item_number": "RRX9856",
+        "discount_until": new Date(1995, 11, 25),
+        "price": 42.5,
+        "size": {
+          "@description": "Medium",
+          "color_swatch": {
+            "@image": "black_cardigan.jpg",
+            "keyValue": "Black"
+          }
+        }
+      }]
+    },
+    "script": {
+      "@type": "text/javascript",
+      "keyValue": "function matchwo(a,b) {\n  if (a < b && a < 0) { return 1; }\n  else { return 0; }\n}"
+    }
+  }
+}
+
+ +

This is a recommended technique if you know the structure of the XML document.

+ +

Algorithm #4: a very minimalist way

+ +

The following is another possible way to do the conversion. It is very close to the Parker convention, too. With this algorithm, all Element nodes that contain other child Element, Text, or CDATASection nodes in the same level are treated as instances of Boolean, Number, String, or Date Constructors. So any child Element node, if exists, will be nested in these types of objects.

+ +

For example:

+ +
<employee type="usher">John Smith</employee>
+<manager>Lisa Carlucci</manager>
+
+ +

becomes

+ +
var myObject = {
+  "employee": new String("John Smith"),
+  "manager": "Lisa Carlucci"
+};
+
+myObject.employee["@type"] = "usher";
+
+// test
+
+alert(myObject.manager); // "Lisa Carlucci"
+alert(myObject.employee["@type"]); // "usher"
+alert(myObject.employee); // "John Smith"
+
+ +
Note: This algorithm represents a special case of conversion. The generated JavaScript Object tree is not stringifyable (see the Code considerations). It is very practical for internal JavaScript access, but don't use it if you want to transfer the tree via JSON string!
+ +

As for the third algorithm, nodes which do not contain other recognizable nodes than Text or CDATASection are not treated as objects, but directly as booleans, strings, numbers (primitive values) or Date objects; and empty nodes (i.e. which do not contain other Element nodes, Text nodes, CDATASection nodes or Attr nodes) have the default value true. As for the third algorithm it is not used a constructor, but a function. The function's argument can be the entire XML Document, a DocumentFragment or simply an Element node of it. nodeAttributes have the “@” prefix, as suggested by the BadgerFish Convention.

+ +
/*\
+|*|
+|*|  JXON Snippet #4 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function parseText (sValue) {
+  if (/^\s*$/.test(sValue)) { return null; }
+  if (/^(?:true|false)$/i.test(sValue)) { return sValue.toLowerCase() === "true"; }
+  if (isFinite(sValue)) { return parseFloat(sValue); }
+  if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+  return sValue;
+}
+
+function objectify (vValue) {
+  if (vValue === null) {
+    return new (function() {
+      this.toString = function() { return "null"; }
+      this.valueOf = function() { return null; }
+    })();
+  }
+  return vValue instanceof Object ? vValue : new vValue.constructor(vValue);
+}
+
+var aTmpEls = []; // loaded element nodes cache
+
+function getJXONTree (oXMLParent) {
+  var  sProp, vContent, vResult, nLength = 0, nLevelStart = aTmpEls.length,
+      nChildren = oXMLParent.hasChildNodes() ? oXMLParent.childNodes.length : 0, sCollectedTxt = "";
+
+  for (var oNode, nItem = 0; nItem < nChildren; nItem++) {
+    oNode = oXMLParent.childNodes.item(nItem);
+    if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
+    else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
+    else if (oNode.nodeType === 1 && !oNode.prefix) { aTmpEls.push(oNode); } /* nodeType is "Element" (1) */
+  }
+
+  var nLevelEnd = aTmpEls.length, vBuiltVal = parseText(sCollectedTxt);
+
+  if (oParentNode.hasAttributes && oXMLParent.hasAttributes()) {
+    vResult = objectify(vBuiltVal);
+    for (nLength; nLength < oXMLParent.attributes.length; nLength++) {
+      oAttrib = oXMLParent.attributes.item(nLength);
+      vResult["@" + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+    }
+  } else if (nLevelEnd > nLevelStart) { vResult = objectify(vBuiltVal); }
+
+  for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) {
+    sProp = aTmpEls[nElId].nodeName.toLowerCase();
+    vContent = getJXONTree(aTmpEls[nElId]);
+    if (vResult.hasOwnProperty(sProp)) {
+    if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
+      vResult[sProp].push(vContent);
+    } else { vResult[sProp] = vContent; nLength++; }
+  }
+
+  aTmpEls.length = nLevelStart;
+
+  if (nLength === 0) { vResult = sCollectedTxt ? vBuiltVal : /* put here the default value for empty nodes: */ true; }
+  /* else { Object.freeze(vResult); } */
+
+  return vResult;
+}
+
+var myObject = getJXONTree(doc);
+alert(myObject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg"
+alert(myObject.catalog.product.catalog_item[1].size.color_swatch); // "Black" !
+
+ +
Note: If you want to freeze the whole object tree (because of the "static" nature of an XML document), uncomment the string: /* else { Object.freeze(vResult); } */. The Object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. In essence the object tree is made effectively immutable.
+ +

This is a possible technique if you know the structure of the XML document.

+ +

Reverse algorithms

+ +

It is possible to reverse the algorithms proposed here in order to build a new XML document starting from a JavaScript Objects Tree. For simplicity, we will propose here a single example, which in a single method represents the inversion of all our algorithms.

+ +
/*\
+|*|
+|*|  JXON Snippet #5 - Mozilla Developer Network
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+function createXML (oObjTree) {
+  function loadObjTree (oParentEl, oParentObj) {
+    var vValue, oChild;
+    if (oParentObj.constructor === String || oParentObj.constructor === Number || oParentObj.constructor === Boolean) {
+      oParentEl.appendChild(oNewDoc.createTextNode(oParentObj.toString())); /* verbosity level is 0 or 1 */
+      if (oParentObj === oParentObj.valueOf()) { return; }
+    } else if (oParentObj.constructor === Date) {
+      oParentEl.appendChild(oNewDoc.createTextNode(oParentObj.toGMTString()));
+    }
+    for (var sName in oParentObj) {
+      if (isFinite(sName)) { continue; } /* verbosity level is 0 */
+      vValue = oParentObj[sName];
+      if (sName === "keyValue") {
+        if (vValue !== null && vValue !== true) { oParentEl.appendChild(oNewDoc.createTextNode(vValue.constructor === Date ? vValue.toGMTString() : String(vValue))); }
+      } else if (sName === "keyAttributes") { /* verbosity level is 3 */
+        for (var sAttrib in vValue) { oParentEl.setAttribute(sAttrib, vValue[sAttrib]); }
+      } else if (sName.charAt(0) === "@") {
+        oParentEl.setAttribute(sName.slice(1), vValue);
+      } else if (vValue.constructor === Array) {
+        for (var nItem = 0; nItem < vValue.length; nItem++) {
+          oChild = oNewDoc.createElement(sName);
+          loadObjTree(oChild, vValue[nItem]);
+          oParentEl.appendChild(oChild);
+        }
+      } else {
+        oChild = oNewDoc.createElement(sName);
+        if (vValue instanceof Object) {
+          loadObjTree(oChild, vValue);
+        } else if (vValue !== null && vValue !== true) {
+          oChild.appendChild(oNewDoc.createTextNode(vValue.toString()));
+        }
+        oParentEl.appendChild(oChild);
+      }
+    }
+  }
+  const oNewDoc = document.implementation.createDocument("", "", null);
+  loadObjTree(oNewDoc, oObjTree);
+  return oNewDoc;
+}
+
+var newDoc = createXML(myObject);
+// we got our Document instance! try: alert((new XMLSerializer()).serializeToString(newDoc));
+
+ +
Note: With this code the Date instances, if they exist, are converted into Strings through the toGMTString() method. Nothing prohibits the use of any other conversion method. In addition, all properties of the tree with a true value will be converted into empty elements with no text nodes (see the Code considerations).
+ +

This is a good solution if you want to automate the creation of an XML document. It is a bad choice, however, if you want to re-build an XML document previously converted into JSON. Although the bidirectional conversion is very faithful (except for CDATASection nodes, which will be converted into Text nodes), the process is unnecessarily costly. In fact, if your goal is to edit an XML document, it is strongly recommended to work on it rather than create new ones.

+ +

The Parker Convention

+ +

The functions listed above for the conversion of an XML document to JSON (often called "JXON algorithms") are more or less freely based on the Parker Convention (especially regarding the transformation of tags names into object properties names, the recognition of the typeof of all the collected text content of each tag and the absorption of solitary Text and/or CDATASection nodes into primitive values). It is called “Parker Convention” in opposition to “BadgerFish Convention”, after the comic Parker & Badger by Cuadrado. See also: BadgerFish Convention.

+ +

The following is a transcription of the Parker Convention paper (version 0.4), from the page “TransformingRules” of the xml2json-xslt project site.

+ +

This Convention was written in order to regulate the conversion to JSON from XSLT, so parts of it are futile for JavaScript.

+ +
Note: On October 29th, 2013, the World Wide Web Consortium relased in a note on official algorithm for converting HTML5 microdata to JSON. However, HTML microdata is not HTML: microdata is a formatted subset of HTML.
+ +

Translation JSON

+ +
    +
  1. +

    The root element will be absorbed, for there is only one:

    + + 
    <root>test</root>
    + +

    becomes

    + + 
    "test"
+
    +
    2. +
  2. +

    Element names become object properties:

    + + 
    <root><name>Xml</name><encoding>ASCII</encoding></root>
    + +

    becomes

    + + 
    {
+  "name": "Xml",
+  "encoding": "ASCII"
+}
+
    +
    3. +
  3. +

    Numbers are recognized (integers and decimals):

    + + 
    <root><age>12</age><height>1.73</height></root>
    + +

    becomes

    + + 
    {
+  "age": 12,
+  "height": 1.73
+}
+
    +
    4. +
  4. +

    Booleans are recognized case insensitive:

    + + 
    <root><checked>True</checked><answer>FALSE</answer></root>
    + +

    becomes

    + + 
    {
+  "checked": true,
+  "answer": false
+}
+
    +
    5. +
  5. +

    Strings are escaped:

    + + 
    <root>Quote: &quot; New-line:
+</root>
+
    + +

    becomes

    + + 
    "Quote: \" New-line:\n"
    +
    6. +
  6. +

    Empty elements will become null:

    + + 
    <root><nil/><empty></empty></root>
    + +

    becomes

    + + 
    {
+  "nil": null,
+  "empty": null
+}
+
    +
    7. +
  7. +

    If all sibling elements have the same name, they become an array

    + + 
    <root><item>1</item><item>2</item><item>three</item></root>
+
    + +

    becomes

    + + 
    [1, 2, "three"]
+
    +
    8. +
  8. +

    Mixed mode text-nodes, comments and attributes get absorbed:

    + + 
    <root version="1.0">testing<!--comment--><element test="true">1</element></root>
+
    + +

    becomes

    + + 
    { "element": true }
+
    +
    9. +
  9. +

    Namespaces get absorbed, and prefixes will just be part of the property name:

    + + 
    <root xmlns:ding="http://zanstra.com/ding"><ding:dong>binnen</ding:dong></root>
+
    + +

    becomes

    + + 
    { "ding:dong" : "binnen" }
+
    +
    10. +
+ +
Note: Our algorithms comply with points 2, 3, 4 and 7. The third and the fourth algorithm comply also with point 6 (but true instead of null – see the Code considerations). Point 5 is automatically managed by the JavaScript method JSON.stringify(). Regarding point 9, we chose to ignore all nodes which have a prefix; you can include them by removing the string && !oNode.prefix from our algorithms (see the Code considerations).
+ +

Extra JavaScript translations

+ +

This is the same as the JSON translation, but with these extras:

+ +
    +
  1. +

    Property names are only escaped when necessary

    + + 
    <root><while>true</while><wend>false</wend><only-if/></root>
+
    + +

    becomes

    + + 
    {
+  "while": true,
+  wend: false,
+  "only-if": null
+}
+
    +
    2. +
  2. +

    Within a string, closing elements "</" are escaped as "<\/"

    + + 
    <root><![CDATA[<script>alert("YES");</script>]]></root>
    + +

    becomes

    + + 
    { script: "<script>alert(\"YES\")<\/script>" }
+
    +
    3. +
  3. +

    Dates are created as new Date objects

    + + 
    <root>2006-12-25</root>
    + +

    becomes

    + + 
    new Date(2006, 12 - 1, 25)
+
    +
    4. +
  4. +

    Attributes and comments are shown as comments (for testing purposes):

    + + 
    <!--testing--><root><test version="1.0">123</test></root>
+
    + +

    becomes

    + + 
    /* testing */ { test /* @version = "1.0" */ : 123}
+
    +
    5. +
  5. +

    A bit of indentation is done, to keep things legible

    +
    6. +
+ +
Note: Our algorithms comply with the point 3 (but without month decrease). The points 1 and 2 are automatically managed by the JavaScript method JSON.stringify().
+ +

In summary

+ +

Let's take the third algorithm as the most representative JXON parsing algorithm. A single structured XML Element might have eight different configurations:

+ +
    +
  1. an empty element,
    2. +
  2. an element with pure text content,
    3. +
  3. an empty element with attributes,
    4. +
  4. an element with text content and attributes,
    5. +
  5. an element containing elements with different names,
    6. +
  6. an element containing elements with identical names,
    7. +
  7. an element containing elements and contiguous text,
    8. +
  8. an element containing elements and non contiguous text.
    9. +
+ +

The following table shows the corresponding conversion patterns between XML and JSON according to the third algorithm.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaseXMLJSONJavascript access
1<animal />"animal": truemyObject.animal
2<animal>Deka</animal>"animal": "Deka"myObject.animal
3<animal name="Deka" />"animal": {"@name": "Deka"}myObject.animal["@name"]
4<animal name="Deka">is my cat</animal>"animal": { "@name": "Deka", "keyValue": "is my cat" }myObject.animal["@name"], myObject.animal.keyValue
5<animal> <dog>Charlie</dog> <cat>Deka</cat> </animal>"animal": { "dog": "Charlie", "cat": "Deka" }myObject.animal.dog, myObject.animal.cat
6<animal> <dog>Charlie</dog> <dog>Mad Max</dog> </animal>"animal": { "dog": ["Charlie", "Mad Max"] }myObject.animal.dog[0], myObject.animal.dog[1]
7<animal> in my house <dog>Charlie</dog> </animal>"animal": { "keyValue": "in my house", "dog": "Charlie" }myObject.animal.keyValue, myObject.animal.dog
8<animal> in my ho <dog>Charlie</dog> use </animal>"animal": { "keyValue": "in my house", "dog": "Charlie" }myObject.animal.keyValue, myObject.animal.dog
+ +

Code considerations

+ +

In these examples we chose to use a property named keyValue for the text content. The lack of standards for XML to JSON conversion leads developers to choose a variety of property names for the text content of XML Element nodes that also contain other child nodes. Sometimes a property called $ is used. Other times a property called #text is used (however, a name like this isn't a good choice, since the text content of a node can be parsed into a non-string value by our algorithms during the conversion). In the algorithms proposed here, you can easily change this name, depending on your needs.

+ +

The choice of using a true value instead of a null value to represent empty nodes is due to the fact that when in an XML document there is an empty node the reason is often to express a Boolean, as in this case:

+ +
<car>
+  <type>Ferrari</type>
+  <bought />
+</car>
+
+ +

If the value were null it would be more cumbersome to launch a code like this:

+ +
if (myObject.car.bought) {
+  // do something
+}
+
+ +
Note: According to our third algorithm and our fourth algorithm, just CDATASection nodes which contain nothing but white spaces (precisely: /^\s+$/) will be parsed as null.
+ +

The fourth algorithm represents a special case of conversion. As you can see, the generated JavaScript Object tree is not stringifyable. It is very practical for internal JavaScript access, but don't use it if you want to transfer the tree via JSON string (as for Worker messages, for example).

+ +

We chose to ignore nodes which have a prefix (for example: <ding:dong>binnen</ding:dong>), due to their special case (they are often used in order to represents an XML Schema, which is meta-information concerning how to organize the information of the document, reserved for the XML parser). You can include them removing the string && !oNode.prefix from our algorithms (by doing so the whole tag will become the property name: { "ding:dong": "binnen" }).

+ +

An important consideration is that, when using the third or the fourth algorithm, an XML Document can be used to create any type of JavaScript object. For example, If you want to create an object like the following:

+ +
{
+  "myboolean": true,
+  "myarray": ["Cinema", "Hot dogs", false],
+  "myobject": {
+    "nickname": "Jack",
+    "registration_date": new Date(1995, 11, 25),
+    "privileged_user": true
+  },
+  "mynumber": 99,
+  "mytext": "Hello World!"
+}
+
+ +

you must just create an XML document with the following structure:

+ +
<myboolean>true</myboolean>
+<myarray>Cinema</myarray>
+<myarray>Hot dogs</myarray>
+<myarray>false</myarray>
+<myobject>
+  <nickname>Jack</nickname>
+  <registration_date>Dec 25, 1995</registration_date>
+  <privileged_user />
+</myobject>
+<mynumber>99</mynumber>
+<mytext>Hello World!</mytext>
+
+ +

This example also shows how the ideal JXON document is an XML document designed specifically to be converted in JSON format, though our algorithms work fine with any kind of XML document.

+ +
Note: Despite the term JXON suggesting "lossless" conversions, these techniques are not actually lossless if one needs to preserve ordering of elements, as is common with many XML dialects (including of course XHTML). The ECMAScript standard (JavaScript) indicates that object iteration order is implementation dependent.
+ +

Appendix: a complete, bidirectional, JXON library

+ +

Now we can create a more complete, bidirectional, JXON library based on all our algorithms (see: #1, #2, #3, #4, reverse). Its usage is modeled on the JSON native object. Before implementing it in a working environment, please read the note about the const statement compatibility. The following code is also available on GitHub.

+ +
"use strict";
+
+/*\
+|*|
+|*|  JXON framework - Copyleft 2011 by Mozilla Developer Network
+|*|
+|*|  Revision #3 - October 31th, 2016
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/JXON
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/jxon.js
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+\*/
+
+const JXON = new (function () {
+
+  function parseText (sValue) {
+    if (rIsNull.test(sValue)) { return null; }
+    if (rIsBool.test(sValue)) { return sValue.toLowerCase() === "true"; }
+    if (isFinite(sValue)) { return parseFloat(sValue); }
+    if (isFinite(Date.parse(sValue))) { return new Date(sValue); }
+    return sValue;
+  }
+
+  function EmptyTree () {}
+
+  EmptyTree.prototype.toString = function () { return "null"; };
+
+  EmptyTree.prototype.valueOf = function () { return null; };
+
+  function objectify (vVal) {
+    return vVal === null ? new EmptyTree() : vVal instanceof Object ? vVal : new vVal.constructor(vVal);
+  }
+
+  function createObjTree (oParentNode, nVerb, bFreeze, bNesteAttr) {
+
+    const
+      nLevelStart = aCache.length, bChildren = oParentNode.hasChildNodes(),
+      bAttributes = oParentNode.hasAttributes && oParentNode.hasAttributes(), bHighVerb = Boolean(nVerb & 2);
+
+    var
+      sProp, vContent, nLength = 0, sCollectedTxt = "",
+      vResult = bHighVerb ? {} : /* put here the default value for empty nodes: */ true;
+
+    if (bChildren) {
+      for (var oNode, nItem = 0; nItem < oParentNode.childNodes.length; nItem++) {
+        oNode = oParentNode.childNodes.item(nItem);
+        if (oNode.nodeType === 4) { sCollectedTxt += oNode.nodeValue; } /* nodeType is "CDATASection" (4) */
+        else if (oNode.nodeType === 3) { sCollectedTxt += oNode.nodeValue.trim(); } /* nodeType is "Text" (3) */
+        else if (oNode.nodeType === 1 && !oNode.prefix) { aCache.push(oNode); } /* nodeType is "Element" (1) */
+      }
+    }
+
+    const nLevelEnd = aCache.length, vBuiltVal = parseText(sCollectedTxt);
+
+    if (!bHighVerb && (bChildren || bAttributes)) { vResult = nVerb === 0 ? objectify(vBuiltVal) : {}; }
+
+    for (var nElId = nLevelStart; nElId < nLevelEnd; nElId++) {
+      sProp = aCache[nElId].nodeName.toLowerCase();
+      vContent = createObjTree(aCache[nElId], nVerb, bFreeze, bNesteAttr);
+      if (vResult.hasOwnProperty(sProp)) {
+        if (vResult[sProp].constructor !== Array) { vResult[sProp] = [vResult[sProp]]; }
+        vResult[sProp].push(vContent);
+      } else {
+        vResult[sProp] = vContent;
+        nLength++;
+      }
+    }
+
+    if (bAttributes) {
+
+      const
+        nAttrLen = oParentNode.attributes.length,
+        sAPrefix = bNesteAttr ? "" : sAttrsPref, oAttrParent = bNesteAttr ? {} : vResult;
+
+      for (var oAttrib, nAttrib = 0; nAttrib < nAttrLen; nLength++, nAttrib++) {
+        oAttrib = oParentNode.attributes.item(nAttrib);
+        oAttrParent[sAPrefix + oAttrib.name.toLowerCase()] = parseText(oAttrib.value.trim());
+      }
+
+      if (bNesteAttr) {
+        if (bFreeze) { Object.freeze(oAttrParent); }
+        vResult[sAttrProp] = oAttrParent;
+        nLength -= nAttrLen - 1;
+      }
+
+    }
+
+    if (nVerb === 3 || (nVerb === 2 || nVerb === 1 && nLength > 0) && sCollectedTxt) {
+      vResult[sValProp] = vBuiltVal;
+    } else if (!bHighVerb && nLength === 0 && sCollectedTxt) {
+      vResult = vBuiltVal;
+    }
+
+    if (bFreeze && (bHighVerb || nLength > 0)) { Object.freeze(vResult); }
+
+    aCache.length = nLevelStart;
+
+    return vResult;
+
+  }
+
+  function loadObjTree (oXMLDoc, oParentEl, oParentObj) {
+
+    var vValue, oChild;
+
+    if (oParentObj.constructor === String || oParentObj.constructor === Number || oParentObj.constructor === Boolean) {
+      oParentEl.appendChild(oXMLDoc.createTextNode(oParentObj.toString())); /* verbosity level is 0 or 1 */
+      if (oParentObj === oParentObj.valueOf()) { return; }
+    } else if (oParentObj.constructor === Date) {
+      oParentEl.appendChild(oXMLDoc.createTextNode(oParentObj.toGMTString()));
+    }
+
+    for (var sName in oParentObj) {
+      vValue = oParentObj[sName];
+      if (isFinite(sName) || vValue instanceof Function) { continue; } /* verbosity level is 0 */
+      if (sName === sValProp) {
+        if (vValue !== null && vValue !== true) { oParentEl.appendChild(oXMLDoc.createTextNode(vValue.constructor === Date ? vValue.toGMTString() : String(vValue))); }
+      } else if (sName === sAttrProp) { /* verbosity level is 3 */
+        for (var sAttrib in vValue) { oParentEl.setAttribute(sAttrib, vValue[sAttrib]); }
+      } else if (sName.charAt(0) === sAttrsPref) {
+        oParentEl.setAttribute(sName.slice(1), vValue);
+      } else if (vValue.constructor === Array) {
+        for (var nItem = 0; nItem < vValue.length; nItem++) {
+          oChild = oXMLDoc.createElement(sName);
+          loadObjTree(oXMLDoc, oChild, vValue[nItem]);
+          oParentEl.appendChild(oChild);
+        }
+      } else {
+        oChild = oXMLDoc.createElement(sName);
+        if (vValue instanceof Object) {
+          loadObjTree(oXMLDoc, oChild, vValue);
+        } else if (vValue !== null && vValue !== true) {
+          oChild.appendChild(oXMLDoc.createTextNode(vValue.toString()));
+        }
+        oParentEl.appendChild(oChild);
+      }
+    }
+
+  }
+
+  /* Uncomment the following code if you want to enable the .appendJXON() method for *all* the "element" objects! */
+
+  /*
+
+  Element.prototype.appendJXON = function (oObjTree) {
+    loadObjTree(document, this, oObjTree);
+    return this;
+  };
+
+  */
+
+  this.build = function (oXMLParent, nVerbosity /* optional */, bFreeze /* optional */, bNesteAttributes /* optional */) {
+    const nVerbMask = arguments.length > 1 && typeof nVerbosity === "number" ? nVerbosity & 3 : /* put here the default verbosity level: */ 1;
+    return createObjTree(oXMLParent, nVerbMask, bFreeze || false, arguments.length > 3 ? bNesteAttributes : nVerbMask === 3);
+  };
+
+  this.unbuild = function (oObjTree, sNamespaceURI /* optional */, sQualifiedName /* optional */, oDocumentType /* optional */) {
+    const oNewDoc = document.implementation.createDocument(sNamespaceURI || null, sQualifiedName || "", oDocumentType || null);
+    loadObjTree(oNewDoc, oNewDoc, oObjTree);
+    return oNewDoc;
+  };
+
+  const
+    sValProp = "keyValue", sAttrProp = "keyAttributes", sAttrsPref = "@", /* you can customize these values */
+    aCache = [], rIsNull = /^\s*$/, rIsBool = /^(?:true|false)$/i;
+
+})();
+
+ +
Note: The current implementation of const (constant statement) is not part of ECMAScript 5. It is supported in Firefox & Chrome (V8) and partially supported in Opera 9+ and Safari. It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10. const is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the let statement, constants declared with const will be block-scoped. We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the const statements with the var statements.
+ +

Usage

+ +

The obtained non-native JXON global object will have two methods:

+ + + + + + + + + + + + + + + + +
MethodDescription
JXON.build(document[, verbosity[, freeze[, nesteAttributes]]])Returns a JavaScript Object based on the given XML Document.
JXON.unbuild(objTree[, namespaceURI[, qualifiedNameStr[, documentType]]])Returns an XML Document based on the given JavaScript Object.
+ +

These methods are inverses of each other. So, you can work with the JXON object by inserting the previous code at the beginning of your scripts. If you are not interested in a bidirectional conversion, don't use it, use only one of our algotithm instead.

+ +

Sample usage:

+ +
var myObject = JXON.build(doc);
+// we got our javascript object! try: alert(JSON.stringify(myObject));
+
+var newDoc = JXON.unbuild(myObject);
+// we got our Document instance! try: alert((new XMLSerializer()).serializeToString(newDoc));
+ +

…the same thing using AJAX:

+ +
function reqListener () {
+
+    var myObject = JXON.build(this.responseXML);
+    // we got our javascript object!
+    alert(JSON.stringify(myObject));
+
+    var newDoc = JXON.unbuild(myObject);
+    // we got our Document instance!
+    alert((new XMLSerializer()).serializeToString(newDoc));
+
+};
+
+var oReq = new XMLHttpRequest();
+oReq.onload = reqListener;
+oReq.open("get", "example.xml", true);
+oReq.send();
+ +

JXON.build syntax

+ +

JXON.build(document[, verbosity[, freeze[, nesteAttributes]]])

+ +

JXON.build description

+ +

Returns a JavaScript Object based on the given XML Document.

+ +

JXON.build parameters

+ +
+
document
+
The XML document to be converted into JSON format.
+
verbosity Optional
+
The verbosity level of conversion (optional), from 0 to 3. It is almost equivalent to our algorithms from #4 to #1 (default value is 1, which is equivalent to the algorithm #3).
+
freeze Optional
+
A boolean (optional) expressing whether the created object must be freezed or not (default value is false).
+
nesteAttributes Optional
+
A boolean (optional) expressing whether the the nodeAttributes must be nested into a child-object named keyAttributes or not (default value is false for verbosity levels from 0 to 2; true for verbosity level 3).
+
+ +

JXON.unbuild syntax

+ +

JXON.unbuild(objTree[, namespaceURI[, qualifiedNameStr[, documentType]]])

+ +

JXON.unbuild description

+ +

Returns an XML Document based on the given JavaScript Object.

+ +

JXON.unbuild parameters

+ +
+
objTree
+
The JavaScript Object from which you want to create your XML Document.
+
namespaceURI Optional
+
Is a DOMString containing the namespace URI of the document to be created, or null if the document doesn't belong to one.
+
qualifiedNameStr Optional
+
Is a DOMString containing the qualified name, that is an optional prefix and colon plus the local root element name, of the document to be created.
+
documentType Optional
+
Is the DocumentType of the document to be created. It defaults to null.
+
+ +

Extend the native Element.prototype object

+ +

If you want to enable the .appendJXON() method for all the native element objects, you can uncomment the following code from the JXON library:

+ +
  /* Uncomment the following code if you want to enable the .appendJXON() method for *all* the "element" objects! */
+
+  /*
+
+  Element.prototype.appendJXON = function (oObjTree) {
+    loadObjTree(document, this, oObjTree);
+    return this;
+  };
+
+  */
+ +

Example

+ +

Imagine you want to populate the following HTMLElement through JSON:

+ +
<div id="form_container"></div>
+ +

Then, the following code:

+ +
document.getElementById("form_container").appendJXON({
+  "form": {
+    "script": {
+      "@type": "text/javascript",
+      "keyValue": "\n  function numbersOnly (oToCheckField, oKeyEvent) {\n  return oKeyEvent.charCode === 0 || /\\d/.test(String.fromCharCode(oKeyEvent.charCode));\n  }\n"
+    },
+    "input": [{
+      "@type": "hidden",
+      "@name": "instId",
+      "@value": 1234
+    }, {
+      "@type": "hidden",
+      "@name": "currency",
+      "@value": "GBP"
+    }, {
+      "@type": "hidden",
+      "@name": "amount",
+      "@value": 0
+    }, {
+      "@type": "hidden",
+      "@name": "name",
+      "@value": "CAPTURED"
+    }],
+    "table": {
+      "tr": [{
+        "th": {
+          "@style": "text-align: right;",
+          "keyValue": "Product:"
+        },
+        "td": {
+          "span": [{
+            "input": {
+              "@type": "radio",
+              "@name": "nome",
+              "@id": "rel_tshirt",
+              "@value": "tshirt"
+            },
+            "label": {
+              "@for": "rel_tshirt",
+              "keyValue": "T-Shirt"
+            },
+            "@class": "product"
+          }, {
+            "input": {
+              "@type": "radio",
+              "@name": "nome",
+              "@id": "rel_trousers",
+              "@value": "trousers"
+            },
+            "label": {
+              "@for": "rel_trousers",
+              "keyValue": "Trousers"
+            },
+            "@class": "product"
+          }, {
+            "input": {
+              "@type": "radio",
+              "@name": "nome",
+              "@id": "rel_pullover",
+              "@value": "pullover"
+            },
+            "label": {
+              "@for": "rel_pullover",
+              "keyValue": "Pullover"
+            },
+            "@class": "product"
+          }]
+        }
+      }, {
+        "th": {
+          "@style": "text-align: right;",
+          "keyValue": "Quantity:"
+        },
+        "td": {
+          "input": {
+            "@type": "text",
+            "@name": "myInput",
+            "@onkeypress": "return numbersOnly(this, event);",
+            "@onpaste": "return false;"
+          }
+        }
+      }]
+    },
+    "p": {
+      "input": {
+        "@type": "submit",
+        "@value": "Purchase!"
+      }
+    },
+    "@action": "https://secure-test.worldpay.com/wcc/purchase",
+    "@name": "BuyForm",
+    "@method": "POST"
+  }
+});
+ +

will populate the previous element in the following way:

+ +
<div id="form_container">
+  <form action="https://secure-test.worldpay.com/wcc/purchase" name="BuyForm" method="POST">
+    <script type="text/javascript">
+      function numbersOnly(oToCheckField, oKeyEvent) {
+        return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode));
+      }
+    </script>
+    <input type="hidden" name="instId" value="1234" />
+    <input type="hidden" name="currency" value="GBP" />
+    <input type="hidden" name="amount" value="0" />
+    <input type="hidden" name="name" value="CAPTURED" />
+    <table>
+      <tr>
+        <th style="text-align: right;">Product:</th>
+        <td><span class="product"><input type="radio" name="nome" id="rel_tshirt" value="tshirt"/><label for="rel_tshirt">T-Shirt</label></span><span class="product"><input type="radio" name="nome" id="rel_trousers" value="trousers"/><label for="rel_trousers">Trousers</label></span><span class="product"><input type="radio" name="nome" id="rel_pullover" value="pullover"/><label for="rel_pullover">Pullover</label></span>
+        </td>
+      </tr>
+      <tr>
+        <th style="text-align: right;">Quantity:</th>
+        <td>
+          <input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" />
+        </td>
+      </tr>
+    </table>
+    <p>
+      <input type="submit" value="Purchase!" />
+    </p>
+  </form>
+</div>
+ +

Other examples

+ +

Example #1: How to use JXON to create an HTML document instead of an XML document:

+ +
/* The structure of my document */
+var oMyHTMLStruct = {
+  "html": {
+    "head": {
+      "meta": {
+        "@http-equiv": "Content-Type",
+        "@content": "text/html; charset=UTF-8"
+      },
+      "title": "My HTML Document",
+      "script": {
+        "@type": "text/javascript",
+        "keyValue": "alert(\"Welcome!\");"
+      },
+      "style": "p:first-letter {\n  font: italic bold 30px Georgia, serif;\n}"
+    },
+    "body": {
+      "h1": "My HTML Document",
+      "p": "Hello world!!"
+    }
+  }
+};
+
+/* Create the document */
+var oMyHTMLDoc = JXON.unbuild(oMyHTMLStruct, "http://www.w3.org/1999/xhtml");
+ +

…And here is the output of alert((new XMLSerializer()).serializeToString(oMyHTMLDoc)):

+ +
<html>
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <title>My HTML Document</title>
+  <script type="text/javascript">
+    alert("Welcome!");
+  </script>
+  <style>
+    p:first-letter {
+      font: italic bold 30px Georgia, serif;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>My HTML Document</h1>
+  <p>Hello world!!</p>
+</body>
+
+</html>
+ +
Note: As we already said in the note within Code considerations, despite the bidirectional conversion between XML and JSON is lossless regarding the whole content and the structure of an XML document, it is not lossless regarding the ordering of elements, which for some XML dialects (like XHTML) is part of the information. For instance, a bidirectional conversion of the following HTML paragraph: + +
<p>She <strong>loves</strong> you. And definitely <strong>hates</strong> me.</p>
+would determine a result like the following: + +
<p><strong>loves</strong><strong>hates</strong>Sheyou. And definitelyme.</p>
+As you can see in this special case, the whole information is preserved, the ordering of the elements is not.
+It turns out then that for some XML dialects JXON can be not the best choise, while it can be a really powerful tool in dealing with standard XML. One conversion method which is lossless for element order, as it relies on arrays (but, with a less human-readable, JavaScript-friendly syntax), is JsonML.
+ +

About this library

+ +

The JXON.build() method summarizes all our four ways of conversion (see: #1, #2, #3, #4). The result is therefore the same of our four algorithms, depending on the level of verbosity utilised. As above, optional properties and methods (commented in the example) of the first algorithm (verbosity level: 3) are not included.

+ +

The JXON.unbuild() method utilises our reverse algorithm.

+ +

Therefore, all code considerations remain the same.

+ +

Resources

+ + + +

See also

+ + diff --git a/files/es/archive/mdn/index.html b/files/es/archive/mdn/index.html new file mode 100644 index 0000000000..95f78220b5 --- /dev/null +++ b/files/es/archive/mdn/index.html @@ -0,0 +1,16 @@ +--- +title: MDN +slug: Archive/MDN +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/MDN +--- +

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

+ +

The documentation listed below is archived, obsolete material about MDN itself.

+ +

+
Content kits
MDN Content Kits are subject-based collections of technical resources to help you host a local developer meetup or give a technical presentation at an event, conference, or workshop.
How to link a GitHub account to your MDN profile
All users who wish to contribute to MDN must add a GitHub login to their MDN account in order to edit. This article describes how to add GitHub authentication to your MDN profile.
MDN and Persona sign-ins
Starting on November 1, 2016, we only support GitHub for logging into MDN. If you didn't add a GitHub login to your MDN account before we disabled Persona logins, please file an "Account Help" bug on Bugzilla.
+
Subject-matter experts
This article's purpose is to help writers find the Mozilla developers who have answers for questions about various technologies. If you're an engineer on any Mozilla project, please make sure your technology is on this list and that the contact information for your group is provided.
Zones
A zone is a special area of MDN whose content is presented with some added user interface elements, such as a special zone navigation box and enhanced visuals in the header area of the page.
+

diff --git a/files/es/archive/meta_docs/index.html b/files/es/archive/meta_docs/index.html new file mode 100644 index 0000000000..b81d50a9bc --- /dev/null +++ b/files/es/archive/meta_docs/index.html @@ -0,0 +1,15 @@ +--- +title: MDN "meta-documentation" archive +slug: Archive/Meta_docs +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/Meta_docs +--- +

Here you'll find archived "meta-documentation"; that is, documentation about how to write documentation on MDN. The articles here are obsolete and should no longer be referenced; we are retaining them here for reference while we migrate some content to new places, but very little of this is useful.

+

+
Clases CSS
Estas son las clases CSS que hemos definido para los wikis del MDC. Si por alguna razón necesitas una clase CSS a medida para las páginas que edites, puedes ponerte en contacto con Dria.
MDN page layout guide
These guides supplement the MDN style guide with specific layouts for the various types of pages on MDN. This helps contributors create new content that's structurally consistent with the rest of MDN.
+
+

diff --git a/files/es/archive/meta_docs/mdn_content_on_webplatform.org/index.html b/files/es/archive/meta_docs/mdn_content_on_webplatform.org/index.html new file mode 100644 index 0000000000..efe6963c37 --- /dev/null +++ b/files/es/archive/meta_docs/mdn_content_on_webplatform.org/index.html @@ -0,0 +1,19 @@ +--- +title: MDN content on WebPlatform.org +slug: Archive/Meta_docs/MDN_content_on_WebPlatform.org +translation_of: Archive/Meta_docs/MDN_content_on_WebPlatform.org +--- +

Web Platform Docs (WPD) is a site for documentation and education about Web standards, run by W3C and supported by Mozilla, among others. Anyone is welcome to contribute content from MDN to WebPlatform.org, under the terms of MDN's Creative Commons Share-Alike 2.5 (CC-BY-SA) license. Content that originates from MDN must be attributed to MDN, with a link to the source article. The Web Platform Docs site provides support for doing this in a systematic way.

+ +

If you create an account on WPD and create a new page, you’ll see that there is an option in the "new page" form to indicate that the content you’re contributing came from MDN, and to provide the original URL on MDN. There is also a way on WPD to mark sections of articles as coming from MDN, for cases where they get merged into CC-BY content. (CC-BY is the default license for reuse on WPD.) The External Attribution page on WebPlatform.org describes how to do all of that.

+ +

Questions?

+ +
+
About MDN or its content
+
Post them to MDN's discussion forum, or ask in #mdn on irc.mozilla.org.
+
About Mozilla's license terms
+
Send e-mail to licensing@mozilla.org.
+
About Web Platform Docs, its content, its license, or its terms-of-use
+
Post them to the public-webplatform mailing list, run by W3C, or ask in #webplatform on irc.freenode.org.
+
diff --git a/files/es/archive/meta_docs/mdn_page_layout_guide/index.html b/files/es/archive/meta_docs/mdn_page_layout_guide/index.html new file mode 100644 index 0000000000..018759b970 --- /dev/null +++ b/files/es/archive/meta_docs/mdn_page_layout_guide/index.html @@ -0,0 +1,10 @@ +--- +title: MDN page layout guide +slug: Archive/Meta_docs/MDN_page_layout_guide +translation_of: Archive/Meta_docs/MDN_page_layout_guide +--- +
+

These guides supplement the MDN style guide with specific layouts for the various types of pages on MDN. This helps contributors create new content that's structurally consistent with the rest of MDN.

+
+ +

There are no subpages at this time.

diff --git "a/files/es/archive/misc_top_level/im\303\241genes,_tablas_y_huecos_misteriosos/index.html" "b/files/es/archive/misc_top_level/im\303\241genes,_tablas_y_huecos_misteriosos/index.html" new file mode 100644 index 0000000000..6c3febef05 --- /dev/null +++ "b/files/es/archive/misc_top_level/im\303\241genes,_tablas_y_huecos_misteriosos/index.html" @@ -0,0 +1,97 @@ +--- +title: 'Imágenes, tablas y huecos misteriosos' +slug: 'Archive/Misc_top_level/Imágenes,_tablas_y_huecos_misteriosos' +tags: + - CSS + - Todas_las_Categorías +translation_of: 'Archive/Misc_top_level/Images,_Tables,_and_Mysterious_Gaps' +--- +

 

+

No importa cuándo hayas empezado a crear páginas web, es muy probable que tengas uno o más diseños basados en el clásico paradigma de "Tablas complicadas y muchas imágenes". Puede que hayas cortado algún logo para que encajara bien en el diseño, o usado un montón de GIF espaciadores de un píxel, los principios y peligros son los mismos. En el pasado, esta forma de maquetar funcionaba porque los navegadores creaban las celdas tan altas y anchas como la imagen que contenían.

+

A partir de 2001 y el auge de los navegadores conformes que muestran las páginas usando HTML y CSS en vez de sus propios algoritmos de diseño, y a causa de un detalle poco conocido de la especificación de CSS, todo diseño basado en maquetación con tablas e imágenes espaciadoras se ha convertido en un desastre visual esperando ser visitado. Todo lo que necesitas es un navegador moderno, un DOCTYPE apropiado, y... ¡Boom!

+

Los componentes

+

Veamos más de cerca la reproducción del problema, y el porqué del mismo. Empezaremos con un ejemplo sencillo, ilustrado en la Figura 1: una celda de una tabla que contiene una imagen.

+

Figura 1

+

Evidentemente la mayoría de los diseños son más complicados que este, pero no necesitamos más para lo que nos proponemos. Una imagen y una celda es todo lo que necesitamos. Aparentemente no hay nada incorrecto en ese ejemplo. Y no debería haberlo, ya que es una muestra de cómo los navegadores se comportaban tradicionalmente.

+

Veamos ahora cómo es mostrada esa misma tabla en un navegador moderno cuando la página tiene un DOCTYPE estricto.

+

Figura 2

+

Observa el espacio que aparece debajo de la imagen en la Figura 2. El diseño de ambas tablas y celdas es el mismo, es el modo de renderizado el que ha cambiado. La celda, en vez de ceñirse a las dimensiones de la imagen, ahora envuelve también la línea en la que reposa la imagen. La imagen reposa en una línea porque las imágenes son, por defecto, contenido en línea. Eso es lo que pasa.

+

Cómo se construye el contenido en línea

+

Para entender qué ha sucedido, veremos la construcción de una línea, el emplazamiento de las imágenes dentro de una línea, y el emplazamiento de una línea dentro de la celda de una tabla. Primero veamos una línea básica que contiene texto, como la de la Figura 3.

+

Figura 3

+

La parte más importante de la Figura 3 es la línea base (representada con una línea azul), y su posición dentro de la línea. El emplazamiento exacto de la línea base depende de la tipografía por "defecto" de la línea (representada por el cuadro rojo). La tipografía está determinada por el valor de font-family del elemento que contiene la línea. El autor no puede cambiar la línea base directamente; por eso, donde quiera que esté, ahí se queda. El espacio debajo de la línea base se llama "espacio de descenso" ya que es hasta donde desciende el trazo inferior de letras como "j", "y", o "q". La Figura 4 nos muestra qué pasa cuando añadimos una imagen a la composición.

+

Figura 4

+

Observa dónde reposa por defecto la imagen: su parte inferior esta alineada con la línea base. Este emplazamiento se puede cambiar con vertical-align, hablaremos de ello en breve, pero casi nadie cambia su valor por defecto. Quitemos el texto y dejemos sólo la imagen, como hemos hecho en la Figura 5.

+

Figura 5

+

Tenemos una imagen posada en la línea base de la línea que contiene la imagen. Veamos qué ocurre cuando ponemos esa línea en la celda de una tabla (Figura 6).

+

Figura 6

+

Aquí lo tienes, espacios abiertos donde nunca se han visto antes. Es incluso peor con imágenes pequeñas, como las espaciadoras de un píxel, como la que se muestra en la Figura 7.

+

Figura 7

+

Ahora sobra espacio por todos lados. Suficiente para volver loco a cualquier diseñador.

+

¿Qué tal si lo arreglamos?

+

Hay una solución evidente, dejar de crear diseños que dependan de tablas e imágenes espaciadoras o recortadas. Pero para muchos diseñadores esto no resulta práctico, y seguro que no ayudará a arreglar diseños antiguos que de repente se ven mal en los navegadores actuales. Hay otra solución, asegurarte de que tu documento no activa el modo de renderizado "estándar".

+

Puedes hacerlo usando un DOCTYPE que active el modo quirks o el modo "casi estándar", o no usando ningún DOCTYPE. No usar DOCTYPE te impedirá validar el código, por lo que no es recomendable. Para los autores que estén trabajando con documentos heredados, el modo "quirks" es la mejor opción. En los casos en los que el autor esté escribiendo documentos nuevos o intentando migrar un diseño para hacerlo tan estándar como sea posible, entonces el modo "casi estándar" será probablemente la mejor elección.

+

Por supuesto, los documentos creados en XHTML estricto o HTML estricto usarán el modo de renderizado "estándar", por lo que tenemos dos vías para solventar el problema en los documentos estrictos.

+

Poner las imágenes en bloque

+

La primera opción, que funcionará para la mayoría de los diseños con mucho contenido gráfico, es convertir la imagen que es inicialmente un elemento en línea, en un elemento en bloque. Hazlo y no se generará nunca más una imagen en línea, y así el problema queda resuelto, esto asumiendo que esa imagen es la única cosa que está en esa celda. En los casos simples, podemos añadir en el css un estilo como este:

+
 td img {display: block;}
+

Este recurso se aplica no sólo a las imágenes sino también a los objetos como por ejemplo las animaciones Flash (swf). Para los objetos debemos introducir en el css la línea:

+
 td object {display: block;}
+


+Considera esta regla cuando la aplicamos al siguiente código:

+
<table cellspacing="0" cellpadding="0" border="0" width="500">
+<tr> <td> <img src="boton1.gif"> <img src="boton2.gif"> <img src="boton3.gif">
+          <img src="boton4.gif"> <img src="boton5.gif"> </td> </tr>
+<tr> <td style="background: red;">
+          <img src="puntorojo.gif" height="1" width="1"> </td> </tr>
+<tr> <td>
+        <p style="margin: 0.5em;">Este texto esta en otra celda de la tabla.
+         Dentro del texto hay un icono <img src="icon2.gif">
+         que indica que el enlace apunta a otra página.  Es muy astuto. </p> </td> </tr>
+</table>
+
+

Como podemos ver en la Figura 8, eso funciona bien en algunos casos pero no tanto en otros.

+

Figura 8

+

La línea roja muestra que el GIF espaciador de un píxel está haciendo ahora que la celda tenga un píxel de alto, como el diseñador pretendía. Por desgracia, ahora los botones de la celda están todos en bloque, y por eso aparecen uno debajo del otro, en vez de mostrarse uno al lado del otro.

+

Una posible solución es añadir un class a cualquier imagen que necesite estar en bloque y después escribir la regla que se adapte.

+
td img.enbloque {display: block;}
+
+<td><img src="reddot.gif" class="enbloque"></td>
+

Dependiendo del diseño, puede que tengamos que añadir muchos class para conseguir este simple efecto. Aún más si hay varias celdas de un píxel que se espere que creen "stacked lines" o algo parecido. Si tienes un código de este tipo, puedes aplicar la clase en las filas de la tabla en vez de en las imágenes. Para lo que tendrás:

+
  tr.enbloque img {display: block;}
+
+

...así como el siguiente cambio en el código html:

+
<tr class="enbloque"><td style="background: red;">
+<img src="puntorojo.gif" height="1" width="1">
+</td></tr>
+

El resultado es que sólo el GIF espaciador está en bloque, así dejamos las otras imágenes tranquilas. Esto nos lleva al resultado que se ve en la Figura 9.

+

Figura 9

+

Como alternativa, si lo prefieres, puedes ponerle la clase a las celdas en vez de a las filas. En cualquier caso, poner las imágenes en bloque puede provocar efectos indeseados si las celdas de tus tablas contienen más de una imagen, como en la Figura 8.

+

Por supuesto, aunque tenemos un espaciador de celda de un píxel en la Figura 9, hay un espacio indeseado justo debajo de los botones de navegación de la parte superior. Deshacerse de este espacio es tan fácil como poner cada imagen en su propia celda y hacer que todas estén en bloque, pero dejémoslas todas juntas en una única celda y así podremos ilustrar otro ejemplo.

+

Usar la alineación vertical

+

Otra elección habitual es dejar la imagen en línea y modificar el alineamiento vertical de la imagen con respecto a la caja de la línea. Por ejemplo, puedes probar lo siguiente:

+
td img {vertical-align: bottom;}
+

Esto hará que el borde inferior de las imágenes se alinee con la parte inferior de la caja de la línea, en vez de alinearse con la línea base. Como podemos ver en el la Figura 10, tiene el efecto deseado: el espacio debajo de las imágenes de la barra de navegación ha desaparecido. Sin embargo, la celda decorativa es aún demasiado alta, y otras imágenes esta desalineadas respecto del texto de circundante.

+

Figura 10

+

De nuevo, podemos ponerle clases a las imágenes, celdas, o filas para reducir el efecto del problema. Sin embargo, los estilos anteriormente mostrados no solucionarán el problema de las imágenes de un píxel, porque la caja en línea que la contiene tendrá la altura que tenga el tamaño de la fuente, y por ello no nos lo reducirá. La imagen se moverá a la parte inferior de la celda, pero la celda no se ajustará a la imagen. Además, cualquier otra imagen que sea más pequeña que la altura de la caja de la línea tendrá espacio alrededor, como pasaba con la celda espaciadora roja. La imagen de un píxel en la celda se alineará con la parte inferior de la misma, pero la caja en línea ha vuelto y con el tamaño del texto normal.

+

Mira, por ejemplo, la Figura 11, donde el tamaño de la fuente del documento es bastante grande. Las imágenes de la barra de navegación tienen ahora un espacio encima, y el espaciador rojo ahora es incluso más grande.

+

Figura 11

+

Es difícil evitar esto, ya que las imágenes aún están en línea y por eso participan en la creación de la caja en línea. Si esa caja en línea se hace lo suficientemente alta, aparecerá un espacio rodeando las imágenes.

+

Esperando una solución

+

Gracias a la minuciosa implementación de CSS 2 por parte de Mozilla, el problema de las imágenes en línea dentro de celdas que crean espacios indeseados ha llamado la atención del grupo de trabajo de CSS. Se han planteado varias propuestas para solucionar el problema, una de las más prometedoras es la propiedad line-box-contain, que ha sido propuesta para su inclusión en CSS 3. Cuando esta propiedad sea adoptada, cualquier navegador que la implemente podrá emular el comportamiento tradicional de "reducción" sin modificar otros diseños con la siguiente regla:

+
td {line-box-contain: font replaced;}  /* propuesto para CSS3 */
+

Hay otros posibles arreglos dentro del plan de trabajo actual de CSS3, como la line-height-policy. Evidentemente, cuanto antes se encuentre e implemente una solución, antes se complacerá a todos los autores.

+

Recomendaciones

+

Sin soporte para CSS3 es difícil facilitar una serie de pasos a seguir para solucionar todas las variantes de este problema, ya que la mejor solución para un documento dado dependerá en gran medida de su estructura. Si tu documento usa un marcado transitional, asegúrate de que tu DOCTYPE refleja ese hecho y no activa el modo "estándar". Esto evitará que los navegadores usen el renderizado estándar, y de esta manera se evitan todos los problemas de diseño en las imágenes. Si estas usando HTML estricto, o necesitas por otros motivos el renderizado "estándar", entonces recuerda estas pautas:

+ +

Con una juiciosa mezcla de aproximaciones y reduciendo los trucos con imágenes de un píxel, los cuales -en un navegador que implemente CSS- son innecesarios, es posible evitar estos efectos extraños derivados de la implementación de los estándares. La mejor solución podría ser asegurarse que las imágenes están siempre en una celda ellas solas, esto permite a los autores ponerlas en bloque, pero como siempre esto dependerá del diseño del autor.

+

Enlaces relacionados

+ +
+

Información del documento original

+
+

 

+

diff --git a/files/es/archive/misc_top_level/index.html b/files/es/archive/misc_top_level/index.html new file mode 100644 index 0000000000..95bf3b61ab --- /dev/null +++ b/files/es/archive/misc_top_level/index.html @@ -0,0 +1,8 @@ +--- +title: Misc top level +slug: Archive/Misc_top_level +translation_of: Archive/Misc_top_level +--- +

In progress. These pages were moved from the top level of MDN in a spate of furious reorganization.

+ +

diff --git a/files/es/archive/misc_top_level/usar_las_preferencias_de_contenido/index.html b/files/es/archive/misc_top_level/usar_las_preferencias_de_contenido/index.html new file mode 100644 index 0000000000..d188b50bf4 --- /dev/null +++ b/files/es/archive/misc_top_level/usar_las_preferencias_de_contenido/index.html @@ -0,0 +1,38 @@ +--- +title: Usar las preferencias de contenido +slug: Archive/Misc_top_level/Usar_las_preferencias_de_contenido +tags: + - Firefox 3 +translation_of: Archive/Misc_top_level/Using_content_preferences +--- +

+Firefox 3 introduce el concepto de las preferencias sobre el contenido. Esto permite ejecutar código dentro del chrome (en otras palabras: las extensiones y el navegador en sí, no los sitios web) para guardar las preferencias a nivel local en cada sitio. Esto hace posible escribir una extensión que permita al usuario personalizar la apariencia de sitios web específicos (por ejemplo, poner el tamaño de letra más grande en los sitios que utilizan fuentes muy pequeñas). +

El servicio de preferencias de contenido, ejecutado por nsIContentPrefService, ofrece funciones para fijar y recuperar las preferencias para determinados sitios o preferencias globales. Las preferencias globales se utilizan cada vez que una preferencia para un sitio específico no está disponible. +

+

Ejemplo: Configurar y recuperar preferencias

+

Este ejemplo demuestra como guardar preferencias y después recuperarlas

+
var ioSvc = Components.classes["@mozilla.org/network/io-service;1"]
+            .getService(Components.interfaces.nsIIOService);
+var prefService = Components.classes["@mozilla.org/content-pref/service;1"]
+                  .getService(Components.interfaces.nsIContentPrefService);
+
+// Crea un objeto URI con la referencia del sitio por el cual se guardará la preferencia
+var uri = ioSvc.newURI("http://developer.mozilla.org/", null, null);
+
+// Define el valor de la preferencia "devmo.somesetting" a "foo".
+
+prefService.setPref(uri, "devmo.somesetting", "foo");
+
+...
+
+// Devuelve el valor de la preferencia "devmo.somesetting".
+
+var value = prefService.getPref(uri, "devmo.somesetting");
+
+

Véase también

+

nsIContentPrefService, nsIContentPrefObserver +


+


+

+
+
diff --git a/files/es/archive/mozilla/firefox/el_uso_de_microformatos/index.html b/files/es/archive/mozilla/firefox/el_uso_de_microformatos/index.html new file mode 100644 index 0000000000..e264fc04c9 --- /dev/null +++ b/files/es/archive/mozilla/firefox/el_uso_de_microformatos/index.html @@ -0,0 +1,218 @@ +--- +title: El uso de microformatos +slug: Archive/Mozilla/Firefox/El_uso_de_microformatos +tags: + - Firefox 3 + - Microformatos +translation_of: Archive/Mozilla/Firefox/Using_microformats +--- +

Los microformatos permiten a un sitio web ofrecer datos semánticos a los navegadores de forma que sea posible presentar resúmenes de la información en una página sin que sea necesario saber cómo analizar el documento en si mismo. Firefox 3 implementa un objeto global Microformats que permite el acceso a estos microformatos. Este objeto y su API hacen de la búsqueda y lectura de microformatos, algo fácil.

+ +

Cargar el API de Microformatos

+ +

El objeto Microformats se crea usando el nuevo cargador de JavaScript integrado en Firefox 3. Para usar este API, primero necesitas cargar el objeto:

+ +
Components.utils.import("resource://gre/modules/Microformats.js");
+
+ +

Una vez cargado del API de Microformatos, puedes manejar los Microformatos usando los métodos que aquí listamos. Para información sobre cómo analizar los Microformatos, lee: Analizar microformatos en JavaScript.

+ +

Microformatos predefinidos

+ +

Firefox 3 ofrece varios Microformatos integrados:

+ +
+
adr
+
Representa una dirección (como una calle o una dirección postal).
+
geo
+
Representa una localización geográfica usando coordenadas de latitud y longitud.
+
hCard
+
Representa la información de contacto de una persona.
+
hCalendar
+
Representa una entrada en un calendario o la cita en una agenda.
+
tag
+
Se usa para añadir pestañas a otros Microformatos.
+
+ +

Métodos

+ +

add()

+ +

Añade un nuevo Microformato al módulo de Microformatos.

+ +
+

Nota: Si ya existe un microformato con el mismo nombre, será reemplazado por el nuevo.

+
+ +
add(name, definition);
+
+ +
Parámetros
+ +
+
name
+
El nombre del microformato a añadir al módulo.
+
definición
+
Una estructura JavaScript que describe el microformato. Ver Crear microformatos en JavaScript para más detalles.
+
+ +

count()

+ +

Cuenta el número de microformatos que hay en un documento que cumple con determinado criterio.

+ +
numMicroformats = Microformats.count(name, rootElement, options);
+
+ +
Parámetros
+ +
+
name
+
El nombre del microformato que queremos contar.
+
rootElement
+
Requerido. El elemento DOM en dónde empezar la búsqueda. Si deseas buscar en el documento entero, especifica content.document.
+
options
+
Opcional. Cuando se especifica, este es un objeto JavaScript que contiene cero o más de los siguientes flag:
+
+ +
+
+
recurseExternalFrames
+
Si es true, se incluyen los marcos (frames) hijos en la búsqueda. Por defecto es true.
+
showHidden
+
Si es true, se añaden microformatos ocultos, en caso contrario, se ignoran. Por defecto es false.
+
debug
+
Se especifica a true cuando se usa el modo de "debug", en caso contrario es false. Por defecto es false.
+
+
+ +
Valor devuelto
+ +

Un valor entero que indica el número de microformatos que cumplen el criterio especificado.

+ +

debug()

+ +

Devuelve una cadena que describe un objeto microformato.

+ +
+

Nota: Pueds simplemente llamar a debug() en un objeto microformato: microformatObject.debug() en lugar de usar este método, si lo prefieres.

+
+ +
dumpString = debug(microformatObject)
+
+ +
Parámetros
+ +
+
microformatObject
+
El objeto microformato a descargar.
+
+ +
Valor devuelto
+ +

Una cadena que describe el contenido del objeto microformato especificado.

+ +

get()

+ +

Devuelve una matriz de objetos microformato encontrados, que cumplen con el criterio especificado.

+ +
microformatsArray = Microformats.get(name, rootElement, options, targetArray);
+
+ +
Parámetros
+ +
+
name
+
El nombre del microformato a encontrar.
+
rootElement
+
Requerido. El elemento DOM donde debe comenzar la búsqueda. Si quieres buscar el documento entero, especifica content.document.
+
options
+
Opcional. Si se especifica, es un objeto JavaScript que contiene cero o más de los siguientes flag:
+
+ +
+
+
recurseExternalFrames
+
Si es true, se incluyen los marcos hijo que hagan referencia a contenido externo, en la búsqueda. Por defecto es true.
+
showHidden
+
Si es true, se incluyen los microformatos ocultos, en caso contrario se ignoran. Por defecto es false.
+
debug
+
Especifica true si se está en modo "debug", en caso contrario es false. Por defecto es false.
+
+
+ +
+
targetArray
+
Opcional. Cuando se especifica, es una matriz de objetos microformatos en donde se añaden lso objetos microformato resultantes de la búsqueda.
+
+ +
Valor devuelto
+ +

Una nueva matriz de objetos microformato que cumplen con el criterio de búsqueda, o la matriz especificada por microformats con los nuevos microformatos encontrados añadidos.

+ +

getNamesFromNode()

+ +

Devuelve una lista, delimitada por espacios, de nombres de microformatos que corresponde al nodo especificado.

+ +
nameList = Microformats.getNamesFromNode(node);
+
+ +
Parámetros
+ +
+
node
+
El nodo en el cual leer una lista de nombres de microformatos.
+
+ +
Valor devuelto
+ +

Si el node especificado es un microformato, el resultado es una cadena conteniendo, delimitados por especios, los nombres de todos los microformatos que corresponden al nodo. Si el nodo no es un microformato, no se devuelve nada.

+ +

getParent()

+ +

Devuelve el nodo padre del microformato especificado o hijo de un microformato.

+ +
parentNode = Microformats.getParent(node);
+
+ +
Parámetros
+ +
+
node
+
El nodo cuyo padre quieres obtener.
+
+ +
Valor devuelto
+ +

El padre del nodo especificado. No devuelve nada si el node especificado no es un microformato o el hijo de un microformato.

+ +

isMicroformat()

+ +

Determina si el nodo DOM especificado es o no un microformato.

+ +
flag = Microformats.isMicroformat(node);
+
+ +
Parámetros
+ +
+
node
+
El nodo DOM a comprobar si es un microformato.
+
+ +
Valor devuelto
+ +

Devuelve true si el nodo es un microformato y false en caso contrario.

+ +
+

Nota: Este métodono devuelve true si el nodo es hijo de un microformato.

+
+ +

Ver también

+ +

 

+ + + +

 

diff --git a/files/es/archive/mozilla/firefox/index.html b/files/es/archive/mozilla/firefox/index.html new file mode 100644 index 0000000000..9e61c718ff --- /dev/null +++ b/files/es/archive/mozilla/firefox/index.html @@ -0,0 +1,8 @@ +--- +title: Firefox +slug: Archive/Mozilla/Firefox +translation_of: Archive/Mozilla/Firefox +--- +

In progress. Out-of-date information about the Firefox project.

+ +

diff --git a/files/es/archive/mozilla/firefox/soap_en_los_navegadores_basados_en_gecko/index.html b/files/es/archive/mozilla/firefox/soap_en_los_navegadores_basados_en_gecko/index.html new file mode 100644 index 0000000000..0ab155e7b2 --- /dev/null +++ b/files/es/archive/mozilla/firefox/soap_en_los_navegadores_basados_en_gecko/index.html @@ -0,0 +1,264 @@ +--- +title: SOAP en los navegadores basados en Gecko +slug: Archive/Mozilla/Firefox/SOAP_en_los_navegadores_basados_en_Gecko +tags: + - SOAP + - Servicios_Web_XML + - Todas_las_Categorías +translation_of: Archive/Mozilla/Firefox/SOAP_in_Gecko-based_Browsers +--- +

 

+

Este artículo muestra cómo acceder a los servicios web utilizando las posibilidades de SOAP y JavaScript disponibles en los últimos navegadores basados en Gecko.

+

Introducción

+

SOAP (Simple Object Access Protocol, protocolo simple de acceso a objetos) es la base sobre la que se construyen los servicios web. Es un protocolo basado en XML utilizado para poder comunicarse e interoperar con los servicios web. Mozilla 1.0 (sobre el cual ha sido construido Netscape 7.0x) y Firefox son capaces de comunicarse directamente con los servicios web a través de su implementación de SOAP a bajo nivel a través de JavaScript.

+

La interfaz de JavaScript de Gecko que establece llamadas SOAP es una API de bajo nivel que precisa de una para construir el mensaje SOAP utilizando varios objetos de JavaScript específicos para SOAP. Este artículo explicará las operaciones básicas de SOAP. Para más detalles véase la API de SOAP a bajo nivel en Gecko aquí.

+

Traducido cross domain access como acceso multidominio ¿¿?? El uso de JavaScript para la comunicación con los servicios web está sujeto a las mismas políticas de seguridad que otros scripts en términos de acceso multidominio. Por tanto, el acceso a servicios web ubicados en servidores distintos al servidor en el que se está ejecutando JavaScript violará la política de multidominio. Este artículo mostrará cómo esquivar temporalmente esto para hacer pruebas.

+

Configurar una llamada SOAP

+

El objeto más básico es SOAPCall, el cual es usado para iniciar e invocar una llamada SOAP.

+

Figura 1 : Configuración básica e invocación de una llamada SOAP

+
var mySOAPCall = new SOAPCall();
+mySOAPCall.transportURI = "http-based service URI"
+
+var parameters = new Array();
+mySOAPCall.encode(SOAPCall.VERSION_1_1,
+                  // method
+                  "method", "namespaceURI",
+                  // header block
+                  0, null,
+                  // parameter
+                  parameters.length, parameters);
+
+var response = mySOAPCall.invoke();
+
+

El objeto SOAPCall posee un miembro llamado transportURI que es el URI de la localización a donde se debe enviar la llamada SOAP. El método encode() necesita el nombre del método a llamar en el servicio web, su + + namespaceURI + , el número de + + SOAPParameters + pasados y un array de + + SOAPParameters + que contendrá todos los parámetros. Todos estos parámetros pueden conocerse en el fichero WSDL del servicio web, el cual será explicado en la sección de ejemplos.

+

Los parámetros SOAP son creados usando el objeto SOAPParameter. Son pares de nombre/valor que son pasados al servicio web.

+

Figura 2: Crear un parámetro SOAP

+
var param = new SOAPParameter();
+param.name = "translationmode";
+param.value = "en_fr";
+
+

Manejar una respuesta

+

Una vez invoke() ha sido llamado, Gecko genera el contenedor SOAP y lo envía al URI especificado. Como la petición es síncrona, la respuesta es el valor devuelto desde invoke().

+

Figura 3 : Manejar la respuesta de una llamada SOAP

+
var returnObject = mySOAPCall.invoke();
+
+if(returnObject.fault){
+  alert("An error occured: " + returnObject.fault.faultString);
+} else {
+  var response = new Array();
+  response = returnObject.getParameters(false, {});
+  alert("Return value: " + response[0].value);
+}
+
+

El valor devuelto desde invoke() se guarda y comprueba en el miembro fault. Si éste existe, entonces ocurrió un error en el servicio web y el mensaje de error se guarda en fault.faultString. Si fault no existe, se puede llamar a la función getParameters() del objeto retornado para obtener los SOAPParameters devueltos.

+

Ejemplo

+

El siguiente ejemplo utiliza un servicio web real, Bablfish, proporcionado por xmethods.net. El servicio web Babelfish permite la traducción entre varios idiomas. Toma como entrada dos parámetros: una cadena con formato "<idioma_original>_<idioma_destino>" y otra cadena con el texto a traducir. El fichero WSDL para el servicio web de Bablfish está disponible aquí y contiene toda la información necesaria para configurar y hacer una llamada SOAP de bajo nivel al servicio web.

+

El primer paso es conocer la localización del servicio web, la cual será el valor del miembro transportURI de SOAPCall. Esto se puede sacar del elemento service del WSDL, concretamente del atributo location de soap:address.

+

Figura 4 : Obtener la localización del servicio web a partir de su WSDL

+
WSDL:
+  <service name="BabelFishService">
+    <documentation>
+      Translates text of up to 5k in length, between a variety of languages.
+    </documentation>
+    <port name="BabelFishPort" binding="tns:BabelFishBinding">
+      <soap:address location="http://services.xmethods.net:80/perl/soaplite.cgi"/>
+    </port>
+  <service>
+
+JavaScript:
+  var babelFishCall = new SOAPCall();
+  babelFishCall.transportURI = "http://services.xmethods.net:80/perl/soaplite.cgi";
+  ...
+
+

El siguiente paso es el más complicado: conocer exactamente qué parámetros espera recibir el servicio web. El servicio web de Babelfish sólo tiene un método, "Babelfish", el cual está representado en el WSDL en las etiquetas operation y que son hijas del elemento portType. Cada operation del WSDL tiene dos hijos: los elementos input y output, los cuales contienen el tipo esperado. Los tipos están definidos en los elementos message de los cuales hay dos: BabelFishRequest, que es lo que va a ser pasado al servicio web y babelFishResponse, que es el tipo devuelto.

+

BabelFish espera recibir dos parámetros de entrada: translationmode y sourcedata. El ejemplo mostrado en la figura 5 traducirá la cadena "I am" del inglés al francés.

+

Figura 5 : Estableciendo los parámetros necesarios

+
WSDL:
+  <message name="BabelFishRequest">
+    <part name="translationmode" type="xsd:string"/>
+    <part name="sourcedata" type="xsd:string"/>
+  </message>
+
+  <message name="BabelFishResponse">
+      <part name="return" type="xsd:string"/>
+  </message>
+
+  <portType name="BabelFishPortType">
+    <operation name="BabelFish">
+      <input message="tns:BabelFishRequest"/>
+      <output message="tns:BabelFishResponse"/>
+    </operation>
+  </portType>
+
+JavaScript:
+  // SOAP parameters
+  var param1 = new SOAPParameter();
+  param1.value = "en_fr";
+  param1.name = "translationmode";
+
+  var param2 = new SOAPParameter();
+  param2.value = "I am";
+
+  param2.name = "sourcedate";
+
+  // combine the 2 params into an array
+  var myParamArray = [param1,param2];
+
+

Luego, es hora de configurar e invocar el objeto SOAPCall. "BabelFish" es el método usado por el ejemplo para el servicio web. El siguiente parámetro es el espacio de nombres que se espera para pasárselo al servicio web para el método BabelFish.

+

Esto se puede saber mirando el elemento binding del WSDL. El elemento binding tiene un hijo operation para el método BabelFish. El espacio de nombres necesarios es el valor del atributo namespace de soap:body dentro del elemento input.

+

Figura 6 : Configurando el método encode

+
WSDL:
+  <binding name="BabelFishBinding" type="tns:BabelFishPortType">
+    <soap:binding style="rpc" transport="http://schemas.xmlsoap.org/soap/http"/>
+    <operation name="BabelFish">
+      <soap:operation soapAction="urn:xmethodsBabelFish#BabelFish"/>
+      <input>
+        <soap:body use="encoded" namespace="urn:xmethodsBabelFish"
+                   encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>
+      </input>
+      ...
+    </operation>
+  </binding>
+
+JavaScript:
+  babelFishCall.encode(0, "BabelFish", "urn:xmethodsBabelFish", 0, null, myParamArray.length, myParamArray);
+
+  var translation = babelFishCall.invoke();
+
+

Como muestra la figura 5, la respuesta del método de BabelFish ("BabelFishResponse") tiene un parámetro, concretamente una cadena de texto. Tras asegurarnos de que no se ha devuelto un error, el método getParameters() del objeto devuelto es usado para obtener un array de SOAPResponses. Dado que se espera un solo parámetro (el texto traducido), el método alert() será usado para mostrar dicha traducción.

+

Figura 7 : Manejando la respuesta

+
JavaScript:
+  if(translation.fault){
+    // error returned from the web service
+    alert(translation.fault.faultString);
+  } else {
+    // we expect only one return SOAPParameter - the translated string.
+    var response = new Array();
+    response = translation.getParameters(false, {});
+    alert("Translation: " + response[0].value);
+  }
+
+

Como se dijo en la introducción, las llamadas SOAP obedecen la política de acceso multidominio en los scripts.

+

Existen dos formas de rodear la política de seguridad para hacer pruebas:

+
+
+  
+
+
    +
  1. +

    Ejecuta el script en el disco local.

    +

    Guarda el código localmente en tu disco duro.

    +

    El modelo de seguridad multidomino no afecta al código ejecutado desde el disco duro local.

    +
    2. +
  2. +

    Habilita el acceso multidominio

    +

    Se puede saltar la comprobación multidominio estableciendo una opción como se explica en el artículo Bypassing Security Restrictions and Signing Code y añadiéndolo al comando JavaScript para decirle a la petición que ignore la comprobación multidominio.

    +

    Tras sortear la comprobación, ejecuta el navegador y carga esta página con el ejemplo modificado. Te preguntará (mediante un cuadro de diálogo) los permisos para desactivar el multidominio (para esa sesión) para la función generadora de la llamada SOAP. El único cambio realizado ha sido añadir netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"); a la función que genera la llamada SOAP.

    +
    3. +
+

Figura 8 : Código final - Ejemplo local, Ejemplo multidominio

+
JavaScript:
+  var babelFishCall = new SOAPCall();
+  babelFishCall.transportURI = "http://services.xmethods.net:80/perl/soaplite.cgi";
+
+  // SOAP params
+  var param1 = new SOAPParameter();
+  param1.value = "en_fr";
+  param1.name = "translationmode";
+
+  var param2 = new SOAPParameter();
+  param2.value = "I am";
+  param2.name = "sourcedate";
+
+  // combine the 2 params into an array
+  var myParamArray = [param1,param2];
+
+  babelFishCall.encode(0, "BabelFish", "urn:xmethodsBabelFish", 0, null, myParamArray.length, myParamArray);
+
+  var translation = babelFishCall.invoke();
+
+  if(translation.fault){
+    // error returned from the web service
+    alert(translation.fault.faultString);
+  } else {
+   // we expect only one return SOAPParameter - the translated string.
+   var response = new Array();
+   response = translation.getParameters(false, {});
+   alert("Translation: " + response[0].value);
+ }
+
+

Tras la pista del contenedor Soap

+

Aquí se muestra un volcado HTTP (usando la aplicación multiplataforma Ethereal) de lo que realmente se envía y se recibe cuando se ejecuta el ejemplo:

+

Figura 9 : Volcado HTTP

+
Sent:
+POST /perl/soaplite.cgi HTTP/1.1
+Host: services.xmethods.net:80
+...
+Content-Type: text/xml
+Content-Length: 516
+
+<env:Envelope xmlns:env="http://schemas.xmlsoap.org/soap/envelope/"
+              xmlns:enc="http://schemas.xmlsoap.org/soap/encoding/"
+              env:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"
+              xmlns:xs="http://www.w3.org/1999/XMLSchema"
+              xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance">
+  <env:Header/>
+  <env:Body>
+      <a0:BabelFish xmlns:a0="urn:xmethodsBabelFish">
+          <a0:translationmode xsi:type="xs:string">en_fr</a0:translationmode>
+          <a0:sourcedata xsi:type="xs:string">I am</a0:sourcedata>
+      </a0:BabelFish>
+  </env:Body>
+</env:Envelope>
+
+
+Recieved:
+HTTP/1.1 200 OK
+Date: Tue, 11 Mar 2003 20:28:11 GMT
+Server: Apache/1.3& (Unix) Enhydra-Director/3 PHP/4.0.6 DAV/1.0.3 AuthNuSphere/1.0.0
+SOAPServer: SOAP::Lite/Perl/0.52
+Content-Length: 532
+
+...
+Content-Type: text/xml; charset=utf-8
+
+<?xml version="1.0" encoding="UTF-8"?>
+<SOAP-ENV:Envelope xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/"
+                   SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"
+                   xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"
+                   xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance"
+                   xmlns:xsd="http://www.w3.org/1999/XMLSchema">
+  <SOAP-ENV:Body>
+    <namesp1:BabelFishResponse xmlns:namesp1="urn:xmethodsBabelFish">
+      <return xsi:type="xsd:string">je suis</return>
+    </namesp1:BabelFishResponse>
+  </SOAP-ENV:Body>
+</SOAP-ENV:Envelope>
+
+

Recursos

+

SOAP Scripts in Mozilla por Ray Whitmer
+ Using the Mozilla SOAP API por Scott Andrew LePera and Apple Developer Connection.
+ The Latest w3.org SOAP Specification
+ Calling SOAP Servers from JS in Mozilla OnLamp.com article by Zachary Kessin
+ SOAPCall documentation on XULPlanet.com
+ SOAPResponse documentation on XULPlanet.com

+
+

Información del documento original

+ +
+

 

diff --git a/files/es/archive/mozilla/index.html b/files/es/archive/mozilla/index.html new file mode 100644 index 0000000000..855e3e8ae6 --- /dev/null +++ b/files/es/archive/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla +--- +

These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.

+

Introducción a la extension del API de audio
La extension de audio de la API se extiende de la especificación de HTML5 {HTMLElement("audio")}} y <video> multimedia mediante la exposición de elementos metadata de audio y datos puros en audio. Esto permite a los usuarios visualizar los datos de audio, para procesarlos y crear nuevos datos de audio.
Table Layout Regression Tests
Changes in layout, parser and content code can have unintended side effects, also known as regressions. It is good style to check for these unwanted regressions and fixing them before checkin rather than causing Bugzilla avalanches.

diff --git a/files/es/archive/mozilla/jetpack/index.html b/files/es/archive/mozilla/jetpack/index.html new file mode 100644 index 0000000000..7e80cca2b8 --- /dev/null +++ b/files/es/archive/mozilla/jetpack/index.html @@ -0,0 +1,39 @@ +--- +title: Jetpack +slug: Archive/Mozilla/Jetpack +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Jetpack +--- +

+ +

Jetpack

+ +

Jetpack is a project to make it easy to build Firefox add-ons using common web technologies.

+ +
+

Get Started

+ +
    +
  1. Visit the Getting Started tutorial
    2. +
  2. Download the Add-on SDK (formerly called the Jetpack SDK)
    3. +
+ +

Documentation

+ + + +

Join the Jetpack Community

+ + +
diff --git a/files/es/archive/mozilla/table_layout_regression_tests/index.html b/files/es/archive/mozilla/table_layout_regression_tests/index.html new file mode 100644 index 0000000000..564a8273bf --- /dev/null +++ b/files/es/archive/mozilla/table_layout_regression_tests/index.html @@ -0,0 +1,204 @@ +--- +title: Table Layout Regression Tests +slug: Archive/Mozilla/Table_Layout_Regression_Tests +translation_of: Archive/Mozilla/Table_Layout_Regression_Tests +--- +

+

Advertencia: The content of this article may be out of date. While the information on the layout debugger is still useful, the testing information is much less relevant now than it has been, as the "rtest" testing framework described here has been superseded by the reftest framework. It is unclear whether or how well rtest continues to work and whether it is still used or not.

+

+ +

Subject Overview

+ +

Changes in layout, parser and content code can have unintended side effects, also known as regressions. It is good style to check for these unwanted regressions and fixing them before checkin rather than causing Bugzilla avalanches.

+ +

Prerequisites

+ +

In order to run these tests, you will need to have:

+ +
    +
  1. Make sure that your build is a debug build (in short you need ac_add_options --enable-debug in your .mozconfig file).
    2. +
  2. to build the layoutdebugger itself, build either all extensions or include layoutdebug in your .mozconfig file. For example ac_add_options --enable-extensions=all.
    3. +
  3. a Mozilla tree with the test files at %MOZ_SRC%/layout/html/tests,
    4. +
  4. DISABLE_TESTS should not be defined (so ac_add_options --enable-tests),
    5. +
  5. patience and time.
    6. +
+ +

Test Runs

+ + + +

Be prepared to cycle.

+ +

How the layout regression tests work

+ +

First the URL's to test are red from rtest.lst files in various directories. layout/html/tests/block/rtest.lst points to them.

+ +

Snippet from rtest.lst in the table/marvin directory:

+ +
body_col.html
+body_tbody.html
+body_tfoot.html
+body_thead.html
+col_span.html
+
+ +

The regression tests compare the frame tree dumps recorded at two different times. The URL's to test are red from rtest.lstFor every file in rtest.lst Mozilla takes the root frame and dumps the whole tree via nsFrame::DumpRegression.

+ +

The frame tree dumps are invoked by the nsILayoutDebugger. The frame trees are dumped to separate files in a baseline or verify directory for all URL's in rtest.lst (see: nsRegressionTester::DumpFrameModel).

+ +

Their name is generated by replacing the old extension .html or .xml with .rgd. For appendCells1.html a file appendCells1.rgd will be created in the baseline or verify subdirectory.

+ +

A typical beginning of a dump (*.rgd file) looks like:

+ +
<frame va="15022440" type="Viewport(-1)" state="270340" parent="0">
+  <view va="47171904">
+  </view>
+  <stylecontext va="15022232">
+
+    <font serif 240 240 0 />
+    <color data="-16777216"/>
+    <background data="0 2 3 -1 0 0 "/>
+    <spacing data="left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0" />
+    <list data="100 100 " />
+    <position data="left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  " />
+
+    <text data="0 0 0 Normal  Normal  0[0x0]tw  Normal  " />
+    <textreset data="0 10[0xa]enum  " />
+    <display data="0 1 0 0 0 0 0 0 0 0 0 0 " />
+    <visibility data="0 1 1.000000" />
+    <table data="0 0 4 -1 1 " />
+    <tableborder data="1 Null  Null  0 2 " />
+
+    <content data="0 0 0 Null  " />
+    <quotes data="0 " />
+    <ui data="3 0 0 1 " />
+    <uireset data="7 0 4" />
+    <xul data="0 0 0 0 0 1    <svg data="0 1.000000 1.000000 0 1.000000" />
+  </stylecontext>
+
+ +

The baseline log will look like:

+ +
Type Manifest File: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat
++++ JavaScript debugging hooks installed.
+++WEBSHELL == 1
+++DOMWINDOW == 1
+++WEBSHELL == 2
+++DOMWINDOW == 2
+Note: styleverifytree is disabled
+Note: frameverifytree is disabled
+Note: verifyreflow is disabled
+++WEBSHELL == 3
+++DOMWINDOW == 3
+Running baseline test for E:\moz_src\mozilla\layout\html\tests\block\rtest.lst.
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\width-fixed_html.rgd
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\width-percent_html.rgd
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\margin1_html.rgd
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\pre_html.rgd
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\block\base\baseline\pre1_html.rgd
+
+ +

The second verify run creates first the frame dumps in the verify subdirectories (verify) and compares each frame dump with the corresponding reference frame dump. If they differ in critical points the test fails.

+ +

A typical part of the verify log would look like:

+ +
Type Manifest File: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat
++++ JavaScript debugging hooks installed.
+++WEBSHELL == 1
+++DOMWINDOW == 1
+++WEBSHELL == 2
+++DOMWINDOW == 2
+Note: styleverifytree is disabled
+Note: frameverifytree is disabled
+Note: verifyreflow is disabled
+++WEBSHELL == 3
+++DOMWINDOW == 3
+Running verify test for E:\moz_src\mozilla\layout\html\tests\block\rtest.lst.
+Writing regression data to E:\moz_src\mozilla\layout\html\tests\table\core\verify\standards1.rgd
+Comparing to regression data from E:\moz_src\mozilla\layout\html\tests\table\core\baseline\standards1.rgd
+frame bbox mismatch: 0,26437,4824,600 vs. 0,26437,4872,600
+Node 1:
+  TableOuter(table)(144) 0x10004 0,26437,4824,600, |null attr|-16777216|left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw  left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  TableOuter(table)(144) 0x10004 0,26437,4872,600, |null attr|-16777216|left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw  left: 0[0x0]tw top: 0[0x0]tw right: 0[0x0]tw bottom: 0[0x0]tw  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+frame bbox mismatch: 0,0,4824,600 vs. 0,0,4872,600
+Node 1:
+  Table(table)(144) 0x10004 0,0,4824,600, |null attr|-16777216|left: Null top: 0[0x0]tw right: Null bottom: 0[0x0]tw  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  2 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  Table(table)(144) 0x10004 0,0,4872,600, |null attr|-16777216|left: Null top: 0[0x0]tw right: Null bottom: 0[0x0]tw  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  2 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 8 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+frame bbox mismatch: 24,24,4776,552 vs. 24,24,4824,552
+Node 1:
+  TableColGroup(table)(144) 0x80010004 24,24,4776,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 12 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  TableColGroup(table)(144) 0x80010004 24,24,4824,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 12 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+frame bbox mismatch: 0,0,2400,552 vs. 0,0,2424,552
+Node 1:
+  TableCol(table)(144) 0x30010004 0,0,2400,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  TableCol(table)(144) 0x30010004 0,0,2424,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+frame bbox mismatch: 2424,0,2352,552 vs. 2448,0,2376,552
+Node 1:
+  TableCol(table)(144) 0x30010004 2424,0,2352,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Node 2:
+  TableCol(table)(144) 0x30010004 2448,0,2376,552, |null attr|-16777216|left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum  left: Null top: Null right: Null bottom: Null  left: Null top: Null right: Null bottom: Null  1[0x1]enum 0|1 1 [none]|left: Auto top: Auto right: Auto bottom: Auto  Auto  0[0x0]tw  Null  Auto  0[0x0]tw  Null  0 Auto  |0 0 0 Normal  Normal  0[0x0]tw  Normal  |0 11 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 Null
+Comparison for file:///E:/moz_src/mozilla/layout/html/tests/table/core/baseline/standards1.rgd  failed.
+
+ +

The first regression test has failed and it is marked so.

+ +

Adding new regression tests

+ +

Once you have checked in the code:

+ + + +

Additional Notes

+ +

There is a special type of frame dumps - the printing regression tests, they are invoked by the -Prt command line argument to the viewer and include first a display then a frame dump taking into account the printer pages. Please contact if you need help with running those tests.

+ +

I would like to thank Chris Karnaze for his guidance and fantasai for her language support.

+ +
+

Original Document Information

+ + +
diff --git a/files/es/archive/mozilla/xbl/index.html b/files/es/archive/mozilla/xbl/index.html new file mode 100644 index 0000000000..0cc0e0d40a --- /dev/null +++ b/files/es/archive/mozilla/xbl/index.html @@ -0,0 +1,27 @@ +--- +title: XBL +slug: Archive/Mozilla/XBL +tags: + - XBL +translation_of: Archive/Mozilla/XBL +--- +

+

XML Binding Language (XBL, algunas veces simplemete denominado Extensible Bindings Language) es un lenguaje para describir vinculaciones que pueden ser adjuntadas a elementos en otros documentos. El elemento al cual el vinculado es añadido, llamado elemento vinculado, adquiere el nuevo comportamiento especificado por el vínculo. +

Las vinculaciones pueden contener eventos handlers que son registrados en el elemento vinculado, una implementación de nuevos métodos y propiedades que ahora son accesibles por el elemento vinculado, y contenido anónimo que es insertado a través del elemento vinculado. +

Muchos widgets XUL son, por lo menos, parcialmente implementados usando XBL. Puedes construir tus propios widgets reusables a partir de XUL, HTML, SVG existentes, y otras primitivas usando XBL. +

+

Especificaciones

+

XBL 1.0 está especificado en Referencia XBL 1.0. Desafortunadamente, la implementación actual en Mozilla es diferente de la especificación, y no hay documento conocido donde se describan las diferencias. Afortunadamente, la Referencia será actualizada para describir dichas diferencias. +

XBL 1.0 es una tecnología específica de Mozilla, y no un estándard W3C . Sin embargo, al menos dos estándares estan siendo implementados: sXBL y XBL 2.0. +

+ +

Algunas diferencias entre sXBL y XBL2 están expuestas en un artículo de Anne van Kesteren. +

+

Véase también

+ + diff --git a/files/es/archive/mozilla/xul/action/index.html b/files/es/archive/mozilla/xul/action/index.html new file mode 100644 index 0000000000..f44a54305b --- /dev/null +++ b/files/es/archive/mozilla/xul/action/index.html @@ -0,0 +1,87 @@ +--- +title: action +slug: Archive/Mozilla/XUL/action +tags: + - para_revisar + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/action +--- +

+ « Referencia de XUL [ + Ejemplos | + Atributos | + Propiedades | + Methoden | + Métodos ] +

+

Utilizado para especificar el contenido que debe ser generado para cada resultado correspondiente de una consulta. La acción debe estar contenido dentro de un elemento query o rule.

+

Un descendiente de la acción debe tener un atributo uri seteado a la variable miembro. Este elemento y sus descendientes pueden utilizar variables en lugar de valores de atributos. Las variables son un signo de interrogación seguido por un nombre. Por regla general, cada variable será una referencia a los datos dentro de la fuente de datos, determina a partir de la consulta. Si la misma variable aparece varias veces, tendrá el mismo valor en cada lugar.

+

Para más información, ver Acciones.

+

Ejemplos

+
se necesitan ejemplos
+
+

Atributos

+ + + + + + +

Heredados desde el elemento XUL
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Propiedades

+ +

Propiedades Heredadas
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width

Métodos

+ +

Métodos Heredados
addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData
diff --git a/files/es/archive/mozilla/xul/attribute/index.html b/files/es/archive/mozilla/xul/attribute/index.html new file mode 100644 index 0000000000..4914368c25 --- /dev/null +++ b/files/es/archive/mozilla/xul/attribute/index.html @@ -0,0 +1,304 @@ +--- +title: Atributos +slug: Archive/Mozilla/XUL/Attribute +translation_of: Archive/Mozilla/XUL/Attribute +--- +
« Referencia de XUL
+ + diff --git a/files/es/archive/mozilla/xul/bestiario_xul/index.html b/files/es/archive/mozilla/xul/bestiario_xul/index.html new file mode 100644 index 0000000000..7d2f8b3a9d --- /dev/null +++ b/files/es/archive/mozilla/xul/bestiario_xul/index.html @@ -0,0 +1,186 @@ +--- +title: Bestiario XUL +slug: Archive/Mozilla/XUL/Bestiario_XUL +tags: + - Complementos + - Todas_las_Categorías + - XUL + - extensiones +translation_of: Archive/Mozilla/XUL/A_XUL_Bestiary +--- +

 

+

Este documento sobre XUL presenta algunos de los conceptos clave y términos del entorno de desarollo XUL. El propósito de este artículo no es explicar estos elementos en profundidad sino decir lo que son en términos sencillos. Se han seleccionado los elementos para este grupo porque parecen que están inmersos en el misterio, que son poco usados como conceptos o términos, o que son infravalorados de acuerdo a su papel en XUL y al desarrollo multiplataforma. En contraposición al + + Mozilla Jargon File + , este artículo explica los elementos de especial interés para el desarrollo web o de contenidos y pretende establecer un contexto para comprender las nuevas tecnologías de Mozilla y en particular el lenguaje de interfaces de usuario basado en XML de Mozilla: XUL.

+

Chrome

+

Algunas de las más potentes y con frecuencia incomprendidas características de XUL y del navegador Mozilla tienen que ver con chrome. El término chrome es usado en diferentes contextos para referirse a cosas distintas. En general, chrome se refiere a una interfaz XUL y a todos sus ficheros de apoyo. chrome quiere decir que el contenido y estructura XUL + la apariencia que le da CSS + cualesquiera ficheros de configuración regional y específicos de la plataforma son parte de dicha interfaz XUL. En comparación, la apariencia es sólo el CSS y los gráficos referenciados para el fichero XUL, las cadenas de texto de la configuración regional están almacenadas en un DTD y el contenido es sólo el XUL.

+

La URL chrome

+

El concepto de chrome como algo integrado y dinámico separado de alguna forma del núcleo de la aplicación se realiza a través de la url chrome apuntando a partes de XUL a sus ficheros relacionados. La url chrome se parece a las direcciones http, como se muestra en la siguiente instrucción de proceso de apariencia global:

+
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+

Esto especifica un chrome para que pueda ser cargado por el motor de renderizado Gecko. En el ejemplo anterior, el chrome es simplemente un fichero de apariencia cargado en el fichero XUL, aunque el chrome puede además cargar otros chromes, como cuando un menuitem de una ventana muestra un nuevo chrome:

+
<menuitem
+  value="Mozilla Help"
+  oncommand="window.openDialog('chrome://help/content/help.xul',
+                               '_blank',
+                               'chrome,all,dialog=no')" />
+
+

En el ejemplo anterior, la url chrome se usa para apuntar a un chrome dentro de la jerarquía de paquetes de la aplicación Mozilla. Existe un chrome + + Help + definido en mozilla/bin/chrome/help que es invocado desde el menú de Ayuda. Nótese que cuando no se especifica el nombre de fichero en la ruta del directorio del chrome se supone que dicho nombre de fichero coincide con el del paquete. En otras palabras, una url chrome como el apuntador global de antes pediría un fichero llamado global.css y el apuntador de ayuda anterior podría ser reescrito como 'chrome://help/content' dado que el nombre del paquete es "help".

+

Ver otros chromes que no son de Mozilla

+

Existe un modificador especial que puede ser usado al iniciar Mozilla con algún otro chrome diferente al predeterminado. Cuando Mozilla es ejecutado desde la línea de comandos con el modificador -chrome, se puede especificar el chrome que se quiera, como el del anterior ejemplo.

+
mozilla -chrome chrome://help/content/help.xul
+
+

Esto mostrará el paquete de ayuda mencionado anteriormente como un chrome + + independiente + . Esta opción especial te permite crear y acceder a chromes independientes del navegador Mozilla y es un punto de inicio para explicar las posibilidades de XUL como plataforma más alla del simple rediseño del navegador.

+

Paquetes

+

Un paquete es de algún modo parecido a un chrome pero específico para la arquitectura de Mozilla. Un paquete es un trozo de código de interfaz que se ubica en un lugar en particular dentro de la jerarquía de paquetes de Mozilla. Como un chrome, dicho trozo generalmente alberga contenido XUL, información de apariencia CSS y gráficos, cadenas de configuración regional y quizá algo de código específico para la plataforma. El navegador es un paquete definido en mozilla/bin/chrome/navigator, la parte de correo y noticias es un paquete situado en mozilla/bin/chrome/mailnews/, etc... El directorio de cada paquete tiene tres subdirectorios: content, skin y locale; en el que se ubican el XUL, el CSS y la información de configuración regional, respectivamente:

+
navigator/
+  content/
+    default/
+      navigator.xul
+      ...
+  skin/
+    default/
+      navigator.css
+      nav-icon.gif
+      ...
+  locale/
+    US-en/
+      navigator.dtd
+
+

El directorio predeterminado (default) subyacente de cada uno de esos subdirectorios del paquete principal se asume en la url chrome (p.e.: chrome://help/content/help.xul no incluye un directorio predeterminado como parte de la url, pese a que dicho directorio exista en la estructura real). Cuando se crean diferentes chromes para un paquete, se puede crear un directorio subyacente al directorio content cuyo contenido será cargado en lugar del predeterminado. Por ejemplo, si se quiere crear una nueva apariencia con la que dotar al paquete navigator se puede crear un subdirectorio bajo navigator/skin/ cuyo contenido sea cargado en lugar del predeterminado. Así, la estructura quedaría:

+
navigator/
+  content/
+    default/
+      navigator.xul
+      ...
+  skin/
+    default/
+      navigator.css
+      nav-icon.gif
+      ...
+      myNewSkin/
+        newskin.css
+        newgifs.gif
+        ...
+  locale/
+    US-en/
+      navigator.dtd
+
+

Para cargar la información del chrome guardada en el paquete del nuevo directorio como el de antes, se puede usar la siguiente url chrome:

+
chrome://navigator/skin/myNewSkin/newskin.css
+
+

que cargará los gráficos de dicho subdirectorio cuando se necesiten:

+

Apariencia

+

La apariencia es el conjunto de CSS y gráficos que proporcionan el aspecto o presentan a XUL. XUL por sí mismo contiene muy poca información sobre cómo deben de presentarse los controles en la interfaz. Antes incluso de que se aplique la apariencia global (la cual es cargada en casi cada fichero XUL que se ve en Mozilla y cuya ausencia de los propios ficheros XUL puede hacer que se muestren de modo extraño, sin sentido, invisibles, o todo a la vez), el fichero xul.css es cargado para proporcionar algo de información de presentación muy básica para los controles comunes. Por todo esto, CSS es una parte vital de lo que hace a XUL lo que es, especialmente con el llegada de CSS 2 y sus nuevas capacidades de posicionamiento.

+

Los cambios de apariencia son más apropiados cuando se trata de cambiar dinámicamente la apariencia general de una aplicación. Pese a que esto aún no existe en el navegador, muy pronto será posible cambiar por completo el aspecto de la aplicación dinámicamente aunque sólo para ampliar la apariencia definida en el global.css principal o en otra apariencia global. Cuando se crean estilos en las etiquetas <tags>, como atributos de estilo para elementos individuales, o en ficheros CSS personalizados se está rompiendo la capacidad de Gecko para dotar de apariencia a la aplicación a la que pertenece el XUL.

+

Controles

+

Los controles (widgets en inglés) son las piezas que permiten ser ensambladas para construir un interfaz. Los menús, las barras de herramientas, los botones y las barras de desplazamiento son controles y como tales son piezas de propósito general al igual que las cajas (box) y las cajas de relleno (spring). Dichos controles pueden ser creados y ubicados dentro de un fichero XUL como elementos simples: <menu>, <toolbar>, etc... La sintaxis para estos elementos está basada en su mayoría en XML. De modo colectivo, estos controles son también conocidos como el XPToolkit.

+

Modelos de objetos: DOM y AOM

+

El Modelo de Objetos de Documento (DOM) es la representación de un documento como una serie de objetos interactivos mediante código. Cuando un lenguaje de script como JavaScript accede a las diversas partes de un documento HTML, lo hace a través del DOM. Las partes del documento, tales como la cabecera, los enlaces, el cuerpo..., cualquier etiqueta está disponible como nodos cuyos atributos pueden ser leídos y establecidos. Desafortunadamente, existen diferentes modelos de objetos de documento correspondientes a los diferentes tipos de documentos y también a las diferentes nociones propietarias sobre las que un documento debería ser accedido mediante un programa. El W3C ha estandarizado un modelo de objetos de documento en concreto y ya tiene una recomendación candidata para una versión de actualización. Este es el DOM reflejado en XUL y en el navegador Mozilla. El DOM asienta el objeto window en el más alto nivel del árbol de nodos. El objeto window tiene nodos hijos como el objeto document, el objeto history que almacena las páginas que el usuario ha visitado, nodos de marcos, etc... siendo todos ellos accesibles mediante un programa.

+

Con las dramáticas mejoras en el modelo de objetos y el poder del DOM 2 del W3C, el concepto del DOM se ver forzado más allá del más abstracto DHTML. Dado que cualquier desarrollo web dinámico es dependiente una vez el programa accede al documento web (o a la interfaz XUL), y dado que el DOM es un estándar y las primeras nociones del HTML dinámico no, el término "DOM" es usado como sinónimo por o en lugar de términos como "HTML dinámico" o "DHTML".

+

AOM significa modelo de objetos de aplicación y es una extensión del DOM hasta la interfaz definida en XUL. Mientras que HTML es reflejado en el DOM en forma de nodos como + + link + , + + layer + e + + img + , XUL es reflejado en el modelo de objetos de aplicación en la jerarquía de los controles XUL: browser, menu, menuitem, etc... El DOM y el AOM forman una especie de evolución, siendo el conjunto total manipulable desde los estándares sobre los que XUL está basado.

+

Casi sinónimos de XUL

+

Existe una gran confusión sobre las palabras que comienzan con "X" en el proyecto de código abierto de Mozilla. La sección Arquitectura XP de Mozilla que se verá más adelante describe XPCOM, XPIDL y XPConnect; tres tecnologías relacionadas de alguna forma para acceder al código de la aplicación desde la interfaz. Esta sección explica XUL, XPToolkit y XPFE, que son de algún modo sinónimos y a la vez diferentes.

+

En pocas palabras, XUL es el lenguaje basado en XML usado para crear interfaces, XPToolkit es el conjunto de controles XUL (menus, toolbars, etc...) utilizados realmente para este propósito: ser los ladrillos de la interfaz, y XPFE es la parte frontal multiplataforma que ha sido creada a partir de XPToolkit.

+

Las diferencias son significativas: XUL es el universo de elementos, atributos, sintaxis, reglas y relaciones mientras que el XPToolkit es en realidad un counjunto finito de elementos específicos para el interfaz creados en XUL. EL XPFE es lo que ha sido creado fuera del XPToolkit. Una pobre relación análoga para XUL, XPToolkit y XPFE puede ser la que forman HTML, las etiquetas HTML y una página web, respectivamente.

+

Partes XUL

+

La gente se confunde a veces con la sintaxis que describe las partes de un control. Para un control como el menú que se muestra a continuación, + + menu + es el elemento y tanto + + value + como + + id + son atributos.

+
<menu id="file" value="File" >
+  <popup>
+    <menuitem value="New" onclick="CreateNewDoc()" />
+    <menuitem value="Open" onclick="OpenDoc()" />
+    <menuitem value="Close" onclick="CloseDoc()" />
+  </popup>
+</menu>
+
+

El elemento da nombre al item, el control, mientras que los atributos describen características de dicho elemento, tales como su nombre, su estilo, etc... En la jerga orientada a objetos, el elemento es análogo al propio objeto mientras que los atributos son como propiedades. Los atributos tienen un valor asociado a él (tales como la cadena "file" para el atributo id en el ejemplo anterior). Nótese que el elemento + + menu + incluye tanto una etiqueta de apertura al principio como una de cierre al final del ejemplo. De alguna forma, el elemento + + menu + engloba tanto al él mismo como a sus hijos, los elementos + + menuitem + y el elemento + + popup + .

+

Eventos

+

Los eventos son también origen de confusión para muchos desarrolladores inexpertos. De hecho, ni yo mismo estoy seguro de comprenderlos del todo pero aquí va una explicación simple de lo que son los eventos y de cómo utilizarlos, básicamente, en una interfaz basada en eventos como la creada en XUL. Los eventos son mensajes que son enviados desde un objeto cuando dicho objeto realiza alguna acción. Por ejemplo, un documento provoca el evento + + load + cuando es cargado en un navegador. El evento + + click + es provocado por un botón cuando es pulsado.

+

Si no se hace nada con estos eventos, entonces probablemente nunca se sabrá nada de ellos. Los documentos serán cargados, los botones serán pulsados y los enlaces serán sobrevolados... y los eventos serán provocados para cada una de esas acciones de modo imperceptible. En cambio si se escriben + + manejadores de eventos + dentro de + + escuchadores de eventos + como se explicará en breve, se podrán usar estos eventos para realizar otras acciones. El uso de eventos para disparar otros acciones más explícitas explica vagamente lo que es un modelo de eventos.

+

¿Dónde exactamente están estos eventos provocados? ¿Provocados por quién? Los eventos que son lanzados por un objeto, emergen como una + + burbuja + a través del modelo jerárquico que es el DOM (o el AOM) nodo a nodo. Dichos eventos pueden ser manejados en cualquier punto de la jerarquía (incluyendo el mismo nodo en el que es lanzado). Si nadie en un nivel en particular de la jerarquía está interesado en el evento, entonces el evento continúa + + emergiendo + al siguiente nivel superior hasta llegar a lo más alto de la jerarquía.

+

El término no es usado con frecuencia, pero un + + escuchador de eventos + es un atributo especial de un objeto que escucha sus propios eventos. El documento, por ejemplo, tiene un escuchador de eventos onload para escuchar a su evento load. Los botones XUL tienen escuchadores de eventos onclick. Los escuchadores de eventos son algo realmente útil: en lugar de usarlos se podría detectar cuándo un objeto ha disparado un evento, luego averiguar de qué evento se trataba y luego tratar el evento como respuesta, pero el escuchador de eventos proporciona un mecanismo fácil para escribir manejadores de eventos para eventos tanto comunes como específicos.

+

Un manejador de eventos es un retal de código que se escribe en respuesta a un evento. Un manejador de evento onload viene a decir que cuando el documento se cargue, el manejador será llamadao. Y el atributo escuchador de evento proporciona un lugar muy apropiado en el que escribir manejadores de eventos (de hecho es tan apropiado que el término + + manejador de evento + es frecuentemente usado para describir tanto al atributo escuchador de eventos como al código manejador de eventos). Para crear un manejador de eventos, sólo hay que escribir el código que se quiere que sea ejecutado dentro del escuchador de eventos apropiado:

+
<menuitem value="Púlsame" onclick="alert('Evento manejado.')" />
+
+

Esto sigue la explicación de antes de que los manejadores de eventos pueden ser escritos para eventos que son lanzados en algún nivel inferior en la jerarquía. Un menubar en XUL, por ejemplo, puede contener manejadores de eventos para los eventos lanzados por sus menuitems hijos.

+

Arquitectura XP de Mozilla

+

Obviamente, Mozilla es mucho más que una simple interfaz. Es multiplataforma basado en los estándares y, de algún modo, los manejadores de eventos escritos en JavaScript y que residen en la interfaz XUL se están volviendo muy importantes en el núcleo de la aplicación.

+

Cosas como interfaces para sockets, edición, correo/noticias, seguridad... Las tecnologías que hacen esto posible son quizá las menos comprendidas del conglomerado de innovaciones que es Mozilla. Además de los programar estas cosas tan importantes en C++ y compilarlas plataforma a plataforma, los arquitectos y desarrolladores de Mozilla utilizan tres tecnologías + + XP + que unen el núcleo con la interfaz.

+

XPCOM no es un lenguaje de programación sino una aproximación a la programación (en C++) que proporciona un auténtico modelo de objetos de componentes multiplataforma, de donde la tecnología toma su nombre. Basado en COM, XPCOM proporciona un lenguaje e interfaces independientes de la plataforma que otros objetos pueden usar para acceder a sus servicios. XPCOM refuerza las reglas para diseñar y compilar que hacen posible el uso de servicios de un objeto sin conocer nada sobre la implementación.

+

XPIDL, el lenguaje de definición de interfaces multiplataforma, es un lenguaje en el que estas interfaces asistidas por XPCOM pueden ser descritos. Usar XPIDL para describir las interfaces XPCOM hace que éstas estén disponibles en ficheros de cabecera especiales. Finalmente, XPConnect es la tecnología que conecta estas interfaces XPCOM/XPIDL con JavaScript, el lenguaje de script que utiliza XUL. La unión de estas tres tecnologías multiplataforma se ubica en mitad de una arquitectura que tiene este aspecto:

+

Bridging C++ and JavaScript

+

Autor: Ian Oeschger
+ Otros documentos: Mozilla Jargon File y Introducción a XUL

+
+

Original Document Information

+ +
+

 

diff --git "a/files/es/archive/mozilla/xul/c\303\263mo_implementar_un_componente_procesador_de_consultas_xul/index.html" "b/files/es/archive/mozilla/xul/c\303\263mo_implementar_un_componente_procesador_de_consultas_xul/index.html" new file mode 100644 index 0000000000..f53b35c6a3 --- /dev/null +++ "b/files/es/archive/mozilla/xul/c\303\263mo_implementar_un_componente_procesador_de_consultas_xul/index.html" @@ -0,0 +1,187 @@ +--- +title: Cómo implementar un componente procesador de consultas XUL +slug: Archive/Mozilla/XUL/Cómo_implementar_un_componente_procesador_de_consultas_XUL +translation_of: Archive/Mozilla/XUL/How_to_implement_a_custom_XUL_query_processor_component +--- +

El servicio XUL apoya el uso de plantillas para crear un bloque de contenidos a partir de una consulta a una fuente de datos. La Guia de Plantillas XUL presenta una gran fuente de información detallada acerca del uso de las plantillas XUL. El servicio XUL proporciona procesadores de consulta de plantillas para RDF, XML y SQL (mozStorage). Este sistema de plantillas también da soporte a la creación de procesadores de consultas personalizadas. Los procesadores de consultas personalizadas son componentes XPCOM que deben implementar la interfaz nsIXULTemplateQueryProcessor y seguir algunos de los criterios que indican cuándo se deben registrar los mismos.

+ +

En este ejemplo, crearemos un sencillo componente XPCOM en JavaScript. Dicho componente mantendrá una pequeña selección de objetos de JavaScript en su fuente de datos. En la práctica, se usaría una fuente propia de datos personalizada.

+ +

A continuación presentamos un ejemplo del posible aspecto que podría tener nuestro servicio de XUL al utilizar un procesador de consultas personalizado:

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+    <grid>
+        <columns>
+            <column flex="1"/>
+            <column flex="3"/>
+            <column flex="2"/>
+            <column flex="1"/>
+        </columns>
+
+        <rows datasources="dummy" ref="." querytype="simpledata">
+            <template>
+                <row uri="?">
+                    <label value="?name"/>
+                    <label value="?age"/>
+                    <label value="?hair"/>
+                    <label value="?eye"/>
+                </row>
+            </template>
+        </rows>
+    </grid>
+</window>
+
+ +

Algunas cosas a tener en cuenta. En realidad no estamos utilizando las fuentes de datos en nuestro componente de ejemplo, por lo que lo configuraremos con un valor no válido. Un hilo vacío también valdría. El tipo de consulta es importante. Se usa para crear un caso de nuestro objeto XPCOM. La contracción de la identidad de nuestro componente XPCOM debería tener la forma de "@mozilla.org/xul/xul-query-processor;1?name=xxx", donde las xxx representan el tipo de consulta utilizado en el bloque de plantillas XUL. A continuación mostramos nuestro ejemplo de procesador de consultas XPCOM de JavaScript:

+ +
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+
+// basic wrapper for nsIXULTemplateResult
+function TemplateResult(aData) {
+  this._data = aData;
+  // just make a random number for the id
+  this._id = Math.random(100000).toString();
+}
+
+TemplateResult.prototype = {
+  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIXULTemplateResult]),
+
+  // private storage
+  _data: null,
+
+  // right now our results are flat lists, so no containing/recursion take place
+  isContainer: false,
+  isEmpty: true,
+  mayProcessChildren: false,
+  resource: null,
+  type: "simple-item",
+
+  get id() {
+    return this._id;
+  },
+
+  // return the value of that bound variable such as ?name
+  getBindingFor: function(aVar) {
+    // strip off the ? from the beginning of the name
+    var name = aVar.toString().slice(1);
+    return this._data[name];
+  },
+
+  // return an object instead of a string for convenient comparison purposes
+  // or null to say just use string value
+  getBindingObjectFor: function(aVar) {
+    return null;
+  },
+
+  // called when a rule matches this item.
+  ruleMatched: function(aQuery, aRuleNode) { },
+
+  // the output for a result has been removed and the result is no longer being used by the builder
+  hasBeenRemoved: function() { }
+};
+
+
+// basic wrapper for nsISimpleEnumerator
+function TemplateResultSet(aArrayOfData) {
+  this._index = 0;
+  this._array = aArrayOfData;
+}
+
+TemplateResultSet.prototype = {
+  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsISimpleEnumerator]),
+
+  hasMoreElements: function() {
+    return this._index < this._array.length;
+  },
+
+  getNext: function() {
+    return new TemplateResult(this._array[this._index++]);
+  }
+};
+
+
+// The query processor class - implements nsIXULTemplateQueryProcessor
+function TemplateQueryProcessor() {
+  // our basic list of data
+  this._data = [
+                {name: "mark", age: 36, hair: "brown", eye: "brown"},
+                {name: "bill", age: 25, hair: "red", eye: "black"},
+                {name: "joe", age: 15, hair: "blond", eye: "blue"},
+                {name: "jimmy", age: 65, hair: "gray", eye: "dull"}
+               ];
+}
+
+TemplateQueryProcessor.prototype = {
+  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIXULTemplateQueryProcessor]),
+  classDescription: "Sample XUL Template Query Processor",
+  classID: Components.ID("{282cc4ea-a49c-44fc-81f4-1f03cbb7825f}"),
+  contractID: "@mozilla.org/xul/xul-query-processor;1?name=simpledata",
+
+  getDatasource: function(aDataSources, aRootNode, aIsTrusted, aBuilder, aShouldDelayBuilding) {
+    // TODO: parse the aDataSources variable
+    // for now, ignore everything and let's just signal that we have data
+    return this._data;
+  },
+
+  initializeForBuilding: function(aDatasource, aBuilder, aRootNode) {
+    // perform any initialization that can be delayed until the content builder
+    // is ready for us to start
+  },
+
+  done: function() {
+    // called when the builder is destroyed to clean up state
+  },
+
+  compileQuery: function(aBuilder, aQuery, aRefVariable, aMemberVariable) {
+    // outputs a query object.
+    // eventually we should read the <query> to create filters
+    return this._data;
+  },
+
+  generateResults: function(aDatasource, aRef, aQuery) {
+    // preform any query and pass the data to the result set
+    return new TemplateResultSet(this._data);
+  },
+
+  addBinding: function(aRuleNode, aVar, aRef, aExpr) {
+    // add a variable binding for a particular rule, which we aren't using yet
+  },
+
+  translateRef: function(aDatasource, aRefstring) {
+    // if we return null, everything stops
+    return new TemplateResult(null);
+  },
+
+  compareResults: function(aLeft, aRight, aVar) {
+    // -1 less, 0 ==, +1 greater
+    if (aLeft < aRight) {
+      return -1;
+    }
+    else if (aLeft > aRight) {
+      return  1;
+    }
+    else {
+      return 0;
+    }
+  }
+};
+
+
+var components = [TemplateQueryProcessor];
+
+function NSGetModule(compMgr, fileSpec) {
+  return XPCOMUtils.generateModule(components);
+}
+
+ +

Nuestro ejemplo de procesador de consultas es muy fácil. Notas aclaratorias:

+ + diff --git a/files/es/archive/mozilla/xul/dialog/index.html b/files/es/archive/mozilla/xul/dialog/index.html new file mode 100644 index 0000000000..90b8773539 --- /dev/null +++ b/files/es/archive/mozilla/xul/dialog/index.html @@ -0,0 +1,383 @@ +--- +title: dialog +slug: Archive/Mozilla/XUL/Dialog +translation_of: Archive/Mozilla/XUL/dialog +--- +
+ « Referencia de XUL [ + Ejemplos | + Atributos | + Propiedades | + Methoden | + Métodos ] +
+ +

Este elemento debería utilizarse en lugar del elemento window para cuadros de diálogo. El atributo buttons puede utilizarse para configurar aquellos botones que deberían aparecer en el cuadro de diálogo. Estos botones serán colocados en el lugar correcto para la plataforma del usuario.

+ +

Hay más información disponible en XUL Tutorial y en Dialogs and prompts (fragmentos de código).

+ +
+
Atributos
+
buttonaccesskeyaccept, buttonaccesskeycancel, buttonaccesskeydisclosure, buttonaccesskeyextra1, buttonaccesskeyextra2, buttonaccesskeyhelp, buttonalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultButton, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialogextra1, ondialogextra2, ondialoghelp, title
+
+ +
+
Propiedades
+
buttons, defaultButton
+
+ +
+
Métodos
+
acceptDialog, cancelDialog, centerWindowOnScreen, getButton, moveToAlertPosition
+
+ +

Ejemplos

+ +
Image:XUL_ref_dialog.png
+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
+<dialog id="donothing" title="Dialog example"
+   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+   buttons="accept,cancel"
+   buttonlabelcancel="Cancel"
+   buttonlabelaccept="Save"
+   ondialogaccept="return doOK();"
+   ondialogcancel="return doCancel();">
+
+    <dialogheader title="Options" description="My preferences"/>
+    <groupbox>
+      <caption label="Colour"/>
+      <radiogroup>
+        <radio label="Red"/>
+        <radio label="Green" selected="true"/>
+        <radio label="Blue"/>
+      </radiogroup>
+      <label value="Nickname"/>
+      <textbox />
+   </groupbox>
+</dialog>
+
+ +

Atributos

+ +

+ + +
+
activetitlebarcolor
+
Type: color string
+
Specify background color of the window's titlebar when it is active (foreground). Moreover this hides separator between titlebar and window contents. This only affects Mac OS X.
+
+
+ +
+
+ buttonaccesskeyaccept
+
+ Type: string
+
+ The access key to use for the "accept" button.
+
+
+ +
+
+ buttonaccesskeycancel
+
+ Type: string
+
+ The access key to use for the "cancel" button.
+
+
+ +
+
+ buttonaccesskeydisclosure
+
+ Type: string
+
+ The access key to use for the "disclosure" button.
+
+
+ +
+
+ buttonaccesskeyextra1
+
+ Type: string
+
+ The access key to use for the first extra button.
+
+
+ + +
+
buttonaccesskeyextra2
+
Type: string
+
The access key to use for the second extra button.
+
+
+ +
+
+ buttonaccesskeyhelp
+
+ Type: string
+
+ The access key to use for the "help" button.
+
+
+ +
+
+ buttonalign
+
+ Type: string
+
+ The value of the align attribute for the box containing the buttons.
+
+
+ + +
+
buttondir
+
Type: string
+
The value of the dir attribute for the box containing the buttons.
+
+
+ + +
+
buttondisabledaccept
+
Type: boolean
+
If true, the accept button is disabled.
+
+
+ + +
+
buttonlabelaccept
+
Type: string
+
The label to appear on the "accept" button.
+
+
+ + +
+
buttonlabelcancel
+
Type: string
+
The label to appear on the "cancel" button.
+
+
+ + +
+
buttonlabeldisclosure
+
Type: string
+
The label to appear on the "disclosure" button.
+
+
+ + +
+
buttonlabelextra1
+
Type: string
+
The label to appear on the first extra button.
+
+
+ + +
+
buttonlabelextra2
+
Type: string
+
The label to appear on the second extra button.
+
+
+ + +
+
buttonlabelhelp
+
Type: string
+
The label to appear on the "help" button.
+
+
+ + +
+
buttonorient
+
Type: string
+
The value of the orient attribute for the box containing the buttons.
+
+
+ + +
+
buttonpack
+
Type: string
+
The value of the pack attribute for the box containing the buttons.
+
+
+ +
+
+ buttons
+
+ Type: comma-separated list of the values below
+
+ A comma-separated list of buttons to appear in the dialog box. The buttons will be placed in suitable locations for the user's platform and basic event handling will be performed automatically. The following values can be used in the list: +
    +
  • accept: The OK button, which will accept the changes when pressed. This button will also be the default button.
    • +
  • cancel: The cancel button which will cancel the operation.
    • +
  • help: A help button for displaying help about the dialog.
    • +
  • disclosure: A button to show more information. This might be a button or a disclosure triangle.
    • +
  • extra1: An optional additional button. You can set its label with the buttonlabelextra1 attribute and its command with the ondialogextra1 attribute.
    • +
  • extra2: A second optional additional button. You can set its label with the buttonlabelextra2 attribute and its command with the ondialogextra2 attribute.
    • +
+
+
+
Note: If you don't want to display any buttons in the dialog box, set the value of this attribute to "," (a single comma).
+
Warning: If the accept and cancel buttons are actually shown is system dependent and is mainly controlled by the value of the boolean preference browser.preferences.instantApply. If it is set to true any changes to settings are supposed to be applied immediately. The accept button is therefore unnecessary and is hidden. The cancel button might be shown as an additional possibility to close the dialog in this situation (Windows and Linux) or might be hidden, too (Mac OS).
+ The default setting of browser.preferences.instantApply currently is true on Linux and Mac OS and false on Windows (which however might or might not change soon, see bug 738797 and bug 1037225).
+
+ + +
+
defaultButton
+
Type: string
+
Normally this attribute should not be set, but if it is, it specifies the default button in the dialog. Typically, this means that the button will be activated when the Enter key is pressed. This should be set to one of the same values as those for the buttons attribute.
+
+
+ + +
+
inactivetitlebarcolor
+
Type: color string
+
Specify background color of the window's titlebar when it is inactive (background). Moreover this hides separator between titlebar and window contents. This affects only on Mac OS X.
+
+
+ + +
+
ondialogaccept
+
Type: script code
+
The code in this attribute is called when the accept button is pressed, or when the acceptDialog method is called. If the handler returns true, the dialog will indeed go away, but if it returns false it will not.
+
+
+ + +
+
ondialogcancel
+
Type: script code
+
The code in this attribute is called when the "cancel" button is pressed or when the cancelDialog method is called. If the routine returns true, the dialog will indeed go away, but if it returns false it will not.
+
+
+ + +
+
ondialogdisclosure
+
Type: script code
+
The code in this attribute is called when the "disclosure" button is pressed.
+
+
+ + +
+
ondialogextra1
+
Type: script code
+
The code in this attribute is called when the first extra button is pressed.
+
+
+ + +
+
ondialogextra2
+
Type: script code
+
The code in this attribute is called when the second extra button is pressed.
+
+
+ + +
+
ondialoghelp
+
Type: script code
+
The code in this attribute is called when the "help" button is pressed.
+
+
+ + +
+
title
+
Type: string
+
The text to appear in the title bar of the window.
+
+
+ +

Propiedades

+ +

+ +
+
buttons
+
Typo: lista de los valores de abajo separados por comas
+
Una lista separada por comas de botones que aparecerán en el cuadro de diálogo. Los botones serán puestos en lugares adecuados para la plataforma del usuario y la gestión básica de eventos se ejecutará automáticamente. En la lista pueden utilizarse los siguientes valores:
+
+ +
+ +
+
defaultButton
+
Type: string
+
Normally this attribute should not be set, but if it is, it specifies the default button in the dialog. Typically, this means that the button will be activated when the Enter key is pressed. This should be set to one of the same values as those for the buttons attribute.
+
+ +

Métodos

+ + + + + + + +
+

Métodos Heredados
+addEventListener(), appendChild(), blur, click, cloneNode(), compareDocumentPosition, dispatchEvent(), doCommand, focus, getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getBoundingClientRect(), getClientRects(), getElementsByAttribute, getElementsByAttributeNS, getElementsByClassName(), getElementsByTagName(), getElementsByTagNameNS(), getFeature, getUserData, hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isDefaultNamespace(), isEqualNode, isSameNode, isSupported(), lookupNamespaceURI, lookupPrefix, normalize(), querySelector(), querySelectorAll(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS(), setUserData

+ +
+
+ acceptDialog()
+
+ Return type: no return value
+
+ Accepts the dialog and closes it, similar to pressing the OK button.
+
+
cancelDialog()
+
Return type: no return value
+
Cancels the dialog and closes it, similar to pressing the Cancel button.
+
+
centerWindowOnScreen()
+
Return type: no return value
+
Centers the dialog on the screen.
+
+
getButton( type )
+
Return type: button element
+
Returns the button element in the dialog corresponding to the given type.
+
+
moveToAlertPosition()
+
Return type: no return value
+
Moves and resizes the dialog to a position and size suitable for an alert box.
+
+ + + +
+
Elementos
+
dialogheader
+
diff --git a/files/es/archive/mozilla/xul/elementos/index.html b/files/es/archive/mozilla/xul/elementos/index.html new file mode 100644 index 0000000000..99aa60adfc --- /dev/null +++ b/files/es/archive/mozilla/xul/elementos/index.html @@ -0,0 +1,323 @@ +--- +title: Elementos +slug: Archive/Mozilla/XUL/Elementos +tags: + - Todas_las_Categorías + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/elements +--- +

« Referencia de XUL «

+ + + + + + + + + + + +
Todos los elementos XUL (ordenados alfabéticamente)
+

action
+ arrowscrollbox
+ assign
+ bbox
+ binding
+ bindings
+ box
+ broadcaster
+ broadcasterset
+ button
+ browser
+ checkbox
+ caption
+ colorpicker
+ column
+ columns
+ commandset
+ command
+ conditions
+ content
+ datepicker
+ deck
+ description
+ dialog
+ dialogheader
+ dropmarker
+ editor
+ grid
+ grippy
+ groupbox
+ hbox
+ iframe
+ image
+ key
+ keyset
+ label
+ listbox
+ listcell
+ listcol
+ listcols
+ listhead
+ listheader
+ listitem

+ 		+

member
+ menu
+ menubar
+ menuitem
+ menulist
+ menupopup
+ menuseparator
+ notification
+ notificationbox
+ observes
+ overlay
+ page
+ panel
+ param
+ popupset
+ preference
+ preferences
+ prefpane
+ prefwindow
+ progressmeter
+ query
+ queryset
+ radio
+ radiogroup
+ resizer
+ richlistbox
+ richlistitem
+ row
+ rows
+ rule
+ scale
+ script
+ scrollbar
+ scrollbox
+ scrollcorner
+ separator
+ spacer
+ spinbuttons
+ splitter
+ stack
+ statusbar

+ 		+

statusbarpanel
+ stringbundle
+ stringbundleset
+ tab
+ tabbrowser (Firefox-a partir de
+ Firefox 3/Gecko 1.9)
+ tabbox
+ tabpanel
+ tabpanels
+ tabs
+ template
+ textnode
+ textbox
+ textbox (Firefox autocomplete)
+ textbox (Mozilla autocomplete)
+ timepicker
+ titlebar
+ toolbar
+ toolbarbutton
+ toolbargrippy
+ toolbaritem
+ toolbarpalette
+ toolbarseparator
+ toolbarset
+ toolbarspacer
+ toolbarspring
+ toolbox
+ tooltip
+ tree
+ treecell
+ treechildren
+ treecol
+ treecols
+ treeitem
+ treerow
+ treeseparator
+ triple
+ vbox
+ where
+ window
+ wizard
+ wizardpage

+
+

Referencia de XUL

+

« Referencia de XUL «

+ + + + + + + + + + + +
Elementos XUL por categoría
+

VENTANAS

+

dialog
+ overlay
+ page
+ window
+ wizard
+ wizardpage
+ preference
+ preferences
+ prefpane
+ prefwindow

+

ESTRUCTURA
+ DE VENTANAS

+

browser
+ tabbrowser
+ editor
+ iframe
+ titlebar
+ resizer
+ statusbar
+ statusbarpanel
+ dialogheader
+ notification
+ notificationbox

+

MENUS Y VENTANAS
+ EMERGENTES

+

menubar
+ menu
+ menuitem
+ menuseparator
+ menupopup
+ panel
+ tooltip
+ popupset

+

BARRAS DE
+ HERRAMIENTAS

+

toolbar
+ toolbarbutton
+ toolbargrippy
+ toolbaritem
+ toolbarpalette
+ toolbarseparator
+ toolbarset
+ toolbarspacer
+ toolbarspring
+ toolbox

+

PESTAÑAS Y
+ AGRUPAMIENTO

+

tabbox
+ tabs
+ tab
+ tabpanels
+ tabpanel
+ groupbox
+ caption
+ separator
+ spacer

+ 		+

CONTROLES

+

button
+ checkbox
+ colorpicker
+ datepicker
+ menulist
+ progressmeter
+ radio
+ radiogroup
+ scale
+ splitter
+ textbox
+ textbox (Firefox autocomplete)
+ textbox (Mozilla autocomplete)
+ timepicker

+

TEXTO E
+ IMAGENES

+

description
+ label
+ image

+

LISTAS

+

listbox
+ listitem
+ listcell
+ listcol
+ listcols
+ listhead
+ listheader
+ richlistbox
+ richlistitem

+

ARBOLES

+

tree
+ treecell
+ treechildren
+ treecol
+ treecols
+ treeitem
+ treerow
+ treeseparator

+

 

+ 		+

DISPOSICION

+

box
+ hbox
+ vbox
+ bbox
+ deck
+ stack
+ grid
+ columns
+ column
+ rows
+ row
+ scrollbox

+

PLANTILLAS

+

action
+ assign
+ binding
+ bindings
+ conditions
+ content
+ member
+ param
+ query
+ queryset
+ rule
+ template
+ textnode
+ triple
+ where

+

SCRIPTING

+

script
+ commandset
+ command
+ broadcaster
+ broadcasterset
+ observes
+ key
+ keyset
+ stringbundle
+ stringbundleset

+

ELEMENTOS
+ DE AYUDA

+

arrowscrollbox
+ dropmarker
+ grippy
+ scrollbar
+ scrollcorner
+ spinbuttons

+
+

Otras listas de XUL

+ diff --git a/files/es/archive/mozilla/xul/events/index.html b/files/es/archive/mozilla/xul/events/index.html new file mode 100644 index 0000000000..1911016926 --- /dev/null +++ b/files/es/archive/mozilla/xul/events/index.html @@ -0,0 +1,460 @@ +--- +title: Eventos +slug: Archive/Mozilla/XUL/Events +translation_of: Archive/Mozilla/XUL/Events +--- +

 

+ +

« Referencia de XUL

+ +

 

+ +

The following tables describe the event handler that are valid for most XUL elements. The events listeners can be attached using addEventListener and removed using removeEventListener.

+ +

Some of the events can be attached using attributes as well. When attaching event listeners using attributes, be aware that only one listener can be attached at a time. Any previously attached listeners are disconnected. The attribute name is the event name with an 'on' prefix.

+ +

Inherited DOM events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventDescription
+

blur

+ 		+

The opposite of the focus event, the blur event is passed after an element loses the focus.
+ attribute: onblur

+
+

change

+ 		+

This event is sent when the value of the textbox is changed. The event is not sent until the focus is moved to another element.
+ attribute: onchange

+
+

click

+ 		+

This event is sent when a mouse button is pressed and released. You can determine which mouse button was clicked by retrieving the button property of the event object. This event is also sent when the user double-clicks with the mouse. The detail property specifies how many clicks occurred. You can also check for triple-clicks in a similar manner. You should not use this event in XUL to respond to user actions; the command event should be used instead.
+ attribute: onclick

+
+

dblclick

+ 		+

This event is like the click event except it is only sent when the user double clicks with the mouse. This is an alternative to checking the detail property in the click event.
+ attribute: ondblclick

+
+

DOMMouseScroll

+ 		+

This event is sent when the mouse wheel is moved, whether it results in content being scrolled or not.
+ The target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the click event.

+
+

focus

+ 		+

The focus event is sent to an element when it receives the focus. Once an element has the focus, keyboard events are sent to it. The focus can be changed by clicking on an element or by pressing TAB to switch to the next element is sequence.
+ attribute: onfocus

+
+

keydown

+ 		+

The keydown event is sent to an element that has the focus and a key is pressed but not released.
+ attribute: onkeydown

+
+

keypress

+ 		+

The keypress event is sent to an element that has the focus and a key is pressed and released. When the user presses a key, the keydown event is first sent, followed by the keypress event and then the keyup event. In a textbox, a user normally can hold down a key to repeat a character In this case, multiple sets of key events are sent as if the user rapidly pressed the same key repeatedly.
+ attribute: onkeypress

+
+

keyup

+ 		+

The keyup event is sent to an element that has the focus and a key is released.
+ attribute: onkeyup

+
+

load

+ 		+

This event is sent to the window after it has been fully loaded. You should place this event handler on the window element. This event may also be used on the image element, or an element that accepts an image attribute, and will be fired when the image has finished loading. For images, this event does not bubble up the element tree, so it will not conflict with the window's load event.
+ attribute: onload

+
+

mousedown

+ 		+

This event is sent when the mouse is pressed on an element but not released.
+ attribute: onmousedown

+
+

mousemove

+ 		+

This event is sent repeatedly as the mouse is moved over an element.
+ attribute: onmousemove

+
+

mouseout

+ 		+

This mouseout event is sent to an element when the user moves the mouse outside the element. This event is the reverse of mouseover.
+ attribute: onmouseout

+
+

mouseover

+ 		+

This event is sent to an element when the mouse first moves over an element. You can use this event to provide feedback to the user.
+ attribute: onmouseover

+
+

mouseup

+ 		+

This event is sent when the mouse is released on an element.
+ attribute: onmouseup

+
+

select

+ 		+

This event is sent to a listbox or tree when an item is selected.
+ attribute: onselect

+
+

unload

+ 		+

This event is sent to a window when the window has closed. This is done after the close event. You should place this event handler on the window element.
+ attribute: onunload

+
+ +

Mutation DOM events

+ + + + + + + + + + + + + + + + + + + + +
EventDescription
+

DOMAttrModified

+ 		+

This event is sent to an element when one of its attributes is modified. In the event handler, you can retrieve the attribute that was modified using the event's attrName property, and you can retrieve the old and new values of the attribute using the event's prevValue and newValue properties.

+
+

DOMNodeInserted

+ 		+

This event is sent when a node is added as a child of a element. If you capture this event at the document level, you can be notified of document changes.

+
+

DOMNodeRemoved

+ 		+

This event is sent when a node is removed from an element. If you capture this event at the document level, you can be notified of document changes.

+
+ +

It should be noted that the presence of any mutation event listeners in a document degrades the performance of subsequent DOM operations in that document. In simple tests that can mean that a DOM operation takes between 1.5 and 7 as long as it would without any mutation listener.

+ +

Common XUL events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventDescription
+

broadcast

+ 		+

The event handler should be placed on an observer. The broadcast event is sent when the attributes of the element (such as a broadcaster) being listened to are changed.
+ attribute: onbroadcast

+
+

close

+ 		+

This event is sent when a request has been made to close the window when the user presses the close button. If you place an event handler on the window element, you can trap the window close. If you return false from the close handler, the window will not close. Return true to have it close normally. Note that this event is only fired when the user presses the close button on the titlebar; use the unload event to capture all attempts to unload the window.
+ attribute: onclose

+
+

command

+ 		+

This event handler is called when an element is activated. How it is activated varies for each element and in many cases, there are several ways to activate an element. For example, a button can be activated by clicking on it with the mouse or by pressing ENTER while it has the focus. Menus can be activated by selecting them with the mouse or by pressing a shortcut key. You should always use the command event instead of click because it will be called in all of the needed cases.
+ attribute: oncommand

+
+

commandupdate

+ 		+

This event occurs when a command update occurs on a <commandset> element. You would use this to update the disabled status of its commands.
+ attribute: oncommandupdate

+
+

contextmenu

+ 		+

This event is sent to an element when the user requests to open the context menu for the element. The action to do this varies by platform, but it will typically be a right click. This handler is usually used to dynamically set the commands on a menu when the user requests to display it, or you can use popupshowing event. Returning false from this event handler prevents the popup from appearing.
+ attribute: oncontextmenu

+
+

drag

+ 		+

The drag event is sent to the source node (the node that was dragged) several times a second while the drag is occurring.
+ attribute: ondrag

+
+

dragdrop

+ 		+

This event is sent when the user releases the mouse button to drop an object being dragged. The element, if it accepts the drop, should respond in some manner such inserting the dragged object into itself.
+ attribute: ondragdrop

+
+

dragend

+ 		+

The dragend event is sent to the source node (the node that was dragged) when the drag is finished.
+ attribute: ondragend

+
+

dragenter

+ 		+

The dragenter event is sent when the mouse pointer first moves over an element during a drag. It is similar to the mouseover event but occurs while dragging.
+ attribute: ondragenter

+
+

dragexit

+ 		+

This event is sent when the mouse pointer moves away from an element during a drag. It is also called after a drop on an element. It is similar to the mouseout event but occurs during a drag.
+ attribute: ondragexit

+
+

draggesture

+ 		+

This event is sent when the user starts dragging the element, usually by holding down the mouse button and moving the mouse.
+ attribute: ondraggesture

+
+

dragover

+ 		+

Related to the mousemove event, this event is sent while something is being dragged over an element. The handler should indicate whether the object being dragged can be dropped.
+ attribute: ondragover

+
+

input

+ 		+

This event is sent when a user enters text in a textbox. This event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.
+ attribute: oninput

+
+

overflow

+ 		+

This event is only sent to a box or other layout element with a CSS overflow property set to a value other than 'visible'. When there is not enough space to display the contents of the element at full size, the overflow event will be fired. Depending on the value of the overflow property, scrollbars may have appeared. For example, if a box has a maximum size of 100 pixels, and only enough space for 80 pixels is available, the overflow event will be sent to the box. If the size changes, for example, by the user resizing the window, the underflow event will be fired when enough space becomes available.
+ attribute: onoverflow

+
+

popuphidden

+ 		+

This event is sent to a popup after it has been hidden.
+ attribute: onpopuphidden

+
+

popuphiding

+ 		+

This event is sent to a popup when it is about to be hidden.
+ attribute: onpopuphiding

+
+

popupshowing

+ 		+

This event is sent to a popup just before it is popped open. This handler is usually used to dynamically set the contents when the user requests to display it. Returning false from this event handler prevents the popup from appearing.
+ attribute: onpopupshowing

+
+

popupshown

+ 		+

This is event is sent to a popup after it has been opened, much like the onload event is sent to a window when it is opened.
+ attribute: onpopupshown

+
+

syncfrompreference

+ 		+

This event is sent when the element is being changed because a preference changed, or when an element is initialized from a preference. This event will only be sent to elements connected to a preference and in a prefwindow. This is not a real event instead it is just a function call and must use the attribute syntax. The script may return a value to set the element to a specific value rather than the value of the preference. This event is usually used to adjust the preference value so that it is more suitable for display in the user interface.
+ attribute: onsyncfrompreference

+
+

synctopreference

+ 		+

This event is sent when the element connected to a preference has changed. This event will only be sent to elements connected to a preference and in a prefwindow. This is not a real event instead it is just a function call and must use the attribute syntax. The script may return a value to set the preference to a specific value rather than the value of the element.
+ attribute: onsynctopreference

+
+

underflow

+ 		+

This event is sent to an element when there becomes enough space to display it at full size. This applies to boxes and other layout elements with a CSS overflow property other than 'visible'. The underflow event can be used to indicate that a scrolling mechanism is no longer necessary.
+ attribute: onunderflow

+
+

DOMMenuItemActive

+ 		+

This event is sent when a menu or menuitem is hovered over, or highlighted. This event bubbles.

+
+

DOMMenuItemInactive

+ 		+

This event is sent when a menu or menuitem is no longer being hovered over, or highlighted. This event bubbles.

+
+ +

Accessibility events

+ +

These events are used to notify the accessibility system of changes to an element. You would not normally use these yourself.

+ + + + + + + + + + + + + + + + +
EventDescription
+

CheckboxStateChange

+ 		+

This event is sent when a checkbox is checked or unchecked, either by the user or a script. Normally, you would use the command event to listen to checkbox changes, however, the command event is only sent when the user modifies the value, while the CheckboxStateChange event is also sent when a script modifies the checked property of a checkbox. For user changes, the CheckboxStateChange event is sent before the command event. The CheckboxStateChange event does not bubble.

+
+

RadioStateChange

+ 		+

This event is sent when a radio button is selected, either by the user or a script. Normally, you would use the command event to listen to radio button selection changes, however, the command event is only sent when the user changes the selected radio button, while the RadioStateChange event is also sent when a script modifies the selection. For user changes, the RadioStateChange event is sent before the command event. The RadioStateChange event bubbles so you can also attach the event handler to the enclosing radiogroup.

+
diff --git "a/files/es/archive/mozilla/xul/gu\303\255a_de_plantillas/index.html" "b/files/es/archive/mozilla/xul/gu\303\255a_de_plantillas/index.html" new file mode 100644 index 0000000000..6a22cc7d9b --- /dev/null +++ "b/files/es/archive/mozilla/xul/gu\303\255a_de_plantillas/index.html" @@ -0,0 +1,6 @@ +--- +title: Guía de plantillas +slug: Archive/Mozilla/XUL/Guía_de_plantillas +translation_of: Archive/Mozilla/XUL/Template_Guide +--- +

This page was auto-generated because a user created a sub-page to this page.

diff --git "a/files/es/archive/mozilla/xul/gu\303\255a_de_plantillas/ordenar_resultados/index.html" "b/files/es/archive/mozilla/xul/gu\303\255a_de_plantillas/ordenar_resultados/index.html" new file mode 100644 index 0000000000..916878ae02 --- /dev/null +++ "b/files/es/archive/mozilla/xul/gu\303\255a_de_plantillas/ordenar_resultados/index.html" @@ -0,0 +1,100 @@ +--- +title: Ordenar resultados +slug: Archive/Mozilla/XUL/Guía_de_plantillas/Ordenar_resultados +tags: + - Guía_de_plantillas_XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Template_Guide/Sorting_Results +--- +
+

« AnteriorSiguiente »

+
+ +

The template content builder uses a separate component to insert generated nodes into the content tree. This is done when inserting the nodes when they are first created as well as when a new result is available. This additional component is called the sort service. It is responsible for determining where to insert nodes into the XUL document. Since the component is called the 'sort service' it is also used to sort the generated results. Since an RDF graph doesn't specify any order to results -- unless the items are in an RDF Seq -- the template builder will handle the results in any order. You may have noticed in the examples that results that are not in a Seq are not output in any particular order.

+ +

The sort service may be used to order the results in some particular order, generally, ascending or descending based on the value of some predicate pointing out of the result node. The sort service also supports a third sort order, natural order, which is the default. It causes items to appear without any extra sorting in the order they are added. However, if the results are items in a Seq they will appear in the order listed in the Seq. For instance, the photos are listed in the same order in this example as they appear in the Seq in the datasource.

+ +

This method of sorting a Seq works best for simple rule conditions since it is obvious how the starting ref relates to the end member results (they are just the children), or for extended syntax rules that follow a similar pattern. For more complex rules, this natural sorting will not work, because the sort service assumes that the starting ref resource is the container and the end results are the children. In this case, the natural order of the results will just be the order that the template builder generates the results.

+ +

For ascending or descending sorts, this doesn't matter, since it will ignore whether results are containers and just sort by a value, alphabetically or numerically depending on the type of data.

+ +

The sort service only applies to content builders. The tree builder uses a different and much simpler means of sorting since there is no content to insert. It supports the same three types of sorting, natural, ascending or descending. In the latter two sort types, the tree builder sorts by the value in a column. For instance, if the photos were displayed in a two column tree showing the title and description, you could sort by either title or description. The user can change the sort column and direction by clicking the column headers, however, you can programmatically change the sort as well.

+ +

Sorting Tree Results

+ +

We'll examine sorting of trees first since trees are the most common element used with sorted items. Using a tree builder, you can sort the results in a tree by a column. To do this, place a sort attribute on a <treecol> element referring to the variable to sort by for that column.

+ +
<treecol id="name" label="Name" sort="?name" flex="1"/>
+<treecol id="date" label="Date" sort="?date" flex="1"/>
+
+ +

In this example, the first column will be sorted by the ?name variable and the second column by the ?date variable. When the sort is ascending, the tree rows will be sorted in alphabetical order. When the sort is descending, the tree rows will be sorted in the reverse order. For natural sorting, the rows will be sorted according to the natural order in the RDF datasource. Only one column applies a sort at a time. If the tree is sorted by name, and the user clicks on the date column header, the sort will change to the date column.

+ +

There are two additional attributes used for sorting, which you may set on a column to specify the initial sort. These attributes are modified when the user changes the sort. The sortDirection attribute may be used to specify the initial sort direction for a column. Only one column should have this attribute set, as a tree may only be sorted by one column at a time. The value should be either 'ascending', 'descending' or 'natural'. This last value is the default if the attribute is not specified. The sortActive attribute may be set to true or false and specifies which column the tree is sorted by. Only one column should have the sortActive attribute set to true at a time. The tree will change both attributes as necessary automatically when the column headers are clicked or the tree is sorted by other means.

+ +

If you don't want to allow sorting by a certain column, you can leave out the sort attribute. Only specify this attribute on columns that you wish to allow the user to sort by.

+ +

Here is a complete example of sorting a tree.

+ +

The sort attribute should be set to the variable that holds the values to sort by. Usually, this would be the same variable that is used to generate the label for the cells in that column, however this is not actually necessary. For instance, in the example the second column sorts by date, but if you were to use a different variable such as ?description, assuming a <binding> set it, the tree would sort by the value of the description variable for each row. In almost all situations however, you would normally sort using the same variable used for the label value. However, one situation where this is not desirable is if the displayed values would not generate the correct order as there is a lower representation that is more accurate. For example, the date 'May 15' would appear after 'August 24' when sorted purely alphabetically but before it when sorted chronologically.

+ +

Another way to sort by dates is to use the the parseType="Date" construct in the RDF datasource. This marks a literal as being a date value rather than a string. The builder will recognize this and sort chronologically instead. This also has the advantage that the dates will be displayed according to the user's current locale (meaning that the date is formatted so as to be suitable for the user's language). Here is a sample of how to specify this in the RDF/XML datasource:

+ +
<rdf:RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:r="http://www.xulplanet.com/rdf/"
+     xmlns:nc="http://home.netscape.com/NC-rdf#">
+  <rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg">
+    <r:date nc:parseType="Date">1125966767295<r:date>
+  </rdf:Description>
+</rdf:RDF>
+
+ +

You can also specify parseType="Integer" for numbers which will allow sorting numerically. By specifing different types for different values, you can sort alphabetically, numerically or by date.

+ +

If you are using the simple rule syntax, there are no variables, so you need to specify the full predicate including the rdf: prefix in the sort attribute. For instance:

+ +
<treecol id="name" label="Name" sort="rdf:http://purl.org/dc/elements/1.1/title" flex="1"/>
+
+ +

Note that all of this discussion about sorting only applies to tree builders. For other elements or content trees, a different sorting mechanism must be used which will be discussed next.

+ +

Content Sorting

+ +

For content builders (templates that do not use flags="dont-build-content"), sorting is done using a different means. Instead of sorting on a variable generated during the template generation, sorting for content builders may only be performed using a triple pointing out of the member variable. There is no connection between the generated variables and the resource used for sorting, so it doesn't have to be one used in the template.

+ +

You specify the resource used for sorting with the sortResource attribute on the root element, as follows:

+ +
<hbox datasources="template-guide-photos5.rdf"
+      sortResource="http://purl.org/dc/elements/1.1/title"
+      sortDirection="ascending"
+      ref="http://www.xulplanet.com/rdf/myphotos">
+  <template>
+    <vbox class="box-padded" uri="rdf:*">
+      <image src="rdf:*"/>
+      <label value="rdf:http://purl.org/dc/elements/1.1/title"/>
+    </vbox>
+  </template>
+</hbox>
+
+ +

In this example, the generated items will be sorted by title. The sortDirection attribute specifies the sort direction and may be set to "descending" for a reverse sort. The sortDirection attribute functions similarly to how the tree builder uses it. With a tree builder, each column has its own sort specified using the sort attribute, and the sortActive attribute is used to indicate the column that is currently sorted. For other content, there are no columns and only one sort is applicable, so the sortActive attribute is not necessary.

+ +

When the template builder generates a result, the sort service uses the value of the sortResource predicate for the result to determine where in the content the generated output should be inserted. When the RDF datasource changes, and a new result is available, the sort service inserts the new content at the right location.

+ +

Unlike with trees, you can sort using a secondary resource with the sortResource2 attribute which is used in the same manner as the sortResource attribute. If the values for the sortResource predicate are the same for two results, the sortResource2 predicate is used to further clarify the order. You can only have one secondary resource, that is, there is no sortResource3 attribute.

+ +

To change the sorting for a template's generated contents, you can either change the sort related attributes and rebuild the template, or for listboxes and menus, you can call the sort service's sort method:

+ +
var listbox = document.getElementById("aListBox");
+
+var sortService = Components.classes["@mozilla.org/xul/xul-sort-service;1"].
+                    getService(Components.interfaces.nsIXULSortService);
+sortService.sort(listbox, "http://purl.org/dc/elements/1.1/title", "descending");
+
+ +

This code will sort a listbox by title in a descending order. The arguments to the sort method specify the root node (the listbox), the sort resource and the sort direction.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/index.html b/files/es/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..1189079118 --- /dev/null +++ b/files/es/archive/mozilla/xul/index.html @@ -0,0 +1,28 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - Todas_las_Categorías + - XUL +translation_of: Archive/Mozilla/XUL +--- +

 

+
Empezando
+Tutorial de introducción a XUL, documento original de XULPlanet.
+
+

XUL es el lenguaje XML para interfaces de usuario de Mozilla. Te permite crear potentes aplicaciones multiplataforma que pueden ejecutarse con conexión a Internet o sin ella. Estas aplicaciones son fácilmente personalizables con texto alternativo, gráficos, y diseños por lo que pueden ser fácilmente instalados o traducidos para diversos mercados. Los desarrolladores web que estén familiarizados con HTML Dinámico (DHTML) pueden aprender XUL fácilmente y empezar a crear aplicaciones ya.

+
+ +

Documentación

Referencia XUL
Vea también la documentación del MDC sobre prefwindow.
Bestiario XUL
Esta "XULNote" muestra algunos conceptos clave y términos en el entorno de desarrollo XUL.
Xul Periodic Table (en)
Échale un vistazo a los elementos de una Interfaz XUL.
Wikilibro de XUL
Wikilibro con una introducción al lenguaje XUL.

Ver Todos...

Comunidad

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

* Foros de XULPlanet (en)

Ver todas...

Herramientas

Ver todas...

Temas relacionados

JavaScript, XBL, CSS, RDF, Extensiones, XULRunner
+

Categorías

+

Interwiki Language Links automatismos

+

 

+

 

+

 

+

diff --git a/files/es/archive/mozilla/xul/method/index.html b/files/es/archive/mozilla/xul/method/index.html new file mode 100644 index 0000000000..101edc07d5 --- /dev/null +++ b/files/es/archive/mozilla/xul/method/index.html @@ -0,0 +1,174 @@ +--- +title: Métodos +slug: Archive/Mozilla/XUL/Method +translation_of: Archive/Mozilla/XUL/Method +--- +

« Referencia de XUL

+ + + + + + diff --git a/files/es/archive/mozilla/xul/property/align/index.html b/files/es/archive/mozilla/xul/property/align/index.html new file mode 100644 index 0000000000..d3fc019b3d --- /dev/null +++ b/files/es/archive/mozilla/xul/property/align/index.html @@ -0,0 +1,12 @@ +--- +title: Align +slug: Archive/Mozilla/XUL/Property/Align +translation_of: Archive/Mozilla/XUL/Property/align +--- +
« Referencia de XUL
+ +
+
align
+
Tipo: string
+
Gets and sets the value of the align attribute.
+
diff --git a/files/es/archive/mozilla/xul/property/buttons/index.html b/files/es/archive/mozilla/xul/property/buttons/index.html new file mode 100644 index 0000000000..18c1b31651 --- /dev/null +++ b/files/es/archive/mozilla/xul/property/buttons/index.html @@ -0,0 +1,21 @@ +--- +title: buttons +slug: Archive/Mozilla/XUL/Property/Buttons +translation_of: Archive/Mozilla/XUL/Property/buttons +--- +
« Referencia de XUL
+ +
+
buttons
+
Typo: lista de los valores de abajo separados por comas
+
Una lista separada por comas de botones que aparecerán en el cuadro de diálogo. Los botones serán puestos en lugares adecuados para la plataforma del usuario y la gestión básica de eventos se ejecutará automáticamente. En la lista pueden utilizarse los siguientes valores:
+
+ + diff --git a/files/es/archive/mozilla/xul/property/index.html b/files/es/archive/mozilla/xul/property/index.html new file mode 100644 index 0000000000..1a7ae096bc --- /dev/null +++ b/files/es/archive/mozilla/xul/property/index.html @@ -0,0 +1,273 @@ +--- +title: Propiedades +slug: Archive/Mozilla/XUL/Property +translation_of: Archive/Mozilla/XUL/Property +--- +

« Referencia de XUL

+ + + + + + diff --git a/files/es/archive/mozilla/xul/style/index.html b/files/es/archive/mozilla/xul/style/index.html new file mode 100644 index 0000000000..920b41ddce --- /dev/null +++ b/files/es/archive/mozilla/xul/style/index.html @@ -0,0 +1,31 @@ +--- +title: Clases de estilo +slug: Archive/Mozilla/XUL/Style +translation_of: Archive/Mozilla/XUL/Style +--- +

« Referencia de XUL

+ + diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html new file mode 100644 index 0000000000..dd76069198 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/actualizar_comandos/index.html @@ -0,0 +1,62 @@ +--- +title: Actualizar comandos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Actualizar_comandos +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Updating_Commands +--- +

 

+

En esta sección veremos como actualizar comandos.

+

Invocando comandos

+

Si un comando tiene un atributo oncommand, podemos invocarlo simplemente usando el método doCommand del comando o de un elemento vinculado a él. Para otros comandos, necesitaremos usar un par de líneas de código. Necesitamos usar estos pasos adicionales cuando invocamos comandos implementados por un controlador. Además, tendremos que hacerlo cuando creemos nuestros comandos de menú, por ejemplo para implementar los comandos del menú editar en nuestra aplicación.

+

Afortunadamente, el código extra es bastante simple. Todo lo que necesitamos hacer es obtener el controlador y llamar al comando. Un forma sencilla de hacerlo es la siguiente:

+
var controlador = document.commandDispatcher.getControllerForCommand("cmd_paste");
+if (controlador && controlador.isCommandEnabled("cmd_paste"))
+  controlador.doCommand(command);
+}
+
+

El código mostrado arriba primero obtiene el controlador para comando ‘cmd_paste’ del despachador de comandos. Entonces comprueba que el comando esta habilitado y lo ejecuta usando el método doCommand. Hay que fijarse en que no hace falta adivinar que elemento o controlador usar, el despachador de comandos hace esa faena por nosotros. Tambíen podríamos ejecutar el método doCommand sin comprobar si el comando está habilitado o no, aunque mejor no hacerlo.

+

El código de arriba es lo suficientemente genérico como para crear una función que tome un parametro, comando, y lo ejecute. Esta función podría entonces ser reusada para todos los comandos. De hecho, esto es tan común que Mozilla incluye una librería que hace justo esto. Sí incluyes el guión ‘chrome://global/content/globalOverlay.js’ en un archivo XUL, puede llamar el método goDoCommand que ejecutará el comando que se le pase como parametro. El código para esa función son simplemente unas pocas líneas, así que podemos incluirla directamente en nuestro código si por alguna razón no queremos incluir la librería.

+
<script src="chrome://global/content/globalOverlay.js"/>
+
+<command id="cmd_paste" oncommand="goDoCommand('cmd_paste');/>
+<button label="Pegar" command="cmd_paste"/>
+
+

Este ejemplo implementa un botón Pegar. Está vinculado con un comando que a su vez invoca ese mismo comando para que lo gestione el controlador por defecto. Este código es todo lo que se necesita para implementar la funcionalidad del comando pegar en nuestra aplicación. La única cosa que nos falta es asegurarnos de que el comando pegar, y por ende el botón, este habilitado y se actualize en el momento oportuno, lo que se describe a continuación.

+

Actualizadores de comandos

+

Un actualizador de comandos es una característica extra del elemento commandset, que nos permite actualizar el estado de uno o más comandos cuando ciertos eventos ocurren. Necesitamos pensar cuando un comando es válido y cuando no lo es. Además debemos considerar cuando debe cambiar el estado y cuando debén los comandos ser actualizados.

+

Por ejemplo, el comando pegar es válido cuando una caja de texto tiene el foco y hay algo en el portapapeles que pegar. El comando se habilitará cuando la caja de texto obtenga el foco o el contenido del portapales cambie. Un actualizador de comandos escuchará a estas situaciones y podrá ejecutar código que habilite o deshabilite comandos como sea necesario.

+

Un simple actualizador de comandos puede ser como el siguiente:

+
<commandset id="actualizaPegarElemento"
+            commandupdater="true"
+            events="focus"
+            oncommandupdate="goUpdateCommand('cmd_paste');"/>
+
+

Un actualizador de comandos es indicado cuando se usa el atributo commandupdater, el cual debe ser true. El atributo event se usa para definir los eventos a los cuales debe escuchar el actualizador. Podemos especificar varios eventos si los separamos con comas. En este ejemplo el actualizador de comandos escucha al evento ‘focus’. Esto hará que los comandos se actualizen con un elemento reciba el foco.

+

Cuando ocurre un evento de foco, el código en el atributo oncommandupdate es ejecutado. En el ejemplo, la función goupdateCommand es llamada, que es la función implementada en globalOverlay.js descrita anteriormente. Esto actualizara el comando y habilitará o deshabilitará los botones y menús necesarios. El código detrás de todo esto es bastante sencillo. Simplement coge el controlador adecuado, llama su método isCommandEnabled y el comando queda habilitado o deshabilitado. Si hay varios comandos a actualizar, llamaremos la función goUpdateCommand una vez para cada comando.

+

Cabe mencionar que el actualizador de comandos recibirá avisos sobre todos los eventos de foco en todos los elementos, incluso si otros gestores de eventos responden al evento. Esencialmente, un actualizador de comandos es como un gestor de eventos global.

+

Los actualizadores de comandos puede escuchar a los siguientes eventos, aunque es posible crear nuestros propios eventos.

+
   * focus: ocurre cuando un elemento obtiene el foco
+   * select: ocurre cuando el texto seleccionado cambia
+   * undo: ocurre cuando el buffer de deshacer cambia
+   * clipboard: ocurre cuando los contenidos del portapapeles cambian
+
+

Los siguientes ejemplos demuestran como se usan los actualizadores de comandos en el navegador Mozilla para actualizar los comandos del menú editar. Las funciones usadas pueden ser encontradas en el fichero ‘chrome://communicator/content/utilityOverlay.js’.

+
<commandset id="globalEditMenuItems"
+            commandupdater="true"
+            events="focus"
+            oncommandupdate="goUpdateGlobalEditMenuItems()"/>
+<commandset id="selectEditMenuItems"
+            commandupdater="true"
+            events="select"
+            oncommandupdate="goUpdateSelectEditMenuItems()"/>
+<commandset id="undoEditMenuItems"
+            commandupdater="true"
+            events="undo"
+            oncommandupdate="goUpdateUndoEditMenuItems()"/>
+<commandset id="clipboardEditMenuItems"
+            commandupdater="true"
+            events="clipboard"
+            oncommandupdate="goUpdatePasteMenuItems()"/>
+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html new file mode 100644 index 0000000000..e95455ea20 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/archivos_manifest/index.html @@ -0,0 +1,155 @@ +--- +title: Archivos Manifest +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Archivos_Manifest +tags: + - Todas_las_Categorías + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Manifest_Files +--- +
+

« AnteriorSiguiente »

+
+ +


+ En esta sección veremos como incluir ficheros XUL y chrome en un un paquete y crear un archivo Manifest para ellos.

+ +

Paquetes

+ +

Un paquete es un conjunto de ficheros XUL y scripts que definen la funcionalidad de una interfaz de usuario. Los paquetes se pueden instalar dentro de Mozilla y referenciar con una URL del chrome. Un paquete puede contener cualquier tipo de ficheros que pueden estar separados en distintos subdirectorios dentro del paquete. Un paquete puede estar contenido como un directorio o como un fichero JAR.

+ +

Archivos Manifest

+ +

Un archivo manifest describe un paquete y mapea su localización en disco a una URL. El archivo manifest en el directorio chrome se examinará al iniciarse la aplicación Mozilla para comprobar los paquetes instalados. Esto significa que todo lo que necesitamos hacer para instalar un nuevo paquete es añadir un nuevo archivo manifest en el directorio chrome de la aplicación o en el directorio chrome específico del usuario. Este último es el utilizado preferentemente, dado que es posible que no tengamos suficientes permisos para escribir en el directorio de la aplicación.

+ +

Si únicamente intenta probar código XUL con privilegios en el navegador Firefox, puede hacerlo fácilmente utilizando un archivo manifest con sólo una linea:

+ +
    +
  1. Cree un nuevo directorio en algún lugar. Por ejemplo, en una maquina Windows, puede usar C:\testfiles
    2. +
  2. Cree un nuevo fichero ASCII1 llamado test.manifest en el directorio chrome. Realmente no importa cómo se llame el fichero, tan solo que tenga la extensión .manifest. (1. No funciona con UTF-8 com BOM.)
    3. +
  3. Añada la linea siguiente en él:
    4. +
+ +
 content tests file:///C:/testfiles/
+
+ +

La ruta al fichero deberá apuntar al directorio creado anteriormente. Si no está seguro de cual es la ruta, abra el directorio en el navegador y copie la URL de la barra de dirección.

+ +

¡Ya está! Ahora, todo lo que necesita hacer es añadir algunos ficheros XUL dentro del nuevo directorio y será capaz de cargarlos escribiéndolos en una URL chrome de la forma chrome://tests/content/<filename>. Por supuesto, necesitará reiniciar el navegador para que los cambios tengan efecto. Si el fichero no carga, asegúrese de que la ruta del fichero es correcta.

+ +

La sintaxis básica de las lineas en un archivo manifest para contener paquetes es:

+ +

'content <nombrepaquete> <rutaarchivo>'

+ +

El primer campo 'content' indica un paquete contenido. Para los temas utilizamos 'skin', mientras que para la configuración regional utilizamos 'locale'. El <nombrepaquete> es en nuestro ejemplo de arriba 'tests', lo cual significa que el primer campo en la URL chrome es 'tests' como en chrome://tests/content/sample.xul. Si el nombre del paquete fuera 'browser', la URL chrome sería chrome://browser/content/. El campo final es la ruta donde se localiza el archivo. Esta puede ser una ruta de archivo local utilizando una URL de archivo, o un archivo JAR utilizando una URL jar, la cual describiremos a continuación. Puede especificar múltiples paquetes incluyendo otras lineas en el fichero manifest.

+ +

El fichero browser.manifest usado por Firefox es algo parecido a esto:

+ +
content branding jar:browser.jar!/content/branding/ xpcnativewrappers=yes
+content browser jar:browser.jar!/content/browser/ xpcnativewrappers=yes
+overlay chrome://global/content/viewSource.xul chrome://browser/content/viewSourceOverlay.xul
+overlay chrome://global/content/viewPartialSource.xul chrome://browser/content/viewSourceOverlay.xul
+overlay chrome://browser/content/pageInfo.xul chrome://pippki/content/PageInfoOverlay.xul
+
+ +

Aqui se estan listando dos paquetes, 'branding' y 'browser'. Además se están especificando tres recubrimeintos (overlays ), lo cual permite combinar contenidos de distintos paquetes. Las extensiones harán mayor uso de los recubrimientos (overlays), dado que ellas fusionan su UI con la del navegador.

+ +

Las rutas de fichero para los paquetes branding y browser utilizan URLs jar dado que el contenido está empaquetado en un archivo. Un archivo JAR puede crearse con una utilidad ZIP. Para un archivo JAR localizado en el directorio chrome, la sintaxis es muy simple:

+ +

jar:<filename.jar>!/<ruta_en_el_archivo>

+ +

Para el paquete browser, el archivo es browser.jar, situado junto al fichero manifest en el directorio chrome. La ruta 'content/browser' especifica la ruta donde se localizan los ficheros XUL dentro del archivo. No necesita especificar la ruta si no tiene directorio en el archivo. En este caso la hay, dado que los ficheros para el paquete branding se almacenan en diferentes rutas del mismo archivo.

+ +

Para el paquete 'tests' creado, los archivos no se encuentran empaquetados por lo que utilizaremos una ruta directa. Ello facilita la labor del desarrollador puesto que no se precisa empaquetar todos los archivos cada vez que se realiza un cambio. Sin embargo, en el momento de la distribución del paquete o la extensión, es preferible hacerlo empaquetado para evitar la instalación de varios pequeños archivos.

+ +

La parte xpcnativewrappers=yes del final del manifiesto es un señalador que puede usarse opcionalmente. En javascript es posible sobreescribir las funciones preconstruidas en el código. Si se especifica el señalador xpcnativewrappers, indicará que el script que se ejecuta en un contexto con privilegios no utiliza las versiones sobrecargadas sino las versiones originales. De otro modo, si la extensión intentara llamadas a las versiones modificadas pudiera no funcionar correctamente, o peor aún, crear problemas en la seguridad. Este señalador fue añadido para prevenir estos problemas y debería utlizarse siempre en nuevas extensiones, pero se ha respetado por compatibilidad de antiguas extensiones.

+ +

Temas y configuración regional

+ +

La estructura para los temas y la configuración regional es similar a la del paquete de contenido, excepto que es necesario especificar el paquete de contenido para el cual se está proporcionando dicho tema o configuración regional. Por ejemplo:

+ +
skin browser classic/1.0 jar:classic.jar!/skin/classic/browser/
+locale browser en-US jar:en-US.jar!/locale/browser/
+
+ +

A las líneas anteriores se les ha añadido un campo extra para indicar que tanto el tema y la configuración regional se aplican al navegador. El nombre del tema es 'classic/1.0'. Es este caso se usa un número de versión como parte del nombre del tema pero es opcional si vas a crear tu propio tema. Mozilla no utiliza el número de versión de manera especial ya que dicho número simplemente forma parte del nombre del tema. La configuración regional es 'en-US'. Sus URL chrome son mapeadas a chrome://browser/skin y chrome://browser/locale. Si estás creando tu propio tema o configuración regional para el navegador, todo lo que necesitas hacer es crear un fichero manifest con una de estas dos líneas en él, modificándolas para que se adapten al tema o a la configuración regional.

+ +

Nuestro dialogo de ejemplo para buscar archivos

+ +

Vamos a crear un fichero manifest para el cuadro de diálogo para buscar archivos que desarrollaremos. Puedes combinar los tres tipos anteriores en un único fichero si lo deseas. Esto se puede hacer cuando se crea una extensión con todas sus partes incluidas en un solo fichero. Lo haremos así para el cuadro de diálogo. Crea un fichero llamado findfile.manifest en el directorio chrome y añade lo siguiente a dicho fichero:

+ +
content findfile file:///findfile/content/
+skin findfile classic/1.0 file:///findfile/skin/
+locale findfile en-US file:///findfile/locale/
+
+ +

Crea los nuevos directorios listados anteriormente. No importa dónde, pero asegúrate de que la rutas de los ficheros en el fichero manifest apuntan a dichos directorios. Naturalmente, lo lógico sería usar los directorios apropiados para tu sistema. Si se va a distribuir el paquete, se necesitaría empaquetarlo en un fichero JAR y modificar estas rutas. En este caso, sólo vamos a crearlo para demostrar el uso del fichero manifest y para preparar los directorios para los ejemplo que veremos en las siguiente secciones.

+ +

Nótese que el segundo campo de las líneas del tema y de la configuración regional especifica 'findfile'. Esto significa que el tema y la configuración regional modifican el paquete findfile especificado en la primera línea. Las tres rutas anteriores especifican subdirectorios para cada parte. Seguramente querrás crear estos subdirectorios para mantener los ficheros de cada parte separados.

+ +

Instalación de un paquete

+ +

Para instalar una aplicación, necesitarás crear un instalador para ella o incluirlo como parte de otra aplicación. El método usado depende de qué clase de aplicación estés creando. Para las extensiones, necesitarás crear un fichero de instalación llamado install.rdf, el cual describe lo que será instalado, el autor de la extensión y con qué versiones del navegador u otras aplicaciones es compatible. También se necesita una estructura de directorios específica ya que las extensiones están limitadas a donde los ficheros deben de ser instalados. Una extensión es empaquetada en un fichero XPI. XPI es la abreviatura de XPInstall y es usada por Mozilla para instalar componentes. Al igual que los ficheros JAR, un fichero XPI sólo es un fichero ZIP al que se le ha cambiado la extensión por lo que puedes crear y ver los ficheros XPI con cualquier herramienta ZIP.

+ +

El administrador de extensiones de Firefox maneja automáticamente las extensiones instaladas empaquetadas en ficheros XPI. Se recomienda subir las extensiones al sitio Add-ons de Mozilla, donde los usuarios pueden localizarlas para instalarlas. Aunque pueden ser instaladas desde cualquier lugar, de modo predeterminado no se permiten instalaciones desde otros sitios.

+ +

También es posible utilizar un script de instalación escrito en JavaScript para instalar ficheros. Esto permite copiar los ficheros a cualquier ubicación y realizar otras tareas de administración de ficheros. Sin embargo, las aplicaciones instaladas a través de script no serán listadas por el administrador de extensiones ni existe ningún método automatizado para desinstalarlas. Por esta razón, los scripts de instalación no se usan tan asiduamente.

+ +

Las aplicaciones independientes pueden ser empaquetadas utilizando XULRunner. Esto crea un fichero ejecutable por separado para que la aplicación pueda ser distribuida independientemente del navegador.

+ +

Para más información sobre la creación de extensiones, véase Extensiones. Para más información sobre XULRunner, véase XULRunner.

+ +

Aplicaciones antiguas

+ +

Si estás creando aplicaciones para las versiones antiguas de Mozilla, es decir, anteriores a Firefox 1.5 o a Mozilla 1.8, el proceso se vuelve un poco más complicado. A continuación se explica cómo configurar un paquete para las primeras versiones. Se puede obviar esta sección si lo que se van a crear son nuevas extensiones o aplicaciones XUL.

+ +
Nota: Este antiguo proceso también se aplica al nuevo SeaMonkey 1.0. El código base aún no ha adoptado el formao "Manifest".
+ +
<?xml version="1.0"?>
+
+<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
+
+  <RDF:Seq about="urn:mozilla:package:root">
+    <RDF:li resource="urn:mozilla:package:mi_aplicacion"/>
+  </RDF:Seq>
+
+  <RDF:Description about="urn:mozilla:package:mi_aplicacion"
+          chrome:displayName="titulo"
+          chrome:author="autor"
+          chrome:name="mi_aplicacion"
+          chrome:extension="true"/>
+
+</RDF:RDF>
+
+ +
content,install,url,file:///main/app/
+
+ +
    +
  1. Crea un directorio cualquiera. La mayoría de la gente lo crearía como subdirectorio del directorio chrome de Mozilla aunque no es imprescindible. El directorio puede estar en cualquier lugar en disco. Pon los ficheros XUL en este directorio.
    2. +
  2. Crea un fichero llamado contents.rdf y ponlo en dicho directorio. Copia el texto mostrado a continuación en este fichero. Este fichero será usado para conocer el identificador de la aplicación, su nombre, autor, versión, etc...
    3. +
  3. Cambia las partes resaltadas del fichero anterior por tus datos. El texto en rojo 'mi_aplicacion' debería corresponder al ID de la aplicación. Te lo puedes inventar pero usualmente el ID corresponde al nombre de la aplicación. Reemplaza el texto resaltado en azul con el título de la aplicación y el autor.
    4. +
  4. Si el campo 'chrome:extension' es true, la aplicación es una extensión de Mozilla Firefox Extension y será mostrada en la ventana de extensiones del navegador. Si es false, no aparecerá.
    5. +
  5. Guarda el fichero contents.rdf y asegúrate de que está en el directorio creado en el paso 1.
    6. +
  6. Abre el fichero <directorio_mozilla>/chrome/installed-chrome.txt, donde <directorio_mozilla> es el directorio deon está instalado Mozilla. Sal de Mozilla antes de hacer esto.
    7. +
  7. A continuación vas a registrar la nueva aplicación con Mozilla para que ésta sepa dónde encontrarla. Añade una línea al final de installed-chrome.txt apuntando al nuevo directorio creado en el paso 1. Cambia el texto resaltado a continuación por la ruta del directorio. Asegúrate de que la URL acaba con una barra (/) y que dejas una nueva línea al final de la línea. Si no estás seguro de qué URL es, abre el directorio creado en el paso 1 en Mozilla y copia la URL desde el campo de localización. Date cuenta de que la referencia debe ser siempre un directorio, no un fichero.
    8. +
  8. Borra el fichero <directorio_mozilla>/chrome/chrome.rdf.
    9. +
  9. Ejecuta Mozilla. Deberías ver cualquier fichero XUL ubicado en el directorio utilizando una URL de la forma chrome://id_aplicacion/content/fichero.xul donde fichero.xul es el nombre del fichero. El fichero XUL principal debería ser id_aplicacion.xul, el cual puede ser cargado usando la URL abreviada chrome://id_aplicacion/content/.
    10. +
+ +

Si estás creando temas y/o configuraciones regionales, repite los pasos anteriores, exceptuando que el formato del fichero contents.rdf es ligeramente diferente. Mira el contenido de los ficheros contents.rdf en otras aplicaciones para más detalles.

+ +

Localización de fallos

+ +

Crear un paquete chrome puede resultar con frecuencia un arte y es difícil detectar errores. A continuación se muestran unos cuantos trucos en caso de que te atasques.

+ + + +

En la siguiente sección empezaremos a mirar el lenguaje XUL.

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html new file mode 100644 index 0000000000..39ab142d19 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/atajos_de_teclado/index.html @@ -0,0 +1,376 @@ +--- +title: Atajos de teclado +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Atajos_de_teclado +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Keyboard_Shortcuts +--- +

Puedes usar manejadores de evento de teclado para responder al teclado. Sin embargo, sería tedioso hacer eso para cada botón y elemento de menú.

+ +

Creación de un atajo de teclado

+ +

XUL provee métodos en los cuales puede definir atajos de teclado. Ya vimos en la sección de menús que podemos definir un atributo llamado accesskey que específica la tecla que un usuario debe presionar para activar el menú o un elemento del mismo. En el ejemplo que está debajo, el menú Archivo puede ser seleccionado presionando 'Alt' y 'F' (o cualquier otra combinación de teclas para una plataforma específica). Una vez que el menú Archivo está abierto, el menú Cerrar puede ser seleccionado presionando la tecla C.

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<menubar id="sample-menubar">
+  <menu id="file-menu" label="Archivo" accesskey="f">
+    <menupopup id="file-popup">
+      <menuitem id="close-command" label="Cerrar" accesskey="c"/>
+    </menupopup>
+  </menu>
+</menubar>
+
+ +

Tambié puede usar el atributo accesskey en botones. Cuando la tecla es presionada en este caso, el botón es seleccionado.

+ +

Quizás quiera configurar atajos de teclado más generales. Por ejemplo, presionar Control+C para copiar texto al porta papeles. Aunque a veces atajos como estos no siempre son válidos, usualmente funcionarán cada vez que la ventana esté abierta. Usualmente, un atajo del teclado estará permitido en cualquier momento y puede ver ver si deberí estar haciendo algo con algún programa. Por ejemplo, copiar texto al portapapeles sólo debería funcionar cuando hay algún texto seleccionado.

+ +

El elemento 'key'

+ +

XUL provee de un elemento, key, que permite definir atajos de teclado para una ventana. Tiene atributos para especificar la tecla que debería ser presionada y qué teclas modificadoras (tales como Shift o Control) necesitan ser presionadas simultáneamente. A continuación se muestra un ejemplo:

+ +
<keyset>
+  <key id="sample-key" modifiers="shift" key="R"/>
+</keyset>
+
+ +

En este ejemplo se define un atajo de teclado que es activado cuando el usuario presiona las teclas 'Shift' y 'R' simultáneamente. El atributo key (tiene el mismo nombre que el elemento) se emplea para indicar qué tecla debe apretarse, en este caso la 'R'. Se puede asignar cualquier caracter (de teclado) a este atributo para requerir que se apriete una tecla en particular. Los modificadores que deben apretarse se indican con el atributo modifiers. Se pueden establecer varios, (ej: modifiers="control alt") asignando como valor una lista separada con espacios de teclas de modificadoras; se listan a continuación:

+ +
+
alt 
+
El usuario debe pulsar la tecla Alt. En Macintosh, es la tecla Option.
+
control 
+
El usuario debe pulsar la tecla Control.
+
meta 
+
El usuario debe pulsar la tecla Meta. En Macintosh, es la tecla Command.
+
shift 
+
El usuario debe pulsar la tecla Mayúsculas.
+
accel 
+
El usuario debe pulsar la tecla especial acelerador. La tecla usada por los atajos de teclado en la plataforma del usuario. Habitualmente, éste debería ser el valor que utilizases.
+
+ +

Tu teclado no tendrá necesariamente todas las teclas, en cuyo caso serán mapeadas a las teclas modificadoras que tengas.

+ +

El elemento key debe colocarse dentro de un elemento keyset; en caso contrario no funcionará. Este elemento esta diseñado para contener un conjunto de elementos key, lo cual sirve para agrupar todas las definiciones de teclas en un solo sitio en cada archivo. Cualquier elemento key fuera de un keyset no funcionará.
+  

+ +

Cada plataforma generalmente utiliza una tecla diferente para los atajos de teclado. Por ejemplo, Windows usa la tecla Control y Macintosh usa la tecla Command. Sería conveniente definir elementos key por separado para cada plataforma. Afortunadamente, hay una solución. El modificador accel hace referencia a la tecla usada para atajos de teclado específica de cada plataforma. Funciona igual que otros modificadores, pero no será la misma en todas las plataformas.

+ +

Algunos ejemplos adicionales:

+ +
<keyset>
+  <key id="copy-key" modifiers="control" key="C"/>
+  <key id="explore-key" modifiers="control alt" key="E"/>
+  <key id="paste-key" modifiers="accel" key="V"/>
+</keyset>
+
+ +

El atributo código de tecla (keycode)

+ +

El atributo key se utiliza para especificar la tecla que debe ser pulsada. Sin embargo, habrá casos en los que quieras referirte a teclas que no pueden ser especificadas con un caracter (como la tecla Enter o las teclas de función F1..F12). El atributo key sólo puede ser utilizado para caracteres imprimibles. Otro atributo, keycode puede ser utilizado para caracteres no imprimibles.

+ +

El atributo keycode debería ser establecido a un código especial que represente la tecla que quieres. A continuación hay una lista de teclas. No todas las teclas están disponibles en todos los teclados.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VK_CANCELVK_BACKVK_TABVK_CLEAR
VK_RETURNVK_ENTERVK_SHIFTVK_CONTROL
VK_ALTVK_PAUSEVK_CAPS_LOCKVK_ESCAPE
VK_SPACEVK_PAGE_UPVK_PAGE_DOWNVK_END
VK_HOMEVK_LEFTVK_UPVK_RIGHT
VK_DOWNVK_PRINTSCREENVK_INSERTVK_DELETE
VK_0VK_1VK_2VK_3
VK_4VK_5VK_6VK_7
VK_8VK_9VK_SEMICOLONVK_EQUALS
VK_AVK_BVK_CVK_D
VK_EVK_FVK_GVK_H
VK_IVK_JVK_KVK_L
VK_MVK_NVK_OVK_P
VK_QVK_RVK_SVK_T
VK_UVK_VVK_WVK_X
VK_YVK_ZVK_NUMPAD0VK_NUMPAD1
VK_NUMPAD2VK_NUMPAD3VK_NUMPAD4VK_NUMPAD5
VK_NUMPAD6VK_NUMPAD7VK_NUMPAD8VK_NUMPAD9
VK_MULTIPLYVK_ADDVK_SEPARATORVK_SUBTRACT
VK_DECIMALVK_DIVIDEVK_F1VK_F2
VK_F3VK_F4VK_F5VK_F6
VK_F7VK_F8VK_F9VK_F10
VK_F11VK_F12VK_F13VK_F14
VK_F15VK_F16VK_F17VK_F18
VK_F19VK_F20VK_F21VK_F22
VK_F23VK_F24VK_NUM_LOCKVK_SCROLL_LOCK
VK_COMMAVK_PERIODVK_SLASHVK_BACK_QUOTE
VK_OPEN_BRACKETVK_BACK_SLASHVK_CLOSE_BRACKETVK_QUOTE
VK_HELP   
+ +

Por ejemplo, para crear un atajo con las teclas 'Alt y F5':

+ +
<keyset>
+  <key id="test-key" modifiers="alt" keycode="VK_F5"/>
+</keyset>
+
+ +

El siguiente ejemplo muestra algunos atajos de teclado más:

+ +
<keyset>
+  <key id="copy-key" modifiers="accel" key="C"/>
+  <key id="find-key" keycode="VK_F3"/>
+  <key id="switch-key" modifiers="control alt" key="1"/>
+</keyset>
+
+ +

La primera tecla es invocada cuando el usuario pulsa su atajo específico de la plataforma y C. El segundo es invocado cuando el usuario pulsa F3. El tercero es invocado al pulsar las teclas Control, Alt y 1 a la vez. Si quieres distinguir entre teclas de la parte principal del teclado y el teclado numérico, utiliza las teclas VK_NUMPAD (como VK_NUMPAD1).

+ +
+

Consulta la Mozilla Keyboard Planning FAQ and Cross Reference para más información sobre selección atajos de teclado para usar en aplicaciones.

+
+ +

Usando los atajos de teclado

+ +

Ahora que sabemos cómo definir atajos de teclado, veremos cómo podemos usarlos. Hay dos formas. La primera es la más simple y sólo requiere que utilices el manejador de evento keypress en el elemento key. Cuando el usuario pulsa la tecla, el script será invocado. A continuación se muestra un ejemplo:

+ +
<keyset>
+  <key id="copy-key" modifiers="accel" key="C" oncommand="DoCopy();"/>
+</keyset>
+
+ +

La función DoCopy será llamada cuando el usuario presione las teclas especificadas en el elemento key, que en este ejemplo, son las teclas para copiar al portapapeles (como Control+C). Esto funcionará mientras la ventana esté abierta. La función DoCopy debería comprobar si hay texto seleccionado y en ese caso copiarlo al portapapeles. Nota que las cajas de texto tienen los atajos del portapapeles ya incluidos, por lo que no tienes que implementarlos por ti mismo.

+ +

Asignación de un atajo de teclado a un menú

+ +

Si estás asignando un atajo de teclado que ejecuta a un comando que ya existe en un menú, puedes asociar el elemento key directamente con el comando del menú. Para hacer esto, añade un atributo key al menuitem. Establece su valor al id de la tecla que quieras usar. El siguiente ejemplo muestra esto.

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
Image:keyshort1.jpg
+ +
<keyset>
+  <key id="paste-key" modifiers="accel" key="V"
+          oncommand="alert('Paste invoked')"/>
+</keyset>
+
+<menubar id="sample-menubar">
+  <menu id="edit-menu" label="Edit" accesskey="e">
+    <menupopup id="edit-popup">
+      <menuitem id="paste-command"
+         accesskey="p" key="paste-key"
+         label="Paste" oncommand="alert('Paste invoked')"/>
+    </menupopup>
+  </menu>
+</menubar>
+
+ +

El atributo key del elemento menuitem, cuyo valor aquí es paste-key es igual al valor del atributo id de la tecla definida. Puedes usar esto para teclas adicionales así como para definir atajos de teclado para cualquier número de elementos.

+ +

También verás que se ha añadido un texto junto a la opción "Paste" para indicar que el comando de menú puede ser invocado mediante Control + V. Esto se realiza automáticamente basándose en los modificadores del elemento key. Los atajos de teclado asociados a los menús funcionarán aunque el menú no esté abierto.

+ +

Una característica adicional de las definiciones de teclas es que las puedes desactivar fácilmente. Par hacer esto, añade un atributo disabled al elemento <code>key y establece su valor a true. Esto desactiva el atajo de teclado para que no pueda ser invocado. Es útil cambiar el atributo disabled utilizando un script.

+ +
+

Nuestro ejemplo

+ +

Vamos a añadir atajos de teclado al diálogo encontrar archivos. Añadiremos cuatro, para los comandos Cortar (Cut), Copiar (Copy) y Pegar (Paste) y otro para el comando Cerrar (Close) cuando el usuario pulse Escape.

+ +
  <keyset>   <key id="cut_cmd" modifiers="accel" key="X"/>   <key id="copy_cmd" modifiers="accel" key="C"/>   <key id="paste_cmd" modifiers="accel" key="V"/>   <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/>  </keyset> 
+
+<vbox flex="1">
+ <toolbox>
+  <menubar id="findfiles-menubar">
+   <menu id="file-menu" label="File" accesskey="f">
+     <menupopup id="file-popup">
+       <menuitem label="Open Search..." accesskey="o"/>
+       <menuitem label="Save Search..." accesskey="s"/>
+       <menuseparator/>
+       <menuitem label="Close" accesskey="c" key="close_cmd"
+         oncommand="window.close();"/>
+     </menupopup>
+   </menu>
+   <menu id="edit-menu" label="Edit" accesskey="e">
+     <menupopup id="edit-popup">
+       <menuitem label="Cut" accesskey="t" key="cut_cmd"/>
+       <menuitem label="Copy" accesskey="c" key="copy_cmd"/>
+       <menuitem label="Paste" accesskey="p" key="paste_cmd" disabled="true"/>
+     </menupopup>
+   </menu>
+  </menubar>
+ </toolbox>
+</vbox>
+
+ +

Ahora podemos usar esos atajos para activar los comandos. Por supuesto, los comandos del portapapeles no harán nada porque no hemos escrito esos scripts.

+
+ +

Los eventos de tecla

+ +

Hay tres eventos de teclado que pueden ser utilizados si las funcionalidades descritas antes no estuvieran disponibles. Estos eventos son:

+ +
+
keypress 
+
Llamado cuando una tecla es pulsada y despulsada mientras un elemento tiene el foco. Puedes usar esta tecla para comprobar los caracteres permitidos en un campo.
+
keydown 
+
Llamado cuando una tecla es pulsada (aunque todavía no se haya despulsado) mientras un elemento tiene el foco.
+
keyup 
+
Llamado cuando una tecla es despulsada mientras un elemento tiene el foco.
+
+ +

Los eventos de tecla son sólo enviados al elemento que tiene el foco. Típicamente, esto incluye cajas de texto, botones, checkboxes y elementos así. Si no hay ningún elemento focalizado, el evento de la tecla será dirigido al propio documento XUL. En este caso, puedes añadir un escuchador de eventos (event listener) a la etiqueta window. Aunque normalmente, si quieres responder a teclas globalmente, utilizarás un atajo de teclado como se ha descrito antes.

+ +

El objeto evento de tecla tiene dos propiedades que registran la tecla que ha sido pulsada. La propiedad keyCode registra el código de la tecla y puede ser comparada con una de las constantes de la anterior tabla de esta sección. La propiedad charCode es utilizada para caracteres imprimibles y registrará el código de caracter de la tecla que fue pulsada.

+ +
Nuestro ejemplo: Código Ver en funcionamiento
+ +

Seguimos con poner un gestor de foco y selección.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_botones/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_botones/index.html" new file mode 100644 index 0000000000..4181b632c6 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_botones/index.html" @@ -0,0 +1,111 @@ +--- +title: Añadiendo botones +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_botones +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Buttons +--- +
+

« AnteriorSiguiente »

+
+ +

En esta sección veremos cómo añadir botones sencillos a una ventana.

+ +

Añadir botones a una ventana

+ +

La ventana que hemos creado no contiene nada hasta ahora, así es que carece de interés. En esta sección vamos a añadir dos botones: Uno para buscar y otro para cancelar. También aprenderemos una forma fácil de ubicarlos dentro de la ventana.

+ +

Al igual que HTML, XUL tiene una serie de etiquetas para crear elementos de interfaz de usuario. La más básica de todas es la etiqueta button, que sirve para crear un botón simple.

+ +

Cada elementobotón tiene dos propiedades asociadas: label e image, mútuamente compatibles: Se puede tener un botón con imagen y/o con etiqueta. Los botones se usan generalmente para las opciones deAceptar oCancelar en los cuadros de diálogo, por ejemplo.

+ +

Sintaxis de los botones

+ +

La etiqueta button tiene la siguiente sintaxis:

+ +
<button
+    id="identificador"
+    class="dialogo"
+    label="Aceptar"
+    image="imagenes/imagen.jpg"
+    disabled="true"
+    accesskey="t"/>
+
+ +

Los atributos son todos opcionales, y se interpretan así:

+ +
+
id 
+
Un identificadorúnico (dentro de la página actual) que represente de forma inequívoca al botón. Es muy útil para referirse al botón desde una hoja de estilos CSS o desde un script de código, por ejemplo. Es recomendable rellenar este atributo entodas las etiquetas que uno declare (si no figura explícitamente en cada etiqueta de esta guía es porque se da por sobreentendido).
+
class 
+
La clase-estilo del botón. Se usa de la misma manera que en HTML: Sirve para indicar el estilo que el navegador deberá aplicar al botón creado. En el ejemplo precedente se usa la clase dialogo, aunque por lo general uno no suele establecer una clase específica para un botón.
+
label 
+
El texto que aparecerá dentro del botón. Por ejemplo:Aceptar orCancelar. Si no se rellena, el botón aparece sin texto.
+
image 
+
La URL de la imagen que aparecerá dentro del botón. Si no se rellena, el botón aparecerá sin imagen. Una forma alternativa de especificar esta imagen es desde una hoja de estilo CSS, mediante una propiedad list-style-image.
+
disabled 
+
Indicador de deshabilitado: Si se rellena con valor true, el botón aparecera deshabilitado, lo que quiere decir que no responderá a la acción de pulsar sobre él (y el aspecto, usualmente, será con el texto en gris pálido). Si no se especifica este atributo, el botón está habilitado. También se puede cambiar el estado habilitado/deshabilitado mediante JavaScript.
+
accesskey 
+
En este atributo debe ir una sóla letra que se usará como tecla de acceso directo para pulsar el botón. Esta letra debería pertenecer al valor del atributo label. El aspecto, usualmente, será un subrayado bajo la letra escogida en el botón. Su funcionamiento consiste en que cada vez que el usuario pulse la letra escogida (más un pulsador que pude variar en función de la plataforma; usualmente ALT), desde cualquier lugar de la ventana, el botón recibirá el foco.
+
+ +

Atención: La etiqueta button en realidad soportamás atributos de los listados aquí, pero el resto se verán más adelante.

+ +

Algunos ejemplos de botones

+ +

Example 1 : Código Ver en funcionamiento

+ +
Image:buttons1.png
+ +
<button label="Normal"/>
+<button label="Disabled" disabled="true"/>
+
+ +


+ El ejemplo de arriba genera los botones mostrados en la imagen. El primer botón es un botón normal, el segundo está desabilitado.

+ +

Empezaremos creando un simple botón "Buscar" para la función buscar fichero. El ejemplo siguiente nos muestra cómo hacer esto.

+ +

 

+ +
<button id="find-button" label="Buscar"/>
+
+ +
FireFox no permite abrir ventanas "chrome" desde páginas web, asi que el links "Ver" en el tutorial abriran una ventana de normal de browser.debido a esto, los botones aparecerán ocupando todo el ancho de la ventana. Puedes colocar align="start" a la etiqueta window para que esto no ocurra.
+ +
+
El ejemplo findfile.xul
+ +

Coloquemos este código al archivo que habiamos creado en la sección anterior. El código debe ser colocado entre las etiquetas de window. El código que debemos agregar esta aquí abajo en rojo.

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <button id="find-button" label="Find"/>
+  <button id="cancel-button" label="Cancel"/>
+
+</window>
+
+ +
Image:buttons2.png
+ +

Verás que tambien se agrego el botón Cancel. Le dimos a la ventana una orientación horizontal, de este modo, los botones se muestran uno al lado del otro. Si abres el fichero en Mozilla, obtendras algo como la imagen mostrada aquí.

+
+ +

 

+ +
Nota: No deberíamos poner el texto de label directamente en el fichero XUL. En lugar de eso, deberíamos usar entes así, el texto puede ser traducido facilmente..
+ +

En la próxima sección descubriremos cómo agregar etiquetas e imágenes a una ventana XUL.

+ +

Ver también more button fetaures

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_elementos_html/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_elementos_html/index.html" new file mode 100644 index 0000000000..c0330768d6 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_elementos_html/index.html" @@ -0,0 +1,106 @@ +--- +title: Añadiendo elementos HTML +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_elementos_HTML +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_HTML_Elements +--- +

 

+

Ahora que hemos añadido algunos botones, vamos a añadir algunos otros elementos.

+

Adición de Elementos de HTML a una Ventana

+

Además de todos los elementos XUL que están disponibles, usted también puede añadir elementos de HTML directamente dentro de un archivo XUL. Usted en realidad puede usar cualquier elemento de HTML en un archivo XUL, queriendo decir que programillas Javaneses y mesas pueden ser colocados en una ventana. Usted debería evitar usar elementos de HTML en archivos XUL si usted puede. Sin embargo, esta sección describirá como usarlos de todas maneras. Recuerde que XML es sensible a las mayusculas, entonces usted debera escribir tanto las etiquetas como los atributos en minúscula.

+

Para usar elementos de HTML en un archivo XUL, usted debe declarar que usted hace así la utilización del XHTML namespace. Este camino, Mozilla puede distinguir las etiquetas de HTML de los XUL. El atributo debajo debería para ser añadido a la etiqueta de ventana del archivo XUL, o al elemento de HTML exterior.

+
 xmlns:html="http://www.w3.org/1999/xhtml"
+
+

Esto es una declaración de HTML mucho como el que solíamos declarar XUL. Esto debe ser entrado exactamente como mostrado o esto no trabajará correctamente. Note que Mozilla en realidad no descarga este URL, pero esto realmente lo reconoce como ser HTML.

+

Aquí está un ejemplo como podría ser añadido a la ventana de archivo de hallazgo:

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+    xmlns:html="http://www.w3.org/1999/xhtml"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+

Entonces, usted puede utilizar etiquetas HTML como lo haría normalmente. Teniendo en cuenta lo sieguiente:

+ +

Puede utilizar cualquier etiqueta HTML, aunque algunas como head y body, realmente no son utiles. A continuación se muestran algunos ejemplos.

+
<html:img src="banner.jpg"/>
+
+<html:input type="checkbox" value="true"/>
+
+<html:table>
+  <html:tr>
+    <html:td>
+      A simple table
+    </html:td>
+  </html:tr>
+</html:table>
+
+

These examples will create an image from the file banner.jpg, a checkbox and a single-cell table. You should always use XUL features if they are available and you probably should not use tables for layout in XUL. (There are XUL elements for doing layout). Notice that the prefix html: was added to the front of each tag. This is so that Mozilla knows that this is an HTML tag and not a XUL one. If you left out the html: part, the browser would think that the elements were XUL elements and they would not display because img, input, table, and so on are not valid XUL tags.

+

In XUL, you can add labels with the description or label element. You should use these elements when you can. You can also add labels to controls either by using the HTML label element, or you can simply put the text inside another HTML block element (such as p or div) as in the example below.

+

Example

+

Código Ver en funcionamiento

+
<html:p>
+  Search for:
+  <html:input id="find-text"/>
+  <button id="okbutton" label="OK"/>
+</html:p>
+
+

This code will cause the text 'Search for:' to be displayed, followed by an input element and an OK button. Notice that the XUL button can appear inside the HTML elements, as it does here. Plain text will only be displayed when placed inside an HTML element that would normally allow you to display text (such as a p tag). Text outside of one will not be displayed, unless the XUL element the text is inside allows this (the description element, for example). The examples below may help.

+

Ejemplos de elementos HTML

+

What follows are some examples of adding HTML elements to windows. In each case, the window and other common information has been left out for simplicity.

+

Example: A dialog with a check box

+

Código Ver en funcionamiento

+
<html:p>
+  Click the box below to remember this decision.
+  <html:p>
+    <html:input id="rtd" type="checkbox"/>
+    <html:label for="rtd">Remember This Decision</html:label>
+  </html:p>
+</html:p>
+
+

In this case, one p tag was used to place the text in and another was used to break apart the text into multiple lines.

+

Image:htmlelem-ex1.jpg

+

Example: Text outside of HTML blocks

+

Código Ver en funcionamiento

+
<html:div>
+    Would you like to save the following documents?
+    <html:hr/>
+</html:div>
+Expense Report 1
+What I Did Last Summer
+<button id="yes" label="Yes"/>
+<button id="no" label="No"/>
+
+

Image:htmlelem-ex2.jpg

+

As can be seen in the image, the text inside the div tag was displayed but the other text (Expense Report 1 and What I Did Last Summer) was not. This is because there is no HTML or XUL element capable of displaying text enclosing it. To have this text appear, you would need to put it inside the div tag, or enclose the text in a description tag.

+

Example: Invalid HTML elements

+
<html:po>Case 1</html:po>
+<div>Case 2</div>
+<html:description value="Case 3"/>
+
+

All three of the cases above will not display, each for a different reason.

+
+
+ Case 1 
+
+ po is not a valid HTML tag and Mozilla has no idea what to do with it.
+
+ Case 2 
+
+ div is valid but only in HTML. To get it to work, you will need to add the html: qualifier.
+
+ Case 3 
+
+ A description element is only valid in XUL and not in HTML. It should not have the html: qualifier.
+
+

Next, we'll learn how to adding spacing between elements. Categorías

+

links interwikis

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_etiquetas_e_imagenes/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_etiquetas_e_imagenes/index.html" new file mode 100644 index 0000000000..2ab6c737b7 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_etiquetas_e_imagenes/index.html" @@ -0,0 +1,54 @@ +--- +title: Añadiendo etiquetas e imagenes +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_etiquetas_e_imagenes +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Labels_and_Images +--- +

Esta sección describe un modo de añadir etiquetas e imágenes a una ventana. Además, veremos como incluir elementos en grupos.

+

Elementos de Texto

+

Usted no puede integrar el texto directamente en un archivo XUL sin etiquetas alrededor de ello y esperar que ello sea mostrado. El modo más básico de incluir el texto en una ventana es de usar el elemento de etiqueta. Muestran un ejemplo debajo:

+

Ejemplo

+

Código Ver en funcionamiento

+
<label value="This is some text"/>
+
+

El atributo de valor puede ser usado para especificar el texto que usted desea tener mostrado. El texto no se ajustará, de tal forma que el texto aparecerá sobre una sola línea. Esto es conveniente para las secciones cortas de texto.

+

Para el texto más largo, usted puede colocar el contenido dentro de etiquetas de descripción de apertura y cierre. A diferencia del texto especificado con el elemento de etiqueta y el atributo de valor, el texto hijo se ajustará en múltiples líneas si fuera necesario. Redimensione la ventana para ver lo ajustado. Como HTML, saltos de línea y espacios en blanco extras son colapsados en un solo espacio. Más adelante descubriremos como contraemos la anchura de elementos de modo que nosotros podamos ver la envoltura más fácilmente.

+

Ejemplo

+

Código Ver en funcionamiento

+
<description>
+  This longer section of text is displayed.
+</description>
+
+

Internamente, tanto el elemento de etiqueta como el elemento de descripción son lo mismo, lo cual significa que las etiquetas pueden tener texto ajustado si usted coloca el texto dentro de la ´etiqueta´, y las descripciones pueden tener un atributo de valor. El elemento de etiqueta es querido para las etiquetas de mandos, como campos de texto. El elemento de descripción esta prometido a otro texto descriptivo como el texto informativo en el tope de un cuadro de diálogo. Por convención, usted debería seguir esta pauta.

+

Usted puede usar el atributo de control para fijar cual etiqueta de control esta asociada. Cuando el usuario pulsa la etiqueta, ése control será enfocado. Ponga el valor del atributo de control al id del elemento que será enfocado.

+

Ejemplo

+

Código Ver en funcionamiento

+
<label value="Click here:" control="open-button"/>
+<button id="open-button" label="Open"/>
+
+


+ En el ejemplo encima, pulsando la etiqueta hará que el botón sea enfocado.

+

Imágenes

+

Como HTML, XUL tiene un elemento para mostrar imágenes dentro de una ventana. Este elemento es adecuadamente llamado image. Note que el nombre de etiqueta es diferente que en HTML (image en vez de img). Usted puede usar el atributo de src para especificar el URL del archivo de imagen. El ejemplo debajo muestra esto:

+
<image src="images/banner.jpg"/>
+
+

Aunque usted pueda usar esta sintaxis, sería mejor usar una hoja de estilo para poner la URL de la imagen. En sesiones posteriores describiremos como usar hojas de estilo, pero un ejemplo se mostrá aqui para ampliar. Usted puede usar lista-estilo-imagen de la propiedad CSS para poner el URL para la imagen. Aquí están algunos ejemplos:

+
XUL:
+ <image id="image1"/>
+ <image id="search"/>
+
+
Style Sheet:
+ #image1 {
+   list-style-image: url("chrome://findfile/skin/banner.jpg");
+ }
+
+ #search {
+   list-style-image: url("chrome://findfile/skin/images/search.jpg");
+ }
+
+

Estas imágenes vienen desde dentro del directorio chrome, en el skin para el paquete findfile. Puesto que estas imágenes varían por el piel, usted debe usualmente poner una imagen en el directorio skin.

+

En la próxima sesión, aprenderemos como añadir algunos controles a una ventana.

+

Categorías

+

links interwikis

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_los_gestores_de_eventos/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_los_gestores_de_eventos/index.html" new file mode 100644 index 0000000000..41b1cce66c --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_los_gestores_de_eventos/index.html" @@ -0,0 +1,133 @@ +--- +title: Añadiendo los gestores de eventos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_los_gestores_de_eventos +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_Event_Handlers +--- +

The find files dialog so far looks quite good. We haven't cleaned it up much but we have created a simple user interface easily. Next, we will show how to add scripts to it.

+ +

Usando scripts

+ +

Para hacer funcional el diálogo de búsqueda de archivos, necesitaremos algunos scripts los cuales se ejecutarán cuando el usuario interactúe con el diálogo. Podríamos querer agregar un script para manejar el botón Buscar, el botón Cancelar y manejar cada comando del menú. Escribimos esto utilizando funciones JavaScript muchas de la misma forma que en HTML.

+ +

Puede utilizar el elemento script para incluir scripts en archivos XUL. Puede incluir el código script directamente en el archivo XUL entre la apertura y cierre de etiquetas script pero es mucho mejor incluir código en un archivo separado ya que de esta manera la ventana XUL cargará ligeramente más rápido. El atributo src es utilizado para enlazar un archivo script externo.

+ +
+
Nuestro ejemplo
+ +

Agreguemos un script al diálogo buscar archivo. Aunque no importe cómo sea llamado el archivo script, generalmente debería ser el mismo que el archivo XUL con una extensión .js. En este caso, findfile.js será utilizado. Agregue la línea debajo sólo después de la apertura de la etiqueta window y antes de cualquier otro elemento.

+ +
<script src="findfile.js"/>
+
+ +
Nota: Al agregar el elemento script directamente bajo el elemento window su ámbito será el documento completo. Si se anida bajo otra etiqueta su ámbito se restringirá a los elementos anidados en ella, y no sera "visible" para otras zonas de documento.
+ +

Crearemos el archivo script más tarde cuando conozcamos qué queremos poner en él. Definiremos algunas funciones en el archivo y podremos llamarlas desde un manejador de eventos.

+
+ +

Puede incluir scripts múltiples en un archivo XUL utilizando múltiples etiquetas script, cada una apuntando a un script diferente. Puede utilizar URLs relativas o absolutas. Por ejemplo, puede utilizar URLs de la siguiente forma:

+ +
<script src="findfile.js"/>
+<script src="chrome://findfiles/content/help.js"/>
+<script src="http://www.example.com/js/items.js"/>
+
+ +

Este tutorial no intenta describir cómo utilizar JavaScript ya que esto es un tópico extenso y hay variedades de otras fuentes que están disponibles para esto.

+ +
Por defecto la consola JavaScript sólo muestra errores desde contenido de red. Para mostrar errores en JavaScript chrome, es necesario cambiar la preferencia javascript.options.showInConsole a verdadero. Puede también cambiar la preferencia javascript.options.strict para la depuración. Estableciendo este valor a verdadero, la sintaxis propensa, pobremente escrita y no estándar causa errores lógicos que son guardados en la consola JavaScript.
+ +

Respuesta a eventos

+ +

El script contendrá código que responderá a varios eventos disparados por el usuario u otras situaciones. Hay más de treinta eventos diferentes que pueden ser manejados de formas distintas. Un evento típico es que el usuario presione un botón del ratón o presione una tecla. Cada elemento XUL tiene la habilidad de disparar varios eventos en diferentes situaciones. Algunos eventos son disparados solamente por determinados elementos.

+ +

Cada evento tiene un nombre, por ejemplo, 'mousemove' es el nombre del evento que es disparado cuando el usuario mueve el ratón sobre un elemento de la Interfaz de Usuario. XUL utiliza el mismo mecanismo de evento definido en eventos DOM. Cuando una acción ocurre que debería disparar un evento, tal como que el usuario mueva el ratón, se crea un objeto evento correspondiente a tal tipo de evento. Las propiedades de dicho objeto se establecen de modo que ofrezca información asociada a la circunstancia en que se produjo, tal como: la posición del ratón, la(s) tecla(s) que fue(ron) presionada(s), el botón del ratón que se utilizó, etc.

+ +

El evento es enviado luego en fases al XUL.

+ + + +

Puede responder a un evento durante la captura completa de la fase burbujeante. Una vez que el evento ha finalizado de propagarse, cualquier acción por defecto ocurrirá, la cual está incluida en comportamiento del elemento.

+ +

Por ejemplo, cuando el ratón sea movido sobre un botón que está dentro de un cuadro, un evento 'mousemove' es generado, y enviado primero a la ventana, seguido por el documento, y luego al cuadro. Eso completa la fase de captura. Luego, el evento 'mousemove' es enviado al botón. Finalmente, la fase burbujeante es esencialmente lo inverso a la fase de captura. Note que algunos eventos no hacen la fase burbujeante.

+ +

Puede adjuntar oyentes a cada elemento a ser oído por los eventos durante cada paso de la propagación de eventos. Debido a la forma en que un evento simple es pasado a todos los ancestros, puede adjuntar un oyente a un elemento específico o a un elemento más grande en la jerarquía. Naturalmente, un evento adjunto a un elemento más grande recibirá la notificación de todos los elementos dentro de él, mientras que un evento adjunto a un botón sólo recibirá eventos preparados para ese botón. Esto es útil si hay varios elementos que querrían manejarse utilizando el mismo código o similar.

+ +

El evento más común utilizado es el evento 'command'. El evento command es disparado cuando un usuario activa un elemento, por ejemplo presionando un botón, cambiando una casilla de verificación o seleccionando un ítem desde un menú. El evento command es un evento útil ya que automática maneja distintas formas de activar el elemento. Por ejemplo, el evento command ocurrirá sin importar si el usuario utiliza el ratón para seleccionar un botón o presionar la tecla Enter.

+ +

Hay dos formas de adjuntar un evento oyente a un elemento. Primero, utilizando un atributo con script como su valor. Segundo, llamando a un método del evento addEventListener. El primero sólo puede manejar eventos burbujeantes pero tiende a ser más simple de escribir. El último puede manejar eventos en cualquier fase y puede también ser utilizado para adjuntar múltiples oyentes para un evento en un elemento. Utilizando la forma atributo es más común para la mayoría de eventos.

+ +

Atributos controladores de eventos

+ +

Para controlar eventos bajo la forma de atributos se debe asignar un atributo asociado con el evento a controlar en el elemento en en que se desea atraparlo: el atributo será el nombre del evento precedido del prefijo 'on' y se le asignará como valor un llamado a la función o script que se desea ejecutar cuando ocurra el evento. Por ejemplo, para el evento 'command' el atributo correspondiente será 'oncommand' y para 'mouseover' será 'onmouseover'. El código de llamado a la función suele ser muy corto y generalmente llama a un procedimiento que ha sido definido en una etiqueta script o en un archivo separado. A continuación se ofrece un ejemplo de tratamiento de evento en respuesta a pulsar un botón:

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<button label="OK" oncommand="alert('Se apretó el botón!');"/>
+
+ +

Como el evento command permea las capas contenedoras (es burbujeante), también es posible ubicar el controlador de eventos en un elemento contenedor. En el ejemplo siguiente, el atributo controlador se establece en una caja y ésta atrapa eventos de los dos elementos que contiene.

+ +

Ejemplo 2 : Código Ver en funcionamiento

+ +
<vbox oncommand="alert(event.target.tagName);">
+  <button label="OK"/>
+  <checkbox label="Muestra las imágenes"/>
+</vbox>
+
+ +

En este ejemplo, el evento command se filtrará desde el elemento en que ocurra - button o checkbox - hasta el elemento vbox, donde es controlado. Si se hubiese colocado un segundo controlador de eventos (atributo oncommand) en el elemento button, su código sería invocado antes, seguido del manejador situado en el elemento vbox. Los controladores de eventos reciben, como argumento implícito, un objeto event al que se puede hacer referencia en código mediante la variable 'event'. Dicho objeto porta, en sus propiedades, la información que específicamente concierne al evento. Cuando varios elementos comparten un controlador de eventos (como en este ejemplo) es usual utilizar la propiedad 'target' del objeto event (event.target), que alberga una referencia al elemento en el que ocurrió. En el código de ejemplo se hace un llamado a la ventana de mensajes para que muestre el nombre de la etiqueta 'tagName' del elemento en que ocurra. La propiedad target resulta útil para controlar la permeabilidad de eventos burbujeantes, de modo que un conjunto de elementos, buttons por ejemplo, comparta y sea controlado mediante un único script.

+ +
Nota de traducción: Si se anida controladores de eventos, para un mismo evento, en varias capas; se debe tener cuidado de cancelarlo, una vez controlado en una capa, para evitar que se dispare nuevamente en los controladores situados en las capas contenedoras. A no ser que se desee realizar acciones en cascada.
+ +

Se debe notar que la sintaxis para establecer los atibitos controladores es similar a la empleada para asignar eventos en documentos HTML. De hecho, HTML y XUL comparten el mismo mecanismo de definición de eventos. No obstante, hay una diferencia importante: mientras que en HTML se usa el evento 'click' (o el atributo onclick) para responder a acciones sobre los buttons, en XUL se debe usar el evento command en su lugar. XUL soporta el evento click, pero este sólo responde a acciones del ratón (mouse), no al uso del teclado. En consecuencia, se debe evitar el uso del evento click en XUL, a no ser que se tenga alguna razón para responder de modo exclusivo a acciones provocadas con el mouse (ratón). Adicionalmente, cuando se deshabilita un elemento, este no disparará eventos command; mientras que el evento click se produce con independencia de que el elemento en que se dispare esté o no habilitado.

+ +
+
Nuestro ejemplo
+ +

Un gestor command se puede agregar a los botones Buscar y Cancelar del diálogo de búsqueda de archivos. Presionar el botón Buscar debe iniciar la búsqueda. Como aún no vamos a implementar el proceso de búsqueda, dejaremos esta parte fuera por un rato. Presionar el botón Cancelar debe cerrar la ventana. El código de abajo muestra como hacer esto. Mientras estamos aquí, añadimos el mismo código al menuitem Cerrar.

+ +
<menuitem label="Cerrar" accesskey="c" oncommand="window.close();"/>
+...
+
+<button id="cancel-button" label="Cancelar"
+     oncommand="window.close();"/>
+
+ +

Aquí se añadieron dos gestores. El atributo oncommand fue añadido al menuitem Cerrar. Usando este gestor, el usuario podrá cerrar la ventana dando click al menuitem con el mouse o seleccionándolo con el teclado.El gestor oncommand también fue añadido al botón Cancelar.

+
+ +

Controladores de eventos asignados mediante métodos del DOM

+ +

Una segunda vía para asignar controladores de eventos a los elementos es usar su método addEventListener. Este camino permite agregarlos dinámicamente y escucharlos durante la fase de captura. A continuación se ilustra la sintaxis:

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
<button id="okbutton" label="OK"/>
+
+<script>
+function buttonPressed(event){
+  alert('Se apretó el botón!');
+}
+
+var button = document.getElementById("okbutton");
+button.addEventListener('command', buttonPressed, true);
+</script>
+
+ +

La función getElementById() devuelve el elemento cuyo Id sea pasado como parámetro; en este caso, el button "okbutton". Luego se llama a la función addEventListener() de dicho elemento para agregarle un controlador de eventos: su primer argumento es el nombre del evento al que se va a responder, el segundo es el mombre de la función a llamar cuando el evento ocurra y finalmente, el último argumento debe ser true para controladores en la fase de captura. Si se desea permitir que el evento pase a otras fases se debe asignar el último argumenta como false. La función pasada como segundo argumento, debe a su vez, tener un argumento para pasar el objeto event, como se muestra en la declaración de la función buttonPressed arriba.

+ +
Nuestro ejemplo hasta aquí: Código Ver en funcionamiento
+ +

Seguimos con más detalles sobre los eventos.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_m\303\241s_elementos/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_m\303\241s_elementos/index.html" new file mode 100644 index 0000000000..5ac33e16d8 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/a\303\261adiendo_m\303\241s_elementos/index.html" @@ -0,0 +1,98 @@ +--- +title: Añadiendo más elementos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Añadiendo_más_elementos +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Adding_More_Elements +--- +

Concluiremos la discusión de cajas adicionando algunas al diálogo de encontrar archivos.

+ +

Añadiendo elementos al ejemplo de encontrar archivos

+ +

Vamos a agregar ahora algunos elementos al diálogo de encontrar archivos. Primero, vamos a adicionar la capacidad de búsqueda por otra información, tal como el tamaño y la fecha del archivo.

+ +
<hbox>
+  <menulist id="searchtype">
+    <menupopup>
+      <menuitem label="Name"/>
+      <menuitem label="Size"/>
+      <menuitem label="Date Modified"/>
+    </menupopup>
+  </menulist>
+  <spacer style="width: 10px;"/>
+  <menulist id="searchmode">
+    <menupopup>
+      <menuitem label="Is"/>
+      <menuitem label="Is Not"/>
+    </menupopup>
+  </menulist>
+  <spacer style="width: 10px;"/>
+  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
+</hbox>
+
+ +
Image:boxfinal1.png
+ +

Dos cajas de listas desplegables son añadidas al diálogo. Un espaciador ha sido adicionado en medio de cada elemento para separarlos. Estos espaciadores han dado un ancho específico de 10 pixeles cada uno. Usted notará que si la ventana es redimensionada, la caja de texto crece pero los otros componentes no. Igualmente notará que la etiqueta fué removida.

+ +

Si usted redimensiona la ventana verticalmente, el elemento no cambia su tamaño. Esto es debido a que está dentro de cajas horizontales. Lo mas apropiado sería que los botones de Encontrar y Cancelar permanecieran siempre al fondo de la ventana. Esto es fácil de hacer agregando un espaciador en medio de las dos cajas horizontales.

+ +
<spacer style="height: 10px"/>
+<hbox>
+  <menulist id="searchtype">
+    <menupopup>
+      <menuitem label="Nombre"/>
+      <menuitem label="Medida"/>
+      <menuitem label="Fecha de modificación"/>
+    </menupopup>
+  </menulist>
+  <spacer style="width: 10px;"/>
+  <menulist id="searchmode">
+    <menupopup>
+      <menuitem label="Es"/>
+      <menuitem label="No es"/>
+    </menupopup>
+  </menulist>
+  <spacer style="width: 10px;"/>
+  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
+</hbox>
+
+<spacer style="height: 10px" flex="1"/>
+
+<hbox>
+
+ +

Ahora cuando el diálogo es redimensionado, los dos botones se moverán ya que estan siempre a lo largo del fondo del diálogo. El primer espaciador añade espacio extra en medio de la etiqueta del título y los elementos del criterio de búsqueda.

+ +

Se vería mejor si hubiera un borde al rededor de los criterios de búsqueda. Hay dos formas de hacer esto. Podemos utilizar la propiedad CSS border de CSS o podemos utilizar el elemento caja de grupo. Este primer método puede requerir que coloquemos el estilo en la caja como tal. Sin embargo, vamos a utilizar el último método. Un caja de grupo tiene la ventaja de que dibuja una caja con un bonito estilo biselado, adecuado para el tema actual.

+ +

Vamos a cambiar la caja dentro de un groupbox:

+ +

Aquí inserta texto sin formato <groupbox orient="horizontal">

+ +
  <caption label="Search Criteria"/>
+  <menulist id="searchtype">
+  .
+  .
+  .
+  <spacer style="width: 10px;"/>
+  <textbox id="find-text" flex="1" style="min-width: 15em;"/>
+</groupbox>
+
+ +
Image:boxfinal2.png
+ +

Existen otros problemas cosméticos como tal. Podemos también tener que el groupbox crece de tal forma que se extiende verticalmente al final de la caja. También, podemos modificar algunos de los márgenes de tal forma que los elementos queden mejor posicionados.

+ +

Veremos más ejemplos del modelo de caja y algunos de sus rasgos a medida que continuemos agregando elementos durante el tutorial.

+ +

Ejemplo de encontrar archivos Código Ver en funcionamiento

+ +

Seguido, veremos como crear pilas.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html new file mode 100644 index 0000000000..722fd6fb36 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/barra_de_herramientas/index.html @@ -0,0 +1,60 @@ +--- +title: Barra de Herramientas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Barra_de_Herramientas +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Toolbars +--- +

 

+

Una barra de herramientas normalmente se sitúa en la parte superior de la ventana y contiene un número de botones que realizan acciones cotidianas. XUL ofrece la posibilidad de crear barra de herramientas.

+

Añadiendo una barra de herramientas

+

Como otros elementos, las barras de herramientas de XUL son del tipo caja. Generalmente mostrará una fila de botones, pero cualquier otro elemento puede colocarse en una barra de herramientas. Por ejemplo, el navegador Mozilla contiene una caja de texto para mostrar e introducir las direcciones URL.

+

Las barras de herramientas pueden ser colocadas en cualquier parte de la ventana, ya sea horizontalmente o verticalmente. Por supuesto que normalmente no pondremos una caja de texto en una barra de herramientas vertical. En verdad, como las barras de herramientas no son más que cajas, pueden colocarse en cualquier sitio que deseémos, incluso en el centro de la ventana. Sin embargo, es típico que las barras de herramientas se sitúen en la parte superior de la venta, colocandose una debajo de otra si hubíera más de una, agrupandose en un elemento llamadao toolbox.

+

En la parte izquierda de una barra de herramientas se encuentra un pequeño notch que al hacer clic en él contraerá la barra de herramientas, de forma que solo el notch quede visible. Este notch se denomina grippy. Cuando tenemos varias barras de herramientas agrupadas dentro de un elemento toolbox, los grippes se colocarán en una misma fila. Esto compacta el espacio usado de manera eficiente. Para las barras de herramientas verticales, los grippies se sitúan en la parte superior. Un usuario puede contraer las barras de herramientas para obtener más espacio en la ventana principal.

+

He aquí un ejemplo de una simple barra de herramientas.

+

Ejemplo

+
<toolbox>
+  <toolbar id="nav-herramientas">
+    <toolbarbutton label="Atrás" />
+    <toolbarbutton label="Adelante" />
+  </toolbar>
+</toolbox>
+
+

Esto creará una barra de herramientas con dos botones, un botón Atrás y otro Adelante. La barra de tareas ha sido definida dentro de un elemento toolbox. Todo esto ha requerido cuatro nuevos elementos, que son descritos aquí:

+
   * toolbox
+
+

Una caja que contiene barras de herramientas

+
   * toolbar
+
+

Una barra de herramientas que contiene elementos como botones. Las barras de herramientas pueden minimizarse usando el grippy de su borde izquierdo o superior.

+
   * toolbarbutton
+
+

Un botón para la barra de herramientas, el cual tiene las mismas características que un botón normal pero que normalmente se muestra de forma distinta.

+
   * toolbargrippy
+
+

Este elemento crea el notch que puede usarse para contraer y expandir la barra de herramientas. No necesitamos definirla manualmente, ya que se añade automaticamente.

+

El elemento toolbar es el principal y responsable de crear la barra de herramientas. Dentro de él se colocan los elementos que debe mostrar la barra de herramientas, normalmente botones aunque puede ser cualquier otro elemento. La barra de herramientas debería tener un atributo id o el grippy no será capaz de contraer o expandir la barra de herramientas correctamente.

+

En el ejemplo anterior solo creamos una barra de herramientas. Podemos crear más simplemente añadiendo más elementos toolbar después del primero.

+

El elemento toolbox no es más que un contenedor para las barras de herramientas. En algunas aplicaciones, veremos varias barras de herramientas en la parte superior de la venta. Podemos ponerlas todas juntas dentro de un toolbox. Sin embargo no es obligatorio poner las barras de herramientas dentro de un toolbox.

+

Los grippies son creados usando otro elemento, toolbargrippy. No tiene sentido usarlo en ningún otro sitio que no sea una barra de herramientas, ya que esta especialmente diseñador para contraer y expandir barras de herramientas. Sin embargo si es posible aplicarle un estilo diferente. Incluso puedes ocultarlo si incluimos el atributo grippyhidden al elemento toolbar, poniendo su valor a true.

+

Tres barras de herramientas agrupadas en un toolbox

+

Las mismas barras pero con dos de ellas contraidas.

+


+ Ahora añadiremos una barra de herramientas a nuestro dialogo. Realmente no lo necesitamos pero crearemos una de todas formas para demostrar su uso. Se definirán dos botones, los tipicos de Abrir y Guardar. En teoría deberían posibilitar que el usuario puediera guardar los resultados de una búsqueda y abrirlos posteriormente.

+
<vbox flex="1">
+    <toolbox>
+        <toolbar id="findfiles-toolbar">
+            <toolbarbutton id="abrirbusqueda" label="Abrir" />
+            <toolbarbutton id="guardarbusqueda" label="Guardar" />
+        </toolbar>
+    </toolbox>
+
+    <tabbox>
+
+

Hemos añadido una barra de herramientas con dos botones. En la imagen, vemos que aparecen alineados horizontalmente en la parte superior. El grippy tambíen aparece en el borde izquierdo. Fijemonos en que hemos colocado la barra de herramientas en la caja vertical, justo encima del elemento tabbox. Lo hemos hecho así porque necesitamos la alineación vertical de la caja para que la barra de herramientas aparezca arriba del todo.

+


+ Siguiente, veremos como añadir paneles de contenido.

+

NdT: el elemento ‘toolbargrippy’ no es soportado por Firefox, dada la popularidad de este navegador creo que habría que poner algun comentario al respecto. Ver la ref. de toolbargrippy

+

Categorías

+

links interwikis

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html new file mode 100644 index 0000000000..74325c678a --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/barras_de_desplazamiento/index.html @@ -0,0 +1,74 @@ +--- +title: Barras de desplazamiento +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Barras_de_desplazamiento +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +translation_of: Archive/Mozilla/XUL/Tutorial/Scroll_Bars +--- +

Ahora, aprenderemos a añadir barras de desplazamiento en una ventana.

+ +

Añadir barras de desplazamiento

+ +

Una barra de desplazamiento sirve para que un usuario pueda moverse en un documento grande. También puedes usarla cuando tienes que buscar un valor que está dentro de un cierto rango. Las barras de desplazamiento pueden crearse de varias formas. En XUL, puede crearse una usando la etiqueta scrollbar. Algunos elementos, como cajas de texto, también añadirán barras de desplazamiento cuando el contenido de dentro es demasiado grande

+ +

En esta sección, hablaremos de la creación de una barra de desplazamiento independiente. El usuario pondrá el valor ajustando la barra de desplazamiento. Probablemente no usarás esto a menudo. Una barra de desplazamiento está compuesta de varias partes: el deslizador, que es la parte principal de la barra de desplazamiento con la caja ajustable, y los dos botones de flecha. Una barra de desplazamiento crea todos estos elementos automáticamente.

+ +

Imagen:BarraDesplazamiento.jpg

+ +

La sintaxis de una barra de desplazamiento es la siguiente:

+ +
<scrollbar
+    id="barrahori"
+    orient="horizontal"
+    curpos="50"
+    maxpos="400"
+    increment="2"
+    pageincrement="10"/>
+
+ +

Los atributos son los siguientes:

+ +
+
id id
+
El identificador único de la barra de desplazamiento
+
+ +
+
orient orient
+
Especifica la dirección de la barra de desplazamiento. Por defecto es horizontal, que crea una barra de desplazamiento que se extiende de izquierda a derecha. También puedes especificar vertical que crea una barra de desplazamiento que se extiende de arriba abajo.
+
+ +
+
curpos curpos
+
Indica la posición actual de la barra de desplazamiento (la caja que puedes deslizar hacia adelante y hacia atrás.) El rango de valores se extiende de 0 al valor de maxpos. Este valor no es necesario. El valor por defecto es 0.
+
+ +
+
maxpos maxpos
+
Indica la posición máxima de la barra de desplazamiento. Es un valor numérico. El valor por defecto es 100.
+
+ +
+
increment increment
+
Este valor especifica cuánto cambia el valor de curpos cuando el usuario pulsa sobre una de las flechas de barra de desplazamiento. El valor por defecto es 1.
+
+ +
+
pageincrement pageincrement
+
Este valor especifica cuánto cambia el valor curpos cuando el usuario hace clic sobre las páginas con la barra de desplazamiento, que puede hacerse pulsando sobre la bandeja entre la caja y las flechas. El valor por defecto es 10.
+
+ +

El ejemplo dado en la sintaxis anterior creará una barra de desplazamiento que puede extenderse de un valor de 0 a 100. El valor 100 podría ser el número de líneas en una lista, pero podría ser lo que quieras. El valor inicial en este ejemplo es 20. Al hacer clic sobre una de las flechas de barra de desplazamiento, el valor se cambiará por 1 encima de o abajo. Pero paginando por la barra de desplazamiento, el valor se cambiará por 10.

+ +

Cuando el usuario haga clic sobre las flechas de la barra de desplazamiento, se moverá la cantidad especificada por el valor increment. El aumento del valor de este atributo hará que la barra de desplazamiento se mueva más lejos con cada clic. La posición más a la izquierda o superior de la barra de desplazamiento tiene el valor 0 y la posición más a la derecha o inferior de la barra de desplazamiento tiene el valor dado por maxpos.

+ +

Ajustando los valores de la barra de desplazamiento, puedes tener el thumb posicionado donde quieras y el cambio cuando el usuario haga clic en las flechas tal y como desees.

+ +

A continuación, aprenderemos a crear barras de herramientas.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html new file mode 100644 index 0000000000..d3607f1260 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/cajas_de_grupo/index.html @@ -0,0 +1,61 @@ +--- +title: Cajas de grupo +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Cajas_de_grupo +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Groupboxes +--- +

Esta sección describe un método para incluir elementos dentro de grupos.

+

Cajas de grupo

+

HTML provee un elemento, fieldset, que puede ser usado para agrupar otros elementos. Generalmente un borde es trazado alrededor de los elementos para demostrar que están relacionados entre sí. Un ejemplo sería un grupo de casillas de verificación. XUL provee un elemento equivalente, groupbox (caja de grupo), que se utiliza para propósitos similares.

+

Como su nombre implica, la groupbox es un tipo de caja, esto significa que los elementos dentro de ella se alinean de acuerdo a las reglas de las cajas. Hay dos diferencias entre las cajas de grupo y las cajas regulares:

+
    +
  1. Un borde biselado es dibujado alrededor de la caja de grupo de manera predeterminada. Puede cambiarse este comportamiento corrigiendo el estilo CSS.
    2. +
  2. La caja de grupo permite un encabezado que es colocado a lo largo del borde superior.
    3. +
+

Como las cajas de grupo son un tipo de caja pueden utilizarse los mismos atributos, como orient y flex. Puede insertarse cualquier elemento dentro de la caja, pero normalmente estos elementos estarán relacionados de alguna manera.

+

La etiqueta en el borde superior puede ser creada utilizando el elemento caption, esto funciona de manera similar al elemento HTML legend. Un simple elemento caption puesto como el primer hijo será suficiente.

+

El ejemplo siguiente muestra una simple caja de grupo:

+

Ejemplo

+
<groupbox>
+  <caption label="Respuesta"/>
+  <description value="Banana"/>
+  <description value="Mandarina"/>
+  <description value="Casilla telefónica"/>
+  <description value="Kiwi"/>
+</groupbox>
+
+

Image:titledbox1.jpg

+

Esto causará que se vean cuatro segmentos de texto rodeados por una caja con la etiqueta “Respuesta�?. Nótese que la caja de grupo posee orientación vertical por omisión, lo que es necesario para apilar los elementos en una sola columna.

+

También pueden agregarse elementos hijos dentro del elemento caption para crear un encabezado más complejo. Por ejemplo, el panel de preferencias para tipos de letra de Mozilla utiliza un menú desplegable como encabezado. A pesar de que se puede hacer uso de cualquier contenido, usualmente se usa una casilla de verificación o un menú desplegable.

+

Ejemplo

+
<groupbox flex="1">
+  <caption>
+    <checkbox label="Habilitar copias de seguridad"/>
+  </caption>
+  <hbox>
+    <label control="dir" value="Directorio:"/>
+    <textbox id="dir" flex="1"/>
+  </hbox>
+  <checkbox label="Comprimir archivos almacenados"/>
+</groupbox>
+
+

En este ejemplo se ha utilizado como encabezado una casilla de verificación. Podríamos usar un guión para habilitar o deshabilitar los contenidos de la caja de grupo cuando la casilla de verificación sea marcada y desmarcada. La caja de grupo contiene una caja horizontal con una etiqueta y una caja de texto. Tanto la caja de texto como la caja de grupo fueron hechas flexibles así la caja de texto se expandirá cuando la ventana se expanda. La casilla de verificación adicional aparece debajo de la caja de texto por la orientación vertical de la caja de grupo. En la siguiente sección añadiremos una caja de grupo a la ventana de diálogo “Buscar archivos�?.

+

Grupos radiales

+

Puede usarse el elemento radiogroup (grupo radial) para agrupar varios elementos radio (botón radial). El radiogroup es un tipo de caja. Puede agregarse cualquier elemento al mismo, y aparte de su manejo especial de botones radio estos funcionan como cualquier otra caja.

+

Todos los botones radiales insertados en el grupo radial serán agrupados entre sí, aún si se encuentran dentro de cajas anidadas. Esto podría aprovecharse para agregar elementos extras dentro de la estructura, como en el siguiente ejemplo:

+

Ejemplo

+
<radiogroup>
+  <radio id="no" value="no" label="Sin número"/>
+  <radio id="aleatorio" value="aleatorio" label="Número aleatorio"/>
+  <hbox>
+    <radio id="especificado" value="especificado" label="Especifique un número:"/>
+    <textbox id="numeroespecifico"/>
+  </hbox>
+</radiogroup>
+
+

Obsérvese que el elemento radiogroupno dibuja un borde a su alrededor, si se desearan bordes y encabezado deberá ser colocado dentro de una groupbox (caja de grupo).

+

A continuación utilizaremos lo aprendido hasta el momento y añadiremos algunos elementos adicionales a la ventana de diálogo “Buscar archivos�?.

+

Categorías

+

links interwikis

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/caracter\303\255sticas_adicionales_de_la_instalaci\303\263n/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/caracter\303\255sticas_adicionales_de_la_instalaci\303\263n/index.html" new file mode 100644 index 0000000000..12cde3c81f --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/caracter\303\255sticas_adicionales_de_la_instalaci\303\263n/index.html" @@ -0,0 +1,39 @@ +--- +title: Características adicionales de la instalación +slug: >- + Archive/Mozilla/XUL/Tutorial_de_XUL/Características_adicionales_de_la_instalación +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Additional_Install_Features +--- +

 

+

Esta sección describe algo más específico sobre instaladores.

+

Manipulación De Archivo De Instalación

+

La sección anterior describió un instalador básico. Usted puede desear realizar un proceso más elaborado durante la instalación. Por ejemplo, usted puede desear instalar un paquete solamente cuando se cumplan ciertas condiciones, por ejemplo tener una librería particular instalada.

+

Además del objeto Install, un objeto File también está disponible para el script de instalación. Este objeto proporciona algunas funciones que se puedan utilizar para examinar y para modificar archivos en disco. Usted puede utilizarlo para mover, copiar o borrar archivos antes o después de que los archivos sean instalados. Por ejemplo, usted puede querer hacer primero una copia de respaldo de algunos archivos.

+

El código siguiente hará una copia del archivo "/bin/grep" y la pondrá en el directorio "/main".

+
var binFolder=getFolder("file:///","bin");
+var grep=getFolder(binFolder,"grep");
+
+var mainFolder=getFolder("file:///","main");
+
+File.copy(grep,mainFolder);
+
+


+ La primera línea recuperará una referencia al directorio /bin. El texto 'file:///' es una secuencia especial que significa la raíz del sistema de archivos. De allí, conseguimos el archivo 'grep' que esta en el interior del directorio 'bin'. Si no existe este archivo, un error ocurrirá durante la instalación. Después, conseguimos la carpeta 'main', otra vez desde la raíz del sistema de archivos. Finalmente, ejecutamos la función File.copy que copia el archivo desde el fuente al destino.

+

También existen Funciones para mover, renombrar y ejecutar archivos. Así, usted puede mover los archivos que puedan estar en conflicto con su paquete.

+

Manipulación De Errores

+

Usted probablemente deseará manejar de mejor forma los errores. Esto ocurrirá si un archivo o un directorio no puede ser encontrado, hay poco espacio en disco o por otras razones.

+

Usted puede utilizar la función getLastError para determinar si ocurrió un error. Si retornó SUCCESS, no ocurrió ningún error. Si no, el número será un código de error que indica el tipo de error que ocurrió. Usted puede llamar esta función en cualquier punto durante el script de instalación para determinar si un error ocurrió durante la operación pasada.

+

Si ocurre un error, usted deseará probablemente abortar la instalación. Usted puede también exhibir un mensaje de error al usuario. Por ejemplo, usted puede ser que ponga esto como la sección pasada de su script:

+
if (getLastError() == SUCCESS){
+  performInstall();
+}
+else {
+  cancelInstall();
+}
+
+

Los códigos de error que puede retornar getLastError se enumeran en el archivo fuente de Mozilla nsInstall.h. Durante la instalación, se crea un archivo log que contiene las operaciones que se realizan. También mostrará cualquier error que ocurra. El archivo log se puede encontrar en el archivo 'install.log' en el directorio de instalación de Mozilla. Un bloque de texto será agregado a este archivo por cada instalación que ocurra.

+

La función logComment se puede utilizar para escribir una cadena de caracteres al archivo log. Tiene un parámetro, el texto a escribir.

+

El Tutorial XUL se acabo. :D

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/caracter\303\255sticas_de_una_ventana/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/caracter\303\255sticas_de_una_ventana/index.html" new file mode 100644 index 0000000000..57b8fff890 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/caracter\303\255sticas_de_una_ventana/index.html" @@ -0,0 +1,106 @@ +--- +title: Características de una ventana +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Características_de_una_ventana +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Features_of_a_Window +--- +

Ya hemos visto algunas de las características de las ventanas. En esta sección veremos algunas más.

+ +

Creando otra ventana

+ +

Puedes crear otra ventana para tu aplicación de la misma manera como lo harías para crear la primera. Solamente crea un segundo archivo XUL con el código de la ventana en él. Como en HTML, puedes usar la función window.open() para abrir la segunda ventana. Esta función devolverá una referencia de la nueva ventana abierta. Puedes usar esta referencia para llamar funciones de la otra ventana.

+ +

La función open toma tres argumentos. El primero es la url del archivo que quieres abrir. El segundo es un nombre interno para la nueva ventana. El tercero es una lista de indicadores. El flag ‘chrome’ es importante para abrir la ventana como un archivo chrome. Si no agregas el flag ‘chrome’, el archivo se abrirá como el contenido de una ventana del navegador.

+ +

Por ejemplo:

+ +
var myWin =
+window.open("chrome://findfile/content/findfile.xul","findfile","chrome");
+
+ +

Especificando el ancho y alto

+ +

Deben haber notado que siempre que algunos elementos fueron agregados a una ventana, el ancho de la ventana se expande para hacer caber los nuevos elementos. En realidad la ventana es solo una caja (box) que es flexible y con orientación vertical por defecto. También puedes especificar el ancho y alto directamente en la etiqueta window. Esto causa que la ventana se muestre con un tamaño específico. Si no se especifica, el tamaño se determinará por los elementos que contiene.

+ +
<window
+id="findfile-window"
+title="Find Files"
+width="400"
+height="450"
+
+xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ +

En este ejemplo, la ventana se abrirá con un ancho de 400 píxeles y un alto de 450 píxeles. Incluso si no contiene suficientes elementos como para abarcar este tamaño, de todas maneras la ventana se abrirá con este tamaño y quedará espacio en blanco en el área no ocupada. Si contiene demasiados elementos, la ventana no será lo suficientemente grande como para contener los elementos. El usuario deberá ajustar el tamaño del dialogo. Cuando especificas el alto y ancho de una ventana debes tener cuidado para que la ventana no resulte demasiado chica o demasiado grande. Nota que debes especificar ambos, el ancho y alto. Si especificas solo uno, el otro se tomará como 0. Para que la ventana ajuste automáticamente su tamaño, no especifiques ni el ancho ni el alto. El ancho y alto especifican solo el tamaño inicial de la ventana. El usuario podrá cambiar el tamaño de la ventana, asumiendo que la ventana sea dimensionable (‘resizable’) (ver más abajo).

+ +

Otras características de las ventanas

+ +

Los indicadores de abajo se pueden pasar como parte del tercer argumento a la función window.open. Tu sistema operativo puede que no los soporte todos. También puedes usar cualquiera de los indicadores ya existentes, los cuales deberías encontrar en una referencia de JaveScript. Puedes desactivar alguna característica especificándolo con ‘no’, por ejemplo ‘dialog=no’.

+ +
+
alwaysLowered 
+
La ventana aparecerá siempre debajo de otras ventanas.
+
+ +
+
alwaysRaised 
+
La ventana aparecerá siempre arriba de otras ventanas.
+
+ +
+
centerscreen 
+
La ventana al abrirse se centrará.
+
+ +
+
dependent 
+
La ventana aparecerá siempre en relación a la ventana que la abrió. Si la ventana que abrió la nueva ventana se mueve, la nueva ventana se mueve junto a ella.
+
+ +
+
dialog 
+
La ventana es un dialogo, el cual puede aparecer diferentemente.
+
+ +
+
modal 
+
El dialogo es modal. No se podrá interactuar con la ventana que abrió el dialogo hasta que este se cierre.
+
+ +
+
resizable 
+
El usuario puede cambiar el tamaño de la ventana.
+
+ +

Depurando una ventana

+ +

Otra característica útil solo durante el desarrollo es activar el modo de depuración de una ventana. Para hacerlo, agrega un atributo debug con valor ‘true’ a la ventana. Esto hará que la ventana muestre los ‘box’ y los ‘spacers’ de forma que puedas ver lo que está ocurriendo. Este ejemplo muestra como usarlo.

+ +
<window
+id="findfile-window"
+title="Find Files"
+debug="true"
+xmlns:html="http://www.w3.org/1999/xhtml"
+xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ +

La imagen de abajo muestra el efecto cuando se aplica a una ventana sencilla.

+ +

 

+ + + +

En la imagen, puede que notes algunas cajas (boxes) adicionales. Esto es debido a que cada elemento XUL está hecho de un número de cajas (boxes), definidas con XBL. Las puedes ignorar. Puedes especificar el atributo debug en cualquier caja, no solo en la ventana (window).

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html new file mode 100644 index 0000000000..561baa97ec --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/comandos/index.html @@ -0,0 +1,171 @@ +--- +title: Comandos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Comandos +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Commands +--- +

 

+ +

Un comando es una operación o función que se puede invocar.

+ +

El elemento comando

+ +

El elemento command se usa para crear comandos los cuales pueden ser usados para llevar a cabo operaciones. Usted no necesitaría usar comandos, ya que usted puede invocar un script para manejar las cosas. Sin embargo, un comando tiene la ventaja de que puede ser deshabilitado automáticamente cuando se necesite y puede ser invocado externamente sin necesidad de saber de los detalles de su implementación. Los comandos son una manera adecuada de abstraer operaciones del código. Además los comandos son muy útiles para aplicaciones extensas.

+ +

Para empezar, con el fin de implementar los comandos del menú portapapeles, cortar, copiar y pegar usted puede usar comandos. Si no usara comandos, usted necesitaría averiguar cual campo tiene el foco (focus), luego verificar para asegurarse que la operación es la adecuada para ese elemento. Además, los comandos del menú necesitarían ser habilitados y deshabilitados dependiendo de si el elemento enfocado haya seleccionado texto o no, y para las operaciones de pegar (paste), si hay algo adecuado en el portapapeles (clipboard) para pegar. Como puede ver, esto se vuelve complicado. Usando comandos, gran parte del trabajo es manejada para usted. Usted puede usar un comando para cualquier operación. Mozilla los usa para casi todos los comandos del menú. Ademas, campos de texto y otros accesorios tienen un número de comandos ya soportados y que usted puede invocar. Usted debería usarlos cuando la operación depende de cual elemento es enfocado.

+ +

Un comando es identificado por su atributo id. Mozilla usa la convención de que el id del comando comience con 'cmd_'. Usted probablemente querrá usar el mismo id si un comando está siendo usado, sin embargo para sus comandos propios, usted puede usar cualquier id de comando que desee. Para evitar conflictos, usted puede desear incluir el nombre de la aplicación en el id del comando. Una manera simple de usar comandos es como sigue:

+ +

 

+ +

Ejemplo: un sólo comando

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<command id="cmd_openhelp" oncommand="alert('Ayuda!');"/>
+<button label="Ayuda" command="cmd_openhelp"/>
+
+ +

En este ejemplo, en vez de colocar el atributo oncommand en el button, simplemente lo colocamos sobre un elemento command. Los dos son entonces enlazados usando el atributo command el cual tiene el valor del id del comando. El resultado es que cuando el botón es presionado, el comando: 'cmd_openhelp' es invocado.

+ +


+ Hay dos ventajas al usar ésta técnica:

+ + + + + +

Adicionalmente:

+ + + +

Ejemplo: toggling command disabled

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<command id="cmd_openhelp" oncommand="alert('Ayuda');"/>
+<button label="Ayuda" command="cmd_openhelp"/>
+<button label="Más ayuda" command="cmd_openhelp"/>
+
+<button label="Desactivado"
+        oncommand="document.getElementById('cmd_openhelp').setAttribute('disabled','true');"/>
+<button label="Activado"
+        oncommand="document.getElementById('cmd_openhelp').removeAttribute('disabled');"/>
+
+ +

En este ejemplo, ambos botones usan el mismo comando. Cuando un botón deshabilitar es presionado, el comando es deshabilitado al colocar su atributo desactivado, y ambos botones serán deshabilitados también.

+ +

Es normal colocar un grupo de comandos dentro de un elemento

+ +

commandset, junto cerca del inicio del archivo XUL, tal como en el siguiente:

+ +
<commandset>
+  <command id="cmd_open" oncommand="alert('Abrir!');"/>
+  <command id="cmd_help" oncommand="alert('Ayuda!');"/>
+</commandset>
+
+ +

Un comando es invocado cuando el usuario activa el botón u otro elemento agregado al comando. Usted puede también invocar un comando al llamar el método doCommand cualquier elemento de lcomando o un elemento agregado al comando tal como un botón.

+ +

Command Dispatching

+ +

Es posible usar comandos sin el elemento comando elements, o al menos, sin añadir un atributo oncommand al comando. In this case, the command will not invoke a script directly, but instead, find an element or function which will handle the command. This function may be separate from the XUL itself, and might be handled internally by a widget. In order to find something to handle the command, XUL uses an object called a command dispatcher. This object locates a handler for a command. A handler for a command is called a controller. So, essentially, when a command is invoked, the command dispatcher locates a controller which can handle the command. You can think of the comando element as a type of controller for the command.

+ +

The command dispatcher locates a controller by looking at the currently focused element to see if it has a controller which can handle the command. XUL elements have a controladores property which is used to check. You can use the controladores property to add your own controllers. You might use this to have a listbox respond to cut, copy and paste operations, for instance. An example of this will be provided later. By default, only textboxes have a controller that does anything. The textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations. Note that an element may have multiple controllers, which will all be checked.

+ +

If the currently focused element does not have a suitable controller, the window is checked next. The window also has a controladores property which you can modify if desired. If the focus is inside a frame, each frame leading to the top-level window is checked as as well. This means that commands will work even if the focus is inside a frame. This works well for a browser, since editing commands invoked from the main menu will work inside the content area. Note that HTML also has a commands and controller system although you can't use it on unprivileged web pages, but you may use it from, for example, a browser extension. If the window doesn't provide a controller capable of handling the command, nothing will happen.

+ +

You can get the command dispatcher using the document's commandDispatcher property, or you can retrieve it from the controllers list on an element or a window. The command dispatcher contains methods for retrieving controllers for commands and for retrieving and modifying the focus.

+ +

Añadiendo controladores

+ +

You can implement your own controllers to respond to commands. You could even override the default handling of a command with careful placement of the controller. A controller is expected to implement four methods, which are listed below:

+ +
+
supportsCommand (command) 
+
this method should return true if the controller supports a command. If you return false, the command is not handled and command dispatcher will look for another controller. A single controller may support multiple commands.
+
isCommandEnabled (command) 
+
this method should return true if the command is enabled, or false if it is disabled. Corresponding buttons will be disabled automatically.
+
doCommand (command) 
+
execute the command. This is where you would put the code to handle the command.
+
onEvent (event) 
+
this method handles an event.
+
+ +
Ejemplo: implementación del controlador
+ +

Let's assume that we want to implement a listbox that handles the delete command. When the user selects Delete from the menu, the listbox deletes the selected row. In this case, you just need to attach a controller to a listbox which will perform the action in its doCommand method.

+ +

Try opening the example below (Código Ver en funcionamiento) in a browser window and selecting items from the list. You'll notice that the Delete command on the browser's Edit menu is enabled and that selecting it will delete a row. (See Discussion about opening this example). The example below isn't completely polished. Really, we should ensure that the selection and focus is adjusted appropriately after a deletion.

+ +
<window id="controller-example" title="Ejemplo de controlador" onload="init();"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<script>
+function init()
+{
+  var list = document.getElementById("laLista");
+
+  var listController = {
+    supportsCommand : function(cmd){ return (cmd == "cmd_delete"); },
+    isCommandEnabled : function(cmd){
+      if (cmd == "cmd_delete") return (list.selectedItem != null);
+      return false;
+    },
+    doCommand : function(cmd){
+      list.removeItemAt(list.selectedIndex);
+    },
+    onEvent : function(evt){ }
+  };
+
+  list.controllers.appendController(listController);
+}
+</script>
+
+<listbox id="laLista">
+  <listitem label="Ocean"/>
+  <listitem label="Desert"/>
+  <listitem label="Jungle"/>
+  <listitem label="Swamp"/>
+</listbox>
+
+</window>
+
+ +

The controller (listController) implements the four methods described above. The supportsCommand method returns true for the 'cmd_delete' command, which is the name of the command used when the Delete menu item is selected. For other commands, false should be returned since the controller does not handle any other commands. If you wanted to handle more commands, check for them here, since you will often use a single controller for multiple related commands.

+ +

The isCommandEnabled method returns true if the command should be enabled. In this case, we check if there is a selected item in the listbox and return true if there is. If there is no selection, false is returned. If you delete all the rows in the example, the Delete command will become disabled. You may have to click the listbox to update the menu in this simple example. The doCommand method will be called when the Delete menu item is selected, and this will cause the selected row in the listbox to be deleted. Nothing needs to happen for the onEvent method, so no code is added for this method.

+ +

Override Default Controller

+ +

We attach this controller to the listbox by calling the appendController method of the listbox's controladores. The el objeto controlador has a number of methods that may be used to manipulate the controllers. For instance, there is also an insertControllerAt method which inserts a controller into an element before other ones. This might be useful to override commands. For example, the following example will disable pasting into a textbox.

+ +
var tboxController = {
+  supportsCommand : function(cmd){ return (cmd == "cmd_paste"); },
+  isCommandEnabled : function(cmd){ return false; },
+  doCommand : function(cmd){ },
+  onEvent : function(evt){ }
+};
+
+document.getElementById("tbox").controllers.insertControllerAt(0,tboxController);
+
+ +

In this example, we insert the controller at index 0, which means before any others. The new controller supports the 'cmd_paste' command and always indicates that the command is disabled. The default textbox controller never gets called because the command dispatcher found the controller above to handle the command first.

+ +

Seguimos con la actualización de comandos.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html new file mode 100644 index 0000000000..30cfc30cbc --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_entrada/index.html @@ -0,0 +1,86 @@ +--- +title: Controles de entrada +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Controles_de_entrada +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Input_Controls +--- +

XUL tiene elementos que son similares a los controles de los formularios de HTML

+

Campos de Entrada de Texto

+

HTML tiene un elemento de entrada que puede ser usado para mandos de entrada de texto. XUL tiene un elemento similar, textbox, usado para campos de entrada de texto. Sin cualquier atributo, el elemento textbox crea una caja en la cual el usuario puede entrar en el texto. Textboxes aceptan muchos de los mismos atributos que mandos de entrada de HTML. Lo siguiente es algunos de ellos:

+

id

+

Un identificador único de modo que usted puede identificar el textbox.

+

class

+

La clase de estilo del textbox.

+

value

+

Si usted quiere que el textbox tenga un texto por defecto, suminístrelo del atributo de valor.

+

disabled

+

Si vale verdadero desactiva el componente.

+

type

+

Existen una serie de valores que cambian el comportamiento del textbox. Por ejemplo 'password' hace que lo escrito quede oculto y suele usarse para campos de contraseña.

+

maxlength

+

El número máximo de los carácteres a los cuales el textbox permite.

+

Note que mientras en HTML, varias clases diferentes de campos pueden ser creadas con el elemento de entrada, en XUL hay elementos separados para cada tipo. El ejemplo siguiente muestra algún textboxes:

+

Ejemplo

+
<label control="some-text" value="Enter some text"/>
+<textbox id="some-text"/>
+<label control="some-password" value="Enter a password"/>
+<textbox id="some-password" type="password" maxlength="8"/>
+
+

Los ejemplos textbox encima crearán las entradas de texto que sólo pueden ser usadas para entrar en una línea de texto. HTML también tiene un elemento textarea para crear una entrada de texto más grande el área. En XUL, usted puede usar el elemento textbox por esta razón también - dos elementos separados no son necesarios. Si usted pone el atributo de multilínea a verdadero, el campo de entrada de texto mostrará filas de mutliple.

+

Ejemplo

+

Código Ver en funcionamiento

+
<textbox multiline="true"
+           value="Esto es un texto que podría ser ajustado en multiples líneas."/>
+
+

Similar al elemnento HTML textarea, puedes usar los tributos rows y cols para seleccionar el tamaño. Esto debería seleccionar el nñumero de filas y columnas de caracteres a mostrar.

+
+

Vamos a añadir un campo de entrada de busqueda para el dialogo buscar archivo. Usaremos el elemento textbox.

+ 
<label value="Buscar por:" control="find-text"/>
+<textbox id="find-text"/>
+
+<button id="find-button" label="Find"/>
+
+

Añade estas líneas antes de los botones que creamos en la última sección. Si abres esta ventana, verás algo parecido a lo que se muestra en la imagen siguiente.

+

Image:inputs1.jpg

+

Nota que la etiqueta y el campo de entrada de texto ahora aparecen en la ventana. La caja de etxto es completamente funcional y puedes teclear dentro y seleccionar texto. Nota que el atributo de control tiene que estar siendo usado con la caja de texto seleccionada cuando la etiqueta se pulsa.

+
+

Cajas de Chekeo y Botones de Radio

+

Dos elementos adicionales son usados para crear las cajas de chekeo y los botones de radio. Son variaciones de botones. Las cajas de checkeo se usan para opciones que pueden ser habilitadas o desabilitadas. Los Botones de Radio pueden usarse para propositos similares cuando dentro de un grupo de elementos solo podemos seleccionar uno.

+

La mayoría de los atributos de las cajas de checkeo y los botones de radio coinciden con los de los botones. El ejemplo siguiente muestra algunas cajas de checkeo y botones de radio simples.

+
<checkbox id="case-sensitive" checked="true" label="Case sensitive"/>
+<radio id="orange" label="Orange"/>
+<radio id="violet" selected="true" label="Violet"/>
+<radio id="yellow" label="Yellow"/>
+
+

La primera línea crea una caja de checkeo simple. Cuando el usuario hace click en la aja de checkeo, esta cambia entre checkeada y no checkeada. El atributo checked puede usarse para indicar el estado por defecto. Puedes seleccionarlo como true o false. El atributo etiqueta puede usarse para asignar una etiqueta que aparezca despues de la caja de chekeo. Para los botones de radio, deberías usar el atributo selected en lugar del atributo checked. Seleccionalo a true para tener un botón de radio seleccionado por defecto, o dejalo para otros botones de radio.

+

Para que un grupo de botones de radio trabajen junto, necesitas usar el elemento radiogroup. Solo uno de los botones de radio en un grupo de botones de radio puede estar seleccionado. Pulsando en uno desactivaras el resto de los botones de radio en el mismo grupo. El siguiente ejemplo demuestra esto.

+

Ejemplo

+

Código Ver en funcionamiento

+
<radiogroup>
+  <radio id="orange" label="Orange"/>
+  <radio id="violet" selected="true" label="Violet"/>
+  <radio id="yellow" label="Yellow"/>
+</radiogroup>
+
+

Como los botones, la cajas de checkeo y los botones de radio estan hechos de una etiqueta y una imagen, donde la imagen cambia entre checkeado y no checkeado cuando se pulsa. Las cajas de checkeo tienen la muchos de los atributos de los botones:

+
+
+ label 
+
+ La etiqueta de las cajas de checkeo o botones de radio.
+
+ disabled 
+
+ Seleecciona entre true or false para habilitar o deshabilitar una caja de checkeo o botón de radio.
+
+ accesskey 
+
+ Las teclas de acceso rápido pueden usarse para seleccionar el elemento. La letra especificada es normalmente subrallada en la etiqueta.
+
+

Llevando el ejemplo Burcar Archivos más lejos

+

Código Ver en funcionamiento

+

En la siguiente sección, veremos algunos elementos para crear cajas de listas.

+

Categorías

+

links interwikis

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html new file mode 100644 index 0000000000..53a621b470 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/controles_de_listas/index.html @@ -0,0 +1,171 @@ +--- +title: Controles de listas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Controles_de_listas +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/List_Controls +--- +

XUL tiene una cantidad de tipos de elementos para la cración de cajas de listas.

+ +

Cajas de listas

+ +

Una caja de listas de usa para mostrar un número de elementos en una lista. El usuario puede seleccionar un elemento de la lista.

+ +

XUL provee dos tipos de elementos para crear listas, un elemento listbox para crear cajas de listas de multiples filas, y un elemento menulist para crear listas desplegables. Trabajan de forma muy similar al elemento de HTML select, el cual permite embas funciones, pero los elementos XUL tienes caracteristicas adicionales.

+ +

La caja de listas más simple usa el elemento listbox para su propia caja, y el elemento listitem para cada elemento. Por ejemplo, esta lista tendrá cuatro filas, una por cada elemento.

+ +

Ejemplo 1 Código Ver en funcionamiento

+ +
<listbox>
+  <listitem label="Butter Pecan"/>
+  <listitem label="Chocolate Chip"/>
+  <listitem label="Raspberry Ripple"/>
+  <listitem label="Squash Swirl"/>
+</listbox>
+
+ +

Image:lists1.jpg

+ +

Similar al elemento HTML option, Puedes asignar un valor para cada elemento usando el atributo value. Puedes entonces usar el valor en un script. La caja de listas tendrá por defecto el tamaño de las filas de la lista, pero puedes controlar el tamaño con el atributo rows. Seleccionando el número de rows a mostrar en la caja de lista. Una barra de desplazamiento aparecerá para mostrar al usuario las filas adicionales.

+ +

El siguiente ejemplo demuestra estas características adicionales:

+ +

Ejemplo 2 Código Ver en funcionamiento

+ +
<listbox rows="3">
+  <listitem label="Butter Pecan" value="bpecan"/>
+  <listitem label="Chocolate Chip" value="chocchip"/>
+  <listitem label="Raspberry Ripple" value="raspripple"/>
+  <listitem label="Squash Swirl" value="squash"/>
+</listbox>
+
+ +

El ejemplo fue cambiado para mostrar sólo 3 filas a la vez. Los valores se han añadido a los elementos de la lista. Las cajas de listas tienen algunas características adicionales, las cuales se describirán más adelante.

+ +

Cajas de lista multi-columna

+ +

Las cajas de listas tambien soportan multiples columnas. Cada celda puede tener un contenido arbitrario dentro, aunque generalmente sólo se usa texto. Cuando el usuario selecciona un elemento de la lista, la fila entera se selecciona. No tendrás una sola celda seleccionada.

+ +

Se usan dos campos para especificar las columnas en la caja de listas. El elemento listcols se usa para mantener la información de la columna, cada una de las cuales se especifica usando un elemento listcol . Necesitas un elemento listcol para cada columna en la caja de listas.

+ +

Las cajas de lista no poseen un equivalente al elemento rows de las grillas. De hecho, hay un equivalente, pero es creado y puesto en la caja de lista automáticamente. También está oculto para que no se sepa que está allí.

+ +

El elemento listcell (celda de lista) puede ser utilizado para cada celda en una fila. Si se quiere tener tres columnas, se necesita adicionar tres elementos listcell dentro de cada listitem. Para especificar el texto contenido en una celda debe colocarse dentro del elemento un atributo label. Para el simple caso donde hay una sola columna, también puede ponerse los atributos label directamente en los elementos listitem (ítem de lista) correspondientes y no utilizar elementos listcell, como se muestra en el siguente ejemplo.

+ +

(Cuando el usuario selecciona un item, toda la fila es seleccionada. No es posible seleccionar una celda individualmente.)

+ +

El siguiente ejemplo es de una caja de lista con dos columnas y tres filas:

+ +

Ejemplo 3

+ +
<listbox>
+ <listcols>
+   <listcol flex="1"/>
+   <listcol flex="2"/>
+ </listcols>
+ <listitem>
+   <listcell label="Jorge"/>
+   <listcell label="Pintor de casas"/>
+ </listitem>
+ <listitem>
+   <listcell label="María Elena"/>
+   <listcell label="Fabricante de velas"/>
+ </listitem>
+ <listitem>
+   <listcell label="Rogelio"/>
+   <listcell label="Matón"/>
+ </listitem>
+</listbox>
+
+ +

Esta caja de lista posee dos columnas, siendo la segunda el doble de flexible que la primera. Si se reduce el tamaño horizontalmente, las etiquetas en las celdas se recortarán automáticamente. Como con otros elementos, puede utilizarse el atributo crop en las celdas o en los ítems para controlar el recorte.

+ +

Filas de encabezado

+ +

Las cajas de lista también permiten la utilización de una fila especial, la fila encabezado. Es muy parecida a una fila regular excepto que se la muestra de manera distinta. Puede ser aprovechada para crear encabezados en las columnas. Se utilizan dos elementos.

+ +

El elemento cabeza de lista (listhead) se usa para las filas de encabezado, al igual que el elemento listitem se utiliza para filas comunes. Sin embargo la fila de encabezado no es una fila normal, por lo que si se usara un guión para obtener la primer fila en una caja de lista, la fila de encabezado no sería tenida en cuenta.

+ +

El elemento listheader (encabezado de lista) indica cada celda en la fila de encabezado. Para indicar el texto dentro de la celda de encabezado se utiliza el atributo label

+ +

Este sería el ejemplo anterior pero con una fila de encabezado:

+ +

Ejemplo 4

+ +
<listbox>
+ <listhead>
+   <listheader label="Nombre"/>
+   <listheader label="Ocupación"/>
+ </listhead>
+ <listcols>
+   <listcol flex="1"/>
+   <listcol flex="2"/>
+ </listcols>
+ <listitem>
+   <listcell label="Jorge"/>
+   <listcell label="Pintor de casas"/>
+ </listitem>
+ <listitem>
+   <listcell label="María Elena"/>
+   <listcell label="Fabricante de velas"/>
+ </listitem>
+ <listitem>
+   <listcell label="Rogelio"/>
+   <listcell label="Matón"/>
+ </listitem>
+</listbox>
+
+ +

En este ejemplo, el atributo flex se usa para hacer la columna flexible. Este atributo será descrito en una sección posterior, pero aqui permite que la columna rellene todo el espacio horizontal disponible. Puedes redimensionar la ventana para ver que la columna se estrecha cuando la ventana lo hace. Si cortas el tamaño horizontalmente, las etiquetas de las celdas se cortarán automáticamente usando una elipsis. Puedes usar el atributo crop en las celdas o elementos seleccionados con el valor none para deshablitar la elipsis.

+ +

Listas desplegables

+ +

Las listas desplegables se crean en HTML usando el elemento select . El usuario puede ver una sola elección en una caja de texto y hacer click en la flecha o algo similar como un botón pegado a la caja de texto para realizar una selección diferente. Las otras opciones aparecerán en una ventana emergente. XUL tiene un elemento [[XUL:Elemento#menulista|lista de menú}} que puede usarse para este proposito. Consiste en una caja de texto con un btón adjunto. El nombre se eligió porque muestra un menu emergente con las opciones en el.

+ +

Se necesitan tres elementos para describir una lista desplegable. El primero es el elemento menulist , que crea la caja de texto con el botón adjunto. El segundo, menupopup, crea la ventana de menu emergente que aparecerá cuando el botón sea pulsado. El tercero, menuitem, crea cada opción individual.

+ +

Su sintaxis se describe mejor con el siguiente ejemplo:

+ +

Ejemplo 5 Código Ver en funcionamiento

+ +
Image:inputs2.png
+ +
<menulist label="Bus">
+  <menupopup>
+    <menuitem label="Coche"/>
+    <menuitem label="Taxi"/>
+    <menuitem label="Bus" selected="true"/>
+    <menuitem label="Tren"/>
+  </menupopup>
+</menulist>
+
+ +

Esta lista de menu contiene cuatro opciones, una por cada elemento menuitem . Para mostrar las opciones, haz click en el botón de flecha en la lista de menu. Cuando se seleccione uno, este aparecerá como la opción en la lista de menu. El atributo selected se usa para indicar el valor que tendrá la selección por defecto.

+ +

Lista de menú editable

+ +

Por defecto, solo puedes seleccionar opciones de la lista. No puedes introducir tu propio texto tecleandolo dentro. Una variante del menulist permite editar el texto dentro del campo. Por ejemplo, el campo URL en el navegador tiene una lista desplegable para seleccionar URLs tecleadas anteriormente, pero puedes teclaearla tu mismo.

+ +

Para clear un menulist editable, añada el atributo editable como sigue: Ejemplo 6 Código Ver en funcionamiento

+ +
<menulist editable="true">
+  <menupopup>
+    <menuitem label="www.mozilla.org"/>
+    <menuitem label="www.xulplanet.com"/>
+    <menuitem label="www.dmoz.org"/>
+  </menupopup>
+</menulist>
+
+ +

El campo URL creado aqui tiene tres opciones predefinidas que el usuario puede seleccionar o puede introducir una propia escribiendo en el campo. El texto que el usuario introduzca no se añadirá como nueva opción. Porque el atributo label no se usa en este ejemplo, el valor por defecto será en blanco.

+ +
+

« AnteriorSiguiente »

+
+ +

Categorías

+ +

links interwikis

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html new file mode 100644 index 0000000000..e448d38424 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_asistente/index.html @@ -0,0 +1,138 @@ +--- +title: Crear un asistente +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_un_asistente +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Wizard +--- +

Muchas aplicaciones usan un asistente para ayudar al usuario a realizar tareas complicadas. XUL proporciona una forma de crear fácilmente un asistente.

+ +

El asistente

+ +

Un asistente es un tipo especial de diálogo que contiene una serie de páginas. Los botones de navegación entre páginas aparecen en la parte inferior del diálogo. Los asistentes se utilizan habitualmente para ayudar al usuario en la realización de tareas complejas. Cada página contiene una única cuestión o varias preguntas relacionadas. Después de la última página, se lleva a cabo la operación.

+ +

XUL proporciona un elemento wizard que permite crear asistentes. Los atributos colocados en el asistente se usan para controlar la navegación de éste. Al crear un asistente se usa la etiqueta wizard en lugar de la etiqueta window.

+ +

El contenido del elemento wizard incluye el contenido de cada página del asistente. Las páginas del asistente se crean mediante el elemento wizardpage. Puedes colocar cualquier contenido que desees dentro de cada wizardpage.

+ +
Ten en cuenta que actualmente los asistentes solo funcionan adecuadamente desde URLs chrome.
+ +

El asistente consta de varias secciones y, por supuesto, el diseño  del asistente puede variar según el sistema operativo de cada plataforma. El asistente se mostrará generalmente con el aspecto de la plataforma del usuario. El aspecto típico incluirá un título en la parte superior, un grupo de botones de navegación en la parte inferior y el contenido de la página en medio de ambos.

+ +

El título a lo largo de la parte superior se crea usando el atributo title, muy parecido al que podría usarse para una ventana normal. Los botones de navegación son creados automáticamente. 

+ +

Un ejemplo de asistente

+ +

Código Ver en funcionamiento

+ +
<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<wizard id="example-window" title="Select a Dog Wizard"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <wizardpage>
+    <description>
+      Esta asistente le ayudará a seleccionar el tipo de perro que más le conviene."
+    </description>
+    <label value="¿Por qué quiere un perro?"/>
+    <menulist>
+      <menupopup>
+        <menuitem label="Para que la gente se vaya"/>
+        <menuitem label="Para que asuste a un gato"/>
+        <menuitem label="Necesito un buen amigo"/>
+      </menupopup>
+    </menulist>
+  </wizardpage>
+
+  <wizardpage description="Detalles del perro">
+    <label value="Proporcione detalles adicionales sobre el perro que le gustaría:"/>
+    <radiogroup>
+      <caption label="Tamaño"/>
+      <radio value="small" label="Pequeño"/>
+      <radio value="large" label="Grande"/>
+    </radiogroup>
+    <radiogroup>
+      <caption label="Género"/>
+      <radio value="male" label="Macho"/>
+      <radio value="female" label="Hembra"/>
+    </radiogroup>
+  </wizardpage>
+
+</wizard>
+
+ +
+
Image:wizard1.jpg
+
+ +

El asistente tiene dos páginas, una que tiene un menú desplegable y la otra botones redondos. El asistente será formateado automáticamente, con un título en la parte de arriba y botones en la parte de abajo. El usuario puede navegar entre las páginas con los botones de 'Anterior' (Back) y 'Posterior' (Next). Estos botones se activan y desactivan ellos mismos cuando es necesario. En la última página, además de estos anteriores, aparecerá el botón de Terminar/Finalizar. Todo esto es automático, no hay que hacer nada para manipular las páginas.

+ +

El atributo description puede ser opcionalmente colocado en un elemento wizardpage a fin de proporcionar un subtítulo para esa página. En el ejemplo anterior, está puesto en la segunda página, pero no en la primera.

+ +

Gestión de los cambios en las página

+ +

Generalmente, desearás que se haga algo una vez se presione el botón Finalizar. Se puede definir un atributo onwizardfinish, dentro del elemento wizard para que sea así. Colócalo en un script que realice cualquier tarea que desees y que después devuelva 'true'. Este script se puede usar para guardar la información que incluye el usuario durante el asistente. Por ejemplo:

+ +
<wizard id="example-window" title="Select a Dog Wizard"
+  onwizardfinish="return saveDogInfo();"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ +

Cuando el usuario haga clic sobre el botón Finalizar, es llamada la función saveDogInfo(), la cual se definirá en un archivo de script para guardar la información que se ha incluido. Si la función devuelve 'true', el asistente se cierra. Si devuelve 'false', entonces el asistente no se cerrará, lo que suele ocurrir, por ejemplo, si la función saveDogInfo() encuentra una entrada que no es válida.

+ +

Existen otros atributos relacionados onwizardback, onwizardnext y onwizardcancel, que son llamados cuando los botones Volver, Siguiente y Cancelar son presionados respectivamente. Estas funciones son llamadas sin considerar qué página se está mostrando actualmente.

+ +

Para llamar un código diferente dependiendo de qué página se encuentra el usuario, se utilizan los atributos onpagerewound o onpageadvanced en un elemento wizardpage. Funcionan de manera parecida a las otras funciones con la excepción que se puede usar código diferente en cada página. Esto te permite validar la información incluida en cada página antes de que continúe el usuario.

+ +

Un tercer método consiste en usar los atributos onpagehide y onpageshow en el elemento wizardpage. Estos se llamarán cuando la página se oculte o se muestre, independientemente de qué botón se pulse (excepto cuando se presiona Cancel: tienes que usar onwizardcancel para comprobarlo).

+ +

Estos tres métodos deberían proporcionar suficiente flexibilidad para gestionar la navegación tanto como necesites. La siguiente tabla es un resumen  de las funciones de los atributos que se llaman cuando el usuario pulsa Siguiente ('Next'), en el orden en que son comprobados. En el momento en que uno devuelva false, se cancelará la navegación.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoEtiquetaLlamada
pagehidewizardpageLlamada a la página que el usuario esta dejando.
pageadvancedwizardpageLlamada a la página que el usuario esta dejando.
wizardnextwizardLlamado en el asitente.
pageshowwizardpageLlamada a la página que el usuario esta entrando.
+ +

Un proceso similar ocurre para el botón Volver.

+ +
Siempre que trates de usar una función en el evento anterior, como con pageadvanced, deberías usar +

return funcName() en lugar de solo la llamada funcName()o no funcionará como se espera, por ejemplo

+ +
 <wizardpage pageadvanced='return funcName()'></wizardpage></code>
+
+
+ +


+

+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html new file mode 100644 index 0000000000..031f186435 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_un_instalador/index.html @@ -0,0 +1,95 @@ +--- +title: Creando un instalador +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_un_instalador +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_an_Installer +--- +

 

+ +

Esta sección describe como empaquetar una aplicación de XUL en un instalador.

+ +

Paquetes de XPInstall

+ +

Mozilla proporciona un mecanismo que se puede utilizar para empaquetar ventanas de XUL, scripts, skins y otros archivos en un solo instalador. Usted puede colocar este instalador en alguna parte para que los usuarios la puedan descargar. Un script simple puede ser usado para tener descargado el paquete e instalarlo. Este mecanismo se llama XPInstall (plataforma cruzada de instalación).

+ +

Los instaladores de XPInstall se empaquetan en archivos JAR. Dentro del archivo JAR, usted puede agregar todos los archivos que usted desea haber instalado. Además, los instaladores deben contener un script de instalación (un archivo llamado install.js) que se pueda utilizar para escribir el proceso de la instalación. Este script tiene acceso a varias funciones de instalación que se pueden utilizar para instalar archivos y componentes.

+ +

Los instaladores del archivo JAR tienen típicamente la extensión .xpi (se pronuncia zippy) para distinguirlos de otros archivos. Los instaladores serán utilizados generalmente para instalar los componentes de Mozilla tales como skins nuevos, plugins y nuevos paquetes.Texto de Código

+ +

Hay varios pasos implicados en abrir un instalador e instalar los componentes. Éstos se describen gradualmente abajo.

+ +
    +
  1. Crea una pagina web desde la cual el usuario pueda descargar el software que se instalará. Esta página contendrá un ‘disparador de la instalación’ que es una pequeña parte del script que abre la instalación.
    2. +
  2. Se le presenta al usuario un diálogo indicando que el paquete está siendo instalado. Es posible que el ‘disparador de la instalación’ abra múltiples instaladores. En este caso, serán presentados en una lista. El usuario puede elegir continuar o cancelar.
    3. +
  3. Si el usuario elige continuar, se descargará el instalador del archivo XPI. Una barra de progreso se exhibe al usuario durante este proceso.
    4. +
  4. El archivo install.js es extraído del archivo de la instalación y se ejecutara. Este script abrirá las funciones del instalador que indicarán qué partes del archivo deben ser instalados.
    5. +
  5. Una vez que el script esté completo, el nuevo paquete ya habrá sido instalado. Si los paquetes múltiples están siendo instalados, sus scripts funcionarán en secuencia.
    6. +
+ +

Disparadores (triggers) de instalación

+ +

Según lo indicado arriba, el proceso de la instalación es empezado por un ‘disparador de instalación’. Esto implica el uso del objeto global especial InstallTrigger. Este contiene varios métodos que se pueden utilizar para comenzar una instalación. Usted puede utilizar este objeto en el contenido local o remoto, significando que es conveniente para una descarga directa del sitio web.

+ +

Vamos a crear un ejemplo de un disparador de instalación. Esto involucra el uso de la función InstallTrigger.install. Esta función tiene dos parámetros, el primero es una lista de los paquetes a instalar, y el segundo es una función de rellamada que será usada cuando la instalación se complete. Aquí está un ejemplo:

+ +
function doneFn ( name , result ){
+  alert("The package " + name + " was installed with a result of " + result);}
+
+var xpi = new Object();
+xpi["Calendar"] = "calendar.xpi";
+InstallTrigger.install(xpi,doneFn);
+
+ +

Primero, definimos una función de rellamada doneFn que será ejecutada cuando la instalación se complete. Usted puede nombrar la función como prefiera. Esta función tiene dos parámetros. El primero es el nombre del paquete que acaba de ser instalado. Esto es importante si usted está instalando múltiples componentes. El segundo es un código de resultado. Si el resultado es 0, la instalación terminó con éxito. Si el resultado no es cero, quiere decir que hubo un error y el valor es el código del error. La función doneFn solo mostrará un mensaje de alerta al usuario.

+ +

Después, creamos un vector xpi que contendrá el nombre (calendario) y URL (calendar.xpi) del instalador. Usted puede agregar una línea similar para cada paquete que desee instalar. Finalmente, ejecutamos la función de instalación.

+ +

Cuando esta sección del script se ejecute, el archivo calendar.xpi será instalado.

+ +
+

Vamos intentar esto con el diálogo de búsqueda de archivos.

+ +
function doneFn ( name , result ){
+  if (result) alert("An error occured: " + result);
+}
+
+var xpi = new Object();
+xpi["Find Files"] = "findfile.xpi";
+InstallTrigger.install(xpi,doneFn);
+
+
+ +

El archivo de XPI

+ +

Se requiere que el archivo XPI contenga un archivo llamado install.js que es un archivo JavaScript que se ejecuta durante la instalación. Los archivos restantes son los archivos que se instalarán. Estos archivos típicamente están colocados dentro de un directorio dentro del archivo pero no es obligatorio. Los archivos cromo (chrome), deben estar estructurados como el directorio chrome.

+ +

A menudo, los únicos archivos colocados en un archivo XPI serán el script de instalación (install.js) y un archivo JAR. Este archivo JAR contiene todos los archivos usados por la aplicación. Los componentes proporcionados con Mozilla se almacenan de esta manera.

+ +

Debido a que el archivo XPI es un archivo tipo ZIP, usted puede crear y agregar archivos usando una aplicación que manipule estos archivos.

+ +

Para el diálogo de búsqueda de archivos, crearemos una estructura en el archivo como el siguiente:

+ +
+
install.js
+findfile
+  content
+    contents.rdf
+    findfile.xul
+    findfile.js
+  skin
+    contents.rdf
+    findfile.css
+  locale
+    contents.rdf
+    findfile.dtd
+
+
+ +

Se ha agregado un directorio para cada parte del paquete, del contenido, del skin y del ‘locale’. Los archivos contents.rdf también se han agregado porque serán necesarios para registrar los archivos 'chrome'.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html new file mode 100644 index 0000000000..d751c77611 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/creando_una_ventana/index.html @@ -0,0 +1,105 @@ +--- +title: Creando una ventana +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Creando_una_ventana +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window +--- +
+

« AnteriorSiguiente »

+
+ +

Creando un archivo XUL

+ +

Un archivo XUL puede tener cualquier nombre, pero debería tener una extensión .xul. El archivo XUL más simple tiene la siguiente estructura:

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<!-- Otros elementos irán aquí -->
+</window>
+
+ +

Esta ventana no hará nada, ya que no contiene ningún elemento UI (Interfaz de Usuario), éstos serán añadidos en la siguiente sección. A continuación veremos línea por línea el código de arriba:

+ +
    +
  1. <?xml version="1.0"?>
    + Esta línea simplemente define que éste es un archivo XML, normalmente deberíamos añadir esta línea al inicio de cada fichero xul, al igual que pondríamos la etiqueta HTML al principio de un archivo HTML.
    2. +
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    + Esta línea se usa para especificar la hoja de estilos a utilizar por el archivo, y es la sintaxis que los ficheros XML utilizan para importar hojas de estilo. En este caso, nosotros importaremos los estilos ubicados en el apartado global de un paquete de temas. No especificaremos ningún fichero así Mozilla determinará que ficheros del directorio utilizar. En este caso, el todo-importante fichero global.css es seleccionado. Este fichero contiene todas las declaraciones por defecto para todos los elementos XUL. Como XML no sabe cuantos elementos debe visualizar, el fichero lo indica. Generalmente, deberemos poner esta línea en la parte superior de cada archivo XUL. También podemos importar otra hoja de estilos utilizando una sintaxis parecida. Normalmente importamos la hoja de estilo global desde dentro de nuestro archivo de estilos.
    3. +
  3. <window
    + Esta línea declara que estamos describiendo una window. Cada ventana de la interfaz de usuario es descrita en un fichero por separado. Esta etiqueta es parecida a la etiqueta BODY en HTML que engloba todo el contenido. Los atributos de la ventana serán colocados aquí, en este caso hay cuatro. En el ejemplo cada atributo es colocado en una línea distinta pero esto no debe ser hacer necesariamente.
    4. +
  4. id="findfile-window"
    + El atributo id es usado como un identificador, de esta manera la ventana puede ser llamada desde scripts. Usualmente colocarás el atributo id a todos los elementos. El nombre lo eliges tú.
    5. +
  5. title="Find Files"
    + Este atributo muestra el texto que aparecerá en la barra de títulos cuando se muestre la ventana. En el ejemplo aparecerá "Find Files".
    6. +
  6. orient="horizontal"
    + Este atributo indica el orden de los ítems dentro de la ventana. El valor horizontal indica que los ítems serán colocados a través de la ventana. También puedes usar el valor vertical que ordenará los ítems en una columna. Este es el valor por defecto, asi que tal vez desees no utilizar este atributo si deseas mostrar los datos en columnas.
    7. +
  7. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    + Esta línea declara el nombre para XUL, que deberías colocar dentro de la etiqueta window para indicar que todo eso es XUL. Esta dirección no será descargada, Mozilla la reconocerá internamente.
    8. +
  8. <!-- Otros elementos van aquí -->
    + Escribe en este bloque otros elementos (botones, menúes, y otros componentes de interfaz) que aparecen en la ventana. Pondremos algo de eso en el siguiente tomo de la sección..
    9. +
  9. </window>
    + Finalmente, debemos cerrar la etiqueta al final del fichero.
    10. +
+ +

Abriendo una ventana

+ +

Al fin de abrir una ventana XUL, varios métodos son aplicables. Si se está solo en el estado del desarrollo, se puede escribir la URL (empezando con chrome:, file: o cualquier otro tipo de URL) en la barra de dirección de Mozilla. También se puede hacer doble clic sobre el archivo en la pantalla 'Abrir archivo', suponiendo que los archivos XUL están asociados a Mozilla. La ventana XUL aparecerá en la ventana del navegador en lugar de en una nueva ventana, pero suele ser suficiente durante los principios del desarrollo.

+ +

El camino correcto, naturalmente, es de abrir la ventana utilizando a JavaScript. No es necesaria una sintaxis nueva se puede usar la función window.open() igual que para los documentos HTML. Aún así, una opción adicional, llamada 'chrome' es necesaria para indicar al navegador que el documento a abrir es chrome. Ésta se abrirá sin barra de herramientas, ni menúes o cualquier otra cosa de las que suele tener de normal un navegador. La sintaxis se describe a continuación:

+ +
window.open(url,windowname,flags);
+
+donde el argumento 'flags' contiene "chrome" como en este ejemplo:
+
+window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
+
+ +
+
Nuestro ejemplo de búsqueda
+ +

Empezaremos por crear el archivo básico para el dialogo de búsqueda. Lo llamaremos 'findfile.xul' y lo pondremos en el directorio especificado en el archivo 'findfile.manifest' (el cual hemos creado en la sección anterior). Ponerle la plantilla mostrada arriba de esta página y guardarlo.

+
+ +

Podemos usar el parámetro en línea de comando '-chrome' para especificar que archivo XUL tendrá que abrir Mozilla al empezar. Si no se ha especificado, la ventana por defecto será abierta (habitualmente la ventana del navegador). Por ejemplo, podríamos abrir el dialogo de búsqueda con una de las siguientes órdenes:

+ +
mozilla -chrome chrome://findfile/content/findfile.xul
+
+mozilla -chrome resource:/chrome/findfile/content/findfile.xul
+
+ +

Si utilizamos esta orden en línea (suponiendo que se pueda hacer en nuestra plataforma), el dialogo de búsqueda de archivo será abierto por defecto en lugar de la ventana de Mozilla. Pero como no hemos puesto ningún elemento gráfico, no la veremos. Colocaremos algunos elementos en la sección siguiente.

+ +

Para ver aún así el efecto, lo siguiente abrirá la ventana de marcadores:

+ +
Para Mozilla
+mozilla -chrome chrome://communicator/content/bookma...rksManager.xul
+
+Para Firefox
+firefox -chrome chrome://browser/content/bookmarks/b...rksManager.xul
+
+ +

El argumento '-chrome' no da al archivo ningún privilegio adicional. En su lugar, causa que el archivo especificado se abra como una ventana en el nivel superior sin ningun atributo del browser chrome, como el campo de direcciones o menus. Solo las URLs chrome tienen privilegios adicionales.

+ +
Para escribir y ver inmediatamente los resultados en Mozilla, puede probar con este editor XUL.
+ +

Problemas

+ + + +
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_\303\241rbol/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_\303\241rbol/index.html" new file mode 100644 index 0000000000..060dd9e5f9 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_de_vistas_de_un_\303\241rbol/index.html" @@ -0,0 +1,108 @@ +--- +title: Detalles de Vistas de un árbol +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Detalles_de_Vistas_de_un_árbol +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_View_Details +--- +

 

+

Además del contenido estático y RDF, los árboles pueden obtener su contenido de una vista personalizada.

+

Creando una vista detallada o personalizada

+

Hasta ahora hemos visto dos formas de definir el contenido de un árbol. Podemos poner filas y celdas estáticas dentro de un árbol o usar una fuente de datos RDF. El primer método funciona bíen siempre y cuando solo se traten de unos pocos datos. Usar una fuente de datos es adecuado cuando hay una disponible, ya sea una proporcionada con Mozilla o una creada por nosotros mismos. En algunos casos, podemos querer guardar datos en algún otro formato o realizar operaciones en ellos. XUL provee un tercer método, el cual requiere la creación de una vista personalizada con un guión.

+

Este método puede ser usado para contener datos para cientos o miles de filas, que el árbol puede mostrar instantaneamente. Para ello implementamos un árbol como hasta ahora pero dejamos el elemento treechildren vacio. El siguiente ejemplo muestra como hacerlo:

+
<tree id="miArbol" flex="1">
+  <treecols>
+    <treecol id="colNombre" label="Nombre" flex="1"/>
+    <treecol id="colFecha" label="Fecha" flex="1"/>
+  </treecols>
+  <treechildren/>
+</tree>
+
+

Para asignar datos y que sean mostrados en el árbol, debemos crear un objecto guión que será usado para indicar que valor toma cada celda, el número total de filas y alguna otra información adicional. El objeto de guión estará asignado al árbol. El árbol llamará a los métodos del objeto para obtener la información que necesita mostrar.

+

El objeto guión, llamado vista de árbol, soporta más o menos treinta métodos que puedes implementar para suministrar información acerca de los contenidos del árbol y su apariencia, pero solo tendremos que implementar una pequeña parte de ellos. Algunos métodos que deberemos implementar son:

+
   * rowCount
+
+

Esta propiedad deberá contener el número de líneas que queremos mostrar en el árbol.

+
   * getCellText( fila, columna )
+
+

Este método devuelve el contenido de una celda, especificada mediante los paramentros ‘fila’ y ‘columna’. Será llamada para mostrar los datos de cada celda. Las filas pasadas como paramentro es un número contando desde 0. Las columnas en cambio son los valores del atributo id definido en las columnas del árbol.

+
   * setTree( arbol )
+
+

Este método es llamado una sola vez para vincular el elemento árbol con la vista. Esto nos permite utilizar la misma vista con distintos árboles.

+

Aquí mostramos un ejemplo de como definir el objeto, el cual puede tener el nombre que deseemos.

+
var vistaArbol = {
+    rowCount : 10000,
+    getCellText : function(fila, columna) {
+      if (columna=="colNombre") return "Fila "+row;
+      else return "18 de Febrero";
+    },
+    setTree: function(arbol){ this.treebox=arbol; },
+    isContainer: function(fila){ return false; },
+    isSeparator: function(fila){ return false; },
+    isSorted: function(fila){ return false; },
+    getLevel: function(fila){ return 0; },
+    getImageSrc: function(fila,columna){ return null; },
+    getRowProperties: function(fila,props){},
+    getCellProperties: function(fila,columna,props){},
+    getColumnProperties: function(idColumna,columna,props){}
+};
+
+

Las funciones de este ejemplo que no han sido descritas anteriormente, no necesitan realizar ninguna acción, pero si deben estar declaradas, ya que el árbol las llamará para intentar conseguir información adicional.

+

Este ejemplo puede usarse para mostrar un arbol con 10.000 filas. El contenido de las celdas en la primera columna contendrán el texto ‘Fila X’, donde X es el número de fila. En la segunda columna todas las celdas contendrán el texto con la fecha ‘18 de Febrero’. La condición if de la función getCellText() compara el parametro columna con el texto ‘colNombre’. Este texto corresponde al id de la primera columna en la definición del árbol del ejemplo anterior. Por supuesto que este ejemplo es muy simple, en realidad deberíamos tener datos mucho más complejos en cada celda.

+

El último paso es asociar el objeto vista con el árbol. El árbol tiene una propiedad llamada view, la cual puede ser asignada al objeto vista declarado anteriormente. Podremos asignarle un valor a esta propiedad en cualquier momento para poner o cambiar una vista.

+
function ponerVista() {
+    document.getElementById('miArbol').view = vistaArbol;
+}
+
+

A continuación se incluye el ejemplo completo. Un guión incrustado ha sido usado aquí para simplificar el ejemplo. No obstante, normalmente pondremos los guiones en ficheros separados.

+

Ejemplo 7.6.1

+
<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window title="Ejemplo de árbol" id="ventana-arbol"
+   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+   onload="ponerVista();">
+
+<script>
+var vistaArbol = {
+    rowCount : 10000,
+    getCellText : function(fila, columna) {
+      if (columna=="colNombre") return "Fila "+row;
+      else return "18 de Febrero";
+    },
+    setTree: function(arbol){ this.treebox=arbol; },
+    isContainer: function(fila){ return false; },
+    isSeparator: function(fila){ return false; },
+    isSorted: function(fila){ return false; },
+    getLevel: function(fila){ return 0; },
+    getImageSrc: function(fila,columna){ return null; },
+    getRowProperties: function(fila,props){},
+    getCellProperties: function(fila,columna,props){},
+    getColumnProperties: function(idColumna,columna,props){}
+};
+
+function ponerVista() {
+    document.getElementById('miArbol').view = vistaArbol;
+}
+</script>
+
+<tree id="miArbol" flex="1">
+  <treecols>
+    <treecol id="colNombre" label="Nombre" flex="1"/>
+    <treecol id="colFecha" label="Fecha" flex="1"/>
+  </treecols>
+  <treechildren/>
+</tree>
+
+</window>
+
+

En la imagen, podemos ver dos columnas, cada una con datos generados por la función getCellText(). La función ponerVista() ha sido llamada en el gestor de eventos onload de la ventana. Tambíen hubieramos podido definir la vista más tarde si hubieramos querido. Podemos cambiar la vista en cualquier momento.

+

Cabe especial mención que la función getCellText solo es llamada cuando es necesario para mostrar los contenidos. En el ejemplo anterior de 10.000 filas, getCellText solo es llamada para las celdas que se están mostrando actualmente. Cuando el usuario se desplaze por el árbol se irá llamando para las celdas que se pongan a la vista. Esto hace que el árbol sea mucho más eficiente.

+

Tambíen podemos usar el objeto vista para árboles sin una vista personalizada. Por ejemplo, árboles construidos desde datos RDF tendrán un objeto vista que cogerá información de la fuente de datos RDF. Podemos usar el objeto vista para obtener información acerca de los datos mostrados por el árbol.

+

El interfaz nsiTreeView (inglés) lista todas la propiedades y métodos que podemos implementar para las vistas de árbol.

+

Siguiente, descubriremos como usar los comandos.

+

NdT. según un comentario del tutorial del 5/3/05, el parametro Columna de la función getCellText() ya no es un string en las últimas versiones, sino un nsITreeColumn, el cual podemos obtener a través de columns.getNamedColumn(string)

+

Categorías

+

links interwikis

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html new file mode 100644 index 0000000000..d97360678c --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/detalles_del_modelo_de_caja/index.html @@ -0,0 +1,89 @@ +--- +title: Detalles del modelo de caja +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Detalles_del_modelo_de_caja +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Box_Model_Details +--- +

 

+

Hemos visto gran cantidad de características del modelo de caja. Aquí descubriremos unos cuantos detalles más con algunos ejemplos.

+

Más detalles del esquema

+

Las propiedades de estilo como min-width y max-height pueden ser aplicadas a cualquier elemento. Las hemos añadido a botones y cajas de texto, también podemos añadirlas a espaciadores o cajas. Además, el atributo flex puede ser aplicado a cualquier elemento.

+

Ejemplo

+
<hbox flex="1">
+  <button label="Izquierda" style="min-width: 100px;" flex="1"/>
+  <spacer flex="1"/>
+  <button label="Derecha" style="min-width: 100px;" flex="1"/>
+</hbox>
+
+

En el ejemplo anterior, los tres elementos se redimensionarán solos porque todos ellos son flexibles. Los dos botones indican un ancho mínimo de 100 píxeles, su tamaño nunca será inferior al indicado pero podrán crecer a mayor altura. Aquí la ventana debería aparecer con unos 200 píxeles de ancho, eso es suficiente para los dos botones. Ya que estos tres elementos son flexibles, pero no requieren un mayor lugar, la flexibilidad no agregará espacio extra.

+

Image:boxdet1.jpg

+

Como se muestra en la imagen anterior, hay dos botones que se expandirán verticalmente hasta acomodarse a su contenedor, que en éste caso es un hbox. El atributo align controla este comportamiento en una caja horizontal. También puede prevenirse esta expansión insertando una altura máxima en los elementos o, mejor aún, en la misma caja. Si una caja posee una altura máxima, los elementos dentro de la misma serán ceñidos a ella. Sin embargo, el problema con esto es que se deberá conocer de antemano qué tan grande será el elemento. Lo siguiente muestra el ejemplo anterior con un atributo align establecido.

+

Ejemplo

+
<hbox flex="1" align="top">
+  <button label="Izquierda" style="min-width: 100px;" flex="1"/>
+  <spacer flex="1"/>
+  <button label="Derecha" style="min-width: 100px;" flex="1"/>
+</hbox>
+
+

Para lograr esquemas complicados, generalmente se necesitará añadir cajas anidadas, especificar tamaños mínimos y máximos en algunos elementos, y convertir a ciertos elementos en flexibles. La mejor internase es la que puede ser exhibida en varios tamaños sin problemas. El modelo de caja podría ser difícil de entender sin antes realizar varias cosas por uno mismo.

+

A continuación una reseña de ambos tipos de cajas:

+

Cajas horizontales

+
    +
  1. Sitúan sus elementos uno después del otro horizontalmente.
    2. +
  2. Los elementos flexibles se flexionan horizontalmente.
    3. +
  3. El empaque controla la colocación horizontal de los elementos hijos.
    4. +
  4. La alineación regula cómo la fila de elementos es alineada verticalmente.
    5. +
+

Cajas verticales

+
    +
  1. Ponen sus elementos verticalmente en una columna.
    2. +
  2. Los elementos flexibles se flexionan verticalmente.
    3. +
  3. El empaque controla la ubicación vertical de los elementos hijos.
    4. +
  4. La alineación regula cómo se alinea horizontalmente la columna de elementos hijos.
    5. +
+

Pueden ponerse cajas en cualquier parte de un archivo XUL, incluso dentro de un elemento HTML como una tabla; sin embargo, el esquema estará parcialmente controlado por el elemento HTML. Esto quiere decir que el flex podría no funcionar exactamente como se desee. Recuerde que la flexibilidad solo tiene significado para elementos que se encuentran directamente dentro de una caja o de algún elemento que sea un tipo de caja.

+

Ejemplos

+

1. Utilización de espaciadores

+
<hbox>
+  <button label="Uno"/>
+  <spacer style="width: 5px"/>
+  <button label="Dos"/>
+</hbox>
+
+

Aquí se utiliza un espaciador como separador entre dos botones, fijándole explícitamente un ancho de 5 píxeles. También podrían establecerse márgenes (usando la propiedad CSS margin).

+

Here, a spacer is used as a separator between the two buttons, by setting an explicit width of 5 pixels. You could also set margins (using the CSS margin property).

+

2. Centrado de botones

+
<hbox pack="center" align="center" flex="1">
+  <button label="¡Mírame!"/>
+  <button label="¡Presióname!"/>
+</hbox>
+
+

Este ejemplo contiene una caja horizontal flexible con dos botones en ella. La caja posee el atributo pack que se utiliza para centrar los botones horizontalmente. El atributo align alinea los botones verticalmente. El resultado es que los botones estarán centrados en la caja en ambas direcciones. Este ejemplo también funcionará con una caja vertical, aunque el segundo botón estará debajo del primero en lugar de a su lado.

+

3. Una ventana de diálogo “Buscar texto�?

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window id="buscartexto" title="Buscar Texto" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <vbox flex="3">
+    <label control="t1" value="Texto a buscar:"/>
+    <textbox id="t1" style="min-width: 100px;" flex="1"/>
+  </vbox>
+
+  <vbox style="min-width: 150px;" flex="1" align="start">
+    <checkbox id="c1" label="Ignorar mayúsculas/minúsculas"/>
+    <spacer flex="1" style="max-height: 30px;"/>
+    <button label="Buscar"/>
+  </vbox>
+
+</window>
+
+

Aquí son creadas dos cajas verticales, una para la caja de texto y la otra para la casilla de verificación y el botón. La caja izquierda posee una flexibilidad que es tres veces mayor que la caja derecha así siempre recibirá el triple de espacio extra cuando se incremente el tamaño de la ventana. A la caja derecha se le impone un ancho mínimo de 150 píxeles.

+

La caja de texto es flexible así podrá redimensionarse cuando la ventana lo haga, también se le ha impuesto un ancho mínimo de 100 píxeles. La casilla de verificación aparece a la derecha junto con su etiqueta. Justo debajo de esta caja hay un espaciador, el mismo crecerá y se reducirá pero sin exceder los 30 píxeles. El resultado es que la casilla de verificación y el botón de búsqueda estarán separados uno del otro por un espacio nunca mayor a 30 píxeles.

+

La segunda caja posee un valor de alineación start, esto causa que los elementos hijos sean alineados en el borde izquierdo. Si esto fuera especificado, el valor por omisión sería stretch, lo que haría que los elementos se estiren horizontalmente. Como no queremos que el botón de búsqueda cambie su tamaño necesitamos especificar una alineación. Image:boxdet-ex3.jpg

+

A continuación aprenderemos sobre un tipo da caja más especializado, la caja de grupo.

+

Categorías

+

links interwikis

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html new file mode 100644 index 0000000000..729af7c557 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/divisores/index.html @@ -0,0 +1,136 @@ +--- +title: Divisores +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Divisores +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Splitters +--- +

Ahora podemos ver como añadir divisores/separadores a una ventana.

+ +

División de una caja

+ +

Hay momentos en los cuales se necesita tener dos secciones en la ventana donde el usuario pueda dimensionar las partes. Un ejemplo es la ventana del navegador de Mozilla, donde se puede cambiar el tamaño del panel lateral desplazando la línea de intersección de los cuadros. También se puede esconder, picando la cruz del panel.

+ +

El elemento separador

+ +

Ésta funcionalidad es cumplida utilizando un elemento llamado un splitter. Este elemento crea una barra fina entre los dos cuadros, lo cual permite dimensionar estos. Se puede poner un separador donde se quiera o necesite para permitir dimensionar los elementos situados antes o después de él en una misma caja.

+ +

Cuando un separador se coloca en una caja horizontal, permite dimensionar horizontalmente. Si se coloca en una caja vertical, permite dimensionar verticalmente.

+ +

La sintaxis de un separador es la siguiente:

+ +
<splitter
+    id="identifier"
+    state="open"
+    collapse="before"
+    resizebefore="closest"
+    resizeafter="closest">
+
+ +

Los atributos son los que siguientes:

+ +
+
id
+
El identificador único de este separador.
+
+ +
+
state
+
Indica el estado del separador. Se pone en open, que es la opción por defecto, si se quiere que el panel dimensionable esté inicialmente abierto o en collapsed para que uno de los paneles sea completamente reducido y que el otro ocupe (colapse) todo el espacio.
+
+ +
+
collapse
+
Indica de que lado el panel debe reducirse cuando el separador es agarrado o iniciado en estado de colapse. Se definirá en before para designar elemento anterior al separador y en after para el elemento posterior. Poniéndolo en none, lo cual es la opción por defecto, el separador al ser agarrado no reducirá los paneles.
+
+ +
+
resizebefore
+
Cuando un separador es desplazado, los elementos a su izquierda (o encima) cambian de dimensiones. Éste atributo indica cual de los elementos puede dimensionarse. Para que el elemento inmediatamente a la izquierda del separador sea dimensionado, se definirá en closest (el valor por defecto) y en farthest para que sea el elemento más lejos a la izquierda (el primer elemento en la caja) el que sea dimensionado.
+
+ +
+
resizeafter
+
Cuando un separador es desplazado, los elementos a su derecha (o debajo) cambian de dimensiones. Éste atributo indica cual de los elementos puede dimensionarse. Para que el elemento inmediatamente a su derecha sea dimensionado, se definirá en closest (el valor por defecto) y en farthest para que sea el elemento más lejos a derecha (el último elemento en la caja) el que sea dimensionado. Éste atributo también se puede definir en grow, en este caso los elementos a su derecha no cambiarán de tamaño al mover el separador, pero si la caja entera.
+
+ +

Si se pone el atributo collapse, se añadirá también el elemento grippy dentro del splitter para permitir que el usuario pueda utilizar el separador.

+ +

Ejemplo con separador

+ +

Aquí un ejemplo que puede ayudar:

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<vbox flex="1">
+  <iframe id="content-1" width="60" height="20" src="w1.html"/>
+  <splitter collapse="before" resizeafter="farthest">
+    <grippy/>
+  </splitter>
+  <iframe id="content-2" width="60" height="20" src="w2.html"/>
+  <iframe id="content-3" width="60" height="20" src="w3.html"/>
+  <iframe id="content-4" width="60" height="20" src="w4.html"/>
+</vbox>
+
+ +
Image:splitter-ex1.jpg
+ +

Aquí, cuatro marcos han sido creados y un separador colocado entre el primero y el segundo. El atributo de colapso se ha definido en el valor before, para que si el separador es agarrado, el primer cuadro desaparezca y que el divisor y los marcos restantes se desplacen a la izquierda. El punto del cursor para mover el separador es centrado en relación a él-mismo.

+ +

Al separador se le ha dado un valor resizeafter de farthest. Ésto hace que cuando el separador es movido, el elemento más lejos a su derecha cambiará de tamaño, en este caso el cuadro 4.

+ +

A value has not been specified for resizebefore so it will default to a value of closest. In this case, there is only one frame before the splitter, so frame 1 will change size.

+ +

Frames 2 and 3 will only change size if you drag the splitter far enough to the right that frame 4 has reached its minimum size.

+ +
Image:splitter-ex2.jpg
+ +

This image shows the 4 panels with the splitter in a collapsed state.

+ +
Image:splitter-ex3.jpg
+ +

This image shows the 4 panels with the splitter resized to the right. Notice how the middle two panels have not changed size. Only panel 1 and panel 4 have changed size. You can just see part of the fourth panel. If you continue to drag the splitter to the right, the other two panels will shrink.

+ +

You can use the style properties such as min-width, max-height on the iframes to specify minimum or maximum widths or heights in the box. If you do, the splitter will detect this and not allow the user to drag the splitter past the minimum and maximum sizes.

+ +

For example, if you specified a minimum width of 30 pixels on panel 4 above, it would not shrink below that size. The other two panels would have to shrink. If you set the minimum width of panel 1 to 50 pixels, you would only be able to drag the splitter 10 pixels to the left (as it starts at 60 pixels wide). You can still collapse the splitter however.

+ +

You can also place more than one splitter in a box if you want, in which case you could collapse different parts of it. Similarly, you do not have to collapse just iframes. Any element can be collapsed.

+ +

Nuestro ejemplo de búsqueda

+ +
+

Let's see what the find file dialog looks like with a splitter in it. One possibility would be to add the results of the search in the dialog. We'll add an area in-between the search criteria and the buttons along the bottom. A splitter will allow you to collapse, or hide, the search results.

+ +
</tabbox>
+
+ <iframe src="results.html"/>
+ <splitter resizeafter="grow"/>
+
+ <hbox>
+
+ +

Here, a splitter and an iframe have been added to the dialog. We don't need the spacer after the tabbox any more so we can remove it. The content of the frame is contained in a file called 'results.html'. Create this file and put whatever you want in it for now. The iframe will be replaced más tarde with a results list when we know how to create it. For now, it serves to demonstrate the splitter.

+ +

The splitter has been set to a collapse value of before meaning that the element just before the splitter will collapse. Here, it is the iframe. As the images below show, when the grippy is clicked, the iframe is collapsed and the buttons shuffle up.

+ +

The resizeafter attribute has been set to grow so that the elements after the splitter push themselves down when the splitter is dragged down. This results in the content of the frame growing to any size. It should be noted that the window does not resize itself automatically. You'll also notice that this is a horizontal splitter because it has been placed in a vertical box.

+ +

Estado normal:

+ +

Image:splitter1.png

+ +

Estado colapsado:

+ +

Image:splitter2.png

+ +

Nuestro ejemplo: Código Ver en funcionamiento

+
+ +


+

+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/di\303\241logos_abrir_y_guardar/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/di\303\241logos_abrir_y_guardar/index.html" new file mode 100644 index 0000000000..ee9354c54b --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/di\303\241logos_abrir_y_guardar/index.html" @@ -0,0 +1,85 @@ +--- +title: Diálogos Abrir y Guardar +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Diálogos_Abrir_y_Guardar +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Open_and_Save_Dialogs +--- +

Un tipo común de diálogo es aquello donde el usuario puede elegir un archivo para abrirlo o guardarlo.

+ +

Selectores de archivos

+ +

Un selector de archivos es un diálogo que permite al usuario seleccionar un archivo. Generalmente se utiliza para las órdenes de menú: Abrir y Guardar, pero se pueden utilizar en cualquier lugar en que el usuario necesita elegir un archivo. Para implementar el selector de archivos se utiliza la interfaz nsIFilePicker de XPCOM.

+ +

Se puede usar el selector de archivos de un modo de los tres siguientes:

+ + + +

La apariencia del diálogo será distinta en cada tipo y variará en cada plataforma. Cuando el usuario ha seleccionado un archivo o una carpeta, lo puede leer o escribir en él.

+ +

La interfaz del selector de archivo nsIFilePicker es la encargada de mostrar el diálogo en uno de los tres modos. Usando la interfaz se puede configurar una serie de características del diálogo. Cuando se cierra el diálogo, se pueden usar las funciones de la interfaz para obtener el archivo que fue seleccionado.

+ +

Creando un selector de archivo

+ +

Para empezar, debes crear un componente selector de archivos e iniciarlo.

+ +
var nsIFilePicker = Components.interfaces.nsIFilePicker;
+var fp = Components.classes["@mozilla.org/filepicker;1"]
+      .createInstance(nsIFilePicker);
+fp.init(window, "Select a File", nsIFilePicker.modeOpen);
+
+ +

Primero, se crea un nuevo objeto selector de archivos y es almacenado en la variable ‘fp’. La función ‘init’ se usa para iniciar el selector de archivos. Esta función toma tres argumentos, la ventana que está abriendo el diálogo, el título del diálogo y el modo. Aquí el modo es modeOpen (modoAbrir) el cual es usado para un diálogo Abrir. También se puede usar modeGetFolder (modoObtenerCarpeta) y modeSave (modoGuardar) para los otros dos modos. Estos modos son constantes de la interfaz nsIFilePicker.

+ +

Directorio y filtros por defecto

+ +

Hay dos características del diálogo que se pueden configurar antes de que se muestre.

+ + + +

Se puede configurar el directorio por defecto con la propiedad displayDirectory del objeto selector de archivos. El directorio debe ser un objeto nsILocalFile. Si no asignas ningún valor, un directorio por defecto será escogido automáticamente. Para agregar filtros, se llama la función apeendFilters() para configurar los tipos de archivos que se desea mostrar.

+ +
fp.appendFilters(nsIFilePicker.filterHTML | nsIFilePicker.filterImages);
+fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
+
+ +

El primer ejemplo agrega filtros para archivos HTML e imágenes. Al usuario se le permitirá seleccionar sólo esos tipos de archivos. La forma de realizar esto depende de la plataforma. En algunas plataformas, cada filtro será separado y el usuario podrá seleccionar entre archivos HTML e imágenes. El segundo ejemplo agrega filtros para archivos de texto y para todos los archivos. Luego el usuario tiene la opción de elegir entre mostrar solo los archivos de texto o todos los archivos.

+ +

También se puede usar filterXML y filterXUL para filtrar archivos XML y XUL. Si se desea crear un filtro en particular se puede utilizar la función appendFilter() de la siguiente manera:

+ +
fp.appendFilter("Audio Files","*.wav; *.mp3");
+
+ +

Esta línea agregará un filtro para archivos WAV y MP3. El primer argumento es el título del tipo de archivos y el segundo es una lista de máscaras de archivos separadas por punto y coma. Se puede agregar más o menos máscaras como sea necesario. También se puede llamar la función appendFilters tantas veces como sea necesario para agregar filtros adicionales. El orden en que se agregan determina su prioridad. Generalmente, el primero que se agrega es seleccionado por defecto.

+ +

Conseguir el archivo seleccionado

+ +

Finalmente, se puede mostrar el diálogo llamando la función ‘show’. No toma ningún parámetro pero devuelve un código de estado que indica que eligió el usuario. Note que la función no devuelve hasta que el usuario haya seleccionado un archivo. La función devuelve una de las tres siguientes constantes:

+ + + +

Se debería revisar el valor retornado para luego recuperar el objeto del archivo desde el selector de archivos usando la propiedad file.

+ +
var res = fp.show();
+if (res == nsIFilePicker.returnOK){
+  var thefile = fp.file;
+  // --- do something with the file here ---
+}
+
+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html new file mode 100644 index 0000000000..4ed1b2660f --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/el_modelo_de_caja/index.html @@ -0,0 +1,192 @@ +--- +title: El modelo de caja +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/El_modelo_de_caja +translation_of: Archive/Mozilla/XUL/Tutorial/The_Box_Model +--- +

{{ PreviousNext("Escuela_XUL/Agregar_eventos_y_comandos", "Escuela_XUL/Agregar_ventanas_y_dialogos") }}

+ +

In order to master XUL, you'll need to have a fairly good understanding of its Box Model. This is the system that determines how all elements are laid out visually in a XUL document. It is important to know how it works in order to make interfaces that are easy to localize, skin and use in different types of operating systems, screen sizes and resolutions.

+ +

The XUL box model is a significant improvement over the HTML layout model, which is mostly vertical. With XUL you can define vertically oriented as well as horizontally oriented interfaces, providing greater flexibility in interface design.

+ +

Any XUL interface can be broken down into the following basic components:

+ + + +

Menus, toolbar buttons, and even the most complex elements in XUL are composed of these simple ingredients. Complex elements are created from simpler ones through XBL, which will be covered later on. Once you grasp this simple idea, you'll be able to use the DOM Inspector and CSS to mold XUL elements and layouts with great precision and flexibility.

+ +

Most of the examples shown in the rest of this section were generated using the XUL Box Alignment Example. We recommend you play around with it for a while to get an idea of how the basic parts of the box model work.

+ +

Boxes

+ +

A XUL box is very similar to an HTML div. It's an invisible rectangular container with no styling at all (divs may have some default styling, though). Their behavior is similar. However, one of the fundamental differences between XUL and HTML is the fact that XUL boxes can be vertically oriented (like divs) or horizontally oriented (unlike divs).

+ +

There are 3 basic box elements in XUL: hbox, vbox and box. An hbox is oriented horizontally by default, meaning that its child nodes are displayed next to each other from left to right. A vbox is oriented vertically by default, its child nodes displayed one below the other from top to bottom. A box is a generic version that you can orient as you please, but its default is horizontal orientation, so it's pretty much equivalent to an hbox and it is seldom used.

+ +

Here's a very simple example of an hbox with 3 child buttons:

+ +
<hbox>
+  <button label="Cat" />
+  <button label="Parrot" />
+  <button label="Porcupine" />
+</hbox>
+
+ +

This is how it looks on Mac OS (the black border was added for illustrative purposes, boxes don't have borders by default):

+ +

+ +

If you use a vbox instead, it looks like this:

+ +

+ +

The orientation of boxes (and most XUL elements) can be controlled using the orient attribute or the -moz-box-orient CSS property. With these you can make an hbox have vertical orientation and viceversa, although that isn't very useful. The CSS property may be useful on some occasions, but using the orient attribute is not recommended because it mixes content and presentation.

+ +

 Flexibility

+ +

An HTML div is as big as its contents unless you override its dimensions using CSS. This is similarly the case for XUL, except there are two flexibility directions to consider. An hbox is as big as its contents horizontally, but it will occupy all the available space vertically. You can make an hbox flexible horizontally with the CSS property -moz-box-flex or the flex attribute. The same applies to a vbox, but in the other direction.

+ +

Unlike most style attributes, the flex attribute is considered acceptable to use in XUL code. This is because this attribute is used much too often, and it would require a great deal of CSS code to avoid using it. At any rate, it can always be overriden using CSS, so your extension won't lose skinability because of it.

+ +

Flexibility is defined as a numeric value. The default value for most elements is 0, which means that the element will not stretch in the direction of its orientation, and its size in that dimension will be determined by its contents and padding. If you want an element to be flexible, you should set its flexibility to 1. This makes the element stretch to occupy as much available space there is in the direction of its orientation. If we add flexibility to the hbox in our first example, we get the following result:

+ +

+ +

The box flexes to cover the available horizontal space. The buttons maintain their size.

+ +

If we also add flexibility to the "Cat" button, this is what we get:

+ +

+ +

Now the flexible button is taking the available inner space, moving the other two buttons all the way to the end of the box.

+ +

What would happen if we also add flexibility to the "Parrot" button?

+ +

+ +

Since both buttons have a flexibility of 1, the available space is distributed evenly among the two. Note that this is not always the case. If one of the buttons has a very long label that restricts its minimum size, then it could be the label determining its size, while the other button would flex taking the rest of the room.

+ +

Now, if you want a different size distribution in flexible elements, you can use flexibility values higher than 1.

+ +

+ +

In this case, the "Cat" button has a flex value of 3, while the "Parrot" button still has a flex value of 1. The "Cat" button is now larger in a 3 to 1 proportion. Note that, again, this can depend on the contents of the elements, in this case, the labels and paddings in the buttons. If the label of the "Parrot" button was something much longer, the size ratio would not be kept.

+ +

You can have even more control over the size of flexible elements using the minwidth, maxwidth, minheight and maxheight attributes, or their CSS counterparts: min-width, max-width, min-height and max-height. The latter are recommended to keep style code in the skin section of the chrome. As their names should make clear, you can control the flexibility boundaries of elements, thus preventing them from growing or shrinking too much.

+ +
+
+
All CSS properties involving lengths should be handled with caution. We recommended that you use proportional units (em, %) instead of absolute units (px) whenever possible. Using the former allows the UI to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations. A common exception to this rule is when your CSS is directly related to images, where you'll usually handle measurements in pixels (px).
+
+
+ +

Also, just like in HTML, you can control the dimensions of inflexible elements using the width and height CSS properties and attributes. These attributes won't have any effect on flexible elements.

+ +

Margins, paddings and spacers

+ +

Margins and paddings are frequently used in both HTML and XUL to define spacing between elements and inside of elements. The margin determines the space between an element and the elements surrounding it, while the padding determines the space between the borders of a container element and its child nodes, kind of like an inner margin.

+ +

Sometimes you also need to define flexible spaces between elements. In this case you should use a spacer element with a flex value. A spacer element is completely invisible and doesn't do more than take space. You should only use it when you need flexible space. If you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your XUL document.

+ +

Alignment

+ +

XUL, unlike HTML, provides an easy way to align elements both horizontally and vertically. You can either use the align and pack attributes, or the -moz-box-align and -moz-box-pack CSS properties. Packing determines the positioning of the child elements in the direction of the container's orientation. Alignment determines the positioning in the other direction. So, in a flexed hbox, having center alignment and end packing results in this:

+ +

+ +

One important thing to notice is that aligment and flexibility can't be mixed in some cases. If you add flexibility to one of the buttons, the packing will no longer be useful, but the alignment still makes a difference. It also wouldn't make sense to use flexibility or packing in the hbox if it didn't have any available horizontal space; the container element needs to either be flexible itself, or have a fixed width larger than its contents.

+ +

Text

+ +

There are 2 XUL elements that are typically used for displaying text: label and description. Their behavior is nearly identical, but they are meant to be used in different situations.

+ +

The label element should be used mainly for text in XUL forms, such as the ones you see in the Firefox Options / Preferences window. Here's a typical usage of the label element:

+ +
+
+
<label control="xulschoolhello-greeting-textbox"
+  value="&xulschoolhello.typeGreeting.label;" />
+<textbox id="xulschoolhello-greeting-textbox" />
+
+
+ +

The label says something like "Type a greeting message", and the textbox next to it allows the user to type the message. The control attribute links the label to the textbox. If the user clicks on the label, the textbox will be focused. Also, if the user has a screen reader, the label will be read when the focus is placed on the textbox.

+ +

The description element is used for the rest of the cases, where the text is only meant as additional information and is not related to input elements.

+ +

Handling text in XUL may seem simple, but it's actually quite a tricky subject. You always have to keep in mind that localized strings may be significantly longer in other languages, specially much longer than English strings. You should avoid using long blocks text, and also avoid designing your UI so that everything fits just right around text. You should always keep in mind that the text can be much longer, and your UI should adapt to it.

+ +

Labels should generally be short, and they should always be displayed in a single line. Descriptions may be longer, and in general you should plan it so that they can wrap into multiple lines. In order to have wrapping descriptions, you need to set the text as a child node instead of using the value attribute:

+ +
+
+
<description>&xulschoolhello.description.label;</description>
+
+
+ +

Even then, the text will extend as much as it can in a single line, so you need to add some CSS limits in order to make it wrap inside a XUL dialog or window. You can use the CSS property width to restrict the width of the description so that it wraps as you need it to.

+ +
+
+
Never cut text lines into separate locale strings in order to bypass wrapping difficulties. This makes localization much harder, or even impossible in some cases.
+
+
+ +

There are other more complicated text wrapping cases where a description won't be good enough. For instance, templates don't allow you to set the internal text in a description element in a way that it wraps properly. One way to work around this is using a textbox element instead. This blog post is a good guide on the subject, and you should keep it in mind if you need to do some advanced text handling.

+ +

Another way to handle excessive text length is to use the crop attribute. If the line of text is longer than its container will allow, the text will be cut, showing "..." in the place where it was cut. You can choose where to cut the text, but cropping at the end is the most common practice. Similarly as with wrapping, cropping will only occur is there is no room for the text to grow, so you'll need to restrict the width using CSS.

+ +

Text links

+ +

XUL makes it very easy for you to create a label that is also a link. All you need is to set the text-link class to the label, and add an onclick handler (oncommand won't work for this). The label is displayed with the expected link style so that users can easily recognize it as a link.

+ +

A trickier case is when you need only part of a label to be clickable, just like in HTML. Since labels can't handle rich text, workarounds have to implemented using Javascript. One possibility is to use special markup in a locale property so that the link can be easily recognized:

+ +
+
+
xulschoolhello.linkedText.label = Go to <a>our site</a> for more information
+
+
+ +

The syntax is similar to HTML because it's easier to read this way, but string bundles won't do anything special with it. You'll have to break the string using regular expressions and generate 3 different labels, one with the text-link class. You'll also need to do some CSS work on the labels so that the inner spacing in the text looks right.

+ +

Another option is to take it up a notch and really use HTML.

+ +
+
+
xulschoolhello.linkedText.label = Go to <html:a onclick="%S">our site</html:a> for more information
+
+
+ +

To include HTML in a XUL document, you need to add the namespace for it in the document root:

+ +
+
+
<overlay id="xulschoolhello-browser-overlay"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+
+
+ +

Then you can have an html:p (paragraph) element where you insert the result of parsing the property string. You can easily parse XML using the DOMParser object.

+ +
Since XUL documents are strict XML, you can only use strict XHTML in XUL, and not the more loosely-formatted forms of HTML.
+ +

Exercise

+ +

Use the DOM Inspector extension to look into the Firefox chrome. Select toolbar buttons, menu items, textboxes, etc. and look into the Box Model, CSS Style Rules and Computed Style views. Look into the computed width and height values, and how the paddings and margins affect the dimensions of XUL nodes.

+ +

Modify the Hello World extension so that it changes the appearance of Firefox drastically using only CSS. Play with changing the dimensions and appearance of buttons, changing the background color of the toolbars and status bars, font styles, sizes, etc. Note that this is not really what you would expect from an extension, it's more like a theme. However, it's very interesting and useful to see how you can manipulate the appearance of Firefox so easily.

+ +

If you're not familiar with CSS, you should read this CSS Getting Started Guide and other online resources before continuing with this tutorial.

+ +

{{ PreviousNext("Escuela_XUL/Agregar_eventos_y_comandos", "Escuela_XUL/Agregar_ventanas_y_dialogos") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html new file mode 100644 index 0000000000..dc19a9e359 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/emisores_y_receptores/index.html @@ -0,0 +1,118 @@ +--- +title: Emisores y receptores +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Emisores_y_receptores +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Broadcasters_and_Observers +--- +

There may be times when you want several elements to respond to events or changes of state easily. To do this, we can use broadcasters.

+ +

Command Attribute Forwarding

+ +

We've already seen that elements such as buttons can be hooked up to commands. In addition, if you place the desactivado attribute on the comando element, any elements hooked up to it will also become disabled automatically. This is useful way to simplify the amount of code you need to write. The technique also works for other attributes as well. For instance, if you place a label attribute on a comando element, any buttons attached to the command will share the same label.

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<command id="mi_comando" label="Abrir"/>
+
+<button command="mi_comando"/>
+<checkbox label="Abrir en una ventan nueva" command="mi_comando"/>
+
+ +

In this example, the button does not have a label attribute, however it is attached to a command that does. The button will share the label with the command. The checkbox already has a label, however, it will be overridden by the command's label. The result is that both the button and the checkbox will have the same label 'Open'.

+ +

If you were to modify the command's label attribute, the label on the button and checkbox will adjust accordingly. We saw something like this in a previous section where the desactivado attribute was adjusted once and propagated to other elements.

+ +

This attribute forwarding is quite useful for a number of purposes. For instance, let's say that we want the Back action in a browser to be disabled. We would need to disable the Back command on the menu, the Back button on the toolbar, the keyboard shortcut (Alt+Left for example) and any Back commands on popup menus. Although we could write a script to do this, it is quite tedious. It also has the disadvantage that we would need to know all of the places where a Back action could be. If someone added a new Back button using an extension, it wouldn't be handled. It is convenient to simply disable the Back action and have all the elements that issue the Back action disable themselves. We can use the attribute forwarding of commands to accomplish this.

+ +

El emisor

+ +

There is a similar element called a emisor. Broadcasters support attribute forwarding in the same way that commands do. They work the same as commands except that a command is used for actions, while a broadcaster is instead used for holding state information. For example, a comando would be used for an action such as Back, Cut or Delete. A emisor would be used to hold, for instance, a flag to indicate whether the user was online or not. In the former case, menu items and toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete. In the latter case, various UI elements might need to update when the user switches from offline mode to online mode.

+ +

The simplest broadcaster is shown below. You should always use an id attribute so that it can be referred to by other elements.

+ +
<broadcasterset>
+  <broadcaster id="isOffline" label="Offline"/>
+</broadcasterset>
+
+ +

Any elements that are watching the broadcaster will be modified automatically whenever the broadcaster has its label attribute changed. This results in these elements having a new label. Like other non-displayed elements, the broadcasterset element serves as a placeholder for broadcasters. You should declare all your broadcasters inside a broadcasterset element so that they are all kept together.

+ +

Making elements observers

+ +

Elements that are watching the broadcaster are called observers because they observe the state of the broadcaster. To make an element an observer, add an observes attribute to it. This is analogous to using the comando attribute when attaching an element to a comando element. For example, to make a button an observer of the broadcaster above:

+ +
<button id="offline_button" observes="isOffline"/>
+
+ +

The observes attribute has been placed on the button and its value has been set to the value of the id on the broadcaster to observe. Here the button will observe the broadcaster which has the id isOffline, which is the one defined earlier. If the value of the label attribute on the broadcaster changes, the observers will update the values of their label attributes also.

+ +

We could continue with additional elements. As many elements as you want can observe a single broadcaster. You can also have only one if you wanted to but that would accomplish very little since the main reason for using broadcasters is to have attributes forwarded to multiple places. You should only use broadcasters when you need multiple elements that observe an attribute. Below, some additional observers are defined:

+ +
<broadcaster id="offline_command" label="Offline" accesskey="f"/>
+
+<keyset>
+  <key id="goonline_key" observes="offline_command" modifiers="accel" key="O"/>
+</keyset>
+<menuitem id="offline_menuitem" observes="offline_command"/>
+<toolbarbutton id="offline_toolbarbutton" observes="offline_command"/>
+
+ +

In this example, both the label and the accesskey will be forwarded from the broadcaster to the key, menu item and the toolbar button. The key won't use any of the received attributes for anything, but it will be disabled when the broadcaster is disabled.

+ +

You can use a broadcaster to observe any attribute that you wish. The observers will grab all the values of any attributes from the broadcasters whenever they change. Whenever the value of any of the attributes on the broadcaster changes, the observers are all notified and they update their own attributes to match. Attributes of the observers that the broadcaster doesn't have itself are not modified. The only attributes that are not updated are the id and persist attributes; these attributes are never shared. You can also use your own custom attributes if you wish.

+ +

Broadcasters aren't used frequently as commands can generally handle most uses. One thing to point out is that there really is no difference between the comando element and the emisor element. They both do the same thing. The difference is more semantic. Use commands for actions and use broadcasters for state. In fact, any element can act as broadcaster, as long as you observe it using the observes attribute.

+ +

El observador

+ +

There is also a way to be more specific about which attribute of the broadcaster to observe. This involves an observes element. Like its attribute counterpart, it allows you to define an element to be an observer. The observes element should be placed as a child of the element that is to be the observer. An example is shown below:

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<broadcasterset>
+  <broadcaster id="isOffline" label="Offline" accesskey="f"/>
+</broadcasterset>
+
+<button id="offline_button">
+  <observes element="isOffline" attribute="label"/>
+</button>
+
+ +

Two attributes have been added to the observes element. The first, elemento, specifies the id of the broadcaster to observe. The second, atributo, specifies the attribute to observe. The result here is that the button will receive its label from the broadcaster, and when the label is changed, the label on the button is changed. The observes element does not change but instead the element it is inside changes, which in this case is a botón. Notice that the accesskey is not forwarded to the button, since it is not being obseved. If you wanted it to be, another observes element would need to be added. If you don't use any observes elements, and instead use the observes attribute directly on the button, all attributes will be observed.

+ +

El evento emisor

+ +

There is an additional event handler that we can place on the observes element which is onbroadcast. The event is called whenever the observer notices a change to the attributes of the broadcaster that it is watching. An example is shown below.

+ +

Example 3: Código Ver en funcionamiento

+ +
<broadcasterset>
+  <broadcaster id="colorChanger" style="color: black"/>
+</broadcasterset>
+
+<button label="Test">
+  <observes element="colorChanger" attribute="style" onbroadcast="alert('Color changed');"/>
+</button>
+
+<button label="Observer"
+  oncommand="document.getElementById('colorChanger').setAttribute('style','color: red');"
+/>
+
+ +

Two buttons have been created, one labeled Test and the other labeled Observer. If you click on the Test button, nothing special happens. However, if you click on the Observer button, two things happen. First, the button changes to have red text and, second, an alert box appears with the message 'Color changed'.

+ +

What happens is the oncommand handler on the second button is called when the user presses on it. The script here gets a reference to the broadcaster and changes the style of it to have a color that is red. The broadcaster is not affected by the style change because it doesn't display on the screen. However, the first button has an observer which notices the change in style. The elemento and the atributo on the observes tag detect the style change. The style is applied to the first button automatically.

+ +

Next, because the broadcast occured, the event handler onbroadcast is called. This results in an alert message appearing. Note that the broadcast only occurs if the attributes on the emisor element are changed. Changing the style of the buttons directly will not cause the broadcast to occur so the alert box will not appear.

+ +

If you tried duplicating the code for the first botón several times, you would end up with a series of alert boxes appearing, one for each button. This is because each button is an observer and will be notified when the style changes.

+ +

Seguimos con el uso del DOM con elementos XUL.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html new file mode 100644 index 0000000000..0859e26e37 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/estructura_xul/index.html @@ -0,0 +1,159 @@ +--- +title: Estructura XUL +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Estructura_XUL +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure +--- +

{{ PreviousNext("Tutorial de XUL:Introducción", "Tutorial de XUL:La URL chrome") }}

+ +

 

+ +

Comenzaremos viendo cómo se procesa XUL por parte de Mozilla.

+ +

Cómo se procesa XUL

+ +

En Mozilla, XUL se procesa en forma similar al procesamiento de HTML y otros tipos de contenido. Cuando el usuario escribe la URL de una página HTML en el campo de dirección del navegador, éste busca el sitio web y descarga su contenido. El motor de presentación de Mozilla toma el contenido en el formato HTML y lo transforma en un árbol de documento. Este árbol se convierte en un conjunto de objetos que pueden mostrarse en la pantalla. Los estilos CSS, imágenes y otras tecnologías son usados para controlar la presentación. El procesamiento de XUL es muy similar.

+ +

De hecho, en Mozilla, todos los tipos de documento, sin importar si son HTML, XUL o aún SVG son procesados por el mismo código. Esto significa que las mismas propiedades CSS pueden usarse para definir el estilo tanto del HTML como de XUL, y muchas de las características pueden compartirse entre ambos. Sin embargo, hay características que son específicas del HTML como son los formularios, y otras que son específicas de XUL como son los overlays (revestimientos). Ya que XUL y HTML se procesan de la misma forma, se pueden cargar desde el sistema de archivos local del usuario, desde una página web, desde una extensión del navegador o desde una aplicación XULRunner.

+ +

El contenido de fuentes remotas, como por ejemplo: http://localhost/~username/, sin importar si es HTML, XUL o cualquier otro tipo de documento, está limitado en la clase de operaciones que pueden realizar, por razones de seguridad. Por este motivo, Mozilla proporciona un método para instalar contenido en forma local y registrar los archivos instalados para que formen parte del sistema chrome. Esto permite usar una URL especial llamada la URL chrome://. Al acceder a un archivo usando la URL chrome, éstos reciben privilegios para acceder a archivos locales, preferencias, marcadores de página y ejecutar otras operaciones privilegiadas. Obviamente, las páginas web no obtienen estos privilegios, a menos que estén firmadas con un certificado digital y el usuario dé el permiso para ejecutar estas operaciones.

+ +

Este registro en el paquete chrome es la forma en la que las extensiones de Firefox pueden añadir características al navegador. Las extensiones son pequeños paquetes con archivos XUL, Javascript, hojas de estilo e imágenes empaquetados en un sólo archivo. Este archivo puede crearse usando una utilidad ZIP. Cuando el usuario descarga la extensión, ésta es instalada en su máquina. La extensión se ensambla en el navegador usando una característica especial de XUL llamada overlay (revestimiento), la cual permite que se combinen el XUL de la extensión y el XUL del navegador. Para el usuario, puede parecer que la extensión ha modificado al navegador, pero en realidad el código está separado y la extensión se puede desinstalar fácilmente.

+ +

Por supuesto, no es necesario que los paquetes registrados usen revestimientos. Si no los usan, no se puede acceder a ellos desde la interfaz del navegador, pero sí por medio de la URL chrome, si se sabe cuál es.

+ +

Las aplicaciones XUL autónomas (que no necesitan el navegador) pueden incluir código XUL de la misma forma, pero este código se incluirá como parte de la instalación, en lugar de tener que instalarse de forma separada como una extensión. Sin embargo, este código XUL debe ser registrado en el sistema chrome de tal forma que las aplicaciones puedan mostrar la UI.

+ +

Vale la pena anotar que el navegador Mozilla realmente es un conjunto de paquetes que contienen archivos XUL, JavaScript y hojas de estilo. Estos paquetes son accesibles usando una URL chrome, tienen privilegios ampliados y trabajan como cualquier otro paquete. Por supuesto, el navegador es más grande y más sofisticado que la mayoría de las extensiones. Firefox, Thunderbird y muchos otros componentes también están escritos en XUL y se puede acceder a ellos usando la URL chrome. Se puede examinar estos paquetes mirando el directorio chrome donde Firefox o cualquier otra aplicación XUL esté instalada.

+ +

La URL chrome siempre comienza por 'chrome://'. De la misma forma que la URL 'http://' se refiere a sitios web remotos accesibles por medio de HTTP y la URL 'file://' siempre se refiere a archivos locales, la URL 'chrome://' se refiere a los paquetes y extensiones instalados. En la próxima sección veremos con detalles la sintaxis de la URL chrome. Es importante anotar que si se accede a un contenido a través de una URL chrome, éste gana los privilegios ampliados que se han mencionado anteriormente y que otras clases de URL no tienen. Por ejemplo, una URL HTTP no tiene ningún privilegio especial, y ocurrirá un error si la página web intenta leer un archivo local. Sin embargo, un archivo cargado por medio de una URL chrome podrá leer archivos sin restricciones.

+ +

Esta diferenciación es importante. Significa que hay ciertas cosas que el contenido de las páginas web no puede hacer, tales como leer los marcadores de página del usuario. Esta diferenciación no está basada en la clase de contenido a ser mostrado, sólo en el tipo de URL empleada. Tanto el HTML como el XUL colocados en un sitio web no tienen permisos adicionales, sin embargo si el HTML o el XUL son cargados por medio de una URL chrome tendrán permisos ampliados.

+ +

Si Ud. va a usar XUL en un sitio web, debe colocar el archivo XUL en el sitio web tal como lo haría con un archivo HTML, y luego cargar su URL en el navegador (http://localhost/xul.php). Debe asegurarse que el servidor web esté configurado para enviar los archivos XUL con el tipo de contenido de application/vnd.mozilla.xul+xml (con PHP sería: header('content-type: application/vnd.mozilla.xul+xml');). Este tipo de contenido permite a Mozilla diferenciar entre HTML y XUL. Mozilla no usa la extensión del archivo, a menos que esté leyendo archivos del disco local, pero se debería usar la extensión .xul para todos los archivos XUL. Es posible abrir archivos XUL desde el navegador o el gestor de archivos.

+ +
Recuerde que los archivos XUL remotos tienen restricciones significativas sobre lo que pueden hacer.
+ +

Tipos de documentos: HTML XML XUL CSS

+ +

Mozilla emplea una clase totalmente diferente de objeto de documento (DOM) para el HTML y el XUL, aunque compartan mucha funcionalidad. En Mozilla existen tres tipos principales de documentos: HTML, XML y XUL. Naturalmente, el documento HTML se usa para los documentos HTML, el documento XUL se utiliza en los documentos XUL y el documento XML se emplea para otros tipos de documentos XML. Ya que el formato XUL también es XML, el documento XUL es una subclase del documento XML que es más genérico. Existen diferencias sutiles de funcionalidad. Por ejemplo, mientras los controles de un formulario en HTML es accesible por medio de la propiedad document.forms, en los documentos XUL no está disponible ya que XUL no tiene formularios en el mismo sentido que HTML. De otro lado, características específicas de XUL como los revestimientos y las plantillas sólo están disponibles en los documentos XUL.

+ +

La distinción entre documentos es importante. Es posible usar muchas características de XUL en documentos HTML o XML ya que no son específicas al tipo de documento, sin embargo, otras características requieren un tipo de documento específico. Por ejemplo, se pueden usar los tipos de disposición de XUL en otros documentos ya que no dependen del tipo de documento XUL para funcionar.

+ +

Para resumir los puntos expuestos anteriormente:

+ + + +

En las próximas secciones describiremos la estructura básica de un paquete chrome que será instalado dentro de Mozilla. Sin embargo, si desea comenzar a construir una aplicación simple, puede saltar a creando una ventana y volver más tarde.

+ +

Organización del paquete

+ +

Mozilla está organizado de tal forma que te permite tener tantos componentes pre-instalados como quieras. Cada extensión es, además, un componente con un chrome URL distinto. Además tendrá un componente para cada tema o configuración regional instalado. Cada uno de estos componentes o paquetes, está compuesto de un conjunto de ficheros que describen la interfaz de usuario para cada uno. Por ejemplo, el componente de mensajería tendrá descripciones de la ventana de listado de mensajes de correo, la ventana de composición y los cuadros de la libreta de direcciones.

+ +

Los paquetes que vienen con Mozilla están localizados en la carpeta chrome, que puedes encontrar en el directorio donde instalaste Mozilla. La carpeta chrome es donde encontrarás todos estos archivos que describen la interfaz de usuario para el navegador Mozilla, el cliente de correo y para otras aplicaciones. Habitualmente pondrás todos los archivos XUL para una aplicación en esta carpeta, excepto para las extensiones, que serán instaladas en la carpeta de extensiones de un usuario concreto. El simple hecho de copiar un archivo XUL a la carpeta 'chrome' no proporcionará al archivo ningún permiso extra ni será accesible a través de chrome URL. Para conseguir estos privilegios extras, tendrás que crear un archivo manifest y ponerlo en la carpeta chrome. Este archivo es fácil de crear, y habitualmente sólo contiene un par de líneas de código. Se usa para enlazar un chrome URL a un archivo o ruta de una carpeta del disco donde están los archivos XUL. Detalles de cómo crear este archivo serán vistos en la siguiente sección.

+ +

La única forma de acceder a contenido a través de una URL chrome es crear un paquete como se describe en las siguientes secciones. Esta carpeta se denomina 'chrome' porque parece ser un nombre conveniente para el directorio donde se mantienen los paquetes chrome que se incluyen con Mozilla.

+ +

Para agrandar la confusión, hay otros dos sitios donde la palabra chrome puede aparecer. El primero es el argumento '-chrome', y el segundo el modificador chrome para la función window.open(). La llamada de estas características no otorga privilegio alguno. Son usadas para abrir una nueva ventana arriba del todo sin el menú o la barra de herramientas del navegador. Habitualmente se usará esta característica en aplicaciones XUL donde no se quiera que aparezca las diferentes barras del navegador alrededor de los cuadros de diálogo.

+ +

Los archivos para un paquete son normalmente unidos en un simple archivo JAR. Un archivo JAR debe ser creado y examinado usando una aplicación ZIP. Por ejemplo, puedes abrir un archivo JAR en la carpeta chrome de Mozilla para ver la estructura básica de un paquete. Aunque es normal unir los archivos en un archivo JAR, los paquetes pueden ser accesibles de forma expandida en un directorio. No es habitual distribuir un paquete de esta forma, pero es práctico durante su desarrollo, ya que puedes editar el archivo directamente para después recargarlo sin tener que volver a empaquetar o reinstalar los archivos.

+ +

Por defecto, las aplicaciones Mozilla analizan los archivos XUL y los scripts, y guardan una versión pre-compilada en la memoria para mejorar el resto de la sesión. Esto mejora la ejecución. Sin embargo, por culpa de esto, el archivo XUL no será recargado aún cuando el archivo fuente haya cambiado. Para desactivar este mecanismo, es necesario cambiar las preferencia nglayout.debug.disable_xul_cache. En Firefox, ésta preferencia se puede añadir a las preferencias del usuario poniendo "about:config" en la barra de dirección y cambiar ese valor por verdadero (true). O manualmente editando el archivo de preferencias user.js y añadiéndole la siguiente línea:

+ +
pref("nglayout.debug.disable_xul_cache", true);
+
+ +


+ Habitualmente hay tres partes distintas en un paquete chrome, aunque son opcionales. Cada parte está almacenada en una carpeta distinta. Estas tres partes son el contenido, la piel (skin) y la configuración regional, explicados más abajo. Un paquete particular debe proporcionar una o más pieles (skins) y locales, pero un usuario puede reemplazarlos con los suyos propios. Además, el paquete debe incluir varias aplicaciones distintas cada una accesible a través de diferentes chrome URLs. El sistema de paquetes es suficientemente flexible por lo que puedes incluir todas las partes que necesites y permitir que otras partes, como el texto para diferentes idiomas, sean descargadas de forma separada.

+ +

Los tres tipos de paquetes chrome son:

+ + + +

Paquetes de contenido

+ +

El nombre de un archivo JAR debe describir lo que contiene, pero no se puede asegurar el contenido si no se mira a dentro. Vamos a usar el paquete del navegador incluido con Firefox como ejemplo. Si extraemos los archivos de browser.jar, nos encontraremos con una jerarquía de directorios similar a la que se muestra a continuación:

+ +
content
+   browser
+      browser.xul
+      browser.js
+      -- otros ficheros XUL y JS van aquí --
+      bookmarks
+         -- los archivos de marcadores, aquí --
+      preferences
+         -- los archivos de preferencias, aquí --
+.
+.
+.
+
+ +

el ejemplo original <pre> content browser browser.xul browser.js -- other browser XUL and JS files goes here -- bookmarks -- bookmarks files go here -- preferences -- preferences files go here -- . . . </pre>

+ +

Ésto es fácilmente reconocible como un paquete de contenido, ya que el directorio superior se llama content. Para aspectos(skins) esta carpeta normalmente será denominada skin y para configuración regional se le llamará locale. Este esquema de nombres no es necesario pero es una práctica habitual para hacer más claras las partes de un paquete. Algunos paquetes deben incluir una sección de contenidos, una piel (skin) y un locale. En este caso, encontraremos un sub-directorio para cada tipo. Por ejemplo, Chatzilla está distribuido de esta forma.

+ +

La carpeta content/browser contiene un número de archivos con extensiones .xul y .js. Los archivos XUL son los que tienen la extensión .xul. Los archivos con extensiones .js son archivos JavaScript que contienen los scripts que se encargan de la funcionalidad de una ventana. Muchos archivos XUL tienen un archivo script asociado con ellos, y muchos deben tener más de uno.

+ +

En el listado superior, dos archivos han sido vistos. De hecho hay otros, pero para simplificar no serán vistos. El archivo browser.xul es el archivo XUL que describe la ventana principal del navegador. La ventana principal para un paquete de contenido debe tener el mismo nombre que el paquete con una extensión .xul. En este caso, el nombre del paquete es "browser", por eso esperaremos encontrarnos con browser.xul. Algunos de los otros archivos XUL describen ventanas distintas. Por ejemplo, el archivo pageInfo.xul describe el cuadro de información de la página.

+ +

Muchos paquetes incluirán un archivo contents.rdf que describe el paquete, su autor y el revestimiento que usa. Sin embargo, este archivo está obsoleto y ha sido reemplazado con un mecanismo más simple. Este nuevo método es el archivo manifest mencionado anteriormente, y encontraremos estos archivos con la extensión .manifest en el directorio chrome. Por ejemplo, browser.manifest describe el paquete del navegador.

+ +

Varias subcarpetas, como son marcadores y preferencias (bookmarks y preferences), describen secciones adicionales del navegador. Están ubicadas en diferentes carpetas sólo para mantener los archivos más organizados.

+ +

Aspectos (skins) o Temas

+ +

Al código subyacente de Mozilla se le llama aspectos (skins), aunque a la interfaz de usuario se la llama temas, pero ambos se refieren a la misma cosa. El archivo classic.jar describe el tema por defecto que viene con Firefox. La estructura es similar a los paquetes de contenido. Por ejemplo, examinando classic.jar:

+ +
skin
+   classic
+      browser
+         -- browser skin files go here --
+      global
+         contents.rdf
+         -- global skin files go here --.
+.
+.
+
+ +

Nuevamente, esta estructura de carpetas no es necesaria y es usada por comodidad. Realmente puedes colocar todos los archivos en una carpeta arriba del todo y no usar subcarpetas. Sin embargo, para aplicaciones mayores, las subcarpetas son usadas para separar los diferentes componentes. En el ejemplo anterior, una carpeta es para los archivos del tema para el navegador y otra para los archivos del tema global. La carpeta global contiene archivos de la piel (skin) que son comunes a todos los paquetes. Estos archivos se aplicarán a todos los componentes y serán incluídos para tus aplicaciones autónomas. La parte global define el aspecto de todos los chismes comunes XUL, mientras que las otras carpetas contienen archivos que son específicos de estas aplicaciones. Firefox incluye tanto los archivos del tema global como los del navegador en un archivo, pero ambos pueden ser incluídos por separado.

+ +

Una piel (skin) se compone de archivos CSS y de un número de imágenes usadas para definir el aspecto y la interfaz. El archivo browser.css es usado por browser.xul y contiene estilos que definen el aspecto de varias partes de la interfaz del navegador. Nuevamente, nótese como el archivo browser.css tiene el mismo nombre que el paquete. Cambiando los archivos CSS, puedes ajustar el aspecto de una ventana sin cambiar su función. De esta forma puedes crear un nuevo tema. La parte XUL continúa igual pero la parte de la piel (el skin) cambia independientemente.

+ +

Configuración regional

+ +

El archivo en-US.jar describe la información del idioma para cada componente, en este caso para US English. Como las pieles (skins), cada idioma contendrá archivos que especifican texto usado por el paquete pero para un idioma concreto. La estructura para la configuración regional es similar a las otras, por eso no será explicada aquí.

+ +

El texto de idioma es almacenado en dos tipos de archivos: archivos DTD y archivos de propiedades. Los archivos DTD tienen una extensión .dtd y contienen declaraciones de identidad, una para cada cadena de texto usada en una ventana. Por ejemplo, el archivo browser.dtd contiene declaraciones de identidad para cada comando del menú. Además, los atajos de teclado para cada comando también están definidos, ya que pueden ser diferentes en cada idioma. Los archivos DTD son usados por los archivos XUL por eso, en general, tendrás uno por cada archivo XUL. La parte de configuración regional también contiene archivos de propiedades, que son similares, pero son usados por archivos script. El archivo browser.properties contiene algunas cadenas de idioma.

+ +

Esta estructura nos permite traducir Mozilla o un componente a un idioma distinto sólo añadiendo una nueva configuración regional para ese idioma. No tienes que cambiar la parte de XUL. Además, otra persona puede proporcionar un paquete separado que aplica una piel (skin) o configuración regional a tu parte de contenido, proporcionando soporte de esta manera a un nuevo tema o idioma sin tener que modificar el paquete original.

+ +

Otros paquetes

+ +

Hay un paquete especial llamado toolkit (o global). Vimos anteriormente el directorio global para skins (pieles). El archivo toolkit.jar contiene el contenido correspondiente para ello. Contiene algunos diálogos globales y definiciones. Además, define la apariencia por defecto y la funcionalidad de varios chismes XUL comunes como son los cuadros de texto y los botones. Los archivos localizados en la parte global de un paquete skin contienen la apariencia por defecto para todos los elementos de la interfaz XUL. El paquete toolkit es usado por todas las aplicaciones XUL.

+ +

Añadiendo un paquete

+ +

Mozilla coloca los paquetes incluidos con la instalación en la carpeta chrome. Sin embargo, no es necesario colocarlos aquí. Si tienes otro paquete instalado, puede ser colocado en cualquier parte del disco, siempre que un archivo manifest apunte a él. Es una práctica frecuente colocar los paquetes en la carpeta chrome simplemente por ser conveniente, sin embargo sólo funcionarán correctamente desde otro directorio o desde algún lugar de tu red local. No puedes almacenarlos en un lugar remoto, a no ser que el sitio remoto sea montado a través del sistema de ficheros local.

+ +

Hay dos carpetas chrome usadas para las aplicaciones XUL, una está instalada en el mismo sitio donde las aplicaciones están instaladas, y la otra es parte del perfil del usuario. La primera permite a los paquetes ser compartidos por todos los usuarios, mientras que la segunda permite la creación de paquetes sólo por un usuario o grupo específico. Las extensiones, cuando son instaladas en una carpeta de extensiones diferente, son también normalmente específicas del usuario. Cualquier archivo manifest situado en cualquier carpeta chrome será examinado para ver que los paquetes instalados.

+ +

En la siguiente sección, veremos como referirse a un paquete chrome usando la URL chrome.

+ +

{{ PreviousNext("Tutorial de XUL:Introducción", "Tutorial de XUL:La URL chrome") }}

+ +

Interwiki Language Links

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selecci\303\263n/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selecci\303\263n/index.html" new file mode 100644 index 0000000000..89f2b7bfdd --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/foco_y_selecci\303\263n/index.html" @@ -0,0 +1,179 @@ +--- +title: Foco y Selección +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Foco_y_Selección +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Focus_and_Selection +--- +

Esta sección describe como gestionar el foco y la selección de los elementos.

+ +

Elementos con foco

+ +

El elemento con foco se refiere al elemento que actualmente recibe los eventos de entrada. Si hay tres campos de texto en una ventana, el que tiene el foco es en el que el usuario puede introducir texto. Sólo un elemento por ventana puede tener el foco en un momento dado.

+ +

El usuario puede cambiar el foco haciendo clic en un elemento o usando la tecla TAB. Cuando la tecla TAB es presionada, el foco pasa al siguiente elemento. Para ir al elemento anterior puede pulsarse Mayúsculas + Tab.

+ +

Reordenación del orden de tabulación

+ +

Puedes cambiar el orden en que los elementos reciben el foco cuando el usuario presiona TAB si especificas un valor para el atributo tabindex en cada elemento. El valor de este atributo debe ser un número. Cuando el usuario presiona la tecla TAB, el foco cambiará al elemento con el tabindex inmediatamente superior al elemento actual. Esto significa que puedes ordenar los elementos si les asignas índices en forma secuencial. Normalmente, sin embargo, no especificarás un valor para el atributo tabindex. Si no lo especificas, presionar la tecla TAB pondrá el foco en el siguiente elemento marcado en el código. Sólo necesitas especificarlo si deseas usar un orden distinto. Aquí hay un ejemplo:

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<button label="Botón 1" tabindex="2"/>
+<button label="Botón 2" tabindex="1"/>
+<button label="Botón 3" tabindex="3"/>
+
+ +

El evento enfoque

+ +

El evento onfocus (enfoque) se usa para responder cuando un elemento recibe el foco. El evento onblur (desenfocado) se usa para responder cuando el foco se retira de un elemento. Ambos eventos funcionan igual que sus equivalentes en HTML. Puedes usar estos gestores para iluminar un elemento o mostrar un texto de ayuda en la barra de estado. El siguiente ejemplo puede ser usado para aplicar una función a la gestión del evento de enfoque.

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<script>
+function displayFocus()
+{
+  var elem=document.getElementById('sbar');
+  elem.setAttribute('value','Introduce tu número de teléfono.');
+}
+</script>
+
+<textbox id="tbox1"/>
+<textbox id="tbox2" onfocus="displayFocus();"/>
+<description id="sbar" value=""/>
+
+ +

El evento onfocus, cuando ocurra, llamará a la función displayFocus(). Esta función cambiará el valor de la etiqueta. Podemos extender este ejemplo para eliminar ese texto cuando el elemento pierde el foco. Generalmente, usarás los eventos de enfoque y desenfocado para actualizar partes de la interfaz cuando el usuario seleccione elementos. Por ejemplo, calculando un total cuando usuario introduzca valores en otros campos, o usando los eventos de foco para validar ciertos valores. No muestres diálogos de alerta durante los eventos de foco ya que generalmente esto incomodará o distraerá al usuario y por ello se considera un diseño de interfaz bastante pobre.

+ +

También puedes añadir gestores de eventos dinámicamente usando la función del DOM addEventListener. Puedes usarla para cualquier tipo de elemento. Toma tres parametros, el tipo de evento, la función a ejecutar cuando ocurre el evento y un booleano indicando si debe ser capturado o no.

+ +

Obtención del elemento actualmente enfocado

+ +

El elemento enfocado actualmente se registra en un objeto llamado despachador de comandos (command dispatcher), del cual sólo hay una instancia en cada ventana. El despachador de comandos es responsable de mantener controlado el elemento que tiene el foco cuando el usuario usa el interfaz. El despachador de comandos también tiene otras tareas, que serán discutidas en un próxima sección sobre los comandos. Por ahora, miraremos algunas de las características relacionadas con la focalización.

+ +

Puedes obtener el despachador de comandos de la ventana usando la propiedad commandDispatcher del documento. Desde ahí, puedes saber el elemento enfocado actualmente con el atributo focusedElement del despachador. El siguiente ejemplo ilustra cómo hacerlo.

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
<window id="focus-example" title="Ejemplo de Foco"
+       onload="init();"
+       xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
+
+  <script>
+  function init()
+  {
+    addEventListener("focus",setFocusedElement,true);
+  }
+
+  function setFocusedElement()
+  {
+    var focused = document.commandDispatcher.focusedElement;
+    document.getElementById("focused").value = focused.tagName;
+  }
+  </script>
+
+  <hbox>
+    <label control="username" value="Nombre de usuario:"/>
+    <textbox id="username"/>
+  </hbox>
+
+  <button label="Hola"/>
+  <checkbox label="Recuerda esta decisión"/>
+  <label id="focused" value="-Sin Foco-"/>
+
+</window>
+
+ +

En este ejemplo, el gestor de eventos del foco se adjunta a la ventana. Queremos usar un gestor de eventos capturador, así que debemos usar el método addEventListener. Este registrará un gestor de eventos capturador con la ventana, que se encargará de llamar al método setFocusedElement(). Este método coge el elemento que contiene el foco actualmente del despachador de comandos y pone el valor de la etiqueta con el nombre del elemento. Cuando el foco cambia de elemento, la etiqueta mostrará el nombre del elemento que contiene el foco. Algunas cosas que cabe mencionar son las siguientes:

+ + + +

Hacer una etiqueta enfocable

+ +

Si tuvieras que crear un elemento personalizado, tendrías que definir si este nuevo elemento puede obtener el foco o no. Para ello, puedes usar una propiedad de estilo especial : -moz-user-focus. Esta propiedad controla si un elemento puede ser focalizable. Por ejemplo, podrías crear una etiqueta focalizable como en el siguiente ejemplo.

+ +

Ejemplo 4: Código Ver en funcionamiento

+ +
<label id="focused" style="-moz-user-focus: normal;"
+         onkeypress="alert('Etiqueta Focalizada');" value="Focalizame"/>
+
+ +

La propiedad de estilo está puesta como normal. También puedes ponerla como ignore para que el elemento no sea focalizable. Esta propiedad no debe ser usada para deshabilitar un elemento, para ello puedes usar el atributo disabled ya que se diseñó específicamente para ello. Una vez la etiqueta del ejemplo obtiene el foco, puede responder a pulsaciones del teclado. Naturalmente, la etiqueta no da ninguna indicación de estar focalizada, ya que normalmente no debería poder obtener el foco.

+ +

Cambio del foco

+ +

Hay distintas formas de cambiar el elemento actualmente enfocado. La más simple es llamando al método focus del elemento XUL que deseas tener enfocado. El método blur sería usado para desfocalizar un elemento. El siguiente ejemplo muestra su uso.

+ +

Ejemplo 5: Código Ver en funcionamiento

+ +
<textbox id="addr"/>
+
+<button label="Foco" oncommand="document.getElementById('addr').focus()"/>
+
+ +

Opcionalmente puedes usar los métodos advanceFocus y rewindFocus del despachador de comandos. Estos métodos mueven el foco al siguiente o anterior elemento respectivamente. Esto es lo que pasa cuando se presiona TAB o Mayúsculas+TAB.

+ +

Para las cajas de texto, un atributo especial focused se añade cuando el elemento tiene el foco. Puedes comprobar la presencia del atributo para determinar si el elemento está enfocado, ya sea mediante un guión o desde una hoja de estilos. Tendrá el valor true si la caja de texto tiene el foco y si no lo tuviera el atributo ni siquiera estará presente.

+ +

Comportamientos específicos de plataforma

+ +
+
Max OS X
+
Hay una preferencia llamada "Acceso Total al Teclado" (Full Keyboard Access, FKA). Nota que XUL es fiel a esto. Esto quiere decir que cuando la preferencia FKA estáoff, sólo las cajas de texto y las listas/árboles son enfocables con el teclado, así como de tu teclado utilizando el método focus.
+
+ +

Manejo de cambios de texto

+ +

Hay dos eventos que pueden ser utilizados cuando el usuario cambia el valor de una caja de texto. Naturalmente, estos eventos sólo serán enviados a la caja de texto que tiene el foco.

+ + + +

Selección de texto

+ +

Cuando trabajamos con cajas de texto, seguramente deseemos obtener el texto seleccionado en lugar de todo el texto. También es posible que necesitemos cambiar la selección actual.

+ +

Las cajas de texto en XUL soportan una forma de obtener y modificar la selección. La forma más sencilla es seleccionar todo el texto de la caja. Esto involucra usar el método select de la caja de texto.

+ +
tbox.select();
+
+ +

Sin embargo, podrías querer seleccionar tan sólo una parte del texto. Para hacerlo puedes usar la función setSelectionRange. Toma dos parametros, el primero es la posición del caracter inicial y el segundo es la posición del caracter inmediatamente posterior al fin de la selección. Los valores comienzan en 0, así que la posición del primer caracter es 0, la del segundo 1 …

+ +
tbox.setSelectionRange(4,8);
+
+ +

Este ejemplo seleccionará el quinto, sexto, séptimo y octavo caracteres. Si tan sólo hubiera seis caracteres, sólo el quinto y el sexto serían seleccionados, sin provocar ningún error.

+ +

Si usas el mismo valor para ambos parametros, el inicio y fin de la selección cambia a la misma posición. Esto equivale a cambiar la posición del cursor dentro de la caja de texto. Por ejemplo, la siguiente línea puede usarse para mover el cursor al inicio del texto.

+ +
tbox.setSelectionRange(0,0);
+
+ +

Puedes obtener la selección actual usando las propiedades selectionStart y selectionEnd. Estas propiedades contienen los valores de inicio y final de la selección actual respectivamente. Si ambas contienen el mismo valor, significa que no hay ningún texto seleccionado, y los valores serán la posición actual del cursor. Una vez que tienes la posición inicial y final puedes extraer la subcadena del texto completo.

+ +

Puedes obtener y modificar el contenido de una caja de texto usando la propiedad value.

+ +

Otra propiedad de las cajas de texto bastante útil es textLength, la cual nos dirá el número de caracteres del campo.

+ +

Selección de otros elementos

+ +

Muchos otros elementos proporcionan métodos para obtener los elementos seleccionados dentro de ellos. Listas, menús y cajas de pestañas tienen la propiedad selectedIndex que podemos usar para obtener el índice del elemento actualmente seleccionado.

+ +

Si asignas un valor a la propiedad selectedIndex puedes cambiar el elemento seleccionado.

+ +
+

« AnteriorSiguiente »

+
+ +

Categorías

+ +

links interwikis

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html new file mode 100644 index 0000000000..930be87618 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/herencia_de_atributos_xbl_en_firefox_1.5_y_2.0/index.html @@ -0,0 +1,44 @@ +--- +title: Herencia de atributos xbl en Firefox 1.5 y 2.0. +slug: >- + Archive/Mozilla/XUL/Tutorial_de_XUL/Herencia_de_atributos_xbl_en_Firefox_1.5_y_2.0. +tags: + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/XBL_Attribute_Inheritance +--- +

 

+ +

Herencia de atributos xbl en Firefox 1.5 y 2.0.

+ +

He visto por internet que muchas personas están teniendo problemas con xbl:inherits en firefox 1.5 y 2.0 en cualquier plataforma, igual que yo, así que pues me di un tiempo después del trabajo para solucionear el problema, tienes que escribir los xmlns como en mi ejemplo.

+ +

 

+ +
<?xml version="1.0"?>
+<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
+<binding id="zona">
+ <content>
+  <xul:deck xbl:inherits="selectedIndex" flex="1">
+   <xul:stack>
+           <xul:image src="green1.jpg" />
+           <xul:hbox pack="center">
+             <xul:vbox pack="center">
+               <xul:image style="height: 80px; width: 80px;" src="yinyan-m.jpg" />
+             </xul:vbox>
+           </xul:hbox>
+         </xul:stack>
+   <xul:stack>
+           <xul:image src="green1.jpg"/>
+           <xul:vbox pack="center">
+             <xul:image src="set.jpg"/>
+           </xul:vbox>
+         </xul:stack>
+  </xul:deck>
+ </content>
+</binding>
+</bindings>
+
+ +

Este archivo se guarda con la extensión .xml por ejemplo miarchivo.xml, de esta manera la herencia de atributos de la forma xbl:inherits funciona incluso con atributos definidos en un namespace. RECUERDEN PONER ATENCIÓN A LOS NAMESPACES xmlns.

+ +

 

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/index.html new file mode 100644 index 0000000000..6dbfec687b --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/index.html @@ -0,0 +1,123 @@ +--- +title: Tutorial de XUL +slug: Archive/Mozilla/XUL/Tutorial_de_XUL +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial +--- +

+


+

+
+

Este tutorial de XUL fue creado por Neil Deakin. Él nos dio su permiso para que lo usáramos como parte de MDC. +

+
+

Este tutorial describe XUL, el lenguaje de usuario XML. Este lenguaje fue creado para la aplicación Mozilla y es usado para dibujar su interface. +

+

Introducción

+ +

Elementos simples

+ +

El modelo de caja

+ +

Más elementos de diseño

+ +

Barra de herramientas y menús

+

Eventos y scripts

+ +

Modelo de objeto de documento

+ +

Árboles

+ +

Plantillas y RDF

+ +

Aspectos/temas y configuración

+ +

Vinculaciones

+ +

Tipos de ventanas especializadas

+ +

Instalación

+ +
+

Información original del documento

+
+
+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html new file mode 100644 index 0000000000..80db82b861 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/instalando_scripts/index.html @@ -0,0 +1,80 @@ +--- +title: Instalando Scripts +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Instalando_Scripts +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts +--- +

 

+

Esta sección describe el script de instalación.

+

Creando un script de instalación

+

Usted deseará generalmente alguna forma de control sobre el proceso de instalacion. Por ejemplo, usted puede desear comprobar versiones de archivos e instalar solamente archivos actualizados, o quizás usted desea aplicar parches a los archivos existentes. El script de instalación es lo suficiente flexible para permitirle desinstalar archivos. Por esta razón, los instaladores incluyen un script de instalación para manejar el proceso de la instalación.

+

El script de instalación se debe llamar install.js y se debe colocar en el nivel superior del archivo del instalador. El script contendrá código Javascript que ejecutará varias funciones de instalación.

+

En un documento HTML, o un documento XUL, el objeto window es el objeto global de la raíz. Eso significa que usted puede llamar los métodos del objeto window sin usar el calificador antes de la llamada, lo que significa que window.open(…) se puede escribir simplemente open(…). En un script de instalación, no hay ventana asociada, sin embargo el objeto global será un objeto Install que contiene varias funciones para personalizar el proceso de instalación. Algunas de las funciones del objeto Install serán descritas abajo.

+

El script de instalación debe seguir los siguientes pasos:

+
    +
  1. Inicie la instalación especificando qué paquete y versión está siendo instalada.
    2. +
  2. Utilice las funciones de instalación para indicar qué archivos y directorios necesitan ser instalados. Usted puede también fijar los archivos que se moverán y serán suprimidos.
    3. +
  3. Comience el proceso de instalar los archivos necesarios.
    4. +
+

Es importante observar que durante el paso dos, usted indica solamente qué archivos deben ser instalados y que suceda cualquier otra operación que usted desee. Ningún archivo se copia hasta el paso tres. Debido a esto, usted puede especificar fácilmente un número de archivos que se instalarán, viene a través de una cierta clase de error, y aborta el proceso entero sin la modificación del sistema del usuario.

+

El Registro de Componentes

+

Mozilla mantiene un archivo que es un registro de todos los componentes que están instalados actualmente. Los componentes incluyen los nuevos paquetes de chrome, skins y extensiones. Cuando un nuevo componente es instalado, el registro se actualiza. El registro almacena los archivos y la información de versión de los componentes instalados. De esa forma, es más fácil comprobar si una versión de su componente está presente y actualizarlo solamente en caso de necesidad.

+

Los componentes del registro trabajan como el registro de Windows. Consiste en una jerarquía de llaves y de valores. Usted no necesita saber mucho sobre eso para crear aplicaciones XUL a menos que usted esté creando sus propios componentes XPCOM.

+

Lo qué usted necesita saber para una instalación es que el registro almacena un sistema de información sobre su aplicación, tal como la lista del archivo y las versiones. Toda esta información se almacena en una llave (y dentro de subkeys) que usted proporciona en la escritura de la instalación (en el paso 1 mencionado arriba).

+

Esta llave esta estructurada como un directorio de la trayectoria de la forma siguiente:

+
/Author/Package Nombre
+
+

Substituya la palabra Author por su nombre y substituya el nombre del paquete por el nombre del paquete que usted está instalando. Por ejemplo:

+
/Xulplanet/Find Files
+
+/Netscape/Personal Security Manager
+
+

El primer ejemplo es el que utilizaremos para el diálogo de búsqueda de archivos. El segundo es la llave usada para el Personal Security Manager.

+

Iniciar la Instalación

+

El objeto Install tiene una función, initInstall, que se puede utilizar para iniciar la instalación. Debe ser ejecutada al principio de su script de instalación. La sintaxis de esta función es como sigue:

+

initInstall( packageName , regPackage , version );

+

Ejemplo:

+

initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");

+

El primer parámetro es el nombre del paquete en forma legible. El segundo parámtro es la llave del registro usada para guardar la información del paquete según lo descrito antes. El tercer parámetro es la versión del paquete que esta siendo instalado.

+

Después, necesitamos definir el directorio donde serán instalados los archivos. Hay dos maneras de hacer esto. El método simple asigna un directorio de la instalación e instala todos los archivos en él. El segundo método permite que usted asigne una destinación basándose en el archivo-por-archivo (o directorio). El primer método se describe abajo.

+

La función setPackageFolder asigna un directorio de la instalación. Para el diálogo de búsqueda de archivos, instalaremos los archivos en el directorio chrome. (realmente podría ponerlos dondequiera.) El setPackageFolder toma una discusión, el directorio donde sera instalado. Para una máxima portabilidad, usted no puede especificar una cadena de caracteres para el directorio. En lugar de eso, usted especifica un identificador de un directorio conocido y abre subdirectorios de él. Así, si sus aplicaciones necesitan instalar algunas bibliotecas de sistema, usted no necesitará saber el nombre de esos directorios.

+

Los identificadores de directorio se enumeran en XULPlanet reference. Para el directorio chrome, el identificador del directorio es 'Chrome'. La función getFolder se puede utilizar para conseguir uno de estos directorios especiales. Esta función tiene dos parámetros, el primero es el identificador y el segundo es un subdirectorio. Por ejemplo:

+
findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+
+

Aquí, conseguimos la carpeta findfile en la carpeta chrome y la pasamos directamente a la función del setPackageFolder. La segunda discusión al getFolder es el subdirectorio en el cual vamos a instalar, que no tiene que existir. Usted puede dejar esta discusión enteramente afuea si usted no necesita uno.

+

Especificar los archivos a instalar

+

Después, usted necesita especificar qué archivos deben ser instalados. Esto implica el uso de dos funciones, addDirectory y addFile. La función addDirectory le dice al instalador que un directorio del archivo XPI (y de todo su contenido) debe ser instalado a un lugar particular. El addFile es similar pero para un solo archivo.

+

Las funciones addDirectory y addFile tienen varias formas. Las más simples solo tienen una discusión, el directorio del instalador para instalar al directorio asignado de la instalación.

+

addDirectory ( dir ); addFile ( dir );

+

Ejemplo:

+

addDirectory("findfile");

+

El ejemplo anterior especificará que el directorio findfile del archivo del instalador debe ser instalado. Podemos llamar estas funciones múltiples veces para instalar otros archivos.

+

Después, desearemos colocar los archivos de busqeuda en el sistema del chrome para poderlo utilizar con un cromo URL. Esto se puede hacer con la función registerChrome. Toma dos discusiones, el primero es el tipo de chrome a colocarse (contenido, skin o ‘locale’). El segundo es el directorio que contiene el archivo de contents.rdf para colocarse. Porque el diálogo de los archivos de busqueda tiene contenido, un archivo skin y un archivo ‘locale’, el registerChrome necesitará ser abierto tres veces.

+
registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+
+

La bandera de DELAYED_CHROME se utiliza para indicar que el cromo debe ser instalado la próxima vez Mozilla está funcionado.

+

Terminar la Instalación

+

Las funciones addDirectory y addFile no copian ningun archivo. Indican solamente qué archivos deben ser instalados. Semejantemente, el registerChrome indica solamente que el chrome debe ser colocado. Para terminar el proceso y para comenzar a copiar archivos, abra la función performInstall. No toma ninguna discusión.

+

el script final para instalar el componente de búsqueda de archivos se muestra abajo:

+
+

Ejemplo

+ 
initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
+
+findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+
+addDirectory("findfile");
+
+registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+
+performInstall();
+
+
+

A continuación veremos algunas funciones adicionales de instalación

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html new file mode 100644 index 0000000000..5965efa462 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/interfaces_xpcom/index.html @@ -0,0 +1,132 @@ +--- +title: Interfaces XPCOM +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Interfaces_XPCOM +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/XPCOM_Interfaces +--- +

 

+

En esta sección, vamos a echar un pequeño vistazo a XPCOM (Cross-platform Component Object Model o Modelo de Objeto de Componentes Multiplataforma), el sistema de objetos que utiliza Mozilla.

+

Llamando a Objetos Nativos

+

Usando XUL podemos construir una interfaz de usuario compleja. Podemos asociarle scripts que modificarán la interfaz y ejecutarán tareas. Pero hay bastantes cosas que no podemos hacer directamente con JavaScript. Por ejemplo, si quisieramos crear una aplicación de correo, necesitaríamos escribir scripts que se conectaran con los servidores de correo para obtener el correo y mandarlo. Pero JavaScript no puede hacer esta clase de cosas.

+

La única forma de llevar a cabo estas tareas sería escribiendo código nativo. También necesitaríamos una forma de que nuestros scripts pudieran comunicarse con el código nativo de forma sencilla. Mozilla nos proporciona todo esto con XPCOM (Modelo de Objeto de Componentes Multiplataforma).

+

Acerca de XPCOM

+

Mozilla está construido mediante una colección de componentes, cada uno de ellos responsable de ejecutar una cierta tarea. Por ejemplo, hay un componente para cada menú, botón y elemento. Estos componentes se construyen a partir de un conjunto de definiciones llamadas interfaces.

+

Una interfaz en Mozilla es una definición de un conjunto de funcionalidades que pueden ser implementadas mediante componentes. Los componentes son los encargados de implementar el código que ejecuta las distintas tareas en Mozilla. Cada componente implementa la funcionalidad tal como está descrita en la interfaz. Un único componente puede implementar múltiples interfaces. Y varios componentes pueden implementar la misma interfaz.

+

Tomemos el ejemplo de un supuesto componente archivo. Se necesitaría crear una interfaz que describiera las propiedades y funciones que pueden realizarse sobre los archivos. Un archivo necesitaría propiedades para almacenar su nombre, la fecha de modificación y su tamaño. Entre las funciones del archivo podríamos incluir movernos por el archivo, copiarlo o borrarlo.

+

La interfaz Archivo solo describe las características de un archivo, no las implementa. La implementación de la interfaz Archivo es tarea del componente. El componente tendrá código que será capaz de obtener el nombre del archivo, la fecha y su tamaño. Además, tendrá código que permita copiarlo y renombrarlo.

+

Mientras implemente la interfaz correctamente, no nos preocupa cómo hace todas estas cosas. Evidentemente, necesitaremos diferentes implementaciones, una para cada plataforma. Las versiones de un componente archivo en Windows y Macintosh serán bastante diferentes. De todas formas, ambas implementarán la misma interfaz. Por lo tanto, podemos utilizar un componente accediendo a las funciones que conocemos de la interfaz.

+

En Mozilla, el nombre de las interfaces viene precedido de ‘nsI’ de forma que sean facilmente reconocibles. Por ejemplo, nsIAddressBook es la interfaz que se utiliza para interaccionar con una libreta de direcciones (address book), nsISound se utiliza para reproducir sonidos y nsILocalFile se utiliza para manejo de archivos.

+

Los componentes XPCOM suelen implementarse con código nativo, lo que significa que normalmente pueden hacer cosas que JavaScript no puede por sí mismo. Existe una forma sencilla de llamar a este código nativo, que veremos dentro de poco. Podemos ejecutar cualquiera de las funciones proporcionadas por el componente tal como se describe en las interfaces que implementa. Por ejemplo, una vez que tenemos un componente, podemos comprobar si implementa nsISound, y, si es el caso, podemos reproducir sonidos a través de él.

+

El proceso de llamar a XPCOM desde un script se realiza a través de XPConnect, una capa que traduce los objetos de script en objetos nativos.

+

Creando Objetos XPCOM

+

Hay tres pasos a seguir a la hora de llamar a un componente XPCOM.

+
    +
  1. Obtener el componente
    2. +
  2. Obtener la parte del componente que implementa la interfaz que queremos utilizar.
    3. +
  3. Llamar a la función que necesitamos
    4. +
+

Una vez que se han llevado a cabo los dos primeros pasos, podemos repetir el último paso tantas veces como sea necesario. Digamos que queremos renombrar un archivo. Para eso podemos utilizar la interfaz nsILocalFile. El primer paso es obtener un componente archivo. Después, hacemos una petición al componente y obtenemos la porción que implementa la interfaz nsILocalFile. Por último, llamamos a las funciones proporcionadas por la interfaz. Esta interfaz se utiliza para representar un único archivo.

+

Hemos visto que las interfaces siempre se nombran comenzando con ‘nsI’. Los componentes, por otra parte, se referencian utilizando una sintaxis URI. Mozilla almacena una lista de todos los componentes disponibles en su propio registro. Un usuario puede instalar nuevos componentes si lo desea. Todo esto funciona de forma muy parecida a los plug-ins.

+

Mozilla proporciona un componente archivo, es decir, un componente que implementa nsILocalFile. Este componente puede ser referenciado para ser utilizado usando la URI ‘@mozilla.org/file/local;1’. Para especificar un determinado componente se utiliza la forma componente: URI. Se puede referenciar otros componentes de forma similar.

+

Se puede utiliar esta URI para obtener el componente. Para obtener un componente podemos utilizar un código JavaScript similar al siguiente:

+
var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance();
+
+

Se obtiene el componente archivo y éste se almacena en la variable unArchivo.

+

La palabra clave Components del ejemplo anterior hace referencia a un objeto general que proporciona algunas funciones relacionadas con componentes. En este caso, obtenemos la clase de un componente a partir de la propiedad classes. La propiedad classes es un vector de todos los componentes disponibles. Para obtener un componente diferente, simplemente tendrías que reemplazar la URI de este componente por la del componente que quieras utilizar. Por último, se crea una instancia con la función createInstance.

+

Deberías comprobar el valor de retorno de createInstance para asegurarte de que no sea null, lo que indicaría que el componente no existe.

+

Llegados a este punto tenemos solo una referencia al componente archivo en sí. Para poder llamar a sus funciones necesitamos obtener una de sus interfaces, en este caso nsILocalFile. Necesitamos añadir una segunda línea de código:

+
var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (unArchivo) unArchivo.QueryInterface(Components.interfaces.nsILocalFile);
+
+

QueryInterface es una función proporcionada por todos los componentes que puede ser utilizada para obtener una interfaz específica de ese componente. Esta función toma un solo parámetro, la interfaz que queremos obtener. La propiedad interfaces del objeto Components contiene una lista de todas las interfaces disponibles. En este caso, utilizamos la interfaz nsILocalFile y la pasamos como parámetro a QueryInterface. El resultado es que unArchivo será una referencia a la parte del componente que implementa la interfaz nsILocalFile.

+

Las dos líneas de JavaScript anteriores pueden ser utilizadas para obtener cualquier interfaz de un componente. Simplemente reemplaza el nombre del componente con el nombre del componente que quieras utilizar y sustituye también el nombre de la interfaz. Por supuesto, también puedes utilizar cualquier nombre de variable. Por ejemplo, para obtener una interfaz sonido, puedes hacer lo siguiente:

+
var sonido = Components.classes["@mozilla.org/sound;1"].createInstance();
+if (sonido) sonido.QueryInterface(Components.interfaces.nsISound);
+
+

Las interfaces XPCOM pueden heredar de otras interfaces. Las interfaces que heredan de otras tienen sus propias funciones y las funciones de todas las interfaces de las que heredan. Todas las interfaces heredan de una interfaz raíz llamada nsISupports. En esta interfaz se define la función QueryInterface, que ya hemos visto. Dado que todos los componentes implementan la interfaz nsISupports, la función QueryInterface está disponible en todos los componentes.

+

Varios componentes distintos pueden implementar la misma interfaz. Normalmente, suelen ser subclases de la original pero no es necesario. Cualquier componente puede implementar la funcionalidad de nsILocalFile. Además, un componente puede implementar varias interfaces. Por esto es por lo que se necesitan dos pasos a la hora de obtener una interfaz con la que llamar a las funciones.

+

De todas formas, existe un atajo que podemos utilizar dado que estas dos líneas se utilizan tan amenudo:

+
var aLocalFile = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
+
+

Esto tiene el mismo efecto que las dos líneas anteriores pero en una sola línea de código, lo cual elimina la necesidad de crear la instancia y pedir una interfaz en dos pasos distintos.

+

Si llamas a QueryInterface sobre un objeto y la interfaz pedida no está soportada por el objeto, se lanza una excepción. Si no estas seguro de si un componente soporta una determinada interfaz, puedes utilizar el operador instanceof para comprobarlo:

+
var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (unArchivo instanceof Components.interfaces.nsILocalFile){
+  // hacer algo
+}
+
+

El operador instanceof devuelve verdadero si unArchivo implementa la interfaz nsILocalFile. Esto tiene el efecto secundario de llamar a QueryInterface, de forma que unArchivo será un nsILocalFile después.

+

Llamando a las Funciones de una Interfaz

+

Ahora que tenemos un objeto que referencia un componente con la interfaz nsILocalFile, podemos llamar a las funciones de nsILocalFile a través de él. La tabla siguiente muestra alguna de las propiedades y métodos de la interfaz nsILocalFile.

+

Propiedad / método Descripción

+
+
+ initWithPath 
+
+ Este método se utiliza para inicializar la ruta y el nombre de archivo para nsILocalFile. El primer parámetro debería ser la ruta del archivo, como ‘/usr/local/mozilla’
+
+ leafName  
+
+ El nombre de archivo sin la parte del directorio
+
+ fileSize 
+
+ El tamaño del directorio
+
+ isDirectory() 
+
+ Devuelve verdadero si nsILocalFile representa un directorio
+
+ delete(recursivo) 
+
+ Borra un archivo. Si el parámetro recursivo es true, también permite borrar un directorio y todos sus archivos y subdirectorios.
+
+ copyTo(directorio,nuevonombre) 
+
+ Copia un archivo a otro directorio, puede usarse también para renombrar el archivo. El parámetro directorio debería ser un nsILocalFile que sirva como apuntador del directorio donde se quiere copiar el archivo.
+
+ moveTo(directorio,nuevonombre) 
+
+ Permite mover un archivo a otro directorio, o renombrar el archivo. El parámetro directorio debería ser un nsILocalFile apuntando al directorio al que se quiere mover el archivo.
+
+

Para borrar un archivo primero tenemos que asignarlo al nsILocalFile. Podemos llamar al método initWithPath para indicar el archivo al que nos referimos. Simplemente asigna la ruta del archivo a su propiedad. Después, llamamos a la función delete. Esta función toma un parámetro que indica si debe borrar de forma recursiva. El siguiente código sirve como demostración de estos dos pasos:

+
var unArchivo = Components.classes["@mozilla.org/file/local;1"].createInstance();
+if (unArchivo instanceof Components.interfaces.nsILocalFile){
+  unArchivo.initWithPath("/mozilla/archivoprueba.txt");
+  unArchivo.delete(false);
+}
+
+

Este código obtiene el archivo de /mozilla/testfile.txt y lo borra. Prueba este ejemplo añadiendo este código a un manejador de evento. Deberías cambiar el nombre de archivo a un archivo existente en tu sistema de archivos y que quieras borrar.

+

En la tabla de funciones anterior, verás dos funciones copyTo y moveTo. Estas dos funciones puede ser utilizadas para copiar archivos y mover archivos respectivamente. Ten en cuenta que estos no toman una cadena de caracteres como parámetro indicando el directorio al que copiar o mover el archivo, si no un nsILocalFile. Esto significa que tendrás que obtener dos componentes archivo. El siguiente ejemplo muestra como copiar un archivo.

+
function copiarArchivo(archivofuente,dirdestino)
+{
+  // obtenemos un componente para el archivo a copiar
+  var unArchivo = Components.classes["@mozilla.org/file/local;1"]
+    .createInstance(Components.interfaces.nsILocalFile);
+  if (!unArchivo) return false;
+
+  // obtenemos un componente para el directorio donde queremos copiar
+  var unDirectorio = Components.classes["@mozilla.org/file/local;1"]
+    .createInstance(Components.interfaces.nsILocalFile);
+  if (!unDirectorio) return false;
+
+  // asignamos las URLs a los componentes archivo
+  unArchivo.initWithPath(archivofuente);
+  unDirectorio.initWithPath(dirdestino);
+
+  // finalmente, copiamos el archivo, sin renombrarlo
+  unArchivo.copyTo(unDirectorio,null);
+}
+
+copyFile("/mozilla/archivoprueba.txt","/etc");
+
+

Servicios XPCOM

+

Existen algunos componentes XPCOM especiales llamados servicios. No tienes que crear instancias de ellos porque solo puede existir uno. Los servicios proporcionan funciones de carácter general que pueden obtener o establecer el valor de información global o ejecutar operaciones en otros objetos. En lugar de llamar a createInstance, llamamos a getService para obtener una referencia al componente del servicio. A parte de eso, los servicios no son demasiado diferentes de los demás componentes.

+

Uno de los servicios que proporciona Mozilla es un servicio de marcadores. Este permite añadir marcadores a la lista de marcadores del usuario. A continuación podemos ver un ejemplo:

+
var marcadores = Components.classes["@mozilla.org/browser/bookmarks-service;1"].getService();
+marcadores.QueryInterface(Components.interfaces.nsIBookmarksService);
+marcadores.addBookmarkImmediately("http://www.mozilla.org","Mozilla",0,null);
+
+

Primero obtenemos el componente “@mozilla.org/browser/bookmarks-service;1�? y su servicio se coloca en una variable marcadores. Utilizamos QueryInterface para obtener la interfaz nsIBookmarksService. La función addBookmarkImmediately proporcionada por esta interfaz puede utilizarse para añadir marcadores. Los dos primeros parámetros de la función son la URL y el título del marcador. El tercer parámetro es el tipo del marcador que valdrá 0 normalmente, y el último parámetro es la codificación de caractéres del documento que estamos añadiendo a marcadores, que puede ser null.

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/introducci\303\263n/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/introducci\303\263n/index.html" new file mode 100644 index 0000000000..9c010ca596 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/introducci\303\263n/index.html" @@ -0,0 +1,75 @@ +--- +title: Introducción +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Introducción +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +
+

Siguiente »

+
+ +

Este tutorial te guiará durante el aprendizaje de XUL (XML Lenguaje de Interfaz de Usuario) el cual es un lenguaje múltiplataforma para describir la interfaz de usuario de las aplicaciones.

+ +

Este tutorial te mostrará la creación de una sencilla interfaz de usuario de un buscador de archivos, muy parecida a la suministrada por la aplicación de Macintosh Sherlock o el cuadro de diálogo de búsqueda de archivos en Windows. Observa que solo se creará la interfaz de usuario y su funcionalidad será limitada. No se implementará la búsqueda de archivos propiamente dicha. Se mostrará una linea azul en la parte izquierda del párrafo donde se modificará el diálogo de búsqueda.

+ +

¿Qué es XUL y porque fue creado?

+ +

XUL (se pronuncia “sul? y rima con “cool?) fue creado para facilitar y acelerar el desarrollo del navegador Mozilla. Es un lenguaje XML, por lo tanto todas las características del XML están también en XUL.

+ +

La mayoría de las aplicaciones necesitan ser desarrolladas usando características de una plataforma específica, convirtiendo el desarrollo de aplicaciones múltiplataformas en una tarea costosa y que consume mucho tiempo. Esto podrá no importarle a algunas personas, pero el usuario podría querer usar la aplicación en otros dispositivos, como equipos de bolsillo.

+ +

En el pasado se desarrollaron muchas soluciones multiplataforma. Por ejemplo, Java tiene como un punto fuerte de venta la soportabilidad. XUL es un lenguaje diseñado específicamente para construir interfaces soportables.

+ +

Desarrollar una aplicación toma mucho tiempo incluso si es sólo para una plataforma. El tiempo requerido para compilar y depurar también puede ser muy largo. Con XUL, una interfaz puede ser implementada y modificada de forma fácil y rápida.

+ +

XUL tiene todas las ventajas de otros lenguajes XML. Por ejemplo, XHTML u otros lenguajes XML como MathML o SVG se pueden usar junto a él. Además, el texto que se muestra con XUL es fácilmente localizable, lo que significa que puede ser traducido a otros idiomas con poco esfuerzo. Se pueden aplicar hojas de estilo para modificar la apariencia de la interfaz de usuario (muy parecido a las funcionalidades de aspectos o temas presentes en Winamp o algunos gestores de ventanas).

+ +

¿Que tipo de interfaz se puede hacer con XUL?

+ +

XUL proporciona la habilidad de crear la mayoría de los elementos encontrados en las interfaces gráficas modernas. Es tan general que este puede ser aplicado a las necesidades específicas de ciertos dispositivos y tan poderoso que los desarrolladores pueden crear sofisticadas interfaces con éste.

+ +

Algunos elementos que pueden ser creados son:

+ + + +

El contenido mostrado puede ser creado desde el contenido de un archivo XUL o con datos de una fuente de datos. En Mozilla, tales fuentes de datos son utilizadas para los mensajes de una cuenta de correo, los marca-páginas y los resultados de búsqueda. El contenido de los menúes, árboles y otros elementos pueden ser llenados con estos datos, o con sus propios datos suministrados en un archivo RDF (Resource Description Framework).

+ +

Existen varios casos en los cuales aplicaciones XUL son creadas:

+ + + +

Los tres primeros tipos necesitan cada uno su instalación en la máquina del usuario. Por lo cual, estos tipos de aplicaciones no tienen restricciones de seguridad, pueden acceder a los archivos locales y leer y escribir las preferencias, por ejemplo. El contenido XUL es normalmente cargado desde un paquete instalado dentro de Mozilla. Los archivos XUL, "scripts" asociados e imágenes de una aplicación podrán ser empaquetados dentro de un simple archivo, descargados e instalados por el usuario. Mozilla proporciona una manera de tener estos paquetes instalados y registrados sin tener que escribir un montón de códigos complejos. Además, estos paquetes pueden incorporarse al navegador u otras aplicaciones para adicionarles características; esta es la forma en que trabajan las extensiones de Firefox.

+ +

También es posible abrir directamente archivos XUL desde el sistema de archivos o desde un sitio web remoto, sin embargo ellos estarán restringidos en el tipo de operaciones que puedan hacer, y algunas características de XUL no trabajarán. En cambio, si Ud. quiere cargar el contenido XUL desde un sitio remoto, el servidor web debe estar configurado para enviar archivos XUL con contenidos de tipo 'application/vnd.mozilla.xul+xml'. El XUL es usualmente almacenado en archivos con una extensión .xul. Ud. puede abrir un archivo XUL con Mozilla tal como abre otros archivos, usando el comando Abrir Archivo desde el menú de Archivo o escribiendo la URL en la barra de dirección.

+ +

¿Que necesita conocer para utilizar este tutorial?

+ +

Debe tener conocimentos de HTML (HyperText Markup Language) y por lo menos, conocimientos básicos de XML y CSS (Cascading Style Sheets). Aquí se exponen algunas reglas que debe tener en mente:

+ + + +

XUL está soportado en Mozilla y otros navegadores basados en el motor Gecko, tales como Netscape 6 o posteriores y Mozilla Firefox. Debido a los diversos cambios que ha tenido la sintaxis de XUL en el tiempo, tener la última versión de su navegador permitirá que los ejemplos trabajen adecuadamente. La mayoría de los ejemplos deben funcionar en Mozilla 1.0 o posteriores. XUL es bastante similar en Firefox y los otros navegadores, aunque tiene algunas diferencias específicas como el soporte de barras de herramientas personalizables.

+ +

Este tutorial intenta cubrir gran parte de la funcionalidad de XUL, no obstante, no trata todas las características. Una vez se haya familiarizado con el lenguaje XUL puede utilizar la referencia de elementos del lenguaje XUL (en) para encontrar otras características soportadas por elementos específicos del lenguaje.

+ +
+

Siguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/introducci\303\263n_a_rdf/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/introducci\303\263n_a_rdf/index.html" new file mode 100644 index 0000000000..8315441b4c --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/introducci\303\263n_a_rdf/index.html" @@ -0,0 +1,136 @@ +--- +title: Introducción a RDF +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Introducción_a_RDF +tags: + - RDF + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction_to_RDF +--- +

En ésta sección, miraremos el Marco de Descripción de Recursos (RDF) (Resource Description Framework).

+ +

Marco de descripción de recursos

+ +

Podemos usar los elementos del árbol para mostrar un conjunto de datos, tales como bookmarks o mensajes de email. Sin embargo, Sería inconveniente hacerlo así ingresando los archivos diretamente en el archivo XUL. Eso haría muy difícil modificar los (marcadores) bookmarks si ellos estuviesen directamente en el archivo XUL. La forma de solucionar ésto es usando un recurso de datos RDF.

+ +

RDF (Marco de Descripción de Recursos) Es un formato que puede ser usado para almacenar recursos tales como marcadores o bookmarks y correos. Alternativamente, datos en otros formatos pueden ser usados y códigos de escritura que leerán el archivo y crearán datos RDF de ellos. Así es como Mozilla funciona, cuando él lee los datos tal como marcadores o bookmarks, el historial o los correos, Mozilla provee datos de recurso para este dato común para que pueda facilmente usarlos.

+ +

Puedes usar cualquiera de los datos de recurso RDF proveidos para poblar árboles con datos a or you can point to an RDF file stored in XML which contains the data. This makes it very convenient to display trees with lots of rows in them. RDF can also populate other XUL elements as well such as listboxes and menus. We'll see this in the next section.

+ +

A very brief overview of RDF will be provided here. For a more detailed guide to RDF, ver Introducción al modelo RDF, en XULPlanet. It is recommended that you read this guide if you are new to RDF.

+ +

Para más información sobre RDF, ver la especificación RDF.

+ +

RDF/XML

+ +

RDF consta de un modelo, el cual es una representación gráfica de datos. RDF/XML es un lenguaje XML que puede ser usado para representar un dato RDF. Ello contiene un conjunto de elementos bastante simples. El ejemplo de abajo muestra una simple plantilla RDF

+ +
<?xml version="1.0"?>
+<RDF:RDF
+  xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+  ...
+</RDF:RDF>
+
+ +

Ésto tiene similitudes con el encabezador de XUL. En vez de window element, el elemento RDF es usado. puedes ver el namespace (espacio de nombre) para RDF fue declarado así para que los elementos RDF sean reconocidos apropiadamente. Dentro del elemento RDF, podrás colocar el dato. para ver algún ejemplo de archivos RDF/XML, Mira aquellas proveidas por Mozilla. Ellos tienen la extensión rdf.

+ +

Base de datos RDF

+ +

Tomemos el ejemplo de una lista de marcadores generados desde RDF.Una lista de marcadores contiene un conjunto de registros,Cada uno con un conjunto asociado a ello, tal como una URL, Un título de marcador y un fecha de visita.

+ +

Piensa en el marcador como una base de datos, el cual es almacenado en una grande tabla con numerosos campos. En el caso de RDF o como sea, Las listas pueden ser jerarquizadas también. Esto es necesario para nosotros podamos tener carpetas o categorías de los marcadores. cada uno de los campos en la base de datos RDF es un recurso, cada uno con su nombre asociado a ello. El nombre es descrito por un URI.

+ +

Por ejemplo, una selección de campos en la lista de marcadores de Mozilla es descrito por los URIs below:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Nombrehttp://home.netscape.com/NC-rdf#NombreBookmark name
URLhttp://home.netscape.com/NC-rdf#URLURL to link to
Descripciónhttp://home.netscape.com/NC-rdf#DescripciónBookmark description
Fecha última visitahttp://home.netscape.com/WEB-rdf#FechaÚltimaVisitaLa fecha en la cual se visitó por última vez
+ +

These are generated by taking a namespace name and appending the field name. In the next section, we'll look at how we can use these to fill in the field values automatically. Note that the last visited date has a slightly different namespace than the other three.

+ +

Ejemplo de archivo RDF/XML

+ +

Below, a sample RDF/XML file is shown, listing a table with three records and three fields.

+ +
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+         xmlns:ANIMALS="http://www.some-fictitious-zoo.com/rdf#">
+
+  <RDF:Seq about="http://www.some-fictitious-zoo.com/all-animals">
+    <RDF:li>
+       <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/lion">
+         <ANIMALS:name>León</ANIMALS:name>
+         <ANIMALS:species>Panthera leo</ANIMALS:species>
+         <ANIMALS:class>Mamífero</ANIMALS:class>
+       </RDF:Description>
+    </RDF:li>
+    <RDF:li>
+       <RDF:Description about="http://www.some-fictitious-zoo.com/arachnids/tarantula">
+         <ANIMALS:name>Tarántula</ANIMALS:name>
+         <ANIMALS:species>Avicularia avicularia</ANIMALS:species>
+         <ANIMALS:class>Araña</ANIMALS:class>
+       </RDF:Description>
+    </RDF:li>
+    <RDF:li>
+       <RDF:Description about="http://www.some-fictitious-zoo.com/mammals/hippopotamus">
+         <ANIMALS:name>Hipopótamo</ANIMALS:name>
+         <ANIMALS:species>Hippopotamus amphibius</ANIMALS:species>
+         <ANIMALS:class>Mamífero</ANIMALS:class>
+       </RDF:Description>
+    </RDF:li>
+  </RDF:Seq>
+</RDF:RDF>
+
+ +

Here, three records have been described, one for each animal. Each RDF:Description tag describes a single record. Within each record, three fields are described, name, species and class. It isn't necessary for all records to have the same fields but it makes more sense to have them all the same.

+ +

Each of three fields have been given a namespace of ANIMALS, the URL of which has been declared on the RDF tag. The name was selected because it has meaning in this case, but we could have selected something else. The namespace feature is useful because the class field might conflict with that used for styles.

+ +

The Seq and li elements are used to specify that the records are in a list. This is much like how HTML lists are declared. The Seq element is used to indicate that the elements are ordered, or in sequence. Instead of the Seq element, you can also use Bag to indicate unordered data, and Alt to indicate data where each record specifies alternative values (such as mirror URLs).

+ +

The resources can be referred to in a XUL file by combining the namespace URL followed by the field name. In the example above, the following URIs are generated which can be used to refer to the specific fields:

+ + + + + + + + + + + + + + + + +
Nombrehttp://www.some-fictitious-zoo.com/rdf#name
Especieshttp://www.some-fictitious-zoo.com/rdf#species
Clasehttp://www.some-fictitious-zoo.com/rdf#class
+ +

Next, we'll see how we can use RDF to populate XUL elements.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html new file mode 100644 index 0000000000..d62ed39007 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/la_url_chrome/index.html @@ -0,0 +1,59 @@ +--- +title: La URL chrome +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/La_URL_chrome +translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL +--- +
+

« AnteriorSiguiente »

+
+ +


+ La siguiente sección describe cómo referirse a los documentos XUL y otros archivos chrome.

+ +

La URL Chrome

+ +

Los archivos XUL pueden accederse con una URL HTTP común, igual que los archivos HTML. Sin embargo, se puede hacer referencia a los paquetes que se instalan dentro del sistema chrome de Mozilla con un URL chrome especial. Los paquetes incluidos con Mozilla ya se encuentran instalados, pero tu puedes registrar los tuyos.

+ +

Los paquetes instalados tienen la ventaja de que no tienen restricciones de seguridad establecidas, que es necesario para muchas aplicaciones. Otra ventaja sobre otro tipo de URL es que maneja automáticamente múltiples temas e idiomas. Por ejemplo, una URL chrome permite referirse a un archivo del tema como una imagen, sin necesidad de saber cuál es el tema que el usuario está usando. Siempre y cuando los nombres de los archivos sean iguales en cada tema, te puedes referir a ellos usando una URL chrome. Mozilla se encargará de determinar dónde se encuentran los archivos para retornar los datos correctos. Esto significa que realmente no importa dónde se encuentre instalado el paquete para poder acceder a el. Las URL chrome son independientes de donde se encuentren instalados fisicamente los archivos. Esto hace más fácil escribir aplicaciones que tienen muchos archivos ya que no tienes que preocuparte por el detalle de dónde se encuentran localizados.

+ +

La sintaxis básica de una URL chrome es la siguiente

+ +
chrome://<nombre del paquete>/<parte>/<archivo.xul>
+
+ +

El texto <nombre del paquete> es el nombre del paquete, como lo puede sermessenger (IM) o el editor HTML. La <parte> es normalmente 'content', 'skin' o 'locale', depende la parte que quieras. <archivo.xul> es simplemente el nombre del archivo.

+ +

Ejemplo: chrome://messenger/content/messenger.xul

+ +

El ejemplo se refiere a la ventana messenger. Puedes apuntar a un archivo que es parte del skin reemplazando 'content' con 'skin' y cambiando el nombre del archivo. Similarmente puedes apuntar a un archivo que es parte de locale usando 'locale' en lugar de 'content'.

+ +

Cuando abres una URL chrome, Mozilla echa un vistazo a través de su lista de paquetes instalados e intenta localizar el archivo JAR o el directorio que concuerde con el nombre del paquete y la parte. El mapeado entre las URL chrome y los archivos JAR se especifica en el archivo de manifiesto almacenado en el directorio chrome. Si reubicases el archivomessenger.jar en algun otro lugar al original y actualizases el archivo de manifiesto adecuadamente, todo continuaría funcionando correctamente ya que está restringido a su lugar de instalación. Usando URLs chrome podemos permitirle detalles como este a Mozilla. Análogamente, si el usuario cambia su tema, la parte 'skin' de la URL chrome se redirecciona a una colección de archivos diferente, sin que se tengan que hacer cambios en el XUL y en los scripts.

+ +

Aquí hay otros ejemplos. Fíjate como ninguna de las URLs de tema o locale establecen especificamente algun directorio.

+ +
chrome://messenger/content/messenger.xul
+chrome://messenger/content/attach.js
+chrome://messenger/skin/icons/folder-inbox.gif
+chrome://messenger/locale/messenger.dtd
+
+ +

Para referirse a algun subdirectorio, solo es necesario agregarlo al final de la URL chrome. Las siguientes URLs se refieren a la ventana de favoritos (bookmarks), presta atención que en ambas se refieren al mismo archivo, pero varía de paquete ya que uno es para la Suite de Mozilla y la otra se usa en Firefox

+ +
chrome://communicator/content/bookmarks/bookmarksManager.xul (Mozilla)
+chrome://browser/content/bookmarks/bookmarksManager.xul (Firefox)
+
+ +

Puedes usar las URLs chrome en cualquier lugar donde se usan las URLs comunes. Incluso puedes escribirlas directamente en la barra de dirección (URL) de la ventana del navegador de Mozilla. Si escribes una de las URL de arriba en la barra de direccion, verás una ventana que aparece donde normalmente iría una pagina web y que en su mayoría es tan funcional como si fuera una ventana separada. Algunas ventanas de dialogo pueden no funcionar correctamente si precisan de argumentos que debe asignar la ventana que la abre.

+ +

En ocaciones verás URLs chrome sin el nombre de un archivo especificado, por ejemplo:

+ +
chrome://browser/content/
+
+ +

En este caso, solo el nombre del paquete y la parte son especificados. Este tipo de referencia selecciona automáticamente un archivo apropiado del directorio correspondiente. Para contenido, se selecciona un archivo con el mismo nombre del paquete y con la extension xul. En el ejemplo de arriba, el archivo browser.xul es el que se selecciona. Para messenger, el arhivo seleccionado sería messenger.xul. Cuando creas tus propias aplicaciones, deberías crear un archivo con la ventana principal usando el mismo nombre de tu aplicación, así podrás referirte a ella de una manera más práctica y corta. Esta es una práctica común para que los usuarios solo necesiten saber el nombre del paquete para ejecutar la aplicación. Por supuesto, para una extensión que modifica la interfaz del navegador, el usuario no necesitar saber la URL ya que la extensión se presenta ella misma en la interfaz gráfica.

+ +

Para una piel (skin), el archivo <nombre_del_paquete>.css se selecciona; para una configuración regional, el archivo <nombre_del_paquete>.dtd es seleccionado.

+ +

Recuerda, chrome URL no está relacionado con su ubicación en el disco. Las dos primeras piezas de chrome URL son el nombre del paquete y la parte (ya sea contenido, piel (skin), o locale). A pesar de que es común colocar los archivos de contenido en un directorio llamado 'content', esto está fuero de convenio alguno, y estos archivos deben ser colocados en una estructura distinta.

+ +

En la siguiente sección veremos como crear archivos .manifest y paquetes.

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html new file mode 100644 index 0000000000..90a38d41c6 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/manipulando_listas/index.html @@ -0,0 +1,168 @@ +--- +title: Manipulando listas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Manipulando_listas +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Manipulating_Lists +--- +

The XUL listbox provides a number of specialized methods.

+ +

Manipulación de una lista

+ +

The listbox element provides numerous methods to retrieve and manipulate its items. Although listboxes may be manipulated using the standard DOM functions as well, it is recommended that the specialized listbox functions be used instead when possible. These functions are bit simpler and will do the right thing.

+ +

The appendItem() function is used to append a new item to the end a list. Similar to the DOM appendChild() function except that it takes a string label, and you do not have to worry about where to add it in the list structure. Here is an example:

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<script>
+function addItem(){
+  document.getElementById('thelist').appendItem("Thursday", "thu");
+}
+</script>
+
+<listbox id="thelist"/>
+
+<button label="Add" oncommand="addItem();"/>
+
+ +

The appendItem() takes two arguments, the label, in this case 'Thursday', and a value 'thu'. The two arguments correspond to the label attribute and the value attribute on the listitem element. The value is used only as an extra optional value associated with an item which you might wish to use in a script.

+ +

Similarly, there is also an insertItemAt() and a removeItemAt() function which inserts a new item and removes an existing item respectively. The syntax is as follows:

+ +
list.insertItemAt(3, "Miércoles", "mié");
+list.removeItemAt(3);
+
+ +

The insertItemAt() function takes an additional argument, the position to insert the new item. The new item is inserted at this index, so, in the example, the new item will be added at position 3 while the item previously at that position will now be at position 4. Remember that the first item is 0. The removeItemAt() function will remove the item at a specific index.

+ +

These three methods are also available for several other XUL elements and work in the same manner. In fact, these methods are part of the nsIDOMXULSelectControlElement interface so any XUL elements which implement this interface have these methods. This includes the menulist, radiogroup and tabs elements. For example, to add a new item to a menulist, you can use the same syntax as for a listbox. The right kind of element will be appended in each situation.

+ +

Lista de selección

+ +

The nsIDOMXULMultiSelectControlElement interface provides two additonal properties, selectedIndex and selectedItem. The former returns the index of the selected item while the latter returns the selected element. For instance the selectedItem of a menulist will be the menuitem that is selected. If no item is selected, selectedIndex will return -1, while selectedItem will return null.

+ +

Obteniendo el ítem seleccionado

+ +

These two properties are commonly inspected during a select event, as in the following example:

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<listbox id="thelist" onselect="alert(this.selectedItem.label);">
+  <listitem label="Corto"/>
+  <listitem label="Medio"/>
+  <listitem label="Largo"/>
+</listbox>
+
+ +

The select event is fired for a listbox when an item in the list is selected. The select handler here displays an alert containing the label of the selected item in the list. Since the select event fired we can assume that an item is selected. In other cases, you may wish to check to ensure that selectedItem is not null before continuing.

+ +

The select event is also fired when a radio button in a radiogroup is selected and when a tab is selected in a tabs element. However, menulists do not fire the select event; instead you can listen to the command event to handle when an item is selected.

+ +

For the tabs element, it is often more convenient to use functions of the tabbox element instead. It also has a selectedIndex function which will return the index of the selected tab. However, to get the selected item, use the tabbox's selectedTab property instead. Or, use the selectedPanel property to get the selected panel, that is, return the content associated with the tab.

+ +

Cambiando la selección

+ +

All of the selection related properties described above may also be assigned a new value to change the selection. In the next example, the selectedIndex property of a radiogroup element is changed based on the value entered in a textbox. This code isn't foolproof though; for example it doesn't check if the value entered is out of range. You will want to make sure that you add this kind of error checking.

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
<script>
+function doSelect(){
+  var val = document.getElementById('number').value;
+  val = Number(val);
+  if (val != null)
+    document.getElementById('level').selectedIndex = val - 1;
+}
+</script>
+
+<hbox align="center">
+  <label value="Escriba un número del 1 a 3:"/>
+  <textbox id="number"/>
+  <button label="Seleccionar" oncommand="doSelect();"/>
+</hbox>
+
+<radiogroup id="level">
+  <radio label="Excelente"/>
+  <radio label="Bueno"/>
+  <radio label="Pobre"/>
+</radiogroup>
+
+ +

Listboxes also support multiple selection and the functions of the nsIDOMXULMultiSelectControlElement interface. This interface provides a number of functions specifically for handling multiple selection. For example the selectedItems property holds a list of the items that are selected, while the selectedCount property holds the number of items selected. Typically, you will use these properties to iterate over the list and perform some operation for each item. Be careful when iterating over the selected items; if you modify the items in the list while iterating, the list will change and the selection properties may return different values. This is one reason why it is useful to manipulate the list by the item rather than by index.

+ +

Deleting selected items

+ +

The following example shows a method of deleting the selected items properly:

+ +

Ejemplo 4: Código Ver en funcionamiento

+ +
<script>
+function deleteSelection(){
+  var list = document.getElementById('thelist');
+  var count = list.selectedCount;
+  while (count--){
+    var item = list.selectedItems[0];
+    list.removeItemAt(list.getIndexOfItem(item));
+  }
+}
+</script>
+
+<button label="Delete" oncommand="deleteSelection();"/>
+
+<listbox id="thelist" seltype="multiple">
+  <listitem label="Cheddar"/>
+  <listitem label="Cheshire"/>
+  <listitem label="Edam"/>
+  <listitem label="Gouda"/>
+  <listitem label="Havartie"/>
+</listbox>
+
+ +

Inside the while loop we

+ + + +

The nsIDOMXULMultiSelectControlElement interface also provides methods for modifying the selected items. For instance, the addItemToSelection() function adds a new item to the set of selected items, without clearing the existing selection. The removeItemFromSelection() function removes a single item from the selection.

+ +

Lista desplegable

+ +

If there are more rows in the listbox than can be displayed, a scroll bar will appear to allow the user to scroll the list. The scroll position may be adjusted using a couple of listbox methods.

+ +

The scrollToIndex() method scrolls to a given row. This listbox will scroll such that the row will be the top row visible, unless the row is near the end of the list of items. The ensureIndexIsVisible() method is similar in that it also scrolls to show a row, but this method does not scroll if the item is already visible. Thus, the former function is used to scroll to a specific row while the latter is used just to make sure that a row is visible. There is also an ensureIndexIsVisible() that takes an item as an argument instead of an index. Compare the effect of both functions at different scroll positions in this example:

+ +

Ejemplo 5: Código Ver en funcionamiento

+ +
<button label="scrollToIndex"
+           oncommand="document.getElementById('thelist').scrollToIndex(4);"/>
+<button label="ensureIndexIsVisible"
+           oncommand="document.getElementById('thelist').ensureIndexIsVisible(4);"/>
+
+<listbox id="thelist" rows="5">
+  <listitem label="1"/>
+  <listitem label="2"/>
+  <listitem label="3"/>
+  <listitem label="4"/>
+  <listitem label="5"/>
+  <listitem label="6"/>
+  <listitem label="7"/>
+  <listitem label="8"/>
+  <listitem label="9"/>
+  <listitem label="10"/>
+  <listitem label="11"/>
+  <listitem label="12"/>
+</listbox>
+
+ +

Seguimos con los objetos de caja de XUL.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html new file mode 100644 index 0000000000..687e1fbcc3 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/medidores_de_progreso/index.html @@ -0,0 +1,41 @@ +--- +title: Medidores de Progreso +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Medidores_de_Progreso +tags: + - Tutorial_de_XUL + - XUL +--- +

En esta seccion veremos como crear medidores progreso (o indicador de progreso).

+

Añadiendo un indicador de progreso

+

Un indicador de progreso es una barra que indica la cantidad de trabajo realizado para completar una acción. Son tipicamente usados cuando se han de descargar ficheros o cuando realizamos una larga operación. XUL tiene indicadores de progreso, habiendo dos tipos de ellos: determinados e indeterminados.

+

Los indicadores de progreso determinados se usan cuando conocemos la cantidad de trabajo necesaria para llevar a cabo una operación. El indicador de progreso se irá llenando y una vez lleno completamente, la operación deberá haber terminado. Este puede usarse para dialogos de descarga de ficheros, ya que conocemos el tamaño del fichero.

+

Los indicadores indeterminados se usan cuando no sabemos cuanto trabajo puede llevar una operación.

+

Indicador de progreso determinado : Image:prog-det.png

+

Indicador de progreso indeterminado : Image:prog-udet.png

+

Los indicadores de progreso tienen la siguiente sintaxis:

+
<progressmeter
+    id="identificador"
+    mode="determined"
+    value="0%"/>
+
+

Los atributos son como sigue:

+
id 
El identificador para el indicador de progreso
mode 
El tipo de indicador de progreso. Si es determined, será un indicador de progreso determinado y se irá llenando conforme se realize la tarea. Sí es undetermined será un indicador de progreso indeterminado, donde no conocemos cuando finalizará la operación. El valor por defecto, si no definimos este atributo, es determined.
+
+
value 
El valor actual del indicador de progreso. Solo deberíamos usar cuando el indicador de progreso es del tipo determinado. El valor debe ser un porcentaje desde 0% a 100%. Este atributo puede ser cambiado desde un script conforme vaya completandose la tarea.
+
+
+

Incluyamos un indicador de progreso a nuestro dialogo de encontrar ficheros. Deberíamos poner un indicador indeterminado, ya que no sabemos cuantos ficheros tendremos que comprobar en nuestra búsqueda o cuanto tardaremos en hacerlo. Sin embargo, pondremos uno determinado por ahora para ver como funciona. El indicador de progreso normalmente solo aparecerá cuando la búsqueda se está llevando a cabo. Más tarde crearemos un script para mostrarlo y ocultarlo.

+

 

+
<hbox>
+
+  <progressmeter value="50%" style="margin: 4px;"/>
+
+
  <spacer flex="1" />
+</hbox>
+
+

Image:progress1.png

+

El atributo lo hemos puesto como 50% para poder ver el indicador inicialmente. Tambíen le hemos asignado un margen de 4 pixels para separarlo de los márgenes de la ventana. Tal como indicamos anteriormente, solo queremos ver el indicador de progreso cuando se esté realizando la búsqueda. Un script lo ocultará y mostrará cuando sea necesario.

+
+

En la proxima seccion, aprenderemos como adicionar elementos a una ventana usando HTML.

+

Categorías

+

links interwikis

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_con_desplazamiento/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_con_desplazamiento/index.html" new file mode 100644 index 0000000000..c5fb82fb1c --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_con_desplazamiento/index.html" @@ -0,0 +1,56 @@ +--- +title: Menús con desplazamiento +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_con_desplazamiento +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +--- +

Esta sección describe los menús con desplazamiento y cómo usar el mecanismo con otros elementos.

+ +

Crear un menú grande

+ +

Te preguntarás qué sucede si creas un menú con muchas opciones en él, de tal forma que no todos los ítems aparezcan en la pantalla a la vez. Mozilla scrolling-menu.jpgproveerá un mecanismo de despliegue que te permitirá moverte a través de los ítems.

+ +
Image:menuscroll1.png
+ +

Si el espacio disponible es demasiado pequeño, aparecerán flechas al final de cada menú. Si mueves el ratón sobre las flechas, el menú se desplegará hacia abajo o hacia arriba. Si el espacio disponible es lo suficientemente grande, las flechas no aparecerán. Observa que el comportamiento exacto de este mecanismo dependerá del tema actual.

+ +

Este comportamiento es automático. No tienes que hacer nada para obtener menús desplegables. Se aplicará a menús en barras de menú, en emergentes o listas de menús. Se implementa usando un elemento arrowscrollbox. Este elemento puede usarse para crear cajas desplegables con flechas.

+ +

El elemento arrowscrollbox puede usarse en cualquier lugar donde se pueda usar una caja normal. No tienes que usarlo en menús. Siempre es un caja vertical y puede contener cualquier elemento en su interior. Puedes usarlo para implementar una lista cuando no deseas hacer un menú desplegable.

+ +

Ejemplo - lista de botones con desplazamiento

+ +

El siguiente ejemplo muestra cómo crear una lista desplegable de botones (tendrás que redefinir el tamaño de la ventana para ver los botones de flechas):

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<arrowscrollbox orient="vertical" flex="1">
+  <button label="Rojo"/>
+  <button label="Azul"/>
+  <button label="Verde"/>
+  <button label="Amarillo"/>
+  <button label="Naranja"/>
+  <button label="Plata"/>
+  <button label="Lavenda"/>
+  <button label="Oro"/>
+  <button label="Turquesa"/>
+  <button label="Melocotón"/>
+  <button label="Marrón"/>
+  <button label="Negro"/>
+</arrowscrollbox>
+
+ +

Si pruebas este ejemplo, primero abrirá a tamaño total. Sin embargo, si encoges el alto de la ventana, las flechas de despliegue aparecerán. Al volver a hacer la ventana más grande, las flechas desaparecerán.

+ +

Puedes establecer una altura máxima usando la propiedad CSS max-height en el arrowscrollbox para limitar el tamaño de la caja de despliegue y así hacer que las flechas aparezcan todo el tiempo.

+ +

El arrowscrollbox es principalmente útil en menús y emergentes.

+ +

A continuación veremos cómo añadir gestores de eventos a elementos XUL.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_de_barras_simples/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_de_barras_simples/index.html" new file mode 100644 index 0000000000..30f475f63b --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_de_barras_simples/index.html" @@ -0,0 +1,168 @@ +--- +title: Barras de menús simples +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_de_Barras_Simples +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - Tutoriales + - XUL + - para_revisar +translation_of: Archive/Mozilla/XUL/Tutorial/Simple_Menu_Bars +--- +

En esta sección veremos cómo crear una barra de menús.

+

Crear un menú

+

XUL tiene varias formas de crear un menú. La más simple es agregar una barra de menús con una fila de menús en ella como tienen muchas aplicaciones. También se pueden crear menús emergentes. Las características de menús en XUL consisten en una cantidad de elementos diferentes que permiten la creación de barras de menú o menús emergentes. Los elementos u opciones en dichos menús pueden ser personalizados sin mucha dificultad. Vimos ya una parte de cómo construir un menú usando menulist. En esta sección ampliaremos el tema.

+

Las barras de menús son creadas, generalmente, de manera muy similar a las barras de herramientas o toolbar. Una barra de menús puede ser ubicada de manera opcional dentro de una toolbox (caja de herramientas) y el menú funcionará como cualquier otra barra de herramientas. XUL, sin embargo, tiene ciertos elementos de menú especiales que proporcionará funciones características de los menús clásicos.

+

Hay 5 elementos asociados con la creación de una barra de menús y sus menús, que se explican brevemente a continuación pero en los que se profundizará más adelante:

+
+
+ menubar
+
+  
+
+ El contenedor de una fila de menús.
+
+

menu

+
+
+
+
+ A pesar del nombre, es sólo el título del menú en la barra (menubar). Este elemento puede aparecer, también, de forma separada.
+
+
+
+ menupopup
+
+  
+
+ La ventana emergente que aparecerá cuando se haga clic en el título del menú. Esta caja contendrá una lista de comandos.
+
+
+
+ menuitem
+
+  
+
+ Un comando en un menú. Aparece dentro de menupopup.
+
+
+
+ menuseparator
+
+  
+
+ Una barra de separación en un menú. Aparece dentro de menupopup.
+
+

Ahora ya se pueden personalizar los menús  dentro de una barra de menús para poder contener lo que queramos en cualquier plataforma excepto Macintosh. Esto es debido a que Macintosh posee su menú especial propio en la parte superior de la pantalla y es controlado por el sistema. Si bien se pueden crear menús personalizados, cualquier regla de estilo especial o elementos que no sean menús pueden ser omitidos. Esto se debe tener muy presente al crear menús.

+
Ejemplo de una barra de menús simple
+

Ejemplo:

+
+ simple_mnubar.jpg
+
<toolbox flex="1">
+  <menubar id="ejemplo-barra-de-menus">
+    <menu id="menu-archivo" label="Archivo">
+      <menupopup id="archivo-emergente">
+        <menuitem label="Nuevo"/>
+        <menuitem label="Abrir"/>
+        <menuitem label="Guardar"/>
+        <menuseparator/>
+        <menuitem label="Salir"/>
+      </menupopup>
+    </menu>
+    <menu id="menu-editar" label="Editar">
+      <menupopup id="editar-emergente">
+        <menuitem label="Deshacer"/>
+        <menuitem label="Rehacer"/>
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+
+

Aquí, una barra de menús sencilla es creada utilizando el elemento menubar. Éste crea una fila en donde se ubicarán los menús. Dos menús: Archivo y Editar se crearon en ella. Los elementos menu crean el título en la parte superior del menú, el que aparece en la barra de menús. Los menús emergentes se crean utilizando el elemento menupopup. Aparecerán cuando el usuario haga clic en el menú padre. El tamaño de dicho menú emergente dependerá de lo que contenga, siempre siendo suficientemente amplio como para que entren todos los comandos creados utilizando el elemento menuitem. Cada uno representa un comando individual dentro del menú emergente.

+

También se pueden crear separadores dentro de los menús utilizando el elemento menuseparator. Se utiliza para separar grupos de menuitems.

+ +

menubar es una caja que contiene menús. Nótese que fue ubicada en una toolbox flexible. menubar no tiene atributos especiales sino que es un tipo de caja. Esto significa que se podría crear un menubar vertical con sólo configurar el atributo  orient a vertical.

+

Elemento menu

+

El elemento menu funciona de manera muy similar al elemento button. Acepta algunos atributos idénticos y otros adicionales:

+
+
+ id
+
+  
+
+ El identificador único del título del menú.
+
+

label

+
+
+
+
+ El texto que va a aparecer en el menú (Archivo y Editar en el ejemplo anterior).
+
+
+
+ disabled
+
+  
+
+ Es un atributo booleano que determina si el menú está deshabilitado o no. Aunque se puede, rara vez se necesita deshabilitar un menú completo. Este atributo puede ser configurado como true o false, siendo este último valor aquél por defecto.
+
+
+
+ accesskey
+
+  
+
+ La tecla que el usuario puede presionar para activar el menú. Por lo general, ésta es la letra que aparece subrayada en el título del menú. Mozilla se fijará en el atributo label y le agregará el subrayado al carácter especificado aquí. Por esta razón es que se debe especificar un carácter que aparece en dicho título de ser posible (la tecla de acceso aún funcionará si no aparece).
+
+
+ Image:menubar-ex2.jpg
+
+ El elemento menu normalmente se ubica en un menubar, aunque no necesariamente. Sin embargo, le aportará un aspecto diferente. La imagen muestra lo que el aspecto que tendría el ejemplo anterior sin la barra de menús.
+

Elemento menupopup

+
+ El elemento menupopup genera el menú emergente que contiene los comandos. Es un tipo de caja que, por defecto, se orienta verticalmente. Se puede cambiar a horizontal si se desea que se ubiquen en una fila los menuitem. Normalmente sólo elementos menuitem y/o menuseparator se ubicarán en un menupopup; pero se puede ubicar cualquier elemento dentro de un menupopup, aunque será ignorado en una Macintosh.
+

Elemento menuitem

+

El elemento menuitem es muy similar al elemento menu y tiene algunos de los mismos atributos:

+
+
+ id
+
+  
+
+ El identificador único del título del menú.
+
+
+
+ label
+
+  
+
+ El texto que va a aparecer en el menú.
+
+
+
+ disabled
+
+  
+
+ Es un atributo booleano que determina si el menú está deshabilitado o no. Este atributo puede ser configurado como true o false, siendo este último valor aquél por defecto.
+
+
+
+ accesskey
+
+  
+
+ La tecla que el usuario puede presionar para activar el menú. Por lo general, ésta es la letra que aparece subrayada en el título del menú. Mozilla se fijará en el atributo label y le agregará el subrayado al carácter especificado aquí. Por esta razón es que se debe especificar un carácter que aparece en dicho título de ser posible.
+
+
+
+ acceltext
+
+  
+
+ Especifica la tecla de acceso rápido que aparece junto al texto del menú. Sin embargo, no asocia dichas teclas al menuitem. Se profundizará en esto más adelante.
+
+

Elemento menuseparator

+

El elemento menuseparator no posee atributos especiales. Simplemente crea una barra horizontal (o vertical) entre los elementos menuitems vecinos.

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_emergentes/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_emergentes/index.html" new file mode 100644 index 0000000000..c44daf0dcd --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/men\303\272s_emergentes/index.html" @@ -0,0 +1,228 @@ +--- +title: Menús emergentes +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Menús_emergentes +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +--- +

En la última sección vimos cómo crear un menú en una barra de menú. XUL tiene además la capacidad de crear menús emergentes. Los menús emergentes normalmente se muestran cuando el usuario presiona el botón derecho del ratón.

+ +

Crear un menú emergente (menú popup)

+ +

XUL tiene tres tipos diferentes de elementos emergentes, los cuales se describen a continuación. La principal diferencia entre ellos es la manera en la que aparecen.

+ + + +
+
El menú emergente simple es una ventana emergente que aparece al presionar el botón izquierdo del ratón sobre un elemento. Son como los menús que aparecen en las barras de menú, excepto que pueden ponerse en cualquier lugar y se les puede poner cualquier contenido. Un buen ejemplo es el menú con despliegue hacia abajo que aparece cuando haces clic sobre la pequeña flecha hacia abajo que sigue a los botones adelante y atrás en una ventana del explorador.
+
+ + + +
+
El menú emergente de contexto es una ventana emergente que aparece cuando el usuario presiona el botón de menú contextual, el cual es usualmente el botón derecho del ratón. La forma exacta en que un menú contextual es abierto varía en cada plataforma. En Macintosh, por ejemplo, el usuario puede bien presionar la tecla Control y hacer clic con el ratón o mantener presionado el botón del ratón por un momento. Además, es posible abrir un menú contextual sin usar el ratón, por ejemplo presionando la tecla Menú en un teclado.
+
+ + + +
+
Una ventana emergente de información aparecerá cuando el usuario pasa el ratón sobre un elemento. Este tipo de emergentes puede usarse para proporcionar una descripción de un botón con mayor detalle del que puede ofrecer el botón mismo.
+
+ +

Los tres tipos de elementos emergentes difieren en la forma en que son invocados por el usuario. El tipo de elemento emergente es determinado por el elemento que lo invoca.

+ +

Declarar el contenido de un emergente

+ +

Un elemento emergente se describe usando el elemento menupopup. No tiene atributos especiales y es un tipo de caja. Cuando es invocado, aparecerá una ventana conteniendo lo que sea que hayas puesto dentro del elemento menupopup. Sin embargo, deberías poner siempre un atributo id en el menupopup ya que sirve para asociar el elemento emergente con un elemento. Veremos lo que esto significa pronto. Pero primero, un ejemplo:

+ +
<popupset>
+  <menupopup id="clipmenu">
+    <menuitem label="Cortar"/>
+    <menuitem label="Copiar"/>
+    <menuitem label="Pegar"/>
+  </menupopup>
+</popupset>
+
+ +

Como puede verse aquí, se ha creado un menú emergente simple con tres órdenes. El elemento menupopup contiene los tres elementos del menú menuitem . Además, como observarás, el id se ha puesto en el elemento menupopup.

+ +

El elemento popupset contiene toda la declaración del menú emergente. Este es un contenedor genérico de emergentes y es opcional. Este no aparece en pantalla sino que se usa como un apartado en donde puedes declarar todos tus emergentes. Como su mismo nombre implica (popupset), puedes poner múltiples declaraciones de elementos emergentes dentro de éste. Solamente tienes que añadir, detrás del primer elemento popupset, todos los que quieras adicionalmente. Puedes tener más de un popupset en un archivo, pero lo normal es que tengas únicamente uno.

+ +

Asociar un emergente con un elemento

+ +

Ahora que hemos creado el elemento emergente, es hora de hacer que se muestre. Para hacerlo necesitamos asociar el emergente con un elemento en donde debería aparecer. Hacemos esto porque queremos que el emergente aparezca únicamente cuando el usuario haga clic en una determinada área de la ventana. Habitualmente será un botón o una caja concretos.

+ +

Para asociar el emergente con un elemento agrega un atributo de entre tres posibles al elemento. El atributo que agregues dependerá del tipo de emergente que quieras crear. Para un menú emergente simple, agrega un atributo popup al elemento. Para un menú emergente de contexto, agrega un atributo context. Por último, para un emergente de información, agrega un atributo tooltip.

+ +

El valor del atributo debe ser el id del menupopup que quieras que aparezca. Este es el porqué de poner un id en el emergente. De esa manera es fácil tener múltiples menús emergentes en un archivo.

+ +

En el ejemplo de arriba, queremos hacer que el emergente sea un menú contextual. Eso significa que necesitamos usar el atributo context y agregarlo al elemento con el cual queremos tener asociado el emergente. El ejemplo de abajo muestra cómo debemos hacer esto:

+ +

Ejemplo 1 : Código Ver en funcionamiento

+ +
Image:popups-ex1.png
+ +
<popupset>
+  <menupopup id="clipmenu">
+    <menuitem label="Cortar"/>
+    <menuitem label="Copiar"/>
+    <menuitem label="Pegar"/>
+  </menupopup>
+</popupset>
+
+<box context="clipmenu">
+  <label value="Haz clic con el botón derecho para ver el menú"/>
+</box>
+
+ +

Aquí, el menú emergente ha sido asociado con una caja. Cada vez que hagas clic contextual (clic con el botón derecho) en cualquier lugar de la caja, aparecerá el menú emergente. El emergente también aparecerá aun si haces clic sobre los descendientes de la caja, así que también funcionará si haces clic en el elemento label. El atributo context se ha usado para asociar la caja con un menú emergente con el mismo id. En este caso, aparecerá el menú emergente clipmenu. De esta forma, puedes tener varios emergentes y asociar cada uno con diferentes elementos.

+ +

Podrías asociar múltiples emergentes con el mismo elemento poniendo más atributos de diferente tipo en un elemento. Podrías además asociar el mismo emergente con múltiples elementos, lo cual es una ventaja de esta sintaxis. Los emergentes solamente pueden asociarse a elementos XUL; no pueden asociarse con elementos HTML.

+ +

Informativos (Tooltips)

+ +

Aquí veremos una forma simple de crear emergentes de información. Hay dos maneras de crearlos. La manera más simple, que es la más común, es agregar un atributo tooltiptext a un elemento para el que quieres asignar un emergente de información.

+ +

El segundo método es usar un elemento tooltip que tenga el contenido de un emergente de información. Esto requiere que tengas un bloque de contenido separado para cada emergente de información o que tengas un script que establezca el contenido. Sin embargo, esto te permite usar cualquier contenido además de texto en el emergente de información.

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<button label="Guardar" tooltiptext="Haz clic aquí para guardar tu trabajo"/>
+
+<popupset>
+  <tooltip id="moretip" orient="vertical" style="background-color: #33DD00;">
+    <description value="Ver más información"/>
+    <description value="¿De verdad?" style="color: red;"/>
+  </tooltip>
+</popupset>
+
+<button label="Más" tooltip="moretip"/>
+
+ +

Estos dos botones tienen un emergente de información cada uno. El primero usa el estilo por defecto. El segundo usa un estilo personalizado que tiene un fondo de diferente color y estilos aplicados al texto. El emergente ha sido asociado al botón Más usando el atributo tooltip, el cual ha sido establecido al correspondiente id del elemento tooltip. Observa que el elemento tooltip sigue estando ubicado dentro de un elemento popupset, como los otros tipos de emergentes.

+ +

Alineación del emergente

+ +

Por defecto, las ventanas emergentes y de contexto aparecerán donde esté el puntero del ratón. Los emergentes de información se ubicarán ligeramente por debajo del elemento de tal forma que el puntero del ratón no los oculte. Hay casos sin embargo, en los que vas a querer indicar con mayor detalle dónde debe aparecer el emergente. Por ejemplo, el menú emergente que aparece cuando haces clic en el botón Atrás en un explorador debería aparecer por debajo del botón Atrás y no donde está el puntero del ratón.

+ +

Para cambiar la posición del emergente, puedes usar un atributo adicional, position, en el menupopup. Puedes incluso agregarlo al elemento menupopup. Este atributo se usa para indicar el lugar del emergente relativo al elemento que lo invoca. Puede establecerse en distintos valores, que se describen brevemente a continuación:

+ +
+
after_start
+
El emergente aparece debajo del elemento con los bordes izquierdos de éste y la ventana emergente alineados. Si la ventana emergente es más grande que el elemento, se extiende hacia la derecha. Este es el valor usado para los menús colgantes asociados con los botones Atrás y Adelante de los exploradores.
+
+ +
+
after_end
+
El emergente aparece debajo del elemento con los bordes derechos de éste y la ventana emergente alineados.
+
+ +
+
before_start
+
El emergente aparece arriba del elemento con los bordes izquierdos de éste y la ventana emergente alineados.
+
+ +
+
before_end
+
El emergente aparece arriba del elemento con los bordes derechos de éste y la ventana emergente alineados.
+
+ +
+
end_after
+
El emergente aparece a la derecha del elemento con los bordes inferiores de éste y la ventana emergente alineados.
+
+ +
+
end_before
+
El emergente aparece a la derecha del elemento con los bordes superiores de éste y la ventana emergente alineados.
+
+ +
+
start_after
+
El emergente aparece a la izquierda del elemento con los bordes inferiores de éste y la ventana emergente alineados.
+
+ +
+
start_before
+
El emergente aparece a la izquierda del elemento con los bordes superiores de éste y la ventana emergente alineados.
+
+ +
+
overlap
+
El emergente aparece encima del elemento.
+
+ +
+
at_pointer
+
El emergente aparece en la posición del puntero del ratón.
+
+ +
+
after_pointer
+
El emergente aparece en la misma posición horizontal del puntero del ratón pero debajo del elemento. Así es como aparecen los emergentes de información.
+
+ +

Al agregar el atributo position al elemento emergente, puedes especificar con precisión dónde aparece el emergente. No puedes especificar la posición exacta de un píxel. El atributo position puede usarse con los tres tipos de emergentes, aunque probablemente no cambiarás el valor de un emergente de información. El ejemplo de abajo demuestra cómo crear un botón Atrás con un menú emergente:

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
<popupset>
+  <menupopup id="backpopup" position="after_start">
+    <menuitem label="Página 1"/>
+    <menuitem label="Página 2"/>
+  </menupopup>
+</popupset>
+
+<button label="Hazme aparecer" popup="backpopup"/>
+
+ +

Nuestro ejemplo con un buscador de archivos

+ +

Agreguemos un menú emergente simple al dialogo de búsqueda de archivos. Por simplicidad, solo repetiremos los contenidos del menú Editar. Hagamos que el emergente aparezca cuando se haga clic sobre la primera pestaña del panel:

+ +
<popupset>
+  <menupopup id="editpopup">
+    <menuitem label="Cortar" accesskey="t"/>
+    <menuitem label="Copiar" accesskey="c"/>
+    <menuitem label="Pegar" accesskey="p" disabled="true"/>
+  </menupopup>
+</popupset>
+
+<vbox flex="1">
+.
+.
+.
+
+<tabpanel id="searchpanel" orient="vertical" context="editpopup">
+
+ +

Aquí se ha agregado un emergente simple similar al del menú Editar. Si haces clic derecho (Control-clic en Macintosh) en cualquier lugar del primer panel, aparecerá el emergente. Sin embargo, el emergente no aparecerá si haces clic en otro lugar. Observa que la caja de texto tiene su propio contenido para el menú emergente, el cual prevalecerá sobre el especificado por nosotros.

+ +

Otro ejemplo : Código Ver en funcionamiento

+ +


+ A continuación seguiremos con la creación de menús con desplazamiento.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html new file mode 100644 index 0000000000..231555c72a --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/modelo_de_objeto_de_documento/index.html @@ -0,0 +1,230 @@ +--- +title: Modelo de objeto de documento +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Modelo_de_objeto_de_documento +tags: + - DOM + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Document_Object_Model +--- +

 

+ +

El modelo de objeto de documento (DOM) can be used with XUL elements to get information about them or modify them.

+ +

Introducción al 'DOM'

+ +

El modelo de objeto de documento (DOM) es usado para almacenar el árbol de los nodos XUL. Cuando un archivo XUL es cargado, las etiquetas son analizadas y convertidas en un documento con estructura jerárquica de nodos, uno por cada etiqueta y bloque te texto. La estructura DOM puede ser examinada y modificada usando varios métodos con esta finalidad. Los elementos XUL específicos también proporcionan funciones adicionales que pueden ser usadas.

+ +

Cada archivo XUL que es cargado tendrá su propio documento visualizado en una ventana o marco. A pesar que hay solo un documento asociado con una ventana en cada momento, se puede carga documentos adicionales usando varios métodos.

+ +

En Mozilla, el DOM puede ser accedido y manipulado utilizando JavaScript. Los diversos objetos DOM tienen funciones las cuales pueden ser llamadas por script. Sin embargo, es importante advertir que la DOM es un API que es accesible por JavaScript. JavaScript por sí mismo , es exactamente un lenguaje de scripting que permite el acceso a dichos objetos porque Mozilla dispone esos objetos para su uso.

+ +

En JavaScript, siempre hay un único objeto global que está siempre disponible. Se puede hacer referencia a sus propiedades y métodos. Por ejemplo, si un objeto global tiene como propiedad 'name', se puede cambiar el nombre (name) con el código 'name = 7', sin haber especificado objeto alguno. En el contexto de un browser, la es ventana es un objeto global y asimismo es cierto para XUL. Naturalmente, este objeto global sera diferente para cada ventana. Cada marco tendrá también un objeto ventana separado.

+ +

La ventana es a menudo referida usando la propiedad de window, a pesar de que es optativo. En ocasiones, esto se hace simplemente para clarificar el alcance del método al que hace referencia. Por ejemplo, en el siguiente fragmento de código, las dos líneas son equivalentes.

+ +
window.open("test.xul","_new");
+open("test.xul","_new");
+
+ +

Cuando se declara una función o una variable en el nivel más alto de un script, es decir desde otra función, se está de hecho declarando una propiedad del objeto global. En XUL, cada función declarada será definida como propiedad del objeteo window. Por ejemplo, en el siguiente código se visualizará el texto 'Message' en una alerta doble.

+ +
function getText(){
+  return "Message";
+}
+
+alert(getText());
+alert(window.getText());
+
+ +

De esta manera, si se desea acceder a variables o llamar a funciones declaradas en un script usado por otra ventana, solo se necesita acceder usando el objeto window de la otra ventana. Por ejemplo, si se combina los dos últimos ejemplos en un único archivo, podríamos querer llamar a la función getText() desde la otra ventana (por ejemplo la ventana 'test.xul'). Para hacerlo, se puede utilizar lo siguiente:

+ +
alert(window.opener.getText());
+
+ +

Cada ventana tiene un opener property que mantiene a dicho objeto ventana abierto. En este ejemplo, se recupera el opener window y llamamos a la función getText() declarada en el script. Observar que se ha explicitado la propiedad con el identificador 'window' para clarificarlo.

+ +

El método de la apertura de la ventana (window's open())también devuelve una referencia a la nueva ventana, por lo que puede llamar a funciones de la nueva ventana desde el opener. Es importante advertir, que sin embargo, el método open() lo devuelve antes de que la ventana haya sido complemetamente cargada, por lo que no estarán disponibles todavía funciones.

+ +

EL objeto ventana no está definido por ninguna especificación DOM, pero Mozilla en ocasiones lo considera parte del DOM Level 0, un nombre es usado por varios desarrolladores para referirse a este tipo de funciones antes que se hubieran añadido especificaciones. El documento actual visualizado en una ventana puede ser recuperado usando la propiedad del documento de la ventana. Desde que esto es uno de los más propiedades referenciadas de una ventana, la propiedad documento property es utilizado sin la partícula 'window.' .

+ +

Mozilla provee varios objetos documento diferentes dependiendo del tipo de documento. Hay tres documentos principales HTMLDocument, XMLDocument, y XULDocument, para documentos HTML, XML y XUL respectivamente. Obviamente, esto es uno de los últimos tipos de documento usados por XUL. Los tres tipos de documentos son muy parecidos, de hecho comparten la misma implementación básica. Sun embargo, hay algunas funciones especificadads para cada tipo de documento.

+ +

Recuperación de elementos

+ +

El método más común para recuperar un elemento en un documento es dar al elemento un atributo con el id y el uso del documento getElementById(). Hemos añadido el atributo id a una serie de elementos a encontrar el archivo de diálogo. Por ejemplo, podríamos obtener el estado de una casilla de verificación mediante el código que aparece a continuación:

+ +
var state = document.getElementById('casecheck').checked;
+
+ +

El valor casecheck corresponde al id del checkbox (que es case sensitive: distingue entre mayúsculas y minúsculas) . Una vez que tenemos una indicación de si está marcada o no, podemos utilizar el estado para llevar a cabo la búsqueda. Podríamos hacer algo similar para las otras casillas de verificación, o cualquier otro elemento que tiene un id. Se necesita para obtener el texto en el campo de entrada, por ejemplo.

+ +
+

Nuestro ejemplo

+ +

No tiene sentido tener la barra de progreso y el árbol de dato de pruebas desplegado cuando el dialogo de búsqueda de archivos se visualiza primero. Estos se agregaron a fin de que pudiéramos verlos. Dejémoslo fuera y aparecerá sólo cuando se presione el botón Buscar. En primer lugar, tenemos que hacerlos inicialmente invisible. El atributo hidden, se utiliza para controlar si un elemento es visible o no.

+ +

Vamos a cambiar la medida del progreso a fin de que esté inicialmente oculta. Además, vamos a añadir un atributo id de manera que podemos referirnos a ella en una secuencia de comandos para mostrar y ocultar. Si bien estamos en ello, también vamos a ocultar los divisores y el árbol de resultados que solo se necesitarán después de que la búsqueda se haya realizado.

+ +
<tree id="results" hidden="true" flex="1">
+  .
+  .
+  .
+<splitter id="splitbar" resizeafter="grow" hidden="true"/>
+
+<hbox>
+
+  <progressmeter id="progmeter" value="50%"
+    style="margin: 4px;" hidden="true"/>
+
+ +

Hemos agregado el atributo hidden y fijado el valor true. Esto hace que el elemento se oculte cuando aparece por primera vez.

+ +

A continuación, vamos a añadir una función que se llama cuando el botón Buscar se presiona. Vamos a poner el scripts en un archivo separado llamado findfile.js. En la sección anterior, añadimos el elemento script en el archivo XUL. Si no lo ha hecho, hagalo ahora, como se indica a continuación. Un controlador oncommand también se añadirá al botón Buscar.

+ +
<script src="findfile.js"/>
+  .
+  .
+  .
+<button id="find-button" label="Find"
+   oncommand="doFind();"/>
+
+ +

Ahora, crearemos otro archivo llamado findfile.js en el mismo directorio que findfile.xul. Vamos a añadir la función doFind() en este archivo. La etiqueta script permite código que pueda figurar directamente dentro de ella. Sin embargo, por diversas razones, entre ellas un mejor rendimiento, siempre se deben poner scripts en archivos separados, con excepción de breves fragmentos que pueden ponerse directamente en el controlador de eventos.

+ +
function doFind(){
+  var meter = document.getElementById('progmeter');
+  meter.hidden = false;
+}
+
+ +

Esta función primero obtiene una referencia del medidor de progreso utilizando su identificador, progmeter. La segunda línea del cuerpo de la función cambia el estado oculto de modo que el elemento es visible de nuevo.

+ +

Por último, vamos a tener un cuadro de alerta pop-up que muestra lo que será buscado. Por supuesto, no queremos que esté en la versión final, pero vamos a añadirlo para asegurarnos que algo pasará.

+ +
function doFind(){
+  var meter=document.getElementById('progmeter');
+  meter.hidden = false;
+  var searchtext=document.getElementById('find-text').value;
+  alert("Searching for \"" + searchtext + "\"");
+}
+
+ +

Ahora, con ese cuadro de alerta ahí, sabemos lo que debería suceder cuando haga clic en el botón Buscar. Podríamos añadir código adicional para obtener la selección de los cuadros desplegables.

+
+ +

XUL Element DOM

+ +

Every XUL element has a set of attributes, a set of properties and a set of children.

+ + + +

It is possible to manipulate the attributes, properties and children of an element dynamically using DOM methods.

+ +

It is important to note that attributes and properties are separate things. Just because there is an attribute with a given name does not mean that there is a corresponding property with the same name. However, it will often be the case that such a property will exist. For example, to get the flex of an element, you can use the flex property. In this case, the underlying code just returns the value of the attribute. For other properties, XUL will perform more complex calculations.

+ +

You can manipulate the attributes of an element using any of the following methods:

+ +
+
getAttribute ( nombre )
+
Return the value of the attribute with the given name.
+
hasAttribute ( nombre )
+
Return true if the attribute with the given name has a value.
+
setAttribute ( nombre , valor )
+
Set the value of the attribute with the given name to the given value.
+
removeAttribute ( nombre )
+
Remove the attribute with the given name.
+
+ +

These functions allow you to get and change the value of an attribute at any time. For example, to use the value of the flex attribute, you might use code like the following:

+ +
 var box = document.getElementById('somebox');
+ var flex = box.getAttribute("flex");
+
+ var box2 = document.getElementById('anotherbox');
+ box2.setAttribute("flex", "2");
+
+ +

However, the flex attribute has a corresponding script property which can be used instead. It isn't any more efficient, but it does mean slightly less typing. The following example accomplishes the same as above using the flex property instead.

+ +
 var box = document.getElementById('somebox');
+ var flex = box.flex;
+
+ var box2 = document.getElementById('anotherbox');
+ box2.flex = 2;
+
+ +

Once you have a reference to an element, you can call the properties of that element. For example, to get the hidden property for an element, you can use the syntax element.hidden where 'element' is a reference to the element. You might note that most of the properties listed in the reference correlate to common attributes on elements. There are differences, of course, for example, while getAttribute("hidden") will return the string 'true' for a hidden element, whereas the hidden property returns a boolean true value. In this case, the type conversion is done for you so the property is more convenient.

+ +

As with each document, there is a different element object for XUL elements as for HTML and XML elements. Every XUL element implements the XULElement interface. A XUL element is any element declared with the XUL namespace. So, XUL elements will have that interface even if added to other XML documents, and non-XUL elements will not have that interface. The XULElement interface has a number of properties and methods specific to XUL elements, many inherited from the generic DOM Element interface.

+ +

A namespace is a URI which specifies the kind of element. Here are some examples:

+ +
<button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
+<button xmlns="http://www.w3.org/1999/xhtml"/>
+<html:button xmlns:html="http://www.w3.org/1999/xhtml"/>
+<html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/>
+
+ +

Namespaces are specified using the xmlns attribute.

+ + + +

This is an important distinction. In fact, the actual text used for the prefix is irrelevant when determining what kind of element is used.

+ +

The DOM provides a number of namespace related functions similar to the non-namespace ones. For example, the getAttributeNS() function is similar to the the getAttribute() function except an additional argument may be supplied to specify an attribute in a specific namespace.

+ +

Many XUL elements have their own properties that are unique to that element. Refer to the elemento reference for a full guide to the attributes and properties available for an element.

+ + + +

The DOM is a tree structure with a single root node with children. You can get a reference to the root node using the document's documentElement property. The root node is always an element, but this is not the case for other nodes in the tree. An element corresponds to a tag is the XUL source, but you may also find text nodes, comment nodes and a few other types in a document tree. In the case of XUL, the root element will be the window tag in the XUL document. Each node in the tree may have children and those children may have child nodes of their own. Since the DOM is a tree structure, you can navigate through the tree using a variety of properties. Some common properties are listed below:

+ +
+
firstChild 
+
reference to the first child node of an element
+
lastChild
+
reference to the last child node of an element
+
childNodes
+
holds a list of the children of an element
+
parentNode
+
reference to the parent of an node
+
nextSibling
+
reference to the next sibling in sequence
+
previousSibling
+
reference to the previous sibling in sequence
+
+ +

These properties allow you to navigate through a document is various ways. For example, you might get the first child of an element using the firstChild property and then navigate through the children using the nextSibling property. Or, you might accomplish the same thing by iterating through the items in the childNodes list. In Mozilla, the latter method is more efficient.

+ +

The following example shows how to iterate over the children of the root node:

+ +
var childNodes = document.documentElement.childNodes;
+for (var i = 0; i < childNodes.length; i++) {
+  var child = childNodes[i];
+  // do something with child
+}
+
+ +

The childNodes variable will hold the children of the document root element. We then use a for loop to iterate over the children, accessing each item using an array-like notation.

+ +
Nuestro ejemplo: Código Ver en funcionamiento
+ +

See also: A re-introduction to JavaScript and the referencia de JavaScript

+ +

Seguimos con la modificación del DOM.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html new file mode 100644 index 0000000000..2b7fc14bf2 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/modificando_una_interfaz_xul/index.html @@ -0,0 +1,157 @@ +--- +title: Modificando una interfaz XUL +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Modificando_una_interfaz_XUL +tags: + - DOM + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Modifying_a_XUL_Interface +--- +

El DOM proporciona funciones variadas para modificar el documento.

+ +

Creación de nuevos elementos

+ +

You can create new elements using the createElement() function of the document. It takes one argument, the tag name of the element to create. You can then set attributes of the element using the setAttribute() function and append it to the XUL document using the appendChild() function. For example, the following will add a button to a XUL window: Ejemplo 1: Código Ver en funcionamiento

+ +
<script>
+function addButton(){
+  var aBox = document.getElementById("aBox");
+  var button = document.createElement("button");
+  button.setAttribute("label","A new Button");
+  aBox.appendChild(button);
+}
+</script>
+
+<box id="aBox" width="200">
+  <button label="Añade" oncommand="addButton();"/>
+</box>
+
+ + + +

The createElement() function will create the default type of element for the document. For XUL documents, this generally means that a XUL element will be created. For an HTML document, an HTML element will be created, so it will have the features and functions of an HTML element instead. The createElementNS() function may be used to create elements in a different namespace.

+ +

The appendChild() function is used to add an element as a child of another element. Three related functions are the insertBefore(), replaceChild() and removeChild functions. The syntax of these functions is as follows:

+ +
parent.appendChild(child);
+parent.insertBefore(child, referenceChild);
+parent.replaceChild(newChild, oldChild);
+parent.removeChild(child);
+
+ +

It should be fairly straightforward from the function names what these functions do.

+ + + +

Note that for all these functions, the reference child or child to remove must already exist or an error occurs.

+ +

It is often the case that you want to remove an existing element and add it somewhere else. If so, you can just add the element without removing it first. Since a node may only be in one place at a time, the insertion call will always remove the node from its existing location first. This is a convenient way to move nodes around in the document.

+ +

Copying Nodes

+ +

To copy nodes however, you may call the cloneNode() function. This function makes a copy of an existing node so that you can add it somewhere else. The original node will stay where it is. It takes one boolean argument which indicates whether to copy all of the node's children or not. If false, only the node is copied, such that the copy won't have any children. If true, all of the children are copied as well. This is done recursively, so for large tree structures make sure that this is desired before passing true to the cloneNode() function. Here is an example:

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<hbox height="400">
+  <button label="Copy"
+          oncommand="this.parentNode.appendChild(this.nextSibling.cloneNode(true));"/>
+
+  <vbox>
+    <button label="First"/>
+    <button label="Second"/>
+  </vbox>
+</hbox>
+
+ +

When the Copy button is pressed..

+ + + +

Note that some elements, such as listbox and menulist provide some additional specialized modification functions which you should use instead when you can. Ésto se describe en la próxima sección.

+ +

Manipulación de elementos básicos

+ +

The main XUL elements such as buttons, checkboxes and radio buttons may be manipulated using a number of script properties. The properties available are listed in the referencia al element as those available are different for each element. Common properties that you will manipulate include the label, value, checked and disabled properties. They set or clear the corresponding attribute as necessary.

+ +

Ejemplos de propiedades label y value

+ +

Here is a simple example which changes the label on a button:

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
<button label="Hola" oncommand="this.label = 'Adiós';"/>
+
+ +

Cuando el botón es apretado, el label es cambiado. This technique will work for a variety of different elements that have labels. For a textbox, you can do something similar for the value property.

+ +

Ejemplo 4: Código Ver en funcionamiento

+ +
<button label="Añade" oncommand="this.nextSibling.value += '1';"/>
+<textbox/>
+
+ +

This example adds a '1' to the textbox each time the button is pressed. The nextSibling property navigates from the button (this) to the next element, the textbox. The '+=' operator is used to add to the current value so a 1 will be added onto the end of the existing text. Note that you can still enter text into the textbox. You can also retrieve the current label or value using these properties, as in the following example:

+ +

Ejemplo 5: Código Ver en funcionamiento

+ +
<button label="Hola" oncommand="alert(this.label);"/>
+
+ +

Toggling a checkbox

+ +

Checkboxes have a checked property which may be used to check or uncheck the checkbox. It should be easy to determine how this is used. In this next example, we reverse the state of the checked property whenever the button is pressed. Note that while the label and value properties are strings, the checked property is a boolean property which will be set either true or false.

+ +

Ejemplo 6: Código Ver en funcionamiento

+ +
<button label="Change" oncommand="this.nextSibling.checked = !this.nextSibling.checked;"/>
+<checkbox label="Check for messages"/>
+
+ +

Radio buttons may be selected as well using properties, however since only one in a group may be selected at a time, the others must all be unchecked when one is checked. You don't have to do this manually of course. The radiogroup's selectedIndex property may be used to do this. The selectedIndex property may be used to retrieve theindex of the selected radio button in the group and well as change it.

+ +

Cambio de un elemento desactivado o activado

+ +

It is common to disable particular fields that don't apply in a given situation. For example, in a preferences dialog, one might have the choice of several possibilities, but one choice allows additional customization. Here is an example of how to create this type of interface.

+ +

Ejemplo 7: Código Ver en funcionamiento

+ +
<script>
+function updateState(){
+  var name = document.getElementById("name");
+  var sindex = document.getElementById("group").selectedIndex;
+  name.disabled = sindex == 0;
+}
+</script>
+
+<radiogroup id="group" onselect="updateState();">
+  <radio label="Random name" selected="true"/>
+  <hbox>
+    <radio label="Specify a name:"/>
+    <textbox id="name" value="Jim" disabled="true"/>
+  </hbox>
+</radiogroup>
+
+ +

In this example a function updateState() is called whenever a select event is fired on the radio group. This will happen whenever a radio button is selected. This function will retrieve the currently selected radio element using the selectedIndex property. Note that even though one of the radio buttons is inside an hbox, it is still part of the radio group. If the first radio button is selected (index of 0), the textbox is enabled by setting its disabled property to true. If the second radio button is selected, the textbox is enabled.

+ +

La sección siguiente proporciona más detalles sobre la manipulación de listas.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_asistentes/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_asistentes/index.html" new file mode 100644 index 0000000000..0ba0eb84c5 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_asistentes/index.html" @@ -0,0 +1,88 @@ +--- +title: Más asistentes +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_asistentes +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/More_Wizards +--- +
+

« AnteriorSiguiente »

+
+ +

 

+ + + +

Normalmente, un asistente muestra cada wizardpage en el orden en el cual se han puesto en el archivo XUL. En algunos casos sin embargo, se necesita tener diferentes páginas que aparecerán en el asistente en función de lo que seleccionó el usuario en páginas anteriores.

+ +

En este caso, el atributo pageid se coloca en cada una de las páginas. Ésto tiene que ser definido en un identificador para cada página. Después, para navegar a una página, se usará uno de estos dos métodos:

+ +
    +
  1. Set the next attribute on each page to the page ID of the next page to go to. You can change these attributes as needed to navigate to different pages.
    2. +
  2. Call the wizard's goTo() method. It takes one argument, the page ID of a page to go to. You might call this method in the onpageadvanced or onwizardnext handlers. Remember to return false in this case, because you have already changed the page yourself. Note that the goTo() method, because it causes a page change, will fire the events again, so you'll have to make sure you handle that case.
    3. +
+ +

For example, here are a set of wizard pages (the inner content has been omitted):

+ +
<wizardpage pageid="type" next="font">
+<wizardpage pageid="font" next="done">
+<wizardpage pageid="color" next="done">
+<wizardpage pageid="done">
+
+ + + +

A script will adjust the next attributes as necessary to go to the page with the page ID color when needed.

+ +

Funciones de asistente

+ +

The wizard works much like a etiquetas, except that the tabs are not displayed and the user navigates between pages by using the buttons along the bottom. Because all of the pages are part of the same file, all of the values of the fields on all pages will be remembered. Thus, you do not have to load and save information between pages.

+ +

However, you may want to do some validation of each field on each page. For this, use the handlers described in the previous section. If a field is invalid, you might display an alert. In some cases, it would be more convenient to disable the Next button until valid input has been entered.

+ +

The wizard has a property canAdvance, which can be set to true to indicate that the Next button should be enabled. If set to false, the Next button is disabled. You can change the property when invalid or valid data has been entered.

+ +

In the following example, the user must enter a secret code into a textbox on the first page of the wizard. The function checkCode() is called whenever the first page is shown as indicated by the onpageshow attribute. It is also called whenever a key is pressed in the textbox, to determine whether the Next button should be enabled again.

+ +

Ejemplo de asistente

+ +

Código Ver en funcionamiento

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<wizard id="theWizard" title="Asistente de código secreto"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<script>
+function checkCode(){
+  document.getElementById('theWizard').canAdvance = (document.getElementById('secretCode').value == "cabbage");
+}
+</script>
+
+  <wizardpage onpageshow="checkCode(); return true;">
+       <label value="Escriba el código secreto:"/>
+       <textbox id="secretCode" onkeyup="checkCode();"/>
+  </wizardpage>
+
+  <wizardpage>
+       <label value="Ésto es el código secreto correcto."/>
+  </wizardpage>
+
+</wizard>
+
+ +

There is also a corresponding canRewind property that you can use to enable or disable the Back button. Both properties are adjusted automatically as you switch pages. Thus, the Back button will be disabled on the first page so you don't have to set it yourself.

+ +

Another useful property of the wizard is currentPage, which holds a reference to the currently displayed wizardpage. You can also modify the current page by changing this property. If you do change it, the various page change events will still be fired.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_caracter\303\255sticas_de_los_botones/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_caracter\303\255sticas_de_los_botones/index.html" new file mode 100644 index 0000000000..fdf8c15409 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_caracter\303\255sticas_de_los_botones/index.html" @@ -0,0 +1,102 @@ +--- +title: Más características de los botones +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_características_de_los_botones +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/More_Button_Features +--- +

En esta sección, veremos algunas características adicionales de los botones.

+ +

Añadiendo una imagen

+ +

Usted puede agregar una imagen a un botón especificando una URL en el atributo imagen. La imagen se carga desde la URL, la cual puede ser relativa o absoluta, entonces la imagen se muestra sobre el botón.

+ +

El botón de arriba tendrá label y imagen 'happy.png'. La imagen aparecerá a la izquierda de la etiqueta. Usted puede cambiar la posición usando otros dos atributos. Esto se explicará en un momento.

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<button label="Ayuda" image="happy.png"/>
+
+ +

Botón con imagen CSS

+ +

Another way to specify the image is by using the CSS list-style-image style property on the button. This is designed to allow the 'skin' (in this case, the appearance of the image) to be changed without changing the XUL file. An example is shown below.

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<button id="find-button"
+  label="Busca" style="list-style-image: url('happy.png')"/>
+
+ +

In this case, the image 'happy.png' is displayed on the button. The estilo attribute functions similar to its HTML counterpart. In general, it can be used on all XUL elements. Note that you really should put the style declarations in a separate style sheet.

+ +

Posicionando las imágenes

+ +

By default, the image on a button will appear to the left of the text label. There are two attributes that can be used to control this position.

+ +

The dirección attribute controls the direction of the image and text. By setting this attribute to the value reverse, the image will be placed on the right side of the text. By using the value normal, or leaving the attribute out entirely, the image will be placed on the left side of the text.

+ +

The orientación attribute can be used to place the image above or below the text. The default value is horizontal which is used to place the image on the left or right. You can also use the value vertical to place the image above or below. In this case, the dir attribute controls the placement above or below. The same values are used, where normal means place the image above the text, and reverse means place the image below the text.

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
Image:advbtns1.png
+ +
<button label="Left" image="happy.png"/>
+<button label="Right" image="happy.png" dir="reverse"/>
+<button label="Above" image="happy.png" orient="vertical"/>
+<button label="Below" image="happy.png" orient="vertical" dir="reverse"/>
+
+ +

 

+ +

The example here shows all four types of alignment of buttons. Note that the two attributes are not specified when the default value can be used.

+ +

Botones con contenido extra

+ +

Buttons may have arbitrary markup contained inside them, and it will be rendered inside the button. You probably wouldn't use this very often, but you might use it when creating custom elements.

+ +

For example, the following will create a button where two of the words are red:

+ +

Ejemplo 4: Código Ver en funcionamiento

+ +
<button>
+  <description value="This is a"/>
+  <description value="rather strange" style="color: red;"/>
+  <description value="button"/>
+</button>
+
+ +

Any XUL element may be placed inside the botón. HTML elements will be ignored, so you need to wrap them inside a descripción element. If you specify the label attribute on the button, it will override any content placed inside the button.

+ +

Botón con menú emergente

+ +

You can place a menupopup inside the button to cause a menu to drop down when the button is pressed, much like the menulist. However, in this case you must set the type attribute to the value menu.

+ +

Ejemplo 5:

+ +

Código Ver en funcionamiento

+ +
Image:advbtns2.png
+ +
<button type="menu" label="Device">
+  <menupopup>
+    <menuitem label="Impresora"/>
+    <menuitem label="Ratón"/>
+    <menuitem label="Teclado"/>
+  </menupopup>
+</button>
+
+ +

In this example, the user may click the button to pop up a menu containing three items. Note that selecting one of these menu items doesn't change the label on the button, unlike a menulist. This type of button is intended to be used like a menu, with scripts attached to each item to perform a task. We'll see more on menus later.

+ +

You can also set the type attribute to the value menu-button. This also creates a button with a menu, but the appearance will be different. The image to the right shows the difference. The left one is a 'menu' and the second one is a 'menu-button'. It has an arrow indicating the presence of a menu. For the 'menu', the user may click anywhere on the button to show the menu. For the 'menu-button', the user must click the arrow to show the menu.

+ +

Seguimos con como los elementos XUL son colocados en una ventana.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_caracter\303\255sticas_de_los_\303\241rboles/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_caracter\303\255sticas_de_los_\303\241rboles/index.html" new file mode 100644 index 0000000000..e8eb95ca57 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_caracter\303\255sticas_de_los_\303\241rboles/index.html" @@ -0,0 +1,132 @@ +--- +title: Más características de los árboles +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_características_de_los_árboles +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/More_Tree_Features +--- +

Aquí veremos más características de los árboles.

+ +

Árboles jerárquicos

+ +

El elemento tree también puede utilizarse para crear listas jerárquicas, similares a las encontradas en un administrador de archivos o a una lista de marcadores de un navegador. Para lograr esto deben realizarse dos cosas:

+ +

Primero debe marcarse como contenedor al elemento treeitem que contenga hijos, esto se consigue agregándole el atributo container (contenedor) de la siguiente manera:

+ +
<treeitem container="true"/>
+
+ +

Esto permite al usuario hacer doble-clic sobre el árbol para expandir y contraer las filas internas. Puede hacerse que las filas hijas sean visibles desde un principio simplemente agregando el atributo open (abierto). Cuando el usuario expanda o contraiga el árbol, éste atributo cambiará para reflejar el estado actual.

+ +

El segundo cambio a realizar es colocar el atributo primary (primario) en la primer columna. Esto provocará la aparición de un pequeño triángulo o un signo “+�? delante de las celdas en esa columna. Esto indicará que esas celdas pueden expandirse, además las filas hijas tendrán sangrado. Note que el usuario no puede ocultar la primer columna.

+ +

Cada hijo puede especificarse poniendo un elemento treechildren dentro de treeitem, si se coloca dentro de treerow no funcionará.

+ +

Puede repetirse este proceso para crear árboles profundamente anidados. En esencia, un elemento treeitem puede contener ya sea filas simples -declaradas con el elemento treerow- o una colección de filas que se declaran con el elemento treechildren.

+ +

El siguiente es un ejemplo sencillo:

+ +

Ejemplo

+ +

Código Ver en funcionamiento

+ +
<tree flex="1">
+  <treecols>
+      <treecol id="nombre" label="Nombre" primary="true" flex="3"/>
+      <treecol id="apellido" label="Apellido" flex="7"/>
+  </treecols>
+
+  <treechildren>
+    <treeitem container="true" open="true">
+      <treerow>
+        <treecell label="Tipos"/>
+      </treerow>
+
+      <treechildren>
+        <treeitem>
+          <treerow>
+            <treecell label="Pepe"/>
+            <treecell label="Carpintero"/>
+          </treerow>
+        </treeitem>
+        <treeitem>
+          <treerow>
+            <treecell label="Lito"/>
+            <treecell label="Albañil"/>
+          </treerow>
+        </treeitem>
+      </treechildren>
+    </treeitem>
+  </treechildren>
+</tree>
+
+ +

Image:advtrees1.jpg

+ +

Esto ha creado un árbol jerárquico. Como puede verse en la imagen, un pequeño símbolo “+�? o “-�? apareció junto a la primer fila, indicando que contiene filas hijas. El usuario puede abrir o cerrar la lista hacienda doble-clic en esa fila. Note como la fila Tipos necesita solamente una columna y es un ítem de posición para sus hijos.

+ +

El elemento treeitem externo contiene un elemento treerow y un elemento treechildren, el primero crea los datos para la fila madre y el último contiene las filas hijas.

+ +

También pueden anidarse filas profundamente. Debe recordarse que hay que utilizar el atributo container en las filas que contienen filas hijas. La simple presencia de filas hijas no es suficiente indicación ya que puede haber un contenedor que no contenga hijos pero aún debe ser tratado como contenedor. Por ejemplo, un directorio sin archivos dentro debe ser tratado como contenedor aunque esté vacío.

+ +

Más sobre las columnas del árbol

+ +

Un atributo adicional que puede colocarse al árbol es enableColumnDrag (habilitar arrastre de columna, note las iniciales en mayúscula). Si se encuentra habilitado el usuario podrá arrastrar los encabezados de columna para reconfigurar el orden de las mismas,

+ +

El usuario también querrá cambiar el ancho de las columnas, esto se logra poniendo un elemento splitter (divisor) entre cada elemento treecol. Aparecerá una pequeña muesca entre cada encabezado de columna, la cual podrá ser arrastrada por el usuario para cambiar el ancho de la columna. Para esconder la muesca puede fijarse en 0 el atributo CSS max-width del divisor, a pesar de lo cual el ancho de la columna seguirá siendo modificable. La hoja de estilos globales proporciona una clase tree-splitter, la cual realiza esto.

+ +

Puede establecerse el ancho mínimo y máximo de una columna utilizando las propiedades de estilo minwidth y maxwidth en el encabezado de la columna.

+ +

La columna puede estar oculta de manera predeterminada si se coloca un atributo hidden (oculto) con el valor true. El usuario podrá escoger si ve la columna seleccionándola en el menú desplegable que se encuentra al final de la fila encabezado.

+ +

Como con todos los elementos, puede utilizarse el atributo persist (persistir) para almacenar el estado de las columnas entre sesiones. Esto es, una vez que el usuario se decide por una disposición de columnas de su agrado, esta será automáticamente almacenada para la próxima vez. Será necesario guardar un cierto número de atributos como se indica en el siguiente ejemplo:

+ +

Ejemplo

+ +

Código Ver en funcionamiento

+ +
<tree enableColumnDrag="true" flex="1">
+  <treecols>
+    <treecol id="corredor" label="Corredor" flex="2" persist="width ordinal hidden"/>
+    <splitter class="tree-splitter"/>
+    <treecol id="ciudad" label="Ciudad de origen" flex="2" persist="width ordinal hidden"/>
+    <splitter class="tree-splitter"/>
+    <treecol id="horainicio" label="Hora de inicio" flex="1" persist="width ordinal hidden"/>
+    <splitter class="tree-splitter"/>
+    <treecol id="horafin" label="Hora de finalización" flex="1" persist="width ordinal hidden"/>
+  </treecols>
+
+  <treechildren>
+    <treeitem>
+      <treerow>
+        <treecell label="Joshua Granville"/>
+        <treecell label="Vancouver"/>
+        <treecell label="7:06:00"/>
+        <treecell label="9:10:26"/>
+      </treerow>
+    </treeitem>
+    <treeitem>
+      <treerow>
+        <treecell label="Robert Valhalla"/>
+        <treecell label="Seattle"/>
+        <treecell label="7:08:00"/>
+        <treecell label="9:15:51"/>
+      </treerow>
+    </treeitem>
+  </treechildren>
+</tree>
+
+ +

En este caso deberán marcarse como persistentes tres atributos de las columnas:

+ + + +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_funciones_de_men\303\272/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_funciones_de_men\303\272/index.html" new file mode 100644 index 0000000000..2c90a3fdd9 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_funciones_de_men\303\272/index.html" @@ -0,0 +1,128 @@ +--- +title: Más funciones de menú +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_funciones_de_menú +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - para_revisar +translation_of: Archive/Mozilla/XUL/Tutorial/More_Menu_Features +--- +

En esta sección, veremos cómo crear submenús y menús con marcas de verificación o checks.

+ +

Crear submenús

+ +

Puedes crear submenús dentro de otros menús (menús jerarquizados ) usando los elementos existentes. Recuerda que puedes poner cualquier elemento dentro de un menupopup. Ya hemos visto cómo colocar menuitems y menuseparators en menupopups. Sin embargo , puedes crear submenús simplemente colocando el elemento de menu dentro del elemento del menupopup . Esto funciona porque el elemento del menú es válido aún cuando no esté colocado directamente en la barra de menú. El ejemplo de abajo crea un submenú simple dentro del menú de File.

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
nested-menu.jpg
+ +
<toolbox flex="1">
+  <menubar id="sample-menubar">
+    <menu id="file-menu" label="Archivo">
+      <menupopup id="file-popup">
+        <menu id="new-menu" label="Nuevo">
+          <menupopup id="new-popup">
+            <menuitem label="Ventana"/>
+            <menuitem label="Mensage"/>
+          </menupopup>
+        </menu>
+        <menuitem label="Abrir"/>
+        <menuitem label="Guardar"/>
+        <menuseparator/>
+        <menuitem label="Salir"/>
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+
+ +

Adición de un menú a nuestro ejemplo con el Buscador de archivos

+ +

Agreguemos un menú al dialogo de búsqueda de archivos. Agregaremos solo unos pocos comandos simples a un menú File y un menú Edit. Este es similar al ejemplo de arriba.

+ +
<toolbox>
+
+ <menubar id="findfiles-menubar">
+  <menu id="file-menu" label="Archivo" accesskey="f">
+    <menupopup id="file-popup">
+      <menuitem label="Abrir la búsqueda..." accesskey="o"/>
+      <menuitem label="Guardar la búsqueda..." accesskey="s"/>
+      <menuseparator/>
+      <menuitem label="Cerrar" accesskey="c"/>
+    </menupopup>
+  </menu>
+  <menu id="edit-menu" label="Editar" accesskey="e">
+    <menupopup id="edit-popup">
+      <menuitem label="Cortar" accesskey="t"/>
+      <menuitem label="Copiar" accesskey="c"/>
+      <menuitem label="Pegar" accesskey="p" disabled="true"/>
+    </menupopup>
+  </menu>
+ </menubar>
+
+<toolbar id="findfiles-toolbar>
+
+ +
fnd-dlg-sample.jpg
+ +

Aquí hemos agregado dos menús con varios comandos en ellos. Observa cómo la barra de menús fue agregada dentro de la caja. Los tres puntos después de Open y Save son la forma habitual en la que se indica al usuario que se abrirá un dialogo cuando seleccione el comando. Se han agregado claves de acceso para cada menú y elemento de menú. Verás en la imagen que esta letra ha sido subrayada en la etiqueta del menú. Además, el comando Pegar (Paste) ha sido deshabilitado. Asumiremos que no hay nada que pegar.

+ +

 Ejemplo de Encontrar archivos  : Código Ver en funcionamiento

+ +

Añadir marcas de verificación (checkmarks) a los menús

+ +

Muchas aplicaciones tienen elementos de menú que tienen marcas de verificación o checks. Por ejemplo, una característica que este activada tiene una marca de verificación o check al lado del comando y una característica que está deshabilitada no lo tiene. Cuando el usuario selecciona el menú, cambia el estado de la marca o check (habilitado/deshabilitado). Puedes además agregar botones redondos en los elementos del menú.

+ +

Las marcas de verificación o checks se crean de manera similar a los elementos checkbox y radio . Esto implica el uso de dos atributos: type para indicar el tipo de  marca o check y name para agrupar comandos. El ejemplo de abajo crea un menú con una marca de verificación.

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<toolbox>
+  <menubar id="options-menubar">
+    <menu id="options_menu" label="Opciones">
+      <menupopup>
+        <menuitem id="backups" label="Hacer copias de seguridad" type="checkbox"/>
+        <menuitem id="backups" label="Enviar un email al administrador" type="checkbox" checked="true"/>
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+
+ +

El atributo type se ha agregado con el fin poder marcar o desmarcar un elemento del menú. Al establecer su valor a checkbox , el elemento del menú puede marcarse o desmarcarse seleccionando dicho elemento.

+ +

Menú con botones circulares

+ +

Además de las marcas estándares, puedes crear checks con estilo circular cambiando el valor de type a el valor de radio. Un botón circular si usa si se desea agrupar varios elementos del menús pero se puede seleccionar solo uno a la vez. Un ejemplo puede ser a menú de Fuente (font) donde únicamente puede seleccionarse una fuente a la vez. Cuando se selecciona otro elemento, el seleccionado previamente queda deshabilitado.

+ +

Con el fin de agrupar un conjunto de elementos del menú, tienes que poner un atributo name a cada uno. Establece el valor para la misma cadena. El ejemplo siguiente lo muestra:

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
<toolbox>
+  <menubar id="planets-menubar">
+    <menu id="planet-menu" label="Planetas">
+      <menupopup>
+        <menuitem id="júpiter" label="Júpiter" type="radio" name="ringed"/>
+        <menuitem id="saturno" label="Saturno" type="radio" name="ringed" checked="true"/>
+        <menuitem id="uranus" label="Uranus" type="radio" name="ringed"/>
+        <menuseparator/>
+        <menuitem id="tierra" label="Tierra" type="radio" name="inhabited" checked="true"/>
+        <menuitem id="luna" label="Luna" type="radio" name="inhabited"/>
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+
+ +

Si pruebas a hacer este ejemplo, encontrarás que de los tres primeros elementos del menú, solamente se puede seleccionar uno. Se agrupan juntos porque todos tienen el mismo nombre. El último elemento del menú es Earth, aunque es un botón circular, no es parte de este grupo porque tiene un nombre diferente.

+ +

Desde luego, los elementos agrupados deben estar dentro del mismo menú. No se deben ubicar cerca unos de otros en el menú, además no tiene mucho sentido que lo estén.

+ +

Seguimos con la creación de menús emergentes.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_gestores_de_eventos/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_gestores_de_eventos/index.html" new file mode 100644 index 0000000000..d181cbea94 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/m\303\241s_gestores_de_eventos/index.html" @@ -0,0 +1,168 @@ +--- +title: Más gestores de eventos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Más_gestores_de_eventos +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/More_Event_Handlers +--- +

In this section, the event object is examined and additional events are described.

+ +

El objeto de evento

+ +

Each event handler has a single argument which holds an event object. In the attribute form of event listener, this event is an implied argument to the script code which can be refered to using the name 'event'. In the addEventListener form, the first argument to the listener function will be the event object. The event object has a number of properties which can be examined during an event. The full list can be found in the referencia al objeto en planeta XUL.

+ +

We already saw the event's target property in the last section. It holds a reference to the element where the event occured. A similar property currentTarget holds the element that is currently having its event listeners handled. In the example below, currentTarget is always the vbox, whereas target would be the specific element, either the button or checkbox, that was activated. Ejemplo 1: Código Ver en funcionamiento

+ +
<vbox oncommand="alert(event.currentTarget.tagName);">
+  <button label="OK"/>
+  <checkbox label="Show images"/>
+</vbox>
+
+ +

La evento de parada de propagación

+ +

Once you handle an event, regardless of where in the propagation the event is, you will likely want to stop the event from being sent to further elements, essentially stopping the capturing or bubbling phases from continuing. Depending on how you attach the event listener to an element, there are different ways of doing this.

+ +

Recall that the capturing phase occurs before the bubbling phase, so any capturing listeners will trigger before any bubbling listeners. If a capturing event stops the event propagation, none of the later capturing listeners, nor any of the bubbling listeners will ever receive notification about the events. To stop event propagation, call the event object's stopPropagation method, as in the following example.

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<hbox id="outerbox">
+  <button id="okbutton" label="OK"/>
+</hbox>
+
+<script>
+function buttonPressed(event){
+  alert('Button was pressed!');
+}
+
+function boxPressed(event){
+  alert('Box was pressed!');
+  event.stopPropagation();
+}
+
+var button = document.getElementById("okbutton");
+button.addEventListener('command',buttonPressed,true);
+
+var outerbox = document.getElementById("outerbox");
+outerbox.addEventListener('command',boxPressed,true);
+</script>
+
+ +

Here, an event listener has been added to the button and another event listener has been added to the box. The stopPropagation method has been called in the box's listener, so the button's listener never gets called. If this call was removed, both listeners would be called and both alerts would appear.

+ +

Prevent Default Action

+ +

If no event handlers have been registered for an event, then after completing the capturing and bubbling phases, the element will handle the event in a default way. What will happen depends on the event and the type of element. For example, the 'popupshowing' event is sent to a popup just before it is displayed. The default action is to display the popup. If the default action is prevented, the popup will not be displayed. The default action can be prevented with the event object's preventDefault method, as in the example below.

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
<button label="Tipos" type="menu">
+  <menupopup onpopupshowing="event.preventDefault();">
+    <menuitem label="Vidrio"/>
+    <menuitem label="Plástico"/>
+  </menupopup>
+</button>
+
+ +

Alternatively, for attribute event listeners, you can just return false from the code. Note that preventing the default action is not the same as stopping event propagation with the stopPropagation method. Even if the default action has been prevented, the event will still continue to propagate. Similarly, calling the stopPropagation method won't prevent the default action. You must call both methods to stop both from occuring.

+ +

Note that once propagation or the default action has been prevented, neither may be re-enabled again for that event.

+ +

The following sections list some of the events that may be used. A full list is provided in the referencia al gestor de evento en planeta XUL.

+ +

Eventos del ratón

+ +

There are several events which can be used to handle mouse specific actions, which are described briefly below:

+ +
+
click
+
Called when the mouse is pressed and released on an element.
+
+ +
+
dblclick
+
Called when the a mouse button is double clicked.
+
+ +
+
mousedown
+
Called when a mouse button is pressed down on an element. The event handler will be called as soon as a mouse button is pressed, even if it hasn't been released yet.
+
+ +
+
mouseup
+
Called when a mouse button is released on an element.
+
+ +
+
mouseover
+
Called when the mouse pointer is moved onto an element. You could use this to highlight the element, however CSS provides a way to do this automatically so you shouldn't do it with an event. You might, however, want to display some help text on a status bar.
+
+ +
+
mousemove
+
Called when the mouse pointer is moved while over an element. The event may be called many times as the user moves the mouse so you should avoid performing lengthy tasks frorm this handler.
+
+ +
+
mouseout
+
Called when the mouse pointer is moved off of an element. You might then unhighlight the element or remove status text.
+
+ +

There are also a set of drag related events, which occur when the user holds down a mouse button and drags the mouse around. Those events are described in Drag and Drop.

+ +

Propiedades del botón del ratón

+ +

When a mouse button event occurs, a number of additional properties are available to determine which mouse buttons were pressed and the location of the mouse pointer. The event's button property can be used to determine which button was pressed, where possible values are 0 for the left button, 1 for the right button and 2 for the middle button. If you've configured your mouse differently, these values may be different.

+ +

The detail property holds the number of times the button has been clicked quickly in sequence. This allows you to check for single, double or triple clicks. Of course, if you just want to check for double clicks, you can also use the dblclick event instead. The click event will be fired once for the first click, again for the second click, and again for the third click, but the dblclick event will only be fired once for a double click.

+ +

The button and detail properties only apply to the mouse button related events, not mouse movement events. For the mousemove event, for example, both properties will be set to 0.

+ +

Propiedades de la posición del ratón

+ +

However, all mouse events will be supplied with properties that hold the coordinates of the mouse position where the event occured. There are two sets of coordinates. The first is the screenX and screenY properties and are relative to the top left corner of the screen. The second set, clientX and clientY, are relative to the top left corner of the document. Here is an example which displays the current mouse coordinates:

+ +

Ejemplo 4: Código Ver en funcionamiento

+ +
<script>
+
+function updateMouseCoordinates(event){
+  var text = "X:" + event.clientX + " Y:" + event.clientY;
+  document.getElementById("xy").value = text;
+}
+</script>
+
+<label id="xy"/>
+<hbox width="400" height="400" onmousemove="updateMouseCoordinates(event);"/>
+
+ +

In this example, the size of the box has been set explicity so the effect is easier to see. The event handler gets the clientX and clientY properties and creates a string from them. This string is then assigned to the value property of the label. Note that the event argument must be passed to the updateMouseCoordinates function. If you move the mouse quickly across the border of the box, you might notice that the coordinates don't generally stop right at 400. This is because the mousemove events occur at intervals depdending on the speed at which the mouse moves and the mouse is usually moved some distance past the border by the time the next event fires. Obviously, it would be much too inefficient to send a mousemove event for every pixel the mouse is moved.

+ +

Element Relative Coordinates

+ +

You will often want to get the coordinates of an event relative to the element where the element occured rather than the entire window. You can do this by subtracting the element's position from the event position, as in the following code.

+ +
var element = event.target;
+var elementX = event.clientX - element.boxObject.x;
+var elementY = event.clientY - element.boxObject.y;
+
+ +

XUL elements have a box object that can be retrieved using the boxObject property. We'll learn more about the box object in una sección más adelante, but it holds information pertaining to how the element is displayed, including the x and y position of the element. In this example code, these coordinates are subtracted from the event coordinates to get the event position relative to the element.

+ +

Load Events

+ +

The load event is sent to the document (la etiqueta de la ventana - <code>window</code>) once the XUL file has finished loading and just before the content is displayed. This event is commonly used to initialize fields and perform other tasks that need to be done before the user can use the window. You should use a load event to do these kinds of things as opposed to adding script at the top level outside a function. This is because the XUL elements may not have loaded or fully initialized yet, so some things may not work as expected. To use a load event, place an onload attribute on the window tag. Call code within the load handler which will initialize the interface as necessary.

+ +

There is also an unload event which is called once the window has closed, or in a browser context, when the page is switched to another URL. You can use this event to save any changed information, for example.

+ +


+ Next, we'll find out how to add atajos de teclado.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_\303\241rbol/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_\303\241rbol/index.html" new file mode 100644 index 0000000000..d6eaf7a8d9 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/objeto_de_caja_de_\303\241rbol/index.html" @@ -0,0 +1,190 @@ +--- +title: Objeto de caja de árbol +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Objeto_de_caja_de_árbol +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Box_Objects +--- +

 

+ +

Ésta sección describe el objeto caja del árbol usada para gestionar como un árbol es mostrado.

+ +

Sobre el objeto caja del árbol

+ +

Box objects were described in an sección. The tree box object is a specialized box object used specifically for trees. The tree box implements the TreeBoxObject interface.

+ +

Redibujando el árbol

+ +

We already saw the rowCountChanged() function of the tree box object in the previous section. It is used to indicate that one or more rows have been added to the tree or removed from the tree. The tree will redraw the affected area. You don't need to call the rowCountChanged() function when a row has simply changed in some way, for example if a cell's label changes. In this case, there are other drawing functions that can be used. The simplest is to call invalidateRow() which will redraw a specific row in the tree. The tree will call the view to get the updated data and update the contents of the tree on screen.

+ +

Other redrawing functions are

+ + + +

Note that redrawing does not occur until the calling script ends since Mozilla does not redraw in the background.

+ +

Desplegando el árbol

+ +

You can also scroll the tree using four different methods, similar to those available for listboxes. The scrollToRow() function may be used to scroll to a particular row. Here is a simple example.

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<script>
+function doScroll(){
+  var value = document.getElementById("tbox").value;
+  var tree = document.getElementById("thetree");
+
+  var boxobject = tree.boxObject;
+  boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject);
+  boxobject.scrollToRow(value);
+}
+</script>
+
+<tree id="thetree" rows="4">
+  <treecols>
+    <treecol id="row" label="Row" primary="true" flex="1"/>
+  </treecols>
+  <treechildren>
+    <treeitem label="Row 0"/>
+    <treeitem label="Row 1"/>
+    <treeitem label="Row 2"/>
+    <treeitem label="Row 3"/>
+    <treeitem label="Row 4"/>
+    <treeitem label="Row 5"/>
+    <treeitem label="Row 6"/>
+    <treeitem label="Row 7"/>
+    <treeitem label="Row 8"/>
+    <treeitem label="Row 9"/>
+  </treechildren>
+</tree>
+
+<hbox align="center">
+  <label value="Scroll to row:"/>
+  <textbox id="tbox"/>
+  <button label="Scroll" oncommand="doScroll();"/>
+</hbox>
+
+ +

Note that we use the rows attribute on the tree to specify that only four rows are displayed at a time. This makes it easier to see how the example works. Also, notice that the first row is 0.

+ +

The doScroll() function gets the box object and calls the scrollToRow() function with an argument set to the value of the textbox. You might notice that the tree box object can be retieved in the same way as other box objects using the boxObject property, however we need to call QueryInterface() to cast the box object to the more specific tree box object. The functions of the more general box object are also available to trees.

+ +

Additional scroll methods include the scrollByLines(), scrollByPages() and ensureRowIsVisible() functions.

+ +

The scrollByLines() scrolls up or down by a certain number of rows. Use a positive number to go down and a negative number to go up. The scrollByPages() function scrolls by a number of pages and is called automatically when the user presses the page up or page down keys while the tree is focused. A page is equal to the number of visible rows. For example if the tree shows 10 rows at a time, a page will be equivalent to 10 rows. This is a convenient method since when the user resizes a flexible tree, the page size will grow and shrink, so you don't need to calculate the page size manually. This isn't too hard to calculate manually anyway since the tree box object also provides a getPageLength() function which returns the number of rows in a page. In the scrolling example above, getPageLength() would return four.

+ +
+

Note that in Firefox 1.0 and Mozilla 1.7 and earlier, the getPageLength() function is called getPageCount() instead. The name was changed to getPageLength() since it was confusing before since it doesn't return the number of pages, but the size of each page. You could determine the number of pages by dividing the total number of rows by the page length.

+
+ +

The ensureRowIsVisible() function will scroll to a row just as scrollToRow() does, but does not scroll if the row is already visible.

+ +

Coordenadas de celda

+ +

Some of the most interesting functions of the tree box object are several functions which may be used to get the parts of the tree at specific coordinates and vice versa.

+ + + +
tree.boxObject.getRowAt( 50, 100 );
+
+ +

This example will return the index of the row with a horizontal position of 50 and a vertical position of 100. Naturally, it doesn't really matter what the value of the x coordinate is since rows always take up the entire horizontal space of the tree.

+ +
One important thing to note is that the coordinates are measured from the upper left corner of the containing document, not the edge of the tree itself.
+ +

This makes it easy to pass event coordinates directly to these functions, as in the following example of the getCellAt() function.

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<script>
+function updateFields(event){
+  var row = {}, column = {}, part = {};
+  var tree = document.getElementById("thetree");
+
+  var boxobject = tree.boxObject;
+  boxobject.QueryInterface(Components.interfaces.nsITreeBoxObject);
+  boxobject.getCellAt(event.clientX, event.clientY, row, column, part);
+
+  if (column.value && typeof column.value != "string")
+    column.value = column.value.id;
+
+  document.getElementById("row").value = row.value;
+  document.getElementById("column").value = column.value;
+  document.getElementById("part").value = part.value;
+}
+</script>
+
+<tree id="thetree" flex="1" onmousemove="updateFields(event);">
+  <treecols>
+    <treecol id="utensil" label="Utensil" primary="true" flex="1"/>
+    <treecol id="count" label="Count" flex="1"/>
+  </treecols>
+  <treechildren>
+    <treeitem>
+      <treerow>
+        <treecell label="Fork"/>
+        <treecell label="5"/>
+      </treerow>
+    </treeitem>
+    <treeitem>
+      <treerow>
+        <treecell label="Knife"/>
+        <treecell label="2"/>
+      </treerow>
+    </treeitem>
+    <treeitem>
+      <treerow>
+        <treecell label="Spoon"/>
+        <treecell label="8"/>
+      </treerow>
+    </treeitem>
+  </treechildren>
+</tree>
+
+<label value="Row:"/>
+<label id="row"/>
+<label value="Column:"/>
+<label id="column"/>
+<label value="Child Type:"/>
+<label id="part"/>
+
+ +

The getCellAt() function takes five arguments, the coordinates to look up and three out parameters. An out parameter is used since the function needs to return more that one value. You will see a number of interfaces that use out parameters in the XULPlanet object reference. These are indicated by the word 'out' before the argument. For these, you will need to supply an empty object and the function will fill in the 'value' property with the necessary value.

+ +

The three out parameters will be filled in with the row, the column and a child type. The row is the index of the row the mouse is over, since we call it with the event coordinates of a mousemove event. If the coordinate is not over a row, the row value will be set to -1. The column is a column object in Mozilla 1.8 and later. In earlier versions, columns are identified with a string, the id of the column. In later versions, a separate column object exists, which can be queried for column data.

+ +

The following line is used so that the example above will work in all versions.

+ +
if (column.value && typeof column.value != "string")
+  column.value = column.value.id;
+
+ +

If the column is a string, we are running on Mozilla 1.7 or earlier, but for later versions we get the column id from the column object. If you are writing code for multiple versions, you should check for this as above.

+ +

The last argument to getCellAt() is the child type which is filled in with a string depending on what part of the cell the coordinate is at. If you move the mouse around in the previous example, you might notice the label change between 'text' and 'cell'. The value 'text' indicates the area where the text would be drawn and the value 'cell' indicates the area around the text, for example, the margin on the left side where the open and close twisties are normally drawn. If there was a twisty, however, the value would be 'twisty' instead. This is convenient since you could determine whether the user clicked on a twisty instead of another part of the row. In fact, this is what the underlying tree code does when the user double clicks the twisty. The final value that may be returned is 'image' if there is an image in the tree cell and the coordinate corresponds to a location where the image is. Of course, in many cases you may not care what part of the cell the coordinate is on and just want the row and column.

+ +

To go in reverse and get the cell at a specific coordinate, use the getCoordsForCellItem() function. It takes seven arguments, as described below.

+ +
var x = {}, y = {}, width = {}, height = {};
+if (typeof tree.columns != "undefined") column = tree.columns[column];
+tree.boxObject.getCoordsForCellItem( row, column, part, x, y, width, height );
+
+ +

The row, column, and part arguments are similar to those returned from the getCellAt() function. Again, the column should be either a string or a column object depending on which version you are using. The cell part type may be used to get the coordinates of either the text, the entire cell, the twisty or the image in the cell. The same values as the getCellAt() function are used. The getCoordsForCellItem() function returns the x and y coordinates in addition to the width and height, all as out parameters.

+ +

Next, we'll look at RDF which can be used to automatically populate trees and other elements.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html new file mode 100644 index 0000000000..3be2bfc904 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/paneles_de_contenidos/index.html @@ -0,0 +1,48 @@ +--- +title: Paneles de contenidos +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Paneles_de_contenidos +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Content_Panels +--- +

 

+

En esta sección veremos como crear paneles capaces de mostrar páginas HTML o XUL.

+

Añadiendo marcos

+

Hay veces en que queremos tener parte de un documento cargado desde una página separada. Como por ejemplo en los dialogos guiados paso a paso, en los que pasamos secuencialmente de una pantalla a otra, preguntando una serie de preguntas. Cada vez que el usuario hace clic en el boton ‘siguiente’, la siguiente pantalla se muestra.

+

Se podrían crear estos dialogos guiados abriendo una ventana para cada pantalla, sin embargo hay almenos tres problemas con esta aproximación. Primero, cada ventana podría aparecer en un sitio diferente (aunque hay formas de evitarlo). Segundo, algunos elementos como los botones ‘atrás’ y ‘siguiente’ son siempre iguales durante todas las pantallas, por lo que sería mucho mejor si solo el área de contenidos fuera la que cambiara. Tercero, sería dificil coordinar los scripts si se ejecutarán en diferentes ventanas.

+

Cabe destacar que XUL nos ofrece el elemento wizard, que podemos usar para crear dialogos guiados. Este elementos se explicará más adelante.

+

Otra aproximación es usar marcos de contenido, el elemento iframe en XUL, el cual funciona practicamente igual que el elemento del mismo nombre en HTML. Crea un documento separado dentro de la ventana. Tiene la ventaja de que puede colocarse en cualquier parte de la ventana y de que su contenido puede guardarse en un fichero separado. Podemos decidir que fichero queremos que se muestre usando el atributo src. Este fichero puede ser de cualquier tipo, aunque normalmente usaremos ficheros HTML o XUL. Podemos cambiar los contenidos de un iframe, sin afectar a la ventana principal, usando un script.

+

En la ventana del navegador Mozilla, el área donde se muestra la página web se crea usando un iframe. Cuando el usuario introduce una dirección o hace clic en un enlace del documento, el atributo src del iframe es cambiado.

+

El siguiente ejemplo muestra el uso de los marcos de contenido:

+

Ejemplo: Usando iframe

+
<toolbox>
+  <toolbar id="nav-toolbar">
+    <toolbarbutton label="Atrás"/>
+    <toolbarbutton label="Siguiente"/>
+    <textbox id="urlfield"/>
+  </toolbar>
+</toolbox>
+
+<iframe id="contenidos" src="http://www.mozilla.org" flex="1"/>
+
+

Este ejemplo presenta el interfaz para un navegador web muy simple. Hay dos elementos principales, un toolbox (contenedor para barras de herramientas) y un iframe (marco de contenidos). Los botones Atrás y Siguiente, así como la caja de texto para la dirección se han incluido en una barra de herramientas. Las páginas web aparecerían dentro del elemento iframe, en este caso la página de la fundación Mozilla sería la que aparecería por defecto.

+

Este ejemplo no es completamente funcional. Posteriormente, necesitaremos adicionar un script el cual cambia el atributo en el tiempo deseado, por ejemplo cuando el usuario presiona la tecla Enter.

+

Browsers

+

There is a second type of content panel, using the browser tag. You would use this when you want to create a frame that displays content like a browser. Actually, the iframe can do this too, but the browser has a variety of additional features. For example, the browser maintains a page history for use with Back and Forward buttons. The browser can also load pages with referers and other flags. Essentially, the browser tag should be used when you want to create a browser-like interface, but the iframe may be used when you just need a simple panel.

+

A similar element, tabbrowser, provides the functionality of browser but also provides a tab bar for switching between multiple pages. This is the widget used by the Mozilla browser for its tabbed browsing interface. The tabbrowser element is actually implemened as a tabbox containing a set of browser elements. Both types of browser offer similar control over pages that are displayed.

+

Here is an example browser:

+

Example

+

Código Ver en funcionamiento

+
<browser src="http://www.mozilla.org" flex="1"/>
+
+

As with the iframe, you can specify the url in a browser using the src attribute. For a tabbrowser, you cannot set the url directly like this, as it doesn't display just one url. Instead, you must use a script and call the loadURI function.

+

There are three classes of browser, depending on the kind of content that you want to display inside. The type may be specified using the type attribute. The first type is the default and is used if you don't specify a type. In this case, the content loaded inside the browser is treated as if it was part of the same application and has access to the outer window. That means that when a script loaded inside the browser tries to get the topmost window, it will get the outer XUL window.

+

This would be suitable for a child XUL panel that is part of your application, but this isn't what you want for a browser that loads a web page. Instead, you would want to restrict the web page to only getting access to the web page content. You might note that a Mozilla browser window has XUL content for the toolbars and statusbar and so forth with a tabbrowser forming the main area. This inner area displays a web page, but the web page cannot access the XUL around it. This is because it uses the second type of browser, specified by setting the type attribute to the value content. This prevents the content from traversing up to the XUL window. An example:

+
<browser src="http://www.mozilla.org" type="content" flex="1"/>
+
+

It is important that you set the type attribute correctly if you are going to be displaying remote web sites inside the browser element. The tabbrowser sets the content type automatically on all tabbed browsers that it creates. So you don't have to set this explicitly for tabbed browsers.

+

The third type is used when your window contains multiple browser elements, for example if you have a sidebar displaying some extra content. Set the type attribute on the main browser element to content-primary to indicate that its content will be the primary content inside the window. This acts just like the content value except that the content inside is accessible using the XUL window's 'content' property. This makes it easy to access the content of the main browser using a script. The tabbrowser automatically sets the type attribute of whichever browser is currently visible to content-primary, which means that you will always be able to access the currently visible content in this way.

+

Next, we'll look at how to create a splitter.

+

Categorías

+

links interwikis

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html new file mode 100644 index 0000000000..96b7e38150 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/plantillas/index.html @@ -0,0 +1,191 @@ +--- +title: Plantillas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Plantillas +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Templates +--- +

En esta sección descubriremos cómo poblar elementos con datos.

+ +

Poblando elementos

+ +

XUL provee un método con el cual creamos elementos a partir de datos proporcionados por RDF, ya sea desde un archivo RDF o desde un origen de datos interno. Mozilla suministra muchas fuentes de datos, como ser marcadores, histórico y mensajes de correo. En la próxima sección se ofrecerán más detalles sobre esto.

+ +

Normalmente los elementos tales como treeitem y menuitem serán poblados con datos. Sin embargo, si se desea pueden usarse otros elementos, aunque éstos son mas útiles en casos especiales. A pesar de ello comenzaremos con estos otros elementos ya que los árboles y los menús requieren mas código.

+ +

Para permitir la creación de elementos basados en datos RDF se necesitará proporcionar una plantilla simple, la cual será duplicada por cada elemento creado. Esencialmente, se provee únicamente el primer elemento y los restantes son construidos sobre la base de éste.

+ +

La plantilla es creada empleando el elemento template (en), dentro del mismo pueden ubicarse los elementos que se desee utilizar para cada elemento a construir. El elemento template debe ser colocado dentro del contenedor que contendrá los elementos construidos. Por ejemplo, si se utiliza un árbol debe colocarse el elemento template dentro de un elemento tree (en).

+ +

Ejemplo de plantilla simple

+ +

Tomemos un simple ejemplo donde queremos crear un botón por cada marcador de primer nivel. Mozilla ofrece una fuente de datos de marcadores por lo que ésta puede emplearse para adquirir los datos. Este ejemplo únicamente obtendrá los marcadores de primer nivel (o carpetas de marcadores) por lo que crearemos botones. Para los marcadores hijos deberemos usar un elemento que muestre datos de manera jerárquica, como un árbol o un menú.

+ +
+

Tanto este ejemplo como cualquier otro que haga referencia a fuentes de datos RDF internas únicamente funcionará si se lo carga desde una URL chrome, ya que por razones de seguridad Mozilla no permite el acceso a ellas desde otras procedencias.

+
+ +

Para ver este ejemplo se necesitará crear un paquete chrome y cargar el archivo desde allí, (se puede hacer fácilmente mirando en archivos de manifiesto) entonces se podrá ingresar la URL chrome en la barra de direcciones del navegador.

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1">
+  <template>
+    <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/>
+  </template>
+</vbox>
+
+ +

Image:templates1.jpg

+ +

Aquí se ha creado una caja vertical que contiene una columna de botones, uno por cada marcador de primer nivel. Puede verse que la plantilla contiene un solo botón (en), éste es utilizado como base para todos los botones que serán creados. En la imagen se observa que se creó un conjunto de botones, uno por cada marcador.

+ +

Intente añadir un nuevo marcador en el navegador manteniendo la ventana de ejemplo abierta. Notará que los botones del ejemplo son inmediatamente actualizados, puede ser necesario enfocar la ventana para que se produzca este cambio.

+ +

Contenedor y fuentes de dato

+ +

La plantilla es colocada dentro de la caja vertical, la caja posee dos atributos especiales que le permiten ser utilizada para plantillas, los cuales se emplean para especificar el origen de los datos. El primer atributo de la caja es datasources, el cual se usa para declarar la fuente de datos RDF que proveerá los datos para crear los elementos, en éste caso rdf:bookmarks. Se habrá adivinado que esto significa que se utilizará la fuente de datos de marcadores, esta fuente es proveída por Mozilla. Para utilizar un origen de datos propio, en el atributo datasources debe especificarse la URL de un archivo RDF, tal como se indica en el siguiente ejemplo:

+ +
<box datasources="chrome://zoo/contenidos/animales.rdf"
+     ref="http://www.algun-zoo-ficticio.com/todos-los-animales">
+
+ +

Incluso pueden especificarse múltiples fuentes de datos al mismo tiempo separándolas con un espacio en el valor del atributo. Esto puede aprovecharse para mostrar datos desde varios orígenes.

+ +

El atributo ref indica la parte de la fuente de datos desde donde se quiere obtener los datos. En el ejemplo de los marcadores, el valor NC:BookmarksRoot es utilizado para indicar la raíz de la jerarquía de marcadores. Otros valores posibles dependerán del origen de datos utilizado, si se utiliza un archivo RDF propio como origen de datos, el valor corresponderá al valor de un atributo about en un elemento Bag RDF, un elemento Seq o un elemento Alt.

+ +

Dentro de la plantilla

+ +

Al añadir estos dos atributos a la caja de arriba se permitirá la generación de elementos utilizando la plantilla. Sin embargo, los elementos dentro de la plantilla necesitan ser declarados de otra forma. En el ejemplo anterior puede observarse que el botón posee un atributo uri y un valor inusual para el atributo label.

+ +

El valor de un atributo dentro de la plantilla que comience con 'rdf:' indica que el valor debe ser obtenido de la fuente de datos, éste es el caso del atributo label en el ejemplo anterior. El resto del valor hace referencia a la propiedad name en la fuente de datos. Esto se construye tomando la URL del área de denominación utilizada por la fuente de datos y agregando la propiedad name. Si no puede comprender esto intente volver a leer la última parte de la sección anterior, la cual explica cómo se pueden referenciar los recursos en RDF. Aquí usamos únicamente el nombre del marcador pero hay muchos otros campos disponibles.

+ +

La etiqueta de los botones es fijada a esta URI especial ya que queremos que las etiquetas en los botones contengan los nombres de los marcadores. Podríamos haber puesto una URI en cualquiera de los atributos del botón, o de cualquier otro elemento. Los valores de estos atributos son reemplazados con datos alimentados por la fuente de datos la cual es, en éste caso, la de marcadores. Por ello terminamos con las etiquetas de los botones conteniendo los nombres de los marcadores.

+ +

El siguiente ejemplo muestra cómo podríamos establecer otros atributos de un botón empleando una fuente de datos. Naturalmente, esto asume que la fuente de datos provee los recursos apropiados. Si un recurso en particular no puede ser encontrado el valor del atributo será una cadena de texto vacía.

+ +
<button class="rdf:http://www.ejemplo.com/rdf#clase"
+        uri="rdf:*"
+        label="rdf:http://www.ejemplo.com/rdf#name"/>
+        crop="rdf:http://www.ejemplo.com/rdf#crop"/>
+
+ +

Como puede verse, es posible generar listas de elementos dinámicamente con los atributos proporcionados por un origen de datos diferente. El atributo uri es empleado para especificar el elemento a partir del cual se iniciará la generación de contenido. El primer contenido se generará una vez mientras que el contenido en el interior será generado para cada recurso. Veremos más de esto al crear plantillas para árboles.

+ +

Más ejemplos

+ +

Al agregar estas características en el contenedor dentro del cual se encuentra la plantilla, que es en este caso una caja, y a los elementos dentro de la plantilla, podremos generar listas de contenido interesantes a partir de datos externos. Claro que podemos poner más de un elemento dentro de una plantilla y añadir las referencias RDF especiales a los atributos en cualquiera de estos elementos. El siguiente ejemplo lo demuestra.

+ +

Ejemplo 2: Código Ver en funcionamiento

+ +
<vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1">
+  <template>
+    <vbox uri="rdf:*">
+      <button label="rdf:http://home.netscape.com/NC-rdf#Name"/>
+      <label value="rdf:http://home.netscape.com/NC-rdf#URL"/>
+    </vbox>
+  </template>
+</vbox>
+
+ +

Esto crea una caja vertical con un botón y una etiqueta por cada marcador. El botón tendrá el nombre del marcador y la etiqueta su URL.

+ +

Los elementos que son creados no son funcionalmente diferentes a aquellos insertados directamente en el archivo XUL. Para cada elemento creado a través de una plantilla se añadirá el atributo id, el cual tendrá un valor que identifica el recurso. Esto puede emplearse para identificar el recurso creado.

+ +

También es posible especificar en el mismo atributo múltiples valores de recurso separándolos con un espacio, igual que en ejemplo debajo y en más acerca de la sintaxis de recursos (XULPlanet).

+ +

Ejemplo 3: Código Ver en funcionamiento

+ +
<vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot"
+     flex="1">
+  <template>
+    <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name rdf:http://home.netscape.com/NC-rdf#URL"/>
+  </template>
+</vbox>
+
+ +

Cómo son construidas las plantillas

+ +

Cuando un elemento posee el atributo datasources se está indicando que se espera que el elemento sea construido a partir de una plantilla. Note que el rótulo template no es el que determina si el contenido se construirá, es el atributo datasources. Si este atributo está presente, un objeto llamado Builder (constructor) se añadirá al elemento. Este objeto es el responsable de construir el contenido a partir de la plantilla. En JavaScript puede accederse al objeto constructor mediante la propiedad builder, aunque normalmente esto será necesario solo si se desea que el constructor regenere el contenido en situaciones donde esto no se haga automáticamente.

+ +

Existen dos tipos diferentes de constructores. El primero es un constructor de contenidos y se utiliza en la mayoría de los casos, y el otro es un constructor de árboles que se usa únicamente para árboles.

+ +

El constructor de contenidos toma el contenido dentro del elemento template y lo duplica por cada fila. Por ejemplo, si en el ejemplo anterior el usuario tenía diez marcadores, diez elementos label (en) serán creados y añadidos al elemento vbox (en). Si se utilizaran funciones DOM para recorrer el árbol, podrán encontrarse estos elementos y ver sus propiedades. Los elementos serán visibles pero no la plantilla, aunque aún existe en el documento árbol. Además, la id de cada una de las etiquetas se establecerá con el recurso RDF para esa fila.

+ +

Este constructor siempre comienza en el lugar donde se ha especificado uri=“rdf:*�?. Si el atributo uri en un elemento posterior al elemento árbol, los elementos fuera se crearán una sola vez. En el siguiente ejemplo se creará una caja horizontal (hbox), la cual será llenada con una etiqueta por cada ítem.

+ +
<template>
+  <hbox>
+    <label uri="rdf:*" value="rdf:http://home.netscape.com/NC-rdf#Name"/>
+  </hbox>
+</template>
+
+ +

Si hubiera otros contenidos dentro del elemento con el atributo datasources pero fuera de la plantilla, ésos contenidos también aparecerán. Así puede mezclarse contenidos estáticos y contenidos dinámicos de una plantilla.

+ +

Constructor de árbol

+ +

El constructor de árboles, por otro lado, no genera los elementos DOM para las filas. En cambio, obtendrá la información directamente de la fuente de datos RDF cuando la necesite. Ya que usualmente se espera que los árboles muestren miles de filas de datos, este método es mucho más eficiente. Crear un elemento por cada celda sería muy costoso. Sin embargo, el trueque es que los árboles únicamente pueden mostrar texto y, como no se crean elementos, no podrán utilizarse propiedades CSS para diseñar celdas de árboles.

+ +

El constructor de árboles se utiliza solamente con árboles. Los otros elementos utilizan el constructor de contenido. Esto no causa problema alguno, ya que no se prevé que otros elementos -como los menús- contengan demasiados ítems. También es posible utilizar el constructor de contenido con los árboles, y por cada fila se crearán un elemento treeitem y sus elementos relacionados.

+ +

Reglas, líneas o delineación

+ +

En la imagen del anterior ejemplo se habrá notado que el tercer botón es simplemente un botón con un guión adentro, éste es un separador en la lista de marcadores. De la manera en que la venimos usando, la fuente de datos RDF de marcadores suministra los separadores como si fueran comunes marcadores. Lo que realmente querríamos lograr es mostrar un pequeño espacio en lugar de un botón para los separadores, esto significa que queremos crear dos tipos diferentes de contenido, uno para los marcadores regulares y otro para los separadores.

+ +

Podemos hacer esto empleando el elemento rule (en). Definimos una regla/línea por cada variación en los elementos que queremos crear. En nuestro caso, necesitaremos un delineación para los marcadores y otro para los separadores. Los atributos puestos en el elemento rule determinan cuales reglas se aplican a qué recurso RDF.

+ +

Al buscarse qué delineación aplican a los datos, cada regla es revisada en secuencia buscando coincidencias. Esto significa que el orden en que se definen las delineación es importante, ya que los primeros tendrán precedencia sobre los posteriores.

+ +

El siguiente ejemplo demuestra el ejemplo anterior con dos reglas:

+ +

Ejemplo 4: Código Ver en funcionamiento

+ +
<window id="ventana-ejemplo
+  title="Lista de marcadores"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ <vbox datasources="rdf:bookmarks" ref="NC:BookmarksRoot" flex="1">
+   <template>
+
+    <rule rdf:type="http://home.netscape.com/NC-rdf#BookmarkSeparator">
+     <spacer uri="rdf:*" height="16"/>
+    </rule>
+
+    <rule>
+      <button uri="rdf:*" label="rdf:http://home.netscape.com/NC-rdf#Name"/>
+    </rule>
+
+  </template>
+ </vbox>
+
+</window>
+
+ +

Image:templates2.jpg

+ +

Al utilizar dos delineaciones hemos permitido que el contenido de la plantilla sea generado selectivamente. En la primer regla se seleccionan separadores de marcadores, como puede observarse en el atributo rdf:type. La segunda delineación no posee atributos, por lo que todos los datos corresponden.

+ +

Todos los atributos puestos en el rótulo tag se usan como criterio de correspondencia. En este caso, la fuente de datos bookmarks provee una propiedad rdf:type para distinguir separadores. Este atributo es fijado en un valor especial para los separadores en la fuente de datos RDF de marcadores, así es como podemos distinguirlos de los marcadores que no son separadores. Una técnica similar puede ser utilizada para cualquier atributo que pudiera existir en un elemento RDF Description.

+ +

El valor URL específico dado al primer lineamiento en el ejemplo de arriba se utiliza para separadores. Esto significa que los separadores seguirán la regla uno y generarán un elemento spacer, el que mostrará un hueco de 16 píxeles. Los elementos que no sean separadores no coincidirán con la regla uno y caerán en la regla dos, la cual no posee atributos por lo que cualquier dato coincide. Esto es, por supuesto, lo que queremos que le suceda al resto de la información.

+ +

Se habrá notado también que como quisimos obtener un atributo del área de denominación RDF (rdf:type) tuvimos que añadir una declaración del área de denominación al rótulo window. Si no hubiéramos hecho esto el atributo (type) se habría buscado en el área de denominación XUL, y como éste atributo no existe en ella la regla no tendría correspondencias. Si se utilizan atributos en un área de denominación propia se deberá añadir una declaración a la misma para corresponderlos.

+ +

Debería adivinarse qué sucedería si se eliminara la segunda delineación. Como resultado se vería un solo espacio y ningún marcador ya que los mismos no coincidirían con ninguna de las reglas.

+ +

Puesto de manera simple, una delineación corresponde si todos los atributos puestos en el elemento rule coinciden los atributos correspondientes en el recurso RDF. En el caso de un archivo RDF, los recursos serían los elementos Description.

+ +

Sin embargo hay pequeñas excepciones. No puede haber correspondencias basadas en los atributos id, rdf:property o rdf:instanceOf, aunque ya que pueden utilizarse atributos propios de áreas de denominación propias esto no debe importar mucho.

+ +

Note que una plantilla sin reglas en ella, como en el primer ejemplo, en realidad es funcionalmente un equivalente a una plantilla con un solo lineamiento sin atributos en él.

+ +

A continuación veremos cómo utilizar plantillas con los árboles.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html new file mode 100644 index 0000000000..8777a6f90c --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/posicionamiento_de_elementos_de_la_ventana/index.html @@ -0,0 +1,229 @@ +--- +title: Posicionamiento de elementos de la ventana +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Posicionamiento_de_elementos_de_la_ventana +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning +--- +

Aquí veremos cómo controlar la posición y tamaño de un elemento.

+

Posicionamiento de elementos de la caja

+

Hasta ahora sabemos cómo posicionar vertical u horizontalmente los elementos en el interior de una caja. A menudo necesitaremos mayor control sobre la posición y tamaño de los elementos dentro de la caja, para esto primero necesitamos echar un vistazo a cómo trabaja una caja.

+

La posición de un elemento es determinada por el estilo de esquema de su contenedor. Por ejemplo, la posición de un botón en una caja horizontal es a la derecha del botón anterior, si es que hay alguno. El tamaño de un elemento es determinado por dos factores, el tamaño que el elemento necesita poseer y el tamaño que uno especifique. El tamaño que un elemento requiere es determinado por el tipo de elemento. Por ejemplo, el ancho de un botón es determinado por la cantidad de texto en el botón.

+

Un elemento será generalmente tan amplio como éste necesite para soportar su contenido, y no mayor. Algunos elementos, como las cajas de texto, tienen un tamaño predeterminado. Una caja será suficientemente amplia como para contener los elementos dentro de ella. Una caja horizontal con tres botones en ella será tan ancha como los tres botones, más un pequeño espacio de relleno.

+

En la imagen de abajo, a los primeros dos botones se les ha dado un tamaño adecuado como para contener su texto. El tercer botón es mayor porque tiene más contenido. El ancho de la caja que contiene los botones es el ancho total de los botones más el espacio entre ellos. El alto de los botones es de un tamaño apropiado para contener el texto.

+

posicionamiento_img01.jpg

+

Podría necesitarse tener mayor control sobre el tamaño de un elemento en una ventana. Hay para ello un número de características que permiten controlar el tamaño de un elemento. La forma rápida es simplemente agregar a un elemento los atributos width (ancho) y height (alto), muy parecido a lo que puede hacerse en un rótulo HTML img. Un ejemplo se demuestra abajo:

+

Ejemplo: atributos height y width

+

Código Ver en funcionamiento

+
<button label="Aceptar" width="100" height="40"/>
+
+

Sin embargo, no se recomienda hacer esto, ya que no es muy portable y podría no adaptarse a algunos temas. Una mejor forma es utilizar propiedades de estilo, que funcionan de manera similar a las hojas de estilo en HTML. Pueden utilizarse las siguientes propiedades CSS:

+
+
+ width 
+
+ Esto especifica el ancho del elemento.
+
+ height 
+
+ Especifica el alto del elemento.
+
+

Fijando cualquiera de estas propiedades, el elemento será creado con ese ancho y/o largo. Si se especifica solo una propiedad de tamaño, la otra se calculará de acuerdo a lo requerido. El tamaño de estas propiedades de estilo deben especificarse como un número seguido de una unidad de medida.

+

Los tamaños son bastante fáciles de calcular para elementos no flexibles. Estos simplemente obedecen sus anchos y altos especificados, y si el tamaño no fuera especificado, el tamaño predeterminado del elemento será lo suficientemente amplio como para acomodar su contenido. Para elementos flexibles, el cálculo es ligeramente más difícil.

+

Elementos flexibles son aquellos que poseen el atributo flex establecido en un valor mayor que 0. Debe recordarse que los elementos flexibles aumentan y disminuyen su tamaño para acomodarse al espacio disponible. Su tamaño predeterminado aún se calcula igual que el de los elementos no flexibles. El siguiente ejemplo lo demuestra:

+

Ejemplo

+

Código Ver en funcionamiento

+
<window orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<hbox>
+  <button label="Sí" flex="1"/>
+  <button label="No"/>
+  <button label="Realmente no sé si uno u otro."/>
+</hbox>
+
+</window>
+
+

La ventana aparecerá inicialmente como la imagen anterior. Los primeros dos botones serán dimensionados a un adecuado ancho predeterminado y el tercer botón será mayor porque tiene una etiqueta más larga. El primer botón fue hecho flexible y los tres elementos han sido puestos dentro de una caja. El ancho de la caja se fijará al ancho total inicial de los tres botones (en la imagen cerca de 430 píxeles).

+

Si se incrementa el ancho de la ventana, los elementos son comprobados para ver si son flexibles y así rellenar el espacio en blanco que aparecerá. El botón es el único elemento flexible, pero no aumentará su ancho porque la caja dentro de la que encuentra no es flexible. Un elemento no flexible nunca cambia su tamaño aún cuando haya espacio disponible, por lo que el botón no podrá crecer. Esto es, el botón no se hará más ancho.

+

La solución es también hacer flexible a la caja. Entonces, cuando se haga más ancha la ventana, habrá espacio extra disponible, por lo que la caja crecerá para ocupar el espacio extra. Como la caja es mayor, también se creará espacio extra dentro de ella, y el botón flexible que contiene crecerá para ajustarse al espacio disponible. Este proceso se repetirá por cada caja anidada existente.

+

Estableciendo tamaños mínimos y máximos

+

Puede ser necesario permitir que un elemento sea flexible, pero restringir su tamaño para que no pueda superar cierta dimensión; o puede necesitarse especificar un tamaño mínimo. Esto puede establecerse utilizando cuatro atributos.

+
+
+ minwidth 
+
+ Especifica el ancho mínimo del elemento.
+
+ minheight 
+
+ Especifica la altura mínima del elemento.
+
+ maxwidth 
+
+ Especifica el ancho máximo del elemento.
+
+ maxheight 
+
+ Especifica la altura máxima del elemento.
+
+

Estos valores se miden siempre en píxeles. También pueden utilizarse las correspondientes propiedades CSS, min-width, min-height, max-width y max-height.

+

Estas propiedades son aprovechables únicamente por elementos flexibles. Especificando una altura máxima, por ejemplo, un botón flexible podrá crecer solamente hasta esa altura. Aún podrá redimensionarse la ventana más allá de ese punto pero el botón dejará de crecer. Asimismo, la caja en la que se encuentre el botón podrá continuar agrandándose, a menos que también se le fije una altura máxima.

+

Si dos botones son igualmente flexibles, normalmente ambos compartirán el espacio extra. Si un botón tiene un ancho máximo, el segundo continuará creciendo y ocupará todo el espacio restante.

+

Si una caja posee un ancho o alto máximos, los hijos no podrán crecer más allá de ese tamaño máximo. Si una caja tiene un ancho o alto mínimos, los hijos no podrán achicarse menos que ese tamaño mínimo. Aquí hay algunos ejemplos del establecimiento de anchos y altos:

+
<button label="1" style="width: 100px;"/>
+<button label="2" style="width: 100em; height: 10px;"/>
+<button label="3" flex="1" style="min-width: 50px;"/>
+<button label="4" flex="1" style="min-height: 2ex; max-height: 100px"/>
+<textbox flex="1" style="max-width: 10em;"/>
+<description style="max-width: 50px">Este es un aburrido pero simple texto desplegable.</description>
+
+
+
+ Ejemplo 1 
+
+ el primer botón será mostrado con un ancho de 100 píxeles (px significa píxeles). Debe agregarse la unidad de medida o el ancho será ignorado.
+
+ Ejemplo 2 
+
+ el segundo botón se mostrará con un alto de diez píxeles y un ancho de 100 ems (un em es la medida de un carácter en el tipo de letra utilizado).
+
+ Ejemplo 3 
+
+ el tercer botón es flexible, por lo que crecerá basado en el tamaño de la caja en la que se encuentre. Sin embargo, el botón nunca se reducirá a menos de 50 píxeles. Otros componentes flexibles como los espaciadores absorberán el espacio remanente, rompiendo el cociente flex.
+
+ Ejemplo 4 
+
+ el cuarto botón es flexible y nunca tendrá una altura que sea menor a 2 ex (un ex es normalmente la altura de la letra x en el tipo de letra utilizado) o mayor que 100 píxeles.
+
+ Ejemplo 5 
+
+ la entrada de texto es flexible pero nunca crecerá más de 10 ems. A menudo se querrá utilizar ems al especificar tamaños de elementos con texto en ellos. Esta unidad de medida es útil para cajas de texto, así el tipo de letra podrá cambiar y las cajas de texto siempre poseerán un tamaño adecuado, aún si el tipo de letra es muy grande.
+
+ Ejemplo 6 
+
+ el elemento description está restringido a poseer un ancho máximo de 50 píxeles. El texto contenido se desplegará hasta la siguiente línea, luego de cincuenta píxeles.
+
+
+

Agreguemos alguno de estos estilos a la ventana de diálogo "buscar archivos". Lo haremos de tal manera que la caja de texto se redimensione para ocupar toda la ventana.

+

<textbox id="find-text" flex="1" style="min-width: 15em;"/>

+

Aquí, la entrada de texto se ha hecho flexible, de esta manera crecerá si el usuario cambia el tamaño de la ventana. Esto es útil si el usuario desea ingresar una cadena de texto muy larga. También, un ancho mínimo de 15 ems fue fijado para que la caja de texto siempre muestre al menos 15 caracteres. Si el usuario achica el tamaño de la ventana, la entrada de texto no se reducirá pasados los 15 ems. Se dibujará como si se extendiera sobrepasando el borde de la ventana. Nótese en la imagen de abajo que la entrada de texto a crecido para extenderse por el tamaño total de la ventana.

+
+

Empaque de cajas

+

Digamos que se tiene una caja con dos elementos hijos, de los cuales ninguno es flexible, pero la caja sí lo es. Por ejemplo:

+

Ejemplo

+

Código Ver en funcionamiento

+
<box flex="1">
+  <button label="Alegre"/>
+  <button label="Triste"/>
+</box>
+
+

Si se redimensiona la ventana, la caja se expandirá para adaptarse al tamaño de la ventana. Los botones no son flexibles, por lo que sus longitudes no cambiarán. El resultado es espacio extra que aparecerá en el lado derecho de la ventana, dentro de la caja. Puede desearse, sin embargo, que el espacio extra aparezca del lado izquierdo, así los botones se mantendrán alineados a la derecha en la ventana.

+

Esto puede lograrse colocando un espaciador dentro de la caja, pero se volverá confuso cuando haya que realizarlo muchas veces. Una mejor solución es utilizar en la caja un atributo adicional: pack (empaquetar). Este atributo indica cómo empaquetar los elementos hijos dentro de la caja. Para cajas orientadas horizontalmente, controla el posicionamiento horizontal de los hijos. En cajas verticales, controla el posicionamiento vertical. Pueden utilizarse los siguientes valores:

+
+
+ start 
+
+ Posiciona los elementos en el extremo izquierdo para cajas horizontales y en el extremo superior para cajas verticales. Este es el valor predeterminado.
+
+ center 
+
+ Centra los elementos hijos en la caja.
+
+ end 
+
+ Posiciona los elementos al extremo derecho en cajas horizontales y al extremo inferior en cajas verticales.
+
+

El atributo pack se aplica a la caja contenedora de los elementos a ser empaquetados, no a los elementos en sí mismos.

+

Podemos cambiar el ejemplo anterior para centrar los elementos, de esta manera:

+

Ejemplo

+

Código Ver en funcionamiento

+
<box flex="1" pack="center">
+  <button label="Alegre"/>
+  <button label="Triste"/>
+</box>
+
+

Ahora, cuando la ventana sea redimensionada, los botones se centrarán horizontalmente. Compare este comportamiento con el del ejemplo anterior.

+

Alineación de cajas

+

Si la ventana en el ejemplo Alegre/Triste se redimensiona horizontalmente, el ancho de la caja crecerá. Si no obstante se redimensiona la caja verticalmente, notará que la altura de los botones aumenta. Esto sucede porque la flexibilidad en la otra dirección se asume predeterminadamente.

+

Puede regularse este comportamiento con el atributo align (alineación). Para cajas horizontales, éste controla verticalmente la posición de los hijos. En cajas verticales, controla la posición horizontal de los hijos. Los valores posibles son similares a los de pack..

+
+
+ start 
+
+ Alinea los elementos a lo largo del extremo superior para cajas horizontales y a lo largo del borde izquierdo para cajas verticales.
+
+ center 
+
+ Centra los elementos hijos en la caja.
+
+ end 
+
+ Alinea los elementos a lo largo del extremo inferior en cajas horizontales y a lo largo del borde derecho en cajas verticales.
+
+ baseline 
+
+ Alinea los elementos para que el texto quede alineado. Esto es útil en cajas horizontales únicamente.
+
+ stretch 
+
+ Este valor, el predeterminado, causa que los elementos crezcan hasta ocupar el tamaño de la caja, muy parecido a un elemento flexible, pero en la dirección opuesta.
+
+

Similar al atributo pack., el atributo align es aplicable únicamente a la caja cuyos elementos deben ser alineados, no a los elementos en sí.

+

Por ejemplo, la primera caja de abajo tendrá a sus hijos expandidos, porque ése es el valor predeterminado. La segunda caja posee un atributo align, por lo que sus hijos se ubicarán centrados.

+

Ejemplo

+

Código Ver en funcionamiento

+
<?xml version="1.0" encoding="UTF-8"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window id="sino" title="Pregunta" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <hbox>
+    <button label="Sí"/>
+    <button label="No"/>
+  </hbox>
+  <hbox align="center">
+    <button label="Tal vez"/>
+    <button label="Quizás"/>
+  </hbox>
+
+</window>
+
+

Image:boxstyle2-b.jpg

+

También pueden utilizarse las propiedades de estilo -moz-box-pack y -moz-box-align en lugar de especificar estos atributos.

+
+ El ejemplo "Alineador de cajas" podría resultar útil para probar las distintas propiedades de la caja..
+

Recorte de texto y botones

+

Podría llegar a crearse un elemento button que contuviera una etiqueta cuyo ancho sea mayor que el ancho máximo del botón. Por supuesto, una solución sería incrementar el tamaño del botón; sin embargo, los botones (y otros elementos con una etiqueta) tienen un atributo especial llamado crop (recortar) que permite especificar cómo el texto será recortado si este es demasiado largo.

+

Si el texto es recortado, puntos suspensivos (…) aparecerán en el botón de donde el texto fue recortado. Existen cuatro valores posibles:

+
+
+ left 
+
+ El texto es recortado por su lado izquierdo.
+
+ right 
+
+ El texto es recortado por su lado derecho.
+
+ center 
+
+ El texto es recortado en ambos extremos.
+
+ none 
+
+ El texto no será recortado, este es el valor predeterminado.
+
+

En realidad, este atributo es útil únicamente cuando una ventana de diálogo es diseñada para ser utilizable en cualquier tamaño. El atributo crop también puede ser usado con el elemento description y otros elementos que utilicen el atributo label para etiquetas. Lo siguiente muestra este atributo en uso:

+

Ejemplo

+

Código Ver en funcionamiento

+
<button label="¡Presióname por favor!" crop="right" flex="1"/>
+
+

Image:boxstyle2.jpg

+

Nótese como al texto en el botón se le recortará su lado derecho luego de que la ventana sea achicada.

+

Ejemplo "Buscar archivos" hasta ahora

+

Código Ver en funcionamiento

+

(Siguiente) A continuación, un resumen y algunos detalles adicionales del modelo de caja.

+

Ejemplos: 3.2.1 3.2.2 3.2.3 3.2.4 3.2.5 3.2.6

diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html new file mode 100644 index 0000000000..13b7abab12 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/rejillas/index.html @@ -0,0 +1,141 @@ +--- +title: Rejillas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Rejillas +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Grids +--- +

 

+

XUL posee un conjunto de elementos para crear rejilla tabulares.

+

Diseño tabular en XUL

+

Típicamente las páginas HTML utilizan tablas para diseñar o exhibir una rejillas de datos, XUL posee un conjunto de elementos para realizar este tipo de cosas. El elemento grid (rejilla) se utiliza para declarar una rejilla de datos, y posee algunas similitudes con el rótulo HTML table.

+

Una rejilla (grid) contiene elementos que son alineados en filas al igual que tablas. Dentro de la rejillaa se declaran dos cosas: las columnas y las filas que serán utilizadas. Tal como con las tablas HTML, dentro de las filas se inserta el contenido como ser etiquetas y botones. No se puede agregar contenido dentro de las columnas, pero pueden utilizarse para especificar el tamaño y apariencia de las mismas en la rejilla. Alternativamente, puede colocarse contenido dentro de las columnas y utilizarse las filas para especificar la apariencia. Primero veremos el método de organizar elementos por fila.

+

Para declarar un conjunto de filas se utiliza el rótulo rows (filas), el cual debe ser un elemento hijo del grid. Dentro de él añadiremos elementos row (fila), utilizados para especificar cada fila. Dentro de cada elemento row se agregará el contenido que se desee tener en esa fila.

+

Análogamente, las columnas se declaran con el elemento columns (columnas), que debe ser insertado como un elemento hijo de grid (la rejilla). Dentro de éste irán los elementos column (columna), uno por cada columna que se necesite en la rejilla. Esto debe ser fácil de entender con un ejemplo.

+

Ejemplo

+
<grid flex="1">
+  <columns>
+    <column flex="2"/>
+    <column flex="1"/>
+  </columns>
+
+  <rows>
+    <row>
+      <button label="Conejo"/>
+      <button label="Elefante"/>
+    </row>
+    <row>
+      <button label="Koala"/>
+      <button label="Gorila"/>
+    </row>
+  </rows>
+</grid>
+
+

Image:grids1.jpg

+

A una rejilla se le han añadido dos filas y dos columnas, cada columna es declarada con el rótulo column y se la ha dado el atributo flex. Cada fila contiene dos elementos, ambos botones. El primer hijo de cada elemento row es puesto en la primer columna de la rejilla y el segundo hijo se coloca en la segunda columna. Nótese que no se necesita un elemento para declarar una celda, o sea que no hay un equivalente al elemento tdde HTML. En lugar de esto, los contenidos de cada celda se ponen directamente en los elementos row.

+

Obviamente, además de un button (botón) puede agregarse cualquier tipo de elemento. Si se necesita que una celda en particular contenga múltiples elementos puede utilizarse un hbox (caja anidada) u otro elemento de caja. La hbox es un solo elemento pero dentro de ella pueden colocarse todos los elementos que se quiera. Por ejemplo:

+

Ejemplo

+
<grid flex="1">
+  <columns>
+    <column/>
+    <column flex="1"/>
+  </columns>
+
+  <rows>
+    <row>
+      <label control="titulodoc" value="Título del documento:"/>
+      <textbox id="titulodoc" flex="1"/>
+    </row>
+    <row>
+      <label control="rutadoc" value="Ubicación:"/>
+      <box flex="1">
+        <textbox id="rutadoc" flex="1"/>
+        <button label="Revisar..."/>
+      </box>
+    </row>
+  </rows>
+</grid>
+
+

Image:grids2.jpg

+

Note en la imagen de abajo cómo en la primer columna de elementos que contienen las etiquetas hay un solo elemento en cada fila. La segunda fila de la segunda columna contiene una caja, que a su vez contiene dos elementos, una textbox (caja de texto )y un button (botón). Dentro de una celda podrían insertarse cajas anidadas adicionales o incluso otra rejilla.

+

Si se redimensiona la ventana del ejemplo anterior se verá que las cajas de texto cambian su tamaño, pero los demás elementos no. Esto es porque se añadieron atributos code>flex</code> a las cajas de texto y a la segunda columna. La primer columna no necesita ser flexible porque las etiquetas no requieren cambiar de tamaño.

+

El ancho inicial de una columna es determinado por el elemento más grande en esa columna. Similarmente, la altura de una fila se determina por el tamaño de sus elementos. Para definir los tamaños pueden utilizarse las propiedades CSS minwidth y maxwidth, entre otras.

+

También pueden colocarse los elementos dentro de las column en lugar de las filas. Si se hace esto, las filas serán declaradas únicamente para especificar cuántas filas existen.

+

Ejemplo

+
<grid>
+  <rows>
+    <row/>
+    <row/>
+    <row/>
+  </rows>
+
+  <columns>
+    <column>
+      <label control="primero" value="Primer Nombre:"/>
+      <label control="segundo" value="Segundo Nombre:"/>
+      <label control="apellido" value="Apellido:"/>
+    </column>
+    <column>
+      <textbox id="primero"/>
+      <textbox id="segundo"/>
+      <textbox id="apellido"/>
+    </column>
+  </columns>
+
+</grid>
+
+

Esta rejilla posee tres filas y dos columnas, los elementos row son solamente marcadores de posición para especificar cuántas hay. Puede añadirse el atributo flex a alguna fila para volverla flexible. El contenido es puesto dentro de cada column, el primer elemento dentro de cada elemento column es ubicado en la primer fila, el segundo en la segunda fila y el tercero en la tercer fila.

+

Si se agrega contenido tanto en filas como en columnas, un contenido se superpondrá con el otro, aunque ambos se alinearán correctamente en la rejilla. Esto crea un efecto muy parecido a una rejilla de elementos stack (pila).

+

El orden de los elementos en la grid determina cuál se presentará encima y cuál será ubicado debajo. Si el elemento rows es puesto después del elemento columns, el contenido de las rows será mostrado por encima del contenido de las columns; si se ubica primero el elemento columns, su contenido se verá primero. Análogamente, los eventos como presiones en las teclas del ratón o del teclado se enviarán únicamente al grupo que se encuentre encima. Esta es la razón por la cual en el ejemplo anterior las columnas fueron declaradas después que las filas. Si las columnas se hubieran puesto primero, las filas recibirían los eventos y no podría escribirse en los campos correspondientes.

+

Una de las principales ventajas que tienen las rejilla sobre las cajas anidadas es que pueden crearse celdas que son flexibles tanto horizontal como verticalmente. Esto puede lograrse fijando el atributo flex tanto en el elemento row como en el elemento column correspondientes. El siguiente ejemplo lo demuestra:

+

Ejemplo

+
<grid flex="1">
+ <columns>
+  <column flex="5"/>
+  <column/>
+  <column/>
+ </columns>
+ <rows>
+  <row flex="10">
+    <button label="Cereza"/>
+    <button label="Limón"/>
+    <button label="Uva"/>
+  </row>
+  <row flex="1">
+    <button label="Frutilla"/>
+    <button label="Frambuesa"/>
+    <button label="Durazno"/>
+  </row>
+ </rows>
+</grid>
+
+

La primer columna y ambas filas fueron hechas flexibles, esto produce que cada celda de la primer columna sea flexible horizontalmente. Además, cada celda será flexible verticalmente porque ambas filas son flexibles, pero la primer fila es bastante más. La celda en la primer fila y columna (el botón "Cereza"?) será flexible horizontalmente por un factor de 5 y verticalmente por un factor de 10. La siguiente celda (Limón) sólo será flexible verticalmente. El atributo flex también fue añadido al elemento grid por lo que la rejilla completa será flexible, de lo contrario crecería en una sola dirección.

+

The flex attribute has also been added to the grid element so that the entire grid is flexible, otherwise it would only grow in one direction.

+

Column Spanning

+

There is no means of making a cell span a particular number of multiple columns or rows (See Discussion for a way of achieving the same effect). However, it is possible to make a row or column that spans the entire width or height of the grid. To do this, just add an element inside the rows element that isn't inside a row element. You can use a box type for example, and put other elements inside it if you want to use several elements. Here is a simple example:

+

Example

+

Código Ver en funcionamiento

+
<grid>
+  <columns>
+    <column flex="1"/>
+    <column flex="1"/>
+  </columns>
+
+  <rows>
+    <row>
+      <label value="Northwest"/>
+      <label value="Northeast"/>
+    </row>
+    <button label="Equator"/>
+    <row>
+      <label value="Southwest"/>
+      <label value="Southeast"/>
+    </row>
+  </rows>
+</grid>
+
+

The button will stretch to fit the entire width of the grid as it is not inside a grid row. You can use a similar technique to add an element in-between two columns. It would stretch to fit the height of the grid. You could also do both if that is desired.

+

(Siguiente) A continuación veremos características adicionales de las cajas de lista.

+

Categorías

+

links interwikis

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/selecci\303\263n_en_un_\303\241rbol/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/selecci\303\263n_en_un_\303\241rbol/index.html" new file mode 100644 index 0000000000..e9d0cbe0a0 --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/selecci\303\263n_en_un_\303\241rbol/index.html" @@ -0,0 +1,94 @@ +--- +title: Selección en un árbol +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Selección_en_un_árbol +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Tree_Selection +--- +

Esta sección describe como obtener y definir los elementos seleccionados en un arbol.

+ +

Obteniendo los elementos seleccionados

+ +

Cada elemento en un árbol (que corresponde al elemento treeitem -en)- si se usa la vista del contenido del árbol ) puede ser seleccionado individualmente. Si añades el atributo seltype a un árbol y tiene el valor múltiple, el usuario puede seleccionar diversos elementos del árbol al mismo tiempo. La selección no tiene porque ser continua. El árbol provee un número de funciones que nos ayudan a determinar que elementos están seleccionados.

+ +

Gestión del evento de selección

+ +

Primero veamos como podemos determinar si un elemento esta seleccionado. El gestor de eventos onselect() puede incluirse en el elemento tree -(en))-. Cuando el usuario selecciona un elemento del árbol, el gestor de eventos es llamado. El usuario puede también cambiar la selección usando las teclas del cursor. Si el usuario mantiene pulsadas las teclas del cursor para rápidamente desplazarse por los elementos, el gestor de eventos no es llamado hasta que el usuario deja de presionarlas. Esto ofrece una mayor rapidez y también implica que los elementos se mostrarán como seleccionados aunque nunca se llame al evento select para ellos.

+ +

La sintaxis para el gestor de eventos onselect es la siguiente.

+ +
<tree id="treeset" onselect="alert('Has seleccionado algo!');">
+
+ +

Índices del árbol

+ +

El árbol expone la propiedad currentIndex que podemos usar para obtener el elemento actualmente seleccionado, siendo el índice del primero 0. Puedes cambiar el elemento seleccionado si le asignas un nuevo valor a esta propiedad.

+ +

Los elementos hijos son incluidos en el contador justo después de sus padres. Esto significa que si hay tres elementos en la raíz y cada uno tiene 2 hijos, habrá un total de nueve elementos. El primer elemento (índice 0) será el primer elemento raíz, el siguiente (índice 1) será el primer hijo, el segundo hijo estará en el índice 2 y el segundo elemento raíz en el índice 3 y así sucesivamente.

+ +

Image:seltree1.jpg

+ +

En la imagen vemos ocho filas, de las cuales dos están seleccionadas. La primera fila seleccionada tiene el índice 4 y la segunda el índice 7. Las filas que no se muestran no se incluyen en el contador de índices.

+ +

Selección múltiple

+ +

Para los árboles que permiten selecciones múltiples, obtener la lista de filas seleccionadas es algo más complicado. El elemento árbol tiene la propiedad view, la cual tiene la propiedad selection que a su vez contiene propiedades y métodos relacionados con la selección actual del árbol. Puedes usar esos métodos para obtener un conjunto de elementos seleccionados o modificar la selección.

+ +

Ya que los elementos seleccionados en un árbol no tienen porque estar contiguos, puedes obtener distintos grupos de elementos seleccionados que sí lo están, usando las funciones getRangeCount() y getRangeAt(). La primera devuelve el número de rangos de selecciones que hay actualmente. Si solo hay un valor seleccionado, este valor será 1. Deberás utilizar un bucle para recorrer el número de rangos, llamando getRangeAt() en cada uno para obtener los índices del comienzo y fin del rango.

+ +

La función getRangeAt() toma tres parámetros.

+ + + +
Ejemplo con getRangeAt
+ +
var start = new Object();
+var end = new Object();
+var numRanges = tree.view.selection.getRangeCount();
+
+for (var t=0; t<numRanges; t++){
+  tree.view.selection.getRangeAt(t,start,end);
+  for (var v=start.value; v<=end.value; v++){
+    alert("El elemento "+v+" está seleccionado.");
+  }
+}
+
+ +

Hemos creado dos objetos llamados ‘start’ y ‘end’. Después hemos recorrido los rangos, el número de los cuales nos lo ha proporcionado la función getRangeCount(). Llamamos a la función getRangeAt() pasándole el índice del rango y los objetos ‘start’ y ‘end’. Estos objetos son devueltos con la propiedad 'value' rellenada. Así que si el primer rango es desde el tercer elemento hasta el séptimo, ‘start.value’ será 2 (recuerda que los índices cuentan desde 0) y ‘end.value’ será 6. Un dialogo de alerta se mostrará para cada índice seleccionado.

+ +

If you just want to find out if a specific row is selected, use can use the isSelected() function. It takes a row index as an argument and returns true if that row is selected.

+ +
alert(tree.view.selection.isSelected(3));
+
+ +

Modificando la selección del árbol

+ +

The selection object has a number of functions which may be used to change the selection. The simplest function is the select() function, which deselects any rows that are currently selected and selects one specific row. For example, the following code will select the row at index 5:

+ +
tree.view.selection.select(5);
+
+ +

Note that you should not just change the tree's currentIndex property to change the selection. Instead, you should use the selection's select function as in the example above. You can select all rows with the selectAll() function. Note that rows nested inside containers that are not open will not be selected. Naturally, this will only have any effect for trees that use multiple selection. There is also a clearSelection() function to clear the selection, and an invertSelection function to reverse the selection, that is, deselect all selected rows and select all unselected rows.

+ +

To select specific rows, use the rangedSelect() function which selects all rows in between two indices. Here is an example which selects rows between index 2 and 7. Note that rows 2 and 7 will also be selected.

+ +
tree.view.selection.rangedSelect(2,7,true);
+
+ +

The last argument indicates whether to add to the current selection or not. If true, the range will be added to the existing selection. If false, all existing selected rows will be deselected first. Finally, the clearRange() function may be used to deselect a range of rows, leaving rows outside the range unaffected.

+ +
tree.view.selection.clearRange(2,7);
+
+ +

Seguimos con como crear los detalles de vistas de un árbol.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html b/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html new file mode 100644 index 0000000000..37bd1c2052 --- /dev/null +++ b/files/es/archive/mozilla/xul/tutorial_de_xul/usando_espaciadores/index.html @@ -0,0 +1,103 @@ +--- +title: Usando espaciadores +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Usando_espaciadores +tags: + - Tutorial_de_XUL + - XUL +translation_of: Archive/Mozilla/XUL/Tutorial/Using_Spacers +--- +

En esta sección, averiguaremos como añadir algún espaciado en medio los elementos que hemos creado.

+

Adición de Espaciadores

+

Uno de los problemas con interfaces de usuario que se desarrollan es que cada usuario tiene una demostración diferente. Algunos usuarios pueden tener demostraciones más grandes con resoluciones más altas y los otros pueden tener resoluciones inferiores. Además, plataformas diferentes pueden tener exigencias especiales sobre el interfaz de usuario. Añadiendo el apoyo a múltiples lenguas, el texto para una lengua puede requerir más espacio(cuarto) que el otro.

+

Los usos que tienen que apoyar múltiples plataformas y lenguas por lo general tienen sus ventanas presentadas con mucho espacio para tener esto en cuenta. Algunas plataformas y juegos de herramientas de interfaz de usuario proporcionan los componentes con capacidad para autoajustar sus dimensiones y establecer su nueva posición por sí mismos para adaptarse a las necesidades del usuario. (por ejemplo: Java usa a administradores de disposición.)

+

XUL dota a los elementos con capacidad para ajustar la posición y redimensionarse automáticamente. Como hemos visto, en el ejemplo, la ventana de archivos del buscador ha cambiado su tamaño de modo que los elementos quepan correctamente dentro de ella. Cada vez agregamos algo, la ventana ha crecido.

+

XUL usa un sistema de disposición (capas) llamado 'Modelo de Cajas' que permite dividir las ventanas en conjuntos de 'cajas', anidables, para albergar los elementos. Hablaremos más de esto en la siguiente sección. Las cajas pueden ser ubicadas y redimensionadas asignando valores a sus propiedades directamente o mediante hojas de estilo. Por ahora, basta saber que el elemento de ventana es un tipo de caja.

+

Antes de entrar en el detalle sobre las cajas, introduciremos otro elemento XUL que es útil para controlar la disposición, el espaciador. Un espaciador es muy simple y sólo requiere un atributo, que será explicado en un momento. El espaciador más simple se parece a lo siguiente:

+
<spacer flex= "1" />
+
+

Un espaciador es usado para insertar un espacio vacío entre dos grupos de elementos que se encuentran dentro de un mismo contenedor (ventana o caja). Su función es crecer o encogerse cuando el usuario redimensiona la ventana, de modo que los elementos situados a su derecha, o debajo, sean empujados hacia los bordes (derecho o inferior, según sea el caso) y se mantenjan 'justificados'. Esto equivale a forzar a un grupo de elementos a mantenerse pegados al borde (derecho o inferior) de su contenedor (ventana) con independencia del tamaño adoptado por el mismo. Como veremos, es posible usar espaciadores para crear variados efectos de disposición.

+

En la sintaxis, mostrada arriba, el espaciador tiene un atributo llamado flex. Se usa para establecer la flexibilidad del espaciador. En el caso mostrado, el espaciador tiene un flex de 1. Este valor hace que el elemento espaciador sea elástico; y al insertarlo directamente dentro de una ventana, crecerá hasta copar el espacio disponible dentro de la misma (se descuenta el empleado por otros elementos). Si la ventana cambia su tamaño, el espaciador se ajustará para mentener copado el espacio disponible dentro de la misma. En breve añadiremos un espaciador a nuestro diálogo de búsqueda. Pero antes demos un vistazo a la ventana de diálogo cuando es redimensionada (para comparar, luego, con el efecto logrado al usar el espaciador).

+
+

 find-dlg-nospacer.jpg

+

Como se puede observar, todos los elementos han mantenido sus posiciones al cambiar el tamaño de la ventana; a pesar de que el espacio ofrecido por la misma para alijarlos el más grande. Veamos lo que ocurre al insertar un espaciador entre la caja de texto (textbox) y el botón buscar (Find).

+

find-dlg-wthspacer.jpg

+

Al agregar el espaciador y redimensinar la ventana, podemos ver que se expande para copar el vacío y los botones son empujados hacia la derecha.  El código para insertar el espaciador en el ejemplo es el siguiente: (insértelo inmediatamente antes del botón buscar - 'find-button')

+ 
<spacer flex="1"/>
+
+<button id="find-button" label="Find"/>
+
+
+

Más acerca de la Flexibilidad

+

XUL dispone los elementos en una ventana calculando dimensiones (ancho y alto) adecuadas para los elementos que contiene y luego agrega espacio, si hace falta, dónde sean flexibles. Salvo, aquellos elementos cuyas dimensiones hayan sido especificadas esplícitamente. El tamaño por defecto de un elemento es determinado por su contenido. Nótese, por ejemplo, que los botones 'find', 'cancel' tiene dimensiones ligeramente distintas de modo que ofrecen suficiente espacio para el texto en su interior. Si se crea un botón con una etiqueta muy larga su tamaño por defecto será el necesario para poder mostrar la etiqueta completa. Otros elementos, tales como las cajas de texto 'textbox' tienen un tamaño por defecto ajustado a su propósito.

+

El atributo flex se emplea para establecer si un elemento puede autoajustar sus dimensiones para copar la 'caja' que lo contiene. (en este caso, la ventana). El atributo flex no sólo aplica para los espaciadores; puede ser establecido para cualquier elemento. Por ejemplo, podríamos querer que se reajustase el botón buscar (find-button) en lugar de empujarlo, sin necesidad de que se autoajuste el espaciador.

+

find-dlg-flexbttn.jpg

+

Como se puede ver en la imagen, el establecer el atributo flex en el botón buscar, éste último se reajusta cuando la ventana lo hace. Un espaciador, en realidad, no es nada especial. Puede ser considerado como un botón oculto: opera sobre el espacio pero sin dibujarse en la pantalla.

+

Si se observa con cuidado la imagen arriba, se puede notar que no sólo creció el tamaño del votón buscar (find); también aparece un espacio vacío entre él y la etiqueta de texto. Desde luego, es consecuencia de que allí se encuentra el espaciador que ubicamos más arriba. El también se ha reajustado en tamaño. Una observación atenta evidenciará que el espacio disponible fue dividido entre los dos elementos que tienen establecido el atributo flex: el espaciador y el botón buscar. Cada uno de ellos recibió la mitad del espacio libre, disponible, para ajustar su tamaño.

+

Proporcionalidad de la flexibilidad (del atributo flex)

+

La razón por la que observamos el efecto anotado es la siguiente: tanto el espaciador como el botón tienen establecido su su atributo flex a 1. (flex="1"); ésto hace que se repartan de modo equivalente el espacio disponible. Pero, tambien es posible lograr un reparto del espacio sujeto a otras condiciones de proporcionalidad:

+

¿Qué pasaría en caso de desear que un elemento tome dos veces más espacio libre que otro? ¿Cómo lograrlo? -  Se puede usar números mayores que 1 como varores del atributo flex. Los valores de este atributo establecen una razón de proporcionalidad. Determinan cuántas partes del espacio disponible serán entragadas a cada uno de los elementos que lo tengan establecido. Si un elemento tiene su flex en 1 y otro tiene un flex de 2, el espacio libre será dividido en tres partes y se entregará 1 al primero y 2 al segundo; de modo que la razón de crecimiento, entre ellos, será  1:2; el segundo crecerá dos veces más que el primero.

+

The flex attribute isn't used to specify an actual size. Instead, it specifies how empty space it divided among the children of a container box. We'll look at boxes in the next section. Once the default sizes of the children of a box are determined, the flexibility values are used to divide up the remaining empty space in the box. For example, if a box is 200 pixels wide and contains two flexible buttons, the first 50 pixels and the other 90 pixels, there will be 60 pixels of space left over. If both buttons have a flex value of 1, the space will be divided evenly with 30 extra pixels of width going to each button. If the second button's flexibility was increased to 2, the first button would receive 20 pixels of the extra space and the second button would receive 40 pixels of extra space instead.

+

The flex attribute can be placed on any element, however it only has any meaning when placed on an element directly inside a XUL box. This means that even though you can place a flex on an HTML element, it will have no effect if that element is inside a non-box element.

+

Let's look at some examples:

+
Example 1:
+  <button label="Find" flex="1"/>
+  <button label="Cancel" flex="1"/>
+
+Example 2:
+  <button label="Find" flex="1"/>
+  <button label="Cancel" flex="10"/>
+
+Example 3:
+  <button label="Find" flex="2"/>
+  <button label="Replace"/>
+  <button label="Cancel" flex="4"/>
+
+Example 4:
+  <button label="Find" flex="2"/>
+  <button label="Replace" flex="2"/>
+  <button label="Cancel" flex="3"/>
+
+Example 5:
+  <html:div>
+    <button label="Find" flex="2"/>
+    <button label="Replace" flex="2"/>
+  </html:div>
+
+Example 6:
+  <button label="Find" flex="145"/>
+  <button label="Replace" flex="145"/>
+
+
+
+ Example 1 
+
+ in this case the flexibility is divided up evenly between both buttons. Both buttons will change size evenly.
+
+ Example 2 
+
+ here, both buttons will grow, but the Find button will grow ten times as much as the Cancel button, because it has a flex value that is 10 times the flex value of the Find button. Available space will be divided into one part for the Find button and 10 parts for the Cancel button.
+
+ Example 3 
+
+ only two of the buttons are marked as flexible here. The Replace button will never change size but the other two will. The Cancel button will always resize twice as large as the Find button because its flex value is twice as large.
+
+ Example 4 
+
+ in this case, all three buttons are flexible. Both the Find and Replace buttons will be the same size but the Cancel button will be somewhat larger (50% larger to be exact).
+
+ Example 5 
+
+ here, the two buttons are placed inside a div element. Flexibility is meaningless here as the buttons are not directly in a box. The effect would be the same if the flex attributes were left out.
+
+ Example 6 
+
+ because the flex values are the same on both buttons, their will flex equally. This would work just as well with flex values of one instead of 145. There's no difference in this case. It is recommended that you use lower numbers for readability.
+
+

Note that other factors such as the button labels and button minimum sizes will affect the actual sizes of the buttons. For instance, a button won't shrink less than the space needed to fit its label.

+

Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely. It means that the element is not flexible at all. You may also sometimes see a flex value specified as a percentage. This has no special meaning and is treated as if the percent sign was not there.

+

You may have noticed that when you resize the find file dialog vertically, the buttons resize themselves to fit the height of the window. This is because all of the buttons have an implied vertical flex given to them by the window. In the next section we'll learn how to change this.

+

Find files example so far

+

Código Ver en funcionamiento

+

Next, we'll learn some additional features of buttons.

+

Categorías

+

links interwikis

diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/\303\241rboles/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/\303\241rboles/index.html" new file mode 100644 index 0000000000..509017990e --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/\303\241rboles/index.html" @@ -0,0 +1,194 @@ +--- +title: Árboles +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Árboles +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Trees +--- +

XUL provides a way to create tabular or hierarchical lists using a tree.

+ +

El árbol

+ +

One of the more complex elements in XUL is the árbol. A tree may be used to display rows of text in columns. It can be used with rows either in a flat list or arranged into a hierarchy. A tree also allows the user to rearrange, resize and hide individual columns. Some examples of trees include the list of messages in a mail application, or the Bookmarks window in Mozilla.

+ +

In some ways, a tree has some similarities with the listbox. Both can be used to create tables of data with multiple rows and columns, and both may contain column headers. The tree also supports nested rows, whereas the listbox does not. However, listboxes may contain any type of content, whereas trees may only contain text and images. (Using advanced features, progress meters or checkboxes also can be added to the tree)

+ +

A tree consists of two parts, the set of columns, and the tree body.

+ + + +

The tree is unique in that the body of the tree consists only of a single widget which draws all of the data in the tree. This contrasts with the listbox, where individual listitem and listcell tags are used to specify the rows in the listbox. In a tree, all of the data to be displayed is supplied by a separate object, called a tree view. When it comes time to display a cell, the tree widget will call out to this tree view to determine what to display, which in turn will be drawn by the tree. The tree is smart enough to only ask for information from the view for those rows that need to be displayed. This allows the view to be optimized such that it only needs to load the data for displayed content. For instance, a tree might have thousands of rows, yet most of them will be scrolled off the border of the tree, hidden from view. This means that the tree is scalable to any number of rows without any performance problems. Of course, this is independant of the performance of the view object itself.

+ +

A tree view is an object which implements the nsITreeView interface. This interface contains thirty properties and functions which you may implement. These functions will be called by the tree as necessary to retrieve data and state about the tree. For instance, the getCellText() function will be called to get the label for a particular cell in the tree.

+ +

An advantage of using a tree view is that it allows the view to store the data in a manner which is more suitable for the data, or to load the data on demand as rows are displayed. This allows more flexibility when using trees.

+ +

Naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. Fortunately, XUL provides a couple of built-in view implementations which do most of the hard work for you. For most trees, especially when you first start to use trees, you will use one of these built-in types. However, you can create a view entirely from scratch if necessary. If you do, you might store the data in an array or JavaScript data structure, or load the data from an XML file.

+ +

Since the entire body of the tree is a single widget, you can't change the style of individual rows or cells in the normal way. This is because there are no elements that display the individual cells, like there is with the caja de lista. Instead, all drawing is done by the tree body using data supplied by the view. This is an important point and many XUL developers have trouble understanding this aspect. To modify the appearance of a tree cell, the view must instead associate a set of keywords for a row and cell. A special CSS syntax is used which styles components of the tree body with those keywords. In a sense, it is somewhat like using CSS classes. La estilización de un árbol es discutida con más detalles en una sección posterior.

+ +

Elementos del árbol

+ +

Trees can be created with the tree element, which is described in the following sections. There are also two elements used to define the columns to be displayed in the tree.

+ +
+
tree
+
This is the outer element of a tree.
+
+ +
+
treecols
+
This element is a placeholder for a set of treecol elements.
+
+ +
+
treecol
+
This is used to declare a column of the tree. By using this element, you can specify additional information about how the data in the columns are sorted and if the user can resize the columns. You should always place an id attribute on a column, as Mozilla uses the ids to identify the columns when rearranging and hiding them. This is no longer required in Mozilla 1.8 and later, but it is still a good idea to use ids on columns.
+
+ +
+
treechildren
+
This contains the main body of the tree where the individual rows of data will be displayed.
+
+ +
Ejemplo de árbol con dos columnas
+ +

Código Ver en funcionamiento

+ +
<tree flex="1">
+
+  <treecols>
+    <treecol id="nameColumn" label="Nombre" flex="1"/>
+    <treecol id="addressColumn" label="Dirección" flex="2"/>
+  </treecols>
+
+  <treechildren/>
+
+</tree>
+
+ +

First, the entire table is surrounded with a tree element. This declares an element that is used as a table or tree. As with HTML tables, the data in a tree is always organized into rows. The columns are specified using the treecols tag.

+ +

You may place as many columns as you wish in a tree. As with listboxes, a header row will appear with column labels. A drop-down menu will appear in the upper-right corner of the tree, which the user may use to show and hide individual columns. Each column is created with a treecol element. You can set the header label using the label attribute. You may also want to make the columns flexible if your tree is flexible, so that the columns stretch as the tree does. In this example, the second column will be approximately twice as wide as the first column. All of the columns should be placed directly inside a treecols element.

+ +

In this case we haven't specified a view to supply the tree's data, so we'll only see column headers and an empty tree body. You may have to resize the window to see anything since there isn't any data to display. Since the tree has been marked as flexible, the body will stretch to fit the available space. Making a tree flexible is quite commonly done, as it is often the case that the data in the tree is the most significant information displayed, so it makes sense to make the tree grow to fit. However, you may specify a specific number of rows to appear in a tree by setting the rows attribute on the tree element. This attribute specifies how many rows are displayed in the user interface, not how many rows of data there are. The total number of rows is supplied by the tree view. If there are more rows of data in the tree, a scrollbar will appear to allow the user to see the rest of them. If you don't specify the rows attribute, the default value is 0, which means that none of the rows will appear. In this case, you would make the tree flexible. If your tree is flexible, it doesn't need a rows attribute since it will grow to fit the available space.

+ +

Vista del contenido del árbol

+ +

Having said that the data to be displayed in a tree comes from a view and not from XUL tags, there happens to be a built-in tree view which gets its data from XUL tags. This may be a bit confusing, but essentially, one of the built-in tree views uses a set of tags which can be used to specify information about the data in the tree. The following tags are used:

+ +
+
treeitem
+
This contains a single parent row and all its descendants. This element also serves as the item which can be selected by the user. The treeitem tag would go around the entire row so that it is selectable as a whole.
+
+ +
+
treerow
+
A single row in the tree, which should be placed inside a treeitem tag.
+
+ +
+
treecell
+
A single cell in a tree. This element would go inside a treerow element.
+
+ +

Conveniently, these tags may be placed directly inside the treechildren tag, nested in the order above. The tags define the data to be displayed in the tree body. In this case, the tree uses the built-in tree view, called a content tree view, which uses the labels and values specified on these elements as the data for the tree. When the tree needs to display a row, the tree asks the content tree view for a cell's label by calling the view's getCellText function, which in turn gets the data from the label of the appropriate treecell.

+ +

However, the three elements listed above are not displayed directly. They are used only as the source for the data for the view. Thus, only a handful of attributes apply to the treeitem and related elements. For instance, you cannot change the appearance of the tree rows using the style attribute or with other CSS properties and the box related features such as flexibility and orientation cannot be used.

+ +

In fact, apart from some tree specific attributes, the only attributes that will have any effect will be the label attribute to set a text label for a cell and the src attribute to set an image. However, there are special ways of styling the tree and setting other features which we will see in later sections.

+ +

Also, events do not get sent to treeitem element and their children; instead they get sent to the treechildren element.

+ +

That the treeitems are unlike other XUL elements is a common source of confusion for XUL developers. Essentially, the tree content view is a view where the data for the cells is supplied from tags placed inside the tree. Naturally, if you are using a different kind of view, the data will be supplied from another source, and there won't be any treeitem elements at all.

+ +

Let's start by looking at how to create a simple tree with multiple columns using the tree content view. This could be used to create a list of mail messages. There might be multiple columns, such as the sender and the subject.

+ +

Ejemplo de árbol con treechildren

+ +

Código Ver en funcionamiento

+ +
Image:trees1.png
+ +
<tree flex="1">
+
+  <treecols>
+    <treecol id="sender" label="Sender" flex="1"/>
+    <treecol id="subject" label="Subject" flex="2"/>
+  </treecols>
+
+  <treechildren>
+    <treeitem>
+      <treerow>
+        <treecell label="joe@somewhere.com"/>
+        <treecell label="Top secret plans"/>
+      </treerow>
+    </treeitem>
+    <treeitem>
+      <treerow>
+        <treecell label="mel@whereever.com"/>
+        <treecell label="Let's do lunch"/>
+      </treerow>
+    </treeitem>
+  </treechildren>
+
+</tree>
+
+ +

As can be seen in the image, the tree has been created with two rows of data.

+ +

This tree has two columns, the second of which will take up more space than the first. You will usually make the columns flexible. You can also supply widths with the width attribute. You should include the same number of treecol elements as there are columns in the tree. Otherwise strange things might happen.

+ +

The header row is created automatically. The button in the upper right corner can be used to hide and show the columns. You can place a hidecolumnpicker attribute on the tree and set it to true if you would like to hide this button. If this button is hidden, the user will not be able to hide columns.

+ +

Make sure that you set an id attribute on each column or the hiding and showing of columns will not work in all versions of Mozilla.

+ +

The treechildren element surrounds all of the rows. Inside the body are individual rows, which may in turn contain other rows. For a simpler tree, each row is created with the treeitem and treerow elements. The treerow element surrounds all of the cells in a single row, while a treeitem element would surround a row and all of its children. Trees with nested rows are described in the next section.

+ +

Inside the rows, you will put individual tree cells. These are created using the treecell element. You can set the text for the cell using the label attribute. The first treecell in a row determines the content that will appear in the first column, the second treecell determines the content that will appear in the second column, and so on.

+ +

The user can select the treeitems by clicking on them with the mouse, or by highlighting them with the keyboard. The user can select multiple items by holding down the Shift or Control keys and clicking additional rows. To disable multiple selection, place a seltype attribute on the tree, set to the value single. With this, the user may only select a single row at a time.

+ +
+

Add a tree to out find files example

+ +

Let's add a tree to the find files window where the results of the search would be displayed. The tree will use a content tree view. The following code should be added in place of the iframe.

+ +
<tree flex="1">
+  <treecols>
+    <treecol id="name" label="Filename" flex="1"/>
+    <treecol id="location" label="Location" flex="2"/>
+    <treecol id="size" label="Size" flex="1"/>
+  </treecols>
+
+  <treechildren>
+   <treeitem>
+     <treerow>
+       <treecell label="mozilla"/>
+       <treecell label="/usr/local"/>
+       <treecell label="2520 bytes"/>
+     </treerow>
+   </treeitem>
+  </treechildren>
+</tree>
+
+<splitter collapse="before" resizeafter="grow"/>
+
+ +

We've added a tree with three columns for the filename, the location and the file size. The second column will appear twice as wide due to the larger flexibility. A single row has been added to demonstrate what the table would look like with a row. In a real implementation, the rows would be added by a script as the search was performed, or a custom view would be created to hold the data.

+ +

Ejemplo: Código Ver en funcionamiento

+
+ +


+ Seguimos con como crear árboles más avanzados.

+ +
+

« AnteriorSiguiente »

+
diff --git "a/files/es/archive/mozilla/xul/tutorial_de_xul/\303\241rboles_y_plantillas/index.html" "b/files/es/archive/mozilla/xul/tutorial_de_xul/\303\241rboles_y_plantillas/index.html" new file mode 100644 index 0000000000..7c5277063b --- /dev/null +++ "b/files/es/archive/mozilla/xul/tutorial_de_xul/\303\241rboles_y_plantillas/index.html" @@ -0,0 +1,138 @@ +--- +title: Árboles y plantillas +slug: Archive/Mozilla/XUL/Tutorial_de_XUL/Árboles_y_plantillas +tags: + - Todas_las_Categorías + - Tutorial_de_XUL + - XUL + - páginas_a_traducir +translation_of: Archive/Mozilla/XUL/Tutorial/Trees_and_Templates +--- +

Lo siguiente describe como usar una plantilla con un árbol.

+ +

Añadiendo fuentes de datos a árboles

+ +

When using a tree, you will often use a template to build its content, to handle a large amount of hierarchial data. Using a template with a tree uses very much the same syntax as with other elements. You need to add a datasources and a ref attribute to the tree element, which specify the datasource and root node to display. Multiple rules can be used to indicate different content for different types of data.

+ +

El ejemplo siguiente usa el historial de fuentes de datos:

+ +
<tree datasources="rdf:history" ref="NC:HistoryByDate"
+          flags="dont-build-content">
+
+ +

As described in the previous section, the tree may use a tree builder for template generation instead of the normal content builder. This means that elements will not be created for every row in the tree, making it more efficient. The [[XUL:Atributos:flgs|flags attribute set to the value dont-build-content, as used in the example above, indicates that the tree builder should be used. If you leave the attribute out, the content builder will be used. You can see the difference by using Mozilla's DOM Inspector on a tree with and without the flag.

+ +

If you do use a content builder instead, note that the content won't generally get built until it is needed. With hierarchical trees, the children don't get generated until the parent nodes have been opened by the user.

+ +

In the template, there will be one treecell for each column in the tree. The cells should have a label attribute to set the label for the cell. This would normally be set to an RDF property so that the label is pulled from the datasource.

+ +

Plantilla constructora de árbol

+ +

The following example demonstrates a template-built tree, in this case for the file system.

+ +

Ejemplo 1: Código Ver en funcionamiento

+ +
<tree id="my-tree" flex="1"
+       datasources="rdf:files" ref="file:///" flags="dont-build-content">
+  <treecols>
+    <treecol id="Name" label="Name" primary="true" flex="1"/>
+    <splitter/>
+    <treecol id="Date" label="Date" flex="1"/>
+  </treecols>
+
+    <template>
+      <rule>
+        <treechildren>
+          <treeitem uri="rdf:*">
+            <treerow>
+              <treecell label="rdf:http://home.netscape.com/NC-rdf#Name"/>
+              <treecell label="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/>
+            </treerow>
+          </treeitem>
+        </treechildren>
+      </rule>
+    </template>
+</tree>
+
+ +

Aquí, un árbol es creado con dos columnas, para el nombre y la fecha de un archivo. The tree should display a list of the files in the root directory. Only one rule is used, but you may add others if needed. Like with other templates, the uri attribute on an element indicates where to start generating content. The two cells grab the name and date from the datasource and place the values in the cell labels.

+ +

This example shows why the uri attribute becomes useful. Notice how it has been placed on the treeitem in the example, even though it is not a direct descendant of the rule element. We need to put this attribute on only those elements that we want repeated for each resource. Because we don't want multiple treechildren elements, we don't put it there. Instead we put the uri attributes on the treeitem elements. Effectively, the elements outside (or above) the element with the uri attribute are not duplicated whereas the element with the uri attribute and the elements inside it are duplicated for each resource.

+ +

As the tree builder is used and not the content builder, the structure of the elements in the above example must be as shown, with the treechildren element inside the rule. Although the tree builder doesn't build these elements, it does require this structure in order to determine what to generate correctly.

+ +
Image:rdfoutl1.jpg
+ +

Note in the image that additional child elements below the top-level elements have been added automatically. XUL knows how to add child elements when the templates or rules contain tree elements or menu elements. It will generate tree elements as nested as necessary based on the available RDF data.

+ +

An interesting part of RDF datasources is that the resource values are only determined when the data is needed. This means that values that are deeper in the resource hierarchy are not determined until the user navigates to that node in the tree. This becomes useful for certain datasources where the data is determined dynamically.

+ +

Ordenando las columnas

+ +

If you try the previous example, you might note that the list of files is not sorted. Trees which generate their data from a datasource have the optional ability to sort their data. You can sort either ascending or descending on any column. The user may change the sort column and direction by clicking the column headers. This sorting feature is not available for trees with static content, although you can write a script to sort the data.

+ +

Sorting involves three attributes, which should be placed on the columns. The first attribute, sort, should be set to an RDF property that is used as the sort key. Usually, this would be the same as that used in the label of the cell in that column. If you set this on a column, the data will be sorted in that column. The user can change the sort direction by clicking the column header. If you do not set the sort attribute on a column, the data cannot be sorted by that column.

+ +

El atributo sortDirection (note la mezcla) es usado para definir el orden por defecto de la columna. Tres valores son posibles:

+ +
+
ascending
+
los datos aparecerán en orden ascendente (por ejemplo: de la A a la Z.
+
descending
+
los datos aparecerán en orden descendente (Z-A).
+
natural
+
los datos aparecerán en el mismo orden en el cual están guardados en la fuente de datos RDF.
+
+ +

The final attribute, sortActive should be set to true for one column, the one that you would like to be sorted by default.

+ +

Although the sorting will function correctly with only those attributes, you may also use the style class sortDirectionIndicator on a column that can be sorted. This will cause a small triangle to appear on the column header that indicates the direction of the sort. If you don't do this, the user may still sort the columns but will have no indication as to which column is currently sorted.

+ +

The following example changes the columns in the earlier example to incorporate the extra features:

+ +
<treecols>
+  <treecol id="Name" label="Name" flex="1" primary="true"
+            class="sortDirectionIndicator" sortActive="true"
+            sortDirection="ascending"
+            sort="rdf:http://home.netscape.com/NC-rdf#Name"/>
+  <splitter/>
+  <treecol id="Date" label="Date" flex="1" class="sortDirectionIndicator"
+           sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/>
+</treecols>
+
+ +

Persistencia del estado de la columna

+ +

One additional thing you might want to do is persist which column is currently sorted, so that it is remembered between sessions. To do this, we use the persist attribute on each treecol element. There are five attributes of columns that need to be persisted, to save the column width, the column order, whether the column is visible, which column is currently sorted and the sort direction. The following example shows a sample column:

+ +
<treecol id="Date" label="Date" flex="1"
+             class="sortDirectionIndicator"
+             persist="width ordinal hidden sortActive sortDirection"
+             sort="rdf:http://home.netscape.com/WEB-rdf#LastModifiedDate"/>
+
+ +

Más detalles sobre el atributo More details about the persist son descritos en la sección próxima.

+ +

Reglas adicionales

+ +

There are two additional attributes that can be added to the rule element that allow it to match in certain special circumstances. Both are boolean attributes.

+ +
+
iscontainer
+
If this attribute is set to true, then the rule will match all resources that have children. For example, we could use this rule to match bookmark folders. This is convenient as the RDF datasource does not need to include any special attributes to indicate this.
+
+ +
+
isempty
+
If this attribute is set to true, then the rule will match all resources that have no children.
+
+ +

A resource might be a container and be an empty one as well. However, this is different from a resource that is not a container. For example, a bookmark folder is a container but it might or might not have children. However a single bookmark or separator is not a container.

+ +

You can combine these two elements with other attribute matches for more specific rules.

+ +

Seguimos con las fuentes de datos proporcionadas por Mozilla.

+ +
+

« AnteriorSiguiente »

+
diff --git a/files/es/archive/mozilla/xul/xul_reference/index.html b/files/es/archive/mozilla/xul/xul_reference/index.html new file mode 100644 index 0000000000..9e3468106c --- /dev/null +++ b/files/es/archive/mozilla/xul/xul_reference/index.html @@ -0,0 +1,318 @@ +--- +title: XUL Reference +slug: Archive/Mozilla/XUL/XUL_Reference +translation_of: Archive/Mozilla/XUL/XUL_Reference +--- +

« Referencia de XUL «

+ + + + + + + + + + + +
Todos los elementos XUL (ordenados alfabéticamente)
+

action
+ arrowscrollbox
+ assign
+ bbox
+ binding
+ bindings
+ box
+ broadcaster
+ broadcasterset
+ button
+ browser
+ checkbox
+ caption
+ colorpicker
+ column
+ columns
+ commandset
+ command
+ conditions
+ content
+ datepicker
+ deck
+ description
+ dialog
+ dialogheader
+ dropmarker
+ editor
+ grid
+ grippy
+ groupbox
+ hbox
+ iframe
+ image
+ key
+ keyset
+ label
+ listbox
+ listcell
+ listcol
+ listcols
+ listhead
+ listheader
+ listitem

+ 		+

member
+ menu
+ menubar
+ menuitem
+ menulist
+ menupopup
+ menuseparator
+ notification
+ notificationbox
+ observes
+ overlay
+ page
+ panel
+ param
+ popupset
+ preference
+ preferences
+ prefpane
+ prefwindow
+ progressmeter
+ query
+ queryset
+ radio
+ radiogroup
+ resizer
+ richlistbox
+ richlistitem
+ row
+ rows
+ rule
+ scale
+ script
+ scrollbar
+ scrollbox
+ scrollcorner
+ separator
+ spacer
+ spinbuttons
+ splitter
+ stack
+ statusbar

+ 		+

statusbarpanel
+ stringbundle
+ stringbundleset
+ tab
+ tabbrowser (Firefox-a partir de
+ Firefox 3/Gecko 1.9)
+ tabbox
+ tabpanel
+ tabpanels
+ tabs
+ template
+ textnode
+ textbox
+ textbox (Firefox autocomplete)
+ textbox (Mozilla autocomplete)
+ timepicker
+ titlebar
+ toolbar
+ toolbarbutton
+ toolbargrippy
+ toolbaritem
+ toolbarpalette
+ toolbarseparator
+ toolbarset
+ toolbarspacer
+ toolbarspring
+ toolbox
+ tooltip
+ tree
+ treecell
+ treechildren
+ treecol
+ treecols
+ treeitem
+ treerow
+ treeseparator
+ triple
+ vbox
+ where
+ window
+ wizard
+ wizardpage

+
+

Referencia de XUL

+

« Referencia de XUL «

+ + + + + + + + + + + +
Elementos XUL por categoría
+

VENTANAS

+

dialog
+ overlay
+ page
+ window
+ wizard
+ wizardpage
+ preference
+ preferences
+ prefpane
+ prefwindow

+

ESTRUCTURA
+ DE VENTANAS

+

browser
+ tabbrowser
+ editor
+ iframe
+ titlebar
+ resizer
+ statusbar
+ statusbarpanel
+ dialogheader
+ notification
+ notificationbox

+

MENUS Y VENTANAS
+ EMERGENTES

+

menubar
+ menu
+ menuitem
+ menuseparator
+ menupopup
+ panel
+ tooltip
+ popupset

+

BARRAS DE
+ HERRAMIENTAS

+

toolbar
+ toolbarbutton
+ toolbargrippy
+ toolbaritem
+ toolbarpalette
+ toolbarseparator
+ toolbarset
+ toolbarspacer
+ toolbarspring
+ toolbox

+

PESTAÑAS Y
+ AGRUPAMIENTO

+

tabbox
+ tabs
+ tab
+ tabpanels
+ tabpanel
+ groupbox
+ caption
+ separator
+ spacer

+ 		+

CONTROLES

+

button
+ checkbox
+ colorpicker
+ datepicker
+ menulist
+ progressmeter
+ radio
+ radiogroup
+ scale
+ splitter
+ textbox
+ textbox (Firefox autocomplete)
+ textbox (Mozilla autocomplete)
+ timepicker

+

TEXTO E
+ IMAGENES

+

description
+ label
+ image

+

LISTAS

+

listbox
+ listitem
+ listcell
+ listcol
+ listcols
+ listhead
+ listheader
+ richlistbox
+ richlistitem

+

ARBOLES

+

tree
+ treecell
+ treechildren
+ treecol
+ treecols
+ treeitem
+ treerow
+ treeseparator

+ 		+

DISPOSICION

+

box
+ hbox
+ vbox
+ bbox
+ deck
+ stack
+ grid
+ columns
+ column
+ rows
+ row
+ scrollbox

+

PLANTILLAS

+

action
+ assign
+ binding
+ bindings
+ conditions
+ content
+ member
+ param
+ query
+ queryset
+ rule
+ template
+ textnode
+ triple
+ where

+

SCRIPTING

+

script
+ commandset
+ command
+ broadcaster
+ broadcasterset
+ observes
+ key
+ keyset
+ stringbundle
+ stringbundleset

+

ELEMENTOS
+ DE AYUDA

+

arrowscrollbox
+ dropmarker
+ grippy
+ scrollbar
+ scrollcorner
+ spinbuttons

+
+

Otras listas de XUL

+ diff --git a/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html b/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html new file mode 100644 index 0000000000..38b3c37f9a --- /dev/null +++ b/files/es/archive/mozilla/xul/xul_reference/xul_element_attributes/index.html @@ -0,0 +1,551 @@ +--- +title: Atributos de los elementos XUL +slug: Archive/Mozilla/XUL/XUL_Reference/XUL_element_attributes +translation_of: Archive/Mozilla/XUL/XUL_Reference/XUL_element_attributes +--- +
« Referencia de XUL Los siguientes atributos son comunes a todos los elementos XUL:
+ +
+ +
+
+ align
+
+ Type: one of the values below
+
+ The align attribute specifies how child elements of the box are aligned, when the size of the box is larger than the total size of the children. +
    +
  • For boxes that have horizontal orientation, it specifies how its children will be aligned vertically.
    • +
  • For boxes that have vertical orientation, it specifies how its children will be aligned horizontally.
    • +
+
+
+
+
+ start
+
+ Child elements are aligned starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.
+
+ center
+
+ Extra space is split equally along each side of the child elements, resulting in the children being placed in the center of the box.
+
+ end
+
+ Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.
+
+ baseline
+
+ This value applies to horizontally oriented boxes only. It causes the child elements to be aligned so that their text labels are lined up.
+
+ stretch
+
+ This is the default value. The child elements are stretched to fit the size of the box. For a horizontal box, the children are stretched to be the height of the box. For a vertical box, the children are stretched to be the width of the box. If the size of the box changes, the children stretch to fit. Use the flex attribute to create elements that stretch in the opposite direction.
+
+ left
+
+ The elements are aligned on their left edges.
+
+ center
+
+ The elements are centered horizontally.
+
+ right
+
+ The elements are aligned on their right edges.
+
+
+
+ The pack attribute is related to the alignment but is used to specify the position in the opposite direction. You can also specify the value of align using the style property -moz-box-align.
+
+
+ +
+
allowevents
+
Type: boolean
+
If true, events are passed to children of the element. Otherwise, events are passed to the element only.
+
+ + + + +
+ + +
+
allownegativeassertions
+
Type: boolean
+
Valid on any element that has a datasources attribute. When multiple datasources are used, one may override an assertion from another. This attribute, if true, which is the default, allows a datasource to negate an earlier assertion.
+
+
+ + +
+
class
+
Type: string
+
The style class of the element. Multiple classes may be specified by separating them with spaces.
+
+
+ + +
+
coalesceduplicatearcs
+
Type: boolean
+
Valid on any element that has a datasources attribute. When multiple datasources are used, one may override an assertion from another. This attribute, if true, which is the default, allows a datasource to negate an earlier assertion.
+
+
+ + +
+
collapsed
+
Type: boolean
+
If true, then the element is collapsed and does not appear. It is equivalent to setting the CSS visibility property to collapse.
+
+ + +
+ + +
+
container
+
Type: boolean
+
Set to true if the element is to act as a container which can have child elements. This would be used for folders. This will be set by the template builder as needed.
+
+
+ + +
+
containment
+
Type: URI
+
This attribute specifies RDF properties (an RDF predicate) that indicate that a resource is a container. When generating content from a template this is used to determine which resources from the datasource are containers and thus can have child nodes and which ones are not containers.
+
This attribute should be placed on the same element that the datasources and the ref attribute is on. It may be set to a space-separated list of RDF properties or resources.
+
+
+ + +
+
context
+
Type: id
+
Should be set to the value of the id of the popup element that should appear when the user context-clicks on the element. A context-click varies on each platform. Usually it will be a right click. You can use the special value '_child' to indicate the first menupopup child of the element.
+
+
+ + +
+
contextmenu
+
Type: id
+
Alternate name for the context attribute, but also has a corresponding script property contextMenu.
+
+
+ + +
+
datasources
+
Type: space separated list of datasource URIs
+
A space-separated list of datasources that an element's template will use for content generation. These can be either internal datasources such as rdf:bookmarks or a URL. The datasources attribute may be placed on most elements, although it will usually be found on trees and menu related elements. The element should have a template element as a child.
+
For RDF templates, the specified datasources are combined into a single composite datasource which holds the data from all of the datasources. This composite datasource is accesssible via a script through the database property.
+
For XML datasources, only one source is used, either the URL of an XML file or an anchor reference to another element within the same document. For instance, the reference '#data' refers to an element with the id 'data'.
+
If you plan on adding a datasource to an element but don't want one to be added right away, set this attribute to 'rdf:null'. This will make the element so that its contents can be generated from a datasource. Otherwise, you cannot add one later.
+
When the XUL document is contained on a remote web site, the datasources may only be loaded from the same domain as the document.
+
+
+ + +
+
dir
+
Type: one of the values below
+
The direction in which the child elements of the element are placed. +
+
normal
+
For scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales)  For other elements, the elements are placed left to right or top to bottom in the order they appear in the XUL code.
+
reverse
+
For scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). For other elements, they are placed right to left or bottom to top. This is reverse of the order in which they appear in the XUL code.
+
+
+
+ + +
+ + +
+
empty
+
Type: boolean
+
Set to true if the element is a container that contains no children. This will be set by the template builder as needed.
+
+
+ + +
+
equalsize
+
Type: one of the values below
+
This attribute can be used to make the children of the element equal in size. +
+
always
+
For a horizontally oriented element, this will make all of its children have the width of the widest child. For a vertically oriented element, this will make its children all have the height of the tallest child.
+
never
+
All of the children are displayed at the size required by the content or as specified by the width and height attributes or the CSS width and height properties.
+
+
+
+
+ + +
+
flags
+
Type: space-separated list of the values below
+
A set of flags used for miscellaneous purposes. Two flags are defined, which may be the value of this attribute. +
    +
  • dont-test-empty: For template generated content, the builder will not check that a container is empty.
    • +
  • dont-build-content: This flag may be used on a tree to indicate that content elements should not be generated. This results in a performance enhancement, but you will not be able to use the DOM functions to retrieve the tree rows.
    • +
+
+
+
+ + +
+
flex
+
Type: string (representing an integer)
+
Indicates the flexibility of the element, which indicates how an element's container distributes remaining empty space among its children. Flexible elements grow and shrink to fit their given space. Elements with larger flex values will be made larger than elements with lower flex values, at the ratio determined by the two elements. The actual value is not relevant unless there are other flexible elements within the same container. Once the default sizes of elements in a box are calculated, the remaining space in the box is divided among the flexible elements, according to their flex ratios. Specifying a flex value of 0 has the same effect as leaving the flex attribute out entirely.
+
+
+ + +
+
height
+
Type: string (representing an integer)
+
The preferred height of the element in pixels. The actual displayed height may be different if the element or its contents have a minimum or maximum height. The CSS height property may also be used.
+
+
+ + +
+
hidden
+
Type: boolean
+
If set to true, the element is not displayed. This is similar to setting the CSS display property to 'none'.
+
+ + +
+ + +
+
id
+
Type: unique id
+
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
+
+ + +
+ + +
+
insertafter
+
Type: id
+
When an element is in an overlay, the insertafter attribute specifies the id of the element in the base window that the element should appear after. This attribute overrides the insertbefore attribute. This value may be a comma-separated list of ids, which are scanned and the first one found in the window is used.
+
+
+ + +
+
insertbefore
+
Type: id
+
When an element is in an overlay, the insertbefore attribute specifies the id of the element in the base window that the element should appear before. This value may be a comma-separated list of ids, which are scanned and the first one found in the window is used.
+
+
+ + +
+
left
+
Type: string (representing an integer)
+
For elements placed directly within a stack, specifies the pixel position of the left edge of the element relative to the left edge of the stack.
+
+
+ + +
+
maxheight
+
Type: string (representing an integer)
+
The maximum height of the element. This corresponds to the max-height CSS property.
+
+
+ + +
+
maxwidth
+
Type: string (representing an integer)
+
The maximum width of the element. This corresponds to the max-width CSS property.
+
+
+ + +
+
menu
+
Type: id
+
Alternate name for the popup attribute, but also has a corresponding script property 'menu'.
+
+
+ + +
+
minheight
+
Type: string (representing an integer)
+
The minimum height of the element. This corresponds to the min-height CSS property.
+
+
+ + +
+
minwidth
+
Type: string (representing an integer)
+
The minimum width of the element. This corresponds to the min-width CSS property.
+
+
+ + +
+
mousethrough
+
Type: one of the values below
+
Determines whether mouse events are passed to the element or not. If this attribute is not specified, the value is inherited from the parent of the element. If no ancestor has the mousethrough attribute set, the default value is never. +
+
always
+
Mouse events are transparent to the element. This means that the element will not receive any mouse events due to either clicking or movement. Child elements may override this if they specify mousethrough="never".
+
never
+
Mouse events are passed to the element as normal.
+
+
+
+ + +
+ + +
+
observes
+
Type: id
+
Set to an id of a broadcaster element that is being observed by the element. If an attribute changes in the broadcaster it is also changed in the observer.
+
+
+ + +
+
ordinal
+
Type: string (representing an integer)
+
An integer which specifies the position of the element within its parent. By default, elements appear in the order they appear in the XUL code. The ordinal attribute can be used to change the order. Note the default ordinal for elements is 1. You can retrieve the displayed order by using the properties of the boxObject of the container.
+
+
+ + +
+
orient
+
Type: one of the values below
+
Used to specify whether the children of the element are oriented horizontally or vertically. The default value depends on the element. You can also use the -moz-box-orient style property. +
+
horizontal
+
Child elements of the element are placed next to each other in a row in the order that they appear in the XUL source.
+
vertical
+
Child elements of the element are placed under each other in a column in the order that they appear in the XUL source.
+
+
+
+ + +
+ + +
+
pack
+
Type: one of the values below
+
The pack attribute specifies where child elements of the box are placed when the box is larger that the size of the children. For boxes with horizontal orientation, it is used to indicate the position of children horizontally. For boxes with vertical orientation, it is used to indicate the position of children vertically. The align attribute is used to specify the position in the opposite direction. You can also specify the value of pack using the style property -moz-box-pack. +
+
start
+
Child elements are placed starting from the left or top edge of the box. If the box is larger than the total size of the children, the extra space is placed on the right or bottom side.
+
center
+
Extra space is split equally along each side of the child elements, resulting the children being placed in the center of the box.
+
end
+
Child elements are placed on the right or bottom edge of the box. If the box is larger than the total size of the children, the extra space is placed on the left or top side.
+
+
+
+ + +
+ + +
+
persist
+
Type: space-separated list of attribute names
+
A space-separated list of attributes that are maintained when the window is closed. When the window is re-opened, the values of persistent attributes are restored. In Mozilla, persistent attributes are stored in the per-profile file xulstore.json. Persistence can also be stored using the document.persist function. In order for persistence to work, the element must also have an id. Persistence will not remember the absence of an attribute, so for boolean attributes like checked where absence means false, you will need to explicitly set the attribute to false before the window closes (bug 15232).
+
+
+ + +
+
popup
+
Type: id
+
Should be set to the value of the id of the popup element that should appear when the user clicks on the element.
+
+ + +
+ + +
+
position
+
Type: string (representing an integer)
+
When an element is in an overlay, the position is an index where the child is inserted. The position is one-based, so use a value of 1 to place the element at the beginning. This attribute is ignored if either an insertbefore or insertafter attribute matches an element.
+
+
+ + +
+
preference-editable
+
Mozilla 1.8
+
Type: boolean
+
If true, the element may be used as one that modifies a preference in a prefwindow. The preference attribute may be used to connect to a preference element. This is useful for custom elements implemented in XBL. The element should fire change, command, or input event when the value is changed so that the preference will update accordingly.
+
+ See the pref system documentation for more information.
+
+
+ + +
+
querytype
+
Type: string
+
Indicates the type of datasource used in a template. Firefox 3 provides 3 built-in datasources: 'rdf', default, 'xml' and 'storage'. Extensions may provide support for additional datasources.
+
+
+ + +
+
ref
+
Type: URI
+
For template-generated elements, this attribute is used to specify the root RDF node where content generation begins. This will correspond to the value of an about attribute on an RDF container. This attribute should be placed alongside the datasources attribute.
+
+
+ + +
+
removeelement
+
Type: id
+
When placed on an element in an overlay, it indicates that the element in the base file should be removed from the window.
+
+
+ + +
+
sortDirection
+
Type: one of the values below
+
Set this attribute to set the direction that template-generated content is sorted. Use the sortResource attribute to specify the sort key. +
+
ascending
+
The data is sorted in ascending order.
+
descending
+
The data is sorted in descending order.
+
natural
+
The data is sorted in natural order, which means the order that it is stored in.
+
+
+
+
+ + +
+
sortResource
+
Type: URI
+
For template-generated content, this specifies the sort key, if you would like the content to be sorted. The key should be the full URI of the RDF resource to sort by, for example 'http://home.netscape.com/NC-rdf#Name'. Place this attribute on the same element as the datasources attribute. Use sortResource2 to specify a secondary sort key.
+
+
+ + +
+
sortResource2
+
Type: URI
+
The value of this attribute is the URI of an RDF predicate that serves as a secondary key for sorted content.
+
+
+ + +
+
statustext
+
Type: string
+
Used to set the text that appears on the status bar when the user moves the mouse over the element. Mozilla doesn't adjust the status bar automatically however. This attribute serves only as a place to keep the text. In Firefox, this text is automatically placed in the statusbar for menuitems on the menu bar.
+
+ + +
+ + +
+
style
+
Type: CSS inline style
+
CSS style rules to be applied to the element. Syntax is as in the HTML style attribute. It is preferred to put style rules in style sheets.
+
+
+ + +
+
template
+
Type: id
+
For template generated elements, this attribute may optionally be placed on the root node (the element with the datasources attribute) to refer to a template that exists elsewhere in the XUL code. This template attribute should be set to the id of the template element. This might be used to share a single template between multiple trees or menus. If this attribute is not specified, there should be a template element directly inside the node.
+
+
+ + +
+
tooltip
+
Type: id
+
Should be set to the value of the id of the tooltip or panel element that should be used as a tooltip window when the mouse hovers over the element for a moment. The tooltip will automatically disappear when the mouse is moved. If this attribute is set to '_child', the first tooltip child element inside the element is used.
+
+
+ + +
+
tooltiptext
+
Type: string
+
Used to set the text which appears in the tooltip when the user moves the mouse over the element. This can be used instead of setting the tooltip to a popup for the common case where it contains only text. The tooltip is displayed in a default tooltip which displays only a label, however the default tooltip may be changed by setting the default attribute on a tooltip element.
+
+
+ + +
+
top
+
Type: string (representing an integer)
+
For elements placed directly within a stack, specifies the pixel position of the top edge of the element relative to the top edge of the stack.
+
+
+ + +
+
uri
+
Type: string
+
For template-generated content, the attribute should be placed on the element where content generation should begin. Thus, it should be placed on an element that is a descendant of a template. The value should be set to rdf:*.
+
+ +
+
Elements that appear inside the element with the attribute will be repeated for each node in the RDF datasource. Elements outside will appear only once.
+
+
+ + +
+
+ wait-cursor
+
+ Type: boolean
+
+ Set this attribute to true to have the cursor switch to a waiting cursor while the mouse is hovering over the element. Usually, you would only use this on the window element or other top-level elements. In order to revert to the normal cursor state call the method removeAttribute("wait-cursor") when the process effectively has ended otherwise the wait cursor might never disappear.
+
+ +
+ + +
+
width
+
Type: string (representing an integer)
+
The preferred width of the element. The value should not include a unit as all values are in pixels. The actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. The CSS width property may also be used.
+
+ + +
diff --git a/files/es/archive/mozilla/xulrunner/componentes/index.html b/files/es/archive/mozilla/xulrunner/componentes/index.html new file mode 100644 index 0000000000..43a9d08d67 --- /dev/null +++ b/files/es/archive/mozilla/xulrunner/componentes/index.html @@ -0,0 +1,16 @@ +--- +title: Componentes +slug: Archive/Mozilla/XULRunner/Componentes +tags: + - Componentes + - Todas_las_Categorías +translation_of: Archive/Mozilla/XULRunner/Components +--- +

 

+

Componentes, Listado alfabético (Incompleto)

+ +

categorías

diff --git a/files/es/archive/mozilla/xulrunner/index.html b/files/es/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..74f6b6313a --- /dev/null +++ b/files/es/archive/mozilla/xulrunner/index.html @@ -0,0 +1,96 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +tags: + - Todas_las_Categorías + - XUL + - 'XUL:Herramientas' + - XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +
+
+ Primeros pasos con XULRunner (en inglés)
+ Una pequeña introducción a XULRunner.
+
+ XULRunner es un paquete de ejecución de Mozilla que puede ser usado para crear aplicaciones XUL+XPCOM tan valiosas como Firefox y Thunderbird. Ofrecerá mecanismos para instalar, actualizar y desinstalar esas aplicaciones. XULRunner ofrecerá también libxul, una solución que permite la integración de las tecnologías de Mozilla en otros proyectos y productos.
+ + + + + + + +
+

Versiones

+
+

XULRunner 20.0 ha sido liberado y puede ser descargado desde ftp.mozilla.org. Por favor leer las notas de versión (en inglés) para instalación, desinstalación, y otras informaciones.

+

Firefox 3 y posteriores son entregados con un paquete propio de XULRunner, el cual puede ejecutar cualquier aplicación compatible de XULRunner usando el interruptor -app.

+

Versiones anteriores (en inglés) que están también disponibles.

+
+

Generalidades

+ +

Documentación

+
+
+ Primeros pasos con XULRunner (en inglés)
+
+ Un pequeño tutorial sobre como construir aplicaciones de escritorio con XULRunner.
+
+ Tutorial de XUL
+
+ Una vez que tenga trabajando una aplicación XULRunner, use el tutorial XUL para expandir capacidades y convertirla en una fantastica aplicación XUL.
+
+ Consejos y trucos para XULRunner (en inglés)
+
+ Una colección de consejos y trucos para trabajar con XULRunner.
+
+ Implementar de XULRunner (en inglés)
+
+ Una introducción de como empaquetar tus aplicaciones con XULRunner.
+
+ Salón de la Fama XULRunner (en inglés)
+
+ Lista todas las aplicaciones publicadas basadas en XULRunner.
+
+ Documentación para la compilación
+
+ Aprender como conseguir el código fuente y compilarlo.
+
+ Documentación sobre depuración (en inglés)
+
+ Pasos para configurar Venkman para depurar la aplicación
+
+ Guía de XULRunner (en inglés)
+
+ Un material bastante completo, pero desactualizado, introducción y tutorial para XULRunner que reúne gran parte de la documentación se encuentran aquí.
+
+

Ver todo...

+ 		+

Comunidad

+ + + +

Ver también

+ +
+
diff --git a/files/es/archive/mozilla/xulrunner/primeros_pasos_con_xulrunner/index.html b/files/es/archive/mozilla/xulrunner/primeros_pasos_con_xulrunner/index.html new file mode 100644 index 0000000000..f03a183d27 --- /dev/null +++ b/files/es/archive/mozilla/xulrunner/primeros_pasos_con_xulrunner/index.html @@ -0,0 +1,280 @@ +--- +title: Primeros pasos con XULRunner +slug: Archive/Mozilla/XULRunner/Primeros_pasos_con_XULRunner +translation_of: Archive/Mozilla/XULRunner/Getting_started_with_XULRunner +--- +

+

Siguiente »

+

+ +

Este artículo explora la plataforma Mozilla mediante la construcción de una aplicación de escritorio básico utilizando XULRunner. Dado que Firefox, Thunderbird y otras múltiples aplicaciones se escriben utilizando la plataforma, es una apuesta segura que se puede utilizar para crear una aplicación básica. Hay un artículo con un enfoque más complicado de construir aplicaciones XULRunner en Creación de aplicaciones XULRunner con el Sistema de Mozilla Build. Si necesita cambiar la propia XULRunner o integrarlo con código binario externo puede que tenga que leer este artículo.

+ +

Paso 1: Descargar XULRunner

+ +

Usted puede encontrar un enlace de descarga en la página principal XULRunner aquí en MDC. Dado que no estamos creando ningún componente XPCOM binarios, sólo tenemos que descargar e instalar el paquete de tiempo de ejecución XULRunner, no el SDK.

+ +

La descarga de XULRunner para Windows es un archivo .zip, no un archivo ejecutable. Como desarrollador, me gusta la idea de que XULRunner sólo necesita ser descomprimido en mi máquina. Supongo que no es necesario conectar a mi sistema de Windows y eso es una buena cosa. También significa que el XULRunner es portátil, así que si usted desarrolla sus aplicaciones para ser portátil se puede llevar a todas partes en una unidad flash o sincronizarlos en la nube.

+ +

La versión para Mac de XULRunner se distribuye como un archivo tar.bz2. Puede extraer este a cualquier lugar que quieras, pero hay muchos lugares en la documentación que se supone que tiene esta instalado en /Library/Frameworks.

+ +

En el escritorio de Ubuntu y sus derivados (Xubuntu, Kubuntu, ...), a partir de la versión 11.10 (Ocelot onírico), XULRunner no está más cuidada y no existe en el repositorio de Ubuntu. Por lo tanto, ya sea que usted necesita para compilar XULRunner manual o descargar una versión binaria del servidor FTP de Mozilla. Una forma de archieve esto es ejecutar la siguiente secuencia de comandos cada vez que se desea instalar una nueva versión:

+ +
FIREFOX_VERSION=`grep -Po  "\d{2}\.\d+" /usr/lib/firefox/platform.ini`
+ARCH=`uname -p`
+XURL=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$FIREFOX_VERSION/runtimes/xulrunner-$FIREFOX_VERSION.en-US.linux-$ARCH.tar.bz2
+cd /opt
+sudo sh -c "wget -O- $XURL | tar -xj"
+sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner
+sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell
+ +

You could also save this script to a file for convenience.  Note: If you are using Firefox build from Ubuntuzilla repository, replace /usr/lib/firefox/platform.ini with /opt/firefox/platform.ini.

+ +

Step 2: Install XULRunner

+ +

On Windows, unzip the archive someplace reasonable. I unzipped it to a new C:\program files\xulrunner folder.

+ +

On the Mac, extract the tar.bz2 archive, which contains XULRunner as XUL.Framework.  Copy this to the /Library/Frameworks directory, or another location of your choice.

+ +

On Linux, you only need to unpack the archive if you are using a pre-release XULRunner.

+ +
+

Optionally, if you've downloaded the compressed archive of XULRunner and would like to install it on your system you can do so by running

+ +

xulrunner --register-global

+ +

as an administrator to register XULRunner for all users on the machine. To register XULRunner for a single user run

+ +

xulrunner --register-user

+ +

XULRunner will work whether you install it or not. This is purely for convenience.

+
+ +
+

In all systems you should unzip the omni.ja file into some example directory and take a look at all the awesome! First change the file extension to zip and then use your normal filesystem's decompression tool to open it up. The contents of omni.ja are available to XULRunner applications and are what make it possible to build amazing applications easily!

+
+ +

Step 3: Create the application folder structure

+ +

Time to start a simple, bare bones application shell. Call it a XUL “Hello World” if you want. All of what you see below can be found in the XULRunner documentation here on MDC in much more detail.

+ +
+

Hint: Skip ahead and download the sample application, you can experiment with it while following this tutorial. You can download the sample application from https://github.com/matthewkastor/XULRunner-Examples. Please continue reading to learn the "what", "why" and "how" parts of building a XULRunner application.

+
+ +

On Windows, I created the root in a new c:\program files\myapp folder, but you can create it wherever you like, using whatever OS you like. The same application structure is used on Windows, Mac and Linux. Here is the subfolder structure:

+ +
+ myapp/
+|
++-+ chrome/
+| |
+| +-+ content/
+| | |
+| | +-- main.xul
+| | |
+| | +-- main.js
+| |
+| +-- chrome.manifest
+|
++-+ defaults/
+| |
+| +-+ preferences/
+|   |
+|   +-- prefs.js
+|
++-- application.ini
+|
++-- chrome.manifest
+
+ +

Notice that there are 5 files in the folder structure: application.ini, chrome.manifest (2), prefs.js, and main.xul. The /chrome/chrome.manifest file is optional, but might be useful for backward compatibility. See the note below.

+ +
+

For more details on the structure of installable bundles in general see: Structure of an installable bundle.

+
+ +
Note: In XULRunner 2.0, the chrome.manifest is now used to register XPCOM components in addition to its previous uses. Part of this change means the /chrome/chrome.manifest is no longer considered the "root" manifest. XULRunner will not check that folder location for a root-level chrome.manifest. You need to move your existing chrome.manifest to the application root folder, remembering to update the relative paths within the file. You could also just create a new application root-level manifest that includes the /chrome/chrome.manifest, which is what this tutorial will do.
+ +

Step 4: Set up application.ini

+ +

The application.ini file acts as the XULRunner entry point for your application. It specifies how your application intends to use the XULRunner platform as well as configure some information that XULRunner uses to run your application. Here is mine:

+ +
[App]
+Vendor=XULTest
+Name=myapp
+Version=1.0
+BuildID=20100901
+ID=xulapp@xultest.org
+
+[Gecko]
+MinVersion=1.8
+MaxVersion=200.*
+
+ +
Note: The MinVersion and MaxVersion fields indicate the range of Gecko versions your application is compatible with; make sure that you set them so that the version of XULRunner you're using is in that range, or your application won't work.
+ +
Note: Make sure your application name is lowercase and longer than 3 characters
+ +

Step 5: Set up the chrome manifest

+ +

The chrome manifest file is used by XULRunner to define specific URIs which in turn are used to locate application resources. This will become clearer when we see how the “chrome://” URI is used. Application chrome can be in a single or a few JAR files or uncompressed as folders and files. I am using the uncompressed method for now. Here is the chrome/chrome.manifest:

+ +
 content myapp content/
+
+ +

As mentioned in Step 3, the default location of the chrome.manifest has changed in XULRunner 2.0, so we also need a simple chrome.manifest in the application root which will include the the manifest in our chrome root. Here is the application root chrome.manifest:

+ +
manifest chrome/chrome.manifest
+ +

Step 6: Set up preferences

+ +

The prefs.js file tells XULRunner the name of the XUL file to use as the main window. Here is mine:

+ +
pref("toolkit.defaultChromeURI", "chrome://myapp/content/main.xul");
+
+/* debugging prefs, disable these before you deploy your application! */
+pref("browser.dom.window.dump.enabled", true);
+pref("javascript.options.showInConsole", true);
+pref("javascript.options.strict", true);
+pref("nglayout.debug.disable_xul_cache", true);
+pref("nglayout.debug.disable_xul_fastload", true);
+
+ +

XULRunner specific preferences include:

+ +
+
toolkit.defaultChromeURI
+
Specifies the default window to open when the application is launched.
+
toolkit.defaultChromeFeatures
+
Specifies the features passed to window.open() when the main application window is opened.
+
toolkit.singletonWindowType
+
Allows configuring the application to allow only one instance at a time.
+
+ +
+

The toolkit preferences are described in further detail in XULRunner:Specifying Startup Chrome Window.

+ +

The debugging preferences are discussed in Debugging a XULRunner Application

+
+ +

Step 7: Create some XUL

+ +

Finally, we need to create a simple XUL window, which is described in the file main.xul. Nothing fancy here, just the minimum we need to make a window. No menus or anything.

+ +

main.xul:

+ +
<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <script type="application/javascript" src="chrome://myapp/content/main.js"/>
+
+  <caption label="Hello World"/>
+  <separator/>
+  <button label="More >>" oncommand="showMore();"/>
+  <separator/>
+  <description id="more-text" hidden="true">This is a simple XULRunner application. XUL is simple to use and quite powerful and can even be used on mobile devices.</description>
+
+</window>
+
+ +
Note: Make sure there is no extra whitespace at the beginning of the XML/XUL file
+ +

The application also has a JavaScript file. Most XUL applications will include some external JavaScript, so the sample application does too, just to show how to include it into the XUL file.

+ +

main.js:

+ +
function showMore() {
+  document.getElementById("more-text").hidden = false;
+}
+
+ +
+

For more information about XUL see: XUL.

+ +

For information about mixing HTML elements into your XUL read Adding HTML Elements.

+
+ +

Step 8: Run the application

+ +

The moment of truth. We need to get XULRunner to launch the bare-bones application.

+ +

Windows

+ +

From a Windows command prompt opened to the myapp folder, we should be able to execute this:

+ +
 C:\path\to\xulrunner.exe application.ini
+
+ +

Of course, if you opted to install xulrunner then you could simply do

+ +
​%ProgramFiles%\xulrunner.exe application.ini
+ +

or on 64 bit systems

+ +
​%ProgramFiles(x86)%\xulrunner.exe application.ini
+ +
+

Note: you can also install your application when you're finished debugging it. See XUL Application Packaging for details.

+
+ +

Mac

+ +

On the Mac, before you can run a XULRunner application with everything intact, you must install it using the --install-app xulrunner commandline flag. Installing the application creates an OS X application bundle:

+ +
 /Library/Frameworks/XUL.framework/xulrunner-bin --install-app /<path>/<to>/myapp.zip
+
+ +

Once installed, you can run the application:

+ +
 /Library/Frameworks/XUL.framework/xulrunner-bin "/Applications/Finkle/TestApp.app/Contents/Resources/application.ini"
+
+ +

You may run it without installing (but with the menu bar and dock icon missing) in OS X by typing:

+ +
/Library/Frameworks/XUL.framework/xulrunner-bin "/<full path>/TestApp/application.ini"
+
+ +
+

Note: The full path is required or a "Error: couldn't parse application.ini."-message will be returned.

+
+ +

This might also be simplified using a very simple shell script (i call mine "run.sh"):

+ +
#!/bin/sh
+/Library/Frameworks/XUL.framework/xulrunner-bin `pwd`/application.ini
+
+ +

Linux

+ +

On Ubuntu, you can run the application from a terminal. First change into the \myapp folder, then start the application by:

+ +
 xulrunner application.ini
+
+ +

You should now see a window that looks something like this. This particular screenshot is from Ubuntu 10.

+ +

myapp-screenshot.png

+ +

Alternative: Run XUL apps with Firefox

+ +

With Firefox 3 and later, you can tell the Firefox executable to run a XUL application from the command line. The XUL application will run instead of the Firefox browser that normally starts. This is similar to starting a XUL app using XULRunner. See Using Firefox to run XULRunner applications. This does not work if Firefox itself was installed as a XUL app - you need to use the installed XULRunner directly.

+ +

Further Reading:

+ +

There are many things you can do with XULRunner. Before you get too far into things you might want to read the XULRunner tips article. Also, throughout this tutorial you've been introduced to various bits of the Toolkit API and it may help you to get familiar with it. Once you've got an application that's ready for the world you'll love our article titled Deploying XULRunner.

+ +

For now, click the "next" link to learn about windows and menus in XULRunner!

+ +

+

Siguiente »

+

+ +
+

Original Document Information

+ + +
diff --git a/files/es/archive/rss/index.html b/files/es/archive/rss/index.html new file mode 100644 index 0000000000..9c9e5988eb --- /dev/null +++ b/files/es/archive/rss/index.html @@ -0,0 +1,56 @@ +--- +title: RSS +slug: Archive/RSS +tags: + - RSS + - Todas_las_Categorías +translation_of: Archive/RSS +--- +

+

+
RSS:Primeros pasos
+Tutorial guiado que te ayudará en tu iniciación a RSS.
+

Sindicación Realmente Simple (RSS) es un formato de datos basado en el lenguaje XML creado para la sindicación de contenidos. RSS tiene una escabrosa historia con multitud de diferentes versiones incompatibles, algunas basadas en RDF, pero la mayoría basadas solamente en XML. A pesar de esto, RSS es un formato altamente popular, se usa para la distribución de noticias, artículos de blogs, radio y televisión por internet, con una increíble velocidad. +

+
+

Documentación

+
Guía fácil del RSS +
Una guía que da respuesta a las preguntas básicas: qué, cómo, para qué. +
+
Las Versiones de RSS +
Es tal la diversidad que resulta fácil liarse, diferentes grupos han creado especificaciones de forma unilateral que han llamado RSS. Intentaremos poner un poco de orden. +
+
Añadir lectores de canales a Firefox +
Firefox puede seleccionar diferentes lectores de RSS o canales Atom. Este artículo provee información acerca de como añadir soporte para lectores adicionales no soportados por defecto. +
+
API de acceso a canales +
Firefox 2 y Thunderbird 2 introducen una serie de interfaces que la hacen más sencillo que los autores de extensiones accedan a los canales RSS y Atom. +
+
RSS 2.0 Specification (en) +
This is version 2.0.8 of the RSS 2.0 specification, published by the RSS Advisory Board on Aug. 12, 2006. +
+

Ver más

+		 +

Comunidad

+
  • Foros sobre XML en la comunidad Mozilla en inglés +
+

+

Ver más

+

Herramientas

+ +

Ver más

+

Temas relacionados

+
RDF, XML +
+
+

Categorías +

Interwiki Language Links +


+

diff --git a/files/es/archive/rss/primeros_pasos/index.html b/files/es/archive/rss/primeros_pasos/index.html new file mode 100644 index 0000000000..17441f6534 --- /dev/null +++ b/files/es/archive/rss/primeros_pasos/index.html @@ -0,0 +1,53 @@ +--- +title: Primeros pasos +slug: Archive/RSS/Primeros_pasos +tags: + - RSS + - 'RSS:Primeros_pasos' + - Todas_las_Categorías +translation_of: Archive/RSS/Getting_Started +--- +

+

+

Introducción

+

Este tutorial es una introducción a la Sindicación Realmente simple (RSS). +

Le guiará, paso a paso por los fundamentos de RSS y le mostrará ejemplos funcionales. Este tutorial sigue el mantra que dice: el mejor modo de aprender es hacer. Por ello, usted creará sus propios archivos RSS a mano. +

+

¿Quién debería usar este tutorial?

+

En principio, este tutorial está destinado a los principiantes en RSS (es decir, aquellos con poca o ninguna experiencia previa en RSS). Sin embargo, los experimentados en RSS también pueden encontrarlo útil como guia de refresco. +

Este tutorial asume que usted tiene un mínimo de experiencia con HTML (o XML) y que usted conoce los fundamentos del marcado. En otras palabras, que un código como este no le asusta: +

+
  <p>Esto es un párrafo marcado con etiquetas</p>
+
+

Si usted entiende esto, no debería tener ningún problema aprendiendo RSS. +

+
+

NOTA: Si usted no es un desarrollador web y ni quiere serlo, entonces este tutorial no es para usted. Usted tiene que estár cómodo escribiendo código para poder usar con eficacia este tutorial. +

+
+

¿Qué necesita usted antes de empezar?

+

Para aprobechar al máximo este tutorial, usted necesitará un editor de textos y un lector RSS. Además, usted también necesitaría saber usarlos. +

+
+

NOTE: A word processor is not a text editor. If a word processor is used, you MUST make sure to save your RSS files in a (pure and plain) text format. +

+
+

Usted no está obligado a crear archivos RSS siguiendo este tutorial (usted puede leerlo sin más), pero este sería un método de aprendizaje poco eficaz. Entenderá las cosas y retendrá la información mucho mejor si crea los archivos RSS usted mismo. +


+

+

¿Cómo usar este manual?

+

Aunque cada página de este tutorial ha sido escrita de modo que pueda actuar como un tutorial independiente, cuando usted lee una página se asume que ya posee los conocimientos esplicados en las páginas anteriores. Usted puede consultar cualquier punto del tutorial cuando desee, pero sugerimos a los principiantes en RSS que lean este tutorial de manera ordenada. +

+

Tutorial

+
  1. ¿Qué es RSS? +
  2. ¿Por qué usar RSS? +
  3. ¿Cómo funciona RSS? +
  4. Hola mundo +
  5. Sindicación +
  6. Blogs +
  7. Broadcatching +
  8. Microformatos +
  9. Broadcatching avanzado +
+
+
diff --git a/files/es/archive/rss/versiones/index.html b/files/es/archive/rss/versiones/index.html new file mode 100644 index 0000000000..5b3af37cf7 --- /dev/null +++ b/files/es/archive/rss/versiones/index.html @@ -0,0 +1,115 @@ +--- +title: Versiones +slug: Archive/RSS/Versiones +tags: + - RSS +translation_of: Archive/RSS/Version +--- +

Versiones de RSS

+ +

La historia de RSS ha sido agitada. Personas y grupos dispares han ido creado, prácticamente de modo independiente, especificaciones a las que llamaron RSS. Algunos formatos de RSS están basados en XML y otros lo están en RDF.

+ +

La lista mostrada a continuación muestra todas las versiones de RSS conocidas. Están listadas cronológicamente según su fecha de publicación.

+ +
+

NOTA: En la siguiente lista, aunque parezca que RSS 1.0 está fuera de lugar, cronológicamente está en el puesto que le corresponde.

+
+ +
+

NOTA: Hay 3 versiones diferentes de RSS 0.91: RSS 0.91 (Revisión 1) de Netscape, RSS 0.91 (Revisión 3) de Netscape y RSS 0.91 de Userland. Estrictamente hablando, la versión de Userland RSS 0.91 es un subconjunto de la versión de Netscape RSS 0.91.

+
+ +
+

NOTA: RSS 0.93 y RSS 0.94 sólo se publicaron como borrador (draft) y nunca vieron su versión final, aunque esto no significa que no se utilicen.

+
+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreEstadoFecha de publicaciónBasado enAutor
RSS 0.90 Marzo de 1999RDFNetscape
Netscape's RSS 0.91 (Revision 1) ?XMLNetscape
Netscape's RSS 0.91 Revision 3 10 de Julio de 1999XMLNetscape
Userland's RSS 0.91 4 de Junio de 2000XMLUserland
RSS 1.0Estándar9 de Diciembre de 2000RDFRSS-DEV Working Group
RSS 0.92 25 de Diciembre de 2000XMLUserland
RSS 0.93 20 de Abril de 2001XMLUserland
RSS 0.94 19 de Agosto de 2002XMLUserland
RSS 2.0 Septiembre de 2002XMLUserland
RSS 2.0 (post 2002-11-11) 11 de Noviembre de 2002XMLUserland
RSS 2.0 (post 2003-01-21)Estándar21 de Enero de 2003XMLUserland
diff --git "a/files/es/archive/security/encriptaci\303\263n_y_desencriptaci\303\263n/index.html" "b/files/es/archive/security/encriptaci\303\263n_y_desencriptaci\303\263n/index.html" new file mode 100644 index 0000000000..960149aca3 --- /dev/null +++ "b/files/es/archive/security/encriptaci\303\263n_y_desencriptaci\303\263n/index.html" @@ -0,0 +1,78 @@ +--- +title: Encriptación y Desencriptación +slug: Archive/Security/Encriptación_y_Desencriptación +tags: + - Seguridad + - Tutorial +translation_of: Archive/Security/Encryption_and_Decryption +--- +

La encriptación es el proceso de transformar información para hacerla ilegible a cualquiera excepto al receptor del mensaje. La desencriptación es el proceso de transformar información encriptada para que sea legible de nuevo. Un algoritmo criptográfico es una función matemática usada for encriptar o desencriptar. En la mayoría de los casos se utilizan dos funciones relacionadas, una para encriptar y otra para desencriptar.

+ +

En la criptografía moderna, la habilidad para mantener secreta la información encriptada no está basada en el algoritmo criptográfico, si no que es ampliamente conocido, sino en un número llamado clave que debe ser usado con el algoritmo para producir un reultado encriptado o para desencriptar información previamente encriptada. La desencriptación con la clave correcta es sencilla. La desencriptación sin la clave correcta es muy compleja, y en algunos casos imposible para cualquier caso práctico.

+ +

Las siguientes secciones introducen el uso de claves para encriptar y desencriptar.

+ + + +

Encriptación de clave simétrica

+ +

Con la encriptación de clave simétrica, la clave de encriptación puede ser calculada a partir de la clave de desencriptación y viceversa. En la mayoría de los algoritmos simétricos, se utiliza la misma clave para encriptar y para desencriptar, como se muestra en la Figura 1.

+ +

Figure 1. Symmetric-Key Encryption

+ +

Las implementaciones de la encriptación de clave simétrica pueden ser muy eficientes, con el fin de que los usuarios no tengan que esperar como resultado de una encriptación o una desencriptación. La encriptación de clave simétrica también provee cierto grado de autenticación, ya que la información encriptada no puede ser desencriptada con ninguna otra clave simétrica. Así, mientras que la clave simétrica se mantiene secreta entre las dos partes usándola para encriptar comunicaciones, cada parte puede estar segura que se está comunicando con la otra mientras que los mensajes desencriptados tengan sentido.

+ +

La encriptación de clave simétrica sólo es efectiva si la clave simétrica se mantiene en secreto por ambas partes. Si cualquier otro descubre la clave, afecta tanto a la confidencialidad como a la autenticación. Una persona con una clave simétrica no autorizada puede no sólo desencriptar mensajes enviados con esa clave, sino que además puede encriptar nuevos mensajes y enviarlos como si viniese de una de las dos partes que orginalmente sabían la clave.

+ +

La encriptación de clave simétrica juega un papel importante en el protocolo SSL, que es muy usado en autenticación y en encriptación sobre redes TCP/IP. SSL también usa técnicas de encriptación de clave pública, descrita en la siguiente sección.

+ +

Encriptación de clave pública

+ +

Las implementaciones más usadas de encriptación de clave pública están basadas en algoritmos patentados por Seguridad de datos RSA. Por lo tanto, esta sección describe el enfoque de RSA a la encriptación de clave pública.

+ +

La encriptación de clave pública (también llamada encriptación asimétrica) involucra un par de claves --una clave pública y una clave privada-- asociadas a una entidad que necesita autenticar su identidad electrónicamente o firmar información encriptada. Cada clave pública es publicada, y la correspondiente clave privada se mantiene secreta. La información encriptada con la clave pública sólo puede ser desencriptada con la clave privada. La Figura 2 muestra un esquema simplificado de cómo funciona una encriptación de clave pública.

+ +

Figure 2. Public-Key Encryption

+ +

El esquema mostrado en la Figura 2 permite distribuir libremente una clave pública, y sólo tú serás capaz de leer información encriptada usando esta clave. En general, para enviar informació encriptada a alguien, encriptas la información con la clave pública de esa persona, y la persona que recibe la información encriptada la desencripta utilizando su correspondiente clave privada.

+ +

Comparada con la encriptación de clave simétrica, la encriptación de clave pública requiere más tiempo de cómputo y por lo tanto no es apropiada para   grandes cantidades de datos. Sin embargo, es posible usar encriptación de clave pública para enviar una clave simétrica, que puede entonces ser usada para encriptar información adicional. Este el el enfoque utilizado por el protocolo SSL.

+ +

Como es lógico, el inverso del esquema mostrado en la Figura 2 también funciona: la información encriptada con tu clave privada puede ser desecnriptada sólo con tu clave pública. Sin embargo, esta no sería una forma deseable de encriptar datos confidenciales, ya que significa que cualquier persona con tu clave pública, que por definición está publicada, podría descifrar los datos. A pesar de esto, la encriptación de clave privada es útil, porque significa que puedes usar tu clave privada para firmar datos con tu firma digital --un requisito importante para el comercio electrónico y otras aplicación comerciales de criptografía--. Clientes como Firefox pueden entonces usar tu clave pública para confirmar que el mensaje fue firmado con tu clave priivada y que no ha sido manipulado desde que se firmó. Las "Firmas Digitales" describen como funciona este proceso de confirmación.

+ +

Longitud de la clave y resistencia del cifrado

+ +

Romper un algoritmo de encriptación consiste básicamente en encontrar la clave para acceder a la información encriptada en texto plano. Para los algoritmos simétricos, romper el algoritmo normalmente significa intentar determinar la clave usada para encriptar el texto. Para un algoritmo de clave pública, romper el algoritmo normalmente significa obtener la información secreta compartida entre las dos partes.

+ +

Un método para romper un algoritmo de clave simétrica es simplemente probar cada clave hasta que se encuentre la clave correcta.Para algoritmos de clave pública, ya que la mitad del par de claves es conocida públicamente, la otra mitad (clave privada) puede ser derivada utilizando la publicada a partir de complejos cálculos matemáticos. Encontrar la clave manualmente para romper un algoritmo se denomina ataque de fuerza bruta.

+ +

Romper un algoritmo introduce el riesgo de interceptar, o incluso hacerse pasar por otra persona y ver fraudulentamente información privada.

+ +

La fuerza de un algoritmo es determinada encontrando el método más rápido para romperlo y comparándolo con un ataque de fuerza bruta.

+ +

Para claves simétricas, la fuerza de la encriptación es a menudo descrita en función del tamaño o longitud de las claves usadas para realizar la encriptación: en general, las claves más largas proporcionan una encriptación más fuerte. La longitud de la clave se mide en bits. Por ejemplo, las claves de 128 bits usadas con la clave simétrica de RC4 soportadas por SSL brindan una protección criptográfica significativamente mejor que las claves de 40 bits utilizadas con el mismo algoritmo. La encriptación RC4 de 128 bits es aproximadamente 3 x  102610^26veces más fuerte que la encriptación RC4 de 40 bits.2610^26

+ +

Algoritmos criptográficos diferentes pueden requerir claves de diferente longitud para lograr la misma fuerza de encriptación. El algoritmo RSA usado para encriptación de clave pública, por ejemplo, puede únicamente utilizar un subconjunto de todos los posibles valores para una clave de una longitud específica, debido a la naturaleza del problema matemático en el que está basado. Otros algoritmos, como los usados para encriptación dde clave simétrica, puede utilizar todos los posibles valores para una clave de una longitud específica, en lugar de un subconjunto.

+ +

Ya que es relativamente trivial romper un algoritmo RSA, un algoritmo de encriptación de clave pública RSA debe tener una clave muy larga, al menos de 1024 bits, para ser considerada criptográficamente fuerte. Por otro lado, los algoritmos de clave simétrica pueden lograr aproximadamente el mismo nivel de fuerza con una clave de 80 bits para la mayoría de los algoritmos.

+ +

 

+ +
+

Información del documento original

+ + +
+ +

 

+ +

 

diff --git a/files/es/archive/security/index.html b/files/es/archive/security/index.html new file mode 100644 index 0000000000..82879db250 --- /dev/null +++ b/files/es/archive/security/index.html @@ -0,0 +1,14 @@ +--- +title: Security +slug: Archive/Security +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Security +--- +

Relying on these obsolete security articles is highly discouraged. Doing so may put your systems at risk.

+ +

+
Digital Signatures
Encryption and decryption address the problem of eavesdropping, one of the three Internet security issues mentioned at the beginning of this document. But encryption and decryption, by themselves, do not address another problem: tampering.
Encryption and Decryption
Encryption is the process of transforming information so it is unintelligible to anyone but the intended recipient. Decryption is the process of transforming encrypted information so that it is intelligible again.
Introduction to Public-Key Cryptography
Public-key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and Secure Sockets Layer (SSL) communications. This document introduces the basic concepts of public-key cryptography. For an overview of SSL, see "Introduction to SSL." For an overview of encryption and decryption, see "Encryption and Decryption." Information on digital signatures is available from "Digital Signatures."
+
Introduction to SSL
This document introduces the Secure Sockets Layer (SSL) protocol. SSL has been universally accepted on the World Wide Web for authenticated and encrypted communication between clients and servers.
NSPR Release Engineering Guide
This paper is for engineers performing formal release for the NetScape Portable Runtime (NSPR) across all platforms.
SSL and TLS
The Secure Sockets Layer (SSL) and Transport Layer Security (TLS) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. Both client and server authentication occur over SSL/TLS.
+

diff --git a/files/es/archive/themes/create_your_own_firefox_background_theme/index.html b/files/es/archive/themes/create_your_own_firefox_background_theme/index.html new file mode 100644 index 0000000000..9f99e57df7 --- /dev/null +++ b/files/es/archive/themes/create_your_own_firefox_background_theme/index.html @@ -0,0 +1,102 @@ +--- +title: Crea tu propio Tema de Fondo para Firefox +slug: Archive/Themes/Create_Your_Own_Firefox_Background_Theme +translation_of: Archive/Themes/Create_Your_Own_Firefox_Background_Theme +--- +

Como crear tu propio Tema de Fondo

+ +
+

Los temas están basados en una imagen "encabezado", la cual adorna el fondo de la Interfaz Gráfica de Firefox.

+ +

Acabaste tu diseño? Puedes Enviarlo ahora mismo!

+ +

Creando una imagen de Encabezado para el Tema

+ +

La imagen de encabezadp es mostrada como el fondo del título de la ventana de Firefox, anidándose tras las barras de herramientas, barra de direcciones, barra de búsqueda y la barra de pestañas. Será anclada a la esquina superior derecha de la ventana del explorador.

+ +

+ + + +

Requerimientos de la imagen

+ + + +

Trucos

+ + + +

Online Image Editor Resources

+ + + + + +

In older versions of Firefox, or newer versions with certain add-ons installed, the footer image is displayed as the background of the bottom of the browser window, behind the add-on and find bars. It will be anchored to the bottom-left corner of the browser window. Footer images are optional.

+ +

+ + + +

Image Requirements

+ + + +

Tips

+ + + +

Submitting your Theme Images

+ +

To get started submitting your images, go to the Theme Submission page:

+ +
    +
  1. Name your theme — pick a unique name for your theme. Duplicate names are not allowed, so you may need to try a few times to find a unique name.
    2. +
  2. Pick a category and tags — select a category and enter some tags that best describe your theme. Keep in mind that a reviewer may reject your theme if it is obvious that your category and/or tags are unrelated to your theme.
    3. +
  3. Describe your theme — write a short description of your theme. Keep in mind that a reviewer may reject your theme if your description is not an accurate representation of your theme.
    4. +
  4. Select a license for your theme — decide on a copyright license for your work. Read more about the types of Creative Common licenses. +
      +
    • Important: Please be sure you have the rights to use the image in your theme!
      • +
    +
    5. +
  5. Upload your images — make sure they are under 300 KB in size and JPG or PNG format!
    6. +
  6. Select text and tab colors — you can choose the tab ("background") color and foreground text color that work best with your header image.
    7. +
  7. Preview your theme — you're ready to preview your theme! Simply mouse over the image above the Submit Theme button, and see how it looks instantly.
    8. +
  8. Submit your theme — if everything looks right, click the Submit Theme button, and you're done! You can see all the themes you've authored on your profile page. +
      +
    • Tip: to ensure that your theme is approved for the gallery, be sure it complies with the content guidelines and terms of service!
      • +
    +
    9. +
+ +

+ +

Submit Your Theme Now

+ +

More Tutorials

+ +

Mozilla Themes Focal Point on Sizing - A tutorial on theming with a focus on sizing, by VanillaOrchids.

+
diff --git a/files/es/archive/themes/index.html b/files/es/archive/themes/index.html new file mode 100644 index 0000000000..aff151946d --- /dev/null +++ b/files/es/archive/themes/index.html @@ -0,0 +1,11 @@ +--- +title: Themes +slug: Archive/Themes +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Themes +--- +

Archived theme documentation.

+ +

diff --git a/files/es/archive/tutoriales-para-principiantes/index.html b/files/es/archive/tutoriales-para-principiantes/index.html new file mode 100644 index 0000000000..45477336ba --- /dev/null +++ b/files/es/archive/tutoriales-para-principiantes/index.html @@ -0,0 +1,8 @@ +--- +title: Tutoriales para principiantes +slug: Archive/Tutoriales-para-principiantes +translation_of: Archive/Beginner_tutorials +--- +

Esta página incluye tutoriales archivados para principiantes, de diferentes sitios alrededor de MDN.

+ +

diff --git a/files/es/archive/web/index.html b/files/es/archive/web/index.html new file mode 100644 index 0000000000..8ca15839ca --- /dev/null +++ b/files/es/archive/web/index.html @@ -0,0 +1,12 @@ +--- +title: Archived open Web documentation +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +

The documentation listed below is archived, obsolete material about open Web topics.

+

E4X
ECMAScript for XML (E4X) es una extensión del lenguaje de programación que añade la implementación de XML nativo a JavaScript. Esto proporciona el acceso al documento de XML de manera que sea natural para los programadores de ECMAScript. El objetivo es proporcionar una alternativa, una sintaxis más simple para tener acceso a documentos XML a través de las interfaces DOM.
LiveConnect

diff --git a/files/es/archive/web/javascript/index.html b/files/es/archive/web/javascript/index.html new file mode 100644 index 0000000000..4687b7bf23 --- /dev/null +++ b/files/es/archive/web/javascript/index.html @@ -0,0 +1,12 @@ +--- +title: JavaScript +slug: Archive/Web/JavaScript +translation_of: Archive/Web/JavaScript +--- + + +

{{Obsolete_Header}}

+ +

Obsolete JavaScript features and unmaintained docs

+ +

{{SubpagesWithSummaries}}

diff --git a/files/es/archive/web/javascript/legacy_generator_function_statement/index.html b/files/es/archive/web/javascript/legacy_generator_function_statement/index.html new file mode 100644 index 0000000000..75efe9f447 --- /dev/null +++ b/files/es/archive/web/javascript/legacy_generator_function_statement/index.html @@ -0,0 +1,63 @@ +--- +title: Función generadora de legado +slug: Archive/Web/JavaScript/Legacy_generator_function_statement +tags: + - Iterador Legado + - JavaScript + - Referencia +translation_of: Archive/Web/JavaScript/Legacy_generator_function_statement +--- +
La función generadora de legado es una característica específica de SpiderMonkey, y será eliminida en Firefox 58+. Para futuros usos, considera usar {{jsxref("Statements/function*", "function*")}}.
+ +
{{jsSidebar("Statements")}}
+ +

La sentencia de función generadora de legado declara funciones generadoras con unos parámetros específicos.

+ +

También se pueden definir funciones usando el constructor {{jsxref("Function")}} con functionBody y al menos una expresión {{jsxref("Operadores/yield", "yield")}}, y una función {{jsxref("Operators/Legacy_generator_function", "legacy generator function expression", "", 1)}}.

+ +

Sintaxis

+ +
function nombre([parámetro,[, parámetro,[..., parámetro]]]) {
+   [sentencias]
+}
+
+ +
+
nombre
+
Nombre de la función.
+
+ +
+
parámetro
+
El nombre de un argumento pasado a la función. Una función puede tener hasta 255 argumentos.
+
+ +
+
sentencias
+
Las sentencias que componen el cuerpo de la función. Debe contener al menos una expresion {{jsxref("Operadores/yield", "yield")}}.
+
+ +

Descripción

+ +

Una introducción de su uso está disponible en la página de Iteradores y Generadores.

+ +

Compatibilidad de navegadores

+ +

Supported nowhere.

+ +

Vea también

+ + diff --git a/files/es/archive/web/javascript/proximo_soporte_de_ecmascript_en_mozilla/index.html b/files/es/archive/web/javascript/proximo_soporte_de_ecmascript_en_mozilla/index.html new file mode 100644 index 0000000000..763fb63dfa --- /dev/null +++ b/files/es/archive/web/javascript/proximo_soporte_de_ecmascript_en_mozilla/index.html @@ -0,0 +1,85 @@ +--- +title: Próximo soporte de ECMAScript en Mozilla +slug: Archive/Web/JavaScript/Proximo_soporte_de_ECMAScript_en_Mozilla +tags: + - ECMAScript + - JavaScript +translation_of: Archive/Web/JavaScript/ECMAScript_Next_support_in_Mozilla +--- +
{{jsSidebar("New_in_JS")}}
+ +

Próximo ECMAScript hace referencia a las nuevas características del estándar ECMA-262 (comúnmente llamado JavaScript) introducido después de ECMAScript 2015. Las nuevas versiones de las especificaciones de ECMAScript serán liberadas anualmente. Este año, la especificación ES2016 será liberada y ES2017 es la actual especificación en borrador.

+ +

Puedes ver la última propuesta en el repositorio de GitHub tc39/ecma262.

+ +

Un canal de retroalimentación para los estándares de ECMAScript es es-discuss.

+ +

ECMAScript 2016

+ +

Estas características de ES2016 están implementadas:

+ + + +

ECMAScript 2017

+ +

Estas características de ES2017 están implementadas:

+ + + +

Nuevas características experimentales

+ +

Las siguientes características ya están implementadas, pero sólo disponibles en el Canal Firefox Nightly y aún no incluidas en la edición de borrador de alguna especificación ECMAScript.

+ +

Adiciones al objeto ArrayBuffer

+ + + +

Nuevos objetos TypedObject

+ + + +

Nuevos objetos SIMD

+ + + +

Nuevos objetos de Memoria Compartida

+ + + +

Ver también

+ + diff --git a/files/es/archive/web/liveconnect/index.html b/files/es/archive/web/liveconnect/index.html new file mode 100644 index 0000000000..328b6d2678 --- /dev/null +++ b/files/es/archive/web/liveconnect/index.html @@ -0,0 +1,23 @@ +--- +title: LiveConnect +slug: Archive/Web/LiveConnect +tags: + - AJAX + - Guía_de_JavaScript_1.5 + - JavaScript + - Referencia_de_JavaScript_1.5 + - Todas_las_Categorías +translation_of: Archive/Web/LiveConnect/LiveConnect_Reference +--- +

+

This section documents the Java classes used for LiveConnect, along with their constructors and methods. These classes allow a Java object to access JavaScript code. +

JSException +

+
The public class JSException extends RuntimeException, and is thrown when JavaScript returns an error. +
+

JSObject +

+
The public class JSObject extends Object. JavaScript objects are wrapped in an instance of the class JSObject and passed to Java, allowing Java to manipulate JavaScript objects. +
+
+
diff --git a/files/es/archive/web/liveconnect/java/index.html b/files/es/archive/web/liveconnect/java/index.html new file mode 100644 index 0000000000..46df56223d --- /dev/null +++ b/files/es/archive/web/liveconnect/java/index.html @@ -0,0 +1,15 @@ +--- +title: java +slug: Archive/Web/LiveConnect/java +translation_of: Archive/Web/LiveConnect_Reference/java +--- +

Resumen

+

Objeto Global

+

Un objeto de alto nivel utilizado para acceder a cualquier clase Java del paquete java.*.

+

Creado por

+

El objeto java es un objeto Javascript predefinido de alto nivel. Puedes acceder a él de forma automática sin utilizar un constructor o sin llamar a un método.

+

Descripción

+

El objeto java es un buen sinónimo de la propiedad Packages.java.

+

Ver también

+

Paquetes, Packages.java

+

diff --git a/files/es/archive/web/liveconnect/javaarray/index.html b/files/es/archive/web/liveconnect/javaarray/index.html new file mode 100644 index 0000000000..1ec785bfc5 --- /dev/null +++ b/files/es/archive/web/liveconnect/javaarray/index.html @@ -0,0 +1,65 @@ +--- +title: JavaArray +slug: Archive/Web/LiveConnect/JavaArray +translation_of: Archive/Web/LiveConnect_Reference/JavaArray +--- +

+

+

Summary

+

Core Object +

A wrapped Java array accessed from within JavaScript code is a member of the type JavaArray. +

+

Created by

+

Any Java method which returns an array. In addition, you can create a JavaArray with an arbitrary data type using the newInstance method of the Array class: +

+
public static Object newInstance(Class componentType,
+   int length)
+   throws NegativeArraySizeException
+
+

Description

+

The JavaArray object is an instance of a Java array that is created in or passed to JavaScript. JavaArray is a wrapper for the instance; all references to the array instance are made through the JavaArray. +

In JavaScript 1.4 and later, the componentType parameter is either a JavaClass object representing the type of the array or class object, such as one returned by java.lang.Class.forName. In JavaScript 1.3 and earlier, componentType must be a class object. +

Use zero-based indexes to access the elements in a JavaArray object, just as you do to access elements in an array in Java. For example: +

+
var javaString = new java.lang.String("Hello world!");
+var byteArray = javaString.getBytes();
+byteArray[0] // returns 72
+byteArray[1] // returns 101
+
+

Any Java data brought into JavaScript is converted to JavaScript data types. When the JavaArray is passed back to Java, the array is unwrapped and can be used by Java code. See the Core JavaScript 1.5 Guide for more information about data type conversions. +

In JavaScript 1.4 and later, the methods of java.lang.Object are inherited by JavaArray. +

+

Backward compatibility

+

JavaScript 1.3 and earlier

+

The methods of java.lang.Object are not inherited by JavaArray. In addition, the toString method is inherited from the Object object and returns the following value: +

+
[object JavaArray]
+
+

You must specify a class object, such as one returned by java.lang.Object.forName, for the componentType parameter of newInstance when you use this method to create an array. You cannot use a JavaClass object for the componentType parameter. +

+

Properties

+

length: The number of elements in the Java array represented by JavaArray. +

+

Methods

+

toString: In JavaScript 1.4, this method is overridden by the inherited method java.lang.Object.toString. in JavaScript 1.3 and earlier, this method returns a string identifying the object as a JavaArray. +

In JavaScript 1.4 and later, JavaArray also inherits methods from the Java array superclass, java.lang.Object. +

+

Examples

+

Example: Instantiating a JavaArray in JavaScript

+

In this example, the JavaArray byteArray is created by the java.lang.String.getBytes method, which returns an array. +

+
var javaString = new java.lang.String("Hello world!");
+var byteArray = javaString.getBytes();
+
+

Example: Instantiating a JavaArray in JavaScript with the newInstance method

+

In JavaScript 1.4, you can use a JavaClass object as the argument for the newInstance method which creates the array, as shown in the following code: +

+
var dogs = java.lang.reflect.Array.newInstance(java.lang.String, 5);
+
+

In JavaScript 1.1, use a class object returned by java.lang.Class.forName as the argument for the newInstance method, as shown in the following code: +

+
var dataType = java.lang.Class.forName("java.lang.String");
+var dogs = java.lang.reflect.Array.newInstance(dataType, 5);
+
+
+
diff --git a/files/es/archive/web/liveconnect/javaclass/index.html b/files/es/archive/web/liveconnect/javaclass/index.html new file mode 100644 index 0000000000..75ebf01604 --- /dev/null +++ b/files/es/archive/web/liveconnect/javaclass/index.html @@ -0,0 +1,64 @@ +--- +title: JavaClass +slug: Archive/Web/LiveConnect/JavaClass +tags: + - páginas_a_traducir +translation_of: Archive/Web/LiveConnect_Reference/JavaClass +--- +

Resumen

+ +

Objeto Global

+ +

Una referencia JavaScript de una clase Java.

+ +

Creado por

+ +

Una referencia del nombre de clase utilizada en el objeto Packages:

+ +
Packages.JavaClass
+
+ +

JavaClass es el nombre completo de la clase Java. Los objetos LiveConnect java, sun, y netscape ofrecen accesos directos para los paquetes Java más utilizados, además de crear objetos JavaClass.

+ +

Descripción

+ +

Un objeto JavaClass es una referencia a una de las clases de un paquete Java, como netscape.javascript.JSObject. Un objeto JavaPackage es una referencia a un paquete Java, como netscape.javascript. En JavaScript, las jerarquías JavaPackage y JavaClass reflejan el paquete Java y la jeraquía de clases.

+ +

Puedes pasar un objeto JavaClass a un método Java que requiera un argumento de tipo java.lang.Class.

+ +

Compatibilidad hacia atrás

+ +

JavaScript 1.3 y anteriores

+ +

Debes crear un contenedor y meter dentro una instancia de java.lang.Class antes de pasarlo como parámetro a un método Java -- los objetos JavaClass no se convierten de forma automática a instancias de java.lang.Class.

+ +

Propiedades

+ +

Las propiedades de un objeto JavaClass son los campos estáticos de la clase Java.

+ +

Métodos

+ +

Los métodos de un objeto JavaClass son los métodos estáticos de la clase Java.

+ +

Ejemplos

+ +

Ejemplos: Utilizando JavaClass

+ +

En el siguiente ejemplo, x es un objeto JavaClass que hace referencia a java.awt.Font. Debido a que BOLD es un campo estático de la clase Font, también es una propiedad del objeto JavaClass.

+ +
x = java.awt.Font;
+myFont = x("helv", x.BOLD, 10); // crea un objeto Font
+
+ +

El ejemplo anterior omite Packages y utiliza el sinónimo java debido a que la clase Font está en el paquete java.

+ +

Ejemplos

+ +

En el siguiente ejemplo, el objeto java.lang.String de JavaClass se pasa como un argumento al método newInstance creando un array:

+ +
var cars = java.lang.reflect.Array.newInstance(java.lang.String, 15);
+
+ +

Ver también

+ +

JavaArray, Objeto Java, Empaquetado Java, Paquetes

diff --git a/files/es/archive/web/liveconnect/javaobject/index.html b/files/es/archive/web/liveconnect/javaobject/index.html new file mode 100644 index 0000000000..7248cef567 --- /dev/null +++ b/files/es/archive/web/liveconnect/javaobject/index.html @@ -0,0 +1,61 @@ +--- +title: JavaObject +slug: Archive/Web/LiveConnect/JavaObject +translation_of: Archive/Web/LiveConnect_Reference/JavaObject +--- +

+

+

Summary

+

Core Object +

The type of a wrapped Java object accessed from within JavaScript code. +

+

Created by

+

Any Java method which returns an object type. In addition, you can explicitly construct a JavaObject using the object's Java constructor with the Packages keyword: +

+
new Packages.JavaClass(parameterList)
+
+

JavaClass is the fully-specified name of the object's Java class. +

+

Parameters

+
parameterList 
An optional list of parameters, specified by the constructor of the Java class. +
+

Description

+

The JavaObject object is an instance of a Java class that is created in or passed to JavaScript. JavaObject is a wrapper for the instance; all references to the class instance are made through the JavaObject. +

Any Java data brought into JavaScript is converted to JavaScript data types. When the JavaObject is passed back to Java, it is unwrapped and can be used by Java code. See the Core JavaScript 1.5 Guide for more information about data type conversions. +

+

Properties

+

Inherits public data members from the Java class of which it is an instance as properties. It also inherits public data members from any superclass as properties. +

+

Methods

+

Inherits public methods from the Java class of which it is an instance. The JavaObject also inherits methods from java.lang.Object and any other superclass. +

+

Examples

+

Example: Instantiating a Java Object in JavaScript

+

The following code creates the JavaObject theString, which is an instance of the class java.lang.String: +

+
var theString = new Packages.java.lang.String("Hello, world");
+
+

Because the String class is in the java package, you can also use the java synonym and omit the Packages keyword when you instantiate the class: +

+
var theString = new java.lang.String("Hello, world");
+
+

Example: Accessing methods of a Java object

+

Because the JavaObject theString is an instance of java.lang.String, it inherits all the public methods of java.lang.String. The following example uses the startsWith method to check whether theString begins with "Hello". +

+
var theString = new java.lang.String("Hello, world");
+theString.startsWith("Hello"); // returns true
+
+

Example: Accessing inherited methods

+

Because getClass is a method of Object, and java.lang.String extends Object, the String class inherits the getClass method. Consequently, getClass is also a method of the JavaObject which instantiates String in JavaScript. +

+
var theString = new java.lang.String("Hello, world");
+theString.getClass(); // returns java.lang.String
+
+

See also

+

JavaArray, +JavaClass, +JavaPackage, +Packages +

+
+
diff --git a/files/es/archive/web/liveconnect/javapackage/index.html b/files/es/archive/web/liveconnect/javapackage/index.html new file mode 100644 index 0000000000..091300cd5e --- /dev/null +++ b/files/es/archive/web/liveconnect/javapackage/index.html @@ -0,0 +1,39 @@ +--- +title: JavaPackage +slug: Archive/Web/LiveConnect/JavaPackage +translation_of: Archive/Web/LiveConnect_Reference/JavaPackage +--- +

+

+

Summary

+

Core Object +

A JavaScript reference to a Java package. +

+

Created by

+

A reference to the package name used with the Packages keyword: +

+
Packages.JavaPackage
+
+

JavaPackage is the name of the object's Java package. If the package is in the java, netscape, or sun packages, the Packages keyword is optional. +

+

Description

+

In Java, a package is a collection of Java classes or other Java packages. For example, the netscape package contains the package netscape.javascript; the netscape.javascript package contains the classes JSObject and JSException. +

In JavaScript, a JavaPackage is a reference to a Java package. For example, a reference to netscape is a JavaPackage. netscape.javascript is both a JavaPackage and a property of the netscape JavaPackage. +

A JavaClass object is a reference to one of the classes in a package, such as netscape.javascript.JSObject. The JavaPackage and JavaClass hierarchy reflect the Java package and class hierarchy. +

Although the packages and classes contained in a JavaPackage are its properties, you cannot use a for...in statement to enumerate them as you can enumerate the properties of other objects.

+

Properties

+

The properties of a JavaPackage are the JavaClass objects and any other JavaPackage objects it contains. +

+

Examples

+

Suppose the Redwood corporation uses the Java redwood package to contain various Java classes that it implements. The following code creates the JavaPackage red: +

+
var red = Packages.redwood;
+
+

See also

+

JavaArray, +JavaClass, +JavaObject, +Packages +

+
+
diff --git a/files/es/archive/web/liveconnect/netscape/index.html b/files/es/archive/web/liveconnect/netscape/index.html new file mode 100644 index 0000000000..85d8eabb95 --- /dev/null +++ b/files/es/archive/web/liveconnect/netscape/index.html @@ -0,0 +1,23 @@ +--- +title: netscape +slug: Archive/Web/LiveConnect/netscape +translation_of: Archive/Web/LiveConnect_Reference/netscape +--- +

+

+

Summary

+

Core Object +

A top-level object used to access any Java class in the package netscape.*. +

+

Created by

+

The netscape object is a top-level, predefined JavaScript object. You can automatically access it without using a constructor or calling a method. +

+

Description

+

The netscape object is a convenient synonym for the property Packages.netscape. +

+

See Also

+

Packages, +Packages.netscape +

+
+
diff --git a/files/es/archive/web/liveconnect/packages/index.html b/files/es/archive/web/liveconnect/packages/index.html new file mode 100644 index 0000000000..c66265507d --- /dev/null +++ b/files/es/archive/web/liveconnect/packages/index.html @@ -0,0 +1,44 @@ +--- +title: Packages +slug: Archive/Web/LiveConnect/Packages +translation_of: Archive/Web/LiveConnect_Reference/Packages +--- +

+

+

Summary

+

Core Object +

A top-level object used to access Java classes from within JavaScript code. +

+

Created by

+

The Packages object is a top-level, predefined JavaScript object. You can automatically access it without using a constructor or calling a method. +

+

Description

+

The Packages object lets you access the public methods and fields of an arbitrary Java class from within JavaScript. The java, netscape, and sun properties represent the packages java.*, netscape.*, and sun.* respectively. Use standard Java dot notation to access the classes, methods, and fields in these packages. For example, you can access a constructor of the Frame class as follows: +

+
var theFrame = new Packages.java.awt.Frame();
+
+

For convenience, JavaScript provides the top-level netscape, sun, and java objects that are synonyms for the Packages properties with the same names. Consequently, you can access Java classes in these packages without the Packages keyword, as follows: +

+
var theFrame = new java.awt.Frame();
+
+

The className property represents the fully qualified path name of any other Java class that is available to JavaScript. You must use the Packages object to access classes outside the netscape, sun, and java packages. +

+

Properties

+

className: The fully qualified name of a Java class in a package other than netscape, java, or sun that is available to JavaScript.

java: Any class in the Java package java.*.

netscape: Any class in the Java package netscape.*.

sun: Any class in the Java package sun.*. +

+

Examples

+

Example: JavaScript function to create a Java dialog box

+

The following JavaScript function creates a Java dialog box: +

+
function createWindow() {
+   var theOwner = new Packages.java.awt.Frame();
+   var theWindow = new Packages.java.awt.Dialog(theOwner);
+   theWindow.setSize(350, 200);
+   theWindow.setTitle("Hello, World");
+   theWindow.setVisible(true);
+}
+
+

In the previous example, the function instantiates theWindow as a new Packages object. The setSize, setTitle, and setVisible methods are all available to JavaScript as public methods of java.awt.Dialog. +

+
+
diff --git a/files/es/archive/web/liveconnect/sun/index.html b/files/es/archive/web/liveconnect/sun/index.html new file mode 100644 index 0000000000..2ded558161 --- /dev/null +++ b/files/es/archive/web/liveconnect/sun/index.html @@ -0,0 +1,17 @@ +--- +title: sun +slug: Archive/Web/LiveConnect/sun +translation_of: Archive/Web/LiveConnect_Reference/sun +--- +

 

+

Sumario

+

Objeto Core

+

Objeto de nivel superior usado para acceder a cualquier clase Java en el paquete sun.*.

+

Creado por

+

El objeto sun es un objeto Javascript predefinido de nivel superior. Puede acceder a él automáticamente sin necesidad de utilizar un constructor o llamar a un método.

+

Descripción

+

El objeto sun es un sinónimo de conveniencia de la propiedad Packages.sun.

+

Ver también

+

Packages, Packages.sun

+ +

diff --git a/files/es/arrastrar_y_soltar/index.html b/files/es/arrastrar_y_soltar/index.html new file mode 100644 index 0000000000..3a4ca84f63 --- /dev/null +++ b/files/es/arrastrar_y_soltar/index.html @@ -0,0 +1,77 @@ +--- +title: Arrastrar y soltar +slug: Arrastrar_y_soltar +tags: + - Todas_las_Categorías + - XUL +translation_of: Archive/Mozilla/Drag_and_drop +--- +

+

+

Siguiente »

+
+Esta sección describe cómo implementar objetos que pueden ser arrastrados y soltados dentro de otros objetos. +

+

La interfaz de arrastrar y soltar

+

Muchas interfaces de usuario permiten arrastrar objetos particulares dentro de la interfaz. Por ejemplo, arrastrar archivos a otros directorios, o arrastrar un icono a otra ventana para abrir el documento que representa. Mozilla y XUL proporcionan varios eventos para gestionar los intentos del usuario de arrastrar y soltar objetos. +

El usuario puede empezar a arrastrar un objeto pulsando el botón del ratón y moviéndolo. Se termina de arrastrar cuando el usuario suelta el botón del ratón. Los gestores de eventos se llaman cuando el usuario empieza y termina de arrastrar, y también en varios puntos intermedios. +

Mozilla implementa el arrastre por medio de sesiones de arrastre. Cuando un usuario solicita arrastrar algo que puede ser arrastrado, se debería iniciar una sesión de arrastre. La sesión de arrastre gestiona la actualización del puntero del ratón y dónde debería ser soltado el objeto. Si no se puede arrastrar algo, no se debería iniciar una sesión de arrastre. Ya que el usuario general sólo tiene un ratón, sólo se utiliza una sesión de arrastre simultáneamente. +

Ten en cuenta que las sesiones de arrastre pueden ser creadas desde Mozilla o desde otras aplicaciones. Mozilla traducirá los datos que se arrastran si se necesita. +

La lista inferior describe los gestores de eventos que pueden ser llamados, y que pueden ser asociados cualquier elemento. Sólo necesitas fijar valores para los gestores cuando necesitas que pase algo al activarse el evento. +

+
ondrag
llamado periódicamente a lo largo de la operación de arrastrar y soltar. +
ondraggesture 
llamado cuando el usuario empieza a arrastrar el elemento, lo que ocurre normalmente cuando el usuario pulsa el botón del ratón y lo mueve. El script de este gestor debería iniciar y configurar una sesión de arrastre. +
ondragstart  
un alias de ondraggesture; es el nombre de la especificación HTML 5 para el evento y puede usarse en HTML y XUL; sin embargo, para mantener la compatibilidad con versiones más antiguas de Firefox, es posible que quieras continuar usando en XUL ondraggesture. +
ondragover 
este gestor de evento es llamado por un elemento cuando se está arrastrando algo sobre el elemento al cual se le aplica ondragover. Si el objeto puede ser soltado sobre el elemento, se debería notificar a la sesión de arrastre. +
ondragenter 
es llamado por un elemento cuando el puntero del ratón se mueve por primera vez sobre él mientras se está arrastrando algo. Se puede usar para cambiar la apariencia del elemento y así indicar al usuario que el objeto puede ser soltado en él. +
ondragexit 
es llamado por un elemento cuando el puntero del ratón abandona el elemento mientras se está arrastrando algo. También es llamado tras soltar el objeto, para que el elemento pueda eliminar cualquier resaltado u otra indicación. +
ondragdrop 
este gestor de evento es llamado por un elemento cuando se suelta algo en el elemento. En este punto, el usuario ya ha soltado el botón del ratón. El elemento puede simplemente ignorar el evento o gestionarlo de alguna manera, tal como pegar el objeto dentro de sí mismo. +
ondragend  
se llama cuando se suelta un objeto. +
+

Hay dos formas de gestionar eventos de arrastrar y soltar. La primera implica usar las interfaces de arrastrar y soltar de XPCOM directamente. La segunda consiste en usar un objeto adaptador JavaScript que gestione algunas de ellas por ti. Puedes encontrar el código de este adaptador en un archivo llamado nsDragAndDrop.js, que está contenido en el paquete (o global) widget-toolkit. +

+

Arrastrar y soltar XPCOM

+

Se utilizan dos interfaces para implementar arrastrar y soltar. La primera es un servicio de arrastre, +nsIDragService, y la segunda es una sesión de arrastre, nsIDragSession. +

El nsIDragService es responsable de crear sesiones de arrastre cuando se empieza a arrastrar, y de eliminar la sesión de arrastre cuando se haya acabado de arrastrar. Para iniciar un arrastre, se debería llamar a la función <tt>invokeDragSession</tt> dentro de un gestor de eventos <tt>ondraggesture</tt>. Cuando se llama a esta función, comienza el arrastre. +

La función invokeDragSession acepta cuatro parámetros, tal y como se describe debajo: +

+
invokeDragSession(element,transferableArray,region,actions)
+
+
element 
una referencia al elemento que se está arrastrando. Puede obtenerse a través de la propiedad <tt>event.target</tt> dentro del gestor de eventos. +
transferableArray 
un vector de objetos nsITransferable, uno por cada elemento que se está arrastrando. Se usa un vector para permitir arrastrar varios objetos a la vez, como por ejemplo un grupo de archivos. +
region 
una región usada para proporcionar información de la operación. Normalmente debe fijarse a null. +
actions 
las acciones que usa el arrastre. Suele fijarse como una de las siguientes constantes, o como varias de ellas juntas. La acción puede cambiarse a lo largo del arrastre dependiendo de sobre qué elemento se está arrastrando. +
+
nsIDragSession.DRAGDROP_ACTION_NONE 
se usa para indicar que el arrastre no es válido. +
nsIDragSession.DRAGDROP_ACTION_COPY 
el elemento arrastrado se debería copiar al lugar donde se soltó. +
nsIDragSession.DRAGDROP_ACTION_MOVE 
el elemento que se arrastra se debería mover al lugar donde se soltó. +
nsIDragSession.DRAGDROP_ACTION_LINK 
se debería crear un enlace (o un acceso directo, o un alias) al elemento que se está arrastrando en el lugar donde se soltó. +
+
+

La interfaz nsIDragService también proporciona la función <tt>getCurrentSession</tt>, que puede ser llamada desde los gestores de eventos para obtener y modificar el estado del arrastre. La función devuelve un objeto que implementa nsIDragSession. +

La interfaz nsIDragSession se usa para obtener y fijar propiedades del arrastre en curso. Están disponibles las siguientes propiedades y métodos: +

+
canDrop 
fija esta propiedad a <tt>true</tt> si el elemento sobre el que está el ratón permite que el objeto que se está arrastrando se suelte en él. Fija el valor a <tt>false</tt> si no tiene sentido soltar el objeto en él. Se debería cambiar en los gestores de eventos <tt>ondragover</tt> y <tt>ondragenter</tt>. +
dragAction 
fija la acción que debe ser ejecutada, la cual debería ser una o varias de las constantes descritas anteriormente. Se puede usar para proporcionar información adicional al usuario. +
numDropItems 
el número de elementos que se arrastran. Por ejemplo, se fijará a 5 si se están arrastrando cinco marcadores. +
getData(transfer,index) 
devuelve los datos que se arrastran. El primer argumento debe ser un objeto nsITransferable para albergar los datos. El segundo argumento, index, debe ser el índice del elemento que se debe devolver. +
sourceDocument 
el documento donde empezó el arrastre. +
sourceNode 
el nodo DOM donde empezó el arrastre. +
isDataFlavorSupported(flavor) 
devuelve <tt>true</tt> si los datos que se arrastran contienen datos del tipo (sabor) especificado. +
+

+

Siguiente »

+
+

+
+

Original Document Information

+ +
+


+

+
+
diff --git "a/files/es/a\303\261adir_datos_para_la_protecci\303\263n_anti-phishing/index.html" "b/files/es/a\303\261adir_datos_para_la_protecci\303\263n_anti-phishing/index.html" new file mode 100644 index 0000000000..4cc41b20b1 --- /dev/null +++ "b/files/es/a\303\261adir_datos_para_la_protecci\303\263n_anti-phishing/index.html" @@ -0,0 +1,47 @@ +--- +title: Añadir datos para la protección anti-phishing +slug: Añadir_datos_para_la_protección_anti-phishing +translation_of: Mozilla/Adding_phishing_protection_data_providers +--- +

La tecnología de protección anti-phishing permite a Firefox proteger a los usuarios comparando las URLs que el usuario visita con una lista negra de sitios fraudulentos conocidos, y presentando una advertencia al usuario cuando visita el sitio listado. +

+

Instalar un nuevo proveedor de datos

+

Para instalar un proveedor de datos para la protección anti-phishing, es necesario establecer una serie de preferencias a fin de proporcionar detalles acerca del proveedor. +

Cada proveedor de datos posee un número de identificador único (ID). El proveedor de datos con el número de ID 0 es el instalado con Firefox por defecto. Cuando se instala un nuevo proveedor, debe utilizar el siguiente número disponible. +

Para encontrar un número de ID que utilizar, puedes construir un bucle que solicite el valor de browser.safebrowsing.provider.0.name, luego browser.safebrowsing.provider.1.name, y así sucesivamente hasta que no se devuelva ningún valor. Entonces puedes usar este valor. +

Puedes encontrar ejemplos de cómo leer y escribir preferencias en el artículo Añadir preferencias a una extensión. +

+

Preferencias requeridas

+
browser.safebrowsing.provider.idnum.name +
Un nombre legible por un humano del proveedor de datos. +
+
browser.safebrowsing.provider.idnum.keyURL +
Una URL que retorna una clave privada que será usada para cifrar las otras peticiones. +
+
browser.safebrowsing.provider.idnum.lookupURL +
La URL usada para buscar URLs y ver si se encuentran en la lista negra. Esta petición debe ser cifrada usando una clave privada devuelta por la petición KeyURL. +
+

Preferencias opcionales

+
browser.safebrowsing.provider.idnum.reportURL +
Una URL usada para informar cuándo los usuarios visitan páginas fraudulentas y si deciden atender la advertencia o ignorarla. +
+
browser.safebrowsing.provider.idnum.updateURL +
Una URL usada para solicitar una lista actualizada de sitios con contenido fraudulento. El servidor provee o una lista completa o actualizaciones crecientes para poner las tablas del usuario al día. +
+
browser.safebrowsing.provider.idnum.reportGenericURL +
No usado actualmente; su intención es reportar otros asuntos con el servicio de protección anti-phishing. +
+
browser.safebrowsing.provider.idnum.reportErrorURL +
Una URL a la cual el usuario es dirigido para informar de una página segura que está siendo identificada incorrectamente como un sitio fraudulento. +
+
browser.safebrowsing.provider.idnum.reportPhishURL +
Una URL a la cual el usuario es dirigido para reportar un sitio de contenido fraudulento que no ha sido detectado por el sistema de protección contra phishing. +
+

Determinar el proveedor de datos seleccionado actualmente

+

Si necesitas determinar el número de ID del proveedor de datos seleccionado actualmente, +puedes observar el valor actual de la preferencia browser.safebrowsing.dataProvider. +


+

+
+
+{{ languages( { "en": "en/Adding_phishing_protection_data_providers", "fr": "fr/Ajout_de_fournisseurs_de_donn\u00e9es_de_protection_anti-phishing", "it": "it/Aggiungere_fornitori_di_dati_anti-phishing", "ja": "ja/Adding_phishing_protection_data_providers", "pl": "pl/Dodawanie_dostawc\u00f3w_danych_ochrony_przed_phishingiem", "zh-tw": "zh_tw/\u65b0\u589e\u507d\u9020\u7db2\u7ad9\u6e05\u55ae\u4f86\u6e90" } ) }} diff --git "a/files/es/a\303\261adir_lectores_de_canales_a_firefox/index.html" "b/files/es/a\303\261adir_lectores_de_canales_a_firefox/index.html" new file mode 100644 index 0000000000..5b8c50bc83 --- /dev/null +++ "b/files/es/a\303\261adir_lectores_de_canales_a_firefox/index.html" @@ -0,0 +1,51 @@ +--- +title: Añadir lectores de canales a Firefox +slug: Añadir_lectores_de_canales_a_Firefox +tags: + - RSS + - Todas_las_Categorías +translation_of: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox +--- +
{{FirefoxSidebar}}

A partir de Firefox 2, Firefox permite seleccionar diferentes lectores de canales RSS o Atom para usarlos cuando se trata de leer un canal. Este artículo proporciona información sobre cómo añadir lectores adicionales no admitidos por defecto.

+ +

Añadir un nuevo lector de canales basado en la web

+ +

Para añadir un nuevo lector de canales basado en la web, todo lo que tiene que hacer es añadir tres nuevas preferencias:

+ +
+
browser.contentHandlers.types.número.title
+
El nombre del lector de canales.
+
browser.contentHandlers.types.número.type
+
Para un lector de canales, en este caso sería "application/vnd.mozilla.maybe.feed".
+
browser.contentHandlers.types.número.uri
+
La URI del lector de canales. Utilice "%s" donde se deba insertar la URL del canal.
+
+ +

número debe ser reemplazado con el siguiente número único más alto que no haya sido usado aún. Por ejemplo, si desea añadir un nuevo lector de canales llamado "Lector Sencillo", y ya están definidos manejadores de contenido con los números 0 al 4, debe sustituir número por 5, como sigue:

+ + + +

Puede añadir estas preferencias manualmente, visitando about:config, o puede programarlo, si una extensión desea instalar un nuevo lector de canales.

+ +

Añadir un lector de canales desde una aplicación web

+ +

El código JavaScript en la web puede añadir un lector de canales fácilmente, usando la función navigator.registerContentHandler(), de esta manera:

+ +
navigator.registerContentHandler("application/vnd.mozilla.maybe.feed",
+                                 "http://www.urllectorsencillo.com?feed=%s",
+                                 "Lector Sencillo");
+
+ +

Añadir una nueva aplicación lectora de canales

+ +

La manera más sencilla de hacer esto es simplemente usar la interfaz de usuario disponible, usando el panel Canales en la ventana de preferencias (u opciones, dependiendo de su plataforma).

+ +

También se puede hacer programáticamente mediante una extensión, lo cual se hace estableciendo el valor de la opción browser.feeds.handlers.application a la ruta de la aplicación a usar para leer los canales.

+ +
 
+ +

{{ languages( { "en": "en/Adding_feed_readers_to_Firefox", "ja": "ja/Adding_feed_readers_to_Firefox", "zh-tw": "zh_tw/\u65b0\u589e\u6d88\u606f\u4f86\u6e90\u95b1\u8b80\u5de5\u5177" } ) }}

diff --git "a/files/es/a\303\261adir_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" "b/files/es/a\303\261adir_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" new file mode 100644 index 0000000000..2244e609ec --- /dev/null +++ "b/files/es/a\303\261adir_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" @@ -0,0 +1,53 @@ +--- +title: Añadir motores de búsqueda desde páginas web +slug: Añadir_motores_de_búsqueda_desde_páginas_web +tags: + - Plugins_de_búsqueda +translation_of: Web/OpenSearch +--- +

Firefox permite que código JavaScript instale plugins de motores de búsqueda, y soporta dos formatos de plugin de motores de búsqueda: OpenSearch, y Sherlock. +

+
Nota: a partir de Firefox 2, OpenSearch es el formato preferido de búsqueda para Firefox.
+

Cuando código JavaScript intenta instalar un plugin de búsqueda, Firefox presenta una alerta pidiendo permiso al usuario para instalar el plugin. +

+

Instalando plugins de OpenSearch

+

Para instalar un plugin de OpenSearch, necesita utlilizar el métodowindow.external.AddSearchProvider() DOM . El síntaxis de éste método es: +

+
window.external.AddSearchProvider(engineURL);
+
+

Donde engineURL es la URL absoluta del archivo XML para el plugin del motor de búsqueda. +

+
Nota: El soporte de OpenSearch esta sólo disponible en Firefox 2 y posterior.
+

Instalando plugins de Sherlock

+

Para instalar un plugin de Sherlock, necesitará llamar window.sidebar.addSearchEngine(), el síntaxis para el mismo es: +

+
window.sidebar.addSearchEngine(engineURL, iconURL, suggestedName, suggestedCategory);
+
+ +

Para detalles de Sherlock, visite http://developer.apple.com/macosx/sherlock/ +

+

Detección de la capacidad del motor de búsqueda del navegador

+

Debido a que las APIs para añadir motores de búsqueda ha cambiado en el paso de la versión 1.5 a la 2 de firefox y ya que Firefox 1.5 no soporta los ficheros de descripción OpenSearch, los desarrolladores web que quieran añadir motores de búsqueda manteniendo la compatibilidad hacia atrás (p.e. que funcione en Firefox 1.5, Firefox 2.0 o IE 7) deben soportar tanto el formato Sherlock como el OpenSearch y deben detectar las capacidades del navegador de acuerdo a ello. El siguiente fragmento de código es un ejemplo de cómo puede hacerse esto: +

+
function installSearchEngine() {
+ if (window.external && ("AddSearchProvider" in window.external)) {
+   // Firefox 2 and IE 7, OpenSearch
+   window.external.AddSearchProvider("http://example.com/search-plugin.xml");
+ } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) {
+   // Firefox <= 1.5, Sherlock
+   window.sidebar.addSearchEngine("http://example.com/search-plugin.src",
+                                  "http://example.com/search-icon.png",
+                                  "Search Plugin", "");
+ } else {
+   // Sin soporte para motores de búsqueda (IE 6, Opera, etc...).
+   alert("Sin soporte para motores de búsqueda");
+ }
+}
+
+
+
+{{ languages( { "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "en": "en/Adding_search_engines_from_web_pages", "fr": "fr/Ajout_de_moteurs_de_recherche_depuis_des_pages_Web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages", "pl": "pl/Dodawanie_wyszukiwarek_z_poziomu_stron_WWW", "zh-tw": "zh_tw/\u81ea\u7db2\u9801\u6dfb\u52a0\u641c\u5c0b\u5f15\u64ce" } ) }} diff --git "a/files/es/a\303\261adir_preferencias_a_una_extensi\303\263n/index.html" "b/files/es/a\303\261adir_preferencias_a_una_extensi\303\263n/index.html" new file mode 100644 index 0000000000..2cd6581f80 --- /dev/null +++ "b/files/es/a\303\261adir_preferencias_a_una_extensi\303\263n/index.html" @@ -0,0 +1,287 @@ +--- +title: Añadir preferencias a una extensión +slug: Añadir_preferencias_a_una_extensión +tags: + - Complementos + - Sistema_de_preferencias + - Todas_las_Categorías + - XUL + - extensiones +translation_of: Archive/Adding_preferences_to_an_extension +--- +

+

« AnteriorSiguiente »

+

+ +

Este artículo es una vuelta de tuerca más al ejemplo mostrado en Crear una extensión dinámica en la barra de estado que le añade un menú emergente que te permite alternar entre múltiples stocks para visualizar. También añade un diálogo de preferencias que te permite cambiar a un stock diferente a aquellos incluidos en el menú emergente.

+ +

Como ya ocurrió antes, los conceptos cubiertos en los anteriores artículos de la serie no se volverán a tocar por lo que si todavía no los has visto, puedes hacerlo ahora:

+ + + +

También, por motivos de referencia, puede que te interese echarle un vistazo al Sistema de preferencias.

+ +

Descargar el ejemplo

+ +

Puedes descargar una copia de este ejemplo para echarle un vistazo o para usarlo como base para tu propia extensión.

+ +

Descargar el ejemplo

+ +

Actualizar los manifiestos

+ +

El manifiesto de instalación y el manifiesto chrome necesitan ser actualizados. A grandes rasgos, simplemente hay que cambiar el ID de la extensión. Sin embargo, necesitamos añadir una nueva línea al fichero install.rdf.

+ +
 <em:optionsURL>chrome://stockwatcher2/content/options.xul</em:optionsURL>
+
+ +

Esta línea establece la URL del fichero XUL que describe el diálogo de opciones.

+ +

Establecer los valores predeterminados

+ +

Para establecer una preferencia predeterminada para el stock a monitorizar, necesitamos añadir un nuevo directorio al paquete de nuestra extensión llamado "defaults", el cual contendrá otro directorio llamado "preferencias". Dentro de él, crearemos un fichero defaults.js que describirá los valores predeterminados de nuestras preferencias.

+ +
 pref("stockwatcher2.symbol", "GOOG");
+
+ +

Para aprender más sobre el sistemas de preferencias, lee la API de preferencias.

+ +

El código JavaScript

+ +

Para poder monitorizar los cambios en nuestras preferencias necesitamos instalar un observador utilizando la interfaz nsIPrefBranch2. Para hacer eso, necesitamos reimplementar nuestro código como un objeto.

+ +

Eso implica convertir cada función en un miembro de la clase StockWatcher. Echemos un vistazo a cada función de la clase.

+ +

startup()

+ +

La función StockWatcher.startup() es llamada cuando nuestra extensión se carga por vez primera. Su función es iniciar el observador para controlar los cambios en nuestras preferencias, instanciando un objeto para usarlo para que administre nuestras preferencias e instalando una rutina de intervalo para actualizar la información del stock periódicamente.

+ +
 var StockWatcher = {
+   prefs: null,
+   tickerSymbol: "",
+
+   // Initialize the extension
+
+   startup: function()
+   {
+     // Register to receive notifications of preference changes
+
+     this.prefs = Components.classes["@mozilla.org/preferences-service;1"]
+         .getService(Components.interfaces.nsIPrefService)
+         .getBranch("stockwatcher2.");
+     this.prefs.QueryInterface(Components.interfaces.nsIPrefBranch2);
+     this.prefs.addObserver("", this, false);
+
+     this.tickerSymbol = this.prefs.getCharPref("symbol").toUpperCase();
+
+     this.refreshInformation();
+     window.setInterval(this.refreshInformation, 10*60*1000);
+   },
+
+ +

Nuestro objeto posee dos variables miembro. prefs está configurada por startup() para que referencie las preferencias de nuestra extensión mientras que tickerSymbol indica el símbolo de stock a monitorizar.

+ +

La primera cosa que hace la función startup() es obtener una referencia de las preferencias para nuestra extensión. Esto se hace en dos pasos:

+ + + + + +

Tras obtener la rama de preferencias para nuestra extensión, llamaremos al método QueryInterface() sobre ellas para poder usar los métodos de la interfaz nsIPrefBranch2.

+ +

El siguiente paso es registrar un observador de preferencias llamando al método addObserver() para establecer que en el momento en el que cualquier evento se produzca sobre las preferencias, nuestro objeto (this) recibirá una notificación. Cuando ocurra un evento, tal como una preferencia que ha sido alterada, nuestro método observe() será llamado automáticamente.

+ +

Ahora que estamos monitorizando las preferencias, podemos configurarlas para ver la información del stock y mostrarla en el panel de la barra de estado.

+ +

Lo primero que necesitamos hacer es obtener el símbolo de stock configurado actualmente para ver desde las preferencias. Para hacerlo, llamamos al método nsIPrefBranch.getCharPref(), especificando que queremos la preferencia llamada "symbol", que es donde guardamos la elección del usuario para el stock a visualizar. Convertiremos por la fuerza el símbolo a mayúsculas ya que es el modo en el que los símbolos de stock son normalmente mostrados.

+ +

Después, llamamos a nuestro método refreshInformation() para obtener y mostrar inmediatamente la información actual sobre el stock para el cual la extensión está configurada para monitorizar. Miraremos los detalles de cómo funciona este método más adelante.

+ +

Lo último que hace el método startup() es llamar al método del DOM window.setInterval() para configurar un callback que automáticamente ejecute nuestro método refreshInformation() cada 10 minutos. La duración del intervalo está especificada en milisegundos.

+ +

shutdown()

+ +

El método StockWatcher.shutdown() desactiva el observador sobre nuestras preferencias. Aquí es también donde añadiríamos cualquier otra tarea de apagado que necesitásemos realizar.

+ +
  shutdown: function()
+  {
+    this.prefs.removeObserver("", this);
+  },
+
+ +

observe()

+ +

La función StockWatcher.observe() es llamada siempre que ocurre un evento en la rama de preferencias que estamos siguiendo. Para más detalles sobre cómo funcionan los observadores, revisa la interfaz nsIObserver.

+ +
   observe: function(subject, topic, data)
+   {
+     if (topic != "nsPref:changed")
+     {
+       return;
+     }
+
+     switch(data)
+     {
+       case "symbol":
+         this.tickerSymbol = this.prefs.getCharPref("symbol").toUpperCase();
+         this.refreshInformation();
+         break;
+     }
+   },
+
+ +

El parámetro topic indica el tipo de evento ocurrido. Si no es nsPref:changed, simplemente ignoraremos el evento ya que lo único que nos interesa son los cambios de los valores de nuestras preferencias.

+ +

Una vez hemos comprobado que el evento es de hecho un cambio en las preferencias, miramos el parámetro data el cual contiene el nombre de la preferencia que ha cambiado. En nuestro ejemplo sólo hay una preferencia pero puedes monitorizar tantas como quieras.

+ +

Si la preferencia cambiada es "symbol", recuperamos el valor actualizado de la preferencia llamando al método nsIPrefBranch.getCharPref() y la copiamos en nuestra variable tickerSymbol.

+ +

Una vez hemos obtenido la preferencia actualizada, llamamos a refreshInformation() para actualizar de inmediato el visor con la nueva información del stock.

+ +

watchStock()

+ +

Ahora vamos a añadir un método que establece el stock que queremos monitorizar, cambiando la preferencia e inmediatamente pidiendo una actualización del visor. Este método será usado cuando el usuario utilice el menú emergente que añadiremos para cambiar el stock que se está controlando.

+ +
   watchStock: function(newSymbol)
+   {
+     this.prefs.setCharPref("symbol", newSymbol);
+   },
+
+ +

La única nueva información para nosotros aquí es la llamada a la función setCharPref() del objeto de la preferencia, el cual establece el valor de la preferencia "symbol".

+ +

Date cuenta de que el hacer esta llamada provocará que el método StockWatcher.observe() sea llamado y la información del stock sea actualizada.

+ +

refreshInformation()

+ +

Este método difiere ligeramente de las versiones anteriores en la forma en la que recupera la preferencia del stock a seguir y en la manera en que construye la URL a monitorizar, además de cómo construye la cadena que es mostrada en el panel de la barra de estado.

+ +
   refreshInformation: function()
+   {
+     // Because we may be called as a callback, we can't rely on
+     // "this" referring to the right object, so we need to reference
+     // it by its full name
+
+     var symbol = StockWatcher.tickerSymbol;
+
+     var fullUrl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s="
+         + symbol;
+
+     function infoReceived()
+     {
+       var samplePanel = document.getElementById('stockwatcher2');
+       var output = httpRequest.responseText;
+
+       if (output.length)
+       {
+         // Remove any whitespace from the end of the string
+         output = output.replace(/\W*$/, "");
+
+         // Build the tooltip string
+         var fieldArray = output.split(",");
+         samplePanel.label = symbol + ": " + fieldArray[1];
+         samplePanel.tooltipText = "Chg: " + fieldArray[4] + " | " +
+             "Open: " + fieldArray[5] + " | " +
+             "Low: " + fieldArray[6] + " | " +
+             "High: " + fieldArray[7] + " | " +
+             "Vol: " + fieldArray[8];
+       }
+     }
+
+     var httpRequest = new XMLHttpRequest();
+
+     httpRequest.open("GET", fullUrl, true);
+     httpRequest.onload = infoReceived;
+     httpRequest.send(null);
+   }
+ }
+
+ +

Date cuenta de que aquí usamos StockWatcher.tickerSymbol en vez de this.tickerSymbol para conseguir el símbolo del stock a visualizar. Hacemos esto debido a que refreshInformation() es por lo general llamado como un callback desde setInterval. En tales casos, this no se refiere al objeto correcto. Lee Method binding para una información más detallada.

+ +

Una vez tenemos el símbolo en la variable local symbol, la usaremos para construir la URL y la cadena a mostrar en el panel de la barra de estado.

+ +

Instalando los escuchadores de eventos

+ +

La única cosa que nos queda por hacer es instalar los escuchadores de eventos necesarios para ejecutar las rutinas startup() y shutdown() automáticamente cuando la ventana del navegadore es cargada o descargada.

+ +
window.addEventListener("load", function(e) { StockWatcher.startup(); }, false);
+window.addEventListener("unload", function(e) { StockWatcher.shutdown(); }, false);
+
+ +

Diseñar el diálogo de preferencias

+ +

Ahora que hemos escrito todo el código, necesitamos construir el fichero XUL para el diálogo de opciones.

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<prefwindow id="stockwatcher2-prefs"
+     title="StockWatcher 2 Options"
+     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<prefpane id="sw2-stock-pane" label="Stock Settings">
+  <preferences>
+    <preference id="pref_symbol" name="stockwatcher2.symbol" type="string"/>
+  </preferences>
+
+  <hbox align="center">
+    <label control="symbol" value="Stock to watch: "/>
+    <textbox preference="pref_symbol" id="symbol" maxlength="4"/>
+  </hbox>
+</prefpane>
+
+</prefwindow>
+
+ +

El bloque <preferences> establece todas las opciones que hemos implementado así como sus tipos. En nuestro caso, sólo tenemos una única preferencia, el símbolo de stock a monitorizar. Las preferencias se identifican a través del nombre (en este caso, el nombre es "stockwatcher2.symbol").

+ +

La interfaz de usuario actual es descrita en el bloque <prefpane>. El elemento <hbox> indica que los controles contenidos dentro de él han de disponerse horizontalmente, uno al lado del otro en la ventana.

+ +

Nuestro diálogo posee dos controles en él. El primero es una etiqueta que describe el cuadro de texto. El segundo es el propio cuadro de texto en el cual el usuario introduce el símbolo. La propiedad preference relacionada con el cuadro de texto hace referencia al elemento <preference> "pref_symbol" y a la preferencia "stockwatcher2.symbol". Esto hace que el valor de la preferencia se actualice automáticamente para reflejar el contenido del cuadro de texto.

+ +

Añadir el menú contextual

+ +

Añadir el menú contextual es fácil. Todo lo que hay que hacer se hace en el fichero stockwatcher2.xul. El primer paso es añadir el atributo context al panel de la barra de estado:

+ +
 <statusbar id="status-bar">
+   <statusbarpanel id="stockwatcher2"
+     label="Loading..."
+     context="stockmenu"
+     onclick="StockWatcher.refreshInformation()"
+   />
+ </statusbar>
+
+ +

Ahora cuando el usuario pulse sobre el panel de la barra de estado se actualizará la información del stock pero cuando lo haga con el botón derecho aparecerá un menú emergente.

+ +

Definir el menú es también sencillo. Todo lo que necesitamos hacer es añadir un popupset que describa el menú en statusbar, así:

+ +
 <popupset>
+   <menupopup id="stockmenu">
+     <menuitem label="Refresh Now" default="true"
+               oncommand="StockWatcher.refreshInformation()"/>
+     <menuseparator/>
+     <menuitem label="Apple (AAPL)" oncommand="StockWatcher.watchStock('AAPL')"/>
+     <menuitem label="Google (GOOG)" oncommand="StockWatcher.watchStock('GOOG')"/>
+     <menuitem label="Microsoft (MSFT)" oncommand="StockWatcher.watchStock('MSFT')"/>
+     <menuitem label="Yahoo! (YHOO)" oncommand="StockWatcher.watchStock('YHOO')"/>
+   </menupopup>
+ </popupset>
+
+ +

Cada elemento en el menú posee una propiedad label que especifica el texto mostrado en el menú, además de una propiedad oncommand que indica el código JavaScript a ejecutar cuando el usuario elija dicho elemento.

+ +

La opción Actualizar ahora llama a la función StockWatcher.refreshInformation() para actualizar el visor. El resto de las opciones llaman a la función StockWatcher.watchStock() para empezar a observar un stock diferente.

+ +

Para un tutorial más detallado sobre la creación de menús emergentes, lee Tutorial XUL:Menús emergentes.

+ +

+

« AnteriorSiguiente »

+

diff --git "a/files/es/browserid/configuraci\303\263n_r\303\241pida/index.html" "b/files/es/browserid/configuraci\303\263n_r\303\241pida/index.html" new file mode 100644 index 0000000000..52fb1610e6 --- /dev/null +++ "b/files/es/browserid/configuraci\303\263n_r\303\241pida/index.html" @@ -0,0 +1,73 @@ +--- +title: Configuración rápida +slug: BrowserID/Configuración_rápida +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +

Cargar la biblioteca BrowserID

+

Hay que incluir en tu sitio web la biblioteca BrowserID que se encuentra en https://browserid.org/include.js asegurándonos de que se carga antes de llamar a cualquier función navigator.id .

+

Por ejemplo:

+
<script src="https://browserid.org/include.js" type="text/javascript"></script>
+
+

La biblioteca está diseñada para ser neutral al navegador y funciona bien en todos los navegadores modernos.

+

Pedir al usuario que se autentifique

+

Agrega un botón sign-in a tu pagina. Aunque es completamente opcional, es posible que desees utilizar uno de los siguientes botones de BrowserID:

+

A red sign in button A blue sign in button A orange sign in button A green sign in button A grey sign in button

+

Por ejemplo:

+
<a href="#" id="browserid" title="Sign-in with BrowserID">
+  <img src="/images/sign_in_blue.png" alt="Sign in">
+</a>
+

Cuando el usuario hace clic en el botón sign-in (conectar), llama la función navigator.id.get(), pasando una función a la que devuelve la llamada:

+
$(function() {
+  $('#browserid').click(function() {
+    navigator.id.get(gotAssertion);
+    return false;
+  });
+});
+
+

En caso de éxito, la devolución de la llamada se realizará pasada la aserción: esto es una cadena que contiene una reclamación firmada de que el usuario posee una dirección de correo electrónico en particular.

+

Comprobar la aserción

+

Tendrás que enviar esta aserción para que tu servidor la compruebe, por ejemplo, mediante el uso de una petición AJAX. En este ejemplo tenemos un servicio que se ejecuta en /api/login que recibe y comprueba las aserciones. Si este servicio comprueba con éxito la aserción, actualizamos la interfaz de usuario llamando a loggedIn(), de lo contrario, controlamos los errores de inicio de sesión:

+
function gotAssertion(assertion) {
+  // got an assertion, now send it up to the server for verification
+  if (assertion !== null) {
+    $.ajax({
+      type: 'POST',
+      url: '/api/login',
+      data: { assertion: assertion },
+      success: function(res, status, xhr) {
+        if (res === null) {}//loggedOut();
+          else loggedIn(res);
+        },
+      error: function(res, status, xhr) {
+        alert("login failure" + res);
+      }
+    });
+  } else {
+    //loggedOut();
+  }
+}
+
+
Nota: es importante que la aserción se compruebe en el servidor y no en el navegador.
+

En el servidor, debes comprobar la aserción y extraer de ella la dirección de correo del usuario. La forma más sencilla de hacerlo es utilizar el servicio de verificación gratuito proporcionado por BrowserID. Envia una solicitud POST a   https://browserid.org/verify con dos parámetros:

+ +

Nota: esta llamada era un GET, pero a partir del 13 de octure de 2011 debe ser un POST.

+

El verificador comprobará que la aserción es para tu sitio y que es válida. Responde con una estructura JSON que contiene los contenidos y el código de estado de la aserción.

+

Supón que tienes una aserción que pide a  https://mysite.com que acepte la dirección de correo lloyd@example.com.

+

Puedes enviarla a https://browserid.org/verify:

+
$ curl -d "assertion=<ASSERTION>&audience=https://mysite.com" "https://browserid.org/verify"
+
+

Aquí está la respuesta:

+
{
+    "status": "okay",
+    "email": "lloyd@example.com",
+    "audience": "https://mysite.com",
+    "expires": 1308859352261,
+    "issuer": "browserid.org"
+}
+
+

Simplemente tienes que comprobar que el estado es correcto y, si lo es, el usuario puede conectarse al sitio. Puedes crear una sesión para él y colocar una cookie en su navegador para identificar la sesión.

+

Implementa el cierre de sesión

+

Puedes implementar el cierre de sesión simplemente eliminando la cookie de la sesión de usuario.  Si has implementado la compatibilidad para inicio de sesión persistente, entonces solo tendrás que llamar a {{ domxref("navigator.id.logout()") }}.

+

En función del tiempo que haya trascurrido desde que el usuario inició sesión/ingresó con su proveedor de identidad, el usuario dispondrá aún de un certificado de usuario válido: si es así, entonces cuando el usuario inicie sesión/ingrese de nuevo, no se le solicitará de nuevo la contraseña para BrowserID. Sin embargo se le pedirá que seleccione la dirección de correo que va a usar y que confirme que desea iniciar sesión/ingresar.

+

{{ languages( { "en": "en/BrowserID/Quick_Setup", "es": "es/BrowserID/Configuración_rápida" } ) }}

diff --git a/files/es/browserid/funciones_avanzadas/index.html b/files/es/browserid/funciones_avanzadas/index.html new file mode 100644 index 0000000000..05a955b37b --- /dev/null +++ b/files/es/browserid/funciones_avanzadas/index.html @@ -0,0 +1,43 @@ +--- +title: Funciones Avanzadas +slug: BrowserID/Funciones_Avanzadas +--- +
+ In all example code in this page, gotAssertion is the callback argument to navigator.id.get().
+

Persistent Login

+

The navigator.id.get() API takes a set of options as an optional parameter. By using two of these options, allowPersistent and silent, you can enable the user to stay logged into your web site until the certificate signed by their identity provider expires.

+

allowPersistent

+

You use allowPersistent like this:

+
navigator.id.get(gotAssertion, {allowPersistent: true});
+

This option causes a new checkbox to appear in the BrowserID dialog asking the user if they want to stay signed in. If the user checks the box to stay signed in, then the browser creates an assertion and passes it to gotAssertion as normal, but remembers the user selection.

+

silent

+

You use silent like this:

+
navigator.id.get(gotAssertion, {silent: true});"}
+

With this option the browser will not display any dialog to the user, but will call gotAssertion without any user intervention. If the user had checked the box to stay signed in, and the user's certificate has not yet expired, then the browser will silently generate a new assertion and pass it into gotAssertion. Otherwise, the browser will pass null into gotAssertion.

+

Supporting Persistent Login

+

First, on page load, call navigator.id.get({silent: true}):

+
$(function() {\n  navigator.id.get(gotAssertion, {silent: true});\n});
+

Next, inside gotAssertion, if the assertion is not null and validates, log the user in, otherwise call loggedOut():

+
function gotAssertion(assertion) {
+  if (assertion !== null) {
+    // Send assertion to the server for validation
+    if (!validateAssertionOnServer(assertion) loggedOut();
+    else loggedIn();
+  }
+  else {
+    loggedOut();
+  }
+}
+

Finally, loggedOut() updates the page to indicate that the user is logged out. In particular, the page needs to display a "Sign In" button whose click handler will call navigator.id.get({allowPersistent: true}):

+
$('#browserid' }}).click(function() {
+  navigator.id.get(gotAssertion, {allowPersistent: true});
+  return false;
+});
+

Example Code

+

You can see a sample implementation of this at http://myfavoritebooze.org/, whose source code is available on GitHub.

+

Requiring a Specific Email

+

BrowserID enables a user to have multiple identities, and choose which one to sign in with. If a user has multiple email addresses which can be verified using BrowserID, then when a web site calls navigator.id.get(), the user will be presented with all their addresses, and asked which one to use.

+

Sometimes, though, a web site knows which email the user needs to choose. For example, if Alice shares a photo with Bob using a BrowserID-enabled photo-sharing site, the web site needs to authenticate Bob against the exact email address Alice used to invite him. If Bob chooses the wrong email from multiple choices the invitation will fail.

+

In this situation the web site can require that the user use a particular email address by setting the requiredEmail option as an argument to navigator.id.get(). For example:

+
navigator.id.get(gotAssertion, {requiredEmail: \"bob@example.com\"});
+

Even if Bob has multiple email addresses, he'll only be presented with "bob@example.com". The web site's gotAssertion() function is guaranteed to be called with either an assertion for "bob@example.com", or with a null assertion.

diff --git a/files/es/browserid/index.html b/files/es/browserid/index.html new file mode 100644 index 0000000000..4bace2f516 --- /dev/null +++ b/files/es/browserid/index.html @@ -0,0 +1,5 @@ +--- +title: BrowserID +slug: BrowserID +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/es/bugs_importantes_solucionados_en_firefox_3/index.html b/files/es/bugs_importantes_solucionados_en_firefox_3/index.html new file mode 100644 index 0000000000..5dbc833d4a --- /dev/null +++ b/files/es/bugs_importantes_solucionados_en_firefox_3/index.html @@ -0,0 +1,39 @@ +--- +title: Bugs importantes solucionados en Firefox 3 +slug: Bugs_importantes_solucionados_en_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Este artículo es una lista de correcciones importantes de errores en Firefox 3 que no resultan obvios en la documentación.

+ + + +

Ver también

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "fr": "fr/Bugs_importants_corrig\u00e9s_dans_Firefox_3", "ja": "ja/Notable_bugs_fixed_in_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }}

diff --git a/files/es/building_an_extension/index.html b/files/es/building_an_extension/index.html new file mode 100644 index 0000000000..0c6e8f728a --- /dev/null +++ b/files/es/building_an_extension/index.html @@ -0,0 +1,379 @@ +--- +title: Construyendo una extensión +slug: Building_an_Extension +translation_of: Mozilla/Add-ons +--- +

Introducción

+ +

Este tutorial te guiará a través de los pasos requeridos para desarrollar una extensión muy básica - una que agrega un panel con una barra de estado con el texto "Hola, Mundo!" al navegador de Firefox.

+ +
Nota: La extensión creada por este tutorial no funcionará en versiones de Firefox que no contengan una barra de estado estática (esto es, Firefox 4 en adelante). Puedes encontrar un tutorial más actualizado en The Essentials of an Extension de la XUL School.
+ +

Desde Firefox 4 (y otras aplicaciones basadas en Mozilla 2) existen dos tipos de extensiones:

+ + + +

Este artículo explica como construir una extensión tradicional para Firefox. Para información sobre bootstrapped extensions o sin reinicio, mira Bootstrapped extensions.

+ +

Para un tutorial sobre construcción de extensiones para Thunderbird, mira Construyendo una extensión para Thunderbird.

+ +

Inicio Rápido

+ +

Una extensión Hola Mundo similar que puedes generar con el Extension Wizard es explicado línea por línea en otro tutorial desde la MozillaZine Knowledge Base (Base de Conocimiento MozillaZine).

+ +

Configurando un Ambiente de Desarrollo

+ +

Las extensiones son empaquetadas y distribuidas en archivos ZIP o Bundles, con la extensión de archivos XPI.

+ +

Un ejemplo del contenido dentro de un archivo XPI típico :

+ +
my_extension.xpi:                         //Igual a una carpeta llamada my_extension/
+          /install.rdf                    //Información general sobre tu extensión
+          /chrome.manifest                //Registra tu contenido con el motor Chrome
+          /chrome/
+          /chrome/content/                //Contenido de tu extensión, por ejemplo, archivos XUL and JavaScript
+          /chrome/icons/default/*         //Iconos por defecto de tu extensión
+          /chrome/locale/*                //Construyendo una Extensión# Localización
+          /defaults/preferences/*.js      //Construyendo una Extensión# Archivos por defecto
+          /plugins/*
+          /components/*
+          /components/cmdline.js
+ +

Desearemos construir una estructura de archivos similar a la anterior para nuestro tutorial, así que comencemos creando una carpeta para tu extensión en algún lugar de tu disco duro (por ejemplo, C:\extensions\my_extension\ or ~/extensions/my_extension/). Dentro de la nueva carpeta para la extensión, crea otra carpeta llamada chrome, y dentro de la carpeta chrome, crea una carpeta llamada content.

+ +

Dentro del directorio raíz de la carpeta de tu extensión, crea dos archivos de texto nuevos, llamados chrome.manifest e install.rdf. En el directorio chrome/content, crea un nuevo archivo de texto vacío llamado sample.xul.

+ +

Deberías concluir con esta estructura de directorio:

+ + + +

<pre> #!/bin/sh h=$HOME/moExt mkdir -p $h/my_extension/chrome/content touch $h/my_extension/chrome.manifest $h/my_extension/install.rdf </pre> Por favor lee la información adicional sobre configuración de un ambiente de desarrollo en el artículo Configurando un ambiente de desarrollo.

+ +

{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include an icon, named icon.png, in the base directory of the add-on. This allows your add-on's icon to be displayed even when the add-on is disabled, or if the manifest is missing an iconURL entry.") }}

+ +

Crear el Manifiesto de Instalación

+ +

Abre el archivo llamado install.rdf que creaste en el tope de la jerarquía de carpetas de tu extensión y agrega dentro lo siguiente:

+ +
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>sample@example.net</em:id>
+    <em:version>1.0</em:version>
+    <em:type>2</em:type>
+
+    <!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.5</em:minVersion>
+        <em:maxVersion>4.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>sample</em:name>
+    <em:description>A test extension</em:description>
+    <em:creator>Your Name Here</em:creator>
+    <em:homepageURL>http://www.example.com/</em:homepageURL>
+  </Description>
+</RDF>
+ + + +
Nota: si obtienes un mensajes que install.rdf está mal formado, es útil cargarlo en Firefox usando el comando Archivo->Abrir Archivo que reportará los errores XML para ti.
+ +

Las extensiones diseñadas para funcionar con Firefox 2.0.0.x como la última deben configurar la máxima versión a "2.0.0.*". Las extensiones diseñadas para funcionar con Firefox 1.5.0.x como la última deben configurar la máxima versión a "1.5.0.*"

+ +

Mira Manifiestos de Instalación para una lista completa de las propiedades requeridas y opcionales.

+ +

Guarda el archivo.

+ +

Extendiendo el Navegador con XUL

+ +

La interfaz de usuario de Firefox está escrita en XUL y JavaScript. XUL es una grática XML que provee widgets de interfaz como botones, menús, barras de herramientas, árboles, etc. Las acciones de los usuarios están ligadas a funcionalidad usando JavaScript.

+ +

Para extender el navegador, modificamos partes de la interfaz de usuario del navegador, agregando o modificando widgets. Agreramos widgets insertando nuevos elementos XUL DOM en la ventana del navegador y los modificamos usando script y vinchulando manejadores de eventos.

+ +

El navegador es implementado en un archivo XUL llamado browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar contiene content/browser/browser.xul). En browser.xul podemos encontrar la barra de estado, que se parece a algo como esto:

+ +
<toolbarpalette id="BrowserToolbarPalette">
+ ... <toolbarbutton>s ...
+</toolbarpalette>
+ +

<statusbar id="status-bar"> es un  "punto de fusión" para un XUL Overlay.

+ +

XUL Overlays

+ +

Los XUL Overlays son una forma de enlazar en tiempo de ejecución otros widgets de la interfaz de usuario a un documento XUL. Un XUL Overlay es un archivo .xul  que especifíca fragmentos XUL a insertar en puntos de fusión específicos dentro de un documento "maestro". Estos fragmentos pueden especificar la inserción, eliminación o modificación de widgets.

+ +

Ejemplo de un Documento XUL Overlay

+ +
<?xml version="1.0"?>
+<overlay id="sample"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <toolbarpalette id="BrowserToolbarPalette">
+  <toolbarbutton id="my-button" label="Hello, World"  />
+ </toolbarpalette>
+</overlay>
+ +

La <toolbarpalette> llamada BrowserToolbarPalette especifica el "punto de fusión" que queremos enlazar dentro de la ventana del navegador.

+ +

El hijo <toolbarbutton> es un nuevo widget que queremos insertar dentro de un punto de fusión.

+ +

Copia el código de ejemplo anterior y guardalo en tu archivo llamado sample.xul dentro de la carpeta chrome/content que has creado.

+ +

Para más información sobre fusionar widgets y modificar la interfaz de usuario usando Overlays, mira debajo.

+ +

Chrome URIs

+ +

Los archivos XUL son parte de "Paquetes Chrome" - envoltorios de componentes de interfaz de usuario que son cargados a través de URIs chrome://. En lugar de cargar el navegador desde el disco usando una URI file://  (ya que la ubicación de Firefox en el sistema puede cambiar de plataforma a plataforma y de sistema a sistema), los desarrolladores de Mozilla encontraron una solución para crear URIs para contenido XUL que la aplicación instalada conoce.

+ +

La ventana del navegador es: chrome://browser/content/browser.xul. Prueba tipiando esta URL en la barra de navegación de Firefox!

+ +

Las Chrome URIs constan de varios componentes:

+ + + +

Así que, chrome://foo/skin/bar.png carga el archivo bar.png desde la sección skin del tema foo.

+ +

Cuando cargas contenido usando una Chrome URI, Firefox usa el Chrome Registry (Registro de Chrome) para traducir estas URIs en los archivos fuente actuales dentro del disco (o en paquetes JAR).

+ +

Crea un Manifiesto Chrome

+ +

Para más información de Manifiestos Chrome y las propiedades que soportan, mira Referencia de Manifiestos Chrome.

+ +

Abre el archivo denominado chrome.manifest que has creado junto al directorio chrome en la raíz de la jerarquía de carpetas de tu extensión.

+ +

Agrega este código:

+ +
content     sample    chrome/content/
+
+ +

(No te olvides de la barra, "/"! Sin ella, el paquete no será registrado.)

+ +

Esto especifica:

+ +
    +
  1. tipo de material dentro del paquete chrome.
    2. +
  2. nombre del paquete chrome (asegúrate de usar todos caracteres en minúscula para ele nombre del paquete ("sample") ya que Firefox/Thunderbird no soporta doesn't support caracteres mixtos en la versión 2 y anteriores - {{ Bug("132183") }})
    3. +
  3. ubicación de los archivos de paquetes chrome.
    4. +
+ +


+ Entonces, esta línea establece que para un paquete chrome sample, podremos encontrar sus archivos de contenido (content) en la ubicación chrome/content que es una dirección relativa a la ubicación del manifiesto chrome.manifest.

+ +

Tenga en cuenta que los archivos de contenido (content), localización (locale), y apariencia (skin) deben mantenerse dentro de carpetas llamadas content, locale, and skin dentro del subdirectorio chrome.

+ +

Guarda el archivo. Cuando ejecutes Firefox con tu extensión (más adelante en este tutorial), esto va a registrar el paquete chrome.

+ +

Registrar un Overlay

+ +

Necesitas que Firefox fusione tu overlay (capa) con la ventana del navegador siempre que se despliegue una. Así que agrega esta linea al archivo chrome.manifest:

+ +
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
+
+ +

Esto le dice a Firefox que fusione sample.xul en browser.xul cuando se cargue browser.xul.

+ +

Prueba

+ +

Primero, necesitamos comunicarle a Firefox sobre nuestra extensión. Durante la fase de desarrollo para versiones de Firefox 2.0 y posteriores, puedes señalar a Firefox hacia la carpeta donde estés desarrollando la extensión, y la cargará cada vez que reinicies Firefox.

+ +
    +
  1. Ubica tu carpeta de perfil y dentro el perfil con el que quieres trabajar (ej., Firefox/Profiles/<profile_id>.default/).
    2. +
  2. Abra la carpeta extensions/, creandola de ser necesario.
    3. +
  3. Crea un nuevo archivo de texto y coloca dentro la dirección completa de tu carpeta de desarrollo (ej., C:\extensions\my_extension\ or ~/extensions/my_extension/). Los usuarios de Windows deberían conservar la dirección de la barra, y todos deberían acordarse de incluir una barar de cierre y eliminar cualquier espacio.
    4. +
  4. Guarda el archivo con la id de tu extensión como su nombre (ej., sample@example.net). Sin extensión de archivo.
    5. +
+ +

Ahora deberías estar listo opara probar tu extensión!

+ +

Ejecuta Firefox. Firefox detectará el texto de enlace hacia el directorio de tu extensión e instalará la Extensión. Cuando aparezca la ventana del navegador deberías ver el texto "Hello, World!" en la parte derecha del panel con la barra de estado.

+ +

Ahora puedes volver y hacer cambios al archivo .xul, cierra y reinicia Firefox, y deberían aparecer.

+ +

Empaquetamiento

+ +

Ahora que tu extensión funciona, puedes empaquetarla para su despliegue e instalación.

+ +

Comprime (zip) los contenidos (contents) de la carpeta de tu extensión (no la carpeta de extensión misma), y renombra el archivo zip para que tenga la extensión .xpi. En Windows XP, puedes hacer esto fácilmente seleccionando todos los archivos y subcarpetas en la carpeta de tu extensión, haciendo click derecho y seleccionando "Enviar a -> Carpeta comprimida (zip)". Se creará un archivo .zip para ti. Sólo renombralo y ya terminaste!

+ +

En Mac OS X, puedes hacer click derecho en los contenidos (contents) de la carpeta de la extensión y elegir "Crear archivo de..." para hacer un archivo zip. Sin embargo, ya que Mac OS X agrega archivos ocultos a las carpetas para rastrear los metadatos de los archivos, deberías usar la Terminal, eliminar los archivos ocultos (cuyos nombre comienzan con un punto), y luego usar el comando zip en la linea de comandos para crear el archivo zip.

+ +

En Linux, podrías también usar la herramienta zip de linea de comandos.

+ +

Si tienes el 'Extension Builder' (Constructor de Extensiones) instalado, puede compliar el archivo .xpi para ti (Tools -> Extension Developer -> Extension Builder). Simplemente navega al directorio donde está tu extensión (install.rdf, etc.), y presiona el botón Build Extension. Esta extensión tiene una gran cantidad de herramientas para facilitar el desarrollo.

+ +

Ahora carga el archivo .xpi en tu servidor, asegúrate de que es servido como una application/x-xpinstall. Puedes obtener un enlace al mismo y permitir que las personas lo descarguen e instalen. Con el propósito de simplemente testearnuestro archivo .xpi, podemos sólo arrastrarlo en la ventana de extensiones, en Herramientas -> Extensiones para Firefox 1.5.0.x, o  Herramientas -> Complementos para versiones posteriores.

+ +

Instalando desde una página web

+ +

Existen muchas formas de instalar extensiones desde páginas web, incluyendo enlace directo hacia archivos XPI y usando el objeto InstallTrigger. Los autores web y de extensiones son alentados a usar el  método InstallTrigger para instalar XPIs, ya que provee la mejor experiencia a los usuarios.

+ +

Usando addons.mozilla.org

+ +

Los Complementos para Firefox es un sitio de distribución donde puedes alojar tu extensión gratuitamente. tu extensión será alojada en un espejo (mirror) de la red de Mozilla para garantizar tu descarga a pesar de que pueda ser muy popular. El sitio de Mozilla también provee una sencilla instalación para los usuarios, y automáticamente hará que tus versiones más nuevas estén disponibles cuando las cargues. Además, los Complementos para Firefox permiten a los usuarios comentar y proveer una retroalimentación en tu extensión. Es altamente recomendado que uses los Complementos de Firefox para distribuir tus extensiones!

+ +

Visita http://addons.mozilla.org/developers/ para crearte una cuenta y comenzar a distribuir tus extensiones!

+ +

Nota: Tu Extensión será enviada más rápidamente y descargada más veces si tienes una buena descripción y algunas capturas de pantalla de la extensión en acción.

+ +

Instalando Extensiones Usando una Instalador Separado

+ +

Es posible instalar extensiones en un directorio especial y será instalado la próxima vez que la aplicación comience. La extensión estará disponible para cualquier perfil. Mira  lnstalando extensiones para más información.

+ +

En Windows, la información sobre extensiones puede ser agregada al registro, y las extensiones serán recogidas automáticamente la proxima vez que la aplicación comience. Esto permite a los instaladores de aplicaciones agregar fácilmente ganchos de integración como extensiones. Mira Agregando Extensiones usando el Registro de Windows para más información.

+ +

Más sobre XUL Overlays

+ +

Además de agregar widgets de interfaz de usuario al punto de fusión, puedes usar los fragmentos XUL dentro de los Overlays para controlar la posición de los widgets insertados:

+ +
<toolbarbutton position="1" ...  />
+
+<toolbarbutton insertbefore="other-id" ...  />
+
+<toolbarbutton insertafter="other-id" ...  />
+ +

Creando Nuevos Componentes de Interfaz de Usuario

+ +

Puedes crear tus propias ventanas y cuadros de diálogo como archivos .xul separados, brindando funcionalidad a través de la implementación de acciones de usuarios en archivos .js, usando métodos DOM  para manipular widgets de interfaz de usuario. Puedes usar reglas de estilos en archivos .css para enlazar imágenes, establecer colores, etc.

+ +

Mira la documentación XUL con más recursos para los desarrolladores XUL.

+ +

Archivos por Defecto

+ +

Los archivos por defecto que usas para sembrar un perfil de usuario deberían ser ubicados en defaults/ debajo de la raíz de la jerarquía de carpetas de tu extensión. Los archivos .js de preferencias por defecto deberían ser almacenados en defaults/preferences/ - si los ubicas aquí serán cargados automáticamente por el sistema de preferencias de Firefox cuando arranque, y así podrás accederlos usando la API de Preferencias.

+ +

Un archivo de preferencia por defecto de ejemplo:

+ +
pref("extensions.sample.username", "Joe"); //a string pref
+pref("extensions.sample.sort", 2); //an int pref
+pref("extensions.sample.showAdvanced", true); //a boolean pref
+
+ +

Componentes XPCOM

+ +

Firefox soporta componentes XPCOM en las extensiones. Puedes crear tus propios componentes fácilmente en JavaScript o en C++ (usando Gecko SDK).

+ +

Ubica todos tus archivos .js o .dll en el directorio components/ - son registrados automáticamente la primera vez que se ejecute Firefox luego de que tu extensión es instalada.

+ +

Para más información mira Cómo Construir un Componente XPCOM en Javascript, Cómo construir un componente XPCOM binario usando Visual Studio, y el libro Creando Componentes XPCOM.

+ +

Línea de Comandos de la Aplicación

+ +

Uno de los posibles usos de los componentes XPCOM personalizados, es agregar un manejador de líneas de ocmandos para Firefox o Thunderbird. Puedes usar esta técnica para ejecutar tu extensión como una aplicación:

+ +
 firefox.exe -myapp
+
+ +

I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag(). Mira Chrome: Línea de Comandos y un foro de discusión para más detalles.

+ +

Localización

+ +

Para soportar más de un lenguaje, deberías separar los strings (cadenas de caracteres) de tu contenido usando entidades y envoltorios de strings. Es mucho más fácil hacer esto mientras estás desarrollando tu extensión, en lugar de volver y hacerlo después!

+ +

La información de localización es almacenada en el directorio locale para tu extensión. Por ejemplo, para agregar un locale a tu extensión de ejemplo, crea dos directorios anidados "locale/en-US" en chrome (donde está ubicado el directorio "content") y agrega la siguiente línea al archivo chrome.manifest:

+ +
locale sample en-US chrome/locale/en-US/
+
+ +

Para crear valores de atributo localizables en XUL, puedes ubicar los valores en un archivo .dtd (sample.dtd para tu extensión de prueba). Este archivo debería ser ubicado en el directorio locale y se parece a esto:

+ +
<!ENTITY  my-panel.label  "Hello, World">
+
+ +

Luego incluyélo el comienzo de tu documento XUL (pero debajo de"<?xml version"1.0"?>"), como se ve a continuación:

+ +
<?xml version="1.0"?>
+<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd">
+...
+ +

donde window es el valor localName (nombre local) del elemento raíz del documento XUL, y el valor de la propiedad SYSTEM es la URI chrome hacia el archivo de entidad.

+ +

Para nuestra extensión de ejemplo, reemplaza window con overlay (elemento raíz), packagename con sample, y filename.dtd con sample.dtd.

+ +

Para usar las entidades, modifica tu XUL para que se vea así:

+ +
<statusbarpanel id="my-panel" label="&my-panel.label;"  />
+
+ +

El Registro de Chrome se asegurará que el archivo de entidad es cargado desde el envoltorio de localización que se corresponda con la configuración regional seleccionada.

+ +

Para los strings que usas en script, crea un archivo .propertie, un archivo de texto que tiene un string en cada lína en este formato:

+ +
clave=valor
+
+ +

y luego usa {{ interface("nsIStringBundleService") }}/{{ interface("nsIStringBundle") }} o el tag {{ XULElem("stringbundle") }} para cargar valores en el script.

+ +

Entendiendo el Navegador

+ +

Usa el Inspector DOM para inspeccionar la ventana del navegador o cualquier otra ventana XUL que quieras extender.

+ +

Nota: El Inspector DOM no es parte de la instalación Estándar de Firefox. Desde Firefox 3 Beta 4, el Inspector DOM está disponible desde Los Complementos de Firefox como una extensión por separado. Para versiones anteriores, debes reinstalar con la dirección de instalación Personalizada y seleccionar Inspector DOM (o Developer Tools en Firefox 1.5) si no hay un ítem "Inspector DOM" en el menú de herramientas de tu navegador.

+ +

Usa el botón apunta-y-clickea sobre un nodo en el tope izquierdo de la barra de herramientas del Inspector DOM para clickear sobre un nodo en la ventana XUL, para seleccionar visualmente. Cuando haces esto, el inspector salta en el árbol de jerarquía DOM hacia el nodo que ha sido clickeado.

+ +

Usa el panel lateral derecho del Inspector DOM para descubrir puntos de fusión con ids que puedas usar para insertar tus elementos desde overlays. Si no puedes encontrar un elemento con un id que puedas fusionar, podrías necesitar enlazar un script en tu overlay e insertar tus elementos cuando se dispare el evento load en la ventana XUL maestra.

+ +

Depurando Extensiones

+ +

Herramientas Analíticas para Depuración

+ + + +

Depuración con printf

+ + + +

Depuración avanzada

+ + + +

Más Información

+ + diff --git a/files/es/bundles/index.html b/files/es/bundles/index.html new file mode 100644 index 0000000000..ebb971fcf0 --- /dev/null +++ b/files/es/bundles/index.html @@ -0,0 +1,65 @@ +--- +title: Estructura de un paquete de instalación +slug: Bundles +tags: + - Herramientas_API +translation_of: Archive/Mozilla/Bundles +--- +

 

+

Las Aplicaciones XULRunner, extensiones, y temas comparten todos una estructura de directorios común, y en algunos casos el mismo paquete puede ser usado como una aplicación XULRunner independiente además de como una extensión instalable en otra aplicación. La estructura básica de un paquete (bundles) puede incluir cualquiera de los siguientes ficheros:

+
/install.rdfManifiesto de instalación de tema/extensión
+/application.iniManifiesto de lanzamiento de la aplicación
+/components/*Componentes y ficheros XPT       (>=1.7)
+/defaults/preferences/*.jsOpciones por defecto             (>=1.7)
+/plugins/*Plugins NPAPI                    (>=1.8)
+/chrome.manifestManifiesto de registro de Chrome (>=1.8)
+/chrome/icons/default/*Iconos de la ventana             (>=1.8)
+
+

Por supuesto, una extensión no necesita (y normalmente no tendrá) todos estos directorios. Los temas están limitados por razones de seguridad y normalmente no pueden proporcionar un chrome.manifest que registre un tema y un fichero JAR.

+

 

+

Subdirectorios específicos de una plataforma

+

En algunos casos una única extensión o aplicación puede necesitar incluir componentes binarios o plugins para múltiples plataformas, o los autores de temas pueden querer incluir varios ficheros JAR específicos a una plataforma. Para facilitar las cosas en el primer caso, el cargador de la extensión/aplicación tendrá unos subdirectorios especiales previstos específicamente para los ficheros concretos de una plataforma (a partir del Toolkit/Gecko 1.8, Firefox/Thunderbird 1.5). La cadena de texto de la plataforma es definida por el proceso de compilación del toolkit con un único valor para la combinación del sistema operativo, arquitectura del procesador y el compilador. El formato de la cadena de texto de la plataforma es:

+
{OS_TARGET}_{TARGET_XPCOM_ABI}
+
+

Todos los ficheros que son cargados desde el directorio principal de la extensión son cargados desde el subdirectorio

+
/platform/{cadena de texto de la plataforma}
+
+

si existe. Por ejemplo, si un vendedor de plugins que busque el dejarlo disponible para un usuario de ordenadores con Linux, Macintosh y Windows, este proporcionará los siguientes ficheros:

+
/platform/Linux_x86-gcc3/plugins/libMyPlugin.so
+/platform/WINNT_x86-msvc/plugins/MyPlugin.dll
+/platform/Darwin_ppc-gcc3/plugins/libMyPlugin.dylib
+
+

Dado que los ficheros XPT no dependen de la plataforma, cualquier fichero XPT asociado entraría en el directorio de componentes genérico:

+
/components/MyPlugin.xpt
+
+

Si una extensión tiene código específico a una plataforma no binaria (como el código que utiliza la base de registros de Windows desde un script), también puede utilizar el identificador del sistema operativo como subdirectorio de plataforma:

+
/platform/WINNT/components/registerDoctype.js
+
+

Cuando un fichero JAR específico a una plataforma es usado, cada directorio de plataforma debe tener su propio fichero chrome.manifest:

+
chrome.manifest
+chrome/mytheme-base.jar
+platform/Darwin/chrome.manifest
+platform/Darwin/chrome/mytheme-mac.jar
+platform/WINNT/chrome.manifest
+platform/WINNT/chrome/mytheme-win.jar
+
+

El proceso de arranque analiza en primer lugar el directorio base, después los directorios de plataforma aplicables (en primer lugar /{OS_TARGET}/, a continuación /{OS_TARGET}_{TARGET_XPCOM_ABI}/). Cuando las preferencias por defecto se definen en varios directorios, los que se cargan al final tienen prioridad sobre los que se cargan antes.

+

Ficheros de extensión específicos a una aplicación

+

Además de los ficheros de extensión listados más arriba, las aplicaciones pueden leer ficheros suplementarios desde extensiones. Por ejemplo, Firefox 1.5 y superiores pueden leer los plugins de búsqueda de Sherlock desde /searchplugins/*.src Firefox 2 y superiores además pueden leer Plugins MozSearch y OpenSearch desde

+
/searchplugins/*.xml
+
+

y los diccionarios Myspell desde

+
/dictionaries/*.{aff|dic}
+
+

Referencias oficiales de Herramienta API

+

+

+

diff --git a/files/es/cadenas_del_user_agent_de_gecko/index.html b/files/es/cadenas_del_user_agent_de_gecko/index.html new file mode 100644 index 0000000000..4dbd1908cf --- /dev/null +++ b/files/es/cadenas_del_user_agent_de_gecko/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 +--- +

Uso Apropiado

+

No se recomienda el uso de las cadenas del User Agent como su principal opción para la detección del navegador. Vea Deteccion Cross browser y Soporte Cross Browser para una ojeada mas en profundo a varias técnicas sobre detección de navegadores con recomendaciones.

+

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.

+

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

+

Lista de user agents liberados por Netscape y AOL basados en Gecko

+

Vea mozilla.org's user-agent strings reference para Plataforma específico, + + Seguridad + , + + Sistema Operativo + o + + CPU + y valores de + + localización + .

+ +


+ Para una información más detallada sobre liberaciones de Netscape y Mozilla, por favor vea el mozilla.org cvstags reference.

+

 

+
+

Informacion Del documento Original

+ +
+

 

diff --git a/files/es/cambios_del_tema_en_firefox_2/index.html b/files/es/cambios_del_tema_en_firefox_2/index.html new file mode 100644 index 0000000000..fdd74588bd --- /dev/null +++ b/files/es/cambios_del_tema_en_firefox_2/index.html @@ -0,0 +1,883 @@ +--- +title: Cambios del tema en Firefox 2 +slug: Cambios_del_tema_en_Firefox_2 +tags: + - Complementos + - Temas + - Todas_las_Categorías +translation_of: Archive/Themes/Theme_changes_in_Firefox_2 +--- +

Este artículo trata los cambios que deben hacerse para actualizar un tema de Firefox para que funcione correctamente en Firefox 2. + +

Cambios en el navegador que requieren actualizaciones en el tema

+ +

Varios archivos del navegador han sido modificados o suprimidos, por lo que puede que tengas que hacer cambios en tu tema. Esta tabla lista los archivos XUL modificados y los correspondientes archivos CSS del tema que puede que tengas que actualizar.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Archivo XULArchivo CSSDetalles
feeds/addFeedReader.xulfeeds/addFeedReader.css Archivo nuevo que muestra una UI para añadir un nuevo agregador.
feeds/subscribe.xhtmlfeeds/subscribe.cssArchivo nuevo que muestra la UI para suscribirse a un feed RSS.
preferences/downloads.xul-Eliminado en Firefox 2.
preferences/general.xul-Eliminado en Firefox 2.
safebrowsing/warning-overlay.xulsafebrowsing/browser-protection.cssArchivo nuevo que contiene una capa externa que se muestra en la parte superior del navegador cuando visitamos un sitio sospechoso de phishing.
search/engineManager.xulengineManager.cssArchivo nuevo que contiene la UI de la ventana del administrador de motores de búsqueda.
+ +

Cambios en el tema default (el que viene por defecto)

+ +

La siguiente tabla lista todos los cambios hechos en el tema por defecto para Firefox 2. Puedes usar esta información como ejemplo para entender los cambios que necesitas hacer.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ArchivoDescripción de los cambios
browser/bookmarks/addBookmark.cssActualizado para incluir cambios en el CSS relacionados con los micro-resúmenes.
browser/bookmarks/bookmarksProperties.cssArchivo nuevo; incluye CSS para los micro-resúmenes.
browser/browser.cssNecesita ser actualizado para incluir CSS para los micro-resúmenes, áreas de búsqueda, items del memú marcadores con iconos, y más.
browser/dropmark-nav-small.pngArchivo nuevo; es la flecha del menú desplegable de los botones de navegación, cuando usamos iconos pequeños.
browser/dropmark-nav.pngArchivo nuevo; es la flecha del menú desplegable de los botones de navegación.
browser/engineManager.cssArchivo nuevo; CSS usado por el administrador de motores de búsqueda.
browser/feeds/addFeedReader.cssArchivo nuevo; CSS usado en la ventana para añadir un nuevo agregador.
browser/feeds/feedIcon.pngArchivo nuevo; el icono de feed RSS.
browser/feeds/feedIcon16.pngArchivo nuevo; la versión de 16x16 píxeles del icono de feed RSS.
browser/feeds/subscribe.cssArchivo nuevo; CSS usado en la ventana de subscripción a un feed RSS.
browser/Go-rtl.pngArchivo nuevo; icono "ir" para usarlo si es colocado a la izquierda del campo de direcciones.
browser/preferences/preferences.cssArchivo de skins de la ventana de preferencias.
browser/safebrowsing/browser-protection.cssArchivo nuevo; CSS para la ventana que aparece para advertir al usuario que un sitio puede ser fraudulento, así como el icono de la barra URL que indica que un sitio puede ser fraudulento.
browser/safebrowsing/close16x16.pngArchivo nuevo; este es el icono mostrado ventana de advertencia de "navegación segura " como una caja para cerrar la ventana.
browser/safebrowsing/dim.pngArchivo nuevo; este es un gráfico superpuesto en nivel superior del contenido de la ventana para "debilitarla" cuando se muestra la ventana de advertencia de navegación segura. Debe usar transparencia para permitir que el contenido de la ventana sea visible a través de él.
browser/safebrowsing/tail.pngArchivo nuevo; esta es la "cola" del estilo de la ventana que indica que un sitio puede ser fraudulento.
browser/safebrowsing/warning16x16.pngArchivo nuevo; esta es la versión en 16x16 píxeles del icono de advertencia mostrado en la barra de direcciones cuando aparece la ventana de advertencia de navegación segura.
browser/safebrowsing/warning24x24.pngArchivo nuevo; este es el icono de advertencia que se muestra dentro de la ventana de advertencia de navegación segura.
browser/search-bar-background-mid.pngArchivo nuevo; es el fondo para la parte central de la barra de búsqueda. Ahora los extremos de la barra son tratados por separado.
browser/search-bar-background.pngArchivo eliminado.
browser/Search-bar.pngArchivo eliminado.
browser/Search-go-rtl.pngArchivo nuevo; es el botón "ir" que se muestra en el extremo izquierdo de la caja de búsquedas.
browser/Search-go.pngArchivo nuevo; es el botón "ir" que se muestra en el extremo derecho de la caja de búsquedas.
browser/Search-provider-bkgnd-rtl.pngArchivo nuevo; el fondo dibujado detrás del proveedor de búsqueda cuando está localizado a la izquierda al final de la barra de búsqueda.
browser/Search-provider-bkgnd.pngArchivo nuevo; el fondo dibujado detrás del proveedor de búsqueda cuando está localizado a la derecha al final de la barra de búsqueda.
global/about.cssArchivo nuevo; CSS utilizado en el cuadro "acerca de" de la aplicación.
global/alltabs-box-bkgnd.pngArchivo nuevo; es el fondo del menú emergente "todas la pestañas" que está a la derecha de la barra de pestañas.
global/alltabs-box-overflow-bkgnd.pngArchivo nuevo; es el fondo del menú emergente "todas la pestañas" cuando hay suficientes etiquetas para activar la barra de desplazamiento de la barra de pestañas.
global/browser.cssRevisado para soportar nuevos estilos para la ventana principal del navegador
global/globalBindings.xmlActualizado para soportar los cambios en la barra de pestañas, incluido el botón para cerrar pestañas.
global/icons/alltabs.pngActualmente sin uso, resto de esbozos anteriores del tema.
global/inactivetab-left.pngArchivo eliminado.
global/inactivetab-right.pngArchivo eliminado.
global/menu.cssActualizado para incluir nuevos estilos.
global/notification.cssArchivo nuevo; define los estilos utilizados por la barra de notificación que aparece en la parte superior de las ventanas del navegador para presentar noticias com "se ha bloqueado un popup"
global/scrollbox/autorepeat-arrow-dn-dis.gifArchivo nuevo; icono desplegado para la flecha hacia abajo deshabilitada del auto-repeat en un a caja desplegable.
global/scrollbox/autorepeat-arrow-dn.gifArchivo nuevo; icono mostrado para la flecha hacia abajo de una caja desplegable.
global/scrollbox/autorepeat-arrow-up-dis.gifArchivo nuevo; icono mostrado para una flecha arriba deshabilitada en una caja desplegable.
global/scrollbox/autorepeat-arrow-up.gifArchivo nuevo; icono mostrado en la caja superior de la barra de desplazamiento auto-repetitiva.
global/scrollbox.cssNecesita ser actualizado para incluir nuevos estilos.
global/tab-arrow-end-bkgnd.pngArchivo nuevo; es el fondo para el cuadro de la barra de desplazamiento en la flecha del lado derecho.
global/tab-arrow-end.pngArchivo nuevo; the arrow drawn in the scrolling tab bar box at the right end of the tab bar.
global/tab-arrow-start-bkgnd.pngArchivo nuevo; es el fondo para el cuadro de la barra de desplazamiento en la flecha del lado izquierdo.
global/tab-arrow-start.pngArchivo nuevo; the arrow drawn in the scrolling tab bar box at the left end of the tab bar.
global/tab-left.pngArchivo nuevo; el lado izquierdo de las pestañas
global/tab-middle.pngArchivo nuevo; el centro de las pestañas
global/tab-right.pngArchivo nuevo; el lado derecho de las pestañas
global/tabbrowser-tabs-bkgnd.pngArchivo nuevo; es el fondo de la barra de las pestañas, mostrado detrás de las pestañas.
global/toolbar.cssNecesita ser actualizado para incluir nuevos estilos.
mozapps/extensions/about.cssActualizado para simplificar los nombres de los estilo, ya que varios estilos eran idénticos.
mozapps/extensions/extensions.cssCSS para la ventana del administrador de add-ons. Actualizado para soportar las nuevas caracteristicas del administrador de add-ons de Firefox 2.
mozapps/extensions/itemDisabledFader.pngArchivo nuevo; un PNG con transparencia usado como capa externa sobre los objetos deshabilitados en el add-on manager.
mozapps/extensions/itemEnabledFader.pngArchivo nuevo; un PNG con transparencia usado como capa externa sobre los objetos habilitados en el add-on manager.
mozapps/extensions/notifyBadges.pngArchivo nuevo; contiene los íconos que van a ser usados como capas sobre iconos de los add-ons en la ventana add-on manager, estos indicarán el estado de estos. Los siguientes iconos son usados en el tema por defecto: +

Image:NotifyBadges.png

+ +
    +
  • El primer ícono (verde aquí) indica que ese add-on tiene una actualización disponible.
    • +
  • El segundo icono (amarillo aquí) el add-on en cuastión aparece como bloqueado en la lista; esto mientras se intenta confirmar.
    • +
  • El tercer icono (rojo aquí) indica que el add-on se encuentra desabilitado, por el usuario, o porque es incompatible con la aplicación.
    • +
  • El cuarto (azul aquí) (no estoy seguro de los que este significa).
    • +
+
mozapps/extensions/question.pngNew file; used in the Add-ons Manager when you check for updates. If no updates are found, this icon is displayed at the left side of the message strip that appears across the top of the window.
mozapps/extensions/update.cssThis file, which skins the Firefox update wizard, has fewer styles in it due to the redesigned update wizard.
mozapps/extensions/viewButtons.pngNew file; contains icons for each of the views that may be available in the add-ons manager. In the default theme, these look something like this: +

Image:ViewButtons.png
+ The top row contains dimmed versions of the icons below them. The first icon is for the extensions view. The second is for themes. The third is for locales, the fourth is for plugins, the fifth is for updates, and the sixth is for installs.

+
mozapps/prefEste directorio ya no se usa en Firefox 2 y debería ser borrado.
+ +

Cambios en browser

+ +

bookmarks/addBookmark.css

+ +

Deberías añadir las siguientes líneas al inicio del archivo addBookmarks.css:

+ +
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+ +

También hay que añadir CSS en relación con los microresúmenes para proporcionar formato al recolector de microresúmenes. Se usa para que cuando no hay microresúmenes disponibles, el recolector parezca una caja de texto normal en vez de parecer una lista de menús editable.

+ + + +

Este archivo da estilo a addBookmark2.xul.

+ +

bookmarks/bookmarksProperties.css

+ +

Este archivo es nuevo en Firefox 2, y debería contener el mismo código CSS añadido a addBookmark.css. Este archivo da estilo a bookmarksProperties.xul.

+ +
Nota: se puede poner este CSS en un archivo separado que será referenciado por ambos archivos en el futuro
+ +

browser.css

+ +

Los siguientes estilos usados en temas para Firefox 1.5 ya no se usan en Firefox 2 y deberían ser borrados de tu tema:

+ + + +

Tienes que añadir los siguientes estilos para que tu tema sea compatible con Firefox 2:

+ + + +

Puede que también tengas que hacer cambios en otros estilos.

+ +

searchbar.css

+ +

El siguiente estilo ya no se usa en Firefox 2 y debería ser borrado de tu tema:

+ + + +

Tienes que añadir los siguientes estilos para que tu tema sea compatible con Firefox 2:

+ + + +

Por supuesto, también puedes desear hacer cambios en otros estilos.

+ +

preferences/preferences.css

+ +

Los estilos siguientes ya no se usan en Firefox 2 y deberían ser borrados de tu tema:

+ + + +

Tienes que añadir los siguientes estilos a tu tema para hacerlo compatible con Firefox 2:

+ + + +

Por supuesto, También puedes cambiar otros estilos.

+ +

feeds/addFeedReader.css

+ +

Este archivo es nuevo en Firefox 2. Se usa para el skin de la ventana que se muestra para añadir a un nuevo agregador, esta es definida en el archivo browser/feeds/addFeedReader.xul.

+ + + +

feeds/subscribe.css

+ +

Este archivo es nuevo en Firefox 2. Es el skin de la ventana mostrada al suscribirse a un feed RSS, está en browser/feeds/subscribe.xhtml.

+ + + +

El tema default también incluye estilos para a[href] img, body, h1, h2, y html.

+ +

safebrowser/browser-protection.css

+ +

Este archivo, nuevo a Firefox 2, son las skins para las funciones de seguridad del navegador. Los siguientes estilos deben ser implementados para dar soporte a la ventana que aparece cuando el usuario visita a un sitio sospechoso de phishing:

+ + + +

Los estilos siguientes se usan para mostrar, en la barra de URL, un indicador de si el sitio es seguro:

+ + + +

engineManager.css

+ +

El siguiente estilo tiene que ser implementado. Este archivo es nuevo en Firefox 2.

+ + + +

Cambios en global

+ +

about.css

+ +

Este es un archivo nuevo para Firefox 2. Son los Skins de la caja about Firefox, es necesario proporcionar al menos los siguientes estilos:

+ + + +

The default theme also skins the following styles: body, html, img, ul, and ul > li.

+ +

browser.css

+ +

Los siguientes estilos que fueron usados en Firefox 1.5 ya no se usan en Firefox 2 y han sido borrados:

+ + + +

Los siguientes estilos son nuevos en Firefox 2:

+ + + +

Si quieres tambien puedes hacer cambios en otros estilos.

+ + + +

El siguiente estilo ya no se usa en Firefox 2 y a sido borrado:

+ + + +

El tema de Firefox 2 también añade los siguientes estilos nuevos:

+ + + +

Si lo deseas, también puedes cambiar la definición de otros estilos.

+ +

notification.css

+ +

Este archivo es nuevo en Firefox 2. Se usa para la barra de notificación que aparece a lo largo de la parte superior del navegador para mostrar al usuario mensajes como: popup bloqueado, se necesita plugin, etcétera. Hay tres niveles de gravedad para los mensajes, info, warning y critical. Deberías definir los siguientes estilos:

+ + + +

scrollbox.css

+ +

Para el tema de Firefox 2 en este archivo se han añadido los siguiente estilos:

+ + + +

Puedes hacer cambios en otros estilos si quieres.

+ + + +

Si lo deseas también puedes cambiar otros estilos.

+ +

Cambios en mozapps

+ +

extensions/about.css

+ +

Los estilos siguientes para Firefox 1.5 ya no se usan en Firefox 2 y deberían ser borrados:

+ + + +

Se añadieron los siguiente estilos:

+ + + +

también puedes cambiar otros estilos, si quieres.

+ +

extensions/update.css

+ +

Los siguientes estilos ya no se usan en Firefox 2 y deberían ser borrados del tema:

+ + + +

También se añadieron los siguientes estilos:

+ + diff --git a/files/es/cambios_en_los_temas_de_firefox_3/index.html b/files/es/cambios_en_los_temas_de_firefox_3/index.html new file mode 100644 index 0000000000..1b053b48f6 --- /dev/null +++ b/files/es/cambios_en_los_temas_de_firefox_3/index.html @@ -0,0 +1,101 @@ +--- +title: Cambios en los temas de Firefox 3 +slug: Cambios_en_los_temas_de_Firefox_3 +tags: + - Themes + - páginas_a_traducir +translation_of: Archive/Themes/Theme_changes_in_Firefox_3 +--- + +
+
<noscript>

Some features of this site require JavaScript.

</noscript> +
+
+

Este artículo describe los cambios hechos al actualizar al tema de Firefox para trabajar en: Firefox 3.

+
Nota: Se puede utilizar el artículo Actualizar temas para Firefox 3 como guía para actualizar temas.
+Si alguien con experiencia en la creación de temas quisiera escribir algún artículo, adelante!
+
+

Los cambios del navegador requieren actualizar los temas

+

Existen diversos archivos que fueron cambiados o borrados del navegador que pueden requerir que realices cambios a tu tema. La siguiente tabla muestra tanto el archivo XUL cambiado como el archivos CSS correspondientes al tema que debes de actualizar.

+ +
Filename CSS File Details
     
+
+
+

Cambios en el tema por defecto

+

La siguiente tabla muestra los cambios hechos en el tema por defecto de Firefox 3; puedes utilizar esta información como apoyo para tener una idea de los cambios que necesitas hacer.

+
+

Lista de todos los archivos

+
+

En todas las plataformas

+ +
Archivo Descripción del cambio
browser/themes/*/browser/browser.css El ancho del indicador del 'drag and drop' ya no es calculado durante el arrastre (tabbrowser.xml). En vez de eso la propiedad '-moz-margin-start' debe ser agregada a .tab-drop-indicator-bar, con el valor de la mitad del ancho de la imagen indicadora. También, la visibilidad del indicador ahora es controlada is now controlled by setting collapsed in tabbrowser.xml. Como resultado, la propiedad 'display' debe ser eliminada de .tab-drop-indicator-bar (incluyendo for dragging="true").
+
+
+

En Mac OS X

+ +
Archivo Descripción del cambio
browser/themes/pinstripe/browser/tabbrowser/tabDragIndicator.png Se removieron los pixeles blancos superfluos de los bordes, por lo tanto la imagen es más pequeña. Puede o no afectar a otros temas Mac que lo usen.
browser/themes/pinstripe/browser/browser.css .tabbrowser-tab[first-tab="true"] > .tab-image-left ya no tiene un margin-left. En vez de eso .tabs-left now displayed and given the same width as the former margin-left. It was already done this way in Winstripe.
+
+
+
+

Cambios en browser

+
+
+

Cambios en global

+
+

En todas las plataformas

+

El fondo amarillo para la barra de dirección es obsoleto; en lugar de ello, los temas deben darle formato al nuevo elemento #identity-box dependiendo de su clase verifiedDomain/verifiedIdentity.

+

El botón Ir ahora está localizado dentro de la barra de dirección, por lo tanto su imagen (chrome://browser/skin/Go-arrow.png) tiene que ser más pequeña. El código requerido para mostrar y ocultar el botón Ir y otros iconos de la barra de dirección es:

+
#urlbar[pageproxystate="invalid"] > #urlbar-icons > :not(#go-button) ,
+#urlbar[pageproxystate="valid"] > #urlbar-icons > #go-button {
+  visibility: collapse;
+}
+
+
+
Imágenes agregadas
+

Agrega las siguientes imágenes:

+
chrome://global/skin/icons/information-16.png
Utilizada cuando se presentan avisos de información.
chrome://global/skin/icons/warning-16.png
Utilizada cuando de muestran alertas.
+
+
Imágenes eliminadas
+

Las siguientes imágenes fueron eliminadas:

+
chrome://mozapps/skin/extensions/question.png
Ya no es utilizada.
+
+
+

En Mac OS X

+

Los temas de Mac OS X para Firefox 3 deben agregar estas dos clases al final del archivo chrome://global/skin/wizard.css:

+
.wizard-buttons-btm {
+  padding: Xpx;
+}
+
+.wizard-label-box {
+  display: none;
+}
+
+

El valor numérico de X, el número de pixeles de relleno (padding) en .wizard-buttons-btm, debe ser el mismo valor que el de el margen para .wizard-buttons-box-2.

+ +
+
+
+

Cambios en mozapps

+
+
+

Vea también

+
+
+
+
+ diff --git "a/files/es/cat\303\241logo/algoritmo_frecency/index.html" "b/files/es/cat\303\241logo/algoritmo_frecency/index.html" new file mode 100644 index 0000000000..d533b36402 --- /dev/null +++ "b/files/es/cat\303\241logo/algoritmo_frecency/index.html" @@ -0,0 +1,138 @@ +--- +title: Algoritmo Frecency +slug: Catálogo/algoritmo_frecency +tags: + - Desarrollo Mozilla + - Lugares + - Places + - extensiones +translation_of: Mozilla/Tech/Places/Frecency_algorithm +--- +

+

Frecency es una puntuación dada a cada URI único en Places, comprendiendo marcadores, histórico y etiquetas. Esta puntuación está determinada por la cantidad de re-visitas, el tipo de esas visitas, cuanto de recientes han sido y si el URI se ha añadido como marcador o se le ha etiquetado.

+

La palabra "frecency" viene de la combinación de las palabras en inglés "frequency" (frecuencia) y "recency" (reciente).

+ +

El proceso de cálculo de frecency

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Para las 10 visitas más recientes (donde 10 está determinado por places.frecency.numVisits):
.. Determinar el porcentaje de bonus por el tipo de visita (ej. el "tipo de transición"):
.... 0 (places.frecency.embedVisitBonus)
.... 120 (places.frecency.linkVisitBonus)
.... 200 (places.frecency.typedVisitBonus)
.... 140 (places.frecency.bookmarkVisitBonus)
.... 0 (places.frecency.downloadVisitBonus)
.... 0 (places.frecency.permRedirectVisitBonus)
.... 0 (places.frecency.tempRedirectVisitBonus)
.... 0 (places.frecency.defaultVisitBonus)
 
.. Determinar el peso, basado en cómo fueron de recientes las visitas:
.... 100 (places.frecency.firstBucketWeight, 4 días de tamaño de contenedor, en places.frecency.firstBucketCutoff)
.... 70 (places.frecency.secondBucketWeight, 14 días de tamaño de contenedor, en places.frecency.secondBucketCutoff)
.... 50 (places.frecency.thirdBucketWeight, 31 días de tamaño de contenedor, en places.frecency.thirdBucketCutoff)
.... 30 (places.frecency.fourthBucketWeight, 90 días de tamaño de contenedor, en places.frecency.fourthBucketCutoff)
.... 10 (places.frecency.defaultBucketWeight, tamaño de contenedor en places.frecency.defaultBucketCutoff)
 
.. Puntos para cada muestra de visita = (bonus / 100,0) * peso
 
La puntuación frecency final para URI visitadas = límite_máximo(contador total de visitas * suma de puntos para las visitas de la muestra / número de visitas de la muestra)
+

Ejemplo

+

Este ejemplo de cálculo de frecency de un URI que ha sido añadido a marcadores y recientemente ha sido visitado dos veces (una vez ayer, y otra vez la semana pasada haciendo clic en un enlace), y otras dos veces hace más de 90 días:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
0Puntuación por defecto
+140100 * (140/100,0) - Primer contenedor por peso y bonus por marcador
+8470 * (120/100,0) - Segundo contenedor por peso y bonus por seguir el enlace
+1410 * (140/100,0) - Quinto contenedor por peso y bonus por marcador
+1410 * (140/100,0) - Quinto contenedor por peso y bonus por marcador
-- 
252(4 * 252 / 4) - Puntuación frecency final
+

Notas

+ +

Notas para los desarrolladores

+

Aquí hay varias notas del desarrollo que puedes leer sobre Places y que pueden ofrecer perspectivas adicionales:

+ +

Historia

+ +

diff --git "a/files/es/cat\303\241logo/direcciones_web_consultas_places/index.html" "b/files/es/cat\303\241logo/direcciones_web_consultas_places/index.html" new file mode 100644 index 0000000000..e1f3cbb628 --- /dev/null +++ "b/files/es/cat\303\241logo/direcciones_web_consultas_places/index.html" @@ -0,0 +1,345 @@ +--- +title: Direcciones web de consultas Places +slug: Catálogo/Direcciones_web_consultas_Places +tags: + - Firefox + - Firefox Desktop + - Guía + - Herramientas + - Intermedio +translation_of: Mozilla/Tech/Places/Places_query_URIs +--- +

+ +

Este artículo describe los parámetros que se pueden usar al crear direcciones web del tipo place. Estas direcciones web ejecutan consultas Places.

+ +

Se puede usar una dirección web del tipo place como marcador. Por ejemplo, desde la biblioteca de Firefox se puede ir a Otros marcadores, luego hacer clic en el botón Organizar y luego elegir Nuevo marcador… En el campo Dirección se puede ingresar una dirección web del tipo place para crear una consulta. Una vez creado esta carpeta de marcador inteligente, se puede arrastrar el mismo a la barra de direcciones y soltarlo allí, para que, al hacerle clic, aparezca un menú desplegable conteniendo los resultados de dicha consulta.

+ +

La siguiente dirección web del tipo place es la que se usa en el marcador inteligente Más visitadas, el cual pertenece al conjunto de marcadores inteligentes creados al comenzar a usar Firefox 3:

+ +
place:queryType=0&sort=8&maxResults=10
+
+ +

Los parámetros usados en esta consulta son:

+ +
+
queryType=0
+
Esto indica que la consulta debería tener en cuenta sólo el historial del usuario y no los marcadores.
+
sort=8
+
El parámetro sort indica que los resultados de la consulta deben ser mostrados en el orden numérico inverso, según la cantidad de visitas. En otras palabras, las páginas más visitadas deberían aparecer primero, y las páginas menos visitadas, últimas.
+
maxResults=10
+
Este parámetro especifica que se tiene que mostrar un máximo de 10 resultados en la consulta.
+
+ +

Si se quiere cambiar esta consulta para que sólo se tenga en cuenta las visitas de hoy, entonces se puede cambiar a:

+ +
place:queryType=0&sort=8&maxResults=10&beginTimeRef=1&beginTime=0
+
+ +

Estos son los nuevos parámetros agregados acá:

+ +
+
beginTimeRef=1
+
Indica que el parámetro beginTime que sigue se refiere a la medianoche de hoy.
+
beginTime
+
Especifica la cantidad de tiempo, en microsegundos, desde la medianoche en la que se comenzó a registrar las visitas. Al especificar 0 como valor, se indica que se quiere tener en cuenta todas las visitas ocurridas hoy.
+
+ +

Parámetros de consulta

+ +

Esta es una lista de los parámetros disponibles para usar.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ParámetroTipoDescripción
beginTimeunsigned longEl tiempo, en microsegundos, del resultado más antiguo.
beginTimeRefunsigned longIndica el tiempo de referencia especificado en beginTime: +
+
0
+
El "Tiempo Unix", contando a partir del 1º de enero de 1970, con huso horario GMT/UTC. Este es el valor predeterminado.
+
1
+
Este tiempo es relativo a la última medianoche. Esto es útil para consultas relacionadas al día de hoy.
+
2
+
Este tiempo es relativo a ahora mismo.
+
+
endTimeunsigned longLa hora, en microsegundos, del último resultado.
endTimeRefunsigned longIndica el tipo de referencia especificado en endTime. Los valores son los mismos que para beginTime.
termscadenaEl término a consultar.
minVisitslongFiltra resultados basados en el mínimo número de visitas. Especificar -1 (el valor predeterminado) para mostrar todos los resultados, o cualquier otro número para incluir sólo los resultados con una cantidad mayor de visitas al valor ingresado.
maxVisitslongFiltra resultados basados en el máximo número de visitas. Sólo los elementos que hayan sido visitados menos veces que el número ingresado serán incluidos en los resultados. Especificar -1 (el valor predeterminado) para no filtrar.
onlyBookmarkedlógicoSi el valor es true, entonces sólo los elementos en marcadores serán incluidos en los resultados.
domainIsHostlógicoSi el valor es true, entonces el dominio domain debe ser una coincidencia exacta. De lo contrario, todo lo que termine en domain es considerado una coincidencia.
domaincadenaConsulta por elementos que coincidan con este servidor o nombre de dominio. Ver el parámetro domainIsHost para más información.
foldercadenaLa carpeta a consultar. Puede ser una de las siguientes: +
+
PLACES_ROOT
+
La carpeta raíz de Places.
+
BOOKMARKS_MENU
+
El menú Marcadores.
+
TOOLBAR
+
La barra de marcadores.
+
TAGS
+
Etiquetas
+
UNFILED_BOOKMARKS
+
Otros marcadores
+
+
!annotationlógicoIndica si incluir o rechazar elementos que coincidan la anotación especificada por annotation. Si el valor es true, entonces los elementos que no tengan la anotación especificada serán rechazados.
annotationcadenaLa anotación a coincidir al consultar.
uricadenaLa dirección web a consultar.
uriIsPrefixlógicoSi el valor es false, entonces la uri debe ser una coincidencia exacta; este es el valor predeterminado. Si el valor es true, entonces cualquier entrada que comience con la dirección web especificada, será considerada una coincidencia.
tag cadena.
!tags ..
+ +

Operadores de consulta

+ +

Los siguientes atributos permiten controlar los resultados con más precisión.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorTipoDescripción
OR Este es el operador lógico OR ["O"].
applyOptionsToContainers  
excludeItemIfParentHasAnnotation Obsoleto Gecko 13.0cadenaLos elementos cuyas raíces tengan este valor como anotación, son rechazadas de los resultados de la consulta. Este parámetro es ignorado para consultas sobre el historial. Por ejemplo, se pueden rechazar entradas de marcadores dinámicos especificando livemark/[dirección de la fuente web] acá.
excludeItemslógicoSi el valor es true, entonces todas las direcciones web y separadores son rechazados de los resultados de la consulta de marcadores, así sólo se muestran las carpetas y las consultas. Si el valor es false, entonces se muestran todos los elementos; este es el valor predeterminado.
excludeQuerieslógicoSi el valor es true, entonces las consultas son rechazadas de los resultados; sin embargo, las consultas de carpetas individuales como la carpeta de marcadores symlinks todavía serán incluidas. El valor predeterminado false indica que las consultas deberían ser incluidas en los resultados.
excludeReadOnlyFolderslógicoSi el valor es true, entonces las carpetas de sólo lectura serán rechazadas de los resultados. Esto sólo afecta en los casos en los cuales el nodo de resultados de la carpeta actual aparece en su carpeta anterior. El valor predeterminado es false.
expandQuerieslógicoSi el valor es true, entonces las direcciones web place aparecerán como contenedores en los resultados, con los contenidos rellenados con la consulta guardada. Esto no hace nada si excludeQueries tiene como valor true. El valor predeterminado es false, lo cual provoca que las direcciones web place aparezcan como elementos normales.
group  
includeHiddenlógicoSi el valor es true, entonces los elementos que normalmente se ocultarían en una consulta del historial (como el contenido de iframes así también como imágenes) son incluidos en los resultados. El valor predeterminado es false.
maxResultsunsigned longEl número máximo de resultados para aparecer. Esto no funciona al ordernar por título. El resultado es 0, lo que significa que se muestran todos los resultados.
originalTitlecadenaRecupera el título original de la página.
queryTypeunsigned shortEl tipo de búsqueda para usar al consultar la base de datos. Este atributo se tiene en cuenta por nodos de consulta. Es ignorado para consultas de carpeta individual. +
+
0
+
Historial
+
1
+
Marcadores
+
2
+
Tanto historial como marcadores (No implementado aún -- ver error 378798)
+
+
resolveNullBookmarkTitleslógicoSi el valor es true, entonces los marcadores con títulos en blanco, recuperarán sus títulos desde el historial, de ser posible. Esto no aplica a marcadores con títulos vacíos. El valor predeterminado es false.
showSessionslógicoSi el valor es true, entonces la información de sesión es usada para agrupar elementos del historial. Esto sólo hace diferencia al ordenar por fecha. El valor predeterminado es false.
sortunsigned shortEl orden para usar en los resultados. +
+
0
+
Orden original del marcador
+
1
+
Ordenado por título, de la A a la Z
+
2
+
Ordenado por título, de la Z a la A
+
3
+
Ordenado por fecha de visita, lo más reciente a lo último
+
4
+
Ordenado por fecha de visita, lo más reciente primero
+
5
+
Ordenado por dirección web, de la A a la Z
+
6
+
Ordenado por dirección web, de la Z a la A
+
7
+
Ordenado por cantidad de visitas, ascendiente
+
8
+
Ordenado por cantidad de visitas, descendiente
+
9
+
Ordenado por palabra clave, de la A a la Z
+
10
+
Ordenado por palabra clave, de la Z a la A
+
11
+
Ordenado por fecha agregada, lo más reciente a lo último
+
12
+
Ordenado por fecha agregada, lo más reciente primero
+
13
+
Ordenado por última fecha modificada, lo más reciente a lo último
+
14
+
Ordenado por última fecha modificada, lo más reciente primero
+
17
+
Ordenado por etiquetas, ascendiente
+
18
+
Ordenado por etiquetas, descendiente
+
19
+
Ordenado por anotación, ascendiente
+
20
+
Ordenado por anotación, descendiente
+
+
sortingAnnotationcadenaLa anotación para usar al ordenar por anotación.
typeunsigned shortEl tipo de resultados a mostrar. +
+
0
+
Resultados como direcciones web (resultados "URI", uno por cada dirección web visitada en el rango)
+
1
+
Resultados como visitas (resultados "visita", con uno por cada vez que una página fue visitada - esto devolverá frecuentemente múltiples resultados para una misma dirección web)
+
2
+
Resultados como visitas totales (como en "visita", pero muestra todos los atributos para cada resultado)
+
3
+
Resultados como consulta de fecha (muestra resultados para un rango de fechas dado)
+
4
+
Resultados como consulta de sitio (muestra la última visita para cada dirección web en un servidor dado)
+
5
+
Resultados como consulta de fecha+sitio (muestra la lista de servidores visitados en un período dado)
+
6
+
Resultados como consulta de etiqueta (muestra una lista de marcadores con una etiqueta dada)
+
7
+
Resultados como contenedores de etiquetas (muestra marcadores con una etiqueta dada; para la misma dirección web usa la última modificada - el atributo folder=tag_folder_id tiene que estar presente en la consulta.)
+
+
+ +

Ver también

+ + + +

diff --git "a/files/es/cat\303\241logo/index.html" "b/files/es/cat\303\241logo/index.html" new file mode 100644 index 0000000000..c974d2f749 --- /dev/null +++ "b/files/es/cat\303\241logo/index.html" @@ -0,0 +1,19 @@ +--- +title: Catálogo +slug: Catálogo +tags: + - Catálogo + - Complementos + - Todas_las_Categorías + - extensiones +translation_of: Mozilla/Tech/Places +--- +

 

+

+

Catálogo (Places) es el sistema de administración de Historial y de Marcadores introducido en Firefox 3. Ofrece mejoras en flexibilidad y consultas complejas para hacer el manejo de los lugares que el usuario visita, más fácil y cómodo. También incluye nuevas características como el almacenamiento de favicons y la capacidad de apuntar páginas con información arbitraria. También introduce un nuevo interfaz de usuario para manejar esa información; ver Places en el Mozilla wiki.

+

Places almacena sus datos en una base de datos SQLite usando el interfaz mozStorage.

+ +

Documentación

Guía para la migración a catálogo
Migrando el código existente para usar el API catálogo.
Manipular marcadores usando el catálogo
Ejemplos de cómo trabajar con Marcadores usando el API Catálogo.
Usar el servicio de pestañas del catálogo
Cómo usar el servicio de pestañas.
Usar el servicio de historial del catálogo
Cómo acceder a la información de historia usando el API Catálogo.
Usar el servicio de favicon del catálogo
Cómo manipular favicons usando el API Catálogo.
Usar el servicio de marcadores dinámicos del catálogo
Cómo crear y manejar marcadores dinámicos.
Usar el servicio de anotaciones del catálogo
Cómo trabajar con el servicio de anotaciones.
Consultar el catálogo
Cómo hacer consultas de los marcadores y el historial con parámetros específicos.
Obtener parte del árbol de marcadores
Cómo buscar una sección del árbol de marcadores usando consultas.
Presentar información del catálogo utilizando vistas
Cómo usar las vistas Catálogo para presentar datos del catálogo en tu propia aplicación o extensión.
Utilidades JavaScript para el catálogo
Una librería de rutinas útiles que te harán más fácil trabajar con Catálogo.

Ver todo...

Documentos de diseño

La base de datos del catálogo
Una visión general del diseño de la base de datos del catálogo.
Diseño del servicio de historial
Diseño del Servicio de Historial.
Diseño del servicio de marcadores
Diseño del Servicio de Marcadores.
Diseño del servicio de anotaciones
Diseño del Servicio de Historial.
El algoritmo de frecuencia del catálogo
El algoritmo detrás de la barra de direcciones del catálogo (a veces llamada "awesomebar").
+

 

+ +

diff --git a/files/es/code_snippets/index.html b/files/es/code_snippets/index.html new file mode 100644 index 0000000000..24233e92ba --- /dev/null +++ b/files/es/code_snippets/index.html @@ -0,0 +1,5 @@ +--- +title: Code snippets +slug: Code_snippets +--- +This page was auto-generated because a user created a sub-page to this page. diff --git "a/files/es/code_snippets/pesta\303\261as_del_navegador/index.html" "b/files/es/code_snippets/pesta\303\261as_del_navegador/index.html" new file mode 100644 index 0000000000..12e2f8c676 --- /dev/null +++ "b/files/es/code_snippets/pesta\303\261as_del_navegador/index.html" @@ -0,0 +1,13 @@ +--- +title: Pestañas del navegador +slug: Code_snippets/Pestañas_del_navegador +tags: + - Add-ons + - extensiones + - fragmentos de código + - pestañas +--- +

Aquí encontrará un conjunto de fragmentos de código útiles que lo ayudarán a trabajar con las pestañas del navegador Firefox. Los comentarios generalmente indican dónde debe insertar su propio código.

+

Cada fragmento normalmente incluye algún código para ejecutarse al inicio, esto se implementa mejor usando un "listener" al cargar la página. Estos fragmentos asumen que son ejecutados en un contexto de una ventana de navegador. Si quiere trabajar con pestañas de una ventana que no es un navegador, necesita tener referencia a una primero, mire Trabajando con ventanas en código chrome para más detalles.

+

Múltiples significados para la palabra "browser"

+

La palabra 'browser' es usada de varias maneras. Of course the entire application Firefox is called "a browser". Within the Firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the XUL sense of a {{ XULElem("browser") }} element. Furthermore another meaning of 'browser' in this document and in some Firefox source is "the tabbrowser element" in a Firefox XUL window.

diff --git a/files/es/columnas_con_css-3/index.html b/files/es/columnas_con_css-3/index.html new file mode 100644 index 0000000000..8eed415ee2 --- /dev/null +++ b/files/es/columnas_con_css-3/index.html @@ -0,0 +1,68 @@ +--- +title: Columnas con CSS-3 +slug: Columnas_con_CSS-3 +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

+

+

Introducción

+

Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas (al ir de un extremo al otro de la página). Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos. Por desgracia esto no es posible con HTML y CSS-2, a no ser que fuerces la ruptura de las columnas en puntos fijos, limites en gran medida el código a utilizar, o uses scripts complejos. +

El borrador de CSS-3 propone algunas nuevas propiedades para dar respuesta a esta necesidad. En Firefox 1.5 y superior hemos implementado algunas de estas propiedades para comportarnos según lo descrito en el borrador de CSS-3 (con una excepción explicada abajo)

El blog de Robert O'Callahan  usa columnas CSS, pruébalo con Firefox 1.5 +

+

Usar Columnas

+

Columnas, Count y Width

+

Dos propiedades CSS Controlan el número (Count) y el ancho (Width) de las columnas: -moz-column-count y -moz-column-width. +

-moz-column-count indica el número concreto de columnas a crear. Por ejemplo: +

+
<div style="-moz-column-count:2; -moz-column-gap: 1em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Mostrará el contenido en dos columnas (si usas Firefox 1.5 o superior): +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

-moz-column-width fija la anchura mínima de las columnas. Si no se indica un -moz-column-count, entonces el navegador creará automáticamente tantas columnas (con la anchura indicada) como sea posible en el espacio disponible.

+
<div style="-moz-column-width:20em; -moz-column-gap: 1em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Se visualizará así: +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

Los detalles exactos son descritos en El borrador de CSS3. +

En un bloque multicolumna, el contenido fluye automáticamente de una columna a otra según sea necesario. Todas las funcionalidades de HTML, CSS, y DOM están soportadas dentro de las columnas, tanto al editar como al imprimir. +

+

Equilibrado de altura

+

El borrador de CSS3 especifica que la altura de las columnas debe estar equilibrada, es decir, el navegador debe definir automáticamente la altura máxima de las columnas de modo que la altura del contenido en cada columna sea más o menos igual. Firefox lo hace.

Sin embargo, en algunas situaciones puede ser útil fijar explícitamente la altura máxima de las columnas, y entonces se empiezan a meter los contenidos en la primera columna y se van creando tantas columnas como sea necesario, posiblemente desbordando por la derecha. Por ejemplo, en http://iht.com/ los artículos hacen esto (usando scripts). Por lo tanto extendemos el borrador de modo que si se indica la propiedad CSS height en un bloque multicolumnas, se permite que cada columna tenga esa altura -y no más- antes de agregar la siguiente columna. Esto permite una composición mucho más eficiente.

+

Espacio entre Columnas

+

Por defecto, cada columna está tocando la columna de al lado. Normalmente esto no es lo más apropiado. Se puede utilizar el padding de las columnas para corregirlo, pero normalmente lo más fácil será aplicar la propiedad -moz-column-gap al bloque con multicolumna:

+
<div style="-moz-column-width:20em; -moz-column-gap:2em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Se visualizará así: +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

Degradado elegante

+

La propiedad -moz-column será ignorada por los navegadores que no la soporten, por lo tanto, es relativamente fácil crear un diseño que en esos navegadores muestre una sola columna, y al mismo tiempo utilice multi-columnas en Firefox 1.5. +

+

Conclusión

+

Las columnas CSS3 son un nuevo método básico de disposición que ayudará a los desarrolladores Web a aprovechar mejor las condiciones reales de la pantalla. Los desarrolladores imaginativos podrán encontrarle muchas aplicaciones, especialmente a la característica de equilibrado automático y dinámico de la altura.

+

Referencias adicionales

+ +

Categorías +

interwiki links +

{{ languages( { "en": "en/CSS3_Columns", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }} diff --git a/files/es/como_crear_un_microresumen/index.html b/files/es/como_crear_un_microresumen/index.html new file mode 100644 index 0000000000..0ff12e5cdc --- /dev/null +++ b/files/es/como_crear_un_microresumen/index.html @@ -0,0 +1,175 @@ +--- +title: Como crear un Microresumen +slug: Como_crear_un_Microresumen +tags: + - Microresúmenes +translation_of: Archive/Mozilla/Creating_a_microsummary +--- +

Un generador de microresúmenes es un conjunto de instrucciones orientadas a crear un microresumen del contenido de una página. Una página web puede referenciar los generadores correspondientes mediante el uso de etiquetas <link rel="microsummary"> en la sección <head>. O también se pueden descargar e instalar independientemente, por iniciativa del usuario, si cada generador incluye una lista de páginas a las que sea aplicable.

+

En este tutorial vamos a crear un generador de microresumen para la página inicio de Spread Firefox que se encargue de mostrar el número actual de descargas, junto al texto "descargas de Fx". Por ejemplo: 174475447 descargas de Fx.

+

Para ello, ante todo, construiremos la hoja XSLT de transformación que convierte la página web en un microresumen; luego veremos cómo especificar que el generador sea aplicable a esa página, y por último aprenderemos cómo publicar el generador para su descarga e instalación.

+

Durante la construcción de la hoja XSLT, lo que se añade en cada paso se muestra en negrita, para facilitar el seguimiento del proceso.

+

Comienzo

+

Un generador se expresa como un documento XML cuyo nodo raíz es <generator> (en el namespace http://www.mozilla.org/microsummaries/0.1). Para construir un generador, hay que empezar por crear un fichero de texto vacío y añadir la declaración XML y un nodo <generator> vacío:

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1">
+</generator>
+
+

Poner nombres

+

Un generador debe tener atributos name con las descripciones arbitrarias de los microresúmenes creados. Un nombre debe ser lo bastante descriptivo para dar al usuario final una idea fiel de la información incluida en el microresumen.

+

Dado que nuestro generador va a crear microresúmenes que muestran el número de descargas de Firefox, le llamaremos "Conteo de descargas de Firefox":

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Conteo de descargas de Firefox">
+</generator>
+
+

Incluir una hoja XSLT de transformación

+

Cada generador debe incluir una hoja XSLT de transformación (también llamadas hojas de estilo XSLT) que transforme el contenido de la página en un microresumen. XSLT es un potente lenguaje para transformar documentos: Sirve para producir diversas presentaciones de la misma información.

+

Para incluir la hoja XSLT en el generador hay que usar un elemento <template>:

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Conteo de descargas de Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+    </transform>
+  </template>
+</generator>
+
+

Obsérvese que aunque el generador puede incluir código XSLT arbitrario (inclusive generación de texto enriquecido), por el momento Firefox sólo muestra el texto plano de la salida XSLT.

+

Especificar el formato de salida

+

Dado que la hoja XSLT va a generar un microresumen en formato texto plano, hay que indicarlo usando la etiqueta XSLT <output>:

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Conteo de descargas de Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+    </transform>
+  </template>
+</generator>
+
+

Usar un sólo nodo <template> en la hoja XSLT

+

El procesador XSLT (incluido en el navegador) transforma los documentos buscando en la hoja XSLT el nodo <template> que mejor se adapte a cada nodo del documento procesado. Cuando lo encuentra, realiza en el nodo procesado las transformaciones incluidas en el <template> elegido.

+

Este mecanismo es bastante potente, pues permite recorrer el árbol entero del documento procesado y generar salida (recursivamente) basándose en la estructura del documento. sin embargo, para la finalidad de generar un microresumen para la página Spread Firefox, se necesita tan sólo un nodo <template> que referencie el nodo raíz del documento (/) y lo procese de una sóla vez:

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Conteo de descargas de Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

Incluir el conteo de descargas

+

Para incluir el conteo de descargas en la salida de la hoja XSLT, hay que usar la etiqueta XSLT <value-of>, especificando en el atributo select una ruta XPATH que apunte al nodo que contiene el conteo.

+

XPATH es un lenguage de identificación de nodos en documentos XML/HTML. También contiene algunas funciones básicas para manipular los nodos y sus contenidos. La forma más sencilla de formular una expresión XPATH que apunte al nodo en cuestión es usando la Extensión de chequeo de XPATH, de esta manera:

+
    +
  1. Instalar la extensión de chequeo de XPATH (si no está ya instalada), reiniciando después Firefox para completar la instalación.
    2. +
  2. Visitar la página Spread Firefox.
    3. +
  3. Buscar el conteo de descargas (a fecha actual está casi abajo del todo, a la derecha, bajo el título "Firefox downloads").
    4. +
  4. Pulsar con el botón derecho sobre el número.
    5. +
  5. Y seleccionar View XPath en el menú contextual.
    6. +
+

El chequeador de XPATH abre entonces una nueva ventana con un campo XPath que contiene la ruta XPATH que apunta al nodo seleccionado, y que a la fecha de hoy es: id('download-count').

+

Bien, pues basta con añadir a nuestro <template> una etiqueta <value-of> con un atributo select con la ruta XPATH encontrada:

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Conteo de descargas de Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

Incluir texto

+

Para incluir en el microresumen el texto "Descargas de Fx", hay que usar una etiqueta XSLT <text> que contenga el texto deseado.

+

Añadir al <template> un nodo <text> que contenga el texto "Descargas de Fx":

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Conteo de descargas de Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text>Descargas de Fx</text>
+      </template>
+    </transform>
+  </template>
+</generator>
+
+

Obsérvese que el espacio blanco (espacios, tabuladores, saltos de línea) entre etiquetas XSLT no se transmite a la salida de la transformación XSLT (al contrario que en HTML, en que todo el espacio blanco adyacente se traduce a un sólo espacio), así es que si se desea que aparezca algún espacio en blanco, para que el texto quede separado del conteo, hay que incluirlo dentro de la etiqueta <text>.

+

Y con esta pequeña adición, ya hemos terminado de escribir la hoja de transformación XSLT necesaria para convertir la página de inicio de Spread Firefox en un microresumen.

+

Especificar la página de aplicación del microresumen

+

Una vez completa la hoja de transformación, hay que especificar a qué página se aplica. Si fuéramos los administradores del sitio Srpead Firefox, nos bastaría con editar la página inicial e incluir en la sección head una etiqueta <link> para referenciar a nuestro generador:

+
<head>
+  ...
+  <link rel="microsummary" href="ruta/de/nuestro/generador.xml">
+</head>
+
+

Pero como no somos administradores de ese sitio web, tenemos que especificar la página de aplicación dentro del propio generador, y luego publicarlo para que se pueda descargar e instalar. Para especificar la página de aplicación hay que usar una etiqueta <pages> dentro del nodo <generator>:

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1"
+           name="Conteo de descargas de Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> descargas de Fx</text>
+      </template>
+    </transform>
+  </template>
+  <pages>
+  </pages>
+</generator>
+
+

La etiqueta <pages> puede contener tantos nodos <include> y <exclude> como páginas a las cuales el generador se puede aplicar o no, respectivamente.

+

Para permitir que el generador se pueda aplicar a una página, hay que añadir un nodo <include> cuyo contenido sea una expresión regular que defina las páginas deseadas. Y para impedir que el generador se pueda aplicar a una página, hay que añadir un nodo <exclude> con una expresión regular que defina las páginas no deseadas.

+

El comportamiento por defecto de un generador es que no es aplicable a ninguna página, de modo que hay que listar explícitamente las páginas deseadas, y no es necesario listar las páginas no deseadas (a menos que se hayan incluido previamente).

+

Añadamos, pues, una etiqueta <include> para referenciar la página de Spread Firefox:

+
<?xml version="1.0" encoding="ISO-8859-1"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="Conteo de descargas de Firefox">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> descargas de Fx</text>
+      </template>
+    </transform>
+  </template>
+  <pages>
+    <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
+  </pages>
+</generator>
+
+

Nótese que la dirección incluida ha de estar escrita como expresión regular.

+

Publicar el generador para ser descargado

+

Ahora que el generador está definido y tiene una dirección de aplicación especificada, lo único que queda por hacer es publicarlo para su descarga: Para ello, hay que subirlo a la web y crear en algún lado un enlace de JavaScript que llame al método de FireFox window.sidebar.addMicrosummaryGenerator(), que se encarga de descargar e instalar el generador.

+

Por ejemplo: Si publicamos el generador en la web en http://people.mozilla.com/~myk/micro...-generator.xml, y queremos que los usuarios lo puedan descargar desde http://people.mozilla.com/~myk/micro...ial/index.html, tendremos que añadir el siguiente código a dicha página index.html:

+
<a href="javascript:window.sidebar.addMicrosummaryGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">Instalar el microresumen de Spread Firefox</a>
+
+

Al pinchar en tal link se producirá un error JavaScript en los navegadores que no soporten microresúmenes, así es que para evitarlo lo mejor es comprobar a priori si el navegador actual soporta microresúmenes, y mostrar un mensaje aclaratorio en caso contrario:

+
<script>
+  const warning = "Se siente: Para descargar e instalar generadores de microresúmenes se necesita un navegador ad hoc, como Firefox 2.0.";
+  function addGenerator(url) {
+    if (typeof window.sidebar == "object" &&
+        typeof window.sidebar.addMicrosummaryGenerator == "function")
+      window.sidebar.addMicrosummaryGenerator(url);
+    else
+     alert(warning);
+  }
+</script>
+<a href="javascript:window.sidebar.addMicrosummaryGenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">Instalar el microresumen de Spread Firefox</a>
+
+

Conclusión

+

Ya debemos tener un generador de microresúmenes que muestra el nùmero actual de descargas de Firefox. Tras instalarlo, añadir a los Marcadores la página Spread Firefox, y seleccionar el microresumen del menú Summary en el cuadro de diálogo de "Añadir marcador".

+

Para más información sobre microresúmenes, ver la página de Microresúmenes

diff --git a/files/es/compilar_e_instalar/index.html b/files/es/compilar_e_instalar/index.html new file mode 100644 index 0000000000..a2c051d7d0 --- /dev/null +++ b/files/es/compilar_e_instalar/index.html @@ -0,0 +1,72 @@ +--- +title: Compilar e instalar +slug: Compilar_e_instalar +tags: + - Documentación_de_compilado +translation_of: Mozilla/Developer_guide/Build_Instructions +--- +

NOTE: Do not make substantive changes to this document without consulting Benjamin Smedberg <benjamin@smedbergs.us> or one of the build-config peers.

+
+ NOTA: No comience a compilar sin antes configurar las opciones de compilación!
+

Compilando

+

Debes usar GNU make para verificar y compilar Mozilla, no se acepta otro programa "make". En Windows, Mac OS X, y GNU/Linux usa "make" para ejecutar GNU make; en la mayoría de los unix-no GNU debes usar "gmake".

+

Una vez que verificaste el código, asegúrate de configurar la aplicación como se describe en las opciones de configuración.

+

Para Windows, Mac OS X, y GNU/Linux, asegúrate de estar en el nivel superior del directorio fuente ("mozilla") cuando llames el comando make:

+
$ make -f client.mk build
+
+

Para la mayoría de los unix no-GNU:

+
$ gmake -f client.mk build
+
+

Si quieres configurar y compilar de forma manual, cd a tu objdir, ejecuta el programa de configuración, y luego ejecuta make/gmake. El programa de configuración tomará las opciones de tu archivo .mozconfig.

+

Ejecutando tu compilación nueva

+

Es posible ejecutar la compilación nueva directamente desde el directorio en donde fue creada. De todas formas, el directorio de compilación tal vez contenga symlinks dentro del árbol; debes ejecutar la instalación/packaging para generar una compilación que puede ser movida o compartida.

+

Windows y Linux

+

En sistemas no-macintosh, el producto final se puede hallar en objdir/dist/bin. En plataformas POSIX (BDS, GNU/LINUX, Solaris), debes ejecutar el archivo "mozilla" o "firefox", no el binario "mozilla-bin" o "firefox-bin".

+

Mac OS X

+

En Macintosh, el sistema de compilado genera una aplicación en objdir/dist/AppName.app por ejemplo, objdir/dist/Minefield.app.

+

Fijate que cuando compilas con --enable-debug, la aplicación se ubica en objdir/dist/AppNameDebug.app, por ejemplo objdir/dist/MinefieldDebug.app.

+

Puedes ejecutar la aplicación, ya sea abriendo la aplicación via Finder o con la línea de comando:

+
$ objdir/dist/AppName[Debug].app/Contents/MacOS/appname
+
+

Para el ejemplo:

+
$ objdir/dist/MinefieldDebug.app/Contents/MacOS/firefox
+
+

Instalando tu compilación

+

En plataformas POSIX, puedes instalar ejecutando gmake install. Pero es mejor que sigas los pasos siguientes para crear un tar, luego descomprime el tar.

+

Para la mayoria de las aplicaciones, crea el tar dentro del directorio específico de la aplicación:

+ +

Ejemplo real: Si usas un .mozconfig Firefox estático optimizado

+ +

Esto generará un archivo firefox-2.0.0.3.en-US.linux-i686.tar.gz dentro del directorio ff-opt-static/dist, el cual puedes descomprimir donde desees.

+

Para hacer un instalador para Windows, crea el destino del instalador en el directorio superior

+ +

NOTA: Para crear el instalador lo más comprimido posible, para Firefox y Thunderbird con el sistema basado en Cygwin, debes instalar algunos programas adicionales.

+ +

Ambos programas se deben encontrar en el PATH. También MOZ_INSTALLER_USE_7ZIP debe ser exportado a tu entorno. Si usas el sistema MozillaBuild, ambos se instalarán automaticamente.

+

 

+
+

Información del documento

+ +

Información sobre el documento original

+ +
+

{{ languages( { "en": "en/Build_and_Install", "fr": "fr/Compilation_et_installation", "ja": "ja/Build_and_Install", "zh-cn": "cn/\u7f16\u8bd1\u4e0e\u5b89\u88c5" } ) }}

diff --git a/files/es/components.utils.import/index.html b/files/es/components.utils.import/index.html new file mode 100644 index 0000000000..66f32f06e1 --- /dev/null +++ b/files/es/components.utils.import/index.html @@ -0,0 +1,62 @@ +--- +title: Components.utils.import +slug: Components.utils.import +tags: + - NeedsContent + - XPConnect + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.import +--- +

+ +

Este método fue introducido en Firefox 3 y es usado para compartir código entre diferentes alcances(scopes) de forma sencilla. Por ejemplo, puedes importar XPCOMUtils.jsm para evitar copiar y pegar grandes porciones comunes de código de registración de componentes XPCOM en tus archivos de compomentes.

+ +
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+ +

Para documentación mira Usando módulos de código JavaScript.

+ +

Diferencias con mozIJSSubScriptLoader

+ +

Las diferencias con mozIJSSubScriptLoader son:

+ + + +

Recursos Adicionales

+ + diff --git a/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html b/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html new file mode 100644 index 0000000000..782c328151 --- /dev/null +++ b/files/es/configurar_correctamente_los_tipos_mime_del_servidor/index.html @@ -0,0 +1,81 @@ +--- +title: Configurar correctamente los tipos MIME del servidor +slug: Configurar_correctamente_los_tipos_MIME_del_servidor +tags: + - Desarrollo_Web + - Estándares_Web + - Seguridad + - Todas_las_Categorías +translation_of: Learn/Server-side/Configuring_server_MIME_types +--- +

+

+

Introduccion

+

Por omisión, muchos servidores web estan configurados para reportar un tipo MIME de texto/plano ó aplicacion/de fuente de octeto para tipos de contenidos desconocidos. A medida son desarrollados nuevos tipos de contenidos, los administradores de red pueden equivocarse al añadirlos a la configuración del servidor web, y esta es la principal causa de problemas para usuarios de navegadores basados en Gecko, el cual respeta los tipos MIME tal y como son reportados por los servidores y las aplicaciones web. +

+

¿Que son los tipos de MIME?

+

Los tipos de MIME describen el tipo de medio del contenido, sea del correo electrónico o el utilizado en los servidores o aplicaciones web, y tiene como proposito ayudar a guiar al navegador web acerca de como ha de ser procesado y mostrado el contenido. Ejemplos de tipos de MIME son: +

+ +

Información Técnica

+

MIME está actualmente definida en RFCs 2045, 2046, 2047, 2048, y 2049 y los valores registrados para los tipos MIME estan disponibles en IANA | MIME Media Types. La HTTP specification define un superconjunto de MIME el cual es utilizado para describir los tipos de medios usados en la red. +

+

¿Por qué son importantes los tipos correctos de MIME?

+

Example of an incorrect MIME type result +Si el servidor de red o la aplicación informan un tipo incorrecto de MIME para el contenido, un navegador de red no tiene forma de saberlo, de acuerdo a la especificación HTTP, más si tenemos en cuenta que el autor especificó el contenido para ser procesado y mostrado en una forma diferente que la impuesta por el tipo MIME informado. +

Otros navegadores de red, tal como el Microsoft® Internet Explorer, intentan determinar el tipo adecuado de MIME en servidores mal configurados, suponiendo el tipo adecuado de MIME que debería ser. Esto protege a muchos administradores de red de sus propios errores, pues el Internet Explorer continúa procesando el contenido aunque, por ejemplo, una imagen haya sido informada como texto plano. +

+

¿Por qué los navegadores no deberían suponer tipos MIME?

+

A parte de la violación de la especificación HTTP, es una mala estrategia para los navegadores suponer tipos MIME por las siguientes razones: +

+

Pérdida del control

+

Si el navegador ignora el tipo MIME reportado, los administradores de red y los autores dejarán de tener el control sobre cómo sus contenidos serán procesados. +

Por ejemplo, un sitio de red orientado para desarrolladores de red puede enviar determinados ejemplos de documentos HTML como enteros text/html ó como text/plain para lograr documentos con enteros procesados y motrados como HTML ó como código fuente. Si el navegador supone el tipo MIME, esta posibilidad dejará de estar disponible para el autor. +

+

Seguridad

+

Algunos tipos de contenidos, tales como programas ejecutables, son inherentemente inseguros. Por este motivo, esos tipos MIME son generalmente restringidos en términos de qué acciones tomará el navegador de red al recibirlos. Por ejemplo, un programa ejecutable no debería ser ejecutado en la computadora de un usuario, y en su lugar debería aparecer un cuadro de diálogo para preguntar al usuario si desea descargar el archivo. +

La suposición de tipos MIME ha llevado a fallas de seguridad en Internet Explorer, debido a autores maliciosos que reportaban el tipo MIME de un archivo peligroso como si fuera uno seguro, evitando así el cuadro de diálogo de descarga normal. El Internet Explorer suponía entonces que se trataba de un programa ejecutable y los corría en la computadora del usuario. +

+

Cómo determinar el tipo MIME enviado a un servidor

+

En Firefox, cargar el archivo y usar Herramientas | Información de página. Puede también usar Rex Swain's HTTP Viewer ó Live HTTP Headers para ver los encabezados completos y contenido de cualquier archivo enviado desde un servidor de red. +

De acuerdo a los estándares, una meta etiqueta que brinda el tipo MIME tal como <meta http-equiv="Content-Type" content="text/html"> debería ser ignorado si hay una Content-Type línea en el encabezado. En vez de buscar esta línea en la fuente HTML, use las técnicas anteriores para determinar el tipo MIME enviado por un servidor. +

+

Cómo determinar el tipo correcto de MIME para su contenido

+

Hay ciertos pasos los cuales pueden llevar a derminar el correcto tipo de valor MIME a ser usado para su contenido. +

+
  1. Si su contenido fue creado usando la aplicación de software del vendedor, lea la documentación del vendedor para ver qué tipos MIME debería n ser informados para los diferentes tipos de medios. +
  2. Mire en el IANA | Registro de Tipos de medios MIME que contiene todos los tipos MIME registrados. +
  3. Si el tipo de medio es mostrado usando un plug-in en Netscape Gecko, instale el plug-in y luego mire en Ayuda->Acerca en le Menú Plug-in para ver qué tipos MIME están asociados con el tipo de medio. +
  4. Buscar la extensión del archivo en FILExt para ver qué tipos MIME están asociados con esa expresión. +
+

Cómo configurar su servidor para enviar los tipos MIME correctos

+ +

Enlaces Relacionados

+ +
+

Información del Documento Original

+ +
+{{ languages( { "en": "en/Properly_Configuring_Server_MIME_Types" } ) }} diff --git a/files/es/consola_de_errores/index.html b/files/es/consola_de_errores/index.html new file mode 100644 index 0000000000..24db971c23 --- /dev/null +++ b/files/es/consola_de_errores/index.html @@ -0,0 +1,77 @@ +--- +title: Consola de errores +slug: Consola_de_errores +tags: + - Desarrollo web + - 'Desarrollo_Web:Herramientas' + - 'Extensiones:Herramientas' + - Herramientas + - JavaScript + - 'JavaScript:Herramientas' + - extensiones + - para_revisar +translation_of: Archive/Mozilla/Error_console +--- +

 

+

La Consola de errores es una herramienta disponible en la mayoría de las aplicaciones basadas en Mozilla que se utiliza para informar de errores en el chrome de la aplicación y en las páginas web que abre el usuario. En ella se informa sobre errores y avisos relacionados con JavaScript, errores de CSS y mensajes arbitrarios procedentes del código de chrome.  En Firefox, la Consola de errores se puede abrir desde el menú Herramientas o presionando Ctrl-Shift-J.

+
+

+Gecko 2.0 note +
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
+

+

La Consola de errores está deshabilitada de manera predeterminada en Firefox 4. Puedes volver a habilitarla cambiando la preferencia devtools.errorconsole.enabled a true y reiniciando el navegador.

+
+

Para obtener información sobre qué excepciones JavaScript se registran en la Consola de errores y cómo hacer que todas las excepciones se registren también, lee el artículo Excepción al iniciar sesión en JavaScript . Consulta Configuración del entorno de desarrollo de extensiones#Preferencias de desarrollo para conocer las preferencias que se deben establecer si se desea ver los errores de Firefox y las extensiones de la Consola de errores.

+

Antes de Gecko 1.8.1 (Firefox 2), se llamaba Consola JavaScript (ver error 265.871).

+ + + + + + + +
+

Tipos de errores

+
+
+ Error
+
+ suele ser un error de sintaxis que evita que el programa se compile.
+
+
+
+ Advertencia
+
+ por lo general permite que el programa se compile, pero advierte sobre una mala codificación y sugiere fallas de diseño.
+
+
+
+ Mensaje
+
+ muy similar a la advertencia, se utiliza muy poco.
+
+

Manipulación de los datos mostrados en la Consola de errores

+

A través del servicio de la Consola se puede acceder a la información que se muestra en la Consola de errores y manipularla.

+

Las extensiones pueden escribir en la Consola de errores desde JavaScript utilizando Components.utils.reportError, o si te sientes cómodo con el registro en la consola que proporciona el sistema operativo, dump().

+

Para abrir la Consola de errores dentro de una ventana del navegador o del correo, utiliza la función toJavaScriptConsole() .

+ 		+

Alternativas

+
+
+ Consola 2
+
+ Esta extensión proporciona un sustituto para la Consola de errores, corrigiendo muchos de sus errores e implementando solicitudes de mejora que se pedían desde hacía tiempo.
+
+
+
+ Firebug
+
+ La extensión para Firefox también integra la Consola de errores con varias mejoras .
+
+ +
+
+ JavaScript , CSS , Desarrollo we
+
+
+

 

diff --git "a/files/es/control_de_la_correcci\303\263n_ortogr\303\241fica_en_formularios_html/index.html" "b/files/es/control_de_la_correcci\303\263n_ortogr\303\241fica_en_formularios_html/index.html" new file mode 100644 index 0000000000..5a5e049233 --- /dev/null +++ "b/files/es/control_de_la_correcci\303\263n_ortogr\303\241fica_en_formularios_html/index.html" @@ -0,0 +1,72 @@ +--- +title: Control de la corrección ortográfica en formularios HTML +slug: Control_de_la_corrección_ortográfica_en_formularios_HTML +tags: + - Desarrollo_Web + - Gestión de configuración + - HTML + - Intermedio + - Todas_las_Categorías + - XHTML +translation_of: Web/HTML/Global_attributes/spellcheck +--- +

{{ gecko_minversion_header("1.8.1") }} Firefox 2 incorpora un corrector ortográfico para las áreas y los campos de texto de los formularios web. Usando la interfaz "about:config" el usuario puede activar o desactivar el corrector, además, puede indicar si desea o no habilitar la corrección ortográfica y si debe habilitarse para áreas y campos de texto o sólo en áreas de texto.

+ +

Por defecto, se comprueban las áreas de texto y los documentos en designMode, pero los campos de texto no. Esto se debe a que sería una distracción para los usuarios si Firefox marca cosas como el ID de usuario y direcciones de correo electrónico como errores.

+ +

Sin embargo, puede haber situaciones en las que este comportamiento no sea el más apropiado. Por ejemplo, si un área de texto va a ser usada para editar código HTML, u otro tipo de datos que no sean texto simple, el corrector ortográfico puede resultar un estorbo en vez de una ayuda. También puede haber casos en los que un sitio quiera recomendarle a Firefox que active la corrección ortográfica en un campo de texto específico; por ejemplo, para los cuadros de búsqueda y los campos de asunto del correo electrónico.

+ +

Si un sitio web desea recomendar si usar o no la corrección ortográfica para un elemento <input type="text"> concreto, se puede usar el atributo spellcheck, especificando el valor true para recomendar la activación del corrector, o false para desaconsejarla.

+ +

Ten en cuenta que la recomendación del sitio puede ser ignorado si el usuario ha desactivado la corrección ortográfica en su totalidad fijando layout.spellcheckDefault a "0". Si layout.spellcheckDefault tiene cualquier otro valor, el recomendaciones se tienen en cuenta.

+ +

Por ejemplo, el siguiente código HTML recomienda el uso del corrector en un campo de texto simple:

+ +
<input type="text" size="50" spellcheck="true">
+
+ +

Del mismo modo, se puede desaconsejar la corrección en un área de texto con un código HTML como este:

+ +
<textarea spellcheck="false"></textarea>
+
+ +

Se puede controlar un documento en designMode (habitualmente usado para la edición de texto enriquecido), poniendo el atributo spellcheck en la etiqueta <body> de los documentos. N.T. Esto del designMode no me gusta

+ +

También se puede usar el atributo spellcheck en otros elementos, como en los elementos <span> o <div>, en tal caso, cualquier elemento <input> contenido por estos elementos heredará ese atributo. Los elementos <input> que no tengan un atributo spellcheck lo heredarán de sus padres, y si estos tampoco lo tienen, se aplicará la configuración por defecto.

+ +

Por ejemplo:

+ +
<div spellcheck="true">
+  <label>Escribe una oración: </label><input type="text" size="50">
+  <br>
+  <label>Escriba otra: </label><input type="text" size="50">
+</div>
+<br>
+<label>Escriba una tercera: </label><input type="text" size="50">
+
+ +

En este fragmento de código HTML, los dos primeros campos de texto se comprueban mientras que el tercero no.

+ +

{{ h1_gecko_minversion("Controlar el idioma del corrector ortográfico", "9.0") }}

+ +

A partir de Gecko 9.0 {{ geckoRelease("9.0") }}, el corrector ortográfico utiliza un elemento {{ HTMLElement("input") }} con atributo {{ htmlattrxref("lang", "input") }} para determinar el idioma predeterminado del corrector ortográfico. Si {{ HTMLElement("input") }} no tiene atributo lang, el atributo se busca en cada elemento padre sucesivamente y hacia arriba, hacia el nodo raíz hasta encontrar uno.

+ +

De esta manera, si un usuario tiene a la vez instalados los diccionarios Frances e Ingles, y un elemento editable tiene lang="en", el diccionario Inglés se utilizará automáticamente para ese elemento.

+ +

Por ejemplo:

+ +
<html lang="en">
+<body>
+  <textarea></textarea>
+  <textarea lang="fr"></textarea>
+  <div lang="ru">
+    <textarea></textarea>
+  </div>
+</body>
+</html>
+
+-- + +

En este fragmento de código HTML, el primer {{ HTMLElement("textarea") }} será revisado en Inglés, el segundo en Francés, y el tercero en Ruso. + +

Si un elemento especifica un idioma, y el usuario no tiene instalado el diccionario para ese idioma, corrector ortográfico estrá desactivado por defecto, aunque el usuario puede elegir activarlo de forma manual.

diff --git a/files/es/creacion_de_plugins_opensearch_para_firefox/index.html b/files/es/creacion_de_plugins_opensearch_para_firefox/index.html new file mode 100644 index 0000000000..12c71b6c03 --- /dev/null +++ b/files/es/creacion_de_plugins_opensearch_para_firefox/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 +--- +

 

+

OpenSearch

+

Firefox 2 admite el formato de descripción OpenSearch para complementos (plugins) de búsqueda. Aquellos complementos que usen la sintaxis OpenSearch son compatibles con Firefox e Internet Explorer 7. Por ello es el formato recomendado para cualquier nuevo desarrollo.

+

Firefox admite además capacidades de búsqueda adicionales no incluidas en la sintaxis de descripción OpenSearch, tales como las "sugerencias de búsqueda" y el elemento SearchForm. Este artículo se centrará en la creación de complementos compatibles con OpenSearch que empleen estas capacidades adicionales de Firefox.

+

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 Detección automática de motores de búsqueda.

+

Por último, estos complementos, pueden ser instalados mediante código tal y como se describe en Añadir motores de búsqueda desde páginas web.

+

El fichero de descripción OpenSearch

+

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.

+
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
+                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
+<ShortName>engineName</ShortName>
+<Description>engineDescription</Description>
+<InputEncoding>inputEncoding</InputEncoding>
+<Image width="16" height="16">data:image/x-icon;base64,imageData</Image>
+<Url type="text/html" method="method" template="searchURL">
+  <Param name="paramName1" value="paramValue1"/>
+  ...
+  <Param name="paramNameN" value="paramValueN"/>
+</Url>
+<Url type="application/x-suggestions+json" template="suggestionURL"/>
+<moz:SearchForm>searchFormURL</moz:SearchForm>
+</OpenSearchDescription>
+
+
+
+ ShortName
+
+ Nombre corto para el motor de búsqueda.
+
+
+
+ Description
+
+ Descripción del motor de búsqueda.
+
+
+
+ InputEncoding
+
+ Codificación de caracteres a emplear en los datos que se envían al motor de búsqueda. Por ejemplo, "UTF-8".
+
+
+
+ Image
+
+ Icono de 16x16 codificado en Base-64 que represente al motor de búsqueda. Puedes encontrar una utilidad para generar estos datos en: The data: URI kitchen.
+
+
+
+ Url
+
+ Describe la(s) URL(s) a emplear para la búsqueda. El atributo method indica si se debe emplear una petición GET o POST para obtener los resultados.
+
+
+
+
+ Nota: Internet Explorer 7 no admite peticiones POST.
+
+
+
+
+ Firefox admite dos tipos de URL en el campo type:
+
+ +
+
+ El atributo template 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 {searchTerms}, la cual se expande a los términos de búsqueda introducidos por el usuario en la barra de búsquedas. En OpenSearch 1.1 parameters se describen los otros tipos admitidos.
+
+
+
+ Para consultas que devuelven sugerencias de búsqueda, la URL descrita en template 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 Permitir sugerencias en los plugins de búsqueda.
+
+

Image:SearchSuggestionSample.png

+
+
+ Param
+
+ 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 {searchTerms} para insertar los términos de búsqueda que el usuario introdujo en la barra de búsquedas.
+
+
+
+
+ Nota: Internet Explorer 7 no admite este elemento.
+
+
+
+
+ SearchForm
+
+ 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.
+
+
+ Nota: 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 "moz:" en el espacio de nombres XML para asegurarnos que otros agentes de usuario que no admiten este elemento puedan ignoralo de forma segura.
+
+
+

Detección automática de complementos de búsqueda

+

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.

+

Para incorporar la detección automática, sólo es necesario añadir una línea a la sección <head> de la página:

+
<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">
+
+

Sustituiremos los elementos en itálica tal y como se explica a continuación:

+
+
+ searchTitle
+
+ 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 ShortName de nuestro complemento.
+
+
+
+ pluginURL
+
+ La URL que debe emplear el navegador para descargar el fichero XML con la descripción del complemento.
+
+

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 link las veces que sea necesario. Por ejemplo:

+
<link rel="search" type="application/opensearchdescription+xml" title="MiSitio: Por Autor" href="http://www.misitio.com/autores.xml">
+<link rel="search" type="application/opensearchdescription+xml" title="MiSitio: Por Título" href="http://www.misitio.com/titulos.xml">
+
+

De esta forma podemos ofrecer complementos independientes para buscar tanto por autor como por título.

+

Resolución de problemas

+

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.

+ +

Adicionalmente, el servicio de complementos de búsqueda suministra un mecanismo de registro (logging) que puede ser de utilidad a los desarrolladores de complementos. Usa about:config para establecer la preferencia 'browser.search.log' al valor true. 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.

+

Material de referencia

+ +

Interwiki link

+

{{ 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" } ) }}

diff --git "a/files/es/creaci\303\263n_de_componentes_xpcom/index.html" "b/files/es/creaci\303\263n_de_componentes_xpcom/index.html" new file mode 100644 index 0000000000..036df7b989 --- /dev/null +++ "b/files/es/creaci\303\263n_de_componentes_xpcom/index.html" @@ -0,0 +1,274 @@ +--- +title: Creación de Componentes XPCOM +slug: Creación_de_Componentes_XPCOM +tags: + - Todas_las_Categorías + - XPCOM + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components +--- +

+

Siguiente »

+

+ +

Prefacio

+ +
+
Quién debe leer este libro
+
Organización del tutorial
+
Continuando con los ejemplos
+
Convenciones
+
Agradecimientos
+
+ +

Un vistazo a XPCOM

+ +
+
La Solución XPCOM
+
Gecko
+
Componentes
+
Interfaces +
+
Interfaces y encapsulamiento
+
La interfaz base nsISupports
+
+
+
Identificadores XPCOM +
+
CID
+
Contract ID
+
+
+
Factorías +
+
XPIDL y bibliotecas de tipos
+
+
+
Servicios de XPCOM
+
Tipos de XPCOM +
+
Tipos de métodos
+
Cuenta de referencias
+
Códigos de estatus
+
Correlaciones variables
+
Códigos de errores comunes de XPCOM
+
+
+
+ +

Uso de componentes XPCOM

+ +
+
Ejemplos de componentes + +
+
Manejador de cookies
+
El componente WebBrowserFind
+
El componente WebLock
+
+
+
Uso de componentes en Mozilla +
+
Localizar los componentes de Mozilla
+
Usar componentes XPCOM en tu CPP
+
XPConnect: Usar componentes XPCOM desde un Script
+
+
+
+ +

Interior del Componente

+ +
+
Creación de componentes en C++
+
Inicio de XPCOM +
+
Registro de manifiestos de XPCOM
+
Métodos de registro en XPCOM
+
Autoregistro
+
El proceso de paro
+
Tres partes de una biblioteca de componentes XPCOM
+
+
+
XPCOM Glue +
+
La biblioteca Glue
+
Clases de cadenas de XPCOM
+
+
+
+ +

Creación del código del componente

+ +
+
En lo que trabajaremos
+
Registro de componentes +
+
El Programa regxpcom
+
Alternativas de registro
+
+
+
Vistazo del código fuente del módulo WebLock
+
Adentrándonos: inclusiones y constantes requeridas +
+
Identificadores en XPCOM
+
Programando el proceso de registro
+
Métodos de Registro
+
Creación de una instancia del componente
+
+
+
webLock1.cpp
+
+ +

Usar utilidades de XPCOM para facilitar el proceso

+ +
+
Macros XPCOM + +
+
Macros de módulos XPCOM genéricos
+
Macros comunes de implementación
+
Macros de declaración
+
+
+
webLock2.cpp
+
Clases de cadenas en XPCOM +
+
Implementando cadenas
+
nsEmbedString y nsEmbedCString
+
+
+
Punteros inteligentes
+
+ +

Iniciando WebLock

+ +
+
Llamado al arrancar + +
+
Registro para notificaciones
+
Obtener acceso al manejador de categorías
+
+
+
Suministro de acceso a WebLock
+
Crear la interfaz de programación WebLock
+
Definir la interfaz WebLock en XPIDL +
+
Sintaxis XPIDL
+
Interfaces programables
+
Subclasificar nsISupports
+
Interfaz Web Locking
+
+
+
Implementación de WebLock +
+
Macros de Declaración
+
Representación de Valores Devueltos en XPCOM
+
Generación del Código XPIDL
+
Obtención del Servicio WebLock Service desde un Cliente
+
Implementación de la Interfaz iWebLock
+
El Servicio Directorios
+
Modificar Rutas con nsIFile
+
Manipulación de Archivos con nsIFile
+
Usar nsILocalFile para leer información
+
Processing the White List Data
+
+
+
iWebLock método por método +
+
Lock y Unlock
+
AddSite
+
RemoveSite
+
SetSites
+
GetNext
+
GetSites
+
HasMoreElements
+
+
+
+ +

Finishing the Component

+ +
+
Using Frozen Interfaces + +
+
Copying Interfaces Into Your Build Environment
+
Implementing the nsIContentPolicy Interface
+
Receiving Notifications
+
+
+
Implementing the nsIContentPolicy +
+
Uniform Resource Locators
+
Checking the White List
+
Creating nsIURI Objects
+
+
+
+ +

Building the WebLock UI

+ +
+
User Interface Package List
+
Client Code Overview
+
XUL +
+
The XUL Document
+
The Locking UI
+
Site Adding UI
+
weblock.xul
+
+
+
Overlaying New User Interface Into Mozilla +
+
webLockOverlay.xul
+
+
+
Other Resources +
+
weblock.css
+
Image Resources
+
+
+
+ +

Packaging WebLock

+ +
+
Component Installation Overview
+
Archiving Resources
+
The WebLock Installation Script
+
The WebLock Trigger Script
+
Distributing Your Component
+
+ +

Appendix A - Setting up the Gecko SDK

+ +
+
Downloading and Setting the SDK
+
Building a Microsoft Visual Cpp Project +
+
Creating a New Project
+
Adding the Gecko SDK to the Project Settings
+
+
+
A Makefile for Unix
+
+ +

Appendix B - Resources

+ +
+
WebLock Resources
+
Gecko Resources
+
XPCOM Resources
+
General Development Resources
+
+ +

+

Siguiente »

+

+ +
+

Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.

+
diff --git "a/files/es/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" "b/files/es/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" new file mode 100644 index 0000000000..e69797653b --- /dev/null +++ "b/files/es/creaci\303\263n_de_componentes_xpcom/interior_del_componente/index.html" @@ -0,0 +1,216 @@ +--- +title: Interior del Componente +slug: Creación_de_Componentes_XPCOM/Interior_del_Componente +tags: + - Todas_las_Categorías + - XPCOM +--- +

+

« AnteriorSiguiente »

+
En el capítulo anterior describimos los componentes desde una perspectiva de un cliente de los componentes XPCOM, en este capútulo abordamos los componentes desde la perspectiva del desarrollador del programa. Léelo para ver como se implementan generalmente los componentes en XPCOM, o puedes brincarte al siguiente capítulo, donde el tutorial del componente WebLock te lleva paso a paso através del proceso de creación del componente. XXX mediawiki...XXX sucks

+ +

Creación de Componentes en C++

+ +

Empecemos por examinar como se escriben en C++ los componentes XPCOM. El tipo más común de componente es el escrito en C++ y compilado en una biblioteca compartida (una DLL en un sistema Windows o una DSO en Unix).

+ +

La imagen de abajo muestra la relación básica entre una biblioteca que contiene la implementación del código del componente que escribiste y la plataforma XPCOM en sí misma. En este diagrama, la superficie más externa del módulo es la biblioteca compartida en la que se define un componente.

+ +

Un Componente en la Plataforma XPCOM

+ +

Image:component-internals-framework.png

+ +

Cuando construyes un componente o un módulo y lo compilas dentro de una biblioteca, debe exportar un método llamado NSGetModule. Esta función NSGetModule es el punto de acceso a la biblioteca. Es llamado durante el registro y el desregistro del componente y cuando XPCOM quiere descubrir qué interfaces o clases implementa el módulo/biblioteca. En este capítulo abordaremos todo este proceso.

+ +

Como ilustra Un Componente en la Plataforma XPCOM, además del punto de acceso NSGetModule, están las interfaces nsIModule y nsIFactory que controlan la creación actual del componente y también las partes XPCOM glue y cadenas, que discutiremos un poco a detalle en la siguiente sección (Ve XPCOM Glue). Estas nos darán utilidades para desarrollo fácil más adelante como son punteros inteligentes, soporte de módulos genéricos e implementaciones simples de cadenas. La parte más larga y posiblemente la más compleja de un componente es el código específico del componente en sí mismo.

+ +
+

¿Pero Dónde Están los Componentes?

+ +

Los componentes residen en módulos y esos módulos son definidos en bibliotecas compartidas típicamente situadas en el directoriocomponents de una aplicación XPCOM.

+ +

Un conjunto de bibliotecas son almacenadas por defecto en este directorio components es lo que hay en una típica instalación de Gecko, dando la funcionalidad que consiste en trabajo en red, layout, composición, una interfaz de usuario multiplataforma y otros.

+ +

Otra vista aún más básica de esta relación de componentes a archivos e interfaces que los definen se muestra en Vista de Papel Cebolla de la creación del Componente XPCOM en el próximo capítulo. El componente es una abstracción situada entre el módulo actual en el que se implementa y los objetos que el código de su factoría crea para que uso de los clientes.

+
+ +

Inicialización de XPCOM

+ +

Para entender porqué y cuándo tu biblioteca de componentes es llamada, es importante entender el proceso de inicialización de XPCOM. Cuando inicia una aplicación, la aplicación puedeinicializar XPCOM. La secuencia de eventos que lanza esta inicialización de XPCOM pueden ser lanzados por una ccioón del usuario o por el inicio de la aplicación en sí misma. Un buscador web que tiene embebido Gecko, por ejemplo, puede inicializar XPCOM al inicio atravéz de APIs embebidas. Otra aplicación puede este inicio hasta que XPCOM se necesite por primera vez. En otro caso, la secuencia de inicialización dentro de XPCOM es la misma.

+ +

XPCOM inicia cuando la aplicación hace una llamada para inicializarlo. Los parámetros pasados a esta llamada de inicialización te permiten configurar algunos aspectos de XPCOM, incluyendo la personalización de la ubicación de directorios específicos. El propósito principal del API en este punto es cambiar que directoriocomponents inspecciona cuando busca componentes XPCOM. Así es como se usa el API, por ejemplo, en elGecko Runtime Environment (GRE).

+ +
+

Inicialización de XPCOM

+ +

Los seis pasos básicos para arrancar XPCOM son los siguientes:

+ +
    +
  1. La aplicación inicia XPCOM.
    2. +
  2. XPCOM envía una notificación que inicia el arranque.
    3. +
  3. XPCOM encuentra y procesa elmanifiesto del componente (ve Manifiestos de Componentes abajo).
    4. +
  4. Si hay nuevos componentes, XPCOM los registra: +
      +
    1. XPCOM llama el arranque del autoregistro.
      2. +
    2. XPCOM registra los nuevos componentes.
      3. +
    3. XPCOM llama el fin del autoregistro.
      4. +
    +
    5. +
  5. Arranque completo de XPCOM: XPCOM notifica que ha iniciado.
    6. +
+ +

Los manifiestos de Componentes y bibliotecas de tipos son descritos en la siguiente sección, Registro de Manifiestos de XPCOM.

+
+ +

Registro de Manifiestos de XPCOM

+ +

XPCOM usa archivos especiales llamados manifiestos para cambiar y guardar información acerca de los componentes en el sistema local. Hay dos tipos de manifiestos que usa XPCOM para cambiar componentes:

+ +
Manifiestos de Componente
+ +

Cuando XPCOM inicia por primera vez, busca elmanifiesto de componentes que es un archivo que lista todos los componentes registrados y guarda detalles de lo que exactamente puede hacer cada componente. XPCOM usa el manifiesto de componentes para determinar que componentes han sido sobreescritos. Empezando en Mozilla 1.2, este archivo es llamado compreg.dat y existe en el directoriocomponents, pero hay esfuerzos por moverlo fuera de esta ubicación a una ubicación menos centrada en la aplicación y más centrada en el usuario. Cualquier aplicación bassada en Gecko puede escoger ponerlo en otro lado. XPCOM lee este archivo dentro de una base de datos en memoria.

+ +
+

Manifiestos de Componentes

+ +

El manifiesto de componente es una correlación de archivos a componentes y de componentes a clases. Especifica la siguiente información:

+ + + +

El manifiesto del componente relaciona archivos de componentes a identificadores únicos para las implementaciones específicas (IDs de Clase), que en su momento son relacionados a identificadores de componente más generales (contract IDs).

+
+ +
Manifiestos de Bibliotecas de Tipos
+ +

Otro archivo importante que lee XPCOM es elmanifiesto de bibliotecas de tipos. Este archivo tambien se localiza en el directoriocomponents y se llama xpti.dat. Incluye la ubicación y direcciones de búsqueda de todas las bibliotecas de tipos en el sistema. este archivo también lista todas las interfaces conocidas y enlaces a los archivos de bibliotecas de tipos que definen estas estructuras de interfaces. Estos archivos de bibliotecas de tipos son el core para que XPCOM pueda ser script y de la arquitectura de componentes binarios de XPCOM.

+ +
+

Manifiestos de Bibliotecas de Tipos Los manifiestos de bibliotecas de tipos contienen la siguiente información:

+ + +
+ +

Using the data in these two manifests, XPCOM knows exactly which component libraries have been installed and what implementations go with which interfaces. Additionally, it relates the components to the type libraries in which the binary representations of the interfaces they support are defined.

+ +

The next section describes how to hook into the XPCOM startup and registration process and make the data about your component available in these manifests, so that your component will be found and registered at startup.

+ +

Métodos de Registro en XPCOM

+ +
+

What Is XPCOM Registration?

+ +

In a nutshell, registration is the process that makes XPCOM aware of your component(s). As this section and the next describe, you can register your component explicitly during installation, or with the regxpcom program, or you can use the autoregistration methods in the Service Manager to find and register components in a specified components directory:

+ + + +

The registration process is fairly involved. This section introduces it in terms of XPCOM initialization, and the next chapter describes what you have to do in your component code to register your component with XPCOM.

+
+ +

Once the manifest files are read in, XPCOM checks to see if there are any components that need to be registered. There are two supported ways to go about registering your XPCOM component. The first is to useXPInstall, which is an installation technology that may or may not come with a Gecko application and provides interfaces for registering your component during installation. Another, more explicit way to register your component is to run the application regxpcom, which is built as part of Mozilla and is also available in the Gecko SDK. regxpcom registers your component in the default component registry.

+ +

A Gecko embedding application may also provide its own way of registering XPCOM components using the interface that is in fact used by both XPInstall and regxpcom, nsIComponentRegistrar. An application, for example, could provide a "registration-less" component directory whose components are automatically registered at startup and unregistered at shutdown. Component discovery does not currently happen automatically in non-debug builds of Gecko, however.

+ +

When the registration process begins, XPCOM broadcasts to all registered observers a notification that says XPCOM has begun the registration of new components. After all components are registered, another notification is fired saying that XPCOM is done with the registration step. The nsIObserver interface that handles this notification is discussed in Starting WebLock.

+ +

Once registration is complete and the notifications have fired, XPCOM is ready to be used by the application. If XPCOM registered your component, then it will be available to other parts of the XPCOM system. The XPCOM Initialization section in this chapter describes registration in more detail.

+ +

Autoregistro

+ +

The termautoregistration is sometimes used synonymously with registration in XPCOM. In the What Is XPCOM Registration? note, we describe the three ways you can register components with XPCOM. Sometimes, applications use the nsIComponentRegistrar interface and create their own code for watching a particular directory and registering new components that are added there, which is what's often referred to asautoregistration. You should always know what the installation and registration requirements are for the applications that will be using your component.

+ +

El Proceso de Paro

+ +

When the application is ready to shutdown XPCOM, it calls NS_ShutdownXPCOM. When that method is called, the following sequence of events occurs:

+ +
    +
  1. XPCOM fires a shutdown notification to all registered observers.
    2. +
  2. XPCOM closes down the Component Manager, the Service Manager and associated services.
    3. +
  3. XPCOM frees all global services.
    4. +
  4. NS_ShutdownXPCOM returns and the application may exit normally.
    5. +
+ +
+

The Unstoppable Shutdown

+ +

Note that shutdown observation is unstoppable. In other words, the event you observe cannot be used to implement something like a "Are you sure you want to Quit?" dialog. Rather, the shutdown event gives the component or embedding application a last chance to clean up any leftovers before they are released. In order to support something like an "Are you sure you want to quit" dialog, the application needs to provide a higher-level event (e.g., startShutdown()) which allows for cancellation.

+ +

Note also that XPCOM services may deny you access once you have received the shutdown notification. It is possible that XPCOM will return an error if you access the nsIServiceManager at that point, for example, so you may have to keep a reference-counted pointer to the service you are interested in using during this notification.

+
+ +

Component Loaders

+ +

Components can be written in many languages. So far this book has been focusing on "native components," shared libraries exporting a NSGetModule symbol. But if there is acomponent loader for Javascript installed, then you can also write a JavaScript component.

+ +

To register, unregister, load and manage various component types, XPCOM abstracts the interface between the XPCOM component and XPCOM with the Component Loader. This loader is responsible for initialization, loading, unloading, and supporting the nsIModule interface on behalf of each component. It is the Component Loader's responsibility to provide scriptable component support.

+ +

When building a "native" component, the component loader looks for an exported symbol from the components shared library. "Native" here includes any language that can generate a platform native dynamically loaded library. Scripting languages and other "non-native" languages usually have no way to build native libraries. In order to have "non-native" XPCOM components work, XPCOM must have a special component loader which knows how to deal with these type of components.

+ +

XPConnect, for example, provides a component loader that makes the various types, including the interfaces and their parameters, available to JavaScript. Each language supported by XPCOM must have a component loader.

+ +

Tres Partes de una Biblioteca de Componentes XPCOM

+ +

XPCOM is like an onionor a parfait! Everybody likes parfaits. XPCOM components have at least three layers. From the innermost and moving outward these layers include:

+ + + +

The core XPCOM object is the object that will implement the functionality you need. For example, this is the object that may start a network download and implement interfaces that will listen to the progress. Or the object may provide a new content type handler. Whatever it does, this object is at the core of the XPCOM component, and the other layers are supporting it, plugging it into the XPCOM system. A single library may have many of these core objects.

+ +

One layer above the core object is the factory code. The factory object provides a basic abstraction of the core XPCOM object. An Overview of XPCOM discussed the factory design pattern that's used in a factory object. At this layer of the XPCOM Component Library, the factory objects are factories for the core XPCOM objects of the layer below.

+ +

One more layer outward is the module code. The module interface provides yet another abstraction - this time of the factories - and allows for multiple factory objects. From the outside of the component library, there is only the single entry point, NSGetModule(). This point of entry may fan out to any number of factories, and from there, to any number of XPCOM objects.

+ +

The following chapter details these layers in terms of the XPCOM interfaces that represent them. Here we will just introduce them. The factory design pattern in XPCOM is represented by the nsIFactory interface. The module layer is represented by the nsIModule interface. Most component libraries only need these two interfaces, along with the nsISupports interface, to have XPCOM load, recognize, and use their core object code.

+ +

In the next section, we'll be writing the code that actually compiles into a component library, and you will see how each layer is implemented and how each interface is used. Following this initial, verbose demonstration of the APIs, we will introduce a faster more generic way of implementing the module and factory code using macros, which can make components much easier to create.

+ +

XPCOM Glue

+ +

XPCOM contains a lot of stuff. Most of the XPCOM interfaces are not frozen and are meant to be used only by the Gecko internals, not by clients. XPCOM provides many data structures from linked lists to AVL trees. Instead of writing your own linked list, it's tempting to reuse nsVoidArray or another publicly available class, but this might be a fatal mistake. At any time the class can change and give you unexpected behavior.

+ +

XPCOM makes for a very open environment. At runtime you can acquire any service or component merely by knowing a CID, or Contract ID, and an IID. At last count there were over 1300 interfaces defined in XPIDL. Of those 1300 interfaces, less than 100 were frozen, which means that a developer has a good chance of stumbling upon useful interfaces that aren't frozen. If an interface isn't explicitly marked "FROZEN" in the IDL comments, however - and most of them aren't - it will cause your component to possibly break or crash when the version changes.

+ +

La Biblioteca Glue

+ +

In general you should avoid any unfrozen interfaces, any symbols in XPCOM, or any other part of Gecko libraries that aren't frozen. However, there are some unfrozen tools in XPCOM that are used so often they are practically required parts of component programming.

+ +

The smart pointer class, nsCOMPtr, for example, which can make reference counting a lot less tedious and error-prone, is not actually frozen, and neither are nsDebug, a class for aiding in tracking down bugs, or nsMemory, a class to ensure that everyone uses the same heap, generic factory, and module. Instead of asking every developer to find and copy these various files into their own application, XPCOM provides a single library of "not-ready-to-freeze-but-really-helpful" classes that you can link into your application, as the following figure demonstrates.

+ +

XPCOM Glue and Tools

+ +

Image:xpcom-glue-tools.png

+ +

This is the glue library. It provides a bridge, or "glue" layer, between your component and XPCOM.

+ +

A version of the glue library is built into XPCOM, and when your component uses it, it links a snapshot of this library: it includes a copy of these unfrozen classes directly, which allows the XPCOM library version to change without affecting the software. There is a slight footprint penalty to linking directly, but this gives your component freedom to work in any recent environment. If footprint is a big issue in your component or application, you can trim out the pieces you don't need.

+ +

Clases de Cadenas de XPCOM

+ +

The base string types that XPCOM uses are nsAString and nsACString. These classes are described in the Mozilla String Guide (see Gecko Resources).

+ +

The string classes that implement these abstract classes are another set of helpful, unfrozen classes in XPCOM. Most components and embedding applications need to link to some kind of string classes in order to utilize certain Gecko APIs, but the string code that Mozilla uses is highly complex and even more expensive than the glue code in terms of footprint (~100k). nsEmbedString and nsEmbedCString are available as very light string class implementations for component development, especially in small embedded applications. This string implementation does the bare minimum to support nsAString/nsACString string classes.

+ +

In your own component, you can go "slim" and restrict yourself to the nsEmbedString or go "hog wild" and use all of the functionality of the other strings. WebLock restricts itself to using the simple nsEmbedString family of classes.

+ +

String Classes and XPCOM

+ +

Image:strings-in-xpcom.png

+ +

The glue library provides stub functions for the public functions that XPCOM provides (see xpcom/build/nsXPCOM.h). When the glue library is initialized, it dynamically loads these symbols from the XPCOM library, which allows the component to avoid linking directly with the XPCOM library. You shouldn't have to link to the XPCOM library to create a XPCOM component - in fact, if your component has to, then something is wrong.

+

« AnteriorSiguiente »

+

+

Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.

+

diff --git "a/files/es/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" "b/files/es/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" new file mode 100644 index 0000000000..5ba98982da --- /dev/null +++ "b/files/es/creaci\303\263n_de_componentes_xpcom/prefacio/index.html" @@ -0,0 +1,39 @@ +--- +title: Prefacio +slug: Creación_de_Componentes_XPCOM/Prefacio +--- +

Este es un libro acerca de Gecko, y cómo crear componentes XPCOM para aplicaciones basadas en Gecko. Aunque se hace énfasis en los pasos prácticos que sigues para que hagas tu código C++ dentro de un componente que pueda ser usado en Gecko, esperamos que esos pasos nos den también la ocasión de abordar todas las herramientas, técnicas y tecnologías que integran XPCOM. En consecuencia, este libro es arreglado de tal forma que puedes seguirlo y crear tus propios componentes o aprender distintos tópicos de XPCOM individualmente, como en una guía de referencia. Por ejemplo, la introducción incluye una discusión acerca de lo que son los componentes; y el primer capítulo - en el cual tu compilas un código básico y lo registras en Mozilla - apunta una discusión de la relación entre componentes y módulos de las interfases de XPCOM y del proceso de registro en general. +

El principio de cada capítulo provee una lista de los tópicos más importantes tratados. Las secciones en la barra de al lado son incluidas para resaltar detalles técnicos. Al terminar el libro, si hemos hecho nuestro trabajo, habrás aprendido como construir componentes y sabrás algo acerca del framework para esos componentes en Gecko, que es XPCOM. +

+

Quién debe leer este Libro

+

Creación de Componentes XPCOM está dirigido a desarrolladores C++. Aunque puedes crear componentes XPCOM en Javascript y otros lenguajes y aunque tal vez puedas seguir el libro como programador C, el código de implementación está escrito en C++ y mucha de la discusión de cómo hacer tu código dentro de un componente XPCOM empieza desde C++. De cualquier modo no necesitas ser un experto en C++, aunque debes estar familiarizado con ideas básicas como herencia y encapsulación, ideas que cuando es posible son explicadas en el libro donde son usadas. También muchos de los ejemplos son en Javascript, que es usado en Mozilla para accesar componentes XPCOM como objetos script, así que estar familiarizado con ese lenguaje es útil también. +

XPCOM significa Cross Platform Component Object Model(Modelo Componente Objeto Multiplataforma), como su nombre lo implica, XPCOM es similar al Microsoft COM, si tienes alguna experiencia con esta tecnología, grán parte de eso puede aplicarse a XPCOM. De cualquier modo este libro no asume ningún conocimiento previo de COM - todas las ideas básicas de COM serán introducidas. +

Este libro provee un tutorial de cómo construir un componente XPCOM que controle el comportamiento de búsqueda; aunque XPCOM puede ser usado en muchos ambientes relacionados con búsqueda web, su principal cliente es Gecko, un buscador web embebido de código abierto, que cumple con estándares, donde es más fácil y práctico ilustrar la funcionalidad de XPCOM. Una descripción completa del componente de este turial puede ser encontrada en la sección En lo que Estaremos Trabajando de este tutorial. +

+
+

A pesar de lo que dice la documentación, XPCOM no debe ser usado para hacer NPAPI plugins script. A partir de la versión 1.7.5 de Gecko(Firefox 1.0) una extensión especial NPAPI para llamar desde script es soportada vea Scripting plugins. +

+
+

Organización del Tutorial

+

La siguiente lista da una reseña de de los pasos que seguiremos para crear un componente XPCOM llamado Weblock, el cual provee la funcionalidad de bloqueo de sitios a los buscadores basados en Gecko. Cada uno de estos pasos tiene su propio capitulo, en el que se discuten varios tópicos asociados al paso. +

+ +

Continuando con los Ejemplos

+

Hay dos formas diferentes de tener XPCOM en tu máquina para poder crear componentes. Si ya tienes un Mozilla construído o el código fuente de Mozilla 1.2 o posterior, entonces puedes usar la plataforma XPCOM disponible ahí. Si no tienes las fuentes de Mozilla, entonces puedes bajar el Gecko SDK, que es una colección de librerías y herramientas que componen la plataforma de componentes XPCOM. +

No importa si compilas tu código en el directorio de las fuentes de Mozilla o usas el Gecko SDK, puedes construir tus propios componentes que usen los componentes previamente existentes en Gecko. el componente Weblock que describimos en este tutorial es un complemento práctico(y esperamos genuinamente útil) para el navegador. Para poder construirlo, tu Gecko SDK o tus fuentes de Mozilla deben ser versión 1.2 o superior (las interfaces XPCOM en versiones anteriores no fueron completamente congeladas). +

Este Libro asume que estas usando el SDK en vez del directorio de las fuentes de Mozilla, de cualquier forma la diferencia entre ambos es mínima. Detalles acerca de cómo obtener el SDK, construir y obtener acceso programático a los componetes de Gecko se dan en el APENDICE del libro, Configurar el Gecko SDK. +

+

Convenciones

+

Las convenciones de formato listadas abajo se usan para designar tipos específicos de información en el libro y hacer las cosas más fáciles de encontrar. El objetivo es usar tan pocos formatos como sea posible, pero distinguir los diferentes tipos de información claramente. +

+ +
Formato Descripción
bold nombres de componentes aparecen en negro en el texto
monospace referencias al código, nombres de interfaces y miembros de interfaces (ejm. createInstance()) aparecen en letra monospaced. Líneas de código aparecen en cajas separadas. También nombres de archivos y directorios aparecen en letra monospaced.
itálica variables aparecen en letra itálica. Términos importantes y nuevos conceptos también aparecen en letra itálica la primera vez que aparecen en el texto. También aquellos términos que son explicados inmediatamente después de ser citados, o donde se le dice al lector que vaya a una sección en el libro en donde se describen dichos términos a detalle.
link Referencias a otras secciones, imágenes y tablas también son links a esas secciones.
+

Agradecimientos

+

Gracias a Peter Lubczynski, John Gaunt, Ellen Evans y Alec Flett por sus revisiones técnicas. Un agradecimiento especial a Darin Fisher por sus observaciones tan meticulosas, lectura tan cercana y atención a los detalles. +

diff --git "a/files/es/creaci\303\263n_de_componentes_xpcom/un_vistazo_de_xpcom/index.html" "b/files/es/creaci\303\263n_de_componentes_xpcom/un_vistazo_de_xpcom/index.html" new file mode 100644 index 0000000000..49896dabc1 --- /dev/null +++ "b/files/es/creaci\303\263n_de_componentes_xpcom/un_vistazo_de_xpcom/index.html" @@ -0,0 +1,281 @@ +--- +title: Un vistazo de XPCOM +slug: Creación_de_Componentes_XPCOM/Un_vistazo_de_XPCOM +tags: + - Todas_las_Categorías + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components/An_Overview_of_XPCOM +--- +

Este es un libro acerca de XPCOM. Esta escrito en forma de un tutorial acerca de la creación de componentes XPCOM, pero cubre la mayoría de los aspectos, conceptos y terminología del modelo de componentes XPCOM en el camino.

+

Este capítulo empieza con un tour rápido de XPCOM - una introducción a los conceptos básicos y tecnologías en XPCOM y el desarrollo de componentes. Las secciones principales en este capítulo introducen los conceptos a un nivel muy superficial, así que podremos discutirlos y usarlos con más familiaridad en el tutorial que describe la creación del componente Mozilla llamado Weblock.

+

La Solución XPCOM

+

El Modelo Componente Objeto Multiplataforma (XPCOM) es una plataforma que permite a los desarrolladores romper proyectos de software monolíticos en piezas modulares más pequeñas. Estas piezas, conocidas como componentes son ensamblados juntos nuevamente en tiempo de ejecución.

+

El objetivo de XPCOM es permitir a diferentes piezas de software ser desarrolladas y construidas independientes unas de otras. Para permitir interoperabilidad entre componentes dentro de una aplicación, XPCOM separa la implementación de un componente de la interfaz, lo cual discutimos en Interfases. Pero XPCOM también provee muchas herramientas y bibliotecas que habilitan la carga y manipulación de estos componentes, servicios que ayudan al desarrollador a escribir código modular multiplataforma, y soporte para versiones, así que los componentes pueden ser reemplazados o actualizados sin tener que romper o volver a crear la aplicación. Usando XPCOM, los desarrolladores crean componentes que pueden ser reutilizados en diferentes aplicaciones o pueden ser reemplazados para cambiar la funcionalidad de aplicaciones existentes.

+

XPCOM no solamente soporta el desarrollo de componetes de software, también provee gran parte de la funcionalidad de una plataforma de desarrollo, como:

+ +

Discutiremos los puntos de arriba a detalle en los siguientes capítulos, pero por ahora, puede ser útil pensar en XPCOM como una plataforma para desarrollo de componentes, en la que la que se incluyen características como las listadas arriba.

+

Gecko

+

Aunque en algunos aspectos es similar a Microsoft COM, XPCOM está diseñado para ser usado primordialmente a nivel de aplicación. El uso más importante de XPCOM es dentro de Gecko, un buscador web embebido de código abierto, que cumple con estándares y un conjunto de herramientas para crear buscadores web y otras aplicaciones.

+

XPCOM se encarga de accesar la funcionalidad de las bibliotecas de Gecko y embeber o extender Gecko. Este libro se enfoca en lo último - extender Gecko - pero las ideas fundamentales en el libro también serán importantes para los desarrolladores que embeban Gecko.

+

Gecko es usado en muchas aplicaciones de internet, la mayoría buscadores. La lista incluye dispositivos como el Gateway/AOL, el Instant AOL y la Nokia Media Terminal. Gecko también se usa en el último cliente Compuserve, AOL para Mac OS X, Netscape 7 y por supuesto el cliente de Mozilla. En este momento, Gecko es el web browser de código abierto predominante.

+

Componentes

+

XPCOM te permite construir un sistema en el que grandes proyectos de software pueden ser fragmentados en piezas más pequeñas. Estas piezas, conocidas como componentes, son normalmente diseñadas en pequeñas y reutilizables bibliotecas binarias(una DLL en Windows, por ejemplo, o una DSO en Unix), que pueden incluir uno o más componentes. Cuando hay dos o más componentes relacionados juntos en una biblioteca binaria, llamamos a la biblioteca módulo.

+

Fragmentar el software en distintos componentes puede ayudar a hacerlo menos difícil de desarrollar y mantener. Más allá de esto, la programación modular basada en componentes tiene ciertas ventajas bien conocidas:

+ +
Beneficio Descripción
Reutlizable El código modular puede ser reutilizado en otras aplicaciones y en otros contextos.
Actualizaciones Puedes actualizar componentes sin tener que recompilar toda la aplicación.
Rendimiento Cuando el código es modular, los módulos que no serán usados en seguida pueden ser "cargados durmiendo", o no ser cargados del todo, lo que puede mejorar el rendimiento de tu aplicación.
Mantenimiento Aún cuando no estés actualizando un componente, diseñar tu aplicación de forma modular puede hacerte más fácil encontrar e mantener las partes de la aplicación en que estás interesado.
+

Mozilla tiene más de cuatro millones de líneas de código, y ningún individuo por sí solo entiende el código fuente entero. La mejor forma de afrontar un proyecto de este tamaño es dividirlo en piezas más pequeñas y manejables, usar un modelo de programación basado en componentes y organizar ciertos grupos de componentes en módulos. La biblioteca de red, por ejemplo, consiste en componentes para cada uno de los protocolos, HTTP, FTP y otros, los cuales son armados juntos y enlazados en una sola biblioteca. Esta biblioteca es el módulo de trabajo en red, conocida también como "necko".

+

El componente HTTP en Gecko no expone las clases privadas que usa como componentes separados. El "stuff"

+

The HTTP component in Gecko doesn't expose private classes it uses as separate components. The "stuff" that's internal to the component stays internal, and isn't exposed to XPCOM. In the haste of early Mozilla development, components were created where they were inappropriate, but there's been an ongoing effort to remove XPCOM from places like this.

+

Pero no siempre es buena idea dividir las cosas. Hay algunas cosas en el mundo que sólo trabajan si están juntas y otras que deberían estar separadas. Por ejemplo, el hijo de un autor no se comerá un sandwich de crema de cacahuate si no tiene jamón, porque en este mundo, la crema de cachuate y el jamón forman una unión inseparable (guácala, en México como en muchos lugares no opinamos lo mismo creo que fue un mal ejemplo, pero en fin esto es parte de la traducción y espero se entienda la idea). Con el software es similar. En áreas de código que están estrechamente acopladas en clases que son usadas sólo internamente, por ejemplo, el duro trabajo de dividir las cosas tal vez no sea un esfuerzo vano.

+

El componente HTTP en Gecko no expone las clases privadas que usa como componentes separados. El "material" que es interno del componente permanece interno y no es visible para XPCOM. Por la prisa al inicio del desarrollo de Mozilla, fueron creados componentes donde era inadecuado, pero se ha estado haciendo un grán esfuerzo para quitar XPCOM de estos lugares.

+

Interfaces

+

Generalmente es buena idea dividir el software en componentes, pero ¿Cómo hacer esto exactamente? La idea básica es identificar piezas de funcionalidad que esten relacionadas entre sí y entender cómo se comunican entre ellas. Cuando son definidos los canales de comunicación entre los distintos delimitadores de forma que se encuentran entre componentes y dichos delimitadores son formalizados se llaman interfaces.

+

Las interfaces no son una idea nueva en programación. Todos hemos usado interfaces desde nuestro primer programa "Hola Mundo", donde la interface estaba entre el código que escribimos-el código de la aplicación-y el código de impresión. El código de aplicación usó una interfaz de una biblioteca, stdio para pintar la cadena "Hola Mundo" en la pantalla. La diferencia aquí es que una aplicación "Hola Mundo" en XPCOM encuentra esta pantalla pintando funcionalidad en tiempo de ejecución y nunca tiene que saber acerca de stdio cuando es compilado.

+

Las interfaces permiten a los desarrolladores encapsular la implementación y la lógica interna de su programa y permitir a los clientes ignorar cómo se hacen las cosas y sólo usar el software.

+
+

Interfaces y programación por contrato

+

Una interfaz forma un acuerdo contractual entre componentes y clientes. No hay código que obligue estos acuerdos, pero ignorarlos puede ser fatal. En la programación basada en componentes, un componente garantiza que las interfaces que provee serán inmutables, es decir, proveerán el mismo acceso a los mismos métodos en diferentes versiones del componente, estableciendo un contrato con los clientes que usan el software. A este respecto, la programación basada en interfaces también es llamada programación por contrato.

+
+

Interfaces y Encapsulación

+

Entre delimitadores de componentes, la abstracción es crucial para el mantenimiento y la reutilización del software. Considera, por ejemplo, una clase que no está bien encapsulada; usar un método público de inicialización disponible libremente, como sugiere el ejemplo de abajo puede causar problemas.

+

Inicializacion de AlgunaClase

+
class AlgunaClase
+{
+  public:
+    // Constructor
+    AlgunaClase();
+
+    // Virtual Destructor
+    virtual ~AlgunaClase();
+
+    // init method
+    void Init();
+
+    void HazAlgoUtil();
+};
+
+

Para que este sistema funcione correctamente, el programador del cliente debe prestar mucha atención a todas las reglas que el programador del componente estableció. Este es el acuerdo contractual de esta clase clase no encapsulada: un conjunto de reglas que definen cuando cada método puede ser llamado y cuando se espera que se haga. Una regla puede especificar que HazAlgoUtil puede ser llamado sólo después de una llamada a Init(). El método HazAlgoUtil puede hacer algún tipo de validación para asegurar que la condición de que Init() ha sido llamado, ha sido cumplida.

+

Además de escribir código bien comentado que le diga al desarrollador del cliente las reglas acerca de Init(), el desarrollador puede seguir un par de pasos para hacer este contrato más claro. Primero, la construcción de un objeto puede ser encapsulada y proveer una clase virtual que defina el método HazAlgoUtil. De esta forma, construcción e inicialización pueden ser completamente ocultos de los clientes de la clase. En esta situación "semiencapsulada", la única parte de la clase que se ve esuna bien definida lista de métodos llamables (la interfaz). Una vez que la clase es encapsulada, la única interfaz que verá el cliente es esta:

+

Encapsulación de AlgunaInterfaz

+
class AlgunaInterfaz
+{
+  public:
+    virtual void HazAlgoUtil() = 0;
+};
+
+

La implementación puede entonces derivar de esta clase e implementar el método virtual. Los clientes de este código pueden usar después un patrón de diseño factoría para crear el objeto (ve Factorías) y después encapsular la implementación. En XPCOM, los clientes se escudan de la lógica interna de los componentes de esta forma y confiar en la interfaz para proveer acceso a la funcionalidad requerida.

+

La Interfaz Base nsISupports

+

Dos aspectos fundamentales en la programación basada en componentes e interfaces son: la Vida del componente, también llamada posesión del objeto y las llamadas de interfaz, o poder identificar que interfaces soporta un componente al momento de ejecución. Esta sección introduce la interfaz base, que es la madre de todas las interfaces en XPCOM, nsISupports, la cual proporciona soluciones a estos dos aspectos para los desarrolladores de XPCOM.

+
Posesión de Objetos
+

Como los componentes en XPCOM pueden implementar cualquier número de interfaces, dichas interfaces deben ser "contadas por referencia". Los componentes deben tener control de cuántas referencias a él tienen activas los clientes y borrarse ellos mismos cuando ese número llega a cero.

+

Cuando un componente se crea, un entero dentro del componente almacena esta cuenta de referencias. La cuenta de referencias se incrementa automáticamente cuando el cliente hace una instancia del componente; durante el transcurso de vida del componente. En algún punto, todos los clientes pierden interés en el componente, en ese momento la cuenta llega a cero y el componente se borra a sí mismo.

+

Cuando los clientes usan interfaces responsablemente, esto puede ser un proceso muy serio. XPCOM tiene herramientas para hacer esto más sencillo, como describiremos después. Podemos tener serios problemas cuando por ejemplo, un cliente usa una interfaz y olvida decrementar la cuenta de referencia. Cuando esto pasa, las interfaces tal vez nunca puedan ser liberadas y se desbordará la memoria. El sistema de cuenta de referencias es, como muchas otras cosas en XPCOM, un contrato entre clientes e implementaciones. Trabaja cuando la gente se pone de acuerdo con él, pero si no, las cosas pueden ir mal. Es responsabilidad de la funcion que crea el puntero a la interfaz añadir la referencia inicial o posesión de referencia a la cuenta.

+
+

Punteros en XPCOM

+

En XPCOM, "punteros" se refiere a los punteros de interfaz. La diferencia es muy sutil ya que los punteros de interfaz y los punteros comunes son sólo direcciones en memoria. Pero un puntero de interfaz debe poder implementar la interfaz base nsISupports, que también puede ser usada para llamar métodos como AddRef, Release, o QueryInterface.

+
+

nsISupports, mostrado abajo, proporciona la funcionalidad básica para lidiar con el descubrimiento de la interfaz y la cuenta de referencias. Los miembros de esta interfaz, QueryInterface, AddRef, and Release, proporcionan los medios básicos para conseguir el interfaz correcto de un objeto, incrementando la cuenta de referencias y liberando objetos una vez que dejan de ser usados respectivamente. La interfaz nsISupports se muestra a continuación:

+

La Interfaz nsISupports

+
class Sample: public nsISupports
+{
+  private:
+    nsrefcnt mRefCnt;
+  public:
+    Sample();
+    virtual ~Sample();
+
+    NS_IMETHOD QueryInterface(const nsIID &aIID, void **aResult);
+    NS_IMETHOD_(nsrefcnt) AddRef(void);
+    NS_IMETHOD_(nsrefcnt) Release(void);
+};
+
+

Los distintos tipos usados en la interfaz son descritos en la sección Tipos XPCOM más adelante. Una implementación completa de la interfaz nsISupports se muestra abajo. Vea A Reference Implementation of QueryInterface para información más detallada.

+

Implementación de la interfaz nsISupports

+
// inicializa la cuenta de referencias a 0
+Sample::Sample() : mRefCnt(0)
+{
+}
+Sample::~Sample()
+{
+}
+
+// típica implementación genérica de QI
+NS_IMETHODIMP Sample::QueryInterface(const nsIID &aIID,
+                                  void **aResult)
+{
+  if (!aResult) {
+    return NS_ERROR_NULL_POINTER;
+  }
+  *aResult = NULL;
+  if (aIID.Equals(kISupportsIID)) {
+    *aResult = (void *) this;
+  }
+  if (!*aResult) {
+    return NS_ERROR_NO_INTERFACE;
+  }
+  // añade una referencia
+  AddRef();
+  return NS_OK;
+}
+
+NS_IMETHODIMP_(nsrefcnt) Sample::AddRef()
+{
+  return ++mRefCnt;
+}
+
+NS_IMETHODIMP_(nsrefcnt) Sample::Release()
+{
+  if (--mRefCnt == 0) {
+    delete this;
+    return 0;
+  }
+  // opcional: regresa la cuenta de referencias
+  return mRefCnt;
+}
+
+
Descubrimiento de Objetos de Interfaz
+

Herencia es otro tópico muy importante en la programación orientada a objetos. Herencia es el medio por el que una clase es derivada de otra. Cuando una clase hereda de otra clase, le clase hija puede sobreescribir los comportamientos originales de la clase base sin tener que copiar todo el código de esa clase, en efecto creando una clase más específica, como en el ejemplo siguiente:

+


+Herencia de la Clase Simple

+
class Figura
+{
+  private:
+    int m_x;
+    int m_y;
+
+  public:
+    virtual void Pintar() = 0;
+    Shape();
+    virtual ~Shape();
+};
+
+class Circulo : public Figura
+{
+  private:
+    int m_radio;
+  public:
+    virtual Pintar();
+    Circulo(int x, int y, int radio);
+    virtual ~Circulo();
+};
+
+

Circulo es una clase derivada de Figura. En otras palabras un Circulo es una Figura, pero una Figura no es necesariamente un Circulo. En este caso, Figura es la clase base y Circulo es una subclase de Figura.

+

En XPCOM, todas las clases derivan de la interfaz nsISupports, así que todos los objetos son nsISupports pero también son otras clases más específicas que necesitas para poder encontrarlas en tiempo de ejecución. En Herencia de la Clase Simple, por ejemplo, ¿te gustaría poder preguntarle a la Figura si es un Circulo y poder usarlo como circulo si lo es? En XPCOM, esto es para lo que está la caracteríztica QueryInterface de la interfaz nsISupports: permite a los clientes encontrar y accesar diferentes interfaces de acuerdo a sus necesidades.

+

En C++, puedes usar un aspecto verdaderamente avanzado conocido como refernecia_dinámica<>, que da una excepción si el objeto Figura no puede hacer referencia a Circulo. Pero habilitar las excepciones y RTTI puede no ser una opción por la mejora del rendimiento y la compatibilidad en varias plataformas, así que XPCOM hace las cosas diferente.

+
+

Excepciones en XPCOM

+

Las excepciones de C++ no son soportadas directamente en XPCOM. Todas las excepciones deben ser gestionadas dentro de un componente dado, antes de cruzar los límites de las interfaces. En XPCOM, todos métodos de interfaz deben regresar un valor de error nsresult (Vea la Referencia del API de XPCOM para ver la lista de códigos de error). Esos resultados de códigos de error se vuelven "excepciones" que gestiona XPCOM.

+
+

En vez de utilizar el RTTI de C++, XPCOM usa el método especial QueryInterface que referencía el objeto a la interfaz correcta si esa interfaz es soportada.

+

A cada interfaz se le asigna un identificador que se genera de una herramienta comunmente llamada "uuidgen". Este identificador universal único es un número único de 128 bits. Usado en el contexto de una interfaz (similar a un componente, donde el contract ID(ID de contrato) hace esta función), a este número se le conoce como IID.

+

Cuando un cliente quiere saber si un objeto soporta una interfaz dada, el cliente pasa el IID asignado a esa interfaz al método QueryInterface de ese objeto. Si el objeto soporta la interfaz requerida, añade una referencia a sí mismo y regresa un puntero a esa interfaz. Si el objeto no soporta la interfaz, regresa un error.

+
class nsISupports {
+  public:
+    long QueryInterface(const nsIID & uuid,
+                        void **result) = 0;
+    long AddRef(void) = 0;
+    long Release(void) = 0;
+};
+
+

El primer parámetro de QueryInterface es una referencia a la clase llamada nsIID, que es una encapsulación básica del IID. De los tres métodos en la clase nsIID, Equals, Parse, and ToString, Equals es por mucho el más importante, porque se usa para comparar dos nsIIDs en el proceso de requerimiento de esta interfaz.

+

Cuando implementas la clase nsISupports (y verás en el capítulo Uso de Utilidades XPCOM para hacer las cosas más fáciles como las macros pueden hacer este proceso mucho más sencillo), debes asegurarte que los métodos de la clase regresan un resultado válido cuando el cliente llama QueryInterface con el IID de nsISupports. QueryInterface debe soportar todas las interfaces que el componente soporta.

+

En las implementaciones de QueryInterface, el parámetro IID es comparado con el nsIID de la clase. Si coinciden, el puntero this del objeto es referenciado a void, la cuenta de referencias se incrementa y la interfaz es devuelta al llamador. Si no coinciden, la clase regeresa un error y pone el valor de salida a null.

+

En el ejemplo de arriba, es muy fácil usar referencias al estilo de C. Pero referenciar puede volverse más complicado donde debes primero referenciar a void y luego al tipo requerido porque debes regresar el puntero a la interfaz en el vtable correspondiente a la interfaz requerida. Referenciar puede volverse un problema cuando hay un orden ambiguo de herencia.

+

Identificadores XPCOM

+

Además del identificador de interfaz IID discutido en la sección anterior, XPCOM usa otros dos identificadores muy importantes para distinguir las clases y los componentes.

+
+

Clases Identificadoras de XPCOM

+

La clase nsIID es es un tupo definido para la clase nsID. Los otros tipos definidos de nsID, CID e IID, se refieren a implementaciones específicas de una clase en concreto y a una iterfaz específica, respectivamente.

+

La clase nsID proporciona métodos como Equals para comparar identificadores en el código. Ve Identificadores en XPCOM para mayor información de la clase nsID.

+
+

CID

+

Un CID es un número de 128 bits que identifica como únicos a una clase o un componente de manera muy parecida a la forma en que un IID identifica una interfaz. El CID para nsISupports se ve como este:

+

00000000-0000-0000-c000-000000000046

+

El largo de un CID puede hacer incómodo manejarlo en el código, así que muy a menudo verás #defines para los CIDs y otros identificadores usados, como en el siguiente ejemplo:

+
#define CID_EJEMPLO \
+{ 0x777f7150, 0x4a2b, 0x4301, \
+{ 0xad, 0x10, 0x5e, 0xab, 0x25, 0xb3, 0x22, 0xaa}}
+
+

También verás que NS_DEFINE_CID es muy usado. Esta simple macro declara una constante con el valor del CID:

+
static NS_DEFINE_CID(kWebShellCID, NS_WEB_SHELL_CID);
+
+

Un CID es algunas veces llamado identificador de clase. Si la clase a la que se refiere un CID implementa más de una interfaz, ese CID garantiza que la clase implementa todo ese conjunto de interfaces cuando se publica como congelado.

+

Contract ID

+

Un contract ID es una cadena leible humanamente usada para accesar un componente. Un CID o un contract ID puede ser usado para obtener un componente desde el gestor de componentes. Este es el contract ID para el componente de Operación LDAP:

+
"@mozilla.org/network/ldap-operation;1"
+
+

El formato del contract ID es el dominio del componente, el módulo, el nombre del componente y el número de versión separados por diagonales.

+

Como un CID, el contract ID se refiere a una implementación más que a una interfaz, como lo hace un IID. Pero un contract ID no está relacionado a ninguna implementación en específico, como el CID, por lo cual es más general. Más bien, un contract ID especifica un conjunto de interfaces dadas que requiere implementadas y cualquier número de CIDs diferentes pueden estar presentes y llenar ese requerimiento. Esta diferencia entre un contract ID y un CID es lo que hace posible sobreescribir componentes.

+

Factorías

+

Una vez que el código es dividido en componentes, el código cliente típicamente usa el operador new para instanciar los objetos a usar:

+
SomeClass* component = new SomeClass();
+
+

Este patrón requiere que el cliente sepa algo acerca del componente, al menos qué tan grande es. El patrón de diseño factoría puede usarse para encapsular la construcción de objetos. El objetivo principal de una factoría es crear un objeto sin mostrar a los clientes la implementación e inicialización de este objeto. En el ejemplo SomeClass la construcción e inicialización de SomeClass que implementa la clase abstracta SomeInterface, es contenida dentro de la función New_SomeInterface que sigue el patrón de diseño factoría:

+

Encapsulación del Constructor

+
int New_SomeInterface(SomeInterface** ret)
+{
+  // crea el objeto
+  SomeClass* out = new SomeClass();
+  if (!out) return -1;
+
+  // inicializa el objeto
+  if (out->Init() == FALSE)
+  {
+    delete out;
+    return -1;
+  }
+
+  // referencia de la interfaz
+  *ret = static_cast<SomeInterface*>(out);
+  return 0;
+}
+
+

La factoría es la clase que gestiona la creación de instancias separadas de un componente para su uso. En XPCOM, las factorías son implementaciones de la interfaz nsIFactory y usan un patrón de diseño factoría como el ejemplo de arriba para abstraer y encapsular la construcción e inicialización del objeto.

+

El ejemplo en Encapsulación del Constructor es una versión simple sin estado de las factorías, pero programarlo en el mundo real usualmente no es tan simple y en general las factorías necesitan guardar un estado. La factoría necesita, por lo menos preservar información de qué objetos ha creado. Cuando una factoría gestiona instancias de una clase contenida en un biblioteca dinámica compartida, por ejemplo, necesita saber cuando puede descargar la biblioteca. Cuando la factoría preserva un estado, puedes preguntarle si hay referencias esperando y saber si la factoría creó objetos.

+

Otro estado que puede guardar una factoría es si un objeto es o no singleton. Por ejemplo, si una factoría crea un objeto que se supone debe ser singleton, entonces las llamadas subsecuentes a la factoría por el objeto deben regresar el mismo objeto. Aunque que hay herramientas y mejores formas de gestionar un singleton (lo que discutiremos cuando hablemos del nsIServiceManager), un desarrollador tal vez quiera usar esta información para asegurarse de que sólo puede existir un objeto singleton sin importar lo que hagan los clientes.

+

Los requerimientos de una clase factoría pueden gestionarse de una manera estrictamente funcional con el estado guardado en variables globales, pero hay beneficios de usar clases para las factorías. Cuando usas una clase para implementar la funcionalidad de una factoría, por ejemplo, derivas de la interfaz nsISupports, que te permite manejar el tiempo de vida de los objetos de la factoría por sí mismos. Esto es importante cuando quieres agrupar conjuntos de factorías y determinar si pueden ser descargados. Otro beneficio de usar la interfaz nsISupports es que puedes soportar otras interfaces al momento en que sean introducidas. Como mostraremos al discutir nsIClassInfo, algunas factorías permiten pedir información acerca de la implementación que tienen debajo, como el lenguaje en el está escrito el objeto, las interfaces que soporta, etc. Este tipo de "comprobación futura" es una ventaja clave que se obtiene al derivar de nsISupports.

+

XPIDL y Bibliotecas de Tipos

+

Una manera fácil y potente de definir una interfaz es - en efecto, un requerimiento para definir interfaces en un ambiente multiplataforma, independiente del lenguaje- es usar un lenguaje de definición de interfaces (IDL). XPCOM usa su propia variante del Lenguaje de Definición de Interfaces (IDL) de CORBA OMG llamado XPIDL, que te permite especificar métodos, atributos y contantes de una interfaz dada y también definir herencia de interfaz.

+

Hay algunas desventajas de definir tu interfaz usando XPIDL. No hay soporte para herencia múltiple de una sola cosa; si defines una interfaz nueva, no puede derivar de más de una interfaz; otra limitante de las intertfaces en XPIDL es que los nombres de los métodos deben ser únicos, no puedes tener dos métodos con el mismo nombre aunque tomen distintos parámetros, es decir no se permite la sobrecarga de funciones, y el trabajo que implica tener múltiples nombres de funciones no es agradable:

+
void AlgoConInt(in int x);
+void AlgoConString(in string x);
+void AlgoConURI(in nsIURI x);
+
+

De cualquier modo, estos pequeños inconvenientes palidecen en comparación con la funcionalidad ganada usando XPIDL. XPIDL te permite generar bibliotecas de tipos, o typelibs, que son archivos con la extensión .xpt. La biblioteca de tipo es una representación binaria de una interfaz o interfaces, permite el control programático y acceso de la interfaz, lo que es crucial para las interfaces que no son usadas en el mundo de C++. Cuando los componentes son accesados desde otros lenguajes,como puede hacerse en XPCOM, usan la biblioteca binaria de tipo para accesar a la interfaz, ver qué métodos soporta y llamar esos métodos. Este aspecto de XPCOM se llama XPConnect. XPConnect es la capa de XPCOm que permite el acceso a los componentes de XPCOM desde lenguajes como JavaScript. Ve Conexión a Componentes desde la Interfaz para más información de XPConnect.

+

Cuando un componente es accesible desde un lenguaje distinto a C++, como JavaScript, se le ordena a su interfaz "reflejarse" en ese lenguaje. Cada interfaz reflejada debe tener una biblioteca de tipos correspondiente. Actualmente puedes escribir componentes en C, C++, Javascript (y algunas veces Python o Java, dependiendo del estado de las etiquetas respectivas) y hay esfuerzos tratando de construir etiquetas XPCOm para Ruby y Perl también.

+
+

Escribir Componentes en Otros Lenguajes

+

Tal vez no tengas acceso a algunas de las herramientas que XPCOM da para los desarrolladores en C++ (como macros, plantillas, punteros inteligentes y otros) cuando creas componentes en otros lenguajes, tal vez te tengas que conformar con el lenguaje en sí mismo prescindir de C++ y construir, por ejemplo, un componente XPCOm basado en Python que pueden ser usados desde JavaScript o vice versa.

+

Ve Resources Para más información de Python y otros lenguajes para los que se ha añadido soporte en XPCOM.

+
+

Todas las interfaces públicas en XPCOM sin definidas usando la sintaxis XPIDL. Las Bibliotecas de tipos y los archivos de cabecera de C++ son generados a partir de estos archivos IDL y la herramienta que genera esos archivos se llama compilador xpidl. La sección Definición de la Interfaz WebLock en XPIDL describe la sintaxis XPIDL a detalle.

+

Servicios de XPCOM

+

Cuando los clientes usan los componentes, normalmente instancían un nuevo objeto cada vez que necesitan la funcionalidad que da un componente. Este es el caso cuando, por ejemplo, los clientes lidian con archivos: cada archivo distinto es representado por un objeto diferente y muchos objetos de archivo pueden ser usados al mismo tiempo en cualquier momento.

+

Pero también hay un tipo de objeto conocido como servicio, del cual siempre hay sólo una copia (aunque puede haber varios servicios corriendo al mismo tiempo). Cada vez que un cliente quiere accesar la funcionalidad de un servicio, se comunican con la misma instancia de ese servicio. Cuando un usuario busca un número telefónico en la base de datos de una compañía , por ejemplo, probablemente esa base de datos está representada por un "objeto" que es el mismo para todos los trabajadores. Si no lo fuera, la aplicación necesitaría varias copias de una gran base de datos en memoria, para una misma cosa y tal vez habría inconsistencias entre los datos grabados porque las copias serían diferentes.

+

Dar este único punto de acceso a la funcionalidad es para lo que está el patrón de diseño singleton y es lo que los servicios hacen en una aplicación (y en un ambiente de desarrollo como XPCOM).

+

En XPCOM, además del soporte y gestión de componentes, hay un número de servicios que ayudan al desarrollador a escribir componentes multiplataforma. Estos servicios incluyen una abstracción de archivos multiplataforma que da un acceso a archivos uniforme y potente, los servicios de directorio que mantienen la locación de la aplicación y locaciones específicas del sistema, manejo de memoria para asegurar que todos usen el mismo localizador de memoria y el sistema de notificación de eventos que permite el paso de mensajes simples. El tutorial mostrará cada uno de estos componentes y servicios en uso, y la XPCOM API Reference tiene una lista completa de las interfaces en éstas áreas.

+

Tipos de XPCOM

+

Hay muchos tipos XPCOM declarados y macros simples que usaremos en los siguientes ejemplos, la mayoría de esos tipos son simples correlaciones. Los tipos más comunes son descritos en las siguientes secciones.

+

Tipos de Métodos

+

Los siguientes son un conjunto de tipos para asegurar la convención correcta de llamadas y tipos regresados de los métodos XPCOM.

+ +
NS_IMETHOD Tipo regresado en la declaración del método. Las declaraciones de métodos XPCOM deben usar este como su tipo de regreso.
NS_IMETHODIMP Tipo de regreso de implementación del método. Las implementaciones de métodos XPCOM deben usar este como su tipo de regreso.
NS_IMETHODIMP_(tipo) Tipo de regreso de implementaciones de casos especiales. Algunos métodos como AddRef y Release no regresan el tipo por defecto. Esta excepción es regrettable, pero requerida para cumplir la compatibilidad con COM.
NS_IMPORT Forza el método a ser resuelto internamente por la biblioteca compartida.
NS_EXPORT Forza el método a ser exportado por la biblioteca compartida.
+

Cuenta de Referencias

+

Estas Macros manejan la cuenta de referencias.

+ +
NS_ADDREF Llama a AddRef en un objeto nsISupports.
NS_IF_ADDREF Lo mismo que el anterior pero valida null antes de llamar a AddRef.
NS_RELEASE Llama a Release en un objeto nsISupports.
NS_IF_RELEASE Lo mismo que el anterior pero valida null antes de llamar a Release.
+

Códigos de Estatus

+

Estas macros prueban códigos de estatus.

+ +
NS_FAILED Regresa verdadero si el código de estatus pasado fue fallo.
NS_SUCCEEDED Regresa verdadero si el código de estatus pasado fue éxito.
+

Correlaciones Variables

+ +
nsrefcnt Tipo de cuenta de referencias por defecto. Correlaciona un entero de 32-bits.
nsresult Tipo de error por defecto. Correlaciona un entero de 32-bits.
nsnull Valor nulo por defecto.
+

Códigos de Error Comunes de XPCOM

+ +
NS_ERROR_NOT_INITIALIZED Regresado cuando una instancia no está inicializada.
NS_ERROR_ALREADY_INITIALIZED Regresado cuando una instancia ya fue inicializada.
NS_ERROR_NOT_IMPLEMENTED Regresado por un método no implementado.
NS_ERROR_NO_INTERFACE Regresado cuando una interfaz dada no es soportada.
NS_ERROR_NULL_POINTER Regresado cuando un puntero válido es nsnull.
NS_ERROR_FAILURE Regresado cuando un método falla. Caso de error genérico.
NS_ERROR_UNEXPECTED Regresado cuando ocurre un error inesperado.
NS_ERROR_OUT_OF_MEMORY Regresado cuando una localización de memoria falla.
NS_ERROR_FACTORY_NOT_REGISTERED Regresado cuando una clase requerida no está registrada.
+

+

« AnteriorSiguiente »

+

+

diff --git "a/files/es/creaci\303\263n_de_componentes_xpcom/uso_de_componentes_xpcom/index.html" "b/files/es/creaci\303\263n_de_componentes_xpcom/uso_de_componentes_xpcom/index.html" new file mode 100644 index 0000000000..b250d637c1 --- /dev/null +++ "b/files/es/creaci\303\263n_de_componentes_xpcom/uso_de_componentes_xpcom/index.html" @@ -0,0 +1,318 @@ +--- +title: Uso de Componentes XPCOM +slug: Creación_de_Componentes_XPCOM/Uso_de_Componentes_XPCOM +tags: + - Todas_las_Categorías + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Guide/Creating_components/Using_XPCOM_Components +--- +

+

« AnteriorSiguiente »

+

+ +

Una de las mejores formas de empezar a trabajar con XPCOM - especialmente cuando estás diseñando la interfaz de un componente que será usado por otros, como lo hacemos en Iniciando WebLock - es observar como están usando los componentes XPCOM los clientes.

+ +

Aplicaciones como el buscador Mozilla son clientes sofísticados y modularizados de Componentes XPCOM. De hecho, virtualmente toda la funcionalidad que asocias al buscador - navegación, manejo de ventanas, manejo de cookies, marcadores, seguridad, búsqueda, renderizado y otros aspectos - es definida en componentes XPCOM uy accesada por medio de las interfaces de esos componentes. Mozilla estáhecho de componentes XPCOM.

+ +

Este capítulo demuestra como Mozilla usa algunos de esos objetos XPCOM, como el CookieManager y muestra como se definirá el acceso al componente Weblock.

+ +

Ejemplos de Componentes

+ +

Puedes encontrar más sobre como puedes usar en particular los componentes descritos aquí en la XPCOM API Reference. Por ahora, lo importante es ver como componentes como los que están en esta sección son obtenidos usando el buscador Mozilla.

+ +

Manejador de Cookies

+ +

La gestión de Cookies es uno de los muchos conjuntos de funcionalidad que están disponibles en el buscador en la forma de componente XPCOM y puede ser reutilizado por los desarrolladores que quieran una funcionalidad similar en sus aplicaciones. Siempre que un usuario accesa el Cookie Manager para ver, organizar o borrar cookies que han sido guardadas en el sistema, están usando el componente CookieManager detrás de las pantallas. El Diálogo Cookie Manager muestra la interfaz de usuario [cookie-manager-ui] que se presenta al usuario en Mozilla para trabajar con el componente CookieManager.

+ +

El Diálogo Cookie Manager

+ +

Image:cookie_mgr_dlog.png

+ +

Este Diálogo está escrito en XUL y JavaScript, usa una parte de XPCOM llamadaXPConnect para conectarse sin parches al componente CookieManager (Ve Conexión a Componentes desde la interfaz abajo). XUL es sólo una forma de mostrar la funcionalidad del componente CookieManager, pero es particularmente útil en el mundo de Mozilla.

+ +

La funcionalidad del componente CookieManager está disponeble atravéz de la interfaz nsICookieManager, que es comprendido dentro de los métodos públicos en la tabla de abajo.

+ +

La Interfaz nsICookieManager

+ + + + + + + + + + + + + + + + +
removeAllElimina todas las cookies de la lista de cookies.
enumeratorEnumera la lista de cookies.
removeElimina una cookie en particular de la lista.
+ +

En XPCOM se garantiza que la interfaz permanece igual aún cuando la implementación debajo de ella cambie. Las interfaces sonpúblicas en otras palabras y las implementaciones son privadas[private-xpcom-interfaces]. Cuando un usuario selecciona una de las cookies mostradas en la lista y luego presiona el botón Eliminar, el método Remove de la interfaz nsICookieManager es llamado. La función es llevada a cabo poir el componente CookieManager y la cookie seleccionada es borrada del disco y eliminada de la lista.

+ +

El trozo de código en Obtener el Componente CookieManager en JavaScript muestra como el método Remove() del componente XPCOM CookieManager puede ser llamado desde JavaScript:

+ +

Obtener el Componente CookieManager en JavaScript

+ +
// xpconnect al cookiemanager
+// obtener el componente cookie manager en JavaScript
+var cmgr = Components.classes["@mozilla.org/cookiemanager;1"]
+                     .getService();
+cmgr = cmgr.QueryInterface(Components.interfaces.nsICookieManager);
+
+// llamado como parte de la función largerDeleteAllCookies()
+function FinalizeCookieDeletions() {
+  for (var c=0; c<deletedCookies.length; c++) {
+    cmgr.remove(deletedCookies[c].host,
+                deletedCookies[c].name,
+                deletedCookies[c].path);
+  }
+  deletedCookies.length = 0;
+}
+
+ +
+

Conexión a Componentes desde la Interfaz

+ +

La interfaz de usuario de Mozilla usa un JavaScript al que se le ha dado acceso a los componentes XPCOM en el código de la aplicación con una tecnología llamadaXPConnect.

+ +

XPConnect permite a los métodos de la interfaz definidos via XPIDL ser llamados desde JavaScript como parte de los objetos JavaScript que representan instancias de componentes como el CookieManager.

+ +

XPConnect es lo que enlaza el código de la aplicación a la interfaz de usuario del buscador Mozilla, a otros ambientes basados en Gecko XUL y JavaScript como xpcshell, que es un intérprete JavaScript de línea de comandos y una herramienta incluida en Mozilla.

+ +

Ve http://www.mozilla.org/scriptable/ para más información sobre XPConnect y JavaScript.

+
+ +

Esto no es todo los que hay acerca del tema, desde luego, pero muestra un aspecto importante de XPCOM. Los arreglos contractuales que XPCOM forza abren una forma deinteroperabilidad binaria -para poder accesar, usar y reutilizar componentes XPCOM en tiempo de ejecución. Y ellos hacen posible usar componentes escritos en otros lenguajes - como JavaScript, Python y otros - y usar componentes XPCOM basados en C++desde esos otros lenguajes también.

+ +

En el buscador Mozilla, los componentes son usados desde JavaScript en la interfaz como en C++ o cualquier otro lenguaje. De hecho, una búsqueda en el código fuente de Mozilla revela que este componente CookieManager es llamadosólo desde JavaScript. Usaremos este componente desde JavaScript nosotros mismos como parte de este tutorial[cookie-manager-in-tutorial].

+ +
+

JavaScript y Mozilla

+ +

JavaScript es lalingua franca de la interfaz del buscador Mozilla y las etiquetas entre él y XPCOM están muy bien definidos.Scriptabilidad, esta habilidad de obtener y usar componentes desde JavaScript y otros lenguajes para los que han sido creadas etiquetas XPConnect, es un aspecto del código XPCOM.

+
+ +

El Componente WebBrowserFind

+ +

Todos los componentes son usados en funcionalidad de alto nivel del buscador como nsWebBrowserFind que contiene los métodos find() y findNext() para encontrar el contenido en páginas web y tareas de bajo nivel como manipulación de información. No todas las APIs de Mozilla deben ser integradas en XPCOM, mucha de la funcionalidad está disponible en componentes que pueden ser reutilizados por las extensiones del buscador y/o embebedores de Gecko.

+ +

Además del componente CookieManager, por ejemplo, el componente WebBrowserFind es otra parte de una larga lista de interfaces de búsqueda web que puedes usar. Su interfaz nsIWebBrowserFind se muestra en La Interfaz nsIWebBrowserFind. Para usar este componente, los accesas mediante la interfaz nsIWebBrowserFind y llamas sus métodos.

+ +

La Interfaz nsIWebBrowserFind

+ + + + + + + + + + + + + + + + + + + + + + + + +
findNextEncuentra la siguiente ocurrencia de la cadena buscada.
findBackwardsAtributo booleano que ajusta findNext() para buscar hacia arriba del documento.
searchFramesAtributo booleano que indica si se busca o no en subframes del documento actual.
matchCaseAtributo booleano que indica si coincide o no el caso en la búsqueda.
entireWordAtributo booleano que especifica si debe coincidir toda la palabra o no.
+ +

Una vez que usas la interfaz para obtener el componente, puedes preguntarle al componente que otras interfaces soporta. Este servicio, que es definido en la interfaz básica nsISupports e implementado por todos los componentes XPCOM, te permite requerir y cambiar interfaces en un componente como parte de las capacidades demecanografía de objeto de tiempo de ejecución de XPCOM. Es gestionada por el método QueryInterface que fue visto en el capítulo ¿Qué es XPCOM?. La XPCOM API Reference es una referencia de todos los componentes disponibles en Mozilla.

+ +

El Componente WebLock

+ +

Es hora de ver el componente WebLock como otro ejemplo de componentes XPCOM (ya que lo estarás creando muy pronto). En la programación orientada a objetos, es común diseñar primero la interfaz para definir la funcionalidad que tendrá la abstracción sin tener en cuenta como será hecha esta funcionalidad. Así que dejaremos del lado los detalles la implementación hasta el siguiente capítulo y veremos el componente desde afuera, desde la interfaz del componente WebLock.

+ +

La Interfaz IWebLock

+ + + + + + + + + + + + + + + + + + + + + + + + +
lockBloquea el buscador al sitio actual(o a la lista blanca de sitios aprobados leída del disco).
unlockDesbloquea el buscador para uso irrestricto.
addSiteAñade un nuevo sitio a la lista blanca.
removeSiteElimina un sitio dado de la lista blanca.
sitesEnumerador para la lista de sitios aprobados leída de la lista blanca.
+ +

El componente WebLock es un programa que implementa todos los métodos descritos en la definición de la interfaz. Se registra a sí mismo para su uso al iniciar el buscador y tiene una factoría que crea una instancia de él para ser usada cuando el usuario o el administrador presionan el icono en la interfaz gráfica del buscador.

+ +

Uso de Componentes en Mozilla

+ +

Entonces ¿Cómo se obtienen los componentes en Mozilla?. Has visto algunos pedazos de JavaScript en secciones anteriores de este capítulo, pero no hemos explicado como XPCOM hace los componentes disponibles en general.

+ +

Esta sección aborda el uso práctico de componentes en Mozilla. Está dividido en tres subsecciones: una acerca de como encontrar todos esos componentes binarios en Mozilla y otras dos que corresponden a cada una de las dos formas en las que los clientes accesan normalmente los componentes XPCOM:

+ + + +

Localizar los Componentes de Mozilla

+ +

Este libro trata de dar información de referencia para los componentes XPCOM y sus interfaces que están congeladas al momento de hacer este escrito. El Mozilla embedding project alberga las interfaces congeladas actuales.

+ +

Mozilla también tiene algunas herramientas que pueden encontrar y desplegar información de las interfaces disponibles en Gecko como elVisor de Componentes XPCOM descrito abajo, y LXR, que es una herramienta basada en web para ver el código fuente.

+ +

El reto de hacer disponible buena información acerca de los componentes XPCOM para los posibles clientes, el proceso de congelar las interfaces que son implementadas por esos componentes aún está en progreso. El Visor de Componentes no distingue los componentes que ya están congelados de los que no. En el código fuente que ves en LXR, las interfaces que han sido congeladas han sido marcadas hasta arriba con @status frozen.

+ +
El Visor de Componentes XPCOM
+ +

El Visor de Componentes es una extensión que puedes instalar en tu buscador (en sandbox, no está disponible por ahora):

+ +

Visor de Componentes XPCOM Image:using-component-viewer.png

+ +

La columna de la izquierda muestra los componentes, en este caso un subconjunto resultado de la búsqueda de "gfx" como parte del contract ID y en la columna de la derecha una lista de las interfaces. Cuando abres un componente en la izquierda, puedes ver las interfaces que implementa y una lista con los métodos que tiene cada interfaz.

+ +

El Visor de Componentes XPCOM puede ser extremadamente útil para esta fuente de grandes interrogantes, pero otra vez: despliegatodos los componentes e interfaces contenidas dentro, muchas de las cuales no son prácticas para reutilizarse actualmente o lo suficientemente estables para ser usados viablemente en el desarrollo de tu propia aplicación. Usa estas listas con precaución.

+ +

XXX mediawiki is t3h suxx0r XXX give me my C++

+ +

Usar Componentes XPCOM en tu Cpp

+ +

XPConnect hace fácil accesar los componentes XPCOM como objetos JavaScript, pero usar componentes XPCOM en C++ no es mucho más difícil.

+ +

Gestionar Cookies desde Cpp duplica el código de Obtener el Componente CookieManager en JavaScript, pero en C++ en vez de JavaScript.

+ +

 

+ +

Gestionar Cookies desde Cpp

+ +
nsCOMPtr<nsIServiceManager> servMan;
+nsresult rv = NS_GetServiceManager(getter_AddRefs(servMan));
+if (NS_FAILED(rv))
+  return -1;
+
+nsCOMPtr<nsICookieManager> cookieManager;
+rv = servMan->GetServiceByContractID("@mozilla.org/cookiemanager",
+                                     NS_GET_IID(nsICookieManager),
+                                     getter_AddRefs(cookieManager));
+
+if (NS_FAILED(rv))
+  return -1;
+
+PRUint32 len;
+deletedCookies->GetLength(&len);
+
+for (int c=0; c<len; c++)
+    cookieManager->Remove(deletedCookies[c].host,
+                          deletedCookies[c].name,
+                          deletedCookies[c].path,
+                          PR_FALSE);
+
+ +

XXX: In the original document, there were only the first three parameters to the |Remove| call. I added |PR_FALSE| as a fourth parameter because the interface seems to require it: http://lxr.mozilla.org/mozilla/sourc...Manager.idl#64 This problem also appears in the JavaScript version below, and I've added |false| as a fourth parameter there as well.

+ +

Si tu aplicación está escrita en C++, entonces Gestionar Cookies desde Cpp te muestra los pasos que debes seguir para obtener un componente XPCOM, especifica la interfaz en el componente que quieres usar y llama los métodos en esa interfaz.

+ +

XPConnect: Usar Componentes XPCOM desde un Script

+ +

El componente CookieManager que discutimos al principio del capítulo nos da una buena oportunidad para hablar después acerca de usar componentes desde JavaScript. En el siguiente fragmento de código del diálogo Gestor de Cookies en Mozilla, puedes ver un singletón del componente CookieManager siendo creado con el método getService() y usado para dar la funcionalidad que deja a los usuarios cargar y eliminar cookies desde la interfaz de usuario.

+ +

Gestionar Cookies desde JavaScript

+ +
var cmgr = Components.classes["@mozilla.org/cookiemanager;1"]
+                     .getService();
+cmgr = cmgr.QueryInterface(Components.interfaces.nsICookieManager);
+
+function loadCookies() {
+  // load cookies into a table
+  var enumerator = cmgr.enumerator;
+  var count = 0;
+  var showPolicyField = false;
+  while (enumerator.hasMoreElements()) {
+    var nextCookie = enumerator.getNext();
+    nextCookie = nextCookie.QueryInterface(Components.interfaces.nsICookie);
+    /* .... */
+}
+function FinalizeCookieDeletions() {
+  for (var c=0; c<deletedCookies.length; c++) {
+    cmgr.remove(deletedCookies[c].host,
+                deletedCookies[c].name,
+                deletedCookies[c].path,
+                false);
+  }
+  deletedCookies.length = 0;
+}
+
+ +

XXX: In the original document, there were only the first three parameters to the |remove| call. I added |false| as a fourth parameter because the interface seems to require it: http://lxr.mozilla.org/mozilla/sourc...Manager.idl#64 This problem also appears in the C++ version above, and I've added |PR_FALSE| as a fourth parameter there as well.

+ +

Después los métodos estan siendo llamados en el mismo CookieManager (ejm; cookiemanager.remove, que apunta a la función remove() en La Interfaz nsICookieManager), nota los objetos y métodos especiales XPConnect que reflejan el componente XPCOM en JavaScript.

+ +

Components es el objeto JavaScript que controla la conexión a componentes y classes es un array de todas las clases por las que puedes preguntar mediante el contract ID. Para instanciar un componente XPCOM en JavaScript, creas un nuevo objeto del componente y pasas el contract ID para el componente que quieres y preguntas si será un singleton o una instancia del componente el resultado regresado:

+ +
var cmgr = Components.classes["@mozilla.org/cookiemanager;1"]
+                     .getService();
+
+ +

El objeto resultante cookiemanager nos da acceso a todos los métodos de ese componente que sido definidos en IDL y compilados en una biblioteca de tipos. Usando el componente CookieManager puedes escribir código como este para borrar todas las cookies del sistema:

+ +
cmgr = Components.classes["@mozilla.org/cookiemanager;1"]
+                 .getService();
+cmgr = cmgr.QueryInterface(Components.interfaces.nsICookieManager);
+
+// delete all cookies
+function trashEm() {
+   cmgr.removeAll();
+}
+
+ +

Otro aspecto vital del pegamento de XPConnect que muestra este ejemplo es la disponibilidad del método QueryInterface en todos los objetos que son reflejados en JavaScript desde XPCOM. Como en C++, puedes usar este método para preguntar por otras interfaces que esten disponibles en el objeto dado.

+ +
+

Servicios Frente a Instancias Regulares

+ +

Si los clientes usarán tu componente como una instancia o un servicio es una pregunta de diseño, realmente y algo debes ser claro acerca ello en la documentación de tu componente. Ahora, el método getService() en este ejemplo llama mediante el método createInstance() que también está disponible para el objeto del Componente y cacha el resultado, haciéndolo un singleton en vez de una instancia normal.

+ +

El patrón de diseño singleton que es usado para crear servicios es descrito en Servicios de XPCOM

+
+ +

Recuerda, QueryInterface te permite requerir a un objeto las interfaces que soporta. En el caso del trozo en La Interfaz nsICookieManager, el método QueryInterface es usado para obtener la interfaz nsICookie del enumerador, así que, para instanciar, el código JavaScript puede accesar los atributos value y name para cada cookie.

+ +
    +
  1. Nota: cookie-manager-ui
    Nota que la interfaz no es parte del componente en sí mismo. XPCOM hace fácil usar componentes como CookieManager desde Mozilla's Cross Platform Front End (XPFE) y otras interfaces de usuario, pero el componente no tiene por sí mismo una IU(Interfaz de Usuario).
    2. +
+ +
    +
  1. Nota: private-xpcom-interfaces
    Hay excepciones a esto. Algunas interfaces XPCOM también son privadas y no estan hechas para uso general. Las interfaces privadas no tienen los mismos requerimientos que las que son hechas públicas en IDL.
    2. +
  2. Nota: cookie-manager-in-tutorial
    El componente CookieManager es usado para proveer para la funcionalidad de bloqueo web descrita en este tutorial.
    3. +
+ +

+

« AnteriorSiguiente »

+

+

Copyright (c) 2003 by Doug Turner and Ian Oeschger. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.02 or later. Distribution of substantively modified versions of this document is prohibited without the explicit permission of the copyright holder. Distribution of the work or derivative of the work in any standard (paper) book form is prohibited unless prior permission is obtained from the copyright holder.

+

+ +
 
+ +

diff --git "a/files/es/creaci\303\263n_de_plugins_mozsearch/index.html" "b/files/es/creaci\303\263n_de_plugins_mozsearch/index.html" new file mode 100644 index 0000000000..3cb56bd3d9 --- /dev/null +++ "b/files/es/creaci\303\263n_de_plugins_mozsearch/index.html" @@ -0,0 +1,146 @@ +--- +title: Creación de plugins MozSearch +slug: Creación_de_plugins_MozSearch +tags: + - Plugins_de_búsqueda +translation_of: Mozilla/Creating_MozSearch_plugins +--- +

Firefox 2 admite MozSearch, una forma simplificada del formato OpenSearch de Amazon A9 para crear plugins de búsqueda. Los plugins OpenSearch también son admitidos; visite la web de OpenSearch para más detalles. +

UN plugin de búsqueda MozSearch es un archivo XML que describe el motor de búsqueda, su URL, y los parámetros que se necesitan pasar a esa URL. +

+
Nota: Tenga en cuenta que MozSearch es específico para Firefox; si desea escribir plugins que sean compatibles con otros navegadores, deberá usar el sistema estándar de OpenSearch. Afortunadamente, los dos formatos son muy parecidos y es fácil cambiar de uno a otro dependiendo de tus necesidades.
+

El archivo del plugin

+

El archivo XML que describe el motor de búsqueda es realmente sencillo siguiendo la plantilla básica de abajo. Las secciones en cursiva necesitan ser personalizadas dependiendo de las necesidades del motor de búsqueda del plugin que estés escribiendo. +

+
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>NombreDelMotor</ShortName>
+<Description>Descripcion</Description>
+<InputEncoding>CodificacionDeEntrada</InputEncoding>
+<Image width="16" height="16">data:image/x-icon;base64,DatosDeLaImagen</Image>
+<Url type="text/html" method="metodo" template="URLdeLaBusqueda">
+  <Param name="parametro1" value="parametro1"/>
+  ...
+  <Param name="parametroN" value="parametroN"/>
+</Url>
+<Url type="application/x-suggestions+json" template="URLdeSugerencias"/>
+<SearchForm>URLdelFormularioDeBusqueda</SearchForm>
+</SearchPlugin>
+
+
ShortName +
Un nombre breve para el motor de búsqueda. +
+
Description +
Una pequeña descripción del motor de búsqueda. +
+
InputEncoding +
La codificación a usar para los datos de entrada al motor de búsqueda. +
+
Image +
Icono codificado en Base-64 de 16x16 que represente el motor de búsqueda. Una herramienta útil que puedes usar para construir estos la puedes encontrar aquí: The data: URI kitchen. +
+
Url +
Describe la URL o URLs a usar en la búsqueda. El atributo method indica si se usará una petición GET o POST para devolver el resultado. El atributo template indica la URL base para la consulta. +
+
Hay dos tipos de URL que puedes especificar: +
+ +
Para ambos tipos de URL, puedes usar {searchTerms} para sustituir los términos introducidos por el usuario en la barra de búsqueda. +
+
Para la consulta de sugerencias de búsqueda, la plantilla de la URL especificada se usa para devolver una lista de sugerencias en formato JavaScript Object Notation (JSON) format. Para más detalles de como implementar soporte para sugerencias de búsqueda en un servidor, lea Permitir sugerencias en los plugins de búsqueda. +
+

Imagen:SearchSuggestionSample.png +

+
Param +
Los parámetros que necesitan ser enviados por la búsqueda, como parejas clave/valor. Cuando se especifican valores, puedes usar {searchTerms} para insertar los términos introducidos por el usuario en la barra de búsqueda. +
+
SearchForm +
La URL a la que ir para abrir la pagina de búsqueda en el sitio para el que el plugin fue diseñado. Esto da a Firefox una vía que permite que el usuario visite la web directamente. +
+

Autodetección de plugins de búsqueda

+

Una web que ofrezca un plugin de búsqueda pueden anunciarlo para que los usuarios de Firefox puedan descargar e instalar fácilmente el plugin. +

Para permitir la autodetección, simplemente debes añadir una línea a la sección <HEAD> de tu web: +

+
<link rel="search" type="application/opensearchdescription+xml" title="TituloDeLaBusqueda" href="URLdelPlugin">
+
+

Remplaza los puntos en cursiva como se explica aquí: +

+
TituloDeLaBusqueda +
El nombre de la búsqueda a realizar, como "Buscar en MDC" o "Búsqueda Yahoo!". +
+
URLdelPlugin +
La URL a el XML del plugin de búsqueda, desde el que el navegador puede descargarlo. +
+

Si tu sitio ofrece varios plugins de búsqueda, puedes habilitar la autodetección de todos. Por ejemplos: +

+
<link rel="search" type="application/opensearchdescription+xml" title="Miweb: Buscar por autor" href="http://www.mysite.com/mysiteauthor.xml">
+<link rel="search" type="application/opensearchdescription+xml" title="Miweb: Buscar por título" href="http://www.mysite.com/mysitetitle.xml">
+
+

De esta forma, tu sitio puede ofrecer plugins tanto para buscar por autor como por titulo de forma separada. +

+

Ejemplo: buscando en Yahoo!

+

El siguiente XML es el plugin de búsqueda de Firefox 2 para Yahoo! en inglés: +

+
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>Yahoo</ShortName>
+<Description>Yahoo Search</Description>
+<InputEncoding>UTF-8</InputEncoding>
+<SuggestionUrl>http://ff.search.yahoo.com/gossip?output=fxjson&command=</SuggestionUrl>
+<Image width="16" height="16">data:image/x-icon;base64,R0lGODlhEAAQAJECAP8AAAAAAP///wAAACH5BAEAAAIALAAAAAAQABAAAAIplI+py+0NogQuyBDEnEd2kHkfFWUamEzmpZSfmaIHPHrRguUm/fT+UwAAOw==</Image>
+<Url type="text/html" method="GET" template="http://search.yahoo.com/search">
+  <Param name="p" value="{searchTerms}"/>
+  <Param name="ei" value="UTF-8"/>
+  <Param name="fr" value="moz2"/>
+</Url>
+<SearchForm>http://search.yahoo.com/</SearchForm>
+</SearchPlugin>
+
+

Pongamos que el usuario elige usar el plugin de búsqueda de Yahoo! e introduce "mozilla" en la barra de búsqueda y pulsa la tecla enter. Firefox usará el motor de búsqueda anterior para construir la siguiente URL: +

+
http://search.yahoo.com/search?p=mozilla&ei=UTF-8&fr=moz2
+
+

Si el usuario pulsa sobre el icono de la lupa en la barra de búsqueda, o elige la opción Búsqueda web en el menú Herramientas cuando la barra de búsqueda no está visible, el navegador le enviará a <tt>http://search.yahoo.com/</tt>, el valor del elemento <SearchForm>. +

+

Ejemplo: buscando en el MDC

+

Este plugin te permitirá buscar fácilmente en la web del Mozilla Developer Center. +

+
<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
+<ShortName>MDC</ShortName>
+<Description>Mozilla Developer Center search</Description>
+<InputEncoding>UTF-8</InputEncoding>
+<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz%2F%2Fz8DJQAggJiQOe%2Ffv2fv7Oz8rays%2FN%2BVkfG%2FiYnJfyD%2F1%2BrVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw%2F8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi%2FG%2BQKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo%2BMXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia%2BCuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq%2FvLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg%2FkdypqCg4H8lUIACnQ%2FSOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD%2BaDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg%3D%3D</Image>
+<Url type="text/html" method="GET" template="http://developer.mozilla.org/en/docs/Special:Search?search={searchTerms}"/>
+<SearchForm>http://developer.mozilla.org/en/docs/Special:Search</SearchForm>
+</SearchPlugin>
+
+

Date cuenta que en este caso en vez de usar <Param> para definir los parámetros del motor de búsqueda, simplemente se incrustó dentro de la URL de la plantilla. Es la forma recomendada de hacerlo cuando usamos como metodo GET. <Param> se usaría para POST. +


+

+

Consejos ante cualquier problema

+

Si hay alguna errata en el XML del plugin de búsqueda, puede que te encuentres con errores al añadir un plugin en Firefox (Bon Echo) Alpha 3. Los mensajes de error quizás no te ayuden completamente, sin embargo, los consejos siguientes pueden ayudarte a encontrar el problema. +

+ +

Además, el servicio de plugin de búsqueda proporciona un mecanismo de registros que puede ser usado por los desarrolladores del mismo. Usa about:config para fijar la preferencia 'browser.search.log' a true. La información aparecerá en la Consola de error de Firefox (Herramientas->Consola de error) cuando se añada el plugin de búsqueda. +

+

OpenSearch

+

Firefox 2 también admite el formato OpenSearch de Amazon A9 para compartir resultados de búsqueda. Si escribes un plugin XML usando la Sintaxis OpenSearch, puedes meterlo en el directorio <tt>searchengines</tt> dentro del perfil de usuario, en el directorio de la aplicación, o en el paquete de instalación para añadir soporte a dicho motor de búsqueda. +

El formato OpenSearch es similar al formato SearchPlugin de Mozilla. La principal diferencia es el elemento inicial y los espacios de los nombres del XML. +

+
<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+...
+</OpenSearchDescription>
+
+

Material de referencia

+ +
+
+{{ languages( { "ca": "ca/Creaci\u00f3_de_connectors_MozSearch", "en": "en/Creating_MozSearch_plugins", "fr": "fr/Cr\u00e9ation_de_plugins_MozSearch", "it": "it/Creare_Plugin_MozSearch", "ja": "ja/Creating_MozSearch_plugins", "pl": "pl/Tworzenie_wtyczek_MozSearch", "zh-tw": "zh_tw/\u88fd\u4f5c_MozSearch_\u641c\u5c0b\u6a21\u7d44" } ) }} diff --git a/files/es/creando_un_skin_para_firefox/como_empezar/index.html b/files/es/creando_un_skin_para_firefox/como_empezar/index.html new file mode 100644 index 0000000000..d4ef1f553f --- /dev/null +++ b/files/es/creando_un_skin_para_firefox/como_empezar/index.html @@ -0,0 +1,108 @@ +--- +title: Como empezar +slug: Creando_un_skin_para_Firefox/Como_empezar +tags: + - Complementos + - Temas + - Todas_las_Categorías +translation_of: Archive/Mozilla/Creating_a_sking_for_Firefox_Getting_Started +--- +

+

+

Setup

+

Descargue la última versión de Firefox e instalela. Asegúrese de instalar también el módulo DOM Inspector. +

+

Extraer el tema

+

Aunque en teoría puede comenzar con cualquier tema diseñado para Firefox, por motivos de consistencia, vamos a editar Winstripe, el tema por defecto de Firefox. Se encuentra ubicado en el archivo "classic.jar" dentro del directorio de instalación de Firefox. Un archivo .jar es en realidad un archivo zip renombrado que puede abrir con su programa de compresión favorito de la misma forma que abre un archivo zip. Sin embargo, si su aplicación cree que no es el formato correcto, puede simplemente renombrar el archivo a "classic.zip" y continuar la extracción. +

+
Ubicaciones del archivo Classic.jar
+

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar +

Windows: \Program Files\Mozilla Firefox\chrome\classic.jar +

Mac OS X: +

+ +

Copie el archivo classic.jar a una carpeta de fácil acceso ("Clasic" es una ubicación recomendable). Ahora extraiga el contenido a esta carpeta, manteniendo la estructura de directorios. +

+

Directorios

+

Dentro del archivo classic.jar encontrará un directorio, skin, así como dos archivos preview.png e icon.png. +

+
skin 
Skin simplemente contiene otro directorio, classic. +
+ +

Instalar el nuevo tema

+

Antes de que uno pueda ver los cambios que hace a un tema de Firefox (las ediciones sin reiniciar son difíciles de configurar), debe aprender como empaquetar el tema classic para hacerlo instalable. Para el propósito de esta discusión le llamaremos a su tema "My_Theme",aunque puede reemplazarlo con cualquier otro nombre. +

+
Copiando los archivos necesarios
+

El primer paso es mover los archivos a su directorio correspondiente. Cree un nuevo directorio llamado My_Theme. En este directorio cree los directorios browser, global, communicator, help, y mozapps así como los archivos icon.png y preview.png. +

+
Creando los archivos de instalación
+
Contents.rdf
+

Haga una copia de contents.rdf,colóquelo en \My_Theme y ábralo en su editor de texto. Este archivo es una pequeña base de datos en formato XML que se utiliza para describir el skin. +

En el código busque todas las coincidencias de My_Theme y reemplácelas con el nombre de su tema. +

La sección packages lista que componentes del explorador está modificando. Si también tenemos skins para Chatzilla, debemos añadir otra línea similar a las anteriores y modificarla para que apunte a Chatzilla. Esta lista incluye todo lo que hemos cambiado, así que simplemente modifique el texto azul para que apunte al nombre/versión que ha utilizado en las secciones anteriores a esta. +


+

+
<RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/>
+<RDF:li resource="urn:mozilla:skin:My_Theme:editor"/>
+<RDF:li resource="urn:mozilla:skin:My_Theme:global"/>
+<RDF:li resource="urn:mozilla:skin:My_Theme:messenger"/>
+<RDF:li resource="urn:mozilla:skin:My_Theme:navigator"/>
+
+

Guarde el archivo y salga de su editor de texto. +

+
install.rdf
+

Haga una copia de install.rdf, colóquelo en \My_Theme y ábralo con su editor de texto favorito. Este archivo es una pequeña base de datos en formato XML que se utiliza para describir el skin. +

+
  <Description about="urn:mozilla:install-manifest">
+  <em:id>{Themes_UUID}</em:id>
+  <em:version>Themes_Version</em:version>
+
+

La primera sección requiere a) Buscar un UUID para el skin y b) Darle un número de versión al tema. Una vez hecho esto, inserte la información como se muestra en el recuadro anterior y desplácese hacia abajo en el texto. +

+

Archivos CSS

+

Los archivos CSS que se encuentran en estos directorios le indican al navegador como visualizar los botones y otros controles, donde poner las imágenes, que borde y que relleno debería colocar alrededor de ellos, etc. Para la siguiente parte, vamos a modificar el botón estándar. +

Entre en \global\ y abra button.css en su editor de texto favorito. Desplácese hacia abajo hasta button {. Esta sección define el botón normal y su estado básico (Sin el puntero del ratón sobre él, sin estar deshabilitado y sin estar seleccionado). +

Cambie background-color: a DarkBlue y el color: a White, y guarde el archivo. +

+

Empaquetando el archivo JAR

+

Ahora todo lo que necesita hacer es empaquetar el archivo JAR utilizando su gestor de archivos con la siguiente estructura de directorios: +

+
browser +
communicator +
global +
help +
mozapps +
+

contents.rdf +install.rdf +icon.png +preview.png +

+

Ejecutar la instalación desde la Web

+

Para instalar su archivo jar directamente desde la Web, necesita ejecutar algo de código Javascript. +

+
<a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN,
+ "myskin.jar", "My Skin Theme")'>install My Skin</a>
+
+


+Si tiene los archivos jar en su disco duro y quiere instalarlos, entonces descargue o utilice este formulario. +

O puede simplemente abrir la ventana de temas en Mozilla y arrastrar y soltar su archivo .jar en ella. +


+categorías +

enlaces interwikis +


+

+
+
+{{ languages( { "de": "de/Theme_erstellen/Einf\u00fchrung", "en": "en/Creating_a_Skin_for_Firefox//Getting_Started", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox//Premiers_pas", "ja": "ja/Creating_a_Skin_for_Firefox/Getting_Started", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/Zaczynamy", "pt": "pt/Criando_um_visual_para_o_Firefox/Iniciando", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/\u4e0a\u624b\u7bc7" } ) }} diff --git a/files/es/creando_un_skin_para_firefox/uuid/index.html b/files/es/creando_un_skin_para_firefox/uuid/index.html new file mode 100644 index 0000000000..bcaaedb1dc --- /dev/null +++ b/files/es/creando_un_skin_para_firefox/uuid/index.html @@ -0,0 +1,16 @@ +--- +title: UUID +slug: Creando_un_skin_para_Firefox/UUID +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/UUID +--- +

+

+

UUID: Identificador único universal

+

El UUID (Universal Unique Identifier) se puede obtener visitando http://www.famkruithof.net/uuid/uuidgen o escribiendo "firebot: uuid?" en irc.mozilla.org. +

+

Vea también

+

Generando_GUIDs +

+
+
+{{ languages( { "en": "en/Creating_a_Skin_for_Firefox/UUID", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/UUID", "ja": "ja/Creating_a_Skin_for_Firefox/UUID", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/UUID", "pt": "pt/Criando_um_visual_para_o_Firefox/UUID", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/UUID" } ) }} diff --git a/files/es/creando_un_tema_para_firefox/index.html b/files/es/creando_un_tema_para_firefox/index.html new file mode 100644 index 0000000000..f97da06e15 --- /dev/null +++ b/files/es/creando_un_tema_para_firefox/index.html @@ -0,0 +1,36 @@ +--- +title: Creando un tema para Firefox +slug: Creando_un_tema_para_Firefox +tags: + - Complementos + - Temas + - Todas_las_Categorías +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox +--- +

 

+

Introducción

+

Para crear un skin para Firefox, primero necesitara conocer tres cosas. Como editar imágenes, como extraer archivos comprimidos, y como modificar hojas de estilo CSS. Firefox utiliza los formatos gráficos estándar gif, png y jpg para los botones y las hojas de estilo para embellecer los demás elementos del interfaz de usuario.

+

¿Que es un skin?

+

Un skin no modifica totalmente el interface, simplemente define como se muestra. No puede cambiar que ocurre cuando el usuario hace clic con el botón derecho del ratón sobre una imagen, pero puede cambiar el aspecto del menú contextual (Haciéndolo azul con puntos rosas, por ejemplo). Si quiere cambiar la funcionalidad de Firefox, tendra que ver más detenidamente la modificación de chrome. Lo cual va más allá del propósito de este documento.

+

Contenidos

+ +
+
+

Información sobre el documento original

+ +
+

categorías

+

enlaces interwikis

+
+  
+

{{ languages( { "de": "de/Theme_erstellen", "en": "en/Creating_a_Skin_for_Firefox", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox", "ja": "ja/Creating_a_Skin_for_Firefox", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c" } ) }}

+

 

+

 

diff --git "a/files/es/creando_una_extensi\303\263n/index.html" "b/files/es/creando_una_extensi\303\263n/index.html" new file mode 100644 index 0000000000..6a155e7f50 --- /dev/null +++ "b/files/es/creando_una_extensi\303\263n/index.html" @@ -0,0 +1,236 @@ +--- +title: Creando una extensión +slug: Creando_una_extensión +tags: + - Complementos + - Todas_las_Categorías + - extensiones +--- +

Introducción

+

Este tutorial contiene los pasos necesarios para desarrollar una extensión muy básica - la cuál añadirá un texto que diga "¡Hola, mundo!" en el panel de la barra de estado del navegador Firefox

+
+

Nota Este tutorial sobre el desarrollo de una extensión es para la versión 1.5 de Firefox . Existen otros para versiones anteriores.

+
+

Preparando el Entorno de Desarrollo

+

Las extensiones se distribuyen en archivos comprimidos en formato ZIP, o en paquetes, con extensión xpi (se pronuncia “zippy”). Los archivos XPI contienen el siguiente código:

+
extension.xpi:
+              /install.rdf
+              /components/*
+              /components/cmdline.js
+              /defaults/
+              /defaults/preferences/*.js
+              /plugins/*
+              /chrome.manifest
+              /chrome/icons/default/*
+              /chrome/
+              /chrome/content/
+
+
+

Debido a esto, es más fácil presentar nuestros archivos fuente en un modo similar, a menos que decidamos crear alguno del tipo "Makefile" o un script "shell" para comprimirlos todos. Incluso si optamos por este método, es muy sencillo hacer pruebas, gracias al sistema de Addons de Firefox 1.5.

+

Aclarado esto comenzamos. Crea una carpeta para tu extensión en algún lugar de tu disco duro, e.j. C:\extensions\my_extension\ o ~/extensions/my_extension/. (Nota: usa todos los caracteres en minúscula) Dentro de esta carpeta creamos otra carpeta llamada chrome, dentro de chrome creamos otra carpeta llamada content. (En sistemas Unix podemos crear los 3 directorios con el siguiente comando mkdir -p chrome/content dentro del directorio de raíz de la extensión.)

+

Dentro de la raíz de la carpeta extensión, junto a la carpeta chrome, creamos dos archivos de textos vacíos, uno llamado chrome.manifest y el otro install.rdf.

+

Deberías tener algo así:

+
<carpeta extension>\
+          install.rdf
+          chrome.manifest
+          chrome\
+             content\
+
+

Puedes encontrar más tips (ideas) sobre la configuración del ambiente de desarrollo en Mozillazine Knowledge Base.

+

Crear el manifiesto de la instalación

+

Abre el archivo llamado install.rdf que creaste en la carpeta raíz de tu extensión y escribe lo siguiente en él:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>sample@foo.net</em:id>
+    <em:version>1.0</em:version>
+    <em:type>2</em:type>
+
+    <!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.0+</em:minVersion>
+        <em:maxVersion>1.5.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>¡Ejemplo!</em:name>
+    <em:description>Una extensión de prueba</em:description>
+    <em:creator>Tu nombre aquí</em:creator>
+    <em:homepageURL>http://www.foo.com/</em:homepageURL>
+  </Description>
+</RDF>
+
+ + +

Mira Instalar el manifest para una relación completa de las propiedades tanto obligatorias como opcionales.

+

Guarda el archivo.

+

Ampliando el navegador con XUL

+

La interfaz de usuario de Firefox está escrita en XUL y Javascript. XUL es una implementación XML que proporciona elementos de la interfaz de usuario como botones, menús, barras de botones etc. Las acciones del usuario se controlan mediante JavaScript. Para ampliar el navegador modificamos o añadimos elementos de la interfaz de usuario. Añadimos nuevos elementos mediante la inserción de nuevos elementos XUL DOM dentro de la ventana del navegador, y los modificamos usando scripts e incluyendo manejadores de eventos.

+

El navegador está definido en un archivo XUL llamado browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar que incluye content/browser/browser.xul). En el archivo browser.xul podemos encontrar la barra de estado, definida en aproximadamente estos términos:

+
<statusbar id="status-bar">
+ ... <statusbarpanel>s ...
+</statusbar>
+
+

<statusbar id="status-bar"> es un "punto de anclaje" para una capa XUL.

+

Capas XUL

+

Capas XUL son una manera de añadir un elemento a la interfaz de usuario en un documento XUL durante el tiempo de ejecución. Una capa XUL es un archivo .xul que marca elementos XUL para insertar en puntos de anclaje específicos dentro del "documento maestro". Estos fragmentos indican que los elementos pueden ser añadidos, modificados o eliminados.

+

Ejemplo de documento de capa XUL

+
<?xml version="1.0"?>
+<overlay id="sample"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <statusbar id="status-bar">
+  <statusbarpanel id="my-panel" label="Hello, World"/>
+ </statusbar>
+</overlay>
+
+

El <statusbar> llamado status-bar indica el punto de anclaje dentro de la ventana del navegador donde lo queremos incluir.

+

El <statusbarpanel> hijo es un nuevo elemento que queremos insertar en el punto de anclaje.

+

Copia el código de ejemplo arriba mostrado y guardaló en un archivo llamado sample.xul dentro de la carpeta chrome/content que creó.

+

Para más información sobre elementos de inserción y modificar la interfaz de usuario empleando Capas, mira más abajo.

+

Chrome URIs

+

Los archivos XUL forman parte de "Chrome Packages" - paquetes de componentes de interfaz del usuario, los cuales se cargan a través de la dirección chrome:// URIs. Más que cargar el navegador desde el disco utilizando un (archivo) file:// URI (ya que la ubicación de Firefox en un sistema puede cambiar de una plataforma a otra y de un sistema a otro), los desarrolladores de Mozilla se decantaron por una solución para crear URI al contexto de XUL,que la aplicación instalada ya conoce.

+

La ventana del navegador es: chrome://browser/content/browser.xul ¡Prueba a teclear esta dirección URL en la barra de navegación de Firefox!

+

Los Chrome URIs constan de varios componentes:

+ +

Por lo tanto, chrome://foo/skin/bar.png carga el archivo bar.png de la sección skin, del tema foo.

+

Cuando cargas contenido usando un Chrome URI, Firefox usa el Chrome Registry para traducir esos URIs en los archivos fuentes en el disco (o en paquetes JAR).

+

Creando un Chrome manifest

+

Para más información sobre el Chrome manifest y las propiedades que soporta, mira la referencia Chrome Manifest.

+

Abre el archivo llamado chrome.manifest que creaste en el directorio chrome en la raìz de la jerarquía de la carpeta orìgen de la extensión

+

Agrega este código:

+
content     sample    chrome/content/
+
+

(¡No te olvides de la barra oblicua, "/"! sin ella, la extensión no se cargará.)

+

Esto especifica lo siguiente:

+
    +
  1. Tipo de material dentro de un paquete chrome.
    2. +
  2. Nombre del paquete chrome (Asegúrate de usar todos los caracteres en minúscula para el nombre del paquete "sample", ya que Firefox/Thunderbird no lo soporta en la versión 2 y anteriores - {{ Bug(132183) }})
    3. +
  3. Localización de los archivos del paquete chrome.
    4. +
+

Esta línea dice que para obtener una muestra del paquete chrome, debemos encontrar los archivos de content en la ruta chrome/content, la cual es relativa a la ruta de chrome.manifest.

+

Nótese que el contenido, los archivos de idioma y los del skin, deben mantenerse dentro de carpetas llamadas content (para contenido), locale (para idioma) y skin dentro de tu subdirectorio chrome.

+

Salva los cambios del archivo. Cuando inicies Firefox con tu extensión, (lo cual se hará despues en este tutorial), aquel-Firefox- registrará el chrome del paquete.

+

Registrar un Overlay

+

Necesitas que Firefox fusione tu overlay con la ventana del browser cada vez que se muestra, por lo que añade esta línea a tu archivo chrome.manifest:

+
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
+
+


+ Esto le dice a Firefox que fusione sample.xul con browser.xul cuando browser.xul se cargue.

+

Pruebas

+

Primero, necesitamos informar a Firefox acerca de tu extensión. En los malos y viejos tiempos de Firefox 1.0, ésto significaba empaquetar tu extensión como un XPI e instalarlo a través de la interfaz de usuario, lo que era engorroso. Ahora es mucho más simple.

+
    +
  1. Abre tu carpeta Profiles y adentrate en el perfil con el que deseas trabajar (e.g. Firefox/Profiles/<profile_id>.default/).
    2. +
  2. Abre la carpeta extensions (creala si ésta no existe)
    3. +
  3. Crea un nuevo archivo de texto, y añade la ruta de la carpeta que contiene tu extensión, e.g. C:\extensions\my_extension\ o ~/extensions/my_extension. Guarda el archivo con el identificador de tu extensión como nombre de archivo, e.g. sample@foo.net
    4. +
+

¡¡Ahora estás preparado para comprobar tu extensión!!

+

Ejecuta Firefox. Firefox detectará el vínculo de texto al directorio de tu extensión y la instalará. Cuando la ventana del navegador aparezca verás el texto "Hello, World!" en el lado derecho del panel de la barra de estado.

+

Ahora puedes retornar al archivo .xul y realizar cambios, reinicia Firefox y éstos se verán reflejados.

+<center> +

Image:Helloworld_tools_menu.PNG

+

Image:Helloworld_extensions_wnd.PNG

+</center> +

Empaquetado

+

Ahora que tu extensión funciona, puedes empaquetarla para su distribución e instalación.

+

Comprime con zip los contenidos de las carpetas de tu carpeta (no la carpeta de la extensión en sí misma) y cambia la extensión del archivo de .zip a .xpi. En windows XP, puedes hacer esto fácilmente seleccionando todas las carpetas y subcarpeta de la carpeta de tu extensión, haz click con el botón derecho y selecciona "enviar a" -> "Comprimir carpeta". Se creará un archivo .zip. Renómbralo y ya está.

+

Ahora sube el archivo .xpi a tu servidor, asegurándote de que se sirve con el tipo mime application/x-xpinstall. Haciendo un hipervínculo al archivo puedes permitir a la gente que descargue e instale tu extensión en Firefox.

+

Usando addons.mozilla.org

+

En el sitio de distribución Mozilla Update puedes subir tus extensiones totalmente gratis. Tus extensiones serán alojadas en los mirrors de la red Mozilla para garantizar la transferencia directa aún cuando pueda ser muy popular su descarga. La web de Mozilla proporciona a los usuarios una instalación sencilla, y podrán automáticamente disponer de las ultimas versiones que hagas de tu extensión. Además Mozilla Update permite que los usuarios comenten y hagan mejoras sobre tu extensión. ¡Es muy recomendable que utilices Mozilla Update para distribuir tus extensiones!

+

¡Visita http://addons.mozilla.org/developers/ para crear una cuenta y comenzar a distribuir tu extensión!

+

Nota: Tu extensión será aceptada y descargada más rápidamente si tiene una buena descripción y algunas imágenes en uso.

+

Colocación de extensiones en el registro de Windows

+

En Windows, la información sobre las extensiones se puede agregar al registro, y dicha extensión será automáticamente seleccionada la próxima vez que se ejecute la aplicación. Esto permite que los instaladores de la aplicación integren fácilmente la extensión. Ver Agregar una Extensión usando el Registro de Windows para más información.

+

Más sobre las capas XUL

+

Además de añadir elementos de la interfaz de usuario en el punto de anclaje, puede emplear fragmentos XUL dentro de las capas para:

+ +
<statusbarpanel position="1" .../>
+
+<statusbarpanel insertbefore="other-id" .../>
+
+<statusbarpanel insertafter="other-id" .../>
+
+

Creando nuevos componentes de la interfaz de usuario

+

Puedes crear tus propias ventanas y cajas de diálogo separadas de los archivos .xul, proporcionar funcionalidad colocando acciones del usuario en ejecución en archivos .js , usar métodos DOM para manipular UI widgets. Puedes usar las reglas de estilos .css, adjuntar imágenes, cambiar colores, etc.

+

Ver la guía XUL contiene más recursos para desarrolladores XUL.

+

Archivos por defecto

+

Los archivos por defecto son utilizados para crear un perfil de usuario y se crean en la carpeta defaults/ que se encuentra dentro de la carpeta raíz de tu extensión. Los archivos .js se deben almacenar dentro de defaults/preferences/ - al ser almacenados aquí serán cargados automáticamente por el sistema de preferencias de Firefox- de modo que se pueda tener acceso mediante las Preferences API.

+

Componente XPCOM

+

Firefox soporta el uso del componente XPCOM en extensiones. Puedes crear tus propios componentes fácilmente usando JavaScript o C++ (usando el Gecko SDK).

+

Coloca todos tus archivos .js o .dll en el directorio components/- para que sean automáticamente registrados la primera vez que inicie Firefox después de instalada la extensión.

+

Para más información revisa How to Build an XPCOM Component in Javascript y el libro Creating XPCOM Components.

+

Comandos de la aplicación

+

Una de las ventajas de las aplicaciones que usan el componente XPCOM es la de poder usar líneas de comandos para su ejecución tanto en Firefox como en Thunderbird. Puedes utilizar esta técnica para correr tus extensiones:

+
 firefox.exe -myapp
+
+

I should move the useful parts of this to the Command Line page. -Nickolay This is done by adding a component containing the function... function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } This function is run by firefox each time firefox is started. Firefox registers the myAppHandlerModule's by calling its 'registerSelf()'. Then it obtains the myAppHandlerModule's handler factory via 'getClassObject()'. The handler factory is then used to create the handle using its 'createInstance(). Finally, the handle's 'handle(cmdline)' processes the command line cmdline's handleFlagWithParam() and handleFlag(). Ver Chrome: Command Line o visitar forum discussion para más detalles.

+

Ubicación

+

Para permitir más de un lenguaje, debes separar las cadenas del contenido usando entities y string bundles. ¡Es mucho más fácil de hacer esto cuando estás desarrollando tu extensión que volver y hacerlo luego!

+

La información de la ubicación está almacenada en el directorio locale para las extensiones. Por ejemplo, para agregar un locale para nuestra extensión de prueba, crea un directorio llamado "locale" en chrome (donde esta ubicado el "contenido" del directorio) y agrega las siguientes líneas al archivo chrome.manifest:

+
locale sample sampleLocale chrome/locale/
+
+

Para crear valores de atributos ubicables en XUL, pones los valores en un archivo .ent (o un .dtd), el cual deberá ponerse en el directorio locale y verse así:

+
<!ENTITY  button.label     "Clickeame!">
+<!ENTITY  button.accesskey "C">
+
+

Y entonces inclúyelo en la parte superior del documento XUL (pero debajo de: "<?xml version"1.0"?>") quedando asi:

+
<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">
+
+

Donde window es el localName del elemento raíz del documento XUL, y el valor de la propiedad SYSTEM es la URI de chorme al archivo entity. Para nuestra extensión de ejemplo, el elemento de la raíz es overlay.

+

Para usar entities, tu XUL debe verse asi:

+
<button label="&button.label;" accesskey="&button.accesskey;"/>
+
+

El registro de Chrome se asegurara que el archivo entity ha sido cargado del paquete correspondiente a la localizacion elegida.

+

Para las lineas que usarás en tu script, crea un archivo .properties; un archivo de texto que contendrá estas líneas:

+
key=value
+
+

Entonces usa el tag nsIStringBundleService/nsIStringBundle o el tag <stringbundle> para cargar los valores en el script.

+

Comprender el navegador

+

Utiliza DOM Inspector (no es parte de la instalación Estandar de Firefox, debes reinstalar seleccionando instalación personalizada y elegir Herramientas de Desarrollo si no hay un elemento "Inspector de DOM" en el menu Herramientas del browser) para inspeccionar la ventana del browser o cualquier otra ventana XUL que quieras extender.

+

Utiliza el botón de búsqueda apuntar-y-clic situado en la parte superior izquierda de la barra de herramientas de DOM Inspector visualmente en un nodo de la ventana XUL para seleccionarlo. Cuando hagas esto DOM Inspector ira dentro del árbor jerárquico al nodo sobre el que hiciste clic.

+

Utiliza el panel lateral derecho de DOM Inspector para descubrir los puntos de anclaje con los ids que puedes utilzar para insertar tus elementos en los overlays. Si no pudieses encontrar un elemento con un id sobre el que hacer la mezcla, puedes añadir un script en tu overlay e insertar tus elementos cuando el evento load se dispare en la ventana XUL maestra.

+

Depurar extensiones

+

Herramientas analitícas para Depurar (Debugging)

+ +

printf debugging

+ +

dump("string") (ver el enlace para detalles)

+ +

Depuración avanzada

+ + +

Guía Rápida

+

Otro tutorial desde MozillaZine Knowledge Base, también puedes bajar este archivo para usarlo como base en la creación de tus extensiones helloworld.zip.

diff --git "a/files/es/crear_un_m\303\263dulo_de_administrador_de_cuentas_almacenadas/index.html" "b/files/es/crear_un_m\303\263dulo_de_administrador_de_cuentas_almacenadas/index.html" new file mode 100644 index 0000000000..480f8db420 --- /dev/null +++ "b/files/es/crear_un_m\303\263dulo_de_administrador_de_cuentas_almacenadas/index.html" @@ -0,0 +1,122 @@ +--- +title: Crear un módulo de Administrador de Cuentas almacenadas +slug: Crear_un_módulo_de_Administrador_de_Cuentas_almacenadas +tags: + - Firefox 3 + - páginas_a_traducir +translation_of: Mozilla/Creating_a_login_manager_storage_module +--- +

{{ Fx_minversion_header(3) }} The Login Manager manages and stores user passwords. Extensions can replace the built-in password storage with their own implementation. This can be useful if you want to integrate Firefox password management with an existing password management system, or use your own password storage format or database.

+ +

If you just want to use the Login Manager in your extensions, refer to the article Using nsILoginManager.

+ +

Overriding the built-in Login Manager storage consists of two tasks:

+ +
    +
  1. Implement the {{ Interface("nsILoginManagerStorage") }} interface.
    2. +
  2. Register that interface in a specific category.
    3. +
+ +
Some work has already been done to integrate the Login Manager with the Mac OS X keychain ({{ Bug(106400) }}) and Gnome Keyring Manager ({{ Bug(309807) }}). You should start with the existing code if you want to implement that in your extension.
+ +

Sample JavaScript implementation

+ +

The following code snippet is a JavaScript component that implements a dummy {{ Interface("nsILoginManagerStorage") }} interface. See How_to_Build_an_XPCOM_Component_in_Javascript for more details about JavaScript components.

+ +
const Cc = Components.classes;
+const Ci = Components.interfaces;
+
+Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+function SampleLoginManagerStorage() {}
+SampleLoginManagerStorage.prototype = {
+  classDescription: "Sample nsILoginManagerStorage implementation",
+  contractID: "@example.com/login-manager/storage/sample;1",
+  classID: Components.ID("{364a118c-747a-4f6d-ac63-2d2998e5a5c1}"),
+  QueryInterface: XPCOMUtils.generateQI([Ci.nsILoginManagerStorage]),
+
+  // This registers the category for overriding the built-in nsILoginManagerStorage
+  _xpcom_categories: [
+    {
+      category: "login-manager-storage",
+      entry: "nsILoginManagerStorage"
+    }
+  ],
+
+
+ // Console logging service, used for debugging.
+  __logService : null,
+  get _logService() {
+    if (!this.__logService)
+      this.__logService = Cc["@mozilla.org/consoleservice;1"].
+                            getService(Ci.nsIConsoleService);
+    return this.__logService;
+  },
+  log: function (message) {
+    dump("SampleLoginManager: " + message + "\n");
+    this._logService.logStringMessage("SampleLoginManager: " + message);
+  },
+  // Logs function name and arguments for debugging
+  stub: function(arguments) {
+    var args = [];
+    for (let i = 0; i < arguments.length; i++)
+      args.push(arguments[i])
+    this.log("Called " + arguments.callee.name + "(" + args.join(",") + ")");
+  },
+
+  init: function SLMS_init() {
+    this.stub(arguments);
+  },
+  initWithFile: function SLMS_initWithFile(aInputFile, aOutputFile) {
+    this.stub(arguments);
+  },
+  addLogin: function SLMS_addLogin(login) {
+    this.stub(arguments);
+  },
+  removeLogin: function SLMS_removeLogin(login) {
+    this.stub(arguments);
+  },
+  modifyLogin: function SLMS_modifyLogin(oldLogin, newLogin) {
+    this.stub(arguments);
+  },
+  getAllLogins: function SLMS_getAllLogins(count) {
+    this.stub(arguments);
+  },
+  removeAllLogins: function SLMS_removeAllLogins() {
+    this.stub(arguments);
+  },
+  getAllDisabledHosts: function SLMS_getAllDisabledHosts(count) {
+    this.stub(arguments);
+  },
+  getLoginSavingEnabled: function SLMS_getLoginSavingEnabled(hostname) {
+    this.stub(arguments);
+  },
+  setLoginSavingEnabled: function SLMS_setLoginSavingEnabled(hostname, enabled) {
+    this.stub(arguments);
+  },
+  findLogins: function SLMS_findLogins(count, hostname, formSubmitURL, httpRealm) {
+    this.stub(arguments);
+  },
+  countLogins: function SLMS_countLogins(aHostname, aFormSubmitURL, aHttpRealm) {
+    this.stub(arguments);
+  }
+};
+
+function NSGetModule(compMgr, fileSpec)
+  XPCOMUtils.generateModule([SampleLoginManagerStorage]);
+
+
+ +

Sample C++ Implementation

+ +

{{ Bug(309807) }} contains a complete example. The category registration looks like this:

+ +
  nsCOMPtr<nsICategoryManager> cat =
+      do_GetService(NS_CATEGORYMANAGER_CONTRACTID);
+  NS_ENSURE_STATE(cat);
+
+  cat->AddCategoryEntry("login-manager-storage", "nsILoginManagerStorage",
+                        kYourContractID, PR_TRUE, PR_TRUE, nsnull);
+
+ +

Don't forget to unregister the category on unload.

diff --git a/files/es/crear_un_panel_lateral_en_firefox/index.html b/files/es/crear_un_panel_lateral_en_firefox/index.html new file mode 100644 index 0000000000..07e7834c0b --- /dev/null +++ b/files/es/crear_un_panel_lateral_en_firefox/index.html @@ -0,0 +1,163 @@ +--- +title: Crear un panel lateral en Firefox +slug: Crear_un_panel_lateral_en_Firefox +tags: + - Complementos + - Todas_las_Categorías + - extensiones +translation_of: Mozilla/Creating_a_Firefox_sidebar +--- +

+

Este artículo muestra cómo crear un panel lateral registrado para Firefox 2 o superior. Véase la sección de referencias para más información sobre cómo crear una extensión para versiones anteriores. +

+

Introducción

+

Este artículo es un punto de partida para la creación de un nuevo panel lateral para Firefox. Lo que haremos será crear un panel lateral y registrarlo para que esté disponible en el menú. La meta es crear un panel vacío que pueda ser usado como inicio para nuevas aplicaciones. +

La creación de un panel lateral precisa de algo de creación de interfaz y de registro en la aplicación destino. Primero se creará una simple página XUL. Luego se crearán los ficheros de registro y finalmente el panel lateral será empaquetado dentro de un fichero instalable XPI. +

+

Pre-requisitos

+

Este artículo es una forma rápida de empezar pero, no explica todos los elementos de XUL ni el empaquetado de los XPI. Es recomendable que tengas algunos conocimientos básicos del funcionamiento de XUL y cómo maneja Firefox las extensiones. Véase Creando una extensión para información más detallada sobre la estructura, empaquetado y publicación de extensiones.

Paquetes

+

Las extensiones para Firefox son instaladas en paquetes ("Bundles"). Un paquete de extensión contiene generalmente un apartado "content", el cual contiene el código XUL y la lógica de la aplicación. Opcionalmente, se pueden incluir configuraciones regionales y temas. La mayoría de los añadidos vienen en una estructura de árbol predeterminada, y aunque no es requerido, es recomendable utilizar dicha estructura. Aquí se crea el paquete para el panel lateral y los ficheros incluìdos se muestran a continuación.

+
+

Ejemplo 1. Estructura del paquete

+
emptysidebar
+\- chrome
+   |- content
+   |- locale
+   | \- en-US
+   \- skin
+
+
+

Crea todos los directorios, excepto skin. No se usa en este tutorial.

+

locale alberga la configuración regional, sólo la configuración en-US será creada. Está listada en el ejemplo 2. La configuración regional incluye el nombre y los atajos de teclado para el panel lateral.

+
+

Ejemplo 2. chrome/locale/en-US/emptysidebar.dtd

+
<!ENTITY emptysidebar.title "EmptySidebar">
+<!ENTITY openEmptySidebar.commandkey "E">
+<!ENTITY openEmptySidebar.modifierskey "shift accel">
+
+

El directorio content incluye nuestro panel lateral, el emptysidebar.xul es mostrado en Example 3 y crea una página para albergar una etiqueta. Se pueden incluir otros elementos. Por favor, léase los tutoriales XUL para más información.

+

 

+
+

Ejemplo 3. chrome/content/emptysidebar.xul

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type"text/css" ?>
+<?xml-stylesheet href="chrome://browser/skin/browser.css" type="text/css" ?>
+<!DOCTYPE page SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">
+
+<page id="sbEmptySidebar" title="&emptysidebar.title;"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
+  <vbox flex="1">
+    <label id="atest" value="&emptysidebar.title;" />
+  </vbox>
+</page>
+
+
+

Las nuevas extensiones pueden ser registradas en los menús o en los menús emergentes. Firefox utiliza overlays para ampliar menús. Éste es un fichero XUL separado que especifica la ubicación de los elementos del menú. El panel lateral es añadido aquí al menú Ver > Panel lateral. El fichero overlay es listado en el ejemplo 4.

+
+

Ejemplo 4. chrome/contents/firefoxOverlay.xul

+
<?xml version="1.0"?>
+
+<!DOCTYPE overlay SYSTEM "chrome://emptysidebar/locale/emptysidebar.dtd">
+<overlay id="emptySidebarOverlay"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <menupopup id="viewSidebarMenu">
+    <menuitem key="key_openEmptySidebar" observes="viewEmptySidebar"  />
+  </menupopup>
+
+  <keyset id="mainKeyset">
+    <key id="key_openEmptySidebar" command="viewEmptySidebar"
+         key="&openEmptySidebar.commandkey;"
+         modifiers="&openEmptySidebar.modifierskey;" />
+  </keyset>
+
+  <broadcasterset id="mainBroadcasterSet">
+    <broadcaster id="viewEmptySidebar"
+                 label="&emptysidebar.title;"
+                 autoCheck="false"
+                 type="checkbox"
+                 group="sidebar"
+                 sidebarurl="chrome://emptysidebar/content/emptysidebar.xul"
+                 sidebartitle="&emptysidebar.title;"
+                 oncommand="toggleSidebar('viewEmptySidebar');" />
+  </broadcasterset>
+</overlay>
+
+
+

El fichero overlay consta de tres entradas: la definición del menú, los atajos de teclado y el manejador de eventos para los elementos de la interfaz. El propagador es enlazado a un elemento de la IU con el atributo observes. El propagador viewEmptySidebar define cómo se maneja el evento clic en el menú o cuando el atajo de teclado es usado.

+

La extensión necesita suministrar algunos ficheros especiales de manifiesto que controlan cómo se instala y dónde están guardados sus recursos chrome. El primero es install.rdf, el manifiesto de instalación. Véase Install Manifests para un listado completo de las propiedades requeridas y opcionales. El manifiesto de instalación se lista en el ejemplo 5.

+
+

Ejemplo 5. install.rdf

+
<?xml version="1.0" encoding="UTF-8"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>emptysidebar@yourdomain.com</em:id>
+    <em:name>EmptySidebar Extension</em:name>
+    <em:version>1.0</em:version>
+    <em:creator>Your Name</em:creator>
+    <em:description>Example extension for creation and registration of a sidebar.</em:description>
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- firefox -->
+        <em:minVersion>1.5</em:minVersion>
+        <em:maxVersion>2.0.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+  </Description>
+</RDF>
+
+
+

El otro fichero de manifiesto es chrome.manifest, el fichero de manifiesto chrome. El manifiesto chrome crea una lista con todos los tipos de recurso usados por la extensión. El manifiesto también le dice a Firefox que la extensión tiene un overlay que necesita ser mezclado en el navegador. Para más información sobre manifiestos chrome y las propiedades que soportan, véase la referencia del Manifiesto Chrome. El manifiesto usado en esta extensión se muestra en el ejemplo 6.

+
+

Ejemplo 6. chrome.manifest

+
content	emptysidebar	chrome/content/
+locale	emptysidebar	en-US	locale/en-US/
+skin	emptysidebar	classic/1.0	skin/
+overlay	chrome://browser/content/browser.xul	chrome://emptysidebar/content/firefoxOverlay.xul
+
+
+

Prueba

+

Durante el proceso de desarrollo del panel lateral, será necesario ir probándolo con Firefox. Hay un modo simple de hacer esto. Primero, necesitamos darle a conocer a Firefox la extensión.

+
  1. Abre el directorio de tu perfil
  2. Abre el directorio de las extensiones (créalo si no existe)
  3. Crea un nuevo fichero de texto y escribe en él la ruta al directorio de la extensión, p.e. C:\extensiones\miExtension o ~/extensiones/miExtension. Guarda el fichero con el id de la extensión como nombre, p.e. emptysidebar@yourdomain.com
    4. +
+

¡Ahora estás preparado para probar la extensión! Reinicia Firefox y el panel lateral estará incluido en el menú.

+

Imagen:Sidebar-test.png

+

Después podrás volver y hacer cambios en el fichero XUL. Cerrando y reiniciando Firefox deberían verse reflejados.

+

Publicación

+

Ahora que tenemos el panel lateral es hora de hacerlo disponible al mundo. La instalación necesita la creación de un fichero XPI identificado como extensión de Firefox. El XPI es un fichero ZIP que contiene los ficheros de contenido, de configuración regional y de manifiesto.

+

Los directorios content, locale y skin están empaquetados en emptysidebar.jar, los cuales deberían  ser creados en el directorio chrome. En los sistemas unix:

+
~/src/emptysidebar$ cd chrome
+~/src/emptysidebar/chrome$ zip -r emptysidebar.jar content/ locale/
+
+

En sistemas Windows, utiliza una herramienta ZIP para crear emptysidebar.zip y luego renómbralo como emptysidebar.jar.

+

Dado que estamos empaquetando una extensión con un fichero JAR, necesitamos actualizar el fichero chrome.manifest para incluir dicho fichero:

+
+

Ejemplo 7. chrome.manifest

+
content emptysidebar	jar:chrome/emptysidebar.jar!/content/
+locale  emptysidebar	en-US	jar:chrome/emptysidebar.jar!/locale/en-US/
+skin    emptysidebar	classic/1.0	jar:chrome/emptysidebar.jar!/skin/
+overlay chrome://browser/content/browser.xul	chrome://emptysidebar/content/firefoxOverlay.xul
+
+
+

Por último, creamos el fichero XPI. Éste es un fichero ZIP que contiene el fichero JAR en el directorio chrome y los ficheros de manifiesto. En sistemas unix:

+
~/src/emptysidebar/chrome$ cd ..
+~/src/emptysidebar$ zip emptysidebar.xpi install.rdf chrome.manifest chrome/emptysidebar.jar
+
+

Abre Firefox y navega hasta el directorio que contiene emptysidebar.xpi. Haz clic en el fichero y la ventana de instalación de la extensión aparecerá. Tras reiniciar Firefox, el panel lateral estará instalado.

+

Puedes descargar el proyecto vacío del panel lateral para usarlo como base de tus propios paneles laterales.

+
+

Imagen:Sidebar-installed.png
+The EmptySidebar extension

+
+

Recursos

+ +
+

Información del documento original

+
  • Autor: J.C. Wesdorp <jcwesdorp . at . occidopagus.nl> - May 30, 2005.
  • Actualizado para Firefox 2 - 12 diciembre 2006.
  • Permiso concedido para migrarlo en enero de 2006 incluyendo el permiso para cambiarle la licencia bajo CC:By-SA.
  • Fuente original: http://occidopagus.nl/firefox/emptysidebar/
    • +
+
+
+

{{ languages( { "en": "en/Creating_a_Firefox_sidebar" } ) }}

diff --git "a/files/es/crear_una_extensi\303\263n_din\303\241mica_en_la_barra_de_estado/index.html" "b/files/es/crear_una_extensi\303\263n_din\303\241mica_en_la_barra_de_estado/index.html" new file mode 100644 index 0000000000..607b81c5fc --- /dev/null +++ "b/files/es/crear_una_extensi\303\263n_din\303\241mica_en_la_barra_de_estado/index.html" @@ -0,0 +1,178 @@ +--- +title: Crear una extensión dinámica en la barra de estado +slug: Crear_una_extensión_dinámica_en_la_barra_de_estado +tags: + - Complementos + - Todas_las_Categorías + - extensiones +translation_of: Archive/Creating_a_dynamic_status_bar_extension +--- +

+

« AnteriorSiguiente »

+

+ +


+ Este artículo está basado en el artículo Crear una extensión en la barra de estado, el cual crea un panel estático en la barra de estado de Firefox, mejorándolo con la actualización dinámica de su contenido con información traída de la web cada pocos minutos. Concretamente, el ejemplo muestra un stock quote en la barra de estado y, cuando el ratón se mueve sobre él, muestra una ayuda emergente que contiene información más detallada sobre el stock.

+ +

Los conceptos tratados en el ejemplo anterior no se explicarán de nuevo aquí. En vez de eso, descarga el código de ejemplo o ve al anterior ejemplo para más detalles.

+ +

Descargar el ejemplo

+ +

Puedes descargar una copia de este ejemplo para echarle un vistazo o para utilizarlo como base para tu propia extensión. O si ya tienes el código del artículo [[Crear una extensión en la barra de estado] puedes seguir este tutorial para actualizar dicho código existente con nuevas características.

+ +

Descargar el ejemplo

+ +

Actualizar el manifiesto de instalación

+ +

Reemplaza todas las ocurrencias del ID del primer ejemplo ("status-bar-sample-1") con el ID del nuevo ejemplo ("stockwatcher") y actualiza los metadatos para describir nuestra nueva extensión.

+ +

Véase Manifiestos de instalación para más detalles.

+ +

Actualizar el manifiesto chrome

+ +

El manifiesto chrome sólo necesita una pequeña modificación desde el ejemplo anterior. Simplemente reemplaza el ID del primer ejemplo ("status-bar-sample-1") con el nombre del nuevo ejemplo ("stockwatcher").

+ +

Si necesitas un repaso, visita la sección Manifiesto Chrome.

+ +

Escribir el fichero XUL

+ +

Ahora necesitaremos complicar un poquito el fichero XUL para poder añadir una referencia al código Javascript que hará el trabajo real:

+ +
 <?xml version="1.0" encoding="UTF-8"?>
+
+ <!DOCTYPE overlay >
+ <overlay id="stockwatcher-overlay"
+   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ <script type="application/x-javascript"
+   src="chrome://stockwatcher/content/stockwatcher.js"/>
+
+ <!-- Firefox -->
+ <statusbar id="status-bar">
+   <statusbarpanel id="stockwatcher"
+     label="Loading..."
+     tooltiptext="Current value"
+     onclick="StockWatcher.refreshInformation()"
+   />
+ </statusbar>
+
+ </overlay>
+
+ +

También has de percatarte de que la definición del panel de la barra de estado incluye ahora una nueva propiedad, onclick que referencia a la función Javascript que será ejecutada en el momento en el que el usuario pinche sobre el panel de la barra de estado. Nuestra extensión actualizará la información de stock cuando el usuario pinche en el panel.

+ +

Escribir el código JavaScript

+ +

La tarea de obtener el stock quote y actualizar el visor del panel de la barra de estado es manejado por el código JavaScript en el fichero stockwatcher.js

+ +

A diferencia de nuestro anterior ejemplo, éste está implementado como un objeto. Lo hacemos así porque en futuros ejemplos de esta serie haremos cosas que son más fáciles de hacer si nuestra extensión está implementada así.

+ +

Usamos la función del DOM window.addEventListener() para decirle a Firefox que llame a la función StockWatcher.startup() cuando se abra una nueva ventana del navegador:

+ +
 window.addEventListener("load", function(e) { StockWatcher.startup(); }, false);
+
+ +

Nuestra nueva extensión posee dos funciones principales: startup() y refreshInformation(). La función refreshInformation() contiene otra función llamada infoReceived(). Las siguientes secciones las diseccionarán una a una.

+ +

startup()

+ +

La función startup() es llamada cuando se abre una nueva ventana del navegador. We end up reloading data from each of the windows once in 10 minutes - fixing this by creating a JS component responsible for communication with the server is a good idea for one of the future articles

+ +
   startup: function()
+   {
+     this.refreshInformation();
+     window.setInterval(this.refreshInformation, 10*60*1000);
+   },
+
+ +

Esta función comienza llamando a nuestra función refreshInformation() la cual es responsable de recuperar y mostrar la información del stock ticker en el panel de la barra de estado. Hacemos esto ya que una vez cargada la información del stock es mostrada tan pronto como sea posible.

+ +

Tras hacer esto, instalamos una rutina de intervalo en la ventana del navegador llamando a window.setInterval(). Esto configura nuestra rutina para que sea llamada cada 10 minutos (el intervalo de tiempo se especifica en milisegundos).

+ +

refreshInformation()

+ +

La función refreshInformation() es llamada siempre que queramos actualizar la información del stock. Es llamada cuando el usuario hace clic sobre el panel de la barra de estado, cuando nuestra extensión es añadida a la ventana del navegador y periódicamente por el manejador del intervalo para actualizar la información.

+ +
   refreshInformation: function()
+   {
+     var httpRequest = null;
+     var fullUrl = "http://quote.yahoo.com/d/quotes.csv?...&e=.csv&s=GOOG";
+
+     ...
+
+     httpRequest = new XMLHttpRequest();
+
+     httpRequest.open("GET", fullUrl, true);
+     httpRequest.onload = infoReceived;
+     httpRequest.send(null);
+   }
+ }
+
+ +

La variable httpRequest contendrá un objeto XMLHttpRequest. Este objeto es usado para configurar y ejecutar una petición HTTP en un servidor web el cual usaremos para conseguir los datos del stock quote.

+ +

La variable fullUrl es la URL completa que se usa cuando se pide un stock quote. En este caso, utilizamos los valores separados por comas devueltos por Yahoo para analizar fácilmente los datos de stock quote para Google (símbolo de ticker GOOG).

+ +

refreshInformation() incrusta otra función, infoReceived(), que explicaremos en breve y de modo separado.

+ +

Lo primero que hacemos es crear un nuevo objeto XMLHttpRequest para poder procesar nuestra petición. Abrimos la petición, especificando que deseamos realizar un comando HTTP "GET" con la URL fullUrl. El valor booleano true como tercer parámetro indica que queremos realizar la petición asíncronamente.

+ +

Al establecer la propiedad httpRequest.onload a nuestra función infoReceived() hacemos que la petición llame a infoReceived() cuando se reciba una respuesta desde el servidor. Finalmente, enviamos la petición al servidor y volvemos.

+ +

infoReceived()

+ +

Cuando el servidor responda nuestra petición, nuestra función infoReceived() que está incrustada dentro de refreshInformation() será llamada automáticamente.

+ +

Incrustamos esta función dentro de refreshInformation() para que el ámbito de su variable incluya a las variables usadas por dicha función. Debido a la forma en la que funciona JavaScript, si infoReceived() estuviese fuera de refreshInformation() entonces no tendría acceso al mismo ámbito de variable. De hecho, incluso el valor this no coincidiría por lo que no podemos obtener las mismas variables y funciones de ese modo.

+ +
     function infoReceived()
+     {
+       var samplePanel = document.getElementById('stockwatcher');
+       var output = httpRequest.responseText;
+
+       if (output.length)
+       {
+         // Remove whitespace from the end of the string;
+         // this gets rid of the end-of-line characters
+
+         output = output.replace(/\W*$/, "");
+
+         // Build the tooltip string
+
+         var fieldArray = output.split(","); assert that fieldArray[0] == "GOOG"
+         samplePanel.label = "GOOG: " + fieldArray[1];
+         samplePanel.tooltipText = "Chg: " + fieldArray[4] + " | " +
+             "Open: " + fieldArray[5] + " | " +
+             "Low: " + fieldArray[6] + " | " +
+             "High: " + fieldArray[7] + " | " +
+             "Vol: " + fieldArray[8];
+       }
+     }
+
+ +

Lo primero que hacemos aquí es asignar el panel de la barra de estado a la variable samplePanel llamando a la función del DOM document.getElementById(). Necesitamos esto para poder hacer cambios en el mismo panel de la barra de estado.

+ +

Luego recuperaremos el resultado devuelto por el servidor web en la variable output desde la propiedad XMLHttpRequest.responseText property.

+ +

El texto recibido del servidor tendrá este aspecto:

+ +
 "GOOG",414.20,"5/1/2006","1:36pm",-3.74,417.85,419.44,412.19,4760215
+
+ +

Luego analizaremos el texto. Usaremos la función split() para dividir los valores separados por comas en partes individuales, con cada campo en un elemento separado en el array fieldArray. En el índice 0 estará el símbolo del mismo ticker el cual no necesitamos debido a que sabemos el stock que estamos utilizando.

+ +

La etiqueta del panel de la barra de estado se establece para que indique el valor actual del stock, el cual está almacenado en fieldArray[1], estableciendo la propiedad samplePanel.label.

+ +

Luego estableceremos la ayuda emergente para el panel de la barra de estado asignándole una cadena apropiada a la propiedad samplePanel.tooltipText. La cadena se construye a partir de una combinación de cadenas estáticas y varios elementos del array fieldArray.

+ +

Verlo en acción

+ +

Ahora puedes instalar y probar la extensión. Deberías ver algo parecido a esto:

+ +

Image:stockwatcher.png

+ +

En este pantallazo tenemos también el anterior ejemplo ejecutándose, mostrando el texto "Hello World".

+ +

+

« AnteriorSiguiente »

+

diff --git "a/files/es/crear_una_extensi\303\263n_en_la_barra_de_estado/index.html" "b/files/es/crear_una_extensi\303\263n_en_la_barra_de_estado/index.html" new file mode 100644 index 0000000000..5d6b9b78c0 --- /dev/null +++ "b/files/es/crear_una_extensi\303\263n_en_la_barra_de_estado/index.html" @@ -0,0 +1,205 @@ +--- +title: Crear una extensión en la barra de estado +slug: Crear_una_extensión_en_la_barra_de_estado +tags: + - Complementos + - Todas_las_Categorías + - extensiones +translation_of: Archive/Creating_a_status_bar_extention +--- +

+

Siguiente »

+
Este es el primero de una serie de artículos que mostrarán cómo crear extensiones progresivamente complejas para el navegador Firefox. Aunque puede que algunos de los ejemplos de esta serie se parezcan a los ejemplos vistos en otro lugar, el objetivo de estos artículos es ayudar a reunir información en un único lugar para nuevos desarrolladores de extensiones simplificando la tarea de iniciarse.

+ +

Muchos de los conceptos introducidos aquí se aplican a cualquier aplicación basada en XUL. Sin embargo, nosotros nos centraremos específicamente en Firefox.

+ +

Este ejemplo añadirá una cadena de texto estática a la barra de estado situada en la parte inferior de las ventanas del navegador Firefox. Es posible que esto te recuerde al artículo Creando una extensión. No obstante este ejemplo será ampliado en los artículos siguientes.

+ +

Descargar el ejemplo

+ +

Puedes descargar una copia de este ejemplo para echarle un vistazo o para usarlo como base para tu propia extensión.

+ +

Descargar el ejemplo

+ +

El manifiesto de instalación

+ +

El manifiesto de instalación, install.rdf es un fichero de texto que contiene información importante sobre la extensión para la aplicación anfitrión.

+ +
 <?xml version="1.0"?>
+
+ <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+    xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+   <Description about="urn:mozilla:install-manifest">
+
+   <em:id>status-bar-sample-1@example.com</em:id>
+   <em:version>1.0</em:version>
+   <em:type>2</em:type>
+
+   <!-- Front End Metadata -->
+
+   <em:name>Status Bar Sample 1</em:name>
+   <em:description>Sample static status bar panel</em:name>
+   <em:creator>My Name</em:creator>"
+   <em:homepageURL>http://developer.mozilla.org/en/docs/Creating_a_status_bar_extension</em:homepageURL>
+
+   <!-- Describe the Firefox versions we support -->
+
+   <em:targetApplication>
+     <Description>
+     <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+     <em:minVersion>1.5</em:minVersion>
+     <em:maxVersion>2.0.0.*</em:maxVersion>
+     </Description>
+   </em:targetApplication>
+
+   </Description>
+
+ </RDF>
+
+ +

Veamos con detalle algunas partes clave del manifiesto.

+ +

Información de identificación de la extensión

+ +

Se necesita cierta información para que Firefox pueda identificar unívocamente tu extensión. En este ejemplo, estos campos son:

+ + + + + + + + + + + + + + + + + + + + +
PropiedadDescripción
idUna cadena de identificación unívoca. Antes de Firefox 1.5, esto era un GUID. A partir de Firefox 1.5 deberías de usar una cadena de la formanombre-de-la-extensión@dominio-del-creador.
versionEl número de versión de la extensión.
typeEl tipo de complemento. Para las extensiones es 2.
+ +

Información legible

+ +

En este ejemplo, tenemos cuatro partes de información legible, es decir, información que es mostrada al usuario dentro de la interfaz de Firefox. Y son:

+ + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadDescripción
em:nameNombre de la extensión. Este nombre se muestra en la ventana de extensiones.
em:descriptionUna descripción breve sobre la extensión. Este texto se muestra además en la ventana de extensiones.
em:creatorEl nombre del autor.
homepageURLLa URL del sitio web que debe visitar el usuario para conseguir información sobre la extensión o para buscar actualizaciones. No es un campo obligatorio pero incluirlo es una buena idea.
+ +

Información de la aplicación destino

+ +

También es necesario incluir información que identifique la aplicación o aplicaciones en las que la extensión puede funcionar. Aunque esta extensión de ejemplo sólo funciona en Firefox, es completamente posible crear extensiones que funcionen en múltiples aplicaciones basadas en XUL.

+ +

Además se necesita indicar qué versiones de la aplicación o aplicaciones destino soporta tu extensión. Si no va a funcionar en versiones antiguas de Firefox o aún no ha sido probada en nuevas versiones puedes restringir la extensión para que sólo las versiones soportadas de las aplicaciones destino intenten usarla.

+ +

La información de la aplicación destino está contenida dentro del bloque em:targetApplication Description.

+ + + + + + + + + + + + + + + + + + + + +
PropiedadDescripción
idUn ID que indica la aplicación destino. "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" es un GUID que identifica unívocamente a Firefox como destino.
minVersionLa versión más antigua de la aplicación destino para la que está soportada la extensión.
maxVersionLa versión más reciente de la aplicación destino sobre la cual se conoce que funciona la extensión.
+ +

Para más información sobre el formado del manifiesto de instalación, lee la sección Manifiestos de instalación.

+ +

El manifiesto chrome

+ +

El manifiesto chrome es un fichero que le dice a la aplicación destino dónde buscar el paquete chrome de tu extensión. El chrome es un conjunto de elementos de interfaz de usuario externos al área de contenidos de la ventana de la aplicación, tales como barras de herramientas, de estado, de menú, etc...

+ +

El fichero de manifiesto chrome, chrome.manifest, es para el ejemplo este:

+ +
 content status-bar-sample-1 chrome/content/
+
+ # Firefox
+ overlay	chrome://browser/content/browser.xul chrome://status-bar-sample-1/content/status-bar-sample-1.xul
+
+ +

La primera línea indica la ubicación en disco de los contenidos de la extensión cuyo ID es "status-bar-sample-1". Dicha ruta es relativa al directorio raíz de la extensión en este caso aunque puede ser absoluta si así se quiere.

+ +

La segunda línea indica un overlay. Un overlay permite añadir nuevo contenido a un documento existente. En este caso queremos ampliar la interfaz del navegador Firefox, por lo que necesitamos especificar el URI del fichero XUL de la ventana principal de Firefox, "chrome://browser/content/browser.xul" como interfaz que servirá de base y el URI de nuestro propio fichero XUL "chrome://status-bar-sample-1/content...r-sample-1.xul" como interfaz que se mezclará en el navegador.

+ +

Véase XUL Overlays para más detalles sobre cómo funcionan los overlays. Además puedes encontrar más detalles sobre el formato de los manifiestos chrome en la sección Manifiestos Chrome.

+ +

El overlay XUL

+ +

El fichero overlay XUL contiene la descripción XUL de la interfaz de usuario que queremos añadir a Firefox. Nuestro fichero overlay status-bar-sample-1.xul tendrá este aspecto:

+ +
 <?xml version="1.0" encoding="UTF-8"?>
+
+ <!DOCTYPE overlay >
+ <overlay id="status-bar-sample-1-overlay"
+          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ <!-- Firefox -->
+ <statusbar id="status-bar">
+   <statusbarpanel id="status-bar-sample-1"
+     label="Hello World"
+     tooltiptext="Sample status bar item"
+   />
+ </statusbar>
+
+ </overlay>
+
+ +

Lo primero a tratar en el fichero status-bar-sample-1.xul es establecer que este es de hecho un fichero XUL para configurar después un único ID para el overlay. Esto es llevado a cabo por la siguiente línea de XML:

+ +
<overlay id="status-bar-sample-1-overlay"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ +

Una vez hecho esto, podemos describir nuestra interfaz de usuario. En este caso, simplemente insertaremos un nuevo panel en la barra de estado situada en la parte inferior de las ventanas del navegador Firefox. Haremos esto incrustando dentro de statusbar llamado "status-bar" (el cual es la barra de estado de la ventana del navegador Firefox) un nuevo objeto statusbarpanel al que llamaremos "status-bar-sample-1".

+ +

Incluiremos propiedades para configurar nuestro nuevo panel de barra de estado de la forma que queramos, configurando su etiqueta de texto a "Hello World" y estableciendo un título emergente con el mensaje "Sample status bar item" en él.

+ +

Ponerlo a prueba

+ +

Para probar tu extensión, copia el directorio en el directorio de extensiones en tu directorio hogar. Luego reinicia Firefox. Al volver deberías de ver la extensión en la barra de estado.

+ +

Image:status bar sample 1.png

+ +

+

Siguiente »

+

diff --git "a/files/es/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" "b/files/es/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" new file mode 100644 index 0000000000..865956ce0f --- /dev/null +++ "b/files/es/crear_una_extensi\303\263n_personalizada_de_firefox_con_el_mozilla_build_system/index.html" @@ -0,0 +1,580 @@ +--- +title: Crear una extensión personalizada de Firefox con el Mozilla Build System +slug: Crear_una_extensión_personalizada_de_Firefox_con_el_Mozilla_Build_System +tags: + - Complementos + - Documentación_de_compilado + - Todas_las_Categorías + - XPCOM + - extensiones +--- +

 

+ +
Nota: Todas las instrucciones de este artículo sólo son aplicables a la rama 1.8 de Mozilla (p.e. Firefox 1.5). Intentaré mantener actualizada la versión estable aunque de hecho no deberías asumir que esto funcionará con la rama 1.5 (p.e, Firefox 1.0) o anteriores.
+ +

Existe una infinidad de documentación sobre la creación de extensiones para Firefox. Sin embargo, actualmente todos esos documentos asumen que estás desarrollando tu extensión utilizando únicamente XUL y JavaScript. Para las extensiones complejas puede ser necesario crear componentes en C++ que proporcionen funcionalidades adicionales. Las razones por las que podrías querer agregar componentes C++ en tu extensión incluyen:

+ + + +

Este artículo describe cómo configurar el entorno de desarrollo para una extensión de Firefox grande y compleja utilizando parcial o totalmente los requerimientos ya mencionados. El proceso de reunir esta información ha sido de algún modo un calvario debido a la falta de información publicada sobre este tema, aunque varios miembros de la comunidad de desarrolladores de Mozilla han colaborado en su creación. Ellos han mostrado una paciencia extraordinaria respondiendo preguntas típicas de novatos ignorantes. Me quedo corto si digo que estoy lejos de ser un experto de Mozilla, aunque voy mejorando. Puede que muchas partes de este documento sean imprecisas, confusas o simplemente incorrectas. De hecho, una de mis metas al escribir esto es afinar dichas instrucciones hasta que constituyan una guía definitiva para los hackers del núcleo que quieran ampliar la plataforma Firefox. Si tú eres uno de los muchos que saben más que yo sobre esto, tu ayuda mejorando este artículo será gratamente recibida.

+ +

También debería enfatizar que no tienes por qué compilar Mozilla o utilizar el sistema de compilación de Mozilla si quieres crear componentes C++ para Mozilla. Si sólo buscas crear un componente XPCOM o dos, este artículo será algo excesivo y puede que te interese mirar esta guía en su lugar. Por otra parte, si tienes experiencia desarrollando o dirigiendo un equipo y sabes que tienes que desarrollar una extensión grande y compleja, probablemente hagas bien en considerar la aproximación descrita en este artículo.

+ +

Una última nota: sólo he probado dichas técnicas dentro de Firefox aunque probablemente funcionarán más o menos bien en otras plataformas basadas en Gecko como Thunderbird o SeaMonkey. Si alguien puede confirmar esto y/o suministrar guías de estilo para aquello en lo que difiere actualizaré el artículo para incorporar esta información.

+ +

Y Bambi y Mozilla se encontraron...

+ +

Nada en este artículo es para cobardes. En particular el primer paso conlleva la compilación de Mozilla, lo cual es un gran... no, un inmenso proyecto. Muchos desarrolladores inteligentes han sido llevados al borde de la locura intentando compilarlo por  primera vez. Si no tienes experiencia desarrollando C++ no deberías ni preocuparte. Sigue con JavaScript.

+ +

Plataformas Windows

+ +

La primera vez que compilé Mozilla utilicé esta guía. Ni siquiera puedo recordar por qué, pero me quedé pillado unas cuantas veces, aunque la odisea llevó más tiempo de lo que me había imaginado al principio. Me cargué los muebles y me arranqué el pelo. Aquí tienes una guía comprensiva rápida, bien redactada. Sigue cada paso metódicamente y probablemente todo irá bien. Céntrate en el hecho de que una vez hayas completado la compilación, posiblemente el resto del trabajo no conllevará esfuerzo alguno. Posiblemente.

+ +

Otras plataformas

+ +

En otras plataformas, léase Linux y MacOS, el proceso es mucho más sencillo. Todas las herramientas para compilar están disponibles de forma integrada y por tanto todo lo que tienes que hacer es ejecutar algunas órdenes en el terminal. Puedes encontrar las instrucciones completas para casi cualquier SO aquí.

+ +

Estructurar tu proyecto

+ +

Mozilla incorpora un número de extensiones complejas que son integradas en su proceso de compilación. Es así que ha sido necesario resolver todos los problemas inherentes a la creación y registro de componentes XPCOM, a la compilación de ficheros JAR y los manifiestos; instalando el montón en el directorio extensions de Firefox y así sucesivamente. Así pues, lo mejor para nosotros es aprovecharnos de esta infraestructura para construir nuestra extensión.

+ +

Antes que nada, elige un nombre con gancho para tu extensión y crea un directorio con ese nombre bajo el directorio /mozilla/extensions/. Utiliza sólo minísculas. Deberías ver un montón de otros directorios (inspector/, reporter/, etc...) al mismo nivel del árbol de directorios.

+ +

Date cuenta  que antes de realmente construir nada, el sistema de desarrollo de Mozilla llama a un proceso que genera los makefiles usados por la compilación a partir de plantillas de makefiles llamadas Makefile.in. Los makefiles reales tienden a ser muy parecidos si no idénticos a las plantillas, pero la flexibilidad extra adquirida al obtener los makefiles generados dinámicamente es una de las cosas que hacen al sistema de compilación tan potente.

+ +

Anatomía de una simple extensión en C++

+ +

Asumiremos que estamos usando C++ para escribir componentes XPCOM que pueden ser usados tanto desde otros componentes C++ o desde JavaScript. El proceso de crear un componente es, en realidad, algo relativamente simple cuando se utiliza Mozilla Build System.

+ +

El caso más simple ocurre cuando un componente va a consistir en un único directorio principal con dos subdirectorios, public/ y src/. El directorio principal y cada subdirectorio deben contener un Makefile.in (a partir de ahora me referiré a este fichero como un makefile aunque, como sabemos, en la práctica es usado para generar los makefiles reales). Este makefile dice dos cosas: lo primero: lista los subdirectorios que componen la extensión por lo que el sistema de compilación conoce dónde buscar los makefiles adicionales. Después dà las instrucciones para compilar el sistema que crea una nueva extensión, en lugar de copiar los componentes directamente en el directorio de binarios de Firefox. La principal ventaja de utilizar una extensión es que es fácil empaquetarlo todo e instalarlo en otra máquina.

+ +

Así pues, aquí tienes el makefile principal más básico y simplón que te puedas encontrar (Makefile.in en el directorio principal de la extensión):

+ +
DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= public src
+
+XPI_NAME		= myextension
+INSTALL_EXTENSION_ID	= myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+
+ +

La descripción detallada del proceso de creación, describiendo las opciones clave de este makefile pueden ser encontradas aquí. Tanto MODULE como XPI_NAME están asignados al nombre de tu extensión; deben aparecer repetidos en todos los makefiles del proyecto para que todos los ficheros acaben en el mismo lugar en el área de pruebas del XPI (ver más adelante). INSTALL_EXTENSION_ID es el ID único de tu extensión. Puede ser un GUID aunque el formato mostrado antes es más bonito y, asumámoslo, mucho más fácil de recordar. No tienes porqué proporcionar un XPI_PKGNAME aunque si creas un fichero XPI susceptible de ser distribuido, será creado automáticamente en el directorio raíz del área de pruebas del XPI (/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/).

+ +

Toda extensión debe incluir un fichero install.rdf que le diga a Firefox cómo instalarla. Este fichero debería estar ubicado en el directorio principal de la extensión y tener este aspecto:

+ +
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>myextension@mycompany.com</em:id>
+    <em:version>0.1</em:version>
+
+    <em:targetApplication>
+      <!-- Firefox -->
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.0+</em:minVersion>
+        <em:maxVersion>1.0+</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- front-end metadata -->
+    <em:name>My First Extension</em:name>
+    <em:description>Just an example.</em:description>
+    <em:creator>allpeers.com</em:creator>
+    <em:homepageURL>http://www.allpeers.com/blog/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +

Existe una descripción detallada del formato del fichero install.rdf. Utiliza la variable DIST_FILES del makefile para decirle a make que copie el fichero en el directorio de la extensión y (opcionalmente) el fichero XPI.

+ +

Interfaces públicas

+ +

El directorio public/ contiene todas las interfaces necesarias para que otros módulos puedan utilizarlas. Éstas pueden ser ficheros IDL que describan interfaces XPCOM, los cuales son utilizados para generar ficheros de cabecera normales de C++ para incluirlos en los ficheros fuente. También pueden ser ficheros de cabecera normales de C++ que son utilizados directamente por otros módulos. La forma más fácil de hacer esto último es usar implementaciones en línea para todos los métodos, por lo que no tendrás ninguna dependencia de enlazado adicional. En otro caso tendrás que utilizar enlazado estático en tu módulo si utilizas estas cabeceras públicas en otros módulos. Personalmente desaconsejo esta práctica (entre otras cosas porque el enlazado estático significa que el mismo código se carga más de una vez en memoria y el código no estará disponible desde JavaScript u otros lenguajes diferentes a C++) y animo a usar XPCOM siempre que sea posible.

+ +

El makefile en el directorio public/ debería parecerse a este modelo:

+ +
DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE		= myextension
+XPIDL_MODULE	= myextension
+
+XPI_NAME = myextension
+
+EXPORTS = \
+		myHeader.h \
+		$(NULL)
+
+XPIDLSRCS	= \
+		myIFirstComponent.idl \
+		myISecondComponent.idl \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+ +

XPIDL_MODULE es el nombre del fichero XPT generado que contiene información de tipos sobre tus interfaces IDL. Si tienes múltiples módulos, asegúrate de que utilizas un valor diferente de XPIDL_MODULE para cada uno. En caso contrario, el fichero XPT del primer módulo será sobrescrito por el segundo y obtendrás errores del tipo NS_ERROR_XPC_BAD_IID cuando intentes acceder a sus interfaces IDL desde el código. Los ficheros bajo EXPORTS son copiados directamente al directorio /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/ siendo así accesibles desde otros módulos (el valor de MOZ_OBJDIR se define en /mozilla/.mozconfig). XPIDLSRCS es ejecutado a través del procesador IDL y las cabeceras generadas de C++ son copiadas en el mismo directorio include. Además, se genera un fichero XPT (biblioteca de tipos) que se copia en el subdirectorio components/ de tu extensión.

+ +

Ficheros fuente

+ +

Ahora es cuando hay que crear el makefile y los ficheros-fuente en el subdirectorio src/. Si estás implementando interfaces y las estás describiendo con IDL, la forma más fácil de hacer esto es dejando vacío el directorio src/ y ejecutando make sólo en el directorio public/. Esto serà explicado en breve.

+ +

Luego abre el fichero de cabecera generado para tu interfaz en /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/. Este fichero tendrá algunas plantillas para los ficheros de componentes .H y .CPP que puedes copiar y pegar en tus ficheros de implementación. Todo lo que tienes que hacer es rellenar los huecos del fichero C++ con la implementación real y estarás listo para continuar.

+ +

A continuación se muestra un ejemplo del makefile que necesitas colocar en tu directorio src.

+ +
DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME =  myExtension
+
+XPI_NAME = myextension
+
+REQUIRES	= xpcom \
+		  string \
+		  $(NULL)
+
+CPPSRCS		= \
+		  myFirstComponent.cpp \
+		  mySecondComponent.cpp \
+		  myExtension.cpp \
+		  $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+EXTRA_DSO_LDOPTS += \
+  $(XPCOM_GLUE_LDOPTS) \
+  $(NSPR_LIBS) \
+  $(NULL)
+
+# NOTA: si estás codificando contra la versión 1.8.0 branch (no 1.8 branch o trunk),
+# la línea anterior no funcionará debido a problemas de modificadores del enlazador.
+# En su lugar utiliza las siguientes variables:
+#
+# EXTRA_DSO_LDOPTS += \
+#   $(MOZ_COMPONENT_LIBS) \
+#   $(NULL)
+#
+# Por desgracia, usando MOZ_COMPONENT_LIBS se enlaza contra xpcom_core, lo que
+# significa que tus componentes no funcionarán en futuras versiones de Firefox.
+
+ +

La sección REQUIRES le dice a make qué módulos utilizan tus componentes. Esto provoca que los subdirectorios relevantes de /mozilla/$(MOZ_OBJDIR)/dist/include/ sean añadidos a la ruta include del compilador de C++. Si estás incluyendo las cabeceras de Mozilla y el compilador es incapaz de encontrarlas, podría ser que no hayas listado todos los módulos necesarios aquí. CPPSRCS enumera los ficheros fuente que necesitan ser compilados.

+ +

En este ejemplo, los dos primeros ficheros contienen la implementación de los dos componentes de la extensión. El fichero final myExtension.cpp contiene el código necesario para registrar dichos componentes, como se describirá en la siguiente sección.

+ +

Registrar tus componentes

+ +

Para poder usar tus componentes desde otros módulos de C++ y JavaScript primero tienes que registrarlos. Para hacerlo, tu extensión necesita implementar una clase que exponga la interfaz nsIModule la cual posee métodos para acceder a los componentes definidos en un módulo. Afortunadamente, esto puede ser llevado a cabo mediante el uso de unas pocas y simples macros por lo que no tienes que embarrarte con los detalles de qué está pasando internamente.

+ +

El primer paso es definir un CID, un contract ID (o ID de contrato) y un nombre de clase para cada uno de tus componentes. Pega el siguiente código (adaptando los #defines según convenga) en la cabecera de cada componente que tenga que ser instanciado utilizando el administrador de componentes:

+ +
// {00000000-0000-0000-0000-000000000000}
+#define MYFIRSTCOMPONENT_CID \
+	{ 0x00000000, 0x0000, 0x0000, \
+	{ 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 } }
+
+#define MYFIRSTCOMPONENT_CONTRACTID	"@mycompany.com/myfirst;1"
+#define MYFIRSTCOMPONENT_CLASSNAME	"My First Component"
+
+ +

Obviamente necesitas completar el CID con un GUID real. Bajo Windows puede ser generado utilizando guidgen.exe. Los Unixeros pueden utilizar uuidgen (viene de modo predeterminado en la mayoría de distribuciones de Unix y Linux).

+ +

Ahora crea el fichero myExtension.cpp así:

+ +
#include "nsXPCOM.h"
+
+#include "nsIGenericFactory.h"
+
+/**
+ * Components to be registered
+ */
+#include "myFirstComponent.h"
+#include "mySecondComponent.h"
+
+NS_GENERIC_FACTORY_CONSTRUCTOR(myFirstComponent)
+NS_GENERIC_FACTORY_CONSTRUCTOR(mySecondComponent)
+
+//----------------------------------------------------------
+
+static const nsModuleComponentInfo components[] =
+{
+	{
+		MYFIRSTCOMPONENT_CLASSNAME,
+		MYFIRSTCOMPONENT_CID,
+		MYFIRSTCOMPONENT_CONTRACTID,
+		myFirstComponentConstructor
+	},
+	{
+		MYSECONDCOMPONENT_CLASSNAME,
+		MYSECONDCOMPONENT_CID,
+		MYSECONDCOMPONENT_CONTRACTID,
+		mySecondComponentConstructor
+	},
+};
+
+NS_IMPL_NSGETMODULE(MyExtension, components)
+
+ +

La macro NS_IMPL_NSGETMODULE crea el objeto de módulo apropiado suministrando acceso a todos los componentes listados en el array nsModuleComponentInfo.

+ +

Compilación

+ +

Como se dijo antes, probablemente querrás compilar tu extensión inmediatamente tras crear tus ficheros IDL para poder generar las plantillas C++ para las implementaciones del componente. Estoy asumiendo que ya has podido compilar Firefox sin problemas. Si no es así, vuelve inmediatamente al inicio de este artículo y no regreses hasta que hayas generado un firefox.exe funcional. Creo que es una casilla del monopoly: Do not pass go. Do not collect $200.

+ +

¿Sigues ahí? Bien, ahora vamos a modificar tu .mozconfig (en el directorio raíz /mozilla/ para que tu extensión se compile junto con Mozilla. Añade la siguiente línea al final del fichero:

+ +
ac_add_options --enable-extensions=default,myextension
+
+ +

Ahora ejecuta make en el directorio raíz de Mozilla:

+ +
make -f client.mk build
+
+ +

Incluso aunque hayas compilado una versión actualizada de Firefox, tendrás que esperar un momento para que make pueda recorrer el árbol de Mozilla por completo buscando nuevo material (en mi máquina, que es bastante rápida, esto tarda unos 10-15 minutos). Finalmente alcanzará tu extensión y generará un montón de material bajo el directorio /mozilla/$(MOZ_OBJDIR)/:

+ + + +

Gran parte de este material no será creado en la primera pasada ya que make se impacientará cuando no encuentre los ficheros fuente para tus componentes. No te preocupes por eso, todo lo que necesitas son los ficheros de cabecera generados que contengan las plantillas de implementación en C++. Vuelve atrás y rellena la implementación en C++ de tus componentes para que puedan ser compilados la siguiente vez. Recuerda que no deberías modificar jamás, nunca, ningún fichero generado. Modifica siempre los ficheros utilizados para generarlos y vuelve a ejecutar make. Quizá haya excepciones a esta regla, pero si estás cambiando los ficheros generados directamente muy probablemente estás metiendo la pata.

+ +

El proceso de recorrer el árbol completo de Mozilla lleva bastante tiempo. Si ya has compilado Mozilla puedes evitar esto creando un makefile para tu extensión directamente. Ve al directorio raíz de tu $(MOZ_OBJDIR) y (desde un shell compatible con bash) introduce:

+ +
../build/autoconf/make-makefile extensions/myextension
+
+ +

Si tu $(MOZ_OBJDIR) está ubicado fuera de tu $(TOPSRCDIR), necesitarás hacer:

+ +
$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension
+
+ +

para que el script sepa dónde están tus fuentes (usará la ruta de la extensión que des relativa al directorio actual para resolver dónde quieres que vayan tus makefiles).

+ +

Esto generará el makefile apropiado para tu extensión. Tanto si quieres compilar el árbol completo de Mozilla como si tomas este atajo, puedes compilar de ahora en adelante yendo a /mozilla/$(MOZ_OBJDIR)/extensions/myextension/ y escribiendo "make" en la línea de órdenes. Esto debería compilar tu componente sin distraerse con el resto de Mozilla. Si todo va bien, verás tu fichero XPI en el área de pruebas de XPI. También verás la versión descomprimida (es decir, la estructura de directorios descomprimida) bajo /mozilla/$(MOZ_OBJDIR)/dist/bin/extensions (si algo va mal, averigua qué es, corrígelo y luego vuelve aquí y añádelo a este artículo).

+ +

Para asegurarte de que la compilación ha finalizado realmente, lanza Firefox y comprueba que tu extensión aparece en la lista cuando selecciones Herramientas / Complementos. Si estás usando Firefox como tu navegador habitual (y si no, ¿por qué no?), puede que te moleste el hecho que de que tendrás que cerrar tu Firefox normal antes de ejecutar tu versión personalizada. Si es así, prueba a establecer la variable de entorno MOZ_NO_REMOTE a "1" antes de ejecutar la versión de desarrollo de Firefox. También necesitarás usar un perfil diferente para tu versión de desarrollo:

+ +
firefox -P desarrollo
+
+ +

Donde desarrollo se sustituye con el nombre del perfil extra que has creado. Esto te permitirá ejecutar ambas versiones de Firefox simultáneamente, ahorràndote montones de tiempo a lo largo del ciclo de compilación/prueba.

+ +

No hay nada como estar en chrome

+ +

¡Yuhuuuu! Ahora ya tienes una extensión que no hace absolutamente nada. Es hora de hacer algo con esos geniales componentes que implementaste y registraste. La forma más fácil de hacer esto es escribiendo algo de código JavaScript y XUL. En este punto sería de mucha utilidad tener algo de experiencia escribiendo extensiones "normales" (p.e., sin utilizar componentes de C++ personalizadas). Si nunca has hecho esto, te recomiendo encarecidamente que pienses una idea guay para algo simple que siempre hayas querido hacer para Firefox y lo escribas. Mostrar sólo un nuevo elemento de menú que abra un cuadro de diálogo "¡Hola mundo!" sería ya un gran ejercicio de precalentamiento.

+ +

Suponiendo que sabes cómo escribir extensiones en XUL/JavaScript, estarás al corriente de que la parte más importante va en el directorio chrome/ de tu extensión. Bueno, el hecho de que estés utilizando también componentes C++ no cambia eso ni una pizca. Por tanto, ahora necesitas crear los directorios normales content/, locale/ y skin/ en los que has de poner tus ficheros chrome. Personalmente me gusta ubicar dichos directorios directamente bajo el directorio raíz de mi módulo pero supongo que no habrá diferencia si prefieres ponerlos bajo el subdirectorio chrome/ o el que sea. ¡Viva la libertad!

+ +

Una vez has escrito los ficheros chrome necesarios (por ejemplo, un overlay que añade un elemento de menú para instanciar y utilizar uno de tus componentes), necesitas empaquetarlo como parte de tu extensión. Esto es llevado a cabo a través del uso de un manifiesto JAR. Para nuestro ejemplo de extensión simple este fichero podría tener este aspecto:

+ +
myextension.jar:
+%  content myextension %content/
+%  locale myextension en-US %locale/en-US/
+%  skin myextension classic/1.0 %skin/classic/
+%  overlay chrome://browser/content/browser.xul chrome://myextension/content/MyExtensionOverlay.xul
+	content/MyExtensionOverlay.js		(content/MyExtensionOverlay.js)
+	content/MyExtensionOverlay.xul		(content/MyExtensionOverlay.xul)
+	locale/en-US/MyExtension.dtd		(locale/en-US/MyExtension.dtd)
+	locale/en-US/MyExtension.properties	(locale/en-US/MyExtension.properties)
+	skin/classic/MyExtension.css		(skin/classic/MyExtension.css)
+
+ +

Pon este código en un fichero llamado jar.mn en el directorio raíz de tu extensión, asegurándote de que las rutas en los paréntesis apuntan a los ficheros reales (relativos al directorio raíz). Además tienes que hacer un pequeño cambio al makefile del mismo directorio, añadiendo la siguiente línea:

+ +
USE_EXTENSION_MANIFEST = 1
+
+ +

Esto le dice a make que cree un único fichero de manifiesto llamado chrome.manifest en lugar de crear manifiestos separados con nombres tontos para cada paquete.

+ +

Ahora ejecuta make de nuevo. Deberías ver un subdirectorio chrome en tu extensión (/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions/myextension@mycompany.com/). Observa que el directorio chrome contiene un fichero JAR (o sea, ZIP) con todos los ficheros chrome listados en jar.mn además de una estructura de directorio completa reflejo de la del fichero JAR. La estructura de directorio sin embargo está vacía. ¿Por qué? No lo sé. No te preocupes por esto, los ficheros en el JAR son los que realmente se usan.

+ +

Manteniéndolo complejo

+ +

Si estás desarrollando extensiones realmente complejas con un montón de componentes XPCOM, probablemente desees dividir tu código en módulos más pequeños.

+ +
Extensiones moderadamente complejas
+ +

Para una extensión moderadamente compleja, probablemente bastará con dividir el código en módulos de un solo nivel. Supongamos que tienes un módulo base/ que define un manojo de componentes XPCOM básicos y un módulo advanced/ que define algunos componentes chrome así como otros componentes que usan a los básicos. La estructura del directorio debería lucir más o menos así:

+ + + +

Más allá de eso, nada cambia. Los makefiles en los directorios base/ y advanced/ deberían tener más o menos el mismo aspecto que el makefile original del directorio raíz, sin olvidar cambiar la variable DEPTH para reflejar el hecho de que se han movido a un nivel más de profundidad respecto de la raíz de mozilla. También debes quitar la variable DIST_FILES porque va a estar en el makefile de nivel superior. Cada makefile que genere algo debería definir la variable XPI_NAME para asegurarse que los archivos generados van dentro de tu extensión y no dentro del directorio global components/. Define esto en cada makefile para asegurarte. Puedes usar el mismo MODULE para ambos casos, base/ y advanced/, y así todos los archivos include generados irán al mismo directorio, pero asegúrate de no usar el mismo XPIDL_MODULE en los dos directorios public/ o una de las bibliotecas de componentes (es decir, archivos XPT) sobrescribirá al otro y todo se echará a perder.

+ +

Cada módulo debe tener también un valor diferente para la variable LIBRARY_NAME. Éste es el nombre de la biblioteca dinámica generada, así que si llamamos a las bibliotecas "myBase" y "myAdvance" entonces tendremos los archivos myBase.dll y myAdvance.dll (por lo menos así es en Windows). Y cada uno de estos módulos va a tener un archivo C++ separado para registrar componentes, así que va a haber dos archivos que lucirán como myExtension.cpp en el ejemplo original, digamos Base.cpp y Advanced.cpp. Por último, cada módulo tendrá, obviamente, su propio jar.mn, aunque pueden referenciar al mismo nombre de archivo JAR y nombre de paquete si quieres que todos los archivos chrome estén organizados en un mismo paquete y archivo JAR. El único que realmente permanece es install.rdf, que existe una vez y sólo una vez en el directorio raíz de la extensión.

+ +

En cuanto al makefile de nivel superior, ahora tendrá este aspecto:

+ +
DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= base advanced
+
+XPI_NAME               = myextension
+INSTALL_EXTENSION_ID   = myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+
+ +
Extensiones realmente complejas
+ +

En algún momento, hasta un solo módulo puede crecer hasta un punto en que desees dividirlo en submódulos. La diferencia entre tener módulos diferentes y tener un módulo dividido en submódulos es que todos los submódulos comparten el mismo archivo para registrar componentes (el famoso archivo myExtension.cpp) y cuando lo compilas genera una sola biblioteca dinámica. La decisión para dividir un módulo en submódulos es sólo cuestión de organización del código, no afecta al producto final.

+ +

Para dividir un módulo en submódulos primero debes crear un directorio para cada submódulo. Luego debes crear un directorio adicional llamado build/. Cada submódulo será configurado para crear una biblioteca estática y el directorio build/ las unirá para crear una sola biblioteca dinámica. ¿Confundido? Aquí hay un ejemplo mostrando la subrama advanced/ del directorio myextension/:

+ + + +

Como puedes ver, hemos dividido advanced/ dentro de dos submódulos: intrincate/ y multifarious/ y hemos añadido un directorio build/ adicional. Hemos dejado los directorios chrome directamente bajo advanced/, los cuales no están enlazados a ningún submódulo específico. Esto significa que jar.mn estará en el mismo lugar.

+ +

Los makefiles intricate/ y multifarious/ lucirán casi igual al makefile original advanced/, pero necesitamos modificarlos un poquito. Como siempre, debemos ajustar la variable DEPTH porque el makefile está más profundo en la estructura de directorios. Y deberíamos cambiar LIBRARY_NAME para indicar que estamos generando una biblioteca estática para cada submódulo. Por convenio, se usa el sufijo "_s" para este propósito. Así que las llamaremos "myIntricate_s" y "myMultifarious_s". Finalmente definimos la variable FORCE_STATIC_LIB para que quede un makefile que comience más o menos así:

+ +
DEPTH		= ../../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+LIBRARY_NAME = myIntricate_s
+FORCE_STATIC_LIB = 1
+
+XPI_NAME = myextension
+
+...más cosas aquí...
+
+ +

El makefile build une las bibliotecas estáticas generadas por los submódulos y crea una única biblioteca dinámica de componentes:

+ +
DEPTH		= ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME = myAdvanced
+
+XPI_NAME = myextension
+
+DEFINES += XPCOM_GLUE
+
+SHARED_LIBRARY_LIBS = \
+		$(DIST)/lib/$(LIB_PREFIX)myIntricate_s.$(LIB_SUFFIX) \
+		$(DIST)/lib/$(LIB_PREFIX)myMultifarious_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcomglue_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcom.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)nspr4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plds4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plc4.$(LIB_SUFFIX) \
+		$(NULL)
+
+REQUIRES	= \
+		xpcom \
+		string \
+		$(NULL)
+
+CPPSRCS		= \
+		Advanced.cpp \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+LOCAL_INCLUDES += \
+        -I$(srcdir)/../intricate/src \
+        -I$(srcdir)/../multifarious/src \
+        $(NULL)
+
+ +

El makefile en el directorio advanced/ debería listar los directorios intricate/, multifarious/ y build/ en su variable DIRS. Asegúrate de que build/ esté al final porque no puede crear la biblioteca hasta que los otros makefiles hayan sido completados.

+ +

Otros temas

+ +

Agregar archivos de datos a tus extensiones

+ +

En algunos casos, puedes desear incluir archivos adicionales en tus extensiones que no pertenecen al subdirectorio chrome/. Algunos ejemplos pueden ser archivos de bases de datos o esquemas XML. Esto puede conseguirse añadiendo, en el makefile, código personalizado que copie los ficheros desde el árbol de origen hacia el directorio de destino de la extensión.

+ +
Copiar archivos de datos al directorio de destino
+ +

Supongamos que tienes algunos ficheros de datos que contienen información estadística que deseas incluir en tu extensión y que esté disponible para tus componentes. Tienes estos archivos, cuya extensión es .TXT, dentro del subdirectorio stats/ bajo el directorio de tu extensión en el árbol del código fuente. Puedes usar el siguiente makefile para copiar los ficheros al directorio de destino de la extensión:

+ +
libs::
+	if test ! -d $(FINAL_TARGET)/stats; then \
+		$(NSINSTALL) -D $(FINAL_TARGET)/stats; \
+	fi
+	$(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats
+
+ +
Acceder a ficheros de datos desde los componentes
+ +

El truco para acceder a los ficheros es averiguar dónde está el directorio home de tu extensión. Los rumores dicen que en el futuro esto será posible a través del interface nsExtensionManager o alguna cosa similar. Mientras tanto, hay un modo simple y fiable de hacer esto. En la implementación de cualquier componente JavaScript XPCOM hay un símbolo especial __LOCATION__ (dos subrayados delante y dos detrás) que apunta al fichero de implementación del componente. Así, puedes escribir un componente simple que deduzca el directorio raíz de tu extensión extrapolando desde su ubicación.

+ +

Este artículo explica cómo crear un componente XPCOM en JavaScript. Necesitarás un fichero IDL para un interfaz que tenga un aspecto más o menos así:

+ +
interface myILocation : nsISupports
+{
+    readonly attribute nsIFile locationFile;
+};
+
+ +

Sitúa el fichero IDL en el directorio public/ del proyecto o subproyecto. En el directorio src/ coloca el fichero JavaScript que implementa el componente. La implementación del componente incluirá los métodos para solicitar la ruta o el fichero para el directorio home de la extensión.

+ +
myLocation.prototype =
+{
+  QueryInterface: function(iid)
+  {
+    if (iid.equals(nsISupports))
+      return this;
+    if (iid.equals(myILocation))
+      return this;
+
+    Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+    return null;
+  },
+
+  get locationFile()
+  {
+     return __LOCATION__.parent.parent;
+  }
+}
+
+ +

Esto asume que el componente se encuentra en un subdirectorio del directorio de la extensión (por convenio, este directorio se llama components/). La propiedad parent de __LOCATION__ devuelve components/, y el valor parent de éste es el directorio de la extensión.

+ +

El último paso es modificar el makefile del directorio de orìgen donde colocaste el fichero JavaScript para que sea copiado dentro de la ubicación apropiada en la extensión.

+ +
libs::
+	$(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components
+
+ +

Ahora puedes instanciar este componente y usar la propiedad locationFile para obtener un interface nsIFile que apunte al directorio home de tu extensión.

+ +

Usar otras bibliotecas

+ +

Para extensiones más sofisticadas, tal vez desees integrar bibliotecas de terceros que proveerán funciones especializadas para conectividad de bases de datos, procesamiento de imágenes, funciones de red y otras tareas. Si quieres que tu extensión se ejecute en todas las plataformas de FireFox, necesitarás el código fuente de la biblioteca en cuestión, así que asumiré que está disponible.

+ +

La mejor forma de hacerlo, desde el punto de vista del ciclo de desarrollo, es crear un makefile estilo-Mozilla para la biblioteca. Esto funciona bien para bibliotecas que tienen un proceso de compilación sencillo sin demasiada configuración. Un buen ejemplo de esto es la biblioteca SQLite incluida en el árbol de compilación de Mozilla en db/sqlite. Adaptando el makefile de esta manera, la biblioteca se crea como una parte estándar del proceso de compilado de Mozilla, lo cual elimina pasos adicionales. El lado malo es que necesitarás actualizar el makefile modificado cada vez que se publique una nueva versión de la biblioteca.

+ +

Para bibliotecas que tienen un proceso de configuración complejo, que use un compilador no-estándar, o que tengan alguna otra característica especial, quizá no sea viable crear un makefile compatible con el estilo Mozilla. En este caso, recomendaría colocar la distribución completa de la biblioteca dentro del proyecto o subproyecto que la utiliza. Por ejemplo, si la biblioteca acmelib se usa dentro del subproyecto multifarious/ en el ejemplo de arriba, se colocaría como un subdirectorio bajo ese proyecto (en el mismo nivel que public/ y src/).

+ +

Por supuesto, esto significa que tendrás que compilar acmelib manualmente en cada plataforma antes de lanzar Mozilla. Pero por lo menos luego puedes referirte a los archivos include y las bibliotecas importadas desde tus componentes usando rutas relativas.

+ +

Compilar para múltiples plataformas

+ +

Información del Documento Original

+ +
+ +
+ +

 

diff --git a/files/es/css/media_queries/index.html b/files/es/css/media_queries/index.html new file mode 100644 index 0000000000..997626e12d --- /dev/null +++ b/files/es/css/media_queries/index.html @@ -0,0 +1,828 @@ +--- +title: CSS media queries +slug: CSS/Media_queries +tags: + - CSS + - Media + - Media Queries + - query +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{cssref}}
+ +

Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador).

+ +

Se utilizan para:

+ + + +

Sintaxis

+ +

 

+ +

Las media queries consisten de un tipo de medio opcional y una o más expresiones de características de medios. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.

+ +

El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.

+ +

Las consultas sobre tipos de medios desconocidos son siempre falsas.

+ +

 

+ +
<!-- CSS media query on a link element -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- CSS media query within a style sheet -->
+<style>
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+</style>
+
+ +

Media Types

+ +

Los Media Types (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y será interpretada como all.

+ +
+
all
+
Apto para todos los dispositivos.
+
print
+
Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. 
+
screen
+
Destinado principalmente a las pantallas.
+
speech
+
Destinado a sintetizadores de voz.
+
+ +
+

Tipos de medios depreciados: CSS2.1 y Media Queries 3 definieron varios tipos de medios adicionales (tty, tv, projection, handheld, braille, embossed y aural), pero fueron desaprobados en Media Queries 4 y no deberían ser usados. El tipo aural ha sido reemplazado por speech, que es similar.

+
+ +

Operadores Lógicos

+ +

Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.

+ +

Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".

+ +

and

+ +

El operador and es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como all puede lucir así:

+ +
@media (min-width: 700px) { ... }
+ +

Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador and y colocar la siguiente cadena:

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+ +

Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.

+ +

lista separada por comas

+ +

Las listas separadas por comas se comportan como el operador or cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.

+ +

Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Por lo tanto, si esta en una screen con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo @media all and (min-width: 700px) podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del handheld en la segunda query. Por otra parte si estuviese en un handheld con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio.

+ +

not

+ +

El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo, el not en el siguiente query es evaluado al final:

+ +
@media not all and (monochrome) { ... }
+
+ +

Esto significa que el query es evaluado de la siguiente forma:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... y no de esta forma:

+ +
@media (not all) and (monochrome) { ... }
+ +

Otro Ejemplo:

+ +
@media not screen and (color), print and (color)
+
+ +

Es evaluado de la siguiente forma:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

El operador only previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:

+ +
<link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" />
+
+ +

Pseudo-BNF

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.

+ +
Nota: Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.
+ +

Funciones Multimedia

+ +

La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "<" y ">" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.

+ +
Nota: Si una función multimedia no aplica al dispositivo donde el navegador esta corriendo, la expresión que contiene esa función siempre retornara falso. Por Ejemplo, cambiar la relación de aspecto en un dispositivo aural siempre resultara falso.
+ +

color

+ +

Valor: {{cssxref("<color>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: si

+ +

Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.

+ +
Nota: Si el componente de color tiene diferente numero de bits por color, entonces el valor mas pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color se usara el mínimo valor de bits por color en la tabla.
+ +

Ejemplos

+ +

Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:

+ +
@media all and (color) { ... }
+
+ +

Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Indica el numero de entradas en la tabla de colores para el dispositivo de salida.

+ +

Ejemplos

+ +

Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:

+ +
@media all and (color-index) { ... }
+
+ +

Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).

+ +

Ejemplo

+ +

Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.

+ +

device-aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).

+ +

Ejemplo

+ +

El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.

+ +

device-height

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).

+ +

device-width

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos de 800px de ancho, usted puede usar esto:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+
+ +

grid

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: all
+ Acepta prefijos min/max: no

+ +

Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo esta basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor sera 1, de lo contrario sera 0.

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Nota: La unidad "em" tiene un significado especial para los dispositivos de cuadrícula; ya que la anchura exacta de una "em" no puede ser determinada, se asume un "em" como el ancho de una celda en la cuadrícula y el alto de una celda en la cuadrícula.
+ +

height

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

La función height describe la altura de la superficie a renderizar en el dispositivo de salida (como la altura de una ventana o la bandeja de papel en una impresora).

+ +
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
+ +

monochrome

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor sera 0.

+ +

Ejemplos

+ +

Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:

+ +
@media all and (monochrome) { ... }
+
+ +

Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Valor: landscape | portrait
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo solo en orientación vertical (portrait):

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

Valor: {{cssxref("<resolution>")}}
+ Medio: {{cssxref("Media/Bitmap", "bitmap")}}
+ Acepta prefijos min/max: sí

+ +

Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

Para reemplazar la vieja sintaxis (min-device-pixel-ratio: 2):

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Valor: progressive | interlace
+ Medio: {{cssxref("Media/TV")}}
+ Acepta prefijos min/max: no

+ +

Describe el proceso de exploración de televisión de los dispositivos de salida.

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo solo a televisores de exploración progresiva:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

La función width describe el ancho de la superficie a renderizar en el dispositivo de salida (como el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).

+ +
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
+ +

Ejemplos

+ +

Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de al menos 20em, usted puede usar esta query:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+
+ + + +

Específico de Mozilla

+ +

Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el usuario ha configurado su dispositivo para usar la apariencia "Grafito" en Mac OS X, esto sera 1. Si el usuario esta usando la apariencia azul por defecto, o si no usa Mac OS X, esto sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(maemo-classic)") }}

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}

+ +

Valor: {{cssxref("<number>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Da el numero de pixeles del dispositivo por pixeles de CSS.

+ +
+

No use esta función.

+ +

En cambio use la función resolution con la unidad dppx.
+
+ -moz-device-pixel-ratio puede ser usada para compatibilidad con Firefox 16 o anterior; y -webkit-device-pixel-ratio con navegadores basados en WebKit que no soporten dppx.

+ +

Ejemplo:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en WebKit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores anteriores a Firefox 16 */
+       (min-resolution: 2dppx),             /* La forma estandar */
+       (min-resolution: 192dpi)             /* compatibilidad con dppx */
+ +

Vea este articulo CSSWG sobre buenas practicas para compatibilidad en relación a resolution y dppx.

+
+ +
Nota: Esta funcion multimedia tambien esta implementada en Webkit como -webkit-device-pixel-ratio. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: min--moz-device-pixel-ratio y max--moz-device-pixel-ratio; y los mismos prefijos implementados por Webkit se llaman asi: -webkit-min-device-pixel-ratio y -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:

+ + + +

Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha inversa al final de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al final de la barra de desplazamiento. de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha inversa al principio de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al principio de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra la miniatura de la barra de desplazamiento de forma proporcional (basado en el porcentaje del documento que es visible), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.

+ +

Ejemplo

+ +

Usted puede usar esto para renderizar sus botones un poco mas grandes, Por Ejemplo, si el usuario se encuentra en una pantalla táctil, esto hará los botones mas fáciles de usar con los dedos.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-classic)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario actualmente esta utilizando algunos de los temas por defecto de Windows (Luna, Royale, Zune, or Aero), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:

+ + + +

Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el tema utilizado por el sistema operativo en el que se ejecutan.

+ +

Específico de WebKit

+ +

-webkit-transform-3d

+ +

Vakir: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

Ejemplo

+ +
@media (-webkit-transform-3d) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+ +

-webkit-transform-2d

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

-webkit-transition

+ +

Value: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

Compatibilidad con Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("21")}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("9")}}{{CompatSafari("4")}}
grid{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatChrome("29")}}{{CompatGeckoDesktop("1.9.1")}} [2]
+ {{CompatGeckoDesktop("8.0")}} [3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatVersionUnknown}}{{CompatNo}}[7]{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatVersionUnknown}}[5]{{CompatGeckoDesktop("49")}}[6]{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transform-2d{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transition{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
display-mode{{CompatUnknown}}{{CompatGeckoDesktop("47")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
grid{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-2d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transition{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
display-mode{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] grid media type no está soportado

+ +

[2] Soporta valores {{cssxref("<integer>")}}.

+ +

[3] Soporta valores {{cssxref("<number>")}}, según la especificación.

+ +

[4] tv media no está soportado

+ +

[5] Ver {{WebKitBug(22494)}}.

+ +

[6] Implementado por razones de compatibilidad web en Gecko 46.0 {{geckoRelease("46.0")}} tras tras cambiar layout.css.prefixes.webkit por defecto a false (ver {{bug(1239799)}}). Desde Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit por defecto es true.

+ +

[7] Implementado como alias para min--moz-device-pixel-ratio y max--moz-device-pixel-ratio por razones de compatibilidad web in Gecko 45.5 {{geckoRelease("45.0")}} (ver {{bug(1176968)}}) tras cambiar layout.css.prefixes.webkit y layout.css.prefixes.device-pixel-ratio-webkit por defecto a false. Desde Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit por defecto es true.

+ +

Vea también

+ + diff --git a/files/es/css/using_css_gradients/index.html b/files/es/css/using_css_gradients/index.html new file mode 100644 index 0000000000..2e3f5e13a4 --- /dev/null +++ b/files/es/css/using_css_gradients/index.html @@ -0,0 +1,386 @@ +--- +title: Usando gradientes con CSS +slug: CSS/Using_CSS_gradients +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +

CSS3 posee soporte para nuevos tipos de gradientes  en las propiedades CSS. Usarlos en un segundo plano, permite mostrar transiciones suaves entre dos o más colores especificados, evitando así el uso de imágenes para estos efectos, lo que reduce el tiempo de descarga y el uso de ancho de banda. Además, debido a que el gradiente es generado por el navegador, los objetos degradados se ven mejor cuando se hace un acercamiento, y el ajuste de diseño es mucho más flexible.

+ +

Los navegadores soportan dos tipos de gradientes: lineal, definido con la función linear-gradient, y radial, definido con radial-gradient.

+ +

Gradientes lineales

+ +

Para crear un gradiente lineal, se establece un punto de partida y una dirección (indicada por un ángulo) a lo largo de la cual se aplica el efecto. Usted también puede definir paradas de color. las paradas de color son los colores que usted desea que Gecko renderise con suaves transiciones entre ellos, y usted puede específicar al menos dos de ellas, pero puede específicar más para crear efectos de gradientes más complejos.

+ +

Gradientes lineales simples

+ +

Aquí está un gradiente lineal que inicia en el centro (horizontalmente) y arriba (verticalmente), e inicia en azul, transicionando a blanco.

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
+
 
+
+ +
+
/* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based */
+background: -prefix-linear-gradient(top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom, blue, white);
+
+
+ +

Cambiando el mismo gradiente para correr de izquierda a derecha:

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
basic_linear_blueleft.png +
 
+
+ +
/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to right, blue, white);
+
+ +

Usted puede hace el gradiente sea generado diagonalmente mediante la especificación de la posición de inicio vertical y horizontal. Por ejemplo:

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
basic_linear_bluetopleft.png +
 
+
+ +
/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom right, blue, white);
+
+ +

Usando Angulos

+ +

Si usted no específica un ángulo, uno es determinado automáticamente basado en la dirección dada. Si usted desea más control sobre la dirección del gradiente, usted necesita establecer el ángulo específicamente.

+ +

Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la derecha, y el segundo tiene un ángulo de 70 grados.

+ +

linear_gradient_angle.png

+ +

El de la derecha usa un CSS Como este:

+ +
background: linear-gradient(70deg, black, white);
+
+ +

El ángulo es especificado como un ángulo entre una línea vertical y la línea del gradiente, contando en el sentido horario. En otras palabras, 0deg crea un gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un gradiente horizontal de izquierda a derecha:

+ +

linear_redangles.png

+ +
background: linear-gradient(<angle>, red, white);
+
+ +
+

Note: several browsers implement, prefixed, an older draft of the specification where 0deg was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient, some may need to have 90deg added to the <angle>.

+
+ +

Color stops

+ +

Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.

+ +

If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.

+ +

Example: Three color stops

+ +

This example specifies three color stops:

+ + + + + + + + + + + + +
Screen ShotLive Demo
linear_colorstops1.png +
 
+
+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(top, blue, white 80%, orange);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to bottom, blue, white 80%, orange);
+
+ +

Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.

+ +

Example: Evenly spaced color stops

+ +

Here's an example using a wide variety of colors, all evenly spaced:

+ + + + + + + + + + + + +
Screen ShotLive Demo
linear_rainbow.png +
 
+
+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, red, orange, yellow, green, blue);
+
+ +

Notice that the color stops are automatically spaced evenly when no locations are specified.

+ +

Transparency and gradients

+ +

Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:

+ +

linear_multibg_transparent.png

+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+ +

The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.

+ +

Radial gradients

+ +

Radial gradients are specified using the {{ cssxref("radial-gradient") }} functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.

+ +

Color stops

+ +

You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.

+ +

Example: Evenly spaced color stops

+ +

By default, as with linear gradients, the color stops are evenly spaced:

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_gradient_even.png +
 
+
+ +
background: radial-gradient(red, yellow, rgb(30, 144, 255));
+
+ +

Example: Explicitly spaced color stops

+ +

Here we specify specific locations for the color stops:

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_gradient_varied.png +
 
+
+ +
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
+
+ +

Size

+ +

This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See this description of the size constants for specifics.

+ +

Example: closest-side for ellipses

+ +

This ellipse uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_ellipse_size1.png +
 
+
+ +
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Example: farthest-corner for ellipses

+ +

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_ellipse_size2.png +
 
+
+ +
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Example: closest-side for circles

+ +

This example uses closest-side, which determines the circle's size as the distance between the start point (the center) and the closest side.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_circle_size1.png +
 
+
+ +
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.

+ +

Repeating gradients

+ +

The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.

+ +

Examples: Repeating linear gradient

+ +

This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:

+ + + + + + + + + + + + +
Screen ShotLive Demo
repeating_linear_gradient.png +
 
+
+ +
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+
+ +

Another example using the {{ cssxref("repeating-linear-gradient") }} property.

+ +

repeat_background_gradient_checked.png

+ +
background-color: #000;
+background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px),
+repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px);
+
+ +

Example: Repeating radial gradient

+ +

This example uses {{ cssxref("repeating-radial-gradient") }} to create a gradient:

+ + + + + + + + + + + + +
Screen ShotLive Demo
repeating_radial_gradient.png +
 
+
+ +
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+
+ +

See also

+ + diff --git "a/files/es/css_din\303\241mico/index.html" "b/files/es/css_din\303\241mico/index.html" new file mode 100644 index 0000000000..e77502cb70 --- /dev/null +++ "b/files/es/css_din\303\241mico/index.html" @@ -0,0 +1,339 @@ +--- +title: CSS dinámico +slug: CSS_dinámico +tags: + - CSS + - Todas_las_Categorías +--- +

+

+

Introducción

+

Tradicionalmente las páginas web se han dividido en dos categorías: estáticas y dinámicas. Hemos leído muchas veces que con XHTML y CSS se pueden crear documentos de calidad, pero fijos, estáticos. Si quieres que tus páginas se adapten y cambien según las acciones del usuario, si quieres dinamismo, necesitas javascript o similares... Ya no. +

Si teniamos DHTML (html dinámico), ahora tenemos CDSS (Css Dinámico Sin Scripts). Como en un cuento de hadas en el que un humilde sapo acaba siendo el príncipe de la historia, unas modestas pseudo-clases pueden acabar siendo las estrellas de la Web.

Las pseudo-clases en principio nacieron para darle dinamismo a los enlaces, y este es el uso que se les ha dado durante los últimos años. Es raro el archivo CSS que no incluya unas líneas semejantes a estas: +

+
a:link { ... }
+a:active { ... }
+a:visited { ... }
+
+

¡Pero la situación ha cambiado! Ahora podemos aplicarle pseudo-clases a la mayoría de los elementos, y jugando con los selectores podemos crear documentos dinámicos usando exclusivamente CSS. +

+

Poco a poco

+

Lo veremos poco a poco y por medio de ejemplos centrados en la pseudo-clase :hover. Obviamente combinando diversas pseudo-clases pueden obtenerse efectos más complejos. +Para probar los ejemplos basta copiar y pegar el código (sin quitar ni añadir nada) en un archivo vacio y visualizarlo con el navegador.

Empecemos por el uso tradicional: +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+a:hover { color: red; }
+
+</style>
+
+<p> Párrafo con <a>enlace</a> que se pone rojo </p>
+
+
+

Soltamos amarras, levamos 'anclas' y... +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+p:hover { color: red; font-variant: small-caps; }
+li:hover { color: blue; background: silver; }
+div:hover { color: orange; text-align: right; }
+
+</style>
+
+<p> Párrafo que se pone rojo y mayúsculo. </p>
+<ul> <li> Item que se pone azul y con fondo gris. </li> </ul>
+<div> División con texto que se flota a la derecha y se pone naranja. </div>
+

Esto nos permite crear con facilidad efectos dinámicos, podemos cambiar la visualización de las cosas dependiendo de los actos del usuario. Con un poco de imaginación y buen gusto se pueden hacer maravillas. +

+

La cosa da mucho juego

+

Podemos cambiar cualquier propiedad, pero no todas son igual de útiles a la hora de crear dinamismo. Algunas de las más interesantes serían por ejemplo: display, position, z-index... +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+.comun { position: absolute; width: 10em;
+	 padding: 2em; text-align: center; }
+
+#rojo { background-color: red;
+        left: 1em; top: 1em;
+        z-index: 1; }
+
+#azul { background-color: blue;
+        left: 5em; top: 5em;
+        z-index: 2; }
+
+#naranja { background-color: orange;
+           left: 9em; top: 2em;
+           z-index: 3; }
+
+#rojo:hover,
+#azul:hover,
+#naranja:hover { z-index: 4; }
+
+</style>
+
+<p id='rojo'    class='comun'>El rojo es vivo</p>
+<p id='azul'    class='comun'>El azul es elegante</p>
+<p id='naranja' class='comun'>El naranja es guay</p>
+
+

Pero esto no es todo, aún hay más.

+

Jugando con los selectores podemos relacionar unos elementos con otros. +

Por ejemplo: al posicionarnos sobre p cambiamos las propiedades de a, y al posicionarnos sobre a cambiamos las propiedades de em. +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+em { display: none; }
+
+p:hover a { color: red; }
+a:hover em { display: inline; }
+
+</style>
+
+<p> Párrafo <a>con enlace <em>que se pone rojo</em> </a> </p>
+
+

Bueno, despues de unos ejemplos simples, uno un poco más complejo: +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+.editorial { width: 30%;}
+.item { list-style: none; list-style-position: inside;
+        padding: 0.2ex; margin: 0.2ex; }
+
+a { color: darkblue; text-decoration: none;}
+div:hover a { color: blue; text-decoration: underline;}
+
+.oculto ul { display: none; }
+div:hover ul { display: block; }
+
+ul { border: transparent solid 0.1ex; }
+ul:hover { border: peru solid 0.1ex; }
+
+ul:hover abbr,
+ul:hover dfn { color: red; }
+
+.vista { visibility: hidden; }
+ul:hover .vista { visibility: visible; }
+
+</style>
+
+<div class='editorial oculto'>
+   <h2> <a> CSS </a> </h2>
+   <ul class='item'>
+      <li> <dfn>CSS</dfn> es una c seguida de dos eses. </li>
+      <li> También es un estándar del <abbr>W3C</abbr>. </li>
+      <li class='vista'> No se me ocurre qué poner aquí. </li>
+   </ul>
+
+</div>
+
+<div class='editorial'>
+   <h2> <a> HTML </a> </h2>
+   <ul class='item'>
+      <li> <dfn>HTML</dfn> es un lenguaje para el marcado de hipertextos. </li>
+      <li> Es un estándar del <abbr>W3C</abbr>. </li>
+      <li class='vista'> Creado por Tim Berners-Lee. </li>
+   </ul>
+</div>
+
+

Tipos de relaciones familiares

+

Hasta el momento todos los ejemplos muestran relaciones padre → descendiente, si has consultado la especificación sabrás que no son las únicas, las posibilidades son las siguientes: +

+
Padre → hijo
+

Esta relación se expresa por medio del combinador (">"), relaciona un elemento con sus descendientes directos. En el siguiente ejemplo seleccionamos los elementos con clase 'subrayado' que sean hijos directos de div +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+body:hover > .subrayado { text-decoration: underline;}
+
+</style>
+
+<div>
+<p> Lo siguiente es una
+ <span class='subrayado'>cita</span>:
+</p>
+<hr>
+<blockquote class='subrayado'> <p>Si buscas resultados distintos, no hagas siempre lo mismo.
+ <cite>Einstein</cite> </p>
+</blockquote>
+</div>
+
+
Padre → descendiente
+

Esta relación se expresa por medio de un espacio en blanco (" ") relaciona un elemento con un descendiente. Este es el método más flexible, puedes seleccionar cualquier elemento independientemente del parentesco exacto. +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+     p:hover em { visibility: hidden;}
+
+</style>
+
+<h2> Selección de descendientes</h2>
+<p>
+  <em>Este em es hijo de un párrafo</em>
+  <span> span tambien, pero...
+     <em>Este em no es hijo de un párrafo, </em>
+     aunque sí descendiente (hijo de un hijo).
+  </span>
+</p>
+
+
Hermano → hermano (adyacente)
+

Esta relación es expresa por medio del combinador ("+"), relaciona un elemento con su hermano adyacente (el inmediatamente siquiente). Este es el método aparentemente más limitado, pero el que abre más puertas. +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+#primero + li { list-style-type: none; }
+
+</style>
+
+<ul>
+  <li id='primero'>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+


+Esto de relacionar hermanos está muy bien, pero solo se puede seleccionar el adyacente, esto es una limitación importante, pero bueno, siempre puedes seleccionar el adyacente del adyacente, o el... +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+#primero + li + li + li { list-style-type: none; }
+
+</style>
+
+<ul>
+  <li id='primero'>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+  <li>item 4</li>
+</ul>
+
+
Otros parentescos
+

Padres, hijos y hermanos no son las únicas relaciones dentro de una familia. ¿Qué pasa si quiero seleccionar un nieto, o un sobrino? ¿Se puede?

+
Seleccionando un nieto +
No tiene mayor complicación, al fin y al cabo, un nieto no es más que un hijo de un hijo. +
+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+p:hover > span > em { color: red; }
+
+</style>
+
+<p>
+ <em>este em es hijo de un párrafo</em>
+ <span> span también, pero...
+   <em>este em es nieto</em> </span>
+</p>
+
+
Seleccionando un sobrino. +
No hay problema, un sobrino no es más que un hijo de un hermano. +
+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+p:hover + div > em { color: red; }
+
+</style>
+
+<p>Al ponerte sobre este párrafo</p>
+<div> Cambias las propiedades de
+   <em>este em</em>
+</div>
+
+
Limitaciones
+

De los ejemplos anteriores se desprende que es muy fácil abarcar todas las combinaciones posibles. Siempre y cuando la secuencia de los selectores sea: +

+
  1. Descendente - Un elemento y sus descendientes. +
  2. Horizontal - Un elemento y sus hermanos. +
  3. Mixta - Una combinación de las anteriores. +
+

Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto el siquiente ejemplo ni funciona ni debe hacerlo: +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+em:hover #div { color: red; }
+
+</style>
+
+<h1>Este ejemplo ni funciona ni debe hacerlo.</h1>
+
+<div id='div'>
+   <em>Este em</em>
+   no puede cambiar las propiedades de su padre.
+</div>
+
+

Además hay una curiosa limitación ¿será un bug? Un selector compuesto puede empezar por un elemento o por un #id con :hover, Pero no puede empezar por una clase con :hover. Sorprendentemente con el selector universal (*) tampoco funciona. +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+* { color: red; }
+
+  .uno       .cero { color: blue; }      /* esto sí funciona */
+ *.uno       .cerocero { color: blue; }  /* esto sí funciona */
+
+  #uno:hover .dos { color: blue; }       /* esto sí funciona */
+ul.uno:hover .cuatro { color: blue; }    /* esto sí funciona */
+
+  .uno:hover .tres { color: blue; }      /* esto NO funciona */
+ *.uno:hover .cinco { color: blue; }     /* esto TAMPOCO funciona */
+
+</style>
+
+<div class='uno'>
+  .uno       .cero { color: blue; }
+  <em class='cero'>Esto sí funciona,</em> y... <br>
+  *.uno       .cerocero { color: blue; }
+  <em class='cerocero'>esto también funciona.</em>
+</div>
+
+<ul id='uno' class='uno'>
+  <li class='dos'>#uno:hover .dos - esto sí funciona.</li>
+  <li class='tres'>.uno:hover .tres - esto NO funciona.</li>
+  <li class='cuatro'>ul.uno:hover .cuatro - esto sí funciona.</li>
+  <li class='cinco'>*.uno:hover .cinco - esto TAMPOCO funciona.</li>
+</ul>
+
+ +

Los navegadores pueden dividirse en dos grupos: IE y el resto.

+

Referencia

+

Lo cierto es que no hay mucho escrito sobre el tema (en castellano casi nada, o nada), la gente sólo suele escribir sobre las cosas que funcionan en IE. Pero tampoco hace mucha falta. Todo lo que necesitamos está en el estándar CSS-2. Además, curiosamente, los dos pilares que sostienen esta funcionalidad (pseudoclases y selectores), están explicados en la misma página: el capítulo 5.

+

Recomiendo encarecidamente la lectura completa y atenta de todo el capítulo, y ya puestos, de toda la especificación. Aunque para el asunto que nos ocupa nos interesan principalmente:

+
Sobre los selectores por parentesco, sub-capítulos: 5.5, 5.6, 5.7
Sobre las pseudo-clases, sub-capítulo: 5.11
+

CSS-3

+

Todo lo explicado es conforme a CSS-2.1 ¿Qué nos depara el futuro? Si los pilares de esta técnica son las pseudo-clases y los selectores, CSS-3 traerá muchas más pseudo-clases y muchos más selectores, en definitiva, muchas más posibilidades de hacer cosas interesantes. +

Por ejemplo, hemos visto las limitaciones de CSS-2 para seleccionar hermanos, con CSS-3 esta limitación desaparece. Lo siguiente es CSS-3 pero funciona (usando el navegador apropiado). +

+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
+<style type='text/css'>
+
+.gracias { visibility: hidden; }
+
+#primero:hover + .gracias { visibility: visible; }
+#primero:hover ~ * span { color: red; } /* esto:'~' es CSS-3 */
+
+</style>
+
+<ul>
+  <li id='primero'>Por favor, ponga el cursor encima de esta frase.</li>
+  <li class='gracias'>Le doy las gracias con CSS-2.1</li>
+  <li>Item normal y corriente</li>
+  <li>El futuro: <span>span en rojo gracias a CSS-3</span></li>
+</ul>
+
+

Notas finales

+ + +

Categorías +

diff --git "a/files/es/c\303\263mo_crear_un_componente_xpcom_en_javascript/index.html" "b/files/es/c\303\263mo_crear_un_componente_xpcom_en_javascript/index.html" new file mode 100644 index 0000000000..3bd03b504c --- /dev/null +++ "b/files/es/c\303\263mo_crear_un_componente_xpcom_en_javascript/index.html" @@ -0,0 +1,191 @@ +--- +title: Cómo crear un componente XPCOM en JavaScript +slug: Cómo_crear_un_componente_XPCOM_en_JavaScript +tags: + - Complementos + - Todas_las_Categorías + - XPCOM + - extensiones +translation_of: Mozilla/Tech/XPCOM/Guide/Building_components_in_JavaScript +--- +

 

+

Introducción

+

Éste es un tutorial del tipo "Hola Mundo" para crear un componente XPCOM en JavaScript. No se describe cómo funciona XPCOM ni se explica lo que hace cada línea de código. Todo ello se detalla en otras páginas.

+

En este tutorial mostraremos qué es lo que debes hacer para conseguir un componente funcional en pocos pasos y de forma sencilla.

+

Advertencia: lo expuesto aquí ha sido desarrollado en un Mac. El comportamiento puede variar en otros sistemas operativos.

+

Implementación

+

Éste es un componente de ejemplo, con un único método que devuelve la cadena "Hola MozDev!".

+

Definir la interfaz

+

Si quieres usar tu componente desde JavaScript, o en otros componentes XPCOM, debes definir las interfaces que quieres mostrar (si quieres usar tu componente sólo desde Javascript, puedes usar el truco wrappedJSObject para que no necesites definir interfaces como se explica aquí. Mira un ejemplo aquí (en)).

+

Hay muchas interfaces ya definidas en las aplicaciones Mozilla, así que tal vez no necesites definir una nueva. Puedes mirar las interfaces XPCOM existentes de varias formas, en el código fuente Mozilla, o usando XPCOMViewer, un GUI para ver los componentes e interfaces registradas. Puedes descargar una versión que trabaje con Firefox 2 desde MozDev.

+

Si existe una interfaz que cumpla tus necesidades, no necesitas escribir un IDL, o compilar un typelib, y puedes saltar a la siguiente sección.

+

Si no encuentras una interfaz pre-existente que te satisfaga, debes definirla. XPCOM usa un dialecto de IDL para definir interfaces, llamado XPIDL. A continuación tienes la definición XPIDL para nuestro componente HolaMozDev:

+

HolaMozDev.idl

+
#include "nsISupports.idl"
+
+[scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx)]
+interface nsIHolaMozDev : nsISupports
+{
+  string hola();
+};
+
+

Ten en cuenta que tienes que generar un UUID para cada componente XPCOM que crees. Mira Generating GUIDs para más información.

+
+ Los UUID no pueden ser escritos puesto que se debe garantizar su unicidad. Deben ser generados empleando un algoritmo que la garantice.
+

Compilar la biblioteca de tipos

+

La definición de tu interfaz debe compilarse a forma binaria (XPT) para poder ser registrada y usada dentro de las aplicaciones Mozilla. La compilación puede hacerse usando el SDK de Gecko. Puedes averiguar cómo obtener versiones Mac, Linux, y Windows del SDK de Gecko leyendo el artículo Gecko SDK.

+
+ Nota: la versión Mac del SDK proporcionado para su descarga es sólo para PowerPC. Si necesitas una versión Intel, tendrás que compilarlo tú mismo como se describe en esa página.
+

Ejecuta esta orden para compilar la biblioteca de tipos. Aquí, {sdk_dir} es el directorio del SDK de Gecko descomprimido.

+
{sdk_dir}/bin/xpidl -m typelib -w -v -I {sdk_dir}/idl -e HolaMozDev.xpt HolaMozDev.idl
+
+

(El modificador -I es una i mayúscula, no una L minúscula) Esta orden creará el archivo de la bilioteca de tipos HelloWorld.xpt en el directorio de trabajo actual.

+

Crear el componente

+

HolaMozDev.js

+
/***********************************************************
+constantes
+***********************************************************/
+
+// referencia a la interfaz definida en nsIHolaMozDev.idl
+const nsIHolaMozDev = Components.interfaces.nsIHolaMozDev;
+
+// referencia requerida a la interfaz base que todos los componentes deben implementar
+const nsISupports = Components.interfaces.nsISupports;
+
+// UUID único identificando nuestro componente
+// puedes obtener el tuyo desde : http://kruithof.xs4all.nl/uuid/uuidgen
+const CLASS_ID = Components.ID("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx}");
+
+// descripción
+const CLASS_NAME = "Un Componente XPCOM de muestra";
+
+// identificador único textual
+const CONTRACT_ID = "@ejemplo.evelio.net/holamozdev;1";
+
+/***********************************************************
+definición de la clase
+***********************************************************/
+
+// el constructor de clase
+function HolaMozDev() {
+};
+
+// definición de la clase
+HolaMozDev.prototype = {
+
+  // define la función que declaramos en la interfaz
+  hola: function() {
+      return "Hola MozDev!";
+  },
+  //Desde nsISupports
+  QueryInterface: function(aIID)
+  {
+    if (!aIID.equals(nsIHolaMozDev) &&
+        !aIID.equals(nsISupports))
+      throw Components.results.NS_ERROR_NO_INTERFACE;
+    return this;
+  }
+};
+
+/***********************************************************
+la factoría de la clase
+
+Este objeto es miembro del objeto global Components.classes.
+Se deriva del ID de contrato, p.e.:
+
+miHolaMozDev = Components.classes["@ejemplo.evelio.net/holamozdev;1"].
+                          createInstance(Components.interfaces.nsIHolaMozDev);
+
+***********************************************************/
+var FabricaHolaMozDev = {
+  createInstance: function (aOuter, aIID)
+  {
+    if (aOuter != null)
+      throw Components.results.NS_ERROR_NO_AGGREGATION;
+    return (new HolaMozDev()).QueryInterface(aIID);
+  }
+};
+
+/***********************************************************
+definición del módulo (registro xpcom)
+***********************************************************/
+var HolaMozDevModulo = {
+  _firstTime: true,
+  registerSelf: function(aCompMgr, aFileSpec, aLocation, aType)
+  {
+    aCompMgr = aCompMgr.
+        QueryInterface(Components.interfaces.nsIComponentRegistrar);
+    aCompMgr.registerFactoryLocation(CLASS_ID, CLASS_NAME,
+        CONTRACT_ID, aFileSpec, aLocation, aType);
+  },
+
+  unregisterSelf: function(aCompMgr, aLocation, aType)
+  {
+    aCompMgr = aCompMgr.
+        QueryInterface(Components.interfaces.nsIComponentRegistrar);
+    aCompMgr.unregisterFactoryLocation(CLASS_ID, aLocation);
+  },
+
+  getClassObject: function(aCompMgr, aCID, aIID)
+  {
+    if (!aIID.equals(Components.interfaces.nsIFactory))
+      throw Components.results.NS_ERROR_NOT_IMPLEMENTED;
+
+    if (aCID.equals(CLASS_ID))
+      return FabricaHolaMozDev;
+
+    throw Components.results.NS_ERROR_NO_INTERFACE;
+  },
+
+  canUnload: function(aCompMgr) { return true; }
+};
+
+/***********************************************************
+Inicialización del módulo
+
+Cuando la aplicación registra el componente, se llama a esta función.
+
+***********************************************************/
+function NSGetModule(aCompMgr, aFileSpec) { return HolaMozDevModulo; }
+
+
+

Instalación

+

Para extensiones:

+
    +
  1. Copia HolaMozDev.js y HolaMozDev.xpt al directorio {extensiondir}/components/.
    2. +
  2. Elimina compreg.dat y xpti.dat del directorio de tu perfil de usuario.
    3. +
  3. Reinicia la aplicación.
    4. +
+

Para Firefox:

+
    +
  1. Copia HolaMozDev.js y HolaMozDev.xpt al directorio {objdir}/dist/bin/components, si está corriendo desde el código fuente.
    2. +
  2. Elimina compreg.dat y xpti.dat del directorio components.
    3. +
  3. Elimina compreg.dat y xpti.dat del directorio de tu perfil de usuario.
    4. +
  4. Reinicia la aplicación.
    5. +
+

Usar tu componente

+
try {
+        // Esto es necesario para permitir el uso generalizado de componentes en JavaScript
+        netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
+
+        var miComponente = Components.classes['@ejemplo.evelio.net/holamozdev;1']
+                                    .createInstance(Components.interfaces.nsIHolaMozDev);
+
+        alert(miComponente.hola());
+} catch (unError) {
+        alert("ERROR: " + unError);
+}
+
+

Otros recursos

+ diff --git "a/files/es/c\303\263mo_incrustar_el_motor_javascript/index.html" "b/files/es/c\303\263mo_incrustar_el_motor_javascript/index.html" new file mode 100644 index 0000000000..d938b252b8 --- /dev/null +++ "b/files/es/c\303\263mo_incrustar_el_motor_javascript/index.html" @@ -0,0 +1,108 @@ +--- +title: Cómo incrustar el motor Javascript +slug: Cómo_incrustar_el_motor_Javascript +tags: + - páginas_a_traducir +translation_of: Mozilla/Projects/SpiderMonkey/How_to_embed_the_JavaScript_engine +--- +

Ver tambien JSAPI User Guide. En particular, tiene mas y mejores ejemplos de codigo.

+

Un esqueleto de Tutorial

+

Comprobación para iniciar una maquina virtual y ejecutar un script sin ningún error:

+ +

(los errores son convencionalmente guardados en una variable JSBool llamada ok).

+
JSRuntime *rt;
+JSContext *cx;
+JSObject *global;
+JSClass global_class = {
+	"global",0,
+	JS_PropertyStub,JS_PropertyStub,JS_PropertyStub,JS_PropertyStub,
+	JS_EnumerateStub,JS_ResolveStub,JS_ConvertStub,JS_FinalizeStub
+};
+
+/*
+ * Siempre necesitará:
+ *        un runtime por proceso,
+ *        un contexto por hilo,
+ *        un objeto global por contexto,
+ *        clases estandard (ej. fecha).
+ */
+rt = JS_NewRuntime(0x100000);
+cx = JS_NewContext(rt, 0x1000);
+global = JS_NewObject(cx, &global_class, NULL, NULL);
+JS_InitStandardClasses(cx, global);
+
+/*
+ * Ahora suponga que el script contiene algún JS para evaluar, por decir "22/7" como una
+ * mala aproximación para la función matematica Math.PI, o algo mas largo, como esto:
+* "(function fact(n){if (n <= 1) return 1; return n * fact(n-1)})(5)"
+ * para calcular 5!
+ */
+char *script = "...";
+jsval rval;
+JSString *str;
+JSBool ok;
+
+ok = JS_EvaluateScript(cx, global, script, strlen(script),
+					   filename, lineno, &rval);
+str = JS_ValueToString(cx, rval);
+printf("script result: %s\n", JS_GetStringBytes(str));
+
+

Como llamar funciones de C desde JavaScript

+

Suponga que la función en C sea llamada doit y le gustaria que al menos 2 parametros sean llamados (si el llamado suministra menos, el motor JS deberia asegurar que lo indefinido sea pasado por lo faltante): 

+
#define DOIT_MINARGS 2
+
+static JSBool
+doit(JSContext *cx, JSObject *obj, uintN argc, jsval *argv, jsval *rval)
+{
+    /*
+     * Look in argv for argc actual parameters, set *rval to return a
+     * value to the caller.
+     */
+    ...
+}
+
+

Entonces para la conexión con JS, debe escribir:

+
ok = JS_DefineFunction(cx, global, "doit", doit, DOIT_MINARGS, 0);
+
+

O, si tenia una serie de funciones nativas para definir, las pondria probablemente en una tabla:

+
static JSFunctionSpec my_functions[] = {
+    {"doit", doit, DOIT_MINARGS, 0, 0},
+    etc...
+    {0,0,0,0,0},
+};
+
+

(Al final, todos los ceros especificados en la función terminan la tabla), y decir:

+
ok = JS_DefineFunctions(cx, global, my_functions);
+
+

Como llamar funciones de JavaScript  desde C

+

Say the click event is for the top-most or focused UI element at position (x, y):

+
JSObject *target, *event;
+jsval argv[1], rval;
+
+/*
+ * Find event target and make event object to represent this click.
+ * Pass cx to NewEventObject so JS_NewObject can be called.
+ */
+target = FindEventTargetAt(cx, global, x, y);
+event = NewEventObject(cx, "click", x, y);
+argv[0] = OBJECT_TO_JSVAL(event);
+
+/* To emulate the DOM, you might want to try "onclick" too. */
+ok = JS_CallFunctionName(cx, target, "onClick", 1, argv, &rval);
+
+/* Now test rval to see whether we should cancel the event. */
+if (JSVAL_IS_BOOLEAN(rval) && !JSVAL_TO_BOOLEAN(rval))
+    CancelEvent(event);
+
+

Again, I've elided error checking (such as testing for !ok after the call), and I've faked up some C event management routines that emulate the DOM's convention of canceling an event if its handler returns false.

+
+

Original Document Information

+ +
+

 

diff --git a/files/es/desarrollando_mozilla/index.html b/files/es/desarrollando_mozilla/index.html new file mode 100644 index 0000000000..4551e8fea2 --- /dev/null +++ b/files/es/desarrollando_mozilla/index.html @@ -0,0 +1,16 @@ +--- +title: Desarrollando Mozilla +slug: Desarrollando_Mozilla +tags: + - Desarrollando_Mozilla + - Todas_las_Categorías +--- +

¿Quieres echar una mano corrigiendo bugs, pero no sabes por dónde empezar?

+

Este es el punto de partida para todo lo relacionado con el hackeo de la bestia. Descubrirás cómo conseguir el código fuente, cómo compilarlo, cómo crear parches, y todas esas cosas esenciales que cualquier hacker de Mozilla debería conocer.

+ +

Documentación

Descargar el código fuente de Mozilla
El código fuente de Mozilla puede obtenerse descargando el archivo con el código fuente o usando el cliente CVS (Concurrent Versioning System).
Hackeando Firefox
Participa en el desarrollo de front-end de Firefox.
Documentación para la compilación
Esta sección contiente documentación sobre el sistema de compilación de Mozilla. Entre otras cosas, muestra como obtener el código y como compilarlo.
Hacking documentation on mozilla.org (en)
Another page with hacking-related documentation. We're working on this.
Preguntas frecuentes sobre depuración.
Los consejos de depuración son específicos para cada plataforma. Elija: Windows, Linux, o Mac OS X.

enlaces en rojo: ; Creando un parche: <small>Consejos para crear parches que permitan que tus cambios se incluyan.</small> Ver más...

Comunidad

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

{{ DiscussionList("dev-general", "mozilla.dev.general") }}

Ver más...

Herramientas

Ver más...

Temas Relacionados

Garantía de Calidad, Seguridad
+

Categorías

+

Interwiki Language Links

+

 

+ +

{{ languages( { "de": "de/Mozilla_entwickeln", "en": "en/Developing_Mozilla", "fr": "fr/D\u00e9veloppement_de_Mozilla", "ja": "ja/Developing_Mozilla", "pl": "pl/Programowanie_Mozilli", "pt": "pt/Desenvolvimento_Mozilla", "zh-cn": "cn/\u5f00\u53d1Mozilla" } ) }}

diff --git a/files/es/desarrollo_web/index.html b/files/es/desarrollo_web/index.html new file mode 100644 index 0000000000..c436a88778 --- /dev/null +++ b/files/es/desarrollo_web/index.html @@ -0,0 +1,59 @@ +--- +title: Desarrollo Web +slug: Desarrollo_Web +tags: + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/Guide +--- +

+

+
Guía Breve de Web Semántica
+Una magnífica introducción al tema.
+
+

El Desarrollo Web abarca todos los aspectos necesarios para desarrollar un sitio o aplicación Web. Esto implica múltiples tecnologías, la mayoría cuentan con una sección específica en este wiki. En esta sección trataremos el tema desde una perspectiva más general. +

+
+ +
+

Documentación

+
Guía Breve de Independencia de Dispositivo +
"hacer la Web universal y accesible para cualquier persona, en cualquier sitio, en cualquier momento y usando cualquier dispositivo" +
+
Selección de modo en Mozilla +
Este documento describe cómo Mozilla utiliza la declaración de DOCTYPE para determinar el modo de renderizado más apropiado para visualizar una página web. +
+
El modo casi estándar de Gecko +
Además de los modos tradicionales, estándar y quirks, el motor gecko nos ofrece este modo intermedio. Puede que te interese. +
+
Mozilla Web Author FAQ (en) +
This document answers questions that Web authors ask frequently specifically in connection with Mozilla and other Gecko-based browsers such as Firefox. +
+

Ver más... +

+		 +

Comunidad

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

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }} +

Ver más... +

+

Herramientas

+ +

Ver más... +

+

Temas relacionados

+
HTML, CSS, XHTML, XML, AJAX, JavaScript, Estándares Web +
+
+

Categorías +

Interwiki Language Links +

+
+{{ languages( { "de": "de/Webentwicklung", "en": "en/Web_Development", "fr": "fr/D\u00e9veloppement_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW" } ) }} diff --git a/files/es/desarrollo_web/web_adaptable/index.html b/files/es/desarrollo_web/web_adaptable/index.html new file mode 100644 index 0000000000..b2efc70e34 --- /dev/null +++ b/files/es/desarrollo_web/web_adaptable/index.html @@ -0,0 +1,39 @@ +--- +title: Diseño web adaptable +slug: Desarrollo_Web/Web_adaptable +translation_of: Web/Progressive_web_apps +--- +

Con los usuarios de la web usando cada vez más dispositivos móviles para navegar sitios web y aplicaciones, los diseñadores y desarrolladores web necesitan asegurarse que sus creaciones se vean y funcionen bien tanto en dispositivos móviles como en equipos tradicionales de escritorio. El prominente diseñador Luke Wroblewski recomienda diseñar "primero para móviles", en lugar de hacerlo como idea tardía al diseño para escritorio. Ya sea que el diseño para móviles sea el objetivo primario o un bonito extra, puede usar el poder de CSS para asegurarse que el mismo contenido puede accederse a través de todas las plataformas de hardware, desde teléfonos móviles a pantallas panorámicas de alta resolución.

+

Este enfoque es conocido como "diseño web adaptable". Algunas de sus estrategias incluyen:

+ +

Recursos

+

Overviews

+ +

Técnicas

+ +

Herramientas

+ +

Ejemplos

+ diff --git a/files/es/descripcion_general_sobre_nss/index.html b/files/es/descripcion_general_sobre_nss/index.html new file mode 100644 index 0000000000..438437ad34 --- /dev/null +++ b/files/es/descripcion_general_sobre_nss/index.html @@ -0,0 +1,19 @@ +--- +title: Descripcion general sobre NSS +slug: Descripcion_general_sobre_NSS +translation_of: Mozilla/Projects/NSS/Overview +--- +

Proven Application Security Architecture

+

Si usted busca incluir soporte para SSL, S/MIME, u otro estándar de seguridad en internet en su aplicación, puede hacer uso de los servicios de seguridad en red (NSS) para implementar los aspectos referidos a seguridad que necesite. NSS provee una implementación de código abierto completa de librerías criptogŕáficas usadas por AOL, Red Hat, Sun, y otras compañías en una gran variedad de productos, incluidos los siguientes:

+ +

NSS includes a framework to which developers and OEMs can contribute patches, such as assembler code, to optimize performance on their platforms. NSS 3.x has been certified on 18 platforms.

+

For more detailed information about NSS, see the NSS Project Page and NSS FAQ.

+

Source code for a Java interface to NSS is available in the Mozilla CVS tree. For details, see Network Security Services for Java.

+

NSS makes use of Netscape Portable Runtime (NSPR), a platform-neutral open-source API for system functions designed to facilitate cross-platform development. Like NSS, NSPR has been battle-tested in multiple products. For more information, see NSPR Project Page.

diff --git "a/files/es/detecci\303\263n_del_navegador_y_cobertura_a_m\303\272ltiples_navegadores/index.html" "b/files/es/detecci\303\263n_del_navegador_y_cobertura_a_m\303\272ltiples_navegadores/index.html" new file mode 100644 index 0000000000..f52610dc6b --- /dev/null +++ "b/files/es/detecci\303\263n_del_navegador_y_cobertura_a_m\303\272ltiples_navegadores/index.html" @@ -0,0 +1,504 @@ +--- +title: Detección del navegador y cobertura a múltiples navegadores +slug: Detección_del_navegador_y_cobertura_a_múltiples_navegadores +tags: + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Archive/Web/Browser_Detection_and_Cross_Browser_Support +--- +

La detección inapropiada de navegador puede ser la pesadilla del mantenimiento de la web. Re-evaluar los puntos básicos de cuándo y cómo detectar los agentes de usuario (user agents) es crucial para crear un contenido web mantenible y aceptable para múltiples navegadores. Este artículo revisa varias aproximaciones a la detección de navegadores y su utilidad en circunstancias específicas para llegar a una aproximación a la detección de navegadores basada en el sentido común.

+

Consejo rápido

+

Para determinar si el usuario visitante está utilizando un navegador basado en Gecko, basta con probar con:

+

navigator.product == 'Gecko'

+

o buscar la secuencia:

+

'Gecko/' en el navigator.userAgent. Debe tenerse en cuenta que algunos otros navegadores como Safari incluyen (like Gecko) en su cadena de agente de usuario y pueden confundir algunas comprobaciones simples.

+

Introducción

+

En un mundo ideal se podría escribir HTML, XML, CSS y JavaScript y preocuparse sólo por los estándares de W3C y ECMA. Sin embargo, no vivimos en tal mundo por el momento. Debido a fallos, implementaciones incompletas de los estándares y navegadores anticuados, los desarrolladores web deben ser capaces de determinar qué navegador está usando un visitante y proporcionar el contenido y código script apropiado.

+

Aunque la detección del navegador es quizás la tarea de script más común que aborda cualquier desarrollador web, parece que la variedad de diferentes estrategias en uso para detectar navegador es ilimitada. Como miembro del equipo de evangelismo de Netscape que ha pasado más de un año investigando el contenido web, puedo decir sin duda que la mayoría de los problemas de compatibilidad encontrados en la web hoy en día se deben a una falta de comprensión de los estándares combinada con estrategias de detección de navegadores inadecuada e inapropiada.

+

Este artículo intenta proporcionar una visión superficial de las estrategias y buenas prácticas de detección de navegadores. Para recomendaciones más específicas, puede leer el Manual de Compatibilidad de Gecko.

+

Gecko

+

Aunque muchos desarrolladores web conocen Firefox, los navegadores de Mozilla y Netscape 6/7, muchos menos son conscientes de que estos navegadores son miembros de una familia completa de agentes de usuario basados en Gecko layout engine que incluyen el navegador comercial CompuServe 7, y navegadores de código abierto como Epiphany, Galeon, Camino, y Kmeleon.

+

Gecko se diseñó desde el principio para cumplir con los estándares del W3C HTML, W3C CSS, W3C XML, W3C DOM, y ECMAScript (JavaScript). También incluye características de compatibilidad que permiten gestionar razonablemente el contenido heredado que se desarrolló para generaciones anteriores de navegadores como Nescape Navigator 4 así como características que proporcionan compatibilidad con Internet Explorer 5 y 6. A diferencia de otros navegadores, Gecko es realmente un navegador para múltiples plataformas y proporciona idéntica cobertura en todos los sistemas operativos donde está admitido.

+

La manera más fácil de tratar correctamente Gecko es crear contenido que sólo use los estándares. Desafortunadamente, ningún otro navegador implementa los estándares de una manera tan completa como Gecko, lo que quiere decir que los autores y desarrolladores web se ven forzados a continuar proporcionando cobertura a otros navegadores que no admiten los estándares tan bien. Afortunadamente, otros navegadores como Opera 7/8, y en menor medida Internet Explorer 5 y 6 para Windows e Internet Explorer 5 para Macintosh también implementan los estándares hasta cierto punto. Estos otros navegadores también parecen estar avanzando hacia una implementación más completa y rigurosa de los estándares y se espera que, en el futuro, los autores y desarrolladores web podrán olvidarse de la detección de navegadores al menos en lo relativo a las características gobernadas por estándares.

+

Aún se debe resolver cómo desarrollar contenido basado en estándares sin dejar de aprovechar las diferentes implementaciones de los navegadores modernos y, al mismo tiempo, admitir (en menor grado) los navegadores más antiguos y capaces. La detección de navegadores es clave para cumplir esta tarea.

+

Resumen de la historia de la detección de navegadores

+

Para entender por qué muchas estrategias comunes de detección de navegadores son inapropiadas, hay que referirse primero a cómo surgieron estas estrategias.

+

En los primeros días de la web, HTML era muy simple, no estandarizado y no incluía ninguna capacidad para scripts del lado cliente. HTML en sí mismo no se estandarizó hasta que se presentó HTML 2.0 a finales de 1995 y ni siquiera incluía tablas. Los suministradores de navegadores como Netscape y Microsoft competían para añadir características atractivas al HTML que implementaban en sus navegadores para proporcionar el contenido más atractivo y rico a sus usuarios e inducir a los autores web a hacer uso de ello. Las capacidades de los navegadores para incluir lo último y mejor en contenidos cambiaban casi diariamente.

+

Los autores web se encontraron desde el principio con una variedad de navegadores, algunos de los cuales implementaban la mejor y última versión de HTML y algunos que no lo hacían. La solución era o bien proporcionar el mínimo común denominador de HTML o usar técnicas de detección de navegadores en el servidor web para enviar contenido personalizado a cada navegador dependiendo del grado de implementación que proporcionaba éste. Acababa de nacer la detección de navegadores en el lado del servidor usando las cadenas de agente de usuario.

+

Las cadenas de agente de usuario se definen en el protocolo HTTP y están disponibles para los servidores web (refiérete al RFC 1945 - Hypertext Transfer Protocol 1.0 and RFC 2068 - Hypertext Transfer Protocol 1.1).

+

La aproximación más común en este momento era distinguir los agentes de usuario por vendor (suministrador) y version (versión) usando la cadena de agente de usuario recibida. Aunque esta aproximación se consideraba razonable en aquel momento, causó problemas a los suministradores de navegadores desde el principio. Los navegadores Netscape originales usaban una cadena de usuario que comenzaba con el nombre en clave del navegador Netscape seguido por su número de versión, p.e. Mozilla/version seguido por un token de comentario que daba información adicional relativa al sistema operativo usado, etc. Puesto que las primeras técnicas de detección de navegadores se basaban en buscar un navegador basado en Netscape y sólo proporcionaban contenido personalizado a los navegadores que usaban la cadena de usuario Mozilla/version, otros suministradores hicieron norma el uso de Mozilla/version para indicar que eran compatibles con una versión en concreto de Netscape. Ya que otros navegadores fingían ser navegadores Netscape y codificaban su información de versión de una manera no estándar en el área de comentarios del agente de usuario, la tarea de determinar qué navegador se estaba usando se convirtió en más complicada de lo que debía haber sido.

+

Netscape Navigator 2 introdujo la capacidad de ejecutar JavaScript en los navegadores web. A medida que la evolución de los navegadores continuó, aparecieron las diferencias en la implementación del script y los objetos admitidos por el navegador. Los autores web ya no debían sólo detectar los navegadores web en sus servidores web, sino que podían ahora ejecutar scripts en el lado cliente (en el mismo navegador) que podían usarse para distinguir navegadores. Una de las primeras aproximaciones a la detección de navegadores en el lado cliente incluía probar si el navegador implementaba determinados objetos. Un ejemplo de esta aproximación era probar la existencia del objeto document.images.

+

Aunque la detección basada en objetos se usó en algunas circunstancias, muchos autores web continuaron usando la aproximación vendor/version para distinguir navegadores web en sus scripts del lado cliente. Puesto que la cadena de agente de usuario era accesible como una propiedad del objeto navigator (p.e. navigator.userAgent), muchos autores web usaron la misma lógica en sus scripts del lado cliente que ya habían usado anteriormente en el lado del servidor. Además de navigator.userAgent estaban disponibles otras propiedades como appName y appVersion en el objeto navigator que podían usarse en las estrategias de detección de navegadores vendor/version.

+

El ejemplo clásico de esta estrategia de detección vendor/version en el lado cliente puede encontrarse en el Ultimate Browser Sniffer. Este script y variantes del mismo pueden encontrarse hoy en día en muchos sitios web, donde es una fuente común de problemas de detección.

+

Netscape Navigator 4 e Internet Explorer 4 introdujeron la capacidad de manipular el contenido HTML en un navegador (Dynamic HTML o DHTML) en lugar de en el servidor web y comenzaron la introducción de las implementaciones de CSS para proporcionar estilos al contenido. Esta generación de navegadores, además de compartir varias características que no estaban disponibles en versiones previas, implementaban cada una su propias (e incompatibles) capacidades competidoras para manipular contenido en una página web.

+

Dado que los navegadores de cada suministrador implementaban diferentes objetos para ejecutar DHTML, los autores web comenzaron a usar la detección de objetos para distinguir vendor/version a través de la existencia de objetos JavaScript concretos. La existencia de document.layers era suficiente para estar seguro de que el navegador era Netscape Navigator 4 mientras que la existencia de document.all era suficiente para estar seguro de que el navegador era Microsoft Internet Explorer 4. Una suposición implícita que muchos autores web de esa época hacían era que sólo había dos tipos de navegadores disponibles... Netscape Navigator y Microsoft Internet Explorer.

+

Estas estrategias de clasificar los navegadores por vendor/version, asumiendo que los únicos navegadores en uso eran Netscape Navigator 4 o Internet Explorer 4 falló cuando aparecieron navegadores alternativos como los basados en Gecko. Muchos de los problemas informados en la prensa sobre la incapacidad de Gecko de mostrar contenido estaban directamente relacionados con estrategias de detección de navegadores inadecuadas e inapropiadas.

+

Una nota final en las estrategias vendor/version. Un desarrollador web que use completamente la detección y distinciones de navegador en el Ultimate Browser Sniffer producirá código que usa bifurcaciones de código para muchos navegadores y versiones. Imagine intentar mantener un sitio web que use muchas de las variables disponibles de Ultimate Browser Sniffer.

+ +
suministrador del navegador is_nav, is_ie, is_opera, is_hotjava, is_webtv, is_TVNavigator, is_AOLTV
número de versión del navegador is_major (integer que indica el número de versión mayor: 2, 3, 4 ...), is_minor (float que indica el número de versión completo: 2.02, 3.01, 4.04 ...)
suministrador Y número de version mayor del navegador is_nav2, is_nav3, is_nav4, is_nav4up, is_nav6, is_nav6up, is_gecko, is_ie3, is_ie4, is_ie4up, is_ie5, is_ie5up, is_ie5_5, is_ie5_5up, is_ie6, is_ie6up, is_hotjava3, is_hotjava3up, is_opera2, is_opera3, is_opera4, is_opera5, is_opera5up
número de versión de JavaScript is_js (float que indica el número completo de versión de JavaScript: 1, 1.1, 1.2 ...)
plataforma y versión de SO is_win, is_win16, is_win32, is_win31, is_win95, is_winnt, is_win98, is_winme, is_win2k, is_os2, is_mac, is_mac68k, is_macppc, is_unix, is_sun, is_sun4, is_sun5, is_suni86, is_irix, is_irix5, is_irix6, is_hpux, is_hpux9, is_hpux10, is_aix, is_aix1, is_aix2, is_aix3, is_aix4, is_linux, is_sco, is_unixware, is_mpras, is_reliant, is_dec, is_sinix, is_freebsd, is_bsd, is_vms
+

¡Detectar navegadores usando este nivel de detalle es inmanejable, inmantenible y viola los principios básicos de la autoría web! Se recomienda profundamente a todo el mundo que evite esta trampa.

+

Problemas causados por una detección inapropiada del navegador

+

Exclusión de navegadores desconocidos

+

Si en su lógica de detección sólo proporciona pruebas para navegadores específicos, su sitio no será utilizable en caso de que un visitante use un navegador diferente. Considere el siguiente ejemplo:

+

+
// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.all)
+{
+// Internet Explorer 4+
+document.write('<link rel="stylesheet" type="text/css" src="style-ie.css">');
+}
+else if (document.layers)
+{
+// Navigator 4
+document.write('<link rel="stylesheet" type="text/css" src="style-nn.css">');
+}
+
+

Observe cómo el ejemplo anterior sólo proporcionaba hojas de estilo para Internet Explorer y Navigator 4, e incluso así sólo si el visitante tiene JavaScript activado en su navegador. Los usuarios de Netscape 6, Netscape 7, CompuServe 7, Mozilla, Opera no podrán ver el sitio correctamente.

+

Interpretación errónea de los navegadores

+

Un error común que hacen los autores web es asumir que si un navegador no es Netscape Navigator 4, ha de ser Internet Explorer y viceversa. Por ejemplo:

+
// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.all)
+{
+  // Internet Explorer 4+
+  elm = document.all['menu'];
+}
+else
+{
+  // Se asume Navigator 4
+  elm = document.layers['menu'];
+}
+
+

Observe cómo el ejemplo anterior asumía que cualquier navegador que no sea Internet Explorer ha de ser Navigator 4 e intentaba usar Layers. Éste es un origen común de problemas al usar navegadores basados en Gecko así como Opera. Un error similar puede verse en el siguiente ejemplo:

+
// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.layers)
+{
+  // Navigator 4
+  elm = document.layers['menu'];
+}
+else
+{
+  // Se asume Internet Explorer 4+
+  elm = document.all['menu'];
+}
+
+

Netscape 6 fue el primer navegador comercial publicado basado en Gecko. Debido a una falta de comunicación y comprensión, muchos sitios han creado estrategias de detección inapropiadas basadas en la cadena de agente de usuario de Netscape 6. La cadena de agente de usuario de Netscape 6 sigue los estándares HTTP para especificar la versión del agente de usuario (véase Mozilla user-agent strings y Cadenas de agente de usuario de Gecko).

+
Mozilla/5.0 (...) Gecko/20001108 Netscape6/6.0
+
+

El primer par suministrador/versión (Mozilla/5.0) indica que Netscape 6 es un navegador de quinta generación y que no es idéntico a los navegadores anteriores. Todos los navegadores basados en Gecko devuelven actualmente Mozilla/5.0 como su versión primaria aunque ningún otro navegador lo hace así en este momento. Se confía en que, cuando otros suministradores de navegadores alcancen el mismo nivel de cumplimiento de estándares que Gecko y comiencen a eliminar la compatibilidad con navegadores antiguos, ellos también comenzarán a informar que su versión es 5. Asumir que únicamente Gecko usa Mozilla/5.0 hará que su lógica de detección de navegadores falle tan pronto como otro suministrador publique un navegador que devuelva Mozilla/5.0.

+

El segundo par suministrador/versión (Gecko/20001108) identifica Netscape 6 como una versión concreta de Gecko que se compiló el 8 de noviembre de 2000. Si debe detectar Gecko usando la cadena de agente de usuario, Gecko/CCYYMMDD es la cadena más adecuada a buscar.

+

El tercer par suministrador/versión (Netscape6/6.0) identifica esta instancia en particular de un navegador Gecko como Netscape 6.0. Muchos sitios se centraron en la existencia de la cadena Netscape6 en el agente de usuario y usaron comprobaciones similares a:

+
if (navigator.userAgent.indexOf('Netscape6') != -1)
+{
+  // Netscape 6 code
+}
+
+

Observe cómo este tipo de detección obvia cualquier otro navegador basado en Gecko. Desafortunadamente, la cadena de agente de usuario de Netscape 6 no era suficientemente generalizable debido a su uso de la cadena Netscape6 como descripción del suministrador. Netscape 7 corrige este error e introduce otra posibilidad de que falle la detección basada en la cadena de agente de usuario.

+
Mozilla/5.0 (...) Gecko/200207XX Netscape/7.0
+
+

Observe cómo Netscape 7 ya no usa la cadena Netscape6 como suministrador. Cualquier estrategia de detección de cadena de usuario para Gecko basada en la existencia de la cadena Netscape6 fallará si el navegador es Netscape 7.

+

Utilización de objetos JavaScript para determinar el suministrador/versión (vendor/version)

+

Como ya se ha discutido, una aproximación común en el pasado fue usar objetos para clasificar los navegador por suministrador/versión. Un tipo común de detección que originalmente se escribió para identificar únicamente Netscape Navigator 4 e Internet Explorer 4 podría tener este aspecto:

+
// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.all)
+{
+  // IE4
+  height = document.body.offsetHeight;
+}
+else if (document.layers)
+{
+  // NN4
+  height = window.innerHeight;
+}
+else
+{
+  // other
+  height = 0;
+}
+
+

Con la introducción de DOM de W3C, el método estándar document.getElementById pasó a estar disponible en Internet Explorer 5 y más tarde en Netscape 6 (Gecko). Muchos autores web decidieron que la manera más fácil de identificar Netscape Gecko era añadir otra bifurcación de código como sigue:

+
// PROCEDIMIENTO ERRÓNEO - no usar!
+if (document.all)
+{
+  // IE4
+  height = document.body.offsetHeight;
+}
+else if (document.layers)
+{
+  // NN4
+  height = window.innerHeight;
+}
+else if (document.getElementById)
+{
+  // Creen que esto es Gecko
+  // ¡pero podrían estar equivocados!
+  height = window.innerHeight;
+}
+else
+{
+  // Otros
+  height = 0;
+}
+
+

La aproximación es incorrecta ya que asumen que el único otro navegador además de Internet Explorer 5+ que implementa document.getElementById es Gecko. Esto no es cierto hoy en día y será cada vez menos cierto a medida que aparezcan más navegadores en el futuro que implementen los estándares DOM de W3C.

+

Recomendaciones

+

Centrarse en los estándares y no en navegadores concretos

+

Si bien el período de 1994 a 2000 estuvo dominado por navegadores incompatibles y no estándares de Netscape y Microsoft, ahora el factor dominante en el desarrollo web son los estándares propuestos por el World Wide Web Consortium (W3C). Los estándares son importantes para los desarrolladores web debido al incremento de la flexibilidad, potencia de presentación y ayudas a los usuarios con alguna discapacidad, por citar sólo algunas razones.

+

Orientar el contenido de una web a suministradores concretos ignora la posibilidad de que puedan aparecer otros navegadores que implementen los mismos estándares en el futuro. Un problema común en la web hoy en día es la suposición de que los únicos navegadores en el mundo son Netscape Navigator y Microsoft Internet Explorer. Esto ignora la existencia de Opera así como los dispositivos de mano más modernos que se están usando para acceder a la web ahora y en el futuro.

+

Los navegadores basados en Mozilla (como Firefox), Internet Explorer 6 en Windows, e Internet Explorer 5 para Macintosh implementan todos ellos DOCTYPE switching. Ésta es una técnica por la cual estos navegadores pueden cambiar de un modo con "veriecuetos" ("Quirks" mode) (que emula las implementaciones con errores de los navegadores de generaciones anteriores) a un modo de estándares (que se adhiere más estrictamente a los estándares). Para los contenidos nuevos, se recomienda el uso de un DOCTYPE que invoque el modo de estándares en Gecko e Internet Explorer 6. Esto asegurará que sus diseños funcionen de manera similar en estos navegadores así como en otros navegadores que implementen los estándares.

+

Proporcionar una alternativa a los navegadores desconocidos

+

Proporcione siempre contenido y bifurcaciones de código para los navegadores desconocidos. La aproximación recomendada es asumir que cualquier navegador no conocido implementa los estándares básicos de HTML y CSS y hasta cierto nivel JavaScript y DOM de W3C. Esto garantizará que su contenido será admitido hoy y en el futuro por cualquier navegador que implemente los estándares.

+

Limitar el uso de características específicas de un suministrador/versión

+

Crear contenido que sea conforme a los estándares es la manera más fácil de dar cobertura al rango más amplio posible de agentes de usuario y decrementar sus costes de mantenimiento. Aunque no siempre es posible evitar las diferencias entre valores específicos de suministrador/versión de varios navegadores, el uso de tales características y la distinción entre navegadores basada en valores de suministrador/versión debería estar estrictamente limitada a aquellas áreas donde aún se requiera.

+

Limitar el uso de detección basada en la cadena de agente de usuario

+

La detección de navegadores en el lado del servidor requiere el uso de cadenas de agente de usuario. Recomendamos que el uso de la detección basada en cadenas de agente de usuario se limite a situaciones en el lado del servidor y únicamente a aquellas circunstancias donde es absolutamente necesario, como cuando es preciso obtener detalles de la rama de Gecko.

+

Hay razones legítimas para usar la cadena de agente de usuario (o el objeto navigator) para determinar exactamente qué suministrador, versión o sistema operativo se está usando. Muchos sitios financieros (bancos, firmas que operan en bolsa online, etc.) tienen políticas muy estrictas con respecto a qué navegadores prestan asistencia. Esto se debe al historial de problemas de seguridad que se han descubierto en navegadores antiguos. Si tiene la necesidad de permitir sólo a algunas versiones concretas de navegadores que usen su sitio seguro, entonces la cadena de agente de usuario y la información relacionada del objeto navigator pueden resultar muy útiles.

+

También puede usar información detallada con respecto a la versión de un navegador para solventar fallos en versiones específicas de un navegador. Sin embargo, esto puede derivar rápidamente en una pesadilla para el mantenimiento si no es cuidadoso. Se recomienda que tome estas medidas sólo con carácter temporal y, tan pronto como se corrijan en versiones más modernas del navegador, que requiera a sus visitantes que actualicen éste.

+

Proporcionar páginas básicas para los navegadores más antiguos

+

Ningún sitio web comercial de hoy en día considera un requisito que se visualice correctamente en Netscape Navigator versiones 1, 2 o 3, o Microsoft Internet Explorer 3. Las razones son que las capacidades de esos navegadores son demasiado limitadas comparadas con los navegadores más modernos, los requerimientos añadidos de desarrollo y control de calidad incrementan demasiado el coste de desarrollo de los sitios web y la cuota de mercado de tales navegadores no justifica el coste de tenerlos en cuenta.

+

Una de las decisiones más importantes que puede tomar de cara a mejorar la calidad de su sitio y reducir los costes de desarrollo, mantenimiento y control de calidad es proporcionar sólo una atención limitada a los navegadores más antiguos tales como Netscape Navigator 4 e Internet Explorer 4. Una de las aproximaciones más comunes en los sitios web más importantes es proporcionar una versión de bajo nivel de una página web a los navegadores más antiguos a la vez que proporciona una página más rica que usa CSS y JavaScript avanzados a los navegadores más modernos. Esto puede conseguirse mediante la detección del navegador en el lado del servidor, ya sea como parte de una solución basada en scripts o como parte de la capacidad nativa del servidor web de proporcionar diferente contenido a diferentes agentes de usuario. Esta aproximación no requiere necesariamente que prepare páginas separadas para los navegadores modernos y los más simples. Una solución común es escribir el contenido en un formato neutral como XML y usar transformaciones XSLT para generar el HTML necesario para cada clase de navegador.

+

El que un navegador en concreto debe recibir la versión de bajo nivel depende hasta cierto punto de qué características de JavaScript o CSS se estén usando en el contenido avanzado. Netscape Navigator e Internet Explorer 4 deberían considerarse ambos navegadores de bajo nivel para la mayoría de las páginas debido a su limitada implementación de los estándares basados en CSS y el más reciente DOM. Si sus páginas hacen uso de JavaScript avanzado que manipula o crea nuevo contenido usando la especificación DOM Core de W3C, entonces Opera 5 y 6 también deben considerarse de bajo nivel debido a su limitada implementación de DOM de W3C.

+

El futuro pertenece a los desarrolladores y navegadores que implementen los estándares. Si deja de sacar partido a los cambios que se avecinan en los navegadores, los competidores se comeran su comida. Cuando eso suceda, el único lugar en el que se podrá encontrar su sitio web es en el archivo web.

+

Usar detección no basada en script cuando sea posible

+

Los navegadores más antiguos tienen muchas limitaciones que hacen que ignoren las características más avanzadas. El uso juicioso de estas limitaciones en los navegadores más antiguos le permitirá incluir contenido moderno sin dejar de prestar asistencia a los navegadores antiguos.

+

HTML proporciona varios métodos para detectar si una implementación incluye diversas características como scripts y marcos. Use estas capacidades naturales de HTML para extender el abanico de navegadores admitido por el contenido de su web.

+

Usar NOFRAMES para dar cobertura a los navegadores que no implementan marcos

+
<HTML>
+  <HEAD>
+    <TITLE>Marcos</TITLE>
+  </HEAD>
+  <FRAMESET ROWS="30,*">
+    <FRAME SRC="foo.html">
+    <FRAME SRC="bar.html">
+    <NOFRAMES>
+      <BODY>
+        <P>
+          Esta página requiere marcos. Vea el mapa de sitio:  <a href="noframes.html"></a>.
+        </P>
+      </BODY>
+    </NOFRAMES>
+  </FRAMESET>
+</HTML>
+
+

Usar NOSCRIPT para dar cobertura a los navegadores que no permiten el uso de scripts

+

Algunos navegadores pueden no implementar scripting, y algunos usuarios pueden tener los scripts desactivados en sus navegadores. Use la etiqueta NOSCRIPT para proporcionar a esos usuarios versiones alternativas de sus páginas que no usen scripts, o al menos notificarles de la necesidad de permitir la ejecución de scripts para poder visualizar su contenido correctamente.

+

Dado que navegadores tales como Netscape Navigator 4 e Internet Explorer 4 no implementan algunas de las adiciones más recientes al estándar JavaScript (ECMAScript), a menudo es necesario limitar el uso las características avanzadas de JavaScript tales como el procesamiento de excepciones. Una aproximación es requerir que los usuarios de navegadores que no admitan el nivel de JavaScript usado en su contenido desactiven JavaScript para poder usar su contenido. Puede hacer esto proporcionando un mensaje de error a los usuarios de navegadores más antiguos así como un contenido alternativo incluido en las etiquetas NOSCRIPT.

+
<HTML>
+  <HEAD>
+    <TITLE>Sin script ('noscript')</TITLE>
+  </HEAD>
+  <BODY>
+    <SCRIPT LANGUAGE="JavaScript">
+      window.onerror = function ()
+      {
+        // Envía al usuario a una página describiendo las limitaciones
+        // del navegador y le indica que tiene que desactivar
+        // JavaScript para poder ver su sitio.
+      }
+
+      // Netscape Navigator 4 generará un error en cualquier
+      // JavaScript que intente usar procesamiento de excepciones
+      // con bloques try ... catch.
+      try
+      {
+        // Código para implementar un menú bonito
+      }
+      catch (errores)
+      {
+        // Manejo de excepciones
+      }
+    </SCRIPT>
+    <NOSCRIPT>
+      <!--
+      Si JavaScript no está activado, entonces el navegador
+      mostrará los contenidos de la etiqueta NOSCRIPT
+      que, en este caso, es un simple menú implementado
+      como una lista no ordenada.
+      -->
+      <UL>
+        <LI><A HREF="choice1.html">Elección 1</A></LI>
+        <LI><A HREF="choice2.html">Elección 2</A></LI>
+      </UL>
+    </NOSCRIPT>
+  </BODY>
+</HTML>
+
+

Usar SCRIPT LANGUAGE para elegir el navegador en el que se ejecuta

+

La elección del lenguaje de scripting viene determinada por el atributo LANGUAGE de la etiqueta script. Internet Explorer 4 y superiores pueden admitir una variedad de lenguajes de script. Los más comunes son VBSCRIPT y JavaScript. Internet Explorer también usa JSCRIPT como un sinónimo de JavaScript. Puesto que otros navegadores no admiten los valores VBSCRIPT o JSCRIPT como atributo de lenguaje, puede usar éstos cuando desee que ciertos scripts se ejecuten únicamente por Internet Explorer 4 y superior.

+
<HTML>
+  <HEAD>
+    <TITLE>Lenguajes Script</TITLE>
+  </HEAD>
+  <BODY>
+    <SCRIPT LANGUAGE="JavaScript">
+      // Código JavaScript para implementar un menú vistoso
+      // Visible a todos los navegadores que admitan JavaScript
+    </SCRIPT>
+    <SCRIPT LANGUAGE="JScript">
+      // Código JavaScript que usa características propietarias de
+      // Internet Explorer no disponibles en otros navegadores
+    </SCRIPT>
+    <SCRIPT LANGUAGE="VBScript">
+      // Codigo VBScript que usa características propietarias de
+      // Internet Explorer no disponibles en otros navegadores
+    </SCRIPT>
+  </BODY>
+</HTML>
+
+

Usar las limitaciones CSS de Netscape Navigator 4

+

Es posible usar las limitaciones de Netscape Navigator 4 en su implementación CSS para excluir automáticamente ciertas reglas CSS de su interpretación por Navigator 4.

+

Por ejemplo, Navigator 4 no comprende la directiva @import en CSS y no cargará ninguna hoja de estilo CSS externa especificada vía @import. Esta técnica puede usarse para proporcionar reglas CSS básicas comunes para todos los navegadores (incluyendo Navigator 4) y, al mismo tiempo, proporcionar reglas más avanzadas en un archivo CSS externo para los navegadores más modernos con mejor cumplimiento CSS.

+
<STYLE type="text/css">
+/* Reglas CSS para Navigator 4 */
+</STYLE>
+
+<STYLE type="text/css">
+/* Reglas CSS avanzadas ignoradas por Navigator 4 */
+@import "advanced.css";
+</STYLE>
+
+

Hay disponible una técnica similar para ocultar las reglas CSS de Navigator 4 aprovechando el hecho de que Navigator 4 ignorará las reglas CSS que aparezcan tras la secuencia /*/*/ en una hoja de estilos.

+
<STYLE type="text/css">
+/* Reglas para Navigator 4 */
+
+/*/*/
+/* Reglas CSS avanzadas ignoradas por Navigator 4 */
+</STYLE>
+
+

DevEdge usa esta técnica para ocultar el CSS avanzado de Navigator 4.

+

Usar detección de objetos orientada a características

+

La detección de objetos es un poderoso método para proporcionar cobertua a múltiples navegadores en su contenido web. Aunque puede usar la detección de objetos como un medio más para distinguir entre distintos suministradores y versiones, la técnica muestra su verdadero potencial cuando se usa para detectar características en lugar de navegadores.

+

La detección de objetos orientada a características consiste en comprobar la existencia de objetos específicos antes de intentar usarlos en un script. El ejemplo clásico es:

+
if (document.images)
+{
+  // código que procesa las imágenes
+}
+
+

La ventaja de la detección de características es que funcionará con independencia del suministrador y versión. Podemos reescribir el ejemplo anterior que ilustraba los problemas de usar objetos para determinar el suministrador y versión para que use en su lugar detección de características.

+
if (document.body && typeof(document.body.offsetHeight) == 'number')
+{
+  height = document.body.offsetHeight;
+}
+else if (typeof(window.innerHeight) == 'number')
+{
+  height = window.innerHeight;
+}
+else
+{
+  height = 0;
+}
+
+

Observe cómo el ejemplo anterior no hace suposiciones sobre qué navegador se está usando. En su lugar, sólo comprueba los objetos que desea usar. Puesto que los valores numéricos podrían ser cero, el script prueba el tipo de los objetos para asegurarse de que son números.

+

Gecko y Navigator 4

+

Gecko es el reemplazo para el motor de dibujado de Navigator 4 y, como tal, retiene muchas características de Navigator 4. Las diferencias básicas entre Navigator 4 y Gecko pueden resumirse rápidamente en:

+ +

Gecko e Internet Explorer

+

Gecko implementa cierto número de características propietarias de Internet Explorer, especialmente con respecto a su modelo de objetos DHTML. La implementación en Gecko de las características de IE se ha ido incrementando paulatinamente desde la presentación de Netscape 6 en noviembre de 2000. La mejor aproximación para sacar partido de estas características de compatibilidad con IE en Gecko es usar la detección de características basada en objetos. Esto usará automáticamente esas características en Gecko si están disponibles en la versión de Gecko usada. Vea la DOM Client Object Cross-Reference:navigator para más detalles sobre qué objetos y propiedades de Internet Explorer están implementadas en qué versiones de Gecko.

+

Ciertas características de Internet Explorer no están implementadas en Gecko. Entre éstas se incluyen el objeto window.event, behaviors, filtros, transiciones y ActiveX.

+

Cómo (y cuándo) usar el objeto navigator al detectar Gecko

+

A menos que necesite específicamente detectar si se está usando Gecko, no use estos métodos. Sólo deberían usarse en circunstancias que no puedan ser resueltas usando la detección de características mediante objetos como, por ejemplo, cuando deben excluirse versiones específicas de Gecko por razones de seguridad.

+

Nota: para la detección en el lado cliente, recomendamos usar el objeto navigator y sus propiedades. Toda la información devuelta en el objeto navigator también está disponible en la cadena de agente de usuario que puede usarse en el lado del servidor.

+

Producto (product)

+

navigator.product es específico de los navegadores Gecko y siempre devolverá 'Gecko'. Ésta es una manera rápida y sencilla de determinar que un navegador está basado en Gecko.

+

Etiqueta de la rama CVS (CVS Branch Tag)

+

A partir de Gecko 0.9.0 (Netscape 6.1 en Gecko 0.9.2), navigator.userAgent contiene la etiqueta de la rama CVS del código fuente usado para crear la versión de Gecko usada en el navegador. La etiqueta de la rama está incluida en el área de comentario de la cadena de agente de usuario y está precedida de la secuencia 'rv:'. En el ejemplo siguiente, la etiqueta de la rama es a.b.c.

+
Mozilla/5.0 (...; rv:a.b.c) Gecko/CCYYMMDD Suministrador/versión
+
+

Los navegadores Gecko compilados desde la misma rama comparten la misma versión básica de Gecko y pueden tratarse de manera similar en lo relativo a HTML, CSS, JavaScript, etc. Por ejemplo, Netscape 6.2, 6.2.1, 6.2.2, 6.2.3 y CompuServe 7 están, todos ellos, compilados a partir de la rama 0.9.4 y, por tanto, tienen el mismo comportamiento en muchos aspectos.

+ +
Etiquetas de ramas Gecko
Navegador Etiqueta de rama
Netscape 6.0 contenía M18 en lugar del valor rv
Netscape 6.1 0.9.2
Netscape 6.2 0.9.4
Netscape 6.2.1 0.9.4
Netscape 6.2.2 0.9.4.1
Netscape 6.2.3 0.9.4.1
CompuServe 7 0.9.4.2
Netscape 7.0 1.0.1
Netscape 7.01 1.0.2
+

Como puede ver, todas las versiones de Netscape 6.2 y CompuServe 7 fueron creadas de la rama 0.9.4. La distinción entre 0.9.4, 0.9.4.1, 0.9.4.2 es menor.

+

Nota: la etiqueta de la rama es una cadena y puede contener más cosas que dígitos sueltos en un nivel concreto. Por ejemplo, es concebible que algún día existan etiquetas de ramas similares a 2.2.0 y 2.12.36. Puesto que estos valores son cadenas, no es posible realizar comparaciones entre cadenas para determinar qué rama es posterior. En nuestro ejemplo, la rama 2.2.0 se creó antes que la 2.12.36, pero una comparación de esos valores entre cadenas mostrará que '2.2.0' > '2.12.36'. La función JavaScript geckoGetRv() proporciona una solución a este problema convirtiendo la etiqueta de la rama en la cadena de agente de usuario en un número de coma flotante donde cada nivel de la etiqueta de la rama es considerado un número entre 0-99.

+ +
Ejemplo de geckoGetRv()
Etiqueta de rama geckoGetRv()
0.9.2 0.0902
0.9.4 0.0904
0.9.4.1 0.090401
0.9.4.2 0.090402
1.0.1 1.0001
1.0.2 1.0002
2.2.0 2.02
2.12.36 2.1236
+

geckoGetRv() devuelve valores que pueden compararse usando mayor que, menor que, etc. geckoGetRv() no es parte oficial de Gecko; sin embargo, se proporciona como un ejemplo de aproximaciones que pueden tomarse para comparar las diferentes etiquetas de rama hoy y en el futuro.

+

Fecha de compilación

+

navigator.productSub es específico de los navegadores Gecko y devolverá una cadena que contiene la fecha en que se compiló el navegador en el formato CCYYMMDD (p.e. '20020801' para el 1 de agosto de 2002). Si le preocupa un problema de seguridad concreto en Gecko y sabe, por ejemplo, que todos los navegadores Gecko contienen una corrección para el problema a partir de una cierta fecha, puede comprobar que el valor de navigator.productSub es posterior a esa fecha.

+

También puede distinguir entre versiones "punto algo" usando una combinación de la etiqueta de la rama y la fecha de compilación. Por ejemplo, Netscape 6.2.2 y Netscape 6.2.3 tienen ambos la etiqueta de la rama 0.9.4.1, pero Netscape 6.2.2 tiene navigator.productSub == '20020314' mientras que Netscape 6.2.3 tiene navigator.productSub == '20020508'.

+

El suministrador y la versión (vendor/version)

+

Todos los navegadores Gecko devuelven el suministrador y la versión tanto en el objeto navigator como en la cadena de agente de usuario. La información de suministrador y versión, no obstante, no es tan útil como la etiqueta de la rama y la fecha de compilación y no recomendamos su uso. Sin embargo, si lo desea, puede distinguir los diferentes tipos de navegador Gecko usando estos valores. Como vimos previamente, el suministrador/versión aparece en la cadena de agente de usuario a continuación de la versión de Gecko.

+
Mozilla/5.0 (...; rv:a.b.c) Gecko/CCYYMMDD Suministrador/versión
+
+

El suministrador está disponible en el objeto navigator como navigator.vendor mientras que la versión del suministrador está disponible como navigator.vendorSub.

+ +
Valores de suministrador/versión de Gecko
Navegador Suministrador Versión
Netscape 6.0 Netscape6 6.0
Netscape 6.01 Netscape6 6.01
Netscape 6.1 Netscape6 6.1
Netscape 6.2 Netscape6 6.2
Netscape 6.2.1 Netscape6 6.2.1
Netscape 6.2.2 Netscape6 6.2.2
Netscape 6.2.3 Netscape6 6.2.3
CompuServe 7.0 CS 2000 7.0 7.0
Netscape 7 Versión preliminar 1 Netscape 7.0b1
Netscape 7.0 Netscape 7.0
Netscape 7.01 Netscape 7.01
+

Ejemplos

+

Si es como yo, aprende mejor de ejemplos. Estudiar cómo usan otros autores la detección de navegador y las técnicas de codificación para múltiples navegadores es la mejor forma de aprender.

+

Ejemplo 1 - detección de características basada en objetos

+

Este ejemplo ilustra el uso de la detección de características. Observe que Gecko 1.0 (Netscape 7) y posteriores implementan la característica propietaria de Internet Explorer clientWidth mientras que Netscape 6 no lo hacía. En este ejemplo, Netscape 7 e Internet Explorer 5+ usarán automáticamente clientWidth mientras que Netscape Navigator 4, Netscape 6, CompuServe 7 y Opera usarán innerWidth.

+

Compare cómo habría tenido que codificar esto mismo usando aproximaciones de detección basadas en suministrador/versión.

+
if (windowRef.document.body && typeof(windowRef.document.body.clientWidth) == 'number')
+{
+  // Gecko 1.0 (Netscape 7) e Internet Explorer 5+
+  width = windowRef.document.body.clientWidth;
+}
+else if (typeof(windowRef.innerWidth) == 'number')
+{
+  // Navigator 4.x, Netscape 6.x, CompuServe 7 y Opera
+  width = windowRef.innerWidth;
+}
+
+

Ejemplo 2 - detección de características basada en objetos

+
Cobertura a múltiples navegadores
+

Este ejemplo también ilustra el uso de la detección de características y muestra las complicaciones que pueden surgir de las implementaciones no estándar en otros navegadores.

+
function moveElement(id, x, y)
+{
+  // mueve el elemento id a x,y
+  // donde x,y son la posición horizontal
+  // y vertical en píxeles
+
+  var elm = null;
+  if (document.getElementById)
+  {
+    // el navegador implementa parte de W3C DOM HTML
+    // Gecko, Internet Explorer 5+, Opera 5+
+    elm = document.getElementById(id);
+  }
+  else if (document.all)
+  {
+    // Internet Explorer 4 u Opera con el agente de usuario IE
+    elm = document.all[id];
+  }
+  else if (document.layers)
+  {
+    // Navigator 4
+    elm = document.layers[id];
+  }
+
+  if (!elm)
+  {
+    // navegador no admitido o elemento no encontrado
+  }
+  else if (elm.style)
+  {
+    // el navegador implementa parte de W3C DOM Style
+    // Gecko, Internet Explorer 4+, Opera 5+
+
+    if (typeof(elm.style.left) == 'number')
+    {
+      // Opera 5/6 no implementa el estándar correctamente
+      // y asume que elm.style.left y propiedades similares
+      // son números.
+      elm.style.left = x;
+      elm.style.top  = y;
+    }
+    else
+    {
+      // Gecko/Internet Explorer 4+
+      // W3C DOM Style establece que elm.style.left es una cadena
+      // que contiene la longitud seguida de la unidad, p.e. 10px
+      // Gecko le permitirá omitir la unidad sólo en el modo con
+      // vericuetos (Quirks mode).
+      // Gecko REQUIERE la unidad si opera en el modo de estándares.
+      elm.style.left = x + 'px';
+      elm.style.top  = y + 'px';
+    }
+  }
+  else if (typeof(elm.left) == 'number')
+  {
+    // Navigator 4
+    elm.left = x;
+    elm.top  = y;
+  }
+}
+
+
Sólo con estándares
+

Considere lo sencilla que es esta función si la codifica de acuerdo a los estándares del W3C.

+
function moveElement(id, x, y)
+{
+  // mueve el elemento id a x,y
+  // donde x,y son la posición horizontal
+  // y vertical en píxeles
+
+  var elm = document.getElementById(id);
+
+  if (elm)
+  {
+    elm.style.left = x + 'px';
+    elm.style.top  = y + 'px';
+  }
+}
+
+

Pregúntese a sí mismo esto: "¿Dar cobertura a los navegadores no estándar compensa los costes de desarrollo y mantenimiento?"

+

Ejemplo 3 - Detectar ramas específicas de Gecko

+
// devuelve el valor rv de un agente de usuario Gecko
+// como un número de coma flotante.
+// devuelve -1 para navegadores no Gecko.
+//          0 para navegadores previos a Netscape 6.1/Gecko 0.9.1
+//          número > 0 donde cada porción del valor rv
+//          delimitado por . se tratará como un valor
+//          entre 0-99.
+//          p.e. para rv: 3.12.42,
+//          getGeckoRv() devuelve 3.1242
+//
+function geckoGetRv()
+{
+  if (navigator.product != 'Gecko')
+  {
+    return -1;
+  }
+  var rvValue = 0;
+  var ua      = navigator.userAgent.toLowerCase();
+  var rvStart = ua.indexOf('rv:');
+  var rvEnd   = ua.indexOf(')', rvStart);
+  var rv      = ua.substring(rvStart+3, rvEnd);
+  var rvParts = rv.split('.');
+  var exp     = 1;
+
+  for (var i = 0; i < rvParts.length; i++)
+  {
+    var val = parseInt(rvParts[i]);
+    rvValue += val / exp;
+    exp *= 100;
+  }
+
+  return rvValue;
+}
+
+
+// determina si el navegador es cualquier Gecko de la
+// rama >= 1.0.1 o Netscape 6.2.x/CompuServe 7
+// compilado tras el 1 de agosto de 2002
+
+var rv    = geckoGetRv();
+var found = false;
+
+if (rv >= 0)
+{
+  // Navegador Gecko
+  if (navigator.productSub > '20020801')
+  {
+    if (rv >= 1.0001)
+    {
+      found = true;
+    }
+    else if (rv >= 0.0904 && rv < 0.0905)
+    {
+      if (navigator.vendor == 'Netscape6' || navigator.vendor == 'CS 2000 7.0')
+      {
+        found = true;
+      }
+    }
+  }
+}
+
+

Ejemplo 4 - The International Herald-Tribune

+

Este sitio ilustra muchas de las técnicas descritas en este artículo. Usan páginas básicas para los navegadores menos capaces combinadas con la detección de características basada en objetos para producir un sitio atractivo e interesante.

+

Ejemplos de DevEdge

+
   * xbDOM
+   * xbMarquee
+   * xbPositionableElement
+   * xbAnimatedElement
+
+

Conclusión

+

Como hemos visto en este artículo, la historia de detección de navegadores es aún bastante complicada debido a las diferencias entre los navegadores modernos tales como Gecko/Internet Explorer 6 y los navegadores más antiguos o no estándares tales como Netscape Navigator 4. Puede decirse a sí mismo "¡Si todos los navegadores fueran tan buenos como Gecko e Internet Explorer 6, entonces mi trabajo sería mucho más fácil!".

+

Me gustaría dejarle con esta idea. En el pasado, los usuarios no tenían la posibilidad de escoger un navegador que implementara los estándares; sin embargo hoy tienen esa elección. No hay razón convincente para que nadie en el mundo continúe usando un navegador que no implemente los estándares. Sin embargo, en la medida en que los desarrolladores web continúen codificando arreglos para estos navegadores antiguos, los usuarios no tendrán una motivación para actualizar. Al cesar de dar cobertura a los navegadores antiguos, puede proporcionar una razón a los usuarios para actualizar. Esto no sólo les beneficiará a ellos, sino también a usted. Tener en cuenta sólo a navegadores basados en estándares puede reducir los costes de desarrollo y mantenimiento así como incrementar el contenido dinámico y atractivo que atraerá visitantes e incrementará su beneficio. La elección es suya... ¡Decida apoyar a los estándares hoy!

+

Enlaces

+ +
+

Información del documento original

+ +
+

diff --git "a/files/es/detectar_la_orientaci\303\263n_del_dispositivo/index.html" "b/files/es/detectar_la_orientaci\303\263n_del_dispositivo/index.html" new file mode 100644 index 0000000000..08f93e1145 --- /dev/null +++ "b/files/es/detectar_la_orientaci\303\263n_del_dispositivo/index.html" @@ -0,0 +1,56 @@ +--- +title: Detectar la orientación del dispositivo +slug: Detectar_la_orientación_del_dispositivo +tags: + - Aceleración + - CSS + - Consultas + - Orientación + - para_revisar +--- +

{{ gecko_minversion_header ("1.9.1") }}

+

Cada vez más, los dispositivos habilitados para la web son capaces de determinar su orientación, es decir, que pueden informar sobre los datos que indican cambios en su orientación con relación a la atracción de la gravedad. En concreto, los dispositivos manuales como, por ejemplo, los teléfonos móviles pueden utilizar esta información para rotar automáticamente la pantalla de forma que se mantenga en posición vertical. Cuando el dispositivo se gira, presenta una vista en pantalla panorámica del contenido de la web, de manera que su anchura es superior a su altura.

+

Hay dos maneras de tratar la información de orientación en Gecko. La primera es la consulta a medios de orientación . Esto te permite ajustar el contenido de tu diseño con CSS, en función de si el dispositivo está en modo horizontal (es decir, su anchura es superior a su altura) o en modo vertical (su altura es mayor que su anchura).

+

La segunda manera de administrar la información de orientación, , es el evento MozOrientation, agregado en Gecko 1.9.2 (Firefox 3.6). Este evento se envía cuando el acelerómetro detecta un cambio en la orientación del dispositivo. Al recibir y procesar los datos reportados por los eventos MozOrientation, es posible responder de forma interactiva a los cambios de elevación y rotación causados por el movimiento del dispositivo.

+

Ajuste de diseño cuando cambia la orientación

+

Uno de los casos en que te interesarán los cambios de orientación es cuando quieras evaluar el diseño de tu contenido en función de la orientación del dispositivo. Por ejemplo, tal vez desees que una barra de botones se extienda a lo largo de la pantalla del dispositivo. Si utilizas una consulta multimedia, puede hacer esto fácilmente y de forma automática.

+

Construir el CSS para cada orientación

+

Para este caso práctico, necesitarás dos hojas de estilo: una para ser usada cuando el dispositivo está en orientación vertical (su altura es mayor que su anchura) y la otra que se utiliza cuando el dispositivo está en posición horizontal (su ancho es mayor a su altura).

+ +
Vertical Horizontal

#toolbar {
  width: 100%;
}

 #toolbar {
  min-height: 500px;
  width: 125px;
  margin-right: 8px;
  float: left;
}
+

Como puedes ver si analizas los dos fragmentos de CSS anteriores, en el modo vertical, hacemos que la barra de herramientas se extienda horizontalmente en la parte superior de la ventana, con el fin de maximizar el espacio horizontal disponible para el contenido. En el modo horizontal, la barra de herramientas se extiende verticalmente por el lado izquierdo del documento.

+

La aplicación del CSS correcto en función de la orientación actual

+

Lo único que tienes que hacer ahora es establecer las consultas multimedia que seleccionará automáticamente el archivo CSS correcto basado en la orientación del dispositivo. Esto es sencillo:

+
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
+<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
+
+

A partir de ahora, la carga de los contenidos da como resultado la disposición correcta que se aplicará en función de la orientación del dispositivo.

Procesamiento de eventos de orientación

+

{{ gecko_minversion_header("1.9.2") }}

+

Firefox 3.6 (Gecko 1.9.2) introdujo el evento MozOrientation, al que puedes prestar atención con el fin de recibir las actualizaciones mientras el usuario ajusta la orientación del dispositivo.

+

En la actualidad, este es compatible con algunos dispositivos móviles (Windows Mobile, por ejemplo) y en el MacBook de Apple y los equipos MacBook Pro.

+

Lo único que tienes que hacer para comenzar a recibir los eventos de orientación es lo siguiente:

+
window.addEventListener("MozOrientation", handleOrientation, true);
+

Después de registrar tu escucha de eventos (en este caso, una función de JavaScript llamada handleOrientation()), la función de escucha se llama de forma periódica con la orientación de datos actualizada.

+

El evento de orientación contiene tres valores:

+ +
Campo Tipo Descripción
x double La cantidad de inclinación a lo largo del eje X.
y double La cantidad de inclinación a lo largo del eje Y.
z double El importe de la inclinación a lo largo del eje Z.
+

Los valores de x , y y z pueden variar desde -1 a 1, donde 0 significa que el dispositivo está en equilibrio sobre ese eje.

+

La función de controlador o manejador de eventos puede ser algo así:

+
function handleOrientation(orientData) {
+  var x = orientData.x;
+  var y = orientData.y;
+  var z = orientData.z;
+
+  // Haz cosas con los datos de orientación nuevos
+}
+
+

Los valores del acelerómetro explicados

+

El valor indicado para cada acceso indica la cantidad de la aceleración a lo largo de ese eje que está teniendo lugar actualmente.

+
Nota: en esta sección se describe cómo estos valores funcionan en la actualidad, sin embargo, esto está sujeto a cambios en un futuro.
+

El eje X representa la cantidad de inclinación de derecha a izquierda. Este valor es 0 si el dispositivo está a nivel del eje X, y se aproxima a 1 si el dispositivo se inclina hacia la izquierda, y -1 si el dispositivo se inclina hacia la derecha.

+

El eje Y representa la cantidad de inclinación de adelante hacia atrás. El valor es 0 si el dispositivo está a nivel del eje Y, y se aproxima a 1 a medida que inclinas el dispositivo hacia atrás (lejos de ti) y -1 si inclinas el dispositivo hacia el frente (hacia ti).

+

El eje Z representa la aceleración vertical. El valor es 1 cuando el dispositivo está pasando por la gravedad terrestre estándar (9.8m/sec 2), pero no en movimiento. Al mover el dispositivo hacia arriba hace que el valor descienda. El valor es 0 si el dispositivo está en caída libre (ingrávido o precipitándose como consecuencia de una caída).

+

En ingravidez, todos los valores será igual a cero cuando el dispositivo no se mueva, independientemente de su orientación, y sólo cambiará cuando se acelere.

Consulta también

+ +

{{ languages ( { "en": "en/Detecting_device_orientation" } ) }}

diff --git a/files/es/dhtml/index.html b/files/es/dhtml/index.html new file mode 100644 index 0000000000..ee735a29bc --- /dev/null +++ b/files/es/dhtml/index.html @@ -0,0 +1,47 @@ +--- +title: DHTML +slug: DHTML +tags: + - DHTML + - Todas_las_Categorías +translation_of: Glossary/DHTML +--- +

+

+
DHTML es la abreviatura de "HTML dinámico".El término DHTML se usa generalmente para referirse al código del que están hechas las páginas web interactivas que no requieren la utilización de plugins tales como Flash o Java.El término abarca las funcionalidades disponibles para los desarrolladores web que utilizan las tecnologías HTML, CSS, Document Object Model, y JavaScript de forma combinada. +
+ + + + +
+

Documentación

+
Referencia de Objetos Clientes DOM +
Esta referencia de objetos clientes proporciona información sobre los objetos usados comúnmente en DHTML, y su intención es ayudar a determinar que propiedades están soportadas en cada navegador. +
+
DHTML Demostraciones del uso de DOM/Style +
Demostraciones de Modelo de Objetos del Documento(DOM) , Cross-browser widgets, y recursos adicionales para aprender sobre DOM. +
+
Solución a errores DHTML en Firefox 1.0.3 +
Tenga en cuenta que los problemas tratados en este artículo se han solucionado en la versión 1.0.4 de Firefox, y este documento solo es de aplicación a las versiones 1.0.3 del navegador. +
+

+

View All... +

+		 +

Comunidad

+
  • Ver foros en Mozilla ... +
+

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }} +

+

Herramientas

+ +

Temas Relacionados

+
AJAX, CSS, DOM, HTML, JavaScript +
+
+

Categories +

Interwiki Language Links +


+

{{ languages( { "en": "en/DHTML", "fr": "fr/DHTML", "ja": "ja/DHTML", "ko": "ko/DHTML", "pl": "pl/DHTML", "pt": "pt/DHTML" } ) }} diff --git a/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html b/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html new file mode 100644 index 0000000000..9ceaa0803d --- /dev/null +++ b/files/es/dhtml_demostraciones_del_uso_de_dom_style/index.html @@ -0,0 +1,49 @@ +--- +title: DHTML Demostraciones del uso de DOM/Style +slug: DHTML_Demostraciones_del_uso_de_DOM_Style +tags: + - CSS + - DHTML + - DOM + - JavaScript + - Todas_las_Categorías +--- +

+

Proyecto de ejemplos DOM Mozilla +

Esta página contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para eventos DOM, DOM Core, DOM HTML y mucho más. +

Animación y manipulación de elementos de texto +

+ +

Animación 3D en tiempo real +

Esta demostración muestra cómo usar JavaScript y DOM para animar un conjunto de imágenes para crear un efecto de animación 3D. +

+

Demostraciones DOM (Requiere navegador que interprete DOM 1 y 2)

+

Estilo DOM: Recortar y posicionar elementos con la interfaz JavaScript DOM +

Esta demostración está optimizada para funcionar con Mozilla porque usa imágenes PNG con canal alpha. Demuestra el uso de interfaces DOM para establecer el valor de las propiedades de posición y recorte de los elementos DIV. +

Eventos DOM 1 y DOM 2: Arrastrar y redimensionar un elemento usando DOM +

Esta muestra requiere un navegador compatible con eventos DOM 1 y DOM 2. Ha sido probado con Netscape 7.x/Mozilla. +

DOM 1 y DOM 2: Manipulando dinámicamente una tabla de elementos +

Esta demo requiere un navegador que soporte la especificación DOM 1 y DOM 2, como Netscape 7.x o Mozilla. Usa los eventos DOM 2 del ratón para proporcionar un interfaz que puede manipular dinámicamente los elementos de la tabla. +

+

Controles multiplataforma

+

Windowing API: La ventana DHTML de BrainJar +

BrainJar's DHTML Windows es un control (widget) que muestra cómo añadir ventanas DHTML dinámicas en una aplicación DHTML. +

Stock Ticker +

Stock Ticker proporciona un objeto reutilizable que puede adaptarse para monitorizar (mediante una línea en movimiento) valores financieros en cualquier navegador que soporte el estándar DOM. +
+

+

Recursos adicionales para aprender DOM

+

Cruzando una tabla HTML con JavaScript e Interfaces DOM +

Una visión general sobre los métodos DOM de nivel 1 y de cómo usarlos mediante JavaScript. Estas notas técnicas cubren los métodos del núcleo, que son los que permiten la creación y manipulación dinámica de los elementos de marcado mediante JavaScript. +

DOM Central +

Aprenda más acerca de W3C DOM. +

Visita GetElementById.com +

GetElementById.com contiene scripts DHTML y tutoriales que emplean W3C DOM. Descubre la demo Zoom Intro y otras magníficas demostraciones y scripts DOM. +

La categoría W3C DOM en DMOZ.ORG +

Esta categoría contiene notas técnicas, tutoriales y otros muchos recursos relacionados con JavaScript y W3C DOM. +

{{ languages( { "en": "en/DHTML", "fr": "fr/DHTML", "ja": "ja/DHTML", "ko": "ko/DHTML", "pl": "pl/DHTML", "pt": "pt/DHTML" } ) }} diff --git "a/files/es/dibujando_gr\303\241ficos_con_canvas/index.html" "b/files/es/dibujando_gr\303\241ficos_con_canvas/index.html" new file mode 100644 index 0000000000..e7dbd60c0e --- /dev/null +++ "b/files/es/dibujando_gr\303\241ficos_con_canvas/index.html" @@ -0,0 +1,5 @@ +--- +title: Dibujando Gráficos con Canvas +slug: Dibujando_Gráficos_con_Canvas +--- +

v

diff --git a/files/es/dibujar_texto_usando_canvas/index.html b/files/es/dibujar_texto_usando_canvas/index.html new file mode 100644 index 0000000000..10a5970824 --- /dev/null +++ b/files/es/dibujar_texto_usando_canvas/index.html @@ -0,0 +1,67 @@ +--- +title: Dibujar texto usando canvas +slug: Dibujar_texto_usando_canvas +tags: + - 'HTML:Canvas' +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +

{{ Gecko_minversion_header(1.9) }} +{{ Fx_minversion_header(3) }} +El elemento <canvas> permite dibujar texto en él a través de una API experimental de Mozilla. +

+

API

+
attribute DOMString mozTextStyle;
+void mozDrawText(in DOMString textToDraw);
+float mozMeasureText(in DOMString textToMeasure);
+void mozPathText(in DOMString textToPath);
+void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
+
+

Notas

+ +

Demostraciones

+

Mira algunos ejemplos aquí, aquí, y aquí. +

+

Cambiar el tipo de letra actual

+

El atributo mozTextStyle contiene el estilo de texto actual. Usa la misma sintaxis que el especificado para las tipografías CSS. +

Ej: +

+
ctx.mozTextStyle = "20pt Arial"
+
+

Dibujar texto

+

Dibujar es muy sencillo. mozDrawText usa el estilo de texto actual, cualquiera que sea éste. Se usa el color de relleno del contexto como color del texto. +

+
ctx.translate(10, 50);
+ctx.fillStyle = "Red";
+ctx.mozDrawText("Sample String");
+
+

Medir texto

+

A veces es útil saber qué tan ancho es un trozo de texto en particular (para centrarlo en una ventana, por ejemplo). +

+
var text = "Sample String";
+var width = ctx.canvas.width;
+var len = ctx.mozMeasureText(text);
+ctx.translate(len/2, 0);
+ctx.mozDrawText(text);
+
+

Interacción texto/trazo

+

Si quieres tachar un texto, mozDrawText no te lo permite. En cambio, mozPathText agrega el tachado de texto al trazo actual. +

+
ctx.fillStyle = "green";
+ctx.strokeStyle = "black";
+ctx.mozPathText("Sample String");
+ctx.fill()
+ctx.stroke()
+
+

Supongamos ahora que quieres agregar un texto que se acomode a un trazo que dibujaste (una línea curva o algo parecido) es donde aparece mozTextAlongPath. Al contrario de otras funciones de texto, mozTextAlongPath necesita dos argumentos: el texto y qué se quiere hacer con él. mozTextAlongPath aproxima el trazo actual como una serie de segmentos de línea y ubica cada carácter encima de ese trazo. Los caracteres no son cambiados de tamaño o transformados de acuerdo a la curvatura de la base; toman la orientación del trazo a la mitad del carácter. +

Una vez que mozTextAlongPath sabe dónde está el carácter, busca el segundo parámetro para decidir qué hacer con él. Si el segundo parámetro es false, entonces dibuja el carácter como lo haría mozDrawText. Si es true, agrega el carácter al trazo actual, como lo hace mozPathText. Esto puede usarse para crear efectos únicos. +


+


+

+
+
+{{ languages( { "en": "en/Drawing_text_using_a_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }} diff --git a/files/es/dom/almacenamiento/index.html b/files/es/dom/almacenamiento/index.html new file mode 100644 index 0000000000..4b1f0295a0 --- /dev/null +++ b/files/es/dom/almacenamiento/index.html @@ -0,0 +1,302 @@ +--- +title: Almacenamiento +slug: DOM/Almacenamiento +tags: + - DOM + - JavaScript + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - para_revisar +translation_of: Web/API/Web_Storage_API +--- +

{{ ApiRef() }}

+

Introducción

+

El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de características relacionadas con el almacenamiento introducidas en la especificación de aplicaciones web 1.0 y ahora detalladas por separado en su propia especificación W3C Web Storage. El almacenamiento DOM está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies. Fue introducido por primera vez en Firefox 2 y Safari 4 .

+
+ Nota: el almacenamiento DOM no es lo mismo que mozStorage (las interfaces XPCOM de Mozilla para SQLite) o la API para guardar sesiones (una utilidad de almacenamiento XPCOM usada por extensiones).
+

Descripción

+

El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método exhaustivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "sin conexión" durante largos períodos de tiempo).

+

Actualmente los navegadores basados en Mozilla, Internet Explorer 8+ y Safari 4 y Chrome proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, las versiones anteriores a Internet Explorer 8 poseen una característica similar llamada "userData behavior" que permite conservar datos entre múltiples sesiones.

+

El almacenamiento DOM es útil ya que ningún navegador dispone de buenos métodos para conservar cantidades razonables de datos durante un periodo de tiempo. Las cookies de los navegadores tienen una capacidad limitada y no implementan una forma de organizar datos persistentes y otros métodos (tales como almacenamiento local de Flash) necesitan un plugin externo.

+

Una de las primeras aplicaciones hechas públicas que hace uso de la nueva funcionalidad de almacenamiento DOM (además del userData Behavior de Internet Explorer) fue halfnote (una aplicación para tomar notas) escrita por Aaron Boodman. En su aplicación, Aaron enviaba notas hacia el servidor (cuando la conexión a Internet estaba disponible) y simultáneamente las guardaba en local. Esto permitía al usuario escribir notas de modo seguro incluso cuando no disponía de conexión a Internet.

+

Aunque el concepto e implementación presentada en halfnote era en comparación simple, su creación mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.

+

Referencia

+

Los siguientes objetos globales existen como propiedades de cada objeto window. Esto significa que se puede acceder a ellas como sessionStorage o window.sessionStorage (esto es importante ya que se puede usar IFrames para almacenar o acceder a datos adicionales, más allá de lo que está inmediatamente incluido en la página).

+

Storage

+

Este es un constructor ( Storage ) para todos los objetos de almacenamiento ( sessionStorage y globalStorage[location.hostname]). Al hacer Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) } podrías usar luego como atajo a la función removeItem("key") la forma localStorage.removeKey and sessionStorage.removeKey.

+

Los elementos globalStorage no son de tipo Storage , sino StorageObsolete .

+

Storage se define por la interfaz de almacenamiento WhatWG de la siguiente forma:

+
interface Storage {
+  readonly attribute unsigned long length;
+  [IndexGetter]key DOMString (in unsigned long index);
+  [NameGetter] DOMString GetItem (in DOMString key);
+  [NameSetter] void setItem (in DOMString key, in DOMString data);
+  [NameDeleter] void removeItem (in DOMString key);
+  void clear();
+};
+
+

 

+
+ Nota: aunque los valores pueden establecerse y leerse a través del método de acceso de la propiedad de JavaScript estándar, se recomienda el uso de los métodos getItem y setItem.
+
+ Nota: ten en cuenta que todo lo que guardes en cualquiera de los almacenamientos (storages) descritos en esta página se convierte en una cadena a través de su método .toString almacenado anteriormente, por lo que al intentar almacenar un objeto común, se almacenará una cadena "[object Object]" en lugar del objeto o su representación JSON. Usar los métodos de serialización y análisis de JSON nativos que proporciona el navegador es una buena forma bastante común de almacenar objetos en formato cadena.
+

sessionStorage

+

Este es un objeto global (sessionStorage) que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.

+
// Guardar datos en el almacén de la sesión actual
+sessionStorage.setItem("username", "John");
+
+// Acceder a algunos datos guardados
+alert( "username = " + sessionStorage.getItem("username"));
+
+

El objeto sessionStorage es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.

+

{{ fx_minversion_note("3.5", "Antes de Firefox 3.5, los datos de sessionStorage no se restablecían automáticamente después de recuperarse de un fallo del navegador. A partir de Firefox 3.5, funciona según la especificación.") }}

+

Ejemplos:

+

Autoguardado de los contenidos de un campo de texto y, si el navegador se recarga accidentalmente, restauración del contenido del campo de texto para evitar la pérdida de datos.

+
 // Obtener el campo de texto al que vamos a seguir la pista
+ var field = document.getElementById("field");
+
+ // Ver si se tiene un valor de autoguardado
+ // (esto sólo sucede si la página es actualizada accidentalmente)
+ if ( sessionStorage.getItem("autosave")) {
+    // Restaurar los contenidos del campo de texto
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // Comprobar los contenidos del campo de texto cada segundo
+ setInterval(function(){
+    // Y guardar los resultados en el objeto de almacenamiento de sesión
+    sessionStorage.setItem("autosave", field.value);
+ }, 1000);
+
+

Más información:

+ +

globalStorage

+

 

+

{{ Non-standard_header() }} Este es un objeto global ( globalStorage ) que mantiene múltiples áreas de almacenamiento privado que se pueden utilizar para almacenar los datos durante un largo período de tiempo (por ejemplo, en varias páginas y las sesiones del navegador) .

+
+ Nota: globalStorage no es de tipo Storage, sino un objeto de tipo StorageList que contiene a su vez elementos StorageObsolete.
+
// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
+globalStorage['mozilla.org'].setItem("snippet", "<b>Hola</b>, ¿cómo estás?");
+
+

Específicamente, el objeto globalStorage proporciona acceso a un número de diferentes objetos de almacenamiento en los que los datos pueden ser guardados. Por ejemplo, si se construye una página web que usa globalStorage en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:

+ +

{{ Fx_minversion_note(3, "Firefox 2 permitía el acceso a objetos de almacenamiento superiores en la jerarquía del dominio al documento actual, pero esto ya no se permite en Firefox 3 por razones de seguridad. Además, se ha eliminado esta adición propuesta a HTML 5 de la especificación en favor de localStorage, que se implementa a partir de Firefox 3.5.") }}

+

Ejemplos:

+

Todos estos ejemplos necesitan que haya un script insertado (con el siguiente código) en cada página en la que se quiera ver el resultado.

+

Recordar el nombre un usuario para un subdominio en particular que está siendo visitado:

+
 globalStorage['developer.mozilla.org'].setItem("username", "John");
+
+

Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio:

+
 // parseInt must be used since all data is stored as a string
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+
+

 

+

localStorage

+

localStorage es lo mismo que globalStorage[location.hostname], excepto que está dentro del ámbito de un origen HTML5 (esquema + nombre de servidor + puerto no estándar), y que localStorage es un elemento de tipo Storage a diferencia de globalStorage[location.hostname], que es de tipo StorageObsolete . Por ejemplo, http://example.com no es capaz de acceder al mismo objeto localStorage que https://example.com pero pueden acceder al mismo objeto globalStorage. localStorage es una interfaz estándar, mientras que globalStorage no es estándar. localStorage fue introducida en Firefox 3.5.

+

Ten en cuenta que establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage y extender Storage.prototype no afecta a los elementos globalStorage. Esto sólo se hace extendiendo StorageObsolete.prototype.

+
+ Nota: cuando el navegador entra en modo de navegación privada, se crea una nueva base de datos temporal para almacenar los datos locales de almacenamiento; esta base de datos se vacía cuando se sale del modo de navegación privada.
+
+
Compatibilidad
+

Los objetos Storage se han agregado recientemente al estándar, por lo que puede ocurrir que no estén presentes en todos los navegadores. Puedes solucionar esto insertando uno de los siguientes códigos al principio de tus scripts, lo que permitirá el uso del objeto localStorage object en aquellas implementaciones que de forma nativa no lo admitan.

+

Este algoritmo es una imitación exacta del objeto localStorage, pero haciendo uso de cookies.

+ 
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; 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; }
+        var sExpDate = new Date();
+        sExpDate.setDate(sExpDate.getDate() - 1);
+        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; 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 iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId < aCouples.length; iCouplId++) {
+        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
+        if (iCouple.length > 1) {
+          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+
+ Nota: el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones localStorage.setItem() y localStorage.removeItem() para agregar, cambiar o eliminar una clave. Usar los métodos localStorage.tuClave = tuValor; y delete localStorage.tuClave; para establecer o eliminar una clave no es muy seguro con este código. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.
+

Aquí tienes otra imitación, menos exacta, del objeto localStorage. Es mucho más simple  que el anterior, pero es compatible con los navegadores antiguos como Internet Explorer < 8. También usa cookies.

+ 
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      var sExpDate = new Date();
+      sExpDate.setDate(sExpDate.getDate() - 1);
+      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+
+ Nota: el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones localStorage.getItem(), localStorage.setItem() y localStorage.removeItem() para agregar, cambiar o eliminar una clave. Usar los métodos localStorage.tuClave para obtener, establecer o eliminar una clave no es muy seguro con este código. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.
+

Lugar de almacenamiento y borrado de datos

+

Los datos de almacenamiento DOM se guardan en el archivo webappsstore.sqlite de la carpeta del perfil.

+ +

Consulta también borrar la caché de recursos en modo sin conexión .

+
+

Más información

+ +

Ejemplos

+ +

Compatibilidad de los navegadores

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
globalStorage{{ CompatNo() }}2{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

Todos los navegadores tienen diferentes niveles de capacidad tanto para local- como para sessionStorage. Aquí puedes ver un resumen detallado de todas las capacidades de almacenamiento de los distintos navegadores.

+

Contenido relacionado

+ +

{{ HTML5ArticleTOC () }}

+

 

+

 

+

{{ languages( { "en": "en/DOM/Storage", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

diff --git a/files/es/dom/document.cookie/index.html b/files/es/dom/document.cookie/index.html new file mode 100644 index 0000000000..791ae788f2 --- /dev/null +++ b/files/es/dom/document.cookie/index.html @@ -0,0 +1,119 @@ +--- +title: document.cookie +slug: DOM/document.cookie +tags: + - NeedsContent +translation_of: Web/API/Document/cookie +--- +

{{ApiRef("DOM")}}

+ +

Resumen

+ +

Con document.cookie se obtienen y definen las cookies asociadas con el documento.

+ +

Sintaxis

+ +

Leer todas las cookies accesibles desde una localización

+ +
todasLasCookies = document.cookie;
+
+ +

En el código anterior todasLasCookies es una cadena que contiene una lista de todas las cookies separadas por punto y coma (en pares clave=valor). Tenga en cuenta que clave y valor pueden estar rodeadas por espacios en blanco (caracteres espacio y tabulación): de hecho RFC 6265 especifica que debe haber un espacio en blanco después de cada punto y coma (;), pero algunos agentes de usuario no son muy estrictos con esto.

+ + + +
document.cookie = nuevaCookie;
+ +

En el código anterior, nuevacookie es una cadena de la forma clave=valor. Tenga en cuenta que solo se puede crear o actualizar una cookie de cada vez mediante este método. Considere también que:

+ + + +
{{ gecko_callout_heading("6.0") }}
+ +
Nótese que previamente a Gecko 6.0 {{ geckoRelease("6.0") }}, rutas que contenían comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.
+ +

Ejemplos

+ +

Ejemplo # 1: Uso sencillo

+ +
document.cookie = "nombre=oeschger";
+document.cookie = "comida_preferida=tripa";
+function alertCookie() {
+  alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa
+
+}
+ +
<button onclick="alertCookie()">Mostrar cookies</button>
+ +

{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}

+ + + +
document.cookie = "test1=Hola";
+document.cookie = "test2=Mundo";
+
+var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+function alertCookieValue() {
+  alert(cookieValor);
+}
+
+ +
<button onclick="alertCookieValue()">Mostrar valor de cookie</button>
+ +

{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}

+ +

Ejemplo #3: Hacer algo una sola vez

+ +

De manera a usar el siguiente código, favor remplace todas las veces la palabra hacerAlgoUnaSolaVez (el nombre de la cookie) con un nombre personalizado.

+ +
function hazUnaVez() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)hacerAlgoUnaSolaVez\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Hacer algo aquí!");
+    document.cookie = "hacerAlgoUnaSolaVez=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}
+ +
<button onclick="dhacerUnaVez()">Solo hacer algo una vez</button>
+ +

{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}

+ +

Seguridad

+ +

Es importante mencionar que la restricción path no protege contra la lectura no autorizada de cookies de una ruta distinta. Puede ser fácilmente resuelto mediante DOM (por ejemplo creando un iframe oculto con la ruta de la cookie y accediendo a la propiedad contentDocument.cookie del iframe). La única manera de proteger el acceso a cookies es ocupando un dominio o subdominio diferente, debido a la política de mismo origen.

+ +

Notas

+ + + +

Especificación

+ +

DOM Level 2: HTMLDocument.cookie

diff --git a/files/es/dom/index.html b/files/es/dom/index.html new file mode 100644 index 0000000000..b1a5452a8e --- /dev/null +++ b/files/es/dom/index.html @@ -0,0 +1,86 @@ +--- +title: DOM +slug: DOM +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +--- +
+ Acerca del Modelo de Objetos del Documento
+ Un par de cosas básicas sobre DOM y Mozilla.
+
+

El Modelo de Objetos del Documento (DOM) es un API para documentos HTML y XML. Proporciona una representación estructural del documento, permitiendo la modificación de su contenido o su presentación visual. Esencialmente, comunica las páginas web con los scripts o los lenguajes de programación.

+
+

DOM es un estándar del W3C

+ + + + + + + +
+

Documentación

+
+
+ Introducción a la manipulación DOM
+
+ Introducción a los métodos de manipulación DOM mediante Javascript
+
+
+
+ Especificación del DOM Nivel 1
+
+ El objetivo de la especificación DOM es definir una interfaz programable para HTML y XML.
+
+
+
+ Uso del núcleo del nivel 1 del DOM
+
+ Es un potente modelo de objetos para modificar el árbol de contenidos de los documentos.
+
+
+
+ Los niveles del DOM
+
+ Una descripción de los niveles del DOM y el soporte ofrecido por Mozilla a cada uno de ellos.
+
+
+
+ DHTML Demostraciones del uso de DOM/Style
+
+ Contiene una lista de ejemplos DOM basados en sus diversas características. La lista incluye demostraciones para Eventos DOM, DOM Core, DOM HTML y mucho mas.
+
+
+
+ The Document Object Model in Mozilla.org (en)
+
+ Una versión más antigua acerca de DOM se encuentra en mozilla.org.
+
+

enlaces a ninguna parte: ; DOM y JavaScript: <small>"¿Qué está haciendo que? ¿En un script embebido en mi página web, el cual usa DOM y Javascript?"</small>  ; Modificando dinámicamente las interfaces de usuario en XUL: <small>Fundamentos de manipulación con XUL UI y métodos DOM.</small>  ; Espacios en blanco en el DOM: <small>Una solución al problema de ignorar los espacios en blanco cuando se interactúa con el DOM.</small>  ; Tablas HTML con JavaScript e interfaces DOM: <small>Una descripción de algunos métodos de gran alcance, fundamentales para el nivel 1 en el uso de DOM y de cómo utilizarlo con Javascript .</small> fin de enlaces a ninguna parte Ver todos

+ 		+

Comunidad

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

{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}

+

Ver todos

+

Herramientas

+ +

Ver todos

+

Temas relacionados

+
+
+ • AJAX • CSS • XML • JavaScript •
+
+

 

+
+

fin de tabla

+

Categorías

+

Interwiki Language Links

+

{{ languages( { "de": "de/DOM", "en": "en/DOM", "fr": "fr/DOM", "hu": "hu/DOM", "ja": "ja/DOM", "ko": "ko/DOM", "nl": "nl/DOM", "pl": "pl/DOM", "pt": "pt/DOM", "ru": "ru/DOM", "zh-cn": "cn/DOM", "zh-tw": "zh_tw/DOM" } ) }} 

diff --git a/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html b/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html new file mode 100644 index 0000000000..1971f1348f --- /dev/null +++ b/files/es/dom/manipulando_el_historial_del_navegador/ejemplo/index.html @@ -0,0 +1,415 @@ +--- +title: Ejemplo de Navegación usando Ajax +slug: DOM/Manipulando_el_historial_del_navegador/Ejemplo +translation_of: Web/API/History_API/Example +--- +

This is an example of an AJAX web site composed only of three pages (first_page.php, second_page.php and third_page.php). To see how it works, please, create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

+ +
Note: For fully integrating the {{HTMLElement("form")}} elements within this mechanism, please take a look at the paragraph Submitting forms and uploading files.
+ +

first_page.php:

+ +
+
<?php
+    $page_title = "First page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>first_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

second_page.php:

+ +
+
<?php
+    $page_title = "Second page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>second_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

third_page.php:

+ +
+
<?php
+    $page_title = "Third page";
+    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
+
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

css/style.css:

+ +
#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader > div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+
+ +

include/after_content.php:

+ +
<p>This is the footer. It is shared between all ajax pages.</p>
+
+ +

include/before_content.php:

+ +
<p>
+[ <a class="ajax-nav" href="first_page.php">First example</a>
+| <a class="ajax-nav" href="second_page.php">Second example</a>
+| <a class="ajax-nav" href="third_page.php">Third example</a>
+| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
+</p>
+
+
+ +

include/header.php:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+
+ +

js/ajax_nav.js:

+ +

(before implementing it in a working environment, please read the note about the const statement compatibility)

+ +
+
"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+
+
+ +
Note: The current implementation of const (constant statement) is not part of ECMAScript 5. It is supported in Firefox & Chrome (V8) and partially supported in Opera 9+ and Safari. It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10. const is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the let statement, constants declared with const will be block-scoped. We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the const statements with the var statements.
+ +

For more information, please see: Manipulating the browser history.

+ +

See also

+ + diff --git a/files/es/dom/manipulando_el_historial_del_navegador/index.html b/files/es/dom/manipulando_el_historial_del_navegador/index.html new file mode 100644 index 0000000000..eb2c0b3fdd --- /dev/null +++ b/files/es/dom/manipulando_el_historial_del_navegador/index.html @@ -0,0 +1,228 @@ +--- +title: Manipulando el historial del navegador +slug: DOM/Manipulando_el_historial_del_navegador +tags: + - HTML5 + - historial + - para_revisar +translation_of: Web/API/History_API +--- +

El objeto DOM {{ domxref("window") }} proporciona acceso al historial del navegador a través del objeto {{ domxref("window.history", "history") }} . Este da acceso a métodos y propiedades útiles que permiten avanzar y retroceder a través del historial del usuario, así como --a partir de HTML5-- manipular el contenido del historial.

+ +

Viajando a través del historial

+ +

Retroceder y avanzar a través del historial del usuario utilizando los métodos back(), forward() y go().

+ +

Moviéndose hacia adelante y hacia atrás

+ +

Para moverte hacia atrás, solo debes hacer:

+ +
window.history.back();
+
+ +

Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.

+ +

De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:

+ +
window.history.forward();
+
+ +

Moverse a un punto específico del historial

+ +

Puedes usar el método go() para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual  (Siendo la página actual, por supuesto, relativa al índice 0).

+ +

Para moverse atrás una página (equivalente a llamar back()):

+ +
window.history.go(-1);
+
+ +

Para moverse una página hacia adelante, como si se llamara a forward():

+ +
window.history.go(1);
+
+ +

De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.

+ +

Otro uso para go() es el de actualizar la página ya sea pasando 0 como parámetro o ninguno.

+ +
// Cada una de las siguientes
+// instrucciones actualiza la página
+window.history.go(0);
+window.history.go();
+ +

Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad length:

+ +
var numeroDeEntradas = window.history.length;
+
+ +
Nota: Internet Explorer admite el paso de cadenas de URL como parámetro para go(); esto no es estándar y no está implementado en Gecko.
+ +

Añadiendo y modificando entradas del historial

+ +

{{ gecko_minversion_header("2") }}

+ +

HTML5 introduce los métodos history.pushState() y history.replaceState(), los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.

+ +

Hacer uso de history.pushState() cambia el referer que es utilizado en la cabecera HTTP por los objetos XMLHttpRequest que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea this al momento de la creación del objeto XMLHttpRequest.

+ +

Ejemplo

+ +

Supongamos que http://mozilla.org/foo.html ejecuta el siguiente JavaScript:

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+
+ +

Esto causará que la barra de URL muestre http://mozilla.org/bar.html, pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.

+ +

Supongamos ahora que el usuario navega hacia http://google.com, y despúes hace clic en Atrás.  En este punto, la barra de URL mostrará http://mozilla.org/bar.html, y la página tendrá un evento popstate cuyo state object contiene una copia de stateObj. La página en si se verá como foo.html, aunque la página podria modificar su contenido durante el evento popstate event.

+ +

Si hacemos clic en "atrás" nuevamente, la URL cambiará a http://mozilla.org/foo.html, y el documento generará otro evento popstate event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento popstate.

+ +

El método pushState()

+ +

pushState() toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL.  Vamos a examinar cada uno de estos tres parametros en más detalle:

+ + + +

En un sentido, llamar pushState() es similar a asignar window.location = "#foo", en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual. Pero pushState() tiene las siguientes ventajas:

+ + + +

Hay que tener en cuenta que pushState() nunca dispara un evento hashchange, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.

+ +

En un documento XUL, crea el elemento XUL específico.

+ +

En otros documentos, crea un elemento con un namespace de URI nulo (null).

+ +

El método replaceState()

+ +

history.replaceState() trabaja exactamente igual a history.pushState() excepto que replaceState() modifica la entrada al historial actual en lugar de crear una nueva.

+ +

replaceState() es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.

+ +

El evento popstate

+ +

Un evento popstate es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fue creada por un llamado a pushState o afectada por una llamada a replaceState, la propiedad state del evento popstate contiene una copia del historial de entradas del objeto estado.

+ +

Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.

+ +

Leyendo el estado actual

+ +

Cuando la página carga, debería tener un objeto de estado no nulo. Esto podría ocurrir, por ejemplo, si la página establece un object de estado (usando pushState() o replaceState()) y entonces el usuario reinicia su navegador. Cuando la página carga de nuevo, la página recibirá el evento onload, pero no el evento popstate.  Sin embargo, si lees la propiedad history.state, obtendrás el objeto estado que habrías tenido si se hubiera lanzado el evento apopstate.

+ +

Puedes leer el estado del historial actual sin tener que esperar un evento popstate usando la propiedad  history.state de esta manera:

+ +
var currentState = history.state;
+ +

Ejemplos

+ +

Para un ejemplo completo de un sitio AJAX, ver: Ejemplo de navegación AJAX.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstado Comentario
{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}{{Spec2('HTML WHATWG')}}No hay cambios desde {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}{{Spec2('HTML5 W3C')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{ CompatGeckoDesktop("2.0") }}1011.506.0
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+ +

Ver también

+ + diff --git a/files/es/dom/touch_events/index.html b/files/es/dom/touch_events/index.html new file mode 100644 index 0000000000..02a4a4eacb --- /dev/null +++ b/files/es/dom/touch_events/index.html @@ -0,0 +1,292 @@ +--- +title: Eventos de toque +slug: DOM/Touch_events +tags: + - DOM + - Event + - Mobile + - NeedsMobileBrowserCompatTable + - eventos +translation_of: Web/API/Touch_events +--- +

Con el fin de proporcionar soporte de calidad para usuarios de interfaces táctiles, los eventos táctiles dan la posibilidad de interpretar la actividad de los dedos en pantallas táctiles o trackpads.

+ +

Definiciones

+ +
+
Superficie
+
La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.
+
+ +
+
Punto de toque
+
Un punto de contacto con la superficie. Esto podría ser un dedo (o un codo, oreja, nariz, o lo que sea, pero probablemente un dedo) o un stylus.
+
+ +

Interfaces

+ +
+
{{ domxref("TouchEvent") }}
+
Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.
+
{{ domxref("Touch") }}
+
Represeta un único punto de contacto entre el usuario y la superficie táctil.
+
{{ domxref("TouchList") }}
+
Representa varios puntos de toque: esto se utiliza cuando el usuario tiene, por ejemplo, varios dedos en la superficie al mismo tiempo.
+
{{ domxref("DocumentTouch") }}
+
Contiene varios métodos para crear objetos de {{domxref("Touch")}} y {{domxref("TouchList")}}.
+
+ +

Ejemplo

+ +

Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporte eventos táctiles.

+ +
Nota: El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría ser, por supuesto, también un stylus u otro método de contacto.
+ +

Configurando los eventos de manipulación

+ +

Cuando la página carga, la función startup() mostrada a continuación es llamada por nuestro atributo onload del elemento {{ HTMLElement("body") }}.

+ +
function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+
+ +

Esto simplemente configura todos los detectores de eventos para nuestro elemento {{ HTMLElement("canvas") }}, por lo que podremos manejar todos los eventos de toque cuando se produzcan.

+ +

Seguimiento de nuevos toques

+ +

Cuando un evento touchstart ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función handleStart() de a continuación es llamada.

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i<touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+
+ +

Esto llama a {{ domxref("event.preventDefault()") }} para mantener al navegador procesando el evento de toque (esto también previene que un evento del ratón o mouse sea entregado). Entonces obtenemos el contexto y lanzamos la lista de puntos de contacto cambiados de la propiedad {{ domxref("TouchEvent.changedTouches") }} del evento.

+ +

Después de ello, iteramos sobre todos los objetos {{ domxref("Touch") }} de la lista, insertándolo en una matriz de puntos de toque activos y dibujando el punto de inicio como un pequeño rectángulo; estamos usando una línea de 4 pixeles de ancho, por tanto estamos dibujando un cuadrado de 4 por 4 píxeles como punto de consistencia.

+ +

Dibujando mientras los eventos de toque se mueven

+ +

Cada vez que uno o más dedos se mueven, un evento touchmove es entregado, resultando en una llamada a nuestra función handleMove(). Su responsabilidad en este ejemplo es actualizar la información de toque cacheada y dibujar una línea desde la posición previa a la posición actual en cada toque.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i<touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
+  }
+}
+
+ +

Esto se repite también en los toques cambiados, pero mira en nuestra matriz de información de toques cacheados la información previa de cada toque con el fin de determinar los puntos de inicio para cada nuevo segmento de línea de toques que será dibujada. Esto se hace mirando cada propiedad de los toques de {{ domxref("Touch.identifier") }} . Esta propiedad es un único entero para cada toque, y sigue siendo consistente para cada evento durante la duración del contacto de cada dedo con la superficie.

+ +

Esto nos permite conseguir las coordenadas de la posición previa de cada toque y usar el método apropiado de contexto para dibujar un segmento de línea uniendo dos posiciones a la vez.

+ +

Después de dibujar la línea, llamamos a  Array.splice() para reemplazar la información previa sobre el punto de toque con la información actual de la matriz ongoingTouches.

+ +

Manejando el final de un toque

+ +

Cuando el usuario levanta un dedo de la superficie, un evento touchend es enviado.  De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento touchleave. Manejamos ambos casos de la misma manera: llamando a la función handleEnd() de abajo. Su trabajo es dibujar el último segmento de línea para cada toque que ha finalizado y remueve el punto de toque de la lista de toques en marcha.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i<touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+
+ +

Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a  Array.splice(), simplemente remueve la antigua entrada de la lista de toques en marcha, sin añadir la información actualizada. El resultado es que detenemos el seguimiento del punto de toque.

+ +

Manejando los toques cancelados

+ +

Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento touchcancel es enviado, y llamamos a la función handleCancel() abajo.

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i<touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+
+ +

Dado que la idea es cancelar el toque inmediatamente, simplemente lo removemos de la lista de toques en marcha sin dibujar un segmento de línea final.

+ +

Funciones de conveniencia

+ +

Este ejemplo usa dos funciones de convenience que deben mirarse brevemente para ayudar a que el resto del código sea más claro.

+ +

Seleccionando un color para cada toque

+ +

Con el fin de hacer que cada dibujo de toque se vea diferente, la función  colorForTouch() es usada para elegir un color basado en el identificador único de toque. Este identificador estará siempre entre 0 y un valor menos que el número de toques activos. Puesto que es muy improbable que alguna persona con más de 16 dedos use este demo, convertimos estos directamente en colores de escalas grises.

+ +
function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // make it a hex digit
+  return "#" + id + id + id;
+}
+
+ +

El resultado de esta función es un string o cadena que puede ser usada cuando se llame a funciones {{ HTMLElement("canvas") }} para configurar los colores de dibujos. Por ejemplo, para un valor {{ domxref("Touch.identifier") }}  de 10, el resultado string o cadena es "#aaa".

+ +

Encontrando un toque continuo

+ +

La función ongoingTouchIndexById() abajo explora mediante la matriz ongoingTouches para encontrar el toque que coincida con el identificador dado, luego devuelve los índices de toques a la matriz.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i<ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+
+ +

Ver ejemplo en vivo

+ +

Consejos adicionales

+ +

Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.

+ +

Manejando los clics

+ +

Ya que la llamada preventDefault() en un touchstart o el primer evento touchmove de una serie impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a preventDefault() en touchmove en lugar de touchstart. De esta manera, los eventos del ratón pueden todavía ser disparados y cosas como enlaces siguen funcionando. Alternativamente, algunos frameworks tienen que referirse a eventos de toque como eventos de ratón para este mismo propósito. (Este ejemplo es muy simplificado y podria resultar en un extraño comportamiento. Solo se diseñó como guía).

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.initMouseEvent(type, true, true, event.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Llamando a preventDefault() solo en un segundo toque

+ +

Una cosa para prevenir cosas como pinchZoom en una página es llamar a preventDefault() en el segundo toque de una serie. Este comportamiento no está bien definido en los eventos de toque, y resulta en diferentes comportamientos en diferentes navegadores (osea iOS evitará el zoom o acercamiento pero permitirá vista panorámica con ambos dedos. Android permitirá zoom o acercamiento pero no una panorámica. Opera and Firefox actualmente evita panorámica y zoom o acercamiento). Actualmente, no se recomienda depender de ningún comportamiento en particular en este caso, si no mas bien depender de una meta vista para evitar el zoom.

+ +
+
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatChrome("22.0") }}{{ CompatGeckoDesktop("18.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Notas de Gecko

+ +

La preferencia dom.w3c_touch_events.enabled puede ser utilizada para activar o desactivar el soporte de eventos de toque estándares; por defecto, están activados.

+ +
+

{{ gecko_callout_heading("12.0") }}

+ +

Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko no soportaba multi-toques; solo un toque cada vez era reportado.

+
+ +
Note: Antes de Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko ofrecía una API de eventos de toque propietaria. Está API está obsoleta actualmente; deberías cambiar a esta."
diff --git a/files/es/dom_inspector/index.html b/files/es/dom_inspector/index.html new file mode 100644 index 0000000000..c6217195c6 --- /dev/null +++ b/files/es/dom_inspector/index.html @@ -0,0 +1,29 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +tags: + - CSS + - 'CSS:Herramientas' + - DOM + - 'DOM:Herramientas' + - 'Extensiones:Herramientas' + - HTML + - 'HTML:Herramientas' + - JavaScript + - 'JavaScript:Herramientas' + - Temas + - 'Temas:Herramientas' + - Todas_las_Categorías + - XUL + - 'XUL:Herramientas' + - extensiones +translation_of: Tools/Add-ons/DOM_Inspector +--- +

+

El DOM Inspector (conocido como DOMi) es una herramienta de Mozilla utilizada para inspeccionar, navegar y editar el Modelo de Objetos del Documento(Document Object Model en inglés) de los documentos - normalmente páginas web o ventanas XUL . +

Para más información sobre el DOMi, consulta la página del DOM Inspector en MozillaZine. +

Categorías +

+
+
+{{ languages( { "en": "en/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "it": "it/DOM_Inspector", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }} diff --git a/files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html b/files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html new file mode 100644 index 0000000000..1225072b01 --- /dev/null +++ b/files/es/dragdrop/drag_and_drop/drag_and_drop_archivo/index.html @@ -0,0 +1,117 @@ +--- +title: Drag & Drop archivo +slug: DragDrop/Drag_and_Drop/drag_and_drop_archivo +tags: + - Guía + - arrastra y suelta + - drag and drop + - drop zone + - zona de arrastre +translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo una aplicación puede aceptar uno, o más, archivos que son arrastrados desde el explorador de archivos de la plataforma y soltados en una página web.

+ +

Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (drop zone), es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos {{event("drop")}} y {{event("dragover")}}. Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el repositorio drag-and-drop de MDN (cualquier sugerencia o  tema que revisar es bienvenido).

+ +

Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}.  Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).

+ +

Define la zona "drop" [drop zone]

+ +

Es necesario configurar un evento {{event("drop")}} en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} que recibe los datos del objeto arrastrado. El siguiente código muestra cómo se hace con un elemento {{HTMLelement("div")}}:

+ +
<div id="drop_zone" ondrop="dropHandler(event);">
+  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
+</div>
+ +

Normalmente, una aplicación incluirá una función de gestión de eventos {{event("dragover")}} en el elemento objetivo del arrastre y esa función desactivará el comportamiento de arrastre por defecto del browser. Para añadir esta función necesita incluir una función global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:

+ +
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
+  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
+</div>
+
+ +

Por último, puede que una aplicación quiera personalizar el estilo del elemento objetivo del arrastre para indicar visualmente que es una zona drag and drop. En este ejemplo, el elemento objetivo usa el siguiente estilo:

+ +
#drop_zone {
+  border: 5px solid blue;
+  width:  200px;
+  height: 100px;
+}
+
+ +
+

Fíjese que los eventos dragstart y dragend no son activados cuando se arrastra un archivo al browser desde el SO.

+
+ +

Procesar la acción de soltar [drop]

+ +

El evento {{event("drop")}} se ejecuta cuando el usuario suelta el o los archivos. En el siguiente manejador, si el navegador sorporta la interfaz {{domxref("DataTransferItemList")}} , el método {{domxref("DataTransferItem.getAsFile","getAsFile()")}} se utiliza para acceder cada fichero; de lo contrario la propiedad {{domxref("DataTransfer")}} de la interfaz {{domxref("DataTransfer.files","files")}} es usada para acceder cada archivo.

+ +

El ejemplo siguiente muestra como escribir el nombre de cada fichero arrastrado en la consola. En una aplicación real, se querrá procesar un archivo usando {{domxref("File","File API")}}.

+ +

Nótese que en este ejemplo, cualquier item arrastrado que no sea un archivo es ignorado.

+ +
function dropHandler(ev) {
+  console.log('Fichero(s) arrastrados');
+
+  // Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
+  ev.preventDefault();
+
+  if (ev.dataTransfer.items) {
+    // Usar la interfaz DataTransferItemList para acceder a el/los archivos)
+    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+      // Si los elementos arrastrados no son ficheros, rechazarlos
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        var file = ev.dataTransfer.items[i].getAsFile();
+        console.log('... file[' + i + '].name = ' + file.name);
+      }
+    }
+  } else {
+    // Usar la interfaz DataTransfer para acceder a el/los archivos
+    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+    }
+  }
+
+  // Pasar el evento a removeDragData para limpiar
+  removeDragData(ev)
+}
+ +

Prevenir el comportamiento default de arrastrado en el browser 

+ +

El siguiente evento {{event("dragover")}} llama a  {{domxref("Event.preventDefault","preventDefault()")}} para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.

+ +
function dragOverHandler(ev) {
+  console.log('File(s) in drop zone');
+
+  // Prevent default behavior (Prevent file from being opened)
+  ev.preventDefault();
+}
+
+ +

Limpieza (Cleanup)

+ +

Typically, an application may want to perform some cleanup by deleting the file drag data. In this example, the drop event is passed along from drop handler to a custom function called removeDragData. If the browser supports the {{domxref("DataTransferItemList")}} interface, the list's {{domxref("DataTransferItemList.clear","clear()")}} method is used to delete the file drag data; otherwise the {{domxref("DataTransfer")}} object's {{domxref("DataTransfer.clearData","clearData()")}} method is used to delete the data.

+ +
function removeDragData(ev) {
+  console.log('Removing drag data')
+
+  if (ev.dataTransfer.items) {
+    // Use DataTransferItemList interface to remove the drag data
+    ev.dataTransfer.items.clear();
+  } else {
+    // Use DataTransfer interface to remove the drag data
+    ev.dataTransfer.clearData();
+  }
+}
+
+ +

See also

+ + diff --git a/files/es/dragdrop/drag_and_drop/index.html b/files/es/dragdrop/drag_and_drop/index.html new file mode 100644 index 0000000000..82e069ed48 --- /dev/null +++ b/files/es/dragdrop/drag_and_drop/index.html @@ -0,0 +1,57 @@ +--- +title: Arrastrar y soltar +slug: DragDrop/Drag_and_Drop +tags: + - HTML5 + - XUL +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.

+
Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la documentación de la API anterior para Firefox 3.0 y versiones anteriores.
+ + +

Elementos básicos de arrastrar y soltar

+

Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:

+ +

Mozilla y Firefox admiten una serie de características que no se encuentran en el modelo estándar de arrastrar y soltar. Estas te permiten arrastrar elementos múltiples y arrastrar datos que no son cadenas. Para obtener más información, consulta Arrastrar y soltar múltiples elementos .

+

Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta Tipos de operaciones de arrastre recomendados.

+

Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:

+ +

Consulta DataTransfer para tener una referencia al objeto DataTransfer.

+ + +

Eventos de arrastre

+

Se utilizan una serie de eventos que se ejecutan durante las diversas etapas de la operación de arrastre y colocación. Ten en cuenta que se ejecutan sólo los eventos de arrastre, los eventos del ratón/mouse como mousemove no se ejecutan durante una operación de arrastre.

+

La propiedad dataTransfer de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.

+ + +
+
dragstart
+
Se ejecuta sobre un elemento cuando se inicia una operación de arrastre. El usuario está solicitando arrastrar el elemento al que dispara el evento dragstart. Durante este evento, un proceso de escucha ajustará cierto tipo de información como los datos de la operación de arrastre y la imagen que se asocia con ella. Para obtener más información al respecto, consulta Inicio de una operación de arrastre .
+
dragenter
+
Se dispara cuando el ratón/mouse se mueve primero sobre un elemento, mientras está teniendo lugar una operación de arrastre. Un proceso de escucha de este evento debe indicar si se permite una operación de arrastre sobre esta ubicación. Si no hay procesos de escucha o éstos no realizan ninguna operación, entonces no se permite, de manera predeterminada, una operación de arrastre. Este es también el evento al que escuchar si deseas proporcionar información acerca de que se permite una operación de arrastre, como, por ejemplo, mostrar un resaltado o un marcador de inserción. Para obtener más información al respecto, consulta Especificación de destinos de colocación .
+
dragover
+
Este evento se activa cuando el ratón/mouse se mueve sobre un elemento cuando está teniendo lugar una operación de arrastre. Gran parte del tiempo, la operación que tiene lugar durante un proceso de escucha será la misma que el evento dragenter. Para obtener más información al respecto, consulta Especificación de destinos de colocación.
+
dragleave
+
Este evento se activa cuando el ratón/mouse sale de un elemento mientras que está teniendo lugar una operación de arrastre. Los procesos de escucha deben eliminar cualquier resaltado o marcador de inserción que usan para la información sobre el proceso de arrastre.
+
drag
+
Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.
+
drop
+
El evento se dispara sobre el elemento en el que se produjo la colocación al finalizar la operación de arrastre. Un proceso de escucha se encargará de recuperar los datos que se arrastran e insertarlos en la ubicación de la colocación. Este evento sólo se activará si se desea disponer de la funcionalidad de soltar. No se activará si el usuario cancela la operación de arrastre, por ejemplo, pulsando la tecla Escape, o si se liberó el botón del ratón/mouse mientras que éste no estaba sobre un destino de colocación válido. Para más información sobre esto, consulta Realizar una operación de colocación.
+
dragend
+
El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta Finalizar una operación de arrastre si deseas más información.
+
+ + +
{{ HTML5ArticleTOC () }}
diff --git a/files/es/dragdrop/index.html b/files/es/dragdrop/index.html new file mode 100644 index 0000000000..50bf61f9e2 --- /dev/null +++ b/files/es/dragdrop/index.html @@ -0,0 +1,10 @@ +--- +title: DragDrop +slug: DragDrop +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

 

+

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

diff --git a/files/es/dragdrop/recommended_drag_types/index.html b/files/es/dragdrop/recommended_drag_types/index.html new file mode 100644 index 0000000000..daad516a44 --- /dev/null +++ b/files/es/dragdrop/recommended_drag_types/index.html @@ -0,0 +1,144 @@ +--- +title: Tipos de Drag recomendados +slug: DragDrop/Recommended_Drag_Types +translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types +--- +

A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.

+

Arrastramdo Texto

+

Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:

+
event.dataTransfer.setData("text/plain", "This is text to drag")
+
+

Arrastrar texto en cuadros de texto y las selecciones de las páginas web se realiza de forma automática, por lo que no es necesario para manejar dragging.

+

Se recomienda que siempre se agrega datos del tipo  text/plain  como un mensaje para las aplicaciones o los destinos que no soportan otros tipos, a menos que no hay alternativa de texto lógico. Siempre agregue el tipo de texto sin formato pasado, ya que es el menos específico.

+

En códigos más viejo, encontrara text/unicode o el tipo Text.Estos equivalen text/plain,que guardara y recibia los datos del texto plano en ese lugar.

+ +

Los enlaces deben incluir los datos de los dos tipos, el primero debe ser  URL utilizando el tipo text/uri-list,y el segundo es URL utilizando el tipo text/plain. Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:

+
var dt = event.dataTransfer;
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+
+

Es constumbre, establecer el tipo text/plain de ultimo, , ya que es menos específico que el tipo de URI.

+

Note que el tipo de URL uri-list es con una "i", no una "L"

+

Note that the URL type is uri-list with an 'I', not with an 'L'.

+

To drag multiple links, you can also separate each link with a linebreak. A line that begins with a number sign (#) is a comment and should not be considered a valid URL. You can use a comment to indicate the purpose of a link, or to hold the title associated with a link. The text/plain version of the drag data should include all links but should not include the comments.

+

For example:

+
http://www.mozilla.org
+#A second link
+http://www.xulplanet.com
+
+

This sample text/uri-list data contains two links and a comment.

+

When retrieving a dropped link, you should ensure you handle the case where multiple links may have been dragged, and any comments that appear in the data. For convenience, the special type URL may be used to refer to the first valid link within the data for the text/uri-list type. You should not add data using the URL type; attempting to do so will just set the value of the text/uri-list type instead.

+
var url = event.dataTransfer.getData("URL");
+
+

You may also see data using the text/x-moz-url type which is a Mozilla specific type. If it appears, it should be used before the text/uri-list type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:

+
http://www.mozilla.org
+Mozilla
+http://www.xulplanet.com
+XUL Planet
+
+

Dragging HTML and XML

+

HTML content may use the text/html type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the innerHTML property of an element.

+

XML content may use the text/xml type, but you should ensure that the data value is well-formed XML.

+

You may also include a plain text representation of the HTML or XML data using the text/plain type. The data should be just the text and should not include any of the source tags or attributes. For instance:

+
var dt = event.dataTransfer;
+dt.setData("text/html", "Hello there, <strong>stranger</strong>");
+dt.setData("text/plain", "Hello there, stranger");
+
+

Dragging Files

+

A local file is dragged using the application/x-moz-file type with a data value that is an nsIFile object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the mozSetDataAt method to assign the data. Similarly, when retrieving the data, you must use the mozGetDataAt method.

+
event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
+
+

If possible, you may also include the file URL of the file using both the text/uri-list and/or text/plain types. These types should be added last so that the more specific application/x-moz-file type has higher priority.

+

Multiple files will be received during a drop as mutliple items in the data transfer. See Dragging and Dropping Multiple Items for more details about this.

+

The following example shows how to create an area for receiving dropped files:

+
<listbox ondragenter="return checkDrag(event)"
+         ondragover="return checkDrag(event)"
+         ondrop="doDrop(event)"/>
+
+<script>
+function checkDrag(event)
+{
+  return event.dataTransfer.types.contains("application/x-moz-file");
+}
+
+function doDrop(event)
+{
+  var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
+  if (file instanceof Components.interfaces.nsIFile)
+    event.currentTarget.appendItem(file.leafName);
+}
+</script>
+
+

In this example, the event returns false only if the data transfer contains the application/x-moz-file type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the instanceof operator is used here as the mozGetDataAt method will return an nsISupports that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.

+

Dragging Images

+

Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the text/uri-list type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see the data URL scheme.

+

As with other links, the data for the text/plain type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the text/plain data in this situation.

+

In chrome or other privileged code, you may also use the image/jpeg, image/png or image/gif types, depending on the type of image. The data should be an object which implements the nsIInputStream interface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.

+

You should also include the application/x-moz-file type if the image is located on disk. In fact, this a common way in which image files are dragged.

+

It is important to set the data in the right order, from most specific to least specific. The image type such as image/jpeg should come first, followed by the application/x-moz-file type. Next, you should set the text/uri-list data and finally the text/plain data. For example:

+
var dt = event.dataTransfer;
+dt.mozSetDataAt("image/png", stream, 0);
+dt.mozSetDataAt("application/x-moz-file", file, 0);
+dt.setData("text/uri-list", imageurl);
+dt.setData("text/plain", imageurl);
+
+

Note that the mozGetDataAt method is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.

+

Dragging Nodes

+

Nodes and elements in a document may be dragged using the application/x-moz-node type. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.

+

You should always include a plain text alternative for the node.

+

Dragging Custom Data

+

You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.

+

Dragging files to an operating system folder

+

There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:

+
// currentEvent is a given existing drag operation event
+
+currentEvent.dataTransfer.setData("text/x-moz-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName);
+currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
+                  new dataProvider(success,error),
+                  0, Components.interfaces.nsISupports);
+
+function dataProvider(){}
+
+dataProvider.prototype = {
+  QueryInterface : function(iid) {
+    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)
+                  || iid.equals(Components.interfaces.nsISupports))
+      return this;
+    throw Components.results.NS_NOINTERFACE;
+  },
+  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {
+    if (aFlavor == 'application/x-moz-file-promise') {
+
+       var urlPrimitive = {};
+       var dataSize = {};
+
+       aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);
+       var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+       console.log("URL file orignal is = " + url);
+
+       var namePrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize);
+       var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+
+       console.log("target filename is = " + name);
+
+       var dirPrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);
+       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);
+
+       console.log("target folder is = " + dir.path);
+
+       var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
+       file.initWithPath(dir.path);
+       file.appendRelativePath(name);
+
+       console.log("output final path is =" + file.path);
+
+       // now you can write or copy the file yourself...
+    }
+  }
+}
+
+

{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}

diff --git a/files/es/e4x/index.html b/files/es/e4x/index.html new file mode 100644 index 0000000000..f8e51bfe3d --- /dev/null +++ b/files/es/e4x/index.html @@ -0,0 +1,25 @@ +--- +title: E4X +slug: E4X +tags: + - E4X + - JavaScript +translation_of: Archive/Web/E4X +--- +

ECMAScript for XML (E4X) es una extensión del lenguaje de programación que añade la implementación de XML nativo a JavaScript. Esto proporciona el acceso al documento de XML de manera que sea natural para los programadores de ECMAScript. El objetivo es proporcionar una alternativa, una sintaxis más simple para tener acceso a documentos XML a través de las interfaces DOM.

+

E4X está regulado por Ecma International dentro del estándar ECMA-357 (actualmente en su segunda edición, diciembre 2005).

+

E4X se implementa (al menos parcialmente) en SpiderMonkey (Gecko con motor de JavaScript ) y dentro de Rhino (JavaScript con motor escrito en Java).

+

Nota: en navegadores basados del Gecko 1.8, como Firefox 1.5, E4X ya puede usarse parcialmente por los autores de páginas web. Para disponer completamente de E4X, el elemento <script> necesita tener el tipo del MIME "text/javascript;e4x=1" (ej. tener un atributo en el formulario type="text/javascript;e4x=1"). La diferencia entre los dos modos es que sin el tipo MIME "e4x=1", cualquiera de los literales de comentario (<!--...-->) en instrucciones XML/HTML son ignorados por compatibilidad hacia atrás con el truco de ocultar el comentario, y las secciones CDATA (<![CDATA[...]]>) no son procesadas como literales CDATA (que conduce a un error de sintaxis JS en el HTML ya que el elemento <script> de HTML produce una sección CDATA implícita, y por lo tanto no puede contener explícitamente secciones CDATA).

+
+

Errores conocidos y limitaciones

+ +

Solución:

+
var response = xmlhttprequest.responseText; // bug 270553
+response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug 336551
+var e4x = new XML(response);
+
+

Recursos

+ +

diff --git a/files/es/empaquetado_de_extensiones/index.html b/files/es/empaquetado_de_extensiones/index.html new file mode 100644 index 0000000000..a908921f26 --- /dev/null +++ b/files/es/empaquetado_de_extensiones/index.html @@ -0,0 +1,29 @@ +--- +title: Empaquetado de extensiones +slug: Empaquetado_de_extensiones +tags: + - Complementos + - Todas_las_Categorías + - Toolkit API + - extensiones +translation_of: Archive/Add-ons/Extension_Packaging +--- +

Las extensiones son paquetes instalables que pueden ser descargados e instalados por un usuario,  provistos de manera pre-empaquetada dentro de una aplicación,o por un programa externo. Las extensiones usan una estructura de directorio que alberga el chrome, los componentes y otros archivos para extender la funcionalidad de un programa XUL.

+

Cada extensión debe facilitar un archivo install.rdf que contenga metadatos acerca de la extension, así como su ID único, versión, autor e información de compatibilidad.

+

Luego de ser preparados los archivos de la extensión y el install.rdf, existen diversas maneras de preparar una extensión para su instalación: Comprime a un archivo ZIP el directorio de la extensiòn a un archivo instalable XPI (xpinstall), desempaqueta la extensión directamente en la aplicación del usuario o la carpeta de perfil, o inscribe la extensión en el registro de Windows.

+

Creando una extensión XPI

+

Un archivo XPI (XPInstall) es sencillamente un archivo ZIP que contiene los archivos de la extensión, con el archivo install.rdf en la carpeta raíz del archivo ZIP. Los usuarios pueden descargar e instalar los archivos XPI de un sitio web o de un archivo local, abriéndolos o arrastrándolos a la ventana del Administrador de extensiones.

+

El tipo de MIME reconocido por Firefox para los archivos XPI es application/x-xpinstall. Ya que la mayoría de los servidores HTTP no están configurados para devolver este tipo de MIME para la extensión .xpi por defecto, probablemente tendrás que configurar tu servidor HTTP. En el servidor HTTP de Apache, se puede realizar al añadir la siguiente instrucción al archivo de configuración o .htaccess:

+
AddType application/x-xpinstall .xpi
+
+

Instalar archivos de extensiones directamente

+

Si conoces la localización de la aplicación (si instala una extensión como parte de un instalador de la aplicación, por ejemplo), puedes instalar los archivos de la extensión directamente en <appdir>/extensions/<extensionID>. La extensión será encontrada automáticamente por el Administrador de extensiones la próxima vez que la aplicación se ejecute.

+

Cuando uses este método debes verificar que estén establecidos correctamente los permisos de sistema del archivo para la carpeta. De otra manera, el administrador de extensiones puede no funcionar correctamente con la extensión o la extensión misma no lo harà correctamente.

+

Registrar una localización de extensión usando el Registro de Windows

+

Los instaladores externos (tales como el Java runtime) pueden tratar de instalar puntos de integración con la aplicación como una extensión aún cuando la aplicación no está instalada. Se puede lograr esto en Windows usando el registro.

+

Extensiones XPIs de varios elementos

+

En algunos casos un solo archivo XPI puede tratar de instalar múltiples extensiones/temas. Un tipo especial de extensión llamado el Paquete de Múltiples artículos explica cómo crear este tipo de paquete. (se requiere Firefox 1.5/XULRunner 1.8)

+ +

Referencias oficiales para Toolkit API

+ +
{{page("/es/docs/Toolkit_API/Official_References")}}
diff --git a/files/es/empaquetar_un_tema/index.html b/files/es/empaquetar_un_tema/index.html new file mode 100644 index 0000000000..1eadf7c5fc --- /dev/null +++ b/files/es/empaquetar_un_tema/index.html @@ -0,0 +1,109 @@ +--- +title: Empaquetar un Tema +slug: Empaquetar_un_Tema +tags: + - Complementos + - Herramientas_API + - Temas + - Todas_las_Categorías +translation_of: Mozilla/Thunderbird/Thunderbird_extensions/Theme_Packaging +--- +

 

+

Este documento describe cómo empaquetar temas para Firefox y Thunderbird.

+

Pre-requisitos

+

Hacer un tema para Firefox o Thunderbird requiere conocimientos de hojas de estilo en cascada (CSS), probablemente XBL, y un poco de habilidad para diseño gráfico y estética (...o quizá no). Este documento describe solamente cómo se empaquetan los temas para ser mostrados en la ventana de los temas de Firefox.

+

Estructura de los ficheros del tema

+

Los temas Firefox/Thunderbird son empaquetados en un archivo JAR con la siguiente estructura:

+
theme.jar:
+  install.rdf
+  contents.rdf
+  preview.png
+  icon.png
+  browser/files
+  global/files
+  mozapps/files
+  communicator/files
+  ...
+
+
+ + + +

install.rdf

+

El fichero install.rdf debe de tener este aspecto:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:type>4</em:type>otras propiedades
+  </Description>
+</RDF>
+
+

Propiedades de install.rdf requeridas

+

El fichero install.rdf debe contener las siguientes propiedades. Véase Referencia install.rdf para más información:

+ +

Propiedades de install.rdf opcionales

+ +

Nótese que si el tema va a ser publicado en el sitio web http://addons.mozilla.org, no debe incluir la parte updateURL.

+

Fichero install.rdf de ejemplo

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id>
+    <em:version>1.0</em:version>
+    <em:type>4</em:type>
+
+    <!-- Aplicación para la cual esta extensión puede ser instaladainto,
+         indicando la mínima y máxima versión soportada. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>0.8</em:minVersion>
+        <em:maxVersion>0.9</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>New Theme 1</em:name>
+    <em:description>A test theme for Firefox</em:description>
+    <em:creator>Ben Goodger</em:creator>
+    <em:contributor>John Doe</em:contributor>
+    <em:homepageURL>http://www.bengoodger.com/</em:homepageURL>
+
+    <!-- Front End Integration Hooks (used by Theme Manager)-->
+    <em:internalName>newtheme1</em:internalName>
+  </Description>
+</RDF>
+
+

Los siguientes son algunos GUIDs de aplicaciones comunes que puedes usar en la propiedad targetApplication:

+
Firefox      {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+Thunderbird  {3550f703-e582-4d05-9a08-453d09bdfdc6}
+Sunbird      {718e30fb-e89b-41dd-9da7-e25a45638b28}
+
+

Referencia oficial para Toolkit API

+
+ {{page("/es/docs/Toolkit_API/Official_References")}}
diff --git "a/files/es/escribir_c\303\263digo_localizable/index.html" "b/files/es/escribir_c\303\263digo_localizable/index.html" new file mode 100644 index 0000000000..dc9f1579a5 --- /dev/null +++ "b/files/es/escribir_c\303\263digo_localizable/index.html" @@ -0,0 +1,25 @@ +--- +title: Escribir código localizable +slug: Escribir_código_localizable +tags: + - Localización +translation_of: Mozilla/Localization/Writing_localizable_code +--- +

Escribir código localizable

+

Esta página explica las buenas prácticas y directrices al tratar con código de interfaces de usuario en relación a la localización. Está dirigido a desarrolladores de Mozilla y de sus extensiones.

+

Para más detalles técnicos, por favor, revisa el Tutorial de XUL:Localización.

+

{{ draft }}

+

Acerca de los traductores

+

Un par de apuntes sobre los traductores para desarrolladores que raramente trabajan con ellos.

+ +

Directrices

+

Por tanto, hay algunas directrices que se deberían seguir para facilitar la localización de tu código.

+
Elegir nombres de claves apropiados
Los nombres elegidos para las claves (sin importar que estén en un DTD o en un fichero properties) deberían ser descriptivos. Piensa en ellos como nombres de variable largos. Si la semántica de una cadena traducible cambia, entonces la clave también debería cambiar. Esto mejorará el nombre de la clave y las herramientas podrán detectar que lo que se ha cambiado es algo más que una simple corrección ortográfica o gramatical.
No asumir el uso de gramática en la cadenas compuestas
Si se dividen frases en varias claves se presupone el uso de una gramática, una estructura de frase y tales cadenas compuestas son con frecuencia muy difíciles de traducir. Cuando se necesite una cadena compuesta, es aconsejable darles a los traductores espacio para moverse. Un buen ejemplo de cadena compuesta es la configuración de páginas visitadas en Firefox: el traductor puede (implícitamente) poner el campo de texto como él crea conveniente.
No usar macros de preprocesador
El uso de #if #else #endif o #expand está profundamente desaconsejado. Existen unas pocas excepciones a esta regla, pero en general el fichero traducido debería cumplir los estándares y no debería necesitar herramientas de compilación para ser transformado. Si se quiere añadir procesamiento durante la compilación a ficheros de localización, habría que asegurarse de pedir opinión a l10n@. En la mayoría de los casos, las instrucciones de proceso también se pueden poner en el código de contenido y referenciar diferentes pares clave/valor en l10n.
Utilizar una buena estructura de directorios
Asegúrate de poner los ficheros de localización en el lugar apropiado. La inclusión de nuevos directorios superiores es un compromiso entre la propiedad del módulo en el repositorio cvsroot y la facilidad de la traducción.
Utilizar una buena estructura de directorios chrome
Para un módulo mod en particular, la ruta jar:ab-CD.jar!/locale/ab-CD/mod/foo.dtd ha sido ampliamente probada y es un buen lugar para referenciar los ficheros como chrome://mod/locale/foo.dtd. Utilizar una estructura de directorios como ésta facilita el proceso de traducción sin el código fuente y es especialmente recomendada para desarrolladores de extensiones. JAR Manifests puede hacer esto de forma fácil.
+

El impacto l10n

+

En árboles congelados, existe la regla de no aplicar cambios que supongan impacto l10n. ¿Pero qué significa esto? El impacto l10n es

+ + +

{{ languages( { "en": "en/Writing_localizable_code", "fr": "fr/\u00c9criture_de_code_localisable" } ) }}

diff --git a/files/es/esquema_del_administrador_de_descargas/index.html b/files/es/esquema_del_administrador_de_descargas/index.html new file mode 100644 index 0000000000..a58908da5f --- /dev/null +++ b/files/es/esquema_del_administrador_de_descargas/index.html @@ -0,0 +1,108 @@ +--- +title: Esquema del Administrador de descargas +slug: Esquema_del_Administrador_de_descargas +tags: + - Firefox 3 +translation_of: Archive/Mozilla/The_Download_Manager_schema +--- +

+

El Administrador de Descargas utiliza una tabla SQLite para hacer seguimiento de las descargas en progreso así como las descargas en cola y las terminadas. +

La tabla se mantiene en un archivo de base de datos llamado "downloads.sqlite", en una tabla llamada "moz_downloads". La versión actual del esquema de la base de datos es 8. +

Esta información está disponible usando el método nsIDownloadManager para leer los objetos nsIDownload para cada entrada de descargas. Sin embargo, si crees que que prefieres ir directamente a la tabla, puedes hacerlo usando el API Storage. +

+

El esquema de la tabla

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre del campo +Tipo +Descripción +
id +INTEGER +Un ID único para la descarga. Este campo es la clave primaria para la tabla. +
nombre +TEXT +El nombre del archivo de la descarga. +
origen +TEXT +La URI origen de la descarga. +
destino +TEXT +La URI destino final de la descarga. +
tempPath +TEXT +El path del archivo temporal usado para la descarga. +
startTime +INTEGER +La hora de comienzo de la descarga. +
endTime +INTEGER +La hora de final de la descarga. +
state +INTEGER +El estado actual de la descarga. Ver the constants list in the nsIDownloadManager documentation. +
referrer +TEXT +El que refiere la descarga (página de donde proviene). +
entityID +TEXT +El ID identificador de nsIResumableChannel usado para implementar el canal de descarga. Esta información es usada para reanudar la descarga cuando ha sido pausada. +
currBytes +INTEGER +La cantidad actual de bytes que han sido descargados. Por defecto es 0, no puede ser nulo. +
maxBytes +INTEGER +El número total de bytes que hay que descargar. Por defecto es -1, no puede ser nulo. +
mimeType +TEXT +El tipo MIME del archivo. +
preferredApplication +TEXT +La aplicación preferida para abrir el archivo una vez finalizada la descarga. +
preferredAction +INTEGER +La constante de acción servida por nsIMIMEInfo que representa la acción a tomar al terminar la descarga. Por defecto es 0 (guardar en disco), no puede ser nulo. +
autoResume +INTEGER +0 si la descarga del archivo no debe ser automáticamente reanudada, 1 si debe serlo. Por defecto es 0, no puede ser nulo. +
+

Ver también

+ +


+

+
+
diff --git "a/files/es/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" "b/files/es/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" new file mode 100644 index 0000000000..64997a3c50 --- /dev/null +++ "b/files/es/estructura_de_directorios_de_c\303\263digo_fuente_de_mozilla/index.html" @@ -0,0 +1,698 @@ +--- +title: Estructura de directorios de código fuente de Mozilla +slug: Estructura_de_directorios_de_código_fuente_de_Mozilla +--- +

El código para todos los proyectos de la familia Mozilla (como Firefox, Thunderbird, etc.) se combina en un único árbol-fuente. El árbol contiene el código fuente, así como el código necesario para generar cada proyecto en las plataformas compatibles (Linux, Windows, Mac OS, etc).

+

Si simplemente quieres echar un vistazo al código fuente de Mozilla, no es necesario que lo descargues. Puedes mirar el codigo fuente directamente con tu navegador web usando MXR (la raiz del codigo fuente completo de Mozilla comienza en http://mxr.mozilla.org/mozilla-central/source/).

+

Para modificar el código fuente, tienes que adquirirlo, ya sea descargando una instantánea de las fuentes o revisando las fuentes actuales de Mercurial.

+

Este documento describe la estructura de directorios que puede ser generada por client.mk -- es decir, los directorios que se utilizan por lo menos en algún producto del proyecto Mozilla. Hay otros directorios en el repositorio CVS de Mozilla, como los de las herramientas Web y los del código base clásico.

+

Esto no está del todo actualizado. Mira la descripción general de los directorios del código fuente para una versión algo diferente (antigua) de la misma información. También mira la descripción más detallada de las partes de Gecko.

+

accessible

+

Archivos para la accesibilidad (por ejemplo, los archivos de soporte MSAA (Microsoft Active Accessibility) y ATK (Accessibility Toolkit, usado por GTK+ 2)). Ver Accesibilidad de Mozilla  Accesibilidad.

+

browser

+

Contiene el código de la parte del usuario para el navegador Firefox (en XUL, JavaScript, XBL, y C++). Muchos de estos archivos comenzaron como una copia de los archivos de xpfe/.

+
+

build

+

Archivos varios, utilizados en el proceso de compilación. Véase también config/.

+
+ +
+

calendar

+

Implementación de Calendar, creado originalmente por OEone. Véase también extensions/lightning/.

+

caps

+

Gestión de la seguridad de la página web basada en capabilities.

+

Caps contiene las interfaces de C++ y el código para determinar las capabilities del contenido basado en la configuración de seguridad o certificados (por ejemplo VeriSign). Ver seguridad de componentes.

+
+

chrome

+

Registro chrome utilizado con toolkit/. Estos archivos fueron originalmente copias de los archivos de rdf/chrome/.

+
+
+

composer

+

El código (XUL y JavaScript) de la parte del usuario (front-end) para la aplicación standalone Composer.

+
+
+

config

+

Más archivos utilizados por el proceso de compilación, incluidos normalmente para los makefiles, etc. Véase también build/.

+

content

+

Las estructuras de datos que representan la estructura de las páginas Web (HTML, SVG, documentos XML, elementos, nodos de texto, etc.). Estos objetos contienen la implementación de varias interfaces DOM y también implementan algunos de los comportamientos asociados a esos objetos, como manejo de enlaces, control del comportamiento del formulario y envío del formulario.

+

Este directorio también contiene el código para XUL, XBL, XTF, <canvas>, así como el código de la implementación XSLT y manejo de eventos.

+

db

+

Contenedor para los módulos de acceso a las bases de datos. Actualmente contiene mork y sqlite.

+

db/mdb, db/mork, and db/morkreader

+ Implementación de Mork, un formato de texto para bases de datos. Este se utiliza por ejemplo para almacenar la historia global.
+

morkreader es un analizador simple para mork usado para migrar los datos antiguos a las nuevas bases de datos basadas en sqlite.

+
+

db/sqlite3

+

La base de datos SQLite, usada por storage. Reemplaza a mork en Firefox 3.

+
+
+

dbm

+

Código fuente de la librería Berkeley de base de datos, hackeado desde la versión 4.4BSD. Utilizado principalmente por el código NSS como almacén de certificados.

+
+
+

directory

+

Soporte LDAP para Mozilla. Utilizado en las noticias por correo.

+
+
+

docshell

+

Implementación del docshell, el objeto principal para el manejo de lo relacionado con la ventana de un documento. Cada cuadro tiene su propio docshell. Contiene métodos para la carga de URIs, gestión de los oyentes del contenido de los URIs, etc. Es la capa más externa de la API embebida usada para incrustar un navegador Gecko en una aplicación. Ver también webshell/.

+
+
+

dom

+

Contiene:

+
    +
  • Definiciones IDL de las interfaces definidas por las especificaciones DOM y las extensiones de Mozilla a estas interfaces (las implementaciones de estas interfaces están principalmente, aunque no completamente, en content/).
    • +
  • Las partes de la conexión entre JavaScript y las implementaciones de objetos DOM que son específicos para JavaScript y el DOM. (Las partes que no son específicas del DOM, es decir, la unión genérica entre XPCOM y JavaScript, se encuentran en js/src/xpconnect/.)
    • +
  • Las implementaciones de algunos de los principales objetos "DOM nivel 0", tales como window, window.navigator, window.location, etc.
    • +
+
+
+

editor

+

The editor directory contains C++ interfaces, C++ code, and XUL/JavaScript for the embeddable editor component, which is used for the HTML Editor("Composer"), for plain and HTML mail composition, and for text fields and text areas throughout the product. The editor is designed like a "browser window with editing features": it adds some special classes for editing text and managing transaction undo/redo, but reuses browser code for nearly everything else.

+

Contains:

+
    +
  • The backend for HTML and text editing. This is not only used for the mail composer and the page editor composer, but also for rich text editing inside webpages. Textarea and input fields are using such an editor as well (in the plaintext variant). See Mozilla Editor.
    • +
  • The frontend for the HTML editor that is part of SeaMonkey.
    • +
+
+
+

embedding

+

XXX this needs a description. See Embedding.

+
+
+

extensions

+ Contains several extensions to mozilla, which can be enabled at compile-time using the --enable-extensions configure argument.
+

Note that some of these are now built specially and not using the --enable-extensions option. For example, disabling xmlextras is done using --disable-xmlextras.

+
+

extensions/auth

+

Implementation of the negotiate auth method for HTTP and other protocols. Has code for SSPI, GSSAPI, etc. See Integrated Authentication.

+
+
+

extensions/content-packs

+

Content- and locale-pack switching user interface.

+
+
+

extensions/cookie

+

Permissions backend for cookies, images etc, as well as the user interface to these permissions and other cookie features.

+
+
+

extensions/cview

+

Component viewer, which allows to view the currently registered components and interfaces.

+
+
+

extensions/datetime

+

Support for the datetime protocol.

+
+
+

extensions/finger

+

Support for the finger protocol.

+
+
+

extensions/gnomevfs

+

Interface to gnome-vfs to allow using all protocols supported by gnome-vfs inside of mozilla.

+
+
+

extensions/help

+

Help viewer and help content. See Mozilla Help Viewer Project.

+
+
+

extensions/irc

+
+

Edit section

+
+

This is ChatZilla, the IRC (Internet Relay Chat) component. See ChatZilla.

+
+
+

extensions/java

+
+

Edit section

+
+

XPCOM<->Java bridge ("JavaXPCOM", formerly known as Javaconnect). Unrelated to the code in java/.

+
+
+

extensions/layout-debug

+
+

Edit section

+
+

Layout debugger. Intended as replacement for "viewer". Can be used to run layout regression tests and has support for other layout debugging features.

+
+
+

extensions/lightning

+
+

Edit section

+
+

The Lightning project, "an extension to tightly integrate calendar functionality (scheduling, tasks, etc.) into Thunderbird." See Lightning.

+
+
+

extensions/mono

+
+

Edit section

+
+

A two-way bridge between the CLR/.NET/Mono/C#/etc. world and XPCOM.

+
+
+

extensions/p3p

+
+

Edit section

+
+

Implementation of W3C's Platform for Privacy Preferences standard. See Platform for Privacy Preferences (P3P).

+
+
+

extensions/pref

+
+

Edit section

+
+

Preference-related extensions:

+
+
+

extensions/python

+
+

Edit section

+
+

Support for implementing XPCOM components in python. See PyXPCOM.

+
+
+

extensions/reporter

+
+

Edit section

+
+

An extension to report problems with web pages. Client-side part. See Mozilla Reporter.

+
+
+

extension/schema-validation

+
+

Edit section

+
+

Allows to validate XML trees according to specified XML Schemas.

+
+
+

extension/spatialnavigation

+
+

Edit section

+
+

Spatial navigation, navigating between links of a document according to their on-screen position. See Spatial Navigation.

+
+
+

extensions/spellcheck

+
+

Edit section

+
+

Spellchecker for mailnews and composer.

+
+
+

extensions/sql

+
+

Edit section

+
+

Support for accessing SQL databases from XUL applications. See SQL Support in Mozilla.

+
+
+

extensions/sroaming

+
+

Edit section

+
+

Session roaming, i.e. support for storing a profile on a remote server.

+
+
+

extensions/transformiix

+
+

Edit section

+
+

XSLT support. XSL Transformations is a language used to transform XML documents into other XML documents. See XSL Transformations.

+
+
+

extensions/tridentprofile

+
+

Edit section

+
+

Support for importing profiles from MSIE.

+
+
+

extensions/typeaheadfind

+
+

Edit section

+
+

Find As You Type allows quick web page navigation when you type a succession of characters in the body of the displayed page. See Find As You Type.

+
+
+

extensions/universalchardet

+
+

Edit section

+
+

Universal character set detector.

+
+
+

extensions/venkman

+
+

Edit section

+
+

The JavaScript Debugger.

+
+
+

extensions/wallet

+
+

Edit section

+
+

Password and Form Manager.

+
+
+

extensions/webdav

+
+

Edit section

+
+

WebDAV code; exposes special APIs for accessing WebDAV servers. Used by the Calendar project.

+
+
+

extensions/webservices

+
+

Edit section

+
+

Support for Webservices. See Web Services.

+
+
+

extensions/xforms

+
+

Edit section

+
+

Code for the XForms extension. See XForms.

+
+
+

extensions/xmlextras

+
+

Edit section

+
+

Several XML-related extensions. See XML Extras.

+
+
+

extensions/xml-rpc

+
+

Edit section

+
+

XML Remote Procedure Calls. Unowned these days. See XML-RPC in Mozilla.

+
+
+

extensions/xmlterm

+
+

Edit section

+
+

XMLTerm, a terminal implemented using mozilla technology. Only available on GTK builds.

+
+
+
+

gc

+
+

Edit section

+
+

Container for garbage collection libraries, currently only boehm GC.

+
+
+

gfx

+
+

Edit section

+
+

Contains interfaces that abstract the capabilities of platform specific graphics toolkits, along with implementations on various platforms. These interfaces provide methods for things like drawing images, text, and basic shapes. It also contains basic data structures such as points and rectangles used here and in other parts of Mozilla.

+

It is also the home of the new graphics architecture based on cairo (via a C++ wrapper called thebes). See NewGFXAPIs and GFXEvolution.

+
+
+

image

+
+

Edit section

+
+

Image rendering library. Contains decoders for the image formats mozilla supports.

+
+
+

intl

+
+

Edit section

+
+

Internationalization and localization support. See Internationalisation Projects.

+
+
+ bidi
+
+ Obsolete.
+
+ chardet
+
+ Code for "sniffing" the character encoding of Web pages.
+
+ ctl
+
+ Code for dealing with Complex Text Layout, related to shaping of south Asian languages (not built by default, needs --enable-ctl).
+
+ locale
+
+ Code related to determination of locale information from the operating environment.
+
+ lwbrk
+
+ Code related to line breaking and word breaking.
+
+ strres
+
+ Code related to string resources used for localization.
+
+ uconv
+
+ Code that converts (both ways: encoders and decoders) between UTF-16 and many other character encodings.
+
+ unicharutil
+
+ Code related to implementation of various algorithms for Unicode text, such as case conversion.
+
+
+
+

ipc

+
+

Edit section

+
+

Container for implementations of IPC (Inter-Process Communication) mechanisms.

+
+
+

ipc/ipcd

+
+

Edit section

+
+

The IPC daemon that is used for communication between several mozilla processes to support profile sharing. (Note that at the time of this writing (Dec 2005), profile sharing is not supported by mozilla).

+
+
+

jpeg

+
+

Edit section

+
+

Source code of libjpeg, used by the mozilla image library.

+
+
+

js/src

+
+

Edit section

+
+

The JavaScript engine, also known as SpiderMonkey. See also JavaScript.

+
+
+

js/jsd

+
+

Edit section

+
+

JavaScript debugging library. See JavaScript Debugging.

+
+
+

js/src/xpconnect

+
+

Edit section

+
+

Support code for calling JavaScript code from C++ code and C++ code from JavaScript code, using XPCOM interfaces. See XPConnect].

+
+
+

js/src/liveconnect

+
+

Edit section

+
+

Liveconnect, the bridge between JavaScript and Java. See LiveConnect Overview.

+
+
+

l10n

+
+

Edit section

+
+

Basically empty and not used by the mozilla build.

+
+
+

layout

+
+

Edit section

+
+

Code that implements a tree of rendering objects that describe the types and locations of the objects that are displayed on the screen (such as CSS boxes, tables, form controls, XUL boxes, etc.), and code that manages operations over that rendering tree (such as creating and destroying it, doing layout, painting, and event handling). See documentation and other information.

+
+
+ base
+
+ Code that deals with the rendering tree.
+
+ generic
+
+ The basic rendering object interface and the rendering tree objects for basic CSS boxes.
+
+ forms
+
+ Rendering tree objects for HTML form controls.
+
+ tables
+
+ Rendering tree objects for CSS/HTML tables
+
+ mathml
+
+ Rendering tree objects for MathML.
+
+ svg
+
+ Rendering tree objects for SVG.
+
+ xul
+
+ Additional rendering object interfaces for XUL and the rendering tree objects for XUL boxes.
+
+
+
+

lib

+
+

Edit section

+
+

Mostly unused; might be used on mac?

+
+
+

mail

+
+

Edit section

+
+

Thunderbird frontend files. Note that many thunderbird files are shared with Mozilla Mailnews and can be found under mailnews/.

+
+
+

mailnews

+
+

Edit section

+
+

The mail and news backend code (e.g. code that manages folders, manages databases, or interacts with mail servers) and the frontend code for the SeaMonkey mail client, some of which is shared by Thunderbird.

+
+
+

modules/libimg

+
+

Edit section

+
+

Contains libpng, used by the image library for PNG Image decoding.

+
+
+

modules/libjar

+
+

Edit section

+
+

Code to read zip files, used for reading the .jar files that contain the files for the mozilla frontend.

+
+
+

modules/libpref

+
+

Edit section

+
+

Library for reading and writing preferences.

+
+
+

modules/libreg

+
+

Edit section

+
+

Library for reading the netscape binary registry files, used for the ~/.mozilla/appreg file (registry.dat on windows).

+
+
+

modules/oji

+
+

Edit section

+
+

Support for the Java plugin (a bridge for plugging-in generic Java VMs). See Open JVM Integration (OJI).

+

Note: OJI may be removed from Mozilla 2.0 according to this post by Josh.

+
+
+

modules/plugin

+
+

Edit section

+
+

Plugin support. Implements the Netscape Plugin API (NPAPI). See Plugins.

+
+
+

modules/staticmod

+
+

Edit section

+
+

Helper files for static mozilla builds.

+
+
+

modules/zlib

+
+

Edit section

+
+

Source code of zlib, used at least in the networking library for compressed transfers.

+
+
+

netwerk

+
+

Edit section

+
+

Networking library, also known as Necko. Responsible for doing actual transfers from and to servers, as well as for URI handling and related stuff. See also Network library documentation.

+
+
+

nsprpub

+
+

Edit section

+
+

Netscape Portable Runtime. Used as an abstraction layer to things like threads, file I/O and socket I/O. See Netscape Portable Runtime.

+
+
+

other-licenses

+
+

Edit section

+
+

Contains libraries that are not covered by the MPL but used in some mozilla code.

+
+
+

parser/expat

+
+

Edit section

+
+

Copy of the expat source code, which is the XML parser used by mozilla.

+
+
+

parser/htmlparser

+
+

Edit section

+
+

Contains the html parser used by Mozilla, which parses HTML source code and calls the appropriate methods on a content sink.

+
+
+

profile

+
+

Edit section

+
+

Code for profile handling, the profile manager backend and frontend.

+
+
+

rdf

+
+

Edit section

+
+

RDF handling APIs. See RDF and RDF.

+

Also contains the chrome registry code used by SeaMonkey, although toolkit apps (such as Firefox and Thunderbird) use the copy forked into chrome.

+
+
+

security

+
+

Edit section

+
+

Contains NSS and PSM, to support cryptographic functions in mozilla (like S/MIME, SSL, etc). See Network Security Services (NSS) and Personal Security Manager (PSM).

+
+
+

storage

+
+

Edit section

+
+

Storage: XPCOM wrapper for sqlite. Wants to unify storage of all profile-related data. Supersedes mork. See also Unified Storage.

+
+
+

suite

+
+

Edit section

+
+

Newer parts of SeaMonkey-specific code. Older parts live in xpfe/.

+
+
+

themes

+
+

Edit section

+
+

Contains the themes shipped with SeaMonkey. Classic and Modern at the time of this writing.

+
+
+

toolkit

+
+

Edit section

+
+

The "new toolkit" used by Thunderbird, Firefox, etc. This contains numerous front-end components shared between applications as well as most of the XBL-implemented parts of the XUL language (most of which was originally forked from versions in xpfe/).

+
+
+

tools

+
+

Edit section

+
+

Some tools which are optionally built during the mozilla build process, mostly used for debugging.

+
+
+

uriloader/base

+
+

Edit section

+
+

Content dispatch in Mozilla. Used to load uris and find an appropriate content listener for the data. Also manages web progress notifications. See Document Loading: From Load Start to Finding a Handler and The Life Of An HTML HTTP Request.

+
+
+

uriloader/exthandler

+
+

Edit section

+
+

Used to handle content that Mozilla can't handle itself. Responsible for showing the helper app dialog, and generally for finding information about helper applications.

+
+
+

uriloader/prefetch

+
+

Edit section

+
+

Service to prefetch documents in order to have them cached for faster loading.

+
+
+

view

+
+

Edit section

+
+

View manager. Contains cross-platform code used for painting, scrolling, event handling, z-ordering, and opacity. Soon to become obsolete, gradually.

+
+
+

widget

+
+

Edit section

+
+

A cross-platform API, with implementations on each platform, for dealing with operating system/environment widgets, i.e., code related to creation and handling of windows, popups, and other native widgets and to converting the system's messages related to painting and events into the messages used by other parts of Mozilla (e.g. view/ and content/, the latter of which converts many of the messages to yet another API, the DOM event API).

+
+
+

xpcom

+
+

Edit section

+
+

Cross-Platform Component Object Model. Also contains data structures used by the rest of the mozilla code. See also XPCOM Project.

+
+
+

xpfe

+
+

Edit section

+
+

XPFE is the SeaMonkey frontend. It contains the XUL files for the browser interface, common files used by the other parts of the mozilla suite, and the XBL files for the parts of the XUL language that are implemented in XBL. Much of this code has been copied to browser/ and toolkit/ for use in Firefox, Thunderbird, etc.

+
+

xpfe/components

+
+

Edit section

+
+

Components used by the Mozilla frontend, as well as implementations of interfaces that other parts of mozilla expect.

+
+
+

xpfe/bootstrap

+
+

Edit section

+
+

Startup code for Mozilla. This contains the main/WinMain function. (Not used by "new toolkit" apps; for those, see toolkit/xre and the "app" directory for each specific app).

+
+
+
+

xpinstall

+
+

Edit section

+
+

The installer, which contains code for installing Mozilla and for installing XPIs/extensions. This directory also contains code needed to build installer packages. See XPInstall and the XPInstall project page.

+
+
+
diff --git a/files/es/etiquetas_audio_y_video_en_firefox/index.html b/files/es/etiquetas_audio_y_video_en_firefox/index.html new file mode 100644 index 0000000000..b89a3a028e --- /dev/null +++ b/files/es/etiquetas_audio_y_video_en_firefox/index.html @@ -0,0 +1,46 @@ +--- +title: Etiquetas audio y video en Firefox +slug: Etiquetas_audio_y_video_en_Firefox +--- +

{{ gecko_minversion_header("1.9.1") }}

+

En Firefox 3.5 se ha incorporado la posibilidad de usar las etiquetas para los elementos  audio y video, agregados a las especificaciones de HTML 5, lo que permite insertar  fácilmente archivos de audio o video en los documentos HTML.  Actualmente sólo pueden usarse los formatos Ogg y WAV, pero se espera agregar la posibilidad de usar otros formatos en el futuro.

+

Insertar medios

+

Insertar medios en su documento HTML es sencillo:

+
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay>
+  Your browser does not support the <code>video</code> element.
+</video>
+
+

Este ejemplo reproduce un video del sitio web de Theora.

+

Se pueden agregar múltiples archivos usando el elemento source para especificar diferentes archivos con diferentes formatos para distintos navegadores. Por ejemplo:

+
<video autoplay>
+  <source src="foo.ogg" type="video/ogg">
+  <source src="foo.mov">
+  Your browser does not support the <code>video</code> element.
+</video>
+
+

ejecutará el archivo OGG en los navegadores que puedan reproducir ese formato. Si el navegador no puede reproducir ese formato, intentará usar el archivo MOV.

+
Nota: El elemento source todavía no es completamente funcional en Firefox. Mire el {{ bug(449363) }} para más detalles.
+

Controlar la reproducción de los archivos

+

Una vez que haya insertado el archivo en el documento HTML usando los nuevos elementos, puede controlarlos usando JavaScript. Por ejemplo, para empezar (o reiniciar) la reproducción, puede hacer esto::

+
var v = document.getElementsByTagName("video")[0];
+v.play();
+
+

La primera línea localiza el elemento en el documento y la segunda usa el método play() del mismo, como está definido en la interface {{ interface("nsIDOMHTMLMediaElement") }} que se usa para implementar los elementos de medios.

+

Eventos en medios

+

Muchos eventos son enviados cuando se manejan medios:

+ +
Nombre del evento Descripción
abort Se envía cuando se aborta la reproducción, por ejemplo, cuando el archivo se está reproduciendo y es reiniciado, se envía este evento.
canplay Se envía cuando ya está disponible la suficiente cantidad del archivo para que pueda reproducirse, por lo menos por unos cuantos cuadros. Se corresponde con CAN_PLAY readyState.
canplaythrough Se envía cuando el estado cambia a CAN_PLAY_THROUGH, lo que indica que puede reproducirse completamente el archivo sin interrupciones, asumiendo que la tasa de descaraga se mantendrá en el nivel actual.
canshowcurrentframe El cuadro actual fue cargado y puede mostrarse. Este se corresponde a CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Se envía cuando el estado cambia a DATA_UNAVAILABLE.
durationchange Los metadatos fueron cargados o han cambiado, lo que indica un cambio en la duración del archivo. Esto se envía, por ejemplo, cuando se ha cargado tanto del archivo que se conoce la duración total del mismo.
emptied El  archivo se ha vaciado. Por ejemplo, este evento se envía si el archivo había sido cargado (o parcialmente cargado), y se llamó al método load() para recargarlo.
empty Se envía cuando hay un error y el archivo está vacío.
ended Se envía cuando se termina la reproducción.
error Se envía cuando hay un error. El atributo error del elemento contiene más información.
load El archivo se descargó completamente.
loadedfirstframe El primer cuadro del archivo se terminó de descargar.
loadedmetadata Los metadatos del archivo se terminaron de descargar, todos los atributos contienen la mayor cantidad de información posible.
loadstart Se envía cuando comienza la carga del archivo.
pause Se envia cuando se pone en pausa la reproducción.
play Se envía cuando se comienza la reproducción o cuando se reinicia.
ratechange Se envía cuando cambia la velocidad de reproducción.
seeked Se envía cuando se completa la operación de búsqueda.
seeking Se envía cuando comienza la operación de búsqueda.
timeupdate El tiempo indicado por el atributo currentTime del elemento cambió.
volumechange Se envía al cambiar el volumen del audio (cuando el volumen es elegido y cuando cambia el atributo muted).
waiting Se envía cuando la operación solicitada (como la reproducción) se retrasa porque espera que se complete otra operación (como una búsqueda).
+

Fácilmente puede vigilar estos eventos, si usa un código parecido al siguiente:

+
var v = document.getElementsByTagName("video")[0];
+
+v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
+v.currentTime = 10.0;
+
+

Este ejemplo obtiene el primer elemento de video del documento y le adhiere un event listenert, esperando por el evento seeked, que se envía cuando termino una operación de búsqueda.  El listener simplemente ejecuta el método play() del elemento, que comenzará la reproducción.

+

En la línea 4, se configura el atributo currentTime a 10.0, que inicia una operación de busqueda a la marca de los 10 segundos en el archivo.  Esto genera que se envíe un evento seeking cuando comienza la operación, después un evento seeked se enviara cuando la búsqueda se haya completado.

+

En otras palabras, en este ejemplo se busca la marca de los 10 segundos en el archivo, y luego comienza la reproducción.

+

Vea también

+ +

 {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}

+

 {{ languages( { "fr": "fr/Utilisation_d'audio_et_video_dans_Firefox" } ) }}

diff --git a/files/es/eventos_arrastrar_y_soltar/index.html b/files/es/eventos_arrastrar_y_soltar/index.html new file mode 100644 index 0000000000..e0d66d46ff --- /dev/null +++ b/files/es/eventos_arrastrar_y_soltar/index.html @@ -0,0 +1,31 @@ +--- +title: Eventos arrastrar y soltar +slug: Eventos_arrastrar_y_soltar +tags: + - Firefox 3 +translation_of: Archive/Mozilla/Drag_and_drop/Drag_and_drop_events +--- +

+

Firefox 3 añade dos nuevos eventos que te permiten determinar cuándo comienzan y terminan las operaciones de arrastrar y soltar. Estos eventos son nuevos en el borrador de trabajo actual de la especificación de HTML 5. +

+
drag +
Enviado cuando comienza una operación de arrastre. +
dragend +
Enviado cuando acaba una operación de arrastre. +
+

Puedes leer más información sobre arrastrar y soltar en el artículo Arrastrar y soltar. +

Puedes ver un ejemplo de estos eventos en acción en: +

+ +

Véase también

+ +


+


+

+
+
diff --git "a/files/es/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" "b/files/es/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" new file mode 100644 index 0000000000..cdc9521967 --- /dev/null +++ "b/files/es/extensiones/actualizaci\303\263n_de_extensiones_para_firefox_4/index.html" @@ -0,0 +1,31 @@ +--- +title: Actualización de extensiones para Firefox 4 +slug: Extensiones/Actualización_de_extensiones_para_Firefox_4 +tags: + - Agregados + - Complementos + - Firefox 4 + - Gecko 2.0 + - extensiones + - para_revisar +--- +

{{ fx_minversion_header(4) }}

+

Este artículo ofrece detalles sobre aquellos cambios en Firefox 4 que pueden afectar a las extensiones existentes.

+

Cambios en XPCOM

+

Se han llevado a cabo una serie de cambios que afectan a los complementos/agregados y las aplicaciones que incluyen componentes XPCOM. Consulta los cambios de XPCOM en Gecko 2 para obtener más detalles.

+

Desempaquetado de XPI

+

Firefox 4 ya no extrae XPIs al instalar complementos/agregados. Simplemente coloca el archivo XPI en el perfil del usuario y a continuación lee los archivos chrome y otro tipos de archivos directamente del XPI. Todavía funciona un jar en el XPI, aunque haya dejado de ser necesario, para facilitarte el proceso de desarrollo o compilación. Se ha hecho así principalmente por razones de rendimiento en los SO lentos a la vez que permite mejorar la invalidación de la caché, lo cual también ayuda a los desarrolladores. Sin embargo, no todos los tipos de archivos pueden leerse ya desde el XPI, por lo tanto si tu complemento/agregado usa uno de ellos, tienes que especificar <em:unpack>  en tu install.rdf para hacer que Firefox continúe extrayendo tu XPI y usando archivos solos. De lo contrario, tu complemento/agregado fallará al intentar tener acceso a estos archivos.

+

Si tu complemento/agregado sólo contiene estos tipos de archivos, no es necesario que realices ningún cambio::

+ +

Si tu complemento/agregado contiene alguno de los siguientes tipos de archivos, tendrás que incluir <em:unpack> en el install.rdf:

+ +

Si el código de tu complemento/agregado tiene acceso a otros archivos que has empaquetado en el XPI, entonces tendrás que incluir <em:unpack> en el install.rdf o bien tendrás que realizar algunos cambios en tu código para poder admitir una instalación empaquetada. Cualquier código que usara getInstallLocation() y nsIFile tendrá que incluir em:unpack o modificarse. Puedes usar el método Addon.getResourceURI(), devolverá un {{ interface("nsIURI") }} que apunta al archivo solicitado. Si la extensión o el agregado está sin empaquetar, entonces será un file:// URI. Si la extensión o el agregado está empaquetada/o, será un jar:// URI. Puedes abrir secuencias para estas URI abriendo un canal mediante {{ interface("nsIIOService") }} que te permitirá descargar los contenidos de los archivos sin que haya que desempaquetar.

+

Se han eliminado los HWND secundarios

+

Afectará a un número muy reducido de desarrolladores. En las versiones anteriores de Firefox, los HWND se creaban en Windows para uso interno. Como parte del trabajo destinado a la mejora del rendimiento de gráficos, éstos ya no se crean.

+

Lamentablemente, las pocas extensiones que han tenido acceso y han manipulado directamente estos HWND no funcionarán en Firefox 4. Hemos colocado algunos parches para ayudar a los drivers de determinados dispositivos señaladores y al software de tecnología de ayuda (lectores de pantalla, por ejemplo). Sin embargo, hemos optado por no añadir más parches para admitir extensiones, que desde el principio no deberían haberlo hecho.

+

Si mantienes una extensión que usa componentes nativos que dependen de unos HWND que ya no existen, tendrás que actualizar tu extensión. Existen dos formas de hacer esto.

+

La primera, y la mejor, solución es dejar de acceder a los HWND y en su lugar usar características Web o XUL para implementar tus extensiones. Existen muchas características nuevas en Firefox 4 que posibilitan muchas cosas que requerían código nativo, por lo tanto ya no tendrás que hacerlo.

+

Si ves que no funciona y sigues teniendo que acceder directamente a los HWNDs, tal vez tu única solución sea escribir un plugin NPAPI para que haga el trabajo. Puede suponer mucho trabajo pero debería funcionar. Por supuesto, no te servirá si los HWND específicos que usabas ya no existen.

+

{{ languages( { "en": "en/Extensions/Updating_extensions_for_Firefox_4" } ) }}

diff --git a/files/es/extensions/bootstrapped_extensions/index.html b/files/es/extensions/bootstrapped_extensions/index.html new file mode 100644 index 0000000000..da7cdec4db --- /dev/null +++ b/files/es/extensions/bootstrapped_extensions/index.html @@ -0,0 +1,226 @@ +--- +title: Bootstrapped extensions +slug: Extensions/Bootstrapped_extensions +translation_of: Archive/Add-ons/Bootstrapped_extensions +--- +

{{ gecko_minversion_header("2.0") }}

+

Habitualmente los complementos incluyen overlays, en donde la aplicación puede montar el XUL del paquete del complemento y automaticamente aplicarlo en la interfaz de usuario. Mientras creas complementos puedes agregarlos a la interfaz de usuario facilmente, esto se refiere a la actualizaciones, instalaciones, o a deshabilitar el complemento que requiere de un reinicio.

+

Gecko 2.0 {{ geckoRelease("2.0") }} introduce bootstrapped extensions. These are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. This is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down.

+

All the application does is call into this script file; the extension is responsible for adding and removing its user interface and handling any other setup and shutdown tasks it requires.

+

This article discusses how bootstrapped extensions work.

+

As an aside, all extensions created using the Add-on SDK or Add-on Builder are bootstrapped; however, because all the bootstrapping code is generated for you, you don't really need to think about it.

+

The startup and shutdown process

+

A key feature of bootstrapped extensions is that they must be able to be started up and shut down on demand by the application. When the extension's startup() function is called, it must manually inject its user interface and other behavior into the application. Similarly, when its shutdown() function is called, it must remove anything it's added to the application, as well as all references to any of its objects.

+

There are several scenarios in which the startup() function may be called; for example:

+ +

Some examples of when the shutdown() function may be called:

+ +

Notes on modifying the application user interface

+

chrome.manifest in bootstrapped add-ons

+

You can use a chrome.manifest file in bootstrapped add-ons to:

+
    +
  1. make your add-on's content available via a chrome:// URL (using the content, locale, and skin instructions in the manifest);
    2. +
  2. replace existing chrome:// URIs with your content (using the override instruction).
    3. +
+

Not all chrome.manifest instructions are supported in bootstrapped add-ons, for example you still cannot register XUL Overlays from a bootstrapped add-on. See the chrome.manifest documentation for details.

+

In Firefox 10 and later the chrome.manifest file located in the root of the add-on's XPI (i.e. a sibling of the install.rdf) is loaded automatically. In Firefox 8 and 9 you had to load/unload the manifest manually using {{ ifmethod("nsIComponentManager", "addBootstrappedManifestLocation") }} and {{ ifmethod("nsIComponentManager", "removeBootstrappedManifestLocation") }}. This feature was unavailable in Firefox versions before 8.

+

Adding user interface manually

+

If you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to get you started.

+

You need to look up the relevant application UI elements by their ID by calling {{ domxref("document.getElementById()") }}, then manipulate them to inject your UI. For example, you can get access to the menu bar in Firefox with document.getElementById("main-menubar").

+

Be sure that at shutdown time, you remove any user interface you've added.

+

Creating a bootstrapped extension

+

To mark an extension as bootstrappable, you need to add the following element to its install manifest:

+
<em:bootstrap>true</em:bootstrap>
+

Then you need to add a bootstrap.js file that contains the required functions; this should be alongside the install.rdf file in the extension's package.

+

Backward compatibility

+

Because older versions of Firefox don't know about the bootstrap property or bootstrap.js file, it's not overly difficult to create an XPI that will work on both as a bootstrappable extension and as a traditional extension. Create your extension as a bootstrappable extension, then add the traditional overlays as well. Newer versions of Firefox will use the bootstrap.js script, ignoring the components and overlays, while older versions will use the overlays.

+

Bootstrap entry points

+

The bootstrap.js script should contain several specific functions, which are called by the browser to manage the extension. The script gets executed in a privileged sandbox, which is cached until the extension is shut down.

+

startup

+

Called when the extension needs to start itself up. This happens at application launch time or when the extension is enabled after being disabled (or after it has been shut down in order to install an update. As such, this can be called many times during the lifetime of the application.

+

This is when your add-on should inject its UI, start up any tasks it may need running, and so forth.

+
void startup(
+  data,
+  reason
+);
+
+
Parameters
+
+
+ data
+
+ A bootstrap data structure.
+
+ reason
+
+ One of the reason constants, indicating why the extension is being started up. This will be one of APP_STARTUP, ADDON_ENABLE, ADDON_INSTALL, ADDON_UPGRADE, or ADDON_DOWNGRADE.
+
+

shutdown

+

Called when the extension needs to shut itself down, such as when the application is quitting or when the extension is about to be upgraded or disabled. Any user interface that has been injected must be removed, tasks shut down, and objects disposed of.

+
void shutdown(
+  data,
+  reason
+);
+
+
Parameters
+
+
+ data
+
+ A bootstrap data structure.
+
+ reason
+
+ One of the reason constants, indicating why the extension is being shut down. This will be one of APP_SHUTDOWN, ADDON_DISABLE, ADDON_UNINSTALL, ADDON_UPGRADE, or ADDON_DOWNGRADE.
+
+

install

+

Your bootstrap script must include an install() function, which the application calls before the first call to startup() after the extension is installed, upgraded, or downgraded.

+
+ Note: This method is never called if the extension has never been started; for example, if an extension is installed but isn't compatible with the current version of the application, install() never gets called if it is uninstalled before becoming compatible. However, if the extension gets upgraded to a version that's compatible with the application, its install() function will be called at that time, before the first startup() call.
+
void install(
+  data,
+  reason
+);
+
+
Parameters
+
+
+ data
+
+ A bootstrap data structure.
+
+ reason
+
+ One of the reason constants, indicating why the extension is being installed. This will be one of ADDON_INSTALL, ADDON_UPGRADE, or ADDON_DOWNGRADE.
+
+

uninstall

+

This function is called after the last call to shutdown() before a particular version of an extension is uninstalled. This will not be called if install() was never called.

+
+ Note: It's important to keep in mind that uninstall() can be called even on extensions that are currently disabled, or are not compatible with the current application. Because of this, it's crucial that the function be implemented to gracefully handle APIs that may not be present in the application. This function will also not be called if a third-party application removes the extension while Firefox isn't running.
+
void uninstall(
+  data,
+  reason
+);
+
+
Parameters
+
+
+ data
+
+ A bootstrap data structure.
+
+ reason
+
+ One of the reason constants, indicating why the extension is being uninstalled. This will be one of ADDON_UNINSTALL, ADDON_UPGRADE, or ADDON_DOWNGRADE.
+
+

Reason constants

+

The bootstrap functions accept a reason parameter, which explains to the extension why it's being called. The reason constants are:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
APP_STARTUP1The application is starting up.
APP_SHUTDOWN2The application is shutting down.
ADDON_ENABLE3The add-on is being enabled.
ADDON_DISABLE4The add-on is being disabled. (Also sent during uninstallation)
ADDON_INSTALL5The add-on is being installed.
ADDON_UNINSTALL6The add-on is being uninstalled.
ADDON_UPGRADE7The add-on is being upgraded.
ADDON_DOWNGRADE8The add-on is being downgraded.
+

Bootstrap data

+

Each of the entry points is passed a simple data structure containing some useful information about the add-on being bootstrapped. More information about the add-on can be obtained by calling AddonManager.getAddonByID(). The data is a simple JavaScript object with the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
idstringThe ID of the add-on being bootstrapped.
versionstringThe version of the add-on being bootstrapped.
installPathnsIFileThe installation location of the add-on being bootstrapped. This may be a directory or an XPI file depending on whether the add-on is installed unpacked or not.
resourceURInsIURIA URI pointing at the root of the add-ons files, this may be a jar: or file: URI depending on whether the add-on is installed unpacked or not. {{ gecko_minversion_inline("7.0") }}
oldVersionstringThe previously installed version, if the reason is ADDON_UPGRADE or ADDON_DOWNGRADE, and the method is install or startup. {{ gecko_minversion_inline("22.0") }}
newVersionstringThe version to be installed, if the reason is ADDON_UPGRADE or ADDON_DOWNGRADE, and the method is shutdown or uninstall. {{ gecko_minversion_inline("22.0") }}
+
+

Note: An add-on may be upgraded/downgraded at application startup, in this case the startup method reason is APP_STARTUP, and the oldVersion property is not set. Also be aware that in some circumstances an add-on upgrade/downgrade may occur without the uninstall method being called.

+
+

Further reading

+ diff --git a/files/es/extensions/community/index.html b/files/es/extensions/community/index.html new file mode 100644 index 0000000000..699927cb7a --- /dev/null +++ b/files/es/extensions/community/index.html @@ -0,0 +1,19 @@ +--- +title: Community +slug: Extensions/Community +translation_of: Extensions/Community +--- +
+
Si usted sabe de listas de correo, grupos de noticias útiles, foros u otras comunidades relacionadas con el desarrollo de extensión, por favor enlace a ellos aquí.
+
+ + diff --git a/files/es/extensions/index.html b/files/es/extensions/index.html new file mode 100644 index 0000000000..40e31c78b3 --- /dev/null +++ b/files/es/extensions/index.html @@ -0,0 +1,107 @@ +--- +title: Extensiones +slug: Extensions +tags: + - Complementos + - Todas_las_Categorías + - extensiones + - para_revisar +translation_of: Mozilla/Add-ons +--- +
+ Construir una extensión
+ Explica paso a paso cómo crear una extensión para Firefox.
+
+ Las Extensiones son pequeños add-ons (complementos, agregados) que añaden nuevas funcionalidades a las aplicaciones Mozilla, tales como Firefox y Thunderbird. Las extensiones permiten añadir a dichas aplicaciones cualquier cosa, desde un botón para una barra de herramientas hasta características totalmente nuevas. Permiten personalizar completamente la aplicación para ajustarla a las necesidades de cada usuario, sin aumentar de forma significativa el tamaño de la misma.
+

Las extensiones son distintas de los Plugins, que ayudan al navegador a mostrar contenidos específicos como la reproducción de archivos multimedia. Las extensiones también son diferentes de los plugins de búsqueda, que añaden buscadores adicionales a la barra de búsquedas.

+ + + + + + + +
+

Documentación

+
General (aplicable para todas las aplicaciones Mozilla)
+
+
+ Creando una extensión
+
+ Este tutorial indica los pasos necesarios para desarrollar una extensión muy básica, la cual añadirá un texto que diga "Hello, World!" en el panel de la barra de estado de Firefox.
+
+
+
+ Preguntas frecuentes sobre Extensiones
+
+ Esta es una recopilación de respuestas breves a los problemas más frecuentes en el desarrollo de extensiones.
+
+
+
+ Construye tu propia extensión
+
+ Pequeño tutorial de introducción a XUL y a la creación de una extensión para Firefox en el wiki de Mundogeek.
+
+
+
+ Empaquetado de extensiones
+
+ Las extensiones son una forma de paquete instalable que pueden descargarse e instalarse por el usuario, o proporcionarse pre-empaquetadas con una aplicación o por un programa externo.
+
+
+
+ Crear un panel lateral en Firefox
+
+ Este artículo es un punto de partida para la creación de nuevos paneles laterales para Firefox. El objetivo es la creación de un panel lateral vacío que pueda ser utilizado como inicio para nuevas aplicaciones que se ubiquen en dichos paneles laterales.
+
+
+
+ Crear una extensión en la barra de estado
+
+ Éste es el primero de una serie de artículos que demostrarán cómo crear progresivamente extensiones cada vez más complejas para el navegador Firefox.
+
+
+
+ Crear una extensión personalizada de Firefox con el Mozilla Build System
+
+ Cómo configurar el espacio de trabajo para una extensión que usa componentes binarios.
+
+
Aplicación Específica
+

Firefox

+

Thunderbird

+

SeaMonkey Soporte de Extensiones en SeaMonkey 2

+

Firefox en Android

+

Fennec (navegador movíl)

+

Ver todos

+
+
+ 		+

Comunidad

+ +
    +
  • Foros sobre extensiones en comunidad Mozilla... en inglés.
    • +
+

{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}

+

Ver todo

+

Herramientas

+ +

Ver todo

+

Temas relacionados

+
+
+ XUL, JavaScript, XPCOM, Temas
+
+
+

Categorías

+

Interwiki Language Links

diff --git "a/files/es/extensions/m\303\263vil_clone/index.html" "b/files/es/extensions/m\303\263vil_clone/index.html" new file mode 100644 index 0000000000..37294a9df9 --- /dev/null +++ "b/files/es/extensions/m\303\263vil_clone/index.html" @@ -0,0 +1,86 @@ +--- +title: Extensiones de Firefox para Android +slug: Extensions/Móvil_clone +tags: + - API + - Browser + - Desarrolladores + - Developer + - Español + - Extensions + - Interfáz de Usuario + - Mobile + - Mozilla + - Móvil + - Spanish + - Tutoriales + - Tutorials + - UI + - desarrollo + - movil(2) +--- +

Los siguientes artículos proporcionan ayuda con el desarrollo de extensiones para Firefox en Android. Además, por favor, consulte la documentación general de las extensiones que se aplica a todas las aplicaciones de Mozilla.

+ + + + + + + + +
+

Documentación

+ +
Tutoriales
+ +
+
Tutorial
+
El desarrollo, el envasado y la instalación de un sencillo complemento para Firefox para Android.
+
Inicialización y Limpieza
+
Cómo inicializar el complemento cuando se inicia y limpiar cuando está apagado.
+
Creación de una interfaz de usuario
+
Una guía rápida para el uso de la API NativeWindow para crear componentes de interfaz de usuario.
+
Interación con el navegador
+
Una guía rápida para el uso de la API BrowserApp para acceder a las pestañas del navegador y el contenido web que alojan.
+
+ +

Consultas a la API y ejemplos de código

+ +
+
NativeWindow
+
Crea widgets nativos para la interfaz de Android.
+
BrowserApp
+
Acceso a las pestañas del navegador y al contenido que éste aloja.
+
Fragmentos de código
+
Ejemplos de códigos para tareas comunes.
+
+ 		+

Comunidad

+ +
    +
  • +

    Ver foros de desarrollo de extensiones de Mozilla.

    +
    • +
+ +

{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}

+ + + +

Herramientas

+ + + +

Ver todas...

+
+ +

Temas Relacionados

+ +
+
XUL, JavaScript, XPCOM, Temas, Desarrollo de Mozilla
+
+ +

Ver todas las páginas con el tag "Extensiones"...

diff --git a/files/es/faq_de_mercurial/index.html b/files/es/faq_de_mercurial/index.html new file mode 100644 index 0000000000..0b4b1ff536 --- /dev/null +++ b/files/es/faq_de_mercurial/index.html @@ -0,0 +1,237 @@ +--- +title: FAQ de Mercurial +slug: FAQ_de_Mercurial +tags: + - Desarrollando_Mozilla + - Mercurial + - Todas_las_Categorías +translation_of: Mercurial/Using_Mercurial +--- +

¿En qué se diferencia Mercurial de CVS?

+ + + + + + + + + + +

¿Cómo instalo Mercurial?

+

Si usas apt-get, emerge, port, o yum para instalar software, limítate a hacer lo normal. Si obtienes como resultado una versión antigua (pre-1.0 -- compruébalo con hg version), puedes actualizarlo usando easy_install como sigue (usando apt-get en este ejemplo):

+
sudo apt-get install python-setuptools python-dev build-essential
+sudo easy_install -U mercurial
+
+

En caso contrario, los paquetes binarios de Mercurial (inglés) están hechos para ti. Revisa también {{ interwiki('wikimo', 'Mercurial_on_Windows', 'wikimo:Mercurial on Windows') }} (inglés).

+

Programa de fusión

+

Tras instalar, elige un programa de fusión (inglés). En serio. Hazlo ahora. Si no lo haces, Mercurial elegirá uno por ti y te lo plantará en tus narices cuando menos lo esperes.

+

Algo razonable para hacer es configurar ui.merge=internal:merge en el archivo de configuración de Mercurial (ver más abajo), lo que hace que Mercurial intente fusionar los cambios y añadir los marcadores de conflicto (al estilo CVS) a los archivos que no pueda fusionar.

+

Puedes ver la lista de conflictos de fusión buscando "merging ... failed!" en la salida de update.

+

Configuración

+

Deberías configurar Mercurial antes de descargar el código. Tu archivo de configuración de Mercurial (~/.hgrc) debería tener al menos la siguiente configuración:

+
[ui]
+username = Tu Nombre Real <user@example.com>
+merge = tu-programa-de-fusión
+
+[diff]
+git = 1
+
+[defaults]
+diff=-p -U 8
+
+

En Windows, estos valores se pueden añadir a C:\Archivos de Programa\Mercurial\Mercurial.ini. En los sistemas tipo Unix, debería estar en tu archivo $HOME/.hgrc.

+

Puedes configurar el editor a usar para los mensajes de fusión usando la opción editor en la sección {{ mediawiki.external('ui') }} o estableciendo la variable de entorno EDITOR.

+

¿Cómo gestiona Mercurial los finales de línea?

+

La versión Windows de Mercurial no convierte automáticamente los finales de línea entre los estilos de Windows y Unix. Todos nuestros repositorios usan finales de línea Unix. Necesitamos una manera de solucionar esto en Windows, pero de momento no sabemos cómo.

+

(¿Qué tal si insertamos un control previo al commit que rechace los cambios que contienen CR con un mensaje de error informativo apropiado? Posiblemente querremos hacer excepciones para ciertos tipos de archivo (como poco, archivos binarios, por supuesto), pero podemos ajustar el control según consideremos necesario. Mercurial 1.0 añade un control estándar para esto en la extensión win32text que podríamos usar/adaptar --jwatt).

+

¿Cómo puedo...?

+

¿Cómo puedo descargar Mozilla?

+

El desarrollo principal (trunk) de Mozilla 2 está ubicado en http://hg.mozilla.org/mozilla-central/ . Revisa Código fuente de Mozilla (Mercurial) para instrucciones sobre cómo descargar el código fuente de Mozilla 2 de Mercurial.

+

¿Cómo puedo editar y actualizar archivos?

+

Puedes editar archivos a voluntad en el directorio de trabajo, exactamente igual que con CVS.

+

La orden común para actualizar un árbol es:

+
hg pull -u
+
+

No es posible actualizar sólo un directorio; tienes que actualizar el árbol entero.

+

¿Cómo detecto cambios y aplico parches en archivos?

+ + + + +

Las opciones de diff preferidas son hg diff -p -U 8 que incluye 8 líneas de contexto y muestra la función relevante del bloque. Puedes convertir estas opciones en predeterminadas en el archivo de configuración de Mercurial.

+

¿Cómo aplico cambios?

+

Configuración necesaria

+

Antes de aplicar ningún cambio, añade estas líneas a tu archivo ~/.hgrc:

+
[ui]
+username = Tu nombre <tu.email@example.com>
+
+

Para subir los cambios a mozilla-central y otros repositorios alojados en mozilla tienes que tener acceso de escritura (committer), y debes editar el archivo (tu-raíz-hg-local)/.hg/hgrc (observa que éste NO es tu ~/.hgrc) para añadir esta línea:

+
[paths]
+default = http://hg.mozilla.org/mozilla-central/
+default-push = ssh://hg.mozilla.org/mozilla-central/
+
+

También tienes que decirle a SSH qué nombre de usuario utilizar al conectar con hg.mozilla.org. Éste debería ser el nombre de usuario asociado a tu cuenta LDAP en Mozilla. Puedes hacer esto bien complicando ligeramente la ruta de aplicación por defecto, o default-push, (convirtiéndola en user@host.name@hg.mozilla.org) o bien añadiendo líneas a tu ~/.ssh/config:

+
Host hg.mozilla.org
+User usuario@host.dominio
+
+

Comprueba lo que vas a aplicar

+

A continuación, para comprobar si realmente vas a aplicar los cambios que quieres aplicar (especialmente importante al hacer fusiones y otros cambios complejos):

+
hg status
+hg diff
+
+

status muestra los archivos que han cambiado en tu directorio de trabajo comparado con lo que hay en tu repositorio (las revisiones padre, que puedes ver usando hg parents). hg diff muestra los cambios reales en esos archivos, como diffs unificados. Puedes añadir la opción -U8 para ver más contexto.

+

Aplica al repositorio local

+

Como siguiente paso, aplicarás tus cambios a tu repositorio local:

+
hg commit
+
+

Esto aplica los cambios informado por hg status. Puedes limitar la aplicación a archivos o directorios específicos usando hg commit nombres_de_archivo. Puedes aplicar los cambios en nombre de alguna otra persona usando hg commit -u "Algún otro <algun_otro@example.com>". Revisa hg help commit para obtener más detalles.

+

Comprueba lo que vas a subir

+

Antes de que subas (push), probablemente quieras comprobar qué conjuntos de cambios se subirán. Puedes hacer esto usando la orden outgoing:

+
hg outgoing
+
+

Esto te dará una lista de conjuntos de cambio que se subirán al repositorio remoto predeterminado. Añade un argumento de repositorio para ver los cambios salientes (outgoing) en ese otro repositorio.

+

Subir al repositorio central

+

Para subir esos cambios hasta el repositorio central:

+
hg push
+
+

Obtendrás un mensaje de error sin importancia cada vez que subas:

+
remote: Could not chdir to home directory : No such file or directory
+
+

Ignóralo sin más.

+

¿Cómo actúo ante "abort: push creates new remote heads!"?

+

Hagas lo que hagas, no hagas 'push -f' como sugiere el mensaje (probablemente falle de todas formas, pero ni lo intentes).

+

Alguien ha subido nuevos cambios desde tu última descarga. A continuación has aplicado tu parche localmente y estás intentando subir ese cambio al repositorio principal, el cual tiene un último cambio distinto de aquél desde el que comenzaste.

+

Hay dos cosas que puedes hacer. La más sencilla es fusionar tus cambios: ejecuta hg pull, luego hg merge. Resuelve cualquier conflicto que surja, y luego aplica la fusión resultante: hg commit -m "Merge commit for bug 123456". Luego haz hg push normalmente. Esto tiene el desafortunado efecto colateral de dejar un feo cambio por fusión en el historial de revisiones y, lo que es peor, hará tu parche más difícil de retrotraer si tuviste que resolver conflictos.

+

Sin embargo, es lo más sencillo, y es muy seguro. Hay otra manera de afrontar el problema, pero es considerablemente más arcana -- hay un arreglo/reemplazo en progreso.

+

{{ Warning("Esta aproximación funciona casi bien, pero hay algunos informes de parches que han sido tragados en varias ocasiones. Toma precauciones para hacer copias de tus parches (quizá obteniendo un diff: hg log -p -r 12345 para mostrar el parche de la revisión 12345) hasta que estés seguro de que las cosas funcionan como esperas.") }}

+

Lo más avanzado que puedes hacer es importar el cambio en mq, extraerlo de la cola, actualizar, y volver a aplicarlo de nuevo antes de subirlo:

+
% hg log -l 5
+415[tip]   d1accb6ee840   2008-04-30 09:57 -0700   vladimir
+  b=430873; fast path drawImage with a canvas as source
+414   3a3ecbb4873e   2008-04-30 09:55 -0700   vladimir
+  cvs sync
+% hg qimport -r 415
+% hg qtop
+415.diff
+% hg qpop
+Patch queue now empty
+% hg pull -u
+... varios mensajes de descarga/actualización ...
+% hg qpush
+applying 415.diff
+Now at: 415.diff
+Corrige los conflictos según sea necesario; si has corregido alguno, ejecuta hg qrefresh primero
+% hg qrm -r 415.diff
+qrm -r significa "elimina este parche de mi cola, pero conserva la revisión"
+% hg log -l 5
+verifica que el registro tiene buena pinta, con tu cambio arriba del todo
+% hg push
+
+

Si ya has usado mq para gestionar tus parches, asegúrate de que descargas/actualizas justo antes de aplicar y subir tu parche. Si tienes problemas con lo anterior, no hay nada malo en hacer una fusión simple como se ha descrito anteriormente.

+

¿Cómo veo lo que harán estas órdenes antes de ejecutarlas?

+

Si quieres ver lo que hará hg commit, ejecuta hg diff primero.

+

Si quieres ver lo que subirá hg push, ejecuta hg outgoing primero.

+

Si quieres ver lo que descargará hg pull, ejecuta hg incoming primero.

+

Estos pares de órdenes aceptan todos argumentos parecidos, y hay buenos motivos para ello. Es buena idea usarlos siempre mientras estás aprendiendo a usar Mercurial. E incluso una vez ya eres un experto, ejecutar siempre outgoing antes de push es una buena idea.

+

¿Cómo puedo personalizar el formato de los parches que crea Mercurial?

+

Edita tu archivo ~/.hgrc y añade unas líneas como éstas:

+
[defaults]
+diff=-U 8 -p
+qdiff=-U 8
+
+[diff]
+git=true
+
+

La sección {{ mediawiki.external('defaults') }} afecta a la salida predeterminada de las órdenes hg diff y hg qdiff. Las opciones se comportan igual que si estuvieran en la línea de órdenes. Prueba hg help diff para más información.

+

La sección {{ mediawiki.external('diff') }} afecta a todos los parches generados por Mercurial, incluso aquellos generados para el uso interno de Mercurial. Necesitas llevar mucho más cuidado con esto, pero se recomienda git=true. Sin él, Mercurial no puede comparar (diff) archivos binarios y no lleva un registro del bit de modo de ejecución.

+

Revertir cambios

+

Revertir todo el árbol a una revisión buena conocida

+

Es fácil, tan fácil como usar un mazo. Pero normalmente es matar moscas a cañonazos.

+
$ hg pull -u
+$ hg revert --all -r a0193d83c208       # usa aquí la id de tu revisión buena conocida
+$ hg commit                             # Sé educado, incluye la id de revisión en tu mensaje acompañando al cambio
+$ hg push
+
+

Hay una alternativa más precisa:

+

Revertir un único conjunto de cambios

+

Supón que el conjunto de cambios f8f4360bf155 ha estropeado algo.

+
$ hg pull -u
+$ hg backout f8f4360bf155               # usa la id de revisión del cambio erróneo aquí
+
+

Esto crea y aplica un nuevo conjunto de cambios que revierte todos los cambios en la revisión.

+

Si ves este mensaje:

+
the backout changeset is a new head - do not forget to merge
+
+

Esto significa que necesitas fusionar, porque tu historial ahora tiene este aspecto:

+
   TÚ ---> o  9123b7791b52 - Kaitlin Jones <kaitlin@example.net> - Backed out changeset f8f4360bf155
+           |
+TRUNK ---> | o  4e5bfb83643f - Simon Montagu <smontagu@example.org> - imported patch 435856
+           | |
+           | o  6ee23de41631 - Phil Ringnalda <philringnalda@example.com> - Bug 438526 - Opening links w
+           | |
+           | o  22baa05d0e8a - Robert O'Callahan <robert@example.org> - Remove DOM testcase from exclusi
+           | |
+           | o  c1aec2094f7e - Robert Longson <longsonr@example.com> - Bug 437448. New-style nsSVGString
+           | |
+           | o  306726089e22 - Robert Longson <longsonr@example.com> - Bug 437448. New-style nsSVGString
+           | |
+           | o  ba9b9a7c52a5 - Robert Longson <longsonr@example.com> - Bug 437448. New-style nsSVGString
+           |/
+           o  f8f4360bf155 - Robert O'Callahan <robert@example.org> - Bug 421436. Remove hack that gives
+           |
+           ⋮ (the past)
+
+

Tu conjunto de cambios de reversión está basado en una revisión antigua. No tiene los cambios más recientes.

+

Maneja esto como cualquier otra fusión. Si nunca has hecho antes una fusión, consigue ayuda (podría ser trivial o convertirse en un dolor de cabeza mayúsculo. Hay más información sobre cómo fusionar en otras partes de esta FAQ).

+

Ayuda

+

¡Ayuda, no puedo subir los cambios!

+

Si estás intentando subir los cambios y no puedes, prueba esto primero:

+
$ ssh hg.mozilla.org
+
+

Si ves un resultado como:

+
Permission denied (publickey,gssapi-with-mic).
+
+

puede deberse a las siguientes razones:

+ +

Si ves un resultado como:

+
You are not allowed to use this system, go away!
+
+

entonces necesitas cursar un bug en mozilla.org:Server Operations.

+

Debes esperar que la orden SSH te desconecte inmediatamente, ya que no se supone que debas tener acceso a ninguna shell. Puede que te devuelva como resultado:

+
Could not chdir to home directory : No such file or directory
+
+

lo que no tiene consecuencias (aunque algunas personas lo verán y otras no).

+

Si ves un resultado como:

+
ssl required
+
+

entonces necesitas configurar el valor de tu default-push correctamente.

+

Cosas que han cambiado

+ +

bonsai blame == hg annotate
+bonsai log == hg revisions
+también puedes visualizar el repositorio usando el enlace "manifest".

+ + + + +

{{ languages( { "en": "en/Mercurial_FAQ" } ) }}

diff --git a/files/es/faq_incrustando_mozilla/index.html b/files/es/faq_incrustando_mozilla/index.html new file mode 100644 index 0000000000..28f70b65ee --- /dev/null +++ b/files/es/faq_incrustando_mozilla/index.html @@ -0,0 +1,70 @@ +--- +title: FAQ Incrustando Mozilla +slug: FAQ_Incrustando_Mozilla +tags: + - Incrustando_Mozilla + - Preguntas_frecuentes_sobre_incrustación_en_Mozilla + - Todas_las_Categorías +--- +

Esta página es una recopilación de preguntas frecuentes sobre Incrustrando Mozilla . +

Lista de correo (en inglés): mozilla-embedding@mozilla.org +

+
  1. Introducción a Gecko e inscrustación +
    1. ¿Qué es Gecko? +
    2. ¿Qué es Mozilla? +
    3. ¿Qué es el GRE? +
    4. ¿Qué es XPCOM? +
    5. ¿Qué significa "incrustar" Gecko? +
    6. ¿Cuales son los términos de licencia para incrustar Gecko? +
    7. ¿Hay disponible un SDK? +
    8. ¿Cuál es la última versión? ¿Que versión debería usar? +
    9. ¿Quién está usando Gecko actualmente? +
    +
  2. Incrustando Gecko +
    1. ¿Qué archivos necesito para poder incrustar? +
    2. ¿Cómo se lleva a cabo a la distribución de la incrustación? +
    3. ¿Por qué necesito incluir archivos XPT en mi aplicación? +
    4. ¿Cómo me mantengo al tanto con los cambios en la interfaz de Gecko? +
    5. ¿Esto significa que mi compilación será compatible con todas las versiones futuras de GRE/Gecko/Mozilla? +
    6. ¿Qué plataformas son soportadas? +
    7. ¿Admite la versión incrustada protocolos seguros como HTTPS? +
    8. ¿Cómo se comunica mi aplicación con Gecko? +
    9. ¿Puedo incrustar_sin ... +
    10. Puedo incrustar el editor mozilla de HTML? +
    11. ¿Qué herramienta de creación de wigdets emplea Mozilla? +
    12. Tiene el mozilla incrustado soporte para Java? +
    13. ¿Puedo incrustar en mozilla de alguna otra manera? +
    +
  3. Cómo hago ... +
    1. ¿Cómo incrusto Gecko? +
    2. ¿Qué es un servicio? +
    3. ¿Cómo cargo una página? +
    4. ¿Cómo bloqueo una carga? +
    5. ¿Cómo vigilo/interrumpo una carga antes de que ocurra? +
    6. Cómo copio elementos al portapapeles? +
    7. ¿Cómo grabo un documento o dato en el disco? +
    8. ¿Cómo grabo/cuelgo un archivo/dato a un sitio web o un servidor ftp? +
    9. ¿Cómo sé cuando una grabación ha concluido, vigilo el progreso etc.? +
    10. ¿Cómo imprimo una página? +
    11. Cómo creo la vista preliminar de una página? +
    12. Cómo consigo que los elementos emergentes fucionen? +
    13. Necesito que el Javascript dentro de la ventana del navegador se comunique con mi cliente incrustado. Cómolohago? +
    14. Cómo establezco otras ubicaciones para archivos como components.reg? +
    15. ¿Cómo establezco otras ubicaciones para los perfiles? +
    16. ¿Cómo cambio la cadena de identificación? +
    17. ¿Cómo muestro mi propio mensaje, alertas y ventanas de aviso? +
    18. ¿Cómo obtengo el archivo DOM del objeto navegador? +
    19. ¿Qué es el docshell? +
    20. ¿Cómo establezco menus contextuales? +
    21. ¿Cómo establezco los tool tips? +
    22. ¿Cómo hago para ver tool tips para nodos con attributos ALT? +
    23. ¿Cómo hago para configurar el proxy? +
    +
  4. Problemas comunes +
    1. ¡El TestGTKEmbed no funciona! +
    2. ¿Cómo compilo MFCEmbed? +
    3. ¿Cómo depuro MFCEmbed? +
    4. ¿Por qué no funciona el FTP? +
    5. ¿Por qué es mi compilación tan grande? +
    +
diff --git a/files/es/firefox_1.5_para_desarrolladores/index.html b/files/es/firefox_1.5_para_desarrolladores/index.html new file mode 100644 index 0000000000..2372dd0f81 --- /dev/null +++ b/files/es/firefox_1.5_para_desarrolladores/index.html @@ -0,0 +1,164 @@ +--- +title: Firefox 1.5 para Desarrolladores +slug: Firefox_1.5_para_Desarrolladores +tags: + - CSS + - Complementos + - DOM + - Desarrollo_Web + - Estándares_Web + - HTML + - JavaScript + - RDF + - SVG + - Servicios_Web_XML + - Todas_las_Categorías + - XML + - XSLT + - XUL + - extensiones +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

Firefox 1.5

+ +

Se ha lanzado Firefox 1.5 y ya se puede descargar descarga. Este programa esta basado en el motor de Gecko 1.8, esta nueva versión del navegador mejora su ya magnífico soporte a los estándares web y proporciona nuevas capacidades que hacen posible una nueva generación de aplicaciones web. Algunas de las nuevas características de Firefox 1.5 son: soporte de CSS2 y CSS3 mejorado, APIs para programar gráficos en 2D por medio de <canvas>, o gráficos vectoriales con SVG 1.1, XForms y eventos XML, así como muchas mejoras en DHTML, JavaScript y DOM.

+ +

Firefox 1.5 ya puede descargarse en el siguiente link: - http://www.mozilla.com/firefox/

+ +

Herramientas para desarrolladores

+ +

Firefox 1.5 dispone de diversas herramientas y extensiones de gran utilidad para los desarrolladores.

+ + + +

Nota: Algunas extensiones no soportan actualmente Firefox 1.5, y serán automáticamente desactivadas.

+ +

Descripción

+ +

Algunas de las nuevas características en Firefox 1.5:

+ +

Desarrolladores de sitios web y aplicaciones

+ +
+
Introducción a SVG en HTML
+
Aprenda cómo usar SVG en sus páginas XHTML y a manipular imágenes con JavaScript y CSS de forma similar a como haría un script para XHTML. Vea también SVG en Firefox 1.5 para saber más sobre el estado y los problemas de la implementación de SVG en Firefox 1.5.
+
+ +
+
Dibujar gráficos con Canvas 
+
Aprenda acerca de la nueva etiqueta <canvas> y cómo dibujar gráficos y otros objetos en Firefox.
+
+ +
+
Columnas con CSS-3 
+
Aprenda sobre el soporte a la disposición automática de texto en multi-columnas según lo propuesto en CSS3.
+
+ +
+
El cache de Firefox 1.5 
+
Aprenda acerca de bfcache y cómo aumenta la velocidad de la navegación en páginas ya visitadas.
+
+ +

XUL y Desarrolladores de Extensión

+ +
+
Creando una extensión 
+
Este tutorial te llevará a través de los pasos necesarios para construir una extensión para Firefox muy básica. Ver también otro tutorial en la base de conocimiento MozillaZine, el cual demuestra las nuevas características del Administrador de Extensión en 1.5, que hace la creación de una nueva extensión incluso mas fácil.
+
+ +
+
XPCNativeWrapper 
+
XPCNativeWrapper es una forma de envolver un objeto cuyo acceso es seguro desde un código privilegiado. Puede ser usado en todas las versiones de Firefox, a pesar que su funcionamiento ha cambiado con la versión 1.5 (Gecko 1.8).
+
+ +
+
Preferencias del Sistema 
+
Aprenda acerca de los nuevos widgets, que te permiten crear ventanas de Opciones mas fácilmente y usando menos código JavaScript.
+
+ +
+
Caracteres Internacionales en XUL JavaScript 
+
Ahora los archivos XUL JavaScript pueden contener caracteres no-ASCII.
+
+ +
+
Cambios en el API tree 
+
Las interfaces para acceder a los elementos <tree> han cambiado.
+
+ +
+
Cambios en XUL en Firefox 1.5 
+
Un resumen de los cambios en Xul. Vea también Adaptando las aplicaciones XUL a Firefox 1.5.
+
+ +
+
Cambios referentes a la red 
+
 
+
+ + + +

Nuevas características para el usuario final

+ +

Experiencia de usuario

+ + + +

Seguridad y privacidad

+ + + +

Soporte a los estándares Web

+ +

Firefox es lider de la industria en el soporte a los estandares Web con constantes implementaciones multiplataforma para:

+ + + +

Firefox 1.5 soporta: los siguientes protocolos para transporte de datos (HTTP, FTP, SSL, TLS, y otros), caracteres multilingües (Unicode), múltiples formatos gráficos (GIF, JPEG, PNG, SVG, y otros) y la última versión del lenguaje para scripts más popular del mundo, JavaScript 1.6.

+ +

Cambios desde Firefox 1.0

+ +

Muchos cambios han sido introducido en Firefox desde su lanzamiento el 9 de noviembre de 2004. Firefox ha sido mejorado con muchas nuevas características y correciones de bugs. Las release-notes de Deer Park y Firefox son unas excelentes fuentes la información sobre los cambios en cada lanzamiento de Firefox.

+ + diff --git a/files/es/firefox_19_para_desarrolladores/index.html b/files/es/firefox_19_para_desarrolladores/index.html new file mode 100644 index 0000000000..bf38aea264 --- /dev/null +++ b/files/es/firefox_19_para_desarrolladores/index.html @@ -0,0 +1,66 @@ +--- +title: Firefox 19 para Desarrolladores +slug: Firefox_19_para_desarrolladores +translation_of: Mozilla/Firefox/Releases/19 +--- +
{{FirefoxSidebar}}
+ +

+

Quieres ayudar a documentar Firefox 19? Visita la lista de bugs que necesitan ser revisados e inicia!

+

+ +

Cambios para desarrolladores

+ +

JavaScript

+ + + +

CSS

+ + + +

DOM

+ + + +

XForms

+ +

Support for XForms has been removed in Firefox 19.

+ +

Changes for add-on and Mozilla developers

+ +
+

Note: A key change in Firefox 19 is that nsresult is now strongly typed. This will help make it easier to detect bugs that are caused by mishandling of return values, but may cause existing code to break if it's making incorrect assumptions in this regard.

+
+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('18')}}

diff --git a/files/es/firefox_2_para_desarrolladores/index.html b/files/es/firefox_2_para_desarrolladores/index.html new file mode 100644 index 0000000000..54da671995 --- /dev/null +++ b/files/es/firefox_2_para_desarrolladores/index.html @@ -0,0 +1,157 @@ +--- +title: Firefox 2 para desarrolladores +slug: Firefox_2_para_desarrolladores +tags: + - CSS + - Complementos + - DOM + - Desarrollo_Web + - Estándares_Web + - HTML + - JavaScript + - RDF + - SVG + - Servicios_Web_XML + - Todas_las_Categorías + - XML + - XSLT + - XUL + - extensiones +translation_of: Mozilla/Firefox/Releases/2 +--- +
{{FirefoxSidebar}}

Nuevas características para desarrolladores en Firefox 2

+ +

Firefox 2 aporta gran cantidad de funcionalidades nuevas, este artículo proporciona enlaces que describen estas nuevas capacidades.

+ +

Para desarrolladores de sitios y aplicaciones web.

+ +
+
MicroResúmenes (en)
+
Son breves recopilaciones actualizables de la información más importante en una página Web. Pueden ser proporcionados por los desarrolladores del sitio o por terceros. Cuando se añade a marcadores una página con esta funcionalidad, los usuarios pueden escoger que se muestre este microresúmen en vez del típico título estático.
+
+ +
+
Cómo crear un Microresumen
+
Tutorial sobre cómo crear un generador de microresúmenes.
+
+ +
+
Marcado XML en los microresúmenes
+
Una guía de referencia sobre el marcado XML usado para crear microresúmenes.
+
+ +
+
Soporte OpenSearch
+
Firefox 2 admite el formato de búsqueda OpenSearch.
+
+ +
+
Creación de plugins MozSearch
+
Firefox 2 soporta MozSearch, un plugin de búsqueda basado en OpenSearch, pero previsto sólo para uso interno.
+
+ +
+
Permitir sugerencias en los plugins de búsqueda
+
Cómo hacer que su plugin MozSearch ofrezca sugerencias de búsqueda en una ventana emergente cuando usamos la barra de búsqueda.
+
+ +
+
Novedades en JavaScript 1.7
+
Firefox 2 soporta JavaScript 1.7, que incluye nuevas características como let, asignación desestructurada, generadores e iteradores, y "array comprehensions".
+
+ +
+
WHATWG Sesiones del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
+
Las sesiones del lado cliente y el almacenamiento continuo permiten que las aplicaciones web puedan almacenar datos estructurados en el lado del cliente.
+
+ +
+
SVG en Firefox
+
Firefox 2 mejora el soporte a Gráficos Vectoriales Escalables (SVG), implementando el elemento <textPath> y aumentando el número de atributos soportados.
+
+ +
+
Control de la corrección ortográfica en formularios HTML
+
Firefox 2 incluye soporte para la revisión ortográfica en línea de los campos y áreas de texto. Este artículo describe cómo escribir HTML para activar o desactivar la revisión ortográfica en los elementos del formulario de manera individual.
+
+ +
+
Seguridad en Firefox 2
+
Firefox 2 cambia los protocolos de seguridad que están activos por defecto.
+
+ +

Para desarrolladores XUL y de extensiones

+ +
+
API de restauración de sesión
+
Aporta métodos para poder guardar y restaurar entre sesiones en Firefox.
+
+ +
+
API de acceso a canales
+
API que permite al desarrollador tener acceso y parsear canales Atom y RSS.
+
+ +
+
SAX
+
API de parseo basado en eventos XML.
+
+ +
+
Instalación de motores de búsqueda desde páginas web
+
Un código JavaScript puede indicarle a Firefox cómo instalar el plugin de un nuevo motor de búsqueda escrito en formato Sherlock u OpenSearch.
+
+ +
+
Añadir datos para la protección anti-phishing
+
Es posible aumentar la protección anti-phishing de Firefox añadiendo datos adicionales del proveedor para un sistema de navegación seguro.
+
+ +
+
Añadir lectores de canales a Firefox
+
Puedes añadir más lectores de canales a Firefox, ya sean webs o aplicaciones.
+
+ +
+
Almacenamiento
+
Firefox 2 presenta mozStorage, una arquitectura de base de datos basada en sqlite.
+
+ +
+
Cambios del tema en Firefox 2
+
Comenta los cambios necesarios para actualizar temas existentes para que funcionen en Firefox 2.
+
+ +

Nuevas características para usuarios finales

+ +

Firefox 2.0 proporciona una versión mejorada de la limpia interfaz que ofrecía en versiones anteriores. Con mejoras de seguridad para que tu experiencia en línea sea más segura y práctica que nunca.

+ +

Experiencia de usuario

+ + + +

Seguridad y privacidad

+ + + +

Vea también

+ + + +

Categorías

+ +

Interwiki links

+ +

{{ languages( { "ca": "ca/Firefox_2_per_a_desenvolupadors", "en": "en/Firefox_2_for_developers", "fr": "fr/Firefox_2_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_2.0_per_Sviluppatori", "ja": "ja/Firefox_2_for_developers", "ko": "ko/Firefox_2_for_developers", "pl": "pl/Firefox_2_dla_programist\u00f3w", "pt": "pt/Firefox_2_para_desenvolvedores", "zh-tw": "zh_tw/Firefox_2_\u6280\u8853\u6587\u4ef6" } ) }}

diff --git a/files/es/firefox_3.5_para_desarrolladores/index.html b/files/es/firefox_3.5_para_desarrolladores/index.html new file mode 100644 index 0000000000..5043206fe8 --- /dev/null +++ b/files/es/firefox_3.5_para_desarrolladores/index.html @@ -0,0 +1,231 @@ +--- +title: Firefox 3.5 para desarrolladores +slug: Firefox_3.5_para_desarrolladores +translation_of: Mozilla/Firefox/Releases/3.5 +--- +
{{FirefoxSidebar}}

Firefox 3.5 implementa nuevas funcionalidades, además de agregar y mejorar el funcionamiento de una amplia variedad de estándares web. Este artículo ofrece una extensa lista con enlaces a artículos que explican estas grandes mejoras.

+ +

Nuevas funcionalidades para desarrolladores en Firefox 3.5

+ +

Para desarrolladores de sitios y aplicaciones web

+ +

Funciones de HTML 5

+ +
+
Usar audio y video en Firefox
+
Firefox 3.5 implementa los elementos  audio y video de HTML 5.
+
Recursos sin conexión en Firefox
+
Firefox 3.5 implementa de forma completa la especificación para recursos sin conexión de HTML 5.
+
Arrastrar y soltar (Drag and drop)
+
La API para arrastrar y soltar de HTML 5 permite que el usuario pueda arrastrar y soltar objetos entre sitios web. También permite una API más simple para el uso por parte de las extensiones o aplicaciones basadas en la plataforma Mozilla.
+
+ +

Nuevas características de CSS implementadas

+ +
+
Tipografías descargables
+
La nueva regla {{cssxref("@font-face")}} permite a las páginas web disponer de tipografías descargables, para que los sitios web puedan ser visualizados como el autor lo pretende.
+
Pedidos de CSS según el medio
+
Firefox 3.5 implementa esta característica que permite al autor del sitio web tener más control sobre el archivo CSS que cada dispositivo va a recibir según las características del mismo.
+
{{cssxref(":before")}} y {{cssxref(":after")}} actualizados a CSS 2.1
+
Los pseudo-elementos :before y :after han sido actualizados para implementar por completo las características de CSS 2.1, añadiendo la posibilidad de usar position, float, list-style-* y algunas propiedades de display.
+
opacity
+
La extensión al CSS -moz-opacity fue eliminada para implementar la propiedad estandar opacity.
+
text-shadow
+
La propiedad text-shadow, que permite especificar efectos de sombra para textos y decoraciones del texto, está implementada.
+
word-wrap
+
Esta propiedad permite especificar cuando las líneas deben o no ser cortadas entre palabras para prevenir el overflow cuando una línea que no puede ser cortada es demasiado larga para entrar en una sola línea.
+
-moz-box-shadow
+
-moz-border-image
+
-moz-column-rule
+
-moz-column-rule-width
+
-moz-column-rule-style
+
-moz-column-rule-color
+
Firefox 3.5 añade la posibilidad de usar estas extensiones al CSS de Mozilla.
+
The -moz-nativehyperlinktext color value
+
Este nuevo valor del color representa el predefinido por el sistema del usuario para los hipervínculos.
+
Las nuevas propiedades -moz-window-shadow y -moz-system-metric(mac-graphite-theme)
+
Estas nuevas propiedades de CSS fueron añadidas para facilitar la creación de temas.
+
Nuevos valores para -moz-appearance
+
Los valores -moz-win-glass y -moz-mac-unified-toolbar se agregaron a -moz-appearance.
+
Usar transformaciones CSS
+
Firefox 3.5 implementa las transformaciones CSS.  Mirá -moz-transform y -moz-transform-origin para saber más detalles.
+
:nth-child
+
:nth-last-child
+
:nth-of-type
+
:nth-last-of-type
+
:first-of-type
+
:last-of-type
+
:only-of-type
+
Estos selectores pueden ser usados en Firefox 3.5.
+
+ +

Nuevas funcionalidades del DOM

+ +
+
localStorage
+
Firefox 3.5 implementa el uso de la propiedad localStorage del Web Storage, que permite que las aplicaciones web guarden datos en la computadora del cliente.
+
Usar DOM workers
+
Firefox 3.5 implementa los trabajadores (workers) del DOM lo que permite el multi-threading en las aplicaciones web.
+
Usar geolocalización
+
Firefox 3.5 implementa la API de geolocalización, que permite que las aplicaciones web obtengan información sobre la ubicación actual del usuario si unu proveedor de ese servicio está instalado y habilitado.
+
Usar JSON en Firefox
+
Posibilidad de usar JSON en el DOM.
+
Localizar elementos del DOM con selectores
+
El API de selectores permite pedirle a un documento que localice los elementos que coincidan con una regla seleccionada.
+
El objeto NodeIterator
+
El objeto NodeIterator permite recorrer la lista de nodos en un árbol del DOM.
+
El evento MozAfterPaint
+
Este nuevo evento del DOM es lanzado después de actualizar partes de una ventana.
+
El evento MozMousePixelScroll
+
Este nuevo evento del DOM permite detectar el desplazamiento con la rueda del ratón/mouse en lugar de los eventos basados en la línea de desplazamiento.
+
+ +

Nuevas funcionalidades JavaScript

+ +
+
Nuevo en JavaScript 1.8.1
+
Una introducción a todos los cambios de JavaScript 1.8.1.
+
Object.getPrototypeOf()
+
Este nuevo método retorna el prototipo de un objeto especificado.
+
Uso de JSON nativo
+
Firefox 3.5 tiene soporte para JSON nativo.
+
Nuevos métodos trim en el objeto String
+
El objeto String tiene ahora los métodos trim(), trimLeft(), y trimRight() .
+
+ +

Networking

+ +
+
Controles de acceso cross-site para HTTP
+
En Firefox 3.5, es ahora posible en las peticiones HTTP, incluyendo aquellas hechas por XMLHttpRequest, trabajar entre dominios si el servidor lo permite.
+
Eventos de progreso para XMLHttpRequest
+
Ahora se ofrecen eventos de progreso para que las extensiones puedan monitorizar el progreso de las peticiones.
+
Soporte XMLHttpRequest síncrono mejorado
+
DOM Timeout y Input Events son ahora soportados durante un XMLHttpRequest síncrono.
+
Control de prefetch de DNS
+
Firefox 3.5 ofrece prefetch de DNS, por el que resuelve nombres de dominio con anticipación para links incluidos en la página actual, para ahorrar tiempo cuando los enlaces son realmente clickados. Este artículo describe cómo puedes optimizar tu sitio web para desactivar el prefetch, o ajustar cómo opera el prefetch.
+
+ +

Nuevas funcionalidades Canvas

+ +
+
API de texto HTML 5 para elementos canvas
+
Los elementos Canvas ahora soportan la API de texto HTML 5.
+
Efectos de sombra en un canvas
+
Los efectos de sombra de Canvas son ahora soportados.
+
createImageData()
+
El método canvas createImageData() es ahora soportado, permitiendo al código crear específicamente un objeto ImageData en lugar de necesitar que sea hecho automáticamente. Esto puede mejorar el rendimiento de otros métodos ImageData evitando que deban crear el objeto.
+
Atributo moz-opaque
+
Añadido el atributo DOM moz-opaque, que permite al canvas saber si la translucencia será un factor. Si el canvas sabe que no hay translucencia, el rendimiento de pintado puede ser optimizado.
+
+ +

Nuevas funcionalidades SVG

+ +
+
Aplicar efectos SVG al contenido HTML
+
Ahora puedes aplicar efectos SVG a contenido HTML y XHTML; este artículo describe cómo.
+
+ +

Otras nuevas funcionalidades

+ +
+
Corrección de color ICC en Firefox
+
Firefox 3.5 ahora soporta corrección de color ICC para imágenes etiquetadas.
+
El atributo defer es ahora soportado en elementos script
+
Este atributo indica al navegador que puede escoger continuar parseando y renderizando la página sin esperar a que el script termine de ejecutarse.
+
+ +

Otras mejoras

+ + + +

For XUL and add-on developers

+ +

If you're an extension developer, you should start by reading Updating extensions for Firefox 3.5, which offers a helpful overview of what changes may affect your extension.

+ +

New components and functionality

+ +
+
Supporting private browsing mode
+
Firefox 3.5 offers Private Browsing mode, which doesn't record the user's activities.  Extensions may support private browsing following the guidelines offered by this article.
+
Security changes in Firefox 3.5
+
This article covers security-related changes in Firefox 3.5.
+
Theme changes in Firefox 3.5
+
This article covers theme-related changes in Firefox 3.5.
+
Monitoring WiFi access points
+
Code with UniversalXPConnect privileges can now monitor the list of available access points, getting information on their SSIDs, MAC addresses, and signal strength.  This can be used in tandem with Geolocation to offer WiFi-based location service.
+
+ +

Notable changes and improvements

+ + + +

New features for end users

+ +

User experience

+ +
+
Location aware browsing
+
If you choose, you may allow Firefox 3.5 to share information about your current location with web sites.  Firefox 3.5 can use information about the network you're connected to to share your location. Of course, it asks for your permission before doing so, to ensure your privacy.
+
Open audio and video support
+
Firefox 3.5 supports embedded video and audio using the open Ogg format, as well as WAV for audio. No plugins, no confusing error messages about needing to install something or other that turns out not to be available on your platform anyway.
+
Local data storage
+
Web applications can now use Web Storage's local storage capabilities to store data on your computer.  This is great for anything from site preferences to more complex data.
+
+ +

Security and privacy

+ +
+
Private Browsing
+
Need to use someone else's computer? Switch on Private Browsing mode and nothing will be recorded about your session, including cookies, history, and any other potentially private information.
+
Better privacy controls
+
The Privacy preference pane has been completely redesigned to offer users more control over their private information. Users can choose to retain or discard anything including history information, cookies, downloads, and form field information.  In addition, users can specify whether or not to include history and/or bookmarks in the location bar's automated suggestions, so you can keep private web addresses from popping up unexpectedly while typing in the location bar.
+
+ +

Performance

+ +
+
Faster JavaScript performance
+
JavaScript, the "J" in "AJAX," is sped up dramatically in Firefox 3.5 with the new TraceMonkey JavaScript engine.  Web applications are much faster than in Firefox 3.
+
Faster page rendering
+
Web content draws faster in Firefox 3.5, thanks to technologies such as "speculative parsing." Your users don't need to know what it means, other than "it makes things draw faster."
+
+ +

See also

+ + diff --git a/files/es/firefox_3_para_desarrolladores/index.html b/files/es/firefox_3_para_desarrolladores/index.html new file mode 100644 index 0000000000..1456bfb969 --- /dev/null +++ b/files/es/firefox_3_para_desarrolladores/index.html @@ -0,0 +1,283 @@ +--- +title: Firefox 3 para desarrolladores +slug: Firefox_3_para_desarrolladores +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3 +--- +
{{FirefoxSidebar}}

Si eres un desarrollador que intenta ponerse al día con todas las nuevas características de Firefox 3, este es el lugar perfecto para empezar. Este artículo proporciona una lista de nuevos artículos que tratan sobre las características añadidas a Firefox 3. Aunque no cubre necesariamente todos los pequeños cambios, te ayudará a conocer mejor las mejoras más importantes.

+ +

 

+ +

Características nuevas para desarrolladores en Firefox 3

+ +

Para desarrolladores de sitios y aplicaciones web

+ +
+
Actualizar aplicaciones web para Firefox 3
+
Información sobre los cambios que se podrían necesitar para realizar un sitio o aplicación web y sacarle mayor ventaja a las nuevas características de Firefox 3.
+
+ +
+
Eventos online y offline
+
Firefox 3 implementa los eventos conectado y desconectado definidos por WHATWG, que permiten a aplicaciones y extensiones descubrir si una conexión activa de internet es disponible, además de detectar cuando hay conexión o desconexión.
+
+ +
+
Manipuladores de protocolo web
+
Ahora se puede registrar una aplicación web como manipulador de protocolo con el método navigator.registerProtocolHandler().
+
+ +
+
Dibujar texto usando canvas
+
Ahora se puede dibujar texto en canvas con una API no estándar implementada por Firefox 3.
+
+ +
+
Gestión de transformaciones en canvas
+
Firefox 3 administra los métodos transform() y setTransform() en canvases (lienzos).
+
+ +
+
El uso de microformatos
+
Firefox 3 tiene APIs que permiten trabajar con microformatos.
+
+ +

;Hojas de estilo alternativas :Firefox 3 implementa modelos alternativos de hojas de estilo API de objeto CSS.

+ +
+
Eventos arrastrar y soltar
+
Firefox 3 implementa nuevos eventos que se envían al nodo de origen cuando la operación de arrastre comienza y termina.
+
+ +
+
Gestión del foco en HTML
+
Se han implementado los atributos activeElement y hasFocus de la nueva especificación HTML 5.
+
+ +
+
Recursos en modo desconectado en Firefox
+
Firefox 3 permite ahora que las aplicaciones web soliciten que recursos puedan ser puestos en cache para ser ejecutados en modo desconectado.
+
+ +
+
Mejoras CSS en Firefox 3
+
Firefox 3 ofrece un número de mejoras en su implementación de CSS.
+
+ +
+
Mejoras DOM en Firefox 3
+
Firefox 3 ofrece mejoras en la implementación de DOM, incluyendo la gestión de varias extensiones de Internet Explorer al DOM.
+
+ +
+
Implementación de JavaScript 1.8
+
Firefox 3 ofrece JavaScript 1.8.
+
+ +
+
Implementación de EXSLT
+
Firefox 3 permite la utilización de una parte importante de las extensiones EXSLT y XSLT.
+
+ +
+
Mejoras SVG en Firefox 3
+
La implementación a SVG en Firefox 3 ha sido mejorada de manera significante, con muchos nuevos filtros, elementos, atributos y otras mejoras.
+
+ +
+
Gráficos PNG animados
+
Firefox 3 administra las imágenes animadas en formato PNG (APNG).
+
+ +

Para desarrolladores de XUL y de extensiones

+ +
Cambios y mejoras notables
+ +
+
Actualizar extensiones para Firefox 3
+
Una guía con las cosas que hay que hacer para poner al día una extensión para que trabaje con Firefox 3.
+
+ +
+
Mejoras XUL en Firefox 3
+
Firefox 3 ofrece varios nuevos elementos XUL, incluyendo escaleras deslizables, selectores de hora y fecha, y botones de incremento.
+
+ +
+
Plantillas en Firefox 3
+
Las plantillas han sido notablemente mejoradas en Firefox 3. Las mejoras más importantes es la posibilidad de usar procesadores de solicitud personalizada para permitir el uso de otras fuentes de datos que RDF.
+
+ +
+
Asegurando las actualizaciones
+
Para proporcionar actualizaciones más seguras de los complementos a los usuarios, ahora los complementos requieren proporcionar un método seguro para obtener las actualizaciones antes de ser instaladas. Los complementos alojados en AMO lo proporcionan automáticamente.
+
+ +
+
Migrar y usar el catálogo
+
Un artículo sobre como migrar una extensión existente para utilizar el API de catálogo.
+
+ +
+
Mejoras en el gestor de descargas en Firefox 3
+
El administrador de descargas de Firefox 3 contiene nuevas y mejoradas APIs, incluyendo la implementación de múltiples escuchas de progreso.
+
+ +
+
Uso de nsILoginManager
+
El administrador de contraseñas ha sido reemplazado por el nuevo Login Manager.
+
+ +
+
Integración de los vínculos XBL
+
Ya es posible utilizar el protocolo URL data: para integrar directamente los vínculos XBL en lugar de tener que colocarlos en un archivo XML por separado.
+
+ +
+
Traducir las descripciones de las extensiones
+
Firefox 3 ofrece un nuevo método localizando add-on metadata. Esto permite que los detalles localizados estén disponibles tan pronto como los add-on han sido descargados, al igual que cuando el add-on sea desinstalado.
+
+ +
+
Localización y plurales
+
Firefox 3 dispone del nuevo módulo PluralForm, el cual sirve para ayudar a poner correctamente en plural las palabras según el idioma local.
+
+ +
+
Cambios en los temas de Firefox 3
+
Notas e información para quienes quisiera crear temas para Firefox 3.
+
+ +
Nuevos componentes y funcionalidades
+ +
+
Biblioteca FUEL
+
FUEL sirve para facilitar la productividad de los desarrolladores de extensiones, reduciendo algunas formalidades de XPCOM y colocando algunas ideas "modernas" en JavaScript.
+
+ +
+
Catálogo
+
Las APIS del historial y de los marcadores han sido remplazadas completamente por la nueva API del Catálogo.
+
+ +
+
Servicio idle
+
Firefox 3 ofrece la nueva interfaz {{ Interface("nsIIdleService") }}, la cual permite a las extensiones determinar cuánto tiempo ha pasado desde que el usuario pulso una tecla o movió el ratón por última vez.
+
+ +
+
El convertidor ZIP
+
La nueva interfaz nsIZipWriter permite a las extensiones crear archivos ZIP.
+
+ +
+
Zoom a página completa
+
Firefox 3 mejora la experiencia de usuario ofreciendo zoom a página completa además de zoom de solo texto.
+
+ +
+
El colector de ciclo XPCOM
+
El código XPCOM puede beneficiarse del colector de ciclo, el cual ayuda a asegurar que la memoria no utilizada es liberada y evitar fugas de memoria.
+
+ +
+
El administrador de hilos
+
Firefox 3 proporciona la nueva interfaz {{ Interface("nsIThreadManager") }}, así como otras nuevas interfaces para hilos y eventos de hilos, los cuales proporcionan una manera apropiada de crear y administrar hilos en tu código.
+
+ +
+
Módulos JavaScript
+
Firefox 3 ofrece un nuevo mecanismo de código compartido que te permite crear módulos facilmente en JavaScript que pueden ser cargados por extensiones y aplicaciones para su uso, muy parecido a las librerías compartidas.
+
+ +
+
La interfaz nsIJSON
+
Firefox 3 ofrece la nueva interface {{ Interface("nsIJSON") }}, which offers high-performance encoding and decoding of JSON strings.
+
+ +
+
La interfaz nsIParentalControlsService
+
Ahora Firefox 3 implementa las características del control parental de Microsoft Windows Vista, y permite al cñodigo interactuar con él.
+
+ +
+
Usar las preferencias de contenido
+
Firefox 3 incluye un nuevo servicio para obtener y fijar configuraciones especificas para cada sitio web que pueden usar tanto las extensiones como el código principal para llevar un registro de las preferencias de usuarios en sitios individuales.
+
+ +
+
Vigilancia de plugins
+
Está disponible un nuevo componente del sistema de plugins para controlar el tiempo que les toma a los plugins (como por ejemplo: Macromedia Flash) ejecutar sus llamadas.
+
+ +

Bugs ya solucionados

+ +
+
Bugs importantes solucionados en Firefox 3
+
+ +

Nuevas características para el usuario final

+ +

Mejoras para el usuario

+ + + +

Seguridad y privacidad

+ + + +

Rendimiento

+ + + +

Lecturas relacionadas

+ + + +

 

+ +

{{ languages( { "en": "en/Firefox_3_for_developers", "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "ko": "ko/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "pt": "pt/Firefox_3_para_desenvolvedores", "zh-tw": "zh_tw/Firefox_3_for_developers" } ) }}

diff --git a/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html b/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html new file mode 100644 index 0000000000..1261f4d562 --- /dev/null +++ b/files/es/firefox_addons_developer_guide/introduction_to_extensions/index.html @@ -0,0 +1,159 @@ +--- +title: 'Capítulo 1: Introducción a las extensiones.' +slug: Firefox_addons_developer_guide/Introduction_to_Extensions +--- +
+ {{ Draft() }}
+

{{ PreviousNext("Firefox_addons_developer_guide", "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions") }}

+
+ Note: If you want contribute to this document please following guidelines from the Contribute page.
+

Este documento fue escrito por Hideyuki Emura y publicado originalmente en japonés para el Firefox Developers Conference Summer 2007. Emura-san es un coautor de Firefox 3 Hacks (O'Reilly Japan, 2008.)

+

Introducción

+

Si estás leyendo esta guía, probablemente has utilizado firefox antes. Tal vez la primera vez que viste firefox, es posible que te hayas sorprendido al ver que tiene una estructurara mucho más simple que otros navegadores con muchas funciones, como Opera o Safari.

+

¿Qué características son consideradas estándar para los navegadores en estos días? Tal vez cosas como controles de pestañas, movimientos del ratón, barras de herramientas y botones, un lector de feed, integración con una variedad de aplicaciones web, o herramientas sofisticadas para ayudar al diseño web. Pero nosotros no teníamos la intención de crear un navegador todo-en uno que pueda satisfacer a todos

+

En cambio, Firefox puede soportar estas características a través de las extensiones. El núcleo del navegador se limita a las funciones básicas, algo que puede hacer sentirse cómodo a un principiante, pero los usuarios que quieren algo más pueden instalar las extensiones.

+

Acerca de las extensiones

+

Administrador de complementos

+

El administrador de complementos de firefox es una excelente manera para manejar las extensiones y es muy fácil de usar.

+

+

El Administrador de complementos se encarga de las siguientes tareas:

+ +

Características del entorno de desarrollo

+

Inicialmente, no había suficiente documentación disponible, y los desarrolladores de extensiones quedaron en gran medida a su suerte; sin embargo, ahora hay un cuantioso depósito de conocimiento.

+

Debido a que Firefox y sus extensiones están diseñadas para soportar multiples idiomas, excelentes extensiones vienen de todo el mundo, y pueden ser localizadas rápidamente por cualquier persona que esté interesada.

+

Ésto facilita el uso y el desarrollo de extensiones; este hecho, combinado con la popularidad creciente de firefox, ha creado un búcle de realimentación positiva, y un crecimiento explosivo del número de usuarios  y desarrolladores de las extensiones. Hay ahora más de 7000 extensiones y temas publicados en la página web de complementos de firefox. (https://addons.mozilla.org).

+

¿Qué podemos hacer con las extensiones?

+

Echemos un vistazo a que características pueden añadir las extensiones y algunos ejemplos reales de ellas.

+

Extensiones solo con una función.

+

{{ TODO("Update this") }}.

+

Éstas son extensiones relativamente simples que añaden solo una función.

+
+
+ Enlace de texto
+
+ Makes it so that double-clicking on an unlinked URL follows that URL.
+
+ Botón para abrir pestañas cerradas
+
+ Añade un botón en la barra de herramientas para volver a abrir las pestañas cerradas más recientemente en el menú del historial.
+
+
+
+ 1211576231.png
+
+
+
+ Barra de la dirección
+
+
+ Separa el dominio y la ruta de acceso de una URL para facilitar su lectura en la barra de direcciones.
+
+
+ locationbar.png
+
+

Feature enhancing extensions

+

{{ TODO("Update this") }}.

+

These extensions enhance features that already exist in Firefox.

+
+
+ Tab Mix Plus
+
+ Offers detailed tab-related settings.
+
+ PrefBar
+
+ Gives access to numerous preferences from the toolbar.PrefBar.png
+
+ NoScript
+
+ Enables and disables JavaScript execution on a site-by-site basis.
+
+

Web application integration extensions

+

{{ TODO("Update this") }}.

+

The use the APIs of certain web applications to provide certain pieces of information.

+

Forecastfox.png

+

New feature extensions

+

{{ TODO("Update this") }}.

+

Extensions can add completely new features to Firefox. This class of extension requires a greater level of knowledge and programming ability.

+
+
+ GreaseMonkey
+
+ UserChrome.js
+
+ Both of these provide an environment for running user scripts (JavaScript) in Firefox itself, where the scripts can target specific websites.
+
+
+
+ Adblock Plus
+
+ Blocks the display of unwanted advertisements on web pages.
+
+ All-in-One Gestures
+
+ Adds mouse-gesture functionality.
+
+

Application level extensions

+

{{ TODO("Update this") }}.

+

These are sophisticated extensions that can be considered full-scale applications in their own right, essentially using Firefox as the development platform.

+

Firebug.gif

+

One-trick gag extensions

+

{{ TODO("Update this") }}.

+

There are a number of one-trick gag extensions that aren’t very useful.

+

Shiitake Mushroom (1).png

+

This is a very brief survey of a few extensions, but there are many other unique extensions available.

+

Table 1: Advanced customization methods for Firefox

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Customization MethodDoes it work for web sites?Does it work for Firefox?
User style sheets (change appearance through CSS) +

Yes; you can change the userContent.css file, or use the Stylish extension.

+ 		+

Yes; you can change the userChrome.css file, or use the Stylish extension.

+
User scripts (change appearance and functionality through JavaScript) +

Yes; you can use the GreaseMonkey extension or "bookmarklets."

+ 		+

Yes; you can change userChrome.js to add functionality through JavaScript.

+
Extensions (these can do anything)YesYes
Theming (this changes the look of the browser)NoYes
+

Vamos a construir una extensión

+

La tabla 1 muestra varias opciones de personalización disponibles para un usuario en firefox. Los usuarios tienen opciones de personalicación Flexibles, usando CSS en las hojas de estilo del usuario y javaScript/DOM en los script del usuario.

+

En adición a CSS y Javascript, las extensiones pueden tomar ventajas de las tecnologías XUL y XPCOM para características más sofisticadas. Temas, los cuales pueden alterar la apariencia de firefox, son un tipo de complemento.

+

Para crear una extension, necesitas una idea y sólo un poco de abilidad programando. Los siguientes capítulos explicaremos con detalles las tecnicas para escribir extensiones.

+
+
+ 1 One of the authors of this special edition, Piro, is world-famous as one of the original developers.
+
+

{{ PreviousNext("Firefox_addons_developer_guide", "Firefox_addons_developer_guide/Technologies_used_in_developing_extensions") }}

diff --git a/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html b/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html new file mode 100644 index 0000000000..92188c9df8 --- /dev/null +++ b/files/es/firefox_addons_developer_guide/technologies_used_in_developing_extensions/index.html @@ -0,0 +1,78 @@ +--- +title: 'Chapter 2: Technologies used in developing extensions' +slug: Firefox_addons_developer_guide/Technologies_used_in_developing_extensions +--- +

{{ Draft() }} {{ PreviousNext("Firefox addons developer guide/Introduction to Extensions", "Firefox addons developer guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI") }}

+

This document was authored by Hiroshi Shimoda of Clear Code Inc. and was originally published in Japanese for the Firefox Developers Conference Summer 2007. Shimoda-san is a co-author of Firefox 3 Hacks (O'Reilly Japan, 2008).

+

Antes de sumergirse en una explicación, rápidamente nos introduciremos en las tecnologías utilizadas para desarrollar extensiones en firefox. Nosotros también conoceremos los conocimientos míminos que se necesitan para desarrollar una extensión para firefox.

+

Tecnologías utilizadas para desarrollar extensiones para Firefox

+

Firefox y sus extensiones están ambos basados en el desarrollo con tecnologías ampliamente usadas en la web. Su estructura es similar a la de HTML dynamico usado en algunas páginas webs, or el HTML de aplicaciones usado en Windows. Si tienes experiencia desarrollando HTML dinamico, Tú probablemente lo encontrarás relativamente fácil desarrollar una extensión para Firefox.

+

El rol de cada tecnología

+

Firefox está construido en gran parte con cuatro tecnologías: XUL, CSS, Javascript y XPCOM. Las extensiones también están construidas usando esas cuatros tecnologías.

+

Figure 1: rol de cada tecnología en firefox.

+

+

En addition a esas tecnologías, el desarrollo de una extensión requerira que aprendas sobre como otorgar priviligos para vence priviligios de restricciones de seguridad en el código que escribistes, y como insertar tu codigo dentro de Firefox UI. Estos errores son discutidos en el Capítulo 5.

+

Conocimientos básicos requeridos

+

En el interest de brevedad, Vamos a omitir explicaciones de tecnologías, y nos enfocaremos en la introducción de nuevas tecnologías que necesitarás entender para desarrollar para Firefox. Asumimos que tu tienes esperiencia desarrollando con HTML dinamico, así como de los temas a continuación.
+ Para más información sobre estas tecnologías, por favor consulte otras fuentes.

+ +

XML: A text-based structural language

+

 XML, siglas en inglés de eXtensible Markup Language ('lenguaje de marcas extensible'), es un lenguaje de marcas desarrollado por el World Wide Web Consortium (W3C). Deriva del lenguaje SGML y permite definir la gramática de lenguajes específicos (de la misma manera que HTML es a su vez un lenguaje definido por SGML) para estructurar documentos grandes. A diferencia de otros lenguajes XML da soporte a bases de datos, siendo útil cuando varias aplicaciones se deben comunicar entre sí o integrar información. (Bases de datos Silberschatz).

+

Listing 1: XML syntax

+
<elementname someattribute="somevalue">
+  content
+</elementname>
+

As shown in Listing 1, XML uses elements, which consist of an opening tag, a closing tag, and content.

+
+ Note: Elements that take no content can be expressed in compact form as <elementname/>.
+

An element can include other elements as well as text in its content, and all information is structured as a tree. As in all trees, elements can have children (elements contained within them) and parents (elements that contain them). Attributes can also be added to opening tags, each with a value.

+

As the "extensible" part of XML implies, elements from various XML-based languages such as XHTML and SVG can be interspersed in one another as a means to extend the language. All elements can carry a "namespace URI" identifier, which is unique for each language. For example, even though XHTML and SVG have elements with the same name, these can be distinguished. The namespace URI for XHTML is "http://www.w3.org/1999/xhtml" ; for SVG is it "http://www.w3.org/2000/svg".

+

CSS: A style language to alter the display of XML documents

+

Like XML, Cascading Style Sheets (CSS) is a technical specification established by the W3C; it is a style-description language defining the display of data marked up in XML and HTML. As shown in Listing 1, it has an extremely simple syntax. By separating the structure of the data, expressed through HTML or XML, and the display style, indicated by CSS, data can be reused better than it is when structural and stylistic markup are both embedded in HTML.

+

There are three CSS specifications (Level 1 through Level 3), with progressively powerful features. The Gecko rendering engine handles nearly all of CSS Level 2 and some of CSS Level 3.

+

Listing 2: CSS code sample

+
body {
+  color: black;
+  background-color: white;
+}
+p {
+  margin-bottom: 1em;
+  text-indent: 1em;
+}
+
+

JavaScript: The world's most misunderstood language

+

JavaScript is a scripting language first developed in the 1990s, at which time it was created as a way to add dynamic features to web pages. Because it was often used at first to display pop-up windows, marching text in status bars, or in other ways that made web pages less useful to users, the language acquired a reputation as having little practical use and lacking in functionality.

+

Also, because a series of security holes were discovered in JavaScript and the compatible technology JScript, there was an initial reluctance to use JavaScript at all.

+

Nevertheless, the rise of web services like Google Maps, which used JavaScript and asynchronous communications, created an awareness of a set of technologies nicknamed AJAX (Asynchronous JavaScript and XML); that plus the advent of a number of libraries that paper over implementation differences between different web browsers has more recently led to a re-evaluation of JavaScript as a programming language.

+

JavaScript is a prototype-based object-oriented language, and as shown in Listing 3, also permits independent class definitions. It does not have strict typing like Java, making it extremely flexible and giving it qualities that in some senses could be considered similar to Lisp.

+

Firefox 3.5 includes a number of extensions to the specification standardized in ECMAScript 3rd Edition, and can use JavaScript 1.7 and JavaScript 1.8.

+

Listing 3: An example of a class definition in JavaScript

+
function MyClass() {
+}
+MyClass.prototype = {
+  property1 : true,
+  property2 : 'string',
+  method : function() {
+    alert('Hello, world!');
+  }
+};
+var obj = new MyClass();
+obj.method();
+
+

DOM: An API for manipulating XML documents

+

The Document Object Model (DOM) is a technical standard promulgated by the W3C, and is an API for manipulating the contents of XML documents as objects. In earlier dynamic HTML approaches, the typical method was to use the innerHTML property of the HTML element node to dynamically change the contents of the HTML document by manipulating strings, but using the DOM makes it possible to manipulate XML documents in a way that better matches JavaScript's object-oriented nature.

+

In addition, XUL lacks any equivalent for the innerHTML property, so if it weren’t for the DOM, dynamic processing would be impossible.

+

There are a number of levels to the DOM with different levels of functionality. Gecko supports nearly all of DOM Level 2 and some of DOM Level 3.

+

With the DOM, the contents of an XML document are handled as a "DOM tree," a collection of element nodes and other nodes. Listing 4 shows an example that deletes the second child element of the element with the "toolbar" id, adds a new button element as a substitute, and sets a label attribute.

+

We do not go into the details of the various APIs in the DOM. To learn more about the DOM, please take a look at the MDC documentation.

+

Listing 4: An example manipulation using the DOM

+
var bar = document.getElementById('toolbar');
+bar.removeChild(bar.childNodes[1]);
+bar.appendChild(document.createElement('button'));
+bar.lastChild.setAttribute('label', 'Hello!');
+
+

{{ PreviousNext("Firefox addons developer guide/Introduction to Extensions", "Firefox addons developer guide/Introduction_to_XUL—How_to_build_a_more_intuitive_UI") }}

diff --git a/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html b/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html new file mode 100644 index 0000000000..478990b1a1 --- /dev/null +++ b/files/es/formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio/index.html @@ -0,0 +1,43 @@ +--- +title: Formatos multimedia admitidos por los elementos de audio y video +slug: Formatos_multimedia_admitidos_por_los_elementos_de_video_y_audio +tags: + - Firefox + - HTML5 + - Multimedia + - formatos de audio + - formatos multimedia + - para_revisar +--- +

{{ gecko_minversion_header("1.9.1") }}

+

Gecko 1.9.1 admite los elementos HTML 5 audio y video, los cuales proporcionan una compatibilidad integrada para la reproducción de medios de audio y video sin necesidad de instalar plug-ins. Este artículo aborda los formatos que son compatibles al implementar Gecko estos elementos .

+

Formatos multimedia compatibles

+

Actualmente Gecko admite audio en formato WAVE así como contenedores Ogg con audio codificado en Vorbis y/o video Theora.

+
+

{{ gecko_callout_heading("2.0") }}

+

A partir de Gecko 2.0 se admite también el formato de medios WebM. WebM usa el códec V8 para video y Vorbis para audio.

+
+

Contenedores WAVE

+

Gecko admite audio en contenedores WAVE; los archivos de este tipo suelen terminar en la extensión ".wav". Actualmente sólo se admite el códec "1" (PCM) .

+
Nota: Consulta RFC 2361 para el registro de códecs WAVE.
+

Tipos MIME reconocidos para audio WAVE

+

Gecko reconoce que los siguientes tipos MIME representan archivos de audio WAVE.

+ +

{{ h2_gecko_minversion("WebM", 2) }}

+

WebM es un formato nuevo, basado en estándares abiertos, para la presentación de video en la web. Usa VP8 para video y Vorbis para audio, en un contenedor basado en Matroska.

+

Tipos MIME reconocidos para medios WebM

+

Gecko reconoce que los siguientes tipos MIME representan archivos de medios WebM.

+
video/webm
Un archivo de medios WebM que contiene video (y posiblemente audio también).
audio/webm
Un archivo de medios WebM que contiene solamente audio.
+
+

Contenedores Ogg

+

Gecko también admite contenedores Ogg, que pueden contener audio y/o video. Gecko admite el códec Vorbis para audio Ogg y los códecs Theora y OggYUV para video.

+

Puedes saber más acerca de la creación de medios Ogg si lees el Theora Cookbook.

+

Tipos MIME reconocidos para medios Ogg

+

Gecko reconoce que los siguientes tipos MIME son archivos Ogg.

+
audio/ogg
Un archivo Ogg que contiene sólo audio.
video/ogg
Un archivo Ogg que contiene video (y posiblemente audio también).
application/ogg
Un archivo Ogg con contenido sin especificar. Es preferible usar uno de los otros dos tipo MIME pero puedes usarlo si no sabes cuáles son los contenidos del archivo.
+
+

Consulta también

+ +

{{ languages( { "en": "en/Media_formats_supported_by_the_audio_and_video_elements" } ) }}

diff --git "a/files/es/fragmentos_de_c\303\263digo/index.html" "b/files/es/fragmentos_de_c\303\263digo/index.html" new file mode 100644 index 0000000000..89f586d8f3 --- /dev/null +++ "b/files/es/fragmentos_de_c\303\263digo/index.html" @@ -0,0 +1,13 @@ +--- +title: Fragmentos de código +slug: Fragmentos_de_código +tags: + - Add-ons + - extensiones + - fragmentos de código +--- +

Esta es una lista rápida de fragmentos de código útiles (pequeñas muestras de código) disponible para los desarrolladores de extensiones para las diversas aplicaciones de Mozilla. Muchas de estas muestras también pueden ser usados en aplicaciones XULRunner, así como en el propio código de Mozilla.

+

Estos ejemplos demuestran cómo lograr tareas básicas que podrían no ser evidentes a simple vista.

+

Código orientado al Navegador

+
Código del navegador con pestañas (Firefox/SeaMonkey)
Operaciones básicas, tales como la carga de la página en el navegador con pestañas, que es el corazón de las aplicaciones del navegador Mozilla.
+
diff --git a/files/es/fuel/annotations/index.html b/files/es/fuel/annotations/index.html new file mode 100644 index 0000000000..ce27c39271 --- /dev/null +++ b/files/es/fuel/annotations/index.html @@ -0,0 +1,121 @@ +--- +title: Annotations +slug: FUEL/Annotations +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIAnnotations +--- +

Resumen de métodos

+ + + + + + + + + + + + + + + + +
boolean has(en AString aName)
nsIVariant get(en AString aName)
void set(en AString aName, en nsIVariant aValue, en PRInt32 aExpiration)
void remove(en AString aName)
+ +

Atributos

+ + + + + + + + + + + + + + +
AttributoTipoDescripción
nombresatributo de solo-lectura nsIVariantArray de nombre de anotación con el sujeto propietario
+ +

Métodos

+ +

has()

+ +

Determina si una anotación con un nombre determinado existe.

+ +
boolean has(en AString aName)
+
+ +
Parámetros
+ +
+
aName
+
El nombre de la Anotación
+
+ +
Valor devuelto
+ +

"true" si existe la Anotación con el nombre especificado, o "false" en caso contrario.

+ +

get()

+ +

Recoge el valor de una Anotación con el nombre especificado.

+ +
nsIVariant get(en AString aName)
+
+ +
Parámetros
+ +
+
aName
+
El nombre de la Anotación.
+
+ +
Valor devuelto
+ +

Una variable que contiene el valor de la Anotación. Puede ser boleano, una cadena o un número.

+ +

set()

+ +

Da valor a la Anotación con el nombre especificado.

+ +
void set(in AString aName, in nsIVariant aValue, in PRInt32 aExpiration)
+
+ +
Parámetros
+ +
+
aName
+
El nombre de la anotación
+
aValue
+
El nuevo valor de la anotación. Puede ser boleano, una cadena o un número.
+
aExpiration
+
La política de caducidad de la anotación. Véase nsIAnnotationService.
+
+ +
Valor devuelto
+ +

 

+ +

remove()

+ +

Borra la anotación especificada de su elemento propietario.

+ +
void remove(in AString aName)
+
+ +
Parámetros
+ +
+
aName
+
El nombre de la anotación
+
+ +
Valor devuelto
diff --git a/files/es/fuel/application/index.html b/files/es/fuel/application/index.html new file mode 100644 index 0000000000..1e6ef7b05f --- /dev/null +++ b/files/es/fuel/application/index.html @@ -0,0 +1,81 @@ +--- +title: Application +slug: FUEL/Application +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/extIApplication +--- +

Resumen del método

+ + +
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
idatributo de cadena de solo-lecturaLa identificación de la aplicación.
nameatributo de solo-lectura AStringEl nombre de la aplicación.
versionatributo de solo-lectura AStringLa versión de la aplicación.
consoleatributo de solo-lectura fuelIConsoleEl objeto consola de la aplicación.
extensionsatributo de solo-lectura fuelIExtensionsEl objeto extensiones para la aplicación. Contiene una lista de todas las aplicaciones instaladas.
prefsatributo de solo-lectura fuelIPreferenceBranchEl objeto preferencias de la aplicación.Por defecto es un árbol vacío.
storageatributo de solo-lectura fuelISessionStorageEl objeto storage de la aplicación.
eventsatributo de solo-lectura fuelIEventsEl objeto eventos de la aplicación. Los eventos válidos son: "load", "ready", "quit", "unload"
bookmarksatributo de solo-lectura fuelIBookmarkFolderEl elemento raíz de los marcadores de la aplicación.
windowsatributo de solo-lectura nsIVariantUn array con las ventanas del navegador dentro de la aplicación.
activeWindowatributo de solo-lectura fuelIWindowLa ventana activa del navegador.
diff --git a/files/es/fuel/bookmark/index.html b/files/es/fuel/bookmark/index.html new file mode 100644 index 0000000000..5265d92ce2 --- /dev/null +++ b/files/es/fuel/bookmark/index.html @@ -0,0 +1,89 @@ +--- +title: Bookmark +slug: FUEL/Bookmark +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIBookmark +--- +

Resumen del método

+ + + + + + + +
void remove()
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
idatributo de solo-lectura long longEL id del marcador.
titleatributo de solo-lectura AStringEl título del marcador.
uriatributo nsIURILa URI del marcador.
descriptionatributo AStringLa descripción del marcador.
keywordatributo AStringLa palabra clave asociada al marcador.
typeatributo de solo-lectura AStringEl tipo de marcador. Los valores posibles son: "bookmark", "separator"
parentatributo fuelIBookmarkFolderLa carpeta padre del marcador.
annotationsatributo de solo-lectura fuelIAnnotationsEl objeto Anotaciones del marcador.
eventsatributo de solo-lectura fuelIEventsEl objeto eventos del marcador. Los valores posibles son: "remove", "change", "visit", "move"
+ +

Métodos

+ +

remove()

+ +

Borra el objeto de la carpeta padre. Se usa para quitar tanto un marcador como un separador.

+ +
void remove()
+
+ +
Parámetros
+ +
Valor devuelto
diff --git a/files/es/fuel/bookmarkfolder/index.html b/files/es/fuel/bookmarkfolder/index.html new file mode 100644 index 0000000000..08535501a9 --- /dev/null +++ b/files/es/fuel/bookmarkfolder/index.html @@ -0,0 +1,144 @@ +--- +title: BookmarkFolder +slug: FUEL/BookmarkFolder +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIBookmarkFolder +--- +

Resument de métodos

+ + + + + + + + + + + + + + + + +
fuelIBookmark addBookmark(en AString aTitle, en nsIURI aURI)
fuelIBookmark addSeparator()
fuelIBookmarkFolder addFolder(en AString aTitle)
void remove()
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
idatributo de solo-lectura long longEl id de la carpeta.
titleatributo AStringEl título de la carpeta.
descriptionatributo AStringLa descripción de la carpeta.
typeatributo de solo-lectura AStringEl tipo de carpeta. Los valores posibles son: "folder"
parentatributo fuelIBookmarkFolderLa carpeta padre de la carpeta.
annotationsatributo de solo-lectura fuelIAnnotationsEl objeto Anotaciones de la carpeta.
eventsatributo de solo-lectura fuelIEventsEl objeto eventos de la carpeta. Los valores posibles son: "add", "addchild", "remove", "removechild", "change", "move"
childrenatributo de solo-lectura nsIVariantArray conteniendo todos los marcadores, separadores y carpetas que contiene esta carpeta.
+ +

Métodos

+ +

addBookmark()

+ +

Añade un nuevo marcador hijo a esta carpeta.

+ +
fuelIBookmark addBookmark(en AString aTitle, en nsIURI aURI)
+
+ +
Parámetros
+ +
+
aTitle
+
El título del marcador.
+
+ +
Valor devuelto
+ +

 

+ +

addSeparator()

+ +

Añade un nuevo separador hijo a esta carpeta.

+ +
fuelIBookmark addSeparator()
+
+ +
Parámetros
+ +
Valor devuelto
+ +

 

+ +

addFolder()

+ +

Añade una nueva carpeta hijo a esta carpeta.

+ +
fuelIBookmarkFolder addFolder(in AString aTitle)
+
+ +
Parámetros
+ +
+
aTitle
+
El título de la carpeta.
+
+ +
Valor devuelto
+ +

 

+ +

remove()

+ +

Borra la carpeta de la carpeta padre.

+ +
void remove()
+
+ +
Parámetros
+ +
Valor devuelto
+ +

 

diff --git a/files/es/fuel/browsertab/index.html b/files/es/fuel/browsertab/index.html new file mode 100644 index 0000000000..d8f22da029 --- /dev/null +++ b/files/es/fuel/browsertab/index.html @@ -0,0 +1,158 @@ +--- +title: BrowserTab +slug: FUEL/BrowserTab +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIBrowserTab +--- +

 

+ +

Resumen de métodos

+ + + + + + + + + + + + + + + + + + + +
void load(in nsIURI aURI)
void focus()
void close()
void moveBefore(in fuelIBrowserTab aBefore)
void moveToEnd()
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
uriatributo de solo-lectura nsIURILa URI de la pestaña actual.
indexatributo de solo-lectura RInt32El número de índice de la pestaña en la ventana del navegador.
windowatributo de solo-lectura fuelIWindowLa ventana del navegador en que se encuentra la pestaña.
documentatributo de solo-lectura nsIDOMHTMLDocumentTEl documento que contiene la pestaña.
eventsatributo de solo-lectura fuelIEventsEl objeto eventos de la pestaña. Valor posible: "load"
+ +

Métodos

+ +

load()

+ +

Carga una nueva URI en la pestaña del navegador.

+ +
void load(in nsIURI aURI)
+
+ +
Parámetros
+ +
+
aURI
+
La URI a cargar en la pestaña.
+
+ +
Valor devuelto
+ +

 

+ +

focus()

+ +

Pone el foco en esa pestaña del navegador y la trae a primer plano.

+ +
void focus()
+
+ +
Parámetros
+ +
Valor devuelto
+ +

 

+ +

close()

+ +

Cierra la pestaña. Es posible realmente no la cierre, ya que un script puede evitar esta operación.

+ +
void close()
+
+ +
Parámetros
+ +
Valor devuelto
+ +

 

+ +

moveBefore()

+ +

Cambia la posición de la pestaña en la ventana del navegador, hasta ponerla antes que otra pestaña.

+ +
void moveBefore(in fuelIBrowserTab aBefore)
+
+ +
Parámetros
+ +
+
aBefore
+
La pestaña antes de la cual la situaremos.
+
+ +
Valor devuelto
+ +

 

+ +

moveToEnd()

+ +

Mueve esta pestaña, a la última posición en la ventana.

+ +
void moveToEnd()
+
+ +
Parámetros
+ +
Valor devuelto
+ +

Ejemplos

+ +
var activeWin = Application.activeWindow;
+
+// buscamos en cada pestaña abierta en  la ventana del navegador
+activeWin.tabs.forEach( function(tab) {
+  alert(tab.uri.spec);
+});
+
+// accedemos al contenido del documento de la pestaña activa
+alert(activeWin.activeTab.document.body.innerHTML);
+
diff --git a/files/es/fuel/console/index.html b/files/es/fuel/console/index.html new file mode 100644 index 0000000000..730d16b759 --- /dev/null +++ b/files/es/fuel/console/index.html @@ -0,0 +1,65 @@ +--- +title: Console +slug: FUEL/Console +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/extIConsole +--- +

Resumen de métodos

+ + + + + + + + + + +
void log(in AString aMsg)
void open()
+ +

Atributos

+ + + + + + + + + +
AtributoTipoDescripción
+ +

Métodos

+ +

log()

+ +

Envía ena cadena determinada a la consola.

+ +
void log(in AString aMsg)
+
+ +
Parámetros
+ +
+
aMsg
+
El texto a enviar a la consola.
+
+ +
Valor devuelto
+ +

 

+ +

open()

+ +

Abre la ventana de la consola de errores. Se pone el foco en la ventana de la consola si ya está abierta:

+ +
void open()
+
+ +
Parámetros
+ +
Valor devuelto
diff --git a/files/es/fuel/eventitem/index.html b/files/es/fuel/eventitem/index.html new file mode 100644 index 0000000000..f740ef7af2 --- /dev/null +++ b/files/es/fuel/eventitem/index.html @@ -0,0 +1,56 @@ +--- +title: EventItem +slug: FUEL/EventItem +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/extIEventItem +--- +

 

+ +

Resumen de métodos

+ + + + + + + +
void preventDefault()
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
typeatributo de solo-lectura AStringEl nombre del evento
dataatributo de solo-lectura AStringPuede contener detalles adicionales y datos asociados con el evento. Es opcional y específico del evento. Si el evento no usa detalles adicionales, este valor es nulo.
+ +

Métodos

+ +

preventDefault()

+ +

Cancela el evento si éste es cancelable.

+ +
void preventDefault()
+
+ +
Parámetros
+ +
Valor devuelto
diff --git a/files/es/fuel/eventlistener/index.html b/files/es/fuel/eventlistener/index.html new file mode 100644 index 0000000000..58c61c8fc8 --- /dev/null +++ b/files/es/fuel/eventlistener/index.html @@ -0,0 +1,49 @@ +--- +title: EventListener +slug: FUEL/EventListener +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/extIEventListener +--- +

Resumen de método

+ + + + + + + +
void handleEvent(in fuelIEventItem aEvent)
+ +

Atributos

+ + + + + + + + + +
AtributoTipoDescripción
+ +

Métodos

+ +

handleEvent()

+ +

Este método se llama cuando ocurre un evento del tipo por el que se ha registrado fuelIEventListener.

+ +
void handleEvent(in fuelIEventItem aEvent)
+
+ +
Parámetros
+ +
+
aEvent
+
El (evento) fuelIEventItem asociado con el evento.
+
+ +
Valor devuelto
diff --git a/files/es/fuel/events/index.html b/files/es/fuel/events/index.html new file mode 100644 index 0000000000..8470203fb7 --- /dev/null +++ b/files/es/fuel/events/index.html @@ -0,0 +1,72 @@ +--- +title: Events +slug: FUEL/Events +tags: + - Evento + - Todas_las_Categorías +translation_of: Mozilla/Tech/Toolkit_API/extIEvents +--- +

Resumen de métodos

+ + + + + + + + + + +
void addListener(in AString aEvent, in fuelIEventListener aListener)
void removeListener(in AString aEvent, in fuelIEventListener aListener)
+ +

Atributos

+ + + + + + + + + +
AtributoTipoDescripción
+ +

Métodos

+ +

addListener()

+ +

Añade un evento a la lista. Si se añaden múltiples escuchas (event listener) idénticas en el mismo evento, con los mismos parámetros y con el mismo objetivo, la copia será descartada, por lo que no causarán que se llame a la escucha 2 veces y no será necesario borrar las adicionales.

+ +
void addListener(in AString aEvent, in extIEventListener aListener)
+
+ +
Parámetros
+ +
+
aEvent
+
El nombre del evento
+
aListener
+
La escucha que queremos añadir al evento
+
+ +
Valor devuelto
+ +

 

+ +

removeListener()

+ +

Quita una escucha de la lista. Si pasamos un argumento que no corresponde a ningún evento registrado, el efecto es nulo.

+ +
void removeListener(in AString aEvent, in extIEventListener aListener)
+
+ +
Parámetros
+ +
+
aEvent
+
El nombre del evento
+
aListener
+
La escucha del evento que queremos quitar
+
+ +
Valor devuelto
diff --git a/files/es/fuel/extension/index.html b/files/es/fuel/extension/index.html new file mode 100644 index 0000000000..9ffb8ff096 --- /dev/null +++ b/files/es/fuel/extension/index.html @@ -0,0 +1,61 @@ +--- +title: Extension +slug: FUEL/Extension +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/extIExtension +--- +

Resumen de método

+ + +
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
idatributo de solo-lectura AStringLa identidad de la extensión.
nameatributo de solo-lectura AStringEl nombre de la extensión.
versionatributo de solo-lectura AStringEl número de versión de la extensión.
firstRunatributo boleano de solo-lecturaIndica si esta es la primera ejecución después de la instalación.
prefsatributo de solo-lectura fuelIPreferenceBranchEl objeto preferencias de la extensión. El valor por defecto es la rama "extensions.<extensionid>.".
storageatributo de solo-lectura fuelISessionStorageEl objeto storage de la extensión
eventsatributo de solo-lectura fuelIEventsEl objeto eventos de la extensión. Valor posible: "uninstall"
diff --git a/files/es/fuel/extensions/index.html b/files/es/fuel/extensions/index.html new file mode 100644 index 0000000000..231329fe91 --- /dev/null +++ b/files/es/fuel/extensions/index.html @@ -0,0 +1,77 @@ +--- +title: Extensions +slug: FUEL/Extensions +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/extIExtensions +--- +

Resumen de métodos

+ + + + + + + + + + +
Expresión booleana has(en AString aId)
fuelIExtension get(en AString aId)
+ +

Atributos

+ + + + + + + + + + + + + + +
AtributoTipoDescripción
allatributo de solo-lectura nsIVariantEs un arreglo de fuelIExtension que contiene todas las extensiones en la aplicación.
+ +

Métodos

+ +

has()

+ +

Determina si existe una extensión con un nombre "id" determinado.

+ +
boolean has(in AString aId)
+
+ +
Parámetros
+ +
+
aId
+
La id de una extensión.
+
+ +
Valor devuelto
+ +

es "true" (verdadero) si existe una extensión con ese "id", y "false" (falso) en caso contrario.

+ +

get()

+ +

Recoge un objeto de la extensión con una determinada id.

+ +
fuelIExtension get(in AString aId)
+
+ +
Parámetros
+ +
+
aId
+
El id de una extensión.
+
+ +
Valor devuelto
+ +

Un objeto de la extensión o null si no hay una extensión con el id especificado.

diff --git a/files/es/fuel/index.html b/files/es/fuel/index.html new file mode 100644 index 0000000000..51c16b0424 --- /dev/null +++ b/files/es/fuel/index.html @@ -0,0 +1,33 @@ +--- +title: FUEL +slug: FUEL +tags: + - FUEL + - Interfaces + - Todas_las_Categorías +translation_of: Mozilla/Tech/Toolkit_API/FUEL +--- +

FUEL es una librería de JavaScript diseñada para ayudar a los desarrolladores a construir extensiones usando una terminología y un interfaz familiares. FUEL es nuevo en Firefox 3 y podrá ser usado también para Firefox 2. +

La intención es que FUEL permita a los desarrolladores ser productivos reduciendo las formalidades del XPCOM mientras añade algunas ideas "modernas" de JavaScript. Queremos empezar con áreas a las que podemos sacar el mayor beneficio.

+

Objetos

+ +


+


+

+
+
diff --git a/files/es/fuel/preference/index.html b/files/es/fuel/preference/index.html new file mode 100644 index 0000000000..77ad8ebc1b --- /dev/null +++ b/files/es/fuel/preference/index.html @@ -0,0 +1,81 @@ +--- +title: Preference +slug: FUEL/Preference +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/SMILE/smileIWindow +--- +

Resumen de método

+ + + + + + + +
void reset()
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
nameatributo de solo-lectura AStringEl nombre de la preferencia.
typeatributo de solo-lectura AStringUna cadena conteniendo el tipo de preferencia. Valores posibles: "String", "Boolean", o "Number".
valueatributo nsIVariantLee o pone el vaslor de la preferencia.
lockedatributo boleanoLee el estado de bloqueo de la preferencia. Para des/bloquear, ajustar a un valor boleano.
modifiedatributo boleano de solo-lecturaComprueba si una preferencia a sido cambiada por el usuario o no.
branchatributo de solo-lectura fuelIPreferenceBranchLa rama de preferencia a la que corresponde la preferencia.
eventsatributo de solo-lectura fuelIEventsEl objeto de eventos para esta preferencia. Admite: "change"
+ +

Métodos

+ +

reset()

+ +

Devuelve las preferencias a sus valores originales.

+ +
void reset()
+
+ +
Parámetros
+ +
Valor devuelto
+ +

 

diff --git a/files/es/fuel/preferencebranch/index.html b/files/es/fuel/preferencebranch/index.html new file mode 100644 index 0000000000..eb3adf22be --- /dev/null +++ b/files/es/fuel/preferencebranch/index.html @@ -0,0 +1,147 @@ +--- +title: PreferenceBranch +slug: FUEL/PreferenceBranch +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/extIPreferenceBranch +--- +

Resumen de métodos

+ + + + + + + + + + + + + + + + + + + +
boolean has(in AString aName)
fuelIPreference get(in AString aName)
nsIVariant getValue(in AString aName, in nsIVariant aDefaultValue)
void setValue(in AString aName, in nsIVariant aValue)
void reset()
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + +
AtributosTipoDescripción
rootatributo de solo-lectura AStringEl nombre de la rama raíz.
allatributo de solo-lectura nsIVariantArray de fuelIPreference conteniendo todas las preferencias en esta rama.
eventsatributo de solo-lectura fuelIEventsEl objeto de eventos para las preferencias. Admite: "change"
+ +

Métodos

+ +

has()

+ +

Comprueba si existe una preferencia.

+ +
boolean has(in AString aName)
+
+ +
Parámetros
+ +
+
aName
+
El nombre de la preferencia
+
+ +
Valor devuelto
+ +

"true" si la preferencia existe o "false" en caso contrario.

+ +

get()

+ +

Recoje un objeto que representa una preferencia.

+ +
fuelIPreference get(in AString aName)
+
+ +
Parámetros
+ +
+
aName
+
El nombre de la preferencia.
+
+ +
Valor devuelto
+ +

un objeto de tipo preferencia o "null" si la preferencia no existe.

+ +

getValue()

+ +

Recoje el valor de una preferencia. Devuelve el valor por defecto si la preferencia no existe.

+ +
nsIVariant getValue(in AString aName, in nsIVariant aDefaultValue)
+
+ +
Parámetros
+ +
+
aName
+
El nombre de la preferencia
+
aDefaultValue
+
El valor por defecto de la preferencia
+
+ +
Valor devuelto
+ +

valor de la preferencia o el valor por defecto predeterminado, si la preferencia no existe.

+ +

setValue()

+ +

Pone el valor a una preferencia con un nombre determinado.

+ +
void setValue(in AString aName, in nsIVariant aValue)
+
+ +
Parámetros
+ +
+
aName
+
El nombre de la preferencia
+
aValue
+
El valor de la preferencia
+
+ +
Valor devuelto
+ +

 

+ +

reset()

+ +

Vuelve todas las preferencias en una rama, a su valor por defecto.

+ +
void reset()
+
+ +
Parámetros
+ +
Valor devuelto
diff --git a/files/es/fuel/sessionstorage/index.html b/files/es/fuel/sessionstorage/index.html new file mode 100644 index 0000000000..f7a7655d6b --- /dev/null +++ b/files/es/fuel/sessionstorage/index.html @@ -0,0 +1,97 @@ +--- +title: SessionStorage +slug: FUEL/SessionStorage +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/extISessionStorage +--- +

Resumen de métodos

+ + + + + + + + + + + + + +
boolean has(in AString aName)
void set(in AString aName, in nsIVariant aValue)
nsIVariant get(in AString aName, in nsIVariant aDefaultValue)
+ +

Atributos

+ + + + + + + + + + + + + + +
AtributoTipoDescripciónn
eventsatributo de solo-lectura fuelIEventsEl objeto eventos para el almacenamiento. Admite: "change"
+ +

Métodos

+ +

has()

+ +

Determina si un elemnto de almacenamiento existe con el nombre determinado.

+ +
boolean has(in AString aName)
+
+ +
Parámetros
+ +
+
aName
+
El nombre del objeto.
+
+ +
Valor devuelto
+ +

"true" si existe un objeto con el nombre dado o "false" en caso contrario.

+ +

set()

+ +

Ajusta el valor de un objeto de almacenamiento con en determinado nombre.

+ +
void set(in AString aName, in nsIVariant aValue)
+
+ +
Parámetros
+ +
+
El nombre del objeto.
+
+ +
Valor devuelto
+ +

 

+ +

get()

+ +

Recoge el valor de almacenamiento de un objeto con un nombre determinado. Si el nombre no existe, se devuelve un valor por defecto.

+ +
nsIVariant get(in AString aName, in nsIVariant aDefaultValue)
+
+ +
Parámetros
+ +
+
aName
+
El nombre del objeto.
+
+ +
Valor devuelto
+ +

el valor del objeto o el valor por defecto si no existe un objeto con el nombre dado.

diff --git a/files/es/fuel/window/index.html b/files/es/fuel/window/index.html new file mode 100644 index 0000000000..3420126809 --- /dev/null +++ b/files/es/fuel/window/index.html @@ -0,0 +1,87 @@ +--- +title: Window +slug: FUEL/Window +tags: + - FUEL + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/Toolkit_API/FUEL/fuelIWindow +--- +

 

+ + +

 

+ +

Resumen de método

+ + + + + + + +
fuelIBrowserTab open(in nsIURI aURI)
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
tabsatributo de solo-lectura nsIVariantUna colección de pestañas dentro de la ventana del navegador.
activeTabatributo de solo-lectura fuelIBrowserTabLa pestaña actualmente activa en la ventana del navegador.
eventsatributo de solo-lectura fuelIEventsEl objeto eventos de la ventana del navegador. Valores posibles: "TabOpen", "TabClose", "TabMove", "TabSelect"
+ +

Métodos

+ +

open()

+ +

Abre una nueva pestaña en el navegador, apuntando a la URI especificada.

+ +
fuelIBrowserTab open(in nsIURI aURI)
+
+ +
Parámetros
+ +
+
aURI
+
La dirección URI a la que apuntará la pestaña.
+
+ +
Valor devuelto
+ +

Ejemplos

+ +
// Helper for making nsURI from string
+function url(spec) {
+  var ios = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
+  return ios.newURI(spec, null, null);
+}
+
+function onTabOpen(event) {
+  alert("abierta");
+}
+
+var activeWin = Application.activeWindow;
+activeWin.events.addListener("TabOpen", onTabOpen);
+
+var browserTab = activeWin.open(url("http://mozilla.org"));
+
diff --git a/files/es/funciones/index.html b/files/es/funciones/index.html new file mode 100644 index 0000000000..8fdf449542 --- /dev/null +++ b/files/es/funciones/index.html @@ -0,0 +1,8 @@ +--- +title: Funciones +slug: Funciones +tags: + - Funciones +--- +

Aquí necesitamos una lista completa de Funciones de XPCOM, algo parecido a la lista de Interfaces. +

diff --git a/files/es/games/anatomy/index.html b/files/es/games/anatomy/index.html new file mode 100644 index 0000000000..799f31f931 --- /dev/null +++ b/files/es/games/anatomy/index.html @@ -0,0 +1,325 @@ +--- +title: Anatomy of a video game +slug: Games/Anatomy +tags: + - Bucle + - JavaScript + - juegos +translation_of: Games/Anatomy +--- +
{{GamesSidebar}}

{{IncludeSubnav("/en-US/docs/Games")}}

+ +
+

Este artículo es un vistazo a la anatomía y flujo de trabajo del videojuego medio desde un punto de vista técnico, en términos de cómo debería funcionar el bucle principal. Ayuda a los principiantes del desarrollo moderno de videojuegos a entender lo que hace falta al construir un juego y cómo los estándares web como JavaScript se prestan como herramientas. Los programadores de juegos experimentados que sean novatos en el desarrollo web también se pueden beneficiar.

+
+ +

Presentar, aceptar, traducir, calcular, repetir

+ +

El objetivo de todo videojuego es presentar al usuario una situación, aceptar su entrada, traducir esas señales a acciones, y calcular una nueva situación a partir de esos actos. Los juegos están iterando continuamente por estas etapas, una y otra vez, hasta que ocurre alguna condición final (como ganas, perder, o salirse para ir a la cama). De forma poco sorpresiva, este patrón corresponde a cómo se programa el motor de un juego.

+ +

Los detalles dependen del juego.

+ +

Algunos juegos dirigen este ciclo con la entrada del usuario. Imagina que estás desarrollando un juego del tipo "encuentra las diferencias entre estas dos imágenes similares". Estos juegos presentan dos imágenes al usuario; aceptan sus clics (o toques); interpretan la entrada como éxito, fallo, pausa, interacción del menú, etc; y finalmente, calculan una escena actualizada resultante de esa entrada. El bucle del juego avanza con la entrada del usuario, y se queda en espera hasta que ésta se produce. Esto es más bien un enfoque basado por turnos que no requiere una actualización constante cada frame, sólo cuando el jugador reacciona.

+ +

Otros juegos requieren control sobre cada uno de los más pequeños aspectos posibles. Se aplican los mismos principios de antes, con una ligera variación: cada frame de la animación hace progresar el ciclo, y cualquier cambio en la entrada del usuario se captura en el primer turno disponible. Este modelo de una-vez-por-frame se implementa en algo llamado bucle principal. Si el bucle de tu juego está basado en tiempo, éste será una ley a la que se tendrán que atener tus simulaciones.

+ +

Pero puede no necesitar de un control por-frame. El bucle de tu juego podría ser similar al ejemplo de encuentra las diferencias, y basarse en las entradas del usuario. Podría necesitar tanto entradas como tiempo simulado. Podría incluso estar totalmente basado en algo diferente.

+ +

Por suerte, el JavaScript moderno (que se describe en las siguientes secciones) hace sencillo desarrollar un bucle principal eficiente, tipo ejecutar-una-vez-por-frame. Por supuesto, estará tan optimizado como tú lo hagas. Si algo parece que debería ir acoplado a un evento más infrecuente, suele ser una buena idea (aunque no siempre) sacarlo fuera del bucle principal.

+ +

Crear un bucle principal en JavaScript

+ +

JavaScript funciona mejor con eventos y funciones callback. Los navegadores modernos se esfuerzan en invocar los métodos sólo en cuanto se necesita, y reposar (o hacer otras tareas) en los intervalos. Es una idea excelente añadir tu código a los momentos apropiados. Considera si tu función necesita de verdad ser invocada en un intervalo estricto de tiempo, a cada frame, o sólo cuando haya ocurrido alguna otra cosa. Especificándole al navegador cuándo tiene que ser invocada tu función le permite optimizarla. Además, probablemente haga tu trabajo más fácil.

+ +

Algún código necesita ejecutarse frame a frame, así que ¿por qué añadir esa función a cualquier otra cosa que al planificador de redibulado del navegador? En la web, {{ domxref("window.requestAnimationFrame()") }} será la base de la mayoría de bucles principales frame-a-frame bien programados. Al invocarla, hay que pasarle una función callback. Esa función callback se ejecutará en el momento apropiado antes del próximo redibujado. Aquí hay un ejemplo de un bucle principal sencillo:

+ +
window.main = function () {
+  window.requestAnimationFrame( main );
+
+  // Lo que sea que tenga que hacer tu bucle principal
+};
+
+main(); // Empezar el ciclo
+ +

Note: In each of the main() methods discussed here, we schedule a new requestAnimationFrame before performing our loop contents. That is not by accident and it is considered best practice. Calling the next requestAnimationFrame early ensures the browser receives it on time to plan accordingly even if your current frame misses its VSync window.

+ +

The above chunk of code has two statements. The first statement creates a function as a global variable called main(). This function does some work and also tells the browser to call itself next frame with window.requestAnimationFrame(). The second statement calls the main() function, defined in the first statement. Because main() is called once in the second statement and every call of it places itself in the queue of things to do next frame, main() is synchronized to your framerate.

+ +

Of course this loop is not perfect. Before we discuss ways to change it, let us discuss what it already does well.

+ +

Timing the main loop to when the browser paints to the display allows you to run your loop as frequently as the browser wants to paint. You are given control over each frame of animation. It is also very simple because main() is the only function getting looped. A First Person Shooter (or a similar game) presents a new scene once every frame. You cannot really get more smooth and responsive than that.

+ +

But do not immediately assume animations require frame-by-frame control. Simple animations can be easily performed, even GPU-accelerated, with CSS animations and other tools included in the browser. There are a lot of them and they will make your life easier.

+ +

Building a better main loop in Javascript

+ +

There are two obvious issues with our previous main loop: main() pollutes the {{ domxref("window") }} object (where all global variables are stored) and the example code did not leave us with a way to stop the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an Immediately-Invoked Function Expression (IIFE).

+ +
/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*/
+
+;(function () {
+  function main() {
+    window.requestAnimationFrame( main );
+
+    // Your main loop contents.
+  }
+
+  main(); // Start the cycle
+})();
+ +

When the browser comes across this IIFE, it will define your main loop and immediately queue it for the next frame. It will not be attached to any object and main (or main() for methods) will be a valid unused name in the rest of the application, free to be defined as something else.

+ +

Note: In practice, it is more common to prevent the next requestAnimationFrame() with an if-statement, rather than calling cancelAnimationFrame().

+ +

For the second issue, stopping the main loop, you will need to cancel the call to main() with {{ domxref("window.cancelAnimationFrame()") }}. You will need to pass cancelAnimationFrame() the ID token given by requestAnimationFrame() when it was last called. Let us assume that your game's functions and variables are built on a namespace that you called MyGame. Expanding our last example, the main loop would now look like:

+ +
/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*/
+
+;(function () {
+  function main() {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Your main loop contents.
+  }
+
+  main(); // Start the cycle
+})();
+ +

We now have a variable declared in our MyGame namespace, which we call stopMain, that contains the ID returned from our main loop's most recent call to requestAnimationFrame(). At any point, we can stop the main loop by telling the browser to cancel the request that corresponds to our token.

+ +
window.cancelAnimationFrame( MyGame.stopMain );
+ +

The key to programming a main loop, in JavaScript, is to it attach to whatever event should be driving your action and pay attention to how the different systems involved interplay. You may have multiple components driven by multiple different types of events. This feels like unnecessary complexity but it might just be good optimization (not necessarily, of course). The problem is that you are not programming a typical main loop. In Javascript, you are using the browser's main loop and you are trying to do so effectively.

+ +

Building a more optimized main loop in JavaScript

+ +

Ultimately, in JavaScript, the browser is running its own main loop and your code exists in some of its stages. The above sections describe main loops which try not to wrestle away control from the browser. These main methods attach themselves to window.requestAnimationFrame(), which asks the browser for control over the upcoming frame. It is up to the browser how to relate these requests to their main loop. The W3C spec for requestAnimationFrame does not really define exactly when the browsers must perform the requestAnimationFrame callbacks. This can be a benefit because it leaves browser vendors free to experiment with the solutions that they feel are best and tweak it over time.

+ +

Modern versions of Firefox and Google Chrome (and probably others) attempt to connect requestAnimationFrame callbacks to their main thread at the very beginning of a frame's timeslice. The browser's main thread thus tries to look like the following:

+ +
    +
  1. Start a new frame (while the previous frame is handled by the display).
    2. +
  2. Go through the list of requestAnimationFrame callbacks and invoke them.
    3. +
  3. Perform garbage collection and other per-frame tasks when the above callbacks stop controlling the main thread.
    4. +
  4. Sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image (VSync) and repeat.
    5. +
+ +

You can think about developing realtime applications as having a budget of time to do work. All of the above steps must take place every 16-and-a-half milliseconds to keep up with a 60 Hz display. Browsers invoke your code as early as possible to give it maximum computation time. Your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in WebGL). Long calculations can be performed on a Web Worker or a GPU at the same time as the browser uses its main thread to manage garbage collection, its other tasks, or handle asynchronous events.

+ +

While we are on the topic of budgeting time, many web browsers have a tool called High Resolution Time. The {{ domxref("Date") }} object is no longer the recognised method for timing events because it is very imprecise and can be modified by the system clock. High Resolution Time, on the other hand, counts the number of milliseconds since navigationStart (when the previous document is unloaded). This value is returned as a decimal number accurate to a thousandth of a millisecond. It is known as a {{ domxref("DOMHighResTimeStamp") }} but, for all intents and purposes, consider it a floating point number.

+ +

Note: Systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. They should provide 0.001ms accuracy if they are capable of it, however.

+ +

This value is not too useful alone, since it is relative to a fairly uninteresting event, but it can be subtracted from another timestamp to accurately and precisely determine how much time elapsed between those two points. To acquire one of these timestamps, you can call window.performance.now() and store the result as a variable.

+ +
var tNow = window.performance.now();
+
+ +

Back to the topic of the main loop. You will often want to know when your main function was invoked. Because this is common, window.requestAnimationFrame() always provides a DOMHighResTimeStamp to callbacks as an argument when they are executed. This leads to another enhancement to our previous main loops.

+ +
/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    // Your main loop contents.
+    // tFrame, from "function main ( tFrame )", is now a DOMHighResTimeStamp provided by rAF.
+  }
+
+  main(); // Start the cycle
+})();
+ +

Several other optimizations are possible and it really depends on what your game attempts to accomplish. Your game genre will obviously make a difference but it could even be more subtle than that. You could draw every pixel individually on a canvas or you could layer DOM elements (including multiple WebGL canvases with transparent backgrounds if you want) into a complex hierarchy. Each of these paths will lead to different opportunities and constraints.

+ +

It is decision... time

+ +

You will need to make hard decisions about your main loop: how to simulate the accurate progress of time. If you demand per-frame control then you will need to determine how frequently your game will update and draw. You might even want update and draw to occur at different rates. You will also need to consider how gracefully your game will fail if the user's system cannot keep up with the workload. Let us start by assuming that you will handle user input and update the game state every time you draw. We will branch out later.

+ +

Note: Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs, carefully, before working on your main loop.

+ +

What most browser games should look like

+ +

If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can simply update, render, and then do nothing until VSync.

+ +
/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+
+    update( tFrame ); //Call your update method. In our case, we give it rAF's timestamp.
+    render();
+  }
+
+  main(); // Start the cycle
+})();
+ +

If the maximum refresh rate cannot be reached, quality settings could be adjusted to stay under your time budget. The most famous example of this concept is the game from id Software, RAGE. This game removed control from the user in order to keep its calculation time at roughly 16ms (or roughly 60fps). If computation took too long then rendered resolution would decrease, textures and other assets would fail to load or draw, and so forth. This (non-web) case study made a few assumptions and tradeoffs:

+ + + +

Other ways to handle variable refresh rate needs

+ +

Other methods of tackling the problem exist.

+ +

One common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. The update method can continue looping without care about what the user sees. The draw method can view the last update and when it happened. Since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. It does not matter whether this is more frequent than the official update loop (or even less frequent). The update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. There are many ways to separate the update method in web standards:

+ + + +

Each of these methods have similar tradeoffs:

+ + + +

A separate update and draw method could look like the following example. For the sake of demonstration, the example is based on the third bullet point, just without using Web Workers for readability (and, let's be honest, writeability).

+ +

Note: This example, specifically, is in need of technical review.

+ +
/*
+* Starting with the semicolon is in case whatever line of code above this example
+* relied on automatic semicolon insertion (ASI). The browser could accidentally
+* think this whole example continues from the previous line. The leading semicolon
+* marks the beginning of our new line if the previous one was not empty or terminated.
+*
+* Let us also assume that MyGame is previously defined.
+*
+* MyGame.lastRender keeps track of the last provided requestAnimationFrame timestamp.
+* MyGame.lastTick keeps track of the last update time. Always increments by tickLength.
+* MyGame.tickLength is how frequently the game state updates. It is 20 Hz (50ms) here.
+*
+* timeSinceTick is the time between requestAnimationFrame callback and last update.
+* numTicks is how many updates should have happened between these two rendered frames.
+*
+* render() is passed tFrame because it is assumed that the render method will calculate
+*          how long it has been since the most recently passed update tick for
+*          extrapolation (purely cosmetic for fast devices). It draws the scene.
+*
+* update() calculates the game state as of a given point in time. It should always
+*          increment by tickLength. It is the authority for game state. It is passed
+*          the DOMHighResTimeStamp for the time it represents (which, again, is always
+*          last update + MyGame.tickLength unless a pause feature is added, etc.)
+*
+* setInitialState() Performs whatever tasks are leftover before the mainloop must run.
+*                   It is just a generic example function that you might have added.
+*/
+
+;(function () {
+  function main( tFrame ) {
+    MyGame.stopMain = window.requestAnimationFrame( main );
+    var nextTick = MyGame.lastTick + MyGame.tickLength;
+    var numTicks = 0;
+
+    //If tFrame < nextTick then 0 ticks need to be updated (0 is default for numTicks).
+    //If tFrame = nextTick then 1 tick needs to be updated (and so forth).
+    //Note: As we mention in summary, you should keep track of how large numTicks is.
+    //If it is large, then either your game was asleep, or the machine cannot keep up.
+    if (tFrame > nextTick) {
+      var timeSinceTick = tFrame - MyGame.lastTick;
+      numTicks = Math.floor( timeSinceTick / MyGame.tickLength );
+    }
+
+    queueUpdates( numTicks );
+    render( tFrame );
+    MyGame.lastRender = tFrame;
+  }
+
+  function queueUpdates( numTicks ) {
+    for(var i=0; i < numTicks; i++) {
+      MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; //Now lastTick is this tick.
+      update( MyGame.lastTick );
+    }
+  }
+
+  MyGame.lastTick = performance.now();
+  MyGame.lastRender = MyGame.lastTick; //Pretend the first draw was on first update.
+  MyGame.tickLength = 50; //This sets your simulation to run at 20Hz (50ms)
+
+  setInitialState();
+  main(performance.now()); // Start the cycle
+})();
+ +

Another alternative is to simply do certain things less often. If a portion of your update loop is difficult to compute but insensitive to time, you might consider scaling back its frequency and, ideally, spreading it out into chunks throughout that lengthened period. An implicit example of this is found over at The Artillery Blog for Artillery Games, where they adjust their rate of garbage generation to optimize garbage collection. Obviously, cleaning up resources is not time sensitive (especially if tidying is more disruptive than the garbage itself).

+ +

This may also apply to some of your own tasks. Those are good candidates to throttle when available resources become a concern.

+ +

Summary

+ +

I want to be clear that any of the above, or none of them, could be best for your game. The correct decision entirely depends on the trade-offs that you are willing (and unwilling) to make. The concern is mostly with switching to another option. Fortunately, I do not have any experience with this but I have heard it is an excruciating game of Whack-a-Mole.

+ +

An important thing to remember for managed platforms, like the web, is that your loop may stop execution for significant periods of time. This could occur when the user unselects your tab and the browser sleeps (or slows) its requestAnimationFrame callback interval. You have many ways to deal with this situation and this could depend on whether your game is single player or multiplayer. Some choices are:

+ + + +

Once your main loop has been developed and you have decided on a set of assumptions and tradeoffs which suit your game, it is now just a matter of using your decisions to calculate any applicable physics, AI, sounds, network synchronization, and whatever else your game may require.

diff --git a/files/es/games/herramients/asm.js/index.html b/files/es/games/herramients/asm.js/index.html new file mode 100644 index 0000000000..bd41ed70a3 --- /dev/null +++ b/files/es/games/herramients/asm.js/index.html @@ -0,0 +1,29 @@ +--- +title: asm.js +slug: Games/Herramients/asm.js +tags: + - JavaScript + - asm.js +translation_of: Games/Tools/asm.js +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

Asm.js es un subconjunto de JavaScript que es altamente optimizable. Este artículo analiza exactamente lo que está permitido en el subconjunto asm.js, las mejoras que confiere, donde y cómo puedo utilizarlo, y otros recursos y ejemplos.

+
+ +

¿Qué es asm.js exactamente?

+ +

Es un subconjunto muy pequeño y estricto de JavaScript que solo permite cosas como `while`, `if`, números, funciones con nombres de nivel superior y otras construcciones simples. No permite objetos, cadenas, cierres y básicamente cualquier cosa que requiera una asignación de la pila. El código asm.js se parece al lenguaje de programación "C" en muchos aspectos, pero es JavaScript completamente válido que se ejecuta en todos los motores actuales. Impulsa los motores JS para optimizar este tipo de código, y le da a los compiladores como Emscripten una definición clara de qué tipo de código generar. A continuación, mostraremos cómo es un código asm.js y explicaremos cómo le ayuda y cómo puede usarlo.

+ +

Este subconjunto de JavaScript ya está altamente optimizado en muchos motores de JavaScript que utilizan técnicas de compilación Just-In-Time (JIT) sofisticadas. Sin embargo, al definir un estándar tan explícito, podemos trabajar en la optimización de este tipo de código aún más y obtener el máximo rendimiento posible. Facilita la colaboración en múltiples motores JS porque es fácil de comparar. La idea es que este tipo de código se ejecute muy rápido en cada motor, y si no lo hace, es que hay un error y es un claro mensaje de que los motores deben optimizarse.

+ +

También facilita la tarea de las personas que escriben compiladores que desean generar código de alto rendimiento en la web. Pueden consultar las especificaciones de asm.js para saber que se ejecutará rápidamente si se adhieren a los patrones de asm.js. Emscripten, un compilador de C/C++ a JavaScript, genera código asm.js para que funcione con un rendimiento casi nativo en varios navegadores.

+ +

Además, si un motor elige reconocer especialmente código asm.js, se pueden realizar aún más optimizaciones. Firefox es el único navegador que hace esto ahora.

+ +

Resumen del lenguaje asm.js

+ +

asm.js es un lenguaje de programación intermedio. Tiene una tasa de rendimiento muy predecible porque está limitada a un subconjunto extremadamente restringido de JavaScript que proporciona solo enteros, números en coma flotante, aritmética, llamadas a funciones y accesos de pila de tipo estricto. Las características de rendimiento son más cercanas al código nativo que las de JavaScript estándar. El uso del subconjunto de JavaScript asm.js ya es compatible con los principales navegadores web. Como asm.js se ejecuta en un navegador, depende en gran medida del navegador y del hardware.

diff --git a/files/es/games/herramients/index.html b/files/es/games/herramients/index.html new file mode 100644 index 0000000000..e09812b07d --- /dev/null +++ b/files/es/games/herramients/index.html @@ -0,0 +1,46 @@ +--- +title: Herramientas para desarrolladores de juegos +slug: Games/Herramients +tags: + - NeedsContent + - NeedsTranslation + - aplicaciones + - juegos +translation_of: Games/Tools +--- +
{{GamesSidebar}}
+

En esta pagina puedes encontrar enlaces a nuestros articulos de desarrollo de juegos, que enventualmente apuenta a cubrir frameworks, compiladores y herramientas de depuracion.

+
+
+
+ asm.js
+
+ asm.js es una subconjunto muy limitado del lenguaje Javascript que puede ser en gran medida optimizado y correr en modo compilador ahead-of-time (AOT) para un mejor rendimiento que el rendimiento tipico de JavaScript. Este es, por supuesto, bueno para juegos.
+
+ Emscripten
+
+

Un compilador LLVM a JavaScript; con Emscripten, tu puedes compilar C++ y otros lenguajes que se pueden compilar a LLVM y luego a JavaScript de alto rendimiento. Es una buena herramiente para portar aplicaciones a la Web! Aqui hay un util tutorial sobre Emscripten disponible en la wiki. Estamos mirando cubrir Emscripten en su propia seccion de MDN.

+
+
+ Gecko profiler
+
+ Gecko profiler es una extension que te permite perfilar tu codigo para ayudar donde tienes errores de rendimiento, asi puedes hacer que tu juego corra a velocidad maxima.
+
+ Motores de juegos y herramientas
+
+ Una lista de motores, plantillas y tecnologias utiles para los desarrolladores de juegos.
+
+ Shumway
+
+ Shumway es un renderizador para Adobe Flash construido completamente con JavaScript, WebGL, entre otros, haciendo una brecha entre Flash y los estandares Web. Este articulo muestra como hacer uso de Shumway y como contribuir arreglos y errores al proyecto.
+
+ Cadena de herramientas para desarrollar y depurar juegos
+
+ Como difieren de depurar una Web app normal? Que herramientas especializadas estan disponibles? Un lote de esto va a ser cubierto por Will en herramientas, pero aqui te vamos a proveer una cadena de herramientas practicas para depurar juegos con links a las cosas de Will: +
    +
  • Basic tools overview
    • +
  • Shader editor
    • +
  • Performance tools (still in production, estimated early 2014)
    • +
+
+
diff --git a/files/es/games/index.html b/files/es/games/index.html new file mode 100644 index 0000000000..29eba5c52f --- /dev/null +++ b/files/es/games/index.html @@ -0,0 +1,74 @@ +--- +title: Desarrollo de Videojuegos +slug: Games +tags: + - Apps + - Games + - NeedsContent + - TopicStub + - aplicaciones + - juegos +translation_of: Games +--- +
{{GamesSidebar}}
+ +
+

Jugar es una de las actividades más populares en las computadoras. Constantemente aparecen nuevas tecnologías para desarrollar juegos mejores y más potentes que pueden iniciarse en cualquier navegador web compatible con los estándares.

+
+ +
+
+

Introducción de los juegos para la Web

+ +
+
Introducción al desarrollo de juegos para la Web
+
Una introducción a las tecnologías útiles para los desarrolladores de juegos y cómo iniciarse a desarrollar juegos usando tecnologías Web. Este artículo también examina el negocio de crear juegos para la Web.
+
Anatomía de un videojuego
+
¿Qué es un videojuego en realidad?. Aquí hay ciertas partes que son comunes entre los juegos (aunque no lo parezca). Este artículo busca explicar conceptos como los  main loops en un contexto completamente general. Cuando se enfoca lo hace hacia los estándares Web.
+
Consideraciones especiales para desarrolladores de videojuegos
+
Este artículo del Centro de Aplicaciones examina brevemente las cosas que necesitas considerar específicamente cuando intentas crear un juego que correrá como una open web app.
+
+ +

Recursos externos

+ +
+
Build New Games
+
Un sitio colaborativo con un largo número de tutoriales de desarrollo de Open Web Game.
+
Creative JS
+
Un colección impresionante de técnicas y experimentos de JavaScript , No específica para los juegos, pero útil.
+
Game programming patterns
+
Un libro en línea, escrito por Bob Nystrom, que discute patrones de programación en el contexto de desarrollo de videojuegos con el objetivo de ayudar a los desarrolladores de videojuegos a producir código más efectivo y eficiente.
+
Artillery blog
+
La compañía de videojuegos HTML5 Artillery tiene algunos artículos útiles en su blog.
+
+
+ +
+

Temas de desarrollo de Videojuegos

+ +
+
Herramientas
+
Esta sección cubre las herramientas disponibles para facilitar la creación de experiencias de juego eficaces en la Web, como los frameworks, compiladores, como Emscripten y herramientas de depuración. Explica el núcleo de conceptos detrás de cada uno dándote una base sólida para trabajar.
+
Técnicas
+
Esta sección contiene muchos artículos tratando técnicas esenciales para el desarrollo de videojuegos, como la física, detección de colisión, animación, 3D, guardado de datos, y mucho más.
+
Flujo de trabajo
+
Esta sección incluye múltiples casos de estudio, obteniendo las herramientas básicas y técnicas cubiertas por encima y aplicar éstas a la creación de videojuegos asombrosos. Hay algo para ti aquí, si eres un desarrollador Web experimentado queriendo escribir videojuegos 2D o 3D, un desarrollador de C++ buscando portar juegos nativos a la Web o un desarrollador móvil buscando ayuda para escribir mejores juegos móviles.
+
+ +

Demos

+ +
+
BananaBread
+
Un multijugador shooter 3D de primera persona desarrollado usando Emscripten, WebGL, y WebRTC.
+
Serpent game
+
Esta Open Web App es un juego simple basado en el clásico juego "Snake". Usa la plantilla WebGameStub, que puede ayudarte a crear rápidamente un juego para la Web.
+
Monster Madness
+
Un juego en línea multijugador shooter basado en WebGL y asm.js, desarrollado por Nom Nom Games y Trendy entertainment.
+
+
+
+
+ +
+

Tenga en cuenta que estamos manteniendo un registro de los trabajos en curso sobre la documentación en nuesta página Estado de la Documentación de Desarrollo de Videojuegos. Si quieres ayudar a contribuir para la documentación de desarrollo de videojuegos, por favor, ¡busque en esta página para ver qué trabajo necesita hacerse!.

+
diff --git a/files/es/games/introduccion/index.html b/files/es/games/introduccion/index.html new file mode 100644 index 0000000000..b19ea1a61e --- /dev/null +++ b/files/es/games/introduccion/index.html @@ -0,0 +1,167 @@ +--- +title: Introduccion para desarrollo de juegos para la Web +slug: Games/Introduccion +tags: + - Firefox OS + - juegos + - moviles +translation_of: Games/Introduction +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
La Web rapidamente se ha convertido en una plataforma viable no solo para crear impresionantes juegos de alta calidad, sino también para distruibuirlos.
+ +
+ +
El rango de juegos que pueden ser creados está a la par tanto de los juegos de escritorio como de SO nativos (Android, iOS). Con tecnologias Web modernas y un navegador reciente es totalmente posible hacer juegos de primera categoria para la Web. Y no estamos hablando sobre simples juegos de cartas o juegos sociales multijugadores que en tiempos anteriores se podian hacer con Flash®. Estamos hablando sobre juegos 3D shooters de accion, RPGs, y más. Gracias a las masivas mejoras de rendimiento en JavaScript  con tecnologia de compilación just-in-time y nuevas APIs, se pueden construir juegos que pueden correr en el navegador (o en dispositivos HTML5 como Firefox OS) sin problemas.
+ +

La plataforma de juegos HTML5

+ +

Puedes pensar en la Web como una mejor opción de plataforma para desarrollar tu juego. Como nos gusta decir, "la Web es la plataforma". Hechemos un vistazo al nucleo de la plataforma Web:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionTecnología
AudioWeb Audio API
GraficosWebGL (OpenGL ES 2.0)
EntradaTouch events, Gamepad API, device sensors, WebRTC, Full Screen API, Pointer Lock API
LenguajeJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
RedesWebRTC and/or WebSockets
AlmacenamientoIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (y mucho más!)
+ +

El caso de Exito

+ +
Como un desarrollador de juegos, de forma individual o como un gran studio de juegos, tu quieres por que tiene sentido apuntar a la Web como tu práximo proyecto de juego. Veamos como la Web puede ayudarte.
+ +
+ +
    +
  1. +
    El alcance de la Web es enorme; está en todas partes. Los juegos construidos con HTML5 funcionan en smartphones, tablets, PCs y Smart TVs.
    +
    2. +
  2. Se mejoran la comercialización y la detección. No estás limitado a promocionar tu aplicación en la tienda de aplicaciones de otra persona. En su lugar, puede anunciar y promover su juego en toda la Web, así como en otros medios, aprovechando la inherente capacidad de enlace y capacidad de compartir de la Web para llegar a nuevos clientes.
    3. +
  3. Usted tiene control donde importa: Pagos. Usted no tiene que entregar más del 30% de sus ingresos a otra persona sólo porque su juego está en su ecosistema. En su lugar, cargue lo que quiera y utilice cualquier servicio de procesamiento de pagos que le guste.
    4. +
  4. Una vez más con más control, puedes actualizar tu juego cuando quieras. No hay que esperar sin aliento para la aprobación, mientras que alguien oculto dentro de otra empresa decide si su solución de error crítico se enviará hoy o mañana.
    5. +
  5. ¡Controla tus análisis! En lugar de confiar en otra persona para tomar todas las decisiones sobre qué analítica necesita, puede recoger su propia o elegir la tercera parte que más le guste para recopilar información sobre sus ventas y el alcance de su juego.
    6. +
  6. Usted consigue manejar su relación del cliente más de cerca, en su propia manera. No más tener comentarios de los clientes filtrados a través de los mecanismos limitados de una tienda de aplicaciones. Involucrarse con sus clientes de la manera que desee, sin un intermediario.
    7. +
  7. Sus jugadores pueden jugar su juego en cualquier lugar, en cualquier momento. Debido a que la Web es omnipresente, sus clientes pueden comprobar el estado de su juego en sus teléfonos, tabletas, computadoras portátiles domésticas, sus escritorios de trabajo o cualquier otra cosa.
    8. +
+ +

Tecnologías web para desarrolladores de juegos Edit

+ +

Para la gente de tecnología, vamos a cavar en las API que la Web aporta a la mesa que atienden a los desarrolladores de juegos. Esta es una lista exhaustiva para darle una muestra de lo que la Web puede hacer por usted:

+ +
+
+
API de pantalla completa
+
Esta sencilla API permite que su juego se haga cargo de toda la pantalla, sumergiendo al jugador en acción.
+
API de Gamepad
+
Si desea que sus usuarios puedan usar gamepads u otros controladores de juego para trabajar su juego, necesitará esta API.
+
HTML y CSS
+
Juntas, estas dos tecnologías le permiten construir, diseñar y diseñar la interfaz de usuario de su juego. Parte de HTML es el elemento <canvas> , que proporciona una forma de hacer gráficos 2D.
+
Audio HTML
+
El elemento <audio> te permite reproducir fácilmente efectos de sonido y música sencillos. Si sus necesidades están más involucradas, echa un vistazo a la API de audio web para obtener potencia de procesamiento de audio real.
+
IndexedDB
+
Una poderosa API de almacenamiento de datos para mantener los datos del usuario en su propio ordenador o dispositivo. Una gran manera de guardar el estado del juego y otra información localmente para que no tenga que ser descargado cada vez que sea necesario. También es útil para ayudar a que su juego sea jugable incluso cuando el usuario no está conectado a la Web (por ejemplo, cuando están atrapados en un avión durante horas y horas ...).
+
JavaScript
+
JavaScript, el lenguaje de programación utilizado en la Web, está ardiendo rápido en los navegadores modernos y cada vez más rápido. Usa su poder para escribir el código para tu juego, o mira usando tecnologías como Emscripten o Asm.js para portar fácilmente tus juegos existentes.
+
API de bloqueo de puntero
+
La API de Bloqueo de Puntero le permite bloquear el ratón u otro dispositivo señalador dentro de la interfaz de su juego para que en lugar de posicionamiento absoluto del cursor reciba deltas de coordenadas que le den medidas más precisas de lo que el usuario está haciendo e impide que el usuario envíe accidentalmente su entrada En algún otro lugar, por lo tanto falta una acción importante.
+
SVG (Gráficos Vectoriales Escalables)
+
Permite crear gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
+
Matrices Arrays
+
Los arrays tipados en JavaScript le dan acceso a datos binarios sin procesar desde JavaScript; Esto le permite manipular texturas GL, datos de juego, o cualquier otra cosa, incluso si no está en un formato JavaScript nativo.
+
API de audio web
+
Esta API para controlar la reproducción, síntesis y manipulación de audio a partir de código JavaScript le permite crear efectos de sonido impresionantes, así como jugar y manipular música en tiempo real.
+
WebGL
+
Permite crear gráficos 3D (y 2D) acelerados por hardware de alto rendimiento a partir del contenido Web. Se trata de una implementación Web de OpenGL ES 2.0.
+
WebRTC
+
La API WebRTC (Comunicaciones en tiempo real) le permite controlar los datos de audio y vídeo, incluyendo la teleconferencia y la transmisión de otros datos de la aplicación entre dos usuarios. ¿Quieren que sus jugadores puedan hablar entre sí mientras explotan monstruos? Esta es la API para usted.
+
WebSockets
+
La API de WebSocket le permite conectar su aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juego multijugador, servicios de chat, y así sucesivamente.
+
Trabajadores de la Web
+
Los trabajadores le dan la posibilidad de generar hilos de fondo que ejecutan su propio código JavaScript, para aprovechar los modernos procesadores multi-núcleo.
+
XMLHttpRequest y API de archivos
+
La combinación de XMLHttpRequest y la API de archivos le permiten enviar y recibir cualquier tipo de datos que desee (no deje que el "XML" te lance!) Desde un servidor Web. Esta es una gran manera de hacer cualquier cosa desde la descarga de nuevos niveles de juego y obras de arte a la transmisión de información de estado de juego en tiempo no real de ida y vuelta.
+
+
+ + + +
+
+ +
+ +
+

Etiquetas y colaboradores del documento

+ +
Etiquetas: + + +
+ +
Colaboradores en esta página: Albizures , atlas7jean
+ +
Última actualización por: Albizures ,
+
+
+ +
+ +
diff --git "a/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" "b/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" new file mode 100644 index 0000000000..dcbaca6422 --- /dev/null +++ "b/files/es/games/introducci\303\263n_al_desarrollo_de_juegos_html5_(resumen)/index.html" @@ -0,0 +1,108 @@ +--- +title: Introducción al desarrollo de juegos HTML5 (resumen) +slug: Games/Introducción_al_desarrollo_de_juegos_HTML5_(resumen) +tags: + - Firefox OS + - HTML5 + - Móvil + - juegos +translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

Ventajas

+ +
    +
  1. Los juegos hechos con HTML5 funcionan en smartphones, tabletas, PCs y Smart TVs.
    2. +
  2. Anuncia y promociona tu juego en toda la web, así como en otros medios.
    3. +
  3. Pagos. Carga lo que quieras y usa el servicio de procesamiento de pagos que desees.
    4. +
  4. Actualiza tu juego cuando quieras.
    5. +
  5. ¡Colecciona tus propios análisis!
    6. +
  6. Conécta con tus clientes más de cerca.
    7. +
  7. Los jugadores pueden jugar el juego en cualquier lugar, en cualquier momento.
    8. +
+ +

Tecnologías Web

+
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadTecnología
AudioWeb Audio API
GraphicsWebGL (OpenGL ES 2.0)
InputTouch events, Gamepad API, sensores del dispositivo, WebRTC, Full Screen API, Pointer Lock API
LanguageJavaScript (o C/C++ usando Emscripten para compilar a JavaScript)
NetworkingWebRTC y/o WebSockets
StorageIndexedDB o la "nube"
WebHTML, CSS, SVG, Social API (¡y muchos más!)
+ +
+
+
Full Screen API
+
Juego de pantalla completa.
+
Gamepad API
+
Utiliza gamepads u otros controladores de juego.
+
HTML y CSS
+
Crea, diseña y diseña la interfaz de usuario de tu juego.
+
HTML audio
+
Juega fácilmente efectos de sonido simples y música.
+
IndexedDB
+
Almacena los datos del usuario en tu propio ordenador o dispositivo.
+
JavaScript
+
Rápido lenguaje de programación web para escribir el código de tu juego.
+ Para portar fácilmente tus juegos existentes en Emscripten o Asm.js
+
Pointer Lock API
+
Bloquea el ratón u otro dispositivo señalador dentro de la interfaz de tu juego.
+
SVG (Scalable Vector Graphics)
+
Cree gráficos vectoriales que se escalan sin problemas, independientemente del tamaño o la resolución de la pantalla del usuario.
+
Typed Arrays
+
Accede a datos binarios sin procesar desde JavaScript; Manipula texturas GL, datos de juegos, o cualquier otra cosa.
+
Web Audio API
+
Controla la reproducción, síntesis y manipulación del audio en tiempo real.
+
WebGL
+
Cree gráficos 3D (y 2D) acelerados por hardware y de alto rendimiento. OpenGL ES 2.0.
+
WebRTC
+
Las comunicaciones en tiempo real para controlar los datos de audio y video, incluidas las teleconferencias y la transmisión de datos de otras aplicaciones entre dos usuarios, como el chat.
+
WebSockets
+
Conecte tu aplicación o sitio a un servidor para transmitir datos de un lado a otro en tiempo real. Perfecto para la acción de juegos multijugador, servicios de chat, etc.
+
Web Workers
+
Genere hilos de fondo ejecutando tu propio código JavaScript para procesadores multi-core.
+
XMLHttpRequest y File API
+
Envía y recibe cualquier tipo de información que desees desde un servidor web, como descargar nuevos niveles de juego y material gráfico para transmitir información de estado del juego en tiempo no real.
+
+
+ +

 

diff --git a/files/es/games/publishing_games/game_distribution/index.html b/files/es/games/publishing_games/game_distribution/index.html new file mode 100644 index 0000000000..c7f57b87be --- /dev/null +++ b/files/es/games/publishing_games/game_distribution/index.html @@ -0,0 +1,140 @@ +--- +title: Distrbución de juegos +slug: Games/Publishing_games/Game_distribution +tags: + - CocoonIO + - Distribución + - Distribución de juegos para móviles + - HTML5 + - JavaScript + - Juego de azar + - Phonegap + - Publicación de un juego + - Tiendas web + - juego + - juegos +translation_of: Games/Publishing_games/Game_distribution +--- +
{{GamesSidebar}}
+ +

Has seguido un tutorial o dos y creado un juego de HTLM5 — eso es genial. Este artículo cubre todo lo que necesitas saber sobre las formas en que puedes distribuir tu juego recién creado al mundo. Esto incluye alojarlo tu mismo en línea, enviarlo a mercados abiertos, y enviándolo a aplicaciones cerradas como Google Play o iOS App Store.

+ +

Beneficios de  HTML5 sobre nativo

+ +

Construir juegos con HTML5 te da ventajas, como:

+ +

Felicidad multiplataforma

+ +

La tecnología en si es multiplataforma, por lo que puedes escribir el código una vez y apuntarle a múltiples dispositivos. Esto puede ir desde teléfonos inteligentes o tabletas de gama baja, portátiles y ordenadores de escritorio, a smart TVs, relojes o incluso una nevera si puede manejar un navegador lo suficientemente moderno.

+ +

No necesitas tener equipos separados para trabajar en el mismo título que le apunta a diferentes plataformas, con solo una base de código para preocuparse. Puedes invertir más tiempo y dinero en  Promociones y Monetizar.

+ +

Actualizaciones instantáneas

+ +

No tienes que esperar varios días para tener el código de tus juegos actualizado. Si tus usuarios encuentran fallas, puedes solucionarlas rápidamente, actualizando el sistema y el juego en tu servidor para proporcionar a los jugadores el código actualizado casi al instante.

+ +

Distribución directa de enlaces y reproducción instantánea

+ +

No tienes que decirle a la gente que busque tu juego en una tienda de aplicaciones con juegos HTML5. Puedes simplemente enviarles un enlace directo con acceso al juego, en el que pueden hacer click para jugar de inmediato sin necesidad de utilizar complementos de terceros o descargar e instalar un paquete grande. Tienes que tener en cuenta que descargar el juego seguramente lleva un poco de tiempo dependiendo del tamaño del juego y de la velocidad de la red. En cualquier caso, es mucho más fácil promocionar el juego si puedes conducir el tráfico directamente a donde tu quieras y no tener que estar saltando muchas trabas.

+ +

Escritorio vs móvil

+ +

La gran mayoría del tráfico en el que estamos interesados — gente jugando en HTML5 — viene de los dispositivos móviles entonces eso es algo en lo que te tienes que enfocar si quieres tener éxito. En los dispositivos móviles la tecnología HTML5 realmente puede brillar y mostrar sus ventajas. No hay Flash, y HTML5 es completamente una multiplataforma.

+ +

Intentar competir directamente con los juegos de escritorio es muy difícil. Puedes poner tus juegos de HTML5 en la misma área (ver {{anch("Native desktop")}}, later on) y deberías, porque es bueno diversificar las plataformas que soporta, pero tienes que recordar que los desarrolladores de juegos de escritorio tienen años de experiencia, grandes herramientas y canales sólidos de distribución. Muchos juegos de HTML5 le apuntarán a diferentes segmentos del mercado que los juegos de escritorio nativos, por ejemplo, juegos simples para pasar el tiempo mientras estás en movimiento en lugar de grandes experiencias de inmersión. Tales juegos, están normalmente diseñados para ser jugados con dos, o incluso un dedo, así puedes sujetar el dispositivo, jugar al juego y ser capaz de usar la segunda mano para lo que necesites.

+ +

Dicho esto, las plataformas de escritorio pueden utilizarse para la distribución con bastante facilidad con la disponibilidad de wrappers que te pueden ayudar a preparar las compilaciones nativas de tu juego, mira {{anch("Packaging games")}}. También es recomendable probar los controles de escritorio para tus juegos incluso si tu enfoque está en los dispositivos móviles. Los jugadores disfrutaran de tus juegos en cualquier plataforma disponible, y el escritorio es una de ellas. Además,  es generalmente más fácil construir y probar el juego primero en escritorio, y luego pasar a probarlo en los dispositivos móviles.

+ +

Publicando el juego

+ +

Hay tres opciones principales cuando quieres publicar un juego:

+ + + +

Recuerda que el nombre de tu juego debería ser lo suficientemente exclusivo para ser promovido rápidamente más adelante, pero también lo suficientemente adictivo, para que la gente no se olvide de él.

+ +

Self-hosting

+ +

Si eres un desarrollador de interfaces, es posible que sepas que hacer. Un juego de HTML5 es solo otra página web. Puedes actualizarla desde un servidor remoto, obtener un nombre de dominio atractivo y hostearlo tu mismo.

+ +

 Si quieres ganar dinero del desarrollo de juegos, deberás asegurar el código fuente de una manera u otra contra personas que podrían fácilmente cogerlo y venderlo como propio. Puedes concatenar y minimizar el código para hacerlo más pequeño y afearlo, así es mucho más difícil hacer ingeniería inversa en tu juego. Otra buena medida para  tomar es proporcionar una demo online si estas planeando empaquetarlo y venderlo en una tienda cerrada como iTunes o Steam.

+ +

Si estás trabajando en un proyecto paralelo solo por diversión, entonces dejar el código fuente abierto beneficiará a quienes deseen aprender de lo que has creado. Ni siquiera tienes que preocuparte por buscar un proveedor de alojamiento, ya que es posible hostear juego en las páginas de GitHub. Obtendrás alojamiento gratuito, control de versiones y posibles colaboraciones si tu proyecto es lo suficientemente interesante.

+ +

Editores y portales

+ +

Como el nombre lo indica, los editores pueden manejar la publicación de tu juego por ti. Si debe ir de esa manera o no, depende de cuál sea tu plan para distribuir el juego: ¿Quieres venderlo donde sea posible, o quieres restringir su presencia a aquellos que han comprado una licencia exclusiva? Tu decides. Considera varias opciones, experimenta y saca conclusiones. Los editores se explicarán con más detalle en el artículo de monetización.

+ +

También hay portales independientes que recogen juegos interesantes como HTML5Games.com, MarketJS.com o Clay.io donde puedes mandar tus juegos y obtendrás algo de promoción natural debido al gran tráfico que esos sitios atraen. Algunos de estos toman tus archivos y los hostean en sus servidores, mientras que otros solo enlazan a su sitio web o insertan tu juego en su sitio. Tal exposición solo puede proporcionar promoción para tu juego, o si tienes anuncios en el juego (u otra opción de conseguir dinero) también puede ofrecer monetización.

+ +

Tiendas web y nativas

+ +

También puedes subir y publicar tu juego directamente en diferentes tipos de tiendas, o mercados. Para hacerlo, tendrás que prepararlo y empaquetarlo en un formato de compilación específico para cada ecosistema de aplicaciones al que deseas orientarlo. Consulta {{anch("Marketplaces — distribution platforms")}} para más detalles de qué tipos de mercados están disponibles.

+ +

Mercados— Plataformas de distribución

+ +

Veamos cuáles son las opciones disponibles con respecto a los mercados/tiendas disponibles para diferentes plataformas y sistemas operativos.

+ +
+

Nota: Estas son las plataformas de distribución más populares, pero esto no quiere decir que sean la única opción. En lugar de intentar sumar tu juego a los miles de otros en la tienda de iOS,  también puedes intentar encontrar un nicho y promocionar directamente al público que esté interesado en tus juegos. Tu creatividad es crítica aquí.

+
+ +

Tiendas web

+ +

Las mejores plataformas para juegos HTML5 son las tiendas basadas en la web. Es fácil preparar un juego para estas tiendas, puesto que tal  acción implica poca o ninguna modificación del juego en sí — normalmente, es suficiente añadir un archivo de manifiesto que contenga la información necesaria en un paquete comprimido que incluya todos los recursos.

+ + + +

Tiendas de aplicaciones móviles nativas

+ +

Cuando se trata del mercado de aplicaciones móviles, están la Apple App Store para iOS, Google Play para Android y el resto de la competencia. Las tiendas nativas ya están llenas de desarrolladores establecidos que venden grandes juegos, por lo que debes ser talentoso y tener suerte para que te vean.

+ + + +

Si estas buscando más información sobre los diferentes tipos de tiendas de aplicaciones, puedes consultar la lista de plataformas de distribución de software móvil en este artículo de Wikipedia.

+ +

Escritorio nativo

+ +

Para ampliar tu audiencia, también puedes revisar el ecosistema de escritorio con sus juegos HTML5 — solamente recuerda que todos los juegos populares AAA toman la mayor parte de la cuota del mercado, y piensa cuidadosamente si esto se adapta a tu estrategia. Para que funcione correctamente en escritorios debe funcionar en los tres sistemas operativos: Windows, Mac OS y Linux. La mayor tienda de escritorio para juegos es definitivamente Steam — desarrolladores indie pueden acceder a Steam a través del programa Greenlight. Recuerda que tu mismo tienes que lidiar con los problemas multiplataforma cargando versiones separadas para diferentes plataformas.

+ +

Después de que hayas cubierto Steam, hay un montón de rumores alrededor de iniciativas como Humble Bundle donde los juegos indie más populares se presentan a un público más amplio. Es más como una excelente oportunidad de promoción que una forma de ganar mucho dinero, sin embargo, los precios pagados por los juegos en un paquete generalmente son bastante bajos.

+ +

Juegos de empaquetado

+ +

La web es la primera y la mejor opción para juegos de HTML5, pero si quieres buscar una audiencia más amplia y distribuir tu juego en un ecosistema cerrado, todavía puedes hacerlo empaquetándolo.

+ +

Lo bueno es que no necesitas muchos equipos separados trabajando en el mismo juego para diferentes plataformas — puedes construirlo una vez y usar herramientas como Phonegap o CocoonIO para empaquetar el juego en tiendas nativas. Los paquetes resultantes suelen ser bastante fiables, pero todavía deberias probarlos y estar atento a pequeños problemas o errores que solucionar.

+ +

Herramientas disponibles

+ +

Hay varias herramientas para elegir dependiendo de tus habilidades, marcos preferidos o plataformas de destino. Se trata de elegir la mejor herramienta para tu tarea particular.

+ + + +

Otras herramientas alternativas son:

+ + + +

Resumen

+ +

La distribución es el camino para dar acceso al mundo a tu juego. Hay muchas opciones disponibles y no hay una única respuesta en cuanto a cuál es la mejor. Cuando publiques el juego es momento de enfocarse en la promoción — dejar que la gente sepa que tu juego existe. Sin promoción, ni siquiera serían capaces de aprender y jugar con él.

diff --git a/files/es/games/publishing_games/index.html b/files/es/games/publishing_games/index.html new file mode 100644 index 0000000000..78d4c80917 --- /dev/null +++ b/files/es/games/publishing_games/index.html @@ -0,0 +1,32 @@ +--- +title: Publicación de juegos +slug: Games/Publishing_games +tags: + - Games + - HTML5 + - JavaScript + - Monetization + - NeedsTranslation + - Promotion + - Publicacion + - TopicStub + - distribution + - juegos + - publishing +translation_of: Games/Publishing_games +--- +
{{GamesSidebar}}
+ +

Los juegos desarrollados en HTML5 tienen una gran ventaja sobre los nativos en términos de publicación y distribución: tienen la libertad de distribución, promoción y monetización de su juego en la Web, en lugar de que cada versión esté restringida a una única tienda controlada por una empresa. Pueden, beneficiándose de la web, ser verdaderamente multiplataforma. Esta serie de artículos analiza las opciones que tienes a la hora de publicar y distribuir tu juego, y ganar algo con él mientras esperas que se haga famoso.

+ +

Distribución

+ +

Así que has seguido un tutorial o dos y has creado un juego HTML5. ¡Genial! La distribución de juegos proporciona todo lo que se necesita saber sobre las formas en que puede distribuir su juego recién creado, incluido hospedarlo en línea, enviarlo a mercados abiertos y enviarlo a sitios cerrados como GooglePlay o iOS App Store.

+ +

Promoción

+ +

Desarrollar y terminar el juego no es suficiente. Tienes que hacerle saber al mundo que has hecho disponible algo interesante, que la gente disfrutará jugando. Existen muchas técnicas de promoción de juegos , muchas de ellas gratuitas, por lo que incluso si estás luchando por ganarte la vida como un desarrollador independiente con presupuesto limitado, aún puedes hacer mucho para que la gente sepa acerca de tu nuevo juego. Promocionar el juego también ayuda a monetizarlo más tarde, por lo que es importante hacerlo con eficacia.

+ +

Monetización

+ +

Cuando dedicas tiempo a desarrollar, publicar y promocionar un juego, llega un punto en el que considerarás ganar dinero con él. La monetización del juego es esencial para cualquier persona que considere que su trabajo de desarrollo es un esfuerzo serio en el camino de convertirse en un desarrollador independiente capaz de ganarse la vida, así que siga leyendo y vea cuáles son sus opciones. La tecnología es lo suficientemente madura; Es solo cuestión de elegir el enfoque correcto.

diff --git "a/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" "b/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" new file mode 100644 index 0000000000..1549b222da --- /dev/null +++ "b/files/es/games/publishing_games/monetizaci\303\263n_de_los_juegos/index.html" @@ -0,0 +1,100 @@ +--- +title: Monetización de videojuegos +slug: Games/Publishing_games/Monetización_de_los_juegos +tags: + - HTLM5 + - JavaScript + - Licencias + - anuncios + - juegos + - marca + - monetización +translation_of: Games/Publishing_games/Game_monetization +--- +
{{GamesSidebar}}
+ +

Cuando empleas tu tiempo en crear un juego, distribuirlo y promocionarlo deberías considerar ganar un poco de dinero con ello. Si tu trabajo es un esfuerzo serio en tu camino para ser un desarrollador independiente de juegos capaz de ganarse la vida, sigue leyendo y verás cuales son tus opciones. La tecnología es lo suficientemente madura; ahora es cuestión de elegir el enfoque adecuado.

+ +

Juegos de pago

+ +

Lo primero, la opción más obvia que probablemente venga a tu mente, podría ser vender los juegos de la forma en que se realiza para grandes títulos AAA ---- con un precio fijado por adelantado. Aunque el mercado digital es clave y no necesitas imprimir portadas y sacar tu juego en una tienda física, para ganar un dinero decente vendiendo tus juegos con un precio fijo, tienes que invertir tu tiempo y dinero en marketing. Solo con los mejores juegos se recupera o gana más de lo que costo hacerlo, y necesitas un montón de suerte para ello.

+ +

Cuanto ganes por tu jugo depende del mercado, la calidad de tu juego y otros tantos pequeños factores. Un título de arcade para iOS puede venderse por 0,99 USD, pero un juego de escritorio estilo RPG más largo, en Steam, puede venderse por 20 USD; ambos precios están bien. Tienes que seguir el mercado y tu propia investigación --- aprender rápido de tus errores es importante.

+ +

Compras en la aplicación

+ +

En lugar de que la gente pague por tu juego por adelantado, puedes ofrecer un juego de forma gratuita con compras dentro de la aplicación. En este caso, el juego puede ser adquirido sin gastarse un centavo --- dar el juego a los jugadores, pero ofreciendo monedas del juego, bonus extra  o beneficios por dinero real. Ejemplos específicos pueden ser, incluir bonus de nivel, mejores armas o hechizos, o volver a llenar la energía necesaria para jugar. Diseñar un buen sistema de compras en la aplicación es un arte propio.

+ +

Recuerda que necesitas miles de descargas de tu juego para hacer efectivas/rentables las compras en la aplicación --- solo una pequeña parte de los jugadores pagará por las compras en la aplicación. ¿Cómo de pequeña? Varía, pero alrededor de una persona por cada mil es aproximadamente la media. Cuantas más personas jueguen a tu juego, mayor será la probabilidad de que alguien pague, o sea que tus beneficios dependen en gran medida de tus actividades de promoción.

+ +

Freemium

+ +

Los juegos que ofrecen compras en el juego, a menudo se refieren a freemium --- un juego freemium puede ser adquirido y jugado gratis, pero puedes pagar por características extra (premium), bienes virtuales u otros beneficios. La palabra en sí, adquirió una connotación negativa después de que las grandes compañías se centraran en crear juegos, cuyo objetivo principal era ganar el máximo dinero posible de los jugadores, en lugar de proporcionar una experiencia divertida. Los peores casos fueron cuando podías utilizar dinero real para obtener ventajas sobre otros jugadores, o cuando restringían el acceso a las siguientes etapas del juego, a menos que los jugadores pagaran. El término "pagar para ganar" fue acuñado y este enfoque no gustó a muchos jugadores  y desarrolladores. Si quieres implementar compras dentro del juego asegúrate de que intenten añadir valor al juego con algo que los jugadores disfruten, en lugar de sacarlo y luego cobrarlo.

+ +

Complementos y DLCs

+ +

 

+ +

Los complementos y el contenido descargable son una buena manera de proporcionar un valor extra a un juego ya lanzado, pero recuerda que tendrás que ofrecer contenido decente y entretenido para atraer a la gente a comprarlo. Un conjunto totalmente nuevo de niveles con nuevos personajes, armas e historia es un buen material para DLC, pero para tener suficientes ventas el juego en sí debe ser popular, o de lo contrario no habrá jugadores interesados ​​en gastar su dinero duramente ganado. eso.

+ +

En lugar de vender activamente los juegos, también puede intentar obtener un ingreso pasivo: mostrar anuncios y confiar en actividades anteriores relacionadas con la promoción de su juego puede ser beneficioso, pero su juego debe ser adictivo, lo cual no es tan fácil como parece. Todavía necesitas planearlo, y en algún momento también necesitarás un poco de suerte. Si su juego se vuelve viral y la gente comienza a compartirlo, puede obtener muchas descargas y dinero de los anuncios.

+ +

Hay muchas compañías que ofrecen sistemas de publicidad: usted se registra y les permite mostrar anuncios a cambio de un porcentaje de las ganancias. Se dice que Google AdSense es el más efectivo, pero no está diseñado para juegos y es una práctica bastante mala usarlo para ese propósito. En lugar de arriesgarse a que se cierre su cuenta y se bloquee todo el dinero, intente utilizar los portales habituales de gamedev como LeadBolt. Ofrecen sistemas fáciles de implementar para mostrar los anuncios en sus juegos y dividir las ganancias con usted.

+ +

Los anuncios de video son cada vez más populares, especialmente en forma de pre-roll: se muestran al principio de su juego mientras aún se está cargando. Y sobre el tema de dónde colocar los anuncios en tu juego, realmente depende de ti. Debería ser lo más sutil posible para no molestar demasiado a los jugadores, pero lo suficientemente visible como para hacerles clic o al menos tomar nota. Adición de anuncios entre sesiones de juego en juego sobre pantallas es un enfoque popular.

+ +

 

+ +

Licencias

+ +

Hay un enfoque que puede funcionar como un modelo de monetización por sí mismo, y es vendiendo licencias para la distribución de tu juego. Existen más y más portales interesados en enseñar tu juego en sus páginas web. Ellos siguen varias estrategias para ganar dinero, gracias a tus juegos, pero no te tienes que preocuparte sobre eso, ya que la venta de la licencia suele ser un contrato único. Tu consigues el dinero y ellos pueden ser creativos con el uso de tu juego para hacer dinero con él.

+ +

Encontrar editores puede ser difícil la primera vez --- intenta buscarlos en los foros HTML5 Gamedevs. Si eres bien conocido, los editores llegarán a ti. La mayoria de las ofertas se realizan a través de correos electrónicos cuando se habla con una persona dedicada en el lado del editor. Algunos editores de sitios web tienen esa información a la vista, mientras que para contactar con otros editores es más difícil. Cuando busques un editor intenta ser amable e ir directo al grano --- son gente ocupada.

+ +

Licencias exclusivas

+ +

La licencia exclusiva es un tipo de licencia para un editor --- has creado un juego y vendes todos sus derechos a una única entidad junto con los derechos para redistribuirla ---- Softgames es un ejemplo de tal editor. No puedes vender el juego otra vez de ninguna forma mientras que el editor tenga los derechos --- esto es por lo que las ofertas exclusivas valen mucho dinero. ¿Cuánto exactamente? Depende de la calidad del juego, el género, el editor, y otros tantos factores, pero habitualmente puede estar entre los 2000 y 5000 USD. Un vez que vendiste una licencia exclusiva puedes olvidarte de promocionar ese juego en particular, ya que no ganarás más dinero con él, así que acepta tal oferta solo si estas seguro de que es lo suficientemente rentable.

+ +

Licencias no exclusivas

+ +

Este enfoque es menos estricto --- puedes vender una misma licencia a varios editores. Este es el enfoque más popular entre os editores nuevos (y los editores están apareciendo constantemente), puedes vender tus juegos con unos términos no exclusivos. Recuerda que con esta licencia el editor no puede redistribuirlo más --- a menudo se le llama un acuerdo de sitio cerrado cuando compran el derecho de publicar el juego en su propio portal. El coste normal de una licencia no exclusiva esta alrededor de 500 USD.

+ +

Subscripciones

+ +

También hay una opción para obtener un dinero pasivo mensual, a través de un acuerdo de subscripción. En lugar de obtener un único pago, puedes obtener pequeños pagos de dinero por juego, por mes --- puede estar entorno a 20-50 USD por mes, por juego. Normalmente depende de ti, si quieres ganar todo el dinero en un solo pago o ganarlo por meses. Recuerda que puede ser cancelado, o sea que no es una solución que funcione indefinidamente.

+ +

Ingresos por publicidad

+ +

Puedes implementar anuncios en tu juego tu mismo e intentar encontrar el tráfico adecuado para ganar un poco de dinero, pero también puedes hacer un acuerdo de reparto de ingresos con un editor. Los editores se encargarán de dirigir el tráfico y de dividir los beneficios --- habitualmente los acuerdos son de 70/30% o 50/50%, ganado por mes.

+ +

Recuerda que muchos nuevos editores de baja calidad querrán coger tu juego con ingresos por anuncios, en lugar de licencia, porque será más barato para ellos y podrías terminar con beneficios de 2 USD por juego por trato completado. Ten cuidado cuando contrates con nuevos editores --- algunas veces es mejor reducir el coste de la licencia a un editor conocido, en lugar de que te defraude un nuevo editor por más dinero.

+ +

Los editores cogen tus juegos para la participación en los beneficios, y/o licenciar podrá requerir implementar sus propias APIs, lo cual dará un trabajo extra, asi que considera eso en tu precio final.

+ +

Marca

+ +

Puedes vender los derechos de usar tu juego para la marca, o hacerlo tu mismo.  En el primer caso, es casi como una licencia no exclusiva, pero el cliente normalmente compra derechos para el código e implementarán sus propios gráficos. En el segundo caso, es como un trato independiente, pero estas reutilizando el código y añadiendo gráficos proporcionados por los clientes, algunas veces implementándolos como ellos te enseñen. Por ejemplo, si tu tienes un juego donde un jugador golpea los artículos de comida, podrías cambiar la comida a los productos del cliente para darles publicidad. Los precios en este modelo varían mucho dependiendo de la marca, cliente, y las horas que le eches.

+ +

Otras estrategias de monetización no enfocadas al juego

+ +

Hay otros caminos en los que puedes ganar dinero cuando haces juegos HTML5, y ni siquiera tiene que estar relacionado con el juego.

+ +

Venta de recursos

+ +

Si eres un diseñador gráfico, puedes vender los bienes de los juegos que has creado, o algo completamente nuevo exclusivamente para ese propósito en tiendas online como  Envato Market. No es mucho, pero si eres un diseñador conocido, puede ser una forma de ganar un dinero extra.

+ +

Escribir artículos y tutoriales

+ +

Es posible escribir artículos sobre tus juegos y que te paguen por ello. La promoción del juego y la monetización al mismo tiempo es un ganar-ganar, y si no abusas de ello con muchos anuncios, los lectores disfrutarán leyendo los artículos y aprenderán una o dos cosas. Si te enfocas en compartir el conocimiento primero y usas tus juegos solo como ejemplos, estará bien. Visita Tuts+ Game Development o sitios web similares para tener oportunidades donde escribir artículos.

+ +

Mercancías

+ +

Puedes vender camisetas, pegatinas o otros objetos --- algunos desarrolladores ganan más dinero con las mercancías que con sus propios juegos, pero solo funciona en juegos muy populares y reconocidos, como Angry Birds. Todavía, puede ser otra forma de ganar un poco de dinero. Cuanto más diversificados sean tus ingresos, mejor será tu estabilidad comercial.

+ +

Donaciones

+ +

Cuando todo lo demás falla puedes intentar poner un botón de donaciones en la página de tu juego y pedir apoyo de la comunidad. Algunas veces funciona, pero solo si el jugador te conoce y siente que te ayudará. Este es el porque de que manejar cuidadosamente la comunidad es tan importante. Funcionó con la competición de js13kGames --- todos los participantes obtuvieron una camiseta gratis, y algunos incluso dieron unos cuantos dólares para ayudarlo a seguir funcionado en los próximos años.

+ +

Resumen

+ +

Hay muchas maneras de ganar dinero --- todo lo que se aplica al mundo de los juegos AAA "normalmente" puede ser, más o menos, aplicable a los juegos casuales HTML5. Sin embargo, también podrías enfocarte en vender licencias, hacer marcas, o ganar unos beneficios compartidos de los anuncios. Depende totalmente de ti, que camino vas a seguir.

diff --git a/files/es/games/techniques/2d_collision_detection/index.html b/files/es/games/techniques/2d_collision_detection/index.html new file mode 100644 index 0000000000..e4d66bf13f --- /dev/null +++ b/files/es/games/techniques/2d_collision_detection/index.html @@ -0,0 +1,181 @@ +--- +title: 2D collision detection +slug: Games/Techniques/2D_collision_detection +tags: + - 2D + - Deteccion de colision + - JavaScript + - juegos +translation_of: Games/Techniques/2D_collision_detection +--- +
{{GamesSidebar}}

{{IncludeSubnav("/en-US/docs/Games")}}

+ +
+

Algoritmos para detectar la colision en juegos de 2D depende del tipo de formas con las que queramos colisionar (Ej.: Rectangulo, Circulo). Generalmente tendras una forma simple que cubre la "hitbox" (caja de colision), por lo tanto la colision no sera perfecta pixel a pixel, pero ira bien, en rendimiento. Este articulo cubre la mayoria de las tecnicas utilizadas para la colision para juegos en 2D.

+
+ +

Hitbox alineada con las cordenadas

+ +

Una de las formas mas sencillas es entre dos rectangulos que esten alineados con las cordenas, es decir, sin rotacion. El algoritmo funciona de manera que detecta si hay un agujero en alguno de los 4 lados del rectangulo. Si en un lado no hay un agujero, significa de que hay una colision.

+ +
var rect1 = {x: 5, y: 5, width: 50, height: 50}
+var rect2 = {x: 20, y: 10, width: 10, height: 10}
+
+if (rect1.x < rect2.x + rect2.width &&
+   rect1.x + rect1.width > rect2.x &&
+   rect1.y < rect2.y + rect2.height &&
+   rect1.height + rect1.y > rect2.y) {
+    // ¡colision detectada!
+}
+
+// reemplazando los valores =>
+
+if (5 < 30 &&
+    55 > 20 &&
+    5 < 20 &&
+    55 > 10) {
+    // ¡colision detecteda!
+}
+
+ + + +

 

+ +

{{ EmbedLiveSample('Rect_code', '700', '300', '', 'Games/Techniques/2D_collision_detection') }}

+ +

Colision circular

+ +

Otra colision simple es entre dos circulos. Funciona con los centros de los dos circulos y calculando la distancia entre los dos.

+ + + +
var circle1 = {radius: 20, x: 5, y: 5};
+var circle2 = {radius: 12, x: 10, y: 5};
+
+var dx = circle1.x - circle2.x;
+var dy = circle1.y - circle2.y;
+var distance = Math.sqrt(dx * dx + dy * dy);
+
+if (distance < circle1.radius + circle2.radius) {
+    // collision detected!
+}
+
+ +

{{ EmbedLiveSample('Playable_code', '700', '300', '', 'Games/Techniques/2D_collision_detection') }}

+ +

Note:  Here is another example without Canvas or external libraries.

+ +

El teorema de separar los ejes

+ +

Esto es un algoritmo que detecta la colision entre dos poligonos convexos. Ya que es complejo, se necesitara mejorar el rendimiento (explicado en la siguiente seccion). 

+ +

Mejorar el rendimiento de las colisiones

+ +

Algunos algoritmos son sencillos de calcular, en cambio otros no. Normalmente los juegos, se dividen en dos fases: "Broad" y "Narrow".

+ +

Broad Phase

+ +

Esta fase consiste en conseguir una lista de todas las cosas con las que se puede colisionar. Puede ser implementado con una estructura de datos que recoge que objetos hay alrededor de nuestro objeto.

+ +

Narrow Phase

+ +

Cuando tienes una lista pequeña, ya puedes detectar colision con un algoritmo.

diff --git a/files/es/games/techniques/3d_on_the_web/index.html b/files/es/games/techniques/3d_on_the_web/index.html new file mode 100644 index 0000000000..3944c617c6 --- /dev/null +++ b/files/es/games/techniques/3d_on_the_web/index.html @@ -0,0 +1,113 @@ +--- +title: 3D games on the Web +slug: Games/Techniques/3D_on_the_web +tags: + - Games + - Graphics + - NeedsContent + - NeedsExample + - NeedsTranslation + - TopicStub + - WebGL + - WebVR + - three.js +translation_of: Games/Techniques/3D_on_the_web +--- +
{{GamesSidebar}}

For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML {{htmlelement("canvas")}}. WebGL is basically an OpenGL ES 2.0 for the Web — it's a JavaScript API providing tools to build rich interactive animations and of course also games. You can generate and render dynamic 3D graphics with JavaScript that is hardware accelerated.

+ +

Documentation and browser support

+ +

The WebGL project documentation and specification is maintained by the Khronos Group, not the W3C as with most of the Web APIs. Support on modern browsers is very good, even on mobile, so you don't have to worry about that too much. The main browsers are all supporting WebGL and all you need to focus on is optimizing the performance on the devices you use.

+ +

There's an ongoing effort on releasing WebGL 2.0 (based on OpenGL ES 3.0) in the near future, which will bring many improvements and will help developers build games for the modern Web using current, powerful hardware.

+ +

Explaining basic 3D theory

+ +

The basics of 3D theory centers around shapes represented in a 3D space, with a coordinate system being used to calculate their positions. See our Explaining basic 3D theory article for all the information you need.

+ +

Advanced concepts

+ +

You can do a lot more with WebGL. There are some advanced concepts which you should dive into and learn more about — like shaders, collision detection, or the latest hot topic — virtual reality on the web.

+ +

Shaders

+ +

It's worth mentioning shaders, which are a separate story on their own. Shaders use GLSL, a special OpenGL Shading Language with syntax similar to C that is executed directly by the graphics pipeline. They can be split into Vertex Shaders and Fragment Shaders (or Pixel Shaders) — the former transforms shape positions to real 3D drawing coordinates, while the latter computes rendering colors and other attributes. You should definitely check out GLSL Shaders article to learn more about them.

+ +

Collision Detection

+ +

It's hard to imagine a game without the collision detection — we always need to work out when something is hitting something else. We have information available for your to learn from:

+ + + +

WebVR

+ +

The concept of virtual reality is not new, but it's storming onto the web thanks to hardware advancements such as the Oculus Rift, and the (currently experimental) WebVR API for capturing information form VR hardware and making it available for use in JavaScript applications. For more, read WebVR — Virtual Reality for the Web.

+ +

There's also the Building up a basic demo with A-Frame article showing you how easy it is to build 3D environments for virtual reality using the A-Frame framework.

+ +

The rise of libraries and frameworks

+ +

Coding raw WebGL is fairly complex, but you'll want to get to grips with it in the long run, as your projects get more advanced (see our WebGL documentation to get started.) For real world projects you'll probably also make use of a framework to speed up development and help you manage the project you're working on. Using a framework for 3D games also helps optimize the performance as a lot is taken care of by the tools you use, so you can focus on building the game itself.

+ +

The most popular JavaScript 3D library is Three.js, a multi-purpose tool that makes common 3D techniques simpler to implement. There are other popular game development libraries and frameworks worth checking too; A-Frame, PlayCanvas and Babylon.js are among the most recognizable ones with rich documentation, online editors and active communities.

+ +

Building up a basic demo with A-Frame

+ +

A-Frame is a web framework for building 3D and VR experiences. Under the hood, it is a three.js framework with a declarative entity-component pattern, meaning we can build scenes with just HTML. See the Building up a basic demo with A-Frame subpage for the step-by-step process of creating the demo.

+ +

Building up a basic demo with Babylon.js

+ +

Babylon.js is one of the most popular 3D game engines used by developers. As with any other 3D library it provides built-in functions to help you implement common 3D functionality more quickly. See the Building up a basic demo with Babylon.js subpage for the basics of using Babylon.js, including setting up a development environment, structuring the necessary HTML, and writing the JavaScript code.

+ +

Building up a basic demo with PlayCanvas

+ +

PlayCanvas is a popular 3D WebGL game engine open sourced on GitHub, with an editor available online and good documentation. See the Building up a basic demo with PlayCanvas subpage for high level details, and further articles showing how to create demos using the PlayCanvas library, and the online editor.

+ +

Building up a basic demo with Three.js

+ +

Three.js, as any other library, gives you a huge advantage: instead of writing hundreds of lines of WebGL code to build anything interesting you can use built-in helper functions to do it a lot easier and faster. See the Building up a basic demo with Three.js subpage for the step-by-step process of creating the demo.

+ +

Other tools

+ +

Both Unity and Unreal can export your game to WebGL with asm.js, so you're free to use their tools and techniques to build games that will be exported to the web.

+ +

+ +

Where to go next

+ +

With this article we just scratched the surface of what's possible with currently available technologies. You can build immersive, beautiful and fast 3D games on the Web using WebGL, and the libraries and frameworks build on top of it.

+ +

Source code

+ +

You can find all the source code for this series demos on GitHub.

+ +

APIs

+ + + +

Frameworks

+ + + +

Tutorials

+ + diff --git a/files/es/games/techniques/index.html b/files/es/games/techniques/index.html new file mode 100644 index 0000000000..66edeebd82 --- /dev/null +++ b/files/es/games/techniques/index.html @@ -0,0 +1,32 @@ +--- +title: Techniques for game development +slug: Games/Techniques +tags: + - Games + - Guide + - NeedsTranslation + - TopicStub +translation_of: Games/Techniques +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +
+

This page lists essential core techniques for anyone wanting to develop games using open web technologies.

+
+ +
+
Using async scripts for asm.js
+
Especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's JavaScript can be compiled off the main thread and be cached for future game running, resulting in a significant performance improvement for your users. This article explains how.
+
Optimizing startup performance
+
How to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.
+
Using WebRTC peer-to-peer data channels
+
In addition to providing support for audio and video communication, WebRTC lets you set up peer-to-peer data channels to exchange text or binary data actively between your players. This article explains what this can do for you, and shows how to use libraries that make this easy.
+
Efficient animation for web games
+
This article covers techniques and advice for creating efficient animation for web games, with a slant towards supporting lower end devices such as mobile phones. We touch on CSS transitions and CSS animations, and JavaScript loops involving {{ domxref("window.requestAnimationFrame") }}.
+
Audio for Web Games
+
Audio is an important part of any game — it adds feedback and atmosphere. Web-based audio is maturing fast, but there are still many browser differences to negotiate. This article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of platforms as possible.
+
2D collision detection
+
A concise introduction to collision detection in 2D games.
+
Tilemaps
+
Tiles are a very popular technique in 2D games for building the game world. These articles provide an introduction to tilemaps and how to implement them with the Canvas API.
+
diff --git a/files/es/games/techniques/webrtc_data_channels/index.html b/files/es/games/techniques/webrtc_data_channels/index.html new file mode 100644 index 0000000000..28687789d9 --- /dev/null +++ b/files/es/games/techniques/webrtc_data_channels/index.html @@ -0,0 +1,93 @@ +--- +title: WebRTC data channels +slug: Games/Techniques/WebRTC_data_channels +translation_of: Games/Techniques/WebRTC_data_channels +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{SeeCompatTable}}

+ +

La API WebRTC (Web Real-Time Communications - Comunicaciones WEB en tiempo real) es principalmente conocida por dar soporte en las comunicaciones de audio y video; sin embargo también ofrece canales de datos punto a punto. Este artículo explica más sobre esto y te muestra como usar librerias para implementar canales de datos en tu juego.

+ +

¿Qué es un canal de datos?

+ +

Un canal de datos WebRTC te permite enviar texto o datos binarios a través de una conexión activa a un punto. En el contexto de un juego, esto permite a los jugadores enviarse datos entre ellos, ya sea por chat de texto o por información de estado del juego. Los canales de datos vienen en dos sentidos.

+ +

Los canales fiables garantizan que los mensajes que envíes lleguen al otro interlocutor y en el mismo orden en que se enviaron. Esto es análogo a un socket TCP.

+ +

Los canales no confiables no ofrecen tales garantías; no se garantiza que los mensajes lleguen en un orden particular y, de hecho, no se garantiza que lleguen. Esto es análogo a un socket UDP.

+ +

Tenemos documentación sobre WebRTC. Este artículo, sin embargo, aprovechará algunas bibliotecas que pueden ayudar a trivializar el trabajo, y demostrará formas de usar la abstracción para evitar las diferencias de implementación entre los navegadores. Con suerte, por supuesto, esas diferencias se desvanecerán en el tiempo.

+ +

Usando la libreria p2p

+ +

Una biblioteca que puede usar es la biblioteca p2p. Esta biblioteca proporciona una API simple para crear conexiones entre puntos y configurar transmisiones y canales de datos. También hay un componente de servidor intermediario y un agente hospedado que puedes usar en lugar de tener que configurar uno.

+ +
+

Nota: Continuaremos agregando contenido aquí pronto; hay algunos problemas de organización por resolver.

+
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support23 {{ property_prefix("webkit") }}22 {{ property_prefix("moz") }}{{ CompatNo() }}12{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}29 {{ property_prefix("webkit") }}25 {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html new file mode 100644 index 0000000000..4528f0c95f --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.html @@ -0,0 +1,117 @@ +--- +title: Animaciones e interpolaciones +slug: Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens +tags: + - 2D + - Animacion + - Canvas + - Interpolaciones + - JavaScript + - Phaser + - Principiante + - Tutorial + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}

+ +
+

Este es el paso 14 de 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente tal y cómo quedaría al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson14.html.

+
+ +

Para hacer el juego más vistoso y vivo, podemos usar animaciones e interpolaciones. Esto provocará una experencia de juego mejor y más entretenida.  Exploraremos cómo implementar animaciones e interpolaciones Phaser en nuestro juego.

+ +

Animaciones

+ +

En Phaser, las animaciones implican tomar una hoja de sprites externa y mostrar los sprites de forma secuencial. Como ejemplo, haremos que una bola se tambalee cuando toque algo.

+ +

En primer lugar toma la hoja de sprites de Github y guardala en el directorio /img.

+ +

A continuación, cargaremos la hoja de cálculo : coloca la siguiente linea en la parte inferior de su función preload():

+ +
game.load.spritesheet('ball', 'img/wobble.png', 20, 20);
+
+ +

En lugar de cargar una sola imagen de la bola, podemos cargar toda la hoja de cálculo, una colección de imágenes diferentes. Mostraremos los sprites de forma secuencial para crear la ilusión de animación. Los dos parámetros adicionales del método spritesheet() determinan el ancho y la altura de cada fotograma en el archivo de spritesheet dado, indicando al programa cómo cortarlo para obtener los marcos individuales.

+ +

Cargando la animación

+ +

A continuación ve a tu función create(), encuentra la linea que carga el sprite de la bola, y debajo coloca la linea que llama a animations.add() que se muestra a continuación:

+ +
ball = game.add.sprite(50, 250, 'ball');
+ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24);
+
+ +

Para añadir una animación al objeto usaremos el método animations.add(), que contiene los siguientes parámetros:

+ + + +

Aplicando la animación cuando la pelota golpea el remo

+ +

En la llamada al método arcade.collide() que maneja la colisión entre la pelota y la paleta (la primera linea dentro de  update(), ver abajo) podemos agregar un parámetro adicional que especifica una función que se ejecutará cada vez que ocurra la colisión, de la misma manera que la función ballHitBrick(). Actualiza la primera linea dentro de update() como se muestra a continuación:

+ +
function update() {
+    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    paddle.x = game.input.x || game.world.width*0.5;
+}
+
+ +

Luego podemos crear la función ballHitPaddle() (con ball y paddle como parámetros por defecto), reproduciendo la animación de oscilación cuando se llama. Añade la función justo antes de la etiqueta de cierre </script>:

+ +
function ballHitPaddle(ball, paddle) {
+    ball.animations.play('wobble');
+}
+
+ +

La animación se muestra cada vez que la pelota golpea la paleta. También puedes agregar la llamada a animations.play() dentro de la función ballHitBrick(), si crees que el juego se verá mejor.

+ +

Interpolaciones

+ +

Mientras que las animaciones reproducen sprites externos secuencialmente, las interpolaciones animan suavemente las propiedades de un objeto en el mundo del juego como el ancho o la opacidad.

+ +

Agreguemos una interpolación a nuestro juego para hacer que los ladrillos desaparezcan suavemente cuando son golpeados por la pelota. Ve a la función ballhitBrick(), busca la linea brick.kill(); , y reemplazala por lo siguiente:

+ +
var killTween = game.add.tween(brick.scale);
+killTween.to({x:0,y:0}, 200, Phaser.Easing.Linear.None);
+killTween.onComplete.addOnce(function(){
+    brick.kill();
+}, this);
+killTween.start();
+
+ +

Veamos esto para que puedas saber lo que está pasando:

+ +
    +
  1. Al definir una nueva interpolación, debes especificar qué propiedad se interpolará; en nuestro caso, en lugar de ocultar los ladrillos instantáneamente cuando la bola los golpea, haremos que su ancho y altura se ajusten a cero, por lo que desaparecerán. Al final usamos el método, add.tween(), especificando brick.scale  como el argumento, ya que esto es lo que queremos interpolar.
    2. +
  2. El método to() define el estado del objeto al final de la interpolación. Toma un objeto que contenga los valores finales deseados del parámetro elegido (la escala toma un valor de escala, 1 es 100% del tamaño, 0 es 0% del tamaño, etc.), el tiempo de interpolación en milisegundos y el tipo de interpolación.
    3. +
  3. También añadiremos el controlador de eventos opcional onComplete, que define una función que se ejecutará cuando finalice la interpolación.
    4. +
  4. Lo último que debe hacer es iniciar la interpolación de inmediato utilizando start().
    5. +
+ +

Esa es la versión expandida de la definición de interpolación, pero también podemos usar la sintaxis abreviada:

+ +
game.add.tween(brick.scale).to({x:2,y:2}, 500, Phaser.Easing.Elastic.Out, true, 100);
+
+ +

Esta interpolación duplicará la escala del ladrillo en medio segundo con el uso de Elastic easing, se iniciará automáticamente, y tendrá un retardo de 100 milisegundos.

+ +

Compara tu código

+ +

Puedes comprobar el código final de esta lección en la demo de abajo, y probarlo para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/9o4pakrb/","","400")}}

+ +

Próximos pasos

+ +

Las animaciones y las interpolaciones se ven muy bien, pero podemos agregar más a nuestro juego. En la siguiente lección veremos cómo manejar los botones.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Extra_lives", "Games/Workflows/2D_Breakout_game_Phaser/Buttons")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html new file mode 100644 index 0000000000..672d7528a6 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/botones/index.html @@ -0,0 +1,106 @@ +--- +title: Botones +slug: Games/Tutorials/2D_breakout_game_Phaser/Botones +tags: + - 2D + - Botones + - JavaScript + - Lienzo + - Phaser + - Principiante + - Tutorial + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Buttons +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

+ +
+

Este es el paso 15 de 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente como debería quedar después de completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson15.html.

+
+ +

En lugar de comenzar el juego de inmediato, podemos dejar la decisión en el jugador añadiendo un botón de Inicio que pueda pulsar. Vamos a investigar cómo hacerlo.

+ +

Variables nuevas

+ +

Necesitamos una variable para almacenar un valor booleano que represente si el juego se está jugando actualmente o no, y otra para representar a nuestro botón. Añade las siguientes lineas a tu declaración de variables:

+ +
var playing = false;
+var startButton;
+
+ +

Cargando el botón de spritesheet

+ +

Podemos cargar el botón de spritesheet de la misma manera que cargamos la animación del movimiento de la pelota. Añade lo siguiente al botón de la función preload():

+ +
game.load.spritesheet('button', 'img/button.png', 120, 40);
+
+ +

El marco de un solo botón mide 120 pixels de ancho y 40 pixels de alto.

+ +

También se debe tomar el botón de spritesheet de Github, y guardarlo en el directorio /img.

+ +

Añadiendo el botón al juego

+ +

Para añadir el botón al juego usaremos el método add.button. Añade las siguientes lineas del botón a la función create():

+ +
startButton = game.add.button(game.world.width*0.5, game.world.height*0.5, 'button', startGame, this, 1, 0, 2);
+startButton.anchor.set(0.5);
+
+ +

Los parámetros del método button() son los siguientes:

+ + + +
+

Nota: El evento over es igual al hover, out es cuando el puntero se mueve fuera del botón y down cuando el botón es presionado.

+
+ +

Ahora necesitamos definir la función startGame() referenciada en el siguiente código:

+ +
function startGame() {
+    startButton.destroy();
+    ball.body.velocity.set(150, -150);
+    playing = true;
+}
+
+ +

Cuando se presiona el botón, se borra el botón, se establecen la velocidad inicial de la pelota y la variable playing a true.

+ +

Para terminar con esta sección, vuelve a la función create(), encuentra la linea ball.body.velocity.set(150, -150);, y bórrala. Solo queremos que la pelota se mueva cuando se presione el botón, no antes.

+ +

Mantener la paleta inmóvil antes de que comience el juego

+ +

Funciona como se esperaba, pero aún podemos mover la paleta cuando el juego aún no ha comenzado, lo que parece un poco tonto. Para impedir esto, podemos aprovechar la variable playing y hacer que la paleta solo se mueva cuando el juego haya empezado. Para hacer esto, ajustamos la función update() así:

+ +
function update() {
+    game.physics.arcade.collide(ball, paddle, ballHitPaddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    if(playing) {
+        paddle.x = game.input.x || game.world.width*0.5;
+    }
+}
+
+ +

De esta manera la paleta es inamovible hasta que todo esté cargado y preparado, pero sí cuando el juego actual comience.

+ +

Compara tu código

+ +

Puedes comprobar el código acabado en esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/1rpj71k4/","","400")}}

+ +

Siguientes pasos

+ +

La última cosa que haremos en esta serie de artículos es hacer el juego más interesante añadiendo algo de aleatorización a la forma en la que la pelota rebota con la paleta.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens", "Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html new file mode 100644 index 0000000000..e2fa08acf6 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/collision_detection/index.html @@ -0,0 +1,61 @@ +--- +title: Collision detection +slug: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection +tags: + - 2D + - Deteccion de colision + - JavaScript + - Lienzo + - Phaser + - Principiante + - Tutorial + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Collision_detection +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}}

+ +
+

Este es el paso 10 de un total de 16, del tutorial de Gamedev Phaser. Puedes encontrar el código fuente tal y cómo queda al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson10.html.

+
+ +

Ahora en el próximo desafío: la detección de colisiones entre la bola y los ladrillos. Por suerte, podemos usar el motor de física para verificar las colisiones no solo entre objetos individuales (como la pelota y la paleta), sino también entre un objeto y el grupo.

+ +

Detección de colisión ladrillo/bola

+ +

El motor de físicas hace que todo sea mucho más fácil - solo necesitamos agregar dos simples fragmentos de código. Primero, añade una nueva línea dentro de la función  update() que verifique la detección de las colisiones entre la bola y los ladrillos, como se muestra a continuación:

+ +
function update() {
+    game.physics.arcade.collide(ball, paddle);
+    game.physics.arcade.collide(ball, bricks, ballHitBrick);
+    paddle.x = game.input.x || game.world.width*0.5;
+}
+
+ +

La posición de la bola se calcula contra las posiciones de todos los ladrillos del grupo. El tercer parámetro opcional es la función que se ejecuta cuando se produce una colisión: ballHitBrick(). Crea esta nueva función en la parte inferior de tu código, justo antes de la etiqueta de cierre </script>, como sigue:

+ +
function ballHitBrick(ball, brick) {
+    brick.kill();
+}
+
+ +

¡Y ya está! Vuelve a cargar el código, y verás que la nueva detección de colisión funciona correctamente.

+ +

Gracias a Phaser, se pasan dos parámetros a la función: el primero es la bola, que definimos explícitamente en el método de colisión, y el segundo es el único bloque del grupo de ladrillos con el que la bola está colisionando. Dentro de la función, eliminamos el bloque en cuestión de la pantalla ejecutando el métodokill() en él.

+ +

Seguro que esperarabas tener que escribir muchos más cálculos para implementar la detección de colisiones cuando se utiliza JavaScript puro. Esa es la belleza de usar el marco: puedes dejar un montón de código aburrido a Phaser, y enfocarte en las partes más divertidas e interesantes de hacer un juego.

+ +

Compara tu código

+ +

Puedes consultar el código terminado para esta lección en la demo que aparece a continuación, y jugar con él para comprender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/wwneakwf/","","400")}}

+ +

Próximos pasos

+ +

Podemos golpear los ladrillos y eliminarlos, lo cual sería una buena adición al juego. Sería incluso mejor contar los ladrillos destruidos incrementando la puntuación como resultado.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_Phaser/The_score")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html new file mode 100644 index 0000000000..83811d20e2 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/extra_lives/index.html @@ -0,0 +1,127 @@ +--- +title: Extra lives +slug: Games/Tutorials/2D_breakout_game_Phaser/Extra_lives +tags: + - 2D + - JavaScript + - Lienzo + - Lona + - Phaser + - Principiante + - Tutorial + - Vidas + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Extra_lives +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}

+ +
+

Este es el paso número 13 de 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente tal y cómo queda al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson13.html.

+
+ +

Podemos hacer que el juego sea divertido por más tiempo añadiendo vidas. En este artículo implementaremos un sistema de vidas, para que el jugador pueda seguir jugando hasta que haya perdido tres vidas, no solo una.

+ +

Nuevas variables

+ +

Añade las siguientes líneas debajo de las ya existentes en tú código:

+ +
var lives = 3;
+var livesText;
+var lifeLostText;
+
+ +

Estas almacenarán las vidas, el texto que muestra el número de vidas restante, y el texto que se muestra en pantalla cuando el jugador pierde todas sus vidas.

+ +

Definiendo las nuevas etiquetas de texto

+ +

Definir los textos es parecido a algo que ya hicimos en la lección de la  puntuación. Añade las siguientes líneas debajo de la definición de scoreText dentro de la función create():

+ +
livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, { font: '18px Arial', fill: '#0095DD' });
+livesText.anchor.set(1,0);
+lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', { font: '18px Arial', fill: '#0095DD' });
+lifeLostText.anchor.set(0.5);
+lifeLostText.visible = false;
+
+ +

Los objetos livesText y lifeLostText se parecen mucho al scoreText — definen una posición en la pantalla, el texto actual a mostrar, y el estilo de la fuente. El primero está anclado en el borde superior derecho para alinearse con la pantalla y el segundo está centrado, ambos usan anchor.set().

+ +

El texto lifeLostText se mostrará solamente cuando se pierda la vida, así que su visibilidad al principio será false.

+ +

Haciendo nuestro estilo de texto DRY

+ +

Cómo probablemente hayas notado, estamos usando el mismo estilo para los tres textos: scoreText, livesText y lifeLostText. Si quisiéramos cambiar el tamaño de la fuente o el color tendríamos que hacerlo en muchos lugares. Para hacer eso más fácil de mantener en el futuro podemos crear una variable separada que almacenará nuestro estilo, la llamaremos textStyle y la colocaremos después de las definiciones de los textos:

+ +
textStyle = { font: '18px Arial', fill: '#0095DD' };
+
+ +

Ahora podemos usar esta variable para dar estilo a nuestros textos — actualiza tú código para que cada una de las múltiples instancias de estilo de tú texto sean reemplazadas por la variable:

+ +
scoreText = game.add.text(5, 5, 'Points: 0', textStyle);
+livesText = game.add.text(game.world.width-5, 5, 'Lives: '+lives, textStyle);
+livesText.anchor.set(1,0);
+lifeLostText = game.add.text(game.world.width*0.5, game.world.height*0.5, 'Life lost, click to continue', textStyle);
+lifeLostText.anchor.set(0.5);
+lifeLostText.visible = false;
+
+ +

De esta manera cambiando la fuente en una variable aplicará los cambios en todos los sitios donde se esté usando.

+ +

El código de manejo de vidas

+ +

Para implementar las vidas en nuestro juego, primero cambiaremos la función de bote de la pelota por el evento onOutOfBounds.En lugar de ejecutar una función anónima y mostrar un mensaje de alerta :

+ +
ball.events.onOutOfBounds.add(function(){
+    alert('Game over!');
+    location.reload();
+}, this);
+
+ +

Vamos a asignar una nueva función llamada ballLeaveScreen; borra el manejador de evento anterior (mostrado arriba) y sustitúyelo por la siguiente línea:

+ +
ball.events.onOutOfBounds.add(ballLeaveScreen, this);
+
+ +

Queremos decrementar el número de vidas cada vez que la pelota abandone el lienzo.Añade la definición de la función ballLeaveScreen() al final de tu código :

+ +
function ballLeaveScreen() {
+    lives--;
+    if(lives) {
+        livesText.setText('Lives: '+lives);
+        lifeLostText.visible = true;
+        ball.reset(game.world.width*0.5, game.world.height-25);
+        paddle.reset(game.world.width*0.5, game.world.height-5);
+        game.input.onDown.addOnce(function(){
+            lifeLostText.visible = false;
+            ball.body.velocity.set(150, -150);
+        }, this);
+    }
+    else {
+        alert('You lost, game over!');
+        location.reload();
+    }
+}
+
+ +

En lugar de mostrar el mensaje de alerta cuando pierdes una vida, primero quitaremos una vida del número actual y comprobaremos que no sea cero. Si lo es, quiere decir que el jugador tiene todavía algunas vidas y puede continuar jugando — verá el mensaje de pérdida de vida, las posiciones de la pelota y la paleta se reiniciarán en la pantalla y en la siguiente entrada (click o toque) el mensaje se ocultará y la pelota comenzará a moverse de nuevo.

+ +

Cuando el número de vidas disponibles alcanza el cero, el juego termina y se muestra un mensaje de "game over".

+ +

Eventos

+ +

Probablemente hayas notado las llamadas a los métodos add() y addOnce() en los dos bloques de código de arriba y te hayas preguntado en qué se diferencian. La diferencia es que el método add() vincula la función dada y hace que se ejecute cada vez que se produce el evento, mientras que  addOnce()  es útil cuando deseas que la función enlazada se ejecute solo una vez y luego se desvincule para que no se ejecute otra vez. En nuestro caso, en cada evento outOfBounds el ballLeaveScreen se ejecutará, pero cuando la pelota abandona la pantalla  solo queremos quitar el mensaje de la pantalla una sola vez.

+ +

Compare tu código

+ +

Puedes consultar el código terminado de esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/yk1c5n0b/","","400")}}

+ +

Próximos pasos

+ +

Las vidas hacen el juego más indulgente — si pierdes una vida, todavía tienes dos más con las que continuar jugando. Ahora expandiremos la apariencia del juego añadiendo animaciones e interpolaciones.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Win_the_game", "Games/Workflows/2D_Breakout_game_Phaser/Animations_and_tweens")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html new file mode 100644 index 0000000000..1b948ac63e --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/game_over/index.html @@ -0,0 +1,55 @@ +--- +title: Game over +slug: Games/Tutorials/2D_breakout_game_Phaser/Game_over +tags: + - 2D + - Canvas + - JavaScript + - Principiante + - Tutorial + - game over + - juego + - juego terminado +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Game_over +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls", "Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field")}}

+ +
+

Este es el paso numero ocho de los 16 del tutorial de Gamedev Phaser. Puedes encontrar el código fuente de como debería verse, después de haber completado esta lección en Gamedev-Phaser-Content-Kit/demos/lesson08.html.

+
+ +

Para hacer el juego más interesante podemos introducir la habilidad de perder --- si no golpeas la pelota antes de que alcance el borde inferior de la pantalla, se acabará el juego.

+ +

Cómo perder

+ +

Para proporcionar la habilidad de perder, deberemos inhabilitar las bolas que colisionen con el borde inferior de la pantalla. Añade el siguiente código dentro de la función create(); justo después de definir los atributos de las bolas está bien:

+ +
game.physics.arcade.checkCollision.down = false;
+
+ +

Esto hará que a las tres paredes(arriba, izquierda y derecha) les rebote la bola, pero la cuarta pared (abajo) desaparecerá, dejando que la bola caiga fuera de la pantalla si la pala no lo alcanza. Necesitamos una forma de detectar esto y actuar en consecuencia. Añade las siguientes lineas justo debajo de la nueva linea, añadida anteriormente:

+ +
ball.checkWorldBounds = true;
+ball.events.onOutOfBounds.add(function(){
+    alert('Game over!');
+    location.reload();
+}, this);
+
+ +

Añadiendo esas lineas conseguiremos que la bola compruebe los límites de su mundo(en nuestro caso la pantalla) y ejecute la función vinculada al evento onOutOfBounds. Cuando hagas click en el mensaje de alerta resultante, la página se reseteará, asi podrás jugar otra vez.

+ +

Compara tu código

+ +

Puedes comprobar el código final para esta lección en la demo de abajo, y jugar con ello para entender mejor como funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/436bckb7/","","400")}}

+ +

Siguientes pasos

+ +

Ahora el juego básico está hecho, hagamos mas interesante el caso introduciendo ladrillos para romper --- es hora de construir el campo de ladrillos.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls", "Games/Workflows/2D_Breakout_game_Phaser/Build_the_brick_field")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/index.html new file mode 100644 index 0000000000..5d539b7442 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/index.html @@ -0,0 +1,63 @@ +--- +title: 2D breakout game using Phaser +slug: Games/Tutorials/2D_breakout_game_Phaser +tags: + - 2D + - Beginner + - Canvas + - Games + - JavaScript + - NeedsTranslation + - Phaser + - TopicStub + - Tutorial +translation_of: Games/Tutorials/2D_breakout_game_Phaser +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

+ +

In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript, using the Phaser framework.

+ +

Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, framework-specific helper functions, animations and tweens, and winning and losing states.

+ +

To get the most out of this series of articles you should already have basic to intermediate JavaScript knowledge. After working through this tutorial you should be able to build your own simple Web games with Phaser.

+ +

Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.

+ +

Lesson details

+ +

All the lessons — and the different versions of the MDN Breakout game we are building together — are available on GitHub:

+ +
    +
  1. Initialize the framework
    2. +
  2. Scaling
    3. +
  3. Load the assets and print them on screen
    4. +
  4. Move the ball
    5. +
  5. Physics
    6. +
  6. Bounce off the walls
    7. +
  7. Player paddle and controls
    8. +
  8. Game over
    9. +
  9. Build the brick field
    10. +
  10. Collision detection
    11. +
  11. The score
    12. +
  12. Win the game
    13. +
  13. Extra lives
    14. +
  14. Animations and tweens
    15. +
  15. Buttons
    16. +
  16. Randomizing gameplay
    17. +
+ +

As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we'd suggest that you first work through this series' counterpart, 2D breakout game using pure JavaScript.

+ +

After that, you can pick any framework you like and use it for your projects; we've chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework doesn't provide, you'll need some pure JavaScript knowledge.

+ +
+

Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Phaser Content Kit based on this tutorial if you want to give a talk about game development with Phaser.

+
+ +

Next steps

+ +

Ok, let's get started! Head to the first part of the series — Initialize the framework.

+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html new file mode 100644 index 0000000000..efa8dc6cd9 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/initialize_the_framework/index.html @@ -0,0 +1,81 @@ +--- +title: Inicializar el framework +slug: Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser", "Games/Workflows/2D_Breakout_game_Phaser/Scaling")}}

+ +
+

Este es el primero de los 16 tutoriales para aprender a usar Gamedev Phaser. Luego de completar este tutorial, puede encontrar el código fuente de esta sección en Gamedev-Phaser-Content-Kit/demos/lesson01.html.

+
+ +

Antes de que podamos comenzar a escribir la funcionalidad del juego, necesitamos crear una estructura básica para procesarlo. Esto podemos hacerlo usando HTML — el framework de Phaser va a generar el elemento {{htmlelement("canvas")}} requerido.

+ +

El HTML del juego

+ +

La estructura del elemento HTML es bastante simple, ya que el juego va ser renderizado por completo en el elemento {{htmlelement("canvas")}} generado por el framework. Utilizando su editor de texto favorito, cree un nuevo documento HTML, guárdelo como index.html, en una ubicación sensata y agregue el siguiente código:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
+    <style>* { padding: 0; margin: 0; }</style>
+    <script src="js/phaser.min.js"></script>
+</head>
+<body>
+<script>
+    var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {
+      preload: preload, create: create, update: update
+    });
+    function preload() {}
+    function create() {}
+    function update() {}
+</script>
+</body>
+</html>
+
+ +

Descargando el código de Phaser

+ +

A continuación, necesitamos pasar por el proceso de descargar el código fuente de Phaser y aplicarlo a nuestro documento HTML.

+ +
    +
  1. Ir a la página de descarga del Phaser download page.
    2. +
  2. Elegir la opción que mas le convenga — Recomendaría la opción min.js ya que mantiene el codigo más pequeño, y es poco probable que tenga que pasar por el código fuente de todos modos.
    3. +
  3. Guarde el código Phaser dentro de un directorio/js en la misma ubicación que su archivo index.html.
    4. +
  4. Actualice el valor src del primer elemento {{htmlelement("script")}} como se muestra arriba.
    5. +
+ +

Caminando a través de lo que tenemos hasta ahora

+ +

En este punto, tenemos un charset definido, {{htmlelement("title")}} y algunos CSS básicos en el encabezado para restablecer el margin y el padding. También tenemos un elemento {{htmlelement("script")}} para aplicar el código fuente del Phaser a la página. El cuerpo contiene un segundo elemento {{htmlelement("script")}}, donde vamos a escribir el codigo JavaScript para renderizar el juego y controlarlo.

+ +

El elemento {{htmlelement("canvas")}} es generado automaticamente por el framework. Estamos inicializandolo creando un nuevo objeto Phaser.Game y asignandolo a la variable del juego. Los parametros son:

+ + + +

Compara tu código

+ +

Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/h6cwzv2b/","","400")}}

+ +

Pasos siguientes

+ +

Ahora hemos configurado el HTML básico y aprendido un poco sobre la inicialización de Phaser, continuemos con la segunda lección y aprendamos sobre scaling.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser", "Games/Workflows/2D_Breakout_game_Phaser/Scaling")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html new file mode 100644 index 0000000000..c211b0512d --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/move_the_ball/index.html @@ -0,0 +1,51 @@ +--- +title: Move the ball +slug: Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball +tags: + - 2D + - Emocionante + - JavaScript + - Lienzo + - Phaser + - Principiante + - Tutorial + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}}

+ +
+

Este es el 4º paso sobre 16 del tutorial Gamedev Phaser. Puedes encontrar el código fuente tal y como quedaría al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson04.html.

+
+ +

Tenemos a nuestra pelota azul pintada en la pantalla, pero sin hacer nada — Estaría bien hacerla moverse de algún modo. Este artículo muestra como hacerlo.

+ +

Actualizando la posición de la pelota en cada marco

+ +

¿Recuerdas la función update() y su definición? El código del interior del cuadro se ejecuta en cada cuadro, así que ese es el mejor lugar para colocar el código que actualiza la posición de la pelota en la pantalla. Añade las siguientes lineas a la función update(), como se muestra a continuación:

+ +
function update() {
+    ball.x += 1;
+    ball.y += 1;
+}
+
+ +

El código de arriba incrementa en 1 las propiedades x e y , las cuales representan las coordenadas de la pelota en el lienzo, en cada cuadro. Vuelve a cargar el index.html y deberías ver la pelota rodando a través de la pantalla.

+ +

Compara tú código

+ +

Puedes comprobar el código terminado de esta lección en la demo de abajo, y jugar para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/g1cfp0vv/","","400")}}

+ +

Próximos pasos

+ +

El siguiente paso es añadir una detección básica de colisión, para que la pelota pueda rebotar con las paredes.Esto nos llevará unas cuántas líneas de código — un paso significativamente más complejo que lo que hemos visto hasta ahora especialmente si queremos añadir la paleta y colisiones con los ladrillos — pero afortunadamente Phaser nos permite hacerlo de una forma mucho más sencilla que si lo quisieramos hacer usando JavaScript puro.

+ +

En cualquier caso, antes de hacer todo esto debemos introducir los motores de Física de Phaser y hacer un poco de trabajo de configuración.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html new file mode 100644 index 0000000000..0276d5dc7f --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/rebotar_en_las_paredes/index.html @@ -0,0 +1,51 @@ +--- +title: Rebotar en las paredes +slug: Games/Tutorials/2D_breakout_game_Phaser/Rebotar_en_las_paredes +tags: + - 2D + - Canvas + - JavaScript + - Phaser + - Principiante + - Tutorial + - fuerte + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

+ +
+

Este es el paso 6 de 16 del tutorial de Gamedev Phaser. Puedes encontrar el código fuente como debería verse después de completar esta lección en Gamedev-Phaser-Content-Kit/demos/lesson06.html.

+
+ +

Ahora que las físicas han sido introducidas,podemos empezar a implementar la detección de colisión en el juego — primero miraremos las paredes.

+ +

Rebotando en las fronteras del mundo

+ +

La forma más fácil de hacer que nuestra bola rebote en las paredes es decirle al marco que queremos tratar los límites del elemento  {{htmlelement("canvas")}} como paredes y no dejar que la pelota pase por ellos.  En Phaser esto se puede puede lograr usando la propiedad collideWorldsBound. Añade esta linea justo después de la llamada al método game.physics.enable() existente:

+ +
ball.body.collideWorldBounds = true;
+
+ +

Ahora la bola se detendrá en el borde de la pantalla en lugar de desaparecer, pero no rebota. Para que esto ocurra tenemos que configurar su rebote. Añade la siguiente línea debajo de la anterior:

+ +
ball.body.bounce.set(1);
+
+ +

Intenta recargar index.html otra vez — ahora deberías ver la pelota rebotando en todas las paredes y moviéndose dentro del área del lienzo.

+ +

Compara tu código

+ +

Puedes consultar el código terminado para esta lección en la demostración en vivo a continuación, y jugar con él para comprender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/dcw36opz/","","400")}}

+ +

Próximos pasos

+ +

Esto está empezando a parecerse más a un juego ahora, Pero no podemos controlarlo de ninguna manera — es hora de que introduzacamos reproductor de paletas y controles.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Physics", "Games/Workflows/2D_Breakout_game_Phaser/Player_paddle_and_controls")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html new file mode 100644 index 0000000000..bec5641a07 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/scaling/index.html @@ -0,0 +1,56 @@ +--- +title: Scaling +slug: Games/Tutorials/2D_breakout_game_Phaser/Scaling +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Scaling +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework", "Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen")}}

+ +
+

Este es el 2do paso de los 16 del tutorial Gamedev Phaser tutorial. Puede encontrar el código fuente como debería verse luego de completar esta lección en Gamedev-Phaser-Content-Kit/demos/lesson02.html.

+
+ +

Scaling se refiere a como el lienzo del juego se escalará en diferentes tamaños de pantalla. Podemos hacer que la escala del juego se ajuste automáticamente a cualquier tamaño de pantalla durante la etapa de precarga por lo que no debemos preocuparnos más tarde.

+ +

El objeto scale de Phaser

+ +

Hay un objeto especial scale disponible en Phaser con algunos métodos prácticos y propiedades disponibles. Actualice su función preload() existente de la siguiente manera:

+ +
function preload() {
+    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+    game.scale.pageAlignHorizontally = true;
+    game.scale.pageAlignVertically = true;
+}
+
+ +

scaleMode tiene algunas opciones diferentes disponibles para ver como se puede escalar el Canvas (lienzo):

+ + + +

Las otras dos lineas de código en la función preload() son responsables de alinear el elemento canvas horizontal y verticalmente, por lo que siempre se centra en la pantalla independientemente del tamaño.

+ +

Agregar un color de fondo de lienzo personalizado

+ +

También podemos agregar un color de fondo personalizado a nuestro lienzo, por lo que no se mantendrá negro. El objeto stage tiene una propiedad backgroundColor para este propósito, que podemos establecer usando la sintaxis de definición de color de CSS. Agregue la siguiente línea debajo de las otras tres que agregó anteriormente:

+ +
game.stage.backgroundColor = '#eee';
+
+ +

Compara tu código

+ +

Puedes verificar el código final de esta lección en la demostración en vivo a continuación, y jugar con la misma para entender mejor como trabaja:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/6a64vecL/","","400")}}

+ +

Pasos siguientes

+ +

Ahora que hemos configurado el escalamiento de nuestro juego, continuemos con la tercera lección y descubramos cómo cargar los assets e imprimirlos en la pantalla.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework", "Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html new file mode 100644 index 0000000000..77c688cc77 --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/the_score/index.html @@ -0,0 +1,78 @@ +--- +title: The score +slug: Games/Tutorials/2D_breakout_game_Phaser/The_score +tags: + - 2D + - JavaScript + - Lienzo + - Phaser + - Principiantes + - Puntuación + - Tutorial + - juegos +translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}

+ +
+

Este es el paso 11º de 16 del tutorial de Gamedev Phaser. Puedes encontrar el código fuente tal y como quedaría al completar la lección en Gamedev-Phaser-Content-Kit/demos/lesson11.html.

+
+ +

Tener puntuación puede hacer el juego más interesante — puedes intentar batir tu mejor puntuación, a la de tus amigos. En este artículo añadiremos un sistema de puntuación al juego.

+ +

Usaremos una variable separada para almacenar la puntuación y el método  text() de Phaser para mostrarla en la pantalla.

+ +

Nuevas variables

+ +

Añade dos nuevas variables justo después de la definición de las anteriores:

+ +
// ...
+var scoreText;
+var score = 0;
+
+ +

Añadir el texto de puntuación a la pantalla del juego

+ +

Ahora añade esta línea al final de la función create():

+ +
scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });
+
+ +

El método text() puede tomar cuatro parámetros:

+ + + +

El último parámetro se parece mucho a los estilos de CSS. En nuestro caso, el texto de la puntuación será azul, con un tamaño de 18 pixeles y usará como estilo de fuente Arial.

+ +

Actualizar el juego cuando los ladrillos se han destruido

+ +

Incrementaremos el número de puntos cada vez que la pelota golpee en un ladrillo y actualizaremos el scoreText para mostrar la puntuación actual. Esto, lo podremos hacer usando el método setText()  — añade las dos siguientes líneas a la función ballHitBrick():

+ +
function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+}
+
+ +

Eso es todo por ahora — recarga tu index.html y comprueba que la puntuación se actualiza por cada golpe al ladrillo.

+ +

Compare su código

+ +

Puede comprobar el código terminado de esta lección en la demo que aparece a continuación, y jugar para entender mejor cómo funciona el juego:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/n8o6rhrf/","","400")}}

+ +

Próximos pasos

+ +

Ya tenemos un sistema de puntuación, pero para qué sirve jugar y mantener la puntuación si no se puede ganar.  Veremos cómo podemos añadir la victoria, permitiendonos así ganar el juego.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}

diff --git a/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html b/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html new file mode 100644 index 0000000000..06b45f5b2b --- /dev/null +++ b/files/es/games/tutorials/2d_breakout_game_phaser/win_the_game/index.html @@ -0,0 +1,60 @@ +--- +title: Win the game +slug: Games/Tutorials/2D_breakout_game_Phaser/Win_the_game +tags: + - 2D + - JavaS + - Lienzo + - Phaser + - Principiante + - Tutorial + - ganando +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Win_the_game +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/The_score", "Games/Workflows/2D_Breakout_game_Phaser/Extra_lives")}}

+ +
+

Este es el paso 12º del tutorial 16 de Gamedev Phaser. Puedes encontrar el código fuente tal y como queda al completar el tutorial en Gamedev-Phaser-Content-Kit/demos/lesson12.html.

+
+ +

Implementar las victorias en nuestro juego es fácil: si destruyes todos los ladrillos, ganas.

+ +

¿Cómo ganar?

+ +

Añade el siguiente código a la función ballHitBrick():

+ +
function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+
+    var count_alive = 0;
+    for (i = 0; i < bricks.children.length; i++) {
+      if (bricks.children[i].alive == true) {
+        count_alive++;
+      }
+    }
+    if (count_alive == 0) {
+      alert('You won the game, congratulations!');
+      location.reload();
+    }
+}
+
+ +

Recorremos los ladrillos del grupo usando bricks.children, verificando la vida de cada uno con el método .alive() . Si no quedan más ladrillos con vida, mostramos un mensaje de victoria, reiniciando el juego una vez que la alerta desaparezca.

+ +

Compare su código

+ +

Puedes comprobar el código terminado de esta lección en la siguiente demo, y jugar para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/u8waa4Lx/1/","","400")}}

+ +

Próximos pasos

+ +

Ganar y perder están implementados, por lo que la jugabilidad de nuestro juego está terminada. Ahora añadiremos algo extra — vamos a dar al jugador tres vidas en lugar de una.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/The_score", "Games/Workflows/2D_Breakout_game_Phaser/Extra_lives")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..d168aa0102 --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/bounce_off_the_walls/index.html @@ -0,0 +1,101 @@ +--- +title: Rebota en las paredes +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+

{{IncludeSubnav("/es/docs/Games")}}

+
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

+ +
+

Este es el tercer paso de 10 del  tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código fuente y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson3.html.

+
+ +

Es agradable ver nuestra bola moviéndose, pero desaparece rápidamente de la pantalla, limitando la diversión que podemos tener con ella. Para superar esto, implementaremos una detección de colisión muy simple (que se explicará más adelante con más detalle) para hacer que la pelota rebote en los cuatro bordes del Canvas.

+ +

Detección de colisión simple

+ +

Para detectar la colisión verificamos si la bola está tocando (chocando con) la pared y si es así, cambiaremos la dirección de su movimiento en consecuencia.

+ +

Para facilitar los cálculos, definamos una variable llamada ballRadius que mantendrá el radio del círculo dibujado y se utilizará para los cálculos. Añade esto a tu código, en algún lugar por debajo de las declaraciones de variables existentes:

+ +
var ballRadius = 10;
+ +

Ahora actualice la línea que dibuja la bola dentro de la funcion drawBall() a esto:

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

Rebotando arriba y abajo

+ +

Hay cuatro paredes para rebotar la pelota - vamos a centrarnos en la de arriba en primer lugar. Tendremos que comprobar, en cada fotograma, si la pelota está tocando el borde superior del Canvas - si es así, invertiremos el movimiento de la bola para que empiece a moverse en la dirección opuesta y se mantenga dentro de los límites visibles. Recordando que el sistema de coordenadas comienza desde la parte superior izquierda, podemos llegar a algo como esto:

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

Si el valor de y de la posición de la bola es menor que cero, cambie la dirección del movimiento en el eje y, estableciéndolo igual a sí mismo, invertido. Si la pelota se movía hacia arriba con una velocidad de 2 píxeles por fotograma, ahora se moverá "arriba" con una velocidad de -2 píxeles, lo que en realidad equivale a bajar a una velocidad de 2 píxeles por fotograma.

+ +

El código anterior se ocuparía de que la pelota rebote desde el borde superior, así que ahora vamos a pensar en el borde inferior:

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

Si la posición y de la pelota es mayor que la altura del canvas (recuerde que contamos los valores y desde la parte superior izquierda, de modo que el borde superior empieza en 0 y el borde inferior está en 480 píxeles, la altura del canvas), entonces rebota del borde inferior invirtiendo el movimiento del eje y como antes.

+ +

Podríamos fusionar esas dos sentencias en una para ahorrar código:

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

Si cualquiera de las dos afirmaciones es verdadera, invierte el movimiento de la pelota.

+ +

Rebotando en la izquierda y derecha

+ +

Tenemos el borde superior e inferior cubiertos, así que pensemos en los de izquierda y derecha. Es muy similar en realidad, todo lo que tienes que hacer es repetir las declaraciones de x en lugar de y:

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

En este punto, debe insertar el bloque de código anterior en la función draw(), justo antes de la llave de cierre.

+ +

¡La pelota sigue desapareciendo en la pared!

+ +

Prueba tu código en este punto, y te quedarás impresionado - ¡ahora tenemos una pelota que rebotó en los cuatro bordes del canvas! Pero tenemos otro problema sin embargo - cuando la bola golpea cada pared se hunde en ella levemente antes de cambiar la dirección:

+ +

+ +

Esto es porque estamos calculando el punto de colisión de la pared y el centro de la bola, mientras que deberíamos hacerlo por su circunferencia. La bola debe rebotar justo después de que toca la pared, no cuando ya está a medio camino en la pared, así que vamos a ajustar nuestras declaraciones un poco para incluir eso. Actualice el último código que agregó, a esto:

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

Cuando la distancia entre el centro de la bola y el borde de la pared es exactamente igual que el radio de la pelota, cambiará la dirección del movimiento. Restando el radio de un ancho del eje y añadiéndolo al otro nos da la impresión de una adecuada detección de colisiones - la pelota rebota de las paredes como debería hacerlo.

+ +

Compara tu código

+ +

Chequea el código acabado para esta parte con el tuyo, y juega:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}

+ +
+

Ejercicio: cambia el color de la bola a un color al azar, cada vez que golpea una pared.

+
+ +

Siguientes pasos

+ +

Ahora hemos llegado al punto donde nuestra pelota se mueve y permanece en el tablero de juego. En el capítulo cuarto, veremos la implementación del control de una pala - vea Control de Pala y teclado.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html new file mode 100644 index 0000000000..99c944764b --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/construye_grupo_bloques/index.html @@ -0,0 +1,126 @@ +--- +title: Construye el muro de ladrillos +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

+ +
+

Este es el sexto paso de 10 del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson6.html.

+
+ +

Hemos cambiado la mecánica del juego y ahora ya podemos perder. Esto es genial porque significa que el juego finalmente se comporta como un juego. Sin embargo, pronto resultará aburrido si todo lo que puedes conseguir es hacer rebotar la pelota en las paredes y en la pala. Lo que el juego necesitamos es romper ladrillos con la bola. Ahora vamos a dibujar los ladrillos.

+ +

Declarar e inicializar las variables de los ladrillos

+ +

El propósito principal de esta lección consiste en escribir unas pocas líneas de código para los ladrillos, utilizando un bucle anidado que recorra una matriz bidimensional. Pero, antes, necesitamos preparar unas variables que definan la información sobre los ladrillos, como su ancho y alto, filas y columnas, etc. Añade estas líneas a tu programa, debajo de las otras variables que has definido antes:

+ +
var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;
+ +

Aquí hemos definido el número de filas (Row) y columnas (Column) de ladrillos, su ancho (Width) y alto (Height), el hueco entre los ladrillos para que no se toquen (Padding), y un margen superior (Top) e izquierdo (Left) para que no se dibujen tocando los bordes.

+ +

Guardaremos nuestros ladrillos en una matriz bidimensional que contendrá las columnas (c) de los ladrillos. Cada columna contendrá, a su vez, toda la fila (r) de ladrillos. Cada ladrillo se va a representar con un objeto con las posiciones "x" e "y" en las que se dibujará. Añade esto detrás de las definiciones de las variables:

+ +
var bricks = [];
+for(c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}
+ +

El código anterior pasará por las filas y las columnas y creará los ladrillos. TEN EN CUENTA que esos objetos que representan a los ladrillos también se utilizarán para detectar colisiones más adelante.

+ +

Por si no lo terminas de entender... bricks[0][0] es el primer ladrillo (columna 0, fila 0) y se dibujará en "x" 0 e "y" 0. El siguiente ladrillo será el brick[0][1] (columna 0, fila 1) y se dibujará también en (0,0). Así, continuaremos hasta el final de la primera columna, que será el ladrillo bricks[0][2] porque hay 3 filas, de la 0 a la 2. Terminará así el bucle de dentro y seguirá el de fuera, valiendo ahora la "c" 1. Seguiremos recorriendo bricks[] hasta llegar a bricks[2][4], que es el último ladrillo.

+ +

Dibujar los bloques

+ +

Ahora vamos a crear una función para recorrer todos los bloques de la matriz y dibujarlos en la pantalla:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+
+ +

Viene a ser lo mismo de antes, sólo que hemos añadido ctx.rect() para dibujar un rectángulo por cada ladrillo, además de otras llamadas a funciones para que, efectivamente, se dibuje el rectángulo.

+ +

Cada ladrillo se dibujará en la posición (0, 0), tendrá un ancho brickWidth y un alto de brickHeight.

+ +

Estupendo pero... ¡estamos dibujando todos los ladrillos en el mismo sitio! ¡Eso no puede ser!

+ +

Vamos a calcular en qué posición "x" e "y" se tiene que dibujar cada ladrillo así:

+ +
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+
+ +

El primer ladrillo se dibujará arriba a la izquierda, concretamente en (brickoffsetLeft, brickOffsetTop), porque c y r valen 0.

+ +

El siguiente ladrillo (columna 0, fila 1) se dibujará más abajo.

+ +

Intenta hacer tú mismo los cálculos y verás cómo cada ladrillo de la misma columna se dibujará más abajo o más arriba según en qué fila se encuentre.

+ +

También verás cómo cada ladrillo de la misma fila se dibujará más a la izquierda o a la derecha según en qué columna se encuentre.

+ +

Vamos a terminar la función drawBricks() para que quede así:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

Dibujar los bloques (ahora sí)

+ +

Lo estamos haciendo muy bien, pero si has probado te habrás dado cuenta de que no se dibuja nada. ¿Qué es lo que falla?

+ +

Pues, sencillamente, que tenemos definida la función drawBricks() pero no la llamamos desde ningún sitio.

+ +

Añade drawBricks() dentro de draw(), justo antes de drawBall ():

+ +
drawBricks();
+
+ +

Compara tu código

+ +

Compara tu código con este:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/2/","","320")}}

+ +
+

Ejercicio: Prueba a cambiar el número de bloques por fila o columna, o sus posiciones (utiliza las variables que definiste al principio de este capítulo).

+
+ +

Pasos siguientes

+ +

¡Así que ahora tenemos ladrillos! Un gran avance pero... la pelota no los rompe, simplemente los atraviesa. En el siguiente capítulo lo arreglaremos: Detección de colisiones.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html new file mode 100644 index 0000000000..81403423c7 --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/control_pala_y_teclado/index.html @@ -0,0 +1,130 @@ +--- +title: Control de la pala y el teclado +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

+ +
+

Este es el cuarto de los 10 pasos del Tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson4.html.

+
+ +

 

+ +

La bola está rebotando en las paredes libremente y puedes estar mirándola toda la vida, pero, ahora mismo, no hay interactividad. ¡No es un juego si no puedes controlarlo! Vamos a añadirle la interacción del usuario: una paleta.

+ +

Definir una paleta para golpear la bola

+ +

Necesitamos una paleta para golpear la bola. Empezamos por definir variables para conseguirlo. Añade las variables siguientes en la parte de arriba de tu código, junto a las que ya tenías:

+ +
var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;
+ +

paddleHeight servirá para definir la altura de la paleta, paddleWidth la anchura y paddleX la posición en el eje X en la que empieza a dibujarse. Definimos una función que dibujará la paleta en la pantalla. Añade este código justo después de la función drawBall():

+ +
function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+ +

Permitir que el usuario controle la paleta

+ +

Podemos dibujar la paleta donde queramos, pero debería responder a las acciones del usuario. Ha llegado la hora de implementar algunos controles de teclado. Vamos a necesitar:

+ + + +

Empezaremos por definir las variables que nos dirán si se ha pulsado un botón. Añade estas líneas donde has definido las demás variables:

+ +
var rightPressed = false;
+var leftPressed = false;
+ +

Las dos las inicializamos con el valor false porque al principio no están pulsados los botones. Para "escuchar" las pulsaciones de las teclas necesitamos definir dos "escuchadores de eventos" (event listeners). Añade las líneas siguientes justo antes de setInterval() al final de tu código:

+ +
document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+ +

Cuando ocurra el evento keydown al pulsar cualquier tecla del teclado, la función keyDownHandler() se ejecutará. Cuando se liberará la tecla pulsada, se ejecutará la función keyUpHandler(). Añade esto después de las líneas del addEventListener() que acababas de escribir:

+ +
function keyDownHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = true;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.keyCode == 39) {
+        rightPressed = false;
+    }
+    else if(e.keyCode == 37) {
+        leftPressed = false;
+    }
+}
+ +

Cuando pulsamos una tecla se ejecuta keyDownHandler(e), que pone en la variable "e" los datos que necesitamos. Efectivamente, e.keyCode nos va a decir qué tecla se ha pulsado. Si vale 37 es porque se ha pulsado la "flecha izquierda" del teclado. El código 39 representa a la "flecha derecha".

+ +

Pues bien, cuando se pulsará la "flecha izquierda" pondremos leftPressed a true.

+ +

Cuando se liberará la "flecha izquierda" pondremos leftPressed a false.

+ +

De igual forma procederá el programa con la "flecha derecha", detectando el código 39 y dando los valores oportunos a la variable rightPressed.

+ +

La lógica del movimiento de la paleta

+ +

Ya tenemos las variables que contienen la información sobre las teclas pulsadas, los escuchadores de eventos y las funciones relevantes. Ahora vamos a ocuparnos del código que utilizará todo eso y moverá la paleta en la pantalla. Dentro de la función draw() comprobaremos si está pulsada la flecha izquierda o la derecha cada vez que se dibuje un fotograma. Nuestro código podría tener este aspecto:

+ +
if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}
+ +

Si se pulsa la flecha izquierda, la paleta se moverá 7 píxeles a la izquierda. Si se pulsa la flecha derecha, se moverá 7 píxeles a la derecha. Aunque esto funciona bien, la paleta desaparece en los laterales del terreno de juego si mantenemos pulsada una tecla demasiado tiempo. Podemos mejorar esto para que se mueva dentro de los límites del canvas, cambiando el código así:

+ +
if(rightPressed && paddleX < canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed && paddleX > 0) {
+    paddleX -= 7;
+}
+ +

La posición paddleX que estamos utilizando variará entre 0 para la lado izquierdo y canvas.width-paddleWidth para el lado derecho, que es justo lo que queremos.

+ +

Añade el código anterior dentro de la función draw(), al final, justo antes de la llave que cierra.

+ +

Lo único que nos falta por hacer es llamar a la función drawPaddle() desde dentro de la función draw() para que dibuje la paleta dentro en la pantalla. Añade la línea siguiente dentro de draw(), justo antes de la línea que llama a la función drawBall():

+ +
drawPaddle();
+
+ +

Compara tu código

+ +

Aquí está el código que funciona, para que lo compares con el tuyo:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","320")}}

+ +
+

Ejercicio: haz que la paleta se mueva más deprisa o más despacio, o cambia su tamaño.

+
+ +

Pasos siguientes

+ +

Ahora mismo tenemos algo que parece un juego. El único problema es que todo lo que puedes hacer es golpear la bola con la paleta toda la vida (en realidad, ni siquiera la golpeas). Todo esto cambiará en el quinto capítulo, Fin del juego, cuando añadiremos un estado de "Game Over".

+ +
 
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html new file mode 100644 index 0000000000..65e32f0ac2 --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/controles_raton/index.html @@ -0,0 +1,53 @@ +--- +title: Controles del ratón +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

+ +
+

Este es el noveno paso de 10 del tutorial Canvas para el desarrollo de juegos. Puedes encontrar el código y pegarle un vistazo después de completar esta lección Gamedev-Canvas-workshop/lesson9.html.

+
+ +

El juego en sí está terminado, así que ahora vamos a pulirlo. Ya le hemos puesto el control del teclado y ahora le añadiremos el control del ratón.

+ +

Detectar el movimiento del ratón

+ +

Detectar el movimiento del ratón es más fácil que detectar las pulsaciones de las teclas. Todo lo que necesitamos es un añadir "escuchador" al evento {{event("mousemove")}}.Añade esta línea destrás de los otros "listeners", justo debajo del evento keyup:

+ +
document.addEventListener("mousemove", mouseMoveHandler, false);
+ +

Asociar el movimiento de la pala con el movimiento del ratón

+ +

Podemos cambiar la posición de la pala basándonos en las coordenadas del puntero del ratón. Eso es lo que hace la función siguiente. Añádela detrás de la línea que acabas de añadir:

+ +
function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}
+ +

En esta función calculamos un valor relativeX, que es la posición horizontal del ratón en el "viewport" (e.clientX), menos la distancia entre el borde izquierdo del terreno de juego y el borde izquierdo del "viewport" (canvas.offsetLeft).

+ +

Si el valor resultante es mayor que cero y menor que el ancho del terreno de juego, es que el ratón está dentro de los límites, y calculamos la posición de la paleta poniéndole el valor relativeX menos la mitad del ancho de la paleta, para que el movimiento sea de verdad relativo a la mitad de la paleta.

+ +

Ahora, la paleta seguirá la posición del cursor del ratón pero, como restringimos el movimiento al <canvas>, no desaparecerá completamente por los lados.

+ +

Compara tu código

+ +

Aquí tienes el código para comparar:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/L3gngab5/","","320")}}

+ +
+

Ejercicio: ajusta los límites del movimiento de la pala para que siempre se vea la pala completa (ahora sólo se ve media en los laterales).

+
+ +

Pasos siguientes

+ +

Ya tenemos el juego terminado, pero aún lo podemos mejorar con algunos trucos Finalizando.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html new file mode 100644 index 0000000000..59703d3bc7 --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/create_the_canvas_and_draw_on_it/index.html @@ -0,0 +1,108 @@ +--- +title: Crea el lienzo (canvas) y dibuja en él +slug: >- + Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

+ +
+

Este es el primero de los 10 pasos del Tutorial del Lienzo (Canvas) para desarrollar juegos (Gamedev Canvas Tutorial). Puedes encontrar el código fuente como debería quedar tras completar esta lección en Gamedev-Canvas-workshop/lesson1.html.

+
+ +

Antes de que podamos programar la parte funcional del juego, necesitamos crear la estructura básica de la página que lo va a contener. Podemos hacerlo utilizando HTML y el elemento  {{htmlelement("canvas")}} .

+ +

El HTML del juego

+ +

La estructura del documento HTML es muy simple, porque todo el juego se visualizará dentro del elemento {{htmlelement("canvas")}}. Con tu editor de textos favorito, prepara un documento en blanco, guárdalo como index.html en un lugar adecuado, y escribe el siguiente código:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScript code goes here
+</script>
+
+</body>
+</html>
+
+ +

En la cabecera (head) tenemos un charset, el título de la página {{htmlelement("title")}} y un poco de CSS básico. El {{htmlelement("body")}} contiene los elementos{{htmlelement("canvas")}} y {{htmlelement("script")}}. Representaremos el juego en el primero y escribiremos el código JavaScript que lo controla en el segundo. El elemento  {{htmlelement("canvas")}} tiene el id myCanvas para que podamos hacer referencia a él con facilidad, y mide 480 píxeles de ancho por 320 de alto. Todo el código JavaScript que vamos a escribir en este tutorial lo pondremos entre las etiquetas <script> y </script>.

+ +

El lienzo (canvas)

+ +

Para que podamos visualizar los gráficos en el elemento {{htmlelement("canvas")}}, primero tenemos que preparar una referencia a él en JavaScript. Añade lo siguiente después de la etiqueta <script>:

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

Aquí estamos guardando una referencia al elemento {{htmlelement("canvas")}} en la variable canvas. Después estamos creando la variable ctx para guardar el contexto de gráficos 2D, que es la herramienta  que realmente utilizaremos para dibujar.

+ +

Veamos un fragmento de código de ejemplo que dibuja un cuadrado rojo en el canvas. Añade el código a continuación y abre el archivo index.html con un navegador para comprobar que funciona:

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

Todas las instrucciones están entre los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. Estamos definiendo un rectángulo utilizando {{domxref("CanvasRenderingContext2D.rect()","rect()")}}: los dos primeros valores especifican las coordenadas de la esquina superior izquierda del rectángulo en el canvas, y  los otros dos sirven para indicar el ancho y el alto. En nuestro caso, el rectángulo se dibuja a 20 píxeles desde la izquierda de la pantalla y 40 píxeles desde la parte de arriba, y tiene 50 píxeles de ancho y 50 de alto, con lo que obtenemos un cuadrado perfecto. La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} guarda un color que utilizará el método {{domxref("CanvasRenderingContext2D.fill()","fill()")}} para pintar el cuadrado que, en nuestro caso, será rojo.

+ +

Podemos dibujar otras cosas aparte de rectángulos. Aquí hay un fragmento de código que dibuja un círculo verde. Prueba a añadir esto al final de tu código JavaScript, guárdalo y recarga la página en el navegador:

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

Como puedes ver, estamos utilizando otra vez los métodos {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} y {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}. De lo que hay en medio, la parte más importante del código anterior es el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}. Tiene seis parámetros:

+ + + +

La propiedad {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} tiene un valor distinto al que habíamos puesto antes. Esto se debe a que, como ocurre en CSS, el color se puede especificar como un valor hexadecimal, como un nombre de color en inglés, la función rgba(), o cualquiera de los otros métodos de descripción de color que existen.

+ +

En lugar de utilizar {{domxref("CanvasRenderingContext2D.fill()","fill()")}} y rellenar las formas con colores, podemos utilizar {{domxref("CanvasRenderingContext2D.stroke()","stroke()")}} para colorear únicamente el trazo exterior. Prueba a añadir también esto a tu código JavaScript:

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

El código anterior dibuja un rectángulo vacío con el perímetro azul. Gracias al canal alfa de la función rgba(), que es el cuarto valor (Red, Green, Blue, Alpha), el color azul será medio transparente.

+ +

Compara tu código

+ +

Aquí está el código fuente completo de la primera lección, ejecutándose en un JSFiddle:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

+ +
+

Ejercicio: cambia el tamaño y el color de las figuras.

+
+ +

Pasos siguientes

+ +

Hemos preparado la estructura HTML básica y hemos aprendido un poquito a manejar el canvas. Para continuar, en el segundo capítulo averiguaremos cómo mover la bola en nuestro juego (Mueve la bola).

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html new file mode 100644 index 0000000000..e6d950b834 --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/deteccion_colisiones/index.html @@ -0,0 +1,128 @@ +--- +title: Detección de colisiones +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

+ +
+

Este es el séptimo paso de los 10 del juego "Gamedev Canvas tutorial". Puedes encontrar el código como deberá quedar después de completar la leción en Gamedev-Canvas-workshop/lesson7.html.

+
+ +

Ya tenemos los ladrillos en la pantalla pero el juego todavía no es muy interesante, porque la bola los atraviesa. Tenemos que pensar una manera de detectar colisiones para que la bola pueda rebotar en los ladrillos y romperlos.

+ +

Nosotros decidimos cómo implementar esto, por supuesto, pero puede ser complicado calcular si la bola está tocando el rectángulo o no, porque no hay funciones del <canvas> que sirvan para saberlo. En este tutorial vamos a hacerlo de la manera más fácil que existe: comprobaremos si el centro de la bola está tocando (colisionando) con cualquiera de los ladrillos. No siempre funcionará a la perfección y hay formas de detectar colisiones más sofisticadas que funcionan mejor, pero no nos interesa verlas porque estamos aprendiendo y tenemos que hacer las cosas fáciles.

+ +

Una función para detectar colisiones

+ +

Para lograr nuestro objetivo vamos a definir una función que, con un bucle, recorrerá todos los ladrillos y comparará la posición de cada uno con la posición de la bola, cada vez que se dibuje un fotograma. Para que el código sea más legible definiremos la variable "b" que almacenará el objeto ladrillo en cada vuelta de bucle:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculations
+        }
+    }
+}
+ +

Si el centro de la bola está dentro de las coordenadas de uno de nuestros ladrillos, cambiaremos la dirección de la bola. Se cumplirá que el centro de la bola está dentro de ladrillo si se cumplen al mismo tiempo estas cuatro condiciones:

+ + + +

Traducimos esto a JavaScript:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

Añade lo anterior a tu código, debajo de la función keyUpHandler().

+ +

Hacer que los ladrillos desaparezcan cuando reciben un golpe

+ +

El código anterior funcionará correctamente y la bola cambiará de dirección. El problema es que los ladrillos siguen donde están. Tenemos que imaginar una forma de ocuparnos de los que ya hemos golpeado con la bola. Podemos hacerlo añadiendo un parámetro extra para indicar si queremos pintar cada ladrillo en la pantalla o no. En la parte del código donde inicializamos los ladrillos, añadiremos una propiedad status a cada ladrillo. Cambia tu código fijándote en la línea que está resaltada:

+ +
var bricks = [];
+for(c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

A continuación consultaremos el "status" de cada ladrillo para saber si lo tenemos que dibujar o no. Si "status" vale 1, lo dibujaremos. Si vale 0, no lo dibujaremos porque habrá sido golpeado por la bola. Actualiza tu función drawBricks() para que quede así:

+ +
function drawBricks() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+ +

Actualizar el "status" en la función de detección de colisiones

+ +

Ahora tenemos que ocuparnos del valor de "status" en la función collisionDetection(): si el ladrillo está activo (status 1) comprobaremos si hay colisión. Si hay colisión, pondremos el "status" de ese ladrillo a 0 para no volver a pintarlo. Actualiza collisionDetection() así:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

Activar la función de detección de colisiones

+ +

Ya sólo falta llamar a la función collisionDetection() desde la función draw(). Añade la línea siguiente dentro de draw() function, justo después de la llamada a drawPaddle():

+ +
collisionDetection();
+
+ +

Compara tu código

+ +

Ahora se comprueban las colisiones cada vez que se dibuja un fotograma. Concretamente, miramos si la bola colisiona con cada ladrillo. ¡Ahora ya podemos romper ladrillos! :-

+ +

{{JSFiddleEmbed("https://jsfiddle.net/kundan333/myd4vbwg/5/","","320")}}

+ +
+

Ejercicio: cambia el color de la bola cada vez que choque con un ladrillo.

+
+ +

Pasos siguientes

+ +

Definitivamente, lo estamos consiguiendo. ¡Adelanteeee! En el capítulo octavo nos ocuparemos de la Puntuación y fin del juego ganando.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html new file mode 100644 index 0000000000..d57ccef444 --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/fin_del_juego/index.html @@ -0,0 +1,75 @@ +--- +title: Fin del juego +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Fin_del_juego +tags: + - Canvas + - Fin del juego + - JavaScript + - Tutorial + - graficos +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

+ +
+

Este es el quinto paso de 10 del Gamedev Canvas tutorial. Puedes ver como debería quedar el código fuente después de completar esta lección en Gamedev-Canvas-workshop/lesson5.html.

+
+ +

Es divertido ver la bola rebotando en las paredes y ser capaz de mover la pala pero, aparte de eso, el juego no hace nada y no tiene ningún progreso ni un objetivo final. Sería bueno desde el punto de vista del juego poder perder. La lógica asociada a perder en este juego es fácil de entender: si se te escapa la bola y alcanza el borde inferior de la pantalla, pierdes y se acabó el juego.

+ +

Implementar el final del juego

+ +

Intentemos implementar el final del juego en nuestro juego. Aquí está el trozo de código de la tercera lección en donde hicimos que la pelota rebotara en las paredes:

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

En lugar de dejar que la pelota rebote en las cuatro paredes, vamos a permitir que lo haga sólo en tres: izquierda, arriba y derecha. Alcanzar la pared inferior supondrá el fin del juego. Editaremos el segundo bloque if y lo convertiremos en un "if else" que activará el estado de "final de juego" cuando la pelota colisione con el borde inferior del terreno de juego. Por ahora nos conformaremos con mostrar un mensaje con la función alert() y con reiniciar el juego volviendo a cargar la página. Modifica el segundo if para que quede así:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+ +

Hacer que la pala golpee la bola

+ +

Para terminar esta lección sólo nos falta detectar la colisión de la bola y la paleta para que pueda rebotar, volviendo hacia la zona de juego. La manera más sencilla de hacerlo es comprobar si el centro de la bola está entre los límites izquierdo y derecho de la paleta. Actualiza el último fragmento del código, el "if else" de antes, para que te quede así:

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    if(x > paddleX && x < paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}
+ +

Si la bola toca el borde inferior del lienzo (Canvas) debemos comprobar si golpea la pala. Si es así, entonces rebota como el jugador se imagina que va a ocurrir; si no, el juego ha terminado.

+ +

Compara tu código

+ +

Aquí tienes el código que funciona para que lo compares con el tuyo:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","320")}}

+ +
+

Ejercicio: haz que la bola se mueva más rápida cuando golpea la pala.

+
+ +

Siguientes pasos

+ +

Lo estamos haciendo bastante bien hasta ahora y nuestro juego está empezando a despertar interés ahora que se puede perder. Pero todavía falta algo. Vamos a pasar al sexto capítulo, Construir el muro de ladrillos, y crear algunos ladrillos para que la bola los destruya.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Control_pala_y_teclado", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Construye_grupo_bloques")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html new file mode 100644 index 0000000000..10ea794d5f --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/index.html @@ -0,0 +1,52 @@ +--- +title: Famoso juego 2D usando JavaScript puro +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro +tags: + - 2D Canvas JavaScript Tutorial + - Principiante Juegos +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}}

+ +

En este tutorial paso a paso creamos un juego de la MDN, sencillo y muy famoso, escrito íntegramente en JavaScript puro. Todos los elementos gráficos aparecerán dentro de la etiqueta {{htmlelement("canvas")}} de HTML5.

+ +

Cada paso tiene ejemplos editables y listos para ejecutar, para que puedas ver qué aspecto debería tener el ejercicio en cada momento. Apenderás a utilizar el elemento {{htmlelement("canvas")}} para implementar mecánicas de juego fundamentales como la representación de imágenes, el movimiento, la detección de colisiones, los mecanismos de control y el final del juego ganando o perdiendo.

+ +

Para aprovechar al máximo esta serie de artículos necesitas tener ya un conocimiento básico o intermedio de JavaScript. Cuando termines este tutorial serás capaz de construir tus propios juegos Web.

+ +

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

+ +

Detalle de las lecciones

+ +

Todas las lecciones y las diferentes versiones del famoso juego MDN que estamos construyendo juntos están disponibles en GitHub:

+ +
    +
  1. Crea el lienzo (canvas) y dibuja en él
    2. +
  2. Mueve la bola
    3. +
  3. Rebota en las paredes
    4. +
  4. Control de la pala y el teclado
    5. +
  5. Fin del juego
    6. +
  6. Construye el muro de ladrillos
    7. +
  7. Detección de colisiones
    8. +
  8. Cuenta los puntos y gana
    9. +
  9. Controles del ratón
    10. +
  10. Finalizando
    11. +
+ +

Empezar con JavaScript puro es la mejor forma de adquirir un conocimiento sólido sobre desarrollo de juegos. Después, puedes escoger cualquier entorno de desarrollo (framework) que te guste y usarlo para tus proyectos. Los frameworks son simplemente herramientas construidas con el lenguaje JavaScript; por tanto aunque planees trabajar con ellas, es bueno aprender primero  sobre el mismo lenguaje para saber exactamente qué es lo que hay por debajo. Los frameworks aceleran el tiempo de desarrollo y ayudan a tener en cuenta las partes aburridas del juego, pero si algo no funciona como esperas, siempre puedes intentar depurarlo o simplemente escribir tu solución en JavaScript puro.

+ +
+

Nota: Si estás interesado en aprender sobre el desarrollo de juegos en 2D usando una entorno de desarrollo, consulta esta serie homóloga, famoso juego 2D usando Phaser.

+
+ +
+

Nota:  Esta serie de artículos puede usarse como material para talleres prácticos de desarrollo de juegos. También puedes hacer uso del kit de contenido canvas Gamedev  basado en este tutorial si quieres dar una charla sobre desarrollo de juegos en general.

+
+ +

Siguientes pasos

+ +

Vale, ¡vamos a empezar! Dirígete hacia el primer tema — Crea el lienzo (canvas) y dibuja en él.

+ +

{{Next("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it")}} 

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html new file mode 100644 index 0000000000..60a5df8c5a --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/mueve_la_bola/index.html @@ -0,0 +1,154 @@ +--- +title: Mueve la bola +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Mueve_la_bola +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +--- +
{{GamesSidebar}}
{{IncludeSubnav("/es-ES/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

+ +
+

Este es el segundo paso de los 10 del tutorial de Canvas para el desarrollo de juegos. Puedes encontrar el código fuente como debería quedar después de completar la lección en Gamedev-Canvas-workshop/lesson2.html.

+
+ +

Ya sabes cómo dibujar una pelota, lo has aprendido en el artículo anterior. Ahora vamos a hacer que se mueva. Técnicamente, estaremos pintando la pelota en la pantalla, borrándola y luego pintándola de nuevo en una posición ligeramente diferente cada fotograma para dar la impresión de movimiento, igual que se hace en las películas.

+ +

 

+ +

Definir un bucle de dibujo

+ +

 

+ +

Para actualizar el dibujo del lienzo en cada fotograma, necesitamos definir una función de dibujo que se ejecutará una y otra vez, cambiando una serie de variables para modificar la posición de cada personaje (sprite). Para que una misma función se ejecute una y otra vez puedes utilizar una función de sincronización de JavaScript, como {{domxref("WindowTimers.setInterval()", "setInterval()")}} or {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}.

+ +

Elimina todo el código JavaScript que tienes ahora mismo en de tu archivo HTML, excepto las dos primeras líneas, y añade lo siguiente debajo de ellas. La función draw() se ejecutará dentro de setInterval cada 10 milisegundos:

+ +
function draw() {
+    // código para dibujar
+}
+setInterval(draw, 10);
+ +

Gracias a la naturaleza infinita de setInterval, la función draw () se llamará cada 10 milisegundos por siempre, o hasta que lo detengamos. Ahora, vamos a dibujar la bola. Agrega lo siguiente dentro de tu función draw ():

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

Prueba tu código actualizado ahora — la bola debería repintarse en cada fotograma (frame).

+ +

Hacer que se mueva

+ +
+
Aunque la bola se está dibujando cada 10 milisegundos no se nota porque no hay movimiento, se dibuja una y otra vez en el mismo sitio.Vamos a cambiar eso. En primer lugar, en lugar de dibujar siempre en la posición (50, 50) definiremos un punto de inicio en la parte central inferior del lienzo en las variables llamadas x e y, a continuación, las utilizaremos para definir la posición en la que se dibuja el círculo.
+
+Primero, agrega las dos líneas siguientes a la función draw (), para definir x e y:
+
+ +

 

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

 

+ +

A continuación actualiza la función draw() para usar las variables x e y en el método {{domxref("CanvasRenderingContext2D.arc()","arc()")}}, como se muestra en la siguiente línea resaltada:

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+ +

Ahora viene la parte importante: queremos añadir un valor pequeño a x e y después de que cada fotograma se haya dibujado para que parezca que la pelota se está moviendo. Definamos estos valores pequeños como dx y dy, y establezcamos sus valores en 2 y -2 respectivamente. Agrega lo siguiente debajo de sus definiciones de variables x e y:

+ +
var dx = 2;
+var dy = -2;
+
+ +

Lo último que hay que hacer es actualizar x e y con nuestras variables dx y dy en cada fotograma, de modo que la bola será pintada en la nueva posición en cada actualización. Agrega las dos nuevas líneas siguientes indicadas a continuación a la función draw ():

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+ +

Guarda el código de nuevo y pruébalo en tu navegador. Esto funciona bien, aunque parece que la bola está dejando un rastro detrás de ella:

+ +

+ +

Borrar el  lienzo antes de cada fotograma

+ +
+
La bola está dejando un rastro porque estamos pintando un nuevo círculo en cada fotograma sin borrar el anterior. No te preocupes, porque hay un método para borrar todo el contenido de lienzo: {{domxref ("CanvasRenderingContext2D.clearRect ()", "clearRect ()")}}. Este método tiene cuatro parámetros: las coordenadas x e y de la esquina superior izquierda de un rectángulo y las coordenadas x e y de la esquina inferior derecha de un rectángulo. En todo el área definida por ese rectángulo se borrará cualquier cosa que se haya pintado antes.
+
+ +
+
+
 
+
+
+ +

Añade la siguiente nueva línea resaltada a la función draw():

+ +
function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+
+ +

Guarda tu código y vuelve a probarlo. Esta vez verás el movimiento de la bola sin dejar rastro. Cada 10 milisegundos se borra todo el lienzo, se dibuja el círculo azul (nuestra pelota) en una posición determinada y los valores x e y se actualizan para el siguiente fotograma.

+ +

Limpiar el código

+ +

Vamos a añadir más y más comandos a la función draw () en los próximos artículos, por lo que es bueno mantenerlo lo más simple y limpio posible. Comencemos moviendo el código de dibujo de la bola a una función separada.
+
+ Reemplaza la función draw() con las dos funciones siguientes:

+ +
function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}
+ +

Compara tu código

+ +

Puedes comprobar el código terminado de este artículo en la demostración en vivo a continuación, y jugar con ella para entender mejor cómo funciona:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}

+ +
+

Ejercicio: intenta cambiar la velocidad de la bola en movimiento o la dirección hacia la que se mueve.

+
+ +

Siguientes pasos

+ +

Hemos dibujado nuestra bola y hemos hecho que se mueva, pero cuando supera el borde del canvas, desaparece. En el tercer capítulo exploraremos como hacer que rebote en las paredes.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Create_the_Canvas_and_draw_on_it", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Bounce_off_the_walls")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html new file mode 100644 index 0000000000..a3bd5e2c2e --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/terminando/index.html @@ -0,0 +1,95 @@ +--- +title: Terminando +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Terminando +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

+ +
+

Este es el último de los 10 pasos del Gamedev Canvas tutorial. Puedes encontrar el código fuente tal y como quedará al terminar esta lección en Gamedev-Canvas-workshop/lesson10.html.

+
+ +

Siempre es posible mejorar cualquier juego que hagamos. Por ejemplo, podemos dar vidas al jugador. Así, aunque pierda la bola una o dos veces, todavía puede intentar derribar todo el muro. También podemos mejorar los aspectos gráficos.

+ +

Dar vidas al jugador

+ +

Dar vidas es bastante sencillo. Primero, añade una variable para guardar el número de vidas que tiene en cada momento. Ponla después de las que ya tienes:

+ +
var lives = 3;
+ +

Mostrar por pantalla el número de vidas es prácticamente lo mismo que mostrar el contador de puntos. Añade la función siguiente detrás de la función drawScore():

+ +
function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}
+ +

En lugar de terminar el juego inmediatamente, restaremos una vida hasta que ya no quede ninguna. También podemos colocar la bola y la paleta en la posición inicial cuando el jugador empiece con la vida siguiente. En la función draw() cambia las dos líneas siguientes...

+ +
alert("GAME OVER");
+document.location.reload();
+ +

... por estas otras:

+ +
lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}
+ +

Ahora, cuando la bola toca el fondo, restamos una vida. Si no queda ninguna, el jugador pierde y termina la partida. Si queda alguna, entonces colocamos la bola y la paleta en el centro, y hacemos que la bola vaya en la nueva dirección correcta y a la velocidad inicial.

+ +

Sacar por pantalla el contador de vidas

+ +

Tienes que añadir una llamada a drawLives() dentro de draw() debajo de la llamada a drawScore():

+ +
drawLives();
+
+ +

Mejorar el refresco con requestAnimationFrame()

+ +

Ahora vamos a ocuparnos de algo que no es particular de este juego, sino de la forma en la que se muestran las imágenes en pantalla.

+ +

{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} ayuda al navegador a refrescar la imagen mejor que con el método {{domxref("windowTimers.setInterval()", "setInterval()")}} que estamos utilizando. Cambia la línea siguiente...

+ +
setInterval(draw, 10);
+ +

...por esta otra:

+ +
draw();
+ +

Y, ahora, al final de la función draw(), justo antes de la llave que la cierra, añade la línea siguiente, que hará que la función draw() se llame a sí misma una y otra vez:

+ +
requestAnimationFrame(draw);
+ +

Ahora draw() se ejecuta una y otra vez con un bucle requestAnimationFrame() pero, en lugar de hacerlo cada 10 milisegundos, dejamos que sea el navegadro quien decida cada cuánto tiempo. El navegador sincronizará el refresco, es decir, el número de fotogramas por segundo, a lo que sea capaz la máquina que está ejecutando el juego. De este modo la animación será más eficiente y más suave que el viejo método setInterval().

+ +

Compara tu código

+ +

Ya hemos terminado. ¡La versión final del juego está lista para publicar!

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/9temh0ta/","","320")}}

+ +
+

Ejercicio: cambia el número de vidas y el ángulo de la trayectoria de la bola cuando golpea la paleta.

+
+ +

Game over - de momento!

+ +

Enhorabuena, has terminado todas las lecciones. Ya has aprendido las técnicas básicas de manipulación del <canvas> y la lógica que hay detrás de los juegos 2D sencillos.

+ +

Ahora sería un buen momento para aprender a utilizar entornos de desarrollo (frameworks) y de continuar con el desarrollo de juegos. Puedes echar un vistazo a estas otra forma de realizar el mismo juego que has visto en 2D breakout game using Phaser, o de echar un vistazo al tutorial Cyber Orb built in Phaser. También puedes leer el contenido de Games section on MDN para inspirarte y seguir aprendiendo.

+ +

También puedes volve al índice de este tutorial. ¡Diviértete programando!

+ +

{{Previous("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html new file mode 100644 index 0000000000..b67a730e94 --- /dev/null +++ b/files/es/games/workflows/famoso_juego_2d_usando_javascript_puro/track_the_score_and_win/index.html @@ -0,0 +1,92 @@ +--- +title: Poner un contador y terminar ganando +slug: Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Track_the_score_and_win +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

+ +
+

Este es el octavo capítulo de 10, del Gamedev Canvas tutorial. Puedes encontrar el código fuente como debería quedar tras este capítulo en Gamedev-Canvas-workshop/lesson8.html.

+
+ +

Destruir los ladrillos mola, pero para que el juego sea aún mejor, podría dar puntos cada vez que el jugador rompe un ladrillo, y mostrar un contador.

+ +

El contador

+ +

Si puedes ver el contador mientras juegas, puede que consigas impresionar a tus amigos. Necesitas una variable para guardar el contador. Añade esto a tu JavaScript, después de las otras definiciones de variables:

+ +
var score = 0;
+ +

También necesitas una función drawScore() para enseñar el contador por pantalla. Añade esto después de la función collisionDetection():

+ +
function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}
+ +

Dibujar texto en el <canvas> es similar a dibujar un círculo o cualquier otra figura. La definición del tipo de letra (fuente) se hace igual que en CSS, puedes fijar el tamaño y fuente con el método {{domxref("CanvasRenderingContext2D.font","font()")}} method. Despúes utilizas {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} para fijar el color y {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} para escribir el texto y el lugar en el que se va a dibujar. El primer parámetro es el texto en si y los otros dos son las coordenadas.

+ +

Para sumar un punto cada vez que se rompe un ladrillo, añade la línea que está marcada aquí debajo:

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}
+ +

Llamando a drawScore() (dibujar contador) desde la función draw() hace que se muestre el contador actualizado en la pantalla. Añade la línea siguiente en draw(), justo debajo de la llamada a drawPaddle():

+ +
drawScore();
+ +

Mostrar un mensaje de victoria cuando se hayan destruido todos los ladrillos

+ +

Lo de sumar puntos funciona, pero tiene un final. ¿Qué ocurrirá cuando no queden ladrillos? Precisamente ese es el principal objetivo del juego, tendrás que dibujar un mensaje de victoria. Añade las líneas marcadas a tu función collisionDetection():

+ +
function collisionDetection() {
+    for(c=0; c<brickColumnCount; c++) {
+        for(r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}
+ +

Gracias a esto, los jugadores pueden ganar cuando rompen todos los ladrillos, que es muy importante. La función document.location.reload() vuelve a cargar la página y el juego empieza de nuevo, una vez se hace clic sobre el botón del alert().

+ +

Compara tu código

+ +

Puedes comparar tu código con este:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/mvfkcydz/","","320")}}

+ +
+

Ejercicio: añade más puntos por ladrillo y muestra el contador cuando salga el alert() del final del juego con victoria.

+
+ +

Pasos siguientes

+ +

El juego, ahora mismo, ya tiene buena pinta. En la siguiente lección conseguirás que sea más atractivo porque añadirás el Control del ratón.

+ +

{{PreviousNext("Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Deteccion_colisiones", "Games/Workflows/Famoso_juego_2D_usando_JavaScript_puro/Controles_raton")}}

diff --git a/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html b/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html new file mode 100644 index 0000000000..135193ec50 --- /dev/null +++ b/files/es/games/workflows/html5_gamedev_phaser_device_orientation/index.html @@ -0,0 +1,437 @@ +--- +title: >- + Introducción al Desarrollo de Juegos en HTML5 con Phaser y la API de + Orientación a Dispositivos +slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation +tags: + - API Vibración + - API orientacion de dispositivos + - Canvas + - Desarrollo de videojuegos + - HTML5 + - Phaser +translation_of: Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation +--- +
{{GamesSidebar}}

{{ draft() }}

+ +

Introducción

+ +

En este tutorial iremos a través del proceso de construcción de un juego en HTML5 para móviles que utilizará las APIs de Orientación para Dispositivos y Vibración para mejorar la jugabilidad y estará construido utilizando el framework Phaser. Se recomienda tener conocimientos básicos de JavaScript para sacar mayor provecho a este tutorial.

+ +

Ejemplo

+ +

Al finalizar este tutorial tendrás un juego demo completamente funcional: Cyber Orb. Se verá más o menos así:

+ +

+ +

Phaser framework

+ +

Phaser es un framework para construir juegos, de móvil o escritorio, en HTML5 . Es nuevo pero está creciendo velozmente gracias a la apasionada comunidad involucrada en el proceso de desarrollo. Puedes chequearlo en GitHub donde se encuentra como open source. Lee la documentación en línea y recorre su gran colección de ejemplos. El framework Phaser provee una serie de herramientas que acelerarán el desarrollo y te ayudaran a manejar las tareas genéricas necesarias para completar tu juego, para que así puedas concentrarte en la idea del juego en sí.

+ +

Empezando con el proyecto

+ +

Puedes ver el código fuente de Cyber Orb en GitHub. La estructura de carpetas no es nada complicada: el punto de partida es el archivo index.html donde inicializaremos el framework y configuraremos el canvas donde correrá el juego.

+ +

+ +

Puedes hacer clic en el archivo index desde tu navegador favorito para iniciar el juego y probarlo. También hay tres carpetas en el directorio: 

+ + + +

Configurando el canvas

+ +

Vamos a renderizar nuestro juego sobre el elemento <canvas>, pero no lo haremos manualmente  — de esto se ocupará el framework.  Vamos a configurarlo: nuestro punto de partida es el archivo index.html con el siguiente contenido. Puedes crearlo tú mismo si quieres hacer un seguimiento más detallado:

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Cyber Orb</title>
+    <style> body { margin: 0; background: #333; } </style>
+    <script src="src/phaser.min.js"></script>
+    <script src="src/Boot.js"></script>
+    <script src="src/Preloader.js"></script>
+    <script src="src/MainMenu.js"></script>
+    <script src="src/Game.js"></script>
+</head>
+<body>
+<script>
+(function() {
+    var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+    game.state.add('Boot', Ball.Boot);
+    game.state.add('Preloader', Ball.Preloader);
+    game.state.add('MainMenu', Ball.MainMenu);
+    game.state.add('Game', Ball.Game);
+    game.state.start('Boot');
+})();
+</script>
+</body>
+</html>
+ +

Hasta ahora tenemos una simple página web HTML con el contenido básico en la sección <head>: configuración de caracteres, título, estilo y las inclusión de los archivos JavaScripts. El <body> contiene la inicialización del framework Phaser y las definiciones del estado del juego.

+ +
var game = new Phaser.Game(320, 480, Phaser.CANVAS, 'game');
+ +

La linea de arriba inicializará la intancia de Phaser — los argumentos son el ancho del <canvas>, su altura, el método de renderizado (estamos utilizando CANVAS pero también existen disponibles las opciones WEBGL y AUTO) y el ID opcional del contenedor DOM en el que queremos poner el <canvas>. Si no hay nada especificado en el último argumento o el elemento no es encontrado, el <canvas> será añadido a la etiqueta <body>. Sin el framework para añadir el elemento canvas hubieses tenido que escribir algo como esto dentro de la etiqueta <body>:

+ +
<canvas id='game' width='320' height='480'></canvas>
+ +

Es importante recordar que el framework está montando métodos útiles para acelerar un montón de cosas como la manipulación de imagenes o la administración de elementos, que serían más difíciles si tuvieramos que hacerlo manualmente.

+ +
+

Nota: Puedes leer este artículo: "Building Monster Wants Candy" para una introducción en profundidad a las funciones y métodos específicos de Phaser.

+
+ +

Volviendo a los estados del juego: La linea de abajo añade un nuevo estado al juego llamado Boot:

+ +
game.state.add('Boot', Ball.Boot);
+ +

El primer valor es el nombre del estado, el segundo es el objeto al que queremos asignárselo. El metodo start está iniciando el estado dado y haciendolo activo. Veamos qué es lo que son los estados realmente.

+ +
 
+ +

Gestionando los estados de juego

+ +

Los estados en Phaser son partes separadas de la lógica del juego, en nuestro caso los estamos cargando de archivos JavaScript independientes para un mejor mantenimiento. En este juego tenemos estados básicos: Boot, Preloader, MainMenu, Howto y Game. Boot se hará cargo de la inicialización de algunas opciones de configuración, Preloader cargará todos los elementos utilizados como los gráficos y el audio, MainMenu es el menu con el botón de inicio, Howto muestra las intrucciones de cómo jugar y el estado Game es el que finalmente te permite jugar el juego. Veamos rapidamente el contenido de esos estados.

+ +

Boot.js

+ +

El estado Boot es el primero en el juego.

+ +
var Ball = {
+    _WIDTH: 320,
+    _HEIGHT: 480
+};
+Ball.Boot = function(game) {};
+Ball.Boot.prototype = {
+    preload: function() {
+        this.load.image('preloaderBg', 'img/loading-bg.png');
+        this.load.image('preloaderBar', 'img/loading-bar.png');
+    },
+    create: function() {
+        this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+        this.game.scale.pageAlignHorizontally = true;
+        this.game.scale.pageAlignVertically = true;
+        this.game.state.start('Preloader');
+    }
+};
+ +

El objeto principal Ball es definido y estamos añadiendo dos variables llamadas _WIDTH y _HEIGHT esos seran el ancho y la altura del canvas de nuestro juego, respectivamente — nos ayudarán a posicionar los elementos en la pantalla. Estamos cargando dos imagenes primero que serán usadas después en el estado Preload para mostrar el progreso de la carga de los demás elementos. La función create contiene algunas de las configuraciones básicas: estamos configurando la escala y la alineación del canvas, y avanzando al estado Preload cuando todo este listo.

+ +

Preloader.js

+ +

El estado Preloader se ocupa de cargar todos los elementos:

+ +
Ball.Preloader = function(game) {};
+Ball.Preloader.prototype = {
+    preload: function() {
+        this.preloadBg = this.add.sprite((Ball._WIDTH-297)*0.5, (Ball._HEIGHT-145)*0.5, 'preloaderBg');
+        this.preloadBar = this.add.sprite((Ball._WIDTH-158)*0.5, (Ball._HEIGHT-50)*0.5, 'preloaderBar');
+        this.load.setPreloadSprite(this.preloadBar);
+
+        this.load.image('ball', 'img/ball.png');
+        // ...
+        this.load.spritesheet('button-start', 'img/button-start.png', 146, 51);
+        // ...
+        this.load.audio('audio-bounce', ['audio/bounce.ogg', 'audio/bounce.mp3', 'audio/bounce.m4a']);
+    },
+    create: function() {
+        this.game.state.start('MainMenu');
+    }
+};
+ +

Para crear un nuevo botón tenemos el método add.button con la siguiente lista de argumentos opcionales:

+ + + +

El anchor.set colocará el punto de ancla en el botón con el cual se realizarán y aplicarán todos los cálculos de posición para el botón. En nuestro caso, está anclado a la mitad del borde izquierdo y al comienzo del borde superior, para así centrarlo de manera horizontal facilmente, sin necesidad de saber su ancho.

+ +

Cuando el boton de inicio es presionado, en lugar de saltar directamente a la acción, el juego mostrará la pantalla con las intrucciones para jugar.

+ +

Howto.js

+ +
Ball.Howto = function(game) {
+};
+Ball.Howto.prototype = {
+    create: function() {
+        this.buttonContinue = this.add.button(0, 0, 'screen-howtoplay', this.startGame, this);
+    },
+    startGame: function() {
+        this.game.state.start('Game');
+    }
+};
+ +

El estado Howto muesta las intrucciones de juego en la pantalla antes de comenzar el juego. Luego de clickear la pantalla el juego es lanzado.

+ +

Game.js

+ +

El estado Game del archivo Game.js es donde ocurre toda la magia. Todas las inicializaciones estan en la función create() (que se lanza una vez al comienzo del juego). Luego de eso, algunas funcionalidades requeriran más código para controlar — escribiremos nuestras propias funciones para manejar tareas más complicadas. En particular, toma nota de la función update() que es ejecutada en cada frame y actualiza cosas como la posición de la pelota.

+ +
Ball.Game = function(game) {};
+Ball.Game.prototype = {
+    create: function() {},
+    initLevels: function() {},
+    showLevel: function(level) {},
+    updateCounter: function() {},
+    managePause: function() {},
+    manageAudio: function() {},
+    update: function() {},
+    wallCollision: function() {},
+    handleOrientation: function(e) {},
+    finishLevel: function() {}
+};
+ +

Las funciones create y update son específicas del framework, mientras que otras seran nuestras propias creaciones:

+ + + +

Agregando la pelota y sus mecanismos de movimiento

+ +

Primero vamos a ir a la función create(), inicializamos el objeto ball y le asignamos unas cuantas propiedades:

+ +
this.ball = this.add.sprite(this.ballStartPos.x, this.ballStartPos.y, 'ball');
+this.ball.anchor.set(0.5);
+this.physics.enable(this.ball, Phaser.Physics.ARCADE);
+this.ball.body.setSize(18, 18);
+this.ball.body.bounce.set(0.3, 0.3);
+ +

Aqui estamos agregando un sprite en un lugar de la pantalla y utilizando la imagen de la pelota de los elementos gráficos ya cargados. También estamos configurando el anchor (ancla) que realizará los cálculos de física para el centro de la pelota, habilitando el motor de físicas Arcade (que manejara todas las físicas para el movimiento de la pelota), y estableciendo el tamaño del cuerpo para la detección de colisiones. La propiedad bounce es utilizada para configurar el 'rebote' de la pelota cuando golpea los obstaculos.

+ +

Controlando la pelota

+ +

Es genial tener lista la pelota para poder lanzarla en la zona del juego, pero también es importante poder realmente moverla! Ahora vamos a añadir la capacidad de controlar con el teclado la pelota en los dispositivos de escritorio, y luego pasaremos a la implementación de la API de Orientación de Dispositivo. Vamos a enfocarnos en el teclado primero añadiendo lo siguiente a la función create():

+ +
this.keys = this.game.input.keyboard.createCursorKeys();
+ +

Como puedes ver, hay una función especial de Phaser llamada createCursorKeys() que nos dará un objeto con controladores de evento para las cuatro teclas de flecha, que nos permitira jugar con: arriba, abajo, izquierda y derecha.

+ +

A continuación añadiremos el siguiente código a la función update(), para que sea ejecutado en cada frame. El objeto this.keys será chequeado con el input del jugador (las teclas que presione por ejemplo) así la pelota podrá reaccionar acorde, con una fuerza predefinida:

+ +
if(this.keys.left.isDown) {
+    this.ball.body.velocity.x -= this.movementForce;
+}
+else if(this.keys.right.isDown) {
+    this.ball.body.velocity.x += this.movementForce;
+}
+if(this.keys.up.isDown) {
+    this.ball.body.velocity.y -= this.movementForce;
+}
+else if(this.keys.down.isDown) {
+    this.ball.body.velocity.y += this.movementForce;
+}
+ +

De esa manera podemos verificar qué tecla es presionada en determinado frame y aplicar la fuerza definida a la pelota, así aumentar la velocidad en la dirección correcta.

+ +

Implementando la API de Orientación del Dispositivo

+ +

Probablemente la parte más interesante del juego es que utiliza la API de Orientación para Dispositivos móviles. Gracias a esto puedes jugar el juego inclinando el dispositivo en la dirección que quieres que la pelota ruede. Aquí está el código de la función create() responsable por esto:

+ +
window.addEventListener("deviceorientation", this.handleOrientation, true);
+ +

Vamos a añadir un detector de eventos al evento "deviceorientation" y vincularlo a la función handleOrientation, se ve como esto:

+ +
handleOrientation: function(e) {
+    var x = e.gamma;
+    var y = e.beta;
+    Ball._player.body.velocity.x += x;
+    Ball._player.body.velocity.y += y;
+}
+ +

Mientras más inclines el dispositivo, más fuerza se aplica a la pelota y la velocidad en la que se mueve es mayor.

+ +

+ +
+

Nota: Para encontrar más sobre implementar la orientación de los dispositivos y cómo se vé en código crudo, lee Keep it level: responding to device orientation changes.

+
+ +

Añadiendo el agujero

+ +

El principal objetivo del juego es mover la pelota desde la posición inicial a la posición final: un agujero en el suelo. Esta implementación es muy similar a la parte anterior en donde creamos la pelota, y también es añadida en la función create() de nuestro estado Game:

+ +
this.hole = this.add.sprite(Ball._WIDTH*0.5, 90, 'hole');
+this.physics.enable(this.hole, Phaser.Physics.ARCADE);
+this.hole.anchor.set(0.5);
+this.hole.body.setSize(2, 2);
+ +

La diferencia está en que el cuerpo del agujero se configura como inamovible por lo que no se moverá cuando acertamos con la pelota y tendrá calculada la detección de colisión (esto se tratará más adelante en este artículo).

+ +

Construyendo el laberinto de bloques

+ +

Para hacer más difícil el juego, y más interesante, añadiremos algunos obstaculos entre la pelota y la sálida. Podríamos usar un editor de niveles pero por motivo de este tutorial, vamos a crear algo nosotros mismos.

+ +

Para contener el bloque de información usaremos un array con los datos de nivel: para cada bloque almacenaremos las posiciones abolutas izquierda y superior en pixeles (x e y) y el tipo de bloque: horizontal o vertical (t con el valor 'w' para el ancho, y 'h' para la altura). Luego, para cargar el nivel analizaremos los datos y mostraremos los bloques especificos para ese nivel. En la función initLevels tenemos:

+ +
this.levelData = [
+    [
+        { x: 96, y: 224, t: 'w' }
+    ],
+    [
+        { x: 72, y: 320, t: 'w' },
+        { x: 200, y: 320, t: 'h' },
+        { x: 72, y: 150, t: 'w' }
+    ],
+    // ...
+];
+ +

Todos los elementos del array contienen una colección de bloques con una posición x e y y un valor t para cada uno. Luego de levelData pero dentro de la función initLevels, añadiremos los bloques dentro de un array en el loop for usando algunos de los métodos específicos del framework:

+ +
for(var i=0; i<this.maxLevels; i++) {
+    var newLevel = this.add.group();
+    newLevel.enableBody = true;
+    newLevel.physicsBodyType = Phaser.Physics.ARCADE;
+    for(var e=0; e<this.levelData[i].length; e++) {
+        var item = this.levelData[i][e];
+        newLevel.create(item.x, item.y, 'element-'+item.t);
+    }
+    newLevel.setAll('body.immovable', true);
+    newLevel.visible = false;
+    this.levels.push(newLevel);
+}
+ +

Primero, add.group() es usado para crear un nuevo grupo de items. Luego, el body tipe ARCADE se configura para permitir los cálculos de física. El método newLevel.create crea nuevos items en el grupo con posiciones superior e izquierda iniciales y su propia imagen. Si no quieres recorrer nuevamente la lista de elementos para agregar una propiedad a cada uno explicitamente, puedes usar setAll en un grupo para aplicarlo a todos los items en ese grupo.

+ +

Los objetos son almacenados en el array this.levels, el cual es por defecto invisible. Para cargar niveles específicos, nos aseguramos de que los niveles previos esten escondidos, y mostramos el nivel actual:

+ +
showLevel: function(level) {
+    var lvl = level | this.level;
+    if(this.levels[lvl-2]) {
+        this.levels[lvl-2].visible = false;
+    }
+    this.levels[lvl-1].visible = true;
+}
+ +

Gracias a eso el juego da al jugador un reto: ahora tiene que rodar la pelota a través del área de juego y guiarla por el laberinto construido por bloques. Es solo un ejemplo de cargar los niveles, y solo hay 5 puramente para mostrar la idea, pero podés trabajar en expandirlo por tu cuenta.

+ +

Detección de colisión

+ +

Hasta este punto tenemos la pelota, que puede ser controlada por el jugador, el agujero que se tiene que alcanzar y los obstáculos que bloquean el camino. Sin embargo, hay un problema: nuestro juego todavía no tiene ninguna detección de colisiones, así que no sucede nada cuando la pelota golpea los bloques, sólo los atraviesa. Vamos a arreglarlo! La buena noticia es que el framework se ocupará de calcular la detección de colisones, nosotros sólo debemos especificar los objetos con los que colisionará en la función update():

+ +
this.physics.arcade.collide(this.ball, this.borderGroup, this.wallCollision, null, this);
+this.physics.arcade.collide(this.ball, this.levels[this.level-1], this.wallCollision, null, this);
+ +

Esto le dirá al framework que ejecute la función wallCollision cuando la pelota golpee cualquiera de las paredes. Podemos usar la función wallCollision para añadir cualquier funcionalidad que querramos, como por ejemplo agregar el sonido de rebote e implementar la API de Vibración.

+ +

También debemos volver al objeto pelota y limitarlo a moverse sólo en la zona visible, para que no salga de la pantalla. Hay una función muy útil en Phaser que se llama collideWorldBounds:

+ +
ball.body.collideWorldBounds = true;
+ +

Hace exactamente lo que necesitamos: ahora la pelota rebotará en los bordes de la pantalla como de las paredes.

+ +

Añadiendo el sonido

+ +

Entre los elementos precargados hay una pista de audio (en varios formatos para asegurar la compatibilidad con el navegador), que podremos usar ahora. Debe primero ser definida en la función create():

+ +
this.bounceSound = this.game.add.audio('audio-bounce');
+ +

Si el estado del audio es true (es decir que el sonido del juego está activado) podremos reproducirlo en la función wallCollision:

+ +
if(this.audioStatus) {
+    this.bounceSound.play();
+}
+ +

Eso es todo: cargar y reproducir sonidos es sencillo con Phaser.

+ +

Implementando la API de Vibración

+ +

Cuando la detección de colisión funcione como es esperado, añadamos algunos efectos especiales con la ayuda de la API de Vibración.

+ +

La mejor forma de usarla en nuestro caso es haciendo que el teléfono vibre cada vez que la pelota golpee las paredes: dentro de la función wallCollision:

+ +
if("vibrate" in window.navigator) {
+    window.navigator.vibrate(100);
+}
+ +

Si el método vibrate es soportado por el navegador y está disponible en el objeto window.navigator, hará vibrar al telefono por 100 milisegundos. Eso es todo!

+ +

Añadiendo el tiempo transcurrido

+ +

Para mejorar la re-jugabilidad y dar a los jugadores la opción de competir entre ellos, almacenaremos el tiempo transcurrido: los jugadores entonces intentaran mejorar su tiempo de finalizacion. Para implementar esto en el juego tenemos que crear una variable para almacenar el número actual de segundos transcurrido desde el inicio del juego y mostrarselo al jugador durante el juego. Definamos primero las variables en la función create:

+ +
this.timer = 0; // time elapsed in the current level
+this.totalTimer = 0; // time elapsed in the whole game
+ +

Luego, podemos inicializar los objetos de texto necesarios para mostrar la información al usuario:

+ +
this.timerText = this.game.add.text(15, 15, "Time: "+this.timer, this.fontBig);
+this.totalTimeText = this.game.add.text(120, 30, "Total time: "+this.totalTimer, this.fontSmall);
+ +

Estamos definiendo la posición superior e izquierda del texto, el contenido que se muestra y el estilo aplicado al texto. Lo hemos impreso en pantalla, pero sería bueno actualizar los valores cada segundo:

+ +
this.time.events.loop(Phaser.Timer.SECOND, this.updateCounter, this);
+ +

Este bucle, también en la función create, ejecutará la función updateCounter cada segundo desde el comienzo del juego, así podemos aplicar los cambios acordes. Así es como se ve la función updateCounter completa:

+ +
updateCounter: function() {
+    this.timer++;
+    this.timerText.setText("Time: "+this.timer);
+    this.totalTimeText.setText("Total time: "+(this.totalTimer+this.timer));
+},
+ +

Como puedes ver estamos incrementando la variable this.timer y actualizando el contenido del objeto de texto con el valor actual en cada iteración, por lo que el jugador verá el tiempo transcurrido.

+ +

Terminando el nivel y el juego

+ +

La pelota está rodando en la pantalla, el temporizador funciona y tenemos el agujero al que tenemos que llegar. Vamos a configurar la posibilidad de finalizar el juego! La siguiente linea en la funcion update() añade un detector que se activa cuando la pelota llega al agujero.

+ +
this.physics.arcade.overlap(this.ball, this.hole, this.finishLevel, null, this);
+ +

Esto funciona de manera similar al método colide explicado anteriormente. Cuando la pelota se superpone con el agujero (en lugar de colisionar), la función finishLevel es ejecutada:

+ +
finishLevel: function() {
+    if(this.level >= this.maxLevels) {
+        this.totalTimer += this.timer;
+        alert('Congratulations, game completed!\nTotal time of play: '+this.totalTimer+' seconds!');
+        this.game.state.start('MainMenu');
+    }
+    else {
+        alert('Congratulations, level '+this.level+' completed!');
+        this.totalTimer += this.timer;
+        this.timer = 0;
+        this.level++;
+        this.timerText.setText("Time: "+this.timer);
+        this.totalTimeText.setText("Total time: "+this.totalTimer);
+        this.levelText.setText("Level: "+this.level+" / "+this.maxLevels);
+        this.ball.body.x = this.ballStartPos.x;
+        this.ball.body.y = this.ballStartPos.y;
+        this.ball.body.velocity.x = 0;
+        this.ball.body.velocity.y = 0;
+        this.showLevel();
+    }
+},
+ +

Si el nivel actual es igual al maximo número de niveles (5, en este caso), entonces el juego termina: recibiras un mensaje de felicitación junto con el numero de segundas transcurridos durante todo el juego, y un botoón para presionar que te llevará al menú principal.

+ +

Si el nivel actual es menor que 5, todas las variables necesarias se reinician y el siguiente nivel es cargado.

+ +

Ideas para nuevas características

+ +

Esto no es más que una demostración funcional de un juego que podría tener un montón de características adicionales. Por ejemplo podemos añadir poderes para recoger en el camino que harán que nuestra pelota ruede más rápido, otro podría detener el temporizador durante unos segundos o dar la pelota poderes especiales para atravesar obstáculos. También hay espacio para los obstáculos y trampas que harán más lenta la pelota, acelerar el tiempo o trampas de la propia pelota. Puedes crear más niveles con dificultades diferentes para cada uno. Incluso puedes obtener logros, tablas de clasificación y medallas para diferentes acciones en el juego. Hay un sinfín de posibilidades: sólo dependen de tu imaginación.

+ +

Resumen

+ +

Espero que este tutorial te ayude a introducirte dentro del desarrollo de los juegos 2D y te inspire a crear asombrosos juegos por tu cuenta. Puedes jugar el demo de Cyber Orb y chequear su código fuente en GitHub.

+ +

HTML5 nos da herramientas en bruto, los frameworks construidos sobre estas se están volviendo más rápidos y mejores, por lo que ahora es un gran momento para meterse en el desarrollo de juegos web. En este tutorial usamos Phaser, pero hay un gran número de otros frameworks que vale la pena considerar también, como ImpactJS, Construct 2 o PlayCanvas — depende de tus preferencias, habilidades de programación (o la falta de estas), el tamaño de tu proyecto, los requerimientos y otros aspectos. Deberías chequearlos todos y decidir cual es el que mejor se ajusta a tus necesidades.

diff --git a/files/es/games/workflows/index.html b/files/es/games/workflows/index.html new file mode 100644 index 0000000000..3a0807cc77 --- /dev/null +++ b/files/es/games/workflows/index.html @@ -0,0 +1,10 @@ +--- +title: Workflows for different game types +slug: Games/Workflows +tags: + - NeedsTranslation + - TopicStub +translation_of: Games/Tutorials +--- +
{{GamesSidebar}}

This page will contain links to different article series covering different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.

+

For example, a 2D maze game with Phaser and the Device Orientation API.

diff --git a/files/es/gecko/index.html b/files/es/gecko/index.html new file mode 100644 index 0000000000..b6ef98f950 --- /dev/null +++ b/files/es/gecko/index.html @@ -0,0 +1,25 @@ +--- +title: Gecko +slug: Gecko +tags: + - Gecko +translation_of: Mozilla/Gecko +--- +

Gecko es el nombre del motor de presentación desarrollado por la Fundación Mozilla. En un principio se llamó NGLayout.

+

La función de Gecko es leer el contenido de la web, tanto HTML, CSS, XUL, como JavaScript, y presentarlo en pantalla o imprimirlo.

+

Gecko es usado en varias aplicaciones, incluyendo unos pocos navegadores, como Firefox, Seamonkey(ex Mozilla Suite), Camino, etc. (Para una lista completa, por favor diríjase al artículo en Wikipedia sobre Gecko.) Los productos que usan la misma versión de Gecko tienen el mismo soporte de estándares.

+

Versiones de Gecko

+

we should make a table here

+ +

Recursos

+ +

{{ languages( { "de": "de/Gecko", "en": "en/Gecko", "fr": "fr/Gecko", "it": "it/Gecko", "ja": "ja/Gecko", "ko": "ko/Gecko", "pl": "pl/Gecko", "pt": "pt/Gecko", "zh-cn": "cn/Gecko" } ) }}

diff --git a/files/es/gecko_sdk/index.html b/files/es/gecko_sdk/index.html new file mode 100644 index 0000000000..ec633e890a --- /dev/null +++ b/files/es/gecko_sdk/index.html @@ -0,0 +1,117 @@ +--- +title: Gecko SDK +slug: Gecko_SDK +translation_of: Mozilla/Gecko/Gecko_SDK +--- +
+

El Gecko SDK, también conocido como el XULRunner SDK, es un conjunto de archivos XPIDL, cabeceras y herramientas para desarrollar componentes XPCOM que a su vez pueden por ejemplo ser accedidos desde XUL usando JavaScript.

+

Debe tenerse en cuenta que para desarrollar estos componentes, no es necesario todo el codigo fuente de por ejemplo Firefox, puesto que no es requerido el acceso a los elementos de la capa visual creando un componente. Por otra parte, ya que un componente solo contiene funcionalidades básicas, debería poder ejecutarse en cualquier producto  de la plataforma Mozilla. Por tanto no es necesario contar con un producto particular para construir las funcionalidades generales. Esta es la premisa sobre la que el Gecko SDK fue ideado.

+

No debe confundirse el Gecko/XULRunner SDK con el XULRunner en sí mismo. El Gecko SDK es una colección de archivos de cabeceras (headers) y herramientas usadas para el desarrollo general de componentes XPCOM que agregan funcionalidades a la plataforma existente, mientras que el XULRunner es un esquema de funcionalidades (framework) donde puede ser utilizado para ejecutarse independientemente (standalone) o embebido en aplicaciones basadas en el framework Mozilla.

+

El Gecko SDK contiene todas las herramientas y cabeceras necesarias para crear plugins scripts NPAPI incluyendo el compilador/enlazador xpidl y el último npapi.h.

+

Obteniendo el SDK

+

Actualizaciones

+

No es necesario descargar o recompilar el Gecko SDK por las actualizaciones de seguridad de Mozilla (por ejemplo, Mozilla 1.7.3) ya que las cabeceras y las librerías enlazadas en el Gecko SDK usualmente no sufren cambios como resultados de las actualizaciones de seguridad. Sin embargo, uno debe obtener y distribuir siempre los más nuevos componentes Gecko (como: gklayout.dll, etc.).

+

Descargas

+

Para versiones de Gecko anteriores a 2.0, deberá elegir la versión del Gecko SDK para la versión de Mozilla más cercana al utilizado. Para versiones de Gecko 2.0 o superior, deberá recompilar el componente para cada versión pues ya no está soportada la compatibilidad entre versiones.

+

Además de la continuidad de las versiones, aquí se pueden encontrar otras versiones (incluyendo Beta): Versiones de Xulrunner (archivos incluyen "sdk" en el nombre). El SDK sigue el mismo calendario de liberaciones que Firefox/Thunderbird. Una vez que el SDK se vuelve Beta, está listo para la construir las extensiones, tu componente debe trabajar con las versiones de lanzamiento del SDK sin ninguna modificación. Debido al proceso de Liberación Rapida lanzamiento rápido, puede ser una buena idea agregar el SDK en los Beta.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Enlace de DescargaGecko 20.0 (Firefox 20.0)Gecko 1.9.2 (Firefox 3.6)Gecko 1.9.1 (Firefox 3.5)Gecko 1.9 (Firefox 3.0)Gecko 1.8 (Firefox 1.5 and 2.0)
WindowsDescargarDescargarDescargarDescargarDescargar
Mac x86_64DescargarN/AN/AN/AN/A
Mac i386DescargarDescargarDescargarDescargarN/A
Mac ppcN/ADescargarDescargarDescargarDescargar
Linux x86_64DescargarN/AN/AN/AN/A
Linux i686DescargarDescargarDescargarDescargarDescargar
+

El SDK no está oficialmente lanzado para otras plataformas; si lo necesitas, probablemente deberás adaptarlo para la tuya.

+
+

Nota: Puedes subscribirte a un calendario de fechas de lanzamiento de Firefox. Como también, puedes ver las fechas en la Web.

+
+

Desempaquetar el tarball del SDK en algún directorio adecuado.

+

Situaciones con el OS X SDK

+

Si tu necesitas usar la utilidad xpidl para compilar archivos IDL en OS X, y lo más probable es que observes cuando ejecutes la herramienta un extraño error similar al de las siguientes líneas:

+ 
dyld: Library not loaded: /opt/local/lib/libintl.3.dylib
+  Referenced from: /Users/varmaa/xulrunner-sdk/bin/./xpidl
+  Reason: image not found
+Trace/BPT trap
+
+

Desafortunadamente, esto es causado pro un problema con el proceso de construcción del SDK que aún no se logró resolver (ver Bugzilla bug #430274). Para solucionarlo, necesitarás instalar primero MacPorts como se indica en los Prerequisitos de Construcción de Mac OS X e instalar con él libidl. En versiones 64-bit de Mac OS X, necesitarás instalar libidl con la opción +universal.

+

Una vez concluido, deberás ejecutar el siguiente comando:

+ 
ln -s /opt/local/lib/libintl.8.dylib /opt/local/lib/libintl.3.dylib
+

Esto debería corregir el problema.

+

Construyendo el SDK

+

Para construstruir el SDK, deberías construir el XULRunner (el Gecko SDK se forma como parte del proceso de contrucción del, por lo que suele llamarse también XULRunner SDK). Ver la  Documentación para la Compilación para mayores detalles. Después la contrucción del XULRunner se concluye corriendo make sdk desde el directorio objeto se creará un paquete del sdk en dist.

+

Contenidos del SDK

+

El SDK contiene lo siguiente:

+ +

Para más información sobre enlazado seguro de componentes XPCOM usando la librería XPCOM "glue", ver XPCOM Glue.

+

Utilizando el Sistema de Compilación Mozilla con el SDK

+

Es posible usar el Sistema de Compilación Mozilla con el SDK. Se puede hacer descargando el código fuente para Firefox y usando --with-libxul-sdk como opcion para el configure.

+

Recursos

+ +

{{ languages( { "zh-cn": "cn/Gecko_SDK", "en": "en/SDK_Gecko", "fr": "fr/SDK_Gecko", "ja": "ja/Gecko_SDK" } ) }}

+
+  
+
+

 

diff --git "a/files/es/generaci\303\263n_de_guids/index.html" "b/files/es/generaci\303\263n_de_guids/index.html" new file mode 100644 index 0000000000..6fb035653b --- /dev/null +++ "b/files/es/generaci\303\263n_de_guids/index.html" @@ -0,0 +1,61 @@ +--- +title: Generación de GUIDs +slug: Generación_de_GUIDs +--- +
(Esta página se encuentra en proceso de traducción - ruego a quién la complete, si no lo hago antes, retirar esta nota de estatus - Ibnkhaldun)
+

Los GUIDs son empleados por los programas integrados en Mozilla para identificar de modo único a una gran variedad de entidades, entre las que se incluyen las Interfaces XPCOM (en este caso, la GUID es llamada IID), los componentes (CID), y los "agregados" (add-ons), como extensiones y temas; no obstante, los "agregados" (add-ons) pueden (y debieran) ser identificados mediante IDs (identificadores) de la forma nombreextension@nombreorganizacion.tld a partir de Firefox 1.5.

+

Forma canónica de una GUID

+

La forma usual de una GUID es xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx, donde cada x corresponde a un dígito hexadecimal (01...9A...F). Y, debe ser única en el mundo dígital. De modo que no importa en que equipo sea instalada la entidad a la que identifica no compita con el identificador de otro objeto o programa instalado en el mismo. Esto quiere decir, que una GUID no puede ser escrita de modo arbitrario, siguiendo el modelo canónico. Debe ser generada por una utilidad (algoritmo) que garantice su unicidad. Sería gravísimo crear un componente o una biblioteca y asignar GUIDs arbitrarias a ella y sus entidades integrantes: al distribuirla e instalarla en otros equipos podría provocar efectos inesperados cuando los programas y utilitarios instalados en los mismos traten de hacer referencia a (o cargar) piezas de software cuyos identificadores se solapan. Existen muchas utilidades que permiten generar GUIDs únicos que se ajustan a la forma canónica. Entre otras:

+

Herramientas en línea

+ +

Windows

+

Los usuarios de Windows pueden emplear el utilitario GuidGen de Microsoft para obtener una GUID. (esta utilidad de parte de MS Visual C++)

+

Linux

+

Usar /usr/bin/uuidgen. Se encuentra en el paquete libuuid1 (Debian).

+

Mac OS X

+

Usar /usr/bin/uuidgen.

+

Perl

+

jkeiser's Mozilla tools incluye un generador UUID con salidas en los estilos C++ e IDL.

+

nsIUUIDGenerator

+

Se puede generar un identificador UUID desde código, contando con privilegios de ejecución en Mozilla, utilizando los métodos del objeto nsIUUIDGenerator. Ver la página enlazada para obtener detalles.

+

Formato COM/XPCOM

+

Cuando se declaran IIDs y CIDs mediante enunciados  #define en código C++ para Mozilla, suele emplearse el siguiente formato:

+
// xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx
+#define NS_...ID \
+{ 0xXXXXXXXX, 0xXXXX, 0xXXXX, \
+  { 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX } }
+
+

Para generar código en este formato puede emplearse alguna de las siguientes herramientas.

+

Utilidades en línea

+ +

guidgen

+

guidgen.exe, hace parte de Microsoft Visual Studio, genera UUIDs en este formato.

+
(N de T. Los dos párrafos siguientes son poco claros en el original - su traducción es difícil ¿alguna sugerencia? - hace falta un texto que los haga más orientadores - no son una buena ayuda)
+

bash

+

You can put the following into your .bashrc file:

+
uuidgen-c++()
+{
+       local UUID=$(uuidgen)
+       echo "// $UUID"
+       echo "#define NS__IID \\"
+       echo "{ 0x${UUID:0:8}, 0x${UUID:9:4}, 0x${UUID:14:4}, \\"
+       echo -n "  { 0x${UUID:19:2}, 0x${UUID:21:2}, 0x${UUID:24:2}, "
+       echo -n "0x${UUID:26:2}, 0x${UUID:28:2}, 0x${UUID:30:2}, "
+       echo "0x${UUID:32:2}, 0x${UUID:34:2} } }"
+}
+
+

Perl

+
#!/usr/bin/perl
+$uuid = `uuidgen`;
+chomp $uuid;
+print $uuid, "\n";
+@parts = ($uuid =~ /^(.{8})-(.{4})-(.{4})-(..)(..)-(..)(..)(..)(..)(..)(..)$/);
+print "{ 0x$parts[0], 0x$parts[1], 0x$parts[2], \\", "\n", " { ";
+for (3 .. 9) {
+    print "0x$parts[$_], ";
+}
+print "0x$parts[10] } }", "\n";
+
+

{{ languages( { "fr": "fr/G\u00e9n\u00e9ration_de_GUID", "ja": "ja/Generating_GUIDs", "pl": "pl/Generowanie_GUID" } ) }}

diff --git a/files/es/glossary/404/index.html b/files/es/glossary/404/index.html new file mode 100644 index 0000000000..7cd3dacb3b --- /dev/null +++ b/files/es/glossary/404/index.html @@ -0,0 +1,18 @@ +--- +title: '404' +slug: Glossary/404 +tags: + - Errores HTTP + - Glosario + - Insfraestructura + - navegación +translation_of: Glossary/404 +--- +

Una respuesta 404 es una respuesta estándar que significa que el {{Glossary("Server", "server")}} no puede encontrar el recursos solicitado.

+ +

Aprender más

+ + diff --git a/files/es/glossary/502/index.html b/files/es/glossary/502/index.html new file mode 100644 index 0000000000..f2dc63f6a8 --- /dev/null +++ b/files/es/glossary/502/index.html @@ -0,0 +1,22 @@ +--- +title: '502' +slug: Glossary/502 +tags: + - '502' + - Errores HTTP + - Glosario + - Infraestructura + - navegación +translation_of: Glossary/502 +--- +

Un código código de error  {{Glossary("HTTP")}} que significa "Bad Gateway" (Pasarela incorrecta).

+ +

Un {{Glossary("Server", "server")}} puede actuar como gateway (pasarela)  o proxy entre un cliente  (como tu navegador) y otros servidores. Cuando realizas una petición para acceder a una {{Glossary("URL")}}, el gateway (la pasarela)  retransmite tu petición al otro servidor."502" significa que ese otro servidor, al que accedemos mediante el gateway o proxy, ha devuelto una respuesta inválida.

+ +

Normalmente el servidor no está caído (por ejemplo no proporciona respuesta al servidor gateway/proxy), simplemente no comprende el mismo protocolo de intercambio de datos que el servidor gateway/proxy. Los {{Glossary("Protocol", "protocols")}} son bastante explícitos, y 502 usualmente significa que uno de las dos, o las dos máquinas fueron incorrectamente programadas.

+ +

Aprender más

+ + diff --git a/files/es/glossary/abstraction/index.html b/files/es/glossary/abstraction/index.html new file mode 100644 index 0000000000..8ed7d8eafd --- /dev/null +++ b/files/es/glossary/abstraction/index.html @@ -0,0 +1,29 @@ +--- +title: Abstracción +slug: Glossary/Abstraction +tags: + - Abstracción + - Glosario + - Lenguaje de programación + - Scripting + - programacion +translation_of: Glossary/Abstraction +--- +

En {{Glossary("computer programming", "programación")}}, una abstracción es una manera de reducir la complejidad y permitir un diseño e implementación más eficientes en sistemas de software complejos. Oculta la dificultad técnica de los sistemas detrás de {{Glossary("API", "APIs")}} más simples.

+ +

Ventajas de la Abstracción

+ + + +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/accessibility/index.html b/files/es/glossary/accessibility/index.html new file mode 100644 index 0000000000..c7d8839a4f --- /dev/null +++ b/files/es/glossary/accessibility/index.html @@ -0,0 +1,33 @@ +--- +title: Accesibilidad +slug: Glossary/Accessibility +tags: + - Accesibilidad + - Accessibility + - Glossary +translation_of: Glossary/Accessibility +--- +

La accesibilidad web (A11Y) hace referencia a las buenas prácticas para mantener la usabilidad de un sitio web a pesar de las restricciones físicas y técnicas. La accesibilidad web se define formalmente y es discutida en el {{Glossary("W3C")}} a través del {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).

+ +

Saber más

+ +

Conocimiento general

+ + + +

Aprende accesibilidad web

+ + + +

Referencias técnicas

+ + diff --git a/files/es/glossary/accessibility_tree/index.html b/files/es/glossary/accessibility_tree/index.html new file mode 100644 index 0000000000..0944f31397 --- /dev/null +++ b/files/es/glossary/accessibility_tree/index.html @@ -0,0 +1,41 @@ +--- +title: Árbol de accesibilidad (AOM) +slug: Glossary/Accessibility_tree +tags: + - AOM + - Accesibilidad + - DOM + - Glosario +translation_of: Glossary/Accessibility_tree +--- +

El árbol de accesibilidad o modelo de objeto de accesibillidad (AOM), contiene información relacionada con  {{Glossary("accessibility")}} para la mayoría de los elementos HTML.

+ +

Los navegadores convierten el lenguaje markup en una representación interna denominada DOM tree (árbol DOM). El árbol DOM contiene objetos para todos los elementos de markup, atributos y nodos de texto. Luego, los navegadores crean un árbol de accesibilidad basado en el árbol de DOM, el cual es usado por  Accessibility APIs de plataformas específicas para las tecnologías asistenciales como los lectores de pantalla. 

+ +

Hay cuatro elementos en un árbol de objeto de accesibilidad:

+ +

nombre

+ +
+
¿Cómo podemos referirnos a este objeto? Por ejemplo, un enlace con el texto 'Leer más' se llamará 'Leer más' (más información sobre cómo se computan los nombres se puede encontrar en Accessible Name and Description Computation spec).
+
descripción
+
¿Cómo describimos este elemento si queremos añadir algo al nombre? La descripción de una tabla podría explicar qué tipo de información ofrece esa tabla. 
+
rol
+
¿Qué tipo de elemento es? Por ejemplo, es un botón, una barra de navegación o una lista de elementos? 
+
estado
+
¿Tiene un estado? Piensa en marcado/desmarcado para las casillas de verificación o en desplegado/oculto para los elementos  <summary> (resumen). 
+
+ +

Además, el árbol de accesibilidad usualmente contiene información sobre lo que se puede hacer con un elemento: seguir un enlace, completar un cuadro de texto, etc.

+ + diff --git a/files/es/glossary/adobe_flash/index.html b/files/es/glossary/adobe_flash/index.html new file mode 100644 index 0000000000..4d7888faa9 --- /dev/null +++ b/files/es/glossary/adobe_flash/index.html @@ -0,0 +1,21 @@ +--- +title: Adobe Flash +slug: Glossary/Adobe_Flash +tags: + - CodingScripting + - Flash + - Glossary + - Infrastructure +translation_of: Glossary/Adobe_Flash +--- +

Flash es una tecnología obsolescente desarrollada por Adobe que hace posible crear aplicaciones Web ricas, gráficos vectoriales y multimedia. Para utilizar Flash dentro de un {{Glossary("Browser","web browser")}} es necesario instalar el complemento adecuado.

+ +

Aprende más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/ajax/index.html b/files/es/glossary/ajax/index.html new file mode 100644 index 0000000000..daff8a7250 --- /dev/null +++ b/files/es/glossary/ajax/index.html @@ -0,0 +1,32 @@ +--- +title: AJAX +slug: Glossary/AJAX +tags: + - AJAX + - CodingScripting + - Glosario + - Infrastructure +translation_of: Glossary/AJAX +--- +

AJAX (de las siglas en Inglés Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}} ) es una práctica de programación utilizada para construir páginas web más complejas y dinámicas, utilizando una tecnología conocida como {{Glossary("XHR_(XMLHttpRequest)","XMLHttpRequest")}}.

+ +

Lo que AJAX nos permite hacer, es modificar partes específicas del {{Glossary("DOM")}} de una página {{Glossary("HTML")}} sin la necesidad de refrescar la página entera. AJAX tambien nos permite trabajar asincrónicamente; esto significa que tu código seguirá corriendo mientras esa parte de la página de tu sitio web intenta recargarse (en comparación, una carga síncrona bloquearía tu código hasta que esa parte de la página web terminara de recargarse)

+ +

Con los sitios web interactivos y los estándares web modernos, AJAX está siendo reemplazado gradualmente por funciones dentro de frameworks de JavaScript y por la oficial {{domxref("Fetch API")}} Standard.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Información técnica

+ + diff --git a/files/es/glossary/algoritmo/index.html b/files/es/glossary/algoritmo/index.html new file mode 100644 index 0000000000..e007ec918e --- /dev/null +++ b/files/es/glossary/algoritmo/index.html @@ -0,0 +1,9 @@ +--- +title: Algoritmo +slug: Glossary/Algoritmo +tags: + - CodingScripting + - Glossary +translation_of: Glossary/Algorithm +--- +

Un algoritmo es un conjunto de instrucciones autocontenidas que realiza una función.

diff --git a/files/es/glossary/api/index.html b/files/es/glossary/api/index.html new file mode 100644 index 0000000000..126195198f --- /dev/null +++ b/files/es/glossary/api/index.html @@ -0,0 +1,15 @@ +--- +title: API +slug: Glossary/API +translation_of: Glossary/API +--- +

Resumen

+

Una Interfaz de Programación de Aplicaciones (API, por sus siglas en inglés) define un conjunto de directivas que pueden ser usadas para tener una pieza de software funcionando con algunas otras.

+

Más a fondo

+

Una Interfaz de Programación de Aplicaciones es un término común en Ciencias de la Computación. Es un término genérico que es usado para cubrir todos los requerimientos técnicos para tener varios componentes de software capaces de funcionar con los demás. En un contexto web, su uso es un poco más restrictivo, ya que es usado casi sólo con {{Glossary("JavaScript")}}. En ese contexto, una API es usualmente un conjunto de métodos, {{Glossary("JavaScript property","propiedades")}} y eventos para con el fin lograr ciertas tareas. Por ejemplo, el API 2D de {{Glossary("Canvas")}} provee los métodos necesarios para dibujar gráficos 2D dentro de un {{Glossary("elemento")}} Canvas de <{{Glossary("HTML")}}.

+

Pero en algunos puntos, un conjunto de {{Glossary("CSS property","propiedades de CSS")}} o {{Glossary("Element","elementos de HTML")}} también son API. Algunos conceptos de arquitectura técnica, como {{Glossary("REST")}}, incluso afirman que un conjunto de varias {{Glossary("URL","URL")}} formadas también son una API para usar en un sitio dado.

+

Conoce más

+

Conocimiento general

+ diff --git a/files/es/glossary/apple_safari/index.html b/files/es/glossary/apple_safari/index.html new file mode 100644 index 0000000000..08d3e56bf0 --- /dev/null +++ b/files/es/glossary/apple_safari/index.html @@ -0,0 +1,29 @@ +--- +title: Apple Safari +slug: Glossary/Apple_Safari +tags: + - Glosario + - Glossary + - Navigation + - WebMechanics + - navegación +translation_of: Glossary/Apple_Safari +--- +

Safari es un {{Glossary("Browser","navegador web")}} desarrollado por Apple y ligado a Mac OS X y iOS. Está basado en el motor de código abierto WebKit.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Información técnica

+ + diff --git a/files/es/glossary/application_context/index.html b/files/es/glossary/application_context/index.html new file mode 100644 index 0000000000..bb620c20b9 --- /dev/null +++ b/files/es/glossary/application_context/index.html @@ -0,0 +1,13 @@ +--- +title: Contexto de aplicación +slug: Glossary/application_context +tags: + - CodingScripting + - Glossary +translation_of: Glossary/application_context +--- +

Un contexto de aplicación es un contexto de navegación de nivel superior que tiene aplicado un manifiesto.

+ +

Si un contexto de aplicación es creado como resultado de una petición al agente usuario para que navegue a un enlace profundo, el agente usuario debe navegar inmediatamente hacia al enlace profundo con sustitución habilitada. De otra manera, cuando se crea el contexto de aplicación, el agente usuario debe navegar inmediatamente a la URL de inicio con sustitución habilitada.

+ +

Téngase en cuenta que la URL de inicio no es necesariamente el valor del miembro start_url: el usuario o agente usuario podría haberlo cambiado cuando la aplicación fue añadida a la pantalla de inicio o añadida a favoritos.

diff --git a/files/es/glossary/argumento/index.html b/files/es/glossary/argumento/index.html new file mode 100644 index 0000000000..c3ccfb69ca --- /dev/null +++ b/files/es/glossary/argumento/index.html @@ -0,0 +1,20 @@ +--- +title: Argumento +slug: Glossary/Argumento +translation_of: Glossary/Argument +--- +

Un argumento es un valor (primitivo u objeto) (Véase {{glossary("value")}},  {{Glossary("primitive")}}, {{Glossary("object")}}) pasado como valor de entrada a una función ({{Glossary("function")}}).

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/aria/index.html b/files/es/glossary/aria/index.html new file mode 100644 index 0000000000..4232332b0e --- /dev/null +++ b/files/es/glossary/aria/index.html @@ -0,0 +1,14 @@ +--- +title: ARIA +slug: Glossary/ARIA +translation_of: Glossary/ARIA +--- +

ARIA (Accessible Rich {{glossary("Internet")}} Applications) es una especificación de la {{Glossary("W3C")}} para agregar semantica y otros metadatos a {{Glossary("HTML")}} para ayudar a los usuarios con tecnologia de apoyo.

+ +

Por ejemplo,  puedes agregar el atributo role="alert" a un {{HTMLElement("p")}} {{glossary("tag")}} para notificar a un usuario con discapacidad visual que una información es importante .

+ +

Saber más

+ + diff --git a/files/es/glossary/arpa/index.html b/files/es/glossary/arpa/index.html new file mode 100644 index 0000000000..87bcff9abe --- /dev/null +++ b/files/es/glossary/arpa/index.html @@ -0,0 +1,17 @@ +--- +title: ARPA +slug: Glossary/ARPA +tags: + - ARPA +translation_of: Glossary/ARPA +--- +

.arpa (parametros de dirección y enrutamiento) es un {{glossary("TLD","dominio de alto nivel")}} usado para propositos de infraestructura de Internet, especialmente busqueda inversa de DNS (ej., encontrar el {{glossary('nombre de dominio')}} para una  {{glossary("dirección IP")}}) suministrada.

+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/es/glossary/arpanet/index.html b/files/es/glossary/arpanet/index.html new file mode 100644 index 0000000000..19bc4e9a1f --- /dev/null +++ b/files/es/glossary/arpanet/index.html @@ -0,0 +1,14 @@ +--- +title: Arpanet +slug: Glossary/Arpanet +translation_of: Glossary/Arpanet +--- +

La ARPAnet (advanced research projects agency network) o Red de Angencias de Proyectos de Investigación Avanzada en español, era una red de computadoras construida en 1969 como un medio resistente para enviar datos militares y conectar principales grupos de investigación a través de los Estados Unidos. ARPAnet ejecutó NCP (network control protocol/protocolo de control de red) y subsequentemente  la primera versión del protocolo de Internet o la suite {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, teniendo la ARPAnet una descatada parte en la naciente {{glossary("Internet")}}. ARPAnet finalizó a comienzos de 1990.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git "a/files/es/glossary/arquitectura_de_la_informaci\303\263n/index.html" "b/files/es/glossary/arquitectura_de_la_informaci\303\263n/index.html" new file mode 100644 index 0000000000..222ed88e59 --- /dev/null +++ "b/files/es/glossary/arquitectura_de_la_informaci\303\263n/index.html" @@ -0,0 +1,18 @@ +--- +title: Arquitectura de la información +slug: Glossary/Arquitectura_de_la_información +tags: + - Arquitectura informacional + - Diseño + - Glosario +translation_of: Glossary/Information_architecture +--- +

La arquitectura de la información, aplicada al diseño y desarrollo web, es la práctica de organizar la información, contenido y funcionalidad de un sitio web para que presente la mejor experiencia de usuario posible, con información y servicios fáciles de usar y encontrar.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/arreglos/index.html b/files/es/glossary/arreglos/index.html new file mode 100644 index 0000000000..74b22dbedc --- /dev/null +++ b/files/es/glossary/arreglos/index.html @@ -0,0 +1,41 @@ +--- +title: Arreglos (Matrices) +slug: Glossary/Arreglos +tags: + - Arreglos + - CodificaciónScripting + - Glosario + - JavaScript + - Matriz + - programacion +translation_of: Glossary/array +--- +

Un arreglo (matriz) es una colección ordenada de datos (tanto {{glossary("Primitivo", "primitivos")}} u {{glossary("Object", "objetos")}} dependiendo del lenguaje). Los arreglos (matrices) se emplean para almacenar multiples valores en una sola variable, frente a las variables que sólo pueden almacenar un valor (por cada variable).

+ +

Cada elemento del arreglo (matriz)  tiene un número al que está asociado, llamado "índice numérico" (numeric index), que permite acceder a él.

+ +

En JavaScript, los arreglos (matrices) comienzan a partir del índice cero y pueden ser manipulados con varios {{glossary("Método", "métodos")}}.

+ +

Un arreglo (matriz) en JavaScript se ve de esta forma:

+ +
var myArray = [1, 2, 3, 4];
+
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+
+//Los arreglos en Javascript pueden guardar distintos tipos de datos como se muestra anteriormente
+
+
+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/ascii/index.html b/files/es/glossary/ascii/index.html new file mode 100644 index 0000000000..cbf7392280 --- /dev/null +++ b/files/es/glossary/ascii/index.html @@ -0,0 +1,15 @@ +--- +title: ASCII +slug: Glossary/ASCII +tags: + - Glosario + - Infraestructura +translation_of: Glossary/ASCII +--- +

ASCII (American Standard Code for Information Interchange) es uno de los métodos de codificación más utilizados por las computadoras para convertir letras, números, signos de puntuación y códigos de control en formato digital. Desde 2007, {{Glossary("UTF-8")}} lo reemplazó en la Web.

+ +

Aprender más

+ +

Conocimientos generales

+ +

{{Interwiki("wikipedia", "ASCII")}} en Wikipedia

diff --git "a/files/es/glossary/as\303\255ncrono/index.html" "b/files/es/glossary/as\303\255ncrono/index.html" new file mode 100644 index 0000000000..439f95eb37 --- /dev/null +++ "b/files/es/glossary/as\303\255ncrono/index.html" @@ -0,0 +1,31 @@ +--- +title: Asíncrono +slug: Glossary/Asíncrono +tags: + - Asíncrono + - Glosario + - Mecánicas de la Web + - Web +translation_of: Glossary/Asynchronous +--- +

El término asíncrono se refiere al concepto de que más de una cosa ocurre al mismo tiempo, o múltiples cosas relacionadas ocurren sin esperar a que la previa se haya completado. En informática, la palabra "asíncrono" se usa en los siguientes contextos:

+ +
+
Redes y comunicaciones
+
La comunicación asíncrona es un método de intercambio de mensajes entre dos o más partes, en la que cada parte recibe y procesa el mensaje cuando sea conveniente o posible de realizar, en vez de hacerlo inmediatamente al recibirlo. Adicionalmente, los mensajes pueden ser enviados sin esperar el acuse de recibo de los mismos, bajo el entendimiento de que si ocurre algún problema, quien los recibe solicitará las correcciones o manejara la situación.
+
Para los humanos, el correo electrónico es un método de comunicación asíncrono: el emisor envía el correo y el receptor lo leerá y responderá cuando le sea conveniente en vez de hacerlo de una vez. Ambos lados pueden continuar enviando y recibiendo mensajes cuando quiera que ellos deseen, en lugar de tener que programarse uno alrededor del otro.
+
Cuando el software se comunica de manera asíncrona, un programa puede realizar una solicitud de información a otra pieza de software (un servidor, por ejemplo), y continuar haciendo otras tareas mientras espera por la respuesta. Por ejemplo,la técnica de programación AJAX (Asynchronus JavaScript and {{Glossary("XML")}}) - usualmente llamada simplemente "Ajax", incluso a pesar de que usualmente en las aplicaciones modernas se utilice {{Glossary("JSON")}} en vez de XML - es un mecanismo por el que se solicitan tamaños relativamente pequeños de datos al servidor usando {{Glossary("HTTP")}} , siendo los resultados devueltos cuando estén disponibles más que de inmediato.
+
Diseño de Software
+
El diseño de software asíncrono amplía el concepto al construir código que permita a un programa solicitar que una tarea se realice al mismo tiempo que la tarea (o tareas) original, sin detenerse a esperar a que la primera se haya completado. Cuando la tarea secundaria se completa, la original es notificada usando un mecanismo acordado, de tal forma que sepa que el trabajo se ha completado y que el resultado, si es que existe, está disponible.
+
Existen diversas técnicas de programación para implementar software asíncrono. Vea el artículo Asynchronous JavaScript  para terner una introducción a ellos.
+
+
+ +

Saber más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/atag/index.html b/files/es/glossary/atag/index.html new file mode 100644 index 0000000000..16391b7b8b --- /dev/null +++ b/files/es/glossary/atag/index.html @@ -0,0 +1,21 @@ +--- +title: ATAG +slug: Glossary/ATAG +translation_of: Glossary/ATAG +--- +

ATAG (Authoring Tool {{glossary("Accessibility")}} Guidelines/Pautas de accesibilidad de herramientas de autor) es una recomendación de la {{Glossary("W3C")}} para la construcción de herramientas de autor y producir contenido accesible.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/atributo/index.html b/files/es/glossary/atributo/index.html new file mode 100644 index 0000000000..42027cf072 --- /dev/null +++ b/files/es/glossary/atributo/index.html @@ -0,0 +1,15 @@ +--- +title: Atributo +slug: Glossary/Atributo +translation_of: Glossary/Attribute +--- +

Un atributo amplía una etiqueta ({{Glossary("tag")}}), cambiando su comportamiento o proporcionando metadatos. Un atributo tiene la forma nombre=valor (especificando el identificador del atributo y el valor asociado al atributo).

+ +

Saber más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/atributo_global/index.html b/files/es/glossary/atributo_global/index.html new file mode 100644 index 0000000000..f167968e45 --- /dev/null +++ b/files/es/glossary/atributo_global/index.html @@ -0,0 +1,26 @@ +--- +title: Atributo global +slug: Glossary/Atributo_global +tags: + - CodingScripting + - Glosario + - HTML + - atributo +translation_of: Web/HTML/Global_attributes +--- +

Los Atributos Globales son {{glossary("attribute","atributos")}} que pueden ser usados en todos los {{glossary("element","elementos")}} (aunque a veces no tienen efecto en algunos de ellos).

+ +

Algunos atributos se pueden utilizar en cualquier elemento HTML:

+ + + +

Saber más

+ + diff --git a/files/es/glossary/bandwidth/index.html b/files/es/glossary/bandwidth/index.html new file mode 100644 index 0000000000..8c8d9eb1b1 --- /dev/null +++ b/files/es/glossary/bandwidth/index.html @@ -0,0 +1,12 @@ +--- +title: Ancho de banda +slug: Glossary/Bandwidth +translation_of: Glossary/Bandwidth +--- +

El ancho de banda es la medida de cuanta información puede pasar a través de una conexión de datos en un momento dado. El ancho de banda suele medirse en múltipos de bits-por-segundo (bps), por ejemplo, megabits-por-segundo (Mbps) o gigabits-por-segundo (Gbps).

+ +

Saber más

+ + diff --git a/files/es/glossary/bigint/index.html b/files/es/glossary/bigint/index.html new file mode 100644 index 0000000000..e09f5d6b62 --- /dev/null +++ b/files/es/glossary/bigint/index.html @@ -0,0 +1,23 @@ +--- +title: BigInt +slug: Glossary/BigInt +translation_of: Glossary/BigInt +--- +

En {{Glossary("JavaScript")}}, BigInt es un tipo de dato numerico que puede representar números enteros en el formato de precision arbitrario. En otros lenguajes de programación pueden existir diferentes tipos numéricos, por ejemplo: enteros, flotantes, dobles o bignums (numeros grandes).

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Referencia tecnica

+ + diff --git a/files/es/glossary/blink/index.html b/files/es/glossary/blink/index.html new file mode 100644 index 0000000000..d8563a0738 --- /dev/null +++ b/files/es/glossary/blink/index.html @@ -0,0 +1,25 @@ +--- +title: Blink +slug: Glossary/Blink +tags: + - Chrome + - DOM + - Diseño + - Glosario + - Infraestructura + - Navegador + - Web + - WebKit +translation_of: Glossary/Blink +--- +

Blink es un motor de renderizado para navegadores de código abierto desarrollado por Google, que forma parte de Chromium (y por lo tanto también de Chrome). Concretamente, Blink  es una copia de la librería WebCore de WebKit, que se encarga del diseño, renderizado, y del DOM.

+ +

Para saber más...

+ +

Cultura General

+ + diff --git a/files/es/glossary/block/css/index.html b/files/es/glossary/block/css/index.html new file mode 100644 index 0000000000..8e07ce61d4 --- /dev/null +++ b/files/es/glossary/block/css/index.html @@ -0,0 +1,16 @@ +--- +title: Block (CSS) +slug: Glossary/Block/CSS +translation_of: Glossary/Block/CSS +--- +

Un bloque en una página web es un {{glossary("elemento")}} {{glossary("HTML")}} que aparece en una nueva línea, por ejemplo debajo del elemento precedente y encima del siguiente elemento (comúnmente conocido como block-level element). Por ejemplo, visto que {{htmlelement("a")}} es un elemento en línea — puedes colocar varios enlaces uno al lado del otro en el código HTML y no se posicionarán en la misma línea  como uno al otro en la salida representada.

+ +

Usando la propiedad {{cssxref("display")}} puedes cambiar si un elemento se muestre en línea o en bloque (entre muchas otras opciones); los bloques también están sujetos a los efectos de posicionaresquemas y usar la propiedad {{cssxref("position")}}. 

+ +

Aprender más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/block/index.html b/files/es/glossary/block/index.html new file mode 100644 index 0000000000..70f431da62 --- /dev/null +++ b/files/es/glossary/block/index.html @@ -0,0 +1,8 @@ +--- +title: Block +slug: Glossary/Block +translation_of: Glossary/Block +--- +

El término bloque puede tener diferentes significados dependiendo del conexto. Puede referirse a:

+ +

{{GlossaryDisambiguation}}

diff --git a/files/es/glossary/boolean/index.html b/files/es/glossary/boolean/index.html new file mode 100644 index 0000000000..b809ba5728 --- /dev/null +++ b/files/es/glossary/boolean/index.html @@ -0,0 +1,25 @@ +--- +title: Boolean +slug: Glossary/Boolean +tags: + - Glosario + - JavaScript + - Tipos de datos +translation_of: Glossary/Boolean +--- +

En ciencias de informática, un boolean es un dato lógico que solo puede tener los valores true o false.

+ +

Aprender más

+ +

Conocimientos generales

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/browser/index.html b/files/es/glossary/browser/index.html new file mode 100644 index 0000000000..f140956f0e --- /dev/null +++ b/files/es/glossary/browser/index.html @@ -0,0 +1,32 @@ +--- +title: Navegador +slug: Glossary/Browser +tags: + - Chrome + - Explorer + - Glosario + - Mozilla + - Navegador + - Opera + - Web +translation_of: Glossary/Browser +--- +

Un Navegador web es un programa o aplicación que da acceso a la Web, y permite a los usuarios el acceso a más páginas a través de hipervínculos.

+ +

Para saber más...

+ +

Cultura general

+ + + +

Descargar un navegador

+ + diff --git a/files/es/glossary/browsing_context/index.html b/files/es/glossary/browsing_context/index.html new file mode 100644 index 0000000000..c6942b7d06 --- /dev/null +++ b/files/es/glossary/browsing_context/index.html @@ -0,0 +1,25 @@ +--- +title: Contexto de navegación +slug: Glossary/Browsing_context +translation_of: Glossary/Browsing_context +--- +

 

+ +

Un contexto de navegación es el entorno en el que un {{glossary("navegador")}} muestra un {{domxref("Documento")}} (normalmente una pestaña, pero posiblemente también una ventana o un marco (frame) dentro de una página).

+ +

Cada contexto de navegación tiene un {{glossary("origen")}} específico, el origen del documento activo y un historial que enumera todos los documentos mostrados en orden.

+ +

La comunicación entre contextos de navegación está severamente restringida. Entre un contexto de navegación del mismo origen, se puede abrir y utilizar un {{domxref("BroadcastChannel")}}}.

+ +

 

+ +

Aprende más...

+ +

Referencia técnica

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/es/glossary/buffer/index.html b/files/es/glossary/buffer/index.html new file mode 100644 index 0000000000..701d5d9316 --- /dev/null +++ b/files/es/glossary/buffer/index.html @@ -0,0 +1,17 @@ +--- +title: Buffer +slug: Glossary/Buffer +tags: + - Buffer + - Glosario +translation_of: Glossary/buffer +--- +

Un búfer es un espacio de memoria en el que se almacenan datos de forma temporal mientras se están transfiriendo de un sitio a otro.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/cabecera_general/index.html b/files/es/glossary/cabecera_general/index.html new file mode 100644 index 0000000000..d27644dad0 --- /dev/null +++ b/files/es/glossary/cabecera_general/index.html @@ -0,0 +1,8 @@ +--- +title: Cabecera general +slug: Glossary/Cabecera_general +translation_of: Glossary/General_header +--- +

Una cabecera general es una {{glossary('Header', 'cabecera HTTP')}} que puede ser utilizada tanto en mensajes de consultas como de respuestas pero que no se aplican al contenido en sí mismo. Dependiendo del contexto en que son usadas, las cabeceras generales pueden ser de {{glossary("Response header", "respuesta")}} o de {{glossary("request header", "consulta")}}. Sin embargo, no son {{glossary("entity header", "cabeceras de entidad.")}}.

+ +

Las cabeceras generales más comunes son {{HTTPHeader('Date')}}, {{HTTPheader("Cache-Control")}} y {{HTTPHeader("Connection")}}.

diff --git a/files/es/glossary/cacheable/index.html b/files/es/glossary/cacheable/index.html new file mode 100644 index 0000000000..866d3de7e9 --- /dev/null +++ b/files/es/glossary/cacheable/index.html @@ -0,0 +1,42 @@ +--- +title: Cacheable +slug: Glossary/cacheable +translation_of: Glossary/cacheable +--- +

Una respuesta cacheable es una respuesta HTTP que se puede almacenar en caché, que se almacena para recuperarla y usarla más tarde, guardando una nueva solicitud en el servidor. No todas las respuestas HTTP se pueden almacenar en caché, estas son las siguientes restricciones para que una respuesta HTTP se almacene en caché:

+ + + +

Tenga en cuenta que algunas solicitudes / respuestas no almacenables en caché a un URI específico pueden invalidar las respuestas almacenadas previamente en caché en el mismo URI. Por ejemplo, un {{HTTPMethod ("PUT")}} a pageX.html invalidará todas las solicitudes {{HTTPMethod ("GET")}} o {{HTTPMethod ("HEAD")}} en caché al mismo URI.

+ +

Cuando ambos, el método de la solicitud y el estado de la respuesta, se pueden almacenar en caché, la respuesta a la solicitud se puede almacenar en caché:

+ +
GET /pageX.html HTTP / 1.1
+(...)
+
+200 OK
+(...)
+ +


+ Una solicitud {{HTTPMethod ("PUT")}} no se puede almacenar en caché. Además, invalida los datos en caché para solicitarlos al mismo URI realizado a través de {{HTTPMethod ("HEAD")}} o {{HTTPMethod ("GET")}}:

+ +
PUT /pageX.html HTTP / 1.1
+(...)
+
+200 OK
+(...)
+ +


+ Un encabezado específico {{HTTPHeader ("Cache-Control")}} en la respuesta puede evitar el almacenamiento en caché:

+ +
GET /pageX.html HTTP / 1.1
+(...)
+
+200 OK
+Control de caché: sin caché
+(...)
+
diff --git "a/files/es/glossary/cach\303\251/index.html" "b/files/es/glossary/cach\303\251/index.html" new file mode 100644 index 0000000000..1c9b861ae8 --- /dev/null +++ "b/files/es/glossary/cach\303\251/index.html" @@ -0,0 +1,17 @@ +--- +title: Caché +slug: Glossary/Caché +tags: + - Glosario + - HTTP +translation_of: Glossary/Cache +--- +

La caché (o caché web) es un componente que almacena temporalmente respuestas HTTP para que puedan ser usadas por peticiones HTTP posteriores mientras cumplan ciertas condiciones.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/callback_function/index.html b/files/es/glossary/callback_function/index.html new file mode 100644 index 0000000000..8250351896 --- /dev/null +++ b/files/es/glossary/callback_function/index.html @@ -0,0 +1,33 @@ +--- +title: Función Callback +slug: Glossary/Callback_function +translation_of: Glossary/Callback_function +--- +

Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

+ +

Ejemplo:

+ +
function saludar(nombre) {
+  alert('Hola ' + nombre);
+}
+
+function procesarEntradaUsuario(callback) {
+  var nombre = prompt('Por favor ingresa tu nombre.');
+  callback(nombre);
+}
+
+procesarEntradaUsuario(saludar);
+ +

El ejemplo anterior es una callback sincrónica, ya que se ejecuta inmediatamente.

+ +

Sin embargo, tenga en cuenta que las callbacks a menudo se utilizan para continuar con la ejecución del código después de que se haya completado una operación a sincrónica  — estas se denominan devoluciones de llamada asincrónicas. Por ejemplo, nuestro sencillo ejemplo de maps-example.html (ver en vivo) utiliza la API de Google Maps y la API de geolocalización para mostrar un mapa de la ubicación actual de su dispositivo.

+ +

Como obtener las coordenadas del dispositivo de su GPS es asíncrono (no sabemos exactamente cuándo se devolverán los datos), el método {{domxref("Geolocation.getCurrentPosition()")}} toma una función de devolución de llamada anónima como parámetro, que a su vez toma los datos de coordenadas devueltos como un parámetro. Esta función solo se ejecuta cuando se devuelven los datos de coordenadas.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/canvas/index.html b/files/es/glossary/canvas/index.html new file mode 100644 index 0000000000..1cd60a6b40 --- /dev/null +++ b/files/es/glossary/canvas/index.html @@ -0,0 +1,32 @@ +--- +title: Canvas +slug: Glossary/Canvas +tags: + - Canvas + - HTML5 +translation_of: Glossary/Canvas +--- +

El elemento canvas forma parte de HTML5 y habilita dinamismo, de scripts lenguaje de figuras en 2D & 3 3D e imágenes de mapas de Bits images. esta en un bajo nivel, el modelo de procedimiento actualiza el mapa de bits y no tiene que construir en él scene graph. Ofrece una zona gráfica vacía en la cual especifica {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} puede dibujar (como en Canvas 2D o {{Glossary("WebGL")}}).

+ +

Aprende más

+ +

Conocimientos básicos

+ + + +

Inicio del temario

+ + + +

Información técnica

+ + diff --git a/files/es/glossary/caracter/index.html b/files/es/glossary/caracter/index.html new file mode 100644 index 0000000000..5198607137 --- /dev/null +++ b/files/es/glossary/caracter/index.html @@ -0,0 +1,22 @@ +--- +title: Caracter +slug: Glossary/Caracter +tags: + - CodingScripting + - Glosario + - String +translation_of: Glossary/Character +--- +

Un caracter es un símbolo (letras, números, puntuación) o un caracter de "control" que no se imprime (p. ej., Retorno de carro o guión suave — soft hypen). {{Glossary("UTF-8")}} es el conjunto de caracteres más común e incluye los grafemas de los lenguajes humanos más populares.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/cdn/index.html b/files/es/glossary/cdn/index.html new file mode 100644 index 0000000000..b7e2c14df4 --- /dev/null +++ b/files/es/glossary/cdn/index.html @@ -0,0 +1,17 @@ +--- +title: CDN +slug: Glossary/CDN +tags: + - Estructura + - Glosario +translation_of: Glossary/CDN +--- +

Una  Red de distribución de contenidos (CDN en inglés) es un grupo de servidores distribuidos en muchas ubicaciones. Estos servidores almacenan copias duplicadas de datos para que los servidores puedan cumplir con las solicitudes de datos en función de qué servidores están más cerca de los respectivos usuarios finales. Las CDN hacen que el servicio rápido se vea menos afectado por el alto tráfico.

+ +

Los CDN se usan ampliamente para entregar hojas de estilo y archivos Javascript (activos estáticos) de bibliotecas como Bootstrap, jQuery, etc. Es preferible usar CDN para esos archivos de biblioteca por varias razones:

+ + diff --git a/files/es/glossary/challenge/index.html b/files/es/glossary/challenge/index.html new file mode 100644 index 0000000000..221384ed3e --- /dev/null +++ b/files/es/glossary/challenge/index.html @@ -0,0 +1,16 @@ +--- +title: Protocolos desafío-respuesta +slug: Glossary/challenge +tags: + - Seguridad +translation_of: Glossary/challenge +--- +

En protocolos de seguridad, un desafío es una información enviada al cliente por el servidor con el fin de generar una respuesta diferente cada vez . Los protocolos desafío-respuesta son una forma de batallar contra los ataques de REPLAY donde un atacante escucha los mensajes previos y los reenvía en un momento posterior para obtener las mismas credenciales que el mensaje original.

+ +

El protocolo de autenticación HTTP está basado en los protocolos desafío-respuesta, aunque la autenticación "Basic" no usa un desafío real (el realm siempre es el mismo).

+ +

Leer más

+ + diff --git a/files/es/glossary/character_encoding/index.html b/files/es/glossary/character_encoding/index.html new file mode 100644 index 0000000000..ae1d0df389 --- /dev/null +++ b/files/es/glossary/character_encoding/index.html @@ -0,0 +1,28 @@ +--- +title: Codificación de caracteres +slug: Glossary/character_encoding +tags: + - Caracter + - Caractères + - Codificación + - Glosario +translation_of: Glossary/character_encoding +--- +

Una codificación define cómo se traducen los bytes a texto y viceversa. Una secuencia de bytes se pueden interpretar de diferentes formas. Eligiendo una codificación en particular (como UTF-8), decimos como la secuencia de bytes debe ser interpretada.

+ +

Por ejemplo, en HTML normalmente especificamos que la codificiación va a ser UTF-8 con la siguiente linea:

+ +
+
<meta charset="utf-8">
+ +

Con esto te aseguras de que usando caracteres propios de cualquier lenguaje humano en tu documento HTML, se mostrarán de forma legible. 

+
+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/chrome/index.html b/files/es/glossary/chrome/index.html new file mode 100644 index 0000000000..2d2fb56921 --- /dev/null +++ b/files/es/glossary/chrome/index.html @@ -0,0 +1,17 @@ +--- +title: Chrome +slug: Glossary/Chrome +tags: + - Chrome + - Glosario + - Navegador + - WebMechanics +translation_of: Glossary/Chrome +--- +

En un navegador, Chrome es cualquier aspecto visible de un navegador aparte de las páginas web en sí (por ejemplo, barras de herramientas, barra de menús, pestañas). Esto no debe confundirse con el navegador {{glossary("Google Chrome")}}.

+ +

Leer más

+ + diff --git a/files/es/glossary/cid/index.html b/files/es/glossary/cid/index.html new file mode 100644 index 0000000000..983f0d0447 --- /dev/null +++ b/files/es/glossary/cid/index.html @@ -0,0 +1,17 @@ +--- +title: CID +slug: Glossary/CID +tags: + - Glosario + - Seguridad +translation_of: Glossary/CIA +--- +

CID (Confidencialidad, Integridad, Disponibilidad) (también llamado la triada CID o la triada DIC) es un modelo que guía las políticas de una organización para la seguridad de la información.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/cifrado/index.html b/files/es/glossary/cifrado/index.html new file mode 100644 index 0000000000..e0679eca97 --- /dev/null +++ b/files/es/glossary/cifrado/index.html @@ -0,0 +1,32 @@ +--- +title: Algoritmo criptográfico +slug: Glossary/Cifrado +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Cipher +--- +

En {{glossary("cryptography", "criptografía")}}, un algoritmo criptográfico es un algoritmo que puede {{glossary("encryption", "encriptar")}} {{glossary("cleartext", "texto en lenguaje natural")}} para hacerlo ilegible, y para que sea {{glossary("decryption", "desencriptado")}} con el fin de recuperar el texto original.

+ +

Los algoritmos de cifrado eran muy comunes mucho antes de la era de la información (e.g., cifrados por sustitucion y cifrados por transposición), pero ninguno de ellos era criptográficamente seguros excepto one-time pad.

+ +

Los algoritmos modernos de cifrado están diseñados para resistir a {{glossary("attack", "ataques")}} descubiertos por un {{glossary("cryptanalysis", "criptoanalista")}}. No hay garantía de que todos los métodos de ataque hayan sido descubiertos, pero cada algoritmo es probado contra todos los tipos de ataque conocidos.

+ +

Los algoritmos de cifrado funcionan de dos maneras, una es como cifrado por bloques en bloques sucesivos o buffers de datos, y la otra es como un cifrado en flujo en un flujo continuo de datos (generalmente de audio o vídeo).

+ +

También son clasificados en función de cómo se manejan sus  {{glossary("key", "claves")}}:

+ + + +

Saber más

+ +

Conocimiento general

+ + diff --git "a/files/es/glossary/clasificaci\303\263n_por_tarjetas_(card_sorting)/index.html" "b/files/es/glossary/clasificaci\303\263n_por_tarjetas_(card_sorting)/index.html" new file mode 100644 index 0000000000..a9b2638bb2 --- /dev/null +++ "b/files/es/glossary/clasificaci\303\263n_por_tarjetas_(card_sorting)/index.html" @@ -0,0 +1,18 @@ +--- +title: Clasificación por tarjetas (card sorting) +slug: Glossary/Clasificación_por_tarjetas_(card_sorting) +tags: + - Card sorting + - Diseño + - Glosario +translation_of: Glossary/Card_sorting +--- +

La clasificación por tarjetas (card sorting) es una técnica simple utilizada en la {{glossary("Information architecture", "arquitectura de la información")}} en la cual las personas involucradas en el diseño de una página web (u otro tipo de producto) están invitadas a describir el contenido / servicios / características que creen que el producto debería contener, para luego organizar estas características dentro de categorías o grupos. Esto se puede usar, por ejemplo, para determinar qué debe aparecer en cada página de una aplicación web. El nombre proviene del hecho de que a menudo la clasificación de las cartas se lleva a cabo literalmente escribiendo los elementos que se van a clasificar en tarjetas, y luego apilando las tarjetas.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/class/index.html b/files/es/glossary/class/index.html new file mode 100644 index 0000000000..d37749f274 --- /dev/null +++ b/files/es/glossary/class/index.html @@ -0,0 +1,22 @@ +--- +title: Clase +slug: Glossary/Class +tags: + - Clase + - Glosario + - OOP + - POO +translation_of: Glossary/Class +--- +

En {{glossary("OOP","programación orientada a objetos")}}, una clase define las características de un {{glossary("object","objeto")}}. Una clase es una plantilla que define {{glossary("property","propiedades")}} y {{glossary("method","métodos")}}, es un modelo abstracto a partir del cual se pueden crear instancias más específicas.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/clausura/index.html b/files/es/glossary/clausura/index.html new file mode 100644 index 0000000000..2f4cbbb479 --- /dev/null +++ b/files/es/glossary/clausura/index.html @@ -0,0 +1,22 @@ +--- +title: Clausura +slug: Glossary/Clausura +tags: + - Glosario +translation_of: Glossary/Closure +--- +

Una clausura o closure es una función que guarda referencias del estado adyacente ({{glossary("scope", "ámbito léxico")}}). En otras palabras, una clausura permite acceder al ámbito de una función exterior desde una función interior. En {{glossary("JavaScript")}}, las clausuras se crean cada vez que una {{glossary("function","función")}} es creada.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/clave/index.html b/files/es/glossary/clave/index.html new file mode 100644 index 0000000000..b228776065 --- /dev/null +++ b/files/es/glossary/clave/index.html @@ -0,0 +1,19 @@ +--- +title: Clave +slug: Glossary/Clave +tags: + - Criptografía + - Glosario + - Seguridad +translation_of: Glossary/Key +--- +

Una clave es una pieza de información utilizada por un algoritmo criptográfico para el {{Glossary("encryption", "cifrado")}} y/o {{Glossary("decryption", "descifrado")}}. Los mensajes cifrados deben permanecer seguros incluso si todo lo relacionado con el {{Glossary("cryptosystem","sistema de cifrado")}}, excepto la clave, es de conocimiento público.

+ +

En la {{Glossary("symmetric-key cryptography", "criptografía de clave simétrica")}}, la misma clave se utiliza tanto para el cifrado como para el descifrado. En la criptografía de clave pública, existen un par de claves relacionadas conocidas como clave pública y clave privada. La clave pública está disponible libremente, mientras que la clave privada se mantiene secreta. La clave pública puede cifrar mensajes que sólo la clave privada correspondiente puede descifrar, y viceversa.

+ +

Saber más

+ + diff --git a/files/es/glossary/codec/index.html b/files/es/glossary/codec/index.html new file mode 100644 index 0000000000..6afe8b63d7 --- /dev/null +++ b/files/es/glossary/codec/index.html @@ -0,0 +1,23 @@ +--- +title: Códec +slug: Glossary/Codec +tags: + - Glosario + - TecnologíasWeb +translation_of: Glossary/Codec +--- +

Un códec (acrónimo de "codificador-decodificador") es un programa, algoritmo, o dispositivo que codifica o decodifica un flujo de datos. Cada códec sabe cómo tratar un estándar específico de codificado o compresión.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencias técnicas

+ + diff --git a/files/es/glossary/coercion/index.html b/files/es/glossary/coercion/index.html new file mode 100644 index 0000000000..02721fad10 --- /dev/null +++ b/files/es/glossary/coercion/index.html @@ -0,0 +1,22 @@ +--- +title: Coerción +slug: Glossary/coercion +translation_of: Glossary/Type_coercion +--- +

La coerción es la conversión automática o implicita de valores de un tipo de dato a otro (Ejemplo: de cadena de texto a número). La conversión es similar a la coerción porque ambas convierten valores de un tipo de dato a otro pero con una diferencia clave - la coerción es implícita mientras que la conversión puede ser implícita o explícita.

+ +

Examples

+ +
const valor1 = '5';
+const valor2 = 9;
+let suma = valor1 + valor2;
+
+console.log(suma);
+ +

En el ejemplo anterior, JavaScript ha coercido el 9 de nùmero a cadena de texto y luego ha concatenado los dos valores resultando en una cadena de texto de 59. JavaScript tuvo la opción de coercer a cadena de texto o número y decidió usar número.

+ +

El compilador pudo haber coercido el 5 a un número y retornar el valor de 14, pero no lo hizo. Para retornar ese resultado, tendrías que convertir explícitamente el 5 a un número usando el método Number():

+ +
sumar = Number(valor1) + valor2
+ + diff --git a/files/es/glossary/compile/index.html b/files/es/glossary/compile/index.html new file mode 100644 index 0000000000..957ea2bbb1 --- /dev/null +++ b/files/es/glossary/compile/index.html @@ -0,0 +1,32 @@ +--- +title: Compilar +slug: Glossary/Compile +tags: + - CodingScripting + - Compilador + - Glossary + - compilar +translation_of: Glossary/Compile +--- +

Compilar es el proceso de transformar un programa informático escrito en un {{Glossary("computer programming", "lenguaje")}} en un programa equivalente en otro formato. Al programa que se encarga de compilar se le llama compilador. A veces, a esta tarea se le llama "ensamblar" o "construir", lo que suele implicar otros procesos adicionales, e.j. empaquetarlo en formato binario.

+ +

Normalmente, un compilador transforma un lenguaje de alto nivel como C o {{Glossary("Java")}}, el cual es legible por los humanos, en un lenguaje máquina que la CPU puede entender. algunos compiladores que traducen de un lenguaje a otro del mismo nivel son llamados transpiladores, por ejemplo al compilar de TypeScript a {{Glossary("JavaScript")}}. Son considerados herramientas de productividad.

+ +

Muchos compiladores funcionan de forma anticipada (AOT) o en tiempo de ejecución (JIT). Como programador, normalmente llamas a los compiladores AOT mediante la linea de comandos o el {{Glossary("IDE")}}  que estés usando. Un ejemplo es el famoso compilador "gcc".
+ Los compiladores JIT suelen ser transparentes para el programador. Por ejemplo en los exploradores: el motor javaScript de SpiderMonkey, de FireFox tiene un JIT embebido que compila el JavaScript de una web a código máquina mientras navegas. Proyectos como WebAssembly trabajan para mejorar esto.

+ +

Saber más

+ +

Conocimientos generales

+ + + +

Véase también

+ + diff --git a/files/es/glossary/compile_time/index.html b/files/es/glossary/compile_time/index.html new file mode 100644 index 0000000000..bb478fdb63 --- /dev/null +++ b/files/es/glossary/compile_time/index.html @@ -0,0 +1,15 @@ +--- +title: Tiempo de compilación +slug: Glossary/compile_time +translation_of: Glossary/Compile_time +--- +

El tiempo de compilación es el tiempo desde que el programa es cargado por primera vez hasta que el programa es {{Glossary("parse","parsed")}}.

+ +

Aprende más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/computer_programming/index.html b/files/es/glossary/computer_programming/index.html new file mode 100644 index 0000000000..f8da4c74bf --- /dev/null +++ b/files/es/glossary/computer_programming/index.html @@ -0,0 +1,21 @@ +--- +title: Programación de computadoras +slug: Glossary/Computer_Programming +tags: + - Lenguaje de programación + - Scripting + - programacion +translation_of: Glossary/Computer_Programming +--- +

Programación de computadoras es un proceso de componer y organizar un conjunto de instrucciones. Éstas le indican a una computadora/software qué hacer en un lenguaje comprensible para la computadora. Estas instrucciones pueden presentarse en diferentes lenguajes, tales como C++, Java, JavaScript, HTML, Python, Ruby y Rust.

+ +

Usando un lenguaje apropiado, puedes programar/crear todo tipo de software. Por ejemplo, un programa que ayude a científicos con cálculos complejos; una base de datos que almacene grandes cantidades de datos; un sitio web que permita a la gente descargar música, o un software de animación que permita a la gente crear películas animadas.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/conjunto_de_caracteres/index.html b/files/es/glossary/conjunto_de_caracteres/index.html new file mode 100644 index 0000000000..27e5a7345c --- /dev/null +++ b/files/es/glossary/conjunto_de_caracteres/index.html @@ -0,0 +1,31 @@ +--- +title: Conjunto de caracteres +slug: Glossary/conjunto_de_caracteres +tags: + - Codificación de caracteres + - Conjunto de caracteres + - Glosario +translation_of: Glossary/character_set +--- +

Un conjunto de caracteres es un sistema de codificación para que las computadoras sepan cómo reconocer un {{Glossary("Character", "caracter")}}, incluidas letras, números, signos de puntuación y espacios en blanco.

+ +

En épocas anteriores, los países desarrollaron sus propios conjuntos de caracteres debido a los diferentes idiomas utilizados, como los códigos Kanji JIS (por ejemplo, Shift-JIS, EUC-JP, etc.) para japonés, Big5 para chino tradicional y KOI8-R para ruso. Sin embargo, {{Glossary("Unicode")}} se convirtió gradualmente en el conjunto de caracteres más aceptable por su soporte de idiomas universal.

+ +

Si un conjunto de caracteres se usa incorrectamente (por ejemplo, Unicode para un artículo codificado en Big5), es posible que no vean más que caracteres rotos, que se llaman {{Interwiki("wikipedia", "Mojibake")}}.

+ + diff --git a/files/es/glossary/constante/index.html b/files/es/glossary/constante/index.html new file mode 100644 index 0000000000..41d4efb98a --- /dev/null +++ b/files/es/glossary/constante/index.html @@ -0,0 +1,20 @@ +--- +title: Constante +slug: Glossary/Constante +tags: + - CodingScripting + - Constante + - Glosario +translation_of: Glossary/Constant +--- +

Una constante es un valor que el programador no puede cambiar, por ejemplo números (1, 2, 42). Con {{glossary("variable","variables")}}, por otra parte, el programador puede asignar un nuevo {{glossary("value", "valor")}} a una variable cuyo nombre ya esté en uso.

+ +

Al igual que las variables, algunas constantes están unidas a identificadores. Por ejemplo, el identificador pi podría estar vinculado al valor 3.14... .

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/constructor/index.html b/files/es/glossary/constructor/index.html new file mode 100644 index 0000000000..7a5d910a5d --- /dev/null +++ b/files/es/glossary/constructor/index.html @@ -0,0 +1,47 @@ +--- +title: Constructor +slug: Glossary/Constructor +tags: + - Glosario +translation_of: Glossary/Constructor +--- +

Un constructor pertenece a una clase objeto ({{glossary("object")}}) particular la cual es instanciada. El constructor inicializa este objeto y puede otorgar acceso a su información privada. El concepto de objeto puede ser aplicado a la mayoría de los lenguajes orientados a objetos ({{glossary("OOP","object-oriented programming")}}). En esencia, un constructor en {{glossary("JavaScript")}} suele ser declarado al comienzo de una instancia de una clase ({{glossary("class")}}).

+ +

Sintaxis

+ +
// This is a generic default constructor class Default
+function Default() {
+}
+
+// This is an overloaded constructor class Overloaded
+// with parameter arguments
+function Overloaded(arg1, arg2, ...,argN){
+}
+
+ +

Para llamar al constructor de una clase en Javascript, use el operador new para asignar un objeto de referencia ({{glossary("object reference")}}) a una {{glossary("variable")}}.

+ +
function Default() {
+}
+
+// A new reference of a Default object assigned to a
+// local variable defaultReference
+var defaultReference = new Default();
+
+ +

 

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/cookie/index.html b/files/es/glossary/cookie/index.html new file mode 100644 index 0000000000..b9babca7d5 --- /dev/null +++ b/files/es/glossary/cookie/index.html @@ -0,0 +1,21 @@ +--- +title: Cookie +slug: Glossary/Cookie +tags: + - Glosario + - TecnologíasWeb +translation_of: Glossary/Cookie +--- +

Una cookie es una pequeña información enviada por un sitio web que se almacena en el navegador del ordenador del usuario.

+ +

Las cookies sirven para personalizar la experiencia que tiene el usuario al navegar por un sitio web. Pueden contener las preferencias del usuario o entradas de información al acceder a dicha web. El usuario puede personalizar su navegador para aceptar, rechazar, o borrar las cookies.

+ +

Las cookies pueden establecerse y modificarse desde el lado del servidor mediante el encabezado HTTP Set-Cookie o usando document.cookie en JavaScript.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/copyleft/index.html b/files/es/glossary/copyleft/index.html new file mode 100644 index 0000000000..91378a0002 --- /dev/null +++ b/files/es/glossary/copyleft/index.html @@ -0,0 +1,21 @@ +--- +title: Copyleft +slug: Glossary/Copyleft +tags: + - CC SA + - Copyleft + - Creative Commons + - GPL + - Glosario + - Licencia +translation_of: Glossary/Copyleft +--- +

Copyleft es un término, que normalmente se refiere a una licencia, y que se utiliza para indicar que toda redistribución de un trabajo bajo esta licencia es obligatorio que esté sujeta a la misma licencia que el original. Un buen ejemplo de copyleft es la licencia GNU GPL (para aplicaciones software) y la licencia Creative Commons SA (Share Alike en español Compartir Igual) (para trabajos y obras de arte).

+ +

Para saber más...

+ +

Cultura General

+ + diff --git "a/files/es/glossary/criptoan\303\241lisis/index.html" "b/files/es/glossary/criptoan\303\241lisis/index.html" new file mode 100644 index 0000000000..c56576e600 --- /dev/null +++ "b/files/es/glossary/criptoan\303\241lisis/index.html" @@ -0,0 +1,21 @@ +--- +title: Criptoanálisis +slug: Glossary/Criptoanálisis +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Cryptanalysis +--- +

El criptoanálisis es la rama de {{glossary ("cryptography","criptografía")}} que estudia cómo romper códigos y criptosistemas. El criptoanálisis crea técnicas para romper {{glossary ("cipher", "cifrados")}}, en particular por métodos más eficientes que una búsqueda por fuerza bruta. Además de los métodos tradicionales como el análisis de frecuencia y el índice de coincidencia, el criptoanálisis incluye métodos más recientes, como el criptoanálisis lineal o el criptoanálisis diferencial, que puede romper cifrados más avanzados.

+ +

 

+ +

Saber más

+ +

Conocimiento general

+ + diff --git "a/files/es/glossary/criptograf\303\255a/index.html" "b/files/es/glossary/criptograf\303\255a/index.html" new file mode 100644 index 0000000000..cfd3f498db --- /dev/null +++ "b/files/es/glossary/criptograf\303\255a/index.html" @@ -0,0 +1,21 @@ +--- +title: Criptografía +slug: Glossary/Criptografía +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Cryptography +--- +

Criptografía, o criptología, es la ciencia que estudia como codificar y transmitir mensajes de manera segura. La criptografía diseña y estudia algoritmos que son usados para la codificación y decoficación de mensajes en un entorno inseguro y sus aplicaciones. Más que confidencialidad de información, la criptografía también aborda la identificación, autenticación, el no repudio y la integridad de la información. Para ello tambien estudia el uso de métodos criptográficos en contexto, criptosistemas.

+ +

Aprende más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/cross-site_scripting/index.html b/files/es/glossary/cross-site_scripting/index.html new file mode 100644 index 0000000000..58c9c6a97d --- /dev/null +++ b/files/es/glossary/cross-site_scripting/index.html @@ -0,0 +1,34 @@ +--- +title: Cross-site scripting +slug: Glossary/Cross-site_scripting +translation_of: Glossary/Cross-site_scripting +--- +

Cross-site scripting (XSS) es una vulnerabilidad de seguridad que permite a un atacante inyectar en un sitio web código malicioso del lado del cliente. Este código es ejecutado por las vícitmas y permite a los atacante eludir los controles de acceso y hacerce pasar por usuarios. Según el Open Web Application Security Project, XSS fue la séptima vulnerabilidad más común de las aplicaciones web en 2017.

+ +

Estos ataques tienen éxito si la aplicación web no emplea suficiente validación o codificación. El navegador del usuario no puede detectar que el script malicioso no es confiable, por lo que da acceso a cookies, tokens de sesión u otra información sensible específica del sitio, o permite que el escript reescriba contenido {{glossary("HTML")}}.

+ +

Los ataques XSS suelen producirse cuando 1) los datos entran en una aplicación web a través de una fuente no confiable (en la mayoría de los casos, una solicitud web) o 2) el contenido dinámico se envía a un usuario web sin ser validado como contenido malicioso.

+ +

El contenido malicioso a menudo incluye {{glossary("JavaScript")}}, pero a veces HTML, Flash o cualquier otro código que el navegador pueda ejecutar. La variedad de ataques basados en XSS es casi ilimitado. pero comúnmente incluyen la transmisión de datos privados como cookies u otra información de sesión al atacante, la redirección de la víctima a una página web controlada por el atacante o la realización de otras operaciones maliciosas en el equipo del usuario bajo la apariencia de un sitio vulnerable.

+ +

Los ataques XSS se pueden clasificar en tres categorías: almacenados (también llamados persistentes), reflejados (también llamados no persistentes) o basados en DOM.

+ +
+
XSS Almacenados
+
El script inyectado se almacena permanentemente en los servidores de destino. La víctima recupera entonces este script malicioso del servidor cuando el navegador envía una solicitud de datos.
+
XSS Reflejados
+
Cuando se engaña a un usuario para que haga clic en un enlace malicioso, envía un formulario especialmente diseñado o navegue a un sitio malicioso, el código inyectado viaja al sitio web vulnerable. El servidor web refleja el script inyectado en el navegador del usuario, por ejemplo, en un mensaje de error, un resultado de búsqueda o cualquier otra respuesta que incluya datos enviados al servidor como parte de la solicitud. El navegador ejecuta el código porque asume que la respuesta proviene de un servidor "de confianza" con el que el usuario ya ha interactuado.
+
XSS basados en DOM
+
El payload se ejecuta como resultado de la modificación del entorno DOM (en el navegador de la víctima) utlizado por el script original del lado del cliente. Es decir, la página en sí no cambia, pero el código del lado del cliente contenido en la página se ejecuta de forma inesperada debido a las modificaciones maliciosas del entorno DOM.
+
+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/crud/index.html b/files/es/glossary/crud/index.html new file mode 100644 index 0000000000..77604a67a0 --- /dev/null +++ b/files/es/glossary/crud/index.html @@ -0,0 +1,17 @@ +--- +title: CRUD +slug: Glossary/CRUD +tags: + - Glosario + - Infraestructura +translation_of: Glossary/CRUD +--- +

CRUD (Create, Read, Update, Delete) es un acrónimo para las maneras en las que se puede operar sobre información almacenada. Es un nemónico para las cuatro funciones del almacenamiento persistente. CRUD usualmente se refiere a operaciones llevadas a cabo en una base de datos o un almácen de datos, pero también pude aplicar a funciones de un nivel superior de una aplicación como soft deletes donde la información no es realmente eliminada, sino es marcada como eliminada a tráves de un estatus.

+ +

Aprende más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/csrf/index.html b/files/es/glossary/csrf/index.html new file mode 100644 index 0000000000..08a5754942 --- /dev/null +++ b/files/es/glossary/csrf/index.html @@ -0,0 +1,19 @@ +--- +title: CSRF +slug: Glossary/CSRF +tags: + - Glosario + - Seguridad +translation_of: Glossary/CSRF +--- +

CSRF (Cross-Site Request Forgery) es un ataque que falsifica una petición a un servidor web haciéndose pasar por un usuario de confianza. Esto se puede hacer, por ejemplo, incluyendo parámetros maliciosos en una {{glossary("URL")}} después de un enlace que pretende redirigir a otro sitio.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/css/index.html b/files/es/glossary/css/index.html new file mode 100644 index 0000000000..1a0fe71442 --- /dev/null +++ b/files/es/glossary/css/index.html @@ -0,0 +1,44 @@ +--- +title: CSS +slug: Glossary/CSS +tags: + - Beginner + - CSS + - Glosario + - Hojas de estilo + - Intro + - Web +translation_of: Glossary/CSS +--- +

CSS, de las siglas en inglés Cascading Style Sheets (Hojas de Estilo en Cascada), es un lenguaje declarativo que controla el aspecto de las páginas web en el {{glossary("browser","navegador")}}. El navegador aplica declaraciones de estilo CSS a los elementos seleccionados para exhibirlos correctamente. Una declaración de estilos contiene las propiedades y sus respectivos valores, los cuales determinan cómo se verá una página web.

+ +

CSS es una de las tres principales tecnologias web, junto con {{Glossary("HTML")}} y {{Glossary("JavaScript")}}. CSS usualmente le da estilo a los ({{Glossary("Element","elementos HTML")}}), pero también puede ser utilizado con otros lenguajes de marcado como {{Glossary("SVG")}} o {{Glossary("XML")}}.

+ +

Una regla CSS es un conjunto de {{Glossary("CSS Property","propiedades")}}  asociadas con un {{Glossary("CSS selector","selector")}}. Aquí tenemos un ejemplo que hace que cada párrafo HTML sea amarillo, sobre un fondo negro:

+ +
/* El selector "p" indica que todos los párrafos del documento serán afectados por esta regla */
+p {
+  /* La propiedad "color" define el color del texto, en este caso amarillo. */
+  color: yellow;
+
+  /* La propiedad "background-color" define el color del fondo, en este caso negro. */
+  background-color: black;
+}
+ +

El término "en cascada" se refiere a las reglas que determinan cómo los selectores son jerarquizados al cambiar la apariencia de una página web. Esta es una característica muy importante, ya que un sitio web complejo puede contener miles de reglas CSS.

+ +

Aprende más

+ +

Conocimiento general

+ + + +

Referencia Técnica

+ + diff --git a/files/es/glossary/descifrado/index.html b/files/es/glossary/descifrado/index.html new file mode 100644 index 0000000000..838c76438b --- /dev/null +++ b/files/es/glossary/descifrado/index.html @@ -0,0 +1,33 @@ +--- +title: Descifrado +slug: Glossary/Descifrado +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Decryption +--- +

 

+ +

En {{glossary("cryptography" ,"criptografía")}}, el descifrado es la conversión de {{glossary("Ciphertext", "texto cifrado")}} en {{glossary("Plaintext", "texto simple")}}.

+ +

El descifrado es una primitiva criptográfica: transforma un mensaje de texto cifrado en texto simple utilizando un algoritmo criptográfico llamado {{glossary("cipher", "cifrado")}}. Al igual que el cifrado, el descifrado en cifrados modernos se realiza mediante un algoritmo específico y una {{glossary("Key", "clave")}}. Dado que el algoritmo suele ser público, la clave debe permanecer secreta si el cifrado se mantiene seguro.

+ +

 

+ +

The decryption primitive.

+ +

El descifrado es el reverso del {{glossary("Encryption", "cifrado")}} y si la clave permanece secreta, el descifrado sin conocer el secreto específico, entonces el descifrado es matemáticamente difícil de realizar. El grado de dificultad depende de la seguridad del algoritmo criptográfico elegido, que está en constante evolución mediante el progreso del {{glossary("cryptanalysis", "criptoanálisis")}}.

+ +

 

+ +

 

+ +

Saber más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/doctype/index.html b/files/es/glossary/doctype/index.html new file mode 100644 index 0000000000..32d2c95530 --- /dev/null +++ b/files/es/glossary/doctype/index.html @@ -0,0 +1,22 @@ +--- +title: Doctype +slug: Glossary/Doctype +translation_of: Glossary/Doctype +--- +

<!DOCTYPE> informa al {{Glossary("navegador")}} que versión de {{Glossary("HTML")}} (o {{glossary("XML")}}) se usó para escribir el documento. Doctype es una declaración no una {{Glossary("etiqueta")}}. Además, podemos referirnos a ella como "document type declaration" o  por las siglas  "DTD".

+ +

Learn more

+ +

General Knowledge

+ + + +

Technical reference

+ + diff --git a/files/es/glossary/dom/index.html b/files/es/glossary/dom/index.html new file mode 100644 index 0000000000..75c940e346 --- /dev/null +++ b/files/es/glossary/dom/index.html @@ -0,0 +1,30 @@ +--- +title: DOM +slug: Glossary/DOM +tags: + - API + - DOM + - Glosario + - scripts +translation_of: Glossary/DOM +--- +

El DOM (Document Object Model en español Modelo de Objetos del Documento) es una API definida para representar e interactuar con cualquier documento HTML o XML. El DOM es un modelo de documento que se carga en el navegador web y que representa el documento como un árbol de nodos, en donde cada nodo representa una parte del documento (puede tratarse de un elemento, una cadena de texto o un comentario).

+ +

El DOM es una de las APIs más usadas en la Web, pues permite ejecutar código en el navegador para acceder e interactuar con cualquier nodo del documento. Estos nodos pueden crearse, moverse o modificarse. Pueden añadirse a estos nodos manejadores de eventos (event listeners en inglés) que se ejecutarán/activarán cuando ocurra el evento indicado en este manejador.

+ +

El DOM surgió a partir de la implementación de JavaScript en los navegadores. A esta primera versión también se la conoce como DOM 0 o "Legacy DOM". Hoy en día el grupo WHATWG es el encargado de actualizar el estándar de DOM.

+ +

Para saber más...

+ +

Cultura General

+ + + +

Información Técnica 

+ + diff --git a/files/es/glossary/domain/index.html b/files/es/glossary/domain/index.html new file mode 100644 index 0000000000..bd7b0b488d --- /dev/null +++ b/files/es/glossary/domain/index.html @@ -0,0 +1,30 @@ +--- +title: Dominio +slug: Glossary/Domain +tags: + - Domínio + - Glosario + - Infraestructura + - Navegador + - Redes +translation_of: Glossary/Domain +--- +

Un dominio es una autoridad dentro de internet que controla sus propios recursos. Su "nombre de dominio" es una forma de dirigirse a esta autoridad como parte de la jerarquía en una {{Glossary("URL")}}, que generalmente es la parte más significativa de la misma, por ejemplo, un nombre de marca.

+ +

Un nombre de dominio completo (FQDN, por sus siglas en inglés) contiene todas las partes necesarias para buscar esta autoridad por su nombre sin ambigüedades utilizando el sistema {{Glossary("DNS")}} de Internet.

+ +

 

+ +

For example, in "developer.mozilla.org":

+ +
    +
  1. "org" es llamado un {{interwiki("wikipedia", "Dominio_de_nivel_superior", "dominio de nivel superior")}}. Están registrados como estándar de Internet por la entidad {{interwiki("wikipedia", "Internet_Assigned_Numbers_Authority", "IANA")}} . Aquí, "org" significa "organización" que se define en un registro de dominio de nivel superior.
    2. +
  2. "mozilla" es el dominio. Si quieres tener un dominio, debes registrarlo con uno de los muchos {{interwiki("wikipedia", "Registrador_de_dominios", "registradores")}} que tienen permiso para hacerlo con un registro de dominios de nivel superior.
    3. +
  3. "developer" es un "subdominio", algo que usted mismo como propietario de un dominio puede definir usted mismo. Muchos propietarios eligen tener un subdominio "www" para que apunte a su recurso {{Glossary("World_Wide_Web")}}, pero eso no es necesario (e incluso ha caído en desgracia).
    4. +
+ +

Saber más

+ + diff --git a/files/es/glossary/dtd/index.html b/files/es/glossary/dtd/index.html new file mode 100644 index 0000000000..1911a4d249 --- /dev/null +++ b/files/es/glossary/dtd/index.html @@ -0,0 +1,6 @@ +--- +title: DTD +slug: Glossary/DTD +translation_of: Glossary/Doctype +--- +

{{page("/en-US/docs/Glossary/Doctype")}}

diff --git a/files/es/glossary/dynamic_programming_language/index.html b/files/es/glossary/dynamic_programming_language/index.html new file mode 100644 index 0000000000..c14b100c3c --- /dev/null +++ b/files/es/glossary/dynamic_programming_language/index.html @@ -0,0 +1,16 @@ +--- +title: Lenguaje de programación dinámico +slug: Glossary/Dynamic_programming_language +translation_of: Glossary/Dynamic_programming_language +--- +

Un lenguaje de programación dinámico es un lenguaje de programación, en el que las operaciones realizadas en tiempo de compilación pueden realizarse en tiempo de ejecución. Por ejemplo, en JavaScript es posible cambiar el tipo de una variable o agregar nuevas propiedades o métodos a un objeto mientras el programa está en ejecución.

+ +

Esto es opuesto a los llamados lenguajes de programación estáticos, en los que tales cambios normalmente no son posibles.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/ecmascript/index.html b/files/es/glossary/ecmascript/index.html new file mode 100644 index 0000000000..0ada88d40b --- /dev/null +++ b/files/es/glossary/ecmascript/index.html @@ -0,0 +1,23 @@ +--- +title: ECMAScript +slug: Glossary/ECMAScript +tags: + - Glosario + - WebMechanics +translation_of: Glossary/ECMAScript +--- +

ECMAScript es una especificación de lenguaje de scripting en la que se basa {{Glossary("JavaScript")}}. Ecma International está a cargo de estandarizar ECMAScript.

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/element/index.html b/files/es/glossary/element/index.html new file mode 100644 index 0000000000..c784b7d61f --- /dev/null +++ b/files/es/glossary/element/index.html @@ -0,0 +1,19 @@ +--- +title: Elemento +slug: Glossary/Element +translation_of: Glossary/Element +--- +

Un elemento es parte de una página web. En XML y HTML, un elemento puede contener un elemento de datos o un fragmento de texto o una imagen, o tal vez nada. Un elemento típico incluye una etiqueta de apertura con algunos atributos, contenido de texto cerrado y una etiqueta de cierre.
+ Example: in <p class="nice">Hello world!</p>, '<p class="nice">' is an opening tag, 'class="nice"' is an attribute and its value, 'Hello world!' is enclosed text content, and '</p>' is a closing tag.

+ +

 

+ +

Los elementos y las etiquetas no son las mismas cosas. Las etiquetas comienzan o terminan un elemento en el código fuente, mientras que los elementos son parte del {{Glossary("DOM")}}, el modelo de documento para mostrar la página en el {{glossary("browser")}}.

+ +

Ver también

+ + diff --git a/files/es/glossary/elemento/index.html b/files/es/glossary/elemento/index.html new file mode 100644 index 0000000000..a947c1e053 --- /dev/null +++ b/files/es/glossary/elemento/index.html @@ -0,0 +1,7 @@ +--- +title: elemento +slug: Glossary/elemento +tags: + - Junk +--- +

Componentes que especifican como los documentos HTML deben ser construidos y que tipo de contenido debe ser posicionado en que lugar de un documento HTML.

diff --git a/files/es/glossary/empty_element/index.html b/files/es/glossary/empty_element/index.html new file mode 100644 index 0000000000..bd5f941426 --- /dev/null +++ b/files/es/glossary/empty_element/index.html @@ -0,0 +1,30 @@ +--- +title: Elemento vacío +slug: Glossary/Empty_element +translation_of: Glossary/Empty_element +--- +

Un elemento vacío es un {{Glossary("elemento")}} de HTML, SVG, o MathML que no puede tener nodos secundarios (es decir, elementos anidados o nodos de texto).

+ +

Las especificaciones HTML, SVG, y MathML definen con precisión lo que cada elemento puede contener. Muchas combinaciones no tienen sentido semántico, por ejemplo un elemento {{HTMLElement("audio")}} anidado dentro de un elemento {{HTMLElement("hr")}}.

+ +

En HTML, el uso de una etiqueta de cierre en un elemento vacío normalmente no es válido. Por ejemplo, <input type="text"></input> es un elemento HTML no válido.

+ +

Los elementos vacíos en HTML son los siguientes:

+ + diff --git a/files/es/glossary/encapsulation/index.html b/files/es/glossary/encapsulation/index.html new file mode 100644 index 0000000000..828a4dc572 --- /dev/null +++ b/files/es/glossary/encapsulation/index.html @@ -0,0 +1,17 @@ +--- +title: Encapsulación +slug: Glossary/Encapsulation +tags: + - CodingScripting + - Glosario +translation_of: Glossary/Encapsulation +--- +

La encapsulación es el empaquetamiento de datos y {{glossary("function","funciones")}} en un componente (por ejemplo, una {{glossary("class", "clase")}}) y para luego controlar el acceso a ese componente para hacer un ejecto de "caja negra" fuera del {{glossary("object", "objeto")}}. Debido a esto, un usuario de esa clase solo necesita conocer su interfaz (es decir, los datos y las funciones expuestas fuera de la clase), no la implementación oculta.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git "a/files/es/glossary/encriptaci\303\263n/index.html" "b/files/es/glossary/encriptaci\303\263n/index.html" new file mode 100644 index 0000000000..4d98cc9ad5 --- /dev/null +++ "b/files/es/glossary/encriptaci\303\263n/index.html" @@ -0,0 +1,23 @@ +--- +title: Encriptación +slug: Glossary/Encriptación +tags: + - Criptografía + - Glosario + - Seguridad + - privacidad +translation_of: Glossary/Encryption +--- +

En {{glossary("cryptography", "criptografía")}}, la encriptación es la conversión del {{glossary("cleartext", "lenguaje natural")}} en un texto codificado o {{glossary("ciphertext", "cifrado")}}. Un texto cifrado es utilizado para ser ilegible por lectores no autorizados.

+ +

La encriptación es una primitiva criptográfica: transforma un mensaje en texto plano en un texto cifrado usando un {{glossary("cipher", "algoritmo criptográfico")}}. La encriptación en los algoritmos modernos se lleva a cabo usando un algoritmo específico y un secreto, llamado la {{glossary("key", "clave")}}. Ya que la mayoría de los algoritmos son públicos, la clave debe ser secreta para que la encriptación sea segura.

+ +

How encryption works.

+ +

Sin conocer el secreto, la operación inversa, {{glossary("decryption", "desencriptación")}}, es matemáticamente costosa de realizar. Cómo de difícil resulte depende de la seguridad del algoritmo criptográfico elegido y evoluciona con el progreso del {{glossary("cryptanalysis", "criptoanálisis")}}.

+ +

Saber más

+ + diff --git a/files/es/glossary/entidad/index.html b/files/es/glossary/entidad/index.html new file mode 100644 index 0000000000..cc6ebf2682 --- /dev/null +++ b/files/es/glossary/entidad/index.html @@ -0,0 +1,60 @@ +--- +title: Entidad +slug: Glossary/Entidad +tags: + - Caractères + - HTML + - entidad +translation_of: Glossary/Entity +--- +

Una entidad {{glossary("HTML")}} es un conjunto de caracteres ("string") que comienza con un ampersand (&) y termina con un punto y coma (;) . Las entidades son utilizadas frecuentemente para imprimir en pantalla caracteres reservados (aquellos que serían interpretados como HTML por el navegador) o invisibles (cómo tabulaciones). También pueden usarse para representar caracteres que no existan en algunos teclados, por ejemplo caracterés con tilde o diéresis. 

+ +
+

Muchos caracteres tienen entidades con nombres fáciles de recordar, como las vocales con tilde (á) es &aacute;, (é) es &eacute; y así sucesivamente. Otro ejempo es el simbolo de copyright, (©) representado por la entidad &copy;. Al lidiar con entidades menos representativas de los caracteres que representan, es de gran ayuda utilizar una tabla de referencia o  un decodificador.

+
+ +

Caracteres Reservados

+ +

Algunos caracteres son reservados para uso en HTML, es decir que no pueden utilizarse sin que el navegador los interprete como parte del código HTML. Por ejemplo, al utilizar el simbolo para "menor a" (<), el navegador interpretara cualquier texto que siga como parte de una etiqueta.

+ +

Para utilizar estos caracteres como texto, deben reemplazarse por la entidad que les corresponda, a saber:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterEntitdadNota
&&amp;Interpretado como el comienzo de una entidad HTML.
<&lt;Interpretado como la apertura de una etiqueta.
>&gt;Interpretado como el cierre de una etiqueta.
"&quot;Interpretado como apertura o cierre del valor de un  atributo.
+ +

Aprende más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/espacio_en_blanco/index.html b/files/es/glossary/espacio_en_blanco/index.html new file mode 100644 index 0000000000..db6014deae --- /dev/null +++ b/files/es/glossary/espacio_en_blanco/index.html @@ -0,0 +1,45 @@ +--- +title: Espacio en blanco +slug: Glossary/Espacio_en_blanco +tags: + - Glosario + - Gramática léxica + - espacioenblanco +translation_of: Glossary/Whitespace +--- +

El espacio en blanco es un conjunto de {{Glossary("Caracter", "caracteres")}} que se utiliza para mostrar espacios horizontales o verticales entre otros caracteres. A menudo se utilizan para separar fragmentos en {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}} y otros lenguajes informáticos.Los caracteres de espacio en blanco y su uso varía de un lenguaje a otro.

+ +

En HTML

+ +

La HTML Living Standard especifica 5 caracteres ASCII como espacio en blanco: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR y U+0020 ESPACIO. En forma de texto, se tratan como caracteres de espacio normal y los espacios en blanco secuenciales se contraen como un solo espacio en muchos casos (este comportamiento se puede cambiar mediante la propiedad CSS {{cssxref("white-space")}}. También se utilizan como separadores del nombre de un elemento y sus parámetros, nombres de clases, etc.

+ +

En JavaScript

+ +

La especificación del lenguaje ECMAScript® 2015 establece varios puntos de código Unicode como espacio en blanco: U+0009 CARACTERES de TABULACIÓN <TAB>, U+000B TABULACIÓN DE LÍNEA <VT>, U+000C FORM FEED <FF>, U+0020 ESPACIO <SP>, U+00A0 ESPACIO SIN ROTURA <NBSP>, U+FEFF ANCHO CERO NO -BREAK SPACE <ZWNBSP> y otra categoría “Zs” Cualquier otro punto de código Unicode “Separador, espacio” <USP>. Estos caracteres suelen ser innecesarios para la funcionalidad del código.

+ + diff --git a/files/es/glossary/estructura_de_datos/index.html b/files/es/glossary/estructura_de_datos/index.html new file mode 100644 index 0000000000..d01f1b0ac8 --- /dev/null +++ b/files/es/glossary/estructura_de_datos/index.html @@ -0,0 +1,18 @@ +--- +title: Estructura de datos +slug: Glossary/Estructura_de_datos +tags: + - Codificación + - Estructura de datos + - Glosario +translation_of: Glossary/Data_structure +--- +

Estructura de datos es una forma particular de organizar datos para que puedan ser usados eficientemente.

+ +

Aprende másEdit

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/event/index.html b/files/es/glossary/event/index.html new file mode 100644 index 0000000000..74bb4eb288 --- /dev/null +++ b/files/es/glossary/event/index.html @@ -0,0 +1,24 @@ +--- +title: Evento +slug: Glossary/event +tags: + - CodingScripting + - Glosario +translation_of: Glossary/event +--- +

Los eventos son sucesos generados por elementos del DOM, que pueden ser manipulados por un código Javascript

+ +

Saber más

+ +

Referencias técnicas

+ + + +

Conocimientos generales

+ + diff --git a/files/es/glossary/flex/index.html b/files/es/glossary/flex/index.html new file mode 100644 index 0000000000..f2e4937f6f --- /dev/null +++ b/files/es/glossary/flex/index.html @@ -0,0 +1,46 @@ +--- +title: Flex +slug: Glossary/Flex +translation_of: Glossary/Flex +--- +

flex es una nueva herramienta agregada a la propiedad CSS {{cssxref ("display")}}. Junto con inline-flex, hace que el elemento al que se aplica se convierta en un {{glossary("flex container")}}, y los hijos del elemento se conviertan cada uno en un {{glossary("flex item")}}.

+ +

Luego, los elementos participan en el diseño flexible y se pueden aplicar todas las propiedades definidas en el módulo de diseño de caja flexible CSS (CSS Flexible Box).
+
+ La propiedad flex es una abreviatura de las propiedades flexbox flex-grow, flex-shrink y flex-base.
+
+ Además, <flex> puede referirse a una longitud flexible en CSS Grid Layout.

+ +

Aprende más

+ +

Propiedades de referencia

+ +
+ +
+ +

Para más información

+ + diff --git a/files/es/glossary/flex_container/index.html b/files/es/glossary/flex_container/index.html new file mode 100644 index 0000000000..6ddaba2b7b --- /dev/null +++ b/files/es/glossary/flex_container/index.html @@ -0,0 +1,32 @@ +--- +title: Flex Container +slug: Glossary/Flex_Container +translation_of: Glossary/Flex_Container +--- +

Una plantilla con {{glossary("flexbox")}} puede ser definida usando los valores flex o inline-flex en las propiedades de display. Este elemento es un contenedor flex, y cada uno de los contenedores que heredan propiedades de este, son conocidos como {{glossary("flex item")}}.

+ +

El valor asignado a la variable flex ocasiona que este tipo de elementos sean un bloque de elementos del tipo (Flex Container), y la variable inline-flex genera un Contenedor Flex de nivel Inline (Interno. Estos Valores crean un Contexto de formato Flex para los elementos que es similar a un bloque flotante no introducido en el contenedor, y los margenes del contenedor no chocaran con otros items.

+ +

Learn more

+ +

Property reference

+ +
+ +
+ +

Further reading

+ + diff --git a/files/es/glossary/flexbox/index.html b/files/es/glossary/flexbox/index.html new file mode 100644 index 0000000000..1450b64d0a --- /dev/null +++ b/files/es/glossary/flexbox/index.html @@ -0,0 +1,44 @@ +--- +title: Flexbox +slug: Glossary/Flexbox +translation_of: Glossary/Flexbox +--- +

Flexbox es como se llama comúnmente a Módulo de diseño de caja flexible CSS, un modelo de diseño para mostrar elementos en una sola dimensión, como una fila o como una columna.

+ +

En la especificación, flexbox se describe como un modelo de diseño para la interfaz de usuario. La característica clave de Flexbox es el hecho de que los elementos en un diseño flexible pueden crecer y reducirse. El espacio se puede asignar a los mismos elementos, o distribuidos entre o alrededor de los elementos.

+ +

Flexbox también permite la alineación de los elementos en el eje principal o transversal, proporcionando así un alto nivel de control sobre el tamaño y la alineación de un grupo de elementos.

+ +

Aprende más

+ +

Referencia de propiedad

+ +
+ +
+ +

Otras lecturas

+ + diff --git a/files/es/glossary/fps/index.html b/files/es/glossary/fps/index.html new file mode 100644 index 0000000000..16d431f82b --- /dev/null +++ b/files/es/glossary/fps/index.html @@ -0,0 +1,10 @@ +--- +title: frame rate (FPS) +slug: Glossary/FPS +translation_of: Glossary/FPS +--- +

Un cuadro por segundo es la velocidad en la cual el navegador web, es capaz de recalcular la disposición y dibujar el contenido de la pantalla.

+ +

FPS (frames per second), refiere a la cantidad de cuadros que pueden ser redibujados en un segundo. El ideal de esta metrica para un sitio web es de 60fps

+ +

Generalmente, las peliculas cinematograficas tienen un velocidad de 24fps. Esto se debe a que utilizan otras tecnicas para lograr la ilusion de vida, conocidas como motion blurs (desenfoques de movimiento). Pero cuando una pantalla de computadora se mueve.

diff --git a/files/es/glossary/ftp/index.html b/files/es/glossary/ftp/index.html new file mode 100644 index 0000000000..0ef847393e --- /dev/null +++ b/files/es/glossary/ftp/index.html @@ -0,0 +1,15 @@ +--- +title: FTP +slug: Glossary/FTP +translation_of: Glossary/FTP +--- +

FTP (del inglés File Transfer Protocol, Protocolo de transferencia de archivos) fue el protocolo estándar durante muchos años para transferir archivos entre equipos a través de Internet. Sin embargo, cada vez más los equipos y las cuentas de alojamiento no permiten el FTP y en su lugar dependen de un sistema de control de versiones como Git. Se encuentra todavía en funcionamiento en las cuentas de alojamiento más antiguas, pero no es exagerado decir que el FTP ya no es considerada la mejor práctica.

+ +

Aprenda más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/funcion_de_primera_clase/index.html b/files/es/glossary/funcion_de_primera_clase/index.html new file mode 100644 index 0000000000..311f068470 --- /dev/null +++ b/files/es/glossary/funcion_de_primera_clase/index.html @@ -0,0 +1,111 @@ +--- +title: Funcion de primera clase +slug: Glossary/Funcion_de_primera_clase +translation_of: Glossary/First-class_Function +--- +

Un lenguaje de programación se dice que tiene Funciones de primera clase cuando las funciones en ese lenguaje son tratadas como cualquier otra variable. Por ejemplo, en ese lenguaje, una función puede ser pasada como argumento a otras funciones, puede ser retornada por otra función y puede ser asignada a una variable.

+ +

Ejemplo | Asignar función a una variable

+ +

JavaScript

+ +
const foo = function() {
+   console.log("foobar");
+}
+// Invocación usando una variable
+foo();
+
+ +

Asignamos una Función Anónima a una {{glossary("Variable")}}, la cual utilizamos para invocar la función añadiendo paréntesis () al final.

+ +
+

Aunque la función no sea anónima (función nombrada), se puede utilizar la variable para invocarla. Nombrar las funciones puede ser útil cuando estamos depurando el código. Pero no afectará como invocamos a la función.

+
+ +

Ejemplo | Pasar la función como argumento

+ +

JavaScript

+ +
function diHola() {
+   return "Hola ";
+}
+function saludar(saludo, nombre) {
+  console.log(saludo() + nombre);
+}
+// Pasamos `diHola` como argumento de la función `saludar`
+saludar(diHola, "JavaScript!");
+
+ +

Pasamos nuestra función diHola() como argumento de la función saludar(), esto explica como tratamos la función como un valor.

+ +
+

Una función que pasamos como argumento a otra función, se llama {{glossary("Callback function")}}. diHola es una función Callback.

+
+ +

Ejemplo | Devolver una función

+ +

JavaScript

+ +
function diHola() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+
+ +

En este ejemplo; Necesitamos devolver una función desde otra función - Podemos devolver una función porque JavaScript trata la función como un value.

+ +
+

Una función que devuelve una función se llama Higher-Order Function.

+
+ +

Volviendo al ejemplo; Ahora, necesitamos invocar la función diHola y su  Función Anónima devuelta. Para ello, tenemos dos maneras:

+ +

1- Usando una variable

+ +
const diHola = function() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+const miFuncion = diHola();
+miFuncion();
+
+ +

De esta manera, devolverá el mensaje ¡Hola!.

+ +
+

Debes usar otra variable para que devuelve el mensaje. Si invocas diHola directamente, devolvera la función en si misma sin invocar a la función devuelta.

+
+ +

2- Usando paréntesis doble

+ +
function diHola() {
+   return function() {
+      console.log("¡Hola!");
+   }
+}
+diHola()();
+
+ +

Usamos parétesis dobre ()() para invocar también a la función retornada.

+ + + +

Aprender más

+ +

Conocimiento general

+ + diff --git "a/files/es/glossary/funci\303\263n/index.html" "b/files/es/glossary/funci\303\263n/index.html" new file mode 100644 index 0000000000..f67d9e90c8 --- /dev/null +++ "b/files/es/glossary/funci\303\263n/index.html" @@ -0,0 +1,91 @@ +--- +title: Función +slug: Glossary/Función +tags: + - CodingScripting + - Glosario + - IIFE + - JavaScript +translation_of: Glossary/Function +--- +

Una función es un fragmento de código que puede ser llamado por otro código o por sí mismo, o por una {{Glossary("variable")}} que haga referencia a la función. Cuando se llama a una función, los {{Glossary("Argument", "argumentos")}} se pasan a la función como entrada, y la función puede devolver opcionalmente una salida. Una función en {{glossary("JavaScript")}} es también un {{glossary("object", "objeto")}}.

+ +

El nombre de la función es un {{Glossary("identifier", "identificador")}} declarado como parte de una declaración de función o expresión de función. El {{Glossary("scope", "ámbito")}} de la función depende de si el nombre de la función es una declaración o una expresión.

+ +

Diferentes tipos de funciones

+ +

Una función anónima es una función que no tiene nombre:

+ +
function () {};
+// o se puede usar la anotación con flecha ECMAScript 2015
+() => {};
+
+ +

 

+ +

Una función nombrada es una función con nombre:

+ +
function foo() {};
+// o se puede usar la anotación con flecha ECMAScript 2015
+const foo = () => {};
+
+ +

Una función interna es una función que está dentro de otra función (cuadrado en este caso). Una función externa es una función que contiene a otra función (sumarCuadrados en este caso):

+ +
function sumarCuadradors(a,b) {
+   function cuadrado(x) {
+      return x * x;
+   }
+   return cuadrado(a) + cuadrado(b);
+};
+//Usando la anotación de flecha ECMAScript 2015
+const sumarCuadrados = (a,b) => {
+   const cuadrado = x => x*x;
+   return cuadrado(a) + cuadrado(b);
+};
+
+ +

Una función recursiva es una función que se llama a sí misma. Mira {{Glossary("Recursion", "recursión")}}.

+ +
function bucle(x) {
+   if (x >= 10)
+      return;
+   bucle(x + 1);
+};
+//Usando la anotación de flecha ECMAScript 2015
+const bucle = x => {
+   if (x >= 10)
+      return;
+   bucle(x + 1);
+};
+
+ +

Una expresión de una función que se invoca inmediatamente ({{glossary("IIFE")}}, por sus siglas en inglés) es una función que se llama directamente después de que la función se haya cargado en el compilador del navegador. La forma de identificar un IIFE es ubicando el paréntesis izquierdo y derecho adicional al final de la declaración de la función.

+ +
// Error (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression)
+/*
+​function foo() {
+    console.log('Hello Foo');
+}();
+*/
+
+(function foo() {
+    console.log("Hello Foo");
+}());
+
+(function food() {
+    console.log("Hello Food");
+})();
+
+
+ +

Si desea obtener más información sobre las IIFE, consulte la siguiente página en Wikipedia: Immediately Invoked Function Expression

+ +

Saber más

+ +

Referencias técnicas

+ + diff --git a/files/es/glossary/gif/index.html b/files/es/glossary/gif/index.html new file mode 100644 index 0000000000..323069f937 --- /dev/null +++ b/files/es/glossary/gif/index.html @@ -0,0 +1,19 @@ +--- +title: GIF +slug: Glossary/gif +tags: + - Animacion + - Composición + - Glosario + - Imagen +translation_of: Glossary/gif +--- +

GIF (Graphics Interchange Format en español Formato de Intercambio de Gráficos) es un formato de imagen con una baja compresión y se puede usar para animaciones. Un GIF usa hasta 8 bits por pixel y contiene un máximo de 256 colores con un rango de 24-bit.

+ +

Aprender más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/git/index.html b/files/es/glossary/git/index.html new file mode 100644 index 0000000000..5d6438da6d --- /dev/null +++ b/files/es/glossary/git/index.html @@ -0,0 +1,18 @@ +--- +title: Git +slug: Glossary/Git +tags: + - Colaboración + - Glosario +translation_of: Glossary/Git +--- +

Git es un software de control de versiones ({{Glossary("SCM", "SCV", 1)}}) distribuido, libre y de código abierto. Facilita el manejo de código fuente con equipos de desarrollo distribuidos. La principal diferencia con SCV previos es la habilidad para hacer operaciones comunes (branching, committing, etc.) en el equipo de desarrollo local, sin tener que modificar el repositorio master o tener de acceso de escritura a él. 

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/google_chrome/index.html b/files/es/glossary/google_chrome/index.html new file mode 100644 index 0000000000..4e13558570 --- /dev/null +++ b/files/es/glossary/google_chrome/index.html @@ -0,0 +1,126 @@ +--- +title: Google Chrome +slug: Glossary/Google_Chrome +tags: + - Chrome + - Chrome canary + - Chrome stable + - Chromium + - Glosario + - Navegador + - Web + - google + - google chrome +translation_of: Glossary/Google_Chrome +--- +

Google Chrome es un navegador web gratuito desarrollado por Google. Está basado en el proyecto open source (código abierto / software libre)  Chromium. Algunas de las principales diferencias se encuentran en Chromium wiki. El motor de diseño que utilizan ambos es una copia del motor Blink de WebKit. Cabe señalar que en la versión de Chrome en iOS se utiliza WebKit y no Blink.

+ +

Para saber más...

+ +

Cultura general

+ + + +

Para usuarios de Chrome

+ +

Si eres usuario de chrome te recomendamos:

+ + + +

Para Desarrolladores Web

+ +

Si deseas estar al día de las últimas funcionalidades que ofrece Chrome, te recomendamos instalar alguna de las versiones pre-estables (aún en desarrollo).

+ +

Google publica actualizaciones frecuentemente y ha diseñado estas distribuciones para que funcionen codo con codo junto a tu versión "estable" de Chrome. Te recomendamos visitar Chrome Release Blog para estar al tanto de las últimas novedades sobre la aplicación.

+ +

También te recomendamos:

+ + + +
+ + + + + +
diff --git a/files/es/glossary/gpl/index.html b/files/es/glossary/gpl/index.html new file mode 100644 index 0000000000..8f35bee2cf --- /dev/null +++ b/files/es/glossary/gpl/index.html @@ -0,0 +1,30 @@ +--- +title: GPL +slug: Glossary/GPL +tags: + - Compartir + - Copyleft + - GNU + - GPL + - Glosario + - Libre + - Licencia + - Open Source +translation_of: Glossary/GPL +--- +

La lincencia GNU GPL (GNU General Public License en español Licencia Pública General de GNU) es una licencia de software libre copyleft publicada por la Free Software Foundation. Los usuarios de un programa con licencia GPL son libres para usarlo, acceder al código fuente, modificarlo y distribuir los cambios; siempre que redistribuyan el programa completo (modificado o no modificado) bajo la misma licencia.

+ +

Para saber más...

+ +

Cultura General

+ + + +

Referencia Técnica

+ + diff --git a/files/es/glossary/grid/index.html b/files/es/glossary/grid/index.html new file mode 100644 index 0000000000..b5f55e4d7d --- /dev/null +++ b/files/es/glossary/grid/index.html @@ -0,0 +1,74 @@ +--- +title: Grid +slug: Glossary/Grid +tags: + - CSS + - CSS Grids +translation_of: Glossary/Grid +--- +

CSS grid es definido usando el valor grid en la propiedad display; puedes definir columnas y filas en tu diseño grid, con las propiedades  {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}} .

+ +

El grid que configures usando estas propiedades es definido como la grilla explícita (explicit grid).

+ +

Si colocas contenido fuera de esta cuadrícula explícita, o si confías en la ubicación automática y el algoritmo de cuadrícula necesita crear {{glossary("grid tracks", "tracks")}} de filas o columnas adicionales para contener {{glossary("grid item", "grid items")}}, luego se crearán pistas adicionales en la cuadrícula implícita. La cuadrícula implícita es la cuadrícula creada automáticamente debido al contenido que se agrega fuera de las pistas definidas.    

+ +

En el siguiente ejemplo, he creado una grilla explícita de tres columnas y dos filas. La tercera fila en la cuadrícula es una pista de la fila de la grilla implícita, formada debido a que son más de seis los elementos que llenan las pistas explícitas.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 100px 100px;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +

{{ EmbedLiveSample('example', '500', '330') }}

+ +

Aprende Más

+ +

Referencia de propiedades

+ + + +

Otras lecturas

+ + +
diff --git a/files/es/glossary/grid_areas/index.html b/files/es/glossary/grid_areas/index.html new file mode 100644 index 0000000000..17cc84ef19 --- /dev/null +++ b/files/es/glossary/grid_areas/index.html @@ -0,0 +1,78 @@ +--- +title: Grid Areas +slug: Glossary/Grid_Areas +translation_of: Glossary/Grid_Areas +--- +

Un grid area es una o más {{glossary("grid cell", "grid cells")}} que forman un área rectangular en la cuadrícula. Los grid areas se crean cuando se coloca un ítem usando disposición basada en líneas o cuando se definen áreas usando grid areas con nombre.

+ +

Image showing a highlighted grid area

+ +

Las Grid areas deben ser de naturaleza rectangular; no es posible crear, por ejemplo, un grid area en forma de T o L.

+ +

En el siguiente ejemplo, tengo un contenedor de cuadrícula con dos ítems. Los he nombrado con la propiedad {{cssxref ("grid-area")}} y luego los he distribuido en la cuadrícula usando {{cssxref ("grid-template-areas")}}. Esto crea dos áreas de cuadrícula, una que cubre cuatro celdas de la cuadrícula, la otra dos.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  grid-template-rows: 100px 100px;
+  grid-template-areas:
+    "a a b"
+    "a a b";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+
+ +
<div class="wrapper">
+   <div class="item1">Item</div>
+   <div class="item2">Item</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_1', '300', '280') }}

+
+ +

Aprenda más

+ +

Referencia de propiedad

+ + + +

Otras lecturas

+ + diff --git a/files/es/glossary/grid_column/index.html b/files/es/glossary/grid_column/index.html new file mode 100644 index 0000000000..a3d2c208b0 --- /dev/null +++ b/files/es/glossary/grid_column/index.html @@ -0,0 +1,27 @@ +--- +title: Grid Column +slug: Glossary/Grid_Column +translation_of: Glossary/Grid_Column +--- +

Una columna de grid es una pista vertical en un CSS Grid Layout, y es el espacio entre dos líneas verticales de cuadrícula. Está definido por la propiedad {{cssxref("grid-template-columns")}} o por las propiedades abreviadas {{cssxref("grid")}} o {{cssxref("grid-template")}}.

+ +

Además, se pueden crear columnas en la cuadrícula implícita cuando los elementos se colocan fuera de las columnas creadas en la cuadrícula explícita. Estas columnas serán de tamaño automático por defecto, o pueden tener un tamaño especificado con la propiedad {{cssxref("grid-auto-columns")}}.

+ +

Cuando se utiliza la alineación en CSS Grid Layout, el eje sobre el que corren las columnas es conocido como el eje del bloque o de la columna.

+ +

Aprende Más

+ +

Propiedades de referencia

+ + + +

Otras lecturas

+ + diff --git a/files/es/glossary/grid_lines/index.html b/files/es/glossary/grid_lines/index.html new file mode 100644 index 0000000000..f908009fb3 --- /dev/null +++ b/files/es/glossary/grid_lines/index.html @@ -0,0 +1,176 @@ +--- +title: Lineas de Cuadricula +slug: Glossary/Grid_Lines +translation_of: Glossary/Grid_Lines +--- +

Las Lineas de Cuadricula se crean cuando defines las {{glossary("tracks", "Pistas de Cuadricula")}} esto sucede dentro de un contenedor que este usando CSS Grid Layout.
+ En el siguiente ejemplo hay una cuadricula con tres pistas de columna y dos pistas de filas. Esto nos da 4 Lineas de Columnas y 3 Lineas de Fila.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+
+ +

Podemos referenciar a Las Lineas de nuestra plantilla usando su numero de linea. De manera izquierda-a-derecha y de arriba-a-abajo; la linea 1 de la columna 1 estará en la izquierda de la cuadricula, la linea 1 de la fila 1 estara al inicio de la cuadricula. Los numeros de lineas siguen el tipo de "writing mode" de el documento, por ejemplo, si es de derecha-a-izquierda, la columna 1 estara a la derecha de la cuadricula. La imagen de abajo muestra, en fondo gris los numeros de linea, asumiendo que el "modo de escritura" es de izquierda-a-derecha.

+ +

Diagram showing the grid with lines numbered.

+
+ +

Las líneas también se crean en la cuadrícula implícita cuando se crean pistas implícitas para mantener el contenido posicionado fuera de la cuadrícula explícita, sin embargo, estas líneas no se pueden abordar mediante un número.

+ +

Ubicar elementos en la cuadrícula usando el número de línea

+ +

Al crear una cuadricula usted puede ubicar los elementos dentro de ésta, usando los numeros de lineas.

+ +

En el siguiente ejemplo, el elemento esta posicionado desde la linea de columna 1 hasta la linea de columna 3 y desde la linea de fila 1 hasta la linea de fila 3.

+ +
+ + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px 100px;
+}
+.item {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+ +

{{ EmbedLiveSample('example_2', '500', '250') }}

+
+ +

Nombrando las lineas

+ +

Las lineas creadas en la cuadricula explicita, pueden ser nombradas, asignándoles un nombre dentro de corchetes antes ó después de la información del tamaño de pistas. Asi podemos utlizar estos nombres como referencia para cada línea en vez de utilizar los numeros de linea.

+ +
+ + +
<div class="wrapper">
+   <div class="item">Item</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
+  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
+}
+.item {
+  grid-column-start: col1-start;
+  grid-column-end: col3-start;
+  grid-row-start: row1-start;
+  grid-row-end: rows-end;
+}
+
+ +

{{ EmbedLiveSample('example_3', '500', '250') }}

+
+ +

Learn more

+ +

Property reference

+ + + +

Further reading

+ + diff --git a/files/es/glossary/grid_rows/index.html b/files/es/glossary/grid_rows/index.html new file mode 100644 index 0000000000..c880d9871b --- /dev/null +++ b/files/es/glossary/grid_rows/index.html @@ -0,0 +1,27 @@ +--- +title: Grid Row +slug: Glossary/Grid_Rows +translation_of: Glossary/Grid_Rows +--- +

Una grid row es una pista horizontal en un CSS Grid Layout, es el espacio entre dos líneas de cuadrícula horizontales. Se define por la propiedad {{cssxref("grid-template-rows")}} o con la propiedad shorthand {{cssxref("grid")}} o {{cssxref("grid-template")}}.

+ +

Además, se pueden crear filas en la cuadrícula implícita cuando los elementos se colocan fuera de las filas creadas en la cuadrícula explícita. Estas filas serán de tamaño automático por defecto, o pueden tener un tamaño especificado con la propiedad {{cssxref("grid-auto-rows")}}.

+ +

Cuando se trabaja con alineación en CSS Grid Layout, el eje por el que se ejecutan las filas se conoce como eje en línea, o fila.

+ +

Learn More

+ +

Property reference

+ + + +

Further reading

+ + diff --git a/files/es/glossary/head/index.html b/files/es/glossary/head/index.html new file mode 100644 index 0000000000..0159a57cff --- /dev/null +++ b/files/es/glossary/head/index.html @@ -0,0 +1,20 @@ +--- +title: Head +slug: Glossary/Head +tags: + - Glosario + - HTML + - Metadatos + - head +translation_of: Glossary/Head +--- +

La cabecera (en inglés Head) es la parte de un documento HTML que contiene metadatos sobre ese documento, como el autor, la descripción y los enlaces a los archivos CSS o JavaScript que se deben aplicar al documento HTML. Es la parte del documento web que no es visible al usuario.

+ +

Aprenda más

+ +

Elemento head de HTML

+ + diff --git a/files/es/glossary/hilo_principal/index.html b/files/es/glossary/hilo_principal/index.html new file mode 100644 index 0000000000..47cef4e428 --- /dev/null +++ b/files/es/glossary/hilo_principal/index.html @@ -0,0 +1,30 @@ +--- +title: Hilo principal +slug: Glossary/Hilo_principal +tags: + - Actualización Web + - Glosario + - Referencia + - Web de rendimiento +translation_of: Glossary/Main_thread +--- +

El hilo principal es donde un navegador procesa eventos y pinturas del usuario. De manera predeterminada, el navegador usa un solo hilo para ejecutar todo el JavaScript en su página, así como para realizar el diseño, los reflujos y la recolección de basura. Esto significa que las funciones de JavaScript de larga duración pueden bloquear el hilo, lo que lleva a una página que no responde y a una mala experiencia del usuario.

+ +

A menos que use intencionalmente un trabajador web, como un trabajador de servicio, JavaScript se ejecuta en el hilo principal, por lo que es fácil que un script provoque retrasos en el procesamiento o la pintura de eventos. Cuanto menos trabajo se requiera del hilo principal, más puede responder ese hilo a los eventos del usuario, pintar y, en general, responder al usuario.

+ + diff --git a/files/es/glossary/hoisting/index.html b/files/es/glossary/hoisting/index.html new file mode 100644 index 0000000000..7331a4b59c --- /dev/null +++ b/files/es/glossary/hoisting/index.html @@ -0,0 +1,93 @@ +--- +title: Hoisting +slug: Glossary/Hoisting +tags: + - JavaScript + - hoisting +translation_of: Glossary/Hoisting +--- +

Hoisting es un término que no encontrará utilizado en ninguna especificación previa a ECMAScript® 2015 Language Specification. El concepto de Hoisting fue pensado como una manera general de referirse a cómo funcionan los contextos de ejecución en JavaScript (específicamente las fases de creación y ejecución). Sin embargo, el concepto puede ser un poco confuso al principio.

+ +

Conceptualmente, por ejemplo, una estricta definición de hoisting sugiere que las declaraciones de variables y funciones son físicamente movidas al comienzo del código, pero esto no es lo que ocurre en realidad. Lo que sucede es que las declaraciones de variables y funciones son asignadas en memoria durante la fase de compilación, pero quedan exactamente en dónde las has escrito en el código.

+ +

Aprenda más

+ +

Ejemplo técnico

+ +

Una de las ventajas en JavaScript de colocar (ponerlas en memoria) las declaraciones de funciones antes de ejecutar cualquier otro segmento de código es que permite utilizar una función antes de declararla en el código. Por ejemplo: 

+ +
function nombreDelGato(nombre) {
+  console.log("El nombre de mi gato es " + nombre);
+}
+
+nombreDelGato("Maurizzio");
+/*
+El resultado del código es: "El nombre de mi gato es Maurizzio"
+*/
+
+ +

El código escrito arriba está escrito de la manera que sería esperada para que funcione. Ahora, veamos qué sucede cuando llamamos a la función antes de escribirla:

+ +
nombreDelGato("Dumas");
+
+function nombreDelGato(nombre) {
+  console.log("El nombre de mi gato es " + nombre);
+}
+/*
+El resultado del código es: "El nombre de mi gato es Dumas"
+*/
+
+ +

Como se puede observar, aunque primero llamamos a la función en el código, antes de que sea escrita, el código aún funciona. Esto sucede por la manera en la que el contexto de ejecución trabaja en JavaScript. 

+ +

Hoisting se lleva también bien con otros tipos de datos y variables. Observemos el siguiente ejemplo:

+ +

Ejemplo técnico

+ +
var x = 5;
+
+(function () {
+    console.log("x:", x); // no obtenemos '5' sino 'undefined'
+    var x = 10;
+    console.log("x:", x); // 10
+}());
+
+ +

¿No hemos obtenido lo esperado?, como la declaración de variables se procesa antes de ejecutar cualquier código, declarar una variable en cualquier parte del código es igual a declararla al inicio del mismo. Lo que ocurre aquí y para que se entienda, es que hipotéticamente la variable se eleva y pasa a declararse al comienzo de su contexto, en este caso la función que la contiene.

+ +

El ejemplo anterior se entiende implícitamente como:

+ +
var x = 5;
+
+(function () {
+    var x; // Se elevo la declaración
+    console.log("x:", x); // undefined
+    x = 10;
+    console.log("x:", x); // 10
+}());
+
+ +

JavaScript sólo utiliza el hoisting en declaraciones, no inicializaciones. Si está utilizando una variable que es declarada e inicializada después  (está después en el código) de usarla, el valor será undefined. El siguiente ejemplo demuestra ese comportamiento:

+ +
var x = 1; // Inicializa x
+console.log(x + " " + y); // '1 undefined'
+var y = 2; // Inicializa y
+
+ +

Como se puede apreciar la elevación afecta la declaración de variables, pero no su inicialización. El valor será asignado exactamente cuando la sentencia de asignación sea alcanzada.

+ +

El ejemplo anterior se entiende implícitamente como:

+ +
var x = 1; // Inicializa x
+var y;// Se elevo la declaración
+console.log(x + " " + y); // '1 undefined'
+y = 2; // Inicializa y
+
+ +

Referencia técnica

+ + diff --git a/files/es/glossary/html/index.html b/files/es/glossary/html/index.html new file mode 100644 index 0000000000..67db74519d --- /dev/null +++ b/files/es/glossary/html/index.html @@ -0,0 +1,47 @@ +--- +title: HTML +slug: Glossary/HTML +tags: + - Glosario + - HTML +translation_of: Glossary/HTML +--- +

HTML (Lenguaje de marcado de hipertexto o HyperText Markup Language por sus siglas en inglés) es un lenguaje descriptivo que especifica la estructura de las páginas web.

+ +

Breve historia

+ +

En 1990, como parte de su visión de la {{glossary("World Wide Web","Web")}} (art. en inglés), Tim Berners-Lee definió el concepto de {{glossary("hypertext")}} (art. en inglés), el cual Berners-Lee formalizó el siguiente año a través de una marca principalmente basada en {{glossary("SGML")}} (art. en inglés). El {{glossary("IETF")}} (art. en inglés) comenzó formalmente a especificar HTML en 1993, y después de varios borradores se liberó la version 2.0 en 1995. En 1994 Berners-Lee fundó el {{glossary("W3C")}} (art. en inglés) para desarrollar la Web. En 1996, el W3C asumió el control de los trabajos de HTML y publicó la recomendación HTML 3.2 un año más tarde. HTML 4.0 fue liberada en 1999 y se convirtió en estándar en el año 2000.

+ +

En ese momento, el W3C casi abandonó HTML en favor a {{glossary("XHTML")}}, crear un grupo independiente llamado {{glossary("WHATWG")}} (art. en inglés) en 2004. Gracias al WHATWG, el trabajo de {{glossary("HTML5")}} (art. en inglés) continuó: las dos organizaciones liberaron el primer borrador en 2008 y el estándar final en 2014.

+ +

Conceptos y sintaxis

+ +

Un documento HTML es un documento de texto plano estructurado con {{glossary("element","elements")}} (elementos en español) (art. en inglés). Los elementos están encerrados con parejas de {{Glossary("tag","tags" )}} (etiquetas en español) (art. en inglés) que realizan la apertura y el cierre . Cada etiqueta comienza y termina con paréntesis angulados (símbolos de menor que y mayor que (<>)). Existen unas pocas etiquetas vacías o nulas que no puede encerrar ningún texto, como por ejemplo {{htmlelement("img")}} (art. en inglés).

+ +

Usted puede extender las etiquetas (tags) de HTML con {{Glossary("attribute","attributes")}}(atributos en español) (art. en inglés), las cuales proporcionan información adicional que afecta el modo como el navegador interpreta los elementos:

+ +

+ +

Un archivo HTML es normalmente guardado con una extensión .htm o .html, es entregado por un {{Glossary("Server","web server")}} (servidor de internet) (art. en inglés), y puede ser interpretado por cualquier {{Glossary("browser","web browser")}} (navegador de internet) (art. en inglés).

+ +

Aprenda más

+ +

Cultura general

+ + + +

Aprendiendo HTML

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/html5/index.html b/files/es/glossary/html5/index.html new file mode 100644 index 0000000000..807df32e01 --- /dev/null +++ b/files/es/glossary/html5/index.html @@ -0,0 +1,12 @@ +--- +title: HTML5 +slug: Glossary/HTML5 +translation_of: Glossary/HTML5 +--- +

La última versión estable de HTML, HTML5 convierte a HTML de un simple formato de marcado para estructurar documentos en una plataforma completa de desarrollo de aplicaciones. Entre otras características, HTML5 incluye nuevos elementos y API de JavaScript para mejorar el almacenamiento, la multimedia y el acceso al hardware.

+ +

Aprenda más

+ + diff --git a/files/es/glossary/http/index.html b/files/es/glossary/http/index.html new file mode 100644 index 0000000000..12c5a895f7 --- /dev/null +++ b/files/es/glossary/http/index.html @@ -0,0 +1,25 @@ +--- +title: HTTP +slug: Glossary/HTTP +tags: + - Beginner + - Intro + - Web +translation_of: Glossary/HTTP +--- +

El protocolo de transferencia de hipertexto o HTTP (HyperText Transfer Protocol) es el protocolo de red que permite la transferencia de documentos de hipermedia en la red, generalmente entre un navegador y un servidor, para que los humanos puedan leerlos. La versión actual de la especificación se llama HTTP/2.

+ +

En un {{glossary("URI")}}, como por ejemplo https://developer.mozilla.org, se indica en el esquema y puede tomar los valores: 'http:' o 'https:'. 'https:' se refiere a la versión segura del protocolo.

+ +

HTTP se considera textual porque toda la comunicación se realiza en texto plano. También es un protocolo sin estado, ya que una comunicación no es consciente de las comunicaciones que se hayan podido producir anteriormente. Estas dos propiedades lo hace ideal para la consulta de documentos en la red (páginas web).

+ +

También se puede utilizar como base para los servicios web {{glossary("REST")}} en peticiones {{glossary("AJAX")}}.

+ +
+

Learn more

+ + +
diff --git a/files/es/glossary/https/index.html b/files/es/glossary/https/index.html new file mode 100644 index 0000000000..fef7e7e8f5 --- /dev/null +++ b/files/es/glossary/https/index.html @@ -0,0 +1,15 @@ +--- +title: HTTPS +slug: Glossary/https +translation_of: Glossary/https +--- +

HTTPS (HTTP Secure) es una versión encriptada del protocolo {{Glossary("HTTP")}}. Normalmente utiliza {{Glossary("SSL")}} o {{Glossary("TLS")}} para cifrar toda la comunicación entre un cliente y un servidor. Esta conexión segura permite a los clientes intercambiar datos confidenciales de forma segura con un servidor, por ejemplo, para actividades bancarias o compras en línea.

+ +

Aprender más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/hyperlink/index.html b/files/es/glossary/hyperlink/index.html new file mode 100644 index 0000000000..651d61e7a6 --- /dev/null +++ b/files/es/glossary/hyperlink/index.html @@ -0,0 +1,37 @@ +--- +title: Hipervínculo +slug: Glossary/Hyperlink +tags: + - Glosario + - HTML + - Hipervínculo + - Navegador + - Web + - a + - enlace +translation_of: Glossary/Hyperlink +--- +

Los Hipervínculos ó enlaces permiten conectar entre sí datos ó páginas web. En HTML, los elementos {{HTMLElement("a")}} representan hipervínculos que tienen como origen un elemento de la página web (por ejemplo cadenas de texto o imágenes), y que pueden tener como destino un elemento de otro sitio web (incluso pueden enlazar a otro punto de la misma página).

+ +

Para saber más...

+ +

Cultura General

+ + + +

Referencias técnicas

+ + + +

Aprende sobre

+ + diff --git a/files/es/glossary/hypertext/index.html b/files/es/glossary/hypertext/index.html new file mode 100644 index 0000000000..019cf6975b --- /dev/null +++ b/files/es/glossary/hypertext/index.html @@ -0,0 +1,24 @@ +--- +title: Hipertexto +slug: Glossary/Hypertext +tags: + - Glosario +translation_of: Glossary/Hypertext +--- +

El hipertexto es texto que contiene enlaces a otros textos, y no un flujo único y lineal como el de una novela.

+ +

El término fue acuñado por Ted Nelson alrededor del año 1965.

+ +

Aprenda más

+ +

Conocimiento general

+ + + +

Referencia Técnica

+ + diff --git a/files/es/glossary/ide/index.html b/files/es/glossary/ide/index.html new file mode 100644 index 0000000000..219f06767f --- /dev/null +++ b/files/es/glossary/ide/index.html @@ -0,0 +1,21 @@ +--- +title: IDE +slug: Glossary/IDE +tags: + - Compilador + - Debugger + - Depurador + - Glosario + - IDE + - editor de texto +translation_of: Glossary/IDE +--- +

Un entorno de desarrollo integrado (IDE) o entorno de desarrollo interactivo es una aplicación que proporciona facilidades a los programadores para el desarrollo de software. Un IDE normalmente consta de un editor de código, herramientas automatizadas para producir el proyecto y un depurador.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/identificador/index.html b/files/es/glossary/identificador/index.html new file mode 100644 index 0000000000..63f26a35a8 --- /dev/null +++ b/files/es/glossary/identificador/index.html @@ -0,0 +1,39 @@ +--- +title: Identificador +slug: Glossary/Identificador +tags: + - Campartir + - CodingScripting + - Glosario + - Novato + - Principiante +translation_of: Glossary/Identifier +--- +

Un Identificador es una secuencia de caracteres en el código que identifica una {{Glossary("Variable")}}, {{Glossary("Function", "función")}} o {{Glossary("Property", "propiedad")}}.

+ +

En {{Glossary("JavaScript")}}, los identificadores distinguen entre mayúsculas y minúsculas y pueden contener letras {{Glossary("Unicode")}}, $, _, y dígitos (0-9), pero no puede comenzar con un dígito.

+ +

Un identificador se diferencia de una cadena en que una {{Glossary("String", "cadena")}} son datos, mientras que un identificador es parte del código. En JavaScript, no hay forma de convertir identificadores en cadenas, pero a veces es posible procesar cadenas como identificadores.

+ +

Aprende más

+ +

Conocimientos generales

+ + + + diff --git a/files/es/glossary/iife/index.html b/files/es/glossary/iife/index.html new file mode 100644 index 0000000000..c758bbc46e --- /dev/null +++ b/files/es/glossary/iife/index.html @@ -0,0 +1,53 @@ +--- +title: 'IIFE: Expresión de función ejecutada inmediatamente' +slug: Glossary/IIFE +tags: + - Funciones +translation_of: Glossary/IIFE +--- +

Las expresiones de función ejecutadas inmediatamente (IIFE por su sigla en inglés) son funciones que se ejecutan tan pronto como se definen.

+ +
(function () {
+    statements
+})();
+ +

Es un patrón de diseño también conocido cómo función autoejecutable ({{glossary("Self-Executing Anonymous Function")}}  ) y se compone por dos partes. La primera es la función anónima con alcance léxico encerrado por el  {{jsxref("Operadores/Grouping", "Operador de Agrupación")}} (). Esto impide accesar variables fuera del IIFE, así cómo contaminar el alcance (scope) global. 

+ +

La segunda parte crea la expresión de función cuya ejecución es inmediata (), siendo interpretado directamente en el engine de JavaScript.

+ +

Ejemplos

+ +

La función se convierte en una expresión de función que es ejecutada inmediatamente. La variable dentro de la expresíon no puede ser accesada desde afuera.

+ +
(function () {
+    var aName = "Barry";
+})();
+// Variable name is not accessible from the outside scope
+aName // throws "Uncaught ReferenceError: aName is not defined"
+
+ +

Asignar el IIFE a una variable almacena el valor de retorno, no la definición de la función.

+ +
var result = (function () {
+    var name = "Barry";
+    return name;
+})();
+// Immediately creates the output:
+result; // "Barry"
+ +

 

+ +

Aprende mas

+ +

Aprende acerca de

+ + + +

General knowledge

+ + diff --git a/files/es/glossary/index.html b/files/es/glossary/index.html new file mode 100644 index 0000000000..e0dc1422ba --- /dev/null +++ b/files/es/glossary/index.html @@ -0,0 +1,30 @@ +--- +title: Glosario +slug: Glossary +tags: + - Definiciones + - Diccionario + - Glosario + - Glossary + - Index + - Landing + - Terminologia + - TopicStub + - Índice +translation_of: Glossary +--- +
{{LearnBox({"title":"Aprender un nuevo término:"})}}
+ +

Las tecnologías web contienen largas listas de jerga y abreviaturas que se utilizan en la documentación y codificación. Este glosario ofrece definiciones de palabras y abreviaturas que necesitas saber para entender y construir con éxito tu web.

+ +

{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}

+ +

Contribuir al glosario

+ +

Este glosario es un trabajo en curso que nunca termina. Puedes ayudar a mejorarlo escribiendo nuevas entradas o haciendo mejor las ya existentes. La forma más fácil de empezar es presionando el siguiente botón o elegir uno de los términos sugeridos debajo.

+ +

Añadir una nueva entrada en el glosario

+ +

{{GlossaryList({"terms":["DMZ","HMAC","condition","modem","OVP","TTL","Unicode"], "filter":"notdefined", "css":"multiColumnList"})}}

+ +

Si deseas saber más acerca de cómo contribuir al glosario, echa un vistazo a la página de estado de la documentación del glosario.

diff --git a/files/es/glossary/indexeddb/index.html b/files/es/glossary/indexeddb/index.html new file mode 100644 index 0000000000..3b54713288 --- /dev/null +++ b/files/es/glossary/indexeddb/index.html @@ -0,0 +1,13 @@ +--- +title: IndexedDB +slug: Glossary/IndexedDB +translation_of: Glossary/IndexedDB +--- +

IndexedDB es una {{glossary("API")}} Web diseñada para almacenar estructuras de datos grandes en los navegadores e indexarlas para realizar búsquedas de alto rendimiento. Al igual que los sistemas RDBMS basados en {{glossary("SQL")}}, IndexedDB es un sistema de base de datos transaccional. Sin embargo, usa objetos de {{glossary("JavaScript")}} en vez de columnas fijas para almacenar los datos.

+ +

Conoce más

+ + diff --git a/files/es/glossary/inmutable/index.html b/files/es/glossary/inmutable/index.html new file mode 100644 index 0000000000..534f00b6b6 --- /dev/null +++ b/files/es/glossary/inmutable/index.html @@ -0,0 +1,23 @@ +--- +title: Inmutable +slug: Glossary/Inmutable +tags: + - CodingScripting + - Glosario +translation_of: Glossary/Immutable +--- +

Un {{glossary("object", "objeto")}} inmutable es aquel cuyo contenido no se puede cambiar.Un objeto puede ser inmutable por varias razones, por ejemplo:

+ + + +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/internet/index.html b/files/es/glossary/internet/index.html new file mode 100644 index 0000000000..f1c95a1a6f --- /dev/null +++ b/files/es/glossary/internet/index.html @@ -0,0 +1,16 @@ +--- +title: Internet +slug: Glossary/Internet +translation_of: Glossary/Internet +--- +

La Internet es una red mundial de redes que utiliza el conjunto de protocolos de Internet (tambien conocidos como {{glossary("TCP")}}/{{glossary("IPv6","IP")}} (art. en ingles) siendo sus dos mas importantes {{glossary("protocol","protocolos")}}).

+ +

Aprender más

+ +

Aprender al respecto

+ + diff --git a/files/es/glossary/ip_address/index.html b/files/es/glossary/ip_address/index.html new file mode 100644 index 0000000000..1883d59b24 --- /dev/null +++ b/files/es/glossary/ip_address/index.html @@ -0,0 +1,16 @@ +--- +title: Dirección IP +slug: Glossary/IP_Address +translation_of: Glossary/IP_Address +--- +

Una dirección IP es un número asignado a cada dispositivo conectado a una red que utiliza el protocolo de Internet.

+ +

La «dirección IP» normalmente se sigue refiriendo a las direcciones IPv4 de 32 bits hasta que el IPv6 se despliegue más ampliamente.

+ +

Aprenda más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/ipv6/index.html b/files/es/glossary/ipv6/index.html new file mode 100644 index 0000000000..35422b267f --- /dev/null +++ b/files/es/glossary/ipv6/index.html @@ -0,0 +1,17 @@ +--- +title: IPv6 +slug: Glossary/IPv6 +tags: + - IPv6 + - Web +translation_of: Glossary/IPv6 +--- +

IPv6 es la versión actual del protocolo de comunicación subyacente a Internet. Lentamente, IPv6 está reemplazando a IPv4, entre otras razones porque IPv6 permite muchas direcciones de IP diferentes.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/irc/index.html b/files/es/glossary/irc/index.html new file mode 100644 index 0000000000..093bfb9912 --- /dev/null +++ b/files/es/glossary/irc/index.html @@ -0,0 +1,8 @@ +--- +title: IRC +slug: Glossary/IRC +translation_of: Glossary/IRC +--- +

IRC (Internet Relay Chat) es un sistema de chat mundial que requiere una conexión a Internet y un cliente IRC, que envía y recibe mensajes atravéz del servidor IRC.

+ +

Diseñado a finales de la década de 1980 por Jarrko Oikarinen, IRC usa {{glossary("TCP")}} y es un protocolo abierto. El servidor IRC transmite mensajes a todos los que están conectados a uno de los muchos canales de IRC (cada uno con su propio ID).

diff --git a/files/es/glossary/isp/index.html b/files/es/glossary/isp/index.html new file mode 100644 index 0000000000..852238b499 --- /dev/null +++ b/files/es/glossary/isp/index.html @@ -0,0 +1,20 @@ +--- +title: ISP +slug: Glossary/ISP +tags: + - Glosario + - ISP + - Proveedor de servicios de Internet + - Web +translation_of: Glossary/ISP +--- +

Un ISP (del inglés Internet Service Provider, Proveedor de servicios de Internet) es una empresa (en su mayoría compañías telefónicas) que vende acceso a Internet y, a veces, correo electrónico, alojamiento de páginas web y voz sobre IP, ya sea mediante una conexión de marcación a través de una línea telefónica (antes más común), o a través de una conexión de banda ancha como un módem de cable o un servicio DSL.

+ +

Aprenda más

+ +

Conocimiento General

+ + diff --git a/files/es/glossary/iu/index.html b/files/es/glossary/iu/index.html new file mode 100644 index 0000000000..0b24558082 --- /dev/null +++ b/files/es/glossary/iu/index.html @@ -0,0 +1,19 @@ +--- +title: IU +slug: Glossary/IU +tags: + - Accesibilidad + - Diseño + - Glosario +translation_of: Glossary/UI +--- +

La Interfaz de Usuario (IU) es el medio que facilita la interacción entre el usuario y la máquina. En el campo de la informática, puede ser un teclado, un joystick, una pantalla, o un programa. En el caso del software, puede ser una entrada de línea de comandos, una página web, un formulario, o el front-end de cualquier aplicación.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/java/index.html b/files/es/glossary/java/index.html new file mode 100644 index 0000000000..a32087e7c0 --- /dev/null +++ b/files/es/glossary/java/index.html @@ -0,0 +1,23 @@ +--- +title: Java +slug: Glossary/Java +tags: + - Glosario + - Java + - Lenguaje de programación +translation_of: Glossary/Java +--- +

Java es un lenguaje de {{Glossary("computer programming", "programación")}}  semi-compilado, {{glossary("OOP", "orientado a objetos")}} y portable.

+ +

Java está tipado estáticamente y tiene una sintaxis parecida a la de C. Tiene una gran librería de funciones fáciles de usar, el Java Software Development Kit (SDK).

+ +

Los programas son {{glossary("Compile", "compilados")}} primero una única vez a byte code y empaquetados en un formato que puede ser ejecutado por la Máquina Virtual de Java (JVM). La JVM está disponible para multiples plataformas, lo que permite que los programas en Java funcionen en casi todos los sistemas sin tener que volver a compilar y empaquetar el proyecto cada vez. Esto hace que sea el lenguaje preferido de muchas empresas con distintos propósitos, aunque puede ser considerado como muy "pesado".

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/javascript/index.html b/files/es/glossary/javascript/index.html new file mode 100644 index 0000000000..183c1b6bf6 --- /dev/null +++ b/files/es/glossary/javascript/index.html @@ -0,0 +1,52 @@ +--- +title: JavaScript +slug: Glossary/JavaScript +tags: + - CodingScripting + - Glosario + - JavaScript + - 'l10n:priority' +translation_of: Glossary/JavaScript +--- +
{{jsSidebar}}
+ +

Resumen

+ +

JavaScript (o "JS") es un lenguaje de programación que se usa con mayor frecuencia para scripts dinámicos de lado del cliente en páginas web, pero también se usa a menudo en el lado del {{Glossary("Server", "servidor")}} — usando un entorno de ejecución como Node.js.

+ +

JavaScript no se debe confundir con el {{interwiki("wikipedia", "Java_(programming_language)", "lenguaje de programación Java")}}. Aunque "Java" y "JavaScript" son marcas comerciales (o marcas comerciales registradas) de Oracle en EE. UU. y otros países, los dos lenguajes de programación son significativamente diferentes en su sintaxis, semántica y casos de uso.

+ +

JavaScript se utiliza principalmente en el navegador, lo que permite a los desarrolladores manipular el contenido de la página web a través del {{Glossary("DOM")}}, manipular datos con {{Glossary("AJAX")}} y {{Glossary("IndexedDB")}}, dibujar gráficos con {{Glossary("canvas")}}, interactuar con el dispositivo que ejecuta el navegador a través de varias {{Glossary("API", "APIs")}} y más. JavaScript es uno de los lenguajes más utilizados en el mundo, debido al reciente crecimiento y mejora en el rendimiento de las {{Glossary("API", "APIs")}} disponibles en los navegadores.

+ +

Orígenes e Historia

+ +

Concebido como un lenguaje de lado del servidor por Brendan Eich (entonces empleado por Netscape Corporation), JavaScript pronto llegó a Netscape Navigator 2.0 en septiembre de 1995. JavaScript disfrutó de un éxito inmediato y {{Glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introdujo la compatibilidad con JavaScript con el nombre de JScript en agosto de 1996.

+ +

En noviembre de 1996, Netscape comenzó a trabajar con ECMA International para hacer de JavaScript un estándar de la industria. Desde entonces, el JavaScript estandarizado se llama ECMAScript y se especifica en ECMA-262, cuya última edición (décima, ES2019) está disponible a partir de junio de 2019.

+ +

Recientemente, la popularidad de JavaScript se ha expandido aún más gracias a la exitosa plataforma Node.js, el entorno de ejecución de JavaScript multiplataforma más popular fuera de el navegador. Node.js, creado con el motor de JavaScript V8 de Chrome — permite a los desarrolladores utilizar JavaScript como lenguaje de programación para automatizar las cosas en una computadora y crear servidores {{Glossary("HTTP")}} y {{Glossary("Web Sockets")}} completamente funcionales.

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Aprende JavaScript

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/jpeg/index.html b/files/es/glossary/jpeg/index.html new file mode 100644 index 0000000000..e6d398fbc7 --- /dev/null +++ b/files/es/glossary/jpeg/index.html @@ -0,0 +1,14 @@ +--- +title: JPEG +slug: Glossary/jpeg +translation_of: Glossary/jpeg +--- +

JPEG (Joint Photographic Experts Group) es un método comúnmente utilizado en la compresión con pérdida de información en imágenes digitales.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/jquery/index.html b/files/es/glossary/jquery/index.html new file mode 100644 index 0000000000..5ddba3d180 --- /dev/null +++ b/files/es/glossary/jquery/index.html @@ -0,0 +1,64 @@ +--- +title: jQuery +slug: Glossary/jQuery +tags: + - Glosario + - JQuery + - JavaScript +translation_of: Glossary/jQuery +--- +

jQuery es una {{Glossary("JavaScript")}} {{Glossary("Library")}} que se enfoca en simplificar la manipulación del {{Glossary("DOM")}}, llamadas {{Glossary("AJAX")}} y manejo de {{Glossary("Event")}}. Es utilizado por desarrolladores JavaScript de manera frecuente.

+ +

jQUery usa un formato, $(selector).action() para asignar elementos a un evento. Para explicarlo con mayor detalle, $(selector) hara que jQuery seleccione los elementos selector y los asigne a un evento {{Glossary("API")}} llamado .action().

+ +
$(document).ready(function(){
+  alert("¡Hola Mundo!");
+  $("#blackBox").hide();
+});
+ +

El código anterior es equivalente al siguiente:

+ +
window.onload = function() {
+  alert( "¡Hola Mundo!" );
+  document.getElementById("blackBox").style.display = "none";
+};
+ +

Descargar jQuery

+ + + + + + + + + + + + + + + + +
npmbower (solo file)Google CDN
npm install jquerybower install https://code.jquery.com/jquery-3.2.1.min.jshttps://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
+ +

Aprende más

+ +

Conocimiento general

+ + + +

Aprende jQuery

+ + + +

Información técnica

+ + diff --git a/files/es/glossary/json/index.html b/files/es/glossary/json/index.html new file mode 100644 index 0000000000..5eee8bef0a --- /dev/null +++ b/files/es/glossary/json/index.html @@ -0,0 +1,16 @@ +--- +title: JSON +slug: Glossary/JSON +tags: + - Glosario + - 'I10n:prioridad' + - JSON + - Script de codificación + - introducción +translation_of: Glossary/JSON +--- +

JSON (notación de objetos javascript) es un formato de intercambio de datos. Es muy parecido a un subconjunto de sintaxis JavaScript, aunque no es un subconjunto en sentido estricto. (Ver JSON en la Referencia JavaScript para más detalles.) Aunque muchos lenguajes de programación lo soportan, JSON es especialmente útil al escribir cualquier tipo de aplicación basada en JavaScript, incluyendo sitios web y extensiones del navegador. Por ejemplo, es posible almacenar la información del usuario en formato JSON en una cookie o almacenar las preferencias de extensión en JSON en una cadena de valores de preferencias del navegador.
+
+ JSON es capaz de representar números, valores lógicos, cadenas, valores nulos, arreglos y matrices (secuencias ordenadas de valores) y objetos (mapas de cadena de valores) compuestos de estos valores (o de otras matrices y objetos). JSON no representa de manera nativa tipos de datos más complejos como funciones, expresiones regulares, fechas, y así sucesivamente (en objetos de fecha serializados por defecto como una cadena que contiene la fecha en formato ISO, al no hacerlo de ida y vuelta, la información no se pierde por completo). Si se necesita que JSON represente tipos de datos adicionales, se puede transformar los valores, ya que son serializados, o antes de su deserialización.

+ +

Más similar a XML, JSON tiene la capacidad de almacenar datos jerárquicos a diferencia del formato más tradicional CSV.  Muchas herramientas proveen la "traducción" entre esos formatos tales como  JSON to CSV Converter.

diff --git a/files/es/glossary/keyword/index.html b/files/es/glossary/keyword/index.html new file mode 100644 index 0000000000..549ea9ac95 --- /dev/null +++ b/files/es/glossary/keyword/index.html @@ -0,0 +1,22 @@ +--- +title: Palabra clave +slug: Glossary/Keyword +tags: + - Buscar + - Buscar palabra clave + - Glosario + - Palabra clave + - busqueda +translation_of: Glossary/Keyword +--- +

Una palabra clave es una palabra o frase que describe contenido. Las palabras clave en línea se utilizan como consultas para los motores de búsqueda o como palabras que identifican el contenido de los sitios web.

+ +

Cuando usas un motor de búsqueda, utilizas palabras clave para especificar lo que estás buscando y el motor de búsqueda devuelve páginas web relevantes. Para obtener resultados más precisos, prueba con palabras clave más específicas, como "Mustang GTO azul" en lugar de simplemente "Mustang".  Las páginas web también utilizan palabras clave en una etiqueta <meta> (en la sección {{htmlelement("head")}}) para describir el contenido de la página, de manera que los motores de búsqueda puedan identificar y organizar mejor las páginas web.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/lgpl/index.html b/files/es/glossary/lgpl/index.html new file mode 100644 index 0000000000..65b26228a7 --- /dev/null +++ b/files/es/glossary/lgpl/index.html @@ -0,0 +1,28 @@ +--- +title: LGPL +slug: Glossary/LGPL +tags: + - Compartir + - Free + - Free Software Foundation + - GNU + - GPL + - Licencia + - Open Source + - Software Libre +translation_of: Glossary/LGPL +--- +

LGPL (GNU Lesser General Public License en español Licencia Pública General Reducida de GNU) es una licencia de software libre publicada por la Free Software Foundation. LGPL es una alternativa más permisiva que la estricta licencia copyleft GPL.

+ +

Esto supone que cualquier trabajo que use un elemento con licencia GPL tiene la obligación de ser publicado bajo las mismas condiciones (libre de usar, compartir, estudiar, y modificar). Por otro lado, LGPL solo requiere que los componentes derivados del elemento bajo LGPL continuen con esta licencia, y no el programa al completo.

+ +

LGPL es usado habitualmente para licencias de componentes compartidos como por ejemplo librerías (.dll, .so, .jar, etc.).

+ +

Para saber más...

+ +

Cultura General

+ + diff --git a/files/es/glossary/long_task/index.html b/files/es/glossary/long_task/index.html new file mode 100644 index 0000000000..dacfa81eda --- /dev/null +++ b/files/es/glossary/long_task/index.html @@ -0,0 +1,17 @@ +--- +title: Long task +slug: Glossary/Long_task +tags: + - Api de tareas largas + - Glosario + - Referencia + - Rendimiento Web +translation_of: Glossary/Long_task +--- +

Una 'long task' (tarea larga) es una tarea que tarda más de 50 ms en completarse. Es un período ininterrumpido en el que el subproceso de la interfaz de usuario principal está ocupado durante 50 ms o más. Los ejemplos comunes incluyen controladores de eventos de ejecución prolongada, reflujos costosos y otras representaciones, y el trabajo que realiza el navegador entre diferentes turnos del bucle de eventos que supera los 50 ms.

+ +

Ver también

+ + diff --git a/files/es/glossary/metadato/index.html b/files/es/glossary/metadato/index.html new file mode 100644 index 0000000000..dddb546b28 --- /dev/null +++ b/files/es/glossary/metadato/index.html @@ -0,0 +1,24 @@ +--- +title: Metadato +slug: Glossary/Metadato +tags: + - CodingScripting + - Glosario + - HTML +translation_of: Glossary/Metadata +--- +

Los metadatos son, en su definición más simple, datos que describen otros datos. Por ejemplo, un documento {{glossary("HTML")}} son datos, pero HTML también puede contener metadatos en su elemento {{htmlelement("head")}} que describe el documento, como por ejemplo, quién lo escribió y su resumen.

+ +

Saber más

+ +

Conocimientos generales

+ + + +

HTML metadata

+ + diff --git a/files/es/glossary/miga-de-pan/index.html b/files/es/glossary/miga-de-pan/index.html new file mode 100644 index 0000000000..0fe4ade2f7 --- /dev/null +++ b/files/es/glossary/miga-de-pan/index.html @@ -0,0 +1,17 @@ +--- +title: Miga de pan +slug: Glossary/miga-de-pan +tags: + - Accesibilidad + - Glosario + - Miga de pan + - navegación +translation_of: Glossary/Breadcrumb +--- +

Una miga de pan, o rastro de migas de pan, es una ayuda a la navegación que se sitúa normalmente entre la cabecera del sitio y el contenido principal y muestra, bien la jerarquía de la página actual en relación con la estructura del sitio desde el nivel superior o bien una lista de los enlaces utilizados para llegar a la página actual en el orden en que se han visitado.

+ +

Una miga de pan para este documento se vería más o menos así:

+ +

MDN > Glosario > Miga de pan

+ +

Los rastros de migas de pan permiten a los usuarios conocer su situación dentro de un sitio web. Este tipo de navegación, si se construye correctamente, ayuda a los usuarios a saber dónde están dentro del sitio y cómo han llegado hasta ahí. También pueden ayudar al usuario a volver a donde estaba anteriormente y pueden reducir el número de clics necesario para llegar a una página de nivel superior.

diff --git a/files/es/glossary/mitm/index.html b/files/es/glossary/mitm/index.html new file mode 100644 index 0000000000..e2b212bda0 --- /dev/null +++ b/files/es/glossary/mitm/index.html @@ -0,0 +1,29 @@ +--- +title: MitM +slug: Glossary/MitM +tags: + - Glosario + - Seguridad +translation_of: Glossary/MitM +--- +

Un ataque de Intermediario [Man-in-the-middle attack (MitM)] intercepta una comunicación entre dos sistemas. Por ejemplo, un router Wi-Fi puede estar en peligro.

+ +

Comparémoslo con un correo físico: si usted está escribiendo una carta a una persona, el cartero puede interceptar cada carta que envíe. Ellos la abren, la leen y finalmente la modifican, y entonces la reempaquetan y solamente entonces la envían a los destinatarios que usted pretendió. El receptor original podría entonces contestarle y el cartero abriría de nuevo la carta, la leería y finalmente la modificaria, la reempaquetaría y se la da. Usted ignoraría que hay un hombre en medio de su canal de comunicación – el cartero es invisible para usted y para su destinatario.

+ +

En el correo físico y en la comunicación online, los ataques MITM son difíciles de defender. Unos pocos consejos:

+ + + +
+

Saber más

+ + +
diff --git a/files/es/glossary/mixin/index.html b/files/es/glossary/mixin/index.html new file mode 100644 index 0000000000..82336147de --- /dev/null +++ b/files/es/glossary/mixin/index.html @@ -0,0 +1,34 @@ +--- +title: Mixin +slug: Glossary/Mixin +translation_of: Glossary/Mixin +--- +

Un mixin es un conjunto coherente de {{glossary("method","métodos")}} y {{glossary("property","propiedades")}} implementadas por otras interfaces y {{glossary("class","clases")}}.

+ +

Ejemplo

+ +

@mixin nombre_del_mixin{

+ +

    width: 100% ;

+ +

}

+ +

La forma más común de llamar a un mixin y aplicar esas propiedades y métodos es el include (ejemplo @include nombre_del_mixin ). Al utilizar el include para llamar las propiedades y métodos incluidos en el mixin, son entonces parte de la nueva interfaz.

+ + + +

Aprende más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + + +

 

diff --git a/files/es/glossary/mobile_first/index.html b/files/es/glossary/mobile_first/index.html new file mode 100644 index 0000000000..3543c015f8 --- /dev/null +++ b/files/es/glossary/mobile_first/index.html @@ -0,0 +1,10 @@ +--- +title: Mobile First +slug: Glossary/Mobile_First +tags: + - Diseño + - Diseño móvil + - Glosario +translation_of: Glossary/Mobile_First +--- +

Mobile first, una forma de {{Glossary("mejora progresiva")}}, es un enfoque de desarrollo y diseño web que se enfoca en la priorización del diseño y el desarrollo para dispositivos móviles por encima del diseño y desarrollo para pantallas de escritorio. El fundamento detrás del enfoque "mobile-first" es proveer al usuario una buena experiencia para todos los tamaños de pantalla—empezando por una experiencia de usuario que funcione bien para dispositivos pequeños, para posteriormente, basada en dicha experiencia, continuar desarrollando para enriquecer la experiencia de usuario conforme el tamaño de pantalla es mayor. El enfoque "mobile-first" contrasta con el antiguo enfoque de diseño para escritorio en el que se pensaba primero en el diseño/desarrollo para tamaños de pantalla de escritorio y posteriormente se realizaban ajustes para conseguir que dichos diseños y desarrollos funcionases correctamente en dispositivos móbilies.

diff --git a/files/es/glossary/mozilla_firefox/index.html b/files/es/glossary/mozilla_firefox/index.html new file mode 100644 index 0000000000..921fe3f62a --- /dev/null +++ b/files/es/glossary/mozilla_firefox/index.html @@ -0,0 +1,30 @@ +--- +title: Mozilla Firefox +slug: Glossary/Mozilla_Firefox +tags: + - Glosario + - Infraestructura + - Mozilla + - Mozilla Firefox + - Navegador +translation_of: Glossary/Mozilla_Firefox +--- +

Mozilla Firefox es un {{Glossary("navegador")}} gratuito de codigo abierto cuyo desarrollo es supervisado por Mozilla Corporation. Firefox functiona sobre Windows, OS X, Linus y Android.

+ +

First released in November 2004, Firefox is completely customizable with themes, plug-ins, and add-ons.  Firefox uses {{glossary("Gecko")}} to render webpages, and implements both current and upcoming Web standards.

+ +

Lanzado en Noviembre del 2014, Firefox es completamente personalizable con temas y complementos. Firefox usa {{glossary("Gecko")}} para renderizar paginas webs, e implementa tanto actuales como próximos estandares Web.

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Referencias técnicas

+ + diff --git a/files/es/glossary/mvc/index.html b/files/es/glossary/mvc/index.html new file mode 100644 index 0000000000..49819a1eab --- /dev/null +++ b/files/es/glossary/mvc/index.html @@ -0,0 +1,54 @@ +--- +title: MVC +slug: Glossary/MVC +translation_of: Glossary/MVC +--- +

MVC (Modelo-Vista-Controlador) es un patrón en el diseño de software comúnmente utilizado para implementar interfaces de usuario, datos y lógica de control. Enfatiza una separación entre la lógica de negocios y su visualización. Esta "separación de preocupaciones" proporciona una mejor división del trabajo y una mejora de mantenimiento. Algunos otros patrones de diseño se basan en MVC, como MVVM (Modelo-Vista-modelo de vista), MVP (Modelo-Vista-Presentador) y MVW (Modelo-Vista-Whatever).

+ +

Las tres partes del patrón de diseño de software MVC se pueden describir de la siguiente manera:

+ +
    +
  1. Modelo: Maneja datos y lógica de negocios.
    2. +
  2. Vista: Se encarga del diseño y presentación.
    3. +
  3. Controlador: Enruta comandos a los modelos y vistas.
    4. +
+ +

Modelo Vista Controlador ejemplo

+ +

Imagine una sencilla aplicación de lista de compras. Todo lo que queremos es una lista del nombre, la cantidad y el precio de cada artículo que necesitamos comprar esta semana. A continuación describiremos cómo podríamos implementar parte de esta funcionalidad usando MVC.Diagram to show the different parts of the mvc architecture.

+ +

Modelo

+ +

El modelo define qué datos debe contener la aplicación. Si el estado de estos datos cambia, el modelo generalmente notificará a la vista (para que la pantalla pueda cambiar según sea necesario) y, a veces, el controlador (si se necesita una lógica diferente para controlar la vista actualizada).

+ +

Volviendo a nuestra aplicación de lista de compras, el modelo especificará qué datos deben contener los artículos de la lista (artículo, precio, etc.) y qué artículos de la lista ya están presentes.

+ +

Vista

+ +

La vista define cómo se deben mostrar los datos de la aplicación.

+ +

En nuestra aplicación de lista de compras, la vista definiría cómo se presenta la lista al usuario y recibiría los datos para mostrar desde el modelo.

+ +

Controlador

+ +

El controlador contiene una lógica que actualiza el modelo y / o vista en respuesta a las entradas de los usuarios de la aplicación.

+ +

Entonces, por ejemplo, nuestra lista de compras podría tener formularios de entrada y botones que nos permitan agregar o eliminar artículos. Estas acciones requieren que se actualice el modelo, por lo que la entrada se envía al controlador, que luego manipula el modelo según corresponda, que luego envía datos actualizados a la vista.

+ +

Sin embargo, es posible que también se desee actualizar la vista para mostrar los datos en un formato diferente, por ejemplo, cambiar el orden de los artículos de menor a mayor precio o en orden alfabético. En este caso, el controlador podría manejar esto directamente sin necesidad de actualizar el modelo.

+ +

MVC en la web

+ +

Como desarrollador web, este patrón probablemente será bastante familiar, incluso si nunca lo has usado conscientemente antes. Su modelo de datos probablemente esté contenido en algún tipo de base de datos (ya sea una base de datos tradicional del lado del servidor como MySQL, o una solución del lado del cliente como IndexedDB). El código de control de su aplicación probablemente esté escrito en HTML / JavaScript , y su interfaz de usuario probablemente esté escrita usando HTML / CSS / o lo que sea. Esto se parece mucho a MVC, pero MVC hace que estos componentes sigan un patrón más rígido.

+ +

En los primeros días de la Web, la arquitectura MVC se implementó principalmente en el lado del servidor, con el cliente solicitando actualizaciones a través de formularios o enlaces, y recibiendo vistas actualizadas para mostrar en el navegador. Sin embargo, en estos días, mucha de la lógica se enviaba al cliente con la llegada de los almacenes de datos del lado del cliente, y XMLHttpRequest permitía actualizaciones parciales de la página según era necesario.

+ +

Los frameworks de desarrollo web como AngularJS y Ember.js implementan una arquitectura MVC, aunque de maneras ligeramente diferentes.

+ +

Learn more

+ +

General knowledge

+ + diff --git "a/files/es/glossary/m\303\251todo/index.html" "b/files/es/glossary/m\303\251todo/index.html" new file mode 100644 index 0000000000..b0539a9474 --- /dev/null +++ "b/files/es/glossary/m\303\251todo/index.html" @@ -0,0 +1,28 @@ +--- +title: Método +slug: Glossary/Método +tags: + - Glosario + - JavaScript +translation_of: Glossary/Method +--- +

Un metodo es una {{glossary("function", "función")}} la cual es {{glossary("property", "propiedad")}} de un {{glossary("Objecto", "Objeto")}}. Existen dos tipos de métodos: Métodos de Instancia los cuales son tareas integradas realizadas por la instacia de un objeto, y los Métodos Estáticos que son tareas que pueden ser llamadas directamente en el constructor de un objeto.

+ +
+

Nota: En JavaScript las funciones en si son objectos, asi que, en ese contexto, un método es de hecho un {{glossary("Object Reference", "objeto de referencia")}} a una función.

+
+ +

Aprender más

+ +

Aprender acerca de esto

+ + + +

Referencia Técnica

+ + diff --git a/files/es/glossary/node.js/index.html b/files/es/glossary/node.js/index.html new file mode 100644 index 0000000000..6e657100ac --- /dev/null +++ b/files/es/glossary/node.js/index.html @@ -0,0 +1,27 @@ +--- +title: Node.js +slug: Glossary/Node.js +tags: + - Glosario + - Infraestructura + - JavaScript + - node.js +translation_of: Glossary/Node.js +--- +

Node.js es un entorno de ejecucion multiplataforma en {{Glossary("JavaScript")}} que permite a los desarrolladores construir aplicaciones del lado del servidor y de red con JavaScript.

+ +

Saber más

+ +

Conocimientos generales

+ + + +

Información técnica

+ + diff --git a/files/es/glossary/node/dom/index.html b/files/es/glossary/node/dom/index.html new file mode 100644 index 0000000000..ab70390e89 --- /dev/null +++ b/files/es/glossary/node/dom/index.html @@ -0,0 +1,14 @@ +--- +title: Node (DOM) +slug: Glossary/Node/DOM +translation_of: Glossary/Node/DOM +--- +

En el contexto del {{Glossary("DOM")}}, un nodo es un único punto en el arbol de nodos. Los nodos pueden ser varias cosas el documento mismo, elementos, texto y comentarios.

+ +

Saber más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/node/index.html b/files/es/glossary/node/index.html new file mode 100644 index 0000000000..b2756ff969 --- /dev/null +++ b/files/es/glossary/node/index.html @@ -0,0 +1,13 @@ +--- +title: Node +slug: Glossary/Node +tags: + - Desambiguación + - Glosario +translation_of: Glossary/Node +--- +

El término nodo puede tener varios significados según el contexto. Puede referirse a:

+ +

{{GlossaryDisambiguation}}

+ +

Otro uso de la palabra es cuando se habla de {{Glossary("Node.js")}}

diff --git a/files/es/glossary/nombre_de_dominio/index.html b/files/es/glossary/nombre_de_dominio/index.html new file mode 100644 index 0000000000..e2c9e01c16 --- /dev/null +++ b/files/es/glossary/nombre_de_dominio/index.html @@ -0,0 +1,15 @@ +--- +title: Nombre de dominio +slug: Glossary/Nombre_de_dominio +translation_of: Glossary/Domain_name +--- +

Un nombre de dominio es la dirección de un sitio web en {{Glossary("Internet")}}. Los nombres de dominio se utilizan en {{Glossary("URL","URLs")}} para identificar a qué servidor pertenece una página web específica. El nombre de dominio consiste en una secuencia jerárquica de nombres (etiquetas) separados por puntos y que terminan con una {{glossary("TLD","extensión")}}.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/nombre_de_encabezado_prohibido/index.html b/files/es/glossary/nombre_de_encabezado_prohibido/index.html new file mode 100644 index 0000000000..e2f16bbecf --- /dev/null +++ b/files/es/glossary/nombre_de_encabezado_prohibido/index.html @@ -0,0 +1,47 @@ +--- +title: Nombre de encabezado prohibido +slug: Glossary/Nombre_de_encabezado_prohibido +tags: + - Encabezados + - Fetch + - Glosario + - HTTP + - prohibido +translation_of: Glossary/Forbidden_header_name +--- +

Un nombre de encabezado prohibido es un nombre de encabezado HTTP que no se puede modificar mediante programación; específicamente, un nombre de encabezado de HTTP solicitud HTTP.

+ +

Contrasta con el {{Glossary("Forbidden response header name")}}.

+ +

La modificación de estas cabeceras está prohibida, por lo que el agente de usuario mantiene el control total sobre ellos. Los nombres que comienzan con `Sec-` están reservados para crear nuevos encabezados seguros a partir de las {{glossary("API","APIs")}} que usan Fetch que otorgan a los desarrolladores control sobre las cabeceras, como {{domxref("XMLHttpRequest")}}.

+ +

Los nombres de encabezado prohibidos comienzan con Proxy- or Sec-, o se componen de uno de estos:

+ + + +
+

Nota: El encabezadoUser-Agent ya no está prohibido, según la especificación — vea la lista de nombres prohibidos de encabezado (esta fue implementada en Firefox 43), por lo que ahora puede establecerse en un objecto Fetch Headers, a través de XHR setRequestHeader(), etc.

+
diff --git a/files/es/glossary/null/index.html b/files/es/glossary/null/index.html new file mode 100644 index 0000000000..ac7f9cd30d --- /dev/null +++ b/files/es/glossary/null/index.html @@ -0,0 +1,28 @@ +--- +title: 'Null' +slug: Glossary/Null +tags: + - Glosario +translation_of: Glossary/Null +--- +

En ciencias informáticas, un valor null  representa una referencia que apunta, generalmente intencionadamente, a una inexistente o inválido {{glossary("objecto","objeto")}} o dirección. El significado de una referencia null varía entre las implementaciones de lenguajes.

+ +

En {{Glossary("JavaScript")}}, null es uno de los {{Glossary("Primitivo", "valores primitivos")}}.

+ +

Aprender más

+ +

Referencia técnica

+ + + +

Conocimientos generales

+ + + +
+
diff --git a/files/es/glossary/numero/index.html b/files/es/glossary/numero/index.html new file mode 100644 index 0000000000..6c1b7cd2b5 --- /dev/null +++ b/files/es/glossary/numero/index.html @@ -0,0 +1,24 @@ +--- +title: Number +slug: Glossary/Numero +tags: + - Glosario + - JavaScript +translation_of: Glossary/Number +--- +

En {{Glossary("JavaScript")}}, Number es un tipo de datos numérico (double-precision 64-bit floating point format (IEEE 754)). En otros lenguajes de programación puede existir diferentes tipos numéricos, por ejemplo: Integers, Floats, Doubles, or Bignums.

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Referencia Técnica

+ + diff --git a/files/es/glossary/objecto/index.html b/files/es/glossary/objecto/index.html new file mode 100644 index 0000000000..aeda572ea9 --- /dev/null +++ b/files/es/glossary/objecto/index.html @@ -0,0 +1,13 @@ +--- +title: Object +slug: Glossary/Objecto +translation_of: Glossary/Object +--- +

El Object se refiere a una estructura de datos que contiene datos e instrucciones para trabajar con los datos.  Algunas veces los Objects se refieren a cosas del mundo real, por ejemplo, un object de un coche o mapa en un juego de carreras. {{glossary("JavaScript")}}, Java, C++, y Python son ejemplos de {{glossary("OOP","programación orientada a objetos")}}.

+ +

Aprender más

+ + diff --git a/files/es/glossary/oop/index.html b/files/es/glossary/oop/index.html new file mode 100644 index 0000000000..e39a7117d4 --- /dev/null +++ b/files/es/glossary/oop/index.html @@ -0,0 +1,22 @@ +--- +title: Programación orientada a objetos +slug: Glossary/OOP +tags: + - OPP + - Objeto + - Programación orientada a objetos + - programacion +translation_of: Glossary/OOP +--- +

OOP (Programación orientada a objetos) es un paradigma de programación en el que los datos son encapsulados en {{glossary("object","objetos")}}, los cuales tienen su propio comportamiento.

+ +

{{glossary("JavaScript")}} esta altamente orientado a objetos. Sigue el modelo basado en prototipado (en oposición al modelo basado en {{glossary("Class","clases")}}).

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/operador/index.html b/files/es/glossary/operador/index.html new file mode 100644 index 0000000000..0385f67830 --- /dev/null +++ b/files/es/glossary/operador/index.html @@ -0,0 +1,17 @@ +--- +title: Operador +slug: Glossary/Operador +tags: + - Glosario + - Scripting +translation_of: Glossary/Operator +--- +

Parte de la sintaxis reservada consistente en signos de puntuación o carácteres alfanuméricos que tienen funcionalidades incorporadas. Por ejemplo, "+" indica el operador suma y "!" indica el operador "not" (negación).

+ +

Aprende más

+ +

Referencias técnicas

+ + diff --git a/files/es/glossary/operando/index.html b/files/es/glossary/operando/index.html new file mode 100644 index 0000000000..6a198905e3 --- /dev/null +++ b/files/es/glossary/operando/index.html @@ -0,0 +1,15 @@ +--- +title: Operando +slug: Glossary/Operando +tags: + - Codificación + - Glosario +translation_of: Glossary/Operand +--- +

Un operando es la parte de una instruccion que representa los datos manipulados por el {{glossary("Operator")}}. por ejemplo, cuando sumas dos numeros, los numeros son el operando y "+" es el operador.

+ +

Aprende mas

+ + diff --git a/files/es/glossary/parse/index.html b/files/es/glossary/parse/index.html new file mode 100644 index 0000000000..4281a26f2f --- /dev/null +++ b/files/es/glossary/parse/index.html @@ -0,0 +1,23 @@ +--- +title: Parse (análisis sintáctico) +slug: Glossary/Parse +translation_of: Glossary/Parse +--- +

"Parsing" significa analizar y convertir un programa en un formato interno que un entorno de ejecución pueda realmente ejecutar, por ejemplo el motor {{glossary("JavaScript")}} dentro de los navegadores.

+ +

El navegador analiza el HTML en un árbol {{glossary('DOM')}}. El análisis de HTML implica la "tokenización" (dividir en fragmentos) y en la construcción del árbol. Los "tokens" HTML incluyen etiquetas de inicio y final, así como nombres de atributos y valores. Si el documento está bien formado, el análisis sintáctico es más sencillo y rápido. El "parser" analiza la entrada simbólica en el documento, construyendo el árbol del documento.

+ +

Cuando el analizador de HTML encuentra recursos que no bloquean, como una imagen, el navegador solicitará esos recursos y continuará analizando. El análisis puede continuar cuando se encuentra un archivo CSS, pero las etiquetas <script> —particularmente aquellas sin un atributo async o defer— bloquean el renderizado, y pausa el análisis de HTML.

+ +

Cuando el navegador encuentra estilos CSS, analiza el texto en el Modelo de Objetos CSS (o {{glossary('CSSOM')}}), una estructura de datos que luego utiliza para diseñar la distribución y el pintado. El navegador crea entonces un árbol de "renderizado" (dibujado) a partir de ambas estructuras para poder pintar el contenido en la pantalla. También se descarga el JavaScript, se analiza y luego se ejecuta.

+ +

El análisis de JavaScript se hace durante {{glossary("compile time")}} o cuando se invoca el {{glossary("parser")}}, como durante una llamada a un método.

+ +

Aprende más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/php/index.html b/files/es/glossary/php/index.html new file mode 100644 index 0000000000..e1677eef56 --- /dev/null +++ b/files/es/glossary/php/index.html @@ -0,0 +1,57 @@ +--- +title: PHP +slug: Glossary/PHP +tags: + - Glosario + - Infraestructura +translation_of: Glossary/PHP +--- +

PHP (una inicialización recursiva para PHP: preprocesador de hipertexto) es un lenguaje de script de código abierto del lado del servidor que puede integrarse en HTML para crear aplicaciones web y sitios web dinámicos.

+ +

Examples

+ +

Basic syntax

+ +
  // inicio del codigo de PHP
+<?php
+     // PHP code va aqui
+ ?>
+// fin del codigo PHP
+ +

Printing data on screen

+ +
<?php
+   echo "Hola Mundo!";
+?>
+ +

PHP variables

+ +
​​​​​​​<?php
+ // variables
+ $nome='Danilo';
+ $sobrenome='Santos';
+ $pais='Brasil';
+ $email='danilocarsan@gmailcom';
+​​​​​​​
+ // imprimiendo las variables
+ echo $nome;
+ echo $sobrenome;
+ echo $pais;
+ echo $email;
+?>
+ + diff --git a/files/es/glossary/pila_llamadas/index.html b/files/es/glossary/pila_llamadas/index.html new file mode 100644 index 0000000000..f164d913ca --- /dev/null +++ b/files/es/glossary/pila_llamadas/index.html @@ -0,0 +1,92 @@ +--- +title: Pila de llamadas +slug: Glossary/Pila_llamadas +tags: + - Glosario + - JavaScript + - Pila de llamadas +translation_of: Glossary/Call_stack +--- +

Una pila de llamadas es un mecanismo para que un intérprete (como el intérprete de JavaScript en un navegador web) realice un seguimiento de en que lugar se llama a múltiples {{glossary("function","funciones")}}, qué función se esta ejecutando actualmente y qué funciones son llamadas desde esa función, etc.

+ + + +

Ejemplo

+ +
function saludar() {
+   // [1] Código
+   diHola();
+   // [2] Código
+}
+function diHola() {
+   return "!Hola!";
+}
+
+// Invocar la función `saludar`
+saludar();
+
+// [3] Código
+
+ +

El código del ejemplo se ejecutaría de la siguiente manera:

+ +
    +
  1. Ignora todas las funciones hasta que alcanza la invocación de la función saludar().
    2. +
  2. Añade la función saludar() a la lista de la pila de llamadas. +
    +

    Lista de la pila de llamadas:
    + - saludar

    +
    +
    3. +
  3. Ejecuta todas las líneas de código de dentro de la función saludar().
    4. +
  4. Llega a la incovación de la función diHola().
    5. +
  5. Añade la función diHola() a la lista de la pila de llamadas. +
    +

    Lista de la pila de llamadas:
    + - saludar
    + - diHola

    +
    +
    6. +
  6. Ejecuta todas las líneas de código de dentro de la función diHola() hasta que llega al final.
    7. +
  7. Devuelve la ejecución a la línea que invocó a la función diHola() y continua con la ejecuación del resto de código de la función saludar().
    8. +
  8. Elimina la función diHola() de la lista de la pila de llamadas. +
    +

    Lista de la pila de llamadas:
    + - saludar

    +
    +
    9. +
  9. Cuando todo el código dentro de la función saludar() ha sido ejecutado, vuelve a la línea que la invocó y continua ejecutando el resto de código JavaScript.
    10. +
  10. Elimina la función saludar() de la lista de la pila de llamadas. +
    +

    Lista de la pila de llamadas:
    + VACÍA

    +
    +
    11. +
+ +

En resumen, empezamos con una lista de la pila llamadas vacía. Cuando invocamos una función, ésta es automáticamente añadida a la pila de llamadas. Una vez ha ejecutado todo su código, también de manera automática es eliminada de la pila de llamadas. Finalmente, la pila de llamadas vuelve a estar vacía.

+ +

Saber más

+ +

Conocimiento general

+ + + + diff --git a/files/es/glossary/polyfill/index.html b/files/es/glossary/polyfill/index.html new file mode 100644 index 0000000000..f679a33a20 --- /dev/null +++ b/files/es/glossary/polyfill/index.html @@ -0,0 +1,18 @@ +--- +title: Polyfill +slug: Glossary/Polyfill +tags: + - Glosario +translation_of: Glossary/Polyfill +--- +

Un polyfill es un fragmento de código (generalmente JavaScript en la Web) que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa.

+ +

Por ejemplo, se podría usar un polyfill para imitar la funcionalidad de un elemento HTML Canvas en Microsoft Internet Explorer 7 usando un complemento de Silverlight, o un soporte mímico para las unidades rem CSS, o {{cssxref("text-shadow")}}, o lo que tu quieras.

+ +

Leer más

+ +

Conocimientos Generales

+ + diff --git a/files/es/glossary/pop/index.html b/files/es/glossary/pop/index.html new file mode 100644 index 0000000000..2de8816ba8 --- /dev/null +++ b/files/es/glossary/pop/index.html @@ -0,0 +1,28 @@ +--- +title: POP3 +slug: Glossary/POP +tags: + - Correo + - Glosario + - Infraestructura + - Principiante + - Protocolo +translation_of: Glossary/POP +--- +

POP3 (Protocolo de Oficina de Correo por sus siglas en inglés) es un protocolo muy común para obtener correos desde un servidor de correos por medio de una conexión TCP. POP3 no soporta directorios, a diferencia del más reciente IMAP4, el cual es más difícil de implementar dada su extructura más compleja.

+ +

Los clientes usualmente recuperan todos los mensajes y luego los eliminan del servidor, pero POP3 permite retener una copia en el servidor. Casi todos los servidores y clientes de correo actualmente soportan POP3.

+ + diff --git a/files/es/glossary/port/index.html b/files/es/glossary/port/index.html new file mode 100644 index 0000000000..020985d59c --- /dev/null +++ b/files/es/glossary/port/index.html @@ -0,0 +1,22 @@ +--- +title: Puerto +slug: Glossary/Port +tags: + - Glosario + - Intro + - Puerto + - Seguridad + - red de computadoras +translation_of: Glossary/Port +--- +

Para un ordenador conectado a una red con una dirección IP, un puerto es el destino de la comunicación. Los puertos están designados por números, por debajo de 1024 cada puerto está asociado por defecto con un protocolo específico.

+ +

Por ejemplo, el puerto por defecto para el protocolo HTTP es 80 y el puerto por defecto para el protocolo HTTPS es 443, por lo tanto un servidor HTTP espera peticiones en esos puertos. Cada protocolo de internet está asociado con un puerto por defecto: SMTP (25), POP3 (110), IMAP (143), IRC (194), y así sucesivamente.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/preflight_peticion/index.html b/files/es/glossary/preflight_peticion/index.html new file mode 100644 index 0000000000..6bd66f555a --- /dev/null +++ b/files/es/glossary/preflight_peticion/index.html @@ -0,0 +1,33 @@ +--- +title: Preflight petición +slug: Glossary/Preflight_peticion +translation_of: Glossary/Preflight_request +--- +

Una petición preflight CORS es una petición CORS realizada para comprobar si el protocolo {{Glossary("CORS")}} es comprendido.

+ +

Es una petición {{HTTPMethod("OPTIONS")}}, que emplea tres cabeceras HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, y la cabecera {{HTTPHeader("Origin")}} .

+ +

Las peticiones preflight se lanzan automáticamente desde el navegador cuando son necesarias. Normalmente los desarrolladores front-end no necesitan realizar estas peticiones manualmente.

+ +

Por ejemplo, un cliente puede preguntar si el servidor permite una petición {{HTTPMethod("DELETE")}} antes de enviar la petición DELETE usando una petición preflight:

+ +
OPTIONS /resource/foo
+Access-Control-Request-Method: DELETE
+Access-Control-Request-Headers: origin, x-requested-with
+Origin: https://foo.bar.org
+ +

Si el servidor lo permite responderá a la petición preflight con una cabecera de respuesta {{HTTPHeader("Access-Control-Allow-Methods")}} que incluirá el método DELETE:

+ +
HTTP/1.1 200 OK
+Content-Length: 0
+Connection: keep-alive
+Access-Control-Allow-Origin: https://foo.bar.org
+Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
+Access-Control-Max-Age: 86400
+ +

See also

+ + diff --git a/files/es/glossary/preprocesador_css/index.html b/files/es/glossary/preprocesador_css/index.html new file mode 100644 index 0000000000..7304385604 --- /dev/null +++ b/files/es/glossary/preprocesador_css/index.html @@ -0,0 +1,21 @@ +--- +title: Preprocesador CSS +slug: Glossary/Preprocesador_CSS +translation_of: Glossary/CSS_preprocessor +--- +

Un preprocesador CSS es un programa que te permite generar {{Glossary("CSS")}} a partir de la {{Glossary("syntax")}} única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como {{Glossary("variable")}}, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

+ +

Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web  {{Glossary("server")}}.

+ +

Aprende más

+ +

Conocimiento general

+ +

Estos son algunos de lo preprocesadores CSS más populares:

+ + diff --git a/files/es/glossary/primitivo/index.html b/files/es/glossary/primitivo/index.html new file mode 100644 index 0000000000..1966a23803 --- /dev/null +++ b/files/es/glossary/primitivo/index.html @@ -0,0 +1,125 @@ +--- +title: Primitivo +slug: Glossary/Primitivo +tags: + - CodingScripting + - Glosario + - JavaScript +translation_of: Glossary/Primitive +--- +

En {{Glossary("JavaScript")}}, un primitive (valor primitivo, tipo de dato primitivo) son datos que no son un {{Glossary("object", "objeto")}} y no tienen {{Glossary("method", "métodos")}}. Hay 6 tipos de datos primitivos: {{Glossary("string")}}, {{Glossary("number")}}, {{Glossary("bigint")}}, {{Glossary("boolean")}} , {{Glossary("undefined")}} y {{Glossary("symbol")}}. También hay {{Glossary("null")}}, que aparentemente es primitivo, pero de hecho es un caso especial para cada {{JSxRef("Object")}}: y cualquier tipo estructurado se deriva de null por la {{web.link("/es/docs/Learn/JavaScript/Objects/Inheritance", "Cadena de prototipos")}}.

+ +

La mayoría de las veces, un valor primitivo se representa directamente en el nivel más bajo de la implementación del lenguaje.

+ +

Todos los primitivos son inmutables, es decir, no se pueden modificar. Es importante no confundir un primitivo en sí mismo con un valor primitivo asignado a una variable. Se puede reasignar un nuevo valor a la variable, pero el valor existente no se puede cambiar de la misma forma en que se pueden modificar los objetos, los arreglos y las funciones.

+ +

Ejemplo

+ +

Este ejemplo te ayudará a comprender que los valores primitivos son inmutables.

+ +

JavaScript

+ +
// El uso de un método de cadena no modifica la cadena
+var bar = "baz";
+console.log(bar);               // baz
+bar.toUpperCase();
+console.log(bar);               // baz
+
+// El uso de un método de arreglo muta el arreglo
+var foo = [];
+console.log(foo);               // []
+foo.push("plugh");
+console.log(foo);               // ["plugh"]
+
+// La asignación le da al primitivo un nuevo valor (no lo muta)
+bar = bar.toUpperCase();       // BAZ
+
+ +

Un primitivo se puede reemplazar, pero no se puede modificar directamente.

+ +

Otro ejemplo [paso a paso]

+ +

El siguiente ejemplo te ayudará a analizar cómo se ocupa JavaScript de los primitivos.

+ +

JavaScript

+ +
// El primitivo
+let foo = 5;
+
+// Define una función que debería cambiar el valor primitivo
+function addTwo(num) {
+   num += 2;
+}
+// Otra función que intenta hacer lo mismo
+function addTwo_v2(foo) {
+   foo += 2;
+}
+
+// Llama a tu primera función mientras pasas el primitivo como argumento
+addTwo(foo);
+// Obtiene el valor primitivo actual
+console.log(foo);   // 5
+
+// Intenta de nuevo con tu segunda función...
+addTwo_v2(foo);
+console.log(foo);   // 5
+
+ +

¿Esperaba que fuera 7 en lugar de 5?, si es así, lee cómo se ejecuta este código:

+ + + +

Es por eso que los primitivos son inmutables: en lugar de cambiarlos directamente, modificas una copia, sin afectar el original.

+ +

Envolturas de objetos primitivos en JavaScript

+ +

A excepción de null y undefined, todos los valores primitivos tienen objetos equivalentes que envuelven los valores primitivos:

+ + + +

El método {{JSxRef("Objetos_globales/Object/valueOf"," valueOf()")}} del contenedor devuelve el valor primitivo.

+ +

Aprende más

+ +

Conocimientos generales

+ + + + diff --git a/files/es/glossary/progressive_enhancement/index.html b/files/es/glossary/progressive_enhancement/index.html new file mode 100644 index 0000000000..f8e8584134 --- /dev/null +++ b/files/es/glossary/progressive_enhancement/index.html @@ -0,0 +1,24 @@ +--- +title: Mejora Progresiva +slug: Glossary/Progressive_Enhancement +tags: + - Accesibilidad + - Diseño + - Glosario +translation_of: Glossary/Progressive_Enhancement +--- +

Mejora progresiva es una filosofía de diseño que se centra en proporcionar una base de contenido y funcionalidad esenciales para la mayor cantidad de usuarios posible. Al mismo tiempo va más allá y trata de ofrecer la mejor experiencia posible sólo a los usuarios de los navegadores más modernos los cuales pueden ejecutar todo código requerido.

+ +

La detección de características se usa generalmente para determinar si los navegadores pueden manejar todo el contenido de alto nivel o no. Habitualmente se usan los polyfills para incorporar las características faltantes con JavaScript.

+ +

Se debe prestar especial atención a la accesibilidad, siempre que sea posible, se deben proporcionar alternativas aceptables.

+ +

Es una técnica útil que permite a los desarrolladores web centrarse en desarrollar los mejores sitios web posible al tiempo que equilibran los problemas en los sitios web a los que acceden múltiples agentes de usuarios desconocidos. {{Glossary("Graceful degradation")}} es un concepto relacionado pero diferente — a menudo entendido como el acrónimo de mejora progresiva. En realidad ambos enfoquen son válidos y pueden complementarse entre sí.

+ +

Learn more

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/promise/index.html b/files/es/glossary/promise/index.html new file mode 100644 index 0000000000..867e3614d4 --- /dev/null +++ b/files/es/glossary/promise/index.html @@ -0,0 +1,30 @@ +--- +title: Promesa +slug: Glossary/Promise +tags: + - Asíncrono + - Glosario + - Promesa + - Promesas +translation_of: Glossary/Promise +--- +

Una {{jsxref("Promesa")}} es un {{Glossary("objeto")}} devuelto por una {{Glossary("función")}} que no ha completado su tarea. La promesa representa literalmente una promesa creada por una función a la que le llegará un resultado en un futuro.

+ +

Cuando la función termina su tarea {{Glossary("asynchronous", "de forma asíncrona")}}, una función del objeto "promesa" será ejecutada.

+ +

Saber más

+ +

Para obtener más información, echa un vistazo a los siguientes enlaces

+ +

Conocimientos generales

+ + + +

Referencias técnicas

+ + diff --git a/files/es/glossary/propiedad/index.html b/files/es/glossary/propiedad/index.html new file mode 100644 index 0000000000..07eae32e78 --- /dev/null +++ b/files/es/glossary/propiedad/index.html @@ -0,0 +1,11 @@ +--- +title: Propiedad +slug: Glossary/propiedad +tags: + - Desambiguación + - Glosario +translation_of: Glossary/property +--- +

El término propiedad puede tener varios significados según el contexto. Se puede referir a:

+ +

\{{GlossaryDisambiguation}}

diff --git a/files/es/glossary/protocol/index.html b/files/es/glossary/protocol/index.html new file mode 100644 index 0000000000..13f18699a5 --- /dev/null +++ b/files/es/glossary/protocol/index.html @@ -0,0 +1,20 @@ +--- +title: Protocolo +slug: Glossary/Protocol +tags: + - Glosario + - Infraestructura + - Protocolo + - Protocolos +translation_of: Glossary/Protocol +--- +

Un protocolo es un conjunto de reglas que definen cómo se intercambian los datos dentro o entre computadores. La comunicación entre dispositivos requiere que estos estén de acuerdo con el formato de los datos que están siendo intercambiados. Al conjunto de reglas que definen este formato se le llama protocolo.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/prototype-based_programming/index.html b/files/es/glossary/prototype-based_programming/index.html new file mode 100644 index 0000000000..538385b93e --- /dev/null +++ b/files/es/glossary/prototype-based_programming/index.html @@ -0,0 +1,16 @@ +--- +title: Prototype-based programming +slug: Glossary/Prototype-based_programming +translation_of: Glossary/Prototype-based_programming +--- +

La programación basada en prototipos es un estilo de {{Glossary("OOP", "programación orientada a objetos")}} en el que {{Glossary('Clase', 'clases')}} no se definen explícitamente, sino que se derivan de agregar propiedades y métodos a una instancia de otra clase o, con menos frecuencia, agregarlos a un objeto vacío.

+ +

En palabras simples: este tipo de estilo permite la creación de un {{Glossary('Objeto', 'objeto')}} sin definir primero su {{Glossary('Clase', 'clase')}}.

+ +

Aprender más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/prototype/index.html b/files/es/glossary/prototype/index.html new file mode 100644 index 0000000000..dfa36e370b --- /dev/null +++ b/files/es/glossary/prototype/index.html @@ -0,0 +1,16 @@ +--- +title: Prototipo +slug: Glossary/Prototype +translation_of: Glossary/Prototype +--- +

Un prototipo es un modelo que muestra pronto en el ciclo de desarrollo la apariencia y el comportamiento de una aplicación o producto.

+ +

Mira La herencia y la cadena de prototipado.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/pseudo-clase/index.html b/files/es/glossary/pseudo-clase/index.html new file mode 100644 index 0000000000..b3984258d3 --- /dev/null +++ b/files/es/glossary/pseudo-clase/index.html @@ -0,0 +1,20 @@ +--- +title: Pseudo-clase +slug: Glossary/Pseudo-clase +tags: + - CSS + - Glosario + - Pseudo-clase + - Selector + - Selectores +translation_of: Glossary/Pseudo-class +--- +

En CSS, un selector de pseudo-clase apunta a elementos dependiendo de su estado en lugar de en su información en el arbol del documento. Por ejemplo, el selector a{{ cssxref(":visited") }} aplica estilos solamente a los links que el usuario ha visitado.

+ +

Aprender más

+ +

Referencía técnica

+ + diff --git "a/files/es/glossary/pseudoc\303\263digo/index.html" "b/files/es/glossary/pseudoc\303\263digo/index.html" new file mode 100644 index 0000000000..7a68d05ecb --- /dev/null +++ "b/files/es/glossary/pseudoc\303\263digo/index.html" @@ -0,0 +1,18 @@ +--- +title: Pseudocódigo +slug: Glossary/Pseudocódigo +tags: + - CodingScripting + - Glosario + - Pseudocódigo +translation_of: Glossary/Pseudocode +--- +

El pseudocódigo se refiere a la sintaxis del código que generalmente se usa para indicar a los humanos cómo funciona dicho código, o para ilustrar el diseño de un elemento. No funcionará si intentas ejecutarlo como código.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/public-key_cryptography/index.html b/files/es/glossary/public-key_cryptography/index.html new file mode 100644 index 0000000000..c21235dec7 --- /dev/null +++ b/files/es/glossary/public-key_cryptography/index.html @@ -0,0 +1,18 @@ +--- +title: Criptografía de clave pública +slug: Glossary/Public-key_cryptography +translation_of: Glossary/Public-key_cryptography +--- +

 

+ +

La criptografía de clave pública es un sistema criptográfico en el que las claves vienen en pares. La transformación realizada por una de las claves solo se puede deshacer con la otra clave. Una clave (la clave privada) se mantiene secreta mientras que la otra se hace pública.

+ +

Cuando se usa para firmas digitales, la clave privada se usa para firmar y la clave pública para verificar. Esto significa que cualquier persona puede verificar una firma, pero solo el propietario de la clave privada correspondiente podría haberla generado.

+ +

Cuando se utiliza para el cifrado, la clave pública se utiliza para cifrar y la clave privada se utiliza para descifrar. Esto le da a los sistemas de cifrado de clave pública una ventaja sobre los sistemas de cifrado simétrico, ya que la clave de cifrado se puede hacer pública: cualquier persona podría cifrar un mensaje al propietario de la clave privada, pero solo el propietario de la clave privada podría descifrarlo. Sin embargo, suelen ser mucho más lentos que los algoritmos simétricos y el tamaño del mensaje que pueden cifrar es proporcional al tamaño de la clave, por lo que no se ajustan bien a los mensajes largos.

+ +

Como resultado, es común que un sistema de cifrado utilice un algoritmo simétrico para cifrar el mensaje, y luego un sistema de clave pública para cifrar la clave simétrica. Esta disposición puede conferir los beneficios de ambos sistemas.

+ +

Los sistemas de cifrado de clave pública más utilizados son RSA (para firma y encriptación), DSA (para firma) y Diffie-Hellman (para acuerdo de clave).

+ +

 

diff --git a/files/es/glossary/python/index.html b/files/es/glossary/python/index.html new file mode 100644 index 0000000000..15540845f5 --- /dev/null +++ b/files/es/glossary/python/index.html @@ -0,0 +1,24 @@ +--- +title: Python +slug: Glossary/Python +tags: + - Glosario + - Lenguaje + - Principiante + - Python + - introducción + - programacion +translation_of: Glossary/Python +--- +

Python es un leguaje de programación de alto nivel y de propósito general. Utiliza un enfoque multiparadigma, lo que significa que soporta programación orientada a objetos, procedural y en menor medida, programación funcional.

+ +

Fue creado por Guido van Rossun como sucesor a otro lenguaje (llamado ABC) entre 1985 y 1990, y es usado actualmente en una gran variedad de campos, como el desarrollo web, en la creación de aplicaciones actuales y para la construcción de archivos de procesamiento por lotes (Scripts).

+ +

Python es administrado y soportado por la Python Software Foundation. Está desarrollado bajo licencia de código abierto, lo que lo hace libre de usar y de distribuir, incluso para uso comercial.

+ +

Aprende Más

+ + diff --git "a/files/es/glossary/recursi\303\263n/index.html" "b/files/es/glossary/recursi\303\263n/index.html" new file mode 100644 index 0000000000..866ba64a33 --- /dev/null +++ "b/files/es/glossary/recursi\303\263n/index.html" @@ -0,0 +1,18 @@ +--- +title: Recursión +slug: Glossary/Recursión +tags: + - CodingScripting + - Glosario +translation_of: Glossary/Recursion +--- +

Es el acto de una función llamándose a sí misma. La recursión es utilizada para resolver problemas que contienen subproblemas más pequeños. Una función recursiva puede recibir 2 entradas: un caso base (finaliza la recursión) o un un caso recursivo (continúa la recursión).

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/reflow/index.html b/files/es/glossary/reflow/index.html new file mode 100644 index 0000000000..baf326bd1b --- /dev/null +++ b/files/es/glossary/reflow/index.html @@ -0,0 +1,12 @@ +--- +title: Reflow +slug: Glossary/Reflow +translation_of: Glossary/Reflow +--- +

Un Reflow sucede cuando un {{glossary("navegador")}} debe procesar y pintar parte de, o toda una pagina web nuevamente, Como despues de actualizar un sitio web interactivo

+ +

Aprende más

+ + diff --git a/files/es/glossary/regular_expression/index.html b/files/es/glossary/regular_expression/index.html new file mode 100644 index 0000000000..ac8b7d6c64 --- /dev/null +++ b/files/es/glossary/regular_expression/index.html @@ -0,0 +1,29 @@ +--- +title: Expresiones regulares +slug: Glossary/Regular_expression +tags: + - Expresion Regular + - Expresiones Regulares + - Glosario + - JavaScript +translation_of: Glossary/Regular_expression +--- +

Expresiones regulares (o regex) son reglas que definen las secuencias de caracteres obtenidas en una busqueda.

+ +

Las expresiones regulares están incluidas en varios lenguages, pero las más conocida es la de Perl, que ha dado lugar a su propio ecosistema llamado PCRE (Perl Compatible Regular Expression). En la web, {{glossary("JavaScript")}} proporciona otra implementación de expresiones regulares a través del objeto {{jsxref("RegExp")}}.

+ +

Saber más

+ +

Conocimientos generales

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/responsive_web_design/index.html b/files/es/glossary/responsive_web_design/index.html new file mode 100644 index 0000000000..271f00e2ed --- /dev/null +++ b/files/es/glossary/responsive_web_design/index.html @@ -0,0 +1,16 @@ +--- +title: Diseño web responsivo +slug: Glossary/Responsive_web_design +translation_of: Glossary/Responsive_web_design +--- +

Diseño web responsivo (del inglés Responsive Web Design) o RWD es un concepto de desarrollo web que se centra en hacer que los sitios se vean y se comporten de manera óptima en todos los dispositivos informáticos personales, desde el escritorio hasta el móvil.

+ +

Aprender más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/rest/index.html b/files/es/glossary/rest/index.html new file mode 100644 index 0000000000..9e4787327f --- /dev/null +++ b/files/es/glossary/rest/index.html @@ -0,0 +1,30 @@ +--- +title: REST +slug: Glossary/REST +tags: + - Arquitectura + - HTTP + - Rest +translation_of: Glossary/REST +--- +

El término "Transferencia de Estado Representacional" (REST) representa un conjunto de características de diseño de arquitecturas software que aportan confiabilidad, eficiencia y escalibilidad a los sistemas distribuidos. Un sistema es llamado RESTful cuando se ajusta a estas características.

+ +

La idea básica de REST es que un recurso, e.j. un documento, es transferido con su estado y su relaciones (hipertexto) mediante formatos y operaciones estandarizadas bien definidas.

+ +

Como {{Glossary("HTTP")}}, el protocolo estandar de la {{glossary("World Wide Web","Web")}}, también transfiere documentos e hipertexto, las APIs HTTP a veces son llamadas APIs RESTful, servicios RESTful, o simplemente servicios REST, aunque no se ajusten del todo a la deficinición de REST. Los principiantes pueden pensar que una API REST es un servicio HTTP que puede ser llamado mediante librerias y herramientas web estandar.

+ +

Saber más

+ +

Véase También

+ + + +

Conocimientos generales

+ + diff --git a/files/es/glossary/rgb/index.html b/files/es/glossary/rgb/index.html new file mode 100644 index 0000000000..a14bb12211 --- /dev/null +++ b/files/es/glossary/rgb/index.html @@ -0,0 +1,27 @@ +--- +title: RGB +slug: Glossary/RGB +tags: + - CSS + - Diseño + - Guía + - Principiante +translation_of: Glossary/RGB +--- +

Red Green Blue (RGB) es un modelo de color que representa los colores como mezclas de tres componentes subyacentes (o canales), rojo, verde y azul. Cada color se describe mediante una secuencia de tres números (normalmente entre 0.0 y 1.0, o entre 0 y 255) que representan las diferentes intensidades (o contribuciones) de rojo, verde y azul para determinar el color final.

+ +

Hay muchas formas de describir los componentes RGB de un color. En {{Glossary("CSS")}} se pueden representar como un solo entero de 24 bits en notación hexadecimal (por ejemplo, #ADD8E6 is azul claro), o en notación funcional como tres enteros de 8 bits separados (por ejemplo , rgb (46, 139, 87) es verde mar). En {{Glossary("OpenGL")}}, {{Glossary("WebGL")}}, y {{Glossary("GLSL")}} los componentes rojo-verde-azul son fracciones (números en coma flotante entre 0.0 y 1.0), aunque en el búfer de color real normalmente se almacenan como enteros de 8 bits. Gráficamente, un color se puede representar como un punto en una cuadrícula o cubo tridimensional, donde cada dimensión (o eje) corresponde a un canal diferente.

+ +

Saber más

+ +

Conocimientos generales

+ + + +

Véase también

+ + diff --git a/files/es/glossary/rss/index.html b/files/es/glossary/rss/index.html new file mode 100644 index 0000000000..7dbf36678b --- /dev/null +++ b/files/es/glossary/rss/index.html @@ -0,0 +1,29 @@ +--- +title: RSS +slug: Glossary/RSS +tags: + - Compartit + - Glosario + - Noticias + - RSS + - Web + - XML +translation_of: Glossary/RSS +--- +

RSS (Really Simple Syndication en español Sindicación Realmente Simple) hace referencia a los diferentes formatos de XML diseñados para sitios web de noticias.

+ +

Cuando te subscribes a un feed RSS (boletín de noticias de servicios web), éste te envía información y actualizaciones al feed de tu lector RSS, y de esta manera no es necesario que el usuario busque manuelmente en cada sitio web.

+ +

Para saber más...

+ +

Cultura General

+ + + +

Referencia Técnica

+ + diff --git a/files/es/glossary/ruby/index.html b/files/es/glossary/ruby/index.html new file mode 100644 index 0000000000..04a87e53be --- /dev/null +++ b/files/es/glossary/ruby/index.html @@ -0,0 +1,24 @@ +--- +title: Ruby +slug: Glossary/Ruby +tags: + - Glosario + - Ruby +translation_of: Glossary/Ruby +--- +

Ruby es un lenguaje de programación de código abierto. En el contexto {{glossary("world wide web","Web")}}, Ruby se suele usar en el lado del servidor con el marco Ruby On Rails (ROR) para producir sitios web y aplicaciones.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencias técnicas

+ + diff --git a/files/es/glossary/scope/index.html b/files/es/glossary/scope/index.html new file mode 100644 index 0000000000..5d8f3aadf0 --- /dev/null +++ b/files/es/glossary/scope/index.html @@ -0,0 +1,41 @@ +--- +title: Scope +slug: Glossary/Scope +translation_of: Glossary/Scope +--- +

El contexto actual de ejecución. El contexto en el que los valores y las expresiones son "visibles" o pueden ser referenciados. Si una variable u otra expresión no está "en el Scope- alcance actual", entonces no está disponible para su uso. Los Scope también se pueden superponer en una jerarquía, de modo que los Scope secundarios tengan acceso a los ámbitos primarios, pero no al revés.

+ +

Una función sirve como un cierre en JavaScript y, por lo tanto, crea un ámbito, de modo que (por ejemplo) no se puede acceder a una variable definida exclusivamente dentro de la función desde fuera de la función o dentro de otras funciones. Por ejemplo, lo siguiente no es válido:

+ + + +
function exampleFunction() {
+    var x = "declarada dentro de la función"; // x solo se puede utilizar en exampleFunction
+    console.log("funcion interna");
+    console.log(x);
+}
+
+console.log(x);  // error
+ +

Sin embargo, el siguiente código es válido debido a que la variable se declara fuera de la función, lo que la hace global:

+ +
var x = "función externa declarada";
+
+
+exampleFunction();
+
+function exampleFunction() {
+    console.log("funcion interna");
+    console.log(x);
+}
+
+console.log("funcion externa");
+console.log(x);
+ +

Aprende mas

+ +

Conocimentos Generales

+ + diff --git a/files/es/glossary/scv/index.html b/files/es/glossary/scv/index.html new file mode 100644 index 0000000000..be400de190 --- /dev/null +++ b/files/es/glossary/scv/index.html @@ -0,0 +1,20 @@ +--- +title: SCV +slug: Glossary/SCV +tags: + - CodingScripting + - Glosario + - SCV +translation_of: Glossary/SCM +--- +

Un SCV (sistema de control de versiones) es un sistema para gestionar código fuente. Normalmente se refiere al uso de software para manejar versiones de ficheros fuente. Un programador puede modificar ficheros de código fuente sin miedo a eliminar código que funciona, porque un SCV realiza un seguimiento de cómo el código fuente ha cambiado y quién ha realizado los cambios.

+ +

Algunos sistemas SCV son CVS, SVN y Git.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/seguro/index.html b/files/es/glossary/seguro/index.html new file mode 100644 index 0000000000..f5c1c42763 --- /dev/null +++ b/files/es/glossary/seguro/index.html @@ -0,0 +1,40 @@ +--- +title: Seguro +slug: Glossary/seguro +translation_of: Glossary/safe +--- +

Un método  HTTP es seguro cuando no altera el estado del servidor. En otras palabras, un método HTTP es seguro solo cuando ejecuta una operación de lectura. Todos los métodos seguros también son {{glossary("idempotent")}} así como algunos, pero no todos, métodos inseguros como {{HTTPMethod("PUT")}}, o {{HTTPMethod("DELETE")}}.

+ +

Incluso si los métodos seguros tienen una semántica de solo lectura, los servidores pueden alterar su estado: por ejemplo, pueden registrar o mantener estadísticas. Lo importante aquí es que al llamar a un método seguro, el cliente no solicita ningún cambio en el servidor y, por lo tanto, no creará una carga o carga innecesaria para el servidor. Los navegadores pueden llamar a métodos seguros sin temor a causar ningún daño al servidor: esto les permite realizar actividades como la búsqueda previa sin riesgos. Los rastreadores web también confían en llamar a métodos seguros.

+ +

Los métodos seguros no solo sirven archivos estáticos; un servidor puede generar una respuesta a un método seguro sobre la marcha, siempre que el script de generación garantice la seguridad: no debe desencadenar efectos externos, como desencadenar un pedido en un sitio web de comercio electrónico.

+ +

Es responsabilidad de la aplicación en el servidor implementar la semántica segura correctamente, el propio servidor web, ya sea Apache, nginx o IIS, no puede imponerlo por sí mismo. En particular, una aplicación no debe permitir que {{HTTPMethod("GET")}} solicite alterar su estado.

+ +

Una petición de un método seguro, no cambia ningún estado en el servidor:

+ +
GET /pageX.html HTTP/1.1
+
+ +

Una petición de un método inseguro, puede cambiar el estado en el servidor:

+ +
POST /pageX.html HTTP/1.1
+ +

Una petición de un método idempotente pero no seguro:

+ +
DELETE /idX/delete HTTP/1.1
+ +

Vea también

+ +

Conocimientos generales

+ + + +

Conocimientos técnicos

+ + diff --git a/files/es/glossary/sentencias/index.html b/files/es/glossary/sentencias/index.html new file mode 100644 index 0000000000..501478a820 --- /dev/null +++ b/files/es/glossary/sentencias/index.html @@ -0,0 +1,23 @@ +--- +title: Sentencias +slug: Glossary/Sentencias +tags: + - Glosario + - Principiante +translation_of: Glossary/Statement +--- +

En un lenguaje de programación, una sentencia es una línea de código al mando de una tarea Cada programa consiste en una secuencia de sentencias.

+ +

Aprender más

+ +

Referencia técnica

+ + + +

Conocimientos generales

+ + diff --git a/files/es/glossary/seo/index.html b/files/es/glossary/seo/index.html new file mode 100644 index 0000000000..f00704b082 --- /dev/null +++ b/files/es/glossary/seo/index.html @@ -0,0 +1,37 @@ +--- +title: SEO +slug: Glossary/SEO +tags: + - SEO + - buscadores + - busquedas + - posicionamiento web +translation_of: Glossary/SEO +--- +

SEO (Search Engine Optimization) también conocido como posicionamiento web, es el proceso de hacer un sitio web más visible en los resultados de búsqueda o mejorar el ranking de búsqueda.

+ +

Los motores de búsqueda siguen los enlaces de una página a otra, y el índice del contenido encontrado. Al realizar una búsqueda, el motor de búsqueda muestra el contenido indexado en base a su tabla de contenidos organizándolos guiados por las reglas de su algoritmo. El cumplimiento de las directrices de los buscadores con exactitud no implica el correcto posicionamiento del proyecto asociado en los mejores resultados, pero sí la ausencia de una penalización por parte del algoritmo del buscador.

+ +

Los motores de búsqueda dan algunas pautas para el SEO, pero los grandes motores de búsqueda mantienen resultado la clasificación como secreto comercial. El SEO combina las directrices oficiales del motor de búsqueda, el conocimiento empírico y el conocimiento teórico de los artículos científicos o patentes.

+ +

Métodos de SEO se dividen en dos grandes clases:

+ +
+
SEO on Page
+
Conjunto de factores que existen en la web a posicionar que influyen en los resultados de búsqueda. Estos factores son tales como titles, descriptions, contenido y calidad del mismo, densidad de términos, correcta estructuración de contenidos...
+
SEO off Page
+
Conjunto de factores externos que influyen en los resultados de búsqueda. Estos factores son la experiencia del usuario en la web a posicionar, tráfico y sobre todo los links o enlaces externos que apuntan a tu web.
+
 
+
+ +

Aprende más en

+ + + +

Aprende SEO

+ + diff --git a/files/es/glossary/sgml/index.html b/files/es/glossary/sgml/index.html new file mode 100644 index 0000000000..bc186498d4 --- /dev/null +++ b/files/es/glossary/sgml/index.html @@ -0,0 +1,21 @@ +--- +title: SGML +slug: Glossary/SGML +tags: + - CodingScripting + - Composing + - Glossary + - SGML + - es +translation_of: Glossary/SGML +--- +

El Lenguaje de marcado generalizado estándar (SGML) es una especificación {{Glossary("ISO")}} para definir lenguajes de marcado declarativos.

+ +

En la Web, {{Glossary("HTML")}} 4, {{Glossary("XHTML")}}, y {{Glossary("XML")}}  son lenguajes populares basados en SGML. Vale la pena señalar que desde la quinta edición, HTML ya no está basado en SGML y tiene sus propias reglas de análisis.

+ +

Aprender más

+ + diff --git a/files/es/glossary/simd/index.html b/files/es/glossary/simd/index.html new file mode 100644 index 0000000000..812153db21 --- /dev/null +++ b/files/es/glossary/simd/index.html @@ -0,0 +1,20 @@ +--- +title: SIMD +slug: Glossary/SIMD +tags: + - Arquitectura + - Glosario + - SIMD +translation_of: Glossary/SIMD +--- +

SIMD (pronunciado "sim-dee" en inglés) son las siglas de Single Instruction/Multiple Data, el cual es un tipo de  {{Interwiki("wikipedia","Taxonomía_de_Flynn","clasificación de arquitecturas de computadores")}}. SIMD permite realizar la misma operación en distintos datos lo que permite paralelismo mejorando el rendimiento — por ejemplo, en la compresión de gráficos 3D y videos, simulaciones físicas, criptografía y otros entornos.

+ +

En contraposición, {{Glossary("SISD")}} es una arquitectura que funciona de forma secuencial tanto para datos como para instrucciones.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/sincronico/index.html b/files/es/glossary/sincronico/index.html new file mode 100644 index 0000000000..cfe10edd6f --- /dev/null +++ b/files/es/glossary/sincronico/index.html @@ -0,0 +1,24 @@ +--- +title: Sincrónico +slug: Glossary/Sincronico +tags: + - Glosario + - Mecánicas + - Web + - WebMechanics +translation_of: Glossary/Synchronous +--- +

Sincrónico se refiere a la comunicación en tiempo real donde cada lado recibe (y si es necesario, procesa y responde) mensajes instantáneamente (o lo más cerca posible a instantáneamente).

+ +

Un ejemplo humano es el teléfono — durante una llamada telefónica tiendes a responder a la otra persona inmediatamente.

+ +

Muchos comandos de programación son también sincrónicos — por ejemplo cuando escribes en una calculadora, el entorno te devolverá el resultado instantáneamente, a menos que lo programes para no hacerlo.

+ +

Aprende más

+ +

Referencias técnicas

+ + diff --git a/files/es/glossary/sisd/index.html b/files/es/glossary/sisd/index.html new file mode 100644 index 0000000000..d3d89df4c1 --- /dev/null +++ b/files/es/glossary/sisd/index.html @@ -0,0 +1,20 @@ +--- +title: SISD +slug: Glossary/SISD +tags: + - Arquitectura + - Glosario + - SISD +translation_of: Glossary/SISD +--- +

SISD son las siglas de Single Instruction/Single Data la cual es una {{Interwiki("wikipedia","Flynn%27s_taxonomy","clasificación de arquitecturas")}}. En las arquitecturas SISD, un único procesador ejecuta una única instrucción sobre un único punto de la memoria.

+ +

En contraposición {{Glossary("SIMD")}} es una arquitectura que permite realizar una operación sobre distintos puntos de memoria.

+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/es/glossary/sistema_gestion_contenidos/index.html b/files/es/glossary/sistema_gestion_contenidos/index.html new file mode 100644 index 0000000000..e4a67f504b --- /dev/null +++ b/files/es/glossary/sistema_gestion_contenidos/index.html @@ -0,0 +1,18 @@ +--- +title: Sistema de gestión de contenidos +slug: Glossary/Sistema_gestion_contenidos +tags: + - CMS + - Glosario + - Sistema de gestión de contenidos +translation_of: Glossary/CMS +--- +

Un sistema de gestión de contenidos o CMS es un programa informático que permite a los usuarios publicar, organizar, cambiar o eliminar diferentes tipos de contenido como texto, imágenes incrustadas, video, audio y código interactivo.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/sld/index.html b/files/es/glossary/sld/index.html new file mode 100644 index 0000000000..f578f2dda0 --- /dev/null +++ b/files/es/glossary/sld/index.html @@ -0,0 +1,20 @@ +--- +title: SLD +slug: Glossary/SLD +translation_of: Glossary/SLD +--- +

Un dominio de nivel secundario, o SLD (Second Level Domain) es el nombre que se encuentra antes del dominio de nivel primario, o TLD (Top Level Domain).

+ +

Por ejemplo, en el dominio mozilla.org, mozilla es el dominio de nivel secundario del TLD .org.

+ +

Un nombre de dominio no está limitado a un TLD y a un SLD. Se pueden crear subdominios adicionales para proporcionar información adicional sobre las diferentes funciones de un servidor o para delimitar áreas bajo el mismo dominio. Por ejemplo, www es un subdominio muy común, que indica que el dominio apunta a un servidor web.

+ +

Otro ejemplo es el de developer.mozilla.org, el subdominio developer es utilizado para especificar que el subdominio contiene la sección para desarrolladores del sitio web de Mozilla.

+ +

Aprender más

+ +

General knowledge

+ + diff --git a/files/es/glossary/sloppy_mode/index.html b/files/es/glossary/sloppy_mode/index.html new file mode 100644 index 0000000000..528f12aa36 --- /dev/null +++ b/files/es/glossary/sloppy_mode/index.html @@ -0,0 +1,22 @@ +--- +title: Modo poco riguroso — Sloppy +slug: Glossary/Sloppy_mode +tags: + - CodingScripting + - Glosario + - JavaScript + - Scripting + - Sloppy +translation_of: Glossary/Sloppy_mode +--- +

{{Glossary("ECMAScript")}} 5 y versiones posteriores permiten que los scripts opten por un nuevo {{jsxref("Strict_mode", "Modo estricto", "", 1)}}, que modifica la semántica de JavaScript de varias formas para mejorar su capacidad de recuperación y facilitar la comprensión de lo que sucede cuando hay problemas.

+ +

El modo normal, no estricto de JavaScript a veces se denomina sloppy mode — modo poco riguroso. Esta no es una designación oficial, pero es probable que la encuentres si pasas tiempo haciendo código JavaScript serio.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/slug/index.html b/files/es/glossary/slug/index.html new file mode 100644 index 0000000000..6f83d97ed2 --- /dev/null +++ b/files/es/glossary/slug/index.html @@ -0,0 +1,17 @@ +--- +title: Slug +slug: Glossary/Slug +tags: + - Comunidad + - Slug + - URL + - Web +translation_of: Glossary/Slug +--- +

Un "slug" es un identificador único parte de una dirección web, típicamente al final de una "URL". por ejemplo, en el contexto de MDN (página actual), el "slug" es la parte del url después de "<locale>/docs/" es decir "Glossary/Slug" 

+ +

Ver también

+ + diff --git a/files/es/glossary/smtp/index.html b/files/es/glossary/smtp/index.html new file mode 100644 index 0000000000..3a3591cd0e --- /dev/null +++ b/files/es/glossary/smtp/index.html @@ -0,0 +1,33 @@ +--- +title: SMTP +slug: Glossary/SMTP +tags: + - Colaboración + - Compartiendo + - Glosario + - Infraestructura + - Principiante +translation_of: Glossary/SMTP +--- +

SMTP (Protocolo de Transferencia de Correo Simple por sus siglas en inglés) es un protocolo utilizado para enviar un nuevo correo. Como POP3 y NNTP, es un protocolo dirigido por estado de máquina.

+ +

El protocolo es relativamente simple. Las complicaciones principales incluyen soportar varios mecanismos de autenticación (GSSAPI, CRAM-MD5, NTLM, MSN, AUTH LOGIN, AUTH PLAIN, etc.), manejo de respuestas de error, y retroceder cuando los mecanismos de autenticación fallan (p. ej., el servidor asegura que soporta un mecanismo, pero no).

+ + diff --git a/files/es/glossary/sql/index.html b/files/es/glossary/sql/index.html new file mode 100644 index 0000000000..ada00ed61d --- /dev/null +++ b/files/es/glossary/sql/index.html @@ -0,0 +1,25 @@ +--- +title: SQL +slug: Glossary/SQL +tags: + - BBDD + - Glosario + - Sql +translation_of: Glossary/SQL +--- +

SQL por sus siglas en inglés significa Lenguaje de Consulta Estructurada (Structured Query Language), es un lenguaje de programación diseñado para actualizar, obtener, y calcular información en bases de datos relacionales.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Aprende SQL

+ + diff --git a/files/es/glossary/string/index.html b/files/es/glossary/string/index.html new file mode 100644 index 0000000000..39b3429257 --- /dev/null +++ b/files/es/glossary/string/index.html @@ -0,0 +1,22 @@ +--- +title: String +slug: Glossary/String +tags: + - Cadena de caracteres + - Glosario + - Principiante + - String +translation_of: Glossary/String +--- +

En cualquier lenguaje de programación, un string es una secuencia de {{Glossary("character","caracteres")}} usado para representar el texto.

+ +

En {{Glossary("JavaScript","JavaScript")}}, un String es uno de los {{Glossary("Primitivo", "valores primitivos")}} y el objeto {{jsxref("String")}} es un {{Glossary("wrapper","envoltorio")}} alrededor de un String primitivo.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/svg/index.html b/files/es/glossary/svg/index.html new file mode 100644 index 0000000000..59eff7e338 --- /dev/null +++ b/files/es/glossary/svg/index.html @@ -0,0 +1,33 @@ +--- +title: SVG +slug: Glossary/SVG +translation_of: Glossary/SVG +--- +

Gráficos vectoriales escalables (del inglés Scalable Vector Graphics) o SVG es un formato de imagen vectorial 2D basado en una sintaxis de {{Glossary("XML")}} .

+ +

{{Glossary("W3C")}} comenzó a trabajar en SVG a finales de la década de 1990, pero SVG solo se hizo popular cuando {{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9 salió con soporte para SVG. Todos los principales {{Glossary("browser","navegadores")}} ahora son compatibles con SVG.

+ +

Basado en una sintaxis de {{Glossary("XML")}}, SVG se puede diseñar con {{Glossary("CSS")}} e interactuar usando {{Glossary("JavaScript")}}. HTML5 ahora permite la inserción directa de {{Glossary("Tag","etiquetas")}} SVG en un documento {{Glossary("HTML")}}.

+ +

Como formato de imagen vectorial, los gráficos SVG pueden escalarse infinitamente, lo que los hace inestimables en {{Glossary("responsive design")}}, ya que puede crear elementos de interfaz y gráficos que se adaptan a cualquier tamaño de pantalla. SVG también proporciona un útil conjunto de herramientas, como recorte, enmascaramiento, filtros y animaciones.

+ +

Aprender más

+ +

Conocimientos generales

+ + + +

Aprendiendo SVG

+ + + +

Información técnica

+ + diff --git a/files/es/glossary/svn/index.html b/files/es/glossary/svn/index.html new file mode 100644 index 0000000000..a3be18dc2a --- /dev/null +++ b/files/es/glossary/svn/index.html @@ -0,0 +1,24 @@ +--- +title: SVN +slug: Glossary/SVN +tags: + - Colaboración + - Glosario +translation_of: Glossary/SVN +--- +

Apache Subversion (SVN) es un sistema ({{Glossary("SCM")}}) de código abierto de control de almacenamiento. Permite a los desarrolladores mantener un historial de modificaciones de texto y código. Aunque SVN también puede manejar archivos binarios, no recomendamos su utilización para tales archivos.

+ +

Saber más

+ +

Conocimientos generales

+ + + +

Véase tambiém

+ + diff --git a/files/es/glossary/symbol/index.html b/files/es/glossary/symbol/index.html new file mode 100644 index 0000000000..1c1a6632e6 --- /dev/null +++ b/files/es/glossary/symbol/index.html @@ -0,0 +1,21 @@ +--- +title: Symbol +slug: Glossary/Symbol +tags: + - Glosario + - JavaScript + - Principiante +translation_of: Glossary/Symbol +--- +

Un Symbol es un tipo de dato primitivo en cuyos casos son únicos e inmutables. En algunos lenguajes de programación son también llamados atoms(átomos).

+ +

En JavaScript, Symbol es uno de los {{Glossary("Primitivo", "valores primitivos")}} y el objeto de Symbol es un {{Glossary("Wrapper", "envoltorio")}} alrededor de un Symbol primitivo.

+ +

Aprender más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/symmetric-key_cryptography/index.html b/files/es/glossary/symmetric-key_cryptography/index.html new file mode 100644 index 0000000000..4677afd8c3 --- /dev/null +++ b/files/es/glossary/symmetric-key_cryptography/index.html @@ -0,0 +1,18 @@ +--- +title: Criptografía de clave simétrica +slug: Glossary/Symmetric-key_cryptography +translation_of: Glossary/Symmetric-key_cryptography +--- +

 

+ +

 

+ +

La criptografía de clave simétrica es un término utilizado para los algoritmos criptográficos que utilizan la misma clave para el cifrado y el descifrado. La clave se suele llamar "clave simétrica" o "clave secreta".

+ +

Esto generalmente se contrasta con {{Glossary ("public-key cryptography","criptografía de clave pública")}} en el que las claves se generan en pares, y la transformación realizada por una clave solo se puede revertir utilizando la otra clave.

+ +

Los algoritmos de clave simétrica son seguros y altamente eficientes cuando se usan de manera adecuada, de modo que pueden usarse para cifrar grandes cantidades de datos sin tener un efecto negativo en el rendimiento.

+ +

La mayoría de los algoritmos de clave simétrica actualmente en uso son cifrados de bloque: esto significa que cifran los datos bloque por bloque. El tamaño de cada bloque está fijado y determinado por el algoritmo: por ejemplo, {{Glossary ("AES","AES")}} utiliza bloques de 16 bytes. Los cifrados de bloque siempre se utilizan con un modo, que especifica cómo cifrar de forma segura los mensajes que son más largos que el tamaño de bloque. Por ejemplo, AES es un cifrado, mientras que CTR, CBC y GCM son todos modos. El uso de un modo inapropiado, o el uso de un modo incorrecto, puede socavar completamente la seguridad proporcionada por el cifrado subyacente.

+ +

 

diff --git a/files/es/glossary/tag/index.html b/files/es/glossary/tag/index.html new file mode 100644 index 0000000000..69193d7643 --- /dev/null +++ b/files/es/glossary/tag/index.html @@ -0,0 +1,24 @@ +--- +title: Etiqueta +slug: Glossary/Tag +tags: + - HTML + - etiqueta +translation_of: Glossary/Tag +--- +

En {{Glossary("HTML")}} una etiqueta es usada para crear un {{Glossary("elemento")}}.  El nombre de un elemento HTML es el nombre utilizado entre paréntesis angulares así como la etiqueta <p> para el párrafo.  Tenga en cuenta que el nombre de la etiqueta de cierre está precedido por un carácter de barra inclinada, </p>, y que en los elementos vacíos la etiqueta final no es necesaria ni permitida. Si no se mencionan atributos, se utilizan valores por defecto en cada caso. 

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/tcp/index.html b/files/es/glossary/tcp/index.html new file mode 100644 index 0000000000..5e5d566fa2 --- /dev/null +++ b/files/es/glossary/tcp/index.html @@ -0,0 +1,27 @@ +--- +title: TCP +slug: Glossary/TCP +tags: + - Datos + - Glosario + - Infraestructura + - Protocolo de Control de Transmisión + - TCP + - red +translation_of: Glossary/TCP +--- +

TCP (Protocolo de Control de Transmisión por sus siglas en inglés) es un importante protocolo de red que permite que dos hosts (anfitriones) se conecten e intercambien flujos de datos. TCP garantiza la entrega de datos y paquetes en el mismo orden en que se enviaron. Vint Cerf y Bob Kahn, quienes eran científicos de DARPA en ese momento, diseñaron TCP en la década de los 70s.

+ +

El rol de TCP es garantizar que los paquetes se entreguen de forma confiable y sin errores. TCP tiene control de concurrencia, lo que significa que las solicitudes iniciales serán pequeñas, ha medida que estas crecen, lo hacen hasta los niveles de ancho de banda que pueden soportar las computadoras, servidores y redes.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/textocifrado/index.html b/files/es/glossary/textocifrado/index.html new file mode 100644 index 0000000000..65315ab297 --- /dev/null +++ b/files/es/glossary/textocifrado/index.html @@ -0,0 +1,19 @@ +--- +title: Texto Cifrado +slug: Glossary/TextoCifrado +tags: + - Cryptography + - Glossary + - Privacy + - Security +translation_of: Glossary/Ciphertext +--- +

En {{glossary("Cryptography", "Criptografía")}}, un texto cifrado es un mensaje codificado que transmite información pero no es legible a menos que se {{glossary("decryption","descifre")}} con el {{glossary("cipher", "algoritmo criptográfico")}} correcto y el secreto correcto (generalmente una {{glossary("key","clave")}}), reproduciendo el {{glossary("cleartext", "texto simple")}} original. La seguridad de un texto cifrado, y por lo tanto el secreto de la información contenida, depende de usar un cifrado seguro y mantener la clave en secreto.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/textosimple/index.html b/files/es/glossary/textosimple/index.html new file mode 100644 index 0000000000..2c76ac8212 --- /dev/null +++ b/files/es/glossary/textosimple/index.html @@ -0,0 +1,14 @@ +--- +title: Texto Simple +slug: Glossary/TextoSimple +tags: + - Cryptography + - Glossary + - Security +translation_of: Glossary/Plaintext +--- +

Texto simple se refiere a la información que se está utilizando como entrada para un {{Glossary("algorithm", "algoritmo")}} de {{Glossary("encryption","cifrado")}}, o para el {{Glossary("ciphertext", "texto cifrado")}} que se ha descifrado.

+ +

Con frecuencia se usa indistintamente con el término texto claro, que se refiere de manera más general a cualquier información, como un documento de texto, una imagen, etc., que no se haya cifrado y que un humano o una computadora puedan leer sin procesamiento adicional.

+ +

 

diff --git a/files/es/glossary/three_js/index.html b/files/es/glossary/three_js/index.html new file mode 100644 index 0000000000..5fffb5b91e --- /dev/null +++ b/files/es/glossary/three_js/index.html @@ -0,0 +1,21 @@ +--- +title: Three js +slug: Glossary/Three_js +tags: + - JavaScript + - Lenguaje de programación + - Scripting de Código + - buscador + - three.js +translation_of: Glossary/Three_js +--- +

three.js es un motor {{Glossary("WebGL")}} basado en {{Glossary("JavaScript")}} que puede ejecutar juegos con GPU y otras aplicaciones con gráficos directamente desde el {{Glossary("browser")}} 

+ +

La biblioteca three.js proporciona muchas funciones y {{Glossary("API","APIs")}} para dibujar escenas 3D en su navegador. 

+ +

Conocimientos Generales

+ + diff --git "a/files/es/glossary/tipado_din\303\241mico/index.html" "b/files/es/glossary/tipado_din\303\241mico/index.html" new file mode 100644 index 0000000000..c8ee61a087 --- /dev/null +++ "b/files/es/glossary/tipado_din\303\241mico/index.html" @@ -0,0 +1,24 @@ +--- +title: Tipado Dinámico +slug: Glossary/Tipado_dinámico +tags: + - Código + - Glosario + - LenguajeDeProgramación +translation_of: Glossary/Dynamic_typing +--- +

Los lenguajes de tipado dinámico son aquellos (como {{glossary("JavaScript")}}) donde el intérprete asigna a las {{glossary("variable","variables")}} un {{glossary("tipo")}} durante el tiempo de ejecución basado en su {{glossary("valor")}} en ese momento.

+ +

Ver más

+ +

Conoce sobre el tema

+ + + +

Conocimientos generales

+ + diff --git "a/files/es/glossary/tipificaci\303\263n_est\303\241tica/index.html" "b/files/es/glossary/tipificaci\303\263n_est\303\241tica/index.html" new file mode 100644 index 0000000000..161ab31c61 --- /dev/null +++ "b/files/es/glossary/tipificaci\303\263n_est\303\241tica/index.html" @@ -0,0 +1,18 @@ +--- +title: Tipificación estática +slug: Glossary/Tipificación_estática +tags: + - CodingScripting + - Glossary + - Type +translation_of: Glossary/Static_typing +--- +

Un lenguaje de tipo estático es un lenguaje (como Java, C, o C++) en donde los tipos de variables se conocen en tiempo de compilación. En la mayoria de estos lenguajes, los tipos deben ser expresamente indicados por el programador; en otros casos (como en OCaml), la inferencia de tipos permite al programador no indicar sus tipos de variables.

+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/es/glossary/truthy/index.html b/files/es/glossary/truthy/index.html new file mode 100644 index 0000000000..bc1dccbace --- /dev/null +++ b/files/es/glossary/truthy/index.html @@ -0,0 +1,41 @@ +--- +title: Truthy +slug: Glossary/Truthy +tags: + - CodingScripting + - Glosario + - JavaScript +translation_of: Glossary/Truthy +--- +

En {{Glossary("JavaScript")}}, un valor verdadero es un valor que se considera  true/verdadero cuando es evaluado en un contexto {{Glossary("Booleano")}}. Todos los valores son verdaderos a menos que se definan como {{Glossary("Falso", "falso")}} (es decir, excepto false, 0, "", null, undefined, y NaN).

+ +

{{Glossary("JavaScript")}} usa {{Glossary("Type_Conversion", "coerción")}} en los contextos Booleanos.

+ +

Ejemplos de valores verdaderos en JavaScript (los cuales se traducirán a verdaderos y por lo tanto ejecutarán el bloque condicional if):

+ +
if (true)
+if ({})
+if ([])
+if (42)
+if ("foo")
+if (new Date())
+if (-42)
+if (3.14)
+if (-3.14)
+if (Infinity)
+if (-Infinity)
+
+ +

Ver también

+ + + +
+
+

{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}

+
+
diff --git a/files/es/glossary/type/index.html b/files/es/glossary/type/index.html new file mode 100644 index 0000000000..cec8be233e --- /dev/null +++ b/files/es/glossary/type/index.html @@ -0,0 +1,21 @@ +--- +title: Type +slug: Glossary/Type +tags: + - CodingScripting + - Glosario + - JavaScript +translation_of: Glossary/Type +--- +

El tipo (type o data type) es una característica of una {{glossary("value", "valor")}} que afecta al tipo de datos que puede almacenar; por ejemplo, en JavaScript un {{domxref("Boolean")}} solo tiene valores true/false, mientras que un {{domxref("String")}} contiene cadenas de texto, un {{domxref("Number")}} contiene números de cualquier tipo, y así sucesivamente.

+ +

El tipo de datos de un valor también afecta a qué operaciones son válidas en ese valor. Por ejemplo, un entero puede multiplicarse por un entero, pero no por una cadena.

+ +

Saber más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/undefined/index.html b/files/es/glossary/undefined/index.html new file mode 100644 index 0000000000..f27d2dc702 --- /dev/null +++ b/files/es/glossary/undefined/index.html @@ -0,0 +1,15 @@ +--- +title: undefined +slug: Glossary/undefined +translation_of: Glossary/undefined +--- +

Un valor {{Glossary("primitivo")}} automáticamente asignado a las variables que solo han sido declarados o a los {{Glossary("Argument","argumentos")}} formales para los cuales no existe argumentos reales.

+ +

Aprender más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/unicode/index.html b/files/es/glossary/unicode/index.html new file mode 100644 index 0000000000..bbe4905def --- /dev/null +++ b/files/es/glossary/unicode/index.html @@ -0,0 +1,19 @@ +--- +title: Unicode +slug: Glossary/Unicode +tags: + - Infraestructura +translation_of: Glossary/Unicode +--- +

Unicode es un {{Glossary("Character set", "conjunto de caracteres")}} estándar que numera y define {{Glossary("Character", "caracteres")}} de diferentes idiomas, sistemas de escritura y símbolos. Al asignar un número a cada caracter, los programadores pueden crear {{Glossary("Character encoding", "codificaciones de caracteres")}}, para permitir que las computadoras almacenen, procesen y transmitan cualquier combinación de idiomas en el mismo archivo o programa.

+ +

Antes de Unicode, era difícil y propenso a errores mezclar idiomas en los mismos datos. Por ejemplo, un juego de caracteres almacenaría caracteres japoneses y otro almacenaría el alfabeto árabe. Si no estuviera claramente marcado qué partes de los datos estaban en qué juego de caracteres, otros programas y computadoras mostrarían el texto incorrectamente o lo dañarían durante el procesamiento. Si alguna vez has visto texto en el que caracteres como comillas entrecruzadas (“”) fueron reemplazadas por un galimatías como £, entonces has visto este problema, conocido como {{Interwiki("wikipedia", "Mojibake")}}.

+ +

La codificación de caracteres Unicode más común en la Web es {{Glossary("UTF-8")}}. Existen otras codificaciones, como UTF-16 o la obsoleta UCS-2, pero se recomienda UTF-8.

+ +

Aprende más

+ + diff --git a/files/es/glossary/uri/index.html b/files/es/glossary/uri/index.html new file mode 100644 index 0000000000..60606c7274 --- /dev/null +++ b/files/es/glossary/uri/index.html @@ -0,0 +1,20 @@ +--- +title: URI +slug: Glossary/URI +tags: + - Glosario + - Identificador Uniforme de Recursos +translation_of: Glossary/URI +--- +

Un URI (Identificador Uniforme de Recursos de sus siglas en inglés: Uniform Resource Identifier) es una cadena que se refiere a un recurso. Los más comunes son {{Glossary("URL","URLs")}}, que identifican el recurso dando su ubicación en la Web. {{Glossary("URN","URNs")}}, por el contrario, se refiere a un recurso por un nombre, en un espacio de nombres determinados, como el ISBN(International Standard Book Number) de un libro.

+ +

Aprende más

+ +

Conocimientos Generales

+ + diff --git a/files/es/glossary/url/index.html b/files/es/glossary/url/index.html new file mode 100644 index 0000000000..a8d13e75ab --- /dev/null +++ b/files/es/glossary/url/index.html @@ -0,0 +1,34 @@ +--- +title: URL +slug: Glossary/URL +tags: + - Glosario + - Infraestructura + - 'l10n:priority' +translation_of: Glossary/URL +--- +

La «Uniform Resource Locator» (URL o Localizadora Uniforme de Recursos en Español) es una cadena de texto que especifica dónde se puede encontrar un recurso (como una página web, una imagen o un video) en Internet.

+ +

En el contexto de {{Glossary("HTTP")}}, las URLs se denominan "dirección web" o "enlace". Tu {{Glossary("browser", "navegador")}} muestra las URLs en su barra de direcciones, por ejemplo: https://developer.mozilla.org — Algunos navegadores muestran solo la parte de una URL después de "//", es decir, el {{Glossary("Domain name", "Nombre de dominio")}}.

+ +

Las URLs también se pueden utilizar para la transferencia de archivos ({{Glossary("FTP")}}), correos electrónicos ({{Glossary("SMTP")}}) y otras aplicaciones.

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Aprende sobre esto

+ + + +

Especificación

+ + diff --git a/files/es/glossary/utf-8/index.html b/files/es/glossary/utf-8/index.html new file mode 100644 index 0000000000..1a714ad7ea --- /dev/null +++ b/files/es/glossary/utf-8/index.html @@ -0,0 +1,27 @@ +--- +title: UTF-8 +slug: Glossary/UTF-8 +tags: + - ASCII + - Caracter + - Caractères + - Codificación + - CodingScripting + - Glosario + - HTML + - JavaScript + - Utf-8 +translation_of: Glossary/UTF-8 +--- +

UTF-8 (UCS Transformation Format 8) es la {{Glossary("Character encoding", "Codificación de caracteres")}} más común en la red. El número de bytes que representan un carácter pueden ser desde uno hasta cuatro. UTF-8 es retrocompatible con {{Glossary("ASCII")}} y puede representar cualquier carácter Unicode estandar.

+ +

Los primeros 128 carácteres UTF-8 se ajustan a los 128 primeros carácteres ASCII, lo cual significa que los textos escritos en ASCII son válidos en UTF-8. El resto de caracteres usan de dos a cuatro bytes. Cada byte reserva unos bits para albergar información sobre la codificación. Como los caracteres que no son ASCII necesitan más de un byte cuando son almacenados, corren el riesgo de corromperse si estos bytes son separados y no se vuelven a juntar.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/ux/index.html b/files/es/glossary/ux/index.html new file mode 100644 index 0000000000..e2cf73b793 --- /dev/null +++ b/files/es/glossary/ux/index.html @@ -0,0 +1,22 @@ +--- +title: UX +slug: Glossary/UX +tags: + - Accessibility + - Composing + - Design + - Glossary + - Navigation +translation_of: Glossary/UX +--- +

UX es un acrónimo de User eXperience. Es el estudio de la interacción entre usuarios y un sistema. Su objetivo es hacer que un sistema sea fácil de interactuar desde el punto de vista del usuario.

+ +

El sistema puede ser cualquier tipo de producto o aplicación con el que un usuario final deba interactuar. Los estudios de UX realizados en una página web, por ejemplo, pueden demostrar si es fácil para los usuarios entender la página, navegar a diferentes áreas y completar tareas comunes, y dónde dichos procesos podrían tener menos fricciones.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/validador/index.html b/files/es/glossary/validador/index.html new file mode 100644 index 0000000000..8b105054a9 --- /dev/null +++ b/files/es/glossary/validador/index.html @@ -0,0 +1,19 @@ +--- +title: Validador +slug: Glossary/Validador +tags: + - Glosario + - Principiante + - Seguridad +translation_of: Glossary/Validator +--- +

Un validador es un programa que comprueba errores de sintaxis en el código. Las validadores pueden ser creados para cualquier formato o lenguaje, pero en este contexto se habla de herramientas que comprueban {{Glossary("HTML")}}, {{Glossary("CSS")}}, y {{Glossary("XML")}}.

+ +

Saber más

+ +

Conocimiento general

+ + diff --git a/files/es/glossary/valor/index.html b/files/es/glossary/valor/index.html new file mode 100644 index 0000000000..d0d2cc2bf8 --- /dev/null +++ b/files/es/glossary/valor/index.html @@ -0,0 +1,19 @@ +--- +title: Valor +slug: Glossary/Valor +tags: + - CodingScripting + - Glosario +translation_of: Glossary/Value +--- +
{{jsSidebar}}
+ +

En el contexto de datos o un objeto {{Glossary("Wrapper", "wrapper")}} alrededor de esos datos, el valor es el {{Glossary("Primitive", "valor primitivo")}} que contiene el contenedor de objetos. En el contexto de una {{Glossary("Variable", "variable")}} o {{Glossary("Property", "property")}}, el El valor puede ser primitivo o {{Glossary("Object reference", "Referencia de objeto")}}.

+ +

Aprende más

+ +

Conocimientos generales

+ + diff --git a/files/es/glossary/variable/index.html b/files/es/glossary/variable/index.html new file mode 100644 index 0000000000..416e848ef2 --- /dev/null +++ b/files/es/glossary/variable/index.html @@ -0,0 +1,27 @@ +--- +title: Variable +slug: Glossary/Variable +tags: + - CodingScripting + - Glosario + - JavaScript +translation_of: Glossary/Variable +--- +
{{jsSidebar}}
+ +

Una variable es una ubicación nombrada para almacenar un {{Glossary("Value", "valor")}}. De esta manera se puede acceder a un valor impredecible por medio de un nombre predeterminado.

+ +

Aprende más

+ +

Conocimientos generales

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/vendor_prefix/index.html b/files/es/glossary/vendor_prefix/index.html new file mode 100644 index 0000000000..5b29860b61 --- /dev/null +++ b/files/es/glossary/vendor_prefix/index.html @@ -0,0 +1,66 @@ +--- +title: Vendor Prefix +slug: Glossary/Vendor_Prefix +tags: + - CodingScripting + - Glossary +translation_of: Glossary/Vendor_Prefix +--- +

 

+ +

Los proveedores de navegadores a veces agregan prefijos a las propiedades de CSS experimentales o no estándar y las API de JavaScript, por lo que los desarrolladores pueden experimentar con nuevas ideas mientras que, en teoría, evitan que se confíe en sus experimentos y luego rompan el código de los desarrolladores web durante el proceso de estandarización. Los desarrolladores deben esperar para incluir la propiedad sin prefijar hasta que se estandarice el comportamiento del navegador.

+ +
+

Los proveedores de navegadores están trabajando para dejar de usar los prefijos de proveedores para funciones experimentales. Los desarrolladores web los han estado utilizando en sitios web de producción, a pesar de su naturaleza experimental. Esto ha hecho que sea más difícil para los proveedores de navegadores garantizar la compatibilidad y trabajar en nuevas características; También ha sido perjudicial para los navegadores más pequeños que terminan obligados a agregar prefijos de otros navegadores para cargar sitios web populares.

+ +

Últimamente, la tendencia es agregar características experimentales detrás de las banderas o preferencias controladas por el usuario, y crear especificaciones más pequeñas que puedan alcanzar un estado estable mucho más rápidamente.

+
+ +

Prefijos CSS

+ +

Section

+ +

Los principales navegadores usan los siguientes prefijos:

+ + + +

Prefijos API

+ +

Históricamente, los proveedores también han usado prefijos para las API experimentales. Si una interfaz completa es experimental, entonces el nombre de la interfaz tiene un prefijo (pero no las propiedades o los métodos incluidos). Si se agrega una propiedad o método experimental a una interfaz estandarizada, entonces el método o la propiedad individual tiene el prefijo.

+ +

Prefijos de interfaz

+ +

Los prefijos para los nombres de interfaz son en mayúsculas:

+ + + +

Prefijos de propiedad y método

+ +

Los prefijos para propiedades y métodos son minúsculas:

+ + + +

Aprende más

+ +

Conocimientos generales

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Glossary")}}
diff --git a/files/es/glossary/viewport/index.html b/files/es/glossary/viewport/index.html new file mode 100644 index 0000000000..972ecce1a6 --- /dev/null +++ b/files/es/glossary/viewport/index.html @@ -0,0 +1,23 @@ +--- +title: Viewport +slug: Glossary/Viewport +tags: + - Codificación + - Glosario +translation_of: Glossary/Viewport +--- +

Un viewport representa la región poligonal (normalmente rectangular) en gráficas de computación que está siendo visualizada en ese instante. En términos de navegadores web, se refiere a la parte del documento que usted está viendo, la cual es actualmente visible en su ventana (o la pantalla, si el documento está siendo visto en modo pantalla completa). El contenido fuera del viewport no es visible en la pantalla hasta que sea desplazado dentro de él.

+ +

La porción del viewport que se encuentra visible en ese momento se denomina visual viewport. Este puede ser más pequeño que el viewport de diseño, por ejemplo, cuando el usuario hace uso del zoom. El viewport de diseño (layout viewport), sigue siendo el mismo, pero el visual viewport se empequeñeció.

+ +

Aprende más

+ +

Conocimiento General

+ + diff --git a/files/es/glossary/wcag/index.html b/files/es/glossary/wcag/index.html new file mode 100644 index 0000000000..07ceecee56 --- /dev/null +++ b/files/es/glossary/wcag/index.html @@ -0,0 +1,38 @@ +--- +title: WCAG +slug: Glossary/WCAG +tags: + - Accesibilidad + - Glosario + - Pautas Web + - WCAG +translation_of: Glossary/WCAG +--- +

Las Pautas de Accesibilidad para el Contenido Web (WCAG, por us siglas en inglés) son una recomendación publicada por el grupo {{Glossary("WAI","Web Accessibility Initiative")}} en el {{Glossary("W3C")}}. Describen un conjunto de pautas para hacer que el contenido sea accesible principalmente para personas con discapacidades, pero también para dispositivos de recursos limitados, como los teléfonos móviles.

+ +

WCAG 2.0, que reemplazó a WCAG 1.0, se publicó como una recomendación del W3C el 11 de diciembre de 2008. Consta de 12 directrices organizadas en 4 principios (perceptibles, operables, comprensibles y robustos) y cada guía tiene criterios de éxito comprobables.

+ +

 

+ +

WCAG uses three levels of conformance:

+ + + +

Saber más

+ +

Conocimientos generales

+ + + +

Technical knowledge

+ + diff --git a/files/es/glossary/webkit/index.html b/files/es/glossary/webkit/index.html new file mode 100644 index 0000000000..d22e8889d6 --- /dev/null +++ b/files/es/glossary/webkit/index.html @@ -0,0 +1,32 @@ +--- +title: WebKit +slug: Glossary/WebKit +tags: + - Glosario + - HTML + - Intro + - LGPL + - Navegador + - Web + - WebKit +translation_of: Glossary/WebKit +--- +

WebKit es un framework (marco o interfaz) que proporciona páginas web "bien formadas" basadas es su lenguaje de marcado. El principal navegador que utiliza este framework es Safari, aunque también lo hacen muchos otros navegadores web para dispositivos móviles (debido a que WebKit es muy portable y customizable).

+ +

WebKit comenzó como una copia del KHTML de KDE y sus librerías KJS, pero desde entonces ha habido una gran multitud de particulares y empresas que han contribuido en su desarrollo (incluyendo KDE, Apple, Google, y Nokia).

+ +

WebKit es una marca registrada de Apple, y es distribuido bajo la licencia BSD. Por otro lado, dos de sus más importantes componentes están bajo la licencia LGPL: la libería de renderizado HTML de WebCore y el motor JavaScriptCore.

+ +

Para saber más...

+ +

Cultura General

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/websockets/index.html b/files/es/glossary/websockets/index.html new file mode 100644 index 0000000000..296e1d29fa --- /dev/null +++ b/files/es/glossary/websockets/index.html @@ -0,0 +1,37 @@ +--- +title: WebSockets +slug: Glossary/WebSockets +tags: + - Connection + - Glossary + - Infrastructure + - Networking + - Protocols + - Web + - WebSocket +translation_of: Glossary/WebSockets +--- +

WebSocket es un  {{Glossary("protocolo")}} que permite establecer conexiones  {{Glossary("TCP")}} entre el {{Glossary("Server", "servidor")}} y el cliente, permitiendo así el transporte de datos en cualquier momento.

+ +

Cualquier cliente o servidor de aplicaciones puede usar WebSockets, pero principalmente es usado por {{Glossary("Navegador", "browsers")}} y el servidor web. WebScoket permite enviar datos al cliente sin la necesidad de recibir ningún tipo de notificación, permitiendo la actualización dinámica del contenido.

+ +

Saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + + +

Aprende sobre WebSockets

+ + diff --git a/files/es/glossary/webvtt/index.html b/files/es/glossary/webvtt/index.html new file mode 100644 index 0000000000..60cc60da0d --- /dev/null +++ b/files/es/glossary/webvtt/index.html @@ -0,0 +1,29 @@ +--- +title: WebVTT +slug: Glossary/WebVTT +tags: + - Audio + - Glosario + - Video + - Web + - WebVTT +translation_of: Glossary/WebVTT +--- +

WebVTT (Pistas de Texto para Videos Wev) es una especificación del {{Glossary("W3C")}} para un formato de archivo para crear pistas de texto en combinación con el elemento HTML {{HTMLElement("track")}}.

+ +

WebVTT files provide metadata that is time-aligned with audio or video content like captions or subtitles for video content, text video descriptions, chapters for content navigation, and more.

+ +

Para saber más

+ +

Conocimiento general

+ + + +

Referencia técnica

+ + diff --git a/files/es/glossary/whatwg/index.html b/files/es/glossary/whatwg/index.html new file mode 100644 index 0000000000..12504c51ec --- /dev/null +++ b/files/es/glossary/whatwg/index.html @@ -0,0 +1,30 @@ +--- +title: WHATWG +slug: Glossary/WHATWG +tags: + - Community + - Glossary + - HTML + - HTML5 + - WHATWG + - Web +translation_of: Glossary/WHATWG +--- +

EL ( Grupo de trabajo de tecnología de aplicaciones de hipertexto web) por sus siglas en inglés WHATWG es una organización que mantinene y desarrolla  {{Glossary("HTML")}} y  {{Glossary("API", "APIs")}} para las aplicaciones Web. Antiguos empleados de Apple, Mozilla y Opera establecieron el WHATWG en el 2004.

+ +

Los editores de especificación en el WHATWG investigan y recopilan comentarios para los documentos de especificación.  El grupo también tiene un pequeño comité de miembros invitados y autorizados para anular o reemplazar editores de especificación. Puedes unirte como un colaborador  registrándote en la lista de correo.

+ +

De acuerdo con su sitio web , WHATWG es una respuesta al {{Glossary("W3C", "W3C's")}} lento progreso en los estándares Web, especialmente HTML,  que el W3C dejó de desarrollar para concentrarse en {{Glossary("XHTML")}}.

+ +
El WHATWG mantiene especifiaciones para {{Glossary("HTML")}}, {{Glossary("DOM")}}, y {{Glossary("JavaScript")}}.
+ +
 
+ +

Learn more

+ +

General Knowledge

+ + diff --git a/files/es/glossary/world_wide_web/index.html b/files/es/glossary/world_wide_web/index.html new file mode 100644 index 0000000000..1119be16aa --- /dev/null +++ b/files/es/glossary/world_wide_web/index.html @@ -0,0 +1,42 @@ +--- +title: World Wide Web +slug: Glossary/World_Wide_Web +tags: + - Glosario + - Intro + - Principiante + - WWW + - Web +translation_of: Glossary/World_Wide_Web +--- +

La World Wide Web —comúnmente conocida como WWW, W3, o la Web— es un sistema interconectado de páginas web públicas accesibles a través de {{Glossary("Internet")}} (art. en inglés). La Web no es lo mismo que el Internet: la Web es una de las muchas aplicaciones construidas sobre Internet.

+ +

Tim Berners-Lee propuso la arquitectura de lo que es conocido como la World Wide Web. Él creó el primer servidor web ({{Glossary("Server","server")}}) (art. en inglés), el primer navegador de internet ({{Glossary("Browser","browser")}}) (art. en inglés), y la primera página web, en su computadora del laboratorio de investigación de física del CERN en 1990. En 1991, anunció su creación en el grupo de noticias alt.hypertext, marcando con esto el momento en que la Web se hizo pública.

+ +

El sistema que nosotros conocemos hoy como "la Web" tiene varios componentes:

+ + + +

Enlazar, o conectar recursos a través de {{Glossary("Hyperlink","hyperlinks")}} (hiperligas o hiperenlaces) (art. en inglés), es un concepto que define la Web, contribuyendo a su identidad como una colección de documentos conectados.

+ +

Tan pronto como inventó la Web, Tim Berners-Lee fundó el Consorcio de la World Wide Web ({{Glossary("W3C")}} World Wide Web Consortium) (art. en inglés) para estandarizar y desarrollar el futuro de la Web. Este consorcio está compuesto por los principales grupos de interés de la Web, como son los desarrolladores de navegadores de internet, entidades de gobierno, investigadores, y universidades. Su misión incluye la educación y la superación.

+ +

Aprenda más

+ +

Más información en

+ + + +

General knowledge

+ + diff --git a/files/es/glossary/wrapper/index.html b/files/es/glossary/wrapper/index.html new file mode 100644 index 0000000000..e6ecc8caa6 --- /dev/null +++ b/files/es/glossary/wrapper/index.html @@ -0,0 +1,31 @@ +--- +title: Wrapper +slug: Glossary/Wrapper +tags: + - Envoltorio + - Glosario + - Wrapper +translation_of: Glossary/Wrapper +--- +

En lenguajes de programación como JavaScript, un wrapper o envoltorio es una función que llama a una o varias funciones,  unas veces únicamente por convenio y otras para adaptarlas con el objetivo de hacer una tarea ligeramente diferente.

+ +

Por ejemplo, las librerías SDK de AWS son un ejemplo de wrappers.

+ +

Saber más

+ +

Conocimientos generales

+ +

{{Interwiki("wikipedia", "Wrapper function")}} on Wikipedia

+ + diff --git a/files/es/glossary/xform/index.html b/files/es/glossary/xform/index.html new file mode 100644 index 0000000000..6590baacdd --- /dev/null +++ b/files/es/glossary/xform/index.html @@ -0,0 +1,14 @@ +--- +title: XForm +slug: Glossary/XForm +translation_of: Glossary/XForms +--- +

XForms es una norma para la creación de formularios web y el procesamiento de datos de formulario en formato  {{glossary("XML")}}. Actualmente ningún navegador soporta Xforms—sugerimos en su lugar utilizar los formularios en HTML5 forms.

+ +

Saber más

+ +

Referencia técnica

+ + diff --git a/files/es/glossary/xml/index.html b/files/es/glossary/xml/index.html new file mode 100644 index 0000000000..af9c06c40d --- /dev/null +++ b/files/es/glossary/xml/index.html @@ -0,0 +1,30 @@ +--- +title: XML +slug: Glossary/XML +tags: + - Bases de datos + - Datos + - Glosario + - HTML + - Lenguaje + - Tags + - Web + - XML + - 'l10n:priority' + - lenguaje de marcado +translation_of: Glossary/XML +--- +

XML (eXtensible Markup Language en español Lenguaje de Marcado eXtensible) es un lenguaje de marcado genérico especificado por la W3C. La industria de tecnologías de la información (IT Industry) utiliza muchos lenguajes de descripción de datos (data-description language) que están basados en XML.

+ +

Las etiquetas XML ó tags son muy similares a las de HTML, pero en el caso de XML, es mucho más flexible debido a que permite a los usuarios definir sus propias etiquetas. En este sentido XML actúa como un metalenguaje (debido a esto, puede ser usado para definir otros lenguajes como por ejemplo RSS). Además de esto, cabe señalar que HTML es un lenguaje de presentación, miestras que XML es un lenguaje descripción de datos.

+ +

Esto significa que XML tiene una mayor aplicación; por ejemplo, a través de XML los servicios web pueden intercambiar peticiones y respuestas.

+ +

Para saber más...

+ +

General knowledge

+ + diff --git "a/files/es/gr\303\241ficos_png_animados/index.html" "b/files/es/gr\303\241ficos_png_animados/index.html" new file mode 100644 index 0000000000..e392dc7c70 --- /dev/null +++ "b/files/es/gr\303\241ficos_png_animados/index.html" @@ -0,0 +1,548 @@ +--- +title: Gráficos PNG animados +slug: Gráficos_PNG_animados +tags: + - Firefox 3 + - páginas_a_traducir +translation_of: Mozilla/Tech/APNG +--- +

+ +

Autores

+ +

La especificación APNG fué escrita por:

+ + + +

 

+ +

Descripción

+ +

APNG es una extensión del formato (PNG) Portable Network Graphics que agrega soporte para imágenes animadas. Se pretende que sea una simple sustitución de las imágenes animadas que tradicionalmente han utilizado el formato GIF, añadiendo soporte para imágenes de 24 bits y de 8-bit de transparencia. APNG es una alternativa simple a MNG, proporcionando una especificación adecuada para el uso común de imágenes animadas en Internet.

+ +

APNG es compatible con PNG y cualquier decodificador de formato PNG puede ignorar los fragmentos de APNG y mostrar la imagen codificada.

+ +

Terminología

+ +

Imagen por defecto:se especifica en el fragmento 'IDAT' y es mostrada por decodificadores que no soporten APNG.

+ +

Canvas is the area on the output device on which the frames are to be displayed. Los contenidos de los canvas no esta necesariamente disponible para el decodificador. As per the PNG Specification, if a 'bKGD' chunk exists it may be used to fill the canvas if there is no preferrable background.

+ +

The output buffer is a pixel array with dimensions specified by the width and height parameters of the PNG 'IHDR' chunk. Conceptually, each frame is constructed in the output buffer before being composited onto the canvas. The contents of the output buffer are available to the decoder. The corners of the output buffer are mapped to the corners of the canvas.

+ +

Fully transparent black means red, green, blue and alpha components are all set to zero.

+ +

For purposes of chunk descriptions, an unsigned int shall be a 32-bit unsigned integer in network byte order limited to the range 0 to (2^31)-1; an unsigned short shall be a 16-bit unsigned integer in network byte order with the range 0 to (2^16)-1; and a byte shall be an 8-bit unsigned integer with the range 0 to (2^8)-1.

+ +

Manejo de errores

+ +

APNG is designed to allow incremental display of frames before the entire image has been read. This implies that some errors may not be detected until partway through the animation. It is strongly recommended that when any error is encountered decoders should discard all subsequent frames, stop the animation, and revert to displaying the default image. A decoder which detects an error before the animation has started should display the default image. An error message may be displayed to the user if appropriate.

+ +

Estructura

+ +

An APNG stream is a normal PNG stream as defined in the PNG Specification, with three additional chunk types describing the animation and providing additional frame data.

+ +

To be recognized as an APNG, an 'acTL' chunk must appear in the stream before any 'IDAT' chunks. The 'acTL' structure is described below.

+ +

Conceptually, at the beginning of each play the output buffer must be completely initialized to a fully transparent black rectangle, with width and height dimensions from the 'IHDR' chunk.

+ +

The default image may be included as the first frame of the animation by the presence of a single 'fcTL' chunk before 'IDAT'. Otherwise, the default image is not part of the animation.

+ +

Subsequent frames are encoded in 'fdAT' chunks, which have the same structure as 'IDAT' chunks, except preceded by a sequence number. Information for each frame about placement and rendering is stored in 'fcTL' chunks. The full layout of 'fdAT' and 'fcTL' chunks is described below.

+ +

The boundaries of the entire animation are specified by the width and height parameters of the PNG 'IHDR' chunk, regardless of whether the default image is part of the animation. The default image should be appropriately padded with fully transparent pixels if extra space will be needed for later frames.

+ +

Each frame is identical for each play, therefore it is safe for applications to cache the frames.

+ +

Chunk sequence numbers

+ +

The 'fcTL' and 'fdAT' chunks have a 4 byte sequence number. Both chunk types share the sequence. The purpose of this number is to detect (and optionally correct) sequence errors in an Animated PNG, since the PNG specification does not impose ordering restrictions on ancillary chunks.

+ +

The first 'fcTL' chunk must contain sequence number 0, and the sequence numbers in the remaining 'fcTL' and 'fdAT' chunks must be in order, with no gaps or duplicates.

+ +

The tables below illustrates the use of sequence numbers for images with more than one frame and more than one 'fdAT' chunk.

+ +

If the default image is the first frame:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sequence numberChunk
(none)'acTL'
0'fcTL' (first frame)
(none)'IDAT' (first frame -- used as the default image)
1'fcTL' (second frame)
2'fdAT' (first 'fDAT' for second frame)
3'fdAT' (second 'fDAT' for second frame)
......
+ +

If the default image is not part of the animation:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sequence numberChunk
(none)'acTL'
(none)'IDAT' (default image)
0'fcTL' (first frame)
1First 'fdAT' for first frame
2Second 'fDAT' for first frame
......
+ +

Decoders must treat out-of-order APNG chunks as an error. APNG-aware PNG editors should restore them to correct order using the sequence numbers.

+ +

'acTL': The Animation Control Chunk

+ +

The 'acTL' chunk is an ancillary chunk as defined in the PNG Specification. It must appear before the first 'IDAT' chunk within a valid PNG stream.

+ +

The 'acTL' chunk contains:

+ + + + + + + + + + + + + + + + + + + + + + +
Byte offsetField nameField typeDescription
0num_framesunsigned intThe number of frames in the APNG.
4num_playsunsigned intThe number of times to loop this APNG. 0 indicates infinite looping.
+ +

num_frames indicates the total number of frames in the animation. This must equal the number of 'fcTL' chunks. 0 is not a valid value. 1 is a valid value for a single-frame APNG. If this value does not equal the actual number of frames it should be treated as an error.

+ +

num_plays indicates the number of times that this animation should play; if it is 0, the animation should play indefinitely. If nonzero, the animation should come to rest on the final frame at the end of the last play.

+ +

'fcTL': The Frame Control Chunk

+ +

The 'fcTL' chunk is an ancillary chunk as defined in the PNG Specification. It must appear before the 'IDAT' or 'fdAT' chunks of the frame to which it applies, specifically:

+ + + +

Exactly one 'fcTL' chunk is required for each frame.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Byte offsetField nameField typeDescription
0sequence_numberunsigned intSequence number of the animation chunk, starting with 0.
4widthunsigned intWidth of the following frame.
8heightunsigned intHeight of the following frame.
12x_offsetunsigned intX position at which to render the following frame.
16y_offsetunsigned intY position at which to render the following frame.
20delay_numunsigned shortFrame delay fraction numerator.
22delay_denunsigned shortFrame delay fraction denominator.
24dispose_opbyteType of frame area disposal to be done after rendering this frame.
25blend_opbyteType of frame area rendering for this frame.
+ +

The frame must be rendered within the region defined by x_offset, y_offset, width, and height. The offsets must be non-negative, the dimensions must be positive, and the region may not fall outside of the default image.

+ +

Constraints on frame regions:

+ + + +

The delay_num and delay_den parameters together specify a fraction indicating the time to display the current frame, in seconds. If the denominator is 0, it is to be treated as if it were 100 (that is, delay_num then specifies 1/100ths of a second). If the the value of the numerator is 0 the decoder should render the next frame as quickly as possible, though viewers may impose a reasonable lower bound.

+ +

Frame timings should be independent of the time required for decoding and display of each frame, so that animations will run at the same rate regardless of the performance of the decoder implementation.

+ +

dispose_op specifies how the output buffer should be changed at the end of the delay (before rendering the next frame).

+ +

Valid values for dispose_op are:

+ + + + + + + + + + + + + + + + + + + + + + + + +
ValueConstantDescription
0APNG_DISPOSE_OP_NONENo disposal is done on this frame before rendering the next; the contents of the output buffer are left as is.
1APNG_DISPOSE_OP_BACKGROUNDThe frame's region of the output buffer is to be cleared to fully transparent black before rendering the next frame.
2APNG_DISPOSE_OP_PREVIOUSThe frame's region of the output buffer is to be reverted to the previous contents before rendering the next frame.
+ +

If the first 'fcTL' chunk uses a dispose_op of APNG_DISPOSE_OP_PREVIOUS it should be treated as APNG_DISPOSE_OP_BACKGROUND.

+ +

blend_op<code> specifies whether the frame is to be alpha blended into the current output buffer content, or whether it should completely replace its region in the output buffer.

+ +

Valid values for <code>blend_op are:

+ + + + + + + + + + + + + + + + + + + +
ValueConstantDescription
0APNG_BLEND_OP_SOURCEAll color components of the frame, including alpha, overwrite the current contents of the frame's output buffer region.
1APNG_BLEND_OP_OVERThe frame should be composited onto the output buffer based on its alpha, using a simple OVER operation as described in the Alpha Channel Processing section of the Extensions to the PNG Specification, Version 1.2.0. Note that the second variation of the sample code is applicable.
+ +

Note that for the first frame the two blend modes are functionally equivalent due to the clearing of the output buffer at the beginning of each play.

+ +

The 'fcTL' chunk corresponding to the default image, if it exists, has these restrictions:

+ + + +

As noted earlier, the output buffer must be completely initialized to fully transparent black at the beginning of each play. This is to ensure that each play of the animation will be identical. Decoders are free to avoid an explicit clear step as long as the result is guaranteed to be identical. For example, if the default image is included in the animation, and uses a blend_op of APNG_BLEND_OP_SOURCE, clearing is not necessary because the entire output buffer will be overwritten.

+ +

'fdAT': The Frame Data Chunk

+ +

The 'fdAT' chunk has the same purpose as an 'IDAT' chunk. It has the same structure as an 'IDAT' chunk, except preceded by a sequence number.

+ +

At least one 'fdAT' chunk is required for each frame. The compressed datastream is then the concatenation of the contents of the data fields of all the 'fdAT' chunks within a frame. When decompressed, the datastream is the complete pixel data of a PNG image, including the filter byte at the beginning of each scanline, similar to the uncompressed data of all the 'IDAT' chunks. It utilizes the same bit depth, color type, compression method, filter method, interlace method, and palette (if any) as the default image.

+ + + + + + + + + + + + + + + + + + + + + + +
Byte offsetField nameField typeDescription
0sequence_numberunsigned intSequence number of the animation chunk, starting from 0.
4frame_dataX bytesFrame data for this frame.
+ +

Each frame inherits every property specified by any critical or ancillary chunks before the first 'IDAT' in the file, except the width and height, which come from the 'fcTL' chunk.

+ +

If the PNG 'pHYs' chunk is present, the APNG images and their x_offset and y_offset values must be scaled in the same way as the main image. Conceptually, such scaling occurs while mapping the output buffer onto the canvas.

+ +

Revisions to this specification

+ +

From 0.1

+ + + + + + + + + +

From 0.2

+ + + + + + + + + +

From 0.3

+ + + + + + + + + + + + + + + + + + + + + +

From 0.4

+ + + + + + + + + + + +

From 0.5

+ + + + + +

From 0.6

+ + + + + + + + + +

From 0.7

+ + + + + +

From 0.8

+ + + + + +

From 0.9

+ + + +

From 0.10

+ + + +

Test Encoder and Sample Images

+ +

Sample images are available from the APNG implementation page at http://littlesvr.ca/apng/

+ +

An encoder (open source) is available in versions of the Gecko engine starting with version 1.9 alpha 4.

+ +

An application (open source) using the Mozilla encoder to assemble APNGs available here: http://littlesvr.ca/apng/apngedit.html

+ +

See also

+ + diff --git "a/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" "b/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" new file mode 100644 index 0000000000..b4510b3822 --- /dev/null +++ "b/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/index.html" @@ -0,0 +1,23 @@ +--- +title: Guía para el desarrollador de agregados para Firefox +slug: Guía_para_el_desarrollador_de_agregados_para_Firefox +--- +


+{{ Next("Firefox addons developer guide/Introduction to Extensions") }}

+

Capítulo 1: Introducción a las extensiones

+

Capítulo 2: Tecnologías usadas para el desarrollo de extensiones
+

+

Chapter 3: Introduction to XUL—How to build a more intuitive UI

+

Chapter 4: Using XPCOM—Implementing advanced processes

+

Chapter 5: Let's build a Firefox extension 

+

Chapter 6: Firefox extensions and XUL applications

+

License and authors

+

{{ Next("Guía para el desarrollador de agregados para Firefox/Introducción a las extensiones") }}

+

{{ languages( { "de" : "de/Firefox_addons_developer_guide", "en" : "en/Firefox_addons_developer_guide" }) }}
+

+


+

diff --git "a/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" "b/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" new file mode 100644 index 0000000000..b925716b8b --- /dev/null +++ "b/files/es/gu\303\255a_para_el_desarrollador_de_agregados_para_firefox/introducci\303\263n_a_las_extensiones/index.html" @@ -0,0 +1,192 @@ +--- +title: Introducción a las extensiones +slug: >- + Guía_para_el_desarrollador_de_agregados_para_Firefox/Introducción_a_las_extensiones +--- +

{{ Draft() }}

+ +

{{ PreviousNext("Guía para el desarrollador de agregados para Firefox", "Guía para el desarrollador de agregados para Firefox/Tecnologías usadas en el desarrollo de extensiones") }}

+ +
Nota: Si desea contribuir en este documento, por favor siga las directivas de la página de Contribución.
+ +

Este documento fue creado por Hideyuki Emura y fue originalmente publicado en japonés para la Firefox Developers Conference Summer 2007. Emura-san es un coautor de Firefox 3 Hacks (O'Reilly Japan, 2008.)

+ +

Introducción

+ +

Si estás leyendo esta guía, probablemente ya has usado Firefox. Quizás la primera vez que miraste Firefox, te has sorprendido de ver que tiene una estructura mucho más simple que otros exploradores de amplias funcionalidades, como Opera o Safari.

+ +

¿Qué funcionalidades son consideradas estándar en los exploradores web en estos días? Tal vez cosas como controles de pestañas de "granulado fino", gestos con el ratón, botones y barras de herramientas amplias, un lector de fuentes web, integración con una variedad de aplicaciones web, o herramientas sofisticadas para asistir el diseño web. Pero no nos hemos propuesto crear un explorador todo-en-uno que pueda satisfacer a todos.

+ +

En su lugar, Firefox puede soportar esas funcionalidades a través de extensiones. El explorador básico está limitado a funcionalidades básicas, así es algo con lo que un principiante se siente cómodo, pero los usuarios que quieren ir más allá pueden instalar extensiones.

+ +

Acerca de las extensiones

+ +

Manejo usando el administrador de complementos

+ +

El administrador de complementos de Firefox es una excelente forma de manejar las extensiones, y es un gran avance es facilidad de uso.

+ +

+ +

El administrador de complementos se encarga de las siguientes tareas:

+ + + +

Comodidades para el entorno de desarrollo

+ +

Inicialmente, no había disponible una documentacíon adecuada, y los desarrolladores de extensiones quedaban en gran medida a su suerte1; sin embargo, ahora hay una considerable acumulación de conocimientos.

+ +

Como Firefox y sus extensiones están diseñados para soportar múltiples idiomas, llegan excelentes ideas de todo el mundo, y pueden ser rápidamente localizadas por cualquier interesado.

+ +

Esto disminuye el umbral tanto para el uso como para el desarrollo de extesiones; de hecho, combinado con el rápido crecimiento de la popularidad de Firefox, ha creado un bucle de retroalimentación positiva, con e número de usuarios y desarrolladores de extensiones aumentando explosivamente —actualmente hay más de 7000 extensiones y temas publicados en el sitio de Complementos para Firefox (https://addons.mozilla.org).

+ +

Qué puedes hacer con extensiones

+ +

Let's look at what features extensions can add, and some actual examples of extensions.

+ +

Extensiones de una sola función

+ +

{{ TODO("Update this") }}.

+ +

These are relatively simple extensions that add a single feature.

+ +
+
Text Link
+
Makes it so that double-clicking on an unlinked URL follows that URL.
+
Undo Closed Tabs Button
+
Adds a toolbar button to re-open the most recently closed tabs to the History menu.
+
+ +
+
1211576231.png
+
+ +
+
Locationbar
+
Separa el dominio y la ruta de la URL en la barra de localización para una lectura más fácil.
+
locationbar.png
+
+ +

Feature enhancing extensions

+ +

{{ TODO("Update this") }}.

+ +

Estas extensiones amplían características ya disponibles en Firefox.

+ +
+
Tab Mix Plus
+
Ofrece configuración detallada sobre las pestañas.
+
PrefBar
+
Ofrece acceso a numerosas preferencias sobre la barra de herramientas.PrefBar.png
+
NoScript
+
Enables and disables JavaScript execution on a site-by-site basis.
+
+ +

Extensiones de integración con aplicaciones web

+ +

{{ TODO("Update this") }}.

+ +

The use the APIs of certain web applications to provide certain pieces of information.

+ +

Forecastfox.png

+ +

New feature extensions

+ +

{{ TODO("Update this") }}.

+ +

Extensions can add completely new features to Firefox. This class of extension requires a greater level of knowledge and programming ability.

+ +
+
GreaseMonkey
+
UserChrome.js
+
Both of these provide an environment for running user scripts (JavaScript) in Firefox itself, where the scripts can target specific websites.
+
+ +
+
Adblock Plus
+
Blocks the display of unwanted advertisements on web pages.
+
All-in-One Gestures
+
Adds mouse-gesture functionality.
+
+ +

Application level extensions

+ +

{{ TODO("Update this") }}.

+ +

These are sophisticated extensions that can be considered full-scale applications in their own right, essentially using Firefox as the development platform.

+ +

Firebug.gif

+ +

One-trick gag extensions

+ +

{{ TODO("Update this") }}.

+ +

There are a number of one-trick gag extensions that aren’t very useful.

+ +

Shiitake Mushroom (1).png

+ +

This is a very brief survey of a few extensions, but there are many other unique extensions available.

+ +

Tabla 1: Métodos avanzados de personalización para Firefox

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Método de personalización¿Funciona en sitios web?¿Funciona en Firefox?
Hojas de estilo de usuario (cambia la apariencia a través de CSS) +

Sí; puedes cambiar el archivo userContent.css, o usar la extensión Stylish.

+ 		+

Sí; puedes cambiar el archivo userChrome.css,o usar la extensión Stylish.

+
Usar scripts (cambia la apariencia y funcionalidad a través de JavaScript) +

Sí; puedes usar la extensión GreaseMonkey o "bookmarklets."

+ 		+

Sí; puedes cambiar userChrome.js para agregar funcionalidades a través de JavaScript.

+
Extensiones (pueden hacer cualquier cosa)SíSí
Temas (cambian la apariencia del explorador)NoSí
+ +

Construyamos una extensión

+ +

La table 1 muestra varias opciones de personalización disponibles para los usuarios en Firefox. Tienen opciones de personalización flexibles, usando CSS en hojas de estilo de usuario y JavaScript/DOM en scripts de usuario (depende de Stylish, GreaseMonkey, y userChrome.js).

+ +

Además de CSS y JavaScript, las extensiones pueden tomar ventaja de las tecnologías XUL y XPCOM para funciones más sofisticadas. Los temas, que alteran la apariencia de Firefox, son una clase de complemento.

+ +

Para crear una extensión, neesitas una idea y un poco de habilidades de programación. Los siguientes capítulos explican en detalle las técnicas de escritura de extensiones de algunos de los principales autores de extensiones japoneses. Te alentamos a que pruebes suerta con ellas.

+ +
+
1 Uno de los autores de esta edición especial, Piro, es mundialmente conocido como uno de los desarrolladores originales.
+
+ +
+
+ +

{{ PreviousNext("Guía para el desarrollador de agregados para Firefox", "Guía para el desarrollador de agregados para Firefox/Tecnologías usadas en el desarrollo de extensiones") }}

diff --git "a/files/es/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" "b/files/es/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" new file mode 100644 index 0000000000..1c76c3bd88 --- /dev/null +++ "b/files/es/gu\303\255a_para_la_migraci\303\263n_a_cat\303\241logo/index.html" @@ -0,0 +1,176 @@ +--- +title: Guía para la migración a catálogo +slug: Guía_para_la_migración_a_catálogo +tags: + - NeedsContent + - Places +--- +

{{ Fx_minversion_header(3) }} +Este documento es para los desarrolladores de aplicaciones y extensiones que tienen código los API de los marcadores y de el historial es Firefox 2 y anteriores y que están migrando a Firefox 3. +

+

Visión general

+

Catálogo es un conjunto de API para la administración del historial de navegación y los meta datos de las URI. Esto incluye historial, marcadores, pestañas, favicons y anotaciones. Existen dos modelos de identidad en el sistema: URI e identificadores únicos para elementos del sistema de marcadores. Algunos de los API están centrados en URI, mientras que otros usan identificadores de elementos. La firma del API y su contexto, generalmente dejan claro qué modelo se requiere. +

+

Marcadores

+

El servicio del toolkit marcadores es {{ Source("toolkit/components/places/public/nsINavBookmarksService.idl", "nsINavBookmarksService") }}: +

+
var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"].
+                getService(Ci.nsINavBookmarksService);
+
+

EL almacenamiento de los marcadores es jerárquico, sirviendo de modelo a las carpetas y su contenido. Varias carpetas significativas están disponibles como atributos de {{ Interface("nsINavBookmarksService") }}. +

+ +

Nota: Este documento cubre el servicio de tolkit Catálogo. Sin embargo, los desarrolladores de Firefox pueden aprovechar diversos API de ayuda que son específicos del navegador:

+ +

Creación

+

Crear un Marcador +

+
// create an nsIURI for the URL to be bookmarked.
+var bookmarkURI = Cc["@mozilla.org/network/io-service;1"].
+                  getService(Ci.nsIIOService).
+                  newURI("http://www.mozilla.com", null, null);
+
+var bookmarkId = bookmarks.insertBookmark(
+  bookmarks.toolbarFolder, // El Id de la carpeta donde se guardará el marcador.
+  bookmarkURI,             // La URI del marcador - un objeto nsIURI.
+  bookmarks.DEFAULT_INDEX, // La posición del marcador en su carpeta padre.
+  "my bookmark title");    // El título del marcador.
+
+

Crear una carpeta +

+
var folderId = bookmarks.createFolder(
+  bookmarks.toolbarFolder, // La id de la carpeta donde se guardará la nueva carpeta.
+  "my folder title",       // El título de la nueva carpeta.
+  bookmarks.DEFAULT_INDEX);    // La posición de la nueva carpeta en su carpeta padre.
+
+

Crear un separador +

+
var separatorId = bookmarks.insertSeparator(
+  bookmarks.toolbarFolder, // La id de la carpeta donde será puesto el separador.
+  bookmarks.DEFAULT_INDEX);    // La posición del separador en su carpeta padre.
+
+

Crear un marcador dinámico +

+
var IOService = Cc["@mozilla.org/network/io-service;1"].
+                  getService(Ci.nsIIOService);
+
+var siteURI = IOService.newURI("http://www.mozilla.com", null, null);
+var feedURI = IOService.newURI("http://www.mozilla.org/news.rdf", null, null);
+
+var livemarks = Cc["@mozilla.org/browser/livemark-service;2"].
+                getService(Ci.nsILivemarkService);
+
+livemarks.createLivemark(bookmarks.toolbarFolder, // La id de la carpeta donde será almacenado el marcador dinámico
+  "My Livemark Title",        // El título del marcador dinámico
+  siteURI,                    // La URI del sitio. Un objeto nsIURI.
+  feedURI,                    // La URI del Canal. Un objeto nsIURI.
+  bookmarks.DEFAULT_INDEX);   // La posición del marcador dinámico en su carpeta padre.
+
+

Lectura

+

Propiedades de los elementos

+

Para todos los elementos: +

+ +

Para marcadores: +

+ +

Para carpetas: +

+ +

Contenido de las carpetas

+

Las consultas en Catálogo se ejecutan a través del servicio principal de historial. El ejemplo siguiente, muestra como listar el contenido de una carpeta de Marcadores y cómo acceder a las propiedades de cada elemento. +

+
var history = Cc["@mozilla.org/browser/nav-history-service;1"].
+              getService(Ci.nsINavHistoryService);
+var query = history.getNewQuery();
+query.setFolders([myFolderId], 1);
+
+var result = history.executeQuery(query, history.getNewQueryOptions());
+
+// La propiedad raíz del resultado de una consulta es un objeto representando la carpeta que especificaste.
+var folderNode = result.root;
+
+// Abre la carpeta y actúa reiterativamente con su contenido.
+folderNode.containerOpen = true;
+for (var i=0; i < folderNode.childCount; ++i) {
+  var childNode = folderNode.getChild(i);
+
+  // Algunas propiedades del elemento.
+  var title = childNode.title;
+  var id = childNode.itemId;
+  var type = childNode.type;
+
+  // Algunas acciones específicas del tipo.
+  if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_URI) {
+
+    var uri = childNode.uri;
+
+  }
+  else if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_FOLDER) {
+
+    childNode.QueryInterface(Ci.nsINavHistoryContainerResultNode);
+    childNode.containerOpen = true;
+    // ahora puedes actuar reiterativamente sobre el 'hijo' de una carpeta.
+
+  }
+}
+
+

Hay documentación sobre otros tipos de nodo disponible en IDL. +

+

Búsqueda

+

Actualización

+

Para todos los elementos: +

+ +

Para marcadores: +

+ +

Borrado

+ +

Observar

+

Importar/Exportar en formato HTML

+

Respaldo/Restauración

+

Nuevo

+ +

Historia

+

Agregar

+

Consultas

+

Observar

+

Nuevo

+
+
+{{ languages( { "es": "es/Lugares/Gu\u00eda_para_migraci\u00f3n_con_lugares", "fr": "fr/Guide_de_migration_vers_Places", "ja": "ja/Places/Migration_Guide", "en": "en/Places_migration_guide" } ) }} diff --git a/files/es/herramientas/borrador/index.html b/files/es/herramientas/borrador/index.html new file mode 100644 index 0000000000..462db27e62 --- /dev/null +++ b/files/es/herramientas/borrador/index.html @@ -0,0 +1,56 @@ +--- +title: Borrador +slug: Herramientas/Borrador +tags: + - Desarrollo_Web + - 'Desarrollo_Web:Herramientas' + - Herramientas +translation_of: Archive/Tools/Scratchpad +--- +
+ Aunque el equipo de localización de Mozilla Hispano trabaja para mantener esta página continuamente actualizada, es posible que la página en inglés tenga contenidos nuevos que no aparecen registrados aquí. Si quieres ver el artículo en inglés, haz clic en Idiomas y selecciona English en el menú desplegable.
+

La herramienta Borrador integrada en Firefox 6 y en versiones posteriores proporciona un entorno de práctica para experimentar con el código JavaScript. Puedes escribir código que puede interactuar con el contenido de una página web y probar así las ideas antes de cambiar a tus herramientas de desarrollo web habituales para escribir el código final. O puedes utilizarlo para retocar y jugar con los sitios web existentes.

+

A diferencia de la Consola web, que está diseñada para la interpretación de una sola línea de código a la vez, Borrador te permite editar grandes trozos de código JavaScript y después ejecutarlo de varias formas dependiendo de cómo desees utilizar el resultado.

+

Cómo usar Borrador

+

Para abrir la ventana de Borrador, ve al menú Desarrollador web (que es un submenú en el menú Herramientas en Mac) y, a continuación, selecciona Borrador. Esto abrirá una ventana del editor Borrador, que incluye un comentario que ofrece una breve información acerca de cómo usarlo. A partir de ahí, puedes ya empezar a escribir algo de código JavaScript para probar.

+

La ventana de Borrador tiene este aspecto (en Windows y Linux, también tienes la barra de menú allí, mientras que en Mac, la barra de menús está en la parte superior de la pantalla, como de costumbre):

+

scratchpad.png

+

En la parte inferior, aparece el ámbito de ejecución actual de tu código, en este caso, se trata de "Contenido", es decir, el contenido de la página actual. Consulta {{ anch ("Alcance de Borrador") }} si necesitas tener más detalles.

+
+ {{ gecko_callout_heading("10.0") }} +

Gecko 10.0 {{ geckoRelease("10.0") }} sustituyó el editor de Borrador por Orion, que proporciona subrayado de sintaxis, mejoras en la sangría y otras características. Además, el contenido de la ventana Borrador se guarda usando la función de restaurar sesión de Firefox, por lo que ahora es persistente en todos los reinicios de Firefox.

+
+

El menú Archivo ofrece opciones para guardar y cargar los fragmentos de código JavaScript, por lo que se puede reutilizar el código más tarde si lo deseas.

+

Ejecutar tu código

+

Una vez que hayas escrito el código, selecciona el código que deseas ejecutar y, a continuación, haz clic (o ve al menú Ejecutar en la barra de menús) y elige la forma en que deseas ejecutar el código. Hay tres opciones de ejecución disponibles.

+
+ Nota: si no seleccionas nada, se ejecutará todo el código en la ventana.
+

Ejecutar (Run)

+

Cuando eliges la opción Ejecutar, se ejecuta el código seleccionado. Esto es lo que utilizarías para ejecutar una función u otro código que manipula el contenido de tu página.

+

Inspeccionar (Inspect)

+

La opción Inspeccionar ejecuta el código al igual que la opción Ejecutar; sin embargo, después de que se devuelva el código, se abre un inspector de objetos para que puedas examinar el valor devuelto.

+

Por ejemplo, si introduces el código:

+
window
+
+

A continuación, seleccionas Inspeccionar, obtienes una ventana de inspector que puede ser algo así:

+

inspector.png

+

Mostrar (Display)

+

La opción Mostrar ejecuta el código seleccionado y, a continuación, inserta el resultado directamente en la ventana del editor Borrador como un comentario. Esta es una forma cómoda de mantener un registro de los resultados de las pruebas mientras se trabaja. También puedes utilizarlo como una calculadora, en un apuro, aunque si no tienes un programa de calculadora mejor, puedes tener problemas.

+

Limpiar

+

Puedes restablecer todas las variables seleccionando la opción "Restablecer variables" en el menú Ejecutar o en el menú contextual que aparece al hacer clic con el botón secundario en la ventana Borrador.

+

Escenarios de uso de Borrador

+

Hay muchas maneras en que Borrador puede resultar útil. Esta sección trata algunas de ellas.

+

Probar código nuevo

+

Borrador es especialmente útil para probar código nuevo en un entorno de navegador en vivo, puedes copiar en Borrador el código que estés depurando  y ejecutarlo, y luego ajustarlo hasta que funcione. Una vez que funcione, se copia en el archivo de código principal y ya está. En muchos casos, se puede escribir, depurar y probar el código sin tener que recargar la página.

+

Fragmentos de código reutilizables

+

La barra de menús de Borrador ofrece instrucciones o comandos para guardar y cargar el código JavaScript. Esta instalación se puede utilizar para tener a mano los bits de código JavaScript que utilizas a menudo. Por ejemplo, si estás trabajando en un sitio que utiliza peticiones AJAX para cargar los datos, puedes tener a mano fragmentos que llevan a cabo las operaciones de carga para probar o verificar los datos. Del mismo modo, puedes tener a mano las funciones de depuración útiles de uso general, tales como las funciones que vierten cierto tipo de información acerca del DOM.

+

Alcance de Borrador

+

El código que ejecutas en Borrador se ejecuta en un entorno limitado que tiene acceso a todo en tu página, pero no filtrará nuevas variables a la página. Si expresamente quieres poner las variables en tu página, puedes hacerlo poniéndolas en el objeto {{ domxref ("window") }}:

+
window.myVariable = value;
+
+

El nuevo valor window.myVariable, en este caso, es accesible para los scripts que se ejecutan en la página.

+
+ Nota: este entorno limitado funciona igual que la Consola web. Sin embargo, a diferencia de la Consola web, el Borrador te sigue de una pestaña a otra, el código que ejecutas en él siempre lo hace en la pestaña actual de la ventana del navegador en primer plano. Esto puede usarse, por ejemplo, para realizar la misma prueba en varios servidores.
+

Cómo usar Borrador para acceder a información interna de Firefox

+

Si estás trabajando en el propio Firefox, o en el desarrollo de complementos, puede que te resulte útil poder acceder a toda la información interna del navegador usando Borrador. Para ello, es necesario establecer la preferencia devtools.chrome.enabled a true usando about:config . Una vez que hayas hecho esto, el menú Entorno tiene la opción Navegador y una vez que se selecciona, tu ámbito es todo el navegador y no sólo el contenido de la página.

+

{{ languages( { "en" : "en/Tools/Scratchpad", "fr": "fr/Outils/Ardoise" } ) }}

diff --git a/files/es/herramientas/index.html b/files/es/herramientas/index.html new file mode 100644 index 0000000000..4cde340000 --- /dev/null +++ b/files/es/herramientas/index.html @@ -0,0 +1,13 @@ +--- +title: Herramientas +slug: Herramientas +tags: + - Herramientas + - para_revisar +--- +

 

+ +

Desarrollo web

Extensiones
Venkman
El depurador JavaScript proporciona un potente entorno de depuración de JavaScript para navegadores basados ​​en Mozilla.
Inspector DOM
Una herramienta de desarrollo utilizada para inspeccionar, examinar y modificar el DOM de documentos - normalmente páginas web o ventanas XUL.
Firebug
Integra una gran cantidad de herramientas de desarrollo para editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web ( detalles )
Web Developer
Agrega un menú y una barra de herramientas al navegador con varias herramientas de desarrollo web. ( detalles )
Aardvark
Revela los elementos DOM mientras se mueve el ratón/mouse sobre una página. ( detalles )
Más sobre Firefox Add-ons
Validadores
Lista de validadores
Software de creación
Herramientas de creación que cumplen con los estándares
HTMLTidy
Una herramienta para limpiar HTML

JavaScript

Borrador{{ gecko_minversion_inline ("6.0") }}
Un editor de texto integrado en Firefox que te permite editar y ejecutar código JavaScript.
Consola de errores
Venkman
JSLint
JSDoc
herramienta para la generación de documentación (generalmente HTML) a partir de los comentarios de código (similar a JavaDoc).

DOM

Inspector DOM
MODI
Mouseover DOM Inpector es un bookmarklet que te permite ver y manipular el DOM de una página web con sólo pasar el ratón/mouse por el documento.

Localización

Herramientas de localización y aprovechamiento

Gestión de árboles y ramas

cross-commit script

Herramientas de perfil de usuario

MXR (si utilizas vim, mxr-vim acelera el proceso)

DXR
+

Categorías

+

Interwiki Language Links

+

{{ languages( { "en": "en/Tools", "fr": "fr/Outils", "ja": "ja/Tools", "pl": "pl/Narz\u0119dzia" } ) }}

diff --git a/files/es/how_to_create_a_dom_tree/index.html b/files/es/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..25546a1704 --- /dev/null +++ b/files/es/how_to_create_a_dom_tree/index.html @@ -0,0 +1,130 @@ +--- +title: Cómo crear un DOM tree +slug: How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +

 

+

Esta página describe cómo usar el API DOM Core en JavaScript para crear o modificar objetos DOM. Es aplicable a todas las aplicaciones basadas en Gecko (como Mozilla Firefox) cuyo código tenga privilegios (como las extensiones) y a las que no (páginas web).

+

Creación dinámica de un DOM tree

+

Considere el siguiente documento XML:

+
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+

El W3C DOM API soportado por Mozilla, puede ser usado para crear una representación en memoria del documento anterior, como se ve a continuación:

+
var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+
+

Vea también el Capítulo DOM del Tutorial de XUL.

+

Se puede automatizar la creación de un DOM tree usando el JXON reverse algorithm (algoritmo inverso JXON) en asociación con la siguiente representación JSON:

+
{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+
+

¿Ahora qué?

+

Los DOM trees pueden ser invocados usando expresiones XPath, convertidos a cadenas de texto, salvados a un archivo local o remoto usando XMLSerializer (sin tener que convertirlo primero a una cadena de texto), Enviados mediante POST a un servidor web (via XMLHttpRequest), transformados usando XSLT, XLink, convertidos a un objeto JavaScript a tráves del  algoritmo JXON, etc.

+

Adicionalmente se puede hacer uso de los DOM trees para modelar los datos que no estén bien formados para RDF (o si sólo no prefieres usar RDF). Otra aplicación que puedes darle, se relaciona a XUL (que es XML), la UI (interfaz) de tu aplicación puede ser manipulada dinámicamente, descargada, subida, guardada, cargada, convertida, o transformada fácilmente.

+

Vea también

+ +

{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}

diff --git a/files/es/html/elemento/datalist/index.html b/files/es/html/elemento/datalist/index.html new file mode 100644 index 0000000000..2f94162678 --- /dev/null +++ b/files/es/html/elemento/datalist/index.html @@ -0,0 +1,7 @@ +--- +title: datalist +slug: HTML/Elemento/datalist +tags: + - HTML5 +--- +

Redirigir datalist

diff --git a/files/es/html/elemento/form/index.html b/files/es/html/elemento/form/index.html new file mode 100644 index 0000000000..dd039bead3 --- /dev/null +++ b/files/es/html/elemento/form/index.html @@ -0,0 +1,5 @@ +--- +title: form +slug: HTML/Elemento/form +--- +

a

diff --git a/files/es/html/elemento/section/index.html b/files/es/html/elemento/section/index.html new file mode 100644 index 0000000000..dc632fa052 --- /dev/null +++ b/files/es/html/elemento/section/index.html @@ -0,0 +1,177 @@ +--- +title: Section +slug: HTML/Elemento/section +--- +
+

DEFINICIÓN:

+
+ +

La etiqueta section proviene del idioma inglés y se traduce al español como sección.

+ +

 

+ +
+

ETIQUETAS: 

+
+ +

<section></section>

+ +

Genera una sección de contenido, en el cuál podemos ubicar dentro muchos otros tipos de sección (nav, article, aside,header,footer, etc).

+ +

 

+ +
+

ATRIBUTOS:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Atributo

+ 		+

Valor

+ 		+

Descripción

+
+

Genéricos

+
title TextoImplícitoTítulo consultivo del elemento.
style Declaraciones de estiloImplícitoInformación de estilo en línea.
id Un 'nombre'ImplícitoIdentificador único a nivel de documento.
class Lista de clases CSSimplícitoIdentificador a nivel de documento.
dir Uno de los siguientes: "ltr" o "rtl"ImplícitoDirección del texto.
lang Código de idiomaImplícitoInformación sobre el idioma.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
+

Específicos

+
Eventos: onload, onunload.
+

De transición

+
+

atributo

+ 		+

valor

+ 		+

descripción

+
background Una direcciónImplícitoDirección de la imagen que se usará como fondo.
bgcolor Un colorImplícitoColor del fondo.
text Un colorImplícitoColor del texto.
link Un colorImplícitoIndica el color inicial de los enlaces
alink Un colorImplícitoIndica el color de los enlaces cuando están activos.
vlink Un colorImplícitoIndica el color de los enlaces que han sido visitados.
+ +

Ejemplos

+ +

+   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+        "http://www.w3.org/TR/html4/strict.dtd">
+    <html>
+      <head>
+           <title>Documento html básico</title>
+      </head>
+
+      <body>
+
+        <section>
+          <article>
+             <p>Ejemplo de texto1</p>
+          </article>
+         <article>
+             <p>Ejemplo de texto2</p>
+          </article>
+        </section>
+
+        <section>
+         <article>
+             <p>Ejemplo de texto3 en un segundo artículo </p>
+          </article>
+       </section>
+      </body>
+    </html>
+
diff --git a/files/es/html/html5/forms_in_html5/index.html b/files/es/html/html5/forms_in_html5/index.html new file mode 100644 index 0000000000..a0e77ec827 --- /dev/null +++ b/files/es/html/html5/forms_in_html5/index.html @@ -0,0 +1,118 @@ +--- +title: Formularios en HTML5 +slug: HTML/HTML5/Forms_in_HTML5 +tags: + - Forms + - HTML + - HTML5 +--- +

{{ gecko_minversion_header("2") }}

+ +

Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programar y diseñar que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una experiencia mejor para los usuarios al permitir que los formularios tengan un comportamiento más consistente entre diferentes sitios web y al darle una devolución inmediata acerca de la información ingresada. También proveen esta experiencia a los usuarios que han deshabilitado javascript en sus navegadores.

+ +

Este documento describe los elementos nuevos o que han cambiado que están disponibles en Gecko/Firefox.

+ +

El elemento <input>

+ +

El elemento {{ HTMLElement("input") }} tiene nuevos valores para el atributo {{ htmlattrxref("type", "input") }}.

+ + + +

El elemento {{ HTMLElement("input") }} también tiene nuevos atributos:

+ + + +

El elemento <form>

+ +

El elemento {{ HTMLElement("form") }} tiene un nuevo atributo:

+ + + +

El elemento <datalist>

+ +

El elemento {{ HTMLElement("datalist") }} representa la lista de elementos {{ HTMLElement("option") }} como sugerencias cuando se llena un campo {{ HTMLElement("input") }}.

+ +

Puedes usar el atributo {{ htmlattrxref("list", "input") }} en un elemento {{ HTMLElement("input") }} para enlazar a un campo de ingreso específico con un elemento {{ HTMLElement("datalist") }} determinado.

+ +
<label>Superhéroe favorito</label>
+<input list="superheroes" name="list" />
+<datalist id="superheroes">
+    <option label="Iron Man" value="Iron Man">
+    <option label="The Hulk" value="The Hulk">
+</datalist>
+
+ +

El elemento <output>

+ +

El elemento {{ HTMLElement("output") }} representa el resultado de un cálculo.

+ +

Puedes usar el atributo {{ htmlattrxref("for", "output") }} para especificar una relación entre el elemento output y otros elementos en el documento que afectan el cálculo (por ejemplo, ingreso de datos o parámetros). El valor del atributo {{ htmlattrxref("for", "output") }} es una lista separada por espacios de IDs de otros elementos.

+ +

El atributo placeholder

+ +

El atributo {{ htmlattrxref("placeholder", "input") }} en elementos {{ HTMLElement("input") }} y {{ HTMLElement("textarea") }} provee una ayuda a los usuarios acerca de qué debe ser ingresado en el campo. El texto introducido en el placeholder no debe contener «enters» o saltos de línea.

+ +
<input type="email" id="user-email" placeholder="e.g. john.doe@mozilla.com" required/>
+
+ +

El atributo autofocus

+ +

El atributo autofocus te permite especificar que una parte del formulario debe tener foco para ingresar información cuando se carga la página, a menos que el usuario lo cambie, por ejemplo al escribir en otro lugar. Sólo un elemento del formulario en un documento puede tener el atributo autofocus, que es de tipo boolean. Este atributo puede ser aplicado a los elementos {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}. La excepción es que autofocus no puede ser aplicado a un elemento <input> si el atributo {{ htmlattrxref("type", "input") }} hidden está seleccionado (esto quiere decir, no se puede enfocar automáticamente un elemento escondido).

+ +
<input type="text" id="user" autofocus />
+
+ +

La propiedad label.control del DOM

+ +

La interface HTMLLabelElement DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento {{ HTMLElement("label") }} de HTML. La propiedad control devuelve el controlador etiquetado, es decir el controlador para quien está hecha la etiqueta, que está determinado por el atributo {{ htmlattrxref("for", "label") }} (si está definido) o por el primer elemento controlador descendiente.

+ +

Validación restringida

+ +

El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validación del lado del servidor, que todavía es necesaria por seguridad e integridad de la información, la validación del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la información ingresada.

+ +

Sintaxis de HTML para la validación restringida

+ +

Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.

+ + + +

Además, puedes prevenir la validación restringida especificando el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, o el atributo {{ htmlattrxref("formnovalidate", "button") }} en el elemento {{ HTMLElement("button") }} y en el elemento {{ HTMLElement("input") }} (cuando {{ htmlattrxref("type", "input") }} es submit o image). Estos atributos indican que el formulario no será validado cuando se envie.

+ +

API de validación restringida

+ +

Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente:

+ + diff --git a/files/es/html/html5/formularios_en_html5/index.html b/files/es/html/html5/formularios_en_html5/index.html new file mode 100644 index 0000000000..6e4cd130d6 --- /dev/null +++ b/files/es/html/html5/formularios_en_html5/index.html @@ -0,0 +1,44 @@ +--- +title: Formularios en HTML5 +slug: HTML/HTML5/Formularios_en_HTML5 +tags: + - HTML + - HTML5 + - formulários + - para_revisar +translation_of: Learn/HTML/Forms/HTML5_updates +--- +

{{ gecko_minversion_header("2") }}

+

Los elementos y atributos para formularios en HTML5 proveen un mayor grado de marcado semántico que en HTML4 y eliminan gran parte del tedioso trabajo de programación y diseño que se necesitaba en HTML4. Las funcionalidades de los formularios en HTML5 brindan una mejor experiencia para los usuarios al permitir que estos tengan un comportamiento más coherente entre diferentes sitios web y proporcionar una retroalimentación inmediata acerca de la información ingresada. Asimismo, proporcionan esta experiencia a los usuarios que han deshabilitado el javascript en sus navegadores.

+

Este documento describe los elementos nuevos o modificados que están disponibles en Gecko/Firefox.

+

El elemento <input>

+

El elemento {{ HTMLElement("input") }} tiene nuevos valores para el atributo {{ htmlattrxref("type", "input") }}.

+ +

El elemento {{ HTMLElement("input") }} también tiene nuevos atributos:

+ +

El elemento <form>

+

El elemento {{ HTMLElement("form") }} tiene un nuevo atributo:

+

El elemento <datalist>

+

El elemento {{ HTMLElement("datalist") }} representa la lista de elementos {{ HTMLElement("option") }} como sugerencias cuando se llena un campo {{ HTMLElement("input") }}.

+

Puedes usar el atributo {{ htmlattrxref("list", "input") }} en un elemento {{ HTMLElement("input") }} para enlazar a un campo de ingreso específico con un elemento {{ HTMLElement("datalist") }} determinado.

+

El elemento <output>

+

El elemento {{ HTMLElement("output") }} representa el resultado de un cálculo.

+

Puedes usar el atributo {{ htmlattrxref("for", "output") }} para especificar una relación entre el elemento output y otros elementos en el documento que afectan el cálculo (por ejemplo, ingreso de datos o parámetros). El valor del atributo {{ htmlattrxref("for", "output") }} es una lista separada por espacios de identificadores de otros elementos.

El atributo placeholder

+

El atributo {{ htmlattrxref("placeholder", "input") }} en elementos {{ HTMLElement("input") }} y {{ HTMLElement("textarea") }} proporciona una ayuda a los usuarios acerca de qué debe ingresarse en el campo. El texto introducido en el placeholder no debe contener retornos de carro o saltos de línea.

El atributo autofocus

+

El atributo {{ htmlattrxref("autofocus", "input") }} te permite especificar que una parte del formulario debe tener foco para ingresar información cuando se carga la página, a menos que el usuario lo cambie, por ejemplo al escribir en otro lugar. Sólo un elemento del formulario en un documento puede tener el atributo autofocus, que es booleano. Este atributo puede ser aplicado a los elementos {{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}. La excepción es que autofocus no puede aplicarse a un elemento <input> si el atributo {{ htmlattrxref("type", "input") }} hidden está seleccionado (es decir, no puede enfocar automáticamente un elemento escondido).

La propiedad label.control del DOM

+

La interface HTMLLabelElement DOM brinda una propiedad extra, sumadas a las propiedades que corresponden a los atributos del elemento {{ HTMLElement("label") }} de HTML. La propiedad control devuelve el controlador etiquetado, es decir, el controlador para el que está hecha la etiqueta, que está determinado por el atributo {{ htmlattrxref("for", "label") }} (si está definido) o por el primer elemento controlador descendiente.

Validación restringida

+

El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la validación del lado del servidor, que todavía es necesaria por seguridad e integridad de la información, la validación del lado del cliente puede brindar una experiencia de usuario mejor al darle al usuario una respuesta inmediata acerca de la información ingresada.

+

Si se ajusta el atributo title al elemento {{ HTMLElement("input") }}, esa cadena se mostrará en una ventana emergente de ayuda cuando falle la validación. Si title se ajusta a una cadena vacía, no se mostrará ninguna ventana emergente. Si el atributo title no se configura, en su lugar se mostrará el mensaje de validación estándar (como especifica el atributo {{ htmlattrxref("x-moz-errormessage") }} o llamando al método setCustomValidity()).

+
Note: la validación restringida no es compatible con los elementos {{ HTMLElement("button") }} en un formulario; si quieres aplicar estilo a un botón basado en la validez del formulario asociado, usa la seudoclase {{ cssxref(":-moz-submit-invalid") }}.
+

Sintaxis de HTML para la validación restringida

+

Los siguientes elementos de sintaxis de HTML5 pueden ser usados para restringir datos en el formulario.

+ +

Además, puedes evitar la validación restringida especificando el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, o el atributo {{ htmlattrxref("formnovalidate", "button") }} en el elemento {{ HTMLElement("button") }} y en el elemento {{ HTMLElement("input") }} (cuando {{ htmlattrxref("type", "input") }} es submit o image). Estos atributos indican que el formulario no será validado cuando se envie.

API de validación restringida

+

Las siguientes propiedades y métodos del DOM relacionadas con la validación restringida están disponibles para scripts del lado del cliente:

+ +

{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5"}) }}

+

{{ HTML5ArticleTOC() }}

diff --git a/files/es/html/html5/html5_lista_elementos/index.html b/files/es/html/html5/html5_lista_elementos/index.html new file mode 100644 index 0000000000..f3e1d0a8e4 --- /dev/null +++ b/files/es/html/html5/html5_lista_elementos/index.html @@ -0,0 +1,598 @@ +--- +title: Lista de Elementos HTML5 +slug: HTML/HTML5/HTML5_lista_elementos +translation_of: Web/HTML/Element +--- +

Todos los elementos del estandar HTML5 están listados aquí, descritos por su etiqueta de apertura y agrupados por su función. Contrariamente al indice de elementos HTML el cual lista todas las posibles etiquetas, estandar, no-estandar, válidas, obsoletas o aquellas en desuso, esta lista solamente los elementos válidos de HTML5. Solamente aquellos elementos listados aquí son los que deberían ser usados en nuevos sitios Web.

+ +

El simbolo This element was added as part of HTML5 indica que el elemento fue añadido en HTML5. Nótese que otros elementos listados aqui pueden haber sido modificados o extendido en su significado por la especificación HTML5.

+ +

Elemento raíz

+ + + + + + + + + + + + +
ElementoDescripcion
{{HTMLElement("<!DOCTYPE html>")}}Define que el documento esta bajo el estandar de HTML 5
+ + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("html")}}Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento.
+ +

Metadatos del documento

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("head")}}Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
{{HTMLElement("title")}}Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
{{HTMLElement("base")}}Define la URL base para las URLs relativas en la página.
{{HTMLElement("link")}}Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
{{HTMLElement("meta")}}Define los metadatos que no pueden ser definidos usando otro elemento HTML.
{{HTMLElement("style")}}Etiqueta de estilo usada para escribir CSS en línea.
+ +

Scripting

+ + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("script")}}Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
{{HTMLElement("noscript")}}Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.
+ +

Secciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("body")}} +
Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento.
+
{{HTMLElement("section")}} This element has been added in HTML5Define una sección en un documento.
{{HTMLElement("nav")}} This element has been added in HTML5Define una sección que solamente contiene enlaces de navegación
{{HTMLElement("article")}} This element has been added in HTML5Define contenido autónomo que podría existir independientemente del resto del contenido.
{{HTMLElement("aside")}} This element has been added in HTML5Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
{{HTMLElement("header")}} This element has been added in HTML5Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
{{HTMLElement("footer")}} This element has been added in HTML5Define el pie de una página o sección. Usualmente contiene un mensaje de derechos de autoría, algunos enlaces a información legal o direcciones para dar información de retroalimentación.
{{HTMLElement("address")}}Define una sección que contiene información de contacto.
{{HTMLElement("main")}}This element has been added in HTML5Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.
+ +

Agrupación de Contenido

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("p")}}Define una parte que debe mostrarse como un párrafo.
{{HTMLElement("hr")}}Representa un quiebre temático entre párrafos de una sección o articulo o cualquier contenido.
{{HTMLElement("pre")}}Indica que su contenido esta preformateado y que este formato debe ser preservado.
{{HTMLElement("blockquote")}}Representa un contenido citado desde otra fuente.
{{HTMLElement("ol")}}Define una lista ordenada de artículos.
{{HTMLElement("ul")}}Define una lista de artículos sin orden.
{{HTMLElement("li")}}Define un artículo de una lista enumerada.
{{HTMLElement("dl")}}Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
{{HTMLElement("dt")}}Representa un término definido por el siguiente <dd>.
{{HTMLElement("dd")}}Representa la definición de los términos listados antes que él.
{{HTMLElement("figure")}} This element has been added in HTML5Representa una figura ilustrada como parte del documento.
{{HTMLElement("figcaption")}} This element has been added in HTML5Representa la leyenda de una figura.
{{HTMLElement("div")}}Representa un contenedor genérico sin ningún significado especial.
+ +

Semántica a nivel de Texto

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("a")}}Representa un hiperenlace, enlazando a otro recurso.
{{HTMLElement("em")}}Representa un texto enfatizado, como un acento de intensidad.
{{HTMLElement("strong")}}Representa un texto especialmente importante.
{{HTMLElement("small")}}Representa un comentario aparte, es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
{{HTMLElement("s")}}Representa contenido que ya no es exacto o relevante.
{{HTMLElement("cite")}}Representa el título de una obra.
{{HTMLElement("q")}}Representa una cita textual inline.
{{HTMLElement("dfn")}}Representa un término cuya definición  está contenida en su contenido ancestro más próximo.
{{HTMLElement("abbr")}}Representa una abreviación o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
{{HTMLElement("data")}} This element has been added in HTML5Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
{{HTMLElement("time")}} This element has been added in HTML5Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
{{HTMLElement("code")}}Representa un código de ordenador.
{{HTMLElement("var")}}Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa.
{{HTMLElement("samp")}}Representa la salida de un programa o un ordenador.
{{HTMLElement("kbd")}}Representa la entrada de usuario, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.
{{HTMLElement("sub")}},{{HTMLElement("sup")}}Representan un subíndice y un superíndice, respectivamente.
{{HTMLElement("i")}}Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
{{HTMLElement("b")}}Representa un texto hacia el cual se llama la atención para propósitos utilitarios.  No confiere ninguna importancia adicional y no implica una voz alterna.
{{HTMLElement("u")}}Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en chino.
{{HTMLElement("mark")}} This element has been added in HTML5Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
{{HTMLElement("ruby")}} This element has been added in HTML5 +

Representa contenidos a ser marcados con anotaciones ruby, recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana japonés.

+
{{HTMLElement("rt")}} This element has been added in HTML5Representa el texto de una anotación ruby.
{{HTMLElement("rp")}} This element has been added in HTML5Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
{{HTMLElement("bdi")}} This element has been added in HTML5Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
{{HTMLElement("bdo")}}Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
{{HTMLElement("span")}}Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
{{HTMLElement("br")}}Representa un salto de línea.
{{HTMLElement("wbr")}} This element has been added in HTML5Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.
+ +

Ediciones

+ + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("ins")}}Define una adición en el documento.
{{HTMLElement("del")}}Define una remoción del documento.
+ +

Contenido incrustado

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("img")}}Representa una imagen.
{{HTMLElement("iframe")}}Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
{{HTMLElement("embed")}} This element has been added in HTML5Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
{{HTMLElement("object")}}Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un plugin.
{{HTMLElement("param")}}Define parámetros para el uso por los plugins invocados por los elementos <object>.
{{HTMLElement("video")}} This element has been added in HTML5Representa un video, y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos. 
{{HTMLElement("audio")}} This element has been added in HTML5Representa un sonido o stream de audio.
{{HTMLElement("source")}} This element has been added in HTML5Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como <video> o <audio>.
{{HTMLElement("track")}} This element has been added in HTML5Permite a autores especificar una pista de texto temporizado para elementos multimedia como <video> o <audio>.
{{HTMLElement("canvas")}} This element has been added in HTML5Representa un área de mapa de bits  en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
{{HTMLElement("map")}}En conjunto con <area>, define un mapa de imagen.
{{HTMLElement("area")}}En conjunto con <map>, define un mapa de imagen.
{{SVGElement("svg")}} This element has been added in HTML5Define una imagen vectorial embebida.
{{MathMLElement("math")}} This element has been added in HTML5Define una fórmula matemática.
+ +

Datos tabulares

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("table")}}Representa datos con más de una dimensión.
{{HTMLElement("caption")}}Representa el título de una tabla.
{{HTMLElement("colgroup")}}Representa un conjunto de una o más columnas de una tabla.
{{HTMLElement("col")}}Representa una columna de una tabla.
{{HTMLElement("tbody")}}Representa el bloque de filas que describen los datos concretos de una tabla.
{{HTMLElement("thead")}}Representa el bloque de filas que describen las etiquetas de columna de una tabla.
{{HTMLElement("tfoot")}}Representa los bloques de filas que describen los resúmenes de columna de una tabla.
{{HTMLElement("tr")}}Representa una fila de celdas en una tabla.
{{HTMLElement("td")}}Representa una celda de datos en una tabla.
{{HTMLElement("th")}} +

Representa una celda encabezado en una tabla. 

+
+ +

Formularios

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("form")}}Representa un formulario, consistiendo de controles que puede ser enviado a un servidor para procesamiento.
{{HTMLElement("fieldset")}}Representa un conjunto de controles.
{{HTMLElement("legend")}}Representa el título de un <fieldset>.
{{HTMLElement("label")}}Representa el título de un control de formulario.
{{HTMLElement("input")}}Representa un campo de datos escrito que permite al usuario editar los datos.
{{HTMLElement("button")}}Representa un botón.
{{HTMLElement("select")}}Representa un control que permite la selección entre un conjunto de opciones.
{{HTMLElement("datalist")}} This element has been added in HTML5Representa un conjunto de opciones predefinidas para otros controles.
{{HTMLElement("optgroup")}}Representa un conjunto de opciones, agrupadas lógicamente.
{{HTMLElement("option")}}Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
{{HTMLElement("textarea")}}Representa un control de edición de texto multilínea.
{{HTMLElement("keygen")}} This element has been added in HTML5Representa un control de par generador de llaves.
{{HTMLElement("output")}} This element has been added in HTML5Representa el resultado de un cálculo.
{{HTMLElement("progress")}} This element has been added in HTML5Representa el progreso de finalización de una tarea.
{{HTMLElement("meter")}} This element has been added in HTML5Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.
+ +

Elementos interactivos

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoDescripción
{{HTMLElement("details")}} This element has been added in HTML5Representa un widget desde el que un usuario puede obtener información o controles adicionales.
{{HTMLElement("summary")}} This element has been added in HTML5Representa un resumen, título o leyenda para un elemento <details> dado.
{{HTMLElement("command")}} This element has been added in HTML5Representa un comando que un usuario puede invocar.
{{HTMLElement("menu")}} This element has been added in HTML5Representa una lista de comandos .
+ +

Ver también

+ + diff --git a/files/es/html/html5/html5_parser/index.html b/files/es/html/html5/html5_parser/index.html new file mode 100644 index 0000000000..591fcbe865 --- /dev/null +++ b/files/es/html/html5/html5_parser/index.html @@ -0,0 +1,64 @@ +--- +title: Analizador de HTML5 +slug: HTML/HTML5/HTML5_Parser +tags: + - HTML + - HTML5 + - para_revisar +translation_of: Web/Guide/HTML/HTML5/HTML5_Parser +--- +

{{ gecko_minversion_header("2") }}{{ draft() }}

+

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

+

El nuevo analizador presenta estas mejoras importantes:

+ +

La especificación de HTML 5 ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

+

Conductas del analizador modificadas

+

Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.

+

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

+

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.

+

Llamar a document.write () durante el análisis

+

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

+

Algunos contextos en los que no debes llamar a document.write() incluyen:

+ +

Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio. Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

+

Falta de repetición del análisis

+

Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

+

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

+ +

Mejora del rendimiento con el análisis especulativo

+

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.

+

Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

+

Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}. (También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)

+

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

+
<script>
+  document.write ("<div>");
+  document.write ("<p> Aquí va el contenido. </ p>");
+  document.write ("</ div>");
+</ script>
+<!-- Aquí va el HTML sin script. -->
+
+
+

Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.

+
<script>document.write("<div>");</script>
+<p>El contenido va aquí.</p>
+<script>document.write("</div>");</script>
+
+
+

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo

+

{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}

diff --git a/files/es/html/html5/index.html b/files/es/html/html5/index.html new file mode 100644 index 0000000000..054d21d534 --- /dev/null +++ b/files/es/html/html5/index.html @@ -0,0 +1,199 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - API + - CSS3 + - Gráficos(2) + - HTML + - HTML5 + - Multimedia + - SVG + - conectividad + - graficos + - mejoras + - nuevo +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

+ + + +

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función.

+ + + +
+
+

SEMÁNTICA

+ +
+
Secciones y contenidos en HTML5
+
Un vistazo al nuevo esquema y secciones de un documento HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.
+
Uso de audio y video en HTML5
+
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.
+
+ +
+
Formularios en HTML5
+
Un mirada a la mejora de los formularios web en HTML5: La API de validación de restricción, varios atributos nuevos, nuevos valores para el {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.
+
Nuevos elementos semánticos
+
Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de elementos de HTML5 validos. +
+
+
Mejora en {{HTMLElement("iframe")}}
+
Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y  {{htmlattrxref("srcdoc", "iframe")}} los autores ahora pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.
+
MathML
+
Permite integrar directamente fórmulas matemáticas.
+
+
Introducción a HTML5
+
En este artículo se explica cómo indicar al navegador que está utilizando HTML5 en su diseño web o aplicación web.
+
Analizador de HTML5 compatible
+
El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.
+
+ +

CONECTIVIDAD

+ +
+
Web Sockets
+
Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.
+
Eventos de servidor enviados
+
Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma  donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.
+
WebRTC
+
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
+
+ +

Sin Conexión Y ALMACENAMIENTO

+ +
+
Recursos sin conexión: el caché de la aplicación
+
Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.
+
Eventos  con y sin conexión
+
Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.
+
WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
+
Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.
+
IndexedDB
+
Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.
+
Uso de archivos desde aplicaciones web
+
El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan a los archivos locales seleccionados por el usuario. Esto incluye el apoyo para la selección de varios archivos utilizando el {{HTMLElement("input")}} de tipo file del elemento HTML múltiples atributos. También esta FileReader.
+
+ +

MULTIMEDIA

+ +
+
Usando HTML5 de audio y video
+
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. +
+
+
WebRTC
+
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
+
Usando la API de la cámara
+
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
+
Track and WebVTT
+
El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. WebVTT es un formato de pista de texto.
+
+ +

3D, GRAFICOS & EFECTOS

+ +
+
Canvas Tutorial
+
Conozca el nuevo elemento {{HTMLElement("canvas")}}  y cómo dibujar gráficos y otros objetos en Firefox
+
API de texto para elementos <canvas> 
+
El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .
+
WebGL
+
WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en elementos <canvas> HTML5  .
+
SVG
+
Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.
+
+
+
+
+
+
+
+ +
+

RESULTADOS e INTEGRACIÓN

+ +
+
Web Workers
+
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.
+
XMLHttpRequest Nivel 2
+
Permite buscar de forma asíncrona algunas partes de la página, mostrando contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de Ajax.
+
+ +
+
Motores JIT compilación de JavaScript
+
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
+
History API
+
Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.
+
El atributo contentEditable: transformar su sitio web en una wiki!
+
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.
+
Arrastrar y soltar
+
La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas ​​en Mozilla.
+
Gestión del foco en HTML
+
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
+
Manejadores de protocolo basados ​​en web
+
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.
+
Fullscreen API
+
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.
+
API Pointer Lock
+
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
+
Eventos en línea y fuera de línea
+
+
+
Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.
+
+
+
+ +

ACCESO al dispositivo

+ +
+
Usando la API de la cámara
+
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
+
Eventos táctiles
+
Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.
+
El uso de geolocalización
+
Permite a los navegadores localizar la posición del usuario mediante geolocalización.
+
Detección de la orientación del dispositivo
+
Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).
+
API Pointer Lock
+
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
+
+ +

CSS3 STYLING

+ +

CSS  se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3,  aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y otros en el nivel 4, con todos los niveles intermedios cubiertos.

+ +
+
Nuevas características de diseño de fondo
+
Ahora es posible poner una sombra a un cuadro, con box-shadow y varios fondos se pueden ajustar.
+
+ +
+
Bordes mas "lujosos"
+
Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a longhand, aunque los bordes redondeados son apoyados a través de propiedades {{cssxref("border-radius")}} .
+
Animación de su estilo
+
Utilizando Transiciones CSS para animar entre los diferentes estados o utilizando animaciones CSS para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.
+
Tipografía mejorada
+
Los autores tienen un mejor control para usar la tipografía. Se puede controlar el texto {{cssxref("text-overflow")}} y guiones y también puede poner una sombra  o controlar con mayor precisión sus decoraciones . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla @font-face .
+
Nuevos diseños de presentación
+
Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el CSS diseño de varias columnas , y el cuadro de distribución flexible de CSS .
+
+
+
diff --git "a/files/es/html/html5/introducci\303\263n_a_html5/index.html" "b/files/es/html/html5/introducci\303\263n_a_html5/index.html" new file mode 100644 index 0000000000..091a90f7af --- /dev/null +++ "b/files/es/html/html5/introducci\303\263n_a_html5/index.html" @@ -0,0 +1,16 @@ +--- +title: Introducción a HTML5 +slug: HTML/HTML5/Introducción_a_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +


+ HTML5, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar. Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.

+

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

+

El tipo de documento HTML5

+

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:

+
<!DOCTYPE html>
+

Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.

+

{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}

diff --git a/files/es/html/html5/validacion_de_restricciones/index.html b/files/es/html/html5/validacion_de_restricciones/index.html new file mode 100644 index 0000000000..04182a8fec --- /dev/null +++ b/files/es/html/html5/validacion_de_restricciones/index.html @@ -0,0 +1,345 @@ +--- +title: Validación de restricciones +slug: HTML/HTML5/Validacion_de_restricciones +tags: + - CSS + - Guía + - HTML5 + - NecesitaContenido + - Selectores +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +--- +

La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza. HTML5 introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y validación de restricciones para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la API de Validación de Restricciones de HTML.

+ +
Nota: La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones de lado del servidor. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.
+ +

Restricciones intrínsecas y básicas

+ +

En HTML5, las restricciones básicas son declaradas de dos formas:

+ + + +

Tipos de captura semánticos

+ +

Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:

+ + + + + + + + + + + + + + + + + + + + + +
Tipo de inputDescripciónIncumplimiento asociado
<input type="URL">El valor debe ser una URL absoluta, es decir, una de las siguientes: +
    +
  • una URI válida (como se define en RFC 3986)
    • +
  • una IRI válida, sin un componente de query (como se define en RFC 3987)
    • +
  • una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en RFC 3987)
    • +
  • una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en RFC 3987)
    • +
+ 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
 <input type="email">El valor debe obedecer a la producción ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde: +
    +
  • atext está definido en  RFC 5322, y representa una letra US-ASCII (A-Z y a-z), un dígito (0-9) o uno de los siguientes caracteres especiales: ! # $ % & ' * + - / = ? ` { } | ~,
    • +
  • ldh-str está definido en RFC 1034, y representa letras US-ASCII, combinadas con dígitos y el símbolo - agrupados en palabras separadas por un punto (.).
    • +
+ +
Nota: si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por tipo no coincidente.
+ 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
+ +

Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. 

+ +

Atributos relacionados con validaciones

+ +

Los siguientes atributos son usados para describir restricciones básicas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipos de input que soportan el atributoValores posiblesDescripciónIncumplimiento asociado
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordUna expresión regular de JavaScript (compilada con las banderas global, ignoreCase, y multiline de ECMAScript 5 desabilitadas)El valor debe coincidir con el patrón.Incumplimiento de restricción por incompatibilidad de patrones (Pattern mismatch)
{{ htmlattrxref("min", "input") }}range, numberUn número válidoEl valor debe ser mayor o igual al de este atributo.Incumplimiento de restricción por flujo insuficiente (Underflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("max", "input") }}range, numberUn número válidoEl valor debe ser menor o igual al de este atributoIncumplimiento de restricción por desborde (Overflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}ninguno, pues éste es un atributo de tipo Boolean: su presencia representa true, y su ausencia representa falseDebe tener un valor (si se establece).Incumplimiento de restricción por ausencia (Missing)
{{ htmlattrxref("step", "input") }}dateUn número entero de díasA menos que se establezca el atributo con la literal any, el valor debe ser min + un enter múltiplo del valor de este atributo.Incumplimiento de restricción por inconsistencia de paso (Step mismatch)
monthUn número entero de meses
weekUn número entero de semanas
datetime, datetime-local, timeUn número entero de segundos
range, numberUn entero
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}Una longitud en enterosEl número de caracteres (puntos de código) no debe exceder el valor del atributo.Incumplimiento de restricción por ser muy largo (Too long)
+ +

Proceso de validación de restricciones

+ +

La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:

+ + + +
Nota: + + +
+ +

Restricciones complejas usando la API de Restricciones de HTML5

+ +

Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.

+ +

Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como onchange) para calcular si la restricción no se cumple, y entonces usar el método field.setCustomValidity() para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.

+ +

Restricciones que combinan varios campos: Validación de código postal

+ +

El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como D- en Alemania, F- en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.

+ +
+

Nota: Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.

+
+ +

Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:

+ +
<form>
+    <label for="ZIP">Código postal : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">País : </label>
+    <select id="Country">
+      <option value="ch">Suiza</option>
+      <option value="fr">Francia</option>
+      <option value="de">Alemania</option>
+      <option value="nl">Países Bajos</option>
+    </select>
+    <input type="submit" value="Validar">
+</form>
+ +

Esto mostrará el siguiente formulario: 

+ +

+ +

Primero, escribimos una función que revisará las restricciones en sí:

+ +
function checkZIP() {
+  // Para cada país, se define el patrón para el código postal
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ]
+  };
+
+  // Se lee el ID del país
+  var country = document.getElementById("Country").value;
+
+  // Se obtiene el campo del código postal
+  var ZIPField = document.getElementById("ZIP");
+
+  // Se crea el validador de la restricción
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // ¡Se hace la revisión!
+  if (constraint.test(ZIPField.value)) {
+    // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // El código postal no cumple la restricción, usamos la API de Restricciones para
+    // dar un mensaje sobre el formato requerido para este país
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Entonces, enlazamos este código al evento onchange del elemento {{ HTMLElement("select") }} y al evento oninput del elemento {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

Puedes ver aquí un ejemplo en vivo de la validación de código postal.

+ +

Limitando el tamaño de un archivo antes de ser subido

+ +

Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.

+ +

Aquí está la parte de HTML:

+ +
<label for="FS">Selecciona un archivo menor a 75KB : </label>
+<input type="file" id="FS">
+ +

Esto muestra lo siguiente:

+ +

+ + + +

Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // Si hay (por lo menos) un archivo seleccionado
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Validar la restricción
+       FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB");
+       return;
+     }
+  }
+  // No hay incumplimiento de la restricción
+  FS.setCustomValidity("");
+}
+ + + +

Finalmente, anclamos el método al evento requerido:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

Puedes ver aquí un ejemplo en vivo de la validación de tamaño de archivos.

+ +

Estilos visuales de validación de restricciones

+ +

Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.

+ +

Controlando el aspecto de los elementos

+ +

El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.

+ +

Pseudo-clases :required y :optional

+ +

Las pseudo-clases :required y :optional permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.

+ +

Pseudo-clase :-moz-placeholder

+ +

Véase ::placeholder (experimental).

+ +

Pseudo-clases :valid :invalid

+ +

Las pseudo-clases :valid e :invalid son usadas para representar elementos <input> cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.

+ +

Estilos predeterminados

+ +

Controlando el texto de incumplimiento de restricciones

+ +

El atributo x-moz-errormessage

+ +

El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.

+ +
+

Nota: Esta extensión no es estándar.

+
+ +

element.setCustomValidity() de la API de Validación de Restricciones

+ +

El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.

+ +

Objeto ValidityState de la API de Validación de Restricciones

+ +

La interfaz de DOM ValidityState representa los estados de validez en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.

+ +

Examples of personalized styling

+ +

HTML4 fallback

+ +

Trivial fallback

+ +

JS fallback

+ +

Conclusión

diff --git a/files/es/incrustando_mozilla/comunidad/index.html b/files/es/incrustando_mozilla/comunidad/index.html new file mode 100644 index 0000000000..70853c59a3 --- /dev/null +++ b/files/es/incrustando_mozilla/comunidad/index.html @@ -0,0 +1,7 @@ +--- +title: Comunidad +slug: Incrustando_Mozilla/Comunidad +--- +

este comentario considero esta fuera dl tema pero queria saber  si hay proceso para instala firefox os en iphone

+ +

 

diff --git a/files/es/incrustando_mozilla/index.html b/files/es/incrustando_mozilla/index.html new file mode 100644 index 0000000000..eafc681878 --- /dev/null +++ b/files/es/incrustando_mozilla/index.html @@ -0,0 +1,47 @@ +--- +title: Incrustando Mozilla +slug: Incrustando_Mozilla +tags: + - Incrustando_Mozilla + - Todas_las_Categorías +translation_of: Mozilla/Gecko/Embedding_Mozilla +--- +

+

+
+

Gecko permite a desarrolladores externos usar la misma tecnologia que encontramos en Mozilla. Eso quiere decir que puedes incluir un navegador dentro de una aplicacion externa, abrir canales y salidas a traves de la red, usando DOM y demás. Incluso puedes construir una nueva aplicacion entera usando el chrome. +

+
+
+

Incrustando Mozilla

+
FAQ Incrustando Mozilla +
Una gran cantidad de preguntas frecuentes sobre incrustar Mozilla. +
Fundamentos para incrustar Gecko (en)
+
Debido a la creciente importacia de la Web como fuente de informacion, entretenimiento, y contacto personal, la habilidad de acceder y ver datos guardados en formato HTML se esta haciendo mas y mas importante para una amplia variedad de diferentes aplicaciones. Incrustar Gecko, el motor de renderizado de los navegadores Netscape y Mozilla, es una solución sobresaliente para este problema. +
+
Usa tu propio navegador - Como incrustar
+
Una rapida introducción para incrustar Mozilla. +
+
Incrustando el Editor
+
Este documento relata es estado actual de la incrustación del editor, problemas con las implementaciones existentes, algunos casos de incrustacion a los que tendremos que hacer frente, y una solucion para incrustarlo en esos casos. +
+

Ver Todo... +

+		 +

Comunidad

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

{{ DiscussionList("dev-embedding", "mozilla.dev.embedding") }} +

Ver Todo... +


+

+

Temas Relacionados

+
Gecko, XPCOM +
+


+

+
+

Categorías +

Interwiki Language Links +


+

{{ languages( { "en": "en/Embedding_Mozilla", "fr": "fr/Mozilla_embarqu\u00e9", "ja": "ja/Embedding_Mozilla", "ko": "ko/Embedding_Mozilla", "pl": "pl/Zagnie\u017cd\u017canie_Mozilli", "zh-cn": "cn/Embedding_Mozilla" } ) }} diff --git a/files/es/indexeddb/index.html b/files/es/indexeddb/index.html new file mode 100644 index 0000000000..91e216833a --- /dev/null +++ b/files/es/indexeddb/index.html @@ -0,0 +1,145 @@ +--- +title: IndexedDB +slug: IndexedDB +tags: + - páginas_a_traducir +--- +

{{ SeeCompatTable() }}

+ +

IndexedDB es una API del lado del cliente, para el almacenamiento de grandes cantidades de datos estructurados y para búsquedas de alto rendimiento en esos datos, usando índices. Mientras DOM Storage es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.

+ +

Esta página es básicamente el punto de entrada para la descripción técnica de los objetos de la API. Si necesita algo elemental, debería consultar ;Conceptos básicos acerca de IndexedDB. Para más detalles, vea Usando IndexedDB.

+ +

IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de Web Workers, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.

+ +

API Asíncrono

+ +

Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use open() en el atributo indexedDB de un objeto window. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.

+ +
+

Nota: El objeto indexedDB se prefija en las versiones antiguas de los navegadores (propiedad mozIndexedDB para Gecko < 16, webkitIndexedDB en Chrome, y msIndexedDB en IE 10).

+
+ + + +

Una versión anterior de la especificación también define estas -ahora removidas- interfaces. Éstas son documentadas todavía, en caso de que necesite actualizar código escrito previamente:

+ + + +

Hay también una versión sincrónica de la API. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con WebWorkers.

+ +

Límites de almacenamiento

+ +

No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de una navegador a otro:

+ + + +

Ejemplo

+ +

Un claro ejemplo para lo que IndexedDB puede ser utilizado en la web, es el ejemplo de Marco Castelluccio, ganador del DevDerby IndexedDB Mozilla. La demostración ganadora fue eLibri, una biblioteca y una aplicación de lectura de libros electrónicos.

+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
API asíncrono +

24.0
+ 11.0 {{ property_prefix("webkit") }}

+ 		+

{{ CompatGeckoDesktop("16.0") }}
+ {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}

+ 		10 {{ property_prefix("ms") }}{{ CompatNo() }}{{ CompatNo() }}
API síncrono
+ (usado por WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
+ Vea {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
API síncrono{{ CompatNo() }}{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Para otra matriz de compatibilidad, vea también: Cuándo puedo usar IndexedDB

+ +

También existe la posibilidad de usar IndexedDB en navegadores que soportan WebSQL por el uso de IndexedDB Polyfill.

+ +

Ver también

+ + diff --git "a/files/es/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" "b/files/es/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" new file mode 100644 index 0000000000..c1c1755bb9 --- /dev/null +++ "b/files/es/instalaci\303\263n_de_motores_de_b\303\272squeda_desde_p\303\241ginas_web/index.html" @@ -0,0 +1,33 @@ +--- +title: Instalación de motores de búsqueda desde páginas web +slug: Instalación_de_motores_de_búsqueda_desde_páginas_web +tags: + - Plugins_de_búsqueda +--- +

Firefox permite que código de JavaScript instale plugins de motores de búsqueda, los formatos de plugin que soporta son: MozSearch, OpenSearch, y Sherlock. +

Cuando el código JavaScript intenta instalar un plugin de búsqueda, Firefox muestra una alerta que pide al usuario permiso para instalarlo. +

+

Instalación de plugins MozSearch y OpenSearch

+

Para instalar plugin MozSearch o OpenSearch, es necesario usar el método DOM window.external.AddSearchProvider(). La sintaxis para este método es: +

+
window.external.AddSearchProvider(engineURL);
+
+

Donde engineURL es el URL del archivo XML del plugin del motor de búsqueda. +

+
Nota: el soporte a OpenSearch y MozSearch está disponible sólo en Firefox 2 y superior.
+

Para más detalles sobre MozSearch, lease Creación de plugins MozSearch. +

+

Instalación de plugins Sherlock

+

Para instalar un plugin Sherlock, hay que llamar a window.sidebar.addSearchEngine(), la sintaxis para hacerlo es: +

+
window.sidebar.addSearchEngine(engineURL, iconURL, suggestedName, suggestedCategory);
+
+ +

Para más detalles sobre Sherlock, visite http://developer.apple.com/macosx/sherlock/ +

Categorías +

interwiki links +

{{ languages( { "en": "en/Adding_search_engines_from_web_pages", "ca": "ca/Addici\u00f3_de_motors_de_cerca_a_les_p\u00e0gines_web", "it": "it/Installare_plugin_di_ricerca_dalle_pagine_web", "ja": "ja/Adding_search_engines_from_web_pages" } ) }} diff --git a/files/es/interactuar_con_el_colector_de_ciclos_de_xpcom/index.html b/files/es/interactuar_con_el_colector_de_ciclos_de_xpcom/index.html new file mode 100644 index 0000000000..2ca660bdac --- /dev/null +++ b/files/es/interactuar_con_el_colector_de_ciclos_de_xpcom/index.html @@ -0,0 +1,50 @@ +--- +title: Interactuar con el colector de ciclos de XPCOM +slug: Interactuar_con_el_colector_de_ciclos_de_XPCOM +tags: + - Firefox 3 + - Todas_las_Categorías + - XPCOM + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Interfacing_with_the_XPCOM_cycle_collector +--- +

This is a quick overview of the cycle collector introduced into XPCOM for Firefox 3, including a description of the steps involved in modifying an existing C++ class to participate in XPCOM cycle collection. If you have a class that you think is involved in a cyclical-ownership leak, this page is for you.

+ +

The intended audience is Mozilla C++ developers.

+ +

What the cycle collector does

+ +

The cycle collector spends most of its time accumulating (and forgetting about) pointers to XPCOM objects thatmight be involved in garbage cycles. This is the idle stage of the collector's operation, in which special variants of nsAutoRefCnt register and unregister themselves very rapidly with the collector, as they pass through a "suspicious" refcount event (from N+1 to N, for nonzero N).

+ +

Periodically the collector wakes up and examines any suspicious pointers that have been sitting in its buffer for a while. This is the scanning stage of the collector's operation. In this stage the collector repeatedly asks each candidate for a singleton cycle-collection helper class, and if that helper exists, the collector asks the helper to describe the candidate's (owned) children. This way the collector builds a picture of the ownership subgraph reachable from suspicious objects.

+ +

If the collector finds a group of objects that all refer back to one another, and establishes that the objects' reference counts are all accounted for by internal pointers within the group, it considers that groupcyclical garbage, which it then attempts to free. This is the unlinking stage of the collectors operation. In this stage the collector walks through the garbage objects it has found, again consulting with their helper objects, asking the helper objects to "unlink" each object from its immediate children.

+ +

Note that the collector also knows how to walk through the JS heap, and can locate ownership cycles that pass in and out of it.

+ +

How the collector can fail

+ +

The cycle collector is a conservative device. There are situations in which it will fail to collect a garbage cycle.

+ +
    +
  1. It does not suspect any pointers by default; objects mustsuspect themselves, typically by using an nsCycleCollectingAutoRefCnt rather than a nsAutoRefCnt.
    2. +
  2. It only traverses objects that return a helper object when QI'ed to nsICycleCollectionParticipant. If it encounters an unknown edge during its traversal, it gives up on that edge; this means that every edge involved in a cycle must be participating, otherwise the cycle will not be found.
    3. +
  3. The Traverse and Unlink methods on the helper object are not magic; they are programmer-supplied and must be correct, or else the collector will fail.
    4. +
  4. The collector does not know how to find temporary owning pointers that exist on the stack, so it is important that it only run from near the top-loop of the program. It will not crash if there are extra owning pointers, but it will find itself unable to account for the reference counts it finds in the owned objects, so may fail to collect cycles.
    5. +
+ +

How to make your classes participate

+ +

The interface between the cycle collector and your classes can be accessed directly using the contents of xpcom/base/nsCycleCollector.h, but there are convenience macros for annotating your classes in xpcom/base/nsCycleCollectionParticipant.h that are much easier to use. In general, assuming you are modifying class nsFoo with two nsCOMPtr edges mBar and mBaz, the process can be distilled to a few simple modifications:

+ +
    +
  1. Include the header nsCycleCollectionParticipant.h in both nsFoo.h and nsFoo.cpp.
    2. +
  2. Change the line NS_DECL_ISUPPORTS to NS_DECL_CYCLE_COLLECTING_ISUPPORTS in the definition of nsFoo.
    3. +
  3. Add a line NS_DECL_CYCLE_COLLECTION_CLASS(nsFoo) within the public portion of definition of nsFoo.
    4. +
  4. Add a line NS_INTERFACE_MAP_ENTRIES_CYCLE_COLLECTION(nsFoo) to the interface map of nsFoo in nsFoo.cpp.
    5. +
  5. Change the line NS_IMPL_ADDREF(nsFoo) to NS_IMPL_CYCLE_COLLECTING_ADDREF(nsFoo) in nsFoo.cpp.
    6. +
  6. Change the line NS_IMPL_RELEASE(nsFoo) to NS_IMPL_CYCLE_COLLECTING_RELEASE(nsFoo) in nsFoo.cpp.
    7. +
  7. Add a line NS_IMPL_CYCLE_COLLECTION_CLASS_2(nsFoo, mBar, mBaz) in nsFoo.cpp.
    8. +
+ +

It is possible that your class has more complicated structure than this picture. For example, your class may have multiple nsISupports base classes, which requires the use of some *_AMBIGUOUS macros that perform a disambiguating downcast. Or your class may have a complicated ownership structure, such that the simple NS_IMPL_CYCLE_COLLECTION_CLASS_N macros are insufficient; in this case you might need to implement theTraverse andUnlink methods of your helper class manually. It's helpful even in these cases to use the NS_IMPL_CYCLE_COLLECTION_TRAVERSE_{BEGIN,END} and NS_IMPL_CYCLE_COLLECTION_UNLINK_{BEGIN,END} macros. You can see an example of their use in some more complicated classes such as content/base/src/nsGenericElement.cpp. If your class has tearoffs or is being aggregated by other classes it is important to make the tearoff classes or the outer classes participate in cycle collection too, not doing so could lead to the cycle collector trying to collect the objects too soon.

diff --git a/files/es/introduccion_venkman/index.html b/files/es/introduccion_venkman/index.html new file mode 100644 index 0000000000..d8c56edb05 --- /dev/null +++ b/files/es/introduccion_venkman/index.html @@ -0,0 +1,261 @@ +--- +title: Introduccion a Venkman +slug: Introduccion_Venkman +translation_of: Archive/Mozilla/Venkman/Introduction +--- +

+

Advertencia: The content of this article may be out of date.

+

+

Es una version BETA de traduccion, falta revisar formato de titulos y toda la ultima seccion de 'Fundamentos de Depuracion

+

Una nueva y poderosa herramienta está disponible para los desarrolladores web para usar en varios productos basados ??en Mozilla , incluyendo Firefox , Mozilla Suite y Netscape 7.x El depurador JavaScript , también llamado Venkman , ha sido una parte del navegador de Mozilla y de la comunidad de sus desarrolladores web y scripts por algún tiempo. Este artículo proporciona una visión general y algunos ejemplos prácticos de cómo utilizar el depurador JavaScript en aplicaciones web y los guiones de páginas web. Esta introducción es el primero de una serie de artículos sobre Venkman y depuración de JavaScript. Incluso si usted ya está usando Venkman , las características , procedimientos y consejos descritos aquí le harán un desarrollador y depurador web más seguro.

+

Venkman es a la vez, un depurador gráfico y de consola. Características tales como la gestión del punto de interrupción , la inspección de la pila de llamadas , y la inspección de la variable / objeto están disponibles en la interfaz de usuario y tambien desde comandos de la consola , lo que le permite trabajar de la forma que más acostumbre. La consola interactiva también permite la ejecución de código JavaScript arbitrario. Los atajos de teclado de Venkman son los mismos que los principales entornos de depuración visual , y los usuarios gdb deberían estar familiarizados con los comandos de Venkman /break, /step, /next, /finish, /frame, and /where .

+

En Windows, el depurador de JavaScript se compara favorablemente con Visual InterDev y otras grandes herramientas de desarrollo web. En otras plataformas , incluyendo Mac OS y Unix , es el único que ofrece este grado de flexibilidad , profundidad y poder en un entorno de depuración visual.

+

Iniciar el depurador

+

El depurador JavaScript está automáticamente preinstalado en Mozilla 1.x , pero debe instalarse por separado en Firefox y otros productos basados en Gecko , como Thunderbird y Netscape 7.x. Afortunadamente , la tecnología XPInstall hace posible la instalación de nuevos módulos de aplicación en Firefox con sólo hacer clic en un hipervínculo

+

Si aún no tiene Venkman o desea actualizar , usted puede conseguir fácilmente la última versión de https://addons.mozilla.org/en-US/firefox/addon/216. El proceso de instalación es de dos pasos. En primer lugar, desde el navegador que se desea que aloje a la aplicación depurador, visite la página de complementos de Firefox y haga clic en el enlace de "instalar" para la versión más reciente. Cuando la descarga se haya completado , reinicie el navegador ( algunos usuarios de Windows también pueden necesitar tambien reiniciar su ordenador).  A continuación, puede acceder al depurador a través de un item  nuevo del menú Herramientas creado dinámicamente en ese navegador , o bien reiniciar el navegador con una opción especial de depurador.

+


+ Para ver la versión de Venkman usted tiene , el tipo / versión en la vista Sesión Interactiva . Para obtener más información acerca de las últimas mejoras y versiones, consulte el Desarrollo Page Venkman Hay dos formas de iniciar el depurador:
+ Desde Firefox , puede iniciar seleccionando JavaScript Debugger del menú Herramientas ( menú Herramientas-> Desarrollo Web en Mozilla 1.x y Netscape).
+ También puede iniciar el navegador con la opción de línea de comandos -venkman , que inicia Venkman inicialmente en lugar frente de la aplicación.
+
+ ( Tenga en cuenta que Venkman muestra datos de uso cuando se inicia : " . Inicio local Grabado X, global YYY" Estos datos vienen de un contador integrado en la aplicación Para obtener más información acerca de este contador y los datos , véase el punto 2.2 en el Venkman FAQ.)

+

Figure 1. El depurador JavaScript.

+

Cuando inicie  Venkman por primera vez , las vistas básicas están dispuestas como en la imagen anterior , aunque se puede personalizar el diseño y la presencia de las diferentes vistas que le apetezca, como se describe en la sección View Customization a continuación. Las secuencias de comandos que han sido cargados por el motor de JavaScript aparecen en la ventana Loaded Scripts ( para más información sobre cómo se cargan y se accede a scripts en Venkman , consulte "Loading Scripts into the Debugger").

+

Figura 2 . Controles de Vista

+

La barra de menú , barra de herramientas, y todas las vistas se pueden contraer o esconder , que le da un gran control sobre el entorno de depuración. El Source Code View está vacío hasta que se seleccione una secuencia de comandos, y The Interactive Session View se inicia con la información básica de inicio.
+
+ Cada una de las vistas tiene una etiqueta, un botón flotante que le permite mostrar la vista en su propia ventana , y un botón de cierre que la oculta hasta que usted desea que se muestre de nuevo, como se ve en la Figura 2 .
+
+ La siguiente sección describe estas vistas y su uso dentro de la interfaz en su conjunto.

+

Familiarización con la interfaz de usuario de Venkman
+  

+

Barra de Herramientas

+

Figure 3. The Venkman Toolbar

+

La barra de herramientas se encuentra en la parte superior del depurador. La barra de herramientas contiene iconos para los comandos detener, continuar , pasar por encima , pasar adentro , salir , perfilar  y de impresión prolija. Estos comandos se explican por sí mismo , con la posible excepción de detener , lo que hace que el depurador se detenga cuando se ejecuta la siguiente línea de código JavaScript , y el botón de perfil , que se puede utilizar para medir los tiempos de ejecución de los scripts. Cuando se habilita el perfil haciendo clic en este botón, aparecerá una marca de verificación verde aparecerá junto al botón y se recogen datos de perfil para cada función , y se puede ahorrar eligiendo Guardar perfil de datos como ... en el menú Perfil.

+
+

Image:venkintro-stop-checked.png
+ Figure 4.
+ Stop Button
+ Waiting for
+ Execution

+
+

También tenga en cuenta que cuando usted está actualmente ejecutando JavaScript y haga clic en el botón Stop, el código JavaScript se detiene inmediatamente. Si no está ejecutando JavaScript y haga clic en el botón Detener , se mostrará "..." , como en la figura 4 , para indicar que el depurador se detendrá en la siguiente instrucción , pero no tiene ninguna parte para detener aún.
+
+ Este modo de parada rápida refleja un escenario común en la depuración de JavaScript , que es de inspeccionar y depurar secuencias de comandos mientras se están ejecutando , como en una página donde los elementos se mueven alrededor dinámicamente con DHTML. También puede utilizar los comandos disponibles en el menú Depurar y desde la consola para parar en los errores o en excepciones.
+
+ El botón Continuar a la derecha del botón de parada desestima el modo de parada y especifica que los scripts se deben ejecutar con normalidad, sin detenerse en cada declaración que se ejecuta.
+
+ El botón Pretty Print cambia el modo de impresión prolija. En el modo de impresión Pretty, el contenido de la vista de origen contendrá el texto de origen descompilada para la función seleccionada . Este es el mismo texto que se obtendría a partir del método toSource del prototipo de función .Si el texto fuente que se está depurando está mal formateado, Pretty Print puede ayudar a hacer más fácil la lectura mediante la inserción de saltos de línea y espacios en blanco en los lugares apropiados .
+
+ Cuando Pretty Print está habilitado, se verá una marca de verificación verde en el botón de barra de herramientas y el item de menú también se verá marcado.

+

Vista de los scripts cargados

+

Figure 5. The Loaded Scripts View. Active files and functions

+

La Vista de Scripts Cargados se encuentra en la parte superior izquierda de la ventana. Cuando un archivo es cargado por el navegador , aparecerá en esta vista , y cuando se descarga es eliminado . Los archivos se enumeran en orden alfabético , agrupados por tipo de archivo. Los nombres de archivo se visualizan después de un icono de una sola letra de color que representa la extensión de archivo. La figura 6 muestra la tabla de iconos y tipos de archivos .En el momento de escribir este documento, el orden y la agrupación de los nombres de archivo no se pueden cambiar .

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IconoTipo de Archivo
J.js
H.html, .htm
Z.xul
X.xml
?All other files
.JavaScript function
+

Figure 6.
+ Iconos de la vista Scripts

+
+

El nombre de la función "especial" __ toplevel__ se visualiza para los scripts que no son parte de una función real. Al hacer clic en un nombre de archivo que lleva al comienzo  de ese archivo , mientras que al hacer clic en un nombre de función le lleva al inicio de la función.
+
+ La columna Line en esta vista muestra el número de línea que esta función comienza. El selector de columna para este punto de vista ( el cuadro selector de la columna de árbol en la parte superior derecha ) se puede utilizar para mostrar una columna Longitud . Esta columna muestra el tamaño de las funciones en líneas . Tanto la línea y la columna Longitud están en blanco para los nombres de archivos.
+
+ Si una función tiene un punto de interrupción en el mismo, un pequeño punto rojo aparecerá en el icono de la función , así como en el icono de los archivo padres.

+

La vista de Variables Locales

+

Figure 7. The Local Variables View

+

La vista variables locales esta en la porción izquierda de la ventana , en la parte inferior . Cuando se detiene el depurador, muestra valores de variables para la función actual. El objetode 'scope' tiene todos los argumentos y variables locales , y el objeto 'this'  tiene el valor de la palabra clave this .

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ePropiedad enumerable
rPropiedad de solo lectura
pPermanente (no eliminable)
AAlias a otra propiedad
aArgumento de una funcion
vDeclareda con var
+

Figure 8. Indicadores de propiedades

+
+

Las propiedades de ambos  objetos 'scope' y 'this' aparecen en orden alfabético , agrupados por tipo de datos. La Figura 9 muestra los iconos que representan los tipos de datos .

+

Las propiedades  del tipo de objetos se muestran con el nombre de su función constructora entre llaves como su valor. Puede encontrar el código fuente del constructor seleccionando " Buscar Constructor " en el menú contextual de la propiedad. Usted puede encontrar el lugar donde el objeto se instancia con el comando "Buscar Creador " . De forma predeterminada , las propiedades de la función de tipo no se muestran , con el fin de ahorrar espacio en la vista. Si a usted le gustaría tener esto a la vista , marque la casilla " Incluir funciones"  en el menú contextual de la vista. Es posible que tenga que cerrar y volver a abrir los objetos que había abierto para ver el cambio .
+
+ Las propiedades que se muestran en una fuente gris negrita se definen en un objeto a partir de la cadena de prototipo , y no en el objeto que se está inspeccionando actualmente . Si usted desea inspeccionar prototipos y predecesoras cadenas del objeto , marque la casilla " Incluir propiedades ECMA "  en el menú contextual de la vista. Si una propiedad aparece en una fuente roja en negrilla, se produjo una excepción cuando Venkman trató de leer el valor. El objeto de excepción aparecerá como el valor de la propiedad .

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IconData TypeIconData Type
XVoid (undefined) valuenullNull value
t/fBoolean value`'String value
#Integer value##Double value
*Object valuefFunction value
+

Figure 9. Iconos de tipos de dato

+
+

El selector de columna para este punto de vista ( el cuadro selector de la columna de árbol en la parte superior derecha ) se puede utilizar para mostrar columnas Tipo y Indicadores. La columna de referencia contiene una descripción textual del tipo de objeto. 'Flages' enumera una o más indicadores aplicables a este objeto. Los indicadores se muestran enumerados en la Figura 8 .
+
+ Si un elemento visible en la vista de variables locales se modifica a través de la vista de Sesión Interactiva , la modificación se reflejará inmediatamente en la Vista de variables locales .
+
+ En el momento de escribir estas líneas, las variables locales de Vista de ordenación predeterminado y agrupación no son ajustables.

+

Vista de la Pila de llamadas

+

Figure 10. The Call Stack View

+

La vista  de Pila de llamadas se encuentra por defecto, en la parte izquierda inferior de la ventana. Cuando se detiene el depurador, la vista Pila de llamadas muestra la lista de las funciones activas. La función en la parte superior de laesta vista  es aquel donde el depurador se detiene , la función debajo de él es la función que llama , debajo se encuentra la función que llama a la función que llama , y así sucesivamente. Estos elementos se denominan marcos de pila .
+
+ Haciendo doble clic en un marco de pila cambiará el marco "actual". Esto hará que la fuente de la función que se muestra en la vista Código fuente , la vista variables locales cambiará para mostrar las variables locales al marco de pila seleccionada, y el guión evaluado en la vista Sesión Interactiva estará en relación con el marco seleccionado .
+
+ Si usted desea copiar la pila de llamadas actual al portapapeles , seleccione " volcado de pila a la Sesión Interactiva " en el menú contextual , o tipee  '/where' en la vista Sesión Interactiva . A continuación, puede copiar el texto desde la vista Sesión Interactiva .
+
+ Si usted desea evitar que en el futuro , Venkman se pare en un marco de pila en particular, marque " No Debug" desde el menú contextual del marco de pila .

+

Vista de Codigo Fuente

+

Figure 11. The Source Code View. Source code, line numbers, and breakpoints.

+

La vista de Código Fuente es un visor de archivos de sólo lectura. Los archivos y funciones específicas dentro de ellos se pueden visualizar al seleccionar el archivo o la función nombre apropiado en la Vista de script .
+
+ Cuando la ejecución del script es interrumpido por el depurador , la línea del archivo donde se produjo la interrupción se muestra automáticamente en la vista código fuente. La línea en cuestión se resaltará en amarillo para que sea fácil de localizar.
+
+ Al hacer clic en el margen izquierdo de esta visión se establecerá un punto de interrupción en esa línea. Si el punto de interrupción se establece con éxito ,  se mostrará la letra " B " en un fondo rojo al margen,  y tanto las vistas de Scripts Loaded y Sesión Interactiva proporcionarán retroalimentación. El punto de interrupción se puede borrar haciendo clic en el margen de nuevo ( en la letra " B"). No se pueden establecer Puntos de interrupción  en las líneas que no contienen código ejecutable , como líneas en blanco y comentarios. Para estas líneas , la vista Sesión Interactiva mostrará un mensaje de error que explica por qué el punto de interrupción , no se podría establecer .
+
+ Los Puntos de interrupción también se pueden configurar y borrar desde  la vista Sesión Interactiva, con los comandos break y fbreak .El comando break toma un patrón de archivo y número de línea . Cualquier archivo cargado que coincida con el patrón de archivo , y contiene una línea ejecutable en el número de la línea solicitada tendrá un conjunto de punto de interrupción . Si no hay archivos cargados coincidentes con el patrón de archivo o número de línea , un mensaje de error se imprime en la consola y el comando falla. El comando fbreak es idéntico , con la excepción de que si no hay archivos coincidentes, se registra un "punto de ruptura futuro"  para el patrón y la línea. La próxima vez que se carga un archivo que coincida con el patrón y la línea, un punto de interrupción se configurará . De esta manera, fbreak permite establecer puntos de interrupción en los archivos que aún no están cargados , así como establecer puntos de interrupción que se desencadenan cuando se carga un archivo .

+

Vista de Sesion Interactiva

+

Figure 12. The Interactive Session View. Command line interface to the debugger

+

Otro vista básica en Venkman es la deSesión Interactiva, que le permite interactuar con el depurador desde una línea de comandos.
+
+ Los comandos se introducen en el cuadro de texto , y las respuestas se añaden al final de la salida. Escriba /commands en la zona de entrada ( el cuadro de texto ) para listar todos los comandos disponibles. El comando /help se puede utilizar para obtener información adicional acerca de un comando específico . Puede escribir /help next, por ejemplo, para ver cómo se utiliza el comando /next.
+
+ El área de entrada soporta historial de comandos y el completado con tabulador para nombres de comandos. La historia de comandos recuerda los últimos 20 comandos introducidos . Las flechas hacia arriba y hacia abajo se pueden usar para revisar estos comandos anteriores. La implementación del tabulador permite al usuario escribir la primera parte de un comando, y presiona el tabulador dos veces para ver las terminaciones posibles . Si sólo hay un comando coincide , será auto - completado en la primera ficha .

+

Vista  Personalizacion

+

Venkman ofrece un control casi total sobre la disposición y visualización de puntos de vista dentro de la aplicación . El depurador se construye sobre un marco de aplicación que le permite arrastrar y soltar , cambiar el tamaño y cambiar todas las vistas disponibles , e incluso crear nuevas vistas o módulos para el depurador si usted elige , aunque este último es un tema avanzado y un tema para un próximo artículo.
+
+ Para eliminar una vista de Venkman , simplemente haga clic en el botón Cerrar en la parte superior derecha de ese punto de vista . Cuando la vista se hace necesario de nuevo - por ejemplo, cuando se abre un archivo fuente desde la vista Scripts Cargados y la vista de codigo fuente  reaparece donde estaba la última posicionado . Para hacer reaparecer una vista  de forma explícita , selecciónelo de la Ver-> Mostrar / Ocultar menú del depurador. Usted también puede hacer que las vistas floten en sus propias ventanas separadas. Para hacer flotar una vista, haga clic en el botón de flotador en la parte superior izquierda de esta opinión.
+
+ Usted puede acceder a cualquiera de las vistas básicas con las función de submenus Mostrar / Ocultar del menú View. La lista que se muestra incluye  todas las vistas básicas en Venkman. A medida que usted cambia  cuales vistas se muestran y donde aparecen en la interfaz de usuario, sus preferencias se almacenan y se mantienen en todas las sesiones.

+

 

+

Cargando scripts en el Debugger

+

Tanto si inicia Venkman primero o el componente del navegador, cuando se pone en marcha el conjunto de aplicaciones Mozilla  , el motor de JavaScript empieza a mantener la pista  y compilar todos los scripts que se cargan en páginas web y en las diversas interfaces de usuario propios de Mozilla . El motor informa a Venkman sobre los scripts que conoce , y los scripts se cargan en la vista "Scripts Loaded" en el depurador.
+
+ Si desea cargar nuevos scripts en -digamos desde una página web que está tratando de solucionar problemas - puede hacerlo con sólo abrir la página web en la ventana del navegador normal , momento en el cual el compilador pone la fuente JavaScript y rellena los Scripts Loaded ventana con la nueva entrada.
+
+ Usando Archivo- > Abrir en Venkman se abrirá un archivo local en el depurador, y el uso de Archivo-> Abrir dirección se abrirá y mostrará todo el contenido HTML de la página solicitada. Probablemente , ninguno de ellos es lo que realmente quieres . Puesto que el motor JavaScript rellena automáticamente la lista Scripts Cargados en el depurador con JavaScript que se ejecuta como el navegador abre páginas web , por lo general basta con navegar por los sitios cuyos guiones usted está interesado en la depuración.

+

 

+

Fundamentos de Depuracion

+

En esta sección se ofrece un breve ejemplo de una sesión de depuración con el fin de que se familiarice con algunos de los comandos básicos y operaciones del depurador.

+

Nota: En un momento dado , el depurador necesitaba iniciarse antes de los scripts que se iban a depurar . Esta limitación se resolvio y ahora el compilador de JavaScript hace que todas las secuencias de comandos que se acceden a través del navegador,  esten disponibles para el depurador. Consulte Carga de scripts en el depurador para más información sobre cómo encontrar y cargar scripts en Venkman .

+
    +
  1. Comience Venkman
    2. +
  2. Inicie una ventana de navegador y vaya a http://wp.netscape.com/fishcam/dhtmltank.html .
    3. +
+

Tenga en cuenta que en Mozilla y Netscape 7.x 1.x , el depurador contiene un menú Ventana al igual que otros componentes principales en la suite de aplicaciones . Desde este menú, se puede acceder al navegador , el correo y otras aplicaciones.

+
    +
  1. Tipee /break animator-0.03 121 en el depurador.
    2. +
+

El comando de consola  /break se utiliza para establecer los puntos de interrupción y la lista. El primer parámetro es el nombre del archivo que contiene el código JavaScript que quieras detener. El segundo parámetro es el número de línea. No es necesario especificar el nombre completo del archivo. En este ejemplo, estamos estableciendo un punto de interrupción en la función que se llama cuando el navegador se inicia la ventana fishcam DHTML. Alternativamente, usted puede seleccionar animator-0.03.js de la vista scripts cargados, localizar la función de pausa en la línea 119 , y haga clic en el margen izquierdo . Establecer puntos de interrupción de esta manera es equivalente a usar el comando /break en la consola. En cualquier caso, un icono de punto de interrupción roja aparece en la vista Código fuente .

+
    +
  1. Tipee  /break en el depurador.
    2. +
+

Si usted no proporciona argumentos para el comando / descanso, todos los puntos de interrupción se enumeran en la vista Sesión Interactiva .

+
    +
  1. En la página fishcam , pulse el enlace de "pausa" .
    2. +
  2. Usted debe impactar el punto de interrupción que acaba de establecer en el paso 3 .
    3. +
+

En la sesión interactiva , el contexto se convierte en animador - 0.03.js y el ámbito de aplicación es la función de pausa . También habrá "Paramos para punto de interrupción " en rojo en la sesión interactiva , junto con el nombre de archivo, número de línea, y el fragmento de código fuente desde donde se detuvo

+

 

+

Figura 13 . ( A partir del paso 5 ) se detuvo en un punto de interrupción .

+
    +
  1. En el campo de entrada de la sesión interactiva , escriba this.fPaused
    2. +
  2. Venkman evalúa la expresión , que le da [ boolean ] doble fondo . Pulse en Paso a paso para seguir los pasos hasta que haya terminado la depuración de la función y los peces ha detenido .
    3. +
  3.  
    4. +
  4. Además que intervenir , que se ejecutará una sola línea de código JavaScript y parar, Paso a paso se puede utilizar para pasar por encima de una llamada de función inminente , y devolver el control al depurador cuando se devuelve la llamada . Step Out se ejecuta hasta que la corriente llamada de función se cierra.
    5. +
  5. Haga clic en el enlace de "pausa " de nuevo en la página fishcam para reanudar la demo .
    6. +
  6. Esto inicia el DHTML abajo del otro código base en start () y hace que los peces comienzan a nadar de nuevo .
    7. +
  7. Como se puede ver , se trata de una introducción muy modesto para la funcionalidad del depurador de JavaScript y la complejidad que los scripts pueden tener . Pero los pasos descritos aquí le puede dar una sensación básica para el depurador si aún no lo ha tenido alguna experiencia con él , y servir de base para los ejemplos más interesantes y prácticos en los artículos que siguen a éste.
    8. +
  8. La mejor manera de conocer a Venkman , por supuesto, es para jugar un rato con él - para configurarlo de la manera que tiene más sentido para usted, para tratar de secuencias de comandos de carga y establecer puntos de interrupción , la evaluación de expresiones en la Sesión Interactiva View, viendo los valores de las variables a medida que cambian cuando los scripts se ejecutan , obteniendo datos del perfil.
    9. +
  9. extensiones de depuración
    10. +
  10. Aunque a primera vista podría parecer que Venkman no puede depurar extensiones , hacerlo es , de hecho, totalmente compatible ; es sólo desactivada por defecto.
    11. +
  11. Para depurar la extensión con Venkman ( archivos XUL y sus archivos adjuntos JS ) , que tendrá que cargar el navegador y archivos de extensión en Venkman desmarcando Test> Excluir archivos del navegador .
    12. +
+

Recursos

+


+ El uso de puntos de interrupción en Venkman - siguiente artículo sobre Venkman .
+ La página principal del Venkman en el MDC .

+
+

Original Document Information

+ +
+

diff --git "a/files/es/introducci\303\263n_a_la_extensi\303\263n_de_la_api_de_audio/index.html" "b/files/es/introducci\303\263n_a_la_extensi\303\263n_de_la_api_de_audio/index.html" new file mode 100644 index 0000000000..05d03694b4 --- /dev/null +++ "b/files/es/introducci\303\263n_a_la_extensi\303\263n_de_la_api_de_audio/index.html" @@ -0,0 +1,360 @@ +--- +title: Introducción a la extension del API de audio +slug: Introducción_a_la_extensión_de_la_API_de_audio +tags: + - para_revisar + - páginas_a_traducir +translation_of: Archive/Mozilla/Introducing_the_Audio_API_Extension +--- +

La extension de audio de la API se extiende de la especificación de HTML5 {HTMLElement("audio")}} y <video> multimedia mediante la exposición de elementos metadata de audio y datos puros en audio. Esto permite a los usuarios visualizar los datos de audio, para procesarlos y crear nuevos datos de audio.

+

Lectura de flujo de Audio

+

El loadedmetadata evento

+

Cuando la metadata multimedia del elemento está disponible, se desencadena un envento loadedmetadata. Este evento tiene los siguientes atributos:

+ +

Esta información es necesaria más adelante para descifrar la secuencia de datos de audio. En los siguientes ejemplos se extraen los datos de un elemento de audio:

+
				<!DOCTYPE html>
+
+				<html>
+
+				<head>
+
+					<title>Ejemplo JavaScript Metadata </title>
+
+				</head>
+
+					<body>
+
+						<audio id="audio-element"
+
+						src="song.ogg"
+
+						controls="true"
+
+						style="width: 512px;">
+
+						</audio>
+
+					    <script>
+
+					function loadedMetadata() {
+
+						channels          = audio.mozChannels;
+
+						rate              = audio.mozSampleRate;
+
+						frameBufferLength = audio.mozFrameBufferLength;
+
+					      }
+
+					var audio = document.getElementById('audio-element');
+
+					      audio.addEventListener('loadedmetadata', loadedMetadata, false);
+
+
+
+					    </script>
+
+					  </body>
+
+					</html>
+
+
+

El evento MozAudioAvailable

+

A medida que el audio se reproduce, los datos de muestras están disponible para la capa de audio y el buffer de audio (size definido en mozFrameBufferLength) se llenan con las muestras. Una vez que el buffer esta lleno, el eventoMozAudioAvailable se activa. Por lo tanto el evento contiene las muestras primas en un perido de tiempo. Esos muestreos pueden ser reproducidos o no en el momento que se hayan reproducido el evento y no se han ajustado para la configuración de mudo o volumen en el elemento de multimedia. Reproducir, pausar, y la búsqueda de audio tambien afecta transmision de estos datos de audio prima.

+

El evento MozAudioAvailable tiene 2 atributos:

+ +

El framebuffer contiene una serie de muestras de audio. Es importnt tener en cuenta que las muestras no son separados por canales, todos ellos son entregados juntos. Por ejemplo, para una señal de dos canales: Canal1-Ejemplo1 Canal2-Ejemplo1  Canal1-ejemplo2 Canal2-Ejemplo2 Canal1-Ejemplo3 Canal2-Ejemplo3.

+

Podemos extender el ejemplo anterior para visualizar la fecha y hora y las muestras de los dos primeros en un <div> elemento:

+
+
+			<!DOCTYPE html>
+
+			<html>
+
+				<head>
+
+					<title>Ejemplo de visualizacion en JavaScript</title>
+
+				<body>
+
+
+
+					<audio id="audio-element"
+
+					src="revolve.ogg"
+
+					controls="true"
+
+					style="width: 512px;">
+
+					</audio>
+
+					<pre id="raw">hello</pre>
+
+					<script>
+
+				function loadedMetadata() {
+
+					channels          = audio.mozChannels;
+
+					rate              = audio.mozSampleRate;
+
+					frameBufferLength = audio.mozFrameBufferLength;
+
+				}
+
+
+
+				function audioAvailable(event) {
+
+					        var frameBuffer = event.frameBuffer;
+
+					var t = event.time;
+
+
+
+
+
+					        var text = "Ejemplo: " + t + "\n"
+
+					        text += frameBuffer[0] + "  " + frameBuffer[1]
+
+					        raw.innerHTML = text;
+
+				}
+
+
+
+					      var raw = document.getElementById('raw')
+
+					var audio = document.getElementById('audio-element');
+
+					audio.addEventListener('MozAudioAvailable', audioAvailable, false);
+
+					      audio.addEventListener('loadedmetadata', loadedMetadata, false);
+
+
+
+					</script>
+
+				</body>
+
+			</html>
+
+
+
+
+

Creación de un flujo de audio

+

También es posible crear y configurar un <audio> elemento por escrito por raw de script (i.e., sin src atributos. Contiene scripts que pueden especificar audios característicos de los flujos, a continuación, escribir las muestras de audio. Los usuarios deben crear un objeto de audio y luego usar el mozSetup() función  especifica el numero de canales y frecuencia (en Hz).  Por Ejemplo:

+
+
+			// Crear un nuevo elemento de audio
+
+			var audioOutput = new Audio();
+
+			// Crea un elemento de audio con 2 canales, 44.1KHz audio flujo.
+
+			audioOutput.mozSetup(2, 44100);
+
+
+

Una vez terminado, los ejemplos necesitan ser creado. Estas muestras tienen el mismo formato que los de el eventomozAudioAvailable. Luego las muestra son escritas en el audio de flujo con la función mozWriteAudio(). Es importante observar que no todas las muestras podría obtener por escrito en el arroyo. La función retorna el número de muestras por escrito, que es útil para la redacción siguiente. Puede ver un ejemplo a continuación:

+
+
+			// Escribir ejemplo usando un JS Array
+
+			var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...];
+
+			var numberSamplesWritten = audioOutput.mozWriteAudio(samples);
+
+
+
+			// Escribir ejemplo usando un Typed Array
+
+			var samples = new Float32Array([0.242, 0.127, 0.0, -0.058, -0.242, ...]);
+
+			var numberSamplesWritten = audioOutput.mozWriteAudio(samples);
+
+
+

En el siguiente ejemplo, creamos un pulso de audio:

+
+
+			><!doctype html>
+
+				<html>
+
+				  <head>
+
+				     <title>Generando audio en tiempo real</title>
+
+				  <script type="text/javascript">
+
+				     function playTone() {
+
+				      var output = new Audio();
+
+
+
+				      output.mozSetup(1, 44100);
+
+				       var samples = new Float32Array(22050);
+
+				       var len = samples.length;
+
+
+
+				      for (var i = 0; i < samples.length ; i++) {
+
+				         samples[i] = Math.sin( i / 20 );
+
+				       }
+
+				              output.mozWriteAudio(samples);
+
+
+
+				     }
+
+				   </script>
+
+				 </head>
+
+				 <body>
+
+				   <p>Esta demo tiene un tono de un segundo al hacer clic en el botón de abajo.</p>
+
+				   <button onclick="playTone();">Play</button>
+
+
+
+				 </body>
+
+				 </html>
+

El mozCurrentSampleOffset() método da la posición sonora de la corriente de audio, es decir, la posición de la última muestra escuchado.

+
+
+				// Obtener la posición actual sonora de la secuencia de audio subyacentes, medido en las muestras.
+
+				var currentSampleOffset = audioOutput.mozCurrentSampleOffset();
+
+
+

Los datos de audio por escrito con el mozWriteAudio() método tiene que ser escrita en un intervalo regular en partes iguales, a fin de mantener un poco por delante de la muestra actual de compensación (offset de la muestra que está siendo desempeñado por el hardware se puede obtener con mozCurrentSampleOffset()), donde "un poco" quiere decir algo del orden de 500 ms de las muestras. Por ejemplo, si se trabaja con dos canales de 44.100 muestras por segundo, un intervalo de escritura de 100 ms, y un buffer de pre-igual a 500 ms, se podría escribir una serie de(2 * 44100 / 10) = 8820 muestras, y un total de (currentSampleOffset + 2 * 44100 / 2).

+

También es posible detectar automáticamente la duración mínima de la memoria previa, de tal manera que el sonido se reproduce sin interrupciones, y el desfase entre la escritura y la reproducción es mínimo. Para ello empezar a escribir los datos en pequeñas porciones y esperar a que el valor devuelto por mozCurrentSampleOffset() debe ser mayor que 0.

+
				var prebufferSize = sampleRate * 0.020; // Initial buffer is 20 ms
+
+				var autoLatency = true, started = new Date().valueOf();
+
+				...
+
+				// Auto latency detection
+
+				if (autoLatency) {
+
+				prebufferSize = Math.floor(sampleRate * (new Date().valueOf() - started) / 1000);
+
+				if (audio.mozCurrentSampleOffset()) { // Play position moved?
+
+				autoLatency = false;
+
+				}
+
+
+

El procesamiento de un audio de flujo

+

Desde el MozAudioAvailable evento y elmozWriteAudio() metodo ambos utilizan Float32Array valores, es posible tomar la salida de un flujo de audio y pasarlo directamente (o primer proceso y luego pasar) a un segundo. La secuencia de audio primero debe ser silenciado de manera que sólo el elemento secundario de audio que se escucha.

+
+
+				<audio id="a1"
+
+				src="song.ogg"
+
+				controls>
+
+				</audio>
+
+				<script>
+
+				var a1 = document.getElementById('a1'),
+
+				a2 = new Audio(),
+
+				buffers = [];
+
+
+
+				function loadedMetadata() {
+
+					// Mute a1 audio.
+
+					a1.volume = 0;
+
+					// Configuracion a2 de ser idéntica a la a1, y jugar por ahí.
+
+					a2.mozSetup(a1.mozChannels, a1.mozSampleRate);
+
+				}
+
+
+
+				function audioAvailable(event) {
+
+					// Escriba el actual framebuffer
+
+					var frameBuffer = event.frameBuffer;
+
+					writeAudio(frameBuffer);
+
+				}
+
+
+
+				a1.addEventListener('MozAudioAvailable', audioAvailable, false);
+
+				a1.addEventListener('loadedmetadata', loadedMetadata, false);
+
+
+
+				function writeAudio(audio) {
+
+				buffers.push(audio);
+
+
+
+					// Si hay buffer de datos, escribe que
+
+					while(buffers.length > 0) {
+
+						var buffer = buffers.shift();
+
+						var written = a2.mozWriteAudio(buffer);
+
+						// // Si todos los datos no se ha escrito,mantener los buffers:
+
+						if(written < buffer.length) {
+
+							buffers.unshift(buffer.slice(written));
+
+							return;
+
+							}
+
+					}
+
+				}
+
+				</script>
+
+
+

Ver Tambien

+ diff --git "a/files/es/introducci\303\263n_al_shell_de_javascript/index.html" "b/files/es/introducci\303\263n_al_shell_de_javascript/index.html" new file mode 100644 index 0000000000..2da3b2bec8 --- /dev/null +++ "b/files/es/introducci\303\263n_al_shell_de_javascript/index.html" @@ -0,0 +1,248 @@ +--- +title: Introducción al shell de JavaScript +slug: Introducción_al_shell_de_JavaScript +translation_of: Mozilla/Projects/SpiderMonkey/Introduction_to_the_JavaScript_shell +--- +

Introducción

+

Este artículo pretende servir como introducción a la descarga y compilación del shell de JavaScript desde el servidor CVS de Mozilla, prestando especial atención a la descarga y compilación de las versiones previas a las finales a modo de prueba y experimentación.

+

Además, este artículo proporciona información de uso básico sobre cómo se puede usar el shell para experimentar con código y ejecutar programas de JavaScript.

+

Descargando y compilando el shell de JavaScript

+

Traducciones para logging: * Entrar * Registrarse * Darse de alta???

+

Logueándose en el servidor CVS

+

Al igual que ocurre cuando se busca cualquier otro proyecto de Mozilla en el CVS, lo primero que hay que hacer es loguearse en el servidor CVS. Para hacer esto, hay que situarse en el directorio base en el que se encuentre el código al que quieres acceder y luego introducir el siguiente comando en la línea de comandos:

+
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot login
+
+

Cuando te lo pregunte, introduce la contraseña <tt>anonymous</tt>.

+

Compilando una versión trunk de JavaScript

+

Una vez logueado en el servidor, es hora de buscar el código en el CVS. Primero hay que situarse en el directorio raíz del árbol CVS y luego es necesario introducir el siguiente comando:

+
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm
+
+

Esto comprueba todos los ficheros que hacen falta para compilar el shell de JavaScript.

+

Ahora puedes compilar JavaScript ejecutando los dos siguientes comandos:

+
cd mozilla/js/src
+make -f Makefile.ref
+
+

Cuando finalice la compilación, debería de haber un ejecutable llamado <tt>js</tt> en un directorio cuyo nombre depende del sistema en el que se ha realizado la compilación. Por ejemplo, en Mac OS X, el ejecutable estará ubicado en <tt>Darwin_DBG.OBJ/js</tt>.

+

En este momento, ya estás listo para ejecutar y probar el shell.

+

Compilando una versión branch de JavaScript

+

Si lo que quieres es experimentar con las versiones con lo último de JavaScript, necesitarás compilar una versión branch de JavaScript. Se hace de forma igual a la compilación de la versión trunk, excepto que hay que comprobar la versión branch del código en lugar de la versión trunk.

+

Realiza los mismos pasos explicados anteriormente y cuando compruebes los ficheros, cambia la línea <tt>cvs co...</tt> por

+
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -l -rbranch_name mozilla/js/src mozilla/js/src/config mozilla/js/src/editline mozilla/js/src/fdlibm
+
+

Sustituye + + branch_name + por el nombre de la versión branch comprobada. Por ejemplo, para comprobar la versión alpha branch de JavaScript 1.7 se debe poner <tt>JS_1_7_ALPHA_BRANCH</tt>.

+

Luego puedes seguir la compilación y ejecutar el shell como se ha explicado antes.

+

Usando el shell de JavaScript

+

El shell proporciona dos modos de operación. Puedes usarlo como shell interactivo, en el cual se puede escribir código JavaScript y se obtienen respuestas inmediatas; algo que es útil para experimentar o probar nuevas características. Además se le puede pasar (en la línea de comandos) un fichero que contenga un programa JavaScript para ejecutarlo, en cuyo caso el programa es ejecutado automáticamente.

+
+ Nota: Dado que el shell de JavaScript es usado como entorno de pruebas para el motor JavaScript, las opciones disponibles y las funciones incorporadas pueden cambiar con el tiempo.
+

Opciones en línea de comandos

+

Existen una serie de opciones en línea de comandos que se pueden especificar para controlar el shell. Se muestran a continuación:

+ +

Ejecutando el shell

+

Si quieres ejecutar el shell en modo interactivo, simplemente hay que usar el comando:

+
js
+
+

Si lo que quieres es ejecutar el código JavaScript dle fichero <tt>foo.js</td>, debes usar este comando: </tt>

+
js -f foo.js
+
+

Para ejecutar <tt>foo.js y luego volver al shell interactivo, haz esto:

+
js -f foo.js -f -
+
+

Usando el shell en modo interactivo

+

En el modo interactivo puedes introducir código JavaScript a mano para crear objetos y funciones, además de escribir sentencias. Esta es una buena forma de probar ideas y, de un modo más importante para los desarrolladores que trabajan en el motor de JavaScript, probar nuevas características del lenguaje.

+

Funciones integradas

+

Para hacer al shell de JavaScript más útil, existen un número de funciones integradas para que puedan ser usadas desde los programas JavaScript o en modo interactivo.

+

build()

+

Devuelve la fecha y hora en la que fue compilado el shell de JavaScript.

+

clear( + + [objeto] + )

+

Elimina las propiedades del objeto especificado. Llamando a clear() sin ningún parámetro se deja el entorno limpio como una patena.

+
+ Nota: clear() sin parámetros se lo cepilla absolutamente todo. Esto incluye a estas funciones integradas.
+

clone( + + función, [ámbito] + )

+

Clona el objeto funcion especificado. Si ámbito no es especificado, el padre del nuevo objeto será el mismo que el del objeto original. En otro caso, el nuevo objeto es ubicado en el ámbito del objeto especificado por ámbito.

+

dis( + + [funcion] + )

+

Desensambla el programa o la función especificada en bytecodes de JavaScript.

+

Por ejemplo, si introduces la siguiente función de JavaScript:

+
function test() {
+  var i = 3;
+  print(i+2);
+}
+
+

entonces al ejectuar el comando <tt>dis(test);</tt> se obtiene esta salida:

+
main:
+00000:  uint16 3
+00003:  setvar 0
+00006:  pop
+00007:  name "print"
+00010:  pushobj
+00011:  getvar 0
+00014:  uint16 2
+00017:  add
+00018:  call 1
+00021:  pop
+00022:  stop
+
+Source notes:
+  0:     0 [   0] newline
+  1:     3 [   3] var
+  2:     7 [   4] newline
+  3:    18 [  11] xdelta
+  4:    18 [   0] pcbase   offset 11
+
+

dissrc( + + [función] + )

+

Desensambla el programa o la función especificada en bytecodes JavaScript, mostrando las líneas del código fuente. Esta función sólo funciona con programas cargados desde fichero, bien usando el modificador -f al lanzar el shell o usando la función load()</coad>

+

Si el programa incluye una función, <code>doStuff() como esta:

+
function doStuff(input) {
+	print("Introduce un número: ");
+	var n1 = readline();
+	print("Introduce otro: ");
+	var n2 = readline();
+
+	print("Has introducido " + n1 + " and " + n2 + "\n");
+}
+
+

al llamar a la función dissrc(doStuff) se obtiene la siguiente salida:

+
;-------------------------  10:         print("Introduce un número: ");
+00000:  10  name "print"
+00003:  10  pushobj
+00004:  10  string "Introduce un número: "
+00007:  10  call 1
+00010:  10  pop
+;-------------------------  11:         var n1 = readline();
+00011:  11  name "readline"
+00014:  11  pushobj
+00015:  11  call 0
+00018:  11  setvar 0
+00021:  11  pop
+;-------------------------  12:         print("Introduce otro: ");
+00022:  12  name "print"
+00025:  12  pushobj
+00026:  12  string "Introduce otro: "
+00029:  12  call 1
+00032:  12  pop
+;-------------------------  13:         var n2 = readline();
+00033:  13  name "readline"
+00036:  13  pushobj
+00037:  13  call 0
+00040:  13  setvar 1
+00043:  13  pop
+;-------------------------  14:
+;-------------------------  15:         print("Has introducido " + n1 + " and " + n2 + "\n");
+00044:  15  name "print"
+00047:  15  pushobj
+00048:  15  string "Has introducido "
+00051:  15  getvar 0
+00054:  15  add
+00055:  15  string " and "
+00058:  15  add
+00059:  15  getvar 1
+00062:  15  add
+00063:  15  string "\\n"
+00066:  15  add
+00067:  15  call 1
+00070:  15  po
diff --git a/files/es/ipdl/index.html b/files/es/ipdl/index.html new file mode 100644 index 0000000000..cfada43bdb --- /dev/null +++ b/files/es/ipdl/index.html @@ -0,0 +1,18 @@ +--- +title: IPC Protocol Definition Language (IPDL) +slug: IPDL +translation_of: Mozilla/IPDL +--- +

IPDL, abreviado de "IPC (Inter-process communication) Protocol Definition Language" o Lenguaje de Definición de Protocolo para la Comunicación Entre Procesos, es un lenguaje específico de Mozilla que permite código C++ pasar mensajes entre procesos o hilos de manera organizada y segura. Todos los mensajes de plugins multi-procesos y pestañas dentro de Firefox se declaran en lenguaje IPDL.

+ + diff --git a/files/es/javascript_code_modules/using/index.html b/files/es/javascript_code_modules/using/index.html new file mode 100644 index 0000000000..42c7b01bd9 --- /dev/null +++ b/files/es/javascript_code_modules/using/index.html @@ -0,0 +1,138 @@ +--- +title: Usando módulos de código JavaScript +slug: JavaScript_code_modules/Using +tags: + - páginas_a_traducir +translation_of: Mozilla/JavaScript_code_modules/Using +--- +

{{ Fx_minversion_header(3) }}

+ +

Los módulos de código JavaScript son un concepto introducido en Firefox 3 (Gecko 1.9) y pueden ser usados para compartir código entre alcances (scopes) con diferentes privilegios. Los módulos pueden también ser usados para crear instancias únicas (singletons) globales de JavaScript que previamente requerian usar objetos XPCOM de JavaScript. Un módulo de código JavaScript es simplemente una porción de código JavaScript situado en una ubicación registrada. El módulo es cargado dentro de un alcance (scope) de JavaScript específico, tal como un script de XUL o un script XPCOM de JavaScript, usando Components.utils.import.

+ +

Creación de módulos JavaScript

+ +

Los módulos JavaScript tienen dos secciones: 1. un array EXPORTED_SYMBOLS en el que se declaran como "símbolos" los objetos, propiedades y métodos que serán empleados por los scripts que los importen. Y, 2. El código, que trata las propiedades y métodos de los "símbolos" exportados. Un muy sencillo módulo de JavaScript luce como esto:

+ +
var EXPORTED_SYMBOLS = ["foo", "bar"]
+
+function foo() {
+  return "foo";
+}
+
+var bar = {
+  name : "bar",
+  size : "3"
+};
+
+var dummy = "dummy";
+
+ +

Nótese que el módulo usa JavaScript normal para crear funciones, objetos, constantes y cualquier otro tipo JavaScript. Sólo los elementos declarados en el Array especial EXPORTED_SYMBOLS serán accesibles desde el exterior del módulo; los demás quedan encapsulados y no son accesibles fuera del mismo. Cualquier elemento de JavaScript nombrado en EXPORTED_SYMBOLS será exportado desde el módulo e insertado dentro del alcance (scope) importador. Por ejemplo:

+ +
Components.utils.import("resource://app/modules/my_module.jsm");
+
+alert(foo());         // muestra "foo"
+alert(bar.size + 3);  // muestra "6"
+alert(dummy);         // muestra "dummy is not defined" porque 'dummy' no fue exportado desde el módulo.
+
+ +

La URL de un módulo JavaScript

+ +

Como se puede apreciar en el ejemplo, arriba, hace falta un llamado empleando una dirección URL para poder importar los módulos JavaScript. Éstos, normalmente, se crean como archivos planos con extensión jsm y se almacenan el el directorio /modules del aplicativo (XUL) o extensión para el que son creados. Y, se cargan usando un protocolo "resource:" (en el ejemplo) al presentar la URL como parámetro del llamado.

+ +

Sólo se pueden emplear los protocolos "chrome:" ( Requiere Gecko 2) "resource:" o "file:"para cargar módulos JavaScript.

+ + + +

Compartiendo objetos mediante módulos

+ +

Un comportamiento extremadamente importante de Components.utils.import es que los módulos son cacheados cuando se cargan e importaciones posteriores no recargan una nueva versión del módulo, sino que usan la version cacheada anteriormente. Esto significa que un módulo dado será compartido cuando sea importado varias veces. Cualquier modificacion a datos, objetos o funciones estarán disponibles en cualquier alcance (scope) que haya importado el módulo. Por ejemplo, si el modulo de ejemplo fue importado en dos alcances (scopes) diferentes de JavaScript, los cambios en un alcance (Scope) serán visibles desde el otro alcance (scope).

+ +

Alcance (scope) 1:

+ +
Components.utils.import("resource://app/modules/my_module.jsm");
+
+alert(bar.size + 3);  // muestra "6"
+
+bar.size = 10;
+
+ +

Alcance (scope) 2:

+ +
Components.utils.import("resource://app/modules/my_module.jsm");
+
+alert(foo());         // muestra "foo"
+alert(bar.size + 3);  // muestra "13"
+
+ +

Este comportamiento de compartir puede ser usado para crear objetos singleton que compartan datos entre ventanas y entre scripts XUL y componentes XPCOM.

+ +
Nota: Cada ámbito (alcance) al que sea importado un módulo recibe una copia por-valor de los símbolos exportados por el módulo. De modo que los cambios que allí se realicen para los mismos no se verán reflejados en otros lugares. (Ésto garantiza que los "nombres" de los símbolos exportados no cambien para otros sitios y se pueda hacer referencia los mismos de modo uniforme)
+ +

Alcance 1

+ +
 Components.utils.import("resource://app/my_module.jsm");
+
+bar = "foo";
+alert(bar);         // muestra "foo"
+
+ +

Alcance 2

+ +
Components.utils.import("resource://app/my_module.jsm");
+
+alert(bar);         // muestra "[object Object]"
+ +

resource: Protocol

+ +

Cuando uses Components.utils.import, notarás que los módulos de código son cargados usando el protocolo "resource://". La sintaxis básica de un recurso URL es como sigue:

+ +
resource://<alias>/<ruta-relativa>/<archivo.js|jsm>
+
+ +

El <alias> es un alias a una ubicación, usualmente una hubicación física relativa a la aplicación o al runtime de XUL. Existen algunos alias predefinidos por defecto por el runtime de XUL runtime:

+ + + +

La <ruta-relativa> puede tener múltiples niveles de profundidad y siempre es relativa a la ubicación definida por el <alias>. La ruta relativa común es "modules" y es usada por XUL Runner and Firefox. Los módulos de código son simples archivos JavaScript con la extensión .js o .jsm.

+ +

La manera mas sencilla para extensiones y aplicaciones XUL de agregar alias propios es al registrar un alias en el manifiesto chrome usando algo como esto:

+ +
resource nombrealias uri/a/los/archivos/
+
+ +

Por ejemplo, si el XPI de tu extension foo incluye un directorio de primer nivel de módulos conteniendo el módulo bar.js, podrías crear un alias a ese directorio mediante la instrucción:

+ +
resource foo modules/
+
+ +

Podrias entonces importar el módulo en tu código JavaScript mediante la sentencia:

+ +
Components.utils.import("resource://foo/bar.js");
+
+ +

Los alias propios pueden también ser agregados programáticamente al protocolo de recursos. Por ejemplo:

+ +
var ioService = Components.classes["@mozilla.org/network/io-service;1"]
+                          .getService(Components.interfaces.nsIIOService);
+var resProt = ioService.getProtocolHandler("resource")
+                       .QueryInterface(Components.interfaces.nsIResProtocolHandler);
+
+var aliasFile = Components.classes["@mozilla.org/file/local;1"]
+                          .createInstance(Components.interfaces.nsILocalFile);
+aliasFile.initWithPath("/some/absolute/path");
+
+var aliasURI = ioService.newFileURI(aliasFile);
+resProt.setSubstitution("myalias", aliasURI);
+
+// asumiendo que el módulo de código está en el directorio de alias misma, no en un subdirectorio
+Components.utils.import("resource://myalias/file.jsm");
+
+// ...
+
diff --git a/files/es/l10n_en_mercurial/index.html b/files/es/l10n_en_mercurial/index.html new file mode 100644 index 0000000000..2f16f31966 --- /dev/null +++ b/files/es/l10n_en_mercurial/index.html @@ -0,0 +1,133 @@ +--- +title: L10n en Mercurial +slug: L10n_en_Mercurial +tags: + - Localización + - para_revisar +translation_of: Mozilla/Localization/Localizing_with_Mercurial +--- +

{{ Fx_minversion_header(3.1) }} Traducir Firefox 3.1, SeaMonkey 2.0 y Thunderbird 3.0 supone trabajar con Mercurial. La documentación es incompleta; si tienes preguntas, por favor, déjate caer por #l10n o #hg en irc.mozilla.org, o pregunta en la página Discusión de este artículo.

+

Hay varios documentos sobre cómo tratar con Mercurial en MDC, etiquetados con "Mercurial". En particular, la FAQ de Mercurial merece la pena. Para los más impacientes y rápidos, aquí hay algunas órdenes para que descarguéis en-US, un repositorio de idioma y un .mozconfig  que debería permitiros crear paquetes de idioma y binarios.

+

Herramientas

+

Existen varias herramientas para conectarse a Mercurial, comenzando, por supuesto, con el cliente de línea de comandos. Sin embargo, para aquellos de vosotros que preferís herramientas GUI, están TortoiseHg para Windows y Mercurial Eclipse para los fans de este entorno de plataforma.

+

Repositorios

+

Hay dos repositorios que contienen archivos en-US:

+ +

{{ Note("Cuando descargas el repositorio comm-central, éste incluye también el repositorio mozilla-1.9.2. Por tanto puedes usar una sola configuración para desarrollar o traducir Firefox, SeaMonkey y Thunderbird sin tener que descargar mozilla-1.9.2 una segunda vez.") }}

+

Descargar en-US por primera vez

+

Para descargar los archivos en-US,  tendrás que descargar mozilla-1.9.2 (o -central) o comm-central.

+

Sólo Firefox

+

Si sólo trabajas con Firefox usa:

+
hg clone http://hg.mozilla.org/mozilla-central/
+
+

Esto creará un clon del repositorio mozilla-1.9.2 en el directorio mozilla-1.9.2.

+

Cualquier combinación entre Firefox, SeaMonkey y Thunderbird

+

Si estás trabajando con cualquier combinación de Firefox, SeaMonkey y Thunderbird, usa:

+
hg clone http://hg.mozilla.org/comm-central/
+cd comm-central
+python client.py checkout
+
+

La primera orden creará un clon del repositorio comm-central en el directorio comm-central. La segunda orden cambiará tu directorio actual a ese directorio, comm-central.

+

La tercera orden creará un clon del repositorio mozilla-1.9.2 y recuperará varios directorios CVS. Los directorios CVS son necesarios para SeaMonkey y Thunderbird, algunos de ellos son código antiguo que SeaMonkey y Thunderbird están en proceso de dejar de usar, y algunas extensiones que todavía no están en Mercurial.

+

Actualizar en-US

+

Para actualizar tu copia de trabajo de mozilla-1.9.2, ve a tu directorio mozilla-1.9.2 y ejecuta

+
hg pull -u
+
+

Esto recuperará los nuevos conjuntos de cambios de mozilla-1.9.2 y aplicará esos cambios en tu copia de trabajo.

+

Para actualizar tu copia de trabajo de comm-central, ve a tu directorio comm-central y ejecuta

+
python client.py checkout
+
+

Esto recuperará los últimos cambios de comm-central, mozilla-1.9.2 y el resto de orígenes, y aplicará dichos cambios en tu copia de trabajo.

+

Descargar tu idioma

+

Todos los idiomas están en un MXR, . Los repositorios están, no obstante, separados: puedes conseguir una lista de los repositorios en . Para clonar tu localización, por favor usa (en este caso "ab-CD" es el código de idioma, sustitúyelo al correspondiente)

+
hg clone http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/ab-CD/
+

o actualiza con

+
hg pull -u
+
+

Subir tus cambios a Mozilla

+

Con Mercurial trabajas en tu propio repositorio. Antes de hacer commit de tus propios cambios debes asegurarte de que no ha habido cambios más recientes al repositorio remoto; para ello, actualiza tu idioma como se indica en la sección anterior.

+

Tras terminar un cambio o conjunto de cambios y asegurarte de que tienes tu repositorio local actualizado, debes aplicar éstos (commit):

+
hg commit -m "message identifying the change (bug 555)"
+
+

El mensaje debe estar en inglés, por eso hemos dejado el ejemplo igual al documento original.

+

A diferencia de CVS esta orden no aplicará tus cambios al repositorio de Mozilla. Primero necesitas subir los cambios (push). Para subir a l10n-central y otros repositorios alojados en Mozilla debes tener acceso de escritura (committer) y debes editar el archivo (tu-raíz-hg-local)/.hg/hgrc (observa que éste NO es tu ~/.hgrc) para añadir esta línea (reemplazando email@host con tu nombre de usuario en Mozilla):

+
[paths]
+default = http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/ab-CD/
+default-push = ssh://hg.mozilla.org/releases/l10n-m...a-1.9.2/ab-CD/
+central = ssh://hg.mozilla.org/l10n-central/ab-CD/
+
+
+

Tendrás que decirle a ssh qué cuenta usar para subir tus cambios, editando ~/.ssh/config y añadiendo las líneas

+
Host hg.mozilla.org
+User user@host.domain
+
+

user@domain es tu cuenta, con un @ real en lugar del % que usabas con CVS. Tras ello, podrás subir tu trabajo al repositorio (y comprobar el resultado en el panel de control):

+
hg push
+

Un .mozconfig

+

Firefox a través de mozilla-central

+

Si has seguido los pasos anteriores para descargar sólo mozilla-1.9.2, tu estructura de directorios tendrá este aspecto:

+
mozilla-1.9.2
++ browser
+de
++ browser
+
+

y un .mozconfig sería así:

+
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../fx-de
+ac_add_options --with-l10n-base=..
+ac_add_options --disable-compile-environment
+ac_add_options --enable-application=browser
+
+

Pondrías ese archivo en el directorio mozilla-1.9.2.

+
Nota: el --with-l10n-base es relativo al directorio obj, no al src.
+

Si deseas compilar directamente una versión localizada, añade la línea

+
ac_add_options --enable-ui-locale=<language code>
+
+

Otra opción es no compilar con esto, y crear y usar un paquete de idioma como se explica a continuación.

+

Firefox a través de comm-central

+

Si has seguido los pasos anteriores para descargar comm-central, tu estructura de directorios tendrá este aspecto:

+
comm-central
++ mozilla
+  + browser
+de
+  + browser
+
+

y un .mozconfig tendría esta apariencia:

+
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../../fx-de
+ac_add_options --with-l10n-base=..
+ac_add_options --disable-compile-environment
+ac_add_options --enable-application=browser
+

{{ Note("La orden make -f client.mk configure debe ejecutarse desde el directorio comm-central/mozilla.") }}

+

La línea --with-l10n-base es correcta con únicamente "..". Esto se debe a la manera en que funciona el entorno dentro de comm-central.

+

El archivo debería colocarse en comm-central/mozilla.

+

La misma observación se aplica a la compilación de una versión localizada.

+

Thunderbird y SeaMonkey

+

Si has seguido los pasos anteriores para descargar comm-central, tu estructura de directorios tendrá este aspecto:

+
comm-central
++ mail
++ suite
+de
++ mail
++ suite
+
+

y un .mozconfig para Thunderbird se parecería a éste:

+
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../tb-de
+ac_add_options --with-l10n-base=..
+ac_add_options --disable-compile-environment
+ac_add_options --enable-application=mail
+
+

Sustituye tb-de con sm-de y mail con suite para tener un .mozconfig para SeaMonkey.

+

El archivo debería colocarse en comm-central.

+

La misma observación se aplica a la compilación de una versión localizada.

+

Ejecuta la orden make -f client.mk configure desde el directorio comm-central.

+

Compare-locales

+

Compare-locales funciona igual que lo hacía anteriormente, para Firefox:

+
compare-locales mozilla-central/browser/locales/l10n.ini . de
+
+

o para Thunderbird:

+
compare-locales comm-central/mail/locales/l10n.ini . de
+
+

Sustituye mail con suite si quieres comprobar SeaMonkey.

+

{{ Note("Esta orden puede no funcionar correctamente para Thunderbird y SeaMonkey, está en proceso de solucionarse.") }}

Construir paquetes de idiomas, etc.

+

Hay un pequeño cambio aquí, tienes que añadir --with-l10n-base como argumento de configure, apuntando al directorio base de tu repositorio l10n. Sigue Creating a Language Pack, ajustando las rutas según sea necesario.

+

{{ languages( { "fr": "fr/Localisation_avec_Mercurial", "en": "en/L10n_on_Mercurial" } ) }}

diff --git a/files/es/la_plataforma_mozilla/index.html b/files/es/la_plataforma_mozilla/index.html new file mode 100644 index 0000000000..ef9aca5013 --- /dev/null +++ b/files/es/la_plataforma_mozilla/index.html @@ -0,0 +1,13 @@ +--- +title: La plataforma Mozilla +slug: La_plataforma_Mozilla +tags: + - para_revisar +translation_of: Mozilla/The_Mozilla_platform +--- +

El proyecto Mozilla incluye varias tecnologías que, en conjunto, constituyen la plataforma Mozilla.  Estos enlaces te dirigirán a la documentación sobre cada una de ellas y sobre el uso de la plataforma Mozilla para construir tus propios proyectos.

+ +

Temas de la documentación

Participación en el proyecto Mozilla
Artículos sobre el proyecto Mozilla, incluyendo cómo contribuir al proyecto Mozilla.
La Guía para desarrolladores de Mozilla
Herramientas, consejos y documentación para trabajar con el código fuente de Mozilla.
El uso de código de Mozilla en otros proyectos
Cómo utilizar las tecnologías de Mozilla en tus propios proyectos.
JavaScript
Gran parte del proyecto Mozilla está escrito en JavaScript.
XPCOM
Información sobre el Cross-Platform Component Object Model, que se utiliza para que los componentes escritos en lenguajes diferentes se comuniquen entre sí.
Interfaces
Documentación sobre las distintas interfaces que añaden funcionalidad a la plataforma.
XUL
Las interfaces de usuario en los proyectos de Mozilla se describen a través del XML User Interface Language.
XBL
El Extensible Binding Language se utiliza para enlazar elementos de interfaz de usuario creados en XUL para los eventos que se controlan por código.
Seguridad
La información relacionada con la seguridad en el proyecto Mozilla.
Móvil
Información sobre el proyecto Fennec, una versión de Firefox para dispositivos móviles.
Accesibilidad
Información sobre accesibilidad, un concepto que se refiere a la posibilidad de utilización de un determinado software por parte de las personas con discapacidad.
Control de calidad
Documentación sobre todos los tipos de pruebas.

Herramientas

+
Bugzilla
La base de datos Bugzilla se usa para rastrear los problemas o incidencias relacionados con los proyectos de Mozilla.
MXR
Navega y busca en el repositorio de código fuente de Mozilla en la Web.
Bonsai
La herramienta Bonsai te permite saber quién cambió qué archivo en el repositorio y cuándo lo hicieron.
Tinderbox
Tinderbox muestra el estado del árbol (si actualmente se construye o no con éxito).  Compruébalo antes de proteger (check in) o desplegar (check out) y asegúrate de que estás trabajando con un árbol de trabajo.
Seguimiento de errores
Información sobre los sistemas de notificación de fallos Socorro y Talkback
Seguimiento del rendimiento
Consulta la información sobre rendimiento para los proyectos de Mozilla.
Foros para desarrolladores
Una lista de temas específicos de foros de discusión, donde puedes hablar sobre temas de desarrollo de Mozilla.
+
+

{{ languages ({"en": "en/The_Mozilla_project", "ja": "ja / The_Mozilla_platform"}) }}

diff --git a/files/es/learn/accessibility/accessibility_troubleshooting/index.html b/files/es/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..2509ef8aa5 --- /dev/null +++ b/files/es/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,144 @@ +--- +title: 'Evaluación: Solución de problemas de accesibilidad' +slug: Learn/Accessibility/Accessibility_troubleshooting +tags: + - Accesibilidad + - Aprender + - CSS + - Evaluación + - HTML + - JavaScript + - Principiante + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
+ +

En la evaluación de este módulo, le presentamos un sitio simple con una serie de problemas de accesibilidad que necesita diagnosticar y corregir.

+ + + + + + + + + + + + +
Requisitos previos:Conocimiento de informática básica, una comprensión básica de HTML, CSS y JavaScript, una comprensión de los artículos anteriores del curso.
Objectivo:Probar los conocimientos básicos de los fundamentos de accesibilidad.
+ +

Punto de partida

+ +

Para iniciar esta evaluación, debe ir y tomar el archivo ZIP que contiene los archivos que componen el ejemplo. Descomprima el contenido en un nuevo directorio en algún lugar del equipo local.

+ +

Alternativamente, podría usar un sitio como JSBin  o  Glitch  para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel CSS/JS independiente, no dude en colocarlos en elementos apropiados <style>  /  <script>.  

+ +

El sitio de evaluación terminado debe tener este aspecto:

+ +

+ +

Verá algunas diferencias/problemas con la visualización del estado inicial de la evaluación — esto se debe principalmente a las diferencias en el marcado, que a su vez causan algunos problemas de estilo, ya que el CSS no se aplica correctamente. No se preocupe, ¡estará solucionando estos problemas en las próximas secciones!

+ +
+ + + + + + +
+

Nota: Si se queda atorado, pídanos ayuda — consulta la sección Evaluación o más ayuda en la parte inferior de esta página.

+
+
+ +

Resumen del proyecto

+ +

Para este proyecto, se le presenta un sitio ficticio de la naturaleza que muestra un artículo "fáctico" sobre los osos. Tal como está, tiene una serie de problemas de accesibilidad: su tarea es explorar el sitio existente y solucionarlos lo mejor de sus capacidades, respondiendo a las preguntas que se indican a continuación.

+ +

Color

+ +

El texto es difícil de leer debido al esquema de color actual. ¿Puede realizar una prueba del contraste de color actual (texto/fondo), notificar los resultados de la prueba y, a continuación, corregirla cambiando los colores asignados?

+ +

HTML Semántico

+ +
    +
  1. El contenido todavía no es muy accesible: informe sobre lo que sucede cuando intenta navegar por él mediante un lector de pantalla.
    2. +
  2. ¿Puede actualizar el texto del artículo para facilitar la navegación de los usuarios del lector de pantalla?
    3. +
  3. La parte del menú de navegación del sitio (limitada por <div class="nav"></div>) podría ser más accesible poniéndolo en un elemento semántico HTML5 adecuado. ¿A cuál debería actualizarse? Realice la actualización.
    4. +
+ +
+ + + + + + +
+

Nota: Tendrá que actualizar los selectores de reglas CSS que estilan las etiquetas a sus equivalentes adecuados para los encabezados semánticos. Una vez que agregue elementos de párrafo, notará que el estilo se ve mejor.

+
+
+ +

Las imágenes

+ +

Las imágenes son actualmente inaccesibles para los usuarios del lector de pantalla. ¿Puede arreglarlo?

+ +

El reproductor de audio

+ +
    +
  1. El reproductor de <audio> no es accesible para personas con discapacidad auditiva (sordos) - ¿podría añadir algún tipo de alternativa accesible para estos usuarios?
    2. +
  2. El reproductor de <audio> no es accesible para aquellos que utilizan navegadores más antiguos que no admiten audio HTML5. ¿Cómo podrías permitir que sigan accediendo al audio?
    3. +
+ +

Los formularios

+ +
    +
  1. El elemento <input> en el formulario de búsqueda en la parte superior se podría hacer con una etiqueta, pero no queremos agregar una etiqueta de texto visible que potencialmente estropearía el diseño y realmente no es necesaria para los usuarios sin discapacidad visual. ¿Cómo podría agregar una etiqueta a la que solo puedan acceder los lectores de pantalla?
    2. +
  2. Los dos elementos <input> del formulario en el comentario tienen etiquetas de texto visibles, pero no están inequívocamente asociados con sus etiquetas, ¿cómo lograría esto? Tenga en cuenta que también tendrá que actualizar parte de la regla CSS.
    3. +
+ +

El control de mostrar/ocultar comentarios

+ +

El botón de control de mostrar/ocultar comentarios no es accesible por teclado actualmente. ¿Puede hacerlo accesible al teclado, tanto en términos de enfocarlo usando la tecla de tabulación como de activarlo usando la tecla de retorno?

+ +

La tabla

+ +

La tabla de datos no es muy accesible actualmente: es difícil para los usuarios del lector de pantalla asociar filas y columnas de datos, y la tabla tampoco tiene ningún tipo de resumen para dejar claro lo que muestra. ¿Puede agregar algunas características a su HTML para solucionar este problema?

+ +

¿Otras consideraciones?

+ +

¿Puede enumerar dos ideas más para mejoras que podrían hacer que el sitio web sea más accesible?

+ +

Evaluación o más ayuda

+ +

Si desea que se evalúe su trabajo, o si está atorado y desea pedir ayuda:

+ +
    +
  1. Ponga su trabajo en un editor compartible en línea como CodePen,  jsFiddleo  Glitch.
    2. +
  2. Escribe una publicación pidiendo evaluación y/o ayuda en la categoría Aprendizaje del foro de discurso mdn. Su publicación debe incluir:Un título descriptivo como "Evaluación deseada para la solución de problemas de accesibilidad".
    3. +
  3. +
      +
    • Detalles de lo que ya ha intentado, y lo que le gustaría que hagamos, por ejemplo, si está atascado y necesita ayuda, o quiere una evaluación.
      • +
    • Un enlace al ejemplo con el que desea evaluar o necesita ayuda, en un editor de compartición en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica a adquirir - es muy difícil ayudar a alguien con un problema de codificación si no se puede ver su código.
      • +
    • Un enlace a la tarea actual o página de evaluación, para que podamos encontrar la pregunta con la que desea ayuda.
      • +
    +
    4. +
+ +

{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/accessibility/css_and_javascript/index.html b/files/es/learn/accessibility/css_and_javascript/index.html new file mode 100644 index 0000000000..5f12f39466 --- /dev/null +++ b/files/es/learn/accessibility/css_and_javascript/index.html @@ -0,0 +1,359 @@ +--- +title: Buenas prácticas de accesibilidad CSS y JavaScript +slug: Learn/Accessibility/CSS_and_JavaScript +translation_of: Learn/Accessibility/CSS_and_JavaScript +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +

CSS y JavaScript, cuando se usan correctamente, también tienen el potencial de permitir experiencias web accesibles... o pueden dañar significativamente la accesibilidad si se usan incorrectamente. Este artículo describe algunas de las mejores prácticas de CSS y JavaScript que deben tenerse en cuenta para garantizar que incluso el contenido complejo sea lo más accesible posible.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML, CSS y JavaScript, y comprensión de qué es la accesibilidad.
Objetivo: +

Familiarizarse con el uso apropiado de CSS y JavaScript en documentos web para maximizar la accesibilidad y no restarle valor.

+
+ +

¿CSS y JavaScript son accesibles?

+ +

CSS y JavaScript no tienen la misma importancia inmediata para la accesibilidad que HTML, pero aún así pueden ayudar o dañar la accesibilidad, dependiendo de cómo se usen. Para decirlo de otra manera, es importante considerar algunos consejos de buenas prácticas para asegurarse de que el uso de CSS y JavaScript no arruina la accesibilidad de tus documentos.

+ +

CSS

+ +

Comencemos estudiando CSS.

+ +

Semántica correcta y expectativas del usuario

+ +

Es posible usar CSS para hacer que cualquier elemento HTML se vea como cualquier cosa, pero esto no significa que deba hacerse. Como mencionamos con frecuencia en nuestro artículo HTML: Una buena base para la accesibilidad, debes usar el elemento semántico apropiado para cada cosa, siempre que sea posible. Si no lo haces, puede causar confusión y problemas de usabilidad para todos, pero especialmente para los usuarios con discapacidades. El uso de la semántica correcta tiene mucho que ver con las expectativas del usuario: los elementos se ven y se comportan de cierta manera, de acuerdo con su funcionalidad, y los usuarios esperan estas convenciones comunes.

+ +

Por ejemplo, un usuario de lector de pantalla no puede navegar por una página a través de elementos de encabezado si el desarrollador no ha utilizado adecuadamente los elementos de encabezado para marcar el contenido. Del mismo modo, un encabezado pierde su propósito visual si se le aplica un estilo para que no parezca un encabezado.

+ +

La regla general es que puede actualizar el estilo de una característica de la página para que se ajuste a tu diseño, pero no cambiarlo tanto como para que ya no se vea ni se comporte como se esperaba. Las siguientes secciones resumen las principales características de HTML a considerar.

+ +

Estructura de contenido de texto "estándar"

+ +

Encabezados, párrafos, listas: el contenido de texto central de su página:

+ +
<h1>Cabecera</h1>
+
+<p>Párrafo</p>
+
+<ul>
+  <li>Mi lista</li>
+  <li>tiene dos ítems.</li>
+</ul>
+ +

Un CSS típico podría tener este aspecto:

+ +
h1 {
+  font-size: 5rem;
+}
+
+p, li {
+  line-height: 1.5;
+  font-size: 1.6rem;
+}
+ +

Deberías:

+ + + +

Consulte Fundamentos del texto HTML y Estilo de texto para obtener más información.

+ +

Texto enfatizado

+ +

Marcado en línea que confiere un énfasis específico al texto que rodea:

+ +
<p>El agua está <em>muy caliente</em>.</p>
+
+<p>Las gotas de agua que se acumulan en las superficies se denominan <strong>condensación</strong>.</p>
+ +

Es posible que desees agregar algunos colores simples a su texto enfatizado:

+ +
strong, em {
+  color: #a60000;
+}
+ +

Sin embargo, rara vez necesitarás dar estilo a elementos de énfasis de manera significativa. Las convenciones estándar de texto en negrita y cursiva son muy reconocibles y cambiar el estilo puede causar confusión. Para obtener más información sobre el énfasis, consulte Énfasis e importancia.

+ +

Abreviaciones

+ +

Un elemento que permite asociar una abreviatura, un acrónimo o una inicialización a su expansión:

+ +
<p>El contenido web se marca usando <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+ +

Nuevamente, es posible que desees darle estilo de una manera simple:

+ +
abbr {
+  color: #a60000;
+}
+ +

La convención de estilo reconocida para las abreviaturas es un subrayado punteado, y no es aconsejable desviarse significativamente de esto. Para obtener más información sobre abreviaturas, consulte Abreviaturas.

+ +

Enlaces

+ +

Hipervínculos: la forma de llegar a nuevos lugares en la web:

+ +
<p>Visita la <a href="https://www.mozilla.org">página de inicio de Mozilla</a>.</p>
+ +

A continuación se muestra un estilo de enlace muy simple:

+ +
a {
+  color: #ff0000;
+}
+
+a:hover, a:visited, a:focus {
+  color: #a60000;
+  text-decoration: none;
+}
+
+a:active {
+  color: #000000;
+  background-color: #a60000;
+}
+ +

Las convenciones de enlace estándar son subrayado y un color diferente (predeterminado: azul) en su estado estándar, otra variación de color cuando el enlace ha sido visitado anteriormente (predeterminado: púrpura) y otro color más cuando el enlace está activado (predeterminado: rojo) . Además, el puntero del ratón cambia a un ícono de puntero cuando se pasa el ratón sobre los enlaces, y el enlace recibe un resaltado cuando se enfoca (por ejemplo, mediante tabulación) o se activa. La siguiente imagen muestra el resaltado tanto en Firefox (contorno punteado) como en Chrome (contorno azul):

+ +

+ +

+ +

Puedes ser creativo con los estilos de enlaces, siempre y cuando sigas dando información a los usuarios cuando interactúan con los enlaces. Definitivamente, algo debería suceder cuando los estados cambian, y no debes deshacerte del cursor del puntero o del contorno; ambos son ayudas de accesibilidad muy importantes para quienes usan los controles del teclado.

+ +

Elementos de formulario

+ +

Elementos que permiten a los usuarios introducir datos en sitios web:

+ +
<div>
+  <label for="nombre">Entra tu nombre</label>
+  <input type="text" id="nombre" name="nombre">
+</div>
+ +

Puedes ver algunos buenos ejemplos de CSS en nuestro ejemplo de form-css.html (pruébalo en vivo también).

+ +

La mayor parte del CSS que escribirás para los formularios será para dimensionar los elementos, alinear las etiquetas y las entradas y hacer que se vean limpios y ordenados.

+ +

Sin embargo, no debes desviarse demasiado de la retroalimentación visual esperada que reciben los elementos del formulario cuando están enfocados, que es básicamente la mismo que con los enlaces (ver más arriba). Puedes aplicar estilos a los estados de enfoque / desplazamiento del formulario para que este comportamiento sea más coherente en todos los navegadores o se adapte mejor al diseño de tu página, pero no te deshagas de él por completo; de nuevo, las personas confían en estas pistas para ayudarles a saber qué está pasando.

+ +

Tablas

+ +

Tablas para presentar datos tabulares.

+ +

Puedes ver un buen y simple ejemplo de tabla HTML y CSS en nuestro ejemplo table-css.html (pruébalo en vivo también).

+ +

El CSS de tablas generalmente sirve para hacer que la tabla se adapte mejor a su diseño y se vea menos fea. Es una buena idea asegurarse de que los encabezados de la tabla se destaquen (normalmente en negrita) y usar rayas de cebra para que las diferentes filas sean más fáciles de analizar.

+ +

Color y contraste de color

+ +

Al elegir un esquema de color para tu sitio web, asegúrate de que el color del texto (primer plano) contrasta bien con el color de fondo. Tu diseño puede verse bien, pero no es bueno si las personas con discapacidades visuales como daltonismo no pueden leer tu contenido.

+ +

Existe una manera fácil de verificar si el contraste es lo suficientemente grande como para no causar problemas. Hay una serie de herramientas de verificación de contraste en línea en las que puede introduci los colores de primer plano y de fondo para verificarlos. Por ejemplo, el Comprobador de contraste de color de WebAIM es fácil de usar y proporciona una explicación de lo que necesitas para cumplir con los criterios WCAG sobre el contraste de color.

+ +
+

Nota: una relación de contraste alta también permitirá que cualquier persona que utilice un teléfono inteligente o una tableta con una pantalla brillante lea mejor las páginas cuando se encuentre en un entorno brillante, como a la luz del sol.

+
+ +

Otro consejo es no confiar solo en el color para las señales / información, ya que esto no será bueno para aquellos que no pueden ver el color. En lugar de marcar los campos de formulario obligatorios en rojo, por ejemplo, márcalos con un asterisco y en rojo.

+ +

Esconder cosas

+ +

Hay muchos casos en los que un diseño visual requerirá que no se muestre todo el contenido a la vez. Por ejemplo, en nuestro ejemplo de cuadro de información con pestañas (ver código fuente) tenemos tres paneles de información, pero los colocamos uno encima del otro y proporcionamos pestañas en las que se puede hacer clic para mostrar cada uno (también es accesible desde el teclado - pues usar alternativamente Tab y Enter / Return para seleccionarlos).

+ +

+ +

A los usuarios de lectores de pantalla no les importa nada de esto: están contentos con el contenido siempre que el orden del código fuente tenga sentido y puedan acceder a todo. El posicionamiento absoluto (como se usa en este ejemplo) generalmente se considera uno de los mejores mecanismos para ocultar contenido para lograr un efecto visual, porque no impide que los lectores de pantalla accedan a él.

+ +

Por otro lado, no debes usar {{cssxref ("visibility")}}: hidden o {{cssxref ("display")}}: none, porque ocultan el contenido de los lectores de pantalla. A menos que, por supuesto, exista una buena razón por la que desees ocultar este contenido a los lectores de pantalla.

+ +
+

Nota: Invisible Content Just for Screen Reader Users tiene muchos más detalles útiles sobre este tema.

+
+ +

Acepta que los usuarios pueden saltarse tus estilos

+ +

Es posible que los usuarios anulen tus estilos con sus propios estilos personalizados, por ejemplo:

+ + + +

Los usuarios pueden hacerlo por diversas razones. Un usuario con discapacidad visual puede querer agrandar el texto en todos los sitios web que visita, o un usuario con una deficiencia de color severa puede querer poner todos los sitios web en colores de alto contraste que sean fáciles de ver. Cualquiera que sea la necesidad, debes sentirse cómodo con esto y hacer que tus diseños sean lo suficientemente flexibles para que dichos cambios funcionen en tu diseño. Como ejemplo, es posible que desees asegurarte de que tu área de contenido principal pueda manejar texto más grande (tal vez comience a desplazarse para permitir que se vea todo), y no solo lo ocultará o romperá por completo.

+ +

JavaScript

+ +

JavaScript también puede romper la accesibilidad, dependiendo de cómo se use.

+ +

El JavaScript moderno es un lenguaje poderoso, y podemos hacer mucho con él actualmente, desde contenido simple y actualizaciones de la interfaz de usuario hasta juegos 2D y 3D completos. No existe una regla que diga que todo el contenido debe ser 100% accesible para todas las personas; solo debe hacer lo que pueda y hacer que sus aplicaciones sean lo más accesibles posible.

+ +

Se puede decir que el contenido y la funcionalidad simples son fáciles de hacer accesibles; por ejemplo, texto, imágenes, tablas, formularios y botones que activan funciones. Como vimos en nuestro artículo HTML: Una buena base para la accesibilidad, las consideraciones clave son:

+ + + +

También vimos un ejemplo de cómo usar JavaScript para incorporar la funcionalidad donde faltaba; consulta Volver a añadir la accesibilidad del teclado. Esto no es ideal; en realidad, deberías usar el elemento correcto para el trabajo correcto, pero demuestra que es posible en situaciones en las que, por alguna razón, no puedes controlar el marcado que se utiliza. Otra forma de mejorar la accesibilidad de los widgets no semánticos que funcionan con JavaScript es utilizar WAI-ARIA para proporcionar semántica adicional para los usuarios de lectores de pantalla. El próximo artículo también cubrirá esto en detalle.

+ +

Las funcionalidades complejas como los juegos en 3D no son tan fáciles de hacer accesibles: un juego en 3D complejo creado con WebGL se renderizará en un elemento {{htmlelement ("canvas")}}, que en este momento no tiene la capacidad de proporcionar alternativas de texto u otros información que pueden utilizar los usuarios con discapacidad visual grave. Se puede argumentar que un juego de este tipo no tiene realmente a este grupo de personas como parte de su público objetivo principal, y no sería razonable esperar que lo hicieras 100% accesible para las personas ciegas; sin embargo, podrías implementar controles de teclado para que sea utilizable por usuarios que no utilizan el ratóny hacer que el esquema de color sea lo suficientemente contrastante como para que lo puedan usar aquellos con deficiencias de color.

+ +

El problema de demasiado JavaScript

+ +

El problema a menudo surge cuando la gente confía demasiado en JavaScript. A veces verás un sitio web donde todo se ha hecho con JavaScript: el HTML ha sido generado por JavaScript, el CSS ha sido generado por JavaScript, etc. Esto tiene todo tipo de problemas de accesibilidad y otros asociados, por lo que no es aconsejado.

+ +

Además de utilizar el elemento correcto para el trabajo correcto, ¡también debes asegurarte de utilizar la tecnología adecuada para el trabajo correcto! Piensa detenidamente si necesitas ese brillante cuadro de información en 3D con JavaScript o si bastaría con texto antiguo sin formato. Piensa detenidamente si necesitas un widget de formulario no estándar complejo o si una entrada de texto sería suficiente. Y no generes todo tu contenido HTML usando JavaScript si es posible.

+ +

Hacerlo no intrusivo

+ +

Deberías hacer tu JavaScript no intrusivo al crear tu contenido. La idea de JavaScript no intrusivo es que debe usarse siempre que sea posible para mejorar la funcionalidad, no para construirlo todo; las funciones básicas deberían funcionar idealmente sin JavaScript, aunque sabemos que esto no siempre es una opción. Pero, de nuevo, una gran parte es usar las funcionalidades integradas del navegador siempre que sea posible.

+ +

Entre los buenos ejemplos de usos de JavaScript no intrusivo se incluyen:

+ + + +

Como ejemplo, hemos escrito un ejemplo rápido y sucio de validación de formulario del lado del cliente: consulta form-validation.html (y también la demostración en vivo). Aquí verás un formulario simple; al intentar enviar el formulario con uno o ambos campos vacíos, el envío falla y aparece un cuadro de mensaje de error para indicar cuál es el problema.
+
+ Este tipo de validación de formulario es no intrusiva: se puede usar el formulario perfectamente aunque JavaScript no esté disponible, y cualquier implementación de formulario razonable también tendrá activa la validación del lado del servidor, porque es demasiado fácil para los usuarios malintencionados eludir la validación del lado del cliente (por ejemplo, desactivando JavaScript en el navegador). La validación del lado del cliente sigue siendo realmente útil para informar de errores: los usuarios pueden saber los errores que cometen al instante, en lugar de tener que esperar un viaje de ida y vuelta al servidor y la recarga de la página. Esta es una clara ventaja de usabilidad.

+ +
+

Nota: la validación del lado del servidor no se ha implementado en esta simple demostración.

+
+ +

También hemos hecho que esta validación de formulario sea bastante accesible. Hemos utilizado elementos {{htmlelement ("label")}} para asegurarnos de que las etiquetas del formulario estén vinculadas de forma inequívoca a sus entradas, de modo que los lectores de pantalla puedan leerlas junto con ellas:

+ +
<label for="name">Entra tu nombre:</label>
+<input type="text" name="name" id="name">
+ +

Solo realizamos la validación cuando se envía el formulario; esto es para no actualizar la IU con demasiada frecuencia y confundir potencialmente a los lectores de pantalla (y posiblemente a otros) usuarios:

+ +
form.onsubmit = validate;
+
+function validate(e) {
+  errorList.innerHTML = '';
+  for(let i = 0; i < formItems.length; i++) {
+    const testItem = formItems[i];
+    if(testItem.input.value === '') {
+      errorField.style.left = '360px';
+      createLink(testItem);
+    }
+  }
+
+  if(errorList.innerHTML !== '') {
+    e.preventDefault();
+  }
+}
+ +
+

Nota: En este ejemplo estamos ocultando y mostrando el cuadro de mensaje de error utilizando posicionamiento absoluto en lugar de otro método como la visibilidad o la visualización, porque no interfiere con que el lector de pantalla pueda leer su contenido.

+
+ +

La validación real del formulario sería mucho más compleja que esto: querría verificar que el nombre entrado realmente parezca un nombre, la edad entrada sea realmente un número y sea realista (por ejemplo, no negativa y menor de 4 dígitos). Aquí acabamos de implementar una verificación simple de que se haya completado un valor en cada campo de entrada (if(testItem.input.value === '')).

+ +

Cuando se ha realizado la validación, si las pruebas pasan, se envía el formulario. Si hay errores (if (errorList.innerHTML! == '')), detenemos el envío del formulario (usando preventDefault()) y mostramos los mensajes de error que se hayan creado (ver más abajo). Este mecanismo significa que los errores solo se mostrarán si hay errores, lo que es mejor para la usabilidad.

+ +

Para cada entrada sin un valor completado cuando se envía el formulario, creamos un elemento de lista con un enlace y lo insertamos en errorList.

+ +
function createLink(testItem) {
+  const listItem = document.createElement('li');
+  const anchor = document.createElement('a');
+
+  anchor.textContent = 'El campo ' + testItem.input.name + ' está vacío. Entra tu ' + testItem.input.name + '.';
+  anchor.href = '#' + testItem.input.name;
+  anchor.onclick = function() {
+    testItem.input.focus();
+  };
+  listItem.appendChild(anchor);
+  errorList.appendChild(listItem);
+}
+ +

Cada enlace tiene un doble propósito: te dice cuál es el error, y además puedes hacer clic en él / activarlo para ir directamente al elemento de entrada en cuestión y corregir la entrada.

+ +
+

Nota: La parte focus() de este ejemplo es un poco complicada. Chrome y Edge darán foco al elemento al hacer clic en el enlace, sin necesidad del bloque onclick / focus(). Safari solo resaltará el elemento de formulario con el enlace por sí solo, por lo que necesita el bloque onclick / focus() para darle foco. Firefox no da foco a las entradas correctamente en este contexto, por lo que los usuarios de Firefox no pueden aprovechar esto en este momento (aunque todo lo demás funciona bien). El problema de Firefox debería solucionarse pronto; se está trabajando para que el comportamiento de Firefox sea igual al de otros navegadores (consulte {{bug (277178)}}).

+
+ +

Además, el errorField se coloca en la parte superior del orden de código (aunque se coloca de manera diferente en la interfaz de usuario usando CSS), lo que significa que los usuarios pueden averiguar exactamente qué está mal con los envíos de sus formularios y acceder a los elementos de entrada en cuestión retrocediendo hasta el inicio de la página.

+ +

Como nota final, hemos utilizado algunos atributos WAI-ARIA en nuestra demostración para ayudar a resolver los problemas de accesibilidad causados ​​por áreas de contenido que se actualizan constantemente sin recargar la página (los lectores de pantalla no captan esto ni alertan a los usuarios de forma predeterminada):

+ +
<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+ +

Explicaremos estos atributos en nuestro próximo artículo, que cubre WAI-ARIA con mucho más detalle.

+ +
+

Nota: Algunos de vosotros probablemente estaréis pensando en el hecho de que los formularios HTML5 tienen mecanismos de validación integrados como los atributos required, min / minlength y max / maxlength (consultad la referencia del elemento {{htmlelement("input")}} para más información). No los hemos usado en la demostración porque la compatibilidad entre navegadores es irregular (por ejemplo, solo funciona en IE10 y versiones superiores).

+
+ +
+

Nota: Usable and Accessible Form Validation and Error Recovery, de WebAIM, proporciona más información útil sobre la validación de formularios accesibles.

+
+ +

Otros potenciales problemas de accesibilidad de JavaScript

+ +

Hay otras cosas que debes tener en cuenta al implementar JavaScript y pensar en la accesibilidad. Agregaremos más a medida que los encontremos.

+ +

Eventos específicos del ratón

+ +

Como sabrás, la mayoría de las interacciones de los usuarios se implementan en JavaScript del lado del cliente mediante controladores de eventos, que nos permiten ejecutar funciones en respuesta a ciertos eventos que suceden. Algunos eventos pueden tener problemas de accesibilidad. El ejemplo principal con el que se encontrará son los eventos específicos del ratón, como mouseover, mouseout, dblclick, etc. La funcionalidad que se ejecuta en respuesta a estos eventos no será accesible mediante otros mecanismos, como los controles del teclado.

+ +

Para mitigar estos problemas, debes duplicar estos eventos con eventos similares que se pueden activar por otros medios (los llamados controladores de eventos independientes de dispositivo); focus y blur proporcionarían accesibilidad para los usuarios del teclado.

+ +

Veamos un ejemplo que destaca cuándo esto podría ser útil. Tal vez queramos proporcionar una imagen en miniatura que muestre una versión más grande de la imagen cuando al colocar el ratón sobre ella o darle foco (como pasaría en un catálogo de productos de comercio electrónico).

+ +

Hemos creado un ejemplo muy simple, que puedes encontrar en mouse-and-keyboard-events.html (consulta también el código fuente). El código presenta dos funciones que muestran y ocultan la imagen ampliada; estas se ejecutan mediante las siguientes líneas que las configuran como controladores de eventos:

+ +
imgThumb.onmouseover = showImg;
+imgThumb.onmouseout = hideImg;
+
+imgThumb.onfocus = showImg;
+imgThumb.onblur = hideImg;
+ +

Las dos primeras líneas ejecutan las funciones cuando el puntero del ratón se desplaza sobre la miniatura y deja de hacerlo, respectivamente. Sin embargo, esto no nos permite acceder a la vista ampliada con el teclado; para hacerlo hemos incluido las dos últimas líneas, que ejecutan las funciones cuando la imagen toma y pierde el foco. Esto se puede hacer presionando el tabulador hasta llegar a la imagen, porque le hemos dado tabindex="0".

+ +

El evento de click es interesante: parce dependiente del ratón, pero la mayoría de los navegadores activan los controladores de eventos onclick al presionar Enter / Return en un enlace o elemento de formulario que tenga foco, o cuando dicho elemento se toca en un dispositivo de pantalla táctil. Sin embargo, esto no funciona por defecto cuando permites que un evento no enfocable por defecto adquiera el foco usando tabindex; en tales casos, debe detectar específicamente cuándo se presiona esa tecla exacta (consulte Volver a añadir la accesibilidad del teclado).

+ +

¡Pon a prueba tus habilidades

+ +

Has llegado al final de este artículo. ¿Recuerdas la información más importante? Encontrar pruebas para verificar que has retenido esta información antes de continuar en Test your skills: CSS and JavaScript accessibility.

+ +

Resumen

+ +

Esperamos que este artículo te haya brindado una buena cantidad de detalles y comprensión sobre los problemas de accesibilidad relacionados con el uso de CSS y JavaScript en las páginas web.

+ +

¡Siguiente parada, WAI-ARIA!

+ +
{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
+ +
+

In this module

+ + +
diff --git a/files/es/learn/accessibility/html/index.html b/files/es/learn/accessibility/html/index.html new file mode 100644 index 0000000000..1b2fb1af25 --- /dev/null +++ b/files/es/learn/accessibility/html/index.html @@ -0,0 +1,588 @@ +--- +title: 'HTML: Una buena base para la accesibilidad' +slug: Learn/Accessibility/HTML +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
+ +

Se puede hacer accesible una gran cantidad de contenido web solo asegurándose de que se utilizan los elementos HTML con el propósito correcto todo el tiempo. Este artículo muestra en detalle como HTML puede ser usado para asegurar máxima accesibilidad.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimiento básico de informática, entendimiento básico de HTML (ver Introducción a HTML), y entendimiento de ¿Qué es accesibilidad?.
Objetivo:Familiarizarse con las características de HTML que tiene beneficios de accesibilidad, y como usarla apropiadamente en tus documentos web.
+ +

HTML y accesibilidad

+ +

Cuando aprendas más de HTML — leas más recursos, mires más ejemplos, etc.— vas a seguir viendo un tema en común: la importancia del uso de HTML semántico (a veces llamado POSH, o Plain Old Semantic HTML). Esto significa usar los elementos correctos de HTML para su propósito tanto como sea posible.

+ +

Puedes estarte preguntando ¿por qué es esto tan importante?. Después de todo, puedes usar una combinación de CSS y JavaScript para hacer que casi cualquier elemento HTML se comporte en la forma que tú quieras. Por ejemplo, un botón que reproduzca un vídeo en tu sitio puede estar hecho así:

+ +
<div>Reproducir vídeo</div>
+ +

Pero como verás más adelante, tiene sentido utilizar el elemento correcto para este trabajo:

+ +
<button>Reproducir vídeo</button>
+ +

No solo la etiqueta <button> de HTML ya tiene estilos adecuados por defecto (que probablemente quieras sobrescribir), también están construidos para ser accesibles con el teclado —el usuario puede navegar entre botones usando Tab y activando su selección usando Return o Enter.

+ +

No cuesta más tiempo escribir HTML semántico que (mal) marcado no semántico si lo haces consistentemente desde el comienzo de tu proyecto. Y aun mejor, el marcado semántico tiene otros beneficios más allá de la accesibilidad:

+ +
    +
  1. Fácil desarrollo — como mencionamos, obtienes algunas funcionalidades gratis, y podría decirse que es más fácil de entender.
    2. +
  2. Mejor en móviles — el HTML semántico es probablemente más liviano en tamaño de archivo que el código espagueti no semántico y más fácil de hacer responsivo.
    3. +
  3. Bueno para SEO — Los motores de búsqueda dan más importancia a palabras claves dentro de cabeceras, links, etc., que palabras claves en elementos no semánticos como los <div>, etc., tus documentos serán más fáciles de encontrar por tus clientes.
    4. +
+ +

Continuemos y veamos el HTML accesible en más detalle.

+ +
+

Nota: Es buena idea tener configurado un lector de pantalla en tu computador, para que puedas hacer algunas pruebas de los siguientes ejemplos. Mira nuestra Guía de lectores de pantalla para más detalles.

+
+ +

Buena semántica

+ +

Ya hemos hablado de la importancia de la buena semántica, y por qué deberíamos usar el elemento HTML adecuado para cada caso. Esto no puede ignorarse, ya que es uno de los principales lugares donde la accesibilidad se rompe si no se maneja correctamente.

+ +

En la web, la verdad es que las personas hacen cosas muy extrañas con marcado HTML. Algunos abusos de HTML se deben a prácticas de antaño que no han sido completamente olvidadas y algunas son simplemente ignorancia. Cualquiera que sea el caso, deberías reemplazar ese mal código donde sea que lo veas.

+ +

A veces, no estás en disposición de deshacerte del mal marcado — tus páginas pueden estar generadas por algún tipo de framework del lado del servidor del cual no tienes control total, o puedes tener contenido de terceros en tu página (como banners) sobre los que no tienes control.

+ +

El objetivo no es "todo o nada", pero cada mejora que hagas va a ayudar a la causa de la accesibilidad.

+ +

Contenido textual

+ +

Una de las mejores ayudas de accesibilidad que un usuario lector de pantalla puede tener es una buena estructura de contenido de cabeceras, párrafos, listas, etc. Un  ejemplo de buena semántica puede lucir como el de a continuación:

+ +
<h1>Mi cabecera</h1>
+
+<p>Esta es la primera sección de mi documento.</p>
+
+<p>Voy a agregar también otro párrafo aquí.</p>
+
+<ol>
+  <li>Aquí esta</li>
+  <li>una lista para</li>
+  <li>que la leas</li>
+</ol>
+
+<h2>Mi subtítulo</h2>
+
+<p>Esta es la primera subsección de mi documento. ¡Me encantaría que la gente pudiera leer este contenido!</p>
+
+<h2>Mi 2º subtitulo</h2>
+
+<p>Esta es la segunda subsección de mi documento. Creo que es más interesante que la primera.</p>
+ +

Hemos preparado una versión más larga para que pruebes con un lector de pantalla (ver good-semantics.html). Si tratas de navegar por ella, notaras que es muy fácil:

+ +
    +
  1. El lector de pantalla lee cada cabecera a medida que progresas a través del contenido, notificándote qué es una cabecera, qué es un párrafo, etc.
    2. +
  2. Se detiene después de cada elemento, dejándote ir a un ritmo que sea cómodo para ti.
    3. +
  3. Puedes saltar al siguiente/anterior encabezado en muchos lectores de pantalla.
    4. +
  4. También puedes tener una lista de todos los encabezados en muchos lectores de pantalla, permitiéndote usarlos como una tabla de contenidos para encontrar contenido específico.
    5. +
+ +

Las personas a veces escriben encabezados, párrafos, etc. usando HTML presentacional y saltos de línea, algo como lo siguiente:

+ +
<font size="7">Mi cabecera</font>
+<br><br>
+Esta es la primera sección del documento.
+<br><br>
+Voy a agregar otro párrafo aquí también.
+<br><br>
+1. Aquí esta
+<br><br>
+2. una lista para
+<br><br>
+3. que la leas
+<br><br>
+<font size="5">Mi subtitulo</font>
+<br><br>
+Esta es la primera subsección de mi documento. ¡Me encantaría que la gente pudiera leer este contenido!
+<br><br>
+<font size="5">Mi 2º subtitulo</font>
+<br><br>
+Esta es la segunda subsección de mi documento. Creo que es más interesante que la primera.
+ +

Si pruebas nuestra versión extendida con un lector de pantalla (ver bad-semantics.html), no vas a tener una buena experiencia: el lector de pantalla no tiene nada que usar como señal, por lo que no podrás tener una tabla de contenidos útil y toda la página se ve como un solo bloque gigante, así que solo se lee de una vez, todo de una vez.

+ +

Hay otros problemas más allá de la accesibilidad: es más difícil aplicar estilo al contenido con CSS o manipularlo con JavaScript, por ejemplo, porque no hay elementos para usarlos como selectores.

+ +

Usar lenguaje claro

+ +

El lenguaje que usas también puede afectar la accesibilidad. En general deberías usar lenguaje claro que no sea demasiado complejo y no usar innecesariamente jerga o palabras extrañas. Esto no solo beneficia a las personas con discapacidades cognitivas u otras: beneficia a los lectores para quienes el texto no está escrito en su lengua materna, personas más jóvenes... ¡todo el mundo, de hecho! Aparte de esto, deberías evitar usar lenguaje y caracteres que no se puede leen claramente por un lector de pantalla. Por ejemplo:

+ + + +

Disposiciones de página

+ +

Antiguamente la gente solía crear diseños de página usando tablas HTML, usando diferentes celdas de tabla para contener el encabezado, pie de página, barra lateral, columna de contenido principal, etc. Esto no es una buena idea porque un lector de pantalla probablemente dará como resultado lecturas confusas, especialmente si el diseño es complejo y tiene muchas tablas anidadas.

+ +

Prueba nuestro ejemplo table-layout.html, que tiene este código:

+ +
<table width="1200">
+      <!-- main heading row -->
+      <tr id="heading">
+        <td colspan="6">
+
+          <h1 align="center">Header</h1>
+
+        </td>
+      </tr>
+      <!-- nav menu row  -->
+      <tr id="nav" bgcolor="#ffffff">
+        <td width="200">
+          <a href="#" align="center">Home</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Our team</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Projects</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Contact</a>
+        </td>
+        <td width="300">
+          <form width="300">
+            <input type="search" name="q" placeholder="Search query" width="300">
+          </form>
+        </td>
+        <td width="100">
+          <button width="100">Go!</button>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- main content and aside row -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
+
+          <!-- main content goes here -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Related</h2>
+
+          <!-- aside content goes here -->
+
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- footer row -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>©Copyright 2050 by nobody. All rights reversed.</p>
+        </td>
+      </tr>
+    </table>
+ +

Si intentas navegar por él con un lector de pantalla, probablemente te dirá que hay una tabla para mirar (aunque algunos lectores de pantalla pueden adivinar la diferencia entre diseños con tablas y tablas de datos). Luego, probablemente (dependiendo del lector de pantalla que estés usando) tendrás que entrar en la tabla como objeto y mirar sus características por separado, y luego salir de la tabla nuevamente para continuar navegando por el contenido.

+ +

Los diseños con tablas son una reliquia del pasado: tenían sentido cuando la compatibilidad con CSS no estaba muy extendida en los navegadores, pero ahora solo crean confusión para los usuarios de lectores de pantalla. Además, su código fuente requiere más marcado, lo que los hace menos flexibles y más difíciles de mantener. Puedes verificar estas afirmaciones comparando tu experiencia anterior con un ejemplo de estructura de sitio web más moderno, que podría verse así:

+ +
<header>
+  <h1>Header</h1>
+</header>
+
+<nav>
+  <!-- main navigation in here -->
+</nav>
+
+<!-- Here is our page's main content -->
+<main>
+
+  <!-- It contains an article -->
+  <article>
+    <h2>Article heading</h2>
+
+    <!-- article content in here -->
+  </article>
+
+  <aside>
+    <h2>Related</h2>
+
+    <!-- aside content in here -->
+  </aside>
+
+</main>
+
+<!-- And here is our main footer that is used across all the pages of our website -->
+
+<footer>
+  <!-- footer content in here -->
+</footer>
+ +

Si pruebas nuestro ejemplo de estructura más moderna con un lector de pantalla, verás que el marcado de diseño ya no se interpone ni confunde la lectura del contenido. También es mucho más ágil y más pequeño en términos de tamaño de código, lo que significa que el código es más fácil de mantener y menos ancho de banda para que el usuario lo descargue (especialmente para aquellos con conexiones lentas).

+ +

Otra consideración al crear diseños es usar elementos semánticos HTML5 como se ve en el ejemplo anterior (ver secciónado de contenido): puedes crear un diseño usando solo elementos {{htmlelement ("div")}} anidados, pero es mejor usar los elementos de seccionado adecuados para marcar la navegación principal ({{htmlelement ("nav")}}), el pie de página ({{htmlelement ("footer")}}), los bloques de contenido ({{htmlelement ("article")}}), etc. Estos proporcionan semántica adicional para lectores de pantalla (y otras herramientas) para brindar al usuario pistas adicionales sobre el contenido por el que están navegando (consulta Screen Reader Support for new HTML5 Section Elements para hacerte una idea de cómo es el soporte de lectores de pantalla).

+ +
+

Nota: Además de tener una buena semántica y un diseño atractivo, tu contenido debería tener sentido lógico en su orden en el código; siempre puedes colocarlo donde desees usando CSS más adelante, pero deberías tener el orden en el código correcto para empezar, para que lo que se lee a los usuarios de lectores de pantalla tenga sentido.

+
+ +

Controles de interfaz de usuario

+ +

Por controles de interfaz de usuario nos referimos a las partes principales de los documentos web con las que los usuarios interactúan, habitualmente botones, enlaces y controles de formulario. En esta sección, veremos los aspectos básicos de accesibilidad a tener en cuenta al crear dichos controles. Los artículos posteriores sobre WAI-ARIA y multimedia analizarán otros aspectos de la accesibilidad de la interfaz de usuario.

+ +

Un aspecto clave de la accesibilidad de los controles de interfaz de usuario es que, de forma predeterminada, los navegadores permiten que sean manipulados por el teclado. Puedes probar esto usando nuestro ejemplo native-keyboard-accessibility.html (código fuente). Ábrelo en una nueva pestaña y prueba a pulsar la tecla de tabulación; después de algunas pulsaciones, deberías ver que el foco de la pestaña comienza a moverse a través de los diferentes elementos enfocables. Los elementos enfocados reciben un estilo predeterminado resaltado en cada navegador (difiere ligeramente entre diferentes navegadores) para que puedas saber qué elemento está enfocado.

+ +

+ +

Después puedes pulsar Enter / Return para seguir un enlace enfocado o pulsar un botón (hemos incluido algo de JavaScript para que los botones lancen un mensaje), o comenzar a escribir para introducir texto en un campo de texto. Otros elementos de formulario tienen diferentes controles; por ejemplo, el elemento {{htmlelement ("select")}} puede mostrar sus opciones y alternar entre usar las teclas de flecha arriba y abajo.

+ +
+

Note: Diferentes navegadores pueden tener diferentes opciones de control de teclado disponibles. Consulta Using native keyboard accessibility para obtener más detalles.

+
+ +

Básicamente, obtienes este comportamiento gratis, solo con el uso de los elementos apropiados. Por ejemplo:

+ +
<h1>Enlaces</h1>
+
+<p>Esto es un enlace a <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p>Otro enlace, a la <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Botones</h2>
+
+<p>
+  <button data-message="Esto es del primer botón">¡Haz clic!</button>
+  <button data-message="Esto es del segundo botón">¡Haz clic aquí también!</button>
+  <button data-message="Esto es del tercer botón">Y aquí!</button>
+</p>
+
+<h2>Formulario</h2>
+
+<form>
+  <div>
+    <label for="nombre">Entra tu nombre:</label>
+    <input type="text" id="nombre" name="nombre">
+  </div>
+  <div>
+    <label for="edad">Entra tu edad:</label>
+    <input type="text" id="edad" name="edad">
+  </div>
+  <div>
+    <label for="humor">Elige tu humor:</label>
+    <select id="humor" name="humor">
+      <option>Feliz</option>
+      <option>Triste</option>
+      <option>Enfadado/a</option>
+      <option>Preocupado/a</option>
+    </select>
+  </div>
+</form>
+ +

Esto significa usar enlaces, botones, elementos y etiquetas de formulario de manera adecuada (incluido el elemento {{htmlelement ("label")}} para los controles de formulario).

+ +

Sin embargo, nuevamente se da el caso de que la gente a veces hace cosas extrañas con HTML. Por ejemplo, a veces ves botones marcados con {{htmlelement ("div")}}s, por ejemplo:

+ +
<div data-message="Esto es del primer botón">¡Haz clic aquí!</div>
+<div data-message="Esto es del segundo botón">¡Haz clic aquñi también!</div>
+<div data-message="Esto es del tercer botón">¡Y aquí!</div>
+ +

Pero no se recomienda el uso de código como este: pierdes inmediatamente la accesibilidad nativa del teclado que habrías tenido si hubieras usado elementos {{htmlelement ("button")}}, y además no obtienes ninguno de los estilos CSS predeterminados que tienen los botones.

+ +

Volver a añadir la accesibilidad del teclado

+ +

Volver a agregar estas ventajas requiere un poco de trabajo (puedes ver un ejemplo en nuestro ejemplo fake-div-buttons.html; consulta también el código fuente). Aquí le hemos dado a nuestros botones <div> falsos la capacidad de enfocarse (incluso a través de la tecla de tabulación) dándole a cada uno el atributo tabindex="0":

+ +
<div data-message="Esto es del primer botón" tabindex="0">¡Haz clic aquí!</div>
+<div data-message="Esto es del segundo botón" tabindex="0">¡Haz clic aquí también!</div>
+<div data-message="Esto es del tercer botón" tabindex="0">¡Y aquí!</div>
+ +

Básicamente, el atributo {{htmlattrxref("tabindex")}} está destinado principalmente a permitir que los elementos tabulables tengan un orden de tabulación personalizado (especificado en orden numérico positivo), en lugar de simplemente tabularlos en su orden de origen predeterminado. Casi siempre es una mala idea, ya que puede causar una gran confusión. Úsalo solo si realmente lo necesitas; por ejemplo, si el diseño muestra las cosas en un orden visual muy diferente al código fuente, y deseas que las cosas funcionen de manera más lógica. Hay otras dos opciones para tabindex:

+ + + +

Si bien la adición anterior nos permite tabular los botones, no nos permite activarlos a través de la tecla Enter / Return. Para hacer eso, hemos tenido que agregar el siguiente truco en JavaScript:

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // La tecla Enter/Return
+    document.activeElement.click();
+  }
+};
+ +

Aquí agregamos un "listener" (oyente) al objeto document para detectar cuándo se ha presionado una tecla en el teclado. Comprobamos qué botón se presionó mediante la propiedad keyCode del objeto de evento; si es el código clave que coincide con Return / Enter, ejecutamos la función almacenada en el manejador onclick del botón usando document.activeElement.click(). activeElement nos da el elemento que está actualmente enfocado en la página.

+ +

Esta es mucho trabajo extra para volver a incorporar la funcionalidad. Y seguramente surgirán problemas con ella. Es mejor usar el elemento correcto para el trabajo correcto en primer lugar.

+ +

Etiquetas de texto significativas

+ +

Las etiquetas textuales de los controles de la interfaz de usuario son muy útiles para todos los usuarios, pero hacerlas bien es particularmente importante para los usuarios con discapacidades.

+ +

Deberías asegurarte de que las etiquetas de texto de tus botones y enlaces sean comprensibles y distintivas. No uses simplemente "Haz clic aquí" para tus etiquetas, ya que los usuarios de lectores de pantalla a veces obtienen una lista de botones y controles de formulario. La siguiente captura de pantalla muestra nuestros controles enumerados por VoiceOver en Mac.

+ +

Form controls. Click me! button. Click me too! button. And me! button. Fill me in: edit text. Fill me in: edit text. Happy collapsed pop up button. Happy menu item. Sad menu item. Angry menu item. Worried menu item.

+ +

Asegúrate de que tus etiquetas tienen sentido sin su contexto, leídas solas, así como en el contexto del párrafo en que están. Por ejemplo, lo siguiente muestra un buen ejemplo de enlace de texto:

+ +
<p>Las ballenas son criaturas realmente impresionantes. <a href="whales.html">Aprende más sobre las ballenas</a>.</p>
+ +

y esto es un mal texto de enlace:

+ +
<p>Las ballenas son criaturas realmente impresionantes. Para aprender más sobre las ballenas, <a href="whales.html">haz clic aquí</a>.</p>
+ +
+

Note: Encontrarás mucho más sobre la implementación de enlaces y buenas prácticas en nuestro artículo Crear hipervínculos. También encontrarás buenos y malos ejemplos en good-links.html y bad-links.html.

+
+ +

Las etiquetas de formulario también son importantes, para darte una pista sobre lo que necesita introducir en cada campo de formulario. El siguiente parece un ejemplo bastante razonable:

+ +
Entra tu nombre: <input type="text" id="nombre" name="nombre">
+ +

Sin embargo, esto no es tan útil para usuarios con discapacidad. No hay nada en el ejemplo anterior para asociar la etiqueta de forma inequívoca con la entrada del formulario y dejar claro cómo rellenarlo si no puede verlo. Si accedes con algunos lectores de pantalla, es posible que solo se te proporcione una descripción en la línea de "editar texto".

+ +

El siguiente es un ejemplo mucho mejor:

+ +
<div>
+  <label for="combre">Entra tu nombre:</label>
+  <input type="text" id="combre" name="nombre">
+</div>
+ +

Con código como este, la etiqueta estará claramente asociada con la entrada; la descripción se parecerá más a "Entra tu nombre: editar texto".

+ +

+ +

Como ventaja adicional, en la mayoría de los navegadores asociar una etiqueta con una entrada de formulario significa que puedes hacer clic en la etiqueta para seleccionar / activar el elemento del formulario. Esto le da a la entrada un área de impacto más grande, lo que facilita la selección.

+ +
+

Nota: puedes ver algunos ejemplos de buenos y malos formularios en good-form.html y bad-form.html.

+
+ +

Tablas de datos accesibles

+ +

Se puede escribir una tabla de datos básica con un marcado muy simple, por ejemplo:

+ +
<table>
+  <tr>
+    <td>Nombre</td>
+    <td>Edad</td>
+    <td>Género</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Masculino</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Femenino</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Femenino</td>
+  </tr>
+</table>
+ +

Pero esto tiene problemas: no hay forma de que un usuario de lector de pantalla asocie filas o columnas como agrupaciones de datos. Para hacer esto, necesita saber cuáles son las filas de encabezado, y si están encabezando filas, columnas, etc. Esto solo se puede hacer visualmente para la tabla anterior (ve a bad-table.html y prueba tú mismo el ejemplo).

+ +

Ahora echa un vistazo a nuestro ejemplo de tabla de bandas punk: aquí puedes ver algunas ayudas de accesibilidad en funcionamiento:

+ + + +

Consulte nuestro artículo sobre funciones avanzadas y accesibilidad de tablas HTML para obtener más detalles sobre las tablas de datos accesibles.

+ +
+

Note: Consulta nuestro artículo Funciones avanzadas de tablas y accesibilidad para ver más detalles sobre tablas de datos accesibles.

+
+ +

Alternativas de texto

+ +

Mientras que el contenido textual es inherentemente accesible, lo mismo no se puede decir del contenido multimedia — el contenido de imagen/video no puede ser visto por personas con discapacidad visual, y el contenido de audio no puede ser escuchado por personas sordas. Cubriremos el contenido de video y audio en detalle en el artículo multimedia accesible más adelante, pero para este artículo veremos la accesibilidad del humilde elemento {{htmlelement("img")}}.

+ +

Tenemos un ejemplo simple, access-image.html, que presenta cuatro copias de la misma imagen:

+ +
<img src="dinosaur.png">
+
+<img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+
+<img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
+     title="The Mozilla red dinosaur">
+
+
+<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p>
+
+ +

La primera imagen, cuando la ve un lector de pantalla, realmente no ofrece mucha ayuda al usuario; VoiceOver, por ejemplo, lee "/dinosaur.png, imagen". Lee el nombre del archivo para intentar proporcionar ayuda. En este ejemplo, el usuario al menos sabrá que es un dinosaurio de algún tipo, pero a menudo los archivos pueden cargarse con nombres de archivo generados por la máquina (por ejemplo, de una cámara digital) y estos nombres de archivo probablemente no proporcionarían contexto al contenido de la imagen.

+ +
+

Nota: Es por eso que nunca debes incluir contenido de texto dentro de una imagen: los lectores de pantalla simplemente no pueden acceder a él. También hay otras desventajas: no puedes seleccionarlo y copiarlo / pegarlo. ¡No lo hagas!

+
+ +

Cuando un lector de pantalla encuentra la segunda imagen, lee el atributo alt completo: "Un tiranosaurio rex rojo: un dinosaurio de dos patas erguido como un humano, con brazos pequeños y una cabeza grande con muchos dientes afilados".

+ +

Esto resalta la importancia de no solo usar nombres de archivo significativos en caso de que el texto alternativo no esté disponible, sino también de asegurarse de que el texto alternativo se proporcione en los atributos alt siempre que sea posible. Ten en cuenta que el contenido del atributo alt siempre debe proporcionar una representación directa de la imagen y lo que transmite visualmente. Aquí no se debe incluir ningún conocimiento personal o descripción adicional, ya que no es útil para personas que no se han encontrado con la imagen antes.

+ +

Una cosa a considerar es si tus imágenes tienen significado dentro del contenido, o si son puramente para decoración visual, por lo que no tienen significado. Si son decorativas, es mejor incluirlas en la página como imágenes de fondo CSS.

+ +
+

Note: Lee Imágenes en HTML y Responsive images para obtener mucha más información sobre la implementación de imágenes y buenas prácticas asociadas.

+
+ +

Si deseas proporcionar información contextual adicional, deberías colocarla en el texto que rodea la imagen o dentro de un atributo title, como se muestra a continuación. En este caso, la mayoría de los lectores de pantalla leerán el texto alternativo, el atributo del título y el nombre del archivo. Además, los navegadores muestran el texto del título como información cuando se pasa por encima con el ratón.

+ +

+ +

Echemos otro vistazo al cuarto método:

+ +
<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
+ +

En este caso, no estamos usando el atributo alt en absoluto; en cambio, hemos presentado nuestra descripción de la imagen como un párrafo de texto normal, le hemos dado un id y luego usamos el atributo aria-labelledby para referirnos a ese id, que hace que los lectores de pantalla usen ese párrafo como texto alternativo o etiqueta para esa imagen. Esto es especialmente útil si desea utilizar el mismo texto como etiqueta para varias imágenes, algo que no es posible con alt.

+ +
+

Note: aria-labelledby es parte de la especificación WAI-ARIA, que permite a los desarrolladores añadir semántica extra a su marcado para mejorar su accesibilidad para lectores de pantalla cuando sea necesario. Para aprender más sobre cómo funciona, lee nuestro artículo WAI-ARIA Basics.

+
+ +

Otros mecanismos de texto alternativo

+ +

Las imágenes también tienen otros mecanismos disponibles para proporcionar texto descriptivo. Por ejemplo, hay un atributo longdesc que apunta a un documento web separado que contiene una descripción ampliada de la imagen, por ejemplo:

+ +
<img src="dinosaur.png" longdesc="dino-info.html">
+ +

Parece una buena idea, especialmente para infografías como gráficos grandes con mucha información que tal vez podría representarse como una tabla de datos accesible (consulte la sección anterior). Sin embargo, longdesc no es compatible de forma consistente con lectores de pantalla, y el contenido es completamente inaccesible para los usuarios que no usan lectores de pantalla. Podría decirse que es mucho mejor incluir la descripción larga en la misma página que la imagen, o vincularla con un enlace normal.

+ +

HTML5 incluye dos elementos nuevos, {{htmlelement("figure")}} y {{htmlelement("figcaption")}}, que se supone que asocian una figura de algún tipo (podría ser cualquier cosa, no necesariamente una imagen) con un pie de figura:

+ +
<figure>
+  <img src="dinosaur.png" alt="El Tyrannosaurus de Mozilla">
+  <figcaption>Un Tyrannosaurus Rex rojo: Un dinosaurio de dos piernas, de pie como un humano, con brazos pequeños y una cabeza grande con un montón de dientes afilados.</figcaption>
+</figure>
+ +

Desafortunadamente, la mayoría de lectores de pantalla aún no parecen asociar los títulos de las figuras con sus figuras, pero la estructura del elemento es útil para dar estilo con CSS, y además proporciona una manera de colocar una descripción de la imagen junto a ella en el código.

+ +

Atributos alt vacíos

+ +
<h3>
+  <img src="article-icon.png" alt="">
+  Tyrannosaurus Rex: el rey de los dinosaurios
+</h3>
+ +

Puede haber ocasiones en las que se incluya una imagen en el diseño de una página, pero su propósito principal sea la decoración visual. Observarás en el ejemplo de código anterior que el atributo alt de la imagen está vacío; esto es para que los lectores de pantalla reconozcan la imagen, pero no intenten describirla imagen (en su lugar, solo dirían "imagen" o algo similar).

+ +

La razón para usar un alt vacío en lugar de no incluirlo es porque muchos lectores de pantalla anuncian la URL completa de la imagen si no se proporciona un alt. En el ejemplo anterior, la imagen actúa como decoración visual del encabezado al que está asociada. En casos como este, y en los casos en los que una imagen es solo decoración y no tiene valor de contenido, debes poner un alt vacío en tus imágenes. Otra alternativa es usar el atributo de rol aria role = "presentation" - esto también evita que los lectores de pantalla lean el texto alternativo.

+ +
+

Note: si es posible, deberías usar CSS para mostrar imágenes que son solo decoración.

+
+ +

Más sobre enlaces

+ +

Los enlaces (el elemento <a> con un atributo href), según cómo se utilicen, pueden ayudar o perjudicar la accesibilidad. De forma predeterminada, los enlaces son accesibles en apariencia. Pueden mejorar la accesibilidad al ayudar a un usuario a navegar rápidamente a diferentes secciones de un documento. También pueden dañar la accesibilidad si se elimina su estilo accesible o si JavaScript hace que se comporten de manera inesperada.

+ +

Estilo de enlace

+ +

De forma predeterminada, los enlaces son visualmente diferentes de otros textos tanto en el color como en la decoración del texto, con enlaces azules y subrayados de forma predeterminada, morados y subrayados si se visitan, y con un anillo de enfoque cuando reciben el foco del teclado.

+ +

El color no debe usarse como el único método para distinguir los enlaces del contenido que no enlaza. El color del texto del enlace, como todo el texto, debe ser significativamente diferente del color de fondo (un contraste de 4.5:1). Además, los enlaces deben ser visualmente significativamente diferentes del texto sin enlaces. Con un requisito de contraste mínimo de 3:1 entre el texto del enlace y el texto circundante y entre los estados predeterminado, visitado y de enfoque / activo, y un contraste de 4:5 entre todos esos colores de estado y el color de fondo.

+ +

Eventos onclick

+ +

A menudo se abusa de las etiquetas de anclaje con el evento onclick para crear pseudo-botones configurando href a "#" o "javascript:void(0)" para evitar que la página se actualice.

+ +

Estos valores provocan un comportamiento inesperado al copiar o arrastrar enlaces, abrir enlaces en una nueva pestaña o ventana, marcar como favoritos y cuando JavaScript todavía se está descargando aparecen errores o está deshabilitado. Esto también transmite una semántica incorrecta a las tecnologías de asistencia (por ejemplo, lectores de pantalla). En estos casos, se recomienda utilizar un {{HTMLElement("button")}} en su lugar. En general, solo debe usar un ancla para la navegación utilizando una URL adecuada.

+ +

Enlaces externos y enlaces a recursos que no son HTML

+ +

Los enlaces que se abren en una nueva pestaña o ventana mediante la declaración target="_blank" y los enlaces cuyo valor href apunta a un recurso de archivo deben incluir un indicador sobre el comportamiento que se producirá cuando se active el enlace.

+ +

Las personas con problemas de baja visión, que navegan con la ayuda de tecnología de lectura de pantalla o que tienen problemas cognitivos pueden confundirse cuando la nueva pestaña, ventana o aplicación se abre inesperadamente. Es posible que versiones antiguas del software de lectura de pantalla ni siquiera anuncien el comportamiento.

+ +

Enlace que abre una nueva pestaña o ventana

+ +
<a target="_blank" href="https://www.wikipedia.org/">Wikipedia (se abre en una nueva ventana)</a>
+ +

Enlace a un recurso que no es HTML

+ +
<a target="_blank" href="2017-annual-report.ppt">Informe anual de 2017 (PowerPoint)</a>
+ +

Si se utiliza un icono en lugar de texto para indicar este tipo de comportamiento de enlaces, asegúrate de que incluya una {{HTMLAttrxRef("alt", "img", "descripción alternativa", "true")}}.

+ + + +

Enlaces de salto

+ +

Un enlace de salto, también conocido como "skipnav", es un elemento que se coloca lo más cerca posible del elemento de apertura {{HTMLElement("body")}} que enlaza con el comienzo del contenido principal de la página. Este enlace permite a las personas evitar el contenido repetido en varias páginas de un sitio web, como el encabezado y la navegación principal.

+ +

Los enlaces de salto son especialmente útiles para las personas que navegan con la ayuda de tecnología de asistencia, como controles de interruptores, comandos de voz o varitas bucales o para la cabeza, con las que el acto de moverse a través de enlaces repetitivos puede ser una tarea laboriosa.

+ + + +

Proximidad

+ +

Si tenemos grandes cantidades de contenido interactivo, incluidas anclas, colocadas muy cerca visualmente entre sí, deben tener espacio insertado para separarlas. Este espaciado es beneficioso para las personas que sufren problemas de control de la motricidad fina y pueden activar accidentalmente el contenido interactivo incorrecto mientras navegan.

+ +

El espaciado se puede crear usando propiedades CSS como {{CSSxRef("margin")}}.

+ + + +

¡Pon a prueba tus habilidades!

+ +

Ha llegado al final de este artículo, pero ¿recuerdas la información más importante? Consulta Test your skills: HTML Accessibility para verificar que has retenido esta información antes de continuar.

+ +

Resumen

+ +

Ahora ya deberías conocer bien la escritura de HTML accesible para la mayoría de las ocasiones. Nuestro artículo de conceptos básicos de WAI-ARIA también llenará algunos vacíos en este conocimiento, pero este artículo se ha ocupado de los conceptos básicos. A continuación, exploraremos CSS y JavaScript, y cómo la accesibilidad se ve afectada por su buen o mal uso.

+ +

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

+ +

In this module

+ + diff --git a/files/es/learn/accessibility/index.html b/files/es/learn/accessibility/index.html new file mode 100644 index 0000000000..fc7cdeeb3c --- /dev/null +++ b/files/es/learn/accessibility/index.html @@ -0,0 +1,60 @@ +--- +title: Accesibilidad +slug: Learn/Accessibility +tags: + - ARIA + - Accesibilidad + - Aprender + - Artículos + - Aterrizaje + - CSS + - CodificaciónDeSecuenciasDeComandos + - HTML + - JavaScript + - Principiantes + - modulo +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

Aprender algo de HTML, CSS y JavaScript es útil si deseas convertirte en un desarrollador web, pero tu conocimiento debe ir más allá de simplemente usar esas tecnologías, debes usarlas de manera responsable para maximizar la audiencia de tus sitios web y evitar impedir su uso a nadie. Para lograr esto, debes adherirte a las mejores prácticas generales (que se muestran en los temas de HTML, CSS y JavaScript), pruebas cruzadas del navegador y considerar la accesibilidad desde el principio. En este módulo, cubriremos este último en detalle.

+ +

Prerrequisitos

+ +

Para aprovechar al máximo este módulo, sería una buena idea trabajar al menos en los dos primeros módulos de los temas de HTML, CSS, y JavaScript o quizás mejor, trabajar en las partes relevantes del módulo de accesibilidad como tu trabajas a través de los temas relacionados con la tecnología.

+ +
+

Nota: si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar la mayoría de los ejemplos de código en un programa de codificación en línea como JSBin o Thimble.

+
+ +

Guías

+ +
+
¿Qué es la accesibilidad?
+
Este artículo inicia el módulo con un buen vistazo a lo que realmente es la accesibilidad: esto incluye qué grupos de personas debemos considerar y por qué, qué herramientas utilizan las diferentes personas para interactuar con la web y cómo podemos hacer que la accesibilidad sea parte de nuestro flujo de trabajo de desarrollo web.
+
HTML:Una buena base para la accesibilidad
+
Se puede hacer accesible una gran cantidad de contenido web simplemente asegurándose de que los elementos HTML concretos se utilizan para un propósito correcto en todo momento. Este artículo analiza en detalle cómo se puede usar HTML para garantizar la máxima accesibilidad.
+
Mejores prácticas en accesibilidad en CSS y JavaScript
+
CSS y JavaScript, cuando se usan correctamente, también tienen el potencial de permitir experiencias web accesibles, pero si se usan mal pueden dañar significativamente la accesibilidad. Este artículo describe algunas de las mejores prácticas de CSS y JavaScript que deben considerarse para garantizar que incluso el contenido complejo sea lo más accesible posible.
+
WAI-ARIA básico
+
Siguiendo con el artículo anterior, a veces puede ser difícil realizar controles complejos de IU que involucren HTML no semántico y contenido dinámico actualizado con JavaScript. WAI-ARIA es una tecnología que puede ayudar a resolver estos problemas agregando más semántica que los navegadores y las tecnologías de asistencia pueden reconocer y utilizar para que los usuarios sepan lo que está sucediendo. Aquí mostraremos cómo usarlo a un nivel básico para mejorar la accesibilidad.
+
Multimedia accesible
+
Otra categoría de contenido que puede crear problemas de accesibilidad es multimedia: el contenido de video, audio e imagen debe contar con alternativas textuales adecuadas para que las tecnologías de asistencia y sus usuarios puedan entenderlos. Este artículo muestra cómo.
+
Accesibilidad móvil
+
Dado que el acceso a la web en dispositivos móviles es tan popular, y que las plataformas populares como iOS y Android tienen herramientas de accesibilidad completas, es importante considerar la accesibilidad de su contenido web en estas plataformas. Este artículo analiza las consideraciones de accesibilidad específicas para dispositivos móviles.
+
+ +

Valoraciones

+ +
+
Resolución de problemas de accesibilidad
+
En la evaluación de este módulo, te presentamos un sitio simple con una serie de problemas de accesibilidad que necesitas diagnosticar y corregir.
+
+ +

Ver también

+ + diff --git a/files/es/learn/accessibility/mobile/index.html b/files/es/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..4762e5220c --- /dev/null +++ b/files/es/learn/accessibility/mobile/index.html @@ -0,0 +1,346 @@ +--- +title: Mobile accessibility +slug: Learn/Accessibility/Mobile +translation_of: Learn/Accessibility/Mobile +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +

Dado que el acceso a la web en dispositivos móviles es tan popular, y las plataformas populares como iOS y Android tienen herramientas de accesibilidad completas, es importante considerar la accesibilidad de su contenido web en estas plataformas. Este artículo analiza las consideraciones de accesibilidad específicas para dispositivos móviles.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de computación, una comprensión básica de HTML, CSS y JavaScript, y una comprensión de los artículos previos del curso.
Objetivo:Para comprender qué problemas existen con la accesibilidad en dispositivos móviles y cómo superarlos.
+ +

Accessibility on mobile devices

+ +

 

+ +

El estado de accesibilidad, y el soporte para los estándares web en general, es bueno en los dispositivos móviles modernos. Atrás quedaron los días en que los dispositivos móviles utilizaban tecnologías web completamente diferentes para los navegadores de escritorio, lo que obligaba a los desarrolladores a utilizar el rastreo de los navegadores y les servía sitios completamente separados (aunque muchas empresas aún detectan el uso de dispositivos móviles y les ofrecen un dominio móvil separado).

+ +

En estos días, los dispositivos móviles en general pueden manejar sitios web "completos", y las plataformas principales incluso tienen lectores de pantalla incorporados para permitir que los usuarios con discapacidades visuales los utilicen con éxito. Los navegadores móviles modernos tienden a tener un buen soporte para WAI-ARIA, también.

+ +

 

+ +

 

+ +

Para hacer que un sitio web sea accesible y utilizable en dispositivos móviles, solo debe seguir las buenas prácticas generales de diseño web y accesibilidad.

+ +

Hay algunas excepciones que requieren una consideración especial para el móvil; Los principales son:

+ +

 

+ + + +

Resumen de las pruebas del lector de pantalla en Android e iOS

+ +

 

+ +

Las plataformas móviles más comunes tienen lectores de pantalla completamente funcionales. Estos funcionan de la misma manera que los lectores de pantalla de escritorio, excepto que se operan en gran parte mediante gestos táctiles en lugar de combinaciones de teclas.

+ +

Veamos los dos principales: TalkBack en Android y VoiceOver en iOS.

+ +

 

+ +

Android TalkBack

+ +

 

+ +

El lector de pantalla TalkBack está integrado en el sistema operativo Android.

+ +

Para activarlo, seleccione Configuración> Accesibilidad> TalkBack, y luego presione el interruptor deslizante para activarlo. Siga las indicaciones adicionales en pantalla que le presenten.

+ +

Nota: las versiones anteriores de TalkBack están activadas de formas formas ligeramente distintas.

+ +

Cuando TalkBack esté activado, los controles básicos de su dispositivo Android serán un poco diferentes. Por ejemplo:

+ +
    +
  1. Pulsar una aplicación solo lo seleccionará, y el dispositivo leerá qué es la aplicación.
    2. +
  2. Al deslizar hacia la izquierda y hacia la derecha, se moverá entre las aplicaciones o los botones / controles si se encuentra en una barra de control. El dispositivo leerá cada opción.
    3. +
  3. Si toca dos veces en cualquier lugar, se abrirá la aplicación / seleccione la opción.
    4. +
  4. También puede "explorar con un toque": mantenga el dedo presionado sobre la pantalla y arrástrelo, y su dispositivo leerá las diferentes aplicaciones / elementos con los que se mueve.
    5. +
+ +

Si desea desactivar TalkBack:

+ +
    +
  1. Navega a tu aplicación de configuración utilizando los gestos anteriores.
    2. +
  2. Vaya a Accesibilidad> TalkBack.
    3. +
  3. Navegue hasta el interruptor deslizante y actívelo para apagarlo.
    4. +
+ +

Nota: Puede acceder a la pantalla de inicio en cualquier momento deslizando hacia arriba y hacia la izquierda con un movimiento suave. Si tiene más de una pantalla de inicio, puede moverse entre ellos deslizando dos dedos hacia la izquierda y hacia la derecha.

+ +

Para obtener una lista más completa de los gestos de TalkBack, consulte Usar gestos TalkBack.

+ +

Desbloqueo del telefono

+ +

 

+ +

Cuando TalkBack está activado, desbloquear el teléfono es un poco diferente.

+ +

Puede hacer un deslizamiento con dos dedos hacia arriba desde la parte inferior de la pantalla de bloqueo. Si ha establecido un código de acceso o un patrón para desbloquear su dispositivo, se lo dirigirá a la pantalla de entrada correspondiente para ingresarlo.

+ +

También puede explorar tocando para encontrar el botón Desbloquear en la parte inferior central de la pantalla y luego toque dos veces.

+ +

 

+ +

Menús globales y locales

+ +

 

+ +

TalkBack le permite acceder a los menús de contexto global y local, donde quiera que haya navegado en el dispositivo. El primero proporciona opciones globales relacionadas con el dispositivo en su conjunto, y el segundo proporciona opciones relacionadas con la aplicación / pantalla actual en la que se encuentra.

+ +

Para llegar a estos menús:

+ +

 

+ +
    +
  1. Acceda al menú global deslizando rápidamente hacia abajo y luego a la
    2. +
  2. Acceda al menú local deslizando rápidamente hacia arriba y luego a la
    3. +
  3. Desliza el dedo hacia la izquierda y hacia la derecha para alternar entre las diferentes opciones.
    4. +
  4. Una vez que haya seleccionado la opción que desea, haga doble clic para elegir esa opción.
    5. +
+ +

Para obtener detalles sobre todas las opciones disponibles en los menús de contexto global y local, consulte Uso global y local contextual de menús.

+ +

 

+ + + +

 

+ +

Puede usar el menú contextual local mientras está en un navegador web para encontrar opciones para navegar por páginas web usando solo los encabezados, controles de formulario o enlaces, o navegar línea por línea, etc.

+ +

Por ejemplo, con TalkBack activado:

+ +
    +
  1.     Abra su navegador web.
    2. +
  2.     Activar la barra de URL.
    3. +
  3.     Ingrese una página web que tenga muchos encabezados, como la página principal de bbc.co.uk. Para ingresar el texto de la URL: +
      +
    • Seleccione la barra de URL deslizando hacia la izquierda / derecha hasta que llegue a ella, y luego toque dos veces.
      • +
    • Mantenga presionado el teclado virtual hasta que obtenga el carácter que desea y luego suelte el dedo para escribirlo. Repita para cada personaje.
      • +
    • Una vez que hayas terminado, encuentra la tecla Intro y presiónala.
      • +
    +
    4. +
  4.     Desliza el dedo hacia la izquierda y hacia la derecha para moverte entre los diferentes elementos de la página.
    5. +
  5.     Deslice hacia arriba y hacia la derecha con un movimiento suave para ingresar al menú de contenido local.
    6. +
  6.     Deslízate hacia la derecha hasta que encuentres la opción "Encabezados y puntos de referencia".
    7. +
  7.     Pulse dos veces para seleccionarlo. Ahora podrá desplazarse hacia la izquierda y hacia la derecha para moverse entre encabezados y puntos de referencia de ARIA.
    8. +
  8.     Para volver al modo predeterminado, ingrese nuevamente al menú de contexto local deslizando hacia arriba y a la derecha, seleccione "Predeterminado", y luego toque dos veces para activar.
    9. +
+ +

Nota: consulte Empezar en Android con TalkBack para obtener una documentación más completa.

+ +

 

+ +

iOS VoiceOver

+ +

 

+ +

Una versión móvil de VoiceOver está integrada en el sistema operativo iOS.

+ +

Para activarlo, vaya a la aplicación de configuración y seleccione General> Accesibilidad> VoiceOver. Presione el control deslizante VoiceOver para habilitarlo (también verá otras opciones relacionadas con VoiceOver en esta página).

+ +

Una vez que VoiceOver esté habilitado, los gestos de control básico de iOS serán un poco diferentes:

+ +
    +
  1.     Un solo toque hará que se seleccione el elemento que tocas; su dispositivo dirá el elemento que ha tocado.
    2. +
  2.     También puede navegar por los elementos en la pantalla deslizando hacia la izquierda y hacia la derecha para moverse entre ellos, o deslizando el dedo por la pantalla para moverse entre diferentes elementos (cuando encuentra el elemento que desea, puede quitar el dedo para seleccionarlo). ).
    3. +
  3.     Para activar el elemento seleccionado (por ejemplo, abrir una aplicación seleccionada), toque dos veces en cualquier lugar de la pantalla.
    4. +
  4.     Desliza tres dedos para desplazarte por una página.
    5. +
  5.     Toque con dos dedos para realizar una acción relevante para el contexto, por ejemplo, tomar una foto mientras está en la aplicación de la cámara.
    6. +
+ +

Para apagarlo nuevamente, navegue de nuevo a Configuración> General> Accesibilidad> VoiceOver usando los gestos anteriores, y active el control deslizante VoiceOver para desactivarlo.

+ +

 

+ +

Desbloquear el teléfono

+ +

Para desbloquear el teléfono, debe presionar el botón de inicio (o deslizar) de manera normal. Si tiene un código de acceso configurado, puede seleccionar cada número deslizando / deslizando (como se explicó anteriormente) y luego toque dos veces para ingresar cada número cuando haya encontrado el correcto.

+ +

Usando el rotor

+ +

 

+ +

Cuando VoiceOver está activado, tiene una función de navegación llamada Rotor disponible para usted, que le permite elegir rápidamente entre una serie de opciones útiles comunes. Para usarlo:

+ +
    +
  1. Gira dos dedos alrededor de la pantalla como si estuvieras girando un dial. Cada opción se leerá en voz alta a medida que gire más. Puede ir hacia adelante y hacia atrás para recorrer las opciones.
    2. +
  2. Una vez que hayas encontrado la opción que +
      +
    • Suelte los dedos para seleccionarlo.
      • +
    • Si es una opción que puede repetir el valor de (como Volumen o Velocidad de voz), puede deslizar hacia arriba o hacia abajo para aumentar o disminuir el valor del elemento seleccionado.
      • +
    +
    3. +
+ +

Las opciones disponibles en el Rotor son sensibles al contexto; serán diferentes según la aplicación o la vista en la que se encuentre (consulte a continuación un ejemplo).

+ +

 

+ + + +

Vamos a hacer una prueba a navegar con VoiceOver:

+ +
    +
  1. Abra su navegador web.
    2. +
  2. Activar la barra de URL.
    3. +
  3. Ingrese una página web que tenga muchos encabezados, como la página principal de bbc.co.uk. Para ingresar el texto de la URL: +
      +
    • Seleccione la barra de URL deslizando hacia la izquierda / derecha hasta que llegue a ella, y luego toque dos veces.
      • +
    • Para cada personaje, mantenga presionado el teclado virtual hasta que obtenga el carácter que desea y luego suelte el dedo para seleccionarlo. Pulse dos veces para escribirlo.
      • +
    • Una vez que hayas terminado, encuentra la tecla Intro y presiónala.
      • +
    +
    4. +
  4. Desliza el dedo hacia la izquierda y hacia la derecha para moverte entre los elementos de la página. Puede tocar dos veces un elemento para seleccionarlo (por ejemplo, siga un enlace).
    5. +
  5. Por defecto, la opción de Rotor seleccionada será Speaking Rate; actualmente puede deslizar hacia arriba y hacia abajo para aumentar o disminuir la frecuencia de habla.
    6. +
  6. Ahora gire dos dedos alrededor de la pantalla como un cuadrante para mostrar el rotor y muévase entre sus opciones. Aquí hay algunos ejemplos de las opciones disponibles: +
      +
    • Tasa de habla: Cambia la tasa de habla.
      • +
    • Contenedores: muévete entre los diferentes contenedores semánticos de la página.
      • +
    • Encabezados: muévete entre los encabezados de la página.
      • +
    • Enlaces: Mover entre enlaces en la página.
      • +
    • Controles de formulario: muévase entre los controles de formulario en la página.
      • +
    • Idioma: Mover entre diferentes traducciones, si están disponibles.
      • +
    +
    7. +
  7. Seleccionar encabezados. Ahora podrá desplazarse hacia arriba y hacia abajo para moverse entre los encabezados de la página.
    8. +
+ +

Nota: Para obtener una referencia más completa que cubra los gestos de VoiceOver disponibles y otros consejos sobre las pruebas de accesibilidad en iOS, consulte Probar la accesibilidad en su dispositivo con VoiceOver.

+ +

 

+ +

Mecanismos de control

+ +

En nuestro artículo de accesibilidad de CSS y JavaScript, examinamos la idea de eventos que son específicos de un determinado tipo de mecanismo de control (eventos ratón-específicos). Para resumir, esto causa problemas de accesibilidad porque otros mecanismos de control no pueden activar la funcionalidad asociada.

+ +

Como ejemplo, el evento de clic es bueno en términos de accesibilidad: se puede invocar un controlador de eventos asociado haciendo clic en el elemento en el que está configurado el controlador, haciendo tabulaciones en él y presionando Intro / Retorno, o tocándolo en un dispositivo de pantalla táctil. Pruebe nuestro ejemplo simple-button-example.html (véalo en vivo) para ver lo que queremos decir.

+ +

Alternativamente, los eventos específicos del mouse como mousedown y mouseup crean problemas: sus controladores de eventos no pueden invocarse usando controles que no sean del mouse.

+ +

Si intenta controlar nuestro ejemplo de  simple-box-drag.html (ver ejemplo en vivo) con el teclado o el toque, verá el problema. Esto ocurre porque estamos usando un código como el siguiente:

+ +
div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;
+ +

Para habilitar otras formas de control, debe usar eventos diferentes pero equivalentes; por ejemplo, los eventos táctiles funcionan en dispositivos con pantalla táctil:

+ +
div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;
+ +

Hemos proporcionado un ejemplo sencillo que muestra cómo usar el mouse y los eventos táctiles juntos multi-control-box-drag.html (ver ejemplo en vivo).

+ +

Nota: También puede ver ejemplos totalmente funcionales que muestran cómo implementar diferentes mecanismos de control en Implementando mecanismos de control de juego.

+ +

Diseño de respuesta

+ +

El diseño de respuesta es la práctica de hacer que sus diseños y otras características de sus aplicaciones cambien dinámicamente dependiendo de factores como el tamaño de la pantalla y la resolución, para que sean utilizables y accesibles para usuarios de diferentes tipos de dispositivos.

+ +

En particular, los problemas más comunes que deben abordarse para dispositivos móviles son:

+ +

 

+ + + +

Nota: No proporcionaremos una discusión completa de las técnicas de diseño receptivo aquí, ya que están cubiertas en otros lugares alrededor de MDN (vea los enlaces anteriores).

+ +

Consideraciones específicas para móviles

+ +

Hay otros aspectos importantes a tener en cuenta al hacer que los sitios sean más accesibles en dispositivos móviles. Hemos enumerado un par aquí, pero agregaremos más cuando pensemos en ellos.

+ +

No deshabilitar el zoom

+ +

Usando viewport, es posible deshabilitar el zoom, usando un código como este en su {{htmlelement("head")}}:

+ +
<meta name="viewport" content="user-scalable=no">
+ +

Nunca debe hacer esto si es posible: muchas personas confían en el zoom para poder ver el contenido de su sitio web, por lo que eliminar esta funcionalidad es una muy mala idea. Hay ciertas situaciones en las que el zoom podría romper la interfaz de usuario; en tales casos, si cree que necesita deshabilitar el zoom, debe proporcionar algún otro tipo de equivalente, como un control para aumentar el tamaño del texto de una manera que no rompa su interfaz de usuario.

+ +

Mantener los menús accesibles.

+ +

 

+ +

Debido a que la pantalla es mucho más estrecha en los dispositivos móviles, es muy común utilizar consultas de medios y otras tecnologías para hacer que el menú de navegación se reduzca a un pequeño icono en la parte superior de la pantalla, que se puede presionar para mostrar el menú solo si es necesario - cuando el sitio se ve en el móvil. Esto suele representarse mediante un icono de "tres líneas horizontales" y, por lo tanto, el patrón de diseño se conoce como "menú de hamburguesas".

+ +

Al implementar un menú de este tipo, debe asegurarse de que el control para revelarlo sea accesible mediante los mecanismos de control apropiados (normalmente, toque para dispositivos móviles), como se explica en {{ anch("Control mechanisms" )}}, y que el resto La página se aleja o se oculta de alguna manera mientras se accede al menú, para evitar confusiones al navegar.

+ +

Haga clic aquí para un buen ejemplo de menú de hamburguesa.

+ +

Entrada de usuario

+ +

 

+ +

En los dispositivos móviles, el ingreso de datos tiende a ser más molesto para los usuarios que la experiencia equivalente en computadoras de escritorio. Es más conveniente escribir texto en las entradas de formulario utilizando un teclado de computadora de escritorio o portátil que un teclado virtual de pantalla táctil o un pequeño teclado físico móvil.

+ +

Por esta razón, vale la pena intentar minimizar la cantidad de escritura necesaria. Como ejemplo, en lugar de hacer que los usuarios completen el título de su trabajo cada vez que usan una entrada de texto regular, podría ofrecer un menú {{htmlelement ("select")}} que contenga las opciones más comunes (que también ayuda a mantener la coherencia en entrada de datos), y ofrece una opción "Otro" que muestra un campo de texto para escribir cualquier valor atípico. Puedes ver un ejemplo simple de esta idea en acción en common-job-types.html (ver el common jobs ejemplo en vivo).

+ +

También vale la pena considerar el uso de los tipos de entrada de formulario HTML5, así como la fecha en las plataformas móviles, ya que ambos los manejan bien: tanto Android como iOS, por ejemplo, muestran widgets utilizables que se adaptan bien a la experiencia del dispositivo. Ver html5-form-examples.html para algunos ejemplos (ver el ejemplo de formulario en vivo en HTML5) — intenta cargarlos y manipularlos en dispositivos móviles. Por ejemplo:

+ + + +

If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See input types for raw information on detecting different input types, and also check out our feature detection article for much more information.

+ +

Resumen

+ +

En este artículo, le proporcionamos algunos detalles sobre problemas comunes comunes relacionados con la accesibilidad móvil y cómo superarlos. También lo llevamos a través del uso de los lectores de pantalla más comunes para ayudarlo en las pruebas de accesibilidad.

+ +

Ver también

+ + + +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +
+

En este módulo

+ + +
+
diff --git "a/files/es/learn/accessibility/qu\303\251_es_la_accesibilidad/index.html" "b/files/es/learn/accessibility/qu\303\251_es_la_accesibilidad/index.html" new file mode 100644 index 0000000000..e92994e37c --- /dev/null +++ "b/files/es/learn/accessibility/qu\303\251_es_la_accesibilidad/index.html" @@ -0,0 +1,211 @@ +--- +title: ¿Qué es la accesibilidad? +slug: Learn/Accessibility/Qué_es_la_accesibilidad +translation_of: Learn/Accessibility/What_is_accessibility +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
+ +

En este artículo se inicia el módulo con una explicación ampliada sobre qué es la accesibilidad. Esta visión general incluye qué grupos de personas necesitamos tener en cuenta y por qué, qué herramientas utilizan estas personas para interactuar con la web y cómo podemos hacer que la accesibilidad sea parte de nuestro flujo de trabajo de desarrollo web.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML y CSS.
Objetivo:Familiarizarse con la accesibilidad (qué es y cómo te afecta como desarrollador web).
+ +

¿Qué es la accesibilidad?

+ +

La accesibilidad hace que tus sitios web puedan ser utilizados por el mayor número de personas posible. Tradicionalmente, se ideó para las personas con discapacidad, pero la creación de sitios accesibles también beneficia a otros grupos, como los que utilizan los dispositivos móviles o los que tienen conexiones de red lentas.

+ +

También podrías pensar en la accesibilidad como una forma de tratar a todos por igual y darles las mismas oportunidades, sin importar su capacidad o circunstancias. Al igual que es injusto excluir a alguien de un edificio porque vaya en silla de ruedas (generalmente, los edificios públicos modernos tienen rampas o ascensores), tampoco es correcto excluir a alguien de un sitio web porque tenga una discapacidad visual. Todos somos diferentes, pero todos somos humanos, y por lo tanto tenemos los mismos derechos.

+ +

Por eso debemos hacer las cosas accesibles. En algunos países es obligado por ley proporcionar sitios web accesibles, lo que te puede abrir algunos mercados importantes que de otra manera no serían capaces de utilizar tus servicios o comprar tus productos.

+ +

Crear sitios web accesibles nos beneficia a todos:

+ + + +

¿Con que tipo de discapacidades nos encontraremos?

+ +

Las personas con discapacidad son tan diversas como las personas sin discapacidad, y también lo son sus discapacidades. La clave está en pensar más allá de tu ordenador y en cómo utilizas la web y empezar a aprender acerca de cómo otros la utilizan. Tú no eres tus usuarios. A continuación explicaremos los principales tipos de discapacidad que vamos a considerar, junto con las herramientas especiales que se utilizan para acceder al contenido web (conocidas como tecnologías de apoyo o AT, de assistive technologies).

+ +
+

Nota: La hoja informativa sobre discapacidad y salud de la Organización Mundial de la Salud establece que «Más de mil millones de personas, aproximadamente el 15% de la población mundial, tienen alguna forma de discapacidad» y «Entre 110 millones y 190 millones de adultos tienen dificultades funcionales significativas».

+
+ +

Personas con discapacidad visual

+ +

Las personas con discapacidad visual son aquellas con ceguera, poca visión o daltonismo. Muchas personas con discapacidad visual utilizan amplificadores de pantalla que consisten en lupas físicas o funciones de zoom por software. La mayoría de los navegadores y sistemas operativos de hoy en día tienen instaladas funciones de zoom. Algunos usuarios confían en los lectores de pantalla, un software que lee en voz alta los textos digitales. Algunos ejemplos de lectores de pantalla incluyen:

+ + + +

Familiarizarse con los lectores de pantalla puede ser útil, así como configurar un lector de pantalla y jugar con él para aprender cómo funciona. Consulta nuestra guía de lectores de pantalla de prueba para la navegación cruzada para obtener más detalles sobre su uso. El vídeo siguiente proporciona un breve ejemplo de cómo es esta experiencia.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

En términos de estadística, la Organización Mundial de la Salud estima que «Alrededor de 285 millones de personas de todo el mundo tienen discapacidad visual: 39 millones son ciegas y 246 tienen visión reducida.» (Véase Discapacidad visual y ceguera). Esa es una población grande y significativa de usuarios (casi la misma población de los Estados Unidos de América), a la que simplemente perderás porque tu sitio web no está codificado correctamente.

+ +

Personas con discapacidades auditivas

+ +

También conocidas como personas con trastornos auditivos o personas sordas. Son un grupo de personas con niveles de audición bajos o nulos. Las personas con discapacidad auditiva usan AT (véase Dispositivos de asistencia para personas con trastornos auditivos, de voz, del habla o del lenguaje), pero en realidad no hay AT específicos para el uso del ordenador/web.

+ +

Hay, sin embargo, técnicas específicas para ofrecer alternativas textuales a contenidos de audio, que van desde simples transcripciones hasta pistas de texto (es decir, subtítulos) que se pueden mostrar junto con el vídeo. Pero lo veremos más adelante.

+ +

Las personas con discapacidad auditiva también representan una importante base de usuarios: «466 millones de personas en todo el mundo tienen pérdida auditiva discapacitante», dice la hoja informativa sobre Sordera y pérdida auditiva de la Organización Mundial de la Salud.

+ +

Personas con discapacidad motriz

+ +

Estas personas tienen discapacidades relativas a la movilidad, que pueden implicar problemas puramente físicos (como la pérdida de una extremidad o la parálisis) o trastornos neurológicos/genéticos que conducen a la debilidad o pérdida de control en las extremidades. Algunas personas simplemente pueden tener dificultades a la hora de mover el ratón, mientras que otras podrían verse más gravemente afectadas, tal vez estén paralizadas y necesiten utilizar un puntero de cabeza para interactuar con los ordenadores.

+ +

Este tipo de discapacidad se da principalmente por la vejez, y no por cualquier trauma o condición específica, y también podría resultar de limitaciones en el hardware (algunos usuarios podrían no tener un ratón).

+ +

La forma en que esto afecta al desarrollo web es el requisito de que los controles sean accesibles por el teclado. Hablaremos de la accesibilidad del teclado en artículos posteriores de este módulo, pero te recomendamos probar algunos sitios web utilizando solo el teclado para ver cómo funcionan. Por ejemplo, ¿se puede utilizar la tecla de tabulación para moverse entre los diferentes controles de un formulario web? Puedes encontrar más detalles sobre los controles del teclado en nuestro apartado Accesibilidad desde el teclado.

+ +

Si nos basamos en las estadísticas, vemos que un número significativo de personas tienen problemas de movilidad. Los Centros para el Control y la Prevención de Enfermedades de Discapacidad y Funcionalidad (Adultos a partir de 18 años no registrados en una institución) de los Estados Unidos informan de que el porcentaje de adultos con alguna disfunción física en los EUA es del 16,1%.

+ +

Personas con discapacidad cognitiva

+ +

La discapacidad cognitiva engloba una amplia gama de discapacidades, desde las personas que presentan las capacidades intelectuales más limitadas hasta toda la población que tiene problemas a la hora de recordar por los síntomas de la edad. Este amplio abanico incluye a las personas con enfermedades mentales como la depresión y la esquizofrenia. También incluye a personas con dificultades de aprendizaje, como la dislexia y el trastorno por déficit de atención con hiperactividad. Es importante destacar que, aunque hay una gran diversidad dentro de las definiciones clínicas de alteraciones cognitivas, las personas que las experimentan tienen un conjunto común de problemas funcionales, que incluye dificultades a la hora de entender los contenidos, recordar cómo completar las tareas y confusión ante páginas web diseñadas de forma incoherente.

+ +

Una buena base de accesibilidad para personas con deficiencias cognitivas incluye:

+ + + +

Observaciones

+ + + +

Implementa la accesibilidad en tu proyecto

+ +

Un mito común de la accesibilidad es que se trata de un «extra añadido» que encarece tu proyecto. Este mito puede resultar cierto si:

+ + + +

Sin embargo, si se tiene en cuenta la accesibilidad desde el inicio de un proyecto, el coste es muy reducido.

+ +

Al planificar tu proyecto, debes tener en cuenta las pruebas de accesibilidad en la fase de pruebas, lo mismo que las pruebas para cualquier otro sector de público objetivo importante (por ejemplo, los navegadores de escritorio o los navegadores para dispositivo móvil). Somete tu proyecto a pruebas desde una etapa temprana y con frecuencia, idealmente con pruebas automatizadas para detectar carencias detectables en la programación, como la falta de textos alternativos en las imágenes o textos de enlace no adecuados (consulta Relaciones entre elementos y contexto). Y haz algunas pruebas con grupos de usuarios con discapacidad para ver cómo se desenvuelven con las características más complejas de tu sitio web. Por ejemplo:

+ + + +

Puedes y debes tener en cuenta las áreas potencialmente problemáticas del contenido que habrá que modificar para proporcionarles accesibilidad, asegúrate de que se prueban a fondo y piensa en soluciones/alternativas. El contenido textual (como veremos en el próximo artículo) es fácil, pero ¿qué pasa con el contenido multimedia y con esos fantásticos gráficos 3D? Echa un ojo al presupuesto del proyecto y piensa en soluciones que estén a tu disposición para convertir tales contenidos en accesibles. Transcribir todos tus archivos multimedia es una opción posible, aunque cara.

+ +

Seamos realistas. El «100% de accesibilidad» es un ideal inalcanzable, ya que siempre te encontrarás con algún tipo de caso límite en que un determinado usuario encuentra ciertos contenidos difíciles de usar, pero debes hacer todo lo que puedas. Si planeas incluir un gráfico 3D circular creado a partir de WebGL, es posible que desees incluir una tabla de datos como una representación alternativa accesible. O bien puedes simplemente incluir la tabla y deshacerte del gráfico circular 3D (todo el mundo puede acceder a la tabla, su codificación resulta más simple, y además consume menos recursos de la CPU y es de mantenimiento más fácil.

+ +

Por otro lado, si trabajas en un sitio web de una galería que muestra obras de arte interesantes en 3D, no sería razonable esperar que cada obra de arte sea perfectamente accesible para las personas con discapacidad visual, ya que se trata de un medio completamente visual.

+ +

Para demostrar que te importa y que has pensado en la accesibilidad, publica una declaración de accesibilidad en la página web que explique tu política de accesibilidad y los pasos realizados para hacer que el sitio web sea accesible. Si alguien se queja de que tiene un problema de accesibilidad: inicia un diálogo con ellos, se empático y toma las medidas razonables para tratar de solucionar el problema.

+ +
+

Nota: Nuestro artículo sobre Cómo afrontar los problemas de accesibilidad más comunes expone los detalles de accesibilidad que es necesario tener más en cuenta.

+
+ +

En resumen:

+ + + +

Directrices de accesibilidad y la ley

+ +

Hay numerosas listas de control y conjuntos de directrices en las cuales basar las pruebas de accesibilidad, por lo que podría parecer abrumador a primera vista. Nuestro consejo es que te familiarices con las áreas básicas en las que te interesa centrarte, así como que comprendas las estructuras de alto nivel de las directrices que son más relevantes para ti.

+ + + +

Así, mientras que la WCAG es un conjunto de directrices, tu país probablemente tiene leyes que rigen la accesibilidad web, o al menos la accesibilidad de los servicios disponibles para el público (que incluyen sitios web, televisión, espacios físicos, etc.). Conocer estas leyes puede resultarte útil. Si no te preocupas por comprobar que tu contenido sea accesible, podrías incurrir en alguna responsabilidad legal, si la gente se queja.

+ +

Suena serio, pero en realidad solo tienes que considerar la accesibilidad como la prioridad principal a la hora de desarrollar tu web, como ya hemos dicho. En caso de duda, asesórate por un abogado cualificado. Y como nosotros no lo somos, no vamos a ofrecer más consejos sobre este tema.

+ +

API de accesibilidad

+ +

Los navegadores web hacen uso de API de accesibilidad especiales (proporcionadas por el sistema operativo subyacente) que exponen información útil para las tecnologías de asistencia (AT, assistive technologies): la mayoría de AT tienden a utilizar información semántica, por lo que esta información no incluye información de estilo o JavaScript. Esta información se estructura en un árbol de datos, denominado árbol de accesibilidad.

+ +

Los diferentes sistemas operativos disponen de diferentes API de accesibilidad:

+ + + +

Cuando la información semántica nativa proporcionada por los elementos HTML de tus aplicaciones web falla, puedes complementarlo con características de la especificación WAI-ARIA, que añaden información semántica al árbol para mejorar la accesibilidad. Puedes aprender más acerca de WAI-ARIA en nuestro artículo de fundamentos WAI-ARIA.

+ +

Resumen

+ +

Este artículo debería haber dado una descripción detallada sobre la accesibilidad, mostrar por qué es importante y enseñar cómo puede encajar en tu flujo de trabajo. Ahora también deberías tener sed de conocimientos sobre los detalles de implementación que hacen que los sitios sean accesibles. Comenzaremos con esto en la sección siguiente, observando por qué HTML es una buena base para la accesibilidad.

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

+ +

En este módulo

+ + + +

Véase también

+ + diff --git a/files/es/learn/aprender_y_obtener_ayuda/index.html b/files/es/learn/aprender_y_obtener_ayuda/index.html new file mode 100644 index 0000000000..a7f06d90d8 --- /dev/null +++ b/files/es/learn/aprender_y_obtener_ayuda/index.html @@ -0,0 +1,321 @@ +--- +title: Aprender y obtener ayuda +slug: Learn/Aprender_y_obtener_ayuda +tags: + - Aprender + - Desarrollo web + - Principiante + - conseguir ayuda + - obtener ayuda +translation_of: Learn/Learning_and_getting_help +--- +

{{learnsidebar}}

+ +

Es genial que dediques algo de tiempo a aprender un nuevo conjunto de habilidades, pero puedes emplear algunas buenas prácticas que harán que tu aprendizaje sea más efectivo. También hay momentos en los que te atascarás y te sentirás frustrado, incluso los desarrolladores web profesionales se sienten así regularmente, y vale la pena conocer las formas más efectivas de tratar de obtener ayuda para que puedas progresar en tu trabajo. Este artículo proporciona algunos consejos y sugerencias en ambas áreas que te ayudarán a obtener más provecho del aprendizaje del desarrollo web, así como una lectura adicional para que puedas obtener más información sobre cada subtema si lo deseas.

+ +

Aprendizaje efectivo

+ +

Sigamos adelante y pensemos en un aprendizaje efectivo.

+ +

Diferentes métodos de aprendizaje

+ +

Es interesante considerar que hay dos formas principales en las que tu cerebro aprende cosas — el aprendizaje enfocado y el aprendizaje difuso:

+ + + +

A partir de los estudios que los neurocientíficos han realizado sobre la actividad cerebral, hemos descubierto que realmente no se puede participar en ambas formas de aprendizaje, o de pensamiento simultáneamente. Entonces, ¿cuál debes elegir? Puedes pensar que el aprendizaje enfocado es mejor para estudiar, pero en realidad, ambos son muy importantes.

+ +

El pensamiento enfocado es excelente para concentrarte mucho en temas específicos, profundizar en la resolución de problemas y mejorar tu dominio de las técnicas requeridas, fortaleciendo las vías neuronales en tu cerebro donde se almacena esa información. Sin embargo, no es muy bueno para entender "el panorama general" y desbloquear nuevas vías neuronales cuando intentas comprender nuevos temas o resolver nuevos problemas que no has encontrado antes.

+ +

Para eso, necesitas un pensamiento difuso. Esto es lo opuesto al enfoque — dejas que tu cerebro divague por el paisaje más amplio, buscando conexiones que no tenías antes, tocando cosas nuevas (o nuevas combinaciones de cosas) en las que luego puedes concentrarte para fortalecerlas y empezar a entender realmente lo que significan.

+ +

Es por eso que generalmente es bueno leer primero un material introductorio para obtener una comprensión de alto nivel de un área, antes de saltar a los detalles específicos.

+ +

También es la razón por la que, a veces, puedes quedar realmente atrapado en un problema, pero luego averiguar la respuesta cuando vas a tomar un café (o a caminar). Podrías:

+ +
    +
  1. Saber cómo solucionar el problema A con la herramienta A.
    2. +
  2. Saber cómo solucionar el problema B con la herramienta B.
    3. +
  3. No saber cómo solucionar el problema C.
    4. +
+ +

Supongamos que te enfocas en el problema C por un tiempo y te frustras porque no puedes encontrar la solución para resolverlo. Pero luego, después de caminar para tomar un poco de aire fresco, es posible que descubras que, mientras tu mente divaga, de repente estableces una conexión entre la herramienta A y la herramienta B, ¡y te das cuenta de que las puedes usar juntas para solucionar el problema C! No siempre es así de simple, pero también es sorprendente cuántas veces sucede. Esto también resalta la importancia de tomar descansos regulares cuando estás estudiando frente a la computadora.

+ +

Diferentes materiales de aprendizaje

+ +

También vale la pena mirar los diferentes tipos de materiales de aprendizaje disponibles, para ver cuáles son los más efectivos para que aprendas.

+ +

Artículos textuales

+ +

Encontrarás muchos artículos escritos en la web para enseñarte sobre diseño web. Como la mayor parte de este curso, por ejemplo. Algunos de los artículos serán tutoriales, para enseñarte una determinada técnica o concepto importante (como "aprender a crear un reproductor de video" o "Aprender el modelo de cajas CSS"), y algunos de los artículos serán material de referencia, para permitirte recordar detalles que hayas olvidado (como "¿cuál es la sintaxis de la propiedad background de CSS"?)

+ +

MDN Web Docs es muy bueno para ambos tipos — el área en la que te encuentras actualmente es excelente para aprender técnicas y conceptos, y también tenemos varias secciones de referencia gigantes que te permiten buscar cualquier sintaxis que no puedas recordar.

+ +

También hay varios otros recursos excelentes en la web, algunos de los cuales mencionaremos a continuación.

+ +
+

Nota: el texto anterior debería haberte proporcionado un dato importante: ¡no se espera que recuerdes todo! Los desarrolladores web profesionales todo el tiempo usan herramientas como MDN Web Docs para buscar cosas que han olvidado. Como descubrirás a lo largo de estas líneas, aprender desarrollo web tiene más que ver con la resolución de problemas y patrones de aprendizaje que con el aprendizaje de muchas sintaxis.

+
+ +

Videos

+ +

También hay una serie de sitios que tienen contenido de aprendizaje de video en ellos. YouTube es obvio, con canales como Mozilla Layout Land, MozillaDeveloper y Google ChromeDevelopers que proporcionan muchos útiles videos. Muchas personas prefieren artículos textuales para un aprendizaje más profundo y material de referencia, y videos para explicaciones rápidas de conceptos y nuevas características, pero realmente depende de ti lo que prefieras aprender. Aquí no hay una respuesta correcta e incorrecta.

+ +

Código de juegos interactivos

+ +

Posiblemente seas el tipo de persona que prefiere instrucciones mínimas y preferirías saltar directamente y comenzar a jugar con el código. Este también es un enfoque razonable, y algunos sitios de aprendizaje tienden a favorecerlo. Codecademy, por ejemplo, es un sitio de aprendizaje donde los tutoriales consisten principalmente en editores de códigos interactivos en los que debes escribir directamente el código y ver si se logró el resultado deseado.

+ +

Muchas páginas de referencia de documentos web de MDN también proporcionan ejemplos interactivos, donde puedes modificar el código y ver cómo cambia el resultado en vivo. Y tampoco hay nada de malo en crear tus propios ejemplos de código en tu computadora o en un editor de código en línea como JSBin, Codepen o Glitch. De hecho, ¡te invitarán a usarlos como parte de este curso cuando estés aprendiendo!

+ +
+

Nota: Los editores de código en línea también son realmente útiles para compartir el código que has escrito, por ejemplo, si estás colaborando en el aprendizaje con otra persona que no se encuentra en la misma ubicación o se lo envías a alguien para pedir ayuda con eso. Puedes compartir la dirección web del ejemplo con ellos para que puedan verlo y ayudarte.

+
+ +
+

Nota: Es posible que prefieras un método de aprendizaje sobre los demás, pero, de manera realista, probablemente terminarás con un enfoque híbrido. Y probablemente se te ocurran otros métodos además de los tres que cubrimos anteriormente.

+
+ +

Haz un plan

+ +

Es una buena idea crear un plan para ayudarte a lograr lo que quieres conseguir a través de tu aprendizaje.

+ +

Una declaración de objetivos

+ +

Suena tonto, pero ¿por qué no comenzar con una sola oración que diga lo que quieres lograr? Los siguientes tienen diferentes ámbitos, pero todos son realistas y alcanzables:

+ + + +

Los siguientes no son tan razonables:

+ + + +

¿Qué necesitas para llegar allí?

+ +

Una vez que hayas descrito tu objetivo, es una buena idea investigar qué necesitarás para lograrlo. Por ejemplo:

+ +

Materiales que necesito:

+ + + +

Conocimiento que necesito:

+ + + +

¿Cuánto tiempo y dinero costará?

+ +

Calcula el tiempo y el costo para obtener estas cosas. Si necesitas trabajar para ganar dinero para comprar los materiales requeridos, entonces deberás tener en cuenta el tiempo para hacerlo. Una vez que tengas un estimado del tiempo, puedes comenzar a elaborar un plan para tu vida.

+ +

¿Cuántas horas por semana necesitas invertir?

+ +

Una vez que sepas lo que necesitas hacer y cuánto tiempo crees que te llevará, puedes comenzar a escribir un plan a seguir para lograr tu objetivo. Puede ser tan simple como:

+ +

"Me llevará 500 horas aprender lo que necesito saber, y tengo un año para hacerlo, así que si asumo 2 semanas de vacaciones, tendré que trabajar en esto durante 10 horas por semana. Estoy gratis por las tardes y fines de semana, así que planearé mi tiempo en torno a eso".

+ +

La cantidad de tiempo que puedes dedicar a esto, por supuesto, depende de cuáles sean tus circunstancias. Si estás en la escuela, entonces tienes mucho más tiempo libre que si tienes un trabajo y niños que mantener. Todavía es posible lograr tus objetivos, pero debes ser realista sobre la rapidez con que puedes lograrlo.

+ +

Si estás haciendo un curso colegial o universitario para aprender desarrollo web, entonces la mayor parte de esta planificación la haces tú, ¡qué suerte!

+ +

Cuando hayas elaborado un horario semanal, debes mantener un registro de lo que logras hacer cada semana en una simple hoja de cálculo o incluso en un cuaderno.

+ +

Además, sería una buena idea tener algunos objetivos secundarios resueltos que te permitan realizar fácilmente un seguimiento de dónde te encuentras, por ejemplo:

+ + + +

Sigue pensando en cuánto progreso estás haciendo y ajusta tu plan si es necesario.

+ +

Mantente motivado

+ +

Es difícil mantenerte motivado, especialmente si estás tratando de aprender una habilidad compleja como la programación o el desarrollo web. Lo que sigue son algunos consejos para mantenerte motivado y seguir trabajando:

+ + + +

Resolución de problemas eficaz

+ +

No hay una única forma efectiva de resolver todos los problemas (y aprender todo) lo relacionado con el diseño y desarrollo web, pero hay algunos consejos generales que te servirán en la mayoría de los casos.

+ +

Romper las cosas en trozos

+ +

Para empezar, cuando intentas implementar algo específico y parece realmente difícil entenderlo, debes tratar de dividirlo en múltiples problemas o fragmentos más pequeños.

+ +

Por ejemplo, si estás considerando la tarea de "Crear un sitio web simple de dos columnas", la puedes desglosar de la siguiente manera:

+ + + +

Luego, podrías desglosarlo aún más, por ejemplo, "Implementar menú de navegación horizontal" podría escribirse como:

+ + + +

Cada uno de estos problemas no parece tan difícil de resolver como el gran problema que tuviste inicialmente. ¡Ahora solo tienes que empezar a resolverlos todos!

+ +

Aprende y reconoce los patrones

+ +

Como dijimos antes, el diseño/programación web se trata principalmente de resolución de problemas y patrones. Una vez que hayas escrito lo que necesitarás hacer para resolver un problema específico, puedes comenzar a descubrir qué características tecnológicas usar para resolverlo. Por ejemplo, los desarrolladores web profesionales han creado muchos menús de navegación horizontal, por lo que inmediatamente comenzarás a pensar en una solución como esta:

+ +

Un menú de navegación generalmente se crea a partir de una lista de enlaces, algo así como:

+ +
<ul>
+  <li>Primer elemento del menú</li>
+  <li>Segundo elemento del menú</li>
+  <li>Tercer elemento del menú</li>
+  <li>etc.</li>
+</ul>
+
+ +

Para hacer que todos los elementos se asienten horizontalmente en una línea, la forma moderna más fácil es usar flexbox:

+ +
ul {
+  display: flex;
+}
+ +

Para eliminar el espacio innecesario y las viñetas, podemos hacer esto:

+ +
ul {
+  list-style-type: none;
+  padding: 0;
+}
+ +

etc.

+ +

Si realmente eres un principiante en el desarrollo web, tendrás que estudiar y buscar en la web y encontrar soluciones para tales problemas. Si eres un desarrollador web profesional, probablemente recordarás la última vez que resolviste un problema similar, y solo tendrás que buscar algunos bits de la sintaxis que olvidaste desde entonces.

+ +

Cuando encuentres soluciones a tales problemas, vale la pena escribir notas sobre lo que hiciste y mantener algunos ejemplos de código mínimos en un directorio en algún lugar para que puedas mirar hacia atrás en el trabajo anterior.

+ +

Además, la web tiene {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas de desarrollo")}} que te permiten ver el código utilizado para crear cualquier sitio en la web, si no tienes una solución a mano, un buen método de investigación es encontrar sitios web con características similares en la naturaleza y averiguar cómo lo hicieron.

+ +
+

Nota: Observa cómo hablamos antes sobre el problema que estamos tratando de resolver primero, y la tecnología utilizada para resolverlo, en segundo lugar. Esta, casi siempre es la mejor manera de hacerlo — no comiences con una tecnología nueva y genial que desees usar, e intenta adaptarla a tu caso de uso.

+
+ +
+

Nota: La solución más sencilla suele ser la mejor.

+
+ +

Practica

+ +

Cuanto más practiques la resolución de un problema, más fuertes serán las vías neuronales de tu cerebro en esa área y más fácil será recordar los detalles y la lógica de ese problema en particular.

+ +

Sigue jugando con el código y practica más. Si se te acaban los problemas por resolver, busca algunas pruebas en línea, realiza algunos cursos más o pregunta a tus amigos y familiares (o escuela, o iglesia local) si hay algo que les gustaría que construyeras para ellos.

+ +

Obtener ayuda

+ +

El desarrollo web requiere que aprendas un complejo conjunto de habilidades — a veces estarás atascado y necesitarás ayuda. Como dijimos antes, incluso los desarrolladores profesionales regularmente necesitan ayuda para resolver problemas.

+ +

Hay una variedad de formas de obtener ayuda, y la siguiente información son algunos consejos para hacerlo de manera más efectiva.

+ +

Búsquedas web efectivas

+ +

Una habilidad importante para aprender es el arte de las búsquedas web efectivas — ¿qué términos de búsqueda necesitas usar en tu motor de búsqueda favorito para encontrar los artículos que necesitas?

+ +

A menudo es bastante obvio qué buscar. Por ejemplo:

+ + + +

Si deseas buscar algo que tenga palabras de moda menos obvias, debes pensar en qué es más probable que te devuelva lo que deseas.

+ + + +

Mensajes de error

+ +

Si tienes un problema con algún código y aparece un mensaje de error específico, a menudo es una buena idea copiar el mensaje de error en tu motor de búsqueda y utilizarlo como término de búsqueda. Si otras personas han tenido el mismo problema, es probable que haya algunos artículos o publicaciones de blog al respecto en lugares como MDN o Stack Overflow.

+ +
+

Nota: Stack Overflow es un sitio web realmente útil; básicamente es una enorme base de datos de preguntas y respuestas seleccionadas sobre diversas tecnologías y técnicas relacionadas. Probablemente encontrarás una respuesta que responda a tu pregunta. Si no, puedes hacer una pregunta y ver si alguien puede ayudarte.

+
+ +

Prueba en el navegador

+ +

A menudo es una buena idea ver si tu problema está afectando a todos los navegadores, o si solo ocurre en uno o en un pequeño número de navegadores. Si solo afecta a un navegador, por ejemplo, puedes usar ese navegador para limitar la búsqueda. Las búsquedas de ejemplo podrían verse así:

+ + + +

Usa MDN

+ +

El sitio en el que ya estás tiene una gran cantidad de información disponible, tanto material de referencia para buscar la sintaxis del código como guías/tutoriales para aprender técnicas.

+ +

Hemos proporcionado la mayoría de las respuestas a las preguntas que tendrás sobre los fundamentos del desarrollo web en esta parte de MDN. Si estás atascado, es bueno volver a leer los artículos asociados para ver si te perdiste algo.

+ +

Si no estás seguro de qué artículo leer, intenta buscar en MDN algunas palabras clave relacionadas (como se indicó anteriormente), o intenta una búsqueda web general. Para buscar en MDN, puedes usar la funcionalidad de búsqueda incorporada del sitio o mejor aún, usar tu motor de búsqueda favorito y poner "mdn" delante del término de búsqueda, por ejemplo, "diseño web receptivo mdn" o "backgrounf-color mdn".

+ +

Otros recursos en línea

+ +

Ya mencionamos Stack Overflow, pero hay otros recursos en línea que pueden ayudar.

+ +

Es bueno encontrar una comunidad de la que formar parte, y obtendrás mucho respeto si intentas ayudar a otros a responder sus preguntas y también a hacer las tuyas. Otros buenos ejemplos incluyen:

+ + + +

Sin embargo, también tiene sentido encontrar grupos útiles en sitios de redes sociales como Twitter o Facebook. Busca grupos que discutan los temas de desarrollo web que te interesen y únete. Sigue a las personas en Twitter que sabes que son influyentes, inteligentes o simplemente parecen compartir muchos consejos útiles.

+ +

Encuentros físicos

+ +

Por último, deberías intentar asistir a algunas reuniones físicas para conocer a otras personas de ideas afines, especialmente aquellas que atienden a principiantes. meetup.com es un buen lugar para encontrar reuniones físicas locales, y también puedes probar tu prensa local o lo que hay en los sitios.

+ +

También puedes intentar asistir a conferencias web completas. Si bien estas pueden ser costosas, puedes intentar ofrecerte como voluntario con ellos, y muchas conferencias ofrecen boletos de tarifa reducida, por ejemplo, boletos de estudiante o diversidad.

+ +

Ve también

+ + diff --git a/files/es/learn/codificacion-scripting/index.html b/files/es/learn/codificacion-scripting/index.html new file mode 100644 index 0000000000..50c3065d4a --- /dev/null +++ b/files/es/learn/codificacion-scripting/index.html @@ -0,0 +1,10 @@ +--- +title: Codificación-Scripting +slug: Learn/codificacion-scripting +tags: + - Codificación + - Principiante + - Scripting +translation_of: Learn +--- +

REDIRIGE Aprende

diff --git a/files/es/learn/common_questions/cuanto_cuesta/index.html b/files/es/learn/common_questions/cuanto_cuesta/index.html new file mode 100644 index 0000000000..aeffd72c64 --- /dev/null +++ b/files/es/learn/common_questions/cuanto_cuesta/index.html @@ -0,0 +1,162 @@ +--- +title: ¿Cuánto cuesta hacer algo en la Web? +slug: Learn/Common_questions/Cuanto_cuesta +tags: + - Comenzando + - Herramientas de desarrollo web + - Principiante + - alojamiento + - costo + - hosting +translation_of: Learn/Common_questions/How_much_does_it_cost +--- +
+

Dedicarse a la web no es tan barato como parece. En este artículo discutimos cuánto puedes tener que gastar, y por qué.

+
+ + + + + + + + + + + + +
Prerrequisitos:Deberías ya entender qué software necesitas, la diferencia entre una página web, un sitio web, etc., y qué es un nombre de dominio.
Objetivo:Examina el proceso completo para crear un sitio web y descubre cuánto te puede costar cada paso.
+ +

Resumen

+ +

Al lanzar un sitio web, puedes no gastar nada, o puede que el costo sea muy elevado. En este artículo discutimos acerca de cuánto cuesta todo y cómo obtienes lo que pagas (o no pagas).

+ +

Software

+ +

Editores de texto

+ +

Probablemente tienes un editor de texto: tal como Notepad en Windows, Gedit en Linux, TextEdit en Mac. Le resultará más fácil escribir código si elige un editor que coloree el código, chequee la sintaxis y te ayude a mantener la estructura del programa. 

+ +

Muchos editores son gratis, por ejemplo Atom, Brackets, Bluefish, TextWrangler, Eclipse, y Netbeans. Algunos, como Sublime Text, los puedes probar tanto como quieras, pero se te anima a pagar. Otros, como PhpStorm, pueden costar entre unas pocas docenas y 200 dólares, en dependencia del plan que pague. Algunos de ellos, como Microsoft Visual Studio, pueden costar cientos o miles de dólares; aunque Visual Studio Express is gratis para desarrolladores individuales o proyectos de código abierto. A menudo, los editores pagados tienen una versión de prueba.

+ +

Para comenzar, le segerimos probar con diferentes editores, para tener un indicio de cuál trabaja mejor para ti. Si está solamente escribiendo código simple de {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, utilice un editor sencillo.

+ +

El el precio no refleja de manera confiable la calidad o utilidad de un editor de texto. Tienes que probarlo por ti mismo y decidir si se ajusta a tus necesidades. Por ejemplo, Sublime Text es barato, pero tiene muhos plugins gratis que pueden extender su funcionalidad. 

+ +

Editores de imágenes

+ +

Tu sistema incluye seguramente un simple editor de imágenes, o visor: Paint en Windows, Eye of Gnome en Ubuntu, Preview en Mac. Estos programas son relativamente limitados, pronto gustarás tener un editor más potente para añadir capas, efectos y agrupamiento de imágenes.

+ +

Los editores pueden ser gratis (GIMP, Paint.NET), de costo moderado (PaintShop Pro, menos de $100), o cientos de dólares (Adobe Photoshop).

+ +

Puedes usar cualquiera de ellos, ya que tienen funciones similares, aunque algunos son tan completos que nunca vas a utilizar cada característica. Si en algún punto necesitas intercambiar proyectos con otros diseñadores, deberías descubrir qué herramientas utilizan. Los editores pueden exportar los proyectos finalizados a formatos de archivo estándares, pero cada editor guarda los proyectos actuales en su formato especializado. La mayoría de las imágenes en Internet están protegidas por los derechos de autor, por lo que es mejor chequear la licencia del aechivo antes de utilizarlo. Sitios como Pixabay proporcionan imágenes bajo la licencia CC0, así que la puedes usar, editar y publicar incluso con modificaciones para uso comercial.

+ +

Editores de medios

+ +

Si desea incluir video o audio en su sitio web, puede incrustar servicios online (por ejemplo YouTube, Vimeo, or Dailymotion), o incluir sus propios videos (ver más abajo los costos de ancho de banda).

+ +

Para archivos de audio, puede encontrar software gratuito(Audacity, Wavosaur), o pagar hasta unos poco cientos de dólares (Sony Sound Forge, Adobe Audition). Sin embargo, el software de edición de vídeo puede ser gratis (PiTiVi, OpenShot for Linux, iMovie for Mac), menos de $100 (Adobe Premiere Elements), o varios cientos de dólares (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). El software recibido con tu cámara digital puede cubrir todas tus necesidades.

+ +

Herramientas de publicación

+ +

Además necesitas una forma de subir archivos: desde tu disco duro a un servidor web distante. Para hacer esto deberías utilizar una herramienta de publicación tal como un cliente  (S)FTP, RSync, o Git/GitHub.

+ +

Cada sistema operativo incluye un cliente (S)FTP, como parte de su administrador de archivos. Windows Explorer, Nautilus (un administrador de archivos común en Linux), y Mac Finder inclueyen todos esta funcionalidad. Sin embargo, las personas a menudo seleccionan clientes (S)FTP dedicados a mostrar directorios locales y remotos y almacenar contraseñas de servidor.

+ +

Si desea instalar un cliente (S)FTP, existen varias opciones seguras y gratuitas: por ejemplo, FileZilla para todas las plataformas, WinSCP para Windows, Cyberduck para Mac o Windows, y otros más.

+ +

Debido a que el protocolo FTP es inseguro, deberías asegurarte de utilizar SFTP — la versión segura, encriptada de FTP que la mayoría de los sitios de alojamiento (en inglés hosting) actuales ofrecen por defecto— u otra solución segura como Rsync sobre SSH.

+ + + +

Ya debes tener un navegador o puedes conseguirlo gratuito. Si lo necesitas, descarga Firefox aquí o Google Chrome aquí.

+ +

Acceso a la web

+ +

Computadora / módem

+ +

Necesitas una computadora. El costo puede variar mucho, en dependencia de tu presupuesto, y dónde vivas. Para publicar un sitio web básico, sólo necesitas una computadora básica capaz de ejecutar, por lo que el nivel de entrada puede ser bastante bajo. 

+ +

Por supuesto, necesitarás una computadora más formal si quieres producir diseños complicados, retocar fotos, o producir archivos de audio y vídeo. 

+ +

Necesitas subir contenido a un servidor remoto (ver Alojamiento más abajo), por lo que necesitas un módem.Tu proveedor {{Glossary("ISP")}} puede venderte la conexión a internet por unos pocos dólares al mes, aunque tu presupuesto pudiera variar, en dependencia de tu localización.

+ +

Acceso del Proveedor ISP

+ +

Asegúrese de contar con suficiente {{Glossary("Ancho de banda", "ancho de banda")}}:

+ + + +

Alojamiento

+ +

Entendiendo el ancho de banda

+ +

Los proveedores de alojamiento te cobran de acuerdo a cuánto {{Glossary("Ancho de banda", "ancho de banda")}} consume tu sitio web. . Esto depende de cuántas personaas, y robots de rastreo Web, accedan a tu contenido durante un tiempo dado, y cuánto espacio en el servidor tu contenido ocupa. Esta es la razón por la cual las personas usualmente almacenan sus videos en servicios dedicadostales como Youtube, Dailymotion, y Vimeo. Por ejemplo, tu proveedor puede tener un plan que incluye hasta varios miles de visitantes por díam por un uso “razonable”. Sea cuidadoso, puesto que puede variar mucho de un servidor de alojamiento a otro. Como regla de oro, reconozca que el servicio de alojamiento confiable, pagado y personal puede costar alrededor de 10 a 15 dólares al mes. 

+ +
+

Note que que no existe el ancho de banda “ilimitado”. Si consumes una enorme cantidad de ancho de banda, espere pagar una enorme cantidad de dinero.

+
+ +

Nombre de dominio

+ +

Su nombre de dominio tiene que ser comprado a través de un proveedor de nombres (un registrador). Tu proveedor de alojamiento puede además ser un registrador (por ejemplo 1&1 y Gandi  son al mismo tiempo registradores y proveedores de alojamiento). El nombre de dominio usualmente cuesta $5-15 por año. Este costo varía en dependencia de:

+ + + +

Alojamiento de aficionados vs. Alojamiento “empaquetado”

+ +

Cuando deseas publicar un sitio web, puedes hacer todo por ti mismo: preparar una base de datos (si es necesaria), Sistema de Gestión de Contenidos, or {{Glossary("CMS")}} (como Wordpress, Dotclear, spip, etc.), subir tus propias plantillas o contenido preeditado.

+ +

Pudieras utilizar el entorno de tu proveedor de alojamiento, por aproximadamente de 10 a 15 dólares al mes, o suscribirse directamente a un servicio de alojamiento con CMS pre-empaquetado (por ejemplo, Wordpress, Tumblr, Blogger). Para esta última no tienes que pagar nada, pero puedes tener menos control sobre las plantillas y otras opciones. 

+ +

Alojamiento gratuito vs. alojamiento pagado

+ +

Te pudieras preguntar, ¿por qué pago por mi alojamiento cuando existen tantos servicios gratuitos?

+ + + +

Es mejor pagar el alojamiento que depender de alojamiento gratuito, ya que en la mayoría de los sitios pagados es posible trasladar tus archivos fácilmente y el tiempo de actividad está garantizado. La mayoría de los proveedores de alojamiento te dan un gran descuento para comenzar. 

+ +

Algunas personan optan por un enfoque mixto. Por ejemplo, su blog principal en un sitio pagado con un nombre de dominio completo, y a su vez contenido espóntaneo, menos estratégico en un servicio de alojamiento gratuito.

+ +

Agencias y alojamiento de sitios web profesionales

+ +

Si desea un sitio web profesional, probablemente le pedirás a una agencia web que lo haga por ti.
+
+ Aquí, los costos dependen de múltiples factores, tales como: 

+ + + +

...y para alojamiento:

+ + + +

En dependencia de cómo responda estas preguntas, su sitio pudiera costar miles hasta cientos de miles de dólares.

+ +

Próximos pasos

+ +

Ahora que entiende que cantidad de dinero su sitio puede costarle, es tiempo de comenzar a diseñar un sitio web y preparar su entorno de trabajo.

+ + diff --git "a/files/es/learn/common_questions/dise\303\261os_web_comunes/index.html" "b/files/es/learn/common_questions/dise\303\261os_web_comunes/index.html" new file mode 100644 index 0000000000..7e05cbcaad --- /dev/null +++ "b/files/es/learn/common_questions/dise\303\261os_web_comunes/index.html" @@ -0,0 +1,115 @@ +--- +title: ¿Qué contienen los diseños web comunes? +slug: Learn/Common_questions/diseños_web_comunes +tags: + - CSS + - Común + - Diseño + - Diseño Común + - HTML + - Principiante +translation_of: Learn/Common_questions/Common_web_layouts +--- +
{{IncludeSubnav("/en-US/Learn")}}
+ +
+

Cuando diseña páginas para su sitio web es bueno tener una idea de los diseños más comunes.

+
+ + + + + + + + + + + + +
Prerrequisitos:Asegúrese que usted ya ha pensado sobre lo que quiere lograr con su proyecto web.
Objetivo:Aprender dónde colocar las cosas en sus páginas web, y cómo hacerlo. 
+ +

Resumen

+ +

Existe una razón para que hablemos sobre diseño web. Se comienza con una página en blanco, y se pueden tomar muchas direcciones. Si no tienes mucha experiencia, comenzar con una página en blanco pudiera ser un poco temible. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio. 

+ +

Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web principales son construídas a partir de las siguientes partes:

+ +
+
Encabezado
+
Visible en la parte superior de cada página de un sitio. Contiene información relevante para todas las páginas (como el nombre del sitio o el logo) y un sistema de navegación fácil de usar.
+
Contenido principal
+
Es el área más grande, contiene contenido único para la página actual.
+
Contenido secundario
+
1) Información complementaria del contenido principal; 2) información compartida entre un subconjunto de páginas; 3) sistema de navegación alternativo. De hecho, todo lo que no es absolutamente requerido por el contenido de la página principal. 
+
Pie de página
+
Visible en la parte inferior de cada página de un sitio. Análogamente al encabezado contiene información global, en este caso menos llamativa como avisos legales o información de contacto.
+
+ +

Estos elementos son bastante comunes en todos los factores de forma, pero pueden ser dispuestos de diferentes maneras. Aquí se presentan algunos ejemplos (1 representa encabezado, 2 pie de página; A contenido principal; B1, B2 barras laterales):

+ +

Diseño de una columna. Especialmente importante para navegadores de móviles de modo que no se llene la pequeña pantalla.

+ +

Example of a 1 column layout: Main on top and asides stacked beneath it.

+ +

Diseño de dos columnas. A menudo utilizado para tabletas, ya que tienen pantallas de tamaño medio.

+ +

 Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

+ +

Diseños de tres columnas. Solamene adecuado para escritorios con pantallas grandes. (Incluso muchos usuarios de escritorio prefieren ver cosas en pequeñas ventanas que en pantalla completa.)

+ +

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

+ +

La verdadera diversión comienza cuando empiezas a mezclarlos todos juntos.

+ +

Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row.…

+ +

Estos son solo ejemplos y eres bastante libre de diseñar las cosas como quieras. Puedes notar que mientras el contenido se puede mover alrededor de la pantalla, siempre se mantiene el encabezado (1) en la parte superior y el pie de página (2) en la parte inferior. Además, el contenido principal (A) es lo más importante, así que dale la mayor parte del espacio. 

+ +

Estas son reglas del juego que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian en dependencia del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio. 

+ +

Aprendizaje activo

+ +

Aún no hay aprendizaje activo disponible. Por favor, considere contribuir.

+ +

Profundización

+ +

Estudiemos algunos ejemplos más concretos tomados de sitios web bien conocidos. 

+ +

Diseño de una columna

+ +

Aplicación de Invision. Un diseño típico de una columna proporcionando toda la información linealmente en una sola página. 

+ +

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

+ +

Bastante sencillo. Sólo recuerda que muchas personas navegarán por tu sitio desde escritorios, así que haz tu contenido también utilizable allí.

+ +

Diseño de dos columnas.

+ +

Abduzeedo, un simple diseño de blog. Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios). 

+ +

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

+ +

En este ejemplo, mira la imagen (B1) justo debajo del encabezado. Está relacionada con el contenido principal, pero el contenido principal tiene sentido sin esta, de este modo pudieras pensar que la imagen forma parte del contenido principal o del lateral. En realidad no importa. Lo que importa es que si pones algo justo debajo del encabezado, debería ser parte del contenido principal o estar directamente relacionado con este. 

+ +

Es una trampa

+ +

MICA. Este es un poco más complicado. Parece un diseño de tres columnas...

+ +

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

+ +

...pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}.

+ +

¿Por qué pensarías que es un diseño de tres columnas? Porque la imagen en la parte superior derecha está en forma de L, porque B1 parece una columna sosteniendo el conenido principal desplazado, y porque la "M" y la  "I" del logo MICA crean una línea de fuerza vertical.

+ +

Este es un buen ejemplo de diseño clásico que admite cierta creatividad. Los diseños simples son más fáciles de implementar, pero deje espacio expresar su creatividad en el área.

+ +

Un diseño mucho más complicado

+ +

La Opera de Paris.

+ +

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

+ +

Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que rompen visualmente el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos. 

+ +

Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus propios sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no. 

diff --git a/files/es/learn/common_questions/how_does_the_internet_work/index.html b/files/es/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..238ea2e5ae --- /dev/null +++ b/files/es/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,99 @@ +--- +title: ¿Cómo funciona Internet? +slug: Learn/Common_questions/How_does_the_Internet_work +tags: + - Internet + - Principiante + - Tutorial + - Web +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+

En este artículo se describe lo que es Internet y cómo funciona.

+
+ + + + + + + + + + + + +
Prerequisitos:Ninguno, pero te animamos a leer el Artículo sobre el establecimiento de metas primero.
Objetivo:Aprenderás lo básico de infraestructura técnica de la web y la diferencia entre Internet y Web.
+ +

Resumen

+ +

Internet es la columna vertebral de la Web, la infraestructura técnica que la hace posible. En lo más básico, Internet es una gran red de computadoras que se comunican simultáneamente.

+ +

La historia de internet es algo oscura. Comenzó en la década de 1960 como un proyecto de investigación financiado por el ejercito de los EE.UU, y luego se convirtió en una infraestructura pública en la década de 1980 con el apoyo de muchas universidades públicas y empresas privadas. Las distintas tecnologías que soporta internet han evolucionado con el tiempo, pero la forma en que funciona no ha cambiado mucho: Internet es una forma de conectar las computadoras entre sí y asegurar que, pase lo que pase, encuentren una manera de mantenerse conectadas.

+ +

Aprendizaje activo

+ + + +

Profundizar

+ +

Una simple red

+ +

Cuando dos ordenadores necesitan comunicarse, tienes que vincularlos, ya sea físicamente (por lo general con un cable de Ethernet) o de forma inalámbrica (por ejemplo por WiFi o sistema de Bluetooth). Todos los ordenadores modernos pueden soportar cualquiera de este tipo de conexiones.

+ +
+

Nota: En el resto de este artículo, sólo nos referiremos al uso de cables físicos, pero es igualmente aplicable a las redes inalámbricas.

+
+ +

Dos computadoras conectadas entre sí

+ +

La red no se limita a dos ordenadores, se pueden conectar tantos como se deseen aunque siendo más complicado cada vez. Por ejemplo, para conectar diez ordenadores, se necesitarían 45 cables y unos nueve conectores por ordenador!

+ +

Diez ordenadores interconectados

+ +

Para resolver este problema, cada ordenador en una red está conectado a una pequeña computadora especial llamada enrutador o router (en inglés). Este enrutador cumple una función: tal como hace un señalizador en una estación de tren, el router se encarga de asegurar que el mensaje enviado desde un ordenador emisor llegue al destino correcto. Para que el ordenador B reciba un mensaje desde el ordenador A, este debe enviarlo primero al router, quien a su vez lo remite al ordenador B asegurándose que dicho mensaje no sea entregado a otro ordenador C.

+ +

Una vez que agregamos un enrutador al sistema, nuestra red de 10 ordenadores solo requiere 10 cables: un enchufe para cada ordenador y un enrutador con 10 enchufes.

+ +

Diez ordenadores con un router

+ +

Una red de redes

+ +

Hasta aquí todo es más o menos simple, pero ¿qué sucede al conectar cientos, miles, millones de ordenadores entre sí?. Por supuesto un solo enrutador no puede escalar tanto, pero, si lees cuidadosamente, dijimos que un enrutador es como un pequeño ordenador, entonces ¿qué nos impide conectar dos enrutadores a la vez?. Nada: hagámoslo.

+ +

Dos routers conectados entre sí

+ +

Conectando ordenadores a enrutadores y luego enrutadores entre sí, podemos escalar infinitamente.

+ +

Routers interconectados

+ +

Una red así se acerca mucho a lo que llamamos Internet, pero hay algo que nos falta. Construimos esa red para nuestros propios propósitos. Hay otras redes ahí fuera: tus amigos, tus vecinos, cualquiera puede tener su propia red de ordenadores. Pero no es posible instalar cables entre tu casa y el resto del mundo, así que ¿cómo puedes manejar esto? Bueno, ya hay cables conectados a tu casa, por ejemplo, la energía eléctrica y el teléfono. La infraestructura telefónica ya conecta tu casa con cualquier persona en el mundo, así que es el cable perfecto que necesitamos. Para conectar nuestra red a la infraestructura telefónica, necesitamos un equipo especial llamado modem. Este modem convierte la información de nuestra red en información manejable por la infraestructura telefónica y viceversa.

+ +

Un router conectado a un modem

+ +

Entonces estamos conectados a la infraestructura telefónica. El siguiente paso es enviar el mensaje desde nuestra red a la red que queremos llegar. Para lograr eso, conectaremos nuestra red a un proveedor de servicios de internet (ISP de sus siglas en inglés Internet Service Provider). Un ISP es una empresa que gestiona algunos enrutadores especiales interconectados, que también pueden acceder a enrutadores de otros ISP. Así, el mensaje de nuestra red es llevada a través de la red de redes de ISP, hasta la red de destino. Internet consiste en toda esta infraestructura de redes.

+ +

stack de Internet al completo

+ +

Encontrando ordenadores

+ +

Si deseas enviar un mensaje a una computadora, debes especificar a cuál. Es por ello que todo ordenador conectado a una red cuenta con una dirección única que lo identifica, llamada “dirección IP” o Protocolo de Internet(IP de sus siglas en inglés Internet Protocol). Esta dirección está compuesta por una serie de cuatro números separados por puntos, por ejemplo: 192.168.2.10.

+ +

Para los ordenadores es un identificador simple, pero los humanos tienen mayor dificultad a la hora de recordar y memorizar este tipo de dirección. Con el propósito de convertir esta serie numérica en algo que podamos asociar con mayor facilidad a la dirección IP se utiliza lo que conocemos como nombre de dominio. Por ejemplo, google.com es el nombre de dominio utilizado para sustituir la dirección IP 173.194.121.32. Así, usar un nombre de dominio es la manera más fácil para nosotros de identificar un ordenador a través de Internet.

+ +

Mostrar cómo un nombre de dominio sirve como alias a una dirección IP

+ +

Internet y la web

+ +

Como puedes notar, cuando navegamos por la web con un navegador, normalmente utilizamos el nombre de dominio para llegar a un sitio web. ¿Significa eso que Internet y la Web son la misma cosa? No es tan simple. Como vimos, Internet es una infraestructura técnica que permite que miles de millones de ordenadores estén conectadas entre sí. Algunos de estos ordenadores, llamados servidores web son capaces de enviar mensajes inteligibles a los navegadores. Por tanto Internet es una infraestructura, mientras que la Web es un servicio construido sobre dicha infraestructura. Cabe señalar que existen otros servicios soportados por Internet, como es el correo electrónico e {{Glossary("IRC")}}.

+ +

Próximos pasos

+ + diff --git a/files/es/learn/common_questions/index.html b/files/es/learn/common_questions/index.html new file mode 100644 index 0000000000..4dcdd63447 --- /dev/null +++ b/files/es/learn/common_questions/index.html @@ -0,0 +1,145 @@ +--- +title: Preguntas frecuentes +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +
{{LearnSidebar}}
+ +

Esta sección del área de aprendizaje está diseñada para proveer respuestas a preguntas frecuentes que pueden surgir, las cuales no son necesariamente parte del núcleo  estructurado de formas de aprendizaje (ej. los artículos de aprendizaje de HTML o CSS). Éstos artículos están diseñados para trabajar por su cuenta.

+ +

Cómo funciona la Web

+ +

Esta sección cubre los mecanismos de la web -preguntas relativas al conocimiento general del ecosistema de la Web y cómo funciona.

+ +
+
+

¿Cómo funciona la Web?

+
+
Internet es la columna vertebral de la Web, la infraestructura técnica que hace la Web posible. Básicamente, Internet es una gran red de ordenadores que se comunican todos entre sí. Este artículo explica cómo funciona, en un nivel básico.
+
+

¿Cúal es la diferencia entre página web, sitio web, servidor web y motor de búsqueda?

+
+
En este artículo se describen varios conceptos relacionados con la web: páginas web, sitios web, servidores web y motores de búsqueda. Estos términos son confundidos habitualmente por los novatos en la Web, o son incorrectamente usados. ¡ Vamos a aprender que significa cada uno de ellos !
+
+

¿Qué es una URL?

+
+
Con {{Glossary("Hypertext")}} y {{Glossary("HTTP")}}, URL es uno de los conceptos clave de la Web. Es el mecanismo usado por {{Glossary("Browser","browsers")}} para recoger cualquier recurso publicado en la Web.
+
+

¿Qué es un nombre de dominio?

+
+
Los nombres de dominio son una parte clave de la infraestructura de Internet. Éstos proveen direcciones entendibles por humanos para cualquier servidor web disponible en Internet.
+
+

¿Qué es un servidor web?

+
+
El término "servidor Web" puede referirse a hardware o software que sirve sitios web a clientes de la Web - o a ambos trabajando conjuntamente. En este artículo veremos cómo funcionan los servidores web, y por qué son importantes.
+
+

¿Qué son los hipervínculos?

+
+
En este artículo, veremos qué son los hipervínculos y por qué importan.
+
+ +

Herramientas y Organización

+ +

Preguntas relacionadas con las herramientas/software que puedes usar para hacer páginas web.

+ +
+
+

¿Cúanto cuesta hacer algo en la web?

+
+
Cuando tú vas a lanzar un sitio web, no deberías malgastar nada de tus costes. En este artículo explicamos cuánto cuesta todo y qué consigues por lo que estás pagando (o no pagando).
+
+

¿Qué programas necesito para crear un sitio web?

+
+
En este artículo explicamos qué componentes software necesitas para editar, subir o ver un sitio web.
+
+

¿Qué editores hay disponibles?

+
+
En este artículo nos centramos en algunas cosas para reflexionar cuando elegimos e instalamos un editor de texto para el desarrollo web.
+
+ +
+
+

¿Qué son las herramientas de desarrollador del navegador?

+
+
Todos los navegadores proveen un set de herramientas de desarrollo para depurar HTML, CSS y otros códigos web. Este artículo explica cómo usar las funciones básicas de herramientas de desarrollador de tu navegador.
+
+ +
+
+

¿Cómo configuro un ambiente de trabajo básico?

+
+
Cuado trabaje en un proyecto web, querrá probarlo localmente antes de mostrarlo al mundo. Alguno tipos de código requieren un servidor para probarlos, y en este artículo le mostraremos cómo configurar uno. También cubriremos cómo implementar una estructura escalable para que sus archivos se mantengan organizados, incluso cuando su proyecto crezca.
+
+

¿Cómo se asegura de que su sitio web funciona correctamente?

+
+
Así que ha publicado su sitio web en línea, ¡muy bien! ¿Pero estás seguro de que funciona correctamente? Este artículo proporciona algunos pasos básicos para la solución de problemas.
+
+

¿Cómo se configura un servidor local de pruebas?

+
+
+
+

Este artículo explica cómo configurar un servidor local de pruebas simple en su máquina y los conceptos básicos sobre cómo usarlo.

+
+
+
+

¿Cómo subir archivos a un servidor web?

+
+
Este artículo muestra cómo publicar su sitio en línea con herramientas FTP, una de las formas más comunes de obtener un sitio web en línea para que otros puedan acceder a él desde sus computadoras.
+
+

¿Cómo uso las páginas de GitHub?

+
+
Este artículo proporciona una guía básica para publicar contenido utilizando la función gh-pages de GitHub.
+
+

¿Cómo alojar tu sitio web en Google App Engine?

+
+
¿Buscas un lugar donde alojar tu sitio web? Aquí hay una guía paso a paso para alojar tu sitio web en Google App Engine.
+
+

¿Qué herramientas están disponibles para depurar y mejorar el rendimiento del sitio web?

+
+
Este conjunto de artículos le muestra cómo utilizar las herramientas de desarrollo en Firefox para depurar y mejorar el rendimiento de su sitio web, utilizando las herramientas para comprobar el uso de la memoria, el árbol de nodos de JavaScript, la cantidad de nodos que se renderizan en el DOM y más.
+
+ +

Diseño y accesibilidad

+ +

Esta sección enlista preguntas relacionadas con la estética, estructura de páginas, técnicas de accesibilidad, etc.

+ +
+
+

¿Cómo empiezo a diseñar mi sitio web?

+
+
Este artículo cubre el primer paso más importante de cada proyecto: definir lo que desea lograr con él.
+
+

¿Qué contienen los diseños web comunes?

+
+
Al diseñar páginas para su sitio web, es bueno tener una idea de los diseños más comunes. Este artículo recorre algunos diseños web típicos, observando las partes que componen cada uno.
+
+

¿Qué es la accesibilidad?

+
+
Este artículo introduce los conceptos básicos detrás de la accesibilidad web.
+
+

¿Cómo podemos diseñar para todo tipo de usuarios?

+
+
Este artículo proporciona técnicas básicas para ayudarlo a diseñar sitios web para todo tipo de usuario —la accesibilidad rápida gana y otras cosas.
+
+

¿Qué características HTML promueven la accesibilidad?

+
+
Este artículo describe características específicas de HTML que pueden ser utilizadas para hacer una página web más accesible para personas con diferentes discapacidades.
+
+ +

Preguntas de HTML, CSS y JavaScript

+ +

Para soluciones a problemas comunes de HTML/CSS/JavaScript, trata con los siguientes artículos.

+ + diff --git a/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..741efd415d --- /dev/null +++ b/files/es/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,119 @@ +--- +title: >- + ¿Cuál es la diferencia entre la página web, el sitio web, el servidor web y el + motor de búsqueda? +slug: Learn/Common_questions/Pages_sites_servers_and_search_engines +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +
+

En este artículo describe varios conceptos referidos a la web: Páginas web, sitios web, servidores web, y motores de búsqueda. Estos términos con frecuencia son confundidos por recién llegados a la web, o son incorrectamente usados. Vamos a aprender que significa de cada uno!

+
+ + + + + + + + + + + + +
Prerrequisitos:Debes saber ¿Cómo funciona internet?.
Objectivo:Aprender la diferencia entre página web, un sitio web, un servidor web, y un motor de búsqueda.
+ +

Resumen

+ +

Así como en cualquier área de conocimiento, la web viene con un montón de jerga. No te preocupes, no te abrumaremos con todo esto (tenemos un glosario por si tienes curiosidad). Sin embargo, hay un unos términos básicos que necesitas entender al principio, Ya que escuchará estas expresiones todo el tiempo mientras lee. A veces es fácil de confundir estos términos, puesto que hacen referencia a funcionalidades relacionadas pero diferentes. De hecho, a veces veras estos términos mal utilizados en las noticias y en otros lugares, por lo que llegar mezclarlos es entendible!

+ +

Cubriremos estos términos y tecnologías con más detalle mientras exploramos más, pero estas definiciones rápidas serán un gran comienzo para ti:

+ +
+
Página web
+
 Un documento que se puede mostrar en un navegador web como Firefox, Google Chrome, Microsoft Internet Explorer o Edge, o Safary de Apple, A menudo también se puede denominar "páginas web" o simplemente "páginas".
+
Sitio web
+
Es una colección de páginas web que se agrupan y normalmente se conectan de varias maneras. A menudo llamado un "sitio web" o simplemente "sitio".
+
Servidor web
+
Una computadora que aloja un sitio web en Internet.
+
Motores de búsqueda
+
Un sitio web que te ayuda a encontrar páginas web, como Google, Bing o Yahoo o DuDuckGo. Normalmente se accede a los motores de búsqueda a través de un navegador web (por ejemplo, puede realizar búsquedas de motores en búsqueda directamente en la barra de direcciones de Firefox, Chrome, etc.) 
+

+ Veamos una analogía simple: una biblioteca pública. Esto es lo que generalmente harías al visitar una biblioteca:
+
+ +
    +
  1. Buscar en un índice de busqueda el título del libro que quiéres.
    2. +
  2. Tomar nota del número de catálogo del libro.
    3. +
  3. Ir a la sección particular que contiene el libro, buscár el número de catálogo del libro y obtener el libro.
    4. +
+ +

Vamos a comparar la biblioteca con un servidor web:

+ + + +
+
+ +

No esta disponible aprendizaje activo aun. Por favor, considere la posibilidad de contribuir.

+ +

Profundizando

+ +

Entonces, vamos a profundizar en cómo estos cuatro términos serán relacionados y por qué a veces se confunden entre sí.

+ +

Página web

+ +

Una página web es un simple documento que puede ser mostrado por un {{Glossary("browser")}}. Estos documentos están escritos en lenguaje {{Glossary("HTML")}} (el que veremos en más detalle en otros artículos). Una página web puede incluir una variedad de diferentes tipos de recursos, tales como:

+ + + +
+

Nota: los buscadores pueden mostrar otros tipos de documentos como archivos {{Glossary("PDF")}} o imágenes, pero el término página webespecíficamente hace referencia a documentos HTML. Por otro lado solo usamos el termino document(documento).

+
+ +

Todas las páginas web disponibles en la red son accesibles mediante una dirección única. Para acceder a una página, simplemente escribe su direcciones en la barra de búsqueda de tu navegador:

+ +

Example of a web page address in the browser address bar

+ +

Un sitio web es una colección de páginas web vinculadas (más sus recursos asociados) que comparten un único nombre de dominio. Cada página web de un sitio web determinado proporciona enlaces explícitos—la mayoría del tiempo en forma de parte del texto que se puede hacer clic—que permite al usuario moverse de una página del sitio a otra.

+ +

Para acceder a un sitio web, escribe su nombre su dominio en la barra de direcciones de tu buscador, y el mostrará la página principal del sitio web, o homepage (casualmente denominada "el home"):

+ +

Example of a web site domain name in the browser address bar

+ +

Página web y sitio web son especialmente fácil de confundir cuando un sitio contiene una única página web Tales sitio son denominados sitios de una sola página.

+ +

Servidor web

+ +

Un servidor web es una computadora que aloja uno o mas sitios web. “Alojar” significa que todas las páginas web y sus archivos soportes están disponibles en esa computadora. El servidor web enviará cualquier página web desde el sitio que hospeda al navegador de cualquier usuario, por cada solicitud del usuario.

+ +

No confundir sito web y servidor web. Por ejemplo, "Mi sitio web no responde", en realidad significa que el servidor web no responde y , por lo tanto, el sitio web no está disponible. Más importante aún, ya que un servidor web puede alojar varios sitios web, el término servidor web nunca se utiliza para designar un sitio, ya que podría causar un gran confusión. En nuestro ejemplo anterior, si dijimos: "Mi servidor web no responde", significa que no hay sitios web en ese servidor web disponibles.

+ +

Buscador

+ +

Los buscadores son una fuente común de confusión en la web. Un buscador es un tipo especial de sitio web que ayuda a los usuarios a encontrar páginas web de sitios web.

+ +

Hay muchos por ahí: Google, Bing, Yandex, DuckDuckGo,y muchos mas. Algunos son genéricos, otros están especializados en ciertos temas. Utilice los que prefiera.

+ +

Muchos principiantes en la web confunden motores de búsqueda con navegadores. Aclaremos esto: Un navegador es una parte de software que devuelve y muestra páginas web; un buscador es un sitio web que ayuda a las personas a encontrar páginas web de otros sitios web. La confusión surge porque, la primera vez que alguien inicia un navegador, el navegador muestra la página principal del motor. Esto tiene sentido, porque, obviamente, lo primero que quieres hacer con un navegador es encontrar una página web para mostrar. No confundas la infraestructura (por ejemplo, el navegador) con el servicio (por ejemplo, el buscador). La distinción te ayudará un poco, pero incluso algunos profesionales hablan imprecisamente, así que no te sientas angustiado por eso.

+ +

Aquí hay una instancia de Firefox que muestra un cuadro de búsqueda de Google como su página de inicio predeterminada:

+ +

Example of Firefox nightly displaying a custom Google page as default

+ +

Próximos pasos

+ + + +

 

diff --git a/files/es/learn/common_questions/que_es_un_servidor_web/index.html b/files/es/learn/common_questions/que_es_un_servidor_web/index.html new file mode 100644 index 0000000000..4969677db6 --- /dev/null +++ b/files/es/learn/common_questions/que_es_un_servidor_web/index.html @@ -0,0 +1,120 @@ +--- +title: Que es un servidor WEB? +slug: Learn/Common_questions/Que_es_un_servidor_WEB +tags: + - Infraestructura + - Principiante + - necesitaEsquema +translation_of: Learn/Common_questions/What_is_a_web_server +--- +
+

En este articulo veremos que son los servidores, cómo funcionan y por qué son importantes.

+
+ + + + + + + + + + + + +
Prerequisitos:Debes saber como funciona internet, y entendiendo la diferencia entre pagina web, sitio web, servidor y motor de busqueda
Objetivo:Aprender qué es un servidor web y comprender cómo funciona.
+ +

Sumario

+ +

Con "Servidor web" podemos referirnos a hardware o software, o a ambos trabajando juntos.

+ +
    +
  1. En cuanto a hardware, un servidor web es una computadora que almacena los archivos que componen un sitio web (ej.  documentos HTML , imágenes, hojas de estilos CSS y archivo JavaScript) y los entrega al dispositivo del usuario final. Está conectado a internet y es accesible a través de un nombre de dominio como mozilla.org.
    2. +
  2. En cuanto a software, un servidor web tiene muchas partes encargadas del control sobre cómo tienen acceso los usuarios a los archivos, por lo menos un servidor HTTP. Un servidor HTTP es una pieza de software que comprende {{Glossary("URL","URLs")}} (direcciones web) y {{Glossary("HTTP")}} (el protocolo que tu navegador usa para ver las páginas web).
    3. +
+ +

Al nivel más básico, siempre que un navegador necesite un archivo almacenado en un  servidor web, el navegador hará una solicitud al servidor mediante la vía HTTP. Cuando la petición llega al servidor web correcto (hardware), el  servidor HTTP  (software) envía el archivo antes solicitado, tambien a través de HTTP.

+ +

Basic representation of a client/server connection through HTTP

+ +

Para publicar un sitio web, necesitarás un servidor web dinámico o estático.

+ +

Un servidor web estático, o pila, consiste en una computadora (hardware) con un servidor HTTP (software). Llamamos a este "estático" debido a que el servidor envía los archivos almacenados "tal cual" a tu navegador.

+ +

Un servidor web dinámico consiste en un servidor web estático con un software extra , lo común es que sea una aplicación servidor y una  base de datos. Llamamos a esto "dinámico" por que la aplicacion servidor actualiza los archivos almacenados en la base de datos antes de enviarlos mediante el servidor HTTP.

+ +

Por ejemplo, para ver la página que ves en tu navegador finalmente, el servidor aplicación puede mostrar el diseño HTML con contenido desde una base de datos. Sitios como MDN o Wikipedia tienen cientos de páginas web, que no son realmente archivos HTML, si no una estrucura HTML asociada a una gigantesca base de datos. Esto hace mas fácil y rápido el mantenimiento y entrega del contenido.

+ +

Aprendizaje activo

+ +

No hay aprendizaje activo disponible. Por favor, considere colaborar.

+ +

Inmersión más profunda

+ +

Para recuperar una página web, como ya dijimos, su navegador envía una solicitud al servidor web, que procede a buscar el archivo solicitado en su propio espacio de almacenamiento. Al encontrar el archivo, el servidor lo lee, lo procesa según sea necesario y lo envía al navegador. Veamos esos pasos con más detalle.

+ +

Alojamiento de archivos (Hosting)

+ +

Un servidor web primero debe almacenar los archivos del sitio web, es decir, todos los documentos HTML y sus medios relacionados, incluidas las imágenes, las hojas de estilo CSS, los archivos JavaScript, las fuentes y videos.

+ +

Técnicamente, puede alojar todos esos archivos en su propia computadora, pero es mucho más conveniente almacenarlos en un servidor web dedicado que:

+ + + +

Por todas estas razones, encontrar un buen proveedor de alojamiento es una parte clave del desarrollo de su sitio web. Investigue a través de los diversos servicios que ofrecen las compañías y elija uno que se ajuste a sus necesidades y a su presupuesto (los servicios van desde los gratuitos hasta los miles de dólares al mes). Puede encontrar mas información en este artículo.

+ +

Una vez que configura una solución de alojamiento web, solo tiene que cargar sus archivos en su servidor web.

+ +

Comunicación a través de HTTP

+ +

En segundo lugar, un servidor web brinda soporte para HTTP (Hypertext Transfer Protocol ó  Protocolo de Transferencia de Hipertexto). Como su nombre lo indica, HTTP especifica cómo transferir hypertext (es decir, documentos web vinculados) entre dos computadoras.

+ +

Un protocolo es un conjunto de reglas para la comunicación entre dos computadoras. HTTP es un protocolo textual, sin estado.

+ +
+
Textual
+
Todos los comandos son de texto plano y legible para ser leído por humanos.
+
Sin estado
+
Ni el servidor ni el cliente recuerdan las comunicaciones anteriores. Por ejemplo, al confiar solo en HTTP, un servidor no puede recordar la contraseña que ingresó ni el paso que está realizando en una transacción. Necesita un servidor de aplicaciones para tareas como esa. (Cubriremos ese tipo de tecnología en otros artículos).
+
+ +

HTTP proporciona reglas claras sobre cómo se comunican un cliente y un servidor. Cubriremos el propio HTTP en un artículo técnico más adelante. Por ahora, sólo sé consciente de estas cosas:

+ + + +

The MDN 404 page as an example of such error page En un servidor web, el servidor HTTP es responsable de procesar y responder las solicitudes entrantes.

+ +
    +
  1. Al recibir una solicitud, un servidor HTTP primero verifica si la URL solicitada coincide con un archivo existente.
    2. +
  2. Si es así, el servidor web envía el contenido del archivo de nuevo al navegador. Si no, un servidor de aplicaciones construye el archivo necesario.
    3. +
  3. Si ninguno de los procesos es posible, el servidor web devuelve un mensaje de error al navegador, generalmente "404 Not Found". ( Ese error es tan común que muchos diseñadores web pasan bastante tiempo diseñando páginas de error 404.)
    4. +
+ +

Contenido Estático vs. Dinámico

+ +

En términos generales, un servidor puede entregar contenido estático o dinámico. "Estático" significa "servido como está". Los sitios web estáticos son los más fáciles de configurar, por lo que le sugerimos que convierta su primer sitio en un sitio estático.

+ +

"Dinámico" significa que el servidor procesa el contenido o incluso lo genera desde una base de datos. Esta solución proporciona más flexibilidad, pero se vuelve más difícil de manejar, lo que hace que sea mucho más complejo desarrollar el sitio web.

+ +

Tomemos por ejemplo la página que estás leyendo en este momento. En el servidor web que lo aloja, hay un servidor de aplicaciones que toma el contenido del artículo de una base de datos, lo formatea, lo coloca dentro de algunas plantillas HTML y le envía los resultados. En este caso, el servidor de aplicaciones se llama Kuma y está desarrollado con Python (utilizando el framework Django). El equipo de Mozilla creó Kuma para las necesidades específicas de MDN, pero hay muchas aplicaciones similares basadas en otras tecnologías.

+ +

Hay tantos servidores de aplicaciones que es resulta difícil sugerir uno en particular. Algunos servidores de aplicaciones se adaptan a categorías específicas de sitios web como blogs, wikis o tiendas electrónicas; otros, llamados CMS (Content Management Systems ó Sistemas de Gestión de Contenidos), son más genéricos. Si está desarrollando un sitio web dinámico, tómese el tiempo para elegir una herramienta que se adapte a sus necesidades. A menos que desee aprender algo de programación de servidores web (¡es un área emocionante!), no necesita crear su propio servidor de aplicaciones.

+ +

Próximos pasos

+ +

Ahora que estás familiarizado con los servidores web, podrías:

+ + diff --git a/files/es/learn/common_questions/que_software_necesito/index.html b/files/es/learn/common_questions/que_software_necesito/index.html new file mode 100644 index 0000000000..92687e7d13 --- /dev/null +++ b/files/es/learn/common_questions/que_software_necesito/index.html @@ -0,0 +1,226 @@ +--- +title: ¿Qué software necesito para construir un sitio web? +slug: Learn/Common_questions/Que_software_necesito +tags: + - Build a website + - Building + - Mecanismos Web + - Principiante + - software +translation_of: Learn/Common_questions/What_software_do_I_need +--- +
+

En este artículo se explican cuales componentes de software necesita para editar, cargar, o visualizar un sitio web. 

+
+ + + + + + + + + + + + +
Prerrequisitos:Deberías conocer acerca de la diferencia entre páginas web, sitios web, servidores web, y moteres de búsqueda.
Objetivo:Aprender qué componentes de software necesita si quiere editar, cargar o visualizar un sitio web.
+ +

Resumen

+ +

Puede descargar la mayoría de los programas que necesita para el desarrollo web de forma gratuita. Proporcionaremos unos enlaces en este artículo. 

+ +

Necesitarás herramientas para:

+ + + +

Casi todos los sistemas operativos incluyen por defecto un editor de texto y un navegador, el cual puedes usar para ver los sitios web. Como resultado, usualmente sólo necesitas adquirir software para la transferencia de archivos a tu servidor web.

+ +

Aprendizaje activo

+ +

No hay aprendizaje activo disponible todavía. Por favor, considere contribuir.

+ +

Profundización

+ +

Creción y edición de páginas web

+ +

Para crear y editar un sitio web, necesita un editor de texto. Editores de texto crean y modifican archivos de texto sin formato.  Otros formatos, como {{Glossary("RTF")}}, te permiten añadirle formato, como negrita y señalado, esos no son adecuados para escribir páginas web. Debe pensar bien qué editor de texto usar, ya que trabajará intensamente con él mientras construye el sitio web.

+ +

Todos los sistemas operativos de escritorio traen un editor de texto básico. Estos editores son muy sencillos, pero les faltan características especiales para codificar páginas web. Si desea algo un poco más elegante, hay muchas herramientas de terceros disponibles. Editores de terceros, a menudo viene con características extra, como coloreado de sintaxis, autocompletado, secciones expandibles y búsqueda de código. A continuación se muestra una lista de algunos editores:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema operativoEditor incorporadoEditor de terceros
Windows + + + +
Mac OS + + + +
Linux + + + +
Chrome OS  + +
+ +

Aquí se muestra una captura de pantalla de un editor de texto avanzado:

+ +

Screenshot of Notepad++. 

+ +

Esta es una captura de panalla de un editor de texto online:

+ +

Screenshot of ShiftEdit

+ +

Subir archivos a la Web

+ +

Cuando tu sitio web está listo para visualización pública , tendrás que subir tus páginas web a tu servidor web. Puedes comprar espacio en un servidor de varios proveedores (vea el artículo ¿Cuánto cuesta hacer algo en la web?). Una vez que establezca qué proveedor utilizar, el proveedor le enviará un correo con la información de acceso, usualmente en la forma de una URL SFTP, nombre de usuario, contraseña, y otra información necesaria para conectarte con su servidor. Tenga en cuenta que el protocolo (S)FTP está actualmente algo pasado de moda, mientras otros sistemas de carga de archivos están comenzando a volverse populares como RSync y Git/GitHub.

+ +
+

Note: FTP es inherentemente inseguro. Deberías asegurarte de que tu proveedor de alojamiento permite el uso de una conexión segura, por ejemplo SFTP o RSync sobre SSH.

+
+ +

Subir archivos a un sitio web es un paso muy importante mientras se crea un sitio web, por lo que sete tema se abarca en detalle en un artículo aparte. Por ahora, se presenta una lista de clientes (S)FTP gratuitos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema operativo Software FTP 
Windows + + + +
Linux + +
 Mac OS + +
 Chrome OS + +  
+ + + +

Como ya sabe, necesita un navegador para ver los sitios web. Existen docenas  de opciones de navegadores para uso personal, pero cuando usted está desarrollando un sitio web debe probarlo al menos con los navegadores principales siguientes, para estar seguro de que su sitio web funciona para la mayoría de las personas:  

+ + + +

Si su sitio está destinado a un grupo específico (por ejemplo, una plataforma técnica o país), puede que tenga que probar el sitio con navegadores adicionales, como Opera, Konqueror, o UC Browser.

+ +

Sin embargo las pruebas se dificultan debido a que algunos navegadores sólo funcionan en determinados sistemas operativos. Apple Safari se ejecuta en iOS y Mac OS, mientras Internet Explorer corre solamente en Windows. Lo mejor es aprovechar los servicios como Browsershots o Browserstack. Browsershots proporciona capturas de pantallas de tu sitio web en diferentes navegadores. Browserstack  realmente te otorga acceso remoto a máquinas virtuales de modo que puedes probar tu sitio en los entornos más comunes. De manera alternativa, puedes instalar tu propia máquina virtual, pero se necesita algo de experiencia. ( Si escoge este camino, Microsoft tiene algunas herramientas para desarrolladores incluso una máquina virtual lista para utilizar en modern.ie.)

+ +

Sin falta ejecute algunas pruebas en dispositivos reales, especialmente en dispositivos móviles reales. Simulación de dispositivos móviles es una tecnología nueva, en evolución y menos confiable que la simulación de escritorio. Desde luego, los dispositivos móviles son costosos, por lo que le sugerimos echar un vistazo a la inictiva de Laboratorios de dispositivos abiertos. Puede además compartir dispositivos quiere probar en diferentes plataformas sin gastar mucho.

+ +

Próximos pasos

+ + + +

 

diff --git "a/files/es/learn/common_questions/qu\303\251_es_una_url/index.html" "b/files/es/learn/common_questions/qu\303\251_es_una_url/index.html" new file mode 100644 index 0000000000..ef50be60ad --- /dev/null +++ "b/files/es/learn/common_questions/qu\303\251_es_una_url/index.html" @@ -0,0 +1,152 @@ +--- +title: ¿Qué es una URL? +slug: Learn/Common_questions/Qué_es_una_URL +translation_of: Learn/Common_questions/What_is_a_URL +--- +
+

Este artículo habla sobre las Uniform Resource Locators (URLs), explicando qué son y cómo se estructuran.

+
+ + + + + + + + + + + + +
Prerequisitos:Primero necesitas saber Como funciona Internet, qué es un servidor Web y los conceptos detrás de los enlaces en la web.
Objetivo:Aprenderás lo que es una URL y como funcionan en la Web.
+ +

Resumen

+ +

Junto con el {{Glossary("Hypertext", "Hipertexto")}} y {{Glossary("HTTP")}}, las URL son uno de los conceptos claves de la Web. Es el mecanismo usado por los {{Glossary("Browser","navegadores")}} para obtener cualquier recurso publicadon en la web.

+ +

URL significa Uniform Resource Locator (Localizador de Recursos Uniforme). Una URL no es más que una direccion que es dada a un recurso único en la Web. En teoria, cada URL valida apunta a un único recurso. Dichos recursos pueden ser páginas HTML, documentos CSS, imagenes, etc. En la practica, hay algunas excepciones, siendo la más común una URL apuntando a un recurso que ya no existe o que ha sido movido. Como el recurso representado por la URL y la URL en si son manejadas por el servidor Web, depende del dueño del servidor web manejar ese recurso y su URL asociada adecuadamente.

+ +

Active Learning

+ +

There is no active learning available yet. Please, consider contributing.

+ +

Profundizando

+ +

Conceptos básicos: anatomía de una URL

+ +

Aquí hay algunos ejemplos de URL:

+ +
https://developer.mozilla.org
+https://developer.mozilla.org/en-US/docs/Learn/
+https://developer.mozilla.org/en-US/search?q=URL
+ +

Cualquiera de esas URL se puede escribir en la barra de direcciones de su navegador para indicarle que cargue la página (recurso) asociada.

+ +

Una URL está compuesta de diferentes partes, algunas obligatorias y otras opcionales. Veamos las partes más importantes usando la siguiente URL:

+ +
http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
+ +
+
Protocol
+
http es el protocolo. La primera parte de la URL indica qué protocolo debe usar el navegador. Un protocolo es un método establecido para intercambiar o transferir datos alrededor de una red informática. Por lo general, para sitios web es el protocolo HTTP o su versión segura, HTTPS. La Web requiere uno de estos dos, pero los navegadores también saben cómo manejar otros protocolos como mailto: (para abrir un cliente de correo) o ftp: para manejar la transferencia de archivos, así que no se sorprenda si ve tales protocolos.
+
Domaine Name
+
www.example.com es el nombre de dominio. Indica qué servidor web se solicita. Alternativamente, es posible usar directamente un {{Glossary("dirección IP")}}, pero debido a que es menos conveniente, no se usa con frecuencia en la Web.
+
Port
+
:80 es el puerto. Indica la "puerta" técnica utilizada para acceder a los recursos en el servidor web. Por lo general, se omite si el servidor web utiliza los puertos estándar del protocolo HTTP (80 para HTTP y 443 para HTTPS) para otorgar acceso a sus recursos. De lo contrario es obligatorio.
+
Path to the file
+
/path/to/myfile.html es la ruta al recurso en el servidor web. En los primeros días de la Web, una ruta como esta representaba la ubicación de un archivo físico en el servidor web. Hoy en día, es principalmente una abstracción manejada por servidores web sin ninguna realidad física.
+
Parameters
+
?key1=value1&key2=value2 son parámetros adicionales proporcionados al servidor web. Esos parámetros son una lista de pares clave/valor separados con el símbolo &. El servidor web puede usar esos parámetros para hacer cosas adicionales antes de devolver el recurso. Cada servidor web tiene sus propias reglas con respecto a los parámetros, y la única forma confiable de saber si un servidor web específico está manejando parámetros es preguntando al propietario del servidor web.
+
Anchor
+
#SomewhereInTheDocument es un ancla para otra parte del recurso en sí. Un ancla representa una especie de "marcador" dentro del recurso, dando al navegador las instrucciones para mostrar el contenido ubicado en ese lugar "marcado". En un documento HTML, por ejemplo, el navegador se desplazará hasta el punto donde se define el ancla; en un video o documento de audio, el navegador intentará ir a la hora que representa el ancla. Vale la pena señalar que la parte después del #, también conocido como el identificador de fragmento, nunca se envía al servidor con la solicitud.
+
+ +

{{Note('Existen algunas partes extras y reglas extras con respecto a las URL, pero no son relevantes para usuarios habituales o desarrolladores web. No se preocupe por esto, no necesita conocerlos para construir y usar URL completamente funcionales.')}}

+ +

Puede pensar en una URL como una dirección de correo postal normal: el protocolo representa el servicio postal que desea utilizar, el nombre de dominio es la ciudad o el pueblo y el puerto es como el código postal; la ruta representa el edificio donde se debe entregar su correo; los parámetros representan información adicional como el número de apartamento en el edificio; y, finalmente, el ancla representa a la persona real a la que ha dirigido su correo.

+ +

Cómo usar las URL

+ +

Se puede escribir cualquier URL dentro de la barra de direcciones del navegador para acceder al recurso que se encuentra detrás. ¡Pero esto es sólo la punta del iceberg!

+ +

El lenguaje {{Glossary("HTML")}} — que se discutirá más adelante — hace un uso extensivo de las URL:

+ + + +
+

Nota: Al especificar URL para cargar recursos como parte de una página (como cuando se usa <script>, <audio>, <img>, <video> y similares), solo debe usar URL HTTP y HTTPS. El uso de FTP, por ejemplo, no es particularmente seguro y muchos navegadores ya no lo admiten.

+
+ +

Otras tecnologías, como {{Glossary("CSS")}} o {{Glossary("JavaScript")}}, usan URLs ampliamente, y estos son realmente el corazón de la Web.

+ +

URL absolutas vs URL relativas

+ +

Lo que vimos arriba se llama URL absoluta, pero también hay algo llamado URL relativa. Examinemos lo que significa esa distinción con más detalle.

+ +

Las partes requeridas de una URL dependen en gran medida del contexto en el que se utiliza la URL. En la barra de direcciones de su navegador, una URL no tiene ningún contexto, por lo que debe proporcionar una URL completa (o absoluta), como las que vimos anteriormente. No necesita incluir el protocolo (el navegador usa HTTP de manera predeterminada) o el puerto (que solo se requiere cuando el servidor web de destino está utilizando algún puerto inusual), pero todas las otras partes de la URL son necesarias.

+ +

Cuando se usa una URL dentro de un documento, como en una página HTML, las cosas son un poco diferentes. Debido a que el navegador ya tiene la propia URL del documento, puede usar esta información para completar las partes faltantes de cualquier URL disponible dentro de ese documento. Podemos diferenciar entre una URL absoluta y una URL relativa mirando solo la parte de ruta de la URL. Si la parte de ruta de la URL comienza con el carácter "/", el navegador buscará ese recurso desde la raíz superior del servidor, sin referencia al contexto dado por el documento actual.

+ +

Veamos algunos ejemplos para aclarar esto.

+ +

Ejemplos de URL absolutas

+ +
+
URL Completa (la misma que usamos antes)
+
+ 
https://developer.mozilla.org/en-US/docs/Learn
+
+
Protocolo implícito
+
+ 
//developer.mozilla.org/en-US/docs/Learn
+ +

En este caso, el navegador llamará a esa URL con el mismo protocolo que el utilizado para cargar el documento que aloja esa URL.

+
+
Nombre de dominio implícito
+
+ 
/en-US/docs/Learn
+ +

Este es el caso de uso más común para una URL absoluta dentro de un documento HTML. El navegador utilizará el mismo protocolo y el mismo nombre de dominio que el utilizado para cargar el documento que aloja esa URL. Nota: no es posible omitir el nombre de dominio sin omitir también el protocolo.

+
+
+ +

Ejemplos de URL relativas

+ +

Para comprender mejor los siguientes ejemplos, supongamos que las URL se invocan desde el documento ubicado en la siguiente URL:https://developer.mozilla.org/en-US/docs/Learn

+ +
+
Sub-recursos
+
+ 
Skills/Infrastructure/Understanding_URLs
+
+ Debido a que la URL no se inicia con /, el navegador intentará encontrar el documento en un subdirectorio del que contiene el recurso actual. Entonces, en este ejemplo, realmente queremos llegar a esta URL:https://developer.mozilla.org/en-US/docs/Learn/Skills/Infrastructure/Understanding_URLs
+
Volviendo en el árbol de directorios
+
+ 
../CSS/display
+ +

En este caso, usamos el ../ convención de escritura, heredada del mundo del sistema de archivos UNIX, para decirle al navegador que queremos subir desde un directorio. Aquí queremos llegar a esta URL:https://developer.mozilla.org/en-US/docs/Learn/../CSS/display, que se puede simplificar a: https://developer.mozilla.org/en-US/docs/CSS/display

+
+
+ +

URL semánticas

+ +

A pesar de su sabor muy técnico, las URL representan un punto de entrada legible para un sitio web. Se pueden memorizar y cualquiera puede ingresarlos en la barra de direcciones de un navegador. Las personas están en el centro de la Web, por lo que se considera una buena práctica construir lo que se llama URL semánticas. Las URL semánticas usan palabras con un significado inherente que cualquier persona puede entender, independientemente de sus conocimientos técnicos.

+ +

La semántica lingüística es, por supuesto, irrelevante para las computadoras. Probablemente has visto URL que parecen mashups de caracteres aleatorios. Pero hay muchas ventajas en la creación de URL legibles por humanos:

+ + + +

Próximos pasos

+ + diff --git a/files/es/learn/common_questions/set_up_a_local_testing_server/index.html b/files/es/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..e2223d3c8a --- /dev/null +++ b/files/es/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,113 @@ +--- +title: ¿Cómo se configura un servidor de prueba local? +slug: Learn/Common_questions/set_up_a_local_testing_server +tags: + - Expreso + - Flask + - Lado-del-servidor + - Node + - PHP + - Principiante + - Python + - aprende + - django + - lamp + - servidores +translation_of: Learn/Common_questions/set_up_a_local_testing_server +--- +
+

En este artículo explica cómo configurar un servidor de prueba local simple en su equipo y los conceptos básicos de cómo utilizarlo.

+
+ + + + + + + + + + + + +
Prerrequisitos:Primero debes saber cómo funciona internet, y qué es un servidor web.
Objectivo:Aprenderás cómo configurar un servidor de pruebas local
+ +

Archivos locales versus archivos remotos

+ +

En la mayor parte del área de aprendizaje, te decimos que abras tus ejemplos directamente en un navegador — lo que se hace con doble clic en el archivo HTML, o arrastrándolo y soltándolo en una ventana del navegador o eligiendo Archivo > Abrir... y navegando al archivo HTML, etc. Hay muchas maneras de lograr esto.

+ +

Sabes si estás ejecutando el ejemplo desde un archivo local porque la dirección web tendrá archivo:// al principio, seguido de la ruta al archivo en tu disco duro local. Por el contrario, si ves uno de nuestros ejemplos alojados en GitHub (o un ejemplo en algún otro servidor remoto), la dirección web tendrá http:// o https:// al principio, para mostrar que el archivo ha sido recibido a través de HTTP.

+ +

El problema de probar archivos locales

+ +

Algunos ejemplos no se ejecutarán si los abre como archivos locales. Esto puede deberse a una variedad de razones, siendo las más probables:

+ + + +

Ejecutando un servidor HTTP local simple

+ +

Para evitar el problema de las solicitudes asíncronas, necesitamos probar estos ejemplos ejecutándolos a través de un servidor web local. Una de las maneras más fáciles de hacer esto para nuestros propósitos es usar el módulo SimpleHTTPServer de Python.

+ +

Para hacer esto:

+ +
    +
  1. +

    Instalar Python. Si usas Linux o Mac OS X, ya debe estar disponible en tu sistema. Si eres usuario de Windows, puedes conseguir un instalador desde la página principal de Python y seguir las instrucciones para instalarlo:

    + +
      +
    • Vé a python.org
      • +
    • Debajo de la sección de Descarga, haz clic en el link para Python "3.xxx".
      • +
    • En la parte superior de la página, selecciona el instalador ejecutable windows x86 y descárgalo.
      • +
    • Cuando se haya descargado, córrelo.
      • +
    • En la primera página de instalación, asegúrate de marcar el checkbox "Añadir Python 3.xxx a la ruta"
      • +
    • Clic en Instalar, luego clic en Cerrar cuando la instalación ya haya finalizado.
      • +
    +
    2. +
  2. +

    Abre la terminal (windows)/terminal (OS X/Linux). Para chequear que Python está instalado, ingrese el siguiente comando.

    + +
    +

    Nota: La v del ejemplo en mayuscula (V)

    +
    + + 
    python -V
    +
    3. +
  3. +

    Esto debe retornar un número de versión. Si esto esta bien, navega al directorio que contiene tu ejemplo, usando el comando cd.

    + + 
    # Incluye el nombre del directorio de entrar en él,
+por ejemplo cd Escritorio
+
+# Use dos puntos para regresar un nivel de directorio
+si es necesario,por ejemplo cd ../
+
    +
    4. +
  4. +

    Ingresa el comando para iniciar el servidor en ese directorio:

    + + 
    # En Mac y Linux
+python -m SimpleHTTPServer
+#Windows
+python -m http.server
    +
    5. +
  5. +

    Por defecto, se ejecutará el contenido del directorio en un servidor web local, en el puerto 8000. puedes ir a este servidor yendo a la URL localhost:8000 en tu navegador web. Aquí verá el contenido del directorio listado - haga clic en el archivo HTML que desea ejecutar.

    +
    6. +
+ +
+

Nota: si ya tienes corriendo algo en el puerto 8000, puedes escoger otro puerto corriendo el siguiente comando de servidor por un número de puerto alternativo, por ejemplo python -m SimpleHTTPServer 7800. Puedes acceder a tu contenido en ellocalhost:7800.

+
+ +

Ejecución de lenguajes del lado del servidor localmente

+ +

El módulo SimpleHTTPServer de Python es útil, pero desconoce como ejecutar el código escrito en lenguajes como PHP o Python. Para resolver eso necesitarás algo más — lo que necesitarás exactamente depende del lenguaje del lado del servidor que estas intentando de ejecutar. Aquí están un par de ejemplos:

+ + diff --git a/files/es/learn/common_questions/thinking_before_coding/index.html b/files/es/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..f675eb8d80 --- /dev/null +++ b/files/es/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,177 @@ +--- +title: ¿Cómo empiezo a diseñar mi sitio web? +slug: Learn/Common_questions/Thinking_before_coding +tags: + - Pensar + - Principiante + - antes de codificar + - ideación + - proyecto +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

Este artículo cubre el primer paso importante de cada proyecto: definir lo que se desea lograr con él.

+ + + + + + + + + + + + +
Prerrequisitos:Ninguno
Objectivo:Aprender a definir metas para darle dirección a tu proyecto web.
+ +

Resumen

+ +

Al comenzar con un proyecto web, muchas personas se enfocan en el aspecto técnico. Por supuesto, debes estar más familiarizado con la técnica de su oficio, pero lo que realmente importa es lo que quieres lograr. Sí, parece obvio, pero demasiados proyectos fallan, no por falta de conocimiento técnico sino por falta de objetivos y visión.

+ +

Entonces cuando tienes una idea y quieres convertirla en un sitio web, hay un par de cuestiones que debes responder antes que alguna otra cosa:

+ + + +

Todo esto es llamado idealización del proyecto y es un primer paso necesario para alcanzar tus metas, si eres un desarrollador principiante o experimentado.

+ +

Aprendizaje Activo

+ +

No hay aprendizaje activo todavía. Por favor, considere la posibilidad de contribuir.

+ +

Profundizando

+ +

Un proyecto nunca comienza por el lado técnico. Los músicos jamás compondrán ninguna música a menos que primero tengan la idea de lo quieren tocar, y eso también vale para los pintores, escritores y desarrolladores web. La técnica viene en segundo lugar.

+ +

La técnica es crítica. Los músicos deben dominar su instrumento, pero los buenos músicos nunca producen buena música sin una idea. Por lo tanto, antes de saltar al lado técnico, por ejemplo código y herramientas, primero debes dar un paso atrás y decidir en detalle lo que deseas hacer.

+ +

Una discusión de horas con los amigos es un buen comienzo, pero inapropiado. Debes sentarte y estructurar tus ideas, para tener una visión clara sobre el camino que debes tomar para materializar tus ideas. Para hacer esto, sólo necesitas lápiz y papel y un tiempo para resolver al menos las siguientes preguntas.

+ +
+

Nota: Hay innumerables maneras de llevar a cabo la ideación del proyecto. No podemos presentarlas a todas aquí (un libro entero no sería suficiente). Lo que presentamos aquí es un método sencillo para manejar lo que los profesionales llaman Ideación de Proyectos, Planificación de Proyectos y Gestión de Proyectos.

+
+ +

¿Qué es exactamente lo que quiero lograr?

+ +

Esta es la más importante pregunta a responder, ya que impulsa todo lo demás. Enumera todas la metas que deseas alcanzar. Puede ser cualquier cosa: vender bienes para ganar dinero, expresar opiniones políticas, conocer nuevos amigos, actuar con músicos, coleccionar imágenes de gatos o lo que quieras.

+ +

Supongamos que eres músico. Y puedes desear que:

+ + + +

Una vez que tengas la lista, necesitas priorizar. Ordena los objetivos desde los más importantes hacia los menos importantes.

+ +
    +
  1. Encontrar un/a nuevo/a novio/a.
    2. +
  2. Permitir que las gente escuche tu música.
    3. +
  3. Hablar acerca de tu música.
    4. +
  4. Conocer otros músicos.
    5. +
  5. Venta de golosinas.
    6. +
  6. Enseñar música a través de vídeos.
    7. +
  7. Publicar fotos de tus gatos.
    8. +
+ +

Haciendo este sencillo ejercicio, escribir metas y clasificarlas, te ayudará cuando tengas que tomar decisiones. (¿Debería implementar estas características, usar estos servicios, crear este diseño?)

+ +

Entonces, ahora que tienes tu lista de objetivos priorizada, pasemos a la siguiente pregunta.

+ +

¿Cómo podría un sitio web llevarme a mis objetivos?

+ +

Entonces, tienes tu lista de objetivos y sientes que necesitas un sitio web para alcanzarlos. ¿Estás seguro?

+ +

Echemos un vistazo a nuestro ejemplo. Tenemos cinco metas relacionadas con la música, una relacionada a la vida personal (Encontrar pareja), y las fotos del gato completamente ajenas. ¿Es razonable construir un único sitio para cubrir todos esos objetivos? ¿Es necesario? Después de todo, una gran cantidad de servicios web existentes podría llevarte a tus objetivos sin necesidad de crear uno nuevo.

+ +

Encontrar pareja es un caso prioritario en el que tiene más sentido utilizar los recursos existentes en lugar de construir todo un nuevo sitio. ¿Por qué? Porque invertiríamos más tiempo construyendo y manteniendo el sitio web en lugar de realmente buscar una pareja. Dado que nuestro objetivo es lo que más importa, debemos gastar nuestra energía en aprovechar las herramientas ya existentes en lugar de empezar desde cero. Una vez más, hay tantos servicios web ya disponibles para mostrar fotos que no vale la pena el esfuerzo para construir un nuevo sitio sólo para anunciar acerca de lo lindo que son nuestros gatos.

+ +

Los otros cinco objetivos están todos conectados con la música. Hay, por supuesto, muchos servicios web que podrían manejar estas metas, pero tiene sentido, en este caso, construir un sitio web propio. Tal sitio web es la manera de agregar todo lo que queremos publicar en un solo lugar (bueno para las metas 3, 5 y 6). En resumen, ya que estos objetivos giran en torno al mismo tema, tener todo en un solo lugar nos ayudará a alcanzar nuestras metas y facilitará a nuestros seguidores el conectarse con nosotros.

+ +

¿Cómo puede un sitio web ayudarme a alcanzar mis metas? Al responder a eso, encontrarás la mejor manera de alcanzar dichas metas y te ahorrarás desperdiciar esfuerzo.

+ +

¿Qué hay que hacer, y en qué orden, para alcanzar mis metas?

+ +

Ahora que sabes qué es lo que quieres lograr, es momento de volver los objetivos en pasos prácticos. Como una nota lateral, tus metas no están necesariamente petrificadas, ellas evolucionan con el tiempo incluso en el transcurso del proyecto, si te encuentras con obstáculos inesperados o simplemente cambias de opinión.

+ +

En lugar de una extensa explicación, volvamos a nuestro ejemplo con esta tabla.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MetasCosas por hacer
Permitir que las gente escuche tu música +
    +
  1. Grabar música
    2. +
  2. Prepara algunos archivos de audio utilizables online (¿Podrías hacer esto con servicios web existentes?)
    3. +
  3. Dale a las personas acceso a tu música en alguna parte de tu sitio web
    4. +
+
Hablar acerca de tu música +
    +
  1. Escribe algunos artículos para iniciar la discusión
    2. +
  2. Define cómo deben lucir los artículos
    3. +
  3. Publica los artículos en el sitio web (¿Cómo hacer esto?)
    4. +
+
Conocer otros músicos +
    +
  1. Provee modos para que las personas te contacten (¿Email? ¿Facebook? ¿Teléfono? ¿Correo?)
    2. +
  2. Define cómo las personas encontrarán esos canales de contacto desde tu sitio web
    3. +
+
Venta de golosinas +
    +
  1. Crea las golosinas
    2. +
  2. Almacena las golosinas
    3. +
  3. Encuentra un modo de manejar el envío
    4. +
  4. Encuentra una manera de manejar el pago
    5. +
  5. Hacer un mecanismo en tu sitio para que la gente haga pedidos
    6. +
+
Enseñar música mediante vídeos +
    +
  1. Grabar vídeos de lecciones
    2. +
  2. Preparara archivos de vídeos visibles online (Una vez más, ¿Podría hacer esto con los servicios de web ya existentes?)
    3. +
  3. Dar a la gente acceso a tus vídeos en alguna parte de tu sitio
    4. +
+
+ +

Dos cosas para resaltar. En primer lugar, algunos de estos items no están relacionados con la web (ej.: Grabar, escribir artículos). A menudo estas actividades fuera de línea importan incluso mucho más que el proyecto del sitio web. En ventas, por ejemplo, es mucho más importante y requiere mucho tiempo manejar la oferta, el pago y el envío que construir un sitio web donde las personas puedan realizar pedidos.

+ +

En segundo lugar, establecer pasos procesables conduce a nuevas preguntas que necesitarás contestar. Por lo general, resultan ser más preguntas de lo que pensábamos al principio. (Ej. : ¿debo aprender a hacer todo yo mismo, pedirle a alguien que lo haga por mí, o utilizar servicios de terceros?).

+ +

Conclusión

+ +

Como puedes ver, la idea simple “Quiero hacer un sitio web” genera una larga lista de quehaceres, la cual sólo crece conforme piensas en ella. Pronto puede parecer abrumador, pero no entres en pánico. No es necesario responder todas las preguntas y no necesitas hacer todo lo de tu lista. Lo que importa es tener una visión de lo que deseas y cómo alcanzarlo. Una vez que tengas una visión clara, necesitarás decidir cómo y cuándo hacerlo. Divida grandes tareas en pequeños pasos procesables, y esos pequeños pasos sumarán a grandes logros.

+ +

 

diff --git a/files/es/learn/common_questions/what_are_browser_developer_tools/index.html b/files/es/learn/common_questions/what_are_browser_developer_tools/index.html new file mode 100644 index 0000000000..c08f596c74 --- /dev/null +++ b/files/es/learn/common_questions/what_are_browser_developer_tools/index.html @@ -0,0 +1,248 @@ +--- +title: ¿Cuáles son las herramientas de desarrollo del navegador? +slug: Learn/Common_questions/What_are_browser_developer_tools +tags: + - CSS + - CodingScripting + - HTML + - Herramientas para el desarrollador + - JavaScript + - Navegador + - Novato + - Principiante + - aprende +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +
{{IncludeSubnav("/es/Learn")}}
+ +
+

Todos los navegadores web modernos incluyen un potente conjunto de herramientas para desarrolladores. Estas herramientas hacen una variedad de cosas, desde inspeccionar HTML, CSS y JavaScript actualmente cargados, hasta mostrar qué activos ha solicitado la página y cuánto tiempo tardaron en cargarse. Este artículo explica cómo utilizar las funciones básicas de las herramientas de desarrollo de tu navegador.

+
+ +
+

Nota: Antes de ejecutar los siguientes ejemplos, abre el sitio de ejemplo para principiantes que creamos durante la serie de artículos Introducción a la Web. Lo deberías tener abierto mientras sigues los pasos que explicamos a continuación.

+
+ +

Cómo abrir devtools en tu navegador

+ +

Las herramientas para desarrolladores (devtools) viven dentro de tu navegador en una subventana que se ve más o menos así, dependiendo del navegador que estés utilizando:

+ +

Devtools

+ +

¿Cómo la levantas? Existen tres distintas maneras:

+ + + +

Inspector

+ +

El inspector: explorador del DOM y editor CSS

+ +

Las herramientas del desarrollador, generalmente se abren de forma predeterminada en el inspector, parecido a la siguiente captura de pantalla. Esta herramienta muestra cómo se ve el HTML en tu página en tiempo de ejecución, así como qué CSS se aplica a cada elemento de la página. También te permite modificar instantáneamente el HTML y CSS y ver los resultados de tus cambios reflejados en vivo en la ventana del navegador.

+ +

Inspector resaltado

+ +

Si no ves al inspector,

+ + + +

Explorando el DOM con el inspector

+ +

Para empezar, haz clic con el botón derecho (Ctrl+clic) en un elemento HTML en el inspector del DOM y observa el menú contextual. Las opciones disponibles en el menú varían según el navegador, pero en su mayoría, las más importantes son las mismas:

+ +

Inspector del DOM

+ + + +

Intenta editar algo de tu DOM ahora. Haz doble clic en un elemento o haz clic con el botón derecho del mouse y selecciona Editar como HTML en el menú contextual. Puedes realizar los cambios que desees, pero no los puedes guardar.

+ +

Explorar el editor CSS

+ +

De manera predeterminada, el editor CSS muestra las reglas CSS aplicadas al elemento seleccionado actualmente:

+ +

Inspector CSS

+ +

Estas características son especialmente útiles:

+ + + +

Notarás una serie de pestañas en las que se puede hacer clic en la parte superior del Visor CSS:

+ + + +

Conocer más

+ +

Obtén más información sobre el Inspector en diferentes navegadores:

+ + + +

El depurador de JavaScript

+ +

El depurador de JavaScript te permite observar el valor de las variables y establecer puntos de interrupción, lugares en tu código en los que deseas pausar la ejecución e identificar los problemas que impiden que tu código se ejecute correctamente.

+ +

Depurador de Firefox

+ +

Para llegar al depurador:

+ +

Firefox: Selecciona ➤ Desarrollador Web ➤ Depurador o presiona Ctrl+Mayús+S para abrir el depurador de JavaScript. Si ya estás viendo las herramientas, haz clic en la pestaña Depurador.

+ +

Chrome: Abre las herramientas para desarrolladores y luego selecciona la pestaña Fuentes. (Opera funciona de la misma manera).

+ +

Edge e Internet Explorer 11: presiona F12 y luego Ctrl+3, o si ya estás viendo las herramientas, haz clic en la pestaña Depurador.

+ +

Safari: Abre las herramientas para desarrolladores y luego selecciona la pestaña Depurador.

+ +

Explorando el depurador

+ +

En Firefox hay tres paneles en el depurador de JavaScript.

+ +

Lista de archivos

+ +

El primer panel de la izquierda contiene la lista de archivos asociados con la página que estás depurando. Selecciona el archivo con el que deseas trabajar de esta lista. Haz clic en un archivo para seleccionarlo y ver su contenido en el panel central del depurador.

+ +

Lista de archivos

+ +

Código fuente

+ +

Establece puntos de interrupción donde desees pausar la ejecución. En la siguiente imagen, el resaltado del número 18 muestra que la línea tiene un punto de interrupción establecido.

+ +

Código fuente

+ +

Ver expresiones y puntos de interrupción

+ +

El panel de la derecha muestra una lista de las expresiones en observación que has agregado y los puntos de interrupción que has establecido.

+ +

En la imagen, la primera sección, Ver expresiones, muestra que se ha agregado la variable listItems. Puedes expandir la lista para ver los valores del arreglo.

+ +

La siguiente sección, Puntos de interrupción, enumera los puntos de interrupción establecidos en la página. En example.js, se ha establecido un punto de interrupción en la instrucción listItems.push(inputNewItem.value);

+ +

Las dos últimas secciones solo aparecen cuando el código se está ejecutando.

+ +

La sección Pila de llamadas muestra qué código se ejecutó para llegar a la línea actual. Puedes ver que el código está en la función que maneja un clic del mouse y que el código está actualmente en pausa en el punto de interrupción.

+ +

La sección final, Alcances, muestra qué valores son visibles desde varios puntos dentro de tu código. Por ejemplo, en la siguiente imagen, puedes ver los objetos disponibles para el código en la función addItemClick.

+ +

ver elementos

+ +

Conocer más

+ +

Obtén más información sobre el depurador de JavaScript en diferentes navegadores:

+ + + +

La consola de JavaScript

+ +

La consola de JavaScript es una herramienta increíblemente útil para depurar JavaScript que no funciona como se esperaba. Te permite ejecutar líneas de JavaScript en la página actualmente cargada en el navegador e informa los errores encontrados cuando el navegador intenta ejecutar tu código. Para acceder a la consola en cualquier navegador:

+ +

Si las herramientas para desarrolladores ya están abiertas, haz clic o presiona la pestaña Consola.

+ +

De lo contrario, Firefox te permite abrir la consola directamente usando Ctrl+Mayús+K o usando el comando del menú: Menú ➤ Desarrollador web ➤ Consola web, o Herramientas ➤ Desarrollador web ➤ Consola web. En otro navegador, abre las herramientas para desarrolladores y luego haz clic en la pestaña Consola.

+ +

Esto te dará una ventana como la siguiente:

+ +

Sólo consola

+ +

Para ver qué sucede, intenta ingresar los siguientes fragmentos de código en la consola uno por uno (y luego presiona Intro):

+ +
    +
  1. + 
    alert('hello!');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    const myWordmark = document.createElement('img');
+myWordmark.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myWordmark);
    +
    4. +
+ +

Ahora intenta ingresar las siguientes versiones incorrectas del código y ve lo que obtienes.

+ +
    +
  1. + 
    alert('hello!);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    const myWordmark = document.createElement('img');
+myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
+document.querySelector('h1').appendChild(myWordmark);
    +
    4. +
+ +

Comenzarás a ver el tipo de errores que devuelve el navegador. A menudo, estos errores son bastante crípticos, ¡pero debería ser bastante sencillo resolver estos problemas!

+ +

Conocer más

+ +

Obtén más información sobre la consola de JavaScript en diferentes navegadores:

+ + + +

Ve también

+ + diff --git a/files/es/learn/common_questions/what_are_hyperlinks/index.html b/files/es/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..dd1d28573d --- /dev/null +++ b/files/es/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,91 @@ +--- +title: Qué son los hipervínculos? +slug: Learn/Common_questions/What_are_hyperlinks +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +
+

En este artículo, repasaremos qué son los hipervínculos y por qué son importantes.

+
+ + + + + + + + + + + + +
Prerrequisitos:Debes saber how the Internet works Y estar familiarizado con the difference between a webpage, a website, a web server, and a search engine.
Objetivo:Conozca los enlaces en la web y por qué son importantes.
+ +

Resumen

+ +

Los hipervínculos, generalmente llamados enlaces, son un concepto fundamental detrás de la Web. Para explicar qué son los enlaces, debemos retroceder a los conceptos básicos de la arquitectura web.

+ +

En 1989, Tim Berners-Lee, el inventor de la Web, habló de los tres pilares en los que se basa la Web:

+ +
    +
  1. {{Glossary("URL")}}, un sistema de direcciones que realiza un seguimiento de los documentos web
    2. +
  2. {{Glossary("HTTP")}}, un protocolo de transferencia para encontrar documentos cuando se les da su URL
    3. +
  3. {{Glossary("HTML")}}, un formato de documento que permite hipervínculos incrustados
    4. +
+ +

Como puede ver en los tres pilares, todo en la Web gira en torno a los documentos y cómo acceder a ellos. El propósito original de la Web era proporcionar una manera fácil de alcanzar, leer y navegar a través de documentos de texto. Desde entonces, la Web ha evolucionado para proporcionar acceso a imágenes, videos y datos binarios, pero estas mejoras apenas han cambiado los tres pilares.

+ +

Antes de la Web, era bastante difícil acceder a los documentos y pasar de uno a otro. Al ser legibles por humanos, las URL ya facilitaron las cosas, pero es difícil escribir una URL larga cada vez que desee acceder a un documento. Aquí es donde los hipervínculos revolucionaron todo. Los enlaces pueden correlacionar cualquier cadena de texto con una URL, de modo que el usuario pueda alcanzar instantáneamente el documento de destino activando el enlace.

+ +

Los enlaces se destacan del texto circundante al estar subrayados y en texto azul. Toque o haga clic en un enlace para activarlo, o si usa un teclado, presione Tab hasta que el enlace esté enfocado y presione Entrar o la barra espaciadora.

+ +

Example of a basic display and effect of a link in a web page

+ +

Los enlaces son el avance que hizo que la Web fuera tan útil y exitosa. En el resto de este artículo, discutimos los diversos tipos de enlaces y su importancia para el diseño web moderno.

+ +

Profundizando

+ +

Como dijimos, un enlace es una cadena de texto vinculada a una URL, y usamos enlaces para permitir saltar fácilmente de un documento a otro. Dicho esto, hay algunos matices que vale la pena considerar:

+ +

Tipos de enlaces

+ +
+
Enlace interno
+
Un enlace entre dos páginas web, donde ambas páginas pertenecen al mismo sitio web, se denomina enlace interno. Sin enlaces internos, no existe un sitio web (a menos, por supuesto, que sea un sitio web de una página).
+
Enlace externo
+
Un enlace desde su página web a la página web de otra persona. Sin enlaces externos, no hay Web, ya que la Web es una red de páginas web. Utilice enlaces externos para proporcionar información además del contenido disponible a través de su página web.
+
Enlaces entrantes
+
Un enlace desde la página web de otra persona a su sitio. Es lo contrario de un enlace externo. Tenga en cuenta que no tiene que volver a vincular cuando alguien vincula a su sitio.
+
+ +

Cuando esté creando un sitio web, concéntrese en los enlaces internos, ya que estos hacen que su sitio sea utilizable. Encuentre un buen equilibrio entre tener demasiados enlaces y muy pocos. Hablaremos sobre el diseño de la navegación del sitio web en otro artículo, pero como regla general, cada vez que agregue una nueva página web, asegúrese de que al menos una de sus otras páginas enlaza con esa nueva página. Por otro lado, si su sitio tiene más de aproximadamente diez páginas, es contraproducente vincular a cada página desde cualquier otra página.

+ +

Cuando comienzas, no tienes que preocuparte tanto por los enlaces externos y entrantes, pero son muy importantes si quieres que los motores de búsqueda encuentren tu sitio (ver más abajo para más detalles).

+ +

Anclas

+ +

La mayoría de los enlaces vinculan dos páginas web. Las anclas unen dos secciones de un documento. Cuando sigue un enlace que apunta a un ancla, su navegador salta a otra parte del documento actual en lugar de cargar un nuevo documento. Sin embargo, crea y utiliza anclajes de la misma manera que otros enlaces.

+ +

Example of a basic display and effect of an anchor in a web page

+ +

Enlaces y motores de búsqueda

+ +

Los enlaces son importantes tanto para los usuarios como para los motores de búsqueda. Cada vez que los motores de búsqueda rastrean una página web, indexan el sitio web siguiendo los enlaces disponibles en la página web. Los motores de búsqueda no solo siguen enlaces para descubrir las distintas páginas del sitio web, sino que también usan el texto visible del enlace para determinar qué consultas de búsqueda son apropiadas para llegar a la página web de destino.

+ +

Los enlaces influyen en la facilidad con que un motor de búsqueda se vinculará a su sitio. El problema es que es difícil medir las actividades de los motores de búsqueda. Las empresas, naturalmente, quieren que sus sitios tengan un alto ranking en los resultados de búsqueda. Sabemos lo siguiente acerca de cómo los motores de búsqueda determinan el rango de un sitio:

+ + + +

SEO (optimización de motores de búsqueda) es el estudio de cómo hacer que los sitios web tengan un alto ranking en los resultados de búsqueda. Mejorar el uso de enlaces de un sitio web es una técnica útil de SEO.

+ +

Próximos pasos

+ +

Ahora querrás configurar algunas páginas web con enlaces.

+ + diff --git a/files/es/learn/common_questions/what_is_a_domain_name/index.html b/files/es/learn/common_questions/what_is_a_domain_name/index.html new file mode 100644 index 0000000000..bc38251b25 --- /dev/null +++ b/files/es/learn/common_questions/what_is_a_domain_name/index.html @@ -0,0 +1,157 @@ +--- +title: ¿Qué es un nombre de dominio? +slug: Learn/Common_questions/What_is_a_domain_name +tags: + - Infraestructura + - Nombres de dominio + - Principiante + - Web +translation_of: Learn/Common_questions/What_is_a_domain_name +--- +
+

En este artículo discutiremos acerca de los nombres de los dominios: qué son, cómo se estructuran y cómo conseguir uno.

+
+ + + + + + + + + + + + +
Prerrequisitos:Primero necesitas saber cómo funciona Internet y entender qué son las URLs.
Objetivo:Aprende qué son los nombres de dominio, cómo funcionan, y por qué son importantes.
+ +

Resumen

+ +

Los nombres de dominio son una parte clave de la infraestructura de internet.  Proporcionan una dirección legible para cualquier servidor web disponible en Internet.

+ +

Cualquier computadora conectada a Internet puede ser alcanzada a partir de una dirección {{Glossary("IP")}} pública, la cual puede estar formada por 32 bits para el protocolo IPv4 (por lo general se escribe con 4 números separados por puntos entre el 0 y 255, por ejemplo, 173.194.121.32) o por 128 bits para la versión IPv6 (formada por 8 grupos de 4 números hexadecimales separados por dos puntos, ejemplo 2027:0da8:8b73:0000:0000:8a2e:0370:1337). Las computadoras pueden manejar estas direcciones fácilmente, pero las personas pasan trabajo para saber de quien es el servidor o que servicio ofrece, ya que un número por sí solo no dice mucho. Además las direcciones IP son difíciles de recordar y pueden cambiarse en cualquier momento. Para resolver estos problemas se usan direcciones que las personas pueden leer, que son intuitivas, fáciles de recordar y dicen mucho sobre el servicio web que ofrecen, se denominan nombres de dominio. 

+ +

Ánalisis del tema

+ +

Estructura de los nombres de dominio

+ +

Un nombre de dominio tiene una estructura simple formada por varias partes (puede tener solamente una parte, dos, tres,...), separadas por puntos y se leen de derecha a izquierda:

+ +

Anatomy of the MDN domain name

+ +

Cada una de estas partes provee información específica sobre el nombre de dominio completo.

+ + + +
+
{{Glossary("TLD")}} (Top-Level Domain) Dominio de primer nivel.
+
El TLD proporciona la información más genérica. Los TLDs les dicen a usuarios el propósito general del servicio que se esconde tras el nombre de dominio. Los TLDs más genéricos (.com, .org, .net) no requieren que los servicios web cumplan ningún criterio particular, pero algunos TLDs hacen cumplir políticas más estrictas por lo que es más claro su propósito. Por ejemplo:
+
Etiqueta (o componente)
+
Las etiquetas son lo que siguen al TLD. Una etiqueta puede se cualquier cosa desde una letra hasta una oración completa. La etiqueta localizada a la derecha antes del TLD puede ser llamada también Dominio de Nivel Secundario, en inglés Secondary Level Domain (SLD). Un nombre de dominio puede tener muchas etiquetas (o componentes), no es obligatorio ni necesario tener tres etiquetas para formar un nombre de dominio. Por ejemplo,    www.inf.ed.ac.uk es un nombre de dominio correcto. Para cualquier dominio sobre el que se tenga control (por ejemplo mozilla.org), uno puede crear otros nombres de dominio (a veces llamados "subdominios", por ejemplo developer.mozilla.org o iot.mozilla.org).
+
+ +

Comprar un nombre de dominio

+ +

¿Quién es propietario de un nombre de dominio?

+ +

No se puede “comprar un nombre de dominio”.  Se paga por el derecho de usar un nombre de dominio por uno o más años. Se pueden renovar los derechos  y la renovación tiene prioridad sobre las aplicaciones de otras personas. Pero nuncá se podrá apropiar se un nombre de dominio. Una vez que deja de pagarlo queda libre para que otras personas puedan utilizarlo.

+ +

Las compañías llamadas registradores utilizan los registros de nombres de dominio para realizar un seguimiento de la información técnica y administrativa que lo conecta con su nombre de dominio.

+ +
+

Nota :  Para algunos nombres de dominio pudiera no ser un registrador quien esté a cargo de mantener el seguimiento. Por ejemplo, cada nombre de dominio bajo .fire es manejado por Amazon.

+
+ +

Encontrar un nombre de dominio disponible

+ +

Para encontrar si un nombre de dominio dado está disponible,

+ + + +
$ whois mozilla.org
+Domain Name:MOZILLA.ORG
+Domain ID: D1409563-LROR
+Creation Date: 1998-01-24T05:00:00Z
+Updated Date: 2013-12-08T01:16:57Z
+Registry Expiry Date: 2015-01-23T05:00:00Z
+Sponsoring Registrar:MarkMonitor Inc. (R37-LROR)
+Sponsoring Registrar IANA ID: 292
+WHOIS Server:
+Referral URL:
+Domain Status: clientDeleteProhibited
+Domain Status: clientTransferProhibited
+Domain Status: clientUpdateProhibited
+Registrant ID:mmr-33684
+Registrant Name:DNS Admin
+Registrant Organization:Mozilla Foundation
+Registrant Street: 650 Castro St Ste 300
+Registrant City:Mountain View
+Registrant State/Province:CA
+Registrant Postal Code:94041
+Registrant Country:US
+Registrant Phone:+1.6509030800
+
+ +

Como se observa, no se puede registrar mozilla.org porque la fundación de Mozilla ya ha sido registrada.

+ +

Por otra parte, veamos si se puede registrar afunkydomainname.org:

+ +
$ whois afunkydomainname.org
+NOT FOUND
+
+ +

Como se observa, el dominio no existe en la base de datos de whois (en el momento que se escribió), por lo que pudiéramos pedir registrarlo. ¡Bueno para saber!

+ +

Obtener un nombre de dominio

+ +

El proceso es bastante sencillo:

+ +
    +
  1. Ir a un sitio de registro.
    2. +
  2. Generalmente hay un letrero que llama la atención que dice “Get a domain name”. Hacer click en él.
    3. +
  3. Rellenar el formulario con todos los detalles requeridos. Asegúrese de no haber escrito incorrectamente el nombre de dominio deseado. ¡Una vez que esté pagado, es muy tarde!.
    4. +
  4. El registrador te permitirá conocer cuando un nombre de dominio esté correctamente registrado. Dentro de unas pocas horas, todos los servidores DNS habrán recibido su información de DNS.
    5. +
+ +
+

Nota: En este proceso se le pide su dirección real. Asegúrese de escribirla correctamente, ya que en algunos países los registradores pueden verse obligados a cerrar el dominio si no pueden proporcionar una dirección válida. 

+
+ +

Actualización de DNS 

+ +

Las bases de datos DNS son almacenadas en cada servidor DNS del mundo, y todos ellos hacen referencia a unos pocos denominados "servidores de nombre autoritario" o "servidores DNS de primer nivel". Cuando su registrador crea o actualiza alguna información para un dominio dado, la información tiene que ser actualizada en cada base de datos DNS. Cada servidor DNS que conoce sobre un dominio dado almacena la información por algún tiempo antes de que sea automáticamente invalidada y luego actualizada ( el servidor DNS consulta un servidor autoritario nuevamente). De esta manera, a los servidores DNS que conocen este nombre de dominio les toma algún tiempo poner la información al día.

+ +
+

Nota : Este tiempo es amenudo llamado tiempo de propagación . Sin embargo, este término no es preciso puesto que la actualizaciónn no se está propagando en sí (primer nivel → nivel inferior). Los servidores DNS consultados por su computadora (nivel inferior) son los que obtienen la información del servidor autoritario(primer nivel) cuando lo necesitan. 

+
+ +

¿Cómo funciona una petición DNS?

+ +

Como ya hemos visto, cuando usted quiere visualizar una página web en su navegador es más simple escribir un nombre de dominio que una dirección IP.  Echemos un vistazo al proceso: 

+ +
    +
  1. Escriba mozilla.org en la barra de direcciones de su navegador.
    2. +
  2. Su navegador le pregunta a su computadora si reconoce la dirección IP identificada por este nombre de dominio (usando una caché DNS local) Si lo hace, el nombre es traducido a la IP y el navegador gestiona el contenido con el servidor web. Fin de la historia.
    3. +
  3. Si la computadora no sabe qué IP está detrás del nombre mozilla.org, hay que pedírselo a un servidor DNS, cuyo trabajo es precisamente decirle a la computadora cuál es la dirección IP de cada nombre de dominio registrado.
    4. +
  4. Ahora que la computadora conoce la dirección IP requerida, su navegador puede gestionar contenidos con el servidor web.
    5. +
+ +

Explanation of the steps needed to obtain the result to a DNS request

+ +

Próximos pasos

+ +

Bien, hemos hablado mucho sobre procesos y arquitectura. Es hora de seguir adelante.

+ + diff --git a/files/es/learn/como_contribuir/index.html b/files/es/learn/como_contribuir/index.html new file mode 100644 index 0000000000..6cc600f24d --- /dev/null +++ b/files/es/learn/como_contribuir/index.html @@ -0,0 +1,88 @@ +--- +title: ¿Cómo contribuir al Área de Aprendizaje en MDN? +slug: Learn/Como_Contribuir +tags: + - Aprender + - Documentación + - Guía + - MDN Meta + - Principiante + - contribuir + - 'l10n:priority' +translation_of: Learn/How_to_contribute +--- +
{{LearnSidebar}}
+ +


+ Si estás aqui, es probable que sea porque estas interesado en contribuir al área de aprendizaje de MDN. ¡Una noticia estupenda!

+ +

En esta página encontrarás todo lo que necesitas para comenzar ayudando a mejorar el contenido de aprendizaje en MDN. Hay muchas cosas que puedes hacer, dependiendo de cuanto tiempo tienes y de si eres principiante, desarrollador web, o profesor.

+ +
+

Nota: Si ya eres colaborador de MDN, no dudes en volver a revisar la página de status de la documentación para mantener un seguimiento del trabajo que se ha realizado y observar cuáles son nuestras prioridades de escritura.

+
+ +
+

Nota: Los colaboradores usan tableros de Trello para organizar sus actividades. Si quieres usarlos, no tienes más que crearte una cuenta de Trello y avisar a Jeremie para que te deje editar el tablero.

+
+ +

Soy principiante

+ +

¡Genial! Los principiantes son muy importantes y valiosos para crear y dar retroalimentación sobre el material de aprendizaje. Tú tienes una perspectiva única sobre estos artículos como miembro de la audiencia a la que están dirigidos, lo cual puede convertirte en un miembro de incalculable valor para nuestro equipo. De hecho, si estás aprendiendo algo de uno de nuestros artículos y te encuentras atascado, o tienes las sensación de que el artículo es algo confuso, puedes modificarlo tú mismo o simplemente informarnos para que podamos resolverlo.

+ +

Colaborar es un gran modo de divertirse mientras se aprenden cosas nuevas. Si alguna vez te sientes perdido o tienes algunas preguntas, no dudes en contactarnos a través de nuestra lista de correo o nuestro canal IRC (ve al final de la página para más detalles).

+ +

A continuación puedes encontrar algunas formas de las que puedes contribuir:

+ +
+
Añade etiquetas a nuestros artículos (5 min)
+
Etiquetar contenido de MDN es una de las formas más sencillas de contribuir a MDN. Como muchas de las características de nuestra plataforma usan etiquetas para ayudar a presentar la información en contexto, la ayuda con el etiquetado es una contribución muy valiosa. Echa un vistazo a la lista de entradas del glosario y a los artículos de aprendizaje sin etiquetas para comenzar.
+
Lee y revisa una entrada de glosario (15 min)
+
Como principiante, necesitamos que tu vista fresca revise nuestro contenido. Si encuentras alguna entrada del glosario difícil de entender, significa que hay que mejorarla. No dudes en realizar cualquier cambio que estimes oportuno. Si crees que no tienes las habilidades adecuadas para editar la entrada, puedes contactarnos a través de nuestra lista de correo.
+
Escribe una nueva entrada de glosario (1 hora)
+
Esta es la forma más eficaz de aprender algo nuevo. Elige un concepto que quieras comprender y, mientras aprendes, escribe una entrada del glosario sobre dicho concepto. Explicar algo a otros es un buen modo de "fijar" el conocimiento a tu cerebro y de ayudarte a darle sentido a las cosas. Todo mientras ayudas a otras personas. ¡Gana todo el mundo!
+
Lee y revisa un artículo de aprendizaje (2 horas)
+
Esto es bastante similar a revisar entradas del glosario (ver arriba); aunque lleva más tiempo, ya que estos artículos son un poco más largos.
+
+ +

Soy desarrollador web

+ +

¡Fantástico! Tus habilidades técnicas son justo lo que necesitamos para asegurarnos de que proporcionamos contenido técnicamente preciso para los principiantes. Como esta parte específica de MDN está dedicada al aprendizaje de la web, asegúrate de explicar las cosas de la forma más sencilla posible. Pero procura no pasarte de sencillez, ya que entonces el contenido deja de ser útil. Es más importante que se comprenda a que sea innecesariamente preciso.

+ +
+
Lee y revisa una entrada de glosario (15 min)
+
Como desarrollador web, te necesitamos para asegurarnos de que nuestro contenido es técnicamente correcto sin ser demasiado pedante. No dudes en realizar cualquier cambio que creas necesario. Si quieres debatir sobre el contenido antes de editarlo, danos un toque a nuestra lista de correo o al canal IRC.
+
Escribe una nueva entrada de glosario (1 hora)
+
Clarificar nuestra jerga técnica es un muy buen modo de aprender y ser técnicamente preciso y simple. La gente con menos experiencia te lo agradecerá. Tenemos muchos términos indefinidos que necesitan tu atención. Escoge uno y listo.
+
Lee y revisa un artículo de aprendizaje (2 horas)
+
Esto es lo mismo que revisar entradas del glosario (ver arriba); aunque lleva un poco más de tiempo, ya que estos artículos son un poco más largos.
+
+ +
+
Escribe un nuevo artículo de aprendizaje (4 horas)
+
En MDN hacen falta artículos sencillos y prácticos sobre el uso de tecnologías web (HTML, CSS, JavaScript, etc). Incluso tenemos contenido viejo en MDN que merece ser revisado y reformado. Lleva tus habilidades al límite para lograr que las tecnologías web puedan ser utilizadas incluso por principiantes.
+
Crea ejercicios, ejemplos de código o herramientas de aprendizaje interactivo (? horas)
+
Todos nuestros artículos de aprendizaje requieren lo que nosotros llamamos materiales de "aprendizaje activo", porque la gente aprende mejor haciendo las cosas por sí mismos. Materiales como ejercicios o contenido interactivo que ayude a los usuarios a aplicar y manejar los conceptos detallados en un artículo. Hay muchas formas de crear contenido de aprendizaje activo, desde crear ejemplos de código con JSFiddle o similares, hasta crear contenido interactivo completamente hackeable con Thimble. ¡Libera tu creatividad!
+
+ +

Soy profesor

+ +

MDN tiene un largo historial de excelencia técnica, pero necesitamos ayuda para mostrar el camino a los principiantes en conceptos técnicos. Aqué es donde entras tú, como profesor o educador. Puedes ayudarnos a asegurar que nuestro material se provee de forma adecuada y práctica para nuestros lectores.

+ +
+
Lee y revisa una entrada en el glosario (15 min)
+
Comprueba una entrada en el glosario y siéntete libre de hacer todos los cambios que creas que son necesarios. Si quieres discutir el contenido antes de editarlo, danos un toque en nuestra lista de correo  or Canal de chat IRC.
+
Escribir una nueva entrada de glosario (1 hora)
+
Las definiciones simples y claras de los términos y las descripciones básicas de los conceptos en el glosario son fundamentales para satisfacer las necesidades de los principiantes. Su experiencia como educador puede ayudar a crear excelentes entradas de glosario; tenemos  muchos terminos indefinidos que necesitan de su atención. Escoge uno y ve por él.
+
Añadir ilustraciones y/o esquemas a los artículos (1 hora)
+
Como ya sabrás, Las ilustraciones son parte invaluable de cualquier contenido de aprendizaje. Esto es algo que generalmente falta en MDN y tus habilidades pueden haer la diferencia en esta área. Mira en los artículos que le falan contenido ilustrativo y escoge uno al que te gustaría crearle los gráficos.
+
Leer y revisar un artículo de aprendizaje (2 horas)
+
Esto es similar a revisar las entradas del glosario (ver arriba), pero requiere más tiempo ya que los artículos son bastante más largos .
+
Escribir un nuevo artículo de aprendizaje (4 horas)
+
Necesitamos artículos simples y directos sobre el ecosistema web y otros temas funcionales a su alrededor. Dado que estos artículos de aprendizaje deben ser educativos en lugar de tratar de cubrir literalmente todo lo que hay que saber, su experiencia en saber qué cubrir y cómo será una gran ventaja.
+
Crear ejercicios, cuestionarios o herramientas interactivas de aprendizaje (? horas)
+
Todos nuestros artículos de aprendizaje requieren lo que llamamos materiales de "aprendizaje activo". Dichos materiales son ejercicios o contenido interactivo que ayudan al usuario a aprender a usar y ampliar los conceptos detallados en un artículo. Aquí puede hacer muchas cosas, desde crear concursos hasta crear contenido interactivo completamente pirateable con  Thimble. Da rienda suelta a tu creatividad!
+
Crea rutas de aprendizaje (? horas)
+
Con el fin de proporcionar tutoriales progresivos y comprensibles, tenemos que dar forma a nuestro contenido en rutas. Es una forma de recopilar contenido existente y descubrir lo que falta para crear un artículo de aprendizaje para escribir .
+
diff --git a/files/es/learn/css/building_blocks/cascada_y_herencia/index.html b/files/es/learn/css/building_blocks/cascada_y_herencia/index.html new file mode 100644 index 0000000000..91a359181f --- /dev/null +++ b/files/es/learn/css/building_blocks/cascada_y_herencia/index.html @@ -0,0 +1,333 @@ +--- +title: Cascada y herencia +slug: Learn/CSS/Building_blocks/Cascada_y_herencia +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +
{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+ +

El objetivo de este artículo es desarrollar la comprensión de algunos de los conceptos fundamentales de CSS (cascada, especificidad y herencia) que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos.

+ +

A medida que avances en este apartado verás que puede resultar menos relevante y un poco más académico que otros artículos, pero la comprensión de estas cuestiones te ahorrará problemas más adelante. Te animamos a que trabajes meticulosamente este apartado y verifiques que entiendes los conceptos antes de continuar.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y una idea de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender qué son la cascada y la especificidad, y cómo funciona la herencia en CSS.
+ +

Reglas conflictivas

+ +

CSS significa hojas de estilo en cascada (cascading style sheets), y es muy importante entender la palabra cascada. La forma en que se comporta la cascada es la clave para comprender el CSS.

+ +

En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La cascada, y el concepto estrechamente relacionado de especificidad son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se apliuca finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos.

+ +

También es significativo el concepto de herencia, que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causar una respuesta diferente a la que esperas.

+ +

Vamos a empezar por echar un vistazo rápido a los principales elementos que nos interesan, y a continuación veremos cómo interactúan entre sí y con tu CSS. Pueden resultar un poco difíciles de entender, pero a medida que practiques escribiendo CSS te resultará más fácil de entender la manera cómo funcionan.

+ +

Cascada

+ +

En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.

+ +

En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al h1. El h1 acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.

+ +

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

+ +

Especificidad

+ +

La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:

+ + + +

Veamos un ejemplo. Aquí abajo encontrarás dos reglas que pueden aplicarse al elemento h1. Este elemento h1 termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más abajo en el orden del código.

+ +

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

+ +

Profundizaremos en la especificidad más adelante.

+ +

Herencia

+ +

La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.

+ +

Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.

+ +

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

+ +

Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho {{cssxref("width")}} del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!

+ +
+

Nota: En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la sección de especificaciones de la propiedad color.

+
+ +

Comprender cómo trabajan juntos estos conceptos

+ +

Estos tres conceptos controlan qué CSS se aplica a qué elemento. En las secciones siguientes veremos cómo funcionan en conjunto. A veces puede parecer un poco complicado, pero lo irás recordando a medida que ganes experiencia con el CSS, y siempre puedes consultar los detalles si se te olvidan. ¡Incluso los desarrolladores experimentados lo hacen!

+ +

Comprender la herencia

+ +

Vamos a empezar con la herencia. En el ejemplo siguiente tenemos un elemento {{HTMLElement( "ul")}} con dos niveles de listas no ordenadas anidadas en él. Hemos establecido para el <ul> exterior un borde, un relleno y un color de fuente.

+ +

El color se ha aplicado a los hijos directos y también a los hijos indirectos: los elementos hijo <li> inmediatos y los que están dentro de la primera lista. A continuación, hemos añadido a la segunda lista anidada una clase especial y le hemos aplicado un color diferente, que los elementos hijo de esta heredarán.

+ +

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

+ +

La anchura (como se mencionó anteriormente), los márgenes, el relleno y los bordes no se heredan. Si los elementos hijo de nuestra lista heredaran los bordes, todas las listas y los elementos de lista ganarían un borde cada vez ¡y no es probable que vez quieras un efecto así!

+ +

Las propiedades que se heredan por defecto y las que no son cuestión, en gran medida, de sentido común.

+ +

Control de la herencia

+ +

CSS proporciona cuatro valores de propiedad universales especiales para el control de la herencia. Todas las propiedades CSS aceptan estos valores.

+ +
+
{{cssxref("inherit")}}
+
Establece que el valor de la propiedad que se aplica a un elemento determinado sea exactamente igual al del elemento padre. En la práctica, esto "activa la herencia".
+
{{cssxref("initial")}}
+
Establece que el valor de la propiedad que se aplica a un elemento seleccionado tenga el mismo valor que esté establecido para esa propiedad en la hoja de estilo por defecto del navegador.
+
{{cssxref("unset")}}
+
Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como inherit, y en caso contrario como initial.
+
+ +
+

Nota: También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores.

+
+ +
+

Nota: Véase la sección El origen de las declaraciones CSS en el artículo Introducción al concepto de cascada en CSS para obtener más información sobre cada uno de estos valores y el modo en que funcionan.

+
+ +

A continuación veremos una lista de enlaces y exploraremos cómo funcionan los valores universales. El ejemplo en vivo de abajo te permite jugar con el CSS y ver lo que sucede cuando se hacen cambios. Jugar con el código es la mejor forma de enfrentarse al HTML y el CSS.

+ +

Por ejemplo:

+ +
    +
  1. Se ha aplicado la clase my-class-1 al segundo elemento de lista. Esto establece por herencia el color del elemento <a> que está anidado en él. ¿Cómo cambia el color del enlace si quitamos esta regla?
    2. +
  2. ¿Entiendes por qué el tercer y el cuarto enlace se ven de este color? En caso contrario, comprueba la descripción de los valores anteriores.
    3. +
  3. ¿Cuál de los enlaces va a cambiar de color si se define un nuevo color para el elemento <a>, por ejemplo, a { color: red; }?
    4. +
+ +

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

+ +

Restablecer todos los valores de propiedad

+ +

La propiedad CSS abreviada all se puede utilizar para aplicar uno de estos valores de herencia a (casi) todas las propiedades a la vez. Su valor puede ser cualquiera de los valores de herencia (inherit, initial, unset, o revert). Es una forma práctica de deshacer los cambios realizados respecto al estilo para que puedas volver a un punto de partida conocido antes de empezar a introducir cambios.

+ +

En el ejemplo siguiente hay dos bloques de cita. El primero ya tiene un estilo aplicado al propio elemento de cita, mientras que el segundo tiene una clase aplicada al bloque de cita que establece el valor all en unset.

+ +

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

+ +

Prueba a establecer el valor de all al resto de valores disponibles y observa la diferencia.

+ +

Comprender la cascada

+ +

Ahora entendemos por qué un párrafo que está anidado en la estructura del HTML es del mismo color que el CSS aplicado al cuerpo (body) del HTML y, a partir de los artículos de introducción sabemos cómo cambiar el CSS aplicado a algo en cualquier parte del documento, ya sea mediante la asignación de CSS a un elemento o la creación de una clase. Ahora vamos a echar un vistazo a la forma en que el concepto de cascada define qué reglas CSS se aplican cuando más de un elemento de estilo puede aplicar estilo a un elemento.

+ +

Hay que considerar tres factores, que se enumeran a continuación en orden de importancia creciente. Los posteriores invalidan los anteriores:

+ +
    +
  1. Orden en el código
    2. +
  2. Especificidad
    3. +
  3. Importancia
    4. +
+ +

Vamos a explicarlos para ver cómo los navegadores determinan exactamente que CSS deben aplicar.

+ +

Orden en el código

+ +

Ya hemos visto cómo el orden en el código es importante en el concepto de cascada. Si tienes más de una regla con exactamente el mismo peso, la que ocupa el último lugar en el CSS gana. Puedes entenderlo como que las reglas que están más cerca del elemento considerado sobreescriben las anteriores hasta que la última gana y da formato al elemento.

+ +

Especificidad

+ +

Una vez entendido el hecho de que el orden de los elementos en el código es importante, te encontrarás en alguna situación en la que sabes cuál es la última norma en la hoja de estilo, pero se aplica una regla anterior. Esto se debe a que la regla anterior tiene una especificidad mayor, es decir, es más específica y, por lo tanto, el navegador la escoge como la que debe dar forma al elemento.

+ +

Como hemos visto anteriormente en este mismo artículo, un selector de clase tiene más peso que un selector de elemento, por lo que las propiedades que se definen en la clase tienen prioridad sobre las que se aplican directamente en el elemento.

+ +

Un elemento que hay que tener en cuenta es que aunque pensamos en términos de selectores y reglas que se aplican a lo que estos seleccionan, no es toda la regla lo que se sobrescribe, sino solo las propiedades que entran en conflicto.

+ +

Este comportamiento ayuda a evitar repeticiones en el CSS. Una práctica común es definir estilos genéricos para los elementos básicos y luego, crear clases para los elementos que son diferentes. Por ejemplo, en la hoja de estilo que mostramos a continuación hemos definido estilos genéricos para los encabezados de nivel 2; posteriormente hemos creado algunas clases que solo cambian algunas de las propiedades y los valores. Los valores definidos inicialmente se aplican a todos los encabezados, y entonces los valores más específicos se aplican a los encabezados con las clases.

+ +

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

+ +

Ahora vamos a echar un vistazo a cómo el navegador calcula la especificidad. Ya sabemos que un selector de elemento tiene una especificidad baja y se puede sobrescribir con un elemento de clase. Esencialmente se otorga un valor de puntos a los diferentes tipos de selectores y la suma de estos establece la importancia de ese selector en particular, que a continuación puede evaluarse ante otras posibles coincidencias.

+ +

La cantidad de especificidad de un selector se mide usando cuatro valores diferentes (o componentes), que pueden describirse como millares, centenas, decenas y unidades (cuatro dígitos individuales dispuestos en cuatro columnas):

+ +
    +
  1. Millares: Se suma un punto en esta columna si la declaración está en un atributo de {{htmlattrxref ("style")}} o, como suelen denominarse, estilos en línea. Tales declaraciones no tienen selectores, por lo que su especificidad siempre es 1000.
    2. +
  2. Centenas: Se suma un punto en esta columna por cada selector con ID particular que esté contenido en el selector general.
    3. +
  3. Decenas: Se suma un punto en esta columna por cada selector de clase, de atributo o pseudoclase que estén contenidos en el selector general.
    4. +
  4. Unidades: Se suma un punto en esta columna por cada selector o pseudoelemento que esté contenido en el selector general.
    5. +
+ +
+

Nota: El selector universal (*), los operadores de combinación (+, >, ~, ' ') y la pseudo-clase de negación (:not) no tienen ningún efecto sobre la especificidad.

+
+ +

La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los selectores de referencia de MDN.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorMillares:Centenas:Decenas:Unidades:Especificidad total
h100010001
h1 + p::first-letter00030003
li > a[href*="en-US"] > .inline-warning00220022
#identifier01000100
Sin selector, con una regla en el atributo de un elemento {{htmlattrxref("style")}}10001000
+ +

Antes de continuar, vamos a ver un ejemplo:

+ +

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

+ +

¿Qué pasa aquí? En primer lugar, estamos interesados solo en las primeras siete reglas de este ejemplo y, como te habrás dado cuenta, hemos incluido sus valores de especificidad en un comentario antes de cada una.

+ + + +
    +
+ +
+

Nota: Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un millar de selectores de clase combinados no serían capaces de sobrescribir las reglas de un selector ID.

+ +

Una forma más precisa de evaluar la especificidad sería anotar los niveles de especificidad individualmente de mayor a menor. Solo cuando hay empate entre las puntuaciones de los selectores dentro de un nivel especifico será necesario evaluar el nivel inferior siguiente; de lo contrario, puedes prescindir de los selectores de especificidad de los niveles inferiores, ya que nunca pueden sobrescribir los niveles de especificidad más altos.

+
+ +

Propiedad !important

+ +

Hay una pieza especial de CSS que se puede utilizar para anular todos los cálculos anteriores, sin embargo se debe tener mucho cuidado con su uso: !important. Se utiliza para convertir una propiedad y un valor particular en el elemento más específico, de modo que se invalidan las reglas normales de la cascada.

+ +

Echa un vistazo a este ejemplo en el que se muestran dos párrafos, uno de los cuales tiene un elemento ID.

+ +

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

+ +

Vamos a observarlo con detenimiento para ver qué sucede. Elimina algunas de las propiedades para ver lo que sucede si te cuesta entender lo que ocurre:

+ +
    +
  1. Verás que se han aplicado los valores de {{cssxref("color")}} y {{cssxref("padding")}} de la tercera regla pero no el de {{cssxref("background-color")}}. ¿Por qué? Deberían haberse aplicado para los tres porque las reglas que se encuentran más adelante en el orden en el código fuente prevalecen sobre las reglas anteriores.
    2. +
  2. Sin embargo, ganan las reglas que están antes porque los selectores de clase tienen mayor especificidad que selectores de elemento.
    3. +
  3. En ambos bloques de código hay una clase {{htmlattrxref("class")}} con el valor better, pero en el segundo bloque de código hay un {{htmlattrxref("id")}} con el valor winning. Puesto que los identificadores tienen una especificidad incluso mayor que las clases (solo puede haber un elemento con un determinado ID en cada página, mientras que puede haber muchos elementos de la misma clase: los selectores ID son muy específicos con lo que delimitan), el primer bloque de código tendría un fondo de color gris y ningún borde, según lo que especifica la clase, mientras que al segundo bloque de código se aplicarían tanto el color de fondo rojo como el borde negro de 1 píxel.
    4. +
  4. El segundo elemento, en cambio, se muestra con el fondo de color rojo pero sin borde. ¿Por qué? Porque la declaración !important que hay en la segunda regla, después de border: none significa que esta declaración tendrá más valor que la regla anterior, aunque el ID de esta tenga mayor especificidad.
    5. +
+ +
+

Nota: La única manera de anular la declaración !important sería incluir otra declaración !important en una declaración con la misma especificidad que aparezca más adelante en el orden del código fuente, o con una especificidad superior.

+
+ +

Es útil saber que !important existe para que sepas qué es cuando te lo encuentres en el código de otras personas. Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario. !important cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande.

+ +

Una situación en la que puede que tengas que utilizarlo es si trabajas en un CMS en el que no es posible editar los módulos básicos de CSS y realmente tienes que anular un estilo que no puede anularse de ninguna otra forma. Aun así, te recomendamos encarecidamente que evites su uso.

+ +

El efecto de la ubicación del CSS

+ +

Por último, resulta útil señalar que la importancia de una declaración CSS depende de la hoja de estilo en que se especifica (es posible que los usuarios configuren hojas de estilo personalizadas para anular los estilos de los desarrolladores, por ejemplo, porque el usuario podría tener alguna discapacidad visual, o bien porque desea configurar el tamaño de letra de todas las páginas web que visita para que sea el doble de grande y le proporcione una mayor facilidad de lectura).

+ +

Resumen

+ +

Las declaraciones contradictorias se aplicarán en el orden siguiente (recuerda que las últimas prevalecen sobre las anteriores):

+ +
    +
  1. Declaraciones en las hojas de estilo de agente de usuario (por ejemplo, estilos predeterminados del navegador, que se utilizan cuando no hay otro estilo).
    2. +
  2. Declaraciones normales en las hojas de estilo del usuario (estilos personalizados creados por un usuario).
    3. +
  3. Declaraciones normales en las hojas de estilo de autor (los estilos que creamos nosotros, los desarrolladores web).
    4. +
  4. Declaraciones !important en las hojas de estilo de autor
    5. +
  5. Declaraciones !important en las hojas de estilo del usuario
    6. +
+ +

Para los desarrolladores tiene sentido que sus hojas de estilo anulen a las de usuario para mantener el diseño según lo previsto, pero, como hemos visto, a veces los usuarios tienen buenas razones para anular las directrices de los desarrolladores web. Esto puede lograrse con el uso de !important en sus reglas.

+ +

Pon a prueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa einformación en Test your skills: the Cascade.

+ +

¿Qué sigue?

+ +

Si has entendido la mayor parte de este artículo, ¡enhorabuena! Has comenzado a familiarizarte con la mecánica fundamental del CSS. En el artículo siguiente vamos a ver con detalle los selectores.

+ +

Si todavía no tienes una comprensión completa de los conceptos de cascada, especificidad y herencia, ¡no te preocupes! Es, sin duda, lo más complejo que hemos expuesto hasta ahora y es algo que incluso los desarrolladores web profesionales encuentran difícil. Te aconsejamos que regreses a este artículo cuantas veces necesites a medida que avances con el curso.

+ +

Regresa a esta página si empiezas a toparte con problemas extraños o con que los estilos no se aplican de la forma que esperas. Podría ser un problema de especificidad.

+ +

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

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/contenido_desbordado/index.html b/files/es/learn/css/building_blocks/contenido_desbordado/index.html new file mode 100644 index 0000000000..808a519c12 --- /dev/null +++ b/files/es/learn/css/building_blocks/contenido_desbordado/index.html @@ -0,0 +1,123 @@ +--- +title: Contenido desbordado +slug: Learn/CSS/Building_blocks/Contenido_desbordado +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
+ +

En este artículo veremos otro concepto importante en CSS: el desbordamiento. El desbordamiento es lo que sucede cuando hay demasiado contenido para que pueda caber cómodamente en una caja. En esta guía aprenderás qué es y cómo administrarlo.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con el CSS).
Objetivo:Comprender el desbordamiento y cómo gestionarlo.
+ +

¿Qué es el desbordamiento?

+ +

Ya sabemos que todo en CSS está dentro de una caja, y que podemos restringir el tamaño de estas cajas asignándoles los valores {{cssxref ("width")}} y {{cssxref ("height")}} (o {{cssxref("inline-size")}} y {{cssxref("block-size")}}). El desbordamiento es lo que sucede cuando hay demasiado contenido en una caja, y no cabe cómodamente en ella. El CSS te proporciona varias herramientas para administrar este desbordamiento, y además es un concepto que resulta útil de conocer desde las primeras etapas. Te encontrarás con situaciones de desbordamiento con bastante frecuencia al escribir CSS, especialmente cuando profundices en compaginación con CSS.

+ +

El CSS trata de evitar «la pérdida de datos»

+ +

Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS por defecto cuando ocurre un desbordamiento.

+ +

El primero consiste en una caja que a la que se le ha restringido la dimensión al darle una altura. Luego hemos añadido más contenido del que cabe en la caja. El contenido se desborda y se distribuye desordenadamente sobre el párrafo que hay debajo de la caja.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}

+ +

El segundo consiste en una palabra dentro de una caja cuya dimensión en línea está restringida. La caja se ha hecho demasiado pequeña para que esa palabra quepa, y se desborda.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}

+ +

Te debes estar preguntando por qué el CSS ha tomado por defecto el enfoque más bien desarreglado de provocar el desbordamiento desordenado del contenido. ¿Por qué no ocultar el contenido adicional o hacer crecer la caja?

+ +

Siempre que sea posible, el CSS no oculta su contenido; hacerlo provocaría la pérdida de datos, que generalmente es un problema. En términos de CSS, esto significa que una parte del contenido desaparece. El problema con que desaparezca contenido es que podría ser que no notaras que ha desaparecido. Tus visitantes podrían no darse cuenta de que ha desaparecido contenido. Si se trata del botón de envío de datos en un formulario, nadie podría completar el formulario, y ¡eso es un gran problema! Así que, en vez de esto, el CSS tiende a desbordarse de un modo que sea visible. Es probable que te des cuenta de ese desarreglo, o en el peor de los casos, que un visitante de tu sitio web te informe de que una parte del contenido se superpone y debas arreglarlo.

+ +

Si has restringido el tamaño de una caja con una anchura o una altura determinadas, el CSS asume que sabes lo que haces y que gestionas correctamente el potencial de desbordamiento. En general, restringir el tamaño de un bloque es problemático cuando el texto se va a poner en una caja, porque puede haber más texto del que te esperabas al diseñar el sitio o el tamaño del texto puede ser mayor, por ejemplo, si el usuario lo aumenta.

+ +

En los artículos siguientes veremos diferentes modos de controlar el tamaño que podrían ser menos propensos a desbordarse. Sin embargo, si necesitas un tamaño fijo, también puedes controlar cómo se comporta el desbordamiento. ¡Sigue leyendo!

+ +

La propiedad overflow

+ +

La propiedad {{cssxref ("overflow")}} es el modo como tomas el control del desbordamiento de un elemento y le dices al navegador cómo desea que se comporte. El valor predeterminado para la propiedad overflow es visible, por lo que, de forma predeterminada vamos a poder ver cuándo se desborda nuestro contenido.

+ +

Si deseas cortar el contenido cuando se desborda, puedes establecer el valor overflow: hidden en tu caja, que hace exactamente lo que dice: ocultar el desbordamiento. Esto puede hacer que las cosas desaparezcan, por lo que solo debes utilizar esta opción si ocultar contenido no te va a causar ningún problema.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}

+ +

Quizás te gustaría añadir barras de desplazamiento cuando el contenido se desborde. Si usas overflow: scroll, tu navegador siempre mostrará barras de desplazamiento, incluso cuando no haya suficiente contenido para que pueda desbordarse. Es posible que desees hacer esto, porque evita que aparezcan y desaparezcan barras de desplazamiento según el contenido.

+ +

Si en la caja siguiente eliminas parte del contenido, observarás que las barras de desplazamiento permanecen aun sin que haya nada que desplazar (o, como mucho, solo las pistas de la barra de desplazamiento).

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}

+ +

En el ejemplo anterior solo necesitamos desplazarnos en el eje y, sin embargo, obtenemos barras de desplazamiento en ambos ejes. En su lugar, puedes usar la propiedad {{cssxref ("overflow-y")}}, y establecer overflow-y: scroll para poder desplazarte solo por el eje y.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}

+ +

También puedes desplazarte por el eje x usando {{cssxref ("overflow-x")}}, aunque esta no es una forma recomendada para manejar palabras largas. Si necesitas lidiar con una palabra larga en una caja pequeña, puedes consultar las propiedades {{cssxref ("word-break")}} o {{cssxref ("overflow-wrap")}}. Además, algunos de los métodos expuestos en el artículo Elementos de dimensionado en CSS pueden ayudarte a crear cuadros que se adapten mejor a cantidades variables de contenido.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}

+ +

Al igual que con el desplazamiento, obtendrás una barra de desplazamiento en la dimensión de desplazamiento independientemente de si hay suficiente contenido para provocar una barra de desplazamiento.

+ +
+

Nota: observa que puedes especificar un desplazamiento en x y en y utilizando la propiedad overflow y pasando dos valores. Si especificas dos palabras clave, la primera se aplica a overflow-x y la segunda a overflow-y. De lo contrario, tanto overflow-x como overflow-y se fijan en el mismo valor. Por ejemplo, overflow: scroll hidden establece overflow-x en scroll y overflow-y en hidden.

+
+ +

Si deseas que aparezcan barras de desplazamiento solo si hay más contenido del que cabe en la caja, utiliza overflow: auto. En este caso, el navegador decide si muestra las barras de desplazamiento o no. Los navegadores de escritorio solo suelen hacerlo cuando hay contenido suficiente para causar desbordamiento.

+ +

En el ejemplo siguiente, elimina parte del contenido hasta que quepa en la caja y observarás que las barras de desplazamiento desaparecen.

+ +

{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}

+ +

overflow establece un contexto de formato de bloque

+ +

En CSS hay un concepto conocido como block formatting context o BFC (contexto de formato de bloque). No es algo de lo que debas preocuparte demasiado en este momento, pero es útil saber que cuando usas un valor de overflow, como scroll o auto, creas un BFC. El resultado es que el contenido de la caja al que acabas de cambiar el valor overflow se convierte en un minidiseño propio. Las cosas que están fuera del contenedor no pueden meterse en él, y nada puede sobresalir de esa caja hacia el diseño circundante. Esto es para permitir un comportamiento con desplazamiento, porque para poder crear una experiencia de desplazamiento consistente todo el contenido de tu caja ha de estar contenido en algo, y no puede superponerse con otros elementos de la página.

+ +

Desbordamiento no deseado en diseño web

+ +

Los métodos de diseño modernos (explicados en el módulo Diseñar con el CSS) gestionan muy bien el desbordamiento. Han sido diseñados para hacer frente al hecho de que tendemos a no poder predecir cuánto contenido habrá en la web. Sin embargo, en el pasado, los desarrolladores a menudo usaban alturas fijas para tratar de alinear los fondos de cajas que en realidad no tenían relación entre sí. Este método era frágil y, en una aplicación heredada, ocasionalmente puede aparecer una caja en que el contenido se superpone a otro contenido de la página. Si ves esto, sabrás que se trata de desbordamiento. Lo ideal sería volver a calcular el diseño para no tener que confiar tamaños de caja fijos.

+ +

Al desarrollar un sitio web, siempre debes tener en cuenta los problemas de desbordamiento. Debes probar diseños con cantidades grandes y pequeñas de contenido, aumentar el tamaño de letra... y asegurarte de que tu CSS puede hacerle frente sin ningún problema. Es probable que cambiar el valor de overflow para ocultar contenido o añadir barras de desplazamiento sea algo que debas reservar solo para unos pocos casos especiales, en que realmente desees una caja con barra de desplazamiento, por ejemplo.

+ +

Pon a prueba tus conocimientos

+ +

Hay mucho que absorber en esta lección. ¿Recuerdas la información más importante? Para comprobarlo, ve a Test your skills: overflow.

+ +

Resumen

+ +

Este breve artículo ha introducido el concepto de desbordamiento; ahora comprendes que el CSS intenta no hacer invisible el desbordamiento de contenido, porque esto provoca la pérdida de datos. Has descubierto que puedes gestionar el desbordamiento potencial y también que debes probar tu trabajo para asegurarte de que no causa un desbordamiento problemático accidentalmente.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Valores y unidades
    8. +
  8. Elementos de dimensionado en el CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Estilo de las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/depurar_el_css/index.html b/files/es/learn/css/building_blocks/depurar_el_css/index.html new file mode 100644 index 0000000000..5f04fdd756 --- /dev/null +++ b/files/es/learn/css/building_blocks/depurar_el_css/index.html @@ -0,0 +1,198 @@ +--- +title: Depurar el CSS +slug: Learn/CSS/Building_blocks/Depurar_el_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
+ +

Al escribir CSS te puedes encontrar que, a veces, alguna parte de tu CSS no hace lo que esperas. Tal vez creas que cierto selector debería coincidir con un elemento, pero no sucede nada; o una caja tiene un tamaño diferente al que esperabas. Este artículo te orientará sobre cómo solucionar un problema de CSS y te mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarte a descubrir qué sucede.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los conceptos básicos de las DevTools que hay en los navegadores y de cómo inspeccionar y editar el CSS de un modo fácil.
+ +

Cómo acceder a las DevTools de los navegadores

+ +

El artículo ¿Qué son las herramientas de desarrollo de los navegadores? es una guía actualizada que explica cómo acceder a las herramientas en varios navegadores y plataformas. Si bien puedes optar por desarrollar principalmente en un navegador en particular y, por lo tanto, te familiarizarás más con las herramientas incluidas en ese navegador, vale la pena saber cómo acceder a ellas en otros navegadores. Esto ayudará si haces pruebas de las representaciones que dan diferentes navegadores.

+ +

También te darás cuenta de que los diversos navegadores han optado por centrarse en áreas diferentes al crear sus DevTools. Por ejemplo, en Firefox hay algunas herramientas excelentes para trabajar visualmente con la compaginación con CSS, que te permiten inspeccionar y editar Compaginaciones de cuadrícula, Flexbox y formas. Sin embargo, todos los navegadores tienen herramientas fundamentales similares. Por ejemplo, para inspeccionar las propiedades y los valores que se aplican a los elementos de tu página, y hacer cambios desde el editor.

+ +

En este artículo veremos algunas características útiles de Firefox DevTools para trabajar con CSS. Para hacerlo, usaremos un archivo de ejemplo. Carga esto en una pestaña nueva si deseas seguir adelante y abre tus DevTools como se describe en el artículo del enlace anterior.

+ +

El DOM y "View Source"

+ +

Algo que puede hacer tropezar a los recién llegados a DevTools es la diferencia entre lo que ves cuando miras el código fuente de una página web, o miras el archivo HTML que colocas en el servidor, y lo que puedes ver en la ventana HTML de DevTools. Aunque ves más o menos lo mismo que puedes ver desde View Source (Ver código fuente de la página), hay algunas diferencias.

+ +

En el DOM procesado, el navegador puede haber corregido algunos HTML mal escritos por ti. Si cerraste un elemento incorrectamente, por ejemplo, por abrir con un <h2> y cerrar con un </h3>, el navegador descubre lo que ibas a hacer y el HTML del DOM cerrará ese <h2> de apertura correctamente con un </h2>. El navegador también normaliza todo el HTML, y el DOM también muestra los cambios que hace JavaScript.

+ +

En comparación, View Source es simplemente el código fuente HTML tal como está almacenado en el servidor. El árbol HTML de tus DevTools muestra exactamente lo que el navegador representa en un momento dado, y te da una idea de lo que sucede en realidad.

+ +

Inspección del CSS aplicado

+ +

Selecciona un elemento de tu página, ya sea haciendo clic con el botón derecho o pulsando la tecla ctrl para seleccionar la opción Inspect, o seleccionándolo del árbol HTML que hay a la izquierda de la pantalla de la interfaz DevTools. Selecciona el elemento con la clase box1; este es el primer elemento de la página con una caja alrededor.

+ +

La página de ejemplo para este tutorial con DevTools abiertas.

+ +

Si observasla  vista de reglas, que está a la derecha de tu HTML, deberías poder ver las propiedades y los valores CSS aplicados sobre ese elemento. Verás las reglas aplicadas directamente a la clase box1 y también el CSS que la caja hereda de su elemento padre, en este caso <body>. Esto es útil para cuando ves que se aplica un CSS que no esperabas. Tal vez se esté heredando de un elemento padre y necesites añadir una regla para sobrescribirlo en el contexto de este elemento.

+ +

También es útil la capacidad de expandir las propiedades abreviadas. En nuestro ejemplo se usa la abreviación margin.

+ +

Haz clic en la pequeña flecha para expandir la vista, que muestra las diferentes propiedades sin abreviar y sus valores.

+ +

Puedes activar y desactivar los valores en la vista de reglas, cuando ese panel esté activo; si mantienes el ratón sobre él, aparecerán casillas de verificación. Desmarca la casilla de verificación de una regla, por ejemplo border-radius, y el CSS dejará de aplicarse.

+ +

Puedes usar esto para hacer una comparación entre A y B, decidir si algo se ve mejor con una regla aplicada o sin aplicar, y también para ayudar a depurarlo. Por ejemplo, si un diseño falla e intentas determinar qué propiedad causa el problema.

+ +

Editar valores

+ +

Además de activar y desactivar las propiedades, puedes editar sus valores. ¿Quieres ver si quizá otro color se ve mejor, o deseas modificar algún tamaño? Las DevTools pueden ahorrarte mucho tiempo a la hora de editar una hoja de estilo y volver a cargar la página.

+ +

Selecciona box1 y haz clic en la muestra (el pequeño círculo de color) que muestra el color aplicado al borde. Se abrirá un selector de color y puedes probar con colores diferentes, que se actualizarán en tiempo real en la página. De manera similar puedes cambiar el ancho o el estilo del borde.

+ +

Ventana de aplicación de estilos de DevTools con un selector de color abierto.

+ +

Añadir una propiedad nueva

+ +

Puedes añadir propiedades usando las DevTools. ¿Te has dado cuenta de que quizá no quieres que tu caja herede el tamaño de letra del elemento <body> y quieres establecer tu propio tamaño de letra específico? Pruébalo en DevTools antes de añadirlo a tu archivo CSS.

+ +

Puedes hacer clic en la llave de cierre de la regla para comenzar a introducir una declaración nueva, y en ese momento puedes comenzar a escribir la nueva propiedad y DevTools te mostrará una lista de propiedades coincidentes que se completará automáticamente. Después de seleccionar font-size, introduce el valor que deseas probar. También puede hacer clic en el botón + para añadir una regla adicional con el mismo selector y tus reglas nuevas.

+ +

La ventana DevTools, que añade una propiedad nueva a las reglas, con el autocompletado para font-open

+ +
+

Nota: También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en Examinar y editar CSS.

+
+ +

Comprender el modelo de cajas

+ +

En artículos anteriores hemos expuesto el modelo de cajas, y el hecho de que tengamos un modelo de cajas alternativo que cambia la forma en que se calcula el tamaño de los elementos en función del tamaño que les asignas, más el relleno y los bordes. Las DevTools realmente pueden ayudarte a comprender cómo se calcula el tamaño de un elemento.

+ +

El panel de disposición muestra un diagrama del modelo de cajas en el elemento seleccionado, junto con una descripción de las propiedades y los valores que cambian la forma en que el elemento se presenta. Esto incluye una descripción de las propiedades que puedes no haber utilizado explícitamente en el elemento, pero que tienen valores iniciales establecidos.

+ +

En esta ventana, una de las propiedades que se detallan es la propiedad box-sizing, que controla qué modelo de cajas usa el elemento.

+ +

Compara las dos cajas con las clases box1 y box2. Ambas tienen el mismo ancho aplicado (400 px), sin embargo, box1 es visualmente más ancha. En la ventana de diseño puedes ver que usa content-box. Este es el valor que toma el tamaño que asignas al elemento y luego añade el área de relleno y el ancho del borde.

+ +

El elemento con una clase box2 usa border-box, por lo que aquí el área de relleno y el borde se restan del tamaño que has asignado al elemento. Esto significa que el espacio que la caja ocupa en la página es el tamaño exacto que se ha especificado, en nuestro caso width: 400px.

+ +

La ventana de diseño de DevTools

+ +
+

Nota: Descubre más en Examinar e inspeccionar el modelo de cajas.

+
+ +

Resolver problemas de especificidad

+ +

A veces, durante el desarrollo, pero en particular cuando necesitas editar el CSS de un sitio ya publicado, te resultará difícil conseguir que se aplique un determinado CSS. No importa lo que hagas, el elemento simplemente no parece aceptar tu CSS. Lo que suele suceder aquí es que un selector más específico anula tus cambios, y en este caso DevTools te será de gran ayuda.

+ +

En nuestro archivo de ejemplo hay dos palabras incluidas en un elemento <em>. Uno se muestra en color naranja y el otro en rosa. En el CSS hemos aplicado:

+ +
em {
+  color: hotpink;
+  font-weight: bold;
+}
+ +

Sin embargo, un poco más arriba en la hoja de estilo hay una regla con un selector .special:

+ +
.special {
+  color: orange;
+}
+ +

Como recordarás del artículo sobre cascada y herencia, en que hablamos sobre la especificidad, los selectores de clase son más específicos que los selectores de elemento, por lo que este es el valor que se aplica. DevTools puede ayudarte a encontrar estos problemas, especialmente si la información está oculta en algún lugar de una extensa hoja de estilo.

+ +

Inspecciona <em> con la clase .special y DevTools te mostrará que el naranja es el color que se aplica, y también te muestra la propiedad color aplicada al em tachado. Aquí puedes ver que la clase anula el selector de elemento.

+ +

Selecciona un em y mira en DevTools qué solapa el color.

+ +

Descubre más sobre las DevTools de Firefox

+ +

Hay mucha información aquí en MDN sobre las DevTools de Firefox. Echa un vistazo a la sección principal de las DevTools, y consulta las Guías prácticas para obtener información más detallada sobre las cosas que hemos expuesto brevemente en este artículo.

+ +

Problemas al depurar en CSS

+ +

Las DevTools pueden ser de gran ayuda a la hora de resolver problemas con el CSS, pero ¿cómo resuelves una situación en la que el CSS no se comporta como esperas? Los siguientes pasos deberían ayudarte.

+ +

Aléjate del problema

+ +

Cualquier problema de código puede ser frustrante, especialmente los problemas de CSS, porque a menudo no recibes un mensaje de error que buscar en línea para ayudarte a encontrar una solución. Si te sientes frustrado, aléjate del problema por un tiempo: sal a caminar, tómate una copa, habla con un compañero de trabajo o trabaja en otra cosa por un tiempo. A veces, la solución aparece mágicamente cuando dejas de pensar en el problema, e incluso si no llega, trabajar en ello cuando te sientas más fresco te será mucho más fácil.

+ +

¿Tu HTML y CSS son válidos?

+ +

Los navegadores esperan que tu CSS y HTML estén escritos correctamente, sin embargo, los navegadores también son muy indulgentes y harán todo lo posible para mostrar tus páginas web incluso si tiene errores en el marcado o en la hoja de estilo. Si tienes errores en el código, el navegador trata de adivinar lo que quieres decir, y podría tomar una decisión diferente a lo que tenías en mente. Además, dos navegadores diferentes pueden hacer frente al problema de dos maneras diferentes. Por lo tanto, un buen primer paso es pasar tu HTML y CSS por un validador, que detectar cualquier error.

+ + + +

¿La propiedad y el valor son compatibles con el navegador?

+ +

Los navegadores simplemente ignoran el CSS que no entienden. Si la propiedad o el valor que utilizas no es compatible con el navegador en el que lo pruebas, no se romperá nada, pero ese CSS no se aplicará. Las DevTools en general destacan de alguna manera las propiedades y los valores que no son compatibles. En la captura de pantalla siguiente, el navegador no admite el valor de subcuadrícula {{cssxref ("grid-template-columns")}}.

+ +

Imagen de las DevTools del navegador con la cuadrícula-plantilla-columnas: subcuadrícula tachada porque el valor de la subcuadrícula no es compatible.

+ +

También puedes echar un vistazo a las tablas de compatibilidad de navegadores en la parte inferior de cada página de propiedades del proyecto MDN. Te muestran la compatibilidad de cada navegador para esa propiedad, a menudo desglosado si hay compatibilidad para un uso de la propiedad y no para otros. La tabla siguiente muestra los datos de compatibilidad para la propiedad {{cssxref ("shape-outside")}}.

+ +

{{compat("css.shape-outside")}}

+ +

¿Hay algo más que anule tu CSS?

+ +

Aquí es donde la información que has aprendido sobre la especificidad será muy útil. Si tienes algo más específico que anula lo que intentas hacer, puedes entrar en un juego muy frustrante de tratar de resolverlo sin saber qué tienes que resolver. Sin embargo, como hemos dicho, las DevTools te mostrarán qué CSS se ha aplicado y así puedes averiguar cómo hacer que el nuevo selector sea lo suficientemente específico como para anularlo.

+ +

Haz un caso de prueba reducido del problema

+ +

Si el problema no se resuelve con los pasos anteriores, deberás investigar un poco más. Lo mejor que puedes hacer en este momento es crear lo que se conoce como un caso de prueba reducido. Ser capaz de «reducir un problema» es una habilidad muy útil. Te ayudará a encontrar problemas en tu propio código y en el de tus colegas, y también te permitirá informar de errores y solicitar ayuda de manera más efectiva.

+ +

Un caso de prueba reducido es un ejemplo de código que muestra el problema de la manera más simple posible, sin contenido ni estilo circundante. Esto significa a menudo sacar el código problemático de tu diseño para hacer un pequeño ejemplo que solo muestre ese código o característica.

+ +

Para crear un caso de prueba reducido:

+ +
    +
  1. Si tu marcado se genera dinámicamente, por ejemplo desde un CMS, crea una versión estática de la salida que muestre el problema. Un sitio para compartir código como CodePen es útil para alojar casos de prueba reducidos, porque son accesibles en línea y puedes compartirlos fácilmente con tus colegas. Puedes comenzar por hacer un View Source de la página y copiar el HTML en CodePen, luego toma cualquier CSS y JavaScript relevante e inclúyelo también. Después de eso, puedes verificar si el problema sigue ahí.
    2. +
  2. Si eliminar el JavaScript no soluciona el problema, no incluyas el JavaScript. Si eliminar el JavaScript hace desaparecer el problema, elimina la mayor cantidad de JavaScript que puedas; deja solo las causas del problema.
    3. +
  3. Elimina cualquier HTML que no contribuya al problema. Elimina componentes o incluso elementos principales del diseño. Nuevamente, intenta reducir al mínimo la cantidad de código que aún muestra el problema.
    4. +
  4. Elimina cualquier CSS que no afecte al problema.
    5. +
+ +

En el proceso, puedes descubrir qué causa el problema, o al menos ser capaz de ponerlo o quitarlo al eliminar algo específico. Vale la pena añadir algunos comentarios a tu código a medida que vas descubriendo cosas. Si tienes que pedir ayuda, estos comentarios indicarán a la persona que te ayuda lo que ya has intentado. Esto puede proporcionarte bastante información para permitirte buscar posibles problemas por sondeo y soluciones alternativas.

+ +

Si todavía tienes dificultades para solucionar el problema, tener un caso de prueba reducido te ofrece algo con lo que pedir ayuda, publicarlo en un foro o mostrarlo a un compañero de trabajo. Es mucho más probable que obtengas ayuda si antes de pedir la ayuda muestras que has hecho el trabajo de reducir el problema e identificar dónde sucede exactamente. Un desarrollador más experimentado va a poder detectar el problema con rapidez y orientarte en la dirección correcta, y aunque no sea así, echarle un vistazo rápido a tu caso de prueba reducido y, con suerte, ofrecerte al menos algo de ayuda.

+ +

En el caso de que tu problema sea en realidad un error en un navegador, también puedes usar un caso de prueba reducido para presentar un informe de error al proveedor del navegador correspondiente (por ejemplo, en el sitio de Bugzilla de Mozilla).

+ +

A medida que adquieras más experiencia con CSS, descubrirás que vas adquiriendo rapidez para descubrir de dónde vienen los problemas. Sin embargo, incluso los más experimentados a veces nos preguntamos qué pasa. Adoptar un enfoque metódico, hacer un caso de prueba reducido y explicar el problema a otra persona suele dar un buen resultado para encontrar una solución.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html b/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html new file mode 100644 index 0000000000..81759abccc --- /dev/null +++ b/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html @@ -0,0 +1,129 @@ +--- +title: Dimensionar elementos en CSS +slug: Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
+ +

En los diversos artículos vistos hasta ahora, has aprendido varias formas de dimensionar elementos en una página web utilizando CSS. Es importante que comprendas qué tamaños van a tener los diferentes elementos de tu diseño, y en este artículo vamos a resumir las diversas formas en que puedes asignar tamaños a los elementos con CSS y definir algunos términos relativos al dimensionado que te ayudarán en el futuro.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Comprender las diferentes formas en que podemos dimensionar las cosas en CSS.
+ +

El tamaño natural o intrínseco de las cosas

+ +

Los elementos HTML tienen un tamaño natural, establecido antes de que se vean afectados por cualquier código CSS. Un ejemplo sencillo es una imagen. Una imagen tiene un ancho y una altura que están definidos en el archivo de imagen que está incrustando en la página. Este tamaño se describe como el tamaño intrínseco, que proviene de la imagen misma.

+ +

Si colocas una imagen en una página y no cambias su altura y ancho, ya sea usando atributos en la etiqueta <img> o el CSS, se mostrará con ese tamaño intrínseco. En el ejemplo siguiente le hemos dado un borde a la imagen para que puedas ver la extensión del archivo.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}

+ +

Sin embargo, un elemento {{htmlelement ("div")}} vacío no tiene tamaño propio. Si añades un elemento {{htmlelement ("div")}} sin contenido a tu HTML, entonces debes darle un borde como hemos hecho con la imagen y verás una línea en la página. Se trata del borde del elemento replegado sobre sí mismo porque no hay contenido para mantenerlo abierto. En nuestro ejemplo siguiente, ese borde se extiende por todo el ancho del contenedor, porque es un elemento de nivel de bloque, un comportamiento con el que deberías comenzar a familiarizarte. No tiene altura (o tamaño en la dimensión de bloque) porque no hay contenido.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}

+ +

En el ejemplo anterior, añade texto al elemento vacío. Ahora el borde contiene ese texto porque la altura del elemento queda definida por el contenido. Por lo tanto, el tamaño de este elemento <div> en la dimensión del bloque proviene del tamaño del contenido. Nuevamente, este es el tamaño intrínseco del elemento: su tamaño está definido por su contenido.

+ +

Configurar un tamaño específico

+ +

Por supuesto, podemos dar a los elementos de nuestro diseño un tamaño específico. Cuando asignas un tamaño a un elemento (al cual deberá ajustarse el contenido del elemento) nos referimos a este como tamaño extrínseco. Toma nuestro elemento <div> del ejemplo anterior: podemos darle valores específicos como {{cssxref ("width")}} y {{cssxref ("height")}}, y así tendrá ese tamaño sea cual sea su contenido. Como descubrimos en nuestro artículo anterior sobre el desbordamiento, una altura establecida puede causar el desbordamiento del contenido si hay más contenido del que cabe en el elemento.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}

+ +

Debido a este problema de desbordamiento, fijar la altura de los elementos con longitudes o porcentajes es algo que debemos hacer con mucho cuidado en la web.

+ +

El uso de porcentajes

+ +

En muchos sentidos, los porcentajes actúan como unidades de longitud, y como discutimos en el artículo sobre valores y unidades, a menudo se pueden usar indistintamente con longitudes. Cuando usas un porcentaje, debes tener claro de qué es porcentaje. En el caso de una caja dentro de otro contenedor, si a la caja secundaria le asignas un porcentaje al ancho, será un porcentaje del ancho del contenedor principal.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}

+ +

Esto se debe a que los porcentajes se refieren al tamaño del bloque contenedor. Sin un porcentaje aplicado, nuestro elemento <div> ocuparía el 100% del espacio disponible, porque es un elemento de nivel de bloque. Si le damos un ancho porcentual, este se convierte en un porcentaje del espacio que normalmente ocuparía.

+ +

Porcentaje de márgenes y áreas de relleno

+ +

Si configuras margins y padding como un porcentaje, puede que observes un comportamiento extraño. En el ejemplo siguiente hay una caja. Hemos asignado a la caja interna un margen ({{cssxref ("margin")}}) del 10% y una área de relleno ({{cssxref ("padding")}}) del 10%. El área de relleno y el margen de la parte superior e inferior de la caja son del mismo tamaño que el margen de la izquierda y de la derecha.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}

+ +

Podrías esperar, por ejemplo, que el porcentaje de los márgenes superior e inferior sea un porcentaje de la altura del elemento, y el porcentaje de los márgenes izquierdo y derecho sea un porcentaje del ancho del elemento. Sin embargo, ¡este no es el caso!

+ +

Cuando utilizas el margen y el área de relleno en porcentajes, el valor se calcula a partir del tamaño en línea del elemento, es decir, el ancho del elemento cuando se trabaja en un lenguaje horizontal. En nuestro ejemplo, todos los márgenes y el área de relleno son del 10% del ancho del elemento. Esto significa que puedes tener márgenes y relleno alrededor de la caja del mismo tamaño. Este es un hecho que vale la pena recordar si utilizas porcentajes de esta manera.

+ +

Tamaños mínimo y máximo

+ +

Además de asignar a las cosas un tamaño fijo, podemos pedirle al CSS que asigne a un elemento un tamaño mínimo o máximo. Si tienes una caja que puede contener una cantidad variable de contenido y deseas que tenga siempre al menos una altura determinada, puedes establecer la propiedad {{cssxref ("min-height")}}. La caja siempre tendrá al menos esta altura, pero crecerá si hay más contenido del que la caja puede contener.

+ +

En el ejemplo siguiente puedes ver dos cuadros, ambos con una altura definida de 150 píxeles. La caja de la izquierda tiene 150 píxeles de alto; la de la derecha contiene contenido que necesita más espacio, por lo que su tamaño supera los 150 píxeles.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}

+ +

Esto es muy útil para trabajar con cantidades de contenido variables y asimismo evitar desbordamientos.

+ +

Un uso común de {{cssxref ("max-width")}} es para reducir el tamaño de las imágenes si no hay suficiente espacio para mostrarlas en su ancho intrínseco, al asegurarte de que no serán mayores que ese ancho.

+ +

A modo de ejemplo, si para una imagen tienes que establecer width: 100% y su ancho intrínseco es menor que su contenedor, la imagen se verá obligada a expandirse y agrandarse, y se pixelará. Si su ancho intrínseco es mayor que su contenedor, se desbordará. No es probable que desees que suceda ninguno de estos casos.

+ +

Si en lugar de ello usas max-width: 100%, la imagen puede encogerse con respecto a su tamaño intrínseco, pero no se agranda más allá del 100% de su tamaño.

+ +

En el ejemplo siguiente hemos utilizado la misma imagen dos veces. La primera imagen tiene width: 100% y está en un contenedor que es más grande, por lo que se extiende hasta el ancho del contenedor. La segunda imagen tiene max-width: 100% y, por lo tanto, no se estira para llenar el recipiente. La tercera caja contiene la misma imagen de nuevo, también con max-width: 100%; pero en este caso puedes ver cómo se ha reducido para encajar en la caja.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}

+ +

Esta técnica se utiliza para dar a las imágenes una respuesta adaptativa, de modo que se reduzcan adecuadamente cuando se visualizan en un dispositivo más pequeño. Sin embargo, no es conveniente usar esta técnica para cargar imágenes demasiado grandes y luego reducirlas en el navegador. Las imágenes deben tener el tamaño adecuado, no deben ser más grandes de lo que sea necesario para el tamaño más grande que se muestran en el diseño. Descargar imágenes muy grandes ralentizará tu sitio y puede costarles más dinero a los usuarios si tienen una conexión tarifada.

+ +
+

Nota: Obtén más información sobre las técnicas adaptativas para las imágenes.

+
+ +

Unidades de ventana gráfica

+ +

La ventana gráfica es el área visible de tu página en el navegador que utilizas para ver un sitio, y también tiene un tamaño. En CSS hay unidades que asociadas con el tamaño de la ventana gráfica: las unidades vw para el ancho y vh para la altura. Con estas unidades puedes establecer tamaños relativos a la ventana gráfica del usuario.

+ +

1vh es igual al 1% de la altura de visualización, y 1vw es igual al 1% de la anchura. Puedes usar estas unidades para dimensionar cajas, pero también texto. En el ejemplo siguiente hay un cuadro que tiene un tamaño de 20vh y 20vw. La caja contiene una letra A, a la que se le ha dado un valor para {{cssxref ("font-size")}} de 10vh.

+ +

{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}

+ +

Si cambias los valores vh y vw, cambia el tamaño de la caja o de la letra; cambiar el tamaño de la ventana gráfica también cambia esos tamaños porque están dimensionados en relación con el de la ventana gráfica. Para ver el cambio del ejemplo cuando cambias el tamaño de la ventana gráfica, debes cargar el ejemplo en una ventana nueva del navegador, que pueda cambiar de tamaño (ya que tu ventana gráfica es el <iframe> incrustado que contiene el ejemplo que se muestra arriba). Abre el ejemplo, cambia el tamaño de la ventana del navegador y observa lo que ocurre con el tamaño de la caja y el texto.

+ +

Cambiar los tamaños según la ventana gráfica puede ser útil en tus diseños. Por ejemplo, si deseas mostrar una sección principal a pantalla completa antes del resto del contenido, haz que esa parte de tu página de 100vh empuje el resto del contenido por debajo de la ventana gráfica, de modo que solo aparezca cuando desplacen los contenidos del documento con la barra de desplazamiento.

+ +

Resumen

+ +

Este artículo te ha dado un resumen de algunos problemas clave con los que puedes encontrarte al dimensionar cosas en la web. Cuando llegues al artículo Compaginar con CSS, el tamaño va a ser un aspecto muy importante para dominar los diferentes métodos de compaginación, por lo que, antes de continuar, vale la pena comprender los conceptos que hemos expuesto en este artículo.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html b/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html new file mode 100644 index 0000000000..dbc0d644f8 --- /dev/null +++ b/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html @@ -0,0 +1,343 @@ +--- +title: El modelo de caja +slug: Learn/CSS/Building_blocks/El_modelo_de_caja +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear elementos con otros elementos. En este artículo, echaremos un vistazo más de cerca al modelo de cajas en CSS con el que vas a poder crear diseños de compaginación más complejos con una comprensión de cómo funciona y la terminología relacionada.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con CSS).
Objetivo:Aprender sobre el modelo de cajas en CSS, en qué consiste el modelo de cajas y cómo cambiar al modelo alternativo.
+ +

Cajas en bloque y en línea

+ +

En CSS, en general, hay dos tipos de cajas: cajas en bloque y cajas en línea. Estas características se refieren al modo como se comporta la caja en términos de flujo de página y en relación con otras cajas de la página:

+ +

Si una caja se define como un bloque, se comportará de las maneras siguientes:

+ + + +

A menos que decidamos cambiar el tipo de visualización a en línea, elementos como los encabezados (por ejemplo, <h1>) y todos los elementos <p> usan por defecto block como tipo de visualización externa.

+ +

Si una caja tiene una visualización externa de tipo inline, entonces:

+ + + +

El elemento <a>, que se utiliza para los enlaces, y los elementos <span>, <em> y <strong> son ejemplos de elementos que se muestran en línea por defecto.

+ +

El tipo de caja que se aplica a un elemento está definido por los valores de propiedad {{cssxref ("display")}}, como block y inline, y se relaciona con el valor externo (outer) de visualización (display).

+ +

Aparte: tipos de visualización interna y externa

+ +

En este punto, será mejor que también expliquemos los tipos de visualización interna y externa. Como se mencionó anteriormente, las cajas en CSS tienen un tipo de visualización externa, que define si se trata de una caja en bloque o en línea.

+ +

Sin embargo, las cajas también tienen un tipo de visualización interna, que determina cómo se disponen los elementos dentro de esa caja. De forma predeterminada, los elementos dentro de una caja se presentan en flujo normal, lo que significa que se comportan como otros elementos de tipo en bloque o en línea (como se explicó anteriormente).

+ +

Sin embargo, podemos cambiar el tipo de visualización interna utilizando valores de display, como flex. Si en un elemento establecemos display: flex;, el tipo de visualización externa es de tipo bloque (block), pero el tipo de visualización interna cambia a flexible (flex). Cualquier elemento que sea hijo directo de esta caja pasará a comportarse como un elemento de tipo flex, de acuerdo con las reglas que se establecen en la especificación de Flexbox, tema que veremos más adelante.

+ +
+

Nota: Para obtener más información acerca de los valores de visualización y el modo como funcionan las cajas en las disposiciones en bloque y en línea, echa un vistazo a la guía Disposiciones en bloque y en línea de MDN.

+
+ +

A medida que vayas aprendiendo más detalles sobre el diseño CSS, te irás encontrando con el valor flex y con otros valores internos que puedan presentar tus cajas, por ejemplo, grid.

+ +

Sin embargo, la disposición en bloque y en línea es la forma predeterminada cómo se comportan las cosas en la web; como ya dijimos, a veces esto se conoce como flujo normal, porque nuestras cajas se dispondrán en bloque o en línea, si no reciben ninguna otra instrucción.

+ +

Ejemplos de diferentes tipos de visualización

+ +

Sigamos adelante y veamos algunos ejemplos. A continuación tenemos tres elementos HTML diferentes, todos con visualización externa de tipo block. El primero es un párrafo, que tiene un borde añadido con CSS. El navegador representa esto como una caja en bloque, por lo que el párrafo comienza en una línea nueva y se expande por todo el ancho disponible.

+ +

El segundo es una lista, que se presenta usando display: flex. Esto establece una disposición flexible para los elementos que están dentro del contenedor; sin embargo, la lista en sí misma es una caja que se comporta en bloque y, como el párrafo, se expande por todo el ancho del contenedor y fuerza un salto de línea al llegar al final de línea.

+ +

Debajo hay un párrafo a nivel de bloque, dentro del cual hay dos elementos <span>. Estos elementos normalmente serían de tipo inline; sin embargo, uno de los elementos tiene una clase de bloque, y lo hemos establecido como display: block.

+ +

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

+ +

Podemos ver cómo se comportan los elementos inline en el ejemplo siguiente. Los elementos <span> del primer párrafo están en línea de manera predeterminada y, por lo tanto, no fuerzan ningún salto de línea.

+ +

También hay un elemento <ul> que se establece como display: inline-flex, que crea una caja con un comportamiento de tipo en línea alrededor de algunos elementos de tipo flex.

+ +

Finalmente, hay dos párrafos configurados con display: inline. El contenedor flexible en línea y los párrafos fluyen todos juntos en línea, en lugar de dividirse en líneas nuevas como lo harían si se mostraran como elementos de bloque.

+ +

En el ejemplo puedes cambiar display: inline por display: block o display: inline-flex y por display: flex para alternar entre estos modos de visualización.

+ +

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

+ +

En artículos posteriores encontrarás cosas como el diseño flexible. El aspecto clave a recordar aquí es que cambiar el valor de la propiedad display puede cambiar entre el modo de visualización exterior en bloque y en línea de una caja, que cambia la forma en que se presenta junto con otros elementos en la disposición en pantalla.

+ +

En el resto de este artículo, nos concentraremos en el tipo de visualización externa.

+ +

¿Qué es el modelo de cajas CSS?

+ +

El modelo de cajas CSS completo se aplica a cajas que presentan comportamiento en bloque; las cajas con comportamiento en línea solo usan una parte del comportamiento definido en el modelo de cajas. El modelo define cómo funcionan juntas las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página. Para complicarlo un poco más, hay un modelo de cajas estándar y un modelo de cajas alternativo.

+ +

Partes de una caja

+ +

Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:

+ + + +

El diagrama siguiente muestra estas capas:

+ +

Diagrama del modelo de cajas

+ +

El modelo de cajas CSS estándar

+ +

En el modelo de cajas estándar, cuando estableces los atributos width y height para una caja, defines el ancho y el alto del contenido de la caja. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.

+ +

Si suponemos que la caja tiene el CSS siguiente, que establece los valores para las propiedades width, height, margin, border, y padding:

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

El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.

+ +

Mostrar el tamaño de la caja cuando se usa el modelo de cajas estándar.

+ +
+

Nota: El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.

+
+ +

El modelo de cajas CSS alternativo

+ +

Podrías pensar que es más bien incómodo tener que sumar el borde y el área de relleno para obtener el tamaño real de la caja, ¡y tienes razón! Por este motivo, CSS introdujo un modelo de caja alternativo algún tiempo después del modelo de cajas estándar. Con este modelo, cualquier ancho es el ancho de la caja visible en la página, por lo tanto, el ancho del área de contenido es ese ancho menos el ancho para el relleno y el borde. El mismo CSS que hemos usado antes daría entonces el resultado siguiente (ancho = 350 px, altura = 150 px).

+ +

Mostrar el tamaño de la caja cuando se usa el modelo de cajas alternativo.

+ +

Por defecto, los navegadores usan el modelo de cajas estándar. Si deseas activar el modelo de cajas alternativo para un elemento, hazlo configurando box-sizing: border-box. Con ello, le dices al navegador que tome como el borde de la caja el área definida por cualquier tamaño que establezcas.

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

Si quieres que todos tus elementos usen el modelo de cajas alternativo (opción común entre los desarrolladores) debes establecer la propiedad box-sizing en el elemento <html>. Luego debes configurar todos los demás elementos para que hereden ese valor, como se ve en el fragmento de código siguiente. Si deseas comprender qué hay detrás, consulta el artículo de CSS-Tricks sobre el tamaño de las cajas.

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

Nota: Un dato curioso es que Internet Explorer usaba por defecto el modelo de cajas alternativo, y no disponía de ningún mecanismo para cambiarlo.

+
+ +

Jugar con los modelos de cajas

+ +

En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase .box, lo que les da los mismos atributos width, height, margin, border y padding. La única diferencia es que la segunda caja se ha configurado para utilizar el modelo de cajas alternativo.

+ +

¿Puedes cambiar el tamaño de la segunda caja (añadiendo CSS a la clase .alternate) para que su anchura y altura coincidan con las de la primera caja?

+ +

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

+ +
+

Nota: Puedes encontrar la solución aquí.

+
+ +

Utilizar las DevTools del navegador para ver el modelo de cajas

+ +

Las herramientas del desarrollador de tu navegador pueden facilitar la comprensión del modelo de cajas. Si inspeccionas un elemento con las DevTools de Firefox, puedes ver el tamaño del elemento más su margen, área de relleno y borde. Inspeccionar un elemento de esta manera es un modo excelente de descubrir si tu caja es en realidad del tamaño que crees que es.

+ +

Inspeccionar el modelo de cajas de un elemento utilizando Firefox DevTools

+ +

Márgenes, relleno y bordes

+ +

Ya has visto las propiedades {{cssxref ("margin")}}, {{cssxref ("padding")}} y {{cssxref ("border")}} que usamos en el ejemplo anterior. Las propiedades que hemos usado en ese ejemplo son propiedades abreviadas y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.

+ +

Vamos a explorar estas propiedades más detalladamente.

+ +

Margen

+ +

El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.

+ +

Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad {{cssxref ("margin")}}, o cada lado individualmente usando las propiedades equivalentes sin abreviar:

+ + + +

En el ejemplo siguiente, cambia los valores de margen para ver cómo se empuja la caja debido al espacio que el margen crea o se elimina (si es un margen negativo) entre este elemento y el elemento que lo contiene.

+ +

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

+ +

Colapso del margen

+ +

Un punto clave a la hora de entender los márgenes es el concepto de colapso del margen. Si tienes dos elementos cuyos márgenes se tocan, esos márgenes se combinan para convertirse en un solo margen, cuyo tamaño es el del margen más grande.

+ +

En el ejemplo siguiente hay dos párrafos. El párrafo superior tiene un atributo margin-bottom de 50 píxeles. El segundo párrafo tiene un atributo margin-top de 30 píxeles. Los márgenes colapsan, por lo que el margen real entre las cajas es de 50 píxeles, y no el total de ambos márgenes.

+ +

Pruébalo ajustando el atributo margin-top del segundo párrafo a 0. El margen visible entre los dos párrafos no cambiará, sino que conservará los 50 píxeles fijados en el atributo bottom-margin del primer párrafo.

+ +

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

+ +

Hay una serie de reglas que establecen cuándo los márgenes colapsan y cuándo no. Para obtener más información, consulta la página web sobre entender el colapso de márgenes. Por ahora solo debes recordar que el colapso de los márgenes es algo que puede suceder. Si creas un espacio con márgenes y no obtienes el espacio que esperas, probablemente es que se haya producido algún colapso de márgenes.

+ +

Bordes

+ +

El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.

+ +

Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.

+ +

Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad {{cssxref ("border")}}.

+ +

Para establecer las propiedades de cada lado de forma individual, puedes utilizar:

+ + + +

Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:

+ + + +

Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:

+ + + +

En el ejemplo siguiente, hemos utilizado varios ejemplos de la lista anterior para crear bordes. Juega con las diferentes propiedades para comprobar que entiendes cómo funcionan. Las páginas de MDN sobre las propiedades de los bordes te proporcionan información sobre los diferentes estilos entre los que puedes elegir para los bordes.

+ +

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

+ +

Relleno

+ +

El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.

+ +

Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad {{cssxref ("padding")}}, o para cada lado uno de los lados usando las propiedades equivalentes:

+ + + +

Si cambias los valores para el elleno en la clase .box del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja.

+ +

También puedes cambiar el relleno en la clase .container, que abrirá el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y abrirá espacio entre su borde y lo que esté dentro del elemento.

+ +

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

+ +

El modelo de cajas y las cajas en línea

+ +

Todo lo anterior se aplica por completo a las cajas en bloque. Algunas de las propiedades también pueden aplicarse a las cajas en línea, como las que crea un elemento <span>.

+ +

En el ejemplo siguiente hay un elemento <span> dentro de un párrafo al que hemos aplicado las propiedades width, height, margin, border, y padding Puedes ver que la anchura y la altura se ignoran. Se respetan el margen, el relleno y el borde, pero no cambian la relación de otro contenido con respecto a nuestra caja en línea, por lo que el relleno y el borde se superponen a otras palabras en el párrafo.

+ +

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

+ +

El uso de display: inline-block

+ +

Hay un valor especial de display que proporciona un punto medio entre inline y block. Esto es útil para situaciones en las que no deseas que un elemento fuerce un salto de línea, pero sí deseas que se respeten las propiedades width y height para evitar superposiciones como la que se ve arriba.

+ +

Un elemento con display: inline-block conforma un subconjunto de los elementos en bloque que ya conocemos:

+ + + +

Sin embargo, no se fuerza un salto de línea, y solo se hace más grande que su contenido si añades las propiedades width y height explícitamente.

+ +

En el ejemplo siguiente hemos añadido display: inline-block a nuestro elemento <span>. Cámbialo por display: block o elimina la línea para ver la diferencia entre ambos modelos de visualización.

+ +

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

+ +

Esto puede ser útil cuando deseas dar a un enlace un área de impacto más grande añadiendo padding. <a> es un elemento en línea como <span>; puedes usar display: inline-block para configurar el área de relleno para facilitar al usuario hacer clic en el enlace.

+ +

Esto se ve con bastante frecuencia en las barras de navegación. La navegación siguiente se muestra en una fila usando flexbox y hemos añadido una área de relleno al elemento <a> porque queremos poder cambiar su color de fondo (background-color) cuando se pasa el ratón por encima de <a>. El área de relleno parece superponerse al borde del elemento <ul>. Esto se debe a que <a> es un elemento en línea.

+ +

Añade display: inline-block a la regla con el selector .links-list a y verás cómo se soluciona este problema, al hacer que otros elementos respeten el área de relleno.

+ +

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

+ +

Pon a prueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que has retenido esa información en Test your skills: The Box Model.

+ +

Resumen

+ +

Eso es lo que hay que entender sobre el modelo de cajas. Es posible que en el futuro desees volver a este artículo si alguna vez te lías con los tamaños de las cajas en la disposición de tu página web.

+ +

En el artículo siguiente veremos cómo se pueden usar los fondos y bordes para hacer que tus simples cajas presenten un aspecto más interesante.

+ +

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

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/fondos_y_bordes/index.html b/files/es/learn/css/building_blocks/fondos_y_bordes/index.html new file mode 100644 index 0000000000..0de93e1eb1 --- /dev/null +++ b/files/es/learn/css/building_blocks/fondos_y_bordes/index.html @@ -0,0 +1,306 @@ +--- +title: Fondos y bordes +slug: Learn/CSS/Building_blocks/Fondos_y_bordes +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
+ +

En este artículo, veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Añadir degradados, imágenes de fondo o redondear esquinas; los fondos y los bordes son la solución para una gran cantidad de cuestiones de estilo en CSS.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción al HTML) y nociones de CSS (véase Primeros pasos con el CSS).
Objetivo:Aprender a diseñar el fondo y los bordes de las cajas.
+ +

Aplicar estilo a los fondos en CSS

+ +

La propiedad {{cssxref ("background")}} de CSS es una propiedad abreviada de una serie de propiedades de fondo que vamos a ver en este artículo. Si descubres una propiedad de fondo compleja en una hoja de estilo, puede parecer un poco difícil de entender porque pueden estarse pasando muchos valores a la vez.

+ +
.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} 
+
+ +

Más adelante en este tutorial regresaremos a cómo funcionan las propiedades abreviadas, pero primero echemos un vistazo a las diferentes cosas que puedes hacer con los fondos en CSS, a partir de observar las propiedades de fondo individuales.

+ +

Los colores de fondo

+ +

La propiedad {{cssxref ("background-color")}} define el color de fondo de cualquier elemento en CSS. La propiedad admite cualquier <color> válido. Un color de fondo (background-color) se extiende por debajo del contenido y el relleno del elemento.

+ +

En el ejemplo siguiente hemos utilizado varios valores de color para añadir un color de fondo a la caja, a un encabezado y a un elemento {{htmlelement ("span")}}.

+ +

Juega un poco con ellos; usa cualquier valor <color> disponible.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}

+ +

Las imágenes de fondo

+ +

La propiedad {{cssxref ("background-image")}} permite visualizar una imagen de fondo en un elemento. En el ejemplo siguiente hay dos cajas: una tiene una imagen de fondo que es más grande que la caja misma, la otra tiene una imagen pequeña en forma de estrella.

+ +

Este ejemplo demuestra dos cosas sobre las imágenes de fondo. De forma predeterminada, la imagen grande no se reduce para ajustarse a la caja, por lo que solo vemos una pequeña esquina de esta, mientras que la imagen pequeña aparece en forma de mosaico hasta llenar la caja. En este caso, la imagen es en realidad una sola estrella.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}

+ +

Si especificas un color de fondo además de una imagen de fondo, la imagen se muestra encima del color de fondo. Añade una propiedad background-color al ejemplo anterior y obsérvalo en acción.

+ +

Controlar background-repeat

+ +

La propiedad {{cssxref ("background-repeat")}} se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son:

+ + + +

Prueba estos valores en el ejemplo siguiente. Hemos establecido el valor no-repeat, así que solo verás una estrella. Prueba los diferentes valores (repeat-x y repeat-y) y observa cuáles son los efectos.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}

+ +

Dimensionar la imagen de fondo

+ +

En el ejemplo anterior hay una imagen grande que aparece recortada porque es más grande que el fondo. En este caso, podríamos usar la propiedad {{cssxref ("background-size")}}, que puede tomar valores de longitud o porcentaje, para ajustar el tamaño de la imagen para que quepa dentro del fondo.

+ +

También puedes utilizar palabras clave:

+ + + +

En el ejemplo siguiente hemos usado la imagen más grande del ejemplo anterior y unidades de longitud para establecer sus dimensiones dentro de la caja. Puedes ver que esto ha distorsionado la imagen.

+ +

Prueba lo siguiente:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}

+ +

Posicionar la imagen de fondo

+ +

La propiedad {{cssxref ("background-position")}} te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es (0,0), y la caja se coloca sobre los ejes horizontal (x) y vertical (y).

+ +
+

Nota: El valor predeterminado de background-position es (0,0).

+
+ +

Los valores de background-position más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical.

+ +

Puedes usar palabras clave como top y right (busca todas las demás en la página sobre la propiedad {{cssxref ("background-position")}}):

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} 
+
+ +

Y también longitudes y porcentajes:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} 
+
+ +

También puedes mezclar valores de palabras clave con longitudes o porcentajes, por ejemplo:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}
+ +

Por último, también puedes usar una sintaxis de 4 valores para indicar una distancia desde ciertos bordes del cuadro: la unidad de longitud en este caso es un desplazamiento del valor que la precede. Entonces, en el CSS siguiente, colocamos el fondo a 20 px desde la parte superior y a 10 px desde la derecha:

+ +
.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+}
+ +

Utiliza el ejemplo siguiente para jugar con estos valores y mover la estrella por la caja.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}

+ +
+

Nota: background-position es una propiedad abreviada de {{cssxref("background-position-x")}} y {{cssxref("background-position-y")}}, que te permiten configurar los diferentes valores de posición del eje por separado.

+
+ +

Degradados de fondo

+ +

Un degradado, cuando se usa para un fondo, actúa como una imagen y también se establece usando la propiedad {{cssxref("background-image")}}.

+ +

Puedes leer más sobre los diferentes tipos de degradados y sobre qué puedes hacer con ellos en la página sobre el tipo de datos <gradient> de MDN. Una forma divertida de jugar con degradados es usar uno de los muchos generadores de degradados CSS que hay disponibles en la web, como este. Puedes crear un degradado y luego copiar y pegar el código fuente que lo genera.

+ +

Prueba algunos degradados diferentes en el ejemplo siguiente. En las dos cajas hay, respectivamente, un degradado lineal que se extiende por toda la caja, y un degradado radial con un tamaño establecido, que por lo tanto se repite.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}

+ +

Múltiples imágenes de fondo

+ +

También es posible poner múltiples imágenes de fondo: puedes especificar múltiples valores background-image para un solo atributo, separados cada uno por una coma.

+ +

Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código.

+ +
+

Nota: Los degradados se pueden mezclar con imágenes de fondo normales.

+
+ +

Las otras propiedades background-* también pueden tener valores múltiples separados por comas, de la misma manera que background-image:

+ +
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;
+ +

Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad background-repeat de image1 será no-repeat. Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores background-position. Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a image3 se le dará el primer valor de posición, y a image4 se le dará el segundo valor de posición.

+ +

Vamos a jugar. En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el tamaño o repite los valores.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}

+ +

Anclaje del fondo

+ +

Otra opción que hay disponible para fondos es especificar cómo se desplazan cuando se desplaza el contenido. Esto se controla con la propiedad {{cssxref ("background-attachment")}}, que puede tomar los valores siguientes:

+ + + +

La propiedad {{cssxref ("background-attachment")}} solo tiene efecto cuando hay contenido por el que puedas desplazarte, por lo que hemos preparado un ejemplo para demostrar las diferencias entre los tres valores: echa un vistazo a background-attachment.html (También puedes consultar el código fuente aquí).

+ +

Usar la propiedad abreviada para el fondo

+ +

Como mencionamos al comienzo de este artículo, a menudo verás fondos que están especificados usando la propiedad {{cssxref ("background")}}. Esta forma abreviada te permite configurar todas las diferentes propiedades a la vez.

+ +

Si utilizas varios fondos, debes especificar todas las propiedades para el primer fondo y luego añadir el fondo siguiente separado por una coma. En el ejemplo siguiente hay un degradado con un tamaño y una posición, luego un fondo de imagen con no-repeat y una posición y, por último, un color.

+ +

Al escribir los valores abreviados de las imágenes de fondo es necesario seguir algunas reglas, por ejemplo:

+ + + +

Consulta la página para el atributo {{cssxref ("background")}} de MDN para ver todas las posibilidades.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}

+ +

Consideraciones de accesibilidad con los fondos

+ +

Al colocar texto sobre una imagen o un color de fondo, debes asegurarte de que tiene suficiente contraste para que tus visitantes puedan leer el texto. Si estableces una imagen de fondo y el texto se coloca encima de la imagen, también debes especificar un color de fondo (background-color) que permita leer el texto si la imagen no se carga.

+ +

Los lectores de pantalla no pueden analizar las imágenes de fondo, por lo tanto, deben ser puramente decorativas; cualquier contenido importante debe ser parte de la página HTML y no debe estar contenido en un fondo.

+ +

Bordes

+ +

Al aprender sobre el modelo de cajas descubrimos cómo los bordes afectan al tamaño de nuestra caja. En este artículo veremos cómo usar los bordes de una manera creativa. Por lo general, cuando a un elemento le añadimos bordes con CSS, usamos una propiedad abreviada que establece el color, el ancho y el estilo del borde en una línea de CSS.

+ +

Podemos establecer un borde para los cuatro lados de una caja con {{cssxref ("border")}}:

+ +
.box {
+  border: 1px solid black;
+}
+ +

O podemos establecer solo un borde de la caja, por ejemplo:

+ +
.box {
+  border-top: 1px solid black;
+}
+ +

Cada una de las propiedades de estas propiedades abreviadas sería:

+ +
.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+ +

Y las no abreviadas:

+ +
.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+}
+ +
+

Nota: Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades lógicas asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el uso de diferentes direcciones de texto.

+
+ +

Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}

+ +

Esquinas redondeadas

+ +

El redondeo de esquinas en una caja se logra mediante el uso de la propiedad {{cssxref ("border-radius")}} y otras propiedades asociadas que se relacionan con cada esquina de la caja. Como valor pueden usarse dos longitudes o porcentajes: el primer valor define el radio horizontal y el segundo el radio vertical. En muchos casos, solo se pondrá un valor, que se utilizará para ambos.

+ +

Por ejemplo, para hacer que las cuatro esquinas de una caja tengan un radio de 10 píxeles:

+ +
.box {
+  border-radius: 10px;
+}
+ +

O para hacer que la esquina superior derecha tenga un radio horizontal de 1 em y un radio vertical del 10%:

+ +
.box {
+  border-top-right-radius: 1em 10%;
+}
+ +

En el ejemplo siguiente hemos establecido las cuatro esquinas, y luego cambiamos los valores de la esquina superior derecha para que sea diferente. Juega con los valores para cambiar las esquinas. Echa un vistazo a la página de la propiedad {{cssxref ("border-radius")}} para ver las opciones de sintaxis disponibles.

+ +

{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}

+ +

Pon a prueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que retienes la información antes de seguir adelante en Test your skills: Backgrounds and Borders.

+ +

Resumen

+ +

En este artículo hemos expuesto bastantes conceptos y puedes ver que hay mucho para añadir a un fondo o a un borde de una caja. Explora las diferentes páginas de propiedades si deseas obtener más información sobre cualquiera de las características que hemos discutido. Todas las páginas de MDN contienen más ejemplos de uso, para que juegues y mejores tus conocimientos.

+ +

En el próximo artículo descubriremos cómo interacciona el modo de escritura de tu documento con tu CSS. ¿Qué sucede cuando el texto no fluye de izquierda a derecha?

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git "a/files/es/learn/css/building_blocks/im\303\241genes_medios_y_elementos_de_formulario/index.html" "b/files/es/learn/css/building_blocks/im\303\241genes_medios_y_elementos_de_formulario/index.html" new file mode 100644 index 0000000000..db0f522728 --- /dev/null +++ "b/files/es/learn/css/building_blocks/im\303\241genes_medios_y_elementos_de_formulario/index.html" @@ -0,0 +1,193 @@ +--- +title: 'Imágenes, medios y elementos de formulario' +slug: Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
+ +

En este artículo vamos a ver cómo se tratan ciertos elementos especiales en CSS. Las imágenes y otros medios y los elementos de formulario presentan un comportamiento algo distinto que otros elementos CSS, como las cajas, en cuanto a aplicación de estilo. Comprender qué es y qué no es posible te ahorrará frustraciones, y en este artículo vamos a destacar algunas de las cuestiones principales que necesitas saber.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Comprender el modo en que algunos elementos se comportan de manera inusual cuando se diseñan con CSS.
+ +

Elementos de reemplazo

+ +

Las imágenes y los vídeos se describen como elementos de reemplazo. Esto significa que el CSS no puede intervenir en aspectos del diseño interno de estos elementos, sino solo a su posición en la página y algunos otros aspectos. Sin embargo, como veremos, hay varias cosas que el CSS puede hacer con una imagen.

+ +

También se describen ciertos elementos de reemplazo que, como las imágenes y vídeos, presentan una relación de aspecto. Esto significa que tienen un tamaño definido tanto en la dimensión horizontal (x) como en la vertical (y), y por defecto se mostrarán con las dimensiones intrínsecas del archivo.

+ +

El tamaño de las imágenes

+ +

Como ya conoces de estos artículos, todo en CSS genera una caja. Si colocas una imagen dentro de una caja que es más pequeña o más grande que las dimensiones intrínsecas del archivo de imagen en cualquier dirección, aparecerá más pequeño que la caja o se desbordará. Debes decidir qué hacer con el desbordamiento.

+ +

En el ejemplo siguiente hay dos cajas, ambas de 200 píxeles de tamaño:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}

+ +

¿Qué podemos hacer con el problema del desbordado?

+ +

Como aprendimos en nuestro artículo anterior, una técnica común es hacer que el la propiedad {{cssxref ("max-width")}} de una imagen sea 100%. Esto permite que la imagen tenga un tamaño menor que la caja, pero no que tenga un tamaño mayor. Esta técnica funciona con otros elementos de reemplazo, como <video> o <iframe>.

+ +

Añade max-width: 100% al elemento <img> del ejemplo anterior. Verás que la imagen más pequeña permanece sin cambios, pero la más grande se reduce hasta caber en la caja.

+ +

Puedes tomar otras decisiones sobre las imágenes dentro de los contenedores. Por ejemplo, es posible que desees cambiar el tamaño de una imagen para que cubra una caja por completo.

+ +

La propiedad {{cssxref ("object-fit")}} puede ser de gran ayuda. Cuando se usa object-fit, el elemento de reemplazo puede dimensionarse para adaptarse a una caja de varias maneras.

+ +

A continuación, hemos utilizado el valor cover, que reduce el tamaño de la imagen a la vez que mantiene la relación de aspecto hasta que rellena toda la caja. Al mantenerse la relación de aspecto, la caja corta algunas partes de la imagen.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}

+ +

Si usamos el valor contain, la imagen se reduce hasta que es lo bastante pequeña para caber dentro de la caja. Esto puede dar lugar a un formato panorámico si la imagen no presenta la misma relación de aspecto que la caja.

+ +

También puedes probar el valor fill, que rellena la caja, pero no mantiene la relación de aspecto.

+ +

Elementos de reemplazo en una compaginación

+ +

A medida que vayas usando diversas técnicas de diseño CSS en elementos de reemplazo, irás descubriendo que se comportan de manera ligeramente diferente a otros elementos. Por ejemplo, en un diseño flexible o en un diseño de página de cuadrícula, los elementos se expanden por defecto hasta que llenan toda el área. En cambio, las imágenes no se expanden, sino que se alinean con el inicio del área de la cuadrícula o del contenedor flexible.

+ +

Puedes ver esto en el ejemplo siguiente, en que hay un contenedor de con dos columnas y dos filas, que tiene cuatro elementos. Todos los elementos <div> tienen un color de fondo y se estiran para llenar la fila y la columna. La imagen, sin embargo, no se expande.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}

+ +

Si sigues estos artículos en orden, no habrás llegado todavía a la compaginación. Ten en cuenta solo que cuando los elementos de reemplazo forman parte de una cuadrícula o un diseño flexible, presentan comportamientos predeterminados diferentes, en esencia para evitar que el diseño los expanda de manera extraña.

+ +

Para forzar que la imagen se expanda para llenar la celda de la cuadrícula en la que se encuentra, tendrías que hacer algo como lo siguiente:

+ +
img {
+  width: 100%;
+  height: 100%;
+}
+ +

Sin embargo, esto deformaría la imagen, por lo que probablemente no es lo que querrías hacer.

+ +

Los elementos de formulario

+ +

Los elementos de formulario pueden ser un problema si queremos diseñar con CSS, y el artículo sobre formularios web contiene guías detalladas sobre los aspectos más complicados relativos a este tema, que no vamos a repetir en este artículo. Hay algunos conceptos básicos clave que vale la pena destacar en esta sección.

+ +

Muchos controles de formulario se añaden con el elemento <input>: este elemento define desde campos de formulario simples, como entradas de texto, hasta campos más complejos añadidos en HTML5, como selectores de color y fecha. Hay algunos elementos adicionales, como <textarea> para la entrada de texto multilínea, y también elementos que se utilizan para contener y etiquetar partes de formularios como <fieldset> y <legend>.

+ +

El HTML5 también incluye atributos que permiten a los desarrolladores web indicar qué campos son obligatorios e incluso el tipo de contenido que debe introducirse. Si el usuario añade algo inesperado o deja un campo obligatorio en blanco, el navegador puede mostrar un mensaje de error. Los diversos navegadores no presentan ningún estilo coherente ni ninguna homogeneización en cuanto a la personalización que permiten para tales elementos.

+ +

Aplicar estilo a los elementos de entrada de texto

+ +

Los elementos que permiten la entrada de texto, como <input type="text">, algunos tipos específicos como <input type="email"> y el elemento <textarea> son bastante fáciles de diseñar y tienden a comportarse como otras cajas de tu página. Sin embargo, el estilo predeterminado de estos elementos es diferente según el sistema operativo y el navegador con el que el usuario visite el sitio.

+ +

En el ejemplo siguiente hemos diseñado algunas entradas de texto con CSS: puedes ver que algunos elementos como los bordes, los márgenes y el área de relleno se aplican como es de esperar. Utilizamos selectores de atributos para apuntar a los diferentes tipos de entrada. Intenta cambiar el aspecto de este formulario ajustando los bordes, añadiendo colores de fondo a los campos y cambiando las fuentes y área de relleno.

+ +

{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}

+ +
+

¡Importante!: Al cambiar el estilo de los elementos de formulario debes asegurarte de que para el usuario sigue siendo obvio que se trata de elementos de formulario. Podrías crear una entrada de formulario sin bordes y un fondo que sea casi indistinguible del contenido que lo rodea, pero esto haría que sea muy difícil de reconocer y completar.

+
+ +

Como se explica en los artículos sobre el diseño de formularios en la parte HTML de esta web, el sistema operativo presenta muchos de los tipos de entrada más complejos y son inaccesibles para el diseño. Por lo tanto, siempre debes suponer que los formularios se verán de manera bastante diferentes para los distintos visitantes, y deberás probar los formularios complejos en diversos navegadores.

+ +

Herencia y elementos de formulario

+ +

En algunos navegadores, los elementos de formulario no heredan el estilo de letra por defecto. Por lo tanto, si deseas asegurarte de que tus campos de formulario usan la letra que se define para el cuerpo o para un elemento principal, debes añadir esta regla a tu CSS.

+ +
button,
+input,
+select,
+textarea {
+  font-family : inherit;
+  font-size : 100%;
+}
+ +

Elementos de formulario y tamaño de la caja

+ +

Los elementos de formulario utilizan reglas diferentes en los diversos navegadores para el dimensionado de las cajas de los diferentes controles de formulario. Ya cubrimos la propiedad box-sizing en el artículo sobre el modelo de cajas. Puedes usar este conocimiento cuando diseñes formularios que garanticen una experiencia homogénea en cuanto a los anchos y las alturas de los elementos de formulario.

+ +

Por coherencia, es una buena idea establecer los márgenes y el área de relleno en 0 para todos los elementos, y luego establecerlos de nuevo al diseñar cada uno de los controles de formulario.

+ +
button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+ +

Otros ajustes útiles

+ +

Además de las reglas ya mencionadas, también debes configurar overflow: auto en <textarea> para que Internet Explorer no muestre una barra de desplazamiento cuando no hay necesidad:

+ +
textarea {
+  overflow: auto;
+}
+ +

Ponerlo todo junto en un «Reinicio»

+ +

Como último paso podemos resumir las diversas propiedades expuestas en el «reinicio de formulario» siguiente para proporcionar una base coherente sobre la que trabajar. Esto incluye todos los elementos mencionados en las tres últimas secciones:

+ +
button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  padding: 0; margin: 0;
+}
+
+textarea {
+  overflow: auto;
+}
+ +
+

Nota: Muchos desarrolladores utilizan las hojas de estilo de normalización para crear un conjunto de estilos de línea base para usar en todos los proyectos. Por lo general, estas hojas hacen cosas similares a las que acabamos de describir y garantizan que cualquier cosa que pueda ser diferente en distintos navegadores tenga establecido un valor por defecto coherente antes de que tú hagas tu propio trabajo con el CSS. Aunque ya no son tan importantes como lo eran antes, porque los navegadores suelen ser más homogéneos que en el pasado. Sin embargo, si deseas ver un ejemplo, consulta Normalize.css, que es una hoja de estilo muy popular que muchos proyectos utilizan como base.

+
+ +

Para obtener más información sobre los formularios de estilo, echa un vistazo a los dos artículos en la sección HTML de estas guías.

+ + + +

Resumen

+ +

En este artículo hemos destacado algunas de las diferencias que se presentan cuando trabajas con imágenes o media, y otros elementos inusuales, en CSS. En el artículo siguiente veremos algunos consejos que te resultarán útiles cuando tengas que diseñar tablas HTML.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de cajas
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/index.html b/files/es/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..ce15097a6c --- /dev/null +++ b/files/es/learn/css/building_blocks/index.html @@ -0,0 +1,94 @@ +--- +title: Bloques de construcción CSS +slug: Learn/CSS/Building_blocks +tags: + - Aprender + - CSS + - Principiante + - bloques de construcción +translation_of: Learn/CSS/Building_blocks +--- +
{{LearnSidebar}}
+ +

Este módulo retoma donde Primeros pasos en CSS finalizó — ahora que estás familiarizado con el lenguaje y su sintaxis, y que tienes algo de experiencia en su uso, es hora de bucear un poco más profundo. Este módulo se centra en el estilo en cascada de css y en el concepto de herencia, también veremos todos los tipos de selectores, unidades, tamaños, estilos de fondo, bordes, debugging y mucho más.

+ +

El objetivo aqui es proveerte de herramientas para que puedas escribir código CSS competentemente y ayudarte a entender lo escencial de la teoría antes de centrarnos en disciplinas más específicas como text styling y CSS layout.

+ +

Prerrequisitos

+ +

Antes de comenzar este módulo deberías poseer:

+ +
    +
  1. Un entendimiento básico de la utilización de una computadora y de la
    + navegación web a nivel de usuario.
    2. +
  2. Un entorno básico constituido en base a lo dispuesto en la guía Instalación de software básico, tanto como conocimiento acerca de la creación y la administración de archivos, como es detallado en Dealing with files.
    3. +
  3. Una familiaridad básica con html, como es establecido en el módulo Introdución a HTML.
    4. +
  4. Un entendimiento elemental de CSS, como es discutido en el módulo CSS first steps.
    5. +
+ +
+

Nota: Si estás trabajando en una computadora, tablet, u otro dispositivo en el que no eres capaz de crear tus propios archivos puedes intentar la mayor parte de los ejemplos en código en un programa para trabajar código en linea como JSBin o Glitch.

+
+ +

Guías

+ +

En este módulo encontrarás artículos que cubren los fundamentos más esenciales del lenguaje CSS. A lo largo del módulo encontrarás múltiples ejercicios que te permitirán poner a prueba tu entendimiento.

+ +
+
Cascada y herencia
+
El objetivo de ésta lección es desarrollar tu entendimiento sobre algunos de los conceptos fundamentales de CSS - cascada, especificidad y herencia - los cuales controlan como CSS es aplicado a HTML y como sus conflitos son resueltos.
+
Selectores CSS
+
Hay una gran variedad de selectores disponibles en CSS, permitiendo una fina precision para seleccionar elementos de estilo. En este artículo y sub-artículos, repasaremos los diferentes tipos en detalle y veremos como funcionan. Los sub-artículos son los que siguinetes : + +
+
El modelo de caja
+
Todo en CSS tiene una caja a su alrededor, y comprender estas cajas es clave para poder crear diseños con CSS, o para alinear elementos con otros elementos. En esta lección, analizaremos adecuadamente el modelo CSS Box, para que pueda pasar a tareas de diseño más complejas con una comprensión de cómo funciona y la terminología que se relaciona con él.
+
Fondos y bordes
+
En esta lección, veremos algunas de las cosas creativas que puede hacer con fondos y bordes CSS. Al agregar degradados, imágenes de fondo y esquinas redondeadas, los fondos y los bordes son la respuesta a muchas preguntas de estilo en CSS.
+
Manejo de diferentes direcciones de texto
+
En los últimos años, CSS ha evolucionado para admitir mejor la diferente direccionalidad del contenido, incluyendo Right-to-left (Derecha a Izquierda) pero también de Top-to-bottom (Arriba a abajo ,como el japonés); estas diferentes direccionalidades se llaman modos de escritura. A medida que avance en su estudio y comience a trabajar con el diseño, comprenderá los modos de escritura será muy útil para usted, por lo tanto, los presentaremos en este artículo.
+
Contenido desbordante
+
En esta lección veremos otro concepto importante en CSS: desbordamiento. El Overflow (o desbordamiento) es lo que sucede cuando hay demasiado contenido para contenerlo cómodamente dentro de una caja. En esta guía aprenderá qué es y cómo administrarlo.
+
Valores y unidades de CSS
+
+

Cada propiedad utilizada en CSS tiene un valor o conjunto de valores permitidos para esa propiedad. En esta lección veremos algunos de los valores y unidades más comunes en uso.

+
+
Dimensionar elementos en CSS
+
En las diversas lecciones hasta ahora, ha encontrado varias formas de dimensionar elementos en una página web utilizando CSS. Es importante comprender cuán grandes serán las diferentes características en su diseño, y en esta lección resumiremos las diversas formas en que los elementos obtienen un tamaño a través de CSS y definiremos algunos términos sobre el tamaño que lo ayudarán en el futuro.
+
Imágenes, medios y elementos de forma
+
+

En esta lección veremos cómo se tratan ciertos elementos especiales en CSS. Las imágenes, otros medios y elementos de formulario se comportan de manera un poco diferente en términos de su capacidad para diseñarlos con CSS que los cuadros normales. Comprender qué es y qué no es posible puede ahorrar un poco de frustración, y esta lección resaltará algunas de las cosas principales que necesita saber.

+
+
Dando estilo a una tabla
+
Diseñar una tabla HTML no es el trabajo más glamoroso del mundo, pero a veces todos tenemos que hacerlo. Este artículo proporciona una guía para hacer que las tablas HTML se vean bien, con algunas técnicas específicas de diseño de tablas resaltadas.
+
Depuración de CSS
+
A veces, al escribir CSS, encontrará un problema en el que su CSS no parece estar haciendo lo que espera. Este artículo le dará orientación sobre cómo solucionar un problema de CSS y le mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarlo a descubrir qué está sucediendo.
+
+
Organizando tu CSS
+
A medida que comience a trabajar en hojas de estilo más grandes y grandes proyectos, descubrirá que mantener un gran archivo CSS puede ser un desafío. En este artículo, analizaremos brevemente algunas de las mejores prácticas para escribir su CSS para que sea fácil de mantener, y algunas de las soluciones que encontrará en uso para ayudar a mejorar la capacidad de mantenimiento.
+
+ +

Evaluaciones

+ +

¿Quieres probar tus habilidades de CSS? Las siguientes evaluaciones pondrán a prueba su comprensión del CSS cubierto en las guías anteriores.

+ +
+
Comprensión de CSS básica
+
Esta evaluación evalúa su comprensión de la sintaxis básica, selectores, especificidad, modelo de caja y más.
+
Crear papel con membrete elegante
+
Si desea causar la impresión correcta, escribir una carta en papel con membrete puede ser un buen comienzo. En esta evaluación, lo retaremos a crear una plantilla en línea para lograr ese aspecto.
+
Una caja de aspecto genial
+
Aquí aprenderás a usar el estilo de fondo y borde para crear un cuadro llamativo.
+
+ +

Ver también

+ +
+
Efectos de estilo avanzados
+
Este artículo actúa como una caja de trucos, brindando una introducción a algunas características de estilo avanzadas e interesantes como sombras de caja, modos de fusión y filtros.
+
diff --git a/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html b/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html new file mode 100644 index 0000000000..fa21de66e5 --- /dev/null +++ b/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html @@ -0,0 +1,165 @@ +--- +title: Manejando diferentes direcciones de texto +slug: Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto +tags: + - Aprendizaje + - CSS + - Diseño en bloque + - Diseño lineal + - Modos de escritura + - Principiante + - Propiedades lógicas +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
+ +

Muchas de las propiedades y valores que hemos encontrado hasta ahora en nuestro aprendizaje de CSS han estado ligadas a las dimensiones físicas de nuestra pantalla. Creamos bordes arriba, a la derecha, abajo y a la izquierda de una caja, por ejemplo. Estas dimensiones físicas se ajustan adecuadamente al contenido que se visualiza de forma horizontal, y por defecto, la web tiende a apoyar lenguajes de izquierda a derecha, como el castellano o el francés, mejor que aquellos que se escriben de derecha a izquierda, como el árabe.

+ +

Sin embargo, en los últimos años, CSS ha evolucionado para soportar de mejor forma contenidos en diferente direccionalidad, incluyendo contenido de derecha a izquierda, pero también de arriba-abajo, como el japonés - Estas direccionalidades se llaman modos de escritura. En la medida que progresa tu estudio y comiences a trabajar con diseños, comprender los modos de escritura será de mucha utilidad para ti, por ello los explicaremos a continuación.

+ + + + + + + + + + + + +
Prerrequisitos:Literatura computacional básica, software básico instalado, conocimiento básico de manejo de archivos, HTML básico (Introducción a HTML), y una idea de cómo funciona CSS (Primeros pasos en CSS.)
Objetivo:Entender la importancia de los modos de escritura en el CSS moderno.
+ +

¿Qué son los modos de escritura?

+ +

Un modo de escritura en CSS se refiere a si el texto está escrito horizontal o verticalmente. La propiedad {{cssxref("writing-mode")}} permite cambiar de un modo a otro. No necesitas estar trabajando en un lenguaje que use un modo de escritura vertical para querer hacer esto - Podrías cambiar el modo de escritura de partes de tu diseño por razones creativas.

+ +

En el ejemplo siguiente existe un encabezado desplegado usando writing-mode: vertical-rl. El texto ahora aparece vertical. El texto vertical es común en diseño gráfico, y puede ser una forma de agregar un aspecto más interesante a tu diseño web.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}

+ +

Los tres valores posibles para la propiedad writing-mode son:

+ + + +

Así, la propiedad writing-mode está configurando en realidad la direccion en que los elementos de nivel bloque son desplegados en la página - ya sea de arriba abajo, derecha a izquierda, o de izquierda a derecha. Luego señala la dirección del flujo de texto en las frases.

+ +

Modos de escritura y diseño en bloque y lineal.

+ +

Ya hemos visto el diseño en bloque y lineal, y el hecho de que algunas cosas se muestran como elementos de bloque y otras como elementos lineales. Ésto se encuentra ligado al modo de escritura del documento, y no de la pantalla física. Los bloques sólo se presentan desde la parte superior a la inferior de la página si estas usando un modo de escritura que presente el texto horizontalmente, como el español.

+ +

Con el siguiente ejemplo quedará más claro. Si tienes dos cajas que contengan un heading y un paragraph. La primera usa writing-mode: horizontal-tb, un modo de escritura horizontal y desde la parte superior de la página a la base. La segunda usa writing-mode: vertical-rl; este es un modo de escritura vertical y de derecha a izquierda.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}

+ +

Cuando cambiamos el modo de escritura, estamos cambiando que dirección es en bloque y cuál es lineal. En un modo de escritura horizontal-tb El la direccion del bloque va de arriba abajo; en un modo de escritura vertical-rl el bloque corre de derecha a izquierda horizontalmente. De esta forma la dimensión del bloque es siempre la direccion en la que se muestran los bloques en el modo de escritura en uso. La dimensión lineal, es siempre la dirección en que fluye una frase.

+ +

Este dibujo muestra las dos dimensiones en un modo de escritura horizontal.Showing the block and inline axis for a horizontal writing mode.

+ +

Este dibujo muestra las dos dimensiones en un modo de escritura vertical.

+ +

Showing the block and inline axis for a vertical writing mode.

+ +

Una vez que empieces a observar el diseño CSS, y en particular los nuevos métodos de diseño, esta idea de bloque y lineal cobra mayor importancia. Será revisado más adelante.

+ +

Dirección

+ +

Además del modo de escritura también tenemos la dirección del texto. Como se mencionó antes, algunos idiomas como el Árabe se escriben horizontalmente, de derecha a izquierda. Esto no es algo que usarías en un sentido creativo. Si tu simplemente quieres alinear algún elemento a la derecha, existen otras formas de hacerlo. Sin embargo es importante entender esto como parte de la naturaleza del CSS. La web no es solo para lenguajes que son escritos de izquierda a derecha!

+ +

Debido al hecho de que el modo de escritura y la dirección del texto pueden cambiar, los nuevos métodos de diseño CSS no toman como referencia la izquierda y derecha, ni la parte superior e inferior. En su lugar, hablarán de inicio y fin junto con esta idea de en línea y bloque. No te preocupes mucho por eso en este momento, pero ten en cuenta estas ideas a medida que empiezas a mirar el diseño de una página web; va a ser de gran ayuda en tu entendimiento de CSS.

+ +

Valores y propiedades lógicas

+ +

La razón de hablar acerca de modos de escritura y dirección en este punto en tu aprendizaje, es por el hecho de que ya vimos muchas de estas propiedades que están atadas a las dimensiones físicas de la pantalla, y tienen más sentido cuando está en un modo de escritura horizontal.

+ +

Vamos a echarle un vistzo a nuestras dos cajas de nuevo, una con el modo escritura horizontal-tb y otro con vertical-rl. Le hemos dado a estas dos cajas un {{cssxref("width")}}. Puedes ver que cuando la caja está en el modo de escritura vertical, aún tiene una anchura, y esto está causando que el texto se desborde.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}

+ +

Lo que nosotros realmente queremos en este escenario, es esencialmente intercambiar altura y anchura junto con el modo de escritura. Cuando estamos en el modo de escritura vertical, queremos que la caja se expanda en la dimensión del bloque así como lo hace en el modo horizontal.

+ +

Para hacerlo más fácil, CSS ha desarrollado recientemente un conjunto de propiedades asignadas. Estas esencialmente reemplazan las propiedades físicas como width and height, con versiones lógicas o relativas al flujo.

+ +

La propiedad asignada a width cuando está en el modo de escritura horizontal se llama {{cssxref("inline-size")}}, se refiere al tamaño en la dimensión inline. La propiedad para height se llama {{cssxref("block-size")}} y es el tamaño en la dimensión de bloque. Puedes ver como funciona en el ejemplo de abajo, donde reemplazamos width con inline-size.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}

+ +

Propiedades lógicas margin, border y padding

+ +

En las últimas dos lecciones aprendimos acerca del modelo de cajas con CSS, y los bordes CSS. En las propiedades margin, border y padding vas a encontrar varias instancias de propiedades físicas, por ejemplo {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, y {{cssxref("border-bottom")}}. Del mismo modo que tenemos asignaciones para ancho y alto, hay asignaciones para estas propiedades.

+ +

La propiedad margin-top está asignada a {{cssxref("margin-block-start")}}, esto siempre se va a referir al margen al inicio de la dimensión del bloque. 

+ +

La propiedad {{cssxref("padding-left")}} se asigna a {{cssxref("padding-inline-start")}}, el padding que se aplica al inicio de la dirección inline. Aquí será donde las oraciones comienzan en ese modo de escritura. La propiedad {{cssxref("border-bottom")}} se asigna a {{cssxref("border-block-end")}}, que es el borde del final de la dimensión del bloque.

+ +

Puedes ver una comparación entre las propiedades físicas y lógicas a continuación.

+ + + +

Si cambias el modo de escritura de las cajas asignando a la propiedad writing-mode en .box a vertical-rl, vas a ver como las propiedades físicas se quedan ligadas a sus direcciones físicas, mientras que las propiedades lógicas cambian con el modo de escritura.

+ +

También puedes ver que el {{htmlelement("h2")}} tiene  un border-bottom negro. ¿Puedes averiguar como hacer que el borde inferior siempre esté debajo del texto en ambos modos de escritura?

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}

+ +

Existe un gran número de propiedades cuando consideras cada uno de los bordes que puedes hacer a mano, y puedes ver todas las propiedades asignadas en la página de MDN para propiedades Lógicas y Valores

+ +

Valores lógicos

+ +

Hasta ahora hemos examinado los nombres de las propiedades lógicas. Existen también algunas propiedades que toman valores físicos de top, right, bottom, y left. Estos valores también tienen asignaciones a valores lógicos: block-start, inline-end, block-end, y inline-start.

+ +

Por ejemplo, puedes hacer que una imagen flote a la izquierda para hacer que el texto se ajuste alrededor de la imagen. Puedes reemplazar left con inline-start como se muestra en el ejemplo a continuación.

+ +

Cambia el modo de escritura en este ejemplo a vertical-rl para ver que sucede con la imagen. Cambia inline-start por inline-end para cambiar el modo en que flota.

+ +

{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}

+ +

Aquí también estamos usando valores lógicos de el margen para asegurar que el margen está en el sitio correcto sin importar que modo de escritura es.

+ +
+

Actualmente, solo Firefox soporta valores relativos de flujo para float. Si estás usando Google Chrome o Microsoft Edge, deberías ver que la imagen no flota.

+
+ +

¿Debería usar propiedades físicas o lógicas?

+ +

Las propiedades lógicas y los valores son más recientes que su equivalente físico, y por lo tanto se han implementado recientemente en los navegadores. Puedes revisar cualquier página de propiedades en MDN para ver hasta donde llega el soporte del navegador. Si no estás usando multiples modos de escritura, entonces, por ahora, deberías preferir usar las versiones físicas. Sin embargo, en última instancia, esperamos que la gente va a pasar a las versiones lógicas para la mayoría de las cosas, ya que tienen mucho sentido una vez que comienzas a tratar también con métodos de diseño como Flexbox y Grid.

+ +

¡Prueba tus habilidades!

+ +

Tenemos mucho terreno cubierto en este artículo, pero puedes recordad la información más importante? Puedes encontrar algunas pruebas adicionales para verificar que has retenido esta información antes de seguir adelante: Prueba tus habilidades: modos de escritura.

+ +

Resumen

+ +

Los conceptos explicados en esta lección son cada vez más importantes en CSS. Un entendimiento pleno de las direcciones en bloque y en línea, y como el flujo de texto cambia con la variación de los modos de escritura, van a ser de gran ayuda en el futuro. Te ayudará a entender CSS incluso si nunca usas un modo de escritura diferente al horizontal.

+ +

En el módulo siguiente, vamos a echar un buen vistazo al desbordamiento en CSS

+ +

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

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html b/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html new file mode 100644 index 0000000000..54f416456d --- /dev/null +++ b/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html @@ -0,0 +1,111 @@ +--- +title: Combinadores +slug: Learn/CSS/Building_blocks/Selectores_CSS/Combinadores +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Los últimos selectores que veremos son los llamados selectores de combinación. Se llaman así porqué combinan otros selectores de manera que proporciona una relación útil entre ellos y la ubicación del contenido en el documento.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los diferentes selectores de combinación que se pueden utilizar en el CSS.
+ +

Selector de descendientes

+ +

Ya hemos visto los selectores de descendientes en artículos anteriores (selectores con espacios entre ellos):

+ +
body article p
+ +

Estos selectores seleccionan elementos que son descendientes de otros selectores. No es necesario que sean hijos directos.

+ +

En el ejemplo siguiente seleccionamos solo el elemento <p> que hay dentro de un elemento con una clase .box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Selector de combinación de elementos hijo

+ +

El selector de combinación de elementos hijo es un símbolo de «mayor que» (>), que selecciona solo cuando los selectores identifican elementos que son hijos directos. Los elementos descendientes que se encuentran más abajo en la jerarquía no se seleccionan. Por ejemplo, para seleccionar solo los elementos <p> que son hijos directos de elementos <article>:

+ +
article > p
+ +

En el ejemplo siguiente hay una lista ordenada anidada dentro de otra lista no ordenada. Utilizamos los selectores de elementos hijo para seleccionar solo los elementos <li> que son hijos directos de <ul> y les aplicamos un borde superior.

+ +

Si eliminamos el símbolo > que lo identifica como un selector de elementos hijo, lo convertimos en un selector de elementos descendientes y se aplicará el borde rojo a todos los elementos <li>.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Hermanos adyacentes

+ +

El selector de elementos hermanos adyacentes (+) se utiliza para seleccionar un elemento que se encuentra justo al lado de otro elemento en el mismo nivel de la jerarquía. Por ejemplo, para seleccionar todos los elementos <img> que aparecen justo después de elementos <p>:

+ +
p + img
+ +

El caso de uso más común es modificar el párrafo que va justo después del título, como en el ejemplo siguiente. Vamos a buscar un párrafo que sea directamente adyacente a <h1> y le vamos a aplicar un estilo.

+ +

Si insertas algún otro elemento, como <h2> entre las etiquetas <h1> y <p>, verás que el selector ya no selecciona el párrafo y no se muestra con los mismos colores de fondo y de primer plano que cuando es adyacente.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Hermanos generales

+ +

Si deseas seleccionar los hermanos de un elemento, incluso si no son directamente adyacentes, puedes utilizar el combinador de hermanos general (~). Por ejemplo, para seleccionar todos los elementos <img> que aparecen después de los elementos <p>, hacemos esto:

+ +
p ~ img
+ +

En el ejemplo siguiente seleccionamos todos los elementos <p> que vienen después de <h1>, y aunque en el documento también hay un <div>, se selecciona incluso la etiqueta <p> que viene después.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

El uso de selectores de combinación

+ +

Puedes combinar cualquiera de los selectores de los artículos anteriores con selectores de combinación para seleccionar una parte del documento. Por ejemplo, podrías utilizar el código siguiente para seleccionar elementos de una lista con una clase «a» que son hijos directos de <ul>:

+ +
ul > li[class="a"]  {  }
+ +

Ten cuidado cuando creas largas listas de selectores que seleccionan partes del documento muy específicas. Te será difícil volver a utilizar las reglas CSS porque has definido un selector muy específico para la ubicación del elemento en el marcado.

+ +

A menudo es mejor crear una clase sencilla y aplicarla al elemento en cuestión. Dicho esto, tu conocimiento de los selectores de combinación te será muy útil si necesitas modificar algo del documento y no puedes acceder al código HTML (tal vez porque se haya generado a partir de CMS).

+ +

Comprueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa información en Test your skills: Selectors.

+ +

Continuamos

+ +

Esta es la última sección de nuestros artículos sobre selectores. A continuación vamos a pasar a otra parte importante del CSS: el modelo de caja CSS.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Elementos de imagen, de media y de formulario
    10. +
  10. Estilo de las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectores_css/index.html b/files/es/learn/css/building_blocks/selectores_css/index.html new file mode 100644 index 0000000000..d0ea61da20 --- /dev/null +++ b/files/es/learn/css/building_blocks/selectores_css/index.html @@ -0,0 +1,223 @@ +--- +title: Selectores CSS +slug: Learn/CSS/Building_blocks/Selectores_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

En {{Glossary( "CSS")}} los selectores se utilizan para delimitar los elementos {{glossary("HTML")}} de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una gran precisión a la hora de seleccionar elementos a los que aplicar estilo. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.

+ + + + + + + + + + + + +
Prerrequisitos:Nociones básicas de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, conocimientos básicos de HTML (véase Introducción a HTML) y una idea de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender con detalle cómo funcionan los selectores CSS.
+ +

¿Qué es un selector?

+ +

En un artículo anterior explicamos qué son los selectores. Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan sujeto del selector.

+ +

Fragmento de código con el elemento h1 resaltado.

+ +

En artículos anteriores ya has visto algunos selectores y has aprendido que hay diversas maneras de organizar el documento. Por ejemplo, seleccionando un elemento, como h1, o seleccionando una clase, como .special.

+ +

En CSS, los selectores se definen en la especificación de selectores de CSS correspondiente; al igual que cualquier otro elemento de CSS, es necesario que los navegadores los admitan para que funcionen. La mayoría de los selectores que encontrarás se definen en especificación de nivel 3 de selectores, que es una especificación consolidada y, por lo tanto, la mayoría de navegadores admitirán esos selectores.

+ +

Listas de selectores

+ +

Si más de un elemento utiliza el mismo CSS, puedes combinar los selectores en una lista de selectores para que la regla se aplique a cada uno de los selectores individuales. Por ejemplo, si tengo el mismo CSS para un h1 y para una clase .special, los puedo escribir como dos reglas separadas.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

También los podrías combinar en una lista de selectores, separándolos con una coma.

+ +
h1, .special {
+  color: blue;
+}
+ +

Es posible dejar un espacio en blanco tanto antes como después de la coma. Incluso puede resultar más legible si cada selector se encuentra en una línea distinta.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

En el ejemplo siguiente, intenta combinar los dos selectores de modo que tengan la misma declaración. El aspecto visual debe permanecer igual tras la combinación.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

Cuando agrupas los selectores de esta manera, si alguno de los selectores no es válido, el navegador sencillamente ignora toda la regla.

+ +

En el ejemplo siguiente, la regla que corresponde al selector de clase que no es válido se ignora, mientras que el estilo se aplica al elemento h1.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Sin embargo, si se combinan, toda la regla se considera no válida y no se aplicará estilo ni a h1 ni a la clase.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Tipos de selectores

+ +

Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos vamos a ver los diferentes grupos de selectores con más detalle.

+ +

Selectores de tipo, de clase y de ID

+ +

Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo un <h1>.

+ +
h1 { }
+ +

También incluye selectores que delimitan una clase:

+ +
.box { }
+ +

o un ID:

+ +
#unique { }
+ +

Selectores de atributo

+ +

Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según la presencia de un atributo determinado en un elemento:

+ +
a[title] { }
+ +

O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:

+ +
a[href="https://example.com"] { }
+ +

Las pseudoclases y los pseudoelementos

+ +

Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase :hover, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.

+ +
a: hover {}
+ +

También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. Por ejemplo, ::first-line siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (<p>, en el ejemplo siguiente), y actúa como si un elemento <span> hubiera delimitado la primera línea, seleccionado y aplicado estilo.

+ +
p::first-line { }
+ +

Combinadores

+ +

El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento <article> utilizando el operador de combinación hijo (>):

+ +
article > p { }
+ +

Próximos pasos

+ +

Echa un vistazo a esta tabla de referencia de selectores que contiene enlaces directos a los distintos tipos de selectores que se explican en nuestra sección de aprendizaje o en MDN, o bien sigue adelante e inicia tu viaje para averiguar cómo funcionan en Selectores de tipo, de clase y de ID.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Tabla de referencia de selectores

+ +

La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorEjemploTutorial de aprendizaje de CSS
Selector de tipoh1 {  }Los tipos de selectores
Selector universal* {  }El selector universal
Selector de clase.box {  }Los selectores de clase
Selector de ID#unique { }Los selectores de ID
Selector de atributoa[title] {  }Los selectores de atributo
Pseudoclasep:first-child { }Las pseudoclases
Pseudoelementop::first-line { }Los pseudoelementos
Operadores de combinación descendentesarticle pOperadores de combinación descendentes
Operador de combinación de elementos hijoarticle > pOperadores de combinación de elementos hijo
Operador de combinación de elementos hermanos adyacentesh1 + pHermanos adyacentes
Operador de combinación general de elementos hermanosh1 ~ pHermanos generales
+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html b/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html new file mode 100644 index 0000000000..f48dfdcbd5 --- /dev/null +++ b/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html @@ -0,0 +1,397 @@ +--- +title: Pseudoclases y pseudoelementos +slug: Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +

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

+ +

El conjunto de selectores que estudiaremos en este artículo se conocen como pseudoclases y pseudoelementos. Hay muchos y a menudo sirven para fines muy específicos. Una vez que sepas cómo usarlos, puedes echar un vistazo a la lista para ver si alguno sirve para la página que quieres crear. Una vez más, la página correspondiente de MDN resulta muy útil para conocer qué navegadores los admiten o no.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Obtener información sobre los selectores de pseudoclases y pseudoelementos.
+ +

¿Qué es una pseudoclase?

+ +

Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.

+ +

Las pseudoclases son palabras clave que comienzan con dos puntos:

+ +
:pseudo-class-name
+ +

Ejemplos simples de pseudoclases

+ +

Echemos un vistazo a algunos ejemplos. Si queremos el primer párrafo de un artículo en letra más grande y en negrita, podemos añadir una clase a ese párrafo y luego añadirle CSS a esa clase, como se muestra en este ejemplo:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Sin embargo, podría ser complicado de mantener. ¿Y si añadiésemos un párrafo nuevo en la parte superior del documento? Habría que mover la clase para que quede antes del nuevo párrafo. En lugar de añadir la clase, podríamos utilizar el selector de pseudoclase {{cssxref(":first-child")}}, que siempre seleccionará el primer elemento hijo del artículo, y de esta forma no tendremos que editar el código HTML (esto no siempre es posible, tal vez debido a que lo genera un CMS).

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML. Echa un vistazo a otros ejemplos en MDN:

+ + + +
+

Nota: Es válido escribir pseudoclases y pseudoelementos sin que les preceda un selector de elemento. En el ejemplo anterior, podría escribirse :first-child y la regla se aplicaríaa cualquier elemento que sea el primer hijo de un elemento <article>, no solo un párrafo primer hijo. :first-child equivale a *:first-child. Pero normalmente se quiere más control y hay que ser más específico.

+
+ +

Pseudoclases de acción de usuario

+ +

Algunas pseudoclases solo intervienen cuando el usuario interactúa con el documento de alguna manera. Estas pseudoclases de acción de usuario, que también reciben el nombre de pseudoclases dinámicas, actúan como si se añadiese una clase al elemento cuando el usuario interactúa con él. Algunos ejemplos son:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

¿Qué es un pseudoelemento?

+ +

Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si hubieras añadido un elemento HTML totalmente nuevo en el marcado, en lugar de haber aplicado una clase nueva a los elementos presentes. Los pseudoelementos empiezan con un doble signo de dos puntos ::.

+ +
::pseudo-element-name
+ +
+

Nota: Algunos de los primeros pseudoelementos utilizaban la sintaxis de un solo signo de dos puntos, así que puede ser que en ocasiones los veas escritos de esta forma en algún código o ejemplo. Los navegadores modernos leen tanto los pseudoelementos con la sintaxis de los dos puntos simple como la de los dos puntos doble para garantizar la compatibilidad retrospectiva.

+
+ +

Por ejemplo, si deseas seleccionar la primera línea de un párrafo simplemente puedes delimitarlo con el elemento <span> y utilizar un selector de elementos. Sin embargo, fallará si el número de palabras que has delimitado resulta ser más largo o más corto que el ancho del elemento padre. Ya que normalmente no sabemos cuántas palabras caben en una línea porque esto cambia con el ancho de la pantalla o con los cambios de tamaño de la letra, no es posible hacer esto introduciendo solo HTML.

+ +

El pseudoelemento ::first-line soluciona este problema: no importa si el número de palabras aumenta o disminuye, siempre se selecciona la primera línea.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Actúa como si hubiera un elemento <span> mágicamente delimitando esa primera línea, que se actualiza cada vez que la longitud de la línea cambia.

+ +

Puedes observar que en ambos párrafos se selecciona la primera línea.

+ +

Combinar pseudoclases y pseudoelementos

+ +

Si quieres poner en negrita la primera línea del primer párrafo, puedes encadenar los selectores :first-child y ::first-line. Añade al ejemplo anterior el CSS siguiente. Queremos que se seleccione la primera línea del primer elemento <p> que esté dentro de un elemento <article>.

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

Generar contenido con ::before y ::after

+ +

Hay un par de pseudoelementos especiales que se utilizan junto con la propiedad de content para introducir contenido en el documento usando el CSS.

+ +

Puedes utilizarlos para insertar una cadena de texto, como en el ejemplo siguiente. Intenta cambiar el valor del texto de la propiedad {{cssxref("content")}} y observa el cambio en la salida. También puedes cambiar el pseudoelemento ::before por ::after y verás que el texto se inserta al final del elemento, en lugar de al principio.

+ +

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

+ +

Sin embargo, en realidad no es habitual insertar cadenas de texto desde el CSS, porque ese texto resulta inaccesible para algunos lectores de pantalla y puede ser difícil de buscar y modificar en el futuro.

+ +

Un uso más adecuado de estos pseudoelementos es insertar un icono. Por ejemplo, la pequeña flecha que añadimos en el ejemplo siguiente es un indicador visual que no queremos que el lector de pantalla muestre:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Estos pseudoelementos también se utilizan con frecuencia para insertar una cadena vacía a la que luego se le puede aplicar estilo, como a cualquier otro elemento de la página.

+ +

En el ejemplo siguiente hemos añadido una cadena vacía mediante el pseudoelemento ::before. Le hemos asociado display: block para poder aplicarle estilo para que tenga una anchura y una altura determinadas. A continuación, utilizamos el CSS para aplicar estilo de la misma forma que lo haríamos con cualquier otro elemento. Juega con el CSS y cambia la forma en que se ve y se comporta.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

El uso de los pseudoelementos ::before y ::after, junto con la propiedad content se conoce como «contenido generado» en CSS, y verás que esta técnica se utiliza a menudo para diversas tareas. Un buen ejemplo es la página web CSS Arrow Please, que te ayuda a generar una flecha con CSS. Echa un vistazo al CSS a medida que creas tu flecha y verás cómo funcionan los pseudoelementos {{cssxref("::before")}} y {{cssxref("::after")}}. Cada vez que veas estos selectores, echa un vistazo a la propiedad {{cssxref("content")}} para ver qué se añade al documento.

+ +

Sección de referencia

+ +

Hay un gran número de pseudoclases y pseudoelementos, así que resulta útil tener una lista para ir consultándolos. A continuación encontrarás un par de tablas con enlaces a sus páginas de referencia en MDN. Tómalas como referencia para ver de qué dispones para seleccionar qué tipos de elementos.

+ +

Las pseudoclases

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorDescripción
{{ Cssxref(":active") }}Selecciona un elemento cuando el usuario lo activa (por ejemplo, con un clic).
{{ Cssxref(":any-link") }}Selecciona los estados :link y :visited de un enlace.
{{ Cssxref(":blank") }}Selecciona un elemento <input> cuyo valor de entrada está vacío.
{{ Cssxref(":checked") }}Selecciona un botón de opción o casilla de verificación en el estado que determines.
{{ Cssxref(":current") }}Selecciona el elemento que se muestra en ese momento, o un ancestro de ese elemento.
{{ Cssxref(":default") }}Selecciona uno o más elementos de interfaz de usuario cuyo valor es el predeterminado de entre un conjunto de elementos similares.
{{ Cssxref(":dir") }}Selecciona un elemento según su direccionalidad (valor del atributo dir de HTML o propiedad direction de CSS).
{{ Cssxref(":disabled") }}Selecciona elementos de la interfaz de usuario que están en estado inactivo.
{{ Cssxref(":empty") }}Selecciona un elemento que no tiene elementos hijo, excepto por algún espacio en blanco opcional.
{{ Cssxref(":enabled") }}Selecciona elementos de la interfaz de usuario que están en estado activo.
{{ Cssxref(":first") }}En Paged Media, selecciona la primera página.
{{ Cssxref(":first-child") }}Selecciona el primero entre elementos hermanos.
{{ Cssxref(":first-of-type") }}Selecciona el primero entre un tipo determinado de elementos hermanos.
{{ Cssxref(":focus") }}Selecciona el elemento que tiene el foco.
{{ Cssxref(":focus-visible")}}Selecciona el elemento que tiene el foco cuando el foco tiene que estar visible para el usuario.
{{ Cssxref(":focus-within") }}Selecciona el elemento que tiene el foco y el elemento con un descendiente que tiene el foco.
{{ Cssxref(":future") }}Selecciona los elementos que van después del elemento en curso.
{{ Cssxref(":hover") }}Selecciona un elemento cuando el usuario interactúa con él.
{{ Cssxref(":indeterminate") }}Selecciona elementos de interfaz de usuario cuyo valor está en un estado no determinado, por lo general se trata de casillas de verificación.
{{ Cssxref(":in-range") }}Selecciona un elemento cuyo valor se encuentra dentro de un rango de valores determinado.
{{ Cssxref(":invalid") }}Selecciona un elemento, como por ejemplo un <input>, cuyo estado es no válido.
{{ Cssxref(":lang") }}Selecciona un elemento según el idioma (valor del atributo lang de HTML).
{{ Cssxref(":last-child") }}Selecciona el último elemento de entre sus elementos hermanos.
{{ Cssxref(":last-of-type") }}Selecciona el último de entre los elementos hermanos de un tipo determinado.
{{ Cssxref(":left") }}En Paged Media selecciona las páginas de la izquierda.
{{ Cssxref(":link")}}Selecciona los enlaces no visitados.
{{ Cssxref(":local-link")}}Selecciona los enlaces que dirigen a páginas que se encuentran en la misma página web que el documento activo.
{{ Cssxref(":is", ":is()")}}Selecciona cualquiera de los selectores de la lista de selección que se pase como valor de este selector.
{{ Cssxref(":not") }}Selecciona elementos que otros selectores no han seleccionado antes y que se han pasado como valor de este selector.
{{ Cssxref(":nth-child") }}Selecciona elementos de entre una lista de elementos hermanos. Los elementos hermanos están relacionados por una fórmula del tipo an + b (por ejemplo, 2n + 1 seleccionaría los elementos 1, 3, 5, 7, etc., es decir, todos los impares).
{{ Cssxref(":nth-of-type") }}Selecciona elementos de entre una lista de elementos hermanos de un tipo determinado (por ejemplo, todos los elementos <p>). Los elementos hermanos están relacionados por una fórmula del tipo an + b (por ejemplo, 2n + 1 relacionaría en la secuencia ese tipo de elementos, los números 1, 3, 5, 7, etc., es decir, todos los impares).
{{ Cssxref(":nth-last-child") }}Selecciona elementos de entre una lista de elementos hermanos, contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo an+b (por ejemplo, 2n + 1 relacionaría en la secuencia el último de los elementos de este tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).
{{ Cssxref(":nth-last-of-type") }}Selecciona los elementos de entre una lista de elementos hermanos que son de un tipo determinado (por ejemplo, elementos <p>), contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo an+b (por ejemplo, 2n + 1 relacionaría en la secuencia el último de los elementos de ese tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).
{{ Cssxref(":only-child") }}Selecciona un elemento que no tiene elementos hermanos.
{{ Cssxref(":only-of-type") }}Selecciona un elemento que es el único de su tipo entre sus elementos hermanos.
{{ Cssxref(":optional") }}Selecciona los elementos de formulario que son innecesarios.
{{ Cssxref(":out-of-range") }}Selecciona un elemento cuyo valor está fuera de rango.
{{ Cssxref(":past") }}Selecciona los elementos que se encuentran antes del elemento activo.
{{ Cssxref(":placeholder-shown") }}Selecciona el elemento de entrada que muestra texto de marcador de posición.
{{ Cssxref(":playing") }}Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar», cuando el elemento está «en reproducción».
{{ Cssxref(":paused") }}Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede “«reproducir» o «pausar» cuando el elemento está «pausado».
{{ Cssxref(":read-only") }}Selecciona los elementos que el usuario no puede modificar.
{{ Cssxref(":read-write") }}Selecciona los elementos que el usuario puede modificar.
{{ Cssxref(":required") }}Selecciona los elementos de formulario que son necesarios.
{{ Cssxref(":right") }}En Paged Media selecciona las páginas de la derecha.
{{ Cssxref(":root") }}Selecciona un elemento que es la raíz del documento.
{{ Cssxref(":scope") }}Selecciona cualquier elemento de ámbito.
{{ Cssxref(":valid") }}Selecciona un elemento como <input>, en un estado válido.
{{ Cssxref(":target") }}Selecciona el elemento al que apunta la URL activa (es decir, cuyo ID coincide con el identificador de fragmento de la URL activo).
{{ Cssxref(":visited") }}Selecciona los enlaces visitados.
+ +

Pseudoelementos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorDescripción
{{ Cssxref("::after") }}Selecciona el elemento al que se puede aplicar estilo que aparece a continuación del contenido del elemento que lo origina.
{{ Cssxref("::before") }}Selecciona el elemento al que se puede aplicar estilo que aparece antes del contenido del elemento que lo origina.
{{ Cssxref("::first-letter") }}Selecciona la primera letra del elemento.
{{ Cssxref("::first-line") }}Selecciona la primera línea del elemento de contenido.
{{ Cssxref("::grammar-error") }}Selecciona una parte del documento que contiene un error de gramática indicado por el navegador.
{{ Cssxref("::selection") }}Selecciona la parte del documento que ha sido seleccionada.
{{ Cssxref("::spelling-error") }}Selecciona una parte del documento que contiene un error de ortografía indicado por el navegador.
+ +

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

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Elementos de imagen, de media y de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html b/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html new file mode 100644 index 0000000000..057c38c18d --- /dev/null +++ b/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html @@ -0,0 +1,154 @@ +--- +title: Selectores de atributo +slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

Como ya explicamos en los artículos de HTML, los elementos pueden tener atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan. En el CSS puedes utilizar selectores de atributo para seleccionar elementos definidos con unos atributos determinados. En este artículo veremos cómo utilizar estos selectores tan útiles.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Aprender a identificar y utilizar selectores de atributo.
+ +

Selectores de presencia y valor

+ +

Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo href) o a partir de varias coincidencias diferentes con respecto al valor del atributo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorEjemploDescripción
[attr]a[title]Relaciona elementos con un mismo nombre de atributo, attr (el valor que se indica entre corchetes).
[attr=value]a[href="https://example.com"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente el mismo, value (la cadena de caracteres que se indica entre corchetes).
[attr~=value]p[class~="special"] +

Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor es exactamente value, o los elementos con un mismo atributo attr que contiene uno o más valores de los cuales, al menos uno, coincide con value.

+ +

Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio.

+
[attr|=value]div[lang|="zh"]Relaciona los elementos con un mismo nombre de atributo, attr, cuyo valor puede ser exactamente value o puede comenzar con value seguido inmediatamente por un guion.
+ +

En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Selectores coincidentes con subcadenas

+ +

Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases box-warning y box-error y quieres encontrar todos los elementos que empiezan con la cadena de caracteres “box-”, puedes seleccionarlas ambas con [class^="box-"].

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorEjemploDescripción
[attr^=value]li[class^="box-"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor empieza exactamente con la subcadena de caracteres value.
[attr$=value]li[class$="-box"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor termina exactamente con la subcadena de caracteres value.
[attr*= ]li[class*="box"]Relaciona elementos con un mismo nombre de atributo, attr, cuyo valor incluye al menos una ocurrencia de la subcadena value en algún punto de la cadena.
+ +

El ejemplo siguiente muestra cómo se usan estos selectores:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Mayúsculas y minúsculas

+ +

Si quieres relacionar los valores de atributo tanto si están escritos en mayúsculas como en minúsculas, puedes utilizar el valor i antes del paréntesis de cierre. Este indicador informa al navegador de que debe relacionar todos los caracteres ASCII independientemente de si las letras son mayúsculas o minúsculas. Sin este indicador, los valores se relacionarán según las directrices del lenguaje del documento con respecto a la distinción entre mayúsculas y minúsculas; en el caso del HTML, se distinguirá entre mayúsculas y minúsculas.

+ +

En el ejemplo siguiente, el primer selector relaciona valores que empiezan con a; luego, solo coincide el primer elemento de la lista porque los otros dos comienzan con una A mayúscula. El segundo selector utiliza el indicador de no distinción entre mayúsculas y minúsculas, así que relaciona todos los elementos de la lista.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Nota: Recientemente se ha creado un valor s, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.

+
+ +

Próximos pasos

+ +

Ahora que hemos terminado con los selectores de atributo, puedes avanzar al artículo siguiente y leer acerca de los selectores de pseudoclases y pseudoelementos.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html b/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html new file mode 100644 index 0000000000..01b3963f8a --- /dev/null +++ b/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html @@ -0,0 +1,117 @@ +--- +title: 'Selectores de tipo, clase e ID' +slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

En este artículo vamos a echar un vistazo a los selectores más simples de que dispones y que seguramente serán los que utilices con mayor frecuencia.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con CSS).
Objetivo:Conocer los diferentes selectores CSS que podemos utilizar para aplicar CSS a un documento.
+ +

Tipos de selectores

+ +

Un selector de tipo también recibe el nombre de selector de nombre de etiqueta o selector de elemento porque selecciona un elemento/etiqueta HTML del documento. En el ejemplo siguiente hemos utilizado los selectores span, em y strong. Se aplica estilo a todas las instancias de los elementos <span>, <em> y <strong>.

+ +

Trata de añadir una regla CSS que seleccione el elemento <h1> y cambie su color para que se vea azul.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

El selector universal

+ +

El selector universal se indica con un asterisco (*) y selecciona todos los elementos del documento (o del elemento padre si está encadenado con otro elemento y un operador de combinación descendente, por ejemplo). En el ejemplo siguiente hemos utilizado el selector universal para eliminar los márgenes en todos los elementos. Esto significa que en lugar de la opción predeterminada de aplicación de estilos del navegador, que muestra los títulos de encabezado y los párrafos separados por un margen de respeto, todo se mostrará pegado y no resultará tan fácil distinguir los diversos párrafos.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

Es posible observar este tipo de comportamiento en las «hojas de estilo de puesta a cero» (o «hojas de estilo reset»), que anulan el formato del navegador. Fueron muy populares en un momento dado; sin embargo, excluir todo el estilo significa que luego tienes que ponerlo todo de nuevo. Por este motivo tendemos a utilizar el selector universal con mucho cuidado, y para situaciones muy específicas como la que se describe a continuación.

+ +

Uso del selector universal para facilitar la legibilidad de tus selectores

+ +

Uno de los usos del selector universal es facilitar la legibilidad de los selectores y clarificar sus funciones. Por ejemplo, si quiero seleccionar el primer elemento hijo de cualquier elemento <article> y poner ese elemento, cualquiera que sea, en negrita, puedo utilizar el selector {{cssxref(":first-child")}}, que veremos con mayor detalle más adelante en el artículo de pseudoclases y pseudoelementos, como selector descendente junto con el selector de elemento <article>: 

+ +
article :first-child {
+
+}
+ +

Sin embargo, esto podría confundirse con article:first-child, que selecciona cualquier elemento <article> que sea el primer elemento hijo de otro elemento.

+ +

Para evitar esta confusión podemos añadir al selector :first-child el selector universal. De este modo la función del selector resulta obvia: seleccionará cualquier elemento que entre en la jerarquía de primer hijo de un elemento <article>:

+ +
article *:first-child {
+
+}
+ +

Selectores de clase

+ +

El selector de clase comienza con un punto (.) y selecciona todo elemento del documento que esté afectado por esa clase. En el ejemplo siguiente hemos creado una clase llamada .highlight y la hemos aplicado en varios lugares del documento. Todos los elementos a los que se aplique esta clase se resaltarán en amarillo.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Delimitación de clases en elementos particulares

+ +

Puedes crear un selector que seleccionará los elementos concretos que estén afectados por esa clase. En el ejemplo siguiente vamos a introducir un resaltado en un elemento <span> con una clase highlight del de los títulos <h1> con clase highlight. Para ello hay que anexar esa clase al selector de tipo correspondiente al elemento que queremos delimitar, sin dejar entre ellos ningún espacio.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Este enfoque hace el elemento CSS menos reutilizable porque la clase solo se aplicará a ese elemento en particular y tendrás que agregar otro selector en caso que quieras que las normas también se apliquen a otros elementos.

+ +

Delimitar un elemento afectado por más de una clase

+ +

Puedes aplicar más de una clase a un elemento y delimitarlos de forma individual o seleccionar el elemento cuando todas las clases están presentes en el selector. Puede ser útil cuando se trabaja con componentes que se pueden combinar de maneras diferentes en tu página web.

+ +

En el ejemplo siguiente hay un elemento <div> que contiene una nota. El borde gris se aplica cuando la caja tiene una clase notebox. Si además tiene una clase warning o danger, la propiedad {{cssxref("border-color")}} cambia.

+ +

Para decirle al navegador que solo queremos seleccionar el elemento si incluye todas estas clases, las encadenamos juntas sin ningún espacio entre ellas.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Selectores de ID

+ +

Un selector de ID comienza con un carácter # en lugar de un punto, pero se utiliza básicamente de la misma manera que un selector de clase. Sin embargo, un ID se puede utilizar una sola vez en cada documento, y a cada elemento solo se le puede aplicar un único id. Puede seleccionar un elemento que tenga propiedad id y ese ID puede ir precedido de un selector de tipo que seleccionará el elemento solo si el elemento y el ID coinciden. En el ejemplo siguiente puedes ver todos estos usos:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Nota: Como aprendimos en el artículo sobre la especificidad, un ID tiene una especificidad muy alta y anula la mayoría de los otros selectores. Esto puede dificultar su uso. En la mayoría de los casos es preferible añadir una clase al elemento en lugar de utilizar un ID. Sin embargo, si el ID es la única manera de seleccionar el elemento (tal vez porque no tengas acceso al marcado y, por lo tanto, no lo puedes editar) no hay ningún problema en utilizarlo.

+
+ +

En el próximo artículo

+ +

Seguiremos con la descripción de los selectores examinando los selectores de atributo.

+ +

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

+ +

En este módulo

+ +
    +
  1. La cascada y la herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git a/files/es/learn/css/building_blocks/styling_tables/index.html b/files/es/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..283df180e4 --- /dev/null +++ b/files/es/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,282 @@ +--- +title: Estilizando tablas +slug: Learn/CSS/Building_blocks/Styling_tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}
+ +

Aplicar estilos a una tabla HTML no es el trabajo más interesante del mundo, pero a veces hay que hacerlo. Este artículo proporciona una guía para hacer que las tablas HTML presenten un aspecto agradable, para ello usaremos algunas de las características específicas para tablas que hemos destacado en artículos anteriores.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de HTML (véase Introducción a HTML) y tablas HTML, y nociones de cómo funciona el CSS (véase Introducción al CSS.)
Objetivo:Aprender a aplicar estilo a tablas HTML de una forma efectiva.
+ +

Una tabla HTML típica

+ +

Comencemos por echar un vistazo a una tabla HTML típica. Bueno, decimos típica porque la mayoría de los ejemplos de tablas HTML son sobre zapatos, el tiempo o empleados; y hemos decidido hacer las cosas más interesantes creando una tabla sobre grupos de música punk famosos del Reino Unido. El código es el siguiente:

+ +
<table summary="Los grupos de música punk más famosos del Reino Unido">
+  <caption>Un resumen de los grupos de música punk más famosos del Reino Unido</caption>
+  <thead>
+    <tr>
+      <th scope="col">Grupo</th>
+      <th scope="col">Año de formación</th>
+      <th scope="col">Número de álbumes</th>
+      <th scope="col">Canción más conocida</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
+
+      ... se han eliminado algunas filas por abreviar
+
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colspan="2">Número total de álbumes</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+ +

La tabla está bien creada, puede aplicársele estilo fácilmente y presenta características de accesibilidad gracias a propiedades como {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlattrxref("summary","table")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Por desgracia, no presenta un aspecto agradable cuando se muestra en pantalla (puedes ver el ejemplo en punk-bands-unstyled.html):

+ +

+ +

Tal y como está, es aburrida y difícil de leer. Necesitamos usar algo de CSS para arreglar esto.

+ +

Aprendizaje activo: Aplicar estilo a nuestra tabla

+ +

En esta sección de aprendizaje activo vamos a aplica estilo a nuestra tabla juntos.

+ +
    +
  1. Para comenzar, crea una copia local del código de ejemplo, descarga las dos imágenes (noise y leopardskin), y pon los tres archivos en alguna carpeta de tu ordenador.
    2. +
  2. Ahora crea un archivo nuevo llamado style.css y guárdalo con el resto de archivos, en la misma carpeta.
    3. +
  3. Enlaza el CSS al HTML copiando la línea siguiente en {{htmlelement("head")}}: + 
    <link href="style.css" rel="stylesheet" type="text/css">
    +
    4. +
+ +

Espaciado y distribución

+ +

Lo primero que hay que hacer es solucionar los aspectos de espaciado/distribución; ¡el estilo por defecto de la tabla es tan apretado! Para ello, añadimos el CSS siguiente al archivo style.css:

+ +
/* spacing */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}
+ +

Las partes más importantes que destacamos son:

+ + + +

En este punto, nuestra tabla ya presenta un aspecto mucho más agradable:

+ +

+ +

Un poco de tipografía

+ +

Ahora arreglaremos un poco nuestro texto.

+ +

En primer lugar, hemos ido a Google Fonts y hemos encontrado un tipo de letra adecuado para una tabla sobre bandas punk. Puedes buscar uno diferente si lo deseas; solo tienes que reemplazar el elemento {{htmlelement ("link")}} que te hemos proporcionado y la declaración {{cssxref ("font-family")}} personalizada por las que te proporcione Google Fonts.

+ +

Primero, añade el elemento {{htmlelement ("link")}} siguiente a tu encabezado HTML, justo encima del elemento <link>:

+ +
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+ +

Ahora añade el CSS siguiente a tu archivo style.css, debajo de la línea añadida anterior:

+ +
/* typography */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}
+ +

En realidad aquí no hay nada que sea específico para las tablas. En general, modificamos el estilo de la letra para facilitar la lectura:

+ + + +

El resultado se ve un poco más limpio:

+ +

+ +

Gráficos y colores

+ +

Ahora, ¡a por los gráficos y los colores! Puesto que la tabla rezuma contenido y actitud punk, vamos a darle un brillante estilo imponente que le pegue. No te preocupes, no tienes que hacer tus tablas tan extremadas: puedes optar por algo más sutil y de buen gusto.

+ +

Empieza añadiendo el CSS siguiente a tu archivo style.css, de nuevo al final:

+ +
thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+
+ +

Una vez más, aquí no hay nada específico para las tablas, pero vale la pena señalar algunas cosas.

+ +

Hemos añadido una imagen de fondo ({{cssxref("background-image")}}) a los elementos {{htmlelement("thead")}} y {{htmlelement("tfoot")}}, y hemos cambiado el ({{cssxref("color")}}) de todo el texto del encabezado y el pie de página por el blanco (y le hemos dado una sombra, {{cssxref("text-shadow")}}) para que sea legible. Siempre debes asegurarte de que tu texto contraste bien con el fondo, para que sea legible.

+ +

También hemos añadido un degradado lineal a los elementos {{htmlelement("th")}} y {{htmlelement("td")}} del encabezado y el pie de página para obtener un poco de textura, y también hemos dado a esos elementos un borde púrpura brillante. Es útil tener múltiples elementos anidados disponibles para que puedas superponer estilos. Sí, podríamos haber colocado tanto la imagen de fondo como el gradiente lineal en los elementos {{htmlelement ("thead")}} y {{htmlelement ("tfoot")}} utilizando múltiples imágenes de fondo, pero decidimos hacerlo por separado por los navegadores más antiguos que no admiten múltiples imágenes de fondo o gradientes lineales.

+ +

Rayas de cebra

+ +

Queremos dedicar una sección independiente a mostrarte cómo implementar rayas de cebra, alternando filas de color que facilitan el análisis y la legibilidad de las diversas filas de datos de la tabla. Añade el CSS siguiente al final de tu archivo style.css:

+ +
tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}
+ + + +

Esta explosión de colores da como resultado el aspecto siguiente:

+ +

+ +

Esto puede quedar un poco exagerado y no ser de tu agrado, pero el punto que tratamos de explicar es que las tablas no tienen por qué ser aburridas ni académicas.

+ +

Aplicar estilo al título

+ +

Hay una última cosa que hacer con nuestra tabla: aplicar estilo al título. Para ello, añade al final de tu archivo style.css lo siguiente:

+ +
caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}
+ +

Aquí no hay nada notable, excepto la propiedad {{cssxref ("caption-side")}}, a la que se le ha dado un valor bottom. Esto coloca el título en la parte inferior de la tabla, lo que junto con el resto de declaraciones nos proporciona este aspecto final (puedes verlo vivo en punk-bands-complete.html):

+ +

+ +

Aprendizaje activo: Aplica estilo a tu tabla

+ +

En este punto, nos gustaría que tomes nuestro ejemplo de tabla HTML (¡o que uses uno propio!) y que le apliques estilo para obtener algo considerablemente mejor diseñado y menos llamativo que nuestra tabla.

+ +

Consejos rápidos para el diseño de tablas

+ +

Antes de seguir adelante, creemos que tendríamos que proporcionar una lista rápida de los puntos más útiles que acabamos de ilustrar:

+ + + +

Resumen

+ +

Después de aplicar estilo a las tablas, necesitamos algo más en que ocupar nuestro tiempo. El artículo siguiente expone la depuración de documentos CSS, es decir, cómo resolver problemas como diseños de página que no presentan el aspecto que deberían, o propiedades que no se aplican cuando crees que deberían aplicarse. Esto incluye información sobre el uso de las herramientas DevTools del navegador para hallar soluciones a tus problemas.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}

diff --git a/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html b/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html new file mode 100644 index 0000000000..4470746bc8 --- /dev/null +++ b/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html @@ -0,0 +1,392 @@ +--- +title: Valores y unidades CSS +slug: Learn/CSS/Building_blocks/Valores_y_unidades_CSS +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de valores que esa propiedad admite, y echar un vistazo a cualquier página de propiedades en MDN te ayudará a comprender qué valores admite una propiedad en particular. En este artículo veremos algunos de los valores y unidades más comunes en uso.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajar con archivos, HTML básico (véase Introducción a HTML) y nociones de cómo funciona el CSS (véase Primeros pasos con el CSS).
Objetivo:Conocer los diferentes tipos de valores y unidades que admiten las propiedades CSS.
+ +

¿Qué es un valor CSS?

+ +

En las especificaciones CSS y en las páginas de propiedades de este proyecto MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como <color> o <length>. Cuando veas que el valor <color> es válido para una propiedad en particular, significa que para esa propiedad puedes usar como valor cualquier color válido de entre los que se enumeran en la página de referencia de la propiedad <color>.

+ +
+

Nota: También verás valores CSS denominados tipos de datos. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado ‘tipo de datos’, en realidad es solo una forma elegante de decir ‘valor’.

+
+ +
+

Nota: Sí, hay una tendencia de denotar los valores CSS entre corchetes angulares, para diferenciarlos de las propiedades CSS (por ejemplo, la propiedad {{cssxref ("color")}} con respecto al tipo de dato <color>). Aunque podría generarte confusión entre los tipos de datos CSS y los elementos HTML, porque ambos usan corchetes angulares, es poco probable porque se usan en contextos muy diferentes.

+
+ +

En el ejemplo siguiente hemos establecido el color de nuestro encabezado con una palabra clave y el fondo con la función rgb():

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves <color> como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones rgb(), etc. Puedes usar cualquier valor <color> disponible siempre que tu navegador lo admita. La página de MDN te dará información sobre lo que admite cada navegador para cada valor. Por ejemplo, puedes ver que en la sección de compatibilidad de navegadores de la página para <color> se enumeran diferentes tipos de valores de color y los navegadores que los admiten.

+ +

Echemos un vistazo a algunos de los tipos de valores y unidades con los que puedes encontrar con frecuencia, con ejemplos para que puedas probar diferentes valores posibles.

+ +

Números, longitudes y porcentajes

+ +

Al utilizar CSS te puedes encontrar con varios tipos de datos numéricos. Todos los siguientes están clasificados como tipos de datos numéricos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de datosDescripción
<integer>Un <integer> es un número entero, como 1024 o -55.
<number>Un <number> representa un número decimal; puede tener o no un punto de separación decimal con un componente fraccionario, por ejemplo: 0,255, 128 o -1,2.
<dimension>Una <dimension> es un <number> con una unidad asociada, por ejemplo: 45deg (grados), 5s (segundos) o 10px (píxeles). <dimension> es una categoría general que incluye los tipos <length>, <angle>, <time> y <resolution>.
<percentage>Un <percentage> representa una fracción de algún otro valor, por ejemplo, 50%. Los valores de porcentaje siempre son relativos a otra cantidad, por ejemplo, la longitud de un elemento es relativa a la longitud de su elemento padre.
+ +

Longitudes

+ +

El tipo numérico con el que te vas a encontrar con mayor frecuencia es <length>, por ejemplo, 10px (píxeles) o 30em. En CSS se utilizan dos longitudes diferentes: relativa y absoluta. Es importante conocer la diferencia para entender qué dimensiones van a tener las cosas.

+ +

Unidades de longitud absoluta

+ +

Todas las unidades siguientes son unidades de longitud absoluta: no son relativas a nada más y en general se considera que siempre tienen el mismo tamaño.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnidadNombreEquivale a
cmCentímetros1cm = 96px/2,54
mmMilímetros1mm = 1/10 de 1cm
QCuartos de milímetros1Q = 1/40 de 1cm
inPulgadas1in = 2,54cm = 96px
pcPicas1pc = 1/16 de 1in
ptPuntos1pt = 1/72 de 1in
pxPíxeles1px = 1/96 de 1in
+ +

La mayoría de estos valores son más útiles cuando se usan en una salida en formato impreso que en la salida de pantalla. Por ejemplo, normalmente no usamos cm (centímetros) en pantalla. El único valor que usarás de forma frecuente es px (píxeles).

+ +

Unidades de longitud relativa

+ +

Las unidades de longitud relativa son relativas a algo más, por ejemplo, al tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto u otros elementos escalen en relación con todo lo demás en la página. En la tabla siguiente se enumeran algunas de las unidades más útiles para el desarrollo web.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnidadRelativa a
emTamaño de letra del elemento padre, en el caso de propiedades tipográficas como {{cssxref("font-size")}}, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como {{cssxref("width")}}.
exAltura x de la fuente del elemento.
chLa medida de avance (ancho) del glifo "0" de la letra del elemento.
remTamaño de la letra del elemento raíz.
lhAltura de la línea del elemento.
vw1% del ancho de la ventana gráfica.
vh1% de la altura de la ventana gráfica.
vmin1% de la dimensión más pequeña de la ventana gráfica.
vmax1% de la dimensión más grande de la ventana gráfica.
+ +

Un ejemplo de análisis

+ +

En el ejemplo siguiente puedes ver cómo se comportan algunas unidades de longitud relativa y absoluta. La primera caja tiene un ancho ({{cssxref ("width")}}) establecido en píxeles. Como unidad absoluta, este ancho será siempre el mismo aunque lo demás cambie.

+ +

La segunda caja tiene un ancho establecido en unidades vw (ancho de ventana). Este valor es relativo al ancho de la ventana gráfica, por lo que 10vw es el 10 por ciento del ancho de la ventana gráfica. Si cambiases el ancho de la ventana de tu navegador, el tamaño de la caja cambiaría. Sin embargo, esto no te va a funcionar porque este ejemplo se ha incrustado en la página usando <iframe>. Para verlo en acción debes probar el ejemplo después de abrirlo en una pestaña independiente de tu navegador.

+ +

La tercera caja utiliza unidades em. Son unidades relativas al tamaño de la letra. Hemos establecido un tamaño de fuente de 1em en el contenido {{htmlelement ("div")}}, que tiene una clase .wrapper. Si cambias este valor a 1.5em, verás que el tamaño de letra de todos los elementos aumenta, pero solo se amplía el ancho en el último elemento, porque el ancho es relativo a ese tamaño de letra.

+ +

Después de seguir las instrucciones anteriores, juega un poco más con los valores para ver qué obtienes.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems y rems

+ +

em y rem son las dos longitudes relativas que es probable que encuentres con mayor frecuencia al cambiar el tamaño de cualquier cosa, de cajas a texto. Vale la pena entender cómo funcionan y las diferencias entre ellos, especialmente cuando comienzas a abordar temas más complejos como aplicar estilos a texto o compaginar con CSS. El ejemplo siguiente te proporciona una muestra.

+ +

El HTML es un conjunto de listas anidadas: hay tres listas en total y ambos ejemplos tienen el mismo HTML. La única diferencia es que el primero tiene una clase ems y el segundo una clase rems.

+ +

Para empezar, configuramos un tamaño de letra de 16px en el elemento <html>.

+ +

En definitiva, la unidad em significa «el tamaño de letra de mi elemento padre». Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de ems toman el tamaño con respecto a su elemento padre. Por lo tanto, en cada nivel de anidamiento sucesivo, el tamaño de letra aumenta progresivamente, porque en cada uno el tamaño de letra está establecido en 1.3em (1,3 veces el tamaño de letra de su elemento padre).

+ +

En definitiva, la unidad rem significa «el tamaño de letra del elemento raíz». (‘rem’ viene de «root em»). Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de rems toman su tamaño del elemento raíz (<html>). Esto significa que el tamaño de letra no aumenta en cada nivel sucesivo de anidamiento.

+ +

Sin embargo, si cambias el atributo font-size de <html> en el CSS, verás que todo lo demás cambia en relación con él, tanto la letra cuyo tamaño está especificado en unidades rem como la que lo está en unidades em.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Porcentajes

+ +

En muchos casos, un porcentaje es tratado de la misma manera que una longitud. Lo que sucede con los porcentajes es que siempre se establecen en relación con otro valor. Por ejemplo, si estableces el atributo font-size de un elemento como un porcentaje, será un porcentaje del font-size del elemento padre. Si usas un porcentaje para un valor width, será un porcentaje del atributo width del elemento padre.

+ +

En el ejemplo siguiente, las dos cajas con el tamaño especificado en unidades de porcentaje y las dos cajas con el tamaño especificado en unidades de píxel tienen los mismos nombres de clase. En ambos conjuntos de cajas, los anchos de las cajas son de 200 píxeles y de 40%, respectivamente.

+ +

La diferencia es que el segundo conjunto de dos cajas está dentro de un contenedor que tiene 400 píxeles de ancho. La segunda caja de 200 px de ancho tiene el mismo ancho que la primera, pero la segunda caja de 40% ahora es el 40% de 400 px, ¡mucho más estrecha que la primera!

+ +

Cambia el ancho del contenedor o el valor de porcentaje para ver cómo funciona.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

El ejemplo siguiente tiene tamaños de letra establecidos en porcentajes. Cada elemento <li> tiene un atributo font-size del 80%, por lo tanto, los elementos de la lista anidada se vuelven progresivamente más pequeños a medida que heredan su tamaño del elemento padre.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Observa que aunque muchos valores admiten unidades de longitud o porcentaje, algunos solo admiten unidades de longitud. Puedes ver qué valores admite cada propiedad en las páginas de referencia correspondientes del proyecto MDN. Si el valor admitido incluye <length-percentage>, puedes usar una unidad de longitud o un porcentaje. Si el valor admitido solo incluye <length>, no es posible utilizar un porcentaje.

+ +

Números

+ +

Algunos valores aceptan números sin ninguna unidad asociada. Un ejemplo de una propiedad que acepta un número sin unidades es la propiedad opacity, que controla la opacidad de un elemento (cuán transparente es). Esta propiedad admite un número entre 0 (totalmente transparente) y 1 (totalmente opaco).

+ +

En el ejemplo siguiente, asigna al valor de opacity diversos valores decimales entre 0 y 1 para ver cómo la caja y su contenido cambian su opacidad.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Nota: Cuando en CSS utilizas un número como valor, no debe estar entre comillas.

+
+ +

Color

+ +

En CSS hay muchas formas de especificar el color, algunas de las cuales se implementaron más recientemente que otras. En todas partes en CSS se pueden usar los mismos valores de color, tanto para especificar el color del texto como el color de fondo, o de cualquier otra cosa.

+ +

El sistema de colores estándar disponible en los ordenadores modernos es de 24 bits, lo que permite visualizar aproximadamente 16,7 millones de colores distintos a partir de una combinación de diferentes canales de rojo, verde y azul con 256 valores diferentes por canal (256 x 256 x 256 = 16.777.216). Echemos un vistazo a algunas de las formas en que podemos especificar colores en CSS.

+ +
+

Nota: En este artículo vamos a ver los métodos comunes para especificar colores que admiten los navegadores; hay otros métodos no tan comunes que no admiten todos los navegadores.

+
+ +

Palabras clave para los colores

+ +

Muy a menudo, en los ejemplos de este artículo o en cualquier otra página de MDN, verás que se utilizan las palabras clave para los colores, ya que son una forma simple y comprensible de especificar colores. Hay una multitud de estas palabras clave, ¡algunas de las cuales tienen nombres de lo más curiosos! Puedes ver una lista completa en la página para el valor <color>.

+ +

Juega con diferentes valores de color en los ejemplos en vivo que encontrarás a continuación, para adquirir una idea más clara de cómo funcionan.

+ +

Los valores hexadecimales RGB

+ +

El siguiente tipo de valores de color que es probable que encuentres son los códigos hexadecimales. Cada valor hexadecimal consiste en un símbolo de hashtag/almohadilla (#) seguido de seis cifras hexadecimales, cada una de las cuales puede tomar uno de los 16 valores entre el 0 y la f (que representa el 15), por ejemplo: 0123456789abcdef. Cada par de cifras representa uno de los canales (rojo, verde y azul) y nos permite especificar cualesquiera de los 256 valores disponibles para cada uno (16 x 16 = 256).

+ +

Estos valores son un poco más complejos y menos fáciles de entender, pero son mucho más versátiles que las palabras clave: puedes usar valores hexadecimales para representar cualquier color que desees usar en tu combinación de colores.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Una vez más, cambia los valores para ver cómo varían los colores.

+ +

Valores RGB y RGBA

+ +

El tercer esquema del que hablaremos aquí es RGB. Un valor RGB es una función rgb() que recibe tres parámetros que representan los valores de los canales rojo, verde y azul del color, de modo muy similar a los valores hexadecimales. La diferencia con RGB es que cada canal está representado no por dos dígitos hexadecimales, sino por un número decimal entre el 0 y el 255, lo que de algún modo resulta algo más fácil de entender.

+ +

Vamos a reescribir nuestro último ejemplo para utilizar colores RGB:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

También puedes usar colores RGBA: estos funcionan exactamente de la misma manera que los colores RGB, por lo que puedes usar cualquier valor RGB; sin embargo, hay un cuarto valor que representa el canal alfa del color, que controla la opacidad. Si estableces este valor en 0, el color será completamente transparente, mientras que en 1 será completamente opaco. Los valores intermedios le confieren diferentes niveles de transparencia.

+ +
+

Nota: Establecer un canal alfa en un color representa una diferencia clave para usar la propiedad {{cssxref ("opacity")}} que vimos anteriormente. Cuando usas la opacidad, el elemento y todo lo que contiene es opaco, mientras que cuando usas colores RGBA, solo son opacos los que especificas.

+
+ +

En el ejemplo siguiente hemos añadido una imagen de fondo al bloque que contiene nuestras cajas de color. También hemos configurado las cajas para que tengan diferentes valores de opacidad: observa que el fondo se muestra más cuanto menor es el valor del canal alfa.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

En este ejemplo, cambia los valores del canal alfa y observa cómo afecta a la salida de color.

+ +
+

Nota: En algún momento, los navegadores modernos se actualizaron para que rgba() y rgb(), y hsl() y hsla() (ver más abajo) se convirtieran en alias puros el uno del otro y comenzaran a comportarse exactamente igual. Así, por ejemplo, tanto rgba() como rgb() admiten colores con y sin valores de canal alfa. Cambia el rgba() del ejemplo anterior por rgb() y observa si los colores aún funcionan. El estilo que uses depende de ti, pero separar las definiciones de los colores transparentes y las de los no transparentes con el uso de funciones diferentes mejora la ejecución de los navegadores y puede actuar como un indicador visual de dónde se definen colores transparentes en tu código.

+
+ +

Los valores HSL y HSLA

+ +

Un poco menos compatible que RGB es el modelo de color HSL (no compatible con las antiguas versiones de Internet Explorer), que se implementó después de mucha insistencia por parte de los diseñadores. En lugar de los valores rojo, verde y azul, la función hsl() admite valores de matiz, saturación y luminosidad, que se utilizan para distinguir entre los 16,7 millones de colores, pero de una manera diferente:

+ + + +

Podemos adaptar el ejemplo con colores RGB para usar colores HSL, así:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

Al igual que RGB tiene un equivalente RGBA, HSL tiene un equivalente HSLA, que le proporciona la misma capacidad para especificar el canal alfa. Demostramos esto a continuación cambiando nuestro ejemplo RGBA para usar colores HSLA.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

Puedes usar cualquiera de estos valores de color en tus proyectos. Es probable que para la mayoría de los proyectos te decidas por una paleta de colores y luego uses esos colores (y tu método elegido para especificar el color) en todo el proyecto. También puedes mezclar y combinar diversos modelos de color, sin embargo, por coherencia, en general es mejor si todo el proyecto usa el mismo.

+ +

Imágenes

+ +

El tipo de datos <image> se usa cuando una imagen es un valor válido. Puede ser un archivo de imagen real al que apunta una función url(), o un degradado.

+ +

En el ejemplo siguiente mostramos una imagen y un gradiente en uso como un valor para la propiedad CSS background-image.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Nota: hay otros valores posibles para <image>, pero son más nuevos y aún hay pocos navegadores que los admiten. Consulta la página de MDN para el tipo de dato <image> si deseas saber más sobre ellos.

+
+ +

Posición

+ +

El tipo de dato <position> representa un conjunto de coordenadas 2D que se utiliza para colocar un elemento, por ejemplo una imagen de fondo (con el atributo background-position). Puede tomar palabras clave como top, left, bottom, right y center para alinear los elementos con los límites específicos de una caja de dos dimensiones, y también longitudes, que representan desplazamientos desde los bordes superior e izquierdo de la caja.

+ +

Un valor de posición típico consta de dos valores: el primero establece la posición horizontal, y el segundo la vertical. Si solo especificas valores para un eje, el otro usará center por defecto.

+ +

En el ejemplo siguiente hemos colocado una imagen de fondo a 40px de la parte superior, y a la derecha del contenedor con una palabra clave.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Juega un poco con estos valores y observa cómo cambia la posición de la imagen.

+ +

Cadenas e identificadores

+ +

En los ejemplos anteriores hemos visto casos en que se usan palabras clave como valores (por ejemplo, palabras clave para <color>, como red, black, rebeccapurple y goldenrod). Estas palabras clave normalmente se describen como identificadores, un valor especial que el CSS entiende. Como tales, no se escriben entre comillas (es decir, no se tratan como cadenas).

+ +

Hay casos en el CSS en que debes usar cadenas, por ejemplo, al especificar el contenido que generas. En este caso, el valor se escribe entre comillas para mostrar que se trata de una cadena de caracteres. En el ejemplo siguiente hemos usado palabras clave para el color, sin entrecomillar, y también una cadena caracteres, de contenido generado, entrecomillada.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Funciones

+ +

El último tipo de valor que vamos a analizar es el grupo de valores conocidos como funciones. En programación, una función es un bloque de código reutilizable que es posible ejecutar varias veces para completar una tarea repetitiva con el mínimo esfuerzo tanto por parte del desarrollador como del ordenador. Las funciones suelen asociarse a lenguajes como JavaScript, Python o C++, pero también hay funciones en CSS, como valores de código propietario. Ya hemos visto funciones en acción en la sección sobre los colores: rgb(), hsl(), etc. El valor que se utiliza para devolver una imagen de un archivo, en este caso url(), también es una función.

+ +

Un valor que se comporta más como algo que puedes encontrar en un lenguaje de programación tradicional es la función calc(). Esta función te proporciona la capacidad de hacer cálculos simples en tu CSS. Es particularmente útil si deseas calcular valores que no puedes definir al escribir el CSS para tu proyecto y necesitas que el navegador lo haga durante la ejecución.

+ +

Por ejemplo, a continuación usamos calc() para hacer que la caja tenga 20% + 100px de ancho. El 20% se calcula a partir del ancho del contenedor principal .wrapper y, por lo tanto, cambiará si ese ancho cambia. No podemos hacer este cálculo de antemano porque no sabemos cuál será el 20% del elemento padre, por lo que usamos calc() para decirle al navegador que lo haga por nosotros.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Pon a prueba tus conocimientos

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar que retienes esa información antes de seguir en Test your skills: Values and units.

+ +

Resumen

+ +

Esta ha sido una revisión rápida de los tipos de valores y unidades más comunes que te puedes encontrar. Puedes echar un vistazo a todos los diferentes tipos en la página de referencia de valores y unidades CSS; encontrarás muchos de estos mientras trabajas en estos artículos.

+ +

Lo que debes recordar es que cada propiedad tiene una lista definida de valores admisibles, y cada valor incluye una definición que explica cuáles son sus subvalores. A continuación puedes buscar los detalles aquí, en MDN.

+ +

Por ejemplo, comprender que <image> también te permite crear un degradado de color es útil, ¡pero quizás no sea un conocimiento obvio!

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

En este módulo

+ +
    +
  1. Cascada y herencia
    2. +
  2. Selectores CSS + +
    3. +
  3. El modelo de caja
    4. +
  4. Fondos y bordes
    5. +
  5. El uso de diferentes direcciones de texto
    6. +
  6. El desbordamiento de los contenidos
    7. +
  7. Los valores y las unidades
    8. +
  8. Elementos de dimensionado en CSS
    9. +
  9. Imágenes, media y elementos de formulario
    10. +
  10. Aplicar estilo a las tablas
    11. +
  11. Depurar el CSS
    12. +
  12. Organizar el CSS
    13. +
diff --git "a/files/es/learn/css/css_layout/dise\303\261o_receptivo/index.html" "b/files/es/learn/css/css_layout/dise\303\261o_receptivo/index.html" new file mode 100644 index 0000000000..4ddb7a94db --- /dev/null +++ "b/files/es/learn/css/css_layout/dise\303\261o_receptivo/index.html" @@ -0,0 +1,324 @@ +--- +title: Diseño receptivo +slug: Learn/CSS/CSS_layout/Diseño_receptivo +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

En los primeros días del diseño web, las páginas se diseñaban para llenar un tamaño de pantalla en particular. Si el usuario tenía una pantalla más grande o más pequeña que la del diseñador, los resultados esperados iban desde barras de desplazamiento no deseadas hasta longitudes de línea excesivamente largas y un mal uso del espacio. A medida que estuvieron disponibles tamaños de pantalla más diversos, apareció el concepto de diseño web responsivo (RWD, responsive web design), un conjunto de prácticas que permite a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma en que diseñamos para una web multidispositivo, y en este artículo te ayudaremos a comprender las principales técnicas que necesitas saber para dominarlo.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Primeros pasos en CSS y Los elementos básicos del CSS).
Objetivo:Comprender los conceptos fundamentales y la historia del diseño responsivo.
+ +

Diseños de sitios web históricos

+ +

En un momento de la historia, solo tenías dos opciones al diseñar un sitio web:

+ + + +

Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor ¡en la pantalla de la persona que diseñaba el sitio! El sitio líquido dio como resultado un diseño encogido en las pantallas que eran más pequeñas (como se ve a continuación) o longitudes de línea interminables en las pantallas que eran más grandes.

+ +
Un diseño de página con dos columnas encogidas en una ventana gráfica del tamaño de un teléfono móvil. +
+
+ +
+

Nota: Observa este ejemplo y su código fuente de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.

+
+ +

El sitio de ancho fijo se arriesgaba a una barra de desplazamiento horizontal en pantallas que eran más pequeñas que el ancho del sitio (como se ve a continuación), y a un gran espacio en blanco en los bordes del diseño en las pantallas que eran más grandes.

+ +
Un diseño con una barra de desplazamiento horizontal en una ventana de teléfono móvil. +
+
+ +
+

Nota: Observa este ejemplo y su código fuente de un diseño sencillo con un ancho fijo. Nuevamente, cambia el tamaño de la ventana del navegador y observa el resultado.

+
+ +
+

Nota: Las capturas de pantalla anteriores se han tomado usando el modo de diseño responsivo de las herramientas DevTools de Firefox.

+
+ +

A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles solían crear una versión especial de su sitio web para dispositivo móvil, con una URL diferente (a menudo algo así como m.example.com o example.mobi). Esto significaba que había que desarrollar y actualizar dos versiones independientes del sitio web.

+ +

Además, estos sitios web para dispositivos móviles a menudo ofrecían una experiencia muy reducida. A medida que los dispositivos móviles se volvían más potentes y capaces de mostrar sitios web completos, esto resultaba frustrante para los usuarios de dispositivos móviles, que se veían atrapados en la versión móvil del sitio web y no podían acceder a la información que sabían que había en la versión de escritorio, que incluía todas las funciones del sitio web.

+ +

Diseño flexible antes del diseño responsivo

+ +

Se desarrollaron varios enfoques para tratar de resolver los inconvenientes de los métodos líquidos o de ancho fijo para crear sitios web. En 2004, Cameron Adams escribió una publicación titulada Resolution dependent layout, que describe un método para crear un diseño que podría adaptarse a diferentes resoluciones de pantalla. Este enfoque requería JavaScript para detectar la resolución de la pantalla y cargar el CSS correcto.

+ +

Zoe Mickley Gillenwater fue determinante en su trabajo de descripción y formalización de los diversos modos en que se podían crear sitios web flexibles para intentar encontrar una situación intermedia entre llenar toda la pantalla o tener un tamaño completamente fijo.

+ +

Diseño responsivo

+ +

El término diseño responsivo fue acuñado por Ethan Marcotte en 2010, y describía el uso combinado de tres técnicas.

+ +
    +
  1. La primera era la idea de las redes fluidas, algo que ya exploraba Gillenwater, y que puede leerse en el artículo de Marcotte, Fluid Grids (publicado en 2009 en A list apart).
    2. +
  2. La segunda técnica era la idea de las imágenes fluidas. Usando una técnica muy simple de establecer la propiedad de max-width al 100%, las imágenes se reducían si su columna de contención se volvía más estrecha que el tamaño intrínseco de la imagen, pero nunca se expandía. Esto permite reducir una imagen para que se ajuste a una columna de tamaño flexible, en lugar de que desborde, pero no se expande ni se pixela si la columna se ensancha más que la imagen.
    3. +
  3. El tercer componente clave era la consulta a los media. Las consultas a los media habilitan el tipo de cambio de diseño que Cameron Adams había explorado previamente usando JavaScript, pero usando solo CSS. En lugar de tener un único diseño para todos los tamaños de pantalla, el diseño podría cambiarse. Las barras laterales pueden reposicionarse en una pantalla más pequeña, o puede mostrarse una navegación alternativa.
    4. +
+ +

Es importante comprender que el diseño web responsivo no es una tecnología independiente: es un término utilizado para describir un enfoque para el diseño web, o un conjunto de buenas prácticas utilizado para crear un diseño que puede responder según el dispositivo que se utiliza para ver un contenido. En la exploración original de Marcotte, esto significaba cuadrículas flexibles (mediante elementos flotantes) y consultas de media; sin embargo, en los casi 10 años desde que se escribió ese artículo, trabajar de manera responsiva se ha convertido en la norma. Los métodos de diseño CSS modernos son inherentemente responsivos, y la plataforma web dispone de herramientas integradas nuevas que facilitan el diseño de sitios web responsivos.

+ +

El resto de este artículo te indicará las diversas características de la plataforma web que puedas querer utilizar para crear un sitio responsivo.

+ +

La consulta a los media

+ +

El diseño responsivo solo pudo surgir gracias a la consulta a los media. La especificación de nivel 3 de consulta a los media se convirtió en una candidata a Recomendación en 2009, lo que significa que se consideró lista para su implementación en los navegadores. Las consultas a los media nos permiten ejecutar una serie de pruebas (por ejemplo, si la pantalla del usuario es mayor que un ancho o una resolución determinados) y aplicar CSS selectivamente para diseñar la página de manera que resulte adecuada a las necesidades del usuario.

+ +

Por ejemplo, la consulta a los media siguiente explora si la página web que se muestra lo hace como un medio de pantalla (por lo tanto, no es un documento impreso) y si la ventana tiene al menos 800 píxeles de ancho. El CSS para el selector .container solo se aplicará si ambas condiciones son ciertas.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

Puedes añadir múltiples consultas a los media dentro de una hoja de estilo, y ajustar todo tu diseño o solo partes de él para que se adapte mejor a los diferentes tamaños de pantalla. Los puntos en los que se introduce una consulta a los media y se cambia el diseño se conocen como puntos de interrupción.

+ +

Un enfoque común cuando se usan las consultas a los media es crear un diseño sencillo de una sola columna para dispositivos de pantalla estrecha (por ejemplo, teléfonos móviles), luego implementar un diseño en columnas para pantallas más grandes cuando se sabe que hay suficiente ancho de pantalla para manejarlo. Esto se describe a menudo como diseño primero móvil.

+ +

Obtén más información sobre las consultas a los media en la documentación de MDN.

+ +

Cuadrículas flexibles

+ +

Los sitios responsivos no solo cambian su diseño entre puntos de interrupción, sino que se construyen sobre cuadrículas flexibles. Una cuadrícula flexible significa que no tienes que centrarte en todos los tamaños de dispositivo posibles y construir para ellos un diseño en píxeles perfecto. Ese enfoque sería imposible dada la gran cantidad de dispositivos de tamaños diferentes que hay, y el hecho de que, al menos en la versión de escritorio, las personas no siempre tienen la ventana de su navegador maximizada.

+ +

Al usar una cuadrícula flexible, solo necesitas añadir un punto de interrupción y cambiar el diseño en el punto en que el contenido comienza a verse mal. Por ejemplo, si las longitudes de las líneas se vuelven interminablemente largas a medida que el tamaño de la pantalla aumenta, o una caja se encoje hasta un ancho de dos palabras en cada línea a medida que el tamaño de la pantalla se reduce.

+ +

En los primeros días del diseño responsivo, nuestra única opción para el diseño de páginas web era usar elementos flotantes. Los diseños de pantalla con elementos flotantes flexibles se lograban dando a cada elemento un ancho porcentual asegurándose de que para toda la página no alcanzara más del 100%. En su trabajo original sobre cuadrículas fluidas, Marcotte detalló una fórmula para tomar un diseño de página web diseñado usando píxeles y convertirlo en porcentajes.

+ +
target / context = result 
+
+ +

Por ejemplo, si el tamaño de nuestra columna de destino es de 60 píxeles y el contexto (o contenedor) en el que se encuentra es de 960 píxeles, dividimos 60 por 960 para obtener un valor que podemos usar en nuestro CSS, después de mover el separador de cifras decimales dos posiciones a la derecha.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

Este enfoque se encuentra hoy en muchos lugares de la web, y aquí está documentado en la sección de compaginación de nuestro artículo sobre métodos de compaginación heredados. Es probable que encuentres sitios web que utilizan este enfoque en su trabajo, por lo que vale la pena entenderlo, aunque no vas a construir un sitio web moderno utilizando una cuadrícula flexible basada en elementos flotantes.

+ +

El ejemplo siguiente muestra un diseño responsivo sencillo que utiliza consultas a los medios y una cuadrícula flexible. En pantallas estrechas, el diseño de página muestra las cajas en columna una encima de la otra:

+ +
Una vista de un dispositivo móvil con un diseño de página con cajas en columna vertical una encima de la otra. +
+
+ +

En pantallas más anchas se pasa a dos columnas:

+ +
Una vista de un dispositivo de escritorio con un diseño a dos columnas. +
+
+ +
+

Nota: Puedes encontrar el ejemplo en vivo y el código fuente de este ejemplo en GitHub.

+
+ +

Tecnologías modernas de diseño de páginas web

+ +

Los métodos modernos de diseño de páginas web, como el diseño en columnas, Flexbox y Grid son responsivos por defecto. Todos estos métodos asumen que tratas de crear una cuadrícula flexible y te proporcionan los modos más fáciles de hacerlo.

+ +

Multicol

+ +

El más antiguo de estos métodos de diseño de páginas web es multicol. Cuando especificas un atributo column-count, esto indica en cuántas columnas deseas dividir tu contenido. El navegador entonces calcula el tamaño de estas columnas, que cambiará de acuerdo con el tamaño de la pantalla.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

Si en lugar de ello estableces el atributo column-width, especificas un ancho mínimo. El navegador crea tantas columnas de ese ancho como quepan cómodamente en el contenedor, y reparte el espacio entre todas las columnas. Por lo tanto, el número de columnas cambia según la cantidad de espacio que hay.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

Flexbox

+ +

En el método Flexbox, los elementos flexibles se encogen y distribuyen el espacio entre los elementos según el espacio que hay en su contenedor, según su comportamiento inicial. Al cambiar los valores de flex-grow y flex-shrink, puedes indicar cómo deseas que se comporten los elementos cuando a su alrededor hay más o menos espacio.

+ +

En el ejemplo siguiente, los elementos flexibles ocupan cada uno la misma cantidad de espacio en el contenedor flexible, al utilizar la abreviatura flex: 1 como se describe en el artículo Flexbox: Dimensionamiento flexible de los elementos flex.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

Nota: Como ejemplo, hemos reconstruido el anterior diseño de página responsivo sencillo, esta vez usando Flexbox. Puedes ver que ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: ejemplo, código fuente.

+
+ +

Cuadrículas CSS

+ +

En el diseño de cuadrículas con CSS, la unidad fr permite la distribución del espacio disponible en las trazas de la cuadrícula. El ejemplo siguiente crea un contenedor de cuadrícula con tres trazas dimensionadas a 1fr. Esto crea tres columnas, cada una de las cuales ocupa una parte del espacio que hay disponible en el contenedor. Puedes obtener más información sobre este enfoque para crear una cuadrícula en el módulo Aprender a diseñar cuadrículas en Cuadrículas flexibles con la unidad fr.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

Nota: La versión del diseño de página en cuadrícula es aún más simple, ya que podemos definir las columnas en .wrapper: ejemplo, código fuente.

+
+ +

Imágenes responsivas

+ +

El enfoque más simple para las imágenes responsivas es el que se describe en los primeros artículos de Marcotte sobre diseño responsivo. Básicamente, tomar una imagen que tenga el tamaño más grande que puedas necesitar, y reducirla. Este continúa siendo un enfoque utilizado hoy en día, y en la mayoría de las hojas de estilo encontrarás en alguna parte el CSS siguiente:

+ +
img {
+  max-width: 100%:
+} 
+
+ +

Hay inconvenientes obvios en este enfoque. La imagen puede mostrarse mucho más pequeña que su tamaño intrínseco, lo que representa una pérdida de ancho de banda: un usuario de dispositivo móvil puede descargar una imagen que sea varias veces el tamaño de lo que ve en realidad en la ventana del navegador. Además, es posible que no desees la misma relación de aspecto de la imagen en dispositivos móviles y en ordenadores de escritorio. Por ejemplo, podría ser bueno tener una imagen cuadrada para dispositivos móviles, pero mostrar la misma escena que una imagen horizontal en el escritorio. O bien es posible que, reconociendo el tamaño más pequeño de una imagen en dispositivos móviles, desees mostrar una imagen diferente, que se entienda mejor en un tamaño de pantalla pequeño. Estas cosas no se pueden lograr simplemente reduciendo una imagen.

+ +

Las imágenes responsivas, que utilizan el elemento {{htmlelement ("picture")}} y los atributos {{htmlelement ("img")}} srcset y sizes resuelven ambos problemas. Puedes proporcionar varios tamaños junto con «sugerencias» (metadatos que describen el tamaño de pantalla y la resolución para que la imagen sea la más adecuada), y el navegador elije la imagen que resulta más adecuada para cada dispositivo, y se asegura de que el usuario descarga un tamaño de imagen apropiado para el dispositivo que utiliza.

+ +

También puedes usar imágenes de director artístico, que proporcionan un recorte o una imagen completamente diferente para diferentes tamaños de pantalla.

+ +

Puedes encontrar una guía detallada de imágenes responsivas en el artículo sobre Aprender HTML en MDN.

+ +

Tipografía responsiva

+ +

Un elemento de diseño responsivo que todavía no hemos tratado en trabajos anteriores es la idea de la tipografía responsiva. Este concepto describe esencialmente el hecho de cambiar el tamaño de letra según el espacio de pantalla que reflejan las consultas a media.

+ +

En este ejemplo, queremos establecer que nuestro encabezado de nivel 1 sea 4rem, lo que significa que será cuatro veces nuestro tamaño de letra base. ¡Es un título muy grande! Solo queremos este título de encabezado gigante en los tamaños de pantalla más grandes, por lo tanto, primero creamos un título de encabezado más pequeño y luego usamos las consultas a los media para sobrescribirlo con el tamaño más grande si sabemos que el usuario tiene un tamaño de pantalla de al menos 1200px.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

Hemos editado nuestro ejemplo anterior de cuadrícula responsiva para incluir también el tipo de respuesta utilizando el método descrito. Puedes ver cómo el título de encabezado cambia de tamaño cuando el diseño para a la versión de dos columnas.

+ +

En la versión para dispositivo móvil, el encabezado es más pequeño:

+ +
Un diseño de elementos apilados en columna con un tamaño de título de encabezado pequeño. +
+
+ +

Sin embargo, en las versiones de escritorio vemos un tamaño de título de encabezado más grande:

+ +
Un diseño en dos columnas con un título grande. +
+
+ +
+

Nota: Observa este ejemplo en: ejemplo, código fuente.

+
+ +

Como muestra este enfoque sobre la tipografía, no es necesario restringir las consultas a medios a cambiar solo el diseño de página. Se pueden usar para ajustar cualquier elemento y hacerlo más útil o atractivo según los diversos tamaños de pantalla.

+ +

El uso de unidades de ventana gráfica para tipografía responsiva

+ +

Un enfoque interesante es utilizar las unidades de ventana gráfica vw para habilitar la tipografía responsiva. 1vw es igual al uno por ciento del ancho de la ventana gráfica, lo que significa que si configuras el tamaño del tipo de letra con vw, siempre estará en relación con el tamaño de la ventana gráfica.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

El problema de hacer esto es que el usuario pierde la posibilidad de ampliar cualquier conjunto de texto configurado en unidades vw, porque ese texto siempre está en relación con el tamaño de la ventana gráfica. Por lo tanto, nunca hay que establecer texto utilizando solo unidades de ventana.

+ +

Hay una solución, que implica el uso de la función calc(). Si añades la unidad vw a un valor establecido con un tamaño fijo, como em o rem, el texto continúa siendo ampliable. Esencialmente, la unidad vw se añade sobre ese valor ampliado:

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

Esto significa que necesitamos especificar el tamaño de letra para el título de encabezado una sola vez, en lugar de configurarlo para dispositivos móviles y redefinirlo en las consultas a medios. Luego, el tipo de letra aumenta gradualmente a medida que aumenta el tamaño de la ventana gráfica.

+ +
+

Observa un ejemplo en: ejemplo, código fuente.

+
+ +

La metaetiqueta viewport

+ +

Si observas el tipo de letra de una página HTML responsiva, en general vas a encontrar la siguiente etiqueta {{htmlelement ("meta")}} en la cabecera del documento.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

Esta metaetiqueta informa a los navegadores de los dispositivos móviles que deben establecer el ancho de la ventana gráfica al ancho del dispositivo y escalar el documento al 100% de ese tamaño, de modo que el documento se mostrará al tamaño optimizado para esos dispositivos móviles.

+ +

¿Por qué esto es necesario? Porque los navegadores de los dispositivos móviles tienden a mentir sobre el ancho de su ventana gráfica.

+ +

Esta metaetiqueta existe porque cuando se lanzó el iPhone original y la gente comenzó a ver sitios web en una pequeña pantalla de teléfono móvil, la mayoría de los sitios web no estaban optimizados para dispositivos móviles. Por lo tanto, el navegador móvil establecía el ancho de la ventana gráfica en 960 píxeles, representaba la página con ese ancho y mostraba el resultado como una versión reducida del diseño del escritorio. Otros navegadores de dispositivos móviles (por ejemplo, en Google Android) hicieron lo mismo. Los usuarios podían acercarse y desplazarse por el sitio web para ver las partes que les interesaban, pero se veía mal. Todavía verás esto hoy en día si tienes la desgracia de encontrarte con un sitio web que no tiene un diseño de página responsivo.

+ +

El problema es que tu diseño responsivo con puntos de interrupción y consultas a media no va a funcionar según lo previsto en los navegadores de dispositivos móviles, si tienes un diseño de pantalla estrecho que se inicia con un ancho de ventana de 480px o menos, pero la ventana gráfica está configurada en 960px. E cambio, al configurar width=device-width anulas el ancho predeterminado width=960px de Apple con el ancho real del dispositivo, y tus consultas a media funcionarán según lo previsto.

+ +

Por lo tanto, siempre debes incluir la línea de HTML anterior en la cabecera de tus documentos.

+ +

Con la metaetiqueta viewport puedes usar otras configuraciones, aunque, en general vas a querer usar la línea anterior.

+ + + +

Deberías evitar el uso de minimum-scale y maximum-scale, y en particular establecer user-scalable en no. Hay que permitir a los usuarios hacer zoom tanto o tan poco como lo necesiten; evitarlo provoca problemas de accesibilidad.

+ +
+

Nota: Hay una @regla CSS establecida para reemplazar la metaetiqueta viewport: @viewport. Sin embargo, tiene poca compatibilidad con los navegadores. Se implementó en Internet Explorer y Edge, pero una vez que se lance el navegador Edge basado en Chromium, dejará de formar parte del navegador Edge.

+
+ +

Resumen

+ +

El diseño responsivo se refiere a un diseño página de un sitio web o una aplicación que responde al entorno en el que se visualiza. Abarca una serie de características y técnicas de CSS y HTML, y ahora es esencialmente el modo como construimos los sitios web de forma predeterminada. Piensa en los sitios web que visitas con tu dispositivo móvil; probablemente sea inusual encontrar un sitio web que tenga la versión de escritorio reducida o en que necesites desplazarse hacia los lados para encontrar las cosas. Esto se debe a que la web se ha movido a este enfoque de diseño responsivo.

+ +

Además, lograr diseños responsivos se ha vuelto mucho más fácil con la ayuda de los métodos de diseño que has aprendido en estos artículos. Si eres nuevo en el desarrollo web, hoy tienes muchas más herramientas a tu disposición que en los primeros días del diseño de página responsivo. Por lo tanto, vale la pena verificar la antigüedad de los materiales que consultas. Si bien los artículos históricos continúan siendo útiles, el uso moderno de CSS y HTML facilita mucho la creación de diseños elegantes y útiles, sin importar con qué dispositivo el visitante visita el sitio.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/css_layout/flexbox/index.html b/files/es/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..5d2b8cdf36 --- /dev/null +++ b/files/es/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,337 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +

Flexbox es un método de diseño de página unidimensional para compaginar elementos en filas o columnas. Los elementos de contenido se ensanchan para rellenar el espacio adicional y se encogen para caber en espacios más pequeños. En este artículo expondremos todas sus características básicas.

+ + + + + + + + + + + + +
Prerrequisitos:Los conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Aprender a usar el sistema de compaginación con elementos flexbox para crear compaginaciones web.
+ +

¿Por qué flexbox?

+ +

Durante mucho tiempo, las únicas herramientas fiables con compatibilidad cruzada entre navegadores disponibles para crear diseños CSS fueron cosas como la flotación y el posicionamiento. Están bien y funcionan, pero de alguna manera también limitan bastante y frustran.

+ +

Con tales herramientas resulta difícil, si no imposible, lograr obtener en cualquier forma conveniente y flexible un diseño de página sencillo con unos requisitos como los siguientes:

+ + + +

Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de compaginación. ¡Vamos a profundizar en ello!

+ +

Presentación de un ejemplo sencillo

+ +

En este artículo, te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. Para comenzar, debes hacer una copia local del primer archivo de inicio flexbox0.html de nuestro repositorio de GitHub. Cárgalo en un navegador moderno (como Firefox o Chrome) y echa un vistazo al código en tu editor de código. Puedes verlo en vivo aquí.

+ +

Verás que hay un elemento {{htmlelement ("header")}} con un encabezado de nivel superior en él, y un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. Los usaremos para crear una compaginación bastante habitual de tres columnas.

+ +

+ +

Especificar qué elementos colocar como cajas flexibles

+ +

Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de {{cssxref ("display")}} en el elemento padre de los elementos que deseas editar. En este caso, queremos compaginar los elementos {{htmlelement ("article")}}, por lo que lo establecemos en {{htmlelement ("section")}} (que se convierte en un contenedor flexible):

+ +
section {
+  display: flex;
+}
+ +

Esto hace que el elemento <section> se convierta en contenedor flex, y sus hijos en elementos flexibles. El resultado de esto debería ser algo así:

+ +

+ +

Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra compaginación en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este. Veremos más sobre el tema más adelante.

+ +

Para que quede claro, reiteremos lo que está sucediendo aquí. El elemento al que le hemos dado un valor de {{cssxref("display")}} de flex actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. La siguiente sección explicará con más detalle qué significa esto. Ten en cuenta también que puede usar un valor de display de inline-flex si desea diseñar los elementos secundarios de un elemento como elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.

+ +

+

El modelo flexible

+ + +

Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:

+ +

flex_terms.png

+ + + +

Ten presente esta terminología al avanzar por las secciones posteriores. Si en algún momento te confundes con el uso de estos conceptos, siempre puedes volver atrás a consultarlos.

+ +

¿Columnas o filas?

+ +

Los elementos flexbox proporcionan una propiedad llamada {{cssxref ("flex-direction")}} que especifica en qué dirección corre el eje principal (en qué dirección están dispuestos los elementos hijo de un elemento flexbox); por defecto, está establecido en el valor row, por lo que se presenta en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).

+ +

Añade la declaración siguiente a tu regla {{htmlelement ("section")}}:

+ +
flex-direction: column;
+ +

Observa que esto vuelve a colocar los elementos en una disposición en columna, al igual que antes de añadir cualquier CSS. Antes de continuar, elimina esta declaración de tu ejemplo.

+ +
+

Nota: También puedes compaginar elementos flexibles en una dirección inversa utilizando los valores row-reverse y column-reverse. ¡Experimenta también con estos valores!

+
+ +

Delimitar

+ +

Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y rompen el diseño. Echa un vistazo a nuestro ejemplo flexbox-wrap0.html e intenta verlo en vivo (toma una copia local de este archivo si deseas seguir este ejemplo):

+ +

+ +

Aquí vemos que los elementos hijo se salen de su contenedor. Una forma de solucionar esto es añadir la declaración siguiente a tu regla {{htmlelement ("section")}}:

+ +
flex-wrap: wrap;
+ +

Añade también la declaración siguiente a tu regla {{htmlelement ("article")}}:

+ +
flex: 200px;
+ +

Pruébalo; observa que al haberlo incluido el aspecto de la compaginación resulta mucho más agradable:

+ +

Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho; discutiremos esta propiedad con más detalle más adelante. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.

+ +

Pero aquí podemos hacer mucho más. En primer lugar, cambia el valor de tu propiedad {{cssxref ("flex-direction")}} a row-reverse; ahora verás que todavía tienes tu compaginación en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés.

+ +

Propiedades abreviadas de flex-flow

+ +

En este punto vale la pena señalar que hay una propiedad abreviada para {{cssxref ("flex-direction")}} y {{cssxref ("flex-wrap")}}: {{cssxref ("flex-flow")}}. Así, por ejemplo, puedes reemplazar:

+ +
flex-direction: row;
+flex-wrap: wrap;
+ +

con

+ +
flex-flow: row wrap;
+ +

Dimensionamiento flexible de elementos flexibles

+ +

Volvamos ahora a nuestro primer ejemplo y veamos cómo podemos controlar qué proporción de espacio ocupan los elementos flexibles. Inicia tu copia local de flexbox0.html o toma una copia de flexbox1.html como nuevo punto de partida (consúltalo en vivo).

+ +

Primero, añade la regla siguiente al final de tu CSS:

+ +
article {
+  flex: 1;
+}
+ +

Este es un valor de proporción sin unidades que especifica la cantidad de espacio disponible sobre el eje principal que ocupa cada elemento flexible. En este caso, damos a cada elemento {{htmlelement ("article")}} un valor de 1, lo que significa que todos ocuparán una cantidad igual del espacio libre restante después de que se hayan establecido elementos como el área de relleno y el margen. Es una proporción, lo que significa que dar a cada elemento flexible un valor de 400000 tendría exactamente el mismo efecto.

+ +

Ahora añade la regla siguiente debajo de la anterior:

+ +
article:nth-of-type(3) {
+  flex: 2;
+}
+ +

Al actualizar verás que el tercer {{htmlelement ("article")}} ocupa ahora el doble del ancho disponible que los otros dos; ahora hay cuatro unidades de proporción disponibles en total. Los primeros dos elementos flexibles tienen una cada uno, por lo que ocupan 1/4 del espacio disponible cada uno. El tercero tiene dos unidades, por lo que ocupa 2/4 del espacio disponible (o 1/2).

+ +

También puedes especificar un valor de tamaño mínimo dentro del valor flexible. Actualiza las reglas para tu artículo de la manera siguiente:

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 2 200px;
+}
+ +

Esto establece básicamente que «a cada elemento flexible se le da primero 200px del espacio disponible. Después de eso, el resto del espacio disponible se reparte de acuerdo con las unidades de proporción». Actualiza y observa de qué modo se reparte ahora el espacio.

+ +

+ +

El valor real del elemento flexbox se puede ver en su flexibilidad/adaptabilidad: si cambias el tamaño de la ventana del navegador o añades otro elemento {{htmlelement ("article")}}, el diseño continúa funcionando bien.

+ +

flex: forma completa y abreviada

+ +

{{cssxref ("flex")}} es una propiedad abreviada que puede especificar hasta tres valores diferentes:

+ + + +

Recomendamos no usar las propiedades flex sin abreviar a menos que realmente tengas que hacerlo (por ejemplo, para anular algo establecido previamente). Comportan mucho código añadido y suelen aportar confusión.

+ +

Alineación horizontal y vertical

+ +

También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo: flex-align0.html (consúltalo en vivo), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda.

+ +

+ +

Primero, toma una copia local de este ejemplo.

+ +

Ahora, añade a la parte inferior del CSS del ejemplo lo siguiente:

+ +
div {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Actualiza la página y observa que los botones ahora están convenientemente centrados, horizontal y verticalmente. Lo hemos hecho a partir de dos propiedades nuevas.

+ +

{{cssxref ("align-items")}} controla dónde se ubican los elementos flexibles en el eje transversal.

+ + + +

Puedes anular el comportamiento {{cssxref ("align-items")}} para elementos flexibles individuales aplicándoles la propiedad {{cssxref ("align-self")}}. Por ejemplo, añade a tu CSS lo siguiente:

+ +
button:first-child {
+  align-self: flex-end;
+}
+ +

Observa qué efecto tiene esto y retíralo de nuevo al terminar.

+ +

{{cssxref ("justify-content")}} controla dónde se ubican los elementos flexibles sobre el eje principal.

+ + + +

Te animamos a jugar con estos valores para ver cómo funcionan antes de continuar.

+ +

Ordenar los elementos flexibles

+ +

Los elementos flexbox también tienen una función para cambiar el orden de disposición de los elementos flexibles, sin que ello afecte a su orden en el código fuente. Esto es algo que resulta imposible de hacer con los métodos de compaginación tradicionales.

+ +

El código para esto es simple: añade el siguiente CSS al código de ejemplo de la barra de controles:

+ +
button:first-child {
+  order: 1;
+}
+ +

Actualiza, y observa que el botón «Smile» se ha movido al final del eje principal. Observemos cómo funciona esto con un poco más de detalle:

+ + + +

Puedes establecer valores de orden negativos para que los elementos aparezcan antes que los elementos establecidos con el valor 0. Por ejemplo, puedes hacer que el botón «Blush» aparezca al comienzo del eje principal utilizando la regla siguiente:

+ +
button:last-child {
+  order: -1;
+}
+ +

Cajas flexibles anidadas

+ +

Los elementos flexbox permiten crear algunos diseños de página bastante complejos. Es perfectamente aceptable configurar un elemento flexible para que también sea un contenedor flexible, de modo que los elementos secundarios también se dispongan como cajas flexibles. Echa un vistazo a complex-flexbox.html (consúltalo en vivo).

+ +

+ +

El HTML para ello es bastante simple. Hay un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. El tercer elemento {{htmlelement ("article")}} contiene tres elementos {{htmlelement ("div")}}:

+ +
section - article
+          article
+          article - div - button
+                    div   button
+                    div   button
+                          button
+                          button
+ +

Veamos el código que hemos usado para esta compaginación.

+ +

En primer lugar, configuramos los elementos secundarios de {{htmlelement ("section")}} para que se presenten como cajas flexibles.

+ +
section {
+  display: flex;
+}
+ +

A continuación, establecemos algunos valores flexibles en los elementos {{htmlelement ("article")}}. Presta una atención especial a la segunda regla: configuramos el tercer elemento {{htmlelement ("article")}} para que sus hijos también se presenten como elementos flexibles, pero esta vez los disponemos en una columna.

+ +
article {
+  flex: 1 200px;
+}
+
+article:nth-of-type(3) {
+  flex: 3 200px;
+  display: flex;
+  flex-flow: column;
+}
+
+ +

A continuación, seleccionamos el primer elemento {{htmlelement ("div")}}. Primero usamos flex:1 100px; para darle una altura mínima efectiva de 100 px, luego configuramos sus elementos secundarios (los elementos {{htmlelement ("button")}}) para que también se presenten como elementos flexibles. Aquí los colocamos en una fila que los delimita y los alineamos en el centro del espacio disponible, como hicimos en el ejemplo del botón individual que vimos antes.

+ +
article:nth-of-type(3) div:first-child {
+  flex:1 100px;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: space-around;
+}
+ +

Por último, establecemos un tamaño para el botón, pero lo más interesante es que le damos un valor flexible de 1 auto. Esto tiene un efecto muy interesante, que puedes observar si cambias el tamaño del ancho de la ventana de tu navegador. Los botones ocuparán tanto espacio como puedan y se asentarán tantos en la misma línea como quepan, pero cuando ya no quepan con comodidad en la misma línea, saltarán de línea y crearán líneas nuevas.

+ +
button {
+  flex: 1 auto;
+  margin: 5px;
+  font-size: 18px;
+  line-height: 1.5;
+}
+ +

Compatibilidad entre navegadores

+ +

La compatibilidad de los elementos flexbox está garantizada para la mayoría de los navegadores nuevos: Firefox, Chrome, Opera, Microsoft Edge e Internet Explorer 11, las versiones más recientes de Android/iOS, etc. Sin embargo, todavía hay navegadores antiguos en uso que no admiten las propiedades flexbox (o lo hacen, pero admiten una versión muy antigua y desactualizada).

+ +

Esto no importa demasiado mientras estás aprendiendo y experimentando; pero cuando consideras usar propiedades flexbox en un sitio web real, debes hacer pruebas y asegurarte de que tu experiencia de usuario sea lo suficientemente aceptable en tantos navegadores como sea posible.

+ +

Las propiedades flexbox son un poco más complicadas que otras características de CSS. Por ejemplo, si un navegador no soporta sombras en CSS, es probable que el sitio todavía sea utilizable. Sin embargo, si no es compatible con las funciones flexbox, probablemente el diseño completo se romperá, y el sitio web se inutilizará.

+ +

Expusimos estrategias para superar problemas de compatibilidad entre navegadores en nuestro módulo Pruebas de compatibilidad del navegador.

+ +

Pon a prueba tus habilidades

+ +

Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar si retienes esta información antes de seguir en Test your skills: Flexbox.

+ +

Resumen

+ +

Con esto concluye nuestro recorrido por los conceptos básicos de las propiedades flexbox. Esperamos que te hayas divertido y que juegues con ello mientras avanzas en tu aprendizaje. A continuación, veremos otro aspecto importante de los diseños CSS: las rejillas CSS.

+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
+ +
+

En este módulo

+ + +
diff --git a/files/es/learn/css/css_layout/floats/index.html b/files/es/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..47ae275f2e --- /dev/null +++ b/files/es/learn/css/css_layout/floats/index.html @@ -0,0 +1,505 @@ +--- +title: Floats +slug: Learn/CSS/CSS_layout/Floats +translation_of: Learn/CSS/CSS_layout/Floats +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
+ +

Originalmente pensada para flotar imágenes dentro de bloques de texto, la propiedad {{cssxref("float")}} se convirtió en una de las herramientas más usadas para crear diseños multicolumna en las páginas web. Con la llegada de Flexbox y Grid ha vuelto ahora a su propósito original, como se explica en este artículo.

+ + + + + + + + + + + + +
Requisitos previos:HTML básico (ver Introducción al HTML), y una idea de Cómo funciona CSS (ver Introducción a CSS.)
Objetivo:Aprender a crear elementos flotantes en páginas web, y a usar la propiedad clear y otros métodos para limpiar los elementos flotantes.
+ +

La historia de los elementos flotantes

+ +

La propiedad {{cssxref("float")}} fue introducida para permitir a los desarrolladores implementar diseños sencillos que incluyeran una imagen flotando dentro de una columna de texto, con el texto envolviendo la parte izquierda o derecha de la imagen. El tipo de cosa que encuentras habitualmente en el diseño de un periódico.

+ +

Pero los desarrolladores web pronto se dieron cuenta de que podían flotar cualquier cosa, no solo imágenes, por lo que su uso se extendió, por ejemplo creando efectos de diseño divertidos como estas letras capitulares.

+ +

Los elementos flotantes han sido usados comúnmente para crear diseños web completos con múltiples columnas situadas unas al lado de las otras (el comportamiento por defecto sería que las columnas se situaran unas debajo de las otras, en el mismo orden en el que aparecen en el código fuente). Ahora hay disponibles técnicas más modernas y mejores, que exploraremos más adelante en este módulo, por lo que el uso de {{cssxref("float")}} de este modo debería contemplarse como una técnica anticuada.

+ +

En este artículo nos centraremos en el uso apropiado de la propiedad {{cssxref("float")}}.

+ +

Un ejemplo de float simple

+ +

Exploremos cómo usar los float. Empezaremos con un ejemplo realmente simple que incluye un bloque de texto flotando alrededor de un elemento. Puedes acompañarnos creando un fichero index.html en tu ordenador, rellenándolo con una plantilla HTML simple, e insertando el código siguiente en los lugares adecuados. Al final de la sección podrás ver un ejemplo en vivo de cómo debería ser el código final.

+ +

Primero, empecemos con algo de HTML simple — añade lo siguiente al cuerpo de tu HTML, eliminando cualquier otra cosa que hubiera antes:

+ +
<h1>Ejemplo simple de caja flotante</h1>
+
+<div class="box">Caja flotante</div>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
+
+<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+ +

Ahora aplica el siguiente CSS a tu HTML (usando un elemento {{htmlelement("style")}} o un {{htmlelement("link")}} para separar el fichero .css  — tú eliges):

+ +
body {
+  width: 90%;
+  max-width: 900px;
+  margin: 0 auto;
+  font: .9em/1.2 Arial, Helvetica, sans-serif
+}
+
+.box {
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Si guardas y recargas la página, verás algo parecido a lo que esperarías: la caja se encuentra por encima del texto, en un flujo normal. Para flotar el texto alrededor, añade las propiedades {{cssxref("float")}} y {{cssxref("margin-right")}} a la regla .box:

+ +
.box {
+  float: left;
+  margin-right: 15px;
+  width: 150px;
+  height: 100px;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+ +

Ahora, si guardas y recargas, podrás ver algo parecido a lo siguiente:

+ +
+ +
+ +

{{ EmbedLiveSample('Float_1', '100%', 500) }}

+ +

Analicemos ahora cómo funciona el float — el elemento con el float aplicado (el elemento {{htmlelement("div")}} en este caso) es sacado del flujo normal del documento y está pegado al lado izquierdo de su elemento contenedor padre ({{htmlelement("body")}}, en este caso). Cualquier contenido que esté por debajo del elemento flotado en el flujo normal, ahora lo envolverá, rellenando el espacio a la derecha hasta la parte superior del elemento flotante. Allí se detendrá.

+ +

Flotar el contenido a la derecha tiene exactamente el mismo efecto, pero a la inversa — el elemento flotado se pegará a la derecha, y el contenido lo envolverá por la izquierda. Prueba cambiando el valor de la propiedad float a right y reemplaza {{cssxref("margin-right")}} con {{cssxref("margin-left")}} en el último conjunto de reglas para ver el resultado.

+ +

Si bien podemos agregar un margen al flotante para alejar el texto, no podemos agregar un margen al texto para alejarlo del flotante. Esto se debe a que un elemento flotante se saca del flujo normal y las cajas de los siguientes elementos siguen detrás del flotador. Puedes comprobarlo haciendo algunos cambios en tu ejemplo.

+ +

Añade una clase special al primer párrafo de texto, el que sucede inmediatamente a la caja flotante, y luego añade en tu CSS las siguientes reglas. Esto le dará al párrafo siguiente un color de fondo.

+ +
.special {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+
+ +

Para que el efecto sea más fácil de ver, cambia el margin-right de tu elemento flotante a margin, para obtener espacio alrededor del elemento flotante. Verás que el fondo del párrafo pasa justo por debajo de la caja flotante, como en el ejemplo inferior.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_2', '100%', 500) }}

+ +

Los cuadros de línea de nuestro siguiente elemento se han acortado para que el texto discurra alrededor del flotador, pero debido a que el flotador se eliminó del flujo normal, el cuadro alrededor del párrafo aún permanece en ancho completo.

+ +

Limpiando floats

+ +

Hemos visto que el flotador se elimina del flujo normal y que otros elementos se mostrarán a su lado, por lo tanto, si queremos evitar que un elemento siguiente se mueva hacia arriba, debemos limpiar el float. Esto se logra con la propiedad {{cssxref ("clear")}}.

+ +

En el HTML del ejemplo anterior, añade una clase cleared al segundo párrafo debajo del elemento flotante. Luego añade lo siguiente a tu CSS:

+ +
.cleared {
+  clear: left;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('Float_3', '100%', 600) }}

+ +

Deberías ver que el siguiente párrafo limpia el elemento flotante y ya no aparece junto a él. La propiedad clear acepta los siguientes valores:

+ + + +

Limpiar las cajas envueltas alrededor de un float

+ +

Ahora ya sabes cómo limpiar un elemento que sigue a un elemento flotante, pero observa lo que sucede si tienes un flotante alto y un párrafo corto, con una caja envolviendo a ambos elementos. Modifica tu documento para que el primer párrafo y el cuadro flotante estén envueltos por un {{htmlelement("div")}} con una clase wrapper.

+ +
<div class="wrapper">
+  <div class="box">Caja flotante</div>
+
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+</div>
+
+ +

En tu CSS, añade la siguiente regla para la clase .wrapper y después recarga la página:

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+}
+ +

Además, elimina la clase .cleared anterior:

+ +
.cleared {
+    clear: left;
+}
+ +

Verás que, como en el ejemplo en el que hemos puesto un color de fondo al párrafo, el color de fondo pasa por detrás del elemento flotante.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_4', '100%', 600) }}

+ +

Una vez más, esto se debe a que el flotador se ha sacado del flujo normal. Limpiar el siguiente elemento no ayuda con este problema de limpieza de caja, donde queremos que la parte inferior de la caja envuelva el elemento flotante y envuelva el contenido incluso si el contenido es más corto. Hay tres formas posibles de lidiar con esto, dos que funcionan en todos los navegadores, pero tienen algo de truco, y una tercera, nueva forma de lidiar con esta situación correctamente.

+ +

El hack clearfix

+ +

La forma en que esta situación se ha tratado tradicionalmente es utilizando algo conocido como "truco clearfix". Esto implica insertar algún contenido generado después del cuadro que contiene el contenido flotante y envolvente, y configurarlo para limpiar ambos.

+ +

Añade el siguiente CSS al ejemplo:

+ +
.wrapper::after {
+  content: "";
+  clear: both;
+  display: block;
+}
+ +

Ahora recarga la página y la caja debería limpiarse. Esto es básicamente lo missmo que si hubieras añadido un elemento HTML como un <div> debajo de los elementos y le hubieras añadido la propiedad clear: both.

+ +
+ +
+ +

{{ EmbedLiveSample('Float_5', '100%', 600) }}

+ +

Usando overflow

+ +

Un método alternativo es establecer la propiedad {{cssxref("overflow")}} del elemento envolvente con un valor distinto de visible.

+ +

Elimina el CSS clearfix que añadiste en la anterior sección y, en su lugar, añade overflow: auto a las reglas de la caja envolvente. De nuevo, la caja debería limpiarse.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  overflow: auto;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_6', '100%', 600) }}

+ +

Este ejemplo funciona creando lo que se conoce como un block formatting context (BFC) o contexto de formato de bloque. Es como un pequeño diseño dentro de nuestra página dentro del cual todo está contenido, por lo tanto, nuestro elemento flotante está contenido dentro del BFC y el fondo se encuentra detrás de ambos elementos. Esto generalmente funcionará, sin embargo, en ciertos casos, es posible que encuentre barras de desplazamiento no deseadas o sombras recortadas debido a las consecuencias no deseadas del uso del desbordamiento..

+ +

display: flow-root

+ +

La manera moderna de resolver este problema es usar el valor flow-root de la propiedad display. Esto existe solo para crear un BFC sin usar hacks; no habrá consecuencias no deseadas cuando lo use. Elimina overflow: auto de la regla .wrapper y añade display: flow-root. Asumiendo que tu navegador sea compatible, la caja se limpiará.

+ +
.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  color: #fff;
+  display: flow-root;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Float_7', '100%', 600) }}

+ +

Resumen

+ +

Ahora ya sabes todo lo que tienes que saber sobre los flotadores en el desarrollo web moderno. Consulta el artículo sobre métodos de diseño anticuados para obtener información de cómo se solían usar, lo que puede serte útil si tienes que trabajar en proyectos antiguos.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/css_layout/flujo_normal/index.html b/files/es/learn/css/css_layout/flujo_normal/index.html new file mode 100644 index 0000000000..ffc873938f --- /dev/null +++ b/files/es/learn/css/css_layout/flujo_normal/index.html @@ -0,0 +1,95 @@ +--- +title: Flujo normal +slug: Learn/CSS/CSS_layout/Flujo_normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

Este artículo explica el flujo normal, o la forma en que se presentan los elementos de la página web si no cambias su compaginación.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Conocer cómo los navegadores presentan de forma predeterminada las páginas web antes de comenzar a hacer cambios.
+ +

Como se detalla en el último artículo de introducción al diseño, los elementos en una página web se distribuyen según el flujo normal si no se aplica ningún CSS que cambie la forma en la que se comportan. Y, como comenzamos a descubrir, puedes cambiar el comportamiento de los elementos, ya sea ajustando su posición en este flujo normal o eliminándolos de este por completo. Comenzar con un documento coherente y bien estructurado que sea legible en el flujo normal es la mejor manera de comenzar cualquier página web. Asegura que tu contenido sea legible, incluso si el usuario usa un navegador muy limitado o un dispositivo como un lector de pantalla que lee el contenido de la página. Además, como el flujo normal está diseñado para que un documento sea legible, al comenzar de esta manera, trabajas en el documento en lugar de luchar contra él a medida que haces cambios en su diseño.

+ +

Antes de profundizar en los diferentes métodos de diseño, vale la pena revisar algunas de las cosas que ya debes haber estudiado en artículos anteriores con respecto al flujo normal de los documentos.

+ +

¿Cómo se presentan por defecto los elementos?

+ +

En primer lugar, se toma de las cajas de cada uno de los elementos el contenido, luego se añade cualquier área de relleno, borde y margen alrededor de ellas; es el modelo de cajas que hemos visto antes.

+ +

De manera predeterminada, el contenido de un elemento de nivel de bloque es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los elementos en línea tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con display: block; (o incluso, display: inline-block;, que combina características de ambos).

+ +

Esto explica los elementos individuales, pero ¿qué hay del modo como los elementos interactúan entre sí? El flujo de diseño normal (mencionado en el artículo de introducción al diseño) es el sistema mediante el cual los elementos se colocan en la ventana gráfica del navegador. De manera predeterminada, los elementos de nivel de bloque se presentan en la dirección del flujo del bloque, en función del modo de escritura de los padres (initial: horizontal-tb): cada uno aparecerá en una línea nueva debajo de la última, y estarán separados por cualquier margen que se establezca en ellos. Por lo tanto, en inglés, o en cualquier otro modo de escritura horizontal y de arriba a abajo, los elementos de nivel de bloque se disponen verticalmente.

+ +

Los elementos en línea se comportan de manera diferente: no aparecen en líneas nuevas; en su lugar, se asientan en la misma línea entre sí y con cualquier contenido de texto adyacente (o envuelto), siempre que tengan espacio dentro del ancho del elemento de nivel de bloque primario. Si no hay espacio, el texto o los elementos que desborden bajarán a la línea siguiente.

+ +

Si dos elementos adyacentes tienen algún margen configurado y los dos márgenes se tocan, se mantiene el mayor de los dos y el menor desaparece; esto se llama colapso del margen, y ya lo hemos visto antes.

+ +

Echemos un vistazo a un ejemplo sencillo que explica todo esto:

+ +
+
<h1>Flujo de los documentos básicos</h1>
+
+<p>Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.</p>
+
+<p>Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.</p>
+
+<p>Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.</p>
+
+<p>Los elementos en línea <span>como este</span> y <span>este otro</span> se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, <span>sigue por la línea siguiente, si es posible (como la que contiene este texto)</span>, o simplemente pasa a una línea nueva, como hace esta imagen: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: rgba(255,84,104,0.3);
+  border: 2px solid rgb(255,84,104);
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: white;
+  border: 1px solid black;
+}
+
+ +

{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}

+ +

Resumen

+ +

Ahora que comprendes el flujo normal y cómo el navegador presenta las cosas por defecto, continúa para comprender cómo cambiar esta pantalla predeterminada para crear el diseño que necesitas.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/css_layout/grids/index.html b/files/es/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..d2632cba2b --- /dev/null +++ b/files/es/learn/css/css_layout/grids/index.html @@ -0,0 +1,696 @@ +--- +title: Cuadrículas +slug: Learn/CSS/CSS_layout/Grids +translation_of: Learn/CSS/CSS_layout/Grids +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
+ +

La compaginación en cuadrícula con CSS es un método de diseño de páginas web en dos dimensiones. Te permite distribuir el contenido en filas y columnas, y tiene muchas características que facilitan la creación de diseños complejos. Este artículo te proporciona todo lo que necesitas saber para comenzar con el diseño de páginas web.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y una idea de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Entender los conceptos fundamentales que hay detrás de los métodos de compaginación en cuadrícula y de cómo implementar una compaginación en cuadrícula con CSS.
+ +

¿Qué es la compaginación en cuadrícula?

+ +

Una cuadrícula es un conjunto de líneas horizontales y verticales que crean un patrón sobre el que podemos alinear nuestros elementos de diseño. Las cuadrículas nos ayudan a crear diseños de página en que los elementos no saltan ni cambian de ancho cuando nos movemos de una página a otra, y así proporcionan a nuestras páginas web un aspecto más coherente.

+ +

Una cuadrícula en general tiene columnas, filas y luego espacios entre cada fila y cada columna, conocidos comúnmente como canales.

+ +

+ +

Crear tu cuadrícula con CSS

+ +

Una vez que has decidido qué tipo de cuadrícula necesita tu diseño de página, puedes usar la compaginación en cuadrícula con CSS para crear esa cuadrícula y posicionar elementos en ella. Primero veremos las características básicas de la compaginación en cuadrícula y luego exploraremos cómo crear un método de compaginación de cuadrícula sencilla para tu proyecto.

+ +

Definir una cuadrícula

+ +

Como punto de partida, descárgate el archivo de punto de partida y ábrelo en tu editor de texto y tu navegador (también puedes verlo en vivo aquí). Hay un ejemplo con un contenedor que tiene algunos elementos hijo. Por defecto, estos se muestran en flujo normal, por lo que las cajas se muestran una debajo de la otra. Vamos a trabajar con este archivo durante la primera parte de este artículo, y vamos a hacer cambios en él para ver cómo se comporta la cuadrícula.

+ +

Para definir una cuadrícula utilizamos el valor grid de la propiedad {{cssxref ("display")}}. Al igual que con el método Flexbox, esto activa la compaginación de cuadrícula y todos los elementos que son hijos directos del contenedor se convierten en elementos de cuadrícula. Añade esto al CSS en tu archivo:

+ +
.container {
+    display: grid;
+}
+ +

A diferencia del método Flexbox, los elementos no se ven diferentes inmediatamente. La declaración display: grid te proporciona una cuadrícula de una sola columna, por lo que tus elementos continúan mostrándose uno debajo del otro, como lo hacen en el flujo normal.

+ +

Para ver algo que se parezca más a una cuadrícula, necesitamos añadir columnas a la cuadrícula. Vamos a añadir tres columnas de 200 píxeles. Puedes usar cualquier unidad de longitud o porcentajes para crear estas trazas de columna.

+ +
.container {
+    display: grid;
+    grid-template-columns: 200px 200px 200px;
+}
+ +

Añade la segunda declaración a tu regla CSS, luego vuelve a cargar la página y observa que los elementos se reubican uno en cada celda de la cuadrícula que has creado.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_1', '100%', 400) }}

+ +

Cuadrículas flexibles con la unidad fr

+ +

Además de crear cuadrículas con longitudes y porcentajes, podemos usar la unidad fr para dimensionar de manera flexible las filas y columnas de la cuadrícula. Esta unidad representa una fracción del espacio disponible en el contenedor de la cuadrícula.

+ +

Cambia tu lista de trazas en la definición siguiente para crear tres trazas 1fr.

+ +
.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+}
+ +

Ahora deberías observar que tus trazas son flexibles. La unidad fr distribuye el espacio por proporciones, de modo que puedes dar valores positivos diferentes a sus trazas, por ejemplo, si cambias la definición de la manera siguiente:

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+}
+ +

Ahora la primera traza tiene 2fr del espacio disponible, y las otras dos trazas tienen 1fr, lo que da una primera traza más grande. Puedes mezclar unidades fr y trazas de longitud fija; en tal caso, el espacio que se necesita para las trazas fijas se descuenta del espacio en que se distribuyen las otras trazas.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_2', '100%', 400) }}

+ +
+

Nota: La unidad fr distribuye el espacio disponible, no todo el espacio. Por lo tanto, si una de tus trazas tiene algo grande dentro, habrá menos espacio libre para compartir.

+
+ +

Los espacios entre trazas

+ +

Para crear espacios entre trazas, utilizamos las propiedades {{cssxref ("grid-column-gap")}} para los espacios entre columnas, {{cssxref ("grid-row-gap")}} para los espacios entre filas, y {{ cssxref ("grid-gap")}} para configurar ambos a la vez.

+ +
.container {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    grid-gap: 20px;
+}
+ +

Estos espacios pueden expresarse en cualquier unidad de longitud o en porcentaje, pero no en unidades fr.

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_3', '100%', 400) }}

+ +
+

Nota: Las propiedades *gap solían tener el prefijo grid-, pero esto se ha cambiado en la especificación, porque la intención es hacerlas compatibles con diversos métodos de diseño. Por el momento, Edge y Firefox admiten las versiones sin prefijo, y las versiones con prefijo se mantienen como un alias, por lo que será seguro usarlas durante algún tiempo. Para quedarte en lo seguro, y que tu código sea más a prueba de balas, puedes duplicar y añadir ambas propiedades.

+
+ +
.container {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  grid-gap: 20px;
+  gap: 20px;
+}
+ +

Repetir listas de trazas

+ +

Puedes repetir todas tus trazas, o una sección de tu lista de trazas, con la notación de repetición. Cambia tu lista de trazas por lo siguiente:

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 20px;
+}
+ +

Ahora vas a tener 3 trazas de 1fr, igual que antes. El primer valor que pasas a la función de repetición son las veces que deseas que la lista se repita, mientras que el segundo valor es una lista de trazas, que puede constar de una o más trazas.

+ +

La cuadrícula implícita y explícita

+ +

Hasta ahora solo hemos especificado trazas de columna y, sin embargo, también creamos filas para contener nuestro contenido. Este es un ejemplo de una cuadrícula explícita con respecto a una implícita. La cuadrícula explícita es la que creas usando grid-template-columns o grid-template-rows. La cuadrícula implícita se crea cuando el contenido se posiciona fuera de esa cuadrícula, como en nuestras filas. Las cuadrículas explícitas e implícitas son análogas a los ejes principales y transversales del método Flexbox.

+ +

Por defecto, las trazas que se crean en la cuadrícula implícita tienen un tamaño auto, lo que en general significa que son lo bastante grandes para ajustarse a su contenido. Si deseas asignar un tamaño a las trajas de las cuadrícula implícitas, puedes usar las propiedades {{cssxref ("grid-auto-rows")}} y {{cssxref ("grid-auto-columns")}}. Si añades grid-auto-rows con un valor de 100px a tu CSS, observa que esas filas que has creado ahora tienen 100 píxeles de alto.

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 20px;
+}
+
+ +

{{ EmbedLiveSample('Grid_4', '100%', 400) }}

+ +

La función minmax()

+ +

Nuestras trazas de 100 píxeles de altura no serán muy útiles si en esas trazas añadimos contenido cuya altura sea mayor que 100 píxeles, porque ello causaría un desbordamiento. Puede ser mejor tener trazas cuya altura sea de al menos 100 píxeles y que puedan expandirse si en ellas entra más contenido. Un hecho en realidad básico sobre la web es que nunca sabes qué altura va a tener algo; contenido adicional o tamaños de letra más grandes pueden causar problemas con los diseños que pretendes ser perfectos con todas las dimensiones en píxeles.

+ +

La función minmax permite establecer unos tamaños mínimo y máximo para una traza, por ejemplo, minmax(100px, auto). El tamaño mínimo es de 100 píxeles, pero el máximo es auto, que se expande para adaptarse al contenido. Prueba a cambiar grid-auto-rows para usar un valor minmax:

+ +
.container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-gap: 20px;
+}
+ +

Observa que si añades contenido la traza se expande para permitir que se ajuste. Ten en cuenta que la expansión se produce en la dirección de la fila.

+ +

Tantas columnas como quepan

+ +

Podemos combinar algunas de las cosas que hemos aprendido sobre las listas de trazas, la notación de repetición y la función minmax() para crear un patrón útil. A veces es útil poder pedirle a la cuadrícula que cree tantas columnas como quepan en el contenedor. Para hacer esto establecemos el valor grid-template-columns con la notación repeat(), pero en lugar de pasar un número, pasa la palabra clave auto-fill. Para el segundo parámetro de la función usamos minmax(), con un valor mínimo igual al tamaño mínimo de la traza que nos gustaría tener, y un valor máximo de 1fr.

+ +

Prueba esto en tu archivo ahora, con el CSS siguiente:

+ +
+ + +
.container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: minmax(100px, auto);
+  grid-gap: 20px;
+}
+
+ +

{{ EmbedLiveSample('Grid_5', '100%', 400) }}

+ +

Esto funciona porque la cuadrícula crea tantas columnas de 200 píxeles como caben en el contenedor, luego comparte el espacio restante entre todas las columnas: el máximo es 1fr, que como sabemos, distribuye el espacio de manera uniforme entre las trazas.

+ +

Posicionamiento sobre las líneas de base

+ +

Ahora pasamos de crear una cuadrícula a colocar cosas en la cuadrícula. Nuestra cuadrícula siempre tiene líneas; estas líneas comienzan en 1 y se relacionan con el modo de escritura del documento. Por lo tanto, en español, la línea de columna 1 es la de la izquierda de la cuadrícula y la línea de fila 1 es la de la parte superior. En una columna arábiga, la línea 1 estaría en el lado derecho, ya que el árabe se escribe de derecha a izquierda.

+ +

Podemos posicionar los elementos de acuerdo con estas líneas si especificamos las líneas de inicio y final. Hacemos esto con las propiedades siguientes:

+ + + +

Todas estas propiedades pueden tener un número de línea como valor. También puedes usar las propiedades abreviadas:

+ + + +

Estas te permiten especificar a la vez las líneas de inicio y final, separadas por un carácter de barra diagonal: /.

+ +

Descarga este archivo de punto de partida o míralo en vivo aquí. Ya hay una cuadrícula definida y un elemento sencillo esbozado. Puedes observar que el posicionamiento automático coloca un elemento en cada celda de la cuadrícula que hemos creado.

+ +

Nosotros vamos a utilizar en lugar de ello las líneas de cuadrícula para posicionar sobre la cuadrícula todos los elementos de nuestro sitio web. Añade al final de tu código CSS las reglas siguientes:

+ +
header {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 3;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_6', '100%', 400) }}

+ +
+

Nota: también puedes usar el valor -1 para señalar la columna del final o la fila del final, y contar hacia atrás desde el final con valores negativos. Sin embargo, esto solo funciona con la cuadrícula explícita. El valor -1 no señala la línea del final de la cuadrícula implícita.

+
+ +

Posicionamiento con grid-template-areas

+ +

Una forma alternativa de posicionar elementos en tu cuadrícula es usar la propiedad {{cssxref ("grid-template-areas")}} y asignar un nombre a los diversos elementos de tu diseño.

+ +

Elimina el posicionamiento sobre las líneas de base del último ejemplo (o vuelve a descargar el archivo para tener un punto de partida nuevo) y añade el código CSS siguiente.

+ +
.container {
+  display: grid;
+  grid-template-areas:
+      "header header"
+      "sidebar content"
+      "footer footer";
+  grid-template-columns: 1fr 3fr;
+  grid-gap: 20px;
+}
+
+header {
+  grid-area: header;
+}
+
+article {
+  grid-area: content;
+}
+
+aside {
+  grid-area: sidebar;
+}
+
+footer {
+  grid-area: footer;
+}
+ +

Vuelve a cargar la página y observa que tus elementos se han colocado como antes ¡sin necesidad de usar números de línea!

+ +
+ +
+ +

{{ EmbedLiveSample('Grid_7', '100%', 400) }}

+ +

Las reglas para grid-template-areas son las siguientes:

+ + + +

Puedes jugar con nuestro diseño, por ejemplo, cambiar el pie de página para que esté solo debajo del contenido, y la barra lateral para abarcar todo. Esta manera de describir un diseño de página es muy adecuada porque resulta obvio a partir del CSS qué sucede exactamente.

+ +

Una cuadrícula CSS, formato de cuadrícula

+ +

Los «formatos» de cuadrícula tienden a basarse en cuadrículas de 12 o 16 columnas, y con las cuadrículas CSS no necesitas ninguna herramienta de terceros para proporcionarte dicho formato, porque ya está en la especificación.

+ +

Descárgate el archivo de punto de partida. Contiene un contenedor con una cuadrícula de 12 columnas definida y el mismo código de marcado que usamos en los dos ejemplos anteriores. Ahora podemos usar el posicionamiento sobre las líneas de base para colocar nuestro contenido en la cuadrícula de 12 columnas.

+ +
header {
+  grid-column: 1 / 13;
+  grid-row: 1;
+}
+
+article {
+  grid-column: 4 / 13;
+  grid-row: 2;
+}
+
+aside {
+  grid-column: 1 / 4;
+  grid-row: 2;
+}
+
+footer {
+  grid-column: 1 / 13;
+  grid-row: 3;
+}
+ +
+ +
+ +

{{ EmbedLiveSample('Grid_8', '100%', 400) }}

+ +

Si usas el inspector de cuadrícula de Firefox para ver una superposición de las líneas de cuadrícula sobre tu diseño, puedes observar cómo funciona nuestra cuadrícula de 12 columnas.

+ +

Una superposición de la cuadrícula de 12 columnas de nuestro diseño de página.

+ +

¡Pon a prueba tus conocimientos!

+ +

Has llegado al final de este artículo, pero ¿recuerdas la información más importante? Encontrarás test de prueba que te permitirán verificar que has asimilado esta información antes de continuar en: Pon a prueba tus conocimientos: Cuadrículas.

+ +

Resumen

+ +

En esta descripción general, hemos recorrido las características principales del diseño páginas web con cuadrícula CSS. Deberías poder comenzar a usarlo en tus diseños. Para profundizar en la especificación, lee nuestras guías para el diseño de página con cuadrícula, que puedes encontrar a continuación.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/css_layout/index.html b/files/es/learn/css/css_layout/index.html new file mode 100644 index 0000000000..afa1b0f9a0 --- /dev/null +++ b/files/es/learn/css/css_layout/index.html @@ -0,0 +1,87 @@ +--- +title: Diseño CSS +slug: Learn/CSS/CSS_layout +tags: + - Aprender + - CSS + - Floating + - Grids + - Guía + - Landing + - Layout + - Module + - Multiple column + - Positioning + - Principiante + - TopicStub + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +
{{draft}}
+ +
{{LearnSidebar}}
+ +

Llegados a este punto, hemos examinado los fundamentos básicos de CSS: cómo dar estilo al texto y cómo manipular las cajas que incluyen tu contenido. Llegó el momento de explorar cómo colocar tus cajas en el lugar que elijas con respecto a la ventana principal y el resto de cajas. Hemos cubierto ya los prerrequisitos necesarios, así que vamos a sumergirnos en la maquetación CSS, fijándonos en diferentes configuraciones de visualización, métodos de maquetación tradicionales que implican floats y posicionamiento, así como a nuevas herramientas de maquetación en voga, como flexbox.

+ +

Prerrequisitos

+ +

Antes de comenzar este módulo, ya deberías:

+ +
    +
  1. Estar familiarizado con HTML, como se expone en el módulo Introduction to HTML.
    2. +
  2. Sentirte cómodo con los fundamentos de CSS, que se discuten en   Introduction to CSS.
    3. +
  3. Entender como diseñar cajas style boxes.
    4. +
+ +
+

Nota: Si estás trabajando en un dispositivo donde no tengas la posibilidad de crear tus propios archivos, puedes probar la mayoría de los ejemplos de código en un programa online como JSBin o Thimble.

+
+ +

Guías

+ +

Estos artículos te proporcionarán instrucciones sobre las herramientas y técnicas básicas de maquetación disponibles en CSS.

+ +
+
Introducción a la maquetación CSS
+
En este artículo repasaremos algunas de las características de la maquetación con CSS que ya hemos tratado en módulos previos, como los diferentes valores de {{cssxref("display")}} ; e introduciremos algunos de los conceptos que estudiaremos a lo largo del módulo.
+
Normal flow
+
Los elementos en las páginas web se presentan de acuerdo con el flujo normal, hasta que hacemos algo que cambie eso. Este artículo explica las bases del flujo normal para aprender como cambiarlo.
+
Flexbox
+
Flexbox  es una muy reciente tecnología que, soportada ya por numerosos navegadores, está lista para su uso generalizado. Flexbox proporciona las herramientas necesarias para crear rápidamente maquetaciones flexibles y complejas, así como otras funcionalidades que tradicionalmente eran de difícil implementación con CSS. Este artículo explica su funcionamiento básico.
+
Grids
+
Los sistemas de cuadrícula son otra funcionalidad muy utilizada para la maquetación CSS, que tiende a ser implementada mediante floats u otras funciones de maquetación. Visualizas tu maquetación como un número fijo de columnas donde vas incluyendo tu contenido. En este artículo exploraremos la idea básica detrás de un sistema de cuadrícula, y terminaremos experimentando con CSS Grid, una incipiente nueva característica que permite diseñar una cuadricula Web con gran facilidad
+
Floats
+
Inicialmente utilizado para imágenes flotantes dentro de bloques de texto, la propiedad {{cssxref("float")}} se ha convertido en una de las herramientas más utilizadas para crear maquetaciones de varias columnas en páginas web. Con la venida de Flexbox y Grid se ha regresado a su propósito original, como lo explica este artículo.
+
Posicionamiento
+
El posicionamiento te permite sacar elementos del flujo normal de maquetación del documento para hacer que se comporten de manera diferente, p.ej: colocando unos encima de otros, o fijándolos a un lugar de la ventana principal. Este artículo explica los diferentes valores para  {{cssxref("position")}} y cómo utilizarlos.
+
Ejemplos prácticos de posicionamiento
+
Una vez cubiertas las nociones básicas de posicionamiento en el artículo anterior, vamos ahora a construir un par de ejemplos reales, para explicar las cosas que puedes hacer con el posicionamiento.
+
Diseño Multi-columna
+
El diseño multi-columna te proporciona un método de maquetación de contenido en columnas, como lo podrías ver en un periódico. Este artículo explica como usar esta característica.
+
Responsive design
+
A medida que han aparecido diversos tamaños de pantalla en dispositivos habilitados para la web, apareció un conjunto de practicas que permiten a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc.Este se conoce como Responsive design (RWD) y es una idea que cambió la forma en que diseñamos páginas web multi-dispositivos, y en este artículo te ayudaremos a entender las principales técnicas que necesitas saber para dominarlo.
+
Guía de consulta de medios para principiantes
+
CSS Media Query te proporciona una forma de aplicar CSS solo cuando el entorno del navegador y el dispositivo coincide con las reglas que especificaste, por ejemplo "la ventana principal es más ancha de 480 pixels". Las consultas de medios son una parte clave del responsive web design, ya que te permiten crear diferentes diseños dependiendo del tamaño de la ventana principal, así como también puede ser usado para detectar otras cosas acerca del entorno en donde tu página web se está ejecutando, por ejemplo si el usuario está usando una pantalla táctil en lugar de un ratón. En esta guía, aprenderás primero acerca de la sintaxis usada en las consultas de medios, y luego pasar a usarlos en un ejemplo donde se muestra cómo un diseño simple puede hacerse responsive.
+
Métodos de diseño heredados
+
Los sistemas Grid son una característica muy común usada en el diseño CSS, y antes del diseño Grid CSS, tendían a ser implementados usando floats u otras características de diseño. Imagina tu diseño como un conjunto de números de columnas (p.ej. 4, 5 o 12), y luego acomoda tus columnas de contenido dentro de esas columnas imaginarias. En este artículo vamos a explorar cómo funcionan estos métodos para que entiendas como eran usados si trabajas en un proyecto más antiguo. 
+
Soporte a navegadores antiguos
+
En este modulo recomendamos usar Flexbox y Grid como principal método de diseño. Siempre habrán personas que visiten tu página web desde navegadores antiguos, o navegadores que no soportan los métodos que usaste. Este siempre ha sido el caso en la web: a medida que se desarrollan nuevas características, los distintos navegadores priorizan diferentes cosas. Este artículo explica como usar técnicas modernas para la web sin dejar por fuera a los usuarios de tecnologías antiguas. 
+
+ +

Ejercicios

+ +

Los siguientes ejercicios comprobarán tu habilidad para maquetar páginas web con CSS.

+ +
+
Creando una maquetación de varias columnas flexibles
+
Este ejercicio comprobará tu habilidad par crear una maquetación multi-columna, con alguna que otra característica interesante.
+
Creando un widget fijo de control
+
Este ejercicio pone a prueba tu entendimiento sobre el posicionamiento, proponiéndote crear un widget de control con posición fija, que permitirá al usuario acceder a los controles de una aplicación Web, independientemente de dónde se hubiera desplazado en la página.
+
+ +

Ver también

+ + diff --git "a/files/es/learn/css/css_layout/introducci\303\263n/index.html" "b/files/es/learn/css/css_layout/introducci\303\263n/index.html" new file mode 100644 index 0000000000..2f409d97c3 --- /dev/null +++ "b/files/es/learn/css/css_layout/introducci\303\263n/index.html" @@ -0,0 +1,701 @@ +--- +title: Introducción al diseño en CSS +slug: Learn/CSS/CSS_layout/Introducción +translation_of: Learn/CSS/CSS_layout/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
+ +

Este artículo resumirá algunas de las características de diseño de páginas web con CSS que ya hemos mencionado en módulos anteriores, como los diferentes valores de {{cssxref ("display")}}, e introducirá algunos de los conceptos que vamos a tratar en este módulo.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Proporcionar una visión general de las técnicas de diseño de páginas web con CSS. Cada técnica se puede aprender con mayor detalle en tutoriales posteriores.
+ +

Las técnicas de diseño de páginas web con CSS nos permiten controlar dónde se ubican los elementos que están contenidos en una página web en relación con su posición predeterminada en el flujo de diseño normal, así como el resto de elementos a su alrededor, su contenedor principal o la vista/ventana principal. Las técnicas de diseño de páginas web que trataremos con más detalle en este módulo son:

+ + + +

Cada técnica tiene sus usos, ventajas y desventajas, y ninguna técnica está diseñada para usarse de forma aislada. Si entiendes para qué se ha diseñado cada método, te será fácil comprender cuál es la mejor herramienta de diseño para cada tarea.

+ +

Flujo normal

+ +

El flujo normal es el modo como el navegador presenta las páginas HTML de forma predeterminada cuando no haces nada para controlar el diseño de página. Echemos un vistazo rápido a un ejemplo HTML:

+ +
<p>Amo a mi gato.</p>
+
+<ul>
+  <li>Comprar comida para gatos</li>
+  <li>Ejercicio</li>
+  <li>Anímate amigo</li>
+</ul>
+
+<p>¡Fin!</p>
+ +

Por defecto, el navegador mostrará este código de la manera siguiente:

+ +

{{ EmbedLiveSample('Normal_flow', '100%', 200) }}

+ +

Observa aquí cómo se muestra el HTML en el orden exacto en que aparece en el código fuente, con los elementos uno debajo del otro: el primer párrafo, seguido de la lista desordenada, y a continuación el segundo párrafo.

+ +

Los elementos que aparecen uno debajo del otro se describen como elementos de bloque, en contraposición con los elementos de línea, que aparecen uno al lado del otro, como las palabras de un párrafo.

+ +
+

Nota: La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.

+
+ +

Cuando usas CSS para crear un diseño de página web, alejas los elementos del flujo normal, pero para muchos de los elementos de tu página, el flujo normal proporciona exactamente el diseño que necesitas. Por esta razón resulta tan importante comenzar con un documento HTML bien estructurado, porque te permite trabajar ya con la forma en que las cosas se presentan por defecto, en lugar de tener que luchar contra ello.

+ +

Los métodos que permiten cambiar la disposición de los elementos en CSS son los siguientes:

+ + + +

La propiedad display

+ +

Los métodos principales para lograr el diseño de páginas web con CSS son todos los valores de la propiedad display. Esta propiedad permite cambiar la forma predeterminada en que algo se muestra. Todo en flujo normal tiene un valor de display, utilizado como la forma como se comportan por defecto los elementos en los que están configurados. Por ejemplo, el hecho de que los párrafos en español se muestran uno debajo del otro se debe a que presentan la configuración display: block. Si creas un enlace alrededor de un texto dentro de un párrafo, ese enlace permanece en línea con el resto del texto y no se divide al pasar a una línea nueva. Esto se debe a que el elemento {{htmlelement ("a")}} es por defecto display: inline.

+ +

Puedes cambiar este comportamiento predeterminado de visualización (display). Por ejemplo, el elemento {{htmlelement ("li")}} es display: block de forma predeterminada, lo que significa que los elementos de la lista se muestran uno debajo del otro en nuestro documento en español. Si cambiamos el valor de visualización a inline, ahora se muestran uno al lado del otro, como lo harían las palabras de una frase. El hecho de que puedas cambiar el valor de display de cualquier elemento significa que puedes elegir elementos HTML por su significado semántico, sin preocuparte por cómo se verán. La forma en que se ven es algo que puedes cambiar.

+ +

Además de poder cambiar la presentación predeterminada de un elemento block a un elemento inline y viceversa, hay algunos métodos de diseño de página más poderosos que se inician como un valor de display. Sin embargo, cuando los uses, en general vas a necesitar propiedades adicionales. Los dos valores más importantes para nuestros propósitos cuando hablamos del diseño de páginas web son display: flex y display: grid.

+ +

Flexbox

+ +

Flexbox es el nombre corto del módulo de diseño de cajas flexibles, pensado para facilitarnos la distribución de las cosas en una dimensión, ya sea como una fila o como una columna. Para usar el método Flexbox, aplica display: flex al elemento padre de los elementos que deseas distribuir; todos sus elementos hijo directos se convierten en elementos flexibles. Vamos a verlo en un ejemplo sencillo.

+ +

El marcado HTML siguiente nos proporciona un elemento contenedor con una clase wrapper dentro del cual hay tres elementos {{htmlelement ("div")}}. Por defecto, estos elementos se mostrarían como elementos de bloque, uno debajo del otro, en nuestro documento en español.

+ +

Sin embargo, si añadimos display: flex al elemento padre, los tres elementos se organizan en columnas. Esto se debe a que se convierten en elementos flexibles y se ven afectados por algunos valores iniciales que el método Flexbox establece en el contenedor flexible. Se muestran en una fila porque el valor inicial de {{cssxref ("flex-direction")}} establecido en su elemento padre es row. Todos parecen expandirse hasta la altura del elemento de más altura, porque el valor inicial de la propiedad {{cssxref ("align-items")}} establecida en su elemento primario es stretch. Esto significa que los artículos se expanden hasta la altura del contenedor flexible, que en este caso está definida por el artículo de mayor altura. Todos los artículos se alinean al comienzo del contenedor y dejan el espacio que sobra al final de la fila.

+ +
+ + +
.wrapper {
+  display: flex;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">Uno</div>
+  <div class="box2">Dos</div>
+  <div class="box3">Tres</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_1', '300', '200') }}

+ +

Además de las propiedades anteriores, que pueden aplicarse a contenedores flexibles, también hay propiedades que pueden aplicarse a los elementos flexibles. Estas propiedades, entre otras cosas, pueden cambiar el comportamiento de estos elementos flexibles y permitirles expandirse y contraerse para adaptarse al espacio disponible.

+ +

Como un ejemplo sencillo de esto podemos añadir la propiedad {{cssxref ("flex")}} a todos nuestros elementos secundarios, con un valor de 1. Esto hará que todos los elementos crezcan y llenen el contenedor, en lugar de dejar espacio al final. Si hay más espacio, los artículos se ensancharán; si hay menos espacio, se volverán más estrechos. Además, si añades al código otro elemento, todos los elementos se volverán más pequeños para dejarle espacio; ajustarán el tamaño para ocupar la misma cantidad de espacio, cualquiera que sea.

+ +
+ + +
.wrapper {
+    display: flex;
+}
+
+.wrapper > div {
+    flex: 1;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Dos</div>
+    <div class="box3">Tres</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Flex_2', '300', '200') }}

+ +
+

Nota: Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre Flexbox.

+
+ +

Diseño de cuadrícula

+ +

Mientras que el método Flexbox está pensado para distribuir elementos unidimensionalmente, el diseño de cuadrícula está diseñado para distribuir elementos en dos dimensiones: alinear elementos en filas y columnas.

+ +

Una vez más, puedes activar el diseño de páginas web en cuadrícula con un valor de visualización específico: display: grid. El ejemplo siguiente utiliza un marcado similar al del ejemplo del método Flexbox, con un contenedor y algunos elementos secundarios. Además de usar display: grid, también definimos algunos tramos de filas y columnas en el elemento padre con las propiedades {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}}. Hemos definido tres columnas, cada una de 1fr, y dos filas de 100px. No necesitamos poner ninguna regla sobre los elementos secundarios porque se colocan automáticamente en las celdas que nuestra cuadrícula ha creado.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Dos</div>
+    <div class="box3">Tres</div>
+    <div class="box4">Cuatro</div>
+    <div class="box5">Cinco</div>
+    <div class="box6">Seis</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_1', '300', '330') }}

+ +

Cuando ya tienes una cuadrícula, se puede colocar tus elementos en ella explícitamente en lugar de confiar en el comportamiento de colocación automática que hemos visto arriba. En el segundo ejemplo, hemos definido la misma cuadrícula, pero esta vez con tres elementos secundarios. Hemos establecido la línea de inicio y final de cada elemento con las propiedades {{cssxref ("grid-column")}} y {{cssxref ("grid-row")}}. Esto hace que los elementos abarquen varios tramos.

+ +
+ + +
.wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 100px;
+    grid-gap: 10px;
+}
+
+.box1 {
+    grid-column: 2 / 4;
+    grid-row: 1;
+}
+
+.box2 {
+    grid-column: 1;
+    grid-row: 1 / 3;
+}
+
+.box3 {
+    grid-row: 2;
+    grid-column: 3;
+}
+
+ +
<div class="wrapper">
+    <div class="box1">Uno</div>
+    <div class="box2">Dos</div>
+    <div class="box3">Tres</div>
+</div>
+
+
+ +

{{ EmbedLiveSample('Grid_2', '300', '330') }}

+ +
+

Nota: Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre Diseñar cuadrículas.

+
+ +

El resto de esta guía expone otros métodos de diseño de páginas web que son menos importantes para las estructuras principales de diseño de tu página web, pero que pueden serte de ayuda para tareas específicas. Si entiendes la naturaleza de cada una de las tareas de diseño de una página web, vas a descubrir enseguida que a menudo vas a ser capaz de discernir qué tipo de diseño se adapta mejor a cada componente de tu diseño particular.

+ +

Floats

+ +

El método de flotación de un elemento cambia el comportamiento de ese elemento y de los elementos de nivel de bloque que lo siguen en el flujo normal. El elemento es desplazado hacia la izquierda o hacia la derecha y es eliminado del flujo normal, y el contenido circundante flota alrededor de este elemento.

+ +

La propiedad {{cssxref ("float")}} tiene cuatro valores posibles:

+ + + +

En el ejemplo siguiente, establecemos una flotación a la izquierda para un elemento <div> y le damos un {{cssxref ("margin")}} a la derecha para mantener el texto alejado del elemento. Esto nos da el efecto del texto envuelto alrededor de ese cuadro, y es la mayor parte de lo que necesitas saber sobre la flotación, tal como se utiliza en el diseño web moderno.

+ +
+ + +
<h1>Ejemplo sencillo de flotación</h1>
+
+<div class="box">Float</div>
+
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+
+
+ +
+.box {
+    float: left;
+    width: 150px;
+    height: 150px;
+    margin-right: 30px;
+}
+
+
+ +

{{ EmbedLiveSample('Float_1', '100%', 600) }}

+ +
+

Nota: El método de flotación se explica al completo en nuestro artículo sobre las propiedades float y clear. El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre métodos de diseño heredados.

+
+ +

Técnicas de posicionamiento

+ +

El posicionamiento permite mover un elemento desde donde se colocaría cuando está en flujo normal a otra ubicación. El posicionamiento no es un método para crear diseños de página principal, se trata más bien de administrar y ajustar la posición de elementos específicos en la página.

+ +

Sin embargo, hay técnicas útiles para ciertos patrones de diseños de páginas web que se basan en la propiedad {{cssxref ("position")}}. Comprender el posicionamiento también ayuda a comprender el flujo normal y qué implica sacar un elemento del flujo normal.

+ +

Hay cinco tipos de posicionamiento que debes conocer:

+ + + +

Ejemplo sencillo de posicionamiento

+ +

Para familiarizarte con estas técnicas de diseño de página, te mostraremos un par de ejemplos rápidos. Todos nuestros ejemplos contarán con el mismo HTML, que es el siguiente:

+ +
<h1>Posicionamiento</h1>
+
+<p>Soy un elemento básico de nivel de bloque.</p>
+<p class="positioned">Soy un elemento básico de nivel de bloque.</p>
+<p>Soy un elemento básico de nivel de bloque.</p>
+ +

Aplicaremos a este HTML un estilo predeterminado definido por el CSS siguiente:

+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+    background-color: rgb(207,232,220);
+    border: 2px solid rgb(79,185,227);
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+}
+
+ +

La salida que se obtiene es la siguiente:

+ +

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

+ +

El posicionamiento relativo

+ +

El posicionamiento relativo permite compensar un elemento desde la posición por defecto que tendría en flujo normal. Esto significa que podrías hacer una tarea como mover un icono un poco hacia abajo para que se alinee con una etiqueta de texto. Para ello, podríamos añadir la regla de posicionamiento relativo siguiente:

+ +
.positioned {
+  position: relative;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí asignamos el valor relative a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio: esto no hace nada por sí solo, así que también añadimos las propiedades {{cssxref ("top")}} y {{cssxref ( "left")}}, que sirven para mover el elemento afectado hacia abajo y a la derecha. Esto puede parecer lo contrario de lo que esperabas, pero debes pensar en ello como un elemento al que se empuja por sus lados superior e izquierdo, lo que resulta en un movimiento a la derecha y abajo.

+ +

Añadir este código dará el resultado siguiente:

+ +
+ + +
.positioned {
+  position: relative;
+  background: rgba(255,84,104,.3);
+  border: 2px solid rgb(255,84,104);
+  top: 30px;
+  left: 30px;
+}
+
+ +

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

+ +

El posicionamiento absoluto

+ +

El posicionamiento absoluto se utiliza para eliminar por completo un elemento del flujo normal y colocarlo mediante desplazamientos desde los bordes de un bloque contenedor.

+ +

Volviendo a nuestro ejemplo original no posicionado, podríamos añadir la regla CSS siguiente para implementar el posicionamiento absoluto:

+ +
.positioned {
+  position: absolute;
+  top: 30px;
+  left: 30px;
+}
+ +

Aquí le damos a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio un valor de absolute, y le asignamos las mismas propiedades {{cssxref ("top")}} y {{cssxref ("left")}}. Sin embargo, ahora añadir este código da el resultado siguiente:

+ +
+ + +
.positioned {
+    position: absolute;
+    background: rgba(255,84,104,.3);
+    border: 2px solid rgb(255,84,104);
+    top: 30px;
+    left: 30px;
+}
+
+ +

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

+ +

¡Este resultado es muy diferente! El elemento posicionado ahora se ha separado por completo del resto del diseño de la página y se superpone encima de este. Los otros dos párrafos ahora se asientan juntos, como si su hermano con posicionamiento absoluto no existiera. Las propiedades {{cssxref ("top")}} y {{cssxref ("left")}} tienen un efecto diferente en elementos con posicionamiento absoluto que en elementos con posicionamiento relativo. En este caso, los desplazamientos se han calculado desde la parte superior e izquierda de la página. Es posible cambiar el elemento padre para que se convierta en este tipo de contenedor, y lo veremos en el artículo sobre posicionamiento.

+ +

Posicionamiento fijo

+ +

El posicionamiento fijo elimina nuestro elemento del flujo de documentos de la misma manera que el posicionamiento absoluto. Sin embargo, en lugar de contar los desplazamientos en relación con el contenedor, se cuentan con respecto a la ventana gráfica. Como el elemento permanece fijo en relación con la ventana gráfica, podemos crear efectos como un menú que permanece fijo mientras la página se desplaza por debajo de él.

+ +

En este ejemplo nuestro HTML tiene tres párrafos de texto para poder tener una página que se desplace, y un cuadro al que asignamos la propiedad position: fixed.

+ +
<h1>Posicionamiento fijo</h1>
+
+<div class="positioned">Fijo</div>
+
+<p>Párrafo 1.</p>
+<p>Párrafo 2.</p>
+<p>Párrafo 3.</p>
+
+ +
+ + +
.positioned {
+    position: fixed;
+    top: 30px;
+    left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_1', '100%', 200) }}

+ +

Posicionamiento pegajoso

+ +

El posicionamiento pegajoso es el último método de posicionamiento que tenemos a nuestra disposición. Mezcla el posicionamiento estático predeterminado con el posicionamiento fijo. Cuando un elemento tiene la propiedad position: sticky, se desplaza en flujo normal hasta que se alcanzan los desplazamientos con respecto a la ventana gráfica que hemos definido. En ese punto se queda «atascado» como si tuviera configurado un valor position: fixed.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('Sticky_1', '100%', 200) }}

+ +
+

Nota: para obtener más información sobre el posicionamiento, consulta nuestro artículo Posicionamiento.

+
+ +

Diseño de tablas

+ +

Las tablas HTML sirven para mostrar datos tabulados, pero hace muchos años, antes incluso de que el CSS básico fuera compatible de forma fiable en todos los navegadores, los desarrolladores web también usaban tablas para hacer el diseño completo de una página web, colocando en las diversas filas y columnas de una tabla los títulos de encabezado de la página, los pies de página, las diferentes columnas, etc. Esto funcionó en ese momento, pero presenta muchos problemas: los diseños de tabla no son flexibles, requieren mucho código de marcado, son difíciles de depurar y no son semánticamente correctos (por ejemplo, los usuarios de lectores de pantalla tienen problemas para navegar por estos diseños de página web con tablas).

+ +

El aspecto que presenta una tabla en una página web cuando usas el código de marcado de una tabla se debe a un conjunto de propiedades CSS que definen el diseño de la tabla. Estas propiedades se pueden usar para diseñar elementos que no son tablas, un uso que a veces se describe como «usar tablas CSS».

+ +

El ejemplo siguiente muestra uno de esos usos; el uso de tablas CSS para el diseño debe considerarse en este punto un método heredado, para aquellas situaciones en las que tienes navegadores muy antiguos que no son compatibles con los métodos Flexbox o Grid.

+ +

Veamos un ejemplo. Primero, un código de marcado sencillo que crea un formulario HTML. Cada elemento de entrada tiene una etiqueta, y también hemos incluido un título dentro de un párrafo. Cada par etiqueta/entrada está delimitado por un elemento {{htmlelement ("div")}}, con fines de compaginación.

+ +
<form>
+  <p>En primer lugar, díganos su nombre y edad.</p>
+  <div>
+    <label for="fname">Nombre:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Apellidos:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Edad:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+ +

Ahora, el CSS para nuestro ejemplo. La mayor parte del CSS es bastante común, excepto por los usos de la propiedad {{cssxref ("display")}}. A los elementos {{htmlelement ("form")}}, {{htmlelement ("div")}}, {{htmlelement ("label")}} y {{htmlelement ("input")}} se les dice que se muestren como una tabla, filas de tabla y celdas de tabla, respectivamente; actuarán básicamente como marcas de tabla HTML, y lograrán por defecto la alineación perfecta de las etiquetas y las entradas. Todo lo que hay que hacer es añadir un poco de tamaños, márgenes, etc., para que todo se vea un poco mejor, ¡y listo!

+ +

Observa que se la ha proporcionado al párrafo de encabezado display: table-caption;, lo que hace que actúe como una celda de encabezado ({{htmlelement ("caption")}}) de la tabla; y con caption-side: bottom; se le dice a la celda de encabezado que se asiente en la parte inferior de la tabla con fines de aplicación de estilo, aunque en el código fuente el marcado está antes que los elementos <input>. Esto permite un poco de flexibilidad.

+ +
html {
+  font-family: sans-serif;
+}
+
+form {
+  display: table;
+  margin: 0 auto;
+}
+
+form div {
+  display: table-row;
+}
+
+form label, form input {
+  display: table-cell;
+  margin-bottom: 10px;
+}
+
+form label {
+  width: 200px;
+  padding-right: 5%;
+  text-align: right;
+}
+
+form input {
+  width: 300px;
+}
+
+form p {
+  display: table-caption;
+  caption-side: bottom;
+  width: 300px;
+  color: #999;
+  font-style: italic;
+}
+ +

Esto nos da el resultado siguiente:

+ +

{{ EmbedLiveSample('Table_layout', '100%', '170') }}

+ +

También puedes ver este ejemplo en vivo en css-tables-example.html (ver el código fuente).

+ +

Diseño en columnas

+ +

El módulo de diseño en columnas nos proporciona un modo de distribuir el contenido en columnas, de forma similar al modo como el texto fluye en un periódico. Aunque en un contexto web leer en columnas de arriba a abajo no resulta tan útil porque podría obligar a los usuarios a tener que hacer desplazamientos de arriba a abajo, la técnica de organizar el contenido en columnas también puede tener su utilidad.

+ +

Para convertir un bloque en un contenedor, utilizamos la propiedad {{cssxref ("column-count")}}, que le dice al navegador cuántas columnas nos gustaría tener, o {{cssxref ("column-width")}}, que le dice al navegador que llene el contenedor con tantas columnas de al menos ese ancho.

+ +

En el ejemplo siguiente comenzamos con un bloque de HTML dentro de un elemento <div> que contiene una clase container.

+ +
<div class="container">
+    <H1>Diseño en columnas</ h1>
+
+    <p>Párrafo 1.</p>
+    <p>Párrafo 2.</p>
+
+</div>
+
+ +

Utilizamos un column-width de 200 píxeles en ese contenedor, que crea en el navegador tantas columnas de 200 píxeles como quepan en el contenedor y luego comparte el espacio restante entre las columnas creadas.

+ +
+ + +
    .container {
+        column-width: 200px;
+    }
+
+ +

{{ EmbedLiveSample('Multicol_1', '100%', 200) }}

+ +

Resumen

+ +

Este artículo ha proporcionado un breve resumen de todas las tecnologías de diseño que debes conocer. ¡Sigue leyendo para obtener más información sobre cada tecnología individual!

+ +

{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/css_layout/positioning/index.html b/files/es/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..3deb33b91f --- /dev/null +++ b/files/es/learn/css/css_layout/positioning/index.html @@ -0,0 +1,469 @@ +--- +title: Positioning +slug: Learn/CSS/CSS_layout/Positioning +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}
+ +

El posicionamiento permite sacar elementos del flujo normal del diseño del documento, y hacer que se comporten de manera distinta, por ejemplo sentarse encima de otro o permanecer en el mismo lugar dentro de la ventana navegador. Este artículo explica los diferentes valores {{cssxref("position")}}, y como usarlos.

+ + + + + + + + + + + + +
Requisitos:HTML básico (Aprende  Introducción a HTML), y una idea de cómo trabaja CSS (Aprende  Introducción a CSS.)
Objetivos:Entender como trabajar con posicionamiento CSS.
+ +

Flujo del Documento

+ +

El posicionamiento es un tema bastante complejo, así que antes de profundizar en el código volvamos a examinar y ampliar un poco la teoría del diseño para darnos una idea de cómo funciona esto.

+ +

First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that box model thing again, which we looked at earlier. By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are all tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with display: block;.

+ +

That explains individual elements, but what about how elements interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block level elements are laid out vertically in the viewport — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them.

+ +

Inline elements behave differently — they don't appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing text or elements will move down to a new line.

+ +

If two adjacent elements both have margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called margin collapsing, and we have met this before too.

+ +

Let's look at a simple example that explains all this:

+ +
<h1>Basic document flow</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

{{ EmbedLiveSample('Document_flow', '100%', 500) }}

+ +

We will be revisiting this example a number of times as we go through this article, as we show the effects of the different positioning options available to us.

+ +

We'd like you to follow along with the exercises on your local computer, if possible — grab a copy of 0_basic-flow.html from our Github repo (source code here) and use that as a starting point.

+ +

Introducing positioning

+ +

The whole idea of positioning is to allow us to override the basic document flow behaviour described above, to produce interesting effects. What if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? Positioning is your tool. Or if you want to create a UI element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? Positioning makes such layout work possible.

+ +

There are a number of different types of positioning that you can put into effect on HTML elements. To make a specific type of positioning active on an element, we use the {{cssxref("position")}} property.

+ +

Static positioning

+ +

Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."

+ +

To demonstrate this, and get your example set up for future sections, first add a class of positioned to the second {{htmlelement("p")}} in the HTML:

+ +
<p class="positioned"> ... </p>
+ +

Now add the following rule to the bottom of your CSS:

+ +
.positioned {
+  position: static;
+  background: yellow;
+}
+ +

If you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph. This is fine — as we said before, static positioning is the default behaviour!

+ +
+

Note: You can see the example at this point live at 1_static-positioning.html (see source code).

+
+ +

Relative positioning

+ +

Relative positioning is the first position type we'll take a look at. This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page. Go ahead and update the position declaration in your code:

+ +
position: relative;
+ +

If you save and refresh at this stage, you won't see a change in the result at all — so how do you modify the element's position? You need to use the {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} properties, which we'll explain in the next section.

+ +

Introducing top, bottom, left, and right

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} are used alongside {{cssxref("position")}} to specify exactly where to move the positioned element to. To try this out, add the following declarations to the .positioned rule in your CSS:

+ +
top: 30px;
+left: 30px;
+ +
+

Note: The values of these properties can take any units you'd logically expect — pixels, mm, rems, %, etc.

+
+ +

If you now save and refresh, you'll get a result something like this:

+ + + +

{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

+ +

Cool, huh? Ok, so this probably wasn't what you were expecting — why has it moved to the bottom and right if we specified top and left? Illogical as it may initially sound, this is just the way that relative positioning works — you need to think of an invisible force that pushes the side of the positioned box, moving it in the opposite direction. So for example, if you specify top: 30px;, a force pushes the top of the box, causing it to move downwards by 30px.

+ +
+

Note: You can see the example at this point live at 2_relative-positioning.html (see source code).

+
+ +

Absolute positioning

+ +

Absolute positioning brings very different results. Let's try changing the position declaration in your code as follows:

+ +
position: absolute;
+ +

If you now save and refresh, you should see something like so:

+ + + +

{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}

+ +

First of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed together like it no longer exists! Well, in a way, this is true. An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else. This is very useful — it means that we can create isolated UI features that don't interfere with the position of other elements on the page — for example popup information boxes and control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on.

+ +

Second, notice that the position of the element has changed — this is because {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} behave in a different way with absolute positioning. Instead of specifying the direction the element should move in, they specify the distance the element should be from each containing element's sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element", and 30px from the left.

+ +
+

Note: You can use {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} to resize elements if you need to. Try setting top: 0; bottom: 0; left: 0; right: 0; and margin: 0; on your positioned elements and see what happens! Put it back again afterwards...

+
+ +
+

Note: Yes, margins still affect positioned elements. Margin collapsing doesn't, however.

+
+ +
+

Note: You can see the example at this point live at 3_absolute-positioning.html (see source code).

+
+ +

Positioning contexts

+ +

Which element is the "containing element" of an absolutely positioned element? By default, it is the {{htmlelement("html")}} element — the positioned element is nested inside the {{htmlelement("body")}} in the HTML source, but in the final layout, it is 30px away from the top and left of the edge of the page, which is the {{htmlelement("html")}} element. This is more accurately called the element's positioning context.

+ +

We can change the positioning context — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's other ancestors — one of the elements it is nested inside (you can't position it relative to an element it is not nested inside). To demonstrate this, add the following declaration to your body rule:

+ +
position: relative;
+ +

This should give the following result:

+ + + +

{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

+ +

The positioned element now sits relative to the {{htmlelement("body")}} element.

+ +
+

Note: You can see the example at this point live at 4_positioning-context.html (see source code).

+
+ +

Introducing z-index

+ +

All this absolute positioning is good fun, but there is another thing we haven't considered yet — when elements start to overlap, what determines which elements appear on top of which other elements? In the example we've seen so far, we only have one positioned element in the positioning context, and it appears on the top, since positioned elements win over non-positioned elements. What about when we have more than one?

+ +

Try adding the following to your CSS, to make the first paragraph absolutely positioned too:

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

At this point you'll see the first paragraph colored green, moved out of the document flow, and positioned a bit above from where it originally was. It is also stacked below the original .positioned paragraph, where the two overlap. This is because the .positioned paragraph is the second paragraph in the source order, and positioned elements later in the source order win over positioned elements earlier in the source order.

+ +

Can you change the stacking order? Yes, you can, by using the {{cssxref("z-index")}} property. "z-index" is a reference to the z-axis. You may recall from previous points in the source where we discussed web pages using horizontal (x-axis) and vertical (y-axis) coordinates to work out positioning for things like background images and drop shadow offsets. (0,0) is at the top left of the page (or element), and the x- and y-axes run across to the right and down the page (for left to right languages, anyway.)

+ +

Web pages also have a z-axis — an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen). {{cssxref("z-index")}} values affect where positioned elements sit on that axis — positive values move them higher up the stack, and negative values move them lower down the stack. By default, positioned elements all have a z-index of auto, which is effectively 0.

+ +

To change the stacking order, try adding the following declaration to your p:nth-of-type(1) rule:

+ +
z-index: 1;
+ +

You should now see the finished example:

+ + + +

{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

+ +

Note that z-index only accepts unitless index values; you can't specify that you want one element to be 23 pixels up the Z-axis — it doesn't work like that. Higher values will go above lower values, and it is up to you what values you use. Using 2 and 3 would give the same effect as 300 and 40000.

+ +
+

Note: You can see the example at this point live at 5_z-index.html (see source code).

+
+ +

Fixed positioning

+ +

There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.

+ +

Let's put together a simple example to show what we mean. First of all, delete the existing p:nth-of-type(1) and .positioned rules from your CSS.

+ +

Now, update the body rule to remove the position: relative; declaration and add a fixed height, like so:

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

Now we're going to give the {{htmlelement("h1")}} element position: fixed;, and get it to sit at the top center of the viewport. Add the following rule to your CSS:

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

The top: 0; is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old margin: 0 auto; trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.

+ +

If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading. This is because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

You should now see the finished example:

+ + + +

{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

+ +
+

Note: You can see the example at this point live at 6_fixed-positioning.html (see source code).

+
+ +

Experimental: position sticky

+ +

There is a new positioning value available called position: sticky, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed.  See our position: sticky reference entry for more details and an example.

+ +

Summary

+ +

I'm sure you had fun playing with basic positioning — it is one of the essential tools behind creating complex CSS layouts and UI features. With that in mind, in the next article we'll have even more fun with positioning — there we'll go a step further and start to build up some real world useful things with it.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html new file mode 100644 index 0000000000..18065a1da5 --- /dev/null +++ b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html @@ -0,0 +1,237 @@ +--- +title: Soporte a navegadores antiguos +slug: Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En este módulo recomendamos utilizar Flexbox y Grid como las herramientas principales para tus diseños. Sin embargo, habrá visitantes a tu sitio web que usen navegadores antiguos o navegadores que no admiten los métodos que has utilizado. Este siempre será el caso en la red: a medida que se desarrollan funciones nuevas, los diferentes navegadores priorizan cosas diferentes. Este artículo explica cómo usar técnicas web modernas sin perjudicar a los usuarios con tecnologías más antiguas.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (véase Introducción al HTML) y nociones de cómo funciona el CSS (véase Introducción al CSS).
Objetivo:Comprender cómo proporcionar compatibilidad para tus diseños en navegadores antiguos que podrían no admitir las funciones que deseas utilizar.
+ +

¿Cuál es la vista del navegador para tu sitio?

+ +

Cada sitio web es diferente en términos de público objetivo. Antes de decidir el enfoque a seguir, averigua la cantidad de visitantes que visitan tu sitio que utilizan navegadores antiguos. Esto es sencillo si se trata de un sitio web que simplemente modificas o reemplazas, porque probablemente haya análisis disponibles que te indiquen la tecnología que la gente utiliza. Si el sitio no tiene funciones de análisis o se trata de un sitio nuevo, hay sitios como Statcounter que pueden proporcionar estadísticas filtradas por ubicación.

+ +

También debes considerar el tipo de dispositivos y la forma en que las personas usan tu sitio; por ejemplo, puedes esperar un número de dispositivos móviles superior al promedio. La accesibilidad y las personas que utilizan tecnología de asistencia siempre deben tenerse en cuenta, pero para algunos sitios pueden ser aspectos aún más críticos. Según experiencia propia, los desarrolladores a menudo se preocupan demasiado por la experiencia de usuario de un 1% de usuarios que usan una versión antigua de Internet Explorer, y no consideran en absoluto el número mucho mayor de usuarios que tiene necesidades de accesibilidad especiales.

+ +

¿Qué compatibilidad presentan las funciones que vas a usar?

+ +

Una vez conozcas qué tipo de navegadores utiliza la gente que accede a tu sitio, puedes evaluar cualquier tecnología que desees utilizar según su compatibilidad y con qué facilidad es posible proporcionar una alternativa a los visitantes que no disponen de esa tecnología. Tratamos de facilitarte esta experiencia proporcionando información de compatibilidad de los navegadores en cada una de las páginas que detallan una propiedad CSS. Por ejemplo, echa un vistazo a la página de {{cssxref ("grid-template-columns")}}. En la parte inferior de esta página hay una tabla que enumera los navegadores principales, junto con la versión en la que comenzaron a admitir esta propiedad.

+ +

+ +

Otra forma popular de averiguar la compatibilidad de una característica es el sitio web Can I Use. Este sitio enumera la mayoría de las características de la Plataforma Web con información sobre el estado de compatibilidad de tu navegador. Puedes ver las estadísticas de uso por ubicación, cosa que resulta útil si trabajas en un sitio cuyos usuarios son de un territorio particular. Incluso puedes vincular tu cuenta de Google Analytics para obtener un análisis basado en tus datos de usuario.

+ +

Conocer las tecnologías de tus usuarios y las compatibilidades de las funciones que tal vez quieras usar te proporcionan una buena base para tomar todas tus decisiones y saber cuál es la mejor manera de dar compatibilidad a todos tus usuarios.

+ +

Compatibilidad no significa «verse igual»

+ +

Es posible que un sitio web no tenga el mismo aspecto en todos los navegadores, porque algunos de tus usuarios lo verán en un teléfono y otros en el ordenador. Del mismo modo, algunos de tus usuarios tendrán una versión antigua del navegador y otros el navegador más reciente. Es posible que algunos de tus usuarios estén escuchando el contenido leído por un lector de pantalla, o hayan ampliado la página para poderla leer. Dar compatibilidad a todos significa servir una versión de tus contenidos diseñada estratégicamente para que se vea genial con los navegadores modernos, pero aún sea utilizable en un nivel básico para los usuarios con navegadores más antiguos.

+ +

Un nivel básico de compatibilidad proviene de estructurar bien tus contenidos para que el flujo normal de tu página tenga sentido. Un usuario con un teléfono con funciones muy limitadas puede que no obtenga buena parte de tu CSS, pero el contenido fluirá de una manera que la lectura resulte fácil. Por lo tanto, un documento HTML bien estructurado siempre debe ser tu punto de partida. ¿Tu contenido tiene sentido si eliminas tu hoja de estilo?

+ +

Una opción es dejar esta vista simple del sitio como alternativa para las personas que utilizan navegadores muy antiguos o limitados. Si la cantidad de personas que visitan el sitio con estos navegadores es pequeña, quizá no tenga sentido comercial dedicar tiempo a tratar de proporcionarles una experiencia similar a la de las personas que utilizan navegadores modernos. Sería mejor dedicar el tiempo a cosas que proporcionen accesibilidad al sitio, y servir así a muchos más usuarios. Hay un punto medio entre una página HTML simple y todos esos recursos, y CSS realmente ha logrado que proporcionar estas soluciones alternativas resulte bastante sencillo.

+ +

Crear soluciones alternativas en CSS

+ +

Las especificaciones CSS contienen información que explica qué hace el navegador cuando se aplican dos métodos de diseño al mismo elemento. Esto significa que hay una definición de lo que sucede si un elemento flotante, por ejemplo, también es un elemento Grid que usa diseño de cuadrícula CSS. Combina esta información con el conocimiento de que los navegadores ignoran el CSS que no entienden, y tienes una manera de crear diseños simples utilizando las técnicas heredadas que ya hemos expuesto, que luego se sobrescriben con tu diseño de cuadrícula en los navegadores modernos que lo entienden.

+ +

En el ejemplo siguiente hemos especificado tres elementos de flotación <div> para que se muestren en una fila. Cualquier navegador que no sea compatible con el método de compaginación CSS Grid verá la hilera de cajas como un diseño con el método de flotación. Un elemento de flotación que se convierte en un elemento de cuadrícula pierde el comportamiento de flotación, lo que significa que al convertir el contenedor en un contenedor de cuadrícula, los elementos de flotación se convierten en elementos de cuadrícula. Si el navegador admite el diseño de cuadrícula, muestra la vista de cuadrícula; si no, ignora las propiedades relacionadas con el diseño de cuadrícula y utiliza el diseño de flotación.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Artículo uno</div>
+  <div class="item">Artículo dos</div>
+  <div class="item">Artículo tres</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example1', '100%', '200') }}

+
+ +
+

Nota: La propiedad {{cssxref ("clear")}} tampoco tiene efecto una vez que el elemento al que se le aplica se convierte en un elemento de cuadrícula, por lo que podrías tener una compaginación con un pie clear, que luego pase a ser un elemento de compaginación en cuadrícula.

+
+ +

Métodos de soluciones alternativas

+ +

Numerosos métodos de compaginación se pueden usar de manera similar a este ejemplo con comportamiento de flotación. Puedes elegir el que tenga más sentido para el patrón de compaginación que necesitas crear.

+ +
+
float y clear
+
Como se muestra arriba, las propiedades float o clear dejan de afectar a la compaginación si los elementos afectados por estas propiedades pasan a ser de tipo flexible o de cuadrícula.
+
display: inline-block;
+
Este método se puede utilizar para crear compaginaciones en columnas; si un elemento tiene establecido un comportamiento display: inline-block pero se convierte a elemento con compaginación de tipo flexible o de cuadrícula, el comportamiento inline-block se ignora.
+
display: table;
+
El método de creación de tablas CSS que se describe en la introducción de estos artículos puede utilizarse como opción alternativa. Los elementos que tienen diseños de tabla CSS pierden este comportamiento si se convierten en elementos con comportamiento flexible o de cuadrícula. Es importante destacar que no se crearán las cajas sin nombre que fueron creadas para arreglar la estructura de tabla.
+
Compaginación en columnas
+
Para ciertos tipos de compaginación puedes usar multi-col como opción alternativa; si tu contenedor tiene alguna propiedad column-* definida y se convierte en un contenedor con comportamiento de cuadrícula, se anula el comportamiento en columnas.
+
Flexbox como opción alternativa a la cuadrícula
+
Flexbox tiene una compatibilidad mayor con los navegadores que Grid porque es compatible con Internet Explorer 10 y 11, aunque te recomendamos que consultes la información que encontrarás más adelante en este artículo sobre la compatibilidad bastante irregular y confusa de Flexbox en navegadores más antiguos. Si conviertes un contenedor flexible en un contenedor de cuadrícula, se ignorará cualquier propiedad flex aplicada a los elementos secundarios.
+
+ +

Observa que si usas el CSS de esta manera puedes proporcionar una experiencia de usuario decente para ajustar muchas compaginaciones en navegadores antiguos. Añadimos una compaginación más simple basada en técnicas antiguas y con buena compatibilidad, y luego usamos el CSS más nuevo para crear la compaginación que va a ver más del 90% de tu público. Sin embargo, hay casos en los que el código alternativo va a tener que incluir algo que también van a interpretar los navegadores nuevos. Un buen ejemplo de esto es si queremos añadir anchos en porcentaje a nuestros elementos de flotación para que el aspecto de las columnas reproduzca mejor la visualización en cuadrícula, expandiendo para llenar el contenedor.

+ +

En la compaginación de flotación, el porcentaje se calcula con respecto al contenedor: 33,333% es un tercio del ancho del contenedor. Sin embargo, en el método Grid ese 33,333% se calcula con respecto al área de la cuadrícula en la que el elemento está ubicado, por lo que en realidad se convierte en un tercio del tamaño que queremos una vez que se introduce la compaginación en cuadrícula.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">Artículo uno</div>
+  <div class="item">Artículo dos</div>
+  <div class="item">Artículo tres</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example2', '100%', '200') }}

+
+ +

Para tratar este problema, necesitamos tener un modo de detectar si Grid es compatible y, por lo tanto, si anulará el ancho. El CSS tiene una solución.

+ +

Consultar las propiedades

+ +

Consultar las propiedades te permite comprobar si un navegador admite alguna característica CSS en particular. Esto significa que puedes escribir algunos CSS para navegadores que no admitan una propiedad determinada y luego verificar si el navegador es compatible, y añadir tu elegante diseño de ser así.

+ +

Si añadimos al ejemplo anterior una consulta de las propiedades, podemos usarla para volver a establecer a auto los anchos de nuestros elementos, si sabemos que hay compatibilidad para la compaginación en cuadrícula.

+ +
+
* {box-sizing: border-box;}
+
+.wrapper {
+  background-color: rgb(79,185,227);
+  padding: 10px;
+  max-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.item {
+  float: left;
+  border-radius: 5px;
+  background-color: rgb(207,232,220);
+  padding: 1em;
+  width: 33.333%;
+}
+
+@supports (display: grid) {
+  .item {
+      width: auto;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">Elemento uno</div>
+  <div class="item">Elemento dos</div>
+  <div class="item">Elemento tres</div>
+</div>
+
+ +

{{ EmbedLiveSample('Example3', '100%', '200') }}

+
+ +

La compatibilidad para la consulta de propiedades es muy buena en todos los navegadores modernos, pero debes tener en cuenta que son los navegadores que no admiten CSS Grid los que tampoco admiten la consulta de propiedades. Esto significa que para esos navegadores funcionará un enfoque como el que acabamos de detallar. Lo que hacemos es escribir primero nuestro CSS anterior sin hacer ninguna consulta de propiedades. Los navegadores que no admiten Grid y que no admiten la consulta de propiedades utilizan esa información de diseño que pueden entender e ignoran por completo todo lo demás. Los navegadores que admiten la consulta de propiedades también admiten CSS Grid y, por lo tanto, ejecutan el código de cuadrícula y el código de la consulta de propiedades.

+ +

La especificación para la consulta de propiedades también incluye la posibilidad de probar si un navegador no admite una propiedad; esto solo es útil si el navegador admite consultas de propiedades. En el futuro bastará con el enfoque de verificar la falta de compatibilidad, porque los navegadores que no tienen compatibilidad para la consulta de propiedades desaparecen. Por ahora, sin embargo, utiliza el enfoque de usar el CSS anterior y luego sobrescribirlo para obtener la mejor compatibilidad.

+ +

Versiones anteriores de Flexbox

+ +

En versiones anteriores de navegadores, puedes encontrar versiones anteriores de la especificación Flexbox. En el momento de escribir esto se trata principalmente de un problema con Internet Explorer 10, que usa el prefijo -ms- para Flexbox. Esto también significa que algunos artículos y tutoriales están obsoletos; esta guía útil te ayuda a verificarlo y también puede ayudarte si necesitas compatibilidad Flexbox en navegadores muy antiguos.

+ +

La versión prefijada de Grid de Internet Explorer 10 y 11

+ +

La especificación CSS Grid se prototipó inicialmente en Internet Explorer 10; esto significa que si bien IE10 e IE11 no tienen compatibilidad de cuadrícula moderna, sí tienen una versión de compaginación en cuadrícula, que es muy útil, aunque diferente de la especificación moderna que documentamos en este sitio. Las implementaciones de IE10 y 11 tienen el prefijo -ms-, lo que significa que puedes usarlo para estos navegadores y los navegadores que no sean de Microsoft lo ignorarán. Sin embargo, Edge todavía comprende la sintaxis anterior, así que ten cuidado de que todo se sobrescriba de forma segura en tu cuadrícula de CSS moderna.

+ +

La guía de Mejora progresiva en la compaginación en cuadrícula puede ayudarte a comprender la versión de la cuadrícula de Internet Explorer, y hemos incluido algunos enlaces útiles adicionales al final de este artículo. Sin embargo, a menos que tengas una gran cantidad de visitantes con versiones anteriores de Internet Explorer, puede que te resulte mejor centrarte en crear una reserva que funcione para todos los navegadores no compatibles.

+ +

Pruebas con navegadores antiguos

+ +

Dado que la mayoría de los navegadores ya son compatibles con Flexbox y Grid, puede resultar en efecto difícil hacer pruebas con navegadores más antiguos. Una forma es utilizar una herramienta de prueba en línea como Sauce Labs, como se detalla en el módulo de comprobación de compatibilidad entre navegadores.

+ +

También puedes descargar e instalar máquinas virtuales y ejecutar versiones anteriores de navegadores en un entorno de tu propio ordenador. Tener acceso a versiones anteriores de Internet Explorer es particularmente útil, y para ese propósito, Microsoft ha puesto a disposición de los usuarios una variedad de máquinas virtuales de descarga gratuita. Están disponibles para los sistemas operativos Mac, Windows y Linux, por lo que resultan una manera excelente de hacer pruebas con los navegadores Windows antiguos y modernos, incluso si no utilizas una computadora con sistema Windows.

+ +

Resumen

+ +

Ahora tienes el conocimiento para usar con confianza técnicas como Grid y Flexbox, crear soluciones alternativas para navegadores más antiguos y utilizar cualquier técnica nueva que pueda surgir en el futuro.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/first_steps/comenzando_css/index.html b/files/es/learn/css/first_steps/comenzando_css/index.html new file mode 100644 index 0000000000..1da9edb582 --- /dev/null +++ b/files/es/learn/css/first_steps/comenzando_css/index.html @@ -0,0 +1,264 @@ +--- +title: Empezar con CSS +slug: Learn/CSS/First_steps/Comenzando_CSS +tags: + - Aprender + - CSS + - Clases + - Ejemplo + - Elementos + - Estado + - Principiante + - Selectores + - Sintaxis +translation_of: Learn/CSS/First_steps/Getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
+ +

En este artículo aplicaremos CSS a un documento HTML sencillo para aprender algunos elementos prácticos sobre este lenguaje.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajo con archivos y conceptos básicos de HTML (véase Introducción al HTML).
Objetivo:Comprender los conceptos básicos para vincular un documento CSS a un archivo HTML y dar a un texto un formato sencillo con CSS.
+ +

Empezamos con algo de HTML

+ +

Nuestro punto de partida es un documento HTML. Puedes copiar el código de abajo si quieres trabajar en tu ordenador. Guarda el siguiente código como index.html en una carpeta de tu equipo.

+ +
<!doctype html>
+<html lang="es">
+<head>
+    <meta charset="utf-8">
+    <title>Empezamos con el CSS</title>
+</head>
+
+<body>
+
+    <h1>Soy un título de nivel uno</h1>
+
+    <p>Este es un párrafo de texto. En el texto hay un <span>elemento span</span>
+y también un <a href="http://example.com">enlace</a>.</p>
+
+    <p>Este es el segundo párrafo. Contiene un elemento <em>destacado</em>.</p>
+
+    <ul>
+        <li>Punto uno</li>
+        <li>Punto dos</li>
+        <li>Punto <em>tres</em></li>
+    </ul>
+
+</body>
+
+</html>
+
+ +
+

Nota: Si lees esto en un dispositivo o un entorno donde no puedes crear archivos fácilmente, no te preocupes. A continuación hay editores de código en vivo que van a permitirte escribir ejemplos de código en esta misma página.

+
+ +

Agregar CSS a un documento

+ +

Lo primero que se debe hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el CSS desde el encabezado del documento.

+ +

Crea un archivo en la misma carpeta que tu documento HTML y guárdalo como styles.css. La extensión .css muestra que es un archivo CSS.

+ +

Para vincular styles.css a index.html, añade la siguiente línea en algún lugar dentro del {{htmlelement ("head")}} del documento HTML:

+ +
<link rel="stylesheet" href="styles.css">
+ +

Este elemento {{htmlelement ("link")}} le dice al navegador que hay una hoja de estilo con el atributo rel y la ubicación de esa hoja de estilo como el valor del atributo href. Puedes probar si el CSS funciona añadiendo una regla a styles.css. Usando el editor de código, añade lo siguiente al archivo CSS:

+ +
h1 {
+  color: red;
+}
+ +

Guarda los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser rojo. Si esto sucede, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no lo hace, verifica que hayas escrito todo correctamente.

+ +

Puedes continuar trabajando en styles.css localmente o usar nuestro editor interactivo para continuar con este tutorial. El editor interactivo actúa como si el CSS del primer panel estuviera vinculado al documento HTML, tal como lo hemos hecho con el documento anterior.

+ +

Dar formato a elementos HTML

+ +

Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un selector de elementos: un selector que coincide directamente con el nombre de un elemento HTML. Para determinar todos los párrafos del documento, se usa el selector p. Para hacer que todos los párrafos se vean verdes se usa:

+ +
p {
+  color: green;
+}
+ +

Puedes determinar múltiples selectores a la vez, separándolos con una coma. Si queremos que todos los párrafos y todos los elementos de la lista sean verdes, el código se verá así:

+ +
p, li {
+    color: green;
+}
+ +

Pruébalo en el editor interactivo que encontrarás a continuación (edita los cuadros de código) o en tu documento CSS.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} 

+ +

Cambiar el comportamiento predeterminado de los elementos

+ +

Cuando miramos un documento HTML bien marcado, incluso con algo tan simple como nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se uniría en un grupo y tendríamos que darle formato desde cero. Todos los navegadores modernos muestran el contenido HTML por defecto de la misma manera.

+ +

Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia.  Un buen ejemplo es <ul>, que muestra una lista desordenada. Tiene viñetas y, si decidimos que no las queremos, podemos eliminarlas de este modo:

+ +
li {
+  list-style-type: none;
+}
+ +

Ahora, intenta añadir esto a tu CSS.

+ +

Es muy conveniente consultar en MDN la propiedad list-style-type para ver qué valores admite. Echa un vistazo a la página de list-style-type y encontrarás un ejemplo interactivo en la parte superior para probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página).

+ +

Al mirar esa página, descubrirás que, además de eliminar las viñetas de la lista, también puedes cambiarlas. Intenta cambiarlas por unas cuadradas utilizando el valor square.

+ +

Añadir una clase

+ +

Hasta ahora, hemos utilizado elementos cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y determinarla.

+ +

En tu documento HTML, añade al segundo elemento de la lista un atributo de clase. Debería verse así:

+ +
<ul>
+  <li>Punto uno</li>
+  <li class = "special">Punto dos</li>
+  <li>Punto <em>tres</em></li>
+</ul>
+ +

En tu CSS, puedes seleccionar una clase special creando un selector que comience con un carácter de punto final. Añade lo siguiente a tu archivo CSS:

+ +
.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Guarda y actualiza para ver cuál es el resultado.

+ +

Puedes aplicar la clase special a cualquier elemento de la página que desees que tenga el mismo aspecto que este elemento de lista. Por ejemplo, es posible que desees que el <span> del párrafo también sea naranja y en negrita. Intenta añadirle una class special, luego vuelve a cargar la página y observa qué sucede.

+ +

A veces verás reglas con un selector que enumera el selector de elementos HTML junto con la clase:

+ +
li.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Esta sintaxis significa «determina cualquier elemento li que tenga una clase special». Si hicieras esto, ya no podrías aplicar la clase a un elemento <span> u otro elemento simplemente añadiéndole la clase; tendrías que añadir ese elemento a la lista de selectores:

+ +
li.special,
+span.special {
+  color: orange;
+  font-weight: bold;
+}
+ +

Como puedes imaginar, algunas clases pueden aplicarse a muchos elementos y no queremos tener que seguir editando el CSS cada vez que algo nuevo necesita adoptar ese estilo. Por lo tanto, a veces es mejor eludir el elemento y simplemente referirse a la clase, a menos que sepas que vas a querer crear algunas reglas especiales para un solo elemento y tal vez quieras asegurarte de que no se apliquen a otros elementos.

+ +

Dar formato según la ubicación en un documento

+ +

Hay momentos en los que querrás que algo se vea diferente en función de dónde esté en el documento. Hay múltiples selectores que pueden hacerlo, pero por ahora veremos solo un par. En nuestro documento hay dos elementos <em>: uno dentro de un párrafo y el otro dentro de un elemento de la lista. Para seleccionar solo un <em> que esté anidado dentro de un elemento <li>, podemos usar un selector llamado combinador descendente, que simplemente toma la forma de un espacio entre otros dos selectores.

+ +

Añade la siguiente regla a la hoja de estilo.

+ +
li em {
+  color: rebeccapurple;
+}
+ +

Este selector separará cualquier elemento <em> que esté dentro de (un descendiente de) <li>. Entonces, en tu documento de ejemplo, deberías encontrar que el <em> del tercer elemento de la lista es morado, pero el que hay en el párrafo no ha cambiado.

+ +

Otra cosa que puedes probar es dar formato un párrafo que venga directamente a continuación de un título que esté en el mismo nivel de jerarquía en el HTML. Para hacerlo, coloca un + (un combinador hermano adyacente) entre los selectores.

+ +

Intenta añadir también esta regla a la hoja de estilo:

+ +
h1 + p {
+  font-size: 200%;
+}
+ +

El ejemplo que encontrarás a continuación incluye las dos reglas anteriores. Intenta añadir una regla para que un span dentro de un párrafo se vuelva rojo. Sabrás si lo has hecho bien si el <span> en el primer párrafo se vuelve rojo pero el que hay en el primer elemento de la lista no cambia de color.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}

+ +
+

Nota: Como puedes ver, el CSS nos ofrece varias formas de seleccionar elementos, y hasta ahora solo hemos arañado la superficie. Examinaremos todos estos selectores y muchos más en los artículos correspondientes a Selectores que encontrarás más adelante.

+
+ +

Dar formato según el estado

+ +

El último tipo de estilo que veremos en este tutorial es la capacidad de dar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <a> (anclaje). Tiene diferentes estados dependiendo de si se ha visitado o no, se pasa por encima, o se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. El CSS que encontrarás a continuación presenta en color rosa los enlaces que no se han visitado y en verde los que sí.

+ +
a:link {
+  color: pink;
+}
+
+a:visited {
+  color: green;
+}
+ +

Puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:

+ +
a:hover {
+  text-decoration: none;
+}
+ +

En el ejemplo que encontrarás a continuación, puedes jugar con diferentes valores para los distintos estados de un enlace. Hemos añadido las reglas anteriores y ahora nos damos cuenta de que el color rosa es demasiado claro y difícil de leer, ¿por qué no cambiarlo a otro que se vea mejor? ¿Puedes poner los enlaces en negrita?

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} 

+ +

Hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, vale la pena recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento. Intentaremos resaltar estas posibles dificultades en los lugares apropiados.

+ +
+

Nota: a menudo verás que se menciona la accesibilidad en estas lecciones y en MDN. Cuando hablamos de accesibilidad nos referimos al requisito de que nuestras páginas web sean comprensibles y usables para todas las personas.

+ +

Puede que tu visitante acceda a la página desde un ordenador con ratón o trackpad, o un teléfono inteligente con pantalla táctil. O puede que use un lector de pantalla que lea el contenido del documento, así como puede que necesite un tamaño de texto más grande o navegar por la página usando solo el teclado.

+ +

Un documento HTML simple es, generalmente, accesible para todos. Es importante que el documento no pierda accesibilidad a medida que vayas aplicándole estilo.

+
+ +

Combinaciones de selectores y combinadores

+ +

Vale la pena señalar que puedes hacer múltiples combinaciones de selectores y combinadores. Por ejemplo:

+ +
/* selecciona cualquier elemento <span> que se encuentre dentro de un <p>, que esté dentro de un <artículo> */
+artículo p span { ... }
+
+/* selecciona cualquier <p> que se encuentre directamente después de <ul>, que va directamente después de <h1> */
+h1 + ul + p { ... }
+ +

También puedes combinar varios tipos juntos. Intenta añadir lo siguiente al código:

+ +
body h1 + p .special {
+  color: yellow;
+  background-color: black;
+  padding: 5px;
+}
+ +

Dará formato a cualquier elemento con la clase special, dentro de un elemento <p> que venga justo después de <h1>, el cual se encuentra dentro de <body>. ¡Uf!

+ +

En el HTML original que proporcionamos, el único elemento al que esto aplica estilo es <span class="special">.

+ +

No te preocupes si ahora mismo te parece complicado: irás acostumbrarte a medida que escribas más CSS.

+ +

Para terminar

+ +

En este tutorial, hemos visto varias formas con las que se puede diseñar un documento usando CSS. Desarrollaremos este conocimiento a medida que avancemos con el resto de las lecciones. Sin embargo, ahora ya sabes lo suficiente como para aplicar estilo al texto, aplicar CSS en función de diferentes formas de determinar elementos en el documento y buscar propiedades y valores en la documentación de MDN.

+ +

En el próximo artículo, veremos cómo se estructura el CSS.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es el CSS?
    2. +
  2. Empezar con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona el CSS
    5. +
  5. Pon en práctica tus conocimientos nuevos
    6. +
diff --git a/files/es/learn/css/first_steps/como_funciona_css/index.html b/files/es/learn/css/first_steps/como_funciona_css/index.html new file mode 100644 index 0000000000..920212e080 --- /dev/null +++ b/files/es/learn/css/first_steps/como_funciona_css/index.html @@ -0,0 +1,156 @@ +--- +title: Cómo funciona CSS +slug: Learn/CSS/First_steps/Como_funciona_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

{{LearnSidebar}}
+ {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

Hemos aprendido los conceptos básicos de CSS, para qué sirve y cómo escribir hojas de estilo simples. En esta lección vamos a echar un vistazo a cómo un navegador crea una página web a partir de CSS y HTML.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos y conceptos básicos de HTML (véase Introducción a HTML).
Objetivo:Entender los conceptos básicos de cómo el navegador analiza el CSS y el HTML y lo que sucede cuando encuentra un CSS que no entiende.
+ +

¿Cómo funciona realmente el CSS?

+ +

Cuando un navegador muestra un documento, ha de combinar el contenido con la información de estilo del documento. Procesa el documento en una serie de etapas, que enumeraremos a continuación. Ten en cuenta que este es un modelo muy simplificado de lo que sucede cuando un navegador carga una página web y que cada navegador gestiona el proceso de manera diferente. Pero esto es más o menos lo que sucede.

+ +
    +
  1. El navegador carga el HTML (por ejemplo, lo recibe de la red).
    2. +
  2. Convierte el {{Glossary("HTML")}} en un {{Glossary("DOM")}} (Modelo de objetos del documento). El DOM representa el documento en la memoria del ordenador. Lo explicaremos más detalladamente en la sección siguiente.
    3. +
  3. Entonces, el navegador va a buscar la mayor parte de los recursos vinculados al documento HTML, como las imágenes y los videos incrustados... ¡y también el CSS vinculado! JavaScript aparece un poco más adelante en el proceso, pero no vamos a hablar de ello aún para evitar complicar las cosas.
    4. +
  4. El navegador analiza el CSS y ordena en diferentes «cubos» las diferentes reglas según el tipo de selector. Por ejemplo, elemento, clase, ID, y así sucesivamente. Para cada tipo de selector que encuentres, calcula qué reglas deben aplicarse y a qué nodos en el DOM se les aplica el estilo según corresponda (este paso intermedio se llama árbol de renderización).
    5. +
  5. El árbol de renderización presenta la estructura en que los nodos deben aparecer después de aplicarle las reglas.
    6. +
  6. En la pantalla se muestra el aspecto visual de la página (esta etapa se llama pintura).
    7. +
+ +

El siguiente diagrama ofrece una visión sencilla de este proceso.

+ +

+ +

Acerca del DOM

+ +

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo o bloque en el lenguaje de marcado se convierte en un {{Glossary("Node/DOM","nodo DOM")}} con estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de nodos secundarios, y estos nodos hijos tienen hermanos.

+ +

Comprender el DOM te ayuda a diseñar, depurar y mantener tu CSS porque en el DOM es donde tu CSS se encuentra con el contenido del documento. Cuando comiences a trabajar con las herramientas DevTools (o herramientas del desarrollador) del navegador, te moverás por el DOM mientras seleccionas elementos con el fin de ver qué reglas se aplican.

+ +

Una representación real de un DOM

+ +

En lugar de una explicación larga y aburrida, veamos un ejemplo para entender cómo un código HTML se convierte en DOM.

+ +

Tomemos el siguiente código HTML:

+ +
<p>
+  Usaremos:
+  <span>Hojas</span>
+  <span>de estilo</span>
+  <span>en cascada</span>
+</p>
+
+ +

En el DOM, el nodo que se corresponde con nuestro elemento <p> es un padre. Sus hijos son un nodo de texto y los tres nodos correspondientes a nuestros elementos <span>. Los nodos SPAN son también los padres, y los nodos de texto sus hijos:

+ +
P
+├─ "Usaremos:"
+├─ SPAN
+|  └─ "Hojas"
+├─ SPAN
+|  └─ "de estilo"
+└─ SPAN
+   └─ "en cascada"
+
+ +

Así es como un navegador interpreta el código HTML anterior, interpreta el árbol DOM y luego lo muestra en el navegador, así:

+ +

{{EmbedLiveSample('Una_representación_real_de_un_DOM', '100%', 55)}}

+ + + +

La aplicación de CSS al DOM

+ +

Pongamos que hemos añadido un poco de CSS a nuestro documento, para darle estilo. Una vez más, el HTML es el siguiente:

+ +
<p>
+  Usaremos:
+  <span>Hojas</span>
+  <span>de estilo</span>
+  <span>en cascada</span>
+</p>
+ +

Supongamos que le aplicamos el CSS siguiente:

+ +
span {
+  border: 1px solid black;
+  background-color: lime;
+}
+ +

El navegador analizará el código HTML y creará un DOM a partir de este. A continuación, analizará el CSS. Dado que la única regla disponible en el CSS tiene un selector span, el navegador ¡ordenará el CSS muy rápidamente! Aplicará la regla a cada uno de los tres <span>, que mostrarán en pantalla la representación visual final.

+ +

La salida actualizada es la siguiente:

+ +

{{EmbedLiveSample ( 'La_aplicación_de_CSS_al_DOM', '100%', 55)}}

+ +

En nuestro artículo Depurar el CSS que encontrarás en el siguiente módulo, vamos a utilizar las herramientas DevTools del navegador para depurar posibles problemas en el CSS. También aprenderemos más sobre cómo el navegador interpreta el CSS.

+ +

¿Qué ocurre si un navegador encuentra CSS que no entiende?

+ +

En una lección anterior mencionamos que no todos los navegadores implementan las novedades de CSS en el mismo momento. Además, no todo el mundo utiliza la última versión de un navegador. Dado que el CSS está en desarrollo constante y, por lo tanto, por delante de lo que los navegadores pueden reconocer, puede que te preguntes qué sucede si un navegador encuentra un selector o una declaración CSS que no reconoce.

+ +

La respuesta es que no hace nada y simplemente pasa a la siguiente parte del CSS.

+ +

Si un navegador analiza tus reglas y encuentra una propiedad o un valor que no entiende, lo ignora y avanza hasta la declaración siguiente. Esto sucederá si has cometido un error y has escrito mal una propiedad o un valor, o si la propiedad o el valor son demasiado nuevos y el navegador aún no los admite.

+ +

Del mismo modo, si un navegador encuentra un selector que no entiende, lo ignorará y pasará al siguiente.

+ +

En el siguiente ejemplo hemos utilizado la ortografía británica para la propiedad color, que invalida la propiedad porque no la reconoce. Así que el párrafo no se muestra en azul. Sin embargo, se han aplicado todos los demás estilos del CSS; solo se ha ignorado la línea que no es válida.

+ +
+
<p>Quiero este texto en grande, en negrita y en color azul.</p>
+ +
p {
+  font-weight: bold;
+  colour: blue; /* Ortografía incorrecta de la propiedad color */
+  font-size: 200%;
+}
+
+ +

{{EmbedLiveSample('Skipping_example', '100%', 200)}}

+ +

Este comportamiento es muy útil. Significa que puedes utilizar el CSS nuevo como una mejora, a sabiendas de que no se producirá ningún error si no se entiende: o bien el navegador entiende la característica nueva o no lo hace. Combinado con el funcionamiento del modo en cascada con el hecho de que los navegadores utilizarán la última CSS que encuentren en la hoja de estilo, cuando haya dos reglas con el mismo nivel de especificidad, también puedes ofrecer alternativas para los navegadores que no admiten el CSS nuevo.

+ +

Esto funciona especialmente bien cuando quieres utilizar un valor que es bastante nuevo que no admiten todos los navegadores. Por ejemplo, algunos navegadores antiguos no entienden calc() como valor. Podríamos dar un valor de sustitución para el ancho de una caja en píxeles, y a continuación dar un ancho con un valor calc() de 100% - 50px. Los navegadores antiguos usarán la versión en píxeles y harán caso omiso de la indicación calc(), porque no la entienden. Los navegadores nuevos interpretarán la línea del ancho en píxeles, pero la anularán al llegar a la línea de calc() porque aparece después en la cascada.

+ +
.box {
+  width: 500px;
+  width: calc(100% - 50px);
+}
+ +

En lecciones posteriores veremos muchas más formas de cómo admitir navegadores diferentes.

+ +

Y finalmente

+ +

Casi has terminado este módulo; solo nos queda una cosa más por hacer. En el próximo artículo, pondrás en práctica tu conocimiento nuevo para cambiar el estilo de un ejemplo y probarte con un poco de CSS en el proceso.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es CSS?
    2. +
  2. Empezar con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona el CSS
    5. +
  5. Pon en práctica tus conocimientos nuevos
    6. +
diff --git a/files/es/learn/css/first_steps/como_se_estructura_css/index.html b/files/es/learn/css/first_steps/como_se_estructura_css/index.html new file mode 100644 index 0000000000..a3e9bb94b8 --- /dev/null +++ b/files/es/learn/css/first_steps/como_se_estructura_css/index.html @@ -0,0 +1,512 @@ +--- +title: Cómo se estructura el CSS +slug: Learn/CSS/First_steps/Como_se_estructura_CSS +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
+ +

Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de trabajo con archivos, conceptos básicos de HTML (véase Introducción al HTML) y una idea de cómo funciona el CSS.
Objetivo:Aprender en detalle las estructuras de sintaxis fundamentales de CSS.
+ +

Aplicar CSS al HTML

+ +

Lo primero que veremos son los tres métodos para aplicar CSS a un documento.

+ +

Hoja de estilo externa

+ +

En Empezar con el CSS, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.

+ +

Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión .css y que lo vinculas desde un elemento <link> de HTML:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi experimento CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>¡Hola, mundo!</h1>
+    <p>Este es mi primer ejemplo de CSS</p>
+  </body>
+</html>
+ +

El archivo CSS podría parecerse a esto:

+ +
h1 {
+  color: blue;
+  background-color: yellow;
+  border: 1px solid black;
+}
+
+p {
+  color: red;
+}
+ +

El atributo href del elemento {{htmlelement("link")}} tiene que hacer referencia a un archivo de tu sistema de archivos.

+ +

En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:

+ +
<!-- Dentro de un subdirectorio llamado styles dentro del directorio de trabajo -->
+<link rel="stylesheet" href="styles/style.css">
+
+<!-- Dentro de un subdirectorio llamado general, que está en un subdirectorio llamado styles, dentro del directorio de trabajo -->
+<link rel="stylesheet" href="styles/general/style.css">
+
+<!-- Sube un nivel de directorio, y luego dentro de un subdirectorio llamado styles -->
+<link rel="stylesheet" href="../styles/style.css">
+ +

Hoja de estilo interna

+ +

Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS dentro de un elemento {{htmlelement("style")}} contenido dentro del elemento {{htmlelement("head")}} del HTML.

+ +

En este caso, el HTML se vería así:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi experimento CSS</title>
+    <style>
+      h1 {
+        color: blue;
+        background-color: yellow;
+        border: 1px solid black;
+      }
+
+      p {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>¡Hola, mundo!</h1>
+    <p>Este es mi primer ejemplo de CSS</p>
+  </body>
+</html>
+ +

Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.

+ +

Estilos en línea

+ +

Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un atributo de style:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi experimento CSS</title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">¡Hola mundo!</h1>
+    <p style="color:red;">Este es mi primer ejemplo de CSS</p>
+  </body>
+</html>
+ +

¡No hagas esto a menos que realmente tengas que hacerlo! Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos.

+ +

Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico en formato HTML para lograr la máxima compatibilidad con el mayor número de clientes.

+ +

Juguemos con el CSS de este artículo

+ +

En este artículo hay mucho CSS con el que jugar. Para hacerlo, recomendamos crear un nuevo directorio/carpeta en el ordenador, dentro de la cual deberás crear una copia de los siguientes dos archivos:

+ +

index.html:

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Mis experimentos CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+
+    <p>Crea tu HTML de prueba aquí</p>
+
+  </body>
+</html>
+ +

styles.css:

+ +
/* Crea tu CSS de prueba aquí */
+
+p {
+  color: red;
+}
+ +

Entonces, cuando te encuentres con un CSS con el que desees experimentar, reemplaza el contenido <body> del HTML con algo de HTML sin estilos y añade CSS a tu archivo de CSS para darle estilo.

+ +

Si no estás en un sistema donde puedas crear archivos fácilmente, puedes utilizar el editor interactivo que encontrarás a continuación para experimentar.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} 

+ +

¡Sigue leyendo y disfruta!

+ +

Selectores

+ +

No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios tipos diferentes en la lección Empezar con el CSS. Un selector es, como determinamos, un elemento de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es probable que el selector no coincida con lo que crees que debería coincidir.

+ +

Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de selectores válidos o listas de selectores.

+ +
h1
+a:link
+.manythings
+#onething
+*
+.box p
+.box p:first-child
+h1, h2, .intro
+ +

Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!

+ +
+

Nota: Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre selectores CSS de la próxima lección.

+
+ +

Especificidad

+ +

A menudo habrá situaciones en las que dos selectores podrían determinar un mismo elemento HTML. Considera la siguiente hoja de estilo, en que definimos una regla con un selector p que establecerá los párrafos en color azul, y también una clase que establecerá los elementos seleccionados en color rojo.

+ +
.special {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Digamos que en nuestro documento HTML hay un párrafo con una clase special. Ambas reglas podrían aplicarse. ¿Cuál ganará? ¿De qué color crees que será nuestro párrafo?

+ +
<p class="special">¿De qué color soy?</p>
+ +

El lenguaje CSS tiene reglas para controlar cuál ganará en caso de colisión; reciben el nombre de cascada y especificidad. En el siguiente bloque de códigos hemos definido dos reglas para el selector p, pero el párrafo termina siendo de color azul. Esto se debe a que la declaración que lo establece en azul aparece más abajo en la hoja de estilo, y los estilos posteriores anulan a los anteriores. Así funciona la regla de la cascada.

+ +
p {
+  color: red;
+}
+
+p {
+  color: blue;
+}
+ +

Sin embargo, en el caso de nuestro primer bloque, que contiene un selector de clase y otro de elementos, la clase ganará. Esto hará que el párrafo sea rojo, incluso aunque aparezca antes en la hoja de estilo. Una clase se describe de forma más específica o con más especificidad que el selector de elementos, razón por la que gana.

+ +

Prueba el ejemplo anterior: añade el HTML a tu experimento, luego pon las dos reglas p { ... } a tu hoja de estilo. A continuación, cambia el primer selector p por .special para ver cómo cambia el estilo.

+ +

Las reglas de especificidad y de cascada pueden parecer un poco complicadas al principio. Son más fáciles de entender a medida que se van adquiriendo conocimientos de CSS. En nuestro artículo sobre Cascada y herencia, que abordaremos en la próxima lección, se explicará en detalle, incluyendo cómo calcular la especificidad. Por ahora, solo has de saber que existe y que a veces el CSS no se aplica como esperas porque algo más en la hoja de estilo tiene una mayor especificidad. El hecho de identificar que más de una regla podría aplicarse a un elemento es el primer paso para solucionar estos problemas.

+ +

Propiedades y valores

+ +

En su nivel más básico, el CSS consta de dos componentes básicos:

+ + + +

La siguiente imagen resalta una sola propiedad y valor. El nombre de la propiedad es color y el valor blue.

+ +

Una declaración resaltada en el CSS

+ +

Una propiedad emparejada con un valor se denomina declaración CSS. Las declaraciones CSS se colocan dentro de los bloques de declaración CSS. La siguiente imagen muestra nuestro CSS con el bloque de declaración resaltado.

+ +

Un bloque de declaración resaltado

+ +

Finalmente, los bloques de declaración CSS se combinan con selectores para producir conjuntos de reglas CSS (o reglas CSS). Nuestra imagen contiene dos reglas, una para el selector h1 y otra para el selector p. La regla para h1 está resaltada.

+ +

La regla para h1 resaltada

+ +

Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la compaginación y los estilos adecuados.

+ +
+

Importante: Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (:).

+
+ +

Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se puedan aplicar a diferentes elementos HTML:

+ + + +
+

Importante: Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera inválida y el motor CSS del navegador la ignora por completo.

+
+ +
+

Importante: En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, siempre hay que escribir color. Si se escribe colour, no funcionará.

+
+ +

Las funciones

+ +

Si bien la mayoría de valores son palabras clave relativamente simples o valores numéricos, es posible que algunos valores tomen la forma de una función. Un ejemplo sería la función calc(). Esta función te permite hacer operaciones matemáticas sencillas desde tu CSS, por ejemplo:

+ +
+
<div class="external"> <div class="box">La caja interior es del 90% - 30px.</div></div>
+ +
.outer {
+  border: 5px solid black;
+}
+
+.box {
+  padding: 10px;
+  width: calc(90% - 30px);
+  background-color: rebeccapurple;
+  color: white;
+}
+
+ +

Esto se traduce así:

+ +

{{EmbedLiveSample('calc_example', '100%', 200)}}

+ +

Una función consta del nombre de la función y, a continuación, unos paréntesis entre los que se colocan los valores permitidos para esa función. En el caso del ejemplo calc() anterior, pedimos que el ancho de esta caja sea del 90% del ancho del bloque que la contiene, menos 30 píxeles. Esto no es algo que podamos calcular con anticipación y simplemente introducir el valor en el CSS, ya que no sabemos cuál será el 90%. Como con todos los valores, la página correspondiente del proyecto MDN tendrá ejemplos de uso para que puedas ver cómo funciona.

+ +

Otro ejemplo serían los diversos valores para {{cssxref ("transform")}}, como rotate().

+ +
+
<div class="box"></div>
+ +
.box {
+  margin: 30px;
+  width: 100px;
+  height: 100px;
+  background-color: rebeccapurple;
+  transform: rotate(0.8turn)
+}
+
+ +

El resultado del código anterior se ve así:

+ +

{{EmbedLiveSample('transform_example', '100%', 200)}}

+ +

Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se apliquen a diferentes elementos HTML:

+ + + +

@rules

+ +

Las @rules (leído "at-rules" en inglés) dan al CSS algunas instrucciones sobre cómo comportarse. Algunas @rules son simples, con el nombre de la regla y un valor. Por ejemplo, para importar una hoja de estilo adicional a tu hoja de estilo CSS principal, puedes usar @import:

+ +
@import 'styles2.css';
+ +

Una de las @rules más comunes con las que te encontrarás es @media, que permite usar consultas a medios para aplicar CSS solo cuando se dan ciertas condiciones (por ejemplo, cuando la resolución de la pantalla supera un valor determinado o la anchura supera un valor concreto).

+ +

En el CSS que se muestra a continuación, tenemos una hoja de estilo que le da al elemento <body> un color de fondo rosado. Sin embargo, luego usamos @media para crear una sección de nuestra hoja de estilo que solo se aplicará en los navegadores con una ventana gráfica de más de 30em de ancho. Si el navegador es más ancho que 30em, el color de fondo será azul.

+ +
body {
+  background-color: pink;
+}
+
+@media (min-width: 30em) {
+  body {
+    background-color: blue;
+  }
+}
+ +

Encontrarás otras @rules a lo largo de estas lecciones.

+ +

Prueba a añadir una consulta a medios en tu CSS que cambie los estilos según el ancho de la ventana gráfica. Cambia el ancho de la ventana de tu navegador para ver el resultado.

+ +

Abreviaturas

+ +

Algunas propiedades como {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} y {{ cssxref("margin")}} se llaman propiedades abreviadas. Esto se debe a que permiten establecer varios valores de propiedad en una sola línea, lo que ahorra tiempo y ordena el código.

+ +

Por ejemplo, esta línea:

+ +
/* En propiedades abreviadas con 4 valores, como margin y padding (relleno), los valores se aplican
+   según el orden: arriba, derecha, abajo e izquierda (en sentido horario desde la parte superior). También hay otros
+   tipos de abreviaturas, como las propiedades abreviadas con 2 valores que establecen el relleno/margen,
+   arriba/abajo, y luego izquierda/derecha */
+padding: 10px 15px 15px 5px;
+ +

Hace lo mismo que todas estas juntas:

+ +
padding-top: 10px;
+padding-right: 15px;
+padding-bottom: 15px;
+padding-left: 5px;
+ +

Mientras que esta línea:

+ +
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+ +

Hace lo mismo que todas estas juntas:

+ +
background-color: red;
+background-image: url(bg-graphic.png);
+background-position: 10px 10px;
+background-repeat: repeat-x;
+background-scroll: fixed;
+ +

Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más adelante en el curso. Te aconsejamos que busques los nombres de las propiedades abreviadas en nuestra referencia CSS para obtener más información.

+ +

Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu HTML. Experimenta con diferentes valores.

+ +
+

Advertencia: Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido.

+
+ +

Comentarios

+ +

Al igual que con el HTML, te recomendamos que hagas comentarios en tu CSS para que te ayuden a comprender cómo funciona su código cuando vuelvas a utilizarlo al cabo de varios meses, así como para ayudar a otros que vayan a trabajar con él a entenderlo.

+ +

Los comentarios en el CSS comienzan con /* y terminan con */. En el bloque de código que encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que aumenta: puedes buscar los comentarios en tu editor de código.

+ +
/* con elementos básicos de aplicación de estilo */
+/* -------------------------------------------------------------------------------------------- */
+body {
+  font: 1em/150% Helvética, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  /* Prestemos especial atención al tamaño de fuente global. En una pantalla o una ventana grande,
+     aumentamos el tamaño de la fuente para conseguir una mejor legibilidad */
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {font-size: 1.5em;}
+
+/* Familiarización con algunos elementos anidados específicos en el DOM */
+/* -------------------------------------------------------------------------------------------- */
+div p, #id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+ +

Los comentarios también son útiles para comentar temporalmente ciertas partes del código con fines de prueba, por ejemplo, si tratas de encontrar qué parte de tu código causa un error. En el siguiente ejemplo, hemos comentado las reglas para el selector .special.

+ +
/*.special {
+  color: red;
+}*/
+
+p {
+  color: blue;
+}
+ +

Añade algunos comentarios al CSS para acostumbrarte a usarlos.

+ +

Espacio en blanco

+ +

Por espacio en blanco nos referimos los espacios en sí, tabuladores y retornos de carro o intros. De la misma manera que el HTML, el navegador ignora el espacio en blanco dentro del CSS. El valor del espacio en blanco es que puede mejorar la legibilidad.

+ +

En el siguiente ejemplo, cada declaración (y el principio/fin de regla) está en una línea propia; esta es posiblemente una buena forma de escribir el CSS, ya que facilita el mantenimiento y la comprensión:

+ +
body {
+  font: 1em/150% Helvética, Arial, sans-serif;
+  padding: 1em;
+  margin: 0 auto;
+  max-width: 33em;
+}
+
+@media (min-width: 70em) {
+  body {
+    font-size: 130%;
+  }
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+div p,
+#id:first-line {
+  background-color: red;
+  border-radius: 3px;
+}
+
+div p {
+  margin: 0;
+  padding: 1em;
+}
+
+div p + p {
+  padding-top: 0;
+}
+
+ +

Podrías escribir exactamente el mismo CSS eliminando la mayoría de los espacios en blanco; este bloque de código es funcionalmente idéntico al primer ejemplo, pero seguro que estarás de acuerdo en que resulta algo más difícil de leer:

+ +
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+@media (min-width: 70em) { body {font-size: 130%;} }
+
+h1 {font-size: 1.5em;}
+
+div p, #id:first-line {background-color: red; border-radius: 3px;}
+div p {margin: 0; padding: 1em;}
+div p + p {padding-top: 0;}
+
+ +

La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de estilo que especifica una convención acordada a seguir.

+ +
+

Importante: Aunque los valores de las declaraciones CSS se separan por espacios, los nombres de propiedad nunca tienen espacios.

+
+ +

Por ejemplo, las siguientes declaraciones de CSS son válidas:

+ +
margin: 0 auto;
+padding-left: 10px;
+ +

Pero las siguientes no lo son:

+ +
margin: 0auto;
+padding- left: 10px;
+ +

¿Ves los errores de espaciado? 0auto no se reconoce como un valor válido para la propiedad de margin (0 y auto son dos valores separados) y el navegador no reconoce padding- como una propiedad válida. El valor correcto de propiedad (padding-left) se ha separado por un espacio perdido.

+ +

Debes asegurarte siempre de separar los valores distintos entre sí por al menos un espacio, pero mantén los nombres de las propiedades y los valores de las propiedades juntos.

+ +

Prueba a jugar con los espacios en blanco de tu CSS y observa qué es lo que se rompe y lo que no.

+ +

¿Qué sigue?

+ +

Resulta útil entender un poco cómo el navegador toma tu HTML y tu CSS y los convierte en una página web, razón por la cual en el próximo artículo (Cómo funciona el CSS) veremos ese proceso.

+ +

{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

En este modulo

+ +
    +
  1. ¿Qué es el CSS?
    2. +
  2. Empezar con el CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona CSS
    5. +
  5. Pon en práctica tus conocimientos nuevos
    6. +
diff --git a/files/es/learn/css/first_steps/index.html b/files/es/learn/css/first_steps/index.html new file mode 100644 index 0000000000..0213277d94 --- /dev/null +++ b/files/es/learn/css/first_steps/index.html @@ -0,0 +1,52 @@ +--- +title: Primeros pasos en CSS +slug: Learn/CSS/First_steps +tags: + - Aprender + - CSS + - Principiante + - modulo + - primeros pasos +translation_of: Learn/CSS/First_steps +--- +
{{LearnSidebar}}
+ +

CSS (Cascading Style Sheets - en español Hojas de Estilo en Cascadas) es usado para darle estilo y diseño a las páginas Web — por ejemplo, para cambiar la fuente de letra, color, tamaño y el espaciado de tu contenido; dividir en múltiples columnas, o agregar animaciones y otras propiedades decorativas. Este modulo provee un inicio suave para tu ruta de aprendizaje hacia el dominio de CSS con su funcionamiento básico, como luce su sintaxis, y cómo puedes comenzar a utilizarlo y añadir estilo a HTML.

+ +

Prerrequisitos

+ +

Antes de comenzar este módulo, deberías:

+ +
    +
  1. Estar familiarizado y tener conocimiento básico sobre el uso de computadores e internet básico (p.ej. navegando, consumiendo contenido en Internet.)
    2. +
  2. Un entorno básico de trabajo configurado, como se detalla en la sección de Instalación de software básico, y saber como crear y administrar archivos, o lo puedes ver en el módulo Manejando los archivos.
    3. +
  3. Conocimiento básico de HTML, como se muestra en Introducción a HTML.
    4. +
+ +
+

Nota: Si estás trabajando en un computador/tabla/otro dispositivo en el cual no puedes crear o almacenar tus propios archivos, podrías probar (la mayoría) de los ejemplos de código en un editor de código en línea como JSBin o Thimble.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos, que te guiarán a través de toda la teoría básica de CSS, y te proveerá oportunidades para comprobar algunas de tus habilidades.

+ +
+
¿Qué es CSS?
+
{{Glossary("CSS")}} (Cascading Style Sheets) te permite crear páginas Webs atractivas, pero ¿Cómo funciona por debajo? Este artículo explica que es CSS, con ejemplos simples de sintaxis, y cubre algunos temas clave sobre este lenguaje.
+
Empezar con CSS
+
En este artículo se tomarná un documento HTML simple y se le aplicará CSS, aprendiendo algunas cosas prácticas mientras lo haces.
+
Como se estructura CSS
+
Ahora que sabes que es CSS y de su uso básico, es momento de sumergirnos un poco más dentro de la estructura del propio lenguaje. Ya hemos conocido muchos de los conceptos discutidos aquí; puedes volver a este resumen en el futuro si necesitas reforzar conocimientos o si tienes dudas sobre algun concepto.
+
Como trabaja CSS
+
Hemos aprendido lo básico de CSS, para que es y como escribir una hoja de estilo sencilla. En esta lección echaremos un vistazo a como los navegadores web reciben CSS y HTML y los convierten en una página web.
+
Usando tu nuevo conocimiento
+
Con las cosas que has aprendido en las últimas lecciones encontrarás que usando CSS puedes editar el formato de documentos de texto simple, para agregarles tu propio estilo. Este artículo te da la oportunidad de hacerlo.
+
+ +

Ver también

+ +
+
Conocimiento práctico intermedio Web 1: Introducción a CSS (en Inglés) 
+
Un excelente curso de Mozilla foundation que explora y prueba muchas de las habilidades de las que se habla en el módulo de Introducción al CSS. Aprende acerca de como agregar estilo a los elementos HTML en una página web, selectores CSS, atributos, y valores.
+
diff --git "a/files/es/learn/css/first_steps/qu\303\251_es_css/index.html" "b/files/es/learn/css/first_steps/qu\303\251_es_css/index.html" new file mode 100644 index 0000000000..eb4f8e8a8a --- /dev/null +++ "b/files/es/learn/css/first_steps/qu\303\251_es_css/index.html" @@ -0,0 +1,127 @@ +--- +title: ¿Qué es el CSS? +slug: Learn/CSS/First_steps/Qué_es_CSS +tags: + - Beginner + - CSS + - Introduction to CSS + - Learn + - Modules + - Specifications + - Syntax +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
+ +

Las hojas de estilo en cascada ({{Glossary("CSS")}}, cascading style sheets) permiten crear páginas web atractivas. Pero ¿cómo funcionan realmente? En este artículo explicaremos qué es el CSS con un ejemplo de sintaxis sencillo y describiremos algunos términos clave sobre este lenguaje.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener instalado el software básico, conocimientos básicos de cómo trabajar con archivos y nociones de HTML (véase Introducción al HTML).
Objetivo:Aprender qué es CSS.
+ +

En el módulo Introducción al HTML, exponemos qué es el HTML y cómo se usa para definir documentos destinados a leerse en un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito.

+ +

Los estilos predeterminados utilizados por el navegador

+ +

Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, que presentará para las etiquetas de marcado el diseño que cada uno desee.

+ +

¿Para qué sirve el CSS?

+ +

Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.

+ +

Un documento suele ser un archivo de texto estructurado con un lenguaje de marcado: {{Glossary("HTML")}} es el más común, pero también existen otros como {{Glossary("SVG")}} o {{Glossary("XML")}}.

+ +

Presentar un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los {{Glossary("Navegador", "navegadores")}}, como por ejemplo {{Glossary("Mozilla Firefox", "Firefox")}}, {{Glossary("Google Chrome", "Chrome")}} o {{Glossary("Microsoft Edge", "Edge")}}, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.

+ +
+

Nota: Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir.

+
+ +

El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el color y el tamaño de los encabezados y los enlaces. Se puede utilizar para crear un diseño, como podría ser convertir una columna de texto en una composición con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de animación. Echa un vistazo a los enlaces de este párrafo para ver ejemplos específicos.

+ +

Sintaxis del CSS

+ +

El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras grandes de color rojo».

+ +

El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+ +

La regla se abre con un {{Glossary("CSS Selector", "selector")}}. Este selecciona el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno ({{htmlelement ("h1")}}).

+ +

Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.

+ +

Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las {{Glossary("property/CSS", "propiedades")}} CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede tomar varios valores de color. También tenemos la propiedad de font-size, que puede tomar varias unidades de tamaño como valor.

+ +

Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra.

+ +
h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}
+ +

Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede usar como valor.

+ +
+

Nota: Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la referencia CSS del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn css-feature-name» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».

+
+ +

Módulos CSS

+ +

Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se divide en módulos. Verás referencias a estos módulos a medida que explores en MDN y observarás que muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por ejemplo, puedes echar un vistazo a la referencia MDN del módulo Fondos y bordes para averiguar cuál es su propósito, qué otras propiedades y características diferentes contiene. También encontrarás enlaces a la especificación CSS que define la tecnología (ver más abajo).

+ +

En esta fase, no debes preocuparte demasiado sobre cómo se estructura el CSS, sin embargo, puede facilitarte la búsqueda de información si, por ejemplo, sabes que es probable que cierta propiedad se encuentre entre otras similares y, por lo tanto, en la misma especificación. 

+ +

Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes pensar que tiene lógica que las propiedades background-color y border-color se definan en este módulo. Y llevas toda la razón.

+ +

Especificaciones CSS

+ +

Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en extensos documentos denominados especificaciones, publicados por organizaciones de estándares (como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) que definen con precisión cómo se supone que deben comportarse esas tecnologías.

+ +

El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado CSS Working Group. Este grupo está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como expertos invitados, que actúan como voces independientes y no están vinculados a ninguna organización.

+ +

El CSS Working Group desarrolla o especifica características nuevas del CSS. Algunas veces lo hacen porque un navegador en particular está interesado en alguna capacidad, otras porque los diseñadores y desarrolladores web piden una característica, y otras porque el grupo ha identificado un requisito. El CSS está en desarrollo constante y todos los días presenta nuevas características disponibles. Sin embargo, un elemento clave sobre el CSS es que toda la comunidad se esfuerza mucho en no cambiar nunca nada que pueda perjudicar los sitios web antiguos. ¡Un sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en ese momento, aún debería poder utilizarse hoy en día!

+ +

Como recién llegado al CSS, es probable que encuentres las especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen para implementar soporte de sus características en los agentes de usuario en que trabajan, no para que lo lean los desarrolladores web para comprender el CSS. Muchos desarrolladores experimentados preferirán consultar la documentación disponible en MDN u otros tutoriales. Sin embargo, vale la pena saber que existen y comprender la relación que hay entre el CSS que estás utilizando, el soporte del navegador (ver más abajo) y las especificaciones.

+ +

Soporte del navegador

+ +

Una vez se ha especificado el CSS, solo es útil en el desarrollo de páginas web si uno o más navegadores lo han implementado. Esto significa que el código se ha escrito para convertir las instrucciones que se especifican en nuestro archivo CSS en algo que se pueda mostrar en pantalla. Veremos este proceso más en profundidad en el artículo Cómo funciona el CSS. Es inusual que todos los navegadores puedan implementar una misma característica al mismo tiempo, por lo que suele haber una brecha en la que se pueden usar algunas partes del CSS en algunos navegadores pero no en otros. Por este motivo, es útil poder verificar el estado de implementación. En cada una de las páginas de propiedades que hay en la MDN se puede ver el estado de la propiedad de interés, por lo que se puede saber si será posible utilizarla en un sitio web.

+ +

Lo que sigue es el gráfico de datos de compatibilidad para la propiedad CSS font-family.

+ +

{{Compat("css.properties.font-family")}}

+ +

¿Qué viene ahora?

+ +

Ahora que comprendes mínimamente qué es el CSS, pasemos a Comenzar con CSS, donde puedes empezar a escribir algo de CSS tú mismo.

+ +

{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es el CSS?
    2. +
  2. Comenzar con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona el CSS
    5. +
  5. Pon en práctica tus conocimientos nuevos
    6. +
diff --git a/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html b/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html new file mode 100644 index 0000000000..bff4f103bf --- /dev/null +++ b/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html @@ -0,0 +1,100 @@ +--- +title: Usa tu nuevo conocimiento +slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento +tags: + - Aprendizaje + - CSS + - Principiante +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +

{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la Introducción a HTML).
Objetivo:Utilizar algún CSS y probar conocimiento recién adquirido.
+ +

Punto de partida

+ +

Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <head> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

+ +
+

Nota: Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

+
+ +

Trabajando con CSS

+ +

Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:

+ + + +

Se ha usado una mezcla de selectores, elementos de estilo como <h1> y <h2>, y también una clase para el título del trabajo.

+ +

Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.

+ +
    +
  1. Coloca en rosado el nivel <h1>, usando el color CSS hotpink.
    2. +
  2. Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (dotted), que use el color CSS purple.
    3. +
  3. Coloca en cursiva el <h2>.
    4. +
  4. Al ul utilizado para los detalles de contacto un  {{cssxref("background-color")}}  #eeeeee, y un {{cssxref("border")}} de 5px solid purple. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.
    5. +
  5. Cambia los enlaces a verde cuando pase el cursor sobre ellos.
    6. +
+ +

Deberías conseguir algo parecido a esta página:

+ +

Screenshot of how the example should look after completing the assessment.

+ +

Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la referencia de CSS de MDN y ¡arriésgate!.

+ +

Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.

+ +

{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} 

+ +

Evaluación o ayuda adicional

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
+ +

¿Qué sigue?

+ +

Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, bloques de construccion CSS, revisaremos en profundidad algunas áreas clave.

+ +

{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}

+ +

En este módulo

+ +
    +
  1. ¿Qué es CSS?
    2. +
  2. Empezando con CSS
    3. +
  3. Cómo se estructura el CSS
    4. +
  4. Cómo funciona CSS
    5. +
  5. Usa tu nuevo conocimiento
    6. +
diff --git a/files/es/learn/css/index.html b/files/es/learn/css/index.html new file mode 100644 index 0000000000..ce384edeb2 --- /dev/null +++ b/files/es/learn/css/index.html @@ -0,0 +1,63 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - CSS + - Codificación + - Depuración + - Necesidades + - Principiante + - Tema + - concreción + - longitud +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +

Las Hojas de estilo en cascada (del ingles Cascading Stylesheets {{glossary("CSS")}}) es la siguiente tecnología que aprenderemos después de {{glossary("HTML")}}. Mientras que HTML se utiliza para definir la estructura y la semántica del contenido, CSS se usa para darle estilo y posicionarlo visualmente. CSS se puede usar, por ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido, para formar multiples columnas, añadir animaciones y otros elementos decorativos.

+ +

Itinerario de aprendizaje

+ +

Antes de empezar con CSS deberemos conocer los fundamentos de HTML. Podemos trabajar este contenido en introducción a HTML para posteriormente aprender:

+ + + +

Se recomienda aprender HTML y CSS al mismo tiempo, trabajando de forma conjunta ambas disciplinas. CSS aporta un valor añadido a HTML y no podrás aprender CSS sin controlar HTML.

+ +

Antes de comenzar con este tema, deberemos tener conocimientos básicos sobre el uso de ordenadores y sobre el uso pasivo de la Web (navegar y consumir contenido). Es recomendable tener configurado un entorno de desarrollo como el detallado en Instalación de software básico, y saber crear y gestionar archivos como se detalla en Manejando archivos — ambos forman parte del módulo Primeros pasos en la Web para principiantes.

+ +

Se recomienda trabajar el módulo Primeros pasos en la Web antes de entrar a este tema, aunque no es completamente necesario; gran parte de lo tratado en el artículo de CSS básico también se trata en el módulo de introducción a CSS, aunque con mucho más detalle.

+ +

Módulos

+ +

Este tema contiene los siguientes módulos en el orden recomendado de aprendizaje. Recomendamos comenzar por el primero.

+ +
+
Introducción a CSS
+
Este módulo explica los conceptos básicos sobre el funcionamiento de CSS, incluyendo selectores y propiedades, escritura de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS, organización en cascada y herencia, conceptos de encajonado básicos y depuración de CSS.
+
Estilo del texto
+
Aquí veremos cómo aplicar estilos al texto, tipos de letra, negrita, cursiva, espaciado, interlineado y sombreado, entre otras funciones relativas al texto. Terminaremos el módulo aplicando tipos a nuestra página, configurando listas y enlaces.
+
Estilos por cajas
+
A continuación veremos la aplicación de estilos por cajas, fundamental en el diseño de páginas web. En este módulo analizaremos el modelo de cajas para después aprender a controlar el diseño de las cajas ajustando rellenos, marcos y márgenes, personalizando colores de fondo, imágenes y otras características, además de divertidas funcionalidades como el sombreado y los filtros sobre las cajas.
+
Diseño CSS
+
Llegados a este punto ya conocemos lo básico de CSS, como darle estilo al texto, y cómo dar estilo y manipular el contenido de las cajas. Es momento de ver cómo ubicar las cajas correctamente con respecto a la ventana de visualización y a otra. Hemos cubierto los requisitos necesarios para poder meternos de lleno en el diseño CSS, ver diferentes ajustes de visualización, metodos tradicionales de diseño con pivotes y posicionamiento, y nuevas herramientas de diseño como flexbox.
+
Diseño Adaptable (RBD Responsive Web Design)
+
Con la gran variedad de dispositivos capaces de navegar por la Web actualmente, el diseño web adaptable (RWD) es una habilidad imprescindible para el diseño web. En este módulo veremos principios básicos y herramientas de RWD, como aplicar diferentes CSS a un documento dependiendo de las características del dispositivo como el ancho de la pantalla, la orientación y la resolución; veremos las tecnologías disponibles para mostrar videos e imágenes dependiendo de estas características.
+
+ +

Resolución de problemas con CSS

+ +

Uso de CSS para resolver problemas comunes proporciona vínculos a secciones que explican cómo usar CSS para resolver problemas comunes cuando se está creando una página web.

+ +
+

Ver También

+ +
+
CSS en MDN
+
Principal entrada para la documentación de CSS en MDN, donde encontrarás documentación detallada de todas las funcionalidades del lenguaje CSS. ¿Quieres saber todos los valores posibles de una propiedad? Este es tu sitio.
+
+
diff --git a/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..b53db2df02 --- /dev/null +++ b/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html @@ -0,0 +1,117 @@ +--- +title: Comprensión de los fundamentos de CSS +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - CSS + - Estilo + - Evaluación + - Modelo de Caja + - Principiante + - Selectores + - Sintaxis + - comentários + - reglas +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
+
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

Has avanzado mucho en este módulo, debes sentirte orgulloso de haber llegado hasta el final. El último paso antes de terminar es intentar el examen del módulo — que incluye completar varios ejercicios para crear el último diseño — una tarjeta de presentación/de jugador/perfil de redes sociales.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, debería haber revisado todos los artículos en este módulo.
Objetivo:Probar la comprensión de los fundamentos de la teoría, sintaxis y mecánica de CSS.
+ +

Punto de Partida

+ +

Para comenzar esta evaluación, debes:

+ + + +
+

Nota: Alternativamente, se puede utilizar un sitio como  JSBin o Thimble para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar  esta URL para apuntar el elemento <img> al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento <style> en el encabezado del documento.

+
+ +

Resumen del Proyecto

+ +

Se le ha proporcionado un poco de HTML puro y una imagen, y necesitas escribir el CSS necesario para darle estilo a una pequeña tarjeta de presentación en línea, que tal vez pueda servir como una tarjeta de jugador o de perfil en redes sociales. Las siguientes secciones describen lo que debes hacer.

+ +

Configuración básica:

+ + + +

Encargandonos de los selectores y conjuntos de reglas proporcionados:

+ + + +

Nuevos conjuntos de reglas que necesitas escribir:

+ + + +

Otras cosas en las que pensar:

+ + + +

Consejos y Sugerencias

+ + + +

Ejemplo

+ +

La siguiente captura de pantalla muestra un ejemplo de cómo debe ser el diseño terminado:

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Evaluación

+ +

Si estás siguiendo esta evaluación como parte de un curso organizado, deberías ser capaz de entregar tu trabajo a tu profesor/mentor para que lo califique. Si eres autodidacta, entonces puedes obtener la guía de puntuación fácilmente preguntando en el hilo del Discurso del Área de Aprendizaje, o en el canal IRC #mdn en Mozilla IRC. Haz el ejercicio primero - ¡No hay nada que ganar haciendo trampa!

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+
diff --git a/files/es/learn/css/styling_text/fuentes_web/index.html b/files/es/learn/css/styling_text/fuentes_web/index.html new file mode 100644 index 0000000000..7bfa162217 --- /dev/null +++ b/files/es/learn/css/styling_text/fuentes_web/index.html @@ -0,0 +1,197 @@ +--- +title: Fuentes web +slug: Learn/CSS/Styling_text/Fuentes_web +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

En el primer artículo del módulo, exploramos las características básicas del CSS disponibles para aplicar estilos a tipos de letra y al texto. En este artículo vamos a ir más lejos: exploraremos en detalle las tipografías web, que permiten que te descargues tipos de letra personalizados junto con tu página web para lograr un estilo de texto más variado y personalizado.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conceptos básicos de HTML (véase Introducción al HTML) y de CSS (véase Introducción al CSS), texto CSS y los fundamentos de la fuente.
Objetivo:Aprender a aplicar tipos de letra a una página web, ya sea desde un servicio de terceros o desde tu código.
+ +

Resumen de las familias de tipos de letra

+ +

Como observamos en el artículo Texto y tipos de letra, puedes controlar los tipos de letra que aplicas a tu HTML con la propiedad {{cssxref ("font-family")}}. Este atributo toma uno o más nombres de familia de tipos de letra y el navegador recorre esta lista hasta que encuentra un tipo de letra disponible en el sistema en el que se ejecuta:

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

Este sistema funciona bien, pero las opciones de tipo de letra tradicionales de los desarrolladores web eran limitadas. Solo hay un puñado de tipos de letra que puedes garantizar que están disponibles en todos los sistemas comunes: las llamadas fuentes seguras para la web. Puedes usar la lista de tipos de letra para especificar cuáles prefieres, seguido de alternativas seguras para la web y del tipo de letra predeterminado del sistema. El problema es que esto añade trabajo extra en términos de pruebas para asegurarte de que tus diseños se ven bien con cada tipo de letra, etc.

+ +

Tipografías web

+ +

Hay una alternativa, sin embargo, que funciona muy bien hasta con versiones posteriores a la versión 6 de Internet Explorer. Las tipografías web son una función del CSS que te permite especificar los archivos de tipo de letra que se van a descargar junto con tu sitio web a medida que el usuario acceda a ellos, lo que significa que cualquier navegador que admita tipografías web puede disponer de los tipos de letra que especificas. ¡Increíble! Observa a continuación la sintaxis que se necesita.

+ +

En primer lugar, tienes un bloque {{cssxref ("@font-face")}} al comienzo del CSS, que especifica los archivos de los tipos de letra que quieres que se descarguen:

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}
+ +

A continuación, puedes usar el nombre de la familia de tipos de letra especificado en @font-face para aplicar tu tipo de letra personalizado a cualquier elemento que desees:

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

La sintaxis es un poco más compleja; más adelante la veremos más detalladamente.

+ +

Hay dos cosas importantes a tener en cuenta acerca de las tipografías web:

+ +
    +
  1. Los navegadores admiten diferentes formatos de tipos de letra, por lo que necesitarás más de un formato de tipos de letra para conseguir una compatibilidad decente entre navegadores. Por ejemplo, la mayoría de los navegadores modernos admiten WOFF/WOFF2 (Web Open Font Format, versiones 1 y 2), el formato más eficiente disponible. Pero las versiones antiguas de Internet Explorer solo admiten tipos de letra con formato EOT (Embedded Open Type) y es posible que debas incluir una versión SVG del tipo de letra para soportar versiones antiguas de navegadores iPhone y Android. A continuación te mostraremos cómo generar el código necesario.
    2. +
  2. Generalmente las fuentes no son de uso gratuito. Debes pagar por ellas y/o respetar otras condiciones de licencia, como acreditar al creador del tipo de letra en el código (o en tu sitio web). Los tipos de letra no deben robarse, ni debes utilizarlos sin otorgar a su creador el crédito apropiado.
    3. +
+ +
+

Nota: ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!

+
+ +

Aprendizaje activo: Un ejemplo de tipo de letra seguro para web

+ +

Con esto en mente, vamos a construir un ejemplo básico de uso de un tipo de letra seguro para web a partir de los principios básicos. Es difícil hacer un ejemplo de demostración de este aspecto con un ejemplo en vivo incrustado, por lo tanto, nos gustaría que siguieses los pasos que se detallan en las secciones siguientes para que te hagas una idea de cómo funciona el proceso.

+ +

Como punto de partida hay que utilizar los archivos web-font-start.html y web-font-start.css a los que añadir tu código (véase el ejemplo en vivo). Haz una copia de estos archivos en un directorio nuevo de tu equipo. En el archivo web-font-start.css, encontrarás un poco de CSS para trabajar con el aspecto y los tipos de letra básicos del ejemplo.

+ +

Encontrar tipos de letra

+ +

Para este ejemplo, utilizaremos dos tipografías web: una para los títulos de encabezado y otra para el texto base. Para empezar, hay que encontrar los archivos que contienen el tipo de letra. Los tipos de letra se crean en estudios de diseño y se guardan en diversos formatos de archivo. En general, hay tres tipos de sitios donde puedes obtener fuentes:

+ + + +

Vamos a ver algunos tipos de letra. Ve a Font Squirrel y elige dos tipos de letra: uno que te resulte agradable e interesante para los títulos (quizá una buena tipografía de tipo Display o Slab Serif), y otro un poco menos llamativo y más legible para los párrafos. Cuando encuentres los tipos de letra, pulsa el botón de descarga y guarda el archivo en el mismo directorio que los archivos HTML y CSS que guardaste anteriormente. No importa si son TTF (True Type Fonts) u OTF (Open Type Fonts).

+ +

En cada caso, descomprime el paquete de tipos de letra (las tipografías web generalmente se distribuyen en archivos ZIP que contienen los archivos con el tipo de letra y la información de la licencia). En el paquete puede haber más de un archivo con tipos de letra: algunos tipos de letra se distribuyen por familias, con diferentes variantes disponibles, por ejemplo: thin, medium, bold, italic, thin italic, etc. Para este ejemplo, solo queremos que te quedes con un solo archivo de fuente para cada opción.

+ +
+

Nota: En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.

+
+ +

Generar el código

+ +

Ahora deberás generar el código que necesitas (y aplicar el estilo al tipo de letra). Para cada tipo de letra, sigue estos pasos:

+ +
    +
  1. Asegúrate de cumplir con todos los requisitos de la licencia, sobre todo si vas a usarlo en un proyecto comercial y/o en una web.
    2. +
  2. Ve a Webfont Generator de Fontsquirrel.
    3. +
  3. Sube tus dos archivos de tipo de letra con el botón Cargar Fuentes.
    4. +
  4. Marca la casilla de verificación con el texto «Sí, las fuentes que elijo pueden utilizarse legalmente para una página web».
    5. +
  5. Haz clic en Descarga tu paquete.
    6. +
+ +

Una vez que el generador haya finalizado el procesamiento, deberías obtener un archivo ZIP para descargar; guárdalo en el mismo directorio que tus archivos HTML y CSS.

+ +

El código de tu ejemplo de demostración

+ +

En este punto, descomprime el paquete con los tipos de letra web que acabas de generar. En el directorio descomprimido verás tres elementos útiles:

+ + + +

Para implementar estos tipos de letra en tu ejemplo de demostración, sigue estos pasos:

+ +
    +
  1. Cambia el nombre del directorio descomprimido a algo fácil y simple, como fonts.
    2. +
  2. Abre el archivo stylesheet.css y copia los dos bloques @font-face incluidos en tu archivo web-font-start.css. Debes ponerlos en la parte superior, antes de cualquier elemento CSS, ya que los tipos de letra deben importarse antes que los puedas utilizar en tu sitio web.
    3. +
  3. Cada una de las funciones url() apunta a un archivo de tipo de letra que tenemos que importar a nuestro CSS. Necesitamos asegurarnos de que las rutas a los archivos son correctas, así que añade fonts/ al inicio de cada ruta (ajusta la ruta como sea necesario).
    4. +
  4. Ahora puedes usar estos tipos de letra en tu lista de tipos de letra, al igual que cualquier tipo de letra seguro o predeterminado del sistema. Por ejemplo: + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

Con tu ejemplo de demostración, deberías obtener una página con unos agradables tipos de letra. Debido a que los tipos de letra se crean en diferentes tamaños, es posible que tengas que ajustar el tamaño, el espaciado, etc., para conseguir una apariencia más ordenada.

+ +

+ +
+

Nota: Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta web-font-finished.html y web-font-finished.css (ejecuta el ejemplo terminado en vivo).

+
+ +

Los servicios de tipos de letra en línea

+ +

Los servicios de tipos de letra en línea en general guardan tipos de letra y los proporcionan a los usuarios, por lo que no tienes que preocuparte por escribir el código @font-face, solo necesitas insertar una o dos sencillas líneas de código en tu sitio web para que todo funcione. Los ejemplos incluyen Adobe Fonts y Cloud.typography. La mayoría de estos servicios se basan en suscripciones de pago, con la excepción notable de Google Fonts, un servicio gratuito y muy útil, sobre todo para trabajos de prueba rápida y escritura de ejemplos de demostración.

+ +

La mayoría de estos servicios son fáciles de usar, por lo que no vamos a exponerlos en gran detalle. Vamos a echar un vistazo rápido a las fuentes de Google, para que te hagas una idea. De nuevo, usa copias de web-font-start.html y web-font-start.css como punto de partida.

+ +
    +
  1. Ve a Google Fonts.
    2. +
  2. Usa los filtros del lado izquierdo para indicar los tipos de letra que deseas escoger y elige un par de tipos de letra que te gusten.
    3. +
  3. Para seleccionar una familia de tipos de letra, pulsa el botón ⊕ que encontrarás al lado.
    4. +
  4. Cuando hayas elegido las familias de tipos de letra, pulsa la barra [número] familias seleccionadas que encontrarás en la parte inferior de la página.
    5. +
  5. En la pantalla resultante, primero debes copiar la línea de código HTML que se muestra y pegarla en el encabezado de tu archivo HTML. Ponlo encima del elemento {{HTMLElement("link")}}, de modo que el tipo de letra se importe correctamente antes de intentar utilizarlo en tu CSS.
    6. +
  6. Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML.
    7. +
+ +
+

Nota: Puedes encontrar una versión completa en google-font.html y google-font.css, si necesitas comparar tu trabajo con el nuestro (consúltalo en vivo).

+
+ +

@font-face con más detalle

+ +

Vamos a explorar que la sintaxis correspondiente a @font-face que te ha generado Fontsquirrel. Uno de los bloques se verá así:

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

Esto se conoce como «sintaxis @font-face a prueba de balas» desde una publicación de Paul Irish, en los tiempos en que @font-face empezaba a popularizarse (Bulletproof @font-face Syntax). Vamos a ver qué hace:

+ + + +
+

Nota: También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. Creating Custom Font Stacks with Unicode-Range de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.

+
+ +

Tipos de letra variables

+ +

Los navegadores disponen hoy de una tecnología de tipos de letra reciente llamada tipos de letra variables: se trata de tipos de letra que permiten incorporar muchas variaciones diferentes de un tipo de letra en un solo archivo, en lugar de tener un archivo separado para cada ancho, grosor o estilo. Es demasiado avanzado para nuestro curso para principiantes, pero si te apetece avanzar y echarles un vistazo, lee nuestra guía de tipos de letra variables.

+ +

Resumen

+ +

Ahora que has leído nuestros artículos sobre nociones de aplicación de estilo al texto, es hora de evaluar cuánto has retenido del módulo a partir de la creación de una composición tipográfica de una página de inicio de una escuela comunitaria.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/styling_text/fundamentals/index.html b/files/es/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..a1fa747e27 --- /dev/null +++ b/files/es/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,732 @@ +--- +title: Fundamentos de texto y fuentes tipográficas +slug: Learn/CSS/Styling_text/Fundamentals +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

En este artículo vas a iniciar tu viaje hacia el dominio la aplicación de estilos a textos con {{glossary("CSS")}}. Aquí trataremos en detalle todos los fundamentos básicos del diseño del texto y las fuentes tipográficas, incluyendo la configuración de su grosor, la familia y el estilo de letra, las propiedades abreviadas para los tipos de letra, la alineación del texto, el espaciado entre líneas y letras, y otros efectos.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conceptos básicos de HTML (estudio de Introducción al HTML), conceptos básicos de CSS (estudio de Introducción al CSS).
Objetivo:Aprender las propiedades y técnicas fundamentales necesarias para dar estilo al texto en las páginas web.
+ +

¿Qué implica aplicar estilo a texto en CSS?

+ +

Como ya habrás experimentado en tu trabajo con el HTML y el CSS, el texto incluido en un elemento se dispone dentro de la caja de contenido del elemento. Esta empieza en la parte superior izquierda del área de contenido (o en la esquina superior derecha, en el caso del contenido de los lenguajes RTL, o right-to-left, que se escriben de derecha a izquierda) y fluye hacia el final de la línea. Una vez que llega al final, baja a la línea siguiente y sigue, y luego continúa a la línea siguiente, hasta que todo el contenido se ha ubicado en la caja. El contenido de texto se comporta efectivamente como una serie de elementos en línea, distribuidos en líneas adyacentes entre sí, y sin crear saltos de línea hasta que se llega al final de la línea, a menos que se fuerce un salto de línea manual con el elemento {{htmlelement("br")}}.

+ +
+

Nota: Si el párrafo anterior te parece confuso, no te preocupes: vuelve atrás y revisa el artículo sobre el modelo de caja antes de continuar.

+
+ +

Las propiedades CSS que se usan para aplicar estilo al texto pueden clasificarse generalmente en dos categorías, que veremos por separado en este artículo:

+ + + +
+

Nota: Ten en cuenta que el efecto se aplica sobre todo el texto que hay dentro de un elemento como si fuera una única entidad. No puedes seleccionar y dar estilo a subsecciones de texto, a menos que las delimites con algún elemento apropiado (como {{htmlelement("span")}} o {{htmlelement("strong")}}), o con un pseudoelemento específico para el texto como ::first-letter (selecciona la primera letra del texto de un elemento), ::first-line (selecciona la primera línea del texto de un elemento), o ::selection (selecciona el texto que está resaltado por el cursor).

+
+ +

Tipos de letra

+ +

Veamos las propiedades que permiten definir el estilo del tipo de letra. En este ejemplo aplicaremos algunas propiedades CSS diferentes al mismo ejemplo HTML, que presentamos a continuación:

+ +
<h1>Tommy the cat</h1>
+
+<p>Well I remember it as though it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

Puedes ver el ejemplo completo en Github (consulta también el código fuente.)

+ +

Color

+ +

La propiedad {{cssxref("color")}} establece el color del contenido de los elementos seleccionados (que normalmente es texto, pero también puede incluir un par cosas más, como un subrayado o una línea superpuesta al texto con la propiedad {{cssxref("text-decoration")}} ).

+ +

La propiedad color puede admitir cualquier unidad de color CSS, por ejemplo:

+ +
p {
+  color: red;
+}
+ +

Esto mostrará el contenido de los párrafos en color rojo, en lugar del negro que es el estándar por defecto del navegador:

+ + + +

{{ EmbedLiveSample('Color', '100%', 220) }}

+ +

Familia de tipos de letras

+ +

Usamos la propiedad {{cssxref("font-family")}} para definir un tipo de letra diferente para nuestro texto. Esta propiedad indica al navegador el tipo de letra (o una lista de tipos de letra) que debe aplicar a los elementos seleccionados. El navegador solo aplica el tipo de letra si la máquina que accede al sitio web dispone de ella; en caso contrario, simplemente usa el tipo de letra que tiene definido por defecto ({{anch("Default fonts", "default font")}}). Aquí tienes un ejemplo sencillo:

+ +
p {
+  font-family: arial;
+}
+ +

Con esto, todos los párrafos de una página adoptan el tipo de letra Arial, que se encuentra en cualquier ordenador.

+ +

Tipos de letra seguros para la web

+ +

Solo hay un cierto número de tipos de letra que están disponibles en todos los sistemas en general, y que en consecuencia pueden utilizarse sin demasiadas preocupaciones. Son los llamados tipos de letra seguros para la web, o web safe fonts.

+ +

La mayor parte del tiempo, como desarrolladores web deseamos tener un control específico mayor sobre los tipos de letra con que se va a mostrar para mostrar nuestro contenido de texto. El problema está en encontrar una manera de saber de qué tipo de letra dispone el ordenador que se utiliza para acceder a nuestras páginas. No hay manera de saber esto en todos los casos, pero al menos contamos con que los tipos de letra seguros para la web están disponibles en casi todos los sistemas operativos más utilizados (las distribuciones Linux más comunes, Windows, Mac, Android, e iOS).

+ +

La lista de los tipos de letra seguros para la web cambia al ir evolucionando los sistemas operativos, pero es correcto considerar los tipos de letra siguientes como seguros para la web, al menos por ahora (muchos de ellos se han popularizado gracias a la iniciativa Core fonts for the web de Microsoft, de finales de la década de 1990 y principios de la del 2000):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreTipo de letra genéricoObservaciones
Arialsans-serifA menudo se considera una buena práctica añadir también Helvética como opción preferida a Arial porque, aunque tienen casi el mismo aspecto y Arial está más ampliamente disponible, se considera que Helvética tiene una forma más agradable.
Courier NewmonospaceAlgunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra Courier New llamado Courier. Se considera una buena práctica usar ambos, con Courier New como la opción preferida.
Georgiaserif
Times New RomanserifAlgunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra Times New Roman llamado Times. Se considera una buena práctica usar ambos, con Times New Roman como la opción preferida.
Trebuchet MSsans-serifHay que tener cuidado al usar este tipo de letra porque no está ampliamente disponible en los sistemas operativos móviles.
Verdanasans-serif
+ +
+

Nota: Entre otros recursos, el sitio cssfontstack.com mantiene una lista de tipos de letra seguros disponibles en los sistemas operativos para Windows y Mac, que puede ayudarte en la toma de decisiones acerca de lo que consideras seguro para tus propósitos.

+
+ +
+

Nota: Hay una manera de descargar un tipo de letra personalizado junto con la página web, que te permite personalizar el uso de los tipos de letra de la manera que desees: web fonts. Esto es un poco más complejo, y lo vamos a exponer más adelante en un artículo independiente del módulo.

+
+ +

Fuentes predeterminadas

+ +

CSS define cinco nombres genéricos para los tipos de letra serif, sans-serif, monospace, cursive y fantasy. Son muy genéricos y el tipo de letra exacto que se va a utilizar cuando se especifiquen dichos nombres dependerá de cada navegador y puede variar dependiendo del sistema operativo. Representa el peor escenario posible, en el que el navegador tratará de proporcionar al menos una fuente que parezca apropiada. serif, sans-serif y monospace son bastante predecibles y el navegador debería proporcionar algo razonable. Por otra parte, cursive y fantasy son menos predecibles y te recomendamos que las uses con cautela, y vayas probando a medida que avanzas.

+ +

Los cinco nombres se definen de la manera siguiente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreDefiniciónEjemplo
serifTipos de letra que tienen serifas (pequeños adornos, en general en los extremos de los trazos de los caracteres tipográficos)Mi gran elefante rojo
sans-serifTipos de letra que carecen de serifas.Mi gran elefante rojo
monospaceTipos de letra en que cada carácter tiene el mismo ancho; se usan con frecuencia en las listas de sentencias de los códigos de programación.Mi gran elefante rojo
cursiveTipos de letra que intentan emular la letra manuscrita, con trazos fluidos y conectados.Mi gran elefante rojo
fantasyTipos de letra que pensados para ser decorativos.Mi gran elefante rojo
+ +

Listas de tipos de letra

+ +

Ya que no puedes garantizar la disponibilidad de los tipos de letra que deseas utilizar (incluso un tipo de letra seguro para la web podría fallar por alguna razón), puedes proporcionar un lista de tipos de letra para que el navegador tenga diversos tipos de letra entre los que elegir. Consiste simplemente en introducirlo como el valor de font-family, que consistirá en una lista de diversos nombres de tipos de letra separados por comas, por ejemplo.

+ +
p {
+  font-family: "Trebuchet MS", Verdana, sans-serif;
+}
+ +

En tal caso, el navegador comienza al principio de la lista y busca si el primer tipo de letra está disponible en la máquina. Si es así, aplica ese tipo de letra a los elementos seleccionados, y si no, lo intenta con el nombre siguiente de la lista; y así sucesivamente.

+ +

Es una buena idea proporcionar un nombre de tipo de letra genérico al final de la lista para que el navegador pueda al menos proporcionar algo aproximadamente adecuado en el caso de que ninguno de los tipos de letra que deseas esté disponible. Para ilustrar este punto: los navegadores asignan a los párrafos el tipo de letra serif por defecto, que normalmente es Times New Roman, si no hay ninguna otra opción disponible, pero esto no resulta conveniente cuando se espera un tipo de letra sans-serif!

+ +
+

Nota: Los nombres de los tipos de letra que están constituidos por más de una palabra (como Trebuchet MS ) han de ponerse entre comillas, por ejemplo "Trebuchet MS".

+
+ +

Un ejemplo con font-family

+ +

Vamos a introducir en nuestro ejemplo anterior una fuente de tipo sans-serif para los párrafos:

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

Esto nos da el resultado siguiente:

+ + + +

{{ EmbedLiveSample('Un_ejemplo_con_font-family', '100%', 220) }}

+ +

Tamaño de la letra

+ +

En el artículo sobre Unidades y valores de CSS de nuestro módulo anterior, revisamos las unidades de longitud y tamaño. El tamaño del tipo de letra (establecido con la propiedad {{cssxref("font-size")}}) puede tomar valores medidos en la mayoría de estas unidades (y en otras, como porcentajes). Sin embargo, las unidades más comunes que vas a usar para ajustar el tamaño del texto son:

+ + + +

La propiedad font-size de un elemento se hereda del elemento padre. Todo comienza con el elemento raíz de todo el documento ({{htmlelement("html")}}) cuya propiedad font-size se establece a en 16px como estándar en todos los navegadores. Cualquier párrafo (o cualquier otro elemento que no tenga un tamaño diferente establecido por el navegador) dentro del elemento raíz tendrá un tamaño final de 16px. Otros elementos pueden tener diferentes tamaños predeterminados, por ejemplo un elemento {{htmlelement("h1")}} tiene de manera predeterminada un tamaño establecido de 2em, por lo que tendrá un tamaño final de 32px.

+ +

Las cosas se vuelven más complicadas cuando se empieza a alterar el tamaño del tipo de letra de los elementos anidados. Por ejemplo, si tu página incluye un elemento {{htmlelement("article")}} y estableces un tamaño de fuente de 1.5em (que resultará en un tamaño final de 24px), y luego quieres que los párrafos dentro del elemento <article> tengan un tamaño de letra calculado de 20px, ¿qué valor de unidad em deberías usar?

+ +
<!-- El tamaño de letra base del documento es 16px -->
+<article> <!-- Si mi tamaño de letra es 1.5em -->
+  <p>Mi párrafo</p> <!-- ¿Cómo calculo el tamaño del tipo de letra para que de 20px? -->
+</article>
+ +

Necesitarías establecer el valor en unidades em de 20/24, es decir, 0.83333333 em. El cálculo puede ser complicado, por lo que hay que pensarlo bien a la hora de aplicar estilo a las cosas. Lo mejor es usar unidades rem donde se pueda, porque simplifican las cosas, y evitar establecer un tamaño de letra concreto para los elementos del contenedor, siempre que sea posible.

+ +

Un ejemplo sencillo de definición de tamaños

+ +

Al dimensionar el texto, en general es una buena idea establecer el tamaño básico del tipo de letra del documento (font-size) en 10 px, de modo que los cálculos son mucho más fáciles de resolver, puesto que entonces los valores (r)em que necesites son el tamaño del tipo de letra en píxeles dividido por 10, no por 16. Luego de hacer eso, puedes establecer con facilidad los diferentes tamaños de los tipos de letra de tu documento como desees. Es una buena idea hacer una lista de todos los conjuntos de reglas de tamaño de fuente (font-size) en una zona concreta de tu hoja de estilo para que resulten fáciles de encontrar.

+ +

Nuestro nuevo resultado es:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Un_ejemplo_sencillo_de_definición_de_tamaños', '100%', 220) }}

+ +

Estilo y cuerpo del tipo de letra, efectos y decoración del texto

+ +

El CSS proporciona cuatro propiedades comunes para alterar el efecto visual / énfasis del texto:

+ + + +

Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado quedaría como este:

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto', '100%', 220) }}

+ +

Textos sombreados

+ +

Puedes aplicar sombras a tus textos con la propiedad {{cssxref("text-shadow")}}. Esta propiedad puede tomar hasta cuatro valores, como se muestra en ejemplo siguiente:

+ +
text-shadow: 1px 1px 1px red;
+ +

Las cuatro propiedades son las siguientes:

+ +
    +
  1. El desplazamiento horizontal de la sombra desde el texto original; admite la mayoría de las unidades y magnitudes de que dispone CSS, pero lo más habitual es usar px. Es un valor obligatorio.
    2. +
  2. El desplazamiento vertical de la sombra desde el texto original; se comporta básicamente igual que el desplazamiento horizontal, excepto porque mueve la sombra arriba/abajo, y no hacia derecha/izquierda. Es un valor obligatorio.
    3. +
  3. El radio de desenfoque; cuanto más alto es este valor, mayor es la dispersión de la sombra. Si no se incluye este valor, el valor por defecto es 0, y no hay desenfoque. Esta propiedad admite la mayoría de las unidades y magnitudes de que dispone el CSS.
    4. +
  4. El color de base de la sombra, que admite cualquier unidad de color de que dispone CSS. Si no se incluye este valor, el valor predeterminado es negro.
    5. +
+ +
+

Nota: Los valores con desplazamiento positivo mueven la sombra hacia la derecha o hacia abajo, mientras que los valores con desplazamiento negativo, por ejemplo -1px -1px, mueven la sombrea hacia la izquierda o hacia arriba.

+
+ +

Sombras múltiples

+ +

Puedes aplicar diversas sombras al mismo texto incluyendo múltiples valores de sombra separados por comas, por ejemplo:

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

Si aplicamos esto al elemento {{htmlelement("h1")}} de nuestro ejemplo Tommy The Cat, obtenemos esto:

+ + + +

{{ EmbedLiveSample('Sombras_múltiples', '100%', 220) }}

+ +
+

Nota: Puedes ver más ejemplos interesantes del uso de text-shadow en el artículo de Sitepoint Moonlighting with CSS text-shadow.

+
+ +

Diseño del texto

+ +

Una vez tratadas las propiedades básicas para los tipos de letra, echemos un vistazo a las propiedades que podemos usar para la disposición del texto.

+ +

Alineación del texto

+ +

La propiedad {{cssxref("text-align")}} se usa para controlar la forma en que el texto se alinea dentro de la caja que lo contiene. Los valores disponibles para esta propiedad son los siguientes, y funcionan de la misma forma que en una aplicación de procesamiento de texto:

+ + + +

Si aplicamos text-align: center; al elemento {{htmlelement("h1")}} de nuestro ejemplo, obtendremos esto:

+ + + +

{{ EmbedLiveSample('Alineación_del_texto', '100%', 220) }}

+ +

Interlineado

+ +

La propiedad {{cssxref("line-height")}} establece la altura entre cada línea de texto; esta propiedad admite la mayoría de las unidades y magnitudes, pero también puede tomar un valor sin unidades, que actúa como un multiplicador y generalmente se considera la mejor opción porque se multiplica la propiedad {{cssxref("font-size")}} para obtener la altura de la línea (line-height). El texto del cuerpo (body) generalmente se ve mejor y es más fácil de leer si hay más separación entre las líneas; la altura recomendada de la línea es entre 1.5-2 (a doble espacio). Por lo tanto, para configurar nuestras líneas de texto a 1.5 veces la altura de la fuente, deberías usar esto:

+ +
line-height: 1.5;
+ +

Aplicando esto a los elementos {{htmlelement("p")}} en nuestro ejemplo nos daría este resultado:

+ + + +

{{ EmbedLiveSample('Interlineado', '100%', 250) }}

+ +

Espacio entre letras y espacio entre palabras

+ +

Las propiedades {{cssxref("letter-spacing")}} y {{cssxref("word-spacing")}} te permiten establecer el espacio entre las letras y entre las palabras del texto. No los usarás a menudo, pero podría ser útil para obtener una apariencia determinada o para mejorar la legibilidad de un tipo de letra particularmente denso. Estas propiedades admiten la mayoría de las unidades y magnitudes.

+ +

Así, como ejemplo, podemos aplicar a la primera línea de los elementos {{htmlelement("p")}} de nuestro ejemplo lo siguiente:

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

y obtendremos:

+ + + +

{{ EmbedLiveSample('Espacio_entre_letras_y_espacio_entre_palabras', '100%', 250) }}

+ +

Otras propiedades interesantes

+ +

Las propiedades anteriores nos dan una idea de cómo empezar a aplicar texto a una página web, pero hay muchas más propiedades que puedes usar. Nuestro objetivo aquí es solo exponer las más importantes. Cuando te hayas acostumbrado a usar las propiedades anteriores, también deberías explorar las siguientes:

+ +

Aplicación de estilos a tipos de letra:

+ + + +

Estilos de disposición de los textos

+ + + +

Propiedades abreviadas para los tipos de letra

+ +

Muchas propiedades relativas a los tipos de letra también pueden establecerse de forma abreviada con la propiedad {{cssxref("font")}}. Se escriben en el orden siguiente: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.

+ +

De entre todas estas propiedades, solo font-size y font-family son obligatorias al usar la propiedad abreviada de font.

+ +

Se debe colocar una barra inclinada (slash) entre las propiedades {{cssxref("font-size")}} y {{cssxref("line-height")}}.

+ +

Un ejemplo completo se vería así:

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

Aprendizaje activo: Jugar a aplicar estilos

+ +

En esta sección de aprendizaje activo no proponemos ningún ejercicio específico: Simplemente nos gustaría que juegues con algunas propiedades de diseño de tipo de letra / texto, ¡y a ver qué consigues! Puedes hacer esto con archivos HTML/CSS sin conexión, o puedes introducir tu código en el ejemplo editable en vivo a continuación.

+ +

Si te equivocas, puedes volver a empezar con el botón Reinicio.

+ + + +

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

+ +

Resumen

+ +

Esperamos que hayas disfrutado jugando con el texto en este artículo. El próximo artículo te enseñará todo lo que necesitas saber sobre la aplicación de estilos de lista en HTML.

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/styling_text/index.html b/files/es/learn/css/styling_text/index.html new file mode 100644 index 0000000000..a87012ec5c --- /dev/null +++ b/files/es/learn/css/styling_text/index.html @@ -0,0 +1,57 @@ +--- +title: Estilo de texto +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS para concentrarse es estilizar texto — una de las cosas más comunes que hará con CSS. Aquí observamos los fundamentos para estilizar texto, incluyendo la configuración de fuente, negrita, cursiva, linea y espacios entre letras, sombras paralelas y otras funciones de texto. Completamos el módulo observando la aplicación de fuentes personalizadas en su página, y el diseño de listas y enlaces.

+ +

Requisitos previos

+ +

Antes de iniciar este módulo, ya debe estár familizarizado con HTML, como se explica en el módulo Introducción a HTML, y sentirse cómodo con los fundamentos de CSS, como se explica en Introducción a CSS.

+ +
+

Nota: Si está trabajando en una computadora/tableta/u otro dispositivo donde no tenga la capacidad de crear sus propios archivos, puede probar (la mayoría) de los ejemplos de código en un programa de codificación en línea como JSBin, CodePen o Thimble.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos, los cuales le enseñarán todos los elementos esenciales detras del diseño de contenido de texto HTML.

+ +
+
Texto fundamental y estilo de fuente
+
En este artículo iremos a través de todos los aspectos básicos del estilo de texto/fuente en detalle, incluyendo configuraciones del peso de la fuente, la familia y el estilo, taquigrafía de fuente, alineación de texto y otros efectos, línea y espaciado de letras.
+
Estilos de listas
+
Las listas, en su mayor parte, se comportan como cualquier otro texto, pero hay algunas propiedades de CSS específicas para las listas que debe conocer, y algunas de las mejores prácticas para tener en cuenta. Este artículo explica todo.
+
Estilos de enlaces
+
Al diseñar enlaces, es importante comprender cómo hacer uso de pseudo-clases para diseñar estados de enlaces de manera efectiva, y cómo diseñar enlaces para su uso en características de interfaces variadas comunes tales como menús de navegación y pestañas. Veremos todos estos temas en este artículo.
+
Fuentes web
+
Aquí exploraremos las fuentes web en detalle — estas permiten descargar fuentes personalizadas junto con su página web, para permitir un estilo de texto más variado y personalizado.
+
+ +

Evaluaciones

+ +

Las siguientes evaluaciones pondrán a prueba su comprensión de las técnicas del diseño de texto cubiertas en las guías anteriores.

+ +
+
Escribiendo una página de inicio para la comunidad de la escuela
+
En esta evaluación, pondremos a prueba su comprensión del estilo del texto haciendo que redacte el texto de la página principal de la escuela comunitaria.
+
diff --git a/files/es/learn/css/styling_text/styling_links/index.html b/files/es/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..b5180d51df --- /dev/null +++ b/files/es/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,434 @@ +--- +title: Dar estilo a los enlaces +slug: Learn/CSS/Styling_text/Styling_links +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

A la hora de dar estilo a los enlaces, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en este artículo.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conceptos básicos de HTML (véase Introducción al HTML), conocimientos básicos de CSS (véase Introducción al CSS), nociones de aplicación de estilo con CSS a textos y tipos de letra.
Objetivo:Aprender a dar formato a los estados de un enlace y a usarlos de manera efectiva en algunas funciones de interfaz de usuario comunes, como los menús de navegación.
+ +

Echemos un vistazo a algunos enlaces

+ +

Analizamos cómo se implementan los enlaces en tu HTML de acuerdo con las buenas prácticas de Creación de hipervínculos. En este artículo desarrollaremos estos conocimientos y te mostraremos las buenas prácticas del diseño de enlaces.

+ +

Los estados de un enlace

+ +

Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes pseudoclases):

+ + + +

Estilos predeterminados

+ +

El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el CSS simplemente amplía y centra el texto para que destaque más).

+ +
<p><a href="#">Un enlace simple</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Estilos_predeterminados', '100%', 120) }}

+ +
+

Nota: Todos los enlaces que hay en los ejemplos de esta página son simulados, encontrarás un símbolo # (almohadilla) en el lugar de una URL real. Esto es porque si incluyéramos enlaces reales, los ejemplos quedarían interrumpidos al hacer clic (daría error, o se cargaría una página en el ejemplo incrustado de la que no podrías volver atrás). # solo establece enlaces dentro de la misma página.

+
+ +

A medida que explores los estilos predeterminados, observarás algunas cosas:

+ + + +

Curiosamente, estos estilos predeterminados son casi los mismos que se utilizaban al inicio de los navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:

+ + + +

Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS siguientes:

+ + + +
+

Nota: No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!

+
+ +

Dar formato a algunos enlaces

+ +

Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos de enlace.

+ +

Para empezar, escribiremos nuestro conjunto de reglas vacío:

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como LoVe Fears HAte.

+ +

Ahora vamos a añadir algo más de información para darles formato:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

También proporcionaremos algún ejemplo de HTML al que aplicar CSS:

+ +
<p>Dispones de varios navegadores, como <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a> y
+<a href="#">Microsoft Edge</a>.</p>
+ +

Poner los dos juntos nos da este resultado:

+ +

{{ EmbedLiveSample('Dar_formato_a_algunos_enlaces', '100%', 150) }}

+ +

¿Qué hemos hecho aquí? Sin duda tiene un aspecto diferente al estilo predeterminado, pero todavía ofrece una experiencia lo suficientemente familiar como para que los usuarios sepan de qué se trata:

+ + + +

Aprendizaje activo: proporciona estilo a tus enlaces

+ +

En esta sesión de aprendizaje activo, queremos que tomes nuestro conjunto de reglas vacías y añadas tus propias declaraciones para lograr unos enlaces geniales. Da rienda suelta a tu imaginación. Estamos seguros de que puedes crear algo genial y tan funcional como nuestro ejemplo anterior.

+ +

Si te equivocas, puedes volver a empezar pulsando el botón Reinicio. Si te quedas encallado, pulsa el botón Mostrar la solución para recuperar el ejemplo anterior.

+ + + +

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

+ +

Incluir iconos en los enlaces

+ +

Una práctica común es incluir iconos en los enlaces para proporcionar más de un indicador en cuanto a qué tipo de contenido apunta. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos este fantástico ejemplo de icons8.com.

+ +

Echemos un vistazo a algunos elementos HTML y CSS que nos van a proporcionar el efecto que queremos. En primer lugar, algunos elementos HTML sencillos para dar estilo:

+ +
<p>Para obtener más información sobre el tiempo, visite nuestra <a href="http://#">página del tiempo</a>,
+mire la <a href="http://#">Wikipedia</a>, o cheque
+<a href="http://#">Extreme Science</a>.</p>
+ +

A continuación, el CSS:

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Incluir_iconos_en_los_enlaces', '100%', 150) }}

+ +

¿Qué pasa aquí? Omitiremos la mayor parte del CSS, ya que es la misma información que has visto antes. Sin embargo, la última regla es interesante: insertamos una imagen de fondo personalizada en enlaces externos de una manera similar a como manejamos viñetas personalizadas en los elementos de lista en el último artículo. Esta vez, sin embargo, utilizamos la propiedad abreviada {{cssxref("background")}} en lugar de las propiedades individuales. Establecemos la ruta a la imagen que queremos insertar, especificamos el valor no-repeat para que solo se inserte una copia, y luego especificamos la posición como al 100% a la derecha del contenido de texto y a 0 píxeles del extremo superior.

+ +

También usamos {{cssxref("background-size")}} para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo). Sin embargo, esto solo funciona con Internet Explorer 9 y versiones posteriores, por lo que si trabajas con navegadores antiguos, tendrás que cambiar el tamaño de la imagen e insertarla tal como es.

+ +

Finalmente, establecemos un área de relleno a la derecha ({{cssxref ("padding-right")}}) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.

+ +

Un último apunte: ¿cómo seleccionamos solo los enlaces externos? Bueno, si escribes tus enlaces HTML de forma adecuada, solo deberías usar URL absolutos para los enlaces externos. Para enlazar con otras partes del mismo sitio web, resulta más eficiente usar enlaces relativos. Por lo tanto, el texto «http» solo debe aparecer en los enlaces externos y es posible seleccionarlos con un selector de atributos: a[href*="http"] selecciona los elementos {{HTMLElement ( "a")}}, pero solo si tienen un atributo {{htmlattrxref("href","a")}} con un valor que contiene «http» en algún lugar de su contenido textual.

+ +

Eso es todo. Vuelve a la sección de aprendizaje activo anterior ¡y prueba esta nueva técnica!

+ +
+

Nota: No te preocupes si aún no estás familiarizado con los fondos y el diseño web adaptativo, lo explicaremos en otros artículos.

+
+ +

Dar aspecto de botón a un enlace

+ +

Las herramientas que has explorado hasta ahora en este artículo también se pueden usar de otras maneras. Por ejemplo, los estados como hover se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.

+ +

Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias: el menú de navegación de un sitio web generalmente está marcado como una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones de control o pestañas que proporcionan al usuario acceso a otras partes del sitio web. Vamos a ver cómo.

+ +

En primer lugar, un poco de HTML:

+ +
<ul>
+  <li><a href="#">Inicio</a></li> <li><a href="#">Pizza</a></li> <li><a href = "#">Música</a> </li> <li><a href="#">Wombats</a></li> <li><a href="#">Finlandia</a></li>
+</ul>
+ +

Y ahora nuestro CSS:

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

Esto nos da el resultado siguiente:

+ +

{{ EmbedLiveSample('Dar_aspecto_de_botón_a_un_enlace', '100%', 100) }}

+ +

Vamos a explicar qué pasa aquí, y nos vamos a centrar en los aspectos más interesantes:

+ + + +
+

Nota: Es posible que hayas observado que en el HTML se han colocado todos los elementos de lista en una misma línea; esto es porque los espacios/saltos de línea que se colocan entre elementos de bloque crean espacios en la página, igual como lo hacen los espacios entre las palabras, y estos espacios romperían nuestro diseño de menú de navegación horizontal. Así que hemos eliminado esos espacios. Puede encontrar más información sobre este problema (y sus soluciones) en Combatir los espacios entre elementos de bloque colocados en línea.

+
+ +

Resumen

+ +

Esperamos que este artículo te haya proporcionado todo lo que necesitas saber acerca de los enlaces... ¡por ahora! En el artículo final de nuestro módulo de aplicar estilo al texto detallaremos cómo usar tipos de letra personalizados para sitios web (o tipos de letra para web, como se les conoce comúnmente).

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/css/styling_text/styling_lists/index.html b/files/es/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..eeb395313b --- /dev/null +++ b/files/es/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,392 @@ +--- +title: Aplicación de estilo a listas +slug: Learn/CSS/Styling_text/Styling_lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

Las listas se comportan como cualquier otro texto en su mayor parte, pero hay algunas propiedades CSS específicas de las listas que debes conocer y algunas prácticas recomendadas a tener en cuenta. Este artículo te lo explica.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML (estudio introducción a HTML), nociones de cómo trabaja con CSS (estudio introducción a CSS), Conocimientos básicos de CSS para texto y tipos de letra.
Objetivo:Familiarizarse con las buenas prácticas y propiedades relacionadas con la aplicación de estilo a listas.
+ +

Un ejemplo sencillo de lista

+ +

Para empezar, veamos un ejemplo sencillo de una lista. A lo largo de este artículo veremos listas no ordenadas, listas ordenadas y listas de descripciones; todas tienen características de estilo similares, algunas que son particulares del tipo de lista. El ejemplo sin ningún estilo aplicado está disponible en Github (consulta también el código fuente.)

+ +

El HTML para nuestro ejemplo de lista se ve así:

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Humous</li>
+  <li>Pitta</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Humous</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pitta</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

Si accedes al ejemplo en vivo e investigas los elementos de la lista usando las herramientas de desarrollador del navegador, observarás un par de valores de estilo predeterminados:

+ + + +

Manejar el espaciado de la lista

+ +

Al diseñar listas, es necesario ajustar el diseño para que mantengan los mismos espaciados verticales (a veces denominados ritmos verticales) que el resto de elementos circundantes, como párrafos e imágenes; y el mismo espaciado horizontal entre uno y otro (en Github puedes ver el ejemplo de diseño terminado, y también encontrar el código fuente.)

+ +

El CSS que se utiliza para aplicar estilo al texto y al espaciado de texto es el siguiente:

+ +
/* Estilos generales */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Estilos para las listas de descripciones */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+ + + +

Estilos específicos de las listas

+ +

Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Para empezar, debes conocer tres propiedades que pueden establecerse en los elementos {{htmlelement("ul")}} o {{htmlelement("ol")}}:

+ + + +

El estilo de la viñeta

+ +

Como ya sabes, la propiedad {{cssxref("list-style-type")}} te permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que se usen números romanos en mayúsculas para la lista ordenada, con:

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

Esto nos da el aspecto siguiente:

+ +

Una lista ordenada con las viñetas establecidas para aparecer fuera del texto del elemento de lista.

+ +

Puedes encontrar muchas más opciones si echas un vistazo a la página de referencia de {{cssxref("list-style-type")}}.

+ +

La posición de la viñeta

+ +

La propiedad {{cssxref("list-style-position")}} establece si las viñetas aparecen dentro de los elementos de la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es outside, que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa arriba.

+ +

Si estableces el valor en inside, las viñetas se ubican dentro de las líneas:

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

an ordered list with the bullet points set to appear inside the list item text.

+ +

Uso de una imagen personalizada como viñeta

+ +

La propiedad {{cssxref("list-style-image")}} te permite usar una imagen personalizada para tu viñeta. La sintaxis es muy simple:

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

Sin embargo, esta propiedad es un poco limitada por lo que respecta al control de la posición, el tamaño, etc., de las viñetas. Es más conveniente usar la familia de propiedades {{cssxref("background")}}, de la cual aprenderás mucho más en el módulo Aplicar diseño a las cajas.

+ +

En nuestro ejemplo terminado, hemos aplicado estilo a la lista no ordenada de este modo (encima de lo que ya has visto arriba):

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

Aquí hemos hecho lo siguiente:

+ + + +

Esto nos da el resultado siguiente:

+ +

an unordered list with the bullet points set as little star images

+ +

Propiedad abreviada list-style

+ +

Es posible configurar las tres propiedades anteriores con una sola propiedad abreviada, {{cssxref("list-style")}}. Por ejemplo, observa el CSS siguiente:

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

Podría reemplazarse por esto:

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

Los valores pueden escribirse en cualquier orden, y puedes usar uno, dos o los tres (los valores por defecto que se utilizan para las propiedades que no están incluidas son disc, none y outside). Si se especifican tanto type como image, el tipo se usa como una segunda opción en el caso de que la imagen no sea posible cargar la imagen por cualquier motivo.

+ +

Control de numeración de las listas

+ +

A veces puedes querer numerar las listas de manera diferente, por ejemplo, que empiece con un número que no sea el 1, o que cuente hacia atrás, o que cuente a saltos de más de una unidad. HTML y CSS tienen algunas herramientas para ayudarte con esto.

+ +

start

+ +

El atributo {{htmlattrxref("start","ol")}} te permite empezar la numeración de la lista en un número diferente de 1. Observa el ejemplo siguiente:

+ +
<ol start="4">
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Este código da el resultado siguiente:

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

El atributo {{htmlattrxref("reversed","ol")}} empieza la lista contando hacia atrás, en lugar de hacia adelante. Observa el ejemplo siguiente:

+ +
<ol start="4" reversed>
+  <li>Toast pitta, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Da el resultado siguiente:

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +
+

Nota: Si en una lista inversa hay más elementos de lista que el valor que se ha establecido para el atributo start, la numeración continuará hasta cero y luego con valores negativos.

+
+ +

value

+ +

El atributo {{htmlattrxref("value","ol")}} te permite establecer para tus elementos de lista unos valores numéricos específicos. Observa el ejemplo siguiente:

+ +
<ol>
+  <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
+</ol>
+ +

Da el resultado siguiente:

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

Nota: Incluso si utilizas una propiedad {{cssxref("list-style-type")}} sin números, vas a tener que usar los valores numéricos equivalentes para el atributo value.

+
+ +

Aprendizaje activo: aplicar estilo a una lista anidada

+ +

En esta sesión de aprendizaje activo, queremos que tomes lo que has aprendido arriba y pruebes a aplicar estilo a una lista anidada. Te hemos provisto con un HTML, y queremos que hagas lo siguiente:

+ +
    +
  1. Poner viñetas cuadradas en la lista no ordenada.
    2. +
  2. Establecer un interlineado de 1,5 con respecto al tamaño de la letra tanto para la lista ordenada como para la lista no ordenada.
    3. +
  3. Poner letras minúsculas en la lista ordenada.
    4. +
  4. Juega con el ejemplo, libremente y cuanto quieras, experimenta con los tipos de viñetas, los espacios, o cualquier otra cosa con que te encuentres.
    5. +
+ +

Si te equivocas, puedes volver a empezar con el botón Reinicio. Si te quedas encallado, pulsa el botón Mostrar la solución para ver una posible solución.

+ + + +

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

+ +

Véase también

+ +

Los contadores CSS proporcionan herramientas avanzadas para la personalización de las numeraciones y la aplicación de estilo a las listas, pero son bastante complejos. Te recomendamos echarles un vistazo si quieres ampliar tus conocimientos. Consulta:

+ + + +

Resumen

+ +

La aplicación de estilo a listas se domina con relativa facilidad una vez que conoces algunos principios básicos y propiedades específicas asociados. En el artículo siguiente vamos a continuar con las técnicas de aplicación de estilo a enlaces.

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}

+ +

En este módulo

+ + diff --git "a/files/es/learn/css/s\303\241bercomo/generated_content/index.html" "b/files/es/learn/css/s\303\241bercomo/generated_content/index.html" new file mode 100644 index 0000000000..605e87f9e2 --- /dev/null +++ "b/files/es/learn/css/s\303\241bercomo/generated_content/index.html" @@ -0,0 +1,178 @@ +--- +title: Usando CSS para generar contenido +slug: Learn/CSS/Sábercomo/Generated_content +tags: + - CSS + - Fundamentos + - Guía + - Principiante + - Web + - graficos +translation_of: Learn/CSS/Howto/Generated_content +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Esta es la 9ª sección del tutorial CSS Getting Started; Describe algunas formas en las que puede utilizar CSS para agregar contenido cuando se muestra un documento. Modifica su hoja de estilo para agregar contenido de texto y una imagen.

+ +

Informacion: Contenido

+ +

Una de las ventajas importantes de CSS es que le ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento.

+ +

El contenido especificado en una hoja de estilo puede consistir en texto o imágenes. Especifica el contenido de su hoja de estilos cuando el contenido está estrechamente vinculado a la estructura del documento.

+ +
+
+

Más detalles

+ +

Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, es posible que tenga versiones de idioma diferentes de su documento que comparten una hoja de estilo. Si parte de la hoja de estilo tiene que ser traducida, significa que debe colocar las partes de la hoja de estilos en archivos separados y organizar para que se vincule con las versiones de idioma adecuado de su documento.

+ +

Estas complicaciones no surgen si el contenido especificado incluye símbolos o imágenes que se aplican en todos los idiomas y culturas.

+ +

El contenido especificado en una hoja de estilo no se convierte en parte del DOM.

+
+
+ +

Texto contenido

+ +

CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, haga una regla y agregue {{cssxref (':: before')}} o {{cssxref (':: after')}} al selector. En la declaración, especifique la propiedad {{cssxref ('content')}} con el contenido de texto como su valor.

+ +
+
Ejemplo
+ +

HTML

+ +
Un texto donde necesito <span class="ref">alguna cosa</span>
+
+ +

CSS

+ +
.ref::before {
+  font-weight: negrita;
+  color: navy;
+  content: "Reference: ";
+}
+ +

Output

+ +

{{ EmbedLiveSample('Text_content', 600, 30) }}

+
+ +
+
Mas detalles
+ +

El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero se puede especificar en el vínculo o en la hoja de estilos o en otras formas. Para obtener más información, consulte 4. 4 Representación de hoja de estilo CSS en la especificación CSS.

+ +

Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza la barra invertida como el carácter de escape. Por ejemplo, \ 265B es el símbolo del ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y también Caracteres y caso en la Especificación CSS.

+
+ +

Imagen contenido

+ +

Para agregar una imagen antes o después de un elemento, puede especificar la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('content')}}.

+ +
+
Ejemplo
+ +

Esta regla añade un espacio y un icono después de cada enlace que tiene el glosario de clases:

+ +
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+
+
+ +

Para agregar una imagen como fondo de un elemento, especifique la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('background')}}. Esta es una propiedad abreviada que especifica el color de fondo, la imagen, cómo se repite la imagen y algunos otros detalles.

+ +
+
Ejemplo
+ +

Esta regla establece el fondo de un elemento específico, utilizando una URL para especificar un archivo de imagen.

+ +

El selector especifica el id del elemento. El valor no-repeat hace que la imagen aparezca sólo una vez:

+ +
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+ +
+
Mas detalles
+ +

Para obtener información sobre las propiedades individuales que afectan a los fondos y sobre otras opciones al especificar imágenes de fondo, consulte {{Cssxref ('fondo')}}, página de referencia.

+
+ +

Acción: Añadir una imagen de fondo

+ +

Esta imagen es un cuadrado blanco con una línea azul en la parte inferior:

+ + + + + + + +
Image:Blue-rule.png
+ +
    +
  1. Descargue el archivo de imagen en el mismo directorio que su archivo CSS. (Por ejemplo, haga clic con el botón derecho del ratón para obtener un menú contextual y, a continuación, seleccione Guardar imagen como y especifique el directorio que está utilizando para este tutorial).
    2. +
  2. Edit your CSS file and add this rule to the body, setting a background image for the entire page.
    3. +
  3. + 
    background: url("Blue-rule.png");
+
    + +

    La repetición de valor es la predeterminada, por lo que no es necesario especificarla. La imagen se repite horizontal y verticalmente, dando una apariencia como papel de escribir forrado:

    + +
    +

    Image:Blue-rule-ground.png

    + +
    +
    +

    Cascading Style Sheets

    +
    + +
    +

    Cascading Style Sheets

    +
    +
    +
    +
    4. +
+ +
+
Reto
+ +

Descarga esta imagen:

+ + + + + + + +
Image:Yellow-pin.png
+ +

Agrega una nueva regla a tu hoja de estilos, luego, agrega la imagen al inicio de cada linea:

+ +
+

Image:Blue-rule-ground.png

+ +
+
image:Yellow-pin.png Cascading Style Sheets
+ +
image:Yellow-pin.png Cascading Style Sheets
+
+
+ +
+
Possible solution
+ +

Add this rule to your stylesheet:

+ +
p:before{
+  content: url("yellow-pin.png");
+}
+
+ +

 

+Hide solution
+Ver la solución a este reto.
+ +

Qué sigue?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Una forma común en que las hojas de estilos agregan contenido es marcando los elementos en las listas. La siguiente sección describe cómo especificar estilos para una lista de elementos.

diff --git "a/files/es/learn/css/s\303\241bercomo/index.html" "b/files/es/learn/css/s\303\241bercomo/index.html" new file mode 100644 index 0000000000..ffff1653c0 --- /dev/null +++ "b/files/es/learn/css/s\303\241bercomo/index.html" @@ -0,0 +1,81 @@ +--- +title: Usa CSS para resolver problemas comunes +slug: Learn/CSS/Sábercomo +translation_of: Learn/CSS/Howto +--- +
{{LearnSidebar}}
+ +

Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS.

+ +

Casos de uso común

+ +
+
+

Básicos

+ + + +

CSS y texto

+ + +
+ +
+

Cajas y diseños

+ + +
+
+ +

Uncommon or advanced techniques

+ +

Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.

+ +

General

+ + + +

Advanced effects

+ + + +

Layout

+ + diff --git a/files/es/learn/desarrollo_web_front-end/index.html b/files/es/learn/desarrollo_web_front-end/index.html new file mode 100644 index 0000000000..f58a9ad486 --- /dev/null +++ b/files/es/learn/desarrollo_web_front-end/index.html @@ -0,0 +1,201 @@ +--- +title: Desarrollo web Front-end +slug: Learn/Desarrollo_web_Front-end +tags: + - Aprender + - CSS + - De lado del cliente + - Estándar Web + - Estándares web + - Front-end + - HTML + - Herramientas + - JavaScript + - Novato + - Principiante +translation_of: Learn/Front-end_web_developer +--- +

{{learnsidebar}}

+ +

¡Bienvenido a la ruta de aprendizaje para desarrolladores de la interfaz de usuario web!

+ +

Aquí se te proporciona un curso estructurado que te enseñará todo lo que necesitas saber para convertirte en un desarrollador de la interfaz de usuario web. Simplemente trabaja en cada sección, aprendiendo nuevas habilidades (o mejorando las existentes) sobre la marcha. Cada sección incluye desafíos y ejercicios para evaluar tu comprensión antes de seguir adelante.

+ +

Temas tratados

+ +

Los temas tratados son:

+ + + +

Puedes trabajar en las secciones en orden, pero cada una también es autónoma. Por ejemplo, si ya conoces HTML, puedes pasar a la sección CSS.

+ +

Prerrequisitos

+ +

No necesitas conocimientos previos para empezar este curso. Todo lo que necesitas es una computadora que pueda ejecutar navegadores web modernos, una conexión a Internet y la voluntad de aprender.

+ +

Si no estás seguro de si el desarrollo de la interfaz de usuario web es para ti, y/o deseas una breve introducción antes de comenzar un curso más largo y completo, consulta una {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.

+ +

Cómo obtener ayuda

+ +

Hemos tratado de hacer que el desarrollo de la interfaz de usuario web sea lo más cómodo posible, pero probablemente todavía quedes encallado porque no entiendes algo o porque algún código simplemente no funciona.

+ +

No entres en pánico. Todos hemos encallado, sin importar que seamos desarrolladores web principiantes o profesionales. El artículo {{web.link("/es/docs/Learn/Learning_and_getting_help", "Aprender y obtener ayuda")}} te brinda una serie de consejos para buscar información y ayudarte a ti mismo. Si aún estás atascado, no dudes en publicar una pregunta en nuestro Foro de discusión.

+ +

Empecemos. ¡Diviértete!

+ +

El camino del aprendizaje

+ +

Primeros pasos

+ +

Tiempo para completar: 1.5 a 2 horas

+ +

Prerrequisitos

+ +

Nada excepto conocimientos básicos de informática.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

No hay evaluaciones en esta parte del curso. Pero asegúrate de no saltarla. Es importante prepararte para trabajar en la resolución de los ejercicios más adelante en el curso.

+ +

Guías

+ + + +

Semántica y estructura con HTML

+ +

Tiempo para completar: 35 a 50 horas

+ +

Prerrequisitos

+ +

Nada, excepto: conocimientos básicos de informática y un entorno de desarrollo web básico.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Estilo y diseño con CSS

+ +

Tiempo para completar: 90 a 120 horas

+ +

Prerrequisitos

+ +

Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender CSS. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Recursos adicionales

+ + + +

Interactividad con JavaScript

+ +

Tiempo para completar: 135 a 185 horas

+ +

Prerrequisitos

+ +

Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender JavaScript. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Formularios web — Trabajar con datos del usuario

+ +

Tiempo para completar: 40 a 50 horas

+ +

Prerrequisitos

+ +

Los formularios requieren conocimientos de HTML, CSS y JavaScript. Dada la complejidad de trabajar con formularios, es un tema dedicado.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Hacer que la web funcione para todos

+ +

Tiempo para completar: 60 a 75 horas

+ +

Prerrequisitos

+ +

Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección. Muchas de las técnicas y mejores prácticas se refieren a múltiples tecnologías.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.

+ +

Módulos

+ + + +

Herramientas modernas

+ +

Tiempo para completar: 55 a 90 horas

+ +

Prerrequisitos

+ +

Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección, ya que las herramientas analizadas funcionan junto con muchas de estas tecnologías.

+ +

¿Cómo sabré que estoy listo para seguir adelante?

+ +

No hay artículos de evaluación específicos en este conjunto de módulos. Los tutoriales de casos de estudio al final del segundo y tercer módulo te preparan para comprender los conceptos básicos de las herramientas modernas.

+ +

Módulos

+ + diff --git a/files/es/learn/getting_started_with_the_web/css_basics/index.html b/files/es/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..af79920af3 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,283 @@ +--- +title: CSS básico +slug: Learn/Getting_started_with_the_web/CSS_basics +tags: + - CSS + - Codificacion/Scripting + - Estilos/Styling + - Principiante + - Web + - aprende +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSideBar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics","Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Hojas de Estilo en Cascada) es el código que usas para dar estilo a tu página web. CSS Básico te lleva a través de lo que tú necesitas para empezar. Contestará a preguntas del tipo: ¿Cómo hago mi texto rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?

+
+ +

Entonces ¿qué es CSS, realmente?

+ +

Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en español, no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de escribir este CSS:

+ +
p {
+  color: red;
+}
+ +

Vas a probarlo: pega estas tres líneas de CSS en un nuevo archivo en tu editor de texto y guarda este archivo como style.css en tu directorio styles (estilos).

+ +

Pero aún debes aplicar el CSS a tu documento HTML, de otra manera el estilo CSS no cambiará cómo tu navegador muestra el documento HTML. (Si no has seguido nuestro proyecto, lee Manejo de archivos y HTML básico para averiguar qué necesitas hacer primero.)

+ +
    +
  1. Abre tu archivo index.html y pega la siguiente línea en algún lugar dentro del {{htmlelement("head")}}, es decir, entre las etiquetas <head> y </head>: + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Guarda el archivo index.html y cárgalo en tu navegador. Debes ver algo como esto:
    3. +
+ +

Un logo de Mozilla y algunos párrafos. El texto del párrafo ha sido estilizado en rojo por nuestro css.Si tu texto del párrafo ahora es rojo, ¡felicitaciones, ya has escrito tu primer CSS de forma exitosa!

+ +

Anatomía de una regla CSS

+ +

Observa el código CSS de arriba, un poco más a detalle:

+ +

Partes de una declaracion de css

+ +

La estructura completa es llamada regla predeterminada (pero a menudo «regla» para abreviar). Nota también los nombres de las partes individuales:

+ +
+
Selector
+
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a dar estilo (en este caso, los elementos {{htmlelement("p")}} ). Para dar estilo a un elemento diferente, solo cambia el selector.
+
Declaración
+
Una sola regla como color: red; especifica a cuál de las propiedades del elemento quieres dar estilo.
+
Propiedades
+
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este caso, color es una propiedad del elemento {{htmlelement("p")}} ). En CSS, seleccionas qué propiedad quieres afectar en tu regla.
+
Valor de la propiedad
+
A la derecha de la propiedad, después de los dos puntos (:), tienes el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada (hay muchos valores para color además de red).
+
+ +

Nota las otras partes importantes de la sintaxis:

+ + + +

De este modo para modificar varios valores de propiedad a la vez, solo necesitas escribirlos separados por punto y coma (;), así:

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

Seleccionar varios elementos

+ +

También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos. Incluye varios selectores separados por comas (,). Por ejemplo:

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

Diferentes tipos de selectores

+ +

Existen muchos tipos diferentes de selectores. Antes, solo viste los selectores de elementos, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML. Sin embargo puedes hacer selecciones más específicas que esas. En seguida están algunos de los tipos de selectores más comunes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre del selectorQué seleccionaEjemplo
Selector de elemento (llamado algunas veces selector de etiqueta o tipo)Todos los elementos HTML del tipo especificado.p
+ Selecciona <p>
Selector de identificación (ID)El elemento en la página con el ID especificado (en una página HTML dada, solo se permite un único elemento por ID).#mi-id
+ Selecciona <p id="mi-id"> y <a id="mi-id">
Selector de claseLos elementos en la página con la clase especificada (una clase puede aparecer varias veces en una página)..mi-clase
+ Selecciona <p class="mi-clase"> y <a class="mi-clase">
Selector de atributoLos elementos en una página con el atributo especificado.img[src]
+ Selecciona <img src="mimagen.png"> pero no <img>
Selector de pseudoclaseLos elementos especificados, pero solo cuando esté en el estado especificado, por ejemplo cuando el puntero esté sobre él.a:hover
+ Selecciona <a>, pero solo cuando el puntero esté sobre el enlace.
+ +

Existen muchos más selectores para explorar, y podrás encontrar una lista más detallada en la guía de Selectores.

+ +

Fuentes y texto

+ +

Ahora que has explorado lo básico de CSS, empieza por añadir información y algunas reglas más a tu archivo style.css para que tu ejemplo se vea bonito. Primero, haz que tus fuentes y texto luzcan un poco mejor.

+ +
    +
  1. Antes que nada, regresa y busca las fuentes de Google Fonts que guardaste en un lugar seguro. Agrega el elemento {{htmlelement("link")}}... en algún lugar del head de tu archivo index.html (de nuevo, en cualquier lugar entre las etiquetas {{htmlelement("head")}} y </head>). Debe verse algo así: + + 
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans" rel="stylesheet" type="text/css">
    +
    2. +
  2. Luego, borra la regla existente en tu archivo style.css. Fue una buena prueba, pero el texto en rojo en realidad no se ve muy bien.
    3. +
  3. +

    Añade las siguientes líneas (que se muestran a continuación), sustituyendo la asignación de font-family por tu selección de font-family que obtuviste en ¿Cuál será la apariencia de tu sitio Web? La propiedad font-family se refiere a la(s) fuente(s) que deseas usar en tu texto. Esta regla define una fuente base global y un tamaño de fuente para usar en toda la página. Dado que {{htmlelement("html")}} es el elemento primario (o padre) de toda la página, todos los elementos contenidos dentro de él heredan las propiedades font-size y font-family):

    + + 
    html {
+  font-size: 10px; /* px quiere decir 'píxeles': el tamaño de la fuente base es ahora de 10 píxeles de altura */
+  font-family: "Open Sans", sans-serif; /* Este debe ser el resto del resultado que obtuviste de Google fonts */
+}
    + +
    +

    Nota: se ha añadido un comentario para explicar qué significa «px». Todo lo que está en un documento de CSS entre /* y */ es un comentario en CSS, el cual el navegador descarta cuando carga el código. Este es un espacio donde puedes escribir notas útiles sobre lo que estás haciendo.

    +
    +
    4. +
  4. Ahora escoge el tamaño de fuente para los elementos que contienen texto dentro del cuerpo del HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, y {{htmlelement("p")}}). También centra el texto del título, escoge un ancho de línea y espaciado entre letras en el contenido del texto para hacerlo un poco más legible: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

Puedes ajustar estos valores en px para lograr que tu diseño luzca como desees, pero por lo general tu diseño debe verse así:

+ +

Un logo de Mozilla y algunos párrafos. se ha establecido una fuente sans-serif, se han ajustado los tamaños de las fuentes, la altura de las líneas y el espaciado de las letras, y se ha centrado el encabezamiento de la página principal.

+ +

Cajas, cajas, todo se trata de cajas

+ +

Una cosa que notarás sobre la escritura de CSS es que trata mucho sobre cajas —ajustando su tamaño, color, posición, etc—. Puedes pensar en la mayoría de los elementos HTML de tu página como cajas apiladas una sobre la otra.

+ +

Una gran pila de cajas o cajones puestos uno encima del otro.

+ +

No es de extrañar que el diseño de CSS esté basado principalmente en el modelo de caja. Cada una de las cajas que ocupa espacio en tu página tiene propiedades como estas:

+ + + +

tres cajas puestas una dentro de otra. De fuera a dentro están etiquetadas con el margen, el borde y el relleno

+ +

En esta sección también se utiliza:

+ + + +

Bien, ¡continúa y agrega más código CSS a la página! Sigue añadiendo estas reglas nuevas al final de la página, y no temas experimentar cambiando los valores para ver cómo resulta.

+ +

Cambiar el color de la página

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

Esta regla asigna un color de fondo a la página entera. Puedes cambiar el código de color por cualquiera como el que elegiste usar en tu proyecto.

+ +

Dar estilo al cuerpo del documento

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

Ahora tienes varias declaraciones en el elemento body. Revisa una por una:

+ + + +

Posicionar y dar estilo al título principal de la página

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

Puedes haber notado que hay un hueco horrible en la parte superior de body. Esto sucede porque los navegadores vienen con estilos por defecto, ¡incluso cuando aún no se ha aplicado ningún archivo CSS! Esto podría parecer una mala idea, pero se quiere que aun una página sin estilizar sea legible. Para deshacerte de este espacio elimina el estilo por defecto, agregando margin: 0;.

+ +

Enseguida, se ha puesto un relleno arriba y abajo del título de 20 píxeles, y se hizo que el color del texto sea el mismo que el color de fondo de html.

+ +

Una propiedad muy interesante que se ha usado aquí es text-shadow, que aplica una sombra al texto del elemento. Sus cuatro valores son como sigue:

+ + + +

Una vez más, trata de experimentar con diferentes valores para ver cómo resulta.

+ +

Centrar la imagen

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

Finalmente, centra la imagen para hacer que luzca mejor. Puedes usar nuevamente el truco de margin: 0 auto que usaste antes para body, pero existen diferencias que requieren que hagas algo más para que el código CSS funcione.

+ +

El elemento {{htmlelement("body")}} es un elemento en nivel de bloque (block-level), lo que significa que tomará espacio en la página y que puede tener otros valores de espacio aplicables como margen. Las imágenes, por otra parte, son elementos inline, lo que quiere decir que no puedes aplicarles márgenes, debes dar a la imagen un comportamiento de block-level usando display: block;.

+ +
+

Nota: las instrucciones anteriores asumen que estás usando una imagen más pequeña que el ancho establecido en body (600 píxeles). Si tu imagen es más grande, desbordará el cuerpo, derramándose en el resto de la página. Para solucionar esto, puedes hacer lo siguiente: 1) reducir el ancho de la imagen usando un editor gráfico, o 2) usar CSS para dimensionar la imagen estableciendo la propiedad {{cssxref("width")}} en el elemento <img> con un valor menor.

+
+ +
+

Nota: no te preocupes si aún no entiendes display: block; y la diferencia entre un elemento de bloque y un elemento inline. Lo entenderás en tanto estudies CSS a profundidad. Puedes encontrar más en cuanto a los diferentes valores disponibles para display en la página de referencia de display.

+
+ +

Conclusión

+ +

Si has seguido las instrucciones de esta publicación, deberías terminar con una página que luce algo así (también puedes ver nuestra versión aquí):

+ +

El logo de Mozilla centrado con título y párrafos. Ahora se ve muy bien de estilo, con un fondo azul para toda la página y un fondo naranja para la franja de contenido principal centrada.

+ +

Si te atoraste, puedes comparar tu trabajo con el código del ejemplo finalizado en GitHub.

+ +

Aquí, solo has arañado la superficie de CSS. Si quieres encontrar más, puedes ir a la página de aprendizaje de CSS.

+ +

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

diff --git "a/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" "b/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" new file mode 100644 index 0000000000..546baf0309 --- /dev/null +++ "b/files/es/learn/getting_started_with_the_web/c\303\263mo_funciona_la_web/index.html" @@ -0,0 +1,100 @@ +--- +title: Cómo funciona la web +slug: Learn/Getting_started_with_the_web/Cómo_funciona_la_Web +tags: + - Cliente + - DNS + - HTTP + - IP + - Infraestructura + - Internet + - Principiante + - Protocolos + - Servidor + - TCP + - Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar()}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Cómo funciona la web proporciona una vista simplificada de lo que sucede cuando ves una página web en un navegador web de tu computador o teléfono.

+
+ +

Esta teoría no es esencial para escribir código web a corto plazo, pero en poco tiempo empezarás a beneficiarte realmente al entender lo que está sucediendo en el fondo.

+ +

Los clientes y servidores

+ +

Las computadoras conectadas a la web se llaman clientes y servidores. Un diagrama simplificado de cómo interactúan se vería así:

+ +

+ + + +

Las otras partes de la caja de herramientas

+ +

El cliente y el servidor que describimos anteriormente, no cuentan toda la historia. Hay muchas otras partes involucradas y vamos a describirlas a continuación.

+ +

Por ahora, imaginemos que la web es un camino. En un extremo de la carretera, está el cliente, que es como tu casa. En el extremo opuesto del camino, está el servidor, que es una tienda en la que deseas comprar algo.

+ +

+ +

Además del cliente y el servidor, también tenemos que saludar a:

+ + + +

Entonces, ¿qué sucede exactamente?

+ +

Cuando escribes una dirección web en el navegador (usando nuestra analogía para ir a la tienda):

+ +
    +
  1. El navegador va al servidor DNS y encuentra la dirección real del servidor donde el sitio web vive (encontrar la dirección de la tienda).
    2. +
  2. El navegador envía un mensaje de petición HTTP al servidor, pidiéndole que envíe una copia de la página web para el cliente (ir a la tienda y hacer un pedido). Este mensaje y todos los datos enviados entre el cliente y el servidor, se envían a través de tu conexión a Internet usando TCP/IP.
    3. +
  3. Siempre que el servidor apruebe la solicitud del cliente, el servidor enviará al cliente un mensaje «200 OK», que significa, «¡por supuesto que puedes ver ese sitio web! Aquí está.», y comenzará a enviar los archivos de la página web al navegador como una serie de pequeños trozos llamados paquetes de datos (la tienda te entrega tus productos y los llevas de regreso a casa).
    4. +
  4. El navegador reúne los pequeños trozos, forma un sitio web completo y te lo muestra (llegas a casa con tus nuevas compras).
    5. +
+ +

Explicación de los DNS

+ +

Las direcciones webs reales no son las agradables y fácilmente recordables secuencias que tecleas en la barra de direcciones para encontrar tus sitios webs favoritos. En realidad, se trata de secuencias de números, algo como 63.245.217.105.

+ +

Lo anterior se llama dirección IP y representa un lugar único en la web. Sin embargo, no es muy fácil de recordar, ¿verdad? Por eso se inventaron los servidores de nombres de dominio. Estos son servidores especiales que hacen coincidir una dirección web tecleada desde tu navegador («mozilla.org», por ejemplo) con la dirección real del sitio web (IP).

+ +

Los sitios webs se pueden acceder directamente a través de sus direcciones IP. Intenta acceder a la página web de Mozilla escribiendo 63.245.217.105 en la barra de dirección de una nueva pestaña en tu navegador. Puedes encontrar la dirección IP de un sitio web escribiendo su dominio en una herramienta como IP Checker.

+ +

Un nombre de dominio es más que otra forma de una dirección IP

+ +

Explicación de los paquetes

+ +

Anteriormente hemos utilizado el término paquetes para describir el formato en que los datos se envían desde el servidor al cliente. ¿Qué significa esto? Básicamente, que los datos se envían a través de la web como miles de trozos pequeños, permitiendo que muchos usuarios pueden descargar la misma página web al mismo tiempo. Si los sitios web fueran enviados como grandes trozos, sólo un usuario podría descargarlos a la vez, lo que volvería a la web muy ineficiente y poco divertida.

+ +

Ver también

+ + + +

Crédito

+ +

Foto de la calle: Street Composing, por Kevin D.

+ +

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

diff --git a/files/es/learn/getting_started_with_the_web/html_basics/index.html b/files/es/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..e4e4f856a3 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,224 @@ +--- +title: 'HTML: básico' +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Aprendizaje + - HTML + - Principiante + - Web +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +

{{LearnSideBar}}

+ +

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

+ +

El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos. Como lo sugiere el título, este artículo te dará una comprensión básica de HTML y cúal es su función.

+ +

Entonces, ¿qué es HTML en realidad?

+ +

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la siguiente línea de contenido:

+ +
Mi gato es muy gruñon
+ +

Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de párrafo ({{htmlelement("p")}}):

+ +
<p>Mi gato es muy gruñon</p>
+ +

Anatomía de un elemento HTML

+ +

Explora este párrafo en mayor profundidad.

+ +

elementos de gato gruñon

+ +

Las partes principales del elemento son:

+ +
    +
  1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—.
    2. +
  2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el párrafo—.
    3. +
  3. El contenido: este es el contenido del elemento, que en este caso es sólo texto.
    4. +
  4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.
    5. +
+ +

Los elementos pueden también tener atributos, que se ven así:

+ +

atributo html

+ +

Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca en el contenido real del elemento. Aquí class es el nombre del atributo y editor-note el valor del atributo. En este caso, el atributo class permite darle al elemento un nombre identificativo, que se puede utilizar luego para apuntarle al elemento información de estilo y demás cosas.

+ +

Un atributo debe tener siempre:

+ +
    +
  1. Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya posee uno o más atributos).
    2. +
  2. El nombre del atributo, seguido por un signo de igual (=).
    3. +
  3. Comillas de apertura y de cierre, encerrando el valor del atributo.
    4. +
+ +

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.

+ +
+

Nota: el atributo con valores simples que no contengan espacios en blanco ASCII (o cualesquiera de los caracteres " ' ` = < >) pueden permanecer sin entrecomillar, pero se recomienda entrecomillar todos los valores de atributo, ya que esto hace que el código sea más consistente y comprensible.

+
+ +

Anidar elementos

+ +

Puedes también colocar elementos dentro de otros elementos —esto se llama anidamiento—. Si, por ejemplo, quieres resaltar una palabra del texto (en el ejemplo la palabra «muy»), podemos encerrarla en un elemento {{htmlelement("strong")}}, que significa que dicha palabra se debe enfatizar:

+ +
<p>Mi gato es <strong>muy</strong> gruñon.</p>
+ +

Debes asegurarte que los elementos estén correctamente anidados: en el ejemplo de abajo, creaste la etiqueta de apertura del elemento {{htmlelement("p")}} primero, luego la del elemento {{htmlelement("strong")}}, por lo tanto, debes cerrar esta etiqueta primero, y luego la de <p>. Esto es incorrecto:

+ +
<p>Mi gato es <strong>muy gruñon.</p></strong>
+ +

Los elementos deben abrirse y cerrarse ordenadamente, de forma tal que se encuentren claramente dentro o fuera el uno del otro. Si estos se encuentran solapados, el navegador web tratará de adivinar lo que intentas decirle, pero puede que obtengas resultados inesperados. Así que, ¡no lo hagas!

+ +

Elementos vacíos

+ +

Algunos elementos no poseen contenido, y son llamados elementos vacíos. Toma, por ejemplo, el elemento {{htmlelement("img")}} de nuestro HTML:

+ +
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
+ +

Posee dos atributos, pero no hay etiqueta de cierre </img> ni contenido encerrado. Esto es porque un elemento de imagen no encierra contenido al cual afectar. Su propósito es desplegar una imagen en la página HTML, en el lugar en que aparece.

+ +

Anatomía de un documento HTML

+ +

Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados para formar una página HTML entera. Vuelve a visitar el código de tu ejemplo en index.html (que viste por primera vez en el artículo Manejo de archivos):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi pagina de prueba</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="Mi imagen de prueba">
+  </body>
+</html>
+ +

Tienes:

+ + + +

Imágenes

+ +

Presta atención nuevamente al elemento imagen {{htmlelement("img")}}:

+ +
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
+ +

Como ya se dijo antes, incrusta una imagen en la página, en la posición en que aparece. Lo logra a través del atributo src (source), el cual contiene el path (ruta o ubicación) de tu archivo de imagen.

+ +

También se incluye un atributo alt (alternative) el cual contiene un texto que debería describir la imagen, y que podría ser accedido por usuarios que no pueden ver la imagen, quizás porque:

+ +
    +
  1. Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos visuales usualmente utilizan herramientas llamadas Lectores de pantalla (Screen Readers), los cuales les leen el texto contenido en el atributo alt.
    2. +
  2. Se produjo algún error en el código que impide que la imagen sea cargada. Como ejemplo, modifica deliberadamente la ubicación dentro del atributo src para que este sea incorrecto. Si guardas y recargas la página, deberías ver algo así en lugar de la imagen:
    3. +
+ +

atributo html

+ +

La frase clave acerca del texto alt de arriba es «texto que debería describir la imagen». El texto alt debe proporcionarle al lector la suficiente información como para que este tenga una buena idea de qué muestra la imagen. Por lo que tu texto actual «Mi imagen de prueba» no es para nada bueno. Un texto mucho mejor para el logo de Firefox sería: «El logo de Firefox: un zorro en llamas rodeando la Tierra».

+ +

Prueba a dar con mejores textos alt para tu imagen.

+ +
+

Nota: Descubre más acerca de la accesibilidad en el módulo de aprendizaje sobre la accesibilidad.

+
+ +

Marcado de texto

+ +

Esta sección cubrirá algunos de los elementos HTML básicos que usarás para el marcado de texto.

+ +

Encabezados

+ +

Los elementos de encabezado permiten especificar que ciertas partes del contenido son encabezados, o subencabezados del contenido. De la misma forma que un libro tiene un título principal, y que a su vez puede tener títulos por cada capítulo individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también. HTML posee seis niveles de encabezados, {{htmlelement("h1")}}–{{htmlelement("h6")}}, aunque probablemente solo llegues a usar 3-4 como mucho:

+ +
<h1>Mi título principal</h1>
+<h2>Mi título de nivel superior</h2>
+<h3>Mi subtítulo</h3>
+<h4>Mi sub-subtítulo</h4>
+ +

Intenta ahora añadir un título apropiado para tu página HTML, antes de tu elemento {{htmlelement("img")}}.

+ +
+

Nota: verás que el encabezamiento de nivel 1 tiene un estilo implícito. No utilices elementos de encabezado para hacer el texto más grande o más oscuro, porque este elemento se utiliza por accesibilidad y otras razones como el posicionamiento en buscadores (Search Engine Optimization, SEO). Intenta crear una secuencia significativa de encabezados en tus páginas, sin saltarte niveles.

+
+ +

Párrafos

+ +

Como se explicó más arriba, los elementos {{htmlelement("p")}} se utilizan para encerrar párrafos de texto; los usarás frecuentemente para el marcado de contenido de texto regular:

+ +
<p>Este es un simple parrafo</p>
+ +

Agrega uno o algunos párrafos a tu texto de ejemplo (deberías tenerlo de cuando estudiaste ¿Cuál será la apariencia de tu sitio web?), colocados directamente debajo del elemento <img>.

+ +

Listas

+ +

Mucho del contenido web está dado por listas, así que HTML tiene elementos especiales para ellas. El marcado de listas se realiza siempre en al menos dos elementos. Los dos tipos de listas más comunes son las listas ordenadas y las desordenadas:

+ +
    +
  1. Las listas desordenadas son aquellas en las que el orden de los items no es relevante, como en una lista de compras. Estas son encerradas en un elemento {{htmlelement("ul")}} (unordered list).
    2. +
  2. Las listas ordenadas son aquellas en las que el orden sí es relevante, como en una receta. Estas son encerradas en un elemento {{htmlelement("ol")}} (ordered list).
    3. +
+ +

Cada elemento de la lista se coloca dentro de un elemento {{htmlelement("li")}} (list item).

+ +

Por ejemplo, si quieres transformar parte del siguiente párrafo en una lista:

+ +
<p>En Mozilla, somos una comunidad de tecnólogos, pensadores, y constructores que trabajan juntos... </p>
+ +

Podrías hacer lo siguiente:

+ +
<p>En Mozilla, somos una comunidad de</p>
+
+<ul>
+  <li>tecnólogos</li>
+  <li>pensadores</li>
+  <li>constructores</li>
+</ul>
+
+<p>trabajando juntos... </p>
+ +

Intenta agregar una lista ordenada o desordenada en tu página de ejemplo.

+ +

Vínculos

+ +

Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—. Para implementar un vínculo, necesitas usar un vínculo simple — {{htmlelement("a")}} — la a es la abreviatura de la palabra inglesa «anchor» («ancla»). Para convertir algún texto dentro de un párrafo en un vínculo, sigue estos pasos:

+ +
    +
  1. Elige algún texto. Nosotros elegimos «Manifesto Mozilla».
    2. +
  2. Encierra el texto en un elemento <a>, así: + 
    <a>Manifesto Mozilla</a>
    +
    3. +
  3. Proporciónale al elemento <a> un atributo href, así: + 
    <a href="">Manifesto Mozilla</a>
    +
    4. +
  4. Completa el valor de este atributo con la dirección web con la que quieras conectar al vínculo: + 
    <a href="https://www.mozilla.org/es-AR/about/manifesto/">Manifesto Mozilla</a>
    +
    5. +
+ +

Podrías obtener resultados inesperados si al comienzo de la dirección web omites la parte https:// o http:// llamada protocolo. Así que luego del marcado del vínculo, haz clic en él para asegurarte que te dirige a la dirección deseada.

+ +
+

href podría parecer, en principio, una opción un tanto oscura para un nombre de atributo. Si tienes problemas para recordarla, recuerda que se refiere a hypertext reference (referencia de hipertexto).

+
+ +

Ahora agrega un vínculo a tu página, si es que aún no lo hiciste.

+ +

Conclusión

+ +

Si lograste seguir todas las instrucciones de este artículo, deberías terminar con una página que se vea así (también puedes verla aquí):
+
+ Una captura de pantalla de la página web que muestra el logo de Firefox, un encabezado que dice «mozilla es genial» y dos párrafos de texto de relleno.

+ +

Si te estancas en algún paso, puedes comparar tu trabajo con el código de ejemplo terminado en Github.

+ +

Aquí realmente solo has rasguñado la superficie de HTML. Para aprender más, ve a la página de Aprendizaje HTML.

+ +

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

diff --git a/files/es/learn/getting_started_with_the_web/index.html b/files/es/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..05cadcde6c --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/index.html @@ -0,0 +1,68 @@ +--- +title: Primeros pasos en la Web +slug: Learn/Getting_started_with_the_web +tags: + - CSS + - Diseño + - Guía + - HTML + - Index + - Novato + - Principiante + - edición + - editor + - 'l10n:priority' + - teoria + - Índice +translation_of: Learn/Getting_started_with_the_web +--- +
{{LearnSidebar}}
+ +
+

Introducción a la Web es una serie concisa que te presenta los aspectos prácticos del desarrollo web. Configurarás las herramientas que necesitas para construir una sencilla página web y publicar tu propio código.

+
+ +

La historia de tu primer sitio web

+ +

Es mucho trabajo crear un sitio web profesional, así que si eres nuevo en el desarrollo web, te animamos a que empieces poco a poco. No crearás otro Facebook de inmediato, pero no es difícil tener tu propio sitio web sencillo en línea, así que comenzaremos por ahí.

+ +

Al trabajar en orden a través de los artículos que se enumeran a continuación, pasarás de la nada a tener tu primera página web en línea. ¡Comencemos nuestro viaje!

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software","Instalación de software básico")}}

+ +

Cuando se trata de herramientas para crear un sitio web, hay mucho para elegir. Si recién estás comenzando, es posible que te sientas confundido por la variedad de editores de código, marcos de desarrollo y herramientas de prueba que existen. En {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}, te mostramos paso a paso cómo instalar solo el software que necesitas para comenzar un desarrollo web básico.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like","¿Cuál será la apariencia de tu sitio web?")}}

+ +

Antes de comenzar a escribir el código para tu sitio web, primero lo debes planificar. ¿Qué información estás mostrando?, ¿qué fuentes y colores estás usando?, en {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like", "¿cuál será la apariencia de tu sitio web?")}}, describimos un método simple que puedes seguir para planificar el contenido y modelado de tu sitio.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files","Manejo de archivos")}}

+ +

Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensata y asegurarte de que se puedan comunicar entre sí. {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}} explica cómo configurar una estructura de archivos sensible para tu sitio web y qué problemas debes tener en cuenta.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics","Conceptos básicos de HTML")}}

+ +

El lenguaje de marcado de hipertexto (HTML) es el código que utilizas para estructurar tu contenido web y darle significado y propósito. Por ejemplo, ¿mi contenido es un conjunto de párrafos o una lista de viñetas?, ¿tengo imágenes insertadas en mi página?, ¿tengo una tabla de datos?; Sin abrumarte, {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "conceptos básicos de HTML")}} proporciona suficiente información para familiarizarte con HTML.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics","Conceptos básicos de CSS")}}

+ +

Hojas de estilo en cascada (CSS) es el código que utilizas para aplicar estilo a tu sitio web. Por ejemplo, ¿desea que el texto sea negro o rojo?, ¿dónde se debe dibujar el contenido en la pantalla?, ¿qué imágenes de fondo y colores se deben utilizar para decorar tu sitio web?, {{web.link("/es/docs/Learn/Getting_started_with_the_web/CSS_basics", "Conceptos básicos de CSS")}} te indica lo que necesitas para empezar.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics","Conceptos básicos de JavaScript")}}

+ +

JavaScript es el lenguaje de programación que utilizas para agregar funciones interactivas a tu sitio web. Algunos ejemplos podrían ser juegos, cosas que suceden cuando se presionan botones o se ingresan datos en formularios, efectos de estilo dinámico, animación y mucho más. {{web.link("/es/docs/Learn/Getting_started_with_the_web/JavaScript_basics", "Conceptos básicos de JavaScript")}} te da una idea de lo que es posible con este interesante lenguaje y cómo empezar.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website","Publicar tu sitio web")}}

+ +

Una vez que hayas terminado de escribir el código y organizado los archivos que componen tu sitio web, lo debes poner todo en línea para que la gente lo pueda encontrar. {{web.link("/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website", "Publica tu código de ejemplo")}} describe cómo publicar tu código de ejemplo en línea con el mínimo esfuerzo.

+ +

{{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works","Cómo funciona la web")}}

+ +

Cuando accedes a tu sitio web favorito, suceden muchas cosas complicadas en segundo plano que quizás no conozcas. {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}} describe lo que sucede cuando ves una página web en tu dispositivo favorito.

+ +

Ve también

+ + diff --git a/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html new file mode 100644 index 0000000000..84ffdcf666 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/instalacion_de_software_basico/index.html @@ -0,0 +1,83 @@ +--- +title: Instalación de software básico +slug: Learn/Getting_started_with_the_web/Instalacion_de_software_basico +tags: + - Aprender + - Configuración + - Herramientas + - Navegadores + - Novato + - Principiantes + - aprende + - buscador + - editor de textos + - instalar + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

La Instalación de software básico, te muestra las herramientas que necesitas para hacer el desarrollo web simple, y la forma de instalarlas correctamente.

+
+ +

¿Qué herramientas usan los profesionales?

+ + + +

Ahora mismo: ¿qué herramientas necesitas realmente?

+ +

Esto parece una lista espeluznante pero, afortunadamente, puedes comenzar a trabajar en el desarrollo web sin saber nada de la mayoría de estas herramientas. En este artículo solo tendrás que configurar lo mínimo: un editor de texto y algunos navegadores web modernos.

+ +

Instalación de un editor de texto

+ +

Probablemente ya tengas un editor de texto básico instalado en tu computadora. De manera predeterminada Windows incluye el {{Interwiki("wikipedia", "Bloc de notas")}} y OS X viene con {{Interwiki("wikipedia", "TextEdit")}}. Las distros (versiones) de Linux varían: Ubuntu viene con {{Interwiki("wikipedia", "Gedit")}}; distribuciones basadas en KDE suelen traer Kate o Kwrite.

+ +

Para el desarrollo Web, probablemente hay cosas mejores que el Bloc de notas o TextEdit. Una recomendación puede ser empezar con Brackets, un editor gratuito que ofrece vistas previas en vivo y sugerencias de código.

+ +

Instalación de navegadores web modernos

+ +

Por ahora, solo tendrás que instalar un par de navegadores web de escritorio para poner a prueba tu código. Selecciona tu sistema operativo y pulsa los enlaces pertinentes para descargar los instaladores de tus navegadores preferidos:

+ + + +

Antes de continuar, deberías instalar al menos dos de estos navegadores y tenerlos disponibles para pruebas.

+ +
+

Nota: Internet Explorer no es compatible con algunas funciones web modernas y es posible que no puedas ejecutar tu proyecto. Por lo general, no necesitas preocuparte por hacer que tus proyectos web sean compatibles con él, ya que muy pocas personas todavía lo usan; ciertamente, no te preocupes demasiado por él mientras aprendes. En ocasiones, es posible que te encuentres con un proyecto que requiera soporte.

+
+ +

Instalación de un servidor web local

+ +

Algunos ejemplos necesitarás ejecutarlos a través de un servidor web para que funcionen exitosamente. Puedes encontrar cómo hacer esto en {{web.link("/es/docs/Learn/Common_questions/set_up_a_local_testing_server", "¿Cómo se configura un servidor de prueba local?")}}

+ +

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

+ +

En este módulo

+ + diff --git a/files/es/learn/getting_started_with_the_web/javascript_basics/index.html b/files/es/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..78fa13eccb --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,456 @@ +--- +title: Fundamentos de JavaScript +slug: Learn/Getting_started_with_the_web/JavaScript_basics +tags: + - Aprender + - CodingScripting + - JavaScript + - Novato + - Principiante + - Web + - 'l10n:priority' +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext( "Learn/Getting_started_with_the_web/CSS_basics","Learn/Getting_started_with_the_web/Publishing_your_website","Learn/Getting_started_with_the_web")}}
+ +
+

JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web, (por ejemplo, juegos, eventos que ocurren cuando los botones son presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos, animación, y mucho más). Este artículo te ayudará a comenzar con este lenguaje extraordinario y te dará una idea de qué es posible hacer con él.

+
+ +

¿Qué es JavaScript realmente?

+ +

{{Glossary("JavaScript")}} es un robusto lenguaje de programación que se puede aplicar a un documento {{Glossary("HTML")}} y usarse para crear interactividad dinámica en los sitios web. Fue inventado por Brendan Eich, cofundador del proyecto Mozilla, Mozilla Foundation y la Corporación Mozilla.

+ +

Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con pequeñas cosas como carruseles, galerías de imágenes, diseños fluctuantes, y respuestas a las pulsaciones de botones. Con más experiencia, serás capaz de crear juegos, animaciones 2D y gráficos 3D, aplicaciones integradas basadas en bases de datos ¡y mucho más!

+ +

JavaScript por sí solo es bastante compacto aunque muy flexible, y los desarrolladores han escrito gran cantidad de herramientas encima del núcleo del lenguaje JavaScript, desbloqueando una gran cantidad de funcionalidad adicional con un mínimo esfuerzo. Esto incluye:

+ + + +

Ya que se supone que este artículo es solo una introducción ligera a JavaScript, la intención no es confundirte en esta etapa hablando en detalle sobre cuál es la diferencia entre el núcleo del lenguaje JavaScript y las diferentes herramientas listadas arriba. Puedes aprender todo eso en detalle más tarde, en el Área de Aprendizaje en MDN, y en el resto de MDN.

+ +

Debajo se presentan algunos aspectos del núcleo del lenguaje y también jugarás con unas pocas características de la API del navegador. ¡Diviértete!

+ +

Ejemplo «¡Hola Mundo!»

+ +

La sección de arriba suena realmente emocionante, y debería serlo. JavaScript es una de las tecnologías web más emocionantes, y cuando comiences a ser bueno en su uso, tus sitios web entrarán en una nueva dimensión de energía y creatividad.

+ +

Sin embargo, sentirse cómodo con JavaScript es un poco más difícil que sentirse cómodo con HTML y CSS. Deberás comenzar poco a poco y continuar trabajando en pasos pequeños y consistentes. Para comenzar, mostraremos cómo añadir JavaScript básico a tu página, creando un «¡Hola Mundo!» de ejemplo (el estándar en los ejemplos básicos de programación).

+ +
+

Importante: si no has venido siguiendo el resto de nuestro curso, descarga este código de ejemplo y úsalo como punto de partida.

+
+ +
    +
  1. Primero, ve a tu sitio de pruebas y crea una carpeta llamada scripts. Luego, dentro de la nueva carpeta de scripts, crea un nuevo archivo llamado main.js y guárdalo.
    2. +
  2. A continuación, abre tu archivo index.html e introduce el siguiente código en una nueva línea, justo antes de la etiqueta de cierre </body>: + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Esto hace básicamente el mismo trabajo que el elemento {{htmlelement("link")}} para CSS: aplica el código JavaScript a la página, para que pueda actuar sobre el HTML (y CSS, o cualquier cosa en la página).
    4. +
  4. Ahora añade el siguiente código al archivo main.js: + 
    const miTitulo = document.querySelector('h1');
+miTitulo.textContent = '¡Hola mundo!';
    +
    5. +
  5. Finalmente, asegúrate de que has guardado los archivos HTML y JavaScript, y abre index.html en el navegador. Deberías ver algo así:
    6. +
+ +
+

Nota: la razón por la que has puesto el elemento {{htmlelement("script")}} casi al final del documento HTML es porque el navegador carga el HTML en el orden en que aparece en el archivo.

+ +

Si se cargara primero JavaScript y se supone que debe afectar al HTML que tiene debajo, podría no funcionar, ya que ha sido cargado antes que el HTML sobre el que se supone debe trabajar. Por lo tanto, colocar el JavaScript cerca del final de la página es normalmente la mejor estrategia. Para aprender más sobre enfoques alternativos, mira Estrategias de carga de scripts.

+
+ +

¿Qué ha ocurrido?

+ +

El texto del título ha sido cambiado por ¡Hola mundo! usando JavaScript. Hiciste esto primero usando la función {{domxref("Document.querySelector", "querySelector()")}} para obtener una referencia al título y almacenarla en una variable llamada miTitulo. Esto es muy similar a lo que hiciste con CSS usando selectores —quieres hacer algo con un elemento, así que tienes que seleccionarlo primero—.

+ +

Después de eso, estableciste el valor de la propiedad {{domxref("Node.textContent", "textContent")}} de la variable miTitulo (que representa el contenido del título) como ¡Hola mundo!

+ +
+

Nota: Las dos características que has utilizado en este ejercicio forman parte de la API del Modelo de Objeto de Documento (DOM), que tiene la capacidad de manipular documentos.

+
+ +

Curso intensivo de fundamentos del lenguaje

+ +

Ahora se explicarán algunas de las funciones básicas del lenguaje JavaScript para que puedas comprender mejor cómo funciona todo. Mejor aún, estas características son comunes para todos los lenguajes de programación. Si puedes entender esos fundamentos, deberías ser capaz de comenzar a programar en casi cualquier cosa.

+ +
+

Importante: en este artículo, trata de introducir las líneas de código de ejemplo en la consola de tu navegador para ver lo que sucede. Para más detalles sobre consolas JavaScript, mira Descubre las herramientas de desarrollo de los navegadores.

+
+ +

Variables

+ +

Las {{Glossary("Variable", "Variables")}} son contenedores en los que puedes almacenar valores. Primero debes declarar la variable con la palabra clave var (menos recomendado) o let, seguida del nombre que le quieras dar. Se recomienda más el uso de let que de var (más adelante se profundiza un poco sobre esto):

+ +
let nombreDeLaVariable;
+ +
+

Nota: todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí donde termina la declaración. Si no los incluyes puedes obtener resultados inesperados. Sin embargo, algunas personas creen que es una buena práctica tener punto y coma al final de cada declaración. Hay otras reglas para cuando se debe y no se debe usar punto y coma. Para más detalles, vea Guía del punto y coma en JavaScript (en inglés).

+
+ +
+

Nota: puedes llamar a una variable con casi cualquier nombre, pero hay algunas restricciones (ver este artículo sobre las reglas existentes). Si no estás seguro, puedes comprobar el nombre de la variable para ver si es válido.

+
+ +
+

Nota: JavaScript distingue entre mayúsculas y minúsculas. miVariable es una variable distinta a mivariable. Si estás teniendo problemas en tu código, revisa las mayúsculas y minúsculas.

+
+ +
+

Nota: para más detalles sobre la diferencia entre var y let, vea Diferencia entre var y let.

+
+ +

Tras declarar una variable, puedes asignarle un valor:

+ +
nombreDeLaVariable = 'Bob';
+ +

Puedes hacer las dos cosas en la misma línea si lo necesitas:

+ +
let nombreDeLaVariable = 'Bob';
+ +

Puedes obtener el valor de la variable llamándola por su nombre:

+ +
nombreDeLaVariable;
+ +

Después de haberle dado un valor a la variable, puedes volver a cambiarlo:

+ +
let nombreDeLaVariable = 'Bob';
+nombreDeLaVariable = 'Steve';
+ +

Advierte que las variables tienen distintos tipos de datos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExplicaciónEjemplo
{{Glossary("String","String")}}Esto es una secuencia de texo conocida como cadena. Para indicar que la variable es una cadena, debes escribirlo entre comillas.let miVariable = 'Bob';
{{Glossary("Number")}} +

Esto es un número. Los números no tienen comillas.

+ 		let miVariable = 10;
{{Glossary("Boolean")}}Tienen valor verdadero/falso. true/false son palabras especiales en JS, y no necesitan comillas.let miVariable = true;
{{Glossary("Array")}}Una estructura que te permite almacenar varios valores en una sola referencia.let miVariable = [1,'Bob','Steve',10];
+ Llama a cada miembro del array así: miVariable[0], miVariable[1], etc.
{{Glossary("Object")}} +

Básicamente cualquier cosa. Todo en JavaScript es un objeto y puede ser almacenado en una variable. Mantén esto en mente mientras aprendes.

+ 		let miVariable = document.querySelector('h1');
+ Todos los ejemplos anteriores también.
+ +

Entonces, ¿para qué necesitamos las variables? Las variables son necesarias para hacer cualquier cosa interesante en programación. Si los valores no pudieran cambiar, entonces no podrías hacer nada dinámico, como personalizar un mensaje de bienvenida de un usuario que visita tu página, cambiar la imagen que se muestra en una galería de imágenes, etc.

+ +

Comentarios

+ +

Puedes escribir comentarios entre el código JavaScript, igual que puedes en CSS. El navegador ignora el texto marcado como comentario. En JavaScript, los comentarios de una sola línea se escriben así:

+ +
// Esto es un comentario
+ +

Pero también puedes escribir comentarios en más de una línea, igual que en CSS:

+ +
/*
+Esto es un comentario
+de varias líneas.
+*/
+ +

Operadores

+ +

Un {{Glossary("operator", "operador")}} es básicamente un símbolo matemático que puede actuar sobre dos valores (o variables) y producir un resultado. En la tabla de abajo aparecen los operadores más simples, con algunos ejemplos para probarlos en la consola del navegador.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorExplicaciónSímbolo(s)Ejemplo
Suma/concatenaSe usa para sumar dos números, o juntar dos cadenas en una.+6 + 9;
+ "Hola " + "mundo!";
Resta, multiplicación, divisiónEstos hacen lo que esperarías que hicieran en las matemáticas básicas.-, *, /9 - 3;
+ 8 * 2; // La multiplicación en JS es un asterisco
+ 9 / 3;
Operador de asignaciónLos has visto anteriormente: asigna un valor a una variable.=let miVariable = 'Bob';
identidad/igualdadComprueba si dos valores son iguales entre sí, y devuelve un valor de true/false (booleano).===let miVariable = 3;
+ miVariable === 4;
Negación, distinto (no igual)
+ En ocasiones utilizado con el operador de identidad, la negación es en JS el equivalente al operador lógico NOT — cambia true por false y viceversa.		!, !== +

La expresión básica es true, pero la comparación devuelve false porque lo hemos negado:

+ +

let miVariable = 3;
+ !miVariable === 3;

+ +

Aquí estamos comprobando "miVariable NO es igual a 3". Esto devuelve false, porque miVariable ES igual a 3.

+ +

let miVariable = 3;
+ miVariable !== 3;

+
+ +

Hay muchos operadores por explorar, pero con esto será suficiente por ahora. Mira Expresiones y operadores para ver la lista completa.

+ +
+

Nota: mezclar tipos de datos puede dar lugar a resultados extraños cuando se hacen cálculos, así que asegúrate de que relacionas tus variables correctamente y de que recibes los resultados que esperabas. Por ejemplo, teclea: "3" + "25" en tu consola. ¿Por qué no obtienes lo que esperabas? Porque las comillas convierten los números en "strings" (el término inglés para denominar cadenas de caracteres) y de este modo has acabado con los "strings" concatenados entre sí, y no con los números sumados. Si tecleas: 35 + 25, obtendrás el resultado correcto.

+
+ +

Condicionales

+ +

Las condicionales son estructuras de código que permiten comprobar si una expresión devuelve true o no, y después ejecuta un código diferente dependiendo del resultado. La forma de condicional más común es la llamada if... else. Entonces, por ejemplo:

+ +
let helado = 'chocolate';
+if (helado === 'chocolate') {
+  alert('¡Sí, amo el helado de chocolate!');
+} else {
+  alert('Awwww, pero mi favorito es el de chocolate...');
+}
+ +

La expresión dentro de if (... ) es el criterio — este usa al operador de identidad (descrito arriba) para comparar la variable helado con la cadena chocolate para ver si las dos son iguales. Si esta comparación devuelve true, el primer bloque de código se ejecuta. Si no, ese código se omite y se ejecuta el segundo bloque de código después de la declaración else.

+ +

Funciones

+ +

Las {{Glossary("Function", "funciones")}} son una manera de encapsular una funcionalidad que quieres reutilizar, de manera que puedes llamar esa función con un solo nombre, y no tendrás que escribir el código entero cada vez que la utilices. Ya has visto algunas funciones más arriba, por ejemplo:

+ +
    +
  1. + 
    let nombreDeLaVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('¡Hola!');
    +
    3. +
+ +

Estas funciones document.querySelector y alert están integradas en el navegador para poder utilizarlas en cualquier momento.

+ +

Si ves algo que parece un nombre de variable, pero tiene paréntesis —()— al final, probablemente es una función. Las funciones con frecuencia toman {{Glossary("Argument", "argumentos")}} —pedazos de datos que necesitan para hacer su trabajo—. Estos se colocan dentro de los paréntesis, y se separan con comas si hay más de uno.

+ +

Por ejemplo, la función alert() hace aparecer una ventana emergente dentro de la ventana del navegador, pero necesitas asignarle una cadena como argumento para decirle qué mensaje se debe escribir en la ventana emergente.

+ +

Las buenas noticias son que podemos definir nuestras propias funciones —en el siguiente ejemplo escribimos una función simple que toma dos números como argumentos y los multiplica entre sí—:

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

Trata de ejecutar la función anterior en la consola. Después trata de usar la nueva función algunas veces, p.ej:

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

Nota: la sentencia return le dice al navegador que devuelva la variable resultado fuera de la función, para que esté disponible para su uso. Esto es necesario porque las variables definidas dentro de funciones, solo están disponibles dentro de esas funciones. Esto se conoce como «{{Glossary("Scope", "ámbito")}} (scope en inglés) de la variable». Lee más sobre ámbito o alcance de la variable.

+
+ +

Eventos

+ +

Para crear una interacción real en tu sitio web, debes usar eventos. Estos son unas estructuras de código que captan lo que sucede en el navegador, y permite que en respuesta a las acciones que suceden se ejecute un código. El ejemplo más obvio es un clic (click event), que se activa al hacer clic sobre algo. Para demostrar esto, prueba ingresando lo siguiente en tu consola, luego da clic sobre la página actual:

+ +
document.querySelector('html').onclick = function() {
+    alert('¡Ouch! ¡Deja de pincharme!');
+}
+
+ +

Hay muchas maneras de enlazar un evento a un elemento; aquí hemos seleccionado el elemento {{htmlelement("html")}} y le asignamos a su propiedad onclick una función anónima (función sin nombre) que contiene el código que se ejecutará cuando el evento suceda.

+ +

Nota que

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

es equivalente a

+ +
let miHTML = document.querySelector('html');
+miHTML.onclick = function(){};
+
+ +

es solo un modo más corto de escribirlo.

+ +

Sobrecargar tu sitio web de ejemplo

+ +

Ahora vas a repasar un poco lo básico de JavaScript. Añadirás un par de funcionalidades a tu sitio para demostrar lo que puedes hacer.

+ +

Añadir un cambiador de imagen

+ +

En esta sección añadirás otra imagen a tu sitio usando la DOM API y agregarás un poco de código para cambiar entre imágenes al hacer clic.

+ +
    +
  1. Primero que todo, busca una imagen que te guste para tu sitio. Asegúrate que sea del mismo tamaño que la primera, o lo más cerca posible.
    2. +
  2. Guarda tu imagen en tu carpeta images.
    3. +
  3. Renombra esta imagen «firefox2.png» (sin las comillas).
    4. +
  4. Ve a tu archivo main.js y agrega el siguiente JavaScript (si tu JavaScript de «Hola Mundo» está aún allí, bórralo). + 
    let miImage = document.querySelector('img');
+miImage.onclick = function () {
+    let miSrc = miImage.getAttribute('src');
+    if (miSrc === 'images/firefox-icon.png') {
+      miImage.setAttribute('src','images/firefox2.png');
+    } else {
+      miImage.setAttribute('src', 'images/firefox-icon.png');
+    }
+}
    +
    5. +
  5. Guarda todos los archivos y carga index.html en tu navegador. Ahora cuando hagas clic en la imagen, ¡esta debe cambiar por otra!
    6. +
+ +

Esto fue lo que sucedió: se almacena una referencia a tu elemento {{htmlelement("img")}} en la variable miImage. Luego, haces que esta propiedad del manejador de evento onclick de la variable sea igual a una función sin nombre (una función «anónima»). Ahora, cada vez que se haga clic en la imagen:

+ +
    +
  1. El código recupera el valor del atributo src de la imagen.
    2. +
  2. El código usa una condicional para comprobar si el valor src es igual a la ruta de la imagen original: +
      +
    1. Si es así, el código cambia el valor de src a la ruta de la segunda imagen, forzando a que se cargue la otra imagen en el elemento {{htmlelement("img")}}.
      2. +
    2. Si no es así (significa que ya fue modificada), se cambiará el valor de src nuevamente a la ruta de la imagen original, regresando a como era en un principio.
      3. +
    +
    3. +
+ +

Añadir un mensaje de bienvenida personalizado

+ +

Ahora añadirás un poco más de código, para cambiar el título de la página o incluir un mensaje personalizado de bienvenida para cuando el usuario ingrese por primera vez. Este mensaje de bienvenida permanecerá luego de que el usuario abandone la página y estará disponible para cuando regrese. Lo guardarás usando Web Storage API. También se incluirá una opción para cambiar el usuario y por lo tanto también el mensaje de bienvenida en cualquier momento que se requiera.

+ +
    +
  1. En index.html, agrega el siguiente código antes del elemento {{htmlelement("script")}}: + + 
    <button>Cambiar de usuario</button>
    +
    2. +
  2. En main.js, agrega el siguiente código al final del archivo, exactamente como está escrito. Esto toma referencia al nuevo botón que se agregó y al título y los almacena en variables: + 
    let miBoton = document.querySelector('button');
+let miTitulo = document.querySelector( 'h1');
    +
    3. +
  3. Ahora agrega la siguiente función para poner el saludo personalizado, lo que no causará nada aún, pero arreglarás esto en un momento: + 
    function estableceNombreUsuario() {
+    let miNombre = prompt('Por favor, ingresa tu nombre.');
+    localStorage.setItem('nombre', miNombre);
+    miTitulo.textContent = 'Mozilla es genial,' + miNombre;
+}
    + La función estableceNombreUsuario() contiene una función prompt(), que crea un cuadro de diálogo como lo hace alert(); la diferencia es que prompt() pide al usuario un dato, y almacena este dato en una variable cuando el botón Aceptar del cuadro de diálogo es presionado. En este caso, pedirás al usuario que ingrese su nombre. Luego, llamarás la API localStorage, que nos permite almacenar datos en el navegador y recuperarlos luego. Usarás la función setItem() de localStorage, que crea y almacena un dato en el elemento llamado 'nombre', y coloca este valor en la variable miNombre que contiene el nombre que el usuario ingresó. Finalmente, establecerás el textContent del título a una cadena, más el nombre de usuario recientemente almacenado.
    4. +
  4. Luego, agregarás este bloque if ... else. Se podría llamar a esto el código de inicialización, como se ha establecido para cuando carga la app por primera vez: + 
    if (!localStorage.getItem('nombre')) {
+    estableceNombreUsuario();
+}
+else {
+    let nombreAlmacenado = localStorage.getItem('nombre');
+    miTitulo.textContent = 'Mozilla es genial,' + nombreAlmacenado;
+}
    + La primera línea de este bloque usa el operador de negación (NO lógico representado por !) para comprobar si el elemento 'nombre' existe. Si no existe, la función estableceNombreUsuario() se iniciará para crearlo. Si ya existe (como por ejemplo cuando el usuario ya ingresó al sitio), se recupera el dato del nombre usando getItem() y se fija mediante textContent del título a la cadena, más el nombre del usuario, como hiciste dentro de estableceNombreUsuario().
    5. +
  5. Finalmente, agrega abajo el evento onclick que manipulará el botón, de modo que cuando sea pulsado se inicie la función estableceNombreUsuario(). Esto permitirá al usuario establecer un nuevo nombre cada vez que lo desee al pulsar el botón: + 
    miBoton.onclick = function() {
+    estableceNombreUsuario();
+}
    +
    6. +
+ +

Ahora cuando visites tu sitio por primera vez, este te pedirá tu nombre y te dará un mensaje personalizado de bienvenida. Puedes cambiar cuantas veces quieras el nombre al presionar el botón. Y como un bonus añadido, ya que el nombre se almacena en el localStorage, este permanecerá después de que cierre el sitio, ¡manteniendo ahí el mensaje personalizado cuando abras el sitio la próxima vez!

+ +

¿Un nombre de usuario nulo?

+ +

Cuando ejecutes el ejemplo y obtengas el cuadro de diálogo que solicita que introduzcas tu nombre de usuario, intenta pulsar el botón Cancelar. Deberías terminar con un título que diga que Mozilla es genial, null. Esto sucede porque, cuando cancelas el mensaje, el valor se establece como null. Null (nulo) es un valor especial en JavaScript que se refiere a la ausencia de un valor.

+ +

Además, prueba a dar clic en Aceptar sin introducir un nombre. Deberías terminar con un título que diga que Mozilla es genial, por razones bastante obvias.

+ +

Para evitar estos problemas, podrías comprobar que el usuario no ha introducido un nombre en blanco. Actualiza tu función estableceNombreUsuario() a lo siguiente:

+ +
function estableceNombreUsuario() {
+  let miNombre = prompt('Introduzca su nombre.');
+  if(!miNombre) {
+    estableceNombreUsuario();
+  } else {
+    localStorage.setItem('nombre', miNombre);
+    miTitulo.innerHTML = 'Mozilla is genial, ' + miNombre;
+  }
+}
+ +

En el lenguaje humano, esto significa que si miNombre no tiene ningún valor, ejecute estableceNombreUsuario() de nuevo desde el principio. Si tiene un valor (si la afirmación anterior no es verdadera), entonces almacene el valor en localStorage y establézcalo como el texto del título.

+ +

Conclusión

+ +

Si has seguido las instrucciones en este artículo, tendrás una página que luzca como esta (también puede ver nuestra versión aquí):

+ +

+ +

Si tuviste problemas, siempre puedes comparar su trabajo con el código terminado del ejemplo en GitHub.

+ +

Aquí solo has rozado la superficie de JavaScript. Si has disfrutado aprendiendo y deseas avanzar más, visita la Guía de JavaScript.

+ +

Ve también

+ +
+
JavaScript
+
Sumérgete en JavaScript con mucho más detalle.
+
Aprende JavaScript
+
¡Este es un excelente material para los aspirantes a desarrolladores web! Aprende JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiadas por una evaluación automatizada. Las primeras 40 lecciones son gratis. El curso completo está disponible por un pequeño pago único (en inglés).
+
+ +

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

+ +

En este módulo

+ + diff --git a/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html new file mode 100644 index 0000000000..daf6e77d18 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/la_web_y_los_estandares_web/index.html @@ -0,0 +1,172 @@ +--- +title: La web y los estándares web +slug: Learn/Getting_started_with_the_web/La_web_y_los_estandares_web +tags: + - Estándares web + - Front-end + - Interfáz de Usuario + - Novato + - Principiante + - Web + - aprende +translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards +--- +

{{learnsidebar}}

+ +

Este artículo proporciona algunos antecedentes útiles sobre la Web — cómo surgió, qué son las tecnologías web estándar, cómo funcionan juntas, por qué "desarrollador web" es una gran carrera para elegir y qué tipos de mejores prácticas aprenderás a través de este curso.

+ +

Breve historia de la web

+ +

Mantendremos esto muy breve, ya que hay muchos artículos (más) detallados de la historia de la web, a los que enlazaremos más adelante (también intenta buscar "historia de la web" en tu motor de búsqueda favorito y ve lo que obtienes, si estás interesado en más detalles).

+ +

A fines de la década de 1960, las fuerzas armadas de EE. UU. desarrollaron una red de comunicación llamada {{Glossary("Arpanet")}}. Esta se puede considerar una precursora de la Web, ya que trabajó en la {{interwiki("wikipedia", "conmutación de paquetes")}} y presentó la primera implementación de la {{interwiki("wikipedia", "Familia de protocolos de internet")}} TCP/IP. Estas dos tecnologías forman la base de la infraestructura sobre la que se construye Internet.

+ +

En 1980, Tim Berners-Lee (a menudo denominado TimBL) escribió un programa de block de notas llamado ENQUIRE, que presentaba el concepto de enlaces entre diferentes nodos. ¿Te suena familiar?

+ +

Avanzó rápidamente hasta 1989, y TimBL escribió Gestión de la información: una propuesta e hipertexto en el CERN; estas dos publicaciones juntas proporcionaron los antecedentes de cómo funcionaría la web. Recibieron una buena cantidad de interés, suficiente para convencer a los jefes de TimBL de que le permitieran seguir adelante y creara un sistema de hipertexto global.

+ +

A finales de 1990, TimBL había creado todo lo necesario para ejecutar la primera versión de la web: {{web.link("/es/docs/Web/HTTP", "HTTP")}}, {{web.link("/es/docs/Web/HTML", "HTML")}}, el primer navegador web, que se llamaba {{interwiki("wikipedia", "WorldWideWeb")}}, un servidor HTTP y algunas páginas web para mirar.

+ +

En los años siguientes, la web explotó, se lanzaron varios navegadores, se instalaron miles de servidores web y se crearon millones de páginas web. Bien, este es un muy sencillo resumen de lo que sucedió, pero les prometí un breve resumen.

+ +

Un último dato importante para compartir es que en 1994, TimBL fundó el {{interwiki("wikipedia", "World Wide Web Consortium")}} (W3C), una organización que reúne a representantes de muchas empresas de tecnología diferentes para trabajar juntos en la creación de especificaciones de tecnología web. Después de eso, siguieron otras tecnologías como {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}}, y la web comenzó a parecerse más a la web que conocemos hoy.

+ +

Estándares web

+ +

Los estándares web son las tecnologías que utilizamos para crear sitios web. Estos estándares existen como extensos documentos técnicos llamados especificaciones, que detallan exactamente cómo debería funcionar la tecnología. Estos documentos no son muy útiles para aprender a usar las tecnologías que describen (es por eso que tenemos sitios como MDN Web Docs), sino que están pensados ​​para que los utilicen los ingenieros de software para implementar esas tecnologías (generalmente en los navegadores web).

+ +

Por ejemplo, el lleno de vida Estándar HTML describe exactamente cómo se debe implementar HTML (todos los elementos HTML y sus APIs asociadas y otras tecnologías circundantes).

+ +

Los estándares web son creados por organismos de estándares — instituciones que invitan a grupos de personas de diferentes compañías de tecnología a unirse y acordar cómo deberían funcionar las tecnologías de la mejor manera posible para cumplir con todos sus casos de uso. El W3C es el organismo de estándares web más conocido, pero hay otros como WHATWG (que fueron responsables de la modernización del lenguaje HTML), ECMA (que publica el estándar para ECMAScript, en el que se basa JavaScript), Khronos (que publica tecnologías para gráficos 3D, como WebGL) y otras.

+ +

Estándares "abiertos"

+ +

Uno de los aspectos clave de los estándares web, que TimBL y el W3C acordaron desde el principio, es que la web (y las tecnologías web) deben ser libres tanto para contribuir como para usar, y no estar gravadas por patentes/licencias. Por lo tanto, cualquiera puede escribir el código para crear un sitio web de forma gratuita y cualquiera puede contribuir al proceso de creación de estándares, donde se escriben las especificaciones.

+ +

Debido a que las tecnologías web se crean abiertamente, en colaboración entre muchas empresas diferentes, significa que ninguna empresa las puede controlar, lo cual es algo realmente bueno. No querrías que una sola empresa decidiera repentinamente poner toda la web detrás de un muro de pago, o lanzar una nueva versión de HTML que todos tienen que comprar para continuar creando sitios web, o peor aún, simplemente decidiendo que ya no están interesados, y simplemente apagarlas.

+ +

Esto permite que la web siga siendo un recurso público de libre acceso.

+ +

No rompas la web

+ +

Otra frase que escucharás sobre los estándares web abiertos es "no rompas la web" — la idea es que cualquier tecnología web nueva que se introduzca debe ser compatible con versiones anteriores (es decir, los sitios web antiguos seguirán funcionando) y compatibles con versiones posteriores (las tecnologías futuras a su vez serán compatibles con las que tenemos actualmente). A medida que avances en el material de aprendizaje que se presenta aquí, comenzarás a aprender cómo se hace posible esto con un trabajo de diseño e implementación muy inteligente.

+ +

Ser desarrollador web es bueno

+ +

La industria web es un mercado muy atractivo para ingresar si estás buscando trabajo. Las cifras publicadas recientemente dicen que actualmente hay alrededor de 19 millones de desarrolladores web en el mundo, y esa cifra se establecerá en más del doble en la próxima década. Y al mismo tiempo, hay una escasez de habilidades en la industria, entonces, ¿qué mejor momento para aprender sobre desarrollo web?

+ +

Sin embargo, no todo es diversión y juegos — crear sitios web es una propuesta más complicada de lo que solía ser, y tendrás que dedicar algo de tiempo a estudiar todas las diferentes tecnologías que necesitas usar, todas las técnicas y las mejores prácticas que necesitas conocer y todos los patrones típicos que se te pedirá que implementes. Te tomará unos meses comenzar realmente a involucrarte en él, y luego deberás seguir aprendiendo para que tu conocimiento se mantenga actualizado con todas las nuevas herramientas y funciones que aparecen en la plataforma web, y seguir practicando y perfeccionando tu oficio.

+ +

Lo único constante es el cambio.

+ +

¿Esto suena difícil? No te preocupes: nuestro objetivo es brindarte todo lo que necesitas saber para comenzar, y las cosas serán más fáciles. Una vez que aceptes el cambio constante y la incertidumbre de la web, comenzarás a disfrutar. Como parte de la comunidad web, tendrás toda una red de contactos y material útil para ayudarte, y comenzarás a disfrutar de las posibilidades creativas que brinda.

+ +

Ahora eres un creativo digital. Disfruta de la experiencia y el potencial de ganarte la vida.

+ +

Descripción de las tecnologías web modernas

+ +

Hay una serie de tecnologías que debes aprender si deseas ser un desarrollador web front-end. En esta sección las describiremos brevemente. Para obtener una explicación más detallada de cómo funcionan juntas algunas de ellas, lee nuestro artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/How_the_Web_works", "Cómo funciona la web")}}.

+ + + +

Probablemente estés leyendo estas palabras dentro de un navegador web en este mismo momento (a menos que las hayas impreso o estés utilizando tecnología de asistencia, como un lector de pantalla para leerlas). Los navegadores web son los programas de software que la gente usa para consumir la web e incluyen Firefox, Chrome, Opera, Safari y Edge.

+ +

HTTP

+ +

El Protocolo de transferencia de hipertexto, o {{web.link("/es/docs/Web/HTTP/Basics_of_HTTP", "HTTP")}}, es un protocolo de mensajería que permite a los navegadores web comunicarse con los servidores web (donde se almacenan los sitios web). Una conversación típica es algo así como

+ +
"Hola servidor web. ¿Me puedes dar los archivos que necesito para renderizar bbc.co.uk"?
+
+"Seguro navegador web — aquí los tienes"
+
+[Descarga archivos y renderiza la página web]
+ +

La sintaxis real de los mensajes HTTP (llamados peticiones y respuestas) no es tan legible para los humanos, pero esto te da una idea básica.

+ +

HTML, CSS y JavaScript

+ +

{{web.link("/es/docs/Web/HTML", "HTML")}}, {{web.link("/es/docs/Web/CSS", "CSS")}} y {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} son las tres tecnologías principales que utilizarás para crear un sitio web:

+ + + +

Herramientas

+ +

Una vez que hayas aprendido las tecnologías "sin procesar" que se pueden usar para crear páginas web (como HTML, CSS y JavaScript), pronto comenzarás a encontrar varias herramientas que puedes usar para hacer tu trabajo más fácil y/o más eficiente. Algunos ejemplos incluyen:

+ + + +

Marcos de desarrollo y lenguajes de lado del servidor

+ +

HTML, CSS y JavaScript son lenguajes de la interfaz del usuario ("front-end" o del lado del cliente), lo cual significa que los ejecuta el navegador para producir la interfaz del sitio web que los usuarios pueden utilizar.

+ +

Hay otra clase de lenguajes llamados lenguajes de la interfaz de admiración ("back-end" o de lado del servidor), lo cual significa que se ejecutan en el servidor antes de que el resultado se envíe al navegador para que se muestre. Un uso típico de un lenguaje de lado del servidor es obtener algunos datos de una base de datos y generar algo de HTML para contener los datos, antes de enviar el HTML al navegador para mostrárselo al usuario.

+ +

Los lenguajes de lado del servidor de ejemplo incluyen ASP.NET, Python, PHP y NodeJS.

+ +

Mejores prácticas web

+ +

Hemos hablado brevemente sobre las tecnologías que utilizarás para crear sitios web. Ahora analicemos las mejores prácticas que debes emplear para asegurarte de que estás utilizando esas tecnologías de la mejor manera posible.

+ +

Al hacer desarrollo web, la principal causa de incertidumbre proviene del hecho de que no sabes qué combinación de tecnologías utilizará cada usuario para ver tu sitio web:

+ + + +

Debido a que no sabes exactamente qué usarán tus usuarios, debes diseñar a la defensiva — hacer que tu sitio web sea lo más flexible posible, de modo que todos los usuarios anteriores puedan hacer uso de él, incluso si no todos obtienen la misma experiencia. En resumen, estamos tratando de hacer que la web funcione para todos, tanto como sea posible.

+ +

Encontrarás los siguientes conceptos en algún momento de tus estudios.

+ + + +

Ve también

+ + diff --git a/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html new file mode 100644 index 0000000000..0c7f8c4121 --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/manejando_los_archivos/index.html @@ -0,0 +1,120 @@ +--- +title: Manejo de archivos +slug: Learn/Getting_started_with_the_web/Manejando_los_archivos +tags: + - Archivos + - Guía + - HTML + - Novato + - Principiante + - Scripting + - Sitios Web + - 'l10n:priority' + - teorias +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Un sitio web consta de muchos archivos: texto del contenido, código, hojas de estilo, contenido multimedia, etc. Cuando estás creando un sitio web, necesitas ensamblar estos archivos en una estructura sensible en tu computadora local, asegurarte de que puedan comunicarse entre sí y hacer que todo su contenido se vea bien antes de que eventualmente {{web.link("/es/Learn/Getting_started_with_the_web/Publishing_your_website", "los cargues en un servidor")}}. El manejo de archivos analiza algunos problemas que debes tener en cuenta, para que puedas configurar una estructura de archivos adecuada para tu sitio web.

+
+ +

¿Dónde debería estar tu sitio web en tu computadora?

+ +

Cuando estés trabajando en un sitio web localmente en tu computadora, debes mantener todos los archivos relacionados en un solo directorio que refleje la estructura de archivos del sitio web publicado en el servidor. Este directorio se puede ubicar en cualquier lugar que desees, pero debes colocarlo en algún lugar donde lo puedas encontrar fácilmente, tal vez en tu escritorio, en tu directorio de inicio o en la raíz de tu disco duro.

+ +
    +
  1. Elige un lugar para almacenar los proyectos de tus sitios web. Dentro del lugar elegido, crea un nuevo directorio llamado proyectosweb (o algo similar). Aquí es donde vivirán todos los proyectos de tus sitios web.
    2. +
  2. Dentro de este primer directorio, crea otro directorio para almacenar tu primer sitio web. Llámalo pruebasitio (o algo más imaginativo).
    3. +
+ +

Una acotación sobre la envoltura y el espaciado

+ +

Notarás que a lo largo de este artículo, te pedimos que nombres los directorios y archivos completamente en minúsculas sin espacios. Esto es porque:

+ +
    +
  1. Muchas computadoras, particularmente los servidores web, distinguen entre mayúsculas y minúsculas. Entonces, por ejemplo, si colocas una imagen en tu sitio web en pruebasitio/MiImagen.jpg y luego, en un archivo diferente intentas invocar la imagen como pruebasitio/miimagen.jpg, puede que no funcione.
    2. +
  2. Los navegadores, servidores web y lenguajes de programación no manejan los espacios de manera consistente. Por ejemplo, si usas espacios en tu nombre de archivo, algunos sistemas pueden tratar el nombre de archivo como dos nombres de archivo. Algunos servidores reemplazarán las áreas en tus nombres de archivo con "%20" (el código de caracteres para espacios en URI), lo cual provocará que todos tus enlaces se rompan. Es mejor separar las palabras con guiones, en lugar de guiones bajos: mi-archivo.html vs. mi_archivo.html.
    3. +
+ +

La respuesta corta es que debes usar un guión para los nombres de tus archivos. El motor de búsqueda de Google trata un guión como un separador de palabras, pero no considera un guión bajo de esa manera. Por estos motivos, es mejor adquirir el hábito de escribir los nombres de los directorios y archivos en minúsculas, sin espacios y con palabras separadas por guiones, al menos hasta que sepas lo que estás haciendo. De esa manera, tropezarás con menos problemas en el futuro.

+ +

¿Qué estructura debe tener tu sitio web?

+ +

A continuación, veamos qué estructura debería tener tu sitio de prueba. Las cosas más comunes que tendrás en cualquier proyecto de sitio web que crees son un archivo de índice HTML y directorios para contener imágenes, archivos de estilo y archivos de script. Crea estos ahora:

+ +
    +
  1. index.html: Este archivo generalmente tendrá el contenido de tu página de inicio, es decir, el texto y las imágenes que las personas ven cuando visitan tu sitio por primera vez. Usando tu editor de texto, crea un nuevo archivo llamado index.html y guárdalo dentro de tu directorio pruebasitio.
    2. +
  2. Directorio images: Este directorio contendrá todas las imágenes que utilices en tu sitio. Crea un directorio llamado images, dentro de tu directorio pruebasitio.
    3. +
  3. Directorio styles: Este directorio contendrá el código CSS que se utiliza para aplicar estilo al contenido (por ejemplo, configurar el texto y los colores de fondo). Crea un directorio llamado styles, dentro de tu directorio pruebasitio.
    4. +
  4. Directorio scripts: Este directorio contendrá todo el código JavaScript utilizado para agregar funcionalidad interactiva a tu sitio (por ejemplo, botones que cargan datos cuando se hace clic en ellos). Crea un directorio llamado scripts, dentro de tu directorio pruebasitio.
    5. +
+ +
+

Nota: En las computadoras con Windows, es posible que tengas problemas para ver los nombres de los archivos, porque de manera predeterminada, Windows tiene activada una opción llamada Ocultar extensiones para tipos de archivos conocidos. Generalmente, la puedes desactivar yendo al Explorador de Windows, seleccionando la opción Opciones de directorio..., desmarcando la casilla de verificación Ocultar extensiones para tipos de archivo conocidos y luego haciendo clic en Aceptar. Para obtener información más específica sobre tu versión de Windows, puedes buscar en la web.

+
+ +

Rutas de archivo

+ +

Para que los archivos se comuniquen entre sí, debes proporcionar una ruta de archivo entre ellos, básicamente una ruta, para que un archivo sepa dónde está otro. Para demostrarlo, insertaremos un poco de HTML en nuestro archivo index.html y haremos que muestre la imagen que elegiste en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Imágenes", "¿Cómo se verá tu sitio web?")}}

+ +
    +
  1. Copia la imagen que elegiste anteriormente en tu directorio images.
    2. +
  2. Abre tu archivo index.html e inserta el siguiente código en el archivo exactamente como se muestra. Por ahora, no te preocupes por lo que significa todo esto; veremos las estructuras con más detalle más adelante en la serie. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi página de prueba</title>
+  </head>
+  <body>
+    <img src="" alt="Mi imagen de prueba">
+  </body>
+</html>
    +
    3. +
  3. La línea <img src="" alt="Mi imagen de prueba"> es el código HTML que inserta una imagen en la página. Necesitamos decirle al HTML dónde está la imagen. La imagen está dentro del directorio images, que está en el mismo directorio que index.html. Para recorrer la estructura del archivo desde index.html hasta nuestra imagen, la ruta del archivo que necesitamos es images/nombre-archivo-imagen. Por ejemplo, nuestra imagen se llama firefox-icon.png, por lo que la ruta del archivo es images/firefox-icon.png.
    4. +
  4. Inserta la ruta del archivo en tu código HTML entre las comillas dobles del código src="".
    5. +
  5. Guarda tu archivo HTML, luego cárgalo en tu navegador web (haz doble clic en el archivo). ¡Deberías ver tu nueva página web mostrando tu imagen!
    6. +
+ +

Una captura de pantalla del sitio web básico que muestra solo el logotipo de Firefox: un zorro en llamas envolviendo el mundo

+ +

Algunas reglas generales para las rutas de archivo:

+ + + +

Por ahora, esto es todo lo que necesitas saber.

+ +
+

Nota: El sistema de archivos de Windows tiende a utilizar barras invertidas, no barras diagonales, p. ej. C:\windows. Esto no importa en HTML, incluso si estás desarrollando tu sitio web en Windows, debes usar barras diagonales en tu código.

+
+ +

¿Qué más se debería hacer?

+ +

Eso es todo por ahora. La estructura de tu directorio debería verse así:

+ +

Una estructura de archivos en mac os x finder, que muestra un directorio de imágenes con una imagen, directorios de estilos y scripts vacíos, y un archivo index.html

+ +

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

+ + + +

En este módulo

+ + diff --git a/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..9dbfe88d7e --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,195 @@ +--- +title: Publicar tu sitio web +slug: Learn/Getting_started_with_the_web/Publishing_your_website +tags: + - Aprender + - Aprendiz + - Dropbox + - FTP + - GitHub + - Publicacion + - Sitio Web + - Web + - Web Hosting + - publicar + - web server +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +

{{LearnSidebar()}}

+ +

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

+ +
+

Una vez que termines de escribir tu código y organizar los archivos que forman parte de tu sitio, debes ponerlo en línea para que la gente pueda consultarlo. Este artículo muestra cómo conseguir de manera sencilla que tu código esté en línea.

+
+ +

¿Cuáles son las opciones?

+ +

Publicar un sitio no es un tema sencillo, principalmente porque hay muchas maneras diferentes de hacerlo. En este artículo no se trata de ver todos los modos posibles. En su lugar, discutiremos los pros y contras de tres amplias estrategias desde el punto de vista de un principiante, y luego debes seleccionar qué método usarás.

+ +

Obtener alojamiento y un nombre de dominio

+ +

Si deseas un control total sobre tu sitio web publicado, probablemente necesitarás gastar dinero para comprar:

+ + + +

Muchos sitios web profesionales toman esta opción.

+ +

Además, necesitarás un programa de protocolo de transferencia de archivo (File Transfer Protocol, FTP) para transferir los archivos que conforman tu sitio web al servidor (mira más detalles de cuánto puede costar: software). Los programas FTP varían ampliamente, pero en general tienes que conectarte a tu servidor web contratado mediante detalles proporcionados por tu empresa de alojamiento (por ejemplo: nombre de usuario, contraseña, nombre del host). Una vez conectado con el servidor web el programa te mostrará tus archivos locales y los archivos del servidor web en dos ventanas y te proporcionará una forma de transferir los archivos de un lado a otro.

+ +

+ +

Consejos para elegir alojamienoto y dominio

+ + + +

Utilizar una herramienta en línea como GitHub o Dropbox

+ +

Algunas herramientas te permiten publicar tu sitio en línea:

+ + + +

A diferencia de la mayoría de alojamientos (servicios de hosting), tales herramientas son por lo general libres de utilizar, pero solo permiten un conjunto de funciones limitadas.

+ +

Utilizar un entorno basado en web como CodePen

+ +

Existe un número de aplicaciones web que emulan un entorno de desarrollo de sitios web, permitiendo que ingreses tu código HTML, CSS y Javascript y luego muestran los resultados de dicho código como un sitio web, ¡todo en una pestaña del navegador! En términos generales, estas herramientas son bastante sencillas, geniales para aprender, buenas para compartir código (por ejemplo, si quieres compartir con alguien una técnica o pedir ayuda en la depuración del código) y gratuitas para las funciones básicas. Además, mantienen tu página renderizada en una única dirección web. Sin embargo, las características básicas son muy limitadas y estas aplicaciones usualmente no proveen espacio de almacenamiento para recursos (como imágenes).

+ +

Prueba con algunos de estos ejemplos y observa cuál es el que mejor se adapta a tu gusto:

+ + + +

+ +

Publicar a través de GitHub

+ +

Explicados estos tres métodos veamos ahora cómo publicar fácilmente, de forma muy visual e intuitiva, o bien por medio de comandos, tu sitio a través de GitHub Pages (en inglés).

+ +

De manera visual y sin necesidad de más herramientas

+ +

Esta no es la única manera, pero sí la que te permite poner manos a la obra inmediatamente.

+ +
    +
  1. Si aún no lo has hecho da de alta una cuenta en GitHub. Es simple y sencillo, solo debes verificar tu dirección de correo electrónico.
    2. +
  2. Una vez registrado, ingresa a tu cuenta en GitHub.com con tu usuario y contraseña suministrados al crear tu cuenta.
    3. +
  3. A continuación, necesitas crear un nuevo repositorio para tus archivos. Haz clic en el signo más (+) en la parte superior derecha de la página inicial de GitHub y selecciona New Repository (Nuevo repositorio).
    4. +
  4. En esta página, en la casilla Repository name (Nombre del repositorio), ingresa usuario.github.io, donde usuario es tu nombre de usuario. Así por ejemplo, nuestro amigo Bob Smith ingresaría bobsmith.github.io.
    5. +
  5. Opcionalmente escribe una corta descripción de tu sitio web en el campo Description para que recuerdes cuál es la temática que tratarás en él y selecciona la casilla de verificación Public (Público) si quieres que cualquier persona pueda ver los resultados de las ediciones que haces al sitio web que estás creando.
    6. +
  6. Marca la casilla de verificación Initialize this repository with a README (Inicializar este repositorio con un README (LÉAME)). Esto te permitirá clonar inmediatamente el repositorio a tu equipo. ¡Si vas a transferir tus archivos desde tu equipo al servidor de GitHub a través de un cliente de FTP (como se explica en la sección Subir tus archivos a GitHub a través de la línea de comandos, a continuación), no debes realizar este paso!
    7. +
  7. Da clic en Create repository (Crear repositorio).
    8. +
  8. Arrastra y suelta el contenido de la carpeta de tu sitio web en tu repositorio. Cuando termines de pasar el contenido haz clic en Commit changes (Confirmar cambios). +
    +

    Nota: cerciórate que tu carpeta tiene un archivo de nombre index.html

    +
    +
    9. +
  9. En tu navegador desplázate a username.github.io para ver tu sitio web en línea. Por ejemplo, para el nombre de usuario Bob Smith, escribe bobsmith.github.io. + + +
    +

    Nota: puede que tu página web tarde unos minutos en entrar en funcionamiento. Si tu sitio web no se muestra inmediatamente, espera unos minutos e inténtalo de nuevo.

    +
    +
    10. +
+ +

Subir tus archivos a GitHub a través de la línea de comandos

+ +

No estamos diciendo que esta es la única manera, o la mejor, de publicar tu sitio, pero es gratis, decentemente simple y abarca algunas nuevas habilidades que encontrarás útiles en adelante.

+ +

Antes que nada, descarga e instala Git en tu equipo. Este paso es necesario si vas a trabajar con los archivos de tu página web en él y luego los transferirás al servidor de GitHub.

+ +

Sigue los pasos 1 a 5 y el 7 (recuerda omitir el 6) detallados en la anterior sección De manera visual y sin necesidad de más herramientas. Una vez hayas dado clic en Create repository (Crear repositorio) verás la siguiente ventana (¡no la cierres, más adelante necesitarás copiar información de allí!):

+ +

+ +

En este punto ya estarás listo para poder utilizar la línea de comandos para subir los archivos de tu repositorio a GitHub. Una línea de órdenes o de comandos es una ventana donde escribes comandos que realizarán tareas como crear archivos y ejecutar programas, en lugar de utiizar la interfaz gráfica de usuario. Se debe parecer a algo como esto:

+ +

+ +
+

Nota: si no te sientes cómodo utilizando la línea de comandos, podrías considerar usar Git graphical user interface para realizar la misma tarea.

+
+ +

Todos los sistemas operativos vienen con una herramienta de línea de comandos:

+ + + +

Aunque este procedimiento pueda parecer un poco aterrador al principio no te preocupes, pronto te darás cuenta de lo básico. Darás órdenes al equipo en el terminal escribiendo un comando y presionando Intro.

+ +
    +
  1. Apunta la línea de comandos a tu directorio sitio-prueba (o como quiera que hayas llamado al directorio que contiene tu sitio web). Para esto utiliza el comando cd (es decir, «change directory», «cambiar de directorio»). Aquí viene lo que deberías teclear si has ubicado tu sitio web en un directorio llamado sitio-prueba en tu escritorio: + + 
    cd Desktop/sitio-prueba
    + +

    En Windows sería:

    + + 
    cd %USERPROFILE%\Desktop\sitio-prueba
    +
    2. +
  2. Cuando la línea de comandos esté apuntando dentro del directorio de tu sitio web, teclea el siguiente comando, que indica a la herramienta de git que transforme el directorio en un repositorio de Git: + 
    git init
    +
    3. +
  3. +

    A continuación, regresa a la ventana del sitio de GitHub que dejaste abierta. En esa página, la sección que interesa es …or push an existing repository from the command line. Deberías ver dos líneas de código listadas en esa sección. Copia toda la primera línea, pégala en la línea de comandos y presiona Intro. El comando debería verse similar a:

    + + 
    git remote add origin https://github.com/bobsmith/bobsmith.github.io.gi
    +
    4. +
  4. A continuación, ingresa los siguientes dos comandos, presionando Intro después de cada uno. Estos preparan el código para cargar a GitHub y pedir a Git administrar estos archivos. + 
    git add --all Intro
+git commit -m 'agregando archivos a mi repositorio' Intro
    +
    5. +
  5. Finalmente, envía el codigo a GitHub tomando de la página web de GitHub en la que estás el segundo de los dos comandos del paso 3 e introdúcelo en el terminal: + 
    git push -u origin master
    +
    6. +
  6. Ahora cuando vayas a la direccion de red de tu página GitHub (usuario.github.io) en una nueva pestaña del navegador ¡deberías ver tu sitio en línea! Envíala por correo-e a tus amigos y presume de tu maestría.
    7. +
+ +
+

Nota: has tocado apenas la superficie de Git. Si te quedas atascado la ayuda de GitHub en español te será de gran apoyo.

+
+ +

Conocer más de GitHub

+ +

Si deseas hacer más cambios a tu sitio y enviarlos a GitHub, luego de modificar los archivos, debes ingresar los siguientes comandos (presionando Intro después de cada uno) para enviar esos cambios a GitHub:

+ +
git add --all Intro
+git commit -m 'otro commit' Intro
+git push Intro
+ +

Puedes reemplazar el texto otro commit con un mensaje más descriptivo respecto a los cambios que hiciste.

+ +

Conclusión

+ +

En este punto, deberías tener tu página web de ejemplo disponible en una dirección web única. ¡Bien hecho!

+ +

+ +

Ver también

+ + + +

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

diff --git a/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..fb6ced116f --- /dev/null +++ b/files/es/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,113 @@ +--- +title: ¿Cuál será la apariencia de tu sitio Web? +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - Activos + - Aprender + - Composición + - Contenido + - Desaprobado + - Diseño + - Fuentes + - Imagenes + - Novato + - Planificar + - Principiante + - Tipos de Letra + - paso a paso +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

¿Cómo se verá tu sitio web?, analiza el trabajo de planificación y diseño que debes realizar para tu sitio web antes de escribir el código, incluyendo: "¿qué información ofrece mi sitio web?", "¿qué tipos de letra y colores quiero?" y "¿qué hace mi sitio?".

+
+ +

Lo primero es lo primero: planificación

+ +

Antes de hacer nada, necesitas algunas ideas. ¿Qué debería hacer realmente tu sitio web?; Un sitio web puede hacer básicamente cualquier cosa, pero, en tu primer intento, debes mantener las cosas simples. Comenzarás creando una página web simple con un encabezado, una imagen y algunos párrafos.

+ +

Para comenzar, deberás responder estas preguntas:

+ +
    +
  1. ¿De qué trata tu sitio web?, ¿te gustan los perros, Nueva York o Pac-Man?
    2. +
  2. ¿Qué información presentas sobre el tema?; Escribe un título y algunos párrafos y piensa en una imagen que te gustaría mostrar en tu página.
    3. +
  3. ¿Cómo se ve tu sitio web, en términos simples de alto nivel?, ¿cuál es el color de fondo?, ¿qué tipo de letra es apropiado: formal, caricaturesca, atrevida y fuerte, sutil?
    4. +
+ +
+

Nota: Los proyectos complejos necesitan pautas detalladas que incluyan todos los detalles de los colores, los tipos de letra, el espacio entre los elementos de una página, el estilo de escritura adecuado, etc. Esto, a veces, se denomina guía de diseño, sistema de diseño o libro de marcas, y puedes ver un ejemplo en el Sistema de diseño de fotones de Firefox.

+
+ +

Haz un bosquejo de tu diseño

+ +

A continuación, toma papel y lápiz y dibuja aproximadamente cómo deseas que se vea tu sitio. Para tu primera página web simple, no hay mucho que esbozar, pero deberías adquirir el hábito de hacerlo ahora. Realmente ayuda, ¡no tienes que ser Van Gogh!

+ +

Bosquejo

+ +
+

Nota: Incluso en sitios web reales y complejos, los equipos de diseño suelen comenzar con bocetos en papel y luego crean maquetas digitales utilizando un editor de gráficos o tecnologías web.

+ +

Los equipos web suelen incluir tanto un diseñador gráfico como un diseñador de {{Glossary("UX", "experiencia de usuario")}} (UX). Los diseñadores gráficos ensamblan las imágenes del sitio web. Los diseñadores de experiencia de usuario tienen un papel algo más abstracto al abordar cómo los usuarios experimentarán e interactuarán con el sitio web.

+
+ +

Elige tus activos

+ +

En este punto, es bueno comenzar a reunir el contenido que eventualmente aparecerá en tu página web.

+ +

Texto

+ +

Aún debes tener los párrafos y el título de antes. Mantenlos cerca.

+ +

Color del tema

+ +

Para elegir un color, ve al Selector de color y busca un color que te guste . Al hacer clic en un color, verás un extraño código de seis caracteres como #660066. Eso se llama código hexadecimal (abreviatura de hexadecimal) y representa tu color. Copia el código en un lugar seguro por ahora.

+ +

Color del tema

+ +

Imágenes

+ +

Para elegir una imagen, ve a Imágenes Google y busca algo adecuado.

+ +
    +
  1. Cuando encuentres la imagen que deseas, haz clic en la imagen para obtener una vista ampliada de la misma.
    2. +
  2. Haz clic con el botón derecho en la imagen (Ctrl+clic en una Mac), elige Guardar imagen como... y elige un lugar seguro para guardar tu imagen. Alternativamente, copia la dirección web de la imagen de la barra de direcciones de tu navegador para su posterior uso.
    3. +
+ +

Imágenes

+ +

Ten en cuenta que la mayoría de las imágenes en la web, incluidas las de Imágenes Google, están protegidas por derechos de autor. Para reducir tu probabilidad de violar los derechos de autor, puedes utilizar el filtro de licencias de Google. Haz clic en el botón Herramientas y luego en la opción Derechos de uso resultante que aparece a continuación. Debes elegir una opción como Etiquetado para reutilización.

+ +

Etiquetado para reutilización

+ +

Tipos de letra

+ +

Para elegir un tipo de letra:

+ +
    +
  1. Ve a Google Fonts y desplázate hacia abajo en la lista hasta que encuentres una que te guste. También puedes utilizar los controles de la derecha para filtrar aún más los resultados.
    2. +
  2. Haz clic en el icono "más" (Agregar a) junto al tipo de letra que desees.
    3. +
  3. Haz clic en el botón "*Familia seleccionada" en el panel en la parte inferior de la página ("*" depende de cuántos tipos de letra hayas seleccionado).
    4. +
  4. En el cuadro emergente, puedes ver y copiar las líneas de código que Google te brinda en tu editor de texto para guardarlas para más adelante.
    5. +
+ +

Archivos de tipo de letra

+ +

Tipos de letra

+ +

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

+ +

En este módulo

+ + diff --git a/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html b/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html new file mode 100644 index 0000000000..73bd6299a1 --- /dev/null +++ b/files/es/learn/herramientas_y_pruebas/cross_browser_testing/index.html @@ -0,0 +1,39 @@ +--- +title: Cross browser testing +slug: Learn/Herramientas_y_pruebas/Cross_browser_testing +translation_of: Learn/Tools_and_testing/Cross_browser_testing +--- +
{{LearnSidebar}}
+ +

Este módulo se centra en probar proyectos web en diferentes navegadores. Nos fijamos en la identificación de su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos son los que más le preocupan?), cómo realizar las pruebas, los principales problemas a los que se enfrentará con los diferentes tipos de código y cómo mitigarlos, qué herramientas son las más útiles para ayudarle a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.

+ +

Prerequisitos

+ +

Debería aprender los conceptos básicos de los lenguajes HTML, CSS y JavaScript básicos antes de intentar utilizar las herramientas que se detallan aquí.

+ +

Guías

+ +
+
Introducción a la prueba de navegadores cruzados
+
Este artículo comienza el módulo proporcionando una visión general del tema de la prueba de navegadores cruzados, respondiendo a preguntas como "¿qué es la prueba de navegadores cruzados? y "¿cuáles son los tipos de problemas más comunes que se encuentran?
+
Estrategias para la realización de las pruebas
+
+

A continuación, profundizamos en la realización de pruebas, la identificación de un público objetivo (por ejemplo, qué navegadores, dispositivos y otros segmentos deben ser probados), estrategias de pruebas de baja fiabilidad (obtenga una gama de dispositivos y algunas máquinas virtuales y realice pruebas ad-hoc cuando sea necesario), estrategias de alta tecnología (automatización, uso de aplicaciones de pruebas dedicadas), y pruebas con grupos de usuarios.

+
+
Manejo de problemas comunes de HTML y CSS
+
+

Con el conjunto de escenas, ahora veremos específicamente los problemas comunes entre navegadores que encontrará en código HTML y CSS, y qué herramientas se pueden usar para evitar que ocurran problemas o para solucionarlos. Esto incluye el código de hilado, la entrega de prefijos CSS, el uso de herramientas de desarrollo de navegadores para localizar problemas, el uso de polifiltros para añadir soporte a los navegadores, la solución de problemas de diseño con capacidad de respuesta, y mucho más.

+
+
Manejo de problemas comunes de JavaScript
+
+

Ahora veremos los problemas comunes de JavaScript en todos los navegadores y cómo solucionarlos. Esto incluye información sobre el uso de herramientas de desarrollo del navegador para localizar y solucionar problemas, el uso de polifondos y bibliotecas para solucionar los problemas, el funcionamiento de las funciones modernas de JavaScript en navegadores antiguos, y mucho más.

+
+
Manejo de problemas comunes de accesibilidad
+
A continuación, nos centramos en la accesibilidad, proporcionando información sobre problemas comunes, cómo realizar pruebas sencillas y cómo utilizar las herramientas de auditoría/automatización para encontrar problemas de accesibilidad.
+
Implementación de la detección de características
+
La detección de funciones implica determinar si un navegador soporta un determinado bloque de código, y ejecutar un código diferente dependiendo de si lo hace (o no), de modo que el navegador siempre puede proporcionar una experiencia de trabajo en lugar de bloquearse/error en algunos navegadores. Este artículo detalla cómo escribir su propia detección de características simples, cómo usar una biblioteca para acelerar la implementación y características nativas para la detección de características como @supports.
+
Introducción a las pruebas automatizadas
+
La realización manual de pruebas en varios navegadores y dispositivos, varias veces al día, puede resultar tediosa y consumir mucho tiempo. Para manejar esto eficientemente, debe familiarizarse con las herramientas de automatización. En este artículo, analizamos lo que está disponible, cómo utilizar los corredores de tareas y los conceptos básicos de cómo utilizar las aplicaciones de automatización de pruebas de navegadores comerciales, como Sauce Labs y Browser Stack.
+
Configuración de su propio entorno de automatización de pruebas
+
En este artículo, le enseñaremos cómo instalar su propio entorno de automatización y ejecutar sus propias pruebas utilizando Selenium/WebDriver y una biblioteca de pruebas como Selenium-webdriver for Node. También veremos cómo integrar su entorno de pruebas local con aplicaciones comerciales como las que se comentaron en el artículo anterior.
+
diff --git a/files/es/learn/herramientas_y_pruebas/github/index.html b/files/es/learn/herramientas_y_pruebas/github/index.html new file mode 100644 index 0000000000..62646f1cc4 --- /dev/null +++ b/files/es/learn/herramientas_y_pruebas/github/index.html @@ -0,0 +1,92 @@ +--- +title: Git y GitHub +slug: Learn/Herramientas_y_pruebas/GitHub +tags: + - Aprender + - GitHub + - Principiante + - Web + - git +translation_of: Learn/Tools_and_testing/GitHub +--- +
{{LearnSidebar}}
+ +

Todos los desarrolladores utilizarán algún tipo de sistema de control de versiones ( VCS ), una herramienta que les permita colaborar con otros desarrolladores en un proyecto sin peligro de que sobrescriban el trabajo de los demás, y volver a las versiones anteriores de la base de código si existe un problema descubierto más tarde. El VCS más popular (al menos entre los desarrolladores web) es Git, junto con GitHub, un sitio que proporciona alojamiento para tus repositorios y varias herramientas para trabajar con ellos. Este módulo tiene como objetivo enseñarte lo que necesitas saber sobre ambos.

+ +

Introducción

+ +

Los VCS son esenciales para el desarrollo de software:

+ + + +

Los VCS proporcionan herramientas para satisfacer las necesidades anteriores. Git es un ejemplo de VCS, y GitHub es un sitio web + infraestructura que proporciona un servidor Git más una serie de herramientas realmente útiles para trabajar con repositorios git individuales o en equipo, como informar problemas con el código, herramientas de revisión, características de administración de proyectos tal como asignación de tareas, estados de tareas, y más.

+ +
+

Nota: Git en realidad es un sistema de control de versiones distribuido, lo cual significa que se realiza una copia completa del repositorio que contiene la base de código en tu computadora (y en la de todos los demás). Realizas cambios en tu propia copia, y luego empujas esos cambios nuevamente al servidor, donde un administrador decidirá si fusiona tus cambios con la copia maestra.

+
+ +

¿Quieres convertirte en un desarrollador web front-end?

+ +

Hemos preparado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.

+ +
+

Comenzar

+
+ +

Prerequisitos

+ +

Para usar Git y GitHub, necesitas:

+ + + +

En términos de conocimiento previo, no necesitas saber nada sobre desarrollo web, Git/GitHub o VCS para iniciar este módulo. Sin embargo, se recomienda que conozcas algo de codificación para que tengas conocimientos informáticos razonables y algún código para almacenar en tus repositorios.

+ +

También es preferible que tengas algunos conocimientos básicos de la terminal, por ejemplo, moverte entre directorios, crear archivos y modificar la variable del sistema PATH.

+ +
+

Nota: Github no es el único sitio/conjunto de herramientas que puedes usar con Git. Hay otras alternativas, como GitLab, que podrías probar, y también podrías intentar configurar tu propio servidor Git y usarlo en lugar de GitHub. Solo nos hemos quedado con GitHub en este curso para proporcionar una forma única que funciona.

+
+ +

Guías

+ +

Ten en cuenta que los enlaces a continuación te llevan a recursos en sitios externos. Eventualmente intentaremos tener nuestro propio curso Git/GitHub dedicado, pero por ahora, esto te ayudará a familiarizarte con el tema en cuestión.

+ +
+
Hola mundo (de GitHub)
+
Este es un buen lugar para comenzar: esta guía práctica te permite comenzar a usar GitHub, aprender los conceptos básicos de Git, como crear repositorios y ramas, realizar confirmaciones, abrir y fusionar solicitudes de extracción.
+
Manual de Git (en GitHub)
+
Este Manual de Git profundiza un poco más, explicando qué es un VCS, qué es un repositorio, cómo funciona el modelo básico de GitHub, comandos y ejemplos de Git, y más.
+
Bifurcación de proyectos (de GitHub)
+
Bifurcar proyectos es esencial cuando deseas contribuir al código de otra persona. Esta guía explica cómo.
+
Acerca de las solicitudes de extracción (de GitHub)
+
Una útil guía para administrar las solicitudes de extracción, la forma en que los cambios de código sugeridos se entregan a los repositorios de las personas para su consideración.
+
Dominando las incidencias (de GitHub)
+
Las incidencias son como un foro para tu proyecto GitHub, donde las personas pueden hacer preguntas e informar problemas, y tú puede administrar las actualizaciones (por ejemplo, asignar personas para solucionar problemas, aclarar el problema, informar a las personas que las cosas están solucionadas). Este artículo te brinda lo que necesitas saber sobre las incidencias.
+
+ +
+

Nota: Hay mucho más que puedes hacer con Git y GitHub, pero creemos que lo anterior representa lo mínimo que necesitas saber para comenzar a usar Git de manera efectiva. A medida que profundices en Git, comenzarás a darte cuenta de que es fácil equivocarse cuando comienzas a usar comandos más complicados. No te preocupes, incluso los desarrolladores web profesionales encuentran a Git confuso a veces, y a menudo resuelven problemas buscando soluciones en la web, o consultando sitios como Reglas de vuelo para Git y Dangit, ¡git!

+
+ +

Ve también

+ + diff --git a/files/es/learn/herramientas_y_pruebas/index.html b/files/es/learn/herramientas_y_pruebas/index.html new file mode 100644 index 0000000000..a147c98f65 --- /dev/null +++ b/files/es/learn/herramientas_y_pruebas/index.html @@ -0,0 +1,58 @@ +--- +title: Herramientas y pruebas +slug: Learn/Herramientas_y_pruebas +tags: + - Accesibilidad + - Aprender + - Aterrizaje + - CSS + - CodificaciónDeSecuenciasDeComandos + - HTML + - Herramientas + - JavaScript + - Navegador cruzado + - Principiante + - Pruebas de usuario + - Tema + - Testing + - automatización +translation_of: Learn/Tools_and_testing +--- +
+

{{LearnSidebar}}

+ +

Una vez que haya comenzado a sentirse cómodo programando con tecnologías web básicas (como HTML, CSS y JavaScript), y comience a adquirir más experiencia, leer más recursos y aprender más trucos y consejos, comenzará a encontrar todos tipo de herramientas, desde CSS y JavaScript ya enrollados, aplicaciones de prueba y automatización, y muchas más. A medida que sus proyectos web se vuelvan más grandes y complejos, querrá comenzar a aprovechar algunas de estas herramientas y elaborar planes de prueba confiables para su código. Esta parte del área de aprendizaje tiene como objetivo brindarle lo que necesita para comenzar y tomar decisiones informadas.

+
+ +

 

+ +

{{LearnSidebar}}

+ +

La industria de la web es un lugar emocionante para trabajar, pero no está exenta de complicaciones. Las tecnologías principales que utilizamos para crear sitios web son bastante estables ahora, pero se están agregando nuevas características todo el tiempo, y nuevas herramientas, que facilitan el trabajo con estas tecnologías y están construidas sobre estas tecnologías, aparecen constantemente. Además de eso, todavía tenemos que mantener la compatibilidad entre navegadores en la parte superior de nuestras mentes y asegurarnos de que nuestro código sigue las mejores prácticas que permiten que nuestros proyectos funcionen en diferentes navegadores y dispositivos que nuestros usuarios utilizan para navegar por la Web, y ser utilizable por personas con discapacidad.

+ +

Determinar qué herramientas debería usar puede ser un proceso difícil, por lo que hemos escrito este conjunto de artículos para informarle qué tipos de herramientas están disponibles, qué pueden hacer por usted y cómo hacer uso de los favoritos actuales de la industria.

+ +

 

+ +
+

Nota: Debido a que aparecen nuevas herramientas y las antiguas pasan de moda todo el tiempo, hemos redactado deliberadamente este material para que sea lo más neutral posible. Queremos enfocarnos ante todo en los tipos generales de tareas que estas herramientas lo ayudarán a lograr. y seguir prescribiendo herramientas específicas al mínimo. Obviamente, necesitamos mostrar el uso de las herramientas para demostrar técnicas específicas, pero ten en cuenta que no necesariamente recomendamos estas herramientas como la mejor o la única forma de hacer las cosas; en la mayoría de los casos, existen otras formas, pero queremos brindarte una idea clara. Metodología que funciona.

+
+ +

Camino de aprendizaje

+ +

 

+ +

Debería aprender los conceptos básicos de los lenguajes HTML, CSS, y JavaScript antes de intentar usar las herramientas que se detallan aquí. Por ejemplo, deberá conocer los fundamentos de estos idiomas antes de comenzar a depurar problemas en códigos web complejos, o hacer un uso efectivo de las bibliotecas de JavaScript, o escribir pruebas y ejecutarlas en su código utilizando corredores de prueba, etc.

+ +

Primero necesitas una base sólida.

+ +

 

+ +

Módulos

+ +
+
Herramientas de desarrollo web en el mundo real (TBD)
+
En este módulo, exploramos los diferentes tipos de herramientas de desarrollo web disponibles. Esto incluye la revisión de los tipos de tareas más comunes a las que se le puede pedir que resuelva, cómo pueden encajar en un flujo de trabajo y las mejores herramientas disponibles actualmente para llevar a cabo esas tareas.
+
Pruebas de navegadores cruzados
+
Este módulo analiza específicamente el área de prueba de proyectos web en diferentes navegadores. Aquí vemos cómo identificar a su público objetivo (por ejemplo, qué usuarios, navegadores y dispositivos necesita preocuparse más), cómo realizar las pruebas, los principales problemas que enfrentará con los diferentes tipos de código y cómo solucionar o mitigue esos problemas, qué herramientas son más útiles para ayudarlo a probar y solucionar problemas, y cómo utilizar la automatización para acelerar las pruebas.
+
diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html new file mode 100644 index 0000000000..e9bdd36eca --- /dev/null +++ b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/index.html @@ -0,0 +1,133 @@ +--- +title: Entendiendo los frameworks de JavaScript del lado del cliente +slug: Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks +tags: + - Aprender + - Principiante +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks +--- +
{{LearnSidebar}}
+ +

Los frameworks de JavaScript son una parte esencial del desarrollo web front-end moderno, los cuales proveen a los desarrolladores herramientas probadas y testeadas para la creación de aplicaciones web interactivas y escalables. Muchas empresas modernas utilizan frameworks como parte estándar de sus herramientas, por lo que muchos trabajos de desarrollo front-end en la actualidad requieren experiencia en frameworks.

+ +

Como aspirante a desarrollador front-end, puede resultar difícil saber por dónde empezar cuando se trata de aprender sobre frameworks; hay muchos frameworks diferentes para elegir, nuevas opciones surgen todo el tiempo. En su mayoría funcionan de forma similar, pero hacen algunas cosas de manera diferente, y hay algunas cosas específicas con las que se debe tener cuidado a la hora de usar frameworks.

+ +

En esta serie de artículos, tenemos como objetivo brindarte un punto de partida cómodo que te sirva de ayuda para comenzar a aprender sobre frameworks. Nuestra intención no es enseñarte, de manera exhaustiva, todo lo que se necesita saber sobre React/ReactDOM, o Vue, o algún otro framework en específico; la documetación de los equipos de los frameworks (entre otros recursos) ya cumplen esta función. En su lugar, queremos brindarte respaldo y responder primero a preguntas más fundamentales como:

+ + + +

Después de esto, proveeremos algunos tutoriales que cubren los aspectos básicos de algunos de los diferentes frameworks que existen, de manera que puedas tener el contexto y la familiaridad suficientes para poder empezar a profundizar por tu propia cuenta. Queremos que avances y aprendas sobre los frameworks de manera pragmática, de forma tal que se tengan presente las buenas prácticas esenciales de la plataforma web, como lo es la accesibilidad.

+ +

Empieza ahora con "Introducción a los frameworks del lado del cliente"

+ +

Prerrequisitos

+ +

Antes de intentar aprender sobre los frameworks del lado del cliente, es recomendable que conozcamos los conceptos básicos de los principales lenguajes de la web: HTML, CSS, y —especialmente— JavaScript.

+ +

Como resultado, tu código será más consistente y profesional, por lo que podrás solucionar problemas con mayor confianza si comprende las características fundamentales de la plataforma web sobre las que se basan los frameworks.

+ +

Guías introductorias

+ +
+
1. Introducción a los frameworks del lado del cliente
+
Comenzamos nuestro estudio sobre los frameworks con una descripción general del área, repasando un poco de historia sobre JavaScript y los frameworks, por qué estos existen, y qué nos brindan; por donde empezar al momento de escoger un framework por aprender y qué alternativas existen a los frameworks del lado del cliente.
+
2. Características principales de los frameworks
+
Cada framework destacado de JavaScript tiene un enfoque diferente para actualizar el DOM, manejar los eventos del navegador, y brindarte una experiencia de desarrollo satisfactoria. En este artículo, exploraremos las características principales de "los cuatro grandes" frameworks, observando cómo estos tienden a operar desde un nivel alto, al igual que las diferencias entre ellos.
+
+ +

Tutoriales de React

+ +
+

Nota: Los tutoriales de React se probaron por última vez en mayo de 2020, con React/ReactDOM 16.13.1 y create-react-app 3.4.1.

+ +

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación React en nuestro repositorio todo-react. Para una versión en vivo, consulta https://mdn.github.io/todo-react-build/.

+
+ +
+
1. Primeros pasos en React
+
En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.
+
2. Comenzando con nuestra lista de tareas de React
+
Digamos que se nos ha encomendado la tarea de crear una prueba de concepto (Proof of Concept — PoC) en React: una aplicación que permita a los usuarios agregar, editar y eliminar tareas en las que se quiera trabajar, pero que también permita marcar las tareas como completadas sin eliminarlas. Este artículo te guiará en la organización de la estructura y los estilos básicos del componente App, de manera que esté listo para la definición e interactividad de componentes individuales, los cuales agregaremos más adelante.
+
3. Basando nuestra aplicación React en componentes
+
Hasta este momento, nuestra aplicación no hace gran cosa. Antes de que podamos hacerla funcionar, tenemos que dividirla en componentes descriptivos y manejables. React no tiene reglas estrictas para lo que, se considera o no, un componente, ¡eso depende de ti! En este artículo, te mostraremos una forma raznoable de dividir nuestra aplicación en componentes.
+
4. Interactividad en React: eventos y estado
+
Habiendo elaborado nuestro plan de componentes, es hora de comenzar a actualizar nuestra aplicación, para que pase de ser una interfaz de usuario completamente estática a una que nos permita, realmente, interactuar y cambiar las cosas. Es eso mismo lo que haremos en este artículo, profundizando en los eventos y el estado a medida que avancemos.
+
5. Interactividad en React: edición, filtrado, renderizado condicional
+
A medida que nos acercamos al final de nuestro viaje en React (al menos por ahora), agregaremos los toques finales a las áreas principales de funcionalidad en nuestra aplicación de lista de tareas. Esto incluye permitir la edición de tareas existentes y el filtrado de la lista de tareas entre todas las tareas, las completadas, y las incompletas. A lo largo del capítulo, veremos la renderización condicional de la interfaz de usuario.
+
6. Accesibilidad en React
+
En el artículo final de nuestro tutorial, nos enfocaremos en la accesibilidad (broma intencional), incluyendo la gestión del enfoque en React, la cual puede mejorar la usabilidad y reducir la confusión para usuarios que navegan tanto, a través de lectores de pantalla, como solo del teclado.
+
7. Recursos sobre React
+
En nuestro artículo final, te brindamos una lista de recursos sobre React, los cuales podrás utilizar para avanzar más en tu aprendizaje.
+
+ +

Tutoriales de Ember

+ +
+

Nota: Los tutoriales de Ember se probaron por última vez en mayo de 2020, con Ember/Ember CLI versión 3.18.0.

+ +

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Ember en nuestro repositorio ember-todomvc-tutorial. Para una versión en vivo, consulta https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (esto también incluye algunas características adicionales que no se cubren en este tutorial).

+
+ +
+
1. Primeros pasos en Ember
+
En nuestro primer artículo de Ember veremos cómo funciona Ember y para qué resulta útil, instalaremos la cadena de herramientas de Ember de manera local, crearemos una aplicación de muestra, y luego realizaremos una configuración inicial para prepararla para el desarrollo.
+
2. Estructura de una aplicación Ember y cómo se basa en componentes
+
En este artículo, continuaremos planificando la estructura de nuestra aplicación Ember TodoMVC, agregando el HTML necesario y luego dividiendo esa estructura HTML en componentes.
+
3. Interactividad de Ember: eventos, clases, y estado
+
En este punto, comenzaremos a agregar un poco de interactividad a nuestra aplicación, dándole la capacidad de agregar y mostrar nuevos elementos de tareas por hacer. A medida que avanzamos, veremos el uso de eventos en Ember, la creación de clases de componentes para contener código JavaScript que controle las funciones interactivas, y la configuración de un servicio para hacer seguimiento del estado de los datos de nuestra aplicación.
+
4. Interactividad de Ember: funcionalidad del footer, renderizado condicional
+
Ahora es momento de comenzar a abordar la funcionalidad del footer en nuestra aplicación. Aquí haremos que el contador de tareas pendientes se actualice de manera que muestre el número correcto de tareas pendientes por completar, y aplicaremos correctamente los estilos a las tareas completadas (es decir, aquellos donde la casilla de verificación ha sido marcada). También conectaremos nuestro botón "Borrar completados". A lo largo del capítulo, aprenderemos sobre el uso de la renderización condicional en nuestras plantillas.
+
5. Enrutamiento en Ember
+
En este artículo aprendemos sobre enrutamiento o el filtrado basado en URL, como a veces se lo denomina. Lo usaremos para proporcionar una URL única para cada una de las tres vistas de tareas: "Todas", "Activas" y "Completadas".
+
6. Recursos sobre y solución de problemas
+
En nuestro artículo final sobre Ember, te proporcionamos una lista de recursos que puedes utilizar para avanzar más en tu aprendizaje, además de información útil para la solución problemas y otra información.
+
+ +

Tutoriales de Vue

+ +
+

Nota: Los tutoriales de Vue se probaron por última vez en mayo de 2020, con Vue 2.6.11.

+ +

Si necesitas comparar tu código con nuestra versión, puedes encontrar una versión terminada de la muestra del código de la aplicación Vue en nuestro repositorio todo-vue. Para una verisón en vivo, consulta https://mdn.github.io/todo-vue/dist/.

+
+ +
+
1. Primeros pasos en Vue
+
A continuación, presentamos Vue, el tercero de nuestros frameworks. En este artículo, veremos un poco sobre el origen de Vue, aprenderemos cómo instalarlo y crear un nuevo proyecto, estudiaremos la estructura de alto nivel de todo el proyecto y de un componente individual, veremos cómo ejecutar el proyecto localmente y prepararlo para comenzar a construir nuestro ejemplo.
+
2. Creando nuestro primer componente de Vue
+
Ahora es momento de profundizar en Vue y crear nuestro propio componente personalizado: comenzaremos creando un componente para representar cada elemento en la lista de tareas. Durante el artículo, aprenderemos sobre algunos conceptos importantes, como llamar a componentes dentro de otros componentes, pasarles datos a través de props y guardar el estado de los datos.
+
3. Renderizando una lista de componentes de Vue
+
En este punto, tenemos un componente completamente funcional; ahora estamos listos para agregar varios componentes ToDoItem a nuestra aplicación. En este artículo, veremos cómo agregar un conjunto de datos de elementos de tareas a nuestro componente App.vue, el cual luego repasaremos en bucle, mostrando dentro de los componentes de ToDoItem mediante el uso de la directiva v-for.
+
4. Agregar una nueva forma de tareas pendientes: eventos, métodos y modelos de Vue
+
Ahora tenemos datos de muestra listos y un ciclo que toma cada bit de datos y lo renderiza dentro de un ToDoItem en nuestra aplicación. Lo que realmente necesitamos a continuación es la capacidad de permitirle a nuestros usuarios que introuduzcan sus propios elementos de tareas pendientes en la aplicación, y para ello, necesitaremos un <input> de texto, un evento para efectuar una vez se envíen los datos, un método por accionar al momento del envío para agregar los datos y volver a renderizar la lista, y un modelo para controlar los datos. Esto es lo que cubriremos en este artículo.
+
5. Agregando estilos a los componentes de Vue con CSS
+
Por fin ha llegado el momento de hacer que nuestra aplicación luzca un poco mejor. En este artículo, exploraremos las diferentes formas de agregar estilos a los componentes de Vue con CSS.
+
6. Usando propiedades calculadas de Vue
+
En este artículo, agregaremos un contador que muestre el número de tareas completadas, utilizando una función de Vue llamada propiedades calculadas. Estos funcionan de manera similar a los métodos, pero solo se vuelven a ejecutar cuando cambia una de sus dependencias.
+
7. Renderización condicional en Vue: editando tareas existentes
+
Ahora es momento de agregar una de las principales piezas de la funcionalidad que aún nos falta: la capacidad de editar tareas existentes. Para hacer esto, aprovecharemos las capacidades de renderizado condicional de Vue, es decir, v-if y v-else, los cuales nos permiten alternar entre la vista de una tarea existente y una vista de edición donde podremos actualizar las etiquetas de las tareas. También veremos cómo agregar funcionalidad para eliminar tareas.
+
8. Gestión de enfoque con Vue refs
+
Ya estamos cerca de terminar con Vue. La última funcionalidad a considerar es la gestión del enfoque, o dicho de otra manera, cómo podemos mejorar la accesibilidad de nuestra aplicación desde el teclado. Veremos el uso de Vue refs para manejar esto, una característica avanzada que nos permite tener acceso directo a los nodos DOM subyacentes debajo del DOM virtual, o acceso directo desde un componente a la estructura DOM interna de un componente interno.
+
9. Recursos sobre Vue
+
Ahora, completaremos nuestro estudio de Vue brindándote una lista de recursos que podrás utilizar para avanzar en tu aprendizaje, además de algunos otros consejos útiles.
+
+ +

¿Cuales frameworks hemos escogido?

+ +

Hacemos pública nuestra serie inicial de artículos con guías enfocadas en tres de los principales frameworks que existen: React/ReactDOM, Ember, y Vue. Esto se debe a varias un razones:

+ + + +

Queremos decir esto desde un principio: no hemos escogido los frameworks en los que nos estamos enfocando porque pensamos que son los mejores o porque los respaldamos de alguna manera. Simplemente, consideramos que obtienen una puntuación alta de acuerdo a los criterios anteriores.

+ +

Ten en cuenta que esperábamos poder incluir más frameworks en la publicación inicial, pero que decidimos publicar el contenido y agregar, más adelante, otras guías, en lugar de retrasarlo más. Si tu framework favorito no se encuentra listado en este contenido y te gustaría ayudar a cambiar esto, ¡no dudes en discutirlo con nosotros! Puedes contactarnos a través de Matrix, o Discourse, o enviarnos un correo electrónico a la lista mdn-admins.

diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html new file mode 100644 index 0000000000..09c28f11a9 --- /dev/null +++ b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/react_getting_started/index.html @@ -0,0 +1,476 @@ +--- +title: Primeros pasos en React +slug: >- + Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/React_getting_started +tags: + - Aprender + - Aprendiz + - Principiante +translation_of: >- + Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

En este artículo conoceremos React. Descubriremos algunos detalles sobre su trasfondo y casos de uso, configuraremos una cadena básica de herramientas para React en nuestra computadora local, crearemos y jugaremos con una aplicación inicial sencilla, mientras aprendemos —durante el proceso— un poco acerca de cómo funciona React.

+ + + + + + + + + + + + +
Prerrequisitos: +

Familiaridad con los lenguajes HTML, CSS, y JavaScript, conocimiento del terminal/línea de comandos.

+ +

React usa una sintaxis HTML-en-JavaScript llamada JSX (JavaScript y XML). Estar familiarizado con HTML y JavaScript te ayudará a aprender JSX, y a identificar —en una mejor manera— si los errores en tu aplicación están relacionados con JavaScript o con el más específico dominio de React.

+
Objetivo:Configurar un entorno de desarrollo local para React, crear una aplicación inicial, y entender los aspectos básicos de su funcionamiento.
+ +

Hola, React

+ +

Como su eslogan oficial señala, React es una biblioteca para construir interfaces de usuario. React no es un framework — ni siquiera se limita a la web. React es utilizado con otras bibliotecas para renderizar en ciertos entornos. Por ejemplo, React Native puede usarse para desarrollar aplicaciones móviles; React 360 permite crear aplicaciones de realidad virtual; además de otras posibilidades.

+ +

Al desarrollar para la web, los desarrolladores usan React en conjunto con ReactDOM. React y ReactDOM son, a menudo, considerados al igual que —y utilizados para resolver los mismo problemas que— otros verdaderos frameworks de desarrollo web. Cuando nos referimos a React como un "framework", estamos trabajando con este significado coloquial.

+ +

El objetivo principal de React es minimizar los errores que ocurren cuando los desarrolladores construyen interfaces de usuario. Esto lo hace mediante el uso de componentes — piezas de código lógicas y auto-contenidas que describen una parte de la interfaz del usuario. Estos componentes se pueden juntar para crear una interfaz de usuario completa, y React abstrae la mayor parte del trabajo de renderizado, permitiéndote enfocarte en el diseño de la interfaz.

+ +

Casos de uso

+ +

A diferencia de los otros frameworks vistos en este módulo, React no impone reglas estrictas sobre convenciones de código u organización de archivos. Esto le permite a los equipos establecer las convenciones que funcionen mejor para ellos y adoptar React de la manera en que deseen. React puede manejar un solo botón, algunas piezas de una interfaz o la interfaz de usuario completa de una aplicación.

+ +

Si bien React puede usarse para pequeñas piezas de una interfaz, no resulta tan sencillo "introducirlo" en una aplicación como sería el caso de una biblioteca como jQuery —o incluso de un framework, como Vue—, por lo que viene a ser más abordable cuando construimos una aplicación completamente con React.

+ +

Además, muchos de los beneficios de la experiencia del desarrollador de una aplicación React, como codificar interfaces con JSX, requieren un proceso de compilación. Agregar un compilador como Babel a un sitio web hace que el código se ejecute de manera lenta, por lo que los desarrolladores a menudo configuran dichas herramientas con un paso de compilación. Podrá decirse que React tiene un gran requisito de herramientas, pero se puede aprender.

+ +

Este artículo se enfocará en el caso de uso de usar React para renderizar la interfaz de usuario completa de una aplicación, usando herramientas proporcionadas por la propia herramienta de Facebook create-react-app.

+ +

¿Cómo React usa JavaScript?

+ +

React utiliza características modernas de JavaScript para muchos de sus patrones. El punto donde más se aleja de JavaScript se refleja en el uso de la sintaxis JSX, la que, a su vez, amplía la sintaxis de JavaScript para que código similar a HTML pueda formar parte del mismo. Por ejemplo:

+ +
const heading = <h1>Mozilla Developer Network</h1>;
+ +

Esta constante "heading" se conoce como una expresión JSX. React puede usarla para representar la etiqueta <h1> en nuestra aplicación.

+ +

Supongamos que, por razones semánticas, queremos envolver nuestro encabezado en una etiqueta <header>. El enfoque JSX nos permite anidar nuestros elementos entre sí, tal como lo hacemos con HTML:

+ +
const header = (
+  <header>
+    <h1>Mozilla Developer Network</h1>
+  </header>
+);
+ +
+

Nota: Los paréntesis en el fragmento anterior no son exclusivos de JSX y no tienen ningún efecto en la aplicación. Son una señal para ti (y tu computadora) de que las múltiples líneas de código que contiene forman parte de una misma expresión. También podríamos escribir la expresión del encabezado de esta manera:

+ +
const header = <header>
+    <h1>Mozilla Developer Network</h1>
+</header>
+ +

Sin embargo, esto luce un poco raro, ya que la etiqueta <header> que inicia la expresión no tiene sangría en la misma posición que su correspondiente etiqueta de cierre.

+
+ +

Por supuesto, tu navegador no puede leer JSX sin ayuda. Al compilarla (usando una herramienta como Babel o Parcel), nuestra expresión de encabezado se vería así:

+ +
const header = React.createElement("header", null,
+  React.createElement("h1", null, "Mozilla Developer Network")
+);
+ +

Es posible omitir el paso de la compilación y usar React.createElement() para codificar la interfaz de usuario tú mismo. Sin embargo, al hacer esto, perderías el beneficio declarativo de JSX y tu código resultaría más difícil de leer. La compilación es un paso adicional en el proceso de desarrollo, pero muchos desarrolladores de la comunidad React piensan que la legibilidad de JSX vale la pena. Además, las herramientas populares hacen que la compilación de JSX a JavaScript sea parte de su proceso de configuración. No tendrás que configurar la compilación tú mismo, a menos que así lo quieras.

+ +

Dado que JSX es una combinación de HTML y JavaScript, algunos desarrolladores lo encuentran intuitivo. Otros dicen que su naturaleza combinada lo hace confuso. Sin embargo, una vez que te sientas cómodo con JSX, te permitirá crear interfaces de usuario de forma más rápida e intuitiva, y permitirá que otros comprendan mejor tu base de código de un vistazo.

+ +

Para leer más sobre JSX, consulta el artículo JSX en profundidad del equipo de React.

+ +

Configurando tu primera aplicación React

+ +

Hay muchas maneras de usar React, pero usaremos la herramienta create-react-app de la interfaz de línea de comandos (CLI, por sus siglas en inglés), como se mencionó anteriormente, la cual acelera el proceso de desarrollo de una aplicación React al instalar algunos paquetes y crear algunos archivos por ti, manejando las herramientas descritas anteriormente.

+ +

Es posible agregar React a un sitio website sin usar create-react-app copiando algunos elementos <script> en un archivo HTML, pero la CLI de create-react-app es un punto de partida común para las aplicaciones React. Su uso te permitirá dedicar más tiempo a crear tu aplicación y menos a preocuparte por la configuración.

+ +

Requerimientos

+ +

Para usar create-react-app, necesitas tener instalado Node.js. Se recomienda utilizar la versión de soporte a largo plazo (LTS, por sus siglas en inglés). Node incluye npm (el administrador de paquetes de nodos), y npx (el ejecutor de paquetes de nodos).

+ +

También puedes usar el administrador de paquetes Yarn como alternativa, pero asumiremos que estarás usando npm en estos tutoriales. Consulta Conceptos básicos de administración de paquetes para obtener más información sobre npm y yarn.

+ +

Si estás usando Windows, necesitarás instalar algún software para darle paridad con el terminal Unix/macOS, y así poder usar los comandos del terminal mencionados en este tutorial. Gitbash (el cual viene como parte del conjunto de herramientas git para Windows) o el Subsistema de Windows para Linux (WSL, por sus siglas en inglés) son ambos adecuados. Consulte el Curso intensivo de línea de comandos para obtener más información sobre estos y sobre los comandos de terminal en general.

+ +

También ten en cuenta que React y ReactDOM producen aplicaciones que solo funcionan en un conjunto bastante moderno de navegadores (IE9+ a través de algunos polyfills). Se recomienda el uso de un navegador moderno como Firefox, Safari o Chrome cuando trabajes con estos tutoriales.

+ +

Además, consulta lo siguiente para obtener más información:

+ + + +

Inicializando tu aplicación

+ +

create-react-app recibe un argumento: el nombre que te gustaría darle a tu aplicación. create-react-app usa este nombre para crear una nueva carpeta, luego crea los archivos necesarios dentro de la misma. Asegúrate de cd al lugar donde te gustaría que se guarde tu aplicación en tu disco duro, luego ejecuta lo siguiente en tu terminal:

+ +
npx create-react-app moz-todo-react
+ +

Esto crea una carpeta moz-todo-react, y hace varias cosas dentro de la misma:

+ + + +
+

Nota: si tienes instalado el administrador de paquetes yarn, create-react-app lo usará por defecto en lugar de npm. Si tienes ambos administradores de paquetes instalados y quieres, explícitamente, usar npm, puedes agregar el indicador --use-npm cuando ejecutes create-react-app:

+ +
npx create-react-app moz-todo-react --use-npm
+
+ +

create-react-app mostrará una serie de mensajes en tu terminal mientras opera, ¡lo cual es normal! Esto puede tardar unos minutos, por lo que ahora podría ser un buen momento para preparar una taza de té.

+ +

Una vez completado el proceso, cd a la carpeta moz-todo-react y ejecuta el comando npm start. Los scripts instalados por create-react-app comenzarán a servirse en un servidor local en localhost:3000 y abrirán la aplicación en una nueva pestaña del navegador. Tu navegador mostrará algo como esto:

+ +

Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application

+ +

Estructura de la aplicación

+ +

create-react-app nos provee todo lo que necesitamos para desarrollar una aplicación React. Su estructura inicial de archivos luce así:

+ +
moz-todo-react
+├── README.md
+├── node_modules
+├── package.json
+├── package-lock.json
+├── .gitignore
+├── public
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+└── src
+    ├── App.css
+    ├── App.js
+    ├── App.test.js
+    ├── index.css
+    ├── index.js
+    ├── logo.svg
+    └── serviceWorker.js
+ +

La carpeta src es donde pasaremos la mayor parte de nuestro tiempo, ya que es donde reside el código fuente de nuestra aplicación.

+ +

La carpeta public contiene archivos que serán leidos por tu navegador mientras desarrollas la aplicación; el más importante de ellos es index.html. React introduce tu código en este archivo de manera que tu navegador pueda ejecutarlo. Hay alguno que otro marcado que ayuda a create-react-app a funcionar, así que ten cuidado de no editarlo a menos que sepas lo que estás haciendo. Deberías cambiar el texto dentro del elemento <title> en este archivo para reflejar el título de tu aplicación. ¡Los títulos de página precisos son importantes para la accesibilidad!

+ +

La carpeta public también será publicada cuando crees y despliegues una versión para producción de tu aplicación. No cubriremos el despliegue en este tutorial, pero deberías poder usar una solución similar a la descrita en nuestro tutorial Despliegue de nuestra aplicación.

+ +

El archivo package.json contiene información sobre nuestro proyecto que Node.js/npm usa para mantenerlo organizado. Este archivo no es exclusivo de las aplicaciones React; create-react-app simplemente lo completa. No es necesario que entiendas este archivo en lo absoluto para completar este tutorial, sin embargo, si deseas obtener más información al respecto, puedes leer What is the file `package.json`? en NodeJS.org; también hablamos de ello en nuestro tutorial Conceptos básicos de administración de paquetes.

+ +

Explorando nuestro primer componente React — <App/>

+ +

En React, un componente es un módulo reutilizable que representa una parte de nuestra aplicación. Estas partes pueden ser grandes o pequeñas, pero, generalmente, están bien definidas: tienen un propósito único y obvio.

+ +

Abramos src/App.js, ya que nuestro navegador nos pide que lo editemos. Este archivo contiene nuestro primer componente —App—, y algunas otras líneas de código:

+ +
import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+export default App;
+ +

El archivo App.js se compone de tres partes principales: algunas declaraciones import en la parte superior, el componente App en el medio, y una declaración export en la parte inferior. La mayoría de los componentes de React siguen este patrón.

+ +

Declaraciones import

+ +

Las declaraciones import en la parte superior del archivo le permiten a App.js utilizar código que ha sido definido en otra parte. Revisemos estas declaraciones más detalladamente.

+ +
import React from 'react';
+import logo from './logo.svg';
+import './App.css';
+ +

La primera declaración importa la biblioteca React como tal. Dado que React convierte el JSX que escribimos en React.createElement(), todos los componentes de React deben importar el módulo React. Si omites este paso, tu aplicación producirá un error.

+ +

La segunda declaración importa un logotipo de './logo.svg'. Observa el uso de ./ al principio de la ruta y la extensión .svg al final — estos nos indican que el archivo es local y que no es un archivo JavaScript. De hecho, el archivo logo.svg reside en nuestra carpeta raíz.

+ +

No hace falta proveer una ruta o extensión al importar el módulo React, ya que este no es un archivo local. En cambio, aparece como una dependencia en nuestro archivo package.json. ¡Ten cuidado con esta distinción mientras trabajas en esta lección!

+ +

La tercera declaración importa el CSS relacionado con nuestro componente App. Observa que no hay nombre de variable ni de directiva from. Esta sintaxis de importación en particular no es propia de la sintaxis de módulos de JavaScript. Esta proviene de Webpack, la herramienta que create-react-app usa para agrupar todos nuestros archivos JavaScript y enviarlos al navegador.

+ +

El componente App

+ +

Después de las importaciones, tenemos una función llamada App. Mientras que una mayor parte de la comunidad JavaScript prefiere nombres tipo camel-case como helloWorld, los componentes de React usan nombres de variables tipo pascal-case, como HelloWorld, para dejar en claro que un determinado elemento JSX es un componente de React y no una etiqueta HTML normal. Si llegaras a cambiar el nombre de la función App por app, tu navegador te mostraría un error.

+ +

Vamos a darle un vistazo más detallado a App.

+ +
function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+ +

La función App devuelve una expresión JSX. Esta expresión define lo que tu navegador presenta en última instancia al DOM.

+ +

Algunos elementos de la expresión tienen atributos, los cuales se escriben igual que en HTML, siguiendo un patrón de atributo="valor". En la línea 3, la etiqueta de apertura <div> tiene un atributo className. Este es equivalente al atributo class de HTML, pues dado que JSX es JavaScript, no podemos usar la palabra class —la cual está reservada—, lo que significa que JavaScript ya la usa para un propósito específico y causaría problemas en nuestro código. Algunos otros atributos HTML también se escriben de manera diferente en JSX (de como se escriben en HTML), por el mismo tipo de razón. Los revisaremos a medida que nos crucemos con estos.

+ +

Tómate un momento para cambiar la etiqueta <p> en la línea 6 para que diga "¡Hola, mundo!", luego guarda los cambios. Notarás que este cambio se procesa inmediatamente en el servidor de desarrollo que se ejecuta en http://localhost:3000 en tu navegador. Ahora elimina la etiqueta <a> y guarda los cambios; el enlace "Learn React" habrá desaparecido.

+ +

Ahora, tu componente App debería lucir así:

+ +
function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          ¡Hola, mundo!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Declaraciones export

+ +

En la parte inferior del archivo App.js, la declaración export default App hace que nuestro componente App esté disponible para otros módulos.

+ +

Explorando el index

+ +

Vamos a abrir el archivo src/index.js, ya que es en este donde el componente App está siendo utilizado. Este archivo es el punto de entrada para nuestra aplicación, e inicialmente luce así:

+ +
import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
+ +

Al gual que App.js, el archivo comienza importando todos los módulos JS y otros activos que necesita para ejecutarse. src/index.css contiene estilos globales que se aplican a toda nuestra aplicación. Podemos ver que nuestro componente App también es importado acá; su importación es posible gracias a la declaración export en la parte inferior de App.js.

+ +

En la línea 7, se invoca la función ReactDOM.render() de React con dos argumentos:

+ + + +

Todo esto le indica a React que queremos renderizar nuestra aplicación React con el componente App como raíz, o primer componente.

+ +
+

Nota: En JSX, los componentes de React y los elementos HTML deben tener, obligatoriamente, barras diagonales de cierre. Escribir solo <App> o solo <img> provocará un error.

+
+ +

Los Service workers son interesantes piezas de código que ayudan al rendimiento de las aplicaciones y permiten que las funciones de tus aplicaciones web funcionen sin conexión, pero estas no están dentro del alcance de este artículo. Puedes eliminar la línea 5, así como las líneas 9 a 12.

+ +

Finalmente, tu archivo index.js debería verse así:

+ +
import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+ +

Variables y props

+ +

A continuación, usaremos algunas de nuestras habilidades de JavaScript para lograr sentirnos un poco más cómodos editando componentes y trabajando con datos en React. Hablaremos sobre cómo se usan las variables dentro de JSX, e introduciremos props, que son una forma de pasar datos a un componente (al que luego se puede acceder usando variables).

+ +

Variables en JSX

+ +

De vuelta en App.js, enfoquémonos en la línea 9:

+ +
<img src={logo} className="App-logo" alt="logo" />
+ +

Aquí, el valor del atributo src de la etiqueta <img /> está entre llaves. Así es como JSX reconoce las variables. Al encontrarse con {logo}, React sabrá que nos referimos a la importación del logotipo en la línea 2 de nuestra aplicación, y luego recuperará el archivo del logo y lo renderizará.

+ +

Vamos a intentar crear una variable propia. Antes de la declaración return de App, agrega const subject = "React";. Tu componente App ahora debería verse así:

+ +
function App() {
+  const subject = "React";
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          ¡Hola, mundo!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Cambia la línea 8, de manera que se use la variable subject en vez de la palabra "mundo", así:

+ +
function App() {
+  const subject = "React";
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          ¡Hola, {subject}!
+        </p>
+      </header>
+    </div>
+  );
+}
+ +

Al guardar, tu navegador debería mostrar "¡Hola, React!" en vez de "¡Hola, mundo!"

+ +

Las variables son convenientes, pero la que acabamos de configurar no hace gran uso de las funciones de React. Es allí donde entran los props.

+ +

Props de componentes

+ +

Un prop es cualquier dato que se pasa a un componente de React. Los props se escriben dentro de las llamadas a los componentes y utilizan la misma sintaxis que los atributos HTML: prop="value". Abramos index.js y démosle a la llamada de nuestro <App/> su primer prop.

+ +

Agrega un prop de subject a la llamada del componente <App />, con un valor de Clarice. Al terminar, tu código debería verse similar a este:

+ +
ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
+ +

Volviendo a App.js, vamos a revisar nuevamente la función App como tal, la cual se lee así (acortando la declaración return por razones de brevedad):

+ +
function App() {
+  const subject = "React";
+  return (
+    // return statement
+  );
+}
+ +

Cambia la declaración de la función App de manera que tome props como un parámetro, y elimina la constante subject. Al igual que cualquier otro parámetro de una función, puedes pasar props a console.log() para imprimirlos en la consola de tu navegador. Continúa, haciendo esto antes de la declaración return, así:

+ +
function App(props) {
+  console.log(props);
+  return (
+    // return statement
+  );
+}
+ +

Guarda tu archivo y revisa la consola JavaScript de tu navegador. Deberías ver registrado algo como esto:

+ +
Object { subject: "Clarice" }
+ +

La propiedad subject del objeto corresponde al prop subject que agregamos a la llamada de nuestro componente <App />, y la cadena Clarice corresponde a su valor. Los props de componentes en React siempre se recopilan en objetos de esta manera.

+ +

Ahora que subject es uno de nuestros props, usémoslo en App.js. Cambia la constante subject de manera que, en vez de definirla como la cadena React, estés leyendo el valor de props.subject. También puedes eliminar console.log(), si así lo quieres.

+ +
function App(props) {
+  const subject = props.subject;
+  return (
+    // return statement
+  );
+}
+ +

Una vez guardes, la aplicación debería darte la bienvenida con un "¡Hola, Clarice!". Si regresas a index.js, editas el valor de subject, y guardas, el texto cambiará.

+ +

Resumen

+ +

Esto nos lleva al final de nuestra introducción a React, la cual incluye cómo instalarlo de manera local, cómo crear una aplicación inicial, y cómo funcionan los conceptos básicos. En el próximo artículo comenzaremos a construir nuestra primera aplicación como tal: una lista de tareas pendientes. Sin embargo, antes de ello, recapitulemos algunas de las cosas que hemos aprendido.

+ +

En React:

+ + + +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html new file mode 100644 index 0000000000..ea24ac2a81 --- /dev/null +++ b/files/es/learn/herramientas_y_pruebas/lado-del-cliente_javascript_frameworks/vue_primeros_pasos/index.html @@ -0,0 +1,294 @@ +--- +title: Primeros pasos con Vue +slug: >- + Learn/Herramientas_y_pruebas/Lado-del-cliente_JavaScript_frameworks/Vue_primeros_pasos +translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+ +

Ahora vamos a introducir Vue, el tercero de nuestros frameworks. En este articulo vamos a ver un poco del background de Vue, aprenderemos cómo instalarlo y a crear un nuevo proyecto, estudiar la estructura de alto nivel de todo el proyecto y un componente individual, sabremos como correr el proyecto localmente, y tenerlo preparado para empezar a construir nuestro ejemplo.

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

Familiaridad con los motores de los lenguajes  HTML, CSS, y  JavaScript languages, conocimiento del terminal/command line.

+ +

Los componentes Vue son escritos como una combinacion de objectos Javascript que administran los datos de la app y una sintaxis de plantilla basada en HTML que se enlaza con la estructura DOM subyacente. Para la instalación, y para usar algunas de las caracteristicas mas avanzadas de Vue (como Componentes de archivos simples o renderizado de funciones), vas a necesitar un terminar con node + npm instalados.

+
Objetivo:Configurar un entorno de desarrollo local de Vue, crear una app de inicio y entender los principios de su funcionamiento.
+ +

Un Vue más claro

+ +

Vue es un framework moderno de Javascript que proveé facilidades muy utiles para el mejoramiento progresivo- al contrario de otros frameworks, puedes usar Vue para mejorar un HTML exstente. Esto permite usar Vue como un remplazo agregado para una libreria como JQuery.

+ +

Habiendo dicho esto, tambien puedes usar Vue para escribir completamente una aplicación de una sola página(SPAs).This allows you to create markup managed entirely by Vue, which can improve developer experience and performance when dealing with complex applications. It also allows you to take advantage of libraries for client-side routing and state management when you need to. Additionally, Vue takes a "middle ground" approach to tooling like client-side routing and state management. While the Vue core team maintains suggested libraries for these functions, they are not directly bundled into Vue. This allows you to select a different routing/state management library if they better fit your application.

+ +

In addition to allowing you to progressively integrate Vue into your applications, Vue also provides a progressive approach to writing markup. Like most frameworks, Vue lets you create reusable blocks of markup via components. Most of the time, Vue components are written using a special HTML template syntax. When you need more control than the HTML syntax allows, you can write JSX or plain JavaScript functions to define your  components.

+ +

As you work through this tutorial, you might want to keep the Vue guide and API documentation open in other tabs, so you can refer to them if you want more information on any sub topic.
+ For a good (but potentially biased) comparison between Vue and many of the other frameworks, see Vue Docs: Comparison with Other Frameworks.

+ +

Installation

+ +

To use Vue in an existing site, you can drop one of the following <script> elements onto a page. This allows you to start using Vue on existing sites, which is why Vue prides itself on being a progressive framework. This is a great option when migrating an existing project using a library like JQuery to Vue. With this method, you can use a lot of the core features of Vue, such as the attributes, custom components, and data-management.

+ + + +

However, this approach has some limitations. To build more complex apps, you’ll want to use the Vue NPM package. This will let you use advanced features of Vue and take advantage of bundlers like WebPack. To make building apps with Vue easier, there is a CLI to streamline the development process. To use the npm package & the CLI you will need:

+ +
    +
  1. Node.js 8.11+ installed.
    2. +
  2. npm or yarn.
    3. +
+ +
+

Note: If you don't have the above installed, find out more about installing npm and Node.js here.

+
+ +

To install the CLI, run the following command in your terminal:

+ +
npm install --global @vue/cli
+ +

Or if you'd prefer to use yarn:

+ +
yarn global add @vue/cli
+ +

Once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>. The CLI will then give you a list of project configurations you can use. There are a few preset ones, and you can make your own. These options let you configure things like TypeScript, linting, vue-router, testing, and more.

+ +

We’ll look at using this below.

+ +

Initializing a new project

+ +

To explore various features of Vue, we will be building up a sample todo list app. We'll begin by using the Vue CLI to create a new app framework to build our app into. Follow the steps below:

+ +
    +
  1. In terminal, cd to where you'd like to create your sample app, then run vue create moz-todo-vue.
    2. +
  2. Use the arrow keys and Enter to select the "Manually select features" option.
    3. +
  3. The first menu you’ll be presented with allows you to choose which features you want to include in your project. Make sure that "Babel" and "Linter / Formatter" are selected. If they are not, use the arrow keys and the space bar to toggle them on. Once they are selected, press Enter to proceed.
    4. +
  4. Next you’ll select a config for the linter / formatter. Navigate to "Eslint with error prevention only" and hit Enter again. This will help us catch common errors, but not be overly opinionated.
    5. +
  5. Next you are asked to configure what kind of automated linting we want. Select "Lint on save". This will check for errors when we save a file inside the project. Hit Enter to continue.
    6. +
  6. Now, you will select how we want your config files to be managed. "In dedicated config files" will put your config settings for things like ESLint into their own, dedicated files. The other option, "In package.json", will put all of your config settings into the app's package.json file. Select "In dedicated config files" and push Enter.
    7. +
  7. Finally, you are asked if you want to save this as a preset for future options. This is entirely up to you. If you like these settings over the existing presets and want to use them again, type y , otherwise type n.
    8. +
+ +

The CLI will now begin scaffolding out your project, and installing all of your dependencies.

+ +

If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag --packageManager=<package-manager>, when you run vue create.  So if you wanted to create the moz-todo-vue project with npm and you'd previously chosen yarn, you’d run vue create moz-todo-vue --packageManager=npm.

+ +
+

Note: We've not gone over all of the options here, but you can find more information on the CLI in the Vue docs.

+
+ +

Project structure

+ +

If everything went successfully, the CLI should have created a series of files and directories for your project. The most significant ones are as follows:

+ + + +
+

Note: Depending on the options you select when creating a new project, there might be other directories present (for example, if you choose a router, you will also have a views directory).

+
+ +

.vue files (single file components)

+ +

Like in many front-end frameworks, components are a central part of building apps in Vue. These components let you break a large application into discrete building blocks that can be created and managed separately, and transfer data between each other as required. These small blocks can help you reason about and test your code.

+ +

While some frameworks encourage you to separate your template, logic, and styling code into separate files, Vue takes the opposite approach. Using Single File Components, Vue lets you group your templates, corresponding script, and CSS all together in a single file ending in .vue. These files are processed by a JS build tool (such as Webpack), which means you can take advantage of build-time tooling in your project. This allows you to use tools like Babel, TypeScript, SCSS and more to create more sophisticated components.

+ +

As a bonus, projects created with the Vue CLI are configured to use .vue files with Webpack out of the box. In fact, if you look inside the src folder in the project we created with the CLI, you'll see your first .vue file: App.vue.

+ +

Let's explore this now.

+ +

App.vue

+ +

Open your App.vue file — you’ll see that it has three parts: <template>, <script>, and <style>, which contain the component’s template, scripting, and styling information. All Single File Components share this same basic structure.

+ +

<template> contains all the markup structure and display logic of your component. Your template can contain any valid HTML, as well as some Vue-specific syntax that we'll cover later.

+ +
+

Note: By setting the lang attribute on the <template> tag, you can use Pug template syntax instead of standard HTML — <template lang="pug">. We'll stick to standard HTML through this tutorial, but it is worth knowing that this is possible.

+
+ +

<script> contains all of the non-display logic of your component. Most importantly, your <script> tag needs to have a default exported JS object. This object is where you locally register components, define component inputs (props), handle local state, define methods, and more. Your build step will process this object and transform it (with your template) into a Vue component with a render() function.

+ +

In the case of App.vue, our default export sets the name of the component to app and registers the HelloWorld component by adding it into the components property. When you register a component in this way, you're registering it locally. Locally registered components can only be used inside the components that register them, so you need to import and register them in every component file that uses them. This can be useful for bundle splitting/tree shaking since not every page in your app necessarily needs every component.

+ +
import HelloWorld from './components/HelloWorld.vue';
+
+export default {
+  name: 'app',
+  components: {
+    //You can register components locally here.
+    HelloWorld
+  }
+};
+ +
+

Note: If you want to use TypeScript syntax, you need to set the lang attribute on the <script> tag to signify to the compiler that you're using TypeScript — <script lang="ts">.

+
+ +

<style> is where you write your CSS for the component. If you add a scoped attribute — <style scoped> — Vue will scope the styles to the contents of your SFC. This works similar to CSS-in-JS solutions, but allows you to just write plain CSS.

+ +
+

Note: If you select a CSS pre-processor when creating the project via the CLI, you can add a lang attribute to the <style> tag so that the contents can be processed by Webpack at build time. For example, <style lang="scss"> will allow you to use SCSS syntax in your styling information.

+
+ +

Running the app locally

+ +

The Vue CLI comes with a built-in development server. This allows you to run your app locally so you can test it easily without needing to configure a server yourself. The CLI adds a serve command to the project’s package.json file as an npm script, so you can easily run it.

+ +

In your terminal, try running npm run serve (or yarn serve if you prefer yarn). Your terminal should output something like the following:

+ +
INFO  Starting development server...
+98% after emitting CopyPlugin
+
+ DONE  Compiled successfully in 18121ms
+
+  App running at:
+  - Local:   <http://localhost:8080/>
+  - Network: <http://192.168.1.9:8080/>
+
+  Note that the development build is not optimized.
+  To create a production build, run npm run build.
+ +

If you navigate to the “local” address in a new browser tab (this should be something like http://localhost:8080 as stated above, but may vary based on your setup), you should see your app. Right now, it should contain a welcome message, a link to the Vue documentation, links to the plugins you added when you initialized the app with your CLI, and some other useful links to the Vue community and ecosystem.

+ +

default vue app render, with vue logo, welcome message, and some documentation links

+ +

Making a couple of changes

+ +

Let's make our first change to the app — we’ll delete the Vue logo. Open the App.vue file, and delete the <img> element from the template section:

+ +
<img alt="Vue logo" src="./assets/logo.png">
+ +

If your server is still running, you should see the logo removed from the rendered site almost instantly. Let’s also remove the HelloWorld component from our template.

+ +

First of all delete this line:

+ +
<HelloWorld msg="Welcome to Your Vue.js App"/>
+ +

If you save your App.vue file now, the rendered app will throw an error because we’ve registered the component but are not using it. We also need to remove the lines from inside the <script> element that import and register the component:

+ +

Delete these lines now:

+ +
import HelloWorld from './components/HelloWorld.vue'
+ +
components: {
+  HelloWorld
+}
+ +

Your rendered app should no longer show an error, just a blank page, as we currently have no visible content inside <template>.

+ +

Let’s add a new <h1> inside <div id="app">. Since we’re going to be creating a todo list app below, let's set our header text to "To-Do List". Add it like so:

+ +
<template>
+  <div id="app">
+    <h1>To-Do List</h1>
+  </div>
+</template>
+ +

App.vue will now show our heading, as you'd expect.

+ +

Summary

+ +

Let's leave this here for now. We've learnt about some of the ideas behind Vue, created some scaffolding for our example app to live inside, inspected it, and made a few preliminary changes.

+ +

With a basic introduction out of the way, we'll now go further and build up our sample app, a basic Todo list application that allows us to store a list of items, check them off when done, and filter the list by all, complete, and incomplete todos.

+ +

In the next article we'll build our first custom component, and look at some important concepts such as passing props into it and saving its data state.

+ +

{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}

+ +

In this module

+ + diff --git a/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html b/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html new file mode 100644 index 0000000000..6221b0382f --- /dev/null +++ b/files/es/learn/herramientas_y_pruebas/understanding_client-side_tools/index.html @@ -0,0 +1,46 @@ +--- +title: Understanding client-side web development tools +slug: Learn/Herramientas_y_pruebas/Understanding_client-side_tools +tags: + - Aprender + - CSS + - Despliegue + - HTML + - Herramientas + - JavaScript + - Novatos + - Transformación + - client-side + - lado del cliente +translation_of: Learn/Tools_and_testing/Understanding_client-side_tools +--- +
{{LearnSidebar}}
+ +

Las herramientas del lado del cliente (client-side en inglés) pueden ser intimidantes, pero esta serie de artículos tiene como propósito ilustrar el propósito de algunos de los tipos de herramientas client-side, explicar las herramientas que puedes integrar, cómo instalarlas usando administradores de paquetes y cómo controlarlas usando la línea de comandos. Terminanos esta sección dando un ejemplo de cadena de herramientas para mostrarte cómo puedes ser más productivo

+ +

Inicia ahora con nuestra "Introducción a las herraminetas client-side"

+ +

Requisitos previos

+ +

Debes aprender el núcleo básico de los lenguajes HTML, CSS y JavaScript, antes de intentar usar las herramientas aquí descritas.

+ +
+

¿Quieres convertirte en un desarrollador front-end?

+ +

Tenemos un curso que incluye toda la información esencial que necesitas para lograr tu objetivo.

+Inicia ahora
+ +

Guías

+ +
+
1. Introducción a las herramientas client-side
+
En este artículo damos una introducción a las herramientas modernas de la web, los tipos de herramientas disponibles, donde te las puedes encontrar en el cliclo de desarrollo de aplicaciones web y como buscar ayuda con las herramientas individuales.
+
2. Introducción a la linea de comandos
+
En tu proceso de desarrollo seguramente vas a requeria correr algunos comandos en la terminal (o "línea de comandos"). Este artículo da una introducción a la terminal, los comandos básicos que vas a necesitar para utilizarla, cómo integrar diferentes comandos y cómo agregar tu propia interfaz de línea de comandos (command line interface - CLI en inglés).
+
3. Introducción al manejo de paquetes
+
En este artículo exploramos los sistemas de administración de paquetes en detalle para entender cómo los podemos usar en nuestros proyectos, ya sea para instalar dependencias a nuestro proyecto, descargar actualizaciones y mucho más.
+
4. Introduciendo una cadena de herramientas completa
+
En los últimos dos artículos en esta serie vamos a solidificar tu conocimiento de las herramientas para el desarrollo web construyendo una cadena de herramients. Iniciaremos configurando un ambiente de desarrollo y colocando herramentas de transformación para desplegar nuestra aplicación en Netlify. En este artículo introducimos un estudio de caso, configuramos nuestro ambiente de desarrollo y configuramos herramientas de transformación de código.
+
5. Desplegando nuestra aplicación
+
En el artículo final de esta serie, utilizamos nuestra cadena de herramientas que construimos en el artículo previo y la extendemos para desplegar nuestra aplicación muestra. Subimos nuestro código a GitHub, desplegamos usando Netlify e incluso te enseñamos a realizar una prueba en el proceso.
+
diff --git a/files/es/learn/html/como/index.html b/files/es/learn/html/como/index.html new file mode 100644 index 0000000000..095e5bc54e --- /dev/null +++ b/files/es/learn/html/como/index.html @@ -0,0 +1,141 @@ +--- +title: Solución de problemas comunes de HTML +slug: Learn/HTML/como +tags: + - CodificacióndeSecuenciadeComandos + - HTML +translation_of: Learn/HTML/Howto +--- +

{{LearnSidebar}}

+ +

Los siguientes enlaces brindan soluciones puntuales a los problemas más comunes a los que te enfrentarás a diario en HTML.

+ +
+
+

Estructura básica

+ +

La principal aplicación de HTML es la estructuración del documento. Si eres nuevo en HTML debes empezar aquí.

+ + + +

Semántica básica textos

+ +

HTML se especializa en suministrar información semántica del documento, así que HTML soluciona muchas dudas que puede tener sobre como transmitir su mensaje a través de un documento.

+ + +
+ +
+

Hipervínculos

+ +

Uno de las principales razones por las que HTML hace más fácil la navegación son los {{Glossary("hyperlink", "hipervínculos")}}, que pueden ser usados de diferentes formas:

+ + + +

Imágenes y multimedia

+ + + +

Scripts y estilización

+ +

HTML únicamente define la estructura del documento. Para solucionar los problemas de presentación usamos {{glossary("CSS")}}, o usamos scripts para hacer la página interactiva.

+ + + +

Contenido integrado

+ + +
+
+ +

Problemas avanzados o raros

+ +

Más allá de lo basico, HTML es muy rico y ofrece características avanzadas para solucionar problemas complejos. Estos artículos te ayudarán a abordar estos casos menos comunes:

+ +
+
+

Formularios

+ +

Los formularios son una estructura compleja en HTML para enviar datos desde una pagina web al servidor. Te animamos a que revises la guia completa. Aquí es por donde deberías empezar:

+ + + +

Información tabular

+ +

Alguna información, llamada datos tabulares, necesita ser organizada en tablas mediante filas y columnas. Siendo ésta una de las estructuras más complejas de HTML, no es fácil dominarla:

+ + + +

Representación de datos

+ + + +

Rendimiento

+ + +
+ +
+

Semántica avanzada de texto

+ + + +

Imágenes y multimedia avanzada

+ + + +

Internacionalización

+ +

HTML no es monolingüe. Éste proporciona herramientas para manejar problemas comunes de internacionalización.

+ + +
+
+ +

     

diff --git a/files/es/learn/html/como/usando_atributos_de_datos/index.html b/files/es/learn/html/como/usando_atributos_de_datos/index.html new file mode 100644 index 0000000000..7629974833 --- /dev/null +++ b/files/es/learn/html/como/usando_atributos_de_datos/index.html @@ -0,0 +1,75 @@ +--- +title: Uso de atributos de datos +slug: Learn/HTML/como/Usando_atributos_de_datos +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 está diseñado de forma tal que sea fácil extender los datos asociados a un elemento en particular sin necesidad de que tengan un significado definido. Los atributos data-*  permiten almacenar información adicional sobre un elemento HTML cualquiera sin tener que recurrir a artilugios tales como la utilización de atributos no estándar, propiedades adicionales en el DOM o {{domxref("Node.setUserData()")}}.

+ +

Sintaxis HTML

+ +

La sintáxis es simple. Un atributo cualquiera cuyo nombre comience con data-es un atributo de datos. Supongamos que tenemos un artículo y deseamos almacenar información adicional que no tiene ninguna representación visual. En ese caso, alcanza con que hagamos uso de los atributos data:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

Acceso a través de JavaScript

+ +

Leer los valores de estos atributos en JavaScript también es muy sencillo. Puede usar {{domxref("Element.getAttribute", "getAttribute()")}} con su nombre HTML completo para leerlos, pero el estándar define una forma más simple: un {{domxref("DOMStringMap")}} puede leer a través de una propiedad {{domxref("HTMLElement.dataset", "dataset")}}.

+ +

Para obtener un atributo data a través del dataset del objeto, obtenga la propiedad por la parte del nombre del atributo despues de data- (tenga en cuenta que los guiones son convertidos en camelCase).

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

Cada propiedad es una cadena y se puede leer y escribir. En el caso anterior, establecer article.dataset.columns = 5 cambiaría ese atributo a "5".

+ +

Acceso a través de CSS

+ +

Tenga en cuenta que, debido a que los atributos de datos son atributos simples de HTML, incluso puede acceder a ellos desde CSS. Por ejemplo, para mostrar los data-parent en el artículo, puede usar el contenido generado en CSS con la función {{cssxref("attr")}}:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

También puede usar los selectores de atributos en CSS para cambiar los estilos de acuerdo a las priopiedades de datos:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

Puede ver todo esto trabajando junto en este ejemplo de JSBin.

+ +

Los atributos de datos también se pueden almacenar para que contengan información que cambia constantemente, como los puntajes en un juego. Usando los selectores de CSS y el acceso a JavaScript aquí, esto le permite crear algunos efectos ingeniosos sin tener que escribir sus propias rutinas de visualización. Consulte este screencast para ver un ejemplo utilizando contenido generado y transacciones CSS (Ejemplo JSBin).

+ +

Los valores de datos son cadenas de caracteres. Los valores numéricos deben ser citados en el selector para que el estilo surta efecto.

+ +

Problemas

+ +

No almacene el contenido que debería ser visible y accesible en los atributos de datos, ya que las tecnologías de asistencia, no pueden acceder a ellos. Ademas, los rastreadores de búsqueda no pueden indexar los valores de los atributos de datos.

+ +

Los principales problemas a considerar son el soporte y rendimiento en Internet Explorer. Internet Explorer 11 y superiores, proporcionan soporte para el estándar, pero todas las versiones anteriores no son compatibles con dataset. Para admitir IE 10 e inferiores, debe acceder a los atributos de datos con {{domxref("Element.getAttribute", "getAttribute()")}} en su lugar. Ademas, el rendimiento de lectura de los atributos de datos en comparación con el almacenamiento de estos datos en un objeto JS normal es deficiente.

+ +

Dicho esto, sin embargo, para metadatos asociados a elementos personalizados, son una gran solución.

+ +

En Firefox 49.0.2 (y quizás versiones anteriores), los atributos de datos que exceden los 1022 caracteres no serán leídos por Javascript (EcmaScript 4).

+ +

Ver también

+ + diff --git a/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html b/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html new file mode 100644 index 0000000000..73ae6e6590 --- /dev/null +++ b/files/es/learn/html/forms/como_crear_widgets_de_formularios_personalizados/index.html @@ -0,0 +1,786 @@ +--- +title: Cómo crear widgets de formularios personalizados +slug: Learn/HTML/Forms/como_crear_widgets_de_formularios_personalizados +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
+ +

Hay muchos casos donde los widgets de formularios HTML disponibles simplemente no son suficientes. si desea establecer un estilo avanzado en algunos widgets como el elemento {{HTMLElement("select")}} o si desea proporcionar comportamientos personalizados, no tiene más opción que crear sus propios widgets.

+ +

En este aartículo, veremos cómo construir dicho widget. Para ello, trabajaremos con un ejemplo: Reconstruir el elemento {{HTMLElement("select")}}.

+ +
+

Nota: Nos enfocaremos en construir los widgets, no en cómo hacer que el código sea genérico y reutilizable; eso implicaría algún código JavaScript no trivial y manipulación del DOM en un contexto desconocido, y eso está fuera del alcance de este artículo.

+
+ +

Diseño, estructura, y semántica

+ +

Antes de crear un widget personalizado, debería iniciar por averiguar exactamente qué es lo que desea. Esto le ahorarrá tiempo considerable. En particular, es importante definir claramente todos los estados de su widget. Para hacer esto, es bueno comenzar con un widget existente, cuyos estados y comportamientos son bien conocidos, por lo que simplemente puede imitarlos tanto como sea posible.

+ +

En nuestro ejemplo, reconstruiremos el elemento {{HTMLElement("select")}}. Este es el resultado que queremos lograr:

+ +

The three states of a select box

+ +

Esta captura de pantall muestra los tres estados principales de nuestro widget: el estado normal (a la izquiera); el estado activo (en el centro) y el estado abierto (a la derecha).

+ +

En términos de comportamiento, queremos que nuestro widget sea utilizable tanto con un ratón como con un teclado, al igual que cualquier widget nativo. Comencemos por definir cómo el widget llega a cada estado:

+ +
+
El widget está en su estado normal cuando:
+
+
    +
  • La página carga
    • +
  • El widget estaba activo y el usuario hace clic en cualquier lugar fuera del widget
    • +
  • El widget estaba activo y el usuario mueve el foco a otro widget usando el teclado
    • +
+ +
+

Nota: Mover el foco al rededor de la página generalmente se hace presionando la tecla de tabulación, pero este no es el estándar en todas partes. Por ejemplo, el ciclo a través de enlaces en una página se realiza en Safari de forma predeterminada usando la combinación combinación Opction+Tab.

+
+
+
El widget está en su estado activo cuando:
+
+
    +
  • El usuario hace clic en él
    • +
  • El usuario presiona la tecla tab y obtiene foco
    • +
  • El widget estaba en su estado abierto y el usuario hace clic en el widget.
    • +
+
+
El widget está en su estado abierto cuando:
+
+
    +
  • El widget está en cualquier otro estado diferente a abierto y el usuario hace clic en él.
    • +
+
+
+ +

Una vez que sabemos cómo cambiar los estados, es importante definir cómo cambiar el valor del widget:

+ +
+
El valor cambia cuando:
+
+
    +
  • El usuario hace clic en una opción cuando el widget está en estado abierto
    • +
  • El usuario pulsa las teclas de flecha hacia arriba o hacia abajocuando el widget está en estado activo
    • +
+
+
+ +

Finalmente, definamos cómo se comportarán las opciones del widget:

+ + + +

Para los fines de nuestro ejemplo, nos detendremos con eso; sin embargo, si eres un lector cuidadoso, notarás que faltan algunos comportamientos. Por ejemplo, ¿qué crees que sucederá si el usuario pulsa la tecla de tabulación mientras el widget está en estado abierto? La respuesta es ... nada. OK, el comportamiento correcto parece obvio, pero el hecho es que, como no está definido en nuestras especificaciones, es muy fácil pasar por alto este comportamiento. Esto es especialmente cierto en un entorno de equipo cuando las personas que diseñan el comportamiento del widget son diferentes de las que lo implementan.

+ +

Otro ejemplo divertido: ¿qué pasará si el usuario pulsa las teclas de flecha hacia arriba o hacia abajo mientras el widget está en estado abierto? Este es un poco más complicado. Si considera que el estado activo y el estado abierto son completamente diferentes, la respuesta es nuevamente "no pasará nada" porque no definimos ninguna interacción de teclado para el estado abierto. Por otro lado, si considera que el estado activo y el estado abierto se superponen un poco, el valor puede cambiar pero la opción definitivamente no se resaltará en consecuencia, una vez más porque no definimos ninguna interacción del teclado sobre las opciones cuando el widget es en su estado abierto (solo hemos definido lo que debería suceder cuando se abre el widget, pero nada después de eso).

+ +

En nuestro ejemplo, las especificaciones faltantes son obvias, así que las manejaremos, pero puede ser un problema real en widgets nuevos y exóticos, para los cuales nadie tiene la menor idea de cuál es el comportamiento correcto. Por lo tanto, siempre es bueno pasar tiempo en esta etapa de diseño, porque si defines un comportamiento deficiente u olvidas definir uno, será muy difícil redefinirlo una vez que los usuarios se hayan acostumbrado. Si tiene dudas, solicite las opiniones de los demás y, si tiene el presupuesto para ello, no dude en realizar las pruebas de usuario. Este proceso se llama Diseño UX. Si desea obtener más información sobre este tema, debe consultar los siguientes recursos útiles:

+ + + +
+

Nota: Ademas, en la mayoría de los sistemas hay una forma de abrir el elemento {{HTMLElement("select")}} para ver todas las opciones disponibles (esto es lo mismo que hacer clic en el elemento {{HTMLElement("select")}} con un ratón). Esto se logra con Alt+Flecha abajo en Windows y no fué implementado en nuestro ejemplo —pero sería facil hacerlo, ya que el mecanismo ya se implementó para el evento clic.

+
+ +

Definiendo la estructura y semántica HTML

+ +

Ahora que se ha decidido la funcionalidad básica del widget, es hora de comenzar a construir nuestro widget. El primer paso es definir su estructura HTML y darle una semántica básica. Esto es lo que necesitamos para reconstruir un elemento {{HTMLElement("select")}}:

+ +
<!-- Este es nuestro contenedor principal para nuestro widget.
+     El atributo tabindex es lo que permite al usuario enforcar el widget.
+     Veremos más adelante que es mejor configurarlo a través de JavaScript. -->
+<div class="select" tabindex="0">
+
+  <!-- Este contenedor será usado para mostrar el valor actual del widget -->
+  <span class="value">Cherry</span>
+
+  <!-- Este contenedor contedrá todas las opciones disponibles para nuestro widget.
+       Como es una lista, tiene sentido usar el elemento ul. -->
+  <ul class="optList">
+    <!-- Cada opción solo contiene el valor que se mostrará, veremos más tarde
+         cómo manejar el valor real que será enviado con el formulario de datos -->
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+
+</div>
+ +

Tenga en cuanta el uso de nombres de clases; estos identifican cada parte relevante independientemente de los elementos HTML subyacentes reales utilizados. Esto es importante para garantizar que no vinculamos nuestro CSS y JavaScript a una estructura HTML sólida, de modo que podamos realizar cambios despues en la implementación sin romper el código que usa el widget. Pro ejemplo, si desea implementar el equivalente del elemento {{HTMLElement("optgroup")}}.

+ +

Creating the look and feel using CSS

+ +

Now that we have a structure, we can start designing our widget. The whole point of building this custom widget is to be able to style this widget exactly as we want. To that end, we will split our CSS work into two parts: the first part will be the CSS rules absolutely necessary to have our widget behave like a {{HTMLElement("select")}} element, and the second part will consist of the fancy styles used to make it look the way we want.

+ +

Required styles

+ +

The required styles are those necessary to handle the three states of our widget.

+ +
.select {
+  /* This will create a positioning context for the list of options */
+  position: relative;
+
+  /* This will make our widget become part of the text flow and sizable at the same time */
+  display : inline-block;
+}
+ +

We need an extra class active to define the look and feel of our widget when it is in its active state. Because our widget is focusable, we double this custom style with the {{cssxref(":focus")}} pseudo-class in order to be sure they will behave the same.

+ +
.select.active,
+.select:focus {
+  outline: none;
+
+  /* This box-shadow property is not exactly required, however it's so important to be sure
+     the active state is visible that we use it as a default value, feel free to override it. */
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

Now, let's handle the list of options:

+ +
/* The .select selector here is syntactic sugar to be sure the classes we define are
+   the ones inside our widget. */
+.select .optList {
+  /* This will make sure our list of options will be displayed below the value
+     and out of the HTML flow */
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

We need an extra class to handle when the list of options is hidden. This is necessary in order to manage the differences between the active state and the open state that do not exactly match.

+ +
.select .optList.hidden {
+  /* This is a simple way to hide the list in an accessible way,
+     we will talk more about accessibility in the end */
+  max-height: 0;
+  visibility: hidden;
+}
+ +

Beautification

+ +

So now that we have the basic functionality in place, the fun can start. The following is just an example of what is possible, and will match the screenshot at the beginning of this article. However, you should feel free to experiment and see what you can come up with.

+ +
.select {
+  /* All sizes will be expressed with the em value for accessibility reasons
+     (to make sure the widget remains resizable if the user uses the
+     browser's zoom in a text-only mode). The computations are made
+     assuming 1em == 16px which is the default value in most browsers.
+     If you are lost with px to em conversion, try http://riddle.pl/emcalc/ */
+  font-size   : 0.625em; /* this (10px) is the new font size context for em value in this context */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* We need extra room for the down arrow we will add */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* The first declaration is for browsers that do not support linear gradients.
+     The second declaration is because WebKit based browsers haven't unprefixed it yet.
+     If you want to support legacy browsers, try http://www.colorzilla.com/gradient-editor/ */
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* Because the value can be wider than our widget, we have to make sure it will not
+     change the widget's width */
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  vertical-align: top;
+
+  /* And if the content overflows, it's better to have a nice ellipsis. */
+  white-space  : nowrap;
+  text-overflow: ellipsis;
+}
+ +

We don't need an extra element to design the down arrow; instead, we're using the {{cssxref(":after")}} pseudo-element. However, it could also be implemented using a simple background image on the select class.

+ +
.select:after {
+  content : "▼"; /* We use the unicode caracter U+25BC; see http://www.utf8-chartable.de */
+  position: absolute;
+  z-index : 1; /* This will be important to keep the arrow from overlapping the list of options */
+  top     : 0;
+  right   : 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;  /* 20px */
+  padding-top : .1em; /* 1px */
+
+  border-left  : .2em solid #000; /* 2px */
+  border-radius: 0 .1em .1em 0;  /* 0 1px 1px 0 */
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}
+ +

Next, let's style the list of options:

+ +
.select .optList {
+  z-index : 2; /* We explicitly said the list of options will always overlap the down arrow */
+
+  /* this will reset the default style of the ul element */
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  /* This will ensure that even if the values are smaller than the widget,
+     the list of options will be as large as the widget itself */
+  min-width : 100%;
+
+  /* In case the list is too long, its content will overflow vertically
+     (which will add a vertical scrollbar automatically) but never horizontally
+     (because we haven't set a width, the list will adjust its width automatically.
+     If it can't, the content will be truncated) */
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}
+ +

For the options, we need to add a highlight class to be able to identify the value the user will pick (or has picked).

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

So here's the result with our three states:

+ + + + + + + + + + + + + + + + + + + +
Basic stateActive stateOpen state
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
Check out the source code
+ +

Bring your widget to life with JavaScript

+ +

Now that our design and structure are ready, we can write the JavaScript code to make the widget actually work.

+ +
+

Warning: The following code is educational and should not be used as-is. Among many things, as we'll see, it is not future-proof and it will not work on legacy browsers. It also has redundant parts that should be optimized in production code.

+
+ +
+

Note: Creating reusable widgets is something that can be a bit tricky. The W3C Web Component draft is one of the answers to this specific issue. The X-Tag project is a test implementation of this specification; we encourage you to take a look at it.

+
+ +

Why isn't it working?

+ +

Before we start, it's important to remember something very important about JavaScript: inside a browser, it's an unreliable technology. When you are building custom widgets, you'll have to rely on JavaScript because it's a necessary thread to tie everything together. However, there are many cases in which JavaScript isn't able to run in the browser:

+ + + +

Because of these risks, it's really important to seriously consider what will happen if JavaScript isn't working. Dealing in detail with this issue is out of the scope of this article because it's closely linked to how you want to make your script generic and reusable, but we'll consider the basics of this in our example.

+ +

In our example, if our JavaScript code isn't running, we'll fall back to displaying a standard {{HTMLElement("select")}} element. To achieve this, we need two things.

+ +

First, we need to add a regular {{HTMLElement("select")}} element before each use of our custom widget. This is actually also required in order to be able to send data from our custom widget along with the rest of our form data; more about this later.

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cherry</span>
+      <ul class="optList hidden">
+        <li class="option">Cherry</li>
+        <li class="option">Lemon</li>
+        <li class="option">Banana</li>
+        <li class="option">Strawberry</li>
+        <li class="option">Apple</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

Second, we need two new classes to let us hide the unneeded element (that is, the "real" {{HTMLElement("select")}} element if our script isn't running, or the custom widget if it is running). Note that by default, our HTML code hides our custom widget.

+ +
.widget select,
+.no-widget .select {
+  /* This CSS selector basically says:
+     - either we have set the body class to "widget" and thus we hide the actual {{HTMLElement("select")}} element
+     - or we have not changed the body class, therefore the body class is still "no-widget",
+       so the elements whose class is "select" must be hidden */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

Now we just need a JavaScript switch to determine if the script is running or not. This switch is very simple: if at page load time our script is running, it will remove the no-widget class and add the widget class, thereby swapping the visibility of the {{HTMLElement("select")}} element and of the custom widget.

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
Without JSWith JS
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
Check out the source code
+ +
+

Note: If you really want to make your code generic and reusable, instead of doing a class switch it's far better to just add the widget class to hide the {{HTMLElement("select")}} elements, and to dynamically add the DOM tree representing the custom widget after every {{HTMLElement("select")}} element in the page.

+
+ +

Making the job easier

+ +

In the code we are about to build, we will use the standard DOM API to do all the work we need. However, although DOM API support has gotten much better in browsers, there are always issues with legacy browsers (especially with good old Internet Explorer).

+ +

If you want to avoid trouble with legacy browsers, there are two ways to do so: using a dedicated framework such as jQuery, $dom, prototype, Dojo, YUI, or the like, or by polyfilling the missing feature you want to use (which can easily be done through conditional loading, with the yepnope library for example).

+ +

The features we plan to use are the following (ordered from the riskiest to the safest):

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach (This is not DOM but modern JavaScript)
    4. +
  4. {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

Beyond the availability of those specific features, there is still one issue remaining before starting. The object returned by the {{domxref("element.querySelectorAll","querySelectorAll()")}} function is a {{domxref("NodeList")}} rather than an Array. This is important because Array objects support the forEach function, but {{domxref("NodeList")}} doesn't. Because {{domxref("NodeList")}} really looks like an Array and because forEach is so convenient to use, we can easily add the support of forEach to {{domxref("NodeList")}} in order to make our life easier, like so:

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

We weren't kidding when we said it's easy to do.

+ +

Building event callbacks

+ +

The ground is ready, we can now start to define all the functions that will be used each time the user interacts with our widget.

+ +
// This function will be used each time we want to deactivate a custom widget
+// It takes one parameter
+// select : the DOM node with the `select` class to deactivate
+function deactivateSelect(select) {
+
+  // If the widget is not active there is nothing to do
+  if (!select.classList.contains('active')) return;
+
+  // We need to get the list of options for the custom widget
+  var optList = select.querySelector('.optList');
+
+  // We close the list of option
+  optList.classList.add('hidden');
+
+  // and we deactivate the custom widget itself
+  select.classList.remove('active');
+}
+
+// This function will be used each time the user wants to (de)activate the widget
+// It takes two parameters:
+// select : the DOM node with the `select` class to activate
+// selectList : the list of all the DOM nodes with the `select` class
+function activeSelect(select, selectList) {
+
+  // If the widget is already active there is nothing to do
+  if (select.classList.contains('active')) return;
+
+  // We have to turn off the active state on all custom widgets
+  // Because the deactivateSelect function fulfill all the requirement of the
+  // forEach callback function, we use it directly without using an intermediate
+  // anonymous function.
+  selectList.forEach(deactivateSelect);
+
+  // And we turn on the active state for this specific widget
+  select.classList.add('active');
+}
+
+// This function will be used each time the user wants to open/closed the list of options
+// It takes one parameter:
+// select : the DOM node with the list to toggle
+function toggleOptList(select) {
+
+  // The list is kept from the widget
+  var optList = select.querySelector('.optList');
+
+  // We change the class of the list to show/hide it
+  optList.classList.toggle('hidden');
+}
+
+// This function will be used each time we need to highlight an option
+// It takes two parameters:
+// select : the DOM node with the `select` class containing the option to highlight
+// option : the DOM node with the `option` class to highlight
+function highlightOption(select, option) {
+
+  // We get the list of all option available for our custom select element
+  var optionList = select.querySelectorAll('.option');
+
+  // We remove the highlight from all options
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // We highlight the right option
+  option.classList.add('highlight');
+};
+ +

That's all you need in order to handle the various states of the custom widget.

+ +

Next, we bind these functions to the appropriate events:

+ +
// We handle the event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+
+    // as well as all its `option` elements
+    var optionList = select.querySelectorAll('.option');
+
+    // Each time a user hovers their mouse over an option, we highlight the given option
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // Note: the `select` and `option` variable are closures
+        // available in the scope of our function call.
+        highlightOption(select, option);
+      });
+    });
+
+    // Each times the user click on a custom select element
+    select.addEventListener('click', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We toggle the visibility of the list of options
+      toggleOptList(select);
+    });
+
+    // In case the widget gain focus
+    // The widget gains the focus each time the user clicks on it or each time
+    // they use the tabulation key to access the widget
+    select.addEventListener('focus', function (event) {
+      // Note: the `select` and `selectList` variable are closures
+      // available in the scope of our function call.
+
+      // We activate the widget
+      activeSelect(select, selectList);
+    });
+
+    // In case the widget loose focus
+    select.addEventListener('blur', function (event) {
+      // Note: the `select` variable is a closure
+      // available in the scope of our function call.
+
+      // We deactivate the widget
+      deactivateSelect(select);
+    });
+  });
+});
+ +

At that point, our widget will change state according to our design, but its value doesn't get updated yet. We'll handle that next.

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}
Check out the source code
+ +

Handling the widget's value

+ +

Now that our widget is working, we have to add code to update its value according to user input and make it possible to send the value along with form data.

+ +

The easiest way to do this is to use a native widget under the hood. Such a widget will keep track of the value with all the built-in controls provided by the browser, and the value will be sent as usual when a form is submitted. There's no point in reinventing the wheel when we can have all this done for us.

+ +

As seen previously, we already use a native select widget as a fallback for accessibility reasons; we can simply synchronize its value with that of our custom widget:

+ +
// This function updates the displayed value and synchronizes it with the native widget.
+// It takes two parameters:
+// select : the DOM node with the class `select` containing the value to update
+// index  : the index of the value to be selected
+function updateValue(select, index) {
+  // We need to get the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  // We also need  to get the value placeholder of our custom widget
+  var value = select.querySelector('.value');
+
+  // And we need the whole list of options
+  var optionList = select.querySelectorAll('.option');
+
+  // We set the selected index to the index of our choice
+  nativeWidget.selectedIndex = index;
+
+  // We update the value placeholder accordingly
+  value.innerHTML = optionList[index].innerHTML;
+
+  // And we highlight the corresponding option of our custom widget
+  highlightOption(select, optionList[index]);
+};
+
+// This function returns the current selected index in the native widget
+// It takes one parameter:
+// select : the DOM node with the class `select` related to the native widget
+function getIndex(select) {
+  // We need to access the native widget for the given custom widget
+  // In our example, that native widget is a sibling of the custom widget
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

With these two functions, we can bind the native widgets to the custom ones:

+ +
// We handle event binding when the document is loaded.
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // Each custom widget needs to be initialized
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // We make our custom widget focusable
+    select.tabIndex = 0;
+
+    // We make the native widget no longer focusable
+    select.previousElementSibling.tabIndex = -1;
+
+    // We make sure that the default selected value is correctly displayed
+    updateValue(select, selectedIndex);
+
+    // Each time a user clicks on an option, we update the value accordingly
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // Each time a user uses their keyboard on a focused widget, we update the value accordingly
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // When the user hits the down arrow, we jump to the next option
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+      // When the user hits the up arrow, we jump to the previous option
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

In the code above, it's worth noting the use of the tabIndex property. Using this property is necessary to ensure that the native widget will never gain focus, and to make sure that our custom widget gains focus when the user uses his keyboard or his mouse.

+ +

With that, we're done! Here's the result:

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}
Check out the source code
+ +

But wait a second, are we really done?

+ +

Make it accessible

+ +

We have built something that works and though we're far from a fully-featured select box, it works nicely. But what we've done is nothing more than fiddle with the DOM. It has no real semantics, and even though it looks like a select box, from the browser's point of view it isn't one, so assistive technologies won't be able to understand it's a select box. In short, this pretty new select box isn't accessible!

+ +

Fortunately, there is a solution and it's called ARIA. ARIA stands for "Accessible Rich Internet Application", and it's a W3C specification specifically designed for what we are doing here: making web applications and custom widgets accessible. It's basically a set of attributes that extend HTML so that we can better describe roles, states and properties as though the element we've just devised was the native element it tries to pass for. Using these attributes is dead simple, so let's do it.

+ +

The role attribute

+ +

The key attribute used by ARIA is the role attribute. The role attribute accepts a value that defines what an element is used for. Each role defines its own requirements and behaviors. In our example, we will use the listbox role. It's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the option role).

+ +

It's also worth noting that ARIA defines roles that are applied by default to standard HTML markup. For example, the {{HTMLElement("table")}} element matches the role grid, and the {{HTMLElement("ul")}} element matches the role list. Because we use a {{HTMLElement("ul")}} element, we want to make sure the listbox role of our widget will supersede the list role of the {{HTMLElement("ul")}} element. To that end, we will use the role presentation. This role is designed to let us indicate that an element has no special meaning, and is used solely to present information. We will apply it to our {{HTMLElement("ul")}} element.

+ +

To support the listbox role, we just have to update our HTML like this:

+ +
<!-- We add the role="listbox" attribute to our top element -->
+<div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <!-- We also add the role="presentation" to the ul element -->
+  <ul class="optList" role="presentation">
+    <!-- And we add the role="option" attribute to all the li elements -->
+    <li role="option" class="option">Cherry</li>
+    <li role="option" class="option">Lemon</li>
+    <li role="option" class="option">Banana</li>
+    <li role="option" class="option">Strawberry</li>
+    <li role="option" class="option">Apple</li>
+  </ul>
+</div>
+ +
+

Note: Including both the role attribute and a class attribute is only necessary if you want to support legacy browsers that do not support the CSS attribute selectors.

+
+ +

The aria-selected attribute

+ +

Using the role attribute is not enough. ARIA also provides many states and property attributes. The more and better you use them, the better your widget will be understood by assistive technologies. In our case, we will limit our usage to one attribute: aria-selected.

+ +

The aria-selected attribute is used to mark which option is currently selected; this lets assistive technologies inform the user what the current selection is. We will use it dynamically with JavaScript to mark the selected option each time the user chooses one. To that end, we need to revise our updateValue() function:

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // We make sure that all the options are not selected
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // We make sure the chosen option is selected
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

Here is the final result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as NVDA or VoiceOver):

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}
Check out the final source code
+ +

Conclusion

+ +

We have seen all the basics of building a custom form widget, but as you can see it's not trivial to do, and often it's better and easier to rely on third-party libraries instead of coding them from scratch yourself (unless, of course, your goal is to build such a library).

+ +

Here are a few libraries you should consider before coding your own:

+ + + +

If you want to move forward, the code in this example needs some improvement before it becomes generic and reusable. This is an exercise you can try to perform. Two hints to help you in this: the first argument for all our functions is the same, which means those functions need the same context. Building an object to share that context would be wise. Also, you need to make it feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the Web standards they use vary. Have fun!

+ +

{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/es/learn/html/forms/how_to_structure_an_html_form/index.html b/files/es/learn/html/forms/how_to_structure_an_html_form/index.html new file mode 100644 index 0000000000..45f58520d1 --- /dev/null +++ b/files/es/learn/html/forms/how_to_structure_an_html_form/index.html @@ -0,0 +1,320 @@ +--- +title: Cómo estructurar un formulario HTML +slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
+ +

Una vez examinados los conceptos básicos, vamos a ver más en detalle los elementos que se utilizan para proporcionar estructura y significado a las diferentes partes de un formulario.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática y de lenguajes HTML.
Objetivo:Entender cómo se estructuran los formularios HTML y se les proporciona semántica para dotarlos de criterios de usabilidad y accesibilidad.
+ +

La flexibilidad que presentan los formularios los convierte en una de las estructuras más complejas en HTML, puesto que puedes crear cualquier tipo de formulario básico a partir de los elementos y atributos destinados a esta función. El uso de una estructura correcta al crear un formulario HTML te ayudará a garantizar que el formulario presente las características de usabilidad y accesibilidad adecuadas.

+ +

El elemento <form>

+ +

El elemento {{HTMLElement ("form")}} define formalmente un formulario y los atributos que determinan el comportamiento del formulario. Cada vez que desees crear un formulario HTML, debes empezar utilizando este elemento y anidando todo el contenido dentro de él. Muchas tecnologías de asistencia y complementos del navegador pueden descubrir elementos {{HTMLElement ("form")}} e implementar códigos de apoyo (hooks) especiales para que sean más fáciles de usar.

+ +

Ya lo vimos en el artículo anterior.

+ +
Advertencia: Está estrictamente prohibido anidar un formulario dentro de otro formulario. Anidar formularios no es una buena idea porque puede ocasionar comportamientos impredecibles.
+ +

Siempre es posible usar controles de formulario fuera de un elemento {{HTMLElement ("form")}}. Si la haces, por defecto ese control no tiene nada que ver con ningún formulario, a menos que lo asocies a algún formulario con el atributo form. Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si este no está dentro de él.

+ +

A continuación vamos a exponer los elementos estructurales que encontrarás en un formulario.

+ +

Los elementos <fieldset> y <legend>

+ +

El elemento {{HTMLElement ("fieldset")}} es una forma cómoda de crear grupos de controles de formulario (también denominados widgets) que comparten el mismo propósito, con fines semánticos y de aplicación de estilo. Puedes etiquetar un elemento {{HTMLElement ("fieldset")}} incluyendo un elemento {{HTMLElement ("legend")}} justo debajo de la etiqueta de apertura {{HTMLElement ("fieldset")}}. El contenido textual del elemento {{HTMLElement ("legend")}} describe formalmente el propósito del elemento {{HTMLElement ("fieldset")}} que está incluido dentro.

+ +

Muchas tecnologías de asistencia utilizarán el elemento {{HTMLElement ("legend")}} como si fuera una parte de la etiqueta de cada control dentro del elemento {{HTMLElement ("fieldset")}} correspondiente. Por ejemplo, algunos lectores de pantalla como Jaws y NVDA leerán el contenido de la leyenda antes de decir la etiqueta de cada control.

+ +

Un pequeño ejemplo:

+ +
<form>
+  <fieldset>
+    <legend>Tamaño del zumo de fruta</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Pequeño</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Mediano</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Grande</label>
+    </p>
+  </fieldset>
+</form>
+ +
+

Nota: Puedes encontrar este ejemplo en fieldset-legend.html (consúltalo en vivo).

+
+ +

Al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.

+ +

El caso de uso que se muestra en este ejemplo es uno de los más importantes. Cada vez que tengas un conjunto de botones de opción, debes anidarlos dentro de un elemento {{HTMLElement ("fieldset")}}. Hay otros casos de uso y el elemento {{HTMLElement ("fieldset")}} también se puede usar en general para seccionar un formulario. Idealmente, los formularios largos deberían tener una extensión de varias páginas, pero si un formulario se alarga y ha de estar contenido en una sola página, colocar las diferentes secciones relacionadas dentro de diferentes conjuntos de campos mejora su usabilidad.

+ +

Debido a la influencia que tiene sobre las tecnologías de asistencia, el elemento {{HTMLElement ("fieldset")}} es uno de los elementos clave para crear formularios accesibles. Sin embargo, no hay que abusar de él. Si es posible, cada vez que crees un formulario, intenta escuchar cómo lo interpreta un lector de pantalla. Si suena raro, intenta mejorar la estructura del formulario.

+ +

El elemento <label>

+ +

Como vimos en el artículo anterior, el elemento {{HTMLElement ("label")}} es la forma formal de definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:

+ +
<label for="name">Nombre:</label> <input type="text" id="name" name="user_name">
+ +

Con la etiqueta <label> asociada correctamente con <input> por su atributo for (que contiene el atributo id del elemento <input>), un lector de pantalla leerá algo como «Nombre, editar texto».

+ +

Hay otra forma de asociar un control de formulario con una etiqueta: asociarlo implícitamente anidando el control de formulario dentro de <label>.

+ +
<label for="name">
+  Nombre: <input type="text" id="name" name="user_name">
+</label>
+ +

Incluso en estos casos, se aconseja establecer el atributo for para garantizar que todas las tecnologías de asistencia comprendan la relación entre la etiqueta y el control de formulario.

+ +

Si no hay ninguna etiqueta, o si el control de formulario no está asociado implícita o explícitamente con alguna etiqueta, un lector de pantalla leerá algo así como «Editar texto en blanco», lo cual no es de mucha ayuda.

+ +

¡También se puede hacer clic en las etiquetas!

+ +

Otra ventaja de configurar correctamente las etiquetas es que puedes hacer clic o pulsar en la etiqueta para activar el control de formulario correspondiente. Esto es útil para controles como entradas de texto, donde puedes hacer clic tanto en la etiqueta como en la entrada de texto para proporcionar el foco al control de formulario, pero es útil especialmente para botones de opción y casillas de verificación, porque la zona sensible de este control puede ser muy pequeña, y puede ser útil para facilitar su activación.

+ +

Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas» del ejemplo siguiente, cambiará el estado seleccionado de la casilla de verificación taste_cherry:

+ +
<form>
+  <p>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
+    <label for="taste_1">Me gustan las cerezas</label>
+  </p>
+  <p>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
+    <label for="taste_2">Me gustan los plátanos</label>
+  </p>
+</form>
+ +
+

Nota: Puedes encontrar este ejemplo en checkbox-label.html (consúltalo en vivo).

+
+ +

Etiquetas múltiples

+ +

Estrictamente hablando, es posible poner varias etiquetas en un solo control de formulario, pero no suele ser una buena idea porque algunas tecnologías de asistencia pueden tener problemas para manejarlas. En caso de tener varias etiquetas, hay que anidar el control de formulario y sus etiquetas dentro de un único elemento {{htmlelement ("label")}}.

+ +

Consideremos este ejemplo:

+ +
<p>Los campos obligatorios se marcan con un <abbr title = "required">*</abbr>.</p>
+
+<!-- Así que esto: -->
+<div>
+  <label for="username">Nombre:</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="required" aria-label="required">*</abbr></label>
+</div>
+
+<!-- sería mejor hacerlo así: -->
+<div>
+  <label for="username">
+    <span>Nombre:</span>
+    <input id="username" type="text" name="username">
+    <abbr title="required" aria-label="required">*</abbr>
+  </label>
+</div>
+
+<!-- Pero probablemente lo mejor es esto: -->
+<div>
+  <label for="username">Nombre: <abbr title="required" aria-label="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

{{EmbedLiveSample("Etiquetas_múltiples", 120, 120)}}

+ +

El párrafo de la parte superior establece una regla para los elementos que son obligatorios. La regla ha de incluirse antes de usarse para que tanto los usuarios videntes como los usuarios que utilizan tecnologías de asistencia y lectores de pantalla, sepan lo que significa antes de encontrar un elemento obligatorio. Pero si bien esto ayuda a informar a los usuarios de lo que significa un asterisco, no es posible confiar plenamente en ello. Cuando un lector de pantalla se encuentre con un asterisco pronunciará «estrella». Cuando un usuario vidente pase el ratón por encima, debería aparecer una etiqueta de «obligatorio», lo cual se logra con el uso del atributo title. Pero los títulos que se leen en voz alta dependen de la configuración del lector de pantalla, por lo que es más fiable incluir también el atributo aria-label, que los lectores de pantalla siempre leen.

+ +

Las variantes anteriores aumentan en efectividad a medida que se avanza por ellas:

+ + + +
+

Nota: Es posible que obtengas resultados ligeramente diferentes dependiendo de tu lector de pantalla. Esta prueba se hizo con VoiceOver (NVDA se comporta de manera similar). Nos encantaría conocer tus experiencias.

+
+ +
+

Nota: Puedes encontrar este ejemplo en GitHub como required-labels.html (o consultarlo en vivo). No pruebes el ejemplo con las dos o tres versiones sin los comentarios porque los lectores de pantalla se confundirán si hay múltiples etiquetas y múltiples entradas con el mismo ID.

+
+ +

Estructuras HTML comunes que se utilizan en los formularios

+ +

Más allá de las estructuras específicas de los formularios web, es bueno recordar que el marcado de los formularios es solo HTML. Esto significa que puedes usar todo el poder del HTML para estructurar un formulario web.

+ +

Como puedes ver en los ejemplos, es una práctica común delimitar una etiqueta y su control de formulario con un elemento {{HTMLElement ("li")}} dentro de una lista {{HTMLElement ("ul")}} o {{HTMLElement ("ol")}}. Los elementos {{HTMLElement ("p")}} y {{HTMLElement ("div")}} también se usan con frecuencia. Se recomiendan las listas para estructurar múltiples casillas de verificación o botones de opción.

+ +

Además del elemento {{HTMLElement ("fieldset")}}, también es una práctica común usar títulos HTML (por ejemplo, {{htmlelement ("h1")}}, {{htmlelement ("h2")}}), y seccionar (por ejemplo, {{htmlelement ("section")}}), para estructurar formas complejas.

+ +

Depende de ti, sobre todo, encontrar un estilo de codificación cómodo que dé como resultado formas con buena accesibilidad y usabilidad. Las secciones independientes con funciones diferentes deben estar contenidas en elementos {{htmlelement ("section")}} separados, con elementos {{htmlelement ("fieldset")}} para contener botones de opción.

+ +

Aprendizaje activo: construir una estructura de formulario

+ +

Pongamos en práctica estas ideas y creemos un formulario un poco más complicado: un formulario de pago. Este formulario contendrá una serie de tipos de control que quizás aún no comprendas. No te preocupes por esto por ahora; en el artículo siguiente descubrirás cómo funcionan (Los controles básicos de formulario originales). Por ahora, lee con detenimiento las descripciones y sigue las instrucciones, y empieza a formarte una idea de qué elementos de delimitación se utilizan para estructurar el formulario y por qué.

+ +
    +
  1. Para comenzar, haz una copia local de nuestro archivo de plantilla en blanco y el CSS de nuestro formulario de pago en un nuevo directorio de tu ordenador.
    2. +
  2. Añade dentro del elemento HTML {{htmlelement ("head")}} la línea siguiente para aplicar el CSS al HTML: + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. A continuación, añade el elemento externo {{htmlelement ("form")}} para crear tu formulario: + 
    <form>
+
+</form>
    +
    4. +
  4. Añade un encabezado y un párrafo dentro de las etiquetas <form>> para informar a los usuarios cómo se marcan los campos obligatorios: + 
    <h1>Forma de pago</h1>
+<p>Los campos obligatorios van seguidos de <strong> <abbr title = "required"> * </abbr> </strong>.</p>
    +
    5. +
  5. A continuación añadimos al formulario una sección de código más grande, justo debajo de nuestra entrada anterior. Aquí verás que delimitamos con un elemento {{htmlelement ("section")}} independiente los campos con la información de contacto. Además, hay un conjunto de dos botones de opción, cada uno de los cuales colocamos dentro de su elemento de lista ({{htmlelement ("li")}}) propio. También hay dos entradas de texto estándar {{htmlelement ("input")}} y sus elementos {{htmlelement ("label")}} asociados, cada uno anidado dentro de un elemento {{htmlelement ("p")}} y una entrada de texto para introducir una contraseña. Añade este código a tu formulario: + 
    <section>
+    <h2>Información de contacto</h2>
+    <fieldset>
+      <legend>Título</legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="K" >
+              Rey
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Q">
+              Reina
+            </label>
+          </li>
+          <li>
+            <label for="title_3">
+              <input type="radio" id="title_3" name="title" value="J">
+              Bufón
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Nombre:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <Span>Correo electrónico:</ span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Contraseña:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. La segunda <section> de nuestro formulario es la información de pago. Hay tres controles diferentes, junto con sus etiquetas, cada uno contenido dentro de un elemento <p>. El primero es un menú desplegable ({{htmlelement ("select")}}) para seleccionar el tipo de tarjeta de crédito. El segundo es un elemento <input> de tipo tel, para introducir un número de tarjeta de crédito. Si bien podríamos haber usado el tipo number, no queremos una interfaz de usuario con control de número. El último es un elemento <input> de tipo date, para introducir la fecha de caducidad de la tarjeta; aparecerá como un control de selección de fecha en navegadores compatibles, y como una entrada de texto normal en navegadores no compatibles. Estos tipos de entrada más nuevos volverán a aparecer en el artículo Tipos de entrada HTML5.
    +
    + Introduce los datos siguientes a continuación de la sección anterior: + 
    <section>
+    <h2>Información de pago</h2>
+    <p>
+      <label for="card">
+        <span>Tipo de tarjeta:</span>
+      </label>
+      <select id="card" name="usercard">
+        <option value="visa">Visa</option>
+        <option value="mc">Mastercard</option>
+        <option value="amex">American Express</option>
+      </select>
+    </p>
+    <p>
+      <label for="number">
+        <span>Número de tarjeta:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="tel" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span>Fecha de caducidad:</span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>el formato mm/aa</em>
+      </label>
+      <input type="date" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. La última sección que añadimos es mucho más simple y contiene solo un {{htmlelement ("button")}} de tipo submit, para enviar los datos del formulario. Añádelo al final de tu formulario: + 
    <p> <button type="submit">Validar el pago</button> </p>
    +
    8. +
+ +

Debajo puedes ver en acción el formulario terminado (también lo encontrarás en GitHub; consulta el código fuente de nuestro payment-form.html y ejecútalo en vivo):

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "/en-US/Learn/Forms/How_to_structure_a_web_form/Example")}}

+ +

¡Prueba tus habilidades!

+ +

Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita Prueba tus habilidades: Estructura de formularios.

+ +

Resumen

+ +

Ahora tienes todos los conocimientos necesarios para estructurar adecuadamente tus formularios web. Expondremos muchas de las características que se presentan aquí en los artículos siguientes, y el próximo artículo analizará con más detalle el uso de todos los diferentes tipos de controles de formulario que vas a querer usar para recopilar la información de tus usuarios.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}

+ +

En este módulo

+ + + +

Temas avanzados

+ + diff --git a/files/es/learn/html/forms/index.html b/files/es/learn/html/forms/index.html new file mode 100644 index 0000000000..c607c7993a --- /dev/null +++ b/files/es/learn/html/forms/index.html @@ -0,0 +1,366 @@ +--- +title: Formularios HTML +slug: Learn/HTML/Forms +tags: + - Featured + - Forms + - Formulario(2) + - Guide + - Guía + - HTML + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +

Esta guía está constituida por una serie de artículos que te ayudarán a dominar los formularios en HTML.   El formulario HTML  es una herramienta  cuya finalidad es interactuar con el usuario; sin embargo, debido a razones históricas y técnicas, no siempre resulta obvio como explotar su enorme potencial. En esta guía, cubriremos todos los aspectos de los formularios HTML, desde su estructura hasta su estilo, desde la manipulación de sus datos hasta los widgets personalizados. ¡Aprenderás a disfrutar de las grandes prestaciones que nos brindan!

+ +

Artículos

+ +
    +
  1. Mi primer formulario HTML
    2. +
  2. Cómo estructurar un formulario HTML
    3. +
  3. Los widgets nativos de formulario
    4. +
  4. CSS para formularios HTML +
      +
    1. Aplicando estilos a formularios HTML
      2. +
    2. Estilos avanzados para formularios HTML
      3. +
    3. Tabla de compatibilidad de propiedades para widgets de formulario
      4. +
    +
    5. +
  5. Enviando y recibiendo datos
    6. +
  6. Validación de los datos del formulario
    7. +
  7. Cómo crear un widget de formulario personalizado
    8. +
  8. Enviando formularios mediante JavaScript +
      +
    1. Usando el objeto FormData
      2. +
    +
    9. +
  9. Formularios HTML en navegadores antiguos
    10. +
+ +

Documentación HTML

+ +

HTML Elements

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementoInterfaz DOM relacionadaDescripción
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}El elemento  button representa un boton clickeable.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}El elemento datalist element contiene un conjunto de elementos{{ HTMLElement("option") }} que representan posibles opciones para el valor de otros elementos del formulario.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}El  fieldset se usa para agrupar distintos elementos dentro de un formulario.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}El elemento  form representa una seccion del documento html que contiene elementos interactivos a traves de los cuales se le permite al usuario enviar informacion hacia un servidor web.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}El elemento   input es usado para crear controles interactivos para los formularios.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}El elemento keygen existe para facilitar la generación de llaves u el envío de las llaves publicas como parte de un formulario HTML.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}El  label determina un título para un item de la interfaz del usuario.
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}El elemento legend  representa una etiqueta para el contenido del elemento {{ HTMLElement("fieldset") }} que lo contiene.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}EL elemento meter  representa un valor escalar dentro de un rango conocido, o un valor fraccional.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}} +

El elemento optgroup crea un grupo de opciones dentro de un elemento {{ HTMLElement("select") }} .

+
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}El elemento option es usado para crear un control de opcion que representa un item dentro de alguno de los elementos {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} o {{ HTMLElement("datalist") }} .
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}El elemento output representa un resultado de un calculo.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}El elemento progress es usado para mostrar el progreso de la realización de una tarea.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}El elemento select representa el control que presenta un menu de opciones.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}EL elemento textarea representa un campo multi-linea de edicion de text plano.
+ +
+

Nota: Todos los elementos de formulario, al igual que el resto de elementos HTML, soportan la interfaz DOM {{domxref("HTMLElement")}}.

+
+ +

HTML Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre del atributoElementosDescripción
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos que acepta el servidor, típicamente un tipo de fichero.
accept-charset{{ HTMLElement("form") }}Lista de charsets (conjuntos de caracteres) aceptados.
action{{ HTMLElement("form") }}La URI del programa con el que procesar la información enviada a mediante el formulario.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si los controles en este formulario serán o no autocompletados por el navegador
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}El elemento debería poseer el foco automáticamente tras cargar  la página.
challenge{{ HTMLElement("keygen") }}Una cadena de comprobación que es enviada junto con la clave pública.
checked{{ HTMLElement("input") }}Indica si el elemento debe estar seleccionado (checked) tras cargar la página.
cols{{ HTMLElement("textarea") }}Define el número de columnas en un elemento de tipo textarea.
data{{ HTMLElement("object") }}Especifica la URL del recurso.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si el usuario puede o no interactuar con el elemento.
enctype{{ HTMLElement("form") }}Define el tipo de contenido del formulario cuando el método de envío es POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }} +

Establece una asociación con otros elementos

+
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica el elemento form que contiene este elemento.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Especifica el tipo de clave generada.
list{{ HTMLElement("input") }}Determina una lista de opciones predefinidas para sugerir al usuario.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el máximo valor permitido.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define el máximo número de caracteres permitidos en el elemento.
method{{ HTMLElement("form") }} +

Define qué método HTTP se usará al enviar el formulario. puede ser GET (por defecto) o POST

+
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el mínimo valor permitido.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si mútiples valores pueden ser introducidos en un input de tipo email o file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Especifica el nombre del elemento. Este nombre se usará asociado al dato que contiene al enviar al servidor el formulario.
novalidate{{ HTMLElement("form") }}Indica que el formulario no debería validarse al momento de ser enviado.
optimum{{ HTMLElement("meter") }}Indica el valor numérico óptimo.
pattern{{ HTMLElement("input") }}Establece la expresión regular con la que validar el valor del elemento.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona una pista al usuario de lo que el campo debe contener. Se muestra cuando el campo está vacío.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si el elemento se puede o no editar.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Cuando un campo del formulario es requerido, el usuario no puede dejarlo vacío.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}En una lista de selección, la opción con el atributo selected será la que está seleccionada por defecto
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defina la anchura del elemento (en píxeles). Si el elemento es de tipo text o password el ancho se referirá al número de caracteres.
src{{ HTMLElement("img") }}El URL del recurso
step{{ HTMLElement("input") }}Determina el incremento de cada paso con el que se cubre un rango desde un valor mínimo hasta un valor máximo.
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Determina el tipo del elemento.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Establece el valor actual del elemento.
wrap{{ HTMLElement("textarea") }}Cuando un texto tiene una longitud mayor que el ancho del elemento sobre el que se muestra, determina si el elemento debe simular saltos de línea para que todo el texto quede visible en el elemento.
+ +

Referencia a la normativa

+ + diff --git a/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html b/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html new file mode 100644 index 0000000000..115b5580fe --- /dev/null +++ b/files/es/learn/html/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,2003 @@ +--- +title: Tabla de compatibilidad de propiedades CSS para controles de formulario +slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +--- +
{{learnsidebar}}
+ +

Las siguientes tablas de compatibilidad intentan resumir el estado del soporte de CSS para formularios HTML. Debido a la complejidad de los formularios CSS y HTML, estas tablas no se pueden considerar una referencia perfecta. Sin embargo, le darán una buena idea de lo que se puede y no se puede hacer, lo que le ayudará al aprender a hacer las cosas.

+ +

Cómo leer las tablas

+ +

Valores

+ +

Para cada propiedad, hay cuatro valores posibles:

+ +
+
Si
+
Existe un soporte razonablemente consistente para la propiedad en todos los navegadores. Es posible que aún enfrente efectos secundarios extraños en ciertos casos extremos.
+
Parcial
+
Si bien la propiedad funciona, con frecuencia puede enfrentar efectos secundarios extraños o inconsistencias. Probablemente debería evitar estas propiedades a menos que primero domine esos efectos secundarios.
+
No
+
La propiedad simplemente no funciona o es tan inconsistente que no es confiable.
+
n.a.
+
La propiedad no tiene ningún significado para este tipo de widget.
+
+ +

Representación

+ +

Para cada propiedad hay dos representaciones posibles:

+ +
+
N (Normal)
+
Indica que la propiedad se aplica tal cual
+
T (Retocada)
+
Indica que la propiedad se aplica con la regla adicional como se muestra a continuación:
+
+ +
* {
+  /* Turn off the native look and feel */
+  -webkit-appearance: none;
+  appearance: none;
+
+/* for Internet Explorer */
+  background: none;
+}
+ +

Tablas de compatibilidad

+ +

Comportamientos globales

+ +

Algunos comportamientos son comunes a muchos navegadores a nivel global::

+ +
+
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
+
El uso de una de estas propiedades puede desactivar parcial o totalmente la apariencia nativa de los widgets en algunos navegadores. Tenga cuidado cuando los use.
+
{{cssxref("line-height")}}
+
Esta propiedad se admite de forma inconsistente en todos los navegadores y debe evitarla.
+
{{cssxref("text-decoration")}}
+
Esta propiedad no es compatible con el navegador Opera en widgets de formulario.
+
{{cssxref("text-overflow")}}
+
Opera, Safari, y IE9 no admiten esta propiedad en widgets de formulario.
+
{{cssxref("text-shadow")}}
+
Opera no admite {{cssxref("text-shadow")}} en widgets de formularios e IE9 no lo admite en absoluto.
+
+ +

Text fields

+ +

See the {{htmlelement("input/text", "text")}}, {{htmlelement("input/search", "search")}}, and {{htmlelement("input/password", "password")}} input types.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1][2]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. +
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. +
+
{{cssxref("border")}}Partial[1][2]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. +
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. +
+
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1][2]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
    2. +
  2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    3. +
+
Text and font
{{cssxref("color")}}[1]YesYes +
    +
  1. If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on {{htmlelement("textarea")}}s.
    2. +
+
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}YesYes
{{cssxref("text-decoration")}}PartialPartialSee the note about Opera
{{cssxref("text-indent")}}Partial[1]Partial[1] +
    +
  1. IE9 supports this property only on {{htmlelement("textarea")}}s, whereas Opera only supports it on single line text fields.
    2. +
+
{{cssxref("text-overflow")}}PartialPartial
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}YesYes
Border and background
{{cssxref("background")}}Partial[1]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    2. +
+
{{cssxref("border-radius")}}Partial[1][2]Yes +
    +
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    2. +
  2. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    3. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

Buttons

+ +

See the {{htmlelement("input/button", "button")}},  {{htmlelement("input/submit", "submit")}}, and {{htmlelement("input/reset", "reset")}} input types and the {{htmlelement("button")}} element.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Yes +
    +
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
    2. +
+
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Yes +
    +
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
    2. +
+
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}PartialYes
{{cssxref("text-indent")}}YesYes
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}YesYes
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Yes[1]Yes[1] +
    +
  1. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    2. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

Number

+ +

See the  {{htmlelement("input/number", "number")}} input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Partial[1] +
    +
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
    2. +
+
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Partial[1] +
    +
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
    2. +
+
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}YesYes
{{cssxref("text-align")}}YesYes
{{cssxref("text-decoration")}}PartialPartial
{{cssxref("text-indent")}}YesYes
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}PartialPartial
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}NoNo +

Supported but there is too much inconsistency between browsers to be reliable.

+
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Check boxes and radio buttons

+ +

See the {{htmlelement("input/checkbox", "checkbox")}} and {{htmlelement("input/radio", "radio")}} input types.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}No[1]No[1] +
    +
  1. Some browsers add extra margins and others stretch the widget.
    2. +
+
{{cssxref("height")}}No[1]No[1] +
    +
  1. Some browsers add extra margins and others stretch the widget.
    2. +
+
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Select boxes (single line)

+ +

See the {{htmlelement("select")}},  {{htmlelement("optgroup")}} and  {{htmlelement("option")}} elements.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}Partial[1]Partial[1] +
    +
  1. This property is okay on the {{htmlelement("select")}} element, but it cannot be the case on the {{htmlelement("option")}} or {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("height")}}NoYes
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}No[1]Partial[2] +
    +
  1. The property is applied, but in an inconsistent way between browsers on Mac OSX.
    2. +
  2. The property is well applied on the {{htmlelement("select")}} element, but is inconsistently handled on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    3. +
+
Text and font
{{cssxref("color")}}Partial[1]Partial[1] +
    +
  1. On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("font")}}Partial[1]Partial[1] +
    +
  1. On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. IE9 does not support this property on {{htmlelement("select")}}, {{htmlelement("option")}}, and {{htmlelement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("text-align")}}No[1]No[1] +
    +
  1. IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.
    2. +
+
{{cssxref("text-decoration")}}Partial[1]Partial[1] +
    +
  1. Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the {{htmlelement("select")}} element.
    2. +
+
{{cssxref("text-indent")}}Partial[1][2]Partial[1][2] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
  2. IE9 does not support this property.
    3. +
+
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}Partial[1][2]Partial[1][2] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
  2. IE9 does not support this property.
    3. +
+
{{cssxref("text-transform")}}Partial[1]Partial[1] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
+
Border and background
{{cssxref("background")}}Partial[1]Partial[1] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
+
{{cssxref("border-radius")}}Partial[1]Partial[1]
{{cssxref("box-shadow")}}NoPartial[1]
+ +

Note Firefox does not provide any way to change the down arrow on the {{htmlelement("select")}} element.

+ +

Select boxes (multiline)

+ +

See the {{htmlelement("select")}}, {{htmlelement("optgroup")}} and  {{htmlelement("option")}} elements and the size attribute.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Partial[1] +
    +
  1. Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the {{htmlelement("select")}} element.
    2. +
+
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}YesYesSee the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. IE9 does not support this property on {{htmlelement("select")}}, {{htmlelement("option")}}, and {{htmlelement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{htmlelement("option")}} and {{htmlelement("optgroup")}} elements.
    2. +
+
{{cssxref("text-align")}}No[1]No[1] +
    +
  1. IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.
    2. +
+
{{cssxref("text-decoration")}}No[1]No[1] +
    +
  1. Only supported by Firefox and IE9+.
    2. +
+
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}Partial[1]Partial[1] +
    +
  1. Most of the browsers only support this property on the {{htmlelement("select")}} element.
    2. +
+
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Yes[1]Yes[1] +
    +
  1. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
    2. +
+
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

Datalist

+ +

See the {{htmlelement("datalist")}} and {{htmlelement("input")}} elements and the list attribute.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}NoNo
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}NoNo
{{cssxref("font")}}NoNo
{{cssxref("letter-spacing")}}NoNo
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

File picker

+ +

See the {{htmlelement("input/file", "file")}} input type.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}YesYes
{{cssxref("font")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("letter-spacing")}}Partial[1]Partial[1] +
    +
  1. Many browsers apply this property to the select button.
    2. +
+
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}Partial[1]Partial[1] +
    +
  1. It acts more or less like an extra left margin outside the widget.
    2. +
+
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoPartial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

Date pickers

+ +

See the {{htmlelement("input/date", "date")}} and {{htmlelement("input/time", "time")}} input types. Many properties are supported, but there is too much inconstency between browsers to be reliable.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}NoNo
{{cssxref("height")}}NoNo
{{cssxref("border")}}NoNo
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}NoNo
Text and font
{{cssxref("color")}}NoNo
{{cssxref("font")}}NoNo
{{cssxref("letter-spacing")}}NoNo
{{cssxref("text-align")}}NoNo
{{cssxref("text-decoration")}}NoNo
{{cssxref("text-indent")}}NoNo
{{cssxref("text-overflow")}}NoNo
{{cssxref("text-shadow")}}NoNo
{{cssxref("text-transform")}}NoNo
Border and background
{{cssxref("background")}}NoNo
{{cssxref("border-radius")}}NoNo
{{cssxref("box-shadow")}}NoNo
+ +

Color pickers

+ +

See the {{htmlelement("input/color", "color")}} input type:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}No[1]Yes +
    +
  1. Opera handles this like a select widget with the same restriction.
    2. +
+
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}No[1]Yes +
    +
  1. Opera handles this like a select widget with the same restriction.
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Meters and progress

+ +

See the {{htmlelement("meter")}} and {{htmlelement("progress")}} elements:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}PartialYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}YesPartial[1] +
    +
  1. Chrome hides the {{htmlelement("progress")}} and {{htmlelement("meter")}} element when the {{cssxref("padding")}} property is applied on a tweaked element.
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Range

+ +

See the {{htmlelement("input/range", "range")}} input type. There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}Partial[1]Partial[1] +
    +
  1. Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.
    2. +
+
{{cssxref("border")}}NoYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}Partial[1]Yes +
    +
  1. The {{cssxref("padding")}} is applied, but has no visual effect.
    2. +
+
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}No[1]No[1] +
    +
  1. Supported, but there is too much inconsistency between browsers to be reliable.
    2. +
+
{{cssxref("border-radius")}}No[1]No[1]
{{cssxref("box-shadow")}}No[1]No[1]
+ +

Image buttons

+ +

See the {{htmlelement("input/image", "image")}} input type:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyNTNote
CSS box model
{{cssxref("width")}}YesYes
{{cssxref("height")}}YesYes
{{cssxref("border")}}YesYes
{{cssxref("margin")}}YesYes
{{cssxref("padding")}}YesYes
Text and font
{{cssxref("color")}}N.A.N.A.
{{cssxref("font")}}N.A.N.A.
{{cssxref("letter-spacing")}}N.A.N.A.
{{cssxref("text-align")}}N.A.N.A.
{{cssxref("text-decoration")}}N.A.N.A.
{{cssxref("text-indent")}}N.A.N.A.
{{cssxref("text-overflow")}}N.A.N.A.
{{cssxref("text-shadow")}}N.A.N.A.
{{cssxref("text-transform")}}N.A.N.A.
Border and background
{{cssxref("background")}}YesYes
{{cssxref("border-radius")}}Partial[1]Partial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
{{cssxref("box-shadow")}}Partial[1]Partial[1] +
    +
  1. IE9 does not support this property.
    2. +
+
+ +

See also

+ +

Learning path

+ + + +

Advanced Topics

+ + diff --git a/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html b/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html new file mode 100644 index 0000000000..b73c8d4442 --- /dev/null +++ b/files/es/learn/html/forms/prueba_tus_habilidades_colon__controles_html5/index.html @@ -0,0 +1,75 @@ +--- +title: 'Prueba tus habilidades: controles HTML5' +slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5' +tags: + - Aprendizaje + - Evaluación + - Formulário + - HTML5 + - Principiante +translation_of: 'Learn/Forms/Test_your_skills:_HTML5_controls' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba es evaluar si has comprendido nuestro artículo The HTML5 input types.

+ +
+

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

+
+ +

Controles HTML5 1

+ +

Primero exploraremos algunos de los tipos nuevos de input en HTML5. Crea las etiquetas input apropiadas para que un usuario actualice sus detalles para:

+ +
    +
  1. Email
    2. +
  2. Website
    3. +
  3. Número de teléfono
    4. +
  4. Color favorito
    5. +
+ +

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls1.html", '100%', 700)}}

+ +
+

Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Controles HTML5 2

+ +

A continuación, queremos que implementes un control deslizante para permitir al usuario escoger el número máximo de personas para invitar a su fiesta.

+ +
    +
  1. Implemente un control deslizante básico que acompañe a la etiqueta provista.
    2. +
  2. Establezca un valor minimo de 1, uno máximo de 30 y un valor inicial de 10.
    3. +
  3. Crea un elemento de salida correspondiente para poner el valor actual del deslizador. Asígnale la clase invite-output, y asocialo semanticamente con le entrada. Si haces esto correctamente, el JavaScript incluido en la página automáticamente actualizará el valor cuando se deslice el control.
    4. +
+ +

Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls2.html", '100%', 700)}}

+ +
+

Descarga el código inicial de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de controles HTML5 1".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html b/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html new file mode 100644 index 0000000000..1496025a8d --- /dev/null +++ b/files/es/learn/html/forms/prueba_tus_habilidades_colon__otros_controles/index.html @@ -0,0 +1,87 @@ +--- +title: 'Prueba tus habilidades: Otros controles' +slug: 'Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles' +translation_of: 'Learn/Forms/Test_your_skills:_Other_controls' +--- +
{{learnsidebar}}
+ +

El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo Otros controles de formulario.

+ +
+

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, pide ayuda — mira la sección Evaluación o ayuda adicional al final de esta página.

+
+ +

Otros controles 1

+ +

En nuestra primera evaluación de "Otros controles", te pediremos crear una entrada de texto de líneas múltiples.

+ +
    +
  1. Crea una entrada básica de texto de múltiples líneas.
    2. +
  2. Asócialo semánticamente con la etiqueta de "Comentario" asociado.
    3. +
  3. Define la entrada con 35 columnas y 10 filas de espacio en cual agregar comentarios.
    4. +
  4. Define para los comentatios una longitud máxima de 100 caracteres.
    5. +
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls1.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Otros controles 2

+ +

Ahora es tiempo de implementar un menú desplegable, para permitir al usuario escoger su comida favorita de las opciones entregadas.

+ +
    +
  1. Crea tu estructura de caja básica.
    2. +
  2. Asóciala semánticamente con la etiqueta de "comentarios" entregada.
    3. +
  3. Dentro de la lista, divide las opciones en 2 subgrupos - "principales" y "meriendas".
    4. +
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls2.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Otros controles 3

+ +

En la tarea final de esta evaluación, comenzaremos con la misma lista de opciones de comida. Sin embargo, esta vez queremos hacer las cosas de otra forma:

+ +
    +
  1. Crea una entrada de texto básica, que esté asociada semánticamente con la etiqueta entregada.
    2. +
  2. Coloca las opciones de comida en una lista que pueda ser asociada con una entrada de formulario.
    3. +
  3. Asocia la lista con tu entrada de texto, de forma que cuando escribas caracteres, cualquier opción de la lista que coincida con la secuencia de caracteres ingresada, aparezca en un listado desplegable como sugerencia de autocompletado.
    4. +
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/tasks/other-controls/other-controls3.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de Otros controles 1".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html b/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..d6ca2161a4 --- /dev/null +++ b/files/es/learn/html/forms/sending_and_retrieving_form_data/index.html @@ -0,0 +1,328 @@ +--- +title: Sending form data +slug: Learn/HTML/Forms/Sending_and_retrieving_form_data +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +
{{LearnSidebar}} {{PreviousMenuNext("Aprende / HTML / Formularios / The_native_form_widgets", "Aprender / html / Formularios / Form_validation", "Aprender / html / Forms")}}
+ +

En este artículo se analiza lo que sucede cuando un usuario envía un formulario - ¿A dónde van los datos y cómo los manejamos cuando llegan allí? - También tenemos en cuenta algunos de los problemas de seguridad asociados con el envío de los datos del formulario.

+ + + + + + + + + + + + +
Requisitos previos:Conocimientos básicos de informática, una comprensión de HTML , y conocimientos básicos de HTTP y programación del lado del servidor .
Objetivo:Para entender lo que sucede cuando se envía los datos del formulario, incluyendo la obtención de una idea básica de cómo se procesan los datos en el servidor
+ +

¿A dónde van los datos?

+ +

Aquí vamos a discutir lo que ocurre con los datos cuando se envía un formulario.

+ +

Sobre la arquitectura cliente / servidor

+ +

La web se basa en una arquitectura cliente / servidor muy básica que se puede resumir de la siguiente manera: un cliente (normalmente un navegador Web) envía una petición a un servidor (la mayoría de las veces un servidor web como Apache , Nginx , IIS , Tomcat , etc.), utilizando el protocolo HTTP . El servidor responde a la solicitud utilizando el mismo protocolo.

+ +

Un esquema básico de la arquitectura cliente Web / servidor

+ +

En el lado del cliente, un formulario HTML no es más que una manera fácil de usar conveniente para configurar una petición HTTP para enviar datos a un servidor. Esto permite al usuario para proporcionar información a ser entregada en la petición HTTP.

+ +
+

Nota : Para tener una mejor idea de cómo funcionan las arquitecturas cliente-servidor, lea nuestra programación de páginas web del lado del servidor, módulo: primeros pasos. En el lado del cliente: Debes definir como envías los datos.

+
+ +

El elemento {{HTMLElement ( "form")}} define cómo se enviarán los datos. Todos sus atributos están diseñados para que pueda configurar la solicitud que se enviará cuando un usuario pulsa un botón de envío. Los dos atributos más importantes son {{htmlattrxref ( "acción", "forma")}} y {{htmlattrxref ( "método", "forma")}}.

+ +

El atributo {{htmlattrxref ( "acción", "forma")}}.

+ +

Este atributo define el lugar donde los datos se envian. Su valor debe ser una dirección URL válida. Si no se proporciona este atributo, los datos serán enviados a la dirección URL de la página que contiene el formulario.

+ +

En este ejemplo, los datos se envían a una dirección URL absoluta - http://foo.com:

+ +
<Acción del formulario = "http://foo.com">
+ +

Aquí, nosotros usamos una URL relativa - los datos se envían a una dirección URL diferente en el servidor:

+ +
<Acción del formulario = "/ somewhere_else">
+ +

Cuando se especifica sin atributos, como abajo, el {{HTMLElement ( "form")}} los datos se envían a la misma página en que la "forma" está presente :

+ +
<Form>
+ +

Muchas páginas más antiguas utilizan la siguiente notación para indicar que los datos deben ser enviados a la misma página que contiene el formulario; Esto fue necesario porque hasta HTML5, el atributo {{htmlattrxref ( "acción", "form")}} fue requerido . Esto ya no es necesario.

+ +
<Form action = "#">
+ +
+

Nota: Es posible especificar una dirección URL que utiliza el protocolo HTTPS (HTTP seguro). Al hacer esto, los datos se cifran junto con el resto de la solicitud, incluso si el propio formulario está alojado en una página insegura se accede a través de HTTPS. Por otro lado, si el formulario está alojado en una página segura, pero se especifica una dirección URL HTTP insegura con el atributo {{htmlattrxref ( "acción", "form")}} , todos los navegadores mostrarán una advertencia de seguridad para el usuario cada vez  que intenten enviar datos, ya que estos no se pueden cifrar.

+
+ +

El atributo {{htmlattrxref ( "método", "form")}}

+ +

Este atributo define cómo se envían los datos. El protocolo HTTP proporciona varias formas de realizar una solicitud; Los datos del formulario HTML se pueden transmitir a través de un número de diferentes queridos, los más comunes de los cuales son el método GET y el método POST.

+ +

Para entender la diferencia entre estos dos métodos, vamos a dar un paso atrás y examinar cómo funciona HTTP. Cada vez que desee llegar a un recurso en la Web, el navegador envía una petición a una URL. Una petición HTTP consta de dos partes: un encabezado que contiene un conjunto de metadatos mundial sobre las capacidades del navegador, y un cuerpo que puede contener la información necesaria paraque el servidor pueda procesar la petición específica.

+ +
El método GET
+ +

El método GET es  utilizado por el navegador para pedir al servidor que se envíe de vuelta un recurso dado: "Hey servidor, quiero conseguir este recurso." En este caso, el navegador envía un cuerpo vacío. Debido a que el cuerpo está vacío, si un formulario se envía utilizando este método, los datos enviados al servidor se anexan a la URL.

+ +

Considere la siguiente forma:

+ +
<form action="http://foo.com" method="get">
+  <div>
+    <label for="decir"> ¿Qué saludo quiere decir? </label>
+    <input name="decir" id="decir" value="Hola">
+  </div>
+  <div>
+    <label for="para"> ¿A quién se lo quiere decir? </label>
+    <input name="para" value="mamá">
+  </div>
+  <div>
+    <button> Botón enviar mis saludos </ button>
+  </div>
+</form>
+ +

Dado que el método GETha conseguido el recurso, verá en la URL lo siguiente en la barra de direcciones del navegador www.foo.com/?say=Hi&to=Mom  cuando se envía el formulario.

+ +

Los datos se añaden a la URL como una serie de pares de nombre / valor. Después que la dirección web URL ha terminado, se incluye un signo de interrogación ( ?) seguido de los pares de nombre / valor, cada uno separado por un signo ( &). En este caso estamos pasando dos piezas de datos en el servidor:

+ + + +

La solicitud HTTP se ve así:

+ +
GET /? = Decir Hola & a = mamá HTTP / 1.1
+Anfitrión: foo.com
+ +
+

Nota : Puede encontrar este ejemplo en GitHub - ver llegar-method.html ( verlo en directo también ).

+
+ +
El método POST
+ +

El POSTmétodo es un poco diferente. Es el método que el navegador utiliza para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: "Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado." Si un formulario se envía utilizando este método, los datos se anexan al cuerpo de la petición HTTP.

+ +

Veamos un ejemplo - se trata de algo similar a como se vió en el método GETdel apartado anterior, pero con el {{htmlattrxref ( "método", "form")}} atributo establecido post.

+ +
<Form action = "http://foo.com" method = "post">
+  <Div>
+    <Label for = "dice"> Lo saludo qué quiere decir? </ Label>
+    <Input name = "decir" id = "decir" value = "Hola">
+  </ Div>
+  <Div>
+    <Label for = "para"> ¿Quién usted quiere decir que a? </ Label>
+    <Input name = "a" value = "mamá">
+  </ Div>
+  <Div>
+    <> Botón enviar mis saludos </ botón>
+  </ Div>
+</ Form>
+ +

Cuando el formulario se envía mediante el método POST, no se obtienen los datos adjuntos en la dirección URL, y la solicitud HTTP se parece a esto y los datos son incluidos en el cuerpo de la petición en su lugar:

+ +
POST / HTTP/1.1
+Anfitrión: foo.com
+Content-Type: application / x-www-form-urlencoded
+Content-Length: 13
+
+decir = Hi & a = mamá
+ +

La cabecera Content-Length indica el tamaño del cuerpo, y la cabecera Content-Type indica el tipo de recurso que se envía al servidor. Discutiremos estas cabeceras más adelante.

+ +
+

Nota : Puede encontrar este ejemplo en GitHub - ver post-method.html ( verlo en directo también ).

+
+ +

Visualización de peticiones HTTP

+ +

Las peticiones HTTP nunca se muestran al usuario (si quieres verlos, es necesario utilizar herramientas como el Monitor de red Firefox o las herramientas de desarrollo de Chrome ). A modo de ejemplo, los datos del formulario se muestran a continuación en la pestaña de Chrome red:

+ +

+ +

Lo único que se muestra al usuario es la dirección URL llamada. Como mencionamos anteriormente, con una peticiónGET del usuario,se verán los datos en su barra de direcciones, pero con una petición POST no será de esta manera. Esto puede ser muy importante por dos razones:

+ +
    +
  1. Si necesita enviar una contraseña (o cualquier otra pieza sensible de los datos), nunca utilice el métodoGET o se arriesga a mostrar en la barra de direcciones, lo que sería muy inseguro.
    2. +
  2. Si necesita enviar una gran cantidad de datos, el método POSt es preferible debido a que algunos navegadores limitan los tamaños de las direcciones URL. Además, muchos servidores limitan la longitud de las URL que aceptan.
    3. +
+ +

En el lado  Servidor: la recuperación de los datos

+ +

Sea cual sea el método HTTP que elija, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave / valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que use y de las estructuras específicas que pueda estar usando con él. La tecnología se utiliza también determina cómo se manejan claves duplicadas; A menudo,se da prioridad al valor recibido más recientemente para una clave dada .

+ +

Ejemplo: PHP Raw

+ +

PHP ofrece algunos objetos globales para acceder a los datos. Suponiendo que usted ha utilizado el métodoPOST, el siguiente ejemplo sólo toma los datos y lo muestra al usuario. Por supuesto, lo que se hace con los datos depende de usted. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.

+ +
<? Php
+  // La variable global $ _POST que permite acceder a los datos enviados con el método POST por su nombre
+  // Para acceder a los datos enviados con el método GET, puede usar $ _GET
+  $ = Decir htmlspecialchars ($ _POST [ 'decir']);
+  $ A = htmlspecialchars ($ _POST [ 'a']);
+
+  echo $ digamos, '', $ a;
+?>
+ +

Este ejemplo muestra una página con los datos que enviamos. Esto se puede ver en acción en nuestro archivo ejemplo php-example.html - que contiene un ejemplo similar en forma como el que hemos visto antes, con un methodcon parámetro posty un action con parámetro php-example.php Cuando se envía, envía los datos del formulario al script php-ejemplo.php , que contiene el código de PHP que se ha visto en el bloque anterior. Cuando se ejecuta este código, la salida en el navegador es Hi Mom.

+ +

+ +
+

Nota : Este ejemplo no funcionará cuando se carga en un navegador localmente - los navegadores no pueden interpretar  código PHP, por lo que cuando se envía el formulario en el navegador sólo  se puede ofrecer la descarga del archivo PHP para usted. Para conseguir que funcione, es necesario ejecutar el ejemplo a través de un servidor PHP de algún tipo. Buenas opciones para probar PHP locales son MAMP (Mac y Windows) y AMPPS (Mac, Windows, Linux).

+
+ +

Ejemplo: Python

+ +

Este ejemplo muestra como se puede utilizar Python para hacer la misma cosa - mostrar los datos presentados en una página web. Se utiliza el framework Flask para la prestación de las plantillas, el manejo de la presentación de datos de formulario, etc (ver python-example.py ).

+ +
from flask import Flask, render_template, request
+app = Flask(__name__)
+
+@app.route('/', methods=['GET', 'POST'])
+def form():
+    return render_template('form.html')
+
+@app.route('/hello', methods=['GET', 'POST'])
+def hello():
+    return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
+
+if __name__ == "__main__":
+    app.run()
+ +

Las dos plantillas de referencia en el código anterior son los siguientes:

+ + + +
+

Nota : Una vez más, este código no funcionará si sólo intenta cargarlo en un navegador directamente. Python funciona un poco diferente a PHP - Para ejecutar este código local que necesita para instalar Python / PIP , a continuación, instalar el frasco utilizando pip3 install flask. En este punto, usted debe ser capaz de ejecutar el ejemplo utilizando python3 python-example.py, a continuación, deberá navegar a localhost:5000en su barra de direcciones.

+
+ +

Otros lenguajes y frameworks

+ +

Hay muchas otras tecnologías del lado del servidor que puede utilizar para el manejo de formularios, incluyendo Perl , Java , .Net , Rubí , etc. Sólo tiene que elegir el que más le guste. Dicho esto, vale la pena señalar que es muy raro de usar estas tecnologías directamente porque esto puede ser complicado. Es más común el uso de uno de los muchos marcos de trabajo para un manejo más fácil del código, tales como:

+ + + +

Vale la pena señalar que incluso el uso de estos marcos, trabajar con formularios no es necesariamente fácil . Pero es mucho más fácil que tratar de escribir toda la funcionalidad  a partir de cero, además, le ahorrará mucho tiempo.

+ +
+

Nota : Está más allá del alcance de este artículo para enseñarle cualquier lenguaje del lado del servidor o marcos de trabajo. Los enlaces de arriba le dará un poco de ayuda,en caso de que desee aprender.

+
+ +

Un caso especial: el envío de archivos

+ +

El envío de archivos con formularios HTML es un caso especial. Los archivos son datos binarios - o considerados como tal - mientras que todos los demás datos son datos de texto. Debido a que HTTP es un protocolo de texto, existen requisitos especiales para el manejo de datos binarios.

+ +

El {{htmlattrxref ( "enctype", "form")}} atributo

+ +

Este atributo le permite especificar el valor de la cabecera Content-Type HTTP incluido en la solicitud que se genera cuando se envía el formulario. Esta cabecera es muy importante porque le dice al servidor qué tipo de datos se está enviando. Por defecto, su valor es application/x-www-form-urlencoded. En términos humanos, esto significa: "Estos son datos de formulario que han sido codificados dentro de los parámetros de la URL."

+ +

Si desea enviar archivos, es necesario tomar tres pasos adicionales:

+ + + +

Por ejemplo:

+ +
<Form method = "post" enctype = "multipart / form-data">
+  <Div>
+    <Label for = "archivo"> ​​Elija un archivo </ label>
+    <Input type = "file" id = "file" name = "myFile">
+  </ Div>
+  <Div>
+    <> Botón Enviar el archivo </ botón>
+  </ Div>
+</ Form>
+ +
+

Nota: Algunos navegadores son compatibles con la {{htmlattrxref ( "múltiple", "input")}} atributo en el elemento {{HTMLElement ( "input")}}, lo que permite elegir más de un archivo  para subir con un único elemento <input> . Cómo el servidor gestiona los archivos realmente depende de la tecnología utilizada en el servidor. Como se mencionó anteriormente, el uso de un marco le hará la vida mucho más fácil.

+
+ +
+

Advertencia: Muchos servidores están configurados con un límite de tamaño para los archivos y las peticiones HTTP con el fin de prevenir el abuso. Es importante comprobar este límite con el administrador del servidor antes de enviar un archivo.

+
+ +

Precauciones de seguridad comunes

+ +

Cada vez que envíe datos a un servidor, debe tener en cuenta la seguridad de sus formularios HTML que son con mucho, los vectores de ataque más comunes (en lugares donde ocurren los ataques contra servidores). Los problemas nunca vienen de los formulariosHTML mismos - sino que proceden de cómo el servidor maneja los datos.

+ +

Dependiendo de lo que estés haciendo, hay algunos problemas de seguridad muy conocidos con los que te enfrentarás:

+ +

XSS y CSRF

+ +

Cross-Site Scripting (XSS) y Cross-Site Request Falsification (CSRF) son tipos comunes de ataques que se producen cuando se muestran los datos enviados por un usuario y que son devueltos a otro usuario para otro uso.

+ +

XSS permite a los atacantes inyectar secuencias de comandos del lado del cliente en páginas Web visitadas por otros usuarios. Una vulnerabilidad de secuencias de comandos entre sitios, puede ser utilizada por los atacantes para eludir los controles de acceso, como la política del mismo origen . El efecto de estos ataques pueden ir desde una pequeña molestia a un riesgo de seguridad.

+ +

Los ataques CSRF son similares a los ataques XSS porque comienzan de la misma manera - mediante la inyección de comandos de cliente en páginas Web - pero su objetivo es diferente. Los atacantes CSRF tratan de escalar privilegios  de un usuario de mayores privilegios (por ejemplo, un administrador de sitio) para realizar una acción que no deberían ser capaces de hacer (por ejemplo, el envío de datos a un usuario no fiable).

+ +

Los ataques XSS explotan la confianza depositada a un usuario de un sitio web, mientras que los ataques CSRF abusan de la confianza que un sitio web ofrece para sus usuarios.

+ +

Para evitar estos ataques, siempre se deben comprobar los datos que un usuario envía a su servidor y (si es necesario mostrarlos) trate de no mostrar el contenido HTML provisto por el usuario. En su lugar, se deben procesar los datos proporcionados por el usuario para no mostrarlos al pie de la letra. Casi todos los marcos de trabajo (frameworks) en el mercado hoy implementan un filtro mínimo que eliminan el código HTML {{HTMLElement ( "script")}}, {{HTMLElement ( "iframe")}} y {{HTMLElement ( "objeto")}} si fuesen enviados por cualquier usuario. Esto ayuda a mitigar el riesgo, pero no necesariamente lo erradica.

+ +

Inyección SQL

+ +

La inyección de SQL es un tipo de ataque que intenta realizar acciones en una base de datos utilizada por el sitio web de destino. Esto normalmente implica el envío de una petición SQL con la esperanza de que el servidor la ejecutará (por lo general cuando el servidor de aplicaciones intenta almacenar los datos enviados por un usuario). Esto es en realidad uno de los principales vectores de ataque contra los sitios web  .

+ +

Las consecuencias pueden ser terribles, que van desde la pérdida de datos o hasta que los ataques  tomen el control de la infraestructura de todo el sitio web mediante el uso de una escalada de privilegios. Esta es una amenaza muy seria y nunca debe almacenar los datos enviados por un usuario sin realizar alguna sanitización (por ejemplo, mediante el uso mysql_real_escape_string()de una infraestructura de PHP / MySQL).

+ +

Inyección de cabecera HTTP y la inyección de correo electrónico

+ +

Este tipo de ataques pueden ocurrir cuando su aplicación se basa cabeceras HTTP o mensajes de correo electrónico basado en la entrada de datos por un usuario en un formulario. Estos no dañan directamente su servidor o afectan a sus usuarios, pero son una puerta abierta a problemas más profundos tales como el secuestro de sesión o ataques de phishing.

+ +

Estos ataques son en su mayoría en silencio, y pueden volver a su servidor en un zombi .

+ +

Sea paranoico: Nunca confíe en sus usuarios

+ +

Entonces, ¿cómo se lucha contra estas amenazas? Este es un tema mucho más allá de esta guía, pero hay algunas reglas a tener en cuenta. La regla más importante es: nunca vuelva a confiar en sus usuarios, incluyáse a sí mismo; incluso un usuario de confianza podría haber sido secuestrado.

+ +

Todos los datos que vienen a su servidor deben comprobarse y ser desinfectados. Siempre. Sin excepción.

+ + + +

Debería evitar muchos o  la mayoría de estos problemas, si sigue estas tres reglas, pero siempre es una buena idea  obtener una revisión de seguridad realizada por una tercera parte competente. No asuma que usted ha visto todos los posibles problemas.

+ +
+

Nota : La seguridad del sitio web el artículo de nuestro lado del servidor tema de aprendizaje analiza las amenazas anteriores y las posibles soluciones con más detalle.

+
+ +

Conclusión

+ +

Como se puede ver, el envío de los datos del formulario es fácil, pero asegurar una aplicación puede ser complicado. Sólo recuerde que un desarrollador de aplicaciones para usuario no es el que debe definir el modelo de seguridad de los datos. Sí, como veremos, es posible realizar la validación de los datos del lado del cliente , pero el servidor no puede confiar en esta validación porque no tiene manera de saber realmente lo que  sucede en el lado del cliente.

+ +

Ver también

+ +

Si desea obtener más información sobre la seguridad de una aplicación web, se puede excavar en estos recursos:

+ + + +

{{PreviousMenuNext ( "Aprende / html / Formularios / The_native_form_widgets", "Saber / html / Formularios / Form_validation", "Aprender / html / Forms")}}

diff --git a/files/es/learn/html/forms/styling_html_forms/index.html b/files/es/learn/html/forms/styling_html_forms/index.html new file mode 100644 index 0000000000..26b4173ee8 --- /dev/null +++ b/files/es/learn/html/forms/styling_html_forms/index.html @@ -0,0 +1,345 @@ +--- +title: Estilizando formularios HTML +slug: Learn/HTML/Forms/Styling_HTML_forms +translation_of: Learn/Forms/Styling_web_forms +--- +

En este artículo aprenderemos como utilizar CSS con formularios HTML  para hacerlos más atractivos. Aunque parezca extraño, esto es algo que puede llegar a ser complicado. Por razones históricas y técnicas, los widgets de formulario no suelen llevarse bien con CSS. Por este motivo, muchos desarrolladores prefieren construir sus propios widgets para tener el control de su aspecto en vez de utilizar los nativos. De todas formas, con los modernos navegadores, los diseñadores web cada vez tienen  más control sobre el diseño de los elementos de formulario. Vamos a profundizar en esto.

+ +

¿Porqué es tan difícil aplicar estilos a formularios con CSS?

+ +

En los principios de la Web —allá por1995—se añadieron los controles de formulario en la 2ª especificación HTML. Debido a la complejidad de los widgets de formulario, los implementadores prefirieron dejar que el sistema operativo subyacente se encargara de su manejo y presentación.

+ +

Pocos años después,  se creó CSS y lo que era una necesidad técnica— es decir, el uso de widgets nativos para implementar controles de formulario—empezó a requerir estilizado. Y en los primeros días de CSS, el estilizado de formularios no fué una prioridad.

+ +

Por otra parte, como los usuarios estaban acostumbrados a la apariencia visual de sus plataformas respectivas, los fabricantes de navegadores fueron reacios a hacer que los controles de formularios pudieran recibir estilos.

+ +

Hoy en día, ni siquiera uno solo de los navegadores actuales implementa completamente a CSS 2.1. Afortunadamente, con el tiempo, los fabricantes de navegadores han ido mejorado su soporte a CSS para los elementos de formulario e, incluso considerando que su usabilidad tiene mala reputación, actualmente, ya se puede usar CSS para estilizar formularios HTML.

+ +

No todos los widgets se crean igual con CSS

+ +

Actualmente aun se encuentran dificultades cuando se utiliza CSS con formularios; estos problemas se pueden dividir en tres categorías.

+ +

El bueno

+ +

A algunos elementos se les puede dar estilo con pocos o ningún problema independientemente de la plataforma. Entre estos se incluyen los siguientes elementos estructurales:

+ +
    +
  1. {{HTMLElement("form")}}
    2. +
  2. {{HTMLElement("fieldset")}}
    3. +
  3. {{HTMLElement("label")}}
    4. +
  4. <output>
    5. +
+ +

Esto también incluye todos los campos de texto (tanto los de línea simple como los de línea múltiple) y los botones.

+ +
    +
+ +

El malo

+ +

Hay otros elementos a los que raramente se les puede aplicar estilos y pueden llegar a requerir  técnicas complejas y ocasionalmente necesitan conocimientos avanzados de CSS3.

+ +

Entre estos se incluyen el elemento {{HTMLElement("legend")}} ; que no puede posicionarse adecuadamente en todas las plataformas.  Los elementos checkbox y los botones de radio no permiten que se le apliquen estilos directamente;  de todas formas, gracias a CSS3 esto puede soslayarse. Al contenido de  placeholder no se le puede aplicar estilo de ninguna forma convencional; sin embargo, todos los navegadores que lo implementan  también implementan pseudo-elementos o pseudo-clases propietarias que permiten darles estilo.

+ +

Veremos como trabajar con estos casos específicos en el artículo Advanced styling for HTML forms.

+ +

El feo

+ +

En algunos elementos, simplemente no se puede utilizar CSS. Estos son todos los elementos avanzados de interface de usuario tales como los controles range, color, o date, e igualmente pasa con los widgets desplegables como select, option, optgropup y datalist. Respecto al selector de archivos, es bien sabido que no puede aplicarse estilo en absoluto. Los nuevos elementos progress y meter también caen dentro de esta categoría.

+ +

El principal problema con todos estos widgets viene de que todos ellos tienen una estructura muy compleja y CSS no es lo suficientemente expresivo para estilizar cada una de sus sutiles partes. Si lo que se quiere es personalizar estos widgets se deberá recurrir a javaScript para construir un árbol DOM que te permita acceder a ellos. Para aprender como conseguirlo mirar en el artículo How to build custom form widgets.

+ +

Estilizado básico

+ +

Aplicar estilos a elementos que son fáciles de estilizar con CSS, no debería suponer ninguna dificultad ya que básicamente se comportan como cualquier otro elemento HTML. De todas formas, el agente de usuario de estilos para cada navegador puede mostrar pequeñas inconsistencias por lo que a continuación daremos algunos trucos para ayudar a aplicar estilos más cómodamente.

+ +

Campos de búsqueda

+ +

Las cajas de búsqueda son el único tipo de campo de texto que pueden ofrecer más dificultad al aplicar estilos. En los navegadores basados en webkit (Chrome, Safari, etc.) se debe lidiar con la propiedad -webkit-. Discutiremos esta propiedad más tarde en el artículo: Advanced styling for HTML forms.

+ +

Ejemplo

+ +
<form>
+  <input type="search">
+</form>
+
+ +
input[type=search] {
+  border: 1px dotted #999;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+}
+ +

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

+ +

En esta captura de pantalla pueden verse dos campos de búsqueda en Chrome, ambos campos tienen definido el borde como en nuestro ejemplo, pero el primero no utiliza -webkit- mientras que el segundo si lo hace con -webkit-appearance:none. Las diferencias son evidentes.

+ +

Fuentes y texto

+ +

Las fuentes y capacidades de texto de CSS  se pueden utilizar sin problemas en cualquier widget (y sí, se puede utilizar @font-face en formularios). De todas formas, el comportamiento de los navegadores no es siempre consistente. Por defecto, algunos widgets no heredan font-family ni font-size de sus antecesores. Y muchos navegadores utilizan la apariencia por defecto. Para mantener la coherencia de los formularios con el resto de elementos se deben añadir las siguientes reglas a la hoja de estilos:

+ +
button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}
+ +

La siguiente captura de pantalla muestra estas incosistencias; a la izquierda la apariencia por defecto en Firefox sobre Mac OS X, usando las fuentes por defecto de la plataforma. A la derecha los mismos elementos aplicando nuestras reglas de armonización de fuentes.

+ +

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

+ +

Hay muchas controversia sobre si los formularios tienen mejor aspecto usando los estilos por defecto del sistema o usando estilos personalizados que coincidan con el resto del contenido. Como diseñador del sitio o aplicación Web esta decisión  es suya.

+ +

Modelo de cajas

+ +

Todos los campos de texto tienen soporte completo para las propiedades relacionadas con el modelo de cajas de CSS (width, height, padding, margin y border). Igual que antes, los navegadores se remiten a los estilos por defecto del sistema cuando muestran estos widgets. A cada cual te corresponde el como combinarlos dentro del resto de contenido. Si  se quieres mantener el aspecto nativo de los widgets, entonces hay que afrontar pequeñas inconsistencias de tamaño.

+ +

Esto es porque cada widget tiene sus propias reglas para el orden, margen y padding. Por lo que si quieres darle el mismo tamaño a varios widgets diferentes se debe usar la propiedad box-sizing: 

+ +
input, textarea, select, button {
+  width : 150px;
+  margin: 0;
+
+  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
+     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
+          box-sizing: border-box;
+}
+ +

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

+ +

En la captura de pantalla de arriba, la columna la izquierda es sin utilizar box-sizing, mientras que la de la derecha usa esta propiedad con el valor border-box. Obsérvese cómo esto permite asegurar que todos los elementos ocupan la misma cantidad de espacio, independientemente de las reglas por defecto de la plataforma.

+ +

Posicionado

+ +

El posicionado de formularios HTML no es generalmente  un problema; sin embargo, hay dos elementos a los que prestar una especial atención:

+ +

legend

+ +

El elemento legend no tiene problemas de estilizado a excepción de las reglas de posición. En los navegadores el elemento legend se posiciona encima del borde superior de su antecesor fieldset. No existe ninguna posibilidad de colocarlo dentro del flujo HTML más allá del borde superior. Sin embargo se puede posicionar de forma relativa o absoluta mediante la propiedad position. En cualquier caso sigue siendo parte del borde de fieldset.

+ +

Debido a que el elemento legend es muy importante por razones de accesibilidad (esto es lo que leen las tecnologías de asistencia como parte de las etiquetas de cada elemento de formulario dentro del fieldset), bastante menudo se empareja con un título que se oculta pero siendo aun accesible, de la forma siguiente:

+ +
HTML
+ +
<fieldset>
+  <legend>Hi!</legend>
+  <h1>Hello</h1>
+</fieldset>
+ +
CSS
+ +
legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+ +

textarea

+ +

Por defecto, todos los navegadores consideran el elemento textarea como un inline block alineado con la línea base del texto. Esto es algo que raramente es lo que en realidad se quiere. Para convertir este elemento de un inline-block a uno tipo block, se realiza bastante fácilmente utilizando la propiedad display. Si lo que quieres es utilizarlo inline, es corriente cambiar la alineación vertical: 

+ +
textarea {
+  vertical-align: top;
+}
+ +

Ejemplo

+ +

Vamos a ver un ejemplo de como aplicar estilo a un formulario HTML. Esto nos ayudará a tener las ideas más claras. A continuación construiremos el siguiente formulario de contacto de esta postal:

+ +

This is what we want to achieve with HTML and CSS

+ +

HTML

+ +

El HTML  incluye poco más de lo que se utiliza en el primer artículo de esta guía; apenas el título y algún ID más.

+ +
<form>
+  <h1>to: Mozilla</h1>
+
+  <div id="from">
+    <label for="name">from:</label>
+    <input type="text" id="name" name="user_name">
+  </div>
+
+  <div id="reply">
+    <label for="mail">reply:</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
+
+  <div id="message">
+    <label for="msg">Your message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Send your message</button>
+  </div>
+</form>
+ +

CSS

+ +

¿Aqui es donde empieza la diversión! Antes de empezar a codificar, necesitamos tres elementos adicionales:

+ +
    +
  1. El fondo de la postal
    2. +
  2. Una fuente tipográfica: la "Secret Typewriter" de fontsquirrel.com
    3. +
  3. Una fuente manuscrita: la "Journal" fde fontsquirrel.com
    4. +
+ +

Ahora podemos repasar el código. Primero preparamos las bases definiendo las reglas  @font-face y los elementos básicos de <body> y <form> 

+ +
@font-face{
+  font-family : "handwriting";
+
+  src : url('journal.eot');
+  src : url('journal.eot?') format('eot'),
+        url('journal.woff') format('woff'),
+        url('journal.ttf') format('truetype');
+}
+
+@font-face{
+  font-family : "typewriter";
+
+  src : url('veteran_typewriter.eot');
+  src : url('veteran_typewriter.eot?') format('eot'),
+        url('veteran_typewriter.woff') format('woff'),
+        url('veteran_typewriter.ttf') format('truetype');
+}
+
+body {
+  font  : 21px sans-serif;
+
+  padding : 2em;
+  margin  : 0;
+
+  background : #222;
+}
+
+form {
+  position: relative;
+
+  width  : 740px;
+  height : 498px;
+  margin : 0 auto;
+
+  background: #FFF url(background.jpg);
+}
+ +

Ahora podemos posicionar los elementos, incluidos el título y los elementos del formulario.

+ +
h1 {
+  position : absolute;
+  left : 415px;
+  top  : 185px;
+
+  font : 1em "typewriter", sans-serif;
+}
+
+#from {
+  position: absolute;
+  left : 398px;
+  top  : 235px;
+}
+
+#reply {
+  position: absolute;
+  left : 390px;
+  top  : 285px;
+}
+
+#message {
+  position: absolute;
+  left : 20px;
+  top  : 70px;
+}
+ +

Aquí es donde empezamos a trabajar los propios elementos. Primero, nos aseguramos que los elementos  <label> reciben la fuente correcta.

+ +
label {
+  font : .8em "typewriter", sans-serif;
+}
+ +

Los campos de texto necesitan algunas reglas comunes. Dicho simplemente, le quitamos bordes y fondos y redefinimos el padding y margin.

+ +
input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}
+ +

Cuando uno de estos campos recibe el foco, vamos a resaltarlo con un fondo transparente gris claro. Tome nota de que es importante añadir la propiedad  outline  para quitar el resaltado de enfoque añadido por defecto por algunos navegadores.

+ +
input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}
+ +

Ahora que nuestros campos de texto están terminados, necesitamos ajustar como se muestran los campos de simple y múltiple línea para que coincidan, ya que lo normal es que por defecto no se vean igual.

+ +

El campo de línea simple requiere de algunos trucos para que se vean bien en Internet Explorer. Internet Explorer no define la altura de los campos basándose en la altura natural de la fuente (lo cual es el comportamiento normal del resto de navegadores). Para corregir esto necesitamos añadir explícitamente la altura a los campos de la siguiente forma:

+ +
input {
+    height: 2.5em; /* for IE */
+    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
+}
+ +

Los elementos <textarea> se muestran por defecto como bloques, Las dos cosas importantes aquí son las propiedades  resize y overflow. Ya que nuestro diseño es de tamaño fijo, utilizaremos la propiedad resize para impedir que el usuario pueda cambiar el tamaño de los campos multilínea. La propiedad  overflow  se utiliza para que el campo se muestre de forma más consistente a través de diversos navegadores; algunos de ellos ponen por defecto esta propiedad en auto, pero en nuestro caso, es mejor asegurarse de que todos estén en auto.

+ +
textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}
+ +

El elemento <button> se acomoda muy bien a CSS; se puede hacer lo que se quiera con el, ¡incluso utilizando pseudo-elementos!

+ +
button {
+  position     : absolute;
+  left         : 440px;
+  top          : 360px;
+
+  padding      : 5px;
+
+  font         : bold .6em sans-serif;
+  border       : 2px solid #333;
+  border-radius: 5px;
+  background   : none;
+
+  cursor       : pointer;
+
+-webkit-transform: rotate(-1.5deg);
+   -moz-transform: rotate(-1.5deg);
+    -ms-transform: rotate(-1.5deg);
+     -o-transform: rotate(-1.5deg);
+        transform: rotate(-1.5deg);
+}
+
+button:after {
+  content: " >>>";
+}
+
+button:hover,
+button:focus {
+  outline   : none;
+  background: #000;
+  color   : #FFF;
+}
+ +

Y ¡listo! Sientase libre de probarlo usted mismo; como comprobará ¡esto funciona!

+ +

Conclusión

+ +

Como puede verse, mientras que queramos construir formularios solo con campos de texto y botones, es sencillo aplicarles estilos con CSS. Si desea saber más pequeños trucos de CSS que le hagan más fácil la vida al trabajar con formularios, echele un vistazo a la parte de formularios de the normalize.css project.

+ +

En el próximo artículo, veremos como manejar widgets de formulario de la categoría de "el malo" y "el feo".

diff --git a/files/es/learn/html/forms/the_native_form_widgets/index.html b/files/es/learn/html/forms/the_native_form_widgets/index.html new file mode 100644 index 0000000000..c8a2651837 --- /dev/null +++ b/files/es/learn/html/forms/the_native_form_widgets/index.html @@ -0,0 +1,326 @@ +--- +title: Controles de formulario originales +slug: Learn/HTML/Forms/The_native_form_widgets +translation_of: Learn/Forms/Basic_native_form_controls +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
+ +

En el artículo anterior, marcamos un ejemplo de formulario web funcional, presentamos algunos controles de formulario y elementos estructurales comunes, y nos centramos en las mejores prácticas de accesibilidad. A continuación, veremos con detalle las funciones de los diferentes controles de formulario, o widgets, y estudiaremos todas las diferentes opciones de que se dispone para la recopilación de diferentes tipos de datos. En este artículo en particular, veremos el conjunto original de controles de formulario, disponible en todos los navegadores desde los primeros días de la web.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML.
Objetivo:Comprender en detalle el conjunto original de controles de formulario originales disponibles en los navegadores para la recopilación de datos y su implementación con HTML.
+ +

Ya conoces algunos elementos de formulario, incluidos {{HTMLelement ('form')}}, {{HTMLelement ('fieldset')}}, {{HTMLelement ('legend')}}, {{HTMLelement ('textarea' )}}, {{HTMLelement ('label')}}, {{HTMLelement ('button')}} y {{HTMLelement ('input')}}. Este artículo expone:

+ + + +
+

Nota: Las características que se consideran en este artículo son compatibles con todos los navegadores, lo que no es el caso para todos los controles de formulario. En los próximos dos artículos vamos a exponer los controles de formulario que se han añadido a HTML5 más recientemente. Si quieres una referencia más avanzada, consulta nuestra referencia a elementos de formulario HTML, y en particular nuestra extensa referencia a tipos <input>.

+
+ +

Campos de entrada de texto

+ +

Los campos de texto {{htmlelement ("input")}} son los controles de formulario más básicos. Son un modo muy cómodo de permitir al usuario introducir cualquier tipo de datos, y ya hemos visto algunos ejemplos sencillos.

+ +
+

Nota: Los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una edición enriquecida (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.

+
+ +

Todos los controles de texto básicos comparten algunos comportamientos comunes:

+ + + +
+

Nota: El elemento {{htmlelement ("input")}} es único entre los elementos HTML porque puede tomar muchas formas diferentes según el valor de su atributo. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, controles sin introducción de texto, como casillas de verificación, botones de opción y selectores de color, y botones.

+
+ +

Campos de texto de una sola línea

+ +

Un campo de texto de una sola línea se crea utilizando un elemento {{HTMLElement ("input")}} cuyo valor de atributo {{htmlattrxref ("type","input")}} se establece en text, u omitiendo por completo el atributo {{htmlattrxref ( "type","input")}} (text es el valor predeterminado). El valor text de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo {{htmlattrxref ("type","input")}} (por ejemplo, si especificas type="color" y el navegador no está dotado en origen de un control de selección de colores).

+ +
+

Nota: Puedes encontrar ejemplos de todos los tipos de campo de texto de una sola línea en GitHub en single-line-text-fields.html (o consultarlo en vivo).

+
+ +

Aquí hay un ejemplo básico de campo de texto de una sola línea:

+ +
<input type="text" id="comment" name="comment" value="I'm a text field">
+ +

Los campos de texto de una sola línea solo tienen una restricción verdadera: si escribes el texto con saltos de línea, el navegador elimina esos saltos de línea antes de enviar los datos al servidor.

+ +

La captura de pantalla siguiente muestra los tipos de entrada de texto predeterminado, activo (con el foco) y deshabilitado en Firefox 71 y Safari en macOS y en Chrome 79 y Edge 18 en Windows 10.

+ +

Captura de pantalla del atributo deshabilitado y predeterminado: estilo para una entrada de texto activa (con el foco) en Firefox, Safari, Chrome y Edge.

+ +
+

Nota: HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo {{htmlattrxref ("type", "input")}} que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos en el artículo siguiente: Los tipos de entrada en HTML5.

+
+ +

Campo de contraseña

+ +

Uno de los tipos de entrada originales era el tipo de campo de texto password:

+ +
<input type="password" id="pwd" name="pwd">
+ +

El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.

+ +

Ten en cuenta que esto es solo una función de interfaz de usuario; a menos que envíes tu formulario en modo seguro, se enviará como texto plano, lo que es malo desde el punto de vista de la seguridad porque alguien con malas intenciones podría interceptar tus datos y robar tus contraseñas, datos de tarjetas de crédito o cualquier otra cosa que hayas enviado. La mejor manera de proteger a los usuarios de esto es alojar cualquier página que contenga formularios en una ubicación de conexión segura (es decir, en una dirección https://), de modo que los datos se cifren antes de enviarse.

+ +

Los navegadores reconocen las implicaciones de seguridad de enviar datos de formulario por una conexión insegura y disponen de mensajes de advertencia para disuadir a los usuarios de usar formularios no seguros. Para obtener más información sobre las implementaciones de Firefox al respecto, consulta el artículo Contraseñas inseguras.

+ +

Contenido oculto

+ +

Otro control de texto original es el tipo de entrada hidden. Se usa para crear un control de formulario que es invisible para el usuario, pero que aun así se envía al servidor junto con el resto de los datos del formulario una vez se transmiten; por ejemplo, es posible que desees enviar una marca de tiempo al servidor que indique cuándo se realizó un pedido. Al estar oculto, el usuario no puede ver ni editar su valor intencionadamente, el control nunca recibirá el foco y un lector de pantalla tampoco lo detectará.

+ +
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+
+ +

Si creas un elemento así, es necesario establecer sus atributos name y value. Su valor puede establecerse dinámicamente a través de JavaScript. El tipo de entrada oculta no debe tener ninguna etiqueta asociada.

+ +

Otros tipos de entrada de texto, como {{HTMLElement ("input / search", "search")}}, {{HTMLElement ("input / url", "url")}} y {{HTMLElement ("input / tel" , "tel")}}, se añadieron con HTML5. Se tratarán en el próximo artículo: Tipos de entrada HTML5.

+ +

Elementos de selección: casillas de verificación y botones de opción

+ +

Los elementos de selección (o checkable items, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o check boxes) y los botones de opción (o radio buttons). Ambos usan el atributo checked para indicar si el control de formulario está seleccionado por defecto o no.

+ +

Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo name, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor on.

+ +
+

Nota: Puedes encontrar los ejemplos de esta sección en GitHub como checkable-items.html (o consultarlos en vivo).

+
+ +

Para una usabilidad/accesibilidad óptima, te recomendamos delimitar cada lista de elementos que estén relacionados entre sí dentro de un elemento {{htmlelement ("fieldset")}} con un elemento {{htmlelement ("legend")}} que proporcione una descripción general de la lista. Cada par individual de elementos {{htmlelement ("label")}}/{{htmlelement ("input")}} ha de estar contenido en un elemento de lista propio (o similar). El elemento {{htmlelement ('label')}} asociado se coloca en general inmediatamente después del botón de opción o la casilla de verificación, con las instrucciones para el grupo de botones de opción o casillas de verificación, que suelen ser el contenido del elemento {{htmlelement ("legend")}}. Observa las estructuras de ejemplo en los ejemplos asociados anteriores.

+ +

Casillas de verificación

+ +

Las casillas de verificación se crean estableciendo el atributo type del elemento {{HTMLElement ("input")}} en el valor {{HTMLElement ("input / checkbox", "checkbox")}}.

+ +
<input type="checkbox" id="carrots" name="carrots" value="carrots" checked>
+
+ +

Al incluir el atributo checked, la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.

+ +

Las capturas de pantalla siguientes muestran casillas de verificación predeterminadas, activas (con el foco) y deshabilitadas en Firefox 71 y Safari 13 en macOS y Chrome 79 y Edge 18 en Windows 10:

+ +

Casillas de verificación predeterminadas, activas y deshabilitadas en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

+ +
+

Nota: Las casillas de verificación y los botones de opción con atributo checked al cargarse coinciden con la pseudoclase {{cssxref (':default')}}, incluso aunque ya no estén seleccionadas. Las que están seleccionadas coinciden con la pseudoclase {{cssxref(':checked')}}.

+
+ +

Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un ejemplo en acción (observa también el código fuente).

+ +

Botón de opción

+ +

Un botón de opción se crea estableciendo el atributo {{htmlattrxref ("type", "input")}} del elemento {{HTMLElement ("input")}} en el valor radio:

+ +
<input type="radio" id="soup" name="meal" checked>
+ +

Es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo {{htmlattrxref ("name", "input")}}, se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.

+ +
<fieldset>
+  <legend>¿Cuál es tu comida favorita?</legend>
+  <ul>
+    <li>
+      <label for="soup">Sopa</label>
+      <input type="radio" id="soup" name="meal" value="soup" checked>
+    </li>
+    <li>
+      <label for="curry">Curry</label>
+      <input type="radio" id="curry" name="meal" value="curry">
+    </li>
+    <li>
+      <label for="pizza">Pizza</label>
+      <input type="radio" id="pizza" name="meal" value="pizza">
+    </li>
+  </ul>
+</fieldset>
+ +

Las capturas de pantalla siguientes muestran botones de opción sin seleccionar y seleccionados, algunos con el foco y otros desactivados sin seleccionar y seleccionados, en Firefox 71 y Safari 13 en MacOS y Chrome 79 y Edge 18 en Windows 10.

+ +

Botones de opción en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

+ +

Botones

+ +

El botón de opción no es realmente un botón, a pesar de su nombre; sigamos adelante y echemos un vistazo a los controles de formulario que son botones propiamente. Hay tres tipos de entrada según el tipo de botones que se utilicen:

+ +
+
submit
+
Envía los datos del formulario al servidor. Para los elementos {{HTMLElement ("button")}}, omitir el atributo type (o introducir un valor de tipo no válido) da como resultado un botón de envío (submit).
+
reset
+
Restablece todos los controles de formulario a sus valores por defecto.
+
button
+
Botones que no tienen efecto automático, pero que se pueden personalizar con código JavaScript.
+
+ +

Además, el elemento {{htmlelement ("button")}} puede tomar un atributo type para imitar estos tres tipos de entrada. La diferencia principal entre los dos es que los elementos <button> propiamente admiten aplicación de estilo en mayor medida.

+ +
+

Nota: El tipo de entrada image también se representa como un botón. También desarrollaremos este tema más adelante.

+
+ +
+

Nota: Puedes encontrar los ejemplos de esta sección en GitHub como button-examples.html (o consultarlos en vivo).

+
+ +

A continuación puedes encontrar ejemplos de cada tipo de botón <input>, junto con el tipo de botón equivalente.

+ +

enviar

+ +
<button type="submit">
+    Este es un <strong>botón de envío</strong>
+</button>
+
+<input type="submit" value="Este es un botón de envío">
+ +

reiniciar

+ +
<button type="reset">
+    Este es un <strong>botón de reinicio</strong>
+</button>
+
+<input type="reset" value="Este es un botón de reinicio">
+ +

anónimo

+ +
<button type="button">
+    Este es un <strong>botón anónimo</strong>
+</button>
+
+<input type="button" value="Este es un botón anónimo">
+ +

Los botones siempre se comportan igual, independientemente de su usas un elemento {{HTMLElement ("button")}} o un elemento {{HTMLElement ("input")}}. Sin embargo, como puedes ver en los ejemplos, los elementos {{HTMLElement ("button")}} te permiten usar HTML en tu contenido, que se inserta entre las etiquetas <button> de apertura y cierre. Los elementos {{HTMLElement ("input")}}, por otro lado, son elementos vacíos; el contenido que muestran está inserto en el atributo value y, por lo tanto, solo acepta contenido de texto sin formato.

+ +

Los ejemplos siguientes muestran los tipos de entrada de botones predeterminados, activos y deshabilitados: en Firefox 71 y Safari 13 en macOS, y Chrome 79 y Edge 18 en Windows 10.

+ +

Tipos de entrada de botones predeterminados, activos y deshabilitados en Firefox 71 y Safari 13 en Mac y Chrome 79 y Edge 18 en Windows 10

+ +

Botón de imagen

+ +

El control botón de imagen se muestra exactamente como un elemento {{HTMLElement ("img")}}, excepto que cuando el usuario hace clic en él, se comporta como un botón de envío.

+ +

Se crea un botón de imagen usando un elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en el valor image. Este elemento admite exactamente el mismo conjunto de atributos que el elemento {{HTMLElement ("img")}}, además de todos los atributos que admiten el resto de botones de formulario.

+ +
<input type="image" alt="¡Púlsame!" src="my-img.png" width="80" height="30">
+ +

Si el botón de imagen se usa para enviar un formulario, este control no envía su valor; en lugar de ello se envían las coordenadas X e Y del clic que se ha hecho sobre la imagen (las coordenadas son relativas a la imagen, lo que significa que la esquina superior izquierda de la imagen representa la coordenada (0, 0)). Las coordenadas se envían como dos pares clave/valor:

+ + + +

Por ejemplo, cuando haces clic en las coordenadas (123, 456) de la imagen y se hace el envío por el método get, verás los valores añadidos a la URL de la manera siguiente:

+ +
http://foo.com?pos.x=123&pos.y=456
+ +

Esta es una forma muy cómoda de construir un «mapa dinámico». La forma en que se envían y recuperan estos valores se detalla en el artículo Enviar los datos del formulario.

+ +

Selector de archivos

+ +

Hay un último tipo de <input> que nos llegó a principios del HTML: el tipo entrada de archivo. Los formularios pueden enviar archivos a un servidor (esta acción específica también se detalla en el artículo Enviar los datos del formulario). El control de selección de archivos se puede usar para elegir uno o más archivos para enviar.

+ +

Para crear un control de selección de archivos, utilizas el elemento {{HTMLElement ("input")}} con su atributo {{htmlattrxref ("type","input")}} establecido en file. Es posible restringir los tipos de archivos que se aceptan utilizando el atributo {{htmlattrxref ("accept","input")}}. Además, puedes permitir que el usuario elija más de un archivo añadiendo el atributo {{htmlattrxref ("multiple","input")}}.

+ +

Ejemplo

+ +

En este ejemplo, se crea un control de selección de archivos que solicita archivos de imágenes gráficas. El usuario puede seleccionar múltiples archivos en este caso.

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

En algunos dispositivos móviles, el control de selección de archivos puede acceder a fotos, vídeos y audio capturados directamente por la cámara y el micrófono del dispositivo y añadir información de captura al atributo accept de la manera siguiente:

+ +
<input type="file" accept="image/*;capture=camera">
+<input type="file" accept="video/*;capture=camcorder">
+<input type="file" accept="audio/*;capture=microphone">
+ +

Atributos comunes

+ +

Muchos de los elementos que se utilizan para definir controles de formulario tienen sus atributos específicos propios. Sin embargo, hay un conjunto de atributos que son comunes para todos los elementos de formulario. Ya has conocido algunos, pero a continuación encontrarás una lista de esos atributos comunes para referencias futuras:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre del atributoValor por defectoDescripción
autofocusfalseEste atributo booleano te permite especificar que el elemento ha de tener el foco de entrada automáticamente cuando se carga la página. En un documento, solo un elemento asociado a un formulario puede tener este atributo especificado.
disabledfalseEste atributo booleano indica que el usuario no puede interactuar con el elemento. Si no se especifica este atributo, el elemento hereda su configuración del elemento que lo contiene, por ejemplo, {{HTMLElement ("fieldset")}}. Si el elemento que lo contiene no tiene el atributo establecido en disabled, el elemento está habilitado.
formEl elemento <form> con el que está asociado el control, que se usa cuando no está anidado dentro de ese formulario. El valor del atributo debe ser el atributo id de un elemento {{HTMLElement ("form")}} del mismo documento. Esto te permite asociar un formulario con un control de formulario que esté fuera de aquel, incluso si está dentro de un elemento de formulario diferente.
nameEl nombre del elemento; se envía con los datos del formulario.
valueEl valor inicial del elemento.
+ +

Conclusión

+ +

Este artículo ha expuesto los tipos de entrada más antiguos: el conjunto original que se introdujo en los primeros días de HTML, que es compatible con todos los navegadores. En el artículo siguiente veremos los valores del atributo type que se han añadido en HTML5 más recientemente.

+ +

{{PreviousMenuNext("Learn/Forms/How_to_structure_an_HTML_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

+ +

En este módulo

+ + + +

Temas avanzados

+ + diff --git a/files/es/learn/html/forms/tipos_input_html5/index.html b/files/es/learn/html/forms/tipos_input_html5/index.html new file mode 100644 index 0000000000..d463399e93 --- /dev/null +++ b/files/es/learn/html/forms/tipos_input_html5/index.html @@ -0,0 +1,276 @@ +--- +title: Tipos de input de HTML5 +slug: Learn/HTML/Forms/Tipos_input_HTML5 +translation_of: Learn/Forms/HTML5_input_types +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}
+ +

En el artículo anterior vimos el elemento {{htmlelement("input")}} y los valores de su atributo type, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario más recientes, incluyendo algunos tipos de input nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos

+ + + + + + + + + + + + +
Requisitos previos:Formación básica en informática, y una comprensión básica de HTML.
Objetivo:Entender los valores de tipo input disponibles más recientes para crear controles de formulario nativos, y cómo implementarlos utilizando HTML.
+ +
+

Nota: La mayoría de las características discutidas en este artículo tienen un amplio soporte en todos los navegadores, anotaremos cualquier excepción. Si quieres más detalles referente al soporte de navegadores, deberías consultar nuestra referéncia de elementos de formulario HTML, y en particular nuestra referéncia extensiva de Tipos de <input>.

+
+ +

Debido a que la apariéncia de un control de formulario puede ser algo distinta con respecto a unas especificaciones del diseñador, los desarrolladores web a veces construyen sus propios controles de formulario personalizados. Cubrimos este aspecto en un tutorial avanzado: Cómo construir widgets de formulario personalizados.

+ +

Campo de dirección de correo electrónico

+ +

Este tipo de campo se define utilizando el valor  email en el atributo {{htmlattrxref("type","input")}} del elemento <input>:

+ +
<input type="email" id="email" name="email">
+ +

Cuando se utiliza este valor {{htmlattrxref("type","input")}} , se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario. Puedes verlo en acción en la siguiente captura de pantalla

+ +

An invalid email input showing the message "Please enter an email address."

+ +

Puedes utilizar también el atributo multiple en combinación con el tipo inputemail para permitir que sean introducidas varias direcciones de correo electrónico separadas por comas en el mismo input:

+ +
<input type="email" id="email" name="email" multiple>
+ +

En algunos dispositivos, en particular dispositivos táctiles con teclados dinámicos como los smart phones, debería presentarse un teclado virtual que es más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla @. Mira como ejemplo la siguiente captura de pantalla del teclado de Firefox para Android:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +
+

Nota: Puedes encontrar ejemplos sobre los tipos de entrada de texto básicos en Ejemplos input básicos (Consulta también el código fuente).

+
+ +

Mejorar la experiéncia del usuario para usuarios con estos dispositivos, es otra buena razón para utilizar estos tipos de input más recientes.

+ +

Validación del lado cliente

+ +

Como puedes haber visto anteriormente, email, junto con otros tipos de input más recientes, proporciona la validación de errores en el lado cliente de forma predeterminada, realizados por el navegador antes de que los datos obtenidos se envíen al servidor. Es una ayuda útil guiar a los usuarios a rellenar un formulario de forma precisa y puede ahorrar tiempo: es útil saber de inmediato que tu dato no es correcto, en vez de tener que esperar el viaje de ida y vuelta al servidor.

+ +

Pero no debería ser considerado una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad en cada dato, tanto en el lado servidor como en el lado cliente debido a que la validación en el lado cliente es muy fácil desactivarla, por lo que usuarios malintencionados pueden enviar fácilmente datos incorrectos al servidor. Lee Seguridad en el sitio web para tener una idea de lo que podría ocurrir; Implementar validación en el lado servidor está más allá del alcance de este módulo-guía, pero debería tenerlo en cuenta.

+ +

Ten en cuenta que a@b es una dirección de correo electrónico válida de acuerdo a las restricciones proporcionadaas por defecto. Esto es debido a que el tipo de input email, permite por defecto direcciones de correo electrónico de una intranet. Para implementar un comportamiento diferente de validación puedes utilizar el atributo pattern, y también puedes utilizar mensajes de error personalizados; Hablaremos de cómo utilizar estas características en Validación de formularios en el lado cliente en un artículo posterior.

+ +
+

Nota: Si los datos introducidos no son una dirección de correo electrónico, habrá coincidéncia con la pseudo clase {{cssxref(':invalid')}}, y la propiedad {{domxref('validityState.typeMismatch')}} devolverá true.

+
+ +

Campo de búsqueda

+ +

Los campos de búsqueda están destinados a ser utilizados para crear cajas de búsqueda en páginas y aplicaciones. Este tipo de campo se define utilizando el valor search en su atributo {{htmlattrxref("type","input")}}:

+ +
<input type="search" id="search" name="search">
+ +

La diferéncia principal entre un campo text y un campo search, es la forma en que el navegador aplica estilo a su apariéncia. A menudo los campos search se muestran con bordes redondeados; y a veces también muestran una "Ⓧ", el cual despeja el campo de cualquier valor cuando se pulsa sobre él. Adicionalmente, en dispositivos con teclado dinámico, la tecla enter del teclado puede leer "search" o mostrar un icono de lupa.

+ +

La captura de pantalla siguiente muestra un campo de búsqueda con contenido, en Firefox 71, Safari 13, y Chrome 79 en macOS, y Edge 18 y Chrome 79 en Windows 10. Ten en cuenta que el icono de reseteo sólo aparece si el campo tiene un valor y, aparte de Safari, sólo se muestra cuando el campo tiene el foco.

+ +

Screenshots of search fields on several platforms.

+ +

Otra característica que vale la pena señalar es que se puede guardar los valores de un campo search automáticamente y reutilizarse en múltiples páginas del mismo sitio web para ofrecer autocompletado. Esta característica suele ocurrir de forma automática en la mayoría de navegadores modernos.

+ +

Campo número de teléfono

+ +

Se puede crear un campo especial para introducir números de teléfono utilizando tel como valor del atributo {{htmlattrxref("type","input")}}:

+ +
<input type="tel" id="tel" name="tel">
+ +

Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con type="tel", lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.

+ +

La siguiente captura de pantalla del teclado de Firefox para Android proporciona un ejemplo:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +

Debido a la gran variedad de formatos de número de teléfono existentes, este tipo de campo no cumple con ningún tipo de restricción sobre el valor introducido por el usuario. (Esto significa que puede incluir letras, etc...).

+ +

Como mencionamos anteriormente, se puede utilizar el atributo pattern para que asuma restricciones, sobre el cuál aprenderemos en Validación de formulario en el lado cliente.

+ +

Campo URL

+ +

Se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo {{htmlattrxref("type","input")}}:

+ +
<input type="url" id="url" name="url">
+ +

Este tipo añade restricciones de validación en el campo. El navegador informará de un error si no se introdujo el protocolo (como http:), o si de algún modo el URL está mal formado. En dispositivos con teclados dinámicos a menudo mostrará por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.

+ +

Mira el siguiente ejemplo tomado de Firefox para Android:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +
Nota: Solo porque el URL esté bien formado no significa necesariamente que la dirección al que hace referéncia exista!
+ +

Campo numérico

+ +

Se pueden crear controles para introducir números con el {{htmlattrxref("type","input")}} number de {{HTMLElement("input")}}. Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.

+ +

La siguiente captura de pantalla tomada de Firefox para Android proporciona un ejemplo:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +

Con el tipo de input number  puedes limitar los valores mínimo y máximo permitidos definiendo los atributos {{htmlattrxref("min","input")}} y  {{htmlattrxref("max","input")}}.

+ +

También puedes utilizar el atributo step para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number sólo valida si el número es un entero. Para permitir números decimales, especifica step="any". Si se omite, su valor por defecto es 1, lo que significa que solo son válidos números enteros.

+ +

Miremos algunos ejemplos. El primero de los siguientes crea un control numérico cuyo valor está restringido a cualquier valor entre 1 y 10, y sus botones cambian su valor en incrementos o decrementos de 2.

+ +
<input type="number" name="age" id="age" min="1" max="10" step="2">
+ +

El segundo crea un control numérico cuyo valor está restringido a cualquier valor entre el 0 y 1 ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de 0.01.

+ +
<input type="number" name="change" id="pennies" min="0" max="1" step="0.01">
+ +

El tipo de input number tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido ( por ejemplo los códigos postales de USA, cuyo rango va de 00001 a 99999), entonces sería una mejor opción utilizar el tipo tel: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.

+ +
+

Ten en cuenta que: En versiones inferiores a la 10 de Internet Explorer no se soportan las entradas number

+
+ +

Slider controls

+ +

Otra forma de tomar un número es usando un slider. Podrás observar cómo son bastantes parecidas a los sitios inmobiliarios, dónde quieres determinar un máximo de precio por propiedad y filtrar tu búsqueda en el. Observaremos un ejemplo en vivo.

+ +

{{EmbedGHLiveSample("learning-area/html/forms/range-example/index.html", '100%', 200)}}

+ +

Usage-wise, sliders are less accurate than text fields. Therefore, they are used to pick a number whose precise value is not necessarily important.

+ +

A slider is created using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value range. The slider-thumb can be moved via mouse or touch, or with the arrows of the keypad.

+ +

It's important to properly configure your slider. To that end, it's highly recommended that you set the min, max, and step attributes which set the minimum, maximum and increment values, respectively.

+ +

Let's look at the code behind the above example, so you can see how its done. First of all, the basic HTML:

+ +
<label for="price">Choose a maximum house price: </label>
+<input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
+<output class="price-output" for="price"></output>
+ +

This example creates a slider whose value may range between 50000 and 500000, which increments/decrements by 100 at a time. We've given it default value of 250000, using the value attribute.

+ +

One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. This is why we've included an {{htmlelement("output")}} element — to contain the current value (we'll also look at this element in the next article). You could display an input value or the output of a calculation inside any element, but <output> is special — like <label>, it can take a for attribute that allows you to associate it with the element or elements that the output value came from.

+ +

To actually display the current value, and update it as it changed, you must use JavaScript, but this is relatively easy to do:

+ +
const price = document.querySelector('#price')
+const output = document.querySelector('.price-output')
+
+output.textContent = price.value
+
+price.addEventListener('input', function() {
+  output.textContent = price.value
+});
+ +

Here we store references to the range input and the output in two variables. Then we immediately set the output's textContent to the current value of the input. Finally, an event listener is set to ensure that whenever the range slider is moved, the output's textContent is updated to the new value.

+ +
+

Note: range inputs are not supported in versions of Internet Explorer below 10.

+
+ +

Date and time pickers

+ +

Gathering date and time values has traditionally been a nightmare for web developers. For good user experience, it is important to provide a calendar selection UI, enabling users to select dates without necessating context switching to a native calendar application or potentially entering them in differing formats that are hard to parse. The last minute of the previous millenium can be expressed in the following different ways, for example: 1999/12/31, 23:59 or 12/31/99T11:59PM.

+ +

HTML date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform.

+ +

A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both. Here's a live example that falls back to {{htmlelement("select")}} elements in non-supporting browsers:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/datetime-local-picker-fallback/index.html", '100%', 200)}}

+ +

Let's look at the different available types in brief. Note that the usage of these types is quite complex, especially considering browser support (see below); to find out the full details, follow the links below to the reference pages for each type, including detailed examples.

+ +

datetime-local

+ +

<input type="datetime-local"> creates a widget to display and pick a date with time with no specific time zone information.

+ +
<input type="datetime-local" name="datetime" id="datetime">
+ +

month

+ +

<input type="month"> creates a widget to display and pick a month with a year.

+ +
<input type="month" name="month" id="month">
+ +

time

+ +

<input type="time"> creates a widget to display and pick a time value. While time may display in 12-hour format, the value returned is in 24-hour format.

+ +
<input type="time" name="time" id="time">
+ +

week

+ +

<input type="week"> creates a widget to display and pick a week number and its year.

+ +

Weeks start on Monday and run to Sunday. Additionally, the first week 1 of each year contains the first Thursday of that year—which may not include the first day of the year, or may include the last few days of the previous year.

+ +
<input type="week" name="week" id="week">
+ +

Constraining date/time values

+ +

All date and time controls can be constrained using the min and max attributes, with further constraining possible via the step attribute (whose value varies according to input type).

+ +
<label for="myDate">When are you available this summer?</label>
+<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" step="7" id="myDate">
+ +

Browser support for date/time inputs

+ +

You should be warned that the date and time widgets don't have the best browser support. At the moment, Chrome, Edge, and Opera support them well, but there is no support in Internet Explorer, Safari has some mobile support (but no desktop support), and Firefox supports time and date only.

+ +

The reference pages linked to above provide suggestions on how to program fallbacks for non-supporting browsers; another option is to consider using a JavaScript library to provide a date picker. Most modern frameworks have good components available to provide this functionality, and there are standalone libraries available to (see Top date picker javascript plugins and libraries for some suggestions).

+ +

Color picker control

+ +

Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc.

+ +

A color control can be created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value color:

+ +
<input type="color" name="color" id="color">
+ +

When supported, clicking a color control will tend to display the operating system's default color picking functionality for you to actually make your choice with. The following screenshot taken on Firefox for macOS provides an example:

+ +

firefox for android email keyboard, with ampersand displayed by default.

+ +

And here is a live example for you to try out:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/color-example/index.html", '100%', 200)}}

+ +

The value returned is always a lowercase 6-value hexidecimal color.

+ +
+

Note: color inputs are not supported in Internet Explorer.

+
+ +

Summary

+ +

That brings us to the end of our tour of the HTML5 form input types. There are a few other control types that cannot be easily grouped together due to their very specific behaviors, but which are still essential to know about. We cover those in the next article.

+ +

{{PreviousMenuNext("Learn/Forms/Basic_native_form_controls", "Learn/Forms/Other_form_controls", "Learn/Forms")}}

+ +

In this module

+ + + +

Advanced Topics

+ + diff --git a/files/es/learn/html/forms/validacion_formulario_datos/index.html b/files/es/learn/html/forms/validacion_formulario_datos/index.html new file mode 100644 index 0000000000..e967b68973 --- /dev/null +++ b/files/es/learn/html/forms/validacion_formulario_datos/index.html @@ -0,0 +1,845 @@ +--- +title: Validación de formularios de datos +slug: Learn/HTML/Forms/Validacion_formulario_datos +tags: + - Ejemplo + - Guía + - HTML + - Intermedio + - JavaScript + - Web + - formulários +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
+ +

Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario. Este artículo te guiará por los conceptos básicos y ejemplos de validación de formularios en el lado del cliente.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, y entender cómo funcionan el HTML, el CSS y el JavaScript.
Objetivo:Entender qué es la validación de formularios en el lado del cliente, porqué es importante y cómo aplicar diversas técnicas para implementarla.
+ +

La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.

+ +

Sin embargo, ¡la validación en el lado del cliente no debe considerarse una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario en el lado del servidor, así como también en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor. Lee Seguridad en los sitios web para ver qué podría suceder. Cómo implementar la validación en el lado del servidor está fuera del alcance de este módulo, pero debes tenerlo en cuenta.

+ +

¿Qué es la validación de formularios?

+ +

Ve a cualquier sitio web popular que incluya un formulario de registro y observa que proporcionan comentarios cuando no introduces tus datos en el formato que se espera. Recibirás mensajes como:

+ + + +

Esto se llama validación de formulario. Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación. La validación realizada en el navegador se denomina validación en el lado del cliente, mientras que la validación realizada en el servidor se denomina validación en el lado del servidor. En este capítulo nos centraremos en la validación en el lado del cliente.

+ +

Si la información está en el formato correcto, la aplicación permite que los datos se envíen al servidor y (en general) que se guarden en una base de datos; si la información no está en el formato correcto, da al usuario un mensaje de error que explica lo que debe corregir y le permite volver a intentarlo.

+ +

Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿por qué insistimos en validar nuestros formularios? Hay tres razones principales:

+ + + +
Atención: No confíes nunca en los datos que se pasan al servidor desde el cliente. Incluso si tu formulario se valida correctamente y evita la introducción de datos con formato incorrecto en el lado del cliente, un usuario malintencionado puede alterar la petición de red.
+ +

Diferentes tipos de validación en el lado del cliente

+ +

Hay dos tipos diferentes de validación por parte del cliente que encontrarás en la web:

+ + + +

Usar la validación de formulario incorporada

+ +

Una de las características más importantes de los controles de formulario de HTML5 es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario. Los hemos visto anteriormente en el curso, pero recapitulamos aquí:

+ + + +

Si los datos que se introducen en un campo de formulario siguen todas las reglas que especifican los atributos anteriores, se consideran válidos. Si no, se consideran no válidos.

+ +

Cuando un elemento es válido, se cumplen los aspectos siguientes:

+ + + +

Cuando un elemento no es válido, se cumplen los aspectos siguientes:

+ + + +
+

Nota: Hay varios errores que evitan que el formulario se envíe, incluidos {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} o {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} o {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}} o {{domxref('validityState.customError','customError')}}.

+
+ +

Ejemplos de validación de formularios incorporados

+ +

En esta sección probaremos algunos de los atributos que hemos comentado antes.

+ +

Archivo de inicio sencillo

+ +

Vamos a empezar con un ejemplo sencillo: una entrada que te permite elegir si prefieres un plátano o una cereza. Este ejemplo implica una simple entrada ({{HTMLElement("input")}}) de texto con una etiqueta ({{htmlelement("label")}}) asociada y un botón de envío ({{htmlelement ("button")}}). Puedes encontrar el código fuente en GitHub en fruit-start.html y el ejemplo en vivo a continuación.

+ +
<form>
+  <label for="choose">¿Prefieres un plátano o una cereza?</label>
+  <input id="choose" name="i_like">
+  <button>Enviar</button>
+</form>
+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

{{EmbedLiveSample("Archivo_de_inicio_sencillo", "100%", 80)}}

+ +

Para empezar, haz una copia de fruit-start.html en un nuevo directorio de tu disco duro.

+ +

El atributo required

+ +

La característica de validación de HTML5 más simple es el atributo required. Añade este atributo al elemento para que una entrada sea obligatoria. Cuando se establece este atributo, el elemento coincide con la pseudoclase de la interfaz de usuario {{cssxref(':required')}} y el formulario no se envía; muestra un mensaje de error al enviarlo si la entrada está vacía. Si está vacía, la entrada también se considera inválida, coincidiendo con la pseudoclase de interfaz de usuario {{cssxref(':invalid')}}.

+ +

Añade un atributo required a tu entrada, como se muestra a continuación.

+ +
<form>
+  <label for="choose">¿Prefieres un plátano o una cereza? (requerido) </label>
+  <input id="choose" name="i_like" required>
+  <button>Enviar</button>
+</form>
+ +

Ten en cuenta el CSS que en el archivo de ejemplo se ha incluido:

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:invalid:required {
+  background-image: linear-gradient(to right, pink, lightgreen);
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

Este CSS da un borde discontinuo rojo cuando la entrada no es válida, y un borde negro sólido más sutil cuando es válida. También añadimos un gradiente de fondo cuando la entrada es obligatoria y no válida. Prueba el nuevo comportamiento en el ejemplo siguiente:

+ +

{{EmbedLiveSample("El_atributo_required", "100%", 80)}}

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-validation.html (consulta también el código fuente).

+
+ +

Intenta enviar el formulario sin introducir ningún valor. Observa que la entrada no válida recibe el cursor, aparece un mensaje de error predeterminado («Complete este campo») y el formulario no se puede enviar.

+ +

La presencia del atributo required en cualquier elemento que admite este atributo significa que el elemento coincide con la pseudoclase {{cssxref(':required')}}, tenga o no un valor. Si en el elemento {{HTMLElement("input")}} no se ha introducido ningún valor, input coincidirá con la pseudoclase {{cssxref(':invalid')}}.

+ +
+

Nota: Para una buena experiencia de usuario, indica al usuario que campos de formulario se requieren. No solo es una buena experiencia de usuario, sino que lo exigen las pautas de accesibilidad de WCAG. Además, solo requiere que los usuarios introduzcan los datos que realmente necesitas: Por ejemplo, ¿por qué realmente necesitas saber el género o el tratamiento de alguien?

+
+ +

Validación de una expresión regular

+ +

Otra característica útil de validación es el atributo pattern, que espera una expresión regular como valor. Una expresión regular (regex) es un patrón que se puede usar para establecer combinaciones de caracteres en cadenas de texto, por lo que las expresiones regulares son ideales para la validación de formularios y sirven para una gran variedad de otros usos en JavaScript.

+ +

Las expresiones regulares son bastante complejas y no vamos a exponerlas exhaustivamente en este artículo. A continuación hay algunos ejemplos para que te hagas una idea de cómo funcionan.

+ + + +

Hay muchas más posibilidades que no exponemos aquí. Para obtener una lista completa y muchos ejemplos, consulta nuestro documento de expresiones regulares.

+ +

Implementemos un ejemplo. Actualiza tu HTML para añadir un atributo pattern como este:

+ +
<form>
+  <label for="choose">¿Prefieres un plátano o una cereza?</label>
+  <input id="choose" name="i_like" required pattern="[Pp]látano|[Cc]ereza ">
+  <button>Enviar</button>
+</form>
+
+ + + +

Esto nos da la siguiente actualización; pruébalo:

+ +

{{EmbedLiveSample("Validación de una expresión regular", "100%", 80)}}

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-pattern.html (consulta también su código fuente).

+
+ +

En este ejemplo, el elemento {{HTMLElement("input")}} acepta uno de los cuatro valores posibles: las cadenas «plátano», «Plátano», «cereza» o «Cereza». Las expresiones regulares distinguen entre mayúsculas y minúsculas, pero hemos hecho que admita versiones en mayúsculas y minúsculas utilizando un patrón «Aa» adicional anidado dentro de corchetes.

+ +

En este punto, intenta cambiar el valor dentro del atributo pattern para que se vean iguales que algunos de los ejemplos vistos anteriormente, y observa que esto afecta a los valores que puedes añadir para que el valor de entrada sea válido. Intenta escribir algo por tu cuenta y mira cómo va. ¡Haz que estén relacionadas con la fruta siempre que sea posible para que tus ejemplos tengan sentido!

+ +

Si un valor no vacío de {{HTMLElement("input")}} no coincide con el patrón de la expresión regular, input coincidirá con la pseudoclase {{cssxref(':invalid')}}.

+ +
+

Nota: Algunos tipos de elementos {{HTMLElement ("input")}} no necesitan validar una expresión regular con el atributo pattern. Especificar el tipo de correo electrónico (email), por ejemplo, valida el valor de las entradas con un patrón de dirección de correo electrónico bien formado o un patrón que coincida con una lista de direcciones de correo electrónico separadas por comas si tiene el atributo multiple.

+
+ +
+

Nota: El elemento {{HTMLElement("textarea")}} no admite el atributo pattern.

+
+ +

Restringir la longitud de tus entradas

+ +

Puedes restringir la longitud de los caracteres de todos los campos de texto creados por {{HTMLElement("input")}} o {{HTMLElement("textarea")}} utilizando los atributos minlength y maxlength. Un campo no es válido si tiene un valor y ese valor tiene menos caracteres que el valor de longitud mínima (minlength), o más que el valor de longitud máxima (maxlength).

+ +

Los navegadores a menudo no permiten que el usuario escriba un valor más largo de lo esperado en los campos de texto. Lo que otorga una mejor experiencia de usuario que maxlength es proporcionar comentarios de recuento de caracteres de manera accesible y permitirles editar su contenido a un tamaño más reducido. Un ejemplo de esto es el límite de caracteres de Twitter. JavaScript, incluidas las soluciones que utilizan maxlength, se puede utilizar para proporcionar esta funcionalidad.

+ +

Restringir los valores de tus entradas

+ +

Los atributos min y max se pueden usar para proporcionar a los campos numéricos (es decir, <input type="number">) un rango de valores válidos. El campo no será válido si contiene un valor fuera de este rango.

+ +

Veamos otro ejemplo. Crea una nueva copia del archivo fruit-start.html.

+ +

Ahora elimina el contenido del elemento <body> y reemplázalo con lo siguiente:

+ +
<form>
+  <div>
+    <label for="choose">¿Prefieres un plátano o una cereza?</label>
+    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">¿Cuántos te gustaría comer?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Enviar</button>
+  </div>
+</form>
+ + + + + +

Aquí está el ejemplo que se ejecuta en vivo:

+ +

{{EmbedLiveSample("Restringir_los_valores_de_tus_entradas", "100%", 100)}}

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como fruit-length.html (consulta también su código fuente).

+
+ +
+

Nota: <input type="number"> (y otros tipos, como range y date) también pueden tomar un atributo step, que especifica en qué incremento aumenta o disminuye el valor cuando se utilizan los controles de entrada (como el botones numéricos arriba y abajo). En el ejemplo anterior no hemos incluido un atributo step, por lo que el valor predeterminado es 1. Esto significa que los valores de coma flotante, como 3.2, también se mostrarán como no válidos.

+
+ +

Ejemplo completo

+ +

Aquí hay un ejemplo completo que muestra el uso de las funciones de validación integradas en HTML. En primer lugar, un poco de HTML:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>¿Tienes carné de conducir?<abbr title="Este campo es obligatorio" aria-label="required">*</abbr></legend>
+      <!-- Solo se puede seleccionar un botón de opción en un grupo con el mismo nombre,
+           y, por lo tanto, solo un botón de opción en un grupo con el mismo nombre que tiene marcado el atributo «requerido»
+           basta para hacer de una selección un requisito -->
+      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Sí</label>
+      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">¿Qué edad tienes?</label>
+    <!-- El atributo pattern puede actuar como una alternativa para los navegadores que
+         no implementan el tipo de entrada de número, pero admiten el atributo pattern.
+         Ten en cuenta que los navegadores que admiten el atributo pattern lo harán
+         fallar silenciosamente cuando se use con un campo numérico.
+         Su uso aquí solo actúa como una alternativa -->
+     <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">¿Cuál es tu fruta favorita?<abbr title="Este campo es obligatorio" aria-label="required">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range ">
+    <datalist id="l1">
+      <option>Plátano</option>
+      <option>Cereza</option>
+      <option>Manzana</option>
+      <option>Fresa</option>
+      <option>Limón</option>
+      <option>Naranja</option>
+     </datalist>
+  </p>
+  <p>
+    <label for="t2">¿Cuál es tu dirección de correo electrónico? </label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Deja un mensaje</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Enviar</button>
+  </p>
+</form>
+ +

Y ahora, algo de CSS para añadir estilo al HTML:

+ +
form {
+  font: 1em sans-serif;
+  max-width: 320px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="number"],
+textarea,
+fieldset {
+  width : 100%;
+  border: 1px solid #333;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  box-shadow: none;
+}
+ +

Esto se traduce de la siguiente manera:

+ +

{{EmbedLiveSample("Ejemplo_completo", "100%", 420)}}

+ +

Consulta Atributos relacionados con la validación para obtener una lista completa de los atributos que se pueden usar para restringir los valores de entrada y los tipos de entrada que los admiten.

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como full-example.html (consulta también su código fuente).

+
+ +

Validar formularios utilizando JavaScript

+ +

Debes usar JavaScript si quieres controlar la apariencia de los mensajes de error nativos o tratar con navegadores heredados que no admiten la validación de formularios incorporados en HTML. En esta sección veremos las diferentes formas de hacer esto.

+ +

La API de validación de restricciones

+ +

La mayoría de los navegadores admiten la API de validación de restricciones, que consta de un conjunto de métodos y propiedades disponibles en las interfaces DOM de elementos de formulario siguientes:

+ + + +

La API de validación de restricciones hace que las propiedades siguientes estén disponibles en los elementos anteriores.

+ + + +

La API de validación de restricciones también pone a disposición los siguientes métodos en los elementos anteriores.

+ + + +

Implementar un mensaje de error personalizado

+ +

Como has visto en los ejemplos de restricciones de validación de HTML5 anteriores, cada vez que un usuario intenta enviar un formulario no válido, el navegador muestra un mensaje de error. La forma en que se muestra este mensaje depende del navegador.

+ +

Estos mensajes automatizados tienen dos inconvenientes:

+ + + +

Ejemplo de un mensaje de error en francés en una página de Firefox en inglés

+ +

La personalización de estos mensajes de error es uno de los casos de uso más comunes de la API de validación de restricciones. Veamos un ejemplo simple de cómo hacer esto.

+ +

Comenzaremos con un HTML simple (siéntete libre de poner esto en un archivo HTML en blanco; usa una copia nueva de fruit-start.html como base, si lo deseas):

+ +
<form>
+  <label for="mail">Me gustaría que me proporcionara una dirección de correo electrónico:<label>
+  <input type="email" id="mail" name="mail">
+  <button>Enviar</button>
+</form>
+ +

Y añade a la página el JavaScript siguiente:

+ +
const email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("¡Se esperaba una dirección de correo electrónico!");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

Aquí guardamos una referencia para la entrada de la dirección de correo electrónico, luego le añadimos un detector de eventos que ejecuta el código de content cada vez que el valor de la entrada cambia.

+ +

Dentro del código que contiene, verificamos si la propiedad validity.typeMismatch de la entrada de la dirección de correo electrónico devuelve true, lo que significa que el valor que contiene no coincide con el patrón para una dirección de correo electrónico bien formada. Si es así, llamamos al método setCustomValidity() con un mensaje personalizado. Esto hace que la entrada no sea válida, de modo que cuando intentas enviar el formulario, el envío falla y se muestra el mensaje de error personalizado.

+ +

Si la propiedad validity.typeMismatch devuelve false, llamamos al método setCustomValidity() con una cadena vacía. Esto hace que la entrada sea válida, y el formulario se envía.

+ +

Puedes probarlo a continuación:

+ +

{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}

+ +
+

Nota: Puede encontrar este ejemplo vivo en GitHub como custom-error-message.html (véase también su código fuente).

+
+ +

Un ejemplo más detallado

+ +

Ahora que hemos visto un ejemplo realmente sencillo, veamos cómo podemos usar esta API para construir una validación personalizada un poco más compleja.

+ +

En primer lugar, el código HTML. Una vez más, siéntete libre de construir esto junto con nosotros:

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Por favor, introduzca una dirección de correo electrónico: </span>
+      <input type="email" id="mail" name="mail" required minlength="8">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Enviar</button>
+</form>
+ +

Este sencillo formulario usa el atributo novalidate para desactivar la validación automática del navegador; esto permite que nuestra secuencia de comandos tome control sobre la validación. Sin embargo, esto no deshabilita la compatibilidad para la API de validación de restricciones ni la aplicación de pseudoclases de CSS como {{cssxref(":valid")}}, etc. Eso significa que, aunque el navegador no verifica automáticamente la validez del formulario antes de enviar los datos, puedes hacerlo tú mismo y diseñar el formulario en consecuencia.

+ +

Nuestra entrada para validar es <input type="email">, que es obligatoria y tiene una longitud mínima (minlength) de 8 caracteres. Vamos a verificar esto con nuestro propio código para que muestre un mensaje de error personalizado para cada elemento.

+ +

Nuestro objetivo es mostrar los mensajes de error dentro de un elemento <span>. El atributo aria-live se establece en ese <span> para asegurar que todo el mundo podrá ver nuestro mensaje de error personalizado, incluidos los usuarios de lectores de pantalla.

+ +
+

Nota: Un punto clave a tener en cuenta es que establecer el atributo novalidate en el formulario impide que el formulario muestre sus propios cuadros de diálogo de error, y nos permite mostrar los mensajes de error personalizados en el DOM de la manera que nosotros elijamos.

+
+ +

Ahora aplicaremos algo de CSS básico para mejorar ligeramente el aspecto del formulario y proporcionar algunos comentarios visuales cuando los datos de entrada no sean válidos:

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Este es nuestro diseño para los campos no válidos */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* Este es el diseño para nuestros mensajes de error */
+.error {
+  width : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Vamos a ver el JavaScript que implementa la validación de error personalizada.

+ +
// Hay muchas formas de elegir un nodo DOM; aquí obtenemos el formulario y, a continuación, el campo de entrada
+// del correo electrónico, así como el elemento span en el que colocaremos el mensaje de error.
+const form  = document.getElementsByTagName('form')[0];
+
+const email = document.getElementById('mail');
+const emailError = document.querySelector('#mail + span.error');
+
+email.addEventListener('input', function (event) {
+  // Cada vez que el usuario escribe algo, verificamos si
+  // los campos del formulario son válidos.
+
+  if (email.validity.valid) {
+    // En caso de que haya un mensaje de error visible, si el campo
+    // es válido, eliminamos el mensaje de error.
+    emailError.innerHTML = ''; // Restablece el contenido del mensaje
+    emailError.className = 'error'; // Restablece el estado visual del mensaje
+  } else {
+    // Si todavía hay un error, muestra el error exacto
+    showError();
+  }
+});
+
+form.addEventListener('submit', function (event) {
+  // si el campo de correo electrónico es válido, dejamos que el formulario se envíe
+
+  if(!email.validity.valid) {
+    // Si no es así, mostramos un mensaje de error apropiado
+    showError();
+    // Luego evitamos que se envíe el formulario cancelando el evento
+    event.preventDefault();
+  }
+});
+
+function showError() {
+  if(email.validity.valueMissing) {
+    // Si el campo está vacío
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'Debe introducir una dirección de correo electrónico.';
+  } else if(email.validity.typeMismatch) {
+    // Si el campo no contiene una dirección de correo electrónico
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'El valor introducido debe ser una dirección de correo electrónico.';
+  } else if(email.validity.tooShort) {
+    // Si los datos son demasiado cortos
+    // muestra el mensaje de error siguiente.
+    emailError.textContent = 'El correo electrónico debe tener al menos ${ email.minLength } caracteres; ha introducido ${ email.value.length }.';
+  }
+
+  // Establece el estilo apropiado
+  emailError.className = 'error activo';
+}
+ +

Los comentarios explican las cosas bastante bien, pero de una manera muy breve:

+ + + +

Este es el resultado:

+ +

{{EmbedGHLiveSample("/en-US/learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}

+ +
+

Nota: Puedes encontrar este ejemplo en vivo en GitHub como detailed-custom-validation.html (consulta también su código fuente).

+
+ +

La API de validación de restricciones te proporciona una herramienta poderosa para manejar la validación de formularios, y te permite tener un control enorme sobre la interfaz de usuario más allá de lo que puedas hacer solo con HTML y CSS.

+ +
+

Nota: Para obtener más información, consulta nuestra guía de validación de restricciones y la referencia de API de validación de restricciones.

+
+ +

Validar formularios sin una API incorporada

+ +

En algunos casos, como la compatibilidad heredada del navegador o los controles personalizados, no podrás o no querrás usar la API de validación de restricciones. Todavía puedes usar JavaScript para validar tu formulario, pero vas a tener que escribirlo.

+ +

Antes de validar el formulario, hazte estas preguntas:

+ +
+
¿Qué tipo de validación debería realizar?
+
Debes determinar cómo validar los datos: operaciones de cadena, conversión de tipos, expresiones regulares, etc. Tú decides.
+
¿Qué debo hacer si el formulario no se valida?
+
Esto es claramente un problema de la interfaz de usuario. Tienes que decidir cómo se comportará el formulario. ¿El formulario va a enviar los datos de todos modos? ¿Deberías resaltar los campos que dan error? ¿Deberías mostrar mensajes de error?
+
¿Cómo puedo ayudar al usuario a corregir datos no válidos?
+
Para reducir la frustración del usuario, es muy importante proporcionar tanta información útil como sea posible para guiarlo a fin de que corrija sus entradas de datos. Debes ofrecer sugerencias por adelantado para que sepan lo que se espera de ellos, así como mensajes de error claros. Si deseas profundizar en los requisitos de interfaz de usuario para la validación de formularios, aquí hay algunos artículos útiles que debes leer: + +
+
+ +

Un ejemplo que no usa la API de validación de restricciones

+ +

Para ilustrar esto, mostramos una versión simplificada del ejemplo anterior que funciona con navegadores con compatibilidad heredada.

+ +

El HTML es casi el mismo; solo hemos eliminado las funciones de validación de HTML.

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Por favor, introduzca una dirección de correo electrónico: </span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <!-- Algunos navegadores con compatibilidad heredada deben tener el atributo «type»
+       establecido explícitamente en el elemento «button» de «submit»-->
+  <button type="submit">Enviar</button>
+</form>
+ +

Del mismo modo, no es necesario cambiar mucho el CSS; acabamos de convertir la pseudoclase {{cssxref(":invalid")}} de CSS en una clase real y evitamos usar el selector de atributos que no funciona en Internet Explorer 6.

+ +
body {
+  font: 1em sans-serif;
+  width: 200px;
+  padding: 0;
+  margin : 0 auto;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  box-sizing: border-box;
+}
+
+/* Este es nuestro diseño para los campos no válidos */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* Este es el diseño para nuestros mensajes de error */
+.error {
+  width : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +

Los grandes cambios están en el código JavaScript, que necesita hacer mucho más trabajo pesado.

+ +
// Hay menos formas de elegir un nodo DOM con navegadores antiguos
+const form  = document.getElementsByTagName('form')[0];
+const email = document.getElementById('mail');
+
+// Lo siguiente es un truco para llegar al siguiente nodo de elementos hermanos en el DOM
+// Esto es peligroso porque puedes construir fácilmente un bucle infinito.
+// En los navegadores modernos es mejor usar element.nextElementSibling
+let error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// según la especificación HTML5
+const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Muchos navegadores antiguos no son compatibles con el método addEventListener.
+// Aquí hay una manera simple de manejar esto; está lejos de ser la única.
+function addEvent(element, event, callback) {
+  let previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    const output = callback(e);
+
+    // Una devolución de llamada que devuelve «false» detiene la cadena de devolución de llamada
+    // e interrumpe la ejecución de la devolución de llamada del evento.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Ahora podemos reconstruir nuestra restricción de validación
+// Debido a que no confiamos en la pseudoclase de CSS, tenemos que
+// establecer explícitamente la clase valid/invalid en nuestro campo de correo electrónico
+addEvent(window, "load", function () {
+  // Aquí probamos si el campo está vacío (recuerda, el campo no es obligatorio)
+  // Si no es así, verificamos si su contenido es una dirección de correo electrónico con el formato correcto.
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// Esto define lo que sucede cuando el usuario escribe en el campo
+addEvent(email, "input", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// Esto define lo que sucede cuando el usuario intenta enviar los datos.
+addEvent(form, "submit", function () {
+  const test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Algunos navegadores antiguos no son compatibles con el método event.preventDefault ()
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

El resultado es el siguiente:

+ +

{{EmbedLiveSample("Validar_formularios_sin_una_API_incorporada", "100%", 130)}}

+ +

Como puedes ver, no es tan difícil construir un sistema de validación por tu cuenta. La parte difícil es hacer que sea lo suficientemente genérico para que se pueda usar en diferentes plataformas y en cualquier forma. Hay muchas bibliotecas de archivos disponibles para realizar la validación de formularios, como por ejemplo Validate.js

+ +

.

+ +

Prueba tus habilidades!

+ +

Has llegado al final de este artículo pero ¿puedes recordar la información más importante?Puedes encontrar pruebas adicionales para comprovar que has comprendido la información antes de que continue — visita Prueba tus habilidades: Validación de formularios.

+ +

Resumen

+ +

La validación de formularios en el lado del cliente a veces requiere JavaScript si deseas personalizar el estilo y los mensajes de error, pero siempre requiere que pienses cuidadosamente en el usuario. Recuerda que siempre debes ayudar a tus usuarios a corregir los datos que proporcionan. Para ese fin, asegúrate de:

+ + + +

Una vez que hayas verificado que el formulario se ha completado correctamente, puedes proceder a enviarlo. Vamos a exponer el envío de los datos del formulario en el próximo artículo.

+ +

{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}

+ +

En este módulo

+ + + +

Temas avanzados

+ + diff --git a/files/es/learn/html/forms/your_first_html_form/index.html b/files/es/learn/html/forms/your_first_html_form/index.html new file mode 100644 index 0000000000..df9d73bc60 --- /dev/null +++ b/files/es/learn/html/forms/your_first_html_form/index.html @@ -0,0 +1,305 @@ +--- +title: Mi primer formulario HTML +slug: Learn/HTML/Forms/Your_first_HTML_form +tags: + - Ejemplo + - Guía + - HTML + - Principiante + - Web + - formulários +translation_of: Learn/Forms/Your_first_form +--- +
{{LearnSidebar}}{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}
+ +

El primer artículo de nuestra serie te proporciona una primera experiencia de creación de un formulario web, que incluye diseñar un formulario sencillo con controles de formulario adecuados y otros elementos HTML, añadir un poco de estilo muy simple con CSS y describir cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática y de lenguaje HTML.
Objetivo:Familiarizarse con los formularios web, para qué se usan, cómo diseñarlos y qué elementos HTML básicos vas a necesitar para casos sencillos.
+ +

¿Qué son los formularios web?

+ +

Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (consulta Enviar los datos de un formulario más adelante en el módulo), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).

+ +

El HTML de un formulario web está compuesto por uno o más controles de formulario (a veces llamados widgets), además de algunos elementos adicionales que ayudan a estructurar el formulario general; a menudo se los conoce como formularios HTML. Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento {{htmlelement("input")}}, aunque hay algunos otros elementos que también hay que conocer.

+ +

Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (validación de formulario), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.

+ +

Diseñar tu formulario

+ +

Antes de comenzar a escribir código, siempre es mejor dar un paso atrás y tomarte el tiempo necesario para pensar en tu formulario. Diseñar una maqueta rápida te ayudará a definir el conjunto de datos adecuado que deseas pedirle al usuario que introduzca. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es tu formulario, más te arriesgas a frustrar a las personas y perder usuarios. Tiene que ser simple y conciso: solicita solo los datos que necesitas.

+ +

Diseñar formularios es un paso importante cuando creas un sitio web o una aplicación. Va más allá del alcance de este artículo exponer la experiencia de usuario de los formularios, pero si deseas profundizar en ese tema, puedes leer los artículos siguientes:

+ + + +

En este artículo, vamos a crear un formulario de contacto sencillo. Hagamos un esbozo.

+ +

Esbozo aproximado del formulario que vamos a construir

+ +

Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.

+ +

Aprendizaje activo: La implementación de nuestro formulario HTML

+ +

De acuerdo, intentemos crear el HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}} y {{HTMLelement("button")}}.

+ +

Antes de continuar, haz una copia local de nuestra plantilla HTML simple: introduce aquí tu formulario HTML.

+ +

El elemento {{HTMLelement("form")}}

+ +

Todos los formularios comienzan con un elemento {{HTMLelement("form")}}, como este:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento {{HTMLelement("section")}} o {{HTMLelement("footer")}}, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos action y method:

+ + + +
+

Nota: Veremos cómo funcionan esos atributos en nuestro artículo Enviar los datos de un formulario que encontrarás más adelante.

+
+ +

Por ahora, añade el elemento {{htmlelement("form")}} anterior a tu elemento HTML {{htmlelement("body")}}.

+ +

Los elementos {{HTMLelement("label")}}, {{HTMLelement("input")}} y {{HTMLelement("textarea")}}

+ +

Nuestro formulario de contacto no es complejo: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento {{HTMLelement("label")}} correspondiente:

+ + + +

En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Nombre:</label>
+    <input type="text" id="name" name="user_name">
+  </li>
+  <li>
+    <label for="mail">Correo electrónico:</label>
+    <input type="email" id="mail" name="user_mail">
+  </li>
+  <li>
+    <label for="msg">Mensaje:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+ </ul>
+</form>
+ +

Actualiza el código de tu formulario para que se vea como el anterior.

+ +

Los elementos {{HTMLelement("li")}} están ahí para estructurar nuestro código convenientemente y facilitar la aplicación de estilo (ver más adelante en el artículo). Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Ten en cuenta el uso del atributo for en todos los elementos {{HTMLelement("label")}}, que toma como valor el id del control de formulario con el que está asociado; así es como asocias un formulario con su etiqueta.

+ +

Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, panel táctil y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Encontrarás más detalles sobre las etiquetas de los formularios en Cómo estructurar un formulario web.

+ +

En el elemento {{HTMLelement("input")}}, el atributo más importante es type. Este atributo es muy importante porque define la forma en que el elemento {{HTMLelement("input")}} aparece y se comporta. Encontrarás más información sobre esto en el artículo sobre Controles de formularios nativos básicos más adelante.

+ + + +

Por último, pero no por ello menos importante, ten en cuenta la sintaxis de <input> en contraposición con la de <textarea></textarea>. Esta es una de las rarezas del HTML. La etiqueta <input> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. El elemento {{HTMLElement("textarea")}} no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que defines el valor predeterminado. Para definir el valor predeterminado de un elemento {{HTMLElement("input")}}, debes usar el atributo value de esta manera:

+ +
<input type="text" value="por defecto este elemento se llena con este texto">
+ +

Por otro lado, si deseas definir un valor predeterminado para un elemento {{HTMLElement("textarea")}}, lo colocas entre las etiquetas de apertura y cierre del elemento {{HTMLElement("textarea")}}, así:

+ +
<textarea>
+Por defecto, este elemento contiene este texto
+</textarea>
+ +

El elemento {{HTMLelement("button")}}

+ +

El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento {{HTMLelement("button")}}; añade lo siguiente justo encima de la etiqueta de cierre </form>:

+ +
<li class="button">
+  <button type="submit">Envíe su mensaje</button>
+</li>
+ +

El elemento {{htmlelement("button")}} también acepta un atributo de type, que a su vez acepta uno de estos tres valores: submit, reset o button.

+ + + +
+

Nota: También puedes usar el elemento {{HTMLElement("input")}} con el atributo type correspondiente para generar un botón, por ejemplo <input type="submit">. La ventaja principal del elemento {{HTMLelement("button")}} es que el elemento {{HTMLelement("input")}} solo permite texto sin formato en su etiqueta, mientras que el elemento {{HTMLelement("button")}} permite contenido HTML completo, lo que permite generar botones creativos más complejos.

+
+ +

Aplicar estilo básico a un formulario

+ +

Ahora que has terminado de escribir el código HTML de tu formulario, guárdalo y observa lo que ocurre en un navegador. Por ahora, se verá bastante feo.

+ +
+

Nota: Si crees que no has escrito bien el código HTML, compáralo con nuestro ejemplo final: véase first-form.html (ver en vivo).

+
+ +

Resulta notablemente difícil aplicar estilo a los formularios. Está más allá del alcance de este artículo enseñarte cómo aplicar estilo a los formularios en detalle, por lo que por el momento solo vamos a exponer cómo añadir un poco de CSS para que se vea un poco bien.

+ +

En primer lugar, añade un elemento {{htmlelement("style")}} a tu página, dentro de la cabecera del HTML. Debe quedar así:

+ +
<style>
+
+</style>
+ +

Dentro de las etiquetas style, añade el código CSS siguiente:

+ +
form {
+  /* Centrar el formulario en la página */
+  margin: 0 auto;
+  width: 400px;
+  /* Esquema del formulario */
+  padding: 1em;
+  border: 1px solid #CCC;
+  border-radius: 1em;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+form li + li {
+  margin-top: 1em;
+}
+
+label {
+  /* Tamaño y alineación uniforme */
+  display: inline-block;
+  width: 90px;
+  text-align: right;
+}
+
+input,
+textarea {
+  /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra
+     Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */
+  font: 1em sans-serif;
+
+  /* Tamaño uniforme del campo de texto */
+  width: 300px;
+  box-sizing: border-box;
+
+  /* Hacer coincidir los bordes del campo del formulario */
+  border: 1px solid #999;
+}
+
+input:focus,
+textarea:focus {
+  /* Destacado adicional para elementos que tienen el cursor */
+  border-color: #000;
+}
+
+textarea {
+  /* Alinear los campos de texto multilínea con sus etiquetas */
+  vertical-align: top;
+
+  /* Proporcionar espacio para escribir texto */
+  height: 5em;
+}
+
+.button {
+  /* Alinear los botones con los campos de texto */
+  padding-left: 90px; /* mismo tamaño que los elementos de la etiqueta */
+}
+
+button {
+  /* Este margen adicional representa aproximadamente el mismo espacio que el espacio
+     entre las etiquetas y sus campos de texto */
+  margin-left: .5em;
+}
+ +

Guarda y vuelve a cargar, y observa que tu formulario presenta un aspecto mucho menos feo.

+ +
+

Nota: Puedes encontrar nuestra versión en GitHub en first-form-styled.html (ver en vivo).

+
+ +

Enviar los datos del formulario a un servidor web

+ +

La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento {{HTMLelement("form")}} define dónde y cómo enviar los datos gracias a los atributos action y method.

+ +

Proporcionamos un nombre (name) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, dejan que el servidor maneje cada dato por su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.

+ +

Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo name en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos de nuestros códigos de formulario:

+ +
<form action="/my-handling-form-page" method="post">
+ <ul>
+  <li>
+    <label for="name">Nombre:</label>
+    <input type="text" id="name" name="user_name" />
+  </li>
+  <li>
+    <label for="mail">Correo electrónico:</label>
+    <input type="email" id="mail" name="user_email" />
+  </li>
+  <li>
+    <label for="msg">Mensaje:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </li>
+
+  ...
+
+ +

En nuestro ejemplo, el formulario envía tres datos denominados «user_name», «user_email» y «user_message». Esos datos se envían a la URL «/my-handling-form-page» utilizando el método post de HTTP.

+ +

En el lado del servidor, la secuencia de comandos de la URL «/my-handling-form-page» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos sobre el tema en esta guía, pero si deseas obtener más información, proporcionamos algunos ejemplos en nuestro artículo Enviar los datos de un formulario que encontrarás más adelante.

+ +

Resumen

+ +

¡Enhorabuena!, has creado tu primer formulario web. Debería verse así:

+ +

{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/Forms/Your_first_form/Example') }}

+ +

Pero esto es solo el comienzo: ahora ha llegado el momento de profundizar en el tema. Los formularios tienen mucho más potencial de lo que hemos visto aquí y los artículos siguientes de este módulo te ayudarán a dominarlo.

+ +

{{NextMenu("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms")}}

+ +

En este módulo

+ + + +

Temas avanzados

+ + diff --git a/files/es/learn/html/index.html b/files/es/learn/html/index.html new file mode 100644 index 0000000000..6262b7f957 --- /dev/null +++ b/files/es/learn/html/index.html @@ -0,0 +1,66 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Aprender + - Guía + - HTML + - Novato + - Principiante + - Tema + - introducción +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

Para crear sitios web, debes conocer el {{Glossary('HTML')}} — la tecnología fundamental que se utiliza para definir la estructura de una página web. HTML se utiliza para especificar si tu contenido web se debe reconocer como un párrafo, lista, encabezado, enlace, imagen, reproductor multimedia, formulario o uno de los muchos otros elementos disponibles o incluso un nuevo elemento que tú definas.

+ +
+

¿Quieres transformarte en un desarrollador de la interfaz de usuario web?

+ +

Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.

+ +

Empieza aquí

+
+ +

Prerrequisitos

+ + + +

Antes de comenzar con este tema, debes tener al menos una familiaridad básica con el uso de computadoras y el uso pasivo de la web (es decir, simplemente mirarlo, consumir el contenido). Debes tener un entorno de trabajo básico configurado como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}, y comprender cómo crear y administrar archivos, como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}; ambos son parte del módulo para principiantes en la {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.

+ +

Se recomienda que trabajes con {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Comenzando con la web")}} antes de intentar este tema, sin embargo, no es absolutamente necesario; gran parte de lo que se cubre en el artículo {{web.link("/es/docs/Learn/Getting_started_with_the_web/HTML_basics", "conceptos básicos de HTML")}} también se cubre en el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Módulo de introducción a HTML")}}, aunque con mucho más detalle.

+ +

Después de comprender HTML, puedes pasar a aprender temas más avanzados como:

+ + + +

Módulos

+ +

Este tema contiene los siguientes módulos, en un orden sugerido para trabajar con ellos. Definitivamente deberías comenzar con el primero.

+ +
+
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}}
+
Este módulo prepara el escenario para que te acostumbres a conceptos y sintaxis importantes, explica cómo aplicar HTML al texto, cómo crear hipervínculos y cómo usar HTML para estructurar una página web.
+
{{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}}
+
Este módulo explora cómo usar HTML para incluir multimedia en tus páginas web, incluidas las diferentes formas en que se pueden incluir imágenes y cómo insertar video, audio e incluso otras páginas web completas.
+
{{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}}
+
Representar datos tabulares en una página web de una manera comprensible y {{Glossary("Accessibility", "accesible")}} puede ser un desafío. Este módulo cubre el marcado básico de tablas, junto con características más complejas como la implementación de subtítulos y resúmenes.
+
+ +

Resolver problemas comunes de HTML

+ +

{{web.link("/es/docs/Learn/HTML/Howto", "Usa HTML para resolver problemas comunes")}} proporciona vínculos a secciones de contenido que explican cómo usar HTML para resolver muchos problemas comunes al crear una página web: lidiar con títulos, agregar imágenes o videos, enfatizar contenido, crear una forma básica, etc.

+ +

Ve también

+ +
+
{{web.link("/es/docs/Learn/HTML/Forms", "Formularios Web")}}
+
Este módulo proporciona una serie de artículos que te ayudarán a dominar los conceptos básicos de los formularios web. Los formularios web son una herramienta muy poderosa para interactuar con los usuarios — generalmente, se utilizan para recopilar datos de los usuarios o para permitirles controlar una interfaz de usuario. Sin embargo, por razones históricas y técnicas, no siempre es obvio cómo utilizarlos en todo su potencial. Aborda todos los aspectos esenciales de los formularios web, incluido el marcado de su estructura HTML, el diseño de controles de formulario, la validación de datos de formulario y el envío de datos al servidor.
+
{{web.link("/es/docs/Web/HTML", "HTML (lenguaje de marcado de hipertexto)")}}
+
El punto de entrada principal para la documentación de referencia HTML en MDN, incluidas las referencias detalladas de elementos y atributos; si deseas saber qué atributos tiene un elemento o qué valores tiene un atributo, por ejemplo, este es un excelente lugar para comenzar.
+
diff --git a/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html b/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..7e96d3c6d7 --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/advanced_text_formatting/index.html @@ -0,0 +1,695 @@ +--- +title: Formateo de texto avanzado +slug: Learn/HTML/Introduccion_a_HTML/Advanced_text_formatting +tags: + - CodingScripting + - Guía + - HTML + - Lista de descripción + - Novato + - Principiante + - Texto + - abreviatura + - aprende + - cita + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

Hay muchos otros elementos en HTML para dar formato al texto, que no expusimos en el artículo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Los elementos descritos en este artículo son menos conocidos, pero aún así es muy útil conocerlos (no obstante, no es una lista completa de ninguna manera). Aquí aprenderás cómo marcar citas, listas de descripción, código de computadora y otro texto relacionado, subíndices y superíndices, información de contacto y mucho más.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}.
Objetivo:Aprender a utilizar elementos HTML menos conocidos para marcar características semánticas avanzadas.
+ +

Listas de descripciones

+ +

En los fundamentos del texto HTML, explicamos cómo {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists", "marcar listas básicas")}} en HTML, pero no mencionamos el tercer tipo de lista con la que te encontrarás ocasionalmente: listas de descripción. El propósito de estas listas es marcar un conjunto de elementos y sus descripciones asociadas, como términos y definiciones, o preguntas y respuestas. Veamos un ejemplo de un conjunto de términos y definiciones:

+ +
soliloquio
+En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).
+monólogo
+En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.
+aparte
+En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.
+ +

Las listas de descripción utilizan un contenedor diferente al de los otros tipos de listas — {{HTMLElement("dl")}} («description list» o lista de descripciones); además, cada término está envuelto en un elemento {{HTMLElement("dt")}} («description term» o término a describir), y cada descripción está envuelta en un elemento {{HTMLElement("dd")}} («description definition» o definición de descripción). Para redondear esta información veamos un ejemplo:

+ +
+
<dl>
+  <dt>soliloquio</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje se habla a sí mismo para representar sus pensamientos o sentimientos internos y, en el proceso, transmitirlos a la audiencia (pero no a otros personajes).</dd>
+  <dt>monólogo</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje habla de sus pensamientos en voz alta para compartirlos con el público y cualquier otro personaje presente.</dd>
+  <dt>aparte</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
+</dl>
+
+ +

Los estilos predeterminados del navegador mostrarán listas de descripciones con las descripciones sangradas un poco más que los términos.

+ +

{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-1', '100%', '285px', '', '', 'hide-codepen-jsfiddle') }}

+ +

Ten en cuenta que un solo término puede tener múltiples descripciones, por ejemplo:

+ +
+
<dl>
+  <dt>aparte</dt>
+  <dd>En las obras dramáticas, corresponde a cuando un personaje comparte un comentario solo con la audiencia para dar efecto cómico o dramático. Suele ser un sentimiento, un pensamiento o información adicional.</dd>
+  <dd>Si la obra es impresa, es una sección de contenido que se relaciona con el tema, pero no encaja directamente en el flujo principal de contenido, de modo que se presenta por separado (a menudo en una caja de texto en el margen).</dd>
+</dl>
+
+ +

{{ EmbedLiveSample('listas-de-descripciones-ejemplo-activo-2', '100%', '193px', '', '', 'hide-codepen-jsfiddle') }}

+ +

Aprendizaje activo: Marcar un conjunto de definiciones

+ +

Es hora de practicar las listas de descripciones; agrega elementos al texto sin formato en el campo Código editable para que aparezca como una lista de descripción en el campo Salida en vivo. Puedes usar tus propios términos y descripciones si lo deseas.

+ +

Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente encallado, pulsa el botón Mostrar solución para ver una buena propuesta.

+ + + +

{{ EmbedLiveSample('Código_reproducible', 700, 350, "", "", "hide-codepen-jsfiddle") }}

+ +

Citas

+ +

HTML también dispone de elementos para el marcado de citas; cual elemento utilices depende de si estás marcando la cita como un bloque o como un elemento en línea.

+ +

Cita en bloque independiente (blockquote)

+ +

Si una sección de contenido a nivel de bloque (ya sea un párrafo, varios párrafos, una lista, etc.) se cita en otro lugar, debes envolverla dentro de un elemento {{HTMLElement("blockquote")}} para indicarlo, e incluye una URL que apunte a la fuente de la cita dentro de un atributo {{HTMLAttrxRef("cite", "blockquote")}}. Por ejemplo, el siguiente marcado tomado de la página del elemento <blockquote> de MDN:

+ +
<p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+ +

Para convertir esto en una cita en bloque independiente, simplemente harías lo siguiente:

+ +
+
<p>A continuación se muestra una cita en bloque independiente...</p>
+<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+  <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+</blockquote>
+
+ +

El estilo predeterminado del navegador lo mostrará como un párrafo con sangría, para indicar que se trata de una cita; el párrafo anterior a la cita sirve para demostrarlo.

+ +

{{EmbedLiveSample('blockquote-ejemplo-en-vivo', '100%', '117px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Citas en línea

+ +

Las citas en línea funcionan exactamente de la misma manera, excepto que usan el elemento {{HTMLElement("q")}}. Por ejemplo, el siguiente fragmento de marcado contiene una cita <q> de la página MDN:

+ +
<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en
+para citas breves que no requieren saltos de párrafo.</q></p>
+ +

El estilo predeterminado del navegador lo representará como texto normal entre comillas para indicar una cita, así:

+ +

{{ EmbedLiveSample('Citas_en_línea', '100%', '78px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Citas

+ +

El contenido del atributo {{HTMLAttrxRef("cite", "blockquote")}} suena útil, pero desafortunadamente los navegadores, lectores de pantalla, etc. no hacen mucho con él. No hay forma de hacer que el navegador muestre el contenido de cite sin escribir tu propia solución usando JavaScript o CSS. Si deseas que la fuente de la cita esté disponible en la página, lo debes hacer en el texto a través de un enlace o de alguna otra forma apropiada.

+ +

Hay un elemento {{HTMLElement("cite")}}, pero está destinado a contener el título del recurso que se cita, p. ej. el nombre del libro. Sin embargo, no hay razón por la que no puedas vincular el texto dentro de <cite> a la fuente de la cita de alguna manera:

+ +
<p>De acuerdo con <a href="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+<cite>página de citas en bloque independiente de MDN</cite></a>:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/es/docs/Web/HTML/Element/blockquote">
+  <p>El <strong>elemento HTML <code>&lt;blockquote&gt;</code></strong> (o <em>elemento HTML de cita
+  en bloque independiente</em>) indica que el texto al que delimita es una cita ampliada.</p>
+</blockquote>
+
+<p>El elemento de cita — <code>&lt;q&gt;</code> — se <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">utiliza en
+citas breves que no requieren saltos de párrafo.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>página q de MDN</cite></a>.</p>
+ +

Las citas se escriben en cursiva de forma predeterminada.

+ +

{{ EmbedLiveSample('Citas_2', '100%', '179px', '', '', 'hide-codepen-jsfiddle') }}

+ +

Aprendizaje activo: ¿Quién dijo eso?

+ +

¡Es hora de otro ejemplo de aprendizaje activo! En este ejemplo, nos gustaría que:

+ +
    +
  1. Conviertas el párrafo del medio en una cita en bloque independiente, que incluya un atributo cite.
    2. +
  2. Conviertas "La necesidad de eliminar el diálogo interno negativo" en el tercer párrafo en una cita en línea e incluya un atributo cite.
    3. +
  3. Envuelvas el título de cada fuente en etiquetas <cite> y conviertas cada una en un enlace a esa fuente.
    4. +
+ +

Las fuentes de citación que necesitas son:

+ + + +

Si cometes un error, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente encallado, pulsa el botón Mostrar solución para ver una buena propuesta.

+ + + +

{{ EmbedLiveSample('Código_reproducible_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}

+ +

Abreviaturas

+ +

Otro elemento bastante común que encontrarás cuando busques en la Web es {{HTMLElement("abbr")}} — se usa para envolver una abreviatura o acrónimo, y proporcionar una expansión completa del término (incluida dentro de un atributo {{HTMLAttrxRef("title")}}. Veamos un par de ejemplos:

+ +
+
<p>Usamos <abbr title="Lenguaje de marcado de hipertexto">HTML</abbr> para estructurar nuestros documentos web.</p>
+
+<p>Creo que el <abbr title="Reverendo"">Rev.</abbr> Green lo hizo en la cocina con la motosierra.</p>
+
+ +

Estos saldrán con un aspecto similar a este (la expansión aparecerá en una descripción emergente cuando se coloque el cursor sobre el término):

+ +

{{EmbedLiveSample('ejemplo-de-abreviaturas-en-vivo', '100%', '94px', '', '', 'hide-codepen-jsfiddle')}}

+ +
+

Nota: Hay otro elemento, {{HTMLElement("acronym")}}, que básicamente hace lo mismo que <abbr>, y se diseñó específicamente para acrónimos en lugar de las abreviaturas. Sin embargo, este ha caído en desuso — no era compatible con los navegadores ni con <abbr>, y <abbr> tiene una función tan similar que se consideró inútil conservar ambos. Solo utiliza <abbr>.

+
+ +

Aprendizaje activo: Marcar una abreviatura

+ +

Para esta simple tarea de aprendizaje activo, nos gustaría que simplemente marcaras una abreviatura. Puedes usar el ejemplo que encontrarás a continuación o reemplazarla por una de tu elección.

+ + + +

{{ EmbedLiveSample('Código_reproducible_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Marcar la información de contacto

+ +

HTML tiene un elemento para marcar la información de contacto — {{HTMLElement("address")}}. Este simplemente envuelve tus datos de contacto, por ejemplo:

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, Reino Unido</p>
+</address>
+ +

También podrías incluir un marcado más complejo y otras formas de información de contacto, por ejemplo:

+ +
<address>
+  <p>
+    Chris Mills<br>
+    Manchester<br>
+    The Grim North<br>
+    Reino Unido
+  </p>
+
+  <ul>
+    <li>Tel: 01234 567 890</li>
+    <li>Email: me@grim-north.co.uk</li>
+  </ul>
+</address>
+ +

Ten en cuenta que algo como esto también estaría bien, si la página vinculada contuviera la información de contacto:

+ +
<address>
+  <p>Página escrita por <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Superíndice y subíndice

+ +

En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos {{HTMLElement("sup")}} y {{HTMLElement("sub")}} se ocupan de ello. Por ejemplo:

+ +
<p>Nací el 25<sup>th</sup> de mayo de 2001.</p>
+<p>La fórmula química de la cafeína es C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>If x<sup>2</sup> es 9, x debe ser igual 3 o -3.</p>
+ +

La salida de este código se ve así:

+ +

{{ EmbedLiveSample('Superíndice_y_subíndice', '100%', '141px', '', '', 'hide-codepen-jsfiddle') }}

+ +

Representación del código informático

+ +

Hay una serie de elementos disponibles para marcar código informático usando HTML:

+ + + +

Veamos algunos ejemplos. Deberías intentar jugar con estos (intenta obtener una copia de nuestro archivo de ejemplo other-semantics.html):

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('¡Guau!, ¡deja de apretar!');
+}</code></pre>
+
+<p>No debes utilizar elementos de presentación como <code>&lt;font&gt;</code> y <code>&lt;center&gt;</code>.</p>
+
+<p>En el ejemplo de JavaScript anterior, <var>para</var> representa un elemento de párrafo.</p>
+
+
+<p>Selecciona todo el texto con <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 bytes de datos
+64 bytes de 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

El código anterior se verá así:

+ +

{{ EmbedLiveSample('Representación_del_código_informático','100%',300, "", "", "hide-codepen-jsfiddle") }}

+ +

Marcar horas y fechas

+ +

HTML también proporciona el elemento {{HTMLElement("time")}} para marcar horas y fechas en un formato legible por la máquina. Por ejemplo:

+ +
<time datetime="2016-01-20">20 Enero 2016</time>
+
+ +

¿Por qué es útil esto? Bueno, hay muchas formas diferentes en que los humanos escriben las fechas. La fecha anterior se podría escribir como:

+ + + +

Pero estas diferentes formas no las pueden reconocer fácilmente las computadoras — ¿qué pasaría si quisieras tomar automáticamente las fechas de todos los eventos en una página e insertarlas en un calendario? El elemento {{HTMLElement("time")}} te permite adjuntar una fecha/hora inequívoca y legible por la máquina para este propósito.

+ +

El ejemplo básico anterior solo proporciona una fecha simple legible por la máquina, pero hay muchas otras opciones que son posibles, por ejemplo:

+ +
<!-- Fecha simple estándar -->
+<time datetime="2016-01-20">20 Enero 2016</time>
+<!-- Solo año y mes -->
+<time datetime="2016-01">Enero 2016</time>
+<!-- Solo mes y día -->
+<time datetime="01-20">20 Enero 2016</time>
+<!-- Solo tiempo, horas y minutos -->
+<time datetime="19:30">19:30</time>
+<!-- ¡También puedes hacer segundos y milisegundos! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Fecha y hora -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 Enero 2016</time>
+<!-- Fecha y hora con desplazamiento de zona horaria -->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Enero 2016 es 8.30pm en Francia</time>
+<!-- Llamar a un número de semana específico -->
+<time datetime="2016-W04">La cuarta semana de 2016</time>
+
+ +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text", "Pon a prueba tus habilidades: Texto HTML avanzado")}}.

+ +

Resumen

+ +

Esto marca el final de nuestro estudio de la semántica del texto HTML. Ten en cuenta que lo que has visto durante este curso no es una lista exhaustiva de elementos de texto HTML — quisimos tratar de cubrir los aspectos esenciales y algunos de los más comunes que verás en la naturaleza, o al menos podrían resultarte interesantes. Para encontrar muchos más elementos HTML, puedes echarle un vistazo a nuestra {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} (la {{web.link("/es/docs/Web/HTML/Element#Inline_text_semantics", "La sección Semántica de texto en línea")}} sería un gran lugar para comenzar). En el próximo artículo veremos los elementos HTML que usarás para estructurar las diferentes partes de un documento HTML.

+ +

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

+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html b/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..330bf0d7db --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/creating_hyperlinks/index.html @@ -0,0 +1,346 @@ +--- +title: Crear hipervínculos +slug: Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks +tags: + - Aprender + - CodingScripting + - Guía + - HTML + - HTTP + - Novato + - Principiante + - Title + - URL + - enlace + - hiperenlaces + - hipervínculos + - href + - referencia absoluta + - referencia relativa + - título + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

Los hipervínculos (o enlaces) son elementos verdaderamente importantes — son los que hacen que la web sea web. Este artículo expone la sintaxis necesaria para crear un enlace, además contiene un catálogo de buenas prácticas para crearlos.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}.
Objetivo:Aprender a implementar un hipervínculo de forma efectiva y enlazar múltiples archivos.
+ +

¿Qué es un hipervínculo?

+ +

Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea web : Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace ({{Glossary("URL")}}).

+ +
+

Nota: Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe cómo manejar el archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).

+
+ +

El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de el sitio (funcionalidad de navegación), zonas de acceso/registro (herramientas de usuario) y otras.

+ +

Portada de bbc.co.uk, que muestra muchas noticias y la funcionalidad del menú de navegación

+ +

Anatomía de un enlace

+ +

Un enlace básico se crea incluyendo el texto (o cualquier otro contenido, ve {{anch("Convertir bloques de contenido en enlaces")}}), que queramos convertir en un enlace usando un elemento ancla {{HTMLElement("a")}}, dándole un atributo {{HTMLAttrxRef("href", "a")}} (también conocido como «Hypertext Reference», «target» u objetivo) que contendrá la dirección web hacia dónde queremos que apunte el enlace.

+ +
<p>Crea un enlace a
+<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
+</p>
+ +

Este código producirá el siguiente resultado:

+ +

Crea un enlace a la página de inicio de Mozilla.

+ +

Añadir información de asistencia con el atributo title

+ +

Otro atributo que posiblemente quieras agregar a tus enlaces es title. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en el sitio web.

+ +
<p>Crea un enlace a
+<a href="https://www.mozilla.org/es-ES/"
+   title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
+          y cómo contribuir">la página de inicio de Mozilla</a>.
+</p>
+ +

Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):

+ +

Crea un enlace a la página de inicio de Mozilla.

+ +
+

Nota: El título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.

+
+ +

Aprendizaje activo: crea tu propio ejemplo de enlace

+ +

Es momento del aprendizaje activo — crea un documento HTML con tu editor de código (nuestra plantilla de aprendizaje te hará la tarea más llevadera).

+ + + +

Convertir bloques de contenido en enlaces

+ +

Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso {{web.link("/es/docs/Learn/HTML/Getting_started#Elementos_de_bloque_y_elementos_en_línea", "Elementos de bloque y elementos en línea")}}. Si quieres convertir una imagen en un enlace, simplemente usa el elemento {{HTMLElement("a")}} encerrando el elemento {{HTMLElement("img")}} entre <a> y </a>.

+ +
<a href="https://www.mozilla.org/es-ES/">
+  <img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla">
+</a>
+ +
+

Nota: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.

+
+ +

Primer acercamiento a URLs y rutas

+ +

Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección encontrarás la información que necesitas sobre el tema.

+ +

Una localizadora uniforme de recursos (URL, de las iniciales en inglés de «Uniform Resource Locator») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en https://www.mozilla.org/es-ES/.

+ +

Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio creating-hyperlinks).

+ +

Una estructura de directorios simple. El directorio principal se llama creating-hyperlinks y contiene dos archivos llamados index.html y contacts.html, y dos directorios llamados projects y pdfs, que contiene un archivo index.html y un archivo project-brief.pdf, respectivamente

+ +

Al directorio raíz de esta estructura de directorios lo hemos llamado creating-hyperlinks. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo index.html y el archivo contacts.html. En una web real, index.html es el punto de entrada a la web, lo que se conoce como página de inicio.

+ +

Observamos también dos directorios dentro de nuestro directorio raíz que son: pdfs y projects. Cada uno de ellos tiene archivos en su interior — un archivo PDF (project-brief.pdf) y un archivo index.html, respectivamente. Observa que es posible tener sin problemas dos archivos index.html en un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo index.html será la página de inicio para la información relativa a los proyectos.

+ + + +
+

Nota: Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: ../../../ruta/compleja/a/mi/archivo.html.

+
+ +

Fragmentos de documento

+ +

Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo {{HTMLAttrxRef("id")}} al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:

+ +
<h2 id="Dirección_de_envío">Dirección de envío</h2>
+ +

Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:

+ +
<p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#Dirección_de_envío">Dirección de envío</a>.</p>
+ +

También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:

+ +
<p>La <a href="#Dirección_de_envío">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p>
+ +

URLs absolutas y relativas

+ +

Dos términos que encontrarás en la Web son URL absoluta y URL relativa:

+ +

URL absoluta: Hace referencia a una dirección definida por su ubicación absoluta en la web, esta incluye el {{Glossary("protocol", "protocolo")}} y el {{Glossary("domain name", "nombre del dominio")}}. Por ejemplo, si subes una página de inicio index.html a un directorio llamado projects que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es http://www.example.com, se podrá acceder a la página desde http://www.example.com/projects/index.html (o simplemente http://www.example.com/projects/, ya que la mayoría de los servidores web buscan la página de inicio index.html para cargarla por omisión si no se les especifica otra en la URL).

+ +

Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.

+ +

Una URL relativa: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza — son las que vimos en la sección anterior. Por ejemplo, si desde un archivo ubicado en http://www.example.com/projects/index.html queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: project-brief.pdf) no necesitamos más información. Si el archivo PDF está situado en un subdirectorio dentro de projects llamado pdfs, la URL relativa es: pdfs/project-brief.pdf (la URL absoluta equivalente sería: http://www.example.com/projects/pdfs/project-brief.pdf).

+ +

Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza — por ejemplo, si movemos nuestro archivo index.html del directorio projects a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa pdfs/project-brief.pdf ahora hará referencia a http://www.example.com/pdfs/project-brief.pdf, en lugar de a http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Por supuesto, la ubicación del archivo pdfs/project-brief.pdf y del directorio pdfs no cambian de repente cuando mueves el archivo index.html; esto hará que tus enlaces apunten a un sitio equivocado y no funcionarán correctamente al hacer clic en ellos. ¡Por lo tanto debes tener cuidado!

+ +

Buenas prácticas en el uso de los enlaces

+ +

Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.

+ + + +

Redacción clara del enlace

+ +

Es fácil rellenar de enlaces una página, sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean accesibles para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:

+ + + +

Veamos un ejemplo concreto:

+ +

Buen texto en un enlace: Descargar Firefox

+ +
<p><a href="https://firefox.com/">
+  Descargar Firefox
+</a></p>
+ +

Mal texto en un enlace: Pulsar aquí para descargar Firefox

+ +
<p><a href="https://firefox.com/">
+  Haz clic aquí
+</a>
+para descargar Firefox</p>
+
+ +

Otras indicaciones:

+ + + +

Utiliza enlaces relativos siempre que sea posible

+ +

A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, debes utilizar enlaces relativos siempre que sea posible cuando enlaces a otras ubicaciones dentro del mismo sitio web. Cuando vinculas a otro sitio web, deberás utilizar un vínculo absoluto.

+ + + +

Indica claramente los recursos no HTML

+ +

Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducirlos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente) hay que indicarlo para no confundir al usuario.

+ +

Por ejemplo:

+ + + +

Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Descarga el informe de ventas (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Reproduce el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Juega al juego del automóvil (requiere Flash)
+</a></p>
+ +

Utiliza el atributo download al enlazar una descarga

+ +

Si queremos hacer referencia a una descarga en lugar de a algo que abra el navegador, disponemos del atributo download para proporcionar un nombre predeterminado al archivo a guardar. Veamos un ejemplo con un enlace a la descarga de la versión para Windows de Firefox:

+ +
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=es-MX"
+   download="firefox-latest-64bit-installer.exe">
+  Descarga la última versión de Firefox para Windows (64 bits) (Español, es-MX)
+</a>
+ +

Aprendizaje activo: crear un menú de navegación

+ +

Para este ejercicio, deberás crear lo que se conoce como web multipágina: un menú de navegación con enlaces a distintas páginas. Esta es una manera común de crear páginas web — usamos la misma estructura en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido mostrado.

+ +

Tendrás que hacer copias locales, en el mismo directorio, de las cuatro siguientes páginas (revisa el directorio navigation-menu-start para el listado completo):

+ + + +

A continuación:

+ +
    +
  1. Añade una lista no ordenada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación normalmente es una lista de enlaces (links), por lo que esto es semánticamente correcto.
    2. +
  2. Convierte cada nombre en un enlace a esa página.
    3. +
  3. Copia el menú de navegación en cada una de las páginas.
    4. +
  4. En cada página, elimina solo el enlace que hace referencia a sí mismo (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).
    5. +
+ +

El ejercicio terminado debería crear una página como la siguiente:

+ +

Un ejemplo de un menú de navegación HTML simple, con inicio, imágenes, proyectos y elementos del menú social

+ +
+

Nota: Si ahora encallas, o no estás seguro de haberlo conseguido, revisa el directorio navigation-menu-marked-up para ver la respuesta correcta.

+
+ +

Enlace a correo electrónico

+ +

Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla {{HTMLElement("a")}} y el elemento mailto: seguido del esquema de la URL.

+ +

En su forma más básica, un enlace mailto: simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:

+ +
<a href="mailto:nowhere@mozilla.org">Enviar correo electrónico a ninguna parte</a>
+
+ +

Esto da como resultado un enlace que se ve así: Enviar correo electrónico a ninguna parte.

+ +

De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo omites y tu ({{HTMLAttrxRef("href", "a")}} simplemente es "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo sin la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.

+ +

Especificar detalles

+ +

Además de la dirección de correo electrónico, puedes proporcionar otra información. De hecho, puedes incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL mailto que proporciones. Los más utilizados son el «subject» (asunto), «cc» (con copia a) o «bcc» (copia oculta), y «body» (cuerpo del mensaje, que no es realmente un campo de la cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento de la consulta.

+ +

Veamos un ejemplo que incluye estos campos:

+ +
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
+  Enviar un correo electrónico cc, bcc, asunto y cuerpo
+</a>
+ +
+

Nota: Los valores de cada campo deben tener la URL codificada, es decir, sin caracteres no imprimibles (caracteres invisibles, tabulaciones, retornos de carro y saltos de página) y espacios con codificación porcentual (%20) {{Interwiki("wikipedia", "Código porciento")}}. También hay que tener en cuenta el uso del signo de interrogación (?) para separar la URL principal de los valores de los campos, y el símbolo ampersand (&) para separar cada campo dentro del enlace mailto:. Esta es la notación de consulta URL estándar. Lee {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method", "el método GET")}} para comprender mejor qué notación de consulta URL se usa comúnmente.

+
+ +

A continuación otros ejemplos de utilización de enlaces mailto:

+ + + +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links", "Pon a prueba tus habilidades: Enlaces")}}.

+ +

Resumen

+ +

Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad — Formato de texto avanzado será la próxima parada.

+ +

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

+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduccion_a_html/debugging_html/index.html b/files/es/learn/html/introduccion_a_html/debugging_html/index.html new file mode 100644 index 0000000000..114b93ff0f --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/debugging_html/index.html @@ -0,0 +1,171 @@ +--- +title: Depurar el HTML +slug: Learn/HTML/Introduccion_a_HTML/Debugging_HTML +tags: + - Error + - Guía + - HTML + - Principiante + - Validación + - Validador + - depurar + - programar +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Escribir HTML es fácil, pero ¿qué pasa si algo va mal y desconocemos dónde está el error de codificación? En este artículo veremos varias herramientas que nos ayudarán a arreglar errores en HTML.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con los principios básicos de HTML, como los vistos en el apartado Empezar con el HTML, Conocimientos básicos de aplicación de formato a textos con HTML y Creación de hiperenlaces.
Objetivo:Aprender el funcionamiento básico de las herramientas de depuración de problemas de código en HTML.
+ +

Depurar no debe asustarnos

+ +

Cuando escribimos cualquier tipo de código, normalmente todo va bien, hasta ese fatídico momento en el que ocurre un error, hemos hecho algo mal y el código no funciona, o no funciona del todo, no lo suficientemente bien. Por ejemplo, el dibujo siguiente muestra un error de {{glossary("compile","compilación")}} de un programa sencillo escrito en lenguaje Rust.

+ +

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.En el ejemplo, el mensaje de error es fácilmente comprensible: "unterminated double quote string" (comillas sin cerrar en el texto). Si analizamos el listado de código, observamos que en println!(Hello, world!"); faltan una comillas. Pero, los mensajes de error pueden complicarse con facilidad y su interpretación ser menos sencilla a medida que los programas aumentan en tamaño, e incluso casos sencillo pueden llegar a intimidar a alguien que no sabe nada de Rust.

+ +

Sin embargo, la depuración no nos debe asustar; la clave para sentirnos cómodos con la escritura y la depuración de cualquier lenguaje o código es la familiaridad, tanto con el lenguaje como con las herramientas.

+ +

HTML y depuración

+ +

HTML no es tan complicado de entender como Rust; HTML no se compila por separado antes de que el navegador lo analice (se interpreta, no se compila). Y la sintaxis de los {{glossary("element","elementos")}} de HTML es mucho más sencilla de entender que la de cualquier lenguaje de programación real como Rust, {{glossary("JavaScript")}} o {{glossary("Python")}}. La forma en que los navegadores ejecutan HTML es más permisiva que la de los otros lenguajes, cosa que es buena y mala a la vez.

+ +

Código permisivo

+ +

¿Qué queremos decir con permisivo? Bien, normalmente cuando hacemos algo mal al codificar, suele haber dos tipos de error:

+ + + +

HTML en sí mismo no suele producir errores sintácticos porque los navegadores son permisivos con ellos; o sea, el código se sigue ejecutando ¡aun si hay errores! Los navegadores disponen de reglas internas para saber cómo interpretar los errores de marcado incorrecto que encuentran, y seguirán funcionando aunque no produzcan el resultado esperado. Esto puede también ser un problema, por supuesto.

+ +
+

Nota: La ejecución de HTML es permisiva porque cuando se creó la web por primera vez, se decidió que el hecho de permitir que la gente publicara su contenido era más importante que el hecho de que la sintaxis fuera totalmente correcta. La web no sería tan popular como lo es hoy en día si se hubiera sido más estricto desde el primer momento.

+
+ +

Aprendizaje activo: Estudio del código permisivo

+ +

Es hora de estudiar la naturaleza permisiva del código HTML por nosotros mismos.

+ +
    +
  1. En primer lugar, hagamos una copia de nuestro ejemplo-demo a depurar y guardémoslo de forma local. Está escrito para generar diversos errores que deberemos descubrir (se dice que el marcado de HTML está mal formado, en contraposición a un marcado bien formado).
    2. +
  2. A continuación, abrámoslo en un navegador; veremos lo siguiente:A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. +
  3. No parece que esté bien; veamos el código fuente para ver qué podemos hacer (solo mostramos el contenido del <body>): + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. Veamos qué problemas podemos descubrir: +
      +
    • El elemento {{htmlelement("p")}} y el {{htmlelement("li")}} no tienen etiquetas de cierre. Si comprobamos el resultado, no parece que haya generado un efecto grave en la representación del lenguaje de marcado, porque es fácil deducir que donde un elemento acaba, debería comenzar otro.
      • +
    • El primer elemento {{htmlelement("strong")}} no tiene etiqueta de cierre. Este resulta ser un poco más problemático porque no es fácil deducir dónde se supone que termina el elemento. De hecho, el énfasis fuerte se ha aplicado al resto del texto.
      • +
    • Esta sección está mal anidada: <strong>strong <em>strong emphasised?</strong> what is this?</em>. No es fácil de explicar la forma en que ha sido interpretado, debido al problema anterior.
      • +
    • Al valor del atributo {{htmlattrxref("href","a")}} le faltan las comillas de cierre. Esto parece haber causado el problema más grave: el enlace ha desaparecido totalmente.
      • +
    +
    5. +
  5. Ahora veamos lo que el navegador ha mostrado en contraposición al código fuente. Para ello podemos usar las herramientas de desarrollo del navegador. Si no estamos familiarizados con el uso de estas herramientas, echemos un vistazo rápido a Descubrir las herramientas de desarrollo del navegador, y luego continuaremos.
    6. +
  6. En el inspector de objetos (DOM), puedes comprobar la apariencia de cada elemento: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. +
  7. Vamos a explorar nuestro código en detalle con el inspector de objetos DOM para ver cómo el navegador ha arreglado nuestros errores de código HTML (lo hemos hecho con Firefox; otros navegadores modernos deberían conducir al mismo resultado): +
      +
    • Se han añadido etiquetas de cierre a los párrafos y las líneas de las listas.
      • +
    • Al no estar claro el final del elemento <strong>, el navegador lo ha aplicado individualmente a todos los bloques de texto siguientes, a cada uno le ha añadido su etiqueta strong propia, desde donde está ¡hasta el final del documento!
      • +
    • El navegador ha arreglado el anidamiento incorrecto del modo siguiente: + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • El enlace a cuyo atributo le faltan las comillas del final ha sido ignorado. La última lista la ha dejado como sigue: + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

Validación HTML

+ +

Con el ejemplo anterior podemos asegurarnos de que nuestro HTML está bien formado, pero ¿cómo? En el ejemplo siguiente podemos comprobar que es bastante fácil buscar entre las líneas y encontrar los errores en documentos pequeños; pero, ¿qué pasa cuando trabajamos con documentos HTML grandes y complejos?

+ +

La mejor estrategia es comenzar por pasar tu página HTML por el servicio de validación de etiquetas; fue creado y está mantenido por el W3C, organización que se encarga de definir las especificaciones de HTML, CSS y otras tecnologías web. Esta página web toma un documento HTML como entrada, lo procesa, y genera un informe de dónde están los errores en el documento.

+ +

The HTML validator homepage

+ +

Para validar el HTML, podemos proporcionar al validador una dirección web a la que apuntar, subirle un archivo HTML, o directamente introducirle el código HTML que queremos que revise.

+ +

Aprendizaje activo: Validación de un documento HTML

+ +

Vamos a probar de validar nuestro documento ejemplo.

+ +
    +
  1. Primero, cargamos el servicio de validación en una pestaña del navegador, si no lo tenemos ya.
    2. +
  2. Hacemos clic en la subpestaña Validate by Direct Input.
    3. +
  3. Copiamos el código del documento ejemplo (no solo el body) y lo pegamos en el cuadro de texto grande.
    4. +
  4. Hacemos clic en el botón Check.
    5. +
+ +

Esto debería proporcionar una lista de errores y otras informaciones:

+ +

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

+ +

Interpretación de los mensajes de error

+ +

La lista de mensajes de error que nos presenta el validador suele ayudar, pero a veces, no resultan muy útiles; con un poco de práctica aprenderemos a interpretar la lista para arreglar nuestro código. Veamos los mensajes de error y su significado. Observamos que cada mensaje se presenta con un número de línea y de columna, para ayudar a localizar el error más fácilmente.

+ + + +

No debemos preocuparnos si no podemos corregir todos los mensajes de error; es práctico tratar de arreglar unos pocos errores cada vez y volver a pasar el validador para ver los que quedan. A veces, al arreglar unos cuantos se arreglan automáticamente otros muchos; con frecuencia muchos errores los causa uno solo en un efecto dominó.

+ +

Sabremos  que todos los errores están arreglados cuando veamos el mensaje siguiente:

+ +

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

+ +

Resumen

+ +

Pues hasta aquí una introducción al depurado de HTML, que nos proporcionará habilidades para cuando comencemos a depurar CSS, JavaScript y otros lenguajes más adelante en nuestros trabajos. Este apartado también constituye el final de la introducción al módulo de artículos de aprendizaje de HTML; ahora podemos hacer los test de prueba: el primero de los cuales está en el enlace siguiente.

+ +

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

diff --git a/files/es/learn/html/introduccion_a_html/estructura/index.html b/files/es/learn/html/introduccion_a_html/estructura/index.html new file mode 100644 index 0000000000..1f5f1e315c --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/estructura/index.html @@ -0,0 +1,298 @@ +--- +title: Estructura web y documentación +slug: Learn/HTML/Introduccion_a_HTML/estructura +tags: + - CodingScripting + - Composición + - Diseño + - Formato + - Guía + - HTML + - Presentación + - Principiante + - Sitio + - Sitio Web + - bloques + - pagina + - programar + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

Además de definir partes individuales de tu página (como un párrafo o una imagen), {{Glossary("HTML")}} también dispone de elementos de bloque que se pueden utilizar para estructurar las distintas áreas de tu sito web (tal como el encabezado, el menú de navegación o la parte del contenido principal. En este artículo veras cómo planificar una estructura básica de página web y escribirás el HTML que representa esa estructura.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con HTML, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}. Aplicación de formato a texto en documentos HTML, según lo expuesto en la sección {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Fundamentos de texto HTML")}}. Funcionamiento de los hipervínculos, cubierto en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Crear hipervínculos")}}.
Objetivo:Aprender a estructurar tu documento usando atributos semánticos y construir la estructura de una página web sencilla.
+ +

Partes básicas de un documento

+ +

Las páginas web pueden y se deben diferenciar las unas de las otras, pero todas tienden a contener elementos comunes parecidos, a menos que estén destinadas a mostrar un vídeo o un juego a pantalla completa, o que formen parte de un proyecto artístico concreto o, simplemente, que estén mal estructuradas; estos elementos comunes son:

+ +
+
encabezado:
+
Normalmente formado por una gran franja que cruza la parte superior de la página con un gran título, un logotipo y quizás un lema. Esta parte suele permanecer invariable mientras navegas entre las páginas de un mismo sitio web.
+
barra de navegación:
+
Son los enlaces a las secciones principales del sitio web. Normalmente está formada por un menú con botones, enlaces o pestañas. Al igual que el encabezado, este contenido suele permanecer invariable en las diferentes páginas del sitio; tener un menú inconsistente en tu página web conducirá a los usuarios a la confusión y frustración. Muchos diseñadores web consideran que el menú de navegación forma parte del encabezado y que no posee un componente individual, aunque no es necesario que sea así; de hecho, algunos argumentan que tener ambos componentes por separado es mejor por motivos de {{web.link("/es/docs/Learn/Accessibility", "accesibilidad")}} porque los lectores de pantalla pueden leer mejor ambos elementos si están separados.
+
contenido principal:
+
Es la gran parte central de la página y contiene la mayor parte del contenido particular de una página web concreta; por ejemplo, el video que quieres ver, la narración que quieres leer, el mapa que quieres consultar, los titulares de las noticias, etc. ¡Esta es la parte que definitivamente debe variar mucho de una página a otra de tu sitio web!
+
barra lateral:
+
Suele incluir algún tipo de información adicional, enlaces, citas, publicidad, etc. Normalmente está relacionada con el contenido principal de la página (por ejemplo, en una página de noticias, la barra lateral podría contener la biografía del autor o enlaces a artículos relacionados), pero en otras ocasiones encontraras elementos recurrentes como un menú de navegación secundario.
+
pie de página:
+
Es la parte inferior de la página, que generalmente contiene la letra pequeña, el copyright o la información de contacto. Es el sitio donde se coloca la información común (al igual que en el encabezado), pero esta información no suele ser tan importante o es secundaria con respecto a la página en sí misma. El pie también se suele usar para propósitos {{Glossary("SEO")}}, e incluye enlaces de acceso rápido al contenido más popular.
+
+ +

Una página web «típica» se podría parecer a esta:

+ +

Un ejemplo de estructura de sitio web simple con un encabezado principal, menú de navegación, contenido principal, barra lateral y pie de página.

+ +

HTML para dar estructura al contenido

+ +

El ejemplo no es muy atractivo, pero puede servir para ilustrar un ejemplo de diseño de una página web típica. Puedes encontrar sitios con más columnas, algunas mucho más complejas, pero esta servirá para hacerte una idea general sobre el tema. Con el CSS adecuado podrás usar muchos más elementos para decorar las distintas secciones y conseguir que queden como deses, pero como se comentó anteriormente, necesitas respetar ciertas normas semánticas, y utilizar el elemento adecuado para cada tipo de sección.

+ +

La parte visual no lo es todo. Utilizarás diferentes fuentes y colores para llamar la atención de los usuarios sin discapacidad visual de las partes más importantes del contenido, como el menú de navegación y sus enlaces correspondientes, pero ¿qué ocurre con los usuarios con discapacidad visual que no pueden distinguir los colores llamativos o el tamaño grande de las fuentes?

+ +
+

Nota: Los daltónicos representan alrededor del 4% de la población mundial (aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres son daltónicos). Los invidentes y las personas con discapacidad visual representan aproximadamente el 4-5% de la población mundial (en 2012 había {{Interwiki("wikipedia", "Discapacidad visual")}} 285 millones de personas con alguna de estas características en el mundo, mientras que el total de la población estaba {{Interwiki("wikipedia", "World_human_population#/media/File:World_population_history.svg", "alrededor de los 7,000 millones")}}.

+
+ +

En tu código HTML puedes crear secciones de contenido basadas en su funcionalidad — puedes usar elementos que representen sin ambigüedad las diferentes secciones de contenido descritas, de forma que las tecnologías de accesibilidad y los lectores de pantalla puedan reconocer esos elementos y asistir en tareas como «encontrar el menú de navegación», o «encontrar el contenido principal». Como se mencionó anteriormente en el curso, hay una serie de {{web.link("/es/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Por_qué_necesitamos_estructura", "consecuencias por no usar la estructura de elementos y semántica adecuada para hacer el trabajo correctamente")}}.

+ +

HTML dispone de etiquetas adecuadas que puedes usar para establecer estas secciones semánticas, por ejemplo:

+ + + +

Aprendizaje activo: El código del ejemplo anterior

+ +

El ejemplo de página web que se muestra arriba se consigue a partir del siguiente código (disponible en el repositorio Github). Observa el ejemplo anterior, y a continuación échale un vistazo al código de abajo para identificar las secciones marcadas en el ejemplo.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>El título de mi página</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- las tres siguientes líneas son un truco para obtener elementos semánticos de HTML5 que funcionan en versiones de Internet Explorer antiguas -->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Aquí empieza el encabezado principal que se mantendrá en todas las páginas del sitio web -->
+
+    <header>
+      <h1>Encabezado</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Inicio</a></li>
+        <li><a href="#">Nuestro equipo</a></li>
+        <li><a href="#">Proyectos</a></li>
+        <li><a href="#">Contacto</a></li>
+      </ul>
+
+       <!-- Un formulario de búsqueda es una forma no-lineal de hacer búsquedas en un sitio web. -->
+
+       <form>
+         <input type="search" name="q" placeholder="Buscar">
+         <input type="submit" value="¡Vamos!">
+       </form>
+     </nav>
+
+    <!-- Aquí está el contenido principal de nuestra página -->
+    <main>
+
+      <!-- Contiene un artículo -->
+      <article>
+        <h2>Título del artículo</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>Subsección</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Otra subsección</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- el contenido aparte también se puede anidar dentro del contenido principal -->
+      <aside>
+        <h2>Relacionado</h2>
+
+        <ul>
+          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
+          <li><a href="#">Oh, me gusta estar junto al mar</a></li>
+          <li><a href="#">Aunque en el norte de Inglaterra</a></li>
+          <li><a href="#">Nunca deja de llover</a></li>
+          <li><a href="#">Oh, bueno...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- Y aquí está nuestro pie de página principal que se utiliza en todas las páginas de nuestro sitio web -->
+
+    <footer>
+      <p>©Copyright 2050 de nadie. Todos los derechos revertidos.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Tómate tu tiempo para revisar el código y comprenderlo — Los comentarios en el código también te ayudarán a entenderlo. No te pedimos que hagas mucho más en este artículo, porque la clave para entender el diseño del documento es escribir una estructura HTML conocida y posteriormente desarrollar su apariencia con CSS. Estudiaremos el diseño CSS como parte del tema CSS.

+ +

Elementos de diseño HTML en detalle

+ +

Es bueno entender el significado global de todos los elementos definitorios de las secciones HTML en detalle; es algo en que trabajarás gradualmente a medida que comiences a tener más experiencia en el desarrollo web. En el enlace {{web.link("/es/docs/Web/HTML/Element", "referencia de elementos HTML")}} podemos entrar en un gran nivel de detalle. Por el momento, estas son las definiciones principales que deberíamos tratar de entender:

+ + + +

Envolturas no semánticas

+ +

A veces hay situaciones en las que no encuentras un elemento semántico adecuado para agrupar ciertos elementos o englobar cierto contenido. Podrías querer agrupar ciertos elementos para referirte a ellos como una entidad que comparta cierto {{Glossary("CSS")}} o {{Glossary("JavaScript")}}. Para casos como esos, HTML dispone del elemento {{HTMLElement("div")}} y del elemento {{HTMLElement("span")}}. Preferentemente estos elementos se deberán utilizar con sus atributos ({{HTMLAttrxRef('class')}}), para conferirles algún tipo de etiquetado que permita determinarlos con facilidad.

+ +

{{HTMLElement("span")}} es un elemento no-semántico que se utiliza en el interior de una línea. Se utiliza cuando no se nos ocurre el uso de ningún otro elemento semántico de texto en el que incluir el contenido, o si no se desea añadir ningún significado específico. Por ejemplo:

+ +
<p>El rey volvió ebrio a su habitación alrededor de la 01:00, y sin duda la cerveza no le ayudaba
+cuando cruzó tambaleante la puerta <span class="editor-note">[nota del editor: en este instante de la
+representación, deberían atenuarse las luces]</span>.</p>
+ +

En este caso, la nota del editor solo proporciona información extra para el director de la obra; se supone que estos elementos no incluyen contenido extra importante. Para los usuarios sin discapacidad visual, quizás debamos usar CSS para diferenciar sutilmente estas notas del texto principal.

+ +

{{HTMLElement("div")}} es un elemento de bloque no-semántico; lo utilizaras cuando no se te ocurra el uso de otro elemento semántico mejor, o si no deseas añadir ningún significado concreto. Por ejemplo, imagina un carrito de compras que puedes pulsar en cualquier momento durante tu estancia en una tienda virtual:

+ +
<div class="shopping-cart">
+  <h2>Carrito de compras</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Pendientes de plata</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/" alt="Pendientes de plata">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Importe total: $237.89</p>
+</div>
+ +

Este no es un elemento lateral (<aside>) porque no necesariamente está relacionado con el contenido principal de la página (en realidad quieres que se pueda ver desde cualquier página). Ni siquiera se puede incluir en una sección (<section>) porque su contenido no forma parte del contenido principal de la página. Por lo tanto, un elemento <div> es el adecuado en este caso. Hemos incluido un encabezado para indicar a los lectores de pantalla donde van a encontrarlo.

+ +
+

Atención: Los elementos div son tan prácticos y simples que es fácil usarlos en exceso. Como no conllevan valor semántico, enmarañan el código HTML. Debemos tener cuidado de usarlos solo cuando no halles una solución mejor y reducir su uso al mínimo, porque de otro modo complicarás el mantenimiento y actualización de los documentos.

+
+ +

Saltos de línea y líneas horizontales

+ +

Dos elementos que debes conocer y utilizarás ocasionalmente son {{HTMLElement("br")}} y {{HTMLElement("hr")}}:

+ +

El elemento {{HTMLElement("br")}} genera un salto de línea en un párrafo; es la única manera de representar series de líneas cortas, como una dirección postal o un poema. Por ejemplo:

+ +
+
<p>Había una vez un hombre llamado O'Dell<br>
+A quién le encantaba escribir HTML<br>
+Pero su estructura era mala, su semántica era triste<br>
+y su marcado no se interpretó muy bien.</p>
+
+ +

Sin el elemento {{HTMLElement("br")}}, todo el párrafo se habría presentado como una sola línea larga (como ya hemos dicho con anterioridad en este curso, {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Los_espacios_en_blanco_en_HTML", "HTML ignora la mayoría del espacio en blanco")}}); con estos elementos {{HTMLElement("br")}} en el código, las líneas quedan:

+ +

{{EmbedLiveSample('line-break-live-sample', '100%', '125px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Los elementos {{HTMLElement("hr")}} generan una regla horizontal en el documento que denota un cambio en la temática del texto (como un cambio de tema o de escena). Visualmente tiene el aspecto de una línea horizontal. Por ejemplo:

+ +
+
<p>Ron fue acorralado en una esquina por las bestias abisales que merodeaban. Asustado, pero decidido a proteger a sus amigos, levantó su varita y se preparó para la batalla, con la esperanza de que su llamada de socorro hubiera llegado a alguien.</p>
+<hr>
+<p>Mientras tanto, Harry estaba sentado en su casa, mirando su declaración de regalías y pensando en cuándo saldría la próxima serie derivada, cuando de pronto voló por su ventana una carta de socorro y aterrizó en su regazo. La leyó vagamente y suspiró; "Será mejor que vuelva al trabajo entonces", reflexionó.</p>
+
+ +

Quedará así:

+ +

{{EmbedLiveSample('Ejemplo_en_vivo_línea_horizontal', '100%', '185px', '', '', 'hide-codepen-jsfiddle')}}

+ +

Planificación de una página web sencilla

+ +

Una vez has planificado el contenido de una página web sencilla, el paso lógico siguiente es intentar trabajar en el contenido para todo el sitio web, las páginas que necesitas y la forma de disponer las conexiones entre ellas para producir la mejor experiencia de usuario a los visitantes. Esto se conoce con el nombre de ({{Glossary("Arquitectura de la información")}}). Una web grande y compleja necesitará mucha planificación, pero para una web sencilla compuesta por unas cuantas páginas, el proceso puede ser sencillo, ¡y divertido!.

+ +
    +
  1. Ten en cuenta que habrá varios elementos comunes en muchas (si no en todas las) páginas, tal como el menú de navegación y el contenido del pie de página. Si la web está dedicada a un negocio, por ejemplo, sería una buena idea disponer de la información de contacto en el pie de página en todas las páginas. Anota lo que deseas tener en común en cada página. las características comunes del sitio de viajes para ir en cada página: título y logotipo, contacto, derechos de autor, términos y condiciones, selección de idioma, política de accesibilidad
    2. +
  2. A continuación, esboza un esquema sencillo de cuál podría ser la estructura deseada de la apariencia de cada página (podría ser algo tan sencillo como el siguiente dibujo). Anota los bloques principales. Un diagrama simple de una estructura de sitio de ejemplo, con un encabezado, un área de contenido principal, dos barras laterales opcionales y un pie de página
    3. +
  3. Ahora, elabora una lista completa con todo el resto del contenido de tu sitio web que no sea común a todas las páginas. Una larga lista de todas las funciones que podrías incluir en tu sitio de viajes, desde buscar, hasta ofertas especiales e información específica del país
    4. +
  4. A continuación, trata de ordenar todo este contenido por grupos, para hacerte una idea de las partes que podrían ir juntas en las diferentes páginas. Esto es muy similar a una técnica llamada {{Glossary("Clasificación de tarjetas")}}. Los elementos que deberían aparecer en un sitio de vacaciones ordenados en 5 categorías: Búsqueda, Especiales, Información específica del país, Resultados de búsqueda y Compra cosas
    5. +
  5. Ahora trata de esquematizar un mapa de tu sitio — dibuja un globo para cada página de tu sitio web y dibuja líneas que identifiquen el flujo de datos entre las distintas páginas. La página de inicio normalmente estará ubicada en el centro y enlazará con el resto de páginas; la mayoría de las páginas de una web sencilla estarán enlazadas desde el menú de navegación principal, aunque puede haber excepciones. También puedes incluir notas sobre cómo se pueden presentar las cosas. Un mapa del sitio que muestra la página de inicio, la página del país, los resultados de búsqueda, la página de ofertas especiales, la página de pago y la página de compra
    6. +
+ +

Aprendizaje activo: Creación de un mapa del sitio web

+ +

Intenta llevar a cabo el ejercicio anterior para crear tu propia página web. ¿Qué contenido le vas a dar a tu sitio web?

+ +
+

Nota: Guarda este esquema para utilizarlo más adelante.

+
+ +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar una evaluación detallada que pruebe estas habilidades al final del módulo; consulta {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructurar el contenido de una página")}}. ¡Recuerda leer primero el siguiente artículo de la serie y no solo saltarlo!

+ +

Resumen

+ +

En este punto, deberías tener una mejor idea sobre cómo estructurar una página/sitio web. En el último artículo de este módulo, se explica cómo depurar HTML.

+ +

Ve también

+ + + +

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

+ +

En este módulo

+ + diff --git "a/files/es/learn/html/introduccion_a_html/estructuraci\303\263n_de_una_p\303\241gina_de_contenido/index.html" "b/files/es/learn/html/introduccion_a_html/estructuraci\303\263n_de_una_p\303\241gina_de_contenido/index.html" new file mode 100644 index 0000000000..686940212e --- /dev/null +++ "b/files/es/learn/html/introduccion_a_html/estructuraci\303\263n_de_una_p\303\241gina_de_contenido/index.html" @@ -0,0 +1,105 @@ +--- +title: Estructuración de una Página de contenido +slug: Learn/HTML/Introduccion_a_HTML/Estructuración_de_una_página_de_contenido +tags: + - Aprendizaje + - Diseño + - Escribir Código + - Estructuración + - Evaluación + - HTML + - Principiante + - Prototipado + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}} 
+ +

La estructuración de una página de contenido lista para su uso mediante CSS es una habilidad muy importante para dominar, por lo que en esta evaluación  verá  su capacidad para pensar en cómo  podría finalizar una página  buscando y eligiendo la semántica estructural adecuada para construir un diseño en la parte superior.

+ +
+
 
+
+ + + + + + + + + + + + +
Prerequisitos:Antes de intentar esta evaluación, usted debería haber trabajado ya en el resto del curso, con un énfasis particular en la Estructura del Documento y del Sitio Web..
Objetivo:Probar el conocimiento de las estructuras de páginas web y cómo representar un prototipado de diseño prospectivo en el marcado.
+ +

Punto de partida

+ +

Para comenzar esta evaluación, debería tomar el   archivo zip  que contiene todos los activos de inicio. El archivo zip contiene:

+ + + +

Crée el ejemplo en su ordenador personal, o como alternativa utilize un sitio como JSBin o Thimble para hacer su evaluación.

+ +

Breve Proyecto

+ +

Para este proyecto, su tarea es tomar el contenido de la página principal de un sitio web de observación de aves y añadir elementos estructurales a la misma para que pueda tener un diseño de página aplicado a ella. Necesita tener:

+ + + +

Debe agregar una presentación adecuada para:

+ + + +

También debería:

+ + + +

Consejos

+ + + +

Ejemplo

+ +

La siguiente captura de pantalla muestra un ejemplo de cómo podría verse la letra después de haber sido marcada.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Evaluación

+ +

Si está siguiendo esta evaluación como parte de un curso organizado, debe ser capaz de dar su trabajo a su maestro / mentor para el marcado. Si usted está aprendiendo por si mismo, entonces  puede obtener la guía de marcado con bastante facilidad preguntando sobre ello en la lista de correo  dev-mdc , o en el canal IRC #mdn  en Mozilla IRC. Pruebe a hacer el ejercicio primero - ¡No hay nada que ganar por hacer trampa!

+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +
+ + +
 
+ +
 
+
diff --git a/files/es/learn/html/introduccion_a_html/index.html b/files/es/learn/html/introduccion_a_html/index.html new file mode 100644 index 0000000000..64c70649cb --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/index.html @@ -0,0 +1,77 @@ +--- +title: Introducción a HTML +slug: Learn/HTML/Introduccion_a_HTML +tags: + - CodingScripting + - Enlaces + - Estructura + - HTML + - Introducción a HTML + - Texto + - semántica +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

En su corazón, {{glossary("HTML")}} es un lenguaje muy sencillo compuesto de {{Glossary("Element", "elementos")}}, que se pueden aplicar a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?), e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.

+ +
+

¿Quieres transformarte en un desarrollador de la interfaz de usuario web?

+ +

Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.

+ +

Empieza aquí

+
+ +

Prerrequisitos

+ +

Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, por lo menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (es decir, sólo revisándola y consumiendo el contenido). Debes tener configurado un entorno de trabajo básico (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}), y comprender cómo crear y administrar archivos (como se detalla en {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "Manejo de archivos")}}). Ambos son parte de nuestro módulo completo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la web")}} para principiantes.

+ +
+

Nota: Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) el código de los ejemplos en un programa para escribir código en línea como JSBin o Glitch.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.

+ +
+
Empezar con HTML
+
Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedas haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo está estructurado un elemento HTML, cómo está estructurada una página HTML típica, y explica otras características importantes. En el camino, vamos a tener un juego con algo de HTML, ¡para alimentar tu intereses!
+
¿Qué hay en la cabecera? Metadatos en HTML
+
La cabecera de un documento HTML es la parte que no se muestra en el navegador web cuando se carga una página. Esta contiene información como el título ({{htmlelement("title")}}) de la página, enlaces a {{glossary("CSS")}} (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento).
+
Fundamentos de texto HTML
+
Uno de los principales trabajos de HTML es darle significado al texto (también conocido como semántica) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.
+
Creando hipervínculos
+
Los hipervínculos realmente son importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y explica las mejores prácticas sobre enlaces.
+
Formateo de texto avanzado
+
Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "fundamentos de texto HTML")}}. Los siguientes elementos son menos conocidos, pero sigue siendo útil conocerlos. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados, subíndices y superíndices, información de contacto, y mucho más.
+
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Estructura web y documentación")}}
+
Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también se usa para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esa estructura.
+
Depurar HTML
+
Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.
+
+ +

Evaluaciones

+ +

Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.

+ +
+
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Marcando para una carta")}}
+
Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.
+
{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Estructuración del contenido de una página")}}
+
Esta evaluación prueba tu capacidad para usar HTML para estructurar el contenido de una sencilla página, esta tiene una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.
+
+ +

Ve también

+ +
+
Bases de la alfabetización Web 1
+
Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de Introducción a HTML. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.
+
+ +
+

Retroalimentación

+ +

Ayúdanos a mejorar nuestras guías y tutoriales como esta respondiendo {{web.link("https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey", "nuestra encuesta aquí")}}.

+
diff --git a/files/es/learn/html/introduccion_a_html/iniciar/index.html b/files/es/learn/html/introduccion_a_html/iniciar/index.html new file mode 100644 index 0000000000..c05aa6a9f0 --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/iniciar/index.html @@ -0,0 +1,767 @@ +--- +title: Empezar con HTML +slug: Learn/HTML/Introduccion_a_HTML/iniciar +tags: + - Atributos + - Elemento + - Guía + - HTML + - Principiante + - comentários +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

En este artículo vamos a exponer lo más básico del HTML. Para comenzar definiremos elementos, atributos y el resto de términos importantes que quizá ya te suenen y qué función cumplen dentro del lenguaje. También explica dónde encajan estos en HTML. Aprenderás cómo se estructuran los elementos HTML, cómo se estructura una página HTML típica y otras características básicas importantes del lenguaje. Por el camino, también iremos practicando con algo de HTML.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, {{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "tener instalado el software básico")}} y conocimientos básicos de cómo {{web.link("/es/docs/Learn/Getting_started_with_the_web/Dealing_with_files", "trabajar con archivos")}}.
Objetivo:Familiarizarte con el lenguaje HTML, y adquirir algo de práctica escribiendo unos pocos elementos HTML.
+ +

¿Qué es el HTML?

+ +

{{Glossary("HTML")}} ("Hypertext Markup Language") no es un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. El HTML consiste en una serie de {{Glossary("Element", "elementos")}}, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las {{Glossary("Tag", "etiquetas")}} que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera. Por ejemplo, dada la siguiente línea de contenido:

+ +
Mi gato es muy gruñón
+ +

Si queremos que la línea sea independiente de otras, podemos especificar que es un párrafo encerrándola con una etiqueta de elemento de párrafo ({{htmlelement("p")}}):

+ +
<p>Mi gato es muy gruñón</p>
+ +
+

Nota: Las etiquetas en HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta {{htmlelement("title")}} se puede escribir como <title>, <TITLE>, <Title>, <TiTle>, etc., y funcionará correctamente. La mejor práctica, sin embargo, es escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.

+
+ +

Anatomía de un elemento HTML

+ +

Exploremos un poco el elemento párrafo:

+ +

Anatomía de los elementos HTML

+ +

Las principales partes de nuestro elemento son:

+ + + +

El elemento lo conforman la etiqueta de apertura, seguida del contenido, seguido de la etiqueta de cierre.

+ +

Aprendizaje activo: crear tu primer elemento HTML

+ +

Edita la siguiente línea en el área Entrada envolviéndola con las etiquetas <em> y </em>. Para abrir el elemento, coloca la etiqueta de apertura <em> al principio de la línea. Para cerrar el elemento, coloca la etiqueta de cierre </em> al final de la línea. ¡Obtienes una línea en cursiva! Puedes ver tus cambios actualizados automáticamente en la caja de texto de Salida.

+ +

Si te equivocas, siempre puedes volver al código anterior mediante el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

+ + + +

{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Elementos anidados

+ +

Se pueden poner elementos dentro de otros elementos. Esto se llama anidamiento. Si quisiéramos decir que nuestro gato es muy gruñón, podríamos encerrar la palabra muy en un elemento {{htmlelement("strong")}} para que aparezca destacada.

+ +
<p>Mi gato es <strong>muy</strong> gruñón.</p>
+ +

Hay una forma correcta e incorrecta de anidar. En el ejemplo anterior, primero abrimos el elemento p, luego abrimos el elemento strong. Para un anidamiento adecuado, primero debemos cerrar el elemento strong, antes de cerrar el p.

+ +

El siguiente es un ejemplo de la forma incorrecta de anidar:

+ +
<p>Mi gato es <strong>muy gruñón.</p></strong>
+ +

Los elementos tienen que abrirse y cerrarse correctamente para que estén claramente dentro o fuera el uno del otro. Con el tipo de superposición en el ejemplo anterior, el navegador tiene que adivinar tu intención. Este tipo de adivinanzas puede producir resultados inesperados.

+ +

Elementos de bloque y elementos en línea

+ +

Hay dos categorías importantes de elementos en HTML — Estos son los elementos de bloque y los elementos en línea.

+ + + +

Considera el siguiente ejemplo:

+ +
<em>primero</em><em>segundo</em><em>tercero</em>
+
+<p>cuarto</p><p>quinto</p><p>sexto</p>
+
+ +

{{htmlelement("em")}} es un elemento en línea. Así, como puedes observar, los tres primeros elementos se sitúan en la misma línea, uno tras otro sin espacio entre ellos. Por otro lado, {{htmlelement("p")}} es un elemento a nivel de bloque. Cada elemento p aparece en una nueva línea, con un espacio arriba y abajo. (El espaciado se debe al {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS", "estilo CSS")}} predeterminado que el navegador aplica a los párrafos).

+ +

{{ EmbedLiveSample('Elementos_de_bloque_y_elementos_en_línea', 700, 200, "", "") }}

+ +
+

Nota: HTML5 redefinió las categorías de elementos: consulta Categorías de contenido de elementos. Si bien estas definiciones son más precisas y menos ambiguas que sus predecesoras, las nuevas definiciones son mucho más complicadas de entender que block e inline . Este artículo seguirá con estos dos términos.

+
+ +
+

Nota: Los términos «en bloque» (block) y «en línea» (inline), tal como se usan en este tema, no se deberían confundir con {{web.link("/es/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes", "los tipos de casillas de CSS")}} que se conocen con el mismo nombre. Aunque de manera predeterminada están relacionados, el hecho de cambiar el tipo de aspecto visual del CSS no cambia la categoría del elemento ni afecta a aquellos elementos que pueda contener. Una de las razones por las que HTML5 abandonó el uso de estos términos fue para evitar este tipo de confusión.

+
+ +
+

Nota: Puedes encontrar referencias útiles que incluyen listas de elementos de bloque y elementos en línea. Consulta {{web.link("/es/docs/Web/HTML/Block-level_elements", "Elementos en bloque")}} y {{web.link("/es/docs/Web/HTML/Elementos_en_línea", "Elementos en línea")}}.

+
+ +

Elementos vacíos

+ +

No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se le quiere incluir. Por ejemplo, el elemento {{htmlelement("img")}} inserta una imagen en la página:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Este texto mostrará lo siguiente en tu página:

+ +

{{ EmbedLiveSample('Elementos_vacíos', 700, 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: Los elementos vacíos en ocasiones también se llaman elementos nulos o vanos (void elements).

+
+ +

Atributos

+ +

Los elementos también pueden tener atributos. Los atributos tienen este aspecto:

+ +

atributo html

+ +

Los atributos contienen información extra sobre el elemento que no se mostrará en el contenido. En este caso, el atributo class asigna al elemento un identificador que se puede utilizar para dotarlo de información de estilo.

+ +

Un atributo debería tener:

+ + + +

Aprendizaje activo: Añadir atributos a un elemento

+ +

Otro ejemplo de un elemento es {{htmlelement("a")}}. Esto significa ancla. Una ancla puede convertir el texto que encierra en un hipervínculo. Las anclas pueden tener varios atributos, pero varios son como sigue:

+ + + +

Edita la línea de abajo en el área de Entrada para convertirlo en un enlace a tu sitio web favorito.

+ +
    +
  1. Añade el elemento <a>.
    2. +
  2. Añade el atributo href y el atributo title.
    3. +
  3. Especifica el atributo target para abrir el enlace en una nueva pestaña.
    4. +
+ +

Los cambios se actualizarán inmediatamente en la zona de Salida. Deberías ver un enlace que mostrará el contenido del atributo title cuando pases el ratón encima, y que te llevará a la dirección web indicada por el atributo href cuando hagas clic. Recuerda que debes incluir un espacio entre el nombre del elemento y cada atributo.

+ +

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

+ + + +

{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Atributos booleanos

+ +

En ocasiones puedes ver atributos escritos sin valor. Esto está permitido. Estos se denominan atributos booleanos. Los atributos booleanos solo pueden tener un valor, que generalmente es el mismo que el nombre del atributo. Por ejemplo, considera el atributo {{htmlattrxref("disabled", "input")}}, que puedes asignar a los elementos de entrada del formulario. (Usa esto para deshabilitar los elementos de entrada del formulario para que el usuario no pueda realizar entradas. Los elementos desactivados suelen tener una apariencia atenuada). Por ejemplo:

+ +
<input type="text" disabled="disabled">
+ +

De manera abreviada, también es posible escribirlo como se describe a continuación (además, se ha incluido un elemento de entrada de formulario no desactivado como referencia, para dar una idea más precisa de lo que sucede):

+ +
<!-- el uso del atributo deshabilitado evita que el usuario final introduzca texto en el cuadro de entrada -->
+<input type="text" disabled>
+
+<!-- se permite la entrada de texto, ya que no contiene el atributo deshabilitado -->
+<input type="text">
+
+ +

Como referencia, el ejemplo anterior también incluye un elemento de entrada de formulario no deshabilitado. El HTML del ejemplo anterior produce este resultado:

+ +

{{ EmbedLiveSample('Atributos_booleanos', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Omitir comillas en valores de atributos

+ +

Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero interrumpirá la edición en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:

+ +
<a href=https://www.mozilla.org/>mi sitio web favorito</a>
+ +

Sin embargo, las cosas no funcionarán cuando a este estilo se añada el atributo title:

+ +
<a href=https://www.mozilla.org/ title=The Mozilla homepage>mi sitio web favorito</a>
+ +

En este punto el navegador interpretará mal el cambio y pensará que el atributo title corresponde a tres atributos: un atributo title con el valor The y dos atributos booleanos: Mozilla y homepage. ¡Obviamente, esta no es la intensión! Causará errores o comportamientos inesperados, como puedes ver en el ejemplo en vivo a continuación. ¡Intenta colocar el cursor sobre el enlace para ver el texto del título!

+ +

{{ EmbedLiveSample('Omitir_comillas_en_valores_de_atributos', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Incluye siempre las comillas de atributos. Evita tales problemas y da como resultado un código más legible.

+ +

¿Comillas simples o dobles?

+ +

En este artículo todos los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:

+ +
<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a>
+
+<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
+ +

Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un tipo de mezcla de comillas que saldrá mal:

+ +
<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>
+ +

Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:

+ +
<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>
+ +

Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:

+ +
<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>
+ +

Así que tendrás que hacer esto:

+ +
<a href='http://www.ejemplo.com' title='¿A que es &apos;divertido&apos;?'>Un enlace a mi ejemplo.</a>
+ +

Anatomía de un documento HTML

+ +

Los elementos HTML no son muy útiles por sí mismos. Ahora veremos cómo combinar los elementos individuales para formar una página HTML completa:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi página de prueba</title>
+  </head>
+  <body>
+    <p>Esta es mi página</p>
+  </body>
+</html>
+ +

Aquí tenemos:

+ +
    +
  1. <!DOCTYPE html>: El elemento doctype. En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto: + + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido. Eso es lo único que realmente necesitas saber.
    2. +
  2. <html></html>: El elemento <html>. Este elemento envuelve todo el contenido de la página. A veces se lo conoce como el elemento raíz.
    3. +
  3. <head></head>: El elemento <{{htmlelement("head")}}> (cabecera). Este elemento actúa como contenedor para todos los parámetros que quieras incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que quieras mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Aprenderás más acerca de esto en el siguiente artículo de la serie.
    4. +
  4. <meta charset="utf-8">: Este elemento establece que tu documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. En resumen: puede gestionar cualquier contenido textual que pongas en tu documento. No hay razón para no configurar este valor y te puede ayudar a evitar problemas más adelante.
    5. +
  5. <title></title>: El elemento {{htmlelement("title")}}. Este establece el título de la página, que es el título que aparece en la pestaña del navegador en la que se carga la página. El título de la página también se utiliza para describir la página cuando se marca como favorita.
    6. +
  6. <body></body>: El elemento <body>. Contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa.
    7. +
+ +

Aprendizaje activo: Añadir algunas características a un documento HTML

+ +

Si quieres escribir algo de HTML en tu ordenador local para experimentar, puedes:

+ +
    +
  1. Copiar el ejemplo de la página HTML del punto anterior.
    2. +
  2. Crear un archivo nuevo en un editor de texto.
    3. +
  3. Pegar el código en el nuevo archivo de texto.
    4. +
  4. Guardar el archivo como index.html.
    5. +
+ +
+

Nota: También puedes encontrar esta plantilla básica de HTML en el repositorio GitHub del Área MDN Learning.

+
+ +

Ahora puedes abrir este archivo en un navegador web para ver cómo se ve el código renderizado. Edita el código y actualiza el navegador para ver cuál es el resultado. En principio se verá algo así:

+ +

Una sencilla página HTML que dice esta es mi páginaEn este ejercicio, puedes editar el código en tu ordenador como se indica arriba, o puedes editarlo en la ventana editable que tienes a continuación (la ventana editable representa solo el contenido del elemento {{htmlelement("body")}}, en este caso). Intenta reproducir los siguientes pasos:

+ + + +

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si te quedas realmente atascado, pulsa el botón Mostrar la solución para ver la solución.

+ + + +

{{ EmbedLiveSample('Código_reproducible_3', 700, 600, "", "", "hide-codepen-jsfiddle") }}

+ +

Los espacios en blanco en HTML

+ +

En los ejemplos anteriores se han incluido espacios en blanco y saltos de línea en el código. Esto realmente no es necesario. Los dos siguientes fragmentos de código son equivalentes:

+ +
<p>Los perros son tontos.</p>
+
+<p>Los    perros        son
+         tontos.</p>
+ +

No importa cuántos espacios en blanco se utilicen (incluye tanto caracteres de espacio como saltos de línea) el intérprete de HTML reduce cada secuencia de espacio en blanco a un único espacio al interpretar el código. Entonces, ¿por qué utilizar espacios en blanco? La respuesta está en la legibilidad.
+
+ Es más fácil comprender lo que está sucediendo en tu código si lo tienes bien formateado. En nuestro HTML cada elemento anidado está sangrado dos espacios más con respecto al exterior. Depende de ti qué estilo de formato utilizas (cuántos espacios para cada nivel de sangría, por ejemplo) pero debes plantearte el uso de algún tipo de formato.

+ +

Referencias a entidades: Inclusión de caracteres especiales en HTML

+ +

En HTML, los caracteres <, >,",' y & son caracteres especiales. Forman parte de la sintaxis HTML. Entonces, ¿cómo incluye uno de estos caracteres especiales en tu texto? Por ejemplo, si deseas utilizar un signo comercial o menor que, y no hacer que se interprete como código.

+ +

Haces esto con referencias de caracteres. Estos son códigos especiales que representan caracteres, para ser usados en estas circunstancias exactas. Cada referencia de caracter comienza con un signo de ampersand (&) y finaliza con un punto y coma (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Caracter literalEquivalente de referencia de caracteres
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

El equivalente de referencia de caracter podría recordarse fácilmente porque el texto que utiliza se puede ver como menor que para '&lt;' , cita para ' &quot; ' y de manera similar para otros. Para obtener más información sobre la referencia de entidad, consulta {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}} en (Wikipedia).
+
+ Considera los dos siguientes párrafos:

+ +
<p>En HTML, defines un párrafo con el elemento <p>.</p>
+
+<p>En HTML, defines un párrafo con el elemento &lt;p&gt;.</p>
+ +

En la salida en vivo de abajo, puedes ver que el primer párrafo salió mal. El navegador interpreta la segunda instancia de <p> como el inicio de un nuevo párrafo. El segundo párrafo se ve bien porque hemos remplazado < y > por sus referencias correspondientes.

+ +

{{ EmbedLiveSample('Referencias_a_entidades_Inclusión_de_caracteres_especiales_en_HTML', 700, 200) }}

+ +
+

Nota: En la Wikipedia se puede localizar un listado de todas las referencias de entidades de caracteres HTML disponibles: {{interwiki("wikipedia", "Anexo:Referencias a entidades de caracteres XML y HTML")}}. Observa que no necesitas usar ninguna referencia de entidad más para ningún otro de estos símbolos porque los navegadores modernos gestionan estos símbolos correctamente siempre y cuando en tu HTML hayas {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "establecido la codificación de el juego de caracteres universal UTF-8", "#Specifying_your_document's_character_encoding")}}.

+
+ +

Comentarios HTML

+ +

En HTML hay un mecanismo para escribir comentarios en el código. Los comentarios son ignorados por el navegador y, por tanto, son invisibles para el usuario. El propósito de los comentarios es permitirte incluir notas en el código para explicar tu lógica o codificación. Esto es muy útil si regresas a un código base después de estar ausente el tiempo suficiente como para no recordarlo por completo. Del mismo modo, los comentarios son invaluables ya que diferentes personas están realizando cambios y actualizaciones.

+ +

Para convertir en un comentario una sección de contenido de tu archivo HTML, debes delimitarlo con los marcadores especiales <!-- y -->. Por ejemplo:

+ +
<p>No soy un comentario</p>
+
+<!-- <p>¡Yo sí!</p> -->
+ +

Como puedes ver a continuación, el primer párrafo aparece, pero el segundo no.

+ +

{{ EmbedLiveSample('Comentarios_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}

+ +

Resumen

+ +

Has llegado al final del artículo. Espero que hayas disfrutado del recorrido los conceptos básicos del HTML.
+ En este punto ya deberías entender el lenguaje, cómo funciona en un nivel básico y deberías poder escribir algunos elementos y atributos. También deberías poder escribir algunos elementos y atributos. Los artículos posteriores de este módulo profundizan en algunos de los temas aquí presentados, además de presentar otros conceptos del lenguaje.

+ +
+

Nota: En este punto, a medida que empieces a aprender más sobre HTML, es posible que también desees comenzar a explorar los conceptos básicos de las Hojas de estilo en cascada (Cascading style sheets) o {{web.link("/es/docs/Learn/CSS", "CSS")}}. CSS, es el lenguaje utilizado para estilizar páginas web. (por ejemplo, cambiar fuentes o colores, o alterar el diseño de la página) HTML y CSS funcionan bien juntos, como pronto descubrirás.

+
+ +

Ve también

+ + + +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +
+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html b/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..e53bb01826 --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/marking_up_a_letter/index.html @@ -0,0 +1,88 @@ +--- +title: Marcando una Carta +slug: Learn/HTML/Introduccion_a_HTML/Marking_up_a_letter +tags: + - Cabecera + - Codificación + - Enlaces + - Evaluación + - Principiante + - Texto +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+ +

Todos aprendemos a escribir una carta más tarde o más temprano; es también práctico practicar con nuestras habilidades para dar forma a los textos. En esta prueba deberás demostrar tus habilidades para dar forma a textos, incluyendo enlaces, además pondremos a prueba tu familiaridad con algunos contenidos de encabezamiento <head> en HTML.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar este examen deberías haber trabajado los artículos Getting started with HTML, What's in the head? Metadata in HTML, HTML text fundamentals, Creating hyperlinks, y Advanced text formatting.
Objetivos:Probar las habilidades básicas y avanzadas de formateo de texto e hyperlinks, y el conocimiento de los encabezamientos en HTML.
+ +

Punto de partida

+ +

Para comenzar esta prueba, deberemos copiar el texto que deberemos trabajar, y el CSS que necesitaremos incluir en nuestro HTML. Crearemos un archivo nuevo .html usando nuestro editor de texto (o alternativamente usaremos otros como JSBin o Thimble para hacer nuestra prueba).

+ +

Resumen del proyecto a desarrollar

+ +

En este proyecto tu tarea será publicar una carta que debe estar alojada en la intranet de una universidad. La carta es la respuesta de un compañero investigador a un posible estudiante de postgrado en relación a su deseo de trabajar en la universidad.

+ +

Semánticas de bloque/estructurales:

+ + + +

Semánticas intralínea:

+ + + +

El encabezamiento del documento:

+ + + +

Pistas y recomendaciones

+ + + +

Example

+ +

The following screenshot shows an example of what the letter might look like after being marked up.

+ +

+ +

Evaluación

+ +

Si estás haciendo esta prueba como parte de un curso organizado, deberías entregar tu trabajo al profesor para que lo corrija. Si estás auto-aprendiendo puedes conseguir la guía de corrección fácilmente pidiendola en el Hilo del area de aprendizaje, o en el canal IRC de #mdn en Mozilla IRC. Intenta hacerlo primero — no ganarás nada haciendo trampas.

+ +

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

diff --git a/files/es/learn/html/introduccion_a_html/metados_en/index.html b/files/es/learn/html/introduccion_a_html/metados_en/index.html new file mode 100644 index 0000000000..6fc5f94ab0 --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/metados_en/index.html @@ -0,0 +1,299 @@ +--- +title: ¿Qué hay en la cabecera? Metadatos en HTML +slug: Learn/HTML/Introduccion_a_HTML/Metados_en +tags: + - Cabecera + - CodingScripting + - Guía + - HTML + - Meta + - Metadatos + - Novato + - Principiante + - favicon + - head + - lang + - metadata +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

El elemento {{Glossary("Head", "head")}} de un documento HTML es la parte que no se muestra en el navegador cuando se carga la página. Contiene información como el título ({{htmlelement("title")}}) de la página, enlaces al {{Glossary("CSS")}} (si quieres aplicar estilo a tu contenido HTML con CSS), enlaces para personalizar favicon, y otros metadatos (datos sobre el HTML, como quién lo escribió y palabras claves importantes que describen el documento). En este artículo abarcaremos todo esto y más, para darte bases sólidas en el manejo del marcado y otro código que debería estar presente en tu cabecera.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con el HTML")}}.
Objetivo:Aprender acerca de la cabecera HTML {{Glossary("Head", "head")}}, cuál es su propósito, los elementos más importantes que puede contener, y qué efecto puede tener sobre el documento HTML.
+ +

¿Qué hay en la cabecera HTML?

+ +

Vamos a revisar el {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document", "documento HTML que se revisó en el artículo anterior")}}:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mi página de prueba</title>
+  </head>
+  <body>
+    <p>Esta es mi página</p>
+  </body>
+</html>
+ +

La cabecera HTML es el contenido del elemento {{htmlelement("head")}} — a diferencia del contenido del elemento {{htmlelement("body")}} (que sí se muestra en la página cuando se carga en el navegador), el contenido de la cabecera no se muestra en la página. Por el contrario, la función de la cabecera es contener los {{Glossary("Metadata", "metadatos")}} del documento. En el ejemplo anterior, la cabecera es bastante reducida:

+ +
<head>
+  <meta charset="utf-8">
+  <title>Mi página de prueba</title>
+</head>
+ +

En páginas más grandes, sin embargo, la cabecera puede llegar a contener bastantes elementos. Prueba a ir a algunos de tus sitios web favoritos y comprueba el contenido de la cabecera usando las {{web.link("/es/docs/Learn/Common_questions/What_are_browser_developer_tools", "herramientas para el desarrollador")}}. Nuestro objetivo aquí no es mostrarte cómo usar todo lo que puedes incluir en la cabecera, sino enseñarte cómo usar los elementos principales que vas a incluir en la cabecera y que te familiarices con ellos. Empecemos.

+ +

Añadir un título

+ +

Ya hemos visto el elemento {{htmlelement("title")}} en acción — se puede usar para poner un título al documento. Sin embargo, esto se puede confundir con el elemento {{htmlelement("h1")}}, que se utiliza para poner un encabezado de nivel superior al cuerpo de tu contenido — esto también se conoce como el título de la página. ¡Pero son cosas diferentes!

+ + + +

Aprendizaje activo: Análisis de un ejemplo sencillo

+ +
    +
  1. Para comenzar este aprendizaje activo, te proponemos ir a nuestro repositorio de GitHub y descargues una copia de nuestra página title-example.html. Lo puedes hacer de las siguientes maneras: + +
      +
    1. Copia y pega el código de la página en un archivo de texto nuevo en tu editor de código, luego guárdalo en un lugar conveniente.
      2. +
    2. Presiona el botón "Raw" en la página de GitHub, lo cual hace que aparezca el código sin procesar (posiblemente en una nueva pestaña del navegador). A continuación, en el menú de tu navegador elige Archivo → Guardar página como... y selecciona un lugar adecuado para guardar el archivo.
      3. +
    +
    2. +
  2. Ahora abre el archivo en tu navegador. Deberías ver algo como esto: +

    Una sencilla página web con el título configurado a <title> element, y el <h1> configurado a <h1> element.Ahora debería quedar claro dónde aparece el contenido de <h1> y dónde aparece el contenido de <title>.

    +
    3. +
  3. También podrías probar a abrir el código en tu editor de código, editar el contenido de estos elementos y luego actualizar la página en tu navegador. Juega un poco con ello.
    4. +
+ +

El contenido del elemento <title> también se usa de otras formas. Por ejemplo, si intentas marcar la página como favorita (Marcadores → Marcar esta página, o el icono en forma de estrella de Firefox), verás que el nombre que se sugiere para el marcado es el contenido del elemento <title>.

+ +

Se está marcando una página web en Firefox; el nombre del marcador se ha completado automáticamente con el contenido del elemento <title>

+ +

El contenido de <title> también se usa en el resultado de las búsquedas, como verás a continuación.

+ +

Metadatos: el elemento <meta>

+ +

Los metadatos son datos que describen datos, y HTML tiene una forma «oficial» de introducir metadatos en un documento — el elemento {{htmlelement("meta")}}. Por supuesto, el resto de los elementos de los que hablaremos en este artículo también se podrían considerar metadatos. Hay muchos diferentes tipos de elementos <meta> que se pueden incluir en el <head> de tu página, pero no vamos a intentar explicarlos todos en esta etapa porque resultaría demasiado confuso. En lugar de ello vamos a explicar algunas cuestiones con las que seguramente te vas a encontrar, solo para que te hagas una idea.

+ +

La codificación de caracteres de tu documento

+ +

El ejemplo que vimos arriba incluía esta línea:

+ +
<meta charset="utf-8">
+ +

Este elemento simplemente especifica la codificación de caracteres del documento — es decir, el conjunto de caracteres que el documento puede usar. utf-8 es un conjunto de caracteres universal que incluye casi todos los caracteres de casi cualquier idioma humano. Esto significa que tu página web podrá gestionar la visualización de cualquier idioma; por lo tanto, resulta una buena idea configurarlo en cada página web que crees. Por ejemplo, tu página podría gestionar inglés y japonés sin problemas:

+ +

Una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres establecida en universal o utf-8. Ambos idiomas se muestran bien.Si configuras tu codificación de caracteres en ISO-8859-1, por ejemplo (el juego de caracteres para el alfabeto latino), la representación de tu página puede aparecer desordenada:

+ +

una página web que contiene caracteres en inglés y japonés, con la codificación de caracteres configurada en latín. Los caracteres japoneses no se muestran correctamente

+ +
+

Nota: Algunos navegadores (Chrome, por ejemplo) automáticamente arreglan la codificación de caracteres incorrecta, de modo que según el navegador que uses, puede que no te topes con este problema. Aun así, deberías incluir una codificación de caracteres utf-8 en tu página web para evitar que se presenten potenciales problemas con otros navegadores.

+
+ +

Aprendizaje activo: Experimenta con la codificación de caracteres

+ +

Para probar esto, vuelve a visitar la plantilla HTML simple que obtuviste en la sección anterior sobre <title> (la página title-example.html) e intenta cambiar el valor de la propiedad meta charset por ISO-8859-1 y añade el japonés a tu página. Este es el código que usamos:

+ +
<p>Ejemplo en japonés: ご飯が熱い。</p>
+ +

Añadir un autor y descripción

+ +

Muchos elementos <meta> incluyen atributos name y content:

+ + + +

Dos de esos metadatos que resultan útiles de incluir en tu página definen al autor de la página y proporcionan una descripción concisa de la página. Veamos un ejemplo:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="El área de aprendizaje de MDN pretende
+proporcionar a los recién llegados a la web todo lo que deben
+saber para empezar a desarrollar páginas web y aplicaciones web.">
+ +

Especificar un autor resulta ventajoso por diversos motivos: es útil saber quién escribió la página para poder ponerte en contacto con el autor si tienes preguntas sobre el contenido. Algunos sistemas de gestión de contenido tienen herramientas para extraer automáticamente la información del autor de la página y ponerla a disposición para tales fines.

+ +

Especificar una descripción que incluya palabras clave relacionadas con el contenido de tu página resulta útil porque tiene el potencial de hacer que la página aparezca más arriba en las búsquedas relevantes que efectúan los motores de búsqueda (tales actividades se denominan optimizaciones del motor de búsqueda ({{web.link("/es/docs/Glossary/SEO", "Optimización de motores de búsqueda")}}) o {{Glossary("SEO")}}.)

+ +

Aprendizaje activo: El uso de la descripción en los motores de búsqueda

+ +

La descripción también se usa en las páginas de resultados del motor de búsqueda. Repasemos un ejercicio para explorar esto:

+ +
    +
  1. Ve a la página de inicio de Mozilla Developer Network.
    2. +
  2. Observa el código fuente de la página (Ctrl+clic o clic con el botón derecho en la página y selecciona la opción del menú Ver código fuente de la página).
    3. +
  3. Encuentra la etiqueta del metadato description. Se verá más o menos así (aunque puede cambiar con el tiempo): + 
    <meta name="description" content="The Mozilla Developer
+  Network (MDN) proporciona información sobre tecnologías
+  de código abierto que incluyen HTML, CSS y APIs tanto para sitios web como para aplicaciones HTML5.
+  También documenta productos Mozilla como el sistema operativo Firefox.">
    +
    4. +
  4. Ahora busca "Mozilla Developer Network" en tu motor de búsqueda favorito (nosotros hemos utilizado Google). Observarás que efectivamente merece la pena que tener el contenido de la descripción <meta> y el elemento <title> que se utiliza en la búsqueda. +

    Resultado de búsqueda en Yahoo para "Mozilla Developer Network"

    +
    5. +
+ +
+

Nota: En Google verás algunas subpáginas relevantes de MDN enumeradas debajo del enlace principal a la página principal de MDN (se trata de los llamados sitelinks y se pueden configurar con las Herramientas de administrador de Google), una forma de mejorar los resultados para tu sitio con el motor de búsqueda de Google.

+
+ +
+

Nota: Muchas características <meta> ya no se usan. Por ejemplo, los motores de búsqueda ignoran el elemento <meta> (<meta name="keywords" content="pon, tus, palabras clave, aquí">), que se supone que facilita palabras clave para motores de búsqueda de forma que se determine la relevancia de esa página según diferentes términos de búsqueda, porque los spammers rellenaban la lista de palabras clave con cientos de palabras clave que sesgaban los resultados.

+
+ +

Otros tipos de metadatos

+ +

Al navegar por la web también puedes encontrar otros tipos de metadatos. Muchas de las funciones que verás en los sitios web son creaciones propietarias diseñadas para proporcionar a ciertos sitios (como los sitios de redes sociales) información específica que puedan usar.

+ +

Por ejemplo, Open Graph Data es un protocolo de metadatos que Facebook inventó para proveer metadatos más ricos para los sitios web. En las fuentes de código de MDN, encontrarás esto:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) proporciona información
+sobre tecnologías Open Web, incluidas HTML, CSS y APIs para ambos sitios web
+y aplicaciones HTML5. También documenta productos Mozilla, como el sistema operativo Firefox.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Un efecto de esto es que cuando desde Facebook enlazas a un MDN, el enlace aparece con una imagen y una descripción, lo que resulta en una experiencia más enriquecedora para los usuarios.

+ +

Datos abiertos del protocolo de gráficos de la página de inicio de MDN como se muestra en Facebook, mostrando una imagen, título y descripción.

+ +

Twitter también tiene sus metadatos propios, las Twitter Cards, que tienen un efecto similar cuando la URL del sitio se muestra en twitter.com. Por ejemplo:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Agregar iconos personalizados a tu sitio

+ +

Para enriquecer un poco más el diseño de tu sitio puedes añadir en tus metadatos referencias a iconos personalizados, que se mostrarán en determinados contextos. El más común de ellos es el favicon (abreviatura de favorite icon —icono «favorito», referido al uso que se le da en las listas de «favoritos» o de marcadores («bookmarks»).

+ +

El humilde favicon ha existido durante muchos años. Es el primer icono de este tipo: un icono cuadrado de 16 píxeles que se utiliza en varios lugares. Es posible que veas (según el navegador) favicons que se muestran en la pestaña del navegador que contiene cada página abierta y junto a las páginas marcadas en el panel de marcadores.

+ +

Para añadir un favicon a tu página:

+ +
    +
  1. Guárdalo en el mismo directorio que la página index de tu sitio, en formato .ico (la mayoría de los buscadores admiten favicon en los formatos más comunes como .gif o .png, pero usar el formato ICO garantiza que funcionará hasta en Internet Explorer 6.)
    2. +
  2. Añade la siguiente línea de referencia en el {{HTMLElement("head")}} de tu HTML: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Los navegadores modernos usan favicons en diversos lugares, como en la etiqueta de la página que está abierta y en el panel de favoritos cuando la añades a tu lista de páginas favoritas:

+ +

El panel de marcadores de Firefox, que muestra un ejemplo marcado con un favicon junto a él.

+ +

Hoy día hay un montón de otros tipos de iconos a tener presentes. Por ejemplo, los encontrarás en el código fuente de la página de inicio de MDN:

+ +
<!-- iPad de tercera generación con pantalla de alta resolución: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone con pantalla de alta resolución: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- iPad de primera y segunda generación: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- Dispositivos iPhone sin pantalla Retina, iPod Touch y Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- favicon básico -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

Los comentarios explican para qué se usa cada icono (estos elementos abarcan situaciones como aportar un buen icono de alta resolución para usarlo cuando la página web se guarda en la página de inicio de un iPad).

+ +

No te preocupes demasiado sobre la implementación de todos estos tipos de iconos por el momento; se trata de una característica bastante avanzada y no se espera que tengas conocimientos de ello para avanzar en el curso. El propósito principal aquí es darte a conocer estos elementos por si te los encuentras mientras examinas el código fuente de otros sitios web.

+ +
+

Nota: Si tu sitio web utiliza una política de seguridad de contenido (content security policy o CSP) para mejorar la seguridad, la política afecta al favicon. Si te encuentras con problemas como que el favicon no se carga, comprueba que la respuesta a {{HTTPHeader("Content-Security-Policy")}} del header Content-Security-Policy para la directriz img-src en la cabecera no impide el acceso a este.

+
+ +

Aplicar CSS y JavaScript a HTML

+ +

Prácticamente todos los sitios web usan {{Glossary("CSS")}} para darles un buen aspecto y {{Glossary("JavaScript")}} para añadir funcionalidades interactivas, como reproductores de vídeo, mapas, juegos y demás. La manera más habitual de añadir CSS y JavaScript a una página web es con los elementos <link> y el elemento <script>, respectivamente.

+ + + +

Aprendizaje activo: aplicar CSS y JavaScript a una página

+ +
    +
  1. Para iniciar este aprendizaje activo, haz una copia de nuestros archivos meta-example.html, script.js y style.css, y guárdalos en un mismo directorio de tu ordenador. Asegúrate de que se guardan con los nombres y extensiones correctas.
    2. +
  2. Abre el archivo HTML tanto en tu navegador como en tu editor de texto.
    3. +
  3. Sigue la información facilitada anteriormente y añade los elementos <link> y <script> a tu HTML para aplicarle CSS y JavaScript.
    4. +
+ +

Si lo has hecho correctamente, al guardar tu HTML y actualizar tu navegador, deberías poder ver que las cosas han cambiado:

+ +

Ejemplo que muestra una página con CSS y JavaScript aplicados. El CSS ha hecho que la página se vuelva verde, mientras que JavaScript ha agregado una lista dinámica a la página

+ + + +
+

Nota: Si te encallas en este ejercicio y no logras ejecutar los archivos CSS/JS, comprueba tu página de ejemplo css-and-js.html.

+
+ +

Establecer el idioma principal del documento

+ +

Por último, merece la pena mencionar que puedes (y realmente deberías) especificar el idioma de tu página. Esto se puede hacer añadiendo el atributo {{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}} a la etiqueta de apertura del HTML (como se ve en el meta-example.html y se muestra abajo).

+ +
<html lang="es-MX">
+ +

Esto resulta útil en muchos sentidos. Los motores de búsqueda indizarán tu documento HTML de modo más efectivo si estableces el idioma (permitiendo, por ejemplo, que aparezca correctamente en los resultados del idioma especificado), y resulta útil para que las personas con discapacidad visual que utilizan los lectores de pantalla (por ejemplo, la palabra «six» existe tanto en francés como en inglés, pero su pronunciación es diferente).

+ +

También puedes establecer que las subsecciones de tu documento se reconozcan en diferentes idiomas. Por ejemplo, podemos establecer que nuestra sección de japonés se reconozca como japonés, de la siguiente manera:

+ +
<p>Ejemplo Japonés: <span lang="ja">ご飯が熱い。</span>.</p>
+ +

El estándar {{interwiki("wikipedia", "ISO_639-1")}} define estos códigos. Puedes encontrar más información sobre ello en Etiquetas de idioma en HTML y XML.

+ +

Resumen

+ +

Esto marca el final de nuestra guía rápida del {{Glossary("head")}} de HTML — aún hay muchas más cosas que puedes hacer aquí, pero una guía exhaustiva puede ser aburrida y confusa a estas alturas, ¡y nosotros queremos darte una idea de las cuestiones más comunes con las que te encontrarás aquí por ahora! En el siguiente artículo veremos los fundamentos de texto de HTML.

+ +

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

+ +

En este módulo

+ + diff --git a/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html new file mode 100644 index 0000000000..0e8dc1bfaf --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__enlaces/index.html @@ -0,0 +1,99 @@ +--- +title: 'Prueba tus habilidades: Enlaces' +slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces' +translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Links' +--- +
{{learnsidebar}}
+ +

El objetivo de esta pueba de habilidad es evaluar si has comprendido nuestro artículo Creando hipervínculos.

+ +
+

Nota: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, pide ayuda — mira la sección {{anch("Evaluación o ayuda adicional")}} al final de esta página.

+
+ +

Enlaces 1

+ +

En esta tarea necesitamos tu ayuda para completar los enlaces en nuestra página de información sobre Ballenas:

+ + + +
+

Nota: El primer enlace en el ejemplo tiene el atributo target="_blank" , así que cuando haces click en él, abre la página en una pestaña nueva. Esto no es estrictamente una buena práctica, pero lo hemos hecho aquí para que la página no se abra en el <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

+
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links1.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Enlaces 2

+ +

En esta tarea queremos que completes los cuatro enlaces para que se dirijan al lugar apropiado:

+ + + +
+

Nota: Los primeros tres enlaces en el ejemplo tienen el atributo target="_blank" especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

+
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links2.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Enlaces 3

+ +

Los siguientes enlaces dirigen a una página informativa acerca de los Narvales, una dirección de correo electrónico de soporte, y un documento PDF cuyo tamaño es 4MB. En esta tarea queremos que:

+ + + +
+

Nota: Los primeros tres enlaces en el ejemplo tienen el atributo target="_blank" especificado en ellos, abren la página enlazada en una nueva pestaña del navegador. Esto no es estrictamente una buena práctica, pero hemos hecho esto aquí para que las páginas no se abran dentro del <iframe> incrustado, ¡eliminando el código de ejemplo en el proceso!

+
+ +

Intenta actualizar el código en vivo más abajo para mostrar el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/links/links3.html", '100%', 700)}}

+ +
+

Descarga el inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
diff --git "a/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_b\303\241sico_html/index.html" "b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_b\303\241sico_html/index.html" new file mode 100644 index 0000000000..f35a083987 --- /dev/null +++ "b/files/es/learn/html/introduccion_a_html/prueba_tus_habilidades_colon__texto_b\303\241sico_html/index.html" @@ -0,0 +1,72 @@ +--- +title: 'Prueba tus habilidades: Texto básico HTML' +slug: 'Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Texto_básico_HTML' +tags: + - Aprendizaje + - HTML + - Principiante + - Prueba tus habilidades + - Texto +translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es evaluar si has comprendido el artículo Fundamentos de texto en HTML.

+ +
+

Nota: Puedes intentar resolverlo en los editores interactivos de más abajo, sin embargo puede ser muy úytil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, entonces pídenos ayuda — busca en la sección {{anch("Assessment or further help")}} al final de esta página.

+
+ +

Texto básico HTML 1

+ +

En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}

+ +
+

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Texto básico HTML 2

+ +

En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada.

+ +

Intenta actualizando el código más abajo para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}

+ +
+

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Texto básico HTML 3

+ +

En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis

+ +

Intenta actualizando el código más abajo para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}

+ +
+

Descarga el punto de inicio de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.

+ +

Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea con capacidad de compartir como CodePen, jsFiddle, o Glitch. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.
    2. +
  2. Escribe una publicación solicitando evaluacion y/o ayuda en el MDN Discourse forum Learning category. Tu publicación debería incluir: +
      +
    • Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de texto básico HTML 1".
      • +
    • Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un  editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica  - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html b/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html new file mode 100644 index 0000000000..f29638eb81 --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/test_your_skills_colon__advanced_html_text/index.html @@ -0,0 +1,67 @@ +--- +title: 'Pon a prueba tus habilidades: texto HTML avanzado' +slug: 'Learn/HTML/Introduccion_a_HTML/Test_your_skills:_Advanced_HTML_text' +translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_Advanced_HTML_text' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es evaluar si ha entendido nuestras   formato de texto avanzado articulo.

+ +
+

NOTA:Puede probar soluciones en los editores interactivos a continuación; sin embargo, puede resultar útil descargar el código y utilizar una herramienta en línea como  CodePen, jsFiddle, o Glitch trabajar en las tareas.
+
+ Si se atasca, pídanos ayuda; consulte la {{anch("Assessment or further help")}} section at the bottom of this page.

+
+ +

Texto HTML avanzado 1

+ +

En esta tarea, queremos que convierta los animales proporcionados y sus definiciones en una lista de descripción.
+
+ Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text1.html", '100%', 700)}}

+ +
+

Descarga el puno de partida para esta tarea to work in your own editor or in an online editor.

+
+ +

Texto HTML avanzado 2

+ +

En esta tarea, queremos que agregue algo de semántica al HTML proporcionado de la siguiente manera:

+ + + +

Intente actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/advanced-text/advanced-text2.html", '100%', 700)}}

+ +
+

Descarga el punto de partida para esta tarea para trabajar en su propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +
+
Puede practicar estos ejemplos en los editores interactivos anteriores.
+
+Si desea que se evalúe su trabajo, o está atascado y desea pedir ayuda:
+ +
+
+ +
    +
  1. Pon tu trabajo en un editor que se pueda compartir en línea, como  CodePen, jsFiddle, o Glitch. Puede escribir el código usted mismo o utilizar los archivos de punto de inicio vinculados en las secciones anteriores.
    2. +
  2. Escriba una publicación solicitando evaluación y / o ayuda en el  MDN Discourse forum Learning category. Tu publicación debe incluir: +
      +
    • Un título descriptivo como "Se busca evaluación para la prueba de habilidad de texto avanzado HTML 1".
      • +
    • Detalles de lo que ya ha probado y lo que le gustaría que hiciéramos, p. Ej. si está atascado y necesita ayuda, o quiere una evaluación.
      • +
    • Un enlace al ejemplo que desea evaluar o con el que necesita ayuda, en un editor que se puede compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
      • +
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que desea ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/html/introduccion_a_html/texto/index.html b/files/es/learn/html/introduccion_a_html/texto/index.html new file mode 100644 index 0000000000..912acb7dfe --- /dev/null +++ b/files/es/learn/html/introduccion_a_html/texto/index.html @@ -0,0 +1,970 @@ +--- +title: Fundamentos de texto en HTML +slug: Learn/HTML/Introduccion_a_HTML/texto +tags: + - CodingScripting + - Encabezados + - Estructuras + - Guía + - HTML + - Introducción a HTML + - Novato + - Principiante + - Párrafos + - Texto + - aprende + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Una de las principales funciones de HTML es dar al texto estructura y significado (también conocido como {{Glossary("semantics", "semántica")}}), de forma que un navegador pueda mostrarlo correctamente. Este articulo explica la forma en que se puede usar {{Glossary("HTML")}} para estructurar una página de texto añadiendo encabezados y párrafos, enfatizando palabras, creando listas y más.

+ + + + + + + + + + + + +
Prerrequisitos:Estar familiarizado con el HTML básico, que se expone en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Getting_started", "Empezar con HTML")}}.
Objetivo:Aprender a marcar una página de texto básica para darle estructura y significado, incluidos párrafos, encabezados, listas, efectos de énfasis y citas.
+ +

Conceptos básicos: Encabezados y párrafos

+ +

La mayor parte del texto estructurado está compuesto por encabezados y párrafos, independientemente de si lees una historia, un periódico, un libro de texto, una revista, etc.

+ +

Un ejemplo de la portada de un periódico, que muestra el uso de un encabezado, subtítulos y párrafos de nivel superior.

+ +

El contenido estructurado simplifica la experiencia en la lectura y se disfruta más.

+ +

En HTML, cada párrafo tiene que estar delimitado por un elemento {{HTMLElement("p")}}, como en este ejemplo:

+ +
<p>Soy un párrafo, ¡desde luego que lo soy!</p>
+ +

Cada sección tiene que estar delimitada por un elemento de encabezado:

+ +
<h1>Yo soy el título de la historia</h1>
+ +

Hay seis elementos de encabezado: {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} y {{HTMLElement("h6")}}. Cada elemento representa un nivel de contenido diferente en el documento; <h1> representa el título principal, <h2> representa el subtítulo, <h3> representa el subtítulo del subtítulo, y así sucesivamente.

+ +

Cómo establecer la estructura jerárquica

+ +

Por ejemplo, en esta historia, <h1> representa el título de la historia, <h2> representará el título de cada capítulo y <h3> las diferentes secciones del capítulo, y así sucesivamente.

+ +
<h1>El agujero aplastante</h1>
+
+<p>Por Chris Mills</p>
+
+<h2>Capítulo 1: La oscura noche</h2>
+
+<p>Era una noche oscura. En algún lugar, un búho ululó. La lluvia azotó el ...</p>
+
+<h2>Capítulo 2: El silencio eterno</h2>
+
+<p>Nuestro protagonista ni susurrar pudo al ver esa sombría figura ...</p>
+
+<h3>El espectro habla</h3>
+
+<p>Habían pasado varias horas más, cuando de repente el espectro se incorporó y exclamó: "¡Por favor, ten piedad de mi alma!"</p>
+ +

Realmente es a tu elección lo que cada elemento involucrado represente, siempre y cuando la jerarquía tenga sentido. Solo es necesario que tengas en cuenta unas pocas buenas prácticas mientras creas la estructura:

+ + + +

¿Por qué necesitamos estructura?

+ +

Para responder a esta cuestión, echemos un vistazo a text-start.html; el apartado inicial de nuestro ejemplo en curso para este artículo (una buena receta de hummus). Debes guardar una copia de este archivo en tu ordenador porque después la necesitarás para los ejercicios prácticos. El cuerpo (<body>) de este documento incluye varios elementos de contenido que no están marcados de ninguna manera pero están separados por saltos de línea (se ha pulsado Intro/Retorno para continuar en la siguiente línea).

+ +

Sin embargo, cuando abres el documento en tu navegador, verás que el texto aparece... ¡como una masa enorme!

+ +

Una página web que muestra un muro de texto sin formato, porque no hay elementos en la página para estructurarlo.

+ +

Esto se debe a que no hay elementos que den estructura al contenido, por lo que el navegador no sabe qué es un encabezado y qué es un párrafo. Además:

+ + + +

Por lo tanto, debemos dar a nuestro contenido una estructura definida.

+ +

Aprendizaje Activo: Dar estructura a nuestro contenido

+ +

Pasemos directamente a un ejemplo real. En el ejemplo de abajo, añade elementos al texto en bruto en el campo Código editable para que en el campo Salida en vivo aparezcan como un encabezado y dos párrafos.

+ +

Si te equivocas, siempre puedes restablecer el código anterior pulsando el botón Restablecer. Si encallas, pulsa el botón Mostrar solución para ver la respuesta...

+ + + +

{{ EmbedLiveSample('Código_reproducible', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

¿Por qué necesitamos semántica?

+ +

Contamos con la semántica para todo lo que nos rodea. Nos basamos en experiencias previas para conocer la función de cada objeto cotidiano; cuando miramos un objeto, sabemos cuál debe ser su función. Entonces, por ejemplo, esperamos que un semáforo en rojo signifique "alto" y que un semáforo en verde signifique "avance". Las cosas se pueden complicar muy rápidamente si se aplica la semántica incorrecta. (¿Algún país usa rojo para significar "avance"? Esperemos que no).

+ +

De manera similar, debemos asegurarnos de que utilizamos los elementos adecuados y damos a nuestro contenido el significado y función correctos y la apariencia adecuada. En este mismo sentido, el elemento {{HTMLElement("h1")}} es un elemento semántico que da al texto al que delimita la función (o significado) de un titular de primer nivel en tu página.

+ +
<h1>Este es un titular de primer nivel</h1>
+ +

De manera predeterminada, el navegador le asignará una fuente de gran tamaño para darle el aspecto de un titular (aunque se le podrá dar el estilo que se quisiera usando CSS). Lo más importante es que su valor semántico se va a usar de diferente manera, por ejemplo, por los motores de búsqueda y los lectores de pantalla (como se mencionó antes).

+ +

Por otra parte, podrías hacer que cualquier elemento parezca un titular de primer rango. Considera lo siguiente:

+ +
<span style="font-size: 32px; margin: 21px 0;">¿Es este un titular de primer rango?</span>
+ +

Este es un elemento {{HTMLElement("span")}}. No tiene semántica. Se usa para delimitar contenido cuando se le quiere aplicar CSS (o tratarlo con JavaScript) sin proporcionarle ningún significado extra (encontrarás más información sobre este tipo de elemento más adelante en el curso). Hemos aplicado CSS a este elemento para que parezca un titular de primer nivel, pero al no tener valor semántico, no tiene ninguna de las ventajas añadidas que hemos descrito antes. Es una buena idea usar el elemento HTML apropiado para cada tarea.

+ +

Listas

+ +

Ahora volvamos nuestra atención hacia las listas. Las listas están en todos los aspectos de nuestra vida: desde la lista de compras a la lista de instrucciones que sigues inconscientemente para llegar a casa todos los días, o las listas de instrucciones que sigues en estos tutoriales. Las listas están en todos lados en la web también y hay tres diferentes tipos de las que nos vamos a ocupar.

+ +

Listas no ordenadas

+ +

Las listas no ordenadas se usan para marcar listas de artículos cuyo orden no es importante. Tomemos como ejemplo una lista de compras:

+ +
leche
+huevos
+pan
+hummus
+ +

Cada lista desordenada comienza con un elemento {{HTMLElement("ul")}} («unordered list») que delimita todos los elementos de la lista:

+ +
<ul>
+leche
+huevos
+pan
+hummus
+</ul>
+ +

El siguiente paso es delimitar cada artículo de la lista con un elemento {{HTMLElement("li")}} («list item»).

+ +
<ul>
+  <li>leche</li>
+  <li>huevos</li>
+  <li>pan</li>
+  <li>hummus</li>
+</ul>
+ +

Aprendizaje activo: marcar una lista no ordenada

+ +

Edita el siguiente ejemplo para crear tu propia lista HTML no ordenada.

+ + + +

{{ EmbedLiveSample('Código_reproducible_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Listas ordenadas

+ +

Las listas ordenadas son aquellas en las que el orden de los elementos sí importa. Tomemos como ejemplo una lista de instrucciones para seguir un itinerario:

+ +
Conduce hasta el final de la calle
+Gira a la derecha
+Sigue derecho por las dos primeras glorietas
+Gira a la izquierda en la tercer glorieta
+El colegio está a la derecha, 300 metros más adelante
+ +

La estructura de marcado es la misma que para las listas no ordenadas, excepto que debes delimitar los elementos de la lista con una etiqueta {{HTMLElement("ol")}} («ordered list»), en lugar de <ul>:

+ +
<ol>
+  <li>Conduce hasta el final de la calle</li>
+  <li>Gira a la derecha</li>
+  <li>Sigue derecho por las dos primeras glorietas</li>
+  <li>Gira a la izquierda en la tercer glorieta</li>
+  <li>El colegio está a tu derecha, 300 metros más adelante</li>
+</ol>
+ +

Aprendizaje activo: Marcar una lista ordenada

+ +

Edita el siguiente ejemplo para crear tu propia lista ordenada en HTML.

+ + + +

{{ EmbedLiveSample('Código_reproducible_3', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Aprendizaje activo: marcar la página de tu receta

+ +

Llegados a este punto del artículo, tienes toda la información necesaria para marcar la página de ejemplo con tu receta. Puedes escoger entre guardar una copia local del archivo inicial text-start.html y trabajar en él, o hacerlo sobre el ejemplo editable de abajo. Probablemente sea mejor trabajar en tu copia local porque podrás guardar tu progreso, mientras que si lo haces sobre el ejemplo editable, los cambios se perderán la próxima vez que cargues la página. Ambos métodos tienen pros y contras.

+ + + +

{{ EmbedLiveSample('Código_reproducible_4', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Si encallas, siempre puedes pulsar el botón Mostrar solución o comprobar el ejemplo completo text-complete.html en nuestro repositorio de Github.

+ +

Listas anidadas

+ +

Es perfectamente correcto anidar una lista dentro de otra. Posiblemente quieras tener subelementos bajo elementos de rango superior. Tomemos la segunda lista de nuestro ejemplo de la receta:

+ +
<ol>
+  <li>Pela el ajo y picarlo en trozos gruesos.</li>
+  <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
+  <li>Mete todos los alimentos en un procesador de alimentos.</li>
+  <li>Pica todos los ingredientes hasta conseguir una pasta.</li>
+  <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
+  <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
+</ol>
+ +

Puesto que los dos últimos elementos están estrechamente relacionados con el elemento anterior (se leen como subinstrucciones u opciones que encajan bajo ese elemento), puede tener sentido anidarlos dentro de su propia lista no ordenada e introducir esa lista bajo el cuarto elemento. Tendría el siguiente aspecto:

+ +
<ol>
+  <li>Pela el ajo y picarlo en trozos gruesos.</li>
+  <li>Retira las semillas y el tallo del pimiento, y cortarlo en trozos gruesos.</li>
+  <li>Mete todos los alimentos en un procesador de alimentos.</li>
+  <li>Procesa todos los ingredientes hasta conseguir una pasta.
+    <ul>
+      <li>Si deseas un hummus "grueso", procésalo corto tiempo.</li>
+      <li>Pica durante más tiempo si se desea obtener un hummus "suave".</li>
+    </ul>
+  </li>
+</ol>
+ +

Vuelve al ejemplo anterior y reescribe la lista de este modo.

+ +

Énfasis e importancia

+ +

En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta sección veremos los más comunes.

+ +

Énfasis

+ +

Cuando queremos dar énfasis al lenguaje hablado, acentuamos ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:

+ +

Me alegro de que no llegues tarde.

+ +

Me alegro de que no llegues tarde.

+ +

La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.

+ +

En HTML usamos el elemento {{HTMLElement("em")}} («emphasis») para marcar estos casos. El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores de pantalla, que lo expresan con un diferente tono de voz. El navegador, de manera predeterminada, aplica el estilo de letra itálica, pero no debes utilizar esta etiqueta solamente para establecer el estilo de letra itálica. Para usar ese estilo, debes utilizar únicamente la etiqueta del elemento {{HTMLElement("span")}} y algo de CSS u otra etiqueta con el elemento {{HTMLElement("i")}} (ve abajo).

+ +
<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>
+ +

Importancia fuerte

+ +

Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo negrita. Por ejemplo:

+ +

Este líquido es altamente tóxico.

+ +

Cuento contigo. ¡No llegues tarde!

+ +

En HTML usamos el elemento {{HTMLElement("strong")}} (importancia fuerte) para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores de pantalla reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por omisión, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento {{HTMLElement("span")}} y CSS, o un elemento {{HTMLElement("b")}} (ve más abajo).

+ +
<p>Este líquido es <strong>altamente tóxico</strong>.</p>
+
+<p>Cuento contigo. <strong>¡No llegues tarde!</strong></p>
+ +

Puedes anidar elementos de énfasis dentro de elementos de importancia y viceversa si lo deseas:

+ +
<p>Este líquido es <strong>altamente tóxico</strong> —
+si lo bebes, <strong>podrías <em>morir</em></strong>.</p>
+ +

Aprendizaje activo: ¡Seamos importantes!

+ +

En esta sección de aprendizaje activo te proporcionamos un ejemplo editable. Practica un poco añadiendo algo de énfasis e importancia a las palabras que creas que lo necesitan.

+ + + +

{{ EmbedLiveSample('Código_reproducible_5', 700, 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Cursiva, negrita, subrayado...

+ +

Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con {{HTMLElement("b")}} (negrita o «bold»), {{HTMLElement("i")}} (cursiva o «italic») y{{HTMLElement("u")}} (subrayado o «underline») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían el CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como elementos de presentación y no se deberían usar porque, como hemos visto, la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos.

+ +

HTML5 redefinió los elementos <b>, <i> y <u> con roles semánticos nuevos un tanto confusos.

+ +

Esta es la regla de oro: el uso de <b>, <i> o <u> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de itálica no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.

+ + + +
+

Una observación prudente acerca del subrayado: La gente suele asociar estrechamente el subrayado con los hipervínculos. Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento {{HTMLElement('u')}} cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado en la web. El siguiente ejemplo ilustra cómo lo puedes hacer.

+
+ +
<!-- nombres científicos -->
+<p>
+  El colibrí garganta de rubí (<i>Archilochus colubris</i>)
+  es el colibrí más común en el este de América del Norte.
+</p>
+
+<!-- extranjerismos -->
+<p>
+  El menú era un mar de palabras exóticas como <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> y <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- un error ortográfico reconocido -->
+<p>
+  Algún día aprenderé a deletrear mejor.
+</p>
+
+<!-- Palabras clave destacadas en una serie de instrucciones -->
+<ol>
+  <li>
+    <b>Corta</b> dos piezas de la hogaza de pan.
+  </li>
+  <li>
+    <b>Inserta</b> una rodaja de tomate y una hoja de
+    lechuga entre las rebanadas de pan.
+  </li>
+</ol>
+ +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encontrarás más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante en {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics", "Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML")}}.

+ +

Resumen

+ +

¡Eso es todo por ahora! Este artículo debería haberte dado una buena idea de cómo comenzar a marcar texto en HTML y te ha presentado algunos de los elementos más importantes en este ámbito. Hay muchos más elementos semánticos para desarrollar en esta área, y veremos muchos más en nuestro artículo {{web.link("/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Formateo de texto avanzado")}}, más adelante en el curso. En el siguiente artículo, veremos en detalle cómo {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "crear hipervínculos")}}, posiblemente el más importante elemento en la web.

+ +

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

+ +

En este módulo

+ + diff --git a/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..5169cfc976 --- /dev/null +++ b/files/es/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,366 @@ +--- +title: Agregar Gráficos Vectoriales a la Web +slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +tags: + - Aprender + - Guía + - HTML + - Imagenes + - Principiante + - Raster + - SVG + - Vector + - graficos + - iframe + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

Los gráficos vectoriales son muy útiles en muchas circunstancias — tienen tamaño de archivo pequeños y son altamente escalables, por lo que no se pixelan cuando se amplían a un tamaño más grande. En este artículo le mostraremos cómo incluir uno en su página web.

+
+ + + + + + + + + + + + +
Prerequisitos:Debe conocer los conceptos básicos de HTML y cómo insertar imágenes en su documento
Objetivo:Aprender a incrustar una imagen SVG (vector) en una página web.
+ +
+

Nota: Este artículo no tiene la intención de enseñarte SVG; solo mostrarte qué es, y cómo agregarlo a las páginas web.

+
+ +

¿Qué son los gráficos vectoriales?

+ +

En la web, trabajarás con dos tipos de imágenes — imágenes rasterizadas, e imágenes vectoriales:

+ + + +

Para darte una idea de la diferencia entre los dos, veamos un ejemplo. Puede encontrar este ejemplo en vivo en nuestro repositorio de Github como vector-versus-raster.html — muestra dos imágenes aparentemente idénticas una al lado de la otra, de una estrella roja con una sombra negra. La diferencia es que el de la izquierda es un PNG y el de la derecha es una imagen SVG.

+ +

La diferencia se hace evidente cuando amplía la página — la imagen PNG se pixela a medida que se acerca porque contiene información sobre dónde debería estar cada píxel (y de qué color). Cuando se amplía, cada píxel simplemente aumenta de tamaño para llenar varios píxeles en la pantalla, por lo que la imagen comienza a verse borrosa. Sin embargo, la imagen vectorial sigue luciendo agradable y nítida, porque no importa el tamaño que tenga, los algoritmos se utilizan para resolver las formas en la imagen, y los valores simplemente se escalan a medida que aumenta.

+ +

Two star images

+ +

Two star images zoomed in, one crisp and the other blurry

+ +
+

Nota: Las imágenes de arriba son en realidad todos PNG, con la estrella de la izquierda en cada caso representando una imagen rasterizada y la estrella de la derecha representando una imagen vectorial. Nuevamente, vaya a la demostración de vector-versus-raster.html para ver un ejemplo real.

+
+ +

Además, los archivos de imágenes vectoriales son mucho más ligeros que sus equivalentes ráster, porque solo necesitan contener un puñado de algoritmos, en lugar de información sobre cada píxel de la imagen individualmente.

+ +

¿Qué es SVG?

+ +

SVG es un lenguaje basado en {{glossary("XML")}}-para describir imágenes vectoriales. Básicamente es un marcado, como HTML, excepto que tiene muchos elementos diferentes para definir las formas que desea que aparezcan en su imagen y los efectos que desea aplicar a esas formas. SVG es para marcar gráficos, no contenido. En el extremo más simple del espectro, tienes elementos para crear formas simples, como {{svgelement("circle")}} and {{svgelement("rect")}}. Las funciones SVG más avanzadas incluyen {{svgelement("feColorMatrix")}} (transformar colores usando una matriz de transformación), {{svgelement("animate")}} (animar partes de su gráfico vectorial), and {{svgelement("mask")}} (aplica una máscara sobre la parte superior de tu imagen).

+ +

Como ejemplo simple, el siguiente código crea un círculo y un rectángulo:

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+ +

Esto crea la siguiente salida:

+ +

{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}

+ +

En el ejemplo anterior, puede tener la impresión de que SVG es fácil de codificar manualmente. Sí, puede codificar manualmente SVG simple en un editor de texto, pero para una imagen compleja, esto rápidamente comienza a ser muy difícil. Para crear imágenes SVG, la mayoría de la gente usa un editor de gráficos vectoriales como Inkscape o Illustrator. Estos paquetes le permiten crear una variedad de ilustraciones utilizando varias herramientas gráficas y crear aproximaciones de fotos (por ejemplo, la función Trazar mapa de bits de Inkscape).

+ +

SVG tiene algunas ventajas adicionales además de las descritas hasta ahora:

+ + + +

Entonces, ¿por qué alguien querría usar gráficos rasterizados sobre SVG? Bueno, SVG tiene algunas desventajas:

+ + + +

Los gráficos rasterizados son posiblemente mejores para imágenes de precisión complejas, como fotos, por las razones descritas anteriormente.

+ +
+

Nota: En Inkscape, guarde sus archivos como SVG simple para ahorrar espacio. Además, consulte este artículo que describe cómo preparar SVGs para la web.

+
+ +

Agregar SVG a sus páginas

+ +

En esta sección, veremos las diferentes formas en las que puede agregar gráficos vectoriales SVG a sus páginas web.

+ +

La forma rápida: {{htmlelement("img")}}

+ +

Para incrustar un SVG a través de un elemento {{htmlelement ("img")}}, solo necesita hacer referencia a él en el atributo src como es de esperar. Necesitará un atributo de altura o ancho (o ambos si su SVG no tiene una relación de aspecto inherente). Si aún no lo ha hecho, lea Imágenes en HTML.

+ +
<img
+    src="equilateral.svg"
+    alt="triangle with all three sides equal"
+    height="87"
+    width="100" />
+ +

Pros

+ + + +

Cons

+ + + +

Solución de problemas y compatibilidad con varios navegadores

+ +

Para los navegadores que no admiten SVG (IE 8 y versiones anteriores, Android 2.3 y versiones anteriores), puede hacer referencia a un PNG o JPG de su atributo src y usar un atributo {{htmlattrxref ("srcset", "img")}} ( que solo los navegadores recientes reconocen) para hacer referencia al SVG. Siendo este el caso, solo los navegadores compatibles cargarán el SVG; los navegadores más antiguos cargarán el PNG en su lugar:

+ +
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+ +

También puede usar SVG como imágenes de fondo CSS, como se muestra a continuación. En el siguiente código, los navegadores más antiguos se quedarán con el PNG que entienden, mientras que los navegadores más nuevos cargarán el SVG:

+ +
background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+ +

Al igual que el método <img> descrito anteriormente, la inserción de SVG con imágenes de fondo CSS significa que el SVG no se puede manipular con JavaScript y también está sujeto a las mismas limitaciones de CSS.

+ +

Si sus SVG no se muestran en absoluto, podría deberse a que su servidor no está configurado correctamente. Si ese es el problema, este artículo le indicará la dirección correcta.

+ +

Cómo incluir código SVG dentro de su HTML

+ +

También puede abrir el archivo SVG en un editor de texto, copiar el código SVG y pegarlo en su documento HTML; esto a veces se denomina poner su SVG en línea o SVG en línea. Asegúrese de que su fragmento de código SVG comience y termine con las etiquetas <svg> </svg> (no incluya nada fuera de ellas). Aquí tiene un ejemplo muy simple de lo que puede pegar en su documento:

+ +
<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+
+ +

Pros

+ + + +

Cons

+ + + + + +

Cómo incrustar un SVG con un {{htmlelement("iframe")}}

+ +

Puede abrir imágenes SVG en su navegador al igual que las páginas web. Entonces, incrustar un documento SVG con un <iframe> se realiza tal como lo estudiamos en De <object> a <iframe> — otras tecnologías de incrustación.

+ +

Aquí hay una revisión rápida:

+ +
<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+ +

Este definitivamente no es el mejor método para elegir:

+ +

Cons

+ + + +

Aprendizaje activo: jugar con SVG

+ +

En esta sección de aprendizaje activo, nos gustaría que simplemente probaras a jugar con algunos SVG por diversión. En la entrada a continuación, verá que ya le hemos proporcionado algunas muestras para que pueda comenzar. También puedes ir a la Referencia de Elementos SVG, descubrir más detalles sobre otros juguetes que puedes usar en SVG y probarlos también. Esta sección trata sobre cómo practicar sus habilidades de investigación y divertirse.

+ +

Si se queda atascado y no puede hacer que su código funcione, siempre puede restablecerlo con el botón Restablecer.

+ + + +

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

+ +

Resumen

+ +

Este artículo le ha proporcionado un recorrido rápido por qué son los gráficos vectoriales y SVG, por qué es útil conocerlos y cómo incluir SVG en sus páginas web. Nunca tuvo la intención de ser una guía completa para aprender SVG, solo un indicador para que sepa qué es SVG si lo encuentra en sus viajes por la Web. Así que no se preocupe si todavía no siente que es un experto en SVG. Hemos incluido algunos enlaces a continuación que pueden ayudarlo si desea ir y obtener más información sobre cómo funciona.

+ +

En el próximo artículo de este módulo, exploraremos las imágenes adaptables en detalle, observando las herramientas que tiene HTML para permitirle hacer que sus imágenes funcionen mejor en diferentes dispositivos.

+ +

Vea también

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..22734a9b24 --- /dev/null +++ b/files/es/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,510 @@ +--- +title: Imágenes en HTML +slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +tags: + - Aprendiz + - Article + - HTML + - Imagenes + - captions + - figcaption + - img + - pie de imagen + - subtítulos + - texto alt +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
+

{{LearnSidebar}}

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

+
+ +

Al principio, la web solo era texto y resultaba más bien aburrido. Afortunadamente, no pasó mucho tiempo antes de que se añadiera la capacidad de insertar imágenes (y otros tipos de contenido más interesantes) en las páginas web. Hay otros tipos de elementos multimedia que tener en cuenta, pero es lógico comenzar con el humilde elemento {{htmlelement("img")}} utilizado para insertar una imagen simple en una página web. En este artículo, veremos en detalle cómo usar este elemento, incluidos sus conceptos básicos y cómo añadir pies de imagen usando {{htmlelement("figure")}} y explicaremos cómo se relaciona con las imágenes de fondo en CSS.

+ +
+ + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, tener el software básico instalado, conocimientos básicos de cómo trabajar con archivos, estar familiarizado con los principios básicos de HTML (como se describe en Empezar con el HTML).
Objetivo:Aprender cómo insertar imágenes simples en HTML y añadirles pies de imagen, y cómo se relacionan las imágenes HTML con las imágenes de fondo de CSS.
+ +

¿Cómo ponemos una imagen en una página web?

+ +

Para poner una imagen simple en una página web, utilizamos el elemento {{htmlelement("img")}}. Se trata de un elemento vacío (lo que significa que no contiene texto o etiqueta de cierre) que requiere de por lo menos de un atributo para ser utilizado: src (a veces denominado por su nombre completo, source). El atributo src contiene una ruta que apunta a la imagen que quieres poner en la página, que puede ser una URL relativa o absoluta, de la misma forma que el elemento {{htmlelement("a")}} contiene los valores del atributo href.

+ +
+

Nota: Deberías leer Inicio rápido a las URL y rutas para refrescar tu memoria sobre URL relativas y absolutas antes de continuar.

+
+ +

Por ejemplo, si tu imagen se llama dinosaur.jpg, y está en el mismo directorio que tu página HTML, deberás incrustar la imagen de la siguiente manera:

+ +
<img src="dinosaur.jpg">
+ +

Si la imagen estaba en el subdirectorio images, que estaba en el mismo directorio que la página HTML (lo que Google recomienda con fines de indización y posicionamiento en buscadores {{glossary("SEO")}}), entonces deberías incrustar la imagen así:

+ +
<img src="images/dinosaur.jpg">
+ +

y así sucesivamente.

+ +
+

Nota: Los motores de búsqueda también leen los nombres de archivo de imagen y esto cuenta para el SEO.  Por lo tanto, dale a tu imagen un nombre descriptivo; dinosaur.jpg es mejor que img835.png.

+
+ +

Puedes incrustar la imagen usando la URL absoluta, por ejemplo:

+ +
<img src="https://www.example.com/images/dinosaur.jpg">
+ +

Pero esto no tiene sentido, solo hace que el navegador trabaje más buscando la dirección IP desde el servidor DNS cada vez, etc. Casi siempre mantendrás las imágenes para tu sitio web en el mismo servidor de tu HTML.

+ +
+

Advertencia: La mayoría de imágenes tienen derechos de autor. No muestres una imagen en tu página web a menos que:
+
+ 1) seas dueño de la imagen,
+ 2) tengas permiso escrito explícito del dueño de la imagen o 
+ 3) tengas suficientes pruebas de que la imagen es de dominio público.
+
+ El incumplimiento de las normas de los derechos de autor es un acto ilegal y poco ético. Por lo tanto, no apuntes nunca tu atributo src a una imagen que esté alojada en un sitio web si no tienes el permiso para hacerlo. Esto se llama hotlinking. Asimismo es ilegal robar el ancho de banda de alguien.  Además, ralentiza tu página y te deja sin control sobre la imagen si la eliminan o reemplazan por otra que incluso podría resultar embarazosa.

+
+ +

Nuestro código anterior debería darnos el resultado siguiente:

+ +

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

+ +
+

Nota: Los elementos como {{htmlelement("img")}} y {{htmlelement("video")}} a veces se denominan elementos reemplazados. Esto se debe a que el tamaño y el contenido del elemento se especifican en un recurso externo (como un archivo de imagen o video),  no en el contenido del elemento en sí.

+
+ +
+

Nota: Puedes encontrar el ejemplo terminado de esta sección en Github (consulta también el código fuente).

+
+ +

Texto alternativo

+ +

El próximo atributo que veremos es  alt. Su valor debe ser una descripción textual de la imagen para usarla en situaciones en que la imagen no puede ser vista/mostrada o tarde demasiado en mostrarse por una conexión lenta a internet. Por ejemplo, nuestro código anterior podría modificarse así:

+ +
<img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados">
+ +

La forma más fácil de probar el texto alt es escribir mal el nombre de archivo. Si, por ejemplo, escribimos el nombre archivo de nuestra imagen como dinosooooor.jpg, el navegador no podrá mostrar la imagen, en su lugar mostrará el texto alternativo:

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

+ +

¿Por qué vas a ver o necesitar el texto alternativo? Puede ser por varias razones:

+ + + +

¿Qué hay que escribir exactamente en el atributo alt? Esto depende en primer lugar de por qué la imagen está en ese lugar. En otras palabras, qué se pierde si la imagen no aparece:

+ + + +

En el fondo, la clave es ofrecer una experiencia usable, incluso cuando las imágenes no puedan verse. Esto asegura que ningún usuario pierda ninguna parte del contenido. Desactiva las imágenes en tu navegador y observa cómo se ven las cosas. Te darás cuenta de lo útil que resulta el texto alternativo cuando no es posible ver la imagen.

+ +
+

Nota: Consulta nuestra guía de texto alternativo para obtener más información.

+
+ +

Anchura y altura

+ +

Puedes usar los atributos  ancho (width) y alto (height) para especificar la anchura y altura de tu imagen. Puedes encontrar el ancho y el alto de tu imagen de diversas maneras. Por ejemplo, en Mac puedes usar  Cmd + I  para mostrar información del archivo de imagen. Volviendo a nuestro ejemplo, podríamos hacer esto:

+ +
<img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+     width="400"
+     height="341">
+ +

Esto no proporciona una gran diferencia en la pantalla en circunstancias normales. Pero si la imagen no se muestra, por ejemplo, porque el usuario acaba de acceder a la página y esta aún no se ha cargado, observarás que el navegador reserva un espacio para la imagen:

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

Hacerlo así es bueno porque la página se carga con mayor rapidez y fluidez.

+ +

Sin embargo, no deberías alterar el tamaño de tus imágenes utilizando atributos HTML. Las imágenes podrían verse granulosas y borrosas si estableces un tamaño demasiado grande; o bien demasiado pequeñas, y se desperdiciaría ancho de banda descargando una imagen que no se ajusta a las necesidades del usuario. La imagen también podría quedar distorsionada, si no mantienes la proporción de aspecto correcta. Deberías utilizar un editor de imágenes, para dar a tu imagen el tamaño adecuado, antes de colocarla en tu página web.

+ +
+

Nota: Si tienes que alterar el tamaño de una imagen es mejor usar CSS.

+
+ +

Título de imágenes

+ +

Al igual que con los enlaces, también puedes añadir atributos title a las imágenes para proporcionar más información de ayuda si es necesario. En nuestro ejemplo, podríamos hacer esto:

+ +
<img src="images/dinosaur.jpg"
+     alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+     width="400"
+     height="341"
+     title="Exposición de un T-Rex en el museo de la Universidad de Manchester.">
+ +

Esto nos da una etiqueta de ayuda (tooltip) como las de los enlaces:

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

Sin embargo, no se recomienda incluir esta propiedad en las imágenes. title presenta algunos problemas de accesibilidad, principalmente porque los lectores de pantalla (screen readers) tienen un comportamiento imprevisible y la mayoría de navegadores no la mostrarán a menos que pases el ratón por encima de la imagen (y por tanto es inútil para quien usa teclado). Si estás interesado en esta cuestión, puedes leer el artículo The Trials and Tribulations of the Title Attribute de Scott O’Hara.

+ +

Lo mejor es incluir dicha información en el texto principal del artículo, en lugar de adjuntarla en la imagen.

+ +

Aprendizaje activo: incrustar imágenes

+ +

¡Ahora te toca jugar a ti! Esta sección de aprendizaje activo te mantendrá activo con un ejercicio sencillo de incrustado. Te proporcionamos una etiqueta básica {{htmlelement ("img")}} y nos gustaría que incrustes la imagen ubicada en la URL siguiente:

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

Ya hemos dicho que nunca se apuntará a imágenes de otros servidores (hotlink), pero esto es solo con fines de aprendizaje, por lo que te lo vamos a dejar hacer por esta vez.

+ +

También nos gustaría que hagas lo siguiente:

+ + + +

Si te equivocas, puedes volver a empezar pulsando el botón Reiniciar. Si te encallas, pulsa el botón Mostrar la solución para ver la solución:

+ + + +

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

+ +

Comentar imágenes con figure y figcaption

+ +

Hay varias formas en que puedes añadir un pie a tu imagen. Por ejemplo, nada te impediría hacer esto:

+ +
<div class="figure">
+  <img src="images/dinosaur.jpg"
+       alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados"
+       width="400"
+       height="341">
+
+  <p>Exposición de un T-Rex en el museo de la Universidad de Manchester.</p>
+</div>
+ +

Esto está bien. Incluye el contenido que se necesita y es muy personalizable con CSS. Pero hay un problema: no hay nada que vincule semánticamente la imagen con su título, lo que puede causar problemas a los lectores de pantalla. Por ejemplo, cuando hay 50 imágenes y leyendas, ¿qué leyenda se corresponde con cada imagen?

+ +

Una solución mejor es utilizar los elementos HTML5 {{htmlelement("figure")}} y {{htmlelement("figcaption")}}. Estos se crearon exactamente para este propósito: proporcionar un contenedor semántico para las figuras y vincular claramente la figura con el pie. Nuestro ejemplo anterior, podría reescribirse así:

+ +
<figure>
+  <img src="images/dinosaur.jpg"
+       alt="La cabeza y el torso de un esqueleto de dinosaurio;
+           tiene una cabeza grande con dientes largos y afilados" width="400"
+       height="341">
+
+  <figcaption>Exposición de un T-Rex en el museo de la Universidad de Manchester.</figcaption>
+</figure>
+ +

El elemento {{htmlelement("figcaption")}} dice al navegador, o a alguna tecnología de apoyo, que el texto que contiene describe la imagen que está contenida en el elemento {{htmlelement("figure")}}.

+ +
+

Nota: Desde el punto de vista de la accesibilidad, los pies de imagen y el texto alternativo {{htmlattrxref('alt','img')}} cumplen funciones diferentes. Los pies de imagen benefician incluso a quien puede ver la imagen, mientras que el texto {{htmlattrxref('alt','img')}} proporciona la misma función en una imagen ausente. Por tanto, los subtítulos y el texto alt no deberían decir lo mismo, porque ambos aparecen si la imagen no se muestra. Desactiva las imágenes en tu navegador y observa el resultado.

+
+ +

El elemento figure no ha de contener una imagen necesariamente. Es una unidad de contenido independiente que:

+ + + +

Un elemento figure podría contener varias imágenes, un trozo de código, audio, video, ecuaciones, una tabla, o cualquier otra cosa.

+ +

Aprendizaje activo: crear un elemento figure

+ +

En esta sección de aprendizaje activo, te pedimos que tomes el código finalizado de la sección de aprendizaje activo anterior y lo conviertas en un elemento figure:

+ + + +

Si te equivocas, siempre puedes volver a empezar pulsando el botón Reiniciar. Si te quedas atascado, presiona el botón Ver solución para ver la respuesta:

+ + + +

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

+ +

Imágenes de fondo CSS

+ +

También puedes usar CSS para insertar imágenes en páginas web (y JavaScript, pero eso ya es otra historia). La propiedad CSS {{cssxref("background-image")}} y las demás propiedades  background-* se usan para controlar la colocación de la imagen de fondo. Por ejemplo, para poner una imagen de fondo en cada párrafo de una página, podríamos hacer esto:

+ +
p {
+  background-image: url("images/dinosaur.jpg");
+}
+ +

La imagen resultante, podría decirse que es más fácil de posicionar y controlar que una imagen HTML. Entonces ¿para qué molestarse usando imágenes HTML? Como se sugiere arriba, las imágenes de fondo CSS son solo para decoración. Si tan solo quieres añadir algo bonito para mejorar visualmente tu página, están bien. Sin embargo, no tienen ningún significado semántico. No pueden tener su equivalente en texto, son invisibles a los lectores de pantalla, etc. ¡Es entonces cuando las imágenes HTML triunfan!

+ +

En resumen: si una imagen tiene significado en términos del contenido de tu página, entonces deberías usar una imagen HTML. Si la imagen es puramente decorativa, deberías usar imágenes de fondo CSS.

+ +
+

Nota: Aprenderás mucho más sobre las imágenes de fondo CSS en nuestro apartado CSS.

+
+ +

Esto es todo por ahora. Hemos expuesto en detalle los conceptos relativos a imágenes y subtítulos de imagen. En el próximo artículo, subiremos un nivel para insertar vídeo y audio en páginas web con HTML.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

+ +

En este módulo

+ + +
diff --git a/files/es/learn/html/multimedia_and_embedding/index.html b/files/es/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..5e0ffe97a8 --- /dev/null +++ b/files/es/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,73 @@ +--- +title: Multimedia e inserción +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Aprender + - Audio + - Codificación de Secuencia de comandos + - Evaluación + - Flash + - Gráficos vectoriales + - Guía + - HTML + - Imagenes + - Inserción + - Landing + - Mapa de Imágenes + - Multimedia + - Principiante + - SVG + - Video + - Web + - iframes + - img + - receptivo +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

Hemos visto mucho texto hasta ahora en este curso, pero la web sería realmente aburrida solo usando textos. ¡Comencemos observando como hacer que la web cobre vida, con mucho más contenido interesante! Este módulo te acompañará a explorar maneras de usar HTML para incluir multimedia a tus páginas web, y las diferentes formas en la que podrás hacerlo, incluyendo como enlazar videos, audios e incluso otras páginas webs.

+ +

Requisitos previos

+ +

Antes de empezar con este módulo, deberías tener un buen conocimiento de las bases de HTML, enseñadas en Introducción a HTML. Si no has estado trabajando en este módulo (o alguno similar), ¡hazlo y luego vuelve!

+ +
+

Nota: Si estas trabajando en un ordenador/tablet/u otro dispositivo donde no puedas crear tus propios archivos, puedes probar (la mayoría de ellos) los ejemplos de código en programas online de codificado como JSBin o Glitch.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos que te enseñarán todo lo fundamental sobre introducir multimedia en páginas web.

+ +
+
Imágenes en HTML
+
Hay otros tipos de multimedia a considerar, pero es logico empezar con el humilde elemento {{htmlelement("img")}}, usado para incorporar una imagen simple en una página web. En este artículo veremos cúmo usarlo en profundidad, incluyendo los conceptos básicos, y contenido independiente con título usando  {{htmlelement("figure")}}, y cómo relacionarlos con las imágenes de fondo de CSS.
+
Contenido de Audio y Video
+
A continuación, veremos como usar los elementos de HTML5 {{htmlelement("video")}} y {{htmlelement("audio")}}, para insertar video y audio en nuestras páginas, incluyendo conceptos básicos, proporcionando acceso a diferentes formatos de archivo para diferentes navegadores, agregando ilustraciones y subtítulos y cómo resolver inconvenientes en navegadores más antiguos.
+
De <object> a <iframe> - otras tecnologías de inserción
+
En este punto, nos gustaría dar un paso hacia un lado, mirando algunos de los elementos que te permiten insertar una amplia variedad de tipos de contenido en tus páginas web: los elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} y {{htmlelement("object")}}.
+ El elemento <iframe> nos permite incluir otras páginas web, y las otras dos permiten insertar archivos de formato PDF, SVG e incluso Flash -una tecnología que está a punto de desaparecer, pero que todavía puede verse de manera semi-regular-.
+
Añadiendo graficos vectoriales a la Web
+
Los gráficos vectoriales pueden ser muy útiles en ciertas situaciones. A diferencia de los formatos normales como PNG / JPG, estos no se distorsionan/pixelizan cuando se los amplían -pueden permanecer suaves cuando se escalan-. Este artículo te introduce al concepto de gráficos vectoriales y cómo incluir el popular formato {{glossary ("SVG")}} en páginas web.
+
Imagenes receptivas
+
En este artìculo, aprenderás acerca del concepto de imágenes receptivas -imágenes que pueden adaptarse en dispositivos con grandes diferencias de tamaños de pantalla, resoluciones y otras características-. Esto te ayudará a mejorar el rendimiento en diferentes dispositivos. Las imágenes receptivas son sólo una parte del diseño receptivo, un tópico que a futuro aprenderás en CSS.
+
+ +

Evaluaciones

+ +

Las siguientes evaluaciones pondrán a prueba tu comprensión de los conceptos básicos de HTML vistos en las guías anteriores.

+ +
+
Página de bienvenida de Mozilla
+
En esta evaluación, probaremos tu conocimiento de algunas de las técnicas observadas en los artículos de este módulo, ¡lo que te permitirá agregar algunas imágenes y videos a una página original de Mozilla!
+
+ +

Ver también

+ +
+
Agregar un mapa de visitas en la parte superior de una imagen
+
Los mapas de imágenes proporcionan un mecanismo para hacer diferentes partes de un enlace de imagen a diferentes lugares (piense en un mapa, vinculándolo a más información sobre cada país diferente al que haga clic). Esta técnica a veces puede ser útil.
+
Conceptos básicos de escritura web 2
+
+

Un excelente curso básico de la fundación Mozilla que explora y prueba algunas de las habilidades mencionadas en el módulo Multimedia e inclusión. Sumérgete en los aspectos básicos de la composición de páginas web, diseño de accesibilidad, uso compartido de recursos, uso de medios en línea y trabajo abierto (significa que tu contenido es libre de compartirse con otros).

+
+
diff --git a/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html new file mode 100644 index 0000000000..662d565e31 --- /dev/null +++ b/files/es/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,138 @@ +--- +title: Página de bienvenida de Mozilla +slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +tags: + - Codificación de Secuencia de comandos + - CodingScripting + - Evaluación + - HTML + - Imagenes + - Inserción + - JPEG + - Medidas + - Multimedia + - PNG + - Principiante + - Video + - iframe + - img + - receptivo + - src + - srcset +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
+ +

En esta evaluación, pondremos a prueba tu conocimiento de algunas de las técnicas mostradas en los artículos de este módulo, ¡para que tú agregues algunas imágenes y videos a una página de bienvenida de Mozzilla!.

+ + + + + + + + + + + + +
Requisitos previos:Antes de intentar esta evaluación, ya deberías conocer el módulo de Multimedia e inserción.
Objetivo:Prueba cuánto sabes de la incorporación de imágenes y videos en páginas web, marcos y técnicas de imagen receptiva a HTML.
+ +

Punto de partida

+ +

Para comenzar esta evaluación, necesitas el HTML y todas las imágenes de mdn-splash-page-start que tienes en la carpeta de GitHub. Guarda el contenido de index.html en un archivo llamado index.html en tu disco local, en una nueva carpeta. Guarda pattern.png en la misma carpeta (haciendo click derecho en la imagen y seleccionando la opción guardar).

+ +

Accede a las diferentes imágenes en la carpeta de originals y guárdalas también de la misma manera. De momento puedes guardarlas en una carpeta diferente, ya que podrías necesitar modificarlas usando un editor de gráficos antes de que estén listas para usarlas.

+ +

También puedes usar una herramienta en línea como Glitch para crear tu ejemplo. Esto puede ser útil si quieres evaluarlo o pedir ayuda — consulta la sección  {{anch("Assessment or further help")}} al final de esta página.

+ +
+

Nota: El archivo HTML de ejemplo contiene bastante CSS para dar estilo a la página. No necesitas tocar el CSS, solo el HTML dentro del elemento {{htmlelement("body")}}, mientras que insertes el marcado correctamente, el estilo se mantendrá.

+
+ +

Resumen del proyecto

+ +

En esta evaluación, te presentamos una página de bienvenida de Mozzilla en su mayoría terminada, que tiene como objetivo decir algo agradable e interesante sobre lo que significa Mozilla, y proporcionar algunos enlaces a recursos adicionales. Desafortunadamente, aún no se han agregado imágenes o videos, ¡este es tu trabajo!. Debes añadir algunos elementos para que la página se vea bien y tenga sentido. Las siguientes subsecciones detallan lo que tienes que hacer:

+ +

Preparar las imágenes

+ +

Usa tu editor de imágenes favorito, y utiliza medidas de 400px de ancho y 120px de alto para:

+ + + +

Nómbralas por ejemplo, firefoxlogo400.png y firefoxlogo120.png.

+ +

Junto con mdn.svg, estas imágenes serán tus iconos para vincular a otros recursos, dentro del área further-info. Debes vincular al logo de Firefox en el encabezado del sitio. Guarda copias de todos estos dentro de la misma carpeta que index.html.

+ +

A continuación, crea una versión horizontal de 1200px de red-panda.jpg, y una versión vertical de 600px que muestre al panda en una toma de primer plano. Una vez más, ponle un nombre para que puedas identificarlos fácilmente. Guarda una copia de ambos en la misma carpeta que index.html.

+ +
+

Nota: Debes optimizar las imágenes JPG y PNG para que sean lo más pequeñas posible, viéndose bien. tinypng.com es un gran servicio para hacerlo fácilmente.

+
+ +

Añadir logo al encabezado

+ +

El elemento {{htmlelement("header")}}, añade el elemento {{htmlelement("img")}} que insertará la versión pequeña del logotipo de Firefox al encabezado.

+ +

Añadir un video al contenido del artículo principal

+ +

Justo dentro del elemento {{htmlelement("article")}} (debajo de la etiqueta de apertura), inserta el video de Youtube https://www.youtube.com/watch?v=ojcNcvb1olg, utilizando las herramientas de YouTube para generar el código. El video debe tener 400px de ancho.

+ +

Agregar imágenes receptivas a los enlaces de información adicional

+ +

 Dentro de {{htmlelement("div")}} con clase further-info encontrarás cuatro elementos {{htmlelement("a")}} -cada uno de los cuales vincula a una página interesante relacionada con Mozilla-. Para completar esta sección, debes insertar un elemento {{htmlelement("img")}} dentro de cada uno que contenga los atributos {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}}.

+ +

En cada caso, (excepto uno que es inherentemente receptivo) queremos que el navegador sirva la versión 120px cuando el ancho de la ventana de visualización sea de 500px o menos, o la versión de 400px en otro caso.

+ +

¡Asegúrate de hacer coincidir las imágenes correctas con los enlaces correctos!

+ +
+

Nota: para probar correctamente los ejemplos srcset/sizes necesitarás cargar tu sitio a un servidor (usar Github pages es una solución fácil y gratis), y desde allí puedes probar si funcionan correctamente usando herramientas de desarrollo del navegador como Firefox Network Monitor.

+
+ +

Un "red-panda" con arte dirigido

+ +

Dentro del elemento {{htmlelement("div")}} con clase red-panda, queremos insertar un elemento {{htmlelement("picture")}} que permita una imagen pequeña del panda si la ventana tiene 600px de ancho o menos, y la gran imagen del paisaje en caso contrario.

+ +

Ejemplo

+ +

Las siguientes capturas de pantalla muestran como debería verse la página de bienvenida después de haber sido marcada correctamente, en una pantalla ancha y estrecha.

+ +

A wide shot of our example splash page

+ +

A narrow shot of our example splash page

+ +

Evaluación o ayuda adicional

+ +

Si quieres evaluar tu trabajo, estás atorado o quieres pedir ayuda:

+ +
    +
  1. Pon tu trabajo en un editor en línea para compartir, como CodePen, jsFiddle, or Glitch. Glitch es probablemente el mejor para este ejemplo, porque permite cargar propiedades como imágenes, mientras que algunas de las otras herramientas no lo hacen.
    2. +
  2. Escribe una publicación solicitando evaluación y/o ayuda en el foro MDN Discourse forum. Agrega la etiqueta "aprendizaje" a tu publicación para que podamos encontrarla más fácilmente. Tu publicación debe incluir: +
      +
    • Un título descriptivo como "Evaluación para página de bienvenida de Mozilla".
      • +
    • Detalles de lo que quiera que hagamos, por ejemplo, lo que ya has intentado, si estás atascado y necesitas ayuda.
      • +
    • Un enlace al ejemplo que deseas evaluar o en el que necesitas ayuda, en un editor en línea. Ésta es una buena práctica: es muy difícil ayudar a alguien con un problema de codificación si no puede ver su código.
      • +
    • Un enlace a la página de evaluación actual, para que podamos encontrar la pregunta con la que desea ayuda.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..67b01247a4 --- /dev/null +++ b/files/es/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,371 @@ +--- +title: Desde object hasta iframe - otras tecnologías de incrustación +slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Ahora ya deberías estar acostumbrado a integrar cosas en tus páginas web, incluyendo imágenes, video y audio. En este punto nos gustaría que des algo así como un paso al costado, prestando atención a elementos que te permiten integrar una amplia variedad de tipos de contenido en tus páginas web: los elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} y {{htmlelement("object")}}. Los <iframe>s son para incrustar otras páginas web, y los otros dos te permiten incrustar PDFs, SVG e incluso Flash — una tecnología que está en su camino de despedida, pero la cual seguirás viendo semi-regularmente.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, software básico instalado, conocimientos básicos de  manejo de archivos, familiaridad con los fundamentos de HTML (visto en Iniciando en HTML) y los artículos previos en este modulo.
Objetivo:To learn how to embed items into web pages using {{htmlelement("object")}}, {{htmlelement("embed")}}, and {{htmlelement("iframe")}}, like Flash movies and other webpages.
+ +

Enlace a la sección: Una breve historia de incrustación

+ +

Hace mucho tiempo en la Web, era popular usar marcos (frames) para crear sitios web, pequeñas partes de un sitio web almacenadas en páginas HTML individuales. Estos estaban incrustados en un documento maestro llamado conjunto de marcos (frameset), que le permitía especificar el área en la pantalla que ocupaba cada cuadro, como el tamaño de las columnas y las filas de una tabla. Estos fueron considerados el colmo del frescor a mediados y finales de los 90, y había evidencia de que tener una página web dividida en trozos más pequeños como este era mejor para velocidades de descarga, especialmente notable con conexiones de red tan lentas en ese momento. Sin embargo, tuvieron muchos problemas, que superaron con creces cualquier aspecto positivo ya que las velocidades de red se hicieron más rápidas, por lo que ya no se ve que se usen.

+ +

Poco tiempo después (finales de los 90, principios de 2000), las tecnologías de complementos se volvieron muy populares, como los Applets de Java y Flash . Esto permitió a los desarrolladores web incorporar contenido enriquecido en páginas web como videos y animaciones, que simplemente no estaban disponibles solo a través de HTML. La incrustación de estas tecnologías se logró a través de elementos como <object> y el menos utilizado <embed> , que fueron muy útiles en ese momento. Desde entonces, pasaron de moda debido a muchos problemas, incluidos el acceso, la seguridad, el tamaño del archivo y entre otros; en la actualidad, la mayoría de los dispositivos móviles ya no son compatibles con estos complementos, y el soporte de escritorio está en camino de desaparecer.

+ +

Finalmente, apareció el elemento <iframe> (junto con otras formas de incrustación de contenido, como <canvas> , <video> , etc.). Esto proporciona una forma de insertar un documento web entero dentro de otro, como si fuera un <img> u otro elemento similar, y  asi es como se usa en la actualidad.

+ +

Con la lección de historia fuera del camino, sigamos y veamos cómo usar algunos de estos.

+ +

Aprendizaje activo: usos de incrustación clásicos

+ +

En este artículo vamos a ir directamente a una sección de aprendizaje activo, para darle una idea real de la utilidad de las tecnologías de inclusión. El mundo en línea está muy familiarizado con Youtube, pero muchas personas no conocen algunas de las comodidades para compartir que tiene disponibles. Veamos cómo Youtube nos permite insertar un video en cualquier página que nos guste usando un <iframe> .

+ +
    +
  1. Primero, ve a Youtube y encuentra el video que te gusta.
    2. +
  2. Debajo del video, encontrará un botón Compartir : seleccionelo para mostrar las opciones para compartir.
    3. +
  3. Seleccione el botón Insertar y recibirá un código <iframe> - copielo.
    4. +
  4. Insértelo en el cuadro de entrada a continuación, y vea cuál es el resultado en la salida .
    5. +
+ +

Para obtener puntos de bonificación, también puede intentar insertar un mapa de Google en el ejemplo:

+ +
    +
  1. Ve a Google Maps y encuentra un mapa que te guste.
    2. +
  2. Haga clic en el "Menú Hamburger" (tres líneas horizontales) en la esquina superior izquierda de la IU.
    3. +
  3. Seleccione la opción Compartir o Insertar mapa .
    4. +
  4. Seleccione la opción Insertar mapa, que le dará un código <iframe> - copielo.
    5. +
  5. Insértelo en el cuadro de entrada a continuación, y vea cuál es el resultado en la salida .
    6. +
+ +

Si comete un error, siempre puede restablecerlo usando el botón Restablecer . Si realmente te quedas atascado, presiona el botón Mostrar solución para ver una respuesta.

+ + + +

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

+ +

Iframes en detalle

+ +

Entonces, fue fácil y divertido ¿verdad? Los elementos {{htmlelement("iframe")}} están diseñados para permitirte incrustar documentos web en el documento actual.  Esto es excelente para incorporar contenido de terceros en tu sitio web sobre el que no tengas control directo y no quieras tener que implementar tu propia versión — como vídeo de porveedeores de vídeo en línea, sistemas de comentarios como Disqus, mapas de proveedores de mapas en línea, banners publicitarios, etc. Los ejemplos editables que has estado usando a través de este curso se implementan usando <iframe>s.

+ +

Hay algunos serios  {{anch("Security concerns")}} a considerar con <iframe>s, también se discute a continuación, pero esto no significa que debas dejar de usarlos en tus sitios web — solo requiere un poco de conocimiento y pensar cuidadosamente. Vamos a explorar el código con un poco más de detalle. Supongamos que quieres incluir el glosario de MDN en una de tus páginas web — podrías intentar algo como esto:

+ +
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+        width="100%" height="500" frameborder="0"
+        allowfullscreen sandbox>
+  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
+    Fallback link for browsers that don't support iframes
+  </a> </p>
+</iframe>
+ +

Este ejemplo incluye los elementos básicos necesarios para usar un  <iframe>:

+ +
+
{{htmlattrxref('allowfullscreen','iframe')}}
+
Si está configurado, el  <iframe> se puede colocar en modo pantalla completa usando el  Full Screen API (El uso del API está fuera del alcance de este artículo.)
+
{{htmlattrxref('frameborder','iframe')}}
+
Si se establece en 1, esto le indica al navegador que dibuje un borde entre este marco y otros marcos, que es el comportamiento predeterminado. 0 elimina el borde. Usar esto ya no es realmente recomendable, ya que el mismo efecto se puede lograr mejor usando{{cssxref('border')}}: none; en tu {{Glossary('CSS')}}.
+
{{htmlattrxref('src','iframe')}}
+
Este atributo, como con {{htmlelement("video")}}/{{htmlelement("img")}},contiene una ruta que apunta a la URL del documento que se va a incrustar.
+
{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
+
Estos atributos especifican el ancho y la altura (width y height) que quieres que tenga el iframe.
+
Contenido de reserva
+
De la misma manera que otros elementos similares {{htmlelement("video")}}, puedes incluir contenido alternativo entre las etiquetas de apertura y cierre <iframe></iframe> que aparecerán si el navegador no admite el  <iframe>. En este caso hemos incluido un enlace a la página. Es poco probable que encuentres algún navegador que no admita <iframe>s en estos días.
+
{{htmlattrxref('sandbox','iframe')}}
+
Este atributo, que funciona en navegadores un poco más modernos que el resto de la funciones de <iframe> (por ejemplo IE 10 y superior) solicita una mayor configuración de seguridad; bueno, hablaremos más sobre esto en la siguiente sección.
+
+ +
+

Nota: Para mejorar la velocidad, es una buena idea establecer el atributo src de iframes con  JavaScript después de que se cargue el contenido principal. Esto hace que tu página pueda utilizarse antes y disminuye el tiempo de carga de tu página principal (an important {{Glossary("SEO")}}.)

+
+ +

Con respecto  a la seguridad

+ +

Arriba mencionamos nuestra preocupación por la seguridad — vamos a entrar en esto con un poco más de detalle ahora. No esperamos que comprendas todo este contenido perfectametne a la primera. Solo queremos informarte sobre esta preocupación y proporcionarte una referencia a la que volver a medida que tengas más experiencia y comiences  a considerar el uso de  <iframe>s en tu trabajo y  en tus experimentos.además, no es necesario tener miedo y no usar  <iframe>s — iframes, solo debes tener cuidado. Sigue leyendo...

+ +

Los creadores de navegadores y los desarrolladores web han aprendido por las malas que los iframes son un objetivo común (término oficial: vector de ataque) para los "malos" de la Web (a menudo denominados hackers,o más exactamente, crackers) para atacar si están tratando de modificar maliciosamente tu página web, o engañar a las personas para que hagan algo que no quieren hacer, como revelar información confidencial como nombre de usuario o contraseña. Debido a esto, los ingenieros de especificaciones y los desarrolladores de navegadores han desarrollado varios mecanismos  para hacer que los <iframe>s sean más seguros, y también hay mejores prácticas a considerar — cubriremos algunas de estas a continuación.

+ +
+

{{interwiki('wikipedia','Clickjacking')}} es un tipo de ataque de iframe común en el que los piratas informáticos incrustan un iframe invisible en tu documento (o incrustan tu documento en su propio sitio web malicioso) y lo utilizan para capturar las interacciones de los ususarios. Esta es una forma común de engañar a los usuarios o robar datos sensibles.

+
+ +

Primero un ejemplo rápido — intenta cargar el ejemplo anterior que mostramos arriba en tu navegador — puedes encontrarlo en  Github (ver el código fuente ) Tu no verás nada en tu navegador, pero si miras en la Consola en las herramientas de desarrollador de tu navegador,  tú verás un mensaje diciendote porque.En Firefox, te dirá Load denied by X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary does not permit framing. Esto es porque los desarrolladores que construyeron MDN han incluido una configuración en el servidor que almacena la página web que impide que sean incrustados dentro de  <iframe>s (ver {{anch("Configure CSP directives")}}, abajo.) Esto tiene sentido— una página completa de MDN no tiene sentido estar incrustada en otras páginas, a menos que tu quieras hacer algo como incrustarlas en tu sitio web y reclamarlas como propias  — o intentar robar datos via clickjacking, los cuales ambos son cosas realmente malas. Además de que si todo el mundo comienza a hacerlo, todo el ancho de banda adicional podría costarle mucho dinero a Mozzilla.

+ +

Solo incrusta cuando sea necesario

+ +

Algunas veces tiene sentido embeber contenido de terceros— como vídeos de youtube y mapas — pero puedes ahorrarte muchos dolores de cabeza si tu solo embebes contenido de terceros solo cuando es necesario. Una buena regla de oro para la seguridad web es "Nunca puedes ser demasiado cauteloso. Si lo hizo, verifíquelo de todos modos. Si alguien más lo hizo, asuma que es peligroso hasta que se demuestre lo contrario".

+ +

Además de la seguridad, debes ser consciente de los temas de propiedad intelectual. La mayoría del contenido tiene derechos de autor, en línea y fuera de línea, incluso contenido que no te esperas(por ejemplo, la mayoría de las imágenes en Wikimedia Commons). Nunca muestres en tu pagina contenido a menos que te pertenezca o que el dueño te haya dado por escrito su permiso inequívoco. Las penalidades por derechos de autor son severas. De nuevo, tu nunca puedes ser demasiado cauteloso. 

+ +

Si el contenido es licenciado, debes obedecer los terminos de la licencia. Por ejemplo, el contenido en MDN es licenciado bajo CC-BY-SA. Esto significa, que tu debes darnos credito apropiadamente  cuando tu citas nuestro contenido, aun si tu haces cambios substanciales.

+ +

Usa HTTPS

+ +

{{Glossary("HTTPS")}} es la versión encriptada de {{Glossary("HTTP")}}. Deberias cumplir con tu página web usando HTTPS siempre que sea posible:

+ +
    +
  1. HTTPS reduce la oportunidad de que contenido remoto haya sido manipulado en el tránsito.
    2. +
  2. HTTPS previene que el contenido embebido acceda al documento padre y viceversa. 
    3. +
+ +

Usar HTTPS requiere un certificado de seguridad, el cual puede ser costoso (Aunque Let's Encrypt hace las cosas más faciles) — si tu no puedes tener uno, tu debes servir tu documento padre con HTTP. Sin embargo, debido al segundo beneficio de HTTPS expuesto arriba, no importa cual sea el costo tu nunca debes embeber contenido de terceros con HTTP. (En el mejor de los casos, el navegador de tus usuarios les dará una advertencia). Todas las empresas con buena reputación que hacen contenido para embeber via <iframe> lo harán  disponible via HTTPS — mira la URLs dentro del <iframe> atributo src cuando tu estes embebiendo contenido desde Google Maps o Youtube, por ejemplo.

+ +
+

Note: Github pages permite que el contenido sea servido via HTTPS  por defecto, asi que es util para hospedar tu contenido. Si estás usando un hosting diferente y no estás seguro, pregunta a tu proveedor de hosting acerca del tema .

+
+ +

Siempre usa el atributo sandbox

+ +

You want to give attackers as little power as you can to do bad things on your website, therefore you should give embedded content only the permissions needed for doing its job. Of course, this applies to your own content, too. un contenedor para codigo que puedes usar apropiadamente — o para probar — but can't cause any harm to the rest of the codebase (either accidental or malicious) is called a sandbox.

+ +

Unsandboxed content can do way too much (executing JavaScript, submitting forms, popup windows, etc.) By default you should impose all available restrictions by using the sandbox attribute with no parameters, as shown in our previous example.

+ +

If absolutely required, you can add permissions back one by one (inside the sandbox="" attribute value) — see the {{htmlattrxref('sandbox','iframe')}} reference entry for all the available options. One important note is that you should never add both allow-scripts and allow-same-origin to your sandbox attribute — in that case the embedded content could bypass the same origin security policy that stops sites from executing scripts, and use JavaScript to turn off sandboxing altogether.

+ +
+

Note: Sandboxing provides no protection if attackers can fool people into visiting malicious content directly (outside an iframe). If there's any chance that certain content may be malicious (e.g., user-generated content), please serve it from a different {{glossary("domain")}} to your main site.

+
+ +

Configure CSP directives

+ +

{{Glossary("CSP")}} stands for content security policy, and provides a set of HTTP Headers (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <iframe>s, you can configure your server to send an appropriate X-Frame-Options  header. This can prevent other websites from embedding your content in their webpages (which would enable {{interwiki('wikipedia','clickjacking')}} and a host of other attacks), which is exactly what the MDN developers have done, as we saw earlier on.

+ +
+

Note: You can read Frederik Braun's post On the X-Frame-Options Security Header for more background information on this topic. Obviously, it's rather out of scope for a full explanation in this article.

+
+ +

The <embed> and <object> elements

+ +

The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!

+ +
+

Note: A plugin is software that provides access to content the browser cannot read natively.

+
+ +

However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see {{anch("The case against plugins")}}, below), PDFs tend to be be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.

+ +

If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{htmlelement("embed")}}{{htmlelement("object")}}
{{glossary("URL")}} of the embedded content{{htmlattrxref('src','embed')}}{{htmlattrxref('data','object')}}
accurate {{glossary("MIME type", 'media type')}} of the embedded content{{htmlattrxref('type','embed')}}{{htmlattrxref('type','object')}}
height and width (in CSS pixels) of the box controlled by the plugin{{htmlattrxref('height','embed')}}
+ {{htmlattrxref('width','embed')}}		{{htmlattrxref('height','object')}}
+ {{htmlattrxref('width','object')}}
names and values, to feed the plugin as parametersad hoc attributes with those names and valuessingle-tag {{htmlelement("param")}} elements, contained within <object>
independent HTML content as fallback for an unavailable resourcenot supported (<noembed> is obsolete)contained within <object>, after <param> elements
+ +
+

Note: <object> requires a data attribute, a type attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). typemustmatch keeps the embedded file from running unless the type attribute provides the correct media type. typemustmatch can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).

+
+ +

Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this live on Github, and check the source code too):

+ +
<embed src="whoosh.swf" quality="medium"
+       bgcolor="#ffffff" width="550" height="400"
+       name="whoosh" align="middle" allowScriptAccess="sameDomain"
+       allowFullScreen="false" type="application/x-shockwave-flash"
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+ +

Pretty horrible, isn't it. The HTML generated by the Adobe Flash tool tended to be even worse, using an <object> element with an <embed> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.

+ +

Now let's look at an <object> example that embeds a PDF into a page (see the live example and the source code):

+ +
<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
+</object>
+ +

PDFs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.

+ +

The case against plugins

+ +

Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For most applications, it's time to stop delivering content that depends on plugins, and start taking advantage of Web technologies instead.

+ + + +

So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you can use HTML5 video for your media needs, SVG for vector graphics, and Canvas for complex images and animations. Peter Elst was already writing some years ago that Adobe Flash is rarely the right tool for the job, except for specialized gaming and business applications. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.

+ +

Summary

+ +

The topic of embedding other content in web documents can quickly become very complex, so in this article we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third party content like maps and videos on your pages. As you become more experienced however, you are likely to start finding more uses for them.

+ +

There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{htmlelement("svg")}} for embedding vector graphics. We'll look at SVG in the next article of the module.

+ +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..daa97085e9 --- /dev/null +++ b/files/es/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,265 @@ +--- +title: Imágenes adaptables +slug: Learn/HTML/Multimedia_and_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

En este artículo, aprenderemos sobre el concepto de imágenes adaptables — imágenes que funcionan bien en dispositivos con una amplia diferencia de tamaño de pantallas, resoluciones y otras tantas características — y observar qué herramientas proporciona HTML para ayudar a implementarlas. Esto ayuda a mejorar el rendimiento en diferentes dispositivos.

+ +

Las imágenes adaptables son solo una parte del diseño web responsivo, un tema que aprenderás próximamente en nuestro tutorial de CSS.

+
+ + + + + + + + + + + + +
Prerrequisitos:Deberías tener un conocimiento básico de HTML y cómo agregar imágenes estáticas a un sitio web.
 Objetivo: Aprende a usar características como {{htmlattrxref("srcset", "img")}} y el elemento {{htmlelement("picture")}} para implementar soluciones de imágenes adaptables a sitios web.
+ +

¿Por qué imágenes adaptables?

+ +

Examinemos un escenario típico. Un sitio web típico puede contener una imagen de encabezado y algunas imágenes de contenido debajo del encabezado. Es probable que la imagen del encabezado abarque todo el ancho del encabezado y la imagen del contenido quepa en algún lugar dentro de la columna de contenido. He aquí un ejemplo sencillo:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.

+ +

Esto funciona bien en un dispositivo de pantalla ancha, como una computadora portatil o de escritorio (puedes ver el ejemplo en vivo y encontrar el código fuente en Github.) No hablaremos mucho del CSS en esta lección, excepto para decir que:

+ + + +

Sin embargo, surgen problemas cuando comienza a ver el sitio en un dispositivo de pantalla estrecha — el encabezado de abajo está bien, pero empieza a ocupar gran parte de la altura de la pantalla de un dispositivo móvil. ¡A este tamaño es difícil ver a las personas que aparecen en la foto!

+ +

Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.

+ +

Una mejora sería mostrar una versión recortada de la imagen que muestra los detalles importantes de la imagen cuando el sitio se ve en una pantalla estrecha. Se podría mostrar una segunda imagen recortada para un dispositivo de pantalla de ancho medio, como una tableta. A esto se le conoce comúnmente como el problema de cambio de resolución.

+ +

Además, no es necesario incrustar imágenes más grandes en la página si se está viendo en una pantalla móvil. Y, a la inversa, una imagen rasterizada pequeña comienza a verse más pixelada cuando se muestra mayor que su tamaño original (una imagen rasterizada es un conjunto determinado de píxeles de ancho y de alto, como vimos cuando vimos los gráficos vectoriales). Esto se denomina problema de cambio de resolución.

+ +

Por el contrario, no es necesario mostrar una imagen grande en una pantalla significativamente más pequeña que el tamaño para el que fue diseñada. Hacerlo puede desperdiciar ancho de banda; en particular, los usuarios de dispositivos móviles no quieren desperdiciar ancho de banda descargando una imagen grande destinada al escritorio, cuando una imagen pequeña sería suficiente para su dispositivo. Idealmente, tendría varias resoluciones disponibles y serviría el tamaño apropiado según el dispositivo que acceda a los datos en el sitio web.

+ +

Para hacer las cosas más complicadas, algunos dispositivos tienen pantallas de alta resolución que necesitan imágenes más grandes de las que se espera que luzcan bien. Esto es, básicamente, el mismo problema, pero en un contexto ligeramente diferente.

+ +

Podrías pensar que las imágenes vectoriales resolverían estos problemas, y lo hacen hasta cierto punto: son pequeñas en tamaño de archivo y escalan bien, y deberías usarlos siempre que sea posible. Sin embargo, no son adecuados para todos tipos de imágenes. Si bien son geniales para gráficos simples, patrones, elementos de interfaz, etc., es muy complejo crear una imagen basada en vectores con la cantidad de detalles que encontrarías, por ejemplo, en una foto. Formatos de imágenes rasterizadas como JPEG son más adecuados para el tipo de imágenes que vemos en el ejemplo anterior.

+ +

Este tipo de problemas no existían cuando la web se creó por primera vez, a principios y mediados de los noventa — en ese entonces, los únicos dispositivos disponibles para navegar por la web eran los ordenadores de escritorio y laptops, por lo que los desarrolladores e ingenieros que programaban los navegadores ni siquiera pensaban en implementar estas soluciones. Las tecnologías de imagen adaptable se implementaron recientemente para resolver los problemas descritos anteriormente al permitirle ofrecer al navegador varias versiones de imágenes (en diferentes archivos), ya sea que muestren lo mismo pero contengan diferentes números de píxeles (cambio de resolución), o diferentes imágenes adecuadas para diferentes asignaciones de espacio (dirección de arte).

+ +
+

Nota: Las nuevas características discutidas en este artículo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} —son compatibles con las versiones de lanzamiento de los navegadores de escritorio y móviles modernos (incluido el navegador Edge de Microsoft, aunque no Internet Explorer).

+
+ +

¿Cómo se crean las imágenes adaptables?

+ +

En esta sección, veremos los dos problemas ilustrados anteriormente y mostraremos cómo solucionarlos usando las características de imágenes adaptables con HTML. Debe tener en cuenta que nos centraremos en el elemento HTML {{htmlelement("img")}} para esta sección, tal como se muestra en el área de contenido del ejemplo anterior —  la imagen en el encabezado del sitio es solo de decoración y, por lo tanto, implementado usando imágenes de fondo con CSS. Se puede decir que CSS posee mejores herramientas para el diseño adaptable que HTML, y hablaremos sobre ellas en nuestro módulo CSS.  

+ +

Cambio de resolución: Diferentes tamaños

+ +

Entonces, ¿qué queremos solucionar con el cambio de resolución? Queremos mostrar la misma imagen, más grande o más pequeña dependiendo del dispositivo — Esta es la situación que tenemos en la segunda imagen de nuestro ejemplo. El elemento estándar {{htmlelement("img")}} tradicionalmente solo permite apuntar el navegador a un solo archivo fuente:

+ +
<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Sin embargo, podemos utilizar dos nuevos atributos — {{htmlattrxref("srcset", "img")}} y {{htmlattrxref("sizes", "img")}} — para proporcionar varias imágenes de origen adicionales junto con sugerencias para ayudar al navegador a elegir el correcto. Puede ver el ejemplo responsive.html en Github (vea también el código fuente):

+ +
<img srcset="elva-fairy-320w.jpg 320w,
+             elva-fairy-480w.jpg 480w,
+             elva-fairy-800w.jpg 800w"
+     sizes="(max-width: 320px) 280px,
+            (max-width: 480px) 440px,
+            800px"
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+ +

Los atributos srcset y sizes parecen complicados, pero resultan más fáciles de entender si los formatea como se muestra arriba, con valores diferentes para el atributo en cada línea. Cada valor contiene una lista separada por coma, y cada parte de la lista está compuesta por tres sub-partes. Repasemos ahora el contenido de cada uno:

+ +

srcset define el conjunto de imágenes que el navegador podrá elegir, y el tamaño de cada imagen. Cada conjunto de información de imagen está separado del anterior por una coma. Para cada uno, escribimos:

+ +
    +
  1. Un nombre de archivo de imagen (elva-fairy-480w.jpg)
    2. +
  2. Un espacio.
    3. +
  3. El ancho intrínseco de la imagen en píxeles (480w): tenga en cuenta que esto usa la unidad w, no px como cabría esperar. Este es el tamaño real de la imagen, que se puede encontrar inspeccionando el archivo de imagen en su computadora (por ejemplo, en una Mac puede seleccionar la imagen en Finder y presionar Cmd + I para que aparezca la pantalla de información).
    4. +
+ +

sizes define un conjunto de condiciones de medios (por ejemplo, anchos de pantalla) e indica qué tamaño de imagen sería mejor elegir cuando se cumplen ciertas condiciones de medios  — estas son las sugerencias de las que hablamos anterriormente. En este caso, antes de cada coma escribimos:

+ +
    +
  1. Una condición de medios ((max-width: 600px)): aprenderá más sobre esto en el tema CSS, pero por ahora digamos que una condición de medios describe un posible estado en el que puede estar la pantalla. En este caso, estamos diciendo "cuando el ancho de la ventana gráfica es de 600 píxeles o menos".
    2. +
  2. Un espacio.
    3. +
  3. El ancho de la ranura que la imagen llenará cuando la condición de medios sea verdadera (440px.)
    4. +
+ +
+

Nota: Para el ancho de la ranura, debe indicar una longitud absoluta (px, em) o relativa (como un porcentaje.) Usted debe haber advertido que el ancho de la última ranura no tiene condición de medios (esta es la opción por defecto que se elige cuando ninguna de las condiciones de medios se cumplen). El navegador ignora todo lo posterior a la primera condición coincidente, por eso sea cuidadoso con el orden de las condiciones de medios.

+
+ +

Entonces, con estos atributos establecidos, el navegador:

+ +
    +
  1. Verificará el ancho del dispositivo.
    2. +
  2. Resolverá qué condición de medios en la lista sizes es la primera que se cumple.
    3. +
  3. Verificará la medida de la ranura dada a esa consulta de medios.
    4. +
  4. Cargará la imagen referenciada en la lista srcset con coincidencia más cercana a la medida de la ranura.
    5. +
+ +

¡Y eso es todo! Hasta este punto, si un navegador compatible con un ancho de ventana de 480px carga la página, la condición de medios (max-width: 480px) se cumplirá, por lo que la ranura de 440px será elegida y se cargará el archivo de imagen elva-fairy-480w.jpg, ya que el ancho inherente (480w) es el más cercano a 440px. La imagen de 800px tiene 128KB en disco mientras que la versión de 480px tiene solo 63KB — un ahorro de 65KB. Ahora imagine si esta fuera una página que tuviera muchas imágenes. Usar esta técnica puede ahorrarle a los usuarios de dispositivos móviles mucho ancho de banda.

+ +
+

Nota: Al probar esto con un navegador de escritorio, si el navegador no carga las imágenes más estrechas cuando tiene su ventana configurada en el ancho más estrecho, eche un vistazo a cuál es la ventana gráfica (puede aproximarla yendo a la Consola JavaScript del navegador y escribiendo document.querySelector('html').clientWidth). Los diferentes navegadores tienen tamaños mínimos a los que te permitirán reducir el ancho de la ventana y pueden ser más anchos de lo que piensas. Al probarlo con un navegador móvil, puede usar herramientas como la página de depuración de Firefox about:debugging para inspeccionar la página cargada en el dispositivo móvil usando las herramientas de desarrollo de escritorio. Para ver qué imágenes se cargaron, puede usar la pestaña Monitor de red en las herramientas del desarrollador de Firefox.

+
+ +

Los navegadores más antiguos que no soportan estas características solo las ignorarán y seguirán adelante con la carga de la imagen referenciada en el atributo {{htmlattrxref("src", "img")}} como lo hacen habitualmente.

+ +
+

Nota: En el {{htmlelement("head")}} del documento usted hallará la línea <meta name="viewport" content="width=device-width">: esto fuerza a los dispositivos móviles a adoptar su ancho real de ventana para cargar las páginas web (algunos navegadores móviles mienten sobre el ancho de su ventana gráfica y, en su lugar, cargan páginas con un ancho de ventana más grande y luego reducen la página cargada, lo que no es muy útil para imágenes o diseño receptivos).

+
+ +

Useful developer tools

+ +

There are some useful developer tools in browsers to help with working out the necessary slot widths, etc, that you need to use. When I was working them out, I first loaded up the non-responsive version of my example (not-responsive.html), then went into Responsive Design View (Tools > Web Developer > Responsive Design View), which allows you to look at your web page layouts as if they were being viewed through a variety of different device screen sizes.

+ +

I set the viewport width to 320px then 480px; for each one I went into the DOM Inspector, clicked on the {{htmlelement("img")}} element we are interested in, then looked at its size in the Box Model view tab on the right hand side of the display. This should give you the inherent image widths you need.

+ +

A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.

+ +

Next, you can check whether the srcset is working by setting the viewport width to what you want (set it to a narrow width, for example), opening the Network Inspector (Tools > Web Developer > Network), then reloading the page. This should give you a list of the assets that were downloaded to make up the webpage, and here you can check which image file was chosen for download.

+ +

a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images

+ +

Resolution switching: Same size, different resolutions

+ +

If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using srcset with x-descriptors and without sizes — a somewhat easier syntax! You can find an example of what this looks like in srcset-resolutions.html (see also the source code):

+ +
<img srcset="elva-fairy-320w.jpg,
+             elva-fairy-480w.jpg 1.5x,
+             elva-fairy-640w.jpg 2x"
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+
+ +

A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageIn this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):

+ +
img {
+  width: 320px;
+}
+ +

In this case, sizes is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the srcset. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the elva-fairy-640w.jpg image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.

+ +

Art direction

+ +

To recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.

+ +

Returning to our original not-responsive.html example, we have an image that badly needs art direction:

+ +
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+ +

Let's fix this, with {{htmlelement("picture")}}! Like <video> and <audio>, The <picture> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. The code in responsive.html looks like so:

+ +
<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+
+ + + +

This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:

+ +

Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen

+ +
+

Note: You should use the media attribute only in art direction scenarios; when you do use media, don't also offer media conditions within the sizes attribute.

+
+ +

¿Por qué no podemos usar, simplemente, CSS o Javascript?

+ +

Cuando el navegador comienza a cargar una página, empieza a descargar (precargar) cualquier imagen before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like srcset. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.

+ + + +

Use modern image formats boldly

+ +

There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.

+ +

<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types:

+ +
<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+
+ + + +

Aprendizaje activo: Implementando sus propias imágenes adaptables

+ +

For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <picture>, and a resolution switching example that uses srcset.

+ +
    +
  1. Write some simple HTML to contain your code (use not-responsive.html as a starting point, if you like)
    2. +
  2. Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)
    3. +
  3. Use the <picture> element to implement an art direction picture switcher!
    4. +
  4. Create multiple image files of different sizes, each showing the same picture.
    5. +
  5. Use srcset/size to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.
    6. +
+ +
+

Note: Use the browser devtools to help work out what sizes you need, as mentioned above.

+
+ +

Resumen

+ +

That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

+ + + +

This also draws to a close the entire Multimedia and embedding module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.

+ +

Vea también

+ + + +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
+ +
+

En este módulo

+ + +
+ +

<hv-copy-modal></hv-copy-modal>

diff --git a/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..e9b5571e23 --- /dev/null +++ b/files/es/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,319 @@ +--- +title: Video and audio content +slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos  {{htmlelement("video")}} y {{htmlelement("audio")}}; luego terminaremos viendo como agregar subtítulos a nuestros videos.

+ + + + + + + + + + + + +
Requisitos previos:Conocimientos básicos de computación, programas básicos instalados, conocimiento básico de trabajo con archivos, familiaridad con los fundamentos de HTML (como está cubierto en Empezando con HTML) e Imágenes en HTML.
Objetivo:Aprender como incrustar contenido de audio y video en una página web, y agregar subtítulos a los videos.
+ +

Audio y video en la web

+ +

Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como Flash (y después, Silverlight) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluídos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.

+ +

Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación {{glossary("HTML5")}} tenía tales características agregadas, con los elementos {{htmlelement("video")}} y {{htmlelement("audio")}}, y algo nuevo {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.

+ +

No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos archivos de audio y video de muestra con códigos de ejemplo para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.

+ +
+

Observación: Antes de empezar, también deberías saber que hay un puñado de OVPs (proveedores de video online) como YouTube, Dailymotion y Vimeo, y proveedores de audio como Soundcloud. Tales compañías ofrecen una conveniente fácil forma de hospedar y consumir videos, y que  no tienes que preocuparte sobre el enorme ancho de banda que se consume. Los OVPs normalmente usan código prefabricado para incrustar video/audio en tus sitios web; si  usas ese camino, puedes evitar algunas dificultates que discutimos en este artículo. Discutiremos este tipo de servicios un poco más en el siguiente artículo.

+
+ +

El elemento <video>

+ +

El elemento {{htmlelement("video")}} nos permite incrustar video fácilmente. Un ejemplo muy simple luce como lo siguiente:

+ +
<video src="rabbit320.webm" controls>
+  <p>Tu navegador no soporta HTML5 video. Aquí está el <a href="rabbit320.webm">enlace del video</a>.</p>
+</video>
+ +

Las características a notar son:

+ +
+
{{htmlattrxref("src","video")}}
+
De la misma manera que para el elemento {{htmlelement("img")}}, el atributo src (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera.
+
{{htmlattrxref("controls","video")}}
+
Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen  epilepsia). Se debe utilizar el atributo controls para incluir la interfaz de control del browser, o construir la nuestra utilizando la JavaScript API apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen.
+
El párrafo dentro de la etiqueta  <video>
+
Se lo llama fallback content (contenido de reserva) — y será mostrado si el browser desde el que se está accediendo a la página no soporta el elemento <video>, permitiéndonos proveer un fallback para browsers más antiguos. Puede ser de la manera que se quiera; en este caso proporcionamos un link directo al archivo de video, por lo que el usuario puede al menos acceder de alguna manera, independientemente del browser que esté usando.
+
+ +

El video incrustado se verá así:

+ +

A simple video player showing a video of a small white rabbit

+ +

Puedes probar el ejemplo aquí (también el código fuente).

+ +

Uso de formatos múltiples para mejorar la compatibilidad

+ +

Hay un problema con el ejemplo de arriba, que quizás  hayas notado si trataste de acceder al ejemplo en línea con un navegador como Safari o Internet Explorer. ¡El video no funciona! Esto es porque diferentes navegadores soportan diferentes formatos de video (y audio).

+ +

Contenidos de un archivo de medios

+ +

Repasemos la terminología rápidamente. Formatos como MP3, MP4 y WebM son llamados formatos contenedores. Estos contienen diferentes partes que componen toda la canción o video — como una pista de audio y una pista de video (en el caso del video), y metadatos para describir los contenidos que se presentan, qué codecs se usan para codificar sus canales, etcétera.

+ +

Un archivo WebM contiene una película que tiene una pista principal de video y otra pista con un ángulo alternativo, junto con audio en inglés y español, además de una pista con comentarios en inglés, lo que puede ser conceptualizado en el siguiente diagrama. También se incluyeron pistas de texto que contienen los subtítulos de la película en inglés, español y para el comentario.

+ +

+ +

Las pistas de audio y video dentro del contenedor mantienen los datos en un formato adecuado para el codec usado para codificar ese medio. Se usan diferentes formatos para pistas de audio versus de video. Cada pista de audio es codificada usando un codec de audio mientras que las pistas de video son codificadas (como probablemente ya has adivinado) usando un codec de video. Así como hemos hablado previamente, diferentes navegadores soportan diferentras formatos de audio y video, y diferentes formatos contenedores (como MP3, MP4 y WebM, que pueden contener diferentes tipos de video y audio).

+ +

Por ejemplo:

+ + + +

Un reproductor de audio tenderá a reproducir directamente un track de audio. Por ejemplo un archivo MP3 u Ogg. No necesitan contenedores.

+ +
+

Nota: No es tan simple como se ve en nuestra  tabla de compatibilidad de codecs audio-video. Además, muchos browsers de plataformas móviles pueden reproducir un formato no soportado entregándoselo al reproductor multimedia del sistema subyacente para que lo reproduzca. Pero esto servirá por ahora.

+
+ +

Los formatos anteriores existen para comprimir los archivos de audio y video volviéndolos manejables (el tamaño sin comprimir es muy grande). Los browsers contienen diferentes {{Glossary("Codec","Codecs")}}, como Vorbis o H.264, los cuales son usados para convertir el sonido y video comprimidos en binario y viceversa. Pero desafortunadamente, como indicamos antes, no todos los browsers soportan los mismos codecs, por lo tanto, habrá que proveer varios archivos para cada producción multimedia. Si te falta el codec correcto para decodificar el medio, simplemente no se reproducirá.

+ +
+

Nota: Debes estar preguntándote por qué sucede esto. El MP3 (para audio) y el MP4/H.264 (para video) son ampliamente compatibles y de buena calidad, sin embargo, también están patentados  — sus patentes cubren MP3 al menos hasta 2017 y a H.264 hasta 2027, lo que significa que los browsers que no tienen la patente tienen que pagar grandes sumas de dinero para soportar estos formatos. Además,  mucha gente no permite el software con restricciones, por estar a favor de formatos abiertos. Por todo esto es que tenemos que proveer múltiples formatos para los diferentes browsers.

+
+ +

Está bien, ¿pero cómo lo hacemos? Miremos el siguiente ejemplo actualizado (pruébalo en vivo aquí), o acá:

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Su navegador no soporta video HTML5. Aquí hay un <a href="rabbit320.mp4">enlace al video</a>.</p>
+</video>
+ +

Tomamos el atributo src del tag <video> y en su lugar incluimos elementos separados {{htmlelement("source")}} que apuntan a sus propias fuentes. En este caso el browser irá a los elementos <source> y reproducirá el primero de los elementos que el codec soporte. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los browsers en estos días.

+ +

Cada elemento  <source>  tambien tiene un atributo type . Esto es opcional, pero se recomienda que se incluyan, ya que contienen {{glossary("MIME type","MIME types")}} de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no tienen. Si no estan incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y recursos.

+ +
+

Note: Nuestro articulo sobre soporte de formatos multimedia contiene algunos de los habituales {{glossary("MIME type","MIME types")}}.

+
+ +

Otras características de la etiqueta <video>

+ +

Hay varias otras características que puede incluir en un vídeo HTML5. Eche un vistazo a nuestro tercer ejemplo, a continuación.

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

Esto nos dará un resultado que se parece a esto:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Las nuevas características son:

+ +
+
{{htmlattrxref("width","video")}} y {{htmlattrxref("height","video")}}
+
Puede controlar el tamanño con estos atributos o con  {{Glossary("CSS")}}. En ambos casos, los vídeos mantienen su relación anchura - altura nativa. Si la relación de aspecto no se mantiene con los tamañis establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada.
+
{{htmlattrxref("autoplay","video")}}
+
Hace que el audio o el vídeo empiece a reproducirse de inmediato, mientras se carga el resto de la página. Le aconsejamos que no utilice vídeo (o audio) de reproducción automática en sus sitios, ya que los usuarios pueden encontralo molesto.
+
{{htmlattrxref("loop","video")}}
+
Hace que el vídeo (o audio) comience a reproducirse cada vez que finaliza.Esto puede en ocasiones resultar molesto, así que utilizalo solo si es realmente necesario.
+
{{htmlattrxref("muted","video")}}
+
Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada.
+
{{htmlattrxref("poster","video")}}
+
La URL de una imagen que se mostrará antes de reproducir el vídeo. Está destinado a ser utilizado para una pantalla de presentación o pantalla publicitaria (miniatura del vídeo).
+
{{htmlattrxref("preload","video")}}
+
+

Se utiliza para almacenar en búfer archivos grandes; Puede tomar uno de estos tres valores:

+ +
    +
  • "none" no almacena el archivo en el búfer
    • +
  • "auto" almacena el archivo multimedia
    • +
  • "metadata" almacena solo los metadatos del archivo
    • +
+
+
+ +

Puedes encontrar el ejemplo anterior disponible en  play live on Github (también see the source code.)  Tenga en cuenta que hemos incluido el atributo autoplay en la versión en vivo  — Si el vídeo comienza a reproducirse tan pronto como se cargue la página no podrá ver la miniatura!

+ +

El elemento <audio>

+ +

El elemento  {{htmlelement("audio")}} funciona exactamente de la misma forma que el elemento {{htmlelement("video")}}, con algunas pequeñas diferencias como se describe a continuación. Un ejemplo típico podría ser así:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

Esto produce algo como lo siguiente en un navegador:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Nota: Puedes reproducir este ejemplo de audio en Github (también, puedes ver el código fuente del reproductor de audio.)

+
+ +

Esto ocupa menos espacio que un reproductor de video, ya que no hay un componente visual; solo necesita mostrar los controles para reproducir el audio. Otras diferencias con respecto al video HTML5 son las siguentes:

+ + + +

Además de esto, <audio> admite las mismas características que  <video> — revisa las secciones anteriores para obtener más información sobre ellas.

+ +

Reinicio de la reproducción multimedia

+ +

En cualquier momento, puede restablecer los medios al principio—incluyendo el proceso de selección de la mejor fuente de medios, si se especifica más de una usando {{HTMLElement("source")}} elementos—llamando al elemento {{domxref("HTMLMediaElement.load", "load()")}} method:

+ +
var mediaElem = document.getElementById("my-media-element");
+mediaElem.load();
+ +

Detecting track addition and removal

+ +

You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the {{event("addtrack")}} event being fired on the associated {{domxref("AudioTrackList")}} object (retrieved via {{domxref("HTMLMediaElement.audioTracks")}}) to be informed when audio tracks are added to the media:

+ +
var mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+
+ +

Encontraras mas documentacion acerca de esto en nuestra {{domxref("TrackEvent")}} documentacion.

+ +

Displaying video text tracks

+ +

Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

+ + + +

Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML5 video you can, with the WebVTT format and the {{htmlelement("track")}} element.

+ +
+

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

+
+ +

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called cues, and you can display different types for different purposes, the most common being:

+ +
+
subtitles
+
Translations of foreign material, for people who don't understand the words spoken in the audio.
+
captions
+
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
+
timed descriptions
+
Text for conversion into audio, to serve people with visual impairments.
+
+ +

A typical WebVTT file will look something like this:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

To get this displayed along with the HTML media playback, you need to:

+ +
    +
  1. Save it as a .vtt file in a sensible place.
    2. +
  2. Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
    3. +
+ +

Here's an example:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

This will result in a video that has subtitles displayed, kind of like this:

+ +

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

+ +

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español. 

+ +
+

Note: Text tracks also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

+
+ +

Active learning: Embedding your own audio and video

+ +

For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity. We'd like you to have a go!

+ +

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

+ +

We would like you to:

+ +
    +
  1. Save your audio and video files in a new directory on your computer.
    2. +
  2. Create a new HTML file in the same directory, called index.html.
    3. +
  3. Add <audio> and <video> elements to the page; make them display the default browser controls.
    4. +
  4. Give both of them <source> elements so that browsers will find the audio format they support best and load it. These should include type attributes.
    5. +
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.
    6. +
+ +

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

+ +

Summary

+ +

And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like {{htmlelement("iframe")}} and {{htmlelement("object")}}.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + + +
+
+ + diff --git "a/files/es/learn/html/tablas/conceptos_b\303\241sicos_de_las_tablas_html/index.html" "b/files/es/learn/html/tablas/conceptos_b\303\241sicos_de_las_tablas_html/index.html" new file mode 100644 index 0000000000..7259adf427 --- /dev/null +++ "b/files/es/learn/html/tablas/conceptos_b\303\241sicos_de_las_tablas_html/index.html" @@ -0,0 +1,563 @@ +--- +title: Conceptos básicos de las tablas HTML +slug: Learn/HTML/Tablas/Conceptos_básicos_de_las_tablas_HTML +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Este artículo te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (ver Introducción al HTML).
Objetivo:Adquirir conocimientos básicos de las tablas HTML.
+ +

¿Qué es una tabla?

+ +

Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un día de la semana o el horario de una piscina municipal.

+ +

Una tabla de datos de ejemplo que muestra los nombres y las edades de algunas personas: Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

Una tabla de datos que muestra unos horarios de clases natación

+ +

Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:

+ +

Un pergamino muy antiguo; cuesta un poco leer los datos, pero muestra con claridad que las tablas de datos ya se utilizaban en 1800.

+ +

Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.

+ +

¿Cómo funciona una tabla?

+ +

El aspecto básico de una tabla es que es un elemento rígido. Es fácil interpretar la información haciendo asociaciones visuales entre los encabezados de las filas y las columnas. Por ejemplo, observa la tabla siguiente y busca un gigante de gas joviano con 62 lunas. Puedes encontrar la respuesta asociando los encabezados de la fila y la columna correspondientes.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Datos sobre los planetas de nuestro sistema solar (datos planetarios tomados de la hoja técnica sobre datos planetarios de la NASA (Nasa's Planetary Fact Sheet - Metric).
NombreMasa (1024 kg)Diámetro (km)Densidad (kg/m3)Gravedad (m/s2)Duración del día (horas)Distancia del Sol (106km)Temperatura media (°C)Número de lunasObservaciones
Planetas terrestresMercurio0,3304.8795.4273,74.222,657,91670El más cercano al Sol
Venus4,8712.1045.2438,92.802,0108,24640
La Tierra5,9712.7565.5149,824,0149,6151Nuestro planeta
Marte0,6426.7923.9333,724,7227,9-652El planeta rojo
Planetas jovianosLos gigantes de gasJúpiter1.898142.9841.32623,19,9778,6-11067El planeta más grande
Saturno568120.5366879,010,71.433,5-14062
Los gigantes de hieloUrano86,851.1181.2718,717,22.872,5-19527
Neptuno10249.5281.63811,016,14.495,1-20014
Planetas enanosPlutón0,01462.3702.0950,7153,35.906,4-2255Desclasificado como planeta en 2006, pero aún es una cuestión polémica.
+ +

Cuando se hace correctamente, incluso las personas ciegas pueden interpretar los datos de una tabla HTML. Una tabla HTML bien hecha debe mejorar la experiencia de los usuarios videntes e invidentes por igual.

+ +

Dar estilo a las tablas

+ +

También puedes echar un vistazo al ejemplo vivo en GitHub. Observarás que la tabla que encontrarás allí tiene un aspecto más legible; esto se debe a que la tabla que ves en esta página tiene un estilo mínimo, mientras que en la de la versión de GitHub se ha aplicado un CSS más significativo.

+ +

No te hagas ilusiones; para que las tablas sean efectivas en la web, debes proporcionar cierta información de estilo con CSS, así como una buena estructura sólida con HTML. En este módulo nos centramos en la parte HTML; para averiguar sobre la parte del CSS debes visitar nuestro artículo Aplicar estilo a las tablas.

+ +

En este módulo no nos vamos a centrar en el CSS, sino que te vamos a proporcionar una hoja de estilo de CSS que dará a tus tablas algo más de legibilidad de la que se obtiene por defecto si no se proporciona ningún estilo. Puedes encontrar la hoja de estilo aquí, así como también una plantilla HTML para aplicar la hoja de estilo (te darán un buen punto de partida para experimentar con las tablas HTML).

+ +

¿Cuándo no debes usar tablas HTML?

+ +

Las tablas HTML están pensadas para utilizarse con datos tabulados. Por desgracia, mucha gente utiliza las tablas HTML para hacer compaginaciones de páginas web. Por ejemplo, una fila para contener la cabecera, una fila para contener las columnas de contenido, una fila para contener el pie de página, etc. Puede encontrar más detalles y un ejemplo en Diseños de página en nuestro Módulo de aprendizaje de accesibilidad. Se solía hacer este uso de las tablas porque la compatibilidad CSS entre navegadores solía ser terrible. Los diseños de tablas son mucho menos comunes hoy en día, pero aún se pueden ver en algunos rincones de la web.

+ +

En resumen, es una mala idea usar tablas para el diseño en lugar de las técnicas de diseño CSS. Las razones principales son las siguientes:

+ +
    +
  1. Las tablas de diseño reducen la accesibilidad para los usuarios con discapacidad visual: Los lectores de pantalla que utilizan las personas con visibilidad reducida interpretan las etiquetas de una página HTML y leen su contenido para el usuario. Puesto que las tablas no son la herramienta adecuada para el diseño y el marcado es más complejo que con las técnicas de diseño CSS, la salida de los lectores de pantalla será confusa para estos usuarios.
    2. +
  2. Las tablas generan estructuras incorrectas: Como ya se mencionó, los diseños de tabla suelen involucrar estructuras de marcado más complejas que las técnicas de diseño. Esto puede dificultar la escritura, el mantenimiento y la depuración del código.
    3. +
  3. Las tablas no tienen respuesta adaptativa automática: Cuando usas contenedores de diseño adecuados (tales como {{HTMLElement ("header")}}, {{HTMLElement ("section")}}, {{HTMLElement ("article")}} o {{HTMLElement ("div")}}), su ancho predeterminado es el 100% de su elemento padre. En cambio, las tablas se dimensionan de forma predeterminada según su contenido, por lo que se necesitan medidas adicionales para que el diseño de la tabla funcione de manera efectiva en todos los dispositivos.
    4. +
+ +

Aprendizaje activo: Crea tu primera tabla

+ +

Ya hemos hablado bastante sobre la teoría de las tablas, así que veamos un ejemplo práctico y construyamos una tabla simple.

+ +
    +
  1. En primer lugar, haz una copia local de blank-template.html y minimal-table.css en un directorio nuevo de tu ordenador.
    2. +
  2. El contenido de cada tabla está delimitado entre estas dos etiquetas: <table></table>. Añádelas al cuerpo de tu código HTML.
    3. +
  3. El contenedor más pequeño dentro de una tabla es una celda, que se crea con un elemento <td> ('td' significa 'table data', datos de tabla). Añade lo siguiente dentro de tus etiquetas de tabla: + 
    <td>Hola, soy tu primera celda.</td>
    +
    4. +
  4. Si quieres una fila de cuatro celdas, tienes que copiar estas etiquetas tres veces. Actualiza el contenido de la tabla para que se vea así: + 
    <td>Hola, soy tu primera celda.</td>
+<td>Soy tu segunda celda.</td>
+<td>Soy tu tercera celda.</td>
+<td>Soy tu cuarta celda.</td>
    +
    5. +
+ +

Como verás, las celdas no se colocan una debajo de la otra, sino que se alinean automáticamente entre sí en la misma fila. Cada elemento <td> crea una sola celda, y juntas forman la primera fila. Cada celda que agregamos hace crecer la fila.

+ +

Para detener el crecimiento de esta fila y comenzar a colocar las celdas posteriores en una segunda fila, necesitamos usar el elemento <tr> ('tr' significa 'table raw', fila de tabla). Vamos a verlo en detalle.

+ +
    +
  1. Coloca las cuatro celdas que has creado dentro de las etiquetas <tr>, de esta forma: + + 
    <tr>
+  <td>Hola, soy tu primera celda.</td>
+  <td>Soy tu segunda celda.</td>
+  <td>Soy tu tercera celda.</td>
+  <td>Soy tu cuarta celda.</td>
+</tr>
    +
    2. +
  2. Ahora que has hecho una fila, intenta hacer una o dos más: cada fila debe estar delimitada por un elemento <tr> adicional, con cada celda contenida en un <td>.
    3. +
+ +

Esto debería dar como resultado una tabla similar a la siguiente:

+ + + + + + + + + + + + + + + + +
Hola, soy tu primera celda.Soy tu segunda celda.Soy tu tercera celda.Soy tu cuarta celda.
Segunda fila, primera celda.Celda 2.Celda 3.Celda 4.
+ +
+

Nota: También puedes encontrar esto en GitHub como simple-table.html (consúltalo en vivo).

+
+ +

Añadir encabezados con elementos <th>

+ +

Ahora nos vamos a centrar en los encabezados de tabla: celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna (por ejemplo, observa las celdas «Propietario» y «Edad» en el primer ejemplo que se muestra en este artículo). Para ilustrar por qué son útiles, echa un vistazo al ejemplo de tabla siguiente. En primer lugar, el código fuente:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Raza</td>
+    <td>Jack Russell</td>
+    <td>Caniche</td>
+    <td>Perro callejero</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Edad</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Propietario</td>
+    <td>Suegra</td>
+    <td>Yo</td>
+    <td>Yo</td>
+    <td>Cuñada</td>
+  </tr>
+  <tr>
+    <td>Hábitos alimentarios</td>
+    <td>Come las sobras de todos</td>
+
+<td>Mordisquea la comida</td>
+    <td>Come en abundancia</td>
+
+<td>Come hasta que revienta</td>
+  </tr>
+</table>
+ +

Ahora observa la tabla representada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
RazaJack RussellCanichePerro callejeroCocker Spaniel
Edad169105
PropietarioSuegraYoYoCuñada
Hábitos alimentariosCome las sobras de todosMordisquea la comidaCome en abundanciaCome hasta que revienta
+ +

El problema aquí es que, si bien puedes distinguir lo que sucede, no es tan fácil cruzar datos de referencia. Sería mucho mejor si los encabezados de las columnas y las filas se destacasen de alguna manera.

+ +

Aprendizaje activo: encabezados de tabla

+ +

Intentemos mejorar esta tabla.

+ +
    +
  1. Primero, haz una copia local de nuestros archivos dogs-table.html y minimal-table.css en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
    2. +
  2. Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> ('th' significa 'table header', encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Entra en el código HTML, y cambiar todos los elementos <td> que delimitan los encabezados de tabla por elementos <th>.
    3. +
  3. Guarda tu HTML y cárgalo en un navegador. Los encabezados deberían verse como tal.
    4. +
+ +
+

Nota: Puedes encontrar nuestro ejemplo terminado en dogs-table-fixed.html en GitHub (o consultarlo en vivo).

+
+ +

¿Por qué son útiles los encabezados?

+ +

Ya hemos respondido parcialmente a esta pregunta: es más fácil encontrar los datos que buscas cuando los encabezados se destacan con claridad, y el diseño suele presentar un aspecto mejor.

+ +
+

Nota: Los encabezados de las tablas vienen con un estilo predeterminado: están en negrita y centrados (incluso si no añades tu estilo propio a la tabla) para que destaquen.

+
+ +

Los encabezados de tabla también presentan otra ventaja: junto con el atributo de scope (que veremos en el próximo artículo), mejoran la accesibilidad de las tablas porque asocian cada encabezado con todos los datos de la misma fila o columna. Así que los lectores de pantalla pueden leer una fila o columna de datos a la vez, lo cual es bastante útil.

+ +

Celdas que abarcan varias filas y columnas

+ +

A veces queremos que las celdas abarquen varias filas o columnas. Toma el ejemplo siguiente, que muestra los nombres de algunos animales comunes. En algunos casos, queremos mostrar los nombres de los machos y las hembras junto al nombre del animal. A veces no lo queremos, y en tales casos queremos que el nombre del animal abarque toda la tabla.

+ +

El marcado inicial se ve así:

+ +
<table>
+  <tr>
+    <th>Animales</th>
+  </tr>
+  <tr>
+    <th>Hipopótamo</th>
+  </tr>
+  <tr>
+    <th>Caballo</th>
+    <td>Yegua</td>
+  </tr>
+  <tr>
+    <td>Semental</td>
+  </tr>
+  <tr>
+
+<th>Cocodrilo</th>
+  </tr>
+  <tr>
+
+<th>Pollo</th>
+
+<td>Gallina</td>
+  </tr>
+  <tr>
+    <td>Gallo</td>
+  </tr>
+</table>
+ +

Pero la salida no nos da exactamente lo que queremos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animales
Hipopótamo
CaballoYegua
Semental
Cocodrilo
PolloGallina
Gallo
+ +

Necesitamos una forma de hacer que «Animales», «Hipopótamo» y «Cocodrilo» se extiendan dos columnas más allá, y «Caballo» y «Pollo» se extiendan dos filas más abajo. Por fortuna, los encabezados de tabla y las celdas tienen los atributos colspan y rowspan, que nos permiten hacer exactamente esas cosas. Ambos aceptan un valor numérico sin unidades, que es igual al número de filas o columnas que desea abarcar. Por ejemplo, colspan="2" extiende una celda dos columnas más allá.

+ +

Usemos colspan y rowspan para mejorar esta tabla.

+ +
    +
  1. Primero, haz una copia local de nuestros archivos animals-table.html y minimal-table.css en un directorio nuevo de tu ordenador. El HTML contiene el mismo ejemplo sobre perros que viste arriba.
    2. +
  2. Luego, usa colspan para extender las celdas «Animales», «Hipopótamo» y «Cocodrilo» dos columnas más allá.
    3. +
  3. Por último, usa rowspan para extender las celdas de «Caballo» y «Pollo» dos filas más abajo.
    4. +
  4. Guarda tu código y ábrelo en un navegador para ver la mejora.
    5. +
+ +
+

Nota: Puedes encontrar nuestro ejemplo terminado en animals-table-fixed.html en GitHub (o consultarlo en vivo).

+
+ + +
+ +

Proporcionar un estilo común a las columnas.

+ +

Hay una última característica de la que queremos hablar en este artículo antes de continuar. El HTML tiene un método para definir información de estilo para una columna completa de datos en un solo lugar: los elementos <col> y <colgroup>. Estos atributos existen porque especificar el estilo de las columnas puede resultar enojoso e ineficiente; en general hay que especificar la información de estilo en cada <td> o <th> de la columna, o utilizar un selector complejo como {{cssxref(":nth-child()")}}.

+ +

Tomemos el ejemplo sencillo siguiente:

+ +
<table>
+  <tr>
+
+<th>Dato 1</th>
+    <th style="background-color: yellow">Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td style="background-color: yellow">Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Esto nos da el resultado siguiente:

+ + + + + + + + + + + + + + + + +
Dato 1Dato 2
CalcutaNaranja
RobotsJazz
+ +

Esto no es ideal, porque hay que repetir la información de estilo en las tres celdas de la columna (en un proyecto real probablemente habría definida una clase class en las tres celdas y el estilo se especificaría en una hoja de estilo por separado). En vez de hacer esto, podemos especificar la información una sola vez, con un elemento <col>. Los elementos <col> se especifican dentro de un contenedor <colgroup> justo debajo de la etiqueta de apertura <table>. Podríamos crear el mismo efecto que vemos arriba especificando nuestra tabla de la manera siguiente:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+
+<th>Dato 1</th>
+
+<th>Dato 2</th>
+  </tr>
+  <tr>
+    <td>Calcuta</td>
+    <td>Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

En efecto, definimos dos tipos de «columnas de estilo», una que especifica la información para la aplicación de estilo en cada columna. No aplicamos estilo a la primera columna, sino que aún tenemos que incluir un elemento <col> en blanco; de lo contrario, el estilo también se aplicaría a la primera columna.

+ +

Si quisiéramos aplicar la información de estilo a ambas columnas, podríamos incluir un elemento <col> con un atributo span, como este:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Al igual que colspan y rowspan, span toma un valor numérico sin unidades que especifica el número de columnas a las que se desea aplicar el estilo.

+ +

Aprendizaje activo: colgroup y col

+ +

Ahora es el momento de intentarlo tú mismo.

+ +

A continuación puedes ver el horario de una profesora de idiomas. El viernes tiene que enseñar holandés todo el día, pero también enseña alemán durante unas horas los martes y los jueves, y quiere resaltar las columnas que contienen los días que da clase.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recrea la tabla a partir de los pasos siguientes.

+ +
    +
  1. Primero, haz una copia local de nuestro archivo timetable.html en un directorio nuevo de tu ordenador. El HTML contiene la misma tabla que viste arriba, menos la información de estilo de las columnas.
    2. +
  2. Añade un elemento <colgroup> en la parte superior de la tabla, justo debajo de la etiqueta <table>, en la que puedes añadir tus elementos <col> (consulta los pasos restantes a continuación).
    3. +
  3. Las dos primeras columnas deben dejarse sin estilo.
    4. +
  4. Añade un color de fondo a la tercera columna. El valor para tu atributo de style es background-color:#97DB9A;
    5. +
  5. Establece un ancho distinto para la cuarta columna. El valor de tu atributo de style es width: 42px;
    6. +
  6. Añade un color de fondo a la quinta columna. El valor para tu atributo de style es background-color:#97DB9A;
    7. +
  7. Añade un color de fondo diferente más un borde a la sexta columna, para indicar que este es un día especial porque da clases de un idioma diferente. Los valores para tu atributo de style son background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. Los últimos dos días los tiene libres, así que no establezcas ningún color de fondo, pero sí un valor para el ancho; el valor para el atributo de style es width: 42px;
    9. +
+ +

Mira cómo sigue en el ejemplo. Si te encallas o quieres verificar tu trabajo, puedes encontrar nuestra versión en GitHub como timetable-fixed.html (o también puedes consultarlo en vivo).

+ +

Resumen

+ +

Con esto casi hemos abarcado todos los conceptos básicos de las tablas HTML. En el próximo artículo, veremos algunas características un poco más avanzadas de las tablas y comenzaremos a pensar acerca de su accesibilidad para las personas con discapacidad visual.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +
+

En este módulo

+ + +
diff --git a/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html b/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html new file mode 100644 index 0000000000..a74817c5d4 --- /dev/null +++ b/files/es/learn/html/tablas/funciones_avanzadas_de_las_tablas_html_y_accesibilidad/index.html @@ -0,0 +1,471 @@ +--- +title: Funciones avanzadas de las tablas HTML y accesibilidad +slug: Learn/HTML/Tablas/Funciones_avanzadas_de_las_tablas_HTML_y_accesibilidad +translation_of: Learn/HTML/Tables/Advanced +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +

En el segundo artículo de este módulo, analizamos algunas características más avanzadas de las tablas HTML, como los subtítulos/resúmenes, la agrupación de filas en las secciones del encabezado, el cuerpo y el pie de página; y también analizamos la accesibilidad de las tablas para usuarios con discapacidad visual.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de HTML (ver Introducción al HTML).
Objetivo:Aprender las características más avanzadas de las tablas HTML y la accesibilidad de las tablas.
+ +

Añadir un subtítulo a tu tabla con <caption>

+ +

Puedes dar un título a tu tabla colocándolo dentro de un elemento {{htmlelement ("caption")}} y anidándolo dentro del elemento {{htmlelement ("table")}}. Debes ponerlo justo debajo de la etiqueta de apertura <table>.

+ +
<table>
+  <caption>Dinosaurios en el período Jurásico</caption>
+
+  ...
+</table>
+ +

Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.

+ +

Los subtítulos se colocan directamente debajo de la etiqueta <table>.

+ +
+

Nota: El atributo {{htmlattrxref("summary","table")}} también se puede usar en el elemento table para proporcionar una descripción; los lectores de pantalla también lo leen. Sin embargo, recomendamos usar el elemento caption, porque {{htmlattrxref("summary","table")}} está {{glossary("obsoleto")}} conforme a la especificación HTML5 y porque los usuarios sin discapacidad visual no pueden leerlo (no aparece en la página).

+
+ +

Aprendizaje activo: Añadir un subtítulo

+ +

Vamos a probarlo con un ejemplo del artículo anterior.

+ +
    +
  1. Abre el ejemplo del horario de clases de la profesora de idiomas del final de conocimientos básicos de las tablas HTML, o haz una copia local de nuestro archivo timetable-fixed.html.
    2. +
  2. Añade un título adecuado a la tabla.
    3. +
  3. Guarda tu código, ábrelo en un navegador y observa qué aspecto presenta.
    4. +
+ +
+

Nota: Puedes encontrar nuestra versión en GitHub: consulta timetable-caption.html (mirar en vivo).

+
+ +

Añadir estructura con <thead>, <tfoot> y <tbody>

+ +

A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con {{htmlelement ("thead")}}, {{htmlelement ("tfoot")}} y {{htmlelement ("tbody")}}, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.

+ +

Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.

+ +

Para utilizarlos:

+ + + +
+

Nota: <tbody> se incluye siempre en todas las tablas de forma implícita si no lo especificas en tu código. Para comprobarlo, abre uno de tus ejemplos anteriores que no incluya <tbody> y mira el código HTML en las herramientas de desarrollo de tu navegador; verás que el navegador ha añadido esta etiqueta. Quizás te preguntes por qué deberías molestarte en incluirlo. Debes hacerlo para tener más control sobre la estructura y el estilo de la tabla.

+
+ +

Aprendizaje activo: Añadir estructura a la tabla

+ +

Pongamos en acción estos elementos nuevos.

+ +
    +
  1. En primer lugar, haz una copia local de spending-record.html y minimal-table.css en una carpeta nueva de tu ordenador.
    2. +
  2. Intenta abrirlo en un navegador: observarás que se ve bien, pero podría mejorarse. La fila «SUM», que contiene una suma de las cantidades gastadas, parece estar en el lugar equivocado, y faltan algunos detalles del código.
    3. +
  3. Coloca la fila de encabezados dentro de un elemento <thead>, la fila «SUM» dentro de un elemento <tfoot>, y el resto del contenido dentro de un elemento <tbody>.
    4. +
  4. Guarda y actualiza, y observa que añadir el elemento <tfoot> ha provocado que la fila «SUM» pase al final de la tabla.
    5. +
  5. Luego, añade un atributo {{htmlattrxref ("colspan", "td")}} para que la celda «SUM» abarque las primeras cuatro columnas, de modo que el número aparezca en la parte inferior de la columna «Costes».
    6. +
  6. Vamos a añadir un estilo adicional sencillo a la tabla para que veas cuán útiles son estos elementos para aplicar CSS. Dentro del encabezado del documento HTML hay un elemento {{htmlelement ("style")}} vacío. Añade a este elemento las líneas de código CSS siguientes: + 
    tbody {
+  font-size: 95%;
+  font-style: italic;
+}
+
+tfoot {
+  font-weight: bold;
+}
+
    +
    7. +
  7. Guarda, actualiza, y échale un vistazo al resultado. Si los elementos <tbody> y <tfoot> no estuvieran en su lugar, tendrías que escribir selectores/reglas mucho más complicados para obtener la misma aplicación de estilo.
    8. +
+ +
+

Nota: No esperamos que comprendas completamente el CSS en este momento. Aprenderás más sobre el tema cuando llegues a nuestros módulos CSS (Introducción al CSS es un buen lugar para comenzar; también tenemos un artículo específico sobre Aplicar estilo a las tablas).

+
+ +

Tu tabla final debería tener un aspecto similar al siguiente:

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: También puedes encontrarlo en GitHub como spending-record-finished.html (o consultarlo también en vivo).

+
+ +

Anidar tablas

+ +

Es posible anidar una tabla dentro de otra, siempre que incluyas la estructura completa, incluido el elemento <table>. Por lo general, esto no se recomienda, porque se obtiene un marcado más confuso y menos accesible para los usuarios que usan lectores de pantalla, y además, en muchos casos sería posible sencillamente insertar celdas/filas/columnas adicionales en la tabla. Sin embargo, a veces es necesario, por ejemplo, si deseas importar contenido de forma sencilla desde otras fuentes.

+ +

El marcado siguiente muestra una tabla anidada simple:

+ +
<table id="tabla1">
+  <tr>
+    <th>título1</th>
+    <th>título2</th>
+    <th>título3</th>
+  </tr>
+  <tr>
+    <td id="nested">
+      <table id="tabla2">
+        <tr>
+          <td>celda1</td>
+          <td>celda2</td>
+          <td>celda3</td>
+        </tr>
+      </table>
+    </td>
+    <td>celda2</td>
+    <td>celda3</td>
+  </tr>
+  <tr>
+    <td>celda4</td>
+    <td>celda5</td>
+    <td>celda6</td>
+  </tr>
+</table>
+ +

La salida se verá así:

+ + + + + + + + + + + + + + + + + + + +
título1título2título3
+ + + + + + + + +
celda1celda2celda3
+ 		celda2celda3
celda4celda5celda6
+ +

Tablas para usuarios con discapacidad visual

+ +

Repasemos brevemente cómo usamos las tablas de datos. Una tabla puede ser una herramienta útil porque nos proporciona un acceso rápido a unos datos y nos permite buscar entre valores diferentes. Por ejemplo, echa un vistazo a la tabla siguiente para saber cuántos anillos se vendieron en Gante en agosto pasado. Para comprender la información que contiene la tabla, establecemos asociaciones visuales entre los datos de la tabla y sus encabezados de columna y/o fila.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Artículos vendidos en agosto de 2016
RopaAccesorios
PantalonesFaldasVestidosPulserasAnillos
BélgicaAmberes5622437223
Gante4618506115
Bruselas5127386928
Los países bajosÁmsterdam8934698538
Utrecht8012433619
+ +

Pero, ¿y si no puedes hacer esas asociaciones visuales? ¿Cómo podrías leer una tabla como la anterior? Las personas con discapacidad visual a menudo usan un lector de pantalla que les lee la información de las páginas web. Esto no resulta un problema cuando lees un texto sin formato, pero interpretar una tabla puede ser un gran desafío para una persona ciega. Sin embargo, con el marcado adecuado podemos reemplazar las asociaciones visuales por otras asociaciones de tipo programático.

+ +
+

Nota: Hay en torno a 253 millones de personas con discapacidad visual según los datos de la OMS de 2017.

+
+ +

Esta sección del artículo proporciona técnicas adicionales para conferir a las tablas la mayor accesibilidad posible.

+ +

Usar encabezados de columna y fila

+ +

Los lectores de pantalla identificarán todos los encabezados y los usarán para hacer asociaciones programáticas entre esos encabezados y las celdas con las que se relacionan. La combinación de encabezados por columna y fila identificará e interpretará los datos de cada celda para que los usuarios que usan lectores de pantalla puedan interpretar la tabla de manera similar a como lo hace un usuario sin discapacidad visual.

+ +

Ya expusimos los encabezados en nuestro artículo anterior; consulta Añadir encabezados con elementos <th>.

+ +

El atributo scope

+ +

Un nuevo tema para este artículo es el atributo {{htmlattrxref ("scope", "th")}}, que se puede añadir al elemento <th> para indicar a los lectores de pantalla exactamente para qué celdas es el encabezado. Volviendo a nuestro ejemplo anterior de registro de gastos, podrías definir los encabezados de columna inequívocamente como encabezados de columna de este modo:

+ +
<thead>
+  <tr>
+    <th scope="col">Compra</th>
+    <th scope="col">Ubicación</th>
+    <th scope="col">Fecha</th>
+    <th scope="col">Revisión</th>
+    <th scope="col">Coste (€)</th>
+  </tr>
+</thead>
+ +

Y también cada fila podría tener un encabezado definido de esta manera (si añadimos encabezados de fila y encabezados de columna):

+ +
<tr>
+  <th scope="row">Corte de pelo</th>
+
+<td>Peluquería</td>
+  <td>12/09</td>
+
+<td>Gran idea</td>
+  <td>30</td>
+</tr>
+ +

Los lectores de pantalla reconocerán el marcado estructurado de esta manera y permitirán a tus usuarios, por ejemplo, leer toda la columna o fila a la vez.

+ +

El atributo scope tiene dos valores posibles más: colgroup y rowgroup. Se utilizan para encabezados que se encuentran sobre la parte superior de varias columnas o filas. Si vuelves a echar un vistazo a la tabla «Artículos vendidos en agosto de 2016» al comienzo de esta sección, verás que la celda «Ropa» se encuentra encima de las celdas «Pantalones», «Faldas» y «Vestidos» Todas estas celdas deben estar marcadas como encabezados (<th>), pero «Ropa» es un encabezado que está por encima y define los otros tres subencabezados. Por lo tanto, «Ropa» debería incluir un atributo scope="colgroup", mientras que los demás tendrían un atributo scope="col".

+ +

Los atributos de id y encabezados

+ +

Una alternativa al uso del atributo scope es usar los atributos {{htmlattrxref ("id")}} y {{htmlattrxref ("headers", "td")}} para crear asociaciones entre encabezados y celdas. La forma en que se usan es la siguiente:

+ +
    +
  1. Añades un id único a cada elemento <th>.
    2. +
  2. Añades un atributo headers a cada elemento <td>. Cada atributo headers debe contener una lista de los id de todos los elementos <th> que actúan como encabezado de esa celda, separados por espacios.
    3. +
+ +

Esto le da a tu tabla HTML una definición explícita de la posición de cada celda en la tabla definida por los encabezados de cada columna y fila de la que forma parte, como en una hoja de cálculo. Para que funcione bien, la tabla necesita tanto encabezados de columna como encabezados de fila.

+ +

Volviendo a nuestro ejemplo de gastos, los dos fragmentos anteriores podrían reescribirse así:

+ +
<thead>
+  <tr>
+    <th id="purchase">Compra</th>
+    <th id="location">Ubicación</th>
+    <th id="date">Fecha</th>
+    <th id="evaluation">Revisión</th>
+    <th id="cost">Coste (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Corte de pelo</th>
+  <td headers="location haircut">Peluquería</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Gran idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
+
+  ...
+
+</tbody>
+ +
+

Nota: Este método crea asociaciones muy precisas entre los encabezados y las celdas de datos, pero utiliza un montón más de código de marcado y no permite errores. El enfoque scope suele bastar para la mayoría de las tablas.

+
+ +

Aprendizaje activo: jugar con scope y headers

+ +
    +
  1. Para este ejercicio final, te proponemos que primero hagas copias locales de items-sold.html y minimal-table.css en un directorio nuevo.
    2. +
  2. Ahora intenta añadir los atributos scope adecuados para hacer que esta tabla sea más accesible.
    3. +
  3. Por último, haz otra copia de los archivos originales, y esta vez añade accesibilidad a la tabla utilizando los atributos id y headers.
    4. +
+ +
+

Nota: Puedes verificar tu trabajo con nuestros ejemplos terminados: consulta items-sold-scope.html (consúltalo en vivo) y items-sold-headers.html (consúltalo en vivo).

+
+ +

Resumen

+ +

Podrías aprender algo más sobre las tablas en HTML, pero en realidad te hemos proporcionado toda la información que necesitas saber en este momento. En este punto, es posible que desees ir y aprender sobre la aplicación de estilo a tablas HTML: consulta Aplicar estilo a las tablas.

+ +
{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
+ +
+

En este módulo

+ + +
diff --git a/files/es/learn/html/tablas/index.html b/files/es/learn/html/tablas/index.html new file mode 100644 index 0000000000..7d04eb0cbf --- /dev/null +++ b/files/es/learn/html/tablas/index.html @@ -0,0 +1,34 @@ +--- +title: Tablas HTML +slug: Learn/HTML/Tablas +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

Una tarea muy común en HTML es la estructuración de datos, y para esto hay múltiples elementos y atributos. Esto unido a un poco de CSS, hace que en HTML sea sencillo mostrar tablas con información sobre tu horario escolar, los horarios de una piscina local o las estadisticas de tu equipo de dinosaurios o fútbol preferido. Este módulo te guiará en todo lo que necesitas saber sobre la estructuración tabular de datos en HTML.

+ +

Requisitos previos

+ +

Antes de comenzar este módulo, deberías de saber las cosas básicas de HTML — ver Introducción a HTML.

+ +
+

Nota: Si estas trabjando en un ordenador/tableta/otro dispositivo en el que no puedes crear tus propios archivos, puedes probar la mayoría de ejemplos online en webs como JSBin o Thimble.

+
+ +

Guías

+ +

Este módulo contiene los siguientes artículos:

+ +
+
Comenzando con tablas HTML
+
Este artículo te introduce en las tablas HTML , cubriendo las cosas más basicas como las líneas y las celdas, encabezados, crear celdas de multiples líneas y columnas, y como agrupar todas las celdas en una columna con fines estilisticos.
+
Características avanzadas y accesibilidad en tablas HTML
+
En el segundo artículo de este módulo, veremos algunas características avanzadas de las tablas HTML — como subtítulos/resumenes y agrupar líneas en la cabeza, cuerpo y pie de la tabla — además de realizar tablas accesibles para aquellos usuarios con problemas de visión.
+
+ +

Evaluación

+ +
+
Estructurar datos planetarios
+
En nuestra evaluación, te proporcionamos datos sobre los planetas de nuestro sistemas solar y tu los estructurarás en una tabla HTML.
+
diff --git a/files/es/learn/html/tablas/structuring_planet_data/index.html b/files/es/learn/html/tablas/structuring_planet_data/index.html new file mode 100644 index 0000000000..e9868bb95a --- /dev/null +++ b/files/es/learn/html/tablas/structuring_planet_data/index.html @@ -0,0 +1,72 @@ +--- +title: 'Evaluación: Estructurando datos planetarios' +slug: Learn/HTML/Tablas/Structuring_planet_data +translation_of: Learn/HTML/Tables/Structuring_planet_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.

+ + + + + + + + + + + + +
Requisitos previos:Antes de comenzar esta evaluación deberías de haber leído los artículos de este módulo.
Objetivo:Comprobar si has comprendido las tablas HTML y las características asociadas.
+ +

Punto de incio

+ +

Para comenzar esta evaluación, crea una copia local de blank-template.html, minimal-table.css, y planets-data.txt en una nueva carpeta de tu ordenador.

+ +
+

Nota: Como alternativa, puedes usar una web como JSBin o Thimble para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de <script>/<style>.

+
+ +

Resumen del proyecto

+ +

Estás trabajando en la escuela; tus estudiantes están estudiando los planetas de nuestro sistema solar y quieres proporcionarles una forma sencilla de seguir los datos para buscar hechos sobre los planetas. Una tabla HTML sería ideal — tienes que coger los datos que tienes disponibles y convertirlos en una tabla siguiendo los pasos de abajo.

+ +

La tabla finalizada debería de verse así:

+ +

+ +

También puedes ver el ejemplo aquí (no mires el código fuente — ¡no hagas trampas!)

+ + + +

Pasos para completarlo

+ +

Los siguientes pasos describen lo que necesitas para completar el ejemplo de la tabla. Todos los datos que necesitarás están en el archivo planets-data.txt. Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.

+ +
    +
  1. Abre tu copia de blank-template.html, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.
    2. +
  2. Añade el subtítulo proporcionado a tu tabla.
    3. +
  3. Añade una línea a la cabecera que contenga todos los encabezados de columna.
    4. +
  4. Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.
    5. +
  5. Asegurate de que el contenido esta insertado en las celdas correctas — en los datos del .txt, cada línea del planeta esta al lado de su planeta asociado.
    6. +
  6. Añade atributos para que las líneas y columnas del encabezado no se puedan confundir con las líneas, columnas o grupos de líneas a las que encabezan.
    7. +
  7. Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.
    8. +
+ +

Pistas y consejos

+ + + +

Evaluación

+ +

Si estas siguiendo esta evaluación como parte de un curso organizado, deberías de ser capaz de entregar tu trabajo a tu profesor(a)/mentor para ver la puntuación. Si estas aprendiendo por tu cuenta, puedes obtener la guía de puntuación preguntando en Learning Area Discourse thread o en el canal IRC #mdn en Mozilla IRC. Intenta hacer el ejercicio primero  — ¡haciendo trampas no aprenderás nada!

+ +

{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}

diff --git a/files/es/learn/index.html b/files/es/learn/index.html new file mode 100644 index 0000000000..a032b43e2d --- /dev/null +++ b/files/es/learn/index.html @@ -0,0 +1,135 @@ +--- +title: Aprende sobre desarrollo web +slug: Learn +tags: + - Ayuda + - CSS + - HTML + - Inicio + - Landing + - Principiante + - TopicStub + - Web +translation_of: Learn +--- +

{{LearnSidebar}}

+ +

¡Hola! Bienvenido al área de aprendizaje de MDN. Si quieres aprender a crear tus propias páginas web, sitios o aplicaciones, has venido al lugar indicado.

+ +

El objetivo de esta área de MDN no es llevarte de «principiante» a «experto», sino de «principiante» a «cómodo». A partir de ese punto, deberías poder comenzar a abrirte camino, aprendiendo del {{web.link("/es/", "resto de MDN")}} y de otras fuentes de niveles intermedio hasta avanzado, las cuales asumen que tienes un vasto conocimiento previamente adquirido.

+ +

Si eres del todo un principiante, el desarrollo web puede ser un reto —pero no te preocupes, te llevaremos de la mano y te proveeremos de suficientes detalles para hacerte sentir cómodo y que aprendas los temas apropiadamente—. Para que te sientas como en casa, ya seas un estudiante (por tu cuenta o como parte de un grupo), un maestro buscando material para sus clases, un aficionado o alguien que simplemente desea entender mejor cómo funcionan las tecnologías web.

+ +

Novedades

+ +

El contenido del área de aprendizaje se amplía con regularidad. Se han comenzado a guardar {{web.link("/es/docs/Learn/Release_notes", "notas de publicación del área de aprendizaje")}} para mostrar lo que ha cambiado. ¡Revísalas frecuentemente para mantenerte actualizado!

+ +

Si tienes preguntas sobre temas que te gustaría que se abordaran o te parece que faltan, envía un mensaje en el Foro de discusión, de la comunidad Mozilla (sitio en inglés).

+ +
+

¿Quieres convertirte en un desarrollador de interfaz de usuario web?

+ +

Hemos elaborado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.

+ +

Empieza aquí

+
+ +

Dónde empezar

+ +

Para continuar, piensa cuál de las siguientes afirmaciones te describe mejor y ve a la página de inicio enlazada:

+ + + +
+

Nota: el {{web.link("/es/docs/Glossary", "glosario")}} proporciona definición de términos. Además, si tienes una pregunta específica sobre el desarrollo web, la sección de {{web.link("/es/docs/Learn/Common_questions", "preguntas frecuentes")}} te puede brindar información de gran utilidad.

+
+ +

{{LearnBox({"title":"Entrada aleatoria del glosario"})}}

+ +

Temas tratados

+ +

La siguiente es una lista de todos los temas tratados en el área de aprendizaje de MDN.

+ +
+
{{web.link("/es/docs/Learn/Getting_started_with_the_web", "Primeros pasos en la web")}}
+
Proporciona una introducción práctica al desarrollo de la web para principiantes.
+
{{web.link("/es/docs/Learn/HTML", "HTML")}}
+
HTML es el lenguaje utilizado para estructurar las diferentes partes del contenido y definir su significado o propósito. Este tema enseña el HTML en detalle.
+
{{web.link("/es/docs/Learn/CSS", "CSS")}}
+
CSS es el lenguaje que se utiliza para estilizar y organizar el contenido web, así como para añadir comportamiento tal como la animación. Este tema proporciona una amplia cobertura de CSS.
+
{{web.link("/es/docs/Learn/JavaScript", "JavaScript — Scripts dinámicos de lado del cliente")}}
+
JavaScript es el lenguaje de scripts usado para añadir funcionalidad dinámica a las páginas web. Este tema enseña todo lo esencial necesario para sentirte cómodo con la escritura y comprensión de JavaScript.
+
{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}
+
Los formularios HTML son un potente instrumento para interactuar con los usuarios — frecuentemente se utilizan para reunir datos de los usuarios, o permitirte controlar la interfaz de usuario. En los artículos enumerados a continuación, se cubrirán todos los aspectos esenciales de la estructuración, estilizado e interacción con los formularios web.
+
{{web.link("/es/docs/Learn/Accessibility", "Accesibilidad")}}
+
La accesibilidad es la práctica de hacer que el contenido web esté disponible para tantas personas como sea posible, independientemente de la discapacidad, el dispositivo, la ubicación u otros factores diferenciadores. Este tema te da todo lo que necesitas saber.
+
{{web.link("/es/docs/Learn/Performance", "Rendimiento web — hace que los sitios web sean rápidos y responsivos")}}
+
El rendimiento web es el arte de asegurarte de que las aplicaciones web se descarguen rápidamente y respondan a la interacción del usuario, independientemente del ancho de banda, el tamaño de la pantalla, la red o las capacidades del dispositivo del usuario.
+
{{web.link("/es/docs/Learn/Herramientas_y_pruebas", "Herramientas y pruebas")}}
+
Este tema abarca las herramientas que los desarrolladores utilizan para facilitar su trabajo, como las herramientas de prueba entre navegadores, analizadores de errores de código fuente, formateadores, herramientas de transformación, sistemas de control de versiones, herramientas de despliegue y marcos de desarrollo JavaScript de lado del cliente.
+
{{web.link("/es/docs/Learn/Server-side", "Programación del lado servidor")}}
+
Aunque te concentres en el desarrollo web de lado del cliente, sigue siendo útil saber cómo funcionan los servidores y las características del código del lado del servidor. Este tema proporciona una introducción general a cómo funciona el lado del servidor y tutoriales detallados que muestran cómo construir una aplicación de lado del servidor utilizando dos marcos de desarrollo populares: Django (Python) y Express (Node.js).
+
+ +

Obtener el código de los ejemplos

+ +

Todo el código de los ejemplos propuestos en el área de aprendizaje se encuentra disponible en GitHub. Si quieres, los puedes copiar para tenerlos en tu ordenador, la manera más fácil es descargar un ZIP de la última rama del código maestro.

+ +

Si prefieres copiar el código de una forma más flexible que te permita actualizaciones automáticas, puedes seguir estas instrucciones más complejas:

+ +
    +
  1. Instala Git en tu máquina. Este es el sistema de control de versiones de software con el que trabaja GitHub principalmente.
    2. +
  2. Abre tu consola de comandos (Windows) o terminal (Linux, MacOS X)
    3. +
  3. Para copiar el repositorio del área de aprendizaje a un directorio llamado learning-area en la ubicación actual, en la ventana de tu Terminal o en la línea de comandos, debes usar el siguiente comando. + 
    git clone https://github.com/mdn/learning-area
    +
    4. +
  4. Ahora puedes entrar en el directorio y encontrar todos los archivos que descargaste (posiblemente con el explorador de archivos o el comando cd).
    5. +
+ +

Puedes actualizar el repositorio learning-area con los últimos cambios que se hayan hecho a la versión principal en GitHub con los siguientes pasos:

+ +
    +
  1. En tu intérprete de comandos/terminal, ve dentro del directorio learning-area usando cd. Por ejemplo, si estuvieras en el directorio padre: + + 
    cd learning-area
    +
    2. +
  2. Puedes realizar actualizaciones al repositorio usando el siguiente comando: + 
    git pull
    +
    3. +
+ +

Contáctanos

+ +

Si tienes alguna pregunta o deseas saber hacia dónde ir, Mozilla es una comunidad mundial de entusiastas de la web, incluyendo mentores y profesores, encantados de ayudarte. Ponte en contacto con ellos mediante WebMaker: Conoce y dialoga con los mentores y profesores en el Foro de Discusión en Español. Encuentra Eventos y aprende acerca de la Web con profesionales. Nos gustaría saber cualquier cosa de ti, si bien crees que algo está mal o falta en el sitio, o quieres solicitar nuevos temas de aprendizaje, solicitar ayuda con elementos que no comprendes o cualquier otra pregunta o inquietud que tengas.

+ +

Si estás interesado en ayudar a desarrollar/mejorar el contenido, consulta {{web.link("/es/docs/Learn/Como_Contribuir", "cómo puedes ayudar")}} y, ¡pónte en contacto!; estaremos más que felices de hablar contigo, bien seas un alumno, un maestro, un desarrollador web experimentado o alguien más, interesado en ayudar a mejorar la experiencia de aprendizaje.

+ +

Ve también

+ +
+
Boletín informativo para desarrolladores de Mozilla
+
Nuestro boletín para desarrolladores web, es un excelente recurso para todos los niveles de experiencia.
+
Aprende JavaScript
+
Un excelente recurso para los aspirantes a desarrolladores web — aprende JavaScript en un entorno interactivo, con lecciones breves y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas y el curso completo está disponible por un pequeño pago único.
+
Web desmitificada
+
Una gran serie de videos que explican los fundamentos de la web, dirigida a principiantes absolutos en el desarrollo web. Creada por Jérémie Patonnier.
+
Codecademy
+
Un gran sitio interactivo para aprender lenguajes de programación desde cero.
+
BitDegree
+
Teoría básica de la codificación con un proceso de aprendizaje ludificado. Enfocado principalmente a principiantes.
+
Code.org
+
Teoría y práctica de codificación básica, principalmente dirigida a niños/principiantes.
+
EXLskills
+
Cursos gratuitos y abiertos para aprender habilidades tecnológicas, con tutorías y aprendizaje basado en proyectos.
+
freeCodeCamp.org
+
Sitio interactivo con tutoriales y proyectos para aprender desarrollo web.
+
Mapa de alfabetización web
+
Un marco de desarrollo para la alfabetización web a nivel de entrada y las habilidades del siglo XXI, que también brindan acceso a actividades de enseñanza clasificadas por categoría.
+
Edabit
+
Miles de desafíos interactivos de JavaScript.
+
diff --git a/files/es/learn/javascript/asynchronous/async_await/index.html b/files/es/learn/javascript/asynchronous/async_await/index.html new file mode 100644 index 0000000000..3487b11664 --- /dev/null +++ b/files/es/learn/javascript/asynchronous/async_await/index.html @@ -0,0 +1,411 @@ +--- +title: Haciendo la programación asíncrona más fácil con async y await +slug: Learn/JavaScript/Asynchronous/Async_await +translation_of: Learn/JavaScript/Asynchronous/Async_await +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
+ +

Las incorporaciones más recientes al lenguaje JavaScript, son las funciones async y la palabra clave await, parte de la edición ECMAScript 2017 (véase ECMAScript Next support in Mozilla). Estas características, básicamente, actúan como azúcar sintáctico, haciendo el código asíncrono fácil de escribir y leer más tarde. Hacen que el código asíncrono se parezca más al código síncrono de la vieja escuela, por lo que merece la pena aprenderlo. 

+ +

Este artículo le da lo que usted necesita saber. 

+ + + + + + + + + + + + +
Requisitos previos:Conocimientos básicos de informática, entender de manera razonable los fundamentos de JavaScript y entender el código asíncrono en general y las promesas. 
Objetivo:Entender las promesas y cómo usarlas
+ +

Los fundamentos de async/await

+ +

Hay dos partes a la hora de usar async/await en su código.

+ +

La palabra clave async

+ +

Primero tenemos la palabra clave "async", que se coloca delante de la declaración de una función, para convertirla en función "async"(asíncrona). Una función "async", es una función que sabe cómo esperar la posibilidad de que la palabra clave "await" sea utilizada para invocar código asíncrono. 

+ +

Intenta escribir las siguientes líneas en la consola de tu navegador. 

+ +
function hello() { return "Hello" };
+hello();
+ +

La función returna "Hello" — nada especial, verdad?

+ +

Pero, qué pasa si convertimos esto en una función async? Trata lo siguiente:

+ +
async function hello() { return "Hello" };
+hello();
+ +

Ah!. Ahora cuando invocamos la función, retorna una promesa(promise). Esta es una de las características particulares de las funciones async —  los valores que retornan están garantizados para ser convertidos en promesas.

+ +

También puedes crear una expresión de función async, así:

+ +
let hello = async function() { return "Hello" };
+hello();
+ +

Y puedes utilizar funciones flecha(arrow functions):

+ +
let hello = async () => { return "Hello" };
+ +

Todos estos hacen básicamente lo mismo.

+ +

Para realmente consumir el valor retornado cuando la promesa se cumple, ya que se está devolviendo una promesa, podemos utilizar un bloque then(): 

+ +
hello().then((value) => console.log(value))
+ +

o incluso sólo un shorthand como

+ +
hello().then(console.log)
+ +

Como vimos en el último artículo.

+ +

La palabra clave async se añade a las funciones para decirles que devuelvan una promesa en lugar de devolver directamente el valor. Adicionamente, esto permite que las funciones síncronas eviten cualquier potencial sobrecarga que viene con correr con el soporte por usar async. Cuando una función es declarada async con sólo añadir la manipulación necesaria, el motor de JavaScript puede optimizar su programa por usted. Dulce!

+ +

So the async keyword is added to functions to tell them to return a promise rather than directly returning the value. In addition, this lets synchronous functions avoid any potential overhead that comes with running with support for using await. By only adding the necessary handling when the function is declared async, the JavaScript engine can optimize your program for you. Sweet!

+ +

La palabra clave await

+ +

La ventaja real de las funciones asincronas aparecen cuando las combinas con la palabra clave await — en efecto, await solo trabaja dentro de las funciones async. Esta puede ser puesta frente a cualquier funcion async basada en una promesa para pausar tu codigo en esa linea hasta que se cumpla la promesa, entonces retorna el valor resultante. Mientras tanto, otro código que puede estar esperando una oportunidad para ejecutarse, puede hacerlo.

+ +

Puedes usar await cuando llames cualquier funcion que retorna una Promesa, incluyendo funciones web API.

+ +

Este es un ejemplo trivial:

+ +
async function hello() {
+  return greeting = await Promise.resolve("Hello");
+};
+
+hello().then(alert);
+ +

Por supuesto, el ejemplo anterior no es muy util, aunque este sirve para ilustrar la syntaxis. Vamos a ver un ejemplo real.

+ +

Reescribiendo el código de las promesas con async/await

+ +

Let's look back at a simple fetch example that we saw in the previous article:

+ +
fetch('coffee.jpg')
+.then(response => {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return response.blob();
+  }
+})
+.then(myBlob => {
+  let objectURL = URL.createObjectURL(myBlob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch(e => {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});
+ +

By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    let myBlob = await response.blob();
+
+    let objectURL = URL.createObjectURL(myBlob);
+    let image = document.createElement('img');
+    image.src = objectURL;
+    document.body.appendChild(image);
+  }
+}
+
+myFetch()
+.catch(e => {
+  console.log('There has been a problem with your fetch operation: ' + e.message);
+});
+ +

It makes code much simpler and easier to understand — no more .then() blocks everywhere!

+ +

Since an async keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return await response.blob();
+  }
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+}).catch(e => console.log(e));
+ +

You can try typing in the example yourself, or running our live example (see also the source code).

+ +

But how does it work?

+ +

You'll note that we've wrapped the code inside a function, and we've included the async keyword before the function keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, await only works inside of async functions.

+ +

Inside the myFetch() function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a .then() block on to the end of each promise-based method, you just need to add an await keyword before the method call, and then assign the result to a variable. The await keyword causes the JavaScript runtime to pause your code on this line, allowing other code to execute in the meantime, until the async function call has returned its result. Once that's complete, your code continues to execute starting on the next line. For example:

+ +
let response = await fetch('coffee.jpg');
+ +

The response returned by the fulfilled fetch() promise is assigned to the response variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a Blob out of it. This line also invokes an async promise-based method, so we use await here as well. When the result of operation returns, we return it out of the myFetch() function.

+ +

This means that when we call the myFetch() function, it returns a promise, so we can chain a .then() onto the end of it inside which we handle displaying the blob onscreen.

+ +

You are probably already thinking "this is really cool!", and you are right — fewer .then() blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.

+ +

Adding error handling

+ +

And if you want to add error handling, you've got a couple of options.

+ +

You can use a synchronous try...catch structure with async/await. This example expands on the first version of the code we showed above:

+ +
async function myFetch() {
+  try {
+    let response = await fetch('coffee.jpg');
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    } else {
+      let myBlob = await response.blob();
+      let objectURL = URL.createObjectURL(myBlob);
+      let image = document.createElement('img');
+      image.src = objectURL;
+      document.body.appendChild(image);
+    }
+  } catch(e) {
+    console.log(e);
+  }
+}
+
+myFetch();
+ +

The catch() {} block is passed an error object, which we've called e; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.

+ +

If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a .catch() block onto the end of the .then() call, like this:

+ +
async function myFetch() {
+  let response = await fetch('coffee.jpg');
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    return await response.blob();
+  }
+}
+
+myFetch().then((blob) => {
+  let objectURL = URL.createObjectURL(blob);
+  let image = document.createElement('img');
+  image.src = objectURL;
+  document.body.appendChild(image);
+})
+.catch((e) =>
+  console.log(e)
+);
+ +

This is because the .catch() block will catch errors occurring in both the async function call and the promise chain. If you used the try/catch block here, you might still get unhandled errors in the myFetch() function when it's called.

+ +

You can find both of these examples on GitHub:

+ + + +

Awaiting a Promise.all()

+ +

async/await is built on top of promises, so it's compatible with all the features offered by promises. This includes Promise.all() — you can quite happily await a Promise.all() call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to an example we saw in our previous article. Keep it open in a separate tab so you can compare and contrast with the new version shown below.

+ +

Converting this to async/await (see live demo and source code), this now looks like so:

+ +
async function fetchAndDecode(url, type) {
+  let response = await fetch(url);
+
+  let content;
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  } else {
+    if(type === 'blob') {
+      content = await response.blob();
+    } else if(type === 'text') {
+      content = await response.text();
+    }
+
+    return content;
+  }
+
+}
+
+async function displayContent() {
+  let coffee = fetchAndDecode('coffee.jpg', 'blob');
+  let tea = fetchAndDecode('tea.jpg', 'blob');
+  let description = fetchAndDecode('description.txt', 'text');
+
+  let values = await Promise.all([coffee, tea, description]);
+
+  let objectURL1 = URL.createObjectURL(values[0]);
+  let objectURL2 = URL.createObjectURL(values[1]);
+  let descText = values[2];
+
+  let image1 = document.createElement('img');
+  let image2 = document.createElement('img');
+  image1.src = objectURL1;
+  image2.src = objectURL2;
+  document.body.appendChild(image1);
+  document.body.appendChild(image2);
+
+  let para = document.createElement('p');
+  para.textContent = descText;
+  document.body.appendChild(para);
+}
+
+displayContent()
+.catch((e) =>
+  console.log(e)
+);
+ +

You'll see that the fetchAndDecode() function has been converted easily into an async function with just a few changes. See the Promise.all() line:

+ +
let values = await Promise.all([coffee, tea, description]);
+ +

By using await here we are able to get all the results of the three promises returned into the values array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, displayContent(), and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the .then() block provides a nice, useful simplification, leaving us with a much more readable program.

+ +

For error handling, we've included a .catch() block on our displayContent() call; this will handle errors ocurring in both functions.

+ +
+

Note: It is also possible to use a sync finally block within an async function, in place of a .finally() async block, to show a final report on how the operation went — you can see this in action in our live example (see also the source code).

+
+ +

The downsides of async/await

+ +

Async/await is really useful to know about, but there are a couple of downsides to consider.

+ +

Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The await keyword blocks execution of all the code that follows until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but your own code is blocked.

+ +

This means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each await will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.

+ +

There is a pattern that can mitigate this problem — setting off all the promise processes by storing the Promise objects in variables, and then awaiting them all afterwards. Let's have a look at some examples that prove the concept.

+ +

We've got two examples available — slow-async-await.html (see source code) and fast-async-await.html (see source code). Both of them start off with a custom promise function that fakes an async process with a setTimeout() call:

+ +
function timeoutPromise(interval) {
+  return new Promise((resolve, reject) => {
+    setTimeout(function(){
+      resolve("done");
+    }, interval);
+  });
+};
+ +

Then each one includes a timeTest() async function that awaits three timeoutPromise() calls:

+ +
async function timeTest() {
+  ...
+}
+ +

Each one ends by recording a start time, seeing how long the timeTest() promise takes to fulfill, then recording an end time and reporting how long the operation took in total:

+ +
let startTime = Date.now();
+timeTest().then(() => {
+  let finishTime = Date.now();
+  let timeTaken = finishTime - startTime;
+  alert("Time taken in milliseconds: " + timeTaken);
+})
+ +

It is the timeTest() function that differs in each case.

+ +

In the slow-async-await.html example, timeTest() looks like this:

+ +
async function timeTest() {
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+  await timeoutPromise(3000);
+}
+ +

Here we simply await all three timeoutPromise() calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.

+ +

In the fast-async-await.html example, timeTest() looks like this:

+ +
async function timeTest() {
+  const timeoutPromise1 = timeoutPromise(3000);
+  const timeoutPromise2 = timeoutPromise(3000);
+  const timeoutPromise3 = timeoutPromise(3000);
+
+  await timeoutPromise1;
+  await timeoutPromise2;
+  await timeoutPromise3;
+}
+ +

Here we store the three Promise objects in variables, which has the effect of setting off their associated processes all running simultaneously.

+ +

Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!

+ +

You'll have to test your code carefully, and bear this in mind if performance starts to suffer.

+ +

Another minor inconvenience is that you have to wrap your awaited promises inside an async function.

+ +

Async/await class methods

+ +

As a final note before we move on, you can even add async in front of class/object methods to make them return promises, and await promises inside them. Take a look at the ES class code we saw in our object-oriented JavaScript article, and then look at our modified version with an async method:

+ +
class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  async greeting() {
+    return await Promise.resolve(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+ +

The first class method could now be used something like this:

+ +
han.greeting().then(console.log);
+ +

Browser support

+ +

One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.

+ +

If you want to use async/await but are concerned about older browser support, you could consider using the BabelJS library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.

+ +

Conclusion

+ +

And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.

+ +

{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}

+ +

In this module

+ + diff --git a/files/es/learn/javascript/asynchronous/concepts/index.html b/files/es/learn/javascript/asynchronous/concepts/index.html new file mode 100644 index 0000000000..df3feb2117 --- /dev/null +++ b/files/es/learn/javascript/asynchronous/concepts/index.html @@ -0,0 +1,162 @@ +--- +title: General asynchronous programming concepts +slug: Learn/JavaScript/Asynchronous/Concepts +tags: + - Aprender + - Hilos + - JavaScript + - Promesas + - Threads + - bloques +translation_of: Learn/JavaScript/Asynchronous/Concepts +--- +
{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Asynchronous/Introducing", "Learn/JavaScript/Asynchronous")}}
+ +

En este artículo, repasaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar con los demás artículos del módulo.

+ + + + + + + + + + + + +
Pre-requisitos:Literatura básica de computadora, un razonable entendimiento de los fundamentos de JavaScript.
Objetivo:Entender los conceptos básicos detrás de la programación asincrónica, y cómo se manifiesta en los exploradores web y JavaScript.
+ +

¿Asincrónico?

+ +

Normalmente, el código de un programa determinado se ejecuta directamente, y solo sucede una cosa a la vez. Si una función se basa en el resultado de otra función, tiene que esperar a que la otra función termine y regrese, y hasta que eso suceda, todo el programa se detiene esencialmente desde la perspectiva del usuario.

+ +

Los usuarios de Mac, por ejemplo, a veces experimentan esto como un cursor giratorio multicolor (o "beachball" - "bola de playa" - como es llamado frecuentemente). Este cursor es la manera que tiene el sistema operativo de decir "el actual programa que está usando tiene que parar y esperar que algo termine, y está tomando tanto tiempo que me preocupa que pienses qué está sucediendo."

+ +

Multi-colored macOS beachball busy spinner

+ +

Esto es una experiencia frustrante y no es un buen uso del poder de procesamiento de una computadora - especialmente en una era donde las computadoras tienen múltiples procesadores disponibles. No tiene sentido sentarse allí a esperar algo cuando podrías dejar que la otra tarea se ejecute en otro procesador y le notifique cuando termine. Mientras tanto, esto le permitiría terminar otros trabajos, lo cual es la base de la programación asincrónica. Depende del entorno de programación que esté usando (exploradores web, en caso de desarrollo web) proveer de APIs que le permitan ejecutar dichas tareas de manera asincrónica.

+ +

Código de bloqueo (Blocking)

+ +

Las técnicas asincrónicas son muy útiles, particularmente en programación web. Cuando una app web se ejeucta en el navegador y ejecuta un gran bloque de código sin retornar el control al navegador, este mismo puede parecer que se congela. Esto es llamado blocking; el navegador es bloqueado para que el usuario pueda seguir interactuando y realizando otras tareas hasta que la app web retorne el control sobre el procesador.

+ +

Vamos a ver algunos ejemplos que muestren lo que significa blocking.

+ +

En nuestro ejemplo simple-sync.html (véalo en vivo), agregamos un detector del evento click ("click event listener") a un botón con el fin de que cuando sea clickeado, ejecute una operación de un gran consumo de tiempo (calcula 10 millones de fechas y luego muestra la última en la consola) y luego agrega un párrafo al DOM:

+ +
const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
+  let myDate;
+  for(let i = 0; i < 10000000; i++) {
+    let date = new Date();
+    myDate = date
+  }
+
+  console.log(myDate);
+
+  let pElem = document.createElement('p');
+  pElem.textContent = 'This is a newly-added paragraph.';
+  document.body.appendChild(pElem);
+});
+ +

Cuando ejecute el ejemplo, abra su consola de JavaScript y haga click en el botón — notará que el párrafo no aparece hasta que las fechas hayan sido calculadas en su totalidad y el mensaje en la consola haya sido logueado. EL código se ejecuta en el orden en que aparece (de arriba hacia abajo), y la última operación no se ejecuta hasta que la anterior haya terminado.

+ +
+

Nota: El ejemplo anterior es poco realista. ¡Nunca se van a calcular 10 millones de fechas en una app web real! Sin embargo, sirve para dar una idea básica.

+
+ +

En nuestro segundo ejemplo, simple-sync-ui-blocking.html (véalo en vivo), se simula algo un poco más realista con el que se puede encontrar en una página real. Se bloquea la interacción del usuario con la carga ("rendering") de la UI. En este ejemplo, se tienen dos botones:

+ + + +
function expensiveOperation() {
+  for(let i = 0; i < 1000000; i++) {
+    ctx.fillStyle = 'rgba(0,0,255, 0.2)';
+    ctx.beginPath();
+    ctx.arc(random(0, canvas.width), random(0, canvas.height), 10, degToRad(0), degToRad(360), false);
+    ctx.fill()
+  }
+}
+
+fillBtn.addEventListener('click', expensiveOperation);
+
+alertBtn.addEventListener('click', () =>
+  alert('You clicked me!')
+);
+ +

Si se clickea el primer botón y rápidamente se clickea el segundo, se verá que la alerta no aparece hasta que los círculos hayan terminado de representarse. La primer operación blockea a la segunda hasta que esta haya terminado de ejecutarse.

+ +
+

Nota: OK, nuestro caso es feo y estamos fingiendo el efecto de bloqueo, pero es un problema común con el que los desarrolladores de aplicaciones reales batallan todo el tiempo.

+
+ +

¿Por qué es esto? La respuesta es porque JavaScript, en general, es de "un solo hilo" (single-threaded). En este punto, se tiene que introduce el concepto de "hilos" (threads).

+ +

Threads

+ +

Un hilo (thread) es básicamente un proceso simple que un programa puede usar para completar tareas ("tasks"). Cada hilo solo puede realizar una tarea a la vez:

+ +
Task A --> Task B --> Task C
+ +

Cada tarea se va a ejecutar secuencialmente; una tarea tiene que completarse antes de que la próxima empiece.

+ +

Como se dijo previamente, muchas computadores actualmente tienen múltiples procesadores, por lo que pueden realizar múltiples tareas a la vez. Los lenguajes de programación que pueden manejar múltiples hilos pueden usar múltiples procesadores para completar múltiples tareas en simultáneo. 

+ +
Thread 1: Task A --> Task B
+Thread 2: Task C --> Task D
+ +

JavaScript es single-threaded

+ +

JavScript es tradicionalmente single-threaded. Aún con múltiples procesadores, solo se puede ejecutar tareas en un solo hilo, llamado el hilo principal (main thread). El ejemplo de arriba se ejecuta de la siguiente manera:

+ +
Main thread: Render circles to canvas --> Display alert()
+ +

Después de un tiempo, JavaScript ganó algunas herramientas que ayudaron con dichos problemas. Web workers permiten que se envíe parte del procesamiento de JavaScript a un hilo separado, llamado worker con el fin de que puedan ejecutar múltiples pedazos de JavaScript en simultáneo. Generalmente se usará un worker para ejectuar procesos de mucho consumo del hilo principal (main thread) con el fin de que no se bloquee la interacción del usuario.

+ +
  Main thread: Task A --> Task C
+Worker thread: Expensive task B
+ +

Con esto en mente, miremos el ejemplo simple-sync-worker.html (véalo ejecutándose en vivo) nuevamente con la consola de JavaScript del navegador abierta. Esto es una re-escritura del ejemplo anterior que calculaba 10 millones de fechas en hilos worker separados. Ahora si se clickea el botón, el navegador tiene permitido mostrar el párrafo antes de que las fechas haya terminado de calcularse. La primer operación ya no bloquea a la segunda.

+ +

Código asincrónico

+ +

Los web workers son muy útiles, pero tienen limitaciones. La mayor es que no pueden acceder al {{Glossary("DOM")}} — no se puede logar que un worker modifique directamente algo de la UI. No se puede representar 1 millón de círculos azules en un worker; básicamente solo puede hacer el cálculo numérico.

+ +

El segundo problema es que a pesar de que el código se ejecuta en un worker no es bloqueador, es simplemente sincrónico. Esto se convierte en un problema cuando una función depender en los resultados de múltiples procesos previos para funcionar. Considere el siguiente diagrama de hilos:

+ +
Main thread: Task A --> Task B
+ +

En este caso, digamos que la Tarea A (Task A) está haciendo algo como buscando una imagen de un servidor y la Tarea B (Task B) luego hace algo con la imagen, como aplicarle un filtro. Si se ejecuta la Tarea A y luego inmediatamente se trata de ejecutar la Tarea B, se obtendrá un error, porque la imagen todavía no estará disponible.

+ +
  Main thread: Task A --> Task B --> |Task D|
+Worker thread: Task C -----------> |      |
+ +

En este caso, digamos que la Tarea D hace uso de los resultados de la Tarea B y la Tarea C. Se se puede garantizar que esos resultados estarán disponibles al mismo tiempo, entonces tal vez estemos OK, pero es poco probable. Si la Tarea D trata de ejecutarse cuando uno de sus inputs no está disponible, disparará un error.

+ +

Para arreglar dichos problemas, los navegadores nos permiten ejecutar ciertas operaciones asincrónicamente. Características como las Promises (Promesas) permiten establecer la ejecución de una operación (por ejemplo, buscar una imagen desde un servidor), y luego esperar hasta que el resultado sea retornado antes de ejecutar otra operación. 

+ +
Main thread: Task A                   Task B
+    Promise:      |__async operation__|
+ +

Como la operación está sucediendo en otro lugar, el hilo principal no está bloqueado mientras la operación asincrónica está siendo procesada.

+ +

Vamos a empezar a ver cómo se puede escribir código asincrónico en el próximo artículo. Cosas emocionantes, ¿eh? ¡Siga leyendo!

+ +

Conclusión

+ +

El diseño del software moderno gira cada más entorno a la programación asincrónica, para permiterle a los programas hacer más de una cosa a la vez. A medida que use nuevas y más poderosas APIs, encontrará más casos donde la única forma de realizar las cosas es asincrónicamente. Era muy difícil escribir el código asincrónico. Todavía lleva tiempo acostumbrarse, pero se ha vuelto mucho más sencillo. En el resto de este módulo, exploraremos porqué el código asincrónico importa y cómo diseñar código que evite algunos de los problemas que hemos descrito en este artículo.

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/asynchronous/index.html b/files/es/learn/javascript/asynchronous/index.html new file mode 100644 index 0000000000..b2fb697803 --- /dev/null +++ b/files/es/learn/javascript/asynchronous/index.html @@ -0,0 +1,43 @@ +--- +title: JavaScript asíncrono +slug: Learn/JavaScript/Asynchronous +translation_of: Learn/JavaScript/Asynchronous +--- +
{{LearnSidebar}}
+ +

En este módulo echamos un vistazo a {{Glossary("JavaScript")}} {{Glossary("asíncrono")}}, por qué es importante y cómo se puede utilizar para manejar eficazmente las posibles operaciones de bloqueo, como recuperar recursos desde un servidor

+ +

Prerrequisitos

+ +

JavaScript asíncrono es un tema bastante avanzado, y se recomienda trabajar con los primeros pasos de JavaScript y los módulos de bloques de construcción de JavaScript antes de intentarlo.

+ +

Si no está familiarizado con el concepto de programación asincrónica, definitivamente debe comenzar con el artículo Conceptos generales de programación asincrónica en este módulo. Si es así, probablemente pueda pasar al módulo Introducción a JavaScript asíncrono.

+ +
+

Nota: Si está trabajando en una computadora / tableta / otro dispositivo donde no tiene la capacidad de crear sus propios archivos, puede probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como JSBin o Glitch

+
+ +

Guias

+ +
+
Conceptos generales de programación asincrónica
+
+

En este artículo revisaremos una serie de conceptos importantes relacionados con la programación asincrónica y cómo se ve esto en los navegadores web y JavaScript. Debe comprender estos conceptos antes de trabajar en los otros artículos del módulo.

+
+
Introduciendo JavaScript asincrónico
+
En este artículo recapitulamos brevemente los problemas asociados con JavaScript síncrono, y echamos un primer vistazo a algunas de las diferentes técnicas de JavaScript asíncrono que encontrarás, mostrando cómo pueden ayudarnos a resolver tales problemas.
+
JavaScript asíncrono cooperativo: tiempos de espera e intervalos
+
Aquí observamos los métodos tradicionales que JavaScript tiene disponibles para ejecutar código de forma asíncrona después de que haya transcurrido un período de tiempo establecido, o en un intervalo regular (por ejemplo, un número establecido de veces por segundo), hablemos sobre para qué son útiles y observe su Problemas inherentes.
+
Manejo de operaciones asincrónas con Promises
+
Las promesas son una característica relativamente nueva de JavaScript que le permite diferir más acciones hasta que la acción anterior se haya completado o responder en caso de tener una falla o error durante su ejecución. Esto es realmente útil para configurar una secuencia de operaciones para que funcione correctamente. Este artículo te muestra cómo funcionan las promesas, dónde las verá en uso en una WebAPI y cómo escribir las tuyas de la manera adecuada.
+
Hacer la programación asincróna más fácil con async y await 
+
Las promesas pueden ser algo complejas de configurar y comprender, por lo que los navegadores modernos han implementado funciones async y el operador de await. El primero permite que las funciones estándar se comporten implícitamente de forma asíncrona con las promesas, mientras que el segundo puede usarse dentro de las funciones async para esperar las promesas antes de que la función continúe. Esto hace que las promesas de encadenamiento sean más simples y fáciles de leer.
+
Elegir el enfoque correcto
+
Para finalizar este módulo, consideraremos las diferentes técnicas y características de codificación que hemos discutido a lo largo de todo, y veremos cuáles deberias usar cuando, con recomendaciones y recordatorios de dificultades comunes, sea lo más apropiado.
+
+ +

Ver también

+ + diff --git a/files/es/learn/javascript/building_blocks/bucle_codigo/index.html b/files/es/learn/javascript/building_blocks/bucle_codigo/index.html new file mode 100644 index 0000000000..e26509afc5 --- /dev/null +++ b/files/es/learn/javascript/building_blocks/bucle_codigo/index.html @@ -0,0 +1,923 @@ +--- +title: Bucles +slug: Learn/JavaScript/Building_blocks/Bucle_codigo +translation_of: Learn/JavaScript/Building_blocks/Looping_code +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
+ +

Los lenguajes de programación son muy útiles para completar rápidamente tareas repetitivas, desde múltimples cálculos básicos hasta cualquier otra situación en donde tengas un montón de elementos de trabajo similares que completar. Aquí vamos a ver las estructuras de bucles disponibles en JavaScript que pueden manejar tales necesidades.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de computación, entendimiento básico de HTML y CSS, JavaScript first steps.
Objetivo:Entender cómo usar bucles en JavaScript.
+ +

Mantente en el Bucle

+ +

Bucles, bucles, bucles. Además de ser conocidos como un cereal de desayuno popular, montañas rusas y producción músical, también son un concepto muy importante en programación. Los bucles de programación están relacionados con todo lo referente a hacer una misma cosa una y otra vez — que se denomina como iteración en el idioma de programación.

+ +

Consideremos el caso de un agricultor que se asegura de tener suficiente comida para alimentar a su familia durante la semana. Podría usar el siguiente bucle para lograr esto:

+ +


+

+ +

Un bucle cuenta con una o más de las siguientes características:

+ + + +

En {{glossary("pseudocódigo")}},esto se vería como sigue:

+ +
bucle(comida = 0; comidaNecesaria = 10) {
+  if (comida = comidaNecesaria) {
+    salida bucle;
+    // Tenemos suficiente comida; vamonos para casa
+  } else {
+    comida += 2; // Pasar una hora recogiendo 2 más de comida
+    // Comenzar el bucle de nuevo
+  }
+}
+ +

Así que la cantidad necesaria de comida se establece en 10, y la cantidad incial del granjero en 0. En cada iteración del bucle comprobamos si la cantidad de comida del granjero es mayor o igual a la cantidad que necesita. Si lo es, podemos salir del bucle. Si no, el granjero se pasará una hora más recogiendo dos porciones de comida, y el bucle arrancará de nuevo.

+ +

¿Por qué molestarse?

+ +

En este punto, probablemente entiendas los conceptos de alto nivel que hay detrás de los bucles, pero probablemente estés pensando "OK, fantástico, pero ¿cómo me ayuda esto a escribir un mejor codigo JavaScript?". Como dijimos antes, los bucles tienen que ver con hacer lo mismo una y otra vez, lo cual es bueno para completar rápidamente tareas repetitivas.

+ +

Muchas veces, el código será ligeramente diferente en cada iteracción sucesiva del bucle, lo que significa que puedes completar una carga completa de tareas que son similares, pero ligeramente diferentes — si tienes muchos calculos diferentes que hacer, quieres hacer cada uno de ellos, ¡no el mismo una y otra vez!

+ +

Vamos a ver un ejemplo para ilustrar perfectamente por qué los bucles son tan útiles. Digamos que queremos dibujar 100 círculos aleatorios en un elemento {{htmlelement("canvas")}} (presiona el botón Update para ejecutar el ejemplo una y otra vez y ver diferentes configuraciones aleatorias):

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

No tienes que entender todo el código por ahora, pero vamos a echar un vistazo a la parte de código que dibuja los 100 círculos:

+ +
for (var i = 0; i < 100; i++) {
+  ctx.beginPath();
+  ctx.fillStyle = 'rgba(255,0,0,0.5)';
+  ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

Debes quedarte con la idea básica.  — utilizamos un bucle para ejecutar 100 iteracciones de este código, cada una de las cuales dibuja un círculo en una posición aleatoria de la página. La cantidad de código necesario sería el mismo si dibujáramos 100, 1000, o 10,000 círculos. Solo necesitamos cambiar un número.

+ +

Si no usáramos un bucle aquí, tendríamos que repetir el siguiente código por cada círculo que quisiéramos dibujar:

+ +
ctx.beginPath();
+ctx.fillStyle = 'rgba(255,0,0,0.5)';
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ctx.fill();
+ +

Esto sería muy aburrido y difícil de mantener de forma rápida. Los bucles son realmente lo mejor.

+ +

El bucle estándar for

+ +

Exploremos algunos constructores de bucles específicos. El primero, que usarás la mayoría de las veces, es el bucle for - este tiene la siguiente sintaxis:

+ +
for (inicializador; condición de salida; expresión final) {
+  // código a ejecutar
+}
+ +

Aquí tenemos:

+ +
    +
  1. La palabra reservada for, seguida por algunos paréntesis.
    2. +
  2. Dentro de los paréntesis tenemos tres ítems, separados por punto y coma (;): +
      +
    1. Un inicializador - Este es usualmente una variable con un número asignado, que aumenta el número de veces que el bucle ha sijo ejecutado. También se le llama contador o variable de conteo.
      2. +
    2. Una condición de salida - como se mencionó previamente, ésta define cuando el bucle debería detenerse. Generalmente es una expresión que contiene un operador de comparación, una prueba para verificar ue la condición de término o salida ha sido cumplida.
      3. +
    3. Una expresión final - que es siempre evaluada o ejecutada cada vez que el bucle ha completado una iteración. Usualmente sirve para modificar al contador (incrementando su valor o algunas veces disminuyendolo), para aproximarse a la condición de salida.
      4. +
    +
    3. +
  3. Algunos corchetes curvos que contienen un bloque de código - este código se ejecutará cada vez que se repita el bucle.
    4. +
+ +

Observa un ejemplo real para poder entender esto más claramente.

+ +
var cats = ['Bill', 'Jeff', 'Pete', 'Biggles', 'Jasmin'];
+var info = 'My cats are called ';
+var para = document.querySelector('p');
+
+for (var i = 0; i < cats.length; i++) {
+  info += cats[i] + ', ';
+}
+
+para.textContent = info;
+ +

Esto nos da el siguiente resultado:

+ + + +

{{ EmbedLiveSample('Hidden_code_2', '100%', 60, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: Puedes encontrar este ejemplo de código en GitHub también (además puedes verlo ejecutar en vivo).

+
+ +

Esto muestra un bucle siendo usado para iterar sobre los elementos de un arreglo (matriz), y hacer algo con cada uno de ellos - un patrón muy común en JavaScript. Aquí:

+ +
    +
  1. El iterador, i, inicia en 0 (var i = 0).
    2. +
  2. Se le ha dicho que debe ejecutarse hasta que no sea menor que la longitud del arreglo cats. Esto es importante  - la condición de salida muestra la condicion bajo la cual el bucle seguirá iterando. Así, en este caso, mientras i < cats.length sea verdadero, el bucle seguirá ejecutándose.
    3. +
  3. Dentro del bucle, concatenamos el elemento del bucle actual (cats[i] es cats[lo que sea i en ese momento]) junto con una coma y un espacio, al final de la variable info. Así: +
      +
    1. Durante la primera ejecución,  i = 0, así cats[0] + ', ' se concatenará con la información ("Bill, ").
      2. +
    2. Durante la segunda ejecución, i = 1, así cats[1] + ', ' agregará el siguiente nombre ("Jeff, ").
      3. +
    3. Y así sucesivamente. Después de cada vez que se ejecute el bucle, se incrementará en 1 el valod de i (i++), entonces el proceso comenzará de nuevo.
      4. +
    +
    4. +
  4. Cuando i sea igual a cats.length, el bucle se detendrá, y el navegador se moverá al siguiente segmento de código bajo el bucle.
    5. +
+ +
+

Nota: Hemos programado la condición de salidad como i < cats.length, y no como i <= cats.length, porque los computadores cuentan desde 0, no 1 - inicializamos la variable i en 0, para llegar a i = 4 (el índice del último elemento del arreglo). cats.length responde 5, ya que existen 5 elementos en el arreglo, pero no queremos que i = 5, dado que respondería undefined para el último elemento (no existe un elemento en el arreglo con un índice 5). for the last item (there is no array item with an index of 5). Por ello, queremos llegar a 1 menos que cats.length (i <), que no es lo mismo que cats.length (i <=).

+
+ +
+

Nota: Un error común con la condición de salida es utilizar el comparador "igual a" (===) en vez de "menor o igual a" (<=). Si queremos que nuestro bucle se ejecute hasta que  i = 5, la condición de salida debería ser i <= cats.length. Si la declaramos i === cats.length, el bucle no debería ejecutarse , porque i no es igual a 5 en la primera iteración del bucle, por lo que debería detenerse inmediatamente.

+
+ +

Un pequeño problema que se presenta es que la frase de salida final no está muy bien formada:

+ +
+

My cats are called Bill, Jeff, Pete, Biggles, Jasmin,

+
+ +

Idealmente querríamos cambiar la concatenacion al final de la última iteracion del bucle, así no tendríamos una coma en el final de la frase. Bueno, no hay problema - podemos insertar un condicional dentro de nuestro bucle para solucionar este caso especial:

+ +
for (var i = 0; i < cats.length; i++) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+}
+ +
+

Note: You can find this example code on GitHub too (also see it running live).

+
+ +
+

Importante: Con for - como con todos los bucles - debes estar seguro de que el inicializador es repetido hasta que eventualemtne alcance la condición de salida. Si no, el bucle seguirá repitiéndose indefinidamente, y puede que el navegador lo fuerce a detenerse o se interrumpa. Esto se denomina bucle infinito.

+
+ +

Salir de un bucle con break

+ +

Si deseas salir de un bucle antes de que se hayan completado todas las iteraciones, puedes usar la declaración break. Ya la vimos en el artículo previo cuando revisamos la declaración switch - cuando un caso en una declaración switch coincide con la expresión de entrada, la declaración break inmediatamente sale de la declaración switch y avanza al código que se encuentra después.

+ +

Ocurre lo mismo con los bucles - una declaración break saldrá inmediatamente del bucle y hará que el navegador siga con el código que sigue después.

+ +

Digamos que queremos buscar a través de un arreglo de contactos y números telefónicos y retornar sólo el número que queríamos encontrar. primero, un simple HTML -  un {{htmlelement("input")}} de texto que nos permita ingresar un nombre para buscar, un elemento {{htmlelement("button")}} para enviar la búsqueda, y un elemento {{htmlelement("p")}} para mostrar el resultado:

+ +
<label for="search">Search by contact name: </label>
+<input id="search" type="text">
+<button>Search</button>
+
+<p></p>
+ +

Ahora en el JavaScript:

+ +
var contacts = ['Chris:2232322', 'Sarah:3453456', 'Bill:7654322', 'Mary:9998769', 'Dianne:9384975'];
+var para = document.querySelector('p');
+var input = document.querySelector('input');
+var btn = document.querySelector('button');
+
+btn.addEventListener('click', function() {
+  var searchName = input.value;
+  input.value = '';
+  input.focus();
+  for (var i = 0; i < contacts.length; i++) {
+    var splitContact = contacts[i].split(':');
+    if (splitContact[0] === searchName) {
+      para.textContent = splitContact[0] + '\'s number is ' + splitContact[1] + '.';
+      break;
+    } else {
+      para.textContent = 'Contact not found.';
+    }
+  }
+});
+ + + +

{{ EmbedLiveSample('Hidden_code_3', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. First of all we have some variable definitions — we have an array of contact information, with each item being a string containing a name and phone number separated by a colon.
    2. +
  2. Next, we attach an event listener to the button (btn), so that when it is pressed, some code is run to perform the search and return the results.
    3. +
  3. We store the value entered into the text input in a variable called searchName, before then emptying the text input and focusing it again, ready for the next search.
    4. +
  4. Now onto the interesting part, the for loop: +
      +
    1. We start the counter at 0, run the loop until the counter is no longer less than contacts.length, and increment i by 1 after each iteration of the loop.
      2. +
    2. Inside the loop we first split the current contact (contacts[i]) at the colon character, and store the resulting two values in an array called splitContact.
      3. +
    3. We then use a conditional statement to test whether splitContact[0] (the contact's name) is equal to the inputted searchName. If it is, we enter a string into the paragraph to report what the contact's number is, and use break to end the loop.
      4. +
    +
    5. +
  5. If the contact name does not match the entered search, the paragraph text is set to "Contact not found.", and the loop continues iterating.
    6. +
+ +
+

Note: You can view the full source code on GitHub too (also see it running live).

+
+ +

Skipping iterations with continue

+ +

The continue statement works in a similar manner to break, but instead of breaking out of the loop entirely, it skips to the next iteration of the loop. Let's look at another example that takes a number as an input, and returns only the numbers that are squares of integers (whole numbers).

+ +

The HTML is basically the same as the last example — a simple text input, and a paragraph for output. The JavaScript is mostly the same too, although the loop itself is a bit different:

+ +
var num = input.value;
+
+for (var i = 1; i <= num; i++) {
+  var sqRoot = Math.sqrt(i);
+  if (Math.floor(sqRoot) !== sqRoot) {
+    continue;
+  }
+
+  para.textContent += i + ' ';
+}
+ +

Here's the output:

+ + + +

{{ EmbedLiveSample('Hidden_code_4', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. In this case, the input should be a number (num). The for loop is given a counter starting at 1 (as we are not interested in 0 in this case), an exit condition that says the loop will stop when the counter becomes bigger than the input num, and an iterator that adds 1 to the counter each time.
    2. +
  2. Inside the loop, we find the square root of each number using Math.sqrt(i), then check whether the square root is an integer by testing whether it is the same as itself when it has been rounded down to the nearest integer (this is what Math.floor() does to the number it is passed).
    3. +
  3. If the square root and the rounded down square root do not equal one another (!==), it means that the square root is not an integer, so we are not interested in it. In such a case, we use the continue statement to skip on to the next loop iteration without recording the number anywhere.
    4. +
  4. If the square root IS an integer, we skip past the if block entirely so the continue statement is not executed; instead, we concatenate the current i value plus a space on to the end of the paragraph content.
    5. +
+ +
+

Note: You can view the full source code on GitHub too (also see it running live).

+
+ +

while and do ... while

+ +

for is not the only type of loop available in JavaScript. There are actually many others and, while you don't need to understand all of these now, it is worth having a look at the structure of a couple of others so that you can recognize the same features at work in a slightly different way.

+ +

First, let's have a look at the while loop. This loop's syntax looks like so:

+ +
initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}
+ +

This works in a very similar way to the for loop, except that the initializer variable is set before the loop, and the final-expression is included inside the loop after the code to run — rather than these two items being included inside the parentheses. The exit-condition is included inside the parentheses, which are preceded by the while keyword rather than for.

+ +

The same three items are still present, and they are still defined in the same order as they are in the for loop — this makes sense, as you still have to have an initializer defined before you can check whether it has reached the exit-condition; the final-condition is then run after the code inside the loop has run (an iteration has been completed), which will only happen if the exit-condition has still not been reached.

+ +

Let's have a look again at our cats list example, but rewritten to use a while loop:

+ +
var i = 0;
+
+while (i < cats.length) {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+}
+ +
+

Note: This still works just the same as expected — have a look at it running live on GitHub (also view the full source code).

+
+ +

The do...while loop is very similar, but provides a variation on the while structure:

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

In this case, the initializer again comes first, before the loop starts. The do keyword directly precedes the curly braces containing the code to run and the final-expression.

+ +

The differentiator here is that the exit-condition comes after everything else, wrapped in parentheses and preceded by a while keyword. In a do...while loop, the code inside the curly braces is always run once before the check is made to see if it should be executed again (in while and for, the check comes first, so the code might never be executed).

+ +

Let's rewrite our cat listing example again to use a do...while loop:

+ +
var i = 0;
+
+do {
+  if (i === cats.length - 1) {
+    info += 'and ' + cats[i] + '.';
+  } else {
+    info += cats[i] + ', ';
+  }
+
+  i++;
+} while (i < cats.length);
+ +
+

Note: Again, this works just the same as expected — have a look at it running live on GitHub (also view the full source code).

+
+ +
+

Important: With while and do...while — as with all loops — you must make sure that the initializer is iterated so that it eventually reaches the exit condition. If not, the loop will go on forever, and either the browser will force it to stop, or it will crash. This is called an infinite loop.

+
+ +

Active learning: Launch countdown!

+ +

In this exercise, we want you to print out a simple launch countdown to the output box, from 10 down to Blast off. Specifically, we want you to:

+ + + +

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

+ + + +

{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: Filling in a guest list

+ +

In this exercise, we want you to take a list of names stored in an array, and put them into a guest list. But it's not quite that easy — we don't want to let Phil and Lola in because they are greedy and rude, and always eat all the food! We have two lists, one for guests to admit, and one for guests to refuse.

+ +

Specifically, we want you to:

+ + + +

We've already provided you with:

+ + + +

Extra bonus question — after completing the above tasks successfully, you will be left with two lists of names, separated by commas, but they will be untidy — there will be a comma at the end of each one. Can you work out how to write lines that slice the last comma off in each case, and add a full stop to the end? Have a look at the Useful string methods article for help.

+ +

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

+ + + +

{{ EmbedLiveSample('Active_learning_2', '100%', 680, "", "", "hide-codepen-jsfiddle") }}

+ +

Which loop type should you use?

+ +

For basic uses, for, while, and do...while loops are largely interchangeable. They can all be used to solve the same problems, and which one you use will largely depend on your personal preference — which one you find easiest to remember or most intuitive. Let's have a look at them again.

+ +

First for:

+ +
for (initializer; exit-condition; final-expression) {
+  // code to run
+}
+ +

while:

+ +
initializer
+while (exit-condition) {
+  // code to run
+
+  final-expression
+}
+ +

and finally do...while:

+ +
initializer
+do {
+  // code to run
+
+  final-expression
+} while (exit-condition)
+ +

We would recommend for, at least to begin with, as it is probably the easiest for remembering everything — the initializer, exit-condition, and final-expression all have to go neatly into the parentheses, so it is easy to see where they are and check that you aren't missing them.

+ +
+

Note: There are other loop types/features too, which are useful in advanced/specialized situations and beyond the scope of this article. If you want to go further with your loop learning, read our advanced Loops and iteration guide.

+
+ +

Conclusion

+ +

This article has revealed to you the basic concepts behind, and different options available when, looping code in JavaScript. You should now be clear on why loops are a good mechanism for dealing with repetitive code, and be raring to use them in your own examples!

+ +

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + +<gdiv></gdiv> diff --git a/files/es/learn/javascript/building_blocks/conditionals/index.html b/files/es/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..7a0fdcb91d --- /dev/null +++ b/files/es/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,778 @@ +--- +title: Tomando decisiones en tu código — condicionales +slug: Learn/JavaScript/Building_blocks/conditionals +tags: + - Aprendizaje + - Artículo + - Codificación + - Condicionales + - JavaScript + - Principiante +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +
+

{{LearnSidebar}}

+ +

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

+
+ +

En cualquier lenguaje de programación, el código necesita realizar decisiones y llevar a cabo diferentes acciones acordes dependiendo de distintas entradas. Por ejemplo, en un juego, si el el numero de vidas del jugador es 0, entonces se termina el juego. En una aplicación del clima, si se observa en la mañana, se despliega una gráfica del amanecer; muestra estrellas y una luna si es de noche. En este artículo, exploraremos cómo las llamadas declaraciones condicionales funcionan en JavaScript.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de informática, básico entendimiento de HTML y CSS, JavaScript primeros pasos.
Objetivo:Entender como se usan las extructuras condicionales en JavaScript. 
+ +

Puedes hacerlo en una condición..!

+ +

Los seres humanos (y otros animales) toman decisiones todo el tiempo que afectan sus vidas, desde la más insignificante ("¿Debería comer una galleta o dos?") hasta la más grande (¿Debería quedarme en mi país y trabajar en la granja de mi padre, o debería mudarme a Estados Unidos y estudiar astrofísica?). 

+ +

+ +

Declaraciones if ... else 

+ +

Echemos un vistazo a la declaración condicional más común que usarás en JavaScript.

+ +

 — El humilde if ... else statement.

+ +

Sintaxis if ... else básica. 

+ +

Una sintaxis básica if...else luce así. {{glossary("pseudocode")}}:

+ +
if (condición) {
+  código a ejecutar si la condición es verdadera
+} else {
+  ejecuta este otro código si la condición es falsa
+}
+ +

Aquí tenemos:

+ +
    +
  1. La palabra clave if seguida de unos paréntesis.
    2. +
  2. Una condición a probar, puesta dentro de los paréntesis (típicamente "¿es este valor mayor que este otro valor?", o "¿existe este valor?"). Esta condición usará los  operadores de comparación que hemos hablado en el módulo anterior y retorna un valor true o false (verdadero o falso).
    3. +
  3. Un conjunto de llaves, en las cuales tenemos algún código — puede ser cualquier código que deseemos, código que se ejecutará sólamente si la condición retorna true.
    4. +
  4. La palabra clave else.
    5. +
  5. Otro conjunto de llaves, dentro de las cuales tendremos otro código — puede ser cualquier código que deseemos, y sólo se ejecutará si la condición no es true.
    6. +
+ +

Este código es fácil de leer —  está diciendo "si (if)  la condición retorna verdadero (true),  entonces ejecute el código A, sino (else)  ejecute el código B"

+ +

Habrás notado que no tienes que incluir else y el segundo bloque de llaves — La siguiente declaración también es perfectmaente legal. 

+ +
if (condición) {
+  ejecuta el código de al ser verdadera la condición
+}
+
+ejecuta otro código
+ +

Sin embargo, hay que ser cuidadosos — en este caso, el segundo bloque no es controlado por una declaración condicional, así que siempre se ejecutará, sin importar si la condicional devuelve true o false. Esto no es necesariemente algo malo, pero puede ser algo que no quieras —  a menudo desearás ejecutar un bloque de código u otro, no ambos.

+ +

Como punto final, habrán ocaciones donde veas delcaraciones  if...else escritas sin un conjunto de llaves, de esta manera:

+ +
if (condición) ejecuta código de ser verdadero (true)
+else ejecuta este otro código
+ +

Este código es perfectamente valido, pero no es recomendado usarlo — es mucho más fácil leer el código y determinar qué sucede haciendo uso de  las llaves para delimitar los bloques de código y usar varias líneas y sangrías.

+ +

Un ejemplo real

+ +

Para comprender mejor la sintaxis,  realicemos un ejemplo real. Imagínese a un niño a quien su madre o padre le pide ayuda con una tarea. El padre podría decir: "¡Hola, cariño! Si me ayudas yendo y haciendo las compras, te daré un subsidio adicional para que puedas pagar ese juguete que querías". En JavaScript, podríamos representar esto así:

+ +
let compraRealizada = false;
+
+if (compraRealizada === true) {
+  let subsidioAdicional = 10;
+} else {
+  let subsidioAdicional = 5;
+}
+ +

La variable compraRealizada escrita en este código dará siempre como resultado un retorno de valor  false,  lo cuál significa una desilusión para nuestro pobre hijo. Depende de nosotros proporcionar un mecanismo para que el padre cambie el valor de la variable compraRealizada a true si el niño realizó la compra.

+ +
+

Nota: Podrás ver una versión más completa de este ejemplo en GitHub (también podrás verlo corriendo en vivo.)

+
+ +

else if

+ +

El último ejemplo nos proporcionó dos opciones o resultados, pero ¿qué ocurre si queremos más de dos?

+ +

Hay una forma de encadenar  opciones / resultados adicionales extras a if...else — usando else if. Cada opción extra requiere un bloque adicional para poner en medio de bloque if() { ... } y else { ... } — Vea el siguiente ejemplo un poco más complicado, que podría ser parte de una aplicación para un simple pronóstico del tiempo:

+ +
<label for="clima">Seleccione el tipo de clima de hoy: </label>
+<select id="clima">
+  <option value="">--Haga una elección--</option>
+  <option value="soleado">Soleado</option>
+  <option value="lluvioso">Lluvioso</option>
+  <option value="nevando">Nevando</option>
+  <option value="nublado">Nublado</option>
+</select>
+
+<p></p>
+ +
let seleccionar = document.querySelector('select');
+let parrafo = document.querySelector('p');
+
+seleccionar.addEventListener('change', establecerClima);
+
+function establecerClima() {
+  let eleccion = seleccionar.value;
+
+  if (eleccion === 'soleado') {
+    parrafo.textContent = 'El día esta agradable y soleado hoy. ¡Use pantalones cortos! Ve a la playa o al parque y come un helado.';
+  } else if (eleccion === 'lluvioso') {
+    parrafo.textContent = 'Está lloviendo, tome un abrigo para lluvia y un paraguas, y no se quede por fuera mucho tiempo.';
+  } else if (eleccion === 'nevando') {
+    parrafo.textContent = 'Está nevando ─ ¡está congelando! Lo mejor es quedarse en casa con una taza caliente de chocolate, o hacer un muñeco de nieve.';
+  } else if (eleccion === 'nublado') {
+    parrafo.textContent = 'No está lloviendo, pero el cielo está gris y nublado; podría llover en cualquier momento, así que lleve un saco solo por si acaso.';
+  } else {
+    parrafo.textContent = '';
+  }
+}
+
+
+ +

{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. Aquí tenemos un elemento HTML {{htmlelement("select")}} que nos permite realizar varias elecciones sobre el clima, y un parrafo simple.
    2. +
  2. En el JavaScript, estamos almacenando una referencia para ambos elementos {{htmlelement("select")}} y {{htmlelement("p")}} , y añadiendo un Event Listener o en español un Detector de Eventos al elemento <select>  así cuando su valor cambie se ejecuta la función establecerClima().
    3. +
  3. Cuando la función es ejecutada, primero establecemos la variable eleccion con el valor obtenido del elemento <select>. Luego usamos una declaración condicinal  para mostrar distintos textos dentro del párrafo {{htmlelement("p")}} dependiendo del valor de la variable eleccion. Note  como todas las condicinales son probadas en los bloques else if() {...} , a excepción del primero, el cual es probado en el primer bloque if() {...}.
    4. +
  4. La ultima elección,  dentro del bloque else {...}, es básicamente  el "último recurso" como opción—  El código dentro de este bloque se ejecutará si nunguna de las condiciones es true. En este caso, sirve para vaciar el contenido del párrafo si nada ha sido seleccionado, por ejemplo, si el usuario decide elegir de nuevo  "--Haga una elección--" mostrado al inicio.
    5. +
+ +
+

Nota: Puedes encontrar  este ejemplo en GitHub (También podrás verlo correr en vivo.)

+
+ +

Una nota en los operadores de comparación 

+ +

Los operadores de comparación son usados para probar las condiciones dentro de nuestra declaración condicional. Vimos estos operadores en el artículo Matématica básica en JavaScript — Números y operadores. Nuestras opciones son:

+ + + +
+

Nota: Revisa el material en los enlaces previos para refrescar la memoria en estos temas. 

+
+ +

Queremos hacer una mención especial al probar los valores  (true/false) , y un patrón común que te encontrarás una y otra vez. Cualquier valor que no sea false, undefined, null, 0, NaN,  o una cadena vacía string ('') realmente retorna el valor true cuando es probada como una declaración condicional, por lo tanto puedes simplemente usar el nombre de una variable para probar si es  true, o si al menos existe  (i.e. no está definido.) Por ejemplo:

+ +
let queso = 'Cheddar';
+
+if (queso) {
+  console.log('¡Siii! Hay queso para hacer tostadas con queso.');
+} else {
+  console.log('No hay tostadas con queso para ti hoy :(.');
+}
+ +

En el ejemplo anterior la variable queso contiene el valor 'Cheddar', y como su valor está definido o no es false, undefined, null, 0, NaN y (' ') es considerado como true lo cual hará mostrar el mensaje dentro del primer bloque de llaves. 

+ +

Y, devolviéndonos al ejemplo previo del niño haciendo las compras para su padre, lo podrías haber escrito así:

+ +
let compraRealizada = false;
+
+if (compraRealizada) { //no necesitas especificar explícitamente '=== true'
+   let subsidioAdicional = 10;
+} else {
+   let subsidioAdicional = 5;
+}
+ +

Anidando if ... else

+ +

Está perfectamente permitido poner una declaración  if...else dentro de otra declaración if...else —  para anidarlas. Por ejemplo, podemos actualizar nuestra aplicación del clima para mostrar una serie de opciones dependiendo de cual sea la temperatura:

+ +
if (elección === 'soleado') {
+  if (temperatura < 86) {
+    parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — agradable y soleado. Vamos a la playa, o al parque, y comer helado.';
+  } else if (temperatura >= 86) {
+    parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — ¡QUÉ CALOR! Si deseas salir, asegúrate de aplicarte bloqueador solar.';
+  }
+}
+ +

Aunque el código funciona en conjunto, cada declaración  if...else funciona complentamente independiente del otro.

+ +

Operadores lógicos: AND, OR y NOT

+ +

Si quieres probar multiples condiciones sin escribir declaraciones  if...else anidados,  los operadores lógicos  pueden ayudarte. Cuando se usa en condiciones, los primeros dos hacen lo siguiente:

+ + + +

Para poner un ejemplo de  AND, el anterior código puede ser reescrito de esta manera:

+ +
if (eleccion === 'soleado' && temperatura < 86) {
+  parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — agradable y soleado. Vamos a la playa, o al parque, y comer helado.';
+} else if (eleccion === 'soleado' && temperatura >= 86) {
+  parrafo.textContent = 'Está a ' + temperatura + ' grados afuera — ¡QUÉ CALOR! Si deseas salir, asegúrate de aplicarte bloqueador solar.';
+}
+ +

Así que por ejemplo, el primer bloque solo se ejecutará si la variable eleccion === 'soleado' y temperatura < 86 devuelven un valor verdadero o true.

+ +

Observemos un ejemplo rápido del operador OR:

+ +
if (carritoDeHelados || estadoDeLaCasa === 'en llamas') {
+  console.log('Debes salir de la casa rápidamente.');
+} else {
+  console.log('Es mejor que te quedes dentro de casa');
+}
+ +

El último tipo de operador lógico, NOT, es expresado con el operador !, puede ser usado para negar una expresión. Vamos a combinarlo con el operador OR en el siguiente ejemplo:

+ +
if (!(carritoDeHelados || estadoDeLaCasa === 'en llamas')) {
+  console.log('Es mejor que te quedes dentro de casa');
+} else {
+  console.log('Debes salir de la casa rápidamente.');
+}
+ +

En el anterior ejemplo, si las declaraciones del operador OR retornan un valor true,  el operador NOT negará toda la expresión dentro de los paréntesis, por lo tanto retornará un valor false.

+ +

Puedes combinar los operadores que quieras dentro de las sentencias, en cualquier estructura. El siguiente ejemplo ejecuta el código dentro del condicional solo si ambas sentencias OR devuelven verdadero, lo que significa que la instrucción general AND devolverá verdadero:

+ +
if ((x === 5 || y > 3 || z <= 10) && (logueado || nombreUsuario === 'Steve')) {
+  // ejecuta el código
+}
+ +

Un error comun cuando se utiliza el operador OR en las declaraciones condicionales es intentar verificar el valor de la variable una sola vez, y luego darle una lista de valores que podrían retornar verdadero separados por  operadores ||. Por ejemplo:

+ +
if (x === 5 || 7 || 10 || 20) {
+  // ejecuta mi código
+}
+ +

En este caso la condición  if(...)  siempre evaluará a verdadero siendo que  7 (u otro valor que no sea 0) siempre será verdadero. Esta condición lo que realmente está diciendo es que "if x es igual a 5, o 7 es verdadero— lo cual siempre es". ¡Esto no es lógicamente lo que queremos!  Para hacer que esto funcione, tenemos que especificar una prueba completa para cada lado del operador OR:

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // ejecuta mi código
+}
+ +

Declaraciones con switch

+ +

El condicional if...else hace un buen trabajo permitiéndonos realizar un buen código, pero esto viene con sus desventajas.  Hay variedad de casos donde necesitarás realizar varias elecciones, y cada una requiere una cantidad razonable de código para ser ejecutado y/o sus condicionales son complejas (i.e. operadores lógicos múltiples). Para los casos en los que solo se desea establecer una variable para una determinada opción de valores o imprimir una declaración particular dependiendo de una condición, la sintaxis puede ser un poco engorrosa, especialmente si se tiene una gran cantidad de opciones.

+ +

Para estos casos los switch statements son de gran ayuda — toman una sola expresión / valor como una entrada, y luego pasan a través de una serie de opciones hasta que encuentran una que coincida con ese valor, ejecutando el código correspondiente que va junto con ella. Aquí hay un pseudocódigo más para hacerte una idea:

+ +
switch (expresion) {
+  case choice1:
+    ejecuta este código
+    break;
+
+  case choice2:
+    ejecuta este código
+    break;
+
+  // Se pueden incluir todos los casos que quieras
+
+  default:
+    por si acaso, corre este código
+}
+ +

Aquí tenemos:

+ +
    +
  1. La palabra clave switch, seguida por un conjunto de paréntesis.
    2. +
  2. Una expresión o valor dentro de los paréntesis.
    3. +
  3. La palabra clave case, seguida de una elección con la expresión / valor que podría ser, seguido de dos puntos.
    4. +
  4. Algún código a correr si la elección coincide con la expresión.
    5. +
  5. Un declaración llamada break,  seguida de un punto y coma. Si la elección previa coincide con la expresión / valor, el explorador dejará de ejecutar el bloque de código aquí, y continuará a la siguiente línea de código. Si la opción anterior coincide con la expresión / valor, aquí el navegador deja de ejecutar el bloque de código  y pasa a cualquier código que aparezca debajo de la declaración de switch.
    6. +
  6. Como muchos otros casos, los que quieras.
    7. +
  7. La palabra clave default, seguido exactamente del mismo patrón de código que en los casos anteriores , excepto que el valor predeterminado no tiene opciónes después de él, y no es necesario que se use break porque no hay nada que ejecutar después de este bloque de todas formas. Esta es la opción predeterminada o por defecto que se ejecuta si ninguna de las opciones coincide.
    8. +
+ +
+

Nota: No tiene que incluir la sección default; se puede omitir con seguridad si no hay posibilidades de que la expresión  termine igualando un valor desconocido. Sin embargo, si existe la posibilidad de que esto ocurra, debe incluirlo para evitar casos desconocidos o comportamientos extraños en tu código.

+
+ +

Un ejemplo con switch

+ +

Let's have a look at a real example — we'll rewrite our weather forecast application to use a switch statement instead:

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
let select = document.querySelector('select');
+let para = document.querySelector('p');
+
+select.addEventListener('change', setWeather);
+
+
+function setWeather() {
+  let choice = select.value;
+
+  switch (choice) {
+    case 'sunny':
+      para.textContent = 'It is nice and sunny outside today. Wear shorts! Go to the beach, or the park, and get an ice cream.';
+      break;
+    case 'rainy':
+      para.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out for too long.';
+      break;
+    case 'snowing':
+      para.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
+      break;
+    case 'overcast':
+      para.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
+      break;
+    default:
+      para.textContent = '';
+  }
+}
+ +

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Nota: Tambien puedes encontrar este ejemplo en GitHub (tambien puedes verlo en ejecución aquí.)

+
+ +

Operador Ternario

+ +

Hay una última sintaxis que queremos presentarte antes de que juegues con algunos ejemplos. El operador ternario o condicional es una pequeña sintaxis que prueba una condición y devuelve un valor/expresión, si es true, y otro si es false — Esto puede ser útil en algunas situaciones, y puede ocupar mucho menos código que un bloque if...else si simplemente tienes dos opciones que se eligen a través de una condición true/false. El pseudocódigo se ve así:

+ +
( condición ) ? ejecuta este código : ejecuta este código en su lugar
+ +

Veamos un ejemplo simple:

+ +
let greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
+ +

Aquí tenemos una variable llamada isBirthday — si esta es true, le damos a nuestro invitado un mensaje de feliz cumpleaños; si no, le damos el saludo diario estándar.

+ +

Ejemplo con operador ternario

+ +

No solo puedes establecer valores variables con el operador ternario; También puedes ejecutar funciones o líneas de código — lo que quieras. El siguiente ejemplo muestra un selector de tema simple donde el estilo del sitio se aplica utilizando un operador ternario.

+ +
<label for="theme">Select theme: </label>
+<select id="theme">
+  <option value="white">White</option>
+  <option value="black">Black</option>
+</select>
+
+<h1>This is my website</h1>
+ +
let select = document.querySelector('select');
+let html = document.querySelector('html');
+document.body.style.padding = '10px';
+
+function update(bgColor, textColor) {
+  html.style.backgroundColor = bgColor;
+  html.style.color = textColor;
+}
+
+select.onchange = function() {
+  ( select.value === 'black' ) ? update('black','white') : update('white','black');
+}
+
+ +

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Aquí tenemos un elemento {{htmlelement('select')}} para elegir un tema (blanco o negro), más un simple (black or white), plus a simple {{htmlelement('h1')}} para mostrar el título de un sitio web. También tenemos una función llamada update(), que toma dos colores como parámetros (entradas). El color de fondo del sitio web se establece en el primer color proporcionado y el color del texto se establece en el segundo color proporcionado.

+ +

Finalmente, también tenemos un detector de eventos onchange que sirve para ejecutar una función que contiene un operador ternario. Comienza con una condición de prueba — select.value === 'black'. Si esto devuelve true, ejecutamos la función update() con parámetros de blanco y negro, lo que significa que terminamos con un color de fondo negro y un color de texto blanco. Si devuelve false, ejecutamos las función update() con parámetros de blanco y negro, lo que significa que el color del sitio está invertido.

+ +
+

Nota: También puedes encontrar este ejemplo en GitHub (y verlo en ejecución aquí.)

+
+ +

Aprendizaje activo: Un calendario simple

+ +

En este ejemplo, nos ayudará a terminar una aplicación de calendario simple. En el código tienes:

+ + + +

Necesitamos que escriba una declaración condicional dentro de la función del controlador onchange justo debajo del comentario // ADD CONDITIONAL HERE. Debería:

+ +
    +
  1. Mire el mes seleccionado (almacenado en la variable choice. Este será el valor del elemento <select> después de que cambie el valor, por ejemplo "January")
    2. +
  2. Establezca una variable llamada days para que sea igual al número de días del mes seleccionado. Para hacer esto, tendrá que buscar el número de días en cada mes del año. Puede ignorar los años bisiestos a los efectos de este ejemplo.
    3. +
+ +

Sugerencias:

+ + + +

Si comete un error, siempre puede restablecer el ejemplo con el botón "Reset". Si se queda realmente atascado, presione "Show solution" para ver una solución.

+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

+ +

Aprendizaje activo: Más opciones de colores!

+ +

In this example, you are going to take the ternary operator example we saw earlier and convert the ternary operator into a switch statement that will allow us to apply more choices to the simple website. Look at the {{htmlelement("select")}} — this time you'll see that it has not two theme options, but five. You need to add a switch statement just underneath the // ADD SWITCH STATEMENT comment:

+ + + +

If you make a mistake, you can always reset the example with the "Reset" button. If you get really stuck, press "Show solution" to see a solution.

+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}

+ +

Conclusión

+ +

And that's all you really need to know about conditional structures in JavaScript right now! I'm sure you'll have understood these concepts and worked through the examples with ease; if there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

Revisa también

+ + + +

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html b/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html new file mode 100644 index 0000000000..5f9bcc7c8b --- /dev/null +++ b/files/es/learn/javascript/building_blocks/construyendo_tu_propia_funcion/index.html @@ -0,0 +1,252 @@ +--- +title: Construye tu propia función +slug: Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion +tags: + - Aprender + - Artículo + - Construir + - Funciones + - Guía + - JavaScript + - Principiante + - Tutorial +translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
+ +

Con la mayor parte de la teoría esencial tratada en el artículo anterior, este artículo proporciona experiencia práctica. Aquí obtendrás práctica construyendo tu propia función personalizada. En el camino, también explicaremos algunos detalles útiles sobre cómo tratar las funciones.

+ + + + + + + + + + + + +
Prerequisites:Conocimientos básicos de computación, una comprensión básica de HTML y CSS, JavaScript first steps, Functions — reusable blocks of code.
Objective:Para proporcionar algo de práctica en la construcción de una función personalizada, y explicar algunos detalles asociados más útiles.
+ +

Aprendizaje activo: construyamos una función.

+ +

La función personalizada que vamos a construir se llamará displayMessage(). Mostrará un cuadro de mensaje personalizado en una página web y actuará como un reemplazo personalizado para la función de alert() incorporada de un navegador. Hemos visto esto antes, pero solo refresquemos nuestros recuerdos. Escriba lo siguiente en la consola de JavaScript de su navegador, en la página que desee:

+ +
alert('This is a message');
+ +

La función alert tiene un argumento — el string que se muestra en la alerta. Prueba a variar el string para cambiar el mensaje.

+ +

La función alert es limitada: pueder cambiar el mensaje, pero no puedes cambiar de manera sencilla nada más, como el color, icono o cualquier otra cosa. Construiremos uno que resultará ser más divertido.

+ +
+

Nota: Este ejemplo debería funcionar bien en todos los navegadores modernos, pero el estilo puede parecer un poco divertido en los navegadores un poco más antiguos. Te recomendamos que hagas este ejercicio en un navegador moderno como Firefox, Opera o Chrome.

+
+ +

La función básica

+ +

Para empezar, vamos a poner juntos una función básica.

+ +
+

Nota: Para las convenciones de nombres de las funciones, debes seguir las mismas reglas que convecion de nombres de variables. Esto está bien, ya que puede distinguirlos: los nombres de las funciones aparecen entre paréntesis después de ellos y las variables no.

+
+ +
    +
  1. Comience accediendo al archivo function-start.html y haciendo una copia local. Verás que el HTML es simple  — el body unicamente tiene un botón. También hemos propocionado algunos estilos básicos de CSS para customizar el mensaje y un elemento  {{htmlelement("script")}} vacío para poner nuestro JavaScript dentro.
    2. +
  2. Luego añade lo siguiente dentro del elemento <script>: + 
    function displayMessage() {
+
+}
    + Comenzamos con la palabra clave función, lo que significa que estamos definiendo una función. A esto le sigue el nombre que queremos darle a nuestra función, un conjunto de paréntesis y un conjunto de llaves. Todos los parámetros que queremos darle a nuestra función van dentro de los paréntesis, y el código que se ejecuta cuando llamamos a la función va dentro de las llaves.
    3. +
  3. Finalmente, agregue el siguiente código dentro de las llaves: + 
    let html = document.querySelector('html');
+
+let panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+
+let msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+let closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+
+closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
    +
    4. +
+ +

Esto es un montón de código por el que pasar, así que lo guiaremos paso a paso.

+ +

La primera línea usa un función DOM API llamada {{domxref("document.querySelector()")}} para seleccionar el elemento {{htmlelement("html")}} y guardar una referencia a él en una variable llamada html, por lo que podemos hacer cosas para más adelante:

+ +
let html = document.querySelector('html');
+ +

La siguiente sección usa otra función del DOM API llamada {{domxref("Document.createElement()")}} para crear un elemento {{htmlelement("div")}} y guardar una referencia a él en una variable llamada panel. Este elemento será el contenedor exterior de nuestro cuadro de mensaje.

+ +

Entonces usamos otra función del API DOM llamada {{domxref("Element.setAttribute()")}} para configurar un atributo a class en nuestro panel con un valor de msgBox. Esto es para facilitar el estilo del elemento. — Si echas un vistazo al CSS en la página, verás que estamos utilizando un selector de clases.msgBox para dar estilo al al contenedor del mensaje.

+ +

Finalmente, llamamos a una función del DOM llamada {{domxref("Node.appendChild()")}} en la variable html que hemos guardado anteriormente, que anida un elemento dentro del otro como hijo de él. Hemos especificado el panel <div> como el hijo que queremos añadir dentro del elemento <html>. Debemos hacer esto ya que el elemento que creamos no aparecerá en la página por sí solo — tenemos que especificar donde ponerlo.

+ +
let panel = document.createElement('div');
+panel.setAttribute('class', 'msgBox');
+html.appendChild(panel);
+ +

Las siguientes dos secciones hacen uso de las mismas funciones createElement() y appendChild() que ya vimos para crear dos nuevos elementos — un {{htmlelement("p")}} y un {{htmlelement("button")}} — e insertarlo en la página como un hijo del panel <div>. Usamos su propiedad  {{domxref("Node.textContent")}} — que representa el contenido de texto de un elemento: para insertar un mensaje dentro del párrafo y una 'x' dentro del botón. Este botón será lo que necesita hacer clic / activar cuando el usuario quiera cerrar el cuadro de mensaje.

+ +
let msg = document.createElement('p');
+msg.textContent = 'This is a message box';
+panel.appendChild(msg);
+
+let closeBtn = document.createElement('button');
+closeBtn.textContent = 'x';
+panel.appendChild(closeBtn);
+ +

Finalmente, usamos el manejador de evento {{domxref("GlobalEventHandlers.onclick")}} para hacerlo de modo que cuando se haga clic en el botón, se ejecute algún código para eliminar todo el panel de la página, para cerrar el cuadro de mensaje.

+ +

Brevemente, el handler onclick es una propiedad disponible en el botón (o, de hecho, en cualquier elemento de la página) que se puede configurar en una función para especificar qué código ejecutar cuando se hace clic en el botón. Aprenderás mucho más sobre esto en nuestro artículo de eventos posteriores. Estamos haciendo el handler onclick igual que una función anónima, que contiene el código para ejecutar cuando se ha hecho click en el botón. La línea dentro de la función usa la función del DOM API {{domxref("Node.removeChild()")}}  para especificar que queremos eliminar un elemento secundario específico del elemento HTML— en este caso el panel <div>.

+ +
closeBtn.onclick = function() {
+  panel.parentNode.removeChild(panel);
+}
+ +

Básicamente, todo este bloque de código está generando un bloque de HTML que se ve así, y lo está insertando en la página:

+ +
<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+ +

Fue un montón de código con el que trabajar: ¡no te preocupes demasiado si no recuerdas exactamente cómo funciona todo ahora! La parte principal en la que queremos centrarnos aquí es la estructura y el uso de la función, pero queríamos mostrar algo interesante para este ejemplo.

+ +

Llamando a la función

+ +

Ahora tienes la definición de tu función escrita en tu elemento <script> bien, pero no hará nada tal como está.

+ +
    +
  1. Intente incluir la siguiente línea debajo de su función para llamarla: + 
    displayMessage();
    + Esta línea invoca la función, haciéndola correr inmediatamente. Cuando guarde el código y lo vuelva a cargar en el navegador, verá que el pequeño cuadro de mensaje aparece inmediatamente, solo una vez. Después de todo, solo lo llamamos una vez.
    2. +
  2. +

    Ahora abra las herramientas de desarrollo de su navegador en la página de ejemplo, vaya a la consola de JavaScript y escriba la línea nuevamente allí, ¡verá que aparece nuevamente! Así que esto es divertido: ahora tenemos una función reutilizable que podemos llamar en cualquier momento que queramos.

    + +

    Pero probablemente queremos que aparezca en respuesta a las acciones del usuario y del sistema. En una aplicación real, tal cuadro de mensaje probablemente se llamará en respuesta a la disponibilidad de nuevos datos, a un error, al usuario que intenta eliminar su perfil ("¿está seguro de esto?"), O al usuario que agrega un nuevo contacto y la operación completando con éxito ... etc.

    + +

    En esta demostración, obtendremos el cuadro de mensaje que aparecerá cuando el usuario haga clic en el botón.

    +
    3. +
  3. Elimina la línea anterior que agregaste.
    4. +
  4. A continuación, seleccionaremos el botón y guardaremos una referencia a él en una variable. Agregue la siguiente línea a su código, encima de la definición de la función: + 
    let btn = document.querySelector('button');
    +
    5. +
  5. Finalmente, agregue la siguiente línea debajo de la anterior: + 
    btn.onclick = displayMessage;
    + De una forma similar que nuestra línea dentro de la función closeBtn.onclick..., aquí estamos llamando a algún código en respuesta a un botón al hacer clic. Pero en este caso, en lugar de llamar a una función anónima que contiene algún código, estamos llamando directamente a nuestro nombre de función.
    6. +
  6. Intente guardar y actualizar la página: ahora debería ver aparecer el cuadro de mensaje cuando hace clic en el botón.
    7. +
+ +

Quizás te estés preguntando por qué no hemos incluido los paréntesis después del nombre de la función. Esto se debe a que no queremos llamar a la función inmediatamente, solo después de hacer clic en el botón. Si intentas cambiar la línea a

+ +
btn.onclick = displayMessage();
+ +

y al guardar y volver a cargar, verás que aparece el cuadro de mensaje sin hacer clic en el botón. Los paréntesis en este contexto a veces se denominan "operador de invocación de función". Solo los utiliza cuando desea ejecutar la función inmediatamente en el ámbito actual. Del mismo modo, el código dentro de la función anónima no se ejecuta inmediatamente, ya que está dentro del alcance de la función.

+ +

Si has intentado el último experimento, asegúrate de deshacer el último cambio antes de continuar.

+ +

Mejora de la función con parámetros.

+ +

Tal como está, la función aún no es muy útil, no queremos mostrar el mismo mensaje predeterminado cada vez. Mejoremos nuestra función agregando algunos parámetros, permitiéndonos llamarla con algunas opciones diferentes.

+ +
    +
  1. En primer lugar, actualice la primera línea de la función: + 
    function displayMessage() {
    + to this: + + 
    function displayMessage(msgText, msgType) {
    + Ahora, cuando llamamos a la función, podemos proporcionar dos valores variables dentro de los paréntesis para especificar el mensaje que se mostrará en el cuadro de mensaje y el tipo de mensaje que es.
    2. +
  2. Para utilizar el primer parámetro, actualiza la siguiente línea dentro de su función: + 
    msg.textContent = 'This is a message box';
    + to + + 
    msg.textContent = msgText;
    +
    3. +
  3. Por último, pero no menos importante, ahora necesita actualizar su llamada de función para incluir un texto de mensaje actualizado. Cambia la siguiente línea: + 
    btn.onclick = displayMessage;
    + to this block: + + 
    btn.onclick = function() {
+  displayMessage('Woo, this is a different message!');
+};
    + Si queremos especificar parámetros dentro de paréntesis para la función a la que estamos llamando, no podemos llamarla directamente, necesitamos colocarla dentro de una función anónima para que no esté en el ámbito inmediato y, por lo tanto, no se llame de inmediato. Ahora no se llamará hasta que se haga clic en el botón.
    4. +
  4. Vuelva a cargar e intenta el código nuevamente y verás que aún funciona bien, ¡excepto que ahora también puede variar el mensaje dentro del parámetro para obtener diferentes mensajes mostrados en el cuadro!
    5. +
+ +

Un parámetro más complejo.

+ +

En el siguiente parámetro. Este va a implicar un poco más de trabajo: lo configuraremos de modo que, dependiendo de la configuración del parámetro msgType, la función mostrará un icono diferente y un color de fondo diferente.

+ +
    +
  1. En primer lugar, descargue los iconos necesarios para este ejercicio (warning y chat) de GitHub. Guárdalos en una nueva carpeta llamada icons en la misma localización que tu HTML. + +
    Nota: los iconos warning y chat que se encuentran en iconfinder.com, han sido diseñados por Nazarrudin Ansyari. Gracias!
    +
    2. +
  2. A continuación, encuentra el CSS dentro de tu archivo HTML. Haremos algunos cambios para dar paso a los iconos. Primero, actualiza el ancho de .msgBox desde: + 
    width: 200px;
    + to + + 
    width: 242px;
    +
    3. +
  3. Luego, añade las siguientes líneas dentro de la regla.msgBox p { ... }: + 
    padding-left: 82px;
+background-position: 25px center;
+background-repeat: no-repeat;
    +
    4. +
  4. Ahora necesitamos añadir código a la función displayMessage() para manejar la visualización de los iconos. Agrega el siguiente bloque justo encima de la llave de cierre (}) de tu función : + 
    if (msgType === 'warning') {
+  msg.style.backgroundImage = 'url(icons/warning.png)';
+  panel.style.backgroundColor = 'red';
+} else if (msgType === 'chat') {
+  msg.style.backgroundImage = 'url(icons/chat.png)';
+  panel.style.backgroundColor = 'aqua';
+} else {
+  msg.style.paddingLeft = '20px';
+}
    +
    5. +
  5. Aquí, si el parámetro msgType se establece como 'warning', se muestra el icono de advertencia y el color de fondo del panel se establece en rojo. Si se establece en 'chat', se muestra el icono de chat y el color de fondo del panel se establece en azul aguamarina. Si el parámetro msgType no está configurado en absoluto (o en algo diferente), entonces la parte else { ... } del código entra en juego, y al párrafo simplemente se le da un relleno predeterminado y ningún icono, sin el conjunto de colores del panel de fondo ya sea. Esto proporciona un estado predeterminado si no se proporciona ningún parámetro msgType , lo que significa que es un parámetro opcional.
    6. +
  6. Vamos a probar nuestra función actualizada , prueba a actualizar la llamada a displayMessage() con esto: + 
    displayMessage('Woo, this is a different message!');
    + to one of these: + + 
    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+displayMessage('Brian: Hi there, how are you today?','chat');
    + Puedes ver cuán útil se está volviendo nuestra (ahora no tan) poca función.
    7. +
+ +
+

Nota: Si estas teniendo problemas con el ejemplo, sientente libre para coger el ejemplo para trabajar con él, finished version on GitHub (see it running live también), o pídenos ayuda.

+
+ +

Conclusión

+ +

¡Felicidades por llegar al final! Este artículo lo llevó a través de todo el proceso de creación de una función personalizada y práctica, que con un poco más de trabajo podría trasplantarse en un proyecto real. En el siguiente artículo resumiremos las funciones explicando otro concepto esencial relacionado: valores de retorno.

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/building_blocks/eventos/index.html b/files/es/learn/javascript/building_blocks/eventos/index.html new file mode 100644 index 0000000000..7bdb81768a --- /dev/null +++ b/files/es/learn/javascript/building_blocks/eventos/index.html @@ -0,0 +1,578 @@ +--- +title: Introducción a eventos +slug: Learn/JavaScript/Building_blocks/Eventos +translation_of: Learn/JavaScript/Building_blocks/Events +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

Los eventos son acciones u ocurrencias que suceden en el sistema que está programando y que el sistema le informa para que pueda responder de alguna manera si lo desea. Por ejemplo, si el usuario hace clic en un botón en una página web, es posible que desee responder a esa acción mostrando un cuadro de información. En este artículo, discutiremos algunos conceptos importantes que rodean los eventos y veremos cómo funcionan en los navegadores. Este no será un estudio exhaustivo; solo lo que necesitas saber en esta etapa.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, entendimiento básico de HTML y CSS, Primeros pasos con JavaScript.
Objetivo:Comprender la teoría fundamental de los eventos, cómo funcionan en los navegadores y cómo los eventos pueden diferir en distintos entornos de programación.
+ +

Una serie de eventos afortunados

+ +

Como se mencionó anteriormente, los eventos son acciones u ocurrencias que suceden en el sistema que está programando — el sistema disparará una señal de algún tipo cuando un evento ocurra y también proporcionará un mecanismo por el cual se puede tomar algún tipo de acción automáticamente (p.e., ejecutando algún código) cuando se produce el evento. Por ejemplo, en un aeropuerto cuando la pista está despejada para que despegue un avión, se comunica una señal al piloto y, como resultado, comienzan a pilotar el avión.

+ +

+ +

En el caso de la Web, los eventos se desencadenan dentro de la ventana del navegador y tienden a estar unidos a un elemento específico que reside en ella — podría ser un solo elemento, un conjunto de elementos, el documento HTML cargado en la pestaña actual o toda la ventana del navegador. Hay muchos tipos diferentes de eventos que pueden ocurrir, por ejemplo:

+ + + +

Se deducirá de esto (y echar un vistazo a MDN Referencia de eventos) que hay muchos eventos a los que se puede responder.

+ +

Cada evento disponible tiene un controlador de eventos, que es un bloque de código (generalmente una función JavaScript definida por el usuario) que se ejecutará cuando se active el evento. Cuando dicho bloque de código se define para ejecutarse en respuesta a un disparo de evento, decimos que estamos registrando un controlador de eventos. Tenga en cuenta que los controladores de eventos a veces se llaman oyentes de eventos — son bastante intercambiables para nuestros propósitos, aunque estrictamente hablando, trabajan juntos. El oyente escucha si ocurre el evento y el controlador es el código que se ejecuta en respuesta a que ocurra.

+ +
+

Nota: Es útil tener en cuenta que los eventos web no son parte del lenguaje central de JavaScript: se definen como parte de las API integradas en el navegador.

+
+ +

Un ejemplo simple

+ +

Veamos un ejemplo simple para explicar lo que queremos decir aquí. Ya has visto eventos y controladores de eventos en muchos de los ejemplos de este curso, pero vamos a recapitular solo para consolidar nuestro conocimiento. En el siguiente ejemplo, tenemos un solo {{htmlelement ("button")}}, que cuando se presiona, hará que el fondo cambie a un color aleatorio:

+ +
<button>Cambiar color</button>
+ + + +

El JavaScript se ve así:

+ +
const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

En este código, almacenamos una referencia al botón dentro de una variable llamada btn, usando la función {{domxref ("Document.querySelector ()")}}. También definimos una función que devuelve un número aleatorio. La tercera parte del código es el controlador de eventos. La variable btn apunta a un elemento <button>, y este tipo de objeto tiene una serie de eventos que pueden activarse y, por lo tanto, los controladores de eventos están disponibles. Estamos escuchando el disparo del evento "click", estableciendo la propiedad del controlador de eventos onclick para que sea igual a una función anónima que contiene código que generó un color RGB aleatorio y establece el <body> color de fondo igual a este.

+ +

Este código ahora se ejecutará cada vez que se active el evento "click" en el elemento <button>, es decir, cada vez que un usuario haga clic en él.

+ +

El resultado de ejemplo es el siguiente:

+ +

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

+ +

No son solo páginas web

+ +

Otra cosa que vale la pena mencionar en este punto es que los eventos no son particulares de JavaScript — la mayoría de los lenguajes de programación tienen algún tipo de modelo de eventos, y la forma en que funciona a menudo diferirá de la forma en que funciona en JavaScript. De hecho, el modelo de eventos en JavaScript para páginas web difiere del modelo de eventos para JavaScript, ya que se utiliza en otros entornos.

+ +

Por ejemplo, Node.js es un entorno en tiempo de ejecución de JavaScript muy popular que permite a los desarrolladores usar JavaScript para crear aplicaciones de red y del lado del servidor. El modelo de eventos de Node.js se basa en que los oyentes (listeners) escuchen eventos y los emisores (emitters) emitan eventos periódicamente — no suena tan diferentes, pero el código es bastante diferente, haciendo uso de funciones como on() para registrar un oyente de eventos, y once() para registrar un oyente de eventos que anula el registro después de que se haya ejecutado una vez. The documentos de eventos de conexión HTTP proporcionan un buen ejemplo de uso.

+ +

Como otro ejemplo, ahora también puede usar JavaScript para crear complementos de navegadores — mejoras de funcionalidad del navegador — utilizando una tecnología llamada WebExtensions. El modelo de eventos es similar al modelo de eventos web, pero un poco diferente — las propiedades de los oyentes de eventos se escriben en camel-case (ej. onMessage en lugar de onmessage), y deben combinarse con la función addListener. Consulte la página runtime.onMessage para ver un ejemplo.

+ +

No necesita comprender nada sobre otros entornos en esta etapa de su aprendizaje; solo queríamos dejar en claro que los eventos pueden diferir en diferentes entornos de programación.

+ +

Diferentes formas de uso de eventos

+ +

Hay muchas maneras distintas en las que puedes agregar event listeners a los sitios web, que se ejecutara cuando el evento asociado se dispare. En esta sección, revisaremos los diferentes mecanismos y discutiremos cuales deberias usar..

+ +

Propiedades de manejadores de eventos

+ +

Estas son las propiedades que existen, que contienen codigo de manejadores de eventos(Event Handler)  que vemos frecuentemente durante el curso.. Volviendo al ejemplo de arriba:

+ +
var btn = document.querySelector('button');
+
+btn.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

La propiedad onclick es la propiedad del manejador de eventos que está siendo usada en esta situación. Es escencialmente una propiedad como cualquier otra disponible en el botón (por ejemplo: btn.textContent, or btn.style), pero es de un tipo especial — cuando lo configura para ser igual a algún código, ese código se ejecutará cuando el evento se dispare en el botón.

+ +

You could also set the handler property to be equal to a named function name (like we saw in Build your own function). The following would work just the same:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

There are many different event handler properties available. Let's do an experiment.

+ +

First of all, make a local copy of random-color-eventhandlerproperty.html, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing btn.onclick to the following different values in turn, and observing the results in the example:

+ + + +

Some events are very general and available nearly anywhere (for example an onclick handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use onplay only on specific elements, such as {{htmlelement("video")}}).

+ +

Inline event handlers — don't use these

+ +

You might also see a pattern like this in your code:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

The earliest method of registering event handlers found on the Web involved event handler HTML attributes (aka inline event handlers) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

You'll find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.

+ +

For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.

+ +

Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +

Note that another option here would be to use the forEach() built-in method available on all Array objects:

+ +
buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});
+ +
+

Note: Separating your programming logic from your content also makes your site more friendly to search engines.

+
+ +

addEventListener() and removeEventListener()

+ +

The newest type of event mechanism is defined in the Document Object Model (DOM) Level 2 Events Specification, which provides browsers with a new function — addEventListener(). This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:

+ +
var btn = document.querySelector('button');
+
+function bgChange() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

Inside the addEventListener() function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the addEventListener() function, in an anonymous function, like this:

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, removeEventListener(), which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:

+ +
btn.removeEventListener('click', bgChange);
+ +

This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you've got to do is add/remove event handlers as appropriate.

+ +

Second, you can also register multiple handlers for the same listener. The following two handlers would not be applied:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

As the second line would overwrite the value of onclick set by the first. This would work, however:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Both functions would now run when the element is clicked.

+ +

In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the addEventListener() and removeEventListener() reference pages.

+ +

What mechanism should I use?

+ +

Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.

+ +

The other two are relatively interchangeable, at least for simple uses:

+ + + +

The main advantages of the third mechanism are that you can remove event handler code if needed, using removeEventListener(), and you can add multiple listeners of the same type to elements if required. For example, you can call addEventListener('click', function() { ... }) on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Note: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example jQuery) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.

+
+ +

Other event concepts

+ +

In this section, we will briefly cover some advanced concepts that are relevant to events. It is not important to understand these fully at this point, but it might serve to explain some code patterns you'll likely come across from time to time.

+ +

Event objects

+ +

Sometimes inside an event handler function, you might see a parameter specified with a name such as event, evt, or simply e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:

+ +
function bgChange(e) {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

Here you can see that we are including an event object, e, in the function, and in the function setting a background color style on e.target — which is the button itself. The target property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.

+ +
+

Note: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. e/evt/event are most commonly used by developers because they are short and easy to remember. It's always good to stick to a standard.

+
+ +

e.target is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as e.target, rather than having to select it in some more difficult way. In the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when clicked:

+ +
var divs = document.querySelectorAll('div');
+
+for (var i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

The output is as follows (try clicking around on it — have fun):

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object (see the {{domxref("Event")}} object reference for a full list). Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The Media Recorder API, for example, has a dataavailable event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding ondataavailable handler's event object has a data property available containing the recorded audio or video data to allow you to access it and do something with it.

+ +

Preventing default behavior

+ +

Sometimes, you'll come across a situation where you want to stop an event doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behaviour is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)

+ +

The trouble comes when the user has not submitted the data correctly — as a developer, you'll want to stop the submission to the server and give them an error message telling them what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.

+ +

First, a simple HTML form that requires you to enter your first and last name:

+ +
<form>
+  <div>
+    <label for="fname">First name: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Last name: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+ + + +

Now some JavaScript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the preventDefault() function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:

+ +
var form = document.querySelector('form');
+var fname = document.getElementById('fname');
+var lname = document.getElementById('lname');
+var submit = document.getElementById('submit');
+var para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}
+ +

Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is ok for example purposes. The output is as follows:

+ +

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: for the full source code, see preventdefault-validation.html (also see it running live here.)

+
+ +

Event bubbling and capture

+ +

The final subject to cover here is something that you'll not come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) It is also available live below:

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:

+ +
<button>Display video</button>
+
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+ +

When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

We then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>. The idea is that when the area of the <div> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

But there's a problem — currently, when you click the video it starts to play, but it causes the <div> to also be hidden at the same time. This is because the video is inside the <div> — it is part of it — so clicking on the video actually runs both the above event handlers.

+ +

Bubbling and capturing explained

+ +

When an event is fired on an element that has parent elements (e.g. the {{htmlelement("video")}} in our case), modern browsers run two different phases — the capturing phase and the bubbling phase.

+ +

In the capturing phase:

+ + + +

In the bubbling phase, the exact opposite occurs:

+ + + +

+ +

(Click on image for bigger diagram)

+ +

In modern browsers, by default, all event handlers are registered in the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <video> element outwards to the <html> element. Along the way:

+ + + +

Fixing the problem with stopPropagation()

+ +

This is annoying behavior, but there is a way to fix it! The standard event object has a function available on it called stopPropagation(), which when invoked on a handler's event object makes it so that handler is run, but the event doesn't bubble any further up the chain, so no more handlers will be run.

+ +

We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

You can try making a local copy of the show-video-box.html source code and having a go at fixing it yourself, or looking at the fixed result in show-video-box-fixed.html (also see the source code here).

+ +
+

Note: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.

+
+ +
+

Note: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using addEventListener(), and setting the optional third property to true.

+
+ +

Event delegation

+ +

Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?

+ +

A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the click event listener on the parent <ul>, and events will bubble from the list items to the <ul>.

+ +

This concept is explained further on David Walsh's blog, with multiple examples — see How JavaScript Event Delegation Works.

+ +

Conclusion

+ +

You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.

+ +

Also, it is important to understand that the different contexts in which JavaScript is used tend to have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.

+ +

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/es/learn/javascript/building_blocks/functions/index.html b/files/es/learn/javascript/building_blocks/functions/index.html new file mode 100644 index 0000000000..d05ae34969 --- /dev/null +++ b/files/es/learn/javascript/building_blocks/functions/index.html @@ -0,0 +1,400 @@ +--- +title: Funciones — bloques de código reutilizables +slug: Learn/JavaScript/Building_blocks/Functions +tags: + - API + - Funciones + - JavaScript + - Métodos + - Navegador +translation_of: Learn/JavaScript/Building_blocks/Functions +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
+ +

Otro concepto esencial en la codificación son las funciones, que te permiten almacenar un fragmento de código que realiza una única tarea dentro de un bloque definido, y luego llamar a ese código siempre que lo necesites utilizando un único comando breve -- en lugar de tener que escribir el mismo codigo varias veces. En este artículo exploraremos conceptos fundamentales detrás de funciones tales como sintaxis básica, cómo invocarlas y definirlas, alcance(scope) y parámetros.

+ + + + + + + + + + + + +
Prerequisites:Conocimientos basicos de informatica, conocimiento basico de   HTML y CSS, JavaScript first steps.
Objective:Entender los conceptos fundamentales detras de las funciones JavaScript.
+ +

¿Dónde encuentro las funciones? 

+ +

En JavaScript vas a encontrar funciones por todos lados. De hecho, nosotros hemos usados funciones todo el tiempo a lo largo del curso; solo que no hemos hablado mucho sobre ellas. Ahora es el momento, igual, para comenzar a hablar explicitamente sobre las funciones y explorar su sintaxis.

+ +

Básicamente cada vez que haces uso de código JavaScript que contiene parentesis como () y no estás usando estructuras de lenguaje como for loop, while, do, do while, estás usando una función! 

+ +

Funciones incluídas en los navegadores

+ +

A lo largo de este curso hemos usado muchas funciones incluídas del navegador. Por ejemplo, cuando manipulamos una cadena de texto o string:

+ +
let miTexto = 'Soy una cadena de texto!';
+let nuevaCadena = miTexto.replace('cadena', 'ensalada');
+console.log(nuevaCadena);
+// la función de cadena de texto replace() toma una cadena,
+// reemplaza una palabra por otra, y devuelve
+// una nueva cadena con el reemplazo hecho.
+ +

O cada vez que manipulamos un array:

+ +
let miArray = ['Yo', 'amo', 'el', 'chocolate', 'y', 'las', 'ranas'];
+let armarCadena = miArray.join(' ');
+console.log(armarCadena);
+// La función join() toma un array,
+// une todos sus elementos en una cadena o string
+// y devuelve esta nueva cadena.
+ +

O cada vez que generamos un número al azar:

+ +
var miNumero = Math.random();
+console.log(miNumero);
+// La función Math.random() genera un número aleatorio
+// entre 0 and 1 y devuelve ese número.
+
+ +

...estamos usando una función!

+ +
+

Nota: Sientase libre de ingresar esas líneas de código en la consola JavaScript de su navegador, para familiarizarse con sus funcionalidades. 

+
+ +

El lenguaje JavaScript contiene muchas funciones integradas que te permiten realizar cosas muy utilies sin escribir el código tu mismo. De hecho, parte del código que llamas (una palabra elegante para decir correr o ejecutar) cuando invocas una función integrada puede no estar escrita en JavaScript —muchas de estas funciones están llamando partes del código del navegador de fondo, que está escrito principalmente en lenguajes de sistema de bajo nivel como C ++, no en lenguajes web como JavaScript.

+ +

Bear in mind that some built-in browser functions are not part of the core JavaScript language — some are defined as part of browser APIs, which build on top of the default language to provide even more functionality (refer to this early section of our course for more descriptions). We'll look at using browser APIs in more detail in a later module.

+ +

Functions versus methods

+ +

One thing we need to clear up before we move on — technically speaking, built in browser functions are not functions — they are methods. This sounds a bit scary and confusing, but don't worry — the words function and method are largely interchangeable, at least for our purposes, at this stage in your learning.

+ +

The distinction is that methods are functions defined inside objects. Built-in browser functions (methods) and variables (which are called properties) are stored inside structured objects, to make the code more efficient and easier to handle.

+ +

You don't need to learn about the inner workings of structured JavaScript objects yet — you can wait until our later module that will teach you all about the inner workings of objects, and how to create your own. For now, we just wanted to clear up any possible confusion of method versus function — you are likely to meet both terms as you look at the available related resources across the Web.

+ +

Custom functions

+ +

You've also seen a lot of custom functions in the course so far — functions defined in your code, not inside the browser. Anytime you saw a custom name with parentheses straight after it, you were using a custom function. In our random-canvas-circles.html example (see also the full source code) from our loops article, we included a custom draw() function that looked like this:

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i < 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+ +

This function draws 100 random circles inside an {{htmlelement("canvas")}} element. Every time we want to do that, we can just invoke the function with this

+ +
draw();
+ +

rather than having to write all that code out again every time we want to repeat it. And functions can contain whatever code you like — you can even call other functions from inside functions. The above function for example calls the random() function three times, which is defined by the following code:

+ +
function random(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

We needed this function because the browser's built-in Math.random() function only generates a random decimal number between 0 and 1. We wanted a random whole number between 0 and a specified number.

+ +

Invoking functions

+ +

You are probably clear on this by now, but just in case ... to actually use a function after it has been defined, you've got to run — or invoke — it. This is done by including the name of the function in the code somewhere, followed by parentheses.

+ +
function myFunction() {
+  alert('hello');
+}
+
+myFunction()
+// calls the function once
+ +

Anonymous functions

+ +

You may see functions defined and invoked in slightly different ways. So far we have just created a function like so:

+ +
function myFunction() {
+  alert('hello');
+}
+ +

But you can also create a function that doesn't have a name:

+ +
function() {
+  alert('hello');
+}
+ +

This is called an anonymous function — it has no name! It also won't do anything on its own. You generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked:

+ +
var myButton = document.querySelector('button');
+
+myButton.onclick = function() {
+  alert('hello');
+}
+ +

The above example would require there to be a {{htmlelement("button")}} element available on the page to select and click. You've already seen this structure a few times throughout the course, and you'll learn more about and see it in use in the next article.

+ +

You can also assign an anonymous function to be the value of a variable, for example:

+ +
var myGreeting = function() {
+  alert('hello');
+}
+ +

This function could now be invoked using:

+ +
myGreeting();
+ +

This effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example:

+ +
var anotherGreeting = function() {
+  alert('hello');
+}
+ +

This function could now be invoked using either of

+ +
myGreeting();
+anotherGreeting();
+ +

But this would just be confusing, so don't do it! When creating functions, it is better to just stick to this form:

+ +
function myGreeting() {
+  alert('hello');
+}
+ +

You will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being clicked — using an event handler. Again, this looks something like this:

+ +
myButton.onclick = function() {
+  alert('hello');
+  // I can put as much code
+  // inside here as I want
+}
+ +

Function parameters

+ +

Some functions require parameters to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly.

+ +
+

Note: Parameters are sometimes called arguments, properties, or even attributes.

+
+ +

As an example, the browser's built-in Math.random() function doesn't require any parameters. When called, it always returns a random number between 0 and 1:

+ +
var myNumber = Math.random();
+ +

The browser's built-in string replace() function however needs two parameters — the substring to find in the main string, and the substring to replace that string with:

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+ +
+

Note: When you need to specify multiple parameters, they are separated by commas.

+
+ +

It should also be noted that sometimes parameters are optional — you don't have to specify them. If you don't, the function will generally adopt some kind of default behavior. As an example, the array join() function's parameter is optional:

+ +
var myArray = ['I', 'love', 'chocolate', 'frogs'];
+var madeAString = myArray.join(' ');
+// returns 'I love chocolate frogs'
+var madeAString = myArray.join();
+// returns 'I,love,chocolate,frogs'
+ +

If no parameter is included to specify a joining/delimiting character, a comma is used by default.

+ +

Function scope and conflicts

+ +

Let's talk a bit about {{glossary("scope")}} — a very important concept when dealing with functions. When you create a function, the variables and other things defined inside the function are inside their own separate scope, meaning that they are locked away in their own separate compartments, unreachable from inside other functions or from code outside the functions.

+ +

The top level outside all your functions is called the global scope. Values defined in the global scope are accessible from everywhere in the code.

+ +

JavaScript is set up like this for various reasons — but mainly because of security and organization. Sometimes you don't want variables to be accessible from everywhere in the code — external scripts that you call in from elsewhere could start to mess with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. This might be done maliciously, or just by accident.

+ +

For example, say you have an HTML file that is calling in two external JavaScript files, and both of them have a variable and a function defined that use the same name:

+ +
<!-- Excerpt from my HTML -->
+<script src="first.js"></script>
+<script src="second.js"></script>
+<script>
+  greeting();
+</script>
+ +
// first.js
+var name = 'Chris';
+function greeting() {
+  alert('Hello ' + name + ': welcome to our company.');
+}
+ +
// second.js
+var name = 'Zaptec';
+function greeting() {
+  alert('Our company is called ' + name + '.');
+}
+ +

Both functions you want to call are called greeting(), but you can only ever access the second.js file's greeting() function — it is applied to the HTML later on in the source code, so its variable and function overwrite the ones in first.js.

+ +
+

Note: You can see this example running live on GitHub (see also the source code).

+
+ +

Keeping parts of your code locked away in functions avoids such problems, and is considered best practice.

+ +

It is a bit like a zoo. The lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosures — in the same manner as the function scopes. If they were able to get into other enclosures, problems would occur. At best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. At worst, the lions and tigers might try to eat the penguins!

+ +

+ +

The zoo keeper is like the global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc.

+ +

Active learning: Playing with scope

+ +

Let's look at a real example to demonstrate scoping.

+ +
    +
  1. First, make a local copy of our function-scope.html example. This contains two functions called a() and b(), and three variables — x, y, and z — two of which are defined inside the functions, and one in the global scope. It also contains a third function called output(), which takes a single parameter and outputs it in a paragraph on the page.
    2. +
  2. Open the example up in a browser and in your text editor.
    3. +
  3. Open the JavaScript console in your browser developer tools. In the JavaScript console, enter the following command: + 
    output(x);
    + You should see the value of variable x output to the screen.
    4. +
  4. Now try entering the following in your console + 
    output(y);
+output(z);
    + Both of these should return an error along the lines of "ReferenceError: y is not defined". Why is that? Because of function scope — y and z are locked inside the a() and b() functions, so output() can't access them when called from the global scope.
    5. +
  5. However, what about when it's called from inside another function? Try editing a() and b() so they look like this: + 
    function a() {
+  var y = 2;
+  output(y);
+}
+
+function b() {
+  var z = 3;
+  output(z);
+}
    + Save the code and reload it in your browser, then try calling the a() and b() functions from the JavaScript console: + + 
    a();
+b();
    + You should see the y and z values output in the page. This works fine, as the output() function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. output() itself is available from anywhere, as it is defined in the global scope.
    6. +
  6. Now try updating your code like this: + 
    function a() {
+  var y = 2;
+  output(x);
+}
+
+function b() {
+  var z = 3;
+  output(x);
+}
    + Save and reload again, and try this again in your JavaScript console: + + 
    a();
+b();
    + Both the a() and b() call should output the value of x — 1. These work fine because even though the output() calls are not in the same scope as x is defined in, x is a global variable so is available inside all code, everywhere.
    7. +
  7. Finally, try updating your code like this: + 
    function a() {
+  var y = 2;
+  output(z);
+}
+
+function b() {
+  var z = 3;
+  output(y);
+}
    + Save and reload again, and try this again in your JavaScript console: + + 
    a();
+b();
    + This time the a() and b() calls will both return that annoying "ReferenceError: z is not defined" error — this is because the output() calls and the variables they are trying to print are not defined inside the same function scopes — the variables are effectively invisible to those function calls.
    8. +
+ +
+

Note: The same scoping rules do not apply to loop (e.g. for() { ... }) and conditional blocks (e.g. if() { ... }) — they look very similar, but they are not the same thing! Take care not to get these confused.

+
+ +
+

Note: The ReferenceError: "x" is not defined error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.

+
+ + + +

Functions inside functions

+ +

Keep in mind that you can call a function from anywhere, even inside another function.  This is often used as a way to keep code tidy — if you have a big complex function, it is easier to understand if you break it down into several sub-functions:

+ +
function myBigFunction() {
+  var myValue;
+
+  subFunction1();
+  subFunction2();
+  subFunction3();
+}
+
+function subFunction1() {
+  console.log(myValue);
+}
+
+function subFunction2() {
+  console.log(myValue);
+}
+
+function subFunction3() {
+  console.log(myValue);
+}
+
+ +

Just make sure that the values being used inside the function are properly in scope. The example above would throw an error ReferenceError: myValue is not defined, because although the myValue variable is defined in the same scope as the function calls, it is not defined inside the function definitions — the actual code that is run when the functions are called. To make this work, you'd have to pass the value into the function as a parameter, like this:

+ +
function myBigFunction() {
+  var myValue = 1;
+
+  subFunction1(myValue);
+  subFunction2(myValue);
+  subFunction3(myValue);
+}
+
+function subFunction1(value) {
+  console.log(value);
+}
+
+function subFunction2(value) {
+  console.log(value);
+}
+
+function subFunction3(value) {
+  console.log(value);
+}
+ +

Conclusion

+ +

This article has explored the fundamental concepts behind functions, paving the way for the next one in which we get practical and take you through the steps to building up your own custom function.

+ +

See also

+ + + + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + +<gdiv></gdiv> diff --git a/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html b/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html new file mode 100644 index 0000000000..205f1a11aa --- /dev/null +++ b/files/es/learn/javascript/building_blocks/galeria_de_imagenes/index.html @@ -0,0 +1,144 @@ +--- +title: Galería de imágenes +slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes +translation_of: Learn/JavaScript/Building_blocks/Image_gallery +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Ahora que hemos analizado los bloques de construcción fundamentales de JavaScript, pongamos a prueba tu conocimiento de bucles, funciones, condicionales y eventos, creando un elemento que comumente vemos en muchos sitios web, una Galería de imágenes "motorizada" por JavaScript .

+ + + + + + + + + + + + +
Prerequisitos:Antes de intentar esta evaluación deberías de haber trabajado con todos los artículos en éste módulo.
Objetivo:Evaluar la comprensión de los bucles, funciones, condicionales y eventos de JavaScript..
+ +

Punto de partida

+ +

Para realizar esta evaluación, debería descárgarse archivoZip para el ejemplo, descomprímalo en algún lugar de su computadora y haga el ejercicio localmente para empezar.

+ +

Opcionalmente, puedes usar un sitio como JSBin o Glitch para realizar tu evaluación. Puede pegar el HTML, CSS y JavaScript dentro de uno de estos editores online. Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, siéntase libre de ponerlos en línea <script> / <style> elementos dentro de la página HTML.

+ +
+

Nota: Si se atascascas con algo, entonces pregúntenos para ayudarlo — vea la sección de {{anch("evaluación o ayuda adicional")}} al final de esta página.

+
+ +

Resumen del proyecto

+ +

Ha sido provisto con algún contenido de HTML, CSS e imágenes, también algunas líneas de código en JavaScript; necesitas escribir las líneas de código en JavaScript necesatio para transformarse en un programa funcional. El  HTML body luce así:

+ +
<h1>Image gallery example</h1>
+
+<div class="full-img">
+  <img class="displayed-img" src="images/pic1.jpg">
+  <div class="overlay"></div>
+  <button class="dark">Darken</button>
+</div>
+
+<div class="thumb-bar">
+
+</div>
+ +

El ejemplo se ve así:

+ +

+ + + +

Las partes más interesantes del archivo example's CSS :

+ + + +

Your JavaScript needs to:

+ + + +

To give you more of an idea, have a look at the finished example (no peeking at the source code!)

+ +

Steps to complete

+ +

The following sections describe what you need to do.

+ +

Looping through the images

+ +

We've already provided you with lines that store a reference to the thumb-bar <div> inside a constant called thumbBar, create a new <img> element, set its src attribute to a placeholder value xxx, and append this new <img> element inside thumbBar.

+ +

You need to:

+ +
    +
  1. Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.
    2. +
  2. In each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. We are setting the value of the src attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is pic1.jpg, pic2.jpg, etc.
    3. +
+ +

Adding an onclick handler to each thumbnail image

+ +

In each loop iteration, you need to add an onclick handler to the current newImage — this handler should find the value of the src attribute of the current image. Set the src attribute value of the displayed-img <img> to the src value passed in as a parameter.

+ +

Writing a handler that runs the darken/lighten button

+ +

That just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a constant called btn. You need to add an onclick handler that:

+ +
    +
  1. Checks the current class name set on the <button> — you can again achieve this by using getAttribute().
    2. +
  2. If the class name is "dark", changes the <button> class to "light" (using setAttribute()), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <div> to "rgba(0,0,0,0.5)".
    3. +
  3. If the class name not "dark", changes the <button> class to "dark", its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <div> to "rgba(0,0,0,0)".
    4. +
+ +

The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.

+ +
btn.setAttribute('class', xxx);
+btn.textContent = xxx;
+overlay.style.backgroundColor = xxx;
+ +

Hints and tips

+ + + +

Assessment or further help

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Image gallery".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
+ +

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/es/learn/javascript/building_blocks/index.html b/files/es/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..de9e7c7c4a --- /dev/null +++ b/files/es/learn/javascript/building_blocks/index.html @@ -0,0 +1,71 @@ +--- +title: Elementos básicos de JavaScript +slug: Learn/JavaScript/Building_blocks +tags: + - CodingScripting + - Condicionales + - Evaluación + - Funciones + - Guía + - JavaScript + - Landing + - NeedsTranslation + - Principiante + - TopicStub + - bucles + - eventos + - introducción + - 'l10n:priority' + - modulo +translation_of: Learn/JavaScript/Building_blocks +--- +
{{LearnSidebar}}
+ +

En este módulo, continuamos nuestra cobertura de todas las características clave de JavaScript, tornando nuestra atención a tipos de código comúnmente encontrados tales como enunciados condicionales, bucles (loops), funciones, y eventos. Ya has visto estas cosas en este curso, pero solo de pasada aquí lo hablaremos mas explícitamente.

+ +

Quieres transformarte en un desarrollador web front-end?

+ +

Hemos reunido un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.

+ +

Empieza aquí

+ +

Pre-requisitos

+ +

Antes de empezar este módulo, deberías ya tener alguna familiaridad con lo básico de HTML y CSS,  y también deberías haber trabajado todos lo módulos previos, JavaScript primeros pasos.

+ +
+

Nota: Si estas trabajando en una computadora/tablet/otro dispositivo donde no tienes la capacidad de crear tus propios archivos, podrías practicar (la mayoría de) los ejemplos de código en un programa en linea tales como JSBin o Thimble.

+
+ +

Guías

+ +
+
 Tomando decisiones en tu código — condicionales
+
En cualquier lenguaje de programación, el código necesita tomar decisiones y efectuar acciones consiguientemente dependiendo de las diferentes ordenes ingresadas. Por ejemplo, en un juego, si el numero de vidas del jugador es 0, entonces se termina el juego. En una aplicación del clima, si esta siendo vista por la mañana, muestra un gráfico del amanecer; muestra estrellas y una luna si es de noche. En este artículo exploraremos como los condicionales estructuran el trabajo en Javascript.
+
Bucles de código
+
A veces necesitas que una tarea se haga más de una vez. Por ejemplo, revisar toda una lista de nombres. En programación, los bucles ('loops' en inglés) hacen este trabajo muy bien. Aca veremos la estructura de loops en Javascript.
+
Funciones — bloques de código reusables
+
Otro concepto fundamental en código es funciones. Funciones te permite almacenar una pieza de código que ejecuta una sola tarea dentro de un bloque definido, y después llamar ese código cuando lo necesitas usando un comando corto  en lugar de tener que escribir el mismo código varias veces. En este articulo exploraremos conceptos fundamentales detrás de las funciones tales como sintaxis básica, cómo invocar y definir funciones, ámbito o alcance (scope), y parámetros.
+
Crea tu propia función
+
Con la información presentada en el artículo anterior, este artículo, pretende demostrar una parte práctica. Se podrá desarrollar una función propia, y durante el desarrollo se presentarán algunos consejos prácticos y útiles para trabajar con funciones.
+
 Una función devuelve valores
+
Un concepto fundamental que ha de tenerse en cuenta, es que las funciones pueden devolver valores al finalizar su ejecución, aunque algunas funciones también pueden no devolver ningún valor. Es importante entender como son esos valores, qué tipos pueden tener y cómo aprovechar el valor devuelto por la función en el programa.
+
Introducción a eventos
+
Los eventos son acciones u ocurrencias que aparecen durante la ejecución del programa, y que son reportadas por el sistema, de forma que se pueda responder a los eventos de la forma deseada. Por ejemplo, si un usuario hace un click en un botón de una página web, puede que se quiera que ese evento inicie una acción en el que se muestre cierta información en un cuadro de información.  En este último artículo se presentarán y describirán los conceptos necesarios con respecto a los eventos, y como funcionan en un navegador.
+
+ +

Evaluaciones

+ +

La siguiente evaluación probara tu entendimiento de lo básico de Javascript cubierto en las guias anteriores.

+ +
+
Galeria de imagen
+
Ahora que hemos visto los bloques constructores fundamentales de JavaScript, probaremos tus conocimientos en bucles, funciones, condicionales y eventos construyendo un item bastante común en muchos sitios web — una galería de imágenes creada con JavaScript. 
+
+ +

Ver también

+ +
+
Aprender JavaScript
+
Un excelente recurso para aspirantes a desarrolladores web — Aprenda JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiadas por una evaluación automatizada. Las primeras 40 lecciones son gratuitas, y el curso completo está disponible por un pequeño pago único.
+
diff --git a/files/es/learn/javascript/building_blocks/return_values/index.html b/files/es/learn/javascript/building_blocks/return_values/index.html new file mode 100644 index 0000000000..2602a7217f --- /dev/null +++ b/files/es/learn/javascript/building_blocks/return_values/index.html @@ -0,0 +1,168 @@ +--- +title: Una función retorna valores +slug: Learn/JavaScript/Building_blocks/Return_values +translation_of: Learn/JavaScript/Building_blocks/Return_values +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
+ +

Hay un último concepto esencial para que discutamos en este curso, para cerrar nuestra visión de las funciones: — lo valores que se devuelven. Algunas funciones no devuelven un valor significativo después de su finalización, pero otras sí, y es importante comprender cuáles son sus valores, cómo utilizarlos en su código y cómo hacer que sus propias funciones personalizadas devuelvan valores útiles. Cubriremos todos estos a continuación.

+ + + + + + + + + + + + +
Prerequisites: +

Basic computer literacy, a basic understanding of HTML and CSS, JavaScript first steps, Functions — reusable blocks of code.

+
Objective:To understand function return values, and how to make use of them.
+ +

¿Qué son los valores de retorno?

+ +

Los valores de retorno son exactamente como suenan: los valores devueltos por la función cuando se completa. Ya has alcanzado los valores de retorno varias veces, aunque es posible que no hayas pensado en ellos explícitamente. Volvamos a un código familiar:

+ +
var myText = 'I am a string';
+var newString = myText.replace('string', 'sausage');
+console.log(newString);
+// la función de cadena replace () toma una cadena,
+// sustituyendo una subcadena con otra y devoviendo
+// ​​una cadena nueva con la sustitución realizada
+ +

Vimos exactamente este bloque de código en nuestro primer artículo de función. Estamos invocando la función replace () en la cadena myText, y le pasamos dos parámetros: la subcadena a encontrar y la subcadena con la que reemplazarla. Cuando esta función se completa (termina de ejecutarse), devuelve un valor, que es una nueva cadena con el reemplazo realizado. En el código anterior, estamos guardando este valor de retorno como el valor de la variable newString.

+ +

Si observa la página de referencia MDN de la función de reemplazo, verá una sección llamada Valor de retorno. Es muy útil conocer y comprender qué valores devuelven las funciones, por lo que tratamos de incluir esta información siempre que sea posible.

+ +

Algunas funciones no devuelven un valor de retorno como tal (en nuestras páginas de referencia, el valor de retorno aparece como void o undefined en tales casos). Por ejemplo, en la función displayMessage () que creamos en el artículo anterior, no se devuelve ningún valor específico como resultado de la función que se invoca. Simplemente hace que aparezca un cuadro en algún lugar de la pantalla, ¡eso es todo!

+ +

Generalmente, se usa un valor de retorno donde la función es un paso intermedio en un cálculo de algún tipo. Quieres llegar a un resultado final, que involucra algunos valores. Esos valores deben ser calculados por una función, que luego devuelve los resultados para que puedan usarse en la siguiente etapa del cálculo.

+ +

Using return values in your own functions

+ +

To return a value from a custom function, you need to use ... wait for it ... the return keyword. We saw this in action recently in our random-canvas-circles.html example. Our draw() function draws 100 random circles somewhere on an HTML {{htmlelement("canvas")}}:

+ +
function draw() {
+  ctx.clearRect(0,0,WIDTH,HEIGHT);
+  for (var i = 0; i < 100; i++) {
+    ctx.beginPath();
+    ctx.fillStyle = 'rgba(255,0,0,0.5)';
+    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+    ctx.fill();
+  }
+}
+ +

Inside each loop iteration, three calls are made to the random() function, to generate a random value for the current circle's x coordinate, y coordinate, and radius, respectively. The random() function takes one parameter — a whole number — and it returns a whole random number between 0 and that number. It looks like this:

+ +
function randomNumber(number) {
+  return Math.floor(Math.random()*number);
+}
+ +

This could be written as follows:

+ +
function randomNumber(number) {
+  var result = Math.floor(Math.random()*number);
+  return result;
+}
+ +

But the first version is quicker to write, and more compact.

+ +

We are returning the result of the calculation Math.floor(Math.random()*number) each time the function is called. This return value appears at the point the function was called, and the code continues. So for example, if we ran the following line:

+ +
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+ +

and the three random() calls returned the values 500, 200, and 35, respectively, the line would actually be run as if it were this:

+ +
ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+ +

The function calls on the line are run first and their return values substituted for the function calls, before the line itself is then executed.

+ +

Active learning: our own return value function

+ +

Let's have a go at writing our own functions featuring return values.

+ +
    +
  1. First of all, make a local copy of the function-library.html file from GitHub. This is a simple HTML page containing a text {{htmlelement("input")}} field and a paragraph. There's also a {{htmlelement("script")}} element in which we have stored a reference to both HTML elements in two variables. This little page will allow you to enter a number into the text box, and display different numbers related to it in the paragraph below.
    2. +
  2. Let's add some useful functions to this <script> element. Below the existing two lines of JavaScript, add the following function definitions: + 
    function squared(num) {
+  return num * num;
+}
+
+function cubed(num) {
+  return num * num * num;
+}
+
+function factorial(num) {
+  var x = num;
+  while (x > 1) {
+    num *= x-1;
+    x--;
+  }
+  return num;
+}
    + The squared() and cubed() functions are fairly obvious — they return the square or cube of the number given as a parameter. The factorial() function returns the factorial of the given number.
    3. +
  3. Next, we're going to include a way to print out information about the number entered into the text input. Enter the following event handler below the existing functions: + 
    input.onchange = function() {
+  var num = input.value;
+  if (isNaN(num)) {
+    para.textContent = 'You need to enter a number!';
+  } else {
+    para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                       num + ' cubed is ' + cubed(num) + '. ' +
+                       num + ' factorial is ' + factorial(num) + '.';
+  }
+}
    + +

    Here we are creating an onchange event handler that runs whenever the change event fires on the text input — that is, when a new value is entered into the text input, and submitted (enter a value then press tab for example). When this anonymous function runs, the existing value entered into the input is stored in the num variable.

    + +

    Next, we do a conditional test — if the entered value is not a number, we print an error message into the paragraph. The test looks at whether the expression isNaN(num) returns true. We use the isNaN() function to test whether the num value is not a number — if so, it returns true, and if not, false.

    + +

    If the test returns false, the num value is a number, so we print out a sentence inside the paragraph element stating what the square, cube, and factorial of the number are. The sentence calls the squared(), cubed(), and factorial() functions to get the required values.

    +
    4. +
  4. Save your code, load it in a browser, and try it out.
    5. +
+ +
+

Note: If you have trouble getting the example to work, feel free to check your code against the finished version on GitHub (see it running live also), or ask us for help.

+
+ +

At this point, we'd like you to have a go at writing out a couple of functions of your own and adding them to the library. How about the square or cube root of the number, or the circumference of a circle with a radius of length num?

+ +

This exercise has brought up a couple of important points besides being a study on how to use the return statement. In addition, we have:

+ + + +

Conclusion

+ +

So there we have it — functions are fun, very useful and, although there's a lot to talk about in regards to their syntax and functionality, fairly understandable given the right articles to study.

+ +

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.html new file mode 100644 index 0000000000..0c03392e7d --- /dev/null +++ b/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -0,0 +1,788 @@ +--- +title: Almacenamiento del lado cliente +slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +tags: + - API + - Almacenaje + - Article + - CodingScripting + - Guía + - IndexedDB + - JavaScript + - Principiante + - aprende +translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage +--- +

{{LearnSidebar}}

+ +
{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Los navegadores web modernos admiten varias formas para que los sitios web almacenen datos en la computadora del usuario, con el permiso del usuario, y luego los recuperen cuando sea necesario. Esto te permite conservar los datos para el almacenamiento a largo plazo, guardar sitios o documentos para su uso sin conexión, conservar la configuración específica del usuario para tu sitio y más. Este artículo explica los conceptos básicos de cómo funcionan.

+ + + + + + + + + + + + +
Prerrequisitos:Conceptos básicos de JavaScript (consulta {{web.link("/es/docs/Learn/JavaScript/First_steps", "primeros pasos")}}, {{web.link("/es/docs/Learn/JavaScript/Building_blocks", "bloques de construcción")}}, {{web.link("/es/docs/Learn/JavaScript/Objects", "objetos JavaScript")}}), los {{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Introducción", "conceptos básicos de las APIs de lado del cliente")}}
Objetivo:Aprender a utilizar las APIs de almacenamiento de lado del cliente para almacenar datos de aplicaciones.
+ +

¿Almacenamiento de lado del cliente?

+ +

En otra parte del área de aprendizaje de MDN, hablamos sobre la diferencia entre {{web.link("/es/docs/Learn/Server-side/First_steps/Client-Server_overview#Sitios_estaticos", "sitios estáticos")}} y {{web.link("/es/docs/Learn/Server-side/First_steps/Client-Server_overview#Sitios_dinamicos", "sitios dinámicos")}}. La mayoría de los principales sitios web modernos son dinámicos: almacenan datos en el servidor utilizando algún tipo de base de datos (almacenamiento de lado del servidor) y luego ejecutan {{web.link("/es/docs/Learn/Server-side", "de lado del servidor")}} para recuperar los datos necesarios, insertarlos en plantillas de páginas estáticas y entregar el HTML resultante al cliente para que lo muestre el navegador del usuario.

+ +

El almacenamiento de lado del cliente funciona con principios similares, pero tiene diferentes usos. Consiste en una API de JavaScript que te permiten almacenar datos en el cliente (es decir, en la máquina del usuario) y luego recuperarlos cuando sea necesario. Esto tiene muchos usos distintos, como:

+ + + +

A menudo, el almacenamiento de lado del cliente y de lado del servidor se utilizan juntos. Por ejemplo, puedes descargar un lote de archivos de música (quizás utilizados por un juego web o una aplicación de reproducción de música), almacenarlos dentro de una base de datos de lado del cliente y reproducirlos según sea necesario. El usuario solo tendría que descargar los archivos de música una vez; en las visitas posteriores, se recuperarían de la base de datos.

+ +
+

Nota: Existen límites en la cantidad de datos que puedes almacenar utilizando las APIs de almacenamiento de lado del cliente (posiblemente tanto por API individual como acumulativamente); el límite exacto varía según el navegador y posiblemente según la configuración del usuario. Consulta {{web.link("/es/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria", "límites de almacenamiento del navegador y criterios de desalojo")}} para obtener más información.

+
+ +

Vieja escuela: cookies

+ +

El concepto de almacenamiento de lado del cliente existe desde hace mucho tiempo. Desde los primeros días de la web, los sitios han utilizado {{web.link("/es/docs/Web/HTTP/Cookies", "cookies")}} para almacenar información y personalizar la experiencia del usuario en los sitios web. Son la forma más antigua de almacenamiento de lado del cliente que se usa comúnmente en la web.

+ +

En estos días, existen mecanismos más fáciles disponibles para almacenar datos de lado del cliente, por lo tanto, no te enseñaremos cómo usar las cookies en este artículo. Sin embargo, esto no significa que las cookies sean completamente inútiles en la web moderna; todavía se usan comúnmente para almacenar datos relacionados con la personalización y el estado del usuario, p. ej. ID de sesión y fragmentos de acceso. Para obtener más información sobre las cookies, consulta nuestro artículo {{web.link("/es/docs/Web/HTTP/Cookies", "Uso de cookies HTTP")}}.

+ +

Nueva escuela: almacenamiento web e IndexedDB

+ +

Las características "más fáciles" que mencionamos anteriormente son las siguientes:

+ + + +

Aprenderás más sobre estas APIs a continuación.

+ +

El futuro: API de caché

+ +

Algunos navegadores modernos admiten la nueva API {{domxref("Cache")}}. Esta API está diseñada para almacenar respuestas HTTP a solicitudes específicas y es muy útil para hacer cosas como almacenar activos del sitio web sin conexión para que el sitio se pueda usar posteriormente sin una conexión de red. La caché generalmente se usa en combinación con la {{web.link("/es/docs/Web/API/Service_Worker_API", "API del servicio Worker")}}, aunque no necesariamente tiene que ser así.

+ +

El uso de caché y el servicio Workers es un tema avanzado, y no lo cubriremos con gran detalle en este artículo, aunque mostraremos un ejemplo simple en la sección {{anch("Almacenamiento_de_activos_sin_conexion", "Almacenamiento de activos sin conexión")}} a continuación.

+ +

Almacenamiento de datos simples: almacenamiento web

+ +

La {{web.link("/es/docs/Web/API/Web_Storage_API", "API de almacenamiento web")}} es muy fácil de usar: almacena pares de datos simples de nombre/valor (limitado a cadenas, números, etc.) y recupera estos valores cuando sea necesario.

+ +

Sintaxis básica

+ +

Te mostramos como:

+ +
    +
  1. +

    Primero, ve a nuestra plantilla en blanco de almacenamiento web en GitHub (abre esto en una nueva pestaña).

    +
    2. +
  2. +

    Abre la consola JavaScript de las herramientas de desarrollo de tu navegador.

    +
    3. +
  3. +

    Todos tus datos de almacenamiento web están contenidos en dos estructuras similares a objetos dentro del navegador: {{domxref("Window.sessionStorage", "sessionStorage")}} y {{domxref("Window.localStorage", "localStorage")}}. El primero conserva los datos mientras el navegador está abierto (los datos se pierden cuando se cierra el navegador) y el segundo conserva los datos incluso después de que el navegador se cierra y luego se vuelve a abrir. Usaremos el segundo en este artículo, ya que generalmente es más útil.

    + +

    El método {{domxref("Storage.setItem()")}} te permite guardar un elemento de datos en el almacenamiento; toma dos parámetros: el nombre del elemento y su valor. Intenta escribir esto en tu consola de JavaScript (cambia el valor a tu propio nombre, si lo deseas):

    + + 
    localStorage.setItem('nombre','Chris');
    +
    4. +
  4. +

    El método {{domxref("Storage.getItem()")}} toma un parámetro, el nombre de un elemento de datos que deseas recuperar, y devuelve el valor del elemento. Ahora escribe estas líneas en tu consola JavaScript:

    + + 
    let miNombre = localStorage.getItem('nombre');
+miNombre
    + +

    Al escribir en la segunda línea, deberías ver que la variable miNombre ahora contiene el valor del elemento de datos nombre.

    +
    5. +
  5. +

    El método {{domxref("Storage.removeItem()")}} toma un parámetro, el nombre de un elemento de datos que desea eliminar, y elimina ese elemento del almacenamiento web. Escribe las siguientes líneas en tu consola JavaScript:

    + + 
    localStorage.removeItem('nombre');
+let miNombre = localStorage.getItem('nombre');
+miNombre
    + +

    La tercera línea ahora debería devolver null: el elemento nombre ya no existe en el almacenamiento web.

    +
    6. +
+ +

¡Los datos persisten!

+ +

Una característica clave del almacenamiento web es que los datos persisten entre las cargas de la página (e incluso cuando el navegador está apagado, en el caso de localStorage). Veamos esto en acción.

+ +
    +
  1. +

    Abre nuestra plantilla en blanco de almacenamiento web nuevamente, ¡pero esta vez en un navegador diferente al que tiene abierto este tutorial!; Esto hará que sea más fácil de manejar.

    +
    2. +
  2. +

    Escribe estas líneas en la consola JavaScript del navegador:

    + + 
    localStorage.setItem('nombre','Chris');
+let miNombre = localStorage.getItem('nombre');
+miNombre
    + +

    Deberías ver el nombre del elemento devuelto.

    +
    3. +
  3. +

    Ahora cierre el navegador y ábrelo de nuevo.

    +
    4. +
  4. +

    Ingresa las siguientes líneas nuevamente:

    + + 
    let miNombre = localStorage.getItem('nombre');
+miNombre
    + +

    Deberías ver que el valor aún está disponible, aunque el navegador se haya cerrado y luego se haya abierto nuevamente.

    +
    5. +
+ +

Almacenamiento independiente para cada dominio

+ +

Hay un almacén de datos separado para cada dominio (cada dirección web separada cargada en el navegador). Verás que si cargas dos sitios web (por ejemplo, google.com y amazon.com) e intentas almacenar un elemento en un sitio web, no estará disponible para el otro sitio web.

+ +

Esto tiene sentido: ¿puedes imaginar los problemas de seguridad que surgirían si los sitios web pudieran ver los datos de los demás?

+ +

Un ejemplo más complicado

+ +

Apliquemos este conocimiento recién descubierto escribiendo un sencillo ejemplo para darte una idea de cómo se puede usar el almacenamiento web. Nuestro ejemplo te permitirá ingresar un nombre, luego de lo cual la página se actualizará para darte un saludo personalizado. Este estado también persistirá en las recargas de la página/navegador, porque el nombre se guarda en el almacenamiento web.

+ +

Puede encontrar el HTML de ejemplo en personal-greeting.html: contiene un sitio web simple con un encabezado, contenido y pie de página, y un formulario para ingresar tu nombre.

+ +

Ejemplo de almacenamiento

+ +

Construyamos el ejemplo para que puedas entender cómo funciona.

+ +
    +
  1. +

    Primero, haz una copia local de nuestro archivo personal-greeting.html en un nuevo directorio en tu computadora.

    +
    2. +
  2. +

    A continuación, observa cómo nuestro HTML hace referencia a un archivo JavaScript llamado index.js (ve la línea 40). Necesitamos crearlo y escribir nuestro código JavaScript en él. Cree un archivo index.js en el mismo directorio que tu archivo HTML.

    +
    3. +
  3. +

    Comenzaremos creando referencias a todas las características HTML que necesitamos manipular en este ejemplo; las crearemos todas como constantes, ya que estas referencias no necesitan cambiar en el ciclo de vida de la aplicación. Agrega las siguientes líneas a tu archivo JavaScript:

    + + 
    // crea las constantes necesarias
+const rememberDiv = document.querySelector('.remember');
+const forgetDiv = document.querySelector('.forget');
+const form = document.querySelector('form');
+const nameInput = document.querySelector('#entername');
+const submitBtn = document.querySelector('#submitname');
+const forgetBtn = document.querySelector('#forgetname');
+
+const h1 = document.querySelector('h1');
+const personalGreeting = document.querySelector('.personal-greeting');
    +
    4. +
  4. +

    A continuación, necesitamos incluir un pequeño escucha de eventos para evitar que el formulario se envíe cuando se presiona el botón de envío, ya que este no es el comportamiento que queremos. Agrega este fragmento debajo de tu código anterior:

    + + 
    // Evita que el formulario se envíe cuando se presiona un botón
+form.addEventListener('submit', function(e) {
+  e.preventDefault();
+});
    +
    5. +
  5. +

    Ahora necesitamos agregar un escucha de eventos, cuya función controladora se ejecutará cuando se haga clic en el botón "Saludar". Los comentarios explican en detalle qué hace cada bit, pero en esencia aquí tomamos el nombre que el usuario ingresó en el cuadro de entrada de texto y lo guardamos en el almacenamiento web usando setItem(), luego ejecutamos una función llamada nameDisplayCheck() que se encargará de actualizar el texto real del sitio web. Agrega esto al final de tu código:

    + + 
    // ejecuta la función cuando se hace clic en el botón 'Saludar'
+submitBtn.addEventListener('click', function() {
+  // guarda el nombre ingresado en el almacenamiento web
+  localStorage.setItem('name', nameInput.value);
+  // ejecuta nameDisplayCheck() para ordenar la visualización del
+  // saludo personalizado y actualización de la visualización del formulario
+  nameDisplayCheck();
+});
    +
    6. +
  6. +

    En este punto, también necesitamos un controlador de eventos para ejecutar una función cuando se hace clic en el botón "Olvidar"; esto solo se muestra después de hacer clic en el botón "Saludar" (los dos estados del formulario se alternan hacia adelante y hacia atrás). En esta función, eliminamos el elemento name del almacenamiento web usando removeItem(), luego ejecutamos nuevamente nameDisplayCheck() para actualizar la pantalla. Agrega esto al final:

    + + 
    // ejecuta la función cuando se hace clic en el botón 'Olvidar'
+forgetBtn.addEventListener('click', function() {
+  // Elimina el nombre guardado del almacenamiento web
+  localStorage.removeItem('nombre');
+  // ejecuta nameDisplayCheck() para ordenar la visualización del
+  // saludo genérico nuevamente y actualiza la visualización del formulario
+  nameDisplayCheck();
+});
    +
    7. +
  7. +

    Ahora es el momento de definir la propia función nameDisplayCheck(). Aquí verificamos si el elemento de nombre se ha guardado en el almacenamiento web utilizando localStorage.getItem('name') como prueba condicional. Si se ha guardado, esta llamada se evaluará como true; si no, será false. Si es true, mostramos un saludo personalizado, mostramos la parte "Olvidar" del formulario y ocultamos la parte "Saludar" del formulario. Si es false, mostramos un saludo genérico y hacemos lo contrario. Nuevamente, pon el siguiente código en la parte inferior:

    + + 
    // definir la función nameDisplayCheck()
+function nameDisplayCheck() {
+  // verifica si el elemento de datos 'name' está guardado en el almacenamiento web
+  if(localStorage.getItem('name')) {
+    // Si es así, muestra un saludo personalizado
+    let name = localStorage.getItem('name');
+    h1.textContent = 'Bienvenido, ' + name;
+    personalGreeting.textContent = '¡Bienvenido a nuestro sitio web, ' + name + '! Esperamos que te diviertas mientras estés aquí.';
+    // ocultar la parte 'recordar' del formulario y mostrar la parte 'olvidar'
+    forgetDiv.style.display = 'block';
+    rememberDiv.style.display = 'none';
+  } else {
+    // si no, muestra un saludo genérico
+    h1.textContent = 'Bienvenido a nuestro sitio web ';
+    personalGreeting.textContent = 'Bienvenido a nuestro sitio web. Esperamos que se diviertas mientras estés aquí.';
+    // ocultar la parte 'olvidar' del formulario y mostrar la parte 'recordar'
+    forgetDiv.style.display = 'none';
+    rememberDiv.style.display = 'block';
+  }
+}
    +
    8. +
  8. +

    Por último, pero no menos importante, debemos ejecutar la función nameDisplayCheck() cada vez que se carga la página. Si no hacemos esto, el saludo personalizado no persistirá en las recargas de la página. Agrega lo siguiente al final de tu código:

    + + 
    document.body.onload = nameDisplayCheck;
    +
    9. +
+ +

Tu ejemplo está terminado, ¡bien hecho!; Todo lo que queda ahora es guardar tu código y probar tu página HTML en un navegador. Puedes ver nuestra versión finalizada en vivo aquí.

+ +
+

Nota: Hay otro ejemplo un poco más complejo para explorar en {{web.link("/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API", "Uso de la API de almacenamiento web")}}.

+
+ +
+

Nota: En la línea <script src="index.js" defer></script> del código fuente de nuestra versión final, el atributo defer especifica que el contenido del elemento {{htmlelement("script")}} no se ejecutará hasta que la página haya terminado de cargarse.

+
+ +

Almacenamiento de datos complejos — IndexedDB

+ +

La {{web.link("/es/docs/Web/API/IndexedDB_API", "API IndexedDB")}} (a veces abreviada IDB) es un sistema de base de datos completo disponible en el navegador en el que puedes almacenar datos complejos relacionados, tipos de los cuales no se limitan a valores simples como cadenas o números. Puedes almacenar videos, imágenes y casi cualquier otra cosa en una instancia de IndexedDB.

+ +

Sin embargo, esto tiene un costo: IndexedDB es mucho más complejo de usar que la API de almacenamiento web. En esta sección, solo vamos a arañar la superficie de lo que es capaz de hacer, pero te daremos lo suficiente para comenzar.

+ +

Trabajar con un ejemplo de almacenamiento de notas

+ +

Aquí, mostraremos un ejemplo que te permite almacenar notas en tu navegador y verlas y eliminarlas cuando lo desees, lo cual te permitirá crearlo tú mismo y explicar las partes más fundamentales del IDB a medida que avanzamos.

+ +

La aplicación se parece a esta:

+ +

IDB en acción

+ +

Cada nota tiene un título y un cuerpo de texto, cada uno editable individualmente. El código JavaScript que veremos a continuación tiene comentarios detallados para ayudarte a comprender lo que está sucediendo.

+ +

Primeros pasos

+ +
    +
  1. En primer lugar, haz copias locales de nuestros archivos index.html, style.css y index-start.js en un nuevo directorio en tu máquina.
    2. +
  2. Échale un vistazo a los archivos. Verás que el HTML es bastante simple: un sitio web con encabezado y pie de página, así como un área de contenido principal que contiene un lugar para mostrar notas y un formulario para ingresar nuevas notas en la base de datos. El CSS proporciona un estilo simple para aclarar lo que está sucediendo. El archivo JavaScript contiene cinco constantes declaradas que contienen referencias al elemento {{htmlelement("ul")}} en el que se mostrarán las notas, el título y el cuerpo de elementos {{htmlelement("input")}}, el {{htmlelement("form")}} en sí mismo, y el {{htmlelement("button")}}.
    3. +
  3. Cambia el nombre de tu archivo JavaScript a index.js. Ahora estás listo para comenzar a agregarle código.
    4. +
+ +

Configuración inicial de la base de datos

+ +

Ahora veamos lo que tenemos que hacer en primer lugar, para configurar una base de datos.

+ +
    +
  1. +

    Debajo de las declaraciones constantes, agrega las siguientes líneas:

    + + 
    // Crea una instancia de un objeto db para que almacenemos la base de datos abierta
+let db;
    + +

    Aquí estamos declarando una variable llamada db, que luego se usará para almacenar un objeto que representa nuestra base de datos. Usaremos esto en algunos lugares, por lo que hemos declarado globalmente aquí para facilitar las cosas.

    +
    2. +
  2. +

    A continuación, agrega lo siguiente al final de tu código:

    + + 
    window.onload = function() {
+
+};
    + +

    Escribiremos todo nuestro subsiguiente código dentro de esta función controladora de eventos window.onload, llamada cuando se activa el evento {{event("load")}} de la ventana, para asegurarnos de que no intentemos usar la funcionalidad IndexedDB antes de que la aplicación haya terminado de cargarse por completo (podría fallar si no lo hacemos).

    +
    3. +
  3. +

    Dentro del controlador window.onload, agrega lo siguiente:

    + + 
    // Abre nuestra base de datos; se crea si aún no existe
+// (ve onupgradeneeded a continuación)
+let request = window.indexedDB.open('notes_db', 1);
    + +

    Esta línea crea una solicitud para abrir la versión 1 de una base de datos llamada notes_db. Si esta aún no existe, se creará para ti mediante un código posterior. Verás que este patrón de solicitud se usa con mucha frecuencia en IndexedDB. Las operaciones de la base de datos llevan tiempo. No deseas colgar el navegador mientras esperas los resultados, por lo que las operaciones de la base de datos son {{Glossary("asíncronas")}}, lo que significa que en lugar de ocurrir de inmediato, sucederán en algún momento en el futuro, y recibirás una notificación cuando haya terminado.

    + +

    Para manejar esto en IndexedDB, crea un objeto de solicitud (que se puede llamar como desees; lo llamamos request, por lo que es obvio para qué sirve). Luego, usa controladores de eventos para ejecutar código cuando la solicitud se completa, falla, etc., que verás en uso a continuación.

    + +
    +

    Nota: El número de versión es importante. Si deseas actualizar tu base de datos (por ejemplo, cambiando la estructura de la tabla), debes ejecutar tu código nuevamente con un número de versión aumentado, un esquema diferente especificado dentro del controlador onupgradeneeded (ve más abajo), etc. No cubriremos la actualización de bases de datos en este sencillo tutorial.

    +
    +
    4. +
  4. +

    Ahora agrega los siguientes controladores de eventos justo debajo de tu adición anterior, nuevamente dentro del controlador window.onload:

    + + 
    // un controlador de error significa que la base de datos no se abrió correctamente
+request.onerror = function() {
+  console.log('No se pudo abrir la base de datos');
+};
+
+// controlador onsuccess significa que la base de datos se abrió correctamente
+request.onsuccess = function() {
+  console.log('Base de datos abierta con éxito');
+
+  // Almacena el objeto de base de datos abierto en la variable db. Esto se usa mucho a continuación
+  db = request.result;
+
+  // Ejecute la función displayData() para mostrar las notas que ya están en la IDB
+  displayData();
+};
    + +

    El controlador {{domxref("IDBRequest.onerror", "request.onerror")}} se ejecutará si el sistema dice que la solicitud falló. Esto te permite responder a este problema. En nuestro sencillo ejemplo, simplemente imprimimos un mensaje en la consola de JavaScript.

    + +

    El controlador {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} por otro lado se ejecutará si la solicitud regresa con éxito, lo que significa que la base de datos se abrió correctamente. Si este es el caso, un objeto que representa la base de datos abierta pasa a estar disponible en la propiedad {{domxref("IDBRequest.result", "request.result")}}, lo que nos permite manipular la base de datos. Almacenamos esto en la variable db que creamos anteriormente para su uso posterior. También ejecutamos una función personalizada llamada displayData(), que muestra los datos en la base de datos dentro de {{HTMLElement("ul")}}. Lo ejecutamos ahora para que las notas que ya están en la base de datos se muestren tan pronto como se cargue la página. Verás esto definido más adelante.

    +
    5. +
  5. +

    Finalmente, en esta sección, agregaremos probablemente el controlador de eventos más importante para configurar la base de datos: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupgradeneeded")}}. Este controlador se ejecuta si la base de datos aún no se ha configurado, o si la base de datos se abre con un número de versión mayor que la base de datos almacenada existente (al realizar una actualización). Agrega el siguiente código, debajo de tu controlador anterior:

    + + 
    // Configura las tablas de la base de datos si esto aún no se ha hecho
+request.onupgradeneeded = function(e) {
+  // Toma una referencia a la base de datos abierta
+  let db = e.target.result;
+
+  // Crea un objectStore para almacenar nuestras notas (básicamente como una sola tabla)
+  // incluyendo una clave de incremento automático
+  let objectStore = db.createObjectStore('notes_os', {keyPath: 'id', autoIncrement: true});
+
+  // Define qué elementos de datos contendrá el objectStore
+  objectStore.createIndex('title', 'title', { unique: false });
+  objectStore.createIndex('body', 'body', { unique: false });
+
+  console.log('Configuración de la base de datos completa');
+};
    + +

    Aquí es donde definimos el esquema (estructura) de nuestra base de datos; es decir, el conjunto de columnas (o campos) que contiene. Aquí primero tomamos una referencia a la base de datos existente de la propiedad result del objetivo del evento (e.target.result), que es el objeto request. Esto es equivalente a la línea db = request.result; dentro del controlador onsuccess, pero aquí, debemos hacer esto por separado porque el controlador onupgradeneeded (si es necesario) se ejecutará antes que el controlador onsuccess, lo que significa que el valor db no estaría disponible si no hiciéramos esto.

    + +

    Luego usamos {{domxref("IDBDatabase.createObjectStore()")}} para crear un nuevo almacén de objetos dentro de nuestra base de datos abierta llamada notes_os. Esto es equivalente a una sola tabla en un sistema de base de datos convencional. Le hemos dado el nombre notas, y también hemos especificado un campo clave autoIncrement llamado id — en cada nuevo registro se le dará automáticamente un valor incrementado — el desarrollador no lo hace No es necesario establecer esto explícitamente. Al ser la clave, el campo id se utilizará para identificar registros de forma única, como cuando se elimina o muestra un registro.

    + +

    También creamos otros dos índices (campos) usando el método {{domxref("IDBObjectStore.createIndex()")}}: title (que contendrá un título para cada nota) y body (que contendrá el texto del cuerpo de la nota).

    +
    6. +
+ +

Entonces, con este esquema de base de datos simple configurado, cuando comenzamos a agregar registros a la base de datos; cada uno se representará como un objeto siguiendo estas líneas:

+ +
{
+  title: "Compra leche",
+  body: "Necesita leche de vaca y soja",
+  id: 8
+}
+ +

Agregar datos a la base de datos

+ +

Ahora veamos cómo podemos agregar registros a la base de datos. Esto se hará mediante el formulario de nuestra página.

+ +

Debajo de tu controlador de eventos anterior (pero aún dentro del controlador window.onload), agrega la siguiente línea, que configura un controlador onsubmit que ejecuta una función llamada addData() cuando se envía el formulario (cuando se presiona el {{htmlelement("button")}} de enviar, lo que lleva a un envío exitoso del formulario):

+ +
// Crea un controlador onsubmit para que cuando se envíe el formulario se ejecute la función addData()
+form.onsubmit = addData;
+ +

Ahora definamos la función addData(). Agrega esto debajo de tu línea anterior:

+ +
// Define la función addData()
+function addData(e) {
+  // evitar el predeterminado: no queremos que el formulario se envíe de la forma convencional
+  e.preventDefault();
+
+  // toma los valores ingresados en los campos del formulario y los almacenar en un objeto listo para ser insertado en la base de datos
+  let newItem = { title: titleInput.value, body: bodyInput.value };
+
+  // abre una transacción de base de datos de lectura/escritura, lista para agregar los datos
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+
+  // llama a un almacén de objetos que ya se ha agregado a la base de datos
+  let objectStore = transaction.objectStore('notes_os');
+
+  // Hacer una solicitud para agregar nuestro objeto newItem al almacén de objetos
+  let request = objectStore.add(newItem);
+  request.onsuccess = function() {
+    // Limpiar el formulario, listo para agregar la siguiente entrada
+    titleInput.value = '';
+    bodyInput.value = '';
+  };
+
+  // Informa sobre el éxito de la transacción completada, cuando todo esté hecho
+  transaction.oncomplete = function() {
+    console.log('Transacción completada: modificación de la base de datos finalizada.');
+
+    // actualiza la visualización de datos para mostrar el elemento recién agregado, ejecutando displayData() nuevamente.
+    displayData();
+  };
+
+  transaction.onerror = function() {
+    console.log('Transacción no abierta debido a error');
+  };
+}
+ +

Esto es bastante complejo; desglosándolo, podemos:

+ + + +

Visualización de los datos

+ +

Ya hemos hecho referencia a displayData() dos veces en nuestro código, por lo que probablemente sea mejor definirla. Agrega esto a tu código, debajo de la definición de función anterior:

+ +
// Define la función displayData()
+function displayData() {
+  // Aquí vaciamos el contenido del elemento de la lista cada vez que se actualiza la pantalla
+  // Si no hiciste esto, obtendrás duplicados en la lista cada vez que se agregue una nueva nota
+  while (list.firstChild) {
+    list.removeChild(list.firstChild);
+  }
+
+  // Abre el almacén de objetos y luego obtiene un cursor, que recorre todos los
+  // diferentes elementos de datos en el almacén
+  let objectStore = db.transaction('notes_os').objectStore('notes_os');
+  objectStore.openCursor().onsuccess = function(e) {
+    // Obtiene una referencia al cursor
+    let cursor = e.target.result;
+
+    // Si todavía hay otro elemento de datos para iterar, sigue ejecutando este código
+    if(cursor) {
+      // Crea un elemento de lista, h3 y p para poner cada elemento de datos dentro al mostrarlo
+      // estructura el fragmento HTML y lo anexa dentro de la lista
+      const listItem = document.createElement('li');
+      const h3 = document.createElement('h3');
+      const para = document.createElement('p');
+
+      listItem.appendChild(h3);
+      listItem.appendChild(para);
+      list.appendChild(listItem);
+
+      // Coloca los datos del cursor dentro de h3 y para
+      h3.textContent = cursor.value.title;
+      para.textContent = cursor.value.body;
+
+      // Almacena el ID del elemento de datos dentro de un atributo en listItem, para que sepamos
+      // a qué elemento corresponde. Esto será útil más adelante cuando queramos eliminar elementos.
+      listItem.setAttribute('data-note-id', cursor.value.id);
+
+      // Crea un botón y lo coloca dentro de cada listItem
+      const deleteBtn = document.createElement('button');
+      listItem.appendChild(deleteBtn);
+      deleteBtn.textContent = 'Delete';
+
+      // Establece un controlador de eventos para que cuando se hace clic en el botón, el elemento deleteItem()
+      // se ejecuta la función
+      deleteBtn.onclick = deleteItem;
+
+      // Iterar al siguiente elemento del cursor
+      cursor.continue();
+    } else {
+      // Nuevamente, si el elemento de la lista está vacío, muestra el mensaje 'No hay notas almacenadas'
+      if(!list.firstChild) {
+        const listItem = document.createElement('li');
+        listItem.textContent = 'No hay notas almacenadas.';
+        list.appendChild(listItem);
+      }
+      // si no hay más elementos de cursor para iterar, dilo
+      console.log('Se muestran todas las notas');
+    }
+  };
+}
+ +

De nuevo, analicemos esto:

+ + + +

Eliminar una nota

+ +

Como se indicó anteriormente, cuando se presiona el botón de eliminación de una nota, la nota se elimina. Esto se logra mediante la función deleteItem(), que se ve así:

+ +
// Define la función deleteItem()
+function deleteItem(e) {
+  // recuperamos el nombre de la tarea que queremos eliminar. Necesitamos
+  // convertirla en un número antes de intentarla úselo con IDB; Clave del IDB
+  // los valores son sensibles al tipo.
+  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));
+
+  // abre una transacción de base de datos y elimina la tarea, encontrándola usando la identificación que obtuvimos arriba
+  let transaction = db.transaction(['notes_os'], 'readwrite');
+  let objectStore = transaction.objectStore('notes_os');
+  let request = objectStore.delete(noteId);
+
+  // informa que el elemento de datos ha sido eliminado
+  transaction.oncomplete = function() {
+    // elimina el padre del botón
+    // que es el elemento de la lista, por lo que ya no se muestra
+    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
+    console.log('Nota ' + noteId + ' eliminada.');
+
+    // Nuevamente, si el elemento de la lista está vacío, muestra el mensaje 'No hay notas almacenadas'
+    if(!list.firstChild) {
+      let listItem = document.createElement('li');
+      listItem.textContent = 'No hay notas almacenadas.';
+      list.appendChild(listItem);
+    }
+  };
+}
+ + + +

¡Eso es todo!; Tu ejemplo debería funcionar ahora.

+ +

Si tienes problemas con él, no dudes en compararlo con nuestro ejemplo en vivo (consulta el código fuente también).

+ +

Almacenamiento de datos complejos a través de IndexedDB

+ +

Como mencionamos anteriormente, IndexedDB se puede usar para almacenar más que simples cadenas de texto. Puedes almacenar casi cualquier cosa que desees, incluidos objetos complejos como blobs de imágenes o vídeos. Y no es mucho más difícil de conseguir que cualquier otro tipo de dato.

+ +

Para demostrar cómo hacerlo, hemos escrito otro ejemplo llamado almacenaje de videos con IndexedDB (verlo en vivo aquí también). Cuando ejecutas el ejemplo por primera vez, descarga todos los videos de la red, los almacena en una base de datos IndexedDB y luego muestra los videos en la IU dentro de los elementos {{htmlelement("video")}}. La segunda vez que lo ejecutas, encuentra los videos en la base de datos y los obtiene de allí antes de mostrarlos; esto hace que las cargas posteriores sean mucho más rápidas y menos necesitadas de ancho de banda.

+ +

Repasemos las partes más interesantes del ejemplo. No lo veremos todo; gran parte es similar al ejemplo anterior y el código está bien comentado.

+ +
    +
  1. +

    Para este ejemplo simple, hemos almacenado los nombres de los videos para buscarlos en un arreglo de objetos:

    + + 
    const videos = [
+  { 'name' : 'crystal' },
+  { 'name' : 'elf' },
+  { 'name' : 'frog' },
+  { 'name' : 'monster' },
+  { 'name' : 'pig' },
+  { 'name' : 'rabbit' }
+];
    +
    2. +
  2. +

    Para empezar, una vez que la base de datos se abre con éxito, ejecutamos una función init(). Esto recorre los diferentes nombres de video, tratando de cargar un registro identificado por cada nombre de la base de datos de videos.

    + +

    Si cada video se encuentra en la base de datos (se verifica fácilmente al ver si request.result se evalúa como true; si el registro no está presente, será undefined), sus archivos de video (almacenados como blobs) y el nombre del video se pasan directamente a la función displayVideo() para colocarlos en la interfaz de usuario. De lo contrario, el nombre del video se pasa a la función fetchVideoFromNetwork() para ... ¡adivinaste!: recupera el video de la red.

    + + 
    function init() {
+  // Recorre los nombres de los videos uno por uno
+  for(let i = 0; i < videos.length; i++) {
+    // Abre la transacción, obtiene objetos del almacén y get() cada video por nombre
+    let objectStore = db.transaction('videos_os').objectStore('videos_os');
+    let request = objectStore.get(videos[i].name);
+    request.onsuccess = function() {
+      // Si el resultado existe en la base de datos (no está indefinido)
+      if(request.result) {
+        // Toma los videos del IDB y los muestra usando displayVideo()
+        console.log('tomando videos del IDB');
+        displayVideo(request.result.mp4, request.result.webm, request.result.name);
+      } else {
+        // Recuperar los videos de la red
+        fetchVideoFromNetwork(videos[i]);
+      }
+    };
+  }
+}
    +
    3. +
  3. +

    El siguiente fragmento se tomó del interior de fetchVideoFromNetwork() — aquí obtenemos las versiones MP4 y WebM del video usando dos peticiones {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}}. Luego usamos el método {{domxref("blob()", "Body.blob()")}} para extraer el cuerpo de cada respuesta como un blob, dándonos una representación de objeto de los videos que se pueden almacenar y mostrar más adelante.

    + +

    Sin embargo, tenemos un problema aquí: estas dos solicitudes son asíncronas, pero solo queremos intentar mostrar o almacenar el video cuando ambas promesas se hayan cumplido. Afortunadamente, hay un método incorporado que maneja este problema: {{jsxref("Promise.all()")}}. Este toma un argumento, referencias a todas las promesas individuales que deseas verificar para su cumplimiento colocadas en un arreglo, y en sí mismo se basa en promesas.

    + +

    Cuando todas esas promesas se han cumplido, la promesa all() se cumple con un arreglo que contiene todos los valores de cumplimiento individuales. Dentro del bloque all(), puedes ver que luego llamamos a la función displayVideo() como lo hicimos antes para mostrar los videos en la interfaz de usuario, luego también llamamos a la función storeVideo() para almacenar esos videos dentro de la base de datos.

    + + 
    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
+  response.blob()
+);
+let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
+  response.blob()
+);
+
+// Ejecuta el siguiente código solo cuando se hayan cumplido ambas promesas
+Promise.all([mp4Blob, webmBlob]).then(function(values) {
+  // muestra el video obtenido de la red con displayVideo()
+  displayVideo(values[0], values[1], video.name);
+  // lo almacena en el IDB usando storeVideo()
+  storeVideo(values[0], values[1], video.name);
+});
    +
    4. +
  4. +

    Veamos primero storeVideo(). Esto es muy similar al patrón que viste en el ejemplo anterior para agregar datos a la base de datos: abrimos una transacción readwrite y obtenemos una referencia a nuestro almacén de objetos videos_os, creamos un objeto que representa el registro para agregar a la base de datos, luego simplemente lo agrega usando {{domxref("IDBObjectStore.add()")}}.

    + + 
    función storeVideo(mp4Blob, webmBlob, nombre) {
+  // Abre transacción, obtiene el almacén de objetos; lo convierte en lectura y escritura para que podamos escribir en el IDB
+  let objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
+  // Crea un registro para agregar al IDB
+  let record = {
+    mp4 : mp4Blob,
+    webm : webmBlob,
+    name : name
+  }
+
+  // Agrega el registro al IDB usando add()
+  let request = objectStore.add(record);
+
+  ...
+
+};
    +
    5. +
  5. +

    Por último, pero no menos importante, tenemos displayVideo(), que crea los elementos DOM necesarios para insertar el video en la interfaz de usuario y luego los agrega a la página. Las partes más interesantes de esto son las que se muestran a continuación: para mostrar realmente nuestros blobs de video en un elemento <video>, necesitamos crear URL de objeto (URL internas que apuntan a los blobs de video almacenados en la memoria) utilizando el método {{domxref("URL.createObjectURL()")}}. Una vez hecho esto, podemos configurar las URL del objeto para que sean los valores de los atributos src de nuestro elemento {{htmlelement("source")}}, y funciona bien.

    + + 
    function displayVideo(mp4Blob, webmBlob, title) {
+  // Crea URL del objeto a partir de blobs
+  let mp4URL = URL.createObjectURL(mp4Blob);
+  let webmURL = URL.createObjectURL(webmBlob);
+
+  ...
+
+  const video = document.createElement('video');
+  video.controls = true;
+  const source1 = document.createElement('source');
+  source1.src = mp4URL;
+  source1.type = 'video/mp4';
+  const source2 = document.createElement('source');
+  source2.src = webmURL;
+  source2.type = 'video/webm';
+
+  ...
+}
    +
    6. +
+ +

Almacenamiento de activos sin conexión

+ +

El ejemplo anterior ya muestra cómo crear una aplicación que almacenará grandes activos en una base de datos IndexedDB, evitando la necesidad de descargarlos más de una vez. Esto ya es una gran mejora para la experiencia del usuario, pero todavía falta una cosa: los archivos HTML, CSS y JavaScript principales aún se deben descargar cada vez que se accede al sitio, lo cual significa que no funcionará cuando no haya conexión de red.

+ +

Fuera de línea

+ +

Aquí es donde entran el {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio workers")}} y la {{web.link("/es/docs/Web/API/Cache", "API de caché")}}.

+ +

Un servicio worker es un archivo JavaScript que, en pocas palabras, se registra con un origen en particular (sitio web o parte de un sitio web en un determinado dominio) cuando se accede a él mediante un navegador. Cuando se registra, puede controlar las páginas disponibles en ese origen. Para ello, se sienta entre una página cargada y la red e intercepta las solicitudes de red dirigidas a ese origen.

+ +

Cuando intercepta una solicitud, puede hacer lo que desees (consulta {{web.link("/es/docs/Web/API/Service_Worker_API#Other_use_case_ideas", "ideas de casos de uso")}}), pero el ejemplo clásico es guardar las respuestas de la red fuera de línea y luego proporcionarlas en respuesta a una solicitud en lugar de las respuestas de la red. De hecho, te permite hacer que un sitio web funcione completamente fuera de línea.

+ +

La API de caché es otro mecanismo de almacenamiento del lado del cliente, con una pequeña diferencia: está diseñada para guardar respuestas HTTP y, por lo tanto, funciona muy bien con el servicio workers.

+ +
+

Nota: El servicio workers y la memoria caché ahora son compatibles con la mayoría de los navegadores modernos. Al momento de escribir este artículo, Safari todavía estaba ocupado implementándolo, pero debería estar allí pronto.

+
+ +

Un ejemplo del servicio worker

+ +

Veamos un ejemplo para darte una idea de cómo se vería esto. Hemos creado otra versión del ejemplo del almacén de videos que vimos en la sección anterior; este funciona de manera idéntica, excepto que también guarda HTML, CSS y JavaScript en la API de caché a través de un servicio worker, lo que permite que el ejemplo se ejecute sin conexión.

+ +

Ve almacén de videos IndexedDB con servicio worker funcionando en vivo y también ve el código fuente.

+ +

Registrar el servicio worker

+ +

Lo primero que hay que tener en cuenta es que hay un fragmento adicional de código colocado en el archivo JavaScript principal (consulta index.js). Primero hacemos una prueba de detección de características para ver si el miembro serviceWorker está disponible en el objeto {{domxref("Navigator")}}. Si esto devuelve true, entonces sabemos que al menos se respaldan los conceptos básicos del servicio workers. Aquí adentro usamos el método {{domxref("ServiceWorkerContainer.register )")}} para registrar un servicio worker contenido en el archivo sw.js contra el origen en el que reside, para que pueda controlar páginas en el mismo directorio que él, o subdirectorios. Cuando se cumple su promesa, el trabajador del servicio se considera registrado.

+ +
  // Registrar el servicio workers para controlar que el sitio funcione sin conexión
+
+  if('serviceWorker' in navigator) {
+    navigator.serviceWorker
+             .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
+             .then(function() { console.log('Servicio Worker Registrado'); });
+  }
+ +
+

Nota: La ruta proporcionada al archivo sw.js es relativa al origen del sitio, no al archivo JavaScript que contiene el código. El servicio worker está en https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. El origen es https://mdn.github.io y, por lo tanto, la ruta dada debe ser /learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js. Si quisieras alojar este ejemplo en tu propio servidor, tendrías que cambiarlo consecuentemente. Esto es bastante confuso, pero tiene que funcionar de esta manera por razones de seguridad.

+
+ +

Instalación del servicio worker

+ +

La próxima vez que se accede a cualquier página bajo el control del servicio worker (por ejemplo, cuando se vuelve a cargar el ejemplo), el servicio worker se instala en esa página, lo cual significa que comenzará a controlarla. Cuando esto ocurre, se dispara un evento install contra el servicio worker; puedes escribir código dentro del propio servicio worker que responderá a la instalación.

+ +

Veamos un ejemplo, en el archivo sw.js (el servicio worker). Verás que el detector de instalación está registrado en self. Esta palabra clave self es una forma de hacer referencia al alcance global del servicio worker desde el interior del archivo del servicio worker.

+ +

Dentro del controlador install usamos el método {{domxref("ExtendableEvent.waitUntil()")}}, disponible en el objeto event, para indicar que el navegador no debe completar la instalación del servicio worker hasta que la promesa interior se haya cumplido con éxito.

+ +

Aquí es donde vemos en acción la API de Cache. Usamos el método {{domxref("CacheStorage.open()")}} para abrir un nuevo objeto Cache en el que se pueden almacenar las respuestas (similar a un almacén de objetos IndexedDB). Esta promesa se cumple con un objeto {{domxref("Cache")}} que representa la caché de video-store. Luego usamos el método {{domxref("Cache.addAll()")}} para obtener una serie de activos y agregar sus respuestas a la caché.

+ +
self.addEventListener('install', function(e) {
+ e.waitUntil(
+   caches.open('video-store').then(function(cache) {
+     return cache.addAll([
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
+       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
+     ]);
+   })
+ );
+});
+ +

Eso es todo por ahora, instalación terminada.

+ +

Responder a más solicitudes

+ +

Con el servicio worker registrado e instalado en nuestra página HTML, y todos los activos relevantes agregados a nuestra caché, estamos casi listos para comenzar. Solo queda una cosa más por hacer, escribir código para responder a más solicitudes de red.

+ +

Esto es lo que hace el segundo bit de código en sw.js. Agregamos otro escucha al ámbito global del servicio worker, que ejecuta la función del controlador cuando se genera el evento fetch. Esto sucede cada vez que el navegador solicita un activo en el directorio en el que está registrado el servicio worker.

+ +

Dentro del controlador, primero registramos la URL del activo solicitado. Luego proporcionamos una respuesta personalizada a la solicitud, utilizando el método {{domxref("FetchEvent.respondWith()")}}.

+ +

Dentro de este bloque usamos {{domxref("CacheStorage.match()")}} para verificar si una solicitud coincidente (es decir, coincide con la URL) se puede encontrar en cualquier caché. Esta promesa se cumple con la respuesta coincidente si se encuentra una coincidencia, o undefined si no lo es.

+ +

Si se encuentra una coincidencia, simplemente la devolvemos como la respuesta personalizada. De lo contrario, {{web.link("/es/docs/Web/API/WindowOrWorkerGlobalScope/fetch", "fetch()")}} la respuesta de la red y la devolvemos en su lugar.

+ +
self.addEventListener('fetch', function(e) {
+  console.log(e.request.url);
+  e.respondWith(
+    caches.match(e.request).then(function(response) {
+      return response || fetch(e.request);
+    })
+  );
+});
+ +

Y eso es todo para nuestro sencillo servicio worker. Hay muchas más cosas que puedes hacer con ellos; para obtener más detalles, consulta el libro de recetas para el servicio worker. Y gracias a Paul Kinlan por su artículo Agregar un servicio worker y sin conexión a tu aplicación web, que inspiró este sencillo ejemplo.

+ +

Probando el ejemplo sin conexión

+ +

Para probar nuestro ejemplo de servicio worker, deberás cargarlo un par de veces para asegurarte de que esté instalado. Una vez hecho esto, puedes:

+ + + +

Si actualizas tu página de ejemplo nuevamente, deberías ver que se carga bien. Todo se almacena sin conexión: los activos de la página en una caché y los videos en una base de datos IndexedDB.

+ +

Resumen

+ +

Eso es todo por ahora. Esperamos que hayas encontrado útil nuestro resumen de las tecnologías de almacenamiento de lado del cliente.

+ +

Ve también

+ + + +

{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/es/learn/javascript/client-side_web_apis/fetching_data/index.html new file mode 100644 index 0000000000..ab34b8c319 --- /dev/null +++ b/files/es/learn/javascript/client-side_web_apis/fetching_data/index.html @@ -0,0 +1,373 @@ +--- +title: Fetching data from the server +slug: Learn/JavaScript/Client-side_web_APIs/Fetching_data +translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Otra tarea muy común en páginas web y en aplicaciones es tomar elementos individuales de datos desde el servidor para actualizar secciones de la página web sin tener que cargar toda una nueva página. Este aparentemente pequeño detalle tiene un gran impacto en el desempeño y comportamiento de los sitios, por eso en este artículo, explicaremos el concepto y veremos las tecnologías que hacen esto posible, como ser XHLHttpRequest y FetchAPI. 

+ + + + + + + + + + + + +
Prerequisitos:JavaScript básico (ver first steps, building blocks, JavaScript objects),  basics of Client-side APIs
Objetivo:Aprender como extraer datos desde el servidor y usarlo para cargar contenido en la página web. 
+ +

Cúal es el problema aquí?

+ +

Originalmente cargar páginas en la web era simple  — tu enviabas una solicitud de la página web al servidor, y si no había ningún problema, los servicios encargados de la página web la descargaban y mostraban en tu computadora.

+ +

A basic representation of a web site architecture

+ +

El problema con este modelo es que si tu quieres actualizar cualquier parte de la página, por ejemplo, mostrar el nuevo set de productos o cargar una nueva página, tu tenías que cargar toda la página de nuevo. Esto es extremadamente un desperdicio y resultaba ser una experiencia pobre al usuario, especialmente cuando la página es más grande y más compleja. 

+ +

Introduciendo Ajax

+ +

This led to the creation of technologies that allow web pages to request small chunks of data (such as HTML, {{glossary("XML")}}, JSON, or plain text) and display them only when needed, helping to solve the problem described above.

+ +

This is achieved by using APIs like {{domxref("XMLHttpRequest")}} or — more recently — the Fetch API. These technologies allow web pages to directly handle making HTTP requests for specific resources available on a server and formatting the resulting data as needed before it is displayed.

+ +
+

Note: In the early days, this general technique was known as Asynchronous JavaScript and XML (Ajax), because it tended to use {{domxref("XMLHttpRequest")}} to request XML data. This is normally not the case these days (you'd be more likely to use XMLHttpRequest or Fetch to request JSON), but the result is still the same, and the term "Ajax" is still often used to describe the technique.

+
+ +

A simple modern architecture for web sites

+ +

The Ajax model involves using a web API as a proxy to more intelligently request data rather than just having the browser reload the entire page. Let's think about the significance of this:

+ +
    +
  1. Go to one of your favorite information-rich sites, like Amazon, YouTube, CNN, etc., and load it.
    2. +
  2. Now search for something, like a new product. The main content will change, but most of the surrounding information, like the header, footer, navigation menu, etc., will stay the same.
    3. +
+ +

This is a really good thing because:

+ + + +

To speed things up even further, some sites also store assets and data on the user's computer when they are first requested, meaning that on subsequent visits they use the local versions instead of downloading fresh copies when the page is first loaded. The content is only reloaded from the server when it has been updated.

+ +

A basic web app data flow architecture

+ +

A basic Ajax request

+ +

Let's look at how such a request is handled, using both {{domxref("XMLHttpRequest")}} and Fetch. For these examples, we'll request data out of a few different text files and use them to populate a content area.

+ +

This series of files will act as our fake database; in a real application, we'd be more likely to use a server-side language like PHP, Python, or Node to request our data from a database. Here, however, we want to keep it simple and concentrate on the client-side part of this.

+ +

XMLHttpRequest

+ +

XMLHttpRequest (which is frequently abbreviated to XHR) is a fairly old technology now — it was invented by Microsoft in the late '90s, and has been standardized across browsers for quite a long time.

+ +
    +
  1. +

    To begin this example, make a local copy of ajax-start.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — in a new directory on your computer. In this example, we will load a different verse of the poem (which you may well recognize) via XHR when it's selected in the drop-down menu.

    +
    2. +
  2. +

    Just inside the {{htmlelement("script")}} element, add the following code. This stores a reference to the {{htmlelement("select")}} and {{htmlelement("pre")}} elements in variables and defines an {{domxref("GlobalEventHandlers.onchange","onchange")}} event handler function so that when the select's value is changed, its value is passed to an invoked function updateDisplay() as a parameter.

    + + 
    var verseChoose = document.querySelector('select');
+var poemDisplay = document.querySelector('pre');
+
+verseChoose.onchange = function() {
+  var verse = verseChoose.value;
+  updateDisplay(verse);
+};
    +
    3. +
  3. +

    Let's define our updateDisplay() function. First of all, put the following beneath your previous code block — this is the empty shell of the function:

    + + 
    function updateDisplay(verse) {
+
+};
    +
    4. +
  4. +

    We'll start our function by constructing a relative URL pointing to the text file we want to load, as we'll need it later. The value of the {{htmlelement("select")}} element at any time is the same as the text inside the selected {{htmlelement("option")}} (unless you specify a different value in a value attribute) — so for example "Verse 1". The corresponding verse text file is "verse1.txt", and is in the same directory as the HTML file, therefore just the file name will do.

    + +

    However, web servers tend to be case sensitive, and the file name doesn't have a space in it. To convert "Verse 1" to "verse1.txt" we need to convert the V to lower case, remove the space, and add .txt on the end. This can be done with {{jsxref("String.replace", "replace()")}}, {{jsxref("String.toLowerCase", "toLowerCase()")}}, and simple string concatenation. Add the following lines inside your updateDisplay() function:

    + + 
    verse = verse.replace(" ", "");
+verse = verse.toLowerCase();
+var url = verse + '.txt';
    +
    5. +
  5. +

    To begin creating an XHR request, you need to create a new request object using the {{domxref("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest()")}} constructor. You can call this object anything you like, but we'll call it request to keep things simple. Add the following below your previous lines:

    + + 
    var request = new XMLHttpRequest();
    +
    6. +
  6. +

    Next, you need to use the {{domxref("XMLHttpRequest.open","open()")}} method to specify what HTTP request method to use to request the resource from the network, and what its URL is. We'll just use the GET method here and set the URL as our url variable. Add this below your previous line:

    + + 
    request.open('GET', url);
    +
    7. +
  7. +

    Next, we'll set the type of response we are expecting — which is defined by the request's {{domxref("XMLHttpRequest.responseType", "responseType")}} property — as text. This isn't strictly necessary here — XHR returns text by default — but it is a good idea to get into the habit of setting this in case you want to fetch other types of data in the future. Add this next:

    + + 
    request.responseType = 'text';
    +
    8. +
  8. +

    Fetching a resource from the network is an {{glossary("asynchronous")}} operation, meaning that you have to wait for that operation to complete (e.g., the resource is returned from the network) before you can do anything with that response, otherwise, an error will be thrown. XHR allows you to handle this using its {{domxref("XMLHttpRequest.onload", "onload")}} event handler — this is run when the {{event("load")}} event fires (when the response has returned). When this has occurred, the response data will be available in the response property of the XHR request object.

    + +

    Add the following below your last addition. You'll see that inside the onload event handler we are setting the textContent of the poemDisplay (the {{htmlelement("pre")}} element) to the value of the {{domxref("XMLHttpRequest.response", "request.response")}} property.

    + + 
    request.onload = function() {
+  poemDisplay.textContent = request.response;
+};
    +
    9. +
  9. +

    The above is all set up for the XHR request — it won't actually run until we tell it to, which is done using the {{domxref("XMLHttpRequest.send","send()")}} method. Add the following below your previous addition to complete the function:

    + + 
    request.send();
    +
    10. +
  10. +

    One problem with the example as it stands is that it won't show any of the poem when it first loads. To fix this, add the following two lines at the bottom of your code (just above the closing </script> tag) to load verse 1 by default, and make sure the {{htmlelement("select")}} element always shows the correct value:

    + + 
    updateDisplay('Verse 1');
+verseChoose.value = 'Verse 1';
    +
    11. +
+ +

Serving your example from a server

+ +

Some browsers (including Chrome) will not run XHR requests if you just run the example from a local file. This is because of security restrictions (for more on web security, read Website security).

+ +

To get around this, we need to test the example by running it through a local web server. To find out how to do this, read How do you set up a local testing server?

+ +

Fetch

+ +

The Fetch API is basically a modern replacement for XHR; it was introduced in browsers recently to make asynchronous HTTP requests easier to do in JavaScript, both for developers and other APIs that build on top of Fetch.

+ +

Let's convert the last example to use Fetch instead.

+ +
    +
  1. +

    Make a copy of your previous finished example directory. (If you didn't work through the previous exercise, create a new directory and inside it make copies of xhr-basic.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse4.txt.)

    +
    2. +
  2. +

    Inside the updateDisplay() function, find the XHR code:

    + + 
    var request = new XMLHttpRequest();
+request.open('GET', url);
+request.responseType = 'text';
+
+request.onload = function() {
+  poemDisplay.textContent = request.response;
+};
+
+request.send();
    +
    3. +
  3. +

    Replace all the XHR code with this:

    + + 
    fetch(url).then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});
    +
    4. +
  4. +

    Load the example in your browser (running it through a web server) and it should work just the same as the XHR version, provided you are running a modern browser.

    +
    5. +
+ +

So what is going on in the Fetch code?

+ +

First of all, we invoke the {{domxref("WorkerOrWindowGlobalScope.fetch()","fetch()")}} method, passing it the URL of the resource we want to fetch. This is the modern equivalent of {{domxref("XMLHttpRequest.open","request.open()")}} in XHR, plus you don't need any equivalent to .send().

+ +

After that, you can see the {{jsxref("Promise.then",".then()")}} method chained onto the end of fetch() — this method is a part of {{jsxref("Promise","Promises")}}, a modern JavaScript feature for performing asynchronous operations. fetch() returns a promise, which resolves to the response sent back from the server — we use .then() to run some follow-up code after the promise resolves, which is the function we've defined inside it. This is the equivalent of the onload event handler in the XHR version.

+ +

This function is automatically given the response from the server as a parameter when the fetch() promise resolves. Inside the function we grab the response and run its {{domxref("Body.text","text()")}} method, which basically returns the response as raw text. This is the equivalent of request.responseType = 'text' in the XHR version.

+ +

You'll see that text() also returns a promise, so we chain another .then() onto it, inside of which we define a function to receive the raw text that the text() promise resolves to.

+ +

Inside the inner promise's function, we do much the same as we did in the XHR version — set the {{htmlelement("pre")}} element's text content to the text value.

+ +

Aside on promises

+ +

Promises are a bit confusing the first time you meet them, but don't worry too much about this for now. You'll get used to them after a while, especially as you learn more about modern JavaScript APIs — most of the newer ones are heavily based on promises.

+ +

Let's look at the promise structure from above again to see if we can make some more sense of it:

+ +
fetch(url).then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});
+ +

The first line is saying "fetch the resource located at URL" (fetch(url)) and "then run the specified function when the promise resolves" (.then(function() { ... })). "Resolve" means "finish performing the specified operation at some point in the future". The specified operation, in this case, is to fetch a resource from a specified URL (using an HTTP request), and return the response for us to do something with.

+ +

Effectively, the function passed into then() is a chunk of code that won't run immediately. Instead, it will run at some point in the future when the response has been returned. Note that you could also choose to store your promise in a variable and chain {{jsxref("Promise.then",".then()")}} onto that instead. The code below would do the same thing:

+ +
var myFetch = fetch(url);
+
+myFetch.then(function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});
+ +

Because the fetch() method returns a promise that resolves to the HTTP response, any function you define inside a .then() chained onto the end of it will automatically be given the response as a parameter. You can call the parameter anything you like — the below example would still work:

+ +
fetch(url).then(function(dogBiscuits) {
+  dogBiscuits.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+});
+ +

But it makes more sense to call the parameter something that describes its contents.

+ +

Now let's focus just on the function:

+ +
function(response) {
+  response.text().then(function(text) {
+    poemDisplay.textContent = text;
+  });
+}
+ +

The response object has a method {{domxref("Body.text","text()")}} that takes the raw data contained in the response body and turns it into plain text — the format we want it in. It also returns a promise (which resolves to the resulting text string), so here we use another {{jsxref("Promise.then",".then()")}}, inside of which we define another function that dictates what we want to do with that text string. We are just setting the textContent property of our poem's {{htmlelement("pre")}} element to equal the text string, so this works out pretty simple.

+ +

It is also worth noting that you can directly chain multiple promise blocks (.then() blocks, but there are other types too) onto the end of one another, passing the result of each block to the next block as you travel down the chain. This makes promises very powerful.

+ +

The following block does the same thing as our original example, but is written in a different style:

+ +
fetch(url).then(function(response) {
+  return response.text()
+}).then(function(text) {
+  poemDisplay.textContent = text;
+});
+ +

Many developers like this style better, as it is flatter and arguably easier to read for longer promise chains — each subsequent promise comes after the previous one, rather than being inside the previous one (which can get unwieldy). The only other difference is that we've had to include a return statement in front of response.text(), to get it to pass its result on to the next link in the chain.

+ +

Which mechanism should you use?

+ +

This really depends on what project you are working on. XHR has been around for a long time now and has very good cross-browser support. Fetch and Promises, on the other hand, are a more recent addition to the web platform, although they're supported well across the browser landscape, with the exception of Internet Explorer.

+ +

If you need to support older browsers, then an XHR solution might be preferable. If however you are working on a more progressive project and aren't as worried about older browsers, then Fetch could be a good choice.

+ +

You should really learn both — Fetch will become more popular as Internet Explorer declines in usage (IE is no longer being developed, in favor of Microsoft's new Edge browser), but you might need XHR for a while yet.

+ +

A more complex example

+ +

To round off the article, we'll look at a slightly more complex example that shows some more interesting uses of Fetch. We have created a sample site called The Can Store — it's a fictional supermarket that only sells canned goods. You can find this example live on GitHub, and see the source code.

+ +

A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.

+ +

By default, the site displays all the products, but you can use the form controls in the left hand column to filter them by category, or search term, or both.

+ +

There is quite a lot of complex code that deals with filtering the products by category and search terms, manipulating strings so the data displays correctly in the UI, etc. We won't discuss all of it in the article, but you can find extensive comments in the code (see can-script.js).

+ +

We will however explain the Fetch code.

+ +

The first block that uses Fetch can be found at the start of the JavaScript:

+ +
fetch('products.json').then(function(response) {
+  return response.json();
+}).then(function(json) {
+  products = json;
+  initialize();
+}).catch(function(err) {
+  console.log('Fetch problem: ' + err.message);
+});
+ +

The fetch() function returns a promise. If this completes successfully, the function inside the first .then() block contains the response returned from the network.

+ +

Inside this function we run {{domxref("Body.json","json()")}} on the response, not {{domxref("Body.text","text()")}}, as we want to return our response as structured JSON data, not plain text.

+ +

Next, we chain another .then() onto the end of our first one, the success function that contains the json returned from the response.json() promise. We set this to be the value of the products global object, then run initialize(), which starts the process of displaying all the products in the user interface.

+ +

To handle errors, we chain a .catch() block onto the end of the chain. This runs if the promise fails for some reason. Inside it, we include a function that is passed as a parameter, an error object. This error object can be used to report the nature of the error that has occurred, in this case we do it with a simple console.log().

+ +

However, a complete website would handle this error more gracefully by displaying a message on the user's screen and perhaps offering options to remedy the situation, but we don't need anything more than a simple console.log().

+ +

You can test the fail case yourself:

+ +
    +
  1. Make a local copy of the example files (download and unpack the can-store ZIP file).
    2. +
  2. Run the code through a web server (as described above, in {{anch("Serving your example from a server")}}).
    3. +
  3. Modify the path to the file being fetched, to something like 'produc.json' (make sure it is misspelled).
    4. +
  4. Now load the index file in your browser (via localhost:8000) and look in your browser developer console. You'll see a message similar to "Network request for products.json failed with response 404: File not found".
    5. +
+ +

The second Fetch block can be found inside the fetchBlob() function:

+ +
fetch(url).then(function(response) {
+    return response.blob();
+}).then(function(blob) {
+  // Convert the blob to an object URL — this is basically an temporary internal URL
+  // that points to an object stored inside the browser
+  var objectURL = URL.createObjectURL(blob);
+  // invoke showProduct
+  showProduct(objectURL, product);
+});
+ +

This works in much the same way as the previous one, except that instead of using {{domxref("Body.json","json()")}}, we use {{domxref("Body.blob","blob()")}}. In this case we want to return our response as an image file, and the data format we use for that is Blob (the term is an abbreviation of "Binary Large Object" and can basically be used to represent large file-like objects, such as images or video files).

+ +

Once we've successfully received our blob, we create an object URL out of it using {{domxref("URL.createObjectURL()", "createObjectURL()")}}. This returns a temporary internal URL that points to an object referenced inside the browser. These are not very readable, but you can see what one looks like by opening up the Can Store app, Ctrl-/Right-clicking on an image, and selecting the "View image" option (which might vary slightly depending on what browser you are using). The object URL will be visible inside the address bar, and should be something like this:

+ +
blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
+ +

Challenge: An XHR version of the Can Store

+ +

We'd like you to try converting the Fetch version of the app to use XHR as a useful bit of practice. Take a copy of the ZIP file, and try modifying the JavaScript as appropriate.

+ +

Some helpful hints:

+ + + +
+

Note: If you have trouble with this, feel free to check your code against the finished version on GitHub (see the source here, and also see it running live).

+
+ +

Summary

+ +

This article shows how to start working with both XHR and Fetch to fetch data from the server.

+ +

See also

+ +

There are however a lot of different subjects discussed in this article, which has only really scratched the surface. For a lot more detail on these subjects, try the following articles:

+ + + +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
+ +
+

In this module

+ + +
diff --git a/files/es/learn/javascript/client-side_web_apis/index.html b/files/es/learn/javascript/client-side_web_apis/index.html new file mode 100644 index 0000000000..731edea2a3 --- /dev/null +++ b/files/es/learn/javascript/client-side_web_apis/index.html @@ -0,0 +1,53 @@ +--- +title: Client-side web APIs +slug: Learn/JavaScript/Client-side_web_APIs +tags: + - API + - Articles + - Beginner + - CodingScripting + - DOM + - Graphics + - JavaScript + - Landing + - Learn + - Media + - Module + - NeedsTranslation + - TopicStub + - WebAPI + - data +translation_of: Learn/JavaScript/Client-side_web_APIs +--- +
{{LearnSidebar}}
+ +

Cuando se escribe JavaScript para sitios web o aplicaciones del lado del cliente, no pasará mucho tiempo antes de que comience a usar APIs ("Application Programming Interfaces"). Estas son interfaces para manipular diferentes aspectos del navegador y el sistema operativo sobre el cuál se esta ejecutando, o incluso datos de otros sitios web o servicios. En este módulo, vamos a aprender que son las APIs  y cómo utilizar algunas de las API más comunes que encuentran al momento de desarrollar. 

+ +

Requisitos

+ +

Para aprovechar al máximo este módulo, debería haber trabajado con los módulos anteriores de JavaScript (Primeros Pasos, Bloques de construcción, y Objetos en JavaScript). De todos modos, esos módulos involucran el uso de varias APIs simples, ya que es dificil escribir ejemplos en Javascript del lado del cliente sin dar uso de ellos! Para este tutorial, asumiremos que se tiene conocimiento basico sobre JavaScript  y exploraremos las API web mas comunes con un poco más de detalle.

+ +

Conocimiento basico de HTML y CSS tambien seria util.

+ +
+

Nota: Si está trabajando en un dispositivo en el que no tiene la capacidad de crear sus propios archivos, puede probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como JSBin o Thimble.

+
+ +

Guías

+ +
+
Introducción a web APIs
+
En primer lugar, comenzaremos observando las API de alto nivel: ¿qué son, cómo funcionan, cómo las utilizan en su código y cómo están estructuradas? También veremos cuáles son las diferentes principales clases de APIs y qué tipo de usos tienen.
+
Manipulacion de documentos
+
Al escribir páginas web y aplicaciones, una de las cosas más comunes que querrás hacer es manipular los documentos web de alguna manera. Esto generalmente se hace usando el Document Object Model (DOM), un conjunto de APIs para controlar el HTML y la información de sus estilos que hace un uso intensivo del objeto  {{domxref("Document")}} . En este artículo, veremos cómo usar el DOM en detalle, junto con algunas otras API que pueden alterar su entorno de maneras interesantes.
+
Obteniendo data desde el servidor
+
Otra tarea frecuente en las en las aplicaciones y los sitios web modernos, es recuperar los datos individuales de un elemento del seridor para actualizar solo una seccion de la pagina sin tener que cargar una pagina web completamente nueva. Este detalle, aparentemente pequeño, ha tenido un gran impacto en el rendimiento y el comportamiento de los sitios, En este artículo, explicaremos el concepto y veremos las tecnologías que hacen esto posible, como {{domxref("XMLHttpRequest")}} y el Fetch API.
+
APIs de terceros
+
Las APIs que hemos cubierto hasta ahora están integradas en el navegador, pero no todas las APIs lo estan. Muchos grandes sitios web y servicios tales como Google Maps, Twitter, Facebook, PayPal, etc. proporcionan APIs que permiten a los desarrolladores hacer uso de sus datos (p.ej. mostrando tu actividad en twitter dentro de tu blog) o sus servicios (p.ej. mostrar una ubicacion personalizada porGoogle Maps en tu sitio, o usar el inicio de sesión de Facebook para que inicien sesión tus usuarios). Este artículo analiza la diferencia entre las API del navegador y las API de terceros y muestra algunos usos típicos de este último.
+
Dibujar gráficos
+
El navegador contiene algunas herramientas de programación poderosas para gráficos, desde el lenguaje de Gráficos de Vectores Escalables (SVG), hasta APIs para dibujar elementos HTML {{htmlelement("canvas")}}, (ver El API Canvas y WebGL). Este articulo provee una introducción al Canvas API, y además recursos que te van a permirir aprender más.
+
APIs de audio y video
+
HTML5 for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.
+
Almacenamiento del lado del Cliente
+
Modernos navegadores web implementan un número de diferente de tecnologías que te permiten almacenar datos relacionados a sitios y recuperarlos cuando sea necesario permitiendote almacenarlos por mucho tiempo, almacenar sitios fuera de linea, y más. Este articulo explica aspectos los principios de como trabaja.
+
diff --git "a/files/es/learn/javascript/client-side_web_apis/introducci\303\263n/index.html" "b/files/es/learn/javascript/client-side_web_apis/introducci\303\263n/index.html" new file mode 100644 index 0000000000..fc73d4ebc9 --- /dev/null +++ "b/files/es/learn/javascript/client-side_web_apis/introducci\303\263n/index.html" @@ -0,0 +1,274 @@ +--- +title: Introducción a las APIs web +slug: Learn/JavaScript/Client-side_web_APIs/Introducción +translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

En primer lugar empezaremos echando un vistazo a las APIS desde un nivel superior — ¿qué son, cómo funcionan, cómo usarlas en el código, y cómo están estructuradas?. También echaremos un vistazo a cuáles son los principales tipos de APIs, y para qué se usan.

+ + + + + + + + + + + + +
Pre requisitos:Conocimientos básicos de informática, principios básicos de HTML, CSS y JavaScript (ver primeros pasos, bloques de construcción, objetos JavaScript).
Objetivo:Familiarizarse con las APIs, saber qué pueden hacer y cómo usarlas en tu código.
+ +

¿Qué son las APIs?

+ +

Las Interfaces de Programacion de Aplicaciones (APIs por sus siglas en inglés) son construcciones disponibles en los lenguajes de programación que permiten a los desarrolladores crear funcionalidades complejas de una manera simple. Estas abstraen el código más complejo para proveer una sintaxis más fácil de usar en su lugar.

+ +

Como ejemplo, piensa en el suministro de electricidad de tu casa, apartamento, o cualquier otro edificio. Si quieres usar un electrodoméstico, simplemente lo conectas en un enchufe y funciona. No intentas conectarlo directamente a la fuente de alimentación — hacerlo sería muy ineficiente y, si no eres electricista, dificil y peligroso.

+ +

+ +

Fuente de la imagen: Overloaded plug socket por The Clear Communication People, en Flickr.

+ +

De la misma manera, si quisieras programar gráficos 3D, sería mucho más facil hacerlo usando una API escrita en un lenguaje de alto nivel como JavaScript o Python, en lugar de intentar escribir código de bajo nivel (por ejemplo: C o C++) que controle directamente la GPU del equipo u otras funciones gráficas.

+ +
+

Nota: Consulta también la entrada API en el glosario para una descripción más detallada.

+
+ +

APIs en JavaScript del lado cliente

+ +

JavaScript del lado cliente, particularmente, tiene muchas APIs disponibles — estas no son parte del lenguaje en sí, sino que están construidas sobre el núcleo de este lenguaje de programación, proporcionándote superpoderes adicionales para usar en tu código. Por lo general, se dividen en dos categorías:

+ + + +

+ +

Relacion entre JavaScript, APIs, y otras herramientas de JavaScript

+ +

Anteriormente hablamos sobre qué son las APIs de JavaScript del lado cliente y cómo se relacionan con este lenguaje. Recapitulemos ahora para dejarlo claro, y veamos también dónde encajan otras herramientas de JavaScript:

+ + + +

¿Qué pueden hacer las APIs?

+ +

Hay una gran cantidad de APIs disponibles en los navegadores modernos que te permiten hacer una gran variedad de cosas en tu código. Puedes verlo echando un vistazo al índice de APIs de MDN.

+ +

APIs de navegador más comunes

+ +

En particular, las categorías más comunes de APIs de navegador más usadas (y que trataremos con mayor detalle en este módulo) son:

+ + + +

APIs populares de terceros

+ +

Existe una gran variedad de APIs de terceros, algunas de las más populares de las que querrás hacer uso en algún momento son:

+ + + +
+

Nota: puedes encontrar información de una gran cantidad de APIs de terceros en el Programmable Web API directory.

+
+ +

¿Cómo funcionan las APIs?

+ +

Las distintas APIs de JavaScript funcionan de forma ligeramente diferente, pero generalmente tienen características similares y una forma parecida en cómo trabajan.

+ +

Están basadas en objetos

+ +

Las APIs interactúan con tu código usando uno o más Objetos JavaScript, que sirven como contenedores para los datos que usa la API (contenidos en las propiedades del objeto), y la funcionalidad que la API provee (contenida en los métodos del objeto).

+ +
+

Nota: si no estás familiarizado en cómo trabajar con objetos, deberías volver atrás y revisar el módulo de objetos JavaScript antes de seguir.

+
+ +

Volvamos al ejemplo de la API de Geolocalización, que es una API muy simple que consiste en unos pocos objetos sencillos:

+ + + +

¿Cómo interactúan estos objetos? Si miras a nuestro ejemplo maps-example.html (ver también en vivo), encontrarás el siguiente código:

+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+  var myOptions = {
+    zoom: 8,
+    center: latlng,
+    mapTypeId: google.maps.MapTypeId.TERRAIN,
+    disableDefaultUI: true
+  }
+  var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+});
+ +
+

Nota: cuando cargues por primera vez el ejemplo de arriba, se te mostrará un mensaje preguntando si deseas compartir tu localización con esta aplicación (ver la sección {{anch("They have additional security mechanisms where appropriate")}} que se encuentra más adelante en este artículo). Deberás estar de acuerdo con esto para poder ver tu localización en el mapa. Si aún así sigues sin ver tu localización, tal vez debas establecer los permisos manualmente; lo puedes hacer de varias formas dependiendo del navegador que estés usando; por ejemplo en Firefox debes ir a  > Tools > Page Info > Permissions, y cambiar la configuración para Share Location; en Chrome ve a Settings > Privacy > Show advanced settings > Content settings y cambia las opciones para Location.

+
+ +

Primero queremos usar el método {{domxref("Geolocation.getCurrentPosition()")}} para retornar la posición actuali de nuestro dispositivo. El objeto {{domxref("Geolocation")}} del navegador es accedido llamando a la propiedad {{domxref("Navigator.geolocation")}}, así que comenzaremos haciendo:

+ +
navigator.geolocation.getCurrentPosition(function(position) { ... });
+ +

Lo que es equivalente a hacer algo como:

+ +
var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });
+ +

Pero podemos usar la sintaxis con punto para concatener nuestros accesos a propiedades/métodos reduciendo el número de líneas que tenemos que escribir.

+ +

El método {{domxref("Geolocation.getCurrentPosition()")}} solamente tiene un parámetroobligatorio, que es una función anónima que se ejecutará cuando se recupere correctamente la ubicación del dispositivo. Esta función tiene un parámetro, que contiene un objeto {{domxref("Position")}} con la representación de los datos de la posición actual.

+ +
+

Nota: una función que es tomada por otra función como argumento es conocida con el nombre de callback function.

+
+ +

Este patrón de invocar una función solamente cuando una operación ha sido completada es muy común en las APIs de Javascript — asegurando que una operación ha sido completada antes de intentar usar los datos que retorna en otra operación. Estas operaciones se llaman operaciones asíncronas. Puesto que obtener la posición actual del dispositivo recae en un componente externo (el GPS del dispositivo u otro hardware de geolocalización), no podemos asegurar que se haga a tiempo para usar inmediatamente los datos. Por tanto, algo así no funcionará:

+ +
var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;
+ +

Si la primera línea no ha retornado todavía su resultado, la segunda línea lanzará un error puesto que los datos de posición no estarán disponibles. Por esa razón, las APIs que tienen operaciones asíncronas se diseñan para usar {{glossary("callback function")}}s, o el sistema más moderno de Promises, que se ha introducido en ECMAScript 6 y se está usando mucho en las APIs más nuevas.

+ +

Vamos a combinar la API de geolocalización con una API de terceros — la API de Google Maps — que se usa para dibujar la localización retornada por getCurrentPosition() en un mapa de Google. Haremos disponible esta API en nuestra página vinculándonos a ella — encontrarás esta línea en el HTML:

+ +
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+ +

Para usar la API, primero creamos una instancia del objeto LatLng usando el constructor google.maps.LatLng(), que toma los valores de nuestra {{domxref("Coordinates.latitude")}} y {{domxref("Coordinates.longitude")}} geolocalizada como parámetros:

+ +
var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+ +

Este objeto quedará establecido como el valor de la propiedad center de un objeto de opciones que hemos llamado myOptions. Entonces crearemos una instancia de objeto para representar nuestro mapa llamando al constructor de google.maps.Map(), pasándole sus dos parámetros — una referencia al elemento {{htmlelement("div")}} donde queremos presentar el mapa (con ID map_canvas), y el objeto de opciones que acabamos de definir.

+ +
var myOptions = {
+  zoom: 8,
+  center: latlng,
+  mapTypeId: google.maps.MapTypeId.TERRAIN,
+  disableDefaultUI: true
+}
+
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+ +

Una vez hecho, veremos dibujado nuestro mapa.

+ +

Este último bloque de código muestra dos patrones habituales que veremos en muchas APIs. Primero, los objetos de las APIs habitualmente disponen de constructores, que son invocados para crear instancias de esos objetos que que habitualmente usaremos en nuestros programas. Segundo, los objetos de las APIs a menudo ofrecen múltiples opciones que pueden ser adaptadas para obtener exactamente lo que queremos en nuestro programa. Los constructores de las APIs habitualmente aceptan un objeto de opciones como parámetro, que es donde se deben establecer dichas opciones.

+ +
+

Nota: no te preocupes si no entiendes todos los detalles de este ejemplo inmediantamente. Los repasaremos usando APIs de terceros con más detalle en un artículo futuro.

+
+ +

Tienen puntos de acceso reconocibles

+ +

Cuando uses una API, debes estar seguro que conoces dónde están los puntos de acceso para ella. En la API de Geolocalización esto es bastante sencillo  — es la propiedad {{domxref("Navigator.geolocation")}}, que retorna el objeto del navegador {{domxref("Geolocation")}} que contiene todos los métodos útiles de geolocalización disponibles en su interior.

+ +

La API del Modelo de Objetos del Navegador (DOM) tiene un punto de acceso todavía más simple — sus características las podemos encontrar colgando del objeto {{domxref("Document")}}, o una instancia de un elemento HTML que queremos modificar de alguna forma, por ejemplo:

+ +
var em = document.createElement('em'); // crear un nuevo elemento em
+var para = document.querySelector('p'); // referencia a un elemento p existente
+em.textContent = 'Hello there!'; // dar al em algo de contenido textual
+para.appendChild(em); // ubicar el em dentro del párrafo
+ +

Otras APIs tienen puntos de acceso ligeramente más complejos, que a menudo implican crear un contexto específico para escribir el código de la API. Por ejemplo, el objeto de contexto de la API Canvas se crea obteniendo una referencia al elemento {{htmlelement("canvas")}} en el que quieres dibujar, y a continuación invocando su método {{domxref("HTMLCanvasElement.getContext()")}}:

+ +
var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');
+ +

Cualquier cosa que queramos hacerle al canvas, se conseguirá llamando a las propiedades y métodos del objeto de contexto (que es una instancia de {{domxref("CanvasRenderingContext2D")}}), por ejemplo:

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+};
+ +
+

Nota: puedes ver este código en acción en nuetro bouncing balls demo (y también verlo funcionando).

+
+ +

Usan eventos para manejar cambios en su estado

+ +

Ya hemos discutido anteriormente los eventos en este curso, en nuestro artículo de Introducción a los eventos — este artículo detalla qué son los eventos del lado del cliente y cómo se usan en el código. Si no estás familiarizado en cómo se trabaja con la API de eventos del lado del cliente, deberías ir a consultar este artículo antes de continuar.

+ +

Algunas APIs web no contienen eventos, pero algunas otras sí contienen un buen número de ellos. Las propiedades para manejarlos, que nos permiten ejecutar funciones cuando los eventos se producen, generalmente se listan en nuestro material de referencia en secciones de "Manejadores de Eventos" separadas. Como ejemplo simple, instancias del objeto XMLHttpRequest (cada uno representa una petición HTTP al servidor para recuperar un nuevo recurso de algún tipo) tienen un número de eventos disponibles, por ejemplo el evento load que es disparado cuando una respuesta ha sido retornada satisfactoriamente conteniendo el recurso solicitado, y ahora está disponible.

+ +

El siguiente código aporta un ejemplo simple de cómo se debe usar esto:

+ + + +
var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+var request = new XMLHttpRequest();
+request.open('GET', requestURL);
+request.responseType = 'json';
+request.send();
+
+request.onload = function() {
+  var superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +
+

Nota: puedes ver este código en acción en nuestro ejemplo ajax.html (verlo en vivo).

+
+ +

Las primeras cinco líneas especifican la licalización del recurso que queremos recuperar, se crea una nueva instancia del objeto con la petición usando el constructor XMLHttpRequest(), se abre una petición HTTP GET para recuperar el recurso especificado, se indica que la respuesta debería ser enviada en formato JSON, y finalmente se envía la petición.

+ +

El manejador onload especifica entonces qué hacer con la respuesta. Ya sabemos que la respuesta será retornada satisfactoriamente y estará disponible tras producirse el evento load (a menos que haya sucedido un error), así que salvamos la respuesta que contiene el código JSON retornado en la variable superHeroes, luego lo pasamos a dos funciones diferentes para un procesado posterior.

+ +

Tienen mecanismos adicionales de seguridad donde sea necesario

+ +

Las características de las WebAPI están sujetas a las mismas consideraciones de seguridad que JavaScript y otras tecnologías web (por ejemplo same-origin policy), pero a veces tienen mecanismos adicionales de seguridad. Por ejemplo, algunas de las WebAPIs más modernas solamente funcionan en páginas servidas mediante HTTPS debido a que transmiten información potencialmente sensible (algunos ejemplos son Service Workers y Push).

+ +

Además, algunas WebAPIs solicitarán permiso al usuario para ser activadas cuando se produzcan las llamadas desde el código. Como ejemplo, habrás observado un cuadro de diálogo como éste al probar nuestro ejemplo anterior de Geolocalización:

+ +

+ +

La Notifications API solicita los permisos de una forma parecida:

+ +

+ +

Estos diálogos solicitando permiso se muestran al usuario por motivos de seguridad — si no estuvieran, los sitios podrían rastrear la localización sin que el usuario lo supiera o bombardearlo con un montón de notificaciones molestas.

+ +

Resumen

+ +

En este punto, deberías tener ya una buena idea de los que son las APIs, cómo trabajan y qué puedes hacer con ellas en tu código JavaScript. Seguramente estarás con ganas de comenzar a hacer cosas divertidas con algunas APIs específicas, así que ¡vamos allá! A continuación veremos cómo manipular documentos con el Modelo de Objetos del Documento (DOM).

+ +

{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/a_first_splash/index.html b/files/es/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..1d2f5e2be0 --- /dev/null +++ b/files/es/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,613 @@ +--- +title: Un primer acercamiento a JavaScript +slug: Learn/JavaScript/First_steps/A_first_splash +tags: + - Aprender + - Artículo + - CodingScripting + - Condicionales + - Funciones + - JavaScript + - Novato + - Objetos + - Operadores + - Variables + - eventos + - 'l10n:priority' +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
+ +

Ahora que has aprendido algo sobre la teoría de JavaScript y lo que puedes hacer con ella, te daremos un curso intensivo sobre las características básicas de JavaScript a través de un tutorial completamente práctico. Aquí crearás un sencillo juego de "Adivina el número", paso a paso.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.
Objetivo:Tener un poco de experiencia escribiendo algo de JavaScript, y conseguir al menos una comprensión básica de lo que implica escribir un programa JavaScript.
+ +

No esperes entender todo el código inmediatamente — por ahora sólo queremos presentarte los conceptos de alto nivel, y darte una idea de como funciona JavaScript (y otros lenguajes de programación). ¡Más adelante vas a volver a ver estas características con mucho más detalle!

+ +
+

Nota: Muchas de las características que vas a ver en JavaScript son las mismas que en otros lenguajes de programación — funciones, bucles, etc. La sintaxis del código es diferente, pero los conceptos siguen siendo básicamente los mismos. La sintaxis del código es diferente, pero los conceptos siguen siendo básicamente los mismos.

+
+ +

Pensando como un  programador

+ +

Una de las cosas más difíciles de aprender en programación no es la sintaxis que necesita aprender, sino cómo aplicarla para resolver problemas del mundo real. Debes comenzar a pensar como un programador — esto generalmente implica mirar descripciones de lo que necesita hacer tu programa, determinar qué características de código necesitas para alcanzar esas cosas y cómo hacer que funcionen juntas.

+ +

Esto implica una combinación de trabajo duro, experiencia con la sintaxis de programación y práctica — más un poquito de creatividad. Mientras más programes, más habilidoso serás haciéndolo. No te podemos prometer que vas a desarrollar un "cerebro de programador" en cinco minutos, pero, a lo largo de este curso, te vamos a dar muchas oportunidades de practicar el pensar como un programador.

+ +

Teniendo esto en mente, veamos el ejemplo que vamos a construir en este artículo, y revisemos el proceso general de seccionarlo y dividirlo en tareas tangibles.

+ +

Ejemplo — Juego adivina el número

+ +

En este artículo vamos a mostrarte cómo construir el juego que puedes ver abajo:

+ + + +

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

+ +

Juega un poco — familiarízate con el juego antes de continuar.

+ +

Imaginemos que tu jefe te ha dado el siguiente resumen para crear este juego:

+ +
+

Quiero que crees un sencillo juego del tipo "adivina el número". Se debe elegir un número aleatorio entre 1 y 100, luego desafiar al jugador a adivinar el número en 10 intentos. Después de cada intento, debería decirle al jugador si ha acertado o no — y si está equivocado, debería decirle si se ha quedado corto o se ha pasado. También debería decir los números que ya se probaron anteriormente. El juego terminará una vez que el jugador acierte o cuando se acaben los intentos. Cuando el juego termina, se le debe dar al jugador la opción de volver a jugar.

+
+ +

Al observar este resumen, lo primero que podemos hacer es comenzar a desglosar el proyecto en tareas simples y realizables, con la mayor mentalidad de programador posible:

+ +
    +
  1. Generar un número aleatorio entre 1 y 100.
    2. +
  2. Registrar el número del intento en el que el jugador se encuentre. Empezando en 1.
    3. +
  3. Darle al jugador una forma de adivinar cuál es el número.
    4. +
  4. Una vez que se ha introducido en número, registrarlo en alguna parte para que el jugador pueda ver sus intentos previos.
    5. +
  5. A continuación, comprobar si el número es correcto.
    6. +
  6. Si es correcto: +
      +
    1. Mostrar un mensaje de felicitaciones.
      2. +
    2. Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).
      3. +
    3. Mostrar un control que permita al jugador volver a empezar el juego.
      4. +
    +
    7. +
  7. Si es incorrecto y al jugador todavía le quedan intentos: +
      +
    1. Decirle al jugador que ha fallado.
      2. +
    2. Dejar que el jugador lo intente de nuevo.
      3. +
    3. Incrementa el número de intentos en 1.
      4. +
    +
    8. +
  8. Si el jugador falla y no le quedan turnos: +
      +
    1. Decirle al jugador que el juego se ha terminado.
      2. +
    2. Hacer que el jugador no pueda introducir más intentos (esto arruinaría el juego).
      3. +
    3. Mostrar un control que permita al jugador volver a empezar el juego.
      4. +
    +
    9. +
  9. Una vez que el juego se reinicia, asegúrate de que la lógica del juego y la IU (interfaz de usuario) se restablezcan por completo, luego vuelve al paso 1.
    10. +
+ +

Veamos cómo podemos trasformar estos pasos en código, construyendo el ejemplo y explorando las características de JavaScript a medida que avanzamos.

+ +

Configuración inicial

+ +

Para empezar este tutorial, quisiéramos que hicieras una copia local del archivo number-guess-guess-game-start.html (en vivo aquí). Ábrelo en tu editor de texto y en tu navegador web. De momento, puedes ver un sencillo encabezado, un párrafo de instrucciones y un espacio para introducir un intento de número, pero no hará nada por ahora.

+ +

El lugar donde agregaremos todo nuestro código es dentro del elemento {{htmlelement("script")}} en la parte inferior del HTML:

+ +
<script>
+
+  // Tu JavaScript va aquí
+
+</script>
+
+ +

Añadiendo variables para guardar los datos

+ +

Empecemos. En primer lugar, agrega las siguientes líneas dentro de tu elemento {{htmlelement("script")}}:

+ +
let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+const guesses = document.querySelector('.guesses');
+const lastResult = document.querySelector('.lastResult');
+const lowOrHi = document.querySelector('.lowOrHi');
+
+const guessSubmit = document.querySelector('.guessSubmit');
+const guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;
+ +

Esta sección del código establece las variables y constantes que necesitamos para almacenar los datos que nuestro programa utilizará. Las variables básicamente son contenedores de valores (como números o cadenas de texto). Creas una variable con la palabra clave let (o var) seguida de un nombre para tu variable (leerás más sobre la diferencia entre las palabras clave en el siguiente artículo). Las constantes se utilizan para almacenar valores que no deseas modificar y se crean con la palabra clave const. En este caso, estamos usando constantes para almacenar referencias a partes de nuestra interfaz de usuario; el texto dentro de algunas de ellas puede cambiar, pero los elementos HTML a los que se hace referencia permanecer iguales.

+ +

Puedes asignar un valor a tu variable o constante con un signo igual (=) seguido del valor que deseas darle.

+ +

En nuestro ejemplo:

+ + + +
+

Nota: Aprenderás mucho más sobre las variables/constantes más adelante en el curso, comenzando con el artículo siguiente.

+
+ +

Funciones

+ +

A continuación, agrega lo siguiente debajo de tu código JavaScript anterior:

+ +
function checkGuess() {
+  alert('Soy un marcador de posición');
+}
+ +

Las funciones son bloques de código reutilizable que puedes escribir una vez y ejecutar una y otra vez, ahorrando la necesidad de repetir el código todo el tiempo. Son realmente útiles. Hay varias maneras de definir funciones, pero por ahora nos concentraremos en un tipo simple. Aquí hemos definido una función usando la palabra clave function, seguida de un nombre, con paréntesis después de él. Después de eso ponemos dos llaves ({ }). Dentro de las llaves se encuentra todo el código que queremos ejecutar cuando llamamos a la función.

+ +

Cuando queramos ejecutar el código, escribimos el nombre de la función seguido de los paréntesis.

+ +

Probémoslo ahora. Guarda tu código y actualiza la página en tu navegador. Luego, ingresa a la consola JavaScript de las herramientas para desarrolladores e ingresa la siguiente línea:

+ +
checkGuess();
+ +

Después de presionarRetorno/Intro, debería aparecer una alerta que dice "Soy un marcador de posición"; hemos definido una función en nuestro código que crea una alerta cada vez que la llamamos.

+ +
+

Nota: Aprenderás mucho más sobre las funciones más adelante en el curso.

+
+ +

Operadores

+ +

Los operadores de JavaScript nos permiten realizar pruebas, hacer cálculos matemáticos, unir cadenas y otras cosas similares.

+ +

Si aún no lo has hecho, guarda tu código, actualiza la página en tu navegador y abre la consola JavaScript de las herramientas para desarrolladores. Luego, podemos intentar escribir los ejemplos que se muestran a continuación — escribe cada una de las columnas de "Ejemplo" exactamente como se muestra, presionando Retorno/Intro después de cada una, y ve los resultados que devuelven.

+ +

Primero veamos los operadores aritméticos, por ejemplo:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorDescripciónEjemplo
+Suma6 + 9
-Resta20 - 15
*Multiplicación3 * 7
/División10 / 5
+ +

También puedes usar el operador + para unir cadenas de texto (en programación, esto se llama concatenación). Intenta ingresar las siguientes líneas, una por una:

+ +
let name = 'Bingo';
+name;
+let hello = ' dice hola!';
+hello;
+let greeting = '¡' + name + hello;
+greeting;
+ +

También disponemos de algunos atajos de operadores, llamados operadores de asignación mejorada. Por ejemplo, si quieres simplemente agregar una nueva cadena de texto a una existente y devolver el resultado, puedes hacer esto:

+ +
name += ' dice hola!';
+ +

Esto es equivalente a

+ +
name = name + ' dice hola!';
+ +

Cuando ejecutamos pruebas de verdadero/falso (por ejemplo, dentro de condicionales — consulta {{anch("Conditionals", "abajo")}}) usamos operadores de comparación. Por ejemplo:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorDescripciónEjemplo
===Igualdad estricta (¿es exactamente lo mismo?) + 
+5 === 2 + 4 // false
+'Chris' === 'Bob' // false
+5 === 2 + 3 // true
+2 === '2' // false; número versus cadena
+
+
!==No igual (¿no es lo mismo?) + 
+5 !== 2 + 4 // true
+'Chris' !== 'Bob' // true
+5 !== 2 + 3 // false
+2 !== '2' // true; número versus cadena
+
+
<Menor que + 
+6 < 10 // true
+20 < 10 // false
+
>Mayor que + 
+6 > 10 // false
+20 > 10  // true
+
+ +

Condicionales

+ +

Volviendo a nuestra función checkGuess(), creo que es seguro decir que no queremos que simplemente muestre un mensaje de marcador de posición. Queremos que compruebe si la respuesta del jugador es correcta o no, y que responda de manera apropiada.

+ +

En este punto, reemplaza su función checkGuess() actual con esta versión:

+ +
function checkGuess() {
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Intentos anteriores: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = '¡Felicidades! ¡Lo adivinaste!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!Fin del juego!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = '¡Incorrecto!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess < randomNumber) {
+      lowOrHi.textContent = '¡El número es muy bajo!';
+    } else if(userGuess > randomNumber) {
+      lowOrHi.textContent = '¡El número es muy grande!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}
+ +

Esto es un montón de código — ¡uf! Repasemos cada sección y expliquemos lo qué hace.

+ + + +

Eventos

+ +

A estas alturas, hemos implementado correctamente la función checkGuess(), pero no hará nada porque aún no la hemos llamado. Lo ideal, sería llamarla cuando se presiona el botón "Enviar respuesta", y para hacerlo necesitamos usar un evento. Los eventos son cosas que suceden en el navegador — se hace clic en un botón, se carga una página, se reproduce un video, etc. — en respuesta a lo cual podemos ejecutar bloques de código. Las construcciones que escuchan el evento que ocurre se denominan escuchas de eventos, y los bloques de código que se ejecutan en respuesta a la activación del evento se denominan controladores de eventos.

+ +

Agrega la siguiente línea debajo de tu función checkGuess():

+ +
guessSubmit.addEventListener('click', checkGuess);
+ +

Aquí estamos agregando un escucha de eventos al botón guessSubmit. Este es un método toma dos valores de entrada (llamados argumentos) — el tipo de evento que queremos escuchar (en este caso, click) como una cadena, y el código que queremos ejecutar cuando ocurra el evento (en este caso la función checkGuess()). Ten en cuenta que no es necesario especificar los paréntesis al escribirlo dentro de {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

+ +

Intenta guardar y actualizar tu código ahora, y tu ejemplo debería funcionar — hasta cierto punto. El único problema ahora es que si adivinas la respuesta correcta o agotas los intentos, el juego se interrumpirá porque aún no hemos definido la función setGameOver() que se supone se debe ejecutar una vez que el juego se acabó. Ahora, agreguemos nuestro código faltante y completemos la funcionalidad de ejemplo.

+ +

Finalizando la funcionalidad del juego

+ +

Agreguemos la función setGameOver() al final de nuestro código y luego repasémoslo. Agrega esto ahora, debajo del resto de su JavaScript:

+ +
function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Iniciar nuevo juego';
+  document.body.append(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}
+ + + +

¡Ahora también necesitamos definir esta función! Agrega el siguiente código, nuevamente al final de tu JavaScript:

+ +
function resetGame() {
+  guessCount = 1;
+
+  const resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i < resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}
+ +

Este bloque de código bastante largo restablece completamente todo a cómo estaba al comienzo del juego, para que el jugador pueda intentarlo de nuevo. Eso:

+ + + +

En este punto, deberías tener un juego completamente funcional (simple) — ¡Felicidades!

+ +

Todo lo que resta por hacer en este artículo es hablar sobre algunas otras importantes características del código que ya has visto, aunque es posible que no te hayas dado cuenta.

+ +

Bucles

+ +

Una parte del código anterior que debemos examinar detalladamente es el bucle for. Los bucles son un muy importante concepto en programación, estos te permiten seguir ejecutando un fragmento de código una y otra vez, hasta que se cumpla una determinada condición.

+ +

Para empezar, de nuevo ve a tu consola JavaScript de las herramientas para desarrolladores del navegador e introduce lo siguiente:

+ +
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
+ +

¿Que sucedió? Los números 1 a 20 se imprimieron en tu consola. Esto se debió al bucle. Un bucle for toma tres valores (argumentos) de entrada:

+ +
    +
  1. Un valor inicial: En este caso, comenzamos a contar en 1, pero este podría ser cualquier número que desees. También puedes reemplazar la letra i con cualquier nombre que desees, pero por convención se usa i porque es corto y fácil de recordar.
    2. +
  2. Una condición de salida: Aquí hemos especificado i < 21 — el ciclo continuará hasta que i no sea menor que 21. Cuando i llegue a 21, el bucle ya no se ejecutará.
    3. +
  3. Un incremento: Hemos especificado i++, que significa "agrega 1 a i". El ciclo se ejecutará una vez por cada valor de i, hasta que i alcance un valor de 21 (como se explicó anteriormente). En este caso, simplemente imprimimos el valor de i en la consola en cada iteración usando {{domxref("console.log", "console.log()")}}.
    4. +
+ +

Ahora veamos el ciclo en nuestro juego de adivinan el número — lo siguiente está dentro de la función resetGame():

+ +
const resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i < resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}
+ +

Este código crea una variable que contiene una lista de todos los párrafos dentro de <div class="resultParas"> usando el método {{domxref("document.querySelectorAll", "querySelectorAll()")}}, luego recorre cada uno de ellos, eliminando el texto contenido a su paso.

+ +

Una pequeña explicación sobre objetos.

+ +

Agreguemos una mejora final más antes de entrar en esta explicación. Agrega la siguiente línea justo debajo de la línea let resetButton; cerca de la parte superior de tu JavaScript, luego guarda tu archivo:

+ +
guessField.focus();
+ +

Esta línea usa el método {{domxref("HTMLElement.focus", "focus()")}} para colocar automáticamente el cursor en el campo de texto {{htmlelement("input")}} tan pronto como se cargue la página, lo cual significa que el jugador puede comenzar a escribir su primer intento inmediatamente, sin tener que hacer clic primero en el campo del formulario. Es solo una pequeña adición, pero mejora la experiencia del jugador — brindando al usuario una buena pista visual de lo que tiene que hacer para jugar.

+ +

Analicemos lo que está sucediendo aquí con un poco más de detalle. En JavaScript, todo es un objeto. Un objeto es una colección de funciones relacionadas almacenadas en un solo grupo. Puedes crear tus propios objetos, pero eso es bastante avanzado y no lo cubriremos hasta mucho más adelante en el curso. Por ahora, analizaremos brevemente los objetos integrados que contiene tu navegador, los cuales te permiten hacer muchas cosas útiles.

+ +

En este caso particular, primero creamos una constante guessField que almacena una referencia al campo de texto del formulario en nuestro HTML — la siguiente línea se puede encontrar entre nuestras declaraciones cerca de la parte superior del código:

+ +
const guessField = document.querySelector('.guessField');
+ +

Para obtener esta referencia, usamos el método {{domxref("document.querySelector", "querySelector()")}} del objeto {{domxref("document")}}. querySelector() toma un parámetro — un selector CSS que selecciona el elemento del que deseas una referencia.

+ +

Debido a que guessField ahora contiene una referencia a un elemento {{htmlelement("input")}}, ahora tiene acceso a varias propiedades (básicamente variables almacenadas dentro de los objetos, algunas de las cuales no les puedes cambiar sus valores) y métodos (básicamente funciones almacenadas dentro de objetos). Un método disponible para elementos input es focus(), por lo que ahora podemos usar esta línea para enfocar el campo de texto:

+ +
guessField.focus();
+ +

Las variables que no contienen referencias a elementos de formulario no dispondrán de método focus(). Por ejemplo, la constante guessCount contiene una referencia a un elemento {{htmlelement("p")}} y la variable guessCount contiene un número.

+ +

Jugando con los objetos del navegador

+ +

Juguemos un poco con algunos objetos del navegador.

+ +
    +
  1. En primer lugar, abre tu programa en un navegador.
    2. +
  2. A continuación, abre las herramientas de desarrollo del navegador y asegúrate de que la pestaña de la consola JavaScript esté abierta.
    3. +
  3. Escribe guessField y la consola te mostrará que la variable contiene un elemento {{htmlelement("input")}}. También notarás que la consola te ayuda completando automáticamente los nombres de los objetos que existen dentro del entorno de ejecución, ¡incluidas tus variables!
    4. +
  4. Ahora escribe lo siguiente: + 
    guessField.value = 'Hola';
    + La propiedad value representa el valor actual ingresado en el campo de texto. Verás que al ingresar este comando, ¡hemos cambiado este valor!
    5. +
  5. Ahora intenta escribir guesses en la consola y presiona Intro. La consola te muestra que la variable contiene un elemento {{htmlelement("p")}}.
    6. +
  6. Ahora intenta ingresar la siguiente línea: + 
    guesses.value
    + El navegador devuelve undefined, porque los párrafos no tienen la propiedad value.
    7. +
  7. Para cambiar el texto dentro de un párrafo, necesitas la propiedad {{domxref("Node.textContent", "textContent")}} en su lugar. Prueba esto: + 
    guesses.textContent = '¿Dónde está mi párrafo?';
    +
    8. +
  8. Ahora, solo por diversión. Intenta ingresar las siguientes líneas, una por una: + 
    guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';
    + Cada elemento de una página tiene una propiedad style, que a su vez contiene un objeto cuyas propiedades contienen todos los estilos CSS en línea aplicados a ese elemento. Esto nos permite establecer dinámicamente nuevos estilos CSS en elementos utilizando JavaScript.
    9. +
+ +

Terminamos por ahora...

+ +

Así que eso es todo para construir el ejemplo. Llegaste al final, ¡bien hecho! Prueba tu código final, o juega con nuestra versión final aquí. Si no puedes hacer que el ejemplo funcione, compáralo con el código fuente.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

+ +

En este modulo

+ + diff --git a/files/es/learn/javascript/first_steps/arrays/index.html b/files/es/learn/javascript/first_steps/arrays/index.html new file mode 100644 index 0000000000..cea00871a7 --- /dev/null +++ b/files/es/learn/javascript/first_steps/arrays/index.html @@ -0,0 +1,665 @@ +--- +title: Arrays +slug: Learn/JavaScript/First_steps/Arrays +translation_of: Learn/JavaScript/First_steps/Arrays +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}
+ +

Arreglos o Matrices

+ +

En este último artículo de este módulo, veremos las matrices — una manera ordenada de almacenar una lista de elementos de datos bajo un solo nombre de variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear una matriz, recuperar, agregar y eliminar elementos almacenados en una matriz, y más.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, una comprensión básica de HTML y CSS, una idea de lo que es JavaScript.
Objectivo:Para entender qué son las matrices y cómo manipularlas en JavaScript.
+ +

¿Qué es una matriz?

+ +

Las matrices se describen como "objetos tipo lista"; básicamente son objetos individuales que contienen múltiples valores almacenados en una lista. Los objetos de matriz pueden almacenarse en variables y tratarse de la misma manera que cualquier otro tipo de valor, la diferencia es que podemos acceder individualmente a cada valor dentro de la lista y hacer cosas útiles y eficientes con la lista, como recorrerlo con un bucle y hacer una misma cosa a cada valor. Tal vez tenemos una serie de productos y sus precios almacenados en una matriz, y queremos recorrerlos e imprimirlos en una factura, sumando todos los precios e imprimiendo el total en la parte inferior.

+ +

Si no tuvieramos matrices, tendríamos que almacenar cada elemento en una variable separada, luego llamar al código que hace la impresión y agregarlo por separado para cada artículo. Esto sería mucho más largo de escribir, menos eficiente y más propenso a errores. si tuviéramos 10 elementos para agregar a la factura, ya sería suficientemente malo, pero ¿ qué pasa con 100 o 1000 artículos? Volveremos a este ejemplo más adelante en el artículo.

+ +

Como en artículos anteriores, aprendamos sobre los aspectos básicos reales de las matrices ingresando algunos ejemplos en una consola de JavaScript. A continuación proporcionamos uno (también puedes abrir en consola en una pestaña o ventana separadas, o usar la consola de desarrollador de navegador, si lo prefieres).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Creando una matriz

+ +

Las matrices se construyen con corchetes, que contiene una lista de elementos separdos por comas.

+ +
    +
  1. Digamos que queríamos almacenar una lista de compras en una matriz — haríamos algo como lo siguiente. Ingresa las siguientes líneas en la consola: + 
    let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+shopping;
    +
    2. +
  2. En este caso, cada elemento de la matriz es una cadena, pero ten en cuenta que puedes almacenar cualquier elemento en una matriz — cadena, número, objeto, otra variable, incluso otra matriz. También puedes mezclar y combinar tipos de elementos — no todos tienen que ser números, cadenas, etc. Prueba estos: + 
    let sequence = [1, 1, 2, 3, 5, 8, 13];
+let random = ['tree', 795, [0, 1, 2]];
    +
    3. +
  3. Intenta creando un par de matrices por tu cuenta, antes de continuar.
    4. +
+ +

Accediendo y modificando elementos de la matriz

+ +

Puedes entonces acceder a elementos individuales en la matriz mediante la notación de corchetes, del mismo modo que accediste a las letras de una cadena.

+ +
    +
  1. Ingresa lo siguiente en tu consola: + 
    shopping[0];
+// returns "bread"
    +
    2. +
  2. también puedes modificar un elemento en una matriz simplemente dando a un item de la matriz un nuevo valor. Prueba esto: + 
    shopping[0] = 'tahini';
+shopping;
+// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]
    + +
    Nota: Lo dijimos antes, pero solo como recordatorio — ¡ las computadoras comienzan a contar desde 0!
    +
    3. +
  3. Ten en cuenta que una matriz dentro de otra matriz se llama matriz multidimensional. Puedes acceder a los elementos de una matriz que estén dentro de otra, encadenando dos pares de corchetes. Por ejemplo, para acceder a uno de los elementos dentro de la matriz, que a su vez, es el tercer elemento dentro de la matriz random (ver sección anterior), podríamos hacer algo como esto: + 
    random[2][2];
    +
    4. +
  4. Intenta seguir jugando y haciendo algunas modificaciones más a tus ejemplos de matriz antes de continuar.
    5. +
+ +

Encontrar la longitud de una matriz

+ +

Puedes averiguar la longitud de una matriz (cuántos elementos contiene) exactamente de la misma manera que determinas la longitud (en caracteres) de una cadena— utilizando la propiedad {{jsxref("Array.prototype.length","length")}}. Prueba lo siguiente:

+ +
sequence.length;
+// should return 7
+ +

Esto tiene otros usos, pero se usa más comunmente para indicarle a un ciclo que continúe hasta que haya recorrido todos los elementos de la matriz. Así por ejemplo:

+ +
let sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i < sequence.length; i++) {
+  console.log(sequence[i]);
+}
+ +

Aprenderás acerca de bucles correctamente en un artículo futuro, pero brevemente, éste código dice:

+ +
    +
  1. Comienza el bucle en el elemento de la posición 0 en la matriz.
    2. +
  2. Detén el bucle en el número de item igual a la longitud de la matriz. Esto funcionará para una matriz de cualquier longitid, pero en este caso el ciclo se detendrá en el elemento número 7 (esto es bueno, ya que el último elemento — que queremos que recorra el bucle — es 6.
    3. +
  3. Para cada elemento, imprime en la consola del navegador con console.log().
    4. +
+ +

Alguno métodos de matriz útiles

+ +

En esta sección veremos algunos métodos bastante útiles relacionados con matrices que nos permiten dividir cadenas en elementos de matriz y viceversa, y agregar nuevos elementos en matrices.

+ +

Conversión entre matrices y cadenas

+ +

A menudo se te presentarán algunos datos brutos contenidos en una cadena larga y grande, y es posible que desees separar los elementos útiles de una forma más conveniente y luego hacerle cosas, como mostrarlos en una tabla de datos. Para hacer esto, podemos usar el método {{jsxref("String.prototype.split()","split()")}}. En su forma más simple, esto toma un único parámetro, el caracter que quieres separar de la cadena, y devuelve las subcadenas entre el separador como elementos en una matriz.

+ +
+

Nota: Bien, esto es técnicamente un método de cadena, no un método de matriz, pero lo hemos incluido con las matrices, ya que va bien aquí.

+
+ +
    +
  1. Vamos a jugar con esto, para ver como funciona. Primero, crea una cadena en tu consola: + 
    let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
    +
    2. +
  2. Ahora dividámoslo en cada coma: + 
    let myArray = myData.split(',');
+myArray;
    +
    3. +
  3. Finalmente, intenta encontrar la longitud de tu nueva matriz y recuperar algunos elementos de ella: + 
    myArray.length;
+myArray[0]; // the first item in the array
+myArray[1]; // the second item in the array
+myArray[myArray.length-1]; // the last item in the array
    +
    4. +
  4. También puedes ir en la dirección opuesta usando el método {{jsxref("Array.prototype.join()","join()")}}. Prueba lo siguiente: + 
    let myNewString = myArray.join(',');
+myNewString;
    +
    5. +
  5. Otra forma de convertir una matriz en cadena es usar el método {{jsxref("Array.prototype.toString()","toString()")}}. toString() es posiblemente  más simple que join() ya que no toma un parámetro, pero es más limitado. Con join() puedes especificar diferentes separadores (intenta ejecutar el Paso 4 con un caracter diferente a la coma). + 
    let dogNames = ['Rocket','Flash','Bella','Slugger'];
+dogNames.toString(); //Rocket,Flash,Bella,Slugger
    +
    6. +
+ +

Agregar y eliminar elementos de la matriz

+ +

Todavia no hemos cubierto la posibilidad de agregar y eliminar elementos de la matriz — echemos un vistazo a esto ahora. Usaremos la matriz myArray con la que terminamos en la última sección. Si todavía no has seguido esa sección, primero crea la matriz en tu consola:

+ +
let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+ +

Antes que nada, para añdir o eliminar un elemento al final de una matriz podemos usar {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} respectivamente.

+ +
    +
  1. primero usemos push() — nota que necesitas incluir uno o más elementos que desees agregas al final de tu matriz. Prueba esto: + + 
    myArray.push('Cardiff');
+myArray;
+myArray.push('Bradford', 'Brighton');
+myArray;
+
    +
    2. +
  2. La nueva longitud de la matriz se devuelve cuando finaliza la llamada al método. Si quisieras almacenar la nueva longitud de matriz en una variable, podrías hacer algo como esto: + 
    let newLength = myArray.push('Bristol');
+myArray;
+newLength;
    +
    3. +
  3. Eliminar el último elemento de una matriz es tan simple como ejecutar pop() en ella. Prueba esto: + 
    myArray.pop();
    +
    4. +
  4. El elemento que sé eliminó se devuelve cuando se completa la llamada al método. Para guardar este elemento en una variable, puedes hacer lo siguiente: + 
    let removedItem = myArray.pop();
+myArray;
+removedItem;
    +
    5. +
+ +

{{jsxref("Array.prototype.unshift()","unshift()")}} y {{jsxref("Array.prototype.shift()","shift()")}} funcionan exactamente igual de push() y pop(), respectivamente, excepto que funcionan al principio de la matriz, no al final.

+ +
    +
  1. Primero unshift() — prueba el siguiente comando: + + 
    myArray.unshift('Edinburgh');
+myArray;
    +
    2. +
  2. Ahora shift(); prueba estos! + 
    let removedItem = myArray.shift();
+myArray;
+removedItem;
    +
    3. +
+ +

Aprendizaje activo: ¡Imprimiendo esos productos!

+ +

Volvamos al ejemplo que describimos anteriormente — imprima los nombres de los productos y los precios en una factura, luego, sume los precios e imprímelos en la parte inferior. En el ejemplo editable a continuación, hay comentarios que contienen números — cada uno de estos marca un lugar donde debe agregar algo al código. Ellos son los siguientes:

+ +
    +
  1. Debajo de // number 1 hay un número de cadena, cada una de las cuales contiene un nombre de producto y un precio separados por dos puntos. Nos gustaría que conviertas esto en una matriz y lo almacenamos en una matriz llamda products.
    2. +
  2. En la misma línea que el comentario // number 2 es el comienzo de un ciclo for. En esta línea, actualmente tenemos i <= 0, que es una prueba condicional que hace que el bucle que el bucle for se detenga inmediatamente, porque dice "detener cuando i es menor o igual 0", y  i comienza en 0. Nos gustaría que reemplazaras esto con una prueba condicional que detenga el ciclo cuando i no sea inferior a la longitud la matriz products .
    3. +
  3. justo debajo del comentario // number 3 queremos que escriba una línea de código que divide el elemento actual de la matriz (nombre:precio) en dos elementos separados, uno que contiene solo el nombre y otros que contienen solo el precio. Si no está seguro de cómo hacerlo, consulte el artículo Métodos de cadenas útiles para obtener ayuda o, mejor aún, consulte la sección {{anch("Converting between strings and arrays")}} de este artículo.
    4. +
  4. Como parte de la línea de código anterior, también querras convertir el precio de una cadena a un número. Si no pudes recordar como hacerlo, consulta el primer artículo de cadenas.
    5. +
  5. Hay una variable llamada total que se crea y se le da un valor de 0 en la parte superior del código. Dentro del ciclo (debajo de // number 4) queremos que agregues una línea que añade el precio actual del artículo a ese total en cada iteración del ciclo, de modo que al final del código el total correcto se imprima en la factura. Es posible que necesites un operador de asignación para hacer esto.
    6. +
  6. Queremos que cambies la línea justo de bajo // number 5 para que la variable itemText se iguale a "nombre de elemnto actual — $precio de elemento actual", por ejemplo "Zapatos — $23.99" en cada caso, por lo que la ionformación correcta artículo está impreso en la factura. Esto es simplemente una concatenación de cadenas, lo que debería ser familiar para ti.
    7. +
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}

+ +

Aprendizaje Activo: Top 5 búsquedas

+ +

Un buen uso para los métodos de matriz como {{jsxref("Array.prototype.push()","push()")}} y {{jsxref("Array.prototype.pop()","pop()")}} es cuando estás manteniendo un registro de elementos actualmente activos en una aplicación web. En una escena animada por ejemplo, es posible que tengas una matriz de objetos que representan los gráficos de fondo que se muestran actualmente, y es posible que sólo desees que se muestren 50 a la vez, por razones de rendimiento o desorden. A medida que se crean y agregan nuevos objetos a la matriz, se puede eliminar los más antiguos de la matriz para mantener el número deseado.

+ +

En este ejemplo vamos a mostrar un uso mucho más simple — aquí te daremos un sitio de búsqueda falso, con un cuadro de búsqueda. La idea es que cuando los términos se ingresan en un cuadro de búsqueda, se muetren el top 5 de términos de búsqueda previos en la lista. Cuando el número de términos supera el 5, el último término comienza a borrarse cada vez que agregas un nuevo término a la parte superior, por lo que siempre se muestran los 5 términos anteriores.

+ +
+

Nota: En una aplicación de búsqueda real, probablemente puedas hacer clic en los términos de búsqueda anteriores para volver a los términos de búsqueda anteriores y ¡se motrarán los resultados de búsqueda reales! Solamente lo mantendremos simple por ahora.

+
+ +

Para completar la aplicación necesitamos:

+ +
    +
  1. Agregar una línea debajo del comentario // number 1 que agrega el valor actual ingresado en la entrada de la búsqueda al inicio de la matriz. Esto se puede recuperar usando searchInput.value.
    2. +
  2. Agrega una línea debajo del comentario // number 2 que elimina el valor actualmente al final de la matriz.
    3. +
+ + + +

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

+ +

Conclusión

+ +

Después de leer este artículo, estamos seguros de que estaras de acuerdo en que las matrices parecen bastante útiles; las verás aparecer en todas partes en JavaScript, a menudo en asociación con bucles para hacer una misma cosa con cada elemento de la matriz. Te enseñaremos todos los aspectos básicos útiles que hay que conocer sobre los bucles en el siguiente módulo, pero por ahora debes darte un aplauso y tomarte un merecido descanso; ¡has trabajado en todos los artículos de este módulo!

+ +

Lo único que queda por hacer es trabajar a través de la evaluación de este módulo, que te pondrá a prueba tu comprensión de los de los artículos anteriores.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps/Silly_story_generator", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html b/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html new file mode 100644 index 0000000000..58bb8e688a --- /dev/null +++ b/files/es/learn/javascript/first_steps/generador_de_historias_absurdas/index.html @@ -0,0 +1,147 @@ +--- +title: Generador de historias absurdas +slug: Learn/JavaScript/First_steps/Generador_de_historias_absurdas +tags: + - Arreglos + - Cadenas + - JavaScript + - Numeros + - Principiante +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

+ +

En esta evaluación, deberás tomar parte del conocimiento que has aprendido en los artículos de este módulo y aplicarlo a la creación de una aplicación divertida que genere historias aleatorias. ¡Que te diviertas!

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo.
Objetivo:Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y matrices
+ +

Punto de partida

+ +

Para iniciar esta evaluación, debe:

+ + + +
+

Nota: Alternativamente, puede usar un sitio como JSBin o Thimble para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene un panel de JavaScript separado, no dude en colocarlo en línea en un elemento <script> dentro de la página HTML.

+
+ +

Resumen del proyecto

+ +

Se le han proporcionado algunos HTML / CSS en bruto y algunas cadenas de texto y funciones de JavaScript; necesita escribir el JavaScript necesario para convertir esto en un programa de trabajo, que hace lo siguiente:

+ + + +

La siguiente captura de pantalla muestra un ejemplo de lo que debería producir el programa terminado:

+ +

+ +

Para darle más idea, eche un vistazo al ejemplo final (¡no mire el código fuente!)

+ +

Etapas para completar

+ +

En las siguientes secciones se describe lo que hay que hacer.

+ +

Configuración básica:

+ +
    +
  1. Crear un nuevo archivo llamado main.js, en el mismo directorio que tu archivo index.html.
    2. +
  2. Aplicar el archivo JavaScript externo a tu HTML insertando un elemento {{htmlelement("script")}} en tu HTML haciendo referencia a main.js. Póngalo justo antes de la etiquette de cierra </body>.
    3. +
+ +

Variables y funciones iniciales:

+ +
    +
  1. en el archivo de texto sin procesar, copia todo el código bajo el encabezado "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" y pégalo en la parte superior del archivo main.js. Esto te dará tres variables que almacenan las referencias al campo de texto "Enter custom name" (customName), el botón "Generate random story" (randomize), y el elemento {{htmlelement("p")}} al fondo del cuerpo HTML en el que la historia será copiada en (story), respectivamente. Además, obtendrás una funcion llamada randomValueFromArray() que toma un array, y devuelve uno de los items guardados dentro del array al azar.
    2. +
  2. Ahora observa la segunda sección del archivo de texto sin procesar — "2. RAW TEXT STRINGS". Esta contiene cadenas de texto que actuarán como entrada en nuestro programa. Nos gustaría que mantengas estas variables internas dentro del archivo main.js: +
      +
    1. Almacena la primera, la más larga, cadena de texto dentro de una variable llamada storyText.
      2. +
    2. Almacena el primer conjunto de tres cadenas dentro de un array llamado insertX.
      3. +
    3. Almacena el segundo conjunto de tres cadenas dentro de un array llamado insertY.
      4. +
    4. Almacena el tercer conjunto de tres cadenas dentro de un array llamado insertZ.
      5. +
    +
    3. +
+ +

Colocar el controlador de evento y la función incompleta:

+ +
    +
  1. Ahora regresa al archivo de texto sin procesar.
    2. +
  2. Copia el código encontrado bajo el encabezado "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" y pégalo al fondo de tu archivo main.js . Esto: +
      +
    • Añade un detector de eventos a la variable randomize, de manera que cuando al botón que esta representa se le haya dado un click, la función result() funcione.
      • +
    • Añade una definición de la función parcialmente completada result() a tu código. Por el resto de la evaluación, deberás llenar en líneas dentro de esta función para completarla y hacer que trabaje adecuadamente.
      • +
    +
    3. +
+ +

Completando la función result():

+ +
    +
  1. Crear una nueva variable llamada newStory, y establezca su valor igual a storyText. Esto es necesario para que podamos crear una nueva historia aleatoria cada vez que se presiona el botón y se ejecuta la función. Si hiciéramos cambios directamente en storyText, solo podríamos generar una nueva historia una vez.
    2. +
  2. Crear tres nuevas variables llamadas xItem, yItem, y zItem, y tienes que igualar cada variable llamando a randomValueFromArray() en sus tres matrices (el resultado en cada caso será un elemento aleatorio de cada matriz en la que se llama). Por ejemplo, puede llamar a la función y hacer que devuelva una cadena aleatoria de  insertX escribiendo randomValueFromArray(insertX).
    3. +
  3. A continuación, queremos reemplazar los tres marcadores de posición en la cadena newStory — :insertx:, :inserty:, y :insertz: — con las cadenas almacenadas en xItem, yItem, y zItem. Hay un método de string en particular que lo ayudará aquí: en cada caso, haga que la llamada al método sea igual a newStory de modo que cada vez que se llame, newStory se iguale a sí mismo, pero con sustituciones. Entonces, cada vez que se presiona el botón, estos marcadores de posición se reemplazan con una cadena absurda aleatoria. Como sugerencia adicional, el método en cuestión solo reemplaza la primera instancia de la subcadena que encuentra, por lo que es posible que deba realizar una de las llamadas dos veces.
    4. +
  4. Dentro del primer bloque if, agregue otra llamada al método de reemplazo de cadena para reemplazar el nombre 'Bob' que se encuentra en la cadena newStory con la variable de name. En este bloque estamos diciendo "Si se ingresó un valor en la entrada de texto customName  reemplace a Bob en la historia con ese nombre personalizado."
    5. +
  5. Dentro del segundo bloque if, se esta verificando si se ha seleccionado el botón de opción uk  Si es así, queremos convertir los valores de peso y temperatura en la historia de libras and Fahrenheit a stones and grados centígrados. Lo que debe hacer es lo siguiente: +
      +
    1. Busque las fórmulas para convertir libras a stone, and Fahrenheit en grados centígrados.
      2. +
    2. Dentro de la línea que define la variable de weight, reemplace 300 con un cálculo que convierta 300 libras en stones. Concatenar 'stone' al final del resultado de la llamada Math.round().
      3. +
    3. Al lado de la línea que define la variable de temperature, reemplace 94 con un cálculo que convierta 94 Fahrenheit en centígrados. Concatenar 'centigrade' al final del resultado de la llamada Math.round().
      4. +
    4. Justo debajo de las dos definiciones de variables, agregue dos líneas de reemplazo de cadena más que reemplacen '94 fahrenheit 'con el contenido de la variable de temperature, y  '300 libras' con el contenido de la variable de weight.
      5. +
    +
    6. +
  6. Finalmente, en la penúltima línea de la función, haga que la propiedad textContent de la variable de la story (que hace referencia al párrafo) sea igual a newStory.
    7. +
+ +

Claves y pistas

+ + + +

Evaluación o ayuda adicional

+ +

Si está siguiendo esta evaluación como parte de un curso organizado, debería poder entregar su trabajo a su profesor/mentor para que lo califique. Si está aprendiendo por ti mismo, puede obtener la guía de calificación con bastante facilidad preguntando en el hilo de discussion thread for this exercise, o en el canal de IRC #mdn en Mozilla IRC. Pruebe el ejercicio primero: ¡no se gana nada haciendo trampa!

+ +

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/index.html b/files/es/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..9a1211fc54 --- /dev/null +++ b/files/es/learn/javascript/first_steps/index.html @@ -0,0 +1,88 @@ +--- +title: Primeros pasos con JavaScript +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Arreglos + - Artículo + - Cadenas + - CodingScripting + - Evaluación + - Guide + - Guía + - JavaScript + - Landing + - Matemáticas + - Numeros + - Operadores + - Principiante + - Rangos + - Series + - TopicStub + - Variables + - 'l10n:priority' + - modulo +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

En nuestro primer módulo de JavaScript, primero respondemos algunas preguntas fundamentales como "¿qué es JavaScript?", "¿cómo se ve?" y "¿qué puede hacer?", antes de pasar avanzar en la guía por tu primera experiencia práctica de escribir JavaScript. Después de eso, explicaremos en detalle algunos bloques de construcción clave, tal como variables, cadenas, números y arreglos.

+ +
+

¿Quieres transformarte en un desarrollador de la interfaz de usuario web?

+ +

Se elaboró un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.

+ +

Empieza aquí

+
+ +

Prerrequisitos

+ +

Antes de comenzar este módulo, no necesitas ningún conocimiento previo de JavaScript, pero debes estar familiarizado con HTML y CSS. Es recomendable trabajar con los siguientes módulos antes de comenzar con JavaScript:

+ + + +
+

Nota: Si estás trabajando en una computadora, tableta u otro dispositivo en el que no puedes crear tus propios archivos, puedes probar (la mayoría de) los ejemplos de código en un programa de codificación en línea como JSBin o Glitch.

+
+ +

Guías

+ +
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/Que_es_JavaScript", "¿Qué es JavaScript?")}}
+
¡Bienvenido al curso de JavaScript para principiantes de MDN!, En este primer artículo, analizaremos JavaScript desde un alto nivel, respondiendo preguntas como "¿qué es?", y "¿qué hace?", asegurándote de que te sientas cómodo con la intención de JavaScript.
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/A_first_splash", "Una primera introducción a JavaScript")}}
+
Ahora que has aprendido algo sobre la teoría de JavaScript y lo que puedes hacer con él, te daremos un curso intensivo sobre las características básicas de JavaScript a través de un tutorial completamente práctico. Aquí, te llevaremos paso a paso en la creación de un sencillo juego de "Adivina el número".
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/What_went_wrong", "¿Qué salió mal? — Solución de problemas de JavaScript")}}
+
Cuando construiste el juego "Adivina el número" en el artículo anterior, es posible que hayas descubierto que no funcionó. Tranquilo — este artículo tiene como objetivo evitar tu calvicie prematura al jalarte los pelos por este tipo de problemas proporcionándote algunos sencillos consejos sobre cómo encontrar y corregir errores en los programas JavaScript.
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/Variables", "Almacenar la información que necesitas — Variables")}}
+
Después de leer los últimos artículos, deberías saber qué es JavaScript, qué puede hacer por ti, cómo usarlo junto con otras tecnologías web y cómo se ven sus características principales desde un alto nivel. En este artículo llegaremos a los conceptos básicos reales, y veremos cómo trabajar con los bloques de construcción más básicos de JavaScript — Variables.
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/Math", "Matemáticas básicas en JavaScript — números y operadores")}}
+
En este punto del curso, explicaremos las matemáticas en JavaScript — cómo podemos combinar operadores y otras características para manipular con éxito los números para cumplir nuestras ofertas.
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/Strings", "Manejo de texto — cadenas en JavaScript")}}
+
A continuación, centraremos nuestra atención en las cadenas (strings) — así es como se llaman los fragmentos de texto en programación. En este artículo, veremos todas las cosas comunes que realmente debes saber sobre las cadenas al aprender JavaScript, como crear cadenas, escapar las comillas en una cadena y unirlas.
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/Useful_string_methods", "Útiles métodos de cadena")}}
+
Ahora que hemos visto los conceptos básicos de las cadenas, avancemos un poco y comencemos a pensar en las operaciones útiles que podemos hacer en las cadenas con métodos integrados, como encontrar la longitud del texto en una cadena, unir y dividir cadenas, sustituir un caracter por otro en una cadena, y más.
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/Arrays", "Arreglos")}}
+
En el artículo final de este módulo, veremos los arreglos — una forma ordenada de almacenar una lista de elementos de datos con un solo nombre de variable. Aquí vemos por qué esto es útil, luego exploramos cómo crear un arreglo, recuperar, agregar y eliminar elementos almacenados en un arreglo, y más.
+
+ +

Evaluaciones

+ +

La siguiente evaluación pondrá a prueba tu comprensión de los conceptos básicos de JavaScript cubiertos en las guías anteriores.

+ +
+
{{web.link("/es/docs/Learn/JavaScript/First_steps/Silly_story_generator", "Generador de historias absurdas")}}
+
En esta evaluación, se te asignará la tarea de tomar algunos de los conocimientos adquiridos en los artículos de este módulo y aplicarlos para crear una divertida aplicación que genere historias absurdas al azar. ¡Que te diviertas!
+
+ +

Ve también

+ +
+
Aprende JavaScript
+
Un excelente recurso para los aspirantes a desarrolladores web — aprende JavaScript en un entorno interactivo, con lecciones breves y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas y el curso completo está disponible por un pequeño pago único.
+
diff --git "a/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" "b/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" new file mode 100644 index 0000000000..d9117ed211 --- /dev/null +++ "b/files/es/learn/javascript/first_steps/matem\303\241ticas/index.html" @@ -0,0 +1,443 @@ +--- +title: Matemáticas básicas en JavaScript — números y operadores +slug: Learn/JavaScript/First_steps/Matemáticas +tags: + - Aprender + - Artículo + - Guía + - JavaScript + - Matemáticas + - Math + - Novato + - Operadores + - Principiante + - incremento + - 'l10n:priority' + - modulo +translation_of: Learn/JavaScript/First_steps/Math +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}
+ +

En este punto del curso, hablaremos de matemáticas en JavaScript — cómo  podemos usar {{Glossary("Operator","operadores")}} y otras características para manipular con éxito números y conseguir lo que nos hayamos propuesto.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de ordenadores, comprensión básica de  HTML y CSS, comprensión básica de lo que es JavaScript.
Objetivo:Familiarizarse con las matemáticas básicas de JavaScript.
+ +

Todos aman las matemáticas

+ +

Vale, tal vez no. A algunos nos gustan, otros las odiamos desde que aprendimos en la escuela las tablas de multipicar y las divisiones complicadas, y algunos estamos a mitad entre ambas posturas. Pero ninguno podemos negar que las matemáticas son una parte fundamental de la vida que nos afecta. Y esto es especialmente cierto cuando aprendemos JavaScript (o cualquier otro lenguaje similar) — en la medida en que ello pasa por procesar números, calcular nuevos valores, etc., no te puede sorprender comprobar que JavaScript dispone de un completo conjunto de funciones matemáticas.

+ +

En este artículo se trata solo aquella parte básica que necesitas conocer por ahora.

+ +

Tipos de números

+ +

En programación, incluso el simple sistema numérico decimal que todos conocemos tan bien, es más complicado de lo que podrías pensar. Usamos diferentes términos para describir diferentes tipos de números decimales, por ejemplo:

+ + + +

¡Incluso tenemos distintos tipos de sistemas numéricos! El decimal es base 10 (quiere decir que utiliza 0-9 en cada columna), pero también tenemos cosas como:

+ + + +

Antes de que comiences a preouparte de que tu cerebro se derrita, ¡detente un momento! Para empezar, sólo vamos a apegarnos a los números decimales durante todo este curso; pocas veces te verás en la necesidad de comenzar a pensar sobre los otros tipos, si es que lo haces.

+ +

La segunda parte de las buenas noticias es que, a diferencia de otros lenguajes de programación, JavaScript sólo tiene un tipo de dato para los números, adivinaste, {{jsxref("Number")}}. Esto significa que, sin importar el tipo de número con el que estés lidiando en Javascript, los manejas siempre de la misma manera.

+ +
+

Nota: En realidad, JavaScript tiene un segundo tipo de número, {{Glossary("BigInt")}}, que se utiliza para números enteros muy, muy grandes. Pero para los propósitos de este curso, solo nos preocuparemos por los valores numéricos.

+
+ +

Para mí, todo son números.

+ +

Juguemos un poco con algunos números para ponernos al día con la sintaxis básica que necesitamos. Coloca los comandos listados abajo en la consola JavaScript de tus herramientas para desarrolladores, o utiliza la sencilla consola integrada que verás abajo si lo prefieres.

+ +

Abrir en una ventana nueva

+ +
    +
  1. Primero que todo, declara un par de variables e inicializalas con un entero y un flotante, respectivamente, luego escribe los nombres de esas variables para chequear que todo esté en orden: + 
    var myInt = 5;
+var myFloat = 6.667;
+myInt;
+myFloat;
    +
    2. +
  2. Los valores numéricos están escritos sin comillas - Trata de declarar e inicializar un par de variables más que contengan números antes de continuar.
    3. +
  3. Ahora chequea que nuestras variables originales sean del mismo tipo. Hay un operador llamado {{jsxref("Operators/typeof", "typeof")}} en JavaScript hace esto. Digita las dos lineas siguientes: + 
    typeof myInt;
+typeof myFloat;
    + Obtendrás "number" en ambos casos — esto hace las cosas mucho más fáciles que si diferentes números tuvieran difetentes tipos, y tuvimos que lidiar con ellos de diferentes maneras. Uf !
    4. +
+ +

Operadores Aritméticos

+ +

Los operadores aritméticos son operadores básicos que usamos para hacer sumas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósitoEjemplo
+AdiciónSuma dos números juntos.6 + 9
-RestaResta el numero de la derecha del de la izquierda.20 - 15
*MultiplicaciónMultiplica dos números juntos.3 * 7
/DivisiónDivide el número de la izquierda por el de la derecha.10 / 5
%Sobrante (también llamado módulo) +

Retorna el restante después de dividir el número de la izquierda en porciones enteras del de la derecha.

+ 		8 % 3 (retorna 2, como tres está dos veces en 8, quedando 2 restantes.)
+ +
+

Nota: A veces verás números involucrados en sumas referidas como {{Glossary("Operand", "operands")}}.

+
+ +

Probablemente no necesitemos enseñarte matemáticas básicas, pero nos gustaría probar tu entendimiento de la sintaxis involucrada. Intenta entrar los ejemplos de abajo en tu consola JavaScript de tus herramientas para desarrolladores, o usa la sencilla consola incorporada que se vio anteriormente, si lo prefieres, para familiarizarte con la sintaxis.

+ +
    +
  1. Primero, trata entrando un ejemplo simple por tu cuenta, como + 
    10 + 7
+9 * 8
+60 % 3
    +
    2. +
  2. Puedes tratar declarando e inicializando algunos números en variables, y probar usándolos en la suma - Las variables se comportarán exactamente como los valores que tienen para los fines de la suma. Por ejemplo: + 
    var num1 = 10;
+var num2 = 50;
+9 * num1;
+num2 / num1;
    +
    3. +
  3. Por último, trate entrando algunas expresiones complejas, como: + 
    5 + 10 * 3;
+num2 % 9 * num1;
+num2 + num1 / 8 + 2;
    +
    4. +
+ +

Es posible que parte de este último conjunto de sumas no te dé el resultado que esperabas; La siguiente sección bien podría dar la respuesta del por qué.

+ +

Precedencia de Operadores

+ +

Veamos el último ejemplo de arriba, asumiendo que num2 tiene el valor 50 y num1 tiene el valor 10 (como se indicó anteriormente):

+ +
num2 + num1 / 8 + 2;
+ +

Como un ser humano, puedes leer esto como "50 más 10 es igual a 60", luego "8 más 2 es igual a 10", y finalmente "60 dividido por 10 es igual a 6".

+ +

Pero el navegador hace "10 dividido por 8 es igual a 1.25", luego "50 más 1.25 más 2 es igual a 53.25".

+ +

Esto es debido a la precedencia de operadores — algunos operadores son aplicados antes de otros cuando se calcula el resultado de una suma (referida como una expresión, en programación).  La precedencia de operadores en JavaScript es la misma que en las matemáticas de la escuela  — La multiplicación y la división se resuelven siempre primero, luego la suma y resta (la suma siempre se evalua de izquierda a derecha).

+ +

Si quieres alterar la precedencia de operación, puedes colocar paréntesis alrededor de las partes que quieras explícitamente evaluar primero. Para obtener un resultado de 6, podríamos hacer esto:

+ +
(num2 + num1) / (8 + 2);
+ +

Pruébalo y verás.

+ +
+

Nota: Una completa lista de todos los operadores de JavaScript y sus precedencias pueden encontrarse en Expresiones y operadores.

+
+ +

Operadores de incremento y decremento

+ +

Algunas veces necesitarás repetidamente sumar o restar uno de/a una variable numérica. Esto puede hacerse convenientemente usando los operadores de incremento (++) y decremento (--). Usamos ++ en nuestro juego "Adivina el número" en nuestro artículo Un primer acercamiento a JavaScript, cuando agregamos 1 a nuestra variable guessCount para mantener una pista de cuantas respuestas le quedan al usuario por turno.

+ +
guessCount++;
+ +
+

Nota: Son muy comunmente usadas en ciclos, que aprenderás más adelante en el curso. Por ejemplo, Digamos que quieras recorrer una lista de precios, y agregar impuestos a cada uno. Usaría un ciclo para recorrer cada valor y realizar el cálculo necesario para agregar el impuesto a las ventas en cada caso. El incrementador es usado para mover al próximo valor cuando es necesario. Damos un simple ejemplo En realidad, proporcionamos un ejemplo simple que muestra cómo se hace esto: ¡pruébalo en vivo y mira el código fuente para ver si puedes detectar los incrementadores! Veremos los ciclos en detalle más adelante en el curso..

+
+ +

Trata jugando con eso en tu consola. Para empezar, nota que no puedes aplicar esto directamente a un número, sin operar en él mismo. Lo siguiente retorna un error:

+ +
3++;
+ +

Asì, puedes solo incrementar una variable existente. Prueba esto:

+ +
var num1 = 4;
+num1++;
+ +

Ok, la extrañeza número 2! Cuando hagas esto, verás que se devuelve un valor de 4; esto se debe a que el navegador devuelve el valor actual y luego incrementa la variable. Puedes ver que se ha incrementado si devuelves el valor variable nuevamente:

+ +
num1;
+ +

Lo mismo funciona con -- : intenta lo siguiente:

+ +
var num2 = 6;
+num2--;
+num2;
+ +
+

Nota: Puedes hacer que el navegador lo haga al revés: aumentar / disminuir la variable y luego devolver el valor, colocando el operador al comienzo de la variable en lugar del final. Prueba los ejemplos anteriores otra vez, pero esta vez usa ++num1 y--num2.

+
+ +

Operadores de asignación

+ +

Los operadores de asignación son operadores que asignan un valor a una variable. Ya usamos el más básico, =, muchas veces — simplemente asigna a la variable de la izquierda, el valor de la derecha:

+ +
var x = 3; // x contiene el valor 3
+var y = 4; // y contiene el valor 4
+x = y; // x ahora contiene el mismo valor de y... 4
+ +

Pero hay algunos tipos más complejos, que proporcionan atajos útiles para mantener tu código más ordenado y más eficiente. Los más comunes se enumeran a continuación.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósito_Ejemplo__Atajo_de__
+=Adición asignaciónSuma el valor de la derecha al valor de la variable de la  izquierda y returna el nuevo valorx = 3;
+ x += 4;		x = 3;
+ x = x + 4;
-=Resta asignación +

Resta el valor de la derecha, del valor de la variable de la izquierda y retorna el nuevo valor.

+ 		x = 6;
+ x -= 3;		x = 6;
+ x = x - 3;
*=Multiplicación asignación +

Multiplica el valor de la variable en la izquierda por el valor en la derecha y retorna el nuevo valor.

+ 		x = 2;
+ x *= 3;		x = 2;
+ x = x * 3;
/=División asignación +

Divide el valor de la variable en la izquierda por el valor de la derecha y retorna el nuevo valor.

+ 		x = 10;
+ x /= 5;		x = 10;
+ x = x / 5;
+ +

Intenta digitar algunos de estos ejemplos en tu consola, para darte una idea de cómo funcionan. Mira si puedes preguntar los valores que tenían antes de ingresarlos en la segunda línea, en cada caso.

+ +

Ten en cuenta que puedes usar otras variables en el lado derecho de cada expresión, por ejemplo:

+ +
var x = 3; // x contiene el valor 3
+var y = 4; // y contiene el valor 4
+x *= y; // x ahora contiene el valor 12
+ +
+

Nota: Hay una cantidad de otros operadores de asignación disponibles, pero estos son los básicos que debes aprender por ahora.

+
+ +

Aprendizaje activo: dimensionando una caja canvas

+ +

En este ejercicio vamos a hacer que completes algunos números y operadores para manipular el tamaño de una caja. El cuadro se dibuja utilizando una API de navegador llamada {{domxref("Canvas API", "", "", "true")}}. No hay necesidad de preocuparse por cómo funciona esto, solo concentrarse en las matemáticas por ahora. El ancho y el alto del cuadro (en píxeles) están definidos por las variables x e y, a las que inicialmente se les asigna un valor de 50.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}

+ +

Abrir en una nueva ventana

+ +

En el cuadro de código editable anterior, hay dos líneas marcadas claramente con un comentario que nos gustaría que actualices para hacer que el cuadro crezca/se reduzca a ciertos tamaños, utilizando ciertos operadores y/o valores en cada caso. Intenta lo siguiente:

+ + + +

No te preocupes si arruinas totalmente el código. Siempre puedes presionar el botón Restablecer para que las cosas vuelvan a funcionar. Después de haber respondido correctamente a todas las preguntas anteriores, siéntete libre de jugar con el código un poco más, o establece desafíos para tus amigos/compañeros de clase..

+ +

Operadores de comparación

+ +

A veces querremos ejecutar pruebas de verdadero/falso, y luego actuaremos de acuerdo con el resultado de esa prueba. Para ello, utilizamos operadores de comparación.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperadorNombrePropósitoEjemplo
===Igual estrictoComprueba si los valores izquierdo y derecho son idénticos entre sí5 === 2 + 4
!==Igual no-estrictoComprueba si los valores izquierdo y derecho no son idénticos entre sí5 !== 2 + 3
<Menor queComprueba si el valor izquierdo es menor que el derecho.10 < 6
>Mayor queComprueba si el valor izquierdo es mayor que el derecho.10 > 20
<=Menor o igual aComprueba si el valor izquierdo es menor o igual que el derecho.3 <= 2
>=Mayor o igual aComprueba si el valor izquierdo es mayor o igual que el derecho..5 >= 4
+ +
+

Nota: Es posible que algunas personas utilicen == y != en sus pruebas de igualdad y no igualdad. Estos son operadores válidos en JavaScript, pero difieren de === /! ==: la prueba anterior indica si los valores son iguales. pero el tipo de datos puede ser diferente, mientras que las últimas versiones estrictas prueban si el valor y el tipo de datos son los mismos. Las versiones estrictas tienden a reducir el número de errores que no se detectan, por lo que te recomendamos que los utilices.

+
+ +

Si intentas ingresar algunos de estos valores en una consola, verás que todos devuelven valores verdaderos/falsos, esos booleanos que mencionamos en el artículo anterior. Son muy útiles ya que nos permiten tomar decisiones en nuestro código; se usan cada vez que queremos hacer una elección de algún tipo, por ejemplo.:

+ + + +

Veremos cómo codificar dicha lógica cuando veamos declaraciones condicionales en un artículo futuro. Por ahora, veamos un ejemplo rápido:

+ +
<button>Iniciar máquina</button>
+<p>La máquina se detuvo.</p>
+
+ +
var btn = document.querySelector('button');
+var txt = document.querySelector('p');
+
+btn.addEventListener('click', updateBtn);
+
+function updateBtn() {
+  if (btn.textContent === 'Iniciar máquina') {
+    btn.textContent = 'Detener máquina';
+    txt.textContent = 'La máquina se inició!';
+  } else {
+    btn.textContent = 'Iniciar máquina';
+    txt.textContent = 'La máquina se detuvo.';
+  }
+}
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}

+ +

Abrir en una nueva ventana

+ +

Puede ver el operador de igualdad utilizado justo dentro de la función updateBtn(). En este caso, no estamos probando si dos expresiones matemáticas tienen el mismo valor (estamos comprobando si el contenido de texto de un botón contiene una cadena determinada), pero sigue siendo el mismo principio. Si el botón está actualmente diciendo "Iniciar máquina" cuando se presiona, cambiamos su etiqueta a "Detener máquina" y actualizamos la etiqueta según corresponda. Si el botón está actualmente diciendo "Detener máquina" cuando se presiona, volvemos a cambiar la pantalla.

+ +
+

Nota: Un control de este tipo que intercambia entre dos estados generalmente se conoce como conmutador. Conmuta entre un estado y otro — Luces on, luces off, etc.

+
+ +

Pon a prueba tus habilidades

+ +

Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve ¡Pon a prueba tus habilidades!: Matemáticas.

+ +

Resumen

+ +

En este artículo hemos cubierto la información fundamental que necesitas saber sobre los números en JavaScript, por ahora. Verás los números usados una y otra vez, a lo largo de tu aprendizaje de JavaScript, por lo que es una buena idea hacer esto ahora. Si eres una de esas personas que no disfruta de las matemáticas, puedes sentirte cómodo por el hecho de que este capítulo fue bastante breve.

+ +

En el siguiente artículo, exploraremos el texto y cómo JavaScript nos permite manipularlo.

+ +
+

Nota: Si disfrutas de las matemáticas y quieres leer más sobre cómo se implementa en JavaScript, puedes encontrar muchos más detalles en la sección principal de JavaScript de MDN. Los mejores lugares para iniciar con artículos sobre Numero y fechas y Expresiones y operadores.

+
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html b/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html new file mode 100644 index 0000000000..f919ac1ee3 --- /dev/null +++ b/files/es/learn/javascript/first_steps/prueba_tus_habilidades_colon__strings/index.html @@ -0,0 +1,122 @@ +--- +title: 'Prueba tus habilidades: Strings' +slug: 'Learn/JavaScript/First_steps/Prueba_tus_habilidades:_Strings' +tags: + - Cadenas + - JavaScript + - Novato + - Principiante + - Prueba tus habilidades + - aprende + - strings +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Strings' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es evaluar si has entendido nuestros artículos Manejo de texto — cadenas en JavaScript y Métodos de cadena útiles.

+ +
+

Nota: Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te quedas atascado, pídenos ayuda — consulta la sección {{anch("Evaluación o ayuda adicional")}} en la parte inferior de esta página.

+
+ +
+

Nota: En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).

+
+ +

Cadenas 1

+ +

En nuestra primera tarea de cadenas, comenzaremos con algo pequeño. Ya tienes la mitad de una cita famosa dentro de una variable llamada quoteStart; nos gustaría que:

+ +
    +
  1. Busques la otra mitad de la cita y la agregues al ejemplo dentro de una variable llamada quoteEnd.
    2. +
  2. Concatenes las dos cadenas para hacer una sola cadena que contenga la cita completa. Guardes el resultado dentro de una variable llamada finalQuote.
    3. +
+ +

Verás que obtienes un error en este punto. ¿Puedes solucionar el problema con quoteStart para que la cita completa se muestre correctamente?

+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings1.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 2

+ +

En esta tarea, se te proporcionan dos variables, quote y substring, que contienen dos cadenas. Nos gustaría que:

+ +
    +
  1. Recuperes la longitud de la cita y la guardes en una variable llamada quoteLength.
    2. +
  2. Busques la posición del índice donde aparece substring en quote, y almacenes ese valor en una variable llamada index.
    3. +
  3. Uses una combinación de las variables que tienes y las propiedades/métodos de cadena disponibles para recortar la cita original a "No me gustan los huevos verdes y el jamón", y la guardes en una variable llamada revisedQuote.
    4. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings2.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 3

+ +

En la siguiente tarea de cadenas, se te da la misma cita con la que terminaste en la tarea anterior, ¡pero está algo rota! Queremos que la arregles y actualices, así:

+ +
    +
  1. Cambia la letra mayúscula para corregir con mayúscula inicial la oración (todo en minúsculas, excepto la primera letra mayúscula). Almacena la nueva cita en una variable llamada fixedQuote.
    2. +
  2. En fixedQuote, reemplaza "huevos verdes con jamón" con otro alimento que realmente no te guste.
    3. +
  3. Hay una pequeña solución más por hacer: agrega un punto al final de la cita y guarda la versión final en una variable llamada finalQuote.
    4. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings3.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Cadenas 4

+ +

En la tarea de cadena final, te hemos dado el nombre de un teorema, dos valores numéricos y una cadena incompleta (los bits que se deben agregar están marcados con asteriscos (*)). Queremos que cambies el valor de la cadena de la siguiente manera:

+ +
    +
  1. Cámbiala de un literal de cadena normal a una plantilla literal.
    2. +
  2. Reemplaza los cuatro asteriscos con cuatro marcadores de posición en la plantilla literal. Estos deben ser: +
      +
    1. El nombre del teorema.
      2. +
    2. Los dos valores numéricos que tenemos.
      3. +
    3. La longitud de la hipotenusa de un triángulo rectángulo, dado que las longitudes de los otros dos lados son iguales a los dos valores que tenemos. Deberás buscar cómo calcular esto a partir de lo que tienes. Haz el cálculo dentro del marcador de posición.
      4. +
    +
    3. +
+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/strings/strings4.html", '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos anteriores.

+ +

Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:

+ +
    +
  1. Coloca tu trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle o Glitch. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.
    2. +
  2. Escribe una publicación solicitando evaluación y/o ayuda en la categoría de aprendizaje del foro de discusión de MDN. Tu publicación debe incluir: +
      +
    • Un título descriptivo como "Se busca evaluación para la prueba de habilidad de Cadenas 1".
      • +
    • Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quiere una evaluación.
      • +
    • Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para entrar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
      • +
    +
    3. +
diff --git "a/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" "b/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" new file mode 100644 index 0000000000..bd845c8681 --- /dev/null +++ "b/files/es/learn/javascript/first_steps/qu\303\251_es_javascript/index.html" @@ -0,0 +1,436 @@ +--- +title: ¿Qué es JavaScript? +slug: Learn/JavaScript/First_steps/Qué_es_JavaScript +tags: + - APIs + - Aprender + - Artículo + - Añadir JavaScript + - Curso + - Dinámico + - En línea + - Gestores de JavaScript en linea + - JavaScript + - Navegador + - Núcleo + - Principiante + - comentários + - externo +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

¡Bienvenido al curso de JavaScript para principiantes de MDN! En este artículo veremos JavaScript desde un alto nivel, respondiendo preguntas como "¿Qué es?" y "¿Qué puedes hacer con él?", y asegúrate de estar cómodo con el propósito de JavaScript.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML y CSS.
Objetivo:Familiarizarte con lo que es JavaScript, lo que puede hacer y cómo encaja en un sitio web.
+ +

Una definición de alto nivel

+ +

JavaScript es un lenguaje de programación o de secuencias de comandos que te permite implementar funciones complejas en páginas web, cada vez que una página web hace algo más que sentarse allí y mostrar información estática para que la veas, muestra oportunas actualizaciones de contenido, mapas interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes apostar que probablemente JavaScript está involucrado. Es la tercera capa del pastel de las tecnologías web estándar, dos de las cuales (HTML y CSS) hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje.

+ +

+ + + +

Las tres capas se superponen muy bien. Tomemos una etiqueta de texto simple como ejemplo. Podemos marcarla usando HTML para darle estructura y propósito:

+ +
<p>Player 1: Chris</p>
+ +

+ +

Luego, podemos agregar algo de CSS a la mezcla para que se vea bien:

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}
+ +

+ +

Y finalmente, podemos agregar algo de JavaScript para implementar un comportamiento dinámico:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}

+ +

Intenta hacer clic en esta última versión de la etiqueta de texto para ver qué sucede (ten en cuenta también que puedes encontrar esta demostración en GitHub — ¡consulta el código fuente o ejecútalo en vivo)!

+ +

JavaScript puede hacer mucho más que eso — exploremos qué con más detalle.

+ +

Entonces, ¿qué puede hacer realmente?

+ +

El núcleo del lenguaje JavaScript de lado del cliente consta de algunas características de programación comunes que te permiten hacer cosas como:

+ + + +

Sin embargo, lo que aún es más emocionante es la funcionalidad construida sobre el lenguaje JavaScript de lado del cliente. Las denominadas interfaces de programación de aplicaciones (API) te proporcionan superpoderes adicionales para utilizar en tu código JavaScript.

+ +

Las API son conjuntos de bloques de construcción de código listos para usar que permiten a un desarrollador implementar programas que de otro modo serían difíciles o imposibles de implementar. Hacen lo mismo para la programación que los kits de muebles prefabricados para la construcción de viviendas — es mucho más fácil tomar paneles precortados y atornillarlos para hacer una estantería que elaborar el diseño tú mismo, que ir y encontrar la madera correcta, cortar todos los paneles del tamaño y la forma correctos, buscar los tornillos del tamaño correcto y luego júntalos para hacer una estantería.

+ +

Generalmente se dividen en dos categorías.

+ +

+ +

Las APIs del navegador están integradas en tu navegador web y pueden exponer datos del entorno informático circundante o realizar tareas complejas y útiles. Por ejemplo:

+ + + +
+

Nota: Muchas de las demostraciones anteriores no funcionarán en un navegador antiguo — al experimentar, es una buena idea utilizar un navegador moderno como Firefox, Chrome, Edge u Opera para ejecutar tu código. Deberás considerar las pruebas en varios navegadores con más detalle cuando estés más cerca de entregar el código de producción (es decir, código real que usarán los clientes reales).

+
+ +

Las APIs de terceros no están integradas en el navegador de forma predeterminada y, por lo general, debes obtener su código e información de algún lugar de la Web. Por ejemplo:

+ + + +
+

Nota: estas APIs son avanzadas y no cubriremos ninguna de ellas en este módulo. Puedes obtener más información sobre estas en nuestro módulo de APIs web de lado del cliente.

+
+ +

¡También hay mucho más disponible! Sin embargo, no te emociones demasiado todavía. No podrás crear el próximo Facebook, Google Maps o Instagram después de estudiar JavaScript durante 24 horas — hay muchos conceptos básicos que cubrir primero. Y es por eso que estás aquí — ¡sigamos adelante!

+ +

¿Qué está haciendo JavaScript en tu página?

+ +

Aquí, de hecho, comenzaremos a ver algo de código y, mientras lo hacemos, exploraremos lo que realmente sucede cuando ejecutas JavaScript en tu página.

+ +

Recapitulemos brevemente sobre la historia de lo que sucede cuando cargas una página web en un navegador (de lo que hablamos por primera vez en nuestro artículo Cómo funciona CSS). Cuando cargas una página web en tu navegador, estás ejecutando tu código (HTML, CSS y JavaScript) dentro de un entorno de ejecución (la pestaña del navegador). Esto es como una fábrica que toma materias primas (el código) y genera un producto (la página web).

+ +

+ +

Un uso muy común de JavaScript es modificar dinámicamente HTML y CSS para actualizar una interfaz de usuario, a través de la API del modelo de objetos del documento (como se mencionó anteriormente). Ten en cuenta que el código de tus documentos web generalmente se cargan y ejecutan en el orden en que aparece en la página. Si JavaScript se carga e intenta ejecutarse antes de que se hayan cargado el HTML y el CSS al que afecta, pueden producirse errores. Aprenderás formas de evitar esto más adelante en el artículo, en la sección Estrategias de carga de scripts.

+ +

Seguridad del navegador

+ +

Cada pestaña del navegador tiene su propio depósito separado para ejecutar código (estos depósitos se denominan "entornos de ejecución" en términos técnicos) — esto significa que, en la mayoría de los casos, el código de cada pestaña se ejecuta de forma completamente independiente y el código de una pestaña no puede afectar el código en otra pestaña, o en otro sitio web. Esta es una buena medida de seguridad — si este no fuera el caso, los piratas podrían comenzar a escribir código para robar información de otros sitios web y otras cosas muy malas.

+ +
+

Nota: Existen formas de enviar código y datos entre diferentes sitios web/pestañas de manera segura, pero estas son técnicas avanzadas que no cubriremos en este curso.

+
+ +

Orden de ejecución de JavaScript

+ +

Cuando el navegador encuentra un bloque de JavaScript, generalmente lo ejecuta en orden, de arriba a abajo. Esto significa que debes tener cuidado con el orden en el que colocas las cosas. Por ejemplo, volvamos al bloque de JavaScript que vimos en nuestro primer ejemplo:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Aquí seleccionamos un párrafo de texto (línea 1), luego adjuntamos un detector de eventos (línea 3) de modo que cuando se hace clic en el párrafo, el bloque de código updateName() (líneas 5-8) se ejecuta. El bloque de código updateName() (estos tipos de bloques de código reutilizables se denominan "funciones") pide al usuario un nuevo nombre y luego inserta ese nombre en el párrafo para actualizar la pantalla.

+ +

Si cambiaras el orden de las dos primeras líneas de código, ya no funcionaría — en su lugar, obtendrías un error en la consola del desarrollador del navegador — TypeError: para is undefined. Esto significa que el objeto para aún no existe, por lo que no podemos agregarle un detector de eventos.

+ +
+

Nota: Este es un error muy común; debes tener cuidado de que los objetos a los que se hace referencia en tu código existan antes de intentar hacer algo con ellos.

+
+ +

Código interpretado versus compilado

+ +

Es posible que escuches los términos interpretados y compilados en el contexto de la programación. En los lenguajes interpretados, el código se ejecuta de arriba a abajo y el resultado de ejecutar el código se devuelve inmediatamente. No tienes que transformar el código en una forma diferente antes de que el navegador lo ejecute. El código se recibe en su forma de texto amigable para el programador y se procesa directamente desde allí.

+ +

Los lenguajes compilados, por otro lado, se transforman (compilan) a código máquina antes de que sean ejecutados por la computadora. Por ejemplo, C/C++ se compila a código máquina que luego ejecuta la computadora. El programa se ejecuta desde un formato binario, que se generó a partir del código fuente del programa original.

+ +

JavaScript es un lenguaje de programación interpretado ligero. El navegador web recibe el código JavaScript en su forma de texto original y ejecuta el script a partir de ahí. Desde un punto de vista técnico, la mayoría de los intérpretes de JavaScript modernos utilizan una técnica llamada compilación en tiempo real para mejorar el rendimiento; el código fuente de JavaScript se compila en un formato binario más rápido mientras se usa el script, de modo que se pueda ejecutar lo más rápido posible. Sin embargo, JavaScript todavía se considera un lenguaje interpretado, ya que la compilación se maneja en el entorno de ejecución, en lugar de antes.

+ +

Ambos tipos de lenguaje tienen ventajas, pero no las abordaremos ahora.

+ +

Código de lado del servidor versus de lado del cliente

+ +

También puedes escuchar los términos código de lado del servidor y de lado del cliente, especialmente en el contexto del desarrollo web. El código de lado del cliente es un código que se ejecuta en la computadora del usuario — cuando se ve una página web, el código de lado del cliente de la página se descarga, luego se ejecuta y se muestra en el navegador. En este módulo estamos hablando explícitamente de JavaScript de lado del cliente.

+ +

El código de lado del servidor, por otro lado, se ejecuta en el servidor, luego sus resultados se descargan y se muestran en el navegador. Ejemplos de lenguajes web populares de lado del servidor incluyen a ¡PHP, Python, Ruby, ASP.NET y... JavaScript! JavaScript también se puede utilizar como lenguaje de lado del servidor, por ejemplo, en el popular entorno Node.js — puedes obtener más información sobre JavaScript de lado del servidor en nuestro tema Sitios web dinámicos — Programación de lado del servidor.

+ +

Código dinámico versus estático

+ +

La palabra dinámico se usa para describir tanto a JavaScript de lado del cliente como a los lenguajes de lado del servidor — se refiere a la capacidad de actualizar la visualización de una página web/aplicación para mostrar diferentes cosas en diferentes circunstancias, generando contenido nuevo según sea necesario. El código de lado del servidor genera dinámicamente nuevo contenido en el servidor, p. ej. extraer datos de una base de datos, mientras que JavaScript de lado del cliente genera dinámicamente nuevo contenido dentro del navegador del cliente, p. ej. creando una nueva tabla HTML, llenándola con los datos solicitados al servidor y luego mostrando la tabla en una página web que se muestra al usuario. El significado es ligeramente diferente en los dos contextos, pero relacionado, y ambos enfoques (de lado del servidor y de lado del cliente) generalmente funcionan juntos.

+ +

Una página web sin contenido que se actualiza dinámicamente se denomina estática — simplemente muestra el mismo contenido todo el tiempo.

+ +

¿Cómo agregas JavaScript a tu página?

+ +

JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que CSS usa elementos {{htmlelement("link")}} para aplicar hojas de estilo externas y elementos {{htmlelement("style")}} para aplicar hojas de estilo internas a HTML, JavaScript solo necesita un amigo en el mundo de HTML: el elemento {htmlelement("script")}}. Aprendamos cómo funciona esto.

+ +

JavaScript interno

+ +
    +
  1. En primer lugar, haz una copia local de nuestro archivo de ejemplo apply-javascript.html. Guárdalo en un directorio en algún lugar accesible.
    2. +
  2. Abre el archivo en tu navegador web y en tu editor de texto. Verás que el HTML crea una página web simple que contiene un botón en el que se puede hacer clic.
    3. +
  3. A continuación, ve a tu editor de texto y agrega lo siguiente en tu head, justo antes de tu etiqueta de cierre </head>: + 
    <script>
+
+  // JavaScript va aquí
+
+</script>
    +
    4. +
  4. Ahora agregaremos algo de JavaScript dentro de nuestro elemento {{htmlelement("script")}} para que la página haga algo más interesante — agrega el siguiente código justo debajo de la línea "// El código JavaScript va aquí": + 
    document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i < buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});
    +
    5. +
  5. Guarda tu archivo y actualiza el navegador — ahora deberías ver que cuando haces clic en el botón, se genera un nuevo párrafo y se coloca debajo.
    6. +
+ +
+

Nota: Si tu ejemplo no parece funcionar, sigue los pasos nuevamente y verifica que hiciste todo bien. ¿Guardaste tu copia local del código de inicio como un archivo .html? ¿Agregaste tu elemento {{htmlelement("script")}} justo antes de la etiqueta </head>? ¿Ingresaste el JavaScript exactamente como se muestra? JavaScript distingue entre mayúsculas y minúsculas y es muy exigente, por lo que debes ingresar la sintaxis exactamente como se muestra; de lo contrario, es posible que no funcione.

+
+ +
+

Nota: Puedes ver esta versión en GitHub como apply-javascript-internal.html o (verla en vivo también).

+
+ +

JavaScript externo

+ +

Esto funciona muy bien, pero ¿y si quisiéramos poner nuestro JavaScript en un archivo externo? Exploremos esto ahora.

+ +
    +
  1. Primero, crea un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle script.js; asegúrate de que el nombre tenga la extensión .js, ya que así es como se reconoce como JavaScript.
    2. +
  2. Reemplaza tu elemento {{htmlelement("script")}} actual con lo siguiente: + 
    <script src="script.js" defer></script>
    +
    3. +
  3. Dentro de script.js, agrega el siguiente script: + 
    function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
    +
    4. +
  4. Guarda y actualiza tu navegador, ¡y deberías ver lo mismo! Funciona igual, pero ahora tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en términos de organización de tu código y para hacerlo reutilizable en varios archivos HTML. Además, el HTML es más fácil de leer sin grandes trozos de script en él.
    5. +
+ +
+

Nota: Puedes ver esta versión en GitHub como apply-javascript-external.html y script.js (verla en vivo también).

+
+ +

Controladores de JavaScript en línea

+ +

Ten en cuenta que a veces te encontrarás con fragmentos de código JavaScript real dentro de HTML. Podría verse algo similar a esto:

+ +
+
function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Click me!</button>
+
+ +

Puedes probar esta versión de nuestra demostración a continuación.

+ +

{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

+ +

Esta demostración tiene exactamente la misma funcionalidad que en las dos secciones anteriores, excepto que el elemento {{htmlelement("button")}} incluye un controlador onclick en línea para que la función se ejecute cuando se presiona el botón .

+ +

Sin embargo, no hagas esto. Es una mala práctica contaminar tu HTML con JavaScript, y es ineficiente; tendrías que incluir el atributo onclick="createParagraph()" en cada botón al que desees que se aplique JavaScript.

+ +

El uso de una construcción de JavaScript pura te permite seleccionar todos los botones usando una instrucción. El código que usamos anteriormente para cumplir este propósito se ve así:

+ +
const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Esto puede ser un poco más largo que el atributo onclick, pero funcionará para todos los botones, sin importar cuántos haya en la página, ni cuántos se agreguen o eliminen. No es necesario cambiar el JavaScript.

+ +
+

Nota: Intenta editar tu versión de apply-javascript.html y agrega algunos botones más en el archivo. Cuando la vuelvas a cargar, deberías encontrar que todos los botones al hacer clic crearán un párrafo. Limpio, ¿eh?

+
+ +

Estrategias para la carga de scripts

+ +

Hay una serie de problemas relacionados con la carga de los scripts en el momento adecuado. ¡Nada es tan simple como parece! Un problema común es que todo el HTML de una página se carga en el orden en que aparece. Si estás utilizando JavaScript para manipular elementos en la página (o exactamente, el Modelo de objetos del documento), tu código no funcionará si el JavaScript se carga y procesa antes que el HTML que estás intentando haga algo.

+ +

En los ejemplos de código anteriores, en los ejemplos internos y externos, JavaScript se carga y se ejecuta en el encabezado del documento, antes de analizar el cuerpo HTML. Esto podría causar un error, por lo que hemos utilizado algunas construcciones para solucionarlo.

+ +

En el ejemplo interno, puedes ver esta estructura alrededor del código:

+ +
document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

Este es un detector de eventos, que escucha el evento "DOMContentLoaded" del navegador, lo cual significa que el cuerpo HTML está completamente cargado y analizado. El JavaScript dentro de este bloque no se ejecutará hasta que se active ese evento, por lo que se evita el error (aprenderás sobre los eventos más adelante en el curso).

+ +

En el ejemplo externo, usamos una función de JavaScript más moderno para resolver el problema, el atributo defer, que le dice al navegador que continúe descargando el contenido HTML una vez que se ha alcanzado la etiqueta del elemento <script>.

+ +
<script src="script.js" defer></script>
+ +

En este caso, tanto el script como el HTML se cargarán simultáneamente y el código funcionará.

+ +
+

Nota: En el caso externo, no necesitamos usar el evento DOMContentLoaded porque el atributo defer nos resolvió el problema. No usamos la solución defer para el ejemplo interno de JavaScript porque defer solo funciona para scripts externos.

+
+ +

Una solución pasada de moda a este problema solía ser colocar tu elemento script justo en la parte inferior del cuerpo (por ejemplo, justo antes de la etiqueta </body>), para que se cargara después de haber procesado todo el HTML. El problema con esta solución es que la carga/procesamiento del script está completamente bloqueado hasta que se haya cargado el DOM HTML. En sitios muy grandes con mucho JavaScript, esto puede causar un importante problema de rendimiento y ralentizar tu sitio.

+ +

async y defer

+ +

En realidad, hay dos modernas características que podemos usar para evitar el problema del bloqueo de script: async y defer (que vimos anteriormente). Veamos la diferencia entre estas dos.

+ +

Los scripts cargados con el atributo async (ve más abajo) descargarán el script sin bloquear el renderizado de la página y lo ejecutará tan pronto como el script se termine de descargar. No tienes garantía de que los scripts se ejecuten en un orden específico, solo que no detendrán la visualización del resto de la página. Es mejor usar async cuando los scripts de la página se ejecutan de forma independiente y no dependen de ningún otro script de la página.

+ +

Por ejemplo, si tienes los siguientes elementos script:

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

No puedes confiar en el orden en que se cargarán los scripts. jquery.js se puede cargar antes o después de script2.js y script3.js y si este es el caso, cualquier función en esos scripts dependiendo de jquery producirá un error porque jquery no se definirá en el momento en que se ejecute el script.

+ +

async se debe usar cuando tienes un montón de scripts en segundo plano para cargar, y solo deseas ponerlos en su lugar lo antes posible. Por ejemplo, tal vez tengas algunos archivos de datos del juego para cargar, que serán necesarios cuando el juego realmente comience, pero por ahora solo deseas continuar mostrando la introducción del juego, los títulos y el lobby, sin que se bloqueen al cargar el script.

+ +

Los scripts cargados con el atributo defer (ve a continuación) se ejecutarán en el orden en que aparecen en la página y los ejecutará tan pronto como se descarguen el script y el contenido:

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

Todos los scripts con el atributo defer se cargarán en el orden en que aparecen en la página. Entonces, en el segundo ejemplo, podemos estar seguros de que jquery.js se cargará antes que script2.js y script3.js y que script2.js se cargará antes de script3.js. No se ejecutarán hasta que se haya cargado todo el contenido de la página, lo cual es útil si tus scripts dependen de que el DOM esté en su lugar (por ejemplo, modifican uno o más elementos de la página).

+ +

Para resumir:

+ + + +

Comentarios

+ +

Al igual que con HTML y CSS, es posible escribir comentarios en tu código JavaScript que el navegador ignorará y que existen simplemente para proporcionar instrucciones a tus compañeros desarrolladores sobre cómo funciona el código (y a ti, si regresas a tu código después de seis meses y no puedes recordar lo que hiciste). Los comentarios son muy útiles y deberías utilizarlos con frecuencia, especialmente para aplicaciones grandes. Hay dos tipos:

+ + + +

Entonces, por ejemplo, podríamos anotar el JavaScript de nuestra última demostración con comentarios como este:

+ +
// Función: crea un nuevo párrafo y lo agrega al final del cuerpo HTML.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Obtiene referencias de todos los botones de la página en un formato de arreglo.
+  2. Recorre todos los botones y agrega un detector de eventos 'click' a cada uno.
+
+  Cuando se presione cualquier botón, se ejecutará la función createParagraph().
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +
+

Nota: En general, más comentarios suelen ser mejor que menos, pero debes tener cuidado si agregas muchos comentarios para explicar qué son las variables (los nombres de tus variables tal vez deberían ser más intuitivos), o para explicar operaciones muy simples (tal vez tu código sea demasiado complicado).

+
+ +

Resumen

+ +

Así que ahí tienes, tu primer paso en el mundo de JavaScript. Comenzamos solo con teoría, para comenzar a acostumbrarte a por qué usarías JavaScript y qué tipo de cosas puedes hacer con él. En el camino, viste algunos ejemplos de código y aprendiste cómo encaja JavaScript con el resto del código en tu sitio web, entre otras cosas.

+ +

JavaScript puede parecer un poco abrumador en este momento, pero no te preocupes — en este curso, te guiaremos en pasos simples que tendrán sentido en el futuro. En el próximo artículo, nos sumergiremos directamente en lo práctico, lo que te permitirá comenzar directamente y crear tus propios ejemplos de JavaScript.

+ + + +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ +

En este modulo

+ + diff --git a/files/es/learn/javascript/first_steps/strings/index.html b/files/es/learn/javascript/first_steps/strings/index.html new file mode 100644 index 0000000000..e86560ae54 --- /dev/null +++ b/files/es/learn/javascript/first_steps/strings/index.html @@ -0,0 +1,299 @@ +--- +title: Manejar texto — cadenas en JavaScript +slug: Learn/JavaScript/First_steps/Strings +tags: + - Artículo + - Cadenas + - Comillas + - Guía + - JavaScript + - Novato + - Principiante + - Union + - Unir + - concatenación + - 'l10n:priority' + - strings +translation_of: Learn/JavaScript/First_steps/Strings +--- +

{{LearnSidebar}}

+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}
+ +

A continuación, centraremos nuestra atención en las cadenas de caracteres (strings): así es como se llaman los fragmentos de texto en programación. En este artículo veremos todas las cosas comunes que realmente deberías saber sobre cadenas de caracteres al aprender JavaScript, como crear cadenas, comillas en cadenas y unir cadenas.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de informática, una comprensión básica de HTML y CSS y de lo que es JavaScript.
Objectivo:Familiarizarte con los aspectos básicos de las cadenas de caracteres en JavaScript.
+ +

El poder de las palabras

+ +

Las palabras son muy importantes para los humanos — son una parte fundamental de nuestra comunicación. Dado que la Web es un medio en gran parte basado en texto diseñado para permitir a los humanos comunicarse y compartir información, es útil para nosotros tener control sobre las palabras que aparecen en él. {{glossary("HTML")}} proporciona estructura y significado a nuestro texto, {{glossary("CSS")}} nos permite personalizarlo con precisión, y JavaScript contiene una serie de funciones para manipular cadenas, crear mensajes personalizados de bienvenida, mostrar las etiquetas de texto adecuadas cuando sea necesario, organizar los términos en el orden deseado y mucho más.

+ +

Casi todos los programas que hemos mostrado hasta ahora en el curso han involucrado alguna manipulación de cadenas.

+ +

Cadenas — las bases

+ +

A primera vista, las cadenas se tratan de forma similar a los números, pero cuando profundizas empiezas a ver diferencias notables. Comencemos ingresando algunas líneas de texto básicas en la consola para familiarizarnos. Te proveeremos de una aquí abajo (también puedes abrir la consola en una pestaña o ventana separada, o usar la consola de desarrollo del navegador si así lo prefieres).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Creando una cadena

+ +
    +
  1. Para comenzar, ingresa las siguientes líneas: + 
    var string = 'La revolución no será televisada.';
+string;
    + Al igual que con los números, declaramos una variable, iniciandola con el valor de una cadena, y luego retornamos dicho valor. La única diferencia es que al escribir una cadena, necesitas envolverla con comillas.
    2. +
  2. Si no lo haces, u olvidas una de las comillas, obtendrás un error. Intenta ingresando las siguientes líneas: + 
    var malString = Esto es una prueba;
+var malString = 'Esto es una prueba;
+var malString = Esto es una prueba';
    + Estas líneas no funcionan porque el texto sin comillas alrededor es tomado como nombre de una variable, propiedad, palabra reservada, o algo similar. Si el navegador no las encuentra, entonces se recibe un error( ej. "missing ; before statement"). Si el navegador puede ver dónde comienza una cadena, pero no dónde termine, como se indica en la segunda oración, devuelve error (con "unterminated string literal"). Si tu programa devuelve estos errores, revisa desde el inicio que todas tus cadenas posean sus comillas.
    3. +
  3. Lo siguiente funcionará si previamente definiste la variable string — inténtalo: + 
    var maltring = string;
+malString;
    + malString ahora tiene el mismo valor que string.
    4. +
+ +

Comillas simples vs. comillas dobles

+ +
    +
  1. En JavaScript, puedes escoger entre comillas simple y dobles para envolver tus cadenas. Ambas funcionarán correctamente: + 
    var simp = 'Comillas simples.';
+var dobl = "Comillas dobles.";
+simp;
+dobl;
    +
    2. +
  2. Hay muy poca diferencia entre las dos, y la que utilices dependerá de tus preferencias personales. Sin embargo, deberías de elegir una y mantenerla; usar diferentes tipos de comillas en el código podría llegar a ser confuso, especialmente si utilizas diferentes comillas en la misma cadena. El siguiente ejemplo devolverá un error: + 
    var badQuotes = 'What on earth?";
    +
    3. +
  3. El navegador pensará que la cadena no se ha cerrado correctamente, porque el otro tipo de cita que no estás usando, puede aparecer en la cadena. Por ejemplo, en estos dos casos su uso es correcto: + 
    var sglDbl = 'Would you eat a "fish supper"?';
+var dblSgl = "I'm feeling blue.";
+sglDbl;
+dblSgl;
    +
    4. +
  4. Sin embargo, no puedes usar el mismo tipo de comillas en el interior de una cadena que ya las tiene en los extremos. Lo siguiente devuelve error, porque confunde al navegador respecto de dónde termina la cadena: + 
    var bigmouth = 'I've got no right to take my place...';
    + Lo que nos lleva directamente al siguiente tema.
    5. +
+ +

Escapando caracteres en una cadena

+ +

Para solucionar nuestro problema anterior, necesitamos "escapar" el asunto de las comillas. Escapar caracteres significa que les hacemos algo para asegurarnos que sean reconocidos como texto, y no parte del código. En JavaScript, colocamos una barra invertida justo antes del caracter. Intenta ésto:

+ +
var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;
+ +

Ahora funciona correctamente. Puedes escapar otros caracteres de la misma forma, ej. \", y hay varios códigos más. Ve a Notación de Escape para más detalles.

+ +

Concatenando cadenas

+ +
    +
  1. Concatenar es una elegante palabra de la programación que significa: "unir". Para unir cadenas en JavaScript el símbolo de más (+), el mismo operador que usamos para sumar números, pero en este contexto hace algo diferente. Vamos a probar un ejemplo en nuestra consola. + 
    var one = 'Hello, ';
+var two = 'how are you?';
+var joined = one + two;
+joined;
    + El resultado de este código es una variable llamada joined, que contiene el valor: "Hello, how are you?" ("Hola, cómo estas?").
    2. +
  2. En la última instancia del código, unimos dos strings, pero lo puedes hacer con cuantas desees, mientras que incluyas el símbolo de + entre ellas. Prueba esto: + 
    var multiple = one + one + one + one + two;
+multiple;
    +
    3. +
  3. También puedes usar una combinación de variables y strings reales. Prueba esto: + 
    var response = one + 'I am fine — ' + two;
+response;
    +
    4. +
+ +
+

Nota: Cuando ingresas una string real en tu código, entre comillas simples o dobles, se llama string literal.

+
+ +

La concatenación en contexto

+ +

Vamos a revisar la concatenación que usamos en la siguiente acción — veamos este ejemplo ya citado previamente en el curso:

+ +
<button>Press me</button>
+ +
var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}
+ +

{{ EmbedLiveSample('Concatenation_in_context', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

Aquí estamos usando una función {{domxref("Window.prompt()", "Window.prompt()")}} en la línea 4, que le pide al usuario la respuesta a una pregunta, através de un cuadro emergente (también llamado popup) y luego, almacenará el dato dentro de una variable dada — en este caso llamada name (nombre). Luego, en la línea 5, usamos una función {{domxref("Window.alert()", "Window.alert()")}} para mostrar otra ventana emergente que contiene una cadena que hemos unido de la concatenación de dos string literales y la variable name (nombre). 

+ +

Números versus cadenas

+ +
    +
  1. Entonces, ¿qué sucede cuando intentamos agregar (o concatenar) un string y un número? Vamos a probar en la consola: + 
    'Front ' + 242;
+
    + Podrías esperar que diera un error, pero funciona a la perfección. Tratar de representar un string como un número no tiene sentido, pero representar un número como string si que lo tiene, así que el navegador convierte el número en una string y las muestra juntas. 
    2. +
  2. Incluso puedes hacer esto con dos números — puedes forar un número para que se convierta en una string envolviéndolo entre comillas. Prueba lo siguiente (estamos utilizando el operador typeof para verificar si la variable es un número o una cadena): + 
    var myDate = '19' + '67';
+typeof myDate;
    +
    3. +
  3. Si tienes una variable numérica, que deseas convertir en una string, pero no cambiar de otra forma, o una variable string, que deseas convertir a número, pero no cambiarla de otra forma, puedes usar las siguientes construcciones: +
      +
    • El objecto {{jsxref("Number")}} convertirá cualquier cosa que se le pase en un número, si puede. Intenta lo siguiente: + 
      var myString = '123';
+var myNum = Number(myString);
+typeof myNum;
      +
      • +
    • Por otra parte, cada número tiene un método llamado  toString() que convertirá el equivalente en una string. Prueba esto: + 
      var myNum = 123;
+var myString = myNum.toString();
+typeof myString;
      +
      • +
    + Estas construcciones pueden ser muy útiles en ciertas situaciones. Por ejemplo, si un usuario introduce un número en un campo de texto de un formulario, será un string. Sin embargo, si quieres añadir ese número a algo, lo necesitas convertir a número, así que puedes usar esta construcción para hacerlo. Hicimos exactamente esto en el ejercicio de ejemplo: Juego adivina el número en la línea 54 (Juego Adivina el número, en la línea 54).
    4. +
+ +

Prueba tus habilidades

+ +

Llegaste al final de este artículo, pero ¿puédes recordar la información más importante? Puedes encontrar algunas pruebas para verificar que has comprendido esta información antes de seguir avanzando — Ve Prueba tus habilidades: Strings. Ten en cuenta que esto requiere conocimiento del próximo artículo, por lo que podrías leerlo antes.

+ +

Conclusión

+ +

Esto es lo básico que debes saber sobre las cadenas o strings en JavaScript. En el siguiente artículo desarrollaremos más sobre esto, observando métodos de construcción de strings disponibles en JavaScript y cómo podemos usarlos para manipular nuestras cadenas de la forma que queremos. 

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html new file mode 100644 index 0000000000..e02f502bce --- /dev/null +++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__math/index.html @@ -0,0 +1,91 @@ +--- +title: 'Comprueba tus habilidades: Matematicas.' +slug: 'Learn/JavaScript/First_steps/Test_your_skills:_Math' +tags: + - JavaScript + - Matemática + - Principiante + - Prueba tus habilidades + - aprende +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_Math' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es conocer si has entendido nuestra clase sobre el articulo Matematica basica en JavaScript — números y operadores.

+ +
+

Nota: Puedes probar soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.

+ +

Si se queda atascado, pídanos ayuda; consulte la sección {{anch ("Evaluación o ayuda adicional")}} en la parte inferior de esta página.

+ +

Nota: En los ejemplos a continuación, si hay un error en su código, se mostrará en el panel de resultados de la página, para ayudarlo a tratar de averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).

+
+ +

Math 1

+ +

Iniciemos poniendo a prueba sus conocimientos acerca de los operadores matemáticos básicos. Usted tendrá que crear 4 valores númericos, unir los 2 primeros, hacer una resta del cuarto con el tercero y multiplicar los resultados secundarios juntos para obtener un resultado final de 48. Y finalmente, necesita ejecutar una prueba para comprobar si el resultado es un numero par.

+ +

Asi que intente realizar la actualización del código descrito abajo para crear el ejemplo terminado, siguendo estos pasos:

+ +
    +
  1. Crea cuatro variables que contengan numeros. Llama a las variables razonablemente.
    2. +
  2. Agrega las dos primeras variables juntas y guarda el resultado en otra variable.
    3. +
  3. Subtract the fourth variable from the third and store the result in another variable.
    4. +
  4. Multiply the results from the last two steps together, storing the result in a variable called finalResult. The product should be 48. If it isn't, you'll have to adjust some of the initial input values.
    5. +
  5. Finally, write a calculation that checks whether finalResult is an even number. Store the result in a variable called evenOddResult.
    6. +
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math1.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Math 2

+ +

In the second task you are already provided with two calculations, with the results stored in the variables result and result2. But these results aren't what we want; you'll need to take the calculations and change them to give us what we want.

+ +

What do we want? After multiplying the two results together and formatting the result to 2 decimal places, the final result should be 10.42.

+ +

Try updating the live code below to recreate the finished example, following these steps:

+ +
    +
  1. Write a calculation that multiples result and result2 together and assigns the result back to result. This will require assignment shorthand.
    2. +
  2. Write a line of code that takes result and formats it to 2 decimal places, storing the result of this in a variable called finalResult.
    3. +
  3. Check the data type of finalResult using typeof; you'll probably see that it is actually of string type! Write a line of code that converts it to a number type, storing the result in a variable called finalNumber.
    4. +
  4. The value of finalNumber needs to be 10.42. Go back and update the original calculations you were provided with so that they give this final result. Don't update the numbers or the operators.
    5. +
+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math2.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Math 3

+ +

In the final task for this article, we want you to write some tests. You've got three groups, each consisting of a statement and two variables. For each one, write a test that proves or disproves the statement made. Store the results of those tests in variables called weightComparison, heightComparison, and pwdMatch, respectively.

+ +

{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/math/math3.html", '100%', 400)}}

+ +
+

Download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Assessment or further help

+ +

You can practice these examples in the Interactive Editors above.

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Math 1 skill test".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
diff --git a/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html b/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html new file mode 100644 index 0000000000..c242ff5ccc --- /dev/null +++ b/files/es/learn/javascript/first_steps/test_your_skills_colon__variables/index.html @@ -0,0 +1,84 @@ +--- +title: '¡Pon a prueba tus habilidades!: Variables' +slug: 'Learn/JavaScript/First_steps/Test_your_skills:_variables' +tags: + - JavaScript + - Principiante + - Tus habilidades con texto + - Variables + - aprende +translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables' +--- +
{{learnsidebar}}
+ +

El objetivo de esta prueba de habilidad es evaluar si has entendido nuestro artículo Almacenando la información que necesitas — Variables.

+ +
+

Nota: Puedes probar las soluciones en los editores interactivos a continuación, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como CodePen, jsFiddle, o Glitch para trabajar en las tareas.
+
+ Si te atascas, pídenos ayuda; consulta la sección {{anch('Evaluación o ayuda adicional')}} en la parte inferior de esta página.

+
+ +
+

Nota: En los siguientes ejemplos, si hay un error en tu código, se mostrará en el panel de resultados de la página, para ayudarte a intentar averiguar la respuesta (o en la consola JavaScript del navegador, en el caso de la versión descargable).

+
+ +

Variables 1

+ +

En esta tarea queremos que:

+ + + +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html', '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Variables 2

+ +

En esta tarea, debes agregar una nueva línea para corregir el valor almacenado en la variable myName existente a tu propio nombre.

+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html', '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Variables 3

+ +

La tarea final por ahora — en este caso, se te proporciona un código existente, que tiene dos errores presentes. El panel de resultados debería mostrar el nombre Chris y una declaración sobre la edad que tendrá Chris dentro de 20 años. ¿Cómo puedes solucionar el problema y corregir la salida?

+ +

Intenta actualizar el código en vivo a continuación para recrear el ejemplo terminado:

+ +

{{EmbedGHLiveSample('learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html', '100%', 400)}}

+ +
+

Descarga el punto de partida de esta tarea para trabajar en tu propio editor o en un editor en línea.

+
+ +

Evaluación o ayuda adicional

+ +

Puedes practicar estos ejemplos en los editores interactivos anteriores.

+ +

Si deseas que se evalúe tu trabajo o estás atascado y deseas pedir ayuda:

+ +
    +
  1. Coloca tu trabajo en un editor que se pueda compartir en línea, como CodePen, jsFiddle o Glitch. Puedes escribir el código tú mismo o utilizar los archivos de punto de partida vinculados en las secciones anteriores.
    2. +
  2. Escribe una publicación solicitando evaluación y/o ayuda en la categoría de aprendizaje del foro de discusión de MDN. Tu publicación debe incluir: +
      +
    • Un título descriptivo como Evaluación deseada para la prueba de habilidad de Variables 1.
      • +
    • Detalles de lo que ya has probado y lo que te gustaría que hiciéramos, p. ej. si estás atascado y necesitas ayuda, o quieres una evaluación.
      • +
    • Un enlace al ejemplo que deseas evaluar o con el que necesitas ayuda, en un editor que se pueda compartir en línea (como se mencionó en el paso 1 anterior). Esta es una buena práctica para empezar — es muy difícil ayudar a alguien con un problema de codificación si no puedes ver su código.
      • +
    • Un enlace a la página de la tarea o evaluación real, para que podamos encontrar la pregunta con la que deseas ayuda.
      • +
    +
    3. +
diff --git a/files/es/learn/javascript/first_steps/useful_string_methods/index.html b/files/es/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..09c6cfea08 --- /dev/null +++ b/files/es/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,718 @@ +--- +title: Métodos útiles con cadenas +slug: Learn/JavaScript/First_steps/Useful_string_methods +tags: + - Artículo + - Cadenas + - JavaScript + - Métodos + - Principiante +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

Ahora que hemos analizado los conceptos básicos de las cadenas, aumentemos la velocidad y comencemos a pensar qué operaciones útiles podemos hacer en cadenas con métodos integados, como encontrar la longitud de una cadena de texto, unir y dividir cadenas, sustituyendo un caracter de una cadena por otro, y más.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de informática, una comprensión básica de HTML y CSS, una comprensión de lo que es JavaScript.
Objectivo:Comprender que las cadenas son objetos y aprender a usar algunos de los métodos básicos disponibles en esos objetos para manipular cadenas.
+ +

Cadenas como objetos

+ +

Ya lo dijimos antes, y lo diremos de nuevo — todo es un objeto en JavaScript. Cuando creas una cadena, por ejemplo, usando:

+ +
let string = 'This is my string';
+ +

Tu variable se convierte en una instancia del objeto cadena y, como resultado, tiene una gran cantidad de propiedades y métodos disponibles. Puedes ver esto si vas a la página de objeto {{jsxref("String")}} y miras la lista al costado de la página.

+ +

Ahora, antes de que tu cerebro comience a derretirse, ¡no te preocupes! Realmente no necesitas saber acerca de la mayoría de estos principios en tu viaje de aprendizaje. Pero hay algunos que posiblemente utilizarás con bastante frecuencia así como veremos aquí. 

+ +

Ingresemos algunos ejemplos en una nueva consola. A continuación, proporcionamos uno (también puedes abrir esta consola en una ventana o pestaña por separado, o si prefieres usar la consola de desarrolladores del navegador).

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

Encontrar la longitud de un cadena

+ +

Esto es fácil — simplemente usa la propiedad {{jsxref("String.prototype.length", "length")}} . Intenta ingresar las siguientes líneas:

+ +
let browserType = 'mozilla';
+browserType.length;
+ +

Esto debería devolver el número 7, porque "mozilla" tiene 7 caracteres. Esto es útil por muchas razones; por ejemplo, es posible que quieras buscar las longitudes de una serie de nombres para que puedas mostrarlos en orden de su longitud, o dejar que un usuario  sepa que un nombre ingresado en un campo de formulario es demasiado largo o si tiene una longitud determinada.

+ +

Extrayendo un específico caracter de la cadena

+ +

En una nota relacionada, puedes devolver cualquier carácter de una cadena usando la notación de corchetes — esto significa que incluyes corchetes ([]) al final del nombre de tu variable. Dentro de los corchetes, incluye el número del caracter que deseas extraer, así que, por ejemplo, para extraer la primera letra harías esto:

+ +
browserType[0];
+ +

¡ Las computadoras cuentan desde 0, no desde 1! Para extraer el último caracter de cualquier cadena, podríamos usar la siguiente línea, combinando esta técnica con la propiedad length que vimos arriba:

+ +
browserType[browserType.length-1];
+ +

El largo de "mozilla" es 7, pero es porque el contador comienza en 0, la posición del caracter es 6, por lo tanto, necesitamos length-1. Puedes usar esto para, por ejemplo, encontrar la primera letra de una serie de cadenas y ordenarlas alfabéticamente.

+ +

Encontrar una subcadena dentro de una cadena y extraerla

+ +
    +
  1. Algunas veces querrás encontrar si hay una cadena más pequeña dentro de una más grande (generalmente decimos si una subcadena está presente dentro de una cadena). Esto se puede hacer utilizando el método {{jsxref("String.prototype.indexOf()", "indexOf()")}}, que toma un único parámetro — la subcadena que deseas buscar. Intenta esto: + + 
    browserType.indexOf('zilla');
    + Esto nos dá un resultado de 2, porque la subcadena "zilla" comienza en la posición 2 (0, 1, 2  — por tanto 3 caracteres en total) dentro de "mozilla". Tal código podría usarse para filtrar cadena. Por ejemplo, podemos tener una lista de direcciones web y solo queremos imprimir las que contienen "mozilla".
    2. +
+ +
    +
  1. Esto se puede hacer de otra manera, que posiblemente sea aún más efectiva. Intenta lo siguiente: + 
    browserType.indexOf('vanilla');
    + Esto debería darte un resultado de -1 — Esto se devuelve cuando la subcadena, en este caso 'vanilla', no es encontrada en la cadena principal.
    +
    + Puedes usar esto para encontrar todas las instancias de las cadenas que no contengan la subcadena 'mozilla', o hacerlo, si usas el operador de negación, como se muestra a continuación. Podrías hacer algo como esto: + + 
    if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string
+}
    +
    2. +
  2. Cuando sabes donde comienza una subcadena dentro de una cadena, y sabes hasta cuál caracter deseas que termine, puede usarse {{jsxref("String.prototype.slice()", "slice()")}} para extraerla. Prueba lo siguiente: + 
    browserType.slice(0,3);
    + Esto devuelve "moz" — El primer parámetro es la posición del caracter en la que comenzar a extraer, y el segundo parámetro es la posición del caracter posterior al último a ser extraído. Por lo tanto, el corte ocurre desde la primera posición en adelante, pero excluyendo la última posición. En este ejemplo, dado que el índice inicial es 0, el segundo parámetro es igual a la longitud de la cadena que se devuelve.
    +  
    3. +
  3. Además, si sabes que deseas extraer todos los caracteres restantes de una cadena después de cierto caracter, ¡no necesitas incluir el segundo parámetro! En cambio, solo necesitas incluir la posición del caracter desde donde deseas extraer los caracteres restante en la cadena. Prueba lo siguiente: + 
    browserType.slice(2);
    + Esto devuelve "zilla" — debido a que la posición del caracter de 2 es la letra z, y como no incluiste un segundo parámetro, la subcadena que que se devolvío fué el resto de los caracteres de la cadena. 
    4. +
+ +
+

Nota: El segundo parámetro de slice() es opcional: si no lo incluyes, el corte termina al final de la cadena original. Hay otras opciones también; estudia la página {{jsxref("String.prototype.slice()", "slice()")}} para ver que mas puedes averiguar.

+
+ +

Cambiando todo a mayúscula o minúscula

+ +

Los métodos de cadena {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} y {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} toman una cadena y convierten todos sus caracteres a mayúscula o minúscula, respectivamente. Esto puede ser útil, por ejemplo, si deseas normalizar todos los datos ingresados por el usuario antes de almacenarlos en una base de datos.

+ +

Intentemos ingresar las siguentes líneas para ver que sucede:

+ +
let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();
+ +

Actualizando partes de una cadena

+ +

En una cadena puedes reemplazar una subcadena por otra usando el método {{jsxref("String.prototype.replace()", "replace()")}}. Esto funciona de manera muy simple a un nivel básico, aunque hay algunas cosas avanzadas que puedes hacer con él en lo que todavía no entraremos.

+ +

Toma dos parámetros — la cadena que deseas reemplazar, y la cadena con la que deseas reemplazarla. Prueba este ejemplo:

+ +
browserType.replace('moz','van');
+ +

Ten en cuenta que para obtener realmente el valor actualizado reflejado en la variable browserType en un programa real, debes establecer que el valor de la variable sea el resultado de la operación; No solo actualiza el valor de la subcadena automáticamente. Así que tendrías que escribir esto: browserType = browserType.replace('moz','van');

+ +

Ejemplos de aprendizaje activo

+ +

En esta sección, conseguiremos que intentes escribir algún código de manipulación de cadenas. En cada ejercicio a continuación, tenemos una matríz de cadenas y un bucle que procesa cada valor en la matríz y lo muestra en una lista con viñetas. No es necesario que comprendas matrices y bucles en este mismo momento — estos se explicarán en futuros artículos. Todo lo que necesitas hacer en cada caso es escribir el código que dará de salida a las cadenas en el formato que las queremos.

+ +

Cada ejemplo viene con un botón de "Reset" , Que puedes utilizar para reestablecer el código si cometes un error y no puedes hacerlo funcionar nuevamente, y un botón "Show solution" que puedes presionar para ver una posible respuesta si te encuentras realmente atorado.

+ +

Filtrado de mensajes de saludo

+ +

En el primer ejercicio, comenzamos de manera simple — tenemos una matríz de mensajes de tarjetas de felicitación, pero queremos ordenarlos para que aparezcan solo los mensajes de Navidad. Queremos que completes un test condicional dentro de la estructura if( ... ), para comprobar cada cadena y solo imprimirla en la lista si es un mensaje de Navidad.

+ +
    +
  1. Primero piensa en cómo puedes probar si el mensaje en cada caso es un mensaje de Navidad. ¿Qué cadena está presente en todos esos mensajes, y qué método podrías usar para comprobar si está presente?
    2. +
  2. A continuación, deberá escribir un test condicional de la forma operand1 operator operand2. ¿Es lo que está a la izquierda igual a lo que está a la derecha? O en este caso, ¿el método llamado a la izquierda devuelve el resultado a la derecha?
    3. +
  3. Sugerencia: En este caso, probablemente sea más útil comprobar si la llamada al método no es igual a un determinado resultado.
    4. +
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}

+ +

Corrección de mayúscula

+ +

En este ejercicio tenemos los nombres de las ciudades del Reino Unido, Pero las mayúsculas estan completamente desordenadas. Queremos que los cambies para que estén en minúscula, a excepción de la primera letra. Una buena manera de hacerlo es:

+ +
    +
  1. Convierte la totalidad de la cadena contenida en la variable input a minúsculas y guárdalas en una nueva variable.
    2. +
  2. Toma la primera letra de la cadena en esta nueva variable y guárdala en otra variable.
    3. +
  3. Usando esta última variable como una subcadena, reemplaza la primera letra de la cadena en minúscula con la subcadena en mayúscula. Almacena el resultado de este procedimiento de reemplazo en otra nueva variable.
    4. +
  4. Cambia el valor de la variable result a igual al resultado final. en vez de input.
    5. +
+ +
+

Nota: Una pista — los parámetros de los métodos de cadena no tienen que ser literales de cadenas; también pueden ser variables, o incluso variables con un método invocados en ellas.

+
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}

+ +

Creando nuevas cadenas de partes viejas

+ +

En este último ejercicio, la matríz contiene un conjunto de cadenas que contienen información sobre estaciones de tren en el Norte de Inglaterra. Las cadenas son elementos de datos que contienen el código de estación de tres letras, seguidos de más datos legibles por máquina, seguidos de un punto y coma, seguidos por el nombre de la estación legible por humanos. Por ejemplo:

+ +
MAN675847583748sjt567654;Manchester Piccadilly
+ +

Queremos extraer el código y el nombre de la estación, y juntarlos en una cadena con la siguiente estructura:

+ +
MAN: Manchester Piccadilly
+ +

Recomendamos hacerlo así:

+ +
    +
  1. Extrae las tres letras del código de estación y almacénalo en una nueva variable.
    2. +
  2. Encuentra el número de índice de caracter del punto y coma.
    3. +
  3. Extrae el nombre de la estación legible por humanos utilizando el número de índice de caracter del punto y coma a modo de referencia y guardalo en una nueva variable.
    4. +
  4. Concatenar las dos nuevas variables y un literal de cadena para hacer la cadena final.
    5. +
  5. Cambia el valor de la variable de result a igual a la cadena final, no a  input.
    6. +
+ + + +

{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}

+ +

Conclusión

+ +

No puedes negar el hecho de que ser capaz de manejar palablas y oraciones en la programación es muy importante — especialmente en JavaScript, ya que los sitios web tratan sobre la comunicación con las personas. Este artículo te ha proporcionado los conceptos básicos que necesitas saber sobre la manipulación de cadenas por ahora. Esto debería servirte bien a medida que abordas temas más complejos en el futuro. A continuación, vamos a ver el último tipo importante de datos en el que necesitamos enfocarnos en el corto plazo — matrices.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/variables/index.html b/files/es/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..728ad187aa --- /dev/null +++ b/files/es/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,340 @@ +--- +title: Almacenando la información que necesitas - Variables +slug: Learn/JavaScript/First_steps/Variables +tags: + - Arreglos + - Booleanos + - Booleans + - JavaScript + - Numeros + - Objetos + - Variables + - cadenas de texto + - 'l10n:priority' + - strings +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+ +

Después de leer los últimos artículos, deberías saber qué es JavaScript, qué puede hacer por ti, cómo usarlo junto con otras tecnologías web y cómo se ven sus características principales desde un alto nivel. En este artículo, llegaremos a los conceptos básicos reales, y veremos cómo trabajar con los bloques de construcción más básicos de JavaScript — Variables.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.
Objetivo:Familiarizarte con los conceptos básicos de las variables de JavaScript.
+ +

Herramientas que necesitas

+ +

A lo largo de este artículo, se te pedirá que escribas líneas de código para probar tu comprensión del contenido. Si estás utilizando un navegador de escritorio, el mejor lugar para escribir tu código de ejemplo es la consola JavaScript de tu navegador (consulta ¿Qué son las herramientas para el desarrollador del navegador? para obtener más información sobre cómo acceder a esta herramienta).

+ +

¿Qué es una variable?

+ +

Una variable es un contenedor para un valor, como un número que podríamos usar en una suma, o una cadena que podríamos usar como parte de una oración. Pero una cosa especial acerca de las variables es que los valores que contienen pueden cambiar. Veamos un sencillo ejemplo:

+ +
<button>Presióname</button>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('¿Cuál es tu nombre?');
+  alert('¡Hola ' + name + ', encantado de verte!');
+}
+ +

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

En este ejemplo, al presionar el botón se ejecutan un par de líneas de código. La primera línea muestra un cuadro en la pantalla que pide al lector que ingrese su nombre y luego almacena el valor en una variable. La segunda línea muestra un mensaje de bienvenida que incluye su nombre, tomado del valor de la variable.

+ +

Para entender por qué esto es tan útil, pensemos en cómo escribiríamos este ejemplo sin usar una variable. Terminaría luciendo algo como esto:

+ +
let name = prompt('¿Cuál es tu nombre?');
+
+if (name === 'Adam') {
+  alert('¡Hola Adam, encantado de verte!');
+} else if (name === 'Alan') {
+  alert('¡Hola Alan, encantado de verte!');
+} else if (name === 'Bella') {
+  alert('¡Hola Bella, encantado de verte!');
+} else if (name === 'Bianca') {
+  alert('¡Hola Bianca, encantado de verte!');
+} else if (name === 'Chris') {
+  alert('¡Hola Chris, encantado de verte!');
+}
+
+// ... y así sucesivamente ...
+ +

Es posible que (¡todavía!) no comprendas completamente la sintaxis que estamos usando, Pero deberías poder hacerte una idea — si no tuviéramos variables disponibles, tendríamos que implementar un bloque de código gigante que verificara cuál era el nombre ingresado, y luego muestra el mensaje apropiado para cualquier nombre. Obviamente, esto realmente es ineficiente (el código es mucho más grande, incluso para solo cinco opciones), y simplemente no funcionaría — no podrías almacenar todas las opciones posibles.

+ +

Las variables simplemente tienen sentido y, a medida que aprendas más sobre JavaScript, comenzarán a convertirse en una segunda naturaleza.

+ +

Otra cosa especial acerca de las variables es que pueden contener casi cualquier cosa, no solo cadenas y números. Las variables también pueden contener datos complejos e incluso funciones completas para hacer cosas asombrosas. Aprenderás más sobre esto a medida que avances.

+ +
+

Nota: Decimos que las variables contienen valores. Ésta es una importante distinción que debemos reconocer. Las variables no son los valores en sí mismos; son contenedores de valores. Puedes pensar en ellas como pequeñas cajas de cartón en las que puedes guardar cosas.

+
+ +

+ +

Declarar una variable

+ +

Para usar una variable, primero debes crearla — precisamente, a esto lo llamamos declarar la variable. Para hacerlo, escribimos la palabra clave var o let seguida del nombre con el que deseas llamar a tu variable:

+ +
let myName;
+let myAge;
+ +

Aquí estamos creando dos variables llamadas myName y myAge. Intenta escribir estas líneas en la consola de tu navegador web. Después de eso, intenta crear una variable (o dos) eligiendo tú su nombre.

+ +
+

Nota: En JavaScript, todas las instrucciones en el código deben terminar con un punto y coma (;) — tu código puede funcionar correctamente para líneas individuales, pero probablemente no lo hará cuando estés escribiendo varias líneas de código juntas. Trata de adquirir el hábito de incluirlo.

+
+ +

Puedes probar si estos valores existen ahora en el entorno de ejecución escribiendo solo el nombre de la variable, p. ej.

+ +
myName;
+myAge;
+ +

Actualmente no tienen ningún valor; son contenedores vacíos. Cuando ingreses los nombres de las variables, deberías obtener devuelto un valor undefined. Si no existen, recibirás un mensaje de error; intenta escribir

+ +
scoobyDoo;
+ +
+

Nota: No confundas una variable que existe pero no tiene un valor definido, con una variable que no existe en absoluto — son cosas muy diferentes. En la analogía de cajas que viste arriba, no existir significaría que no hay una caja (variable) para guardar un valor. Ningún valor definido significaría que HAY una caja, pero no tiene ningún valor dentro de ella.

+
+ +

Iniciar una variable

+ +

Una vez que hayas declarado una variable, la puedes iniciar con un valor. Para ello, escribe el nombre de la variable, seguido de un signo igual (=), seguido del valor que deseas darle. Por ejemplo:

+ +
myName = 'Chris';
+myAge = 37;
+ +

Intenta volver a la consola ahora y escribe estas líneas. Deberías ver el valor que le has asignado a la variable devuelto en la consola para confirmarlo, en cada caso. Nuevamente, puedes devolver los valores de tus variables simplemente escribiendo su nombre en la consola; inténtalo nuevamente:

+ +
myName;
+myAge;
+ +

Puedes declarar e iniciar una variable al mismo tiempo, así:

+ +
let myDog = 'Rover';
+ +

Esto probablemente es lo que harás la mayor parte del tiempo, ya que es más rápido que realizar las dos acciones en dos líneas separadas.

+ +

Diferencia entre var y let

+ +

En este punto, puedes estar pensando "¿por qué necesitamos dos palabras clave para definir variables? ¿Por qué var y let?".

+ +

Las razones son algo históricas. Cuando se creó JavaScript por primera vez, solo existía var. Esto básicamente funciona bien en la mayoría de los casos, pero tiene algunos problemas en la forma en que trabaja — su diseño a veces puede ser confuso o francamente molesto. Entonces, se creó let en versiones modernas de JavaScript, una nueva palabra clave para crear variables que funciona de manera algo diferente a var, solucionando sus problemas en el proceso.

+ +

A continuación se explican un par de diferencias simples. No abordaremos todas las diferencias ahora, pero comenzarás a descubrirlas a medida que aprendas más sobre JavaScript (si realmente deseas leer sobre ellas ahora, no dudes en consultar {{jsxref("Sentencias/let", "let")}} en nuestra página de referencia.

+ +

Para empezar, si escribes un programa JavaScript de varias líneas que declara e inicia una variable, puedes declarar una variable con var después de iniciarla y seguirá funcionando. Por ejemplo:

+ +
myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;
+ +
+

Nota: Esto no funcionará al escribir líneas individuales en una consola de JavaScript, solo cuando se ejecutan varias líneas de JavaScript en un documento web.

+
+ +

Esto funciona debido a la elevación — lee {{jsxref("Sentencias/var", "Elevación de variables", "#Elevación_de_variables")}} para obtener más detalles sobre el tema.

+ +

La elevación (hoisting) ya no funciona con let. Si cambiamos var a let en el ejemplo anterior, fallaría con un error. Esto es bueno — declarar una variable después de iniciarla resulta en un código confuso y más difícil de entender.

+ +

En segundo lugar, cuando usas var, puedes declarar la misma variable tantas veces como desees, pero con let no puedes. Lo siguiente funcionaría:

+ +
var myName = 'Chris';
+var myName = 'Bob';
+ +

Pero lo siguiente arrojaría un error en la segunda línea:

+ +
let myName = 'Chris';
+let myName = 'Bob';
+ +

Tendrías que hacer esto en su lugar:

+ +
let myName = 'Chris';
+myName = 'Bob';
+ +

Nuevamente, esta es una sensata decisión del lenguaje. No hay razón para volver a declarar las variables — solo hace que las cosas sean más confusas.

+ +

Por estas y otras razones, se recomienda utilizar let tanto como sea posible en tu código, en lugar de var. No hay ninguna razón para usar var, a menos que necesites admitir versiones antiguas de Internet Explorer con tu código (no es compatible con let hasta la versión 11; Edge el moderno navegador de Windows admite let perfectamente).

+ +

Actualizar una variable

+ +

Una vez que una variable se ha iniciado con un valor, puedes cambiar (o actualizar) ese valor simplemente dándole un valor diferente. Intenta ingresar las siguientes líneas en tu consola:

+ +
myName = 'Bob';
+myAge = 40;
+ +

Un consejo sobre las reglas de nomenclatura de variables

+ +

Puedes llamar a una variable prácticamente como quieras, pero existen limitaciones. En general, debes limitarte a usar caracteres latinos (0-9, a-z, A-Z) y el caracter de subrayado.

+ + + +
+

Nota: Puedes encontrar una lista bastante completa de palabras clave reservadas que debes evitar en {{jsxref("Gramática_léxica", "Gramática léxica — Palabras clave", "#Palabras_clave")}}.

+
+ +

Ejemplos de buenos nombres:

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Ejemplos de nombres incorrectos:

+ +
1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Ahora, intenta crear algunas variables más, con la guía anterior en mente.

+ +

Tipo de las variables

+ +

Hay algunos tipos de datos diferentes que podemos almacenar en variables. En esta sección, los describiremos brevemente, luego, en artículos futuros, aprenderás más detalles.

+ +

Hasta ahora hemos analizado los dos primeros, pero hay otros.

+ +

Números

+ +

Puedes almacenar números en variables, ya sea números enteros como 30 (también llamados enteros — "integer") o números decimales como 2.456 (también llamados números flotantes o de coma flotante — "number"). No es necesario declarar el tipo de las variables en JavaScript, a diferencia de otros lenguajes de programación. Cuando le das a una variable un valor numérico, no incluye comillas:

+ +
let myAge = 17;
+ +

Cadenas de caracteres (Strings)

+ +

Las strings (cadenas) son piezas de texto. Cuando le das a una variable un valor de cadena, debes encerrarlo entre comillas simples o dobles; de lo contrario, JavaScript intenta interpretarlo como otro nombre de variable.

+ +
let dolphinGoodbye = 'Hasta luego y gracias por todos los peces';
+ +

Booleanos

+ +

Los booleanos son valores verdadero/falso — pueden tener dos valores, true o false. Estos, generalmente se utilizan para probar una condición, después de lo cual se ejecuta el código según corresponda. Así, por ejemplo, un caso simple sería:

+ +
let iAmAlive = true;
+ +

Mientras que en realidad se usaría más así:

+ +
let test = 6 < 3;
+ +

Aquí se está usando el operador "menor que" (<) para probar si 6 es menor que 3. Como era de esperar, devuelve false, ¡porque 6 no es menor que 3! Aprenderás mucho más sobre estos operadores más adelante en el curso.

+ +

Arreglos

+ +

Un arreglo es un objeto único que contiene múltiples valores encerrados entre corchetes y separados por comas. Intenta ingresar las siguientes líneas en tu consola:

+ +
let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];
+ +

Una vez que se definen estos arreglos, puedes acceder a cada valor por su ubicación dentro del arreglo. Prueba estas líneas:

+ +
myNameArray[0]; // debería devolver 'Chris'
+myNumberArray[2]; // debe devolver 40
+ +

Los corchetes especifican un valor de índice correspondiente a la posición del valor que deseas devolver. Posiblemente hayas notado que los arreglos en JavaScript tienen índice cero: el primer elemento está en el índice 0.

+ +

Aprenderás mucho más sobre los arreglos en un futuro artículo.

+ +

Objetos

+ +

En programación, un objeto es una estructura de código que modela un objeto de la vida real. Puedes tener un objeto simple que represente una caja y contenga información sobre su ancho, largo y alto, o podrías tener un objeto que represente a una persona y contenga datos sobre su nombre, estatura, peso, qué idioma habla, cómo saludarlo, y más.

+ +

Intenta ingresar la siguiente línea en tu consola:

+ +
let dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

Para recuperar la información almacenada en el objeto, puedes utilizar la siguiente sintaxis:

+ +
dog.name
+ +

Por ahora, no veremos más objetos. Puedes obtener más información sobre ellos en un futuro módulo.

+ +

Tipado dinámico

+ +

JavaScript es un "lenguaje tipado dinámicamente", lo cual significa que, a diferencia de otros lenguajes, no es necesario especificar qué tipo de datos contendrá una variable (números, cadenas, arreglos, etc.).

+ +

Por ejemplo, si declaras una variable y le das un valor entre comillas, el navegador trata a la variable como una cadena (string):

+ +
let myString = 'Hello';
+ +

Incluso si el valor contiene números, sigue siendo una cadena, así que ten cuidado:

+ +
let myNumber = '500'; // Vaya, esto sigue siendo una cadena
+typeof myNumber;
+myNumber = 500; // mucho mejor — ahora este es un número
+typeof myNumber;
+ +

Intenta ingresar las cuatro líneas anteriores en tu consola una por una y ve cuáles son los resultados. Notarás que estamos usando un operador especial llamado {{jsxref("Operadores/typeof", "typeof")}} — esto devuelve el tipo de datos de la variable que escribes después. La primera vez que se llama, debe devolver string, ya que en ese punto la variable myNumber contiene una cadena, '500'. Échale un vistazo y ve qué devuelve la segunda vez que lo llamas.

+ +

Constantes en JavaScript

+ +

Muchos lenguajes de programación tienen el concepto de una constante — un valor que, una vez declarado no se puede cambiar. Hay muchas razones por las que querrías hacer esto, desde la seguridad (si un script de un tercero cambia dichos valores, podría causar problemas) hasta la depuración y la comprensión del código (es más difícil cambiar accidentalmente valores que no se deben cambiar y estropear cosas claras).

+ +

En los primeros días de JavaScript, las constantes no existían. En JavaScript moderno, tenemos la palabra clave const, que nos permite almacenar valores que nunca se pueden cambiar:

+ +
const daysInWeek = 7;
+const hoursInDay = 24;
+ +

const funciona exactamente de la misma manera que let, excepto que a const no le puedes dar un nuevo valor. En el siguiente ejemplo, la segunda línea arrojará un error:

+ +
const daysInWeek = 7;
+daysInWeek = 8;
+ +

¡Pon a prueba tus habilidades!

+ +

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Puedes encontrar más pruebas para verificar que has retenido esta información antes de continuar — consulta Pon a prueba tus habilidades: variables.

+ +

Resumen

+ +

A estas alturas, deberías saber bastante sobre las variables de JavaScript y cómo crearlas. En el próximo artículo, nos centraremos en los números con más detalle, y veremos cómo hacer matemáticas básicas en JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/first_steps/what_went_wrong/index.html b/files/es/learn/javascript/first_steps/what_went_wrong/index.html new file mode 100644 index 0000000000..af36c20852 --- /dev/null +++ b/files/es/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,268 @@ +--- +title: ¿Qué ha salido mal? Corrigiendo JavaScript +slug: Learn/JavaScript/First_steps/What_went_wrong +tags: + - Aprender + - Artículo + - CodingScripting + - Debugging + - Depurando + - Error + - Herramientas de Desarrollador + - JavaScript + - Novato + - Principiante + - Tutorial + - console.log + - depurar + - 'l10n:priority' +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
+ +

Cuando construiste el juego "Adivina el número" en el artículo anterior, es posible que hayas descubierto que no funcionó. Tranquilo — este artículo tiene como objetivo evitar que te rasques la cabeza por este tipo de problemas brindándote algunos consejos sobre cómo encontrar y corregir errores en programas JavaScript.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.
Objetivo:Para ganar habilidad y confianza para comenzar a solucionar problemas en tu propio código.
+ +

Tipos de errores

+ +

En general, cuando haces algo mal en el código, hay dos tipos principales de errores con los que te encontrarás:

+ + + +

Bueno, tampoco es así de simple — a medida que profundices hay algunas otras diferencias. Pero las clasificaciones anteriores funcionarán en esta temprana etapa de tu carrera. Veremos ambos tipos en el futuro.

+ +

Un ejemplo erróneo

+ +

Para empezar, regresemos a nuestro juego de adivinan el número — excepto que esta vez vamos a explorar una versión que tiene algunos errores insertados deliberadamente. Ve a GitHub y haz una copia local de number-game-errors.html (puedes verlo en vivo aquí).

+ +
    +
  1. Para comenzar, abre la copia local dentro de tu editor de texto favorito y tu navegador.
    2. +
  2. Intenta jugarlo — notarás que cuando presionas el botón "Enviar respuesta", ¡no funciona!
    3. +
+ +
+

Nota: ¡Posiblemente tengas tu propia versión del ejemplo del juego que no funciona, y quizás la quieras arreglar! Aún así nos gustaría que en el artículo trabajes con nuestra versión, para que puedas aprender las técnicas que estamos enseñando. Después puedes tratar de arreglar tu ejemplo.

+
+ +

En este punto, consultemos la consola del desarrollador para ver si podemos ver algún informe de error de sintaxis y luego tratar de solucionarlo. Abajo aprenderás cómo.

+ +

Solucionar errores de sintaxis

+ +

Anteriormente en este curso, hicimos que escribieras algunos comandos JavaScript simples en la consola JavaScript de las herramientas para desarrolladores (si no recuerdas cómo abrirla en tu navegador, sigue el enlace anterior para descubrirlo). Lo más útil es que la consola te brinda mensajes de error cada vez que ocurre algún error de sintaxis dentro del JavaScript que alimenta al motor JavaScript del navegador. Ahora vayamos a cazar.

+ +
    +
  1. Ve a la pestaña dónde tienes abierto number-game-errors.html y abre tu consola JavaScript. Deberías ver un mensaje de error con las siguientes líneas:
    2. +
  2. Este es un error bastante fácil de rastrear, y el navegador le brinda varios bits de información útil para ayudarte (la captura de pantalla anterior es de Firefox, pero otros navegadores proporcionan información similar). De izquierda a derecha, tenemos: +
      +
    • Una "x" roja para indicar que se trata de un error.
      • +
    • Un mensaje de error para indicar qué salió mal: "TypeError: guessSubmit.addeventListener no es una función"
      • +
    • Un enlace a "Más información" que te lleva a una página de MDN dónde explica detalladamente qué significa este error.
      • +
    • El nombre del archivo JavaScript, que enlaza con la pestaña "Depurador" de las herramientas para desarrolladores. Si sigues este enlace, verás la línea exacta donde se resalta el error.
      • +
    • El número de línea donde está el error y el número de carácter en esa línea donde se detectó el error por primera vez. En este caso, tenemos la línea 86, carácter número 3.
      • +
    +
    3. +
  3. Si miramos la línea 86 en nuestro editor de código, encontraremos esta línea: + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. El mensaje de error dice "guessSubmit.addeventListener no es una función", lo cual significa que el intérprete de JavaScript no reconoce la función que estamos llamando. A menudo, este mensaje de error en realidad significa que hemos escrito algo mal. Si no estás seguro de la ortografía correcta de una parte de la sintaxis, a menudo es bueno buscar la función en MDN. La mejor manera de hacer esto es, en tu navegador favorito, buscar "mdn nombre-de-característica". Aquí hay un atajo para ahorrarte algo de tiempo en esta instancia: addEventListener().
    5. +
  5. Entonces, al mirar esta página, ¡el error parece ser que hemos escrito mal el nombre de la función!. Recuerda que JavaScript distingue entre mayúsculas y minúsculas, por lo que cualquier pequeña diferencia en la ortografía o en mayúsculas provocará un error. Cambiar addeventListener a addEventListener debería solucionar este problema. Hazlo ahora.
    6. +
+ +
+

Nota: Échale un vistazo a nuestra página de referencia TypeError: "x" no es una función para obtener más detalles sobre este error.

+
+ +

Errores sintácticos, segunda ronda

+ +
    +
  1. Guarda tu página y refréscala, ahora deberías ver que el error ha desaparecido.
    2. +
  2. Ahora, si intentas ingresar un número y presionas el botón "Enviar respuesta", verás... ¡otro error!
    3. +
  3. Esta vez, el error que se informa es "TypeError: lowOrHi es nulo", en la línea 78. +
    Nota: Null es un valor especial que significa "nada" o "sin valor". Por lo tanto, lowOrHi ha sido declarado e iniciado, pero no con algún valor significativo — no tiene tipo ni valor.
    + +
    Nota: Este error no apareció tan pronto como se cargó la página porque este error ocurrió dentro de una función (dentro del bloque checkGuess() {...}). Como pronto aprenderás con más detalle en nuestro artículo de funciones, el código dentro de las funciones se ejecuta en un ámbito separado que el código fuera de las funciones. En este caso, el código no se ejecutó y el error no se lanzó hasta que la función checkGuess() se ejecutó en la línea 86.
    +
    4. +
  4. Échale un vistazo a la línea 78 y verás el siguiente código: + 
    lowOrHi.textContent = '¡El número es muy grande!';
    +
    5. +
  5. Esta línea está intentando establecer la propiedad textContent de la constante lowOrHi en una cadena de texto, pero no funciona porque lowOrHi no contiene lo que es supone. Veamos por qué es así — intenta buscar otras instancias de lowOrHi en el código. La primera instancia que encontrarás en JavaScript está en la línea 48: + 
    const lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. En este punto, estamos intentando hacer que la variable contenga una referencia a un elemento en el HTML del documento. Comprobemos si el valor es null después de ejecutar esta línea. Agrega el siguiente código en la línea 49: + 
    console.log(lowOrHi);
    + +
    +

    Nota: console.log() es una función de depuración realmente útil que imprime un valor en la consola. Por lo tanto, imprimirá el valor de lowOrHi en la consola tan pronto como intentemos configurarlo en la línea 48.

    +
    +
    7. +
  7. Guarda y refresca, y ahora deberías ver el resultado de console.log() en tu consola. Efectivamente, el valor de lowOrHies null en este punto, así que definitivamente hay un problema con la línea 48.
    8. +
  8. Pensemos en cuál podría ser el problema. La línea 48 está utilizando un método document.querySelector() para obtener una referencia a un elemento seleccionándolo con un selector CSS. Buscando más adelante en nuestro archivo, podemos encontrar el párrafo en cuestión: + 
    <p class="lowOrHi"></p>
    +
    9. +
  9. Entonces necesitamos un selector de clase aquí, que comienza con un punto (.), pero el selector que se pasa al método querySelector() en la línea 48 no tiene punto. ¡Este podría ser el problema! Intenta cambiar lowOrHi a .lowOrHi en la línea 48.
    10. +
  10. Ahora guarda y refresca nuevamente, y tu declaración console.log() debería devolver el elemento <p> que queremos. ¡Uf! ¡Otro error solucionado! Ahora puedes eliminar tu línea console.log(), o mantenerla como referencia más adelante — tu elección.
    11. +
+ +
+

Nota: Consulta nuestra página de referencia TypeError: "x" (no) es "y" para obtener más detalles sobre este error.

+
+ +

Errores sintácticos, tercera ronda

+ +
    +
  1. Ahora, si intentas jugar de nuevo, deberías tener más éxito — el juego debería funcionar absolutamente bien, hasta que termines el juego, ya sea adivinando el número correcto o porque agotaste los intentos.
    2. +
  2. En ese momento, el juego vuelve a fallar y lanza el mismo error que obtuvimos al principio: "TypeError: resetButton.addeventListener no es una función". Sin embargo, esta vez aparece como procedente de la línea 94.
    3. +
  3. Mirando la línea número 94, es fácil ver que hemos cometido el mismo error aquí. Nuevamente, solo necesitamos cambiar addeventListener a .addEventListener. Hazlo ahora.
    4. +
+ +

Un error de lógica

+ +

En este punto, el juego debería trabajar bien, sin embargo, después de jugar varias veces, sin duda notarás que el número "aleatorio" que debes adivinar siempre es 1. ¡Definitivamente no es exactamente como queremos que se desarrolle el juego!

+ +

Obviamente hay un problema en la lógica del juego en alguna parte — el juego no devuelve un error; simplemente no está jugando bien.

+ +
    +
  1. Busca la variable randomNumber y las líneas donde se establece primero el número aleatorio. La instancia que almacena el número aleatorio que queremos adivinar al comienzo del juego debe estar alrededor de la línea número 44: + + 
    let randomNumber = Math.floor(Math.random()) + 1;
    + Y la que genera el número aleatorio antes de cada juego subsiguiente está alrededor de la línea 113:
    2. +
  2. + 
    randomNumber = Math.floor(Math.random()) + 1;
    +
    3. +
  3. Para comprobar si estas líneas son realmente el problema, volvamos a echar mano de nuestra amiga console.log() — inserta la siguiente línea directamente debajo de cada una de las dos líneas anteriores: + 
    console.log(randomNumber);
    +
    4. +
  4. Guarda y refresca, luego juega un par de veces — verás que randomNumber es igual a 1 en cada punto en el que se registra en la consola.
    5. +
+ +

Desentrañando la lógica

+ +

Para solucionar esto, consideremos cómo está funcionando esta línea. Primero, invocamos a Math.random(), que genera un número decimal aleatorio entre 0 y 1, p. ej. 0.5675493843.

+ +
Math.random()
+ +

A continuación, pasamos el resultado de invocar a Math.random() a Math.floor(), que redondea el número pasado al número entero más cercano. Luego agregamos 1 a ese resultado:

+ +
Math.floor(Math.random()) + 1
+ +

Redondear un número decimal aleatorio entre 0 y 1 siempre devolverá 0, por lo que agregarle 1 siempre devolverá 1. Necesitamos multiplicar el número aleatorio por 100 antes de redondearlo hacia abajo. Lo siguiente nos daría un número aleatorio entre 0 y 99:

+ +
Math.floor(Math.random()*100);
+ +

De ahí que queramos sumar 1, para darnos un número aleatorio entre 1 y 100:

+ +
Math.floor(Math.random()*100) + 1;
+ +

Intenta actualizar ambas líneas de esta manera, luego guarda y refresca — ¡el juego ahora debería trabajar como pretendemos!

+ +

Otros errores comunes

+ +

Hay otros errores comunes que encontrarás en tu código. Esta sección destaca la mayoría de ellos.

+ +

SyntaxError: falta ; antes de la declaración

+ +

Este error generalmente significa que has omitido un punto y coma al final de una de sus líneas de código, pero a veces puede ser más críptico. Por ejemplo, si cambiamos esta línea dentro de la función checkGuess():

+ +
var userGuess = Number(guessField.value);
+ +

a

+ +
var userGuess === Number(guessField.value);
+ +

Lanza este error porque cree que estás intentando hacer algo diferente. Debes asegurarte de no confundir el operador de asignación (=), que establece una variable para que sea igual a un valor — con el operador de igualdad estricta (===), que prueba si un valor es igual a otro y devuelve un resultado true/false.

+ +
+

Nota: Ve más detalles sobre este error en nuestra página de referencia SyntaxError: falta ; antes de la declaración.

+
+ +

El programa siempre dice que has ganado, independientemente de lo que hayas ingresado

+ +

Este podría ser otro síntoma de confusión entre la asignación y los operadores de igualdad estricta. Por ejemplo, si cambiamos esta línea dentro de checkGuess():

+ +
if (userGuess === randomNumber) {
+ +

a

+ +
if (userGuess = randomNumber) {
+ +

la prueba siempre devolvería true, haciendo que el programa informe que se ganó el juego. ¡Ten cuidado!

+ +

SyntaxError: falta ) después de la lista de argumentos

+ +

Este es bastante simple — generalmente significa que olvidaste colocar el paréntesis de cierre al final de una llamada a una función/método.

+ +
+

Nota: Ve más detalles sobre este error en nuestra página de referencia SyntaxError: falta ) después de la lista de argumentos.

+
+ +

SyntaxError: falta : después de la propiedad id

+ +

Este error generalmente se relaciona con un objeto JavaScript formado incorrectamente, pero en este caso logramos obtenerlo cambiando

+ +
function checkGuess() {
+ +

a

+ +
function checkGuess( {
+ +

Esto ha hecho que el navegador piense que estamos tratando de pasar el contenido de la función a la función como un argumento. ¡Cuidado con esos paréntesis!

+ +

SyntaxError: falta } después del cuerpo de la función

+ +

Esto es fácil — generalmente significa que has omitido una de tus llaves de una función o estructura condicional. Obtuvimos este error al eliminar una de las llaves de cierre cerca de la parte inferior de la función checkGuess().

+ +

SyntaxError: esperaba expresión, obtuve 'string' o SyntaxError: Cadena literal sin terminar

+ +

Estos errores generalmente significan que has omitido las comillas de apertura o cierre de un valor de cadena. En el primer error anterior, string se reemplazaría con los caracteres inesperados que encontró el navegador en lugar de una comilla al comienzo de una cadena. El segundo error significa que la cadena no se ha terminado con comillas.

+ +

Para todos estos errores, piensa en cómo abordamos los ejemplos que vimos en el tutorial. Cuando surge un error, mira el número de línea que te dan, ve a esa línea y revísala para detectar lo que está mal. Ten en cuenta que el error no necesariamente estará en esa línea, y también que el error podría no ser causado por el mismo problema que mencionamos anteriormente.

+ +
+

Nota: Obtén más detalles sobre estos errores en nuestras páginas de referencia SyntaxError: símbolo inesperado y SyntaxError: cadena literal sin terminar.

+
+ +

Resumen

+ +

Ahí lo tienes, los conceptos básicos para descubrir errores en programas sencillos de JavaScript. No siempre será tan sencillo averiguar qué está mal en tu código, pero al menos esto te ahorrará algunas horas de sueño y te permitirá progresar un poco más rápido cuando las cosas no salgan bien, especialmente en las primeras etapas de tu viaje de aprendizaje.

+ +

Ve también

+ +
+ +
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

+ +

En este modulo

+ + diff --git a/files/es/learn/javascript/howto/index.html b/files/es/learn/javascript/howto/index.html new file mode 100644 index 0000000000..b0abd6c044 --- /dev/null +++ b/files/es/learn/javascript/howto/index.html @@ -0,0 +1,317 @@ +--- +title: Resuelva problemas comunes en su código JavaScript +slug: Learn/JavaScript/Howto +tags: + - Aprendizaje + - JavaScript + - Principante +translation_of: Learn/JavaScript/Howto +--- +
{{LearnSidebar}}
+ +

+ +

Los siguientes enlaces apuntan a soluciones a problemas comunes de todos los días que deberá solucionar para que su código JavaScript se ejecute correctamente..

+ +

Errores comunes de principiante

+ +

Correcta ortografía y casing

+ + + +

Si su código no funciona y / o el navegador se queja de que algo no está definido, verifique que haya escrito todos sus nombres de variables, nombres de funciones, etc. correctamente.  

+ + + +

Algunas funciones comunes del navegador incorporado que causan problemas son:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CorrectoIncorrecto
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
+ +

Posición de punto y coma

+ +

Debes estar seguro de no colocar ningún punto y coma incorrectamente. Por ejemplo:

+ + + + + + + + + + + + +
CorrectoIncorrecto
elem.style.color = 'red';elem.style.color = 'red;'
+ +

Funciones

+ +

Hay una serie de cosas que pueden salir mal con la funciones.

+ +

Uno de los errores más comunes es declarar una función, pero no llamarla a ninguna parte, Por ejemplo:

+ +
function miFuncion() {
+  alert('Esta es mi funcion.');
+};
+ +

Este código no hará nada a menos que lo llame, por ejemplo con

+ +
miFuncion();
+ +

Alcance de la función

+ + + +

Recuerda que las funciones tienen su propio alcance — no puedes acceder a un valor de variable establecido dentro de una función desde fuera de la función, a menos que haya declarado la variable globalmente (es decir, no dentro de ninguna función), o retornar el valor fuera de la función.

+ +

Ejecución de código después de una declaración de retorno (Return)

+ + + +

Recuerde también que cuando devuelve un valor de una función, el intérprete de JavaScript sale de la función — ningún código declarado después de que se ejecute la declaración de devolución (Return).

+ +

De hecho, algunos navegadores (como Firefox) le darán un mensaje de error en la consola del desarrollador si tiene código después de una declaración de devolución. Firefox te ofrece "código inalcanzable después de la declaración de devolución".

+ +

Mas abajo podemos observar una función de saludo, posterior a retornar intentamos asignar a la variable x, el valor de la propiedad que viene en la función. Esto nunca ocurrira ya que posterior a retornar un valor se sale del contexto función. En pocas palabras jamas ocurrira la asignación.

+ +

Ejemplo de una declaración posterior a una declaración de retorno:

+ +
function saludo(nombre){
+ return "Hola, " + nombre + " que bueno que volviste";
+ var x = nombre; //Esta linea jamas se ejecutara ya que viene despues de un retorno
+}
+ +

Notación de objetos versus asignación normal

+ + + +

Cuando asigna algo normalmente en JavaScript, utiliza un solo signo igual, por ejemplo:

+ +
const miNumero= 0;
+ +

Esto no funciona en los Objetos, sin embargo, con los objetos, debe separar los nombres de los miembros de sus valores mediante dos puntos y separar cada miembro con una coma, por ejemplo:

+ +
const miObjeto= {
+  nombre: 'Felipe',
+  edad: 27
+}
+ +

Definiciones básicas

+ +
+
+ +
+ +
+ +
+
+ +

Casos de uso básico

+ +
+
+

General

+ + + +

Variables

+ + + +

Matemáticas (MATH)

+ + + +

Cadenas de texto (Strings)

+ + +
+ +
+

Matrices (Arrays)

+ + + +

Depuración de JavaScript

+ + + + + +

Para obtener más información sobre la depuración de JavaScript, consulte Manejo de problemas comunes de JavaScript ; Consulte también Otros errores comunes para obtener una descripción de los errores comunes.

+ +

Tomar decisiones en el código

+ + + +

Bucle / Iteración

+ + +
+
+ +

Casos de uso intermedio

+ +
+
+

Funciones

+ + + +

Objetos

+ + + +

JSON

+ + +
+ +
+

Eventos

+ + + +

JavaScript Orientado a Objetos

+ + + +

Web APIs

+ + + + +
+
diff --git a/files/es/learn/javascript/index.html b/files/es/learn/javascript/index.html new file mode 100644 index 0000000000..4703c68749 --- /dev/null +++ b/files/es/learn/javascript/index.html @@ -0,0 +1,80 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - JavaScript + - Novato + - Principiante + - Tema + - aterrizando + - 'l10n:priority' + - modulo + - princiante JavaScript +translation_of: Learn/JavaScript +--- +
{{LearnSidebar}}
+ +

{{Glossary("JavaScript")}} es un lenguaje de programación que te permite implementar cosas complejas en páginas web. Cada vez que una página web hace algo más que sentarse ahí y mostrar información estática para que la veas — mostrando actualizaciones de contenido oportunas, mapas interactivos, gráficos animados 2D/3D, desplazando máquinas reproductoras de video, o más, puedes apostar que probablemente JavaScript esté involucrado .

+ +
+

¿Quieres convertirte en un desarrollador web front-end?

+ +

Hemos elaborado un curso que incluye toda la información esencial que necesitas para trabajar hacia tu objetivo.

+ +

Empezar

+
+ +

Prerrequisitos

+ +

Se puede decir que JavaScript es más difícil de aprender que tecnologías relacionadas como HTML y CSS. Antes de intentar aprender JavaScript, se recomienda encarecidamente que te familiarices con al menos estas dos tecnologías primero, y quizás también con otras. Comienza trabajando con los siguientes módulos:

+ + + +

Tener experiencia previa con otros lenguajes de programación también puede ayudar.

+ +

Después de familiarizarte con los conceptos básicos de JavaScript, deberías estar en condiciones de aprender sobre temas más avanzados, por ejemplo:

+ + + +

Módulos

+ +

Este tema contiene los siguientes módulos, en un orden sugerido para trabajar con ellos.

+ +
+
Primeros pasos en JavaScript
+
En nuestro primer módulo de JavaScript, primero respondemos algunas preguntas fundamentales como "¿qué es JavaScript?", "¿Cómo se ve?" y "¿qué puede hacer?", antes de pasar a guiarte por tu primera experiencia práctica de escribir JavaScript. Después de eso, discutimos en detalle algunas características clave de JavaScript, tal como variables, cadenas, números y arreglos.
+
Bloques de construcción de JavaScript
+
En este módulo, continuamos con nuestra cobertura de todas las características fundamentales clave de JavaScript, centrando nuestra atención en los tipos de bloques de código que se encuentran comúnmente, como declaraciones condicionales, bucles, funciones y eventos. Ya has visto estas cosas en el curso, pero solo de pasada; aquí lo discutiremos todas explícitamente.
+
Introducción a los objetos JavaScript
+
En JavaScript, la mayoría de las cosas son objetos, desde las características principales de JavaScript como cadenas y arreglos hasta las APIs del navegador creadas sobre JavaScript. Incluso puedes crear tus propios objetos para encapsular funciones y variables relacionadas en paquetes eficientes. Es importante comprender la naturaleza orientada a objetos de JavaScript si deseas ir más allá con tu conocimiento del lenguaje y escribir código más eficiente, por lo tanto, te proporcionamos este módulo para ayudarte. Aquí enseñamos la teoría y la sintaxis de objetos en detalle, vemos cómo crear tus propios objetos y explicamos qué son los datos JSON y cómo trabajar con ellos.
+
JavaScript asíncrono
+
+

En este módulo, echamos un vistazo a JavaScript asíncrono, por qué es importante y cómo se puede utilizar para manejar de forma eficaz posibles operaciones de bloqueo, como la obtención de recursos desde un servidor.

+
+
APIs web de lado del cliente
+
Al escribir JavaScript de lado del cliente para sitios web o aplicaciones, no irás muy lejos antes de comenzar a usar las APIs — interfaces para manipular diferentes aspectos del navegador y el sistema operativo en el que se ejecuta el sitio, o incluso datos de otros sitios web o servicios. En este módulo, exploraremos qué son las APIs y cómo utilizar algunas de las APIs más populares que encontrarás a menudo en tu trabajo de desarrollo. 
+
+ +

Resolver problemas comunes de JavaScript

+ +

Usar JavaScript para resolver problemas comunes proporciona enlaces a secciones de contenido que explican cómo usar JavaScript para resolver problemas muy comunes al crear una página web.

+ +

Ve también

+ +
+
JavaScript en MDN
+
El principal punto de entrada para la documentación básica de JavaScript en MDN — aquí es donde encontrarás documentos de referencia extensos sobre todos los aspectos del lenguaje JavaScript y algunos tutoriales avanzados dirigidos a JavaScripters experimentados.
+
Aprende JavaScript
+
Un excelente recurso para los aspirantes a desarrolladores web — aprende JavaScript en un entorno interactivo, con lecciones breves y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas y el curso completo está disponible por un pequeño pago único.
+
Fundamentos de JavaScript en EXLskills
+
Aprende JavaScript de forma gratuita con el curso de código abierto EXLskills que presenta todo lo que necesitas para comenzar a crear aplicaciones en JavaScript.
+
Codificación de Matemáticas
+
Una excelente serie de tutoriales en video para enseñar las matemáticas que necesitas comprender para ser un programador eficaz, por Keith Peters.
+
diff --git a/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.html new file mode 100644 index 0000000000..c2aa7a9985 --- /dev/null +++ b/files/es/learn/javascript/objects/adding_bouncing_balls_features/index.html @@ -0,0 +1,205 @@ +--- +title: Añadiendo características a nuestra demo de bouncing balls +slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features +tags: + - Aprender + - Evaluación + - JavaScript + - Objetos + - Orientado a objetos + - Principiante +translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
+ +

En esta evaluación, se espera que use la demo de bouncing balls del artículo anterior como punto de partida y le agregue algunas características nuevas e interesantes.

+ + + + + + + + + + + + +
Prerrequisitos:Antes de intentar esta evaluación, debería haber revisado todos los artículos de este módulo.
Objetivo:Para probar la comprensión de objetos JavaScript y construcciones orientadas a objetos.
+ +

Punto de partida

+ +

Para iniciar esta evaluación, haz una copia local de  index-finished.html, style.css, y main-finished.js de nuestro último artículo en un nuevo directorio en tu ordenador.

+ +
+

Nota: Alternativamente, puede usar un sitio como JSBin o Thimble para hacer su evaluación. Puede pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, sientase libre de poner en linea elementos <script>/<style> dentro de la página.

+
+ +

Resumen del proyecto

+ +

Nuestra demostración de la pelota hinchable es divertida, pero ahora queremos que sea un poco más interactiva agregando un círculo maligno controlado por el usuario, que se los comería si los atrapa. Tambien queremos testar nuestras destrezas como constructores de objetos creando un objeto Shape() genérico de que puedan heredar nuestra pelota y el círculo maligno. Finalmente, queremos añadir una puntuación para seguir el número de bolas que quedan por capturar.

+ +

La siguiente captura de pantalla te da una idea de cómo debería verse el programa final.

+ +

+ + + +

Para darle una idea eche un vistazo al ejemplo final (¡no mire el código fuente!)

+ +

Pasos para completar

+ +

Las siguientes secciones describen lo que debe hacer.

+ +

Creando nuestro nuevos objetos

+ +

Primero de todo, cambia la constructora existente de Ball() para que se convierta en un constructor Shape() y añade un nuevo constructor Ball():

+ +
    +
  1. El constructor Shape() debe definir las propiedades x, y, velX, y velY del mismo modo que lo hacía el constructor Ball() constructor original, pero no las propiedades color y size.
    2. +
  2. También debe definir una nueva propiedad exists, que se utiliza para realizar un seguimiento de si existen las bolas en el programa (no se han comido por el círculo maligno). Debe ser un boolean (true/false).
    3. +
  3. El constructor Ball() debe heredar las propiedades x, y, velX, velY, y exists del constructor Shape().
    4. +
  4. También debe definir propiedades color y size, como el constructor original Ball() hacía.
    5. +
  5. Recuerda configurar el prototype del constructor Ball() correctamente.
    6. +
+ +

Los métodos de la pelota draw(), update(), y collisionDetect() deben ser capaces de permanecer exactamente igual que antes.

+ +

También necesitas añadir un parámetro nuevo a la llamada del constructor new Ball() ( ... )  — El parámetro exists debe ser el quinto parámetro y debe tener un valor true.

+ +

En este punto, intente volver a cargar el código; debería funcionar igual que antes, con nuestros objetos rediseñados.

+ +

Definiendo EvilCircle()

+ +

Ahora es el momento de conocer al chico malo: ¡el EvilCircle()! Nuestro juego solo involucrará un círculo malvado, pero lo vamos a seguir definiendo usando un constructor que hereda de Shape() para que tengas algo de práctica. Es posible que desee agregar otro círculo a la aplicación más adelante que pueda ser controlado por otro jugador o tener varios círculos malvados controlados por computadora. Probablemente no vas a dominar el mundo con un solo círculo maligno, pero servirá para esta evaluación.

+ +

El constructor  EvilCircle() debe heredar x, y, velX, velY, y exists from Shape(), pero velX y velY debe ser igual a 20.

+ +

Debería hacer algo como Shape.call(this, x, y, 20, 20, exists);

+ +

Debe definir también sus propias propiedades, como las siguientes:

+ + + +

Otra vez, recuerda definir tus propiedades heredadas como parámetros en el constructor, y configura las propiedades prototype y constructor properties correc.tamente

+ +

Definiendo los métodos de EvilCircle()

+ +

EvilCircle() debe tener cuatro métodos como se desciben a continuación.

+ +

draw()

+ +

Este método tiene el mismo propósito que el método draw()de Ball(): Se encarga de dibujar la instancia del objeto en el lienzo. Funcionarán de una forma muy similar, así que puedes empezar copiando la definición de Ball.prototype.draw. Luego deberías hacer los siguientes cambios.:

+ + + +

checkBounds()

+ +

Este método hara lo mismo que la primera parte de la función update() de Ball() — mire para ver si el círculo maligno va a salir del borde de la pantalla y evite que lo haga. De nuevo, puede copiar la mayoría de la definición de Ball.prototype.update, hay algunos cambios que debe hacer:

+ + + +

setControls()

+ +

Este método agregará un detector de eventos onkeydown al objeto window para que cuando se presionen ciertas teclas del teclado, podamos mover el círculo maligno. El siguiente bloque de código debe colocarse dentro de la definición del método:

+ +
var _this = this;
+window.onkeydown = function(e) {
+    if (e.keyCode === 65) {
+      _this.x -= _this.velX;
+    } else if (e.keyCode === 68) {
+      _this.x += _this.velX;
+    } else if (e.keyCode === 87) {
+      _this.y -= _this.velY;
+    } else if (e.keyCode === 83) {
+      _this.y += _this.velY;
+    }
+  }
+ +

Por tanto cuando se presiona una tecla, el evento del objeto keyCode se consulta para averiguar que tecla se ha presionado. Si es uno de los cuatro representados por los códigos clave especificados, entonces el círculo maligno se moverá a la izquierda / derecha / arriba / abajo.

+ + + +

collisionDetect()

+ +

Este método actuará de una forma muy similar al método collisionDetect() de Ball(), así que puede usar una copia de eso como una base para el nuevo método. Pero hay algunas diferencias:

+ + + +

Trayendo el círculo del mal al programa.

+ +

Ahora que hemos definido el círculo maligno, debemos hacerlo aparecer en nuestra escena. Para hacerlo, necesitas hacer alguno cambios a la función loop().

+ + + +

Implementando el contador de puntuación.

+ +

Para implementar el contador de puntuación sigue estos pasos:

+ +
    +
  1. En tu archivo HTML añade un elemento {{HTMLElement("p")}} justo debajo del elemento {{HTMLElement("h1")}} que contiene el texto "Ball count: ".
    2. +
  2. En tu archivo CSS, agregue la siguiente regla en la parte inferior: + 
    p {
+  position: absolute;
+  margin: 0;
+  top: 35px;
+  right: 5px;
+  color: #aaa;
+}
    +
    3. +
  3. En su JavaScript, realice las siguientes actualizaciones: +
      +
    • Cree una variable que almacene una referencia al párrafo.
      • +
    • Mantenga un recuento de la cantidad de bolas en la pantalla de alguna manera.
      • +
    • Incrementa el conteo y muestra el número actualizado de bolas cada vez que se agrega una bola a la escena.
      • +
    • Disminuye el conteo y muestra el número actualizado de bolas cada vez que el círculo maligno se come una bola (hace que no exista).
      • +
    +
    4. +
+ +

Consejos

+ + + +

Evaluación

+ +

Si está siguiendo esta evaluación como parte de un curso organizado, debe poder entregar su trabajo a su maestro / mentor para que lo marque. Si está aprendiendo solo, puede obtener la guía de calificación con bastante facilidad preguntando en el discussion thread for this exercise, o en el #mdn IRC channel en Mozilla IRC. Prueba a hacer el ejercicio primero — no hay nada que ganar con trampa!

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/objects/basics/index.html b/files/es/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..a04cdb6a81 --- /dev/null +++ b/files/es/learn/javascript/objects/basics/index.html @@ -0,0 +1,259 @@ +--- +title: Conceptos básicos de los objetos JavaScript +slug: Learn/JavaScript/Objects/Basics +tags: + - API + - Aprender + - Artículo + - JavaScript + - Novato + - Object + - Objeto + - Principiante + - Sintaxis + - instancia + - 'l10n:priority' + - notación de corchetes + - notación de punto + - objeto literal + - tehoría + - this +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

En éste artículo, veremos fundamentos de sintaxis de los objetos de JavaScript y revisaremos algunas características de JavaScript que ya hemos analizado anteriormente en el curso, reiterando el hecho de que muchas de las funciones con las que ya has tratado de hecho son objetos.

+ + + + + + + + + + + + +
Prerrequisitos:Conocimientos básicos de informática, conocimientos básicos de HTML y CSS, familiaridad con los principios básicos de JavaScript (consulta Primeros pasos y Bloques de construcción).
Objetivo:Para comprender la teoría básica detrás de la programación orientada a objetos, cómo esto se relaciona con JavaScript ("la mayoría de las cosas son objetos") y cómo empezar a trabajar con objetos de JavaScript.
+ +

Conceptos básicos de objeto

+ +

Un objeto es una colección de datos relacionados y/o funcionalidad (que generalmente consta de algunas variables y funciones, que se denominan propiedades y métodos cuando están dentro de objetos). Vamos a trabajar a través de un ejemplo para mostrate cómo son.

+ +

Para empezar, haz una copia local de nuestro archivo oojs.html . Esto contiene muy poco: un elemento {{HTMLElement ("script")}} para que escribas tu código fuente en él. Lo usaremos como base para explorar la sintaxis básica de los objetos.

+ +

Al igual que con muchas cosas en JavaScript, la creación de un objeto a menudo comienza con la definición e iniciación de una variable. Intenta ingresar lo siguiente debajo del código JavaScript que ya está en tu archivo, luego guarda y actualiza:

+ +
var persona = {};
+ +

Si ingresas persona en tu entrada de texto y presionas el botón, debes obtener el siguiente resultado:

+ +
[objeto Objeto]
+ +

¡Felicidades!, acabas de crear tu primer objeto. ¡Trabajo realizado! Pero este es un objeto vacío, por lo que realmente no podemos hacer mucho con él. Actualicemos nuestro objeto para que se vea así:

+ +
var persona = {
+  nombre: ['Bob', 'Smith'],
+  edad: 32,
+  genero: 'masculino',
+  intereses: ['música', 'esquí'],
+  bio: function () {
+    alert(this.nombre[0] + '' + this.nombre[1] + ' tiene ' + this.edad + ' años. Le gusta ' + this.intereses[0] + ' y ' + this.intereses[1] + '.');
+  },
+  saludo: function() {
+    alert('Hola, Soy '+ this.nombre[0] + '. ');
+  }
+};
+
+ +

Después de guardar y actualizar, intenta ingresar algunos de los siguientes en tu entrada de texto:

+ +
persona.nombre
+persona.nombre[0]
+persona.edad
+persona.intereses[1]
+persona.bio()
+persona.saludo()
+ +

¡Ahora tienes algunos datos y funcionalidades dentro de tu objeto, y ahora puedes acceder a ellos con una sintaxis simple y agradable!

+ +
+

Nota: Si tienes problemas para hacer que esto funcione, intenta comparar tu código con nuestra versión - ve oojs-finished.html (también ve que se ejecuta en vivo). La versión en vivo te dará una pantalla en blanco, pero eso está bien. De nuevo, abre tu devtools e intenta escribir los comandos anteriores para ver la estructura del objeto.

+
+ +

Entonces, ¿qué está pasando aquí? Bien, un objeto se compone de varios miembros, cada uno de los cuales tiene un nombre (por ejemplo, nombre y edad) y un valor (por ejemplo, ['Bob', 'Smith'] y 32). Cada par nombre/valor debe estar separado por una coma, y el nombre y el valor en cada caso están separados por dos puntos. La sintaxis siempre sigue este patrón:

+ +
var nombreObjeto = {
+  miembro1Nombre: miembro1Valor,
+  miembro2Nombre: miembro2Valor,
+  miembro3Nombre: miembro3Valor
+}
+ +

El valor de un miembro de un objeto puede ser prácticamente cualquier cosa: en nuestro objeto persona tenemos una cadena de texto, un número, dos arreglos y dos funciones. Los primeros cuatro elementos son elementos de datos y se denominan propiedades del objeto. Los dos últimos elementos son funciones que le permiten al objeto hacer algo con esos datos, y se les denomina métodos del objeto.

+ +

Un objeto como este se conoce como un objeto literal — literalmente hemos escrito el contenido del objeto tal como lo fuimos creando. Esto está en contraste con los objetos instanciados de las clases, que veremos más adelante.

+ +

Es muy común crear un objeto utilizando un objeto literal cuando deseas transferir una serie de elementos de datos relacionados y estructurados de alguna manera, por ejemplo, enviando una solicitud al servidor para ponerla en una base de datos. Enviar un solo objeto es mucho más eficiente que enviar varios elementos individualmente, y es más fácil de procesar que con un arreglo, cuando deseas identificar elementos individuales por nombre.

+ +

Notación de punto

+ +

Arriba, accediste a las propiedades y métodos del objeto usando notación de punto (dot notation). El nombre del objeto (persona) actúa como el espacio de nombre (namespace); al cual se debe ingresar primero para acceder a cualquier elemento encapsulado dentro del objeto. A continuación, escribe un punto y luego el elemento al que deseas acceder: puede ser el nombre de una simple propiedad, un elemento de una propiedad de arreglo o una llamada a uno de los métodos del objeto, por ejemplo:

+ +
persona.edad
+persona.intereses[1]
+persona.bio()
+ +

Espacios de nombres secundarios

+ +

Incluso es posible hacer que el valor de un miembro del objeto sea otro objeto. Por ejemplo, intenta cambiar el miembro nombre de

+ +
nombre: ['Bob', 'Smith'],
+ +

a

+ +
nombre : {
+  pila: 'Bob',
+  apellido: 'Smith'
+},
+ +

Aquí estamos creando efectivamente un espacio de nombre secundario (sub-namespace). Esto suena complejo, pero en realidad no es así: para acceder a estos elementos solo necesitas un paso adicional que es encadenar con otro punto al final. Prueba estos:

+ +
persona.nombre.pila
+persona.nombre.apellido
+ +

Importante: en este punto, también deberás revisar tu código y cambiar cualquier instancia de

+ +
nombre[0]
+nombre[1]
+ +

a

+ +
nombre.pila
+nombre.apellido
+ +

De lo contrario, sus métodos ya no funcionarán.

+ +

Notación de corchetes

+ +

Hay otra manera de acceder a las propiedades del objeto, usando la notación de corchetes. En lugar de usar estos:

+ +
persona.edad
+persona.nombre.pila
+ +

Puedes usar

+ +
persona['edad']
+persona['nombre']['pila']
+ +

Esto se ve muy similar a cómo se accede a los elementos en un arreglo, y básicamente es lo mismo: en lugar de usar un número de índice para seleccionar un elemento, se esta utilizando el nombre asociado con el valor de cada miembro. No es de extrañar que los objetos a veces se denominen arreglos asociativos: asocian cadenas de texto a valores de la misma manera que las arreglos asocian números a valores.

+ +

Establecer miembros de objetos

+ +

Hasta ahora solo hemos buscado recuperar (u obtener) miembros del objeto: también puede establecer (actualizar) el valor de los miembros del objeto simplemente declarando el miembro que deseas establecer (usando la notación de puntos o corchetes), de esta manera:

+ +
persona.edad = 45;
+persona['nombre']['apellido'] = 'Cratchit';
+ +

Intenta ingresar estas líneas y luego vuelve a ver a los miembros para ver cómo han cambiado:

+ +
persona.edad
+persona['nombre']['apellido']
+ +

Establecer miembros no solo es actualizar los valores de las propiedades y métodos existentes; también puedes crear miembros completamente nuevos. Prueba estos:

+ +
persona['ojos'] = 'avellana';
+persona.despedida = function() { alert("¡Adiós a todos!"); }
+ +

Ahora puedes probar a los nuevos miembros:

+ +
persona['ojos']
+person.despedida()
+ +

Un aspecto útil de la notación de corchetes es que se puede usar para establecer dinámicamente no solo los valores de los miembros, sino también los nombres de los miembros. Digamos que queremos que los usuarios puedan almacenar tipos de valores personalizados en sus datos personales, escribiendo el nombre y el valor del miembro en dos entradas de texto. Podríamos obtener esos valores de esta manera:

+ +
var nombrePerzonalizado = entradaNombre.value;
+var valorPerzonalizado = entradaValor.value;
+ +

entonces podríamos agregar este nuevo miembro nombre y valor al objeto persona de esta manera:

+ +
persona[nombrePerzonalizado] = valorPerzonalizado;
+ +

Para probar esto, intenta agregar las siguientes líneas en tu código, justo debajo de la llave de cierre del objeto persona:

+ +
var nombrePerzonalizado = 'altura';
+var valorPerzonalizado = '1.75m';
+persona[nombrePerzonalizado] = valorPerzonalizado;
+ +

Ahora intenta guardar y actualizar, e ingresa lo siguiente en tu entrada de texto:

+ +
persona.altura
+ +

Agregar una propiedad a un objeto no es posible con la notación de puntos, que solo puede aceptar un nombre de miembro literal, no un valor variable que apunte a un nombre.

+ +

¿Qué es "this" (este)?

+ +

Es posible que hayas notado algo un poco extraño en nuestros métodos. Mira esto, por ejemplo:

+ +
saludo: function() {
+  alert('¡Hola!, Soy '+ this.nombre.pila + '.');
+}
+ +

Probablemente te estés preguntando qué es "this". La palabra clave this se refiere al objeto actual en el que se está escribiendo el código, por lo que en este caso this es equivalente a la persona. Entonces, ¿por qué no escribir persona en su lugar? Como verás en el artículo JavaScript orientado a objetos para principiantes cuando comenzaremos a crear constructores, etc., this es muy útil: siempre asegurará que se usen los valores correctos cuando cambie el contexto de un miembro (por ejemplo, dos diferentes instancias de objetos persona) pueden tener diferentes nombres, pero querráx usar su propio nombre al decir su saludo).

+ +

Vamos a ilustrar lo que queremos decir con un par de objetos persona simplificados:

+ +
var persona1 = {
+  nombre: 'Chris',
+  saludo: function() {
+    alert('¡Hola!, Soy '+ this.nombre + '.');
+  }
+}
+
+var persona2 = {
+  nombre: 'Brian',
+  saludo: function() {
+    alert('¡Hola!, Soy '+ this.nombre + '.');
+  }
+}
+ +

En este caso, persona1.saludo() mostrará "¡Hola!, Soy Chris"; persona2.saludo() por otro lado mostrará "¡Hola!, Soy Brian", aunque el código del método es exactamente el mismo en cada caso. Como dijimos antes, this es igual al objeto en el que está el código; esto no es muy útil cuando se escriben objetos literales a mano, pero realmente se vuelve útil cuando se generan objetos dinámicamente (por ejemplo, usando constructores) Todo se aclarará más adelante.

+ +

Has estado usando objetos todo el tiempo

+ +

A medida que has estado repasando estos ejemplos, probablemente hayas pensando que la notación de puntos que has usando es muy familiar. ¡Eso es porque la has estado usando a lo largo del curso! Cada vez que hemos estado trabajando en un ejemplo que utiliza una API de navegador incorporada o un objeto JavaScript, hemos estado usando objetos, porque tales características se crean usando exactamente el mismo tipo de estructuras de objetos que hemos estado viendo aquí, aunque más complejos que nuestros propios ejemplos personalizados.

+ +

Entonces cuando usaste métodos de cadenas de texto como:

+ +
myCadena.split(',');
+ +

Estabas usando un método disponible en una instancia de la clase String. Cada vez que creas una cadena en tu código, esa cadena se crea automáticamente como una instancia de String, y por lo tanto tiene varios métodos/propiedades comunes disponibles en ella.

+ +

Cuando accediste al modelo de objetos del documento (document object model) usando líneas como esta:

+ +
var miDiv = document.createElement('div');
+var miVideo = document.querySelector('video');
+ +

Estaba usando métodos disponibles en una instancia de la clase Document. Para cada página web cargada, se crea una instancia de Document, llamada document, que representa la estructura, el contenido y otras características de la página entera, como su URL. De nuevo, esto significa que tiene varios métodos/propiedades comunes disponibles en él.

+ +

Lo mismo puede decirse de prácticamente cualquier otro Objeto/API incorporado que hayad estado utilizando: Array, Math, etc.

+ +

Ten en cuenta que los Objetos/API incorporados no siempre crean instancias de objetos automáticamente. Como ejemplo, la API de Notificaciones, que permite que los navegadores modernos activen las notificaciones del sistema, requiere que crees una instancia de un nuevo objeto para cada notificación que desees disparar. Intenta ingresar lo siguiente en tu consola de JavaScript:

+ +
var miNotificacion = new Notification('¡Hola!');
+ +

De nuevo, veremos qué son los constructores en un artículo posterior.

+ +
+

Nota: Es útil pensar en la forma en que los objetos se comunican como paso de mensajes — cuando un objeto necesita otro objeto para realizar algún tipo de acción a menudo enviará un mensaje a otro objeto a través de uno de sus métodos, y esperará una respuesta, que conocemos como un valor de retorno.

+
+ +

Resumen

+ +

Enhorabuena, has llegado al final de nuestro primer artículo sobre objetos JS: ahora debes tener una buena idea de cómo trabajar con objetos en JavaScript, incluida la creación de tus propios objetos simples. También debes apreciar que los objetos son muy útiles como estructuras para almacenar datos y funcionalidades relacionadas; si trataras de hacer un seguimiento de todas las propiedades y métodos en nuestro objeto persona como variables y funciones separadas, sería ineficiente y frustrante, y tendríamos el riesgo de chocar con otras variables y funciones que tienen los mismos nombres. Los objetos nos permiten mantener la información segura y protegida en su propio paquete, fuera del peligro.

+ +

En el próximo artículo comenzaremos a ver la teoría de programación orientada a objetos (OOP) y cómo se pueden usar dichas técnicas en JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git "a/files/es/learn/javascript/objects/ejercicio_pr\303\241ctico_de_construcci\303\263n_de_objetos/index.html" "b/files/es/learn/javascript/objects/ejercicio_pr\303\241ctico_de_construcci\303\263n_de_objetos/index.html" new file mode 100644 index 0000000000..6dfaaf0d08 --- /dev/null +++ "b/files/es/learn/javascript/objects/ejercicio_pr\303\241ctico_de_construcci\303\263n_de_objetos/index.html" @@ -0,0 +1,301 @@ +--- +title: Ejercicio práctico de construcción de objetos +slug: Learn/JavaScript/Objects/Ejercicio_práctico_de_construcción_de_objetos +translation_of: Learn/JavaScript/Objects/Object_building_practice +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+ +

En los artículos anteriores se explicó lo fundamental de la teoría de los objetos en JavaScript asi como su sintaxis, para que Usted tenga un punto de partida sólido. En éste artículo, desarrollaremos un ejercicio práctico para ganar experiencia en la programación de objetos en JavaScript, con un resultado divertido y colorido.

+ + + + + + + + + + + + +
Pre-requisitos:Conocimientos básicos de computadores. Entendimiento básico de HTML y CSS. Familiaridad con los conceptos básicos de JavaScript (vea Primeros Pasos con JavaScript y Elementos básicos de JavaScript)  y OOJS (vea Conceptos básicos de los objetos JavaScript).
Objetivos:Ganar experiencia en el uso de objetos y el uso de programación orientada a objetos en un contexto realista.
+ +

Lanzemos algunas pelotas

+ +

Es éste artículo escribiremos un programa demo del juego clásico de pelotas que rebotan para mostrar la gran útilidad de los objetos en JavaScript. En éste demo las pelotas rebotaran en la pantalla y cambiaran de color cuando choquen unas con otras. Así, al final del ejemplo tendremos algo como esto:

+ +

+ +
    +
+ +

En este ejemplo se utilizará Canvas API para dibujar las pelotas en la pantalla y la API requestAnimationFrame para animar todo el contenido de la pantalla. No es necesario que conozca estas funciones previamente. Esperamos que al final de este artículo, quizás pueda estar interesado en explorar su uso y capacidades más en detalle. Durante este desarrollo usaremos objetos y algunas técnicas para hacer que las pelotas puedan rebotar en los bordes y comprobar cuando choquen entre ellas (ésto se conoce como detección de colisiones). 

+ +

Primeros pasos

+ +

Para comenzar haga una copia en su computador de los archivos:  index.html, style.css, y main.js. Estos contienen:

+ +
    +
  1. Un documento HTML sencillo con un elemento <h1>, un elemento <canvas> en el que podamos dibujar los gráficos y otros elementos para aplicar los estilos CSS y el código JavaScript. 
    2. +
  2. Algunos estilos sencillos que servirán para ubicar el elemento <h1>, ocultar la barra de desplazamiento y los margenes del borde de la página (para que luzca mejor).
    3. +
  3. Un archivo JavaScript que sirve para definir el elemento <canvas> y las funciones que vamos a usar.
    4. +
+ +

La primera parte del script es:

+ +
var canvas = document.querySelector('canvas');
+
+var ctx = canvas.getContext('2d');
+
+var width = canvas.width = window.innerWidth;
+var height = canvas.height = window.innerHeight;
+ +

Este script obtiene una referencia del elemento <canvas>, luego llama al método getContext() para definir un contexto en el cual se pueda comenzar a dibujar. La resultado de la variable  (ctx) es el objeto que representa directamente el área de dibujo del <canvas> y permite dibujar elementos 2D en él. 

+ +

A continuación se da valor a las variables width and height que corresponden al ancho y alto del elemento canvas (representado por las propiedades canvas.width y canvas.height), de manera que el alto y ancho coincidan con el alto y ancho del navegador (viewport)  cuyos valores se obtienen directamente de las propiedades window.innerWidth y window.innerHeight.

+ +

Puede ver que en el código se encadenan varias asignaciones, para obtener valores más rápidamente. Esto se puede hacer.

+ +

La última parte del script, es la siguiente:

+ +
function random(min, max) {
+  var num = Math.floor(Math.random() * (max - min + 1)) + min;
+  return num;
+}
+ +

Esta función recibe dos números como argumentos de entrada (valor mínimo y maximo) y devuelve un número aleatorio entre ellos.

+ +

Modelando una pelota en nuestro programa

+ +

Nuestro programa tendrá montones de pelotas rebotando por toda la pantalla. Ya que todas las pelotas tendrán el mismo comportamiento, tiene sentido representarlas con un objeto. Empezamos definiendo un constructor para el objeto pelota (Ball), en nuestro código.

+ +
function Ball(x, y, velX, velY, color, size) {
+  this.x = x; //posición horizontal
+  this.y = y; //posición vertical
+  this.velX = velX; //velocidad horizontal
+  this.velY = velY; //velocidad vertical
+  this.color = color; //color
+  this.size = size; //tamaño
+}
+ +

Aquí incluimos algunos parámetros que serán las propiedades que cada pelota necesita para funcionar en nuestro programa: 

+ + + +

Con esto se resuelven las propiedades del objeto, ¿Pero qué hacemos con los métodos? Ya que queremos que las pelotas realicen algo en nuestro programa. 

+ +

Dibujando las pelotas

+ +

Para dibujar, añadiremos el siguiente método draw() al prototipo del objeto Ball():

+ +
Ball.prototype.draw = function() {
+  ctx.beginPath();
+  ctx.fillStyle = this.color;
+  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
+  ctx.fill();
+}
+ +

Con esta función cada objeto pelota Ball() puede dibujarse en la pantalla utilizando el contexto 2D definido anteriormente (ctx)  

+ + + +

Ya se puede empezar a testear el objeto.

+ +
    +
  1. Guarde el código hasta ahora, y cargue el archivo HTML en un navegador.
    2. +
  2. Abra la consola de JavaScript en el navegador, y refresque la página, para que el tamaño del canvas modifique sus dimensiones adaptándose al viewport con la consola abierta. 
    3. +
  3. Teclee lo siguiente en la consola para crear una nueva pelota. + 
    var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
    +
    4. +
  4. Pruebe a llamar a las variables miembro: + 
    testBall.x
+testBall.size
+testBall.color
+testBall.draw()
    +
    5. +
  5. Al teclear la última línea, debería ver que la pelota se dibuja en alguna parte del canvas. 
    6. +
+ +

Actualizando los datos de la pelota

+ +

Ahora podemos dibujar una pelota en una posición dada, pero para empezar a moverla, se necesita una función de actualización de algún tipo. Podemos añadir el código a continuación, al final del archivo de JavaScript, para añidir un método de actualización update() en el prototipo de la clase Ball()

+ +
Ball.prototype.update = function() {
+  if ((this.x + this.size) >= width) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.x - this.size) <= 0) {
+    this.velX = -(this.velX);
+  }
+
+  if ((this.y + this.size) >= height) {
+    this.velY = -(this.velY);
+  }
+
+  if ((this.y - this.size) <= 0) {
+    this.velY = -(this.velY);
+  }
+
+  this.x += this.velX;
+  this.y += this.velY;
+}
+ +

Las cuatro primeras partes de la función verifican si la pelota a alcanzado el borde del canvas. Si es así, se invierte la dirección de la velocidad, para que la pelota se mueva en la dirección contraria. Así, si la pelota va hacia arriba, (velY positiva) , entonces la velocidad vertical es cambiada, para que se mueva hacia abajo (velY negativa).

+ +

Los cuatro posibles casos son: 

+ + + +

En cada caso, se ha tenido en cuenta el tamaño (size) de la pelota en los cálculos, ya que las coordenadas x e y corresponden al centro de la pelota, pero lo que queremos ver es el borde de la pelota cuando choca con el perímetro del canvas — que la pelota rebote, cuando está a medio camino fuera de el —.

+ +

Las dos últimas líneas de código, suman  la velocidad en x (velX) al valor de la coordenada x  , y el valor de la velocidad en y (velY)  a la coordenada y —  con esto se consigue el efecto de que la pelota se mueva cada vez que este método es llamado. 

+ +

Llegados a este punto: ¡continuemos, con las animaciones!

+ +

Animando las pelotas

+ +

Hagamos esto divertido! Ahora vamos a empezar a añadir pelotas al canvas, y animándolas.

+ +

1. Primero, necesitamos algún sitio donde guardas las pelotas. El siguiente arreglo hará esta función — añádela al final de tu código. 

+ +
var balls = [];
+ +

Todos los programas que generan animaciones normalmente tienen un bucle de animación, que sirve para actualizar los datos del programa, para entonces generar la imagen correspondiente; esta es la estrategia básica para la mayor parte de juegos y programas similares. 

+ +

2. Añadamos las siguientes instrucciones al final del código: 

+ +
function loop() {
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+  ctx.fillRect(0, 0, width, height);
+
+  while (balls.length < 25) {
+    var size = random(10,20);
+    var ball = new Ball(
+      // la posición de las pelotas, se dibujará al menos siempre
+      // como mínimo a un ancho de la pelota de distancia al borde del
+      // canvas, para evitar errores en el dibujo
+      random(0 + size,width - size),
+      random(0 + size,height - size),
+      random(-7,7),
+      random(-7,7),
+      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+      size
+    );
+    balls.push(ball);
+  }
+
+  for (var i = 0; i < balls.length; i++) {
+    balls[i].draw();
+    balls[i].update();
+  }
+
+  requestAnimationFrame(loop);
+}
+ +

Nuestra función de bucle: loop(), hace lo siguiente: 

+ + + +

3. Por último, pero no menos importante, añadimos la siguiente línea, al final del código.-- es necesario llamar a la función inicialmente para que la animación comience. 

+ +
loop();
+ +

Eso es todo para la parte básica — pruebe a guardar el código y refrescar el navegador para comprobar si aparecen las pelotas rebotando!

+ +

Añadiendo la detección de colisiones

+ +

Ahora, un poco de diversión, añadamos la detección de colisiones a nuestro código. Así las pelotas, sabrán cuando chocan unas contra otras.

+ +
    +
  1. El primer paso, será añadir el código a continuación a continuación de donde se definió el método  update(). (en código de Ball.prototype.update) + + 
    Ball.prototype.collisionDetect = function() {
+  for (var j = 0; j < balls.length; j++) {
+    if (!(this === balls[j])) {
+      var dx = this.x - balls[j].x;
+      var dy = this.y - balls[j].y;
+      var distance = Math.sqrt(dx * dx + dy * dy);
+
+      if (distance < this.size + balls[j].size) {
+        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+      }
+    }
+  }
+}
    + +

    Esta función es un poco complicada, así que no hay que preocuparse mucho si de momento no se comprende del todo.  

    + +
      +
    • Para cada pelota, necesitamos comprobar si chocará con cada una de las otras pelotas. Para esto, en un bucle for para recorrer todas las pelotas.
      • +
    • Dentro del bucle, usamos un if  para comprobar si la pelota que estamos mirando en ese ciclo del bucle for es la pelota que estamos mirando. No queremos mirar si una pelota ha chocado consigo misma. Para esto miramos si la pelota actual (es decir la pelota que está invocando al método que resuelve la detección de colisiones) es la misma que la indicada por el bucle. Usamos un operador ! para indicar una negación en la comparación, así que el código dentro de la condición  solo se ejecuta si estamos mirando dos pelotas distintas.
      • +
    • Usamos un algoritmo común para comprobar la colisión de los dos pelotas. Básicamente miramos si el área de dos círculos se superponen.  Esto se explica mejor en el enlace detección de colision 2D.
      • +
    • En este caso, únicamente se define la propiedad de color para las dos pelotas, cambiándolas a un nuevo color aleatorio. Se podría haber hecho cosas más complicadas, como que las pelotas rebotasen una con la otra de forma realista, pero esto habría supuesto un desarrollo más complejo. Para desarrollar esos efectos de simulación física, los desarrolladores tienden a usar librerías de física como PhysicsJS, matter.js, Phaser, etc.
      • +
    +
    2. +
  2. También es necesario llamar este método en cada instante de la animación. balls[i].update(); en la línea: + 
    balls[i].collisionDetect();
    +
    3. +
  3. Guardar y refrescar la demo de nuevo y podrá ver como las pelotas cambian de color cuando chocan entre ellas.
    4. +
+ +
+

Nota: Si tiene problemas para hacer funcionar este ejemplo, puede comparar su código JavaScript, con el código de la version_final (y también ver como funciona al ejecutarla).

+
+ +

Resumen

+ +

Esperamos que se haya divertido escribiendo su propio mundo de pelotas que chocan aleatoriamente, usando objetos y programación orientada a objetos. Esto debería haberle dado una práctica útil y haber sido un buen ejemplo. 

+ +

Lea también

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/javascript/objects/index.html b/files/es/learn/javascript/objects/index.html new file mode 100644 index 0000000000..191d23bc9f --- /dev/null +++ b/files/es/learn/javascript/objects/index.html @@ -0,0 +1,67 @@ +--- +title: Introducción a los objetos JavaScript +slug: Learn/JavaScript/Objects +tags: + - Aprender + - Artículo + - Assessment + - CodingScripting + - Evaluación + - Guía + - JavaScript + - Objetos + - Principiante + - TopicStub + - Tutorial +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

En JavaScript, la mayoría de las cosas son objetos, desde características del núcleo de JavaScript como arrays hasta el explorador {{Glossary("API", "APIs")}} construído sobre JavaScript. Incluso puedes crear tus propios objetos para encapsular funciones y variables relacionadas dentro de paquetes eficientes que actúan como prácticos contenedores de datos. La naturaleza de JavaScript basada-en-objetos es importante de entender, si quieres avanzar con tu conocimiento del lenguaje, y por ello hemos hecho este módulo para ayudarte. Aquí enseñamos teoría de objetos y sintaxis en detalle, y luego veremos como crear tus propios objetos.

+ +

¿Buscas convertirte en desarrollador web de front-end?

+ +

Hemos puesto un curso que incluye toda la información esencial que necesitas para alcanzar esa meta

+ +

Comienza aquí

+ +

Prerrequisitos

+ +

Antes de empezar este módulo deberías estar familiarizado con  {{Glossary("HTML")}} and {{Glossary("CSS")}}. Te aconsejamos trabajar los módulos Introducción a HTML y Introducción a CSS antes de empezar con JavaScript.

+ +

También deberías conocer lo básico de Javascript antes de entrar en detalle en los objetos de Javascript. Antes de empezar este módulo, revisa Primeros pasos con JavaScript y Elementos básicos de Java​Script.

+ +
+

Nota: Si trabajas en un ordenador, tablet u otro dispositivo donde no puedas editar tus propios ficheros, prueba a ejecutar los ejemplos de código online en páginas como JSBin o Thimble.

+
+ +

Guías

+ +
+
Principios básicos de los Objetos
+
En este primer artículo sobre los objetos en Javascript, aprenderemos los fundamentos de la sintaxis de objetos en Javascript y revisaremos algunas características ya vistas anteriormente en el curso, remarcando el hecho que muchas de ellas son en realidad objetos.
+
JavaScript Orientado a Objetos para principiantes
+
Una vez vistos los principios básicos, nos centraremos en JavaScript orientado a objetos (OOJS) — este artículo presenta los elementos básicos de la teoría de programación orientada a objetos (OOP), posteriormente explora la manera en que JavaScript emula las clases de un objeto a través de los constructores de funciones, y cómo crea las instancias de un objeto.
+
Prototipos de Objetos
+
Los prototipos son el mecanismo por el cual los objetos en JavaScript heredan caraterísticas entre sí, y funcionan de manera distinta a los mecanismos de herencia  de los lenguages de programación orientada a objetos clásicos.
+
Herencia en JavaScript
+
Con la mayoría de los detalles sangrientos de OOJS ahora explicados, este artículo muestra cómo crear clases de objetos "hijo" (constructores) que heredan características de sus clases "principales". Además, presentamos algunos consejos sobre cuándo y dónde puede usar OOJS.
+
Trabajando con datos JSON
+
La notación de objetos JavaScript (JSON) es un formato estándar basado en texto para representar datos estructurados basados en la sintaxis de objetos de JavaScript, que se usa comúnmente para representar y transmitir datos en sitios web (es decir, enviar datos desde el servidor al cliente; se mostrará en una página web). Lo encontrarás con bastante frecuencia, por lo que en este artículo te proporcionamos todo lo que necesitas para trabajar con JSON mediante JavaScript, incluido el análisis del JSON para que puedas acceder a los elementos de datos y escribir su propio JSON.
+
Práctica de Construcción de Objetos
+
En artículos anteriores vimos toda la teoría esencial de los objetos de JavaScript y los detalles de sintaxis, brindándote una base sólida para comenzar. En este artículo nos sumergimos en un ejercicio práctico, que te dará más práctica en la construcción de objetos personalizados de JavaScript, que producen algo divertido y colorido: algunas pelotas de colores rebotando.
+
+ +

Evaluaciones

+ +
+
Agregar funciones a nuestra demo de "Pelotas Rebotando"
+
En esta evaluación, se espera que utilices la demostración de pelotas que rebotan del artículo anterior como punto de partida y que le agregues algunas características nuevas e interesantes.
+
+ +

Vea también

+ +
+
Aprender JavaScript
+
Un excelente recurso para los aspirantes a desarrolladores web —prenda JavaScript en un entorno interactivo, con lecciones cortas y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas, y el curso completo está disponible por un pequeño pago único.
+
diff --git a/files/es/learn/javascript/objects/inheritance/index.html b/files/es/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..e1cbba42da --- /dev/null +++ b/files/es/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,400 @@ +--- +title: Herencia en JavaScript +slug: Learn/JavaScript/Objects/Inheritance +translation_of: Learn/JavaScript/Objects/Inheritance +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
+ +

Con la mayoría de los detalles internos de OOJS (JavaScript Orientado a Objetos) explicados, este artículo muestra cómo crear clases "hijo" (constructores) que heredan características de sus clases "padre". Además, presentamos algunos consejos sobre cuándo y dónde puedes usar OOJS y cómo se crean las clases con la sintaxis moderna de ECMAScript.

+ + + + + + + + + + + + +
Pre-requisitos:Conocimientos básicos de informática, una comprensión básica de HTML y CSS, familiaridad con los principios básicos de JavaScript (ver Primeros pasos y Construyendo bloques) y conceptos básicos de OOJS (ver Introduccion a objetos).
Objetivo:Entender cómo es posible implementar la herencia en JavaScript.
+ +

Herencia prototípica

+ +

Hasta ahora hemos visto algo de herencia en acción — hemos visto cómo funcionan las cadenas de prototipos, y cómo los miembros son heredados subiendo una cadena. Pero principalmente esto ha involucrado funciones integradas del navegador. ¿Cómo creamos un objeto en JavaScript que hereda de otro objeto?

+ +

Exploremos cómo hacer esto con un ejemplo concreto.

+ +

Primeros pasos

+ +

Primero que nada, hazte una copia local de nuestro archivo  oojs-class-inheritance-start.html (míralo corriendo en vivo también). Dentro de aquí encontrarás el mismo ejemplo de constructor de Persona() que hemos estado usando a través del módulo, con una ligera diferencia — hemos definido solo las propiedades dentro del constructor:

+ +
function Persona(nombrePila, apellido, edad, genero, intereses) {
+  this.nombre = {
+    nombrePila,
+    apellido
+  };
+  this.edad = edad;
+  this.genero = genero;
+  this.intereses = intereses;
+};
+ +

Todos los métodos están definidos en el prototipo del constructor. Por ejemplo:

+ +
Persona.prototype.saludo = function() {
+  alert('¡Hola! soy ' + this.nombre.nombrePila + '.');
+};
+ +
+

Nota: En el código fuente, también verá los métodos bio() y despedida() definidos. Más tarde verá cómo estos pueden ser heredados por otros constructores.

+
+ +

Digamos que quisieramos crear una clase de Profesor, como la que describimos en nuestra definición inicial orientada a objetos, que hereda todos los miembros de Persona, pero también incluye:

+ +
    +
  1. Una nueva propiedad, materia — esto contendrá la materia que el profesor enseña.
    2. +
  2. Un método actualizado de saludo(), que suena un poco más formal que el método estándar de saludo() — más adecuado para un profesor que se dirige a algunos estudiantes en la escuela.
    3. +
+ +

Definiendo un constructor Profesor()

+ +

Lo primero que tenemos que hacer es crear el constructor Profesor()  — añadimos lo siguiente tras el código existente:

+ +
function Profesor(nombrePila, apellido, edad, genero, intereses, materia) {
+  Person.call(this, nombrePila, apellido, edad, genero, intereses);
+
+  this.materia = materia;
+}
+ +

Esto es similar al constructor de Persona en muchos aspectos, pero hay algo extraño aquí que no hemos visto antes: la función call (). Esta función básicamente le permite llamar a una función definida en otro lugar, pero en el contexto actual.
+ El primer parámetro especifica el valor de this que desea utilizar al ejecutar la función, y los otros parámetros son aquellos que deben pasarse a la función cuando se invoca.

+ +

Queremos que el constructor Profesor() tome los mismos parámetros que el constructor Persona() del que está heredando, por lo que los especificamos todos como parámetros en la invocación call().

+ +

La última línea dentro del constructor simplemente define la nueva propiedad subject que los profesores tendrán y que las personas genéricas no tienen.

+ +

Como nota, podríamos haber simplemente hecho esto:

+ +
function Profesor(nombrePila, apellido, edad, genero, intereses, materia) {
+  this.nombre = {
+    nombrePila,
+    apellido
+  };
+  this.edad = edad;
+  this.genero = genero;
+  this.intereses = intereses;
+  this.materia = materia;
+}
+ +

Pero esto es solo definir las propiedades de nuevo, no heredarlas de Persona(), por lo que anula el punto de lo que estamos tratando de hacer. También lleva más líneas de código.

+ +

Heredando de un constructor sin parámetros

+ +

Nótese que si el constructor del cual se está heredando no toma los valores de sus propiedades de parámetros, no se necesita especificarlos como argumentos adicionales en call(). Por ejemplo, si se tuviera algo muy simple como esto:

+ +
function Brick() {
+  this.width = 10;
+  this.height = 20;
+}
+ +

Se podrían heredar las propiedades width y height haciendo esto (así como los otros pasos descritos a continuación, por supuesto):

+ +
function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}
+ +

Nótese que solo especificamos this dentro de call() — no se requieren otros parámetros ya que no estamos heredando ninguna propiedad del padre que sea establecida por parámetros.

+ +

Estableciendo el prototipo de Profesor() y su referencia al constructor

+ +

Todo va bien hasta ahora, pero tenemos un problema. Definimos un nuevo constructor, y tiene una propiedad prototype, la cual por defecto solo contiene una referencia a la función constructor en sí misma. No contiene los métodos de la propiedad prototype del constructor Persona. Para ver esto, introduzca Object.getOwnPropertyNames(Profesor.prototype) ya sea en el campo de texto o en la consola de Javascript . Introdúzcalo nuevamente, reemplazando Profesor con Persona. El nuevo constructor tampoco hereda esos métodos. Para ver esto, compare los resultados de Persona.prototype.saludo and Profesor.prototype.saludo. Necesitamos obtener Profesor() para obtener los métodos definidos en el prototipo de Persona(). ¿Cómo lo hacemos?

+ +
    +
  1. Añade la siguiente línea debajo de tu adición anterior: + 
    Profesor.prototype = Object.create(Persona.prototype);
    + Aquí es cuando nuestro amigo create() sale al rescate de nuevo. En este caso lo estamos usando para crear un nuevo objeto y hacerlo el valor de Profesor.prototype. El nuevo objeto tiene Persona.prototype como su prototipo y por lo tanto heredará, si y cuando lo necesite, todos los métodos disponibles en Persona.prototype.
    2. +
  2. Necesitamos hacer una cosa más antes de proseguir. Después de agregar la última línea, la propiedad constructor de  Profesor.prototype es ahora igual a Persona(), debido a que acabamos de asignar Profesor.prototype para que haga referencia a un objeto que hereda sus propiedades de Persona.prototype! Ahora prueba guardando tu código, carga la página en un explorador e intenta verificar en la consola el valor de  Profesor.prototype.constructor.
    3. +
  3. Esto puede volverse un problema, así que necesitamos corregirlo. Puedes hacerlo regresando a tu código y agregando la siguiente línea al final: + 
    Profesor.prototype.constructor = Profesor;
    +
    4. +
  4. Ahora, si guardas y actualizas, el valor de Profesor.prototype.constructor debe regresar Profesor(), como se espera, además de que ahora estamos heredando de Persona()!
    5. +
+ +

Dándole a Profesor() un nuevo método saludo()

+ +

Para finalizar nuestro código, necesitamos definir un nuevo método saludo() en el constructor de Profesor().

+ +

La manera más fácil es definirlo en el prototipo de Profesor() — agrega lo siguiente al final de tu código:

+ +
Profesor.prototype.saludo = function() {
+  var prefijo;
+
+  if (this.genero === 'masculino' || this.genero === 'Masculino' || this.genero === 'm' || this.genero === 'M') {
+    prefijo = 'Sr.';
+  } else if (this.genero === 'female' || this.genero === 'Femenino' || this.genero === 'f' || this.genero === 'F') {
+    prefijo = 'Sra.';
+  } else {
+    prefijo = 'Sx.';
+  }
+
+  alert('Hola. Mi nombre es ' + prefijo + ' ' + this.nombre.apellido + ', y enseño ' + this.materia + '.');
+};
+ +

Esto muestra el saludo del profesor, el cual además utiliza un prefijo apropiado para su género, resuelto utilizando un bloque else-if.

+ +

Probando el ejemplo

+ +

Ahora que ha ingresado todo el código, intente creando una instancia de objeto desde Profesor() poniendo lo que sigue al final de su archivo (o algo similar a su elección):

+ +
var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
+ +

Ahora guarde y actualice, e intente accediendo a las propiedades y metodos de su nuevo teacher1 objecto, por ejemplo:

+ +
teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();
+ +

Esto deberia trabajar bien. Las consultas de las líneas 1, 2, 3, y 6 acceden a miembros heredados del genérico Person() constructor (clase). La consulta de la línea 4 accede un miembro que es disponible solamente en el mas especializado Teacher() constructor (clase). La consulta de la línea 5 accedería a un miembro desde Person(), excepto por el hecho que Teacher() tiene sus propios miembros con el mismo nombre, entonces la consulta accede a ese miembro.

+ +
+

Nota: Si tiene problemas con el funcionamiento, compare su código con nuestra versión final (vea corriendo en vivo también).

+
+ +

La técnica que mostramos aquí no es la única para crear herencia de clases en JavaScript, pero funciona OK, y le dá una buena idea acerca de cómo implementar herencia en JavaScript.

+ +

También estará interesado en verificar algo de las nuevas características de {{glossary("ECMAScript")}} que nos permiten hacer herencia mas claramente en JavaScript (véase Classes). No se cubrió todo aquí, como tampoco es soportado aún por todos los navegadores. Todo el otro código de constructores que se discutió aquí en estos artículos son soportados por IE9 o superior, y hay caminos para lograr superiores soportes que estos.

+ +

Un simple camino es usar una librería de JavaScript — la mayoría de las opciones mas populares tienen un facil ajuste de funcionalidad disponible para hacer herencia mas facil y rápido. CoffeeScript por ejemplo provee class, extends, etc.

+ +

Un ejercicio mas allá

+ +

En nuestra Sección teórica de POO, también incluimos una clase Student como un concepto, el cual hereda todas las características de Person, y también tiene un método diferende de greeting() que Person que es mas informal que el saludo de los profesores Teacher. Dele una mirada al saludo de los estudiantes, y trate de implementar su propio constructor de saludo Student() que herede todas las características de Person(), e implemente las diferentes funciones de saludo greeting().

+ +
+

Nota: Si tiene problemas resolviendo esto, dele una mirada a nuestra versión final (véala tambien funcionando ).

+
+ +

Resúmen de miembros objeto

+ +

To summarize, you've basically got three types of property/method to worry about:

+ +
    +
  1. Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the this.x = x type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the new keyword, e.g. var myInstance = new myConstructor()).
    2. +
  2. Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, not an instance. For example, Object.keys().
    3. +
  3. Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's prototype property, e.g. myConstructor.prototype.x().
    4. +
+ +

If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.

+ +

ECMAScript 2015 Classes

+ +

ECMAScript 2015 introduces class syntax to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.

+ +
+

Note: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about how the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).

+
+ +

Let's look at a rewritten version of the Person example, class-style:

+ +
class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+ +

The class statement indicates that we are creating a new class. Inside this block, we define all the features of the class:

+ + + +

We can now instantiate object instances using the new operator, in just the same way as we did before:

+ +
let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female' ['Government']]);
+leia.farewell();
+// Leia has left the building. Bye for now
+
+ +
+

Note: Under the hood, your classes are being converted into prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.

+
+ +

Inheritance with class syntax

+ +

Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized Teacher class, making it inherit from Person using modern class syntax. This is called creating a subclass or subclassing.

+ +

To create a subclass we use the extends keyword to tell JavaScript the class we want to base our class on.

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    this.name = {
+      first,
+      last
+    };
+
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  // subject and grade are specific to Teacher
+  this.subject = subject;
+  this.grade = grade;
+  }
+}
+ +

We can make the code more readable by defining the super() operator as the first item inside the constructor(). This will call the parent class' constructor, and inherit the members we specify as parameters of super(), as long as they are defined there:

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+
+ +

When we instantiate Teacher object instances, we can now call methods and properties defined on both Teacher and Person, as we'd expect:

+ +
let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+
+ +

Like we did with Teachers, we could create other subclasses of Person to make them more specialized without modifying the base class.

+ +
+

Note: You can find this example on GitHub as es2015-class-inheritance.html (see it live also).

+
+ +

Getters and Setters

+ +

There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the Teacher example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.

+ +

We can handle such situations with getters and setters.

+ +

Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.

+ +

Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.

+ +

The modified Teacher class looks like this:

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+
+ +

In our class above we have a getter and setter for the subject property. We use _  to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:

+ + + +

The example below shows the two features in action:

+ +
// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject="Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+
+ +
+

Note: You can find this example on GitHub as es2015-getters-setters.html (see it live also).

+
+ +

When would you use inheritance in JavaScript?

+ +

Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.

+ +

In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.

+ +

In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.

+ +
+

Note: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called delegation. Specialized objects delegate functionality to a generic object type.

+
+ +

When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.

+ +

Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.

+ +

Alternativas para extender la cadena del prototipos

+ +

En JavaScript, hay varias maneras diferentes de extender el prototipo de un objeto aparte de lo que hemos mostrado anteriormente. Para saber más sobre las otras formas, visite nuestro artículo Herencia y la cadena de prototipos.

+ +

Resumen

+ +

Este artículo ha cubierto el resto de la teoría y sintaxis central de OOJS que creemos que debería conocer ahora. En este punto debe entender los conceptos básicos de objetos JavaScript y POO, prototipos y herencia de prototipos, cómo crear clases (constructores) e instancias de objetos, añadir características a las clases y crear subclases que heredan de otras clases.

+ +

En el siguiente artículo veremos cómo trabajar con JavaScript Object Notation (JSON), un formato común de intercambio de datos escrito con objetos JavaScript.

+ +

Véase también

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

En éste módulo

+ + diff --git a/files/es/learn/javascript/objects/json/index.html b/files/es/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..09009165cf --- /dev/null +++ b/files/es/learn/javascript/objects/json/index.html @@ -0,0 +1,339 @@ +--- +title: Trabajando con JSON +slug: Learn/JavaScript/Objects/JSON +tags: + - Arreglos + - Artículo + - Guía + - JSON + - Objetos + - Parsing + - Principiante + - Stringifying + - Tutorial +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

JavaScript Object Notation (JSON) es un formato basado en texto estándar para representar datos estructurados en la sintaxis de objetos de JavaScript. Es comúnmente utilizado para transmitir datos en aplicaciones web (por ejemplo: enviar algunos datos desde el servidor al cliente, así estos datos pueden ser mostrados en páginas web, o vice versa). Se enfrentará a menudo con él, así que este artículo le entrega todo lo que necesita saber para trabajar con JSON utilizando JavaScript, incluyendo el análisis JSON para acceder a los datos en su interior, y cómo crear JSON.

+ + + + + + + + + + + + +
Prerrequisitos:Alfabetismo computacional básico, una comprensión básica de HTML y CSS, familiaridad con los temas básicos de JavaScript (vea First steps y Building blocks) y OOJS básico (vea Introduction to objects).
Objetivo:Entender cómo trabajar con datos almacenados en JSON, y crear objetos JSON propios.
+ +

¿Qué es realmente JSON?

+ +

{{glossary("JSON")}} es un formato de datos basado en texto que sigue la sintaxis de objeto de JavaScript, popularizado por Douglas Crockford. Aunque es muy parecido a la sintaxis de objeto literal de JavaScript, puede ser utilizado independientemente de JavaScript, y muchos entornos de programación poseen la capacidad de leer (convertir; parsear) y generar JSON.

+ +

Los JSON son cadenas - útiles cuando se quiere transmitir datos a través de una red. Debe ser convertido a un objeto nativo de JavaScript cuando se requiera acceder a sus datos. Ésto no es un problema, dado que JavaScript posee un objeto global JSON que tiene los métodos disponibles para convertir entre ellos.

+ +
+

Nota: Convertir una cadena a un objeto nativo se denomina parsing, mientras que convertir un objeto nativo a una cadena para que pueda ser transferido a través de la red se denomina stringification.

+
+ +

Un objeto JSON puede ser almacenado en su propio archivo, que es básicamente sólo un archivo de texto con una extension .json, y una {{glossary("MIME type")}} de application/json.

+ +

Estructura del JSON

+ +

Como se describió previamente, un JSON es una cadena cuyo formato recuerda al de los objetos literales JavaScript. Es posible incluir los mismos tipos de datos básicos dentro de un JSON que en un objeto estándar de JavaScript - cadenas, números, arreglos, booleanos, y otros literales de objeto. Esto permite construir una jerarquía de datos, como ésta:

+ +
{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}
+ +

Si se carga este objeto en un programa de JavaScript, convertido (parseado) en una variable llamada superHeroes por ejemplo, se podría acceder a los datos que contiene utilizando la misma notación de punto/corchete que se revisó en el artículo JavaScript object basics. Por ejemplo:

+ +
superHeroes.homeTown
+superHeroes['active']
+ +

Para acceder a los datos que se encuentran más abajo en la jerarquía, simplemente se debe concatenar los nombres de las propiedades y los índices de arreglo requeridos. Por ejemplo, para acceder al tercer superpoder del segundo héroe registrado en la lista de miembros, se debería hacer esto: 

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. Primero el nombre de la variable — superHeroes.
    2. +
  2. Dentro de esta variable para acceder a la propiedad members utilizamos ["members"].
    3. +
  3. members contiene un arreglo poblado por objetos. Para acceder al segundo objeto dentro de este arreglo se utiliza [1].
    4. +
  4. Dentro de este objeto, para acceder a la propiedad powers utilizamos ["powers"].
    5. +
  5. Dentro de la propiedad powers existe un arreglo que contiene los superpoderes del héroe seleccionado. Para acceder al tercer superpoder se utiliza [2].
    6. +
+ +
+

Nota: El JSON previamente visto se encuentra disponible dentro de una variable en el ejemplo JSONTest.html (vea el código fuente). Intente cargarlo y luego acceder a los datos contenidos en la variable por medio de la consola JavaScript de su navegador.

+
+ +

Arreglos como JSON

+ +

Anteriormente se mencionó que el texto JSON básicamente se parece a un objeto JavaScript, y esto es en gran parte cierto. La razón de esto es que un arreglo es también un JSON válido, por ejemplo:

+ +
[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]
+ +

Éste es un JSON perfectamente válido. Para acceder a esta version convertida se debe comenzar con un índice de arreglo, por ejemplo[0]["powers"][0].

+ +

Otras notas

+ + + +

Aprendizaje activo: Trabajando a través de un ejemplo de JSON

+ +

A continuación se muestra un ejemplo de cómo podemos utilizar algunos datos JSON en un sitio web.

+ +

Para comenzar

+ +

Haga una copia local de los archivos heroes.html y style.css. El último contiene un CSS simple para dar estilo a la página, mientras el primero contiene un HTML muy sencillo:

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Además de un elemento {{HTMLElement("script")}} que contiene el código JavaScript que se escribirá en este ejercicio. En este momento sólo contiene dos líneas, que hacen referencia a los elementos {{HTMLElement("header")}} y {{HTMLElement("section")}} y los almacena en variables:

+ +
const header = document.querySelector('header');
+const section = document.querySelector('section');
+ +

Los datos JSON se encuentran disponibles en GitHub en el siguiente enlace: https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

Los datos se cargarán en esta página y se desplegarán a través de la manipulación del DOM de esta forma:

+ +

+ +

Obteniendo el JSON

+ +

Para obtener el JSON se utilizará un API llamado {{domxref("XMLHttpRequest")}} (a menudo llamado XHR). Éste en un objeto JavaScript muy útil que permite realizar solicitudes de red para recuperar recursos desde un servidor vía JavaScript (por ejemplo: imágenes, texto, JSON, incluso código HTML), con lo que es posible actualizar pequeñas secciones de contenido sin tener que volver a cargar la página entera. Con ello se obtienen páginas web más interactivas, pero está fuera del alcance de este artículo entrar en detalle.

+ +
    +
  1. Para empezar, se debe almacenar la URL del JSON que se quiere recuperar en una variable. Agregue lo siguiente al final del código JavaScript: + 
    const requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. Para crear una solicitud, se necesita crear una nueva instancia de objeto de solicitud desde el constructorXMLHttpRequest, utilizando la palabra clave new. Agregue lo siguiente a continuación de la última línea: + 
    const request = new XMLHttpRequest();
    +
    3. +
  3. Ahora es necesario abrir una nueva solicitud utilizando el método open(). Agregue la siguiente línea: + 
    request.open('GET', requestURL);
    + +

    Esto requiere al menos dos parámetros — Existen otros parámetros opcionales disponibles. Sólo se requieren los dos obligatorios para este ejemplo:

    + +
      +
    • El método HTTP a usar cuando se hace una solicitud en red. En este caso GET es adecuado, dado que sólo se estan recuperando algunos datos simples.
      • +
    • La URL a la que se realiza la solicitud — esta es la URL del archivo que se almacenó antes.
      • +
    +
    4. +
  4. Luego, agregue las siguientes dos lineas — establecemos el responseType a JSON, de esta forma ese XHR sabe que el servidor estará retornando JSON y que esto debería ser convertido en segundo plano en un objeto JavaScript. Entonces se envía la solicitud con el método send(): + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. La última parte de esta sección comprende la espera por la respuesta a retornar desde el servidor y luego, manejarla. Agregue el siguiente código bajo el código previo: + 
    request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

En este punto se está almacenando la respuesta a la solicitud (disponible en la propiedad response) en una variable llamada superHeroes; esta variable ahora contendrá el objeto JavaScript basado en el JSON. Luego se pasa el objeto como argumento a dos funciones — la primera llenará el <header> con los datos correctos, mientras la segunda creará una tarjeta de información para cada héroe en el equipo y la insertará en <section>.

+ +

Se ha contenido el código en un manejador de eventos que se activa cuando se dispara el evento de carga (ver onload) — esto es porque el evento de carga se dispara cuando la respuesta ha sido retornada de forma exitosa; de esta manera se garantiza que request.response estará disponible cuando se intente hacer algo con ella.

+ +

Poblando el encabezado

+ +

Se han obtenido los datos desde el JSON y convertidos en un objeto de JavaScript. Ahora, se utilizarán estos datos escribiendo las dos funciones que fueron referenciadas previamente. Antes que todo, agregue la siguiente definición de función a continuación del código previo:

+ +
function populateHeader(jsonObj) {
+  const myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  const myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

Se ha llamado al parámetro jsonObj, para recordar que este es un objeto JavaScript originado desde un JSON. Primero se crea un elemento {{HTMLElement("h1")}} con createElement(), se asigna su textContent igual a la propiedad squadName del objeto, luego se agrega al encabezado utilizandoappendChild(). A continuación se realiza una operación muy parecida en un párrafo: se crea, se asigna su contenido de texto y se agrega al encabezado. La única diferencia es que su texto se asigna a una cadena concatenada que contiene las propiedades homeTown y formed del objeto.

+ +

Creación de las tarjetas de información del héroe

+ +

Luego, agregue la siguiente función al final del código, que crea y muestra las tarjetas de los superhéroes:

+ +
function showHeroes(jsonObj) {
+  const heroes = jsonObj['members'];
+
+  for (var i = 0; i < heroes.length; i++) {
+    const myArticle = document.createElement('article');
+    const myH2 = document.createElement('h2');
+    const myPara1 = document.createElement('p');
+    const myPara2 = document.createElement('p');
+    const myPara3 = document.createElement('p');
+    const myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    const superPowers = heroes[i].powers;
+    for (var j = 0; j < superPowers.length; j++) {
+      const listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}
+ +

Para empezar, se almacena la propiedad members del objeto JavaScript en una nueva variable. Este arreglo contiene múltiples objetos que contienen la información para cada héroe.

+ +

A continuación, se utiliza un ciclo for para recorrer cada objeto en el arreglo. Para cada uno:

+ +
    +
  1. Se crean varios elementos nuevos: un<article>, un <h2>, tres <p>s, y una <ul>.
    2. +
  2. Se asigna al <h2> para que muestre el name del héroe.
    3. +
  3. Se completan los tres párrafos con su secretIdentity, age, y una línea que diga "Superpowers:" para introducir la información de la lista.
    4. +
  4. Se almacena la propiedad powers en otra variable nueva llamada superPowers — que contiene un arreglo que lista los superpoderes del héroe actual.
    5. +
  5. Para recorrer los superpoderes del héroe, se utiliza otro ciclo for  — para cada uno se crea un elemento <li>, se asigna el superpoder a él y luego se pone el listItem dentro del elemento <ul>  (myList) utilizando appendChild().
    6. +
  6. Lo último es agregar los <h2>, <p>s, y <ul> dentro del <article> (myArticle), luego se agrega <article> dentro de <section>. El orden en que las cosas son agregadas es importante, dado que este es el orden en el que aparecerán dentro del HTML.
    7. +
+ +
+

Nota: Si tiene problemas en lograr que el ejemplo funcione, intente con el código fuente heroes-finished.html (vea también running live.)

+
+ +
+

Nota: Si encuentra dificultades en seguir la notacion de punto/corchete que se utiliza para acceder a los objetos de JavaScript, puede ser útil tener el archivo superheroes.json abierto en otra pestaña o en su editor de texto, y revisarlo mientras observa el código JavaScript. También puede referirse al artículo JavaScript object basics para mayor información sobre la notación de punto y corchete.

+
+ +

Conversiones entre objetos y texto

+ +

El ejemplo anterior era simple en términos de acceder al objeto JavaScript, porque se programó la solicitud XHR para convertir el JSON de respuesta directamente en un objeto de JavaScript utilizando:

+ +
request.responseType = 'json';
+ +

En algunas ocasiones, se recibirá una cadena JSON sin procesar, y será necesario convertirla en un objeto. Y cuando sea necesario enviar un objeto Javascript a través de la red, será necesario convertirlo a un JSON (una cadena) antes de ser enviado. Afortunadamente, estos dos problemas son muy comunes en el desarrollo web por lo que un objeto JSON integrado está disponible en los navegadores, que contiene los siguientes dos métodos:

+ + + +

El primer método se puede observar en el ejemplo heroes-finished-json-parse.html (vea el código fuente) — que realiza exactamente lo mismo que el ejemplo que se construyó previamente, excepto porque se determinó que el XHR devolviera el texto JSON sin procesar, luego se utiliza parse() para convertirlo en un objeto JavaScript. El extracto del código es el siguiente:

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // recibimos una cadena de tipo "string"
+request.send();
+
+request.onload = function() {
+  const superHeroesText = request.response; // cogemos la cadena de response
+  const superHeroes = JSON.parse(superHeroesText); // la convertimos a objeto
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

Como es de suponer, stringify() trabaja de la forma opuesta. Intente ingresar las siguientes líneas en la consola de JavaScript de su navegador para verlo en acción:

+ +
const myJSON = { "name": "Chris", "age": "38" };
+myJSON
+const myString = JSON.stringify(myJSON);
+myString
+ +

En este caso, se ha creado un objeto JavaScript, luego se comprueba lo que contiene, y entonces se convierte en una cadena JSON utilizando stringify() — guardando el valor retornado en una variable nueva  — y comprobándolo nuevamente.

+ +

Resumen

+ +

En este artículo se ha entregado una guía simple para utilizar JSON en sus programas, incluyendo cómo crear y leer JSON, y cómo acceder a los datos almacenados en él. En el artículo siguiente se verá JavaScript orientado a objetos.

+ +

Vea también

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

diff --git a/files/es/learn/javascript/objects/object-oriented_js/index.html b/files/es/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..5eb023c685 --- /dev/null +++ b/files/es/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,307 @@ +--- +title: JavaScript orientado a objetos para principiantes +slug: Learn/JavaScript/Objects/Object-oriented_JS +tags: + - Aprender + - Artículo + - Constructor + - Crear + - Create + - JSOO + - JavaScript + - OOJS + - OOP + - Object + - Objeto + - Orientado a Objeto + - Principiante + - Programación orientada a objetos + - instance + - instanciar + - 'l10n:priority' +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
+ +

Con lo básico fuera del camino, nos enfocaremos en Javascript Orientado a Objetos (JSOO) — este artículo presenta una descripción básica de la teoría de la Programación Orientada a Objetos (POO), luego explora cómo Javascript emula classes de objetos via funciones constructoras, y cómo crea instancias de objetos.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de computación, entendimiento básico de HTML y CSS, familiaridad con las bases de Javascript (ver Primeros pasos con JavaScript y Bloques de construcción JavaScript) y las bases de JSOO (ver Introducción a objetos).
Objetivo: +

Entender la teoría base de la programación orientada a objetos, como se relaciona esta con JavaScript ("todo es un objeto"), y como crear constructores e instacias de objetos.

+
+ +

Programacion Orientada a Objetos— lo básico

+ +

Para empezar, daremos una descripción simple y de alto nivel acerca de lo que es la Programación Orientada a Objetos (POO). Decimos simple, porque la POO puede volverse complicada rápidamente, y darte un tratamiento completo ahora, probablemente podría confundirte más que ayudar. La idea básica de la POO es que usamos objetos para modelar cosas del mundo real que queremos representar en nuestros programas, y/o proveemos una simple manera para acceder a la funcionalidad que, de otra manera, sería difícil o imposible de usar.

+ +

Los objetos pueden contener información y código relacionados, los cuales representan información acerca de lo que estás tratando de modelar, y la funcionalidad o comportamiento que deseas que tenga.  Los datos de un Objeto (y frecuentemente, también las funciones) se pueden almacenar ordenadamente (la palabra oficial es encapsular) dentro del paquete de un objeto (al que se puede asignar un nombre específico, llamado a veces espacio de nombres), haciéndolo fácil de estructurar y acceder; los objetos también se usan comúnmente como almacenes de datos que se pueden enviar fácilmente a través de la red.

+ +

Definiendo una plantilla de objeto

+ +

Vamos a considerar un sencillo programa que muestra información sobre estudiantes y profesores en una escuela. Aquí daremos un vistazo a la POO (Programación Orientada a Objetos) en general, no en el contexto de algún lenguaje de programación específico.

+ +

Para empezar, podríamos volver a ver al objeto Persona de nuestro artículo de primeros objetos, que define los datos generales y funcionalidades de una persona. Hay muchas cosas que podrías saber acerca de una persona (su dirección, estatura, tamaño de calzado, perfil de ADN, número de pasaporte, rasgos significativos de su personalidad...), pero, en este caso, solo estamos interesados en mostrar su nombre, edad, género e intereses, además de una pequeña introducción sobre este individuo basada en los datos anteriores. También queremos que sea capaz de saludar. 

+ +

Esto es conocido como abstracción —  crear un modelo simple de algo complejo que represente sus aspectos más importantes y que sea fácil de manipular para el propósito de nuestro programa.

+ +

+ +

En algunos lenguajes de POO, esta definición de tipo de objeto se la llama class (JavaScript utiliza diferentes mecanismos y terminologías, como verás a continuación) — esto no es en realidad un objeto, en vez de esto es un modelo que define las características que un objeto debería tener.

+ +

Creando objetos

+ +

Partiendo de nuestra clase, podemos crear instancias de objetos — objetos que contienen los datos y funcionalidades definidas en la clase original. Teniendo a nuestra clase Persona, ahora podemos crear gente con características más específicas: 

+ +

+ +

Cuando una instancia del objeto es creada a partir de una clase, se ejecuta la función constructora (constructor en inglés) de la clase para crearla. El proceso de crear una instancia del objeto desde una clase se llama instanciación.

+ +

Clases especializadas

+ +

En este caso nosotros no queremos personas genericas — queremos docentes y estudiantes, que son los dos tipos más específicos de personas. En POO, podemos crear nuevas clases basadas en otras clases, estas nuevas clases secundarias se pueden hacer para  heredar los datos y código de su clase primaria, de modo que pueden reutilizar la funcionalidad común a todos los tipos de objetos en lugar de tener que duplicarla. Cuando la funcionalidad difiere entre clases, puedes definir funciones especializadas directamente en ellas según sea necesario.

+ +

+ +

Esto es realmente útil, los profesores y los estudiantes comparten muchas características comunes como el nombre, el género y la edad, por lo que es conveniente tener que definir esas características solo una vez. También puedes definir la misma característica por separado en diferentes clases, ya que cada definición de esa característica estará en un espacio de nombres diferente. Por ejemplo, el saludo de un estudiante puede tener la forma "Yo, soy [Nombre]" (por ejemplo, Yo, soy Sam), mientras que un profesor puede usar algo más formal, como "Hola, mi nombre es [Prefix] [lastName], y enseño [Asunto] ". (Por ejemplo, Hola, mi nombre es Sr. Griffiths, y yo enseño Química).

+ +
+

Nota:  la palabra elegante para la capacidad de múltiples tipos de objetos de implementar la misma funcionalidad es polimorfismo. Por si acaso te preguntabas.

+
+ +

Ahora puedes crear instancias de objetos de las clases "hijo". Por ejemplo:

+ +

+ +

En el resto del articulo, comenzaremos a ver como podemos practicar la teoría de POO en JavaScript.

+ +

Constructores e instancias de objetos

+ +

Algunas personas sostienen que JavaScript no es un verdadero lenguaje orientado a objetos — por ejemplo, su enunciado class es sólo azúcar sintáctica sobre la herencia prototípica existente y no es una class en el sentido tradicional. JavaScript, utiliza funciones especiales llamadas funciones constructoras para definir objetos y sus características. Son útiles porque a menudo te encontrarás con situaciones en las que no sabes cuántos objetos crearás; los constructores proporcionan los medios para crear tantos objetos como necesites de una manera efectiva, adjuntando datos y funciones a ellos según sea necesario.

+ +

Cuando se crea una nueva instancia del objeto a partir de una función constructora, su funcionalidad central (tal como se define en su prototipo, que exploraremos en el artículo Prototipos de objetos) no se copia en el nuevo objeto como lenguajes OO "clásicos", sino que la funcionalidad está vinculada a través de una cadena de referencia llamada cadena prototipo. Así que esto no es una verdadera instanciación, estrictamente hablando, JavaScript usa un mecanismo diferente para compartir funcionalidad entre objetos.

+ +
+

Nota: no ser "POO clásica" no es necesariamente algo malo; Como se mencionó anteriormente, la POO puede ser muy compleja muy rápidamente, y JavaScript tiene algunas agradables formas de aprovechar las características de la OO sin tener que profundizar demasiado en ello.

+
+ +

Exploremos la creación de clases a través de constructores y la creación de instancias de objetos a partir de ellas en JavaScript. En primer lugar, nos gustaría que hicieras una nueva copia local del archivo oojs.html que vimos en nuestro primer artículo de Objetos.

+ +

Un ejemplo simple

+ +
    +
  1. Comencemos por ver cómo puedes definir una persona con una funcion normal. Agrega esta funcion dentro del elemento script: + + 
    function createNewPerson(name) {
+  var obj = {};
+  obj.name = name;
+  obj.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+  return obj;
+}
    +
    2. +
  2. Ahora puedes crear una nueva persona llamando a esta funcion — prueba con las siguientes lineas en la consola Javascript de tu navegador: + 
    var salva = createNewPerson('Salva');
+salva.name;
+salva.greeting();
    + Esto funciona bastante bien, pero es un poco largo; si sabemos que queremos crear un objeto, ¿por qué necesitamos crear explícitamente un nuevo objeto vacío y devolverlo? Afortunadamente, JavaScript nos proporciona un práctico acceso directo, en forma de funciones constructoras — ¡hagamos una ahora!
    3. +
  3. Reemplaza tu función anterior por la siguiente: + 
    function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}
    +
    4. +
+ +

La función constructora es la versión de JavaScript de una clase. Notarás que tiene todas las características que esperas en una función, aunque no devuelve nada o crea explícitamente un objeto — básicamente sólo define propiedades y métodos. Verás que la palabra clave this se está usando aquí también — es básicamente decir que cuando se crea una de estas instancias de objeto, la propiedad name del objeto será igual al valor del nombre pasado a la llamada del constructor, y el método greeting() usará también el valor del nombre pasado a la llamada del constructor.

+ +
+

Nota: Un nombre de función constructora generalmente comienza con una letra mayúscula — esta convención se utiliza para hacer que las funciones constructoras sean más fáciles de reconocer en el código.

+
+ +

Entonces, ¿cómo llamamos a un constructor para crear algunos objetos?

+ +
    +
  1. Agrega las siguientes líneas debajo de tu código anterior: + 
    var person1 = new Person('Bob');
+var person2 = new Person('Sarah');
    +
    2. +
  2. Guarda el código y vuelve a cargarlo en el navegador, e intenta ingresar las siguientes líneas en la consola Javascript : + 
    person1.name
+person1.greeting()
+person2.name
+person2.greeting()
    +
    3. +
+ +

¡Guaw! Ahora veras que tenemos dos nuevos objetos, cada uno de los cuales está almacenado en un espacio de nombres diferente: para acceder a sus propiedades y métodos, debes llamarlos como person1 o  person2; están cuidadosamente empaquetados para que no entren en conflicto con otras funciones. Sin embargo, tienen disponible la misma propiedad name y el método greeting(). Ten en cuenta que están utilizando su propio name que se les asignó cuando se crearon; esta es una razón por la cual es muy importante usar this, para que usen sus propios valores, y no algún otro valor.

+ +

Veamos nuevamente las llamadas del constructor:

+ +
var person1 = new Person('Bob');
+var person2 = new Person('Sarah');
+ +

En cada caso, la  palabra clave new se usa para indicarle al navegador que queremos crear una nueva instancia del objeto, seguida del nombre de la función con sus parámetros requeridos entre paréntesis, y el resultado se almacena en una variable — muy similar a cómo se llama a una función estándar. Cada instancia se crea de acuerdo con esta definición:

+ +
function Person(name) {
+  this.name = name;
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  };
+}
+ +

Una vez creados los nuevos objetos, las variables person1 y person2 contienen los siguientes objetos:

+ +
{
+  name: 'Bob',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+{
+  name: 'Sarah',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

Ten en cuenta que cuando llamamos a nuestra función constructora, estamos definiendo greeting() cada vez, lo cual no es lo ideal. Para evitar esto, podemos definir funciones en el prototipo, que veremos más adelante.

+ +

Creando nuestro constructor final

+ +

El ejercicio que vimos anteriormente fue solo un ejemplo simple para comenzar. Ahora crearemos nuestra función constructor Person() final.

+ +
    +
  1. Elimina el código que insertaste hasta ahora y agrega este constructor de reemplazo; este es exactamente el mismo que el ejemplo simple del principio, con un poco más de complejidad: + 
    function Person(first, last, age, gender, interests) {
+  this.name = {
+    'first': first,
+    'last' : last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.bio = function() {
+    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  };
+  this.greeting = function() {
+    alert('Hi! I\'m ' + this.name.first + '.');
+  };
+}
    +
    2. +
  2. Ahora, agrega la siguiente línea para crear una instancia del objeto: + 
    var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
    +
    3. +
+ +

Ahora verás que puedes acceder a las propiedades y métodos justo como lo hiciste anteriormente — intenta esto en tu consola JS:

+ +
person1['age']
+person1.interests[1]
+person1.bio()
+// etc.
+ +
+

Nota: Si tienes problemas para lograr que funcione, puedes comparar tu código con nuestra versión — ve oojs-class-finished.html (también lo puedes ver corriendo en vivo).

+
+ +

Ejercicios adicionales

+ +

Para empezar, intenta añadir un par de líneas de creación de objetos propias, y trata de obtener y asignar valores a los miembros de las instancias del objeto.

+ +

Además, hay un par de problemas con nuestro método bio() — la salida siempre incluye el pronombre "He", incluso para personas de otros géneros. Y bio solamente incluye dos intereses, sin importar la cantidad que hay en el arreglo interests. ¿Podrías corregir esto en la definición de la clase (constructor)? Puedes poner cualquier código dentro de un constructor (probablemente necesites algunos condicionales y un bucle). Piensa como se deben estructurar las declaraciones dependiendo del género, y de la cantidad de intereses.

+ +
+

Note: Si estás atascado, hay una respuesta en nuestro repositorio de GitHub (see it live) — igualmente ¡intentea resolverla primero!

+
+ +

Otras formas de crear instancias de objetos

+ +

Hasta ahora hemos visto dos diferentes formas de crear una instancia de objeto — declarando un objeto literal, y usando una función constructora (ver arriba).

+ +

Esto tiene sentido, pero hay otras formas — se muestran aquí para que te vayas familiarizando en caso de encontrarte con ellas.

+ +

El constructor Object()

+ +

Antes que nada, puedes usar el constructor Object() para crear un nuevo objeto. Si, incluso objetos genéricos tienen un constructor que genera un objeto vacío.

+ +
    +
  1. Intenta ingresar este código en la consola JavaScript de tu navegador: + 
    var person1 = new Object();
    +
    2. +
  2. Esto guarda un objeto vacío en la variable person1. Luego pueded agregar propiedades y métodos a este objeto usando la notación de punto (.) o de corchetes (['']); prueba estos ejemplos en tu consola: + 
    person1.name = 'Chris';
+person1['age'] = 38;
+person1.greeting = function() {
+  alert('Hi! I\'m ' + this.name + '.');
+};
    +
    3. +
  3. También puedes pasar un objeto literal como parámetro al constructor Object(), para precargarlo con propiedades/métodos. Prueba esto en tu consola: + 
    var person1 = new Object({
+  name: 'Chris',
+  age: 38,
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+});
    +
    4. +
+ +

Usando el método create()

+ +

Los constructores te pueden ayudar a ordenar tu código — puedes crear constructores en un lugar, y luego crear instancias cuando sean necesarias.

+ +

Sin embargo, algunas personas prefieren crear instancias de objetos sin crear antes constructores, especialmente si van a crear solamente pocas instancias de un objeto.

+ +

JavaScript tiene un método llamado create() que permite hacer esto. Con este método puedes crear un nuevo objeto basado en cualquier otro objeto existente.

+ +
    +
  1. Con tu ejercicio de la sección anterior cargado en el navegador, prueba esto en tu consola JavaScript + 
    var person2 = Object.create(person1);
    +
    2. +
  2. Y ahora prueba esto: + 
    person2.name
+person2.greeting()
    +
    3. +
+ +

Verás que person2 fue creado basado en person1 — tiene las mismas propiedades y métodos.

+ +

Una limitación del método create() es que no está soportado por el navegador IE8. Por lo que los constructores serán más efectivos sin necesitas soportar navegadores antiguos.

+ +

Más tarde, exploraremos en detalle los efectos de create().

+ +

Resumen

+ +

Este artículo provee una visión simplificada de la teoría de la orientación a objetos — esta no es toda la historia, pero te da una idea de con que estamos lidiando aquí. Adicionalmente, empezamos a ver como JavaScript está relacionado y difiere de la orientación a objetos "clásica", cómo usamos funciones constructoras para implementar clases en JavaScript, y diferentes formas de generar instancias de objetos.

+ +

En el próximo artículo, exploraremos los prototipos de objeto JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}

+ +

En este modulo

+ + diff --git a/files/es/learn/javascript/objects/object_prototypes/index.html b/files/es/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..852dd5e70e --- /dev/null +++ b/files/es/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,282 @@ +--- +title: Prototipos de objetos +slug: Learn/JavaScript/Objects/Object_prototypes +tags: + - Aprender + - Artículo + - Cadena de Prototipos + - Constructor + - JavaScript + - Objetos + - Principiante + - Prototipo + - create() +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
+ +

Los prototipos son un mecanismo mediante el cual los objetos en JavaScript heredan características entre sí. En este artículo, explicaremos como funcionan los prototipos y también cómo se pueden usar las propiedades de estos para añadir métodos a los contructores existentes.

+ + + + + + + + + + + + +
Prerrequisitios:Conocer las funciones en Javascript, conocimientos básicos de Javascript (ver Primeros Pasos y Building blocks) y Javascript orientado a Objetos (ver Introducción a Objetos).
Objetivo:Comprender los prototipos de objectos de Javascript, cómo funciona la cadena de prototype, y cómo añadir nuevos métodos a la propiedad prototype.
+ +

¿Un lenguaje basado en prototipos?

+ +

JavaScript es a menudo descrito como un lenguaje basado en prototipos - para proporcionar mecanismos de herencia, los objetos pueden tener un objeto prototipo, el cual actúa como un objeto plantilla que hereda métodos y propiedades.

+ +

Un objeto prototipo del objeto puede tener a su vez otro objeto prototipo, el cual hereda métodos y propiedades, y así sucesivamente. Esto es conocido con frecuencia como la cadena de prototipos, y explica por qué objetos diferentes pueden tener disponibles propiedades y métodos definidos en otros objetos.

+ +

Bien, para ser exactos, los métodos y propiedades son definidos en la propiedad prototype, que reside en la función constructora del objeto, no en la instancia misma del objeto.

+ +

En JavaScript, se establece un enlace entre la instancia del objeto y su prototipo (su propiedad __proto__, la cual es derivada de la propiedad prototype sobre el constructor), y las propiedades y metodos son encontrados recorriendo la cadena de prototipos.

+ +

Nota: Es importante entender que, tanto el prototipo de la instancia de un objeto (al cual se accede mediante Object.getPrototypeOf(obj), o a través de la propiedad __proto__) como el prototipo que contiene el constructor (que se encuentra en la propiedad prototype del constructor) hacen referencia al mismo objeto.

+ +

Vamos a echar un vistazo a algunos ejemplos para intentar aclarar estos conceptos.

+ +

Entendiendo objectos prototipos

+ +

Volvamos al ejemplo anterior en el que acabamos definiendo nuestro constructor Person() — cargue el ejemplo en su navegador. Si aún no lo tienes luego de haber trabajado el último artículo, usa nuestro ejemplo oojs-class-further-exercises.html (vea también el código fuente).

+ +

En este ejemplo, hemos definido una función constructor, así:

+ +
function Persona(nombre, apellido, edad, genero, intereses) {
+
+  // definiendo de propiedades y métodos
+  this.first = first;
+  this.last = last;
+//...
+}
+
+ +

Entonces hemos creado una instancia de un objeto como este:

+ +
var person1 = new Persona('Bob', 'Smith', 32, 'hombre', ['music', 'skiing']);
+ +

Si escribe "person1." en su consola JavaScript, debería ver que el navegador intenta completarlo automáticamente con los nombres de miembro disponibles en este objeto:

+ +

+ +

En esta lista, podra ver los miembros definidos en el objeto prototipo de person1, que es la Persona() (Persona() es el constructor) - nombre, edad, género, intereses, biografía y saludos. Sin embargo, también verá algunos otros miembros - watch, valueOf, etc - que están definidos en el objeto prototipo de Persona() 's, que es un Objeto (Object). Esto demuestra que el prototipo cadena funciona.

+ +

+ +

Entonces, ¿qué sucede si llama a un método en person1, que está definido en Object? Por ejemplo:

+ +
person1.valueOf()
+ +

Este método valueOf() simplemente retornará el valor del objeto sobre el que se llama - ¡pruébalo y verás! En este caso, lo que pasa es que:

+ + + +
+

Nota: Queremos reiterar que los métodos y propiedades no se copian de un objeto a otro en la cadena del prototipo. Ellos son accedidos subiendo por la cadena como se ha descrito anteriormente.

+
+ +
+

Nota: No existe oficialmente una forma de acceder directamente al objeto prototipo de un objeto - los "enlaces" entre los elementos de la cadena están definidos en una propiedad interna, denominada [[prototipo]] en la especificación del lenguaje JavaScript (ver {{glossary("ECMAScript")}}).

+ +

La mayoría de los navegadores modernos, sin embargo, ofrecen una propiedad disponible llamada __proto__ (es decir, 2 subrayados en cada lado), que contiene el objeto prototipo del constructor del objeto. Por ejemplo, pruebe person1.__proto__ y person1.__proto__.__proto__ para ver cómo se ve la cadena en código!

+ +

Desde ECMAScript 2015 se puede acceder indirectamente al objeto prototipo de un objeto mediante Object.getPrototypeOf(obj).

+
+ +

La propiedad prototype: Donde se definen los miembros hereditarios

+ +

Entonces, ¿dónde se definen las propiedades y métodos heredados? Si miras la página de referencia de Object, verás en la parte izquierda un gran número de propiedades y métodos - muchos más que el número de miembros heredados que vimos disponibles en el objeto person1. Algunos son heredados y otros no, ¿por qué?

+ +

La respuesta es que los heredados son los que están definidos en la propiedad prototype (podría llamarse subespacio de nombres), es decir, los que empiezan con Object.prototype, y no los que empiezan sólo con Object. El valor de la propiedad del prototipo es un objeto, que es básicamente un repositorio(bucket) para almacenar propiedades y métodos que queremos que sean heredados por los objetos más abajo en la cadena del prototipo.

+ +

Así que Object.prototype.watch(), Object.prototype.valueOf(), etc., están disponibles para cualquier tipo de objeto que herede de Object.prototype, incluyendo nuevas instancias de objeto creadas desde el constructor.

+ +

Object.is(), Object.keys(), y otros miembros no definidos dentro del prototipo del repositorio(bucket) no son heredados por instancias de objeto o tipos de objeto que heredan de Object.prototype. Sino que son métodos/propiedades disponibles sólo en el propio constructor Object().

+ +
+

Nota: Esto parece extraño - ¿cómo se puede tener un método definido en un constructor, que en sí mismo es una función? Bueno, una función es también un tipo de objeto - vea la referencia del constructor de Function() si no nos cree.

+
+ +
    +
  1. Puede comprobar las propiedades de los prototipos existentes - vuelva a nuestro ejemplo anterior e intente introducir lo siguiente en la consola JavaScript: + 
    Person.prototype
    +
    2. +
  2. El resultado no le mostrará mucho - después de todo, no hemos definido nada en el prototipo de nuestro constructor personalizado! Por defecto, el prototipo de un constructor siempre comienza vacío. Ahora intente lo siguiente: + 
    Object.prototype
    +
    3. +
+ +

Verá un gran número de métodos definidos en la propiedad Prototype de Object, que están disponibles en los objetos que heredan de Object, como se ha mostrado anteriormente.

+ +

Verá otros ejemplos de herencia de cadena de prototipos en todo JavaScript - intente buscar los métodos y propiedades definidas en el prototipo de los objetos globales String, Date, Number y Array, por ejemplo. Todos ellos tienen un número de miembros definidos en su prototipo, por lo que, por ejemplo, cuando se crea una cadena, como ésta:

+ +
var myString = 'Esto es mi String.';
+ +

myString inmediatamente tiene una serie de métodos útiles disponibles en él, como split(), indexOf(), replace(), etc.

+ +
+

Importante: La propiedad prototype es una de las partes más confusamente nombradas de JavaScript - podría pensarse que this apunta al objeto prototipo del objeto actual, pero no lo hace (es un objeto interno al que puede accederse mediante __proto__, ¿recuerda?). en su lugar, prototype es una propiedad que contiene un objeto en el que se definen los miembros que se desea que se hereden.

+
+ +

Revisando create()

+ +

Anteriormente mostramos cómo Object.create() crea una nueva instancia de objeto.

+ +
    +
  1. Por ejemplo, pruebe esto en la consola JavaScript de su ejemplo anterior: + 
    var person2 = Object.create(person1);
    +
    2. +
  2. Lo que hace create() es crear un nuevo objeto a partir de un objeto prototipo específico. Aquí, la person2 se crea utilizando la person1 como objeto prototipo. Puede comprobarlo introduciendo lo siguiente en la consola: + 
    person2.__proto__
    +
    3. +
+ +

Esto devolverá el objeto Persona.

+ +

La propiedad constructor

+ +

Cada función de constructor tiene una propiedad prototype cuyo valor es un objeto que contiene una propiedad constructor. Esta propiedad constructor apunta a la función constructor original.

+ +

Como verá en la siguiente sección, las propiedades definidas en la propiedad Person.prototype (o en general en la propiedad prototype de una función de constructor, que es un objeto, como se mencionó en la sección anterior) se hacen disponibles a todas las instancias de objetos creadas utilizando el constructor Person(). Por lo tanto, la propiedad del constructor también está disponible tanto para los objetos person1 como para los objetos person2.

+ +
    +
  1. Por ejemplo, pruebe estos comandos en la consola: + 
    person1.constructor
+person2.constructor
    + +

    Ambos deberían devolver el constructor Person(), ya que contienen la definición original de esas instancias.

    + +

    Un truco interesante es que se puede añadir paréntesis al final de la propiedad constructor (añadiendo todos los parámetros requeridos) para crear otra instancia desde ese constructor. Después de todo, el constructor es una función, por lo que puede ser invocada usando paréntesis; solamente se necesita incluir la palabra clave new para especificar que se quiere usar la función como un constructor.

    +
    2. +
  2. Inténtese esto en la consola: + 
    let person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
    +
    3. +
  3. Ahora intente acceder a las características del nuevo objeto, como: + 
    person3.name.first
+person3.age
+person3.bio()
    +
    4. +
+ +

Esto funciona. No se necesita usarlo con frecuencia, pero puede ser realmente útil cuando se quiera crear una instancia nueva y por alguna razón no se tenga disponible fácilmente una referencia al constructor original.

+ +

La propiedad constructor tiene otros usos. Por ejemplo, si se tiene una instancia y se quiere devolver el nombre del que el constructor es una instancia, se puede usar lo siguiente:

+ +
instanceName.constructor.name
+ +

Intente esto, por ejemplo:

+ +
person1.constructor.name
+
+ +
+

Nota: El valor de constructor.name puede cambiar (debido a herencia de prototipos, binding, preprocesores, transpiladores, etc.), por lo que para ejemplos más complejos es preferible usar el operador instanceof en su lugar. 

+
+ +
    +
+ +

Modificando prototipos

+ +

Vamos a echar un vistzo a un ejemplo para modificar la propiedad prototype de una función constructor (los métodos añadidos a la propiedad prototipo están disponibles en todas las instancias de los objetos creados a partir del constructor).

+ +
    +
  1. Regresemos a nuestro ejemplo oojs-class-further-exercises.html y creemos una copia local del código fuente. Debajo del código JavaScript existente, agrega el siguiente código, el cuál añade un nuevo método a la propiedad prototype del constructor: + + 
    Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};
    +
    2. +
  2. Guarda el código y abre la página en el navegador, e ingresa lo siguiente en la entrada de texto. + 
    person1.farewell();
    +
    3. +
+ +

Deberías obtener un mensaje de alerta mostrando el nombre de la persona como se define dentro del constructor. Esto es realmente útil, pero lo que es más útil es que toda la cadena de herencia se ha actualizado dinámicamente; automáticamente hace que este nuevo método esté disponible en todas las instancias del objeto creadas desde el constructor

+ +

Piensa sobre esto por un momento. En nuestro código definimos el constructor, luego creamos una insancia del objeto desde el constructor, después agregamos un nuevo método a el prototipo del constructor.

+ +
function Person(first, last, age, gender, interests) {
+
+  // property and method definitions
+
+}
+
+var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']);
+
+Person.prototype.farewell = function() {
+  alert(this.name.first + ' has left the building. Bye for now!');
+};.
+ +

Pero el método farewell() aún se encuentra disponible en la instancia person1, su funcionalidad disponible ha sido automáticamente actualizada incluído en método recién definido farewell().

+ +
+

Nota: Si estás teniendo problemas haciendo funcionar este ejemplo, echa un vistazo en nuestro ejemplo oojs-class-prototype.html (míralo ejecutarse en tiempo real).

+
+ +

Raramente verás propiedades definidas en la propiedad prototype, ya no son muy flexibles cuando son definidas de esta forma. Por ejemplo, puedes añadir una propiedad como esta:

+ +
Person.prototype.fullName = 'Bob Smith';
+
+ +

Esto no es muy flexible, ya que la persona podría no llamarse así. Sería mucho mejor construir fullname desde name.first y name.last.

+ +
Person.prototype.fullName = this.name.first + ' ' + this.name.last;
+
+ +

Sin embargo esto no funciona, ya que this estará referenciando al scope global en este caso, no al scope de la función. Llamar esta propiedad retornaría undefined undefined. Esto funcionó bien en el método que declaramos anteriormente dentro del prototipo, porque se encuentra dentro del scope de la función, que se transferirá con éxito al scope de la instancia del objeto.Así que deberías definir propiedades constantes en el prototipo (p.e. una que nunca necesite cambiar), pero generalmente funciona mejor definir propiedades dentro del constructor.

+ +

De hecho, un patrón bastante común para la mayoría de definiciones de objetos es declarar las propiedades dentro del constructor, y los métodos en el prototipo. Esto hace el código más fácil de leer, ya que el constructor sólo contiene las definiciones de propiedades, y los métodos están en bloques separados. Por ejemplo:

+ +
// Constructor with property definitions
+
+function Test(a, b, c, d) {
+  // property definitions
+}
+
+// First method definition
+
+Test.prototype.x = function() { ... };
+
+// Second method definition
+
+Test.prototype.y = function() { ... };
+
+// etc.
+
+ +

Este patrón puede verse en acción en el ejemplo de la aplicación de planificador escolar de Piotr Zalewa.

+ +

Resumen

+ +

Este articulo ha cubierto prototipos de objeto JavaScript, incluyendo como las cadenas de objeto prototipo permiten a los objetos heredar caracteristicas de una a otra, la propiedad prototipo y como puede ser usado para agregar metodos a los constructores, y otros temas relacionados.

+ +

En el proximos articulo vamos a ver como puedes implementar la herencia de funcionalidades entre dos de tus propios objetos personalizados.

+ +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/es/learn/performance/index.html b/files/es/learn/performance/index.html new file mode 100644 index 0000000000..ebe81969aa --- /dev/null +++ b/files/es/learn/performance/index.html @@ -0,0 +1,113 @@ +--- +title: Rendimiento web +slug: Learn/Performance +translation_of: Learn/Performance +--- +

{{LearnSidebar}}{{draft}}

+ +

La construcción de sitios web requiere HTML, CSS y JavaScript. Para crear sitios web y aplicaciones que la gente quiera usar, que atraigan y retengan a los usuarios, debe crear una buena experiencia de usuario. Parte de la buena experiencia del usuario es garantizar que el contenido se cargue rápidamente y responda a la interacción del usuario. Esto se conoce como rendimiento web, y en este módulo aprenderá todo lo que necesita para crear sitios web de rendimiento.

+ +

 

+ +

El rendimiento web es la medición objetiva y la experiencia percibida por el usuario del tiempo de carga y el tiempo de ejecución. El rendimiento web es el tiempo que tarda un sitio en cargarse, en ser interactivo y receptivo, y en el grado de fluidez del contenido durante las interacciones del usuario. ¿Es el desplazamiento suave? ¿Se puede hacer clic en los botones? ¿Las ventanas emergentes se abren rápidamente y se animan sin problemas al hacerlo? El rendimiento web incluye mediciones objetivas como el tiempo de carga, cuadros por segundo y tiempo para experiencias interactivas y subjetivas de cuánto tiempo tardó en cargarse el contenido.

+ +

Muchas características afectan el rendimiento, incluida la latencia, el tamaño de la aplicación, la cantidad de nodos DOM, la cantidad de solicitudes de recursos realizadas, el rendimiento de JavaScript, la carga de la CPU y más. Es importante minimizar los tiempos de carga y respuesta, y agregar funciones adicionales para ocultar la latencia al hacer que la experiencia sea lo más accesible e interactiva posible, tan pronto como sea posible, mientras se carga de forma asíncrona en las partes más largas de la experiencia.

+ +

Existen herramientas, API y mejores prácticas que nos ayudan a medir y mejorar el rendimiento web. Los veremos también en el curso de este módulo.

+ +

 

+ +

Camino de aprendizaje

+ +

 

+ +

Si bien es necesario conocer HTML, CSS y JavaScript para implementar muchas recomendaciones de mejora del rendimiento web, saber cómo crear aplicaciones no es una condición previa necesaria para comprender y medir el rendimiento web.

+ +

Varios de los módulos introductorios a continuación no requieren conocimientos de programación, aunque se necesita una comprensión de HTML para el módulo de rendimiento y HTML, se necesita una comprensión de CSS para el módulo de rendimiento y CSS, etc. Recomendamos que trabaje con nuestros módulos introductorios. primero, comenzando con qué es el rendimiento web primero. Los módulos introductorios proporcionan una visión general del rendimiento web. Los tres primeros deben considerarse como lectura obligatoria si usted es un desarrollador o gerente de proyectos. Los módulos enfocados en temas de tecnología son más apropiados para los desarrolladores que utilizan estas tecnologías.

+ +

 

+ +

Los módulos avanzados profundizan en los temas que se resumen en los módulos introductorios y proporcionan una visión general de las API de rendimiento, las herramientas de análisis y prueba y los problemas de cuellos de botella en el rendimiento.

+ +

Se recomienda que trabajes a través de Empezando con la web antes de proceder con este tema. Sin embargo, hacerlo no es absolutamente necesario.

+ +

Modulos de introducción

+ +

Este tema contiene los siguientes módulos, en un orden sugerido para trabajar a través de ellos. Definitivamente debes comenzar con el primero.

+ +
+
¿Qué es el rendimiento web?
+
Este artículo inicia el módulo con una buena visión de lo que realmente es el rendimiento: esto incluye las herramientas, métricas, API, redes y grupos de personas que debemos considerar al pensar en el rendimiento y cómo podemos hacer que el rendimiento sea parte de nuestra web. flujo de trabajo de desarrollo.
+
¿Cómo perciben los usuarios el rendimiento?
+
+

Más importante que la rapidez de su sitio web en milisegundos, es la rapidez con la que los usuarios perciben su sitio. Estas percepciones se ven afectadas por el tiempo real de carga de la página, el ralentí, la capacidad de respuesta a la interacción del usuario y la suavidad del desplazamiento y otras animaciones. En este artículo, analizamos las diversas métricas de carga, animación y métricas de capacidad de respuesta, junto con las mejores prácticas para mejorar la percepción del usuario, si no los tiempos reales.

+
+
Rendimiento web básico
+
Además de los componentes frontales de HTML, CSS, JavaScript y archivos multimedia, hay características que pueden hacer que las aplicaciones sean más lentas y características que pueden hacer que las aplicaciones sean subjetivamente y objetivamente más rápidas. Existen muchas API, herramientas de desarrollo, mejores prácticas y malas prácticas relacionadas con el rendimiento web. Aquí presentaremos muchas de estas funciones al nivel básico y proporcionaremos enlaces a inmersiones más profundas para mejorar el rendimiento de cada tema.
+
Herramientas de rendimiento HTML
+
Algunos atributos y el orden de origen de su marcado pueden afectar el rendimiento o su sitio web. Al minimizar el número de nodos DOM, asegurándose de que se utilicen el mejor orden y los atributos para incluir contenido como estilos, scripts, medios y scripts de terceros, puede mejorar drásticamente la experiencia del usuario. Este artículo analiza en detalle cómo se puede usar HTML para garantizar el máximo rendimiento.
+
Multimedia: imágenes y vídeo
+
El fruto más bajo del rendimiento web es a menudo la optimización de medios. Es posible servir diferentes archivos multimedia según la capacidad, el tamaño y la densidad de píxeles de cada agente de usuario. Sugerencias adicionales como eliminar pistas de audio de videos de fondo pueden mejorar aún más el rendimiento. En este artículo, analizamos el impacto que el video, el audio y el contenido de la imagen tienen en el rendimiento y los métodos para garantizar que el impacto sea lo más mínimo posible.
+
Imágenes responsivas
+
Si bien la optimización de imágenes es vital para las experiencias de usuario ricas en medios de alto rendimiento, es especialmente importante garantizar que las imágenes tengan el tamaño adecuado para los dispositivos que las descargan. En este artículo, analizaremos la función de las características del navegador nativo, como el elemento <picture> y el atributo srcset en la entrega eficiente de imágenes, y cómo puede usarlas con confianza.
+
Formatos de medios alternativos
+
Cuando se trata de imágenes y videos, hay más formatos de los que probablemente conozca. Algunos de estos formatos pueden llevar sus páginas multimedia altamente optimizadas aún más lejos al ofrecer reducciones adicionales en el tamaño del archivo. En esta guía, analizaremos algunos formatos de medios alternativos, cómo usarlos de manera responsable para que los navegadores no compatibles no se queden al margen, y algunos consejos avanzados sobre la transcodificación de sus activos existentes.
+
Características de rendimiento en CSS
+
CSS puede ser un enfoque de optimización menos importante para mejorar el rendimiento, pero hay algunas características de CSS que afectan el rendimiento más que otras. En este artículo analizamos algunas propiedades CSS que afectan el rendimiento y sugerimos formas de manejar los estilos para garantizar que el rendimiento no se vea afectado negativamente.
+
Mejores prácticas de rendimiento en JavaScript
+
JavaScript, cuando se usa correctamente, puede permitir experiencias web interactivas e inmersivas, o puede dañar significativamente el tiempo de descarga, el tiempo de procesamiento, el rendimiento dentro de la aplicación, la duración de la batería y la experiencia del usuario. Este artículo describe algunas de las mejores prácticas de JavaScript que deben tenerse en cuenta para garantizar que incluso el contenido complejo tenga el mayor rendimiento posible.
+
Rendimiento de fuentes web
+
Un aspecto que a menudo se pasa por alto en el panorama del rendimiento son las fuentes web. Las fuentes web son más prominentes que nunca en el diseño web, sin embargo, muchos desarrolladores simplemente las incorporan desde un servicio de terceros y no piensan en ello. En este artículo, cubriremos métodos para obtener sus archivos de fuentes lo más pequeños posible con una configuración y sub configuración de archivos eficientes. A partir de ahí, continuaremos hablando sobre cómo los navegadores envían mensajes de texto y cómo puede usar las funciones de CSS y JavaScript para garantizar que sus fuentes se representen rápidamente y con una interrupción mínima de la experiencia del usuario.
+
+ +
+
Rendimiento móvil
+
Dado que el acceso a la web en dispositivos móviles es tan popular, y que todas las plataformas móviles tienen navegadores web completos, pero es posible que el ancho de banda, la CPU y la vida útil de la batería sean limitados, es importante considerar el rendimiento de su contenido web en estas plataformas. Este artículo analiza las consideraciones de rendimiento específicas para dispositivos móviles.
+
+ +

Módulos avanzados

+ +
+
Poblando la pagina
+
Se realiza una solicitud HTTP y, con suerte, unos segundos más tarde, aparece el sitio. Mostrar el contenido implica ejecutar JavaScript, posiblemente modificar el DOM, calcular estilos, calcular el diseño y, finalmente, representar el contenido, lo que implica pintar y componer, y puede involucrar la aceleración de la GPU en un hilo separado.
+
Entendiendo la latencia
+
+

La latencia es la cantidad de tiempo que tarda entre el navegador que realiza una solicitud de un recurso y el que recibe el primer byte del recurso solicitado. Este artículo explica qué es la latencia, cómo afecta el rendimiento y cómo medir y mejorar la latencia.

+
+
Entendiendo el ancho de banda
+
+

Bandwidth is the amount of data (measured in Mbps or Kbps) that can be sent per second. This article explains the role of bandwidth in media-rich internet applications, how it can be measured, and how you can optimize applications to make the best use of available bandwidth.

+
+
HTTP/2 y tú
+
+

La capa de transporte, es decir, HTTP, es absolutamente esencial para el funcionamiento de la web, y solo recientemente se ha visto una actualización importante en la forma de HTTP / 2. Fuera de la caja, HTTP / 2 proporciona muchas mejoras de rendimiento y ventajas sobre su predecesor, pero también cambia el panorama. En este artículo, aprenderá lo que HTTP / 2 hace por usted, y cómo ajustar su aplicación para que vaya más allá.

+
+
El rol de TLS en el rendimiento
+
+

TLS, o HTTPS, como solemos llamar, es crucial para crear experiencias de usuario seguras. Si bien el hardware ha reducido los impactos negativos que TLS ha tenido en el rendimiento del servidor, aún representa una porción sustancial del tiempo que pasamos esperando que los navegadores se conecten a los servidores. Este artículo explica el proceso de intercambio de TLS y ofrece algunos consejos para reducir este tiempo, como el grapado OCSP, los encabezados de precarga de HSTS y el posible papel de las sugerencias de recursos en el enmascaramiento de la latencia TLS para terceros.

+
+
Perfilando con el perfilador incorporado
+
Aprenda cómo perfilar el rendimiento de la aplicación con el generador de perfiles integrado de Firefox.
+
Gráficos de rendimiento de lectura
+
Las herramientas del desarrollador proporcionan información sobre el rendimiento, la memoria y las solicitudes de red. Saber leer tablas de cascada, árboles de llamadas, Las herramientas del desarrollador proporcionan información sobre el rendimiento, la memoria y las solicitudes de red. Saber leer, tablas de llamas, y localizaciones en su navegador, las herramientas de desarrollo lo ayudarán a comprender los gráficos de cascada y llama en otras herramientas de rendimiento.
+
Rendimiento de animaciones en CSS y JavaScript
+
Las animaciones son críticas para una experiencia de usuario placentera. Este artículo analiza las diferencias de rendimiento entre CSS y animaciones basadas en JavaScript.
+
Analizando paquetes de JavaScript
+
Sin duda, JavaScript es una gran parte del desarrollo web moderno. Si bien siempre debe esforzarse por reducir la cantidad de JavaScript que utiliza en sus aplicaciones, puede ser difícil saber dónde comenzar. En esta guía, le mostraremos cómo analizar los paquetes de scripts de su aplicación, para que sepa qué está utilizando y cómo detectar si hay scripts duplicados entre paquetes en su aplicación.
+
Lazy-loading JavaScript con importaciones dinámicas
+
Cuando los desarrolladores escuchan el término "carga perezosa", inmediatamente piensan en imágenes que se cargan por la mitad inferior de la página cuando se desplaza hacia la ventana gráfica. ¿Pero sabías que también puedes cargar JavaScript de forma perezosa? En esta guía hablaremos sobre la declaración dinámica de importación (), que es una característica de los navegadores modernos que carga un módulo de JavaScript a pedido. Por supuesto, ya que esta función no está disponible en todas partes, también le mostraremos cómo puede configurar sus herramientas para usar esta función de una manera ampliamente compatible.
+
+ +
+
Controlar la entrega de recursos con sugerencias de recursos
+
Los navegadores a menudo saben mejor que nosotros cuando se trata de la priorización y la entrega de recursos, pero están lejos de ser clarividentes. Las características nativas del navegador nos permiten sugerirle al navegador cuándo debe conectarse a otro servidor, o precargar un recurso antes de que el navegador sepa que lo necesita. Cuando se usa juiciosamente, esto puede hacer que la experiencia rápida parezca aún más rápida. En este artículo, cubrimos las características nativas del navegador como rel = preconnect, rel = dns-prefetch, rel = prefetch, y rel = precarga, y cómo usarlas para su ventaja.
+
+ +

Ver también

+ + + +

{{LandingPageListSubpages}}

diff --git a/files/es/learn/server-side/django/admin_site/index.html b/files/es/learn/server-side/django/admin_site/index.html new file mode 100644 index 0000000000..486d277003 --- /dev/null +++ b/files/es/learn/server-side/django/admin_site/index.html @@ -0,0 +1,372 @@ +--- +title: 'Tutorial Django Parte 4: Sitio de Administración de Django' +slug: Learn/Server-side/Django/Admin_site +tags: + - Aplicación web + - Artículo + - Codificación + - Django Admin + - Principiante + - Python + - Tutorial + - django + - django_admin + - programacion +translation_of: Learn/Server-side/Django/Admin_site +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
+ +

Ahora que hemos creado modelos para el sitio web de la BibliotecaLocal, usaremos el sitio de administración de Django para añadir algunos datos de libros "reales". Primero mostraremos cómo registrar los modelos en el sitio de administración y luego te mostraremos cómo iniciar sesión y crear algunos datos. Al final del artículo mostraremos algunas formas en las que puedes mejorar más adelante la presentación del sitio de Administración.

+ + + + + + + + + + + + +
Pre-requisitos:Primero completa: Tutorial Django Parte 3: Uso de modelos.
Objetivo: +

Entender los beneficios y las limitaciones del sitio de administración de Django, y usarlo para crear algunos registros para nuestros modelos.

+
+ +

Introducción

+ +

La aplicación de administración de Django puede usar tus modelos para construir automáticamente un área dentro del sitio que puedes usar para crear, consultar, actualizar y borrar registros. Esto puede ahorrarte mucho tiempo de desarrollo, haciendo muy fácil probar tus modelos y darte una idea de si tus datos son correctos. La aplicación de administración también puede ser útil para manejar datos en producción, dependiendo del estilo del sitio web. Desde el proyecto Django solo se recomienda para gestión de datos internos (por ejemplo, solo para uso de administradores o personas internas de tu organización), ya que como enfoque centrado en el modelo no es necesariamente la mejor interfaz posible para todos los usuarios, exponiendo una gran cantidad de detalles innecesarios de los modelos.

+ +

Toda la configuración requerida para incluir la aplicación admin en tu sitio Web fue hecha automaticamente cuando  creaste el esqueleto del proyecto (para información sobre dependencias reales necesarias, vea los documentos de Django aquí). Como resultado, todo lo que  debes hacer para agregar tus modelos a la aplicación admin  es  registrarlos. Al final de este artículo entregaremos una breve demostración sobre como puedes configurar aún más el área de administración para mejorar la visualización de nuestros modelos de datos.

+ +

Después de registrar los modelos te mostraremos como crear un nuevo "administrador", iniciar sesión en el sitio, y crear algunos libros, autores, instancias de libros, y géneros. Esto será útil para probar las vistas y plantillas que empezaremos a crear en el siguiente tutorial.

+ +

Registrando los modelos 

+ +

Primero,  abre admin.py en la aplicación catálogo (/locallibrary/catalog/admin.py). Actualmente se ve como esto — notar que ya importa django.contrib.admin:

+ +
from django.contrib import admin
+
+# Register your models here.
+
+ +

Registra los modelos copiando el texto siguiente al final del archivo. Este simple código esta importando los modelos y después llama a  admin.site.register para registrar a cada uno de ellos.

+ +
from .models import Author, Genre, Book, BookInstance
+
+admin.site.register(Book)
+admin.site.register(Author)
+admin.site.register(Genre)
+admin.site.register(BookInstance)
+
+ +
Nota: Si tu aceptaste el desafío de crear un modelo que represente el Lenguaje natural de un libro (ver el artículo tutorial de modelos), importalo y registralo también!
+ +

Esta es la forma más simple de registrar un modelo, o modelos, con el sitio. El sitio de administración es altamente personalizable,  y hablaremos más sobre otras formas de registrar tus modelos más abajo.

+ +

Creando un administrador

+ +

Para iniciar sesión en el sitio de administración, necesitamos una cuenta de usuario con estado de Personal habilitado. Para ver y crear registros tambien necesitamos que este usuario tenga permisos para administrar todos nuestros objetos. Puedes crear una cuenta  "administrador" que tenga acceso total al sitio y a todos los permisios necesarios usando manage.py.

+ +

Usa el siguiente comando, en el mismo directorio de manage.py, para crear al administrador. Deberás ingresar un nombre de usuario, dirección email, y una  contraseña fuerte.

+ +
python3 manage.py createsuperuser
+
+ +

Una vez el comando termine un nuevo administrador será agregado a la base de datos. Ahora reinicia el servidor de desarrollo para que podamos probrar el inicio de sesión:

+ +
python3 manage.py runserver
+
+
+ +

Iniciar sesión y usar el sitio

+ +

Para iniciar sesión en el sitio, ve a la URL /admin (e.j. http://127.0.0.1:8000/admin) e ingresa tus credenciales de id usuario y contraseña de administrador (serás redirigido a la página login, y entonces volverás a la URL de /admin después de haber ingresado tus datos).

+ +

Esta parte del sitio muestra todos tus modelos, agrupados por aplicación instalada. Puedes hacer click en un nombre de modelo para ir a una pantalla que lista todos los registros asociados, y además puedes hacer click sobre esos registros para editarlos. También puedes hacer click directamente sobre el vínculo Añadir a continuación de cada modelo para comenzar a crear un registro de ese tipo.

+ +

Admin Site - Home page

+ +

Haz click  sobre el vínculo Añadir a la derecha de Books para crear un nuevo libro, esto mostrará un diálogo parecido al de abajo). Nota como los títulos de cada campo, el tipo de widget usado, y el help_text (si existe) corresponde con el valor que especificaste en el modelo. 

+ +

Ingresa valores para los campos. Puede crear nuevos autores o géneros presionandoel botón + a continuación del campo respectivo ( o seleccionar un valor existente de las listas si ya las tenías creadas). Cuando termines puedes presionar  Grabar, Grabar y añadir otro, o Grabar y continuar editando para guardar el registro.

+ +

Admin Site - Book Add

+ +
+

Nota: En este punto nos gustaría que pasaras algún tiempo añadiendo unos pocos libros, autores, y géneros (ej. Fantasía) a tu aplicación. Asegúrate de que cada autor y género incluye un par de libros diferentes (esto hará tus vistas de lista y detalle más interesantes cuando las implementemos más tarde en la serie de artículos).

+
+ +

Cuando hayas terminado de añadir libros, haz click en el enlace Home en el separador de arriba para regresar a la página principal de administración. Luego haz click en el enlace Books para desplegar la lista actual de libros (o en alguno de los otros enlaces para ver las listas de otros modelos). Ahora que haz añadido unos cuantos libros, la lista debería lucir similar a la captura de pantalla de abajo. Se muestra el título de cada libro; que es el valor devuelto por el método __str__() del modelo Book que especificamos en el artículo anterior.

+ +

Admin Site - List of book objects

+ +

Desde esta lista puedes eliminar libros marcando la casilla de verificación junto al libro que no deseas y seleccionando la acción delete... en la lista de selección Action, y luego presionando el botón Go. Puedes también añadir nuevos libros presionando el botón ADD BOOK.

+ +

Puedes editar un libro haciendo click en su nombre en la lista. La página de edición para un libro, como se muestra abajo, es casi idéntica a la página "Add". Las principales diferencias son el título de la página (Change book) y la adición de los botones Delete, HISTORY y VIEW ON SITE (este último aparece porque definimos el método get_absolute_url() en nuestro modelo).

+ +

Admin Site - Book Edit

+ +

Ahora regresa a la página Home (usando el enlace Home de la barra superior) y observa las listas Author y Genre -- ya deberías tener algunos registros creados de cuando añadiste los nuevos libros, pero puedes crear algunos más.

+ +

Lo que no vas a tener es BookInstances, porque estas no se crean de los libros (si bien puedes crear un Book desde una BookInstance -- esta es la naturaleza de los campos ForeignKey). Regresa a la página Home y presiona el botón Add relacionado para desplegar la pantalla Add book instance, como se muestra abajo. Nota el largo y globalmente único Id, que puede ser usado para identificar inequívocamente una única copia de un libro dentro de la biblioteca.

+ +

Admin Site - BookInstance Add

+ +

Crea algunos de estos registros para cada uno de tus libros. Establece el status en Available para al menos algunos registros y en On loan para otros. Si el status es diferente de Available, especifica también una fecha de Due back (devolución).

+ +

¡Eso es todo! Has aprendido a configurar y usar el sitio de administración. También has creado registros para Book, BookInstance, Genre y Author que podremos usar una vez que creemos nuestras propias views (vistas) y templates (plantillas).

+ +

Configuración avanzada

+ +

Django hace un gran trabajo al crear un sitio de administración básico usando la información de los modelos registrados:

+ + + +

Posteriormente puedes personalizar la interfaz para hacerla incluso más fácil de usar. Algunas de las cosas que puedes hacer son:

+ + + +

En esta sección observaremos unos cuantos cambios que mejorarán la interfaz de nuestra LocalLibrary, incluyendo la adición de más información a las listas de los modelos Book y Author, y mejorando el diseño de sus vistas de edición. No cambiaremos la presentación de los modelos Language y Genre debido a que solo tienen un campo cada uno, ¡por lo que no hay ningún beneficio real de hacerlo!

+ +

Puedes encontrar una referencia completa de todas las opciones de personalización del sitio de administración en The Django Admin site (Django Docs).

+ +

Registrar una clase ModelAdmin

+ +

Para cambiar la forma en la que un modelo se despliega en la interfaz de administración debes definir una clase ModelAdmin (que describe el diseño) y registrarla con el modelo.

+ +

Comencemos con el modelo Author. Abre admin.py en la aplicación catalog (/locallibrary/catalog/admin.py). Comenta tu registro original para el modelo Author (colocando el prefijo # en la línea):

+ +
# admin.site.register(Author)
+ +

Ahora añade una nueva clase AuthorAdmin y regístrala como se muestra abajo.

+ +
# Define the admin class
+class AuthorAdmin(admin.ModelAdmin):
+    pass
+
+# Register the admin class with the associated model
+admin.site.register(Author, AuthorAdmin)
+
+ +

Ahora añadiremos clases ModelAdmin para Book, y BookInstance. De nuevo, debemos comentar nuestros registros originales:

+ +
#admin.site.register(Book)
+#admin.site.register(BookInstance)
+ +

Ahora, para crear y registar los nuevos modelos usaremos, para propósitos de esta demostración, la expresión @register para registrar los modelos (hace exactamente lo mismo que admin.site.register()):

+ +
# Register the Admin classes for Book using the decorator
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    pass
+
+# Register the Admin classes for BookInstance using the decorator
+
+@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    pass
+
+ +

Al momento todas nuestras clases de administración estás vacías (observa "pass"), así que el comportamiento de administración ¡no cambiará! Ahora podemos extenderlas para definir nuestro comportamiento de administración específico para cada modelo.

+ +

Configurar las vistas de lista

+ +

La LocalLibrary actualmente lista todos los autores usando el nombre generado por el método __str__() del modelo. Esto funciona bien cuando solo tienes unos pocos autores, pero una vez que tienes muchos puedes terminar teniendo duplicados. Para diferenciarlos, o simplemente para mostrar información más interesante sobre cada autor, puedes usar list_display para añadir otros campos a la vista.

+ +

Reemplaza tu clase AuthorAdmin con el código de abajo. Los nombres de campos a ser desplegados en la lista están declarados en una tupla en el orden requerido, como se muestra (estos son los mismos nombres especificados en tu modelo original).

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+
+ +

Recarga el sitio y navega hacia la lista de autores. Ahora deberían desplegarse los campos de arriba, así:

+ +

Admin Site - Improved Author List

+ +

Para nuestro modelo Book desplegaremos adicionalmente el author y genre. El author es un campo de relación tipo ForeignKey (uno a uno), y por tanto estará representado por el valor __str__() del registro asociado. Reemplaza la clase BookAdmin con la versión de abajo.

+ +
class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+ +

Desafortunadamente, no podemos especificar directamente el campo genre en list_display porque es un campo ManyToManyField (Django previene esto porque habría un alto "costo" de acceso a base de datos si lo hiciera). En lugar de eso, definiremos una función display_genre para obtener la información como una cadena (esta es la función que hemos llamado arriba; la definiremos más abajo).

+ +
+

Nota: Obtener el genre podría no ser una buena idea aquí, debido al "costo" de la operación en la base de datos. Te mostramos cómo hacerlo porque llamar funciones desde tus modelos puede ser muy útil por otras razones -- por ejemplo para añadir un enlace Delete junto a cada ítem en la lista.

+
+ +

Añade el siguiente código en tu modelo Book (models.py). Esto crea una cadena con los tres primeros valores del campo genre (si existen) y crea una short_description (descripción corta) que puede ser usada en el sitio de administración por este método.

+ +
    def display_genre(self):
+        """
+        Creates a string for the Genre. This is required to display genre in Admin.
+        """
+        return ', '.join([ genre.name for genre in self.genre.all()[:3] ])
+    display_genre.short_description = 'Genre'
+
+ +

Después de guardar el modelo y actualizar admin, recarga el sitio y ve a la página de lista de Books (libros), deberías ver una lista de libros como la de abajo:

+ +

Admin Site - Improved Book List

+ +

El modelo Genre (y el modelo Language, si lo definiste) tiene un solo campo, por lo que no tiene sentido crear un modelo adicional para el mismo para desplegar campos adicionales.

+ +
+

Nota: Vale la pena actualizar el modelo BookInstance para mostrar al menos el estado y fecha de devolución esperada. ¡Lo hemos añadido como un reto al final de este artículo!

+
+ +

Añadir filtros de lista

+ +

Una vez que tienes muchos ítems en una lista, puede ser útil filtrar los ítems que se despliegan. Esto se hace listando campos en el atributo list_filter. Reemplaza tu clase BookInstanceAdmin actual con el fragmento de código de abajo.

+ +
class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+ +

La vista de lista incluirá ahora un cuadro de filtrado a la derecha. Nota como puedes elegir fechas y estados para filtrar los valores:

+ +

Admin Site - BookInstance List Filters

+ +

Organizar el diseño de vista detallada

+ +

Por defecto, las vistas detalladas organizan todos los campos verticalmente, en su órden de declaración en el modelo. Puedes cambiar el orden de declaración, qué campos se despliegan (o excluyen), si se usa secciones para organizar la información, si los campos se despliegan en horizontal o vertical, e incluso qué controles de edición se usan en los formularios de administración.

+ +
+

Nota: Los modelos de la LocalLibrary son relativamente simples, por lo que no tenemos una gran necesidad de cambiar el diseño; sin embargo haremos algunos cambios solo para mostrarte cómo.

+
+ +

Controlando qué campos son desplegados y ordenados

+ +

Actualiza tu clase AuthorAdmin para añadir la línea fields, como se muestra abajo (en negrita):

+ +
class AuthorAdmin(admin.ModelAdmin):
+    list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
+    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]
+
+ +

El atributo fields lista solo los campos que se van a desplegar en el formulario, en orden. Los campos se despliegan en vertical por defecto, pero se desplegarán en horizontal si los agrupas en una tupla (como se muestra en los campos "date" arriba).

+ +

Reinicia tu aplicación y ve a la vista de detalle de autor -- ahora debería aparecer como se muestra abajo:

+ +

Admin Site - Improved Author Detail

+ +
+

Nota: Puedes también usar el atributo exclude para declarar una lista de atributos que se excluirán del formulario (todos los demás atributos en el modelo se desplegarán).

+
+ +

Seccionando la vista de detalle

+ +

Puedes añadir "secciones" para agrupar información relacionada del modelo dentro del formulario de detalle, usando el atributo fieldsets.

+ +

En el modelo BookInstance tenemos información relacionada a cuál es el libro (ej. name, imprint e id) y a cuándo estará disponible (status, due_back). Podemos configurarlas en diferentes secciones añadiendo el texto en negrita a nuestra clase BookInstanceAdmin.

+ +
@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book', 'imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back')
+        }),
+    )
+ +

Cada sección tiene su propio título (o None, si no quieres un título) y una tupla de campos asociada en un diccionario -- el formato es complicado de describir pero bastante fácil de entender si observas el fragmento de código que se encuentra justo arriba.

+ +

Reinicia y navega a una vista de instancia de libro (book instance); el formulario debería aparecer como se muestra abajo:

+ +

Admin Site - Improved BookInstance Detail with sections

+ +

Edición en cadena de registros asociados

+ +

A veces puede tener sentido el añadir registros asociados al mismo tiempo. Por ejemplo, puede tener sentido el tener información tanto de un libro como de las copias específicas que has adquirido del mismo, en la misma página de detalle.

+ +

Puedes hacerlo declarando inlines, de tipo TabularInline (diseño horizontal) o StackedInline (diseño vertical, tal como el diseño de modelo por defecto). Puedes añadir la información de BookInstance dentro de nuestro detalle de Book añadiendo las líneas de abajo en negrita cerca de tu BookAdmin:

+ +
class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance
+
+@admin.register(Book)
+class BookAdmin(admin.ModelAdmin):
+    list_display = ('title', 'author', 'display_genre')
+    inlines = [BooksInstanceInline]
+
+ +

Prueba recargando tu aplicación y observando la vista para un libro -- ahora deberías ver al final las instancias relacionadas a este libro (inmediatamente debajo de los campos de género del libro):

+ +

Admin Site - Book with Inlines

+ +

En este caso, todo lo que hemos hecho es declarar nuestra clase encadenada tabular, que simplemente añade todos los campos del modelo encadenado. Puedes especificar toda clase de información adicional para el diseño incluyendo los campos a mostrar, su órden, si son solo de lectura o no, etc. (ve TabularInline para más información).

+ +
+

Nota: ¡hay algunas lamentables limitaciones a esta funcionalidad! En la captura de pantalla de arriba tenemos tres instancias del libro existentes, seguidas de tres lugares para nuevas instancias del libro (¡que se ven muy similares!). Sería mejor NO tener instancias extras por defecto del libro y simplemente añadirlas mediante el enlace Add another Book instance, o poder simplemente listar las BookInstances como enlaces no legibles desde aquí. La primera opción puede hacerse estableciendo el atributo extra a 0 en el modelo BookInstanceInline, inténtalo tú mismo.

+
+ +

Rétate a tí mismo

+ +

Hemos aprendido mucho en esta sección, así que es hora de que intentes algunas cosas.

+ +
    +
  1. Para la vista de lista de BookInstance, añade código para desplegar el libro, estado, fecha de devolución e id (en lugar del texto por defecto de __str__()).
    2. +
  2. Añade una lista encadenada de ítems Book (libros) a la vista detallada de Author usando el mismo método que usamos para Book/BookInstance.
    3. +
+ + + +

Resumen

+ +

¡Eso es todo! Ahora has aprendido cómo configurar el sito de administración tanto en su forma más simple como la mejorada, cómo crear un super usuario, y cómo navegar en el sitio de administración y ver, borrar y actualizar registros. Durante el proceso has creado un grupo de libros, instancias de libros, géneros y autores que seremos capaces de listar y desplegar una vez que creemos nuestras propias vistas y plantillas.

+ +

Siguientes lecturas

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}

+ +

 

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/authentication/index.html b/files/es/learn/server-side/django/authentication/index.html new file mode 100644 index 0000000000..af07915ad9 --- /dev/null +++ b/files/es/learn/server-side/django/authentication/index.html @@ -0,0 +1,714 @@ +--- +title: 'Tutorial de Django Parte 8: Autenticación y permisos de Usuario' +slug: Learn/Server-side/Django/Authentication +tags: + - Aprender + - Artículo + - Autenticacion de Django + - Autenticación + - Principiante + - Python + - Sesiones + - Tutorial + - django autenticación + - permisos +translation_of: Learn/Server-side/Django/Authentication +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}
+ +

En este tutorial mostraremos cómo permitir a los usuarios iniciar sesión en tu sitio con sus propias cuentas, y cómo controlar lo que pueden hacer basándose en si han iniciado sesión o no y sus permisos. Como parte de esta demostración extenderemos el sitio web de la BibliotecaLocal, añadiendo páginas de inicio y cierre de sesión, y páginas específicas de usuarios y personal de la biblioteca para ver libros que han sido prestados.

+ + + + + + + + + + + + +
Prerequisitos:Completa todos los temas del tutorial anterior, incluyendo: Django Tutorial Part 7: Sessions framework.
Objetivo:Comprender como configurar y usar la autenticación de usuario y los permisos.
+ +

Introducción

+ +

Django proporciona un sistema de autenticación y autorización ("permisos"), construido sobre el framework de sesión discutido en el tutorial anterior, que le permite verificar credenciales de usuario y definir que acciones puede realizar cada usuario. El framework incluye modelos para Users y Groups (una forma genérica de aplicar permisos a más de un usuario a la vez), permisos/indicadores (permissions/flags) que designan si un usuario puede realizar una tarea, formularios y vistas para iniciar sesión en los usuarios, y view tools para restringir el contenido.

+ +
+

Nota: Según Django el sistema de autenticación pretende ser muy genérico, y, por lo tanto,  no proporciona algunas características proporcinadas en otros sistemas de autenticación web. Las soluciones para algunos problemas están disponibles como paquetes de terceros. Por ejemplo, regulación de intentos de inicio de sesión y autenticación frente a terceros (por ej. OAuth).

+
+ +

En este tutorial mostraremos cómo habilitar la autenticación de usuarios en el sitio web BibliotecaLocal, crear tus propias páginas de login y logout, añadir permisos a tus modelos, y controlar el acceso a las páginas. Usaremos la autenticación/permisos para desplegar listas de libros que han sido solicitados tanto por los usuarios como por los bibliotecarios.

+ +

El sistema de autenticación es muy flexible, y puedes crear tus URLs, formularios, vistas y plantillas desde el inicio si quieres, simplemente llamando a la API provista para loguear al usuario. Sin embargo, en este artículo vamos a usar las vistas y formularios de autenticación "en stock" de Django para nuestras páginas de login y logout. De todos modos necesitaremos crear algunas plantillas, pero eso es bastante fácil.

+ +

Te mostraremos también cómo crear permisos, y revisar el estado de login y permisos tanto en vistas como en plantillas.

+ +

Habilitanto la autenticación

+ +

La autenticación fue habilitada automáticamente cuando creamos el sitio web esqueleto (en el tutorial 2), así que no necesitas hacer nada más en este punto.

+ +
+

Nota: Toda la configuración necesaria fue hecha por nosotros cuando creamos la aplicación usando el comando django-admin startproject. Las tablas de base de datos para los usuarios y permisos de modelo fueron creados la primera vez que ejecutamos python manage.py migrate.

+
+ +

La configuración se establece en las secciones INSTALLED_APPS y MIDDLEWARE del archivo del proyecto (locallibrary/locallibrary/settings.py), como se muestra abajo:

+ +
INSTALLED_APPS = [
+    ...
+    'django.contrib.auth',  #Core authentication framework and its default models.
+    'django.contrib.contenttypes',  #Django content type system (allows permissions to be associated with models).
+    ....
+
+MIDDLEWARE = [
+    ...
+    'django.contrib.sessions.middleware.SessionMiddleware',  #Manages sessions across requests
+    ...
+    'django.contrib.auth.middleware.AuthenticationMiddleware',  #Associates users with requests using sessions.
+    ....
+
+ +

Creando usuarios y grupos

+ +

Ya creaste tu primer usuario cuando revisamos el sitio de administración de Django en el tutorial 4 (fue un superusuario, creado con el comando python manage.py createsuperuser). Nuestro superusuario ya está autenticado y tiene todos los permisos, así que necesitaremos crear un usuario de prueba que represente un usuario normal del sitio. Estaremos usando el sitio de administración para crear los grupos y logins de nuestro sitio web BibliotecaLocal, ya que es una de las formas más rápidas de hacerlo.

+ +
+

Nota: Puedes también crear usuarios mediante programación, como se muestra abajo. Tendrías que hacerlo, por ejemplo, si estuvieras desarrollando una interfaz para permitir a los usuarios crear sus propios logins (no deberías dar a los usuarios acceso al sito de administración).

+ +
from django.contrib.auth.models import User
+
+# Create user and save to the database
+user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
+
+# Update fields and then save again
+user.first_name = 'John'
+user.last_name = 'Citizen'
+user.save()
+
+
+
+ +

A continuación, primero crearemos un grupo y luego un usuario. Aunque no tengamos ningún permiso aún para otorgar a los miembros de nuestra biblioteca, si lo necesitamos para más adelante, será mucho más fácil otorgarlo una vez al grupo que individualmente a cada miembro.

+ +

Inicia el servidor de desarrollo y navega hasta el sitio de administracion en tu navegador web local (http://127.0.0.1:8000/admin/). Ingresa al sitio usando las credenciales de la cuenta de tu superusuario. El nivel superior del sitio de administracion "Admin site" muestra todos tus modelos, ordenados por la aplicacion por defecto de Django "django application". Desde la seccion de Autenticación y Autorización puedes dar click en los enlaces de Usuarios "Users" y Grupos "Groups" para ver todos sus registros existentes.

+ +

Admin site - add groups or users

+ +

Primero vamos a crear un nuevo grupo para los miembros de nuestra biblioteca.

+ +
    +
  1. Da click en el boton Add "Añadir" (Enseguida de Group) para crear un nuevo grupo ; ingresa el Nombre "Name" para el grupo de "Library Members".Admin site - add group
    2. +
  2. No necesitamos de ningun permiso para el grupo , entonces solo presiona Save (Seras redirigido a una lista de los grupos disponibles).
    3. +
+ +

Ahora vamos a crear un usuario:

+ +
    +
  1. Navega de vuelta a la pagina de inicio "home" del sitio de administracion "Admin site".
    2. +
  2. Da click en el boton Add "Añadir" que queda enseguida de Users "Usuarios" para abrir el cuadro de dialogo de Usuario Add "Añadir usuario".Admin site - add user pt1
    3. +
  3. Ingresa un Nombre de Usuario "Username", Contraseña "Password" y Confirmacion de Contraseña "Password confirmation" apropiado para tu usuario de prueba.
    4. +
  4. Presiona Save "Guardar" para crear el usuario.
    +
    + El sitio de administrador creara el nuevo usuario e inmediatamente te llevara a la pantalla de Change user  "Cambios del usuario" donde puedes cambiar tu nombre de usuario "Username" y agregar informacion para los campos opcionales del modelo de Usuario "User". Estos campos incluyen el primer nombre "first name", el apellido "last name", la direcion de correo electronico "email adress", los estados de los usuarios y sus permisos "users status and permissions" (solo el indicador Active "Activo" deberia ser activado). Mas abajo puedes especificar los grupos y permisos del usuario, y ver datos importantes relacionados a el usuario (ej: la fecha en que se agrego y la fecha del ultimo inicio de sesion)
    5. +
  5. Admin site - add user pt2
    6. +
  6. En la seccion Groups "Grupos", selecciona el grupo Library Member de  la lista de grupos disponibles, y entonces presiona la la flecha apuntando a la derecha entre las dos cajas para moverlo dentro de la caja de Chosen groups "Grupos seleccionados".Admin site - add user to group
    7. +
  7. Aqui no necesitamos hacer nada adicional, entonces de nuevo solo seleciona SAVE "Guardar", para ir a la lista de usuarios.
    8. +
+ +

¡Esta hecho! Ahora tienes la cuenta de un miembro normal de la libreria, el cual estara disponible para ser usado en tus pruebas (una vez que hayamos implementado las paginas para permitirles iniciar sesion).

+ +
+

Nota: Deberias intentar crear otro usuario miembro de library.  Al igual que un grupo para los bibliotecarios "Librarians",  ¡y agregar usuarios a este tambien! 

+
+ +

Configurando nuestras vistas de autenticación

+ +

Django provee todo lo necesario para crear las páginas de autenticación para manejar inicio y cierre de sesión y gestión de contraseñas "fuera de la caja". Esto incluye un mapeador de URL, vistas "views" y formularios "forms", pero no incluye las plantillas "templates", ¡Tenemos que crear las nuestras!

+ +

En esta sección, mostramos cómo integrar el sistema por defecto en el sitio web de BibliotecaLocal y crear plantillas "templates". Las incluiremos en las URLs principales del proyecto.

+ +
+

Nota: No tienes que usar nada de este código, pero es probable que quieras hacerlo porque hace las cosas mucho más fáciles. Seguramente necesitará cambiar el código de manejo de formularios si cambia su modelo de usuario (¡un tema avanzado!) pero aun asi, todavía podrá usar las funciones de vista de stock.

+
+ +
+

Nota: En este caso podríamos razonablemente poner las páginas de autenticación, incluyendo las direcciones URL y plantillas, dentro de nuestra aplicación de catálogo. Sin embargo, si tuviéramos varias aplicaciones, sería mejor separar este comportamiento de inicio de sesión compartido y tenerlo disponible en todo el sitio, ¡así que eso es lo que hemos mostrado aquí!

+
+ +

URL's del proyecto

+ +

Añade el siguiente codigo al final del archivo url.py del proyecto (locallibrary/locallibrary/urls.py) :

+ +
#Add Django site authentication urls (for login, logout, password management)
+urlpatterns += [
+    path('accounts/', include('django.contrib.auth.urls')),
+]
+
+ +

Navega hasta la URL http://127.0.0.1:8000/accounts/ (¡Nota la barra inclinada hacia adelante!) y Django mostrara un error, diciendo que no puede encontrar esta URL, y listando todas las URL's que ha intentado. Aqui puedes ver las URL's que funcionaran, por ejemplo:

+ +
+

Nota: Usando el metodo anterior, añade las siguientes URL's con sus respectivos nombres entre corchetes, los cuales pueden ser usados para revertir "reverse" el mapeado de las URL's.  No necesitas implementar nada mas, el anterior mapeado de URL's asigna automaticamente las mencionadas URL's.

+
+ +
+
^accounts/login/$ [name='login']
+^accounts/logout/$ [name='logout']
+^accounts/password_change/$ [name='password_change']
+^accounts/password_change/done/$ [name='password_change_done']
+^accounts/password_reset/$ [name='password_reset']
+^accounts/password_reset/done/$ [name='password_reset_done']
+^accounts/reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$ [name='password_reset_confirm']
+^accounts/reset/done/$ [name='password_reset_complete']
+
+ +

Ahora intenta navegar a la URL de inicio de sesion "login"(http://127.0.0.1:8000/accounts/login/). Esto fallara de nuevo, pero ahora con un error diciendote que no encuentra la plantilla "template" requerida (registration/login.html) por el buscador de directorios de plantillas . Veras el las siguientes lineas en la seccion amarilla en la parte superior:

+ +
Exception Type:    TemplateDoesNotExist
+Exception Value:    registration/login.html
+ +

El siguiente paso es crear un directorio de registro en la busqueda de directorios y entonces agregar el archivo login.html.

+ +

Directorio de plantilla "template"

+ +

Las URL's (y vistas "views" implicitas) que recien hemos añadido esperan encontrar sus plantillas "templates" asociadas en un directorio "/registration/" en algún lugar de la ruta de búsqueda de plantillas

+ +

Para este sitio pondremos nuestra pagina HTML en el directorio "templates/registration/". Este directorio debera estar en el directorio raiz de tu proyecto, es decir, el mismo directorio de las carpetas donde estan catalog y locallibrary. Por favor ahora crea las carpetas "templates" y dentro de esta "registration".

+ +
+

Note: Your folder structure should now look like the below:
+ locallibrary (django project folder)
+    |_catalog
+    |_locallibrary
+    |_templates (new)
+                 |_registration

+
+ +

Para hacer estos directorios visibles al cargador de plantillas (es decir introducir este directorio en el buscador de directorios de plantillas) abre el archivo de configuracion del proyecto setting.py (/locallibrary/locallibrary/settings.py), y actualiza la seccion de TEMPLATES con la linea 'DIRS' como se muestra a continuacion.

+ +
TEMPLATES = [
+    {
+        ...
+        'DIRS': ['./templates',],
+        'APP_DIRS': True,
+        ...
+
+ +

Plantilla inicio de sesión "login"

+ +
+

Importante: Las plantillas de autenticacion provista en este articulo son versiones muy basicas y ligeramete modificadas de las plantillas de inicio de sesion de demostracion de Django. ¡Necesitas personalizarlos para tus propios usos!

+
+ +

Crea un nuevo archivo HTML llamado /locallibrary/templates/registration/login.html. suministrado en el siguiente contenido :

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+{% if form.errors %}
+<p>Your username and password didn't match. Please try again.</p>
+{% endif %}
+
+{% if next %}
+    {% if user.is_authenticated %}
+    <p>Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.</p>
+    {% else %}
+    <p>Please login to see this page.</p>
+    {% endif %}
+{% endif %}
+
+<form method="post" action="{% url 'login' %}">
+{% csrf_token %}
+
+<div>
+  <td>\{{ form.username.label_tag }}</td>
+  <td>\{{ form.username }}</td>
+</div>
+<div>
+  <td>\{{ form.password.label_tag }}</td>
+  <td>\{{ form.password }}</td>
+</div>
+
+<div>
+  <input type="submit" value="login" />
+  <input type="hidden" name="next" value="\{{ next }}" />
+</div>
+</form>
+
+{# Assumes you setup the password_reset view in your URLconf #}
+<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
+
+{% endblock %}
+ +

Estas plantillas comparten algunas similitudes con algunas que hemos visto antes — extiende nuestra plantilla base y sobreescribe el bloque content. El resto del código es un código de manejo de formularios bastante estándar, que trataremos en un tutorial posterior. Todo lo que necesitas saber por ahora es que esto mostrará un formulario en el que puedes introducir tu usuario y contraseña, y que si introduces valores inválidos se te pedirá que ingreses los valores correctos cuando la página refresque.

+ +

Navega de vuelta a la página de inicio sesión (http://127.0.0.1:8000/accounts/login/) una vez que hayas guardado tu plantilla, y deberías ver algo como esto:

+ +

Library login page v1

+ +

Si intentas iniciar sesión tendrá éxito y serás redirigido a otra página (por defecto será http://127.0.0.1:8000/accounts/profile/). El problema aquí es que, por defecto, Django espera que después de iniciar sesión seas llevado a una página de perfil (que podrá ser el caso o no). Como no has definido esta página todavía, ¡obtendrás otro error!

+ +

Abre la configuración del proyecto (/locallibrary/locallibrary/settings.py) y añade al final el texto de abajo. Ahora cuando inicies sesión deberías ser redirigido a la página de inicio por defecto.

+ +
# Redirect to home URL after login (Default redirects to /accounts/profile/)
+LOGIN_REDIRECT_URL = '/'
+
+ +

Plantilla cierre de sesión "logout"

+ +

Si navegas a la url de cierre de sesión (http://127.0.0.1:8000/accounts/logout/) verás un extraño comportamiento — tu usuario cerrará la sesión, pero serás llevado a la página de cierre de sesión del Administrador. Eso no es lo que quieres, aunque sólo sea porque el enlace de inicio de sesión de esa página te lleva a la pantalla del inicio de sesión del Administrador (y eso sólo está disponible a los usuarios que tienen el permiso is_staff).

+ +

Crea y abre el fichero /locallibrary/templates/registration/logged_out.html. Copia en él el siguiente texto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+<p>Logged out!</p>
+
+<a href="{% url 'login'%}">Click here to login again.</a>
+{% endblock %}
+ +

Esta plantilla es muy simple. Tan sólo muestra un mensaje informándote que has cerrado sesión, y provee un enlace que puedes pulsar para volver a la página de inicio de sesión. Si vas a la url de cierre de sesión otra vez, deberías ver esta página:

+ +

Library logout page v1

+ +

Plantillas de reinicio de contraseña "Password reset"

+ +

El sistema de reinicio de contraseña usa el correo electrónico para enviar al usuario un enlace de reinicio. Necesitas crear formularios para obtener la dirección de correo electrónico del usuario, enviar el correo, permitirle introducir una nueva contraseña y tenerla en cuenta cuando todo el proceso se haya completado.

+ +

Las siguientes plantillas pueden usarse como un punto de partida.

+ +

Formulario de reinicio de contraseña

+ +

Este es el formulario para obtener la dirección del correo electrónico del usuario (para enviar el correo de reinicio de contraseña). Crea /locallibrary/templates/registration/password_reset_form.html, y establece el siguiente contenido:

+ +
{% extends "base_generic.html" %}
+{% block content %}
+
+<form action="" method="post">{% csrf_token %}
+    {% if form.email.errors %} \{{ form.email.errors }} {% endif %}
+        <p>\{{ form.email }}</p>
+    <input type="submit" class="btn btn-default btn-lg" value="Reset password" />
+</form>
+
+{% endblock %}
+
+ +

Reinicio de contraseña hecho

+ +

Este formulario es mostrado después de que tu dirección de correo electrónico haya sido recogida. Crea /locallibrary/templates/registration/password_reset_done.html, y establece el siguiente contenido:

+ +
{% extends "base_generic.html" %}
+{% block content %}
+<p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p>
+{% endblock %}
+
+ +

Correo electrónico de reinicio de contraseña

+ +

Esta plantilla suministra el texto HTML del correo electrónico, y contiene el enlace de reseteo que enviaremos a los usuarios. Crea /locallibrary/templates/registration/password_reset_email.html, y establece el siguiente contenido:

+ +
Someone asked for password reset for email \{{ email }}. Follow the link below:
+\{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
+
+ +

Confirmación de reinicio de contraseña

+ +

Esta página es donde introduces una nueva contraseña después de pinchar el enlace en el correo electrónico de reinicio de contraseña. Crea /locallibrary/templates/registration/password_reset_confirm.html, y establece el siguiente contenido:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+    {% if validlink %}
+        <p>Please enter (and confirm) your new password.</p>
+        <form action="" method="post">
+            <div style="display:none">
+                <input type="hidden" value="\{{ csrf_token }}" name="csrfmiddlewaretoken">
+            </div>
+            <table>
+                <tr>
+                    <td>\{{ form.new_password1.errors }}
+                        <label for="id_new_password1">New password:</label></td>
+                    <td>\{{ form.new_password1 }}</td>
+                </tr>
+                <tr>
+                    <td>\{{ form.new_password2.errors }}
+                        <label for="id_new_password2">Confirm password:</label></td>
+                    <td>\{{ form.new_password2 }}</td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><input type="submit" value="Change my password" /></td>
+                </tr>
+            </table>
+        </form>
+    {% else %}
+        <h1>Password reset failed</h1>
+        <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p>
+    {% endif %}
+
+{% endblock %}
+
+ +

Reinicio de contraseña completado

+ +

Este es el último paso de la plantilla de reinicio de contraseña, que es mostrada para notificarte cuando el reinicio de contraseña ha tenido éxito. Crea /locallibrary/templates/registration/password_reset_complete.html, y establece el siguiente contenido:

+ +
{% extends "base_generic.html" %}
+{% block content %}
+
+<h1>The password has been changed!</h1>
+<p><a href="{% url 'login' %}">log in again?</a></p>
+
+{% endblock %}
+ +

Probando las nuevas páginas de autenticación

+ +

Ahora que has añadido la configuración URL y creado todas estas plantillas, ¡las páginas de autenticación ahora deberían funcionar!

+ +

Puedes probar las nuevas páginas de autenticación intentando iniciar sesión y entonces cerrar sesión con tu cuenta de super administrador usando estas URLs:

+ + + +

Serás capaz de probar la funcionalidad de reinicio de contraseña desde el enlace de la página de inicio de sesión. ¡Ten cuidado con el hecho de que Django solamente enviará correos de reinicio a las direcciones (usuarios) que ya están almacenadas en la base de datos!

+ +
+

Nota: El sistema de reinicio de contraseña requiere que tu sitio web soporte envío de correo, que está más allá del ámbito de este artículo, por lo que esta parte no funcionará todavía. Para permitir el testeo, establece la siguiente línea al final de tu fichero settings.py. Esto registra en la consola cualquier envío de correo electrónico (y así puedes copiar el enlace de reinicio de contraseña desde dicha consola).

+ +
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+
+ +

Para más información, ver Sending email (Django docs).

+
+ +

Probando contra usuarios autenticados

+ +

Esta sección mira a lo que podemos hacer para controlar selectivamente el contenido que el usuario ve basado en si ha iniciado sesión o no.

+ +

Probando en plantillas

+ +

Puedes obtener información en las plantillas sobre el usuario que actualmente ha iniciado sesión con la variable de plantillas \{{ user }} (esto se añade por defecto al contexto de la plantilla cuando configuras el proyecto como hicimos en nuestro esqueleto).

+ +

Es típico que primero pruebes con la variable de plantilla \{{ user.is_authenticated }} para determinar si el usuario puede ver el contenido específico. Para demostrar esto, lo siguiente que haremos será actualizar nuestra barra lateral "sidebar" para mostrar un enlace de inicio de sesión "Login" si el usuario no ha iniciado sesión, y un cierre de sesión "Logout" en el caso de que sí la haya iniciado.

+ +

Abre la plantilla base (/locallibrary/catalog/templates/base_generic.html) y copia el siguiente texto en el bloque sidebar, justamente antes de la etiqueta de plantilla endblock .

+ +
  <ul class="sidebar-nav">
+
+    ...
+
+   {% if user.is_authenticated %}
+     <li>User: \{{ user.get_username }}</li>
+     <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
+   {% else %}
+     <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
+   {% endif %} 
+  </ul>
+ +

Como puedes ver, usamos las etiquetas de plantilla if-else-endif para condicionar el texto mostrado basado en si \{{ user.is_authenticated }} es cierto o no. Si el usuario está autenticado, sabemos que tenemos un usuario válido, por lo que llamamos a \{{ user.get_username }} para mostrar su nombre.

+ +

Creamos los enlaces URLs del inicio y del cierre de sesión usando la etiqueta de plantilla url y los nombres de las respectivas configuraciones de las URL. Nótese también cómo hemos añadido ?next=\{{request.path}} al final de las URLs. Lo que esto hace es añadir el párametro URL next que contiene la dirección (URL) de la página actual, al final de la URL enlazada. Después de que el usuario haya iniciado o cerrado sesión con éxito, las vistas usarán el valor de este "next" para redirigir al usuario de vuelta a la página donde pincharon primeramente el enlace de inicio/cierre de sesión.

+ +
+

Nota: ¡Pruébalo! Si estás en la página de inicio y pinchas en la barra lateral "sidebar", después de que la operación se complete deberías acabar de vuelta en la misma página.

+
+ +

Probando en vistas

+ +

Si estás usando vistas basadas en funciones, la forma más facil para restringir el acceso a tus funciones es aplicar el decorador login_required a tu función de vista, como se muestra más abajo. Si el usuario ha iniciado sesión entonces tu código de vista se ejecutará como normalmente lo hace. Si el usuario no ha iniciado sesión, se redirigirá a la URL de inicio de sesión definida en tu configuración de proyecto (settings.LOGIN_URL), pasando el directorio absoluto actual como el parámetro URL next. Si el usuario tiene éxito en el inicio de sesión entonces será devuelto a esta página, pero esta vez autenticado.

+ +
from django.contrib.auth.decorators import login_required
+
+@login_required
+def my_view(request):
+    ...
+ +
+

Nota: ¡Tú puedes hacer el mismo tipo de cosas manualmente probando con request.user.is_authenticated, pero el decorador es mucho más conveniente!

+
+ +

De manera similar, la forma más fácil de restringir el acceso a los usuarios que han iniciado sesión en tus vistas basadas en clases es extender de LoginRequiredMixin. Necesitas declarar primeramente este mixin en la lista de super clases, antes de la clase de vista principal.

+ +
from django.contrib.auth.mixins import LoginRequiredMixin
+
+class MyView(LoginRequiredMixin, View):
+    ...
+ +

Esto tiene exactamente el mismo comportamiento de redirección que el decorador login_required. También puedes especificar una localización alternativa para redirigir al usuario si no están autenticados (login_url), y un nombre de parámetro URL en lugar de "next" para insertar el directorio absoluto actual (redirect_field_name).

+ +
class MyView(LoginRequiredMixin, View):
+    login_url = '/login/'
+    redirect_field_name = 'redirect_to'
+
+ +

Para detalles adicionales, echa un vistazo a Django docs.

+ +

Ejemplo - listando los libros del usuario actual

+ +

Ahora que sabemos cómo restringir una página a un usuario concreto, vamos a crear una vista de los libros que el usuario tiene prestados actualmente.

+ +

Desafortunadamente, ¡todavía no tenemos una forma de pedir prestados los libros a los usuarios! Por eso, antes de que podamos crear la lista de libros vamos primeramente a extender el modelo BookInstance para dar soporte al concepto de pedir prestado y usar la aplicación del Administrador Djando para alquilar un número de libros a nuestro usuario de prueba.

+ +

Modelos

+ +

Primero vamos a hacer posible para los usuarios tener una BookInstance en alquiler (ya tenemos un status y una fecha due_back, pero no tenemos todavía una asociación entre este modelo y un Usuario). Crearemos uno usando un campo ForeignKey (uno-a-muchos). También necesitaremos un mecanismo sencillo para probar si un libro alquilado está atrasado.

+ +

Abre catalog/models.py, e importa el modelo User de django.contrib.auth.models (añade esto justamente debajo de la anterior línea de importación, arriba del todo del fichero, para que el User esté disponible para el posterior código del que hace uso):

+ +
from django.contrib.auth.models import User
+
+ +

Después añade el campo borrower al modelo BookInstance:

+ +
borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
+
+ +

Ya que estamos aquí, vamos a añadir una propiedad que podamos llamar desde nuestras plantillas para decir si una instancia particular de un libro está atrasada. Mientras que podríamos calcular esto en la misma plantilla, usar una propiedad (property) como se muestra abajo será mucho más eficiente.

+ +
from datetime import date
+
+@property
+def is_overdue(self):
+    if self.due_back and date.today() > self.due_back:
+        return True
+    return False
+ +
+

Nota: Primeramente verificamos si la fecha due_back está vacía antes de realizar una comparación. Un campo vacío due_back provocaría a Django arrojar un error en lugar de mostrar la página: los valores vacíos no son comparables. ¡Esto no es algo que queramos para la experiencia de nuestros usuarios!

+
+ +

Ahora que hemos actualizado nuestros modelos, necesitaremos hacer migraciones actuales en el proyecto y entonces aplicar esas migraciones:

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+
+ +

Administrador

+ +

Ahora abre catalog/admin.py, y añade el campo borrower a la clase BookInstanceAdmin en ambas list_display y fieldsets como se muestra abajo. Esto hará el campo visible en la sección de Administrador, por lo que podemos asignar un User a una BookInstance cuando lo necesitemos.

+ +
@admin.register(BookInstance)
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_display = ('book', 'status', 'borrower', 'due_back', 'id')
+    list_filter = ('status', 'due_back')
+
+    fieldsets = (
+        (None, {
+            'fields': ('book','imprint', 'id')
+        }),
+        ('Availability', {
+            'fields': ('status', 'due_back','borrower')
+        }),
+    )
+ +

Alquilar unos pocos libros

+ +

Ahora que es posible alquilar libros a un usuario específico, ve y alquila un número de registros BookInstance. Establece su campo borrowed a tu usuario de prueba, establece el status "On loan" (en alquiler) y establece fechas de vencimiento tanto en el futuro como en el pasado.

+ +
+

Nota: No escribiremos el proceso, porque ¡ya sabes cómo usar el sitio de Administrador!

+
+ +

Vista en alquiler

+ +

Ahora añadiremos una vista para obtener la lista de todos los libros que han sido alquilados al usuario actual. Usaremos la misma vista de lista genérica basada en clases con la que estamos familiarizada, pero esta vez también importaremos y extenderemos de LoginRequiredMixin, por lo que solamente un usuario que ha iniciado sesión podrá llamar a esta vista. También elegiremos declarar una template_name en lugar de usar la de por defecto, porque quizás acabemos teniendo unas pocas listas diferentes de registros de BookInstance, con diferentes vistas y plantillas.

+ +

Añade lo siguiente a catalog/views.py:

+ +
from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
+    """
+    Generic class-based view listing books on loan to current user.
+    """
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
+ +

Para restringir nuestra consulta a solamente los objetos BookInstance del usuario actual, vamos a reimplementar get_queryset() como se muestra abajo. Nótese que "o" es el código almacenado para "on loan" (en alquiler) y vamos a ordenar por la fecha due_back para que los elementos más antiguos se muestren primero.

+ +

Configuración URL para libros alquilados

+ +

Ahora abre /catalog/urls.py y añade la url url() apuntando a la vista anterior (puedes simplemente copiar el texto de abajo al final del fichero).

+ +
urlpatterns += [
+    url(r'^mybooks/$', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'),
+]
+ +

Plantilla para libros alquilados

+ +

Ahora todo lo que necesitamos hacer para esta página es añadir una plantilla. Primero, creamos el fichero plantilla /catalog/templates/catalog/bookinstance_list_borrowed_user.html y establecemos el siguiente contenido en ella:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+    <h1>Borrowed books</h1>
+
+    {% if bookinstance_list %}
+    <ul>
+
+      {% for bookinst in bookinstance_list %}
+      <li class="{% if bookinst.is_overdue %}text-danger{% endif %}">
+        <a href="{% url 'book-detail' bookinst.book.pk %}">\{{bookinst.book.title}}</a> (\{{ bookinst.due_back }})
+      </li>
+      {% endfor %}
+    </ul>
+
+    {% else %}
+      <p>There are no books borrowed.</p>
+    {% endif %}
+{% endblock %}
+ +

Esta plantilla es muy similar a esas que hemos creado previamente para los objetos Book y Author. La única "cosa" nueva aquí es que comprobamos el método que hemos añadido en el modelo (bookinst.is_overdue) y lo usamos para cambiar el color de los elementos atrasados.

+ +

Cuando el servidor de desarrollo esté en ejecución, deberías ser capaz de ver la lista de los usuarios que han iniciado sesión en tu navegador en http://127.0.0.1:8000/catalog/mybooks/. Prueba esto con tu usuario iniciado en la sesión y cerrado en la sesión (en el segundo caso, deberías ser redirigido a la página de inicio).

+ +

Añadir la lista a la barra lateral

+ +

El último paso es añadir un enlace para esta nueva página en la barra lateral "sidebar". Pondremos esto en la misma sección donde mostramos otra información para el usuario que ha iniciado la sesión.

+ +

Abre la plantilla base (/locallibrary/catalog/templates/base_generic.html) y añade la línea en negrita a la barra lateral como se muestra.

+ +
 <ul class="sidebar-nav">
+   {% if user.is_authenticated %}
+   <li>User: \{{ user.get_username }}</li>
+   <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li>
+   <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
+   {% else %}
+   <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
+   {% endif %}
+ </ul>
+
+ +

¿Cómo se ve?

+ +

Cuando cualquier usuario ha iniciado sesión, verán el enlace My Borrowed (Mis Alquileres) en la barra lateral, y la lista de libros mostrados como se ve abajo (¡el primer libro no tiene fecha de vencimiento, que es un bug que esperamos arreglar en un tutorial posterior!).

+ +

Library - borrowed books by user

+ +

Permisos

+ +

Los permisos están asociados con los modelos, y definen las operaciones que pueden llevarse a cabo en un modelo instanciado por un usuario que tiene el permiso. Por defecto, Django automáticamente da los permisos add, change, and delete (añadir, cambiar y eliminar) a todos los modelos, que permiten a los usuarios con los permisos realizar las acciones asociadas a través del sitio de Administrador. Tú puedes definir tus propios permisos a los modelos y concedérselos a usuarios específicos. También puedes cambiar los permisos asociados con diferentes instancias del mismo modelo.

+ +

Probar permisos en vistas y plantillas es muy similar a probar sobre el estado de autenticación (y, de hecho, probar un permiso también prueba una autenticación).

+ +

Modelos

+ +

La definición de permisos está hecha en la sección del modelo "class Meta", usando el campo permissions. Puedes especificar tantos permisos como necesites en una tupla, cada permiso está definido a sí mismo en una tupla anidada que contiene el nombre del permiso y el valor mostrado del mismo. Por ejemplo, podríamos definir un permiso para permitir a un usuario marcar un libro que ya ha sido devuelto, como se muestra:

+ +
class BookInstance(models.Model):
+    ...
+    class Meta:
+        ...
+        permissions = (("can_mark_returned", "Set book as returned"),)
+ +

Podríamos asignar el permiso a un grupo bibliotecario "Librarian" en el sitio de Administración.

+ +

Abre catalog/models.py, y añade el permiso como se muestra arriba. Necesitarás volver a ejecutar tus migraciones (ejecutar python3 manage.py makemigrations y python3 manage.py migrate) para actualizar la base de datos de forma apropiada.

+ +

Plantillas

+ +

Los permisos del usuario actual están almacenados en una variable de plantilla llamada \{{ perms }}. Puedes comprobar si el usuario actual tiene un permiso particular usando el nombre de variable específico con la "app" asociada en Django — ej. \{{ perms.catalog.can_mark_returned }} será True (cierto) si el usuario tiene el permiso, y False (falso) en otro caso. De forma típica probamos el permiso usando la etiqueta de plantilla {% if %} como se muestra:

+ +
{% if perms.catalog.can_mark_returned %}
+    <!-- We can mark a BookInstance as returned. -->
+    <!-- Perhaps add code to link to a "book return" view here. -->
+{% endif %}
+
+ +

Vistas

+ +

Los permisos pueden ser probados en una vista de función usando el decorador permission_required o en una vista basada en clases usando el PermissionRequiredMixin. El patrón y el comportamiento son los mismos que para la autenticación de inicio de sesión, aunque desde luego podrías razonablemente tener que añadir múltiples permisos.

+ +

Decorador de vista de funciones:

+ +
from django.contrib.auth.decorators import permission_required
+
+@permission_required('catalog.can_mark_returned')
+@permission_required('catalog.can_edit')
+def my_view(request):
+    ...
+ +

"Mixin" de permisos requeridos para vistas basadas en clases:

+ +
from django.contrib.auth.mixins import PermissionRequiredMixin
+
+class MyView(PermissionRequiredMixin, View):
+    permission_required = 'catalog.can_mark_returned'
+    # Or multiple permissions
+    permission_required = ('catalog.can_mark_returned', 'catalog.can_edit')
+    # Note that 'catalog.can_edit' is just an example
+    # the catalog application doesn't have such permission!
+ +

Ejemplo

+ +

Nosotros no actualizaremos la LocalLibrary aquí; ¡quizás en el siguiente tutorial!

+ +

Desafíate a ti mismo

+ +

Anteriormente en este artículo te mostramos cómo crear una página para el usuario actual para listar los libros que había pedido prestado. El desafío ahora es crear una página similar que solamente sea visible para los bibliotecarios, que muestre todos los libros que hayan sido prestados, y que incluya el nombre de cada prestatario.

+ +

Deberías ser capaz de seguir el mismo patrón que el de la otra vista. La principal diferencia es que necesitarás restringir la vista a solamente los bibliotecarios. Podrías hacer esto basándote en si es un miembro de los empleados (decorador de función: staff_member_required, variable de plantilla: user.is_staff) pero nosotros te recomendamos que en su lugar uses el permiso can_mark_returned y PermissionRequiredMixin, como se describe en la sección anterior.

+ +
+

Importante: Recuerda no usar tu súper usuario para pruebas basadas en permisos (la comprobación de permisos siempre devuelve cierto para súper usuarios, ¡incluso si un permiso no ha sido definido todavía!). En su lugar, crea un usuario bibliotecario, y añade entonces la capacidad requerida.

+
+ +

Cuando hayas terminado, tu página debería verse algo parecida a la captura de pantalla de abajo.

+ +

All borrowed books, restricted to librarian

+ + + +

Sumario

+ +

Excelente trabajo — has creado un sitio web para que los miembros de la biblioteca puedan iniciar sesión y ver su propio contenido, y los bibliotecarios (con el permiso correcto) puedan usarlo para ver todos los libros alquilados y sus prestatarios. En este momento estamos todavía simplemente viendo contenido, pero los mismos principios y técnicas son usados cuando empiezas a modificar y añadir datos.

+ +

En nuestro siguiente artículo observaremos cómo puedes usar los formularios de Django para recoger la entrada de datos del usuario, y entonces empezar a modificar algunos de nuestros datos almacenados.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + + +
+
+
diff --git a/files/es/learn/server-side/django/deployment/index.html b/files/es/learn/server-side/django/deployment/index.html new file mode 100644 index 0000000000..ddcb7f5c4e --- /dev/null +++ b/files/es/learn/server-side/django/deployment/index.html @@ -0,0 +1,672 @@ +--- +title: 'Tutorial de Django Parte 11: Desplegando Django a producción' +slug: Learn/Server-side/Django/Deployment +translation_of: Learn/Server-side/Django/Deployment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
+ +

Ahora que has creado (y probado) un fantastico sitio web para la Biblioteca Local, querrás instalarlo en un servidor web público de manera que pueda ser accedido por el personal y los miembros de la biblioteca a través de Internet. Este artículo proporciona una visión general de cómo buscar un host para desplegar tu sitio web y de lo que necesitas hacer para conseguir que tu sitio esté listo en producción.

+ + + + + + + + + + + + +
Requisitos previos:Completar todos los tutoriales de los temas previos, incluyendo Django Tutorial Part 10: Testing a Django web application.
Objetivo:Aprender ¿cómo? y ¿dónde? puedes puedes desplegar una app de Django en producción.
+ +

Introducción

+ +

Una vez que tu sitio este terminado (o lo suficientemente terminado como para iniciar una prueba pública) vas a necesitar alojarla en un lugar más público y accesible que tu computadora personal.

+ +

Hasta ahora has estado trabajando en un entorno de desarrollo, usando Django development web server para compartir tu sitio con el navegador/red local, y corriendo tu sitio web con configuraciones (inseguras) de desarrollo que exponen la depuración y otra informacion privada. Antes de que puedas alojar tu sitio web externamente, lo primero que tendrás que hacer es:

+ + + +

Este tutorial provee una guía de opciones para elegir un sitio de alojamiento, una breve descripción general de lo que necesitas hacer para preparar tu aplicación Django en producción, y un ejemplo práctico de cómo instalar el sitio web de LocalLibrary en el servicio de alojamiento en la nube de Heroku.

+ +

¿Qué es un entorno de producción?

+ +

El entorno de producción es el entorno proporcionado por el servidor en el que correrá su sitio web para uso externo. El entorno incluye:

+ + + +
+

Nota: Dependiendo de como esté configurado su entorno de producción, usted podría disponer también de un proxy inverso, balanceador de carga, etc.

+
+ +

El servidor podría estar ubicado en sus propias instalaciones y conectado a Internet a través de un enlace rápido, pero lo más común es utilizar un computador alojado "en la nube". Esto en realidad implica que su código es ejecutado en algún computador remoto (o posiblemente un computador "virtual") en el centro (o centros) de datos de su compañía de servicios de hosting. El servidor remoto normalmente ofrecerá un determinado nivel garantizado de recursos de computación (es decir, CPU, RAM, memoria de almacenamiento, etc) y de conectividad a Internet por un cierto precio.

+ +

A este tipo de hardware de computación/comunicaciones accesible de forma remota se le denomina Infrastructure as a Service o Infraestructura como Servicio (IaaS). Muchos proveedores de IaaS ofrecen la opción de preinstalar un sistema operativo en particular, sobre el cual se debe instalar el resto de componentes de su entorno de producción. Otros permiten seleccionar entornos plenamente configurados, con incluso configuraciones de Django y servidor web establecidas.

+ +
+

Nota: Los entornos pre-construidos le permiten establecer su sitio web de manera muy sencilla, ya que reducen el trabajo de configuración, pero las opciones disponibles podrían limitarle al uso de un servidor (u otros componentes) poco conocido, o podrían estar basados en versiones antiguas del Sistema Operativo. A menudo es preferible que uno mismo instale sus propios componentes, de manera que disponga de los que desee, y en el momento que necesite subir el nivel de prestaciones de alguna parte del sistema, tener cierta idea de por dónde empezar

+
+ +

Otros proveedores de hosting incluyen Django como parte de una Plataform as a Service o Plataforma como Servicio (PaaS). En este tipo de hosting no necesita preocuparse de la mayor parte del entorno de producción (servidor web, servidor de aplicaciones, balanceadores de carga), dado que la plataforma host ya se ocupa de todo ello por usted (así como de casi todo lo necesario para escalar su aplicación). Esto hace el despliegue bastante sencillo, puesto que ya solo necesita concentrarse en su aplicación web y no en el resto de la infraestructura de servidor.

+ +

Algunos desarrolladores elegirán la mayor flexibilidad ofrecida por una IaaS frente a una PaaS, mientras que otros valorarán el reducido coste general de mantenimiento y la mayor facilidad de escalado de PaaS. Cuando se está empezando, la instalación del sitio web en un sistema PaaS es mucho más sencilla, así que eso es lo que haremos en este tutorial. 

+ +
+

Consejo: Si eliges un proveedor de hosting adaptado a Python/Django, éste debería facilitar instrucciones de cómo instalar un sitio web Django usando diferentes configuraciones de servidor web, servidor de aplicaciones, proxy inverso, etc (esto es irrelevante si eliges una PaaS). Por ejemplo, existen muchas guías paso-a-paso para distintas configuraciones en la Digital Ocean Django community docs.

+
+ +

Eligiendo un proveedor de hosting

+ +

Existen más de 100 proveedores de hosting de los que se sabe que, o bien dan soporte activo, o funcionan bien con Django (puedes encontrar una lista bastante extensa en Djangofriendly hosts). Estos proveedores proporcionan diferentes tipos de entornos (IaaS, PaaS), así como diferentes niveles de recursos de computación y comunicaciones a diferentes precios.

+ +

Algunos aspectos a considerar al elegir un host son:

+ + + +

La buena noticia cuando estás en los comienzos es que existen bastantes sitios que proporcionan entornos de computación de "evaluación", "desarrollo" o "de nivel aficionado" de forma gratuita. Se trata siempre de entornos bastantes limitados/restringidos en recursos, y debes estar precavido en que pueden expirar al cabo de un periodo de introducción. Son, no obstante, muy útiles para probar sitios con poco tráfico en un entorno real, y pueden proporcionar una migración sencilla contratando más recursos si el sitio alcanza más ocupación. Entre las opciones conocidas de esta categoría tenemos Heroku, Python Anywhere, Amazon Web Services, Microsoft Azure, etc. 

+ +

Muchos proveedores disponen también de un nivel "básico" que proporciona niveles de capacidad de computación más útiles y con menos limitaciones. Digital Ocean y Python Anywhere son ejemplos de proveedores populares de hosting que ofrecen niveles básicos de computación relativamente baratos (en el rango de los 5 a los 10 $USD mensuales).

+ +
+

Nota:  Recuerda que el precio no es el único criterio de selección. Si tu sitio web tiene éxito, la escalabilidad puede convertirse en la consideración más importante.

+
+ +

Preparando tu sitio web para hacerlo público

+ +

La Django skeleton website creada usando las herramientas django-admin y manage.py están configuradas para hacer más sencillo el desarrollo. Muchos de los ajustes del proyecto Django (especificados en settings.py) deberían ser distintos en producción, por razones tanto de seguridad como de rendimiento.

+ +
+

Consejo: Es bastante común disponer de un archivo settings.py separado en producción, e importar los ajustes sensibles desde un archivo aparte o desde una variable de entorno. Este archivo debería, por tanto, estar protegido, aún cuando el resto del código fuente esté disponible en un repositorio público.

+
+ +

Los ajustes críticos que debes comprobar son:

+ + + +

Modifiquemos la aplicación LocalLibrary de manera que leamos nuestras variables SECRET_KEY y DEBUG desde variables de entorno si han sido definidas o, en otro caso, usar los valores por defecto del archivo de configuración.

+ +

Abra /locallibrary/settings.py, deshabilite la configuración original de l SECRET_KEY y añada las nuevas líneas tal como se muestran abajo en negrita. Durante el desarrollo no se especificará ninguna variable de entorno para la clave, por lo que se usará el valor por defecto (no debería importar qué clave utilizas aquí, o si la clave tiene "fugas", dado que no la utilizarás en producción).

+ +
# SECURITY WARNING: keep the secret key used in production secret!
+# SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag'
+import os
+SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag')
+
+ +

A continuación, comenta el ajuste de DEBUG existente y añade la nueva línea que se muestra abajo.

+ +
# SECURITY WARNING: don't run with debug turned on in production!
+# DEBUG = True
+DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )
+
+ +

El valor de DEBUG será True por defecto, pero será False si el valor de la variable de entorno DJANGO_DEBUG se establece como una cadena vacía, es decir, DJANGO_DEBUG=''.

+ +
+

Nota: Sería más intuitivo si pudiéramos simplemente marcar y desmarcar la variable de entorno DJANGO_DEBUG a True y False directamente, en lugar de usar "cualquier cadena" o "cadena vacía" (respectivamente). Por desgracia, los valores de las variables de entorno son almacenados como cadenas de Python (Python strings), y la única cadena que se evalúa como False es la cadena vacía (por ejemplo, bool('')==False).

+
+ +

Deployment checklist (Django docs) proporciona una lista de comprobación completa de ajustes que podrías querer cambiar. Puedes también sacar una lista de algunos de ellos usando el siguiente comando de terminal:

+ +
python3 manage.py check --deploy
+
+ +

Ejemplo: Instalando LocalLibrary en Heroku

+ +

Esta sección aborda una demostración práctica de cómo instalar LocalLibrary en Heroku PaaS cloud.

+ +

¿Por qué Heroku?

+ +

Heroku es uno de los servicios PaaS basados en la nube más duraderos y conocidos. Originalmente únicamente daba soporte a aplicaciones Ruby, pero actualmente puede utilizarse para aplicaciones host de muchos entornos de programación, incluido Django!

+ +

Vamos a elegir Heroku por varias razones:

+ + + +

Si bien Heroku es perfecto para alojar esta demostración, puede no serlo para tu sitio web real. Heroku facilita la instalación y el escalado, a costa de ser menos flexible, y potencialmente mucho más caro una vez que abandonas el nivel gratuito.

+ +

¿Cómo funciona Heroku?

+ +

Heroku ejecuta sitios web Django dentro de uno o más "Dynos", que son contenedores Unix virtualizados y aislados que proporcionan el entorno necesario para ejecutar una aplicación. Los dynos están completamente aislados y disponen de un sistema de archivos efímero (sistema de archivos de vida corta que es limpiado/vaciado cada vez que el dyno se reinicia). Lo único que los dynos comparten por defecto son las variables de configuración (configuration variables) de las aplicaciones. Heroku utiliza interrnamente un balanceador de carga para distribuir el tráfico web entre todas las dynos "web". Puesto que no se comparte nada entre ellas, Heroku puede escalar una app horizontalmente simplemente añadiendo más dynos (aunque, claro está, podrías necesitar escalar tu base de datos para aceptar conexiones adicionales).

+ +

Puesto que el sistema de archivos es efímero, no puedes instalar los servicios requeridos por tu aplicación directamente (por ejemplo, bases de datos, colas, sistemas de cacheado, almacenamiento, servicios de correo electrónico, etc). En su lugar, las aplicaciones web de Heroku usan servicios de respaldo proporcionados por Heroku o terceros como "add-ons" independientes. Una vez adjuntados a tu aplicación web, los dynos acceden a los servicios usando la información contenida en las variables de configuración de la aplicación.

+ +

Para ejecutar tu aplicación, Heroku necesita poder instalar el entorno y las dependencias adecuados, y entender cómo están enlazados. Para las apps Django, esta información se proporciona en una serie de archivos de texto:

+ + + +

Los desarrolladores interactúan con Heroku usando una app/terminal cliente especial, algo muy parecido a un bash script de Unix. Esto permite subir código almacenado en un repositorio git, inspeccionar los procesos en ejecución, ver logs, establecer variables de configuración, y mucho más!.

+ +

Para conseguir nuestra aplicación para trabajar en Heroku, necesitaremos colocar nuestra aplicación web Django dentro de un repositorio git, añadir los archivos anteriores, integrar con una base de datos add-on, y hacer cambios para manejar correctamente los archivos estáticos.

+ +

Una vez hecho todo eso, podemos crear una cuenta Heroku, obtener el cliente Heroku, y usarlo para instalar nuestro sitio web.

+ +
+

Nota: Las instrucciones indicadas abajo reflejan la forma de trabajar con Heroku en el momento de la redacción. Si Heroku cambia sus procesos de forma significativa, podrías preferir, en su lugar, revisar su documentación de instalación: Getting Started on Heroku with Django.

+
+ +

Con esto ya tienes una visión general de lo que necesitas para empezar (vea How Heroku works para tener una guía más exhaustiva).

+ +

Creando un repositorio de aplicación en Github

+ +

Heroku está estrechamente integrado con el sistema de control de versiones de código fuente git, usándolo para subir/sincronizar cualquier cambio que hagas en los sistemas activos. Esto se hace añadiendo un nuevo repositorio "remoto" heroku denominado heroku que apunta a un repositorio para tu fuente en la nube Heroku. Durante el desarrollo usas git para almacenar los cambios en tu repositorio "maestro". Cuando quieras desplegar tu sitio, sincronizas tus cambios con el repositorio Heroku.

+ +
+

Nota: Si estás acostumbrado a seguir buenas prácticas de desarrollo de software, probablemente ya estás usando git o algún otro sistema SCM. Si ya dispones de un repositorio git, podrás saltarte este paso.

+
+ +

Existen muchas formas de trabajar con git, pero una de las más sencillas es crear en primer lugar una cuenta en Github, crear allí el repositorio, y a continuación sincronizarlo localmente:

+ +
    +
  1. Visita https://github.com/ y crea una cuenta.
    2. +
  2. Una vez conectado, haz click en el enlace  + de la barra de tareas superior y selecciona New repository.
    3. +
  3. Rellena todos los campos de este formulario. Aunque no son obligatorios, es muy recomendable que los rellenes todos. +
      +
    • Introduce el nombre del nuevo repositorio (por ejemplo, django_local_library), y una descripción (por ejemplo "Sitio web de la Biblioteca Local escrita en Django").
      • +
    • Selecciona Python en la lista de selección Add .gitignore.
      • +
    • Selecciona tu licencia en la lista de selección Add license.
      • +
    • Marca Initialize this repository with a README.
      • +
    +
    4. +
  4. Pulsa Create repository.
    5. +
  5. Haz click en el botón verde "Clone or download" en la página de tu nuevo repositorio.
    6. +
  6. Copia el valor de la URL del campo de texto situado dentro de la caja de diálogo que aparece (debería decir algo como: https://github.com/<your_git_user_id>/django_local_library.git).
    7. +
+ +

Ahora que el repositorio ("repo") ha sido creado, querremos clonarlo en nuestra computadora local:

+ +
    +
  1. Instala git para tu computadora local (puedes encontrar versiones para distintas plataformas here).
    2. +
  2. Abre una ventana/terminal de comandos y clona tu repositorio usando la URL que copiaste anteriormente: + 
    git clone https://github.com/<your_git_user_id>/django_local_library.git
+
    + Esto creará el repositorio debajo del punto actual.
    3. +
  3. Navega dentro del nuevo repositorio. + 
    cd django_local_library.git
    +
    4. +
+ +

El paso final es copiar en él tu aplicación y a continuación añadir los archivos a tu repositorio usando git:

+ +
    +
  1. Copia tu aplicación Django en esta carpeta (todos los archivos que estén al mismo nivel que manage.py y por debajo, no su carpeta locallibrary contenedora). 
    2. +
  2. Abre el archivo .gitignore, copia las siguientes líneas al final del mismo, y guárdalo (este archivo se utiliza para identificar los archivos que, por defecto, no deberían subirse a git). + 
    # Text backup files
+*.bak
+
+#Database
+*.sqlite3
    +
    3. +
  3. Abre una ventana/terminal de comandos y utiliza el comando add para añadir todos los archivos a git. + 
    git add -A
+
    +
    4. +
  4. Utiliza el comando status para comprobar que todos los archivos que vas a añadir son correctos (quieres incluir ficheros fuentes, no binarios, archivos temporales, etc). Debería tener un aspecto similar a la lista siguiente. + 
    > git status
+On branch master
+Your branch is up-to-date with 'origin/master'.
+Changes to be committed:
+  (use "git reset HEAD <file>..." to unstage)
+
+        modified:   .gitignore
+        new file:   catalog/__init__.py
+        ...
+        new file:   catalog/migrations/0001_initial.py
+        ...
+        new file:   templates/registration/password_reset_form.html
    +
    5. +
  5. Si estás conforme, consolida tus archivos en el repositorio local: + 
    git commit -m "First version of application moved into github"
    +
    6. +
  6. A continuación, sincroniza tu repositorio local con el sitio web Github, usando lo siguiente: + 
    git push origin master
    +
    7. +
+ +

Una vez completada esta operación, deberías poder regresar a la página de Github donde creaste tu repositorio, refrescar la página, y comprobar que tu toda tu aplicación ha sido ya cargada. Puedes continuar actualizando tu repositorio según vayan cambiando los archivos, usando este ciclo add/commit/push.

+ +
+

Consejo: Este es un buen momento para hacer una copia de seguridad de tu proyecto "simple" — algunos de los cambios que vamos a ir haciendo en las siguientes secciones podrían ser útiles para el despliegue en cualquier plataforma (o para el desarrollo), pero otros no.

+ +

La mejor manera de hacer esto es usar git para gestionar tus revisiones. Con git puedes no solo volver a una versión anterior en particular, sino que puedes mantener ésta en una "rama" separada de tus cambios en producción, y seleccionar determinados cambios a trasladar entre las ramas de producción y desarrollo. Learning Git merece la pena el esfuerzo, pero queda fuera del alcance de este tema.

+ +

La forma más fácil de hacer ésto es simplemente copiar tus archivos en otra ubicación. Usa la manera que más se ajuste a tus conocimientos de git!

+
+ +

Actualizar la app para Heroku

+ +

Esta sección explica los cambios que necesitaras hacer a nuestra aplicación LocalLibrary para ponerla a funcionar en Heroku. Mientras que las instrucciones disponibles en Getting Started on Heroku with Django de Heroku asumen que también vas a utilizar el cliente Heroku para ejecutar el entorno de desarrollo local, los cambios que aquí se reflejan son compatibles con el servidor de desarrollo Django existente y las formas de funcionamiento que ya hemos aprendido.

+ +

Procfile

+ +

Crea el archivo Procfile (sin extensión) en la carpeta raíz de tu repositorio GitHub para declarar los tipos de procesos de la aplicación y los puntos de entrada. Copia en él el texto siguiente:

+ +
web: gunicorn locallibrary.wsgi --log-file -
+ +

La palabra "web:" le dice a Heroku que se trata de una web dyno y puede ser enviada a través del tráfico HTTP. El proceso a arrancar en este dyno es gunicorn, un servidor de aplicaciones web popular recomendado por Heroku. Arrancamos Gunicorn usando la información de configuración que se encuentra en el módulo locallibrary.wsgi (creado con nuestro esqueleto de aplicación: /locallibrary/wsgi.py).

+ +

Gunicorn

+ +

Gunicorn es el servidor HTTP recomendado para usar con Django en Heroku (tal como se indicaba en el Procfile anterior). Es un servidor HTTP puro-Python para aplicaciones WSGI que puede ejecutar múltiples procesos Python concurrentes dentro de un único dyno (para obtener más información, véase Deploying Python applications with Gunicorn).

+ +

Aunque no necesitaremos Gunicorn para servir nuestra aplicación LocalLibrary durante el desarrollo, lo instalaremos de manera que sean parte de nuestros requerimientos de Heroku para instalar en el servidor remoto.

+ +

Instala Gunicorn localmente usando pip en la línea de comandos (que instalamos en setting up the development environment):

+ +
pip3 install gunicorn
+
+ +

Configuración de la Base de Datos

+ +

No podemos usar la base de datos por defecto SQLite en Heroku dado que está basada-en-fichero, y sería borrada del sistema de archivos efímero cada que se reiniciara la aplicación (normalmente una vez al día, y cada vez que la aplicación o sus variables de configuración fueran modificadas).

+ +

El mecanismo de Herocu para gestionar esta situación es usar una database add-on y configurar la aplicación web utilizando información de una variable de configuración del entorno, establecida por la add-on. Existen numerosas opciones de bases de datos, pero nosotros utilizaremos el nivel hobby tier de la base de datos Heroku postgres ya que es gratuita, soportada por Django, e incorporada en nuestra nuevas apps Heroku al usar el nivel gratuito plan dyno hobby.

+ +

La información de conexión a la base de datos es proporcionada a la web dyno usando una variable de configuración denominada DATABASE_URL. En lugar de codificar esta información en Django, Heroku recomienda que los desarrolladores utilicen el paquete dj-database-url para extraer la variable de entorno DATABASE_URL y automáticamente convertirla al formato de configuración deseado por Django. Además para instalar el paquete dj-database-url necesitaremos también instalar psycopg2, ya que Django lo necesita para interactuar con la base de datos Postgres.

+ +
dj-database-url (Configuración de base de datos de  Django a partir de una variable de entorno)
+ +

Instala dj-database-url a nivel local para que se convierta en parte de nuestros requerimientos para instalar Heroku en el servidor remoto:

+ +
$ pip3 install dj-database-url
+
+ +
settings.py
+ +

Abre /locallibrary/settings.py y copia la siguiente configuración al final del archivo:

+ +
# Heroku: Update database configuration from $DATABASE_URL.
+import dj_database_url
+db_from_env = dj_database_url.config(conn_max_age=500)
+DATABASES['default'].update(db_from_env)
+ +
+

Nota:

+ + +
+ +
psycopg2 (soporte a la base de datos Python Postgres)
+ +

Django necesita psycopg2 para trabajar con las bases de datos Postgres y tú necesitarás añadir esto a los requirements.txt para que Heroku lo instale en el servidor remoto (como se expone más adelante en la sección de requerimientos).

+ +

Django utilizará la base de datos SQLite en modo local por defecto, porque la variable de entorno DATABASE_URL no está establecida en nuestro entorno local. Si quieres cambiar a Postgres completamente y usar nuestra base de datos del nivel gratuito de Heroku tanto en desarrollo como en producción, puedes hacerlo. Por ejemplo, para instalar psycopg2 y sus dependencias localmente en un sistema basado en Linux, usarías los siguientes comandos bash/terminal:

+ +
sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib
+pip3 install psycopg2
+
+ +

Puedes encontrar instrucciones de instalación para el resto de plataformas en psycopg2 website.

+ +

No obstante, esto no es necesario — no necesitas tener activa PostGreSQL en el equipo local, en tanto que se lo indicas a Heroku como requerimiento, en requirements.txt (ver a continuación).

+ +

Sirviendo ficheros estáticos en producción

+ +

Durante el desarrollo utilizábamos Django y el servidor web de desarrollo de Django para servir nuestros ficheros estáticos (CSS, JavaScript, etc). En un entorno de producción normalmente se sirven los ficheros estáticos desde una red de entrega de contenidos (CDN, Content Delivery Network) o desde el servidor web.

+ +
+

Nota: Servir ficheros estáticos vía Django/aplicación web es ineficiente ya que las peticiones tienen que pasar por código adicional innecesario (Django), en vez de ser gestionados directamente por el servidor web o una CDN completamente independiente. Si bien esto no tiene relevancia en el uso local durante el desarrollo, el uso de este mecanismo en producción tiene un significativo impacto de rendimiento. 

+
+ +

Para facilitar el alojamiento de archivos estáticos de forma separada de la aplicación web Django, Django proporciona la herramienta collectstatic para recoger estos archivos para el despliegue (hay una variable de configuración que define de dónde se deben recopliar los archivos cuando se ejecuta collectstatic). Las plantillas Django hacen referencia a la localización de almacenamiento de los archivos estáticos en relación a una variable de configuración (STATIC_URL), por tanto, esto puede modificarse se los archivos estáticos son movidos a otro host/servidor.

+ +

Las variables de configuración más relevantes son:

+ + + +
settings.py
+ +

Abra /locallibrary/settings.py y copie la configuración siguiente al final del archivo. La variable BASE_DIR debería haber sido ya definida en tu fichero (la variable STATIC_URL puede haber sido ya definida dentro del archivo cuando fue creado. Puesto que no provocará ningún fallo, podrías borrar la referencias duplicadas).

+ +
# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/1.10/howto/static-files/
+
+# The absolute path to the directory where collectstatic will collect static files for deployment.
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
+
+# The URL to use when referring to static files (where they will be served from)
+STATIC_URL = '/static/'
+
+ +

Nosotros haremos el servicio de ficheros utilizando una librería denominada WhiteNoise, que instalaremos y configuraremos en la siguiente sección.

+ +

Para más información, vea Django and Static Assets (Heroku docs).

+ +

Whitenoise

+ +

Hay muchas formas de servir ficheros estáticos en producción (ya vimos los ajustes Django relevantes en las secciones previas). Heroku recomienda usar el proyecto WhiteNoise para servir objetos estáticos directamente desde Gunicorn en producción.

+ +
+

Nota: Heroku llama automáticamente a collectstatic y prepara tus ficheros estáticos para ser usados por WhiteNoise después de que se cargue tu aplicación. Revisa la documentación WhiteNoise, en la que se explica cómo funciona y por qué la implementación es un método para servir estos ficheros relativamente eficiente.

+
+ +

Los pasos para instalar WhiteNoise para usarlo dentro del proyecto son:

+ +
WhiteNoise
+ +

Instala WhiteNoise localmente usando el siguiente comando:

+ +
$ pip3 install whitenoise
+
+ +
settings.py
+ +

Para instalar WhiteNoise en tu aplicación Django, abre /locallibrary/settings.py, busca la opción MIDDLEWARE y añade WhiteNoiseMiddleware cerca de la parte superior de la lista, justo debajo de SecurityMiddleware:

+ +
MIDDLEWARE = [
+    'django.middleware.security.SecurityMiddleware',
+    'whitenoise.middleware.WhiteNoiseMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ +

Opcionalmente, puedes reducir el tamaño de los ficheros estáticos al ser servidos (lo que lo hace más eficiente). Añade lo siguiente al final de /locallibrary/settings.py:

+ +
# Simplified static file serving.
+# https://warehouse.python.org/project/whitenoise/
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
+
+ +

Requerimientos

+ +

Los requerimientos Python de tu aplicación web deben ser almacenados en un archivo requirements.txt en la carpeta raíz de tu repositorio. Heroku los instalará cuando reconstruya tu entorno. Puedes crear este archivo utilizando pip en la línea de comandos (ejecuta los siguiente en la raíz del repositorio):

+ +
pip3 freeze > requirements.txt
+ +

Después de instalar todas las dependencias anteriores, tu archivo requirements.txt debería tener al menos estos objetos (aunque los números de versión pueden ser diferentes). Por favor, borra cualquier otra dependencia no listada abajo, a menos que la hayas añadido explícitamente para esta aplicación.

+ +
dj-database-url==0.4.1
+Django==1.10.2
+gunicorn==19.6.0
+psycopg2==2.6.2
+whitenoise==3.2.2
+
+ +
+

Asegúrate de que existe una línea psycopg2 como la que se ve arriba! Incluso aunque no lo hayas instalado localmente, deberías añadirla a requirements.txt.

+
+ +

Runtime

+ +

El archivo runtime.txt, si ha sido definido, le dice a Heroku que lenguaje de programación usar. Crea el archivo en el raíz del repositorio y añade el siguiente texto:

+ +
python-3.5.2
+ +
+

Nota: Heroku sólo soporta un número pequeño de Python runtimes. Tú puedes especificar valores de runtime de Python 3, pero en el momento de esta redacción la versión anterior será soportada como definida.

+
+ +

Guardar los cambios en Github y volver a probar.

+ +

A continuacion, guardemos nuestros cambios en Github. En el terminal (dentro de nuestro respositorio), introduce los comandos siguientes:

+ +
git add -A
+git commit -m "Added files and changes required for deployment to heroku"
+git push origin master
+ +

Antes de continuar, probemos de nuevo nuestro sitio localmente y asegurémonos de que no ha sido afectado por ninguno de los cambios anteriores. Pon en marcha el servidor web de desarrollo de la forma habitual y comprueba que el sitio aún funciona como esperas en tu navegador.

+ +
python3 manage.py runserver
+ +

Ya deberíamos estar preparados para empezar a desplegar LocalLibrary en Heroku.

+ +

Hazte con una cuenta Heroku

+ +

Para empezar a usar Heroku necesitarás en primer lugar crear una cuenta:

+ + + +

Instala el cliente

+ +

Descarga e instala el cliente Heroku siguiendo estas instructiones para Heroku.

+ +

Una vez instalado el cliente, ya podrás ejecutar comandos. Por ejemplo, para mostrar ayuda en el cliente:

+ +
heroku help
+
+ +

Crea y sube el sitio web

+ +

Para crear la app ejecutamos el comando "create" en el directorio raíz de nuestro repositorio. Esta operación crea un git remoto ("puntero hacia el repositorio remoto") denominado heroku en nuestro entorno git local.

+ +
heroku create
+ +
+

Nota: Puedes nombrar el remoto, si lo deseas, especificando un valor después de "create". Si no, obtendrás un nombre aleatorio. Este nombre es el que se utiliza en la URL por defecto.

+
+ +

Podemos a continuación "empujar" (push) nuestra aplicación hacia el respositorio Heroku como se muestra abajo. Este proceso subirá la aplicación, la empaquetará en un dyno, ejecutará collestatic, y arrancará el sitio.

+ +
git push heroku master
+ +

Si tenemos suerte, la app ya estará "corriendo" en el sitio, pero no estará funcionando correctamente ya que no hemos colocado las tablas que usa nuestra aplicación. Para hacer esto necesitamos utilizar el comando heroku run y arrancar un "one off dyno" para realizar una operación de migración. Introduce el siguiente comando en el terminal:

+ +
heroku run python manage.py migrate
+ +

Vamos a necesitar también poder añadir libros y autores, así que vamos a crear nuestro superusuario de administración, de nuevo utilizando un "one-off dyno":

+ +
heroku run python manage.py createsuperuser
+ +

Una vez llevado a cabo ésto, podremos ver el sitio. Debería funcionar, aunque no tendrá aún ningún libro. Para abrir el navegador hacia el nuevo sitio web, usa el comando:

+ +
heroku open
+ +

Crea algunos libros en el sitio de administración, y comprueba que el sitio se comporta tal y como esperas.

+ +

Gestionando addons

+ +

Puedes revisar los add-ons de tu app usando el comando heroku addons. Se listarán todos los addons, su nivel de precio y estado.

+ +
>heroku addons
+
+Add-on                                     Plan       Price  State
+─────────────────────────────────────────  ─────────  ─────  ───────
+heroku-postgresql (postgresql-flat-26536)  hobby-dev  free   created
+ └─ as DATABASE
+ +

Aquí vemos que tenemos un único add-on, la base de datos postgres SQL. Es gratuito, y fue creado automáticamente cuando se creó la aplicación. Puedes abrir una página web en la que examinar con más detalle el add-on de la base de datos (o cualquier otro add-on) utilizando el siguiente comando:

+ +
heroku addons:open heroku-postgresql
+
+ +

Otros comandos te permiten crear, destruir, subir o bajar de versión de los addons (con una sintaxis similar a la de abrir). Para más información, consulta Managing Add-ons (Heroku docs).

+ +

Estableciendo las variables de configuración

+ +

Puedes revisar las variables de configuración para el sitio con el comando heroku config. Abajo puedes comprobar que solo tenemos una variable, DATABASE_URL, usada para configurar nuestra base de datos.

+ +
>heroku config
+
+=== locallibrary Config Vars
+DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3
+ +

Si recuerdas de la sección Preparando tu sitio web para hacerlo público, tenemos que establecer variables de entorno para DJANGO_SECRET_KEY y DJANGO_DEBUG. Vamos a hacerlo ahora.

+ +
+

Nota: La clave secreta tiene que ser verdaderamente secreta! Una forma de generar una nueva clave es crear un nuevo proyecto Django (django-admin startproject nombredeproyecto) y obtener la clave generada para tí de su archivo settings.py.

+
+ +

Establecemos el valor de la variable DJANGO_SECRET_KEY con el comando config:set (como se muestra abajo). Recuerda usar tu propia clave secreta!

+ +
>heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&=
+
+Setting DJANGO_SECRET_KEY and restarting locallibrary... done, v7
+DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh
+
+ +

De forma similar, establecemos DJANGO_DEBUG:

+ +
>heroku config:set DJANGO_DEBUG=''
+
+Setting DJANGO_DEBUG and restarting locallibrary... done, v8
+ +

Si visitas ahora el sitio recibirás un error "Bad request", porque es obligatorio establecer ALLOWED_HOSTS si tienes establecido DEBUG=False (como medida de seguridad). Abre /locallibrary/settings.py y cambia el valor de ALLOWED_HOSTS para incluir la url base de tu app (por ejemplo, 'locallibrary1234.herokuapp.com') y la URL que usas normalmente en tu servidor de desarrollo local.

+ +
ALLOWED_HOSTS = ['<your app URL without the https:// prefix>.herokuapp.com','127.0.0.1']
+# For example:
+# ALLOWED_HOSTS = ['fathomless-scrubland-30645.herokuapp.com','127.0.0.1']
+
+ +

A continuación guarda los cambios y consolídalos en tu repo Github y en Heroku.

+ +
git add -A
+git commit -m 'Update ALLOWED_HOSTS with site and development server URL'
+git push origin master
+git push heroku master
+ +
+

Una vez completada la actualización del sitio en Heroku, introduce una URL que no exista (por ejemplo, /catalog/doesnotexist/). Antes se habría mostrado una página de depuración detallada, pero ahora deberías simplemente ver una página de "Not Found".

+
+ +

Depuración

+ +

El cliente Heroku proporciona algunas herramientas para la depuración:

+ +
heroku logs  # Show current logs
+heroku logs --tail # Show current logs and keep updating with any new results
+heroku config:set DEBUG_COLLECTSTATIC=1 # Add additional logging for collectstatic (this tool is run automatically during a build)
+heroku ps   #Display dyno status
+
+ +

Si necesitas más información de la que te proporcionan estas herramientas, tendrás que investigar en Django Logging.

+ + + +

Resumen

+ +

Has llegado al final de este tutorial sobre la instalación de apps Django en producción, así como de la serie de tutoriales sobre el trabajo con Django. Esperamos que los hayas encontrado útiles. Puedes encontrar una versión completa del código fuente en Github aquí.
+
+ El siguiente paso sería leer nuestros últimos artículos, y finalmente completar la evaluación.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/development_environment/index.html b/files/es/learn/server-side/django/development_environment/index.html new file mode 100644 index 0000000000..cf47cdefa9 --- /dev/null +++ b/files/es/learn/server-side/django/development_environment/index.html @@ -0,0 +1,421 @@ +--- +title: Puesta en marcha de un entorno de desarrollo Django +slug: Learn/Server-side/Django/development_environment +tags: + - Aprendizaje + - Codificación de scripts + - Entorno de Desarrollo + - Principiante + - Python + - django + - instalación + - introducción +translation_of: Learn/Server-side/Django/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
+ +

Ahora que sabes para qué se utiliza Django, te enseñaremos cómo configurar y probar un entorno de desarrollo Django en Windows, Linux (Ubuntu), y Mac OS X — cualquiera que sea el sistema operativo común que estés utilizando, este artículo te dará lo que necesitas para ser capaz de empezar a desarrollar aplicaciones Django.

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

Saber como abrir un terminal / linea de comandos. Saber como instalar paquetes de software en el sistema operativo de tu computadora de desarrollo.

+
Objetivo:Tener funcionando un entorno de desarrollo Django (1.10) en tu computadora.
+ +

Visión general del entorno de desarrollo Django

+ +

Django hace muy fácil configurar tu computadora de manera que puedas empezar a desarrollar aplicaciones web. Esta sección explica qué consigues con el entorno de desarrollo y proporciona una visión general de algunas de tus opciones de puesta en marcha y configuración. El resto del artículo explica el método recomendado de instalación del entorno de desarrollo de Django en Ubuntu, Mac OS X, y Windows, y cómo puedes probarlo.

+ +

¿Qué es el entorno de desarrollo Django?

+ +

El entorno de desarrollo es una instalación de Django en tu computadora local que puedes usar para desarrollar y probar apps Django antes de desplegarlas al entorno de producción.

+ +

Las principales herramientas que el mismo Django proporciona son un conjunto de scripts de Python para crear y trabajar con proyectos Django, junto con un simple servidor web de desarrollo que puedes usar para probar de forma local (es decir en tu computadora, no en un servidor web externo) aplicaciones web Django con el explorador web de tu computadora.

+ +

Hay otras herramientas periféricas, que forman parte del entorno de desarrollo, que no cubriremos aquí. Estas incluyen cosas como un editor de textos o IDE para editar código, una herramienta de gestión del control de fuentes como Git para gestionar con seguridad las diferentes versiones de tu código. Asumimos que tienes ya un editor de textos instalado.

+ +

¿Cuáles son las opciones de puesta en marcha de Django?

+ +

Django es extremadamente flexible en términos de cómo y dónde puede instalarse y configurarse. Django puede ser:

+ + + +

Cada una de estas opciones requieren configuraciones y puesta en marcha ligeramente diferentes. Las siguientes subsecciones explican algunas de tus opciones. En el resto del artículo te mostraremos como ajustar Django en un pequeño número de sistemas operativos, y se supondrá ese ajuste a lo largo del resto del módulo.

+ +
+

Nota: La documentación oficial de Django cubre otras posibles opciones de instalación. Enlazamos a los documentos apropiados más abajo.

+
+ +

¿Qué sistemas operativos están soportados?

+ +

Las aplicaciones web Django pueden ejecutarse en casi cualquier máquina donde pueda funcionar el lenguaje de programación Python: Windows, Mac OS X, Linux/Unix, Solaris, por nombrar sólo unos pocos. Casi cualquier computadora debería tener el rendimiento necesario para ejecutar Django durante el desarrollo.

+ +

En este artículo proporcionamos instrucciones para Windows, Mac OS X, y Linux/Unix.

+ +

¿Qué versión de Python deberías usar?

+ +

Django se ejecuta por encima de Python, y puede uarse tanto con Python 2 o con Python 3 (o ambos). Cuando estés seleccionando una versión deberías tener en cuenta que:

+ + + + + +
+

Nota: Historicamente Python 2 era la única elección realista, porque muy pocas bibliotecas de terceros estaban disponibles para Python 3. La tendencia actual es que la mayoría de paquetes nuevos y populares del Python Package Index (PyPi) soporten ambas versiones de Python. Aunque todavía haya muchos paquetes que sólo están disponibles para Python 2, elegir Python 3 es actualmente una opción muy popular.

+
+ +

Te recomendamos que uses la última versión de Python 3 a menos que el sitio dependa de bibliotecas de terceros que sólo están disponibles para Python 2.

+ +

Este artículo te explicará como instalar un entorno para Python 3 (el ajuste equivalente para Python 2 sería muy similar).

+ +

¿Dónde puedo descagarme Django?

+ +

Hay tres lugares para descargar Django:

+ + + +

Este artículo te muestra como instalar Django desde PyPi, para conseguir la última versión estable.

+ +

¿Qué base de datos?

+ +

Django soporta cuatro bases de datos importantes (PostgreSQL, MySQL, Oracle y SQLite), y hay bibliotecas comunitarias que proporcionan varios niveles de soporte para otras bases de datos populares SQL y NOSQL. Te recomendamos que elijas la misma base de datos tanto para la producción como para el desarrollo (aunque Django abstrae muchas de las diferencias entre las bases usando su Object-Relational Mapper (ORM), hay todavía problemas potenciales que es mejor evitar).

+ +

Durante este artículo (y la mayoría de este módulo) usaremos la base de datos SQLite, que almacena sus datos en un fichero. SQLite está pensado para ser usado como base ligera y no puede soportar un alto nivel de concurrencia. Es sin embargo una excelente elección para aplicaciones que son principalmente de sólo lectura.

+ +
+

Nota: Django está configurado para usar SQLite por defecto cuando comienzas tu proyecto de sitio web usando las herramientas estándard (django-admin). Es una gran elección cuando estás empezando porque no requiere configuración o puesta en marcha adicional. 

+
+ +

¿Instalar Python en un entorno de sistema o virtual?

+ +

Cuando instalas Python3 obtienes un único entorno global que es compartido con todo el código Python3. Si bien puedes instalar los paquetes que te gusten en el entorno, sólo puedes instalar al mismo tiempo una versión en particular de cada paquete.

+ +
+

Nota: Las aplicaciones Python instaladas en el entorno global pueden entrar en conflicto potencialmente unas con otras (ej. si dependen de diferentes versiones del mismo paquete). 

+
+ +

Si instalas Django dentro del entorno por defecto/global sólo podrás apuntar a una sóla versión de Django en la computadora. Esto puede ser un problema si quieres crear nuevos sitios (usando la última versión de Django) pero manteniendo los sitios web que dependen de versiones más antiguas.

+ +
+ +

Como resultado, los desarrolladores experimentados de Python/Django normalmente ejecutan las aplicaciones Python dentro de entornos virtuales Python independientes. De esta forma se habilitan múltiples entornos Django diferentes en la misma computadora. !El mismo equipo de desarrollo Django recomienda que uses entornos Python virtuales!

+ +
+ +

Este módulo da por supuesto que has instalado Django en un entorno virtual, y te mostraremos cómo hacerlo más abajo.

+ +

Instalación de Python 3

+ +

Para poder usar Django tendrás que instalar Python en tu sistema operativo. Si estás usando Python 3 necesitarás la herramienta Python Package Index — pip3 — que se usa para gestionar (instalar, actualizar y eliminar) los paquetes/bibliotecas Python usados por Django y tus otras aplicaciones Python.

+ +

Esta sección explica brevemente como puedes comprobar qué versiones de Python están presentes, e instalar nuevas versiones cuando lo necesites, en Ubuntu Linux 16.04, Mac OS X, y Windows 10.

+ +
+

Nota: Dependiendo de tu plataforma, podrías también ser capaz de instalar Python/pip desde la propia aplicación de gestión de paquetes de tu sistema o vía otros mecanismos. Para la mayoría de las plataformas puedes descargar los ficheros de instalación requeridos desde https://www.python.org/downloads/ e instalarlos usando el método apropiado específico de la plataforma.

+
+ +

Ubuntu 16.04

+ +

Ubuntu Linux incluye Python 3 por defecto. Puedes confirmarlo ejecutando el siguiente comando en una terminal:

+ +
python3 -V
+ Python 3.5.2
+ +

Sin embargo la herramienta Python Package Index que necesitarás para instalar paquetes de Python 3 (incluido Django) No está disponible por defecto. Puedes instalar pip3 en un terminal bash usando:

+ +
sudo apt-get install python3-pip
+
+ +

Mac OS X

+ +

Mac OS X "El Capitan" no incluye Python 3. Puedes confirmarlo ejecutando los siguientes comandos en un terminal bash:

+ +
python3 -V
+ -bash: python3: command not found
+ +

Puedes instalar fácilmente Python 3 (junto con la herramienta pip3) desde python.org:

+ +
    +
  1. Descarga el instalador requerido: +
      +
    1. Vete a https://www.python.org/downloads/
      2. +
    2. Selecciona el botón Descarga Python 3.5.2 (el número exacto de versión menor puede ser diferente).
      3. +
    +
    2. +
  2. Localiza el fichero usando Finder, haz doble-click sobre el fichero del paquete. Pincha siguiente en las ventanas de instalación.
    3. +
+ +

Puedes confirmar ahora una instalación satisfactoria comprobando Python 3 como se muestra a continuación:

+ +
python3 -V
+ Python 3.5.20
+
+ +

Puedes igualmente comprobar que pip3 está instalado listando los paquetes disponibles:

+ +
pip3 list
+ +

Windows 10

+ +

Windows no incluye Python por defecto, pero puedes instalarlo fácilmente (junto con la herramienta pip3) desde python.org:

+ +
    +
  1. Descarga el instalador requerido: +
      +
    1. Vete a https://www.python.org/downloads/
      2. +
    2. Selecciona el botón de Descarga Python 3.6.3 (la versión menor exacta puede ser diferente).
      3. +
    +
    2. +
  2. Instala Python haciendo doble-click en el fichero descargado y pulsando siguiente en las ventanas de instalación
    3. +
+ +

Puedes verificar a continuación que Python 3 se instaló correctamente entrando el siguiente texto en una ventana de comandos:

+ +
py -3 -V
+ Python 3.6.3
+
+ +

El instalador de Windows incorpora pip3 (el gestor de paquetes de Python) por defecto. Puedes listar paquetes como se muestra a continuación:

+ +
pip3 list
+
+ +
+

Nota: El instalador debería poner en marcha todo lo que necesitas para que el comando de arriba funcione. Si por el contrario obtienes un mensaje de que Python no puede ser encontrado, puede que necesites añadirlo al path de tu sistema.

+
+ +

Uso de Django dentro de un entorno virtual de Python

+ +

Las bibliotecas que usaremos para crear nuestros entornos virtuales están en virtualenvwrapper (Linux and Mac OS X) y virtualenvwrapper-win (Windows), que utilizan a su vez la herramienta virtualenv. Las herramientas wrapper crean una interfaz consistente para la gestión de interfaces en todas las plataformas.

+ +

Instalación del software del entorno virtual

+ +

Puesta en marcha del entorno virtual en Ubuntu

+ +

Después de instalar Python y pip puedes instalar virtualenvwrapper (que incluye virtualenv) usando pip3 como se muestra.

+ +
sudo pip3 install virtualenvwrapper
+ +

A continuación añade las siguientes líneas al final del fichero de inicio de tu shell (éste es un fichero oculto llamado .bashrc que se encuentra en tu directorio de inicio del usuario). Ésto ajusta la localización de donde deberían vivir los entornos virtuales, la localización de los directorios de tus proyectos de desarrollo, y la localización del script instalado con este paquete:

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +

A continuación volver a recargar el fichero de inicio ejecutando el siguiente comando en el terminal:

+ +
source ~/.bashrc
+ +

En este punto deberías ver un puñado de scripts empezando a ejecutarse como se muestra a continuación:

+ +
virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
+ +

Ahora puedes crear un nuevo entorno virtual con el comando mkvirtualenv.

+ +

Puesta en marcha del entorno virtual en Mac OS X

+ +

El ajuste de virtualenvwrapper en Mac OS X es casi idéntico a como es en Ubuntu. 

+ +

Instalar virtualenvwrapper (y virtualenv incluido en el paquete) usando pip como se muestra a continuación.

+ +
sudo pip3 install virtualenvwrapper
+ +

A continuación añadir las siguientes líneas al final del fichero de inicio de tu shell. Son las mismas líneas que para Ubuntu, pero el fichero de inicio se llama de forma diferente .bash_profile y está oculto en tu directorio de inicio.

+ +
export WORKON_HOME=$HOME/.virtualenvs
+export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
+export PROJECT_HOME=$HOME/Devel
+source /usr/local/bin/virtualenvwrapper.sh
+ +

Nota: Si no puedes encontrar .bash-profile para editar en el finder, puedes también abrirlo usando nano.

+ +

Los comandos parecen algo como lo siguiente.

+ +
cd ~  # Navegar a mi directorio de inicio
+ls -la # Listar el contenido del directorio. Deberias ver .bash_profile
+nano .bash_profile # Abrir el fichero en el editor de texto nano, en el terminal
+# Avanzar hast el final del fichero, y copiar y pegar las lineas de arrriba
+# Usar Ctrl+X para salir de nano, Elegir Y para guardar el fichero.
+ +

A continuación recargar el fichero de inicio realizando la siguiente llamada en el terminal:

+ +
source ~/.bash_profile
+ +

En este punto deberías ver un puñado de scripts empezando a ejecutarse (los mismos scripts que para la instalación en Ubuntu). Deberías ser ahora capaz de crear un nuevo entorno virtual con el comado mkvirtualenv.

+ +

Puesta en marcha del entorno virtual en Windows 10

+ +

Instalar virtualenvwrapper-win es incluso más simple que poner en marcha virtualenvwrapper porque no necesitas configurar donde almacena la herramienta la información del entorno (hay un valor por defecto). Todo lo que necesitas hacer es ejecutar el siguiente comando en la consola de comandos en línea:

+ +
pip3 install virtualenvwrapper-win
+ +

Y a continuación ya puedes crear un nuevo entorno virtual con mkvirtualenv

+ +

Creación de un entorno virtual

+ +

Una vez que hayas instalado virtualenvwrapper o virtualenvwrapper-win trabajar con entornos virtuales es muy similar en todas las plataformas.

+ +

Ahora puedes crear un nuevo entorno virtual con el comando mkvirtualenv. A medida que se ejecuta este comando verás que se va poniendo en marcha el entorno (lo que verás es ligeramente específico de la plataforma). Cuando se completa el comando el nuevo entorno virtual estará activo — podrás comprobarlo porque el comienzo del prompt será el nombre del entorno entre paréntesis (como se muestra abajo).

+ +
$ mkvirtualenv my_django_environment
+
+Running virtualenv with interpreter /usr/bin/python3
+...
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
+(my_django_environment) ubuntu@ubuntu:~$
+
+ +

Una vez que estás dentro del entorno virutal puedes instalar Django e iniciar el desarrollo.

+ +
+

Nota: De ahora en adelante en este artículo (y por ende en el módulo) asume por favor que todos los comandos se ejecutan en un entorno virtual Python como el que acabamos de poner en marcha arriba.

+
+ +

Uso de un entorno virtual

+ +

Hay sólo otros pocos comandos útiles que deberías conocer (hay más en la documentación de la herramienta, pero éstos son los que usarás de forma habitual:

+ + + + + +

Instalación de Django

+ +

Una vez que has creado el entorno virtual, y realizado la llamada workon  para entrar en él, puedes usar pip3 para instalar Django. 

+ +
pip3 install django
+
+ +

Puedes comprobar que está instalado Django ejecutando el siguiente comando (esto sólo comprueba que Python puede encontrar el módulo Django):

+ +
# Linux/Mac OS X
+python3 -m django --version
+ 1.11.7
+
+# Windows
+py -3 -m django --version
+ 1.11.7
+
+ +
+

Nota: En Windows se lanzan scripts Python 3 añadiendo como prefijo del comando con py -3, mientras que en Linux/Mac OSX, el comando es python3.

+
+ +
+

Importante: El resto de este modulo usa, para invocar Python 3, el comando Linux (python3) . Si estás trabajando en Windows   simplemente reemplazar este prefijo con: py -3

+
+ +

Comprobación de tu instalación

+ +

La prueba de arriba funciona, pero no es muy divertida. Una comprobación más interesante es crear un esqueleto de proyecto y ver si funciona. Para hacer ésto, navega primero en tu consola de comandos/terminal a donde quieras almacenar tus aplicaciones Django. Crea una carpeta para la comprobación de tu sitio y navega a ella.

+ +
mkdir django_test
+cd django_test
+
+ +

Puedes crear a continuación un nuevo esqueleto de sitio llamado "mytestsite"  usando la herramienta django-admin como se muestra a continuación. Después de crear el sitio puedes navegar a la carpeta donde encontrarás el script principal para la gestión de proyectos, llamado manage.py.

+ +
django-admin startproject mytestsite
+cd mytestsite
+ +

Podemos arrancar el servidor web de desarrollo desde esta carpeta usando manage.py y el comando runserver, como se muestra.

+ +
$ python3 manage.py runserver 
+Performing system checks...
+
+System check identified no issues (0 silenced).
+
+You have 13 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
+Run 'python manage.py migrate' to apply them.
+
+September 19, 2016 - 23:31:14
+Django version 1.10.1, using settings 'mysite.settings'
+Starting development server at http://127.0.0.1:8000/
+Quit the server with CONTROL-C.
+
+ +
+

Nota: El comando anterior muestra el comando Linux/Mac OS X. En este punto ¡puedes ignorar las advertencias sobre "13 unapplied migration(s)"!

+
+ +

Una vez que tengas funcionando el servidor puedes ver el sitio navegando a la siguiente URL en tu explorador web local : http://127.0.0.1:8000/. Deberías ver un sitio parecido a este:

+ +

The home page of the skeleton Django app.

+ + + +

Sumario

+ +

Ahora tienes levantado y funcionando en tu computadora tu entorno de desarrollo Django .

+ +

En la sección de pruebas viste brevemente cómo crear un nuevo sitio web Django usando django-admin startproject, y hacerlo funcionar en tu explorador usando el servidor web de desarrollo (python3 manage.py runserver).

+ +

En el siguiente artículo expandimos este proceso, construyendo una aplicación web simple pero completa.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/django_assessment_blog/index.html b/files/es/learn/server-side/django/django_assessment_blog/index.html new file mode 100644 index 0000000000..cb5ac7ad88 --- /dev/null +++ b/files/es/learn/server-side/django/django_assessment_blog/index.html @@ -0,0 +1,307 @@ +--- +title: 'Evaluación: DIY Django mini blog' +slug: Learn/Server-side/Django/django_assessment_blog +translation_of: Learn/Server-side/Django/django_assessment_blog +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
+ +

En esta evaluación usarás el conocimiento de Django que has adquirido en el módulo Framework Web Django (Python) para crear un blog muy básico.

+ + + + + + + + + + + + +
Requisitos Previos:Before attempting this assessment you should have already worked through all the articles in this module.
Objetivo:Comprender los fundamentos de Django , incluidos las configuraciones de URL , modelos, vistas, formularios y  templates.
+ +

Resumen del proyecto

+ +

Las paginas que necesitan ser mostradas, sus URLs, y otros requisitos son listados debajo: 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PaginaURLRequisitos
Home page/ and /blog/Una pagina inicial que describa el sitio
Lista de todos las publicaciones del blog/blog/blogs/ +

Lista de todos las publicaciones del blog:

+ +
    +
  • Accessible to all users from a sidebar link.
    • +
  • List sorted by post date (newest to oldest).
    • +
  • List paginated in groups of 5 articles.
    • +
  • List items display the blog title, post date, and author.
    • +
  • Blog post names are linked to blog detail pages.
    • +
  • Blogger (author names) are linked to blog author detail pages.
    • +
+
Blog autor (blogger) pagina de detalles/blog/blogger/<author-id> +

Information for a specified author (by id) and list of their blog posts:

+ +
    +
  • Accessible to all users from author links in blog posts etc.
    • +
  • Contains some biographical information about the blogger/author.
    • +
  • List sorted by post date (newest to oldest).
    • +
  • Not paginated.
    • +
  • List items display just the blog post name and post date.
    • +
  • Blog post names are linked to blog detail pages.
    • +
+
Blog post detail page/blog/<blog-id> +

Blog post details.

+ +
    +
  • Accessible to all users from blog post lists.
    • +
  • Page contains the blog post: name, author, post date, and content.
    • +
  • Comments for the blog post should be displayed at bottom.
    • +
  • Comments should be sorted in order: oldest to most recent.
    • +
  • Contains link to add comments at end for logged in users (see Comment form page)
    • +
  • Blog posts and comments need only display plain text. There is no need to support any sort of HTML markup (e.g. links, images, bold/italic, etc).
    • +
+
List of all bloggers/blog/bloggers/ +

List of bloggers on system:

+ +
    +
  • Accessible to all users from site sidebar
    • +
  • Blogger names are linked to Blog author detail pages.
    • +
+
Comment form page/blog/<blog-id>/create +

Create comment for blog post:

+ +
    +
  • Accessible to logged-in users (only) from link at bottom of blog post detail pages.
    • +
  • Displays form with description for entering comments (post date and blog is not editable).
    • +
  • After a comment has been posted, the page will redirect back to the associated blog post page.
    • +
  • Users cannot edit or delete their posts.
    • +
  • Logged out users will be directed to the login page to log in, before they can add comments. After logging in, they will be redirected back to the blog page they wanted to comment on.
    • +
  • Comment pages should include the name/link to the blogpost being commented on.
    • +
+
User authentication pages/accounts/<standard urls> +

Standard Django authentication pages for logging in, out and setting the password:

+ +
    +
  • Login/out should be accessible via sidebar links.
    • +
+
Admin site/admin/<standard urls> +

Admin site should be enabled to allow create/edit/delete of blog posts, blog authors and blog comments (this is the mechanism for bloggers to create new blog posts):

+ +
    +
  • Admin site blog posts records should display the list of associated comments inline (below each blog post).
    • +
  • Comment names in the Admin site are created by truncating the comment description to 75 characters.
    • +
  • Other types of records can use basic registration.
    • +
+
+ +

In addition you should write some basic tests to verify:

+ + + +
+

Note: There are of course many other tests you can run. Use your discretion, but we'll expect you to do at least the tests above.

+
+ +

The following section shows screenshots of a site that implements the requirements above.

+ +

Screenshots

+ +

The following screenshot provide an example of what the finished program should output.

+ +

List of all blog posts

+ +

This displays the list of all blog posts (accessible from the "All blogs" link in the sidebar). Things to note:

+ + + +

List of all blogs

+ +

List of all bloggers

+ +

This provides links to all bloggers, as linked from the "All bloggers" link in the sidebar. In this case we can see from the sidebar that no user is logged in.

+ +

List of all bloggers

+ +

Blog detail page

+ +

This shows the detail page for a particular blog.

+ +

Blog detail with add comment link

+ +

Note that the comments have a date and time, and are ordered from oldest to newest (opposite of blog ordering). At the end we have a link for accessing the form to add a new comment. If a user is not logged in we'd instead see a suggestion to log in.

+ +

Comment link when not logged in

+ +

Add comment form

+ +

This is the form to add comments. Note that we're logged in. When this succeeds we should be taken back to the associated blog post page.

+ +

Add comment form

+ +

Author bio

+ +

This displays bio information for a blogger along with their blog posts list.

+ +

Blogger detail page

+ +

Steps to complete

+ +

The following sections describe what you need to do.

+ +
    +
  1. Create a skeleton project and web application for the site (as described in Django Tutorial Part 2: Creating a skeleton website). You might use 'diyblog' for the project name and 'blog' for the application name.
    2. +
  2. Create models for the Blog posts, Comments, and any other objects needed. When thinking about your design, remember: +
      +
    • Each comment will have only one blog, but a blog may have many comments.
      • +
    • Blog posts and comments must be sorted by post date.
      • +
    • Not every user will necessarily be a blog author though any user may be a commenter.
      • +
    • Blog authors must also include bio information.
      • +
    +
    3. +
  3. Run migrations for your new models and create a superuser.
    4. +
  4. Use the admin site to create some example blog posts and blog comments.
    5. +
  5. Create views, templates, and URL configurations for blog post and blogger list pages.
    6. +
  6. Create views, templates, and URL configurations for blog post and blogger detail pages.
    7. +
  7. Create a page with a form for adding new comments (remember to make this only available to logged in users!)
    8. +
+ +

Hints and tips

+ +

This project is very similar to the LocalLibrary tutorial. You will be able to set up the skeleton, user login/logout behaviour, support for static files, views, URLs, forms, base templates and admin site configuration using almost all the same approaches.

+ +

Some general hints:

+ +
    +
  1. The index page can be implemented as a basic function view and template (just like for the locallibrary).
    2. +
  2. The list view for blog posts and bloggers, and the detail view for blog posts can be created using the generic list and detail views.
    3. +
  3. The list of blog posts for a particular author can be created by using a generic list Blog list view and filtering for blog object that match the specified author. +
      +
    • You will have to implement get_queryset(self) to do the filtering (much like in our library class LoanedBooksAllListView) and get the author information from the URL.
      • +
    • You will also need to pass the name of the author to the page in the context. To do this in a class-based view you need to implement get_context_data() (discussed below).
      • +
    +
    4. +
  4. The add comment form can be created using a function-based view (and associated model and form) or using a generic CreateView. If you use a CreateView (recommended) then: +
      +
    • You will also need to pass the name of the blog post to the comment page in the context (implement get_context_data() as discussed below).
      • +
    • The form should only display the comment "description" for user entry (date and associated blog post should not be editable). Since they won't be in the form itself, your code will need to set the comment's author in the form_valid() function so it can be saved into the model (as described here — Django docs). In that same function we set the associated blog. A possible implementation is shown below (pk is a blog id passed in from the URL/URL configuration). + 
          def form_valid(self, form):
+        """
+        Add author and associated blog to form data before setting it as valid (so it is saved to model)
+        """
+        #Add logged-in user as author of comment
+        form.instance.author = self.request.user
+        #Associate comment with blog based on passed id
+        form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk'])
+        # Call super-class form validation behaviour
+        return super(BlogCommentCreate, self).form_valid(form)
+
      +
      • +
    • You will need to provide a success URL to redirect to after the form validates; this should be the original blog. To do this you will need to override get_success_url() and "reverse" the URL for the original blog. You can get the required blog ID using the self.kwargs attribute, as shown in the form_valid() method above.
      • +
    +
    5. +
+ +

We briefly talked about passing a context to the template in a class-based view in the Django Tutorial Part 6: Generic list and detail views topic. To do this you need to override get_queryset() (first getting the existing context, updating it with whatever additional variables you want to pass to the template, and then returning the updated context. For example, the code fragment below shows how you can add a blogger object to the context based on their BlogAuthor id.

+ +
class SomeView(generic.ListView):
+    ...
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get a context
+        context = super(SomeView, self).get_context_data(**kwargs)
+        # Get the blogger object from the "pk" URL parameter and add it to the context
+        context['blogger'] = get_object_or_404(BlogAuthor, pk = self.kwargs['pk'])
+        return context
+
+ +

Assessment

+ +

The assessment for this task is available on Github here. This assessment is primarily based on how well your application meets the requirements we listed above, though there are some parts of the assessment that check your code uses appropriate models, and that you have written at least some test code. When you're done, you can check out our the finished example which reflects a "full marks" project.

+ +

Once you've completed this module you've also finished all the MDN content for learning basic Django server-side website programming! We hope you enjoyed this module and feel you have a good grasp of the basics!

+ +

{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}

+ +

 

+ +

En este modulo

+ + diff --git a/files/es/learn/server-side/django/forms/index.html b/files/es/learn/server-side/django/forms/index.html new file mode 100644 index 0000000000..4160e537b6 --- /dev/null +++ b/files/es/learn/server-side/django/forms/index.html @@ -0,0 +1,661 @@ +--- +title: 'Tutorial de Django Parte 9: Trabajo con formularios' +slug: Learn/Server-side/Django/Forms +translation_of: Learn/Server-side/Django/Forms +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/authentication", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
+ +

En este tutorial te mostraremos cómo trabajar con Formularios HTML en Django, y en particular, la forma más fácil de escribir formularios para crear, actualizar y borrar instancias de modelo. Como parte de esta demostración extenderemos el sitio web LocalLibrary de manera que los bibliotecarios puedan renovar libros, y crear, actualizar y borrar autores utilizando nuestros propios formularios (en vez de utilizar la aplicación de administración).

+ + + + + + + + + + + + +
Requisitos previos:Completar todos los temas de tutoriales anteriores, incluyendo Tutorial Django Parte 8: Autenticación y permisos de usuarios.
Objectivo:Comprender como escribir formularios para obtener informacion de los usuarios y actualizar la base de datos. Comprender cómo las vistas de edición basadas en clase genérica pueden simplificar enormemente la creación de formularios trabajando con un solo modelo.
+ +

Visión General

+ +

Un Formulario HTML es un conjunto de uno o más campos/widgets en una página web, que pueden ser usados para recolectar información de los usuarios para el envío a un servidor. Los formularios son un mecanismo flexible para recolectar datos de entrada porque son widgets adecuados para ingresar diferentes tipos de datos, incluyendo campos de texto, checkboxes, radio buttons, selector de fechas, etc. Los formularios son también una forma relativamente segura de compartir datos con el servidor, ya que permiten enviar información en peticiones POST con protección de falsificación de solicitud entre sitios.

+ +

Si bien nosotros aún no hemos creado ningún formulario en este tutorial todavia, ya lo hemos encontrado en el sitio de administración de Django; por ejemplo, la captura de pantalla  de abajo muestra un formulario para editar uno de nuestros modelos de Libro, compuesto de un número de listas de selección y editores de texto.

+ +

Admin Site - Book Add

+ +

Trabajar con formularios puede ser complicado! Los desarrolladores deben de escribir código HTML para el formulario, validar y adecuadamente limpiar los datos ingresados en el servidor (y posiblemente también en el browser o navegador), volver a publicar el formulario con mensajes de error para informar a los usuarios de cualquier campo invalido, manejar los datos cuando hayan sido enviados exitosamente y finalmente, responder al usuario de alguna manera, para indicar el éxito de la operación.  Django Forms  elimina mucho del trabajo de todos estos pasos, al proporcionar un marco de trabajo que le permite definir formularios y sus campos a travéz de programación y luego, utilizar estos objetos para generar el código HTML del formulario y manejar gran parte de la validación y la interacción del usuario.

+ +

En este tutorial vamos a mostrarle algunas de las formas de crear y trabajar con formularios y en particular, cómo las vistas genéricas de edición de formularios pueden significativamente reducir la cantidad del trabajo necesario para crear formularios para manejar sus modelos. En el camino iremos extendiendo nuestra aplicación LocalLibrary  por agregar un formulario para permitir a los  bibliotecarios renovar libros de la biblioteca y crearemos páginas para crear, editar o eliminar libros y autores (reproduciendo una versión básica del formulario mostrado arriba para editar libros).

+ +

Formularios HTML

+ +

Primero, una breve revisión de Formularios HTML. Considere un  simple formulario HTML, con un solo campo de texto para entrar el nombre de algun "equipo" y su etiqueta asociada:

+ +

Simple name field example in HTML form

+ +

El formulario es definido en HTML como una colección de elementos dentro de las etiquetas  <form>...</form>, conteniendo por lo menos un elemento de entrada - input de tipo enviar - type="submit".

+ +
<form action="/team_name_url/" method="post">
+    <label for="team_name">Enter name: </label>
+    <input id="team_name" type="text" name="name_field" value="Default name for team.">
+    <input type="submit" value="OK">
+</form>
+ +

Si bien acá solo tenemos un campo de texto para ingresar el nombre del equipo, un formulario puede tener cualquier número de otros elementos de entrada y sus etiquetas asociadas. El tipo del atributo del campo - type  define que clase de widget será mostrado. El nombre - name y el identificador - id del campo son usados para identificar el campo en JavaScript/CSS/HTML, mientrras que el valor - value define el valor inicial para el campo cuando este se muestra por primera vez. La etiqueta del equipo correspondiente es especificada utilizando la etiqueta - label (consulte "Enter name" arriba), con un campo  for  que contiene el valor de identificación  id de la entrada asociada input.

+ +

La entrada de envío - submit se mostrará como un botón (de forma predeterminada)  que el usuario puede presionar para cargar los datos en todos los demás elementos de entrada en el formulario al servidor (en este caso, solo el nombre del equipo - team_name). Los atributos del formulario definen el metodo -  method de HTTP usado para enviar los datos y el destino de los datos al servidor (action):

+ + + +

El rol del servidor es primero procesar el estado inicial del formulario ya sea conteniendo campos en blanco o completados previamente con valores inciales. Después de que el usuario presiona el botón de Enviar, el servidor recibirá los datos del formulario con valores del navegador web y deberá validar  la información. Si el formulario contiene datos inválidos, el servidor deberá desplegar el formulario de nuevo, esta vez con datos ingresados por el usuario en campos "válidos" y mensajes para describir el problema en los campos con valor inválidos. Una vez el servidor recibe una petición con todos los datos de formulario válidos, este puede realizar una acción apropiada (por ejemplo, guardando los datos, regresando el resultado de una búsqueda, cargando un archivo, etc.) y luego notificar al usuario.

+ +

Como puede imaginar, crear el código HTML, validar los datos retornados, redesplegar los datos ingresados con errores reportados si fuera necesario y realizar las operaciones deseadas sobre los datos válidos puede todo tomar bastante esfuerzo para "hacerlo bien". Django hace esto mucho más fácil por quitar parte del trabajo pesado y código repetitivo!

+ +

Proceso del manejo de formularios de Django

+ +

El manejo de formularios de Django utiliza las mismas técnicas que aprendimos en tutoriales anteriores (para mostrar información sobre nuestros modelos):  la vista recibe una solicitud, realiza cualquier acción requerida incluyendo leer datos de los modelos, luego generar y devolver una página HTML (de una platilla, en la que pasamos un contexto conteniendo los datos a ser desplegados).  Lo que hace las cosas más complicadas  es que el servidor también necesita poder procesar los datos proporcionados por el usuario y volver a mostrar la página si hay algún error.

+ +

A continuación se muestra un diagram de flujo del proceso de cómo Django maneja las solicitudes de formulario, comenzando con una solicitud de una página que contiene un formulario (mostrado en verde).

+ +

Updated form handling process doc.

+ +

Basado en el diagrama de anterior, las principales pasos que  hace el proceso del manejo de formularios de Django son:

+ +
    +
  1. Mostrar el formulario predeterminado la primera vez que es solicitado por el usuario. +
      +
    • El formulario puede contener campos en blanco (por ejemplo, si está creando un registro nuevo), o puede estar rellenado previamente con valores iniciales (por ejemplo, si está modificando un registro o si tiene valores iniciales predeterminados útiles).
      • +
    • El formulario se conoce como no vinculado en este punto porque no esta asociado con ningún dato ingresado por el usuario (aunque pueda tener valores iniciales).
      • +
    +
    2. +
  2. Recibir datos de una solicitud de envío y vincularlo al formulario. +
      +
    • La vinculacion de datos al formulario significa que los datos ingresados por el usuario y cualquier error están disponibles cuando necesitamos volver a desplegar el formulario. 
      • +
    +
    3. +
  3. Limpiar y validar los datos. Clean and validate the data. +
      +
    • La limpieza de los datos realiza una sanitización de la entrada (por ejemplo, remover caracteres no válidos que podrían ser usados para enviar contenido malicioso al servidor) y convertirlos en tipos consistente de Python.
      • +
    • La validación verifica que los valores sean apropiados para el campo (por ejemplo, que esten en el rango correcto de fechas, no sean demasiado cortos ni demasiado largos, etc.)
      • +
    +
    4. +
  4. Si algún dato es no válido, volver a mostrar el formulario, esta vez con cualquier valor rellenado por el usuario y los mensajes de error para los campos con problemas.
    5. +
  5. Si todos los datos son válidos, realizar las acciones requeridas (por ejemplo, guardar los datos, enviar un correo electrónico, devolver el resultado de una búsqueda, cargar un archivo, etc)
    6. +
  6. Una vez todas las acciones se hayan completado, redirijir al usuario a otra página
    7. +
+ +

Django provee una serie de herramientas y enfoques para ayudarlo con las tareas detalladas anteriormente. La más fundamental es la clase Form, la cuál simplifica la generación de formularios HTML y la limpieza y validación de datos. En la siguiente sección describimos cómo funcionan los formularios usando el ejemplo práctico de una página para permitir a los bibliotecarios renovar libros.

+ +
+

Nota:  Comprender como se usa la clase Form  lo ayudará cuando analicemos las clases de marco de formulario de más "alto nivel" de Django.

+
+ +

Renew-book form usando un Form y la funcion view

+ +

A continuación, vamos a añadir una página que permita a los bibilotecarios renovar los libros prestados. Para hacer esto crearemos un formulario que permita a los usuarios introducir una fecha. Rellenaremos el campo con un valor inicial de 3 semanas desde la fecha actual (el periodo de préstamo normal), y añadiremos alguna validación para asegurar que el bibilotecario no pueda introducir una fecha pasada o una demasiado lejana en el futuro. Cuando se haya introducido una fecha válida, la escribiremos sobre el campo BookInstance.due_back del registro actual.

+ +

El ejemplo utilizará una vista basada en funciones y una clase Form. Las próximas secciones explican como los formularios funcionan, y los cambios que necesitas realizar para continuar adelante con nuestro proyecto LocalLibrary.

+ +

Clase Form

+ +

La clase Form es el corazón del sistema de manejo de formularios de Django. Especifica los campos en el formulario, su diseño, widgets de visualización, etiquetas, valores iniciales, valores válidos y (una vez validados) los mensajes de error asociados con campos no válidos. La clase también proporciona métodos para renderizarse en plantillas usando formatos predefinidos (tablas, listas, etc.) o para obtener el valor de cualquier elemento (permitiendo el renderizado manual de grano fino).

+ +

Declarando un Form

+ +

La sintaxis de declaración para un formulario es muy similar a la de declarar un modelo, y comparte los mismos tipos de campo (y algunos parámetros similares). Esto tiene sentido porque en ambos casos debemos asegurarnos de que cada campo maneja los tipos correctos de datos, está restringido a datos válidos y tiene una descripción para la visualización / documentación.

+ +

Para crear un formulario (Form) es necesario importar la libreria forms, derivada de la clase Form, y tambien declarar los campos del formulario. A continuación se muestra una clase de formulario muy básica para nuestro formulario de renovación de libros de la biblioteca:

+ +
from django import forms
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+ +

Campos del Form

+ +

En este caso, tenemos un único DateField para ingresar la fecha de renovación que se mostrará en HTML con un valor en blanco, la etiqueta predeterminada "Fecha de renovación:" y algún texto de uso útil: "Ingrese una fecha entre ahora y 4 semanas (valor predeterminado 3 semanas)." Como no se especifica ninguno de los otros argumentos opcionales, el campo aceptará fechas utilizando los input_formats: AAAA-MM-DD (2016-11-06), MM / DD / AAAA (26/02/2016), MM / DD / AA ( 25/10/16), y se representará con el widget predeterminado: DateInput.

+ +

Hay muchos otros tipos de campos de formulario, que reconocerá en gran medida por su similitud con las clases de campo de modelo equivalentes: BooleanField, CharField, ChoiceField, TypedChoiceField, DateField, DateTimeField, DecimalField, DurationField, EmailField, FileField, FilePathField, FloatField, ImageField, IntegerField, GenericIPAddressField, MultipleChoiceField, TypedMultipleChoiceField, NullBooleanField, RegexField, SlugField, TimeField, URLField, UUIDField, ComboField, MultiValueField, SplitDateTimeField, ModelMultipleChoiceField, ModelChoiceField​​​​.

+ +

Los argumentos que son comunes a la mayoría de los campos se enumeran a continuación (estos tienen valores predeterminados sensibles):

+ + + +

Validación

+ +

Django proporciona numerosos lugares donde puede validar sus datos. La forma más fácil de validar un solo campo es anular el método clean_<fieldname>() para el campo que desea verificar. Entonces, por ejemplo, podemos validar lo ingresado renewal_date los valores son entre ahora y 4 semanas mediante la implementación clean_renewal_date() como se muestra abajo.

+ +
from django import forms
+
+from django.core.exceptions import ValidationError
+from django.utils.translation import ugettext_lazy as _
+import datetime #for checking renewal date range.
+
+class RenewBookForm(forms.Form):
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        #Check date is not in past.
+        if data < datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+
+        #Check date is in range librarian allowed to change (+4 weeks).
+        if data > datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data
+ +

Hay dos cosas importantes a tener en cuenta. El primero es que obtenemos nuestros datos usando self.cleaned_data['renewal_date'] y que devolvemos estos datos si los cambiamos o no al final de la función. Este paso nos permite "limpiar" y desinfectar los datos de entrada potencialmente insegura utilizando los validadores predeterminados, y convertirlos al tipo estándar correcto para los datos (en este caso, un objeto Python  datetime.datetime).

+ +

El segundo punto es que si un valor cae fuera de nuestro rango, elevamos un ValidationError, especificando el texto de error que queremos mostrar en el formulario si se ingresa un valor no válido. El ejemplo anterior también envuelve este texto en uno de las funciones de traduccion de Django ugettext_lazy() (importado como _()), lo cual es una buena práctica si desea traducir su sitio más tarde.

+ +
+

Nota: Existen muchos otros métodos y ejemplos para validar formularios en Validacion de Formularios  y campos (Django docs). Por ejemplo, en los casos en que tiene varios campos que dependen unos de otros, puede anular la función Form.clean() function y colocar un ValidationError.

+
+ +

¡Eso es todo lo que necesitamos para el formulario en este ejemplo!

+ +

Copia el Formulario

+ +

Crea y abre el archivo locallibrary/catalog/forms.py y copie el listado completo del código del bloque anterior en él.

+ +

Configuracion del URL

+ +

Antes de crear nuestra vista, agreguemos una configuración de URL para la página de renovar libros. Copie la siguiente configuración en la parte inferior de  locallibrary/catalog/urls.py.

+ +
urlpatterns += [
+    url(r'^book/(?P<pk>[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'),
+]
+ +

La configuración de URL redirigirá las URL con el formato  /catalog/book/<bookinstance id>/renew/ a la función llamada renew_book_librarian() en views.py, y envia el id de BookInstance como parametro llamado pk.

+ +
+

Nota: Podemos nombrar nuestros datos de URL capturados "pk" como queramos, porque tenemos un control completo sobre la función de vista (no estamos usando una clase de vista de detalles genérica que espere parámetros con un nombre determinado). sin embargo pk, abreviatura de "primary key", es una convención razonable de usar!

+
+ +

View

+ +

Como se discutió en el proceso de manejo de formularios de Django arriba, la vista debe presentar el formulario predeterminado cuando se llama por primera vez y luego volver a representarlo con mensajes de error si los datos no son válidos, o procesar los datos y redirigirlos a una nueva página si los datos son válidos. Para realizar estas diferentes acciones, la vista debe poder saber si se está llamando por primera vez para presentar el formulario predeterminado, o una vez posterior para validar los datos.

+ +

Para formularios que usan una solicitud POST  para enviar información al servidor, el patrón más común es que la vista pruebe con el tipo de solicitud  POST  (if request.method == 'POST':) para identificar las solicitudes de validación de formularios y GET (usando una condición else ) para identificar la solicitud de creación de formulario inicial. Si desea enviar sus datos utilizando una solicitud GET  entonces, un enfoque típico para identificar si esta es la primera invocación de vista o posterior es leer los datos del formulario (por ejemplo, leer un valor oculto en el formulario).

+ +

El proceso de renovacion de un libro escribira cambios en nuestra base de datos , entonces por convencion usaremos una peticion de tipo POST. El siguiente fragmento de código muestra el patrón (muy estándar) para este tipo de vista de funciones. 

+ +
from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.core.urlresolvers import reverse
+import datetime
+
+from .forms import RenewBookForm
+
+def renew_book_librarian(request, pk):
+    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form.
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+ +

Primero importamos nuestro formulario (RenewBookForm) y una serie de otros objetos / métodos útiles utilizados en el cuerpo de la función de vista:

+ + + +

En la vista, primero usamos el argumento pk argument en  get_object_or_404() para obtener el actual BookInstance (si esto no existe, la vista se cerrará inmediatamente y la página mostrará un error "no encontrado"). Si no se trata de una solicitud POST (manejada por la cláusula else), creamos el formulario predeterminado que pasa un valor inicial (initial) para el campo renewal_date (como se muestra en negrita a continuación, esto es 3 semanas desde la fecha actual)..

+ +
    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a GET (or any other method) create the default form
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+ +

Después de crear el formulario, llamamos render() para crear la página HTML, especificando la plantilla y un contexto que contiene nuestro formulario. En este caso, el contexto también contiene nuestro BookInstance, que usaremos en la plantilla para proporcionar información sobre el libro que estamos renovando.

+ +

Sin embargo, si esto es una solicitud POST, entonces crearemos nuestro objeto form y llenarlo con datos de la solicitud. Este proceso se llama "enlace" (binding) y nos permite validar el formulario. Luego verificamos si el formulario es válido, que ejecuta todo el código de validación en todos los campos, incluido el código genérico para verificar que nuestro campo de fecha sea realmente una fecha válida y nuestra funcion del formulario clean_renewal_date() chequea la fecha que tenga un rango correcto. 

+ +
    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+ +

Si el formulario no es válido llamamos render() de nuevo, pero esta vez el valor del formulario pasado en el contexto incluirá mensajes de error.

+ +

Si el formulario es válido, entonces podemos comenzar a usar los datos, accediendo a ellos a través del atributo form.cleaned_data (ejemplo data = form.cleaned_data['renewal_date']). Aquí solo guardamos los datos en el valor due_back asociado al objeto BookInstance.

+ +
+

Importante: Si bien también puede acceder a los datos del formulario directamente a través de la solicitud (por ejemplo request.POST['renewal_date'] o request.GET['renewal_date'] (si se esta usando una solicitud GET) esto NO es recomendable. Los datos limpios se desinfectan, validan y convierten en tipos compatibles con Python.

+
+ +

El paso final en la parte de manejo de formularios de la vista es redirigir a otra página, generalmente una página de "éxito". En este caso usamos HttpResponseRedirect y reverse() para redirigir a la vista llamada  'all-borrowed'(esto fue creado como el "desafío" en Django Tutorial Part 8: User authentication and permissions).Si no creó esa página, considere redirigir a la página de inicio en la URL '/').

+ +

Eso es todo lo necesario para el manejo del formulario en sí, pero aún debemos restringir el acceso a la vista a los bibliotecarios. Probablemente deberíamos crear un nuevo permiso en BookInstance ("can_renew"),pero para simplificar las cosas aquí solo usamos la funcion decorator @permission_required  con nuestro existente permiso can_mark_returned.

+ +

La vista final es, por lo tanto, como se muestra a continuación. Copie esto en la parte inferior de locallibrary/catalog/views.py.

+ +
from django.contrib.auth.decorators import permission_required
+
+from django.shortcuts import get_object_or_404
+from django.http import HttpResponseRedirect
+from django.url import reverse
+import datetime
+
+from .forms import RenewBookForm
+
+@permission_required('catalog.can_mark_returned')
+def renew_book_librarian(request, pk):
+    """
+    View function for renewing a specific BookInstance by librarian
+    """
+    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form.
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+
+ +

La plantilla

+ +

Crea la plantilla html referenciada en la vista dentro del directorio (/catalog/templates/catalog/book_renew_librarian.html) y copia el codigo a continuacion dentro del archivo que creaste:

+ +
{% extends "base_generic.html" %}
+{% block content %}
+
+    <h1>Renew: \{{bookinst.book.title}}</h1>
+    <p>Borrower: \{{bookinst.borrower}}</p>
+    <p{% if bookinst.is_overdue %} class="text-danger"{% endif %}>Due date: \{{bookinst.due_back}}</p>
+
+    <form action="" method="post">
+        {% csrf_token %}
+        <table>
+        \{{ form }}
+        </table>
+        <input type="submit" value="Submit" />
+    </form>
+
+{% endblock %}
+ +

La mayor parte de esto será completamente familiar de los tutoriales anteriores. Extendemos la plantilla base y luego redefinimos el bloque de contenido. Podemos hacer referencia\{{bookinst}} (y sus variables) porque se pasó al objeto de contexto en la funci'on render(),y los usamos para colocar el título del libro, el prestatario y la fecha de vencimiento original.

+ +

El código del formulario es relativamente simple. Primero declaramos las etiquetas del form,especificando dónde se debe enviar el formulario (action) y el  metodo para enviar los datos (en este caso, una "POST HTTP"), si recuerda el HTML Forms resumen en la parte superior de la página, un espacio vacío actioncomo se muestra, significa que los datos del formulario se volverán a publicar en la URL actual de la página (¡que es lo que queremos!). Dentro de las etiquetas definimos la enntrada (input) submit, que un usuario puede presionar para enviar los datos. Esto {% csrf_token %} es agregado justo dentro de las etiquetas de formulario es parte de la protección de falsificación entre sitios de Django.

+ +
+

Nota: Agregue el {% csrf_token%} a cada plantilla de Django que cree que use POST para enviar datos. Esto reducirá la posibilidad de que usuarios malintencionados secuestran formularios.

+
+ +

Todo lo que queda es la variable de la plantilla  \{{form}}, que pasamos a la plantilla en el diccionario de contexto. Quizás, como era de esperar, cuando se usa como se muestra, proporciona la representación predeterminada de todos los campos del formulario, incluidas sus etiquetas, widgets y texto de ayuda; la representación es la que se muestra a continuación:

+ +
<tr>
+  <th><label for="id_renewal_date">Renewal date:</label></th>
+  <td>
+    <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required />
+    <br />
+    <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+  </td>
+</tr>
+
+ +
+

Nota: Quizás no sea obvio porque solo tenemos un campo, pero de forma predeterminada cada campo se define en su propia fila de tabla (razón por la cual la variable está dentro de la etiqueta table  arriba).​​​​Esta misma representación (rendering) se proporciona si hace referencia a la variable de plantilla \{{ form.as_table }}.

+
+ +

Si tuviera que ingresar una fecha no válida, también obtendría una lista de los errores que se muestran en la página (en negrita a continuación).

+ +
<tr>
+  <th><label for="id_renewal_date">Renewal date:</label></th>
+   <td>
+      <ul class="errorlist">
+        <li>Invalid date - renewal in past</li>
+      </ul>
+      <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required />
+      <br />
+      <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+    </td>
+</tr>
+ +

Otras formas de usar variable de la plantilla de formulario

+ +

Usando \{{form}} como se muestra arriba, cada campo se representa como una fila de la tabla. También puede representar cada campo como un elemento de la lista (usando \{{form.as_ul}} ) o como un parrafo (usando \{{form.as_p}}).

+ +

Lo que es aún más genial es que puede tener un control completo sobre la representación de cada parte del formulario, indexando sus propiedades mediante la notación de puntos. Entonces, por ejemplo, podemos acceder a una serie de elementos separados de los campos de renewal_date-

+ + + +

Para obtener más ejemplos de cómo reproducir manualmente los formularios en plantillas y recorrer dinámicamente los campos de la plantilla, vea Working with forms > Rendering fields manually (Django docs).

+ +

Probando la página

+ +

Si aceptó el "desafío" en Django Tutorial Part 8: User authentication and permissions tendrá una lista de todos los libros prestados en la biblioteca, que solo es visible para el personal de la biblioteca. Podemos agregar un enlace a nuestra página de renovación al lado de cada artículo usando el código de plantilla a continuación.

+ +
{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>  {% endif %}
+ +
+

Nota: Recuerde que su inicio de sesión de prueba deberá tener el permiso "catalog.can_mark_returned" para acceder a la página de renovar el libro (quizás use su cuenta de superusuario).

+
+ +

Alternativamente, puede construir manualmente una URL de prueba como esta — http://127.0.0.1:8000/catalog/book/<bookinstance_id>/renew/ (se puede obtener un ID de instancia de libro válido navegando a la página de detalles de un libro en su biblioteca y copiando el campo id).

+ +

Como se ve?

+ +

Si tiene éxito, el formulario predeterminado se verá así:

+ +

+ +

El formulario con un valor no válido ingresado se verá así:

+ +

+ +

La lista de todos los libros con enlaces renovados se verá así:

+ +

+ +

ModelForms

+ +

Crear una clase Form utilizando el enfoque descrito anteriormente es muy flexible, lo que le permite crear cualquier tipo de página de formulario que desee y asociarla con cualquier modelo o modelos.

+ +

Sin embargo, si solo necesita un formulario para asignar los campos de un solo modelo, entonces su modelo ya definirá la mayor parte de la información que necesita en su formulario: campos, etiquetas, texto de ayuda, etc. En lugar de recrear las definiciones de modelo en su formulario , es más fácil usar una clase auxiliar ModelForm para crear el formulario a partir de su modelo. El  ModelForm puede usarse dentro de sus vistas exactamente de la misma manera que un ordinario Form.

+ +

Un ModelForm que contiene el mismo campo que nuestro original RenewBookFormse muestra a continuación. Todo lo que necesita hacer para crear el formulario es agregar class Meta with the associated model (BookInstance) y una lista de los campos del  modelo fieldspara incluir en el formulario (puede incluir todos los campos usando fields = '__all__', o puedes usar exclude (en vez de fields) para especificar los campos que no se incluirán del modelo).

+ +
from django.forms import ModelForm
+from .models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+    class Meta:
+        model = BookInstance
+        fields = ['due_back',]
+
+ +
+

Nota: Esto podría no parece mucho más simple que simplemente usar un Form(y no es en este caso, porque solo tenemos un campo). Sin embargo, si tiene muchos campos, puede reducir la cantidad de código de manera bastante significativa.

+
+ +

El resto de la información proviene de las definiciones de campo del modelo (por ejemplo, etiquetas, widgets, texto de ayuda, mensajes de error). Si estos no son del todo correctos, entonces podemos anularlos en nuestro class Meta, especificando un diccionario que contiene el campo a cambiar y su nuevo valor. Por ejemplo, en este formulario podríamos querer una etiqueta para nuestro campo de "Fecha de renovación" (en lugar del valor predeterminado basado en el nombre del campo: Fecha de vencimiento), y también queremos que nuestro texto de ayuda sea específico para este caso de uso. El Meta a continuación le muestra cómo anular estos campos, y puede configurar de manera similar widgets y error_messages si los valores predeterminados no son suficientes.

+ +
class Meta:
+    model = BookInstance
+    fields = ['due_back',]
+    labels = { 'due_back': _('Renewal date'), }
+    help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } 
+
+ +

Para agregar validación, puede usar el mismo enfoque que para un normal Form — define una función llamada clean_field_name() y coloca (raise)  ValidationError excepciones para valores no válidos. La única diferencia con respecto a nuestro formulario original es que el campo modelo se llama due_back y no "renewal_date".

+ +
from django.forms import ModelForm
+from .models import BookInstance
+
+class RenewBookModelForm(ModelForm):
+    def clean_due_back(self):
+       data = self.cleaned_data['due_back']
+
+       #Check date is not in past.
+       if data < datetime.date.today():
+           raise ValidationError(_('Invalid date - renewal in past'))
+
+       #Check date is in range librarian allowed to change (+4 weeks)
+       if data > datetime.date.today() + datetime.timedelta(weeks=4):
+           raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+       # Remember to always return the cleaned data.
+       return data
+
+    class Meta:
+        model = BookInstance
+        fields = ['due_back',]
+        labels = { 'due_back': _('Renewal date'), }
+        help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), }
+
+ +

La clase RenewBookModelForm a continuación es ahora funcionalmente equivalente a nuestro original RenewBookForm. Puede importarlo y usarlo donde quiera que lo use actualmente RenewBookForm.

+ +

Vistas de edición genéricas

+ +

El algoritmo de manejo de formularios que utilizamos en nuestro ejemplo de vista de funciones anterior representa un patrón extremadamente común en las vistas de edición de formularios. Django extrae gran parte de esta "plantilla" para ti, para crear vistas de edición genéricas ( generic editing views ) para crear, editar y eliminar vistas basadas en modelos. No solo manejan el comportamiento de "vista", sino que crean automáticamente la clase de formulario (un ModelForm) para tu modelo.

+ +
+

Nota: Además de las vistas de edición descritas aquí, también hay una clase FormView , que se encuentra en algún lugar entre nuestra vista de función y las otras vistas genéricas en términos de "flexibilidad" frente a "esfuerzo de codificación". Usando FormView tu necesitas crear el Form, pero no tiene que implementar todo el patrón estándar de manejo de formularios. En su lugar, solo tiene que proporcionar una implementación de la función que se llamará una vez que se sepa que el envío es válido.

+
+ +

En esta sección, vamos a usar vistas de edición genéricas para crear páginas para agregar funcionalidad para crear, editar y eliminar registros de Author de nuestra libreria — Proporcionar efectivamente una reimplementación básica de partes del sitio de administración (esto podría ser útil si necesita ofrecer la funcionalidad de administrador de una manera más flexible que puede proporcionar el sitio de administrador).

+ +

Views

+ +

Abre el archivo de vistas (locallibrary/catalog/views.py) y agregue el siguiente bloque de código al final:

+ +
from django.views.generic.edit import CreateView, UpdateView, DeleteView
+from django.urls import reverse_lazy
+from .models import Author
+
+class AuthorCreate(CreateView):
+    model = Author
+    fields = '__all__'
+    initial={'date_of_death':'05/01/2018',}
+
+class AuthorUpdate(UpdateView):
+    model = Author
+    fields = ['first_name','last_name','date_of_birth','date_of_death']
+
+class AuthorDelete(DeleteView):
+    model = Author
+    success_url = reverse_lazy('authors')
+ +

Como puede ver, para crear las vistas de las que necesita derivar CreateView, UpdateView, y DeleteView (respectivamente) y luego definir el modelo asociado.

+ +

Para los casos de "crear" y "actualizar", también debe especificar los campos para mostrar en el formulario (utilizando la misma sintaxis que para ModelForm). En este caso, mostramos la sintaxis para mostrar "todos" los campos y cómo puede enumerarlos individualmente. También puede especificar valores iniciales para cada uno de los campos utilizando un diccionario de pares nombre_campo / valor (aquí establecemos arbitrariamente la fecha de fallecimiento para fines de demostración; ¡es posible que desee eliminar eso!). Por defecto, estas vistas redirigirán en caso de éxito a una página que muestre el elemento del modelo recién creado / editado, que en nuestro caso será la vista detallada del autor que creamos en un tutorial anterior. Puede especificar una ubicación alternativa de redireccionamiento declarando explícitamente el parámetro success_url (como hecho en la clase AuthorDelete ).

+ +

La clase AuthorDelete no necesita mostrar ninguno de los campos, por lo que no es necesario especificarlos. Sin embargo, debe especificar el success_url, porque no hay un valor predeterminado obvio para que Django lo use. En este caso usamos la función reverse_lazy() para redirigir a nuestra lista de autores después de que un autor ha sido eliminado — reverse_lazy() is a lazily executed version of reverse(), se usa aquí porque estamos proporcionando una URL a un atributo de vista basado en clases.

+ +

Templates - Plantillas

+ +

Las vistas "create" y "update" utilizan la misma plantilla de forma predeterminada, que se nombrará después de su model: model_name_form.html (puedes cambiar el sufijo a algo diferente a _form usando el campo  template_name_suffixen tu vista, ejemplo: template_name_suffix = '_other_suffix')

+ +

Crea la siguiente plantilla locallibrary/catalog/templates/catalog/author_form.html  y copia el siguiente texto:

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+<form action="" method="post">
+    {% csrf_token %}
+    <table>
+    \{{ form.as_table }}
+    </table>
+    <input type="submit" value="Submit" />
+
+</form>
+{% endblock %}
+ +

Esto es similar a nuestros formularios anteriores y representa los campos usando una tabla. Tenga en cuenta también cómo declaramos nuevamente{% csrf_token %} para garantizar que nuestros formularios sean resistentes a los ataques CSRF.

+ +

La vista "delete" espera encontrar una plantilla con el formato model_name_confirm_delete.html (de nuevo, puedes cambiar el sufijo usando template_name_suffix en tu vista). Crea la siguiente plantilla locallibrary/catalog/templates/catalog/author_confirm_delete.html y copia en el texto a continuación.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+
+<h1>Delete Author</h1>
+
+<p>Are you sure you want to delete the author: \{{ author }}?</p>
+
+<form action="" method="POST">
+  {% csrf_token %}
+  <input type="submit" action="" value="Yes, delete." />
+</form>
+
+{% endblock %}
+
+ +

Configuración de URL

+ +

Abra el archivo de configuración de URL (locallibrary/catalog/urls.py) y agregue la siguiente configuración al final del archivo:

+ +
urlpatterns += [
+    url(r'^author/create/$', views.AuthorCreate.as_view(), name='author_create'),
+    url(r'^author/(?P<pk>\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'),
+    url(r'^author/(?P<pk>\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'),
+]
+ +

¡No hay nada particularmente nuevo aquí! Puede ver que las vistas son clases y, por lo tanto, deben llamarse a través de .as_view(),y deberías poder reconocer los patrones de URL en cada caso. Debemos usar pk como el nombre de nuestro valor de clave principal (primary key) capturado, ya que este es el nombre del parámetro esperado por las clases de vista.

+ +

Las páginas de crear, actualiza y eliminar autor ahora estan listas para probar (no nos molestaremos en engancharlas en la barra lateral del sitio en este caso, aunque puede hacerlo si lo desea).

+ +
+

Nota:¡Los usuarios observadores habrán notado que no hicimos nada para evitar que usuarios no autorizados accedan a las páginas! Lo dejamos como un ejercicio para usted (pista: puede usar el PermissionRequiredMixin y cree un nuevo permiso o reutilice nuestro permiso can_mark_returned ).

+
+ +

Probando la página

+ +

Primero inicie sesión en el sitio con una cuenta que tenga los permisos que haya decidido que se necesitan para acceder a las páginas de edición del autor.

+ +

Luego navegue a la página de creación del autor: http://127.0.0.1:8000/catalog/author/create/, que debería verse como la captura de pantalla a continuación.

+ +

Form Example: Create Author

+ +

Ingrese los valores para los campos y luego presione Submit para guardar el registro del autor. Ahora debería ser llevado a una vista detallada para su nuevo autor, con una URL de algo como http://127.0.0.1:8000/catalog/author/10.

+ +

Puede probar la edición de registros agregando /update/ hasta el final de la vista detallada URL (e.g. http://127.0.0.1:8000/catalog/author/10/update/) — no mostramos una captura de pantalla, porque se parece a la página "create".

+ +

Por último, podemos eliminar el autor, agregando eliminar (delete) al final de la vista detallada del autor URL (ejemplo. http://127.0.0.1:8000/catalog/author/10/delete/). Django debería mostrar la página de eliminación que se muestra a continuación. pulse Yes, delete. para eliminar el registro y ser llevado a la lista de todos los autores.

+ +

+ +

Retarte a ti mismo

+ +

Crea algunos formularios para crear, editar y eliminar registros de Book.Puede usar exactamente la misma estructura de Authors. Si tu plantilla  book_form.html es solo una versión renombrada de la copia de la plantilla   author_form.html, entonces la nueva página "crear libro" se verá como la captura de pantalla a continuación:

+ +

+ + + +

Resumen

+ +

¡Crear y manejar formularios puede ser un proceso complicado! Django lo hace mucho más fácil al proporcionar mecanismos programáticos para declarar, representar y validar formularios. Además, Django proporciona vistas genéricas de edición de formularios que pueden hacer casi todo el trabajo para definir páginas que pueden crear, editar y eliminar registros asociados con una sola instancia de modelo.

+ +

Hay mucho más que se puede hacer con los formularios (consulte nuestra lista Vea también a continuación), pero ahora debe comprender cómo agregar formularios básicos y código de manejo de formularios a sus propios sitios web.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/authentication", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/generic_views/index.html b/files/es/learn/server-side/django/generic_views/index.html new file mode 100644 index 0000000000..7eb6830a87 --- /dev/null +++ b/files/es/learn/server-side/django/generic_views/index.html @@ -0,0 +1,640 @@ +--- +title: 'Tutorial de Django Parte 6: Listas genéricas y vistas de detalle' +slug: Learn/Server-side/Django/Generic_views +tags: + - Aprender + - Principiante + - Tutorial + - django + - plantillas django + - vistas django +translation_of: Learn/Server-side/Django/Generic_views +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
+ +

Este tutorial extiende nuestro sitio web de la BibliotecaLocal, añadiendo páginas de listas y detalles de libros y autores. Aquí aprenderemos sobre vistas genéricas basadas en clases, y mostraremos cómo éstas pueden reducir la cantidad de código que tienes que escribir para casos de uso común. También entraremos en el manejo de URL en gran detalle, mostrando cómo realizar un emparejamiento de patrones básico.

+ + + + + + + + + + + + +
Requisitos previos: +

Completa todos los tópicos anteriores del tutorial, incluyendo Tutorial de Django Parte 5: Creación de tu página de inicio.

+
Objetivo: +

Entender dónde y cómo usar las vistas genéricas basadas en clases, y cómo extraer patrones desde las URLs y enviar la información a las vistas.

+
+ +

Visión General

+ +

En este tutorial vamos a completar la primera versión del sitio web BibliotecaLocal añadiendo páginas de lista y detalle para libros y autores (o para ser más precisos, te mostraremos cómo implementar las páginas de libros, ¡y te dejaremos crear las páginas de autores por tí mismo!)

+ +

El proceso es similar al de creación de la página índice, que mostramos en el tutorial anterior. Aquí también necesitaremos crear mapeos URL, vistas y plantillas. La principal diferencia es que para las páginas de detalle tendremos el reto adicional de extraer información desde patrones en las URLs y pasarla a la vista. Para estas páginas vamos a mostrar un tipo de vista completamente diferente: vistas genéricas de lista y detalle basadas en clases. Estas pueden reducir significativamente la cantidad de código requerido para las vistas, haciéndolas más fáciles de escribir y mantener.

+ +

La parte final del tutorial mostrará cómo paginar tu información al usar vistas de lista genéricas basadas en clases.

+ +

Página de lista de libros

+ +

La página de lista de libros desplegará una lista con todos los registros de libros disponibles en la página, a la cual se accede usando la URL:  catalog/books/. La página desplegará un título y un autor para cada registro, siendo el título un hipervículo a la página de detalle de libro relacionada. La página tendrá la misma estructura y navegación que todas las demás páginas en el sitio, y por tanto podemos extender la plantilla base (base_generic.html) que creamos en el tutorial anterior.

+ +

Mapeo URL

+ +

Abre /catalog/urls.py y copia allí la línea que se muestra abajo en negrita. De manera muy similar al mapeo de nuestro índice, esta función url() define una expresión regular (RE) para comparala con la URL (r'^books/$'), una función de vista que será llamada si la URL coincide (views.BookListView.as_view()) y un nombre para este mapeo en particular.

+ +
urlpatterns = [
+    url(r'^$', views.index, name='index'),
+    url(r'^books/$', views.BookListView.as_view(), name='books'),
+]
+ +

Esta expresión regular coincide con URLs iguales a books/ (^ es un marcador de inicio de cadena y $ es un marcador de fin de cadena). Como se discutió en el tutorial anterior, la URL debió previamente haber coincidido con /catalog, de modo que la vista será llamada en realidad para la URL: /catalog/books/.

+ +

La función de vista tiene un formato diferente al anterior -- eso es porque esta vista será en realidad implementada como una clase. Heredaremos desde una función de vista genérica existente que ya hace la mayoría de lo que queremos que esta función de vista haga, en lugar de escribir la nuestra propia desde el inicio.

+ +

Para las vistas basadas en clases de Django, accedemos a una función de vista apropiada llamando al método de clase as_view(). Esto hace todo el trabajo de crear una instancia de la clase, y asegurarse de que los métodos controladores correctos sean llamados para las solicitudes HTTP entrantes.

+ +

Vista (basada en clases)

+ +

Podríamos fácilmente escribir la vista de lista de libros como una función regular (tal como nuestra vista de índice anterior), la cual consultaría a la base de datos por todos los libros, y luego llamar a render() para pasar dicha lista a una plantilla específica. Sin embargo, en lugar de eso usaremos una vista de lista genérica basada en clases (ListView) -- una clase que hereda desde una vista existente. Debido a que la vista genérica ya implementa la mayoría de la funcionalidad que necesitamos, y sigue la práctica adecuada de Django, seremos capaces de crear una vista de lista más robusta con menos código, menos repetición, y por último menos mantenimiento.

+ +

Abre catalog/views.py, y copia el siguiente código al final del archivo:

+ +
from django.views import generic
+
+class BookListView(generic.ListView):
+    model = Book
+ +

¡Eso es todo! La vista genérica consultará a la base de datos para obtener todos los registros del modelo especificado (Book) y renderizará una plantilla ubicada en /locallibrary/catalog/templates/catalog/book_list.html (que crearemos más abajo). Dentro de la plantilla puedes acceder a la lista de libros mediante la variable de plantilla llamada object_list O book_list (esto es, genéricamente, "nombre_del_modelo_list").

+ +
+

Nota: Esta ruta complicada para la ubicación de la plantilla no es un error de digitación -- las vistas genéricas buscan plantillas en /application_name/the_model_name_list.html (catalog/book_list.html en este caso) dentro del directorio de la aplicación /application_name/templates/ (/catalog/templates/).

+
+ +

Puedes añadir atributos para cambiar el comportamiento por defecto de arriba. Por ejemplo, puedes especificar otro archivo de plantilla si necesitas tener múltiples vistas que usen el mismo modelo, o puedes querer usar un nombre diferente de variable de plantilla si book_list no resulta intuitivo para tu caso particular de uso de plantilla. Posiblemente la variación más útil es cambiar/filtrar el conjunto de resultados que se devuelve, así, en lugar de listar todos los libros podrías listar los 5 libros más leídos por otros usuarios.

+ +
class BookListView(generic.ListView):
+    model = Book
+    context_object_name = 'my_book_list'   # your own name for the list as a template variable
+    queryset = Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+    template_name = 'books/my_arbitrary_template_name_list.html'  # Specify your own template name/location
+ +

Sobreescribiendo métodos en vistas basadas en clases

+ +

Si bien no necesitamos hacerlo aquí, puedes también sobreescribir algunos de los métodos de clase.

+ +

Por ejemplo, podemos sobreescribir el método get_queryset() para cambiar la lista de registros devueltos. Esto es más flexible que simplemente ajustar el atributo queryset como lo hicimos en el fragmento de código anterior (aunque en este caso no existe un beneficio real):

+ +

 

+ +
class BookListView(generic.ListView):
+    model = Book
+
+    def get_queryset(self):
+        return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war
+
+ +

 

+ +

Podríamos también sobreescribir get_context_data() con el objeto de pasar variables de contexto adicionales a la plantilla (ej. la lista de libros se pasa por defecto). El fragmento de abajo muestra cómo añadir una variable llamada "some_data" al contexto (la misma estaría entonces disponible como una variable de plantilla).

+ +
class BookListView(generic.ListView):
+    model = Book
+
+    def get_context_data(self, **kwargs):
+        # Call the base implementation first to get a context
+        context = super(BookListView, self).get_context_data(**kwargs)
+        # Get the blog from id and add it to the context
+        context['some_data'] = 'This is just some data'
+        return context
+ +

Cuando se hace esto es importante seguir este patrón:

+ + + +
+

Nota: Revisa Built-in class-based generic views (Django docs) para muchos más ejemplos de lo que puedes hacer.

+
+ +

Creando la plantilla de Vista de Lista

+ +

Crea el archivo HTML /locallibrary/catalog/templates/catalog/book_list.html y copia allí el texto de abajo. Como se discutió antes, este es el archivo de plantilla por defecto esperado por la vista de lista genérica basada en clases (para un modelo llamado Book en una aplicación llamada catalog).

+ +

Las plantillas para las vistas genéricas son como cualquier otra plantilla (si bien el contexto/información enviada a la plantilla puede variar, por supuesto). Como con nuestra plantilla índice, extendemos nuestra plantilla base en la primera línea, y luego reemplazamos el bloque llamado content.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+    <h1>Book List</h1>
+
+    {% if book_list %}
+    <ul>
+
+      {% for book in book_list %}
+      <li>
+        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+      </li>
+      {% endfor %}
+
+    </ul>
+    {% else %}
+      <p>There are no books in the library.</p>
+    {% endif %} 
+{% endblock %}
+ +

La vista envía el contexto (lista de libros) por defecto como object_list y book_list (son áliases, cualquiera de ellos funcionará).

+ +

Ejecución condicional

+ +

Usamos las etiquetas de plantilla if, else y endif para revisar si la book_list ha sido definida y no está vacía. Si book_list está vacía, entonces la cláusula else despliega un texto que explica que no existen libros a listar. Si Book_list no está vacía, entonces iteramos a través de la lista de libros.

+ +
{% if book_list %}
+  <!-- code here to list the books -->
+{% else %}
+  <p>There are no books in the library.</p>
+{% endif %}
+
+ +

La condicional de arriba solo revisa un caso, pero puedes revisar condiciones adicionales usando la etiqueta de plantilla elif (ej. {% elif var2 %}). Para mayor información sobre operadores condicionales mira: if, ifequal/ifnotequal, y ifchanged en Built-in template tags and filters (Django Docs).

+ +

Lazos For

+ +

La plantilla usa las etiquetas de plantilla for y endfor para iterar a través de la lista de libros, como se muestra abajo. Cada iteración asigna a la variable de plantilla book la información para el ítem actual de la lista.

+ +
{% for book in book_list %}
+  <li> <!-- code here get information from each book item --> </li>
+{% endfor %}
+
+ +

Si bien no se usan aquí, Django creará otras variables dentro del lazo que puedes usar para monitorear la iteración. Por ejemplo, puedes revisar la variable forloop.last para realizar un procesamiento condicional la última vez que el lazo se ejecuta.

+ +

Accediendo a las variables

+ +

El código dentro del lazo crea un ítem de lista para cada libro, que muestra tanto el título (como un enlace hacia la vista de detalle que aún no creamos) como el autor.

+ +
<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+
+ +

Accedemos a los campos del registro del libro asociado usando la "notación de punto" (ej. book.title y book.author), donde el texto que sigue a la palabra book es el nombre del campo (como se definió en el modelo).

+ +

También podemos invocar funciones en el modelo desde dentro de nuestra plantilla -- en este caso invocamos a book.get_absolute_url() para obtener una URL que se podría usar para desplegar la página de detalle relacionada. Esto funciona siempre y cuando la función no tenga ningún argumento (¡no hay forma de enviar argumentos!).

+ +
+

Nota: Debemos tener cuidado de los "efectos secundarios" al invocar funciones en las plantillas. Aquí solo obtenemos una URL para desplegar, pero una función puede hacer casi cualquier cosa -- ¡no quisieramos borrar nuestra base de datos (por ejemplo) solo por renderizar nuestra plantilla!

+
+ +

Actualizar la plantilla base

+ +

Abre la plantilla base (/locallibrary/catalog/templates/base_generic.html) e inserta {% url 'books' %} en el enlace URL para All books, como se muestra abajo. Esto habilitará el enlace en todas las páginas (podemos ubicar esto exitosamente en su lugar ahora que hemos creado el mapeo url "books").

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+<li><a href="{% url 'books' %}">All books</a></li>
+<li><a href="">All authors</a></li>
+ +

¿Cómo se ve?

+ +

Aún no podrás ver la lista de libros, porque aún nos falta una dependencia -- el mapeo URL para las páginas de detalle de libros, que se necesita para crear los hipervínculos a los libros individuales. Mostraremos tanto la lista de libros como las vistas de detalle después de la siguiente sección.

+ +

Página de detalle de libros

+ +

La página de detalle de libro desplegará información sobre un libro específico, a la que se accede usando la URL catalog/book/<id> (donde <id> es la clave primaria para el libro). Además de los campos en el modelo Book (autor, resumen, ISBN, idioma, y género), listaremos también los detalles de las copias disponibles (BookInstances) incluyendo su estado, fecha de devolución esperada, edición e id. Esto permitirá a nuestros lectores no solo saber sobre el libro en sí, sino también confirmar si está disponible o cuándo lo estará.

+ +

Mapeo URL

+ +

Abre /catalos/urls.py y añade el mapeador URL 'book-detail' que se muestra abajo en negrita. Esta función url() define un patrón, vista de detalle genérica basada en clases asociada, y un nombre.

+ +
urlpatterns = [
+    url(r'^$', views.index, name='index'),
+    url(r'^books/$', views.BookListView.as_view(), name='books'),
+    url(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
+]
+ +

A diferencia de nuestros mapeadores anteriores, en este caso estamos usando nuestra expresión regular (RE) para comparar frente a un "patrón" real en lugar de una simple cadena. Lo que hace esta RE en particular es coincidir con cualquier URL que empiece por book/, seguido de uno o más dígitos (números) antes del marcador de fin de línea. Mientras se realiza la comparación, se "capturan" los dígitos y son enviados a la función de vista como un parámetro llamado pk.

+ +
+

Nota: Como ya se discutió antes, nuestra URL coincidente es en realidad catalog/book/<digits> (como estamos en la aplicación catalog, se asume /catalog/).

+
+ +
+

Importante: La vista de detalle genérica basada en clases espera que se le envíe un parámetro llamado pk. Si estás escribiendo tu propia vista de función, puedes usar el nombre de parámetro que quieras, o incluso enviar la información como un argumento sin nombre.

+
+ +

Una breve introducción a las expresiones regulares

+ +

Las expresiones regulares son una herramienta de mapeo de patrones increíblemente poderosa. Hemos dicho poco sobre ellas hasta ahora porque estuvimos comparando con cadenas fijas en nuestras URLs (en lugar de con patrones) y porque son, francamente, bastante intuitivas e intimidantes para los principiantes.

+ +
+

Nota: ¡No te asustes! Los tipos de patrones con los que estaremos comparando son bastante simples, ¡y en muchos casos están bien documentados!

+
+ +

Lo primero que hay que saber es que las expresiones regulares deberían ser declaradas normalmente usando la sintaxis de literal de cadena sin procesar (esto es, están encerradas así: r'<tu expresión regular va aquí>').

+ +

Las partes principales de la sintaxis que necesitarás saber para declarar las coincidencias de patrones son:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SímboloSignificado
^Coincide con el inicio del texto
$Coincide con el fin del texto
\dCoincide con un dígito (0, 1, 2, ... 9)
\w +

Concide con un caracter de palabra, ej. cualquier caracter del alfabeto en mayúscula o minúscula, dígito o guión bajo (_)

+
+ +

Concide con uno o más caracteres del precedente. Por ejemplo, para coincidir con uno o más dígitos usarías \d+. Para concidir con uno o más caracteres "a", podrías usar a+

+
* +

Concide con cero o más caracteres del precedente. Por ejemplo, para coincidir con nada o una palabra podrías usar \w*

+
( ) +

Captura la parte del patrón dentro de los paréntesis. Todos los valores capturados serán enviados a la vista como parámetros sin nombre (si se captura múltiples patrones, los parámetros asociados serán enviados en el  órden en que fueron declaradas las capturas).

+
(?P<name>...) +

Captura el patrón (indicado por ...) como una variable con nombre (en este caso "name"). Los valores capturados se envían a la vista con el nombre especificado. Tu vista debe, por tanto, ¡declarar un argumento con el mismo nombre!

+
[  ] +

Concide con un caracter del conjunto. Por ejemplo, [abc] coincidirá con 'a' o 'b' o 'c'. [-\w] coincidrá con el caracter '-' o con cualquier letra.

+
+ +

¡La mayoría de los caracteres restantes se pueden tomar literalmente!

+ +

Consideremos algunos ejemplos reales de patrones:

+ + + + + + + + + + + + + + + + + + + + + + +
PatrónDescripción
r'^book/(?P<pk>\d+)$' +

Esta es la RE usada en nuestro mapeador url. Concide con una cadena que tiene book/ al inicio de la línea (^book/), luego tiene uno o más dígitos (\d+), y luego termina (sin ningún caracter que no sea un dígito antes del marcador de fin de línea).

+ +

También captura todos los dígitos (?P<pk>\d+) y los envía a la vista como un parámetro llamado 'pk'. ¡Los valores capturados siempre se envían como cadena!

+ +

Por ejemplo, esto coincidiría con book/1234, y enviaría una variable pk='1234' a la vista.

+
r'^book/(\d+)$' +

Esta expresión coincide con las mismas URLs que el caso anterior. La información capturada se enviaría a la vista como un argumento sin nombre.

+
r'^book/(?P<stub>[-\w]+)$' +

Esta expresión coincide con una cadena que tiene book/ al inicio de la línea (^book/), luego tiene uno o más caracteres que son o bien '-' o una letra ([-\w]+), y luego termina. También captura este conjunto de caracteres y los envía a la vista como un parámetro llamado 'stub'.

+ +

Este es un patrón bastante típico para un "talón". Estos talones representan claves primarias en URLs amigables basadas en palabras para la información. Podrías usar un talón si quisieras que la URL de un libro sea más informativa. Por ejemplo, /catalog/book/the-secret-garden en lugar de /catalog/book/33.

+
+ +

Puedes capturar múltiples patrones en una sola comparación, y por tanto codificar bastantes datos diferentes en una URL.

+ +
+

Nota: Como reto, considera cómo podrías codificar una url para listar todos los libros publicados en un año, mes y día en particular, y la RE que podría usarse para la comparación.

+
+ +

Enviado opciones adicionales en tus mapeos URL

+ +

Una característica que no hemos usado aquí, pero que te puede resultar valiosa, es que puedes declarar y enviar opciones adicionales a la vista. Las opciones se declaran como un diccionario que envías como el tercer argumento sin nombre a la función url(). Esta estrategia puede resultar útil si quiere usar la misma vista para múltiples recursos, y enviar información para configurar su comportamiento en cada caso (abajo suministramos una plantilla diferente en cada caso).

+ +
url(r'^/url/$', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
+url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
+
+
+ +
+

Nota: Tanto las opciones extra como los patrones capturados con nombre se envían a la vista como argumentos con nombre. Si usas el mismo nombre tanto para un patrón capturado como para una opción extra, solo el valor del patrón capturado será enviado a la vista (el valor especificado para la opción extra será eliminado).

+
+ +

Vista (basada en clases)

+ +

Abre catalog/views.py y copia el siguiente código al final del archivo:

+ +
class BookDetailView(generic.DetailView):
+    model = Book
+ +

¡Eso es todo! Lo único que necesitas hacer ahora es crear una plantilla llamada /locallibrary/catalog/templates/catalog/book_detail.html, y la vista enviará la información en la base de datos para el registro del libro específico, extraído por el mapeador URL. Dentro de la plantilla puedes acceder a la lista de libros mediante la variable de plantilla llamada object o book (esto es, genéricamente, "el_nombre_del_modelo").

+ +

Si lo necesitas puedes cambiar la plantilla usada y el nombre del objeto de contexto usado para referenciar al libro en la plantilla. Puedes también sobreescribir métodos para, por ejemplo, añadir información adicional al contexto.

+ +

¿Qué sucede si el registro no existe?

+ +

Si un registro solicitado no existe, la vista de detalle genérica basada en clases lanzará automáticamente por tí una excepción de tipo Http404 -- en producción, esto desplegará automáticamente una página apropiada de "recurso no encontrado", que puedes personalizar si lo deseas.

+ +

Solo para darte una idea sobre cómo funciona esto, el fragmento de código de abajo demuestra cómo implementarías la vista basada en clases como una función, si no estuvieras usando la vista de detalle genérica basada en clases.

+ +
def book_detail_view(request,pk):
+    try:
+        book_id=Book.objects.get(pk=pk)
+    except Book.DoesNotExist:
+        raise Http404("Book does not exist")
+
+    #book_id=get_object_or_404(Book, pk=pk)
+
+    return render(
+        request,
+        'catalog/book_detail.html',
+        context={'book':book_id,}
+    )
+
+ +

Primero, la vista intenta recuperar el registro del libro específico desde el modelo. Si esto falla, la vista debería lanzar una excepción de tipo Http404 para indicar que el libro "no se encuentra". El último paso es, como de costumbre, llamar a render() con el nombre de la plantilla y la información del libro en el parámetro context (como un diccionario).

+ +
+

Nota: get_object_or_404() (que se muestra comentado arriba), es un atajo conveniente para lanzar una excepción de tipo Http404 si el registro no se encuentra.

+
+ +

Creando la plantilla de Vista de Detalle

+ +

Crea el archivo HTML /locallibrary/catalog/templates/catalog/book_detail.html y ponle el contenido de abajo. Como se discutió antes, este es el nombre de archivo por defecto esperado por la vista de detalle genérica basada en clases (para un modelo llamado Book en una aplicación llamada catalog).

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+  <h1>Title: \{{ book.title }}</h1>
+
+  <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined -->
+  <p><strong>Summary:</strong> \{{ book.summary }}</p>
+  <p><strong>ISBN:</strong> \{{ book.isbn }}</p>
+  <p><strong>Language:</strong> \{{ book.language }}</p>
+  <p><strong>Genre:</strong> {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
+
+  <div style="margin-left:20px;margin-top:20px">
+    <h4>Copies</h4>
+
+    {% for copy in book.bookinstance_set.all %}
+    <hr>
+    <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'm' %}text-danger{% else %}text-warning{% endif %}">\{{ copy.get_status_display }}</p>
+    {% if copy.status != 'a' %}<p><strong>Due to be returned:</strong> \{{copy.due_back}}</p>{% endif %}
+    <p><strong>Imprint:</strong> \{{copy.imprint}}</p>
+    <p class="text-muted"><strong>Id:</strong> \{{copy.id}}</p>
+    {% endfor %}
+  </div>
+{% endblock %}
+ + + +
+

El enlace author en la plantilla de arriba tiene una URL vacía porque no hemos creado aún una página de detalle de autor. Una vez que esta exista, deberías actualizar la URL así:

+ +
<a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
+
+
+ +

Aunque es un poco más larga, casi todo lo que existe en esta plantilla se ha descrito previamente:

+ + + +

Lo interesante que no hemos visto previamente es la función book.bookinstance_set.all(). Este método es "automágicamente" creado por Django para devolver el conjunto de registros de BookInstance asociado con un Book en particular.

+ +
{% for copy in book.bookinstance_set.all %}
+<!-- code to iterate across each copy/instance of a book -->
+{% endfor %}
+ +

Este método es necesario porque has declarado un campo ForeignKey (uno-a-muchos) únicamente en la lado "uno" de la relación. Como no haces nada para declarar la relación en el otro modelo ("muchos"), este no tiene ningún campo para obtener el conjunto de registros asociados. Para superar este problema, Django construye una función apropiadamente llamada "búsqueda reversa" que puedes usar. El nombre de la función se construye convirtiendo a minúsculas el nombre del modelo donde la ForeignKey fue declarada, seguido por _set (así, la función creada en Book es bookinstance_set()).

+ +
+

Nota: Aquí usamos all() para obtener todos los registros (la opción por defecto). A pesar de que puedes usar el método filter() para obtener un subconjunto de registros en el código, no puedes hacerlo directamente en las plantillas porque no puedes especificar argumentos para las funciones.

+ +

Ten también cuidado de que si no defines un orden (en tu vista o modelo basado en clases), verás errores arrojados por el servidor de dearrollo como este:

+ +
[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
+  allow_empty_first_page=allow_empty_first_page, **kwargs)
+
+ +

Eso sucede porque el objeto paginador espera ver una cláusula ORDER BY siendo ejecutada en tu base de datos subyacente. Sin ella, ¡no puede estar seguro de que los registros devueltos están en el orden correcto!

+ +

Este tutorial no llegó a la Paginación (aún, pero pronto lo hará), pero como no puedes uar sort_by() y enviar un parámetro (el mismo con filter() descrito arriba) tendrás que escoger entre tres opciones:

+ +
    +
  1. Añadir un ordering dentro de una declaración class Meta en tu modelo.
    2. +
  2. Añadir un atributo queryset en tu vista basada en clases personalizada, especificando un order_by().
    3. +
  3. Añadir un método get_queryset a tu vista basada en clases pesonalizada y también especificar el order_by().
    4. +
+ +

Si te decides por la opción class Meta para el modelo Author (probablemente no tan flexible como personalizar la vista basada en clases, pero lo suficientemente fácil), terminarás con algo como esto:

+ +
class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return '%s, %s' % (self.last_name, self.first_name)
+
+    class Meta:
+        ordering = ['last_name']
+ +

Por supuesto, el campo no tiene que ser last_name: podría ser cualquier otro.

+Y por último, pero no menos importante, deberías ordenar por un atributo/columna que tenga un índice real (único o no) en tu base de datos para evitar problemas de rendimiento. Por supuesto, esto no será necesario aquí (y probablemente nos estemos adelantando mucho) para la pequeña cantidad de libros (¡y usuarios!), pero es algo a tener en cuenta para proyectos futuros.
+ +

¿Cómo se ve?

+ +

En este punto deberíamos haber creado todo lo necesario para desplegar tanto la lista de libros como las páginas de detalles de libros. Ejecuta el servidor (python3 manage.py runserver) y dirígete en tu navegador a http://127.0.0.1:8000/.

+ +
+

Advertencia: No hagas click aún en ningún enlace de autor o de detalles de autores -- ¡los crearás en el reto!

+
+ +

Haz click en el enlace All books para desplegar la lista de libros.

+ +

Book List Page

+ +

Luego haz click en un enlace a uno de tus libros. Si todo está correcto, deberías ver algo como la siguiente pantalla.

+ +

Book Detail Page

+ +

Paginación

+ +

Si apenas tienes unos pocos registros, nuestra página de lista de libros se verá bien. Sin embargo, cuando llegues a las decenas o centenas de registros la página tomará progresivamente más tiempo en cargar (y tendrá demasiado contenido para navegar adecuadamente). La solución a este problema es añadir paginación a tus vistas de lista, reduciendo el número de Ítems desplegados en cada página.

+ +

Django incluye un excelente soporte para paginación. Mejor aún, este está incluído en las vistas de lista genéricas basadas en clases, ¡así que no tienes que hacer mucho para habilitarlo!

+ +

Vistas

+ +

Abre catalog/views.py, y añadie la línea paginate_by que se muestra abajo en negrita.

+ +
class BookListView(generic.ListView):
+    model = Book
+    paginate_by = 10
+ +

Con esta adición, apenas tengas más de 10 registros la vista comenzará a paginar la información que envía a la plantilla. A las diferentes páginas se accede usando parámetros GET -- para acceder a la página 2 usarías la URL: /catalog/books/?page=2.

+ +

Plantillas

+ +

Ahora que la información está paginada, necesitamos añadir soporte a la plantilla para desplazarse a través del conjunto de resultados. Como podríamos querer hacer lo mismo en todas las vistas de lista, lo haremos de una forma en la que puede ser añadida a la plantilla base.

+ +

Abre /locallibrary/catalog/templates/base_generic.html y copia el siguiente bloque pagination debajo de nuestro bloque content (resaltado abajo en negrita). El código primero revisa si la paginación está habilitada en la página actual. Si lo está, añade enlaces next y previous apropiados (y el número de la página actual).

+ +
{% block content %}{% endblock %}
+
+{% block pagination %}
+  {% if is_paginated %}
+      <div class="pagination">
+          <span class="page-links">
+              {% if page_obj.has_previous %}
+                  <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
+              {% endif %}
+              <span class="page-current">
+                  Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
+              </span>
+              {% if page_obj.has_next %}
+                  <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
+              {% endif %}
+          </span>
+      </div>
+  {% endif %}
+{% endblock %}
+ +

page_obj es un objeto Paginator que existirá si se usa la paginación en la página actual. Te permite obtener toda la información sobre la página actual, páginas anteriores, cuántas páginas hay, etc.

+ +

Usamos \{{ request.path }} para obtener la URL de la página actual para crear a su vez los enlaces de paginación. Esto es útil, porque es independiente del objeto que estamos paginando.

+ +

¡Eso es todo!

+ +

¿Cómo se ve?

+ +

La captura de pantalla de abajo muestra cómo se ve la paginación -- si no has ingresado más de 10 títulos en tu base de datos, puedes probarlo más fácilmente reduciendo el número especificado en la línea paginate_by en tu archivo catalog/views.py. Para obtener el resultado de abajo lo cambiamos a paginate_by = 2.

+ +

Los enlaces de paginación se muestran en la parte de abajo, con enlaces de next/previous desplegados dependiendo de en qué página estés

+ +

Book List Page - paginated

+ +

Rétate a tí mismo

+ +

El reto en este artículo es crear las vistas de lista y detalle para autores, que se requieren para completar el proyecto. Estas deberían estar disponibles en las siguientes URLs:

+ + + +

El código requerido para los mapeadores URL y las vistas debería ser virtualmente idéntico a las vistas de lista y detalle para Book que creamos arriba. Las plantillas serán diferentes, pero tendrán un comportamiento similar.

+ +
+

Nota:

+ + + +
<p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
+
+ +

Cuando termines, tus páginas deberían lucir similares a las capturas de pantalla de abajo.

+ +

Author List Page

+ + + +

Author Detail Page

+ + + +

Resumen

+ +

Felicitaciones, ¡la funcionalidad de nuestra biblioteca básica está ahora completa!

+ +

En este artículo hemos aprendido cómo usar las vistas genéricas basadas en clases de lista y detalle, y las hemos usado para crear páginas para ver nuestros libros y autores. Sobre la marcha hemos aprendido sobre coincidencia de patrones con expresiones regulares, y cómo puedes enviar información desde las URLs a tus vistas. Hemos también aprendido unos cuantos trucos más para usar plantillas. Por último hemos mostrado cómo paginar vistas de lista, de modo que nuestras listas sean manejables incluso si tenemos muchos registros.

+ +

En los siguientes artículos extenderemos esta biblioteca para añadir soporte para cuentas de usuario, y así demostrar la autenticación de usuarios, permisos, sesiones y formularios.

+ +

Mira también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}

+ +

 

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/home_page/index.html b/files/es/learn/server-side/django/home_page/index.html new file mode 100644 index 0000000000..4c849e8917 --- /dev/null +++ b/files/es/learn/server-side/django/home_page/index.html @@ -0,0 +1,403 @@ +--- +title: 'Tutorial de Django Parte 5: Creación de tu página de inicio' +slug: Learn/Server-side/Django/Home_page +translation_of: Learn/Server-side/Django/Home_page +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
+ +

Estamos listos ahora para añadir el código para mostrar nuestra primera página entera — una página de inicio del sitio web de la BibliotecaLocal que muestra cuántos registros tenemos de cada tipo de modelo y proporciona una barra lateral con enlaces de navegación a nuestras otras páginas. Por el camino ganaremos experiencia práctica en escritura básica de mapeos de URL y vistas, obtención de resgistros de la base de datos y uso de plantillas.

+ + + + + + + + + + + + +
Pre-requisitos:Lee la Introducción a Django. Completa los tópicos previos del tutorial (incluyendo Tutorial de Django Parte 4: Sitio de administración de Django).
Objetivo: +

Entender cómo crear mapas url y vistas simples (sin información codificada en la URL), y cómo obtener información desde los modelos y crear plantillas.

+
+ +

Visión General

+ +

Ahora que hemos definindo nuestros modelos y hemos creado los primeros registros en la librería para trabajar, es hora de escribir código para presentar información a los usuarios. Lo primero que necesitamos es determinar que información queremos mostrar en nuestras páginas, y definir una URL apropiada hacia estos recursos. Vamos a necesitar crear el mapeador de URLs, las vistas y plantillas para mostrar estas páginas.

+ +

El siguiente diagrama es un recordatorio del principal flujo de datos y cosas necesarias para ser implementadas cuando se maneja una respuesta/petición en HTTP.
+ Los principales elementos que necesitamos crear son:

+ + + +

+ +

Como verás en la siguiente sección, vamos a tener 5 páginas para mostrar, que es mucho que documentar en un artículo. Por lo tanto, en la mayor parte de este artículo nos concentraremos en mostrar como implementar solo la página de inicio (nos moverermos a otras páginas en un artículo subsecuente). Esto debe darte un buen entendimiento de extremo a extremo sobre como los mapeadores URL, vistas y modelos funcionan en la práctica.

+ +

Definiendo el recurso URL

+ +

Como esta versión de LocalLibrary  es escencialmente solo de lectura para usuarios finales, debemos proveer una página de llegada para el sitio (una página de inicio), y páginas que desplieguen listas y vistas detalladas para libros y autores. 

+ +

Las URL que vamos a necesitar para nuestras páginas son:

+ + + +

La tres primeras URLs son usadas para listar el índice, los libros y autores. Esto no codifica ninguna información adicional, y mientras los resultados retornados dependerán del contenido en la base de datos, las consultas que se ejecutan para obtener la información siempre serán las mismas.

+ +

En contraste las 2 URLs finales son usadas para mostrar información detallada sobre un libro o autor específico — estas codifican la identidad de los ítemes a mostrar en la URL (mostrado arriba como <id> ). El mapeador URL puede extraer la información codificada y pasársela a la vista, donde se detarminará que información extraer de la base de datos. Al codificar la información en nuestra URL solo necesitamos un mapeador de URL, una vista, y un plantilla para manejar cada libro (o autor). 

+ +
+

Nota: Django te permite construir tus URLs  de cualquier forma que quieras — puedes codificar información en el cuerpo de la URL como se muestra arriba o usando la obtención de  parámetros GET  de la URL(e.j. /book/?id=6). Culquier enfoque que uses, las URLs deben mantenerse limpias, lógicas y legibles (observa el consejo del W3C aquí).
+
+ La documentación Django tiende a recomendar la codificación de información en el cuerpo de la URL, una práctica que ellos creen que promueve mejores diseños de URL.

+
+ +

Como discutimos en la introducción, el resto de este articulo describe como construimos la página index.

+ +

Creando la página index

+ +

La primera página que crearemos será la página index (catalog/). Esto desplegará un pequeño HTML estático, junto con algunos "contadores" calculados de diferentes registros en la base de datos. Para hacer este trabajo tendremos que crear un mapeador URL, una vista y una plantilla. 

+ +
+

Nota: Vale la pena prestar un poco de atención extra en esta sección. La mayoría del contenido es común para todas las páginas.

+
+ +

Mapeador URL

+ +

Hemos creado un archivo básico /catalog/urls.py para nuestra aplicación catálogo cuando creamos el esqueleto del sitio Web. Las URLs de la aplicación catálogo fueron incluidas dentro del proyecto con un mapeador a catalog/, entonces las URLs  que llegan a este mapeador deben empezar con catalog/ (el mapeador funciona sobre todos los string en la URL después de la barra diagonal).

+ +

Abra urls.py y pegue la línea en negrita que aparece a continuación. 

+ +
urlpatterns = [
+    url(r'^$', views.index, name='index'),
+]
+ +

Esta función url() define un patrón URL (r'^$'),  y una función vista que será llamada si el patrón es detectado (views.index — una función llamada index() en views.py). El patrón URL es una expresión regular de Python (ER). Hablaremos un poco más sobre ERs más adelante en este tutorial, pero para este caso todo lo que necesitas saber es que en una ER de ^$  el patrón coincidirá con una cadena vacía  (^ es un marcador de inicio de cadena y  $ es un marcador de fin de cadena). 

+ +
+

Nota: Nota que en  /locallibrary/locallibrary/urls.py 

+ +
urlpatterns += [
+    url(r'^catalog/', include('catalog.urls')),
+]
+ +

La expresión regular en este caso no tienen un $ (caracter asignado a fin-de-cadena) pero incluye una barra diagonal. Siempre cuando Django se encuentra con include() (django.conf.urls.include()), corta cualquier parte de la URL que coincida hasta este punto y envía el resto de la cadena para incluir la configuración URL para el siguiente procesamiento.

+ +

La URL coincidente es en realidad catalog/ + <cadena vacía> ( /catalog/ es asumida ya que include() fue el método usado). Nuestra primera función vista  será llamada si recibimos una consulta HTTP con una URL de /catalog/.

+
+ +

La función  url() también especifica un parámetro name, que identifica de manera única  este mapeador de URL particular. Puedes usar este nombre para "revertir" el mapeador — para crear dinámicamente una URL que apunta al el recurso que el mapeador esta diseñado para manejar. Por ejemplo, con esto hecho ahora podemos enlazar nuestra página inicio creando el siguiente enlace en nuestra plantilla:

+ +
<a href="{% url 'index' %}">Home</a>.
+ +
+

Nota: Por su puesto podemos codificar a fuerza bruta el link anterior (e.j. <a href="/catalog/">Home</a>), pero entonces si cambiamos el patrón para nuestra página de inicio (e.j. a /catalog/index) la plantilla no podrá seguir enlazando correctamente. Usar un mapeador de url es mucho más flexible y robusto!

+
+ +

Vista (basada-en-funciones)

+ +

Una vista es una función que procesa una consulta HTTP, trae datos desde la base de datos cuando los necesita, genera una página HTML renderizando estos datos unando una plantilla HTML, y luego retorna el HTML en una respuesta HTTP para ser mostrada al usuario. La vista del índice sigue este modelo — extrae información sobre cuantos Book, BookInstance,  BookInstance disponibles y registros Author tenemos en la base de datos, y los pasa a una plantilla para mostrarlos.

+ +

Abre catalog/views.py, y nota que el archivo ya importa el atajo de la función render() que genera archivos HTML usando una plantilla y datos. 

+ +
from django.shortcuts import render
+
+# Create your views here.
+
+ +

Copia el siguiente código al final del archivo. La primera linea importa las clases de los modelos que usaremos para acceder a los datos en todas nuestras vistas.

+ +
from .models import Book, Author, BookInstance, Genre
+
+def index(request):
+    """
+    Función vista para la página inicio del sitio.
+    """
+    # Genera contadores de algunos de los objetos principales
+    num_books=Book.objects.all().count()
+    num_instances=BookInstance.objects.all().count()
+    # Libros disponibles (status = 'a')
+    num_instances_available=BookInstance.objects.filter(status__exact='a').count()
+    num_authors=Author.objects.count()  # El 'all()' esta implícito por defecto.
+
+    # Renderiza la plantilla HTML index.html con los datos en la variable contexto
+    return render(
+        request,
+        'index.html',
+        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
+    )
+ +

La primera parte de la función vista extrae contadores de registros usando el atributo objects.all() en las clases del modelo. Tambien obtiene una lista de los objetos BookInstance  que tienen un valor del campo status de  'a' (Disponible). Puedes encontrar un poco más sobre cómo acceder desde modelos en nuestro tutorial previo (Django Tutorial Part 3: Usando modelos > Buscando registros).

+ +

Al final de la función invocamos a la función render()  para crear y retornar una página  HTML como una respuesta (esta función atajo envuelve una serie, simplicando este caso de uso muy común). Esta recibe como parametros el objeto request original (una ConsultaHttp), una plantilla HTML con marcadores para los datos, y una variable de contexto (un diccionario Python que contiene los datos que serán insertados en esos marcadores). 

+ +

Hablaremos más sobre la plantilla y la variable de contexto en la siguiente sección; vamos a crear nuestra plantilla para así de hecho mostrarle algo al usuario!

+ +

Plantilla

+ +

Una plantilla es un archivo de texto  que determina la estructura o diseño de un archivo (como una página HTML), con marcadores usados para representar el contenido real. Django automaticamente buscará plantillas en un directorio llamado 'templates' de su aplicación. Así por ejemplo, en la vista índice que acabamos de agregar, la función render() esperará poder encontrar el archivo /locallibrary/catalog/templates/index.html, y entregará un error si el archivo no puede ser encontrado. Puede ver esto si guarda los cambios anteriores y vuelve a su navegador — accediendo a 127.0.0.1:8000 ahora le entregará un mensaje de error bastante intuitivo "TemplateDoesNotExist at /catalog/", más otros detalles.

+ +
+

Nota: Django buscará en una serie de lugares por plantillas, basandose en su archivo de configuraciones de proyectos (buscar en su aplicación instalada es una configuración por defecto!). Puede encontrar más sobre como Django encuentra plantillas y qué formatos de plantillas soporta Templates (Django docs).

+
+ +

Plantillas extendidas

+ +

La plantilla índice va a necesitar marcado HTML estándar para la cabecera y el cuerpo, junto con secciones para navegar (a otras páginas en el sitio que todavía no hemos creado) y para mostrar algún texto introductorio y nuestros datos de libro. La mayoría de este texto (el HTML y la estructura de navegación) será el mismo para cada página en nuestro sitio. En lugar de obligar a los desarrolladores a duplicar este texto en cada página, el lenguaje de plantillas de Django le permite declarar una plantilla base y luego extenderla, reemplazando solo las porciones que son distintos para cada página específica. 

+ +

Por ejemplo, un plantilla base base_generic.html podría verse como el texto de abajo. Como puedes ver, este contiene algo de HTML "común"  y secciones para el título, barra lateral, y contendio marcados usando las etiquetas de plantillas llamadas block y endblock  (mostradas en negrita). Los bloques pueden estar vacíos, o tener contenido que será usado "por defecto" para páginas derivadas.

+ +
+

Nota: Las etiquetas de plantilla son como funciones que puede usar en una plantilla para recorrer listas, realizar operaciones condicionales basadas en el valor de una variable, etc. Además de las etiquetas de plantilla, la sintaxis de plantilla te permite referenciar variables de plantilla (que son pasadas en la plantilla desde la vista)  y usar  filtros de plantilla, que reformatean las variables (por ejemplo, establecer una cadena en minúsculas).

+
+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% block title %}<title>Local Library</title>{% endblock %}
+</head>
+
+<body>
+  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
+  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
+</body>
+</html>
+
+ +

Cuando queremos definir una plantilla para una vista en particular, primero especificamos la plantila base  (con la etiqueta de plantilla  extends — vea el código siguiente). Si ahí hay alguna seccón que queremos reemplazar en la plantilla declaramos esto, usando secciones block/endblock  idénticas a las usadas en la plantilla base.

+ +

Por ejemplo, el fragmento de código que sigue muestra como usar la etiqueta de plantilla extends, y sobrescribe el bloque content. El HTML final producido tendrá todo el HTML y la estructura defininda en la plantilla base (incluyendo el contenido por defecto que ha definido dentro del bloque title), pero con tu nuevo bloque content insertado en lugar del que venía por defecto.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+<h1>Local Library Home</h1>
+<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
+{% endblock %}
+ +

La plantilla base de LocalLibrary

+ +

La plantilla base que pensamos usar para el siito web LocalLibrary se muestra abajo. Como puedes ver, contiene algo de HTML y bloques definidos para title, sidebar y content. Tenemos un título por defecto (que podríamos querer cambiar) y una barra lateral por defecto con enlaces a listas de todos los libros y autores (que probablemente no querramos cambiar, pero hemos dejado abierta la posibilidad de hacerlo si es necesario, poniéndolo en un bloque).

+ +
+

Nota: También introducimos dos etiquetas de plantilla adicionales: url y load static. Se discute sobre ellas en secciones posteriores.

+
+ +

Crea un nuevo archivo -- /locallibrary/catalog/templates/base_generic.html -- y pon en él el siguiente contenido:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  {% block title %}<title>Local Library</title>{% endblock %}
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+  <!-- Add additional CSS in static file -->
+  {% load static %}
+  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+</head>
+
+<body>
+
+  <div class="container-fluid">
+
+    <div class="row">
+      <div class="col-sm-2">
+      {% block sidebar %}
+      <ul class="sidebar-nav">
+          <li><a href="{% url 'index' %}">Home</a></li>
+          <li><a href="">All books</a></li>
+          <li><a href="">All authors</a></li>
+      </ul>
+     {% endblock %}
+      </div>
+      <div class="col-sm-10 ">
+      {% block content %}{% endblock %}
+      </div>
+    </div>
+
+  </div>
+</body>
+</html>
+ +

La plantilla usa (e incluye) JavaScript y CSS desde Bootstrap para mejorar el diseño y la presentación de la página HTML. Usar Bootstrap u otro framework web del lado del cliente es una manera rápida de crear una página atractiva que puede escalarse bien en diferentes tamaños de navegador, y también nos permite concentrarnos en la presentación de la página sin tener que entrar en ninguno de los detalles -- ¡queremos enfocarnos nada más en el código del lado del servidor aquí!

+ +

La plantilla base también hace referencia a un archivo css local (styles.css) que brinda algo más de estilo. Crea /locallibrary/catalog/static/css/styles.css y pon en él el siguiente contenido:

+ +
.sidebar-nav {
+    margin-top: 20px;
+    padding: 0;
+    list-style: none;
+}
+ +

La plantilla index

+ +

Crea el archivo HTML /locallibrary/catalog/templates/index.html y pon en él el contenido que se muestra abajo. Como puedes ver, extendemos nuestra plantilla base en la primera línea, y luego reemplazamos el bloque content por defecto con uno nuevo para esta plantilla.

+ +
{% extends "base_generic.html" %}
+
+{% block content %}
+<h1>Local Library Home</h1>
+
+  <p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
+
+<h2>Dynamic content</h2>
+
+  <p>The library has the following record counts:</p>
+  <ul>
+    <li><strong>Books:</strong> \{{ num_books }}</li>
+    <li><strong>Copies:</strong> \{{ num_instances }}</li>
+    <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+    <li><strong>Authors:</strong> \{{ num_authors }}</li>
+  </ul>
+
+{% endblock %}
+ +

En la sección Dynamic content hemos declarado marcadores de posición (variables de plantilla) para la información que quisimos incluir desde la vista. Las variables se marcan usando la sintaxis de "doble corchete" o "llaves" (ver lo que está en negrita arriba).

+ +
+

Nota: Puedes reconocer fácilmente si estás trabajando con variables de plantilla o con etiquetas de plantilla (funciones) porque las variables tienen llaves dobles (\{{ num_books }}) mientras que las etiquetas están encerradas entre llaves simples con signos de porcentaje ({% extends "base_generic.html" %}).

+
+ +

Lo importante de todo esto es que estas variables se nombran con las claves que enviamos dentro del diccionario context en la función render() de nuestra vista (mira abajo); estas variables serán reemplazadas por sus valores asociados cuando la plantilla sea renderizada.

+ +
return render(
+    request,
+    'index.html',
+     context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
+)
+ +

Referenciando archivos estáticos en las plantillas

+ +

Es probable que uses recursos estáticos en tu proyecto, incluyendo JavaScript, CSS e imágenes. Debido a que la ubicación de estos archivos podría ser desconocida (o podría cambiar), Django te permite especificar la ubicación de los mismos dentro de tus plantillas de forma relativa al parámetro global STATIC_URL (el sitio web esqueleto por defecto establece el valor de STATIC_URL a '/static/', pero puedes elegir alojar los archivos en una red de distribución de contenidos o en cualquier otro lugar).

+ +

Dentro de la plantilla, primero llamas a la etiqueta de plantilla load especificando "static" para añadir esta biblioteca de plantilla (como se muestra abajo). Luego de que static se carga, puedes usar la etiqueta de plantilla static especificando la URL relativa del archivo de interés.

+ +
 <!-- Add additional CSS in static file -->
+{% load static %}
+<link rel="stylesheet" href="{% static 'css/styles.css' %}">
+ +

Si quisieras podrías añadir una imagen a la página de forma similar. Por ejemplo:

+ +
{% load static %}
+<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/>
+
+ +
+

Nota: Los cambios de arriba especifican dónde se localizan los archivos, pero Django no los sirve por defecto. Si bien habilitamos este servicio para el servidor web de desarrollo en el mapeador URL global (/locallibrary/locallibrary/urls.py) cuando creamos el esqueleto del sitio web, aún necesitarás configurar este servicio para producción. Hablaramos de esto más tarde.

+
+ +

Para mayor información sobre el trabajo con archivos estáticos revisa Managing static files (Django docs).

+ +

Enlazando con URLs

+ +

En la plantilla base de arriba se introdujo la etiqueta de plantilla url.

+ +
<li><a href="{% url 'index' %}">Home</a></li>
+
+ +

Esta etiqueta toma el nombre de una función url() llamada en tu archivo urls.py, y valores para cualquier argumento que la vista asociada recibirá desde tal función, y devuelve una URL que puedes usar para enlazar con el recurso.

+ + + +

Configurando adonde buscar las plantillas

+ +

Para que Django encuentre los archivos de plantillas es necesario editar el archivo settings.py agregando el directorio donde creamos nuestras plantillas en el objeto TEMPLATES, como indica la linea en negrita a continuación:

+ +
TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+            os.path.join(BASE_DIR, 'templates'),
+        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+ +

¿Cómo se ve?

+ +

En este punto deberíamos haber creado todo lo necesario para desplegar la página index. Corre el servidor (python3 manage.py runserver) y dirige tu navegador a http://127.0.0.1:8000/. Si todo se configuró correctamente, tu sitio debería verse similar a la siguiente captura de pantalla.

+ +

Index page for LocalLibrary website

+ +
+

Nota: Aún no podrás usar los enlaces All books y All authors porque las URLs, vistas y plantillas para dichas páginas no se han definido (al momento solo hemos insertado marcadores de posición para esos enlaces en la plantilla base_generic.html).

+
+ +

Rétate a tí mismo

+ +

Aquí hay un par de tareas para probar tu familiaridad con consultas a modelos, vistas y plantillas.

+ +
    +
  1. Declara un nuevo bloque title en la plantilla index y cambia el título de la página para coincidir con esta página en particular.
    2. +
  2. Modifica la vista para generar un conteo de géneros y otro de libros que contengan una palabra en particular (no sensible a mayúsculas y minúsculas) y luego añade estos campos a la plantilla.
    3. +
+ + + +

Resumen

+ +

Hemos creado la página de inicio para nuestro sitio -- una página HTML que despliega algunos conteos de registros de la base de datos y contiene enlaces a otras de nuestras páginas que aún nos faltan por crear. Sobre la marcha hemos adquirido mucha información fundamental sobre mapeadores URL, vistas, consultas a la base de datos usando nuestros modelos, cómo enviar información a una plantilla desde nuestra vista, y cómo crear y extender plantillas.

+ +

En nuestro siguiente artículo nos basaremos en nuestro conocimiento para crear las otras cuatro páginas.

+ +

Mira también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}

+ + + +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/index.html b/files/es/learn/server-side/django/index.html new file mode 100644 index 0000000000..6a33f3e0be --- /dev/null +++ b/files/es/learn/server-side/django/index.html @@ -0,0 +1,66 @@ +--- +title: Framework Web Django (Python) +slug: Learn/Server-side/Django +tags: + - Aprendizaje + - Codificación de scripts + - Principiante + - Programación lado servidor + - Python + - django + - introducción +translation_of: Learn/Server-side/Django +--- +
Django es un framework web extremadamente popular y completamente funcional, escrito en Python. El módulo muestra por qué Django es uno de los frameworks de servidores web más populares, cómo configurar un entorno de desarrollo y cómo empezar a usarlo para crear tus propias aplicaciones web.
+ +

Requisitos Previos

+ +

Antes de comenzar este módulo no es necesario tener ningún conocimiento de Django. Tendrás que entender que son la programación web de lado servidor y los frameworks web, idealmente leyendo los temas en nuestro módulo Primeros pasos en la programación de lado servidor de sitios web.

+ +

Se recomienda un conocimiento general de los conceptos de programación y Python, pero no es esencial para entender los conceptos básicos

+ +
+

Nota: Python es uno de los lenguajes de programación más fáciles de leer y entender para los principiantes. Dicho esto, si desea comprender mejor este módulo, hay numerosos libros y tutoriales gratuitos disponibles en Internet (los nuevos programadores pueden querer ver la página de Python for Non Programmers en el wiki de python.org.

+
+ +

Guías

+ +
+
Introducción a Django
+
En este primer artículo de Django respondemos a la pregunta "¿Qué es Django?" y te dará una visión general de lo que hace a este framework web especial. Vamos a esbozar las principales características incluyendo algunas de las funciones avanzadas que no tendremos tiempo de cubrir en detalle en este módulo. También te mostraremos algunos de los principales bloques de construcción de una aplicación de Django, para darte una idea de lo que puedes hacer antes de que continúes configurándolo y comiences a jugar.
+
Puesta en marcha de un entorno de desarrollo de Django
+
Ahora que sabes qué es y para qué sirve Django, te mostraremos cómo configurar y probar un entorno de desarrollo Django en Windows, Linux(Ubuntu), y Mac OS X. Cualquiera que sea el sistema operativo común que estés utilizando, este articulo deberia de ofrecerte lo necesario para iniciarte en el desarrollo de aplicaciones en Django.
+
Tutorial de Django: Sitio web "Biblioteca Local"
+
El primer articulo de nuestra serie de tutoriales explica lo que se aprenderá y proporciona una descripcion general del sitio web de ejemplo "Biblioteca Local" en el cual trabajaremos y evolucionaremos en articulos posteriores.
+
Tutorial de Django Parte 2: Creación del esqueleto de un sitio web
+
Este artículo muestra cómo crear el "esqueleto" de un proyecto de sitio web como base, que luego se puede rellenar con configuraciones, urls, modelos, vistas y plantillas específicas del sitio.
+
Tutorial de Django Parte 3: Uso de modelos
+
Este artículo muestra cómo definir modelos para el sitio web de la Biblioteca Local — los modelos representan las estructuras en las que queremos almacenar los datos de nuestra app, y también permiten a Django almacenar datos en una base por nosotros (y modificarlos más tarde). Se explica qué es un modelo, cómo se declara y alguno de los principales tipos de campo. También se muestra brevemente unas pocas de las múltiples formas con las que puedes acceder al modelo de datos.
+
Tutorial de Django Parte 4: Sitio de Administración de Django
+
Ahora que hemos creado modelos para el sitio web de la Biblioteca Local, usaremos el sito de administración de Django para añadir algunos datos "reales" de libros. Primero te mostraremos cómo registrar los modelos con el sitio de administración, a continuación te mostraremos cómo iniciar sesión y crear algunos datos. Al final te mostramos algunas formas en las que puedes mejorar la presentación del sitio de administración.
+
Tutorial de Django Parte 5: Creación de tu página de inicio
+
Ahora estamos listos para añadir el código para presentar nuestra primera página completa — una página de inicio para la Biblioteca Local que muestra cuántos registros tenemos de cada tipo de modelo y proporciona una barra lateral con enlaces de navegación a otras páginas. A medida que avanzamos ganaremos experiencia práctica en la escritura de mapas URL y vistas, obtención de registros de la base de datos y la utilización de plantillas.
+
Tutorial de Django Parte 6: Listas genéricas y vistas de detalle
+
Este tutorial extiende el sitio web de nuestra Biblioteca Local añadiendo listas y páginas de detalle de libros y autores. Aquí aprenderemos sobre vistas genéricas basadas en clases y se mostrará cómo pueden reducir la cantidad de código que tienes que escribir para casos de uso común. También nos adentraremos en la gestión de URL en gran detalle, mostrando cómo realizar un emparejamiento básico de patrones.
+
Tutorial de Django Parte 7: Framework de sesiones
+
Este tutorial extiende nuestro sitio web de Biblioteca Local añadiendo a nuestra página de inicio un contador de visitas basado en sesión. Este es un ejemplo relativamente simple, pero muestra de verdad cómo puedes usar el framework de sesión para proporcionar un comportamiento presistente para usuarios anónimos en tus propios sitios.
+
Tutorial de Django Parte 8: Autenticación y permisos de Usuario
+
En este tutorial te mostraremos cómo permitir a los usuarios iniciar sesión en tu sitio con sus propias cuentas y cómo controlar lo que pueden hacer y ver, basado en si han iniciado sesión o no y en sus permisos. Como parte de esta demostración extenderemos el sitio web de la Biblioteca Local, añadiendo páginas de inicio y cierre de sesión, y páginas específicas de usuario - y de personal - para ver libros que han sido prestados.
+
Tutorial de Django Parte 9: Trabajo con formularios
+
En este tutorial te mostraremos cómo trabajar con Formularios HTML en Django, y en particular la forma más fácil de escribir formularios para crear, actualizar y borrar instancias de modelos. Como parte de esta demostración extenderemos el sitio web de la Biblioteca Local de manera que los bibliotecarios puedan renovar libros, y crear, actualizar y borrar autores usando sus propios formularios (en vez de usar la aplicación de administración).
+
Tutorial de Django Parte 10: Probando una aplicación web Django
+
A medida que crecen los sitios web se vuelven más difíciles de probar a mano — no sólo hay más para probar, sino que además, a medida que las interacciones entre los componentes se vuelven más complejas, un pequeño cambio en un área puede suponer muchas pruebas adicionales para verificar su impacto en otras áreas. Una forma de mitigar estos problemas es escribir tests automatizados, que pueden ser ejecutados de manera fácil y fiable cada vez que hagas un cambio. Este tutorial muestra cómo automatizar la unidad de pruebas de tu sitio web usando el framework de pruebas de Django.
+
Tutorial de Django Parte 11: Desplegando Django a producción
+
Ahora que has creado (y probado) un impresionante sitio web para la Biblioteca Local, vas a querer instalarlo en un servidor web público de manera que pueda ser accedido por el personal y los miembros de la biblioteca a través de Internet. Este artículo proporciona una visión general de cómo podrías ir buscando un host para desplegar tu sitio web y lo que necesitas hacer para conseguir que tu sitio esté listo en producción.
+
Seguridad de las aplicaciones web Django
+
Proteger los datos de los usuarios es una parte esencial de cualquier diseño de un sitio web. Previamente ya explicamos algunas de las amenazas de seguridad más comunes en el artículo Seguridad Web — este artículo proporciona una demostración práctica de cómo las protecciones integradas de Django gestionan estas amenazas.
+
+ +

Evaluaciones

+ +

La siguiente evaluación comprobará tu comprensión de cómo crear un sitio web usando Django, como se describe en las guías listadas arriba.

+ +
+
Mini Blog Django Hazlo tu mismo
+
En esta evaluación usarás algo del conocimiento que has aprendido en este módulo para crear tu propio blog.
+
diff --git "a/files/es/learn/server-side/django/introducci\303\263n/index.html" "b/files/es/learn/server-side/django/introducci\303\263n/index.html" new file mode 100644 index 0000000000..484b311a2c --- /dev/null +++ "b/files/es/learn/server-side/django/introducci\303\263n/index.html" @@ -0,0 +1,282 @@ +--- +title: Introducción a Django +slug: Learn/Server-side/Django/Introducción +tags: + - Aprendizaje + - CodigoScript + - Principiante + - Programación lado servidor + - Python + - django + - introducción +translation_of: Learn/Server-side/Django/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
+ +

En este primer artículo de Django responderemos la pregunta ¿Qué es Django? y daremos una visión general de lo que hace que este framework sea tan especial. Vamos a delinear las características principales, incluidas algunas de las funcionalidades avanzadas que no tendremos tiempo de cubrir con detalle en este módulo.  Tambien mostraremos algunos de los componentes principales de una aplicación de Django. (aunque en este momento no cuentes con un entorno de desarrollo en el cual probarlo).

+ + + + + + + + + + + + +
Pre requisitos:Conocimientos basicos en informatica. Una comprensión general de programación del lado del servidor, y en particular de los mecanimos de interacciones cliente-servidor en los sitios web.
Objetivos:Familiarizarse con lo que es Django, que funcionalidad proporciona y los componentes principales de una aplicación Django.
+ +

¿Qué es Django?

+ +

Django es un framework web de alto nivel que permite el desarrollo rápido de sitios web seguros y mantenibles. Desarrollado por programadores experimentados, Django se encarga de gran parte de las complicaciones del desarrollo web, por lo que puedes concentrarte en escribir tu aplicación sin necesidad de reinventar la rueda. Es gratuito y de código abierto, tiene una comunidad próspera y activa, una gran documentación y muchas opciones de soporte gratuito y de pago.

+ +

Django te ayuda a escribir software que es:

+ +
+
Completo
+
Django sigue la filosofía "Baterías incluidas" y provee casi todo lo que los desarrolladores quisieran que tenga "de fábrica". Porque todo lo que necesitas es parte de un único "producto", todo funciona a la perfección, sigue principios de diseño consistentes y tiene una amplia y actualizada documentación.
+
Versátil
+
Django puede ser (y ha sido) usado para construir casi cualquier tipo de sitio web — desde sistemas manejadores de contenidos y wikis, hasta redes sociales y sitios de noticias. Puede funcionar con cualquier framework en el lado del cliente, y puede devolver contenido en casi cualquier formato (incluyendo HTML, RSS feeds, JSON, XML, etc). ¡El sitio que estás leyendo actualmente está basado en Django!
+
+ Internamente, mientras ofrece opciones para casi cualquier funcionalidad que desees (distintos motores de base de datos , motores de plantillas, etc.), también puede ser extendido para usar otros componentes si es necesario.
+
Seguro
+
Django ayuda a los desarrolladores evitar varios errores comunes de seguridad al proveer un framework que ha sido diseñado para "hacer lo correcto" para proteger el sitio web automáticamente. Por ejemplo, Django, proporciona una manera segura de administrar cuentas de usuario y contraseñas, evitando así errores comunes como colocar informaciones de sesión en cookies donde es vulnerable (en lugar de eso las cookies solo contienen una clave y los datos se almacenan en la base de datos) o se almacenan directamente las contraseñas en un hash de contraseñas.
+  
+ Un hash de contraseña es un valor de longitud fija creado al enviar la contraseña a una cryptographic hash function. Django puede validar si la contraseña ingresada es correcta enviándola a través de una función hash y comparando la salida con el valor hash almacenado. Sin embargo debido a la naturaleza "unidireccional" de la función, incluso si un valor hash almacenado se ve comprometido es difícil para un atacante resolver la contraseña original.
+
+ Django permite protección contra algunas vulnerabilidades de forma predeterminada, incluida la inyección SQL, scripts entre sitios, falsificación de solicitudes entre sitios y clickjacking (consulte Seguridad de sitios web para obtener más detalles sobre dichos ataques).
+
Escalable
+
Django usa un componente basado en la arquitectura “shared-nothing” (cada parte de la arquitectura es independiente de las otras, y por lo tanto puede ser reemplazado o cambiado si es necesario). Teniendo en cuenta una clara separación entre las diferentes partes significa que puede escalar para aumentar el tráfico al agregar hardware en cualquier nivel: servidores de cache, servidores de bases de datos o servidores de aplicación. Algunos de los sitios más concurridos han escalado a Django para satisfacer sus demandas (por ejemplo, Instagram y Disqus, por nombrar solo dos).
+
Mantenible
+
El código de Django está escrito usando principios y patrones de diseño para fomentar la creación de código mantenible y reutilizable. En particular, utiliza el principio No te repitas "Don't Repeat Yourself" (DRY) para que no exista una duplicación innecesaria, reduciendo la cantidad de código. Django también promueve la agrupación de la funcionalidad relacionada en "aplicaciones" reutilizables y en un nivel más bajo, agrupa código relacionado en módulos (siguiendo el patrón Model View Controller (MVC)).
+
Portable
+
Django está escrito en Python, el cual se ejecuta en muchas plataformas. Lo que significa que no está sujeto a ninguna plataforma en particular, y puede ejecutar sus aplicaciones en muchas distribuciones de Linux, Windows y Mac OS X. Además, Django cuenta con el respaldo de muchos proveedores de alojamiento web, y que a menudo proporcionan una infraestructura específica y documentación para el alojamiento de sitios de Django.
+
+ +

¿De dónde vino?

+ +

Django fue desarrollado inicialmente entre 2003 y 2005 por un equipo que era responsable de crear y mantener sitios web de periódicos. Después de crear varios sitios, el equipo empezó a tener en cuenta y reutilizar muchos códigos y patrones de diseño comunes. Este código común se convirtió en un framework web genérico, que fue de código abierto, conocido como proyecto "Django" en julio de 2005.

+ +

Django ha continuado creciendo y mejorando desde su primer hito, el lanzamiento de la versión (1.0) en septiembre de 2008, hasta el reciente lanzamiento de la versión 1.11 (2017). Cada lanzamiento ha añadido nuevas funcionalidades y solucionado errores, que van desde soporte de nuevos tipos de bases de datos, motores de plantillas, caching, hasta la adición de funciones genéricas y clases de visualización (que reducen la cantidad de código que los desarrolladores tiene que escribir para numerosas tareas de programación).

+ +
+

Nota: Consulte las notas de lanzamiento en el sitio web de Django para ver qué ha cambiado en las versiones recientes y cúanto trabajo se lleva a cabo para mejorar Django.

+
+ +

Django es ahora un próspero proyecto colaborativo de código abierto, con miles de usuarios y contribuidores. Mientras que todavía presenta algunas características que reflejan su origen, Django ha evolucionado en un framework versátil que es capaz de desarrollar cualquier tipo de sitio web.

+ + + +

No hay una medida de popularidad definitiva y disponible de inmediato de "frameworks de lado servidor" (aunque sitios como Hot Frameworks intentan evaluar la popularidad usando mecanismos como contar el número de proyectos en Github y preguntas en StackOverflow de cada plataforma). Una pregunta mejor es si Django es lo "suficientemente popular" para evitar los problemas de las plataformas menos populares. ¿Continúa evolucionando? ¿Puedes conseguir la ayuda que necesitas? ¿Hay alguna posibilidad de que consigas un trabajo pagado si aprendes Django?

+ +

De acuerdo con el número de sitios que usan Django, el número de gente que contribuye al código base, y el número de gente que proporciona soporte tanto libre como pagado, podemos entonces decir que sí, !Django es un framework popular!

+ +

Los sitios de alto nivel que usan Django incluyen: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest y Open Stack (fuente: Página de inicio de Django).

+ +

¿Es Django dogmático?

+ +

Los frameworks web frecuentemente se refieren a sí mismos como "dogmáticos" ("opinionated") o "no dogmáticos" ("unopinionated").

+ +

Los frameworks dogmáticos son aquellos que opinan acerca de la "manera correcta" de gestionar cualquier tarea en particular. Ofrecen soporte para el desarrollo rápido en un dominio en particular (resolver problemas de un tipo en particular) porque la manera correcta de hacer cualquier cosa está generalmente bien comprendida y bien documentada.

+ +

Sin embargo pueden ser menos flexibles para resolver problemas fuera de su dominio principal, y tienden a ofrecer menos opciones para elegir qué componentes y enfoques pueden usarse.

+ +

Los framewoks no dogmáticos, por contra, tienen muchas menos restricciones sobre el modo mejor de unir componentes para alcanzar un objetivo, o incluso qué componentes deberían usarse. Hacen más fácil para los desarrolladores usar las herramientas más adecuadas para completar una tarea en particular, si bien al coste de que necesitas encontrar esos componentes por tí mismo.

+ +

Django es "dogmático pero no del todo" y por tanto entrega "lo mejor de ambos mundos". Proporciona un conjunto de componentes para gestionar la mayoría de las tareas de desarrollo web y una (o dos) maneras preferidas de usarlos. Sin embargo, la arquitectura desacoplada de Django implica que puedes normalmente escoger y seleccionar de entre numerosas opciones diferentes o añadir soporte para otras completamente nuevas, si lo deseas.

+ +

¿Qué pinta tiene el código de Django?

+ +

En un sitio web tradicional basado en datos, una aplicación web espera peticiones HTTP del explorador web (o de otro cliente). Cuando se recibe una petición la aplicación elabora lo que se necesita basándose en la URL y posiblemente en la información incluida en los datos POST o GET. Dependiendo de qué se necesita quizás pueda entonces leer o escribir información desde una base de datos o realizar otras tareas requeridas para satisfacer la petición. La aplicación devolverá a continuación una respuesta al explorador web, con frecuencia creando dinámicamente una página HTML para que el explorador la presente insertando los datos recuperados en marcadores de posición dentro de una plantilla HTML.

+ +

Las aplicaciones web de Django normalmente agrupan el código que gestiona cada uno de estos pasos en ficheros separados:

+ +

+ + + +
+

Nota: Django se refiere a este tipo de organización como arquitectura Modelo Vista Plantilla "Model View Template (MVT)". Tiene muchas similaridades con la arquitectura más familiar Model View Controller. 

+
+ + + +

Las secciones de más abajo te darán una idea de la pinta que tienen estas partes principales de una aplicación Django (entraremos en más detalles más adelante en el curso, una vez que hallamos configurado un entorno de desarrollo).

+ +

Enviar la petición a la vista correcta (urls.py)

+ +

Un mapeador URL está normalmente almacenado en un fichero llamado urls.py. En el ejemplo más abajo el mapeador (urlpatterns) define una lista de mapeos entre patrones URL específicos y sus correspondientes funciones de visualización. Si se recibe una Petición HTTP que tiene una URL que empareja un patrón específico (ej. r'^$', más abajo) se realizará una llamada y se pasará la petición a la función de visualización asociada (ej.  views.index).

+ +
urlpatterns = [
+    url(r'^$', views.index),
+    url(r'^([0-9]+)/$', views.best),
+]
+
+ +
+

Nota: Un poco de Python:

+ + +
+ +

Manejar la petición (views.py)

+ +

Las vistas son el corazón de la aplicación web, recibiendo peticiones HTTP de los clientes web y devolviendo respuestas HTTP. Entre éstas, organizan los otros recursos del framework para acceder a las bases de datos, consolidar plantillas, etc.

+ +

El ejemplo más abajo muestra una mínima función de visualización index(), que podría ser llamada por nuestro mapeador de URL de la sección anterior. Al igual que todas las funciones de visualización, recibe un objeto HttpRequest como parámetro (request) y devuelve un objeto HttpResponse. En este caso no hacemos nada con la petición y nuestra respuesta simplemente devuelve una cadena insertada de forma fija en el código. Te mostraremos una petición que hace algo más interesante en la siguiente sección.

+ +
## fichero: views.py (funciones de visualizacion de Django)
+from django.http import HttpResponse
+
+def index(request):
+    # Obtener un HttpRequest - el parametro peticion
+    # Realizar operaciones usando la infomracion de la peticion.
+    # Devolver una HttpResponse
+    return HttpResponse('!Hola desde Django!')
+
+ +
+

Nota: Un poco de Python:

+ + +
+ + + +

Las vistas se almacenan normalmente en un fichero llamado views.py.

+ +

Definir modelos de datos (models.py)

+ +

Las aplicaciones web Django manejan y consultan datos a través de objetos Python referidos como modelos. Los modelos definen la estructura de los datos almacenados, incluyendo los tipos de campos y posiblemente también su tamaño máximo, los valores por defecto, la lista de selección de opciones, texto de ayuda para documentación, etiquetas de texto para formularios, etc. La definición del modelo es independiente de la base de datos subyacente — puedes elegir una entre varias como parte de la configuración de tu proyecto. Una vez que has seleccionado qué base de datos quieres usar, no necesitas en absoluto comunicarte con ella directamente — sólo hay que escribir la estructura de la base y otro código y Django se encarga por tí de todo el trabajo sucio de comunicarse con la base de datos.

+ +

El fragmento de código de más abajo muestra un modelo de Django muy simple para un objeto Team. La clase Team deriva de la clase de django models.Model. Define el nombre de un equipo y su nivel como campos de tipo carácter y especifica un número máximo de caracteres que pueden ser almacenados en cada registro. El team_level puede ser un valor de entre varios, de manera que lo definimos como un campo de opciones y proporcionamos un mapeo entre opciones para mostrar y datos para almacenar, junto con un valor por defecto.

+ +
# filename: models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11', 'Under 11s'),
+        ...  #list other team levels
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+
+ +
+

Nota: Un poco de Python:

+ + +
+ +

Consultar datos (views.py)

+ +

El modelo de Django proporciona una API de consulta simple para buscar en la base de datos. Esta puede buscar concidencias contra varios campos al mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas, mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes especificar que se busque equipos U11 que tengan un nombre de equipo que empiece por "Fr" o termine con "al").

+ +

El fragmento de código de más abajo muestra una función de visualización (manejador de recursos) para presentar en pantalla todos nuestros equipos U09. La línea en negrilla muestra como podemos usar la API de consulta del modelo para filtrar todos los registros donde el campo team_level tenga exactamente el texto 'U09' (fíjate como este criterio se pasa como argumento a la función filter() con el nombre del campo y tipo de coincidencia separados por un doble guion bajo: team_level__exact).

+ +
## filename: views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def index(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, '/best/index.html', context)
+
+ +
+
+ +

Esta función utiliza la función render() para crear la HttpResponse que se envía de vuelta al explorador. Esta función es un atajo; crea un fichero HTML mediante la combinación de una plantilla HTML específica y algunos datos para insertar en ella (proporcionados en la variable "context"). En la siguiente sección mostramos como la plantilla tiene los datos insertados en ella para crear el HTML.

+ +

Renderización de los datos (plantillas HTML)

+ +

Los sistemas de plantillas permiten especificar la estructura de un documento de salida usando marcadores de posición para los datos que serán rellenados cuando se genere la página. Las plantillas se usan con frecuencia para crear HTML, también pueden crear otros tipos de documentos. Django soporta de fábrica tanto su sistema de plantillas nativo como otra biblioteca Python popular llamada Jinja2 (y se puede hacer que soporte otros sistemas si hace falta).

+ +

El fragmento de código de más abajo muestra el aspecto que podría tener la plantilla HTML llamada por la función render() de la sección anterior. Esta plantilla ha sido escrita bajo la suposición de que cuando sea renderizada tendrá acceso a una variable tipo lista llamada youngest_teams (contenida en la variable context dentro de la función render() de más arriba). Dentro del esqueleto HTML tenemos una expresión que primero comprueba que existe la variable youngest_teams, y luego itera sobre ella en un bucle for. En cada iteración la plantilla presenta cada valor del campo team_name del equipo en un elemento {{htmlelement("li")}}.

+ +
## filename: best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<body>
+
+ {% if youngest_teams %}
+    <ul>
+    {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+    {% endfor %}
+    </ul>
+{% else %}
+    <p>No teams are available.</p>
+{% endif %}
+
+</body>
+</html>
+ +

¿Qué más puedes hacer?

+ +

Las secciones prededentes muestran las principales características que usarás en casi todas las aplicaciones web: mapeo de URLs, vistas, modelos y plantillas. Sólo unas pocas de las otras cosas que Django proporciona y que incluyen:

+ + + +

Sumario

+ +

¡Felicidades, has completado el primer paso en tu viaje por Django! Deberías ahora ser consciente de los principales beneficios de Django, algo de su historia y a groso modo la pinta que tienen cada una de las partes principales de una de sus apps. Deberías también haber aprendido unas pocas cosas acerca del lenguaje de programación Python, incluyendo la sintaxis para las listas, funciones y clases.

+ +

Has visto ya algo de código real de Django más arriba, pero a diferencia del código de lado cliente, necesitas configurar un entorno de desarrollo para hacerlo funcionar. Ese será nuestro siguiente paso.

+ +
{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}} +

En este módulo

+ + +
diff --git a/files/es/learn/server-side/django/models/index.html b/files/es/learn/server-side/django/models/index.html new file mode 100644 index 0000000000..95b6c670ea --- /dev/null +++ b/files/es/learn/server-side/django/models/index.html @@ -0,0 +1,490 @@ +--- +title: 'Tutorial Django Parte 3: Uso de modelos' +slug: Learn/Server-side/Django/Models +tags: + - Aprender + - Artículo + - Datos + - Modelo + - Principiante + - Tutorial + - django + - lado-servidor +translation_of: Learn/Server-side/Django/Models +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}
+ +

Este artículo muestra cómo definir modelos para el sitio web de la BibliotecaLocal. En él se explica lo que es un modelo, cómo se declara, y cuáles son algunos de los principales tipos de campos de un modelo. También veremos, brevemente, cuáles son algunas de las maneras en que puede accederse a los datos del modelo.

+ + + + + + + + + + + + +
Pre-requisitos:Tutorial Django Parte 2: Creación del esqueleto del sitio web.
Objetivo: +

Ser capaz de diseñar y crear tus propios modelos, eligiendo de forma apropiada los campos.

+
+ +

Visión general

+ +

Las aplicaciones web de Django acceden y administran los datos a través de objetos de Python a los que se hace referencia como modelos. Los modelos definen la estructura de los datos almacenados, incluidos los tipos de campo y los atributos de cada campo, como su tamaño máximo, valores predeterminados, lista de selección de opciones, texto de ayuda para la documentación, texto de etiqueta para formularios, etc. La definición del modelo es independiente de la base de datos subyacente. puede elegir una de entre varias como parte de la configuración de su proyecto. Una vez que haya elegido la base de datos que desea usar, no necesita hablar directamente con ella. Simplemente escriba la estructura de su modelo y algo de código, y Django se encargará de todo el trabajo sucio, al comunicarse con la base de datos por usted.

+ +

Este tutorial muestra cómo definir y acceder a los modelos para el ejemplo del sitio web LocalLibrary.

+ +

Diseñando los modelos de LocalLibrary

+ +

Antes de dar el salto y comenzar a codificar los modelos, vale la pena tomarse unos minutos para pensar qué datos necesitamos almacenar y cuáles serán las relaciones entre los diferentes objetos.

+ +

Sabemos que tenemos que almacenar información sobre libros (título, resumen, autor, idioma escrito, categoría, ISBN) y que podríamos tener varias copias disponibles (con id único global, estado de disponibilidad, etc.). Es posible que necesitemos almacenar más información sobre el autor que solo su nombre, y puede haber varios autores con el mismo nombre o nombres similares. Queremos poder ordenar la información según el título del libro, el autor, el idioma escrito y la categoría.

+ +

Al diseñar sus modelos, tiene sentido tener modelos separados para cada "objeto" (grupo de información relacionada). En este caso, los objetos obvios son libros, instancias de libros y autores.

+ +

También es posible que desee utilizar modelos para representar las opciones de la lista de selección (por ejemplo, como una lista desplegable de opciones), en lugar de codificar las opciones en el sitio web en sí; esto se recomienda cuando no se conocen de antemano todas las opciones posibles o éstas están sujetas a cambios. Los candidatos obvios para las modelos, en este caso, incluyen el género del libro (por ejemplo, ciencia ficción, poesía francesa, etc.) y el idioma (inglés, francés, japonés).

+ +

Una vez que hayamos decidido cuáles serán nuestros modelos y sus campos, debemos pensar en la relación que existe entre ellos. Django le permite definir relaciones de uno a uno (OneToOneField), de uno a muchos (ForeignKey) y de muchos a muchos (ManyToManyField).

+ +

Con esto en mente, el diagrama de asociación UML a continuación muestra los modelos que definiremos en este caso (como recuadros). Como se mencionó anteriormente, hemos creado modelos para el libro (los detalles genéricos del libro), instancia del libro (estado de copias físicas específicas del libro disponible en el sistema) y autor. También hemos decidido tener un modelo para el género, para que los valores se puedan crear/seleccionar a través de la interfaz admin. Hemos decidido no tener un modelo para el BookInstance:status, en su lugar, hemos especificado directamente, en el código, los valores (LOAN_STATUS) porque no esperamos que cambien. Dentro de cada uno de los cuadros, puede ver el nombre del modelo, los nombres y tipos de campo, y también los métodos y sus tipos de devolución.

+ +

El diagrama también muestra las relaciones entre los modelos, incluida su cardinalidad. La cardinalidad expresa la cantidad de instancias (máximo y mínimo) de cada modelo que pueden estar presentes en la relación. Por ejemplo, la línea de conexión entre los cuadros muestra que Book y Genre están relacionados. Los números cercanos al modelo Book muestran que un libro debe tener uno o más Genres (tantos como desee), mientras que los números al otro lado de la línea al lado de Genre muestran que puede tener cero o más libros asociados.

+ +

LocalLibrary Model UML

+ +
+

Nota: La siguiente sección proporciona un manual básico que explica cómo se definen y utilizan los modelos. Mientras lo lees, considera cómo construiremos cada uno de los modelos en el diagrama de arriba.

+
+ +

Cartilla del Modelo

+ +

Esta sección provee una vista resumida de cómo se define un modelo y algunos de los campos más importantes y argumentos de campo. 

+ +

Definición de modelo

+ +

Los modelos están definidos, normalmente, en el archivo models.py de la aplicación. Son implementados como subclases de django.db.models.Model, y pueden incluir campos, métodos y metadata. El fragmento de código más abajo muestra un modelo "típico", llamado MyModelName:

+ +
from django.db import models
+
+class MyModelName(models.Model):
+    """
+    Una clase típica definiendo un modelo, derivado desde la clase Model.
+    """
+
+    # Campos
+    my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")
+    ...
+
+    # Metadata
+    class Meta:
+        ordering = ["-my_field_name"]
+
+    # Métodos
+    def get_absolute_url(self):
+         """
+         Devuelve la url para acceder a una instancia particular de MyModelName.
+         """
+         return reverse('model-detail-view', args=[str(self.id)])
+
+    def __str__(self):
+        """
+        Cadena para representar el objeto MyModelName (en el sitio de Admin, etc.)
+        """
+        return self.field_name
+ +

En las secciones de abajo exploraremos cada una de las características interiores de un modelo en detalle:

+ +

Campos

+ +

Un modelo puede tener un número arbitrario de campos, de cualquier tipo. Cada uno representa una columna de datos que queremos guardar en nuestras tablas de la base de datos. Cada registro de la base de datos (fila) consistirá en uno de cada posible valor del campo. Echemos un vistazo al ejemplo visto arriba:

+ +
my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")
+ +

Nuestro ejemplo de arriba tiene un único campo llamado my_field_name, de tipo models.CharField — lo que significa que este campo contendrá una cadena de caracteres alfanuméricos. Los tipos de campo son asignados usando clases específicas, que determinan el tipo de registro que se usa para guardar el dato en la base, junto con un criterio de evaluación que se usará cuando se reciban los valores de un formulario HTML (es decir, qué constituye un valor válido). Los tipos de campo pueden también tomar argumentos que especifican además cómo se guarda o cómo se puede usar. En este caso le damos a nuestro campo dos argumentos:

+ + + +

El nombre del campo se usa para referirnos a él en consultas (queries) y plantillas (templates). Los campos también tienen una etiqueta, que puede ser especificada como argumento (verbose_name) o inferida automáticamente, a partir del nombre de variable que identifica al campo, capitalizando la primera letra y reemplazando los guiones bajos por espacios (por ejemplo my_field_name tendría la etiqueta por defecto de My field name). El orden en que los campos son declarados afectará su orden por defecto si un modelo es renderizado en un formulario (ej. en el sitio de Administración), aunque este comportamiento se puede anular.

+ +
Argumentos comunes de los campos
+ +

Los siguientes argumentos son comunes a la mayoría de los tipos de campo y pueden usarse al declararlos:

+ + + +

Hay muchas otras opciones — puedes ver la lista completa de opciones aquí.

+ +
Tipos comunes de campos
+ +

La lista siguiente describe algunos de los tipos de campo más comunmente usados. 

+ + + +

Hay muchos otros tipos de campos, incluyendo campos para diferentes tipos de números (enteros grandes, enteros pequeños, en coma flotante), boleanos, URLs, slugs, identificadores únicos, y otra información relacionada con el tiempo (duración, hora, etc..). Puedes ver la lista completa aquí.

+ +

Metadatos

+ +

Puedes declarar metadatos a nivel de modelo para tu Modelo declarando class Meta, tal como se muestra.

+ +
class Meta:
+    ordering = ["-my_field_name"]
+    ...
+ +

Una de las características más útiles de estos metadatos es controlar el orden por defecto de los registros que se devuelven cuando se consulta el tipo de modelo. Se hace especificando el orden de comprobación en una lista de nombres de campo en el atributo ordering, como se muestra arriba. La ordenación dependerá del tipo de campo (los campos de caracteres de ordenan alfabéticamente, mientras que los campos de fechas están clasificados por orden cronológico). Como se muestra arriba, se puede invertir el orden de clasificación añadiendo el símbolo (-) como prefijo del nombre del campo.

+ +

Así como ejemplo, si elegimos clasificar los libros de esta forma por defecto:

+ +
ordering = ["title", "-pubdate"]
+ +

los libros serán clasificados alfabéticamente por título, de la A al a Z, y luego por fecha de publicación dentro de cada título, desde el más reciente al más antiguo.

+ +

Otro atributo común es verbose_name, un nombre descriptivo para la clase en forma singular y plural:

+ +
verbose_name = "BetterName"
+ +

Otros atributos útiles te permiten crear y aplicar nuevos "permisos de acceso" para el modelo (los permisos por defecto se aplican automáticamente), te permiten la ordenación basado en otro campo, o declarar que la clase es "abstracta" (una clase base para la que no vas a crear registros, y que en cambio se derivará para crear otros modelos).

+ +

Muchas de las otras opciones de metadatos controlan qué base datos debe usarse para el modelo y cómo se guardan los datos (éstas son realmente útiles si necesitas mapear un modelo a una base datos existente).

+ +

La lista completa de opciones de metadatos está disponible aquí: Opciones de metadatos de Modelos (Django docs).

+ +

Metodos

+ +

Un modelo puede tener también métodos

+ +

Minimamente, en cada modelo deberías definir el método estándar de las clases de Python __str__() para devolver una cadena de texto legible por humanos para cada objeto. Esta cadena se usa para representar registros individuales en el sitio de administración (y en cualquier otro lugar donde necesites referirte a una instancia del modelo). Con frecuencia éste devolverá un título o nombre de campo del modelo.

+ +
def __str__(self):
+    return self.field_name
+ +

Otro método común a incluir en los modelos de Django es get_absolute_url(), que devuelve un URL para presentar registros individuales del modelo en el sitio web (si defines este método, Django añadirá automáticamente un botón "Ver en el sitio" en la ventana de edición del registro del modelo en el sitio de Administración). Un patrón típico para get_absolute_url() se muestra abajo.

+ +
def get_absolute_url(self):
+    """
+     Devuelve la url para acceder a una instancia particular del modelo.
+    """
+    return reverse('model-detail-view', args=[str(self.id)])
+
+ +
+

Nota: Asumiendo que usarás URLs tipo /myapplication/mymodelname/2 para presentar registros individuales para tu modelo (donde "2" es el id de un registro en particular), necesitarás crear un mapeador URL para pasar la respuesta e id a la "vista detallada del modelo (model detail view)" (que hará el trabajo requerido para presentar el registro). La función reverse() de arriba es capaz de "invertir" tu mapeador url (llamado 'model-detail-view' en el caso de arriba) para crear una URL del formato correcto.

+ +

Por supuesto para hacer este trabajo ¡tienes aún que escribir el mapeo URL, la vista y la plantilla!

+
+ +

Puedes también definir todos los métodos que te apetezca y llamarlos desde tu código o plantillas (siempre y cuando no reciban ningún parámetro).

+ +

Gestión de Modelos

+ +

Una vez que has definido tus clases de modelos puedes usarlas para crear, actualizar o borrar registros, y ejecutar consultas para obtener todos los registros o subconjuntos particulares de registros. Te mostraremos cómo hacer eso en el tutorial cuando definamos nuestras vistas, pero aquí va un breve resumen.

+ +

Creación y modificación de registros

+ +

Para crear un registro puedes definir una instancia del modelo y llamar a save().

+ +
# Creación de un nuevo registro usando el constructor del modelo.
+a_record = MyModelName(my_field_name="Instancia #1")
+
+# Guardar el objeto en la base de datos.
+a_record.save()
+
+ +
+

Nota: Si no has declarado ningún campo como primary_key, al nuevo registro se le proporcionará una automáticamente, con el nombre de campo id. Puedes consultar este campo después de guardar el registro anterior y debería tener un valor de 1.

+
+ +

Puedes acceder a los campos de este nuevo registro usando la sintaxis de puntos y cambiar los valores. Tienes que llamar a save() para almacenar los valores modificados en la base de datos.

+ +
# Accesso a los valores de los campos del modelo usando atributos Python.
+print(a_record.id) # Debería devolver 1 para el primer registro.
+print(a_record.my_field_name) # Debería imprimir 'Instancia #1'
+
+# Cambio de un registro modificando los campos llamando a save() a continuación.
+a_record.my_field_name="Nuevo Nombre de Instancia"
+a_record.save()
+ +

Búsqueda de registros

+ +

Puedes buscar registros que coincidan con un cierto criterio usando el atributo objects del modelo (proporcionado por la clase base).

+ +
+

Nota: Explicar cómo buscar registros usando un modelo y nombres de campo "abstractos" puede resultar un poco confuso. En la exposición de abajo nos referiremos a un modelo Book con campos title y genre, donde genre (género) es también un modelo con un solo campo name.

+
+ +

Podemos obtener todos los registros de un modelo como QuerySet, usando objects.all(). El QuerySet es un objeto iterable, significando que contiene un número de objetos por los que podemos iterar/hacer bucle.

+ +
all_books = Book.objects.all()
+
+ +

El método de Django filter() nos permite filtrar el QuerySet devuelto para que coincida un campo de texto o numérico con un criterio particular. Por ejemplo, para filtrar libros que contengan la palabra "wild" en el título y luego contarlos, podemos hacer lo siguiente:

+ +
wild_books = Book.objects.filter(title__contains='wild')
+number_wild_books = Book.objects.filter(title__contains='wild').count()
+
+ +

Los campos a buscar y el tipo de coincidencia son definidos en el nombre del parámetro de filtro, usando el formato: field_name__match_type (ten en cuenta el doble guión bajo entre title y contains anterior). En el ejemplo anterior estamos filtrando title por un valor sensible a mayúsculas y minúsculas. Puedes hacer otros muchos tipos de coincidencias: icontains (no sensible a mayúsculas ni minúsculas), iexact (coincidencia exacta no sensible a mayúsculas ni minúsculas), exact (coincidencia exacta sensible a mayúsculas y minúsculas) e in, gt (mayor que), startswith, etc. Puede ver la lista completa aquí.

+ +

En algunos casos, necesitarás filtrar por un campo que define una relación uno-a-muchos con otro modelo (por ejemplo, una ForeignKey). En estos casos puedes "referenciar" a campos dentro del modelo relacionado con un doble guión bajo adicional. Así, por ejemplo, para filtrar los libros de un género específico tienes que referenciar el name a través del campo genre como se muestra más abajo:

+ +
books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')  # Will match on: Fiction, Science fiction, non-fiction etc.
+
+ +
+

Nota: Puedes usar guiones bajos (__)  para navegar por tantos niveles de relaciones (ForeignKey/ManyToManyField) como quieras. Por ejemplo, un Book que tuviera diferentes "types", definidos usando una relación adicional "cover", podría tener un nombre de parámetro: type__cover__name__exact='hard'.

+
+ +

Puedes hacer muchas más cosas con las consultas, incluyendo búsquedas hacia atrás de modelos relacionados, filtros encadenados, devolver un conjunto de valores más pequeño, etc. Para más información, puedes consultar Elaborar consultas (Django Docs).

+ +

Definiendo los Modelos de LocalLybrary

+ +

En esta sección comenzaremos a definir los modelos para nuestra biblioteca. Abre models.py (en /locallibrary/catalog/). El código de más arriba importa el módulo models que contiene la clase models.Model, que servirá de base para nuestros modelos:

+ +
from django.db import models
+
+# Create your models here.
+ +

Modelo 'Genre'

+ +

Copia el código del modelo Genre que se muestra abajo y pégalo al final de tu archivo models.py. Este modelo nos servirá para almacenar información relativa a la categoría del libro (por ejemplo, si es ficción o no, si es un romancero o es un libro de historia, etc.) Como se dijo más arriba, preferimos modelar el género (Genre) como una entidad, en vez de utilizar un campo de texto o una lista de opciones, porque de esta manera es posible manejar los valores a través de nuestra base de datos, en vez de fijarlo en el código (hard-coding)

+ +
class Genre(models.Model):
+    """
+    Modelo que representa un género literario (p. ej. ciencia ficción, poesía, etc.).
+    """
+    name = models.CharField(max_length=200, help_text="Ingrese el nombre del género (p. ej. Ciencia Ficción, Poesía Francesa etc.)")
+
+    def __str__(self):
+        """
+        Cadena que representa a la instancia particular del modelo (p. ej. en el sitio de Administración)
+        """
+        return self.name
+ +

El modelo tiene un único campo (name), de tipo CharField, que usaremos para describir el género literario. Este campo tiene un tamaño máximo (max_length) de 200 caracteres y, además, posee un help_text. Al final de la clase, hemos declarado el método __str__(), que simplemente devuelve el nombre de un género definido por un registro en particular. Como no hemos definido un nombre explicativo (verbose_name) para nuestro campo, éste se establecerá en Name y se mostrará de esa manera en los formularios.

+ +

Modelo 'Book'

+ +

Copia el código del modelo Book que aparece más abajo y pégalo al final de tu archivo. El modelo Libro representa la información que se tiene sobre un libro, en sentido general, pero no sobre un libro particular que se encuentre disponible en la biblioteca. Este modelo utiliza campos de tipo CharField para representar el título (title) y el isbn del libro (nota que el campo isbn especifica su etiqueta como "ISBN" utilizando el primer parámetro posicional, ya que la etiqueta por defecto hubiera sido "Isbn"). Además tenemos un campo para la sinopsis (summary), de tipo TextField, ya que este texto podría ser bastante largo.

+ +
from django.urls import reverse #Used to generate URLs by reversing the URL patterns
+
+class Book(models.Model):
+    """
+    Modelo que representa un libro (pero no un Ejemplar específico).
+    """
+
+    title = models.CharField(max_length=200)
+
+    author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True)
+    # ForeignKey, ya que un libro tiene un solo autor, pero el mismo autor puede haber escrito muchos libros.
+    # 'Author' es un string, en vez de un objeto, porque la clase Author aún no ha sido declarada.
+
+    summary = models.TextField(max_length=1000, help_text="Ingrese una breve descripción del libro")
+
+    isbn = models.CharField('ISBN',max_length=13, help_text='13 Caracteres <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>')
+
+    genre = models.ManyToManyField(Genre, help_text="Seleccione un genero para este libro")
+    # ManyToManyField, porque un género puede contener muchos libros y un libro puede cubrir varios géneros.
+    # La clase Genre ya ha sido definida, entonces podemos especificar el objeto arriba.
+
+    def __str__(self):
+        """
+        String que representa al objeto Book
+        """
+        return self.title
+
+
+    def get_absolute_url(self):
+        """
+        Devuelve el URL a una instancia particular de Book
+        """
+        return reverse('book-detail', args=[str(self.id)])
+
+ +

El género es un campo de tipo ManyToManyField, de manera tal que un mismo libro podrá abarcar varios géneros y un mismo género podrá abarcar muchos libros. El autor es declarado como ForeignKey, de modo que cada libro podrá tener un sólo autor, pero un autor podrá tener muchos libros (en la vida real, un mismo libro puede tener varios autores, pero en nuestra implementación no).

+ +

En la declaración de ambos campos, el modelo relacionado se ingresa como primer parámetro posicional, usando el nombre la clase que lo implementa o, bien, el nombre del modelo como string, si éste no ha sido implementado en el archivo, antes de la declaración del campo. Otros parámetros interesantes que podemos observar, en el campo author, son null=True, que permite a la base de datos almacenar null si el autor no ha sido seleccionado, y on_delete=models.SET_NULL, que pondrá en null el campo si el registro del autor relacionado es eliminado de la base de datos.

+ +

El modelo también define __str__(), usando el campo title para representar un registro de la clase Book. El último método, get_absoulte_url() devuelve un URL que puede ser usado para acceder al detalle de un registro particular (para que esto funcione, debemos definir un mapeo de URL que tenga el nombre book-detail y una vista y una plantilla asociadas a él)

+ +

Modelo 'BookInstance'

+ +

A continuación, copie el model BookInstance  (mostrado a continuación) debajo de los otros modelos. BookInstance representa una copia específica de un libro que alguien pueda pedir prestado, en incluye información sobre si la copia esta disponible o sobre cual es la fecha que se espera sea devuelto, "imprenta" o detalles de versión, y un id único para el libro en la biblioteca.

+ +

Algunos de los campos y métodos ahora serán familiares. El modelo usa

+ + + +
import uuid # Requerida para las instancias de libros únicos
+
+class BookInstance(models.Model):
+    """
+    Modelo que representa una copia específica de un libro (i.e. que puede ser prestado por la biblioteca).
+    """
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, help_text="ID único para este libro particular en toda la biblioteca")
+    book = models.ForeignKey('Book', on_delete=models.SET_NULL, null=True)
+    imprint = models.CharField(max_length=200)
+    due_back = models.DateField(null=True, blank=True)
+
+    LOAN_STATUS = (
+        ('m', 'Maintenance'),
+        ('o', 'On loan'),
+        ('a', 'Available'),
+        ('r', 'Reserved'),
+    )
+
+    status = models.CharField(max_length=1, choices=LOAN_STATUS, blank=True, default='m', help_text='Disponibilidad del libro')
+
+    class Meta:
+        ordering = ["due_back"]
+
+
+    def __str__(self):
+        """
+        String para representar el Objeto del Modelo
+        """
+        return '%s (%s)' % (self.id,self.book.title)
+ +

Adicionalmente hemos declarado algunos tipos nuevos de campos:

+ + + +

El patrón __str__() representa el objeto BookInstance usando una combinación de  su id único y el título del  Book asociado.

+ +
+

Note: Un poco de Python:

+ + +
+ +

Modelo 'Author'

+ +

Copia el modelo Author  (mostrado abajo) bajo el código existente en models.py.

+ +

Todos los campos/métodos ahora deben ser familiares. El modelo define a un autor que tiene un primer nombre, apellido, fecha de nacimiento, y (opcional) fecha de fallecimiento. Especifica que de forma predeterminada el  __str__() retorna el nombre   en  el orden apellido, primer nombre. El método get_absolute_url() invierte el mapeo URL author-detail para obtener el URL para mostrar un autor individual.

+ +
class Author(models.Model):
+    """
+    Modelo que representa un autor
+    """
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        """
+        Retorna la url para acceder a una instancia particular de un autor.
+        """
+        return reverse('author-detail', args=[str(self.id)])
+
+
+    def __str__(self):
+        """
+        String para representar el Objeto Modelo
+        """
+        return '%s, %s' % (self.last_name, self.first_name)
+
+ +

Reiniciar las migraciones a la base de datos

+ +

Todos tus modelos han sido creados. Para añadirlos a tu base de datos, vuelve a ejecutar las migraciones de tu base de datos.

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+ +

Modelo 'Language' - desafío

+ +

Imagina que un benefactor local dona un número de libros nuevos escritos en otro lenguaje (digamos, Farsi). El desafío es averiguar como estos pueden ser bien representados en tu sitio Web, y luego agregarlos a los modelos.

+ +

Algunas cosas a considerar:

+ + + +

Después que hayas decidido, agrega el campo. Puedes ver que decidimos nostros en Github aquí.

+ +

No olvides que después de un cambio en tu modelo, debes volver a hacer las migraciones para que se apliquen los cambios en tu base de datos.

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+ + + + + +

Resumen

+ +

En este artículo hemos aprendido como son definidos los modelos, y luego usar esta información para diseñar e implementar modelos apropiados para el sitio Web  LocalLibrary.

+ +

En este punto nos desviaremos brevemente de la creación del sitio, y miraremos el sitio de Administración de Django. Este sitio nos permitirá añadir algunos datos a la biblioteca, los cuales podemos mostrar usando nuestras (aún por crear) vistas y plantillas.

+ +

Vea también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}

+ +

En este modulo

+ + diff --git a/files/es/learn/server-side/django/sessions/index.html b/files/es/learn/server-side/django/sessions/index.html new file mode 100644 index 0000000000..f5b751c115 --- /dev/null +++ b/files/es/learn/server-side/django/sessions/index.html @@ -0,0 +1,200 @@ +--- +title: 'Tutorial de Django Parte 7: Framework de sesiones' +slug: Learn/Server-side/Django/Sessions +tags: + - Artículo + - Principiante + - Python + - Servidor + - Sesion + - Sesiones + - Tutorial + - aprende + - django + - lado-servidor +translation_of: Learn/Server-side/Django/Sessions +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication", "Learn/Server-side/Django")}}
+ +

Este tutorial extiende nuestro sitio web de la BibliotecaLocal, añadiendo un contador de visitas a tu página de inicio basado en sesiones. Es un ejemplo relativamente simple, pero muestra cómo puedes usar el framework de sesión para proporcionar persistencia a usuarios anónimos en tus propios sitios.

+ + + + + + + + + + + + +
Prerequisitos:Completar todos los tópicos anteriores del tutorial, incluyendo Django Tutorial Part 6: Generic list and detail views
Objetivo:Entender como emplear las sesiones.
+ +

Resumen

+ +

El sitio web de la BibliotecaLocal que creamos en los tutoriales previos permite a los usuarios explorar los libros y autores en el catálogo. Mientras que el contenido se genera dinámicamente desde la base de datos, todos los usuarios básicamente tendrán acceso a las mismas páginas y tipos de información cuando usan el sitio.

+ +

En una biblioteca "real" podrías querer dar a cada usuario individual una experiencia personalizada, basada en su uso previo del sitio, preferencias, etc. Por ejemplo, podrías ocultar los mensajes de advertencia que el usuario ya ha aceptado previamente la próxima vez que visite el sitio, o guardar y respetar sus preferencias (ej. el número de resultados de búsqueda que quiere desplegar en cada página).

+ +

El framework de sesiones te permite implementar este tipo de comportamiento, pudiendo guardar y recuperar información arbitraria en base a cada visitante particular del sitio.

+ +

¿Qué son las sesiones?

+ +

Toda comunicación entre los navegadores web y los servidores se da a través del protocolo HTTP, que es sin estado. El hecho de que el protocolo sea sin estado significa que los mensajes entre el cliente y el servidor son completamente independientes entre sí -- no existe una noción de "secuencia" o comportamiento basado en mensajes previos. Como resultado, si quieres tener un sitio que guarde registro de la relación que tiene lugar con un cliente, necesitas implementarlo tú mismo.

+ +

Las sesiones son el mecanismo que usa Django (y la mayor parte de Internet) para guardar registro del "estado" entre el sitio y un navegador en particular. Las sesiones te permiten almacenar información arbitraria por navegador, y tener esta información disponible para el sitio cuando el navegador se conecta. Cada pieza individual de información asociada con una sesión se conoce como "clave", que se usa tanto para guardar como para recuperar la información.

+ +

Django usa una cookie que contiene un id de sesión específica para identificar cada navegador y su sesión asociada con el sitio. La información real de la sesión se guarda por defecto en la base de datos del sitio (esto es más seguro que guardar la información en una cookie, donde es más vulnerable para los usuarios maliciosos). Puedes configurar Django para guardar la información de sesión en otros lugares (caché, archivos, cookies "seguras"), pero la opción por defecto es una buena opción y relativamente segura.

+ +

Habilitando las sesiones

+ +

Las sesiones fueron automáticamente habilitadas cuando creamos el sitio web esqueleto (en el tutorial 2).

+ +

La configuración está establecida en las secciones INSTALLED_APPS y MIDDLEWARE del archivo del proyecto (locallibrary/locallibrary/settings.py), como se muestra abajo:

+ +
INSTALLED_APPS = [
+    ...
+    'django.contrib.sessions',
+    ....
+
+MIDDLEWARE = [
+    ...
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    ....
+ +

Usando las sesiones

+ +

Puedes usar el atributo session en la vista desde el parámetro request (una HttpRequest que se envía como el primer argumento a la vista). Este atributo de sesión representa la conección específica con el usuario actual (o para ser más preciso, la conección con el navegador actual, como se identifica mediante la id de sesión en la cookie del navegador para este sitio).

+ +

El atributo session es un objeto tipo diccionario que puedes leer y escribir tantas veces como quieras en tu vista, modificándolo como desees. Puedes realizar todas las operaciones normales de diccionario, incluyendo eliminar toda la información, probar si una clave está presente, iterar a través de la información, etc. Sin embargo, la mayor parte del tiempo solo usarás la API estándar de "diccionario" para recuperar y establecer valores.

+ +

Los fragmentos de código de abajo te muestran cómo puedes recuperar, establecer o eliminar información con la clave "my_car", asociada con la sesión actual (del navegador).

+ +
+

Nota: Una de las cosas grandiosas de Django es que no necesitas pensar sobre los mecanismos que relacionan la sesión con tu solicitud actual en tu vista. Si fuéramos a usar los fragmentos de abajo en nuestra vista, sabríamos que la información sobre my_car está asociada solo con el navegador que envió la solicitud.

+
+ +
# Obtener un dato de la sesión por su clave (ej. 'my_car'), generando un KeyError si la clave no existe
+my_car = request.session['my_car']
+
+# Obtener un dato de la sesión, estableciendo un valor por defecto ('mini') si el dato requerido no existe
+my_car = request.session.get('my_car', 'mini')
+
+# Asignar un dato a la sesión
+request.session['my_car'] = 'mini'
+
+# Eliminar un dato de la sesión
+del request.session['my_car']
+
+ +

La API ofrece también una cantidad de métodos adicionales que se usan mayoritariamente para administrar la cookie de sesión asociada. Por ejemplo, hay métodos para probar si el navegador cliente soporta cookies, establecer y revisar las fechas de expiración de las cookies, y para eliminar sesiones expiradas del almacén de datos. Puedes encontrar información sobre la API completa en Cómo usar sesiones (Django docs).

+ +

Guardando la información de la sesión

+ +

Por defecto, Django solo guarda información en la base de datos de sesión y envía la cookie de sesión al cliente cuando la sesión ha sido modificada (asignada) o eliminada. Si estás actualizando algún dato usando su clave de sesión como se mostró en la sección previa, ¡no necesitas preocuparte por esto! Por ejemplo:

+ +
# Esto es detectado como un cambio en la sesión, así que la información de la sesión es guardada.
+request.session['my_car'] = 'mini'
+ +

Si estás actualizando algún dato dentro de la información de sesión, Django no reconocerá que has hecho un cambio en la sesión y guardado la información (por ejemplo, si fueras a cambiar el dato "wheels" dentro de tu dato "my_car", como se muestra abajo). En este caso, necesitarás marcar explícitamente la sesión como que ha sido modificada.

+ +
# Objeto de sesión no directamente modificada, solo información dentro de la sesión.
+# ¡Cambios no guardados!
+request.session['my_car']['wheels'] = 'alloy'
+
+# Establecer la sesión como modificada para forzar a que se guarden los cambios.
+request.session.modified = True
+
+ +
+

Nota: Puedes cambiar el comportamiento para que el sitio actualice la base de datos y envíe la cookie en cada solicitud añádiendo SESSION_SAVE_EVERY_REQUEST = True a la configuración de tu proyecto (locallibrary/locallibrary/settings.py).

+
+ +

Ejemplo simple -- obteniendo conteos de visitas

+ +

Como un ejemplo simple del mundo real, actualizaremos nuestra biblioteca para decirle al usuario actual cuántas veces ha visitado la página principal de BibliotecaLocal.

+ +

Abre /locallibrary/catalog/views.py, y aplica los cambios que se muestran con negrita abajo.

+ +
def index(request):
+    ...
+
+    num_authors=Author.objects.count()  # El 'all()' se obvia en este caso.
+
+    # Numero de visitas a esta view, como está contado en la variable de sesión.
+    num_visits = request.session.get('num_visits', 0)
+    request.session['num_visits'] = num_visits + 1
+
+    context = {
+        'num_books':num_books,
+        'num_instances':num_instances,
+        'num_instances_available':num_instances_available,
+        'num_authors':num_authors,
+        'num_visits':num_visits,
+    } 
+
+    # Carga la plantilla index.html con la información adicional en la variable context.
+    return render(request, 'index.html', context=context)
+ +

Aquí primero obtenemos el valor de la clave de sesión 'num_visits', estableciendo el valor a 0 si no había sido establecido previamente. Cada vez que se recibe la solicitud, incrementamos el valor y lo guardamos de vuelta en la sesión (para la siguiente vez que el usuario visita la página). La variable num_visits se envía entonces a la plantilla en nuestra variable de contexto.

+ +
+

Nota: Aquí podríamos incluso revisar si el navegador soporta cookies (mira Cómo usar sesiones para ejemplos) o diseñar nuestra UI de modo que no importe si el navegador soporta cookies o no.

+
+ +

Añade la línea que se ve al final del siguiente bloque a tu plantilla HTML principal (/locallibrary/catalog/templates/index.html) al final de la sección "Dynamic content" para desplegar la variable de contexto:

+ +
<h2>Dynamic content</h2>
+
+<p>The library has the following record counts:</p>
+<ul>
+  <li><strong>Books:</strong> \{{ num_books }}</li>
+  <li><strong>Copies:</strong> \{{ num_instances }}</li>
+  <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+  <li><strong>Authors:</strong> \{{ num_authors }}</li>
+</ul>
+
+<p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p>
+
+ +

Guarda tus cambios y reinicia el servidor de pruebas. Cada vez que refresques la página, el número se debería actualizar.

+ + + +

Resumen

+ +

Ahora sabes lo fácil que es usar sesiones para mejorar tu interacción con usuarios anónimos.

+ +

En nuestros siguientes artículos explicaremos el framework de autenticación y autorización (permisos), y te mostraremos cómo soportar cuentas de usuario.

+ +

Mira también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/skeleton_website/index.html b/files/es/learn/server-side/django/skeleton_website/index.html new file mode 100644 index 0000000000..96c8b0d3b0 --- /dev/null +++ b/files/es/learn/server-side/django/skeleton_website/index.html @@ -0,0 +1,397 @@ +--- +title: 'Tutorial Django Parte 2: Creación del esqueleto del sitio web' +slug: Learn/Server-side/Django/skeleton_website +tags: + - Aprendizaje + - Artículo + - Codificación de scripts + - Guía + - Principiante + - Tutorial + - django + - introducción + - lado servidor +translation_of: Learn/Server-side/Django/skeleton_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
+ +

Este segundo artículo de nuestro Tutorial Django muestra cómo puedes crear un proyecto de "esqueleto" de sitio web como base, que puedes continuar luego llenado de configuraciones específicas del sitio, urls, modelos, vistas y plantillas.

+ + + + + + + + + + + + +
Pre-requisitos:Poner en marcha un entorno de desarrollo Django. Repasar el Tutorial Django.
Objetivo: +

Ser capaz de usar las herramientas de Django para empezar tus propios proyectos de sitios web nuevos.

+
+ +

Visión general

+ +

Este artículo muestra como puedes crear un sitio web "esqueleto", que puedes luego llenar con configuraciones específicas del sitio, urls, modelos, vistas y plantillas (trataremos ésto en artículos posteriores).

+ +

El proceso es sencillo:

+ +
    +
  1. Usar la herramienta django-admin para crear la carpeta del proyecto, los ficheros de plantillas básicos y el script de gestión del proyecto  (manage.py).
    2. +
  2. Usar manage.py para crear una o más aplicaciones. +
    +

    Nota: Un sitio web puede consistir de una o más secciones, ej. sitio principal, blog, wiki, area de descargas, etc. Django te recomienda encarecidamente que desarrolles estos componentes como aplicaciones separadas que podrían ser reutilizadas, si se desea, en otros proyectos. 

    +
    +
    3. +
  3. Registrar las nuevas aplicaciones para incluirlas en el proyecto.
    4. +
  4. Conectar el mapeador url de cada aplicación.
    5. +
+ +

Para el sitio web de la BibliotecaLocal la carpeta del sitio y la carpeta de su proyecto se llamarán locallibrary, y tendremos sólo una aplicación llamada catalog. El nivel más alto de la estructura de carpetas quedará por tanto como sigue:

+ +
locallibrary/         # Carpeta del sitio web
+    manage.py         # Script para ejecutar las herramientas de Django para este proyecto (creadas usando django-admin)
+    locallibrary/     # Carpeta del Sitio web/Proyecto (creada usando django-admin)
+    catalog/          # Carpeta de la Aplicación (creada usando manage.py)
+
+ +

Las siguientes secciones abordan los pasos del proceso en detalle, y muestran cómo puedes comprobar los cambios. Al final de cada artículo trataremos alguna de los otros ajustes aplicables al sitio entero que deberías también efectuar en esta etapa.

+ +

Creación del proyecto

+ +

En primer lugar abre una ventana de comandos/terminal, navega hasta donde quieres almacenar tus apps Django (hazlo en algún lugar que sea fácil de encontrar, como dentro de la carpeta de tus documentos), y crea una carpeta para tu nuevo sitio web (en este caso : locallibrary). Entra en el directorio a continuación usando el comando cd:

+ +
mkdir locallibrary
+cd locallibrary
+ +

Crear el nuevo proyecto usando el comando django-admin startproject como se muestra, y navega luego dentro de la carpeta.

+ +
django-admin startproject locallibrary .
+cd locallibrary
+ +

La herramienta django-admin crea una estructura de carpetas/ficheros como se muestra abajo:

+ +
locallibrary/
+    manage.py
+    locallibrary/
+        settings.py
+        urls.py
+        wsgi.py
+ +

La subcarpeta del proyecto locallibrary es el punto de entrada al sitio web: 

+ + + +

El script manage.py se usa para crear aplicaciones, trabajar con bases de datos y empezar el desarrollo del servidor web.

+ +

Creación de la aplicación catalog

+ +

A continuación, ejecuta el siguiente comando para crear la aplicación catalog que vivirá dentro de nuestro proyecto locallibrary (éste debe ejecutarse en la misma carpeta que el manage.py de tu proyecto):

+ +
python3 manage.py startapp catalog
+ +
+

Nota: el comando de arriba es para Linux/Mac OS X. En Windows el comando debería ser: py -3 manage.py startapp catalog

+ +

Si estás trabajando en Windows, reemplaza python3 por py -3 a lo largo de este módulo o simplemente python: python manage.py startapp catalog.

+
+ +

La herramienta crea una nueva carpeta y la rellena con ficheros para las diferentes partes de la aplicación (mostradas en negrilla abajo). La mayoría de los ficheros se nombran de acuerdo a su propósito, para que sea má útil (ej. las vistas se deberán guardar en views.py, los Modelos en models.py, las pruebas en tests.py, la configuración del sitio de administración en admin.py, el registro de aplicaciones en apps.py) y contienen algo de código base mínimo para trabajar con los objetos asociados.

+ +

El directorio actualizado del proyecto debería tener ahora el aspecto siguiente:

+ +
locallibrary/
+    manage.py
+    locallibrary/
+    catalog/
+        admin.py
+        apps.py
+        models.py
+        tests.py
+        views.py
+        __init__.py
+        migrations/
+
+ +

Además ahora tenemos:

+ + + +
+

Nota: ¿Te has dado cuenta qué es lo que falta en la lista de ficheros de arriba? Si bien hay un lugar para que coloques tus vistas y modelos, no hay nada para que pongas los mapeos url, las plantillas  y los ficheros estáticos. Te mostraremos cómo crearlos más adelante (éstos no se necesitan en todos los sitios web pero se necesitan en este ejemplo).

+
+ +

Registro de la aplicación catalog

+ +

Ahora que se ha creado la aplicación tenemos que registrarla en el proyecto de manera que sea incluida cuando cualquiera de las herramientas se ejecute (por ejemplo, para añadir modelos a la base de datos). Las aplicaciones se registran añadiéndolas a la lista de INSTALLED_APPS en los ajustes del proyecto.

+ +

Abre el fichero de ajustes del proyecto locallibrary/locallibrary/settings.py y encuentra la definición de la lista INSTALLED_APPS. Añade a continuación una nueva linea al final de la lista, como se muestra en negrilla abajo.

+ +
INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'catalog.apps.CatalogConfig', 
+]
+ +

La nueva linea especifica el objeto de configuración de la aplicación (CatalogConfig) que se generó para tí en /locallibrary/catalog/apps.py cuando creaste la aplicación.

+ +
+

Nota: Te habrás fijado que hay ya un montón de otras INSTALLED_APPS (y MIDDLEWARE, más abajo en el fichero de ajustes). Éstas habilitan en soporte para el Sitio de admistración Django y como consecuencia el motón de la funcionalidad que usa (incluyendo sesiones, autenticación, etc).

+
+ +

Especificación de la base de datos

+ +

Éste es también el punto donde normalmente especificarías la base de datos a utilizar en el proyecto — tiene sentido usar la misma base datos para desarrollo y producción donde sea posible, para evitar diferencias menores en el comportamiento. Puedes encontrar información sobre las diferentes opciones de bases de datos en Databases (Django docs). 

+ +

Nosotros usaremos la base de datos SQLite para este ejemplo, porque no esperamos que se requiera un montón de accesos concurrentes en una base de datos de demostración, y también ¡porque no requiere trabajo adicional para ponerla en marcha! Puedes ver cómo está configurada en settings.py (más información también se incluye abajo):

+ +
DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+
+ +

Debido a que usamos SQLite, no necesitamos hacer ningún ajuste adicional aquí. ¡Sigamos!

+ +

Otros ajustes del proyecto

+ +

El fichero settings.py se usa para configurar muchos otros ajustes, pero en este punto probablemente sólo querrás cambiar la TIME_ZONE — ésta debería ser igual a una cadena de la Lista de base de datos tz de time zones (la columna TZ column de la tabla contiene los valores que quieres). Cambia tu TIME_ZONE al valor de entre estas cadenas que sea apropiado para tu zona de tiempo, por ejemplo:

+ +
TIME_ZONE = 'Europe/Madrid'
+ +

Hay otros dos otros ajustes que no cambiarás ahora, pero de los que deberías ser consciente:

+ + + +

Conectar el mapeador URL

+ +

El sitio web se crea con un fichero mapeador de URLs (urls.py) en la carpeta del proyecto. Aunque puedes usar este fichero para gestionar todos tus mapeos URL, es más usual deferir los mapeos a su aplicación asociada.

+ +

Abre locallibrary/locallibrary/urls.py y fíjate en el texto educativo que explica algunas formas de usar el mapeador URL. 

+ +
"""locallibrary URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/2.0/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  path('', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.urls import include, path
+    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
+"""
+from django.contrib import admin
+from django.urls import path
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+]
+
+ +

Los mapeos URL se gestionan a través de la variable urlpatterns, que es una lista Python de funciones path(). Cada función path() o asocia un patrón URL a una vista específica, que se presentará cuando el patrón se empareja o con otra lista de código de comprobación de patrones URL (en este segundo caso, los patrones se convierten en la "URL base" de patrones definidos en el módulo destino). La lista urlpatterns define inicialmente una función que mapea todos los URLs con el patrón admin/ al módulo admin.site.urls , que contiene las definiciones de mapeos URL propios de la aplicación de Administración.

+ +
+

Nota: La ruta en path() es una cadena que define un patrón URL para emparejar. Esta cadena podría incluir una variable nombrada (entre paréntesis angulares), ej. 'catalog/<id>/'. Este patrón emparejará con una URL como /catalog/any_chars/ y pasará a la vista any_chars como cadena asociada al parámetro de nombre id). Trataremos de los métodos de caminos y rutas de patrones más adelante en los últimos temas.

+
+ +

Añade las lineas de abajo al final del fichero para añadir un nuevo elemento a la lista urlpatterns. Este nuevo elemento incluye un path() que redirige las peticiones con el patrón catalog/ al módulocatalog.urls (el fichero con el URL relativo /catalog/urls.py).

+ +
# Use include() to add paths from the catalog application
+from django.urls import include
+
+urlpatterns += [
+    path('catalog/', include('catalog.urls')),
+]
+
+ +

Ahora redirijamos la URL raíz de nuestro sitio (ej. 127.0.0.1:8000) al URL 127.0.0.1:8000/catalog/; esta es la única app que usaremos en este proyecto, así que es lo que deberíamos hacer. Para hacer esto, usaremos una función especial (RedirectView), que toma como su primer argumento la nueva URL relativa a redirigir a (/catalog/) cuando el patrón URL especificado en la función path() se empareja (la URL raíz, en este caso).

+ +

Añade las siguientes líneas, otra vez al final del fichero:

+ +
#Add URL maps to redirect the base URL to our application
+from django.views.generic import RedirectView
+urlpatterns += [
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+]
+ + + +

Deja el primer parámetro de la función path vacío, para implicar '/'. Si escribes el primer parámetro como '/' Django te dará la siguiente advertencia cuando arranque el servidor de desarrollo:

+ +

La comprobación del sistema encontró algunos problemas:

+ +
WARNINGS:
+?: (urls.W002) Tu patrón URL '/' tiene una ruta que empieza con una '/'.
+Quita esta barra invertida ya que es inncesaria.
+Si este patrón figura como destino en un include(), asegúrate que el patrón include() tiene un '/' final.
+ + + +

Django no sirve ficheros estáticos como CSS, JavaScript e imágenes por defecto, pero puede ser útil para el servidor web de desarrollo hacerlo así mientras creas tu sitio. Como adición final a este mapeador URL, puedes habilitar el servicio de ficheros estáticos durante el desarrollo añadiendo las líneas siguientes.

+ +

Añade ahora el siguiente bloque final al final del fichero:

+ +
# Use static() to add url mapping to serve static files during development (only)
+from django.conf import settings
+from django.conf.urls.static import static
+
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+
+ +
+

Nota: Hay numerosas formas de extender la lista urlpatterns (arriba hemos añadido simplemente un nuevo elemento a la lista usando el operador += para separar claramente el código antiguo y el nuevo). En vez de ello podríamos haber simplemente incluido este nuevo patrón de mapeo en la definición de la lista original:

+ +
urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('catalog/', include('catalog.urls')),
+    path('/', RedirectView.as_view(url='/catalog/', permanent=True)),
+] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+
+ +

Además, hemos incluido la linea import (from django.urls import include) con el código que la usa (de manera que sea fácil ver qué hemos añadido), pero es común incluir todas tus líneas import al principio del fichero Python.

+
+ +

Como paso final, crea un fichero dentro de tu carpeta catalog llamado urls.py, y añade el siguiente texto para definir la urlpatterns importada (vacía). Éste es donde añadimos nuestros patrones a medida que construimos la aplicación. 

+ +
from django.conf.urls import url
+
+from . import views
+
+
+urlpatterns = [
+
+]
+
+ +

Prueba del framework del sitio web

+ +

En este punto tenemos un proyecto de esqueleto completo. El sitio web no hace realmente nada todavía, pero merece la pena ejecutarlo para estar seguros de que ninguno de nuestros cambios no han roto nada.

+ +

Antes de hacerlo, deberíamos primero ejecutar una migración de la base de datos. Ésto actualiza nuestra base de datos para incluir todos los modelos de nuestras aplicaciones instaladas (y eliminar algunas advertencias de construcción).

+ +

Ejecución de migraciones de la base de datos

+ +

Django usa un Object-Relational-Mapper (ORM) para mapear las definiciones de Modelos en el código Django con la estructura de datos utilizada por la base de datos subyacente. A medida que cambiamos nuestras definiciones de modelos, Django sigue la pista a los cambios y puede crear scripts de migración de la base de datos (en /locallibrary/catalog/migrations/) para migrar automáticamente la estructura de datos subyacente en el base de datos para igualarse al modelo.

+ +

Cuando creamos el sitio web de Django añadimos automáticamente unos cuantos modelos para que ser usados por la sección de administración del sitio (al que echaremos un vistazo más tarde). Ejecuta los siguientes comandos para definir tablas para esos modelos de la base (asegúrate que estás en el directorio que contiene manage.py):

+ +
python3 manage.py makemigrations
+python3 manage.py migrate
+
+ +
+

Importante: Necesitarás ejecutar los comandos de arriba cada vez que cambien tus modelos de una manera que afecte a la estructura de datos y necesite ser guardada (incluyendo tanto la adicción como la eliminación de modelos enteros o campos individuales).

+
+ +

El comando makemigrations crea (pero no aplica) las migraciones para todas las aplicaciones instaladas en tu proyecto (también puedes especificar el nombre de una aplicación para ejecutar una migración para un sólo proyecto). Ésto te da la opoortunidad de comprobar el código para estas migraciones antes de que se apliquen — cuando seas un experto en Django ¡podrás elegir modificarlos ligeramente!

+ +

El comando migrate aplica realmente las migraciones a tu base de datos (Django lleva la cuenta de cuáles han sido añadidas a la base de datos actual).

+ +
+

Nota: Mira en Migrations (Django docs) para obtener información adicional sobre los comandos de migración menos usados.

+
+ +

Arrancando el sitio web

+ +

Durante el desarrollo puedes probar el sitio web usando para servirlo el servidor de desarrollo web, y visualizádolo en tu explorador web local. 

+ +
+

Nota: el servidor web de desarrollo no es robusto y sin suficientes prestaciones para su uso en producción, pero es una manera muy fácil de tener levantado y funcionando tu sitio web Django durante el desarrollo para hacerle una prueba rápida y conveniente. Por defecto servirá el sitio a tu computadora local (http://127.0.0.1:8000/), pero puedes también especificar que se sirva a otras computdoras en tu red. Para más información ver django-admin y manage.py: runserver (Django docs).

+
+ +

Ejecuta el servidor web de desarrollo llamando al comando runserver (en el mismo directorio donde está manage.py):

+ +
python3 manage.py runserver
+
+ Performing system checks...
+
+ System check identified no issues (0 silenced).
+ September 22, 2016 - 16:11:26
+ Django version 1.10, using settings 'locallibrary.settings'
+ Starting development server at http://127.0.0.1:8000/
+ Quit the server with CTRL-BREAK.
+
+ +

Una vez que el servidor está funcionando puedes ver el sitio navegando a http://127.0.0.1:8000/ en tu explorador local. Deberías ver una página de error del sitio que tiene el siguiente aspecto:

+ +

Django Debug page for Django 2.0

+ +

¡No te preocupes! Esta página de error es lo esperado porque no tenemos ninguna página/url definidas en el módulo catalogs.urls (que es al que nos redirigimos cuando obtenemos la URL a la raíz del sitio). 

+ +
+

Nota: La página superior demuestra una gran característica de Django— El registro de depuración automático. Cada vez que una página no pueda ser encontrada, o el código provoque un error cualquiera, se mostrará una pantalla de error con información útil. En este caso vemos que la URL que hemos suministrado no empareja con ninguno de nuestros patrones de URL (como los listados). El resgistro de depuración puede desconectarse durante la producción (cuando colocamos el sitio en vivo en la Web), en cuyo caso se servirá una página menos informativa pero más amigable.

+
+ +

¡En este punto ya sabemos que Django está funcionando!

+ +
+

Nota: Deberías volver a ejecutar las migraciones y volver a probar el sitio cada vez que hagas cambios significativos. ¡No lleva tanto tiempo!

+
+ +

Desafíate a tí mismo

+ +

El directorio catalog/ contiene ficheros para las vistas, modelos y otras partes de la aplicación. Abre estos ficheros e inspecciona el código base. 

+ +

Como has visto arriba, se ha añadido ya un mapeo de URLs para el sitio de administración en el fichero del proyecto urls.py. Navega al área de adminsitración en tu explorador y mira qué sucede (puedes inferir el URL correcto de los mapeos de arriba).

+ + + +

Sumario

+ +

ahora ya has creado un proyecto de esqueleto completo de sitio web, con el que puedes continuar rellenando con urls, modelos, vistas y plantillas.

+ +

Ahora que el esqueleto del sitio web de la BibliotecaLocal está completo y funcionando, es hora de empezar a escribir el código que hace que este sitio haga lo que se supone que debe hacer. 

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/testing/index.html b/files/es/learn/server-side/django/testing/index.html new file mode 100644 index 0000000000..54055b2780 --- /dev/null +++ b/files/es/learn/server-side/django/testing/index.html @@ -0,0 +1,906 @@ +--- +title: 'Tutorial de Django Parte 10: Probando una aplicación web Django' +slug: Learn/Server-side/Django/Testing +translation_of: Learn/Server-side/Django/Testing +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}
+ +

A medida que crecen los sitios web se vuelven más difíciles de probar a mano — no sólo hay más para probar, sino que además, a medida que las interacciones entre los componentes se vuelven más complejas, un pequeño cambio en un área puede suponer muchas pruebas adicionales para verificar su impacto en otras áreas. Una forma de mitigar estos problemas es escribir tests automatizados, que pueden ser ejecutados de manera fácil y fiable cada vez que hagas un cambio. Este tutorial muestra cómo automatizar la unidad de pruebas de tu sitio web usando el framework de pruebas de Django.

+ + + + + + + + + + + + +
Prerequisites:Completa todos los tópicos anteriores, incluyendo Tutorial Django Parte 9: Trabajando con formularios.
Objective:Entender como escribir pruebas unidatarias para django basado en Páginas web.
+ +

Vista previa

+ +

El Local Library actualmente tiene páginas para mostrar las listas con todos los libros y autores, vistas detalladas para los items de Book y Author,una página para renovar BookInstances y páginas para crear, actualizar y eliminar elementos de autor (y también registros de libros, si  usted completó el desafío en el tutorial de formularios). Incluso con este sitio relativamente pequeño, navegar manualmente a cada página y verificar superficialmente que todo funcione como se espera, puede llevar varios minutos. A medida que hagamos cambios y el sitio vaya creciendo, el tiempo requerido para verificar manualmente que todo funcione "correctamente", aumentará de forma muy perniciosa. Si continuamos como estamos, pasaríamos la mayor parte de nuestro tiempo probando, y muy poco tiempo mejorando nuestro código.

+ +

¡Las pruebas automatizadas realmente pueden ayudar con este problema! Los beneficios obvios son que pueden  ejecutarse mucho más rápido que las pruebas manuales, pueden probar con un nivel de detalle mucho más bajo y probar exactamente la misma funcionalidad cada vez (¡los testers humanos no son tan confiables!) Porque son pruebas rápidas y automatizadas se puede ejecutar más regularmente, y si falla una prueba,
+ señalan exactamente dónde el código no está funcionando como se esperaba.

+ +

Además, las pruebas automatizadas pueden actuar como el primer "usuario" del mundo real de su código, lo que le obliga a ser riguroso a la hora de definir y documentar bien, cómo debe comportarse su sitio web. A menudo son la base de sus ejemplos de código y documentación. Por estas razones, algunos procesos de desarrollo de software comienzan con la definición e implementación de la prueba, después de lo cual el código se escribe para que coincida con el comportamiento requerido (por ejemplo, desarrollo basado en pruebas y en comportamiento).
+
+ Este tutorial muestra cómo escribir pruebas automatizadas para Django, agregando una serie de pruebas al sitio web LocalLibrary.

+ +

Tipos de pruebas

+ +

Hay numeroso tipos, niveles y clasificaciones de pruebas y enfoques de pruebas. Las pruebas automáticas más importantes son:

+ +
+
Pruebas unitarias
+
Verifica el comportamiento funcional de un componente individual, a menudo de una clase y su nivel de funcional.
+
Pruebas de regresión
+
Pruebas que reproducen errores históricos. Cada prueba es inicialmente ejecutada para verificar que el error ha sido corregido, y estos son ejecutados de nuevo para asegurarnos que los errores no fueron reintroducidos con los futuros cambios en el código.
+
Pruebas de integración
+
Verifica cómo funcionan los grupos de componentes cuando se usan juntos. Las pruebas de integración son conscientes de las interacciones requeridas entre componentes, pero no necesariamente de las operaciones internas de cada componente. Pueden cubrir agrupaciones simples de componentes hasta todo el sitio web.
+
+ +
+

Nota: Otros tipos comunes de pruebas incluyen pruebas de caja negra, caja blanca, manuales, automatizadas, canarias, de humo, de conformidad, de aceptación, funcionales, de rendimiento, de carga y de esfuerzo. Búscalos para más información.

+
+ +

Que provee Django para pruebas?

+ +

Probar un sitio web es una tarea compleja, porque está compuesto por varias capas de lógica, desde el manejo de solicitudes a nivel HTTP, modelos de consultas, hasta la validación y procesamiento de formularios y la representación de plantillas.

+ +

Django proporciona un marco de prueba con una pequeña jerarquía de clases que se basan en la libreria unittest estándar Python. A pesar del nombre, este marco de prueba es adecuado tanto para pruebas unitarias como de integración. El marco de Django agrega métodos y herramientas API para ayudar a probar el comportamiento web y específico de Django. Estos le permiten simular solicitudes, insertar datos de prueba e inspeccionar la salida de su aplicación. Django también proporciona una API(LiveServerTestCase) y herramientas para  usar diferentes frameworks de pruebas , por ejemplo, puede integrarse con el popular framework Selenium para simular la interacción de un usuario con un navegador en vivo.

+ +

Para escribir una prueba, se deriva de cualquiera de las clases base de prueba de Django (o unittest)(SimpleTestCase, TransactionTestCase, TestCase, LiveServerTestCase) y luego escribir métodos separados para verificar que la funcionalidad específica funcione como se esperaba (las pruebas usan métodos "assert"  para probar que las expresiones dan valores True o False, o que dos valores son iguales, etc.) Cuando inicia una ejecución de prueba, el marco ejecuta los métodos de prueba elegidos en sus clases derivadas. Los métodos de prueba se ejecutan de forma independiente, con un comportamiento común de configuración y / o desmontaje definido en la clase, como se muestra a continuación.

+ +
class YourTestClass(TestCase):
+
+    def setUp(self):
+        #Setup run before every test method.
+        pass
+
+    def tearDown(self):
+        #Clean up run after every test method.
+        pass
+
+    def test_something_that_will_pass(self):
+        self.assertFalse(False)
+
+    def test_something_that_will_fail(self):
+        self.assertTrue(False)
+
+ +

La mejor clase base para la mayoría de las pruebas es django.test.TestCase.  Esta clase de prueba crea una base de datos limpia antes de que se ejecuten sus pruebas y ejecuta cada función de prueba en su propia transacción. La clase también posee una prueba Client que puede utilizar para simular la interacción de un usuario con el código en el nivel de vista. En las siguientes secciones, nos concentraremos en las pruebas unitarias, creadas con esta clase TestCase

+ +
+

Nota: La clase django.test.TestCase es muy conveniente, pero puede resultar en que algunas pruebas sean más lentas de lo necesario (no todas las pruebas necesitarán configurar su propia base de datos o simular la interacción de la vista). Una vez que esté familiarizado con lo que puede hacer con esta clase, es posible que desee reemplazar algunas de sus pruebas con las clases de prueba más simples disponibles.

+
+ +

Que deberias probar?

+ +

Debe probar todos los aspectos de su propio código, pero no ninguna biblioteca o funcionalidad proporcionada como parte de Python o Django.

+ +

Por ejemplo, considere el modelo Author definido abajo. No es necesario probarlo explícitamente first_name y last_name han sido almacenados correctamente como CharField en la base de datos porque eso es algo definido por Django (aunque, por supuesto, en la práctica, inevitablemente probará esta funcionalidad durante el desarrollo). Tampoco es necesario probar que el date_of_birth ha sido validado para ser un campo de fecha, porque nuevamente es algo implementado en Django.

+ +

Sin embargo, debe verificar el texto utilizado para las etiquetas (nombre, apellido, fecha de nacimiento, fallecimiento) y el tamaño del campo asignado para el texto (100 caracteres), porque estos son parte de su diseño y algo que podría ser roto / cambiado en el futuro.

+ +
class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return '%s, %s' % (self.last_name, self.first_name)
+ +

Del mismo modo, debe verificar que los métodos personalizados get_absolute_url() y  __str__()comportarse como sea necesario porque son su código / lógica empresarial. En el caso de get_absolute_url() puedes confiar en que el metodo de Django reverse() se ha implementado correctamente, por lo que lo que está probando es que la vista asociada se haya definido realmente.

+ +
+

Nota: Los lectores astutos pueden notar que también querríamos restringir la fecha de nacimiento y muerte a valores sensibles, y comprobar que la muerte viene después del nacimiento. En Django, esta restricción se agregaría a sus clases de formulario (aunque puede definir validadores para los campos, estos parecen usarse solo en el nivel del formulario, no en el nivel del modelo).

+
+ +

Con eso en mente, comencemos a ver cómo definir y ejecutar pruebas.

+ +

Descripción general de la estructura de prueba

+ +

Antes de entrar en los detalles de "qué probar", primero veamos brevemente dónde y cómo se definen las pruebas..

+ +

Django utiliza el descubrimiento de pruebas integrado del módulo unittest (built-in test discovery), que descubrirá pruebas en el directorio de trabajo actual en cualquier archivo nombrado con el patrón test*.py. Siempre que asigne un nombre a los archivos de forma adecuada, puede utilizar la estructura que desee. Le recomendamos que cree un módulo para su código de prueba y que tenga archivos separados para modelos, vistas, formularios y cualquier otro tipo de código que necesite probar. Por ejemplo:

+ +
catalog/
+  /tests/
+    __init__.py
+    test_models.py
+    test_forms.py
+    test_views.py
+
+ +

Cree una estructura de archivo como se muestra arriba en su proyecto  LocalLibrary. El  __init__.py debe ser un archivo vacío (esto le dice a Python que el directorio es un paquete). Puede crear los tres archivos de prueba copiando y cambiando el nombre del archivo de prueba de esqueleto /catalog/tests.py.

+ +
+

Note:El archivo de prueba /catalog/tests.pyse creó automáticamente cuando creamos el sitio web esqueleto de Django ( built the Django skeleton website).

+ +

Es perfectamente "legal" poner todas sus pruebas dentro de él, pero si prueba correctamente, rápidamente terminará con un archivo de prueba muy grande e inmanejable.

+ +

Elimina el archivo esqueleto ya que no lo necesitaremos.

+
+ +

Abre el archivo /catalog/tests/test_models.py. El archivo debe importar django.test.TestCase, como se muestra:

+ +
from django.test import TestCase
+
+# Create your tests here.
+
+ +

A menudo, agregará una clase de prueba para cada modelo / vista / formulario que desee probar, con métodos individuales para probar una funcionalidad específica. En otros casos, es posible que desee tener una clase separada para probar un caso de uso específico, con funciones de prueba individuales que prueben aspectos de ese caso de uso (por ejemplo, una clase para probar que un campo de modelo está validado correctamente, con funciones para probar cada uno de los posibles casos de falla). Una vez más, la estructura depende en gran medida de usted, pero es mejor si es coherente.

+ +

Agregue la clase de prueba a continuación al final del archivo. La clase demuestra cómo construir una clase de caso de prueba derivando de TestCase.

+ +
class YourTestClass(TestCase):
+
+    @classmethod
+    def setUpTestData(cls):
+        print("setUpTestData: Run once to set up non-modified data for all class methods.")
+        pass
+
+    def setUp(self):
+        print("setUp: Run once for every test method to setup clean data.")
+        pass
+
+    def test_false_is_false(self):
+        print("Method: test_false_is_false.")
+        self.assertFalse(False)
+
+    def test_false_is_true(self):
+        print("Method: test_false_is_true.")
+        self.assertTrue(False)
+
+    def test_one_plus_one_equals_two(self):
+        print("Method: test_one_plus_one_equals_two.")
+        self.assertEqual(1 + 1, 2)
+ +

La nueva clase define dos métodos que puede utilizar para la configuración previa a la prueba (por ejemplo, para crear modelos u otros objetos que necesitará para la prueba):

+ + + +
+

Las clases de prueba también tienen un metodo tearDown() que no hemos utilizado. Este método no es particularmente útil para las pruebas de bases de datos, ya que TestCase la clase base se encarga del desmontaje de la base de datos por usted.

+
+ +

Debajo de ellos tenemos una serie de métodos de prueba, que utilizamos funciones Assert toprobar si las condiciones son verdaderas, falsas o iguales (AssertTrue, AssertFalse, AssertEqual). Si la condición no se evalúa como se esperaba, la prueba fallará y reportará el error a su consola.

+ +

Los AssertTrue, AssertFalse, AssertEqual son afirmaciones estándar proporcionadas por unittest.  Hay otras aserciones estándar en el marco y también aserciones específicas de Django (Django-specific assertions) para probar si una vista redirecciona (assertRedirects),para probar si se ha utilizado una plantilla en particular (assertTemplateUsed), etc.

+ +
+

Normalmente no debería incluir funciones print () en sus pruebas como se muestra arriba. Lo hacemos aquí solo para que pueda ver el orden en que se llaman las funciones de configuración en la consola (en la siguiente sección).

+
+ +

Como correr las pruebas

+ +

La forma más sencilla de ejecutar todas las pruebas es utilizar el comando:

+ +
python3 manage.py test
+ +

Esto descubrirá todos los archivos nombrados con el patrón test*.py bajo el directorio actual y ejecute todas las pruebas definidas usando las clases base apropiadas (aquí tenemos una serie de archivos de prueba, pero solo /catalog/tests/test_models.py contiene actualmente cualquier prueba). De forma predeterminada, las pruebas informarán individualmente solo sobre las fallas de las pruebas, seguidas de un resumen de la prueba.

+ +
+

Si recibe errores similares a: ValueError: Missing staticfiles manifest entry ... esto puede deberse a que las pruebas no ejecutan collectstatic de forma predeterminada y su aplicación usa una clase de almacenamiento que lo requiere (consulte manifest_strict para obtener más información). Hay varias formas de superar este problema; la más fácil es simplemente ejecutar collectstatic antes de ejecutar las pruebas:

+ +
python3 manage.py collectstatic
+
+
+ +

Ejecute las pruebas en el directorio raíz de LocalLibrary. Debería ver un resultado como el siguiente.

+ +
>python manage.py test
+
+Creating test database for alias 'default'...
+setUpTestData: Run once to set up non-modified data for all class methods.
+setUp: Run once for every test method to setup clean data.
+Method: test_false_is_false.
+.setUp: Run once for every test method to setup clean data.
+Method: test_false_is_true.
+FsetUp: Run once for every test method to setup clean data.
+Method: test_one_plus_one_equals_two.
+.
+======================================================================
+FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass)
+----------------------------------------------------------------------
+Traceback (most recent call last):
+  File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true
+    self.assertTrue(False)
+AssertionError: False is not true
+
+----------------------------------------------------------------------
+Ran 3 tests in 0.075s
+
+FAILED (failures=1)
+Destroying test database for alias 'default'...
+ +

Aquí vemos que tuvimos una falla de prueba, y podemos ver exactamente qué función falló y por qué (se espera esta falla, porque False no es True!).

+ +
+

Sugerencia: Lo más importante que debe aprender del resultado de la prueba anterior es que es mucho más valioso si usa nombres descriptivos / informativos para sus objetos y métodos.

+
+ +

El texto que se muestra en negritas anterior normalmente no aparecería en la salida de prueba (esto es generado por la funcion print() en nuestra prueba). Esto muestra el metodo setUpTestData() es llamado una vez para la clase y setUp()se llama antes de cada método.

+ +

Las siguientes secciones muestran cómo puede ejecutar pruebas específicas y cómo controlar cuánta información muestran las pruebas.

+ +

Mostrando más información de las pruebas

+ +

Si desea obtener más información sobre la ejecución de prueba, puede cambiar el nivel de detalle. Por ejemplo, para enumerar los éxitos y fallas de la prueba (y una gran cantidad de información sobre cómo está configurada la base de datos de prueba), puede establecer la verbosidad en "2" como se muestra:

+ +
python3 manage.py test --verbosity 2
+ +

The allowed verbosity levels are 0, 1, 2, and 3, with the default being "1".

+ +

Ejecutando pruebas especificas

+ +

Si desea ejecutar un subconjunto de sus pruebas, puede hacerlo especificando la ruta de puntos completa al paquete (s), módulo, TestCase subclase o metodo:

+ +
python3 manage.py test catalog.tests   # Run the specified module
+python3 manage.py test catalog.tests.test_models  # Run the specified module
+python3 manage.py test catalog.tests.test_models.YourTestClass # Run the specified class
+python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one_equals_two  # Run the specified method
+
+ +

Pruebas en el proyecto LocalLibrary

+ +

Ahora que sabemos cómo ejecutar nuestras pruebas y qué tipo de cosas necesitamos probar, veamos algunos ejemplos prácticos.

+ +
+

Nota: No escribiremos todas las pruebas posibles, pero esto debería darle una idea de cómo funcionan las pruebas y qué más puede hacer.

+
+ +

Modelos

+ +

Como se discutió anteriormente, debemos probar todo lo que sea parte de nuestro diseño o que esté definido por el código que hayamos escrito, pero no las bibliotecas / código que ya haya probado Django o el equipo de desarrollo de Python.

+ +

Por ejemplo, considere el modelo de Author a continuación. Aquí deberíamos probar las etiquetas para todos los campos, porque aunque no hemos especificado explícitamente la mayoría de ellos, tenemos un diseño que dice cuáles deberían ser estos valores. Si no probamos los valores, entonces no sabemos que las etiquetas de los campos tienen sus valores deseados. De manera similar, aunque confiamos en que Django creará un campo de la longitud especificada, vale la pena especificar una prueba para esta longitud para asegurarse de que se implementó según lo planeado.

+ +
class Author(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    date_of_birth = models.DateField(null=True, blank=True)
+    date_of_death = models.DateField('Died', null=True, blank=True)
+
+    def get_absolute_url(self):
+        return reverse('author-detail', args=[str(self.id)])
+
+    def __str__(self):
+        return '%s, %s' % (self.last_name, self.first_name)
+ +

Abra su /catalog/tests/test_models.py, y reemplace cualquier código existente con el siguiente código de prueba para el modelo de Author.

+ +

Aquí usted verá que primero importamos TestCase y derivamos nuestras clases de prueba (AuthorModelTest) de ello, usando un nombre descriptive para que así podamos fácilmente cualquier pruebas fallidas en el output de la prueba. Luego llamamos a setUpTestData() para crear un objeto de autor que usaremos pero no modificaremos en ninguna de las pruebas.

+ +
from django.test import TestCase
+
+# Create your tests here.
+
+from catalog.models import Author
+
+class AuthorModelTest(TestCase):
+
+    @classmethod
+    def setUpTestData(cls):
+        #Set up non-modified objects used by all test methods
+        Author.objects.create(first_name='Big', last_name='Bob')
+
+    def test_first_name_label(self):
+        author=Author.objects.get(id=1)
+        field_label = author._meta.get_field('first_name').verbose_name
+        self.assertEquals(field_label,'first name')
+
+    def test_date_of_death_label(self):
+        author=Author.objects.get(id=1)
+        field_label = author._meta.get_field('date_of_death').verbose_name
+        self.assertEquals(field_label,'died')
+
+    def test_first_name_max_length(self):
+        author=Author.objects.get(id=1)
+        max_length = author._meta.get_field('first_name').max_length
+        self.assertEquals(max_length,100)
+
+    def test_object_name_is_last_name_comma_first_name(self):
+        author=Author.objects.get(id=1)
+        expected_object_name = '%s, %s' % (author.last_name, author.first_name)
+        self.assertEquals(expected_object_name,str(author))
+
+    def test_get_absolute_url(self):
+        author=Author.objects.get(id=1)
+        #This will also fail if the urlconf is not defined.
+        self.assertEquals(author.get_absolute_url(),'/catalog/author/1')
+ +

The field tests check that the values of the field labels (verbose_name) and that the size of the character fields are as expected. These methods all have descriptive names, and follow the same pattern:

+ +
author=Author.objects.get(id=1)   # Get an author object to test
+field_label = author._meta.get_field('first_name').verbose_name   # Get the metadata for the required field and use it to query the required field data
+self.assertEquals(field_label,'first name')  # Compare the value to the expected result
+ +

The interesting things to note are:

+ + + +
+

Note: Tests for the last_name and date_of_birth labels, and also the test for the length of the last_name field have been omitted. Add your own versions now, following the naming conventions and approaches shown above.

+
+ +

We also need to test our custom methods. These essentially just check that the object name was constructed as we expected using "Last Name", "First Name" format, and that the URL we get for an Author item is as we would expect.

+ +
def test_object_name_is_last_name_comma_first_name(self):
+    author=Author.objects.get(id=1)
+    expected_object_name = '%s, %s' % (author.last_name, author.first_name)
+    self.assertEquals(expected_object_name,str(author))
+
+def test_get_absolute_url(self):
+    author=Author.objects.get(id=1)
+    #This will also fail if the urlconf is not defined.
+    self.assertEquals(author.get_absolute_url(),'/catalog/author/1')
+ +

Run the tests now. If you created the Author model as we described in the models tutorial it is quite likely that you will get an error for the date_of_death label as shown below. The test is failing because it was written expecting the label definition to follow Django's convention of not capitalising the first letter of the label (Django does this for you).

+ +
======================================================================
+FAIL: test_date_of_death_label (catalog.tests.test_models.AuthorModelTest)
+----------------------------------------------------------------------
+Traceback (most recent call last):
+  File "D:\...\locallibrary\catalog\tests\test_models.py", line 32, in test_date_of_death_label
+    self.assertEquals(field_label,'died')
+AssertionError: 'Died' != 'died'
+- Died
+? ^
++ died
+? ^
+ +

This is a very minor bug, but it does highlight how writing tests can more thoroughly check any assumptions you may have made.

+ +
+

Note: Change the label for the date_of_death field (/catalog/models.py) to "died" and re-run the tests.

+
+ +

The patterns for testing the other models are similar so we won't continue to discuss these further. Feel free to create your own tests for the our other models.

+ +

Formularios

+ +

The philosophy for testing your forms is the same as for testing your models; you need to test anything that you've coded or your design specifies, but not the behaviour of the underlying framework and other third party libraries.

+ +

Generally this means that you should test that the forms have the fields that you want, and that these are displayed with appropriate labels and help text. You don't need to verify that Django validates the field type correctly (unless you created your own custom field and validation) — i.e. you don't need to test that an email field only accepts emails. However you would need to test any additional validation that you expect to be performed on the fields and any messages that your code will generate for errors.

+ +

Consider our form for renewing books. This has just one field for the renewal date, which will have a label and help text that we will need to verify.

+ +
class RenewBookForm(forms.Form):
+    """
+    Form for a librarian to renew books.
+    """
+    renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
+
+    def clean_renewal_date(self):
+        data = self.cleaned_data['renewal_date']
+
+        #Check date is not in past.
+        if data < datetime.date.today():
+            raise ValidationError(_('Invalid date - renewal in past'))
+        #Check date is in range librarian allowed to change (+4 weeks)
+        if data > datetime.date.today() + datetime.timedelta(weeks=4):
+            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
+
+        # Remember to always return the cleaned data.
+        return data
+ +

Open our /catalog/tests/test_forms.py file and replace any existing code with the following test code for the RenewBookForm form. We start by importing our form and some Python and Django libraries to help test test time-related functionality. We then declare our form test class in the same way as we did for models, using a descriptive name for our TestCase-derived test class.

+ +
from django.test import TestCase
+
+# Create your tests here.
+
+import datetime
+from django.utils import timezone
+from catalog.forms import RenewBookForm
+
+class RenewBookFormTest(TestCase):
+
+    def test_renew_form_date_field_label(self):
+        form = RenewBookForm()
+        self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date')
+
+    def test_renew_form_date_field_help_text(self):
+        form = RenewBookForm()
+        self.assertEqual(form.fields['renewal_date'].help_text,'Enter a date between now and 4 weeks (default 3).')
+
+    def test_renew_form_date_in_past(self):
+        date = datetime.date.today() - datetime.timedelta(days=1)
+        form_data = {'renewal_date': date}
+        form = RenewBookForm(data=form_data)
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_too_far_in_future(self):
+        date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1)
+        form_data = {'renewal_date': date}
+        form = RenewBookForm(data=form_data)
+        self.assertFalse(form.is_valid())
+
+    def test_renew_form_date_today(self):
+        date = datetime.date.today()
+        form_data = {'renewal_date': date}
+        form = RenewBookForm(data=form_data)
+        self.assertTrue(form.is_valid())
+
+    def test_renew_form_date_max(self):
+        date = timezone.now() + datetime.timedelta(weeks=4)
+        form_data = {'renewal_date': date}
+        form = RenewBookForm(data=form_data)
+        self.assertTrue(form.is_valid())
+
+ +

The first two functions test that the field's label and help_text are as expected. We have to access the field using the fields dictionary (e.g. form.fields['renewal_date']). Note here that we also have to test whether the label value is None, because even though Django will render the correct label it returns None if the value is not explicitly set.

+ +

The rest of the functions test that the form is valid for renewal dates just inside the acceptable range and invalid for values outside the range. Note how we construct test date values around our current date (datetime.date.today()) using datetime.timedelta() (in this case specifying a number of days or weeks). We then just create the form, passing in our data, and test if it is valid.

+ +
+

Note: Here we don't actually use the database or test client. Consider modifying these tests to use SimpleTestCase.

+ +

We also need to validate that the correct errors are raised if the form is invalid, however this is usually done as part of view processing, so we'll take care of that in the next section.

+
+ +

That's all for forms; we do have some others, but they are automatically created by our generic class-based editing views, and should be tested there! Run the tests and confirm that our code still passes!

+ +

Vistas

+ +

To validate our view behaviour we use the Django test Client. This class acts like a dummy web browser that we can use to simulate GET and POST requests on a URL and observe the response. We can see almost everything about the response, from low-level HTTP (result headers and status codes) through to the template we're using to render the HTML and the context data we're passing to it. We can also see the chain of redirects (if any) and check the URL and status code at each step. This allows us to verify that each view is doing what is expected.

+ +

Let's start with one of our simplest views, which provides a list of all Authors. This is displayed at URL /catalog/authors/ (an URL named 'authors' in the URL configuration).

+ +
class AuthorListView(generic.ListView):
+    model = Author
+    paginate_by = 10
+
+ +

As this is a generic list view almost everything is done for us by Django. Arguably if you trust Django then the only thing you need to test is that the view is accessible at the correct URL and can be accessed using its name. However if you're using a test-driven development process you'll start by writing tests that confirm that the view displays all Authors, paginating them in lots of 10.

+ +

Open the /catalog/tests/test_views.py file and replace any existing text with the following test code for AuthorListView. As before we import our model and some useful classes. In the setUpTestData() method we set up a number of Author objects so that we can test our pagination.

+ +
from django.test import TestCase
+
+# Create your tests here.
+
+from catalog.models import Author
+from django.urls import reverse
+
+class AuthorListViewTest(TestCase):
+
+    @classmethod
+    def setUpTestData(cls):
+        #Create 13 authors for pagination tests
+        number_of_authors = 13
+        for author_num in range(number_of_authors):
+            Author.objects.create(first_name='Christian %s' % author_num, last_name = 'Surname %s' % author_num,)
+
+    def test_view_url_exists_at_desired_location(self):
+        resp = self.client.get('/catalog/authors/')
+        self.assertEqual(resp.status_code, 200)
+
+    def test_view_url_accessible_by_name(self):
+        resp = self.client.get(reverse('authors'))
+        self.assertEqual(resp.status_code, 200)
+
+    def test_view_uses_correct_template(self):
+        resp = self.client.get(reverse('authors'))
+        self.assertEqual(resp.status_code, 200)
+
+        self.assertTemplateUsed(resp, 'catalog/author_list.html')
+
+    def test_pagination_is_ten(self):
+        resp = self.client.get(reverse('authors'))
+        self.assertEqual(resp.status_code, 200)
+        self.assertTrue('is_paginated' in resp.context)
+        self.assertTrue(resp.context['is_paginated'] == True)
+        self.assertTrue( len(resp.context['author_list']) == 10)
+
+    def test_lists_all_authors(self):
+        #Get second page and confirm it has (exactly) remaining 3 items
+        resp = self.client.get(reverse('authors')+'?page=2')
+        self.assertEqual(resp.status_code, 200)
+        self.assertTrue('is_paginated' in resp.context)
+        self.assertTrue(resp.context['is_paginated'] == True)
+        self.assertTrue( len(resp.context['author_list']) == 3)
+ +

All the tests use the client (belonging to our TestCase's derived class) to simulate a GET request and get a response (resp). The first version checks a specific URL (note, just the specific path without the domain) while the second generates the URL from its name in the URL configuration.

+ +
resp = self.client.get('/catalog/authors/')
+resp = self.client.get(reverse('authors'))
+
+ +

Once we have the response we query it for its status code, the template used, whether or not the response is paginated, the number of items returned, and the total number of items.

+ +

The most interesting variable we demonstrate above is resp.context, which is the context variable passed to the template by the view. This is incredibly useful for testing, because it allows us to confirm that our template is getting all the data it needs. In other words we can check that we're using the intended template and what data the template is getting, which goes a long way to verifying that any rendering issues are solely due to template.

+ +

Views that are restricted to logged in users

+ +

In some cases you'll want to test a view that is restricted to just logged in users. For example our LoanedBooksByUserListView is very similar to our previous view but is only available to logged in users, and only displays BookInstance records that are borrowed by the current user, have the 'on loan' status, and are ordered "oldest first".

+ +
from django.contrib.auth.mixins import LoginRequiredMixin
+
+class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
+    """
+    Generic class-based view listing books on loan to current user.
+    """
+    model = BookInstance
+    template_name ='catalog/bookinstance_list_borrowed_user.html'
+    paginate_by = 10
+
+    def get_queryset(self):
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
+ +

Add the following test code to /catalog/tests/test_views.py. Here we first use SetUp() to create some user login accounts and BookInstance objects (along with their associated books and other records) that we'll use later in the tests. Half of the books are borrowed by each test user, but we've initially set the status of all books to "maintenance". We've used SetUp() rather than setUpTestData() because we'll be modifying some of these objects later.

+ +
+

Note: The setUp() code below creates a book with a specified Language, but your code may not include the Language model as this was created as a challenge. If this is the case, simply  comment out the parts of the code that create or import Language objects. You should also do this in the RenewBookInstancesViewTest section that follows.

+
+ +
import datetime
+from django.utils import timezone
+
+from catalog.models import BookInstance, Book, Genre, Language
+from django.contrib.auth.models import User #Required to assign User as a borrower
+
+class LoanedBookInstancesByUserListViewTest(TestCase):
+
+    def setUp(self):
+        #Create two users
+        test_user1 = User.objects.create_user(username='testuser1', password='12345')
+        test_user1.save()
+        test_user2 = User.objects.create_user(username='testuser2', password='12345')
+        test_user2.save()
+
+        #Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(title='Book Title', summary = 'My book summary', isbn='ABCDEFG', author=test_author, language=test_language)
+        # Create genre as a post-step
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) #Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        #Create 30 BookInstance objects
+        number_of_book_copies = 30
+        for book_copy in range(number_of_book_copies):
+            return_date= timezone.now() + datetime.timedelta(days=book_copy%5)
+            if book_copy % 2:
+                the_borrower=test_user1
+            else:
+                the_borrower=test_user2
+            status='m'
+            BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=the_borrower, status=status)
+
+    def test_redirect_if_not_logged_in(self):
+        resp = self.client.get(reverse('my-borrowed'))
+        self.assertRedirects(resp, '/accounts/login/?next=/catalog/mybooks/')
+
+    def test_logged_in_uses_correct_template(self):
+        login = self.client.login(username='testuser1', password='12345')
+        resp = self.client.get(reverse('my-borrowed'))
+
+        #Check our user is logged in
+        self.assertEqual(str(resp.context['user']), 'testuser1')
+        #Check that we got a response "success"
+        self.assertEqual(resp.status_code, 200)
+
+        #Check we used correct template
+        self.assertTemplateUsed(resp, 'catalog/bookinstance_list_borrowed_user.html')
+
+ +

To verify that the view will redirect to a login page if the user is not logged in we use assertRedirects, as demonstrated in test_redirect_if_not_logged_in(). To verify that the page is displayed for a logged in user we first log in our test user, and then access the page again and check that we get a status_code of 200 (success). 

+ +

The rest of the test verify that our view only returns books that are on loan to our current borrower. Copy the (self-explanatory) code at the end of the test class above.

+ +
    def test_only_borrowed_books_in_list(self):
+        login = self.client.login(username='testuser1', password='12345')
+        resp = self.client.get(reverse('my-borrowed'))
+
+        #Check our user is logged in
+        self.assertEqual(str(resp.context['user']), 'testuser1')
+        #Check that we got a response "success"
+        self.assertEqual(resp.status_code, 200)
+
+        #Check that initially we don't have any books in list (none on loan)
+        self.assertTrue('bookinstance_list' in resp.context)
+        self.assertEqual( len(resp.context['bookinstance_list']),0)
+
+        #Now change all books to be on loan
+        get_ten_books = BookInstance.objects.all()[:10]
+
+        for copy in get_ten_books:
+            copy.status='o'
+            copy.save()
+
+        #Check that now we have borrowed books in the list
+        resp = self.client.get(reverse('my-borrowed'))
+        #Check our user is logged in
+        self.assertEqual(str(resp.context['user']), 'testuser1')
+        #Check that we got a response "success"
+        self.assertEqual(resp.status_code, 200)
+
+        self.assertTrue('bookinstance_list' in resp.context)
+
+        #Confirm all books belong to testuser1 and are on loan
+        for bookitem in resp.context['bookinstance_list']:
+            self.assertEqual(resp.context['user'], bookitem.borrower)
+            self.assertEqual('o', bookitem.status)
+
+    def test_pages_ordered_by_due_date(self):
+
+        #Change all books to be on loan
+        for copy in BookInstance.objects.all():
+            copy.status='o'
+            copy.save()
+
+        login = self.client.login(username='testuser1', password='12345')
+        resp = self.client.get(reverse('my-borrowed'))
+
+        #Check our user is logged in
+        self.assertEqual(str(resp.context['user']), 'testuser1')
+        #Check that we got a response "success"
+        self.assertEqual(resp.status_code, 200)
+
+        #Confirm that of the items, only 10 are displayed due to pagination.
+        self.assertEqual( len(resp.context['bookinstance_list']),10)
+
+        last_date=0
+        for copy in resp.context['bookinstance_list']:
+            if last_date==0:
+                last_date=copy.due_back
+            else:
+                self.assertTrue(last_date <= copy.due_back)
+ +

You could also add pagination tests, should you so wish!

+ +

Testing views with forms

+ +

Testing views with forms is a little more complicated than in the cases above, because you need to test more code paths: initial display, display after data validation has failed, and display after validation has succeeded. The good news is that we use the client for testing in almost exactly the same way as we did for display-only views.

+ +

To demonstrate, let's write some tests for the view used to renew books (renew_book_librarian()):

+ +
from .forms import RenewBookForm
+
+@permission_required('catalog.can_mark_returned')
+def renew_book_librarian(request, pk):
+    """
+    View function for renewing a specific BookInstance by librarian
+    """
+    book_inst=get_object_or_404(BookInstance, pk = pk)
+
+    # If this is a POST request then process the Form data
+    if request.method == 'POST':
+
+        # Create a form instance and populate it with data from the request (binding):
+        form = RenewBookForm(request.POST)
+
+        # Check if the form is valid:
+        if form.is_valid():
+            # process the data in form.cleaned_data as required (here we just write it to the model due_back field)
+            book_inst.due_back = form.cleaned_data['renewal_date']
+            book_inst.save()
+
+            # redirect to a new URL:
+            return HttpResponseRedirect(reverse('all-borrowed') )
+
+    # If this is a GET (or any other method) create the default form
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
+
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+ +

We'll need to test that the view is only available to users who have the can_mark_returned permission, and that users are redirected to an HTTP 404 error page if they attempt to renew a BookInstance that does not exist. We should check that the initial value of the form is seeded with a date three weeks in the future, and that if validation succeeds we're redirected to the "all-borrowed books" view. As part checking the validation-fail tests we'll also check that our form is sending the appropriate error messages.

+ +

Add the first part of the test class (shown below) to the bottom of /catalog/tests/test_views.py. This creates two users and two book instances, but only gives one user the permission required to access the view. The code to grant permissions during tests is shown in bold:

+ +
from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned.
+
+class RenewBookInstancesViewTest(TestCase):
+
+    def setUp(self):
+        #Create a user
+        test_user1 = User.objects.create_user(username='testuser1', password='12345')
+        test_user1.save()
+
+        test_user2 = User.objects.create_user(username='testuser2', password='12345')
+        test_user2.save()
+        permission = Permission.objects.get(name='Set book as returned')
+        test_user2.user_permissions.add(permission)
+        test_user2.save()
+
+        #Create a book
+        test_author = Author.objects.create(first_name='John', last_name='Smith')
+        test_genre = Genre.objects.create(name='Fantasy')
+        test_language = Language.objects.create(name='English')
+        test_book = Book.objects.create(title='Book Title', summary = 'My book summary', isbn='ABCDEFG', author=test_author, language=test_language,)
+        # Create genre as a post-step
+        genre_objects_for_book = Genre.objects.all()
+        test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed.
+        test_book.save()
+
+        #Create a BookInstance object for test_user1
+        return_date= datetime.date.today() + datetime.timedelta(days=5)
+        self.test_bookinstance1=BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=test_user1, status='o')
+
+        #Create a BookInstance object for test_user2
+        return_date= datetime.date.today() + datetime.timedelta(days=5)
+        self.test_bookinstance2=BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=test_user2, status='o')
+ +

Add the following tests to the bottom of the test class. These check that only users with the correct permissions (testuser2) can access the view. We check all the cases: when the user is not logged in, when a user is logged in but does not have the correct permissions, when the user has permissions but is not the borrower (should succeed), and what happens when they try to access a BookInstance that doesn't exist. We also check that the correct template is used.

+ +
    def test_redirect_if_not_logged_in(self):
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+        #Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
+        self.assertEqual( resp.status_code,302)
+        self.assertTrue( resp.url.startswith('/accounts/login/') )
+
+    def test_redirect_if_logged_in_but_not_correct_permission(self):
+        login = self.client.login(username='testuser1', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+
+        #Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
+        self.assertEqual( resp.status_code,302)
+        self.assertTrue( resp.url.startswith('/accounts/login/') )
+
+    def test_logged_in_with_permission_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance2.pk,}) )
+
+        #Check that it lets us login - this is our book and we have the right permissions.
+        self.assertEqual( resp.status_code,200)
+
+    def test_logged_in_with_permission_another_users_borrowed_book(self):
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+
+        #Check that it lets us login. We're a librarian, so we can view any users book
+        self.assertEqual( resp.status_code,200)
+
+    def test_HTTP404_for_invalid_book_if_logged_in(self):
+        import uuid
+        test_uid = uuid.uuid4() #unlikely UID to match our bookinstance!
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid,}) )
+        self.assertEqual( resp.status_code,404)
+
+    def test_uses_correct_template(self):
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+        self.assertEqual( resp.status_code,200)
+
+        #Check we used correct template
+        self.assertTemplateUsed(resp, 'catalog/book_renew_librarian.html')
+
+ +

Add the next test method, as shown below. This checks that the initial date for the form is three weeks in the future. Note how we are able to access the value of the initial value of the form field (shown in bold).

+ +
    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
+        login = self.client.login(username='testuser2', password='12345')
+        resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
+        self.assertEqual( resp.status_code,200)
+
+        date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3)
+        self.assertEqual(resp.context['form'].initial['renewal_date'], date_3_weeks_in_future )
+
+ +

The next test (add this to the class too) checks that the view redirects to a list of all borrowed books if renewal succeeds. What differs here is that for the first time we show how you can POST data using the client. The post data is the second argument to the post function, and is specified as a dictionary of key/values.

+ +
    def test_redirects_to_all_borrowed_book_list_on_success(self):
+        login = self.client.login(username='testuser2', password='12345')
+        valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2)
+        resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future} )
+        self.assertRedirects(resp, reverse('all-borrowed') )
+
+ +
+

The all-borrowed view was added as a challenge, and your code may instead redirect to the home page '/'. If so, modify the last two lines of the test code to be like the code below. The follow=True in the request ensures that the request returns the final destination URL (hence checking /catalog/ rather than /).

+ +
 resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future},follow=True )
+ self.assertRedirects(resp, '/catalog/')
+
+ +

Copy the last two functions into the class, as seen below. These again test POST requests, but in this case with invalid renewal dates. We use assertFormError() to verify that the error messages are as expected.

+ +
    def test_form_invalid_renewal_date_past(self):
+        login = self.client.login(username='testuser2', password='12345')
+        date_in_past = datetime.date.today() - datetime.timedelta(weeks=1)
+        resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':date_in_past} )
+        self.assertEqual( resp.status_code,200)
+        self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal in past')
+
+    def test_form_invalid_renewal_date_future(self):
+        login = self.client.login(username='testuser2', password='12345')
+        invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5)
+        resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':invalid_date_in_future} )
+        self.assertEqual( resp.status_code,200)
+        self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')
+
+ +

The same sorts of techniques can be used to test the other view.

+ +

Templates

+ +

Django provides test APIs to check that the correct template is being called by your views, and to allow you to verify that the correct information is being sent. There is however no specific API support for testing in Django that your HTML output is rendered as expected.

+ + + +

Django's test framework can help you write effective unit and integration tests — we've only scratched the surface of what the underlying unittest framework can do, let alone Django's additions (for example, check out how you can use unittest.mock to patch third party libraries so you can more thoroughly test your own code).

+ +

While there are numerous other test tools that you can use, we'll just highlight two:

+ + + +

Reto para mi mismo

+ +

There are a lot more models and views we can test. As a simple task, try to create a test case for the AuthorCreate view.

+ +
class AuthorCreate(PermissionRequiredMixin, CreateView):
+    model = Author
+    fields = '__all__'
+    initial={'date_of_death':'12/10/2016',}
+    permission_required = 'catalog.can_mark_returned'
+ +

Remember that you need to check anything that you specify or that is part of the design. This will include who has access, the initial date, the template used, and where the view redirects on success.

+ +

Resumen

+ +

Writing test code is neither fun nor glamorous, and is consequently often left to last (or not at all) when creating a website. It is however an essential part of making sure that your code is safe to release after making changes, and cost-effective to maintain.

+ +

In this tutorial we've shown you how to write and run tests for your models, forms, and views. Most importantly we've provided a brief summary of what you should test, which is often the hardest thing to work out when your getting started. There is a lot more to know, but even with what you've learned already you should be able to create effective unit tests for your websites.

+ +

The next and final tutorial shows how you can deploy your wonderful (and fully tested!) Django website.

+ +

Mirar tambien

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/tutorial_local_library_website/index.html b/files/es/learn/server-side/django/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..a7450fafd0 --- /dev/null +++ b/files/es/learn/server-side/django/tutorial_local_library_website/index.html @@ -0,0 +1,103 @@ +--- +title: 'Tutorial Django: El Sitio Web de La Biblioteca Local' +slug: Learn/Server-side/Django/Tutorial_local_library_website +tags: + - Aprendizaje + - Artículo + - Codificación de scripts + - Guía + - Principiante + - Tutorial + - django + - lado servidor +translation_of: Learn/Server-side/Django/Tutorial_local_library_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
+ +

El primer artículo de nuestra serie de tutoriales prácticos explica qué puedes aprender, y proporciona una visión general del sitio web de ejemplo de "biblioteca local" en el que estaremos trabajando y evolucionando en artículos subsiguientes.

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

Leer la Introducción a Django. Durante los siguientes artículos necesitarás tener levantado un entorno de desarrollo Django. 

+
Objetivo: +

Presentar el ejemplo de aplicación usado en este tutorial, y permitir que los lectores comprendan los temas que se tratarán aquí. 

+
+ +

Visión general

+ +

Bienvenidos al tutorial de MDN sobre la "Biblioteca Local" Django en el que desarrollaremos un sitio web que podría usarse para gestionar el catálogo de una biblioteca local. 

+ +

En esta serie de tutoriales:

+ + + +

Has aprendido algo de estos tópicos ya, y tocado otros brevemente. Al final de esta serie de tutoriales sabrás lo suficiente para desarrollar aplicaciones simples Django por tí mismo.

+ +

El sitio web de la Biblioteca Local

+ +

BibliotecaLocal es el nombre del sitio web que crearemos para evolucionar a lo largo del curso de esta serie de tutoriales. Como habrás supuesto, el propósito de este sitio web es proporcionar un catálogo online para una pequeña biblioteca local, en la que los usuarios pueden explorar los libros disponibles y gestionar sus cuentas.

+ +

Este ejemplo ha sido seleccionado cuidadosamente porque puede escalar para mostrar tanto mucho detalle como poco según necesitemos, y puede usarse para mostrar casi cualquier característica de Django. Más importante aún, nos permite proporcionar un camino guiado a través de las funcionalidades más importantes del framework web Django:

+ + + +

Incluso aunque es un ejemplo muy extenso, se llama BibliotecaLocal por una razón — esperamos mostrar el mínimo de información que te ayude a ponerte en marcha con Django rápidamente. Como resultado almacenaremos información sobre libros, copias de libros, autores y otras información clave. Sin embargo, no almacenaremos información sobre otros elementos que una biblioteca podría almacenar, ni proporcionaremos la infraestructura necesaría para mantener multiples sitios de bibliotecas u otras características de una "gran biblioteca".

+ +

Estoy atascado, ¿Donde puedo encontrar el código fuente?

+ +

A medida que avances a través del tutorial te proporcionaremos los fragmentos de código apropiados para que copies y pegues en cada punto, y habrá otro código que esperamos que puedas entender tú mismo (con algo de ayuda).

+ +

Si te quedas atascado, puedes encontrar la versión completamente desarrollada en el sitio web de Github aquí.

+ +

Resumen

+ +

Ahora que sabes un poco más sobre el sitio de la BibliotecaLocal y lo que vas a aprender, es hora de empezar a crear el esqueleto(estructura) de nuestro proyecto.

+ +

{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/django/web_application_security/index.html b/files/es/learn/server-side/django/web_application_security/index.html new file mode 100644 index 0000000000..e00a1771bb --- /dev/null +++ b/files/es/learn/server-side/django/web_application_security/index.html @@ -0,0 +1,176 @@ +--- +title: Seguridad de las aplicaciones web Django +slug: Learn/Server-side/Django/web_application_security +translation_of: Learn/Server-side/Django/web_application_security +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}
+ +

Proteger los datos de los usuarios es una parte esencial de cualquier diseño de un sitio web. Previamente ya explicamos algunas de las amenazas de seguridad más comunes en el artículo Seguridad Web — este artículo proporciona una demostración práctica de cómo las protecciones integradas de Django gestionan estas amenazas.

+ + + + + + + + + + + + +
Prerrequisitos:Lee la documentación de la Programación del Lado del servidor "Seguridad de la aplicación web de Django". Completa todos los temas del Tutorial de Django (incluyendo este) o por lo menos el Tutorial de Django Parte 9: Trabajar con formularios web.
Objetivo:Comprender las cosas principales que debes hacer (y las que no debes) para proteger su aplicación web de Django.
+ +

Overview

+ +

The Website security topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.

+ +
+

Important: The single most important lesson you can learn about website security is to never trust data from the browser. This includes GET request data in URL parameters, POST data, HTTP headers and cookies, user-uploaded files, etc. Always check and sanitize all incoming data. Always assume the worst.

+
+ +

The good news for Django users is that many of the more common threats are handled by the framework! The Security in Django (Django docs) article explains Django's security features and how to secure a Django-powered website.

+ +

Common threats/protections

+ +

Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django LocalLibrary tutorial.

+ +

Cross site scripting (XSS)

+ +

XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts through the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.

+ +

Django's template system protects you against the majority of XSS attacks by escaping specific characters that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in Django Tutorial Part 9: Working with forms.

+ +
    +
  1. Start the website using the development server (python3 manage.py runserver).
    2. +
  2. Open the site in your local browser and login to your superuser account.
    3. +
  3. Navigate to the author-creation page (which should be at URL: http://127.0.0.1:8000/catalog/author/create/).
    4. +
  4. Enter names and date details for a new user, and then append the following text to the Last Name field:
    + <script>alert('Test alert');</script>.
    + Author Form XSS test +
    +

    Note: This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.

    +
    +
    5. +
  5. Press Submit to save the record.
    6. +
  6. When you save the author it will be displayed as shown below. Because of the XSS protections the alert() should not be run. Instead the script is displayed as plain text.Author detail view XSS test
    7. +
+ +

If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. > is now &gt;)

+ +
<h1>Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David (Boonie) </h1>
+
+ +

Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the help_text in a form field is usually not user-supplied, so Django doesn't escape those values).

+ +

It is also possible for XSS attacks to originate from other untrusted source of data, such as cookies, Web services or uploaded files (whenever the data is not sufficiently sanitized before including in a page). If you're displaying data from these sources, then you may need to add your own sanitisation code.

+ +

Cross site request forgery (CSRF) protection

+ +

CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary.

+ +
+

Note: Obviously our hacker isn't in this for the money! A more ambitious hacker could use the same approach on other sites to perform much more harmful tasks (e.g. transfer money to their own accounts, etc.)

+
+ +

In order to do this, they might create an HTML file like the one below, which contains an author-creation form (like the one we used in the previous section) that is submitted as soon as the file is loaded. They would then send the file to all the Librarians and suggest that they open the file (it contains some harmless information, honest!). If the file is opened by any logged in librarian, then the form would be submitted with their credentials and a new author would be created.

+ +
<html>
+<body onload='document.EvilForm.submit()'>
+
+<form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'>
+  <table>
+    <tr><th><label for="id_first_name">First name:</label></th><td><input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /></td></tr>
+    <tr><th><label for="id_last_name">Last name:</label></th><td><input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /></td></tr>
+    <tr><th><label for="id_date_of_birth">Date of birth:</label></th><td><input id="id_date_of_birth" name="date_of_birth" type="text" /></td></tr>
+    <tr><th><label for="id_date_of_death">Died:</label></th><td><input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /></td></tr>
+  </table>
+  <input type="submit" value="Submit" />
+</form>
+
+</body>
+</html>
+
+ +

Run the development web server, and log in with your superuser account. Copy the text above into a file and then open it in the browser. You should get a CSRF error, because Django has protection against this kind of thing!

+ +

The way the protection is enabled is that you include the {% csrf_token %} template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.

+ +
<input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' />
+
+ +

Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.

+ +

To use this type of attack the hacker now has to discover and include the CSRF key for the specific target user. They also can't use the "scattergun" approach of sending a malicious file to all librarians and hoping that one of them will open it, since the CSRF key is browser specific.

+ +

Django's CSRF protection is turned on by default. You should always use the {% csrf_token %} template tag in your forms and use POST for requests that might change or add data to the database.

+ +

Other protections

+ +

Django also provides other forms of protection (most of which would be hard or not particularly useful to demonstrate):

+ +
+
SQL injection protection
+
SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.
+
Clickjacking protection
+
In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <iframe> controlled by the attacker. Django contains clickjacking protection in the form of the X-Frame-Options middleware which, in a supporting browser, can prevent a site from being rendered inside a frame.
+
Enforcing SSL/HTTPS
+
SSL/HTTPS can be enabled on the web server in order to encrypt all traffic between the site and browser, including authentication credentials that would otherwise be sent in plain text (enabling HTTPS is highly recommended). If HTTPS is enabled then Django provides a number of other protections you can use:
+
+ + + +
+
Host header validation
+
Use ALLOWED_HOSTS to only accept requests from trusted hosts.
+
+ +

There are many other protections, and caveats to the usage of the above mechanisms. While we hope that this has given you an overview of what Django offers, you should still read the Django security documentation.

+ + + +

Summary

+ +

Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our LocalLibrary website. We've also provided a brief overview of some of the other protections.

+ +

This has been a very brief foray into web security. We strongly recommend that you read Security in Django to gain a deeper understanding.

+ +

The next and final step in this module about Django is to complete the assessment task.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}

+ +

En este módulo

+ + diff --git a/files/es/learn/server-side/express_nodejs/development_environment/index.html b/files/es/learn/server-side/express_nodejs/development_environment/index.html new file mode 100644 index 0000000000..40a96d56e4 --- /dev/null +++ b/files/es/learn/server-side/express_nodejs/development_environment/index.html @@ -0,0 +1,407 @@ +--- +title: Setting up a Node development environment +slug: Learn/Server-side/Express_Nodejs/development_environment +tags: + - Aprender + - Entorno de Desarrollo + - Express + - JavaScript + - Node + - nodejs + - npm +translation_of: Learn/Server-side/Express_Nodejs/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
+ +

Ahora que sabes para que sirve Express, nosotros te vamos a mostrar como preparar y testear un entorno de desarrollo Node/Express en: Windows, Linux (Ubuntu), y macOS. Este artículo te va a dar todo lo que se necesita para poder empezar a desarrollar apps en Express, sin importar el sistema operativo que se use.

+ + + + + + + + + + + + +
Prerequisitos:Saber como abrir una terminal / línea de comando. Saber como instalar paquetes de software en su sistema operativo de su computadora de desarrollo.
Objectivo:Configurar un ambiente de desarrollo para Express (X.XX) en su computadora.
+ +

Express ambiente de desarrollo reseña

+ +

Node y Express hacen muy fácil configurar su computadora con el propósito de iniciar el desarrollo de aplicaciones web. Esta seccion provee una reseña de qué herramientas son necesarias, explica algunos de los métodos más simples para instalar Node (y Express) en Ubuntu, macOS y Windows, y muestra como puede probar su instalación.

+ +

Qué es el ambiente de desarrollo Express?

+ +

El ambiente de desarrollo Express incluye una instalación de Nodejs, el NPM administrador de paquetes, y (opcionalmente) el Generador de Aplicaciones de Express en su computadora local.

+ +

Node y el administrador de paquetes NPM se instalan juntos desde paquetes binarios, instaladores, administradores de paquetes del sistema operativo o desde los fuentes (como se muestra en las siguientes secciónes). Express es entonces instalado por NPM como una dependencia individual de sus aplicaciones web Express (conjuntamente con otras librerías como motores de plantillas, controladores de bases de datos, middleware de autenticación, middleware para servir archivos estáticos, etc.)

+ +

NPM puede ser usado también para (globalmente) instalar el Generador de Aplicaciones de Express, una herramienta manual para crear la estructura de las web apps de Express que siguen el  patrón MVC . El generador de aplicaciones es opcional porque no necesita utilizar esta herramienta para  crear apps que usan Express, o construir apps Express que tienen el mismo diseño arquitectónico o dependencias. No obstante estaremos usandolo, porque hace mucho más fácil, y promueve una estrucura modular de aplicación.

+ +
+

Nota: A diferencia de otros frameworks web , el ambiente de desarrollo no incluye un servidor web independiente. Una aplicación web Node/Express  crea y ejecuta su propio servidor web!

+
+ +

Hay otras herramientas periféricas que son parte de un ambiente de desarrollo típico, incluyendo editores de texto o IDEs para edición de código, y herramientas de administración de control de fuentes como Git para administrar con seguridad diferentes versiones de su codigo. Asumimos que usted ya tiene instaladas esta clase de herramientas (en particular un editor de texto).

+ +

Qué sistemas operativos son soportados?

+ +

Node puede ser ejecutado en Windows, macOS, varias "versiones" de Linux, Docker, etc. (hay una lista completa de paginas de Downloads de nodejs). Casi cualquier computadora personal podría tener el desempeño necesario para ejecutar Node durante el desarrollo. Express es ejecutado en un ambiente Node, y por lo tanto puede ejecutarse en cualquier plataforma que ejecute Node.

+ +

En este articulo proveemos instruciones para configurarlo para Windows, macOS, and Ubuntu Linux.

+ +

¿Qué versión de Node/Express puedo usar?

+ +

Hay varias versiones de Node — recientes que contienen reparacion de bugs, soporte para versiones mas recientes de ECMAScript (JavaScript) estandares, y mejoras a las APIs de Node . 

+ +

Generalmente se debe usar la versión más reciente SLP (soporte de largo-plazo), una versión como esta es más estable que la versión "actual", mientras que sigue teniendo características relativamente recientes  (y continua siendo activamente actualizado). Debería utilizar la versión Actual si necesita una característica que no esta presente en la versión SLP.

+ +

Para Express siempre se debe utilizar la versión más reciente.

+ +

¿Qué pasa con bases de datos y otras dependencias?

+ +

Otras dependencias, tales como los controladores de bases de datos, motores de plantillas, motores de autenticación, etc. son parte de la aplicación, y son importadas dentro del ambiente de la aplicación utilizando el administrador de paquetes NPM. Estos los discutiremos en artículos posteriores app-specific.

+ +

Instalar Node

+ +

Para poder utilizar Express primero tiene que instalar Nodejs y el Administrador de Paquetes de Node (NPM) en su sistema operativo. Las siguientes secciones explican la forma más fácil de instalar la versión Soporte de Largo-Plazo (SLP) de Nodejs en Ubuntu Linux 16.04, macOS, y Windows 10.

+ +
+

Tip: Las secciones de abajo muestran la forma más facil de instalar Node y NPM en nuestras plataformas de sistemas operativo a elegir. Si esta utilizando otro SO o solo quiere ver alguna de otros enfoques para las plataformas actuales entonce vea Instalando Node.js via administrador de paquetes (nodejs.org).

+
+ +

macOS y Windows

+ +

Instalar Node y NPM en Windows y macOS es sencillo, porque simplemente debe utilizar el instalador provisto:

+ +
    +
  1. Descargue el instalador requerido: +
      +
    1. Vaya a https://nodejs.org/es/
      2. +
    2. Seleccione el boton para descargar la versión LTS que es "Recomendada la mayoría de los usuarios".
      3. +
    +
    2. +
  2. Instale Node al dar doble-click en el archivo de descarga y en seguida la  instalación inicia.
    3. +
+ +

Ubuntu 18.04

+ +

La forma más fácil de instalar la versión LTS de Node 10.x es la usar el administrador de paquetes para obtenerlo del repositorio de distribuciones binarias de Ubuntu. Esto puede ser hecho muy simple al ejecutar los siguientes dos comandos en su terminal:

+ +
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+ +
+

Advertencia: No instale directamente desde los repositorios normales de Ubuntu porque pueden contener versions muy antiguas de Node.

+
+ +
    +
+ +

Probar su instalación de Nodejs y NPM

+ +

La forma más fácil de probar que Node está instalado es ejecutar el comando "version" en su prompt de terminal/command y checar que una cadena de versión es devuelta:

+ +
>node -v
+v10.16.0
+ +

The administrador de paquetes NPM  de Nodejs también debería haber sido instalado y puede ser probado de la misma forma:

+ +
>npm -v
+6.9.0
+ +

Como una prueba un poco más emocionante creemos un muy básico "básico servidor node" que simplemente imprima "Hola Mundo" en el browser cuando visite la URL correcta en él:

+ +
    +
  1. Copie el siguiente texto en un archivo llamado holanode.js. Este utiliza características básicas de Node (nada desde Express) y algo de sintáxis ES6: + + 
    //Load HTTP module
+const http = require("http");
+const hostname = '127.0.0.1';
+const port = 3000;
+
+//Create HTTP server and listen on port 3000 for requests
+const server = http.createServer((req, res) => {
+
+  //Set the response HTTP header with HTTP status and Content type
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'text/plain');
+  res.end('Hello World\n');
+});
+
+//listen for request on port 3000, and as a callback function have the port listened on logged
+server.listen(port, hostname, () => {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
+
+
    + +

    El código importa el módulo "http" y lo usa para crear un servidor  (createServer()) que escucha las solicitudes HTTP en el puerto 3000. Luego, el script imprime un mensaje en la consola con la URL del navegador puede usar para probar el servidor. La función createServer() toma como argumento una función callback que se invocará cuando se reciba una solicitud HTTP —  esto simplemente devuelve una respuesta con un código de estado HTTP de 200 ("OK") y el texto sin formato "Hello World".

    + +
    +

    Nota:   ¡No se preocupe si aún no comprende exactamente lo que está haciendo este código! ¡Explicaremos nuestro código con mayor detalle una vez que comencemos a usar Express!

    +
    +
    2. +
  2. Inicie el servidor navegando en el mismo directorio que su archivo hellonode.js en su símbolo del sistema, y llamando a node junto con el nombre del script, así: + 
    >node hellonode.js
+Server running at http://127.0.0.1:3000/
+
    +
    3. +
  3. Navega a la URL http://127.0.0.1:3000 . Sí todo esta funciona, el navegador simplemente debe mostrar la cadena de texto "Hello World".
    4. +
+ +

Usando NPM

+ +

Junto al propio node, NPM es la herramienta más importante para trabajar con aplicaciones de node. NPM se usa para obtener los paquetes (bibliotecas de JavaScript) que una aplicación necesita para el desarrollo, las pruebas y/o la producción, y también se puede usar para ejecutar pruebas y herramientas utilizadas en el proceso de desarrollo.

+ +
+

Nota:  Desde la perspectiva de Node, Express es solo otro paquete que necesita instalar usando NPM y luego requerir en su propio código.

+
+ +

Se puede usar NPM manualmente para buscar por separado cada paquete necesario. Por lo general, administramos las dependencias utilizando un archivo de definición de texto plano llamado package.json. Este archivo enumera todas las dependencias para un "paquete" de JavaScript específico, incluido el nombre del paquete, la versión, la descripción, el archivo inicial a ejecutar, las dependencias de producción, las dependencias de desarrollo, las versiones de Node con las que puede trabajar, etc. El archivo package.json debería contener todo lo que NPM necesita para buscar y ejecutar su aplicación (si estuviera escribiendo una biblioteca reutilizable, podría usar esta definición para cargar su paquete en el repositorio npm y ponerlo a disposición de otros usuarios).

+ +

Agregando dependencias

+ +

Los siguientes pasos muestran cómo puede usar NPM para descargar un paquete, guardarlo en las dependencias del proyecto y luego requerirlo en una aplicación Node.

+ +
+

Nota: Aquí mostramos las instrucciones para buscar e instalar el paquete Express. Más adelante mostraremos cómo este paquete y otros ya están especificados para nosotros utilizando el Generador de aplicaciones Express. Esta sección se proporciona porque es útil para comprender cómo funciona NPM y qué está creando el generador de aplicaciones.

+
+ +
    +
  1. Primero cree un directorio para su nueva aplicación y acceda a él: + + 
    mkdir myapp
+cd myapp
    +
    2. +
  2. Use el comando npm init para crear un archivo package.json para su aplicación. Este comando le solicita varias cosas, incluido el nombre y la versión de su aplicación y el nombre del archivo de punto de entrada inicial (de forma predeterminada, esto es index.js). Por ahora, solo acepte los valores predeterminados:
    3. +
  3. + 
    npm init
    + +

    Si muestra el archivo package.json (cat package.json), verá los valores predeterminados que aceptó, que finalizarán con la licencia.

    + + 
    {
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+
    +
    4. +
  4. Ahora instale Express en el directorio myapp y guárdelo en la lista de dependencias de su archivo package.json
    5. +
  5. + 
    npm install express --save
    + +

    La sección de dependencias de su package.json ahora aparecerá al final del archivo package.json e incluirá Express.

    + + 
    {
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.16.3"
+  }
+}
+
    +
    6. +
  6. Para usar la biblioteca, llame a la función require () como se muestra a continuación en su archivo index.js. + 
    const express = require('express')
+const app = express();
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+});
+
+app.listen(8000, () => {
+  console.log('Example app listening on port 8000!')
+});
+
    + +

    Este código muestra una aplicación web mínima "HelloWorld" Express. Esto importa el módulo "express" y lo usa para crear un servidor (app) que escucha las solicitudes HTTP en el puerto 8000 e imprime un mensaje en la consola que indica qué URL del navegador puede usar para probar el servidor. La función app.get () solo responde a las solicitudes HTTP GET con la ruta URL especificada ('/'), en este caso llamando a una función para enviar nuestro mensaje Hello World! .

    +
    7. +
  7. +

    Cree un archivo llamado index.js en la raíz del directorio de la aplicación "myapp" y dele el contenido que se muestra arriba.

    +
    8. +
  8. Puede iniciar el servidor llamando a node con el script en su símbolo del sistema: + 
    >node index.js
+Example app listening on port 8000
+
    +
    9. +
  9. Navega a la URL (http://127.0.0.1:8000/). Sí todo esta funciona, el navegador simplemente debe mostrar la cadena de texto "Hello World".
    10. +
+ +

Dependencias de Desarrollo

+ +

Si una dependencia solo se usa durante el desarrollo, debe guardarla como una "dependencia de desarrollo" (para que los usuarios de su paquete no tengan que instalarla en producción). Por ejemplo, para usar la popular herramienta Linting JavaScript eslint llamaría a NPM como se muestra a continuación:

+ +
npm install eslint --save-dev
+ +
+
La siguiente entrada se agregaría al paquete.json de su aplicación:
+ +
+
+ +
  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+
+ +
+

Nota: "Linters" son herramientas que realizan análisis estáticos en el software para reconocer e informar la adhesión / no adhesión a algún conjunto de mejores prácticas de codificación.

+
+ +

Ejecutando tareas

+ +

Además de definir y buscar dependencias, también puede definir scripts con nombre en sus archivos package.json y llamar a NPM para ejecutarlos con el comando run-script. Este enfoque se usa comúnmente para automatizar las pruebas en ejecución y partes de la cadena de herramientas de desarrollo o construcción (por ejemplo, ejecutar herramientas para minimizar JavaScript, reducir imágenes, LINT/analizar su código, etc.).

+ +
+

Nota: Los ejecutadores de tareas como Gulp y Grunt también se pueden usar para ejecutar pruebas y otras herramientas externas.

+
+ +

Por ejemplo, para definir un script para ejecutar la dependencia de desarrollo de eslint que especificamos en la sección anterior, podríamos agregar el siguiente bloque de script a nuestro archivo package.json (suponiendo que el origen de nuestra aplicación esté en una carpeta /src/js):

+ +
"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+
+ +

Para explicar un poco más, eslint src/js es un comando que podríamos ingresar en nuestra línea de terminal/linea de comandos para ejecutar eslint en archivos JavaScript contenidos en el directorio src/js dentro de nuestro directorio de aplicaciones. Incluir lo anterior dentro del archivo package.json de nuestra aplicación proporciona un acceso directo para este comando: lint.

+ +


+ Entonces podríamos ejecutar eslint usando NPM llamando a:

+ +
npm run-script lint
+# OR (using the alias)
+npm run lint
+
+ +
+
Es posible que este ejemplo no parezca más corto que el comando original, pero puede incluir comandos mucho más grandes dentro de sus scripts npm, incluidas cadenas de comandos múltiples. Puede identificar un solo script npm que ejecute todas sus pruebas a la vez.
+
+ +

Instalando Express Application Generator

+ +

La herramienta Express Application Generator genera un "esqueleto" de la aplicación Express. Instale el generador usando NPM como se muestra (el indicador -g instala la herramienta globalmente para que pueda llamarla desde cualquier lugar):

+ +
npm install express-generator -g
+ +

Para crear una aplicación Express llamada "helloworld" con la configuración predeterminada, navegue hasta donde desea crearla y ejecute la aplicación como se muestra:

+ +
express helloworld
+ +
+

Nota: También puede especificar la biblioteca de plantillas para usar y una serie de otras configuraciones. Use el comando --help para ver todas las opciones:

+ +
express --help
+
+
+ +

NPM creará la nueva aplicación Express en una subcarpeta de su ubicación actual, mostrando el progreso de la compilación en la consola. Al finalizar, la herramienta mostrará los comandos que necesita ingresar para instalar las dependencias de Node e iniciar la aplicación.

+ +
+

La nueva aplicación tendrá un archivo package.json en su directorio raíz. Puede abrir esto para ver qué dependencias están instaladas, incluidas Express y la biblioteca de plantillas Jade:

+ +
{
+  "name": "helloworld",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.15.5",
+    "jade": "~1.11.0",
+    "morgan": "~1.9.0",
+    "serve-favicon": "~2.4.5"
+  }
+}
+
+ +

Instale todas las dependencias para la aplicación helloworld usando NPM como se muestra:

+ +
cd helloworld
+npm install
+
+ +

Luego ejecute la aplicación (los comandos son ligeramente diferentes para Windows y Linux/macOS), como se muestra a continuación:

+ +
#  Ejecute helloworld en Windows con símbolo del sistema
+SET DEBUG=helloworld:* & npm start
+
+#  Ejecute helloworld en Windows con PowerShell
+SET DEBUG=helloworld:* | npm start
+
+#  Ejecute helloworld en Linux/macOS
+DEBUG=helloworld:* npm start
+
+ +

El comando DEBUG crea registros útiles, lo que resulta en una salida como la que se muestra a continuación.

+ +
>SET DEBUG=helloworld:* & npm start
+
+> helloworld@0.0.0 start D:\Github\expresstests\helloworld
+> node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms
+ +

Abra un navegador y navegue a http://127.0.0.1:3000/ para ver la página de bienvenida Express predeterminada.

+ +

Express - Generated App Default Screen

+ +

Hablaremos más sobre la aplicación generada cuando lleguemos al artículo sobre la generación de una aplicación esqueleto.

+ + + +

Resumen

+ +

Ahora tiene un entorno de desarrollo de Node en funcionamiento en su computadora que puede usarse para crear aplicaciones web Express. También ha visto cómo se puede usar NPM para importar Express en una aplicación, y también cómo puede crear aplicaciones usando la herramienta Express Application Generator y luego ejecutarlas.
+
+ En el siguiente artículo, comenzaremos a trabajar a través de un tutorial para crear una aplicación web completa utilizando este entorno y las herramientas asociadas.

+ +

Ver también

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}

+ +

In this module

+ + diff --git a/files/es/learn/server-side/express_nodejs/index.html b/files/es/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..2c224095c0 --- /dev/null +++ b/files/es/learn/server-side/express_nodejs/index.html @@ -0,0 +1,76 @@ +--- +title: Express Web Framework (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +tags: + - Aplicaciones Web + - Aprendizaje + - Express + - Express.js + - JavaScript + - Node + - Novato + - Programación del lado del Servidor + - introducción + - programacion +translation_of: Learn/Server-side/Express_Nodejs +--- +
{{LearnSidebar}}
+ +

Express es un framework web transigente, escrito en JavaScript y alojado dentro del entorno de ejecución NodeJS. El modulo explica algunos de los beneficios clave de este framework, como configurar tu entorno de desarrollo y como realizar tareas comunes en desarrollo y publicación web.

+ +

Prerequisitos

+ +

Antes de empezar con este módulo necesitaras entender los conceptos de programación web en el lado del servidor y los frameworks, de preferencia leyendo acerca de estos temas en nuestro modulo Primeros pasos en la programación web del lado del servidor. Un conocimiento general de conceptos de programación y JavaScript es altamente recomendado, pero no esencial para entender los conceptos básicos.

+ +
+

Nota : Esta web posee muchos recursos útiles para aprender JavaScript en el contexto del desarrollo en el lado del cliente:  JavaScript, Guía de JavaScript, JavaScript Básico, JavaScript (aprendizaje). El lenguaje JavaScript y sus conceptos son los mismos para el desarrollo en el lado del servidor en NodeJS y este material será relevante. NodeJS ofrece APIs adicionales para soportar funcionalidades que son útiles en entornos sin navegador web, por ejemplo para crear servidores HTTP y acceder al sistema de archivos, pero no soportan APIs de JavaScript para trabajar con el navegador y el DOM.

+ +

Esta guía proporciona información útil para trabajar con Node.js y Express, además hay numerosos y excelentes recursos en Internet y en libros - algunos de estos referenciados en Cómo empezar con Node.js (Inglés - StackOverflow) y ¿Cuáles son los mejores recursos para aprender Node.js? (Inglés - Quora).

+
+ +

Guías

+ +
+
Introducción a Express/Node 
+
En el primer artículo de Express respondemos las preguntas "¿Qué es Node?" y "¿Qué es Express?" y te daremos una visión general de qué hace especial al framework web Express. Destacaremos las principales caracteristicas, y mostraremos algunos de los bloques principales de una aplicación Express (aunque en este punto aún no tendrás un entorno de desarrollo para probarlo).
+
Preparando un entorno de desarrollo Node (Express)
+
Ahora que sabes para que sirve Express, te mostraremos como preparar y probar un entorno de desarrollo Node/Express en Windows, Linux (Ubuntu), y Mac OS X. Sin importar el sistema operativo que estes usando, este artículo te proporcionará lo que necesites para empezar a desarrollar aplicaciones Express.
+
Tutorial Express: la web de Librería local
+
El primer artículo en nuestra serie de tutoriales prácticos en los que se explica lo que aprenderás así como una breve introducción al proyecto de "Librería local", que será en el que trabajaremos y desarrollaremos a lo largo de la serie.
+
Tutorial Express 2: Creando el esqueleto de un sitio web 
+
Este artículo muestra cómo puede crear el "esqueleto" de un proyecto web, al cual podremos ir agregando nuestras rutas específicas para el sitio, plantillas/vistas, y bases de datos.
+
Tutorial Express  3: Usando una base de datos (con Mongoose)
+
Este artículo nos introducirá brevemente en las bases de datos para Node/Express. Entonces nos mostrara como podemos usar Mongoose para agregar acceso a una base de datos para el sitio web LocalLibrary. Explica como son declarados los objetos de esquema y modelos, los principales tipos para los campos, y validación básica. También mostrara brevemente algunas de las principales formas con las que puedes acceder a los modelos de datos.
+
Tutorial Express 4: Rutas y controladores
+
En este tutorial prepararemos las rutas (URL handling code) con un manejador de funciones "dummy" para todos los puntos de obtención de recursos que iremos a necesitar en nuestra web LocalLibrary. Al finalizar, tendremos una estructura modular para manejar nuestro código manejador de rutas, que podremos extender con funciones manejadoras reales en los artículos siguientes. También tendremos un muy buen entendimiento de cómo crear rutas modulares usando Express.
+
Tutorial Express 5: Mostrado datos de la librería
+
Ahora estamos listos para añadir paginas donde mostrar los libros de LocalLibrary y otros datos. Las paginas incluirán una página de inicio que muestre cuantos elementos tenemos de cada tipo de modelo, y páginas de lista y detalles para todos nuestros modelos. En el camino iremos ganando experiencia práctica en obtener elementos de la base de datos, y usando plantillas.
+
Tutorial Express 6: Trabajando con formularios
+
En este tutorial mostraremos como trabajar con formularios HTML en Express, usando Pug, y en particular como escribir formularios para crear, actualizar y borrar documentos en la base de datos.
+
Tutorial Express 7: Desplegando para producción
+
Ahora que has creado una increíble web llamada LocalLibrary, la querrás instalar en un servidor web público para que pueda acceder a ella el personal de la librería y los usuarios por Internet. Este artículo te ofrece una visión general de como deberías buscar un alojamiento para tu página web, y que necesitas para tener tu sitio listo para producción.
+
 
+
+ +

Ver también

+ +
+
Instalando LocalLibrary en PWS/Cloud Foundry
+
Este artículo nos da una demonstración práctica de cómo instalar LocalLibrary en la nube Pivotal Web Services PaaS — ésta es una alternativa, muy completa y de código libre, a Heroku, el servicio en la nube PaaS es usado en la parte 7 de este tutorial, listado más adelante. PWS/Cloud Foundry es un recurso digno de revisar si estás en busca de una alternativa a Heroku ( o cualquier otro servicio en la nube PaaS), o simplemente si tienes ganas de intentar algo diferente.
+
+ +

Añadiendo mas tutoriales

+ +
+

Este es el final de los tutoriales (por ahora). Si quisieras extenderlos, hay otros temas interesantes por tratar como:

+ + + +

Y por supuesto, ¡seria excelente tener una tarea de evaluación!

+
diff --git a/files/es/learn/server-side/express_nodejs/introduction/index.html b/files/es/learn/server-side/express_nodejs/introduction/index.html new file mode 100644 index 0000000000..d607c0dd0f --- /dev/null +++ b/files/es/learn/server-side/express_nodejs/introduction/index.html @@ -0,0 +1,498 @@ +--- +title: Introducción a Express/Node +slug: Learn/Server-side/Express_Nodejs/Introduction +tags: + - Aprender + - Express + - MDN + - Node + - Servidor + - javascri + - lado del servidor + - nodejs +translation_of: Learn/Server-side/Express_Nodejs/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Aprendizaje/Lado-Servidor/Express_Nodejs/Ambiente-Desarrollo", "Aprendizaje/Lado-Servidor/Express_Nodejs")}}
+ +

En este primer articulo de Express resolveremos las preguntas "¿Qué es Node?" y "¿Qué es Express?", y te daremos una visión general de que hace especial al framework web "Express". Delinearemos las características principales, y te mostraremos algunos de los principales bloques de construcción de una aplicación en Express (aunque en este punto no tendrás todavía un entorno de desarrollo en que probarlo).

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

Conocimientos básicos de informática. Noción general sobre programación lado servidor de sitios web, y en particular los mecanismos de las interacciones cliente-servidor en sitios web.

+
Objetivo: +

Ganar familiaridad con lo que es Express y cómo encaja con Node, qué funcionalidad proporciona y los pilares de construcción de una aplicación Express.

+
+ +

¿Qué son Express y Node?

+ +

Node (o más correctamente: Node.js) es un entorno que trabaja en tiempo de ejecución, de código abierto, multi-plataforma, que permite a los desarrolladores crear toda clase de herramientas de lado servidor y aplicaciones en JavaScript. La ejecución en tiempo real está pensada para usarse fuera del contexto de un explorador web (es decir, ejecutarse directamente en una computadora o sistema operativo de servidor). Como tal, el entorno omite las APIs de JavaScript específicas del explorador web y añade soporte para APIs de sistema operativo más tradicionales que incluyen HTTP y bibliotecas de sistemas de ficheros.

+ +

Desde una perspectiva de desarrollo de servidor web, Node tiene un gran número de ventajas:

+ + + +

Puedes crear de forma sencilla un servidor web básico para responder cualquier petición simplemente usando el paquete HTTP de Node, como se muestra abajo. Este, creará un servidor y escuchará cualquier clase de peticiones en la URL http://127.0.0.1:8000/; cuando se reciba una petición, se responderá enviando en texto la respuesta: "Hola Mundo!".

+ +
// Se carga el módulo de HTTP
+var http = require("http");
+
+// Creación del servidor HTTP, y se define la escucha
+// de peticiones en el puerto 8000
+http.createServer(function(request, response) {
+
+   // Se define la cabecera HTTP, con el estado HTTP (OK: 200) y el tipo de contenido
+   response.writeHead(200, {'Content-Type': 'text/plain'});
+
+   // Se responde, en el cuerpo de la respuesta con el mensaje "Hello World"
+   response.end('Hola Mundo!\n');
+}).listen(8000);
+
+// Se escribe la URL para el acceso al servidor
+console.log('Servidor en la url http://127.0.0.1:8000/');
+ +

Otras tareas comunes de desarrollo web no están directamente soportadas por el mismo Node. Si quieres añadir el manejo específico de diferentes verbos HTTP (ej, GET, POST, DELETE, etc.), gestionar de forma separada las peticiones por medio de diferentes direcciones URL ("rutas"), servir ficheros estáticos o usar plantillas para crear la respuesta de forma dinámica, necesitarás escribir el código por tí mismo, o ¡puedes evitar reinventar la rueda usando un framework web!

+ +

Express es el framework web más popular de Node, y es la librería subyacente para un gran número de otros frameworks web de Node populares. Proporciona mecanismos para:

+ + + +

A pesar de que Express es en sí mismo bastante minimalista, los desarrolladores han creado paquetes de middleware compatibles para abordar casi cualquier problema de desarrollo web. Hay librerías para trabajar con cookies, sesiones, inicios de sesión de usuario, parámetros URL, datos POST, cabeceras de seguridad y muchos más. Puedes encontrar una lista de paquetes middleware mantenida por el equipo de Express en Express Middleware (junto con una lista de algunos de los paquetes más populares de terceros).

+ +
+

Nota: esta flexibilidad es una espada de doble filo. Hay paquetes de middleware para abordar casi cualquier problema o requerimiento, pero deducir cuáles son los paquetes adecuados a usar algunas veces puede ser un auténtico reto. Tampoco hay una "forma correcta" de estructurar una aplicación, y muchos ejemplos que puedes encontrar en la Internet no son óptimos, o sólo muestran una pequeña parte de lo que necesitas hacer para desarrollar una aplicación web.

+
+ +

¿Dónde comenzó?

+ +

Node fué lanzado inicialmente, sólo para Linux, en 2009. El gestor de paquetes NPM fué lanzado en 2010, y el soporte nativo para Windows fue añadido en 2012. La versión actual LTS (Long Term Suppport) es Node v12.18.0 mientras que la última versión es Node 14.4.0. Ésto es sólo una pequeña foto de una historia muy rica; profundiza en Wikipedia si quieres saber más).

+ +

Express fue lanzado inicialmente en Noviembre de 2010 y está ahora en la versión 4.17.1 de la API. Puedes comprobar en el changelog la información sobre cambios en la versión actual, y en GitHub notas de lanzamiento históricas más detalladas.

+ +

¿Qué popularidad tiene Node/Express?

+ +

La popularidad de un framework web es importante porque es un indicador de se continuará manteniendo y qué recursos tienen más probabilidad de estar disponibles en términos de documentación, librerías de extensiones y soporte técnico.

+ +

No existe una medida disponible de inmediato y definitiva de la popularidad de los frameworks de lado servidor (aunque sitios como Hot Frameworks intentan asesorar sobre popularidad usando mecanismos como contar para cada plataforma el número de preguntas sobre proyectos en GitHub y StackOverflow). Una pregunta mejor es si Node y Express son lo "suficientemente populares" para evitar los problemas de las plataformas menos populares. ¿Continúan evolucionando? ¿Puedes conseguir la ayuda que necesitas? ¿Hay alguna posibilidad de que consigas un trabajo remunerado si aprendes Express?

+ +

De acuerdo con el número de compañías de perfil alto que usan Express, el número de gente que contribuye al código base, y el número de gente que proporciona soporte tanto libre como pagado, podemos entonces decir que sí, !Express es un framework popular!

+ +

¿Es Express dogmático?

+ +

Los frameworks web frecuentemente se refieren a sí mismos como "dogmáticos" ("opinionated") o "no dogmáticos" ("unopinionated").

+ +

Los frameworks dogmáticos son aquellos que opinan acerca de la "manera correcta" de gestionar cualquier tarea en particular. Ofrecen soporte para el desarrollo rápido en un dominio en particular (resolver problemas de un tipo en particular) porque la manera correcta de hacer cualquier cosa está generalmente bien comprendida y bien documentada. Sin embargo pueden ser menos flexibles para resolver problemas fuera de su dominio principal, y tienden a ofrecer menos opciones para elegir qué componentes y enfoques pueden usarse.

+ +

Los framewoks no dogmáticos, en contraposición, tienen muchas menos restricciones sobre el modo mejor de unir componentes para alcanzar un objetivo, o incluso qué componentes deberían usarse. Hacen más fácil para los desarrolladores usar las herramientas más adecuadas para completar una tarea en particular, si bien al coste de que necesitas encontrar esos componentes por tí mismo.
+
+ Express es no dogmático, transigente. Puedes insertar casi cualquier middleware compatible que te guste dentro de la cadena de manejo de la petición, en casi cualquier orden que te apetezca. Puedes estructurar la app en un fichero o múltiples ficheros y usar cualquier estructura de directorios. ¡Algunas veces puedes sentir que tienes demasiadas opciones!

+ +

¿Cómo es el código para Express?

+ +

En sitios web o aplicaciones web dinámicas, que accedan a bases de datos, el servidor espera a recibir peticiones HTTP del navegador (o cliente). Cuando se recibe una petición, la aplicación determina cuál es la acción adecuada correspondiente, de acuerdo a la estructura de la URL y a la información (opcional) indicada en la petición con los métodos POST o GET. Dependiendo de la acción a realizar, puede que se necesite leer o escribir en la base de datos, o realizar otras acciones necesarias para atender la petición correctamente. La aplicación ha de responder al navegador, normalmente, creando una página HTML dinámicamente para él, en la que se muestre la información pedida, usualmente dentro de un elemento especifico para este fin, en una plantilla HTML.

+ +

Express posee métodos para especificar que función ha de ser llamada dependiendo del verbo HTTP usado en la petición (GET, POST, SET, etc.) y la estructura de la URL ("ruta"). También tiene los métodos para especificar que plantilla ("view") o gestor de visualización utilizar, donde están guardadas las plantillas de HTML que han de usarse  y como  generar la visualización adecuada para cada caso. El middleware de Express, puede usarse también para añadir funcionalidades para la gestión de cookies, sesiones y usuarios, mediante el uso de parámetros, en los métodos POST/GET.  Puede utilizarse además cualquier sistema de trabajo con bases de datos, que sea soportado por Node (Express no especifica ningún método preferido para trabajar con bases de datos). 

+ +

En las siguientes secciones, se explican algunos puntos comunes que se pueden encontrar cuando se trabaja con código de Node y Express.

+ +

Hola Mundo! - en Express

+ +

Primero consideremos el tradicional ejemplo de Hola Mundo! (se comentará cada parte a continuación).

+ +
+

Consejo: Si tiene Node y Express instalado (o piensa instalarlos posteriormente) puede guardar este código en un archivo llamado app.js y ejecutarlo posteriormente en la linea de comandos invocándolo mediante: node app.js. 

+
+ +
var express = require('express');
+var app = express();
+
+app.get('/', function(req, res) {
+  res.send('Hola Mundo!');
+});
+
+app.listen(3000, function() {
+  console.log('Aplicación ejemplo, escuchando el puerto 3000!');
+});
+
+ +

Las primeras dos líneas incluyen (mediante la orden require()) el módulo de Express y crean una aplicación de Express. Este elemento se denomina comúnmente app, y posee métodos para el enrutamiento de las peticiones HTTP, configuración del 'middleware', y visualización de las vistas de HTML, uso del motores de 'templates', y gestión de las configuraciones de las aplicaciones  que controlan la aplicación (por ejemplo el entorno, las definiciones para enrutado ... etcetera.)

+ +

Las líneas que siguen en el código (las tres líneas que comienzan con app.get) muestran una definición de ruta que se llamará cuando se reciba una petición  HTTP GET con una dirección ('/') relativa al directorio raíz. La función 'callback' coge una petición y una respuesta como argumentos, y ejecuta un send() en la respuesta, para enviar la cadena  de caracteres: "Hola Mundo!".

+ +

El bloque final de código, define y crea el servidor, escuchando el puerto 3000 e imprime un comentario en la consola. Cuando se está ejecutando el servidor, es posible ir hasta la dirección  localhost:3000  en un navegador, y ver como el servidor de este ejemplo devuelve el mensaje de respuesta.

+ +

Importando y creando módulos

+ +

Un modulo es una librería o archivo JavaScript que puede ser importado dentro de otro código utilizando la función require() de Node.  Por sí mismo, Express es un modulo,  como lo son el middleware y las librerías de bases de datos que se utilizan en las aplicaciones Express.

+ +

El código mostrado abajo, muestra como puede importarse un modulo con base a su nombre, como ejemplo se utiliza el  framework Express . Primero se invoca la función require(), indicando como parámetro el nombre del módulo o librería como una cadena ('express'),  posteriormente se invoca el objeto obtenido para crear una aplicación Express.

+ +

Posteriormente, se puede acceder a las propiedades y funciones del objeto Aplicación.

+ +
var express = require('express');
+var app = express();
+
+ +

También podemos crear nuestros propios módulos que puedan posteriormente ser importados de la misma manera.

+ +
+

Consejo:  Usted puede desear crear sus propios módulos, esto le permitirá organizar su código en partes más administrables; una aplicación que reside en un solo archivo es difícil de entender y manejar.

+ +

El utilizar módulos independientes también le permite administrar el espacio de nombres, de esta manera unicamente las variables que exporte explícitamente son importadas cuando utilice un módulo.

+
+ +

Para hacer que los objetos esten disponibles fuera de un modulo, solamente es necesario asignarlos al objeto exports. Por ejemplo, el modulo mostrado a continuación square.js  es un archivo que exporta los métodos area() y perimeter() :

+ +
exports.area = function(width) { return width * width; };
+exports.perimeter = function(width) { return 4 * width; };
+
+ +

Nosotros podemos importar este módulo utilizando la función require(), y entonces podremos invocar los métodos exportados de la siguiente manera:

+ +
// Utilizamos la función require() El nombre del archivo se ingresa sin la extensión (opcional) .js
+var square = require('./square');
+// invocamos el metodo area()
+console.log('El área de un cuadrado con lado de 4 es ' + square.area(4));
+ +
+

Nota: Usted también puede especificar una ruta absoluta a la  ubicación del módulo  (o un nombre como se realizó inicialmente). 

+
+ +

Si usted desea exportar completamente un objeto en una asignación en lugar de construir cada propiedad por separado, debe asignarlo al módulo module.exports como se muestra a continuación (también puede hacer esto al inicio de un constructor o de otra función.)

+ +
module.exports = {
+  area: function(width) {
+    return width * width;
+  },
+
+  perimeter: function(width) {
+    return 4 * width;
+  }
+};
+
+ +

Para más información acerca de módulos vea Modulos (Node API docs).

+ +

Usando APIs asíncronas

+ +

El código JavaScript usa frecuentemente APIs asíncronas antes que sincrónicas para operaciones que tomen algún tiempo en completarse. En una API sincrónica cada operación debe completarse antes de que la siguiente pueda comenzar. Por ejemplo, la siguiente función de registro es síncrona, y escribirá en orden el texto en la consola (Primero, Segundo).

+ +
console.log('Primero');
+console.log('Segundo');
+
+ +

En contraste, en una API asincrónica, la API comenzará una operación e inmediatamente retornará (antes de que la operación se complete). Una vez que la operación finalice, la API usará algún mecanismo para realizar operaciones adicionales. Por ejemplo, el código de abajo imprimirá "Segundo, Primero" porque aunque el método setTimeout() es llamado primero y retorna inmediatamente, la operación no se completa por varios segundos.

+ +
setTimeout(function() {
+   console.log('Primero');
+   }, 3000);
+console.log('Segundo');
+
+ +

Usar APIs asíncronas sin bloques es aun mas importante en Node que en el navegador, porque Node es un entorno de ejecución controlado por eventos de un solo hilo. "Un solo hilo" quiere decir que todas las peticiones al servidor son ejecutadas en el mismo hilo ( en vez de dividirse en procesos separados). Este modelo es extremadamente eficiente en términos de velocidad y recursos del servidor, pero eso significa que si alguna de sus funciones llama a métodos sincrónicos que tomen demasiado tiempo en completarse, bloquearan no solo la solicitud actual, sino también cualquier otra petición que este siendo manejada por tu aplicación web.

+ +

Hay muchas maneras para una API asincrónica de notificar a su aplicación que se ha completado. La manera mas común es registrar una función callback cuando usted invoca a una API asincrónica, la misma será llamada de vuelta cuando la operación se complete. Éste es el enfoque utilizado anteriormente.

+ +
+

Tip: Usar "callbacks" puede ser un poco enmarañado si usted tiene una secuencia de operaciones asíncronas dependientes que deben ser llevadas a cabo en orden, porque esto resulta en múltiples niveles de "callbacks" anidadas. Este problema es comúnmente conocido como "callback hell" (callback del infierno). Este problema puede ser reducido con buenas practicas de código (vea http://callbackhell.com/), usando un modulo como async, o incluso avanzando a características de ES6 como las promesas.

+
+ +
+

Nota: Una convención común para Node y Express es usar callbacks de error primero. En esta convención el primer valor en su función callback es un error, mientras que los argumentos subsecuentes contienen datos correctos. Hay una buena explicación de porque este enfoque es útil en este blog: The Node.js Way - Understanding Error-First Callbacks (fredkschott.com).

+
+ +

Creando manejadores de rutas

+ +

En nuestro ejemplo anterior de "Hola Mundo!" en Express (véase mas arriba), definimos una función (callback) manejadora de ruta para peticiones HTTP GET a la raíz del sitio ('/').

+ +
app.get('/', function(req, res) {
+  res.send('Hello World!');
+});
+
+ +

La función callback toma una petición y una respuesta como argumentos. En este caso el método simplemente llama a send() en la respuesta para retornar la cadena "Hello World!". Hay un número de otros métodos de respuesta para finalizar el ciclo de solicitud/respuesta, por ejemplo podrá llamar a res.json() para enviar una respuesta JSON o res.sendFile() para enviar un archivo.

+ +
+

JavaScript tip: Usted puede utilizar cualquier nombre que quiera para los argumentos en las funciones callback; cuando la callback es invocada el primer argumento siempre sera la petición y el segundo siempre sera la respuesta. Tiene sentido nombrarlos de manera que pueda identificar el objeto con el que esta trabajando en el cuerpo de la callback.

+
+ +

El objeto que representa una aplicación de Express, también posee métodos para definir los manejadores de rutas para el resto de los verbos HTTP: post(), put(), delete(), options(), trace(), copy(), lock(), mkcol(), move(), purge(), propfind(), proppatch(), unlock(), report(), mkactivity(), checkout(), merge(), m-search(), notify(), subscribe(), unsubscribe(), patch(), search(), y connect().

+ +

Hay un método general para definir las rutas:  app.all(), el cual será llamado en respuesta a cualquier método HTTP. Se usa para cargar funciones del middleware en una dirección particular para todos los métodos de peticiones. El siguiente ejemplo (de la documentación de Express) muestra el uso de los manejadores a  /secret  sin tener en cuenta el verbo HTTP utilizado (siempre que esté definido por el módulo http).

+ +
app.all('/secret', function(req, res, next) {
+  console.log('Accediendo a la seccion secreta ...');
+  next(); // pasa el control al siguiente manejador
+});
+ +

Las rutas le permiten igualar patrones particulares de caracteres en la URL, y extraer algunos valores de ella y pasarlos como parámetros al manejador de rutas (como atributo del objeto petición pasado como parámetro).

+ +

Usualmente es útil agrupar manejadores de rutas para una parte del sitio juntos y accederlos usando un prefijo de ruta en común. (Ej: un sitio con una Wiki podría tener todas las rutas relacionadas a dicha sección en un archivo y siendo accedidas con el prefijo de ruta /wiki/. En Express esto se logra usando el objeto express.Router. Ej: podemos crear nuestra ruta wiki en un módulo llamado wiki.js, y entonces exportar el objeto Router, como se muestra debajo:

+ +
// wiki.js - Modulo de rutas Wiki
+
+var express = require('express');
+var router = express.Router();
+
+// Home page route
+router.get('/', function(req, res) {
+  res.send('Página de inicio Wiki');
+});
+
+// About page route
+router.get('/about', function(req, res) {
+  res.send('Acerca de esta wiki');
+});
+
+module.exports = router;
+
+ +
+

Nota: Agregar rutas al objeto Router es como agregar rutas al objeto app ( como se vio anteriormente).

+
+ +

Para usar el router en nuestro archivo app principal, necesitamos require() el módulo de rutas (wiki.js), entonces llame use() en la aplicación Express para agregar el Router al software intermediario que maneja las rutas. Las dos rutas serán accesibles entonces desde /wiki/ y /wiki/about/.

+ +
var wiki = require('./wiki.js');
+// ...
+app.use('/wiki', wiki);
+ +

Le mostraremos mucho más sobre como trabajar con rutas, y en particular, acerca de como usar el Router, más adelante en la sección Rutas y controladores .

+ +

Usando middleware

+ +

El "middleware" es ampliamente utilizado en las aplicaciones de Express: desde tareas para servir archivos estáticos, a la gestión de errores o la compresión de las respuestas HTTP. Mientras las funciones de enrutamiento, con el objeto express.Router, se encargan del ciclo petición-respuesta, al gestionar la respuesta adecuada al cliente, las funciones de middleware normalmente realizan alguna operación al gestionar una petición o respuesta y a continuación llaman a la siguiente función en la "pila", que puede ser otra función de middleware  u otra función de enrutamiento. El orden en el que las funciones de middleware son llamadas depende del desarrollador de la aplicación.

+ +
+

Nota: El middleware puede realizar cualquier operación: hacer cambios a una petición, ejecutar código, realizar cambios a la petición o al objeto pedido, puede también finalizar el ciclo de petición-respuesta. Si no finaliza el ciclo debe llamar a la función next() para pasar el control de la ejecución a la siguiente función del middleware ( o a la petición quedaría esperando una respuesta ... ). 

+
+ +

La mayoría de las aplicaciones usan middleware desarrollado por terceras partes, para simplificar funciones habituales en el desarrollo web, como puede ser: gestión de cookies, sesiones, autentificado de usuarios, peticiones POST  y datos en JSON, registros de eventos, etc. Puede encontrar en el siguiente enlace una  lista de middleware mantenido por el equipo de Express (que también incluye otros paquetes populares de terceras partes). Las librerías de Express están disponibles con la aplicación NPM (Node Package Manager).

+ +

Para usar estas colecciones, primero ha de instalar la aplicación usando NPM. Por ejemplo para instalar el registro de peticiones HTTP morgan, se haría con el comando Bash:  

+ +
$ npm install morgan
+
+ +

Entonces podría llamar a la función use() en un objeto de aplicación Express para utilizar este middleware a su aplicación. 

+ +
var express = require('express');
+var logger = require('morgan');
+var app = express();
+app.use(logger('dev'));
+...
+ +
+

Note: Las funciones Middleware y routing son llamadas en el orden que son declaradas. Para algunos middleware el orden es importante (por ejemplo si el middleware de sesion depende del middleware de cookie, entonces el manejador de cookie tiene que ser llamado antes). Casi siempre es el caso que el middleware es llamado antes de configurar las rutas, o tu manejador de rutas no tendra acceso a la funcionalidad agregada por tu middleware.

+
+ +

Tu puedes escribir tu propia funcion middleware, y si quieres hacerlo así (solo para crear código de manejo de error). La única diferencia entre una función middleware y un callback manejador de rutas es que las funciones middleware tienen un tercer argumento next, cuyas funciones  middleware son esperadas para llamarlas si ellas no completan el ciclo request (cuando la función midleware es llamada, esta contiene la próxima función que debe ser llamada).

+ +

Puede agregar una función middleware a la cadenan de procesamiento con cualquier app.use() o app.add(), dependiendo de si quiere aplicar el middleware a todas las respuestas o a respuestas con un verbo particular HTTP (GET, POST, etc). Usted especifica rutas, lo mismo en ambos casos, aunque la ruta es opcional cuando llama app.use().

+ +

El ejemplo de abajo muestra como puede agregar la función middleware usando ambos métodos, y con/sin una ruta.

+ +
var express = require('express');
+var app = express();
+
+// An example middleware function
+var a_middleware_function = function(req, res, next) {
+  // ... perform some operations
+  next(); // Call next() so Express will call the next middleware function in the chain.
+}
+
+// Function added with use() for all routes and verbs
+app.use(a_middleware_function);
+
+// Function added with use() for a specific route
+app.use('/someroute', a_middleware_function);
+
+// A middleware function added for a specific HTTP verb and route
+app.get('/', a_middleware_function);
+
+app.listen(3000);
+ +
+

JavaScript Tip: Arriba declaramos la función middleware separadamente y la configuramos como el callback. En nuestra función previous manejadora de ruta declaramos la función callback cuando esta fué usada. En JavaScript, cuealquer aproximación es valida.

+
+ +

La documentación Express tiene mucha mas documentación excelente acerca del uso y escritura de middleware Express.

+ +

Sirviendo archivos estáticos

+ +

Puede utilizar el middleware express.static para servir archivos estáticos, incluyendo sus imagenes, CSS y JavaScript (static() es la única función  middleware que es actualmente parte de Express). Por ejemplo, podria utilizar la linea de abajo para servir imágenes, archivos CSS, y archivos JavaScript desde un directorio nombrado 'public' al mismo nivel desde donde llama a node:

+ +
app.use(express.static('public'));
+
+ +

Cualesquiere archivos en el directorio público son servidos al agregar su nombre de archivo (relativo a la ubicación del directorio "público" ) de la ubicación URL. Por ejemplo:

+ +
http://localhost:3000/images/dog.jpg
+http://localhost:3000/css/style.css
+http://localhost:3000/js/app.js
+http://localhost:3000/about.html
+
+ +

Puede llamar static() multiples ocasiones a servir multiples directorios. Si un archivo no puede ser encontrado por una función middleware entonces este simplemente será pasado en la subsequente middleware (el orden en que el middleware está basado en  su orden de declaración).

+ +
app.use(express.static('public'));
+app.use(express.static('media'));
+
+ +

Tambien puede crear un prefijo virtual para sus URLs estáticas, aun más teniendo los archivos agregados en la ubicación URL. Por ejemplo, aqui especificamos a mount path tal que los archivos son bajados con el prefijo "/media":

+ +
app.use('/media', express.static('public'));
+
+ +

Ahora, puede bajar los archivos que estan en el directorio publico del path con prefijo /media.

+ +
http://localhost:3000/media/images/dog.jpg
+http://localhost:3000/media/video/cat.mp4
+http://localhost:3000/media/cry.mp3
+
+ +

Para más información, ver Sirviendo archivos estáticos en Express.

+ +

Manejando errores

+ +

Los errores majejados por una o más funciones especiales middleware que tienen cuatro argumentos, en lugar de las usuales tres: (err, req, res, next). For example:

+ +
app.use(function(err, req, res, next) {
+  console.error(err.stack);
+  res.status(500).send('Something broke!');
+});
+
+ +

Estas pueden devolver cualquier contenido, pero deben ser llamadas despues de todas las otras app.use() llamadas de rutas tal que ellas son las últimas middleware en el proceso de manejo de request!

+ +

Express viene con un manejador de error integrado, el que se ocupa de error remanente que pudiera ser encontrado en la app. Esta función middleware manejador de error esta agregada al final del stack de funciones middleware. Si pasa un error a next() y no lo maneja en un manejador de error, este sera manejado por el manejador de error integrado; el error sera escrito en el cliente con el rastreo de pila.

+ +
+

Note: El rastreo de pila no esta incluido en el ambiente de producción. Para ejecutarlo en modo de producción necesita configurar la variable de ambiente NODE_ENV to 'production'.

+
+ +
+

Note: HTTP404 y otros codigos de estatus de "error" no son tratados como errores. Si quiere manejar estos, puede agregar una función middleware para hacerlo. Para mas información vea las FAQ.

+
+ +

Para mayor información vea Manejo de error (Docs. Express).

+ +

Usando Bases de datos

+ +

Las apps de Express pueden usar cualquier mecanismo de bases de datos suportadas por Node (Express en sí mismo no define ningúna conducta/requerimiento specifico adicional para administración de bases de datos). Hay muchas opciones, incluyendo PostgreSQL, MySQL, Redis, SQLite, MongoDB, etc.

+ +

Con el propósito de usar éste, debe primero instalar el manejador de bases de datos utilizando NPM. Por ejemplo, para instalar el manejador para el popular NoSQL MongoDB querría utilizar el comando:

+ +
$ npm install mongodb
+
+ +

La base de datos por si misma puede ser instalada localmente o en un servidor de la nube. En su codigo Express requiere el manejador, conectarse a la base de datos, y entonces ejecutar operaciones crear, leer, actualizar, y borrar (CLAB). }El ejemplo de abajo (de la documentación Express documentation) muestra como puede encontrar registros en la colección "mamiferos" usando MongoDB.

+ +
var MongoClient = require('mongodb').MongoClient;
+
+MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
+  if (err) throw err;
+
+  db.collection('mammals').find().toArray(function (err, result) {
+    if (err) throw err;
+
+    console.log(result);
+  });
+});
+ +

Otra aproximación popular es acceder a su base de datos indirectamente, via an Mapeo Objeto Relacional ("MOR"). En esta aproximación usted define sus datos como "objetos" o "modelos" y el MOR mapea estos a través del deliniamiento basico de la base de datos. Esta aproximación tiene el beneficio de que como un desrrollador puede continuar pensando en términos de objetos de JavaScript mas que en semántica de bases de datos, y en esto hay un lugar obvio para ejecutar la validación y chequeo de entrada de datos. Hablaremos más de bases de datos en un artículo posterior.

+ +

Para más información ver Integracion de Bases de Datos (docs Express ).

+ +

Renderización de data (vistas)

+ +

El Motor de plantilla (referido como "motor de vistas" por Express) le permite definir la estructura de documento de salida en una plantilla, usando marcadores de posición para datos que seran llenados cuando una pagina es generada. Las plantillas son utilizadas generalmete para crear HTML, pero tambien pueden crear otros tipos de documentos. Express tiene soporte para  numerosos motores de plantillas, y hay una util comparación de los motores más populares aquí: Comparando Motores de Plantillas de JavaScript: Jade, Mustache, Dust and More.

+ +

En su código de configuración de su aplicación usted configura el motor de plantillas para usar y su localización Express podiría buscar plantillas usando las configuraciones de 'vistas' y 'motores de vistas', mostrado abajo (tendría también que instalar el paquete conteniendo su librería de plantillas!)

+ +
var express = require('express');
+var app = express();
+
+// Set directory to contain the templates ('views')
+app.set('views', path.join(__dirname, 'views'));
+
+// Set view engine to use, in this case 'some_template_engine_name'
+app.set('view engine', 'some_template_engine_name');
+
+ +

La apariencia de la plantilla dependera de qué motor use. Asumiendo que tiene un archivo de plantillas nombrado "index.<template_extension>" este contiene placeholders para variables de datos nombradas 'title' y "message", podría llamar Response.render() en una función manejadora de rutas para crear y enviar la HTML response:

+ +
app.get('/', function(req, res) {
+  res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
+});
+ +

Para más información vea Usando motores de plantillas con Express (docs Express ).

+ +

Estructura de Archivos

+ +

Express no hace asunciones en términos de estructura o que componentes usted usa. Rutas, vistas, archivos estáticos, y otras lógicas de aplicación específica puede vivir en cualquier número de archivos con cualquier estructura de directorio. Mientras que esto es perfectamente posible, se puede tener toda la aplicación en un solo archivo, en Express, tipicamente esto tiene sentido al desplegar su aplicacion dentro de archivos basados en función (e.g. administracion de cuentas, blogs, tableros de discusion) y dominio de problema arquitectonico (e.g. modelo, vista or controlador si tu pasas a estar usando una arquitectura MVC).

+ +

En un tópico posterior usaremos el Generador de Aplicaciones Express Application Generator, el que crea un esquelo de una app modular que podemos facilmente extender para crear aplicaciones web.

+ + + +

Resumen

+ +

¡Felicitaciones, ha completado el primer paso en su viaje Express/Node! Ahora debes comprender los principales beneficios de Express y Node, y más o menos cómo se verían las partes principales de una aplicación Express (rutas, middleware, manejo de errores y plantillas). ¡También debe comprender que con Express como un framework unopinionated, la forma en que une estas partes y las bibliotecas que usa dependen en gran medida de usted!
+
+ Por supuesto, Express es deliberadamente un un framework de aplicaciones web muy ligero, por lo que gran parte de sus beneficios y potencial proviene de bibliotecas y características de terceros. Lo veremos con más detalle en los siguientes artículos. En nuestro próximo artículo, veremos cómo configurar un entorno de desarrollo de Node, para que pueda comenzar a ver código de Express en acción.

+ +

Ver también

+ + + +
{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
+ +

En este modulo

+ + diff --git a/files/es/learn/server-side/express_nodejs/mongoose/index.html b/files/es/learn/server-side/express_nodejs/mongoose/index.html new file mode 100644 index 0000000000..f5701c468a --- /dev/null +++ b/files/es/learn/server-side/express_nodejs/mongoose/index.html @@ -0,0 +1,801 @@ +--- +title: 'Express Tutorial 3: Utilizando bases de datos (con Mongoose)' +slug: Learn/Server-side/Express_Nodejs/mongoose +translation_of: Learn/Server-side/Express_Nodejs/mongoose +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}
+ +

Este artículo introduce brevemente las bases de datos así como su uso en aplicaciones Node/Express. Despues, profundiza en el uso específico de Mongoose en el proyecto LocalLibrary. Explica como se declaran y utilizan los esquemas modelo-objeto, los principales campos de datos y su validación básica. También muestra brevemente algunas de las muchas formas para acceder y modificar los datos.

+ + + + + + + + + + + + +
PrerequisitosExpress Tutorial 2: Creando un esqueleto web
Objetivo:Ser capaz de crear, diseñar y utilizar bases de datos en Node/Express utilizando Mongoose
+ +

Overview

+ +

Library staff will use the Local Library website to store information about books and borrowers, while library members will use it to browse and search for books, find out whether there are any copies available, and then reserve or borrow them. In order to store and retrieve information efficiently, we will store it in a database.

+ +

Las aplicaciones Express pueden utilizar diferentes bases de datos, y existen diferentes aproximaciones que se pueden utilizar para realizar operaciones CRUD (Create, Read, Update and Delete). Este tutorial proporciona una vista general sobre algunas de las opciones disponibles, para a continuación mostrar en detalle los mecanismos elegidos en particular.

+ +

What databases can I use?

+ +

Express apps can use any database supported by Node (Express itself doesn't define any specific additional behaviour/requirements for database management). There are many popular options, including PostgreSQL, MySQL, Redis, SQLite, and MongoDB.

+ +

When choosing a database, you should consider things like time-to-productivity/learning curve, performance, ease of replication/backup, cost, community support, etc. While there is no single "best" database, almost any of the popular solutions should be more than acceptable for a small-to-medium-sized site like our Local Library.

+ +

For more information on the options see: Database integration (Express docs).

+ +

What is the best way to interact with a database?

+ +

There are two approaches for interacting with a database: 

+ + + +

The very best performance can be gained by using SQL, or whatever query language is supported by the database. ODM's are often slower because they use translation code to map between objects and the database format, which may not use the most efficient database queries (this is particularly true if the ODM supports different database backends, and must make greater compromises in terms of what database features are supported).

+ +

The benefit of using an ORM is that programmers can continue to think in terms of JavaScript objects rather than database semantics — this is particularly true if you need to work with different databases (on either the same or different websites). They also provide an obvious place to perform validation and checking of data.

+ +
+

Tip:  Using ODM/ORMs often results in lower costs for development and maintenance! Unless you're very familiar with the native query language or performance is paramount, you should strongly consider using an ODM.

+
+ +

What ORM/ODM should I use?

+ +

There are many ODM/ORM solutions available on the NPM package manager site (check out the odm and orm tags for a subset!).

+ +

A few solutions that were popular at the time of writing are:

+ + + +

As a general rule you should consider both the features provided and the "community activity" (downloads, contributions, bug reports, quality of documentation, etc.) when selecting a solution. At time of writing Mongoose is by far the most popular ORM, and is a reasonable choice if you're using MongoDB for your database.

+ +

Using Mongoose and MongoDb for the LocalLibrary

+ +

For the Local Library example (and the rest of this topic) we're going to use the Mongoose ODM to access our library data. Mongoose acts as a front end to MongoDB, an open source NoSQL database that uses a document-oriented data model. A “collection” of “documents”, in a MongoDB database, is analogous to a “table” of “rows” in a relational database.

+ +

This ODM and database combination is extremely popular in the Node community, partially because the document storage and query system looks very much like JSON, and is hence familiar to JavaScript developers.

+ +
+

Tip: You don't need to know MongoDB in order to use Mongoose, although parts of the Mongoose documentation are easier to use and understand if you are already familiar with MongoDB.

+
+ +

The rest of this tutorial shows how to define and access the Mongoose schema and models for the LocalLibrary website example.

+ +

Designing the LocalLibrary models

+ +

Before you jump in and start coding the models, it's worth taking a few minutes to think about what data we need to store and the relationships between the different objects.

+ +

We know that we need to store information about books (title, summary, author, genre, ISBN) and that we might have multiple copies available (with globally unique ids, availability statuses, etc.). We might need to store more information about the author than just their name, and there might be multiple authors with the same or similar names. We want to be able to sort information based on book title, author, genre, and category.

+ +

When designing your models it makes sense to have separate models for every "object" (group of related information). In this case the obvious objects are books, book instances, and authors.

+ +

You might also want to use models to represent selection-list options (e.g. like a drop down list of choices), rather than hard coding the choices into the website itself — this is recommended when all the options aren't known up front or may change. The obvious candidate for a model of this type is the book genre (e.g. Science Fiction, French Poetry, etc.)

+ +

Once we've decided on our models and fields, we need to think about the relationships between them.

+ +

With that in mind, the UML association diagram below shows the models we'll define in this case (as boxes). As discussed above, we've created models for book (the generic details of the book), book instance (status of specific physical copies of the book available in the system), and author. We have also decided to have a model for genre, so that values can be created dynamically. We've decided not to have a model for the BookInstance:status — we will hard code the acceptable values because we don't expect these to change. Within each of the boxes you can see the model name, the field names and types, and also the methods and their return types.

+ +

The diagram also shows the relationships between the models, including their multiplicities. The multiplicities are the numbers on the diagram showing the numbers (maximum and minimum) of each model that may be present in the relationship. For example, the connecting line between the boxes shows that Book and a Genre are related. The numbers close to the Book model show that a Genre must have zero or more Book (as many as you like), while the numbers on the other end of the line next to the Genre show that it can have zero or more associated genre.

+ +
+

Note: As discussed in our Mongoose primer below it is often better to have the field that defines the relationship between the documents/models in just one model (you can still find the reverse relationship by searching for the associated _id in the other model). Below we have chosen to define the relationship between Book/Genre and Book/Author in the Book schema, and the relationship between the Book/BookInstance in the BookInstance Schema. This choice was somewhat arbitrary — we could equally well have had the field in the other schema.

+
+ +

Mongoose Library Model with correct cardinality

+ +
+

Note: The next section provides a basic primer explaining how models are defined and used. As you read it, consider how we will construct each of the models in the diagram above.

+
+ +

Mongoose primer

+ +

This section provides an overview of how to connect Mongoose to a MongoDB database, how to define a schema and a model, and how to make basic queries. 

+ +
+

Note: This primer is "heavily influenced" by the Mongoose quick start on npm and the official documentation.

+
+ +

Installing Mongoose and MongoDB

+ +

Mongoose is installed in your project (package.json) like any other dependency — using NPM. To install it, use the following command inside your project folder:

+ +
npm install mongoose
+
+ +

Installing Mongoose adds all its dependencies, including the MongoDB database driver, but it does not install MongoDB itself. If you want to install a MongoDB server then you can download installers from here for various operating systems and install it locally. You can also use cloud-based MongoDB instances.

+ +
+

Note: For this tutorial we'll be using the mLab cloud-based database as a service sandbox tier to provide the database. This is suitable for development, and makes sense for the tutorial because it makes "installation" operating system independent (database-as-a-service is also one approach you might well use for your production database).

+
+ +

Connecting to MongoDB

+ +

Mongoose requires a connection to a MongoDB database. You can require() and connect to a locally hosted database with mongoose.connect(), as shown below.

+ +
//Import the mongoose module
+var mongoose = require('mongoose');
+
+//Set up default mongoose connection
+var mongoDB = 'mongodb://127.0.0.1/my_database';
+mongoose.connect(mongoDB);
+// Get Mongoose to use the global promise library
+mongoose.Promise = global.Promise;
+//Get the default connection
+var db = mongoose.connection;
+
+//Bind connection to error event (to get notification of connection errors)
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+ +

You can get the default Connection object with mongoose.connection. Once connected, the open event is fired on the Connection instance.

+ +
+

Tip: If you need to create additional connections you can use mongoose.createConnection(). This takes the same form of database URI (with host, database, port, options etc.) as connect() and returns a Connection object).

+
+ +

Defining and creating models

+ +

Models are defined using the Schema interface. The Schema allows you to define the fields stored in each document along with their validation requirements and default values. In addition, you can define static and instance helper methods to make it easier to work with your data types, and also virtual properties that you can use like any other field, but which aren't actually stored in the database (we'll discuss a bit further below).

+ +

Schemas are then "compiled" into models using the mongoose.model() method. Once you have a model you can use it to find, create, update, and delete objects of the given type.

+ +
+

Note: Each model maps to a collection of documents in the MongoDB database. The documents will contain the fields/schema types defined in the model Schema.

+
+ +

Defining schemas

+ +

The code fragment below shows how you might define a simple schema. First you require() mongoose, then use the Schema constructor to create a new schema instance, defining the various fields inside it in the constructor's object parameter.

+ +
//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string: String,
+    a_date: Date
+});
+
+ +

In the case above we just have two fields, a string and a date. In the next sections we will show some of the other field types, validation, and other methods.

+ +

Creating a model

+ +

Models are created from schemas using the mongoose.model() method:

+ +
// Define schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string: String,
+    a_date: Date
+});
+
+// Compile model from schema
+var SomeModel = mongoose.model('SomeModel', SomeModelSchema );
+ +

The first argument is the singular name of the collection that will be created for your model (Mongoose will create the database collection for the above model SomeModel above), and the second argument is the schema you want to use in creating the model.

+ +
+

Note: Once you've defined your model classes you can use them to create, update, or delete records, and to run queries to get all records or particular subsets of records. We'll show you how to do this in the Using models section, and when we create our views.

+
+ +

Tipos de esquema (campos)

+ +

Un esquema puede tener un número de campos arbitrario  — cada uno representa un campo en los documentos almacenados en MongoDB. A continuación se muestra un ejemplo de esquema con varios de los tipos de campos más comunes y cómo se declaran.

+ +
var schema = new Schema(
+{
+  name: String,
+  binary: Buffer,
+  living: Boolean,
+  updated: { type: Date, default: Date.now },
+  age: { type: Number, min: 18, max: 65, required: true },
+  mixed: Schema.Types.Mixed,
+  _someId: Schema.Types.ObjectId,
+  array: [],
+  ofString: [String], // You can also have an array of each of the other types too.
+  nested: { stuff: { type: String, lowercase: true, trim: true } }
+})
+ +

Most of the SchemaTypes (the descriptors after “type:” or after field names) are self explanatory. The exceptions are:

+ + + +

The code also shows both ways of declaring a field:

+ + + +

For more information about options see SchemaTypes (Mongoose docs).

+ +

Validation

+ +

Mongoose provides built-in and custom validators, and synchronous and asynchronous validators. It allows you to specify both the acceptable range or values and the error message for validation failure in all cases.

+ +

The built-in validators include:

+ + + +

The example below (slightly modified from the Mongoose documents) shows how you can specify some of the validator types and error messages:

+ +

+    var breakfastSchema = new Schema({
+      eggs: {
+        type: Number,
+        min: [6, 'Too few eggs'],
+        max: 12,
+        required: [true, 'Why no eggs?']
+      },
+      drink: {
+        type: String,
+        enum: ['Coffee', 'Tea', 'Water',]
+      }
+    });
+
+ +

For complete information on field validation see Validation (Mongoose docs).

+ +

Virtual properties

+ +

Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.

+ +
+

Note: We will use a virtual property in the library to define a unique URL for each model record using a path and the record's _id value.

+
+ +

For more information see Virtuals (Mongoose documentation).

+ +

Methods and query helpers

+ +

A schema can also have instance methods, static methods, and query helpers. The instance and static methods are similar, but with the obvious difference that an instance method is associated with a particular record and has access to the current object. Query helpers allow you to extend mongoose's chainable query builder API (for example, allowing you to add a query "byName" in addition to the find(), findOne() and findById() methods).

+ +

Using models

+ +

Once you've created a schema you can use it to create models. The model represents a collection of documents in the database that you can search, while the model's instances represent individual documents that you can save and retrieve.

+ +

We provide a brief overview below. For more information see: Models (Mongoose docs).

+ +

Creating and modifying documents

+ +

To create a record you can define an instance of the model and then call save(). The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.

+ +
// Create an instance of model SomeModel
+var awesome_instance = new SomeModel({ name: 'awesome' });
+
+// Save the new model instance, passing a callback
+awesome_instance.save(function (err) {
+  if (err) return handleError(err);
+  // saved!
+});
+
+ +

Creation of records (along with updates, deletes, and queries) are asynchronous operations — you supply a callback that is called when the operation completes. The API uses the error-first argument convention, so the first argument for the callback will always be an error value (or null). If the API returns some result, this will be provided as the second argument.

+ +

You can also use create() to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.

+ +
SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+  if (err) return handleError(err);
+  // saved!
+});
+ +

Every model has an associated connection (this will be the default connection when you use mongoose.model()). You create a new connection and call .model() on it to create the documents on a different database.

+ +

You can access the fields in this new record using the dot syntax, and change the values. You have to call save() or update() to store modified values back to the database.

+ +
// Access model field values using dot notation
+console.log(awesome_instance.name); //should log 'also_awesome'
+
+// Change record by modifying the fields, then calling save().
+awesome_instance.name="New cool name";
+awesome_instance.save(function (err) {
+   if (err) return handleError(err); // saved!
+   });
+
+ +

Searching for records

+ +

You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete name and age. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.

+ +
var Athlete = mongoose.model('Athlete', yourSchema);
+
+// find all athletes who play tennis, selecting the 'name' and 'age' fields
+Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+  if (err) return handleError(err);
+  // 'athletes' contains the list of athletes that match the criteria.
+})
+ +

If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.

+ +
+

Note: All callbacks in Mongoose use the pattern callback(error, result). If an error occurs executing the query, the error parameter will contain an error document, and result will be null. If the query is successful, the error parameter will be null, and the result will be populated with the results of the query.

+
+ +

If you don't specify a callback then the API will return a variable of type Query. You can use this query object to build up your query and then execute it (with a callback) later using the exec() method.

+ +
// find all athletes that play tennis
+var query = Athlete.find({ 'sport': 'Tennis' });
+
+// selecting the 'name' and 'age' fields
+query.select('name age');
+
+// limit our results to 5 items
+query.limit(5);
+
+// sort by age
+query.sort({ age: -1 });
+
+// execute the query at a later time
+query.exec(function (err, athletes) {
+  if (err) return handleError(err);
+  // athletes contains an ordered list of 5 athletes who play Tennis
+})
+ +

Above we've defined the query conditions in the find() method. We can also do this using a where() function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.

+ +
Athlete.
+  find().
+  where('sport').equals('Tennis').
+  where('age').gt(17).lt(50).  //Additional where query
+  limit(5).
+  sort({ age: -1 }).
+  select('name age').
+  exec(callback); // where callback is the name of our callback function.
+ +

The find() method gets all matching records, but often you just want to get one match. The following methods query for a single record:

+ + + +
+

Note: There is also a count() method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.

+
+ +

There is a lot more you can do with queries. For more information see: Queries (Mongoose docs).

+ + + +

You can create references from one document/model instance to another using the ObjectId schema field, or from one document to many using an array of ObjectIds. The field stores the id of the related model. If you need the actual content of the associated document, you can use the populate() method in a query to replace the id with the actual data.

+ +

For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of ObjectId. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.

+ +
var mongoose = require('mongoose')
+  , Schema = mongoose.Schema
+
+var authorSchema = Schema({
+  name    : String,
+  stories : [{ type: Schema.Types.ObjectId, ref: 'Story' }]
+});
+
+var storySchema = Schema({
+  author : { type: Schema.Types.ObjectId, ref: 'Author' },
+  title    : String
+});
+
+var Story  = mongoose.model('Story', storySchema);
+var Author = mongoose.model('Author', authorSchema);
+ +

We can save our references to the related document by assigning the _id value. Below we create an author, then a story, and assign the author id to our stories author field.

+ +
var bob = new Author({ name: 'Bob Smith' });
+
+bob.save(function (err) {
+  if (err) return handleError(err);
+
+  //Bob now exists, so lets create a story
+  var story = new Story({
+    title: "Bob goes sledding",
+    author: bob._id    // assign the _id from the our author Bob. This ID is created by default!
+  });
+
+  story.save(function (err) {
+    if (err) return handleError(err);
+    // Bob now has his story
+  });
+});
+ +

Our story document now has an author referenced by the author document's ID. In order to get the author information in our story results we use populate(), as shown below.

+ +
Story
+.findOne({ title: 'Bob goes sledding' })
+.populate('author') //This populates the author id with actual author information!
+.exec(function (err, story) {
+  if (err) return handleError(err);
+  console.log('The author is %s', story.author.name);
+  // prints "The author is Bob Smith"
+});
+ +
+

Note: Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's stories array. How then can we get all stories by a particular author? One way would be to add our author to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.

+ +

A better way is to get the _id of our author, then use find() to search for this in the author field across all stories.

+ +
Story
+.find({ author : bob._id })
+.exec(function (err, stories) {
+  if (err) return handleError(err);
+  // returns all stories that have Bob's id as their author.
+});
+
+
+ +

This is almost everything you need to know about working with related items for this tutorial. For more detailed information see Population (Mongoose docs).

+ +

One schema/model per file

+ +

While you can create schemas and models using any file structure you like, we highly recommend defining each model schema in its own module (file), exporting the method to create the model. This is shown below:

+ +
// File: ./models/somemodel.js
+
+//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+    a_string          : String,
+    a_date            : Date,
+});
+
+//Export function to create "SomeModel" model class
+module.exports = mongoose.model('SomeModel', SomeModelSchema );
+ +

You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.

+ +
//Create a SomeModel model just by requiring the module
+var SomeModel = require('../models/somemodel')
+
+// Use the SomeModel object (model) to find all SomeModel records
+SomeModel.find(callback_function);
+ +

Setting up the MongoDB database

+ +

Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the LocalLibrary website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.

+ +

For this tutorial we're going to use mLab's free cloud-hosted "sandbox" database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because mLab is a popular database as a service vendor that you might reasonably choose for your production database (other popular choices at the time of writing include Compose, ScaleGrid and MongoDB Atlas).

+ +
+

Note: If you prefer you can set up a MongoDb database locally by downloading and installing the appropriate binaries for your system. The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting.

+
+ +

You will first need to create an account with mLab (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). 

+ +

After logging in, you'll be taken to the home screen:

+ +
    +
  1. Click Create New in the MongoDB Deployments section.
    2. +
  2. This will open the Cloud Provider Selection screen.
    + MLab - screen for new deployment
    + +
      +
    • Select the SANDBOX (Free) plan from the Plan Type section. 
      • +
    • Select any provider from the Cloud Provider section. Different providers offer different regions (displayed below the selected plan type).
      • +
    • Click the Continue button.
      • +
    +
    3. +
  3. This will open the Select Region screen. +

    Select new region screen

    + +
      +
    • +

      Select the region closest to you and then Continue.

      +
      • +
    +
    4. +
  4. +

    This will open the Final Details screen.
    + New deployment database name

    + +
      +
    • +

      Enter the name for the new database as local_library and then select Continue.

      +
      • +
    +
    5. +
  5. +

    This will open the Order Confirmation screen.
    + Order confirmation screen

    + +
      +
    • +

      Click Submit Order to create the database.

      +
      • +
    +
    6. +
  6. +

    You will be returned to the home screen. Click on the new database you just created to open its details screen. As you can see the database has no collections (data).
    + mLab - Database details screen
    +  
    + The URL that you need to use to access your database is displayed on the form above (shown for this database circled above). In order to use this you need to create a database user that you can specify in the URL.

    +
    7. +
  7. Click the Users tab and select the Add database user button.
    8. +
  8. Enter a username and password (twice), and then press Create. Do not select Make read only.
    +
    9. +
+ +

You have now created the database, and have an URL (with username and password) that can be used to access it. This will look something like: mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library.

+ +

Install Mongoose

+ +

Open a command prompt and navigate to the directory where you created your skeleton Local Library website. Enter the following command to install Mongoose (and its dependencies) and add it to your package.json file, unless you have already done so when reading the Mongoose Primer above.

+ +
npm install mongoose
+
+ +

Connect to MongoDB

+ +

Open /app.js (in the root of your project) and copy the following text below where you declare the Express application object (after the line var app = express();). Replace the database url string ('insert_your_database_url_here') with the location URL representing your own database (i.e. using the information from mLab).

+ +
//Set up mongoose connection
+var mongoose = require('mongoose');
+var mongoDB = 'insert_your_database_url_here';
+mongoose.connect(mongoDB);
+mongoose.Promise = global.Promise;
+var db = mongoose.connection;
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+ +

As discussed in the Mongoose primer above, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). 

+ +

Defining the LocalLibrary Schema

+ +

We will define a separate module for each model, as discussed above. Start by creating a folder for our models in the project root (/models) and then create separate files for each of the models:

+ +
/express-locallibrary-tutorial  //the project root
+  /models
+    author.js
+    book.js
+    bookinstance.js
+    genre.js
+
+ +

Author model

+ +

Copy the Author schema code shown below and paste it into your ./models/author.js file. The scheme defines an author has having String SchemaTypes for the first and family names, that are required and have a maximum of 100 characters, and Date fields for the date of birth and death.

+ +
var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var AuthorSchema = new Schema(
+  {
+    first_name: {type: String, required: true, max: 100},
+    family_name: {type: String, required: true, max: 100},
+    date_of_birth: {type: Date},
+    date_of_death: {type: Date},
+  }
+);
+
+// Virtual for author's full name
+AuthorSchema
+.virtual('name')
+.get(function () {
+  return this.family_name + ', ' + this.first_name;
+});
+
+// Virtual for author's lifespan
+AuthorSchema
+.virtual('lifespan')
+.get(function () {
+  return (this.date_of_death.getYear() - this.date_of_birth.getYear()).toString();
+});
+
+// Virtual for author's URL
+AuthorSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/author/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Author', AuthorSchema);
+
+
+ +

We've also declared a virtual for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.

+ +
+

Note: Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.
+ At this point, a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!

+
+ +

At the end of the module we export the model.

+ +

Book model

+ +

Copy the Book schema code shown below and paste it into your ./models/book.js file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.

+ +
var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookSchema = new Schema(
+  {
+    title: {type: String, required: true},
+    author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},
+    summary: {type: String, required: true},
+    isbn: {type: String, required: true},
+    genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]
+  }
+);
+
+// Virtual for book's URL
+BookSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/book/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Book', BookSchema);
+
+ +

The main difference here is that we've created two references to other models:

+ + + +

BookInstance model

+ +

Finally, copy the BookInstance schema code shown below and paste it into your ./models/bookinstance.js file. The BookInstance represents a specific copy of a book that someone might borrow, and includes information about whether the copy is available or on what date it is expected back, "imprint" or version details.

+ +
var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookInstanceSchema = new Schema(
+  {
+    book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book
+    imprint: {type: String, required: true},
+    status: {type: String, required: true, enum: ['Available', 'Maintenance', 'Loaned', 'Reserved'], default: 'Maintenance'},
+    due_back: {type: Date, default: Date.now}
+  }
+);
+
+// Virtual for bookinstance's URL
+BookInstanceSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/bookinstance/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('BookInstance', BookInstanceSchema);
+ +

The new things we show here are the field options:

+ + + +

Everything else should be familiar from our previous schema.

+ +

Genre model - challenge!

+ +

Open your ./models/genre.js file and create a schema for storing genres (the category of book, e.g. whether it is fiction or non-fiction, romance or military history, etc).

+ +

The definition will be very similar to the other models:

+ + + +

Testing — create some items

+ +

That's it. We now have all models for the site set up!

+ +

In order to test the models (and to create some example books and other items that we can use in our next articles) we'll now run an independent script to create items of each type:

+ +
    +
  1. Download (or otherwise create) the file populatedb.js inside your express-locallibrary-tutorial directory (in the same level as package.json). + +
    +

    Note: You don't need to know how populatedb.js works; it just adds sample data into the database.

    +
    +
    2. +
  2. Enter the following commands in the project root to install the async module that is required by the script (we'll discuss this in later tutorials, ) + 
    npm install async
    +
    3. +
  3. Run the script using node in your command prompt, passing in the URL of your MongoDB database (the same one you replaced the insert_your_database_url_here placeholder with, inside app.js earlier): + 
    node populatedb <your mongodb url>​​​​
    +
    4. +
  4. The script should run through to completion, displaying items as it creates them in the terminal.
    5. +
+ +
+

Tip: Go to your database on mLab. You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.

+
+ +

Summary

+ +

In this article, we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement Book, BookInstance, Author and Genre models for the LocalLibrary website.

+ +

Last of all we tested our models by creating a number of instances (using a standalone script). In the next article we'll look at creating some pages to display these objects.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/es/learn/server-side/express_nodejs/skeleton_website/index.html b/files/es/learn/server-side/express_nodejs/skeleton_website/index.html new file mode 100644 index 0000000000..b829e52665 --- /dev/null +++ b/files/es/learn/server-side/express_nodejs/skeleton_website/index.html @@ -0,0 +1,502 @@ +--- +title: 'Express Tutorial Part 2: Creating a skeleton website' +slug: Learn/Server-side/Express_Nodejs/skeleton_website +translation_of: Learn/Server-side/Express_Nodejs/skeleton_website +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

+ +

Este segundo artículo de nuestro Tutorial Express muestra cómo puede crear un "esqueleto" para un proyecto de sitio web que luego puede completar con rutas, plantillas/vistas, y llamadas a base de datos especifícas del sitio.

+ + + + + + + + + + + + +
Prerequisitos:Configurar un entorno de desarrollo de Node. Revise el Tutorial Express.
Objetivo:Poder empezar sus nuevos proyectos web usando el Generador de Aplicaciones Express.
+ +

Visión General

+ +

Este artículo muestra cómo puede crear un sitio web "esqueleto"  usando la herramienta Generador de Aplicaciones Express, que luego puede completar con rutas, vistas/plantillas, y llamadas a base de datos especifícas del sitio.  En este caso usaremos la herramienta para crear el framework para nuestro  website Local Library, al que luego agregaremos todo el código que el sitio necesite.  El proceso es extremadamente simple, requiriendo sólo que se invoque el generador en la línea de comandos con un nombre para el nuevo proyecto, opcionalmente especificando también el motor de plantillas y el generador de CSS a utilizar.

+ +

Las siguientes secciones muestran como puede llamar al generador de aplicaciones, y proporcionan una pequeña explicación sobre las diferentes opciones para vistas y CSS.  También explicaremos como está estructurado el esqueleto del sitio web.  Al final, mostraremos como puede ejecutar el sitio web para verificar que funciona.

+ +
+

Nota: El Generador de Aplicaciones Express no es el único generador para aplicaciones Express, y el proyecto generado no es la única forma viable para estructurar sus archivos y directorios.  El sitio generado, sin embargo, tiene una estructura modular que es fácil de extender y comprender.  Para informacion sobre una mínima  aplicación Express, vea el Ejemplo Hello world  (Express docs).

+
+ +

Usando el generador de aplicaciones

+ +

Ya debe haber instalado el generador como parte de Configurar un entorno de desarrollo de Node. Como un rápido recordatorio, la herramienta generador se instala para todos los sitios usando el manejador de paquetes NPM, como se muestra:

+ +
npm install express-generator -g
+ +

El generador tiene un número de opciones, las cuales puede observar en la línea de comandos usando el comando --help (o bien  -h):

+ +
> express --help
+
+  Usage: express [options] [dir]
+
+  Options:
+
+    -h, --help           output usage information
+        --version        output the version number
+    -e, --ejs            add ejs engine support
+        --pug            add pug engine support
+        --hbs            add handlebars engine support
+    -H, --hogan          add hogan.js engine support
+    -v, --view <engine>  add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
+    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
+        --git            add .gitignore
+    -f, --force          force on non-empty directory
+
+ +

Simplemente puede especificar express para crear un proyecto dentro del directorio actual usando el motor de plantillas Jade y CSS plano (si especifica un nombre de directorio entonces el proyecto será creado en un subdirectorio con ese nombre).

+ +
express
+ +

También puede seleccionar el motor de plantillas para las vistas usando  --view y/o un motor generador de CSS usando --css.

+ +
+

Nota: Las otras opciones para elegir motores de plantillas (e.g. --hogan, --ejs, --hbs etc.) están descontinuadas. Use --view (o bien -v)!

+
+ +

¿Cuál motor de vistas debo usar?

+ +

El Generador de Aplicaciones Express le permite configurar un número de populares motores de plantillas, incluyendo EJS, Hbs, Pug (Jade), Twig, y Vash, aunque si no se especifica una opcion de vista, selecciona Jade por defecto. Express puede soportar un gran número de motores de plantillas aquí una lista.

+ +
+

Nota: Si quiere usar un motor de plantillas que no es soportado por el generador entonces vea el artículo  Usando motores de plantillas con Express (Express docs) y la documentación de su motor de plantillas.

+
+ +

Generalmente hablando debe seleccionar un motor de plantillas que le brinde toda la funcionalidad que necesite y le permita ser productivo rápidamente  — o en otras palabras, en la misma forma en que selecciona cualquier otro componente.  Alguna de las cosas a considerar cuando se comparan motores de plantillas:

+ + + +
+

Tip: En Internet hay muchos recursos que le ayudarán a comparar diferentes opciones. 

+
+ +

Para este proyecto usaremos el motor de plantillas Pug (este es el  recientemente renombrado motor Jade), ya que es de los más populares lenguajes de plantillas Express/JavaScript y es soportado por el generador por defecto.

+ +

¿Cuál motor de hojas de estilo CSS debería usar?

+ +

El Generador de Aplicaciones Express le permite crear un proyecto que puede usar los más comunes motores  de  hojas  de estilos CSS: LESS, SASS, Compass, Stylus.

+ +
+

Nota: CSS tiene  algunas  limitaciones  que  dificultan ciertas  tareas. Los  motores  de hojas de estilos  CSS le permiten usar una sintaxis más poderosa para definir su  CSS, y luego compilar la definición en texto  plano para  su uso  en los  navegadores .

+
+ +

Como los  motores  de plantillas, debería usar el motor CSS que le permita a su  equipo  ser más  productivo.  Para este proyecto  usaremos CSS ordinario (opción  por defecto) ya que nuestros requerimientos no son lo suficientemente complicados para justificar el uso de un motor CSS. 

+ +

¿Cuál base de datos  debería usar?

+ +

El código generado no usa o incluye ninguna base de datos.  Las aplicaciones Express pueden  usar cualquier mecanismo de bases  de datos soportado por  Node (Express por si  mismo no define ningún comportamiento o requerimiento para el manejo de bases de datos).

+ +

Discutiremos la integración con una base de datos en un posterior artículo.

+ +

Creando el proyecto

+ +

Para el ejemplo que vamos a crear la app Local Library, crearemos un proyecto llamado express-locallibrary-tutorial usando la librería de plantillas Pug y ningún motor CSS.

+ +

Primero navegue a donde quiera crear el proyecto y luego ejecute el Generador de Aplicaciones Express en la línea  de comandos como se muestra:

+ +
express express-locallibrary-tutorial --view=pug
+
+ +

El generador creará (y listará) los archivos del proyecto.

+ +
   create : express-locallibrary-tutorial
+   create : express-locallibrary-tutorial/package.json
+   create : express-locallibrary-tutorial/app.js
+   create : express-locallibrary-tutorial/public/images
+   create : express-locallibrary-tutorial/public
+   create : express-locallibrary-tutorial/public/stylesheets
+   create : express-locallibrary-tutorial/public/stylesheets/style.css
+   create : express-locallibrary-tutorial/public/javascripts
+   create : express-locallibrary-tutorial/routes
+   create : express-locallibrary-tutorial/routes/index.js
+   create : express-locallibrary-tutorial/routes/users.js
+   create : express-locallibrary-tutorial/views
+   create : express-locallibrary-tutorial/views/index.pug
+   create : express-locallibrary-tutorial/views/layout.pug
+   create : express-locallibrary-tutorial/views/error.pug
+   create : express-locallibrary-tutorial/bin
+   create : express-locallibrary-tutorial/bin/www
+
+   install dependencies:
+     > cd express-locallibrary-tutorial && npm install
+
+   run the app:
+     > SET DEBUG=express-locallibrary-tutorial:* & npm start
+ +

Al final de la lista el generador mostrará instrucciones sobre como instalar las dependencias necesarias (mostradas en el archivo package.json) y luego como ejecutar la aplicación (las instrucciones anteriores son para windows; en Linux/macOS serán ligeramente diferentes).

+ +

Ejecutando el esqueleto del sitio web

+ +

En este punto tenemos un esqueleto completo de nuestro proyecto.  El sitio web  no hace mucho actualmente, pero es bueno ejecutarlo para ver como funciona.

+ +
    +
  1. Primero instale las dependencias (el comando install recuperará todas las dependencias listadas e el archivo package.json del proyecto). + + 
    cd express-locallibrary-tutorial
+npm install
    +
    2. +
  2. Luego ejecute la aplicación. +
      +
    • En Windows, use este  comando: + 
      SET DEBUG=express-locallibrary-tutorial:* & npm start
      +
      • +
    • En macOS o Linux, use este comando: + 
      DEBUG=express-locallibrary-tutorial:* npm start
+
      +
      • +
    +
    3. +
  3. Luego carge en su navegador http://localhost:3000/ para acceder a la aplicación.
    4. +
+ +

Debería ver una página parecida a esta:

+ +

Browser for default Express app generator website

+ +

Tiene una aplicación Express funcional, ejecutandose en localhost:3000.

+ +
+

Nota: También podría ejecutar la app usando el comando npm start. Especificado la variable DEBUG como se muestra habilita el logging/debugging por consola. Por ejemplo, cuando visite la página mostrada arriba verá la información de depuración como esta:

+ +
>SET DEBUG=express-locallibrary-tutorial:* & npm start
+
+> express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial
+> node ./bin/www
+
+  express-locallibrary-tutorial:server Listening on port 3000 +0ms
+GET / 200 288.474 ms - 170
+GET /stylesheets/style.css 200 5.799 ms - 111
+GET /favicon.ico 404 34.134 ms - 1335
+
+ +

Habilite el reinicio del servidor cuando los archivos sean modificados

+ +

Cualquier cambio que le haga a su sitio web Express no será visible hasta que reinicie el servidor. Rapidamente, tener que detener y reiniciar el servidor cada vez que hacemos un cambio, se vuelve irritante, así que es beneficioso tomarse un tiempo y automátizar el reinicio del servidor cuando sea necesario.

+ +

Una de las herramientas más sencillas para este propósito es nodemon. Éste usualmente se instala globalmente (ya que es una "herramienta"), pero aquí lo instalaremos y usaremos localmente como una dependencia de desarrollo, así cualquier desarrollador que esté trabajando con el proyecto lo obtendrá automáticamente cuando instale la aplicación. Use el siguiente comando en el directorio raíz del esqueleto del proyecto:

+ +
npm install --save-dev nodemon
+ +

Si abre el archivo package.json de su proyecto verá una nueva sección con esta dependencia:

+ +
  "devDependencies": {
+    "nodemon": "^1.14.11"
+  }
+
+ +

Debido a que la herramienta no fue instalada globalmente no podemos ejecutarla desde la línea de comandos (a menos que la agreguemos a la ruta) pero podemos llamarla desde un script NPM porque NPM sabe todo sobre los paquetes instalados. Busque la sección scripts de su package.json. Inicialmente contendrá una línea, la cual comienza con "start". Actualicela colocando una coma al final de la línea, y agregue la línea "devstart" mostrada abajo:

+ +
  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+
+ +

Ahora podemos iniciar el servidor casi exactamente como antes, pero especificando el comando devstart:

+ + + +
+

Nota: Ahora si modifica cualquier archivo del proyecto el servidor se reiniciará  (o lo puede reiniciar rs en la consola de comandos en cualquier momento). Aún necesitará recargar el navegador para refrescar la página.

+ +

Ahora tendremos que llamar "npm run <nombre del script>" en vez de npm start, porque "start" es actualmente un comando NPM que es mapeado al nombre del script. Podríamos haber reemplazado el comando en el script start pero sólo queremos usar nodemon durante el desarrollo, así que tiene sentido crear un nuevo script para este comando.

+
+ +

El proyecto generado

+ +

Observemos el proyecto que hemos creado.

+ +

Estructura del directorio

+ +

El proyecto generado, ahora que ha instalado las dependencias, tiene la siguiente estructura de archivos (los archivos son los elementos que no están precedidos con "/"). El archivo package.json define las dependencias de la aplicación y otra información. También define un script de inicio que es el punto de entrada de la aplicación,  el archivo JavaScript /bin/www. Éste establece algunos de los manejadores de error de la aplicación y luego carga el archivo app.js para que haga el resto del trabajo.  Las rutas se almacenan en módulos separados en el directorio /routes. las plantillas se almacenan en el directorio /views.

+ +
/express-locallibrary-tutorial
+    app.js
+    /bin
+        www
+    package.json
+    /node_modules
+        [about 4,500 subdirectories and files]
+    /public
+        /images
+        /javascripts
+        /stylesheets
+            style.css
+    /routes
+        index.js
+        users.js
+    /views
+        error.pug
+        index.pug
+        layout.pug
+
+
+ +

Las siguientes secciones describen los archivos con más detalle. 

+ +

package.json

+ +

El archivo package.json define las dependencias de la aplicación y otra información: 

+ +
{
+  "name": "express-locallibrary-tutorial",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+  "dependencies": {
+    "body-parser": "~1.18.2",
+    "cookie-parser": "~1.4.3",
+    "debug": "~2.6.9",
+    "express": "~4.16.2",
+    "morgan": "~1.9.0",
+    "pug": "~2.0.0-rc.4",
+    "serve-favicon": "~2.4.5"
+  },
+  "devDependencies": {
+    "nodemon": "^1.14.11"
+  }
+}
+
+ +

Las dependencias incluyen el paquete express y los paquetes para el motor de plantillas elegido (pug). Adicionalmente, tenemos los siguientes paquetes que son útiles en muchas aplicaciones web: 

+ + + +

La sección de scripts define un script de "start", que es lo que invocamos cuando llamamos a npm start para iniciar el servidor. Desde la definición del script, puede ver que esto realmente inicia el archivo JavaScript ./bin/www con node. También define un script "devstart", que invocamos cuando llamamos a npm run devstart en su lugar. Esto inicia el mismo archivo ./bin/www, pero con nodemon en lugar de node.

+ +
  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+
+ +

www file

+ +

El archivo /bin/www es el punto de entrada de la aplicación. Lo primero que hace es require () el punto de entrada de la aplicación "real" (app.js, en la raíz del proyecto) que configura y devuelve el objeto de la aplicación express ().

+ +
#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+
+ +
+

Note: require() es una función de node global que se usa para importar módulos en el archivo actual. Aquí especificamos el módulo app.js utilizando una ruta relativa y omitiendo la extensión de archivo opcional (.js).

+
+ +

El resto del código en este archivo configura un servidor HTTP de node con la aplicación configurada en un puerto específico (definido en una variable de entorno o 3000 si la variable no está definida), y comienza a escuchar e informar errores y conexiones del servidor. Por ahora no necesita saber nada más sobre el código (todo en este archivo es "repetitivo"), pero siéntase libre de revisarlo si está interesado.

+ +

app.js

+ +

Este archivo crea un objeto de aplicación rápida (aplicación denominada, por convención), configura la aplicación con varias configuraciones y middleware, y luego exporta la aplicación desde el módulo. El siguiente código muestra solo las partes del archivo que crean y exportan el objeto de la aplicación:

+ +
var express = require('express');
+var app = express();
+...
+module.exports = app;
+
+ +

De vuelta en el archivo de punto de entrada www anterior, es este objeto module.exports que se proporciona al llamante cuando se importa este archivo.

+ +

Permite trabajar a través del archivo app.js en detalle. Primero importamos algunas bibliotecas de node útiles en el archivo usando require (), incluyendo express, serve-favicon, morgan, cookie-parser y body-parser que previamente descargamos para nuestra aplicación usando NPM; y path, que es una biblioteca central de nodos para analizar rutas de archivos y directorios.

+ +
var express = require('express');
+var path = require('path');
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+ +

Luego require () modules de nuestro directorio de rutas. Estos modules/files contienen código para manejar conjuntos particulares de "routes" relacionadas (rutas URL). Cuando extendemos la aplicación esqueleto, por ejemplo, para enumerar todos los libros de la biblioteca, agregaremos un nuevo archivo para tratar las rutas relacionadas con los libros.

+ +
var index = require('./routes/index');
+var users = require('./routes/users');
+
+ +
+

Note: En este punto, acabamos de importar el módulo; aún no hemos utilizado sus rutas (esto sucede un poco más abajo en el archivo).

+
+ +

Next we create the app object using our imported express module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First we set the 'views' value to specify the folder where the templates will be stored (in this case the sub folder /views). Then we set the 'view engine' value to specify the template library (in this case "pug").

+ +
var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+
+ +

The next set of functions call app.use() to add the middleware libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the express.static middleware to get Express to serve all the static files in the /public directory in the project root.

+ +
// uncomment after placing your favicon in /public
+//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+ +

Now that all the other middleware is set up, we add our (previously imported) route-handling code to the request handling chain. The imported code will define particular routes for the different parts of the site:

+ +
app.use('/', index);
+app.use('/users', users);
+
+ +
+

Note: The paths specified above ('/' and '/users') are treated as a prefix to routes defined in the imported files. So for example if the imported users module defines a route for /profile, you would access that route at /users/profile. We'll talk more about routes in a later article.

+
+ +

The last middleware in the file adds handler methods for errors and HTTP 404 responses.

+ +
// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  var err = new Error('Not Found');
+  err.status = 404;
+  next(err);
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+ +

The Express application object (app) is now fully configured. The last step is to add it to the module exports (this is what allows it to be imported by /bin/www).

+ +
module.exports = app;
+ +

Routes

+ +

The route file /routes/users.js is shown below (route files share a similar structure, so we don't need to also show index.js). First it loads the express module, and uses it to get an express.Router object. Then it specifies a route on that object, and lastly exports the router from the module (this is what allows the file to be imported into app.js).

+ +
var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;
+
+ +

The route defines a callback that will be invoked whenever an HTTP GET request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('/users') plus whatever is defined in this file ('/'). In other words, this route will be used when an URL of /users/ is received.

+ +
+

Tip: Try this out by running the server with node and visiting the URL in your browser: http://localhost:3000/users/. You should see a message: 'respond with a resource'.

+
+ +

One thing of interest above is that the callback function has the third argument 'next', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the next argument, it may be useful in the future if you want to add multiple route handlers to the '/' route path.

+ +

Views (templates)

+ +

The views (templates) are stored in the /views directory (as specified in app.js) and are given the file extension .pug. The method Response.render() is used to render a specified template along with the values of named variables passed in an object, and then send the result as a response. In the code below from /routes/index.js you can see how that route renders a response using the template "index" passing the template variable "title".

+ +
/* GET home page. */
+router.get('/', function(req, res) {
+  res.render('index', { title: 'Express' });
+});
+
+ +

The corresponding template for the above route is given below (index.pug). We'll talk more about the syntax later. All you need to know for now is that the title variable (with value 'Express') is inserted where specified in the template.

+ +
extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}
+
+ +

Challenge yourself

+ +

Create a new route in /routes/users.js that will display the text "You're so cool" at URL /users/cool/. Test it by running the server and visiting http://localhost:3000/users/cool/ in your browser

+ + + +

Summary

+ +

You have now created a skeleton website project for the Local Library and verified that it runs using node. Most important, you also understand how the project is structured, so you have a good idea where we need to make changes to add routes and views for our local library.

+ +

Next we'll start modifying the skeleton so that works as a library website.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

+ +

In this module

+ + diff --git a/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.html new file mode 100644 index 0000000000..825cc0c8c0 --- /dev/null +++ b/files/es/learn/server-side/express_nodejs/tutorial_local_library_website/index.html @@ -0,0 +1,83 @@ +--- +title: 'Express Tutorial: The Local Library website' +slug: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website +translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}
+ +

El primer artículo de nuestra serie de tutoriales prácticos explica lo que aprenderá y proporciona una descripción general del sitio web de ejemplo de la "biblioteca local" en el que trabajaremos y evolucionaremos en artículos posteriores.

+ + + + + + + + + + + + +
Prerequisitos:Leer la Introducción a Express. Para los siguientes artículos, también deberá haber configurado un entorno de desarrollo de Node. 
Objetivo:Presentar la aplicación de ejemplo utilizada en este tutorial, y permitir a los lectores comprender qué temas se tratarán.
+ +

Visión General

+ +

Bienvenido al tutorial de MDN "Biblioteca Local" Express (Node), en el cual desarrollamos un sitio web que podría usarse para administrar el catálogo de una biblioteca local.
+
+ En esta serie de artículos tutoriales, usted:

+ + + +

Ya se ha aprendido sobre algunos de estos temas y se ha referido brevemente a otros. Al final de la serie de tutoriales, debe saber lo suficiente como para desarrollar aplicaciones Express simples usted mismo.

+ +

The LocalLibrary website

+ +

LocalLibrary es el nombre del website que vamos a desarrollar en esta serie de tutoriales. Tal como esperas, el objetivo del website es proveer un catalogo online para una pequeña libreria, donde los usuarios exploren los libros disponibles y administren sus cuentas.

+ +

Este ejemplo ha sido cuidadosamente elegido porque puede escalarse para mostrar tantos o pocos detalles como necesitemos, de igual forma puede usarse para presentar casi todas las caracteristicas de Express. Mas importante aún, nos permite proporcionar una ruta guiada a traves de la funcionalidad que necesita cualquier sitio web:

+ + + +

Aunque este ejemplo se puede extender mucho mas, se llama LocalLibrary por una razón , esperamos mostrar informacion minima que le ayudara a comenzar a utilizar Express rapidamente. Como resultado, almacenaremos informacion acerca de libros, copias de libros, autores y otra informacion clave. Sin embargo, no almacenaremos informacion sobre otros elementos que una biblioteca pueda tener, o proveer la infraestructura necesaria para soportar multiples sitios u otras caracteristicas de grandes bibliotecas.  

+ +

Estoy atascado, donde puedo obtener el codigo fuente?

+ +

A medida que avance, le proporcionaremos los fragmentos de codigo adecuado para que usted los copie y pegue en cada punto, ademas, habrá otro código con el proposito de que usted lo complete para afianzar su conocimiento (con alguna orientacion).

+ +

Si aun asi sigues atasaco, puedes encontrar la version completamente desarrollada del sitio web en Github aqui.

+ +
+

Note: Las versiones especificas de node, Express, y los otros modulos con los que se probó esta documentación estan enumeradas en el projecto package.json.

+
+ +

Summary

+ +

Ahora que sabes un poco mas del sitio web LocalLIbrary y lo que vas a aprender, es tiempo de comenzar a crear un skeleton projecto para contener nuestro ejemplo.

+ +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}

+ +

In this module

+ + diff --git a/files/es/learn/server-side/index.html b/files/es/learn/server-side/index.html new file mode 100644 index 0000000000..e22f39084f --- /dev/null +++ b/files/es/learn/server-side/index.html @@ -0,0 +1,57 @@ +--- +title: Programación lado servidor +slug: Learn/Server-side +tags: + - Aprendizaje + - Aterrizaje + - Codificación de scripts + - Principiante + - Programación lado servidor + - Servidor + - Tema + - introducción +translation_of: Learn/Server-side +--- +
{{LearnSidebar}}
+ +

El tema Páginas Dinámicas – Programación lado servidor contiene una serie de módulos en los que se enseña como crear sitios web dinámicos, sitios que entregan información personalizada como respuesta a las peticiones HTTP. El modulo ofrece una introducción generica a la programación de lado servidor además de guías para principiantes sobre como usar frameworks como Django (Python) y Express(Node.js/JavaScript) para crear aplicaciones web basicas.

+ +

La mayoría de los principales sitios web utilizan alguna forma de tecnología de lado servidor para presentar dinámicamente datos cuando sean requeridos. Por ejemplo, imagina cuántos productos están disponibles en Amazon e imagina cuántas entradas han sido escritas en Facebook. Presentar todo esto usando páginas estáticas completamente diferentes sería completamente ineficiente, por lo que estos sitios en lugar de ello presentan plantillas estáticas (construidas usando HTML, CSS, y JavaScript), y actualizan dinámicamente los datos presentados dentro de esas plantillas cuando se necesiten, ej. cuando quieres ver un producto diferente en Amazon.

+ +

En el mundo moderno del desarrollo web, el aprendizaje del desarrollo de lado servidor es altamente recomendado.

+ +

Itinerario de aprendizaje

+ +

Empezar con la programación lado servidor es normalmente más fácil que con el desarrollo del lado cliente, ya que los sitios web dinámicos tienden a efectuar un montón de operaciones muy similares (recuperar datos de una base y presentarlos en una página, validar datos introducidos por los usuarios y guardarlos en la base, comprobar los permisos e inicios de sesión de los usuarios, etc.), y se construyen usando web frameworks que hacen muy facilmente éstas y otras operaciones comunes en un servidor web.

+ +

Un conocimiento básico de conceptos de programación (o de un lenguaje de programación en particular) es útil, pero no imprescindible. Igualmente, no hace falta ser un experto en codificación lado cliente, pero un conocimiento básico te ayudará a trabajar mejor con los desarrolladores creando tu "front-end" de web lado cliente.

+ +

Necesitarás entender "cómo tabaja la web". Te recomendamos que leas primero los siguientes temas:

+ + + +

Con ese conocimiento básico estarás preparado para recorrer el camino a través de los módulos de esta sección.

+ +

Módulos

+ +

Este tema contiene los siguientes módulos. Deberías comenzar por el primer módulo y a continuación  ir a uno de los módulos siguientes, que muestran cómo trabajar con dos lenguajes muy populares de lado servidor usando los web frameworks adecuados.

+ +
+
Primeros pasos en la programación lado servidor de sitios web
+
Este módulo proporciona información acerca de la programación lado servidor de sitios web sin adentrarse en la tecnología de los servidores, incluyendo respuestas a las preguntas a cuestiones fundamentales acerca de la programación de lado servidor — "¿qué es?", "¿en qué se diferencia de la programación de lado cliente?" y "¿porqué es tan útil?" — y una visión general de algunos de los web frameworks de lado servidor más populares e indicaciones de cómo seleccionar el más adecuado para tu sitio. Finalmente proporcionaremos una sección de introducción a la seguridad en servidores web.
+
Django Web Framework (Python)
+
Django es un web framework extremadamete popular y con funcionalidad completa, escrito en Python. El módulo explica porqué Django es tan buen framework de servidor web, cómo configurar un entorno de desarrollo y cómo realizar tareas comunes con él.
+
Express Web Framework (Node.js/JavaScript)
+
Express es un web framework popular, escrito en JavaScript y hospedado dentro del entorno de ejecución en tiempo real "node.js". El módulo explica algunos de los beneficios clave de este framework, cómo configurar tu entorno de desarrollo y cómo realizar tareas comunes de desarrollo y despliegue web.
+
+ +

Ver también

+ +
+
Node servidor sin framework
+
Este artículo proporciona un servidor de ficheros estático, construido con Node.js puro, para aquellos de vosotros que no os apetezca usar un framework.
+
diff --git a/files/es/learn/server-side/node_server_without_framework/index.html b/files/es/learn/server-side/node_server_without_framework/index.html new file mode 100644 index 0000000000..11826d3e73 --- /dev/null +++ b/files/es/learn/server-side/node_server_without_framework/index.html @@ -0,0 +1,81 @@ +--- +title: Servidor Node sin framework +slug: Learn/Server-side/Node_server_without_framework +translation_of: Learn/Server-side/Node_server_without_framework +--- +
{{LearnSidebar}}
+ +

Este artículo proporciona un servidor de ficheros estático simple construido con Node.js puro, para aquellos de vosotros que no quieran usar un framework.

+ +

NodeJS has many frameworks to help you get your server up and running, the most popular being:

+ + + +

There is however not a solution that will suit every situation. A developer may need to build his/her own server, without any other dependency.

+ +

Example

+ +

Below is a simple static file server built with NodeJS:

+ +
var http = require('http');
+var fs = require('fs');
+var path = require('path');
+
+http.createServer(function (request, response) {
+    console.log('request ', request.url);
+
+    var filePath = '.' + request.url;
+    if (filePath == './') {
+        filePath = './index.html';
+    }
+
+    var extname = String(path.extname(filePath)).toLowerCase();
+    var contentType = 'text/html';
+    var mimeTypes = {
+        '.html': 'text/html',
+        '.js': 'text/javascript',
+        '.css': 'text/css',
+        '.json': 'application/json',
+        '.png': 'image/png',
+        '.jpg': 'image/jpg',
+        '.gif': 'image/gif',
+        '.wav': 'audio/wav',
+        '.mp4': 'video/mp4',
+        '.woff': 'application/font-woff',
+        '.ttf': 'application/font-ttf',
+        '.eot': 'application/vnd.ms-fontobject',
+        '.otf': 'application/font-otf',
+        '.svg': 'application/image/svg+xml'
+    };
+
+    contentType = mimeTypes[extname] || 'application/octet-stream';
+
+    fs.readFile(filePath, function(error, content) {
+        if (error) {
+            if(error.code == 'ENOENT'){
+                fs.readFile('./404.html', function(error, content) {
+                    response.writeHead(200, { 'Content-Type': contentType });
+                    response.end(content, 'utf-8');
+                });
+            }
+            else {
+                response.writeHead(500);
+                response.end('Sorry, check with the site admin for error: '+error.code+' ..\n');
+                response.end();
+            }
+        }
+        else {
+            response.writeHead(200, { 'Content-Type': contentType });
+            response.end(content, 'utf-8');
+        }
+    });
+
+}).listen(8125);
+console.log('Server running at http://127.0.0.1:8125/');
+ +

To do

+ +

It would be nice to extend this article to explain how the above code works, and perhaps also show an extended version that serves static files and also handles some kind of dynamic requests too.

diff --git a/files/es/learn/server-side/primeros_pasos/index.html b/files/es/learn/server-side/primeros_pasos/index.html new file mode 100644 index 0000000000..19a5454b4b --- /dev/null +++ b/files/es/learn/server-side/primeros_pasos/index.html @@ -0,0 +1,47 @@ +--- +title: Primeros Pasos en la Programación de Lado-Servidor +slug: Learn/Server-side/Primeros_pasos +tags: + - Aprendizaje + - Aterrizaje + - Codificación de scripts + - Guía + - Principiante + - Programación lado servidor + - introducción +translation_of: Learn/Server-side/First_steps +--- +
{{LearnSidebar}}
+ +

En este, nuestro módulo sobre programación de Lado-Servidor, contestaremos a unas pocas preguntas fundamentales - "¿Qué es?", "¿En qué se diferencia de la programación de Lado-Cliente?" y "¿Porqué es tan útil?". Proporcionaremos un vistazo de algunos de los "web-frameworks" de lado-servidor más populares, junto con indicaciones de cómo seleccionar el framework más adecuado para crear tu primer sitio. Finalmente proporcionaremos un artículo introductorio de alto nivel sobre seguridad en el servidor web. 

+ +

Prerequisitos

+ +

Antes de comenzar este módulo no necesitas tener ningún conocimiento de programación de sitios web de lado-servidor, y tampoco de ningún otro tipo de programación.

+ +

Necesitarás entender "cómo funciona la web". Te recomendamos que leas primero los siguientes temas:

+ + + +

Con este conocimiento básico estarás listo para recorrer el camino a través de los módulos de esta sección.

+ +

Guías

+ +
+
Introducción al lado servidor
+
¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web disponible a través de la codificación lado-servidor.
+
Visión general Cliente-Servidor
+
Ahora que conoces el propósito y beneficios potenciales de la programación lado-servidor examinaremos en detalle qué pasa cuando un servidor recibe una "petición dinámica" desde un explorador web. Como el código de lado-servidor de la mayoría de sitios web gestiona las peticiones y las respuestas de forma similar, ésto te ayudará entender qué necesitas hacer cuando escribes tu propio código.
+
Web frameworks de lado-servidor
+
El anterior artículo te mostró lo que necesita una aplicación web de lado servidor para responder a las peticiones de un explorador web. Ahora te mostraremos cómo los web frameworks pueden simplificar estas tareas y ayudarte a seleccionar el framework correcto para tu primera aplicación web de lado servidor.
+
Seguridad de Sitios Web
+
La seguridad de los sitios web requiere vigilancia en todos los aspectos del diseño y uso del sitio . Este artículo introductorio no te convertirá en un gurú de la seguridad de sitios web, pero te ayudará a entender los primeros pasos importantes que deber dar para robustecer tu aplicación web contra las amenazas más comunes.
+
+ +

Evaluaciones

+ +

Este módulo "visión general" no hace ninguna evaluación ya que no te hemos enseñado ningún código todavía. Esperamos que en este punto tengas una comprensión de qué clase de funcionalidad puedes distribuir usando programación de lado servidor y habrás tomado una decisión sobre el web framework de lado servidor que usarás para crear tu primer sitio. 

diff --git "a/files/es/learn/server-side/primeros_pasos/introducci\303\263n/index.html" "b/files/es/learn/server-side/primeros_pasos/introducci\303\263n/index.html" new file mode 100644 index 0000000000..0b0d2da59e --- /dev/null +++ "b/files/es/learn/server-side/primeros_pasos/introducci\303\263n/index.html" @@ -0,0 +1,192 @@ +--- +title: Introducción al lado servidor +slug: Learn/Server-side/Primeros_pasos/Introducción +tags: + - Aprendizaje + - Codificación de scripts + - Guía + - Principiante + - Programación lado servidor + - Servidor + - introducción +translation_of: Learn/Server-side/First_steps/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+ +

¡Bienvenidos al curso MDN de programación para principiantes de lado servidor! En este primer artículo enfocamos la programación de Lado-Servidor desde un nivel alto, respondiendo a preguntas tales como "¿qué es?", "¿en qué se diferencia de la programación de Lado-Cliente?" y "¿porqué es tan útil?". Después de leer este artículo entenderás el poder adicional para los sitios web disponible a través de la codificación lado-servidor.

+ + + + + + + + + + + + +
Prerequisitos:Nociones básicas de computación. Entender lo que es un servidor web.
Objetivo:Familiarizarse con lo que es la programación de lado servidor, qué puede hacer y en qué se diferencia de la programación de lado cliente.
+ +

La mayoría de los grandes sitios web usan código de lado servidor para presentar, cuando se necesitan, diferentes datos, generalmente extraidos de una base de datos almacenada en un servidor y enviada al cliente para ser presentada mediante algún código (ej, HTML y JavaScript). Quizá el beneficio más significativo de la codificación de lado servidor es que te permite confeccionar el contenido del sitio web para usuarios individuales. Los sitios dinámicos pueden resaltar contenido que es más relevante basándose en las preferencias del usuario y sus hábitos. Puede hacer también que los sitios sean más fáciles de usar al almacenar las preferencias personales y la información - por ejemplo reusando los detalles de la tarjeta de crédito guardados para agilizar los pagos siguientes. Puede incluso permitir la interacción con los usuarios fuera del sitio, enviando notificaciones y actualizaciones via email o a traves de otros canales. Todas estas capacidades permite un mayor compromiso con los usuarios. 

+ +

En el mundo moderno del desarrollo web, el aprendizaje sobre desarrollo de lado servidor es altamente recomendable.

+ +

¿Qué es la programación de sitios web de lado servidor?

+ +

Los exploradores web se comunican con los servidores web usando el Protocolo de Transporte de Hyper Texto (HyperText Transport Protocol ({{glossary("HTTP")}}). Cuando pinchas en un enlace en una página web, envías un formulario o ejecutas una búsqueda, se envía una peticion HTTP desde tu explorador web al servidor web de destino. La petición incluye un URL que identifica el recurso afectado, un método que define la acción requerida (por ejemplo, obtener, borrar o publicar el recurso), y puede incluir información adicional codificada en parámetros en el URL (los pares campo-valor enviados en una cadena de consulta (query string), como datos POST (datos enviados mediate el método POST de HTTP,  HTTP POST method), o en {{glossary("Cookie", "associated cookies")}}.

+ +

Los servidores web esperan los mensajes de petición de los clientes, los procesan cuando llegan y responden al explorador web con un mensaje de respuesta HTTP. La repuesta contiene una línea de estado indicando si la petición ha tenido éxito o no (ej, "HTTP/1.1 200 OK" en caso de éxito). El cuerpo de una respuesta exitosa a una petición podría contener el resurso solicitado (ej, una nueva página HTML, o una imagen, etc...), que el explorador web podría presetar en pantalla.

+ +

Sitios Estáticos

+ +

El diagrama de abajo muestra una arquitectura de servidor web básica correspondiente a un sitio estático (un sitio estático es aquél que devuelve desde el servidor el mismo contenido insertado en el código "hard coded" siempre que se solicita un recurso en particular). Cuando un usuario quiere navegar a una página, el explorador envía una petición HTTP "GET" especificando su URL. El servidor recupera de su sistema de ficheros el documento solicitado y devuelve una respuesta HTTP que contiene el documento y un estado de éxito "success status" (normalmente 200 OK). Si el fichero no puede ser recuperado por alguna razón, se devuelve un estado de error (ver respuestas de error del cliente and respuestas de error del servidor).

+ +

A simplified diagram of a static web server.

+ +

Sitios Dinámicos

+ +

Un sitio dinámico es aquél en que algun contenido de la respuesta está generado dinámicamente sólo cuando se necesita. En un sitio web dinámico las páginas HTML se crean normalmente insertando datos desde una base en variables dentro de plantillas HTML (esta es una forma mucho más eficiente de almacenar gran cantidad de contenido que la que usan los sitios web estáticos). Un sitio dinámico puede devolver datos diferentes para un URL basados en la información proporcionada por el usuario o sus preferencias almacenadas y puede realizar otras operaciones como parte de la devolución de respuesta (ej, enviar notificaciones).

+ +

La mayor parte del código para soportar un sitio web dinámico debe correr en el servidor. La creación de este código se conoce como "programación de lado-servidor" (o algunas veces "back-end scripting").

+ +

El diagrama de abajo muestra una arquitectura simple para unsitio web dinámico. Como en el diagrama previo, los exploradores web envían peticiones HTTP al servidor, el servidor procesa a continuación las peticiones y devuelve las respuestas HTTP apropiadas. Las peticiones de recursos estáticos son gestionadas de la misma manera que para los sitios estáticos (los recursos estáticos son cualquier fichero que no cambia - generalmente: CSS, JavaScript, Imágenes, ficheros PDF creados previamente, etc...)

+ +

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

+ +

Las peticiones de recursos dinámicos, por el contrario, son reenviadas (2) al código del lado-servidor (mostrado en el diagrama como Web Application). Para las "peticiones dinámicas" el servidor interpreta la petición, lee de la base de datos la información requerida (3), combina los datos recuperados con las plantillas HTML (4), y envía de vuelta una respuesta que contiene el HTML generado (5,6). 

+ +
+

¿Son iguales la programación del lado-servidor y lado-cliente?

+
+ +

Prestemos ahora nuestra atención al código involucrado en la programación de lado-servidor y lado-cliente. En cada caso, el código es significativamente diferente:

+ + + +

El código que se ejecuta en el explorador se conoce como código de lado-cliente, y su principal preocupación es la mejora de la apariencia y el comportamiento de una página web entregada. Esto incluye la selección y estilo de los componentes UI, la creación de layouts, navegación, validación de formularios, etc. Por otro lado, la programación de sitios web de lado servidor en su mayor parte implica la elección de qué contenido se ha de devolver al explorador como respuesta a sus peticiones. El código de lado-servidor gestiona tareas como la validación de los datos enviados y las peticiones, usando bases de datos para almacenar y recuperar datos, y enviando los datos correctos al cliente según se requiera.

+ +

El código del lado cliente está escrito usando HTML, CSS, y JavaScript — es ejecutado dentro del explorador web y tiene poco o ningún acceso al sistema operativo subyacente (incluyendo un acceso limitado al sistema de ficheros).

+ +

Los desarrolladores web no pueden controlar qué explorador web usará cada usuario para visualizar un sitio web — los exploradores web proporcionan niveles de compatibilidad inconsistentes con las características de codificación lado cliente, y parte del reto de la programación de lado cliente es gestionar con dignidad las diferencias de soporte entre exploradores.

+ +
El código del lado servidor puede escribirse en cualquier número de lenguajes de programación — ejemplos de lenguajes de programación populares incluyen PHP, Python, Ruby, C# y NodeJS(JavaScript). El código del lado servidor tiene acceso completo al sistema operativo del servidor y el desarrollador puede elegir qué lenguaje de programación (y qué versión específica) desea usar.
+ +
Los desarrolladores generalmente escriben su código usando web frameworks. Los web framworks son colecciones de funciones, objetos, reglas y otras construcciones de código diseñadas para resolver problemas comunes, acelerar el desarrollo y simplificar los diferentes tipos de tareas que se han de abordar en un dominio en particular.
+ +
De nuevo, mientras que, tanto el código lado cliente y el lado servidor usan frameworks, los dominios son muy diferentes, y por lo tanto también lo son los frameworks. Los frameworks del lado cliente simplifican los diseños y las tareas de presentación mientras que los del lado servidor proporcionan un montón de funcionalidades "comunes" que tendría que haber implementado uno mismo (ej, soporte para las sesiones, soporte para los usuarios y autenticación, acceso fácil a la base de datos, librerías de plantillas, etc...).
+ +
+

Nota: Los frameworks del lado cliente se usan con frecuencia para acelerar el desarrollo del código del lado cliente, pero también se puede elegir escribir todo el código a mano; de hecho, escribir el código a mano puede ser más rápido y más eficiente si sólo se necesita una UI para sitio web pequeña y simple. Por contra, casi nunca se consideraría escribir el componente del lado servidor de una aplicación web ("web app") sin un framework — implementar una característica vital como un servidor HTTP es realmente difícil de hacer de la nada en un lenguaje como, por ejemplo, Python, pero los  web frameworks de Python como Django proporcionan uno  listo para usar, junto con otras herramientas muy útiles.

+
+ +

¿Qué se puede hacer en el lado-servidor?

+ +

La programación del lado-servidor es muy útil porque nos permite distribuir eficientemente información a medida para usuarios individuales y por lo tanto crear una experiencia de usuario mucho mejor.

+ +

Compañías como Amazon utilizan la programación del lado-servidor para construir resultados de búsquedas de productos, hacer sugerencias sobre productos escogidos basados en las preferencias del cliente y sus hábitos de compra previos, simplificar las adquisiciones, etc. Los bancos usan la programación del lado-servidor para almacenar la información sobre las cuentas y permitir ver y realizar transacciones sólo a los usuarios autorizados. Otros servicios como Facebook, Twitter, Instagram y Wikipedia usan la programación de lado-servidor para destacar, compartir y controlar el acceso al contenido interesante.

+ +

Algunos de los usos y beneficios comunes de la programación de lado-servidor se lista debajo. Notarás que hay algo de solapamiento.

+ +

Almacenaje y distribución eficiente de información

+ +

Imagina cuántos productos están disponibles en Amazon, e imagina cuántas entradas se han escrito en Facebook. Crear una página estática separada para cada producto o entrada sería completamente ineficiente.

+ +

La programación de lado-servidor nos permite por el contrario almacenar la información en una base de datos y construir dinámicamente y devolver ficheros HTML y de otros tipos (ej, PDFs, imágenes, etc.). También es posible devolver simplemente datos ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) para presentar mediante los web frameworks adecuados del lado-cliente (esto reduce la carga de procesamiento del servidor y la cantidad de datos que se necesitan enviar).

+ +

El servidor no se limita a enviar información de las bases de datos, y podría además devolver el resultado de herramientas de software o datos de servicios de comunicación. El contenido puede incluso ser dirigido por el tipo de dispositivo cliente que lo está recibiendo.

+ +

Debido a que la información está en una base de datos, puede también ser compartida y actualizada con otros sistemas de negocio (por ejemplo, cuando se venden los productos online o en una tienda, la tienda debería actualizar su base de datos de inventario.

+ +
+

Nota: Tu imaginación no tiene que trabajar duro para ver el beneficio de la codificación de lado-servidor para el almacenaje y distribución de información:

+ +
    +
  1. Vete a Amazon o a cualquier otro sitio de comercio electrónico "e-commerce".
    2. +
  2. Busca por un número de palabras clave y nota como la estructura de la página no cambia, incluso aunque cambien los resultados. 
    3. +
  3. Abre dos o tres productos diferentes. Fíjate de nuevo como tienen una estructura y diseño común, pero el contenido para los diferentes productos ha sido extraido de la base de datos.
    4. +
+ +

Para un término de búsqueda común (digamos "pez") puedes ver literalmente millones de valores retornados. Usar una base de datos permite que éstos sean almacenados y compartidos de forma eficiente, y permite que la presentación de la información esté controlada en un solo sitio.

+
+ +

Experiencia de usuario personalizada

+ +

Los servidores pueden almacenar y usar la información acerca de los clientes para proporcionar una experiencia de usuario conveniente y dirigida. Por ejemplo, muchos usuarios almacenan tarjetas de crédito de forma que los detalles no tienen que ser introducidos de nuevo. Sitios como Google Maps usan la localización de tu casa y la actual para proporcionar una información sobre la ruta a seguir y resaltar los negocios locales en los resultados de búsqueda.

+ +

Un análisis profundo de los hábitos del usuario se puede usar para anticipar sus intereses y personalizar las respuestas y notificaciones futuras, proporcionando, por ejemplo, una lista de las localizaciones visitadas o populares que querrías buscar en un mapa.

+ +
+

Nota: Vete a Google Maps como usuario anónimo, selecciona el botón Direcciones, e introduce los puntos de partida y destino de un viaje. Ahora inicia sesión en el sistema con tu cuenta de Google, si tienes una (en el panel de abajo aparece información acerca de este proceso donde seleccionas direcciones). El sitio web te permitirá ahora seleccionar las localizaciones de casa y trabajo como puntos de partida y destino (o almacenar estos detalles si no lo has hecho así).

+
+ +

Acceso controlado al contenido 

+ +

La programación de lado-servidor permite a los sitios restringir el acceso a usuarios autorizados y servir sólo la información que se le permite ver al usuario.

+ +

Ejemplos del mundo real incluyen:

+ + + +
+

Nota: Considera otros ejemplos reales donde el acceso al contenido está controlado. Por ejemplo, ¿qué puedes ver si vas al sitio online de tu banco? Inicia sesión con tu cuenta — ¿qué información adicional puedes ver y modificar? ¿Qué información puedes ver y sólo el banco puede cambiar?

+
+ +

Almacenar información de sesión/estado

+ +

La programación de lado-servidor permite a los desarrolladores hacer uso de las sesiones — es básicamente un mecanismo que permite al servidor almacenar información sobre el usuario actual del sitio u enviar diferentes respuestas basadas en esa información. Esto permite, por ejemplo, que un sitio sepa que un usuario ha iniciado sesión previamente y presente enlaces a sus correos, o a su historial de órdenes, o quizá guardar el estado de un simple juego de forma que el usuario pueda volver al sitio de nuevo y retomar el juego donde lo dejó.

+ +
+

Nota: Visita el sitio de un periódico que tenga un modelo de subscripción y abre un puñado de pestañas (ej, The Age). Continua visitando el sitio durante unos pocos días/horas. En algún momento serás finalmente redirigido a las páginas que explican cómo suscribirte y se te impedirá el acceso a los artículos. Esta información es un ejemplo de información de sesión almacenada en cookies.

+
+ +

Notificaciones y comunicación

+ +

Los servidores pueden enviar notificaciones de tipo general o específicas de usuario a través del propio sitio web o vía correo electrónico, SMS, mensajería instanténea, conversaciones de video u otros servicios de comunicación.

+ +

Unos pocos ejemplos incluyen:

+ + + +
+

Nota: El tipo de notificación más común es una "confirmación de registro". Elige uno cualquiera de los grandes sitios en que estés interesado (Google, Amazon, Instagram, etc.) y crea una cuenta nueva usando tu dirección de correo. En breve recibirás un email de confirmación de registro, o solicitando un acuse de recibo para activar la cuenta.

+
+ +

Análisis de datos

+ +

Un sitio web puede recolectar un montón de datos acerca de los usuarios: qué es lo que buscan, qué compran, qué recomiendan, cuánto tiempo permanecen en cada página. La programación de lado-servidor puede utilizarse para refinar las respuestas basándose en el análisis de estos datos.

+ +

Por ejemplo, Amazon y Google anuncian ambos productos basados en búsquedas previas (y adquisiciones).

+ +
+

Nota: Si eres usuario de Facebook vete a tu muro y hecha un ojo a la ristra de entradas. Fíjate como algunas de las entradas no están en orden numérico - en particular las entradas con más "me-gusta" están con frecuencia en lugares más altos de la lista que las entradas más recientes. Echa un ojo también a qué clase de anuncios te están mostrando — podrías ver anuncios de cosas que has mirado en otros sitios. El algoritmo de Facebook para resaltar contenido y anuncios puede ser un poco misterioso, pero está claro que lo que hace depende de lo que te gusta y de tus hábitos de visualización!

+
+ +

Sumario

+ +

Felicidades, has alcanzado el final de primer artículo sobre programación de lado-servidor. 

+ +

Ahora ya has aprendido que el código de lado-servidor se ejecuta en un servidor web y que su papel principal es controlar qué información se envía al usuario (mientras que el código de lado-cliente gestiona principalmente la estructura y presentación  de esos datos al usuario).

+ +

También deberías comprender que es útil porque nos permite crear sitios web que distribuyen de forma eficiente información seleccionada dirigida a usuarios individuales y tener una buena idea de algunas de las cosas que podrías ser capaz de hacer cuando seas un programador de lado-servidor.

+ +

Finalmente, deberías comprender que el código de lado-servidor se puede escribir en un gran número de lenguajes de programación y que deberías usar un web framework para hacer más fácil el proceso completo.

+ +

En un artículo futuro te ayudaremos a escoger el mejor web framework para tu primer sitio; Aunque a continuación te llevaremos a través de las principales interacciones cliente-servidor en un poco más de detalle.

+ +

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

diff --git a/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html b/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html new file mode 100644 index 0000000000..c2630fc050 --- /dev/null +++ b/files/es/learn/server-side/primeros_pasos/seguridad_sitios_web/index.html @@ -0,0 +1,177 @@ +--- +title: Seguridad de Sitios Web +slug: Learn/Server-side/Primeros_pasos/seguridad_sitios_web +tags: + - Aprendizaje + - Codificación de scripts + - Guía + - Principiante + - Programación de lado servidor + - Seguridad + - Seguridad Web + - Seguridad de sitios Web + - introducción +translation_of: Learn/Server-side/First_steps/Website_security +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

La Seguridad web require vigilancia en todos los aspectos del diseño y uso de un sitio web. Este artículo introductorio no te hará un gurú de la seguridad en sitios web, pero te ayudará a entender de donde vienen las amenazas y qué puedes hacer para fortalecer tu aplicación web contra los ataques más comunes.

+ + + + + + + + + + + + +
Pre-requisitos:Conocimientos de computación básicos.
Objetivo:Entender las amenazas más comunes para la seguridad de una aplicación web y lo que puedes hacer para reducir el riesgo de que tu sitio sea hackeado.
+ +

¿Qué es la seguridad de sitios web?

+ +

¡Internet es un sitio peligroso! Con mucha frecuencia escuchamos sobre sitios web que dejan de estar disponibles debido a ataques de denegación de servicio, o presentan información modificada (y con frecuencia dañada) en sus páginas de inicio. En otros casos de alto nivel, millones de contraseñas, direcciones de correo electrónico y detalles de tarjetas de crédito han sido filtrados al dominio público, exponiendo a los usuarios del sitio web tanto a bochorno personal como a riesgo finaciero.

+ +

El propósito de la seguridad web es prevenir ataques de esta (o de cualquier otra) clase. Mas formalmente, la seguridad es la acción/práctica de proteger sitios web del acceso, uso, modificación, destrucción o interrupción, no autorizados.

+ +

La seguridad de sitios web eficaz requiere de esfuerzos de diseño a lo largo de la totalidad del sitio web: en tu aplicación web, en la configuración del servidor web, en tus políticas para crear y renovar contraseñas, y en el código del lado cliente. Al mismo tiempo que todo esto suena muy inquietante, la buena noticia es que si estás usando un framework web de lado servidor, es casi seguro que habilitará por defecto mecanismos de defensa robustos y bien pensados contra gran cantidad de los ataques más comunes. Otros ataques pueden mitigarse por medio de la configuración de tu servidor web, por ejemplo habilitando HTTPS. Finalmente, hay herramientas de escaneado de vulnerabilidades disponibles públicamente que pueden ayudarte a averiguar si has cometido algún error obvio.

+ +

El resto de este artículo proporciona más detalle sobre unas pocas amenazas comunes y algunos de los pasos simples que puedes dar para proterger tu sitio.

+ +
+

Nota: Este es un tema de introducción, diseñado para ayudarte a pensar sobre la seguridad de sitios web. No pretende ser exhaustivo.

+
+ +

Amenazas contra la seguridad de sitios web

+ +

Esta sección lista sólo algunas pocas de las amenazas más comunes para los sitios web y cómo son mitigadas. A medida que vayas leyendo, fíjate cómo las amenazas tienen éxito cuando la aplicación web, ¡o confía o no es lo suficientemente paranoica acerca de los datos que vienen del explorador web!

+ +

Cross-Site Scripting (XSS)

+ +

XSS es un término que se usa para describir una clase de ataques que permiten al atacante inyectar scripts de lado cliente, a través del sitio web, hasta los exploradores de otros usuarios. Como el código inyectado va del servidor del sitio al explorador, se supone de confianza, y de aquí que pueda hacer cosas como enviar al atacante la cookie de autorización al sitio del usuario. Una vez que el atacante tiene la cookie pueden iniciar sesión en el sitio como si fuera el verdadero usuario y hacer cualquier cosa que pueda hacer éste. Dependiendo de que sitio sea, esto podría incluir acceso a los detalles de su tarjeta de crédito, ver detalles de contactos o cambiar contraseñas, etc.

+ +
+

Nota: Las vulnerabilidades XSS han sido históricamente más comunes que las de cualquier otro tipo.

+
+ +

Hay dos aproximaciones principales para conseguir que el sitio devuelva scripts inyectados al explorador — se conocen como vulnerabilidades XSS reflejadas y persistentes.

+ + + +

La mejor defensa contra las vulnerabilidades XSS es eliminar o deshabilitar cualquier etiqueta que pueda contener instrucciones para ejecutar código. En el caso del HTML ésto incluye etiquetas como <script>, <object>, <embed>, y <link>.

+ +
+

El proceso de modificar los datos del usuario de manera que no puedan utilizarse para ejecutar scripts o que afecten de otra forma la ejecución del código del servidor, se conoce como "desinfección de entrada" (input sanitization). Muchos frameworks web desinfectan automáticamente la entrada del usuario desde formularios HTML, por defecto.

+
+ +

Inyección SQL

+ +

Las vulnerabilidades de Inyección SQL habilitan que usuarios maliciosos ejecuten código SQL arbitrario en una base de datos, permitiendo que se pueda acceder a los datos, se puedan modificar o borrar, independientemente de los permisos del usuario. Un ataque de inyección con éxito, podría falsificar identidades, crear nuevas identidades con derechos de administración, acceder a todos los datos en el servidor o destruir/modificar los datos para hacerlos inutilizables.

+ +

Esta vulnerabilidad está presente si la entrada del usuario que se pasa a la sentencia SQL subyacente puede cambiar el significado de la misma. Por ejemplo, considera el código de abajo, que pretende listar todos los usuarios con un nombre en particular (userName) que ha sido suministrado en un formulario HTML:

+ +
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
+ +

Si el usuario introduce su nombre real, la cosa funciona como se pretende. Sin embargo un usuario malicioso podría cambiar completamente el comportamiento de esta sentencia SQL a la nueva sentencia de abajo, simplemente especificando para userName el texto de abajo en "negrilla". La sentencia modificada crea una sentencia SQL válida que borra la tabla  users y selecciona todos los datos de la tabla userinfo  (revelando la información de todos los usuarios). Esto funciona por que la primera parte del texto inyectado (a';) completa la sentencia original (' es el símbolo para indicar una cadena literal en SQL).

+ +
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
+
+ +

La manera de evitar esta clase de ataque es asegurar que cualquier dato de usuario que se pasa a un query SQL no puede cambiar la naturaleza del mismo. Una forma de hacer ésto es eludir ('escape') todos los caracteres en la entrada de usuario que tengan un significado especial en SQL.

+ +
+

Nota: La sentencia SQL trata el caracer ' como el principio y el final de una cadena de texto. Colocando el caracter barra invertida \ delante, "eludimos" el símbolo (\'), y le decimos a SQL que lo trate como un caracter de texto (como parte de la misma cadena).

+
+ +

En la sentencia de abajo eludimos el carácter '. SQL interpretará ahora como "nombre" la cadena de texto completa mostrada en negrilla (!un nombre muy raro desde luego, pero no dañino¡)

+ +
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+
+
+ +

Los frameworks web con frecuencia tienen cuidado de hacer por tí la elusión de caracteres. Django, por ejemplo se asegura que cualquier dato de usuario que se pasa a los conjuntos de queries (modelo de queries) está corregido.

+ +
+

Nota: Esta sección se sustenta aquí en la información de Wikipedia.

+
+ +

Cross Site Request Forgery (CSRF)

+ +

Los ataques de CSRF permiten que un usuario malicioso ejecute acciones usando las credenciales de otro usuario sin el conocimiento o consentimiento de éste.

+ +

Este tipo de ataque se explica mejor con un ejemplo. John es un usuario malicioso que sabe que un sitio en particular permite a los usuarios que han iniciado sesión enviar dinero a una cuenta específica usando una petición HTTP POST que incluye el nombre de la cuenta y una cantidad de dinero. John construye un formulario que incluye los detalles de su banco y una cantidad de dinero como campos ocultos, y lo envía por correo electrónico a otros usuarios del sitio (con el botón de Enviar camuflado como enlace a un sitio "hazte rico rápidamente").

+ +

Si el usuario pincha el botón de enviar, se envía al servidor una petición HTTP POST que contiene los detalles de la transacción y todos los cookies de lado-cliente que el explorador asocia con el sitio (añadir cookies asociados con el sitio es un comportamiento normal de los exploradores). El servidor comprobará los cookies, y los usará para determinar si el usuario ha iniciado sesión o no y si tiene permiso para hacer la transacción.

+ +

El resultado es que cualquier usuario que pinche en el botón Enviar mientras tiene la sesión iniciada en el sitio comercial hará la transacción. ¡John se hará rico!

+ +
+

Nota: El truco aquí es que John no necesita tener acceso a los cookies del usuario (o acceso a sus credenciales) — El explorador del usuario almacena esta información, y la incluye automáticamente en todas las peticiones al servidor asociado.

+
+ +

Una manera de prevenir este tipo de ataque por parte del servidor es requerir que la petción POST incluya una palabra secreta específica del usuario generada por el sitio (la palabra secreta podría proporcionarla el servidor cuando envía el formulario web que se usa para hacer transferencias). Esta aproximación evita que John pueda crear su propio formulario, porque necesitaría conocer la palabra secreta que el servidor ha proporcionado para el usuario. Incluso si conociera esta palabra y creara un formulario para un usuario en particular, no podría usar el mismo formulario para atacar a todos los usuarios.

+ +

Los frameworks web incluyen con frecuencia tales mecanismos de prevención de CSRF.

+ +

Otras amenazas

+ +

Otros ataques/vulnerabilidades incluyen:

+ + + +

Hay muchas más. Para un lisado completo ver Category:Web security exploits (Wikipedia) y Category:Attack (Open Web Application Security Project).

+ +

Unos cuantos mensajes clave

+ +

Casi todos los exploits de las secciones anteriores tienen éxito cuando la aplicación web confía en los datos que vienen del explorador. Sea lo que sea que hagas para mejorar la seguridad de tu sitio web, deberías desinfectar todos los datos originados por el usuario antes de ser mostrados en el explorador, usados en queries SQL o pasados en una llamada al sistema operativo o fichero de sistema.

+ +
+

Importante: La lección más importante que debes aprender acerca de la seguridad de sitios web es nunca confíes en los datos del explorador web. Esto incluye los datos en parámetros URL de las peticionesGET, datos POST, cabeceras HTTP y cookies, ficheros subidos por los usuarios, etc. Comprueba siempre y desinfecta todos los datos entrantes. Siempre asume lo peor.

+
+ +

Otras cuantas medidas concretas que puedes tomar son:

+ + + +

Los frameworks web pueden ayudar a mitigar muchas de las vulnerabilidades más comunes.

+ +

Sumario

+ +

Este artículo ha explicado el concepto de seguridad en sitios web y algunas de las amanazas más comunes contra las que tu sitio debería empezar a protegerse. Lo más importante que deberías entender es que ¡una aplicación web no puede confiar en ningún dato que provenga de explorador web! Todos los datos de usuario deberían ser desinfectados antes de ser mostrados, o usados en queries SQL o llamadas a ficheros de sistema.

+ +

Hemos llegado al final de este módulo, tratando tus primeros pasos en la programación de lado servidor de un sitio web. Esperamos que hayas disfrutado del aprendizaje de los conceptos fundamentales y estés listo para seleccionar un framework web y empezar a programar.

+ +

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ + + +

En este módulo

+ + diff --git a/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html b/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html new file mode 100644 index 0000000000..05ce1f9451 --- /dev/null +++ b/files/es/learn/server-side/primeros_pasos/vision_general_cliente_servidor/index.html @@ -0,0 +1,334 @@ +--- +title: Visión General Cliente-Servidor +slug: Learn/Server-side/Primeros_pasos/Vision_General_Cliente_Servidor +tags: + - Aprendizaje + - Codificación de scripts + - Guía + - Principiante + - Programación lado servidor + - Servidor + - introducción +translation_of: Learn/Server-side/First_steps/Client-Server_overview +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

Ahora que conoces el propósito y los beneficios potenciales de la programación de lado-servidor vamos a examinar en detalle lo que ocurre cuando un servidor recibe una "petición dinámica" desde un explorador web. Ya que el código de lado servidor de la mayoría de los sitios web gestiona peticiones y respuestas de formas similares, este artículo te ayudará a entender lo que necesitas hacer para escribir la mayor parte de tu propio código.

+ + + + + + + + + + + + +
Prerequisitos:Conocimientos básicos de computación. Noción básica de lo que es un servidor.
Objetivo:Comprender lo que son las interacciones cliente-servidor en un sitio web dinámico, y en particular que operaciones necesita realizar el código de lado servidor.
+ +

No hay código real en el debate porque ¡todavía no hemos seleccionado el framework web que usaremos para escribir nuestro código! Sin embargo este debate sí que es muy relevante incluso ahora, porque el comportamiento descrito debería ser implementado por tu código de lado servidor independientemente de qué lenguaje de programación o framework web hayas seleccionado.

+ +

Servidores Web y HTTP (iniciación)

+ +

Los exploradores web se comunican con los servidores web usando el Protocolo de Transferencia de HyperTexto (HyperTextTransfer Protocol HTTP). Cuando pinchas en un enlace sobre una página web, envías un formulario o ejecutas una búsqueda, el explorador envía una petición (Request) HTTP al servidor.

+ +

Esta petición incluye:

+ + + +

Los servidores web esperan los mensajes de petición de los clientes, los procesan cuando llegan y responden al explorador web con un mensaje de respuesta HTTP. La respuesta contiene un código de estado de respuesta HTTP que indica si la petición ha tenido éxito o no (ej. "200 OK" para indicar éxito, "404 Not Found" si el resurso no ha podido ser encontrado,  "403 Forbidden" si el usuario no está autorizado a acceder al recurso, etc). El cuerpo de la respuesta de éxito a una petición GET contendría el recurso solicitado.

+ +

Cuando se devuelve una página HTML es renderizada por el explorador web. Como parte del procesamiento el explorador puede descubrir enlaces a otros recursos (ej. una página HTML normalmente referencia las páginas JavaScript y CSS), y enviará peticiones HTTP separadas para descargar estos ficheros.

+ +

Los sitios web tanto estáticos como dinámicos (abordados en las secciones siguientes) usan exactamente los mismos protocolos/patrones de comunicación.

+ +

Ejemplo de petición/respuesta GET

+ +

Puedes realizar una petición GET simplemente pinchando sobre un enlace o buscando en un sitio (como la página inicial de un motor de búsquedas). Por ejemplo, la petición HTTP que se envía cuando realizas una búsqueda en MDN del término "visión general cliente servidor" se parecerá mucho al texto que se muestra más abajo (no será idéntica porque algunas partes del mensaje dependen de tu explorador/configuración).

+ +
+

El formato de los mensajes HTTP está definido en el "estándard web" (RFC7230). No necesitas conocer este nivel de detalle, pero al menos ¡ahora sabes de donde viene todo esto!

+
+ +

La petición

+ +

Cada linea de la petición contiene información sobre ella. La primera parte se llama cabecera o header, y contiene información útil sobre la petición, de la misma manera que un HTML head contiene información útil sobre un documento (pero no el contenido mismo, que está en el cuerpo):

+ +
GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Pragma: no-cache
+Cache-Control: no-cache
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/
+Accept-Encoding: gzip, deflate, sdch, br
+Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+ +

La primera y segunda líneas contienen la mayoría de la información de la que hemos hablado arriba:

+ + + +

La última linea contiene información sobre los cookies del lado cliente — puedes ver que en este caso el cookie incluye un id para gestionar las sesiones (Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...).

+ +

Las líneas restantes contienen información sobre el explorador web usado y la clase de respuestas que puede manejar. Por ejemplo, puedes ver aquí que:

+ + + +

Las peticiones HTTP también pueden tener un cuerpo, pero está vacío en este caso.

+ +

La respuesta

+ +

La primera parte de la respuesta a esta petición se muestra abajo. La cabecera o header contiene información como la siguiente:

+ + + +

Al final del mensaje vemos el contenido del cuerpo (body) — que contiene el HTML real devuelto por la respuesta.

+ +
HTTP/1.1 200 OK
+Server: Apache
+X-Backend-Server: developer1.webapp.scl3.mozilla.com
+Vary: Accept,Cookie, Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:11:31 GMT
+Keep-Alive: timeout=5, max=999
+Connection: Keep-Alive
+X-Frame-Options: DENY
+Allow: GET
+X-Cache-Info: caching
+Content-Length: 41823
+
+
+
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
+<head prefix="og: http://ogp.me/ns#">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
+  ...
+
+ +

El resto de la cabecera de la respuesta incluye información sobre la respuesta (ej. cuándo se generó), el servidor, y cómo espera el explorador manejar la página (ej. la linea X-Frame-Options: DENY le dice que al explorador que no está permitido incrustar esta página en un {{htmlelement("iframe")}} en otro sitio).

+ +

Ejemplo de petición/respuesta POST

+ +

Un HTTP POST se realiza cuando se envía un formulario que contiene información para ser guardada en el servidor.

+ +

La petición

+ +

El texto de abajo muestra la petición HTTP realizada cuando un usuario envía al sitio los detalles de un nuevo perfil. El formato de la petición es casi el mismo que en la petición GET del ejemplo mostrado previamente, aunque la primera linea identifica esta petición como POST. 

+ +
POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
+Host: developer.mozilla.org
+Connection: keep-alive
+Content-Length: 432
+Pragma: no-cache
+Cache-Control: no-cache
+Origin: https://developer.mozilla.org
+Upgrade-Insecure-Requests: 1
+User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
+Content-Type: application/x-www-form-urlencoded
+Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
+Referer: https://developer.mozilla.org/en-US/profiles/hamishwillee/edit
+Accept-Encoding: gzip, deflate, br
+Accept-Language: en-US,en;q=0.8,es;q=0.6
+Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
+
+csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=
+ +

La principal diferencia es que la URL no tiene parámetros. Como puedes ver, la información del formulario se codifica en el cuerpo de la petición (por ejemplo, el nombre completo del nuevo usuario se establece usando: &user-fullname=Hamish+Willee).

+ +

La respuesta

+ +

La respuesta a la petición se muestra abajo. El código de estado "302 Found" le dice al explorador que el POST ha tenido éxito, y que debe realizar una segunda petición HTTP para cargar la página especificada en el campo Location. La información es de lo contrario similar a la respuesta a una petición GET.

+ +
HTTP/1.1 302 FOUND
+Server: Apache
+X-Backend-Server: developer3.webapp.scl3.mozilla.com
+Vary: Cookie
+Vary: Accept-Encoding
+Content-Type: text/html; charset=utf-8
+Date: Wed, 07 Sep 2016 00:38:13 GMT
+Location: https://developer.mozilla.org/en-US/profiles/hamishwillee
+Keep-Alive: timeout=5, max=1000
+Connection: Keep-Alive
+X-Frame-Options: DENY
+X-Cache-Info: not cacheable; request wasn't a GET or HEAD
+Content-Length: 0
+
+ +
+

Nota: Las repuestas y las peticiones HTTP mostradas en estos ejemplos fueron capturadas usando la aplicación Fiddler, pero puedes obtener información similar usando sniffers web (ej. http://web-sniffer.net/) o usando extensiones del explorador como HttpFox. Puedes probarlo por tí mismo. Usa una de las herramientas enlazadas, y a continuación navega a través de un sitio y edita información del perfil para ver las diferentes peticiones y respuestas. La mayoría de los exploradores modernos también tienen herramientas que monitorizan las peticiciones de red (Por ejemplo, la herramienta Network Monitor en Firefox).

+
+ +

Sitios estáticos

+ +

Un sitio estático es aquél que devuelve desde el servidor el mismo contenido establecido de forma fija en el código cada vez que se solicita una página en particular. De manera que si por ejemplo tienes una página sobre un producto en /static/myproduct1.html , a todos los usuarios se les devolverá la misma página. Si añades otro producto similar a tu sitio necesitarás añadir otra página (ej. myproduct2.html) etc... Esto puede llegar a ser realmente muy poco eficiente — ¿qué sucede cuando alcanzas miles de páginas de productos? Repetirías un montón de código a lo largo de cada página (la plantilla básica de la página, la estructura, etc), y si quisieras cambiar cualquier cosa de la estructura de la página — como añadir una nueva sección de "productos relacionados" por ejemplo — tendrías que cambiar cada página individualmente. 

+ +
+

Nota: Los sitios estáticos son excelentes cuando tienes un pequeño número de páginas y quieres enviar el mismo contenido a todos los usuarios. Sin embargo pueden tener un coste de mantenimiento significante a medida que es número de páginas se hace grande.

+
+ +

Recapitulemos cómo funciona ésto, mirando otra vez el diagrama de la arquitectura de un sitio estático que vimos en el anterior artículo.

+ +

A simplified diagram of a static web server.

+ +

Cuando un usuario quiere navegar a una página, el explorador envía una petición HTTP GET especificando la URL de su página HTML. El servidor recupera el documento solicitado de su sistema de ficheros y devuelve una respuesta HTTP conteniendo el documento y un código de estado de respuesta HTTP "200 OK" (indicando éxito). El servidor podría devolver un código de estado diferente, por ejemplo "404 Not Found" si el fichero no está presente en el servidor, o "301 Moved Permanently" si el fichero existe pero ha sido redirigido a una localización diferente.

+ +

El servidor de un sitio estático sólo tendrá que procesar peticiones GET, ya que el servidor no almacena ningún dato modificable. Tampoco cambia sus respuestas basádonse en los datos de la petición HTTP (ej. parámetros URL o cookies). 

+ +

Entendiendo cómo funcionan los sitios estáticos es útil sin embargo cuando se aprende programación de lado servidor, porque los sitios dinámicos gestionan las peticiones de ficheros estáticos (CSS, JavaScript, imágenes estáticas, etc.) exactamente de la misma forma.

+ +

Sitios dinámicos

+ +

Un sitio dinámico es aquél que puede generar y devolver contenido basándose en la URL y los datos específicos de la petición (en vez de devolver siempre para una URL en particular el mismo fichero especificado en el código de forma fija). Usando el ejemplo de un sitio de productos, el servidor almacenaría "datos" del producto en una base de datos en vez de ficheros HTML individuales. Cuando se reciba una petición HTTP GET para un producto, el servidor determina el ID del mismo, extrae los datos de la base y construye la página HTML de la respuesta insertando los datos dentro de la plantilla HTML. Esto tiene una ventaja primordial sobre un sitio estático: 

+ +

Usar una base de datos permite que la información del producto se almacene de forma eficiente y que se pueda ampliar, modificar y buscar fácilmente.

+ +

Usar plantillas HTML hace que sea muy fácil cambiar la estructura HTML, porque sólo se necesita hacer en un sólo lugar, en una única plantilla y no a lo largo de miles de páginas estáticas.

+ +

Anatomía de una petición dinámica

+ +

Esta sección proporciona una visión general paso a paso de un ciclo de petición y respuesta HTTP "dinámicas", construyendo con más detalle lo que vimos en el último artículo. Para "hacer cosas reales" usaremos el contexto del sitio web de un manager de equipos deportivos donde un entrenador puede seleccionar el nombre y tamaño de su equipo en un formulario HTML y obtener de vuelta una sugerencia de "mejor alineación" para el próximo partido. 

+ +

El diagrama de abajo muestra los elementos principales del sitio web del "entrenador del equipo", junto con etiquetas numeradas de la secuencia de operaciones cuando el entrenador accede a su lista de "mejor equipo". Las partes del sitio que lo hacen dinámico son las Aplicaciones Web (que es como llamaremos al código del lado servidor que procesa las peticiones HTTP y devuelve respuestas HTTP), la Base de Datos, que contiene la información sobre los jugadores, equipos, entrenadores y sus relaciones, y las Plantillas HTML.

+ +

This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.

+ +

Después de que el entrenador envíe el formulario con el nombre del equipo y el número de jugadores, la secuencia de operaciones es la siguiente:

+ +
    +
  1. El explorador web crea una petición HTTP GET al servidor usando la URL base del recurso (/best) y codifica el equipo y número de jugadores como parámetros URL (ej. /best?team=my_team_name&show=11) o formando parte de un patrón URL (ej. /best/my_team_name/11/). Se usa una petición GET porque la petición sólo recoge datos (no modifica ninguno).
    2. +
  2. El Servidor Web detecta que la petición es "dinámica" y la reenvía a la Aplicación para que la procese (el servidor web determina como manejar diferentes URLs basándose en reglas de emparejamiento de patrones definidas en su configuración).
    3. +
  3. La Aplicación Web identifica que la intención de la petición es obtener la "lista del mejor equipo" basándose en la URL (/best/) y encuentra el nombre del equipo y el número de jugadores requeridos a partir de la URL. La Aplicación Web obtiene entonces la información solicitada de la base de datos (usando parámetros "internos" adicionales que definen qué jugadores son los "mejores", y posiblemente también obteniendo la identidad del entrenador que ha iniciado sesión a partir de un cookie del lado cliente).
    4. +
  4. La Aplicación Web crea dinámicamente una página HTML por medio de colocar los datos (de la base) en marcadores de posición dentro de la plantilla HTML.
    5. +
  5. La Aplicación Web devuelve el HTML generado al explorador web (via el Servidor Web), junto con un código de estado HTTP de 200 ("éxito"). Si algo impide que se pueda devolver el HTML entonces la Aplicación Web devolverá otro código — por ejemplo "404" para indicar que el equipo no existe.
    6. +
  6. El Explorador Web comenzará a continuación a procesar el HTML devuelto, enviando peticiones separadas para obtener cualquier otro fichero CSS o JavaScript que sea referenciado (ver paso 7).
    7. +
  7. El Servidor Web carga ficheros estáticos del sistema de ficheros y los devuelve al explorador directamente (de nuevo, la gestión correcta de los ficheros está basada en las reglas de configuración y de emparejamiento de patrones URL).
    8. +
+ +

La operación de actualizar un registro de la base de datos se gestionaría de forma similar, excepto que, como para cualquier actualización de la base de datos, la petición HTTP desde el explorador debería ser codificada como petición POST. 

+ +

Realización de otros trabajos

+ +

La misión de una Aplicación Web es recibir peticiones HTTP y devolver respuestas HTTP. Mientras que interactuar con la base datos para obtener o actualizar información son tareas muy comunes, el código puede hacer otras cosas al mismo tiempo, o no interactuar con una base de datos en absoluto.

+ +

Un buen ejemplo de una tarea adicional que una  Aplicación Web podría realizar sería el envío de un correo electrónico a los usuarios para confirmar su registro en el sitio. El sito podría también realizar logging u otras operaciones.

+ +

Devolución de alguna otra cosa distinta a HTML

+ +

El código lado servidor de un sitio web no tiene que devolver fragmentos/ficheros HTML en la respuesta. Puede en vez de eso crear dinámicamente y devolver otros tipos de ficheros (texto, PDF, CSV, etc.) o incluso datos (jSON, XML, etc.).

+ +

La idea de devolver datos a un explorador web de forma que pueda actualizar su propio contenido dinámicamente ({{glossary("AJAX")}}) ha estado dando vueltas durante bastante tiempo. Más recientemente han llegado a ser muy populares las "apps de una sola página", donde el sitio web entero está escrito con un solo fichero HTML que es actualizado dinámicamente cuando se necesita. Los sitios web creados usando este estilo de aplicación transfieren una gran parte del coste computacional desde el servidor al explorador web, y pueden dar como resultado sitios web que se comportan mucho más como aplicaciones nativas (con una respuesta rápida "highly responsive", etc.).

+ +

Los frameworks Web simplifican la programación de lado servidor

+ +

Los frameworks de lado servidor hacen mucho más fácil escribir código para gestionar las operaciones descritas más arriba.

+ +

Una de las operaciones más importantes que realizan es proporcionar mecanismos simples para mapear las URLs de diferentes recursos/páginas a funciones para su gestión específicas. Esto hace más fácil mantener separado el código asociado con cada recurso. Esto tiene también beneficios en términos de mantenimiento, ya que puedes cambiar la URL usada para entregar una característica particular en un sitio, sin tener que cambiar la función de gestión.

+ +

Por ejemplo, considera el siguiente código Django (Python) que mapea dos patrones URL a dos funciones de visualización. El primer patrón asegura que una petición HTTP con una URL de  /best sea pasada a la función llamada index() en el módulo views. En cambio, una petición que tiene el patrón "/best/junior", se pasará a la función de visualización junior().

+ +
# file: best/urls.py
+#
+
+from django.conf.urls import url
+
+from . import views
+
+urlpatterns = [
+    # example: /best/
+    url(r'^$', views.index),
+    # example: /best/junior/
+    url(r'^junior/$', views.junior),
+]
+ +
+

Nota: El primer parámetro en las funciones url() puede parecer un poco extraño (ej. r'^junior/$') porque usan una técnica de emparejamiento de patrones llamada "expresiones regulares" ("regular expressions", RegEx, o RE). No necesitas saber cómo funcionan las expresiones regulares en este momento, tan sólo que nos permiten emparejar patrones en el URL (en vez de los valores insertados en el código de forma fija que veíamos más arriba) y los usan como parámetros en nuestras funciones de visualización. Como ejemplo, una RegEx simple podría decir "empareja una simple letra mayúscula, seguida de entre 4 y 7 letras minúsculas."

+
+ +

El framework web también hace fácil a una función de visualización extraer información de la base de datos. La estructura de nuestros datos está definida en modelos, que son las clases Python que definen los campos que serán almacenados en la base de datos subyacente. Si tenemos un modelo llamado Team con un campo de "team_type" podemos usar un query de sintaxis simple para recuperar todos los equipos que son de un tipo particular.

+ +

Los ejemplos de abajo recuperan una lista de todos los equipos que tienen el team_type de "junior" exacto (teniendo en cuenta la capitalización, mayúsculas o minúsculas) — nota de formato: el nombre del campo (team_type) seguido de un guión bajo doble, y a continuación el tipo de emparejamiento a usar (en este caso exact). Hay muchos otros tipos de emparejamiento y podemos encadenarlos fácilmente. Podemos controlar el orden y número de resultados que se devuelven. 

+ +
#best/views.py
+
+from django.shortcuts import render
+
+from .models import Team
+
+
+def junior(request):
+    list_teams = Team.objects.filter(team_type__exact="junior")
+    context = {'list': list_teams}
+    return render(request, 'best/index.html', context)
+
+ +

Después de que la función junior() obtenga la lista de equipos junior, llama a la función render(), pasándole el HttpRequest original,  una plantilla HTML, y un objeto "contexto" que define la información a ser incluida en la plantilla. La función render() es una función de conveniencia que genera HTML usando un contexto y una plantilla HTML, y devuelve un objeto HttpResponse.

+ +

Obviamente los frameworks web pueden ayudarte con un monton de otras tareas. Debatiremos sobre un montón más de beneficios y opciones de frameworks web en el próximo artículo.

+ +

Sumario

+ +

En este punto deberías tener una buena visión general de las operaciones que el código de lado servidor tiene que realizar, y conocer algunas de las formas en que un framework web de lado servidor las puede hacer más fáciles.

+ +

En el módulo siguiente te ayudaremos a elegir el mejor Framework Web para tu primer sitio.

+ +

{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ +

 

+ +

En este módulo

+ + + +

 

diff --git a/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html b/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html new file mode 100644 index 0000000000..8c381a772e --- /dev/null +++ b/files/es/learn/server-side/primeros_pasos/web_frameworks/index.html @@ -0,0 +1,306 @@ +--- +title: Frameworks Web de lado servidor +slug: Learn/Server-side/Primeros_pasos/Web_frameworks +tags: + - Aprendizaje + - Codificación de scripts + - Frameworks web + - Guía + - Principiante + - Programación lado servidor + - Servidor + - introducción +translation_of: Learn/Server-side/First_steps/Web_frameworks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
+ +

El artículo anterior te mostró que pinta tiene la comunicación entre los clientes web y los servidores, la naturaleza de las peticiones y respuestas HTTP, y lo que necesita hacer una aplicación web de lado servidor para responder a las peticiones de un explorador web. Con este conocimiento en nuestra mochila, es hora de explorar cómo los frameworks web pueden simplificar estas tareas, y darte una idea de cómo escogerías un framework para tu primera aplicación web de lado servidor.

+ + + + + + + + + + + + +
Prerequisitos: +

Conocimientos de computación básicos. Comprensión de alto nivel de cómo gestiona y responde a las peticiones HTTP el código de lado servidor (ver Visión general Cliente-Servidor).

+
Objetivo: +

Entender cómo los frameworks web pueden simplificar el desarrollo/mantenimiento de código de lado servidor y conseguir que los lectores piensen sobre la elección del framework para su propio desarrollo.

+
+ +

Las siguientes secciones ilustran algunos puntos usando fragmentos de código tomados de frameworks web reales. No te preocupes si no todo tiene sentido ahora; te pondremos a trabajar sobre el código en nuestros módulos de framework específicos.

+ +

Visión general

+ +

Los frameworks de lado servidor (es decir, "los frameworks de aplicaciones web") son frameworks software que hacen más fácil escribir, mantener y escalar aplicaciones web. Proporcionan herramientas y bibliotecas que simplifican tareas comunes de desarrollo web, incluyendo enrutado de URLs a los manejadores apropiados, interactuación con bases de datos, soporte de sesiones y autorizaciones de usuario, formateado de la salida (ej, HTML, JSON, XML), y mejora de la seguridad contra los ataques web.

+ +

La sección siguiente proporciona un poco más detalle sobre cómo los frameworks web pueden facilitar el desarrollo de aplicaciones web. Explicaremos a continuación algunos de los criterios que puedes usar para elegir un framework web, y luego hacer una lista de algunas de tus opciones.

+ +

¿Qué puede hacer por tí un framework web?

+ +

Los frameworks web proporcionan herramientas y bibliotecas para simplificar operaciones comunes de desarrollo web. No tienes que usar un framework web de lado servidor, pero se recomienda encarecidamente — te hará la vida mucho más fácil.

+ +

Esta sección debate algo de la funcionalidad que proporcionan con frecuencia los frameworks web (!no todo framework proporcionará necesariamente todas estas caracteríticas!)

+ +

Trabajar directamente con peticiones y respuestas HTTP

+ +

Como vimos en el último artículo, los servidores web y los exploradores se comunican vía el protocolo HTTP — los servidores esperan las peticiones HTTP del explorador y devuelven información en respuestas HTTP. Los frameworks web te permiten escribir sintaxis simplificada que generará el código de lado servidor para trabajar con estas peticiones y respuestas. Esto significa que tendrás un trabajo más fácil, interacción más fácil, código de más alto nivel en vez de primitivas de red de bajo nivel.

+ +

El ejemplo de más abajo muestra cómo funciona ésto en el framework web Django (Python). Cada función de visualización "view" (un manejador de peticiones) recibe un objeto HttpRequest que contiene información de petición, y se le pide devolver un objeto HttpResponse con la salida formateada (en este caso una cadena de texto).

+ +
# Django view function
+from django.http import HttpResponse
+
+def index(request):
+    # Get an HttpRequest (request)
+    # perform operations using information from the request.
+    # Return HttpResponse
+    return HttpResponse('Output string to return')
+
+ +

Enrutado de peticiones al manejador adecuado

+ +

La mayoría de sitios proporcionan un gran número de recursos diferentes, accesibles a través de distintas URLs. La gestión de todo esto en una sola función sería difiicil de mantener, de manera que los frameworks web proporcionan mecanismos simples para mapear patrones URL a funciones de gestión específicas. Esta aproximación tiene también beneficios en términos de mantenimiento, porque puedes cambiar el URL que se usa para entregar una característica en particular sin tener que cambiar el código subyacente.

+ +

Diferentes frameworks usan diferentes mencanismos para el mapeo. Por ejemplo, el framework web Flask (Python) añade rutas a las funciones de visualización usando un "decorador".

+ +
@app.route("/")
+def hello():
+    return "Hello World!"
+ +

Por el contrario Django espera que los desarrolladores definan una lista de mapeos URL entre un patrón URL y una función de visualización.

+ +
urlpatterns = [
+    url(r'^$', views.index),
+    # example: /best/myteamname/5/
+    url(r'^(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
+]
+
+ +

Fácil acceso a los datos en la petición

+ +

Los datos pueden codificarse en una petición HTTP de muchas maneras. Una petición GET para recuperar ficheros o datos de un servidor puede codificar los datos que se necesitan en parámetros URL o dentro de una estructura URL. Una petición POST para actualizar un recurso en el servidor puede en cambio incluir la información de actualización como "datos POST" dentro del cuerpo de la petición. La petición HTTP puede también incluir información sobre la sesión o usuario actual en un cookie de lado cliente.

+ +

Los frameworks web proporcionan mecanismos apropiados del lenguaje de programación para acceder a esta información. Por ejemplo, el objeto HttpRequest  que pasa Django a toda función de visualización contiene métodos y propiedades para acceder a la URL de destino, el tipo de petición (ej. HTTP GET), parámetros GET  o POST, cookie y datos de session, etc. Django puede también pasar información codificada en la estructura de la URL definiendo "patrones de captura" en el mapeador URL (mira el último fragmento de código de la sección de arriba).

+ +

Abstraer y simplificar el acceso a bases de datos

+ +

Los sitios web utilizan bases de datos para almacenar información tanto para ser compartida con los usuarios como sobre los propios usuarios. Los frameworks web proporcionan frecuentemente una capa de base de datos que abstrae las operaciones de lectura, escritura, consulta y borrado de la base. Nos referimos a esta capa de abstracción como Mapeador de Objetos Relacionados (Object-Relational Mapper, ORM).

+ +

Usar un ORM tiene dos beneficios:

+ + + +

Por ejemplo, el framework web de Django proporciona un ORM, y utiliza la referencia del objeto usado para definir la estructura de un registro similar al modelo. El modelo especifica los tipos de campos que se almacenarán, lo que puede proporcionar una validación a nivel de campo sobre qué información se puede guardar (ej. un campo de email sólo permitiría direcciones válidas de correo electrónico). Las definiciones de campos pueden también especificar su tamaño máximo, etiquetas de texto para los formularios, etc. El modelo no establece ninguna información sobre la base de datos subyacente ya que ese es un ajuste de configuración que se puede cambiar de forma separada de nuestro código.

+ +

El primer fragmento de código más abajo muestra un modelo de Django muy simple para un objeto Team. Éste almacena el nombre y nivel del equipo como campos de caracteres y especifica el número máximo de éstos que pueden almacenarse en cada registro. El team_level es un campo de selección, de manera que proporcionamos un mapeo entre las opciones a mostrar en pantalla y los datos a almacenar, junto con un valor por defecto.

+ +
#best/models.py
+
+from django.db import models
+
+class Team(models.Model):
+    team_name = models.CharField(max_length=40)
+
+    TEAM_LEVELS = (
+        ('U09', 'Under 09s'),
+        ('U10', 'Under 10s'),
+        ('U11, 'Under 11s'),
+        ...  #list our other teams
+    )
+    team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
+
+ +

El modelo de Django proporciona una API de consulta simple para buscar en la base de datos. Ésta puede comprobar coincidencias contra un gran número de campos al mismo tiempo usando diferentes criterios (ej. exacto, insensible a las mayúsculas, mayor que, etc.), y puede soportar sentencias complejas (por ejemplo, puedes especificar una búsqueda de equipos U11 que tengan un nombre de equipo que empiece por "Fr" or finalice con "al").

+ +

El segundo fragmento de código muestra una función de visualización (manejador de recurso) para mostrar en pantalla todos nuestros equipos U09. En este caso especificamos que queremos filtrar todos los registros donde el campo team_level tenga exactamente el texto 'U09' (fíjate debajo cómo este criterio se pasa como argumento a la función filter() con el nombre de campo y tipo de coincidencia separados por guiones bajos dobles: team_level__exact).

+ +
#best/views.py
+
+from django.shortcuts import render
+from .models import Team
+
+def youngest(request):
+    list_teams = Team.objects.filter(team_level__exact="U09")
+    context = {'youngest_teams': list_teams}
+    return render(request, 'best/index.html', context)
+
+ +
+
+ +

Renderización de datos

+ +

Los frameworks web proporcionan con frecuencia sistemas de plantillas. Éstas te permiten especificar la estructura de un documento de salida, usando marcadores de posición para los datos que serán añadidos cuando se genere la página. Las plantillas se usan con frecuencia para crear HTML, pero también pueden crear otros tipos de documentos.

+ +

Los frameworks web proporcionan con frecuencia un mecanismo para facilitar la generación de otros formatos a partir de los datos almacenados, incluyendo {{glossary("JSON")}} y {{glossary("XML")}}.

+ +

Por ejemplo, el sistema de plantillas de Django te permite especificar variables usando una sintaxis de "llaves dobles" (ej. {{ variable_name }}),  que serán reemplazadas por valores pasados desde la función de visualización cuando la página sea renderizada. El sistema de plantillas también proporciona soporte para expresiones (con la sintaxis: {% expression %}), que permite a las plantillas realizar operaciones simples como iterar sobre la lista de valores pasados a la misma.

+ +
+

Nota: Muchos otros sistemas de plantillas usan una sintaxis similar, ej.: Jinja2 (Python), Handlebars (JavaScript), Moustache (JavaScript), etc.

+
+ +

El fragmento de código de abajo muestra como hacer este trabajo. Continuando el ejemplo del "equipo más joven" de la sección anterior, la "view" pasa a la plantilla HTML una variable tipo lista llamada youngest_teams. Dentro del esqueleto HTML tenemos una expresión que primero comprueba que la variable youngest_teams existe, y luego itera sobre ella en un bucle for. En cada iteración la plantilla presenta en pantalla el valor del team_name  del equipo de uno de los elementos de la lista.

+ +
#best/templates/best/index.html
+
+<!DOCTYPE html>
+<html lang="en">
+<body>
+
+ {% if youngest_teams %}
+    <ul>
+    {% for team in youngest_teams %}
+        <li>\{\{ team.team_name \}\}</li>
+    {% endfor %}
+    </ul>
+{% else %}
+    <p>No teams are available.</p>
+{% endif %}
+
+</body>
+</html>
+
+ +

Como escoger un framework web

+ +

Existen muchos frameworks web para casi todos los lenguajes de programación que quieras usar (listamos unos pocos de los frameworks más populares en la sección siguiente). Con tantas opciones, llega a ser difícil deducir qué framework proporciona el mejor punto de partida para tu nueva aplicación web. 

+ +

Algunos de los factores que pueden afectar tu decisión son:

+ + + +

Hay muchos otros posibles factores, incluyendo licenciamiento, si el framework está bajo desarrollo activo o no, etc.

+ +

Si eres un completo principiante en la programación probablemente escogerás tu framework basándote en la "facilidad de aprendizaje". Además de la "facilidad de uso" del lenguaje mismo, la alta calidad de la documentación/tutoriales y una comunidad activa que ayuda a nuevos usuarios son tus recursos más valiosos. Nosotros hemos escogido Django (Python) y Express (Node/JavaScript) para escribir nuestros ejemplos de más adelante en el curso, principalmente porque son fáciles de aprender y tienen un buen soporte.

+ +
+

Nota: Vayamos a los sitios principales de Django (Python) y Express (Node/JavaScript) y comprobemos su documentación y su comunidad.

+ +
    +
  1. Navega a los sitios principales (enlazados abajo) +
      +
    • Pincha en los enlaces de los menus de Documentación (cosas que se llaman como "Documentación, Guía, Referencia API, Primeros Pasos".
      • +
    • ¿Puedes ver temas que te muestran como configurar enrutado URL, plantillas y bases de datos/modelos?
      • +
    • ¿Son los documentos suficientemente claros?
      • +
    +
    2. +
  2. Navega a las listas de correo de cada sitio (accesible desde los enlaces de Comunidad). +
      +
    • ¿Cuántas preguntas se han realizado en unos pocos días recientes?
      • +
    • ¿Cuántas tienen respuestas?
      • +
    • ¿Tienen una comunidad activa?
      • +
    +
    3. +
+
+ +

¿Unos pocos frameworks web buenos?

+ +

Avancemos ahora, y debatamos unos pocos frameworks web específicos de lado servidor.

+ +

Los frameworks de lado servidor de más abajo representan unos pocos de los más populares disponibles en el momento de escribir este artículo. Todos ellos tienen todo lo que necesitas para ser productivo — son de código abierto, están bajo desarrollo activo, tienen comunidades entusiastas creando documentación y ayudando a los usuarios en paneles de debate, y se usan en un gran número de sitios web de perfil alto. Hay muchos otros frameworks de lado servidor fantásticos que puedes descubrir usando una búsqueda básica en internet. 

+ +
+

Nota: ¡Las descripciones vienen (parcialmente) de los sitios web de los frameworks!

+
+ +

Django (Python)

+ +

Django es un Framework Web Python de alto nivel que promueve el desarrollo rápido y limpio y el diseño pragmático. Construido por desarrolladores experimentados, tiene en cuenta muchos de los problemas del desarrollo web, de manera que puedes focalizarte en escribir el código de tu app sin necesidad de reinventar la rueda. Es gratis y de código abierto.

+ +

Django sigue la filosofía de "Baterias incluidas" y proporciona casi todo lo que la mayoría de desarrolladores querría hacer "de fábrica". Como todo está incluido, todo funciona en conjunto, sigue principios de diseño consistentes y tiene una extensa documentación actualizada. Es también veloz, seguro y muy escalable. Al estar basado en Python, el código de Django es fácil de leer y de mantener.

+ +

Entre los sitios populares que usan Django (según su página web) se incluyen: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.

+ +

Flask (Python)

+ +

Flask es un microframework para Python. 

+ +

A pesar de ser minimalista, Flask puede crear sitios web "de fábrica". Contiene un servidor de desarrollo y depurador, e incluye soporte para plantillas Jinja2, cookies seguros, prueba de unidades, y distribución de peticiones RESTful. Tiene  buena documentación y una comunidad activa. 

+ +

Flask se ha vuelto extremadamente popular, particularmente entre desarrolladores que necesitan proporcionar servicios web en sistemas pequeños, y con recursos escasos (ej. ejecutar un servidor web en una  Raspberry Pi, Controladores de Drones, etc.)

+ +

Express (Node.js/JavaScript)

+ +

Express es un framework web veloz, no dogmático, flexible y minimalista para Node.js (Node es un entorno sin explorador web para ejecutar JavaScript). Proporciona un conjunto de características robusto para aplicaciones web y móviles y entrega valiosos métodos de utilidades HTTP y middleware.

+ +

Express es extremadamente popular, en parte porque facilita la migración de programadores web de JavaScript de lado cliente a desarrollo de lado servidor, y en parte porque es eficiente con los recursos (el entorno de node subyacente usa multitarea ligera dentro de un thread en vez de expandirse en procesos separados para cada nueva petición web).

+ +

Debido a que Express es un framework web minimalista no incorpora cada componente que querrías usar (por ejemplo, el acceso a bases de datos y el soporte de usuarios y sesiones se proporciona a través de bibliotecas independientes). Hay muchos componentes independientes excelentes, !pero algunas veces puede ser difícil deducir cuál es el mejor para un propósito en particular!

+ +

Muchos frameworks populares y completamente equipados (incluyendo ambos tipos de frameworks de lado servidor y de lado cliente) están basados en Express, como Feathers, ItemsAPI, KeystoneJS, Kraken, LEAN-STACK, LoopBack, MEAN, and Sails.

+ +

Un montón de compañías de perfil alto usan Express, como: Uber, Accenture, IBM, etc. (aquí tienes una lista).

+ +

Ruby on Rails (Ruby)

+ +

Rails (normalmente referenciado como "Ruby on Rails") es un framework web escrito para el lenguaje de programación Ruby.

+ +

Rails sigue una filosofía de diseño muy similar a Django. Como Django proporciona mecanismos estándard para el enrutado de URLs, acceso a datos de bases, generación de plantillas y formateo de datos como {{glossary("JSON")}} o {{glossary("XML")}}. Promueve de forma similar el uso de patrones de diseño como DRY ("dont repeat yourself", no te repitas — escribir el código una única vez si es posible), MVC (model-view-controller) y numerosos otros.

+ +

Hay por supuesto muchas diferencias debido a decisiones específicas de diseño y la naturaleza de los lenguajes.

+ +

Rails se usa en sitios de perfil alto, como: Basecamp, GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, Zendesk, Square, Highrise.

+ +

ASP.NET

+ +

ASP.NET es un framework web de código abierto desarrollado por Microsoft para construir aplicaciones y servicios modernos. Con ASP.NET puedes crear rápidamente sitios web basados en HTML, CSS, y JavaScript, escalarlos para ser usados por milllones de usuarios y añadir fácilmente capacidades complejas como APIs web, formularios sobre datos o comunicaciones en tiempo real.

+ +

Uno de los diferenciadores de ASP.NET es que está construido sobre el Common Language Runtime (CLR), permitiendo a los programadores escribir código ASP.NET usando cualquier lenguaje .NET soportado (C#, Visual Basic, etc.). Como muchos productos Microsoft se beneficia de herramientas excelentes (frecuentemente gratuitas), y una comunidad de desarrolladores activa, y documentación bien escrita.

+ +

ASP.NET se usa por Microsoft, Xbox.com, Stack Overflow, y muchos otros.

+ +

Mojolicious (Perl)

+ +

Mojolicious es un framework web de nueva generación para el lenguaje de programación Perl.

+ +

Hace tiempo en los primeros días de la Web, mucha gente aprendió Perl gracias a una magnífica biblioteca llamada CGI. Era lo suficientemente simple para empezar sin saber mucho sobre el lenguaje y lo suficientemente potente para mantenerte en marcha. Mojolicious implementa esta idea usando el último grito de las tecnologías.

+ +

Algunas de las caracteríticas que proporciona Mojolicious son: Framework Web en tiempo real, para crecer fácilmente desde prototipos de un solo fichero hasta aplicaciones web MVC bien estructuradas; rutas RESTful, plugins, comandos, plantillas especificas de Perl, negociación de contenidos, gestión de sesiones, validación de formatos, framework de pruebas, servidor de ficheros estáticos, detección de CGI/PSGI, soporte Unicode de primera clase; Implementación  cliente/servidor completamente equipada de HTTP y WebSocket con IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 proxy, UNIX domain socket, Comet (long polling), keep-alive, connection pooling, timeout, cookie, y soporte de compresión multipart y gzip; parseadores JSON y HTML/XML y generadores con soporte de selector CSS; Muy limpio, portable y API orientada a objetos y Perl puro sin magia oculta; Código fresco basado en años de experiencia, gratis y de código abierto.

+ +

Sumario

+ +

Este artículo ha mostrado que los frameworks web pueden hacer fácil el desarrollo y mantenimiento del código de lado servidor. También ha proporcionado una visión general de alto nivel de unos pocos frameworks más populares y debatido los criterios para elegir el framework para una aplicación web. Deberías tener en este momento una idea de cómo elegir un framework web para tu propio desarrollo de lado servidor. Si no, no te preocupes — más tarde a lo largo del curso te daremos tutoriales detallados de Django y Express para darte algo de experiencia de funcionamiento real con un framework web.

+ +

Para el próximo artículo de este módulo cambiaremos de dirección ligeramente y consideraremos la seguridad web.

+ +

{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}

+ +

 

+ +

En este modulo

+ + + +

 

diff --git a/files/es/learn/using_github_pages/index.html b/files/es/learn/using_github_pages/index.html new file mode 100644 index 0000000000..81a7138430 --- /dev/null +++ b/files/es/learn/using_github_pages/index.html @@ -0,0 +1,103 @@ +--- +title: ¿Cómo se utiliza Github pages? +slug: Learn/Using_Github_pages +translation_of: Learn/Common_questions/Using_Github_pages +--- +

GitHub es un sitio "social coding". Te permite subir repositorios de código para almacenarlo en el sistema de control de versiones Git. Tu puedes colaborar en proyectos de código, y el sistema es código abierto por defecto, lo que significa que cualquiera en el mundo puede encontrar tu código en GitHub, usarlo, aprender de el, y mejorarlo. ¡Tú puedes hacer eso con el código de otras personas tambien! Este artículo provee una guía básica para publicar contenido usando la característica gh-pages de Github.

+ +

Publicando contenido

+ +

Github es una comunidad muy importante y útil para involucrarse, y Git/GitHub es un sistema de control de versiones muy popular — la mayoría de las empresas de tecnología ahora lo utilizan en su flujo de trabajo. GitHub tiene una característica muy útil llamada GitHub pages, que te permite publicar el código del sitio en vivo en la Web.

+ +

Configuración básica de Github

+ +
    +
  1. Primero que todo, instala Git en tu máquina. Este es el software del sistema de control de versiones subyacente en el que GitHub funciona.
    2. +
  2. Seguido, Regístrate para una cuenta de GitHub. Es simple y fácil.
    3. +
  3. Una vez te hayas registrado, inicia sesión en github.com con tu nombre de usuario y contraseña.
    4. +
+ +

Preparando tu código para subirlo

+ +

Tú puedes almacenar cualquier código que tu quieras en un repositorio de Github, pero para usar la característica páginas de Github con pleno efecto, tu código debe estar estructurado como un sitio web típico, por ejemplo que el punto de entrada primario sea un archivo HTML llamado index.html.

+ +

La otra cosa que necesitas hacer antes de seguir adelante es inicializar el directorio de código como un repositorio Git. para hacer esto:

+ +
    +
  1. Apunta la línea de comandos a tu directorio test-site (o como se llame el directorio que contiene tu sitio web). Para esto, usa el comando cd (Es decir "cambio de directorio"). Esto es lo que deberías digitar si has puesto tu sitio web en un directorio llamado test-site en tu escritorio: + + 
    cd Desktop/test-site
    +
    2. +
  2. Cuando la línea comandos está apuntando hacia el interior del directorio de tu sitio web, digita el siguiente comando, que le dice a la herramienta git para convertir el directorio en un repositorio git:
    3. +
  3. + 
    git init
    +
    4. +
+ +

An aside on command line interfaces

+ +

La mejor manera de subir tu código a Github es mediante la linea de comandos — esta es una ventana donde tú escribe comandos para hacer cosas como crear archivos y ejecutar programas, en lugar de hacer clic dentro de una interfaz de usuario. Se verá algo como esto:

+ +

+ +
+

Nota: Tú también podrías considerar una interfaz gráfica de usuario de Git para hacer el mismo trabajo, si te sientes incómodo con la linea de comandos.

+
+ +

Cada sistema operativo viene con una herramienta de línea de comandos:

+ + + +

Esto puede parecer un poco espantoso al principio, pero no te preocupes — que pronto conseguiras la caída de los conceptos básicos. Tú le dices a la computadora que haga algo en la terminal, digitando un comando y oprimiendo la tecla Enter, como se ha visto anteriormente.

+ +

Creando un repositorio para tu código

+ +
    +
  1. +

    A continuación, tu necesitas crear un nuevo repositorio para colocar tus archivos en el. Has clic en el signo más (+) en la parte superior derecha de la página de inicio de GitHub, luego escoge Nuevo Repositorio.

    +
    2. +
  2. En esta página, en la caja Nombre del Repositorio, digita el nombre para tu repositorio de código, por ejemplo my-repository.
    3. +
  3. También llena una descripción para decir lo que tu repositorio va a contener. Tu pantalla debe mostrar algo como esto:
    +
    4. +
  4. Has Clic en Crear repositorio; Esto debería llevarte a la siguiente página: 
    +
    5. +
+ +

Subiendo tus archivos a GitHub

+ +
    +
  1. En la página actual, tú estás interesado en la sección …o empujar un repositorio existente desde la línea de comandos. Tú deberias ver dos lineas de código listado en esta sección. Copia la totalidad de la primera línea, pégala en la línea de comandos, presiona la tecla Enter. El comando debería mostrarte algo como esto: + + 
    git remote add origin https://github.com/chrisdavidmills/my-repository.git
    +
    2. +
  2. A continuación, digita los siguientes dos comandos, presionando Enter despues de cada uno. Estos preparán el código para subirlo a GitHub, y pida a GIt que administre estos archivos. + 
    git add --all
+git commit -m 'adding my files to my repository'
    +
    3. +
  3. Por último, empuja el código hasta GitHub yendo a la página de GitHub en la que estas e ingresando en la terminal el segundo de los dos comandos que vimos …o empuje un repositorio existente desde la sección de línea de comandos: + 
    git push -u origin master
    +
    4. +
  4. Ahora necesitas crear la rama gh-pages de tu repositorio; actualiza la página actual y verá una página del repositorio algo así como la de abajo. Tú necesitas presionar el boton que dice Branch: master, digita gh-pages en el campo de texto, luego presiona el boton azul que dice Create branch: gh-pages. Esto crea una rama de código especial llamada gh-pages que es publicada en una ubicación especial. La URL toma la forma username.github.io/my-repository-name, asi en mi caso de ejemplo, la URL debería ser https://chrisdavidmills.github.io/my-repository. La página mostrada es la página index.html.
    +
    5. +
  5. Navega tu dirección web de GitHub pages en un nuevo ta del navegador, y tu deberias ver tu sitio en linea! Mandalo por correo electrónico a tus amigos y muestra tu dominio.
    6. +
+ +
+

Nota: Si te atascas, la página de inicio de GitHub Pages también es muy útil.

+
+ +

Un mayor conocimiento de GitHub

+ +

Si deseas realizar más cambios en su sitio de prueba y cargarlos en GitHub, simplemente tendrás que realizar el cambio en tus archivos como antes. A continuación, debes introducir los siguientes comandos (pulsando Intro después de cada uno) para empujar los cambios a GitHub:

+ +
git add --all
+git commit -m 'another commit'
+git push
+ +

Puedes reemplazar otro commit con un mensaje más adecuado para describir qué cambio acaba de hacer.

+ +

Apenas hemos arañado la superficie de Git.Para obtener más información, comience con el sitio de ayuda de GitHub.

diff --git "a/files/es/lo_b\303\241sico_de_mercurial/index.html" "b/files/es/lo_b\303\241sico_de_mercurial/index.html" new file mode 100644 index 0000000000..5dc5837e0b --- /dev/null +++ "b/files/es/lo_b\303\241sico_de_mercurial/index.html" @@ -0,0 +1,48 @@ +--- +title: lo básico de Mercurial +slug: lo_básico_de_Mercurial +tags: + - Desarrollando_Mozilla + - Mercurial + - NecesitaRevisiónGramatical + - NecesitaRevisiónTécnica + - Todas_las_Categorías +translation_of: Mozilla/Mercurial/Basics +--- +

Voy a contarte algunas cosas sobre Mercurial que te evitarán mucha frustación. Esta página es cínica y orientada a la supervivencia, pero aún así sostengo que Mercurial es mucho mejor que CVS. —jorendorff 16:06, 12 May 2008 (PDT) +

+

Expectativas

+

Mercurial no es CVS. Las órdenes no son las mismas. Los conceptos no son los mismos. +

Esta pistola está cargada. Te puedes disparar en el pie. Puedes perder trabajo. La herramienta intenta protegerte, pero aún así puede suceder. Los dos modos de equivocarse más comunes son: (a) ejecutas una orden sin saber lo que va a hacer; (b) ejecutas hg commit o hg qrefresh con una idea equivocada de la situación de tu directorio de trabajo. Así que accidentalmente confirmas cambios que no querías confirmar (commit); o accidentalmente subes una fusión errónea (broken merge); etc. A menudo no es inmediatamente obvio que ha sucedido algo malo. +

La advertencia te permite ser precavido. No hagas estas cosas. No ejecutes órdenes sin saber lo que van a hacer —hg help es tu amigo. No confirmes cambios sin hacer primero un diff y pensarlo dos veces. Y no te dejes caer en el "modo diversión" y dejes de prestar atención al hecho de que estás jugando con tu propio trabajo pendiente de subir. +

Mercurial no es polvo mágico. Mercurial es flexible, potente, y divertido. Te permite intentar cosas que nunca habrías probado en CVS. Pero, por supuesto, no todo tiene porque acabar siendo una buena idea (por ejemplo, nosotros intentamos compartir colas de parches. Y resultó ser una porquería). +

+

Evitar los problemas

+

Usa Mercurial 1.0 o posterior (hg version para comprobarlo). +

Aprende a manejarte Usa órdenes de sólo-lectura (como hg status, hg head, hg parents, hg log, hg diff) para comprobar el estado de tu repositorio. Ésta es una habilidad fundamental. +

Configura un programa de fusión (un merge program) y asegúrate de que sabes cómo usarlo. HAZLO YA. En caso contrario acabarás cargándote tu repositorio en algún momento. +

CVS deja marcadores de conflicto en tus archivos en ocasiones. Mercurial no: en su lugar, quiere que corrijas los conflictos inmediatamente, usando un programa de fusión (como kdiff3) que abrirá para ti. +

Esto puede favorecer los errores. Por defecto, Mercurial usa el primer programa de fusión que encuentra en tu sistema, y la mayoría de los programas de fusión son bastante difíciles de usar correctamente. Mercurial no hace un buen trabajo detectando las fusiones canceladas y rechazando proseguir, así que limitarse a cerrar una ventana puede ponerte sin querer en una mala situación. Hay historias de hombres maduros que han salido huyendo de árboles hg completos que contenía muchas horas de trabajo, echándole la culpa a un comportamiento inexplicable de hg, debido todo a una fusión errónea. +

Si una fusión falla, asegúrate de que Mercurial sabe que ha fallado. Cuando estás comenzando a aprender los fundamentos, las fusiones a menudo salen mal. Podrías ver este mensaje: +

+
0 files updated, 0 files merged, 0 files removed, 1 files unresolved
+There are unresolved merges, you can redo the full merge using:
+  hg update -C 2
+  hg merge 1
+
+

Esto significa que algunos conflictos no se resolvieron durante la fusión. Si no sabes exactamente cuáles son y cómo corregirlos, usa esa orden hg update -C para decirle a Mercurial que has desistido de esa fusión. +

Si no lo haces, Mercurial no se enterará, y la próxima vez que confirmes cambios, creará un conjunto de cambios (changeset) con la fusión. Esto es mal. El resultado puede parecerse mucho a destruir accidentalmente un puñado de trabajo, pero el daño puede deshacerse. +

Si hg parents muestra dos padres, estás fusionando. +

Si usas colas de Mercurial (Mercurial Queues), haz una copia de seguridad de tu trabajo. ¡hg qrefresh reemplaza de manera destructiva el parche antiguo con el nuevo! Usa hg qinit -c para crear un repositorio de respaldo separado para tus parches y hg qcommit -m backup regularmente. +

No uses colas de Mercurial en un repositorio del que alguien podría descargar. +

+

Recuperarse

+

¡Vaya! ¡Mercurial te acaba de cortar el brazo! +

No pruebes cosas al azar para ver si lo arreglan mágicamente. Recuerda que tienes las de perder, y desconecta la sierra eléctrica mientras aún te quede un brazo bueno. +

Consigue ayuda en el IRC. Prueba #hg o #developers en el IRC de Mozilla o #mercurial en freenode. +

+
+
+
+
+{{ languages( { "ja": "ja/Mercurial_basics", "en": "en/Mercurial_basics" } ) }} diff --git "a/files/es/localizaci\303\263n/index.html" "b/files/es/localizaci\303\263n/index.html" new file mode 100644 index 0000000000..def1406446 --- /dev/null +++ "b/files/es/localizaci\303\263n/index.html" @@ -0,0 +1,16 @@ +--- +title: Localización +slug: Localización +tags: + - Localización +translation_of: Glossary/Localization +--- +

  

+

La localización es el proceso de traducción de interfaces de usuario de un lenguaje a otro y adaptación para que una cultura extranjera lo comprenda. Estos recursos tratan sobre cómo hacer aplicaciones/extensiones de Mozilla localizables.

+
+ +

Documentación

Sistema de traducción de extensiones para NAVE
"Este documento tiene como principal objetivo fomentar la traducción de extensiones mediante un sistema escalable que, aunque inicialmente puede ser complicado de entender, al final, se minimiza el tiempo total empleado en generar un paquete de idioma con la traducción."
Creación de instaladores
Este documento explica cómo hacer instaladores de productos Mozilla 100% es-ES a partir del correspondiente instalador original en-US y los paquetes de idioma es-ES más, en algunos casos, archivos adicionales de personalización es-ES.
Escribir código localizable
Esta página te explica las buenas prácticas y directrices al tratar con código UI en relación a la localización. Está dirigido a desarrolladores de Mozilla y sus extensiones.
Localizando las descripciones de las extensiones
Para localizar la descripción de una extensión (secuencia que muestra arriba y abajo el nombre de la extensión en ventanas de extensiones), necesitas utilizar una clave especial para anular la descripción especificada en su archivo install.rdf. Este artículo contiene instrucciones de cómo modificar esta tecla de preferencia.

Ver todo...

Comunidad

  • En la comunidad Mozilla... en ingles

{{ DiscussionList("dev-l10n", "mozilla.dev.l10n") }}

Ver todo...

Herramientas

Ver todo...

Temas Relacionados

Extensiones, Desarrollando Mozilla, XUL
+

Categorías

+

Interwiki Language Links

+

  

+

{{ languages( { "de": "de/Lokalisierung", "en": "en/Localization", "fr": "fr/Localisation", "it": "it/Localization", "ja": "ja/Localization", "pl": "pl/Lokalizacja", "pt": "pt/Localiza\u00e7\u00e3o", "zh-tw": "zh_tw/\u672c\u5730\u5316" } ) }}

diff --git "a/files/es/localizaci\303\263n_y_plurales/index.html" "b/files/es/localizaci\303\263n_y_plurales/index.html" new file mode 100644 index 0000000000..665b0afc2a --- /dev/null +++ "b/files/es/localizaci\303\263n_y_plurales/index.html" @@ -0,0 +1,386 @@ +--- +title: Localización y Plurales +slug: Localización_y_Plurales +tags: + - Internacionalizacion + - Internationalization + - Localización + - Localization +translation_of: Mozilla/Localization/Localization_and_Plurals +--- +

{{ Fx_minversion_header(3) }} Probablemente estas aquí porque estás localizando un archivo .properties el cual poseía un enlace a esta página. Esta página explica cómo localizar esas cadenas para mostrar la forma plural correcta al usuario. Por ejemplo, "una página" contra "dos páginas".

+ +

Si estás aquí para hacer tu código (por ejemplo, una extensión) localizable para formas plurales, puedes ir directo aDesarrollar con Formas Plurales, pero probablemente necesitarás localizar las cadenas iniciales de tu código, por lo que será bueno que leas al menos hasta la sección Uso inclusive.

+ +

Uso

+ +

Aquí hay un par de términos usados en esta página para ayudar a mantener la claridad:

+ + + +

Si estas aquí por las Reglas Plurales en el archivo chrome/global/intl.properties , necesitarás averiguar quéregla plural elegir para tu localización. Esta regla plurall se usa para determinar cuántasformas plurales se necesitan para cada palabra que necesita ser localizada teniendo en cuenta los plurales.

+ +

Para todos los otros archivos de propiedades (properties files) que enlacen a esta página, necesitarás proveer sucifientes formas plurales de la palabra deseada y separarlas con punto y coma (;). Si no sabes cuántas formas plurales necesitas, revisa el número Regla Plural en chrome/global/intl.properties y búsca la entrada correspondiente en la siguiente lista de reglas plurales.

+ +

Lista de Reglas Plurales

+ +

Esta sección contiene una lista de reglas plurales ordenada por su número de regla plural. Cada entrada indica cuántas formas plurales se necesitan cuando se localiza una palabra. Para cada entrada, existe una lista de familias y lenguajes en esas familias para ayudarte a decidir si esa es la regla que deves elegir como Regla Plural. Además, hay una breve descripción de cada forma plural seguida de algunos números de ejemplo que caen dentro de esa forma particular.

+ +

Para una regla plural dada, el orden en que las formas plurales son listadas es el mismo orden que necesitas para localizar una palabra, separado por punto y coma. Por ejemplo el inglés usa la regla plural 1, luego localizar plurales requeriría cadenas como "plural;plurales" donde la primer palabra es la forma singulas y la segunda es la forma plural general.

+ +

Plural rule #0 (1 form)

+ +

Families: Asian (Chinese, Japanese, Korean, Vietnamese), Turkic/Altaic (Turkish), Thai
+ everything: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, …

+ +

Plural rule #1 (2 forms)

+ +

Families: Germanic (Danish, Dutch, English, Faroese, Frisian, German, Norwegian, Swedish), Finno-Ugric (Estonian, Finnish, Hungarian), Language isolate (Basque), Latin/Greek (Greek), Semitic (Hebrew), Romanic (Italian, Portuguese, Spanish, Catalan)
+ is 1: 1
+ everything else: 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, …

+ +

Plural rule #2 (2 forms)

+ +

Families: Romanic (French, Brazilian Portuguese)
+ is 0 or 1: 0, 1
+ everything else: 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …

+ +

Plural rule #3 (3 forms)

+ +

Families: Baltic (Latvian)
+ is 0: 0
+ ends in 1, not 11: 1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …
+ everything else: 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33, 34, 35, 36, 37, 38, 39, 40, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 53, 54, 55, …

+ +

Plural rule #4 (3 forms)

+ +

Families: Celtic (Scottish Gaelic)
+ is 1: 1
+ is 2: 2
+ everything else: 0, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …

+ +

Plural rule #5 (3 forms)

+ +

Families: Romanic (Romanian)
+ is 1: 1
+ is 0 or ends in 01-19: 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, …
+ everything else: 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, …

+ +

Plural rule #6 (3 forms)

+ +

Families: Baltic (Lithuanian)
+ ends in 1, not 11: 1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …
+ ends in 0 or ends in 10-20: 0, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, …
+ everything else: 2, 3, 4, 5, 6, 7, 8, 9, 22, 23, 24, 25, 26, 27, 28, 29, 32, 33, 34, 35, 36, 37, 38, 39, 42, 43, 44, 45, 46, 47, 48, 49, 52, 53, 54, 55, 56, 57, 58, 59, 62, 63, 64, 65, 66, 67, 68, 69, 72, 73, …

+ +

Plural rule #7 (3 forms)

+ +

Families: Slavic (Croatian, Serbian, Russian, Ukrainian)
+ ends in 1, not 11: 1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …
+ ends in 2-4, not 12-14: 2, 3, 4, 22, 23, 24, 32, 33, 34, 42, 43, 44, 52, 53, 54, 62, 63, 64, 72, 73, 74, 82, 83, 84, 92, 93, 94, 102, 103, 104, 122, 123, 124, 132, 133, 134, 142, 143, 144, 152, 153, 154, 162, 163, 164, 172, 173, 174, 182, 183, …
+ everything else: 0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 26, 27, 28, 29, 30, 35, 36, 37, 38, 39, 40, 45, 46, 47, 48, 49, 50, 55, 56, 57, 58, 59, 60, 65, 66, 67, 68, 69, 70, 75, 76, 77, …

+ +

Plural rule #8 (3 forms)

+ +

Families: Slavic (Slovak, Czech)
+ is 1: 1
+ is 2-4: 2, 3, 4
+ everything else: 0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, …

+ +

Plural rule #9 (3 forms)

+ +

Families: Slavic (Polish)
+ is 1: 1
+ ends in 2-4, not 12-14: 2, 3, 4, 22, 23, 24, 32, 33, 34, 42, 43, 44, 52, 53, 54, 62, 63, 64, 72, 73, 74, 82, 83, 84, 92, 93, 94, 102, 103, 104, 122, 123, 124, 132, 133, 134, 142, 143, 144, 152, 153, 154, 162, 163, 164, 172, 173, 174, 182, 183, …
+ everything else: 0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 25, 26, 27, 28, 29, 30, 31, 35, 36, 37, 38, 39, 40, 41, 45, 46, 47, 48, 49, 50, 51, 55, 56, 57, 58, 59, 60, 61, 65, 66, 67, 68, …

+ +

Plural rule #10 (4 forms)

+ +

Families: Slavic (Slovenian, Sorbian)
+ ends in 01: 1, 101, 201, …
+ ends in 02: 2, 102, 202, …
+ ends in 03-04: 3, 4, 103, 104, 203, 204, …
+ everything else: 0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, …

+ +

Plural rule #11 (5 forms)

+ +

Families: Celtic (Irish Gaeilge)
+ is 1: 1
+ is 2: 2
+ is 3-6: 3, 4, 5, 6
+ is 7-10: 7, 8, 9, 10
+ everything else: 0, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, …

+ +

Plural rule #12 (4 forms)

+ +

Families: Semitic (Arabic)
+ is 1: 1
+ is 2: 2
+ ends in 03-10: 3, 4, 5, 6, 7, 8, 9, 10, 103, 104, 105, 106, 107, 108, 109, 110, 203, 204, 205, 206, 207, 208, 209, 210, …
+ everything else but is 0 and ends in 00-02, excluding 0-2: 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, …
+ ends in 00-02, excluding 0-2: 100, 101, 102, 200, 201, 202, …
+ is 0: 0

+ +

Plural rule #13 (4 forms)

+ +

Families: Semitic (Maltese)
+ is 1: 1
+ is 0 or ends in 01-10: 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, …
+ ends in 11-19: 11, 12, 13, 14, 15, 16, 17, 18, 19, 111, 112, 113, 114, 115, 116, 117, 118, 119, 211, 212, 213, 214, 215, 216, 217, 218, 219, …
+ everything else: 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, …

+ +

Plural rule #14 (3 forms)

+ +

Families: Slavic (Macedonian)
+ ends in 1: 1, 11, 21, 31, 41, 51, 61, 71, 81, 91, 101, 111, 121, 131, 141, 151, 161, 171, 181, 191, 201, 211, 221, 231, 241, 251, 261, 271, 281, 291, …
+ ends in 2: 2, 12, 22, 32, 42, 52, 62, 72, 82, 92, 102, 112, 122, 132, 142, 152, 162, 172, 182, 192, 202, 212, 222, 232, 242, 252, 262, 272, 282, 292, …
+ everything else: 0, 3, 4, 5, 6, 7, 8, 9, 10, 13, 14, 15, 16, 17, 18, 19, 20, 23, 24, 25, 26, 27, 28, 29, 30, 33, 34, 35, 36, 37, 38, 39, 40, 43, 44, 45, 46, 47, 48, 49, 50, 53, 54, 55, 56, 57, 58, 59, 60, 63, …

+ +

Plural rule #15 (2 forms)

+ +

Families: Icelandic, Macedonian
+ ends in 1, excluding 11: 1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …
+ everything else: 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 25, 26, 27, 28, 29, 30, 32, 33, 34, 35, 36, 37, 38, 39, 40, 42, 43, 44, 45, 46, 47, 48, 49, 50, 52, 53, 54, …

+ +

Plural rule #16 (5 forms)

+ +

Families: Celtic (Breton)
+ ends in 1, excluding 11, 71, 91: 21, 31, 41, 51, 61, 81, 101, 121, 131, 141, 151, 161, 181, 201, 221, 231, 241, 251, 261, 281, ...
+ ends in 2, excluding 12, 72, 92: 2, 22, 32, 42, 52, 62, 82, 102, 122, 132, 142, 152, 162, 182, 202, 222, 232, 242, 252, 262, 282, ...
+ ends in 3, 4 or 9 excluding 13, 14, 19, 73, 74, 79, 93, 94, 99: 3, 4, 9, 23, 24, 29, 33, 34, 39, 43, 44, 49, 53, 54, 59, ...
+ ends in 1000000: 1000000: 1000000, 2000000, 3000000, 4000000, 5000000, 6000000, 7000000, 8000000, 9000000, 10000000, ...
+ everything else: 0, 5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 26, 27, 28, 30, 35, 36, 37, 38, 40, ...

+ +

Plural rule #17 (2 forms)

+ +

Families: Ecuador indigenous languages (Shuar)
+ is 0: 0
+ everything else: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …

+ +

Plural rule #18 (6 forms)

+ +

Families: Welsh
+ is 0: 0
+ is 1: 1
+ is 2: 2
+ is 3: 3
+ is 6: 6
+ everything else: 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, …

+ +

Plural rule #19 (3 forms)

+ +

Families: Slavic (Bosnian, Croatian, Serbian)
+ ends in 1, excluding 11: 1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, …
+ ends in 2-4, excluding 12-14: 2, 3, 4, 22, 23, 24, 32, 33, 34, 42, 43, 44, 52, 53, 54, 62, 63, 64, 72, 73, 74, 82, 83, 84, 92, 93, 94, 102, 103, 104, 122, 123, 124, 132, 133, 134, 142, 143, 144, 152, 153, 154, 162, 163, 164, 172, 173, 174, 182, 183, …
+ everything else: 0, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 25, 26, 27, 28, 29, 30, 35, 36, 37, 38, 39, 40, 45, 46, 47, 48, 49, 50, 55, 56, 57, 58, 59, 60, 65, 66, 67, 68, 69, 70, 75, 76, 77, …, 112, 113, ..., 212, 213, ...

+ +

Ejemplos

+ +

Se presentan ejemplos para varios lenguajes y un breve proceso de pensamiento.

+ +

Frances

+ +

Some French speaking places treat 0 as plural while others treat it as singular. The only other singular is 1 while everything else is plural. So pick either plural rule #1 or #2.

+ +

pluralRule=2
+ seconds=seconde;secondes
+ minutes=minute;minutes
+ hours=heure;heures
+ days=jour;jours

+ +

Like many other times when localizing words, gender agreement might force you to rearrange words in a way that the gender is always the same. (seconde vs jour)

+ +

Chino

+ +

A word doesn't change if there is a different number in front of it, so all numbers use the same plural form. With just one plural form, it has to be plural rule #0. For each word to localize, it's just like localizing a single word with no semi-colons needed.

+ +

pluralRule=0
+ seconds=?
+ minutes=?
+ hours=?
+ days=?

+ +

Polaco

+ +

There's a singular form for 1, a plural form for 2-4, and another for 5-21 at which point 22 is the same as 2. Plural rule #7 has a "ends in 2-4, not 12-14" but the singular form includes everything ending in 1 except 11. Plural rule #9 has the correct singular form for only 1.

+ +

pluralRule=9
+ seconds=sekunda;sekundy;sekund
+ minutes=minuta;minuty;minut
+ hours=godzina;godziny;godzin
+ days=dzien;dni;dni

+ +

Even though the last 2 plural forms of "day" are the same, both are still needed because there needs to be 3 plural forms for each word.

+ +

Sorabo

+ +

There are 4 plural forms: nominative singular, nominative dual, nominative plural, genitive plural. These match up with plural rule #10.

+ +

pluralRule=10
+ seconds=sekunda;sekundze;sekundy;sekundow
+ minutes=mjenšina;mjenšinje;mjenšiny;mjenšin
+ hours=hodzina;hodzinje;hodziny;hodzin
+ days=dzen;dnjej;dny;dnjow

+ +

Testing Extension

+ +

To help make sure you pick the right plural rule and provide enough plural forms for strings, you should use the pluralForm Checker extension. After installing the extension, it should be available from the Tools menu.

+ +

To use it, list off the property files and properties that you want to check and click the button. The extension will load each property and display the plural forms in a table. Selecting a table entry will populate the bottom box with sample uses of the word for some numbers.

+ +

Image:pluralForm-checker.0.3.png

+ +

Install pluralForm Checker v0.3 extension

+ +

Extension input

+ +

It would be good to keep this list updated with all the words that need plural forms. People using the extension can then copy/paste this input.

+ +

chrome://mozapps/locale/downloads/do...tes,hours,days
+ chrome://mozapps/locale/downloads/do...dsTitlePercent
+ chrome://browser/locale/browser.prop...ausedDownloads

+ +

Version history

+ +

0.1: Initial version with pluralRule check, properties input loading, table generation, sample output display
+ 0.2: Use PluralForm.numForms() to get the number of forms instead of figuring out locally to better support future rules - Requires build from 2007/01/27 or later
+ 0.3: Generate a list of what numbers fall into which plural form to minimize the sample output to at most 3 of each form

+ +

Desarrollar con Formas Plurales

+ +

The functionality for getting the correct plural forms is provided by a JavaScript Module, PluralForm.jsm. This module provides a couple methods for localizing to the browser's current locale as well as getting methods to localize to a desired plural rule. The latter ability of specifying a plural rule is useful for extensions because the extension doesn't necessarily have to be localized to the browser's locale.

+ +

Loading PluralForm.jsm

+ +

Loading the PluralForm module from JavaScript is simple with Components.utils.import. Just put the following line somewhere that will be evaluated before you want to use PluralForm. At the top of your JavaScript file is fine.

+ +
Components.utils.import("resource://gre/modules/PluralForm.jsm");
+ +

Methods: get and numForms

+ +

These methods make use of the browser's current locale specified by chrome://global/locale/intl.properties's pluralRule value.

+ +
/**
+ * Get the correct plural form of a word based on the number
+ *
+ * @param aNum
+ *        The number to decide which plural form to use
+ * @param aWords
+ *        A semi-colon (;) separated string of words to pick the plural form
+ * @return The appropriate plural form of the word
+ */
+string pluralForm
+get(int aNum, string aWords)
+ +
/**
+ * Get the number of forms for the current plural rule
+ *
+ * @return The number of forms
+ */
+int numForms
+numForms()
+ +

Here is an example of using these methods:

+ +
// Load PluralForm and for this example, assume English
+Components.utils.import("resource://gre/modules/PluralForm.jsm");
+
+// PluralForm.get expects a semi-colon separated list of words
+let forms = "form;forms";
+// We're going to pick the correct plural form based on the following number
+let numForms = PluralForm.numForms();
+
+// Display the correct plural form for "forms"
+print("This locale has " + numForms + " " + PluralForm.get(numForms, forms) + ".");
+
+ +

The above example works, but is still difficult to localize because we're concatenating strings assuming a particular grammatical structure. The following would be better:

+ +
Components.utils.import("resource://gre/modules/PluralForm.jsm");
+
+let forms = "This locale has one form.;This locale has #1 forms.";
+let numForms = PluralForm.numForms();
+
+// For English, this would display "This locale has 2 forms."
+print(PluralForm.get(numForms, forms).replace("#1", numForms);
+ +

Notice in the above example that the code can be written to support placeholders or not use placeholders in some forms of the string. Additionally, the localizer has control over where the placeholder is in relation to the rest of the text.

+ +

Of course, the strings to be localized will be placed in a separate file such as yourextension.properties instead of being hardcoded in the JavaScript code file.

+ +

The following 3 file snippets show how to use PluralForm with your .xul, .properties, .js files.

+ +

downloads.xul:

+ +
<stringbundleset>
+  <stringbundle id="strings" src="chrome://downloads.properties"/>
+</stringbundleset>
+ +

downloads.properties:

+ +
# LOCALIZATION NOTE (downloadsTitleFiles): Semi-colon list of plural forms.
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+# #1 number of files
+# example: 111 files - Downloads
+downloadsTitleFiles=#1 file - Downloads;#1 files - Downloads
+
+# LOCALIZATION NOTE (timePair): #1 time number; #2 time unit
+# example: 1 second; 11 seconds
+timePair=#1 #2
+seconds=second;seconds
+ +

downloads.js:

+ +
Components.utils.import("resource://gre/modules/PluralForm.jsm");
+let getStr = function(string) document.getElementById("strings").getString(string);
+
+// Get the correct plural form for the title
+let numDownloads = 3;
+let title = PluralForm.get(numDownloads, getStr("downloadsTitleFiles"));
+// Put in the correct number of downloads
+print(title.replace("#1", numDownloads));
+
+// Get the correct plural form of seconds
+let timeLeft = 55;
+let seconds = PluralForm.get(timeLeft, getStr("seconds"));
+// Print the localized string for "55 seconds"
+print(getStr("timePair").replace("#1", timeLeft).replace("#2", seconds));
+ +

Method: makeGetter

+ +

If you're writing an extension, you'll want to use makeGetter instead of PluralForm.get() or PluralForm.numForms() because someone installing the extension on a different locale will be using the strings provided by your default extension locale. For example, your extension localized for English with plural rule #1, which expects 2 plural forms, is installed on a localized version of Firefox with plural rule #4, which expects 3 forms.

+ +
/**
+ * Create a pair of plural form functions for the given plural rule number.
+ *
+ * @param aRuleNum
+ *        The plural rule number to create functions
+ * @return A pair: [function that gets the right plural form,
+ *                  function that returns the number of plural forms]
+ */
+[string pluralForm get(int aNum, string aWords), int numForms numForms()]
+makeGetter(int aRuleNum)
+ +

Here is an example usage of makeGetter:

+ +
Components.utils.import("resource://gre/modules/PluralForm.jsm");
+
+// Let's get Irish (plural rule #11)
+let [get, numForms] = PluralForm.makeGetter(11);
+
+// Make up some values to use with "get"
+let dummyText = "form 1;form 2;form 3;form 4;form 5";
+let dummyNum = 10;
+
+// In the case of Irish, the value 10 uses plural form #4, so "form 4" is printed
+print(get(dummyNum, dummyText));
+ +

In this example, the Irish plural rule was hardcoded, but this could be a value specified in the .properties file. So for your extension, specify a pluralRule value in the .properties and call PluralForm.makeGetter(pluralRuleFromProperties) making sure to save the 2 returned functions. (You can use destructured assignment in JavaScript 1.7 to keep things clean.) The returned functions act just like PluralForm.get() and PluralForm.numForms() except for the specified plural rule instead of the default plural rule.

+ +

Credits

+ +

Plural Form code first implemented for {{ Bug(394516) }} -Figure out a remaining-time rounding scheme for minutes -> hours/days
+ Plural rules and families derived from GNU gettext documentation.

diff --git a/files/es/localizar_con_narro/index.html b/files/es/localizar_con_narro/index.html new file mode 100644 index 0000000000..7be6efca8b --- /dev/null +++ b/files/es/localizar_con_narro/index.html @@ -0,0 +1,62 @@ +--- +title: Localizar con Narro +slug: Localizar_con_Narro +tags: + - 'Localization:Tools' + - l10n + - narro +--- +

Narro es una práctica herramienta web de traducción que está disponible para los localizadores de los proyectos de Mozilla. Con Narro puedes traducir las aplicaciones de Mozilla en linea y exportando los archivos en ficheros .ZIP o generando archivos .XPI (paquete de idioma) los cuales pueden ser instalados localmente para ser probados. Después de la creación de un proyecto Narro utiliza la “Memoria de traducción” (MT) de tus traducciones para aprovechar el contenido ya traducido.
La función MT te permite centrarte en las nuevas cadenas sin traducir y no enfocandote en la re-traducción de las cadenas de las versiones previamente traducidas.
Este documento te guiará por el proceso de la creación de una nueva localización y proyecto en Narro. Usando Firefox como ejemplo, vamos a cubrir la forma en como iniciar un proyecto en Narro, como usar Narro para traducir la aplicación y como exportar tus traducciones para pruebas localmente en Firefox.
Para aprender acerca de las actualizaciones y cambios del proyecto Narro vista el proyecto Narro y el sitio de la herramienta basada en web. A continuación encontrarás que son un requisito previo para localizar en Narro.

+

 

+

Registrándose en Narro

+

Antes de hacer cualquier otra cosa en Narro, es necesario configurar tu cuenta de usuario. Al hacer clic en el enlace en la esquina superior derecha de la página de inicio Narro te llevará a donde puedas registrar tu cuenta de usuario. Una vez que hayas registrado y conectado, podrás ver todos los diferentes lugares disponibles para trabajar en en el menú desplegable en la esquina superior derecha.

Para nuestros ejemplos, vamos a llamar a nuestra nueva localización  X-prueba. Realiza los siguientes pasos para configurar tu nueva localización.

+


Alternativamente, si tu localización no existe, ponte en contacto con tu comunidad l10n y pregunta acerca de cómo puedes participar!

+
  1. Contacta con los administradores de l10n Mozilla l10n utilizando la lista de distribución dev-l10n para preguntar si  tu localización ya existe.
  2. Si no existe, envía un correo electrónico a  dev-l10n lista de correo y solicita al administrador de Narro para iniciar una nueva localización en Narro para tu localización. En tu mensaje, por favor proporciona la siguiente información:
    •        tu nombre de usuario.
    •        tu idioma.
    •        un regalo. Los productos recién horneados son siempre un buen regalo ;).
    Alternativamente, si tu localización no existe, ponte en contacto con tu comunidad l10n y pregunta acerca de cómo puedes participar!
  3. Después de hacer esto, debes recibir los derechos de mantenimiento (es decir, exportación, importación y permisos de aprobación) para la nueva localización.
  4. Después de recibir estos derechos, salir y entrar de nuevo para activarlos.
    5. +
+

La imagen de abajo es la pantalla que verá una vez que se conecte a activar sus derechos de mantenimiento.

+

+

 

+

Importar

+
Nota: Si ya te has unido a algún proyecto de localización existente, puedes saltarte este paso. Es decir, a menos que estés interesado en aprender acerca de cómo funciona la utilidad de importación, en tal caso continua con este paso..
+

Cuenta de usuario creada: Listo. Proyecto de localización creada por el administrador global: Listo. Activado los derechos de mantenimiento para tu nueva localización: Listo. ¡Felicidades, ya estás listo para importar los archivos fuentes del proyecto Firefox!. La utilidad de importación ubicada en la pestaña Import de tu proyecto Firefox, te dará varias opciones para la importación de archivos para la traducción. ¡Lo bueno de esta utilidad es que es completamente automática!. Tú solo tienes que importar manualmente los archivos fuentes y luego nunca más tienes que preocuparte por hacer esto. La utilidad de importación importa los archivos cada noche, de modo que si tu cadena fué agregada o modificada durante el día la seguirás viendo en tu lista de no traducidos hasta el día siguiente.

Ahora vamos a repasar cómo configurar la utilidad de importación en tu proyecto.

+

 

+
  1.  Verás una lista de enlaces de proyectos inactivos con varios nombres (Firefox Aurora, Firefox Release, etc.) Hazle clic en el enlace del proyecto que tu quieras activar. En este caso le hacemos clic en Firefox Aurora.
  2. Por defecto, está tomada la pestaña de descripción del proyecto. Navega a la etiqueta Import para encontrar la utilidad de importación.
  3. Una vez ahí, encontarás estas secciones de importación:
    •  Texts.- Para importar los archivos fuentes (por ejemplo desde en-US).
    • Translations.- Para la importación de proyectos ya existentes.
    • Options.- Casillas de verificación para configurar la importación.
    • Operation log.- Descripción de la función de Importación que está siendo ejecutada.
  4. Por ahora nos vamos a centrar solo en las secciones Texts y Options. En la sección Texts verás la localización por defecto con los archivos fuente actualizados cada noche por tu proyecto. Asegurate de que las casillas de verificación en Options están destiqueadas para esta importación.
  5. Clic en el botón Import. El Operation log mostrará un mensaje una vez que la importación haya sido completada satisfactoriamente.
    6. +
+

En la imágen de abajo es lo que deberás ver cuando se complete la importación.

+

+

¡¡Ahora ya estás listo para comenzar a traducir tu proyecto!!

+

 

+

Traducción

+

Con la nueva localización entablecida en Narro, tu puedes ahora iniciar la traducción en linea. Una forma rápida de iniciar es hacer clic en la pestaña Translate y te llevará a una pantalla con un conjunto de contenido sin traducir. Las nuevas importaciones de Firefox Aurora (como Firefox 7) contiene 5,671 cadenas en Inglés.
Irónicamente, la primera vez que comienzas a traducir podrás ver las primeras entradas algunos de los archivos region.properties ese archivo no debe ser traducido usando Narro. Encontrarás algunas de esas entradas a medida que avanza en la traducción. Una buena guía para ayudarte a distinguir entre las cadenas traducibles y lo no-traducibles es ver si la cadena puede ser categorizada como uno de los siguientes:

+ +

Cualquier cadena que no caiga dentro de esas dos categorias es traducible. Avanzar con las cadenas traducibles para iniciar la traducción.

+

+


Para el ejemplo de este documento empezaremos a buscar las cadenas de dos diferentes tipos de archivos (los archivos DTD y archivos property). Vamos a hacer cambios a las cadenas de modo que podrás ver el cambio en la interfaz de usuario.

+

Ejemplo 1: Los archivos DTD, "searchbar.dtd"

+

Narro te permite buscar cadenas en particular. Para este ejemplo buscaremos el archivo DTD (a menudo se llama una entidad) llamado searchbar.dtd que contiene la cadena Manage Search Engines... Tu puedes encontrar fácilmente esta cadena en la interfaz de usuario del navegador al hacer clic en el menú desplegable en el cuadro de búsqueda en la esquina superior derecha de tu navegador. Echa un vistazo a la imagen de abajo. En la parte inferior de la lista de botones de búsqueda que aparece podrás ver Manage Search Engines...

+

+

Así es como podrás usar Narro para traducir el elemento Manage Search Engines...

+

1. Navega en la pestaña Translate dentro del proyecto Firefox Aurora.

+

2. Ingresa la cadena “Manage Search Engines... ” en el campo Search for y da clic en Search.

+


Después de ingresar en la cadena y haciendo clic en “Search”, Narro te muestra la cadena que estabas buscando.

+

+

3. Clic en el cuadro de texto debajo del resultado de búsqueda. Esto ampliará el cuadro de texto y lo resaltará en verde para mostrar el registro activo.
4. Entra en la traducción y presiona el botón save.

+

En el ejemplo de abajo verás el elemento  Manage Search Engines... que ha sido traducido a MANAGE SEARCH ENGINES.

Verás también debajo del ícono de guardado que existen dos cadenas adicionales. Estos son mostrados desde una traducción anterior y desde otras traducciones que miembros de tu comunidad pueden haber proporcionado. Los botones verdes y rojos a la derecha te permiten aprobar o eliminar una traducción de la entrada activa. Una traducción aprobada es introducida en la memoria de traducción. No recomendamos aprobar traducciones hasta que estén en su estado final. Para nuestro ejemplo guardas la cadena haciendo clic en el ícono de guardado verde que está a la derecha.

+

+

A medida que traduces estos tipos de archivos DTD, puedes exportar periódicamente un archivo .xpi (también conocido como paquete de idioma) que puedes instalar en Firefox. Hablaremos sobre como hacerlo en una sección posterior de este manual. La próxima vez que instales el paquete de idioma de prueba, verás la cadena  "MANAGE SEARCH ENGINES"  traducida en la interfaz de tu versión local de Firefox.

+

Ejemplo 2: Los Archivos Property, "search.properties"

+

Los archivos Properties search.properties contienen la cadena Add %S. Puedes encontrar facilmente esta cadena en la interfaz del navegador visitando un sitio web que procea de un plugin de búsqueda (como http://developer.mozilla.org/) y haciendo clic en el menú desplegable  en la caja de búsqueda en la esquina superior derecha del navegador. Dale un vistazo a la imagen de abajo. Ahí verás el Add %S, donde %S es reemplazado por el nombre del sitio.

+

+

Traducir las cadenas de los archivos Property es exactamente lo mismo que traducir los archivos DTD. Pero este ejemplo en particular simplemente se refiere a los pasos del ejemplo uno, reemplazando la cadena  “Administar motores de búsqueda...” con el “Add %S” . Al igual que con el archivo DTD tu puedes exportar periodicamente un archivo .xpi que puedes instalar en Firefox para ver tus cadenas traducidas guardadas.

+

Exportando un paquete de idioma .xpi

+

Felicidades! ahora que ya has traducido y guardado varias cadenas, vamos a exportar esas cadenas traducidas para que veas tus traducciones en tu navegador Firefox Aurora.
La utilidad de exportación en la pestaña Export te dá algunas opciones diferentes para la exportación. Algunas opciones son para probar tus traducciones, otras son para que tu traducción final aprobadas que serán incorporadas en la próxima versión de Firefox. Para nuestro ejemplo, nos vamos a concentrar en exportar tu traducción paquete de idioma .xpi

+
  1. Ir a la pestaña Export. En la siguiente imágen se ilustra lo que verás cuando estés en esta pestaña

     

  2. Seleccionar la opción Approved suggestion del menú desplegable Export translations using
  3. Clic en el botón Export.
  4. Una vez la barra de estado esté completa, verás que te aparecen los enlaces .zip, .html, y .xpi. Dale clic en el enlace .xpi para guardarlo en tu disco.
    5. +
+

El paquete de idioma .xpi es construido cada vez que tu exportas tu traducción. Todas las cadenas no traducidas son exportadas en en-US  como parte de tu paquete de idioma. Esto te permitirá que vayas probando el progreso de tu trabajo sobre la marcha.

Cuando exportas archivos, la estructura del código fuente de Mozilla se conserva. En cualquier momento durante la traducción, puedes exportar el paquete en-US.zip por si quieres ver la estructura del código fuente de Firefox de los archivos con cadenas en-US.

+
Aviso: No usar el comando hg push ya que esto es sólo para pruebas locales.
+

Para saber como probar tu reciente paquete de idioma exportado, visita el tema Testing your language pack  en la wiki deCreate a new localization

+

 

+

Exportación Final

+

Una vez que has completado tu traducción, revísala y pruébala y será el momento para hacer la exportación final (en formato .zip) para enviarlo a Mozilla. Para hacer esto envía un email a la lista de correo dev-l10n o al administrador global de Narro pidiendo asistencia.

+
Por favor ten en cuenta que el Mozilla l10n-drivers ha producido el l10n dashboard para seguir el progreso de todas las localizaciones de Mozilla. Esto está basado en una poderosa herramienta llamadaCompare-Locales. Si tu eliges utilizar Narro para tu localización, sé conciente de que narro invalida el dashboard de seguimiento de presición  del proyecto debido a la forma en que Narro maneja las cadenas y las exporta.
diff --git "a/files/es/lugares/gu\303\255a_para_migraci\303\263n_con_lugares/index.html" "b/files/es/lugares/gu\303\255a_para_migraci\303\263n_con_lugares/index.html" new file mode 100644 index 0000000000..1f093b487d --- /dev/null +++ "b/files/es/lugares/gu\303\255a_para_migraci\303\263n_con_lugares/index.html" @@ -0,0 +1,645 @@ +--- +title: Guía para migración con lugares +slug: Lugares/Guía_para_migración_con_lugares +tags: + - páginas_a_traducir +translation_of: Mozilla/Tech/Places/Places_Developer_Guide +--- +

This document is for extension and application developers who want to use the bookmarks and history APIs in Firefox 3. It provides code samples for many common use-cases, such as CRUD operations, searching, and observing.

+ +

Overview

+ +

Places is the umbrella term for a set of APIs for managing browsing history and URI metadata first introduced in Firefox 3. It encompasses history, bookmarks, tags, favicons, and annotations. There are two models of identity in the system: URIs, and unique integer identifiers for items in the bookmark system. Some of the APIs are URI-centric, some use item ids. The API signature and context usually make clear which is required.

+ +

Bookmarks

+ +

The toolkit bookmarks service is nsINavBookmarksService:

+ +
var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                .getService(Ci.nsINavBookmarksService);
+
+ +

This service provides methods for adding, editing and deleting items in the bookmarks collection.

+ +

Types in the Bookmark System

+ +

There are the four types of items in the bookmarks system, and their identifiers in the IDL:

+ + + +

Identifying Items in the Bookmark System

+ +

Items in the bookmarks collection are identified by an id unique to the user's profile. Most of the APIs provided by the bookmarks service use an item's id to identify what to act on.

+ +

The bookmarks datastore is hierarchical, modeling folders and their contents. The ids of several significant folders are made available as attributes of nsINavBookmarksService.

+ + + +

Other Bookmarks APIs

+ +

Note: This document covers the toolkit Places services. However, Firefox developers can take advantage of several helper APIs that are browser-specific:

+ + + +

Creating Bookmarks, Folders and Other Items

+ +

Creating a Bookmark

+ +
// create an nsIURI for the URL to be bookmarked.
+var bookmarkURI = Cc["@mozilla.org/network/io-service;1"]
+                  .getService(Ci.nsIIOService)
+                  .newURI("http://www.mozilla.com", null, null);
+
+var bookmarkId = bookmarks.insertBookmark(
+  bookmarks.toolbarFolder, // The id of the folder the bookmark will be placed in.
+  bookmarkURI,             // The URI of the bookmark - an nsIURI object.
+  bookmarks.DEFAULT_INDEX, // The position of the bookmark in its parent folder.
+  "my bookmark title");    // The title of the bookmark.
+
+ +

Creating a Folder

+ +
var folderId = bookmarks.createFolder(
+  bookmarks.toolbarFolder, // The id of the folder the new folder will be placed in.
+  "my folder title",       // The title of the new folder.
+  bookmarks.DEFAULT_INDEX);    // The position of the new folder in its parent folder.
+
+ +

Creating a Separator

+ +
var separatorId = bookmarks.insertSeparator(
+  bookmarks.toolbarFolder, // The id of the folder the separator will be placed in.
+  bookmarks.DEFAULT_INDEX);    // The position of the separator in its parent folder.
+
+ +

Creating a Livemark

+ +
var IOService = Cc["@mozilla.org/network/io-service;1"]
+                .getService(Ci.nsIIOService);
+
+var siteURI = IOService.newURI("http://www.mozilla.com", null, null);
+var feedURI = IOService.newURI("http://www.mozilla.org/news.rdf", null, null);
+
+var livemarks = Cc["@mozilla.org/browser/livemark-service;2"]
+                .getService(Ci.nsILivemarkService);
+
+livemarks.createLivemark(bookmarks.toolbarFolder, // The id of the folder the livemark will be placed in
+  "My Livemark Title",        // The title of the livemark
+  siteURI,                    // The URI of the site. A nsIURI object.
+  feedURI,                    // The URI of the actual feed. A nsIURI object.
+  bookmarks.DEFAULT_INDEX);   // The position of the livemark in its parent folder.
+
+ +

Accessing Bookmarks and Related Items

+ +

Accessing Item Properties

+ +

For all items:

+ + + +

For bookmarks:

+ + + +

For folders:

+ + + +

Accessing Folder Contents

+ +

Queries in Places are executed through the main history service. The example below shows how to enumerate a bookmark folder's contents, and how to access the properties of the items themselves.

+ +
var history = Cc["@mozilla.org/browser/nav-history-service;1"]
+	 .getService(Ci.nsINavHistoryService);
+var query = history.getNewQuery();
+query.setFolders([myFolderId], 1);
+var result = history.executeQuery(query, history.getNewQueryOptions());
+// The root property of a query result is an object representing the folder you specified above.
+var folderNode = result.root;
+// Open the folder, and iterate over its contents.
+folderNode.containerOpen = true;
+for (var i=0; i < folderNode.childCount; ++i) {
+	var childNode = folderNode.getChild(i);
+	 // Some item properties.
+	var title = childNode.title;
+	var id = childNode.itemId;
+	var type = childNode.type;
+
+	// Some type-specific actions.
+	if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_URI) {
+		var uri = childNode.uri;
+	}
+	else if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_FOLDER) {
+		childNode.QueryInterface(Ci.nsINavHistoryContainerResultNode);
+		childNode.containerOpen = true;
+		// now you can iterate over a subfolder's children
+	}
+}
+
+ +

ther available node types are documented in the IDL.

+ +

Searching Bookmarks

+ +

Queries are executed through the history service. The example below shows how to search through all bookmarks, and to iterate over the results.

+ +
var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                .getService(Ci.nsINavBookmarksService);
+var history = Cc["@mozilla.org/browser/nav-history-service;1"]
+              .getService(Ci.nsINavHistoryService);
+
+var query = history.getNewQuery();
+
+// Specify folders to be searched
+var folders = [bookmarks.toolbarFolder, bookmarks.bookmarksMenuFolder,
+               bookmarks.unfiledBookmarksFolder];
+query.setFolders(folders, folders.length);
+
+// Specify terms to search for, matches against title, URL and tags
+query.searchTerms = "firefox";
+
+var options = history.getNewQueryOptions();
+options.queryType = options.QUERY_TYPE_BOOKMARKS;
+
+var result = history.executeQuery(query, options);
+
+// The root property of a query result is an object representing the folder you specified above.
+var resultContainerNode = result.root;
+
+// Open the folder, and iterate over its contents.
+resultContainerNode.containerOpen = true;
+for (var i=0; i < resultContainerNode.childCount; ++i) {
+  var childNode = resultContainerNode.getChild(i);
+
+  // Accessing properties of matching bookmarks
+  var title = childNode.title;
+  var uri = childNode.uri;
+}
+
+ +

Updating Bookmark Items

+ +

For all items:

+ + + +

For bookmarks:

+ + + +

Deleting Bookmark Items

+ +

With the bookmarks service:

+ + + +

Observing Bookmark Events

+ +

The nsINavBookmarkObserver interface is used for observing bookmarks activity such as item additions, changes and deletions.

+ +
// Create a bookmark observer
+var observer = {
+  onBeginUpdateBatch: function() {
+    // This method is notified when a batch of changes are about to occur.
+    // Observers can use this to suspend updates to the user-interface, for example
+    // while a batch change is occurring.
+  },
+  onEndUpdateBatch: function() {
+    this._inBatch = false;
+  },
+  onItemAdded: function(id, folder, index) {
+  },
+  onItemRemoved: function(id, folder, index) {
+  },
+  onItemChanged: function(id, property, isAnnotationProperty, value) {
+    // isAnnotationProperty is a boolean value that is true of the changed property is an annotation.
+    // You can access a bookmark item's annotations with the <code>nsIAnnotationService</code>.
+  },
+  onItemVisited: function(id, visitID, time) {
+    // The visit id can be used with the History service to access other properties of the visit.
+    // The time is the time at which the visit occurred, in microseconds.
+  },
+  onItemMoved: function(id, oldParent, oldIndex, newParent, newIndex) {
+    // oldParent and newParent are the ids of the old and new parent folders of the moved item.
+  },
+  QueryInterface: function(iid) {
+    if (iid.equals(Ci.nsINavBookmarkObserver) ||
+        iid.equals(Ci.nsISupports)) {
+      return this;
+    }
+    throw Cr.NS_ERROR_NO_INTERFACE;
+  },
+};
+
+// Register the observer with the bookmarks service
+var bmsvc = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+            .getService(Ci.nsINavBookmarksService);
+bmsvc.addObserver(observer, false);
+
+// Un-register the observer when done.
+bmsvc.removeObserver(observer);
+
+
+ +

HTML Import/Export

+ +

The nsIPlacesImportExportService service is used for import and export of bookmarks in the Netscape Bookmarks HTML format. Note that this service is only currently available for Firefox, not other toolkit-based applications.

+ +

Importing:

+ + + +
Note: The method importHTMLFromFileToFolder() method was removed in Gecko 14.0 (Firefox 14.0 / Thunderbird 14.0 / SeaMonkey 2.11).
+ +

Exporting:

+ + + +

Backup/Restore

+ +

The new bookmarks system uses the JSON format for storing backups of users' bookmarks. The APIs are available via the PlacesUtils API in the utils.js Javascript module.

+ +
var Ci = Components.interfaces;
+var Cc = Components.classes;
+var Cu = Components.utils;
+
+// Import PlacesUtils
+Cu.import("resource://gre/modules/PlacesUtils.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
+
+// Create the backup file
+var jsonFile = Services.dirsvc.get("ProfD", Ci.nsILocalFile);
+jsonFile.append("bookmarks.json");
+jsonFile.create(Ci.nsILocalFile.NORMAL_FILE_TYPE, 0600);
+
+// Export bookmarks in JSON format to file
+PlacesUtils.backupBookmarksToFile(jsonFile);
+
+// Restore bookmarks from the JSON file
+// NOTE: This *overwrites* all pre-existing bookmarks
+PlacesUtils.restoreBookmarksFromJSONFile(jsonFile);
+
+ +

History

+ +

The toolkit history service is nsINavHistoryService:

+ +
var history = Cc["@mozilla.org/browser/nav-history-service;1"]
+              .getService(Ci.nsINavHistoryService);
+
+
+ +

The history service provides methods for adding, editing, deleting browser history. It's also the jump-off point for querying and searching the history and bookmarks collections.

+ +

While nsINavHistory is the main interface for history, there are a couple of other interfaces available for legacy and context-specific uses:

+ + + +

Adding to History

+ +

Places provides a couple of interfaces for adding to, and editing the browsing history. The main interface is nsINavHistoryService. Other interfaces that provide specialized abilities are nsIBrowserHistory and nsIGlobalHistory. Examples of the capabilities of each are provided below.

+ +
// Places deals in URIs, so here's a helper for creating them.
+function uri(spec) {
+  return Cc["@mozilla.org/network/io-service;1"].
+         getService(Ci.nsIIOService).
+         newURI(spec, null, null);
+}
+
+// Adding a basic visit via the core Places history service.
+var history = Cc["@mozilla.org/browser/nav-history-service;1"].
+              getService(Ci.nsINavHistoryService);
+var ourURI = uri("http://www.mozilla.com");
+var visitDate = Date.now() * 1000; // in microseconds
+var referrerURI = null; // or a URI
+var isRedirect = false;
+var visitType = history.TRANSITION_LINK; // the visit is from a link that was clicked
+var sessionId = 0; // can link the visit with a specific browsing session
+history.addVisit(ourURI, visitDate, referrerURI,
+                 visitType, isRedirect, sessionId);
+
+// Add a visit to a URL, with a page title and visited time
+// via nsIBrowserHistory.
+var browserHistory = histsvc.QueryInterface(Ci.nsIBrowserHistory);
+var ourURI = uri("http://www.mozilla.com");
+var pageTitle = "Mozilla";
+var visitDate = Date.now() * 1000; // in microseconds
+browserHistory.addPageWithDetails(ourURI, "Mozilla", visitDate);
+
+// Add a visit to a URL, with extended behavior information
+// via nsIGlobalHistory3.
+var globalHistory = Cc["@mozilla.org/browser/global-history;2"].
+                    getService(Ci.nsIGlobalHistory2);
+var ourURI = uri("http://www.mozilla.com");
+var isRedirect = false;
+var isTopLevel = true;
+globalHistory.addURI(ourURI, isRedirect, isTopLevel, referrerURI);
+globalHistory.setPageTitle(ourURI, "Mozilla");
+
+ +

Deleting from History

+ +
// Places deals in URIs, so here's a helper for creating them.
+function uri(spec) {
+  return Cc["@mozilla.org/network/io-service;1"].
+         getService(Ci.nsIIOService).
+         newURI(spec, null, null);
+}
+
+var browserHistory = histsvc.QueryInterface(Ci.nsIBrowserHistory);
+var ourURI = uri("http://www.mozilla.com");
+
+// Remove all visits for a single URL from history
+browserHistory.removePage(ourURI);
+
+// Remove all visits for multiple URLs from history
+var urisToDelete = [ourURI];
+// will call nsINavHistoryObserver.onBeginUpdateBatch/onEndUpdateBatch
+var doNotify = false;
+browserHistory.removePages(urisToDelete, urisToDelete.length, doNotify);
+
+// Remove all visits within a given time period
+var endDate = Date.now() * 1000; // now, in microseconds
+var startDate = endDate - (7 * 86400 * 1000 * 1000); // one week ago, in microseconds
+browserHistory.removePagesByTimeframe(startDate, endDate);
+
+// Remove all pages for a given host
+var entireDomain = true; // will delete from all hosts from the given domain
+browserHistory.removePagesFromHost("mozilla.com", true);
+// Remove all history visits
+browserHistory.removeAllPages();
+ +

Querying History

+ +

The code sample below queries the browser history for the ten most visited URLs in the browser history.

+ +
var historyService = Components.classes["@mozilla.org/browser/nav-history-service;1"]
+                               .getService(Components.interfaces.nsINavHistoryService);
+var query = historyService.getNewQuery();
+var options = historyService.getNewQueryOptions();
+options.sortingMode = options.SORT_BY_VISITCOUNT_DESCENDING;
+options.maxResults = 10;
+
+// execute the query
+var result = historyService.executeQuery(query, options);
+
+// iterate over the results
+result.root.containerOpen = true;
+var count = result.root.childCount;
+for (var i = 0; i < count; i++) {
+  var node = result.root.getChild(i);
+  // do something with the node properties...
+  var title = node.title;
+  var url = node.uri;
+  var visited = node.accessCount;
+  var lastVisitedTimeInMicrosecs = node.time;
+  var iconURI = node.icon; // is null if no favicon available
+}
+
+result.root.containerOpen = false;
+
+ +

Querying History for redirects and from_visit

+ +

Results of type RESULT_TYPE_FULL_VISIT have information about the visit, such as the referring visit, and how the transition happened (typed, redirect, link, etc). The problem is that it is not yet implemented -- see bug 320831. So the only solution for now seems to do one own SQL queries to the Places database.

+ +

Here is how one can get a connection to the Places database:

+ +
function getPlacesDbConn() {
+    return Components.classes['@mozilla.org/browser/nav-history-service;1'].
+      getService(Components.interfaces.nsPIPlacesDatabase).DBConnection;
+}
+
+ +

And then to get the a redirected visit_id from another visit_id:

+ +
function getFromVisit(visit_id) {
+  var sql = <cdata><![CDATA[
+    SELECT from_visit FROM moz_places, moz_historyvisits
+    WHERE moz_historyvisits.id = :visit_id AND moz_places.id = moz_historyvisits.place_id;
+  ]]></cdata>.toString();
+  var sql_stmt = getPlacesDbConn.createStatement(sql);
+  sql_stmt.params.visit_id = visit_id;  
+
+  var from_visit;
+  try {
+    // Here we can't use the "executeAsync" method since have to return a
+    // result right-away.
+    while (sql_stmt.executeStep()) {
+      from_visit = sql_stmt.row.from_visit;
+    }
+  } finally {
+    sql_stmt.reset();
+  }
+  return from_visit;
+}
+
+ +
Note: The <cdata><![CDATA[ xxx ]]></cdata>.toString() notation is E4X and it makes possible to write multi-line strings in JavaScript. This is very useful when writing long SQL statements.
+ +

Searching History

+ +

Queries are executed through the history service. The example below shows how to search through browser history, and to iterate over the results.

+ +
var history = Cc["@mozilla.org/browser/nav-history-service;1"]
+              .getService(Ci.nsINavHistoryService);
+
+var query = history.getNewQuery();
+
+// Specify terms to search for, matches against title and URL
+query.searchTerms = "firefox";
+
+var result = history.executeQuery(query, history.getNewQueryOptions());
+
+// The root property of a query result is an object representing the folder you specified above.
+var resultContainerNode = result.root;
+
+// Open the result, and iterate over it's contents.
+resultContainerNode.containerOpen = true;
+for (var i=0; i < resultContainerNode.childCount; ++i) {
+  var childNode = resultContainerNode.getChild(i);
+
+  // Accessing properties of matching bookmarks
+  var title = childNode.title;
+  var uri = childNode.uri;
+}
+
+ +

Observing History

+ +

The nsINavHistoryObserver interface allows observation of history events such as new visits, page title changes, page expiration and when all history is cleared.

+ +
var history = Cc["@mozilla.org/browser/nav-history-service;1"].
+              getService(Ci.nsINavHistoryService);
+let observer = {
+  onBeginUpdateBatch: function() {
+  },
+  onEndUpdateBatch: function() {
+  },
+  onVisit: function(aURI, aVisitID, aTime, aSessionID, aReferringID, aTransitionType) {
+  },
+  onTitleChanged: function(aURI, aPageTitle) {
+  },
+  onDeleteURI: function(aURI) {
+  },
+  onClearHistory: function() {
+  },
+  onPageChanged: function(aURI, aWhat, aValue) {
+  },
+  onPageExpired: function(aURI, aVisitTime, aWholeEntry) {
+  },
+  QueryInterface: function(iid) {
+    if (iid.equals(Components.interfaces.nsINavHistoryObserver) ||
+        iid.equals(Components.interfaces.nsISupports)) {
+      return this;
+    }
+    throw Cr.NS_ERROR_NO_INTERFACE;
+  }
+};
+
+history.addObserver(observer, false);
+
+ +

New

+ +

Tagging Service

+ +

The tagging of URIs is provided by nsITaggingService. The service is URI-centric, meaning that consumers can tag URIs directly, without first creating a bookmark. The unique identifier is the URI, and all APIs require URIs as nsIURI objects.

+ +
// Get the tagging service
+var tagssvc = Cc["@mozilla.org/browser/tagging-service;1"]
+              .getService(Ci.nsITaggingService);
+
+// Create a URI to tag
+var IOService = Cc["@mozilla.org/network/io-service;1"]
+                .getService(Ci.nsIIOService);
+var myURI = IOService.newURI("http://www.mozilla.com", null, null);
+
+// Tag the URI
+tagssvc.tagURI(myURI, ["mozilla", "firefox"]);
+
+// Get an array of tags for a URI
+var myTags = tagssvc.getTagsForURI(myURI, {});
+
+// Get an array of URIs for a tag
+var taggedURIs = tagssvc.getURIsForTag("mozilla");
+
+// Get an array of all tags
+var arrayOfAllTags = tagssvc.allTags;
+
+// Remove tags from a URI
+tagssvc.untagURI(myURI, ["mozilla", "firefox"]);
+
+ +


+ This service currently integrates with and is internally dependent upon bookmarks:

+ + + +

Annotations

+ +

Annotations provide a way to store small bits of arbitrary data for a URI or a bookmark:

+ +
// Get the annotation service
+var annotations = Cc["@mozilla.org/browser/annotation-service;1"]
+                  .getService(Ci.nsIAnnotationService);
+
+// Create a URI to annotate
+var IOService = Cc["@mozilla.org/network/io-service;1"]
+                .getService(Ci.nsIIOService);
+var myURI = IOService.newURI("http://www.mozilla.com", null, null);
+
+// Add an annotation to the URI, that expires when the URI is deleted
+// or expires from the browser history
+annotations.setPageAnnotation(myURI, "myAnnotation", "notes for this URI...",
+                              0, annotations.EXPIRE_WITH_HISTORY);
+
+// Create a bookmark to annotate
+var bookmarks = Cc["@mozilla.org/browser/nav-bookmarks-service;1"]
+                .getService(Ci.nsINavBookmarksService);
+var myBookmark = bookmarks.insertBookmark(bookmarks.toolbarFolder, myURI,
+                                          bookmarks.DEFAULT_INDEX, "my bookmark");
+
+// Add an annotation to the bookmark, that expires only when
+// the bookmark is deleted
+annotations.setItemAnnotation(myBookmark, "myAnnotation", "notes for this bookmark...",
+                              0, annotations.EXPIRE_WITH_HISTORY);
+
+ +

Note the syntactic difference between the URI and bookmark annotation APIs: URI annotation APIs use "Page" in method names whereas bookmark annotation APIs use "Item" in method names.

+ +

Saved Searches

+ +

New in Firefox 3 is the ability to save searches of bookmarks or history. These saved searches appear as folders in your bookmarks, with a special icon to signify their difference from normal folders. The contents of these folders are updated when expanded, executing the search against the current history and bookmarks collections.

+ +

Saved searches can be formulated as URIs, and added to the bookmarks collection as a normal bookmark. Formulation of search URIs is documented here.

+ +
// Formulate a URI to query for the 10 most visited URIs in the browser history
+var mostVisited = "place:queryType=0&sort=8&maxResults=10";
+
+// Create an nsIURI for the URL to be bookmarked.
+var bookmarkURI = Cc["@mozilla.org/network/io-service;1"]
+                  .getService(Ci.nsIIOService)
+                  .newURI(mostVisited, null, null);
+
+// Add the search to the bookmarks toolbar
+var id = bookmarks.insertBookmark(bookmarks.toolbarFolder, bookmarkURI,
+                                  bookmarks.DEFAULT_INDEX, "Most Visited");
+
diff --git "a/files/es/manifiesto_de_instalaci\303\263n/index.html" "b/files/es/manifiesto_de_instalaci\303\263n/index.html" new file mode 100644 index 0000000000..33fdf324e9 --- /dev/null +++ "b/files/es/manifiesto_de_instalaci\303\263n/index.html" @@ -0,0 +1,653 @@ +--- +title: Manifiesto de instalación +slug: Manifiesto_de_instalación +tags: + - Complementos + - Herramientas_API + - Todas_las_Categorías + - extensiones + - para_revisar + - páginas_a_traducir +translation_of: Archive/Add-ons/Install_Manifests +--- +

Add-ons using the techniques described in this document are considered a legacy technology in Firefox. Don't use these techniques to develop new add-ons. Use WebExtensions instead. If you maintain an add-on which uses the techniques described here, consider migrating it to use WebExtensions.

Starting from Firefox 53, no new legacy add-ons will be accepted on addons.mozilla.org (AMO) for desktop Firefox and Firefox for Android.

Starting from Firefox 57, only extensions developed using WebExtensions APIs will be supported on Desktop Firefox and Firefox for Android.

Even before Firefox 57, changes coming up in the Firefox platform will break many legacy extensions. These changes include multiprocess Firefox (e10s), sandboxing, and multiple content processes. Legacy extensions that are affected by these changes should migrate to use WebExtensions APIs if they can. See the "Compatibility Milestones" document for more information.

A wiki page containing resources, migration paths, office hours, and more, is available to help developers transition to the new technologies.

+ +

Introducción

+ +

De aquí en adelante a los addon les llamaremos complemento. En algunos navegadores Mozilla, dependiendo del idioma español descargado para traducir la interfaz del navegador, se leerá como agregado en Herramientas->Agregado.

+ +

Un manifiesto de instalador es un archivo agregado que la aplicación XUL (Administrador-Habilitado) usa para determinar la información acerca de como un agregado ó complemento (Add-on) ha de ser instalado. Este archivo contiene metadatos que identifican el complemento/agregado, provee información del creador de éste, donde se puede hallar más información acerca del complemento/agregado, con cuales versiones de qué aplicaciones es compatible, como debería ser actualizado y cosas por el estilo.

+ +

El formato de un mainfiesto de instalador es RDF/XML.

+ +

El archivo debe ser llamado install.rdf y ubicarse en el nivel superior del archivo XPI de un complemento.

+ +

Disposición

+ +

La disposición básica de un manifiesto de instalador es algo como esto:

+ +
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <!-- properties -->
+  </Description>
+</RDF>
+
+ +

Algunas propiedades son requeridas, otras son opcionales; algunas tienen cadenas simples, otras son recursos complejos.

+ +

Referencia de propiedades requeridas

+ +

Su manifiesto de instalador debe especificar estas propiedades correctamente, de lo contrario su agregado/complemento podría no instalarse.

+ +

id

+ +

La id de la extension, la cual es un:

+ + + +

Este último formato es significativamente más fácil de generar y manipular. Firefox 1.5 tiene una comprobación para asegurarse que su id caiga dentro de un formato u otro y rechazará la instalació de complemetos/agregados que tengan ids mal formadas.

+ +

Ejemplos

+ +
<em:id>miextension@misitio.com</em:id>
+
+<em:id>{daf44bf7-a45e-4450-979c-91cf07434c3d}</em:id>
+
+ +

versión

+ +

La cadena de versión identificando la versión del complemento que está siendo proveído.

+ +

Para Firefox/Thunderbird 1.0, el formato debe cumplir las reglas especificadas en Extensión de versiones, Actualización y Compatibilidad. Para Firefox/Thunderbird 1.5, ver Herramientas para formato de versión.

+ +

Ejemplos

+ +
<em:version>2.0</em:version>
+
+<em:version>1.0.2</em:version>
+
+<em:version>0.4.1.2005090112</em:version>
+
+
+ +

Firefox 1.5 / XULRunner 1.8 - Complementos/agregados que no usan un formato de versión válido no serán instalados. El formato de la versión es diferente a, pero compatible con, 1.0's.

+ +

Para complementos alojados en addons.mozilla.org - La actualización del sitio web de Mozilla puede reinstalar su complemento/agregado y corregir o rechazar versiones con cadenas de versión malformadas.

+ +

tipo

+ +

Un valor de tipo entero representa el tipo de complemento/agregado.

+ + + + + + + + + + + + + + + + + + + + + + + + +
2Extensiones
4Temas
8Local
16Plugin
32Paquete o programa de tipos múltiples
+ +

Ejemplos

+ +
<em:type>2</em:type>
+
+ +

Nuevo en Firefox 1.5 Esta propiedad fue añadida para Firefox 1.5, y es requerida únicamente para otros tipos de complementos/agregados diferentes a Extensiones y Temas.

+ +

Aplicación destino (targetApplication)

+ +

Un objeto que especifica una aplicación a la cual se dirije este complemento. Esto significa que el complemento trabajará con la aplicación definida por la propiedad id (<em:id>) especificada (para una lista compensiva de IDs de aplicaciones y sus valores máximo y mínimo (min/maxVersions) véase "Versiones de aplicaciones válidas para Desarrolladores de complementos/agregados", desde la versión mínima (<em:minVersion>) hasta e incluyendo la versión máxima (<em:maxVersion>). Estas cadenas para versión tienen el mismo formato que la propiedad de versión y será comparada con la versión de la aplicación; esto permite al autor de la extensión especificar, cuáles extensiones y con qué versiones de Firefox han sido probadas.

+ +

Nota: Las extensiones compatibles con Firefox 3.5 deberán especificar un maxVersion de 3.5 *, por lo que son compatibles con actualizacinoes de seguridad de estabilidad. Para Firefox 3.0, debiera usarse un maxVersion de 3.0.* Las extensiones compatibles únicamente con Firefox o Thunderbird 2.0 deberán especificar un maxVersion de 2.0.0*.

+ +

El manifiesto de instalador debe especificar al menos uno de estos objetos y podría especificar más si el complemento/agregado tiene múltiples aplicaciones destino que soportan al Administrador del complemento/agregado. (por ejemplo Firefox y Thunderbird).

+ +

Ejemplos

+ +
<em:targetApplication>
+ <Description>
+  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> Firefox
+  <em:minVersion>1.5</em:minVersion>
+  <em:maxVersion>2.0.0.*</em:maxVersion>
+ </Description>
+</em:targetApplication>
+
+ +

Nuevo en Firefox 3 Las aplicaciones basadas en Gecko 1.9 te permiten usar la id especial targetApplication id toolkit@mozilla.org para indicar que el complemento/agregado es compatible con cualquier aplicación tipo toolkit que tenga valores similares de minVersion y maxVersion.

+ +

nombre (name)

+ +

El nombre del complemento, previsto para mostrarlo en el interfaz de usuario (UI = User Interface).

+ +

Ejemplos

+ +
<em:name>Mi Extension</em:name>
+
+ +

Referencia de propiedades opcionales

+ +

Podrías necesitar proveer estas propiedades, dependiendo de las capacidades de tu complemento/agregado.

+ +

localizado (localized)

+ +

 

+ +
Edit section
+ +

 

+ +

Nuevo en Firefox 3 Te permite localizar el nombre de tu complemento/agregado, descripción, contribuidores y otros metadatos. La descripción de localized debe especificar al menos un em:locale que indique cuáles locales usan esta información.

+ +

Ejemplos

+ +

Esto declara un set de metadatos de un complemento/agregado para mostrar en pantalla cuando la aplicación se está ejecutando en el local de-DE.

+ +
<em:localized>
+  <Description>
+    <em:locale>de-DE</em:locale>
+    <em:name>Tab Sidebar</em:name>
+    <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description>
+  </Description>
+</em:localized>
+
+ +

Las siguientes propiedades que son descritas en otra parte en ésta página pueden ser incluidas en la propiedad localized:

+ + + +

Más documentos pueden hallarse en Localización de descripción para extensiones.

+ +

descripción (description)

+ +

Una corta descripción del complemento/agregado - Prevista para mostrar en la interfaz de usuario. Esta descripción debe encajar en una corta linea de texto..

+ +

Ejemplos

+ +
<em:description>Herramienta Avanzada foo.</em:description>
+
+ +

creator

+ +

El nombre del creador/desarrollador principal - Prevista para mostrar en la interfaz de usuario.

+ +

Ejemplos

+ +
<em:creator>John Doe</em:creator>
+
+ +

ó

+ +
<em:creator>El Equipo Extensión </em:creator>
+
+ +

developer

+ +
Edit section
+ +

Nuevo en Firefox 2 El/los nombre(s) de co-desarrolladores. Se deben especificar mas de uno de estos valores para especificar múltiples desarrolladores.

+ +

Ejemplos

+ +
<em:developer>Jane Doe</em:developer>
+<em:developer>Koos van der Merwe</em:developer>
+
+ +

translator

+ +
Edit section
+ +

Nuevo en Firefox 2 El/los nombre(s) de traductores. Se deben especificar mas de uno de estos valores para especificar múltiples traductores.

+ +

Ejemplos

+ +
<em:translator>Janez Novak</em:translator>
+<em:translator>Kari Nordmann</em:translator>
+
+ +

contributor

+ +

El/los nombre(s) de contribuidores adicionales. Se deben especificar mas de uno de estos valores para especificar múltiples contribuidores.

+ +

Ejemplos

+ +
<em:contributor>John Doe</em:contributor>
+
+<em:contributor>John Doe</em:contributor>
+<em:contributor>Jane Doe</em:contributor>
+<em:contributor>Elvis Presley</em:contributor>
+
+ +

homepageURL

+ +

Un enlace a la página inicio del complemento/agregado - Prevista para mostrar en la interfaz de usuario.

+ +

Ejemplos

+ +
<em:homepageURL>http://www.foo.com/</em:homepageURL>
+
+ +

updateURL

+ +

Es un enlace a un archivo de manifiesto para actualización personalizada que especifica la disponibilidad de actualizaciones para el complemento/agregado. El fomato se describe abajo. Si está activado el administrador del complemento/agregado periódicamente verificará con este archivo de manifiesto si hay disponibles versiones más recientes.

+ +
Atención: Se recomienda fuertemente que el updateURL sea un enlace HTTPS (seguro). Si no es seguro, las updateURL pueden ser secuestradas por un archivo malicioso- update.rdf- permitiendo a malwares (codigo dañino) infiltrarse en la computadora de los usuarios. Alternativamente, usted puede alojar su extensión en AMO y dejar completamente la updateURL. Esto provee actualizaciones seguras automáticamente.
+ +

Nuevo en Firefox 3 Por razones de seguridad, las aplicaciones en Gecko 1.9 requieren que si al especificar una updateURL, esta debe ser un URL tipo https, o deberás incluir un updateKey.

+ +

Su servidor debe enviar este archivo como text/rdf, text/xml ó aplicación/xml+rdf; o el analizador de actualizaciones no funcionará. 

+ +

El administrador de complementos/agregados reemplazará los siguientes valores dentro de la URL en caso que desees generar la respuesta RDF dinámicamente, por ejemplo al usar PHP o CGI:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
%REQ_VERSION%La versión de la solicitud. Actualmente 1
%ITEM_ID%La id del complemento/agregado que está siendo actualizado
%ITEM_VERSION%La versión del complemento/agregado que está siendo actualizado
%ITEM_MAXAPPVERSION%La maxVersion del objeto targetApplication que corresponde a la aplicación actual para el complemento/agregado que está siendo actualizado.
%ITEM_STATUS%Nuevo en Firefox 2 Lista separadas por comas de los complementos, estado de funcionamiento de las aplicaciones. Contiene al menos ya sea userEnabled o userDisabled mas cualquier cantidad de incompatible, blockslisted o needsDependencies.
%APP_ID%La id de la aplicación actual
%APP_VERSION%La versión de la aplicación para chequear las actualizaciones
%CURRENT_APP_VERSION%Nuevo en Firefox 3.5 La versión de la aplicación actual
%APP_OS%Nuevo en Firefox 1.5 El valor de OS_TARGET del sistema Firefox, identificando el sistema operativo en el que se está usando.
%APP_ABI%Nuevo en Firefox 1.5 El valor del  TARGET_XPCOM_ABI valor del sistema Firefox, identificando la combinación compilador/arquitectura usada para compilar la aplicación actual.
%APP_LOCALE%Nuevo en Firefox 3 El local actual de la aplicación.
+ +

Ejemplos

+ +
<em:updateURL>http://www.foo.com/update.cgi?id=%ITEM_ID%&amp;version=%ITEM_VERSION%</em:updateURL>
+<em:updateURL>http://www.foo.com/extension/windows.rdf</em:updateURL>
+
+ +

Para complementos/agregados alojados en addons.mozilla.org: No debe una propiedad updateURL. Por defecto, las aplicaciones Mozilla que usan el administrador de complementos/agregados (tales como Firefox y Thunderbird) enviarán peticiones de actualización a addons.mozilla.org usando el servicio web predeterminado. Cada vez que usted suba o publique una nueva versión de su complemento/agregado, o cambie los parámetros de compatibilidad mediante la interfaz de autor, su manifiesto de actualización será generado automáticamente.

+ +

Formato del manifiesto de actualización: El manifiesto de actualización es una fuente de datos RDF/XML. Para ejemplos de un manifiesto de actualización, véase Versiones de Extensión, Actualización y Compatibilidad y Habilitación de actualización de extensiones (externas).

+ +

Clave de actualización (updateKey)

+ +
Edit section
+ +

 

+ +
+

Introducido en Gecko 1.9

+ +
Aplica para Firefox 3 y Thunderbird 3 o más recientes
+
+ +
+

Este artículo cubre características introducidas en Firefox 3

+
+ +

 

+ +

Para mantener la seguridad de las actualizaciones de los datos rdf que son recuperados de http plan debes usa firmas digitales para verificar el contenido de los datos. Con este fin debes incluir la parte pública de la clave criptográfica en una entrada de updateKey en el archivo install.rdf del complemento/agregado. Esta puede generarse usando la herramienta McCoy. Cualquier linea descontinuada y espacio en blanco como parte de esta entrada será ignorada.

+ +

Ejemplos

+ +
 <em:updateKey>MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDK426erD/H3XtsjvaB5+PJqbhj
+               Zc9EDI5OCJS8R3FIObJ9ZHJK1TXeaE7JWqt9WUmBWTEFvwS+FI9vWu8058N9CHhD
+               NyeP6i4LuUYjTURnn7Yw/IgzyIJ2oKsYa32RuxAyteqAWqPT/J63wBixIeCxmysf
+               awB/zH4KaPiY3vnrzQIDAQAB</em:updateKey>
+
+ +

optionsURL

+ +

La chrome:// URL del cuadro de diálogo de opciones de la extensión. Es útil únicamente para extensiones. Si esta propiedad es especificada, cuando la extensión es seleccionada en la lista de extensiones, el botón de opción está habilitado y mostrará esto:

+ +

Ejemplos

+ +
<em:optionsURL>chrome://miext/content/options.xul</em:optionsURL>
+
+ +

aboutURL

+ +

La chrome:// URL del cuadro de diálogo acerca de la extensión, Es útil únicamente para extensiones. Si esta propiedad es especificada, cuando la extensión es seleccionada en la lista de extensiones, el enlace acerca de... en el menú contextual del complemento/agregado mostrará este diálogo, mas bien por defecto.

+ +

Ejemplos

+ +
<em:aboutURL>chrome://myext/content/about.xul</em:aboutURL>
+
+ +

iconURL

+ +

Un chrome:// URL de icono 32x32 para mostrar en la lista de complementos/agregados. Si esta propiedad no es especificada, se usará un icono por defecto.

+ +
<em:iconURL>chrome://miext/skin/icon.png</em:iconURL>
+
+ +
Nota: Par que el ejemplo de arriba funcione deberás agregar además una línea de skin package a tu archivo chrome.manifest. Véase Registro de Chrome#Pieles. Alternativamente puedes ubicar tu icono en el directorio especificado en su linea de content package (contenido del paquete).
+ +

hidden

+ +

Valor booleano que cuando es true (verdadero) provoca que el complemento/agregado no se muestre en la lista de complementos/agregados, cuando es proveído el complemento/agregado se instalará en el Area de Acceso Restringido (entonces no trabaja como un complemento/agregado instalado en el perfil). Esto es para la integración de grandes aplicaciones donde no tiene sentido tener una lista de aplicaciones.

+ +

Ejemplos

+ +
<em:hidden>true</em:hidden>
+
+ +

targetPlatform

+ +
Edit section
+ +

Nuevo en Firefox 1.5 Una cadena que especifica la plataforma que el complemento/agregado soporta. Contiene uno u otro de los valores de OS_TARGET solo ó combinado con TARGET_XPCOM_ABI, separados por un guión bajo (_).

+ +

Puedes especificar propiedades para múltiples targetPlatform por manifiesto. Si algún valor concuerda con los parámetros de construcción de la aplicación, será instalado; si no, el usuario recibira un apropiado mensaje de error.

+ +

Ejemplos

+ +
<em:targetPlatform>WINNT_x86-msvc</em:targetPlatform>
+
+<em:targetPlatform>Linux</em:targetPlatform>
+
+<em:targetPlatform>Darwin_ppc-gcc3</em:targetPlatform>
+
+<em:targetPlatform>SunOS_sparc-sunc</em:targetPlatform>
+
+ +

Usualmente, usarías únicamente la parte OS para temas o para extensiones que no son totalmente para plataforma cruzada. Para extensiones que incluyen componentes binarios (compilados), nunca deberá usar el OS solo, sino incluir el ABI (s) con el cual compilaste los componentes. Si deseas incluir múltiples versiones de los componentes, deberías también usar Subdirectorios de Plataforma-específica.

+ +

Notas

+ + + +

Esta propiedad fué agregada para el Firefox/Thunderbird 1.5. Las versiones previas de estas aplicaciones ignorarán las restricciones e instalarán el complemento/agregado a pesar de la plataforma.

+ +

requires

+ +
Edit section
+ +

Nuevo en Firefox 2 Este apartado tiene una sintaxis similar a la de <em:targetApplication>. Si el complemento/agregado especificado por el apartado <em:id> no es instalado o tienes una versión incompatible, el administrador de extensiones deshabilitará tu extensión y mostrará el mensaje "Requiere items adicionales". Puedes poner tantos apartados <em:requires> como quieras. Tu extensión será deshabilitada si cualquiera de los requisito especificados falla.

+ +

Ejemplo

+ +
<em:requires>
+   <Description>
+     <!-- Lightning -->
+     <em:id>{e2fda1a4-762b-4020-b5ad-a41df1933103}</em:id>
+     <em:minVersion>0.5pre</em:minVersion>
+     <em:maxVersion>0.5pre</em:maxVersion>
+   </Description>
+ </em:requires>
+
+ +

Notas

+ + + +

Esta propiedad fué agregada para Firefox/Thunderbird 2. Versiones previas de estas aplicaciones ignorarán las restricciones e instalarán el complemento/agregado a pesar de los requisitos.

+ +

 

+ +

Referencia de propiedades obsoletas

+ +

Estas propiedades eran requeridas en viejas versiones del administrador de complementos/agregados, pero han sido reemplazadas por nuevos y mejores mecanismos.

+ +

file

+ +

Firefox 1.0 Esta propiedad apunta a un archivo chrome .jar que contiene paquetes chrome que requieren ser registrados con el registro de chrome.

+ +

La propiedad <em:file> tiene un complejo valor de objeto. El uri(Uniform Resource Identifier - Identificador Uniforme de Recurso) del valor es urn:mozilla:extension:file:jarFile.jar donde jarFile.jar es el nombre del archivo jar que contiene el paquete de archivos de chrome. Este podría ser también el nombre de un directorio que contiene los archivos del paquete chrome, des-jareado (e.g. urn:mozilla:extension:file:directory). En todo caso, el referido paquete de archivos chrome debe estar ubicado en el subdirectorio chrome de los XPI.

+ +

Este objeto tiene una propiedad package (con una ruta dentro del archivo jar o del directorio que lleva a la ubicación del archivo contents.rdf que es el responsable del registro del paquete), una propiedad locale (ídem, pero registra el locale) y una propiedad skin (ídem, pero para registrar el material del tema).

+ +

En extensiones para Firefox 1.5, esta propiedad ya no es necesaria: el chrome.manifest en el nivel más alto del XPI es usado para ubicar el chrome a registrar. Si no hay chrome.manifest, esta propiedad es aún leída por el administrador de complementos/agregados y un chrome.manifest es generado a partir del antiguo archivo contents.rdf.

+ +

Ejemplos

+ +
<em:file>
+ <Description about="urn:mozilla:extension:file:myext.jar">
+  <em:package>content/myext/</em:package>
+  <em:locale>locale/en-US/myext/</em:locale>
+  <em:skin>skin/classic/myext/<em:skin>
+ </Description>
+</em:file>
+
+ +

Un manifiesto de instalador puede especificar múltiples propiedades file; una para cada archivo jar o subdirectorio que contenga el chrome a registrar.

+ +

Glosario

+ +

Acceso de área restringida

+ +

Un Area de Acceso Restringido es una ubicación para instalar que puede estar restringida en una cuenta de acceso-restringido, no importando si la ubicación está restringida aún con los privilegios del usuario actual.  (véase nsIInstallLocation::restricted ). Actualmente, la carpeta $APPDIR)/extensions y la ubicación del registro de instalación bajo HKEY_LOCAL_MACHINE (véase Agregando Extensiones usando el Registro de Windows (para detalles) están restringidas.

+ +

Las ubicaciones de instalación ($PROFILE)/extensions y HKEY_CURRENT_USER, por otro lado no están restringidas.

diff --git "a/files/es/manipular_marcadores_usando_el_cat\303\241logo/index.html" "b/files/es/manipular_marcadores_usando_el_cat\303\241logo/index.html" new file mode 100644 index 0000000000..64571624cd --- /dev/null +++ "b/files/es/manipular_marcadores_usando_el_cat\303\241logo/index.html" @@ -0,0 +1,123 @@ +--- +title: Manipular marcadores usando el catálogo +slug: Manipular_marcadores_usando_el_catálogo +tags: + - Places + - páginas_a_traducir +translation_of: Mozilla/Tech/Places/Manipulating_bookmarks_using_Places +--- +

+ +

The Places bookmarks service, provided by the nsINavBookmarksService interface, provides methods for creating, deleting, and manipulating bookmarks and bookmark folders. This article offers examples for how to perform common bookmark management tasks using the bookmarks service.

+ +

Initiating the bookmarks service

+ +

As is the case with nearly all interfaces, before you can use the bookmarks service, you need to get access to it:

+ +
var bmsvc = Components.classes["@mozilla.org/browser/nav-bookmarks-service;1"]
+                      .getService(Components.interfaces.nsINavBookmarksService);
+
+ +

Creating a bookmark folder

+ +

Creating a new bookmark folder is done using the nsINavBookmarksService.createFolder() method. For example, to create a new folder in the Bookmarks menu:

+ +
var menuFolder = bmsvc.bookmarksMenuFolder; // Bookmarks menu folder
+var newFolderId = bmsvc.createFolder(menuFolder, "Folder name here", -1);
+
+ +

This code locates the Bookmarks menu's folder, then creates a new folder named "Folder name here" in it. Specifying -1 as the index at which to insert the new folder places it at the end of the list.

+ +

You can easily change this code to insert the new folder into the bookmarks toolbar by changing bookmarksMenuFolder to toolbarFolder.

+ +

Creating a new bookmark

+ +

To create a new bookmark, use the nsINavBookmarksService.insertBookmark() method. The URI for the bookmark needs to be specified using an nsIURI object.

+ +
var ios = Components.classes["@mozilla.org/network/io-service;1"]
+                    .getService(Components.interfaces.nsIIOService);
+var uri = ios.newURI("http://google.com/", "", "");
+var newBkmkId = bmsvc.insertBookmark(newFolderId, uri, -1, "");
+
+ +

This example instantiates the IO service and uses it to create an nsIURI referring to the Google web site, then calls nsINavBookmarksService.insertBookmark() to create a new bookmark to Google, placing it at the end of the bookmarks folder referenced by newFolderId.

+ +

Finding bookmark items

+ +

If you know the URI of a site and wish to find all bookmarks that link to it, you can use the nsINavBookmarksService.getBookmarkIdsForURI() method.

+ +
var ios = Components.classes["@mozilla.org/network/io-service;1"]
+                    .getService(Components.interfaces.nsIIOService);
+var uri = ios.newURI("http://google.com/", "", "");
+var bookmarksArray = bmsvc.getBookmarkIdsForURI(uri, {});
+
+ +

After executing this code, the array bookmarksArray contains the IDs of all bookmarks that refer to the specified URI (in this case, "http://google.com").

+ +

Manipulating existing items

+ +

There are a number of convenient methods you can use to make changes to existing bookmarks and bookmark folders. This section covers some of them.

+ +

The item title

+ +

To change the title of a bookmark or bookmark folder, you use the nsINavBookmarksService.setItemTitle() method.

+ +
bmsvc.setItemTitle(newBkmkId, "New title");
+
+ +

This sets the title of the item referenced by the ID newBkmkId to "New title".

+ +

You can fetch the current title of an item using the nsINavBookmarksService.getItemTitle() method:

+ +
var thisTitle = bmsvc.getItemTitle(newBkmkId);
+alert(thisTitle);
+
+ +

This code will display an alert containing the title of the item referenced by the ID newBkmkId.

+ +

The item URI

+ +

Similarly, you can obtain the URI corresponding to a given bookmark item by calling the nsINavBookmarksService.getBookmarkURI() method.

+ +
var thisURI = bmsvc.getBookmarkURI(newBkmkId);
+alert(thisURI.spec);
+
+ +

Assuming you've run all the code samples previous to this one, this will output "http://google.com".

+ +

You can use the nsINavBookmarksService.changeBookmarkURI() method to update the URI for a given bookmark item:

+ +
uri = ios.newURI("http://mozilla.com/", "", "");
+bmsvc.changeBookmarkURI(newBkmkId, uri);
+
+ +

This example changes the bookmark to refer to the Mozilla web site instead of Google.

+ +

Nota: All annotations, tags, and so forth are kept when the bookmark's URI is changed.

+ +

Checking to see if a URI is bookmarked

+ +

If you want to see if a given URI is already bookmarked -- for example, to avoid creating a new bookmark for a site that's already bookmarked -- you can use the nsINavBookmarksService.isBookmarked() method.

+ +
if (!bmsvc.isBookmarked("http://www.mozilla.com")) {
+  var uri = ios.newURI("http://mozilla.com/", "", "");
+  bmsvc.insertBookmark(bmsvc.toolbarFolder, uri, -1, "Mozilla");
+}
+
+ +

This example looks to see if the user already has a bookmark for the Mozilla web site, and, if not, creates one, adding it to the user's bookmarks toolbar.

+ +

Finding the folder containing an item

+ +

If you need to know what folder contains an item (this can be especially handy after using nsINavBookmarksService.getBookmarkIdsForURI() to find bookmarks for a given URI), you can use the nsINavBookmarksService.getFolderIdForItem() method.

+ +
var parentFolderId = bmsvc.getFolderIdForItem(newBkmkId);
+
+ +

See also

+ + diff --git a/files/es/manual_de_compatibilidad_de_gecko/index.html b/files/es/manual_de_compatibilidad_de_gecko/index.html new file mode 100644 index 0000000000..94de3fec69 --- /dev/null +++ b/files/es/manual_de_compatibilidad_de_gecko/index.html @@ -0,0 +1,187 @@ +--- +title: Manual de Compatibilidad de Gecko +slug: Manual_de_Compatibilidad_de_Gecko +tags: + - Desarrollo_Web + - Desarrollo_entre_navegadores + - Gecko + - NecesitaRevisiónTécnica + - Todas_las_Categorías +translation_of: Archive/Mozilla_Gecko_Compatibility_Handbook +--- +

 

+


+El objetivo de este manual es ayudar a poner al día vuestros sitios web para que funcionen en los navegadores respetando los estándares del Web y que detecten correctamente a Gecko.

+

Si desconocéis los estándares del Web, el artículo Utilización de estándares en vuestras páginas web constituye una introducción útil. (en inglés)

+

Gecko es un navegador ajustable, desarrollado como parte del proyecto de código abierto Mozilla y basado más bien en las normas del W3C que en los códigos propietarios típicos del pasado. Respetar los estándares/normas/pautas del Web simplifica la interacción de los navegadores en el desarrollo y permite la accesibilidad .

+

4.x contra Gecko

+

Desde 1997, numerosos sitios Internet se han concebido para funcionar con Microsoft Internet Explorer 4 o con Netscape Navigator 4. Éstos navegadores fueron desarrollados antes de existir las recomendaciones del W3C para HTML (lenguaje para el formato de hipertextos), CSS (hojas de estilo en cascada) y DOM (modelo de objetos del documento).

+

Éstos navegadores más antiguos, sin estándares del Web, se diferencian de Gecko en numerosos puntos:

+

Los navegadores antiguos

+ +

Gecko es un motor de presentación "multiplataforma" compatible con un gran número de versiones de Windows, como Windows XP, Mac OS y Linux. Por esta pluralidad, sus funcionalidades son en general idénticas sea cual sea el soporte usado, al contrario de las versiones de Internet Explorer para Mac e Internet Explorer para Windows que son programas distintos y pueden entonces comportarse de maneras muy diferentes.

+

Prueba rápida de compatibilidad

+

Si vuestro sitio trabaja con las tecnologías propietarias de Netscape 4.x y de Microsoft, consulten el artículo siguiente para conocer rápidamente los principios generales de estas normas. Éste test de compatibilidad será mucho más benéfico para los sitios que utilicen un código simple o que estén en fase de modificación para soportar los estándares.

+

Preparación de los navegadores para la prueba

+

No todos los navegadores que utilizan Gecko contienen Firefox ou Netscape en su cadena "user-agent". Es importante, entonces, verificar que se detectan correctamente navegadores como AOL para Mac OS X.

+

Se pueden descargar varios navegadores de Mozilla. O, si se utiliza la detección de "user-agent", instalar una extensión para Firefox o Mozilla que permitirá «simular» las cadenas "user-agent" de éstos navegadores Gecko. Aquí tiene como hacerlo:

+ +

Nota: he dejado lo anterior en inglés porque la extensión lo saca así, si lo ponemos en español habrá gente que se preguntará: dónde es que tengo que picar?

+

Una vez completado el cuadro de diálogo (debería parecerse a lo de abajo), Aceptar y cerrar la ventana «Options». Parece que el enlace no funciona, se puede mirar en el original
+[Image:GeckoCompatibilityHandbook-Configure-UASwitcher.PNG]

+ +

Encontrará las cadenas "user-agent" de los navegadores basados en Gecko, aquí. Lo mejor y si es posible, descargue también los diferentes navegadores para probarlos individualmente.

+

Repasando los resultados

+

Los siguientes temas tienen relación con la detección de los navegadores. Para más soluciones de problemas corrientes, siga leyendo.

+
Problema 1: El sitio respeta los estándares Web pero no se muestra correctamente
+ +
Problema 2: El sitio certificado Netscape 6.x se muestra incorrectamente en los otros navegadores
+ +
Problema 3: El sitio no funciona bien en todos los navegadores Gecko
+

Si todavía tiene problemas, puede consultar la sección de soluciones rápidas de este manual. Además, si usa tecnologías propietarias de Netscape 4.x y/o de Microsoft, puede leer esto para saber rápidamente qué diferencias hay en Gecko.

+

Problemas con AOL o CompuServe

+

Aunque su sitio se muestra correctamente en Netscape 7.x, es importante que lo pruebe también en AOL pour Mac OS X y en CompuServe 7 para verificar la detección del navegador (en inglés) y los posibles problemas de red.

+

Prueba de AOL detrás de un corta-fuego

+

Si debe conectarse a AOL detrás de un corta-fuego, América Online ha abierto los puertos TCP/IP 5.190 y 11.523 para que pueda comunicarse con el servidor de AOL. De esta forma podrá probar su sitio detrás de un corta-fuego, siempre y cuando el administrador de redes haya abierto estos puertos.

+

Tiene que estar conectado a Internet para hacer la prueba de vuestro sitio en AOL; es imposible acceder al sitio en una máquina local vía red local (LAN) sin una conexión Internet. Para más información, ver: Webmaster@AOL (en).

+

Referencias en caso de problemas

+

Como se explica en Utilización de estándares en vuestras páginas web, es necesario escribir la codificación estándar para el buen funcionamiento y la obtención de compatibilidad entre los navegadores Gecko, Netscape 4 y IE .

+ +
Síntoma Posible problema Solución
El sitio se muestra correctamente en Netscape 6.x pero no en Netscape 7.x u otros navegadores Gecko. La detección del navegador por JavaScript encuentra a Netscape 6.x pero no a los otros navegadores Gecko.
El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer. La utilización de códigos propietarios o inválidos (como los generados por varias aplicaciones de Microsoft Office).
  • Use las herramientas de validación de HTML y CSS del W3C para convalidar la página web. Corrija los errores y reemplace los códigos propietarios donde sea posible.
  • Actualice las herramientas de edición web con versiones respetuosas de las normas W3C y de los navegadores Gecko.
El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer. La consola JavaScript en Netscape, Mozilla o Firefox muestra errores relacionados con: document.all (todo el documento), document.layers (capas del documento), document.<propiedades> los cuales no son definidos a causa de una mala detección del navegador o por la utilización de JavaScript propietario.
  • Actualice:
  1. la detección del navegador para encontrar correctamente los navegadores Gecko.
  2. los "API" para utilizar versiones más recientes conformes a los estándares.
  3. vuestras herramientas de edición web con versiones que funcionen bien con las normas W3C y los navegadores Gecko.
El contenido se muestra diferentemente en los navegadores Gecko e Internet Explorer.
  • Su hoja de estilo (CSS) está trabajando con el código de la CSS de Internet Explorer.
  • Internet Explorer no es sensible a los nombres de ID (Identificación) y de CLASS (Clases) mientras que los navegadores Gecko los identifica y trata como lo que son, con sentido. Una utilización inconsistente de estos nombres (ID y CLASS) en la hoja de estilo y en los elementos HTML provocará la no aplicación de los estilos en los navegadores Gecko.
  • Internet Explorer indica inexactamente la altura y ancho de los elementos lineales, por ejemplo SPAN.
  • Internet Explorer ejecuta incorrectamente el modelo de caja CSS (padding, margin-margen, border-bordes).

Es recomendable: NO

  • utilizar códigos inválidos de las hojas de estilos de Internet Explorer.
  • definir altos y anchos de los elementos lineales como span

Pero sí:

  • usar únicamente la interacción entre navegadores, las funciones y los modelos de caja CSS estándares.
  • especificar de la misma forma los nombres de clase (CLASS) y de identificación (ID) en HTML que en las hojas de estilo.
El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer. Órdenes incorrectas sobre la manera de interpretar el modo de disposición en DOCTYPE (tipo de documento).
  • Si las páginas deben mostrarse en viejas versiones de navegadores, como Netscape Navigator 4 o Internet Explorer 4 y 5, no se olvide de especificar, en el tipo de documento, la forma en la cual los navegadores tienen que actuar: estándar, estricta o aleatoria. (quirks mode (en)).
Las imágenes aparecen sin áreas blancas entre ellas con Internet Explorer pero sí con unas en los navegadores Gecko. Órdenes incorrectas sobre la manera de interpretar el modo de disposición en el tipo de documento (DOCTYPE)
  • Los modos de disposición estándares han sido pedidos por la orden escrita en el tipo de documento. Cambie ese tipo de documento de manera que trabaje con las órdenes correctas de interpretación. Más información.
Al picar un enlace devuelve el error 404-la página no se ha encontrado, pero sí funciona con Internet Explorer. El enlace utiliza posiblemente una forma inválida de URL relativa.
  • Cambie las URLs relativas http://directory/... por directory/... o utilice direcciones absolutas como http://example.com/directory/...
  • Verifique que todos los hiper-enlaces contienen las barras oblicuas en el sentido correcto (/).
Al picar un enlace dispara una descarga o muestra directamente el código HTML en lugar de presentar la página correctamente, pero sí lo hace de forma prevista con Internet Explorer El servidor web especifica incorrectamente el tipo MIME del contenido. Internet Explorer intenta adivinar este tipo MIME en los documentos cuando los navegadores Gecko confían en el servidor web para conocer el buen tipo MIME. Gecko no intenta leer el tipo MIME de un documento para reducir las posibilidades de procesar contenidos poco seguros o peligrosos enmascarados como un tipo MIME seguro.
  • Aproveche la utilidad HEAD de Perl o PHP para determinar el tipo MIME real usado por el servidor Web. Corrija todos los tipos incorrectos en el servidor. (Artículo relacionado).
La hoja de estilo no es reconocida. La presencia de un atributo title en un enlace link que se refiere a un hoja de estilo externa puede hacer que la CSS sea ignorada.
  • Asegúrese que todas las hojas de estilo sean aplicadas de manera persistente antes que sólo preferidas. (Artículo relacionado).
Falla la conexión a un sitio seguro con un navegador Gecko, pero funciona con Internet Explorer. El servidor web no empieza correctamente la ejecución de la negociación para SSL.
  • El administrador del servidor web debe actualizar su programa de servicio seguro.
  • Para navegar en un sitio con ejecución defectuosa de SSL, los visitantes deberán desactivar el protocolo TLS en Netscape 6/7 o Mozilla hasta que el sitio este actualizado con versiones que lo aceptan.
Los menús DHTML usando HierMenu tienen problemas.

La versión de HierMenu es obsoleta.

  • Las más antiguas soportan sólo Netscape Navigator 4.x, Internet Explorer 4.x y siguientes.
  • Las un poco más recientes: Netscape 6 y a partir de Netscape 6.1 y posteriores, la ayuda de las propiedades propietarias offsetXXX de Internet Explorer hace que HierMenu ponga unas ventanas emergentes (popups) en posiciones equivocadas.
  • Las últimas versiones de HierMenu funcionan plenamente en todos los navegadores Gecko.
+

Problemas corrientes ligados al código y el servidor Web

+

Esta sección detalla las soluciones a los problemas más corrientes que afectan a los navegadores reopetuosos de los estándares así como preguntas específicas a Gecko.

+

HTML propietario

+

Problema: utilizar etiquetas HTML de un navegador propietario específico (tal como: <LAYER> capa).

+

Puesto que se supone que un navegador ignora las etiquetas que no reconoce y devuelve el contenido dentro de ellas, los autores de páginas web han combinado los códigos HTML propietarios para que sus páginas se muestren correctamente en cualquier navegador.

+

Los navegadores Gecko ignorarán las etiquetas HTML propietarias de Internet Explorer y Netscape Navigator 4. Así pues, una página web no se mostrará en los navegadores Gecko de la misma manera que en Internet Explorer 4 o Netscape Navigator 4.

+

El ejemplo principal es la utilización de la etiqueta <LAYER> propietaria de Netscape Navigator 4, corrientemente usada para la navegación en un sitio. Para saber las alternativas basadas en estándares, ver este artículo. (en).

+

Podemos verificar rápidamente la correcta utilización de las etiquetas HTML propietarias en una página sometiéndola al verificador de HTML del W3C usando el tipo de documentos HTML 4.01. Abordaremos detalladamente los tipos de documentos (DOCTYPE) más adelante, pero esencialmente, sirven para indicar al navegador cual es la versión HTML de la página.

+

La Referencia de interacción de elementos HTML (en) facilita una lista de todos los elementos HTML sostenidos en Netscape 4, los navegadores Gecko, Internet Explorer 4 y superiores, y se puede utilizar para determinar qué elementos son soportados para todos los navegadores.

+

Detección del navegador

+

Problema: mala detección del navegador o interpretación del código

+

Mientras que la detección es útil para permitir a los autores escribir páginas web que sólo trabajen con navegadores específicos, una equivocada detección podrá conducir a una mala experiencia de los usuarios.

+

Numerosos problemas pueden surgir cuando una página web usa la detección de un navegador para determinar que características propietarias utiliza un navegador en particular.

+

Consulte el artículo Detección del navegador y soporte entre ellos para un mejor entendimiento. (en inglés)

+

Entorno de trabajo de un navegador específico

+

Problema: el código incluye el entorno de trabajo de "bugs" y comportamientos aleatorios (quirks mode) de navegadores específicos.

+


+Puesto que una página web no se juzga por su código sino por la apariencia en la pantalla de los navegadores, los autores han desarrollado numerosas técnicas que aprovechan la idiosincrasia (carácter) en los navegadores particulares para conseguir los efectos deseados. Tiene pues una particular importancia ya que en las primeras puestas en práctica de las CSS encontradas en Internet Explorer 4 y Netscape Navigator 4 habían varios "bugs". Para conseguir obtener los efectos deseados, los autores escribieron los códigos HTML y JavaScript que dependían de estos "bugs" para que funcionara correctamente.

+

Ésto puede provocar problemas con los navegadores Gecko por ejecutar estrictamente los estándares. La vieja escritura de «codificar para los "bugs"» ya no funciona en Mozilla, Netscape 6.x/7.x y todos los otros navegadores Gecko.

+
Ejemplo - Poniendo formularios en una tabla
+

HTML no válida para eliminar el salto de línea en <FORM>.

+

En los antiguos navegadores, el resultado hacía que la celda TD envolviera herméticamente un elemento de entrada input.

+
<table border="1">
+  <tr>
+    <form name="formulario2">
+      <td>
+        <input type="texto">
+      </td>
+    </form>
+  </tr>
+<table>
+
+

Este acercamiento es comúnmente utilizado para dar la vuelta al hecho que <FORM> es un elemento en bloque en HTML y que simplemente empezará en una nueva línea en la página. Lamentablemente, éste código ya no es válido, puede provocar errores durante la presentación en pantalla y en la aplicación de las reglas de la hoja de estilo.

+
Uso incorrecto del código vacío en una etiqueta XML
+

Numerosos autores utilizan la anotación vacía en etiqueta XML (<tag />) en sus ficheros HTML. En XML, una etiqueta vacía no tiene nunca contenido. Las directivas de compatibilidad hacia atrás del XHTML estipulan que los elementos vacíos pueden ser codificados poniendo después del nombre de la etiqueta un espacio seguido de un signo como en "<tag />". Para ser compatible, necesita tener un espacio antes del cierre " />". Además, se debe utilizar ésta codificación XML sólo para los elementos HTML que son siempre vacíos — y no para elementos HTML que poseen una etiqueta opcional de cierre.

+

Por ejemplo, es correcta la forma: <br /> para codificar <br>, aún cuando no hay ventaja alguna de hacerlo en documentos HTML. Pero es incorrecto usar: <option /> para <option>. Para entender por que, consideramos lo siguiente:

+ +
HTML sin etiqueta opcional de cierre HTML equivalente con etiqueta opcional de cierre 
+<select>
+<option>Valor de la opción
+</select>
 
+<select>
+<option>Valor de la opción</option>
+</select>
+

Ahora veamos que pasa al utilizar la escritura de etiqueta XML vacía " /></tt>".

+ +
HTML con código de etiqueta XML vacía HTML equivalente con etiqueta de cierre 
+<select>
+<option />Valor de la opción
+</select>
 
+<select>
+<option></option>Valor de la opción
+</select>
+

Es simplemente incorrecto. Si debe utilizar la anotación de etiqueta XML vacía, entonces hacerlo únicamente para elementos HTML que no tengan nunca contenido — no para elementos HTML que tienen un cierre opcional.

+
Las identificaciones (ID) de las hojas de estilo deben ser tenidas en cuenta
+

Gecko responde correctamente a los identificadores ID de la hoja de estilo y presentará bien este ejemplo, mientras que Internet Explorer que no los tiene en cuenta no lo presentará.

+
<style type="text/css">
+  #id1 { text-decoration: line-through; }
+  #ID1 { text-decoration: underline; }
+</style>
+<div id="id1">
+  Debería estar tachado (line-through)
+</div>
+<div id="ID1">
+  Debería estar subrayado (underline)
+</div>
+

-(EJEMPLO SUPRIMIDO)-

+

Observe que el verificador de HTML del W3C señalará con una bandera a los atributos de los ID de HTML como duplicados sólo en el caso que difieran (sean diferentes). Parece ser que hay una inconsistencia entre la recomendación de HTML 4.01 y la declaración de SGML para el HTML en si los atributos del identificador ID se toman en cuenta o no. Esto es una lástima ya que el verificador de HTML es para los desarrolladores web uno de sus principales medios de aprendizaje de los estándares.

+

Debido a este común error, Netscape 6.2 no hace caso a los atributos de ID de CSS en modo de compatibilidad aleatoria (quirks mode). Si se invoca el modo de respeto de los estándares, convendrá ser consistente en escribirlo en las hoja de estilo de manera que se respete.

+
Los nombres de clase de la hoja de estilo deberían ser tomados en cuenta
+

Gecko hace caso a los nombres de clase de las hojas de estilo (CLASS) y por eso presentará correctamente este ejemplo, mientras que Internet Explorer hace caso omiso, por lo tanto no lo sacará bien en la pantalla.

+
<style type="text/css">
+  .class1 { font-size: 1em; }
+  .CLASS1 { font-size: 2em; }
+</style>
+<div>
+<div class="class1">
+  Debería tener la medida de fuente: 1em;
+</div>
+<div class="CLASS1">
+  Debería tener la medida de fuente: 2em;
+</div>
+

-(EJEMPLO SUPRIMIDO)-

+

Por este común error de los autores de páginas web, Netscape 6.2 tampoco hace caso de los atributos de clase CLASS en modo de compatibilidad aleatoria (quirks mode). Si se invoca el modo de respecto de los estándares, hay que definirlo correctamente en las hojas de estilo (CSS) para que sea tomado en cuenta.

+
Enlaces (URLs) relativos incorrectos
+

Una URL relativa se refiere al mismo servidor web que alberga a la página web.

+ +

Los antiguos navegadores aceptaban la utilización incorrecta: http://directorio/ parar las direcciones relativas al directorio raíz del servidor web, pero no es el caso de los navegadores Gecko. Para especificar correctamente el enlace a una página del directorio raíz del servidor web, use esta forma: /directorio/pagina.html.

+
La utilización inválida de espacios en los nombres de atributos (por ejemplo: mapas de imágenes)
+

Muchos autores parecen infectados por la manía de utilizar espacios en los nombres. Un atributo name o id en HTML 4.01 no puede conformemente al W3 contener espacios. Esto puede dar problemas en los navegadores basados en Gecko, especialmente en los mapas de imágenes. Conviene, por eso, verificar que los nombres de atributos contengan sólo caracteres válidos.

+

Mala codificación debida a "API" y herramientas anticuadas

+

Problema: unas "APIs" o herramientas de edición obsoletas generan un código no estándar.

+

Muchas versiones antiguas de "API" de interacción entre navegadores comúnmente usadas como DYNAPI (en), no aguantan a Gecko por una u otra razón citada más arriba. Es igualmente el caso de antiguas versiones de herramientas de edición web como Macromedia Dreamweaver 2 y 3.

+

Sin embargo las versiones más recientes de "API" y de herramientas web soportan a Gecko. Por ejemplo, DYNAPI (en) es ahora mantenido en SourceForge y ofrece una versión compatible con Gecko. Las nuevas Herramientas de edición respetuosas de los estándares también soportan a Gecko.

+

Tipo de documento (DOCTYPE) impropio, mal codificado

+

Problema: el tipo de documento incorrecto puede alterar completamente la presentación de las páginas.

+

Gecko, Internet Explorer para Mac OS e Internet Explorer 6 utilizan todos la técnica de detección del tipo de documento para determinar la forma de presentación, si debe ser en modo compatible con los antiguos navegadores o conformemente a las normas W3C.

+

Usando el tipo de documento apropiado en el HTML permite a los autores de páginas web hacer que soporten tanto, los viejos navegadores menos conformes, que los nuevos, especificando en él, el modo de composición elegido. Al paso del tiempo y con la progresiva desaparición de los viejos navegadores en el mercado, los autores de páginas web pueden efectuar la transición hacia las normas W3. (Artículo relacionado).

+

Mientras que la detección de la declaración del tipo de documento es útil para permitir el soporte de viejos navegadores, puede ser un problema para los de última generación como Netscape 6.x y Netscape 7.x si se especifica incorrectamente el modo de composición.

+

Gecko tiene dos modos de composición: el de compatibilidad aleatoria (quirks) y el de respeto estricto de los estándares (standards). El modo aleatorio imita el comportamiento de Netscape Navigator 4 cuando el estricto sigue las recomendaciones para HTML y CSS del W3C. En particular, el modo estricto utiliza el modelo de caja CSS como se define en el Capítulo 10 de las recomendaciones sobre CSS 2. El modo de presentación es determinado con la ayuda en la declaración del tipo de documento (o de su carencia) al principio de documento HTML.

+

Escritura inválida para dejar un comentario

+

Gecko posee también tres modelos de análisis de compatibilidad: modo aleatorio (quirks), modo casi-estándar (en) y modo estricto de los estándares. El modo aleatorio permite la utilización no válida de más de dos guiones "--" para dejar un comentario, lo cual no dejan hacer los otros modos.

+
<!---- Ésto es un comentario HTML '''inválido''' pero aceptado en el análisis aleatorio de comentario ---->
+
+<span class="highlightblue"><!-- Ésto es un comentario '''válido''' aceptado en el análisis estricto de comentario --></span>
+

Para saber las reglas exactas de como se invoca desde la declaración en el tipo de documento al modo aleatorio vs. al modo estricto con los estándares, consulten este artículo.

+

Codificación de plugins (pequeñas aplicaciones para la web)

+

Habrá visto que algunos "plugins" no se comportan de la misma forma en Gecko y en Netscape Navigator 4. Visite la página plugins para más información sobre la codificación de los navegadores Gecko, el buen uso de las etiquetas, los cambios en la arquitectura comparado con la generación Netscape 4, y las sugerencias de estratégias para plugins.

+

Problemas de configuración en el servidor web

+

Tipos MIME especificados incorrectamente

+

Muchos servidores web especifican incorrectamente los tipos MIME para los ficheros. Los navegadores Gecko requieren que el servidor web defina correctamente el tipo MIME correspondiente al tipo de contenido:

+ +

Mala ejecución del protocolo HTTP

+

Varios servidores ejecutan incorrectamente el protocolo HTTP, lo cual puede dar problemas en Netscape 6.

+

Mala ejecución del protocolo SSL

+

Los antiguos navegadores tal como Internet Explorer 4 et Netscape Navigator 4 ejecutaban versiones viejas del protocolo SSL. La versión más común ahora es SSL 3.0, empero, la última versión: TLS (SSL 3.1), la cual es soportado por los navegadores Gecko, no lo es aún por varios servidores web. Desgraciadamente, varios procedimientos de SSL 3.0 ejecutan incorrectamente la negociación de qué versión de SSL hay que usar y fallan en la conexión con Gecko.

+

Para más información sobre esta cuestión, lea: Notas sobre TLS - Servidores SSL 3.0 intolerantes.

+

Recursos útiles

+ +

Referencias

+ +
+

Información sobre el documento original

+ +
+

Interwiki Languages Links

+

diff --git "a/files/es/marcado_xml_en_los_microres\303\272menes/index.html" "b/files/es/marcado_xml_en_los_microres\303\272menes/index.html" new file mode 100644 index 0000000000..3b903dc9c9 --- /dev/null +++ "b/files/es/marcado_xml_en_los_microres\303\272menes/index.html" @@ -0,0 +1,187 @@ +--- +title: Marcado XML en los microresúmenes +slug: Marcado_XML_en_los_microresúmenes +tags: + - Esbozos + - Microresúmenes + - Todas_las_Categorías +translation_of: Archive/Mozilla/Microsummary_topics/XML_grammar_reference +--- +

+

Borrador
+ Esta página no está completa.

+ +

+

Introducción

+

Un generador de microrresúmenes es un documento XML que describe la forma de recuperar información específica desde una página web para ser presentada de forma resumida como un marcador cuyo título cambia basándose en el contenido de la página que referencia.

+

Este artículo proporciona información detallada sobre la gramática XML usada para construir generadores de microrresúmenes, describiendo cada elemento y sus atributos. Puedes ver una introducción de cómo crear un microrresumen leyendo el artículo Crear un microrresumen.

+

Ejemplo

+

A continuación se muestra el generador de microrresúmenes creado en el tutorial Crear un microrresumen.

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="Firefox Download Count">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> Fx downloads</text>
+      </template>
+    </transform>
+  </template>
+  <pages>
+    <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
+  </pages>
+</generator>
+
+

Espacio de nombres

+

El URI del espacio de nombres para los documentos XML generadores de microrresúmenes es:

+
http://www.mozilla.org/microsummaries/0.1
+
+

Todos los elementos en un documento generador de microrresúmenes deben de estar en este espacio de nombres excepto los descendientes del elemento <template>, el cual debe de estar en el espacio de nombres de XSLT:

+
http://www.w3.org/1999/XSL/Transform
+
+

El elemento <generator>

+

El elemento <generator> es la etiqueta raíz para todos los generadores de microrresúmenes y debe de contener el resdo del código XML que describen al generador.

+

Atributos:

+
+
+ name (requirido)
+
+ Un nombre descriptibo y legible para el microrresumen creado por el generador.
+
+ uri (opcional)
+
+ Un URI único válido que identifique al generador. Sólo es relevante para los generadores creados dinámicamente por el código y las extensiones de Firefox. Los generadores instalados desde el web vía nsSidebar::addMicrosummaryGenerator son identificados por la URL remota desde la que son descargados. Para éstos, Firefox ignorará el valor de este atributo.
+
+

Elementos hijos:

+
+
+ <template> (requerido)
+
+ Especifica cómo transformar páginas en sus microrresúmenes.
+
+ <pages> (requerido)
+
+ Identifica el conjunto de páginas que el generador es capaz de resumir.
+
+ <update> (opcional)
+
+ Especifica cada cuanto tiempo debe Firefox actualizar los microrresúmenes.
+
+

El elemento <template>

+

El elemento <template> contiene la hoja de estilos XSLT que transforma páginas web en sus microrresúmenes.

+

Atributos:

+

+ + Ninguno. +

+

Elementos hijos:

+
+
+ <stylesheet> o <transform> (requeridos)
+
+ La hoja de estilos XSLT que realiza la transformación.
+
+

Para cada XSLT, debes especificar el elemento hijo de hojas de estilo usando o bien <stylesheet> o bien la etiqueta <transform>, las cuales son intercambiables.

+
+

Nota: Aunque el elemento <template> debe de estar en el espacio de nombres del microrresumen (http://www.mozilla.org/microsummaries/0.1), sus elementos <stylesheet>/<transform> deben de estar en el espacio de nombres de XSLT (http://www.w3.org/1999/XSL/Transform).

+
+

El elemento <pages>

+

El elemento <pages> identifica el conjunto de páginas que el generador es capaz de resumir.

+

Atributos:

+

+ + Ninguno. +

+

Elementos hijo:

+
+
+ <include> (opcional)
+
+ Una expresión regular que coincide con las URLs de las páginas que el generador es capaz de resumir.
+
+ <exclude> (opcional)
+
+ Una expresión regular que coincide con las URLs de las páginas que el generador es incapaz de resumir.
+
+

El elemento <pages> puede contener cero o más elementos hijos <include> y <exclude>, cada uno de los cuales puede contener una expresión regular compatible con JavaScript. No debe de contener ningún otro elemento y no tiene ningún attributo.

+

Cuando un generador es examinado para determinar si es capaz o no de resumir una página, las expresiones regulares proporcionadas por los elementos hijos son evaluadas con la URL de la página. Un generador es considerado capaz de resumir una página si al menos una de las expresiones <include> coincide con la URL de la página y ninguna de las expresiones <exclude> coincide con la URL de la página.

+

El orden en el que los elementos hijos aparecen en el elemento <pages> no es relevante. Los espacios en blanco entre los elementos hijos y las expresiones regulares tampoco importan; no se consideran parte de la expresión regular y no afectan a la evaluación de dichas expresiones.

+

El siguiente ejemplo identifica un generador como aquel capaz de resumir todas las páginas del sitio web www.example.com excepto las páginas llamadas about.html:

+
<pages>
+  <include>
+    ^http://www\.example\.com/
+  </include>
+  <exclude>/about\.html</exclude>
+</pages>
+
+
+ Nota: Las expresiones regulares diseñadas para coincidir con el comienzo de las URLs de las páginas deberían de empezar con el acento circunflejo(^) para asegurar que no coinciden por error con las URLs que simplemente contienen la URL con la que pretenden coincidir. Por ejemplo, la expresión regular http://www\.example\.com/ coincidirá tanto con la URL http://www.example.com/ como en la URL http://www.evil.com/http://www.example.com/, pero la expresión regular ^http://www\.example\.com/ sólo coincidirá con la primera de las anteriores dos URLs.
+

Véase la referencia Core_JavaScript_1.5_Reference:Global_Objects:RegExp para detalles sobre la sintaxis válida de las expresiones regulares para los generadores y el tutorial Crear expresiones regulares para generadores de microrresúmenes para seguir paso a paso las instrucciones sobre cómo escribir expresiones regulares que coincidan con URLs.

+

El elemento <include>

+

El elemento <include> identifica un conjunto de páginas que el generador es capaz de resumir. Debe de ser hijo del elemento <pages> y debe de contener una expresión regular compatible con JavaScript.

+

Para más información sobre el uso de este elemento, véase la entrada para #The_<pages>_element.

+

El elemento <exclude>

+

El elemento <exclude> identifica un conjunto de páginas que el generador no es capaz de resumir. Debe ser hijo del elemento <pages> y debe de contener una expresión regular compatible con JavaScript.

+

Para más información sobre el uso de este elemento, véase la entrada para #The_<pages>_element.

+

El elemento <update>

+

El elemento opcional <update> especifica cada cuánto tiempo debe Firefox actualizar los microrresúmenes generados por el generador. El elemento puede ser usado para especificar tanto un intervalo absoluto de actualización como una serie de intervalos condicionales basados en el contenido de la página que está siendo resumida.

+

Atributos:

+
+
+ interval (opcional)
+
+ Es el intervalo de tiempo absoluto (en minutos) que debe de transcurrir entre las actualizaciones.
+
+

Child Elements:

+
+
+ <condition> (opcional)
+
+ Una expresión XPath booleana junto con el intervalo de tiempo (en minutos) que debe de transcurrir entre las actualizaciones si la expresión se evalua a true.
+
+

El atributo interval define un intervalo absoluto en minutos. Su valor debe de ser un número mayor o igual que 1. Los valores decimales (p.e.: 5.5 minutos) están permitidos aunque probablemente no sean útiles.

+

El elemento <update> puede contener cualquier número de elementos hijos <condition>.

+

Firefox determina qué intervalo aplicar a un microrresumen generado por un generador de acuerdo a las siguiente reglas:

+
    +
  1. Firefox procesa cada elemento hijo <condition> en el orden en el que aparecen en el documento. Para cada uno, Firefox evalúa la expresión XPath booleana del elemento contra la página que va a ser resumida. Si la expresión se evalúa a true, Firefox aplicará el intervalo de ese elemento y detendrá el procesado de los elementos hijos. Así, la primera <condition> que coincida determinará el intervalo de actualización.
    2. +
+
    +
  1. Si no hay elementos hijos <condition> o si ninguna de sus expresiones se evalúa a true, Firefox aplicará el valor del atributo interval del elemento <update>.
    2. +
+
    +
  1. Si el elemento <update> no incluye un atributo interval, Firefox aplicará el intervalo especificado por la entrada browser.microsummary.updateInterval en las preferencias.
    2. +
+
    +
  1. Si esa entrada no ha sido establecida, Firefox aplicará su intervalo de actualización por defecto, el cual dura 30 minutos.
    2. +
+

Notas:

+ +

El elemento <condition>

+

El elemento opcional <condition> especifica una expresión XPath booleana junto con un intervalo de tiempo condicional (en minutos) que debe de transcurrir entre las actualizaciones si la expresión se evalúa a true cuando se evalúa contra la página que va a ser resumida. Debe de ser hijo del elemento <update>.

+

Atributos:

+
+
+ expression (requerido)
+
+ Una expresión XPath booleana para ser evaluada contra la página que va a ser resumida.
+
+ interval (requerido)
+
+ Un intervalo de tiempo, en minutos, que debe de transcurrir entre las actualizaciones si la expresión se evalúa a true.
+
+

Elementos hijos:

+

+ + Ninguno. +

+

Para más información acerca del uso de este elemento, véase la entrada para #The_<update>_element.

+

Ver también

+ diff --git a/files/es/mdn/about/index.html b/files/es/mdn/about/index.html new file mode 100644 index 0000000000..1d6e739428 --- /dev/null +++ b/files/es/mdn/about/index.html @@ -0,0 +1,145 @@ +--- +title: Acerca de MDN +slug: MDN/About +tags: + - Colaboración + - Comunidad + - Derechos de Autor + - Documentación + - Guía + - Licencias + - MDN Meta +translation_of: MDN/About +--- +
{{MDNSidebar}}
+ +
{{IncludeSubNav("/es/docs/MDN")}}
+ +

MDN Web Docs es una plataforma de aprendizaje para las tecnologías Web y el software con el que funciona la Web, incluyendo:

+ + + +

Nuestra Misión

+ +

La misión de MDN es simple: Proporcionar a los desarrolladores la información que necesitan para construir fácilmente proyectos en la Web abierta. Si se trata de una tecnología expuesta en la Web Abierta, queremos documentarla.

+ +

Además, proporcionamos documentación sobre los productos de Mozilla y cómo crear y contribuir a los proyectos de Mozilla. También nos ocupamos del B2G OS (antes Firefox OS).

+ +

Si no está seguro si un tema en particular debe ser ofrecido en MDN, lea: ¿Pertenece esto a MDN?

+ +

Cómo puede ayudar

+ +

¡No necesitas ser capaz de codificar —o escribir bien— para poder colaborar en MDN!. Tenemos un montón de maneras con las que puede ayudar, desde revisar artículos para asegurarse de que tengan sentido, o contribuir con texto, hasta agregar código de ejemplo. De hecho, hay tantas maneras de ayudar que tenemos una Página de inicio que le ayuda a elegir tareas que hacer, en función de sus intereses. ¡Y cuánto tiempo tiene disponible!.

+ +

También puede ayudar promocionando MDN en su propio blog o sitio web.

+ +

La Comunidad MDN

+ +

¡Somos una comunidad global! Contamos con colaboradores increíbles de todo el mundo, en múltiples idiomas. Si desea aprender más sobre nosotros, o si necesita cualquier tipo de ayuda  con MDN. ¡Tómese la libertad de consultar nuestra foro de discusión o el Canal IRC!

+ +
+
+

Uneté a la comunidad MDN

+ +
+
Escoge tu método preferido para unirte al tema:
+ + +
+ +
+ +
+
+
+ +

Consulta el foro de documentación para desarrolladores:

+ + + +

Derechos de autor y Licencias

+ +

Los documentos wiki MDN se han preparado con las contribuciones de muchos autores, tanto dentro como fuera de la Fundación Mozilla. A menos que se indique lo contrario, los contenidos están disponibles bajo los términos de la Licencia Creative Commons: Attribution-Sharealike v2.5 o cualquier versión posterior. Por favor atribúyalos a los "Colaboradores Mozilla" e incluya un hipervínculo (en línea) o URL (en formato impreso) a la Wiki específica para el contenido referenciado.

+ +
+

Acerca de MDN realizado por Colaboradores Mozilla se distribuye bajo licencia CC-BY-SA 2.5.

+
+ +

Tenga en cuenta que el ejemplo, "Colaboradores de Mozilla" enlaza con el historial de la página citada. Vea  Las mejores prácticas para la atribución si desea una explicación más detallada.

+ +
+

Nota: Vea el contenido de MDN en WebPlatform.org para información acerca de como reutilizar y atribuir contenido MDN en ese sitio.

+
+ +

Los códigos de ejemplo agregados a esta Wiki antes del 20 de Agosto de 2010 están disponibles bajo la Licencia MIT; utilice la siguiente información de atribución: "© <fecha de la última revisión de la Wiki> <nombre de la persona que lo colocó en la Wiki>".

+ +

Los códigos de ejemplo agregados durante o después del 20 de Agosto de 2010 quedan bajo dominio público. Puedes utilizar el siguiente aviso si es necesario: "Cualquier derecho de autor se dedica al dominio público.  http://creativecommons.org/publicdomain/zero/1.0/ "

+ +

Si deseas contribuir al wiki, debes hacer que tu documentación esté disponible bajo la licencia de Attribution-ShareAlike (u ocasionalmente una licencia alternativa ya especificada por la página que estás editando), y los ejemplos de código disponibles bajo licencia Creative Commons CC-0 (Dedicada al dominio público). Añadir  contenido a este wiki significa que aceptas que tus contribuciones estén disponibles bajo esas licencias.

+ +

Algunos contenidos antiguos se pusieron a disposición bajo una licencia distinta de las licencias mencionadas anteriormente. Estos se indican en la parte inferior de cada página a través de un Bloque de Licencia Alternativo.

+ +
+

No se pueden crear nuevas páginas utilizando licencias alternativas.

+
+ +

Los derechos de autor sobre el material publicado permanecen con el autor a menos que este los asigne a otra persona.

+ +

Si tienes alguna pregunta o inquietud sobre algo expuesto aquí, por favor contacta con Eric Shepherd.

+ +
+

Los derechos sobre las marcas comerciales, logotipos, marcas al servicio de la Fundación Mozilla, así como la apariencia de este sitio Web, no se encuentran bajo la licencia Creative Commons, están exentos. Se reconoce que son obras de autoría (como logotipos y diseños gráficos), y no están incluidos en el trabajo que se autoriza bajo esos términos. Si utilizas el texto de los documentos, y deseas también usar cualquiera de estos derechos, o si tienes cualquier otra pregunta sobre el cumplimiento de nuestros términos de licencia para esta colección, contacta con la Fundación Mozilla por este medio: licensing@mozilla.org.

+ +

Descarga de contenido

+ +
 
+ +
+
Puede descargar un espejo tarball completo de MDN. (2.5 GB a partir de 2016-11-30).
+ +
 
+ +

Páginas únicas

+ +

Puede recuperar el contenido de una  página  única en MDN agregando parámetros de documento a la URL para especificar el formato que desea.

+ +

Herremientas de terceros

+ +

Puede ver el contenido de MDN a través de herramientas de terceros como Dash (para Mac OS) y Zeal (para Linux y Windows).

+ +

Kapeli también publica documentos offline de MDN que cubren HTML, CSS, JavaScript, SVG y XSLT.

+ +

Vincular a MDN

+ +

Consulte este artículo para obtener orientación sobre cómo vincular a MDN para obtener las mejores prácticas al enlazar.

+ +

Informar de problemas en MDN

+ +

Consulte Cómo informar de un problema en MDN.

+ +

Historia de MDN

+ +

El proyecto para el Centro de Desarrollo Mozilla (a.k.a. MDC, a.k.a. Devmo) comenzó a principios de 2005, cuando la Fundación Mozilla obtuvo una licencia de AOL para utilizar el contenido original Netscape DevEdge. El contenido DevEdge fue revisado en busca de material todavía útil, que luego fue migrado por voluntarios en este Wiki para que fuera más fácil de actualizar y mantener.

+ +

Desde entonces, el proyecto ha seguido creciendo y ahora forma un nexo central para toda la documentación de desarrollo relacionada con el proyecto Mozilla y las tecnologías de Web Abierta. En 2010, el nombre fue cambiado a Mozilla Developer Network. En 2011 se agregó Demostraciones de Tecnologías de Web Abierta para que los desarrolladores Web puedan compartir y mostrar su código y páginas de aprendizaje para proporcionar enlaces a los tutoriales. (El nombre de MDC viene de "MDN Doc Center" de la sección de documentación). Se espera que con el tiempo la Red de Desarrolladores de Mozilla se convierta en un recurso que los diseñadores Web, desarrolladores de aplicaciones, de extensiones y escritores visiten de forma regular.

+ +

Acerca de Mozilla

+ +

Si deseas aprender más acerca de quiénes somos, cómo ser parte de Mozilla, o simplemente, dónde encontrarnos, estás en el lugar correcto. Para saber lo que nos mueve y nos hace diferentes, por favor visita nuestra página de misión.

+
diff --git a/files/es/mdn/comunidad/index.html b/files/es/mdn/comunidad/index.html new file mode 100644 index 0000000000..fd3abc7f28 --- /dev/null +++ b/files/es/mdn/comunidad/index.html @@ -0,0 +1,54 @@ +--- +title: Únete a la comunidad de MDN web docs +slug: MDN/Comunidad +tags: + - Comunidad + - Documentación + - Guía + - Proyecto MDC +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/es/docs/MDN")}}
+ +
+

La documentación de la web de MDN (MDN web docs) es más que un wiki: Es una comunidad de desarrolladores que trabajan unidos para hacer que MDN sea un excelente recurso para todos los desarrolladores que usen cualquier tecnología de la Open Web.

+
+ +

Nos gustaría mucho que contribuyeras a MDN, pero nos encantaría si además de contribuir participaras en la comunidad de MDN. Aquí te explicamos cómo ponerte en contacto en tres sencillos pasos:

+ +
    +
  1. Crear cuenta MDN.
    2. +
  2. Join in conversations (aun no disponible en español).
    3. +
  3. Siga lo que está pasando.
    4. +
+ +

Cómo funciona la comunidad

+ +

Aquí encontraras más artículos que describen a la comunidad de MDN.

+ +
+
+
+
Community roles
+
No disponible en español por el momento.
+
Doc sprints
+
No disponible en español por el momento
+
Siga lo que está pasando
+
MDN es auspiciado por  La comunidad de la red de desarrolladores de Mozilla. Aquí encontraras algunas maneras por las cuales compartimos información acerca de lo que estamos haciendo.
+
+ +
+
+
+ +
+
+
MDN community conversations
+
no disponible en español por el momento
+
Trabajar con nuestra comunidad
+
Una gran parte de contribuir a la documentación de MDN en cualquier aspecto es saber cómo trabajar dentro de la comunidad MDN. Este artículo te ofrece tips para ayudarte a aprovechar las interacciones con otros colaboradores y con los equipos de desarrolladores.
+
+
+
diff --git a/files/es/mdn/contribute/community/index.html b/files/es/mdn/contribute/community/index.html new file mode 100644 index 0000000000..a80a67a1b4 --- /dev/null +++ b/files/es/mdn/contribute/community/index.html @@ -0,0 +1,118 @@ +--- +title: Trabajando con nuestra comunidad +slug: MDN/Contribute/Community +tags: + - Comunidad + - Guía + - MDN Meta +translation_of: MDN/Community/Working_in_community +--- +
{{MDNSidebar}}
+ +

Lo más importante para contribuir a la documentacion de MDN en cualquier escala es saber trabajar como parte de una comunidad. Este artículo brinda tips que te ayudarán a sacarle el máximo partido a tus interacciones con documentadores y el equipo de desarrolladores.

+ +

Reglas generales de comportamiento.

+ +

Aquí encontraras algunas reglas generales de conducta para cuando trabajes en la comunidad Mozilla.

+ + + +

Se cortés

+ +

Siempre se diplomático y respetuoso cuando te comuniques con los demás.

+ +

Señalando errores cortésmente

+ +

Si tu propósito al contactar a alguien es pedirle que haga algo diferente o señalar un error que ha estado cometiendo (especialmente si lo hace repetidamente), comienza tu mensaje con un comentario positivo. Esto suaviza el golpe, por así decirlo, y demuestra que estás tratando de ayudar, en lugar de convertirte en 'el malo de la película'.

+ +

Por ejemplo, si un colaborador nuevo ha estado creando muchas páginas sin etiquetas y te gustaría señalar este problema, tu mensaje podría verse así (las cosas que necesita cambiar para cada caso están subrayadas) :

+ +
+

Hola, MrBigglesworth, he notado sus contribuciones a la documentación de la API de Wormhole, ¡y es fantástico contar con su ayuda! Me gusta especialmente la forma en que equilibraste tu nivel de detalle con la legibilidad. Dicho esto, sin embargo, podría hacer que estos artículos sean aún mejores y más útiles si agrega las etiquetas correctas a las páginas sobre la marcha.

+ +

Consulte la guía de etiquetado de MDN (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) para obtener más detalles.

+ +

Gracias de nuevo y espero sus futuras contribuciones.

+
+ +

Intercambiando conocimiento

+ +

Al participar en el proyecto MDN, es útil saber lo que está pasando e interactuar con otros los demas miembros de nuestra comunidad. Al hacer esto, puedes compartir ideas, actualizaciones de estado y más. Además contamos con recursos y herramientas para ayudarte a saber que se está haciendo y por quiénes.

+ +

Canales de comunicación

+ +

Existen varias formas en las que puedes participar con los miembros de la comunidad, ya sea con documentadores o desarrolladores, cada uno de los cuales tiene sus propias reglas de comportamiento.

+ +

Discourse (en Inglés)

+ +

El foro MDN Discourse es un buen lugar para hacer preguntas generales sobre la contribución a MDN y empezar discusiones.

+ +

Chat (en Inglés)

+ +

Utiliza el sistema de chat Matrix para contactar con personas en tiempo real. Los miembros del personal de MDN están disponibles en la sala de MDN Web Docs  y están activos durante los días laborales en Europa y América del Norte. Explora las otras salas de chat para encontrar personas involucradas en temas que te interesen.

+ +

GitHub (en Inglés)

+ +

Si encuentras un problema en MDN, o deseas hacer una pregunta, ¡puedes presentar un problema en nuestro repo de GitHub! Luego serán evaluados y procesados en algún momento en el futuro.

+ +

Bugzilla

+ +

Cuando escribes documentacion para cubrir los cambios implementados como consecuencia de un error en Bugzilla, podrás interactuar en ocasiones con las personas involucradas en estos errores. ¡Asegurate de tener guía de comportamiento Bugzilla en mente todo el tiempo!

+ +

Email

+ +

En ocasiones, el intercambio de correo electrónico privado entre tú y una o más personas es el camino a seguir, si tienes su dirección de correo electronico.

+ +
+

Nota: Como regla general, si alguien a publicado su email en los documentos sobre la tecnología que estás documentando, te ha dado su correo, o es un correo muy conocido, un correo es un buen medio para realizar el "primer contacto". Si tienes que buscarlo, probablemente deberías intentar obtener permiso para Discourse o una lista de correo primero, a menos que hayas agotado todos los demás recursos para ponerte en contacto.

+
+ +

Estado del contenido

+ +

Tenemos varias herramientas útiles que te proporcionan información sobre el estado de la documentación.

+ +
+
Tablero de revisión
+
Esta es una herramienta fantástica para la revisión de los cambios realizados  en el contenido de MDN. Puedes ver el historial, seleccionar un rango de tiempo para ver, y filtrar por cosas como la configuración regional, nombre del contribuyente, y tema. Una vez que estés viendo la serie de revisiones, puedes ver los cambios realizados en cada una de ellas, abrir rápidamente la pagina, ver el historial completo o revertir cambios  (si tienes los permisos).
+
Visión general del estado de la documentación
+
Nuestra pagina de vista del estado de documentación provee una lista de todas las áreas de MDN que se han configurado para el seguimiento de estado, con información de algunas páginas y los diferentes trabajos que se necesitan. Haz click en un área en particular y mira un listado de los contenidos que necesitan trabajo, como páginas que no tienen etiquetas, o etiquetas que requieren cierto trabajo. Puedes ver una lista de páginas que no se han actualizado hace mucho tiempo, están desactualizados, o una lista de los errores encontrados y cómo han afectado a la documentación en esa área.
+
Los planes del proyecto de documentación
+
Tenemos una serie de proyectos de escritura que se encuentran en etapa de planificación, o son grandes y se encuentran en curso, para los que se han escrito los documentos de planificación y así tener un registro de lo que tenemos que hacer.
+
MDN Taiga (en Inglés)
+
Los redactores del personal de MDN utilizan una herramienta llamada Taiga para gestionar proyectos de documentación actuales y futuros. Puedes echar un vistazo para ver lo que estamos haciendo y cómo va, también puedes ver qué proyectos nos gustaría que sucedan pronto. Algunos de ellos serán asumidos por escritores del personal, ¡pero no dudes en hacerte cargo de uno si lo deseas! Para obtener más información sobre los procesos ágiles que sigue el equipo de MDN, consulta nuestra página de procesos en la  wiki de Mozilla.
+
+ +

La comunidad de desarrollo

+ +

Posiblemente las relaciones más importantes para desarrollar y mantener, como miembro de la comunidad de la escritura MDN, son las que mantengas  con los desarrolladores. Ellos crean el software que estamos desarrollando, pero también son la fuente más útil de información que tenemos. Es crucial que mantengamos buenas relaciones con los desarrolladores, ¡así es más probable que respondan a tus preguntas de forma rápida, precisa y adecuada!

+ +

Además, representas a la comunidad de escritura MDN. Por favor, ayuda a asegurar que mantengamos nuestra excelente relación de trabajo con el equipo de desarrollo haciendo que cada interacción que tengan con el equipo de escritura sea la mejor posible.

+ +

En una nota relacionada, una gran manera de encontrar a la persona adecuada para hablar es mirar la lista de propietarios del módulo.

+ +

La comunidad de escritura

+ +

La comunidad de la escritura es grande. Mientras que el número de contribuyentes frecuentes o de gran escala es relativamente pequeño, hay muchas docenas o cientos de personas que contribuyen al menos de vez en cuando. Afortunadamente, se trata de personas impresionantes, con un amor genuino por la Web, Mozilla, y/o la documentación, además, la interacción con ellos es casi siempre bastante fácil.

+ +

Mira el articulo Únete a la comunidad para mas información acerca de la comunidad MDN.

+ +

 El lugar donde más frecuentemente podrás interactuar directamente con otros escritores es en el foro Discourse.

+ +

Teniendo en cuenta la {{anch("Guía general de comportamiento")}} , usted notará que las cosas salen bien por lo general.

+ +

Mira también

+ + diff --git a/files/es/mdn/contribute/feedback/index.html b/files/es/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..780639f8f2 --- /dev/null +++ b/files/es/mdn/contribute/feedback/index.html @@ -0,0 +1,46 @@ +--- +title: Enviar feedback sobre MDN +slug: MDN/Contribute/Feedback +translation_of: MDN/Contribute/Feedback +--- +
{{MDNSidebar}}
+ +

{{IncludeSubnav("/es-ES/docs/MDN")}}

+ +

¡Bienvenido a la Red de Desarrolladores de Mozilla! si tienes algunas sugerencias, o estás teniendo problemas usando MDN, estás en el lugar correcto. El mismo hecho de que muestres interés en ofrecer feedback, te hace más parte de la comunidad de Mozilla, y te agradecemos de antemano tu interés.

+ +

Tienes varias opciones parar ofrecer tu punto de vista, este artículo te ayudará.

+ +

Actualizar la documentación

+ +

Para empezar, si has localizado un problema en la documentación, deberías sentirte libre de corregirlo tú mismo. Simplemente regístrate usando Github, luego haz click en cualquier botón Editar azul para abrir el editor e ingresar en el mundo de la contribución en la documentación MDN. La documentación aquí es una wiki, y está supervisada por un equipo de voluntarios y personal pagado, así que no seas tímido; tu gramática no tiene por qué ser perfecta. Arreglaremos cualquier error que puedas cometer; ¡No vas a estropear nada!

+ +

Para obtener más información sobre comó contribuir a la documentación MDN consulte:

+ + + +

Únete a la conversación

+ +

¡Háblanos! Existen varias maneras de conectar con otras personas que ya están trabajando concontenido MDN.

+ +

Chat (Síncrono)

+ + + +

Discusiones (Asíncrono)

+ +

Las discusiones más a largo plazo ocurren en el foro de discusión de MDN. Puedes postear en el foro bien por email escribiendo a mdn@mozilla-community.org. Si te unes al foro, podrás recibir notificaciones de las discusiones, directamente en tu email.

+ +

Informa de un problema

+ +

Problemas de documentación

+ +

Si ves un problema en la documentación que por cualquier razón, no puedas arreglar tú mismo, siempre puedes informar del problema. Puedes utilizar este formulario para cualquier problema relacionado con documentación, tanto si se trata de una correción simple o de una solicitud para una nuevo fragmento de contenido. Como se ha mencionado con anterioridad, te invitamos a que contribuyas con cambios de tu propia cosecha, pero esta opción está igualmente disponible.

+ +

Problemas en la web

+ +

Si encuentras problema de el sitio web de MDN, o tienes cualquier idea para nuevas funcionalidades para este sitio, puedes enviar un ticket al equipo de desarrollo de MDN.

diff --git a/files/es/mdn/contribute/getting_started/index.html b/files/es/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..1c1297b806 --- /dev/null +++ b/files/es/mdn/contribute/getting_started/index.html @@ -0,0 +1,142 @@ +--- +title: Primeros pasos en MDN +slug: MDN/Contribute/Getting_started +tags: + - Comenzando + - Getting Started + - Guía + - New Contributors + - Nuevos Colaboradores +translation_of: MDN/Contribute/Getting_started +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/es/docs/MDN")}}
+ +

Somos una comunidad abierta de desarrolladores y escritores que crea recursos para tener una mejor Web sin importar la marca, navegador o plataforma. Cualquiera puede contribuir y cada persona que lo hace nos vuelve más fuertes. Juntos podemos continuar innovando la Web para servir al bien común. Esto empieza aquí, contigo.

+ +

Cada parte de MDN (desde el código que permite funcionar al sitio hasta la documentación; ejemplos, y demos) son creados por una comunidad de desarrolladores y escritores. Todos pueden ayudar en algo, y tenemos la esperanza de que te unas.

+ +

3 simples pasos hacia MDN

+ +

MDN es una wiki, donde cualquiera puede agregar y editar contenido. No necesitas ser programador o saber mucho sobre tecnología. Hay muchas actividades que necesitan ser completadas, desde tareas simples como revisar la redacción o la ortografía, hasta tareas complejas como escribir la documentación para una API. Esta guía te ayudará a empezar y te conducirá por el camino para que encuentres formas de mejorar el contenido de MDN.

+ +

Contribuir es fácil e inofensivo. Si cometes un error, es fácil corregirlo. Y aunque no estés seguro de cómo debe ser el contenido o tu ortografía no sea muy buena, no debes preocuparte. Tenemos un equipo que revisa el contenido de MDN y se asegura de que esté lo más correcto posible. Alguien estará al tanto para verificar que tu trabajo esté ordenado y bien escrito. Comparte lo que sabes y usa tus talentos. Confía en que la comunidad ayudará a mejorar tu trabajo.

+ +

Paso 1: Crea una cuenta en MDN

+ +

Para comenzar a contribuir en MDN, necesitas tener una cuenta. Para más detalles, por favor dirígete a crear una cuenta. Ten en cuenta que necesitarás una cuenta de Github para crear una cuenta en MDN ya que en este momento utilizamos Github para verificar las cuentas de MDN.

+ +

Paso 2: Elige en qué quieres contribuir

+ +

Una vez iniciada la sesión en MDN, lee las descripciones de los distintos tipos de tareas en la sección {{anch("Tipos de tareas")}} que se encuentra más abajo en esta misma página y elige la que mejor te parezca. Puedes hacer clic en cualquier tarea que sea de tu interés para empezar a contribuir.

+ +

Si la tarea elegida implica crear páginas nuevas, te pedimos por favor que leas Obteniendo permisos de creación de página donde encontrarás información importante acerca de cómo obtener permiso para crear nuevas páginas; por razones de seguridad, las cuentas nuevas tienen deshabilitada esta funcionalidad por defecto.

+ +

Paso 3: Lleva a cabo la tarea

+ +

Una vez que hayas decidido en qué quieres contribuir, busca una página, ejemplo de código, etc. en la cual quieras trabajar y ¡hazlo!

+ +

No te preocupes por hacerlo perfecto, hay otros colaboradores de MDN como tú que pueden ayudar a corregir los errores que hayan pasado inadvertidos. Si surgen preguntas mientras realizas la actividad, revisa la página de la comunidad para obtener información acerca de las listas de correo y chats donde puedes realizar tus preguntas.

+ +
+

Si te sientes inseguro de editar una página, quieres practicar o quieres realizar algún experimento, tenemos una página de pruebas que puedes editar sin ninguna preocupación. Dentro de esa página haz clic en editar y simplemente experimenta. Te pedimos de favor que solo experimentes en esa página y no hagas ningún cambio innesesario a las demás paginas solo para ver que sucede ya que podrías confundir a otros lectores que visiten MDN y cargar con trabajo innecesario a otros editores.

+
+ +

Cuando hayas completado la tarea que elegiste, puedes continuar con otra o ver más abajo otras actividades que puedes realizar en MDN.

+ +

Tipos de tareas

+ +

Hay muchos caminos que puedes elegir para contribuir a MDN dependiendo de tus habilidades e intereses. Existen algunas tareas que son pesadas, pero tenemos otras muchas simples disponibles de las cuales muchas de ellas solo necesitan cinco minutos (¡o menos!) de tu tiempo. Aquí debajo encontrarás los tipos de tareas y al lado del nombre de cada una de ellas verás el tiempo aproximado necesario para realizarla.

+ +

Opción 1: Me gustan las palabras

+ +

Puedes ayudarnos revisando o editando los documentos ya existentes y ponerles las etiquetas correctas.

+ + + +
Si vas a crear una nueva página/articulo te recomendamos leer la Style Guide (en inglés) para que conozcas los detalles y la estructura recomendada de las páginas. Y si corriges la ortografía, redacción, de algún artículo, puedes leer la Guía de Estilos si tienes alguna duda. Buscamos que todos los artículos sean consistentes en el sitio.
+ +

Opción 2: Me gusta el código fuente

+ +

¡Necesitamos más ejemplos de código! o también puedes ayudar a construir la plataforma de nuestro sitio: Kuma o puedes ayudar a actualizar la compatibilidad de navegadores en nuestra base de datos

+ + + +

Opción 3: Me gustan las palabras y el código fuente

+ +

Tenemos tareas que requieren conocimiento del idioma y habilidades técnicas como crear nuevos artículos, verificar la información técnica o adaptar documentos.

+ + + +

Opción 4: MDN en mi idioma

+ +

Todo el trabajo de adaptación y traducción en MDN es realizado por nuestra asombrosa comunidad de voluntarios.

+ + + +
+

Puedes revisar las páginas importantes que necesitan traducción aquí -> Estado de las paginas con prioridad para traducir y te recomendamos leer la Guía de Estilos para que conozcas las convenciones a la hora de traducir.

+
+ +

Opción 5: Encontré información errónea pero no sé cómo corregirla

+ +

Puedes reportar problemas creando un reporte de error de la documentación (en inglés).

+ +

Usa estos valores:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Campo de BugzillaValor
productDeveloper Documentation
component[Escoge el área apropiada al tema, o "General" si no estás seguro o no encuentras el indicado]
URLLa dirección URL de la página donde encontraste el problema
DescripciónDescribir el problema y donde encontrar la información correcta. Esto puede incluir personas ("Describe los pasos uno a uno") como también links a direcciones web
+ +

Otras actividades que puedes realizar en MDN

+ + diff --git a/files/es/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/es/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..699828214a --- /dev/null +++ b/files/es/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,44 @@ +--- +title: Cómo convertir códigos de demostración para que estén "en vivo" +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live +tags: + - Código + - Demostración + - Sample +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +
{{MDNSidebar}}

MDN tiene ahora un sistema de "ejemplos en vivo", donde el código de demostración que aparece en la página se usa directamente para mostrar el resultado de dicho ejemplo. Sin embargo, muchos artículos existentes tienen ejemplos que todavía no usan este sistema y necesitan ser convertidos.

+ + + + + + + + + + + + + + + + +
¿Dónde hay que hacerlo?En artículos etiquetados como NecesitaMuestraEnVivo (NeedsLiveSample)
¿Qué necesitas saber para hacer esta tarea? +
    +
  • Entender HTML, CSS y/o JavaScript, dependiendo del código de muestra que sea.
    • +
  • Habilidad para usar macros KumaScript dentro de los artículos MDN.
    • +
+
¿Cuáles son los pasos para hacer la tarea? +

Para una descripción completa del sistema de demostración en vivo, incluyendo cómo crear las demostraciones en vivo, ver Usar el sistema de demostración en vivo.

+ +
    +
  1. Elige un artículo de la lista de artículos etiquetados como NecesitaMuestraEnVivo (NeedsLiveSample), donde el código sea para una característica con la que sientas que estas familiarizado.
    2. +
  2. Convierte el código para que sea "en vivo".
    3. +
  3. Borra cualquier código o imagen que haya sido usada para mostrar el resultado de la demostración.
    4. +
+ +

 

+
+ +

 

diff --git a/files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html b/files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html new file mode 100644 index 0000000000..8e254f6ac0 --- /dev/null +++ b/files/es/mdn/contribute/howto/crear_cuenta_mdn/index.html @@ -0,0 +1,32 @@ +--- +title: Cómo crear una cuenta MDN +slug: MDN/Contribute/Howto/Crear_cuenta_MDN +tags: + - Cuenta + - GitHub + - Perfil + - Persona + - Principiante + - account +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}
+ +

Para editar contenido en MDN, necesitas un perfil MDN. No es necesario un perfil si solo quieres buscar y leer los documentos de MDN:

+ +
    +
  1. En la parte superior de cada página en MDN encontrarás el botón de  Registrarse. Pasa el puntero del mouse por ahí (o toca sobre este botón si estás con un dispositivo móvil) para mostrar una lista de servicios de autenticación que son permitidos para registrarse en MDN.
    2. +
  2. Selecciona el servicio para registrarte. Actualmente, solo GitHub y Gmail están disponibles. Ten en cuenta que si seleccionas GitHub, un enlace a tu perfil de GitHub será incluido en tu página de perfil público de MDN.
    3. +
  3. Sigue las indicaciones de GitHub o de Gmail para conectar tu cuenta a MDN.
    4. +
  4. Una vez autenticado el servicio te retorna a MDN, se te pedirá que ingreses un nombre de usuario y una dirección de correo electrónico. Tu nombre de usuario será mostrado públicamente para darte el crédito del trabajo que has hecho. No utilices tu dirección de correo electrónico como nombre de usuario.
    5. +
  5. Click en Crear mi perfil MDN.
    6. +
  6. Si la dirección de correo electrónico que has especificado en el paso 4 no es el mismo que has utilizado  con el servicio de autenticación, revisa tu correo y dale click en el enlace en el correo de confirmación que se te envió.
    7. +
+ +

¡Listo! ¡Ya tienes una cuenta MDN y puedes editar páginas inmediatamente!

+ +

Puedes dar clic en tu nombre en la parte superior de cualquier página de MDN para ver tu perfil público. Desde ahí, puedes editar, hacer cambios o adicionar información en tu perfil.

+ +
+

Nota: Los nuevos nombres de usuario no pueden contener espacios ni el carácter "@". Ten en cuenta que tu nombre de usuario será mostrado públicamente para identificar los trabajos que hayas hecho!

+
diff --git a/files/es/mdn/contribute/howto/document_a_css_property/index.html b/files/es/mdn/contribute/howto/document_a_css_property/index.html new file mode 100644 index 0000000000..41b3fcb14f --- /dev/null +++ b/files/es/mdn/contribute/howto/document_a_css_property/index.html @@ -0,0 +1,82 @@ +--- +title: Cómo documentar una propiedad CSS +slug: MDN/Contribute/Howto/Document_a_CSS_property +translation_of: MDN/Contribute/Howto/Document_a_CSS_property +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

As the CSS standards evolve, new properties are always being added. The MDN CSS Reference needs to be kept up to date with these developments. This document gives step-by-step instructions for creating a CSS property reference page.

+ +

Each CSS property reference page follows the same structure. This helps readers find information more easily, especially once they are familiar with the standard reference page format.

+ +

Step 1 — Decide which property to document

+ +

First, you will need to decide which property to document. The CSS Documentation status page lists properties that need to be documented. For details about the CSS property you will need to find a relevant specification for it (e.g., a W3C specification, a Mozilla Wiki page, or a bug report for a non-standard property used in rendering engines like Gecko or Blink).

+ +
+

Pro tips:

+ + +
+ +

Step 2 — Check the database of CSS properties

+ +

Several characteristics of a CSS property, such as its syntax or if it can be animated, are mentioned in several pages and are therefore stored in an ad-hoc database. Macros that you'll use on the page need information about the property that is stored there, so start by checking that this information is there.

+ +

If not, contact an admin or a power user, either on the MDN Web Docs chat room, or, if nobody is available, by filing an issue report.

+ +

Step 3 — Creating the CSS property page

+ +

Preparations finished! Now we can add the actual CSS property page. The easiest way to create a new CSS property page is to copy the content of an existing page and to edit it. We will go through the different steps now.

+ +
+

Cloning a page is currently broken on MDN. That's why we need to go through these somewhat more complex steps. Please vote for ({{bug(870691)}}).

+
+ +
    +
  1. Clone the following page, set the title to your-property (without capitals) and the slug to Web/CSS/your-property.
    2. +
  2. Change the summary to fit, but keep it starting the same way : "The your-property CSS property…". Explain briefly what this property is for.
    3. +
  3. If the property is not experimental, remove the \{{SeeCompatTable}} macro. The purpose of this macro is to alert developers to the possibility that the feature may not yet have consistent support across browsers, and may change in the future as its specificaton evolves. Deciding whether a feature is experimental is a matter of judgement, and should include factors like: +
      +
    • Is the feature supported by several browsers?
      • +
    • Is the feature prefixed or behind a preference?
      • +
    • Is there any reason to think that the implementation of the feature will change in the future?
      • +
    +
    4. +
  4. Replace the parameter of the \{{cssinfo("animation-name")}} macro by the name of the CSS property you are documenting. This will allow you to build the summary box using the data you entered in step 2.
    5. +
  5. Replace the example of the syntax by relevant ones. Keep them very simple and don't forget that a lot of people don't understand a formal syntax so it needs to be simple and exhaustive. Keep the inherit, initial, and unset keywords examples at the end. It reminds users that these are valid values, too.
    6. +
  6. Under the chapter Values, put the meaning of each value. If it is a keyword, don't forget to mark it as code (select it and press CTRL-O). Each description should start by "Is a" followed by the type of the value, or indicating it is a keyword.
    7. +
  7. Clear the Examples chapter, we will add them at the end!
    8. +
  8. Update the specification table. For information about how to do it, read this tutorial.
    9. +
  9. Update the compatibility information. For information about how to do it, read this tutorial.
    10. +
  10. Update the See also section with relevant links. Do not link to specs here and usually link to internal documents. External documents are welcome, but only if they bring really good information. There are spam or SEO links often, so don't worry if external links are removed sometimes. Just start the discussion if you still find it useful and want to see it back.
    11. +
  11. Add the relevant tags: you need to add CSS, CSS Property, and Reference. You also need to add Experimental or Non-standard if this is the case. Finally you also need to add a CSS XYZ tag, where XYZ stands for the group of CSS properties it belongs to. It is often the spec short name. All these tags are used to generate quicklinks and other niceties.
    12. +
+ +

At any point, you can save by hitting the SAVE button. You can continue to edit right along. If you haven't saved your page until now, please do so! :-)

+ +

The last step is to add Examples. To do that follow this tutorial about live samples. Don't forget that we are in a document explaining one single property: you need to add examples that show how this property is working in isolation, not how the whole specification is used. That means, examples for list-style-type will show what the different values generate, but not how to combine it with other property, pseudo-classes or pseudo-elements to generate nice effects; tutorials and guide can be written to show more.

+ +

Step 4 — Getting a review

+ +

You have documented your CSS property! Congratulations!

+ +

In order to have a good quality and consistency throughout the MDN CSS reference, it is good practice to request a review. Just click on the checkbox at the bottom of the article (in edit mode), and, optional, if you want to have a more personal review helping you to improve editorial skills, ask for it on the MDN forum.

+ +

Step 5 — Integrating the new page in the MDN

+ +

Now that your page is created, you want it to be found by the readers. Adding tags helped about this already as it allowed it to appear in the quicklinks to related CSS pages. Also you want it to appear on the CSS index page. If the newly documented property is on the standard track and at least one major browser is implementing it, it deserves to be listed this. Only administrator can add it there, so contact the CSS driver on IRC (currently at #mdn ping teoli) or file a documentation bug requesting it.

+ +

Also, if the property is implemented by Firefox, you need to check that it is listed, and linked! in the correct Firefox for developers MDN page. The new CSS property is likely already listed in the HTML section, just be sure that its name links back to your newly created page.

+ +

Contact us

+ + diff --git a/files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html b/files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html new file mode 100644 index 0000000000..a0bdd5267f --- /dev/null +++ b/files/es/mdn/contribute/howto/document_a_css_property/plantilla_propiedad/index.html @@ -0,0 +1,120 @@ +--- +title: Plantilla de página para propiedades CSS +slug: MDN/Contribute/Howto/Document_a_CSS_property/Plantilla_propiedad +translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template +--- +
{{MDNSidebar}}
Esta es una página plantilla para las propiedades de CSS. Por favor utilice esto como una plantilla base cuando vaya a crear una nueva página para una propiedad de CSS. 
+Los comentarios en cursiva son información  sobre cómo usar parte de la plantilla
+ +
{{CSSRef}}
+ +
Agregue el encabezado no estándar si la propiedad no esta en el estándar. En la sección de resumen en una nota, describa como lograr su efecto usando tecnologías estándares de la Open Web.
+ +
{{non-standard_header}}
+ +
 
+ +
Agregue el encabezado experimental si a su juicio es probable que el comportamiento de la propiedad cambie en el fututo, por ejemplo; debido a especificaciones muy inmaduras o implementaciones incompatibles.
+ +
{{SeeCompatTable}}
+ +

 

+ +

Desripción de la propiedad. Debe comenzar por "La propiedad xyz CSS " seguido de una descripción de una oración. El primer párrafo de esta introducción se utilizará por defecto como la descripción de la página.

+ +

{{note("Para cualquier mensaje especial")}} Pero no agregue varias notas. Estas deben ser realmente importantes, ¡o ser parte de la decripción!

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores de palabras clave */
+property: value1;
+property: value2;
+
+/* <longitud> valores */
+property: 12.8em;   /* Una longitud válida */
+
+/* Valores globales */
+property: inherit;   <-- Para recordar que son valores posibles
+property: initial;
+property: unset;
+
+ +

La segunda parte es una traducción simple de lo que dice la sintaxis formal. Está dirigido a usuarios de nivel medio que no comprenderán bien la sintaxis formal.

+ +

Valores

+ +

Cada elemento de la sintaxis formal debe ser explicado

+ +
+
valor_1
+
Es una palabra clave que significa...
+
valor_2 {{ Non-standard_inline() }} {{experimental_inline()}}
+
Es una palabra clave que significa
+
+ +

Sintaxis formal

+ +

La sintaxis formal debe ser tomada de la especificación y agregarse a la plantilla de 'CSSData'. Es una herramienta importante para obtener información precisa de la sintaxis para los usuarios avanzados.

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Agregue esto solo si hay un ejemplo. Sin enlace roto aqui.

+ +

CSS

+ +
elementName {
+  property: value;
+  estoes: "ejemplo";
+  dream: 10000000mm;
+  amor: "peligro";
+}
+ +

HTML

+ +
<elementName>foo bar</elementName>
+ +

Resultado

+ +

{{EmbedLiveSample("Examples")}}

+ +

Especificaciones

+ +

Utilizar exclusivamente esta tabla estándar. Coloque la especificación más antigua en la parte inferior. Use las plantillas SpecName() para el nombre y Spec2() para el estado. De esa manera, cuando la especificación progresa en el estándar, o se mueve, el contenido de la tabla se adaptará automáticamente.

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}{{Spec2("CSS3 Animations")}}Sin cambios desde CSS 2.1
{{SpecName("CSS2.1", "#fake-link", "fake value")}}{{Spec2("CSS2.1")}}Definición inicial
+ +

Compatibilidad del navegador

+ +

(Ver Tablas de compatibilidad para más información)

+ +

Ver también

+ + diff --git a/files/es/mdn/contribute/howto/enlace_cuenta_github/index.html b/files/es/mdn/contribute/howto/enlace_cuenta_github/index.html new file mode 100644 index 0000000000..825081aead --- /dev/null +++ b/files/es/mdn/contribute/howto/enlace_cuenta_github/index.html @@ -0,0 +1,110 @@ +--- +title: Como unir tu cuenta GitHub a tu perfil MDN +slug: MDN/Contribute/Howto/enlace_cuenta_GitHub +translation_of: Archive/MDN/Howto_Link_a_Github_account +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +
+

Note: Support for Persona logins on MDN was disabled on November 1, 2016. The method for adding a Github account to your profile therefore no longer works. If you didn't add a GitHub login to your MDN account before we disabled Persona logins, please file an "Account Help" bug on Bugzilla. For further reading about the end of life of Persona, see: Persona shutdown guidelines.

+
+ +

Debido a que el sistema de autentificacion de Persona  Mozilla esta siendo cerrado, todos los usuarios que deseen contribuir a MDN necesitaran otra manera de ingresar desde el 1 de Noviembre del 2016. Actualmente, la unica alternativa soportada es  GitHub, debido a esto necesitaras una cuenta en GitHub para editar y contribuir apartir de esta fecha. Este articulo describe como añadir la autentificacion de GitHub  a tu perfil MDN.

+ +
+

Debes hacer esto antes del 1 de Noviembre de 2016, o no tendras modo de ingresar a MDN!

+
+ +

Descripción

+ +

Añadir la autentificacion mediamte GitHub a tu cuenta no es dificíl. Entraremos en detalle más adelante, pero primero, aqui hay una pequeña lista de pasos necesarios:

+ +
    +
  1. ingresa a tu cuenta MDN mediante Persona.
    2. +
  2. Ve a la pagina cuentas asosiadas.
    3. +
  3. Añade la autentificacion GitHub.
    4. +
+ +

Instrucciones Detalladas

+ +

Esta es una guia paso a paso de todo lo que necesitas saber.

+ +

Ingresar a tu cuenta MDN

+ +
    +
  1. En la parte superior de la pagina de MDN, hubica el mouse sobre Registrarse o da tap para llegara este cuadro. aqui se muestran los metodos de autentificacion disponibles, Persona y GitHub.
    + Sign in box on MDN, showing Persona and Github.
    2. +
  2. Seleciona Persona, y usa tus datos de usuario usuales. si obtienes un error de inicio no reconocido, asegurese de estar ingresando la cuenta de correo con la que se unio a MDN, esta puede ser su direccion de correo usual. Si aún tienes problemas, mira {{anch("Persona no me reconoce")}}.
    3. +
+ +

Ir a la pagina "cuentas asociadas"

+ +

Existen dos maneras de llegara esta pagina.

+ +

La primera y mas gacil es dar click en el siguiente link.

+ +

Otra manera seria, haciendo:

+ +
    +
  1. Dar Click en tu nombre de usuario en la parte superior de cualquier pagina MDN. (en la misma posicion donde aparecia Registrarse cuando aún no habia ingresado.) Esta lo enviara a su pagina de perfil.
    2. +
  2. Abra el "menu", y da click en Cuentas Asociadas.
    + Gear menu in profile, showing the "Account connections" option
    3. +
+ +

Añadir autentificación GitHub

+ +

You're now on the "Account connections" page, which lists the external accounts you've already linked to your MDN profile. If GitHub is already listed, congratulations! You're ready to go! But test it to be sure you remember your password, by signing out of MDN and signing back in using your GitHub credentials.

+ +

If GitHub isn't already listed, then near the bottom of the page, look below the list of already-linked external accounts. There you'll find a section called Connect a new account, which lists the types of accounts you can connect to your MDN profile. It looks something like this:

+ +

+ +

To add GitHub:

+ +
    +
  1. Click  Connect with GitHub. MDN will contact GitHub to request  permission to link the accounts.  If you're not already signed in to GitHub, you'll be asked to do so:
    + Screenshot of GitHub sign in window.
    2. +
  2. If you have two-factor authentication enabled on your GitHub account, you'll be asked to enter your authentication code:
    + Screenshot of GitHub's Two-factor authentication window.
    3. +
  3. Now that you're signed in to your GitHub account, you'll be asked to authorize the link between GitHub and MDN (unless you already have this authorization on file for some reason). This page is shown below.
    + Screenshot of GitHub "Authorize application" window.
    + Click the green Authorize application button to grant permission for your MDN profile to access your GitHub account. If the GitHub account is successfully linked to your MDN profile, you'll see this message:
    + Account successfully created.
    4. +
+ +

Not only can you now use GitHub to sign in to MDN, but you're actually already signed in using your GitHub authentication! You're now ready for the Persona shutdown. Be sure to update any password managers you may have installed, if necessary.

+ +

Troubleshooting

+ +

If you run into problems while trying to add your GitHub account to your profile, hopefully the troubleshooting tips below will help. If they don't, please don't hesitate to ask us for help on the MDN Web Docs chat room.

+ +

Error: Could not find profile matching account

+ +

If you try to add your GitHub account to your profile and get the error "Could not find profile matching account," it can mean a few different things. If you have multiple accounts on your GitHub account, there may be some confusion; GitHub may not report the expected email address to MDN during the account pairing attempt, which will result in this error. Other glitches in the process may also result in the same error message.

+ +

One way to work around this problem: open a new private window in your browser; in Firefox, for example, choose "New Private Window" in the File menu (or press Ctrl+Shift+P [Cmd-Shift-P on Mac]). Browse to MDN there, sign into your MDN account, then try again to add your GitHub account to your profile as covered above.

+ +

Also, be sure that when you try to log into Persona to

+ +

My GitHub authorization is not displayed on the Account Connections page.

+ +

That might be a caching issue. Reloading the page or loggin out and loggin in again should solve the problem.

+ +

Persona doesn't remember me

+ +

If you try to log into Persona so you can add a GitHub login to your MDN account and get told "Your email address is new to us," this is likely because it's been long enough since you last logged into Persona that they've deleted your email address from their system. This happens after some period of time; the Persona login window looks like this in that situation:

+ +

+ +

If this happens, you need to simply follow Persona's instructions to create a new password for that email address. MDN doesn't care about this process; the fact that your email address matches up is all that matters. A confirmation email will be sent to verify that you own the email address, probably from no-reply@persona.org. If you have spam filtering, it may be sent to your spam folder.

+ +

Once you've finished the process of setting the password for the email address you used to log into MDN, your access to MDN will be restored. Then you can follow the steps in {{anch("Detailed instructions")}} above to add your GitHub login to your MDN account.

+ +

See also

+ + diff --git a/files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html b/files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html new file mode 100644 index 0000000000..42edc03ff0 --- /dev/null +++ b/files/es/mdn/contribute/howto/etiquetas_paginas_javascript/index.html @@ -0,0 +1,83 @@ +--- +title: Cómo etiquetar páginas Javascript +slug: MDN/Contribute/Howto/Etiquetas_paginas_javascript +tags: + - Etiquetas + - JavaScript +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +
{{MDNSidebar}}

Etiquetar consiste en agregar meta-información (o información adicional) a las páginas para que el contenido relacionado pueda agruparse, por ejemplo en la herramienta de búsqueda.

+ + + + + + + + + + + + + + + +
¿Dónde hay que hacerlo?Dentro de páginas específicas relacionadas con JavaScript que aún no tengan etiquetas
¿Qué necesitas saber para hacer esta tarea? +
    +
  • Conocimiento básico de código JavaScript, como saber qué es un método o una propiedad.
    • +
+
¿Cuáles son los pasos para hacerla? +
    +
  1. Elige una de las páginas del la lista que se encuentra en el enlace anterior.
    2. +
  2. Haz Click en el enlace del artículo para cargar la página.
    3. +
  3. Una vez cargada la página, haz click en el botón EDIT cerca de la parte superior ( esto te coloca en el editor MDN).
    4. +
  4. Cómo mínimo se debería agregar la etiqueta JavaScript. Aquí hay otras etiquetas que se pueden agregar:
    5. +

  5. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TagWhat pages to use it on
    Methodmétodos
    Propertypropiedades
    prototypeprototipos
    Object type namemétodos de un objeto; por ejemplo String.fromCharCode debería llevar la etiqueta String
    ECMAScript6 and Experimentalcaracterísticas agregadas en una nueva versión ECMAScript
    Deprecatedcaracterísticas desaprobadas (cuyo uso está desaconsejado pero aún tiene soporte)
    Obsoletecaracterísticas obsoletas (que ya no tienen soporte en los navegadores modernos)
    othersVer Mestándares de etiquetado MDN para otras etiquetas posibles a aplicar
    +
    6. +
  6. Guarda con un comentario.
    7. +
  7. ¡Y Listo!
    8. +
+
+

 

diff --git a/files/es/mdn/contribute/howto/index.html b/files/es/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..611bc03e83 --- /dev/null +++ b/files/es/mdn/contribute/howto/index.html @@ -0,0 +1,15 @@ +--- +title: Guías prácticas +slug: MDN/Contribute/Howto +tags: + - Documentation + - Landing + - MDN + - TopicStub +translation_of: MDN/Contribute/Howto +--- +
{{MDNSidebar}}
{{IncludeSubnav("/es/docs/MDN")}}
+ +

Estos artículos proveen guías paso a paso para lograr metas específicas cuando se contribuye a MDN.

+ +

{{LandingPageListSubpages}}

diff --git a/files/es/mdn/contribute/howto/remover_macros_experimentales/index.html b/files/es/mdn/contribute/howto/remover_macros_experimentales/index.html new file mode 100644 index 0000000000..25ee6439cd --- /dev/null +++ b/files/es/mdn/contribute/howto/remover_macros_experimentales/index.html @@ -0,0 +1,48 @@ +--- +title: Cómo y cuándo eliminar macros "experimentales" +slug: MDN/Contribute/Howto/Remover_Macros_Experimentales +tags: + - Experimental + - Guía + - MDN Meta + - Macros +translation_of: MDN/Contribute/Howto/Remove_Experimental_Macros +--- +
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Las páginas en MDN pueden incluirmacrosKumaScriptpara notificar a los lectores que una característica es experimental y aún no está estandarizada. Sin embargo, algún elementos experimental pueden estandarizarse y sin embargo su página todavía no refleja este cambio. Puedes ayudar a mejorar MDN revisando las páginas que contienen estas macros "experimentales" y eliminando las macros de los elementos que ya no son experimentales.

+ +

Las macros en cuestión son {{TemplateLink("experimental_inline")}} para marcar un elemento mencionado en una página, y {{TemplateLink("SeeCompatTable")}} para marcar toda la página.

+ +
+

Advertencia: ya no recomendamos usarSeeCompatTable. Ahora se espera que todos los datos sobre compatibilidad se presenten dentro de la tabla de compatibilidad del navegador y cualquier nota al pie de página.

+
+ +

Aquí está la definición de experimental del artículo MDN Definitions and Conventions:

+ +

¿Dónde debe hacerse esta tarea?

+ +

Páginas en las siguientes listas:

+ +
+
+ +
+
¿Qué necesitas saber para hacer la tarea?
+
Conocimiento del estado de estandarización o implementación del elemento relevante.
+
¿Cuáles son los pasos para hacer la tarea?
+
+
    +
  1. Revise la página para ver con qué elemento o elementos está asociada la macro.
    2. +
  2. Determine si cada elemento sigue siendo experimental o no. La tabla de compatibilidad en la página puede ser más actual que las macros; También puede probar utilizando el elemento en varios navegadores.
    3. +
  3. Si un elemento ya no es experimental, elimine la llamada de macro "experimental" asociada a él. (Nota: un elemento en una página de resumen que tiene la macro {{TemplateLink ("experimental_inline")}} al lado suele ser un enlace a una página de referencia completa, que contiene la macro {{TemplateLink ("SeeCompatTable")}}.
    4. +
  4. Guarde la página con un comentario sobre lo que hizo.
    5. +
  5. Si ha eliminado todas las macros "experimentales" de una página (para las macros en línea, puede eliminar solo algunas de ellas), fuerce una actualización (Mayús + Actualizar) en la página de resultados de búsqueda relevante (vinculada anteriormente) para asegurarse de que la lista esté actualizado.
    6. +
+
+
diff --git a/files/es/mdn/contribute/howto/revision_editorial/index.html b/files/es/mdn/contribute/howto/revision_editorial/index.html new file mode 100644 index 0000000000..454da031a0 --- /dev/null +++ b/files/es/mdn/contribute/howto/revision_editorial/index.html @@ -0,0 +1,54 @@ +--- +title: Cómo hacer una revisión editorial +slug: MDN/Contribute/Howto/revision_editorial +tags: + - Cómo hacerlo + - Documentación + - Guía + - Revisiones +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
+ +

La revisión editorial consiste en reparar errores tipográficos y de ortografía, gramática, o errores de uso en un artículo. No todos los contribuyentes son expertos en escribir en español, pero gracias a su conocimiento han contribuído en los artículos en enorme cantidad, los cuales necesitan correcciones y revisiones. Esto se hace en la revisión editorial.

+ + + + + + + + + + + + + + + + + + + + +
¿Cuál es la tarea? Verificar y corregir la gramática, ortografía y contexto de los artículos.
¿Dónde hay que hacerla?Dentro de artículos específicos que están marcados como que requieren una revisión editorial.
¿Qué necesitas saber para hacer la tarea?Necesitas tener buen manejo de la gramática española y su ortografía.
¿Cuáles son los pasos para hacerlo? +
    +
  1. Elige un artículo: +
      +
    1. Ve a la lista de artículos que necesitan revisión editorial.  Esto lista todas las páginas para las que se solicitó una revisión editorial.
      2. +
    2. Elige una página que tenga un título en español y cuya ruta no empiece con Template:.
      3. +
    3. Haz click en el enlace del artículo para cargar la página.
      4. +
    +
    2. +
  2. Una vez cargada la página, haz click en el boton editar (EDIT) de la parte superior; esto te lleva al editor MDN. No dudes en cambiar a una página diferente si la primera que eliges no te conviene.
    3. +
  3. Corrige todos los errores tipográficos y ortográficos, gramática, o de uso que veas.
    4. +
  4. Ingresa un Comentario Revisión en la parte superior del artículo; algo como "Revisión editorial: errores de tipografía, gramática y ortografía reparados."
    5. +
  5. Haz click en el boton GUARDAR LOS CAMBIOS (SAVE CHANGES).
    6. +
  6. Una vez que el artículo corregido aparezca en la pantalla después de haberse cerrado el editor, marca la entrada Editorial al costado debajo de Se han solicitado las siguientes revisiones (The following reviews have been requested) y haz click en ENVIAR REVISION (SUBMIT REVIEW).
    7. +
  7. +

    ¡Listo!

    +
    8. +
+
+ +

 

diff --git a/files/es/mdn/contribute/howto/revision_tecnica/index.html b/files/es/mdn/contribute/howto/revision_tecnica/index.html new file mode 100644 index 0000000000..e1fc2d5d5a --- /dev/null +++ b/files/es/mdn/contribute/howto/revision_tecnica/index.html @@ -0,0 +1,44 @@ +--- +title: Cómo hacer una revisión técnica +slug: MDN/Contribute/Howto/revision_tecnica +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}

La revisión técnica consiste en revisar la precisión técnica y lo completo que se encuentra un artículo, y corregirlo si es necesario. Si un escritor de un artículo quiere que alguien más chequee su contenido técnico, debe marcar la casilla "Revisión Técnica" (Technical review) al editarlo. A menudo el escritor contacta a un ingeniero específico para desempeñar la revisión técnica, pero cualquiera con habilidad técnica en el tema puede hacerla.

+ +

Este artículo describe cómo hacer para ejecutar una revisión técnica, ayudando así a asegurar que el contenido de MDN es preciso.

+ + + + + + + + + + + + + + + + +
¿Dónde hay que hacerla?En artículos específicos marcados requiriendo revisión técnica.
¿Qué necesitas saber para hacer la tarea? +
    +
  • Conocimiento experto del tema del artículo que estás revisando.
    • +
  • Habilidad para editar un artículo wiki en MDN.
    • +
+
¿Cuáles son los pasos para hacerlo? +
    +
  1. Vé a la lista de páginas que necesitan revisiones técnicas. Ésta lista todas las páginas para las cuales se solicitó revisión técnica.
    2. +
  2. Elige una página con cuyo tema estés muy familiarizado.
    3. +
  3. Haz click en el enlace del artículo para cargar la página.
    4. +
  4. Una vez cargada la página, haz click en el botón  EDITAR (EDIT) de la parte superior; esto te lleva al editor MDN. No dudes en cambiar a una página diferente si la primera que eliges no te conviene.
    5. +
  5. Mientras lees el artículo, corrige cualquier información técnica que no esté correcta y agrega cualquier información importante que falte.
    6. +
  6. Ingresa un comentario al pie del artículo que describa lo que hiciste, como "Revisión técnica completa". Si corregiste la información, incluye eso en tu comentario, por ejemplo "Revisión Técnica: descripciones de parámetros arregladas".
    7. +
  7. Haz click en el botón GUARDAR LOS CAMBIOS (SAVE CHANGES).
    8. +
  8. Una vez que corregiste el artículo aparece en la pantalla después que el editor se haya cerrado, chequea la entrada Técnica al costado, debajo de Las siguientes revisiones han sido solicitadas (The following reviews have been requested) y haz click en ENVIAR REVISIÓN (SUBMIT REVIEW).
    9. +
  9. Y listo!
    10. +
+
+ +

 

diff --git a/files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..26f62b04a2 --- /dev/null +++ b/files/es/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,118 @@ +--- +title: Cómo colocar el resumen de una página +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +tags: + - Documentación + - Resumen + - SEO + - Summary + - primeros pasos +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}
+ +
+
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +
+

En este artículo te mostraremos cómo configurar el resumen SEO (también conocido como la descripción o simplemente como el resumen) de un artículo en el sitio de MDN Web Docs. El resumen se usa de varias maneras:

+ +
    +
  • Lo utilizan Google y otros motores de búsqueda para ayudar a catalogar e indexar páginas.
    • +
  • Los motores de búsqueda muestran el resumen en las páginas de resultados de búsqueda para ayudar a los lectores a elegir la página que mejor se adapte a sus necesidades.
    • +
  • Los menús de MDN a menudo muestran el resumen debajo del título del artículo para ayudar a los usuarios a encontrar la información que buscan.
    • +
  • Los enlaces en MDN tienen información sobre las herramientas del resumen, para proporcionar una visión rápida a los usuarios sin tener que hacer clic en el artículo en sí.
    • +
+ +

Por lo tanto, el resumen debe ser un texto que tenga sentido tanto en el contexto del artículo como cuando se presenta solo en otros contextos. Se debe tener en cuenta la guía de estilo de escritura MDN al escribir el texto de resumen.

+
+
+ +

El resumen predeterminado

+ +

Las páginas para las que no se ha establecido un resumen toman como resumen el texto completo del primer bloque de {{Glossary("HTML")}} que parezca tener contenido de texto en lugar de un título. Sin embargo, este texto puede no se el mejor para usar por varias razones:

+ + + +

Por esto es mejor establecer explícitamente el resumen de la página, para ayudar a garantizar que el resumen sea lo más útil posible.

+ +

Estableciendo el resumen

+ +

Veamos cómo configurar el resumen de una página.

+ +

¿Cuál es la tarea?

+ +

Marcar el texto dentro de una página que debe usarse como resumen en otros contextos; Si el texto apropiado no está disponible, esta tarea puede incluir escribir una pequeña cantidad de texto apropiado.

+ +

¿Dónde necesita ser hecho?

+ +

En las páginas que carecen de un resumen, las que tengan un resumen que no sea útil, o que tengan un resumen que no cumpla innecesariamente con las pautas recomendadas.

+ +

¿Qué necesitas saber para hacer la tarea?

+ +

Necesitas saber usar el editor MDN. También necesitas buenas habilidades de escritura y familiaridad con el tema de la página a resumir.

+ +

¿Cuáles son los pasos para hacerlo?

+ +
    +
  1. Elige una página a la que quieras colocarle un resumen: +
      +
    1. En la página de estado de la documentación MDN, haz clic en el enlace debajo de  Secciones (Sections) para un tema en el que tengas conocimientos (por ejemplo, HTML).
      +
      2. +
    2. En la página de estado de la documentación del tema, haz clic en la cabecera Páginas (Pages) de la tabla Resumen (Summary). Esto te va a llevar a un índice de todas las páginas en esa sección del tema. Muestra los enlaces de la página en la columna izquierda y las etiquetas y resúmenes en la columna derecha.
      +
      3. +
    3. Elige una página en la que falte el resumen o que tenga uno pobre.
      +
      4. +
    4. Haz clic en el enlace para ir a esa página.
      5. +
    +
    2. +
  2. Haz clic en Editar (Edit) para abrir la página en el editor MDN.
    3. +
  3. Busca una oración o dos que anden como resumen fuera del contexto. Si fuera necesario, edita el contenido existente para crear o modificar las oraciones y así obtener un buen resumen.
    4. +
  4. Selecciona el texto a usar como resumen.
    5. +
  5. En el widget Estilos (Styles) de la barra de herramientas del editor selecciona Resumen SEO (SEO Summary). (En el código fuente de la página, esto crea un elemento  {{HTMLElement("span")}} con class="seoSummary" encerrando el texto seleccionado).
    +
    6. +
  6. Guarda tus cambios con un comentario de revisión como "Coloqué el resumen a la página".
    7. +
+ +

Elaboración de un buen resumen

+ +

El resumen se utiliza en diversos escenarios entre los que se pueden incluir:

+ + + +

Es importante tener presentes estos escenarios mientras se crea un resumen. Para garantizar que el resumen funcione bien en todas estas situaciones, esfuérzate por ceñirte a las pautas que se indican a continuación.

+ +
+

Nota: a menos que se indique específicamente lo contrario, estas son orientaciones, no reglas rígidas y rápidas. Aunque debes esforzarte por cumplir estas directrices, en ocasiones se presentan excepciones que no se pueden evitar.

+
+ + + +

Piensa en el resumen como si fuera una especie de {{interwiki("wikipedia", "blurb")}} en el interior de la cubierta o la contracubierta de un libro. Este texto corto tiene que captar la atención del lector rápidamente y animarle a seguir leyendo.

+ +

Puede ser un poco complicado redactar un resumen que funcione bien tanto para las páginas de resultados de los motores de búsqueda como dentro del propio texto del artículo, pero en el momento MDN no ofrece una forma de crear un resumen SEO separado del contenido de la página, de modo que haz tu mejor esfuerzo.

+ +

Ver también

+ + diff --git a/files/es/mdn/contribute/howto/tag/index.html b/files/es/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..d477bae0fc --- /dev/null +++ b/files/es/mdn/contribute/howto/tag/index.html @@ -0,0 +1,385 @@ +--- +title: Cómo etiquetar correctamente las páginas +slug: MDN/Contribute/Howto/Tag +tags: + - Colaborar + - Etiquetas + - Guia(2) + - Guía + - MDN + - Principiante +translation_of: MDN/Contribute/Howto/Tag +--- +
{{MDNSidebar}}

"Article tags" Las etiquetas del artículo son una forma importante para poner a los visitantes en contacto con contenido útil. Cada página normalmente debería contener varias etiquetas para ayudar a mantener organizado el contenido. En esta página se explica la mejor manera de marcar las páginas para que así  nuestros lectores puedan encontrar la información y podamos mantenernos organizados.

+ +

Si necesita ayuda con la interfaz de usuario de edición de etiquetas, consulte la sección de etiquetado tagging section en nuestra guía del editor.

+ +

Por favor utilice las etiquetas como se explica a continuación. Si no, nuestras herramientas automatizadas no generarán correctamente las listas de contenido, las páginas de destino y el entrecruzamiento de artículos.

+ +

Cómo usa MDN las etiquetas (tags)

+ +

Hay varias maneras de usar las etiquetas en MDN:

+ +
+
"Document categorization" Categorización de documentos
+
¿Qué clase de documento es? ¿Es una referencia? ¿Un tutorial? ¿Una página de inicio?  Nuestros visitantes pueden usar estas etiquetas para filtrar búsquedas, ¡así que son realmente importantes!
+
"Topic identification" Identificación del tema
+
¿Qué tema cubre el artículo? ¿Trata sobre una API? ¿El DOM? ¿Gráficos? Estas también son importantes porque se pueden usar en filtros de búsquedas.
+
"Technology status" Estado de la tecnología
+
¿Cuál es el estado de la tecnología? ¿No es estándar? ¿Obsoleto o en desuso? ¿Experimental?
+
"Skill level" Nivel de habilidad
+
Para tutoriales y guías, ¿cómo es de avanzado el material cubierto por el artículo?
+
"Document metadata" Documento de recursos
+
La comunidad de escritores utiliza las etiquetas para hacer un seguimiento de qué páginas necesitan qué tipo de trabajo.
+
+ +

Tipos de etiquetas

+ +

Guía rápida de tipos de etiquetas y sus posibles valores.

+ +

Categoría de documento

+ +

Cuando se etiqueta un artículo con una de estas categorías, estas ayudando a las herramientas automáticas a generar con mayor precisión las páginas de destino, tablas de contenido, etc. Estos términos también serán usados por nuestro nuevo motor de búsqueda,  para que nuestros visitantes puedan localizar a su antojo referencias o información de la guía.

+ +

Utilizamos los siguientes nombres de categoría como etiquetas de marcado estándar:

+ +
+
{{Tag("Introducción")}}
+
El artículo proporciona material introductorio sobre un tema. Lo ideal sería tener solo una etiqueta "Introducción" por tema tecnológico tratado.
+
{{Tag("Destacado")}}
+
El artículo es crítico y se mostrará de forma destacada en las páginas de inicio. Esta etiqueta se usara con moderación (nunca más de tres documentos por tema).
+
{{Tag("Referencia")}}
+
El artículo contiene material de referencia de una API, elemento, atributo, propiedad o similares.
+
{{Tag("Inicio")}}
+
Es una página de inicio.
+
{{Tag("Guía")}}
+
El artículo es una página de cómo hacerlo o guía.
+
{{Tag("Ejemplo")}}
+
El artículo es una página de ejemplo de código o contiene ejemplos de código (es decir, fragmentos reales de código útil y no de una sola línea "ejemplos de sintaxis").
+
+ +

Temas

+ +

Mediante la identificación del área temática del artículo, estás ayudando a generar mejores resultados de búsqueda, páginas de inicio y navegación.

+ +

Si bien hay cierta flexibilidad para identificar los nuevos temas, tratamos de limitarlos a los nombres de APIs o tecnologías. Algunos ejemplos:

+ + + +

En general, la etiqueta de identificación del tema será el nombre de la interfaz con que este relacionada la página (como nodo "Node", que tiene muchas páginas para sus diversas propiedades y métodos), o el nombre general de un tipo de tecnología. Puede etiquetar una página sobre WebGL con Graphics y WebGL ó una página sobre {{HTMLElement("canvas")}} con HTML, Element, Canvas y Graphics.

+ +

Estado tecnológico

+ +

Para ayudar al visitante a comprender el estado actual de una tecnología, usamos estas etiquetas en las páginas para describir la situación de las especificaciones de cada tecnología. Esta descripción no es suficientemente detallada como para explicar los aspectos y avances de las especificaciones (para ello existe la Tabla de Especificaciones), pero ayuda al lector a juzgar si es una buena idea usar la tecnología descrita en el artículo.

+ +

Aquí tienen los posibles valores de esta etiqueta:

+ +
+
{{Tag("Not-standard")}}
+
Indica que la tecnología o API descrita en la página no forma parte de un estándar, pero se considera estable en cualquier aplicación de navegador. Si no utiliza esta etiqueta, sus lectores asumirán que la tecnología es estándar. La tabla de compatibilidad en la página debe aclarar qué navegador o navegadores soportan esta tecnología o API.
+
<{{Tag("Deprecated")}}
+
La tecnología o API cubierta en la página se marca como en desuso en las especificaciones y es probable que con el tiempo sea eliminada de navegadores actuales.
+
+ +
+
{{Tag("Obsolete")}}
+
 La tecnología o API ha sido considerada obsoleta y ha sido eliminada (o actualmente se está retirando) de la totalidad de los navegadores actuales.
+
{{Tag ("Experimental")}}
+
La tecnología no es estandar y es una tecnología o API experimental que pueden o no llegar a ser parte de un estandar. También está sujeta a cambios en el motor del navegador (normalmente sólo uno) que lo implementa.
+
{{Tag("Necesita Privilegios")}}
+
La API requiere acceso privilegiado al dispositivo en el que se ejecuta el código.
+
+ +
+
{{Tag("Solo Certificado")}}
+
La API sólo funciona con código certificado.
+
+ +

¡Estas etiquetas no excluyen el uso de la tabla de compatibilidad en su artículo!

+ +

Nivel de habilidad

+ +
+
Utilice este tipo de etiquetas solo para guías y tutoriales (es decir, para páginas que ya esten etiquetadas como Guía)  para ayudar a los usuarios a elegir los tutoriales en base a su nivel. Hay tres valores posibles:
+
{{Tag ("Principiante")}}
+
Los artículos diseñados para introducir al lector en una tecnología que nunca han usado o sólo tienen una vaga familiaridad.
+
{{Tag ("Intermedio")}}
+
Artículos para los usuarios que ya saben trabajar con la tecnología, pero no son expertos.
+
{{Tag ("Advanced")}}
+
Artículos sobre como ampliar las capacidades de una tecnología y del lector.
+
+ +

Metadatos

+ +
+
La comunidad de escritores utiliza estas etiquetas para designar los artículos que requieran algun tipo trabajo específico. He aquí una lista de los que más utilizamos:
+
{{Tag ("basura")}}
+
El artículo debe ser eliminado.
+
{{Tag ("NecesitaContenido")}}
+
El artículo es un esbozo o carece de información. Esta etiqueta significa que alguien debe revisar el contenido, añadir más detalles y/o terminar de escribir el artículo.
+
{{Tag ("NecesitaEjemplos")}}
+
El artículo necesita uno o más ejemplos para ayudar a demostrar la finalidad el artículo. Estos ejemplos deben utilizar el sistema live sample system.
+
{{Tag ("NecesitaEjemplosReales")}}
+
El artículo tiene uno o más ejemplos que necesitan ser actualizados para usar el sistema live sample system.
+
{{Tag ("NecesitaActualizacion")}}
+
El contenido no está actualizado y necesita una actualización.
+
{{Tag ("excluir")}}
+
El contenido no necesita ser localizado y no aparecerá en las páginas de estados de localización.
+
{{Tag ("prioridad")}}
+
El contenido es importante y debe ser marcado como prioritario para traductores de MDN.
+
+ +

Mapa de Alfabetización Web

+ +

El proyecto WebMaker, a través de Web Literacy Map ha definido las habilidades necesarias para leer, escribir y participar en la Web de forma óptima. Utilizaremos etiquetas de "Web Literacy Map" en MDN para ayudar a nuestros usuarios a encontrar los recursos que mejor se adapten a sus necesidades:

+ +
+
{{Tag ("Navegacion")}}
+
Cómo navegar por la Web
+
{{Tag ("WebMecanicas")}}
+
Cómo está organizada y cómo funciona la web
+
{{Tag ("Buscar")}}
+
Cómo encontrar información, personas y recursos en la Web
+
{{Tag ("Credibilidad")}}
+
Cómo evaluar críticamente la información que encuentre en la Web
+
{{Tag ("Seguridad")}}
+
Cómo mantener sistemas, identidades y seguridad de los contenidos
+
{{Tag ("Composición")}}
+
Cómo crear y organizar contenido para la Web
+
{{Tag ("remezcla")}}
+
Cómo modificar recursos Web existentes para crear algo nuevo
+
{{Tag ("Diseno")}}
+
Cómo mejorar la estética visual y la experiencia del usuario
+
{{Tag ("Accesibilidad")}}
+
Cómo comunicarse de una manera universalmente reconocible a través de los recursos de la Web
+
{{Tag ("CodigoScript")}}
+
Cómo codificar y / o crear experiencias interactivas en la Web
+
{{Tag ("infraestructura")}}
+
Cómo funcionan los detalles técnicos de la Internet
+
{{Tag ("Compartir")}}
+
Cómo crear recursos con otras personas
+
{{Tag ("Colaborar")}}
+
Cómo trabajar con otras personas
+
{{Tag ("Comunidad")}}
+
Cómo participar en las comunidades Web y entender cómo funcionan
+
{{Tag ("Privacidad")}}
+
Cómo examinar las consecuencias de compartir datos en línea
+
{{Tag ("Abriendo")}}
+
Cómo ayudar a mantener la Web accesible a todo el mundo
+
+ +

Resumen

+ +

Para cada página debes asignar distintos tipos de etiquetas, por ejemplo:

+ +

Un tutorial sobre WebGL para principiantes: WebGL, Gráficos, Guía, Principiante

+ +

Página de referencia para {{HTMLElement ("Canvas")}}:  Canvas, HTML, elemento, gráficos

+ +

Una página de inicio de herramientas para desarrolladores de Firefox OS: Herramientas, Firefox OS, Inicio

+ +

Filtros de etiquetas y búsqueda

+ +

Los filtros de búsqueda no funcionarán adecuadamente a menos que etiquetamos correctamente las páginas MDN. A continuación hay una tabla de filtros de búsqueda y las etiquetas de búsqueda que funcionan para dichos filtros.

+ +
+

Nota: Si varias etiquetas se muestran bajo "Nombre de etiqueta", significa que una o más de las etiquetas deben estar presentes en el artículo.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
GrupoNombre filtroNombre de etiqueta
TemaOpen Web Apps{{Tag("Apps")}}
 HTML{{Tag("HTML")}}
 CSS{{Tag("CSS")}}
 JavaScript{{Tag("JavaScript")}}
 APIs and DOM{{Tag("API")}}
 Canvas{{Tag("Canvas")}}
 SVG{{Tag("SVG")}}
 MathML{{Tag("MathML")}}
 WebGL{{Tag("WebGL")}}
 XUL{{Tag("XUL")}}
 Marketplace{{Tag("Marketplace")}}
 Firefox{{Tag("Firefox")}}
 Firefox para Android{{Tag("Firefox Mobile")}}
 Firefox para Desktop{{Tag("Firefox Desktop")}}
 Firefox OS{{Tag("Firefox OS")}}
 Movil{{Tag("Movil")}}
 Web Development{{Tag("Web Development")}}
 Add-ons & Extensions{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}
 Juegos{{Tag("Juegos")}}
NivelSoy experto{{Tag("Experto")}}
 Intermedio{{Tag("Intermedio")}}
 Soy aprendiz{{Tag("Aprendiz")}}
Tipo DocumentoDocsRestringirá la búsqueda al contenido de los docs, dejando fuera otros contenidos MDN.
 DemostraciónIncluirá el contenido de demostración en los resultados de búsqueda.
 Herramientas{{Tag("Herramientas")}}
 Ejemplo Código{{Tag("Ejemplo")}}
 Como & Tutorial{{Tag("Guia")}}
 Perfiles DesarrolladorIncluirá perfiles de desarrolladores de MDN en los resultados de búsqueda.
 Recurso externoEs algo que el equipo de desarrollo todavía está descifrando...
+ +

Problemas de etiquetado que puedes solucionar

+ +

Hay varios tipos de problemas de etiquetado que puedes ayudar a solucionar:

+ +
+
Sin etiquetas
+
Generalmente los artículos deben tener por lo menos una etiqueta "categoría" y una etiqueta de "tema". Si puedes ayudar a asegurar que el mínino de etiquetas estén presentes, ¡te convertirás en nuestro héroe de documentación!
+
Etiquetas que no siguen nuestras normas de etiquetado
+
Por favor, corrija los documentos en los que las etiquetas no siguen las normas de esta página.
+
Etiquetas incorrectos
+
Si está buscando en un artículo acerca de "HTML" y esta etiquetado como "JavaScript", eso probablemente es incorrecto! Del mismo modo, si un artículo de discusión interna de Mozilla tiene una etiqueta "Web", probablemente sea incorrecto también. Remueva las etiquetas y añada las etiquetas correctas si aun no están. Por favor, corrija también los errores ortográficos (por ejemplo, "Javascript" coincide ya que las etiquetas no son sensibles a las mayúsculas, ¡pero no nos descuidemos!).
+
Etiquetas que faltan
+
Si un artículo tiene algunas pero no todas las etiquetas que necesita, no dude en añadir más. Por ejemplo, si una página en referencia a JavaScript está (correctamente) etiquetado como "JavaScript" pero nada más, ¡estás invitado a etiquetar la página como "Referencia"!
+
Etiqueta Spam
+
+

Es el mayor problema de etiquetado de la Web, la publicidad no deseada. ¡Tenemos que eliminar estas etiquetas de inmediato!, son desagradables y difíciles de manejar si permanecen mucho tiempo en la web. Además, son terribles para {{Glossary("SEO")}}.

+
+
+ +

Si ve uno (o más) de estos problemas, por favor acceda a MDN "log into MDN" y haz clic en Editar en la parte superior derecha de la ventana de MDN. Una vez que cargue el editor, desplácese hasta la parte inferior de la página, donde puedes encontrar el cuadro de etiquetas. Para más detalles sobre la interfaz de etiquetado, consulte el cuadro de etiquetas "The tags box" en la guía del editor de MDN.

diff --git "a/files/es/mdn/contribute/howto/usar_barras_laterales_de_navegaci\303\263n/index.html" "b/files/es/mdn/contribute/howto/usar_barras_laterales_de_navegaci\303\263n/index.html" new file mode 100644 index 0000000000..4ba8e4e4e4 --- /dev/null +++ "b/files/es/mdn/contribute/howto/usar_barras_laterales_de_navegaci\303\263n/index.html" @@ -0,0 +1,78 @@ +--- +title: Cómo usar las barras laterales de navegación +slug: MDN/Contribute/Howto/Usar_barras_laterales_de_navegación +translation_of: MDN/Contribute/Howto/Use_navigation_sidebars +--- +

{{MDNSidebar}}{{Draft}}

+ +

La navegación en MDN se realiza frecuentemente usando barras laterales que listan otros artículos en una serie así como contenido relacionado tanto en la misma suite de documentación como en otras áreas de MDN. Las barras laterales de MDN no se crean automáticamente; para incluirlas en la página, es necesario crear y utilizar una macro de algún tipo. En este artículo, revisaremos el proceso de creación de las macros de MDN en la barra lateral y cómo utilizarlas en un artículo.

+ +

Macros actuales de las barras laterales de MDN

+ +

MDN ya tiene varias macros para crear barras laterales. La mayoría son específicas para secciones particulares de MDN, mientras que otras tienen la intención de crear barras laterales genéricas para áreas de documentación que de otra manera no tendrían ninguna.

+ +
+
{{TemplateLink("AddonSidebar")}}
+
Inserts a sidebar for navigating the add-ons documentation; this is primarily content about creating browser extensions.
+
{{TemplateLink("APIRef")}}
+
Inserts a sidebar used within API interface reference pages and subpages.
+
{{TemplateLink("CanvasSidebar")}}
+
Inserts a sidebar used within the HTML/DOM Canvas documentation.
+
{{TemplateLink("DefaultAPISidebar")}}
+
Inserts a default sidebar that can be used on the API overview page of an API that doesn't have its own sidebar type.
+
{{TemplateLink("FirefoxSidebar")}}
+
Inserts a sidebar used on the documentation that's specific to Firefox.
+
{{TemplateLink("GamesSidebar")}}
+
Inserts a sidebar for navigating MDN's content about developing games using web technologies.
+
{{TemplateLink("HTMLSidebar")}}
+
Inserts the sidebar used within MDN's HTML documentation.
+
{{TemplateLink("HTTPSidebar")}}
+
Inserts a sidebar for use on pages within MDN's HTTP documentation.
+
{{TemplateLink("JSSidebar")}}
+
Inserts a sidebar for use within the JavaScript documentation.
+
{{TemplateLink("LearnSidebar")}}
+
Inserts the Learning Area sidebar.
+
{{TemplateLink("MDNSidebar")}}
+
Inserts a sidebar for navigating MDN's "meta-documentation;" that is, documentation about using and editing the MDN Web Docs site itself. You can actually see that macro in use on this page.
+
{{TemplateLink("ServiceWorkerSidebar")}}
+
Inserts a sidebar for use within documentation about Service Workers.
+
{{TemplateLink("SpiderMonkeySidebar")}}
+
Inserts a sidebar for use on pages documenting SpiderMonkey, Mozilla's JavaScript engine.
+
{{TemplateLink("ToolsSidebar")}}
+
Inserts a sidebar listing pages about Firefox developer tools.
+
{{TemplateLink("WebAssemblySidebar")}}
+
Inserts a sidebar containing links related to WebAssembly.
+
{{TemplateLink("WebExtAPISidebar")}}
+
Inserts a sidebar used to navigate the API reference documentation about browser e3dtensions (WebExtensions).
+
{{TemplateLink("WebGLSidebar")}}
+
Inserts a sidebar that provides navigation of WebGL-related content.
+
{{TemplateLink("WebRTCSidebar")}}
+
Inserts a sidebar whose contents provide navigation of WebRTC documentation on MDN.
+
{{TemplateLink("XSLTRef")}}
+
Inserts a sidebar with documentation for XSLT, EXSLT and XPath.
+
+ +

Using sidebars

+ +

To add a sidebar to a page, find the right macro, then, on the page on to which you want to insert the sidebar, click the "Edit" button. Add to the page a {{HTMLElement("p")}} block whose contents are simply the call to the macro. Once there, you can add the macro call. Typically, sidebar macros don't require any parameters, so you can just do, for example:

+ +
<p>\{{MDNSidebar}}</p>
+ +

Usually, you should do this as the first line of the document. In some documents, it's been done at the bottom instead. This works fine, but for the sake of consistency, try to place it at the top.

+ +

If there's already a {{HTMLElement("p")}} block with macro calls at the top of the page, such as those that create banners like \{{Non-standard_Header}}, you can put the sidebar macro inside the same {{HTMLElement("p")}}, like this:

+ +
<p>\{{HTTPSidebar}}\{{Non-standard_Header}}</p>
+ +

Creating sidebars

+ +

details coming

+ +

Talk about {{TemplateLink("SidebarUtilities")}}.

+ +

There are some macros that can be used to help build sidebars:

+ +
+
{{TemplateLink("ListSubpagesForSidebar")}}
+
Creates a tree of links structured for use in a sidebar, using the subpages of the specified page.
+
diff --git a/files/es/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html b/files/es/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html new file mode 100644 index 0000000000..a2ae723fb2 --- /dev/null +++ b/files/es/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.html @@ -0,0 +1,72 @@ +--- +title: Cómo escribir una nueva entrada en el Glosario +slug: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary +tags: + - Glosario + - Guía + - Howto + - MDN Meta +translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary +--- +
{{MDNSidebar}}
+ +

El glosario MDN es el sitio donde definimos toda la terminología, jerga, y abreviaciones usadas en la documentación y en la codificación. Contribuir al glosario es una manera simple de hacer la Web más fácil para que todo el mundo la entienda. No necesitas un nivel alto de conocimientos técnicos para escribir entradas en el glosario, porque éstas deberían ser simples y sencillas.

+ +

Este artículo describe como escribir una buena entrada al glosario acerca de un tema para el sitio web de MDN docs.

+ +

Comó escribir una entrada

+ +

Si estás buscando temas que necesitan una entrada al glosario, revisa la lista de temas indocumentados en el final de la página principal del Glosario; sigue cualquiera de esos enlaces para empezar una nueva página al Glosario para el item que has seguido;después digue los pasos más abajo.

+ +

Si tienes una idea para una nueva entrada al glosario, simplemente abre el siguiente botón en una nueva pestaña y sigue las instrucciones siguientes al botón:

+ +

Escribir una nueva entrada en el Glosario

+ +

Paso 1: Escribir un resumen

+ +

El primer párrafo de cualquiera de las páginas del glosario es una descripción simple y corta del término, preferentemente de no más de una o dos oraciones. Asegúrate de que cualquiera que esté leyendo el glosario debe de poder entender la definición del término inmediatamente.

+ +
+

Nota: Por favor no copies y pegues definiciones de cualquier otro sitio (especialmente no de la Wikipedia, ya que su rango de licencias es más pequeño, y lo hace incompatible con MDN). Es realmente importante que el contenido sea simple y fácil de entender. Merece la pena dedicarle algo de tiempo en lugar de robar contenido a ciegas. Este glosario debería ser contenido nuevo útil, no cosas repetidas de cualquier otro sitio.

+
+ +

Los enlaces a la entrada del glosario usarán esos resúmenes en sus tooltips, de tal forma que los lectores puedan ver las definiciones sin navegar fuera de la página donde se encuentran. (Ver más abajo como insertar enlaces a entradas del glosario con la macro \{{Glossary}} .)

+ +

Si debes, tu puedes añadir algún párrafo extra, pero es muy fácil verte escribiendo un artículo entero. Escribir un artículo completo está bien, pero por favor no lo pongas en el glosario. Si no estás seguro de dónde poner tu artículo, sienteté libre de discutirlo.

+ +

Paso 2: Extenderse con los enlaces

+ +

Finalmente, una entrada al glosario debería terminar siempre con una sección "Aprender más" . Esta sección debería contener enlaces para ayudar al lector a prograsar: descubrir nuevos detalles, aprender a usar la tecnología relevante, etc.

+ +

Recomendamos que ordenes los enlaces al menos en estos tres grupos:

+ +

 

+ +

Esta sección es donde se puede escribir una descripción más detallada. En esta sección no hay que dudar en explicar todos los detalles necesarios, proveer algún contexto o detalles históricos interesantes, etc. Depende de usted. Lo que hay que recordar es que debe de enfocarse en conocimiento general en lugar de en detalles técnicos. Si desea escribir en detalles técnicos, es mejor escribir un artículo regular en MDN. La intención del glosario es proveer información a la audiencia general, así que un principiante debe de poder comprender esta sección.

+ +

As an example, take a look at the "{{Glossary("JavaScript")}}" term definition.

+ + + +

Finally, a glossary entry should always end with a "Know more" section. This section should contain links to help the reader move forward: discovering more details, learning to use the relevant technology, and so on.

+ +

We recommend that you categorize the links in at least these three categories:

+ +
+
General knowledge
+
Links that provide more general information; for example, a link to Wikipedia is a good starting point.
+
Technical reference
+
Links to more in-depth technical information. These links can be to pages on MDN or elsewhere on the Internet.
+
Learn about it
+
Links to tutorials, exercises, or any other teaching materials that can directly help the reader learn to use the technology behind the term being defined.
+
+ +

Suggested terms

+ +

Do you want to contribute but you don't know which terms need to be defined? Here's a list of suggestions. Click one and get started!

+ +

{{GlossaryList({"terms":["ARIA","Array","ATAG","Asynchronous","BiDi","Blink","Block","CalDAV","Call stack","CardDAV","Constant","Constructor","Content type","Closure","CORS","CSRF","Control flow","Character","Crawler","DNS","Doctype","Domain","DTD","Dynamic typing","ECMA","Element","Entity","Exception","Adobe Flash","FTP","Host","HTTP","Hyperlink","Hypertext","I18N","Identifier","IDL","MS Internet Explorer","IETF","IIFE","Immutable","Internationalization","IndexedDB","Instance","Internet","IP address","IPv4","Keyword","Locale","Localization","ltr","MathML","Method","Microsoft Internet Explorer","MIME type","Mobile First","Mozilla Firefox","Netscape Navigator","NAT","Native","Null","OOP","Opera Browser","Operand","Operator","Parameter","Parser","PDF","Presto","property","Protocol","Prototype","Pseudo-class","Pseudo-element","RDF","Recursion","Reflow","Regular expression","Rendering engine","Responsive design","REST","rtl","Scope","CSS Selector","Server","SSL","Stacking context","State machine","Statement","STUN","Synchronous","Tag","TLS","Trident","TURN","Type","Value","Variable","Wrapper"], "filter":"notdefined", "css":"multiColumnList"})}}

+ +

 

+ +

 

diff --git a/files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html new file mode 100644 index 0000000000..05d72dd7f7 --- /dev/null +++ b/files/es/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -0,0 +1,106 @@ +--- +title: Cómo escribir un artículo para ayudar a las personas a aprender sobre la Web. +slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +tags: + - Aprender + - Como + - Guía + - MDN Meta +translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +--- +
{{MDNSidebar}}
+ +

El área de aprendizaje de MDN es nuestro hogar para artículos que presentan conceptos web a nuevos desarrolladores. Debido a que su contenido está dirigido principalmente a principiantes, es un gran lugar para compartir tus conocimientos y ayudar a los recién llegados a conocer la web. Es importante asegurarse de que los nuevos desarrolladores puedan seguir este contenido, por lo que le prestamos especial atención.

+ +

Este artículo explica cómo escribir páginas para el Área de aprendizaje.

+ +

Cómo escribir un artículo en el Área de aprendizaje

+ +

Para comenzar a aportar tu conocimiento, simplemente haz clic en el botón verde grande, luego sigue los cinco pasos a continuación. Si estás buscando ideas, echa un vistazo al tablero de Trello de nuestro equipo.

+ +
Escribe un nuevo artículo
+ +

Este artículo podría no terminar exactamente en el lugar correcto, pero al menos está en MDN. Si necesitas hablar con alguien para que lo trasladen al lugar correcto, por favor contáctanos.

+ +

Paso 1: Escribe en dos líneas

+ +

La primera oración de tu artículo debe resumir qué tema vas a cubrir y la segunda debe entrar en algunos detalles más sobre los elementos que pondrías en el artículo. Por ejemplo:

+ +
+

Mientras {{glossary("HTML")}} los archivos contienen contenido estructurado, {{Glossary("CSS")}}, otra tecnología web, hace que el contenido se vea como tú quieres. En este artículo vamos a cubrir cómo funciona esta tecnología y cómo escribir tu propio ejemplo básico.

+
+ +

Observa cómo el ejemplo explica brevemente que CSS es una tecnología web central que se usa para diseñar páginas. Eso es suficiente para que el lector tenga una idea bastante buena de lo que cubre el artículo.

+ +

Debido a que los artículos del Área de aprendizaje se dirigen principalmente a los principiantes, cada artículo debe cubrir un tema directo para no abrumar al lector con demasiada información nueva. Si no puedes resumir el artículo en una oración, ¡podrías estar intentando hacer demasiado en un artículo!

+ +

Paso 2: Agregar un cuadro superior

+ +

Luego, agrega un cuadro superior para ayudar a los lectores a orientarse sobre dónde se encuentran en el proceso de aprendizaje. Aquí hay un ejemplo de un cuadro superior de "Entendiendo las URLs y su estructura". Puedes usar este artículo como modelo cuando escribas tu propio artículo.

+ + + + + + + + + + + + +
Requisitos previos:Primero necesitas saber cómo funciona Internet, qué es un servidor web  y los conceptos detras de los enlaces de la web.
Objetivo:Aprenderás qué es una URL y cómo funciona en la web.
+ +
+
Requisitos previos
+
¿Qué debe saber ya el lector para seguir el artículo? Cuando sea posible, haz de cada requisito previo un enlace a otro artículo del Área de aprendizaje que cubra el concepto (a menos que sea un artículo realmente básico que no requiere conocimiento previo).
+
Objetivos
+
Esta sección explica brevemente lo que el lector aprenderá a lo largo del artículo. Esto es un poco diferente al de una sola línea; (el one-liner resume el tema del artículo), mientras que la sección de objetivos establece específicamente lo que el lector puede esperar lograr en el transcurso del artículo.
+
+ +
+

Nota: Para crear esta tabla, puedes copiar y pegar la tabla del ejemplo anterior o usar la herramienta de tabla del editor de MDN. Si eliges usar la herramienta de tabla, tienes que agregar específicamente la clase CSS learn-box además de la clase predeterminada standard-table.Para hacer esto, cuando crees o edites las propiedades de la tabla, ve al panel "Avanzado" y configura el campo Stylesheet Classes a "standard-table learn-box".

+
+ +

Paso 3: Escribir una descripción completa

+ +

A continuación, escribe una descripción más larga que ofrezca una visión más completa del artículo, destacando los conceptos más importantes. ¡No olvides explicar por qué el lector debe tomarse el tiempo para aprender este tema y leer tu artículo!

+ +

Paso 4: Cavar más profundo

+ +

Cuando hayas terminado con todo eso, finalmente puedes sumergirte profundamente en el tema. Puedes estructurar esta parte de tu artículo como desees (aunque no dudes en consultar nuestra guía de estilo). ¡Esta es tu oportunidad para brillar! Entra en detalles explicando el tema sobre el que estás escribiendo. Proporciona enlaces a la documentación de referencia completa, explica cómo funciona la tecnología en detalle, brinda detalles de sintaxis y uso, etc. ¡Tú decides!

+ +

Como guía, aquí hay algunos consejos de escritura para principiantes:

+ + + +

Eche un vistazo a las primeras secciones de nuestras Funciones - Bloques de código reutilizables para algunas buenas secciones descriptivas.

+ +

Paso 5: Proporcionar material de "aprendizaje activo"

+ +

Para ilustrar el artículo y ayudar al lector a comprender mejor lo que están aprendiendo, asegúrese de proporcionar ejercicios, tutoriales y tareas que cumplir. Al hacer que utilicen y experimenten de forma activa y práctica con los conceptos que explica su artículo, puede ayudar a "bloquear" la información en sus cerebros.

+ +

Puede elegir incluir los ejemplos directamente en la página como muestras en vivo, o vincularlos si realmente no funcionan como una muestra en vivo. Si está interesado en ayudar a crear estos valiosos materiales, lea el artículo Cree un ejercicio interactivo para ayudar a aprender la web.

+ +

Si no puede proporcionar enlaces a materiales de aprendizaje activos existentes (no sabe de ninguno o no tiene tiempo para crearlos), debe agregar la etiqueta{{Tag("NeedsActiveLearning")}}  al artículo. De esa manera, otros colaboradores pueden encontrar artículos que necesitan materiales de aprendizaje activo y quizás ayudarlo a encontrarlos.

+ +

Eche un vistazo a Aprendizaje activo: seleccione diferentes elementos para un ejercicio de aprendizaje interactivo en vivo, o Aprendizaje activo juegue con posibilidades para un estilo diferente de ejercicio que les exija descargar una plantilla localmente y modificarla siguiendo los pasos proporcionados.

+ +

Paso 6: Obtenga el artículo revisado y póngalo en el menú de navegación del Área de aprendizaje

+ +

Después de que hayas escrito tu artículo, avísanos para que podamos echarle un vistazo, hacer una revisión y sugerir mejoras. Una vez más, consulte nuestra sección Contáctenos para conocer las mejores maneras de comunicarse.

+ +

En el menú de navegación principal del Área de aprendizaje. Este menú es generado por la macro Barra de aprendizaje, que necesita privilegios especiales para editar, así como una vez más, hable con uno de nuestro equipo sobre cómo agregarlo.

+ +

Al menos debe agregarlo a su página. Esto se hace agregando la llamada a la macro \{{LearnSidebar}} en un párrafo en la parte superior de su página.

+ +

Artículos sugeridos

+ +

¿Así es que quieres contribuir?

+ +

El equipo del Área de Aprendizaje Mantiene ONU Tablero de Trello las ideas Con de Artículos para Escribir. ¡Siéntete libre de elegir uno y ponte a trabajar!

diff --git a/files/es/mdn/contribute/index.html b/files/es/mdn/contribute/index.html new file mode 100644 index 0000000000..ce84773d87 --- /dev/null +++ b/files/es/mdn/contribute/index.html @@ -0,0 +1,70 @@ +--- +title: Contribuir al MDN +slug: MDN/Contribute +tags: + - Documentación + - Guía + - MDN + - NeedTranslate + - TopicStub +translation_of: MDN/Contribute +--- +
{{MDNSidebar}}
+ +

¡Bienvenido! Al visitar esta página, has dado el primer paso para convertirte en un colaborador de MDN. Las guías aquí cubren todos los aspectos de cómo contribuir al MDN, incluyendo las guías de estilo, guías para el uso de nuestro editor, herramientas y mucho más.

+ +
+
+

Guías de Colaborador

+ +
+
Primeros pasos
+
Una guía de inicio rápido para crear y hacer tu primera contribución.
+
Guía de contenido y estilo
+
La guía de contenido y estilo de MDN proporciona detalles sobre estilo de escritura, diseño de página y estilos de contenido para que el contenido que escribes encaje en el resto del contenido del MDN.
+
Guía de editor
+
Una guía completa para usar el editor del MDN.
+
Revisión de los artículos
+
Una guía para la realización de las revisiones técnicas y editoriales del contenido de los artículos, para ayudarnos a garantizar que todo el contenido de MDN es tan útil y fácil de leer como debe ser.
+
Terminología y convenciones
+
Nuestra guía de terminología y convenciones proporciona información que puedes utilizar para asegurarte de que utilizas la terminología correcta al describir las cosas.
+
Trabajar con la comunidad MDN
+
Una guía para trabajar con nuestra comunidad, la búsqueda de ayuda, la conexión con las personas y respuestas a las preguntas que surgen mientras contribuyes a MDN.
+
Preguntas frecuentes
+
Respuesta y consejos para las dudas más comunes acerca de contribuir al MDN.
+
+ +
+
Contribuir a Kuma
+
Una guía para contribuir al proyecto Kuma. Kuma es la plataforma que impulsa el sitio Web MDN
+
+
+ +
+

Cómo hacerlo

+ +

Nuestra guía cómo hacerlo proporciona instrucciones paso a paso para ayudarle a realizar tareas específicas cuando contribuye al MDN.

+ +
+
Modo de documentar una propiedad CSS
+
Una guía para escribir documentos con propiedades CSS. Todos los documentos de propiedad CSS deben coincidir con el estilo y el diseño descrito en este artículo.
+
Cómo etiquetar páginas correctamente
+
Esta guía de etiquetado de páginas proporciona información acerca de nuestras normas de etiquetado, incluyendo listas de las etiquetas que tienen un significado estándar en MDN. Siguiendo esta guía te asegurarás de que su contenido esté correctamente categorizado, con mayor facilidad de búsqueda y que nuestro mecanismo de filtrado de búsqueda funciona correctamente con sus artículos.
+
Cómo interpretar las especificaciones
+
Esta guía te ayudará a interpretar correctamente las especificaciones estándar de la Web. Ser capaz de leer éstos, pueden ser una forma de arte y saber cómo hacerlo te ayudará a producir una mejor documentación.
+
+ +

Localización

+ +
+
Localización visita guiada
+
Esta visita guiada te enseñará a localizar contenidos en MDN.
+
Guía de localización
+
Esta guía proporciona información sobre el proceso de localización de los contenidos MDN.
+
Proyectos de localización
+
Encuentra el proyecto de localización para tu idioma o si no hay uno, ¡Aprende cómo iniciar uno nuevo!
+
+
+
+ +

 

diff --git a/files/es/mdn/contribute/localize/index.html b/files/es/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..49731d7387 --- /dev/null +++ b/files/es/mdn/contribute/localize/index.html @@ -0,0 +1,31 @@ +--- +title: Localización en MDN +slug: MDN/Contribute/Localize +tags: + - Documentación + - Localización + - MDN + - Necesita traducción + - Proyecto MDC +translation_of: MDN/Contribute/Localize +--- +
{{MDNSidebar}}

MDN es usado por personas de todo el mundo como referencia y guía de las tecnologias Web, como así tambien de los interiores de Firefox. Nuestras comunidades de localización son una parte clave del proyecto Mozilla; su trabajo de traducción y localizacion de nuestra documentación ayuda a personas de todo el mundo a desarrollar para la Web abierta. Si quieres aprender más acerca de nuestros equipos de localización, únete a uno de nuestros equipos, o quizas quieres comenzar una nueva localización, éste es el lugar para comenzar.

+ +

{{LandingPageListSubpages}}

+ +

Herramientas de localización

+ +

Se encuentran muchisimas herramientas útiles que usaras durante el trabajo de localización:

+ +
+
Verbatim
+
Utilízelo para relizar traducciones de frases a travez de multiples proyectos Mozilla, incluye una interface de de usuario para MSDN (como así también una interface de usuario para Firefox).
+
Transvision
+
Una utilidad proveida por Mozilla Francia, la cual te permite realizar búsquedas por ocurrencias de frases en una localización en Inglés, encontrando cualquier traducción a otro idioma en una localización de destino a lo largo de todo el código fuente de Mozilla. Es útil para encontrar la traducción preferida para palabras o frases.
+
+ +

Vea ademas

+ + diff --git a/files/es/mdn/contribute/localize/iniciar_una_localizacion/index.html b/files/es/mdn/contribute/localize/iniciar_una_localizacion/index.html new file mode 100644 index 0000000000..f0596fa409 --- /dev/null +++ b/files/es/mdn/contribute/localize/iniciar_una_localizacion/index.html @@ -0,0 +1,108 @@ +--- +title: Iniciar una nueva localización MDN +slug: MDN/Contribute/Localize/Iniciar_una_localizacion +tags: + - Documentación + - Guía + - I10n + - Localización + - MDN Meta +translation_of: MDN/Contribute/Localize/Starting_a_localization +--- +
{{MDNSidebar}}

Las localizaciones de contenido MDN ayudan a extender el alcance de MDN a muchos más desarrolladores web y potenciales desarrolladores web que simplemente aquellos que pueden leer inglés. Por lo tanto, las localizaciones son una parte vital de lograr la misión de MDN.

+ +

Las solicitudes de nuevas localizaciones en MDN se evalúan caso por caso y deben cumplir con algunos requisitos mínimos. Otros factores que se consideran incluyen el número de hablantes de la lengua, y la proporción de ese grupo que también leer Inglés. No tenemos reglas estrictas sobre estos números, pero se dará prioridad a los locales que amplíen significativamente el alcance de MDN. Un idioma con una gran población de hablantes que no leen inglés tendrá mayor prioridad que uno con una pequeña población de oradores, donde muchos de ellos hablan inglés.

+ +

Criterios minimos

+ +

Los criterios mínimos para agregar un entorno regional a MDN son:

+ + + +

Proceso para iniciar una localización

+ +

Iniciar una localización no es un evento único, sino un proceso con los siguientes pasos generales:
+  

+ +
    +
  1. Ser miembro de una Comunidad activa de localización Mozilla. Si la comunidad de Mozilla para su entorno regional no está activa, trabaje en la creación de esa comunidad antes de expandirla para incluir MDN.
    2. +
  2.  Comuníquese con la comunidad de MDN para compartir su intención de iniciar una nueva localización MDN. (Por ejemplo, únase a las Listas de correo relacionadas con MDN  y al canal IRC de #mdn en irc.mozilla.org.) Los miembros principales de la comunidad de MDN, incluyendo el personal de MDN, pueden aconsejarle si su localidad propuesta parece ser un buen ajuste para MDN.
    3. +
  3. Agregue una sección para su idioma a la lista de proyectos de localización,e incluya a cualquier otra persona que esté planeando trabajar en ella. .
    4. +
  4. Envíe un bug en Bugzilla para solicitar la activación de su entorno local para MDN en Pontoon. Este error debe estar en la categoría "Mozilla Developer Network"> "Localización". Un administrador de pontón debe realizar esta activación.
    5. +
  5. Trabaje con su comunidad de localización para traducir las cadenas de interfaz de usuario de MDN en Pontoon. No continúe con el siguiente paso hasta que haya traducido al menos el 50% de las cadenas. Mantenga la comunicación con la comunidad MDN sobre su progreso.
    6. +
  6. Envíe un bug en Bugzilla para solicitar que se agregue la configuración regional a la lista de configuraciones locales disponibles en MDN. (El mismo producto y categoría que el error en el Paso 4) Indique quién tomará el papel de líder de localización de MDN, para ser un punto de contacto entre el grupo de localización de MDN y el resto de la comunidad de MDN. Normalmente, esta es la persona que envía el error. Para que su solicitud sea aceptada, un miembro del equipo central de MDN debe estar dispuesto a ser el mentor del líder de localización, por lo que una buena comunicación hasta este punto será rentable si puede demostrar que: +
      +
    1. Su comunidad de localización de Mozilla está activa y tiene la organización y el interés necesarios para mantener el trabajo en MDN.
      2. +
    2. Su local es un buen ajuste para MDN.
      3. +
    3.  Como líder de localización, es fácil trabajar y responder a los comentarios.
      4. +
    +
    7. +
+ +

Organización de un proyecto de localización: Mecánica MDN

+ +

La estructura básica de la jerarquía de páginas en cada una de las localizaciones de MDN debe ser esencialmente la misma. En general, debe intentar mantener la misma jerarquía de páginas que la configuración regional en-US (inglés), de modo que cada página de cada idioma corresponda a una página similar en cada localidad.

+ +

Te invitamos a vincular a páginas locales externas, escribir tus propios artículos y traducir todo desde el wiki en inglés. Si decides escribir tus propios artículos, sería útil que pudieras proporcionar una traducción en inglés para el wiki en inglés para que luego pueda traducirse a todos los otros wikis localizados.

+ +

Al agregar recursos locales, debe mantener un punto de vista neutral; Es decir, no debes promover una perspectiva en particular y, en lugar de ello, debes simplemente proporcionar los hechos de la mejor manera posible (ver información sobre la regla NPOVen Wikipedia). No debe enlazar a sitios comerciales (como cursos pagados, empresas de diseño web, etc.). Debe promover estándares abiertos y compatibilidad entre navegadores por métodos cerrados o propietarios siempre que sea posible.

+ +
+

Se anima a los directores de equipo a que monitoreen el contenido de su localidad en busca de spam y otros materiales inapropiados y tomen medidas para eliminarlos o corregirlos.

+
+ +

 Hay muchos consejos de varios equipos de traducción existentes; Usted debe sentirse libre de adoptar cualquiera de estas ideas que usted elija. Además, no dude en añadir sus propias sugerencias. Vea esta plantilla en el wiki español para ver un ejemplo.

+ + + +

Para encontrar ayuda con su proyecto, asegúrese de preguntar por la lista de distribución de dev-mdc, el canal IRC #mdn , y otras áreas de discusión relacionadas con MDN. Consulte "Únase a la comunidad de MDN" para obtener sugerencias para los canales de debate de la comunidad que le ayudarán a encontrar otros interesados en unirse a su equipo de localización.

+ +

También puede encontrar otros interesados en ayudarle asistiendo a eventos de desarrollo Web locales, en su espacio de hackers local, y similares. ¡Séa creativo!

+ +

Organización de una comunidad de localización

+ +

Trabajar con cualquier comunidad de localización de Mozilla existente

+ +

La experiencia ha demostrado que las comunidades de localización más activas y exitosas en MDN son extensiones de comunidades de localización de Mozilla existentes. Si está interesado en iniciar una localización en MDN y ya no está en contacto con la comunidad de Mozilla para su entorno local, busque en ellas y póngase en contacto. Encontrarás algunas personas con experiencia para compartir sobre Mozilla y la localización.

+ +

Conseguir mucha gente involucrada

+ +

También hemos visto que cuanto más gente está involucrada en un esfuerzo de localización, más probable es que sea autosostenible. Las personas vienen y van en un esfuerzo de localización (como la mayoría de las cosas en la vida). Cuantas más personas estén involucradas, más probable es que el grupo sostenga a través de esos cambios. Los esfuerzos que son iniciados por una persona o un grupo pequeño por lo general no permanecen activos más tiempo que los miembros iniciales. Por lo tanto, una gran parte de iniciar un esfuerzo de localización es reclutar suficiente gente para que el grupo siga adelante incluso cuando algunas personas abandonan, como inevitablemente lo hacen.

+ +

Reunirse regularmente, en persona o en línea

+ +

Reunirse regularmente con otros localizadores puede ser una gran manera de construir un sentido de cohesión de grupo, para que la gente quiera seguir participando. Reunión cara a cara es grande si todo el mundo está situado muy cerca lo suficiente como para poder hacer eso. Puede reunirse prácticamente en línea si su grupo se extiende demasiado lejos para reunirse en persona. Reunirse en un horario regular, como una vez al mes, también es importante, para que los miembros del grupo pueden planear para asistir. Algunos localizers pueden contribuir solamente durante un meet-up, y no en otras veces.

+ +

Qué traducir primero

+ +

MDN tiene miles de artículos en muchas áreas temáticas diferentes. Tal vez usted es un apasionado de un tema en particular - por todos los medios, empezar allí! Pero si buscas puntos de partida, he aquí algunas sugerencias:

+ + + +

Para algunas localidades, los localizadores consideran que las guías y los tutoriales son una prioridad mayor que las páginas de referencia. Los desarrolladores web a menudo pueden descubrir la sintaxis del código de la versión inglesa de una página, incluso si no saben mucho inglés. Pero aprender nuevos conceptos es mucho más cómodo en la lengua materna. Por lo tanto, puede ser importante para traducir tutoriales primero.

+ +

Política

+ +

 
+ Todos los materiales creados y traducidos para el MDN deben seguir nuestras Políticas de Derechos de Autor y Licencias..

+ +

Si encuentra problemas de cualquier tipo,— técnicos, políticos u otros—, póngase en contacto con el Equipo de Administración MDN.

+ +

 

diff --git a/files/es/mdn/contribute/localize/project_colon_localization_projects/index.html b/files/es/mdn/contribute/localize/project_colon_localization_projects/index.html new file mode 100644 index 0000000000..829f196bba --- /dev/null +++ b/files/es/mdn/contribute/localize/project_colon_localization_projects/index.html @@ -0,0 +1,405 @@ +--- +title: Proyectos de localización +slug: 'MDN/Contribute/Localize/Project:Localization_Projects' +tags: + - Comunidad + - Localización + - MDN Meta + - Referencia + - l10n +translation_of: MDN/Contribute/Localize/Localization_projects +--- +
{{MDNSidebar}}
+ +

Este artículo describe nuestros proyectos de localización existentes, así como también lo que necesitas hacer si quieres iniciar un nuevo proyecto de localización en MDN.

+ +

Proyectos de localización MDN existentes

+ +

Todos los equipos de los proyectos de localización de MDN deben mantener su información actualizada en esta tabla, para que, de este modo, los contribuidores interesados puedan ponerse en contacto con ellos y ofrecer su ayuda.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IdiomaLíderContribuidoresNotas
Francés( Jeremie )FredB, Alain Boquet, Fréderic Chateaux, Vincent N., Benoit Leseul, Shz, Thierry Régagnon (tregagnon), xaky, Goofy, sylzys, the prisoner, Julien STUBY, poum, sylvie(notas o URL al equipo de localización project team page)
Italiano?Federico, mck89, marcostudios, loris94, MrW0lf, Iacchi, camaleo, marcantonio, Grino, Nicola_D 
JaponésPotappoYoshino(ex.Mozilla Japan), Yuichiro, myakura(Masataka Yakura), yyss, ethertank, nobuoka, Marsf(Masahiko Imanaka), taguchi-ch, sii, saneyuki_s, Shimono(Atsushi Shimono), Taken(Takeshi Kurosawa), Electrolysis, dextra, MasayukiMDC Japan Project (-2009)
PolacoTomasz SokółMarcoos(Marek Stępień), Dapi 
Españolmaedca,francjpSuperruzafa, vhanla, maedca, inma_610, ccarruitero, artopal, StripTM, Jorge.villalobos, Scipion, Verruckt, Nathymig, Rkovac, ajimix, mhauptma73, deimidis, Joalar, Maharba, jessest, MPoli, Antiparticule, {{userlink("LeoHirsch")}}, {{userlink("gorrotowi")}}, {{userlink("AlePerez92")}}Necesitamos, de verdad, más traductores.
Portugués (Brasil)Jaydson GomesGalvão, Atila, francisco.hansen, francineemilia, battisti, jpalharini, LeonardoPacheco, Lehrerschuler, hsteffano, lfz, -pedrohenrique-, eduardodx, mateus.m.luna, josivansilva, TelaSocial, mazulo, vlopez5, robsonds, HenriqueSilverioCómo ayudar a MDN
Portugués (Portugal)Leandro Mercês XavierMatheus Smythe Svolenski, Luis Henrique Sousa, f.sanxz 
CoreanoChanny YunKorean ContributorsGoogle Groups
AlemánElchi3eminor, AlexPl, Sprottenwels, tessarakt3, jwlNecesitamos, de verdad, más traductores.
+

Griego

+ 		syssgxJasnaPaka, DJ.MacaNecesitamos más traductores.
Ruso?Cobalt747, Sky_Fox, Chernetsky, uleming, karasiov, Dionys, Megapotz, hazestalker, KwintoNecesitamos más traductores.
Chino (Tradicional)BobChaodwchiang, happysadman, petercpg, sailplaneTW, Kourge, Josesun, Sonrisa, Kennyluck, sycheng, naihsi, evelynhung¡Necesitamos más traductores! ¡Únete a nosotros en Google Groups!
+

Chino Simplificado

+ 		yanzehua(-2008?)ziyunfei, 宋晓光, Duwei, alzhu, Cnmahj, Andyyard, yinian1992, Chajn, c_king, iwo +

¡Necesitamos más traductores y buena organización!

+ +

¡Únete a nosotros en Google Groups!

+
HebreoZiv PerryInkbugNecesitamos más traductores.
RumanoRaul Malea Necesitamos más traductores.
TailandésHassadee Pimsuwan Necesitamos, de verdad, más traductores.
TurcoHakan Damar Necesitamos más traductores.
+ +

¿Cómo inicio un proyecto de localización?

+ +

Si estás interesado en iniciar un proyecto de localización para traducir MDN a tu idioma, aquí están los pasos que debes seguir para contribuir.

+ +
    +
  1. Primero, revisa que no exista ya un proyecto asociado a ese idioma.
    2. +
  2. Ponte en contacto con el Equipo de localización de Mozilla de tu idioma, y dales a conocer tus planes.
    3. +
  3. Inscríbete en nuestras Listas de Correo e ingresa al canal de IRC #devmo en irc.mozilla.org.
    4. +
  4. Contacta a sheppy, nuestro líder del equipo de Documentación para Desarrolladores, para informarle de que deseas iniciar una nueva localización. No es que necesites su permiso, pero le interesaría saber quién eres.
    5. +
  5. Añade una fila para tu idioma en la tabla de arriba e incluye a quienes tengan pensado trabajar en ello.
    6. +
  6. Crea un reporte en Bugzilla, solicitando que tu idioma sea añadido a la lista de idiomas compatibles con MDN. El reporte debe estar en la categoría "Mozilla Developer Network" > "Localización". Será asignado automáticamente a la persona indicada.
    7. +
  7. Espera mientras el equipo de MDN se encarga de tu solicitud. Si tu bug no se responde en tres o cuatro días, por favor, agrega un comentario al bug pidiendo un "ETA" para su conclusión.
    8. +
  8. Una vez que la localización haya sido añadida a MDN, podrás empezar a usar la herramienta Verbatim para traducir las cadenas de la interfaz de usuario de la página y también podrás empezar a traducir los artículos de la wiki.
    9. +
+ +

 

+ +

¿Cuál es la apariencia de un MDN localizado?

+ +

La estructura básica de cada uno de los wikis localizados debe ser, en esencia, la misma. En general, debes intentar mantener una igual jerarquía de las páginas, para que cada página de cada lenguaje se corresponda con una página similar en todas las localizaciones.

+ +
Eres bienvenido si deseas enlazar páginas locales externas, escribir tus propios artículos y traducir todo desde la wiki inglesa. Si decides escribir tus propios artículos, sería útil que proveyeses una traducción al inglés para que figurase en la wiki inglesa, de forma que ese artículo pudiese ser localizado en todas las otras wikis.
+ +

Al añadir fuentes locales se debe de mantener la regla PDVN (Punto de vista neutral), es decir, no incluir enlaces a sitios comerciales (como cursos de pago, compañías de diseño web, etc.) y, siempre que sea posible, debes promover los estándares abiertos y código web cross-browsing en lugar de métodos cerrados y propietarios.

+ +
+

Nota: Animamos a los líderes de equipo a que controlen su contenido localizado buscando spam y otros materiales inapropiados, para poder tomar las medidas necesarias para eliminarlos o corregirlos.

+
+ +

¿Cómo organizo un proyecto de localización?

+ +

Tienes a tu disposición una estupenda serie de consejos de varios equipos de traducción, así que siéntete libre para adoptar alguna de estas ideas. Además, por favor, anímate e incluye tus propias sugerencias. Echa un vistazo a esta plantilla en la wiki española, por ejemplo.

+ + + +

Fuentes RSS por lengua

+ +

Puedes seguir las fuentes RSS de cada lengua, de forma que recibirás alertas sobre los cambios en los contenidos de cualquiera de ellas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TargetLocaleLanguageFeed URL
Arabianarعربيhttps://developer.mozilla.org/ar/docs/feeds/atom/all
Bengali (Bangladesh)bn-BDবাঙ্গালীhttps://developer.mozilla.org/bn-BD/docs/feeds/atom/all
Catalancacatalàhttps://developer.mozilla.org/ca/docs/feeds/atom/all
CzechcsČeštinahttps://developer.mozilla.org/cs/docs/feeds/atom/all
GermandeDeutschhttps://developer.mozilla.org/de/docs/feeds/atom/all
GreekelΕλληνικάhttps://developer.mozilla.org/el/docs/feeds/atom/all
Englishen-USEnglishhttps://developer.mozilla.org/en-US/docs/feeds/atom/all
SpanishesEspañolhttps://developer.mozilla.org/es/docs/feeds/atom/all
Persianfaفارسیhttps://developer.mozilla.org/fa/docs/feeds/atom/all
Finnishfisuomihttps://developer.mozilla.org/fi/docs/feeds/atom/all
FrenchfrFrançaishttps://developer.mozilla.org/fr/docs/feeds/atom/all
Frisianfy-NLFryskhttps://developer.mozilla.org/fy-NL/docs/feeds/atom/all
Georgian (Ireland)ga-IEGaeilge (Éire)https://developer.mozilla.org/ga-IE/docs/feeds/atom/all
Hebrewheעבריתhttps://developer.mozilla.org/he/docs/feeds/atom/all
CroatianhrHrvatskihttps://developer.mozilla.org/hr/docs/feeds/atom/all
HungarianhuMagyarhttps://developer.mozilla.org/hu/docs/feeds/atom/all
IndonesianidBahasa Indonesiahttps://developer.mozilla.org/id/docs/feeds/atom/all
ItalianitItalianohttps://developer.mozilla.org/it/docs/feeds/atom/all
Japaneseja日本語https://developer.mozilla.org/ja/docs/feeds/atom/all
Georgiankaქართულიhttps://developer.mozilla.org/ka/docs/feeds/atom/all
Koreanko한국어https://developer.mozilla.org/ko/docs/feeds/atom/all
DutchnlNederlandshttps://developer.mozilla.org/nl/docs/feeds/atom/all
PolishplPolskihttps://developer.mozilla.org/pl/docs/feeds/atom/all
Portuguese (Brazil)pt-BRPortuguês (do Brasil)https://developer.mozilla.org/pt-BR/docs/feeds/atom/all
Portuguese (Europe)pt-PTPortuguês (Europeu)https://developer.mozilla.org/pt-PT/docs/feeds/atom/all
Romanianroromânăhttps://developer.mozilla.org/ro/docs/feeds/atom/all
RussianruРусскийhttps://developer.mozilla.org/ru/docs/feeds/atom/all
AlbaniansqShqiphttps://developer.mozilla.org/sq/docs/feeds/atom/all
Thaithไทยhttps://developer.mozilla.org/th/docs/feeds/atom/all
TurkishtrTürkçehttps://developer.mozilla.org/tr/docs/feeds/atom/all
VietnameseviTiếng Việthttps://developer.mozilla.org/vi/docs/feeds/atom/all
Chinese (Simplified)zh-CN中文 (简体)https://developer.mozilla.org/zh-CN/docs/feeds/atom/all
Chinese (Traditional)zh-TW正體中文 (繁體)https://developer.mozilla.org/zh-TW/docs/feeds/atom/all
+ +

Si deseas tener una fuente personalizada, echa un vistazo a Feeds.

+ +

Política

+ +

Todos los materiales creados y traducidos para la MDN deben seguir nuestras políticas sobre Derechos de autor y licencias.

+ +

Si encuentras algún problema (técnico, sobre la política o de cualquier otra clase), por favor, ponte en contacto con Eric Shepherd utilizando la información de contacto de su página de usuario.

+ +

 

diff --git a/files/es/mdn/contribute/localize/project_colon_translating_mdn_pages/index.html b/files/es/mdn/contribute/localize/project_colon_translating_mdn_pages/index.html new file mode 100644 index 0000000000..2a6c51a563 --- /dev/null +++ b/files/es/mdn/contribute/localize/project_colon_translating_mdn_pages/index.html @@ -0,0 +1,57 @@ +--- +title: Traduciendo páginas de MDN +slug: 'MDN/Contribute/Localize/Project:Translating_MDN_pages' +tags: + - Guía + - MDN Meta + - l10n +translation_of: MDN/Contribute/Localize/Translating_pages +--- +
{{MDNSidebar}}
+ +

Este artículo es una guía básica para traducir contenido en MDN, incluyendo ambas mecánicas de traducir contenido y consejos de maneras apropiadas para encargarse de varios tipos de contenido.

+ +

Empezando la traducción de una página

+ +

Cuando te encuentres con una página que quieras traducir a tu idioma, sigue estos pasos:

+ +
    +
  1. Haz clic en el ícono de Lenguaje ({{FontAwesomeIcon ("icon-language")}}) para abrir el menú de Idiomas y haz clic en Add a Translation. Aparece la página Seleccionar Idiomas.
    2. +
  2. Haz clic en el idioma en el que deseas traducir la página. La vista Traducir Artículo se abre con el texto del idioma original en el lado izquierdo de la vista.
    3. +
  3. Debajo de Translate Description, puedes traducir el título y opcionalmente la link amigable (Slug) al Idioma deseado. El enlace amiglable es la última parte de un enlace (link) de una URL (por ejemplo, "Translating_Pages" De este artículo).  Algunas comunidades no traducen el Enlace (link), dejándolo en Inglés. compara con otros artículos en tu Idioma para determinar prácticas comunes. Puedes hacer clic en el símbolo (-) al lado de Translate Description para esconder esta información cuando termines, para hacer más espacio para la sección de Translate content.
    4. +
  4. Bajo Translate Content, traduce el cuerpo de la página.
    5. +
  5. Llena por lo menos una Etiqueta para la página recién traducida.
    6. +
  6. Haz clic en Guardar cambios cuando hayas terminado.
    7. +
+ +
+

Nota: Los elementos de la interfaz de usuario del visor de artículos que se está traduciendo se muestran inicialmente en inglés. En visitas posteriores para traducir un artículo en particular, la IU se muestra en el idioma apropiado, siempre que haya una configuración regional para ese idioma disponible en MDN. La MDN la interfaz de usuario se puede ubicar usando Verbatim. Consulte Ubicación con Verbatim para obtener detalles sobre cómo usar esta herramienta.
+ Editar una página traducida.

+
+ +

Editando una página traducida

+ + + +

Si la versión en inglés ha sido modificada desde la última traducción, la vista de traducción del artículo mostrará un nivel de fuente de diferencia (source-level "diff") de los cambios realizados en la versión Original en inglés. De esta forma, podrá ver que debe actualizarse en la traducción.
+ Traducir etiquetas.

+ +

Etiquetando traducciones

+ +

Es importante que cada página esté etiquetada con al menos una etiqueta. Incluso si esto es traducción. En general, usar las mismas etiquetas que el artículo original es una buena idea.

+ +

Algunas etiquetas se utilizan para filtros de búsqueda o como convenciones entre colaboradores. No deberían ser traducidos. Para leer estas etiquetas, lea los estándares de etiquetado. Puede crear etiquetas traducidas para contenido grupal si no está cubierto por una de las etiquetas estándar.

+ +

Consejo para los localizadores

+ +

Si recién comienza como un localizador para MDN, aquí hay algunas sugerencias:

+ + diff --git a/files/es/mdn/contribute/procesos/index.html b/files/es/mdn/contribute/procesos/index.html new file mode 100644 index 0000000000..a408f11fb7 --- /dev/null +++ b/files/es/mdn/contribute/procesos/index.html @@ -0,0 +1,14 @@ +--- +title: Procesos de documentación +slug: MDN/Contribute/Procesos +tags: + - Landing + - MDN Meta + - Procesos +translation_of: MDN/Contribute/Processes +--- +
{{MDNSidebar}}
{{IncludeSubnav("/es/docs/MDN")}}
+ +

El proyecto de Documentación MDN es enorme; hay un sinfín de teconologías que cubrimos a través de la asistencia de cientos de colaboradores de todo el mundo. Para ayudarnos a llevar orden al caos, tenemos procesos estandarizados para seguir cuando se trabaja en tareas específicas relacionadas con la documentación. Aquí encontrarás guías para estos procesos.

+ +

{{LandingPageListSubPages()}}

diff --git a/files/es/mdn/contribute/registro_persona/index.html b/files/es/mdn/contribute/registro_persona/index.html new file mode 100644 index 0000000000..37cad64b07 --- /dev/null +++ b/files/es/mdn/contribute/registro_persona/index.html @@ -0,0 +1,36 @@ +--- +title: Registro MDN y Persona +slug: MDN/Contribute/Registro_Persona +tags: + - Documentación + - MDN + - MDN Meta + - Mozilla + - Persona +translation_of: Archive/MDN/Persona_sign-ins +--- +
{{MDNSidebar}}
+

Por favor Enlaza tu cuenta GitHub a tu perfil  MDN ahora

+ +
, para que puedas continuar accediendo en MDN.
+ +

 

+
+ +

Actualmente, MDN permite a los colaboradores iniciar sesión proveiendo dos tipos diferentes de autenticación: Mozilla Persona y GitHub. A partir del 1 de noviembre del 2016, eliminaremos la opción Persona para iniciar sesión. Por lo tanto, deberás habilitar la autenticación de Github en tu perfil para evitar perder el acceso de inicio de sesión a MDN.

+ +

Reconocemos que esto es un inconveniente, y nos disculpamos por ello. Desafortunadamente, esto esta fuera de nuestro control.

+ +

¿Porqué Persona sera eliminado?

+ +

Mozilla ha cerrado el proyecto Persona, y sus servidores serán desactivados en Noviembre del 2016. Puedes obtener mas información sobre la decisión de Mozilla para retirar Persona de Mozilla wiki.

+ +

¿Cuándo será eliminado Persona?

+ +

Vamos a desactivar Persona como un proveedor de autenticación el 1 de Noviembre del 2016; en otras palabras, el ultimo dia que podrás tener acceso para iniciar sesión en MDN usando Persona sera el 31 de Octubre del 2016. Estaremos emitiendo notificaciones mas frecuentes y cada vez mas urgentes para agregar la cuenta de GitHub a tu perfil de MDN iniciando ahora. Por favor realiza esto tan pronto como sea posible, con la finalidad de evitar el riesgo de perder el acceso a tu cuenta de MDN.

+ +

¿MDN ofrecerá otro proveedor de autenticación?

+ +

Nos gustaría mucho hacerlo, pero en este momento no tenemos identificado otro proveedor de autenticación que cumpla con nuestros requisitos; además, actualmente no tenemos los recursos de desarrolladores para integrar otro proveedor. Por el momento, la única opción para mantener acceso como colaborador en MDN es Enlazando tu perfil MDN a tu cuenta GitHub.

+ +

Ten en cuenta, por supuesto, que no es necesario iniciar sesión en tu cuenta MDN para leer nuestro contenido. Pero si es necesario tener una cuenta para contribuir, y si deseas ser capaz de contribuir en cualquier momento en el futuro, asegurarte de agregar una cuenta de GitHub a tu perfil tan pronto como sea posible, antes del 31 de Octubre del 2016.

diff --git a/files/es/mdn/contribute/tareas/index.html b/files/es/mdn/contribute/tareas/index.html new file mode 100644 index 0000000000..b8614f38ee --- /dev/null +++ b/files/es/mdn/contribute/tareas/index.html @@ -0,0 +1,17 @@ +--- +title: Cosas para hacer en MDN +slug: MDN/Contribute/Tareas +translation_of: MDN/Contribute/Getting_started +--- +
{{MDNSidebar}}

¿Estás buscando formas de ayudar a mejorar MDN? Hay muchas formas de ayudar: desde corregir errores tipográficos hasta escribir nuevo contenido, o incluso ayudar a desarrollar la plataforma Kuma en la que se construye el sitio web. La guía para el contribuyente de MDN cubre todas las formas en las que puedes ayudar y cómo hacerlo. Más abajo, encontrarás listas de tareas más específicas que faltan hacer.

+

Hay un montón de cosas que puedes hacer para ayudar en MDN. Tenemos una guía para las tareas que puedes llevar a cabo como parte de nuestro artículo Comenzando en MDN. Entre las posibles formas de ayudar se encuentran:

+ +

Para más ideas acerca de cosas en las que puedes colaborar con MDN, vé nuestras Guías de cómo hacerlo. Puedes encontrar listas de páginas categorizadasque necesitan de tu ayuda en nuestra sección de  Estado de la Documentación.

diff --git a/files/es/mdn/contribute/team_status/index.html b/files/es/mdn/contribute/team_status/index.html new file mode 100644 index 0000000000..c8146f8566 --- /dev/null +++ b/files/es/mdn/contribute/team_status/index.html @@ -0,0 +1,93 @@ +--- +title: Tabla de estado del equipo +slug: MDN/Contribute/Team_status +translation_of: Archive/Meta_docs/Team_status_board +--- +
{{MDNSidebar}}

Esta tabla es una lista de contribuyentes MDN y lo que actualmente están trabajando. Siéntase libre de agregarse usted mismo y lo que estás haciendo a esta lista, pero ten en cuenta que vamos a purgar elementos fuera de fecha con regularidad; por lo que si decide añadirte a ti mismo, debe hacer su mejor esfuerzo para mantener actualizada la información (incluso si todo lo que hace es actualizar la "última actualización" que por lo que sabemos que está mantenerlo actualizado, a pesar de su trabajo toma mucho tiempo para terminar).

+
+

Nota:  No agregue una nueva fila para cada actualización de estado; simplemente actualizar el contenido existente. Esto no tiene la intención de realizar un seguimiento de lo que haces con el tiempo, sino simplemente dejar que las partes interesadas conozcan lo su trabajo actual es.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UsernameLast UpdatedStatus
{{UserLink("Sheppy")}}June 19, 2013Ongoing work on MDN contributor guide. Gradually getting back into work on core B2G docs.
{{UserLink("jswisher")}}April 8, 2013Contribution pathway for writing volunteers; Mozilla Reps SIGs for Evangelism and Documentation.
{{UserLink("teoli")}}April 9, 2013Web Audio API; Maintaining CSS/HTML; Fx for devs
{{UserLink("wbamberg")}}  
{{UserLink("MarkGiffin")}}April 8, 2013App payments (in-app and paid apps); reference apps; packaged apps; managing your app.
{{UserLink("Domecraft")}}September 20, 2013Contributions to docs involving Web development
{{UserLink("Jeremie")}}August 8, 2013Keep going on WebAPI, now with a focus on various network APIs
{{UserLink("madarche")}}April 9, 2013Plan to work on IndexedDB again in the next weeks/months, especially on IDBCursor and IDBCursorWithValue.
{{UserLink("ScottMichaud")}}November 6, 2013 +

Doing what I can with the gaming documentation.

+
{{UserLink("Dbs")}}April 20, 2013Familiarizing myself with MDN tools, styles, and existing content
{{UserLink("tregagnon")}}June 25, 2013Fixing many broken links between French translations and English source articles. (Thanks to {{UserLink("SphinxKnight")}} crawl reports)
{{UserLink("justinpotts")}}December 9, 2013Adding tags to docs needing them
{{UserLink("kscarfone")}}July 25, 2013Knock out the editorial reviews on all the pending Web API documentation for Firefox OS
{{UserLink("Chandan1002")}}April 21,2014Contributing to docs and translating to Hindi from English source articles.
+

 

diff --git a/files/es/mdn/guidelines/content_blocks/index.html b/files/es/mdn/guidelines/content_blocks/index.html new file mode 100644 index 0000000000..dedccd3b10 --- /dev/null +++ b/files/es/mdn/guidelines/content_blocks/index.html @@ -0,0 +1,46 @@ +--- +title: Bloques de contenido +slug: MDN/Guidelines/Content_blocks +tags: + - MDN + - Meta +translation_of: MDN/Guidelines/CSS_style_guide +--- +
{{MDNSidebar}}
+

This pages lists reusable content blocks.

+
+

Grilla de tarjetas

+

Permite tener un par de tarjetas cercanas entre sí para llamar a contenidos específicos o para llamar a una acción. La clase CSS es: .card-grid (L 751 - 824 in CustomCSS).

+ +

Dos columnas

+

Dos columnas separadas con un borde gris. Normalmente usadas en páginas de destino. Clase de CSS: .topicpage-table (L 830 - 837 & 82-93 in CustomCSS).

+
+
+ Columna 1
+
+ Columna 2
+
+

 

+

Columnas con la misma altura

+

Se usa en la página de destino de Firefox OS para envolver las columnas que deberían tener el mismo alto. Clase de CSS: .equalColumnHeights (L 25 - 38 in CustomCSS).

+
+
+ Un Texo
+ y nueva linea
+  
+
+ Otro texto
+
+ aquí
+
+

 

diff --git a/files/es/mdn/guidelines/convenciones_y_definiciones/index.html b/files/es/mdn/guidelines/convenciones_y_definiciones/index.html new file mode 100644 index 0000000000..c96e4b7ab2 --- /dev/null +++ b/files/es/mdn/guidelines/convenciones_y_definiciones/index.html @@ -0,0 +1,201 @@ +--- +title: MDN convenciones y definiciones +slug: MDN/Guidelines/Convenciones_y_definiciones +tags: + - Directrices + - Documentación + - Guía + - MDN + - Meta MDN +translation_of: MDN/Guidelines/Conventions_definitions +--- +
{{MDNSidebar}}{{IncludeSubnav("/es/docs/MDN")}}
+ +

Este artículo define algunas convenciones y definiciones que se usan comúnmente en MDN, que pueden no ser obvias para algunas personas cuando las encuentran en la documentación.

+ +

Definiciones

+ +

Desaprobado y obsoleto

+ +

Desaprobado y obsoleto son términos comunes asociados con tecnologías y especificaciones, pero ¿qué significan?

+ +
+
Desaprobado
+
En MDN, el término desaprobado se usa para marcar una API o tecnología que ya no se recomienda, pero que aún está implementada y puede funcionar. Recientemente, la hemos actualizado a la definición utilizada en nuestro proyecto de datos de compatibilidad del navegador, que esa "característica ya no se recomienda. Es posible que se elimine en el futuro o que solo se conserve por motivos de compatibilidad. Evita el uso de esta funcionalidad."
+
Obsoleto
+
En MDN, el término obsoleto se utiliza para marcar una API o tecnología que no solo ya no se recomienda, sino que ya no se implementa en los navegadores. Sin embargo, esto fue confuso — es similar a desaprobado, y la distinción no es muy útil (aún no debes usarlo en un sitio de producción). Por lo tanto, ya no la usamos, y cualquier instancia con la que te encuentres se debe eliminar/reemplazar por desaprobada.
+
+ +

Experimental

+ +

Experimental puede significar diferentes cosas según el contexto en el que lo escuches o lo leas. Cuando una tecnología se describe como experimental en MDN, significa que la tecnología es incipiente e inmadura, y actualmente está en proceso de ser agregada a la plataforma web (o considerada para agregarla).

+ +

Uno o ambos de estos serán ciertos:

+ + + +

Si una o ambas de estas definiciones es cierta, entonces debes pensar detenidamente antes de comenzar a usar esa tecnología en cualquier tipo de proyecto de producción (es decir, no solo en una demostración o experimento). Consulta también la definición de experimental en nuestro proyecto de datos de compatibilidad del navegador.

+ +

Por el contrario, un elemento ya no es experimental cuando:

+ + + +

El or es importante aquí — por lo general, si una tecnología es compatible con varios navegadores importantes, la especificación será estable, pero no siempre es así. Y algunas tecnologías tendrán una especificación estable y se usarán bien, pero no tendrán soporte nativo en los navegadores (IMSC, por ejemplo).

+ +

Páginas archivadas

+ +

Las páginas archivadas son páginas que se almacenan en el Archivo de contenido obsoleto de MDN. Estas páginas contienen información lo suficientemente desactualizada como para que ya no sea directamente útil para nadie.

+ +

Por lo general, estas se refieren a proyectos de Mozilla que han sido descontinuados y ya no se debe confiar en ellos. Pero no las eliminamos simplemente porque forman un registro histórico útil, y algunos de los patrones o ideas contenidos en ellos podrían ser útiles para trabajos futuros. Un buen ejemplo es el proyecto B2G (Firefox OS).

+ +

¿Cuándo se debe archivar una página?

+ +

Una página se debe archivar si se ajusta a la descripción anterior. Para archivar una página, debes utilizar la "función Mover página" (Avanzado > Mover este artículo) para mover la página al árbol de páginas de archivo (/es/docs/Archive). Es posible que no tengas los permisos para usar esta función, y antes de comenzar a archivar páginas, primero debas discutirlo con la comunidad MDN; habla con nosotros en nuestro Foro de discusión.

+ +

Páginas eliminadas

+ +

Las páginas eliminadas son páginas que se eliminaron explícitamente de MDN — consulta, por ejemplo, la interfaz SharedKeyframeList y el constructor SharedKeyframeList(). Estas páginas contienen información que ya no es útil de ninguna manera y/o puede ser incorrecta hasta el punto en que mantenerla disponible puede ser confuso o malo para la gente.

+ +

Estas pueden ser:

+ + + +

¿Cuándo se debe eliminar una página?

+ +

Se debe eliminar una página si se ajusta a la descripción anterior. Para eliminar una página, debes utilizar la función "Eliminar esta página" (Avanzado> Eliminar esta página) para eliminar la página. Probablemente no tengas los permisos para usar esta función, y cuando pienses en eliminar páginas, primero debes discutirlo con la comunidad de MDN; habla con nosotros en nuestro Foro de discusión.

+ +

Cuando documentar nuevas tecnologías

+ +

En MDN, buscamos constantemente documentar nuevas tecnologías de estándares web según corresponda. Intentamos lograr un equilibrio entre publicar la documentación lo suficientemente temprano para que los desarrolladores puedan aprender sobre las nuevas funciones tan pronto como lo necesiten y publicarla lo suficientemente tarde para que la tecnología sea madura y estable para que los documentos no necesiten actualizaciones constantes o rápida eliminación.

+ +

En general, nuestra definición de lo más temprano que consideraremos para documentar una nueva tecnología es:

+ +

"Cuando la función está en una pista de estándares y se implementa en algún lugar."

+ +

Definitivamente deberías considerar documentar una nueva tecnología si:

+ + + +

Deberías tener más cuidado al documentar una nueva tecnología (pero deberías considerarla si tiene sentido) si:

+ + + +

No debes considerar documentar una nueva tecnología si:

+ + + +

Convenciones

+ +

Cuando se elimina algo de la especificación

+ +

A veces, durante el desarrollo de una nueva especificación, o en el transcurso de la evolución de los estándares como HTML, se agregan nuevos elementos, métodos, propiedades, etc. a la especificación, permanecen allí por un tiempo y luego se eliminan nuevamente. A veces, esto sucede muy rápido y, a veces, estos nuevos elementos permanecen en la especificación durante meses o incluso años antes de ser eliminados. Esto puede hacer que sea complicado decidir cómo manejar la eliminación del artículo de la especificación. Aquí hay algunas pautas que te ayudarán a decidir qué hacer.

+ +
+

Para los propósitos de esta discusión, la palabra "elemento" se usa para significar cualquier cosa que pueda ser parte de una especificación: un elemento o un atributo de un elemento, una interfaz o cualquier método individual, propiedad u otro miembro de una interfaz, etcétera.

+
+ + + +

Utiliza el sentido común con la redacción de los mensajes de advertencia y otros cambios en el texto sugeridos por las pautas anteriores. Los diferentes elementos requerirán una redacción y un manejo diferentes de la situación. En caso de duda, no dudes en pedir consejo en la sala del chat de Docs Web de MDN en Matrix, o en el foro de debate de Docs Web de MDN.

+ +

Copiar contenido dentro de MDN

+ +

A veces, necesitas reutilizar el mismo texto en varias páginas (o deseas usar el contenido de una página como plantilla para otra página). Tienes tres opciones:

+ + + +

Copiar contenido de otro lugar

+ +

A menudo, hay contenido útil sobre un tema en algún lugar de la web además de MDN. Sin embargo, copiar dicho contenido puede plantear dificultades, tanto legales como técnicas.

+ +

En el nivel técnico, los motores de búsqueda suelen penalizar a un sitio en su clasificación por reproducir contenido disponible en otros lugares. Por lo tanto, es preferible tener contenido original en MDN, para mejorar la clasificación del contenido de MDN en los motores de búsqueda. Puedes vincular al contenido existente de MDN.

+ +

A nivel legal, debes estar autorizado para contribuir con el contenido, y debes tener licencia y atribución de una manera que sea compatible con licencia de MDN.

+ + + +

Cómo comunicar un conflicto de especificaciones

+ +

Ten en cuenta que a veces (pero rara vez) hay un conflicto entre diferentes versiones de especificaciones (generalmente W3C versus WHATWG), p. ej. una versión puede tener una característica listada como obsoleta, mientras que la otra no. En tales casos, considera cuál es la realidad, es decir, qué están haciendo los navegadores, y escribe una nota "importante" para resumir ese último estado. Por ejemplo, a enero de 2019, el atributo global inputmode tiene un conflicto, que se resumió al igual que:

+ +
+

Conflicto de especificaciones: La lista de especificaciones de WHATWG inputmode, y los navegadores modernos están trabajando para admitirlo. Sin embargo, la especificación W3C HTML 5.2 ya no la incluye (es decir, la marca como desaprobada). Debes considerar que la definición del WHATWG es correcta, hasta que se logre un consenso.

+
diff --git a/files/es/mdn/guidelines/index.html b/files/es/mdn/guidelines/index.html new file mode 100644 index 0000000000..8105665f2f --- /dev/null +++ b/files/es/mdn/guidelines/index.html @@ -0,0 +1,10 @@ +--- +title: Guías de contenido y estilo de MDN +slug: MDN/Guidelines +tags: + - Estilo + - Guías +translation_of: MDN/Guidelines +--- +
{{MDNSidebar}}

Estas guías proveen detalles de cómo debería estar escrita y qué formato debería tener la documentación MDN, así como también cómo deberían ser presentados nuestros códigos de ejemplo y otro contenido. Siguiendo estas guías, puedes asegurarte de que el material que produces es limpio y fácil de usar.

+

{{LandingPageListSubpages}}

diff --git "a/files/es/mdn/guidelines/project_colon_gu\303\255a_de_estilo/index.html" "b/files/es/mdn/guidelines/project_colon_gu\303\255a_de_estilo/index.html" new file mode 100644 index 0000000000..40bffd16ca --- /dev/null +++ "b/files/es/mdn/guidelines/project_colon_gu\303\255a_de_estilo/index.html" @@ -0,0 +1,146 @@ +--- +title: Guía de estilo +slug: 'MDN/Guidelines/Project:Guía_de_estilo' +tags: + - Proyecto_MDC + - Todas_las_Categorías +translation_of: MDN/Guidelines/Writing_style_guide +--- +
{{MDNSidebar}}
+ +

Para mostrar la documentación de forma organizada, estandarizada y fácil de leer, la guía de estilos de MDN describe cómo debe organizarse, escribirse y formatearse el texto. Se trata de pautas más que de reglas estrictas. Interesa más el contenido que el formato, así que no te sientas obligado a aprenderte la guía de estilos antes de colaborar. No te enojes ni te sorprendas si después un voluntario edita tu trabajo para que quede de acuerdo con esta guía.

+ +

Los aspectos lingüísticos de esta guía se refieren principalmente a la documentación en idioma inglés.Se pueden (y se anima a) crear guías de estilo en otros idiomas. Estas deben publicarse como subpáginas de la página del equipo de localización.

+ +

Si buscas especificaciones de cómo debe estructurarse un determinado tipo de página, mira la guía de diseño de MDN.

+ +

Aquí se enumeran los usos y costumbres recomendados a la hora de editar los artículos de este wiki. Si ves que falta contenido o crees que deberíamos mejorar o corregir algo, por favor coméntalo en la página de discusión.

+ +

Uso de mayúsculas en el nombre de las páginas y los encabezados

+ + + +

Infinitivos y gerundios

+ + + +

Siglas y abreviaturas

+ +

Mayúsculas y espacios

+ + + +

Expansión

+ + + + + +

Plurales

+ + + +

Números

+ +

Fechas

+ + + +

Cantidades

+ + + +

Esta regla tiene una excepción: en un documento que trate del lenguaje 'X', las cantidades deben expresarse del modo definido por ese lenguaje.

+ +

Usted, tú y yo

+ +

El tuteo

+ +

Este es un problema complejo, puede que no exista la solución perfecta a gusto de todos. Pero sería interesante ponernos de acuerdo.

+ +

Por lo pronto, hemos decidido usar el tú y evitar regionalismos en nuestras traducciones. Te invitamos a comentar tus opiniones en nuestra lista de correo. 

+ +

La 1ª persona

+ +

Salvo rarísimas excepciones, nunca debe usarse.

+ + + +

Otras guías de estilo recomendadas

+ +

Si tienes dudas sobre usos y estilos que no sean tratados en este documento, te recomendamos consultar:

+ + + +

Los traductores también deberían consultar Writer's guide para conocer el estilo usado en la edición inglesa.

+ +

Diccionarios recomendados

+ +

Si tienes dudas sobre gramática y ortografía, puedes visitar:

+ + diff --git a/files/es/mdn/index.html b/files/es/mdn/index.html new file mode 100644 index 0000000000..c4c038e69c --- /dev/null +++ b/files/es/mdn/index.html @@ -0,0 +1,37 @@ +--- +title: El proyecto MDN +slug: MDN +tags: + - Comunidad + - Landing + - MDN Meta +translation_of: MDN +--- +
{{MDNSidebar}}
+ +

El proyecto de documentación de la web de MDN (MDN web docs) es un wiki en el que se documenta la web abierta (estándares web), las tecnologías de Mozilla y otros temas de desarrollo. Todos tienen permiso de añadir y editar contenido. No necesitas ser un programador o saber mucho de tecnología; hay muchas actividades que necesitan llevarse a cabo, tanto simples (por ejemplo: Corregir ortografía, puntuación, etc.) como complejas (documentar las API).

+ +
+

La misión de MDN web docs es darle a los desarrolladores la información que necesitan para realizar proyectos en la plataforma web fácilmente. ¡Te invitamos a ayudar!

+
+ +

¡Necesitamos de tu ayuda! Es fácil, no te preocupes por pedir permiso o por cometer errores. Además, visita y conoce a la comunidad MDN; ¡estamos aquí para ayudarte! Los artículos indicados a continuación te ayudarán a empezar.

+ + + +

Vea también

+ + diff --git a/files/es/mdn/kuma/contributing/getting_started/index.html b/files/es/mdn/kuma/contributing/getting_started/index.html new file mode 100644 index 0000000000..44bedc5bdb --- /dev/null +++ b/files/es/mdn/kuma/contributing/getting_started/index.html @@ -0,0 +1,15 @@ +--- +title: Primeros pasos +slug: MDN/Kuma/Contributing/Getting_started +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}

Por favor, consulte los Documentos de Instalacion de Kuma en GitHub hasta que podamos redactar una mejor guía de "Primeros pasos".

+

Solución de problemas

+

A veces las cosas se ponen mal y la configuración de la prueba Kuma en el equipo deja de funcionar correctamente. Aquí ofrecemos algunas sugerencias sobre qué hacer para tratar de conseguir que funcione de nuevo.

+

Reprovision

+

La primera cosa a intentar es destruir y reconstruir su máquina virtual Kuma. Abra una terminal, pasar a la kuma directorio del proyecto y ejecute el siguiente comando:

+
vagrant destroy && vagrant provision
+

Si desea mantener la base de datos que ya tiene, asegúrese de hacer una copia de seguridad y restaurar después de reaprovisionamiento.

+

Vuelva a descargar la imagen de la VM

+

Si le preocupa que la imagen de VM es mala o no está actualizada, puede forzar el vagrant para descargar una nueva mediante el comando siguiente::

+
vagrant box remove kuma-ubuntu
diff --git a/files/es/mdn/kuma/contributing/index.html b/files/es/mdn/kuma/contributing/index.html new file mode 100644 index 0000000000..c920b5b5ab --- /dev/null +++ b/files/es/mdn/kuma/contributing/index.html @@ -0,0 +1,49 @@ +--- +title: Contribuir a Kuma +slug: MDN/Kuma/Contributing +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}

Si desea contribuir al proyecto de Kuma para ayudarnos a construir una gran plataforma wiki y para hacer que el sitio de Mozilla Developer Network aun mejor, los documentos aquí deberían ayudarle a unirse en el esfuerzo.

+
+
+

Contribuir a Kuma

+
+
+ Cómo empezar con Kuma
+
+ Cómo bifurcar Kuma desde Github y configurar el entorno de desarrollo.
+
+ Se busca ayuda
+
+ Tenemos un montón de fallos registrados en Kuma. Este artículo se enumeran algunos, nos encantaría ver colaboradores que ayudan con.
+
+

Herramientas y tareas

+
+
+ Errores
+
+ Una lista de errores Kuma; siéntase libre de mirar a través de ellos y encontrar algo que te gustaría para arreglar. Este enlace le exige que inicie sesión en Bugzilla.
+
+ Notificar un error
+
+ Si usted ha tenido un problema con Kuma, o tiene alguna idea para una manera de hacerlo mejor; usted puede presentar un error
+
+ Cambio de registro
+
+ Una lista de reciente de modificaciones impulsadas; este es un gran lugar para buscar, para ver lo que ha pasado recientemente.
+
+

 

+
+
+

MDN comunidad de desarrolladores

+

 Si desea hablar con nuestros desarrolladores, o incluso mejor, para ayudar a construir y mejorar la plataforma de Kuma, !únase a nuestra comunidad de desarrolladores!

+
    +
  • Únase a la conversación en el IRC: #mdndev
    • +
  • Lea el foro de desarrolladores MDN: {{DiscussionList("dev-mdn", "mozilla.dev.mdn")}}
    • +
+

Don't forget about the netiquette...

+
+
+

Ver todos ...

+
+  
diff --git a/files/es/mdn/kuma/index.html b/files/es/mdn/kuma/index.html new file mode 100644 index 0000000000..b7b0de4fd9 --- /dev/null +++ b/files/es/mdn/kuma/index.html @@ -0,0 +1,55 @@ +--- +title: Kuma +slug: MDN/Kuma +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}
+ +

Kuma es la plataforma wiki que impulsa Mozilla Developer Network. Es una plataforma open source escrita en Python usando el framework Django.

+ +
+
+

Documentación de Kuma

+ +
+
The Kuma API
+
Kuma provee una API simple que te permite acceder a la información sobre las páginas e incluso para poner nuevo contenido en las páginas.
+
Introducción a KumaScript:
+
...el lenguaje de plantillas de Kuma.
+
Usando KumaScript y las plantillas
+
Una guía de cómo usar las plantillas KumaScript en el contenido del artículo.
+
Referencia KumaScript
+
Una referencia a KumaScript.
+
Contribuyendo a Kuma
+
Una guía para forkear Kuma y contribuir al proyecto.
+
+ +

Artículos antiguos para clasificar:

+ + + +

Ver todos...

+
+ +
+

Herramientas y tareas

+ +
+
Bugs
+
Una lista de los bugs de Kuma. Sientase libre para buscar lo que quiera y lo que quieras arreglas! Este link requiere que entres en Bugzilla con su respectiva cuenta.
+
Reportar un bug
+
Si usted tiene un problema con Kuma, o tiene una idea para hacerlo mejor, ¡tú puedes reportar un bug!
+
Cambios
+
Una lista de los cambios recientes; este es un buen lugar para ver qué ha pasado recientemente.
+
¿Qué ha sido implementado?
+
Un tablero de estado de qué ha sido implementado al servidor de producción.
+
Kanban board
+
The Kanban board used for managing ongoing work on the Kuma project.
+
Server Monitoring
+
Some of our New Relic charts
+
+
+
diff --git a/files/es/mdn/structures/ejemplos_ejecutables/index.html b/files/es/mdn/structures/ejemplos_ejecutables/index.html new file mode 100644 index 0000000000..f5743b558e --- /dev/null +++ b/files/es/mdn/structures/ejemplos_ejecutables/index.html @@ -0,0 +1,243 @@ +--- +title: Ejemplos ejecutables +slug: MDN/Structures/Ejemplos_ejecutables +translation_of: MDN/Structures/Live_samples +--- +
{{MDNSidebar}}

MDN puede convertir ejemplos de código de los artículos a ejemplos ejecutables que el lector puede ver en acción. Estos ejemplos ejecutables pueden contener HTML, CSS, y JavaScript en cualquier combinación. Ten en cuenta que los ejemplos "ejecutables" no son interactivos; sin embargo, aseguran que el output coincida exactamente con el código de ejemplo, porque es generado por este.

+ +

Como funciona el sistema de ejemplos ejecutables

+ +

El sistema de ejemplos ejecutables agrupa el código, lo une en un archivo HTML, procesa el HTML y entonces despliega el output en un {{HTMLElement("iframe")}}. Por lo tanto un ejemplo ejecutable consiste de dos partes:

+ + + +

Un "grupo" de bloques de código, en este contexto, es identificado por el ID de un header o de un bloque de contenido (tal como un {{HTMLElement("div")}}).

+ + + +

La macro usa un URL especial para extraer el código de ejemplo: http://url-de-la-pagina$ejemplos/grupo-id, donde grupo-id es el ID del header o del bloque de contenido donde se localiza el código. El frame resultante (o página) es sandboxed (entorno de pruebas), seguro, y  técnicamente puede hacer cualquier cosa que funcione en la Web. Por supuesto, desde el punto de vista práctico, el código debe contribuir al tema de la página que lo contiene; cosas al azar ejecutándose en MDN serán removidas por la comunidad de editores.

+ +
+

Nota: Debes usar el macro para presentar el output del ejemplo ejecutable. El editor de MDN quitará cualquier uso directo del elemento <iframe> por motivos de seguridad.

+
+ +

Cada bloque {{HTMLElement("pre")}} que contiene código para el ejemplo tiene una clase que indica si es código HTML, CSS, o JavaScript; estas son "brush: html", "brush: css", y "brush: js". Las clases deben estar en los bloques de código correspondientes para que el wiki pueda usarlos correctamente; afortunadamente, son agregadas automáticamente cuando usas  la herramienta Syntax Highlighter de la barra de herramientas del editor.

+ +

El sistema de ejemplos ejecutables tiene muchas opciones disponibles, trataremos de ponerlas en terminos simples analizándolas de a poco.

+ +

Macro de ejemplos ejecutables

+ +

Hay dos macros que puedes usar para desplegar ejemplos ejecutables:

+ + + +

En muchos casos, tienes la posibilidad de agregar la macro EmbedLiveSample o la LiveSampleLink con ¡poco o nada de trabajo adicional! Mientras el ejemplo pueda ser identificado por un ID de un header o esté en un bloque de contenido con un ID que puedas usar, simplemente agregar la macro será suficiente.

+ +

Macro EmbedLiveSample

+ +
 \{{EmbedLiveSample(ID_del_bloque, longitud, altura, URL_de_captura_de_pantalla, pagina_slug)}}
+ +
+
ID_del_bloque
+
Requerido: El ID del header o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.
+
longitud
+
La longitud del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una longitud razonable se usará si omites esto. Ten en cuenta que si quieres usar una longitud específica, debes especificar el parámetro de altura también.
+
altura
+
La altura del {{HTMLElement("iframe")}} que se creará, especificada en px. Esto es opcional; una altura razonable se usará si omites esto. Ten en cuenta que si quieres usar una altura específica, debes especificar el parámetro de longitud también.
+
URL_de_captura_de_pantalla
+
La URL de una captura de pantalla que muestre como se debe ver el ejemplo ejecutable. Esto es opcional, pero puede ser útil para nuevas tecnologías que pueden no funcionar en el navegador del usuario, para que puedan ver como se vería el ejemplo si fuera soportado por su navegador. Si incluyes este parámetro, la captura de pantalla se muestra junto al ejemplo ejectutable, con encabezados apropiados.
+
pagina_slug
+
El slug (nombre con "_" reemplazando los espacios) de la página que contiene el ejemplo; esto es opcional, y si se omite, el ejemplo es extraido de la misma página donde se usa la macro.
+
+ +
    +
+ + + +
 \{{LiveSampleLink(ID_del_bloque, texto_del_enlace)}}
+ +
+
ID_del_bloque
+
Requerido: El ID del encabezado o del bloque de contenido de donde se tomará el código. La mejor forma de asegurarte que tienes el ID correcto es revisar el URL de la sección en la tabla de contenidos de la página.
+
texto_de_enlace
+
Una cadena de texto para mostrar en el enlace.
+
+ +

Usando el sistema de ejemplos ejecutables

+ +

La sección de abajo describe algunos de los casos de uso más comunes para el sistema de ejemplos ejecutables.

+ +

En todos estos casos, para ver los resultados del ejemplo ejecutable, debes hacer clic en Guardar Cambios en el editor (lo que te saca del modo edición). Debido a la reflexiba, naturaleza tipo Inception de los ejemplos ejecutables, la funcionalidad de Previsualizar Cambios no permite desplegar los ejemplos ejecutables.

+ +

Convirtiendo snippets (trozos de código) en ejemplos ejecutables

+ +

Un uso común es tomar snippets existentes que ya se muestran en MDN y convertirlos ejemplos ejecutables.

+ +

Preparar el código

+ +

El primer paso es agregar snippets o asegurarse que los existentes están listos para ser usados como ejemplos ejecutables, en términos de contenido y marcadores. Los snippets, juntos, deben comprender un ejemplo completo y ejecutable. Por ejemplo, si el snippet existente solo muestra CSS, debes agregar el snippet de HTML para que el CSS funcione.

+ +

Cada pieza de código debe estar en un bloque {{HTMLElement("pre")}}, con un bloque separado para cada lenguaje, propiamente marcado con el lenguaje correspondiente. La mayoría de las veces, esto ya se hizo, pero vale la pena volver revisar para asegurarse que cada pieza de código está estructurado con la sintaxis correcta. A la derecha del ícono PRE en la barra de tareas hay un menú desplegable (herramienta: Syntax Highlighter) con varios lenguajes para los que MDN hace distinción de sintaxis. Establecer el lenguaje para la distinción de sintaxis del bloque también lo correlaciona con un lenguaje para los propósitos del sistema de ejemplos ejecutables.

+ +
+

Nota: Puedes tener más de un bloque para cada lenguaje; todos son concatenados juntos. Esto te permite tener una parte de código, seguida de una explicación de como funciona, luego otra parte de código, etc. Esto hace aun más fácil producir tutoriales y utilizar ejemplo ejecutables intercalados con texto que los explique.

+
+ +

Así que asegurate que la distinción de sintaxis de los bloques {{HTMLElement("pre")}} para tu código HTML, CSS, y/o JavaScript estén cada uno configurado para el lenguaje correcto, y estarás bien.

+ +
+

Nota: Al pegar contenido en MDN, se conciente que si pegas contenido formateado (incluyendo, por ejemplo, distinción de sintaxis en código copeado de otro sitio) puedes estar trayendo formatos o clases que no quieres y no necesitas. Ten cuidado de no hacer esto; si es necesario, revisa tu edición en modo fuente y elimina estos formatos y clases innecesarios (o revísalo antes de pegarlo, o usa la opción "Pegar como texto plano").

+
+ +

Insertar la macro de ejemplo ejecutable

+ +

Una vez que el código está en su lugar y propiamente configurado para identificar cada bloque de lenguaje, necesitas insertar la macro que crea el frame.

+ +
    +
  1. Haz clic en el botón Insert Live Code Sample iFrame en la barra de herramientas; luce así: . Esto abre un cuadro de diálogo para configurar el frame de tu ejemplo ejecutable:                        
    2. +
  2. Bajo Document, ingresa el título del artículo que contiene el ejemplo que deseas desplegar. Por default, es el artículo que estás editando, pero puedes escoger un artículo en otra parte de MDN. Esto hace posible reusar ejemplos en múltiples páginas si es necesario. (Si escribes un texto nuevo en este campo, aparecerá un menú de coincidencias parciales; selecciona el título de la página que desees.)
    3. +
  3. En el menú Sections in Document, selecciona la sección en el artículo que contiene los bloques de código del ejemplo que quieres desplegar.
    4. +
  4. Haz clic en el botón OK para generar e insertar la macro que crea el frame del ejemplo. La macro luce algo así:
    + \{{ EmbedLiveSample('Live_sample_demo') }}
    5. +
+ +

Agregando un nuevo ejemplo ejecutable

+ +

Si estás escribiendo una página nueva, y quieres insertar código que deseas mostrar como ejemplo ejecutable, ¡aun más del trabajo puede ser realizado por el editor para ti!

+ +
    +
  1. Haz clic el botón Insert Code Sample Template en la barra de herramientas, luce así: . Esto presenta un simple cuadro de diálogo pidiéndote que nombres a tu ejemplo ejecutable:
    +
    2. +
  2. Ingresa el nombre del ejemplo; esto es usado como el header para el ejemplo. Asegúrate que tu título sea coherente con la pagína que escribes.
    3. +
  3. Haz clic en OK. Se creó un header nuevo con el título que elegiste, con sub-headers y bloques de código vacios para HTML, CSS y JavaScript.
    4. +
  4. Elimina cualquier sub-header y bloque de código que no necesites.
    5. +
  5. Ingresa el código que compone tu ejemplo en los bloques de código apropiados.
    6. +
  6. Revisar convenciones
    7. +
+ +

Usando el Buscador de Ejemplos

+ +

Como se mencionó arriba, el buscador de Ejemplos se activa haciendo clic en el ícono Insert Live Code Sample iFrame. Desafortunadamente el Buscador de Ejemplos puede producir un macro que NO es usable sin editarse antes. Hay dos áreas problemáticas que deben revisarse con cuidado y editarse si es necesario.

+ +
    +
  1. Campo Document. Este campo buscará mientras escribes y presentará una lista de documentos que encajan con tu búsqueda. Pero la lista presentada NO incluirá sub-páginas. Por ejemplo, digamos que estás trabajando en la sub-página Negative de la página principal @counter-style. El Buscador de Ejemplos no encontrará Negative pero si la página principal @counter-style. Cuando se selecciona @counter-style el fondo cambia a color verde. Lee debajo el problema que esto crea.
    2. +
  2. Sections in Document. El menú desplegable Sections in Document puede no mostrar la sección que necesitas. Selecciona cualquiera, digamos Examples, y puede arreglarse con una simple edición.
    3. +
+ +

Esto es lo que el Buscador de Ejemplos produce:

+ +
\{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/@counter-style') }}
+ +

Esta macro no funcionará. El ID_de_bloque es Examples y debería ser Example en este caso (revisa la fuente del ID de esta sección para verificar cual ID_de_bloque necesitas usar). Igualmente pagina_slug es @counter-style y debería ser @counter-style/negative. Estas correcciones puede hacerse directamente en la página activando la edición.

+ +

Después de editar la macro ahora luce así:

+ +
\{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/negative') }}
+ +

Esta macro editada funcionará correctamente. Si la macro funciona correctamente verás el botón Open in CodePen. Una miniatura del ejemplo deberá aparecer encima del botón Open in CodePen. Si el botón está ahí pero no hay miniatura, espera unos minutos. Puede tormar un tiempo para que el servidor la genere.

+ +

Encontrando ejemplos que necesitan actualización

+ +

Al buscar ejemplos existentes que actualizar, hay tres tipos principales de actualización que deseas hacer:

+ + + +
+

Nota: Si encuentras artículos que necesitan ser actualizados para usar el sistema de ejemplos ejecutables, por favor agrega a la página la etiqueta "NeedsLiveSample".

+
+ +

Encontrando ejemplos que necesitan convertirse a ejemplos ejecutables

+ +

MDN tiene montontes de ejemplos viejos que aun no usan el sistema de ejemplos ejecutables. Nuestra meta es actualizar la mayoría o todos para que sean ejemplos ejecutables.Esto aumentará la consistencia y la usabilidad. Es casi seguro que te encontrarás muchos de estos mientras usas MDN en el día a día; sin embargo, ¿cómo puedes encontrarlos si los buscas específicamente para actualizarlos? Desafortunadamente, no hay un modo fácil de hacer eso. Pero hay algunos consejos que te ayudarán a rastrearlos:

+ + + +

Demo de ejemplo ejecutable

+ +

Esta sección es el resultado de usar la plantilla de ejemplo ejecutable no solo para crear el encabezado principal ("Live sample demo"), sino los sub-encabezador para nuestro contenido HTML, CSS y JavaScript. No estás limitado a un bloque para cada uno; además, no necesitan estar en algún orden partícular. ¡Mix and match!

+ +

Puedes eliminar cualquiera de estos que desees; si no necesitas scripts, elimina el encabezado y su bloque {{HTMLElement("pre")}}. También puedes eliminar el encabezado de un bloque de código ("HTML", "CSS", o "JavaScript"), ya que estos no son usados por la macro de ejemplo ejecutable.

+ +

Ahora que se ha insertado la plantilla, podemos agregar algo de código, e incluso algún texto explicativo.

+ +

HTML

+ +

Este HTML crea un parágrafo y algunos bloques para ayudarnos a posicionar y formatear un mensaje.

+ +
<p>Un simple ejemplo de sistema de ejemplo ejecutable en accion.</p>
+<div class="box">
+  <div id="item">¡Hola mundo!</div>
+</div>
+
+ +

CSS

+ +

El código CSS formatea el contenedor así como el mensaje.

+ +
.box {
+  width: 200px;
+  height: 100 px;
+  border-radius: 6px;
+  background-color: #ffaabb;
+}
+
+#item {
+  width: 100%;
+  font-weight: bold;
+  text-align: center;
+  font-size: 2em;
+}
+
+ +

JavaScript

+ +

Este código es muy simple. Todo lo que hace es agregar un manejador de evento al texto "¡Hola mundo!" que hace aparecer una alerta cuando se le hace clic.

+ +
var el = document.getElementById('item');
+el.onclick = function() {
+  alert('¡Owww, deja de picarme!');
+}
+
+ +

Resultado

+ +

Aquí el resultado de ejecutar los bloques de código de arriba vía \{{EmbedLiveSample('Live_sample_demo')}}:

+ +

{{EmbedLiveSample('Live_sample_demo')}}

+ +

Aquí un enlace que resulta de llamar los bloques de código vía \{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}:

+ +

{{LiveSampleLink('Live_sample_demo', 'Live sample demo link')}}

+ +

Convenciones acerca de los ejemplos ejecutables

+ +
+

Nota: Esto es actual (Feb. 2016) en discusión en la lista de emails dev-mdc (ver this thread). Cualquier entrada es bienvenida. Si esta nota persiste después de unos meses (Apr. 2016), por favor contactar al autor del primer email en este hilo para actualizar esta página.

+
+ +
+
Orden de los bloques de código
+
Al agregar un ejemplo ejecutable, los bloques de código deben ser organizados para que el primero corresponda al lenguaje principal (si hay uno). Por ejemplo, al agregar un ejemplo ejecutable para una referencia HTML, el primer bloque debe ser HTML, al agregar un ejemplo ejecutable para una referencia CSS, debe ser el de CSS y así.
+
Nombrando los encabezados
+
Cuando no hay ambigüedad (p.ej. el ejemplo está bajo una sección "Ejemplos"), los encabezados deben ser directos con el único nombre del lenguaje correspondiente: HTML, CSS, JavaScript, SVG, etc. (ver arriba). No deben usarse encabezados como "contenido HTML" o "contenido JavaScript". Sin embargo si un encabezado tan corto hace que el contenido no sea claro, uno puede usar un título más elaborado.
+
Usando un bloque "Result"
+
Después de los diferentes bloques de código, favor de usar un último bloque "Result" antes de usar macro EmbedLiveSample (ver arriba). De este modo, se hace más clara la semántica del ejemplo tanto para el lector como para cualquier herramienta que analice la página (p.ej. screen reader, web crawler).
+
diff --git a/files/es/mdn/structures/index.html b/files/es/mdn/structures/index.html new file mode 100644 index 0000000000..b8df701dac --- /dev/null +++ b/files/es/mdn/structures/index.html @@ -0,0 +1,16 @@ +--- +title: Document structures +slug: MDN/Structures +tags: + - Landing + - MDN Meta + - NeedsTranslation + - Structures + - TopicStub +translation_of: MDN/Structures +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Throughout MDN, there are various document structures that are used repeatedly, to provide consistent presentation of information in MDN articles. Here are articles describing these structures, so that, as an MDN author, you can recognize, apply, and modify them as appropriate for documents you write, edit, or translate.

+ +

{{LandingPageListSubPages()}}

diff --git a/files/es/mdn/structures/macros/commonly-used_macros/index.html b/files/es/mdn/structures/macros/commonly-used_macros/index.html new file mode 100644 index 0000000000..18ebaff2af --- /dev/null +++ b/files/es/mdn/structures/macros/commonly-used_macros/index.html @@ -0,0 +1,210 @@ +--- +title: Macros usadas comunmente +slug: MDN/Structures/Macros/Commonly-used_macros +tags: + - CSS + - Estructuras + - Macros + - Referencia +translation_of: MDN/Structures/Macros/Commonly-used_macros +--- +

{{MDNSidebar}}

+ +

Esta página enumera muchas de las macros de propósito general creadas para usarlas en MDN. Para obtener información sobre cómo usar estas macros, consulta {{web.link("/es/docs/MDN/Contribute/Structures/Macros", "Uso de macros")}} y {{web.link("/es/docs/MDN/Contribute/Editor/Links#Usar_macros_de_enlaces", "Usar macros de enlaces")}}. Consulta {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Other", "Otras macros")}} para obtener información sobre las macros que se utilizan con poca frecuencia, que se utilizan solo en contextos especiales o, están en desuso. También hay una {{web.link("/es/dashboards/macros", "lista completa de todas las macros en MDN")}}.

+ +

Consulta también la {{web.link("/es/docs/MDN/Contribute/Guidelines/CSS_style_guide", "guía de estilo CSS")}} para conocer los estilos disponibles para usarlos.

+ +

Enlaces

+ +

Creando un solo hipervínculo

+ +

En general, no es necesario utilizar macros para crear enlaces arbitrarios. Utiliza el botón Enlace en la interfaz del editor para crear enlaces.

+ + + +

Enlace a páginas en referencias

+ +

Hay varias macros para vincular páginas en áreas de referencia específicas de MDN.

+ + + +

Enlazar a errores

+ + + +

Ayuda a la navegación para guías multipágina

+ +

{{TemplateLink("Previous")}}, {{TemplateLink("Next")}} y {{TemplateLink("PreviousNext")}} proporcionan controles de navegación para artículos que forman parte de secuencias. Para las plantillas unidireccionales, el único parámetro necesario es la ubicación wiki del artículo anterior o siguiente de la secuencia. Para {{TemplateLink("PreviousNext")}}, los dos parámetros necesarios son las ubicaciones wiki de los artículos correspondientes. El primer parámetro es para el artículo anterior y el segundo es para el artículo siguiente.

+ +

Ejemplos de código

+ +

Ejemplos en vivo

+ + + +

Generar la barra lateral

+ +

Hay plantillas para casi todas las grandes colecciones de páginas. Por lo general, enlazan a la página principal de reference/guide/tutorial (esto, a menudo es necesario porque nuestras rutas de navegación a veces no lo pueden hacer) y colocan el artículo en la categoría apropiada.

+ + + +

Formato de propósito general

+ +

Indicadores en línea para documentación de APIs

+ +

{{TemplateLink("optional_inline")}} y {{TemplateLink("ReadOnlyInline")}} se utilizan en la documentación de la API, normalmente cuando se describe la lista de propiedades de un objeto o parámetros de una función.

+ +

Uso: \{{Optional_Inline}} o \{{ReadOnlyInline}}. Ejemplo:

+ +
+
isCustomObject{{ReadOnlyInline}}
+
Indica, si es true, que el objeto es personalizado.
+
parameterX{{Optional_Inline}}
+
Blah blah blah...
+
+ +

Indicadores de estado y compatibilidad

+ +

Indicadores en línea sin parámetros adicionales

+ +

Non-standard

+ +

{{TemplateLink("Non-standard_Inline")}} inserta una marca en línea que indica que la API no se ha estandarizado y no está en un seguimiento de estándares.

+ +
Sintaxis
+ +

\{{Non-standard_Inline}}

+ +
Ejemplos
+ + + +

Experimental

+ +

{{TemplateLink("experimental_inline")}} inserta una marca en línea que indica que la API no está ampliamente implementada y puede cambiar en el futuro.

+ +
Sintaxis
+ +

\{{Experimental_Inline}}

+ +
Ejemplos
+ + + +

Indicadores en línea que apoyan la especificación de la tecnología

+ +

En estas macros, el parámetro (cuando se especifica) debe ser una de las cadenas "html", "js", "css" o "gecko", seguida del número de versión.

+ +

Desaprobado

+ +

{{TemplateLink("Deprecated_Inline")}} inserta una marca desaprobado en línea (Deprecated_Inline) para desalentar el uso de una API que oficialmente está en desuso. Nota: "Desaprobado" significa que el elemento ya no se debe utilizar, pero sigue funcionando. Si quieres decir que ya no funciona, utiliza el término "obsoleto".

+ +

No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).

+ +
Sintaxis
+ +

\{{Deprecated_Inline}} o \{{Deprecated_Inline("gecko5")}}

+ +
Ejemplos
+ + + +

Obsoleto

+ +

{{TemplateLink("Obsolete_Inline")}} inserta una marca de obsoleto en línea (Deprecated_Inline) para evitar el uso de, por ejemplo, una función, método o propiedad que oficialmente es obsoleto.

+ +

No utilices el parámetro en ningún área independiente del navegador (HTML, API, JS, CSS, …).

+ +
Sintaxis
+ +

\{{Obsolete_Inline}} u \{{Obsolete_Inline("js1.8.5")}}

+ +
Ejemplos
+ + + +

Plantilla de insignias

+ +

Estas macros se utilizan principalmente en la página {{web.link("/es/docs/Web/API", "WebAPI")}}. Consulta {{anch("Creación de nuevas insignias")}} para obtener información sobre cómo crear una nueva insignia (Badge).

+ +

Indicadores de encabezado de página o sección

+ +

Estas plantillas tienen la misma semántica que sus contrapartes en línea descritas anteriormente. Las plantillas se deben colocar directamente debajo del título de la página principal (o la ruta de navegación si está disponible) en la página de referencia. También se pueden utilizar para marcar una sección en una página.

+ + + +

Indica que una función está disponible en workers web

+ +

La macro {{TemplateLink("AvailableInWorkers")}} inserta un cuadro de nota localizado que indica que una función está disponible en el contexto de {{web.link("/es/docs/Web/API/Web_Workers_API", "workers web")}}.

+ +

{{AvailableInWorkers}}

diff --git a/files/es/mdn/structures/macros/index.html b/files/es/mdn/structures/macros/index.html new file mode 100644 index 0000000000..807059cfd9 --- /dev/null +++ b/files/es/mdn/structures/macros/index.html @@ -0,0 +1,53 @@ +--- +title: Macros +slug: MDN/Structures/Macros +tags: + - Estructuras + - Guide + - Guía + - Kuma + - KumaScript + - MDN Meta + - Structures + - TopicStub +translation_of: MDN/Structures/Macros +--- +
{{MDNSidebar}}
+ +

La plataforma {{web.link("/es/docs/Project:MDN/Kuma#Herramientas_y_tareas", "Kuma")}} en la que se ejecuta MDN proporciona un potente sistema de macros, {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "KumaScript")}}, estas te permiten hacer una amplia variedad de cosas de forma automática. Este artículo proporciona información sobre cómo invocar macros de MDN dentro de los artículos.

+ + + +

La {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "guía de KumaScript")}} profundiza en cómo usar macros en MDN, por lo que esta sección es más una breve descripción general.

+ +

Cómo se implementan las macros

+ +

Las macros en MDN se implementan usando código {{web.link("/es/docs/Web/JavaScript", "JavaScript")}} ejecutado por el servidor, interpretado usando Node.js. Además de eso, tenemos una serie de bibliotecas que hemos implementado que brindan servicios y funciones orientados a wiki para permitir que las macros interactúen con la plataforma wiki y su contenido. Si estás interesado en obtener más información, consulta {{web.link("/es/docs/MDN/Contribute/Tools/KumaScript", "Guía de KumaScript")}}.

+ +

Usar una macro en el contenido

+ +

Para usar realmente una macro, simplemente encierra la llamada a la macro entre un par de llaves dobles, con sus parámetros, si los hay, entre paréntesis; es decir:

+ +
\{{nombremacro(lista-de-parametros)}}
+ +

Algunas notas sobre las llamadas de macro:

+ + + +

Las macros están almacenadas en caché; para cualquier conjunto de valores de entrada (tanto parámetros como valores del entorno, tal como la URL para la que se ejecutó la macro), los resultados se almacenan y reutilizan. Esto significa que la macro solo se ejecuta realmente cuando cambian las entradas.

+ +
+

Nota: Puedes forzar la reevaluación de todas las macros de una página si fuerzas la actualización de la página en tu navegador (es decir, una recarga).

+
+ +

Las macros pueden ser tan simples como insertar un bloque de texto más grande o intercambiar contenido de otra parte de MDN, o tan complejas como crear un índice completo de contenido buscando en partes del sitio, estilizando el resultado y agregando enlaces.

+ +

Puedes leer sobre las macros más utilizadas en {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros", "Página de macros usadas comúnmente")}}; también, hay una {{web.link("/es/docs/templates", "lista completa de todas las macros")}}. La mayoría de las macros tienen documentación incorporada, como comentarios en la parte superior.

+ +

{{EditorGuideQuickLinks}}

diff --git a/files/es/mdn/structures/macros/otras/index.html b/files/es/mdn/structures/macros/otras/index.html new file mode 100644 index 0000000000..532bc07fdc --- /dev/null +++ b/files/es/mdn/structures/macros/otras/index.html @@ -0,0 +1,181 @@ +--- +title: Otras macros +slug: MDN/Structures/Macros/Otras +tags: + - Macros + - Referencia +translation_of: MDN/Structures/Macros/Other +--- +
{{MDNSidebar}}
+ +

A diferencia de las macros enumeradas en {{web.link("/es/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros", "Macros usadas comúnmente")}}, las macros documentadas en este artículo se usan con poca frecuencia o solo en contextos específicos, o están en desuso.

+ +

Contextos especiales

+ +

Estas macros se utilizan solo con contextos particulares, como una referencia de API específica.

+ + + +

Componentes de la página destino

+ +

Tenemos una variedad de macros que se pueden utilizar para generar automáticamente el contenido de las páginas destino. Aquí están.

+ +

Listas de subpáginas

+ + + +

Enlaces rápidos

+ +

Tenemos algunas macros diseñadas específicamente para crear {{web.link("/es/docs/MDN/Contribute/Style_guide/Quicklinks", "enlaces rápidos")}}:

+ + + +

Usadas con poca frecuencia

+ + + +

Transclusión

+ +

La transclusión es la incorporación de parte o la totalidad de una página en otra. Ten cuidado al utilizar esta macro, para asegurarte de que el contenido transcluido tenga sentido en el contexto de la página en la que está incorporado.

+ +

{{TemplateLink("page")}} te permite incrustar parte o la totalidad de una página específica en un documento. Acepta cinco parámetros:

+ +
    +
  1. La URI de la página que se va a transcluir. Por ejemplo, "/es/docs/Project:MDN/About".
    2. +
  2. El nombre de la sección dentro de la página que se va a incluir. Esto se puede especificar como la cadena de título o como el ID de un bloque a copiar. Si no se especifica, se transcluye todo el artículo. {{optional_inline}}
    3. +
  3. El número de revisión de la versión de la página que se va a incluir. Esta función no está implementada actualmente, pero permitiría incluir texto de versiones específicas de un artículo. {{unimplemented_inline}}
    4. +
  4. Un valor booleano que indica si se muestra o no el encabezado de la sección de nivel superior que se está transcluyendo. Esto es útil si deseas especificar tu propio título. El valor predeterminado es falso, lo cual significa que el encabezado no se incluye de forma predeterminada. {{optional_inline}}
    5. +
  5. El nivel de título que se utilizará como nivel de título superior. Esto ajusta el primer nivel descubierto más externo del contenido transcluido al número especificado, y todos los demás encabezados correspondientemente. Esto te permite incluir contenido que tiene sus propios títulos, pero ajustarlos para que coincidan con el nivel de título en el que los estás incluyendo. Si no especificas este valor, los títulos no se ajustan. {{unimplemented_inline}}
    6. +
+ +

Ejemplo sin título

+ +

\{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}

+ +

Resultado:

+ +

{{Page("/es/docs/MDN/About", "Acerca de Mozilla")}}

+ +

Ejemplo con encabezado

+ +

\{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}

+ +

Resultado:

+ +

{{Page("/es/docs/MDN/About", "Acerca de Mozilla", 0, 1)}}

+ +

Creando nuevas insignias

+ +

También tenemos insignias que no tienen iconos con burbujas. La plantilla genérica para esto es {{TemplateLink("SimpleBadge")}}, que acepta tres parámetros:

+ +
    +
  1. Texto para mostrar en la insignia.
    2. +
  2. Nombre de una clase CSS que se utilizará como fondo de la insignia.
    3. +
  3. (Opcional) Texto para mostrar en una información sobre herramientas al pasar el cursor sobre la insignia.
    4. +
+ +

Desaprobado

+ +

Estas macros han sido reemplazadas por otras formas de hacer lo mismo y ya no se deberían usar. Si los encuentras en artículos existentes, reemplázalos.

+ +

Enlaces

+ + + +

Ejemplos de código

+ +

Las siguientes macros se usaron antes de la implementación del {{web.link("/es/docs/MDN/Contribute/Structures/Live_samples", "sistema de ejemplo en vivo")}} integrado en Kuma, y se deben reemplazar por usos de {{TemplateLink("EmbedLiveSample")}} o {{TemplateLink("LiveSampleLink")}}.

+ + + +

Organizacional

+ + + +

Formateo

+ + + +

Indicadores de versión

+ +

Las siguientes macros están en desuso porque esta información debería estar contenida en el artículo de la tabla de compatibilidad de navegadores.

+ + diff --git a/files/es/mdn/structures/tablas_de_compatibilidad/index.html b/files/es/mdn/structures/tablas_de_compatibilidad/index.html new file mode 100644 index 0000000000..cd9a5097d2 --- /dev/null +++ b/files/es/mdn/structures/tablas_de_compatibilidad/index.html @@ -0,0 +1,476 @@ +--- +title: >- + Tablas de compatibilidad y repositorio de datos de compatibilidad del + navegador (DCN) +slug: MDN/Structures/Tablas_de_compatibilidad +tags: + - Estructuras + - Guía + - Meta MDN + - compatibilidad con el navegador + - tablas de compatibilidad +translation_of: MDN/Structures/Compatibility_tables +--- +
{{MDNSidebar}}
+ +

MDN tiene un formato estándar para tablas de compatibilidad para nuestra documentación web abierta; es decir, documentación de tecnologías como DOM, HTML, CSS, JavaScript, SVG, etc., que se comparte en todos los navegadores. Este artículo es una guía de "introducción" sobre cómo agregar y mantener la base de datos a partir de la cual se generan las tablas de compatibilidad, además de cómo integrar las tablas en artículos.

+ +

Para obtener documentación más avanzada, así como los últimos cambios en los procesos y los esquemas JSON utilizados para representar los datos, échale un vistazo al repositorio de datos de la guía para colaboradores, así como a la guía de directrices de datos.

+ +

Si tienes preguntas o descubres problemas, compártelos con nosotros en el foro de discusión de MDN.

+ +

Cómo acceder al repositorio de datos

+ +

Los datos se almacenan en un repositorio de GitHub; consulta https://github.com/mdn/browser-compat-data. Para acceder a él, necesitas tener una cuenta de GitHub, bifurcar el repositorio de compatibilidad de datos del navegador en tu propia cuenta y luego clonar tu bifurcación en tu máquina local.

+ +

Preparándose para agregar los datos

+ +

Antes de agregar algunos datos nuevos, te debes asegurar de que tu bifurcación esté actualizada con el repositorio principal (contiene el mismo contenido), crea una nueva rama dentro de tu bifurcación para contener tus adiciones, luego ingresa esa rama en tu clon local para que puedas empezar a trabajar dentro de ella:

+ +

Veamos la siguiente sencilla forma de asegurarte de que tu bifurcación esté actualizada:

+ +

Agregar el repositorio principal de datos de compatibilidad del navegador como remoto

+ +

Ve al clon local de tu bifurcación en tu terminal/línea de comandos, y agrega un control remoto que apunte al repositorio principal (upstream) de esa manera (solo necesitas hacer esto una vez):

+ +
git remote add upstream https://github.com/mdn/browser-compat-data.git
+ +

Si no estás seguro de haber hecho esto, puedes verificar qué controles remotos tiene tu repositorio usando

+ +
git remote -v
+ +

Actualiza tu bifurcación con el contenido del remoto

+ +

Ahora, siempre que desees actualizar tu bifurcación, lo puedes hacer mediante:

+ +
    +
  1. +

    Asegúrate de que estas en la rama master:

    + + 
    git checkout master
    +
    2. +
  2. +

    obtén el contenido actualizado del repositorio utilizando lo siguiente:

    + + 
    git fetch upstream
    +
    3. +
  3. +

    rebasa el contenido de tu master con el contenido del repositorio principal:

    + + 
    git rebase upstream/master
    +
    4. +
  4. +

    empuja estas actualizaciones a tu bifurcación remota usando lo siguiente:

    + + 
    git push
    +
    5. +
+ +

Crea una nueva rama para hacer tu trabajo

+ +

A continuación, ve a tu bifurcación remota (estará en https://github.com/tu-nombre-de-usuario/browser-compat-data) y crea una nueva rama para almacenar tus cambios para esta adición de datos. Esto lo puedes hacer mediante:

+ +
    +
  1. Un clic en el botón "Rama: Master".
    2. +
  2. Ingresa un nuevo nombre para la rama en el campo de texto "Buscar o crear una rama...".
    3. +
  3. Presiona el botón resultante "Crear rama nombre-de-rama desde Master".
    4. +
+ +

Por ejemplo, si quisieras agregar datos para la API WebVR, crearías una rama llamada algo así como "webvr".

+ +

Cambia a la nueva rama

+ +

En este punto, regresa a tu terminal/línea de comando y actualiza el clon local de tu bifurcación para incluir tu nueva rama usando el siguiente comando:

+ +
git pull
+ +

Ahora cambia a tu nueva rama usando esto:

+ +
git checkout nombre-de-rama
+ +

¡Ahora debería estar listo para comenzar a agregar tus datos!

+ +

Añadir los datos

+ +

Para agregar los datos, debes crear un nuevo archivo o archivos para almacenar tus datos de compatibilidad. Los archivos que necesitas crear difieren, según la tecnología en la que estés trabajando:

+ + + +

Cada archivo que crees debe seguir el patrón definido en el esquema contenido en nuestro repositorio; puedes ver la descripción detallada del esquema aquí.

+ +

Estructura básica de datos de compatibilidad

+ +

Veamos un ejemplo. Los archivos JSON de propiedades CSS, por ejemplo, necesitan la siguiente estructura básica:

+ +
{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}
+ +

Tienes el objeto css, dentro del cual hay un objeto properties. Dentro del objeto properties, necesitas un miembro para cada una de las características específicas para las que deseas definir los datos de compatibilidad. Cada uno de estos miembros tiene un miembro __compat, dentro del cual van los datos reales.

+ +

Los datos anteriores se encuentran en el archivo: border-width.json compáralo con la tabla de soporte de border-width representada en MDN.

+ +

Otros tipos de características funcionan de la misma manera, pero con diferentes nombres de objeto:

+ + + +
+

En páginas HTML, CSS y JS, normalmente solo necesitarás una función. Las interfaces de API funcionan de forma ligeramente diferente — siempre tienen varias subcaracterísticas (consulta {{anch("Sub-features", "Subcaracterísticas")}}, a continuación).

+ +

Estructura básica dentro de una característica

+ +

Dentro de un miembro de función __compat, debes incluir los siguientes miembros:

+ + + +

Los nombres de los miembros del navegador se definen en el esquema (consulta identificadores del navegador). Debes utilizar la lista completa de identificadores definidos actualmente. Si deseas agregar otro navegador, habla con nosotros primero, ya que esto podría tener un impacto de gran alcance y no se debe hacer sin pensarlo detenidamente.

+ +

En un archivo de datos de compatibilidad del navegador básico, solo necesitarás incluir "version_added" dentro de los miembros del identificador del navegador (cubriremos {{anch("Advanced cases", "Casos avanzados")}} más adelante). Los diferentes valores que posiblemente quieras incluir son los siguientes:

+ + + +

Dentro del miembro status, incluirás tres submiembros:

+ + + +

Los datos de características de border-width (consulta también border-width.json) se muestra a continuación como ejemplo:

+ +
"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}
+ +

Agrega una descripción

+ +

Hay un cuarto miembro, opcional, que puede ir dentro del miembro __compat — description. Este se puede utilizar para incluir una descripción legible por humanos de la característica. Únicamente lo debes incluir si es difícil ver cuál es la característica al mirar los datos. Por ejemplo, puede que no sea tan obvio lo que es un constructor al mirar la estructura de datos, por lo que puedes incluir una descripción como esta:

+ +
{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "<code>AbortController()</code> constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}
+ +

Subcaracterísticas

+ +

En una página donde la tabla de compatibilidad tiene más de una fila, necesitarás varias subcaracterísticas dentro de cada característica para definir la información de cada fila. Esto puede suceder, por ejemplo, cuando tienes el soporte básico para una característica almacenada en una fila, pero luego la característica también tiene una nueva propiedad o tipo de valor que se agregó mucho más tarde en la vida de la especificación y solo se admite en una par de navegadores.

+ +

Como ejemplo, consulta los datos de compatibilidad y la página MDN correspondiente para la propiedad background-color. El soporte básico existe dentro del objeto __compat como se explicó anteriormente, luego tienes una fila adicional para el soporte de los navegadores para "canal alfa para valores hexadecimales", que contiene tu propio objeto __compat.

+ +
{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}
+ +

Para una API, tienes los dos niveles superiores definidos como api.nombre-de-la-interfaz, luego un __compat de nivel superior para definir la compatibilidad general del navegador de la interfaz, luego una subfunción para cada uno de los métodos, propiedades y constructores contenidos dentro de la interfaz. La estructura básica se ve así:

+ +
{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}
+ +

Consulta VRDisplay.json para ver un ejemplo completo.

+
+ +

Agregar datos: casos avanzados

+ +

Hay algunas características avanzadas que querrás incluir en los datos de compatibilidad del navegador. El objetivo de esta sección es enumerar los más comunes, proporcionando un ejemplo de cada uno para mostrar cómo los puedes implementar en tus propios datos de compatibilidad.

+ +

Incluyendo una nota a pie de página

+ +

A menudo, las tablas de compatibilidad incluirán notas a pie de página relacionadas con ciertas entradas que explican detalles útiles o comportamientos extraños que los desarrolladores encontrarán útiles. Como ejemplo, la entrada de Chrome para Android para {{domxref("VRDisplay.capabilities")}} (consulta también VRDisplay.json) (en el momento de escribir este artículo) tenía una nota al pie de página "Actualmente solo es compatible con Google Daydream". Para incluir esto en los datos de capacidades, agregamos un submiembro "notes" dentro del submiembro "chrome_android" relevante; se vería así:

+ +
"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}
+ +

Incluyendo un prefijo de proveedor

+ +

Si una característica es compatible con un prefijo de proveedor en uno o más navegadores, querrás dejarlo en claro en los datos de compatibilidad del navegador. imagina que tienes una característica que es compatible con un prefijo -moz- en Firefox. Para especificar esto en los datos de compatibilidad, debes agregar un submiembro "prefix" dentro del submiembro "firefox" relevante. Y se vería así:

+ +
"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}
+ +

Incluyendo preferencias o banderas del navegador

+ +

Algunas características pueden ser compatibles con un navegador, pero son experimentales y están desactivadas de forma predeterminada. Si un usuario quiere jugar con esta característica, debe activarla usando una preferencia/bandera.

+ +

Para representar esto en los datos de compatibilidad, debes agregar el submiembro "flags" dentro del submiembro del identificador del navegador relevante. El valor de "flags" es un arreglo de objetos, cada uno de los cuales contiene tres miembros:

+ + + +

Entonces, para agregar una preferencia/bandera al soporte de Chrome para una característica, harías algo como esto:

+ +
"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Si una característica está detrás de dos o más banderas, puedes agregar objetos adicionales al arreglo "flags", como en este caso, por ejemplo:

+ +
"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Incluyendo una versión donde se eliminó el soporte

+ +

A veces, una característica se agregará en una determinada versión del navegador, pero luego se eliminará nuevamente cuando la característica esté obsoleta. Esto se puede representar fácilmente usando el submiembro "version_removed", que toma como valor una cadena que representa el número de versión en el que se eliminó. Por ejemplo:

+ +
"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},
+ +

Incluyendo múltiples puntos de soporte para la misma entrada del navegador

+ +

A veces, querrás agregar varios puntos de datos de soporte para el mismo navegador dentro de la misma característica.

+ +

Como ejemplo, la propiedad {{cssxref("text-align-last")}} (ve también text-align-last.json) se agregó a Chrome en la versión 35, compatible con una pref.

+ +

El soporte mencionado anteriormente se eliminó en la versión 47; también en la versión 47, se agregó soporte para text-align-last habilitado de manera predeterminada.

+ +

Para incluir estos dos puntos de datos, puedes hacer que el valor del submiembro "chrome" sea un arreglo que contenga dos objetos de información de soporte, en lugar de un solo objeto de información de soporte:

+ +
"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],
+ +
+

Nota Debes colocar el punto de soporte más actual o importante primero en el arreglo — esto hace que los datos sean más fáciles de leer para las personas que solo desean escanearlos para obtener la información más reciente.

+
+ +

Incluyendo un nombre alternativo

+ +

Ocasionalmente, los navegadores admitirán una característica con un nombre diferente al definido en su especificación. Esto se podría deber, por ejemplo, a que un navegador agregó soporte experimental para una característica antes, y luego el nombre cambió antes de que se estabilizara la especificación.

+ +

Para incluir un caso de este tipo en los datos de compatibilidad del navegador, puedes incluir un punto de información de soporte que especifique el nombre alternativo dentro de un miembro "alternative_name".

+ +
+

Nota Es posible que el nombre alternativo no sea un alias exacto — posiblemente tenga un comportamiento diferente al de la versión estándar.

+
+ +

Veamos un ejemplo. La propiedad {{cssxref("border-top-right-radius")}} (consulta también border-top-right-radius.json) era compatible con Firefox:

+ + + +

Para representar esto en los datos, usamos el siguiente JSON:

+ +
"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Antes de Firefox 50.0, los estilos de borde de las esquinas redondeadas siempre se representaban como si border-style fuera sólido. Esto se ha solucionado en Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "De Firefox 44 a 48, el prefijo -webkit- estaba disponible con la preferencia layout.css.prefixes.webkit. A partir de Firefox 49, la preferencia predeterminada es <code>true</code>."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],
+ +

Empujar un cambio de nuevo al repositorio principal

+ +

Una vez que hayas terminado de agregar tus datos de compatibilidad, primero debes probarlos usando los siguientes comandos:

+ + + +

Si se ve bien, debes confirmarlo y volver a colocarlo en tu bifurcación remota en GitHub. Lo puedes hacer fácilmente en tu terminal con comandos como estos:

+ +
git add .
+git commit -m 'adding compat data for nombre-de-la-característica'
+git push
+ +

Ahora ve a tu bifurcación remota (es decir, https://github.com/tu-nombre-de-usuario/browser-compat-data) y deberías ver información sobre tu inserción en la parte superior de la lista de archivos (debajo de "Tus ramas enviadas recientemente"). Puedes crear una solicitud de extracción (iniciando el proceso de enviarla al repositorio principal) presionando el botón "Comparar y solicitud de extracción" y luego siguiendo las sencillas instrucciones en la siguiente pantalla.

+ +

En este punto, solo tienes que esperar. Un revisor examinará tu solicitud de extracción y la fusionará con el repositorio principal, O solicitará que realices cambios. Si se necesitan cambios, realiza los cambios y envíalos nuevamente hasta que se acepte la SE.

+ +

Insertar los datos en páginas MDN

+ +

Una vez que tus nuevos datos se hayan incluido en el repositorio principal, puedes comenzar a generar dinámicamente tablas de compatibilidad del navegador basadas en esos datos en las páginas MDN usando la macro {{TemplateLink("Compat")}}. Esta toma un solo parámetro, la notación de puntos requerida para recorrer los datos JSON y encontrar el objeto que representa la característica para la que deseas generar la tabla de compatibilidad.

+ +

Por encima de la llamada a la macro, para ayudar a otros colaboradores a encontrar su camino, debes agregar un texto oculto que solo sea visible a los colaboradores de MDN en el modo de edición:

+ +
<div class="hidden">
+La tabla de compatibilidad de esta página se genera a partir de datos estructurados.
+Si deseas contribuir con los datos, consulta
+<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
+y envíanos una solicitud de extracción.
+</div>
+ +

Por ejemplo, en la página de encabezado HTTP {{HTTPHeader("Accept-Charset")}}, la llamada a la macro se ve así: \{{Compat("http.headers.Accept-Charset")}}. Si observas el accept-charset.json en el repositorio, verás cómo esto se refleja en los datos JSON.

+ +

Otro ejemplo, la tabla de compatibilidad para la propiedad {{domxref("VRDisplay.capabilities")}} se genera usando \{{Compat("api.VRDisplay.capabilities")}}. La llamada a la macro genera la siguiente tabla (y el correspondiente conjunto de notas):

+ +
+ + +

{{Compat("api.VRDisplay.capabilities")}}

+ +
+

Nota Los nombres de archivo a menudo coinciden con las etiquetas dadas a las interfaces dentro de las estructuras JSON, pero no siempre es así. Cuando las llamadas a macro generan las tablas, recorren todos los archivos hasta encontrar el JSON relevante para usar, por lo que los nombres de archivo no son críticos. Dicho esto, siempre debes nombrarlos de la manera más intuitiva posible.

+
diff --git a/files/es/mdn/tools/index.html b/files/es/mdn/tools/index.html new file mode 100644 index 0000000000..eff61261b7 --- /dev/null +++ b/files/es/mdn/tools/index.html @@ -0,0 +1,45 @@ +--- +title: Herramientas de MDN y Utilidades +slug: MDN/Tools +tags: + - Documentacion(2) + - Documentación + - MDN + - Proyecto MDC +translation_of: MDN/Tools +--- +
{{MDNSidebar}}

MDN ofrece un número de características que hacen fácil seguir el progreso, gestionar el contenido y mantenerte al tanto de los últimos cambios al sitio.

+
+
+

Documentación sobre las herramientas de MDN

+
+
+ Panel de Revisiones
+
+ El Panel de Revisión te permite opinar sobre los artículos recientemente cambiados en MDN; el panel también ofrece un número de herramientas de filtrado útlies que te dejan personalizar la pantalla para satisfacer tus necesidades como revisor de contenido.
+
+ Panel de Localización
+
+ El Panel de Localización permite a los equipos de localización coordinar, gestionar su proyecto de localización, y traducir documentación eficientemente. Su función principal es la de ayudar a los equipos de localización a averiguar qué contenido necesita traducirse y qué artículos necesitan atención lo más pronto posible. Esta característica no está terminada aún, pero puedes seguir el desarrollo en {{bug(834317)}}.
+
+ Fuentes RSS
+
+ MDN proporciona un número de fuentes RSS que puedes seguir para estar al día de los cambios hechos en la página, ver listas de artículos que necesitan revisión y así sucesivamente.
+
+ La API Kuma
+
+ Kuma, la plataforma wiki que fortalece MDN, ofrece una API fácil de usar que te permite automatizar tareas de recopilación de información sobre artículos para publicar otros nuevos en la wiki. Aprende más sobre esta API en este artículo.
+
+

Ver todo...

+
+
+

Herramientas MDN

+

Estos son enlaces directos a herramientas útiles MDN.

+ +
+
+

 

diff --git a/files/es/mdn/tools/introduction_to_kumascript/index.html b/files/es/mdn/tools/introduction_to_kumascript/index.html new file mode 100644 index 0000000000..ed060eecd8 --- /dev/null +++ b/files/es/mdn/tools/introduction_to_kumascript/index.html @@ -0,0 +1,683 @@ +--- +title: Introducción a KumaScript +slug: MDN/Tools/Introduction_to_KumaScript +translation_of: MDN/Tools/KumaScript +--- +
{{MDNSidebar}}
+ +
{{draft}}
+ +

Vistazo general

+ +

En el verano de 2012, MDN  cambió a una nueva plataforma wiki llamada Kuma. Esta reemplaza el lenguaje de plantilla DekiScript con un nuevo sistema llamado KumaScript. KumaScript se alimenta de JavaScript del lado del servidor, usando Node.js. Este artículo provee informaciónde cómo usar KumaScript y cómo actualizar scripts migrados parcialmente desde MindTouch.

+ +

Para detalles y preguntas frecuentes sobre KumaScript, mira el KumaScript Fireside Chat del equipo de desarrolladores MDN.

+ +

¿Qué es KumaScript?

+ + + +

¿Qué no es KumaScript?

+ + + +

Aspectos básicos

+ +

KumaScript funciona permitiendo a wiki de confianza escribir plantillas JavaScript ensambladas. Estas plantillas pueden ser invocadas en el contenido del documento por cualquier editor wiki mediante el uso de macros.

+ + + + + + + + + + + + + + +
+

Una plantilla se vé así:

+ 		+

Una macro se vé así:

+ 		+

El resultado de una macro sale así:

+
+ 
+<% for (var i = 0; i < $0; i++) { %>
+Hello #<%= i %>
+<% } %>
+ 		+ 
+\{{ hello("3") }}
+
+ 		+ 
+Hello #0
+Hello #1
+Hello #2
+
+ +

Sintaxis de una macro

+ +

Las plantillas KumaScript se invocan en el contenido del documento con macros, como esta:

+ +
\{{ templateName("arg0", "arg1", ..., "argN") }}
+
+ +

La sintaxis de una Macro se compone de estas reglas:

+ + + +

Usando JSON parámetro de macro

+ +

Hay una característica semi-experimental disponible para las macros. Puedes proveerlas de un objeto JSON como primero y único parámetro, así:

+ +
\{{ templateName({ "Alpha":"one", "Beta":["a","b","c"], "Foo":"http:\/\/mozilla.org\/" }) }}
+
+ +

Los datos de esta macro estarán disponibles en un código de plantilla como un objeto en el argumento $0 (por ejemplo, $0.Alpha, $0.Beta, $0.Foo). Esto también te permite expresar estructuras de datos complejos en los parámetros de macro que son difíciles o imposibles de hacer con una simple lista de parámetros.

+ +

Nota que el estilo de este parámetro es muy complejo. Se debe adherir exactamente a la sintaxis JSON, que tiene algunas exigencias escurridizas que son fáciles de pasar por alto (por ejemplo, todas las barras (/) llevan escapes). Cuando haya dudas, intenta ejecutar tu JSON con un validador.

+ +

Cómo escribir "\{{"

+ +

Como la secuencia de caracteres "\{{" se usa para indicar el comienzo de una macro, puede ser un problema si justo quieres usar "\{{" and "}}" como texto de una página. Probablemente dará un mensaje de error DocumentParsingError.

+ +

En este caso, puedes escapar la primer llave con una barra invertida, así: \\{

+ +

Sintaxis de la plantilla

+ +

Las plantillas KumaScript son procesadas por un motor de plantillas JavaScript ensamblado con estas simples reglas:

+ + + +

Características avanzadas

+ +

Más allá de los aspectos básicos, el sistema KumaScript ofrece algunas características avanzadas.

+ +

Variables de entorno

+ +

Cuando la wiki hace una llamada al servicio KumaScript, pasa por una part del contexto del documento actual que KumaScript pone a disposición de las plantillas como variables:

+ +
+
env.path
+
La ruta del documento wiki actual
+
env.url
+
La URL completa del documento wiki actual
+
env.id
+
Un ID único corto para el documento wiki actual
+
env.files
+
Un arreglo de archivos adjuntos para el documento wiki actual. Cada objeto en el arreglo se describe como {{ anch("File objects") }} debajo
+
env.review_tags
+
Un arreglo con las etiquetas de revisión del artículo ("technical", "editorial", etc.)
+
env.locale
+
El sitio del documento wiki actual
+
env.title
+
El título del documento wiki actual
+
env.slug
+
Una URL amigable del documento wiki actual
+
env.tags
+
Una lista de nombers de etiquetas para el documento wiki actual
+
env.modified
+
El último timestamp modificado para el documento wiki actual
+
env.cache_control
+
El encabezado Cache-Control henviado en la solicitud para el documento wiki actual, útil para decidir si invalidar los caches
+
+ +

Objetos de archivos

+ +

Cada objeto de archivo tiene los siguientes campos:

+ +
+
title
+
El título del archivo adjunto
+
description
+
Una descripción textual de la revisión actual del archivo
+
filename
+
El nombre del archivo
+
size
+
El tamaños del archivo en bytes
+
author
+
El nombre de usuario de la persona que subió el archivo
+
mime
+
El tipo MIME del archivo
+
url
+
La URL en la que se puede encontrar el archivo
+
+ +

Trabajando con listas

+ +

Las variables env.tags y env.review_tags devuelven colecciones de etiqutas. Puedes trabajar con estas de varias maneras, por supuesto, pero aquí se dan un par de sugerencias.

+ +
Buscar si se colocó una etiqueta específica
+ +

Se puede buscar si una etiqueta específica existe en una página, así:

+ +
if (env.tags.indexOf("tag") != −1) {
+  // The page has the tag "tag"
+}
+
+ +
Iterar (recorrer) todas las etiquetas de la página
+ +

Se pueden recorrer todas las etiquetas de la página, así:

+ +
env.tag.forEach(function(tag) {
+  // haz cualquier cosa que necesites, tal como:
+  if (tag.indexOf("a") == 0) {
+    // esta etiqueta empieza con "a" - woohoo!
+  }
+});
+ +

APIs y Módulos

+ +

KumaScript ofrece algunas APIs de utilidad incorporadas, como también la capacidad para definir nuevas APIs en módulos editables como documentos wiki.

+ +

Métodos incorporados

+ +

Es probable que esta documentación mantenida manualmente quede desactualizada con respecto al código. Teniendo en cuanta eso, siempre puedes verificar el último estado de las APIs incorporadas en la fuente de KumaScript. Pero hay una selección de métodos útiles expuestos a plantillas:

+ +
+
md5(string)
+
Devuelve un resumen de hexadecimal MD5 de determinada cadena.
+
template("name", ["arg0", "arg1", ..., "argN"])
+
Ejecuta y devuelve el resultado de las plantillas mencionadas con la lista de parámetros provistos.
+
Utilizado en plantillas así: <%- template("warning", ["foo", "bar", "baz"]) %>.
+
Esta es una función JavaScript. Así que, si uno de los parámetroses una variable arg como $2, no lo pongas entre comillas. Así: <%- template("warning", [$1, $2, "baz"]) %>. Si necesitas llamar otra plantilla desde el interior de un bloque e código, no uses <% ... %>. Ejemplo: myvar = "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";
+
require(name)
+
Carga otra plantilla como un módulo. Cualquier resultadu es ignorado. Devuelce cualquier cosa asignada a module.exports en la plantilla.
+
Utilizado en plantillas así: <% var my_module = require('MyModule'); %>.
+
cacheFn(key, timeout, function_to_cache)
+
Usando la key y duración de entrada de caché proporcionadas, cachea los resultados de la función proporcionada. Prioriza el valor de env.cache_control para invalidar el cache en no-cache, que puede ser enviado por un usuario logueado  que tipee shift-refresh.
+
request
+
Acceso al mikeal/request, una librería para hacer consultas HTTP. Usar este módulo en las plantillas KumaScriptno es muy amigable, así que quizá desees envolver uso en APIs de módulo que simplifiquen las cosas.
+
+ +

Módulos de API incorporados

+ +

Sólo hay una API incorporada por el momento, en el espacio de nombres kuma:

+ +
+
kuma.htmlEscape(string)
+
Escapa los caracteres &, <, >, " a &amp, &lt;, &gt;, &quot;, respectivamente.
+
 
+
kuma.include(path)
+
Incluye contenido de la página en la ruta proporcionada. Cacheo pesado.
+
+ +
+
kuma.pageExists(path)
+
Indica si existe la página en la ruta proporcionada. Cacheo pesado.
+
+ +

Creando módulos

+ +

Usando el mátodo incorporado require(), puedes cargar una plantilla como módulo para compartir variables y métodos comunes entre plantillas. Un módulo puede definirse como una plantilla de la siguiente manera:

+ +
<%
+module.exports = {
+    add: function (a, b) {
+        return a + b;
+    }
+}
+%>
+
+ +

Asumiendo que esta plantilla está guardada como /en-US/docs/Template:MathLib, puedes utilizarla en otra plantilla, así:

+ +
<%
+var math_lib = require("MathLib");
+%>
+El resultado de 2 + 2 = <%= math_lib.add(2, 2) %>
+
+ +

Y, el resultado de esta plantilla será:

+ +
el resultado de 2 + 2 = 4
+
+ +

Módulos cargados automáticamente

+ +

Hay un grupo de módulos editables como plantillas wiki que se cargan automáticamente y quedan disponibles para cada plantilla. Este grupo está definido en el archivo de configuración para el servicio KumaScript. Cualquier cambio a este requiere un bug IT para editar la configuración y el reinicio del servicio.

+ +

Para la mayor parte, estos intentos de proveer sustitutos para stand-ins for legacy DekiScript features to ease template migration. But, going forward, these can be used to share common variables and methods between templates:

+ + + +

The best way to see the current state and offerings of these modules is to take a look at their source directly.

+ +

Note: You might notice that the DekiScript modules use a built-in method named buildAPI(), like so:

+ +
<% module.exports = buildAPI({
+    StartsWith: function (str, sub_str) {
+        return (''+str).indexOf(sub_str) === 0;
+    }
+}); %>
+
+ +

The reason for this is because DekiScript is case-insensitive when it comes to references to API methods, whereas JavaScript is strict about uppercase and lowercase in references. So, buildAPI() is a hack to try to cover common case variations in DekiScript calls found in legacy templates.

+ +

With that in mind, please do not use buildAPI() in new modules.

+ +

Tips and caveats

+ +

Debugging

+ +

A useful tip when debugging. You can use the log.debug() method to output text to the scripting messages area at the top of the page that's running your template. Note that you need to be really sure to remove these when you're done debugging, as they're visible to all users! To use it, just do something like this:

+ +
<%- log.debug("Some text goes here"); %>
+
+ +

You can, of course, create more complex output using script code if it's helpful.

+ +

Limitations of content migration from MindTouch

+ +

When we make the move to Kuma, we will migrate content from the old MindTouch-based wiki to the new Kuma-based one. This script will do some basic work to attempt to convert scripts. But, there are many common code patterns that migration can't fix.

+ +

So, this means that we'll need human intervention to carry template scripts over the rest of the way to being functional.

+ +

To find templates in need of review and repair, check here: /en...eview/template.

+ +

To find examples of templates that have already been repaired, check here: /en...s/tag/ks-fixed.

+ +

Check the template usage stats bug file attachments to help prioritize templates to fix. If you know your way around gzip and grep, this attachment (a 1.5MB tab-delimited file listing template/document pairs) can help tell you what templates are used on which pages.

+ +

As you repair templates, please uncheck the "Template" review checkbox and add the tag "ks-fixed", which will keep the above lists accurate.

+ +

You can also find templates in need of repair by simply browsing through wiki content and spotting where content looks garbled with code or otherwise incorrect. Editing the page should show you the name of a macro that's in need of help. You may also see scripting errors on pages, which should offer editing links to the templates causing issues.

+ +

Keyword Shortcut for quick template editing

+ +

If you spend time editing a lot of KumaScript templates (e.g., to fix partly-migrated legacy DekiScript templates), you may find this keyword shortcut bookmark handy:

+ + + + + + + + + + + + + + + + +
Nameedit mdn template
Location/en...mplate:%s$edit
Keywordte
+ +

Armed with this bookmarklet, you can copy the name of a template, open a new tab, and type "te [Ctrl-V][Return]" to start editing the template. This helps when a template is misbehaving, yet not badly enough to cause a scripting error message.

+ +

Changing Locale Identifiers

+ +

The identifiers for various locales have changed from MindTouch to Kuma:

+ + + +

This list should not change in the future, assuming we've not missed any. These locale identifier changes become significant in legacy DekiWIki templates.

+ +

URL pattern changes

+ +

The URL pattern for all wiki documents has changed:

+ + + +

So, for example:

+ + + +

To avoid breaking links, there is an attempt to automatically redirect requests to the legacy-style URLs to new-style URLs. But, efforts should be made to change links to the new-style URLs whenever possible.

+ +

Differences from DekiScript

+ +

It's useful to note a few changes from templates in DekiScript, in case you encounter these in migrated content:

+ + + +

Caching

+ +

KumaScript templates are heavily cached to improve performance. For the most part, this works great to serve up content that doesn't change very often. But, as a logged in user, you have two options to force a page to be regenerated, in case you notice issues with scripting:

+ + + +

Cookbook

+ +

This section will list examples of common patterns for templates used on MDN, including samples of legacy DekiScript templates and their new KumaScript equivalents.

+ +

Force templates used on a page to be reloaded

+ +

It bears repeating: To force templates used on a page to be reloaded after editing, hit Shift-Reload. Just using Reload by itself will cause the page contents to be regenerated, but using cached templates and included content. A Shift-Reload is necessary to invalidate caches beyond just the content of the page itself.

+ +

Recovering from "Unknown Error"

+ +

Sometimes, you'll see a scripting message like this when you load a page:

+ +
Kumascript service failed unexpectedly: <class 'httplib.BadStatusLine'>
+ +

This is probably a temporary failure of the KumaScript service. If you Refresh the page, the error may disappear. If that doesn't work, try a Shift-Refresh. If, after a few tries, the error persists - file an IT bug for Mozilla Developer Network to ask for an investigation.

+ +

Broken wiki.languages() macros

+ +

On some pages, you'll see a scripting error like this:

+ +
Syntax error at line 436, column 461: Expected valid JSON object as the parameter of the preceding macro but...
+
+ +

If you edit the page, you'll probably see a macro like this at the bottom of the page:

+ +
\{{ wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) }}
+
+ +

To fix the problem, just delete the macro. Or, replace the curly braces on either side with HTML comments <!-- --> to preserve the information, like so:

+ +
<!-- wiki.languages({ "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/JavaScript_概要", ... }) -->
+
+ +

Because Kuma supports localization differently, these macros aren't actually needed any more. But, they've been left intact in case we need to revisit the relationships between localized pages. Unfortunately, it seems like migration has failed to convert some of them properly.

+ +

Unconverted inline script blocks

+ +

Occasionally, you'll find some text like this at the bottom of a page, or even somewhere in the middle:

+ +
ottoPreviousNext("JSGChapters");
+wiki.languages({
+  "fr": "fr/Guide_JavaScript_1.5/Expressions_rationnelles",
+  "ja": "ja/Core_JavaScript_1.5_Guide/Regular_Expressions"
+});
+
+ +

This is a script block that didn't get converted to a KumaScript macro during migration. It happens, unfortunately. If you switch to HTML source editing mode, you'll see this, a <pre class="script"> element:

+ +
<pre class="script" style="font-size: 16px;">
+ottoPreviousNext(&quot;JSGChapters&quot;);
+wiki.languages({
+  &quot;fr&quot;: &quot;fr/Guide_JavaScript_1.5/Expressions_rationnelles&quot;,
+ &nbsp;&quot;ja&quot;: &quot;ja/Core_JavaScript_1.5_Guide/Regular_Expressions&quot;
+});
+</pre>
+
+ +

This is an inline script - previously allowed by DekiScript, no longer supported by KumaScript.

+ +

For this particular example, common to the JavaScript Guide, you can fix it by removing the wiki.languages part (see previous section) and change the ottoPreviousNext() into a macro like so:

+ +
\{{ ottoPreviousNext("JSGChapters") }}
+
+ +

If you see a block of code that's more complex than the above, you will need to create a new template, move the code there, and replace the code in its previous spot with a macro calling the new template.

+ +

Finding the Current Page's Language

+ +

In KumaScript, the locale of the current document is exposed as an environment variable:

+ +
var lang = env.locale;
+
+ +

In legacy DekiScript templates, coming up with the locale was a bit harder. You'll see chunks of code like this:

+ +
/* accepts as input one required parameter: MathML element to create an xref to */
+var u = uri.parts(Page.uri);
+var lang = string.tolower(u.path[0]);
+if (string.contains(lang, "project") || string.contains(lang, "Project")) {
+  lang = string.substr(lang, 8);
+}
+/* fall back to page.language on a user page */
+else if (string.StartsWith(lang, "user:")) {
+  lang = page.language;
+}
+
+ +

Please replace code like the above with the new KumaScript example. The env.locale variable should be reliable and defined for every document.

+ +

Reading the contents of a page attachment

+ +

You can read the contents of an attached file by using the mdn.getFileContent() function, like this:

+ +
<%
+  var contents = mdn.getFileContent(fileUrl);
+  ... do stuff with the contents ...
+%>
+
+ +

or

+ +
<%-mdn.getFileContent(fileObject)%>
+
+ +

In other words, you may specify either the URL of the file to read or as a file object. The file objects for a page can be accessed through the array env.files. So, for example, to embed the contents of the first file attached to the article, you can do this:

+ +
<%-mdn.getFileContent(env.files[0])%>
+
+ +
Note: You probably don't want to try to embed the contents of a non-text file this way, as the raw contents would be injected as text. This is meant to let you access the contents of text attachments.
+ +

If the file isn't found, an empty string is returned. There is currently no way to tell the difference between an empty file and a nonexistent one. But if you're putting empty files on the wiki, you're doing it wrong.

+ +

Localizing template content

+ +

Templates cannot be translated like other wiki pages. KumaScript only looks for templates in the en-US locale (i.e., /en-US/docs/Template:{name}), and does not look for templates that have been translated to another locale (i.e., /fr/docs/Template:{name}).

+ +

So the main way to output content tailored to the current document locale is to pivot on the value of env.locale. There are many ways to do this, but a few patterns are common in the conversion of legacy DekiScript templates:

+ +

If/else blocks in KumaScript

+ +

The KumaScript equivalent of this can be achieved with simple if/else blocks, like so:

+ +
<% if ("fr" == env.locale) { %>
+<%- template("CSSRef") %> « <a title="Référence_CSS/Extensions_Mozilla" href="/fr/docs/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a>
+<% } else if ("ja" == env.locale) { %>
+<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/ja/docs/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a>
+<% } else if ("pl" == env.locale) { %>
+<%- template("CSSRef") %> « <a title="Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/docs/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a>
+<% } else if ("de" == env.locale) { %>
+<%- template("CSSRef") %> « <a title="CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a>
+<% } else { %>
+<%- template("CSSRef") %> « <a title="CSS_Reference/Mozilla_Extensions" href="/en-US/docs/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a>
+<% } %>
+
+ +
Legacy DekiScript
+ +

A similar way this was done in DekiScript was using <span>'s with lang="{locale}" attributes, like so:

+ +
<p><span lang="*" class="lang lang-*"><span class="script">CSSRef()</span> « <a title="en/CSS_Reference/Mozilla_Extensions" href="/en/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a></span>
+<span lang="en" class="lang lang-en"><span class="script">CSSRef()</span> « <a title="en/CSS_Reference/Mozilla_Extensions" href="/en/CSS_Reference/Mozilla_Extensions">CSS Reference:Mozilla Extensions</a>
+<span lang="fr" class="lang lang-fr"><span class="script">CSSRef()</span> « <a title="fr/Référence_CSS/Extensions_Mozilla" href="/fr/Référence_CSS/Extensions_Mozilla">Référence CSS:Extensions Mozilla</a></span>
+<span lang="ja" class="lang lang-ja"><span class="script">CSSRef()</span> « <a title="ja/CSS_Reference/Mozilla_Extensions" href="/ja/CSS_Reference/Mozilla_Extensions">CSS リファレンス:Mozilla 拡張仕様</a></span>
+<span lang="pl" class="lang lang-pl"> <span class="script">CSSRef()</span> « <a title="pl/Dokumentacja_CSS/Rozszerzenia_Mozilli" href="/pl/Dokumentacja_CSS/Rozszerzenia_Mozilli">Dokumentacja CSS:Rozszerzenia Mozilli</a></span>
+<span lang="de" class="lang lang-de"><span class="script">CSSRef()</span> « <a title="de/CSS_Referenz/Mozilla_CSS_Erweiterungen" href="/de/CSS_Referenz/Mozilla_CSS_Erweiterungen">CSS Referenz: Mozilla Erweiterungen</a></span></span></p>
+
+ +

This is no longer supported. If you encounter templates built using the legacy DekiScript approach, revise them to use the new KumaScript pattern.

+ +

Depending on what text editor is your favorite, you may be able to copy & paste from the browser-based editor and attack this pattern with a series of search/replace regexes to get you most of the way there.

+ +

My favorite editor is MacVim, and a series of regexes like this does the bulk of the work with just a little manual clean up following:

+ +
%s#<span#^M<span#g
+%s#<span lang="\(.*\)" .*>#<% } else if ("\1" == env.locale) { %>#g
+%s#<span class="script">template.Cssxref(#<%- template("Cssxref", [#
+%s#)</span> </span>#]) %>
+
+ +

Your mileage may vary, and patterns change slightly from template to template. That's why the migration script was unable to just handle this automatically, after all.

+ +

String variables and switch

+ +

Rather than switch between full chunks of markup, you can define a set of strings, switch them based on locale, and then use them to fill in placeholders in a single chunk of markup:

+ +
<%
+var s_title = 'Firefox for Developers';
+switch (env.locale) {
+    case 'de':
+        s_title = "Firefox für Entwickler";
+        break;
+    case 'fr':
+        s_title = "Firefox pour les développeurs";
+        break;
+    case 'es':
+        s_title = "Firefox para desarrolladores";
+        break;
+};
+%>
+<span class="title"><%= s_title %></span>
+
+ +

You'll see examples of this in legacy DekiScript templates. For the most part, this pattern should work as-is, but you may need to adjust the expected values of locales (e.g., en, cn, pt become en-US, zh-CN, pt-PT respectively).

+ +

Use mdn.localString()

+ +

A recent addition to the Template:MDN:Common module is mdn.localString(), used like this:

+ +
<%
+var s_title = mdn.localString({
+  "en-US": "Firefox for Developers",
+  "de": "Firefox für Entwickler",
+  "es": "Firefox para desarrolladores"
+});
+%>
+<span class="title"><%= s_title %></span>
+
+ +

This is more concise than the switch statement, and may be a better choice where a single string is concerned. However, if many strings need to be translated (e.g., as in CSSRef), a switch statement might help keep all the strings grouped by locale and more easily translated that way.

+ +

When the object does not have the appropriate locale, the value of "en-US" is used as the initial value.

+ +

Before and after examples

+ +

Carriage returns added here and there for clarity.

+ +
// Before: DOM0() template Dekiscript
+<p><span class="lang lang-en" lang="en">DOM Level 0. Not part of any standard. </span>
+<span class="lang lang-es" lang="es">DOM Nivel 0. No es parte de ninguna norma. </span>
+<span class="lang lang-*" lang="*">DOM Level 0. Not part of any standard. </span>
+<span class="lang lang-fr" lang="fr">DOM Level 0. Ne fait partie d'aucune spécification. </span>
+<span class="lang lang-ja" lang="ja">DOM Level 0。どの標準にも属しません。 </span>
+<span class="lang lang-pl" lang="pl">DOM Level 0. Nie jest częścią żadnego standardu. </span>
+<span class="lang lang-zh-cn" lang="zh-cn">DOM Level 0 不属于任何标准.</span></p>
+
+// After: Kumascript version
+<% if ("fr" == env.locale) { %>
+<p>DOM Level 0. Ne fait partie d'aucune spécification.</p>
+<% } else if ("ja" == env.locale) { %>
+<p>DOM Level 0。どの標準にも属しません。 </p>
+<% } else if ("pl" == env.locale) { %>
+<p>DOM Level 0. Nie jest częścią żadnego standardu.</p>
+<% } else if ("es" == env.locale) { %>
+<p>DOM Nivel 0. No es parte de ninguna norma.</p>
+<% } else if ("zh-CN" == env.locale) { %>
+<p>DOM Level 0 不属于任何标准.</p>
+<% } else { %>
+<p>DOM Level 0. Not part of any standard.</p>
+<% } %>
+ +
// From ReleaseChannelInfo() template
+// Before:
+web.html("<p>Firefox " + $0 + ", based on Gecko " + $1 + ", will ship in " + $2 + ".
+ This article provides information about the changes in this release that will
+ affect developers. Nightly builds of what will become Firefox " + $0 + " are "
+  + web.link(url, "currently available") + " on the " + string.ToUpperFirst($3)
+  + " channel.</p>");
+
+// After:
+<p>Firefox <%= $0 %>, based on Gecko <%= $1 %>, will ship in <%= $2 %>. This
+ article provides information about the changes in this release that will
+ affect developers. Nightly builds of what will become Firefox <%= $0 %>
+ are <%- web.link(url, "currently available")%>  on the
+ <%= string.ToUpperFirst($3) %> channel.</p>
+ +
// Before: old Dekiscript snippet
+if ($1 && string.length($1)) {
+  optionsText = optionsText + "<li>" + LXRSearch("ident", "i", $1) + "</li>";
+}
+
+// After: new Kumascript. Quote parameters to template() unless it is an arg variable (like $1).
+if ($1 && string.length($1)) {
+    optionsText = optionsText + "<li>" + template("LXRSearch", ["ident", "i", $1]) + "</li>";
+}
+
+// Note that template() within <% ... %> outputs nothing directly. If you want to call another
+// template and display its output, use <%= %> or <%- %> like this:
+<%- template("LXRSearch", ["ident", "i", $1]) %>
+ +

See also

+ + diff --git a/files/es/mdn/tools/page_regeneration/index.html b/files/es/mdn/tools/page_regeneration/index.html new file mode 100644 index 0000000000..cdc6fbd699 --- /dev/null +++ b/files/es/mdn/tools/page_regeneration/index.html @@ -0,0 +1,32 @@ +--- +title: Renderizado de páginas en MDN +slug: MDN/Tools/Page_regeneration +translation_of: MDN/Tools/Page_regeneration +--- +
{{MDNSidebar}}
+ +

El sitio MDN almacena en caché las páginas para que el usuario obtenga un mejor rendimiento. Como resultado, los cambios que guarde en una página podrían no aparecer la próxima vez que vuelva a cargar la página. A menudo, pero no siempre, aparece un banner en la página que indica que hay una actualización de la página en proceso. Puede hacer una "recarga forzada" (Shift + F5) en su navegador para volver a cargar la página desde el servidor, pero esto puede no tener efecto si la actualización en el servidor no se ha completado.

+ +

Algunas páginas (especialmente las páginas de destino) usan macros para generar y actualizar automáticamente su contenido. Para las páginas de destino, esto asegura que los nuevos artículos se enumeren automáticamente en la página, sin que un escritor tenga que agregarlos manualmente. Esta es útil para los contribuyentes de mucho tiempo, y ayuda a los recién llegados a evitar que su trabajo se pierda en la confusión porque no sabían cómo vincular sus artículos en la jerarquía del sitio.

+ +

Esto también se puede usar cuando se transmite contenido de una página a otras páginas (usando, por ejemplo, la macro {{TemplateLink ("Página")}}).

+ +

Debido a que el caché de MDN almacena el contenido renderizado para mejorar el rendimiento, los cambios realizados en el material de origen (como salida de macro o páginas transcluidas) no se reflejan automáticamente en la página. Si espera cambios frecuentes en dichos materiales de origen, puede considerar habilitar la regeneración automática de su página.

+ +

Siga los siguientes pasos para habilitar la regeneración automática:

+ +
    +
  1. Cambia el idioma del editor a inglés.
    2. +
  2. Haga clic en el botón Edit en la página para ingresar al modo de edición.
    3. +
  3. Debajo del título de la página, haga clic en Edit page title and properties ubicados cerca del título de la página. Aparecen los campos de metadatos de la página.
    4. +
  4. Establezca un valor para Rendering max age . Este valor determina la cada cuánto tiempo se reconstruye la página en caché, incluida la ejecución de sus macros. Por lo general, usamos 4 u 8 por defecto. Para una tecnología cuya documentación está cambiando rápidamente, puede elegir un número más bajo.
    5. +
  5. Guarda tus cambios en la página. Es una buena práctica hacer un comentario de revisión que describa lo que hiciste, como "Establecer la Rendering max age en 4 horas".
    6. +
+ +

La página se regenerará automáticamente en el horario que especificó.

+ +
+

Nota: La opción Edit page title and properties no está disponible al crear una nueva página; tendrás que volver a abrir el editor después de tu primer guardado.

+ +

La opción Edit page title and properties no está disponible de momento en otros idiomas que no sean inglés.

+
diff --git a/files/es/mdn/tools/template_editing/index.html b/files/es/mdn/tools/template_editing/index.html new file mode 100644 index 0000000000..0edab22e95 --- /dev/null +++ b/files/es/mdn/tools/template_editing/index.html @@ -0,0 +1,14 @@ +--- +title: Edición de plantillas +slug: MDN/Tools/Template_editing +tags: + - Guía + - Herramientas + - MDN Meta + - Privilegios + - Roles(2) +translation_of: MDN/Tools/Template_editing +--- +
{{MDNSidebar}}

En MDN, las plantillas escritas en KumaScript son usadas para automatizar la generación de contenido y la personalización de las páginas. Cada plantilla es un archivo separado del directorio de macros del repositorio GitHub KumaScript.

+ +

Cualquiera que edite páginas wiki de MDN puede invocar plantillas utilizando macros en los artículos MDN.  Cuaquiera puede crear y editar plantillas vía el repositorio GitHub KumaScript GitHub usando prácticas open-source estándar (bifurcando el repositorio, creando una rama, haciendo tus cambios, y enviando una petición de incorporación de cambios para revisión). Ten en cuenta que enviar una petición de incorporación de cambios es actualmente la única forma de actualizar cadenas traducidas en las plantillas que las contienen.

diff --git a/files/es/mdn/user_guide/index.html b/files/es/mdn/user_guide/index.html new file mode 100644 index 0000000000..b2e20cd131 --- /dev/null +++ b/files/es/mdn/user_guide/index.html @@ -0,0 +1,13 @@ +--- +title: MDN user guide +slug: MDN/User_guide +tags: + - Documentation + - Landing + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Tools +--- +
{{MDNSidebar}}

The Mozilla Developer Network site is an advanced system for finding, reading, and contributing to documentation and sample code for Web developers (as well as for Firefox and Firefox OS developers). The MDN user guide provides articles detailing how to use MDN to find the documentation you need, and, if you wish, how to help make the material better, more expansive, and more complete.

+

{{SubpagesWithSummaries}}

diff --git a/files/es/mdn/user_guide/writing/index.html b/files/es/mdn/user_guide/writing/index.html new file mode 100644 index 0000000000..f90a45bfdf --- /dev/null +++ b/files/es/mdn/user_guide/writing/index.html @@ -0,0 +1,67 @@ +--- +title: Escribir contenido +slug: MDN/User_guide/Writing +tags: + - Agregar + - Content + - Crear + - Create + - MDN + - Nueva + - Page + - Writing +translation_of: Archive/Meta_docs/Writing_content +--- +
{{MDNSidebar}}

Siempre hay cosas que se pueden agregar o actualizar en MDN. Ya sea una documentación completamente nueva y brillante API o una revisión de una vieja API que ha cambiado sutilmente, encontrarás muchas oportunidades para ayudar.

+

Editar una página existente

+

Si has encontrado una página que te gustaría revisar, simplemente haz click en el botón "editar" en la parte superior derecha de la página. Esto abrirá el editor WYSIWYG para trabajar en los contenidos de la página. Mira la guía del editor MDN para tener detalles de cómo trabajar con el editor, como así también cómo trabajar con el sistema macro que usamos para ayudar a automatizar la construcción y dar formato al contenido.

+

Hay muchas muchas razones por las que podrías editar una página existente:

+ +

Agregar una nueva página

+

¡Esto es grandioso! Agregar una nueva página a MDN hace que la Web te quiera y que quiera abrazarte. Hay muchas razones obvias para crear una nueva página, incluyendo documentar una API que todavía no lo está o agregar un nuevo tutorial o guía de un tema.

+

Hay unos pasos a seguir para crear una nueva página enMDN, una vez que te hayas logueado:

+
+
+ Haz click en el enlace "falta una página" ("missing page")
+
+ Cuando navegas en MDN, ocasionalmente puedes encontrar enlaces a páginas que todavía no existen. A menudo, cuando creamos artículos, incluimos enlaces a páginas que hay que crear, incluso si no han sido construidas todavía. Esto nos ayuda a realizar un seguimiento de las cosas que se necesitan hacer, aunque algunas veces lleva algo de tiempo retomarlas. ¡Siéntete libre para hacerlo! Sólo haz click en estos enlaces y te llevarán derecho al editor para una nueva página.
+
+ Crear una sub-página
+
+ Cerca de la esquina superior derecha de cada artículo hay un menu desplegable llamado "Esta página" ("This page"). En ese menú, hay una opción "Nueva sup-página" ("New sub-page"). Haciendo click en esa opción se abre el editor de página para una nueva página, cuya página ascendente en la jerarquía del sitio, es la que elegiste "Nueva sup-página" ("New sub-page"). Simplemente completa el título y el enlace amigable, y comienza a escribir el contenido del artículo.
+
+ Clonar una página
+
+ También puedes clonar una página existente usando la opción "Clonar esta página" en el menú desplegable "Esta página". Haciendo click se crea una copia de la página actual, cuya página contenedora es la miama que la página actual, y abre el editor en esa página donde puedes colocar el título de la página y el enlace amigable y también, editar su contenido. Esta, normalmente, es una buena manera de agregar una nueva página a un área de referencia existente en el sitio porque, por ejemplo, te provee de un diseño de muestra para el contenido.
+
+ Crear un enlace a una página que no existe, luego hacer click en él
+
+ Este es un método un poco híbrido. Como cada debería ser enlazada de alguna parte podrías empezar creando un enlace al nuevo artículo agregándolo a una página existente y, luego de guardar la página, puedes hacer click en el lick que acabas de insertar para abrir un editor para el nuevo article.
+
+
+

Nota: si no ingresaste con tu nombre usuario, te va a aparecer el error 404 cuando trates de visitar un artículo que no existe en vez del editor de páginas.

+
+

Buscar información

+

Hay un montón de información allí afuera y puede ser difícil dar con la ayuda exacta que necesites. Aquí hay unos consejos para que comiences.

+
+
+ Listas de propietarios de módulos
+
+ Los proyectos Mozilla funcionan con una base de "propietario de módulo" . Cada componente mayor tiene un propietario o propietarios responsables de lo que pasa allí. Estos propietarios son muy frecuentemente tu mejor fuente de información o, por lo menos, un muy buena manera de encontrar a la persona correcta con la cual comunicarse.
+
+ Referencia cruzada de la fuente de Mozilla
+
+ RCM (ó en ingles, MXR), la referencia cruzada de Mozilla, te permite acceder a todo el código fuente del proyecto Mozilla (a excepción de algunas cosas, como gran parte del Sistema operativo Firefox, que se encuentra en GitHub). El código y sus comentarios son, amenudo. un gran resurso para la información.
+
+ La wiki de Mozilla wiki
+
+ La wiki de Mozilla, frecuentemente referenciada como "wikimo", es un depósito de notas de procesos y diseños, borradores, planes y especificaciones preliminares. A pesar de ser muchas veces un caos, es un tesoro con información invaluable.
+
diff --git a/files/es/mdn_en_diez/index.html b/files/es/mdn_en_diez/index.html new file mode 100644 index 0000000000..0e48e9e6ba --- /dev/null +++ b/files/es/mdn_en_diez/index.html @@ -0,0 +1,39 @@ +--- +title: MDN en 10 +slug: MDN_en_diez +tags: + - MDN +translation_of: MDN_at_ten +--- +
Celebra 10 años documentando tu Web.
+ +
+
+

La historia de MDN (Mozilla Developers Network)

+ +

A principios de 2005 , un grupo pequeño de idealistas se propuso a crear una nueva, libre, comunidad en línea de recursos para todos los desarrolladores Web. Su brillante pero poco excentrica idea se convirtió en la actual Mozilla Developer Network (MDN) - el principal recurso para todas las tecnologías Web abiertas. Diez años más tarde, nuestra comunidad mundial es más grande que nunca, y juntos todavía estamos creando documentación , código de ejemplo y recursos de aprendizaje para todas las tecnologías Web abiertas, incluyendo CSS , HTML , JavaScript y todo lo demás que hace que la web abierta tan poderoso como lo es.

+ +

Aprende másabout the history

+ + +

Contribuyendo a MDN

+ +

Por diez años, la comunidad MDN ha estado documentando la Web abierta. Desde la reparación de los errores tipográficos simples hasta escribir suites completas de una nueva API, todo el mundo tiene algo que ofrecer y ninguna contribución es demasiado grande o demasiado pequeño. Contamos con más de 90.000 páginas de contenido que se han escrito o traducidos por miembros de nuestra destacada comunidad de Mozillians . Tú puedes ser uno de ellos.

+ +

Aprende másabout contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ + + +
    +
  1. MDN en 10
    2. +
  2. La historia de MDN
    3. +
  3. Contribuyendo a MDN
    4. +
+
diff --git a/files/es/mejoras_css_en_firefox_3/index.html b/files/es/mejoras_css_en_firefox_3/index.html new file mode 100644 index 0000000000..8a4665ee81 --- /dev/null +++ b/files/es/mejoras_css_en_firefox_3/index.html @@ -0,0 +1,65 @@ +--- +title: Mejoras para CSS en Firefox 3 +slug: Mejoras_CSS_en_Firefox_3 +tags: + - CSS + - Firefox 3 + - Todas_las_Categorías +translation_of: Mozilla/Firefox/releases/3/CSS_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +
+

 

+ +

Firefox 3 ofrece una variedad de mejoras en su implementación de CSS. Mientras esperamos a que se incluyan estos cambios en la documentación, este artículo ofrece una descripción general de todos ellos. De esta forma, los desarrolladores podrán estar al tanto de dichos cambios.

+ +

 

+ +

Se han implementado:

+ + + +

 

+ +

Otros cambios

+ + + +

 

+ +
+

Lecturas relacionadas

+
+
+ +

 

+ + + +

{{ languages( { "en": "en/CSS_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_CSS_dans_Firefox_3", "ja": "ja/CSS_improvements_in_Firefox_3", "pl": "pl/Poprawki_CSS_w_Firefoksie_3" } ) }}

+ +

 

diff --git a/files/es/mejoras_dom_en_firefox_3/index.html b/files/es/mejoras_dom_en_firefox_3/index.html new file mode 100644 index 0000000000..dcc39ab4a6 --- /dev/null +++ b/files/es/mejoras_dom_en_firefox_3/index.html @@ -0,0 +1,35 @@ +--- +title: Mejoras DOM en Firefox 3 +slug: Mejoras_DOM_en_Firefox_3 +tags: + - DOM + - Firefox 3 + - Todas_las_Categorías +translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 ofrece una serie de mejoras sobre el Modelo de Objetos del Documento (DOM), especialmente en lo que se refiere a la implementación de extensiones de DOM añadidas por otros navegadores. Este artículo proporciona una lista de estas mejoras, además de enlaces a documentación más detallada.

+ + + +

Ver también

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_DOM_dans_Firefox_3", "ja": "ja/DOM_improvements_in_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }}

diff --git a/files/es/mejoras_en_el_administrador_de_descargas_en_firefox_3/index.html b/files/es/mejoras_en_el_administrador_de_descargas_en_firefox_3/index.html new file mode 100644 index 0000000000..7a928cfdca --- /dev/null +++ b/files/es/mejoras_en_el_administrador_de_descargas_en_firefox_3/index.html @@ -0,0 +1,43 @@ +--- +title: Mejoras en el administrador de descargas en Firefox 3 +slug: Mejoras_en_el_administrador_de_descargas_en_Firefox_3 +tags: + - Firefox 3 +translation_of: Archive/Mozilla/Download_Manager_improvements_in_Firefox_3 +--- +

Firefox 3 tiene algunas mejoras en el Administrador de Descargas que permite la existencia de múltiples escuchas de progreso, utiliza el API Storage para el manejo de datos, resumen de descargas, etcétera. Adicionalmente, puedes aumentar o reemplazar el interfaz de usuario del Administrador de Descargas, implementando un nuevo interfaz nsIDownloadManagerUI.

+ +

{{ Note("These changes will require some modest revisions to code using the Download Manager; several methods have had minor changes.")}}

+ +

El interfaz Administrador de Descargas

+ +
+
nsIDownloadManager
+
Ofece a las aplicaciones y extensiones, acceso al Administrador de Descargas, permitiendoles agregar o eliminar archivos en la lista de descargas, recuperar información acerca de descargas pasadas y presentes y recoger notificaciones sobre el estado de progreso de las descargas.
+
nsIDownload
+
Describe un archivo en la cola de descargas. El archivo puede estar en espera de ser descargado, estar en proceso de descarga, o haber finalizado su descarga.
+
nsIDownloadProgressListener
+
Las aplicaciones y las extensiones implementan este interfaz para ser notificadas de los cambios en el estado de las descargas.
+
nsIDownloadManagerUI
+
Implementa esta interfaz para reemplazar o aumentar la interfaz de usuario del Administrador de Descargas.
+
+ +

Otra documentación del Administrador de Descargas

+ +
+
Preferencias_del_Administrador_de_Descargas
+
Este artículo enumera las preferencias usadas por el Administrador de Descargas,así como sus valores por defecto.
+
Esquema_del_Administrador_de_descargas
+
Este artículo describe el formato de la base de datos que se usa para almacenar y hacer seguimiento de cada descarga.
+
+ +

Ejemplos

+ +
+
Vigilar_descargas
+
Un ejemplo que muestra cómo usar el nuevo API del Administrador de Descargas para crear una ventana de registro de descargas que muestra todas las descagas pasadas y presentes y su estado, incluyendo las horas de comienzo y final de las descargas y más. Muestra también el funcionamiento del API Storage.
+
+ +

 

+ +
 
diff --git a/files/es/mejoras_svg_en_firefox_3/index.html b/files/es/mejoras_svg_en_firefox_3/index.html new file mode 100644 index 0000000000..701a6640f8 --- /dev/null +++ b/files/es/mejoras_svg_en_firefox_3/index.html @@ -0,0 +1,62 @@ +--- +title: Mejoras SVG en Firefox 3 +slug: Mejoras_SVG_en_Firefox_3 +tags: + - Firefox 3 + - SVG + - Todas_las_Categorías +translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 ofrece una mejor implementación de Gráficos Vectoriales Escalables (SVG) en comparación con versiones anteriores de Firefox. Aunque estas características están documentadas en otros sitios, este artículo puede servir como una lista que indique fácilmente qué características se han añadido en Firefox 3.

+ + + +

Vea también

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_SVG_dans_Firefox_3", "ja": "ja/SVG_improvements_in_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }}

diff --git a/files/es/mejoras_xul_en_firefox_3/index.html b/files/es/mejoras_xul_en_firefox_3/index.html new file mode 100644 index 0000000000..e649db326a --- /dev/null +++ b/files/es/mejoras_xul_en_firefox_3/index.html @@ -0,0 +1,109 @@ +--- +title: Mejoras XUL en Firefox 3 +slug: Mejoras_XUL_en_Firefox_3 +tags: + - Firefox 3 + - Todas_las_Categorías + - XUL +translation_of: Mozilla/Firefox/Releases/3/XUL_improvements_in_Firefox_3 +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 proporciona varios nuevos elementos XUL, además de mejoras en los elementos existentes. Aún que este material se documenta en detalle en otro lugar, este artículo ofrece una buena lista de estas mejoras así como enlaces a la documentación detallada.

+ +

 

+ +

Los nuevos elementos

+ + + +

 

+ +

Las mejoras

+ +

en los árboles

+ + + +

de los menús

+ + + +

en las cajas de texto

+ + + +

Otras mejoras

+ + + +

Ver también

+ + + +

 

+ +

 

+ +

{{ languages( { "en": "en/XUL_improvements_in_Firefox_3", "fr": "fr/Am\u00e9liorations_XUL_dans_Firefox_3", "ja": "ja/XUL_improvements_in_Firefox_3", "pl": "pl/Poprawki_XUL_w_Firefoksie_3" } ) }}

diff --git a/files/es/mercurial/index.html b/files/es/mercurial/index.html new file mode 100644 index 0000000000..c8a72386ab --- /dev/null +++ b/files/es/mercurial/index.html @@ -0,0 +1,35 @@ +--- +title: Mercurial +slug: Mercurial +tags: + - Desarrollando_Mozilla + - Mercurial + - Todas_las_Categorías +translation_of: Mozilla/Mercurial +--- +

Mercurial es el software de control distribuido de versiones (inglés) que estamos usando para el desarrollo de las próximas versiones principales ("trunk"). Ha reemplazado a CVS ahora que Mozilla 1.9 ha sido ramificado.

+ +

hg es la herramienta de línea de órdenes de Mercurial, en consonancia con el hecho de que Hg es el símbolo químico para el elemento mercurio.

+ +

Aprender a usar Mercurial

+ +

Lo primero, léete completo lo básico de Mercurial, antes de hacer nada más.

+ +

Luego la FAQ de Mercurial es un lugar decente para comenzar.

+ +

Revisa Código fuente de Mozilla (Mercurial) para obtener un árbol que compilar.

+ +

Lecturas adicionales

+ +

El libro de hg (inglés) es la guía de usuario definitiva de Mercurial.

+ +

Category:Mercurial lista los artículos relacionados con Mercurial en MDC.

+ +

Y en wiki.mozilla.org, estas páginas son muy útiles:

+ + + +

{{ languages( { "fr": "fr/Mercurial", "ja": "ja/Mercurial", "en": "en/Mercurial" } ) }}

diff --git a/files/es/microsummary_topics/index.html b/files/es/microsummary_topics/index.html new file mode 100644 index 0000000000..86696978b5 --- /dev/null +++ b/files/es/microsummary_topics/index.html @@ -0,0 +1,64 @@ +--- +title: Microsummary topics +slug: Microsummary_topics +tags: + - Microsummaries + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Microsummary_topics +--- +
Warning: Microsummary support was removed in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)
+

Programmatically installing a microsummary generator

+

To programmatically install a microsummary generator -- for example, in an extension that helps users create custom generators for their favorite sites -- obtain a reference to the nsIMicrosummaryService interface implemented by the nsIMicrosummaryService component, then call its installGenerator() method, passing it an XML document containing the generator.

+

For example, the following code snippet installs the microsummary generator from the Creating a Microsummary tutorial:

+
var generatorText = ' \
+  <?xml version="1.0" encoding="UTF-8"?> \
+  <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \
+             name="Firefox Download Count" \
+             uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"> \
+    <template> \
+      <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0"> \
+        <output method="text"/> \
+        <template match="/"> \
+          <value-of select="id(\'download-count\')"/> \
+          <text> Fx downloads</text> \
+        </template> \
+      </transform> \
+    </template> \
+    <pages>
+      <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
+    </pages>
+  </generator> \
+';
+
+var domParser =
+  Components.classes["@mozilla.org/xmlextras/domparser;1"].
+  createInstance(Components.interfaces.nsIDOMParser);
+
+var generatorDoc = domParser.parseFromString(generatorText, "text/xml");
+
+var microsummaryService =
+  Components.classes["@mozilla.org/microsummary/service;1"].
+  getService(Components.interfaces.nsIMicrosummaryService);
+
+var generator = microsummaryService.installGenerator(generatorDoc);
+
+

The service installs the generator by serializing its XML to a file in the user's profile directory and adding the generator to the service's in-memory generator cache.

+

When programmatically installing generators, you should specify a unique identifier for the generator in the uri attribute of the <generator> element. The value of the attribute must be a valid URI, but you can specify an arbitrary identifier using a URN, for example:

+
urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}
+
+

To guarantee uniqueness, use URNs containing UUIDs generated by the nsUUIDGenerator component. See Generating a UUID in the nsIUUIDGenerator documentation.

+

You may also use another form appropriate to your extension.

+
Note: When web sites install generators via window.sidebar.addMicrosummaryGenerator(), Firefox sets their uri attribute to urn:source:sourceURL, where sourceURL is the URL from which the generator was downloaded. In the future, Firefox may access source URLs to download updated versions of generators, so unless you are installing generators which are available from URLs, you should not use this form for your programmatically-installed generators.
+ +

When Firefox updates a microsummary generated by a microsummary generator add-on, it automatically downloads the HTML content of the page being summarized. It does not generally download related content like embedded images and JavaScript scripts referenced by the page. However, because of a technical limitation (bug 340746), it does download CSS stylesheets referenced by the page.

+

Firefox includes the X-Moz request header with these requests. It sets the value of the header to the string microsummary. Thus, to differentiate requests initiated manually by users for the purpose of viewing a web page from those initiated automatically by Firefox for the purpose of summarizing that page, check for the presence and value of the X-Moz request header.

+

If the X-Moz header is present, and its value is microsummary, then the request is a microsummary-related request. Otherwise, it is a user-initiated request.

+

 

+

Controlling the frequency of microsummary requests

+

When Firefox downloads content in order to update a microsummary, it honors cache-related HTTP response headers. Thus, if you would like to control how frequently Firefox initiates microsummary-related requests to your web server, you can do so by including an HTTP Expires or Cache-Control header in your response to a microsummary-related request.

+

For example, you might include the following header in your response to prevent Firefox from making another microsummary-related request for one hour:

+
Cache-Control: max-age=3600
+
+
Note: Because of a technical limitation (bug 346820), Firefox uses the same cache for both microsummary-related requests and user-initiated requests, so the cache headers you return apply to both. Thus if your cache headers tell Firefox not to refresh a page on your site more than once per hour, and the user reloads the page within that time period, the user will see the cached version of your page, which may not be what you want.
+

To mitigate this effect, only return microsummary-specific cache headers in response to microsummary-related requests. Then only microsummary users will be affected by those headers.

diff --git a/files/es/midas/index.html b/files/es/midas/index.html new file mode 100644 index 0000000000..547ad3f550 --- /dev/null +++ b/files/es/midas/index.html @@ -0,0 +1,328 @@ +--- +title: Midas +slug: Midas +tags: + - DOM + - Midas + - NeedsContent + - NeedsHelp + - NeedsTechnicalReview + - NeedsTranslation + - TopicStub + - needsattention +translation_of: Mozilla/Projects/Midas +--- +

Introduction

+ +

Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the DHTML commands supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the designMode property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the contentEditable attribute; Starting with Firefox 3, Gecko also supports contentEditable. Once Midas is invoked, a few more methods of the document object become available.

+ +

Properties

+ +
+
document.designMode
+
By setting this property to "on", the document becomes editable.
+
+ +

Notes

+ +

Since an entire document becomes editable, authors often load the editable document into an IFRAME and do the bulk of the scripting in the parent document. According to standards, The IFRAME element has the contentDocument property that refers to the document in the inline frame. It also has a property called contentWindow that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.

+ +

In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.

+ +

Examples

+ +

This example shows the basic structure described in the Notes section :

+ +
<html>
+	<head>
+		<title>Simple Edit Box</title>
+	</head>
+	<body>
+		<iframe
+			id="MidasForm"
+			src="about:blank"
+			onload="this.contentDocument.designMode='on';"
+		></iframe>
+	</body>
+</html>
+
+ +

Methods

+ +
+
{{domxref("Document.execCommand")}}
+
Executes the given command.
+
{{domxref("Document.queryCommandEnabled")}}
+
Determines whether the given command can be executed on the document in its current state.
+
{{domxref("Document.queryCommandIndeterm")}}
+
Determines whether the current selection is in an indetermined state.
+
{{domxref("Document.queryCommandState")}}
+
Determines whether the given command has been executed on the current selection.
+
{{domxref("Document.queryCommandValue")}}
+
Determines the current value of the document, range, or current selection for the given command.
+
+ +

Supported Commands

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandValueDescription
backcolorA color code.This command will set the background color of the document.
bold If there is no selection, the insertion point will set bold for subsequently typed characters. +

If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.

+
contentReadOnly This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.
copy If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen. +

note: this command won't work without setting a pref or using signed JS. See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.

+
createlinkA URI.This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.
cut If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen. +

note: this command won't work without setting a pref or using signed JS. See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.

+
decreasefontsize This command will add a <small> tag around selection or at insertion point.
delete This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the Delete button on the keyboard.
fontnameA font nameThis command will set the font face for a selection or at the insertion point if there is no selection. +

The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.

+
fontsizeA numberThis command will set the fontsize for a selection or at the insertion point if there is no selection. +

The given number is such as would be used in the "size" attribute of the font tag.

+
forecolorA color codeThis command will set the text color of the selection or at the insertion point.
formatblockH1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)The selection surrounded by the given block element.
headingH1, H2, H3, H4, H5, H6Selected block will be formatted as the given type of heading.
hilitecolorA color codeThis command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.
increasefontsize This command will add a <big> tag around selection or at insertion point.
indent Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.
insertbronreturntrue/falseSelects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag.
inserthorizontalrulenull/string (when string is the Line's id)This command will insert a horizontal rule (line) at the insertion point. +

Does it delete the selection? Yes!

+
inserthtmlA string.This command will insert the given html into the <body> in place of the current selection or at the caret location. +

The given string is the HTML to insert.

+
insertimageA URI.This command will insert an image (referenced by the given url) at the insertion point.
insertorderedlist Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.
insertunorderedlist Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.
insertparagraph Inserts a new paragraph.
italic If there is no selection, the insertion point will set italic for subsequently typed characters. +

If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.

+
justifycenter Center-aligns the current block.
justifyfull Fully-justifies the current block.
justifyleft Left-aligns the current block.
justifyright Right aligns the current block.
outdent Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen. +

If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.

+
paste This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents. +

note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.

+
redo This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. +

note: the shortcut key will automatically trigger this command (typically accel-shift-Z)

+
removeformat Removes inline formatting from the current selection.
selectall This command will select all of the contents within the editable area. +

note: the shortcut key will automatically trigger this command (typically accel-A)

+
strikethrough If there is no selection, the insertion point will set strikethrough for subsequently typed characters. +

If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.

+
styleWithCSS This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.
subscript If there is no selection, the insertion point will set subscript for subsequently typed characters. +

If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.

+
superscript If there is no selection, the insertion point will set superscript for subsequently typed characters. +

If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.

+
underline If there is no selection, the insertion point will set underline for subsequently typed characters. +

If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.

+
undo This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. +

note: the shortcut key will automatically trigger this command (typically accel-Z)

+
unlink If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.
{{Deprecated_header}}
readonly This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.
useCSS This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.
diff --git a/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html b/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html new file mode 100644 index 0000000000..39b9197fd1 --- /dev/null +++ b/files/es/migrar_aplicaciones_desde_internet_explorer_a_mozilla/index.html @@ -0,0 +1,1067 @@ +--- +title: Migrar aplicaciones desde Internet Explorer a Mozilla +slug: Migrar_aplicaciones_desde_Internet_Explorer_a_Mozilla +tags: + - Desarrollo_Web + - Todas_las_Categorías +--- +

Introducción

+

Cuando Netscape comenzó con el navegador Mozilla, lo hizo con la decisión consciente de soportar los estándares del W3C. Como resultado, Mozilla no es totalmente compatible hacia atrás con el código heredado de Netscape Navigator 4.x ni de Microsoft Internet Explorer. Por ejemplo, Mozilla no soporta la etiqueta <layer> como se verá más adelante. Los navegadores como Internet Explorer 4 fueron construidos antes de la concepción de los estándares del W3C heredando muchos de sus extraños comportamientos. En este articulo se describirán las idiosincrasias de Mozilla que hacen que haya una fuerte compatibilidad del HTML hacia atrás con Internet Explorer y otros navegadores antiguos.

+

También se repasarán las tecnologías no estandarizadas soportadas por Mozilla, como el XMLHttpRequest y la edición de texto enriquecido, dado que existen sus equivalentes existentes en el W3C y que se incluyen en:

+ +

Trucos generales para la programación multinavegador

+

Pese a la existencia de los estándares web, los diferentes navegadores se comportan de manera distinta (de hecho, el mismo navegador puede comportarse de modo diferente dependiendo de la plataforma). Muchos navegadores, como Internet Explorer, también soportan el APIs anterior al W3C y nunca se han esforzado en añadir soporte para los navegadores compatibles con el W3C.

+

Antes de enumerar las diferencias entre Mozilla e Internet Explorer, sería conveniente cubrir algunas formas básicas en las que se pueden crear aplicaciones web ampliables a las que añadir soporte para nuevos navegadores más tarde.

+

Dado que los diferentes navegadores utilizan a veces diferentes APIs para una misma funcionalidad, es muy posible que encuentres múltiples bloques if() else() a lo largo y ancho del código para diferenciar el navegador que está ejecutando el documento. El siguiente código muestra un bloque diseñado para Internet Explorer:

+
. . .
+
+var elm;
+
+if (ns4)
+  elm = document.layers["myID"];
+else if (ie4)
+  elm = document.all["myID"]
+
+

El anterior código no es ampliable por lo que si quieres soportar un nuevo navegador, deberás actualizar ese bloque de código en toda la aplicación web.

+

La forma más fácil de evitar la recodificación del documento para un nuevo navegador es abstraer la funcionalidad. En lugar de utilizar múltiples bloques if() else(), puedes incrementar la eficiencia tomando tareas comunes y abstrayéndolas en sus propias funciones. Esto no sólo hace al código más legible sino que simplifica el proceso añadir soporte para nuevos clientes.

+
var elm = getElmById("myID");
+
+function getElmById(aID){
+  var element = null;
+
+  if (isMozilla || isIE5)
+    element = document.getElementById(aID);
+  else if (isNetscape4)
+    element = document.layers[aID];
+  else if (isIE4)
+    element = document.all[aID];
+
+  return element;
+}
+
+

El código de arriba sigue arrastrando el problema del browser sniffing o el proceso de detección para saber qué navegador está utilizando el usuario. El browser sniffing es detectado generalmente gracias al parámetro useragent, como:

+
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
+
+

Mientras que la utilización del parámetro useragent para detectar el navegador proporciona información detallada del navegador en uso, el código que maneja esos parámetros genera errores con frecuencia cuando son publicadas nuevas versiones de los mismos, por lo que hay que cambiar el código.

+

Si el tipo de navegador no importa (supongamos que se ha bloquado el acceso a la aplicación web a navegadores no soportados), será mucho mejor y más fiable detectar las capacidades del navegador o el soporte de objetos en particular. Generalmente se puede hacer esto probando la funcionalidad requerida en JavaScript, por ejemplo, en lugar de:

+
if (isMozilla || isIE5)
+
+

Se debería de usar:

+
if (document.getElementById)
+
+

Esto permitiría a otros navegadores que soportan ese método estandar del W3C (tales como Opera o Safari) funcionar sin ningún cambio.

+

La detección del agente de usuario sin embargo tiene sentido cuando es importante acertar, como cuando estás verificando que un navegador coincide con los requerimientos de versión de la aplicación web o estás intentando sortear un fallo de programación.

+

JavaScript también permite sentencias condicionales en línea, lo que ayuda a la legibilidad:

+
var foo = (condicion) ? condicionEsTrue : condicionEsFalse;
+
+

Por ejemplo, para obtener un elemento se debería usar:

+
+function getElement(aID){
+  return (document.getElementById) ? document.getElementById(aID)
+                                   : document.all[aID];
+}
+
+

Diferencias entre Mozilla e Internet Explorer

+

Primero se discutirán las diferencias en la forma en la que se comporta el HTML en Mozilla y en Internet Explorer.

+

Títulos emergentes

+

Los títulos emergentes son pequeños textos descriptivos que aparecen normalmente cuando se deja el cursor del ratón un cierto tiempo sobre un elemento.

+

Los navegadores antiguos introdujeron los títulos emergentes en el HTML mostrándolos en enlaces y usando el valor del atributo alt como contenido del título. La última especificación de W3C para HTML creó el atributo title, pensado para contener una descripción detallada del enlace. Los navegadores modernos utilizan el atributo title para mostrar títulos emergentes y Mozilla sólo muestra dichos títulos basándose en el ese atributo y no en el atributo alt.

+

Entidades

+

El marcado HTML puede contener varias entidades definidas por el departamento de estándares web del W3C. Se pueden referenciar entidades a través de su referencia numérica o alfabética. Por ejemplo, puedes referenciar el carácter de espacio en blanco #160 con &#160 o con su referencia alfabética correspondiente &nbsp;.

+

Algunos navegadores antiguos, como Internet Explorer, son tan fulleros que permiten usar entidades reemplazando el carácter ; (punto y coma) al final con contenido normal de texto.

+
&nbsp Foo
+&nbsp&nbsp Foo
+
+

Internet Explorer visualizará los &nbsp mostrados anteriormente como espacios en blanco, pese a que va en contra de la especificación del W3C. El navegador no analizará un &nbsp si va inmediatamente seguido por más caracteres. Por ejemplo:

+
&nbsp12345
+
+

Este código no funcionará en Mozilla, dado que va en contra de los estándares del W3C. Es mejor usar la forma correcta (&nbsp;) para evitar discrepancias entre navegadores.

+

Diferencias en el DOM

+

El Modelo de Objetos de Documento (DOM) es la estructura en árbol que contiene los elementos del documento. Se puede manipular a través de las APIs de JavaScript, las cuales han sido estandarizadas por el W3C. Sin embargo, antes de la estandarización del W3C, Netscape 4 e Internet Explorer 4 implementaron las APIs de modo similar. Mozilla implementa las APIs heredadas sólo si han sido aceptadas por los estándares del W3C.

+

Accediendo a los elementos

+

Para referenciar un elemento usando una técnicas multinavegador, debe de usarse document.getElementById(id), que funciona tanto en Internet Explorer versión 5.0 y superiores, en navegadores basados en Mozilla y en otros navegadores compatibles con el W3C y es parte de la especificación DOM nivel 1.

+

Mozilla no soporta el acceso a elementos a través de document.elementName, ni siquiera a través del nombre del elemento; algo que Internet Explorer permite (llamado también global namespace polluting). Mozilla tampoco soporta el método document.layers de Netscape ni el document.all de Internet Explorer. Mientras que document.getElementById permite referenciar un único elemento, puedes usar document.layers y document.all para obtener una lista de todos los elementos del documento con un nombre determinado, como todos los elementos <div>.

+

El método del DOM nivel 1 del W3C que permite referenciar a todos los elementos con el mismo nombre de etiqueta es getElementsByTagName(). Este método devuelve un vector en JavaScript y puede ser invocado desde el elemento document o desde otros nodos para buscar sólo en su sub-árbol. Para obtener un vector con todos los elementos del árbol del DOM, se puede utilizar getElementsByTagName("*").

+

Los métodos del DOM nivel 1, como muestra la tabla 1, son usados comúnmente para mover un elemento a una posición en particular y cambiar su visibilidad (menús, animaciones, etc...). Netscape 4 usaba la etiqueta <layer>(algo que Mozilla no soporta) como un elemento que podía posicionarse en cualquier lugar. En Mozilla se puede posicionar cualquier elemento utilizando la etiqueta <div>, algo que Internet Explorer también utiliza y que está presente en la especificación HTML.

+ + + + + + + + + + + + + + + + +
+ Tabla 1. Métodos usados para acceder a elementos
MétodoDescripción
document.getElementById( unId )Devuelve una referencia al elemento cuyo atributo id coincide con el pasado como parámetro.
document.getElementsByTagName( unNombre )Devuelve un vector de elementos cuyo nombre de etiqueta coincide con el pasado como parámetro.
+

Recorrer el DOM

+

Mozilla soporta las APIs del DOM del W3C que permiten recorrer el árbol del DOM a través de JavaScript (véase la tabla 2). Las APIs están disponibles para cada nodo del documento y permiten recorrer el árbol en cualquier dirección. Internet Explorer también soporta estas APIs y además sus APIs heredadas para recorrer el árbol del DOM, tales como la propiedad children.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tabla 2. Métodos usados para recorrer el DOM
Propiedad/MétodoDescripción
childNodesDevuelve un vector con todos los nodos hijos del elemento.
firstChildDevuelve el primer nodo hijo del elemento.
getAttribute( nombre )Devuelve el valor del atributo cuyo nombre se pasa como parámetro.
hasAttribute( nombre )Devuelve un valor booleano que indica si el nodo actual tiene un atributo definido con el nombre especificado.
hasChildNodes()Devuelve un valor booleano que indica si el nodo actual tiene al menos un elemento hijo.
lastChildDevuelve el último nodo hijo del elemento.
nextSiblingDevuelve el nodo que sigue inmediatamente al actual.
nodeNameDevuelve el nombre del nodo actual como una cadena de texto.
nodeTypeDevuelve un valor numérico que indica el tipo del nodo actual. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
1Nodo elemento
2Nodo atributo
3Nodo de texto
4Nodo de sección CDATA
5Nodo de referencia a entidad
6Nodo entidad
7Nodo de instrucción de proceso
8Nodo comentario
9Nodo documento
10Nodo tipo de documento
11Nodo fragmento de documento
12Nodo anotación
+
nodeValueDevuelve el valor del nodo actual. Para aquellos nodos que contentan texto, tales como los nodos de texto o los nodos comentario, se devolverá su valor alfabético. Para nodos atributo, se devolverá el valor de su atributo. Para el resto de nodos, se devolverá null.
ownerDocumentDevuelve el objeto document que contiene al nodo actual.
parentNodeDevuelve el nodo padre del nodo actual.
previousSiblingDevuelve el nodo inmediatamente anterior al nodo actual.
removeAttribute( nombre)Elimina el atributo especificado del nodo actual.
setAttribute( nombre, valor )Establece el valor de un atributo.
+

Internet Explorer se comporta de un modo no estándar donde muchas de estas APIs ignorarán los nodos de texto en blanco que son generados, por ejemplo, mediante caracteres de nueva línea. Mozilla no las ignora por lo que a veces se necesita distinguir a estos nodos. Cada nodo posee la propiedad nodeType que especifica el tipo de nodo. Por ejemplo, un nodo elemento es de tipo 1 mientras que un nodo de texto es de tipo 3, un nodo comentario es de tipo 8, etc... La mejor forma de procesar sólo los nodos elemento es iterar todos los nodos hijos y procesar sólo aquellos cuya propiedad nodeType sea igual a 1:

+
HTML:
+  <div id="foo">
+    <span>Test</span>
+  </div>
+
+JavaScript:
+  var myDiv = document.getElementById("foo");
+  var myChildren = myXMLDoc.childNodes;
+  for (var i = 0; i < myChildren.length; i++) {
+    if (myChildren[i].nodeType == 1){
+      // Nodo elemento
+    };
+  };
+
+

Generar y manejar contenidos

+

Mozilla soporta los métodos heredados para añadir contenido al DOM dinámicamente, tales como document.write, document.open y document.close. Mozilla también soporta el método de Internet Explorer innerHTML el cual puede ser llamado desde casi cualquier nodo. Sin embargo no soporta el método outerHTML (que añade marcado alrededor de un elemento y no tiene un equivalente estándar) ni innerText (el cual establece el valor alfabético de su nodo y que puede usarse en Mozilla usando textContent).

+

Internet Explorer tiene varios métodos de manejo de contenidos que no son estándares y no son soportados en Mozilla, incluyendo obtener valores, insertar texto e insertar elementos adyacentes a un nodo tales como getAdjacentElement y insertAdjacentHTML. La tabla 3 muestra cómo el manipulan contenidos tanto Mozilla como el estándar del W3C, siendo todos ellos métodos aplicables a cualquier nodo del DOM.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tabla 3. Métodos usados por Mozilla para manipular contenidos
MétodoDescripción
appendChild( nodo )Crea un nuevo nodo hijo. Devuelve una referencia al nuevo nodo hijo.
cloneNode( profundidad )Crea y devuelve una copia del nodo sobre el que se hace la llamada. Si profundidad es true, copia el sub-árbol completo del nodo.
createElement( tipo )Crea y devuelve un nuevo nodo huérfano de tipo igual al especificado por tipo.
createTextNode( valor )Crea y devuelve un nuevo nodo de texto huérfano asignándole el valor especificado por valor.
insertBefore( nuevoNodo, nodoHijo )Inserta el nodo nuevoNodo antes de nodoHijo, el cual debe ser un hijo del nodo actual.
removeChild( nodoHijo )Elimina el nodo nodoHijo y devuelve una referencia a él.
replaceChild( nuevoNodo, nodoHijo )Reemplaza el nodo nodoHijo con el nodo nuevoNodo y devuelve una referencia al nodo eliminado.
+

Fragmentos de documento

+

Por razones de eficiencia, pueden crearse documentos en memoria en lugar de trabajar con el DOM de un documento existente. El núcleo del DOM nivel 1 introdujo los fragmentos de documento, que son documentos ligeros que contienen un subconjunto de las interfaces de un documento normal. Por ejemplo, getElementById no existe pero appendChild sí. Además se pueden anexar fácilmente fragmentos de documento a los ya existentes.

+

Mozilla crea fragmentos de documento a través de document.createDocumentFragment(), el cual devuelve un fragmento de documento vacío.

+

Sin embargo, la implementación de Internet Explorer para los fragmentos de documentos no es compatible con el estándar del W3C y simplemente devuelve un documento normal.

+

Diferencias en JavaScript

+

Buscar traducción adecuada para hooks DOM. "timing related" traducido como "duración de la ejecución"

+

Por lo general, la mayoría de las diferencias entre Mozilla e Internet Explorer son las de JavaScript. Sin embargo, los problemas normalmente residen en las APIs que un navegador muestra a JavaScript, tales como hooks de DOM. A nivel del núcleo, los dos navegadores no poseen grandes diferencias. Los problemas se encuentran frecuentemente en la duración de la ejecución.

+

Diferencias en las fechas de JavaScript

+

La única diferencia en el objeto Date es el método getYear. Para la especificación ECMAScript (que es la que sigue JavaScript), el método no es compatible con el efecto 2000 y al ejecutar new Date().getYear() en 2004 se obtendrá un valor igual a "104". Para la especificación ECMAScript, getYear devuelve el año menos 1900 lo cual devolvía "98" para 1998. getYear quedó obsoleto en la versión 3 de ECMAScript y fue reemplazado por getFullYear. Internet Explorer cambió la implementación de getYear para que funcionara como getFullYear y fuese así compatible con el efecto 2000, mientras que Mozilla mantuvo el comportamiento estándar.

+

Diferencias de ejecución en JavaScript

+

Diferentes navegadores ejecutarán JavaScript de modo distinto. Por ejemplo, el siguiento código asume que el nodo div ya existe en el DOM en el momento en el que el bloque script se ejecuta:

+
...
+<div id="foo">Cargando...</div>
+
+<script>
+  document.getElementById("foo").innerHTML = "Cargado.";
+</script>
+
+

Sin embargo esto no está garantizado. Para asegurarnos de que todos los elementos existen se debería usar el manejador de evento onload en la etiqueta <body>:

+
<body onload="doFinish();">
+
+<div id="foo">Cargando...</div>
+
+<script>
+  function doFinish() {
+    var element = document.getElementById("foo");
+    element.innerHTML = "Cargado.";
+  }
+</script>
+...
+
+

Tales problemas relativos a la duración de la ejecución están también relacionados con el hardware; los sistemas más lentos pueden mostar fallos que los más rápidos no provocan. Un ejemplo en concreto se puede encontrar en window.open, el cual abre una nueva ventana:

+
<script>
+  function doOpenWindow(){
+    var myWindow = window.open("about:blank");
+    myWindow.location.href = "http://www.ibm.com";
+  }
+</script>
+
+

El problema con el código es que window.open es asíncrono lo que implica que no se bloquee la ejecución de JavaScript hasta que la ventana haya terminado de cargarse. Por tanto, se puede ejecutar la línea siguiente a la línea window.open antes de que la nueva ventana haya terminado de cargarse. Se puede lidiar con esto poniendo un manejador onload en la nueva ventana y luego llamar desde ahí a la ventana padre (usando window.opener).

+

Diferencias en la generación HTML de JavaScript

+

JavaScript puede generar, a través de document.write, código HTML al vuelo a partir de una cadena de texto. El principal problema es cuando JavaScript está embebido dentro del documento HTML (es decir, dentro de la etiqueta <script>) y genera HTML que contiene una etiqueta <script>. Si el documento está en modo estricto de visualización, entonces se analizará la etiqueta </script> que se halla dentro de la cadena como la etiqueta de cierre de la etiqueta <script> que la contiene. El siguiente código ilustra mejor esto:

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script type='text\/javascript'>alert('Hola');<\/script>")
+</script>
+
+

Dado que la página está en modo estricto, el analizador de Mozilla verá el primer <script> y lo analizará hasta que encuentre la etiqueta de cierre correspondiente, que será cuando encuentre el primer </script>. Se hace así porque el analizador no tiene conocimiento de la existencia de JavaScript (o cualquier otro lenguaje) cuando está en modo estricto. En modo quirks, el analizador conoce de la existencia de JavaScript cuando trabaja (algo que lo ralentiza). Internet Explorer siempre funciona en modo quirks porque no soporta el auténtico XHTML. Para hacer que esto funcione en modo estricto en Mozilla se puede separar la cadena en dos partes:

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script type='text\/javascript'>alert('Hola');</" + "script>")
+</script>
+
+

Depurando JavaScript

+

Mozilla proporciona varias formas de depurar los fallos relacionados con JavaScript encontrados en las aplicaciones creadas para Internet Explorer. La primera herramienta es la consola integrada de JavaScript, mostrada en la figura 1, donde los errores y los avisos quedan registrados. Puedes acceder a ella en Mozilla yendo al menú Herramientas -> Desarrollo web -> Consola JavaScript, en Firefox 2.0 (el navegador ligero de Mozilla) en Herramientas -> Consola de errores.

+

Figura 1. Consola JavaScript

+

Javascript Console

+

La consola JavaScript puede mostrar el registro completo o sólo los errores, avisos o mensajes. El mensaje de error de la figura 1 dice que en aol.com, la línea 95 ha intentado acceder a una variable no definida llamada is_ns70. Al hacer clic en el enlace se abrira el visualizador de código interno de Mozilla con la línea en cuestión resaltada.

+

La consola además permite evaluar JavaScript. Para probar la sintaxis de JavaScript introducida, se puede escribir 1+1 en el campo de entrada y pulsar Evaluar, como muestra la figura 2.

+

Figure 2. Evaluación en la consola de JavaScript

+

JavaScript Console evaluating

+

El motor de JavaScript en Mozilla tiene integrado el soporte para la depuración convirtiéndose así en una potente herramienta para los desarrolladores de JavaScript. Venkman, mostrado en la figura 3, es un potente depurador multinavegador para JavaScript que se integra con Mozilla. Generalmente es empaquetado con los lanzamientos de Mozilla y puede ser encontrado en Herramientas -> Desarrollo web -> Depurador Javascript. En Firefox, el navegador no viene incluido. En lugar de eso, se puede descargar e instalar desde la página del proyecto Venkman. Además se pueden encontrar tutoriales en la página de desarrollo, ubicada en la página de desarrollo de Venkman.

+

Figura 3. Depurador de JavaScript de Mozilla

+

Mozilla's JavaScript debugger

+

El depurador de JavaScript puede depurar el código JavaScript que se ejecuta en la ventana del navegador de Mozilla. Soporta características estándar de depuración tales como puntos de interrupciones, revisión de la pila de llamadas e inspección de variables/objetos. Todas las caracterísitcas son accesibles a través de la interfaz de usuario y a través de la consola interactiva del depurador. Con la consola, se puede ejecutar código JavaScript arbitrario del mismo ámbito en el que JavaScript está siendo depurado.

+

Diferencias en CSS

+

Todos los productos basados en Mozilla poseen un fuerte soporte para CSS (hojas de estilo en cascada), en comparación con Internet Explorer y el resto de navegadores, ya que soportan la mayoría de CSS 1, CSS 2.1 y parte de CSS 3.

+

Para la mayoría de los problemas que se mostrarán a continuación, Mozilla mostrará un aviso o un error en la consola JavaScript. Se aconseja comprobar la consola JavaScript si se encuentran problemas relacionados con CSS.

+

Tipos MIME (cuando no se aplican a los ficheros CSS)

+

El problema más común relacionado con CSS ocurre cuando las definiciones CSS que se hallan dentro de los ficheros CSS referenciados no se aplican. Esto generalmente se debe a que el servidor envía un tipo MIME incorrecto para el fichero CSS. La especificación CSS dice que los ficheros CSS deberían ser servidos con el tipo MIME text/css. Mozilla respetará esto y sólo cargará los ficheros CSS con ese tipo MIME si la página web está en modo estricto de estándares. Internet Explorer siempre cargará el fichero CSS sin importar el tipo MIME con el que haya sido servido. Se considera que las páginas web están en modo estricto de estándares cuando comienzan con un doctype (tipo de documento) estricto. Para solventar este problema, se puede optar por hacer que el servidor envíe el tipo MIME correcto o eliminando el doctype. Se explicarán más a fondo los doctypes en la siguiente sección.

+

CSS y las unidades

+

Muchas aplicaciones web no usan unidades en sus hojas CSS, especialmente cuando se usa JavaScript para establecer el CSS. Mozilla permite esto sólo si la página no se visualiza en modo estricto. Dado que Internet Explorer no soporta el auténtico XHTML, no se preocupa por saber si se han especificado o no las unidades. Si la página está en modo estricto de estándares y no se usan unidades entonces Mozilla ignorará dicho estilo.

+
<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>CSS y unidades - Ejemplo</title>
+  </head>
+  <body>
+    // funciona en modo estricto
+    <div style="width: 40px; border: 1px solid black;">
+      Text
+    </div>
+
+
    // peta en modo estricto
+    <div style="width: 40; border: 1px solid black;">
+      Text
+    </div>
+  </body>
+</html>
+
+

Debido a que el ejemplo de antes tiene un doctype estricto, la página se visualizará en modo estricto de estándares. El primer div tendrá una anchura de 40px dado que se han usado unidades, pero el segundo div no tendrá anchura definida y se le asignará aquella por defecto (100%). Pasaría lo mismo si se estableciese la anchura a través de JavaScript.

+

JavaScript y CSS

+

Dado que Mozilla soporta los estándares CSS, también soporta el estándar DOM de CSS para poder establecer el estilo CSS a través de JavaScript. Se puede acceder a, eliminar y cambiar cualquier regla CSS de un elemento a través de su miembro style:

+
<div id="myDiv" style="border: 1px solid black;">
+  Text
+</div>
+
+<script>
+  var myElm = document.getElementById("myDiv");
+  myElm.style.width = "40px";
+</script>
+
+

Igualmente se puede acceder a cada atributo CSS de la misma forma. De nuevo, si la página web está en modo estricto, se debe establecer una unidad o, en caso contrario, Mozilla ignorará el comando. Cuando se consulte un valor, digamos .style.width, Mozilla e Internet Explorer devolverán una cadena de texto incluyendo la unidad. Se puede convertir dicha cadena en un número a través de parseFloat("40px").

+

Diferencias en la propiedad CSS overflow

+

Con CSS, se introduce el concepto de overflow que permite definir cómo se maneja el rebasamiento, por ejemplo, cuando la altura del contenido de un div es mayor que la altura del propio div. El estándar CSS indica que en caso de rebosamiento, si no se ha establecido dicho comportamiento, el contenido del div debe de rebosar.

+

Sin embargo, Internet Explorer no cumple esto y alargará el div más allá de su altura hasta que pueda albergar correctamente su contenido. Más abajo hay un ejemplo que muestra esta diferencia:

+
<div style="height: 100px; border: 1px solid black;">
+  <div style="height: 150px; border: 1px solid red; margin: 10px;">
+    a
+  </div>
+</div>
+
+

Como se puede apreciar en la figura 4, Mozilla reacciona como especifican los estándares del W3C. Dichos estándares dicen que, en este caso, el div interior debería rebosar por la parte inferior dado que su contenido es más alto que el de su padre. Si se prefiere utilizar el comportamiento de Internet Explorer, simplemente no habría que especificar ninguna altura para el elemento exterior.

+

Figura 4. Rebosamiento DIV

+

DIV Overflow

+

Diferencias con la pseudoclase :hover

+

El comportamiento no estándar de la pseudoclase CSS :hover ocurre en un gran número de sitios web. Generalmente se manifiesta por sí mismo cambiando el estilo de texto cuando el cursor del ratón se sitúa sobre un elemento en Mozilla, pero no en Internet Explorer. Esto es así porque el selector CSS a:hover en Internet Explorer coincide con <a href="">...</a> pero no con <a name="">...</a>, el cual establece los anclajes en HTML. El cambio de texto ocurre porque los autores encapsulan áreas con el etiquetado de anclajes:

+
CSS:
+  a:hover {color: green;}
+
+HTML:
+  <a href="foo.com">Este texto debería volverse verde cuando el cursor del ratón se sitúe sobre él.</a>
+
+  <a name="anchor-name">
+    Este texto debería cambiar el color cuando fuese sobrevolado con el cursor pero no ocurre en Internet Explorer.
+  </a>
+
+

Mozilla sigue la especificación CSS correctamente y cambiará el color a verde en este ejemplo. Se pueden utilizar dos formas para que Mozilla se comporte como Internet Explorer y no cambie el color del texto cuando éste sea sobrevolado:

+ +

Modo quirks vs. modo estándar

+

Los antiguos navegadores, como Internet Explorer 4, visualizaban los documentos bajo ciertas condiciones con el llamado modo quirks (modo chapucero). Aunque Mozilla apunta a convertirse en un navegador respetuoso con los estándares, posee 3 modos que permiten soportar las antiguas páginas creadas para comportarse de ese modo tan peculiar. El contenido de la página y la forma en la que nos es enviada determinan el modo que Mozilla debe de utilizar. Mozilla muestra dicho modo en Ver -> Información de página (o Ctrl+I) y Firefox lo hace en Herramientas -> Información de la página. El modo en el que una página es visualizada depende de su doctype.

+

Los doctypes (contracción inglesa para las declaraciones de tipos de documento) tiene este aspecto:

+

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

+

La parte azul es llamada identificador público, la verde es el identificador de sistema que es un URI.

+

Modo estándar

+

El modo estándar es el modo de visualización más estricto: visualizará las páginas según las especificaciones HTML y CSS del W3C y no permitirá ninguna chapuza. Mozilla lo usa bajo las siguientes condiciones:

+ +

Modo casi estándar

+

Mozilla introdujo el modo casi estándar por una razón: una sección en la especificación CSS 2 daba al traste con los diseños que se basaban en la maquetación con tablas que contenían pequeñas imágenes. El usuario, en lugar de ver una imagen completa, veía cada imagen separada con un pequeño espacio en blanco. La antigua página de IBM mostrada en la figura 5 es un ejemplo de ello.

+

Figura 5. Hueco en imágenes

+

Image Gap

+

El modo casi estándar se comporta de modo muy parecido al modo estándar exceptuando el problema del hueco en imágenes. Este problema ocurre frecuentemente en páginas diseñadas acorde a los estándares y hace que se muestren incorrectamente.

+

Mozilla utiliza el modo casi estándar bajo las siguientes condiciones:

+ +

Para más información, véase el problema de los huecos con imágenes

+

Modo quirks

+

Actualmente, el web está plagado de sitios con HTML no válido, además de marcado que sólo funciona gracias a fallos de ciertos navegadores. Los antiguos navegadores de Netscape, cuando eran los amos del mercado, tenían fallos. Cuando desembarcó Internet Explorer, plagió esos mismos fallos para poder visualizar correctamente las páginas de aquella época. Más tarde cuando los nuevos navegadores llegaron al mercado, la mayoría de estos fallos originales, usualmente llamados quirks, fueron mantenidos por razones de compatibilidad hacia atrás. Mozilla soporta muchos de estos fallos cuando visualiza páginas en modo quirks. Nótese que debido a estos quirks, las páginas se visualizan más lentamente que si estuvieran escritas para respetar los estándares. La mayoría de las páginas web son visualizadas utilizando este modo.

+

Mozilla utiliza este modo cuando encuentra las siguientes condiciones:

+ +

Para más información, véase Mozilla Quirks Mode Behavior and Mozilla's DOCTYPE sniffing.

+

Diferencias en eventos

+

Mozilla e Internet Explorer son prácticamente incompatibles en cuanto al manejo de eventos se refiere. El modelo de eventos de Mozilla sigue al del W3C y al de Netscape. En Internet Explorer, si una función es llamada desde un evento, se puede acceder al objeto event a través de window.event. En cambio Mozilla pasa un objeto event a los manejadores de eventos. Éstos deben de pasar específicamente el objeto a la función llamada a través de un argumento. A continuación se muestra un ejemplo multiplataforma de manejador de evento:

+
<div onclick="handleEvent(event);">Click me!</div>
+
+<script>
+  function handleEvent(evento) {
+    // if evento es null, significa que es el modelo de eventos de IE
+    // así que se utiliza window.event
+    var miEvento = evento ? evento : window.event;
+  }
+</script>
+
+

A veces, esto no funciona ya que Internet Explorer coge el parámetro evento, identificándolo como no nulo, lo que en el códico provoca que no se pueda asignar window.event. La solución consiste en comprobar la propiedad window.event:

+
<div onclick="handleEvent(event);">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    var myEvent = window.event ? window.event : aEvent;
+  }
+</script>
+
+

Las propiedades y funciones que el objeto event muestra son nombradas con frecuencia de forma diferente entre Mozilla e Internet Explorer, como muestra la tabla 4:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tabla 4. Diferencias entre las propiedades de eventos entre Mozilla e Internet Explorer
Nombre en Internet ExplorerNombre en MozillaDescripción
altKeyaltKeyPropiedad booleana que indica si la tecla alt estaba pulsada durante el evento.
cancelBubblestopPropagation()Usado para evitar que el evento sea propagado hacia los elementos ancestros en el árbol.
clientXclientXCoordenada X del evento, relativa al viewport.
clientYclientYCoordenada Y del evento, relativa al viewport.
ctrlKeyctrlKeyPropiedad booleana que indica si la tecla Ctrl estaba pulsada durante el evento.
fromElementrelatedTargetPara eventos de ratón, es el elemento desde el que partió el cursor del ratón.
keyCodekeyCodePara eventos de teclado, es el número que representa a la tecla que estaba pulsada. 0 para los eventos de ratón.
returnValuepreventDefault()Usado para evitar que se ejecute la acción por defecto del evento.
screenXscreenXCoordenada X del evento, relativa a la pantalla.
screenYscreenYCoordenada Y del evento, relativa a la pantalla.
shiftKeyshiftKeyPropiedad booleana que indica si la tecla shift estaba pulsada durante el evento.
srcElementtargetEl elemento que provocó el evento.
toElementcurrentTargetPara eventos de ratón, es el elemento al que el ratón se dirigió cuando terminó el mismo.
typetypeDevuelve el nombre del evento.
+

Añadir manejadores de eventos

+

Mozilla posee dos formas de añadir eventos a través de JavaScript. El primero, soportado por todos los navegadores, consiste en establecer propiedades de eventos directamente en los objetos. Para asignar un manejador de evento al evento click hay que pasar una referencia a dicha función manejadora a la propiedad onclick del objeto.

+
<div id="myDiv">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad(){
+    document.getElementById("myDiv").onclick = handleEvent;
+  }
+</script>
+
+

Mozilla soporta al 100% la forma estándar del W3C para añadir escuchadores a los nodos del DOM: usando los métodos addEventListener() y removeEventListener(); y además con el beneplácito de poder añadir múltiples escuchadores para un mismo tipo de evento. Ambos métodos necesitan tres parámetros: el tipo de evento, una referencia a la función y un valor booleano que indica si el escuchador debe de capturar los eventos en su fase captura. Si el booleano es puesto a false, sólo capturará los eventos en la fase burbuja. Los eventos del W3C tienen tres fases: captura, objetivo y burbuja. Cada objeto event tiene un atributo eventPhase que indica la fase en la que se encuentra el evento mediante un número de base 0. Cuando se provoca un evento, éste comienza en el elemento más externamente situado del DOM, o sea, en el elemento superior del árbol DOM. Luego va atravesando el DOM usando el camino más corto hacia el objetivo. Estamos en la fase de captura. Cuando el evento alcanza al objetivo, el evento está en la fase objetivo. Tras alcanzar el objetivo, regresa por el árbol hasta alcanzar de nuevo el nodo más exteriormente situado. Esta es la fase burbuja. El modelo de eventos de Internet Explorer sólo tiene la fase burbuja por lo que estableciendo el tercer parámetro a false se conseguirá un comportamiento igual al de Internet Explorer.

+
<div id="myDiv">Click me!</div>
+
+<script>
+
+  function handleEvent(aEvent) {
+    // if aEvent is null, it is the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad() {
+    var element = document.getElementById("myDiv");
+    element.addEventListener("click", handleEvent, false);
+  }
+</script>
+
+

Una ventaja de addEventListener() y removeEventListener() sobre asignar las propiedades es que se pueden tener múltiples escuchadores de eventos para el mismo evento, cada cual llamando a una función diferente. Así, para eliminar un escuchador de evento se necesita que los tres parámetros sean los mismos que se usaron para añadir el escuchador.

+

Mozilla no soporta el método de Internet Explorer de convertir etiquetas <script> en manejadores de eventos, la cual amplía a <script> con los atributos for y event (véase tabla 5). Tampoco suporta los métodos attachEvent ni detachEvent. En vez de eso, se deberían de usar los métodos addEventListener y removeEventListener. Internet Explorer no soporta la especificación de eventos del W3C.

+ + + + + + + + + + + + + + + + + + + +
+ Tabla 5. Diferencias en los métodos de eventos entre Mozilla e Internet Explorer
Método de Internet ExplorerMétodo de MozillaDescripción
attachEvent(tipoEvento, referenciaFuncion)addEventListener(tipoEvento, referenciaFuncion, usarCaptura)Añade un manejador de evento a un elemento del DOM
detachEvent(tipoEvento, referenciaFuncion)removeEventListener(tipoEvento, referenciaFuncion, usarCaptura)Elimina un manejador de evento a un elemento del DOM
+

Edición de texto enriquecido

+

Aunque Mozilla está orgulloso de ser el navegador más compatible con los estándares del W3C, sigue soportando funcionalidades no estándar, tales como innerHTML o editores de texto enriquecido, al no existir los equivalentes del W3C.

+

Con Mozilla 1.3 se introdujo una implementación de la característica designMode de Internet Explorer, la cual convierte a un documento HTML en un editor de texto enriquecido.

+

Una vez se ha cambiado al editor, los comandos pueden ser ejecutados en el documento a través del comando execCommand. Mozilla no soporta el atributo contentEditable de Internet Explorer para hacer editable cualquier control. Se puede usar un iframe para crear un editor de texto enriquecido.

+

Diferencias en el texto enriquecido

+

Mozilla soporta el método estándar del W3C para acceder al objeto document del iframe a través de IFrameElmRef.contentDocument mientras que Internet Explorer lo hace a través de document.frames{{ mediawiki.external('\"IframeName\"') }} y luego accede al document resultante.

+
<script>
+function getIFrameDocument(aID) {
+  var rv = null;
+
+  // if contentDocument existe, entonces es compatible con el W3C (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    rv = document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    rv = document.frames[aID].document;
+  }
+  return rv;
+}
+</script>
+
+

Otra diferencia entre Mozilla e Internet Explorer es el HTML que crea el editor de texto enriquecido. Por defecto, Mozilla usa CSS para generar marcado. Sin embargo, Mozilla permite alternar entre el modo HTML y CSS usando el comando useCSS del execCommand cambiándolo entre true y false. Internet Explorer siempre usa el marcado HTML.

+
Mozilla (CSS):
+  <span style="color: blue;">Azul</span>
+
+Mozilla (HTML):
+  <font color="blue">Azul</font>
+
+Internet Explorer:
+  <FONT color="blue">Azul</FONT>
+
+

Más abajo hay una lista de comandos soportados por execCommand en Mozilla:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tabla 6. Comandos del editor de texto enriquecido.
NombreDescripciónArgumentos
boldAlterna el modo en negrita de la selección.---
createlinkGenera un enlace HTML a partir del texto seleccionado.URL a usar para el enlace
deleteBorra la selección.---
fontnameCambia la fuente del texto seleccionado.Nombre de la fuente (por ejemplo, Arial)
fontsizeCambia el tamaño del texto seleccionado.Tamaño de la fuente
fontcolorCambia el color de la fuente del texto seleccionado.Color a usar
indentIndenta el bloque donde el se encuentra el cursor.---
inserthorizontalruleInserta un elemento <hr> en la posición del cursor.---
insertimageInserta una imagen en la posición del cursor.URL de la imagen
insertorderedlistInserta un elemento de lista ordeanda (<ol>) en la posición del cursor.---
insertunorderedlistInserta un elemento de lista no ordenada (<ul>) en la posición del cursor.---
italicAlterna el modo en cursiva de la selección.---
justifycenterCentra el contenido de la línea actual.---
justifyleftAlinea el contenido de la línea actual a la izquierda.---
justifyrightAlinea el contenido de la línea actual a la derecha.---
outdentElimina la indentación del bloque donde se halla el cursor.---
redoRehace el anterior comando deshecho.---
removeformatElimina todo el formato de la selección.---
selectallSelecciona todo el texto del editor.---
strikethroughAlterna el modo tachado del texto seleccionado.---
subscriptConvierte la selección actual a subíndice.---
superscriptConvierte la selección actual a superíndice.---
underlineAlterna el modo subrayado del texto seleccionado.---
undoDeshace el último comando ejecutado.---
unlinkElimina toda la información sobre enlaces de la selección.---
useCSSAlterna el uso de CSS en el marcado generado.Valor booleano
+

Para más información, véase Rich-Text Editing in Mozilla

+

Diferencias en XML

+

Mozilla posee un fuerte soporte para XML y todas sus tecnologías relacionadas, tales como XSLT y servicios web. Además soporta algunas extensiones no estándar de Internet Explorer, tales como XMLHttpRequest.

+

Cómo manejar XMLs

+

Al igual que ocurre con el estándar HTML, Mozilla soporta la especificación del DOM para XML del W3C, la cual permite manipular prácticamente cualquier aspecto de cualquier documento XML. Las diferencias entre el DOM para XML de Internet Explorer y Mozilla son provocadas por el comportamiento no estándar de Internet Explorer. Probablemente la diferencia más común es cómo ambos manejan los espacios en blanco en los nodos de texto. Con frecuencia cuando se genera un XML, contiene espacios en blanco entre los nodos XML. Internet Explorer, cuando usa XMLNode.childNodes[] no contendrá estos nodos de espacios en blanco. En Mozilla, estos nodos se incluirán en el vector.

+
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  alert(myXMLDoc.childNodes.length);
+
+

La primera línea de JavaScript carga el documento XML y accede a su elemento ráiz (myXMLDoc) recuperando el documentElement. La segunda línea simplemente muestra el número de nodos hijos. Para la especificación del W3C, los espacios en blanco y los retornos de carro se unen bajo un nodo de texto si uno es seguido del otro. Para Mozilla, el nodo myXMLdoc tiene tres hijos: un nodo de texto que contiene un retorno de carro y dos espacios, el nodo myns:foo, y otro nodo de texto con un retorno de carro. No obstante, Internet Explorer no obedece esto y devolverá "1" para el anterior código, considerando sólamente el nodo myns:foo Por elli, para recorrer los nodos hijos y desechar los nodos de texto se deben distinguir tales nodos del resto.

+

Como se mencionó antes, cada nodo tiene un atributo nodeType que representa el tipo de nodo. Por ejemplo, un nodo elemento tiene tipo 1 mientras que un nodo documento posee tipo 9. Para distinguir los nodos de texto se deben buscar los nodos de tipo 3 (nodos de texto) y los de tipo 8 (nodos comentario).

+
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  var myChildren = myXMLDoc.childNodes;
+
+  for (var run = 0; run < myChildren.length; run++){
+    if ( (myChildren[run].nodeType != 3) &&
+          myChildren[run].nodeType != 8) ){
+      // not a text or comment node
+    };
+  };
+
+

Islas de datos XML

+

Internet Explorer posee una peculiaridad no estándar llamada islas de datos XML (XML data islands), que permite incrustar XML dentro de un documento HTML usando la etiqueta HTML no estándar <xml>. Mozilla no soporta las islas de datos XML y las maneja como etiquetas HTML desconocidas. Se puede obtener la misma funcionalidad utilizando XHTML, sin embargo, debido a que el soporte de Internet Explorer para XHTML es débil, esto no es generalmente una opción.

+

Una solución multiplataforma es usar analizadores DOM que generan, a partir de un documento XML serializado, el documento XML analizado. Mozilla usa la clase DOMParser la cual toma una cadena serializada crea un documento XML a partir de ella. En Internet Explorer se puede obtener la misma funcionalidad usando ActiveX. El nuevo Microsoft.XMLDOM genera y posee el método un método llamado loadXML que acepta una cadena de texto y genera un documento a partir de ella. El siguiente código muestra su funcionamiento:

+

 

+
Isla de datos XML para IE
+  ..
+  <xml id="xmldataisland">
+    <foo>bar</foo>
+  </xml>
+
+Solución multiplataforma:
+  var xmlString = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>";
+
+  var myDocument;
+
+  if (document.implementation.createDocument){
+    // Mozilla, create a new DOMParser
+    var parser = new DOMParser();
+    myDocument = parser.parseFromString(xmlString, "text/xml");
+  } else if (window.ActiveXObject){
+    // Internet Explorer, create a new XML document using ActiveX
+    // and use loadXML as a DOM parser.
+    myDocument = new ActiveXObject("Microsoft.XMLDOM");
+    myDocument.async="false";
+
+    myDocument.loadXML(xmlString);
+  }
+
+

Peticiones HTTP para XML

+

Internet Explorer permite el envío y recuperación de ficheros XML usando la clase de MSXML XMLHTTP, instanciada a través de ActiveX usando new ActiveXObject("Msxml2.XMLHTTP") o new ActiveXObject("Microsoft.XMLHTTP"). Dado que no hay un método estándar para hacer esto, Mozilla proporciona la misma funcionalidad en el objeto global XMLHttpRequest de JavaScript. El objeto genera peticiones asíncronas de modo predeterminado.

+

Tras instanciar el objeto usando new XMLHttpRequest() se puede usar el método open para especificar qué tipo de petición (GET o POST) se quiere usar, qué fichero se va a cargar y si será una petición asíncrona o no. Si la llamada es asíncrona, será necesario facilitar al miembro onload una referencia a una función que será invocada una vez la petición ha sido completada.

+

Petición síncrona:

+
  var myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "data.xml", false);
+
+  myXMLHTTPRequest.send(null);
+
+  var myXMLDocument = myXMLHTTPRequest.responseXML;
+
+

Petición asíncrona:

+
  var myXMLHTTPRequest;
+
+  function xmlLoaded() {
+    var myXMLDocument = myXMLHTTPRequest.responseXML;
+  }
+
+  function loadXML(){
+    myXMLHTTPRequest = new XMLHttpRequest();
+
+    myXMLHTTPRequest.open("GET", "data.xml", true);
+
+    myXMLHTTPRequest.onload = xmlLoaded;
+
+    myXMLHTTPRequest.send(null);
+  }
+
+

La tabla 7 muestra una lista de métodos y propiedades disponibles para el objeto XMLHttpRequest de Mozilla.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tabla 7. Métodos y propiedades XMLHttpRequest
NombreDescripción
void abort()Detiene la petición si ésta aún está en curso.
string getAllResponseHeaders()Devuelve todas las cabeceras de respuesta como una única cadena.
string getResponseHeader(string headerName)Devuelve el valor de la cabecera especificada.
functionRef onerrorLa función que se le asigne será invocada cuando ocurran errores durante una petición.
functionRef onloadLa función que se le asigne será invocada cuando la petición se complete con éxito y se haya recibido una respuesta. Se usa con las peticiones asíncronas.
void open (string HTTP_Method, string URL)
+
+ void open (string HTTP_Method, string URL, boolean async, string userName, string password)		Inicializa la petición para la URL especificada, usando tanto GET o POST como el método HTTP. Para enviar la petición, es necesario llamar al método send() tras la inicialización. Si async se establece a false, la petición será síncrona. De modo predeterminado es asíncrona. Opcionalmente se puede especificar un nombre de usuario y contraseña por si la necesita la URL facilitada. Initializes the request for the specified URL, using either GET or POST as the HTTP method. To send the request, call the send() method after initialization. If async is false, the request is synchronous, else it defaults to asynchronous. Optionally, you can specify a username and password for the given URL needed.
int readyStateEstado de la petición. Valores posibles: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
0UNINITIALIZED - open() aún no ha sido llamado.
1LOADING - send() aún no ha sido llamado.
2LOADED - send() ha sido llamado y las cabeceras y el estado están disponibles.
3INTERACTIVE - Descargando. responseText contiene datos parciales.
4COMPLETED - Todas las operaciones han sido completadas.
+
string responseTextCadena que contiene la respuesta.
DOMDocument responseXMLDocumento DOM que contiene la respuesta.
void send(variant body)Realiza la petición. Si body está definido, será enviado como el cuerpo de la petición POST. body puede ser un documento XML o una cadena conteniendo un XML serializado.
void setRequestHeader (string headerName, string headerValue)Establece una cabecera de petición HTTP para usarla en la petición HTTP. Ha de ser llamada tras invocar al método open().
string statusEl código de estado de la respuesta HTTP.
+

Diferencias en XSLT

+

Mozilla soporta las transformaciones XSL 1.0 (XSLT). Además permite a JavaScript realizar tanto transformaciones XSLT como consultas XPath sobre un documento.

+

Mozilla necesita que se le pase el fichero XML y XSLT que contiene la hoja de estilos con un tipo MIME XML (text/xml o application/xml). Este es el motivo más común por el cual los XSLT no funcionan en Mozilla pero sí en Internet Explorer. En ese sentido, Mozilla es estricto.

+

Internet Explorer 5.0 y 5.5 soportan el borrador de XSLT, el cual es sustancialmente diferente a la recomendación final 1.0. La forma más fácil de distinguir la versión en la que ha sido escrito un fichero XSLT es mirando su espacio de nombres. El espacio de nombres para la recomendación 1.0 es http://www.w3.org/1999/XSL/Transform mientras que el espacio de nombres del borrador es http://www.w3.org/TR/WD-xsl. Internet Explorer 6 soporta el borrador por razones de compatibilidad hacia atrás. Mozilla no soporta dicho borrador, sólo la recomendación final.

+

Si el XSLT necesita distinguir el navegador, se puede consultar la propiedad de sistema "xsl:vendor". El motor XSLT de Mozilla devolverá "Transformiix" mientras que Internet Explorer devolverá "Microsoft".

+
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'">
+  <!-- Marcado específico de Mozilla -->
+</xsl:if>
+<xsl:if test="system-property('xsl:vendor') = 'Microsoft'">
+  <!-- Marcado específico de Internet Explorer -->
+</xsl:if>
+
+

Mozilla también proporciona una interfaz de JavaScript para XSLT, permitiendo a un sitio web completar transformaciones XSLT en memoria. Esto puede hacerse usando el objeto global de JavaScript XSLTProcessor. XSLTProcessor necesita que se carge el XML y los ficheros XSLT ya que necesita sus documentos DOM. El documento XSLT importado por XSLTProcessor permite manipular los parámetros XSLT. XSLTProcessor puede generar un documento independiente utilizando transformToDocument() o puede crear un fragmento de documento utilizando transformToFragment() para poder ser anexado fácilmente a otro documento DOM. Más abajo se muestra un ejemplo:

+
var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+
+// carga el fichero XSLT example1.xsl
+var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xsl", false);
+myXMLHTTPRequest.send(null);
+
+// obtiene el documento XML y lo importa
+xslStylesheet = myXMLHTTPRequest.responseXML;
+
+xsltProcessor.importStylesheet(xslStylesheet);
+
+// carga el fichero xml example1.xml
+myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xml", false);
+myXMLHTTPRequest.send(null);
+
+var xmlSource = myXMLHTTPRequest.responseXML;
+
+var resultDocument = xsltProcessor.transformToDocument(xmlSource);
+
+

Tras crear un objeto XSLTProcessor, hay que cargar el fichero XSLT a través de XMLHttpRequest. El miembro responseXML del XMLHttpRequest contiene el documento XML del fichero XSLT, el cuas es pasado a importStylesheet. Luego hay que usar de nuevo XMLHttpRequest para cargar el documento XML que va a ser transformado. Ese documento es entonces pasado al método transformToDocument de XSLTProcessor. La tabla 8 muestra una lista con los métodos de XSLTProcessor.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Tabla 8. Métodos de XSLTProcessor
MétodoDescripción
void importStylesheet(Node styleSheet)Importa la hoja de estilo XSLT. El argumento styleSheet es el nodo ráiz del documento DOM de la hoja de estilos XSLT.
DocumentFragment transformToFragment(Node source, Document owner)Transforma el nodo source aplicando la hoja de estilos importada con el método importStylesheet y genera un DocumentFragment. owner especifica a qué documento DOM debe anexarse el DocumentFragment, haciéndolo compatible con ese documento DOM.
Document transformToDocument(Node source)Transforma el nodo source aplicando la hoja de estilos importada a través del método importStylesheet y devuelve un documento DOM independiente.
void setParameter(String namespaceURI, String localName, Variant value)Establece un parámetro en la hoja de estilos XSLT importada.
Variant getParameter(String namespaceURI, String localName)Obtiene el valor de un parámetro en la hoja de estilos XSLT importada.
void removeParameter(String namespaceURI, String localName)Elimina todos los parámetros establecidos para la hoja de estilos XSLT importada y establece sus valores a los predeterminados para el XSLT.
void clearParameters()Elimina todos los parámetros establecidos y establece sus valores a los predeterminados en la hoja de estilos XSLT.
void reset()Elimina todos los parámetros y hojas de estilos.
+
+

Original Document Information

+ +
+

 

diff --git "a/files/es/modo_casi_est\303\241ndar_de_gecko/index.html" "b/files/es/modo_casi_est\303\241ndar_de_gecko/index.html" new file mode 100644 index 0000000000..4a0f6c1c38 --- /dev/null +++ "b/files/es/modo_casi_est\303\241ndar_de_gecko/index.html" @@ -0,0 +1,46 @@ +--- +title: Modo casi estándar de Gecko +slug: Modo_casi_estándar_de_Gecko +tags: + - Desarrollo_Web + - Estándares_Web + - Gecko + - HTML + - Todas_las_Categorías +--- +

 

+

 

+

A partir de Mozilla 1.0.1 y 1.1 beta, hay un nuevo modo de renderizado llamado "casi estándar". Este modo se añade a los ya tradicionales y modo "estándar".

+

El modo de renderizado "casi estándar" es exactamente igual que el "modo estándar", en todo excepto en un detalle, la disposición de las imágenes dentro de las tablas se maneja tal y como se hace en el modo "Quirks" de Gecko, que es bastante comparable con la de otros navegadores, tales como Internet Explorer. Esto implica que los diseños basados en tablas con imágenes troceadas tienen más probabilidades de mostrarse correctamente en los navegadores basados en Gecko que utilicen el motor de renderizado de Mozilla 1.0.1 o posterior, tanto en el modo "Quirks" como en el "casi estándar". Léase el artículo "Imágenes, tablas y huecos misteriosos" para una explicación detallada de cómo son tratados estos diseños en el modo "estándar".

+

Salvo esta diferencia, el modo "casi estándar" y el "estándar" son exactamente iguales en términos de maquetación y otros comportamientos.

+

Activando el modo "casi estándar"

+

Los DOCTYPEs que activan el modo "casi estándar" son los que contienen:

+ +

Un DOCTYPE completo contiene un identificador público y un identificador de sistema. Al hablar sobre los DOCTYPEs, mucha gente se refiere a ellos como "con URI" o "sin URI". El URI es el identificador de sistema. Por ejemplo, considere el DOCTYPE siguiente:

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+			"http://www.w3.org/TR/html4/loose.dtd">
+

Tiene dos partes:

+ +

Así, cualquier DOCTYPE HTML 4.01 transicional o Frameset con un URI (identificador de sistema) activará el modo "casi estándar", como cualquier DOCTYPE XHTML 1.0 transicional o Frameset, con o sin URI. Los Autores sin relación con IBM no deben preocuparse por su DOCTYPE a medida, también activará el modo "casi estándar".

+

Recomendaciones

+ +

Más en MDC

+ +

Enlaces relacionados

+ diff --git a/files/es/mozilla/add-ons/add-on_manager/index.html b/files/es/mozilla/add-ons/add-on_manager/index.html new file mode 100644 index 0000000000..a36c26e1be --- /dev/null +++ b/files/es/mozilla/add-ons/add-on_manager/index.html @@ -0,0 +1,61 @@ +--- +title: Add-on Manager +slug: Mozilla/Add-ons/Add-on_Manager +translation_of: Mozilla/JavaScript_code_modules/Add-on_Manager +--- +

{{ gecko_minversion_header("2.0") }}

+ +

el Add-on Manager es responsable de manejar  todos los add-ons instalados en la aplicación. A traves de la informacion de la APIs acerca de todos los add-ons instalados puede ser recuperado y nuevos  add-ons pueden ser instalados. Las APIs son diseñadas para ser genericas y soportar diferentes tipos de add-ons.

+ +

Muchas funciones en la interfaz de  Add-on Manager operan de manera asincrona  retornando resultados a traves de devoluciones de llamadas que se pasan a las funciones . Estas devoluciones pueden ser llamadas inmediatamente, mientras la funcion inicial se esta ejecutando o apenas despues de su ejecución dependiendo de cuando la informacion requerida este disponible.

+ +

Accediendo add-ons Instalados

+ +

la informacion acerca de add-ons instalados puede ser recuperada a traves de main AddonManager API. Todas sus funciones son asincronas, significando que una funcion de devolucion de llamada debe ser pasada para recibir las instancias de Addon. La devolucion de llamada puede solamente ser llamada despues de la funcion de retorno de la API . Por ejemplo:

+ +
Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+AddonManager.getAllAddons(function(aAddons) {
+  // Here aAddons is an array of Addon objects
+});
+// This code will execute before the code inside the callback
+
+ +

Notificaciones acerca de cambios de add-ons instalados se envian a cualquier AddonListener registrado. Deben ser registrados a traves del metodo addAddonListener().

+ +

Instalando Nuevos add-ons

+ +

Nuevos add-ons pueden ser instalados usando los metodos getInstallForFile() o getInstallForURL() del objeto AddonManager. Estos pasaran una instancia de AddonInstall al invocador, el cual puede ser usado para instaladar add-ons:

+ +
Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+AddonManager.getInstallForURL("http://www.foo.com/test.xpi", function(aInstall) {
+  // aInstall is an instance of AddonInstall
+  aInstall.install();
+}, "application/x-xpinstall");
+
+ +

El progreso de  AddonInstall puede ser monitoreado usando IntallListener. Un escucha puede ser registrado por el uso especifico de un metodo  addListener() o por todas las instalaciones usando el metodo addInstallListener().

+ +

Encontrando updates

+ +

Add-ons pueden ser chekeados por updates usando el metodo findUpdates(). Debe pasarse como parametro un  UpdateListener para recibir informacion acerca de la compatibilidad asi como tambien la informacion acerca la nueva actualizacion. Cualquier nueva actualizacion es retornada como un AddonInstall el cual esta listo para ser descargado e instalado.

+ +

{{ h1_gecko_minversion("Detectando cambios en los add-ons", "7.0") }}

+ +

Tambien puedes conseguir una lista de add-ons que al iniciar fueron modificados de varias maneras. El metodo  getStartupChanges()  permite encontrar que add-ons fueron instalados, eliminados, modificados, habilitados o deshabilitados al iniciar la aplicacion.

+ +

Por ejemplo, para saber los add-ons que fueron deshabilitados al iniciar la aplicacion se utilizaria:

+ +
Components.utils.import("resource://gre/modules/AddonManager.jsm");
+
+let addonIDs = AddonManager.getStartupChanges(AddonManager.STARTUP_CHANGE_DISABLED);
+if (addonIDs.length > 0) {
+  // addonIDs is now an array of the add-on IDs that have been disabled
+alert("Note: " + addonIDs.length + " add-ons have been disabled.");
+}
+
+ +

Vease

+ +

{{ ListSubpages() }}

diff --git a/files/es/mozilla/add-ons/add-on_repository/index.html b/files/es/mozilla/add-ons/add-on_repository/index.html new file mode 100644 index 0000000000..0ef9c73f61 --- /dev/null +++ b/files/es/mozilla/add-ons/add-on_repository/index.html @@ -0,0 +1,159 @@ +--- +title: Add-on Repository +slug: Mozilla/Add-ons/Add-on_Repository +translation_of: Mozilla/JavaScript_code_modules/Add-on_Repository +--- +

{{ gecko_minversion_header("2") }}

+ +

 

+ +

El repositorio Add-on es responsable de encontrar complementos disponibles, este provee una interface para interactuar con la página addons.mozilla.org (AMO). Su API provee varias URL que se puede visitar para explorar los complementos del repositorio. El API también ofrece dos formas de buscar y recuperar un vector de Addon instancias: {{ manch("retrieveRecommendedAddons") }}, la cual retorna una lista de complementos recomendados  y {{ manch("searchAddons") }}, el cual realiza una búsqueda en el repositorio.

+ +

Estas búsquedas son asíncronas, los resultados se pasan al objeto SearchCallback proporcionado cuando se completa la búsqueda. Los resultados pasados al objeto SearchCallback solo incluyen complementos que son compatibles con la aplicación actual y que aún no están instalados o en proceso de instalación. AddonRepository solo puede procesar una búsqueda a la vez. Una nueva búsqueda fallará inmediatamente si el AddonRepository ya está manejando otra solicitud de búsqueda.

+ +

Para importar el módulo de código del Repositorio Add-on , use:

+ +

 

+ +
Components.utils.import("resource://gre/modules/AddonRepository.jsm");
+
+ +

Method overview

+ + + + + + + + + + + + + + + + + + + +
string getRecommendedURL()
string getSearchURL(in string searchTerms)
void cancelSearch()
void retrieveRecommendedAddons(in integer maxResults, in SearchCallback callback)
void searchAddons(in string searchTerms, in integer maxResults, in SearchCallback callback)
+ +

Properties

+ + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
homepageURLstringThe URL of the repository site's home page.
isSearchingbooleantrue if a search is currently in progress; otherwise false.
+ +

Methods

+ +

getRecommendedURL()

+ +

Returns the URL that can be visited to see recommended add-ons.

+ +
string getRecommendedURL();
+ +
Parameters
+ +

None.

+ +
Return value
+ +

An URL indicating the repository's page of recommended add-ons.

+ +

getSearchURL()

+ +

Returns an URL of a web page that can be visited to see search results for the specified search terms.

+ +
string getSearchURL(
+  in string searchTerms
+);
+ +
Parameters
+ +
+
searchTerms
+
Search terms used to search the repository.
+
+ +
Return value
+ +

The URL of the search results page for the specified search terms.

+ +

cancelSearch()

+ +

Cancels the search in progress. Does nothing if there is no search in progress.

+ +
void cancelSearch();
+ +
Parameters
+ +

None.

+ +

retrieveRecommendedAddons()

+ +

Begins a search for recommended add-ons in the repository. The list of recommended add-ons frequently changes. Results will be passed to the given SearchCallback callback.

+ +
void retrieveRecommendedAddons(
+  in integer maxResults,
+  in SearchCallback callback
+);
+ +
Parameters
+ +
+
maxResults
+
The maximum number of results to return.
+
callback
+
The SearchCallback callback to which results will be delivered.
+
+ +

searchAddons()

+ +

Begins a search for add-ons in this repository. Results will be passed to the given callback.

+ +
string searchAddons(
+  in string searchTerms,
+  in integer maxResults,
+  in SearchCallback callback
+);
+ +
Parameters
+ +
+
searchTerms
+
The search terms to pass to AMO. The results will match what you would get if you typed this string in the search box on the AMO web site.
+
maxResults
+
The maximum number of results to return.
+
callback
+
The SearchCallback callback to pass results to.
+
+ +

See also

+ + + +
+
+ +
+
diff --git a/files/es/mozilla/add-ons/amo/index.html b/files/es/mozilla/add-ons/amo/index.html new file mode 100644 index 0000000000..0845e54e3d --- /dev/null +++ b/files/es/mozilla/add-ons/amo/index.html @@ -0,0 +1,11 @@ +--- +title: AMO +slug: Mozilla/Add-ons/AMO +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO +--- +

{{AddonSidebar}}

+ +

Content to be added.

diff --git a/files/es/mozilla/add-ons/amo/policy/contacto/index.html b/files/es/mozilla/add-ons/amo/policy/contacto/index.html new file mode 100644 index 0000000000..be8cdd9998 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/contacto/index.html @@ -0,0 +1,26 @@ +--- +title: Información de contacto de AMO +slug: Mozilla/Add-ons/AMO/Policy/Contacto +translation_of: Mozilla/Add-ons#Contact_us +--- +

{{AddonSidebar}}

+ +

Gracias por tu interés en contactar al equipo de Extensiones de Mozilla. Por favor lee esta página cuidadosamente para asegurarte de que tu solicitud se dirija al lugar correcto.

+ +

Soporte de Complementos

+ +

SI tienes alguna pregunta de soporte con respecto a un complemento en particular, tal como "¿Cómo utilizo este complemento?" o "¿Por qué no funciona de manera apropiada?", por favor contacta al autor del complemento a través de los canales de soporte listados en la página de listado de extensiones.

+ +

Preguntas sobre la Revisión de Complementos

+ +

Si tienes alguna pregunta acerca de la revisión de un complemento o deseas reportar una violación de políticas, por favor escríbenos a amo-editors@mozilla.org. Casi todos los reportes de complementos se incluyen bajo esta categoría. Por favor, asegúrate de incluir un enlace al complemento en cuestión y una descripción detallada de tu pregunta o duda.

+ +

Vulnerabilidades de Seguridad de un Complemento

+ +

Si has descubierto una vulnerabilidad de seguridad en un complemento, incluso si no está alojado aquí, Mozilla está muy interesada en tu descubrimiento y trabajará con el desarrollador del complemento para corregir el problema lo más pronto posible. Los problemas de seguridad de complementos pueden ser reportados confidencialmente en Bugzilla o por e-mail mediante amo-admins@mozilla.org.

+ +

Funcionalidad y Desarrollo del Sitio Web

+ +

Si has encontrado un problema con el sitio, nos gustaría solucionarlo. Por favor reporta un informe de error en Github, incluyendo la localización del problema y cómo lo encontraste.

+ +

How to get in touch with us regarding these policies or your add-on.

diff --git a/files/es/mozilla/add-ons/amo/policy/index.html b/files/es/mozilla/add-ons/amo/policy/index.html new file mode 100644 index 0000000000..5fffee1dc8 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/index.html @@ -0,0 +1,21 @@ +--- +title: AMO Policies +slug: Mozilla/Add-ons/AMO/Policy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO/Policy +--- +

{{AddonSidebar}}

+ +

Mozilla is committed to ensuring a great add-ons experience for our users and developers. Please review the policies below before submitting your add-on.

+ +
+
Developer Agreement
+
Effective January 5, 2016
Review Process
+
Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.
Featured Add-ons
+
How up-and-coming add-ons become featured and what's involved in the process.
Contacting us + +

How to get in touch with us regarding these policies or your add-on.

+ +
diff --git a/files/es/mozilla/add-ons/amo/policy/revisiones/index.html b/files/es/mozilla/add-ons/amo/policy/revisiones/index.html new file mode 100644 index 0000000000..1ae4eed402 --- /dev/null +++ b/files/es/mozilla/add-ons/amo/policy/revisiones/index.html @@ -0,0 +1,157 @@ +--- +title: Normativas para los complementos +slug: Mozilla/Add-ons/AMO/Policy/Revisiones +translation_of: Mozilla/Add-ons/AMO/Policy/Reviews +--- +

{{AddonSidebar}}

+ +

Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.

+ +

All add-ons are subject to these policies, regardless of how they are distributed. Add-ons that do not comply with these policies may be subject to rejection or disabling by Mozilla.

+ +

No Surprises

+ +

Surprises can be appropriate in many situations, but they are not welcome when user security, privacy and control are at stake. It is extremely important to be as transparent as possible when submitting an add-on. Users should be able to easily discern what the functionality of your add-on is and not be presented with unexpected user experiences after installing it.

+ +

Unexpected Features

+ +

“Unexpected” features are those that are unrelated to the add-on’s primary function, and are not likely from the add-on name or description to be expected by a user installing that add-on.

+ +

Should an add-on include any unexpected feature that falls into one of the following categories:

+ + + +

Then the “unexpected” feature(s) must adhere to all of the following requirements:

+ + + +

Content

+ +

Add-ons that make use of Mozilla trademarks must comply with the Mozilla Trademark Policy. If the add-on uses “Firefox” in its name, the naming standard the add-on is expected to follow is “<Add-on name> for Firefox”.

+ +

In addition, add-ons listed on addons.mozilla.org (AMO) must adhere to the following policies:

+ + + +

Submission Guidelines

+ +

Add-ons must function only as described, and should provide an appealing user experience. Based on the description of the add-on, a user must be able to understand and use the add-on’s features without requiring expert knowledge. Tips on how to create a good user experience for your add-on can be found here.

+ +

During review, the add-on undergoes basic testing in addition to code review. To facilitate the functional testing, the add-on author must provide testing information and, if applicable, testing credentials required to use the add-on if an account is needed for any part of the add-on’s functionality.

+ +

Issues brought up during review must be addressed using best efforts. If corrections have been requested, the new version should not contain unrelated changes, as this complicates the review process and can lead to further rejections.

+ +

Source Code Submission

+ +

Add-ons may contain transpiled, obfuscated, minified or otherwise machine-generated code, but Mozilla needs to review a copy of the human-readable source code. The author must provide this information to Mozilla during submission as well as instructions on how to reproduce the build.

+ +

The provided source code will be reviewed by an administrator and will not be redistributed in any way. The code will only be used for the purpose of reviewing the add-on. Failure to provide this information will result in rejection.

+ +

Please read our Source Code Submission guidelines to avoid unexpected rejections.

+ +

Development Practices

+ +

In general, developers are free to maintain their add-ons in the manner they choose. However, in order to maintain appropriate data security and effectively review code, we do have certain technical requirements that all add-ons must meet. In particular, potentially dangerous APIs may only be used in ways that are demonstrably safe, and code within add-ons that cannot be verified as behaving safely and correctly may need to be refactored.

+ +

While any code, method or practice in a submitted add-on is subject to review and rejection, the following requirements are of particular importance:

+ + + +

Data Disclosure, Collection and Management

+ +

You must disclose how the add-on collects, uses, stores and shares user data in the privacy policy field on AMO. Mozilla expects that the add-on limits data collection whenever possible, in keeping with Mozilla’s Lean Data Practices and Mozilla’s Data Privacy Principles, and uses the data only for the purpose for which it was originally collected.

+ +

User data includes all information the add-on collects, regardless of the manner. It can be personal data actively provided by the user (such as a name or email address), technical data (such as operating system, build ID, version numbers, crash reports, activation, updates), and interaction or activity data (add-on activity data, visited URLs, console logs), including interactions with Firefox.

+ +

The add-on’s privacy policy must be the full policy text; it cannot be a link to an externally hosted privacy policy. In addition, the privacy policy must:

+ + + +

A summary of this information must be included in the add-on’s listing description. Finally, you and your add-on must also comply with all applicable data privacy laws as well as any other laws that may apply to your specific add-on.

+ +

User Interactions & Technical Data

+ + + +

Cookies

+ + + +

Personal Data

+ + + +

Additional Privacy Protocols

+ + + +

Security Vulnerabilities

+ +

Because add-ons run in an environment with elevated privileges relative to ordinary web pages, they present a very serious set of security considerations. They have the potential to open security holes not only in the add-ons themselves, but also in the browser, in web pages, and, in particularly distressing cases, the entire system the browser is running on.

+ +

As a result, we take our security policies very seriously and apply them to all add-ons, whether hosted on AMO or not. We expect all add-ons to be secure and well-maintained in handling both their own data and their user’s data. They must also securely manage all of their interactions with the web, the browser and the operating system.

+ +

Monetization

+ + + +

Compliance & Blocklisting

+ +

For add-ons that don’t meet these policies, Mozilla may reject or blocklist affected versions or entire add-ons, depending on the extent of their non-compliance.

+ +

Generally, Mozilla will attempt to contact the add-on’s developer(s) and provide a reasonable time frame for the problems to be corrected before a block is deployed. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.

+ +

Mozilla reserves the right to block or delete the developer’s account on addons.mozilla.org, thereby preventing further use of the service.

diff --git a/files/es/mozilla/add-ons/code_snippets/index.html b/files/es/mozilla/add-ons/code_snippets/index.html new file mode 100644 index 0000000000..1d5fd8b90d --- /dev/null +++ b/files/es/mozilla/add-ons/code_snippets/index.html @@ -0,0 +1,138 @@ +--- +title: Code snippets +slug: Mozilla/Add-ons/Code_snippets +tags: + - Add-ons + - Code snippets + - Extensions + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Code_snippets +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}

+ +

This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in XULRunner applications, as well as in actual Mozilla code itself.

+ +

These examples demonstrate how to accomplish basic tasks that might not be immediately obvious.

+ +

General

+ +
+
Examples and demos from MDN articles
+
A collection of examples and demos from articles.
+
Window code
+
Opening and manipulating windows
+
Toolbar
+
Toolbar related code
+
Sidebar
+
Sidebar related code
+
Forms
+
Forms related code
+
XML
+
Code used to parse, write, manipulate, etc. XML
+
File I/O
+
Code used to read, write and process files
+
Drag & Drop
+
Code used to setup and handle drag and drop events
+
Dialogs
+
Code used to display and process dialog boxes
+
Alerts and Notifications
+
Modal and non-modal ways to notify users
+
Preferences
+
Code used to read, write, and modify preferences
+
JS XPCOM
+
Code used to define and call XPCOM components in JavaScript
+
Running applications
+
Code used to run other applications
+
<canvas> related
+
WHAT WG Canvas-related code
+
Signing a XPI
+
How to sign an XPI with PKI
+
Delayed Execution
+
Performing background operations.
+
Miscellaneous
+
Miscellaneous useful code fragments
+
HTML to DOM
+
Using a hidden browser element to parse HTML to a window's DOM
+
+ +

JavaScript libraries

+ +

Here are some JavaScript libraries that may come in handy.

+ +
+
StringView
+
A library that implements a StringView view for JavaScript typed arrays. This lets you access data in typed arrays using C-like string functions.
+
Rosetta
+
By default, the only possible standardized scripting language for HTML is ECMAScript. Hence, if you are going to use another scripting language you might expect that most of the browsers will not recognize it. Nevertheless, the increasing computational power of modern browsers together with the introduction of typed arrays in ECMAScript allow us, in theory, to build full virtual machines in pure ECMAScript. Therefore, it is also possible, in theory, to use ECMAScript for a smaller task: parsing exotic programming languages (i.e., creating compilers). This snippets shows a possible way to start from.
+
+ +

Browser-oriented code

+ +
+
Tabbed browser code (Firefox/SeaMonkey)
+
Basic operations, such as page loading, with the tabbed browser, which is the heart of Mozilla's browser applications
+
Cookies
+
Reading, writing, modifying, and removing cookies
+
Page Loading
+
Code used to load pages, reload pages, and listen for page loads
+
Interaction between privileged and non-privileged code
+
How to communicate from extensions to websites and vice-versa.
+
Downloading Files
+
Code to download files, images, and to monitor download progress
+
Password Manager
+
Code used to read and write passwords to/from the integrated password manager
+
Bookmarks
+
Code used to read and write bookmarks
+
JavaScript Debugger Service
+
Code used to interact with the JavaScript Debugger Service
+
+ +

SVG

+ +
+
General
+
General information and utilities
+
SVG Animation
+
Animate SVG using JavaScript and SMIL
+
SVG Interacting with Script
+
Using JavaScript and DOM events to create interactive SVG
+
Embedding SVG in HTML and XUL
+
Using SVG to enhance HTML or XUL based markup
+
+ +

XUL Widgets

+ +
+
HTML in XUL for Rich Tooltips
+
Dynamically embed HTML into a XUL element to attain markup in a tooltip
+
Label and description
+
Special uses and line breaking examples
+
Tree
+
Setup and manipulation of trees using XUL and JS
+
Scrollbar
+
Changing style of scrollbars. Applies to scrollbars in browser and iframe as well.
+
Autocomplete
+
Code used to enable form autocomplete in a browser
+
Boxes
+
Tips and tricks when using boxes as containers
+
Tabbox
+
Removing and manipulating tabs in a tabbox
+
+ +

Windows-specific

+ +
+
Finding Window Handles (HWND) (Firefox)
+
How to use Windows API calls to find various kinds of Mozilla window handles. Window handles can be used for IPC and Accessibility purposes.
+
Using the Windows Registry with XPCOM
+
How to read, write, modify, delete, enumerate, and watch registry keys and values.
+
+ + + +

The content at MozillaZine Example Code is slowly being moved here, but you can still find useful examples there for now.

diff --git a/files/es/mozilla/add-ons/code_snippets/queryselector/index.html b/files/es/mozilla/add-ons/code_snippets/queryselector/index.html new file mode 100644 index 0000000000..ff3b7d1258 --- /dev/null +++ b/files/es/mozilla/add-ons/code_snippets/queryselector/index.html @@ -0,0 +1,99 @@ +--- +title: QuerySelector +slug: Mozilla/Add-ons/Code_snippets/QuerySelector +translation_of: Archive/Add-ons/Code_snippets/QuerySelector +--- +

 {{ fx_minversion_header(3.5) }}

+ +

Siguiendo con lineas de otros frameworks como "jQuery" o "Prototype", acortar el nombre de "querySelector" podria ser conveniente:

+ +
function $ (selector, el) {
+     if (!el) {el = document;}
+     return el.querySelector(selector);
+}
+function $$ (selector, el) {
+     if (!el) {el = document;}
+     return el.querySelectorAll(selector);
+     // Note: the returned object is a NodeList.
+     // If you'd like to convert it to a Array for convenience, use this instead:
+     // return Array.prototype.slice.call(el.querySelectorAll(selector));
+}
+alert($('#myID').id);
+
+ +

(Note that while using the Firefox Web Console, the above functions are available automatically.)

+ +

Both XUL and even XML can be easily made supportable (an alternative approach to the following would be to add ChromeWindow.prototype or Window.prototype, accessing this.document.querySelector, or following the jQuery style of chaining by returning 'this' within each prototype method of $()):

+ +
HTMLDocument.prototype.$ = function (selector) { // Only for HTML
+    return this.querySelector(selector);
+};
+
+Example:
+
+<h1>Test!</h1>
+<script>
+HTMLDocument.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+alert(document.$('h1')); // [object HTMLHeadingElement]
+</script>
+
+ +
XULDocument.prototype.$ = function (selector) { // Only for XUL
+    return this.querySelector(selector);
+};
+
+Example:
+
+<label value="Test!"/>
+<script type="text/javascript"><![CDATA[
+XULDocument.prototype.$ = function (selector) { // Only for XUL
+    return this.querySelector(selector);
+};
+
+alert(document.$('label')); // [object XULElement]
+]]></script>
+
+ +
Document.prototype.$ = function (selector) { // Only for plain XML
+    return this.querySelector(selector);
+};
+var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document <foo xmlns="someNS"/>
+var bar = foo.createElementNS('someNS', 'bar'); // add <bar xmlns="someNS"/>
+foo.documentElement.appendChild(bar);
+alert(foo.$('bar').nodeName); // gives 'bar'
+
+ +
Element.prototype.$ = function (selector) { // Works for HTML, XUL, and plain XML
+    return this.querySelector(selector);
+};
+
+HTML example:
+<h1><a>Test!<a/></h1>
+<script>
+Element.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A'
+
+XUL example:
+<hbox><vbox/></hbox>
+<script type="text/javascript"><![CDATA[
+Element.prototype.$ = function (selector) {
+    return this.querySelector(selector);
+};
+var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
+alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox
+]]></script>
+
+XML example:
+<foo xmlns="someNS"><bar/></foo> in document earlier
+var foo = document.getElementsByTagNameNS('someNS', 'foo')[0];
+alert(foo.$('bar'));
+
+
+ +

Note that for plain XML, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type ID in XML, though it is in HTML and XUL), nor will it work with xml:id.

+ +

However, it will work with attribute selectors that target non-prefixed attributes (such as 'id', but not xml:id: http://www.w3.org/TR/selectors-api/#resolving) (even though CSS3 does support namespaced attribute selectors: http://www.w3.org/TR/css3-selectors/#attrnmsp and potentially xml:id as #: http://www.w3.org/TR/css3-selectors/#id-selectors ).

diff --git a/files/es/mozilla/add-ons/index.html b/files/es/mozilla/add-ons/index.html new file mode 100644 index 0000000000..5a24f7e862 --- /dev/null +++ b/files/es/mozilla/add-ons/index.html @@ -0,0 +1,104 @@ +--- +title: Complementos +slug: Mozilla/Add-ons +tags: + - Complementos + - Destino + - Mozilla + - extensiones +translation_of: Mozilla/Add-ons +--- +
{{AddonSidebar}}
+ +
 
+ +

Los complementos permiten a los desarrolladores extender y modificar las funcionalidades de Firefox. Están escritos utilizando las tecnologías estándar Web - JavaScript, HTML y CSS - más algunas APIs dedicadas JavaScript. Entre otras cosas, un complemento puede:

+ + + +

Existen varios tipos de complementos, pero el tipo más común son las extensiones.

+ +

Desarrollo de las extensiones

+ +

En el pasado, habían varias juegos de herramientas para el desarrollo de las extensiones de Firefox, pero al finalizar el mes de noviembre de 2017, las extensiones deben crearse utilizando las API de WebExtensions. Los otros juegos de herramientas, incluidos los complementos de overlay, los complementos de bootstrap y el complemento SDK, se espera que queden obsoletos durante el mismo período de tiempo.

+ +

Si usted está escribiendo un nuevo complemento, le recomendamos que utilice la API de WebExtensions.

+ +

Las WebExtensions están diseñadas para que sean compatibles cross-browser. En la mayoría de los casos podran ser ejecutadas por Chrome, Edge, y Opera con pocos o ningún cambio. También serán completamente compatibles con el multiproceso Firefox.
+
+ Vea las APIs soportada actualmente por Firefox y otros navegadores. Seguimos diseñando e implementando nuevas API en respuesta a las necesidades de los desarrolladores.
+
+ La mayoría de las APIs de WebExtensions estarán también disponibles para Firefox para Android.

+ +

Migrar un complemento ya existente

+ +

Si tu mantienes extensiones que están por ser remplazados, tales como XUL overlay, bootstrapped, o extensiones basadas en SDK, le recomendamos que investige como portarlos a WebExtensions. Existen algunos recursos de portación en MDN.

+ +

Hemos recolectado recursos en una página wiki para proporcionar soporte a los desarrolladores mediante la transición. Para empezar, utilice la herramienta de compatibilidad Lookup Tool para ver si su herramienta será afectada.

+ +

Publicar los complementos

+ +

Addons.mozilla.org, comúnmente conocidos como "AMO," es un sitio oficial de Mozilla para que los desarrolladores registren los complementos, y para que los usuarios los descubran. Al subir tu complemento a AMO, puedes participar en nuestra comunidad de usuarios y creadores y encontrar una audiencia para tu complemento.

+ +

No es requerido que tu registres tu complemento en AMO, pero tu complemento será firmado por Mozilla o los usuarios no podrán instalarlos.

+ +

Para obtener una visión general del proceso de publicación de su complemento, consulte Firme y distribuya su complemento.

+ +

Otros tipos de complementos

+ +

Además de las extensiones, hay algunos otros tipos de complemento que permiten a los usuarios personalizar Firefox. Estos complementos incluyen:

+ + + +
+

Contáctenos

+ +

Puede utilizar los vínculos siguientes para obtener ayuda, mantenerse al día con las noticias sobre los complementos y darnos su opinión.

+ +

Foro de complementos

+ +

Use el foro de discusión sobre complementos para discutir todos los aspectos del desarrollo de los complementos y para obtener ayuda.

+ +

Listas de correo

+ +

Utilice la lista dev-addons para discutir el desarrollo del ecosistema de complementos, incluyendo el desarrollo del sistema WebExtensions y de AMO:

+ + + +

Utilice la lista webextensions-support para obtener ayuda para portar o realizar la transición a WebExtensions:

+ +

webextensions-support lista de información
+ webextensions-support archivos

+ +

IRC

+ +

Si eres un fan de IRC, puedes ponerte en contacto:

+ + + +

Informar de problemas

+ +

Vulnerabilidades de seguridad

+ +

Si descubre una vulnerabilidad de segurida en un complemento, incluso si no está hospedado en un sitio de Mozilla, permítanos saberlo y trabajaremos con el desarrollador para corregir el problema. Por favor, infórmelos confidencialmente en Bugzilla o enviando un correo a amo-admins@mozilla.org.

+ +

Errores en addons.mozilla.org (AMO)

+ +

Si encuentra un problema en el sitio, nos encantaría arreglarlo. Por favor, presente un informe de error e incluya tantos detalles como sean posibles.

diff --git a/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html b/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html new file mode 100644 index 0000000000..3c490d101e --- /dev/null +++ b/files/es/mozilla/add-ons/lineamientos_de_complementos/index.html @@ -0,0 +1,113 @@ +--- +title: Líneamientos Generales para complementos +slug: Mozilla/Add-ons/Lineamientos_de_complementos +tags: + - Complementos +translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/' +--- +

Estos lineamientos para complementos se crearon para fomentar una comunidad de desarrolladores de complementos abierta y diversa mientras que al mismo tiempo se garantiza una excelente experiencia de usuario. Se aplican a todos los complementos y actualizaciones complementos independientemente del lugar donde se alojan y también se aplican a las personalizaciones realizadas por instaladores que configuran Firefox sin necesidad de utilizar un complemento. Los complementos alojados en AMO están sujetos a políticas adicionales.

+

Se transparente

+ +

Se Respetuoso con los Usuarios

+ +

Se Seguro

+ +

Se Estable

+ +

Excepciones

+ +

Otras Excepciones pueden aplicar.

+

Cumplimiento

+

Los complementos que no sigan estos lineamientos pueden calificar para ser bloqueados, dependiendo en la extensión de las violaciones. Los lineamientos calificados con la palabra debe son especialmente importantes y las violaciones de estos seguramente en una nominación a ser bloqueados.

+

El equipo de complementos hará lo mejor posible para tratar de contactar al desarrollador de complementos y proveerá un lapso de tiempo razonable para resolver los problemas antes de que el bloqueo se haga efectivo. Si el complemento es considerado malicioso o su desarrollador es imposible de localizar o posee repetitivas violaciones el bloqueo se llevará acabo de inmediato.

+

Las violaciones de los lineamientos deben ser reportadas vía Bugzilla, bajo evangelización tecnológica > Complementos. Las preguntas deben ser publicadas en elCanal de IRC #addons.

+

Estos lineamientos pueden cambiar en futuro. Todas las actualizaciones serán anunciadas en el Blog de complementos.

diff --git a/files/es/mozilla/add-ons/overlay_extensions/index.html b/files/es/mozilla/add-ons/overlay_extensions/index.html new file mode 100644 index 0000000000..1522f3ba35 --- /dev/null +++ b/files/es/mozilla/add-ons/overlay_extensions/index.html @@ -0,0 +1,57 @@ +--- +title: Extensiones de Superposición +slug: Mozilla/Add-ons/Overlay_Extensions +tags: + - Extensions + - Overlay + - extensiones +translation_of: Archive/Add-ons/Overlay_Extensions +--- +

Esta página contiene enlaces a la documentaciónpara aproximarse al desarrollo de extensiones basadas en aplicaciones Gecko que usa:

+ + + +

Antes de que Gecko 2.0 fuera lanzado esta era la única manera de desarrollar extensiones. Ahora hay dos técnicas alternativas: extensionen sin reinicio y extensiones complementarias basadas SDK. Las privilegiadas APIs de  JavaScript descriptas aquí, aún pueden ser utilizadas por las técnicas más nuevas.

+ +

Escuela XUL

+ +

La escuela XUL es una exhaustivo tutorial para el desarrollo de complementos que se enfoca en el desarrollo de extensiones Firefox pero mayoritariamente aplicable a otras aplicaciones basadas en Gecko.

+ +

Más recursos

+ +
+
+
+
Configurando tu entorno
+
Configurar la aplicación para el desarollo de la extensión.
+
XUL
+
Tutoriales and referencia para el lenguaje de interfaz de usuario utilizadopor las extensiones XUL.
+
Trozos de códigos
+
Código de muestra para muchas de las cosas que querrás hacer.
+
Instalando extensiones
+
Cómo instalar una extensión copiando los archivos de extensión en un directorio de instalación de la aplicación.
+
Firefox add-ons developer guide
+
Una guía para desarrollar extensiones de superposición.
+
+
+ +
+
+
Módulos de código JavaScript
+
Módulos JavaScript disponibles para desarrolladores de extensiones.
+
Preferencias de una extension
+
Cómo especificar las preferencias para tu extensión que aparecerá en el administrador de complementos.
+
Preguntas frecuentes
+
Cuestiones comunes en el desarrollo de una extensión.
+
Empaquetado de la extensión
+
Cómo se empaquetan e instalan las extensiones.
+
Extensiones binarias de Firefox 
+
Crear extensiones binarias para Firefox.
+
+
+
+ +

 

diff --git a/files/es/mozilla/add-ons/sdk/builder/index.html b/files/es/mozilla/add-ons/sdk/builder/index.html new file mode 100644 index 0000000000..be566483c0 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/builder/index.html @@ -0,0 +1,13 @@ +--- +title: Builder +slug: Mozilla/Add-ons/SDK/Builder +translation_of: Archive/Add-ons/Add-on_SDK/Builder +--- +

El Builder Add-on fue basado en un ambiente de desarrollo web que permitió a desarrolladores la creación de add-ons usando las APIs de SDK, pero sin tener que usar las herramientas de linea de comando cfx. El cual fue retirado el primero de Abril 2014 y ahora el dominio direccionara a esta pagina "builder.addons.mozilla.org".
+
+ Sí tu solo has usado el SDK a trabes del Builder, probablemente ya sabes lo que necesitas para el desarrollo con en el SDK. En el alto nivel y el bajo nivel de las APIs usadas por Builder add-ons son exactamente la misma para el Builder y SDK. Para cambiar al  SDK se necesita:

+ diff --git a/files/es/mozilla/add-ons/sdk/index.html b/files/es/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..6681924d2e --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/index.html @@ -0,0 +1,84 @@ +--- +title: Add-on SDK +slug: Mozilla/Add-ons/SDK +tags: + - Add-on SDK + - Jetpack +translation_of: Archive/Add-ons/Add-on_SDK +--- +

Usando el Add-on SDK puedes crear complementos de Firefox utilizando tecnologías Web estándar: JavaScript, HTML y CSS. El SDK incluye una API de JavaScript que se puede utilizar para crear complementos y herramientas para creación, funcionamiento, pruebas y empaquetado de complementos.

+ +
+

Tutoriales

+ +
+
+
+
Comencemos
+
Como instalar el SDK y usar el cfx tool para desarrollar, testear y empaquetar complementos.
+
Interactuar con el browser
+
Abrir paginas web, "escuchar" la carga de paginas, y listar las paginas abiertas.
+
Técnicas de desarrollo
+
Aprender sobre las técnicas comunes de desarrollo, como las pruebas unitarias, logueos, creacion de modulos reutilizables, localizacion, y desarrollo para mobile.
+
+
+ +
+
+
Creando compenentes para la intefaz de usuario
+
Crear componentes de interfaz de usuario, tales como botones de barras de herramientas, menús contextuales, elementos de menu y cuadros de dialogo.
+
Modificación de páginas web
+
Modificar las páginas que coincidan con un patron de URL o dinámicamente modificar una ficha particular.
+
Juntando todo
+
Tutorial del ejemplo de add-on Annotator.
+
+
+
+ +
+

Guias

+ +
+
+
+
Guide de cómo contribuir
+
Aprender como empezar a contribuir en la SDK, y sobre los idiomas más importantes que se utilizan en el código SDK, como los modulos, classes y herancias, propiedad privada, y procesos de contenido.
+
SDK infrastructura
+
Aspectos de la tecnología subyacente de la SDK: modulos, la identificacion del Programa, y las reglas que definen la compatibilidad de Firefox .
+
Contentido scripts
+
Una guía detallada para trabajar con scripts.
+
+
+ +
+
+
Idiomas SDK
+
Los eventos del framework del SDK y las diferenciación entre add-on scripts y scripts de contenido.
+
XUL migración
+
Una guía para incluir add-ons XUL al SDK. Esta guia incluye una comparación de dos conjuntos de herramientas y un ejemplo para trabajar incluyendo un XUL add-on.
+
+
+
+ +
+

Referencias

+ +
+
+
+
APIs de alto nivel
+
Documentación de referencia para las API del SDK de alto nivel.
+
Referencias de herramientas
+
Documentación de referencia para la herramienta cfx usada para el desarrollo, pruebas, y empaquetado add-ons, la consola global usada para el registro, el paquete package.json.
+
+
+ +
+
+
APIs de bajo nivel
+
Documentación de referencia para las API del SDK de bajo nivel.
+
+
+
+ +

 

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html new file mode 100644 index 0000000000..f493c0ab0e --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_context_menu_item/index.html @@ -0,0 +1,119 @@ +--- +title: Agregar una opción al Menú Contextual +slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item +tags: + - Add-on SDK + - Firefox + - Guide +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Context_Menu_Item +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+
+ +

Para agregar opciones y submenús al menú contextual de Firefox, se usa el módulo context-menu.

+ +

Aquí se presenta un add-on que agrega una nueva opción al menú contextual. La opción es mostrada en cualquier parte donde sea seleccionado algo en la página. Cuando se hace clic, la selección es enviada al código principal del add-on, el cual simplemente lo registra:

+ +
var contextMenu = require("sdk/context-menu");
+ var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});
+ +

Pruebe lo siguiente: ejecute el add-on, cargue una página web, seleccione algún texto y haga clic derecho sobre el. Debe aparecer una nueva opción:

+ +

+ +

Haga clic en ella, y la selección es registrada en la terminal:

+ +
info: elephantine lizard
+
+ +

Detalles

+ +

Todo lo que hace este add-on es construir una opción en el menú contextual. No se necesita agregarla: una vez construida la opción, esta es agregada automáticamente en el contexto correcto. En este caso el constructor toma cuatro opciones: label, context, contentScript, y onMessage.

+ +

label

+ +

El label es simplemente la cadena de caracteres que es mostrada.

+ +

context

+ +

El context describe las circunstancias en las cuales la opción debe ser mostrada. El módulo context-menu  provee varios contextos simples integrados, incluyendo el SelectionContext(), el cual refiere: muestra la opción cuando algo es seleccionado en la página.

+ +

Si estos contextos simples no son suficientes, puede definir contextos más sofisticados usando scripts.

+ +

contentScript

+ +

Este adjunta un script a la opción. En este caso el script escucha hasta que se hace clic en la opción, luego envía un mensaje al add-on que contiene el texto seleccionado.

+ +

onMessage

+ +

La propiedad onMessage proporciona una vía para que el código del add-on responda a los mensajes del script integrado a la opción del menú contextual. En este caso solo registra el texto seleccionado.

+ +

Por lo tanto:

+ +
    +
  1. El usuario o la usuaria hace clic en la opción
    2. +
  2. se activa el evento click del script de contenido, retorna el texto seleccionado y envía un mensaje al add-on
    3. +
  3. se activa el evento message del add-on, la función responsable en el código del add-on pasa el texto seleccionado, el cual registra
    4. +
+ +

Más opciones

+ +

Agregar una imágen

+ +

Se puede agregar una imagen a la opción del menú contextual con la opción image. Esta es una URL que apunta a un icono de tamaño 16x16 que es mostrado a la izquierda de la opción en el menú contextual. Generalmente se guarda la imagen en el directorio "data" del add-on, y se construye la URL usando self.data.url():

+ +
var self = require("sdk/self");
+
+var contextMenu = require("sdk/context-menu");
+var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  image: self.data.url("icon-16.png"),
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});
+ +

Agregar tecla de acceso directo

+ +
+

Nuevo en Firefox 35.

+
+ +

Desde Firefox 35 es posible especificar una tecla de acceso directo usando la opción accessKey. Esta debe ser una cadena de un solo carácter. Al presionar la tecla se selecciona la opción cuando el menú contextual esta abierto:

+ +
var contextMenu = require("sdk/context-menu");
+var menuItem = contextMenu.Item({
+  label: "Log Selection",
+  context: contextMenu.SelectionContext(),
+  contentScript: 'self.on("click", function () {' +
+                 '  var text = window.getSelection().toString();' +
+                 '  self.postMessage(text);' +
+                 '});',
+  accessKey: "l",
+  onMessage: function (selectionText) {
+    console.log(selectionText);
+  }
+});
+
+ +

 

+ +

Conozca más

+ +

Para conocer más sobre el módulo context-menu, puede ver la referencia de la API context-menu.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html new file mode 100644 index 0000000000..f30a388a88 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/add_a_menu_item_to_firefox/index.html @@ -0,0 +1,114 @@ +--- +title: Agregar una opción de Menú en Firefox +slug: Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Add_a_Menu_Item_to_Firefox +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+
+ +
+

Si esta usando jpm en vez de cfx, el método para usar módulos externos es diferente, y debe leer la versión jmp en vez de esta guía.

+
+ +

El SDK aún no posee una API para agregar nuevas opciones de menú a Firefox. Pero su diseño permite que sus funcionalidades sean ampliadas, por lo tanto cualquiera puede desarrollar y publicar módulos para que sean usados por los desarrolladores de add-on. Afortunadamente, Erik Vold escribió el módulo menuitems que permite agregar opciones al menú.

+ +

Este manual cumple con una doble funcionalidad. Describe el método general para usar un módulo externo, de terceras partes en el add-on, y describe como agregar una opción al menú usando el módulo menuitems en particular.

+ +

Primero, cree una nuevo add-on. Cree un directorio llamado "clickme" donde desee, ingrese en el directorio recien creado y ejecute cfx init.

+ +
mkdir clickme
+cd clickme
+cfx init
+
+ +

La estructura del directorio sera creada:

+ + + +
 
+ +

Instalar menuitems

+ +

Cree un directorio llamado "packages" dentro del directorio "clickme". Luego descargue el paquete menuitems package desde https://github.com/mykmelez/menuitems-jplib y extraiga el archivo dentro del directorio "packages" que acaba de crear:

+ +
mkdir packages
+cd packages
+tar -xf ../erikvold-menuitems-jplib-d80630c.zip
+
+ +

Dependencias del Módulo

+ +

Si los módulos de terceras partes solo dependen de los módulos de SDK, puede usarlos inmediatamente, pero si dependen de otros módulos de terceras partes, debe instalar también esas dependencias.

+ +

En el directorio principal del paquete encontrará un archivo llamado "package.json". Abralo y busque una entrada llamada "dependencies". La entrada para el paquete menuitems es:

+ +
"dependencies": ["vold-utils"]
+
+ +

Esto significa que se debe instalar el paquete vold-utils, lo cual puede hacerse descargándolo desde https://github.com/mykmelez/vold-utils-jplib y agregándolo dentro del directorio packages junto a menuitems.

+ +

Usar menuitems

+ +

La documentación para el módulo menuitems nos dice que creemos una opción del menú usando MenuItem(). De las opciones aceptadas por MenuItem(), usaremos este resumido conjunto:

+ + + +
+
+
var menuitem = require("menuitems").Menuitem({
+  id: "clickme",
+  menuid: "menu_ToolsPopup",
+  label: "Click Me!",
+  onCommand: function() {
+    console.log("clicked");
+  },
+  insertbefore: "menu_pageInfo"
+});
+ +
 
+
+
+ +

Luego, se debe declarar la dependencia en el paquete menuitems. En el archivo package.json del add-on se agrega:

+ +
"dependencies": "menuitems"
+
+ +

Note que debido al bug 663480, si agrega una línea dependencies en package.json, y usa cualquier módulo del SDK, tendrá que declarar la dependencia a ese paquete integrado, como sigue:

+ +
"dependencies": ["menuitems", "addon-sdk"]
+
+ +

Ahora esta todo listo. Ejecute el add-on y verá la nueva opción de menú en el menú Herramientas: seleccionela y verá aparecer en la terminal info: clicked.

+ +

Advertencia

+ +

Los módulos de terceras partes son una manera genial de usar funcionalidades que no son proporcionadas directamente por SDK, pero debido a que los módulos de terceras partes usan APIs de bajo nivel pueden no funcionar correctamente en las nuevas versiones de Firefox.

+ +

 

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..91bde8e45c --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html @@ -0,0 +1,85 @@ +--- +title: Agregar un Botón a la Barra de Herramienta +slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+ +

Este manual usa la API action button, que esta disponible solo para Firefox 29 en adelante.

+
+ +

Para agregar un botón a la barra de herramientas, use los módulos action button o toggle button.

+ +

Cree un nuevo directorio, accese al directorio recien creado, y ejecute cfx init.

+ +

Luego guarde estos tres iconos en el directrio "data":

+ + + + + + + + + + + + + + + + +
icon-16.png
icon-32.png
icon-64.png
+ +

Luego abra el archivo llamado "main.js" en el directorio "lib" y agregue el siguiente código:

+ +
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+ +

Ahora ejecute el add-on con cfx run. El botón es agregado a la barra de herramientas en la parte superior de la ventana del navegador:

+ +

Puede fijar la localización inicial del botón, pero el usuario puede moverlo usando la función para personalizar del navegador. El atributo id es obligatorio, y es usado para recordar la posición del botón, por lo tanto no debería cambiarse en las versiones siguientes del add-on.

+ +

Hacer clic en el botón cargará la página https://www.mozilla.org/ en una nueva pestaña.

+ +

Especificar el icono

+ +

La propiedad del icono puede especificar un solo icono o una colección de iconos de diferentes tamaños, como en el ejemplo anterior. Si se especifica una colección de iconos de diferentes tamaños el navegador automáticamente seleccionará el que mejor se ajuste a la resolución de pantalla y el lugar en la IU del navegador que alberga el botón. Lea mas sobre especificar múltiples iconos.

+ +

El archivo del icono debe ser empacado con el add-on: no debe referenciar a una archivo remoto.

+ +

Puede cambiar el icono en cualquier momento estableciendo la propiedad del icono del botón. Puede cambiar el icono, y otros atributos de estado, incluso globalmente, para una ventana o pestaña específica. Lea mas sobre la actualización de estado.

+ +

Fijando un panel

+ +

Si necesita fijar un panel a un botón, use la API toggle button. Esta es similar a la API action button pero agrega la propiedad booleana checked cuyo estado cambia cuando el botón es seleccionado. Para fijar el panel, pase el botón al método show() del panel. Para más detalles sobre esto, vea la documentación de toggle button.

+ +

Mostrar contenido mas sofisticado

+ +

Para crear interfaces de usuario más complejas de las que son posibles con solo un botón, use la AIP toolbar. Con la API toolbar obtiene una franja horizontal completa de la interfaz de usuario. Puede agregar botones a la barra de herramientas y también marcos, que pueden contener HTML, CSS, y JavaScript.

+ +

Aprender más

+ + diff --git a/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html new file mode 100644 index 0000000000..8a65788a64 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/display_a_popup/index.html @@ -0,0 +1,164 @@ +--- +title: Mostrar una ventana emergente +slug: Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Display_a_Popup +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+ +

Esta guía usa la API action button, la cual esta solo disponible para Firefox 29 en adelante.

+
+ +

Para mostrar un dialogo emergente, se usa el modulo panel.  El contenido de un panel se define usando HTML. Puede ejecutar scripts de contenido en el panel: aunque el script que se ejecuta en el panel no pueda acceder directamente al código principal del add-on, puede intercambiar mensajes entre el script del panel y el código del add-on.

+ +

En esta guía se crea un add-on que agrega un botón de acción en la barra de herramientas,  que al ser presionado muestra un panel. El panel solo contiene un elemento <textarea> : cuando se presiona la tecla return, el contenido del <textarea> es enviado al código principal del add-on. El código principal del add-on registra el mensaje en la terminal.

+ +

El add-on consta de seis archivos:

+ + + +

El archivo "main.js" contiene lo siguiente:

+ +
var data = require("sdk/self").data;
+// Construct a panel, loading its content from the "text-entry.html"
+// file in the "data" directory, and loading the "get-text.js" script
+// into it.
+var text_entry = require("sdk/panel").Panel({
+  contentURL: data.url("text-entry.html"),
+  contentScriptFile: data.url("get-text.js")
+});
+
+// Create a button
+require("sdk/ui/button/action").ActionButton({
+  id: "show-panel",
+  label: "Show Panel",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+// Show the panel when the user clicks the button.
+function handleClick(state) {
+  text_entry.show();
+}
+
+// When the panel is displayed it generated an event called
+// "show": we will listen for that event and when it happens,
+// send our own "show" event to the panel's script, so the
+// script can prepare the panel for display.
+text_entry.on("show", function() {
+  text_entry.port.emit("show");
+});
+
+// Listen for messages called "text-entered" coming from
+// the content script. The message payload is the text the user
+// entered.
+// In this implementation we'll just log the text to the console.
+text_entry.port.on("text-entered", function (text) {
+  console.log(text);
+  text_entry.hide();
+});
+ +

El script de contenido "get-text.js" muestra:

+ +
+
// When the user hits return, send the "text-entered"
+// message to main.js.
+// The message payload is the contents of the edit box.
+var textArea = document.getElementById("edit-box");
+textArea.addEventListener('keyup', function onkeyup(event) {
+  if (event.keyCode == 13) {
+    // Remove the newline.
+    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
+    self.port.emit("text-entered", text);
+    textArea.value = '';
+  }
+}, false);
+// Listen for the "show" event being sent from the
+// main add-on code. It means that the panel's about
+// to be shown.
+//
+// Set the focus to the text area so the user can
+// just start typing.
+self.port.on("show", function onShow() {
+  textArea.focus();
+});
+ +
 
+
+ +

Finalmente, el archivo "text-entry.html" define el elemento <textarea> :

+ +
+
+
<html>
+<head>
+    <style type="text/css" media="all">
+      textarea {
+        margin: 10px;
+      }
+      body {
+        background-color: gray;
+      }
+    </style>
+  </head>
+<body>
+    <textarea rows="13" cols="33" id="edit-box"></textarea>
+  </body>
+</html>
+ +
 
+
+
+ +

Por último, se guardan estos tres iconos en el directorio "data":

+ + + + + + + + + + + + + + + + +
icon-16.png
icon-32.png
icon-64.png
+ +

Pruebe lo siguiente: el archivo "main.js" se encuentra en el directorio lib del add-on, y los otros cinco archivos el el directorio data :

+ +
my-addon/
+         data/
+              get-text.js
+              icon-16.png
+              icon-32.png
+              icon-64.png
+              text-entry.html
+         lib/
+             main.js
+
+ +

Ejecute el add-on, presione el botón, y debería poder ver el panel. Escriba algo en el cuadro de texto y presione "return" y verá la salida en la terminal.

+ +

Desde Firefox 30 en adelante, si usa botón del selección simple, puede acoplar el panel al botón.

+ +

Conozca más

+ +

Para conocer más sobre el módulo panel, puede ver la referencia de la API panel.

+ +

Para conocer más sobre los botones,  puede ver la referencia de la API action button y toggle button.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html new file mode 100644 index 0000000000..04c901f4f9 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/getting_started/index.html @@ -0,0 +1,214 @@ +--- +title: Primeros pasos +slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started +translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29 +--- +

Este tutorial recorre los pasos para la creación de un add-on simple usando el SDK.

+ +

Requisitos previos

+ +

Para crear add-ons para Firefox usando el SDK, primero es necesario seguir las instrucciones para instalar y activar el SDK. Una vez hecho esto, se debe ir directamente a la terminal.

+ +

Inicializar un add-on vacío

+ +

En la terminal, cree un directorio nuevo. El directorio no tiene que estar bajo la raíz del SDK: puede crearlo donde quiera. Dirijase al directorio recién creado, escriba cfx init, y presione la tecla enter o intro:

+ +
mkdir my-addon
+cd my-addon
+cfx init
+
+ +

Visualizará una salida como esta:

+ +
* lib directory created
+* data directory created
+* test directory created
+* doc directory created
+* README.md written
+* package.json written
+* test/test-main.js written
+* lib/main.js written
+* doc/main.md written
+Your sample add-on is now ready for testing:
+try "cfx test" and then "cfx run". Have fun!"
+
+ +

Implementar el add-on

+ +

Ahora puede escribir el código del add-on, el cual se ubica en el archivo "main.js" en el directorio "lib". Este archivo fue creado en el paso anterior. Abra este archivo y agrege el siguiente código:

+ +
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+
+ +

Guarde los cambios.

+ +

Luego, guarde estos tres iconos en el directorio "data" :

+ + + + + + + + + + + + + + + + +
icon-16.png
icon-32.png
icon-64.png
+ +

Vuelva a la terminal y escriba:

+ +
cfx run
+
+ +

Esta es la orden del SDK para ejecutar una nueva instancia de Firefox con el add-on instalado. Cuando el Firefox es presentado, en la esquina superior derecha se puede ver un ícono con el logo de Firefox. Al hacer clic en el ícono, se abrirá una pestaña nueva donde se cargará la página https://www.mozilla.org/.

+ +
+

Es posible que vea un error como este al ejecutar cfx run:

+ +
A given cfx option has an inappropriate value:
+  ZIP does not support timestamps before 1980
+ +

De ser así, se ha encontrado con el bug 1005412, lo que significa que los archivos de los iconos que ha descargado están arrojando una marca de tiempo de 1970. Hasta que este error sea resuelto, la solución es usar la orden touch para actualizar la marca de tiempo:

+ +
touch icon-16.png
+
+ +

Esto es todo lo que este add-on hace. Usa dos módulos del SDK: el módulo action button, el cual permite agregar botones al navegador, y el módulo tabs, el cual permite llevar a cabo operaciones básicas con las pestañas. En este caso, se ha creado un botón cuyo icono es el logo de Firefox, y se le agregó un controlador que carga la página principal de Mozilla en una nueva pestaña al hacer clic en el icono.

+ +

Intente editar este archivo. Por ejemplo, puede cambiar la página que es cargada:

+ +
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://developer.mozilla.org/");
+}
+ +

En la terminal, ejecute de nuevo cfx run. Ahora al hacer clic en el ícono se cargará la página https://developer.mozilla.org/.

+ +

Empaquetar el add-on

+ +

Cuando el add-on este terminado y listo para distribuirse, será necesario empaquetarlo como un archivo XPI. Este es el formato de archivo de instalación para los add-ons de Firefox. Puede distribuir los archivos XPI por cuenta propia o publicarlos en https://addons.mozilla.org para que otros usuarios puedan descargarlos e instalarlos.

+ +

Para construir un XPI, solo se debe ejecutar la orden cfx xpi desde el directorio del add-on:

+ +
cfx xpi
+
+ +

Visualizará una salida como esta:

+ +
Exporting extension to my-addon.xpi.
+
+ +

Para comprobar que funcione, intente instalar el archivo XPI en el Firefox instalado en su sistema. Lo puede hacer presionando la combinación de teclas Ctrl+O (Cmd+O en Mac) desde el Firefox, o seleccionando la opción "Abrir" desde el menú "Archivo" de Firefox. Esto abrirá un diálogo de selección; navegue hasta el archivo "my-addon.xpi", abra el archivo y siga las instrucciones para instalar el add-on.

+ +

Resumen

+ +

En este tutorial se ha construido y empaquetado un add-on usando tres órdenes:

+ + + +

Estas son las tres órdenes principales, usadas cuando se desarrollan add-ons con SDK. Existe una completa documentación de referencia que cubre todas las órdenes que pueden ser usadas y todas sus opciones disponibles.

+ +

El código del add-on usa dos módulos del SDK, action button y tabs. Existe una documentación de referencia para todas las APIs de alto-nivel y bajo-nivel en el SDK.

+ +

Qué sigue?

+ +

Para tener una idea de lo que se puede hacer con las APIs del SDK, puede revisar alguno de estos tutoriales.

+ +

Técnicas avanzadas

+ +

Sobrescribiendo los módulos integrados

+ +

Los módulos del SDK que son usados para implementar un add-on están integrados en Firefox. Cuando se ejecuta o empaqueta un add-on usando cfx run o cfx xpi, el add-on usará las versiones de los módulos de la versión de Firefox que los aloja.

+ +

Como desarrollador de add-on, esto es usualmente lo deseable. Pero si esta desarrollando los módulos del SDK, por supuesto, que no lo es. En este caso se asume que se accedió al SDK desde el repositorio de GitHub y se ejecutó la secuencia de comandos bin/activate desde la raíz de checkout.

+ +

Luego al aplicar cfx run or cfx xpi, se agrega la opción "-o":

+ +
cfx run -o
+
+ +

Esto le indica a cfx a usar las copias locales de los módulos del SDK, y no aquellas en Firefox.

+ +

Desarrollar sin cfx run

+ +

Debido a que cfx run reinicia el navegador cada vez que es invocado, en ocasiones puede resultar un poco incómodo si se realizan cambios frecuentes al add-on. Un modelo alternativo de desarrollo es usar el add-on Extension Auto-Installer: el cual esta atento a la existencia de nuevos archivos XPI en un puerto determinado y los instala automáticamente. De esta manera se pueden probar los cambios realizados sin necesidad de reiniciar el navegador:

+ + + +

Incluso, se puede automatizar este proceso con una simple secuencia de comandos. Por ejemplo:

+ +
while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done
+
+ +

Nótese que el nivel de acceso definido para la terminal cuando se usa este método es diferente, comparado con el nivel de acceso usado cuando un add-on es ejecutado usando cfx run. Esto significa que si se desea ver la salida desde los mensajes de  console.log(), se debe modificar la configuración. Vea la documentación en niveles de acceso para más detalles.

+ +

Otra alternativa es con el uso de grunt y grunt-shell:

+ +
module.exports = function(grunt) {
+  'use strict';
+  require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
+  grunt.initConfig({
+    shell: {
+      xpi: {
+        command: [
+          'cd pluginpath',
+          'cfx xpi',
+          'wget --post-file=pluginname.xpi http://localhost:8888/ || echo>/dev/null'
+        ].join('&&')
+      }
+    },
+    watch: {
+      xpi: {
+        files: ['pluginpath/**'],
+        tasks: ['shell:xpi']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-shell');
+  grunt.registerTask('default', ['watch']);
+};
diff --git a/files/es/mozilla/add-ons/sdk/tutorials/index.html b/files/es/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..478d88d56a --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,146 @@ +--- +title: Tutoriales +slug: Mozilla/Add-ons/SDK/Tutorials +tags: + - Add-on SDK + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +

Esta página lista prácticos artículos funcionales sobre como lograr realizar tareas específicas usando SDK.

+ +
+

Primeros pasos

+ +
+
+
+
Instalación
+
Descargar, instalar, e inicializar el SDK en Windows, OS X y Linux.
+
+ +
+
Resolución de problemas
+
Algunos consejos para solucionar problemas comunes y obtener más ayuda.
+
+
+ +
+
+
Primeros pasos
+
Guía paso a paso para la creación de un add-on simple con SDK.
+
+
+
+ +
+

Crear interfaces de usuario

+ +
+
+
+
Agregar un botón a la barra de herramientas
+
Fijar un botón a la barra de herramientas de Add-on de Firefox.
+
Agregar una opción de menú en Firefox
+
Agregar opciones a los menú principales de Firefox.
+
+
+ +
+
+
Mostrar una ventana emergente
+
Mostrar una ventana de dialogo emergente implementando HTML y JavaScript.
+
Agregar una opción al menú contextual
+
Agregar opciones al menú contextual de Firefox
+
+
+
+ +
+

Interactuar con el navegador

+ +
+
+
+
Abrir una página web
+
Abrir una página web en una nueva pestaña o ventana del navegador usando el modulo de pestañas, y accediendo a su contenido.
+
Atender las cargas de página
+
Usar el módulo de pestañas para recibir notificaciones cuando una página web nueva sea cargada, y acceder a su contenido.
+
+
+ +
+
+
Obtener la lista de las pestañas abiertas
+
Usar el módulo de pestañas para recorrer las pestañas abiertas actualmente, y acceder a su contenido.
+
+
+
+ +
+

Modificar páginas web

+ +
+
+
+
Modificar páginas web basándose en el URL
+
Crear filtro para páginas web basándose en el URL: siempre que una página web cuyo URL coincida con el filtro cargado, ejecuta una secuencia de comandos específica en él.
+
+
+ +
+
+
Modificar la página web activa
+
Cargar de forma dinámica una secuencia de comandos dentro de la página web activa.
+
+
+
+ +
+

Técnicas de desarrollo

+ +
+
+
+
Registro de actividad
+
Registrar los mensajes a la terminal con propósitos de diagnósticos.
+
Crear módulos reusables
+
Estructurar el add-on en módulos separados para hacer más fácil el desarrollo, depuración, y mantenimiento. Crear paquetes reusables que contengan los módulos, de esta manera otros desarrolladores puedan usarlos también.
+
Pruebas unitarias
+
Escribir y ejecutar pruebas unitarias usando el marco de trabajo para pruebas de SDK.
+
Autoridad Chrome
+
Ganar acceso al objeto Components, permitiendo al add-on cargar y usar el objeto XPCOM.
+
Creando destinos del evento
+
Permite a los objetos definidos emitir sus propios eventos.
+
+
+ +
+
+
Encargarse de las cargas y descargas
+
Obtener las notificaciones cuando el add-on sea cargado y descargado por Firefox, y pasar argumentos en el add-on desde la terminal.
+
Usar módulos externos (jpm)
+
Instalar y usar módulos adicionales que no son entregados con el SDK.
+
Localización
+
Escribir código que pueda ser adaptado a otro idioma.
+
Desarrollo Móbil
+
Desarrollar add-ons para Firefox Móbil en Android.
+
Depurador de Add-on
+
Depurar el código JavaScript del add-on.
+
+
+
+ +
+

Juntando todo

+ +
+
+
+
Add-on Anotador
+
Un manual de un add-on relativamente complejo.
+
+
+
+ +

 

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html new file mode 100644 index 0000000000..655c6e098f --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/installation/index.html @@ -0,0 +1,145 @@ +--- +title: Instalación +slug: Mozilla/Add-ons/SDK/Tutorials/Installation +tags: + - Guía + - Principiante +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +

Requerimientos previos

+ +

Para desarrollar add-ons usando el SDK Add-o, necesitaras:

+ + + +

Instalación

+ +

Instalación en OS X, FreeBSD, Linux

+ +

Extrae el contenido del archivo en el lugar de tu preferencia, y navega hasta el directorio principal del SDK con una shell/command prompt. Por ejemplo:

+ +
tar -xf addon-sdk.tar.gz
+cd addon-sdk
+
+ +

Luego, si eres un usuario Bash, ejecuta:

+ +
source bin/activate
+
+ +

Si no eres un usuario Bash, debes ejecutar:

+ +
bash bin/activate
+
+ +

En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre del directorio raíz del SDK:

+ +
(addon-sdk)~/mozilla/addon-sdk >
+
+ +

La orden activate establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente activate. Si deseas una activación permanente, dirigete a Establecer activate permanentemente mas abajo.

+ +

Instalación en OS X usando Homebrew

+ +

Si usas Mac, puedes usar Homebrew para instalar el SDK, usando la siguiente orden:

+ +
brew install mozilla-addon-sdk
+ +

Una vez que el proceso se haya completado satisfactoriamente, puedes usar el programa cfx en tu línea de órdenes en cualquier momento: no necesitas ejecutar bin/activate.

+ +

Instalación en Windows

+ +

Extrae el contenido del archivo en el lugar de tu peferencia, y navega hasta el directorio principal de SDK con la terminal. Por ejemplo:

+ +
7z.exe x addon-sdk.zip
+cd addon-sdk
+
+ +

Luego ejecuta:

+ +
bin\activate
+
+ +

En la línea de entrada de tu terminal ahora deberías tener un prefijo con el nombre completo del directorio raíz del SDK:

+ +
(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>
+
+ +

La orden activate establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente activate. Si deseas una activación permanente, dirigete a Estableciendo activate permanentemente mas abajo.

+ +

Verificar congruencia

+ +

Ejecuta esto en tu terminal:

+ +
cfx
+ +

Esto debería arrojar una salida cuyas primeras lineas deberían verse algo parecido a esto, seguidas de muchas línas de información útil:

+ +
Usage: cfx [options] [command]
+ +

Este es el  programa de la línea de órdnes cfx. Es tu principal interfaz con el Add-on SDK. Lo usas para ejecutar Firefox y probar tu add-on, empaquetar tu add-on para distribuirlo, ver documentación, y ejecutar pruebas unitarias.

+ +

Si no puedes ver esto, dirigete a la página Resolución de problemas.

+ +

Próximos Pasos

+ +

Ahora, dale un vistazo al tutorial Comenzando con cfx, en el cual se explica como crear add-ons usando la herramienta cfx.

+ +

Tópicos avanzados

+ +

Usar el SDK desde Git

+ +

El SDK es desarrollado en GitHub. En vez de usar versiones en archivos comprimidos, puedes echar un vistazo al repositorio GitHub: con esto puedes usar la última versión de desarrollo en vez de usar el lanzamiento oficial.

+ +

Si usas la última versión de desarrollo, debes usarla con la versión Nightly de Firefox, y no podrás enviar a addons.mozilla.org (AMO) ningún add-ons que desarrolles, porque AMO solicita que uses el lanzamiento oficial.

+ +

Desarrollar add-ons para AMO desde Git

+ +

Si deseas desarrollar add-ons que puedan ser admitidos en AMO usando Git, entonces deberás:

+ + + +
git checkout 1.17
+
+git archive 1.17 python-lib/cuddlefish/_version.py | tar -xvf -
+ +

Establecer activate permanentemente

+ +

La orden activate establece algunas variables de entorno necesarias para el SDK. Establece las variables solo para la terminal actual. Si abres una terminal nueva, el SDK no estará activo hasta que ejecutes nuevamente activate.

+ +

Esto significa que puedes tener multiples copias del SDK en diferentes partes del disco y cambiar entre ellas, o incluso tenerlas activas al mismo tiempo en diferentes terminales.

+ +

Estableciendo estas variables de forma permanente en tu entorno para que cada nueva terminal pueda leerlas, podrás hacer que la activación sea permanente. Por lo tanto no tendrás que ejecutar activate cada vez que habrás una nueva terminal.

+ +

Debido a que el conjunto exacto de variables pueden cambiar en nuevas versiones del SDK, lo mejor es consultar la secuencia de órdenes de activación para determinar cuales variables deben ser establecidas. La activación usa diferentes secuencias de órdenes de activación para entornos bash (Linux and OS X) y ambientes Windows .

+ +

Windows

+ +

En Windows, bin\activate usa activate.bat, y puedes hacer la activación permanente usando la herramienta setx de la terminal o el Panel de Control.

+ +

Pasos para el establecimiento permanente:

+ +

Paso 0. Abre el Panel de Control > Sistema > Avanzado > Variables de Entorno.
+ Paso 1. Agrega el directorio Python y el directorio SDK\bin a la Variable de la Ruta del Sistema.
+ Path=...;C:\PYTHON26\;C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\bin
+ Paso 2. Agrega una Variable de usuario llamada CUDDLEFISH_ROOT y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"
+ Paso 3. Agrega una Variable de usuario llamada PYTHONPATH y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15\python-lib"
+ Paso 4. Agrega una Variable de usuario llamada VIRTUAL_ENV y establece su valor a "C:\Users\Omid\Documents\FirefoxAddons\addon-sdk-1.15"

+ +

Linux / OS X

+ +

En Linux y OS X, source bin/activate usan la secuencia de órdenes bash activate, y puedes hacer la activación permanente usando tu ~/.bashrc (en Linux) o ~/.bashprofile (en OS X).

+ +

Como alternativa a esto, puedes crear un enlace simbólico al programa cfx en tu directorio ~/bin:

+ +
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+
+ +

Si usaste Homebrew para instalar SDK, las variables de entorno ya estan establecidas permanentemente.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html new file mode 100644 index 0000000000..e817b40495 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/list_open_tabs/index.html @@ -0,0 +1,66 @@ +--- +title: Obtener la lista de las pestañas abiertas +slug: Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/List_Open_Tabs +--- +
+

Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.

+ +

Este ejemplo usa la API action button, la cual esta solo disponible para Firefox 29 en adelante.

+
+ +

Para listar las pestañas abiertas, se puede iterar sobre el mismo objeto tabs.

+ +

El siguiente add-on agrega un action button que registra las URLs de las pestañas abiertas cuando el/la usuario/a hacen click en el:

+ +
require("sdk/ui/button/action").ActionButton({
+  id: "list-tabs",
+  label: "List Tabs",
+  icon: "./icon-16.png",
+  onClick: listTabs
+});
+
+function listTabs() {
+  var tabs = require("sdk/tabs");
+  for (let tab of tabs)
+    console.log(tab.url);
+}
+
+ +

Observe que para hacer que esto funcione debe guardar un icono para el botón al directorio "data" del add-on con el nombre de "icon-16.png": puede descargarlo de aqui: .

+ +

Ejecute el add-on, cargue algunas pestañas y hace click en el botón. Verá en la terminal una salida similar a esta:

+ +
info: http://www.mozilla.org/en-US/about/
+info: http://www.bbc.co.uk/
+
+ +

No tiene acceso directo a ningún contenido de la pestaña. Para acceder al contenido de la pestaña necesita adjuntar un script usando tab.attach(). Este add-on adjunta un script a todas las pestañas abiertas. El script agrega un borde rojo al documento de la pestaña:

+ +
require("sdk/ui/button/action").ActionButton({
+  id: "list-tabs",
+  label: "List Tabs",
+  icon: "./icon-16.png",
+  onClick: listTabs
+});
+
+function listTabs() {
+  var tabs = require("sdk/tabs");
+  for (let tab of tabs)
+    runScript(tab);
+}
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "document.body.style.border = '5px solid red';"
+  });
+}
+
+ +

Conozca más

+ +

Para conocer más sobre las pestañas en el SDK, puede dirigirse a la referencia de tabs en la API.

+ +

Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a usando tab.attach() en el tutorial.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html new file mode 100644 index 0000000000..99642fade4 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/listen_for_page_load/index.html @@ -0,0 +1,38 @@ +--- +title: Atender las cargas de página +slug: Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Listen_for_Page_Load +--- +
Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.
+ +

Se pueden obtener notificaciones sobre la carga de nuevas paǵinas a través del módulo tabs. El siguiente add-on escucha el evento integrado de la pestaña ready  y simplemente registra el URL de cada pestaña en la medida que el/la usuario/a realiza la carga:

+ +
require("sdk/tabs").on("ready", logURL);
+
+function logURL(tab) {
+  console.log(tab.url);
+}
+
+ +

No se obtiene acceso directo a ningún contenido de la pestaña.

+ +

Para acceder al contenido de la pestaña se necesita adjuntar un script a la pestaña usando tab.attach(). Este add-on adjunto un script para abrir todas las pestañas. El script agrega un borde rojo al documento de la pestaña:

+ +
require("sdk/tabs").on("ready", runScript);
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "if (document.body) document.body.style.border = '5px solid red';"
+  });
+}
+
+ +

(Este ejemplo es solo para mostrar la idea: para implementar algo como esto, se debería usar page-mod, y especificar un "*" como el patron de coincidencia.)

+ +

Conozca más

+ +

Para conocer más sobre las pestañas en el SDK, puede dirigirse a la referencia de tabs en la API. Puede escuchar varios eventos relacionados con las pestañas incluyendo open, close, y activate.

+ +

Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a usando tab.attach() en el tutorial.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html new file mode 100644 index 0000000000..08a0a80224 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_the_page_hosted_by_a_tab/index.html @@ -0,0 +1,135 @@ +--- +title: Modificar la página web activa +slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab +--- +
+

Para seguir esta guía. necesita instalar el add-on SDK y saber lo basico sobre jpm (para Firefox 38 en adelante) o lo  basicp sobre cfx .

+ +

Esta guía usa la API action button, la cual esta disponible para Firefox 29 en adelante.

+
+ +

Para modificar la página web activa, se carga uno o mas scripts de contenido dentro de ella usando el método attach() del objeto tab. El trabajo de estos scripts es interactuar con el contenido de la web.

+ +

Aquí se muestra un ejemplo simple:

+ +
var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    require("sdk/tabs").activeTab.attach({
+      contentScript: 'document.body.style.border = "5px solid red";'
+    });
+  }
+});
+ +

Para ejecutar este ejemplo, se guarda el icono llamado "icon-16.png" en el directorio "data" del add-on. Puede descargar este icono:  .

+ +

Este add-on crea un botón con el icono de Mozilla. Este tienen un controlador de eventos del ratón el cual busca la pestaña activa y carga un script dentro de la página activa. El script es especificado usando la opción contentScript, y simplemente dibuja un borde rojo alrededor de la página.

+ +

Abra cualquier página web en el navegador, y haga clic en el botón. Deberá poder ver un borde rojo que aparecerá alrededor de la página, como este:

+ +

+ +

Mantener los Scripts de Contenido en un archivo diferente

+ +

En el ejemplo anterior, hemos pasado el contenido del script como una cadena.

+ +

A menos que el script sea extremadamente simple, manten el script como un archivo separado en el directorio data del add-on. Esto hace que el código sea más fácil de mantener, depurar, y revisar. Para hacer esto, utiliza la opción contentScriptFile y no contentScript, cuyos valores es una URL que apunta a uno o varios archivos con el contenido de los scripts.

+ +

Por ejemplo,  si guardamos el script anterior bajo el directorio data  del add-on en un archivo llamado my-script.js:

+ +
var self = require("sdk/self");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    require("sdk/tabs").activeTab.attach({
+      contentScriptFile: self.data.url("my-script.js")
+    });
+  }
+});
+
+ +

Puedes cargar mas de un script, y los scripts pueden interactuar directamente entre ellos. Por lo tanto puede cargar jQuery, y luego tu script de contenido puede usarlo.

+ +

Cargar varios archivo de script de contenido

+ +

Los datos asignados a contentScriptFile pueden ser un vector. Los scripts serán cargados en el mismo orden del vector.

+ +

En el siguiente ejemplo, estamos cargando dos scripts, first.js & second.js. Ambos scripts serán ejecutados en el mismo contexto, por lo tanto todo lo definido como publico en first.js será accedible desde second.js.

+ +
// lib/main.js
+
+var self = require("sdk/self");
+var tabs = require("sdk/tabs");
+
+require("sdk/ui/button/action").ActionButton({
+  id: "load-several",
+  label: "load several scripts",
+  icon: "./icon-16.png",
+  onClick: function () {
+    tabs.activeTab.attach({
+      contentScriptFile: [self.data.url('first.js'),
+                          self.data.url('second.js')]
+    });
+  }
+});
+
+ +

Comunicación con los Scripts de Contenido

+ +

Tu script del add-on tus scripts de contenido no pueden acceder directamente a las variables del otro o llamar a las funciones del otro, pero pueden enviarse mensajes entre ellos.

+ +

Para enciar un mensaje de un lado a otro, el remitente llama a port.emit() y el receptor escucha usando port.on().

+ + + +

Re escribamos el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido.

+ +

El script de contenido debe verse así_

+ +
// "self" is a global object in content scripts
+// Listen for a "drawBorder"
+self.port.on("drawBorder", function(color) {
+  document.body.style.border = "5px solid " + color;
+});
+
+ +

En el script del add-on, enviaremos un mensaje "drawBorder" al script de contenido usando el objeto devuelto desde attach():

+ +
var self = require("sdk/self");
+var tabs = require("sdk/tabs");
+
+var button = require("sdk/ui/button/action").ActionButton({
+  id: "style-tab",
+  label: "Style Tab",
+  icon: "./icon-16.png",
+  onClick: function() {
+    var worker = tabs.activeTab.attach({
+      contentScriptFile: self.data.url("my-script.js")
+    });
+    worker.port.emit("drawBorder", "red");
+  }
+});
+
+ +

El mensaje drawBorder no es un mensaje construido, es un mensaje que el add-on define en la llamada port.emit().

+ +

Inyectando CSS

+ +

Al contrario de la API page-mod, tab.attach() no te permite inyectar CSS directamente dentro de la página.

+ +

Para modificar el estilo de la página, tienes que usar Javascript, como en el ejemplo anteriot.

+ +

Aprender más

+ +

Para aprender más sobre el trabajo con pestañas en el SDK, puede ver la guía Open a Web Page, la guía List Open Tabs, y la tabs API reference.

+ +

Para aprender mpas sobre los scripts de contenido, puede ver content scripts guide.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html new file mode 100644 index 0000000000..e20146d84d --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/modifying_web_pages_based_on_url/index.html @@ -0,0 +1,227 @@ +--- +title: Modificar páginas web basándose en el URL +slug: Mozilla/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Modifying_Web_Pages_Based_on_URL +--- +
Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básicos de jpm (Firefox 38 en adelante) o cfx.
+ +

Para modificar cualquier página que coincida con un patrón en particular (por ejemplo, "http://example.org/") mientras es cargada, se usa el módulo page-mod.

+ +

Para crear un page-mod, es necesario especificar dos cosas:

+ + + +

El siguiente es un fragmento de código donde el script de contenido es provisto como una opción de contentScript y el patrón de URL es dado como una opción de  include:

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScript: 'document.body.innerHTML = ' +
+                 ' "<h1>Page matches ruleset</h1>";'
+});
+
+ +

Haga lo siguiente:

+ + + +

Abajo se muestra lo que debe poder ver.

+ +

+ +

Especificar el Patrón de Coincidencia

+ +

El patrón de coincidencia usa la sintaxis match-pattern. Se puede definir un patrón de coincidencia como una única cadena o una matriz.

+ +

Mantener el Script de Contenido en un Archivo Separado

+ +

En el ejemplo anterior, se definió el script de contenido como una cadena de caracteres.

+ +

A menos que el script sea muy simple, se debe mantener el script en un archivo separado. Esto hace al código más fácil de mantener, depurar, y revisar. Para hacer esto es necesario:

+ + + +

Por ejemplo, si se guarda el script anterior en un archivo llamado my-script.js bajo el directorio data del add-on:

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("my-script.js")
+});
+ +

O para Firefox 34 en adelante:

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: "./my-script.js"
+});
+ +

Cargar Múltiples Scripts de Contenido

+ +

Es posible cargar mas de un script, y los scripts pueden interactuar directamente.

+ +

Por ejemplo, se puede reescribir my-script.js para usar jQuery.

+ +
$("body").html("<h1>Page matches ruleset</h1>");
+
+ +

Luego se descarga jQuery al directorio data del add-on, y se carga conjuntamente el script y el jQuery (asegurándose de cargar primero el jQuery).

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: [self.data.url("jquery-1.7.min.js"), self.data.url("my-script.js")]
+});
+
+ +

Se puede usar contentScript y contentScriptFile juntos en el mismo page-mod. Si se hace esto, los script cargados usando contentScriptFile son cargados primero.

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("jquery-1.7.min.js"),
+  contentScript: '$("body").html("<h1>Page matches ruleset</h1>");'
+});
+
+ +

Note, sin embargo, que no es posible cargar un script desde un sitio web. El script debe ser cargado desde el directorio data.

+ +

Comunicarse con el Script de Contenido

+ +

El script del add-on y los scripts de contenido no pueden acceder directamente a las variables o llamar a las funciones de los demás, pero pueden enviar mensajes.

+ +

Para enviar un mensaje de un lado a otro, el emisor llama a port.emit() y el receptor escucha usando port.on().

+ + + +

Se reescribe el ejemplo anterior para pasar un mensaje desde el add-on al script de contenido. El mensaje contendrá el nuevo contenido para ser insertado en el documento.

+ +

El script de contenido ahora necesita lucir de esta manera:

+ +
// "self" is a global object in content scripts
+// Listen for a message, and replace the document's
+// contents with the message payload.
+self.port.on("replacePage", function(message) {
+  document.body.innerHTML = "<h1>" + message + "</h1>";
+});
+
+ +

En el script del add-on, se enviará al script de contenido un mensaje desde onAttach.

+ +
// Import the page-mod API
+var pageMod = require("sdk/page-mod");
+// Import the self API
+var self = require("sdk/self");
+
+// Create a page-mod
+// It will run a script whenever a ".org" URL is loaded
+// The script replaces the page contents with a message
+pageMod.PageMod({
+  include: "*.org",
+  contentScriptFile: self.data.url("my-script.js"),
+  // Send the content script a message inside onAttach
+  onAttach: function(worker) {
+    worker.port.emit("replacePage", "Page matches ruleset");
+  }
+});
+
+ +

El mensaje replacePage no es un mensaje ya definido: es un mensaje definido por el add-on en la llamada port.emit().

+ +
+

Inyectar CSS

+ +

Note que la característica descrita en esta sección es experimental por los momentos. Se continuará dando soporte a esta característica, pero los detalles dela API pueden cambiar.

+ +

En vez de inyectar JavaScript en una página, es posible inyectar CSS configurando la opción contentStyle del page-mod.

+ +
var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyle: "body {" +
+                "  border: 5px solid green;" +
+                "}"
+});
+
+ +

Como con el contentScript, hay una opción correspondiente a contentStyleFile que toma una URL de un archivo CSS en el directorio "data" ; es una buena practica usar esta opción en vez de contentStyle si el CSS un poco complejo.

+ +
var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyleFile: require("sdk/self").data.url("my-style.css")
+});
+
+ +

O, para Firefox 34, se puede usar una versión más simple:

+ +
var pageMod = require("sdk/page-mod").PageMod({
+  include: "*",
+  contentStyleFile: "./my-style.css"
+});
+
+ +

Conociendo más

+ +

Para conocer más sobre page-mod, puede dirigirse a la página de referencia de la API. En particular, el constructor de PageMod toma algunas opciones adicionales para tomar el control de este comportamiento:

+ + + +

Para conocer más sobre los scripts de contenido en general, puede dirigirse a la  guía de scripts de contenido.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html new file mode 100644 index 0000000000..1140029e16 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/open_a_web_page/index.html @@ -0,0 +1,48 @@ +--- +title: Abrir una página web +slug: Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page +tags: + - Add-on SDK +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Open_a_Web_Page +--- +
Para realizar los pasos que se describen a continuación es necesario tener instalado el SDK y conocimientos básico de cfx.
+ +

Para abrir una nueva página web, se usa el módulo tabs:

+ +
var tabs = require("sdk/tabs");
+tabs.open("http://www.example.com");
+
+ +

Esta función es asíncrona, por lo tanto no se tendrá inmediatamanete un objeto tab  el cual se pueda examinar. Para hacer esto, se pasa una función de retrollamada en open(). La retrollamada es asignada a pa propiedad onReady, y pasará la pestaña como argumento:

+ +
var tabs = require("sdk/tabs");
+tabs.open({
+  url: "http://www.example.com",
+  onReady: function onReady(tab) {
+    console.log(tab.title);
+  }
+});
+
+ +

Incluso ahora, no se tiene acceso directo a ningún contenido dentro de la pestaña.

+ +

Para acceder al contenido de la pstaña se necesita adjuntar un script a la pestaña usando tab.attach(). Este add-on carga una página, luego adjunta un script a la página el cual le agrega un borde rojo:

+ +
var tabs = require("sdk/tabs");
+tabs.open({
+  url: "http://www.example.com",
+  onReady: runScript
+});
+
+function runScript(tab) {
+  tab.attach({
+    contentScript: "document.body.style.border = '5px solid red';"
+  });
+}
+
+ +

Conozca más

+ +

Para conocer más sobre las pestañas en el SDK, puede dirigirse a la referencia de tabs en la API.

+ +

Para conocer mas sobre la ejecución de scripts en las pestañas, puede diregirse a usando tab.attach() en el tutorial.

diff --git a/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html new file mode 100644 index 0000000000..cb2c3d7b18 --- /dev/null +++ b/files/es/mozilla/add-ons/sdk/tutorials/troubleshooting/index.html @@ -0,0 +1,143 @@ +--- +title: Resolución de problemas +slug: Mozilla/Add-ons/SDK/Tutorials/Troubleshooting +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Troubleshooting +--- +

Si tiene problemas para lograr que el Add-on SDK funcione correctamente, ¡no entre en pánico! Esta página lista algunos puntos de inicio que pueden ayudarte a solucionar el problema.

+ +

Problema de Cuarentena en Mac OS X

+ +

En Mac OS X, puede aparecer el siguiente error cuando intenta ejecutar cfx:

+ +
/path/to/sdk/bin/cfx: /usr/bin/env: bad interpreter: Operation not permitted
+
+ +

Esto puede ser causado debido a que el archivo ejecutable de cfx fue puesto en cuarentena durante la descarga desde Internet.

+ +

Pra sacar el archivo de la cuarentena, use xattr -d, especificando com.apple.quarantine como el nombre del atributo a ser eliminado, y cfx como el archivo desde el cual borrar ese atributo:

+ +
xattr -d com.apple.quarantine /path/to/sdk/bin/cfx
+
+ +

Verificar Python

+ +

La herramienta cfx del SDK se ejecuta sobre Python. Si tiene problemas para ejecutar cfx de cualquier manera, asegúrese de tener Python correctamente instalado.

+ +

Intente ejecutar la siguiente línea desde una terminal:

+ +
  python --version
+
+ +

cfx espera contar con Python 2.5, 2.6 o 2.7. Versiones anteriores o superiores pueden o no funcionar correctamente. Los espacios en blanco en la ruta de instalación no estan soportados.

+ +

Verificar Firefox o XULRunner

+ +

cfx busca lugares conocidos en el sistema para encontrar a Firefox o XULRunner. cfx puede no haber encontrado una instalación, o si tiene múltiples instalaciones, cfx puede haber encontrado la instalación menos apropiada. En esos casos debe usar  la opción --binary de cfx. Vea la guia cfx Tool para más información.

+ +

Cuando ejecuta cfx para probar el add-on o realiza pruebas unitarias, se muestra en pantalla la ubicación de los binarios de Firefox o XULRunner encontrados, por lo que puede asegurarse de la ubicación revisando estas salidas.

+ +

Verificar la Terminal de Texto

+ +

Cuando se generan errores en la API del SDK y el código, estos son registrados en la terminal de texto. Esta debería ser la misma terminal desde la cual ejecuta cfx.

+ +

No deje sueltos los Archivos No-SDK

+ +

Actualmente el SDK no maneja de manera adecuada los archivos y directorios que no espera encontrar. Si hay directorios vacíos, directorios o archivos  que no estan relacionados con el SDK dentro del directorio addon-sdk o sus subdirectorios, intente eliminarlos.

+ +

Buscar Problemas Conocidos

+ +

Alguien mas debe haber experimentado su mismo problema. Frecuentemente otras personas publican sus problemas a la lista de correo del proyecto. Usted también puede explorar la lista de problemas conocidos ó buscar palabras claves específicas.

+ +

Contactar al Equipo del Proyecto y al Grupo de Usuarios

+ +

Las personas usuarias del SDK y las personas miembro del equipo del proyecto discuten problemas y propuestas en la lista de correo del proyecto. Alguien más puede haber tenido un problema igual al suyo, por lo tanto puede intentar buscar en la lista. Igualmente puede publicar una pregunta si así lo desea.

+ +

También puede hablar en tiempo real con otras personas usuarias de SDK en el canal #jetpack en la red IRC de Mozilla.

+ +

Y si desea reportar un error en el SDK, es siempre bienvenido! Para esto deberá crear una cuenta con Bugzilla, el rastreador de errores de Mozilla.

+ +

Ejecutar Pruebas Unitarias en SDK

+ +

El SDK trae consigo un conjunto de pruebas las cuales aseguran el correcto funcionamiento de las APIs. Puede ejecutaras de la siguiente manera:

+ +
  cfx testall
+
+ +

Algunas de las pruebas abren la ventana de Firefox para verificar las APIs relacionadas a la interfaz de usuario, no se preocupe. Por favor deje que el proceso culmine antes de reanudar su trabajo.

+ +

Cuando el proceso culmine, la terminal debe mostrar la salida que puede verse de la siguiente manera:

+ +
  Testing cfx...
+  .............................................................
+  ----------------------------------------------------------------------
+  Ran 61 tests in 4.388s
+
+OK
+  Testing reading-data...
+  Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'.
+  Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmpu26K_5.mozrunner'.
+  .info: My ID is 6724fc1b-3ec4-40e2-8583-8061088b3185
+  ..
+  3 of 3 tests passed.
+  OK
+  Total time: 4.036381 seconds
+  Program terminated successfully.
+  Testing all available packages: nsjetpack, test-harness, api-utils, development-mode.
+  Using binary at '/Applications/Firefox.app/Contents/MacOS/firefox-bin'.
+  Using profile at '/var/folders/FL/FLC+17D+ERKgQe4K+HC9pE+++TI/-Tmp-/tmp-dzeaA.mozrunner'.
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  .........................................................................
+  ...............................................
+
+3405 of 3405 tests passed.
+  OK
+  Total time: 43.105498 seconds
+  Program terminated successfully.
+  All tests were successful. Ship it!
+
+ +

Si la salida revela muchos errores, puede ser una señal que el SDK no se esta ejecutando correctamente en su sistema. En ese caso, por favor reporte el error o envíe un mensaje a la lista de correo. Vea la sección anterior para más información sobre como hacer esto.

diff --git a/files/es/mozilla/add-ons/themes/obsolete/index.html b/files/es/mozilla/add-ons/themes/obsolete/index.html new file mode 100644 index 0000000000..d420b6ebf0 --- /dev/null +++ b/files/es/mozilla/add-ons/themes/obsolete/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete +slug: Mozilla/Add-ons/Themes/Obsolete +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/Themes/Obsolete +--- +

This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.

+

{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}

diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html new file mode 100644 index 0000000000..216b120445 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/add_toolbar_button/index.html @@ -0,0 +1,33 @@ +--- +title: Añadir botón a la barra de herramientas +slug: >- + Mozilla/Add-ons/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/HowTos/Common_Thunderbird_Extension_Techniques/Add_Toolbar_Button +--- +

{{AddonSidebar}}

+ +

Fichero XUL de ejemplo:

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?>
+
+<overlay id="messengerWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script type="application/x-javascript" src="overlay.js" />
+  <toolbarpalette id="MailToolbarPalette">
+    <toolbarbutton id="demo-button"
+      class="demo-button toolbarbutton-1"
+      label="Demo"
+      type="button"
+      oncommand="Demo.load();"
+      />
+  </toolbarpalette>
+</overlay>
+
+ +

Añada el siguiente código al fichero CSS referenciado en el fichero XUL:

+ +
#demo-button, [place="palette"] > #demo-button {
+  list-style-image: url("chrome://demo/skin/icon.png") !important;
+}
+
diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html new file mode 100644 index 0000000000..8711130729 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/common_thunderbird_extension_techniques/index.html @@ -0,0 +1,13 @@ +--- +title: Common Thunderbird Extension Techniques +slug: Mozilla/Add-ons/Thunderbird/HowTos/Common_Thunderbird_Extension_Techniques +tags: + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/HowTos/Common_Thunderbird_Extension_Techniques +--- +

{{AddonSidebar}}

+ +

{{ tree() }}

diff --git a/files/es/mozilla/add-ons/thunderbird/howtos/index.html b/files/es/mozilla/add-ons/thunderbird/howtos/index.html new file mode 100644 index 0000000000..6d5cb0424a --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/howtos/index.html @@ -0,0 +1,128 @@ +--- +title: Thunderbird HowTos +slug: Mozilla/Add-ons/Thunderbird/HowTos +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_extensions/HowTos +--- +

{{AddonSidebar}}

+ +
+

This page is badly broken (https://bugzilla.mozilla.org/show_bug.cgi?id=868872), use http://mdn.beonex.com/en/Extensions/Thunderbird/HowTos.html in the meanwhile.

+
+ +

Please add questions or answers to this page so that other people can benefit from your work. Also, you will see that there are many topics for which there is a question, but no answer. Please help by adding an answer! (Adding another question helps too!)

+ +

To get started creating the most basic extension framework, please see Building a Thunderbird Extension.

+ +

This page is organized into two parts: common extension techniques and Thunderbird-specific APIs. The former discusses general methods to hook into Thunderbird, while the latter is more focused on how to do interesting things once Thunderbird has started running your code.

+ +

See also "An overview of Thunderbird components". Many of the components described on that page have links to related examples.

+ +

Common Extension Techniques

+ +
+ +
+ +

Thunderbird-specific APIs for Extensions

+ +

Each of the pages listed in this section contains a number of related topics. For example, the "Compose New Message" page contains sections that describe how to open a new message window, modify a message body, etc.

+ +

Folders and message lists

+ + + +

View message

+ + + +

Compose new messages

+ + + +

Reply to message

+ + + +

Access address book

+ + + +
+ + +

Activity Manager

+
+ + diff --git a/files/es/mozilla/add-ons/thunderbird/index.html b/files/es/mozilla/add-ons/thunderbird/index.html new file mode 100644 index 0000000000..4e66877136 --- /dev/null +++ b/files/es/mozilla/add-ons/thunderbird/index.html @@ -0,0 +1,137 @@ +--- +title: Thunderbird extensions +slug: Mozilla/Add-ons/Thunderbird +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_extensions +--- +
Building a Thunderbird extension
+Step-by-step explanation on how to build an extension for Thunderbird.
+ +
+

{{AddonSidebar}}

+The following documentation provides help for creating extensions for Mozilla's Thunderbird email client. Although there are many similarities with Firefox extensions there are also some differences that may confound the starting developer.
+ +

+Please help! You can add a how-to (a question or an answer or a code snippet), summarize and link to a relevant newsgroup discussion, or create a tutorial. Need help? Contact jenzed.
+ + + + + + + + +
+

Documentation

+ +

Getting started with Thunderbird

+ +

A brave, young developer wants to develop an add-on for Thunderbird. Here's a few links to help them through this journey.

+ +
    +
  • Start by reading the tutorial and learn how to build a Thunderbird extension (Outdated, still talks about overlays and the add-on builder is no longer available but the tutorial has not been updated.)
    • +
  • Read about the main windows so that you know what one means when they say « thread pane », « preview pane », and « folder pane ».
    • + +
  • Want to do some real stuff? See how to inspect a message (demo add-on included!)
    • +
  • Play with our other demo add-on that exercises some more advanced Thunderbird-specific features
    • +
  • Want to do even more stuff? Don't reinvent the wheel: steal functions from the thunderbird-stdlib project (doc here). Functions for dealing with messages (delete them, archive them, change their tags, etc.) are included.
    • +
  • Haven't found what you're looking for? Read the Thunderbird how-tos; they contain a lot of recipes for things extensions want to do.
    • +
  • Still haven't managed to do what you wanted? See the list of all Thunderbird communication channels so that you know where to ask when you get stuck :-).
    • +
  • Feeling really brave? Read the source using a fancy interface; you can often find tests that demonstrate how to do what you're trying to achieve.
    • +
+ +

The Gloda database

+ +

Thunderbird has a subsystem called Gloda. Gloda stands for « Global Database », and creates Thunderbird-wide relations between objects. Gloda provides concepts such as Conversations, Messages, Identities, Contacts. All these concepts are related together: a Conversation contains Messages which are linked to Identities (from field, to field) which are themselves part of a Contact: indeed, a contact has multiple identities.

+ +

Typical use cases for Gloda: find all messages whose subject matches [search term], find all messages from [person], find all messages in the same thread as [a given message], find all messages involving [person], etc. etc.

+ +

Gloda is extremely powerful and is used heavily by add-ons such as Thunderbird Conversations. Learn more about Gloda:

+ + + + + +

Some of these links may be wildly out of date, but they still provide valuable information on the codebase.

+ + + + + + + 		+

Community

+ + + +

{{ DiscussionList("dev-extensions", "mozilla.dev.extensions") }}

+ + + +

Tools

+ + + +

... more tools ...

+ +

View All...

+ + + +
+
XUL, JavaScript, XPCOM, Themes, Developing Mozilla
+
+
+ +

Categories

+ +

{{ languages( { "ja": "ja/Extensions/Thunderbird" } ) }}

diff --git a/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html b/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..1bccc9d703 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.html @@ -0,0 +1,220 @@ +--- +title: Agregar botón a la barra de herramientas +slug: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +translation_of: Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar +--- +
{{AddonSidebar}}
+ +

La barra de herramientas es una de las principales componentes UI disponibles para las extensiones. Toolbar buttons live in the main browser toolbar y contienen un icono. Cuando el usuario da click en el icono, dos cosas pueden suceder:

+ + + +

Con las  APIs de WebExtension, este tipo de botón es se llaman "browser actions", y son  configurados de la siguiente manera:

+ + + +

Un simple botón

+ +

En esta sección vamos a crear una extension que agrega un botón a la barra de herramientas. Cuando el usuario de click en el botón, vamos abrir https://developer.mozilla.org en una nueva pestaña.

+ +

Primero, crear una nueva carpeta "botón", y crea un archivo con el nombre de "manifest.json"  con el siguiente contenido:

+ +
{
+
+  "description": "Demostrando botones de la barra de herramientas",
+  "manifest_version": 2,
+  "name": "botón-demo",
+  "version": "1.0",
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

Esto especifica que tenemos un  background script  llamado "background.js",  y un browser action (butón) cuyo icono va a estar en la carpeta "icons".

+ +
+
Estos iconos son de  bitsies! conjunto de iconos creados por Recep Kütük.
+
+ +

Despues, dentro del folder "botón"  crea la carpeta "icons"  y dentro de el guarda estos dos iconos:

+ + + +
 
+ +

Tenemos dos iconos entonces podemos usar el mas grande para las pantallas de alta densidad. El navegador se va encargar de seleccionar el correcto para cada pantalla.

+ +

Despues, crea "background.js" en la raiz del folder de la extension, y agrega el siguiente contenido:

+ +
function openPage() {
+  browser.tabs.create({
+    url: "https://developer.mozilla.org"
+  });
+}
+
+browser.browserAction.onClicked.addListener(openPage);
+ +

Esto esta a la espera de de el navegador se de click; cuando el evento se dispara, la funcion openPage() comienza a ejecutarse,  el cual abre la página especificada usando la API de tabs.

+ +

En este momento la extension debe de mirarse asi:

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    background.js
+    manifest.json
+ +

Ahora  instala la extensión  y da  click en el botón:

+ +

{{EmbedYouTube("kwwTowgT-Ys")}}

+ +

Agregando un popup

+ +

Vamos a intentar agregar un popup al botón.  Remplaza el manifest.json con este contenido:

+ +
{
+
+  "description": "Demostrando botones de la barra de herramientas",
+  "manifest_version": 2,
+  "name": "botón-demo",
+  "version": "1.0",
+
+  "browser_action": {
+    "browser_style": true,
+    "default_popup": "popup/choose_page.html",
+    "default_icon": {
+      "16": "icons/page-16.png",
+      "32": "icons/page-32.png"
+    }
+  }
+
+}
+ +

Realizamos tres cambios:

+ + + +

Entonces ahora necesitamos crear el  popup. Crea un folder llamado "popup"  y crea adentro el archivo  "choose_page.html" . agregale el siguiente contenido:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_page.css"/>
+  </head>
+
+<body>
+  <div class="page-choice">developer.mozilla.org</div>
+  <div class="page-choice">support.mozilla.org</div>
+  <div class="page-choice">addons.mozilla.org</div>
+  <script src="choose_page.js"></script>
+</body>
+
+</html>
+ +

Puedes notar que es un nomal archivo HTML que contiene tres elementos {{htmlelement("div")}}, con direcciones de Mozilla. También incluye archivos de CSS y  JavaScript, en los cuales vamos agregar lo siguiente.

+ +

Crea el archivo "choose_page.css"  adentro de la carpeta "popup" , con el siguiente contenido:

+ +
html, body {
+  width: 300px;
+}
+
+.page-choice {
+  width: 100%;
+  padding: 4px;
+  font-size: 1.5em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.page-choice:hover {
+  background-color: #CFF2F2;
+}
+ +

Es solo un poco de estilo a nuestro popup.

+ +

Ahora, crea un  archivo "choose_page.js" dentro del folder "popup" con el siguiente contenido:

+ +
document.addEventListener("click", function(e) {
+  if (!e.target.classList.contains("page-choice")) {
+    return;
+  }
+
+  var chosenPage = "https://" + e.target.textContent;
+  browser.tabs.create({
+    url: chosenPage
+  });
+
+});
+ +

En nuestro JavaScript,  esta a la espera de clicks en las opciones de nuestro popup. Primero revisa si el click fue en una de nuestras elecciones, si no, no realizamos nada mas. Se seleccion una carga una página elegida,  en una nueva pestaña con la correspondiente página. Nota que podemos usar las APIs WebExtension  en el script del popup, como también scripts de fondo.

+ +

La  estructura de la extensión final debe ser como esta:

+ +
button/
+    icons/
+        page-16.png
+        page-32.png
+    popup/
+        choose_page.css
+        choose_page.html
+        choose_page.js
+    manifest.json
+ +

Ahora vamos a recargar la extensión, click en el botón  otra vez e intenta dar click en las opciones del popup:

+ +

{{EmbedYouTube("QPEh1L1xq0Y")}}

+ +

Acciones de página

+ +

Acciones de página son como las acciones del navegador, excepto que son acciones relevantes solo para algunas página en particular.

+ +

Mientras de las acciones del navegaro siembre son mostradas, las acciones de página son solo mostradas en pestañas donde son relevantes. Los botones de las acciones de página son mostradas en la barra URL , en vez de la barra de herramientas del navegador.

+ +

Aprende más

+ + diff --git a/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html new file mode 100644 index 0000000000..685e282bf9 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/anatomia_de_una_webextension/index.html @@ -0,0 +1,120 @@ +--- +title: Anatomía de una extension +slug: Mozilla/Add-ons/WebExtensions/Anatomia_de_una_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension +--- +
{{AddonSidebar}}
+ +

Una extensión se compone de una colección de archivos, empaquetados para su distribución e instalación. En este artículo vamos a repasar rápidamente los archivos que deben estar presentes en una extensión.

+ +

Toda extensión debe contener un archivo llamado "manifest.json". Este puede tener enlaces a otros tipos de archivos:

+ + + +

+ +

manifest.json

+ +

Este es el único archivo que debe estar presente en toda WebExtension. Este contiene los metadatos básicos acerca de la extensión, como su nombre, versión, y los permisos que esta requiere. También provee los enlaces a otros archivos de la extensión.

+ +

Mira la página de referencia manifest.json para ver todos los detalles.

+ +

Scripts en segundo plano

+ +

Las extensiones a menudo necesitan mantener estados de larga duración, o ejecutar operaciones a largo plazo, independientemente del tiempo de vida de una página web en particular o las ventanas del navegador. Para eso son los scripts en segundo plano.

+ +

Los scripts en segundo plano son cargados cuando la extensión es cargada y se mantienen cargados hasta que la extensión es deshabilitada o desinstalada. Tu puedes usar cualquier API de WebExtensions en el script, siempre y cuando hayas solicitado el permiso necesario.

+ +

Especificando los scripts en segundo plano

+ +

Puedes incluir un script en segundo plano usando la propiedad background en "manifest.json":

+ +
// manifest.json
+
+"background": {
+  "scripts": ["background-script.js"]
+}
+ +

Puedes especificar múltiples scripts en segundo plano: si lo haces, ellos se ejecutarán en el mismo contexto, justo como son cargados múltiples scripts en una página web.

+ +

Entorno del script en segundo plano

+ +

APIs del DOM

+ +

Los scripts en segundo plano se ejecuta en el contexto de páginas especiales llamadas páginas en segundo plano. Esto le da un variable global window, junto con todas las APIs estándar del DOM que proporciona.

+ +

No necesitas proveer tu propia página en segundo plano. Si incluyes un script en segundo plano, una página en segundo plano vacía se creará para ti.

+ +

Sin embargo, puedes escoger y proveer tu página en segundo plano como un archivo HTML separado:

+ +
// manifest.json
+
+"background": {
+  "page": "background-page.html"
+}
+ +

APIs de WebExtension

+ +

Los scripts en segundo plano pueden usar cualquier API de WebExtension en el script, siempre que tu extensión tenga los permisos necesarios.

+ +

Acceso de origen cruzado

+ +

Los scripts en segundo plano pueden hacer peticiones XHR a cualquier host para los cuales tienen permisos del host.

+ +

Acciones del navegador

+ +

Si tu extensión define una acción del navegador, y esa acción del navegador no tiene ventanas emergentes, entonces puedes escuchar los eventos "clic" del botón en el navegador empleando el objeto onClicked de las acciones del navegador:

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

Contenido web

+ +

Los scripts en segundo plano no tienen acceso directo a las páginas web. Sin embargo, pueden cargar scripts de contenido en páginas web, y comunicarse con esos scripts empleando la API de paso de mensajes.

+ +

Políticas de segurdiad para el contendio

+ +

Los scripts de segundo plano están restringidos de algunas operaciones dañinas, como el uso de eval(), a través de la  Política de Seguridad del Contenido. Vea la Política de Segurdiad del Contenido para más detalles sobre esto.

+ +

Scripts de contenido

+ +

Usa los scripts de contenido para acceder y manipular páginas web. Los scripts de contenido son cargados dentro de las páginas web y ejecutados en el contexto particular de esa página.

+ +

Los scripts de contenido son scripts provistos por la extensión los cuales se ejecutan en el contexto de la página web; estos difieren de los scripts que son cargados por la página misma, incluye aquellos que son proporcionados en los elementos {{HTMLElement("script")}} dentro de la página.

+ +

Los scripts de contenido pueden ver y manipular el DOM de las páginas, igual que los scripts cargados normalmente por la página.

+ +

A diferencia de los scripts normales, ellos pueden:

+ + + +

Los scripts de contenido no pueden acceder directamente a los scripts normales de una página web, pero pueden intercambiar mensajes con ellos usando la API estándar window.postMessage().

+ +

Generalmente, cuando hablamos acerca de scripts de contenido, nos referimos a JavaScript, pero tu puedes inyectar CSS dentro de las páginas web empleando el mismo mecanismo.

+ +

Mira el artículo scripts de contenido para aprender más.

+ +

Recursos web accesibles

+ +

Los recursos web accesibles son recursos como imágenes, HTML, CSS y JavaScript que tu puedes incluir en la extensión y los quieres hacer accesible a los scripts en segundo plano y los scripts de las páginas. Los recursos que son hechos accesibles desde la web pueden ser referenciados desde scripts de páginas web y scripts de contenido mediante un esquema especial de URI.

+ +

Por ejemplo, si un script de contenido quiere insertar algunas imágenes dentro de páginas web, tu puedes incluirlos en la extensión y hacerlos accesibles desde la web. El script de contenido creará y añadirá las etiquetas img que referencia a las imágenes mediante el atributo src.

+ +

Para aprender más, vea la documentación para la el parámetro web_accessible_resource del manifest.json.

diff --git a/files/es/mozilla/add-ons/webextensions/api/i18n/index.html b/files/es/mozilla/add-ons/webextensions/api/i18n/index.html new file mode 100644 index 0000000000..15f990ac92 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/i18n/index.html @@ -0,0 +1,94 @@ +--- +title: i18n +slug: Mozilla/Add-ons/WebExtensions/API/i18n +tags: + - API + - Complementos + - Interfaz + - No estandar + - Reference + - WebExtensions + - extensiones + - i18n +translation_of: Mozilla/Add-ons/WebExtensions/API/i18n +--- +
{{AddonSidebar}}
+ +

Funciones para internacionalizar su extensión. Es posible utilizar estas API para obtener cadenas de texto traducidas a partir de archivos de configuración regional incluidos en la extensión, conocer el idioma actual del navegador y recuperar el valor de su cabecera Accept-Language.

+ +

Para obtener más información sobre el uso de i18n en su extensión, consulte:

+ + + +

Tipos

+ +
+
{{WebExtAPIRef("i18n.LanguageCode")}}
+
Una etiqueta de idioma como «en-US» o «fr».
+
+ +

Funciones

+ +
+
{{WebExtAPIRef("i18n.getAcceptLanguages()")}}
+
Recupera los valores de accept-language del navegador. Esto es distinto de la configuración regional utilizada por el navegador. Para obtener la configuración regional, utilice {{WebExtAPIRef('i18n.getUILanguage')}}.
+
{{WebExtAPIRef("i18n.getMessage()")}}
+
Obtiene la cadena de texto traducida correspondiente al mensaje especificado.
+
{{WebExtAPIRef("i18n.getUILanguage()")}}
+
Obtiene el idioma de la IU del navegador. Esto es distinto de {{WebExtAPIRef('i18n.getAcceptLanguages')}}, que devuelve los idiomas preferidos del usuario.
+
{{WebExtAPIRef("i18n.detectLanguage()")}}
+
Detecta el idioma del texto proporcionado a través de Compact Language Detector.
+
+ +
+
+ +

Compatibilidad entre navegadores

+ +

{{Compat("webextensions.api.i18n")}}

+ +

{{WebExtExamples("h2")}}

+ +
+
+ +
Reconocimientos + +

Esta API se basa en la API chrome.i18n de Chromium. Esta documentación deriva del archivo i18n.json en el código fuente de Chromium.

+ +

Los datos de compatibilidad de Microsoft Edge son suministrados por Microsoft Corporation y se incluyen aquí según los términos de la licencia Creative Commons Atribución 3.0, versión estadounidense.

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/api/index.html b/files/es/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..9a1a727d52 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,59 @@ +--- +title: API +slug: Mozilla/Add-ons/WebExtensions/API +tags: + - Extenciones Web +translation_of: Mozilla/Add-ons/WebExtensions/API +--- +

Las API de JavaScript para las Extensiones Web se pueden usar dentro de los scripts en segundo plano de la extensión y en cualquier otro documento contenido en la extensión, incluyendo las ventanas emergentes de acción de página o acción del navegador, barras laterales, páginas de opciones o páginas de pestañas nuevas. A algunas de estas API también se puede acceder mediante los scripts de contenido de una extensión ( consulte la lista en la guía de script de contenido).

+ +

Para usar API más poderosas debes solicitar permiso en manifest.json en tu extensión.

+ +

Puedes acceder a las API utilizando el namespace browser:

+ +
function logTabs(tabs) {
+  console.log(tabs);
+}
+
+browser.tabs.query({currentWindow: true}, logTabs);
+ +
+

Muchas de las APIs son asíncronas, devolviendo un Promise:

+ +
function logCookie(c) {
+  console.log(c);
+}
+
+function logError(e) {
+  console.error(e);
+}
+
+var setCookie = browser.cookies.set(
+  {url: "https://developer.mozilla.org/"}
+);
+setCookie.then(logCookie, logError);
+
+ +
+

Tenga en cuenta que esto es diferente del sistema de extensiones de Google Chrome, que utiliza el nombre chrome en lugar de browser, y que utiliza callbacks en lugar de promise para funciones asíncronas. Como ayuda para portar, la implementación de Firefox de la API WebExtensions admite chrome y callbacks, así como browser y promise. Mozilla también ha escrito un polyfill que habilita el código que usa  browser y promise para trabajar sin cambios en Chrome.: https://github.com/mozilla/webextension-polyfill.

+ +

Firefox también implementa estas APIs bajo el nombre chrome usando callbacks. Esto permite que el código escrito para Chrome se ejecute sin cambios en Firefox para las APIs documentadas aquí.

+ +

Microsoft Edge usa el namespace browser, pero aún no admite APIs asíncronas basadas en promise. En Edge, por el momento, las APIs asíncronas deben utilizar callbacks.

+ +

No todos los navegadores son compatibles con todas las APIs: para obtener más información, consulte Soporte del navegador para las API de JavaScript.

+ +

Listado de API de JavaScript

+ +

Vea a continuación una lista completa de las API de JavaScript:

+ +

Esta página lista todas las APIs JavaScript de WebExtension que actualmente son soportadas.

+
+ +
{{SubpagesWithSummaries}}
+ +

Incompatibilidades con Chrome

+ +

Nosotros no soportamos ninguna API que no es listada arriba.

+ +

Incluso, para las APIs que están listadas arriba, no siempre soportamos todas las propiedades que Chrome soporta. Por favor, chequea la página de la API para cualquier incompatibilidad con Chrome.

diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/index.html new file mode 100644 index 0000000000..a98fb1e17f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/index.html @@ -0,0 +1,115 @@ +--- +title: storage +slug: Mozilla/Add-ons/WebExtensions/API/storage +tags: + - API + - Add-ons + - Complentos + - Extensions + - Interface + - NeedsTranslation + - Non-standard + - Reference + - Storage + - TopicStub + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/API/storage +--- +
{{AddonSidebar}}
+ +

Permite que las extensiones almacenen y recuperen datos, y escuchen los cambios realizados  en los elementos almacenados.

+ +

El sistema de almacenamiento se basa en Web Storage API, con algunas diferencias. Entre otras diferencias, éstas incluyen:

+ + + +

Para usar esta API, debe incluir el permiso de "storage" en su archivo manifest.json.

+ +

Cada extensión tiene su propia área de almacenamiento, que se puede dividir en diferentes tipos de almacenamiento.

+ +

Aunque esta API es similar a {{domxref ("Window.localStorage")}}, se recomienda que no use Window.localStorage en el código de extensión para almacenar datos relacionados con la extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API storage.local se conservarán correctamente en estos escenarios.

+ +
El área de almacenamiento no está encriptada y no debe utilizarse para almacenar información confidencial del usuario, como claves.
+ +

Tipos

+ +
+
{{WebExtAPIRef("storage.StorageArea")}}
+
Un objeto que representa un área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageChange")}}
+
Un objeto que representa un cambio en un área de almacenamiento.
+
+ +

Propiedades

+ +

El almacenamiento tiene tres propiedades, que representan los diferentes tipos de área de almacenamiento disponible.

+ +
+
{{WebExtAPIRef("storage.sync")}}
+
Representa el área de almacenamiento de sincronización. Los elementos en el almacenamiento de sincronización están sincronizados por el navegador y están disponibles en todas las instancias de ese navegador en el que el usuario ha iniciado sesión, en diferentes dispositivos.
+
{{WebExtAPIRef("storage.local")}}
+
Representa el área de almacenamiento local. Los elementos en el almacenamiento local son locales a la máquina en la que se instaló la extensión.
+
{{WebExtAPIRef("storage.managed")}}
+
Representa el área de almacenamiento gestionado. Los elementos en el almacenamiento gestionado los establece el administrador del dominio y son de sólo lectura para la extensión. Intentar modificar este espacio de nombres da como resultado un error.
+
+ +

Eventos

+ +
+
{{WebExtAPIRef("storage.onChanged")}}
+
Se dispara cuando uno o más elementos cambian en un área de almacenamiento.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.storage")}}

+ +

{{WebExtExamples("h2")}}

+ +
Agradecimientos + +

 

+ +

Esta API se basa en la API chrome.storage de Chromium. Esta documentación se deriva de storage.json en el código de Chromium.

+ +

Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.

+ +

 

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html new file mode 100644 index 0000000000..8c2a288aaf --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/local/index.html @@ -0,0 +1,95 @@ +--- +title: storage.local +slug: Mozilla/Add-ons/WebExtensions/API/storage/local +tags: + - API + - Complentos + - Storage + - WebExtension + - extensiones + - local +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/local +--- +
{{AddonSidebar()}}
+ +
+

Representa el área de almacenamiento local. Los elementos en el almacenamiento local son locales a la máquina en la que se instaló la extensión.

+ +

El navegador puede restringir la cantidad de datos que una extensión puede almacenar en el área de almacenamiento local:

+ +

    Chrome limita la extensión a 5MB de datos usando esta API a menos que tenga el permiso "unlimitedStorage" .
+     Firefox le permite solicitar el permiso "Almacenamiento ilimitado" de la versión 56 en adelante. Aún no restringe la cantidad de datos que su extensión puede almacenar, pero comenzará a hacerlo en una versión futura: por lo tanto, es una buena idea solicitar el permiso de "Almacenamiento ilimitado" ahora, si tiene la intención de almacenar una gran cantidad de datos.

+ +

Cuando se desinstala la extensión, se borra su almacenamiento local asociado.

+ +

También en Firefox, puede evitar que el navegador borre el almacenamiento local al desinstalar "about: config" y configurar las siguientes dos preferencias de navegador como verdaderas: "keepUuidOnUninstall" y "keepStorageOnUninstall". Esta característica se proporciona para ayudar a los desarrolladores a probar sus extensiones. Las extensiones en sí mismas no pueden cambiar estas preferencias.

+ +

Aunque esta API es similar a Window.localStorage, se recomienda que no use Window.localStorage en el código de extensión. Firefox borrará los datos almacenados por las extensiones utilizando la API localStorage en varios escenarios donde los usuarios borran su historial de navegación y los datos por razones de privacidad, mientras que los datos guardados utilizando la API storage.local se conservarán correctamente en estos escenarios.

+
+ +

Metodos

+ +

El objeto local implementa los métodos definidos en el{{WebExtAPIRef("storage.StorageArea")}} tipo:

+ +
+
{{WebExtAPIRef("storage.StorageArea.get()")}}
+
Recupera uno o más elementos del área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}
+
Obtiene la cantidad de espacio de almacenamiento (en bytes) utilizado por uno o más elementos que se almacenan en el área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.set()")}}
+
Almacena uno o más artículos en el área de almacenamiento. Si el artículo ya existe, su valor será actualizado. Cuando establezca un valor, se activará el evento {{WebExtAPIRef ("storage.onChanged")}}.
+
{{WebExtAPIRef("storage.StorageArea.remove()")}}
+
Elimina uno o más elementos del área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.clear()")}}
+
Elimina todos los elementos del área de almacenamiento.
+
+ +

Compatibilidad del navegador

+ + + +

{{Compat("webextensions.api.storage.local")}}

+ +

{{WebExtExamples}}

+ +
Agradecimientos + +

 

+ +

Esta API se basa en la API chrome.storage de Chromium. Esta documentación se deriva de storage.json en el código de Chromium.

+ +

Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.

+ +

 

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html new file mode 100644 index 0000000000..74fc334dbc --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/storage/sync/index.html @@ -0,0 +1,79 @@ +--- +title: storage.sync +slug: Mozilla/Add-ons/WebExtensions/API/storage/sync +tags: + - Complementos Extensiones +translation_of: Mozilla/Add-ons/WebExtensions/API/storage/sync +--- +
{{AddonSidebar()}}
+ +

Representa el área de almacenamiento de sincronización. Los elementos en el almacenamiento de sincronización están sincronizados por el navegador y están disponibles en todas las instancias de ese navegador en el que el usuario está conectado (por ejemplo, a través de Firefox Sync o una cuenta de Google), en diferentes dispositivos.

+ +

Para Firefox, un usuario debe tener complementos seleccionados en las opciones de "about:preferences".

+ +

Tenga en cuenta que la implementación de storage.sync en Firefox se basa en la ID del complemento. Si usa storage.sync, debe establecer una ID para su extensión usando la clave applications manifest.json.

+ +

El principal caso de uso de esta API es almacenar las preferencias sobre su extensión y permitir que el usuario las sincronice con diferentes perfiles. Puede almacenar hasta 100 KB de datos utilizando esta API. Si intenta almacenar más que esto, la llamada fallará con un mensaje de error. La API se proporciona sin ninguna garantía sobre el tiempo de actividad o el rendimiento.

+ +

Metodos

+ +

El objeto de sincronización implementa los métodos definidos en el {{WebExtAPIRef("storage.StorageArea")}} ponga:

+ +
+
{{WebExtAPIRef("storage.StorageArea.get()")}}
+
Recupera uno o más elementos del área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}}
+
Obtiene la cantidad de espacio de almacenamiento (en bytes) utilizado por uno o más elementos que se almacenan en el área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.set()")}}
+
Almacena uno o más artículos en el área de almacenamiento. Si el artículo ya existe, su valor será actualizado.
+
{{WebExtAPIRef("storage.StorageArea.remove()")}}
+
Elimina uno o más elementos del área de almacenamiento.
+
{{WebExtAPIRef("storage.StorageArea.clear()")}}
+
Elimina todos los elementos del área de almacenamiento.
+
+ +

Compatibilidad del navegador

+ + + +

{{Compat("webextensions.api.storage.sync")}}

+ +

{{WebExtExamples}}

+ +
Agradecimientos + +

Esta API está basada en la API de Chromium's chrome.storage API. Esta documentación se deriva de storage.json en el código de Chromium.

+ +

Los datos de compatibilidad de Microsoft Edge son proporcionados por Microsoft Corporation y se incluyen aquí bajo la Licencia de Estados Unidos Creative Commons Attribution 3.0.

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html b/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html new file mode 100644 index 0000000000..d561c6d796 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/api/webnavigation/index.html @@ -0,0 +1,144 @@ +--- +title: webNavigation +slug: Mozilla/Add-ons/WebExtensions/API/webNavigation +translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation +--- +
{{AddonSidebar}}
+ +

Add event listeners for the various stages of a navigation. A navigation consists of a frame in the browser transitioning from one URL to another, usually (but not always) in response to a user action like clicking a link or entering a URL in the location bar.

+ +

Compared with the {{WebExtAPIRef("webRequest")}} API: navigations usually result in the browser making web requests, but the webRequest API is concerned with the lower-level view from the HTTP layer, while the webNavigation API is more concerned with the view from the browser UI itself.

+ +

Each event corresponds to a particular stage in the navigation. The sequence of events is like this:

+ +

+ + + +

Each navigation is a URL transition in a particular browser frame. The browser frame is identified by a tab ID and a frame ID. The frame may be the top-level browsing context in the tab, or may be a nested browsing context implemented as an iframe.

+ +

Each event's addListener() call accepts an optional filter parameter. The filter will specify one or more URL patterns, and the event will then only be fired for navigations in which the target URL matches one of the patterns.

+ +

The onCommitted event listener is passed two additional properties: a {{WebExtAPIRef("webNavigation.TransitionType","TransitionType")}} indicating the cause of the navigation (for example, because the user clicked a link, or because the user selected a bookmark), and a {{WebExtAPIRef("webNavigation.TransitionQualifier","TransitionQualifier")}} providing further information about the navigation.

+ +

To use this API you need to have the "webNavigation" permission.

+ +

Types

+ +
+
{{WebExtAPIRef("webNavigation.TransitionType")}}
+
Cause of the navigation: for example, the user clicked a link, or typed an address, or clicked a bookmark.
+
{{WebExtAPIRef("webNavigation.TransitionQualifier")}}
+
+
Extra information about a transition.
+
+
+ +

Functions

+ +
+
{{WebExtAPIRef("webNavigation.getFrame()")}}
+
Retrieves information about a particular frame. A frame may be the top-level frame in a tab or a nested iframe, and is uniquely identified by a tab ID and a frame ID.
+
{{WebExtAPIRef("webNavigation.getAllFrames()")}}
+
+

Given a tab ID, retrieves information about all the frames it contains.

+
+
+ +

Events

+ +
+
{{WebExtAPIRef("webNavigation.onBeforeNavigate")}}
+
+

Fired when the browser is about to start a navigation event.

+
+
{{WebExtAPIRef("webNavigation.onCommitted")}}
+
Fired when a navigation is committed. At least part of the new document has been received from the server and the browser has decided to switch to the new document.
+
{{WebExtAPIRef("webNavigation.onDOMContentLoaded")}}
+
Fired when the DOMContentLoaded event is fired in the page.
+
{{WebExtAPIRef("webNavigation.onCompleted")}}
+
Fired when a document, including the resources it refers to, is completely loaded and initialized. This is equivalent to the DOM load event.
+
{{WebExtAPIRef("webNavigation.onErrorOccurred")}}
+
Fired when an error occurs and the navigation is aborted. This can happen if either a network error occurred, or the user aborted the navigation.
+
{{WebExtAPIRef("webNavigation.onCreatedNavigationTarget")}}
+
Fired when a new window, or a new tab in an existing window, is created to host a navigation: for example, if the user opens a link in a new tab.
+
{{WebExtAPIRef("webNavigation.onReferenceFragmentUpdated")}}
+
Fired if the fragment identifier for a page is changed.
+
{{WebExtAPIRef("webNavigation.onTabReplaced")}}
+
+

Fired when the contents of the tab is replaced by a different (usually previously pre-rendered) tab.

+
+
{{WebExtAPIRef("webNavigation.onHistoryStateUpdated")}}
+
Fired when the page used the history API to update the URL displayed in the browser's location bar.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.webNavigation")}}

+ + + +

Edge incompatibilities

+ +

Promises are not supported in Edge. Use callbacks instead.

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.webNavigation API. This documentation is derived from web_navigation.json in the Chromium code.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..1dffe19399 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,15 @@ +--- +title: Browser support for JavaScript APIs +slug: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +translation_of: Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs +--- +
{{AddonSidebar}}
+ +
{{WebExtAllCompatTables}}
+ + + +
Acknowledgements + +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
diff --git a/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html new file mode 100644 index 0000000000..34668d6ba1 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/chrome_incompatibilities/index.html @@ -0,0 +1,291 @@ +--- +title: Incompatibilidades con Chrome +slug: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities +--- +

WebExtensions está diseñado para ser compatible con las extensiones de Chrome y Opera: en la medida de lo posible, las extensiones escritas para esos navegadores deberían ejecutarse en Firefox con cambios mínimos.

+ +

Sin embargo, Firefox cuenta actualmente con soporte para sólo un conjunto limitado de funciones y API compatibles con Chrome y Opera. Estamos trabajando en agregar más soporte, pero muchas características aún no son compatibles, y es posible que nunca admitamos algunas.

+ +

En este artículo se enumeran todas las características y API que se admiten total o parcialmente en Firefox. Cuando una característica está parcialmente soportada, hemos indicado cuáles son las lagunas.

+ +

Es seguro asumir que las funciones y las API que no se enumeran aquí en absoluto aún no son compatibles.

+ +

Funciones de manifest.json

+ +

Claves completamente compatibles

+ + + +

Claves parcialmente admitidas

+ +

Datos de fondo

+ +

Firefox no admite la propiedad "persistent". Los scripts de fondo permanecen cargados todo el tiempo.

+ +

Scripts de contenido

+ +

Firefox no admite actualmente:

+ + + +

Permisos

+ +

Firefox aún no admite los siguientes permisos:

+ + + +

Obviamente, también no admite permisos para las APIs que no son compatibles.

+ +

APIs JavaScript

+ +

APIs completamente soportadas

+ + + +

APIs parcialmente soportadas

+ +

marcadores

+ + + +

browserAction

+ + + +

cookies

+ + + +

extension

+ + + +

i18n

+ + + +

notifications

+ + + +

Tiempo de ejecución

+ + + +

Almacenamiento

+ + + +

tabs

+ + + +

Firefox treats highlighted and active as the same since Firefox cannot select multiple tabs.

+ +

Firefox doesn't yet support the callback argument to executeScript().

+ +

webNavigation

+ + + +

onReferenceFragmentUpdated also triggers for pushState.

+ +

webRequest

+ + + +

windows

+ + + +

Planned APIs

+ +

We don't yet support the following APIs, but plan to, soon:

+ + + +

CSS

+ +

Localized String Interpolation

+ +

We currently do not support interpolation of localized strings __MSG_ tokens in extension CSS files: {{bug(1209184)}}.

+ +

Relative URLs

+ +

We resolve URLs in injected CSS files relative to the CSS file itself, rather than to the page it's injected into.

+ +

Miscellaneous incompatibilities

+ + diff --git "a/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" "b/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" new file mode 100644 index 0000000000..c24f9d07f5 --- /dev/null +++ "b/files/es/mozilla/add-ons/webextensions/depuraci\303\263n/index.html" @@ -0,0 +1,189 @@ +--- +title: Depuración +slug: Mozilla/Add-ons/WebExtensions/Depuración +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Debugging +--- +
{{AddonSidebar}}
+ +
+

Las técnicas descritas aquí funcionan en Firefox 50 y versiones sucesivas. Si necesitas usar una versión anterior de Firefox, por favor ve al artículo debugging extensions using WebExtension APIs before Firefox 50.

+
+ +

Este artículo explica cómo se pueden usar las herramientas de desarrollo de Firefox para depurar extensiones creadas con las WebExtension APIs.

+ +

Una WebExtension puede consistir en varias partes distintas — scripts en segundo plano, popups, options pages, content scripts — y se tendrá que usar un proceso ligeramente distinto para depurar cada parte. Así, cada parte tendrá una sección principal en este artículo, y el objetivo es que esas secciones se puedan leer de forma independiente. Empezaremos presentando el Depurador de Add-on, que será usado para depurar la mayoría de las partes de un complemento.

+ + + +

El Depurador de Add-on

+ +

Para la mayor parte de este artículo utilizaremos el Depurador de Add-on. Para abrir el Depurador de Add-on:

+ + + +

Se abrirá entonces una nueva ventana. La ventana principal de Firefox se pondrá en primer plano, así que se tendrá que hacer click en la nueva ventana para que aparezca en primer plano.

+ +

{{EmbedYouTube("HMozipAjrYA")}}

+ +

Esta nueva ventana se llama "Herramientas de desarrollo" y contiene las herramientas de depuración que se usarán. La interfaz tiene varias pestañas en la parte de arriba que permiten moverse por las herramientas disponibles:

+ +

+ +

En este artículo usaremos tres herramientas de depuración:

+ + + +

Depurando scripts en segundo plano

+ +
+

Los ejemplos de esta sección usan la extensión de ejemplo "notify-link-clicks-l10n". Para explorar las opciones, se puede encontrar este ejemplo en el repositorio webextensions-examples.

+
+ +

Los scripts en segundo plano permanecen cargados durante el tiempo de vida de la extensión. Se cargan dentro de una “página en segundo plano” invisible: por defecto, es un documento HTML vacío, pero se puede especificar contenido HTML propio usando la palabra clave "background" en “manifest.json”.

+ +

Se pueden depurar scripts en segundo plano usando el Depurador de Add-ons.

+ +

En la Consola del Depurador de Add-ons se puede ver un registro de las salidas, incluidas las llamadas a console.log() desde los propios scripts en segundo plano y cualquier error que el navegador encuentre al ejecutarlos. Es importante mencionar que la consola muestra todos los errores detectados por el navegador, no sólo los errores relacionados con el código de la extensión.

+ +

Por ejemplo, la extensión de ejemplo notify-link-clicks-i18n registra un mensaje de su script en segundo plano cuando recibe un mensaje de uno de sus otros scripts:

+ +

{{EmbedYouTube("WDQsBU-rpN0")}}

+ +

Usando la línea de comandos de la Consola, se pueden acceder y modificar los objetos creados por los scripts en segundo plano.

+ +

Por ejemplo, aquí se hace un allamada a la función notify() definida en el script en segundo plano de la extensión:

+ +

{{EmbedYouTube("g-Qgf8Mc2wg")}}

+ +

Si se mira la ventana del Depurador, se pueden ver todos los scripts en segundo plano de la extensión. Se pueden definir breakpoints, ver el código paso a paso y hacer todo lo que es posible hacer en un depurador.

+ +

{{EmbedYouTube("MNeaz2jdmzY")}}

+ +

Si se pulsa la tecla de Escape mientras se está en el Depurador, la ventana de Herramientas de desarrollo se dividirá en dos, con la parte de abajo ocupada ahora por la Consola. Ahora, mientras se esté en un breakpoint, se puede modificar el estado del programa usando la consola. Ver Dividir la Consola para más información.

+ +

Depurando páginas de opciones

+ +

Las páginas de opciones son páginas HTML que pueden ser proporcionadas por la persona que desarrolle la extensión y contienen opciones para la misma. Se muestran normalmente en un iframe en el Add-ons Manager (para ver el Add-ons Manager, visita la página "about:addons").

+ +

Para depurar páginas de opciones:

+ + + +

Cualquier archivo fuente en JavaScript que incluya será listado en el Depurador:

+ +

{{EmbedYouTube("BUMG-M8tFF4")}}

+ +
+

Este vídeo usa el ejemplo de WebExtension favourite-colour.

+
+ +

También se verá cualquier mensaje registrado por el código en la Consola del Depurador de Add-on.

+ +

También se puede usar el Depurador de Add-on para depurar el código HTML y CSS de la página. Pero primero se necesita dirigir las herramientas al iframe que alberga la página de opciones. Para hacer esto: abre la página de opciones, haz clic en el icono indicado en la captura de pantalla mostrada a continuación y selecciona la página de opciones del menú desplegable:

+ +

Ahora al cambiar a la pestaña Inspector se podrá examinar y editar el HTML y CSS para la página:

+ +

 

+ +

{{EmbedYouTube("-2m3ubFAU94")}}

+ +

Depurando ventanas emergentes

+ +

Las ventanas emergentes son cuadros de diálogo unidos a acciones del navegador o de la página. Se especifican usando un documento HTML que puede incluir fuentes CSS y JavaScript para determinar el estilo y el funcionamiento. Cuando la ventana emergente es visible, se puede usar el Depurador de Add-on para depurar su código.

+ +

Un problema con las ventanas emergentes es que si una ventana emergente está abierta y se hace clic fuera de ella, esta se cierra y su código se descarga. Obviamente, esto hace que sea imposible depurarlas. Para eliminar este comportamiento, se debe hacer clic en el botón del Depurador de Add-on destacado en la captura de pantalla mostrada a continuación:

+ +

+ +

Ahora, al abrir una ventana emergente esta continuará abierta hasta que se pulse Escape.

+ +

 

+ +
+

Es importante señalar que esta opción está disponible para ventanas emergentes desarrolladas para el navegador, como el menú de hamburguesa ( ), así como a ventanas emergentes propias de la add-on.

+ +

También es importante notar que el cambio es persistente, incluso aunque el navegador se reinicie. Estamos trabajando en solucionar esto en el bug 1251658, pero hasta entonces puede ser mejor permitir de nuevo la ocultación automática volviendo a hacer clic en el botón antes de cerrar la Caja de Herramientas del Navegador.

+ +

Internamente, este botón simplemente cambia la preferencia ui.popup.disable_autohide, lo que se puede hacer manualmente usando about:config.

+
+ +

Cuando la ventana emergente está abierta, sus fuentes de JavaScript se listarán en el Depurador. Se pueden colocar breakpoints y modificar el estado interno del programa:

+ +

{{EmbedYouTube("hzwnR8qoz2I")}}

+ +
+

Este vídeo usa la extensión de ejemplo beastify.

+
+ +

También se puede usar el Depurador de Add-on para depurar el código HTML y CSS de la ventana emergente. Pero primero se necesita dirigir las herramientas al documento de la ventana emergente. Para hacer esto: abre la ventana emergente, haz clic en el icono indicado en la captura de pantalla mostrada a continuación y selecciona la página de la ventana emergente del menú desplegable:

+ +

+ +

Ahora al cambiar a Inspector se podrán examinar y editar el HTML y el CSS de la ventana emergente:

+ +

{{EmbedYouTube("6lvdm7jaq7Y")}}

+ +

Depurando scripts de contenido

+ +

Se puede usar el Depurador de Add-on para depurar páginas en segundo plano, páginas de opciones y ventanas emergentes. Sin embargo, no se puede usar para depurar scripts de contenido. Esto es debido a que, en Firefox multiproceso, los scripts de contenido se ejecutan en un proceso distinto del de otras partes de la add-on.

+ +

Para depurar scripts de contenido adjuntos a una página web, se deben usar las herramientas de desarrollo web normales para esa página:

+ + + +

{{EmbedYouTube("f46hMLELyaI")}}

+ +

Por defecto, las herramientas se muestran al pie de la pestaña de desarrollo, para reflejar que están relacionadas con esa pestaña. Cualquier salida de las instrucciones console.log() de los scripts de contenido será mostrada allí. También se verán los scripts de contenido listados en el Depurador, donde se podrán colocar breakpoints, avanzar en el código, etc.

+ +

{{EmbedYouTube("Hx3GU_fEPeo")}}

+ +
+

Este video usa el ejemplo notify-link-clicks-i18n de WebExtension.

+
+ +
+

Si la pestaña de Herramientas de Desarrollo no estaba abierta cuando el scripts de contenido se introdujo, puede ocurrir que el scripts de contenido no aparezca en el panel de depuración. Si esto ocurre, recargar la página que contiene la pestaña de Herramientas de Desarrollo debería solucionar el problema.

+
diff --git a/files/es/mozilla/add-ons/webextensions/examples/index.html b/files/es/mozilla/add-ons/webextensions/examples/index.html new file mode 100644 index 0000000000..40900fa368 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/examples/index.html @@ -0,0 +1,24 @@ +--- +title: Ejemplos de extensiones +slug: Mozilla/Add-ons/WebExtensions/Examples +tags: + - WebExgtensions +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +
{{AddonSidebar}}
+ +

Para ayudar en la ilustración de cómo desarrollar las extension, se mantiene un repositorio de ejemplos simples de extensions en https://github.com/mdn/webextensions-examples. Este artículo describe las extensiones en ese repositorio.

+ +

Estos ejemplo funcionan en Firefox Nightly: la mayoría funcionan en versiones más recientes de Firefox, pero revise la clave strict_min_version en el manifest.json del complemento para estar seguro.

+ +

Si quiere probar estos ejemplo, tiene tres opciones principales:

+ +
    +
  1. Clone el repositorio, entonces, carge el complemento directo desde su directorio, utilizando la función "Cargar complemento temporalmente". El complemento estará cargado hasta que se reinicie Firefox.
    2. +
  2. Clone el repositorio, luego utilice la herrmienta web-ext en la línea de comando para ejecutar Firefox con el complemento instalado.
    3. +
  3. Clone el repositorio, luego diríjase al directorio build. Este contiene todos los ejemplos firmados y compilados, así que usted puede abrilos en Firefox (utilizando Archivo/Abrir archivo) e instalarlos permanentemente, justamente como cuando se instala un complemento desde addons.mozilla.org.
    4. +
+ +

Si quiere contribuir al repositorio, ¡envíe una petición de pull!

+ +

{{WebExtAllExamples}}

diff --git a/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html b/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..426aeae50f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,159 @@ +--- +title: Extending the developer tools +slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools +--- +
{{AddonSidebar}}
+ +
+

This page describes devtools APIs as they exist in Firefox 55. Although the APIs are based on the Chrome devtools APIs, there are still many features that are not yet implemented in Firefox, and therefore are not documented here. To see which features are currently missing please see Limitations of the devtools APIs.

+
+ +

You can use WebExtensions APIs to extend the browser's built-in developer tools. To create a devtools extension, include the "devtools_page" key in manifest.json:

+ +
"devtools_page": "devtools/devtools-page.html"
+ +

The value of this key is a URL pointing to an HTML file that's been bundled with your extension. The URL should be relative to the manifest.json file itself.

+ +

The HTML file defines a special page in the extension, called the devtools page.

+ +

The devtools page

+ +

The devtools page is loaded when the browser devtools are opened, and unloaded when it is closed. Note that because the devtools window is associated with a single tab, it's quite possible for more than one devtools window - hence more than one devtools page - to exist at the same time.

+ +

The devtools page doesn't have any visible DOM, but can include JavaScript sources using <script> tags. The sources must be bundled with the extension itself. The sources get access to:

+ + + +

Note that the devtools page does not get access to any other WebExtension APIs, and the background page doesn't get access to the devtools APIs. Instead, the devtools page and the background page must communicate using the runtime messaging APIs. Here's an example:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
+ +

The devtools.js file will hold the actual code creating your dev tools extensions.

+ +

Creating panels

+ +

The devtools window hosts a number of separate tools - the JavaScript Debugger, Network Monitor, and so on. A row of tabs across the top lets the user switch between the different tools. The window hosting each tool's user interface is called a "panel".

+ +

Using the devtools.panels.create() API, you can create your own panel in the devtools window:

+ +
browser.devtools.panels.create(
+  "My Panel",                      // title
+  "icons/star.png",                // icon
+  "devtools/panel/panel.html"      // content
+).then((newPanel) => {
+  newPanel.onShown.addListener(initialisePanel);
+  newPanel.onHidden.addListener(unInitialisePanel);
+});
+ +

This takes three mandatory arguments: the panel's title, icon, and content. It returns a Promise which resolves to a devtools.panels.ExtensionPanel object representing the new panel.

+ +

Interacting with the target window

+ +

The developer tools are always attached to a particular browser tab. This is referred to as the "target" for the developer tools, or the "inspected window". You can interact with the inspected window using the devtools.inspectedWindow API.

+ +

Running code in the target window

+ +

The devtools.inspectedWindow.eval() provides one way to run code in the inspected window.

+ +

This is somewhat like using {{WebExtAPIRef("tabs.executeScript()")}} to inject a content script, but with one important difference:

+ + + +
+

Note that a clean view of the DOM is a security feature, intended to help prevent hostile pages from tricking extensions by redefining the behavior of native DOM functions. This means you need to be very careful using eval(), and should use a normal content script if you can.

+
+ +

Scripts loaded using devtools.inspectedWindow.eval() also don't see any JavaScript variables defined by content scripts.

+ +

Working with content scripts

+ +

A devtools document doesn't have direct access to {{WebExtAPIRef("tabs.executeScript()")}}, so if you need to inject a content script, the devtools document must send a message to the background script asking it to inject the script. The devtools.inspectedWindow.tabId provides the ID of the target tab: the devtools document can pass this to the background script, and the background script can in turn pass it into {{WebExtAPIRef("tabs.executeScript()")}}:

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+window.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

If you need to exchange messages between the content scripts running in the target window and a devtools document, it's a good idea to use the {{WebExtAPIRef("runtime.connect()")}} and {{WebExtAPIRef("runtime.onConnect")}} to set up a connection between the background page and the devtools document. The background page can then maintain a mapping between tab IDs and {{WebExtAPIRef("runtime.Port")}} objects, and use this to route messages between the two scopes.

+ +

+ +

Limitations of the devtools APIs

+ +

These APIs are based on the Chrome devtools APIs, but many features are still missing, compared with Chrome. This section lists the features that are still not implemented, as of Firefox 54. Note that the devtools APIs are under active development and we expect to add support for most of them in future releases.

+ +

devtools.inspectedWindow

+ +

The following are not supported:

+ + + +

None of the options to inspectedWindow.eval() are supported.

+ +

Scripts injected using inspectedWindow.eval() can't use all the Console's command-line helper functions, but $0 and inspect(...) are both supported (starting from Firefox 55).

+ +

devtools.panels

+ +

The following are not supported:

+ + + +

Examples

+ +

The webextensions-examples repo on GitHub, contains several examples of extensions that use devtools panels:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html new file mode 100644 index 0000000000..1d48eec011 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -0,0 +1,199 @@ +--- +title: Implementar una página de configuración +slug: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +tags: + - JavaScript +translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +--- +
{{AddonSidebar}}
+ +

Una página de configuración ofrece a los usuarios una manera de ver y cambiar los ajustes (algunas veces también llamados "preferencias" u "opciones") para el complemento.

+ +

Con WebExtensions, los ajustes generalmente se almacenan utilizando la  API storage . La implementación de una página de configuración se realiza en un proceso de tres pasos:

+ + + +
+

También puedes abrir esta página mediante programación utilizando la función runtime.openOptionsPage() .

+
+ +

Una sencilla  ExtensionWeb

+ +

En primer lugar, vamos a escribir una extensión que añada un borde azul a todas las páginas que el usuario visita.

+ +

Crea un nuevo directorio llamado "configuración", a continuación crea un archivo llamado"manifest.json" en su interior ,con el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "applications": {
+    "gecko": {
+      "id": "settings-example@mozilla.org"
+    }
+  }
+
+}
+ +

Este complemento da instrucciones al navegador para cargar un script de contenido llamado "borderify.js" en todas las páginas web que el usuario visita.

+ +

Ten en cuenta que también hemos incluido la clave applications .  Necesitaremos esto (solamente en Firefox ) porque si hay un error, debemos establecer explícitamente (la identidad del complemento) add-on ID , y también incluimos la clave de manifiesto options_ui. Aunque no utilicemos la clave options_ui en ese momento, lo haremos en la siguiente sección. Ver el  bug 1269545.

+ +

A continuación, crea un archivo llamado "borderify.js" en el directorio "configuración" , y añade el siguiente contenido :

+ +
document.body.style.border = "10px solid blue";
+ +

Esto solo añade un borde azul a la página.

+ +

Ahora instala WebExtension y comprueba — abre cualquier página web que te guste:

+ +

{{EmbedYouTube("E-WUhihF8fw")}}

+ +

Añadir ajustes

+ +

Ahora vamos a crear una página de configuración que permita al usuario establecer el color del borde.

+ +

En primer lugar, actualiza "manifest.json" para que tenga este contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Settings example",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "applications": {
+    "gecko": {
+      "id": "settings-example@mozilla.org"
+    }
+  },
+
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "permissions": ["storage"]
+
+}
+
+ +

Hemos añadido dos nuevas claves de manifiesto:

+ + + +

A continuacion, como hemos prometido  crear "options.html", vamos a realizarlo. Crea un archivo con ese nombre en el directorio "configuración" , y añade el siguiente contenido:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+
+    <form>
+        <label>Border color<input type="text" id="color" ></label>
+        <button type="submit">Save</button>
+    </form>
+
+    <script src="options.js"></script>
+
+  </body>
+
+</html>
+
+ +

Esto define un elemento HTML {{htmlelement("form")}} con un texto etiquetado {{htmlelement("input")}} y un botón de envio {{htmlelement("button")}}. también incluye un script llamado "options.js".

+ +

Crea "options.js", de nuevo en el directorio "configuración" , y añade el siguiente contenido:

+ +
function saveOptions(e) {
+  chrome.storage.local.set({
+    color: document.querySelector("#color").value
+  });
+}
+
+function restoreOptions() {
+  chrome.storage.local.get("color", (res) => {
+    document.querySelector("#color").value = res.color || "blue";
+  });
+}
+
+document.addEventListener("DOMContentLoaded", restoreOptions);
+document.querySelector("form").addEventListener("submit", saveOptions);
+ +

Esto hace dos cosas:

+ + + +

Finalmente, actualiza "borderify.js" para leer el color del borde del almacenamiento:

+ +
chrome.storage.local.get(null, (res) => {
+  var color = "blue";
+  if (res.color) {
+    color = res.color;
+  }
+  document.body.style.border = "10px solid " + color;
+});
+ +

En este punto, el complemento completo debe tener este aspecto:

+ +
settings/
+    borderify.js
+    manifest.json
+    options.html
+    options.js
+ +

Ahora:

+ + + +

En Firefox se puede accededer a la página de configuración visitando : complementos y haciendo click en el botón "Preferencias" junto a la entrada del complemento.

+ +

{{EmbedYouTube("ECt9cbWh1qs")}}

+ +

Aprende más

+ + + +

 

diff --git a/files/es/mozilla/add-ons/webextensions/index.html b/files/es/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..ec02f9c6df --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,155 @@ +--- +title: Extensiones del navegador +slug: Mozilla/Add-ons/WebExtensions +tags: + - Complementos + - Dónde empezar + - Manifiesto + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions +--- +
{{AddonSidebar}}
+ +

Las extensiones pueden extender y modificar la capacidad de un navegador. Las extensiones para Firefox son construidas utilizando las APIs de WebExtension, un sistema para el desarrollo de extensiones multi-navegador. En gran medida, el sistema es compatible con la API de extensión soportada por Google Chrome, Opera y el borrador del grupo de la comunidad del W3C.

+ +

Las extensiones escritas para estos navegadores se ejecutarán en la mayoría de los casos en Firefox o Microsoft Edge con sólo unos pocos cambios. La API también es totalmente compatible con multiprocesos de Firefox.

+ +

Si tiene alguna idea, pregunta, o necesita ayuda en el proceso de migración de un complemento heredado al uso de las APIs de WebExtension, puede ponerse en contacto con nosotros a través de la lista de correo dev-addons o en el canal #webextensions de IRC.

+ +
+
+

Primeros pasos

+ + + +

 

+ +

Conceptos

+ + + +

 

+ +

Interfaz de usuario

+ + + +

Cómo

+ + + +

Portado

+ + + +

Flujo de trabajo de Firefox

+ + +
+ +
+

Reference

+ +

JavaScript APIs

+ + + +

APIs de JavaScript

+ +
{{ListSubpages("/en-US/Add-ons/WebExtensions/API")}}
+ +

Manifest keys

+ + + +
{{ListSubpages("/en-US/Add-ons/WebExtensions/manifest.json")}}
+
+
+ + diff --git a/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html b/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html new file mode 100644 index 0000000000..a87d079ecd --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/intercept_http_requests/index.html @@ -0,0 +1,156 @@ +--- +title: Interceptar peticiones HTTP +slug: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +tags: + - Complementos + - Cómos + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests +--- +
{{AddonSidebar}}
+ +

Para interceptar peticiones HTTP, utilice la API {{WebExtAPIRef("webRequest")}}. Esta API le permite agregar escuchadores de evento para varias etapas en la realización de las solicitudes HTTP. En los escuchadores, tu puedes:

+ + + +

En este artículo se verán los tres diferentes usos del módulo webRequest:

+ + + +

Registrar solicitudes de URLs

+ +

Crea un nuevo directorio llamado "requests". En ese directorio, crea un archivo llamado "manifest.json" el cual debe poseer el siguiente contenido:

+ +
{
+  "description": "Demostrar webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+}
+ +

Luego, crea un archivo llamado "background.js" con el siguiente contenido:

+ +
function logURL(requestDetails) {
+  console.log("Cargando: " + requestDetails.url);
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  logURL,
+  {urls: ["<all_urls>"]}
+);
+
+
+ +

En este punto se utiliza {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para llamar la función logURL() junstamente después de realizar la solicitud. La función logURL() se apropia de la solicitud URL del objeto de eventos y lo registra en la consola del navegador. El patrón {urls: ["<all_urls>"]} signinifica que se pueden interceptar todas las solicitudes HTTP de todas las URLs.

+ +

Para probarlo, instala la WebExtension, abre la consola del navegador, y abre algunas páginas Web. En la consola del navegador, deberías ver las URLs de cualquier recurso que el navegador solicita:

+ +

{{EmbedYouTube("X3rMgkRkB1Q")}}

+ +

Redireccionar solicitudes

+ +

Ahora utilice webRequest para redireccionar todas las solicitudes HTTP. Primero, reemplace manifest.json con lo siguiente:

+ +
{
+
+  "description": "Demostrar webRequests",
+  "manifest_version": 2,
+  "name": "webRequest-demo",
+  "version": "1.0",
+
+  "permissions": [
+    "webRequest", "webRequestBlocking"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

El único cambio fue la adición de los permisos "webRequestBlocking". Se necesita preguntar por este extra-permiso todas las veces que se está activamente modificando una solicitud.

+ +

Luego, reemplace "background.js" con esto:

+ +
var pattern = "https://mdn.mozillademos.org/*";
+
+function redirect(requestDetails) {
+  console.log("Redireccionando: " + requestDetails.url);
+  return {
+    redirectUrl: "https://38.media.tumblr.com/tumblr_ldbj01lZiP1qe0eclo1_500.gif"
+  };
+}
+
+browser.webRequest.onBeforeRequest.addListener(
+  redirect,
+  {urls:[pattern], types:["image"]},
+  ["blocking"]
+);
+ +

De nuevo, se utiliza el escuchador de evento {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} para ejecutar una función justamente antes de que cada solicitud sea realizada. Esta función reemplazará el objetivo URL con redirectUrl que está definido en la función.

+ +

Esta vez no se está interceptando cada solicitud: la opción {urls:[pattern], types:["image"]} especifica que solo se debería interceptar solicitudes (1) de URLs que residen bajo "https://mdn.mozillademos.org/" (2) para recursos de imágenes. Vea {{WebExtAPIRef("webRequest.RequestFilter")}} para más información sobre esto.

+ +

Dése cuenta también, que se esta pasando la opción llamada "blocking": se necesita pasar cada vez que se requiera modificar la solicitud. Esto hace que la función del escuchador bloquee la solicitud de la red, así que el navegador espera que el escuchador retorne antes de continuar. Vea la documentación {{WebExtAPIRef("webRequest.onBeforeRequest")}} para conocer más sobre "blocking".

+ +

Para probarlo, abra una página de MDN que contenga bastantes imágenes (por ejemplo https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor), recargue la WebExtension, y luego recargue la página de MDN:

+ +

{{EmbedYouTube("ix5RrXGr0wA")}}

+ +

Modificar las cabeceras de la solicitud

+ +

Finalmente se utilizará webRequest para modificar las cabeceras de las solicitudes. En este ejempo se modificará la cabecera "User-Agent" así que el navegador se identificará por sí mismo como Opera 12.16, pero solamente cuando se visitan páginas de "http://useragentstring.com/".

+ +

El "manifest.json" puede permanecer igual que el ejemplo anterior.

+ +

Reemplace "background.js" con el siguiente código:

+ +
var targetPage = "http://useragentstring.com/*";
+
+var ua = "Opera/9.80 (X11; Linux i686; Ubuntu/14.10) Presto/2.12.388 Version/12.16";
+
+function rewriteUserAgentHeader(e) {
+  for (var header of e.requestHeaders) {
+    if (header.name == "User-Agent") {
+      header.value = ua;
+    }
+  }
+  return {requestHeaders: e.requestHeaders};
+}
+
+browser.webRequest.onBeforeSendHeaders.addListener(
+  rewriteUserAgentHeader,
+  {urls: [targetPage]},
+  ["blocking", "requestHeaders"]
+);
+ +

Aquí se utiliza el escuchador de eventos {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} para ejecutar una función juntamente antes de que la solicitud de las cabeceras sean enviadas.

+ +

La función escuchadora será llamada solamente por solicitudes de URLs que coincidan con el patrón targetPage. Dése cuenta de nuevo que "blocking" se ha pasado como una opción. También se pasó "requestHeaders", lo cual significa que al escuchador pasará un array conteniendo las cabeceras de la solicitud que se espera enviar. Vea {{WebExtAPIRef("webRequest.onBeforeSendHeaders")}} para más información en estas opciones.

+ +

La función escuchadora busca la cabecera "User-Agent" en el array de la solicitud de cabeceras, reemplaza el valor con el valor de la variable ua, y regresa el array modificado. Este array modificado será el enviado al servidor.

+ +

Para comprobarlo, abra useragentstring.com y verifique que identifica al navegador como Firefox. Luego recargue el complemento, recargue useragentstring.com, y compruebe que Firefox es identificado ahora como Opera:

+ +

{{EmbedYouTube("SrSNS1-FIx0")}}

+ +

Aprenda más

+ +

Para aprender más sobre todas las cosas que puede hacer con la API webRequest, vea su propia documentación de referencia.

diff --git a/files/es/mozilla/add-ons/webextensions/internationalization/index.html b/files/es/mozilla/add-ons/webextensions/internationalization/index.html new file mode 100644 index 0000000000..89c542a2e7 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/internationalization/index.html @@ -0,0 +1,405 @@ +--- +title: Internationalization +slug: Mozilla/Add-ons/WebExtensions/Internationalization +translation_of: Mozilla/Add-ons/WebExtensions/Internationalization +--- +
H
+ +

The WebExtensions API has a rather handy module available for internationalizing extensions — i18n. In this article we'll explore its features and provide a practical example of how it works. The i18n system for extensions built using WebExtension APIs is similar to common JavaScript libraries for i18n such as i18n.js.

+ +
+

The example extension featured in this article — notify-link-clicks-i18n — is available on GitHub. Follow along with the source code as you go through the sections below.

+
+ +

Anatomy of an internationalized extension

+ +

An internationalized extension can contain the same features as any other extension — background scripts, content scripts, etc. — but it also has some extra parts to allow it to switch between different locales. These are summarized in the following directory tree:

+ + + +

Let's explore each of the new features in turn — each of the below sections represents a step to follow when internationalizing your extension.

+ +

Providing localized strings in _locales

+ +
+
You can look up language subtags using the Find tool on the Language subtag lookup page. Note that you need to search for the English name of the language.
+
+ +

Every i18n system requires the provision of strings translated into all the different locales you want to support. In extensions, these are contained within a directory called _locales, placed inside the extension root. Each individual locale has its strings (referred to as messages) contained within a file called messages.json, which is placed inside a subdirectory of _locales, named using the language subtag for that locale's language.

+ +

Note that if the subtag includes a basic language plus a regional variant, then the language and variant are conventionally separated using a hyphen: for example, "en-US". However, in the directories under _locales, the separator must be an underscore: "en_US".

+ +

So for example, in our sample app we have directories for "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese). Each one of these has a messages.json file inside it.

+ +

Let's now look at the structure of one of these files (_locales/en/messages.json):

+ +
{
+  "extensionName": {
+    "message": "Notify link clicks i18n",
+    "description": "Name of the extension."
+  },
+
+  "extensionDescription": {
+    "message": "Shows a notification when the user clicks on links.",
+    "description": "Description of the extension."
+  },
+
+  "notificationTitle": {
+    "message": "Click notification",
+    "description": "Title of the click notification."
+  },
+
+  "notificationContent": {
+    "message": "You clicked $URL$.",
+    "description": "Tells the user which link they clicked.",
+    "placeholders": {
+      "url" : {
+        "content" : "$1",
+        "example" : "https://developer.mozilla.org"
+      }
+    }
+  }
+}
+ +

This file is standard JSON — each one of its members is an object with a name, which contains a message and a description. All of these items are strings; $URL$ is a placeholder, which is replaced with a substring at the time the notificationContent member is called by the extension. You'll learn how to do this in the {{anch("Retrieving message strings from JavaScript")}} section.

+ +
+

Note: You can find much more information about the contents of messages.json files in our Locale-Specific Message reference.

+
+ +

Internationalizing manifest.json

+ +

There are a couple of different tasks to carry out to internationalize your manifest.json.

+ +

Retrieving localized strings in manifests

+ +

Your manifest.json includes strings that are displayed to the user, such as the extension's name and description. If you internationalize these strings and put the appropriate translations of them in messages.json, then the correct translation of the string will be displayed to the user, based on the current locale, like so.

+ +

To internationalize strings, specify them like this:

+ +
"name": "__MSG_extensionName__",
+"description": "__MSG_extensionDescription__",
+ +

Here, we are retrieving message strings dependant on the browser's locale, rather than just including static strings.

+ +

To call a message string like this, you need to specify it like this:

+ +
    +
  1. Two underscores, followed by
    2. +
  2. The string "MSG", followed by
    3. +
  3. One underscore, followed by
    4. +
  4. The name of the message you want to call as defined in messages.json, followed by
    5. +
  5. Two underscores
    6. +
+ +
__MSG_ + messageName + __
+ +

Specifying a default locale

+ +

Another field you should specify in your manifest.json is default_locale:

+ +
"default_locale": "en"
+ +

This specifies a default locale to use if the extension doesn't include a localized string for the browser's current locale. Any message strings that are not available in the browser locale are taken from the default locale instead. There are some more details to be aware of in terms of how the browser selects strings — see {{anch("Localized string selection")}}.

+ +

Locale-dependent CSS

+ +

Note that you can also retrieve localized strings from CSS files in the extension. For example, you might want to construct a locale-dependent CSS rule, like this:

+ +
header {
+  background-image: url(../images/__MSG_extensionName__/header.png);
+}
+ +

This is useful, although you might be better off handling such a situation using {{anch("Predefined messages")}}.

+ +

Retrieving message strings from JavaScript

+ +

So, you've got your message strings set up, and your manifest. Now you just need to start calling your message strings from JavaScript so your extension can talk the right language as much as possible. The actual i18n API is pretty simple, containing just four main methods:

+ + + +

In our notify-link-clicks-i18n example, the background script contains the following lines:

+ +
var title = browser.i18n.getMessage("notificationTitle");
+var content = browser.i18n.getMessage("notificationContent", message.url);
+ +

The first one just retrieves the notificationTitle message field from the available messages.json file most appropriate for the browser's current locale. The second one is similar, but it is being passed a URL as a second parameter. What gives? This is how you specify the content to replace the $URL$ placeholder we see in the notificationContent message field:

+ +
"notificationContent": {
+  "message": "You clicked $URL$.",
+  "description": "Tells the user which link they clicked.",
+  "placeholders": {
+    "url" : {
+      "content" : "$1",
+      "example" : "https://developer.mozilla.org"
+    }
+  }
+}
+
+ +

The "placeholders" member defines all the placeholders, and where they are retrieved from. The "url" placeholder specifies that its content is taken from $1, which is the first value given inside the second parameter of getMessage(). Since the placeholder is called "url", we use $URL$ to call it inside the actual message string (so for "name" you'd use $NAME$, etc.) If you have multiple placeholders, you can provide them inside an array that is given to {{WebExtAPIRef("i18n.getMessage()")}} as the second parameter — [a, b, c] will be available as $1, $2, and $3, and so on, inside messages.json.

+ +

Let's run through an example: the original notificationContent message string in the en/messages.json file is

+ +
You clicked $URL$.
+ +

Let's say the link clicked on points to https://developer.mozilla.org. After the {{WebExtAPIRef("i18n.getMessage()")}} call, the contents of the second parameter are made available in messages.json as $1, which replaces the $URL$ placeholder as defined in the "url" placeholder. So the final message string is

+ +
You clicked https://developer.mozilla.org.
+ +

Direct placeholder usage

+ +

It is possible to insert your variables ($1, $2, $3, etc.) directly into the message strings, for example we could rewrite the above "notificationContent" member like this:

+ +
"notificationContent": {
+  "message": "You clicked $1.",
+  "description": "Tells the user which link they clicked."
+}
+ +

This may seem quicker and less complex, but the other way (using "placeholders") is seen as best practice. This is because having the placeholder name (e.g. "url") and example helps you to remember what the placeholder is for — a week after you write your code, you'll probably forget what $1–$8 refer to, but you'll be more likely to know what your placeholder names refer to.

+ +

Hardcoded substitution

+ +

It is also possible to include hardcoded strings in placeholders, so that the same value is used every time, instead of getting the value from a variable in your code. For example:

+ +
"mdn_banner": {
+  "message": "For more information on web technologies, go to $MDN$.",
+  "description": "Tell the user about MDN",
+  "placeholders": {
+    "mdn": {
+      "content": "https://developer.mozilla.org/"
+    }
+  }
+}
+ +

In this case we are just hardcoding the placeholder content, rather than getting it from a variable value like $1. This can sometimes be useful when your message file is very complex, and you want to split up different values to make the strings more readable in the file, plus then these values could be accessed programmatically.

+ +

In addition, you can use such substitutions to specify parts of the string that you don't want to be translated, such as person or business names.

+ +

Localized string selection

+ +

Locales can be specified using only a language code, like fr or en, or they may be further qualified with a region code, like en_US or en_GB, which describes a regional variant of the same basic language. When you ask the i18n system for a string, it will select a string using the following algorithm:

+ +
    +
  1. if there is a messages.json file for the exact current locale, and it contains the string, return it.
    2. +
  2. Otherwise, if the current locale is qualified with a region (e.g. en_US) and there is a messages.json file for the regionless version of that locale (e.g. en), and that file contains the string, return it.
    3. +
  3. Otherwise, if there is a messages.json file for the default_locale defined in the manifest.json, and it contains the string, return it.
    4. +
  4. Otherwise return an empty string.
    5. +
+ +

Take the following example:

+ + + +

Suppose the default_locale is set to fr, and the browser's current locale is en_GB:

+ + + +

Predefined messages

+ +

The i18n module provides us with some predefined messages, which we can call in the same way as we saw earlier in {{anch("Calling message strings from manifests and extension CSS")}}. For example:

+ +
__MSG_extensionName__
+ +

Predefined messages use exactly the same syntax, except with @@ before the message name, for example

+ +
__MSG_@@ui_locale__
+ +

The following table shows the different available predefined messages:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Message nameDescription
@@extension_id +

The extension's internally-generated UUID. You might use this string to construct URLs for resources inside the extension. Even unlocalized extensions can use this message.

+ +

You can't use this message in a manifest file.

+ +

Also note that this ID is not the add-on ID returned by {{WebExtAPIRef("runtime.id")}}, and that can be set using the applications key in manifest.json. It's the generated UUID that appears in the add-on's URL. This means that you can't use this value as the extensionId parameter to {{WebExtAPIRef("runtime.sendMessage()")}}, and can't use it to check against the id property of a {{WebExtAPIRef("runtime.MessageSender")}} object.

+
@@ui_localeThe current locale; you might use this string to construct locale-specific URLs.
@@bidi_dirThe text direction for the current locale, either "ltr" for left-to-right languages such as English or "rtl" for right-to-left languages such as Arabic.
@@bidi_reversed_dirIf the @@bidi_dir is "ltr", then this is "rtl"; otherwise, it's "ltr".
@@bidi_start_edgeIf the @@bidi_dir is "ltr", then this is "left"; otherwise, it's "right".
@@bidi_end_edgeIf the @@bidi_dir is "ltr", then this is "right"; otherwise, it's "left".
+ +

Going back to our earlier example, it would make more sense to write it like this:

+ +
header {
+  background-image: url(../images/__MSG_@@ui_locale__/header.png);
+}
+ +

Now we can just store our local specific images in directories that match the different locales we are supporting — en, de, etc. — which makes a lot more sense.

+ +

Let's look at an example of using @@bidi_* messages in a CSS file:

+ +
body {
+  direction: __MSG_@@bidi_dir__;
+}
+
+div#header {
+  margin-bottom: 1.05em;
+  overflow: hidden;
+  padding-bottom: 1.5em;
+  padding-__MSG_@@bidi_start_edge__: 0;
+  padding-__MSG_@@bidi_end_edge__: 1.5em;
+  position: relative;
+}
+ +

For left-to-right languages such as English, the CSS declarations involving the predefined messages above would translate to the following final code lines:

+ +
direction: ltr;
+padding-left: 0;
+padding-right: 1.5em;
+
+ +

For a right-to-left language like Arabic, you'd get:

+ +
direction: rtl;
+padding-right: 0;
+padding-left: 1.5em;
+ +

Testing out your extension

+ +

Starting in Firefox 45, you can install extensions temporarily from disk — see Loading from disk. Do this, and then try testing out our notify-link-clicks-i18n extension. Go to one of your favourite websites and click a link to see if a notification appears reporting the URL of the clicked link.

+ +

Next, change Firefox's locale to one supported in the extension that you want to test.

+ +
    +
  1. Open "about:config" in Firefox, and search for the intl.locale.requested preference (bear in mind that before Firefox 59, this pref is called general.useragent.locale).
    2. +
  2. If the preference exists, double-click it (or press Return/Enter) to select it, enter the language code for the locale you want to test, then click "OK" (or press Return/Enter). For example in our example extension, "en" (English), "de" (German), "nl" (Dutch), and "ja" (Japanese) are supported. You can also set the value to an empty string (""), which will cause the browser to use the OS default locale.
    3. +
  3. If the intl.locale.requested preference does not exist, right-click the list of preferences (or activate the context menu using the keyboard), and choose "New" followed by "String". Enter intl.locale.requested for the preference name and, "de", or "nl", etc. for the preference value, as described in step 2 above.
    4. +
  4. Search for intl.locale.matchOS and, if the preference exists and has the value true, double-click it  so that it is set to false.
    5. +
  5. Restart your browser to complete the change.
    6. +
+ +
+

Note: This works to change the browser's locale, even if you haven't got the language pack installed for that language. You'll just get the browser UI in your default language if this is the case.

+
+ +
    +
+ +
+

Note: To change the result of getUILanguage the language pack is required, since it reflects the browser UI language and not the language used for extension messages.

+
+ +

Load the extension temporarily from disk again, then test your new locale:

+ + + +

{{EmbedYouTube("R7--fp5pPGg")}}

diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html new file mode 100644 index 0000000000..0f8550f027 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/manifest.json/icons/index.html @@ -0,0 +1,74 @@ +--- +title: icons +slug: Mozilla/Add-ons/WebExtensions/manifest.json/icons +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/icons +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TipoObject
ObligatorioNo
Ejemplo + 
+"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}
+
+ +

La propiedad icons especifica los iconos de tu extensión. Esos iconos se usarán para representar la extensión en componentes como el Administrador de complementos.

+ +

Consiste en pares clave-valor del tamaño de la imagen en px y la ruta de la imagen relativa al directorio raíz de la extensión.

+ +

Si icons no esta definido, se utilizará un icono de extensión estándar por defecto.

+ +

Debería suministrar al menos un icono de extensión principal, idealmente de 48x48 px de tamaño. Este es el icono por defecto que se utilizará en el Administrador de complementos. Sin embargo, puedes suministrar iconos de cualquier tamaño y Firefox intentará encontrar el mejor icono para mostrar en los diferentes componentes.

+ +

Firefox tendrá en cuenta la resolución de la pantalla al elegir un icono. Para ofrecer la mejor experiencia visual a los usuarios con pantallas de alta resolución, como las pantallas Retina, proporciona versiones de doble tamaño de todos sus iconos.

+ +

Ejemplo

+ +

Las propiedades del objeto icons especifican el tamaño del icono en px, los valores especifican la ruta relativa del icono. Este ejemplo contiene un icono de extensión de 48px y una versión más grande para pantallas de alta resolución.

+ +
"icons": {
+  "48": "icon.png",
+  "96": "icon@2x.png"
+}
+ +

SVG

+ +

Puede usar SVG y el navegador escalará su icono adecuadamente. Sin embargo, hay dos advertencias:

+ +
    +
  1. Necesitas especificar un viewBox en la imagen. E.g.: + 
    <svg viewBox="0 0 48 48" width="48" height="48" ...
    +
    2. +
  2. Aunque puedes usar un archivo, todavía necesitas especificar varios tamaños del icono en tu manifiesto. E.g.: + 
    "icons": {
+  "48": "icon.svg",
+  "96": "icon.svg"
+}
    +
    3. +
+ +
+

Si está usando un programa como Inkscape para crear SVG, puede que quiera guardarlo como un "SVG simple". Firefox podría confundirse con varios espacios de nombres especiales y no mostrar su icono.

+
+ +

Compatibilidad

+ + + +

{{Compat("webextensions.manifest.icons")}}

diff --git a/files/es/mozilla/add-ons/webextensions/manifest.json/index.html b/files/es/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..f85e30b4cf --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,51 @@ +--- +title: manifest.json +slug: Mozilla/Add-ons/WebExtensions/manifest.json +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json +--- +

{{AddonSidebar}}

+ +
+

Este artículo describe manifest.json para extensiones web. Si estás buscando información acerca de manifest.json en PWAs, revisa el artículo sobre Web App Manifest.

+
+ +

El archivo manifest.json es el único archivo que toda extensión usando la API WebExtension debe contener necesariamente.

+ +

Usando manifest.json, puedes especificar los metadatos básicos de tu extensión como nombre y versión, así como aspectos funcionales de tu extensión (tales como scripts en segundo plano, scripts de contenido y acciones del navegador).

+ +

Es un archivo con formato JSON, con una excepción: permite comentarios con "//".

+ + +

Lista de claves de manifest.json

+ +

Las claves de manifest.json son:

+ +
{{ListSubpages("/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json")}}
+ + +

Notas acerca de las claves de manifest.json

+ + + +

Acceder a las claves de manifest.json en tiempo de ejecución

+ +

Puedes acceder a el manifest desde el código JavaScript de tu extensión utilizando la función {{WebExtAPIRef("runtime.getManifest()")}}:

+ +
browser.runtime.getManifest().version;
+ + +

Compatibilidad de Navegadores

+ +

Para un resumen extendido de las llaves y sub-llaves ver la tabla completa de compatibilidad de manifest.json en navegadores.

+ + + +

{{Compat("webextensions.manifest")}}

+ +

Ver También

+ +

API JavaScript de {{WebExtAPIRef("permissions")}}

diff --git a/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html new file mode 100644 index 0000000000..eb7493b62b --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/modify_a_web_page/index.html @@ -0,0 +1,253 @@ +--- +title: Modify a web page +slug: Mozilla/Add-ons/WebExtensions/Modify_a_web_page +translation_of: Mozilla/Add-ons/WebExtensions/Modify_a_web_page +--- +
{{AddonSidebar}}
+ +
Uno de los usos más comunes para las extensiones es modificar páginas web.  Por ejemplo, una extension puede querer cambiar el estilo de la página, esconder determinados nodos DOM o incluir otros nuevos.
+ +
 
+ +
Existen dos maneras de hacer esto con extensiones Web y APIs:
+ +
 
+ + + +

De ambas formas, estos scripts se llaman scripts de contenido y son distintos del resto de scripts que constituyen una extensión. 

+ + + +

En este artículo hablaremos de los dos métodos para cargar una script..

+ +

Modificando páginas que encajen con un patrón URL

+ +

Para empezar, crea un nuevo directorio llamado "modify-page". En este directorio, crea un archivo llamado "manifest.json", con el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "content_scripts": [
+    {
+      "matches": ["https://developer.mozilla.org/*"],
+      "js": ["page-eater.js"]
+    }
+  ]
+
+}
+ +

La llave content_scripts es el método de carga de scripts a páginas cuya URL encaje con los patrones. En este caso, content_scripts le dice al navegador que cargue una script llamada "page-eater.js" en todas las páginas con https://developer.mozilla.org/.

+ +
+

Debido a que el atributo "js" de content_scripts es una array, puedes usarla para inyectar más de una script a las páginas que encajen con el patrón. Si haces esto las páginas compartiran el mismo campo de aplicación, igual que múltiples scripts cargadas por una página, y son cargadas en el mismo orden en las que están dispuestas en la array.

+
+ +
+

La llave content_scripts tambien tiene un atributo de "css" que puedes usar para inyectar código CSS. 

+
+ +

Después, crea un archivo llamado "page-eater.js" dentro del directorio "modify-page" e introduce el contenido de a continuación:

+ +
document.body.textContent = "";
+
+var header = document.createElement('h1');
+header.textContent = "This page has been eaten";
+document.body.appendChild(header);
+ +

 Ahora, instala la extensión y visita https://developer.mozilla.org/:

+ +

{{EmbedYouTube("lxf2Tkg6U1M")}}

+ +
+

Ten en cuenta que aunque este video muestra el contenido de la script operando en addons.mozilla.org, las scripts de contenido están bloqueadas en esta página por el momento.

+
+ +

Modificando las páginas programaticamente

+ +

Y si quieres comer páginas, pero solo cuando el usuario te lo pida?  Actualicemos este ejemplo para que podamos enyectar el contenido de la script cuando el usuario haga click en un item del menu de contexto.

+ +

Primero actualiza "manifest.json" para que incluya el contenido a continuación:

+ +
{
+
+  "manifest_version": 2,
+  "name": "modify-page",
+  "version": "1.0",
+
+  "permissions": [
+    "activeTab",
+    "contextMenus"
+  ],
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}
+ +

Aquí, hemos eliminado la llave content_scripts  y hemos añadido dos nuevas llaves:

+ + + +

Ahora generaremos este archivo. Crea un archivo llamado "background.js" en el directorio "modify-page" e introduce el siguiente contenido: 

+ +
browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+  }
+});
+
+ +

En esta script estamos creando un item del menu de contexto  y dándole una ID y un título específico (el texto que se estará expuesto en el menu de contexto). Después configuramos un evento de escucha para que cuando el usuario haga click en uno de los items del menu podamos comprobar si se trata de nuestro item eat-page . En caso afirmativo, inyectaremos "page-eater.js" a la lengüeta actual usando la API tabs.executeScript(). Alternativamente, esta API puede tomar como argumento una ID. En este caso la hemos omitido lo cual quiere decir que la script es inyectada en la lengüeta que está actualmente abierta.

+ +

Ahora mismo la extensión debería ser algo como esto:

+ +
modify-page/
+    background.js
+    manifest.json
+    page-eater.js
+ +

Ahora recarga la extensión, abre la página (cualquier página en esta ocasión), activa el menu de contexto y selecciona "Eat this page" (Comer esta página):

+ +

{{EmbedYouTube("zX4Bcv8VctA")}}

+ +
+

Ten en cuenta que aunque este video muestra el contenido de la script operando en addons.mozilla.org, las scripts de contenido están bloqueadas en esta página por el momento.

+
+ +

Mensajería

+ +

Scripts de contenido y scripts de fondo no pueden acceder directamente al estado del otro. Sin embargo, pueden comunicarse mediante el uso de mensajes. Una terminal configura un escuchador de mensajes y la otra terminal puede mandarle un mensaje. La siguente tabla resume las APIs involucradas en cada parte:

+ + + + + + + + + + + + + + + + + + + +
 En el script de contenidoEn el script de fondo
Mandar un mensajebrowser.runtime.sendMessage()browser.tabs.sendMessage()
Recibir un mensajebrowser.runtime.onMessagebrowser.runtime.onMessage
+ +

Actualicemos nuestro ejemplo para ilustrar como mandar un mensaje desde una script de fondo.

+ +

Primero, hemos de editar "background.js" para que tenga el siguiente contenido:

+ +
browser.contextMenus.create({
+  id: "eat-page",
+  title: "Eat this page"
+});
+
+function messageTab(tabs) {
+  browser.tabs.sendMessage(tabs[0].id, {
+    replacement: "Message from the extension!"
+  });
+}
+
+function onExecuted(result) {
+    var querying = browser.tabs.query({
+        active: true,
+        currentWindow: true
+    });
+    querying.then(messageTab);
+}
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "eat-page") {
+    let executing = browser.tabs.executeScript({
+      file: "page-eater.js"
+    });
+    executing.then(onExecuted);
+  }
+});
+
+ +

Ahora, después de inyectar "page-eater.js", hemos de usar tabs.query()  para obtener la lengüeta actualmente activa y entonces usar tabs.sendMessage() para mandar un mensaje a las scripts de contenido cargadas en la lengüeta. El mensaje tiene el contenido {replacement: "Message from the extension!"}.

+ +

Después, actualiza "page-eater.js" de esta forma:

+ +
function eatPageReceiver(request, sender, sendResponse) {
+  document.body.textContent = "";
+  var header = document.createElement('h1');
+  header.textContent = request.replacement;
+  document.body.appendChild(header);
+}
+browser.runtime.onMessage.addListener(eatPageReceiver);
+
+ +

Ahora, en vez de simplemente comer la página, el contenido espera a un mensaje usando runtime.onMessage.  Cuando el mensaje llega, el script de contenido ejecuta el mismo código de antes, exceptuando que el  texto de reemplazo se obtenido de request.replacement.

+ +

Debido a que tabs.executeScript() es una función asincrónica y para asegurarnos de que mandamos el mensaje solo cuando el escuchador ha sido añadido en "page-eater.js", usamos onExecuted que sera llamado después de que "page-eater.js" se ejecute.

+ +
+

Pulsa Ctrl+Shift+J (o Cmd+Shift+J en el Mac)  o web-ext run --bc para abrir la consola de navegación para ver console.log en la script de fondo. Alternativamente puedes usar el Add-on Debugger, el cual te permite poner un breakpoint.  De momento no hay forma de iniciar un Add-on Debugger directamente de una extensión web.

+
+ +

Si queremos enviar mensajes directamente desde el contenido script de vuelta a la página de fondo, podríamos usarruntime.sendMessage() en vez de  tabs.sendMessage(). Por ejemplo:

+ +
browser.runtime.sendMessage({
+    title: "from page-eater.js"
+});
+ +
+

Todos estos ejemplos inyectan Javascript; también puedes inyectar CSS programaticamente usando la funcióntabs.insertCSS().

+
+ +

Aprende más

+ + + +

 

diff --git a/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html b/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html new file mode 100644 index 0000000000..e032fc354b --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/packaging_and_installation/index.html @@ -0,0 +1,90 @@ +--- +title: Empaquetado e Instalación +slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +--- +

Empaquetando tu extensión

+ +
+

Mozilla actualmente esta considerando implementar una aplicación con interfaz visual para empaquetar y cargar extensiones. Mira el Bug 1185460 para más información. Hasta entonces, sigue los pasos que aparecen a continuación.

+
+ +

Las extensiones para Firefox son empaquetadas como archivos XPI, los cuales son solamente archivos ZIP, con extensión "xpi".

+ +

Un truco es que el archivo ZIP debe ser un archivo que contenga los archivos de la extensión y no la carpeta que los contiene.

+ +

Windows

+ +
    +
  1. Abre la carpeta que contiene los archivos de tu extensión.
    2. +
  2. Selecciona todos los archivos.
    3. +
  3. Con clic derecho elige Enviar a  → Carpeta comprimida (zip).
    4. +
  4. Cambia el nombre del archivo resultante de something.zip a something.xpi.
    5. +
+ +

Screenshot of the Windows Explorer context menu showing Send to compressed (zipped) folder

+ +

Mac OS X

+ +
    +
  1. Abre la carpeta que contiene los archivos de tu extensión.
    2. +
  2. Selecciona todos los archivos.
    3. +
  3. Con clic derecho elige Comprimir n elementos.
    4. +
  4. Cambia el nombre del archivo resultante de something.zip a something.xpi.
    5. +
+ +

Screenshot of the Finder context menu showing the Compress 15 Items option

+ +

Linux / Mac OS X Terminal

+ +
    +
  1. cd path/to/my-extension/
    2. +
  2. zip -r ../my-extension.xpi *
    3. +
+ +

Instalando tu extensión

+ +
    +
  1. Navega a about:addons
    2. +
  2. Arrastra y suelta el XPI dentro de la página, o abre el menú de opciones y escoge "Instalar complemento desde archivo..."
    3. +
  3. Da clic en "Instalar" en el diálogo que aparecerá
    4. +
+ +

Instalando tu extensión en Firefox OS

+ +

Tu puedes instalar tu extensión desde WebIDE en un escritorio conectado vía USB o Wifi. Abre path/to/my-extension/ como una Aplicación empaquetada en WebIDE.

+ +

Cuando la validación de manifest.json es correcta podrás instalar y ejecutar tu extensión en el dispositivo con Firefox OS conectado.

+ +

Para instalar extensiones debe tener habilitada la opción en Configuración->Complementos del dispositivo con Firefox OS.

+ +

Resolución de problemas

+ +

Aquí están algunos de los problemas más comunes que podrías encontrarte:

+ +

"Este complemento no puede ser instalado porque no ha sido verificado."

+ + + +

"Este complemento no puede ser instalado porque para estar corrupto."

+ + + +

No pasa nada

+ + diff --git a/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html new file mode 100644 index 0000000000..58959678f4 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html @@ -0,0 +1,22 @@ +--- +title: Conversión de extensiones de Google Chrome +slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +--- +
{{AddonSidebar}}
+ +

Las extensiones programadas con API de WebExtensions están diseñadas para ser compatibles entre navegadores diferentes: en buena medida, esta tecnología es compatible directamente con la API de extensiones admitida por Google Chrome y Opera. En la mayoría de los casos, las extensiones creadas para estos navegadores se ejecutarán en Firefox con solo unas pocas modificaciones. Casi todas las API de extensiones se admiten a través de funciones de devolución de llamada bajo el espacio de nombres chrome, al igual que Chrome. Las únicas API que no se admiten bajo el espacio de nombres chrome son aquellas que son deliberadamente incompatibles con Chrome. En esos casos contados, la página de documentación de la API manifestará expresamente que se admite solo en el espacio de nombres browser. El proceso de conversión de extensiones de Chrome u Opera es el siguiente:

+ +
    +
  1. Revise su utilización de funciones de manifest.json y API de WebExtensions con respecto a la referencia de incompatibilidades con Chrome. Si está empleando funciones o API que aún no se admiten en Firefox, es posible que no pueda convertir su extensión por el momento. Mozilla ofrece un servicio que puede ayudar a automatizar este paso: https://www.extensiontest.com/.
    2. +
  2. Instale su extensión en Firefox y póngala a prueba.
    3. +
  3. Si experimenta problemas, póngase en contacto con nosotros a través de la lista de correo «dev-addons» o el canal #webextensions en IRC.
    4. +
  4. Envíe su complemento a AMO para su firma y distribución.
    5. +
+ +

Si dependía de la opción de consola de Chrome para cargar extensiones no empaquetadas, eche un vistazo a la herramienta web-ext, la cual automatiza la instalación temporal en Firefox para permitir el desarrollo.

+ + diff --git a/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html new file mode 100644 index 0000000000..d022940dab --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/prerequisitos/index.html @@ -0,0 +1,17 @@ +--- +title: Prerequisitos +slug: Mozilla/Add-ons/WebExtensions/Prerequisitos +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +

Para desarrollar usando las APIs de WebExtension, debes seguir algunos pasos antes de comenzar.

+ + diff --git a/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html new file mode 100644 index 0000000000..ef81cd0468 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/publishing_your_webextension/index.html @@ -0,0 +1,105 @@ +--- +title: Publicando tu extensión +slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension +tags: + - AMO + - Addons + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ +--- +
{{AddonSidebar}}
+ +

Una vez que hayas acabado de modificar y testear tu extensión, es probable que quieras compartirla con el resto del mundo. Mozilla tiene una web: addons.mozilla.org (comunmente abreviada como AMO), en la que los desarrolladores pueden publicar sus complementos y los usuarios pueden encontrarlos. Publicando tu extension en AMO, puedes participar en nuestra comunidad de usuarios y creadores, y encontrar una audiencia para tu extension.

+ +

No tienes por que publicar tu extension en AMO.  De todas maneras, aunque no quieras publicarla, tendrás que enviarla a AMO para que pueda ser revisada y firmada. Las versiones oficiales de Firefox no aceptan complementos que no estén firmados por AMO.

+ +

En resumen, este es el proceso para publicar una extensión:

+ +
    +
  1. Comprime los archivos de tu extension en un zip
    2. +
  2. Crea una cuenta en AMO
    3. +
  3. Sube tu zip a AMO para firmarlo y revisarlo y selecciona una opción
    4. +
  4. Soluciona los problemas encontrados en la revisión
    5. +
  5. Si seleccionas no publicar la extension en AMO, puedes obtener la extension firmada y publicala por tu cuenta
    6. +
+ +

Cuando estés listo para lanzar una nueva versión de tu extensión, puedes actualizarla visitando la página de la extensión en addons.mozilla.org, y subiendo ahí la nueva versión. Ten en cuenta que tendrás que actualizar la página de la extensión para que AMO reconozca que es una actualización de la extensión, y no una extensión completamente nueva.

+ +

Si seleccionas publicar tu extensión en AMO, Firefox buscará las actualizaciones automaticamente. Si seleccionas publicarla por tu cuenta, tendrás que incluir la clave applications en tu manifest.json, con el atributo update_url apuntando a un update manifest file.

+ +
+
+

Las extensiones empaquetadas de Firefox son "archivos XPI", que son simplemente un .ZIP con otra extensión

+ +

No tienes que usar la extensión .XPI para subirla a AMO.

+
+
+ +

1. Comprime los archivos en un zip

+ +

En este punto tu extensión consistirá en una carpeta que contiene un manifest.json y otros archivos que necesite (scripts, iconos, documentos HTML, etc.). Necesitarás comprimir todos en un sólo .zip para poder subirlos a AMO.

+ +

Es importante saber que el .zip deber crearse seleccionando todos los archivos de la extensión, no su carpeta contenedora.

+ +

Windows

+ +
    +
  1. Abre la carpeta que contenga los archivos de tu extensión.
    2. +
  2. Selecciona todos los archivos (CTRL+E o CTRL+A, depende del idioma).
    3. +
  3. Click derecho en Enviar a → Carpeta comprimida (en zip).
    4. +
+ +

+ +

Mac OS X

+ +
    +
  1. Abre la carpeta que contenga los archivos de tu extensión.
    2. +
  2. Selecciona todos los archivos.
    3. +
  3. Click derecho y selecciona Comprimir n Items.
    4. +
+ +

+ +
+
Ver http://www.info-zip.org/mans/zip.html.
+
+ +

Linux / Mac OS X Terminal

+ +
    +
  1. cd path/to/my-extension/
    2. +
  2. zip -r -FS ../my-extension.zip *
    3. +
+ +
 
+ +

2. Crea una cuenta en addons.mozilla.org

+ +

Visita https://addons.mozilla.org/. Si ya tienes una Cuenta Firefox, puedes utilizarla para iniciar sesión. Si no, haz click en "Registrar" y se te exigirá crear una cuenta.

+ +

3. Sube tu zip

+ +

A continuación, sube la extensión comprimida a AMO para poder revisarla y firmarla, y selecciona si quieres publicarla en AMO o no. Hay un tutorial disponible para guiarte durante el proceso de envío. Sería conveniente que también veas Enviando a AMO para más detalles sobre el proceso.

+ +
+

Ten en cuenta que una vez que hayas subido la extensión a AMO no podrás actualizarla para usar el Add-on SDK o técnicas XUL/XPCOM. Si decides cambiar a una de estas plataformas, tendrás que enviar la extensión de nuevo como si de una nueva extensión se tratase.

+ +

En otras palabras: portar a partir de sistemas de extensiones heredadas para usar APIs WebExtension es un camino de ida.

+ +

Antes de subirla, asegurate de que el ZIP contiene sólo los archivos necesarios para la extensión.

+
+ +

4. Soluciona los problemas detectados en la revisión

+ +

En cuanto subas la aplicación, el servidor AMO realizará varios tests básicos y te notificará inmediatamente de cualquier problema. Los problemas se dividen en dos categorías: "errors" y "warnings". Si tienes errores, tienes que arreglarlos y reenviar la extensión. Si sólo tienes avisos, conviene solucionarlos, pero no es obligatorio. Puedes continuar.

+ +

Si el comprobador automático no detecta ningún error, la extensión pasará por una revisión más exhaustiva. Serás contactado con los resultados de la revisión. En caso de tener errores tendrás que solucionarlos e intentarlo de nuevo.

+ +

Si has selccionado que la extensión esté hosteada en AMO, este es el final del proceso de publicación. AMO firmará la extensión y la publicará, tras esto los usuarios ya podrán descargarla e instalarla.

+ +

5. Publica tu extensión

+ +

Si seleccionas no publicarla en AMO, obten la extensión firmada y públicala por tu cuenta.

+ +

 

diff --git a/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html new file mode 100644 index 0000000000..eca9f0ff30 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/que_son_las_webextensions/index.html @@ -0,0 +1,59 @@ +--- +title: ¿Qué son las extensiones? +slug: Mozilla/Add-ons/WebExtensions/Que_son_las_WebExtensions +tags: + - WebExtensions + - extensiones +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Una extensión agrega características y funciones a un explorador. Se ha creado utilizando tecnologías basadas en Web conocidas: HTML, CSS y JavaScript. Puede aprovechar las mismas API Web que JavaScript en una página web, pero una extensión también tiene acceso a su propio conjunto de APIs de JavaScript. Esto significa que puede hacer mucho más en una extensión de lo que puede con el código en una página web. Estos son sólo algunos ejemplos de las cosas que puedes hacer:

+ +

Mejore o complemente un sitio: Use un Add-on para ofrecer funciones adicionales en el navegador o información de su sitio Web. Permita a los usuarios recopilar detalles de las páginas que visitan para mejorar el servicio que ofrecen.

+ +

+ +

Ejemplos: El asistente de Amazon para Firefox, OneNote Web Clipper y Grammarly para Firefox

+ +

Permita que los usuarios demuestren su personalidad: Las extensiones del navegador pueden manipular el contenido de las páginas; por ejemplo, permite a los usuarios agregar su logo favorito o imágen como un fondo de pantalla acada página que visitan. Las extensiones permiten también al usuario actualizar el aspecto de la IU de Firefox, de la misma manera que lo hacen los complementos de temas.

+ +

+ +

Ejemplos: MyWeb New Tab, Tabliss y VivaldiFox

+ +

Agregar o quitar contenido de las páginas web: es posible que desee ayudar a los usuarios a bloquear los anuncios intrusivos de las páginas web, proporcionar acceso a una guía de viajes siempre que un país o ciudad se menciona en una página web, o reformatear el contenido de la página para ofrecer una experiencia de lectura consistente. Con la capacidad de acceder y actualizar tanto HTML como CSS de una página, las extensiones pueden ayudar a los usuarios a ver la Web de la manera que quieren.

+ +

+ +

Ejemplos: Origen uBlock, Lector y Caja de Herramientas para Google Play Store™

+ +

Agregar herramientas y nuevas funciones de navegación: añada nuevas funciones a un taskboard o genere imágenes de código QR a partir de URLs, hipervínculos o texto de página. Con opciones de interfaz de usuario flexibles y la potencia de las APIs de WebExtensions, puede añadir fácilmente nuevas funcionalidades a un navegador. Usted puede realzar casi cualquier característica o funcionalidad de sitios web, no tiene que ser su web.

+ +

+ +

Ejemplos: QR Code Image Generator, Swimlanes for Trello, y Tomato Clock

+ +

Juegos: ofrecer juegos de ordenador tradicionales, con características de juego fuera de línea, pero también explorar nuevas posibilidades de juego, por ejemplo, mediante la incorporación de gameplay en la navegación cotidiana.

+ +

+ +

Ejemplos: Asteroids in Popup, Solitaire Card Game New Tab, and 2048 Prime.

+ +

Agregar herramientas de desarrollo: puede proporcionar herramientas de desarrollo web como su negocio o ha desarrollado una técnica útil o un enfoque para el desarrollo web que desea compartir. De cualquier manera, puede mejorar las herramientas de desarrollo de Firefox incorporadas añadiendo una nueva ficha a la barra de herramientas del desarrollador.

+ +

+ +

Ejemplos: Web Developer, Web React Developer Tools, and aXe Developer Tools

+ +

Las extensiones para Firefox se construyen utilizando las APIs de WebExtensions, un sistema multi-navegador para desarrollar extensiones. En gran medida, la API es compatible con la extension API soportada por Google Chrome y Opera. Extensiones escritas para estos navegadores en la mayoría de los casos se ejecutan en Firefox o Microsoft Edge con sólo unos pocos cambios. La API es también totalmente compatible con los multiprocesos de Firefox.

+ +

Si tiene ideas o preguntas, o necesita ayuda para migrar un Add-on heredado a las APIs de WebExtensions, puede comunicarse con nosotros en eldev-addons mailing list o en #extdev en IRC.

+ +

¿Qué sigue?

+ + diff --git a/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html new file mode 100644 index 0000000000..d444b69f88 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/tu_primera_webextension/index.html @@ -0,0 +1,160 @@ +--- +title: Tu primera extensión +slug: Mozilla/Add-ons/WebExtensions/Tu_primera_WebExtension +tags: + - Guía + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{AddonSidebar}}
+ +
+

Si estás familiarizado/a con los conceptos básicos de las extensiones de navegador, omite esta sección y ve a cómo se ponen juntos los archivos. Entonces, usa la documentación de referencia para empezar a construir tu extensión. Visita el Firefox Extension Workshop para aprender más sobre el flujo de trabajo para probar y publicar extensiones para Firefox.

+
+ +

En este artículo abordaremos la creación de una extensión para Firefox, desde el comienzo hasta el final. La extensión solo agrega un borde rojo a cualquiera de las páginas cargadas desde "mozilla.org" o cualquiera de sus subdominios.

+ +

El código fuente de este ejemplo se encuentra en GitHub: https://github.com/mdn/webextensions-examples/tree/master/borderify.

+ +

Primero, necesitas tener instalado Firefox versión 45 o superior.

+ +

Escribiendo la extensión

+ +

Crea una nuevo directorio y navega a él. Por ejemplo, en tu línea de comandos/terminal se hace de esta manera:

+ +
mkdir borderify
+cd borderify
+ +

manifest.json

+ +

Ahora crearemos un archivo  nuevo llamado "manifest.json" directamente en la carpeta "borderify". Añádale el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Borderify",
+  "version": "1.0",
+
+  "description": "Agrega un borde rojo a todas las páginas web de mozilla.org.",
+
+  "icons": {
+    "48": "icons/border-48.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ]
+
+}
+ + + +

El parámetro más interesante aquí es content_scripts, el cual le dice a Firefox que cargue el script en las páginas Web, cuyas URL coincidan con un patrón especifico. En este caso, le estamos pidiendo a Firefox que cargue el script llamado "borderify.js" en todas las paginas HTTP o HTTPS cargadas desde "mozilla.org" o cualquiera de sus subdominios.

+ + + +
+

En algunas situaciones usted necesita especificar un ID para su extensión. Si necesita especificar un ID para el complemento, incluya el parámetro applications en el manifest.json y configure la propiedad gecko.id:

+ +
"applications": {
+  "gecko": {
+    "id": "borderify@example.com"
+  }
+}
+
+ +

icons/border-48.png

+ +

La extensión debería tener un ícono. Este se mostrará junto al listado de extensiones en el Administrador de Add-ons. Nuestro manifest.json promete que tendremos un ícono  en el directorio "icons/border-48.png".

+ +

Crea el directorio "icons" dentro de la carpeta "borderify". Almacena ahí el icono y nómbralo "border-48.png". Puedes utilizar el de nuestro ejemplo, el cual se obtuvo a partir del Google Material Design iconset, y es utilizado bajo los términos de la licencia Creative Commons Attribution-ShareAlike.

+ +

Si eliges emplear tu propio icono, este debe ser de 48x48 pixeles. También puedes aplicar un icono de 96x96 pixeles, para resoluciones mayores, y si haces esto, se especifica como la propiedad 96 en el objeto icons del manifest.json:

+ +
"icons": {
+  "48": "icons/border-48.png",
+  "96": "icons/border-96.png"
+}
+ +

Alternativamente, puedes aplicar un archivo SVG ahí, y este se escalará apropiadamente. (Aunque: si usas SVG y tu icono incluye texto, puedes usar la herramienta "convert to path" del editor SVG para aplanar el texto, de modo que se escalone con un tamaño/posición coherente).

+ + + +

borderify.js

+ +

Finalmente, crea un archivo de nombre "borderify.js" directamente en el directorio "borderify". Y déjale el siguiente contenido:

+ +
document.body.style.border = "5px solid red";
+ +

Este script se cargara en las páginas que coincidan con el patrón dado en el parámetro content_scripts del archivo manifest.json. El script tiene acceso directo al documento, de la misma manera que los scripts cargados por la propia página.

+ + + +

Probándolo

+ +

Primero, verifica que tienes todos los archivos en su lugar:

+ +
borderify/
+    icons/
+        border-48.png
+    borderify.js
+    manifest.json
+ +

Instalación

+ +

Abre "about:debugging" en Firefox, da click en "Cargar complemento temporal" y selecciona cualquier archivo en el directorio de la extensión:

+ +

{{EmbedYouTube("cer9EUKegG4")}}

+ +

La extensión se encontrará instalada, y lo estará hasta que reinicies Firefox.

+ +

Alternativamente, puede ejecuturar la extensión desde la línea de comandos utilizando la herramienta web-ext.

+ +

Probando

+ +

Ahora pruebe visitando una página bajo "mozilla.org", y usted verá el borde rojo alrededor de la página:

+ +

{{EmbedYouTube("rxBQl2Z9IBQ")}}

+ +
+

No lo intentes en addons.mozilla.org! Los scripts de contenido están actualmente bloqueados en ese dominio.

+
+ +

Experimenta un poco. Edita el contenido del script para cambiar el color del borde, o haz algo más en el contenido de la página. Si actualizas el script de contenido, recarga los archivos de la extensión haciendo clic en el botón "Recargar" en about:debugging. Podrás ver los cambios en el momento:

+ +

{{EmbedYouTube("NuajE60jfGY")}}

+ + + +

Empaquetar y publicar

+ +

Para que otras personas puedan utilizar tu extensión, necesitas empaquetarlo y enviarlo a Mozilla para que lo firmen. Para que aprendas más sobre eso, mira "Publicando tu extension".

+ +

¿Qué sigue?

+ +

Ahora que tienes una idea acerca del proceso de desarrollo de una WebExtension para Firefox, continúa con:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/tutorial/index.html b/files/es/mozilla/add-ons/webextensions/tutorial/index.html new file mode 100644 index 0000000000..559320eca0 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/tutorial/index.html @@ -0,0 +1,459 @@ +--- +title: Tu segunda extensión +slug: Mozilla/Add-ons/WebExtensions/Tutorial +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +
{{AddonSidebar}}
+ +

Si ya ha visto el artículo tu primer extensión, ya posee una idea de como escribir una extensión. En este artículo se escribirá una extensión ligeramente más compleja para demostrar un par de cosas más de las APIs.

+ +

La extensión añade un nuevo botón a la barra de herramientas de Firefox. Cuando el usuario da clic sobre el botón, mostraremos una ventana emergente que permite escoger un animal. Una vez que un animal sea escogido, reemplazaremos todas las imágenes en la página actual con la imagen del animal seleccionado.

+ +

Para implementar esto, haremos lo siguiente:

+ + + +

Tu puedes notar que la estructura general de la extensión luce como esto:

+ +

+ +

Esta es una extensión simple, pero muestra muchos de los principales conceptos de la API WebExtensions:

+ + + +

Tu puedes encontrar el código fuente completo de la extensión en GitHub.

+ +

Para escribir una extensión, necesitará de Firefox 45 o más reciente.

+ +

Escribiendo la extensión

+ +

Crea una carpeta nueva y navega hacia ella:

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

Ahora crea un archivo llamado "manifest.json", y agrega el siguiente contenido:

+ +
{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Agrega un icono de acción navegación a la barra de herramientas. Haga clic en el botón para elegir una bestia. El contenido del cuerpo de la pestaña activa se sustituye por una imagen de la bestia elegida. Consulte https://developer.mozilla.org/es/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Bestificar",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+
+ + + +

Nota que todas las rutas dadas son relativas a manifest.json.

+ +

El ícono

+ +

La extensión debería tener un íncono. Éste, será mostrado junto a la lista de complementos en el Administrador de Complementos (Pude abrirlo introduciendo en la URL "about:addons"). El manifest.json promete que se posee un ícono para la barra de herramientas en "icons/beasts-48.png".

+ +

Cree el directorio "icons" y guarde un ícono ahí y nómbrelo como "beasts-48.png".  Puede utilizar uno de nuestro ejemplo, el cual ha sido tomado del  conjuto de íconos Aha-Soft’s Free Retina, que es utilizado bajo el término de su propia licencia.

+ +

Si elige proporcionar su propio ícono, debería ser de 48x48 pixeles. También puede proporcionar un ícono de 96x96 pixeles, para pantallas de altas resoluciones y, si usted hace esto, deberá especificarlo como la propiedad 96 del objeto icons en el manifest.json:

+ +
"icons": {
+  "48": "icons/beasts-48.png",
+  "96": "icons/beasts-96.png"
+}
+ +

El botón de la barra de herramientas

+ +

El botón de la barra de herramientas necesita un ícono, y nuestro manifest.json promete eso y nos gustaría tener un ícono para la barra de herramientas en "icons/beasts-32.png".

+ +

Guarde un ícono llamado "beasts-32.png" en el directorio "icons". Tu podrías usar uno de nuestros ejemplos, los cuales son tomados desde el sitio IconBeast Lite icon set y empleados bajo sus términos de licencia.

+ +

Si tu no provees una ventana emergente, entonces el evento clic es disparado hacia tu extensión cuando el usuario de clic sobre el botón. Si provees una ventana emergente entonces el evento clic no se disparará, pero en cambio, se muestra la ventana emergente. Nosotros queremos una ventana emergente, así que vamos a crearla.

+ +

La ventana emergente

+ +

La función de la ventana emergente es habilitada si el usuario escoge una de los tres animales.

+ +

Crea una nueva carpeta llamada "popup" bajo la carpeta raíz de la extensión . Esta será donde pondremos el código para la ventana emergente. La carpeta "popup" contendrá estos tres archivos:

+ + + +

choose_beast.html

+ +

El archivo HTML luce así:

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+<body>
+  <div id="popup-content">
+    <div class="button beast">Frog</div>
+    <div class="button beast">Turtle</div>
+    <div class="button beast">Snake</div>
+    <div class="button reset">Reset</div>
+  </div>
+  <div id="error-content" class="hidden">
+    <p>Can't beastify this web page.</p><p>Try a different page.</p>
+  </div>
+  <script src="choose_beast.js"></script>
+</body>
+
+</html>
+ +

Tenemos un elemento <div> con un ID "popup-content" que contiene un elemento para cada elección de animal. Además, tenemos otro <div> con un ID "error-content" y una clase "hidden", que usaremos en el case de que surja algún problema al inicializar la ventana emergente.

+ +

Note que referenciamos los archivos CSS y JS en el HTML como lo haríamos si se tratase de una página web.

+ +

choose_beast.css

+ +

El CSS ajusta el tamaño de la ventana emergente, se asegura que las tres posibles opciones llenen el espacio y les da un poco de estilo básico. Además oculta los elementos con class="hidden": esto significa que nuestro "error-content" <div> estará oculto por defecto.

+ +
html, body {
+  width: 100px;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+  background-color: #E5F2F2;
+}
+
+.reset {
+  background-color: #FBFBC9;
+}
+
+.reset:hover {
+  background-color: #EAEA9D;
+}
+ +

choose_beast.js

+ +

Aquí está el JavaScript para la ventana emergente:

+ +
/**
+ * CSS para ocultar toda la página
+ * Excepto los elementos que pertenecen a la clase "beastify-image".
+ */
+const hidePage = `body > :not(.beastify-image) {
+                    display: none;
+                  }`;
+
+/**
+ * Esucha los clicks en los botones y envía el mensaje apropiado
+ * al script de contenido de la página.
+ */
+function listenForClicks() {
+  document.addEventListener("click", (e) => {
+
+    /**
+     * Recibe el nombre de una bestia y obtiene la URL de la imagen correspondiente.
+     */
+    function beastNameToURL(beastName) {
+      switch (beastName) {
+        case "Frog":
+          return browser.extension.getURL("beasts/frog.jpg");
+        case "Snake":
+          return browser.extension.getURL("beasts/snake.jpg");
+        case "Turtle":
+          return browser.extension.getURL("beasts/turtle.jpg");
+      }
+    }
+
+    /**
+     * Inserta dentro de la pestaña activa el CSS que oculta la página
+     * luego toma la URL de la imagen y
+     * envía un mensaje "beastify" al script de contenido de la pestaña activa.
+     */
+    function beastify(tabs) {
+      browser.tabs.insertCSS({code: hidePage}).then(() => {
+        let url = beastNameToURL(e.target.textContent);
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "beastify",
+          beastURL: url
+        });
+      });
+    }
+
+    /**
+     * Remueve el CSS que oculta la página y
+     * envía un mensaje de "reset" al script de contenido de la pestaña activa.
+     */
+    function reset(tabs) {
+      browser.tabs.removeCSS({code: hidePage}).then(() => {
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "reset",
+        });
+      });
+    }
+
+    /**
+     * Imprime el error en consola.
+     */
+    function reportError(error) {
+      console.error(`Could not beastify: ${error}`);
+    }
+
+    /**
+     * Toma la pestaña activa y
+     * llama a "beastify()" o "reset()" según corresponda.
+     */
+    if (e.target.classList.contains("beast")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(beastify)
+        .catch(reportError);
+    }
+    else if (e.target.classList.contains("reset")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(reset)
+        .catch(reportError);
+    }
+  });
+}
+
+/**
+ * Si hubo algún error al ejecutar el script,
+ * Despliega un popup con el mensaje de error y oculta la UI normal.
+ */
+function reportExecuteScriptError(error) {
+  document.querySelector("#popup-content").classList.add("hidden");
+  document.querySelector("#error-content").classList.remove("hidden");
+  console.error(`Failed to execute beastify content script: ${error.message}`);
+}
+
+/**
+ * Cuando se carga la ventana emergente, inyecta el script de contenido en la pestaña activa,
+ * y agrega un manejador de eventos.
+ * Si no es posible inyectar el script, se ocupa de manejar el error.
+ */
+browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+.then(listenForClicks)
+.catch(reportExecuteScriptError);
+ +

Empecemos por la linea 96. La ventana emergente ejecuta un script de contenido en la pestaña activa tan pronto como se termina de cargar, usando la API browser.tabs.executeScript(). Si la ejecución del script de contenido es exitosa, este quedará cargado en la página hasta que sea cerrada la pestaña o hasta que el usuario navegue hacia una página distinta.

+ +
+

Un motivo común por el cual el llamado a browser.tabs.executeScript() puede fallar, es porque no es posible ejecutar scripts de contenido en todas las páginas, por ejemplo, en páginas de navegador privilegiadas como about:debugging, o páginas del dominio addons.mozilla.org, no es posible hacerlo.

+
+ +

Si la ejecución falla, reportExecuteScriptError() ocultará el <div> "popup-content", mostrará el <div> "error-content", y reportará el error en la consola.

+ +

Si la ejecución del script de contenido es exitosa, se llamará a listenForClicks(), que atiende los eventos que se generan al cliquear en la ventana emergente.

+ + + +

La función beastify() hace tres cosas:

+ + + +

La función reset() deshace lo hecho por beastify():

+ + + +

El script de contenido

+ +

Crea una carpeta nueva bajo la raíz del complemento llamada "content_scripts" y crea un nuevo archivo en ella llamado "beastify.js", con el contenido siguiente:

+ +
(function() {
+  /**
+   * Revisa e inicializa una variable de guardia.
+   * Si este script de contenido es insertado más de una vez
+   * en la misma página, dejará de ejecutarse.
+   */
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+
+/**
+* Recibe la URL de la imagen, remueve las que se hayan agregado antes,
+* crea un nodo IMG que apunt hacia la imagen
+* e inserta ese nodo en el documento.
+*/
+  function insertBeast(beastURL) {
+    removeExistingBeasts();
+    let beastImage = document.createElement("img");
+    beastImage.setAttribute("src", beastURL);
+    beastImage.style.height = "100vh";
+    beastImage.className = "beastify-image";
+    document.body.appendChild(beastImage);
+  }
+
+  /**
+   * Remueve todas las bestias de la página.
+   */
+  function removeExistingBeasts() {
+    let existingBeasts = document.querySelectorAll(".beastify-image");
+    for (let beast of existingBeasts) {
+      beast.remove();
+    }
+  }
+
+  /**
+   * Atiende mensajes del script de segundo plano.
+   * Llama a "beastify()" o "reset()".
+  */
+  browser.runtime.onMessage.addListener((message) => {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+ +

Lo primero que hace el script de contenido es revisar la variable global window.hasRun: si está inicializada termina su ejecución, sino, la inicializa y continúa. La razón por la que hacemos esto es porque cada vez que el usuario abre la ventana emergente, se vuelve a ejecutar el script de contenido en la pestaña activa, por lo que podríamos tener múltiples instancias del script ejecutandose en una sola pestaña. Si esto sucede, necesitamos asegurarnos de que sea sólo la primera instancia la que vaya a realizar cambios.

+ +

Luego, en la linea 40, donde el script de contenido atiende mensajes provenientes de la ventana emergente (usando la API browser.runtime.onMessage), vemos que ésta puede enviar dos mensajes diferentes: "beastify" y "reset".

+ + + +

Las bestias

+ +

Finalmente, necesitamos incluir las imágenes de los animales.

+ +

Crea una carpeta nueva llamada "beasts", y adiciona tres imágenes en ella, con su nombre apropiado. Tu puedes obtener estas imágenes desde el repositorio en GitHub, o desde aquí:

+ +

+ +

Probándolo

+ +

Primero, comprueba nuevamente que tienes todos los archivos necesarios en el lugar adecuado:

+ +
beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json
+ +

Comenzando con Firefox 45, pueden instalar temporalmente una extensión desde el disco.

+ +

Abre "about:debugging" en Firefox, de clic en "Cargar complemento temporalmente", y seleccione el archivo manifest.json. Entonces, debería de ver el ícono de la extensión aparecer en la barra de herramientas de Firefox:

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

Abra una página web, luego haga clic sobre el ícono, seleccione una bestia, y vea cómo cambia la página web:

+ +

{{EmbedYouTube("YMQXyAQSiE8")}}

+ +

Desarrollo desde la línea de comandos

+ +
+
+
 
+ +

Puede automatizar el paso de instalación temporal mediante la herramienta web-ext. Pruebe esto:

+
+
+ +
cd beastify
+web-ext run
+ +

 

diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html new file mode 100644 index 0000000000..55ce89a9c7 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/accion_navegador/index.html @@ -0,0 +1,50 @@ +--- +title: Botón de la Barra de Herramientas +slug: Mozilla/Add-ons/WebExtensions/user_interface/Accion_navegador +tags: + - WebExtension +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_action +--- +
{{AddonSidebar}}
+ +

Generalmente referidas como acciones de navegador, esta opción de interfaz de usuario corresponde a un botón agregado a la barra de herramientas del navegador. Los usuarios pueden hacer click en el botón para interactuar con tu extensión.
+

+ +

El botón de la barra de herramientas (acción de navegador) es muy parecido al botón de la barra de direcciones (acción de página). Para conocer las diferencias y obtener consejo en cuándo usar qué tipo de botón, te recomendamos ver Acciones de página y acciones de navegador.

+ +

Especificando la acción de navegador

+ +

Puedes definir las propiedades de la acción de navegador utilizando la llave browser_action del archivo manifest.json:

+ +
"browser_action": {
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

El único campo obligatorio es default_icon.

+ +

Existen dos formas de especificar una acción de navegador: con o sin una ventana emergente. Si no especificas una ventana emergente, se le entregará un evento a la extensión cada vez que el usuario haga click en el botón. El evento es escuchable usando browserAction.onClicked:

+ +
browser.browserAction.onClicked.addListener(handleClick);
+ +

En cambio, si especificas una ventana emergente, el evento de click no es despachado al hacer click en el botón: en su lugar, la ventana emergente es mostrada. El usuario podrá interactuar con la ventana emergente, la cual se cerrará automáticamente cada vez que el usuario haga click fuera de ella. Te recomendamos revisar el artículo de ventanas emergentes para conocer más detalles sobre la creación y administración de éstas.

+ +

Cabe destacar que tu extensión puede tener solamente una acción de navegador.

+ +

Puedes cambiar cualquier propiedad de la acción de navegador de forma programática, utilizando la API browserAction.

+ +

Íconos

+ +

Para más detalles sobre cómo crear íconos para usarlos en tu acción de navegador, revisa Iconografía en la documentación del Sistema de Diseño Photon.

+ +

Ejemplos

+ +

El repositorio de GitHub webextensions-examples contiene dos ejemplos de extensiones que implementan acciones de navegador:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/index.html new file mode 100644 index 0000000000..5ddf11d958 --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/index.html @@ -0,0 +1,95 @@ +--- +title: User interface +slug: Mozilla/Add-ons/WebExtensions/user_interface +tags: + - Landing + - NeedsTranslation + - TopicStub + - User Interface + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface +--- +
{{AddonSidebar}}
+ +

Extensions that use WebExtension APIs are provided with several user interface options so that their functionality can be made available to the user. A summary of those options is provided below, with a more detailed introduction to each user interface option in this section.

+ +
+

For advice on using these UI components to create a great user experience in your extension, please see the User experience best practices article.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UI optionDescriptionExample
Toolbar button (browser action)A button on the browser toolbar that dispatches an event to the extension when clicked. By default, the button is visible in all tabs.Example showing a toolbar button (browser action).
Toolbar button with a popupA popup on a button in the browser toolbar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.Example of the pop-up on a toolbar button
Address bar button (page action)A button on the browser address bar that dispatches an event to the extension when clicked. By default, the button is hidden in all tabs.Example showing an address bar button (page action)
Address bar button with a popupA popup on a button in the browser address bar that opens when the button is clicked. The popup is defined in an HTML document that handles the user interaction.Example of a popup on the address bar button
Context menu itemMenu items, checkboxes, and radio buttons on one or more of the browser's context menus. Also, menus can be structured by adding separators. When menu items are clicked, an event is dispatched to the extension.Example of content menu items added by a WebExtension, from the context-menu-demo example
Sidebar +

An HTML document displayed next to a web page, with the option for unique content per page. The sidebar is opened when the extension is installed, then obeys the user's sidebar visibility selection. User interaction within the sidebar is handled by its HTML document.

+ 		Example of a sidebar
Options pageA page that enables you to define preferences for your extension that your users can change. The user can access this page from the browser's add-ons manager.Example showing the options page content added in the favorite colors example.
Extension pageUse web pages included in your extension to provide forms, help, or any other content required, within windows or tabs.Example of a simple bundled page displayed as a detached panel.
NotificationTransient notifications displayed to the user through the underlying operating system's notifications mechanism. Dispatches an event to the extension when the user clicks a notification, or when a notification closes (either automatically or at the user's request).Example of an extension triggered system notification
Address bar suggestionOffer custom address bar suggestions when the user enters a keyword.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
Developer tools panelA tab with an associated HTML document that displays in the browser's developer tools.Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions.
+ +

The following how-to guides provide step-by-step guidance to creating some of these user interface options:

+ + diff --git a/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html b/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html new file mode 100644 index 0000000000..0ec310af9f --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/user_interface/page_actions/index.html @@ -0,0 +1,96 @@ +--- +title: Address bar button +slug: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Page_actions +--- +
{{AddonSidebar}}
+ +

Comúnmente denominado botón de acción de página, esta opción de interfaz de usuario es un botón agregado a la barra de direcciones del navegador. Los usuarios pueden hacer clic en el botón para interactuar con sus extensiones.

+ +

+ +

Acciones de página y acciones de navegador

+ +

El botón de la barra de direcciones (o página de acción) es muy parecida al botón de la barra de herramientas (o acción del navegador).

+ +

Las diferencias son:

+ + + +

Usa una página de acción cuando cuando la acción este relacionada a la página en curso, y una acción de navegador cuando cuando la acción este relacionada a todas o a muchas páginas. Por ejemplo:

+ + + + + + + + + + + + + + + + + + + + + + + + +
TypeBookmarks actionContent actionTabs operation
page actionMarcar esta páginaReddit enhancementEnviar una pestaña
browser actionMostrar todos los marcadoresHabilitar ad-blockingSincronizar todas las pestañas
+ +

Specifying the page action

+ +

You define the page action's properties using the page_action key in manifest.json:

+ +
"page_action": {
+  "browser_style": true,
+  "default_icon": {
+    "19": "button/geo-19.png",
+    "38": "button/geo-38.png"
+  },
+  "default_title": "Whereami?"
+}
+ +

The only mandatory key is default_icon.

+ +

There are two ways to specify a page action: with or without a popup.

+ + + +

Note that your extension can have one-page action only.

+ +

You can change any of the page action properties programmatically using the pageAction API.

+ +

Icons

+ +

For details on how to create icons to use with your page action, see Iconography in the Photon Design System documentation.

+ +

Examples

+ +

The webextensions-examples repository on GitHub includes the chill-out example which implements a page action without a popup.

diff --git a/files/es/mozilla/add-ons/webextensions/what_next_/index.html b/files/es/mozilla/add-ons/webextensions/what_next_/index.html new file mode 100644 index 0000000000..7566eb1bff --- /dev/null +++ b/files/es/mozilla/add-ons/webextensions/what_next_/index.html @@ -0,0 +1,56 @@ +--- +title: What next? +slug: Mozilla/Add-ons/WebExtensions/What_next_ +translation_of: Mozilla/Add-ons/WebExtensions/What_next_ +--- +
{{AddonSidebar}}
+ +

Ahora estarás listo para comenzar a convertir tus idea para una extensión de navegador en realidad. Antes de comenzar ese viaje, vale la pena ser consciente de algunas cosas que ayudarán a que sea más sencillo.

+ +

Tu ambiente de desarrollo

+ +

No necesitas ninguna herramienta de desarrollo ni entorno de creación en especial a la hora de crear extensiones de navegador: es completamente posible crear grandes extensiones de navegador solo con un editor de texto. Sin embargo, puede ser que tu hayas estado desarrollando para la web y ya poseas un conjunto de herramientas y un entorno que desees reutilizar. Si este es el caso, necesitarás estar al tanto de un par de cosas.

+ +

Si utilizas herramientas de minificación u ofuscación para obtener tu código final, deberás proporcionar tu código fuente al proceso de revisión de AMO. Además, las herramientas que uses (aquellas para los procesos de minificación, ofuscación y creación) deberán ser de código abierto (u ofrecer un uso gratuito ilimitado) y estar disponibles para ejecutarse en la computadora del revisor (Windows, Mac o Linux). Desafortunadamente, nuestros revisores no pueden trabajar con herramientas comerciales o basadas en la web.

+ +

Aprenda más sobre las herramientas de construcción

+ +

Bibliotecas de Terceros

+ +

Las bibliotecas de terceros son una excelente manera de agregar características complejas o funcionalidades a su extensiones para navegador rápidamente. Cuando envía una extensión al proceso de revisión de AMO, el proceso también considerará las bibliotecas de terceros utilizadas. Para simplificar la revisión, asegúrese de descargar siempre bibliotecas de terceros desde su sitio web oficial o repositorio, y si la biblioteca está minimizada, proporcione un enlace al código fuente. Tenga en cuenta que las bibliotecas de terceros no se pueden modificar de ninguna manera.

+ +

Aprenda más sobre el envío de código fuente

+ +

Acuerdo de Distribución para Complementos de Firefox

+ +

Las extensiones del navegador deben estar firmadas para instalarse en la versión de lanzamiento o en las versiones beta de Firefox. La firma se realiza en addons.mozilla.org (AMO) y está sujeta a los términos y condiciones del Acuerdo de Distribución de Complementos de Firefox. El objetivo del acuerdo es garantizar que los usuarios de Firefox tengan acceso a complementos de calidad bien soportados que mejoren la experiencia de Firefox.

+ +

Lea el Acuerdo

+ +

Aprenda más sobre la firma

+ +

Proceso de revisión

+ +

Cuando se envíe una extensión del navegador para su firma, estará sujeta a revisión automática. También podría estar sujeto a una revisión manual, cuando la revisión automática determine que se necesita una revisión manual. La extensión de su navegador no se firmará hasta que haya pasado la revisión automática y puede revocarse su firma si no pasa la revisión manual. El proceso de revisión sigue un estricto conjunto de pautas, por lo que es fácil verificar y evitar cualquier posible problema de revisión.

+ +

Echa un vistazo a las políticas y directrices de revisión

+ +

Entensiones de navegador destacadas AMO

+ +

Si eliges enlistar tu extensión de navegador en AMO, tu extensión podría aparecer en el sitio web de AMO, en el administrador de complementos del navegador Firefox, o en cualquier otro lugar en un sitio web de Mozilla. Hemos compilado una lista de pautas sobre cómo se seleccionan las extensiones para presentarlas; al seguir estas pautas, le da a su extensión la mejor oportunidad de ser presentada.

+ +

Aprenda más sobre como destacar sus complementos

+ +

Continua tu experiencia de aprendizaje

+ +

Ahora que sabe lo que sigue, es hora de profundizar en más detalles sobre el desarrollo de extensiones de navegador. En las siguientes secciones, descubrirás:

+ + diff --git a/files/es/mozilla/bugzilla/index.html b/files/es/mozilla/bugzilla/index.html new file mode 100644 index 0000000000..37ae6d1b09 --- /dev/null +++ b/files/es/mozilla/bugzilla/index.html @@ -0,0 +1,59 @@ +--- +title: Bugzilla +slug: Mozilla/Bugzilla +tags: + - Bugzilla + - Calidad + - Developing Mozilla + - 'Developing_Mozilla:Tools' + - Herramientas + - Pruebas + - QA + - Tools +translation_of: Mozilla/Bugzilla +--- +

bugzilla.mozilla.org (abreviado comunmente como b.m.o) es un sistema de seguimiento de defectos de Mozilla.org, una base de datos para bugs registrados y solicitudes de mejoras para Firefox, Thunderbird, SeaMonkey, Camino, y otros proyectos de mozilla.org.

+ +
+
+

Documentación about B.m.o.

+ +
+
Qué hacer y qué NO hacer en Bugzilla
+
Tips for how to use Bugzilla, as well as things you should avoid.
+
La etiqueta en Bugzilla
+
A guide to etiquette; this guide will help you understand how best to conduct yourself on b.m.o. and how using proper manners and civility will help ensure your problem gets solved sooner rather than later.
+
Cómo saber si un bug ha sido reportado
+
It's useful (but not mandatory) for you to check if the problem you're reporting has been already tracked. This guide will help you do so.
+
Aseguramiento de calidad
+
Documentation about quality assurance at Mozilla.
+
Guías para redacción de bugs
+
A guide to writing a good, understandable, bug that will be easily followed by the development team.
+
How to submit a patch
+
If you've fixed a bug, or have implemented a new feature, you'll need to get your patch into the tree so it can become part of the product. This guide will teach you how!
+
+ +

View All...

+
+ +
+

Otros materiales

+ + + +

Herramientas

+ +
    +
  • Bugzilla Todos lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.
    • +
  • Bz Kanban is a board to visualize the status of bugs within a milestone.
    • +
+
+
diff --git a/files/es/mozilla/bugzilla/testopia/index.html b/files/es/mozilla/bugzilla/testopia/index.html new file mode 100644 index 0000000000..cfb6d65a22 --- /dev/null +++ b/files/es/mozilla/bugzilla/testopia/index.html @@ -0,0 +1,162 @@ +--- +title: Testopia +slug: Mozilla/Bugzilla/Testopia +translation_of: Mozilla/Bugzilla/Testopia +--- +

Testopia es un administrador de casos de prueba, el cual maneja extensiones para interactuar con Bugzilla. Testopia está diseñado para ser una herramienta genérica para el seguimiento de casos de prueba, permitiendo a las organizaciones realizar las pruebas de software e integrar reportes de defectos encontrados, así como el resultado de los caso de prueba. Testopia está diseñado desde el punto de vista de la actividad de pruebas, este puede ser usado para llevar el seguimiento de pruebas, así como el seguimiento virtual de cualquier proceso de ingenieria.

+ +

Testopia 2.5

+ +

Estas versiones soportan Bugzilla 4.2 y la mejor noticia es que no requerirá mas un patch para Bugzilla. Si estas actualizando, por favor revierte el parche de la versión existente antes de instalar. Una instalación nueva solo requiere que descomprimas el tarball en tu directorio raiz de Bugzilla y corras un checksetup. Gracias a LpSolit del equipo Bugzilla por su esfuerzo en hacer esto posible.

+ +

Testopia 2.4 - Important notice!

+ +

If you are upgrading on a case sensitive filesystem you must remove the existing testopia folder in the extensions directory. If you have made modifications to the testopia source code, you will need to merge them into the new Testopia folder (capital T). If you are on Windows or another case insensitive file system you should first rename the folder (testopia-old for example) and then unzip the tarball. You can then merge your changes before deleting the old version.

+ +

API USERS TAKE NOTE: Positional parameters are now deprecated. All params should now be sent in a hash (struct, dict, hashmap or whatever your language of choice calls key, value pairs). Though all attempts have been made to provide continuing support for positional parameters, please be aware that some API calls may fail until you make this change. Also, future versions may remove this support completely.

+ +

As always please backup your installation before attempting to install or upgrade.

+ +

Integration Points

+ + + +

Features for version 2.4 (Bugzilla 3.6.x)

+ + + +

Features for version 2.3 (Bugzilla 3.4.x)

+ + + +

Features for version 2.2 (Bugzilla 3.2 and 3.0.x)

+ +

This release is primarily a bug fix release and to make Testopia compatable with Bugzilla 3.2 and Bugzilla 3.0.6. Please be sure to download the correct package based on your Bugzilla version.

+ +

To install, do the following (see the README for more detailed instructions):

+ +
    +
  1. Untar the Testopia 2.4 tarball inside your Bugzilla directory.
    2. +
  2. Patch the Bugzilla files.
    + On Linux systems it should look something like: +

    patch -p0 -i extensions/testopia/patch-3.6

    +
    3. +
  3. Run checksetup.pl
    4. +
+ +

To upgrade an existing Testopia installation you follow the same steps only you need to first REVERSE the old patch BEFORE untarring the files. If upgrading Bugzilla at the same time, this should be done before that as well..

+ +

patch -p0 -R -i extensions/testopia/patch-<version>

+ +

Where <version> represents the version of the patch you have applied (Bugzilla version).

+ +

Requirements

+ +

As our development has moved forward, we have decided to try to keep abreast of the latest stable release from Bugzilla (currently 3.4). This gives us a stable code base to work from. Developing plugins or extensions for any software is like trying to hit a moving target. This decision allows us to focus our time more on releasing new features often and early rather than back porting. However, this means that most major feature will not be back ported to earlier versions unless and until we have time to do so. Anyone wishing to help in this effort is more than welcome.

+ + + +

TODO

+ + + +

See the Roadmap and Bug List for more details.

+ + + + + +

Downloads

+ + + +

Developers

+ +

Greg Hendricks
+ Vance Baarda (former developer)
+ Ed Fuentetaja (former developer)

diff --git a/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html b/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html new file mode 100644 index 0000000000..00716daf42 --- /dev/null +++ b/files/es/mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error/index.html @@ -0,0 +1,97 @@ +--- +title: Cómo obtener un seguimiento de pila para un informe de bug +slug: Mozilla/como_obtener_un_seguimiento_de_pila_para_un_informe_de_error +translation_of: Mozilla/How_to_get_a_stacktrace_for_a_bug_report +--- +

Si presenta un informe de bug en Bugzilla sobre un bloqueo, debe incluir un seguimiento de pila (pila de llamadas) en su informe. Un seguimiento de pila le dirá a los desarrolladores de Mozilla qué falló y proporcionará un punto de partida para investigar su causa. Este artículo describe cómo usar Mozilla Crash Reporter (Breakpad) para obtener una ID de bloqueo, que nuestros ingenieros pueden usar para obtener un stacktrace, y formas alternativas de obtener un stacktrace si no puede obtener una ID de crash.

+ +

Requirements

+ +

You need a binary build of Firefox from Mozilla.org. SeaMonkey and Thunderbird also support crash reporting.

+ +

Mozilla's crash report server currently only has debug information for Mozilla builds and thus the crash reporter cannot work if you use a build from a Linux distribution or if you compile from source code. In these cases you will need to use one of the alternative methods listed below.

+ +
Note: When filing a crash report, it is important to know whether the crash occurs with Firefox safe mode. This helps engineers determine whether a particular extension or plugin is the cause of the crash.
+ +

How to get a crash ID with the Mozilla Crash Reporter

+ + + + + + + + +
+

1. Crash and submit a report to the system.

+ +

The Mozilla Crash Reporter window should automatically come up after Firefox crashes. If you have any additional information about the crash, such as additional detail on what you were doing at the time that may have triggered the crash, please enter it into the comments box. Be sure that you check the "Tell Mozilla about this crash" checkbox and click the restart button. The crash reporter should now submit the crash report and Firefox should open again.

+ +
The "Details" button gives additional data about the incident, however this is not useful in a bug report.
+ 		+

reporter.jpg

+
+ + + + + + + + +
+

2. Tell us the ID of the report you submitted.

+ +

To access all of your submitted reports type "about:crashes" into the Firefox address bar and press enter. Firefox should open a list of IDs for your submitted crash reports. Copy two or three of the IDs for the appropriate crashes and paste them into your Bugzilla report. Please check the listed times to avoid copying the ID of an unrelated crash report.

+ +
You can prefix a "bp-" to the beginning of an ID to make Bugzilla turn it into a link: bp-a70759c6-1295-4160-aa30-bc4772090918
+ 		+

crashlist.jpg

+
+ +

How to get the crash ID if Firefox crashes on startup

+ +

If Firefox crashes on startup you can still access your submitted crash reports. Crash reports are accessible from all Firefox profiles, so if a new profile does not crash you can use it to access them through "about:crashes" as above.

+ +

Accessing crash report IDs outside of Firefox

+ +

If you cannot load Firefox at all you can find the crash report files at this location depending on your operating system:

+ +

Windows : %APPDATA%\Mozilla\Firefox\Crash Reports\submitted\
+ OS X : ~/Library/Application Support/Firefox/Crash Reports/submitted/
+ Linux : ~/.mozilla/firefox/Crash Reports/submitted/

+ +

Each file in this folder contains one submitted crash report ID. You can check the modified or creation time for each file to discern which crash reports are relevant to your bug report.

+ +

Alternative ways to get a stacktrace

+ +

If the Mozilla crash reporter doesn't come up or isn't available you will need to obtain a stacktrace manually:

+ +

Windows

+ +

See the article Create a stacktrace with Windbg for information on how to do this.

+ +

For a full process dump, see How to get a process dump with Windows Task Manager [en-US]

+ +

OS X

+ +

Run /Applications/Utilities/Console.app.  Expand "~/Library/Logs" and "CrashReporter", then look for logs for "firefox-bin".

+ +

Linux

+ +

Note that for most distros, the package you need to get symbols for will be something like "xulrunner", not "firefox".

+ +

Crash reports files on your computer

+ +

When Breakpad initially catches a crash it first writes crash report files (e.g. .dump and .extra files) into the 'pending' subdirectory of its 'Crash Reports' directory.

+ +

If Breakpad successfully sends the crash report to the reporting server then, by default, the files added to the 'pending' subdirectory for the crash are removed, and a .txt file is placed in the 'submitted' directory containing the crash ID created by the reporting server.

+ +

If you want Breakpad to leave the .dump and .extra files on your computer so that you can examine them locally, then set the MOZ_CRASHREPORTER_NO_DELETE_DUMP environment variable to 1.

+ + diff --git a/files/es/mozilla/connect/index.html b/files/es/mozilla/connect/index.html new file mode 100644 index 0000000000..b7151db9a6 --- /dev/null +++ b/files/es/mozilla/connect/index.html @@ -0,0 +1,143 @@ +--- +title: Conectate con Mozilla +slug: Mozilla/Connect +tags: + - Español + - Mozilla +translation_of: Mozilla/Connect +--- +
+

Se parte de la aventura Mozilla Developer Network, Inspirate en colaborar y formar parte del equipo de contribuidores.

+ +

¡Tú también puedes!.

+
+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +
+
+
+
+

Mi Block

+ +

Un recurso clave para desarrolladores de la web libre, el blog de Mozilla Hack ofrece noticias y análisis de lo más reciente en tecnologías web y funciones del navegador.

+ +
Leer  ahora
+
+
+ +
+
+

Canales de Retro-Alimentacion

+ +

¿Tienes una idea para el desarrollo de herramientas? ¡Haznoslo saber y ayuda a darle forma a las futuras características!

+ +

¿Desarrollas algo y nececitas ayuda? preguntanos a distancia.
+ {{anch("Developer discussions", "Busca abajo en Q&A")}}

+ +
Mozilla Q&A en Stack Overflow
+
+
+ +
+
+

Unete a MDN

+ +

¡Registrate en MDN! Podrás editar la documentación, crear un perfíl para mostrar tu trabajo y obtener acceso a las diferentes caracteristicas segun los roles que desempeñes con el tiempo.

+ +
Unete o inicia sesión
+
+
+
+ +
+

Conectarte con Mozilla

+ +

Los desarrolladores están creando el futuro mediante la creación de aplicaciones para todas las personas alrededor del mundo. El objetivo de Mozilla Developer Relations es ayudar a los desarrolladores a utilizar tecnologías web estandarizadas para tener éxito en el logro de sus objetivos. Además de la documentación disponible en MDN, ofrecemos ayuda y otros recursos para este objetivo, a través de diversos canales. Te invitamos a conectarte, aprender y compartir tu conocimiento.

+ +

Ofrecemos ayuda através de Q&A en Stack Overflow, para solucionar cuestiones técnicas específicas y desafios que pueda tener. Tambien tenemos un boletín para mantenerte informado sobre los últimos acontecimientos en la escena web, entorno a aplicaciones web y mucho más. Suscríbete al boletín de noticias de apps y hacks

+ +

Si compartes la misión y principios de Mozilla y quieres ayudar a progresar a otros desarrolladores, da un vistazo a las maneras en que puedes involucrarte en la evangelización técnica y únete a nuestro grupo de discusión de evangelización.

+ +

Tenemos muchos planes e ideas para expandir de forma iterativa nuestra oferta de relaciones de desarrolladores y ¡queremos que estés involucrado en como lo hacemos! así que , ¡sigue las etiquetas de  Stack Overflow, suscribete al Blog Hack, suscribete al boletin y registrate para obtener una cuenta!

+ +

Únete a Mozilla

+ +

Si quieres ir más allá de la conexión con Mozilla, puedes unirte a Mozilla y ayudar a hacer realidad su misión de construir una mejor internet. Como desarrollador, tienes habilidades para contribuir en muchas áreas, así como la posibiliad de mejorar tus habilidades. Mozilla es un proyecto de código abierto, como es "abierto por defecto" puede "ver el código fuente" y contribuir en el desarrollo de proyectos de software, como el navegador Firefox para escritorio y Android, Firefox OS, y sitios web de Mozilla. Puedes convertirte en parte de la comunidad internacional y obtener reconocimiento por tus esfuerzos. Estas son algunas de las ventajas de contribuir al proyecto Mozilla.

+ +

Oportunidad de aprender algo nuevo.

+ +
+

Al escribir código para un proyecto de código abierto, podrás enfrentarte a problemas que antes no has encontrado, que presentan oportunidades de aprendizaje para ti. Puedes probar nuevas herramientas y técnicas en un proyecto de código abierto. Si por ejemplo, nunca has hecho pruebas unitarias, y tras codificar no logras obtener el permiso para hacerlo en el trabajo, un proyecto de código abierto sería un excelente lugar para aprender. Contribuir al código abierto le da la oportunidad de conocer y colaborar con muchas personas alrededor del mundo que tiene intereses similiares. Por otra parte, una organización de código abierto como Mozilla tiene muchos colaboradores que le podrán ayudar a solucionar los problemas que encuentre. Si solo acabas de empezar a contribuir, puedes buscar "mentoria de errores", donde un colaborador con mayor experiencia se ha ofrecido a ayudar a los recién llegados a solucionarlos.

+ +

¿Qué puedo obtener contribuyendo?

+ +

Explora muchas cosas y obten reconocimiento de la comunidad-- Estos son los beneficios intangibles de contribuir a Mozilla. Si bien no podemos garantizar beneficios tangibles específicos, muchos valiosos colaboradores reciben gratis articulos Mozilla e invitaciones a eventos relacionados, y estan de primeros en las lista para pasantias. por otra parte, tu experiencia en la contribución a un proyecto de código abierto podria ayudarte a obtener un trabajo. Cada vez son mas los empleadores que están buscando contribuyentes de codigo abierto. A ellos les gusta ver que usted está en blogs y contribuyendo en listas de correo, y les gusta ver que usted ayudó en el desarrollo de un proyecto de código abierto. También te puede ayudar en la sección de experiencia laboral para tu CV.

+ +

¿Cómo puedes contribuir a Mozilla?

+ +

Hay muchas áreas del proyecto donde puedes contribuir a Mozilla. Puedes encontrar un camino, el listado completo está en la página de involúcrate. Algunas de las áreas que te pueden interesar como desarrollador incluyen:

+ + +
+
+ +
+
+

Q&A en Stack Overflow Veer todo Q&A

+ +

Tenemos Q&A para discutir los asuntos del desarrollo, en particular en Firefox OS y la  Web libre en movil. Está disponible en Stack Overflow de forma fácil en la URL de abajo.

+ +

http://stackoverflow.com/r/mozilla.

+ +
Stack form
+ +

Últimos temas de Q&A

+
+ +
 
+
+ +

Developers at a Firefox OS workshop in Madrid.

+ +
+
+

¿Dónde está Mozilla? Mira los asistentes  y detalles en nuestra pagina de eventos...

+ +

Aqui hay un listado de los eventos donde los representantes de Mozilla hablarán. ¡Asegurate de hablar con ellos!

+
+ +
+

Otros recursos

+ + +
+
+
+ +

 

diff --git a/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html b/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html new file mode 100644 index 0000000000..1dbd2ca898 --- /dev/null +++ b/files/es/mozilla/creando_un_complemento_de_diccionario_de_ortografia/index.html @@ -0,0 +1,92 @@ +--- +title: Creando un complemento de diccionario de ortografía +slug: Mozilla/creando_un_complemento_de_diccionario_de_ortografia +translation_of: Mozilla/Creating_a_spell_check_dictionary_add-on +--- +

Esta página describe cómo empaquetar un diccionario de ortografía Hunspell como complemento para Firefox, o cómo actualizar tu complemento existente para que pueda ser instalado, desinstalado y actualizado sin necesidad de reiniciar.

+ +

Partes necesarias

+ +

Para crear un complemento de diccionario, primero necesitas dos cosas:

+ + + +

Si estás creando un nuevo diccionario, a diferencia de actualizar uno existente, por favor asegúrate de que no haya un diccionario disponible para tu localización. Si es que ya hay uno, intenta contactar al autor para actualizarlo, o contacta a los editores de AMO si es que el autor no responde.

+ +

Empaquetamiento

+ +

Un complemento de Firefox es un archivo ZIP renombrado para usar una extensión de archivo .xpi en lugar de la extensión de archivo .zip normal. Para crear un complemento de diccionario, simplemente crea un archivo ZIP que contenga los siguientes archivos y carpetas:

+ +

my-dictionary.xpi

+ + + +

Los archivos .dic y .aff deben estar ubicados en una subcarpeta llamada dictionaries dentro del archivo ZIP. Ambos archivos deben tener el código de localización como nombre de archivo. También tienes que añadir un archivo llamado install.rdf a la raíz del archivo ZIP. Este archivo contiene información sobre tu complemento, como por ejemplo el nombre y el número de versión (ver a continuación). Además de estos archivos requeridos, puedes añadir archivos opcionales, por ejemplo darle un ícono a tu complemento o describir la licencia del diccionario.

+ +

Aquí hay un ejemplo del archivo install.rdf. Puedes crearlo y editarlo con un editor de texto plano como "Bloc de notas".

+ +

<?xml version="1.0"?>
+ <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+      xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+   <Description about="urn:mozilla:install-manifest">
+     <em:id>Código-de-localización@dictionaries.addons.mozilla.org</em:id>
+     <em:version>número de versión</em:version>
+     <em:type>64</em:type>
+     <em:unpack>true</em:unpack>
+     <em:name>Nombre</em:name>
+     <!--
+       Otros metadatos de install.rdf tales como em:localized, em:description, em:creator,
+       em:developer, em:translator, em:contributor o em:homepageURL
+     -->
+
+     <!-- Firefox -->
+     <em:targetApplication>
+       <Description>
+         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+         <em:minVersion>18.0a1</em:minVersion>
+         <em:maxVersion>46.0</em:maxVersion>
+       </Description>
+     </em:targetApplication>
+
+     <!-- Thunderbird -->
+     <em:targetApplication>
+       <Description>
+         <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>
+         <em:minVersion>18.0a1</em:minVersion>
+         <em:maxVersion>22.0</em:maxVersion>
+       </Description>
+     </em:targetApplication>
+
+     <!-- SeaMonkey -->
+     <em:targetApplication>
+       <Description>
+         <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id>
+         <em:minVersion>2.15a1</em:minVersion>
+         <em:maxVersion>2.49</em:maxVersion>
+       </Description>
+     </em:targetApplication>
+   </Description>
+ </RDF>

+ +

Aquí hay algunas reglas sobre cómo debieras adaptar el archivo install.rdf:

+ + + +

Una vez que has añadido estos archivos a tu archivo ZIP, y este último lo has renombrado para que tenga la extensión .xpi, puedes instalar tu complemento en Firefox y problarlo. Luego de una prueba exitosa, puedes subir tu complemento a addons.mozilla.org y solicitar que sea incluido en la página de Diccionarios y paquetes de idioma.

diff --git a/files/es/mozilla/developer_guide/index.html b/files/es/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..699953a863 --- /dev/null +++ b/files/es/mozilla/developer_guide/index.html @@ -0,0 +1,149 @@ +--- +title: Developer Guide +slug: Mozilla/Developer_guide +translation_of: Mozilla/Developer_guide +--- +

Whether you're an old hand or just getting started, articles you can find starting from this page will help you while you're working on Mozilla development.

+

First time?

+
+
+ Getting Started
+
+ A step-by-step beginner's guide to getting involved with Mozilla.
+
+ + + + + + + +
+

Documentation topics

+

Obsolete Build Caveats and Tips

+
+
+ Working with Mozilla Source Code
+
+ A code overview, how to get the code, and the coding style guide.
+
+ Build Instructions
+
+ How to build Firefox, Thunderbird, SeaMonkey, or other Mozilla applications.
+
+ Development process overview
+
+ An overview of the entire Mozilla development process.
+
+ Managing multiple profiles
+
+ When working with prerelease versions of Firefox, it's often helpful to have multiple Firefox profiles, such as one for each channel, or for different kinds of testing.
+
+ Automated Testing
+
+ How to run Mozilla's automated tests, and how to write new tests.
+
+ How to submit a patch
+
+ After getting your patch written, you need to get it checked into the tree. This article explains the review process and how to get your patch approved.
+
+ Getting documentation updated
+
+ How to ensure that documentation is kept up to date as you develop.
+
+ Mozilla modules and module ownership
+
+ This article provides information about Mozilla's modules, what the role of a module owner is, and how module owners are selected.
+
+ Code snippets
+
+ Useful code samples for a wide variety of things you might need to figure out how to do.
+
+ Mozilla development strategies
+
+ Tips for how to make the most of your time working on the Mozilla project.
+
+ Debugging
+
+ Find helpful tips and guides for debugging Mozilla code.
+
+ Performance
+
+ Performance guides and utilities to help you make your code perform well (and to play nicely with others).
+
+ The Mozilla platform
+
+ Information about the workings of the Mozilla platform.
+
+ Adding APIs to the navigator object {{ gecko_minversion_inline("9.0") }}
+
+ How to augment the {{ domxref("window.navigator") }} object with additional APIs.
+
+ Interface Compatibility
+
+ Guidelines for modifying scriptable and binary APIs in Mozilla.
+
+ Customizing Firefox
+
+ Information about creating customized versions of Firefox.
+
+ Virtual ARM Linux environment
+
+ How to set up an ARM emulator running Linux for testing ARM-specific, but not necessarily platform-specific, code. Useful for mobile developers.
+
+ Obsolete Build Caveats and Tips
+
+ A place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.
+
+ 		+

Tools

+
+
+ Bugzilla
+
+ The Bugzilla database used to track issues for Mozilla projects.
+
+ MXR
+
+ Browse and search the Mozilla source code repository on the Web.
+
+ Bonsai
+
+ The Bonsai tool lets you find out who changed what file in the repository, and when they did it.
+
+ Mercurial
+
+ The distributed version-control system used to manage Mozilla's source code.
+
+ Tinderbox
+
+ Tinderbox shows the status of the tree (whether or not it currently builds successfully).  Check this before checking in and out, to be sure you're working with a working tree.
+
+ Crash tracking
+
+ Information about the Socorro and Talkback crash reporting systems.
+
+ Performance tracking
+
+ See performance information for Mozilla projects.
+
+ Callgraph
+
+ A tool to help perform static analysis of the Mozilla code by generating callgraphs automatically.
+
+ Developer forums
+
+ A topic-specific list of discussion forums where you can talk about Mozilla development issues.
+
+ Mozilla Platform Development Cheat Sheet
+
+ Brian Bondy's list of frequently referenced information for platform developers.
+
+
+
+
+
+  
+
+
+

 

diff --git a/files/es/mozilla/developer_guide/mozilla-central/index.html b/files/es/mozilla/developer_guide/mozilla-central/index.html new file mode 100644 index 0000000000..528266153d --- /dev/null +++ b/files/es/mozilla/developer_guide/mozilla-central/index.html @@ -0,0 +1,50 @@ +--- +title: mozilla-central +slug: Mozilla/Developer_guide/mozilla-central +tags: + - Desarrollando_Mozilla + - Mercurial + - Todas_las_Categorías +translation_of: Mozilla/Developer_guide/mozilla-central +--- +

mozilla-central es un repositorio Mercurial del código de Mozilla: http://hg.mozilla.org/mozilla-central . Es un punto de integración estable para cambios que se incorporarán en el código base de Mozilla 2.

+ +

La página de Tinderbox de mozilla-central se encuentra en http://tinderbox.mozilla.org/showbui...?tree=Mozilla2 .

+ +

{{ Note("a diferencia del repositorio CVS de Mozilla, sólo se incluyen en mozilla-central los fuentes de Firefox y XULRunner. Se usarán repositorios separados para el código específico a otras aplicaciones y proyectos.") }}

+ +

Reglas en el árbol mozilla-central

+ +

El código base de mozilla-central debería ser estable en todo momento para las plataformas de prioridad 1:

+ + + +

Actualmente no están permitidos cambios a las APIs congeladas de XPCOM. Esta regla cambiará una vez se tome una decisión sobre una versión intermedia de la plataforma (Mozilla 1.9.1).

+ + + +

Aplicar cambios a mozilla-central

+ +

Todos los desarrolladores que tienen acceso para aplicar parches en CVS deberían haber recibido un mensaje de correo electrónico con los detalles de inicio de sesión LDAP para aplicar parches en hg.mozilla.org. Si crees que deberías tener acceso a mozilla-central pero no conoces tus datos de inicio de sesión, cursa un bug. Puedes usar la orden hg push para subir los conjuntos de cambios al servidor.

+ + + +

Véase también

+ + + +

{{ languages( { "en": "en/Mozilla-central", "ja": "ja/Mozilla-central" } ) }}

diff --git "a/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilaci\303\263n_de_mozilla/index.html" "b/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilaci\303\263n_de_mozilla/index.html" new file mode 100644 index 0000000000..6e0c380577 --- /dev/null +++ "b/files/es/mozilla/developer_guide/preguntas_frecuentes_sobre_la_compilaci\303\263n_de_mozilla/index.html" @@ -0,0 +1,343 @@ +--- +title: Preguntas frecuentes sobre la compilación de Mozilla +slug: Mozilla/Developer_guide/Preguntas_frecuentes_sobre_la_compilación_de_Mozilla +tags: + - Documentación_de_compilado + - NecesitaRevisiónGramatical +translation_of: Mozilla/Developer_guide/Mozilla_build_FAQ +--- +

Mira también:

+ + + +

Preguntas Generales

+ +
+
Que plataformas soportan Mozilla?
+
Hay varios niveles o grados de "soporte" para Mozilla: +

Grado-1 son las plataformas en las cuales se centra el desarrollo. Los problemas en estas plataformas son considerados primordiales. También son las plataformas que se muestran en SeaMonkey tinderbox page.

+ +

Las Grado-1 son:

+ +
    +
  • linux/x86 (gcc)
    • +
  • win32/x86 (msvc)
    • +
  • OS X (gcc)
    • +
+ +

Grado-2 son las plataformas en las que hay algunos desarrolladores y contribuyentes activos, pero que la mayor parte del desarrollo no se centra en los problemas. Nos referimos a estas plataformas como los Puertos y la mayoría se encuentran en SeaMonkey-Ports tinderbox page.

+ +

Estas son:

+ +
    +
  • aix 4.3 (aCC)
    • +
  • beos 5.0.3 (gcc)
    • +
  • bsdi 4.x (gcc)
    • +
  • hpux 10.x,11.x (HP cc)
    • +
  • irix 6.x/gcc (gcc/MIPSpro)
    • +
  • linux/ppc (gcc)
    • +
  • os/2 (gcc)
    • +
  • osf1 5.x (Compaq cc)
    • +
  • solaris (sparc & x86) 2.6+ (gcc/Forte)
    • +
+ +

Grado-3 son aquellas en las que casi no hay desarrollo activo por la mayor parte de los desarrolladores pero que hay algunas soluciones contribuidas por terceros.

+ +

Las Grado-3 son:

+ +
    +
  • freebsd (gcc)
    • +
  • linux/alpha (gcc)
    • +
  • netbsd (gcc)
    • +
  • openvms (?)
    • +
  • ps2linux (gcc)
    • +
  • qnx 6 (gcc)
    • +
  • win32/x86 (gcc)
    • +
+ +

Las demás plataformas "no son soportadas" por Mozilla. En realidad "no soportada" quiere decir que no hay gente trabajando activamente en eso y que no son una prioridad.

+ +

La mayoría de los desarrolladores no tienen acceso a las plataformas que no sean Grado-1; así que cualquier bug reportado en una plataforma que no sea Grado-1,debería poseer bastante información para ayudar al responsable del bug a determinar la causa y brindar una solución apropiada. Si puedes proporcionar un parche y/o verificar que el parche del desarrollador funciona en tu plataforma, puedes ayudar a muchos a verificar y arreglar sus bugs.

+ +

 

+
+
Qué tipo de sistema de compilación usa Mozilla?
+
Mozilla usa para todas las plataformas una delgada capa de configuración GNU sobre el legado de sistema de makefile recursivo de Netscape. Como la mayoría de los proyectos configure-based, utiliza GNU autoconf para generar el script de configuración. GNU make se utiliza para manejar el proceso de compilado. +

 

+
+
Por qué usa GNU?
+
GNU make ha sido exportado a muchos sistemas. Esto hace que exportar Mozilla a esos sistemas sea un poco más fácil. Utilizando las características de make, que son soportadas por el programa nativo make en 10 plataformas diferentes, se logra que el sistema de compilado no sea innecesariamente complicado. +

 

+
+
Funciona otra versión de make?
+
No. El makefiles Mozilla utilza características propias de GNU make que, obviamente, sólo funcionan con GNU make. +

 

+
+
Por qué no usa automake?
+
Parte del legado de Netscape involucra utilizar el make de GNU. Tiene características para incluir un conjunto de reglas comunes desde un puñado de archivos en cada Makefile que necesite usarlas. También, hoy en día el método de generación de librerías de Mozilla no funciona bien con libtool. +

 

+
+
Qué les sucedió a nmake y al sistema de compilado CodeWarrior?
+
Ya no existen. El soporte para nmake se dejó durante la distribución de Mozilla 1.2a. El sistema mac cfm se abandonó con el soporte para OS9 poco después de la liberación de Mozilla 1.3 +

 

+
+
Por qué no ant, tmake, scons o inserte su sistema favorito aquí?
+
Principalmente porque nadie los utiliza en Mozilla. Cuando Mozilla empezó a ser de código abierto, sólo contenia el legado de Netscape. Autoconf se integró en una rama y se mantuvo en paralelo durante 6 meses antes de convertirse en el sistema standard para unix. +

 

+
+
Si deseo utilizar mi sistema favorito,¿ lo empezarìan a usar en Mozilla?. No quiero perder mi tiempo si no lo van a usar.
+
No hay garantías de que cualquier código escrito para Mozilla sea aceptado en árbol por defecto. Todo sistema que se desee utilizar debe demostrar ser mejor que el sistema actual. Velocidad, flexibilidad, portabilidad y la capacidad de que un gran grupo de desarrolladores- que tiene 3 años o más de experiencia- pueda cambiarlo facilmente, son los principales factores que deciden el cambio. Si hablas en serio y vas a realizar mucho trabajo, contacta a User:Benjamin Smedberg para discutir los detalles. +

 

+
+
Por qué Mozilla no soporta autoconf 2.5x?
+
Simplemente porque autoconf 2.5x no ofrece nada para que los esfuerzos por actualizar valgan la pena. Autoconf 2.5x no es compatible con 2.13 y las restricciones adicionales hechas en las nuevas versiones de autoconf requirirían reescribir gran parte del código- sistema de compilado de Mozilla. +

Algunas características de 2.13, como la posibilidad de pasar argumentos adicionales para sub-configuración, no están disponibles en 2.5x. Varios han preguntado por estas características en las listas de correos de autoconf y no han obtenido respuestas favorables. No es conveniente reescribir las configuraciones para subprojectos de Mozilla (NSPR & LDPA).

+ +

 

+
+
Por qué NSS no usa aurtoconf?
+
El projecto NSS también es utilizado fuera de Mozilla, y los miembros del mismo creen que cambiar a autoconf no vale la pena. Mira {{ Bug(52990) }} para más detalles. +

 

+
+
Puedo compilar múltiples proyectos basados en Mozilla desde un único árbol-fuente?
+
Sí!, cada projecto debe ser compilado en su propio objdir. +

 

+
+
Qué es un objdir?
+
Un objdir se refiere a crear los archivos de salida en un directorio distinto al que se encuentran las fuentes. Es un estándar en la mayoría de los proyectos basados en configuración. Te permite, desde un único árbol-fuente, compilar para múltiples configuraciones, incluyendo varias plataformas si trabajas en un sistema de archivos de red. También elimina la corrupción de tu árbol-fuente, de esta manera sabes que los archivos en el árbol no han sido modificados en el proceso de compilado. +

Si ejecutas configure manualmente, puedes usar el método estàndar de crear un directorio vacío en cualquier parte de la unidad, y luego entrar a ese directorio y ejecutar path/to/mozilla/configure.

+ + 
mkdir obj-debug
+cd obj-debug
+../mozilla/configure
+
+ +

Si usas client.mk, puedes agregar lo siguiente al .mozconfig:

+ + 
mk_add_options MOZ_OBJDIR=/path/to/objdir
+
+ +

 

+
+
Puedo multi-compilar Mozilla?
+
Sí, mira el documento Cross-Compiling Mozilla. No soporta Canadian Cross-Compiling. +

 

+
+
Cómo puedo compilar sólo ciertos archivos para pruebas, en lugar de compilar todo el árbol, mientras modifico el código?
+
Entra en el directorio objdir, luego vè al directorio especifico que deseas compilar (la estructura del objdir coincide con la estructura de los directorios de las fuentes), y tipea "make". Sólo funciona si encuentras un directorio que tenga un Makefile (el equivalente en el árbol fuente tandrá "Makefile.in". Si quieres algo más especifico que eso puedes probar con "make <nombrearchivo>.obj". Mira Incremental Build. +

 

+
+
Funcionan las compilaciones paralelas (make -j) en Mozilla?
+
Sí, mira GNU Make Parallel Execution para su uso óptimo. +

Si obtienes errores de compilación al utilizar aquello (sobre todo cuando usas -j en lugar de -jN), prueba reduciendo el número de paralelismo disminuyendo el valor de N (o, si usaste paralelismo ilimitado, agrega un número pequeño N a -j)

+ +

La compilación en paralelo con -j4 y -j8 parece funcionar.

+ +

 

+
+
Cómo fuerzo al sistema de compilación para aceptar cualquier cambio hecho a mi archivo .mozconfig?
+
Toca cualquiera de los scripts de configuración en el árbol. No hay dependencia sobre el archivo mozconfig; el archivo puede encontrarse donde sea a tráves de la variable de entorno MOZCONFIG. +

 

+
+
error: file '../../toolkit/locales/en-US/chrome/necko/contents.rdf' doesn't exist at ../../config/make-jars.pl line 418, <STDIN> line 9.
+
Estás tratando de compilar Firefox sin seguir las intrucciones sobre cómo Configurar las opciones de compilación. En particular, tu mozconfig debe contener el mozconfig por defecto de Firefox: + 
. $topsrcdir/browser/config/mozconfig
+# add your custom additional options here
+
+ +

 

+
+
Initial cvs checkout fails with the message: cvs {{ mediawiki.external('checkout aborted') }}: *PANIC* administration files missing
+
No puedes crear un árbol CVS debajo de un directorio llamado "CVS". Es una característica/bug de CVS. CVS espera encontrar cierta administración de archivos debajo del directorio CVS y no funciona si no la encuentra. +

 

+
+
Error: ../coreconf/rules.mk:406: target `c' doesn't match the target pattern
+
Necesitas make 3.80 y no otras versiones como 3.81 +
    +
  • make 3.80 ya no está disponible en el instlador de Cygwin, así que lo deberás encontrar por ti mismo. Puedes buscarlo en google como make-3.80-1.tar.bz2, también está disponbleaquí.
    • +
+ +

 

+
+
+ +

Preguntas específicas sobre Mac

+ +

 

+ +
+
Puede compilar una aplicación Mozilla como un binario universal?
+
Sí, mira Mac OS X Universal Binaries. +

 

+
+
Cómo puedo usar distcc para ayudar a compilar?
+
TBA. +

 

+
+
Mozilla compila UFS?
+
Sí, ha sido arreglado desde {{ Bug(157036) }}. +

 

+
+
Mozilla corre sobre UFS?
+
Sí. +

 

+
+
Puedo usar CodeWarrior para compilar Mach-O?
+
No, CodeWarrior murió. Mira {{ Bug(119589) }}. +

 

+
+
Luego de re-compilar, ej. layout. Cómo hago que mi FirefoxDebug.app refleje el cambio?
+
make -C browser/app.
+
+ +

Para errores comunes en Mac y consejos adicionales sobre solución de problemas. Mira solución de problemas en Requerimientos para la compilación en Mac OS X.

+ +

Preguntas sobre Win32

+ +

 

+ +
+
Existe un archivo de proyecto Microsoft Visual Studio para compilar Mozilla?
+
No. Debes usar cygwin y GNU make. +

 

+
+
Puedo correr los comandos para compilar desde cmd.exe?
+
Sí. Make llama la subshell cygwin /bin/sh para ejecutar el comando, así que no hay problema sobre cual shell uses para llamar a make. +

 

+
+
Qué versión del paquete de autoconf de cygwin debo usar?
+
Debido a las incompatibilidades entre autonconf 2.1x y 2.5x, la gente de cygwin escribió un script (wrapper) que determinará qué versión necesitará tu script de configuración y llamará a esa versión. Necesitarás los paquetes autoconf(-wrapper) y autoconf estable. Mira http://cygwin.com/ml/cygwin-announce.../msg00177.html para más detalles +

 

+
+
Las herramientas de Microsoft (CL, LINK, RC) tiran error File not found
+
Las variables de entorno INCLUDE y LIB son usadas por las herramientas de Microsoft Visual C++. Comúnmente están configuradas en vcvars32.bat. Tal vez necesites o no MFC y ATL, dependiendo de qué modulos estés compilando. Debajo hay paths que funcionan si Visual C++ está instalado en "C:\msvs" + 
set INCLUDE=C:\msvs\VC\Include;C:\msvs\VC\ATLMFC\Include
+set LIB=C:\msvs\VC\Lib;C:\msvs\VC98\ATLMFC\Lib
+
+ +

 

+
+
cvs update: authorization failed: server XXXX rejected access -- used empty password; try "cvs login" with a real password
+
Estás mezclando wincvs y cygwin cvs. Usa uno o el otro. +

 

+
+
cvs {{ mediawiki.external('checkout aborted') }}: cannot rename file CVS/Entries.Backup to CVS/Entries: Permission denied
+
En cygwin 1.3.13, ntsec está activada. ntsec es un intento de cygwin por obtener una estructura de permiso mas similar a UNIX sobre características de seguridad que Windows NT. El mensaje de error indica que hay una discrepancia de mapeo entre los permisos de unix listados en el archivo de cygwin /etc/password y los usados por Windows NT. Puedes agregar "nontsec" a tu variable de entorno CYGWIN. Para arreglarlo de forma adecuada deberías solucionar el problema de mapeo. +

 

+
+
Al descomprimir, no se encuentra un archivo .dtd
+
Probablemente usaste Winzip para descomprimir los archivos. No hagas eso. Por defecto, Winzip no extrae los archivos sin longitud (0 bytes). Usa otro utilitario. +

 

+
+
nsinstall u otro programa nativo win32 no encuentra un archivo
+
Revisa tu tabla de subida. Ejecuta el comando de montura, deberia devovler algo como esto: + 
c: on /cygdrive/c type user (binmode,noumount)
+e: on /cygdrive/e type user (binmode,noumount)
+c:\cygwin on / type system (binmode)
+c:\cygwin\bin on /usr/bin type system (binmode)
+c:\cygwin\lib on /usr/lib type system (binmode)
+
+ +

El sistema de compilado espera que las particiones del disco hayan sido montadas usando /cygdrive como prefijo de la unidad. Si C: o E: no usan /cygwin como prefijo de unidad no podrás compilar Mozilla en esas unidades. Debes montar la unidad manualmente usando:

+ + 
mount -s "e:\" /cygdrive/e
+
+ +

Si tu árbol fuente está debajo de tu $HOME, el modo de montura debería ser binmode (finales de líneas estilo Unix), de otro modo fallará al compilar. Si el árbol está fuera de tu $HOME, no importa el modo de montura siempre y cuando tu editor reconozca finales de linea estilo Unix.

+
+
No such file or directory errors from lines in your mozconfig
+
This can be caused by your mozconfig file having Windows-style line endings. Convert them to UNIX-style and the error should go away.
+
xpidl.exe cae con una violación de acceso
+
Usualmente ocurre por una discordancia entre tu compilador y tus librerías glib y/o libIDL. +

Si compilas con Visual Studio .NET, debes enlazar con las version de VC7 de las DLL glib y libIDL. Para Visual Studio .NET 2003, usa las versiones VC7.1. Para Visual Studio 2005, usa VC8.

+ +

El directorio que contenga esas versiones de librerías para tu compilador debe estar en tu PATH antes que cualquier otra versión de las mismas librerías. Los archivos .dll y lib deben ser ejecutable o cygwin no los cargará.

+ +

Mira los Requerimientos para la compilación en Windows sobre más consejos para compilar con VC7 o superior.

+ +

También en {{ Bug(242870) }} se encuentran disponibles algunas librerías estáticas que pueden ser usadas en lugar de las librerías específicas del compilador.

+ +

Si compilas con VC6, debes asegurarte que no estás usando las librerías de VC7 a la hora de compilar o ejecutar.

+
+
configure: error: the midl major version, , does not match the compiler suite version, <Visual C++ nro de versión> -- lo mismo para el linker
+
TLa herramienta cygwin "link.exe" para enlazar no reconoce el objeto enlazador de la suite del compilador Microsoft, o no se encuentra midl. Asegúrate que las herramientas de Microsoft se encuentran antes que cygwin en el PATH (Mira las intrucciones), o renombra o quita el archivo /bin/link.exe. Nota que cygwin tal vez modifique el path cuando arranque su shell, asi que también mira export.
+
configure: error: installation or configuration problem: C compiler cannot create executables.
+
Prueba asegurándote que la variable PATH incluya todos los directorios necesarios. Si usas MS Visual Studio, ejecuta vcvars32.bat (que configura las variables PATH, LIB, y INCLUDE). Si tu entorno ha cambiado, tal vez debas eliminar el archivo config.cache (en el directorio mozilla o directorio objeto) y luego volver a compilar.
+
build error: ../coreconf/rules.mk:365: target `c' doesn't match the target pattern
+
Has usado make 3.81 del instalador cygwin. Debes usar make 3.80. Por favor lee las instrucciones.
+
fatal error LNK1112: module machine type 'IA64' conflicts with target machine type 'X86'
+
Prueba cambiando el orden de los directorios en las variables PATH, LIB e INCLUDE. Cambia cualquier directorio que incluya cerca del final: "win64" o "IA64" (o "AMD64").
+
LINK : fatal error LNK1104: cannot open file 'atlthunk.lib'
+
De acuerdo con this Microsoft forum thread, hay una versión diferente de Active Template Library (ATL) para  Platform Software Development Kit -libre- (PSDK),  que para Visual Studio. La ATL en el PSDK no soporta código 32-bits, sólo 64-bits; mientras que Visual Studio soporta ambas y no requiere atlthunk.lib. Aparentemente el archivo atlthunk.lib no está disponible y no se pudo compilar desde freely available tools, incluyendo las herramientas Visual C++ y Visual Studio Express. De todos modos puedes actualizar a la versión full de Visual Studio y utilizar la versión de ATL del mismo, o puedes trabajar en el problema cambiando algunos códigos en atlbase.h (en \include\atl debajo del directorio PSDK). Ejemplo: + 
--- atlbase.h.old       2006-06-08 08:20:26.671875000 -0400
++++ atlbase.h   2006-06-08 08:13:26.578125000 -0400
+@@ -283,7 +283,7 @@
+         }
+ };
+ #pragma pack(pop)
+-
++/*
+ PVOID __stdcall __AllocStdCallThunk(VOID);
+ VOID  __stdcall __FreeStdCallThunk(PVOID);
+
+@@ -291,6 +291,11 @@
+ #define FreeStdCallThunk(p) __FreeStdCallThunk(p)
+
+ #pragma comment(lib, "atlthunk.lib")
++*/
++
++// workaround for not having atlthunk.lib in PSDK or VC++ 2005 Express Edition
++#define AllocStdCallThunk() HeapAlloc(GetProcessHeap(),0,sizeof(_stdcallthunk))
++#define FreeStdCallThunk(p) HeapFree(GetProcessHeap(), 0, p)
+
+ #elif defined (_M_AMD64)
+ #pragma pack(push,2)
+
+ +

También hubo que borrar el directorio objeto y volver a compilar desde el principio, de modo que el compilador tome el cambio.

+
+
Compilar o generar un ejecutable con cygwin y VS6.0 termina en FIND: Parameter format not correct
+
Hay una confusión entre System32 "find" y /usr/bin/find de cygwin. Lo que queremos es el find de cygwin. Es causado por el orden del path. Algunas posibles soluciones serían: +
    +
  • Renombrar temporalmente system32/find.exe
    • +
  • Asegurarse que en la entrada del path esté primero cygwin que system32
    • +
+
+
Empaqueté Firefox a través del instalador: make -C ${OBJ_DIR}/browser/installer installer sin problemas. Al ejecutar pide el archivo perdido mozz.dll; la instalación falla.
+
Tanto Firefox como Thunderbird,deberían compilarse con las etiquetas --enable-static --disable-shared
+
shlibsign.exe - Entry Point Not Found; El procedimiento CERT_GetFirstEmailAddress no ha sido localizado en la librería nss3.dll.
+
Tal vez tengas muchos nss3.dll en tu máquina y en tu path. Haz una búsqueda para todas las copias de este archivo. Mueve todas las copias que se encuentren dentro del árbol de Firefox durante la compilación y vuelve a colocarlos cuando se termine la compilación.
+
+ +

Preguntas sobre Mingw32

+ + + +

Preguntas sobre Unix

+ +
+
Galeon necesita libgtksuperwin.so pero no tengo ese archivo en mi Mozilla gtk2, dónde está?
+
Sólo Mozilla gtk1 compila libgtksuperwin.so. Si deseas usar galeon con compilación gtk2, debes usar galeon2. +

 

+
+
Por qué la configuración dice que necesito libIDL >= 0.6.3 cuando tengo instalado libIDL 0.8.x?
+
libIdl 0.8.x sólo puede ser usado compilando con gtk2. Por defecto, Mozilla compila con gtk1. Para usar libIDl 0.8.x y gtk2 debes especificar --enable-default-toolkit=gtk2 en la línea de comando de laconfiguración o  .mozconfig. NOTA: Esto es viejo y ha sido arreglado en Mozilla 1.8
+
Cómo compilo en Solaris 10 x86 (SeaMonkey)?
+
Tuve que hacer lo siguiente para conseguir un entorno que funcione:
+
1. instalar forte (Gratis desde Sun)
+
2. Instalar gmake (desde blastwave)
+
3. mv /usr/ucb/cc /usr/ucb/cc.hold
+
4. CFLAGS="-xlibmil"; exporta CFLAGS
+
5. CXXFLAGS="-xlibmil -xlibmopt -features=tmplife -norunpath"; exporta CXXFLAGS
+
6. LDFLAGS='-R$ORIGIN -R/usr/sfw/lib -R/opt/sfw/lib -R/usr/local/lib -R/opt/csw/lib'; exporta LDFLAGS
+
7. PATH=$PATH:/opt/SUNWspro/bin:/opt/csw/bin:/opt/csw/sbin:/usr/ucb/bin:/usr/ccs/bin; exporta PATH
+
8. LD_LIBRARY_PATH=/opt/SUNWspro/lib:$LD_LIBRARY_PATH; exporta LD_LIBRARY_PATH
+
9. Crear un archivo mozconfig y compilar normalmente.
+
10. La generación del paquete (tar y gzip) falló, así que simplemente lo cree manualmente con los archivos resultantes en el directorio dist.
+
libxpcom_core.so: cannot restore segment prot after reloc: Permission denied</dt>
+
Probablemente estés usando Fedora Core 5, o alguna otra distribución de Linux que tiene activado SELinux. Para arreglarlo, utiliza el comando 'chcon -t chcon -t texrel_shlib_t lib*' en el directorio dist/bin.</dd>
+
diff --git "a/files/es/mozilla/developer_guide/source_code/c\303\263digo_fuente_de_mozilla_(cvs)/index.html" "b/files/es/mozilla/developer_guide/source_code/c\303\263digo_fuente_de_mozilla_(cvs)/index.html" new file mode 100644 index 0000000000..248231aee9 --- /dev/null +++ "b/files/es/mozilla/developer_guide/source_code/c\303\263digo_fuente_de_mozilla_(cvs)/index.html" @@ -0,0 +1,149 @@ +--- +title: Código fuente de Mozilla (CVS) +slug: Mozilla/Developer_guide/Source_Code/Código_fuente_de_Mozilla_(CVS) +tags: + - Documentación_de_compilado +translation_of: Mozilla/Developer_guide/Source_Code/CVS +--- +

 

+

Aquellos que desarrollan de forma muy activa pueden comprobar el último código fuente utilizando CVS. Si vas a realizar parches y arreglos este es el método más adecuado, porque te permite ver los últimos cambios y unirlos con los tuyos.

+

Si quieres compilar el producto para su publicación, es mejor Descargar el código fuente de Mozilla en un archivo tar.

+

Guía rápida

+

I seem to not be editing this page in what others on this development site deem appropriate. So, if you are going to just remove this section, can you please be so kind as to suggest an alternate title of a new page that I can put this information on? Thanks, Jeff Carr

+

Los pasos básicos para descargar la rama (inestable) del código fuente de Firefox son:

+
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
+cd mozilla
+make -f client.mk checkout MOZ_CO_PROJECT=browser
+
+

Comenzando

+

CVS significa "Concurrent Versioning System". Para conocer más sobre CVS en general visita ximbiot.com, o lee el tutorial.

+

Cualquiera puede descargar ("check out") el código fuente vía CVS, pero solo ciertas personas pueden subir cambios ("check in" o "commit"). Esas personas son los dueños de módulos y sus delegados. Lee nuestro documento sobre mejorar mozilla para saber como puedes tener la habilidad de enviar cambios. Quizá quieras leer tambien acerca de como usar SSH para conectar al CVS.

+

Requisitos

+

Para descargar el código fuente, necesitas CVS versión 1.11 o posterior. La versión 1.12.13 no funciona con el servidor CVS, y el resultado es que el programa se cuelga, sin embargo la versión 1.12.9 parece funcioanr. Además, debes usar GNU make para descargar y compilar Mozilla. No se acepta ningún otro programa "make". En windows, mac y sistemas GNU habituales (como GNU/Linux), usa "make" para ejecutar GNU make; en la mayoría de los sistemas UNIX no GNU (como por ejemplo Solaris), usa "gmake".

+

Configuración de cliente CVS

+

El "cvsroot" (cadena de identificación del repositorio) que se utiliza para acceder a CVS Mozilla de forma anónima es:

+
:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot
+
+

Si usas una interface CVS gráfica, utiliza los siguientes datos del servidor:

+ +

Elegir un proyecto para descargar

+

Ya que se usa el mismo código para compilar distintas aplicaciones debes elegir qué aplicación quieres descargar en la línea de comandos usando la variable MOZ_CO_PROJECT. esta información debe proporcionarse cuando se necesite para la descarga del código fuente actual (lee la sección apropiada sobre la descarga más abajo, dependiendo de la rama que quieras descargar). Las posibles opciones incluyen:

+
+
+ browser 
+
+ El navegador "Firefox".
+
+ mail 
+
+ El cliente de correo/noticias "Thunderbird".
+
+ suite 
+
+ La suite traditional "Mozilla" SeaMonkey con navegador, correo/noticias, editor web, y otras aplicaciones.
+
+ minimo 
+
+ El navegador para pequeños dispositivos.
+
+ composer 
+
+ El editor HTML.
+
+ calendar 
+
+ La aplicación de calendario "Sunbird".
+
+ xulrunner 
+
+ El interprete de nueva generación para aplicaciones XUL.
+
+ camino 
+
+ El navegador nativos para Macintosh, "Camino".
+
+ tamarin 
+
+ La máquina virtual Adobe Ecmascript.
+
+ all 
+
+ Descarga todos los códigos fuente de todos los proyectos de arriba, además de código útil adicional
+
+

Se pueden especificar varios proyectos con comas: MOZ_CO_PROJECT=suite,browser,xulrunner.

+

Ten en cuenta que si estas usando un archivo <tt>.mozconfig</tt> personalizado, debes especificar también el MOZ_CO_PROJECT allí, en vez de hacerlo en la línea de comandos.

+

Descargar el código de una rama nueva

+

Comprueba el Tinderbox

+

Antes de descargar una rama, debes comprobar siempre el Tinderbox apropiado para asegurarte que el código base no esta roto. Si hay tinderboxes en rojo, normalmente es recomendable esperar hasta que estén en verde antes de descargar una rama.

+

Rama HEAD

+

Para descargar una rama nuevo desde cero, toma el archivo client.mk que es el que contiene las instruciones que se usarán para descargar el resto de la rama:

+
$ cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
+
+

Nota: Si ya tienes un archivo .mozconfig, quizá necesites descargar los siguientes archivos:

+
+
+ Firefox 
+
+ 
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/browser/config/mozconfig
+
+
+ Thunderbird 
+
+ 
cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/mail/config/mozconfig
+
+
+

Rama específica

+

Si quieres descargar el código de alguna rama CVS específica, usa:

+
$ cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -r RAMA mozilla/client.mk
+
+

Por ejemplo, para descargar la rama en desarrollo de Firefox 2.0, reemplaza RAMA por MOZILLA_1_8_BRANCH. Para ver las ramas disponibles en Mozilla, mira las Etiquetas CVS.

+

Para información sobre como descargar los archivos .mozconfig de un proyecto específico, lee la sección anterior (Por supuesto aplicable a otras ramas diferentes de HEAD también).

+

Descargar

+

Después de elegir la rama correspondiente, ejecuta:

+
$ cd mozilla
+$ make -f client.mk checkout MOZ_CO_PROJECT=opción,opción
+
+

Cómo se mencionó arriba, si ya tienes especificado la rama en un archivo .mozconfig personalizado, no necesitas hacerlo en la línea de comando.

+
+ Utiliza siempre client.mk para descargar las fuentes Mozilla: no descargues directamente el módulo mozilla/, se descargían varios subprojectos como NSS, NSPR y LDAP C SDK, pero el desarrollo habitual de mozilla se da en el tronco (trunk).
+

Fecha específica

+

Si quieres descargar el código de alguna fecha en particular utiliza la variable MOZ_CO_DATE. Por ejemplo <tt>MOZ_CO_DATE="20 Oct 2006 17:00 PDT"</tt>

+

También se puede agregar en el .mozconfig, o escribir en la línea de comandos:

+
$ cd mozilla
+$ make -f client.mk checkout MOZ_CO_DATE="20 Oct 2006 17:00 PDT" MOZ_CO_PROJECT=option,option
+
+

Cambiar el árbol de código a una rama diferente

+

Branch HEAD

+

Para actualizar el árbol de código (ya sea la rama HEAD o cualquier otra) a la última versión, primero ejecuta:

+
$ cd mozilla
+$ cvs up -A client.mk
+
+

La opción -a elimina cualquier información "pegada a la rama", actualizaría la rama HEAD.

+

Rama específica

+

Para actualizar el árbol de código de una rama especifica descargado con anterioridad usa:

+
$ cd mozilla
+$ cvs up -r RAMA client.mk
+
+

Reemplaza RAMA con la etiqueta de la rama que desees actualizar.

+

Actualizar el árbol de código

+

Para actualizar el árbol de código simplemente haz lo siguiente:

+
$ make -f client.mk checkout MOZ_CO_PROJECT=opción,opción
+
+

Igual que siempre, si tienes un .mozconfig personalizado con MOZ_CO_PROJECT definido, no necesitas repetirlo en la línea de comando.

+

Creando un archivo Diff

+

Para crear un diff de un archivo local para aplicar en el archivo actual en reposición, usa:

+
$ cvs diff -u8p NOMBREDEARCHIVO
+
+

Mira Crear un parche para más información.

+

Convertir el árbol de código descargado

+

Los árboles descargados desde mozilla.org (tarballs con el código fuente) ya poseen información CVS, cómo una descarga normal. Puedes actualizarlo como cualquier otro árbol al la última versión, sin ninguna acción en especial. Para ver cómo actualizar un árbol, mira la sección anterior

+

interwiki link

+
+  
+

{{ languages( { "en": "en/Mozilla_Source_Code_(CVS)", "fr": "fr/Obtenir_le_code_source_de_Mozilla_via_CVS", "ja": "ja/Mozilla_Source_Code_(CVS)", "zh-cn": "cn/\u901a\u8fc7CVS\u83b7\u53d6\u6e90\u7801" } ) }}

diff --git a/files/es/mozilla/developer_guide/source_code/index.html b/files/es/mozilla/developer_guide/source_code/index.html new file mode 100644 index 0000000000..47a6d9eb88 --- /dev/null +++ b/files/es/mozilla/developer_guide/source_code/index.html @@ -0,0 +1,56 @@ +--- +title: Working with Mozilla source code +slug: Mozilla/Developer_guide/Source_Code +tags: + - Desarrollo de Mozilla + - Necesita traducción + - TopicStub +translation_of: Mozilla/Developer_guide/Source_Code +--- +

Los artículos a continuación le ayudarán a tener acceso al código fuente de Mozilla, aprender a navegar por el código y cómo hacer que los cambios que proponga se verifiquen en el árbol.

+ + + + + + + + + + + +
+

Temas de la documentación

+
+

Obtener una máquina virtual del sistema de compilación Mozilla preconfigurado

+ +
+
+
Si planea contribuir con el proyecto de Mozilla, la mejor forma de obtener el código es verificarlo desde el repositorio de control de versiones. Aprenda cómo hacerlo aquí.
+
Descargar el código usando HTTP o FTP
+
Si desea buscar el código para una versión específica de un producto Mozilla en particular, puede preferir descargar un archivo de código fuente.
+
Ver y buscar el código fuente de Mozilla en línea
+
Aprenda a usar MXR, la herramienta de búsqueda y navegación en línea de Mozilla para acceder al código fuente. Esta no es una buena manera de descargar el código, pero es una excelente forma de buscarlo.
+
Navegar por el código fuente de Mozilla
+
Obtenga información sobre las distintas carpetas en el árbol de fuentes de Mozilla y sobre cómo encontrar lo que está buscando.
+
Errores para los recién llegados
+
Si eres nuevo en el proyecto y quieres algo en lo que trabajar, mira aquí.
+
+ 		+
+
Guía de estilo de codificación de Mozilla
+
La guía de estilo de código brinda información sobre cómo debe dar formato a su código fuente para asegurarse de que los revisores no se burlen.
+
Guía de desarrollo de la interfaz
+
Pautas y documentación sobre cómo crear y actualizar las interfaces XPCOM.
+
Probar los servidores
+
Los productos de Mozilla se basan en al menos tres plataformas. Si no tiene acceso a todas ellas, puede usar los servidores de prueba para probar sus parches y asegurarse de que las pruebas pasen.
+
Crear un parche
+
Una vez que haya realizado un cambio en el código de Mozilla, el siguiente paso (después de asegurarse de que funciona) es crear un parche y enviarlo para su revisión. Este artículo debe ser actualizado completamente para Mercurial.
+
Obtener el acceso de confirmación para el código fuente
+
¿Te sientes listo para unirte a los pocos, a los orgullosos, a los que se comprometen? Averigüe cómo obtener acceso de check-in al código de Mozilla.
+
Obtener un código de Mozilla más antiguo desde CVS
+
Las versiones anteriores del código fuente de Mozilla, así como las versiones actuales de NSS y NSPR, se guardan en un repositorio de CVS. Aprende sobre eso en este artículo.
+
+
+ +

{{ languages( { "de": "de/Entwicklerhandbuch/Quelltexte", "ja": "ja/Developer_Guide/Source_Code", "pt": "pt/Developer_Guide/Codigo_Fonte" } ) }}

diff --git a/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html b/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html new file mode 100644 index 0000000000..76ea78e7b0 --- /dev/null +++ b/files/es/mozilla/firefox/compilar_firefox_con_codigo_en_rust/index.html @@ -0,0 +1,37 @@ +--- +title: Compilar Firefox con código en Rust +slug: Mozilla/Firefox/Compilar_Firefox_con_codigo_en_Rust +tags: + - Compilación + - Gecko + - rust +translation_of: Archive/Mozilla/Firefox/Building_Firefox_with_Rust_code +--- +
{{FirefoxSidebar}}

En mayo de 2015, el lenguaje de programación Rust alcanzó su objetivo de estabilidad 1.0 y se comenzaron diversos experimentos que consistieron en escribir partes de Gecko en Rust. Esta página contiene una guía de orientación aproximada para las personas que trabajan en esta área.

+ +

Consulte el informe n.º 1135640 (oxidation) para ver el seguimiento integral de la integración de componentes en el lenguaje Rust.

+ +

Activación del código en Rust

+ +

Con el trabajo realizado en el informe n.º 1161339 se implementó compatibilidad básica para compilar código en Rust. Esta compatibilidad está activada para las compilaciones oficiales de la mayoría de las plataformas, con la excepción de las compilaciones que realice localmente. Si en su «path» tiene «rustc», puede añadir:

+ +
ac_add_options --enable-rust
+ +

… a su archivo mozconfig y la compilación probablemente funcionará. Normalmente apuntamos a versiones estables de Rust pero, en ocasiones, para admitir algunas plataformas nuevas se necesitan versiones especiales de las herramientas de compilación. Si aún no tiene Rust, utilice la herramienta «rustup» para instalarlo.

+ +

Poner a prueba el código en Rust

+ +

En el árbol hay una sencilla prueba unitaria de vinculación. Es posible utilizarla para comprobar que Rust esté activado y funcione correctamente con su configuración de compilaciones.

+ +
./mach gtest rust.*
+ +

Revise que la prueba rust.CallFromCpp se supere, junto con cualquier otra que haya.

+ +

Adición de código en Rust

+ +

Para agregar código nuevo en Rust se requiere añadir el archivo .rs de nivel superior para agruparlo en un cajón (crate) de SOURCES en moz.build.

+ +

Debido a límites de Cargo y al sistema de compilaciones de Firefox, por el momento solo admitimos cajones sencillos, sin dependencias. No empleamos Cargo, sino que creamos un archivo rlib a partir de todos los archivos rust enumerados en SOURCES. El compilador de Rust buscará los módulos internos según los nombres de archivo de código fuente, pero las referencias de extern crate no se resolverán.

+ +

El sistema de compilaciones generará un cajón especial para una «biblioteca unificada de Rust», compilada como una biblioteca estática (librul.a) que a su vez se enlaza en XUL, de modo que todos sus símbolos públicos estén disponibles para el código en C++.

diff --git "a/files/es/mozilla/firefox/edici\303\263n_de_desarrollador/index.html" "b/files/es/mozilla/firefox/edici\303\263n_de_desarrollador/index.html" new file mode 100644 index 0000000000..12642f7044 --- /dev/null +++ "b/files/es/mozilla/firefox/edici\303\263n_de_desarrollador/index.html" @@ -0,0 +1,59 @@ +--- +title: Edición de Desarrollador +slug: Mozilla/Firefox/Edición_de_Desarrollador +tags: + - Firefox + - Iniciado + - Lanzamiento +translation_of: Mozilla/Firefox/Developer_Edition +--- +
{{FirefoxSidebar}}

La versión de Firefox a la medida de los desarrolladores web. (Versión Actualizada)

+ +

Descarga Firefox Developer Edition

+ +
+
+
+

Las últimas funciones de Firefox

+ +

Firefox Developer Edition sustituye al canal Aurora en el Proceso de lanzamiento de versiones de Firefox.  En Developer Edition, como en Aurora,  las caracteristicas se lanzan cada seis semanas, despues de que se hayan estabilizado en Nightly builds.

+ +

Utilizando Firefox Developer Edition, tienes acceso a las herramientas y a las caracteristicas de la plataforma al menos 12 semanas antes de que lleguen a alcanzar el canal principal de lanzamiento Firefox.

+ +

Descubre las novedades de Firefox Developer Edition..

+
+ +
+

Herramientas de Desarrollo Experimentales

+ +

Incluiremos herramientas de desarrollo que aún no están todavía del todo listas para ser lanzadas en la versión final de Firefox. Por ejemplo Valence add-on (Adaptador de Herramientas Firefox) , la cual te permite conectar las Herramientas de Desarrollo Firefox  con las de otros navegadores , como Chrome en android o Safari en IOS.

+
+
+ +
+
+

Un Perfil Separado

+ +

Firefox Developer Edition utiliza un perfil separado de las otras versiones de Firefox instaladas en tu ordenador. Esto hace que puedas intercambiar más facilmente entre las versiones ya lanzadas o las betas de Firefox.

+
+ +
+

Configuración para Desarrolladores Web

+ +

Hemos establecido valores de preferencia predeterminados adaptados a los desarrolladores web. Por ejemplo, {{glossary ("chrome")}} y depuración remota están habilitados de forma predeterminada.

+
+
+ +
+
+

Una Apariencia Distinta

+ +

Incluidos accesos directos a las herramientas de desarrollo

+
+ +
+
Nota: Esto significa que la primera vez que inicie  Developer Edition, verá un navegador totalmente no personalizado, sin complementos, marcadores o historial. Puedes utilizar Firefox Sync si quieres unificar tu configuración entre Developer Edition y otras ediciones de Firefox.
+
+
+ +

 

diff --git "a/files/es/mozilla/firefox/edici\303\263n_de_desarrollador/revertir/index.html" "b/files/es/mozilla/firefox/edici\303\263n_de_desarrollador/revertir/index.html" new file mode 100644 index 0000000000..a4df9a3ba6 --- /dev/null +++ "b/files/es/mozilla/firefox/edici\303\263n_de_desarrollador/revertir/index.html" @@ -0,0 +1,25 @@ +--- +title: Revertir +slug: Mozilla/Firefox/Edición_de_Desarrollador/Revertir +translation_of: Mozilla/Firefox/Developer_Edition/Reverting +--- +
{{FirefoxSidebar}}

Revertir el tema Firefox Developer Edition

+ +


+ Si quieres usar Firefox Developer Edition, pero prefieres el tema 'Australis' usado en Firefox y Firefox Beta, puedes cambiarlo: simplemente abre el panel "Personalizar" y haz clic en el botón "Usar el tema Firefox Developer Edition".

+ +

{{EmbedYouTube("OvJwofTjsNg")}}

+ +

Ten en cuenta que el tema Firefox Developer Edition no es aún compatible con temas ligeros. Si quieres usar un tema ligero, tendrás que volver al tema 'Australis'.

+ +

Revertir a Firefox Aurora

+ +


+ Si quieres disfrutar de todas las características pre-Beta de Firefox Developer Edition, descartando el resto de cambios, puedes revertir el navegador a algo parecido al viejo Firefox Aurora. Esto también restaurará tu perfil y datos de sesión previos a la actualización. Es un proceso de dos pasos, que debes de seguir en este orden:

+ +
    +
  1. Abre Preferencias y desmarca la opción "Permitir a Firefox Developer Edition y Firefox ejecutarse al mismo tiempo". Se te avisará de que es necesario reiniciar el navegador.
    2. +
  2. Tras reiniciar, podrás revertir la aplicación del tema Firefox Developer Edition abriendo el panel "Personalizar" y haciendo clic en el botón "Usar el tema Firefox Developer Edition".
    3. +
+ +

 

diff --git a/files/es/mozilla/firefox/experimental_features/index.html b/files/es/mozilla/firefox/experimental_features/index.html new file mode 100644 index 0000000000..56c26f6755 --- /dev/null +++ b/files/es/mozilla/firefox/experimental_features/index.html @@ -0,0 +1,724 @@ +--- +title: Funciones experimentales de Firefox +slug: Mozilla/Firefox/Experimental_features +tags: + - Experimental + - Firefox + - Preferencias + - características +translation_of: Mozilla/Firefox/Experimental_features +--- +
{{FirefoxSidebar}}
+ +

Para probar nuevas características, Mozilla publica una versión de prueba del navegador Firefox, Firefox Nightly, cada día. Características experimentales, por ejemplo implementaciones de estándares de plataforma Web, están disponibles. Esta página lista características que están en versiones Nightly de Firefox junto con información sobre cómo activarlas, si es necesario. Puedes probar tus sitios Web y aplicaciones antes de que se lancen las características y confirmar que todo seguirá funcionando con las últimas prestaciones de tecnología Web.

+ +

Para probar esas características experimentales, necesitas descargar Firefox Nightly o Firefox Developer Edition.

+ +

HTML

+ + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox NightlyFirefox Developer EditionFirefox BetaFirefoxPreferencia
{{HTMLElement("dialog")}}
+ Elemento dialog incluyendo APIs de DOM para interactuar con este. La implementación de diálogos modales y accesibilidad sigue faltando.		Desactivado
+ (disponible desde 53)		Desactivado
+ (disponible desde 53)		------dom.dialog_element.enabled
+ +

CSS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox NightlyFirefox Developer EditionFirefox BetaFirefoxPreference
Subgrids +

Desactivado

+ +

(reconocido pero aún no implementado)

+ 		+

Desactivado

+ +

(reconocido pero aún no implementado)

+ 		+

Desactivado

+ +

(reconocido pero aún no implementado)

+ 		+

Desactivado

+ +

(reconocido pero aún no implementado)

+ 		layout.css.grid-template-subgrid-value.enabled
Display stray control characters in CSS as hex boxes
+ This feature renders control characters (Unicode category Cc) other than tab (U+0009), line feed (U+000A), form feed (U+000C), and carriage return (U+000D) as a hexbox when they are not expected.		4343No habilitadoNo habilitadolayout.css.control-characters.enabled or layout.css.control-characters.visible
Positioned CSS Masks
+ A subset of CSS Masks that includes longhand properties of CSS Masks, as well as a change in the shorthand property		515153No habilitadoControlled by a compile flag (MOZ_ENABLE_MASK_AS_SHORTHAND).
+

The font-variation-settings property
+ The {{cssxref("font-variation-settings")}} provides low-level control over OpenType or TrueType font typographic features, by specifying the four letter axis names of the features you want to vary, along with their variation values.

+ 		No habilitado
+ (disponible desde la versión 53)		No habilitado
+ (disponible desde la versión 53)		No habilitado
+ (disponible desde la versión 53)		No habilitado
+ (disponible desde la versión 53)		 +

layout.css.font-variations.enabled
+ Functions only in Mac OS Sierra (and later).
+
+ For the downloadable fonts on axis-praxis, you also need gfx.downloadable_fonts.keep_variation_tables (in Firefox 54 and later)

+
The touch-action CSS property
+ The {{cssxref("touch-action")}} CSS property is part of the {{SpecName("Pointer Events")}} specification and allows you to specify how and in what way the user is able to manipulate an object by touch.		50———layout.css.touch_action.enabled
+

The shape-outside CSS property
+ The {{cssxref("shape-outside")}} CSS property is part of the {{SpecName("CSS Shapes")}} specification and allows you to specify a float area causing inline contents to wrap around a shape.

+ +

Firefox currently implements the <shape-box> values ({{bug(1309467)}}) as well as the circle() ({{bug(1311244)}}), ellipse() ({{bug(1326406)}}), and polygon() ({{bug(1326409)}}) functions. {{cssxref("shape-outside")}} is animatable desde la versión Firefox 57 ({{bug(1289049)}}).

+ 		No habilitado
+ (disponible desde la versión 53)		———layout.css.shape-outside.enabled
The shape-image-threshold CSS property
+ The {{cssxref("shape-imahge-threshold")}} CSS property is part of the {{SpecName("CSS Shapes")}} specification, and allows you to specify the alpha channel threshold used to extract the shape using an image as the value for {{cssxref("shape-outside")}}.		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		layout.css.shape-outside.enabled
La propiedad contain de CSS
+ La propiedad de CSS {{cssxref("contain")}} es parte de la especificación {{SpecName("CSS Containment")}} y te permite indicar que un elemento y sus contenidos son independientes del resto del documento, permitiendo a  {{Glossary("User agent", "user agents")}} optimizar el renderizado de una página.		No habilitado
+ (disponible desde la versión 45)		No habilitado
+ (disponible desde la versión 45)		No habilitado
+ (disponible desde la versión 45)		No habilitado
+ (disponible desde la versión 45)		layout.css.contain.enabled
+

The column-span CSS property
+ The {{cssxref("column-span")}} CSS property is part of the {{SpecName("CSS3 Multicol")}} specification and allows you to specify how many columns an element spans across.

+ +

Firefox currently only parses the property ({{bug(1339298)}}), it's not actually implemented yet ({{bug(616436)}}).

+ 		No habilitado
+ (recognized desde la versión 55, but not implemented yet)		———layout.css.column-span.enabled
The frames() timing function
+ Ver The frames() class of timing-functions para más detalle		HabilitadoN/ANo habilitado
+ (disponible desde la versión 55)		No habilitado
+ (disponible desde la versión 55)		None
The {{cssxref("::slotted")}} pseudo-element
+ Selects elements when they are inserted into a {{htmlelement("slot")}} in an HTML {{htmlelement("template")}}.		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		dom.webcomponents.customelements.enabled and dom.webcomponents.shadowdom.enabled
+ +

JavaScript

+ +

See also ECMAScript Next support for implemented features of ECMAScript 2016 and later, that are not experimental and thus available without preferences in Firefox Release.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Additions to the ArrayBuffer object
+ Adds the {{jsxref("ArrayBuffer.transfer()")}} that returns a new ArrayBuffer whose contents have been taken from the oldBuffer's data (spec).		36No habilitadoNo habilitadoNo habilitadoNone
TypedObject objects (spec)HabilitadoNo habilitadoNo habilitadoNo habilitadoNone
SIMD (specification and polyfill)HabilitadoNo habilitadoNo habilitadoNo habilitadoNone
ECMAScript modules
+ Allows you to use native ECMAScript modules, for example defining modules with <script type="module">, defining fallback scripts with <script nomodule>, and importing code features that have been exported from modules.		59No habilitadoNo habilitadoNo habilitadodom.moduleScripts.enabled
{{jsxref("Array.prototype.flatten()")}} and {{jsxref("Array.prototype.flatMap()")}}Habilitado (59)No habilitadoNo habilitadoNo habilitadoNone
+ +

APIs

+ +

Canvas & WebGL

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
WEBGL_debug_renderer_info extension
+ The {{domxref("WEBGL_debug_renderer_info")}} extension allows you to transmit information useful to help debugging problems to the server.		4242No habilitadoNo habilitadowebgl.enable-debug-renderer-info
OffscreenCanvas
+ The {{domxref("OffscreenCanvas")}} interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts.		No habilitado
+ (disponible desde la versión 44)		No habilitado
+ (disponible desde la versión 44)		No habilitado
+ (disponible desde la versión 44)		No habilitado
+ (disponible desde la versión 44)		gfx.offscreencanvas.enabled
Hit regions
+ Whether the mouse coordinates are within a particular area on the canvas is a common problem to solve. The hit region API allows you define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools.		No habilitado
+ (disponible desde la versión 30)		No habilitado
+ (disponible desde la versión 30)		No habilitado
+ (disponible desde la versión 30)		No habilitado
+ (disponible desde la versión 30)		canvas.hitregions.enabled
Streams API
+ Allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.		No habilitado
+ (disponible desde la versión 57)		No habilitado
+ (disponible desde la versión 57)		No habilitado
+ (disponible desde la versión 57)		No habilitado
+ (disponible desde la versión 57)		dom.streams.enabled and javascript.options.streams
Custom elements
+ Allows the definition and registering of custom elements that can then be used in the document.		Habilitado
+ (desde la versión 59)		No habilitado
+ (disponible desde la versión 57)		No habilitado
+ (disponible desde la versión 57)		No habilitado
+ (disponible desde la versión 57)		dom.webcomponents.enabled and dom.webcomponents.customelements.enabled
Shadow DOM
+ Allows a shadow DOM to be attached to any element, inside which markup, style, and scripting can be safely encapsulated.		No habilitado
+ (disponible desde la versión 58)		No habilitado
+ (disponible desde la versión 58)		No habilitado
+ (disponible desde la versión 58)		No habilitado
+ (disponible desde la versión 58)		dom.webcomponents.enabled and dom.webcomponents.shadowdom.enabled
+ +

DOM

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Gamepad extensions
+ The Gamepad Extensions provide access to additional functionality such as pose information in the case of WebVR controllers, and haptic actuator control (e.g. controller vibration hardware).		HabilitadoHabilitadoHabilitadoNo habilitadodom.gamepad-extensions.enabled
HTMLMediaElement.seekToNextFrame()
+ Part of an experimentation process around support non-real-time access to media for tasks including filtering, editing, and so forth, the {{domxref("HTMLMediaElement.seekToNextFrame()")}} advances the the current play position to the next frame in the media.		49
+ (Fundamental update in version 50)		49
+ (Fundamental update in version 50)		No habilitadoNo habilitadomedia.seekToNextFrame.enabled
GeometryUtils.getBoxQuads() ({{bug(917755)}})3131No habilitadoNo habilitadolayout.css.getBoxQuads.enabled
GeometryUtils.convertPointFromNode(),
+ GeometryUtils.RectFromNode(), y
+ GeometryUtils.convertQuadFromNode()
+ ({{bug(918189)}})		3131No habilitadoNo habilitadolayout.css.convertFromNode.enabled
Node.rootNode
+ The {{domxref("Node.rootNode")}} property returns a {{domxref("Node")}} object representing the topmost node in the tree, or the current node if it's the topmost node in the tree.
+ This feature is kept experimental as its naming poses Web compatibility problems. It will be renamed in the future.		4848No habilitadoNo habilitadodom.node.rootNode.enabled
WebVTT Regions API
+ WebVTT regions are parts of the video viewport that provide a rendering area for WebVTT cues. The {{domxref("VTTRegion")}} is the interface exposing the WebVTT cues.
+ This interface is considered to be in flux and isn't therefore activated in any version by default.		No habilitado
+ (Experimental implementation desde la versión version 30)		No habilitadoNo habilitadoNo habilitadomedia.webvtt.regions.enabled
Support for audio and video tracks
+ Implementa {{domxref("HTMLMediaElement.audioTracks")}} y {{domxref("HTMLMediaElement.videoTracks")}}.
+ Firefox no soporta pistas de audio o vídeo múltiples, evitando que los usos más comunes de estas propiedades funcionen correctamente. Es por ello que estas propiedades no están activadas por defecto en ninguna versión. 		No habilitado
+ (Implementación experimental desde la versión 33)		No habilitadoNo habilitadoNo habilitadomedia.track.enabled
Better value for Event.timestamp
+ The property {{domxref("Event.timestamp")}} is returning a {{domxref("DOMHighResTimeStamp")}}, which is now relative to the Unix epoch.		32 (Windows)
+ 43 (Linux)		32 (Windows)
+ 43 (Linux)		No habilitadoNo habilitadomedia.track.enabled
Pointer Events5959
+ (todavía no habilitado en Firefox para Android)		59
+ (todavía no habilitado en Firefox para Android)		59
+ (todavía no habilitado en Firefox para Android)		dom.w3c_pointer_events.enabled
Intersection Observer API
+ The {{domxref("Intersection Observer API")}} allows you to configure a callback that is called whenever one item, called a target, intersects either the device viewport or a specified element called.		No habilitado
+ (disponible desde la versión 53)		———dom.IntersectionObserver.enabled
Web Animations API: KeyframeEffect and KeyframeEffectReadOnly
+ The {{domxref("KeyframEffectReadOnly()", "KeyframeEffectReadOnly.KeyframeEffectReadOnly()")}} and {{domxref("KeyframeEffect()", "KeyframeEffect.KeyframeEffect()")}} constructors can be used to clone existing {{domxref("KeyframeEffectReadOnly")}} object instances by being given the object to clone as their only parameter (see {{bug(1273784)}}.)		5252No habilitadoNo habilitadoNone
{{domxref("PromiseRejectionEvent")}} and related features
+ Providing a way to monitor and more finely control the rejection of Promises.
+  		No habilitado
+ (disponible desde la versión 55)		No habilitadoNo habilitadoNo habilitadodom.promise_rejection_events.enabled
Payment Request API
+ Provides a web API for handling web-based payments.		No habilitado
+ (disponible desde la versión 55)		No habilitado
+ (disponible desde la versión 55)		No habilitado
+ (disponible desde la versión 55)		No habilitado
+ (disponible desde la versión 55)		dom.payments.request.enabled
Basic Card Payment API
+ Provides dictionaries that define data structures describing card payment types and payment responses for use in the Payment Request API. See {{domxref("BasicCardRequest")}} and {{domxref("BasicCardResponse")}}.		No habilitado
+ (disponible desde la versión 56)		No habilitado
+ (disponible desde la versión 56)		No habilitado
+ (disponible desde la versión 56)		No habilitado
+ (disponible desde la versión 56)		dom.payments.request.enabled
Window.content only available to Chrome code
+ The proprietary {{domxref("Window.content")}} property is now only available to chrome (privileged) code, and not available to the web anymore ({{bug(864845)}}).		Habilitado
+ (desde la versión 57)		No habilitadoNo habilitadoNo habilitado 
Disabling {{domxref("Navigator.registerContentHandler()")}}
+ This API is associated with a number of issues., and in addition we are the only browser that implements it. We are intending to remove it completely in the future, but for the moment we are disabling it in non-release versions to see if we get any significant web compat reports back.		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		Habilitadodom.registerContentHandler.enabled
+ +

WebRTC

+ + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
TCP ICE candidates
+ ICE candidates that use TCP rather than UDP are considered during ICE negotiation.		 +

No habilitado
+ 41

+ +

Habilitado
+ 54

+ 		No habilitado
+ 41		No habilitado
+ 41		No habilitado
+ 41		media.peerconnection.ice.tcp
+ +

Developer Tools

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
Debugger rewrite in HTML5252No habilitadoNo habilitadodevtools.debugger.new-debugger-frontend
Console rewrite in HTML52No habilitadoNo habilitadoNo habilitadodevtools.webconsole.new-frontend-Habilitado
Experimental Performance tool options
+ Enables options in the UI for JIT optimizations, memory, etc.		41No habilitadoNo habilitadoNo habilitadodevtools.performance.ui.experimental
Layout side panel
+ The Layout side panel allows to inspect and manage different CSS layout types like CSS Grid Layout.		No habilitado
+ (disponible desde la versión 52)		No habilitado
+ (disponible desde la versión 52)		No habilitado
+ (disponible desde la versión 52)		No habilitado
+ (disponible desde la versión 52)		devtools.layoutview.enabled
+ +

Security

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox NightlyFirefox Developer EditionFirefox BetaFirefox ReleasePreference
TLS 1.3HabilitadoHabilitadoNo habilitadoNo habilitadosecurity.tls.version.max to 4
Block plain text requests from Flash plugins on encrypted pages
+ A pref has been added to treat mixed OBJECT_SUBREQUESTS as active content to mitigate MitM attacks due to plugins loading "risky" content. See {{bug(1190623)}} for more details.		Habilitado
+ (disponible desde la versión 59)		Habilitado
+ (disponible desde la versión 59)		Habilitado
+ (disponible desde la versión 59)		No habilitadosecurity.mixed_content.block_object_subrequest to true
{{domxref("SecurityPolicyViolationEvent")}}, and the securitypolicyviolation event
+ Allows developers to programmatically respond to CSP violations.		Habilitado
+ (disponible desde la versión 59)		Habilitado
+ (disponible desde la versión 59)		Habilitado
+ (disponible desde la versión 59)		No habilitadosecurity.csp.enable_violation_events
+

"Insecure connection" icon display for non-HTTPS sites
+ Firefox 59 has two new preferences, No habilitado by default, which when Habilitado cause a lock with a strike-through to appear in the address bar when a non-HTTPS site is loaded. This work is part of the preparation for moving to a completely HTTPS web, the idea being that in the near future insecure sites will be specially indicated, rather than secure sites.

+ 		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		No habilitado
+ (disponible desde la versión 59)		 +

security.insecure_connection_icon.enabled for non-private browsing

+ +

security.insecure_connection_icon.pbmode.enabled for private browsing

+
+

{{httpheader("Origin")}} header sent for non-CORS requests
+ To mitigate CSRF attacks, the Origin header should be sent with non-CORS requests unless they are GET or HEAD ({{bug(446344)}}). We currently only send Origin on CORS requests.

+ 		No habilitadoNo habilitadoNo habilitadoNo habilitadonetwork.http.sendOriginHeader
+ +

Consultar también

+ + diff --git a/files/es/mozilla/firefox/firefox_esr/index.html b/files/es/mozilla/firefox/firefox_esr/index.html new file mode 100644 index 0000000000..af8625e1c3 --- /dev/null +++ b/files/es/mozilla/firefox/firefox_esr/index.html @@ -0,0 +1,13 @@ +--- +title: Firefox ESR +slug: Mozilla/Firefox/Firefox_ESR +tags: + - Necesita revisión +translation_of: Mozilla/Firefox/Firefox_ESR +--- +
{{FirefoxSidebar}}
+ +

Firefox Extended Support Release (ESR) se basa en una versión oficial de Firefox para el escritorio para su uso por organizaciones que necesitan soporte extendido para implementaciones masivas. La diferencia de otros canales de lanzamiento, las ESR no se actualizan con nuevas características cada seis semanas. En su lugar, son compatibles durante alrededor de un año, actualizándose con importantes soluciones de seguridad o estabilidad. La versión actual de ESR es basa en Firefox 52 emitida el 7 de marzo de 2017. La próxima versión de ESR será el número 59.
+
+
+ Animamos firmemente a los usuarios de Firefox ESR que se inscriban en la lista de correo del grupo Enterprise Working Group (EWG).

diff --git a/files/es/mozilla/firefox/index.html b/files/es/mozilla/firefox/index.html new file mode 100644 index 0000000000..50b34f27e5 --- /dev/null +++ b/files/es/mozilla/firefox/index.html @@ -0,0 +1,73 @@ +--- +title: Firefox +slug: Mozilla/Firefox +tags: + - Firefox + - Mozilla + - Página de Llegada +translation_of: Mozilla/Firefox +--- +
{{FirefoxSidebar}}
+ +

Firefox es el popular navegador Web de Mozilla, disponible para múltiples plataformas incluyendo Windows, OS X, y Linux en las máquinas de escritorio así como en los dispositivos móviles basados en Android e iOS. Su amplia compatibilidad, su adaptación a las más recientes tecnologías Web y poderosas herramientas de desarrollo, hacen de Firefox la elección por excelencia para desarrolladores Web y también para usuarios finales.

+ +

Firefox es un proyecto de código abierto; la mayor parte del código lo aporta nuestra gran comunidad de voluntarios. Aquí aprenderás a contribuir al proyecto de Firefox y también encontrarás enlaces a información sobre la creación de complementos de Firefox, utilizando las herramientas de desarrollo de Firefox, y otros temas.

+ +
+

Aprende a crear complementos para FireAAAfox, cómo desarrollar y construir Firefox y cómo funciona Firefox desde dentro y sus subproyectos.

+
+ + + +

Firefox channels

+ +

Firefox está disponible en cinco canales.

+ +

Firefox Nightly

+ +

Cada noche, creamos Firefox a partir del más reciente código disponible en mozilla-central. Esta estructura es ideal para los desarrolladores de Firefox y para quienes quieran probar las últimas características de vanguardia mientras están aún en un desarrollo activo.

+ +

Descarga Firefox Nightly

+ +

Firefox Developer Edition

+ +

Esta es una versión de Firefox hecha a la medida de desarrolladores. Cada seis semanas, cogemos las características de Firefox Nightly que son lo suficientemente estables y creamos una nueva versión de Firefox Developer Edition. Además, añadimos algunas características adicionales que solo están disponibles en este canal.

+ +

Descubre más sobre Firefox Developer Edition.

+ +

Descarga Firefox Developer Edition

+ +

Firefox Beta

+ +

Después de pasar seis semanas en Firefox Developer Edition, elegimos las características que son lo suficientemente estables y creamos una nueva versión de Firefox Beta. La estructura de Firefox Beta builds está destinada especialmente a entusiastas que quieren probar el material destinado a convertirse en la siguiente versión de Firefox.

+ +

Descarga Firefox Beta

+ +

Firefox

+ +

Después de estabilizarse durante otras seis semanas en Beta, estamos listos para enviar las nuevas características a cientos de millones de usuarios en el lanzamiento de una nueva versión de Firefox.

+ +

Descarga Firefox

+ +

Firefox Versión de Soporte Extendida (ESR)

+ +

Firefox ESR es la edición de soporte a largo plazo de Firefox para escritorio para uso de grandes organizaciones, como escuelas, universidades, empresas y otras personas que necesitan un soporte extendido para implementaciones masivas.

+ +

Descubre más sobre Firefox Versión de Soporte Extendida.

+ +

Descarga Firefox ESR

+ +

Perfiles Firefox

+ +

Si sueles utilizar varios canales de Firefox—o simplemente varias configuraciones—, deberías leer cómo utilizar varios perfiles Firefox para que puedas adaptar a tus necesidades el Administrador de Perfiles de Firefox y otras herramientas de gestión de perfiles.

diff --git a/files/es/mozilla/firefox/multiprocess_firefox/index.html b/files/es/mozilla/firefox/multiprocess_firefox/index.html new file mode 100644 index 0000000000..139a345752 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/index.html @@ -0,0 +1,75 @@ +--- +title: Firefox multiproceso +slug: Mozilla/Firefox/Multiprocess_Firefox +translation_of: Mozilla/Firefox/Multiprocess_Firefox +--- +
{{FirefoxSidebar}}

En las versiones actuales de Firefox para escritorio, todo el navegador se ejecuta en un solo proceso del sistema operativo. Esto quiere decir que el código JavaScript que ejecuta la IU (interfaz de usuario) del navegador (también conocido como "código chrome") se ejecuta en el mismo proceso que el código de las página web (también conocido como "contenido" o "contenido web").
+
+ Las versiones futuras de Firefox ejecutarán la interfaz de usuario del navegador en un proceso separado del contenido web. En la primera etapa de esta arquitectura, todas las pestañas del navegador se ejecutarán en el mismo proceso y la IU del navegador en un proceso diferent. En futuras etapas, esperamos tener más de un proceso de contenido. El proyecto de Firefox multiproceso es llamado Electrolysis, en ocasiones abreviado como e10s.

+ +

Las páginas web normales no estarán afectadas por Firefox multiproceso. Quienes trabajen en Firefox en sí mismo y desarrolladores de complementos para Firefox estarán afectados si su código se basa en acceder al contenido web directamente.

+ +

En lugar de acceder al contenido web directamente, el código JavaScript deberá usar el administrador de mensajes para acceder al contenido. Para facilitar la transición hemos implementado contenedores de objetos de multiproceso y algunas capas de compatibilidad para complementos. Si eres un desarrollador de complementos y deseas saber cómo estrás afectado, revisa la guía para trabajar con Firefox multiproceso.

+ +
+
+
+
+
Repaso técnico
+
Una vista de alto nivel acerca de cómo se está implementando Firefox multiproceso.
+
Guía de compatibilidad para contenido web
+
Directrices y detalles acerca de problemas potenciales de compatiblidad en sitios web que podrían ocurrir debido a la transición. Tip: ¡No son muchos!
+
Glosario
+
Una referencia de la jerga usada en Firefox multiproceso.
+
Administrador de mensajes
+
Una guía completa a los objetos usados para comunicarse entre el código chrome y el contenido.
+
Complementos basados en el SDK
+
Cómo migrar complementos creados utilizando el SDK de complementos.
+
Dónde se carga cada URI
+
Una guía rápida a qué URIs - chrome:, about:, file:, resource: - se cargan en cada proceso.
+
+
+ +
+
+
Motivación
+
Por qué estamos implementando Firefox multiproceso: rendimiento, seguridad y estabilidad.
+
Guía para la migración de complementos
+
Si eres un desarollador de complementos, entérate cómo estás afectado y cómo actualizar tu código.
+
Contenedores de objetos multiproceso
+
Los contenedores de objetos multiproceso ayudan a la migración, dando al código chrome acceso síncrono al contenido.
+
Depurando procesos de firefox
+
Cómo depurar código en el proceso de contenido, incluyendo scripts de marco y proceso.
+
Selección de pestañas en Firefox multiproceso
+
Cómo funciona el cambio de pestañas en Firefox multiproceso.
+
+
+
+ +
+
+
+
+
Limitaciones de los scripts chrome
+
Prácticas que ya no funcionan en el código chrome, y cómo solucionarlas.
+
+
+ +
+
+
Limitaciones de los scripts de marco
+
Prácticas que no funcionarán en los scripts de marco, y qué hacer en su lugar.
+
+
+
+ +
+

Contáctanos

+ +

Entérate más acerca del proyecto, involúcrate o pregúntanos tus dudas.

+ + diff --git a/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html new file mode 100644 index 0000000000..5d3214a425 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/index.html @@ -0,0 +1,74 @@ +--- +title: Message manager +slug: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager +tags: + - API + - Guide + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager +--- +
{{FirefoxSidebar}}

Message managers provide a way for chrome-privileged JavaScript code to communicate across process boundaries. They are particularly useful for allowing chrome code, including the browser's code and extension's code, to access web content while the browser is running web content in a separate process.

+ +

These guides explain how to use message managers in multiprocess Firefox.

+ +

Note that none of this requires multiprocess Firefox: everything described here will work with single-process Firefox, so the same code will work on both variants.

+ +
+

Guides

+ +
+
+
+
Message manager overview
+
 
+
Frame script loading and lifetime
+
 
+
Communicating with frame scripts
+
 
+
Performance Best Practices
+
 
+
+
+ +
+
+
Frame script environment
+
 
+
Limitations of frame scripts
+
 
+
Process scripts
+
 
+
+
+
+ +
+

API reference

+ +
+
+
+
nsIFrameScriptLoader
+
 
+
nsIMessageListenerManager
+
 
+
nsIMessageBroadcaster
+
 
+
nsIMessageSender
+
 
+
+
+ +
+
+
nsISyncMessageSender
+
 
+
nsIContentFrameMessageManager
+
 
+
nsIProcessScriptLoader
+
 
+
+
+
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html new file mode 100644 index 0000000000..f6011c7836 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/message_manager/process_scripts/index.html @@ -0,0 +1,81 @@ +--- +title: Process scripts +slug: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager/Process_scripts +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Message_Manager/Process_scripts +--- +
{{FirefoxSidebar}}
+

Los scripts de proceso son nuevos en Firefox 38.

+
+ +
+

Si esta utilizando el addon sdk, puede utilizar el remote/parent módulo remoteRequire en su lugar.

+
+ +

Cuando necesite ejecutar código en el proceso de contenido para acceder al contenido web, debe utilizar secuencias de frame scripts. Sin embargo, un problema con los scripts es que se pueden cargar varias veces en el proceso de contenido, en varios ámbitos que están aislados unos de otros. Por ejemplo, si llama a la funcion loadFrameScript() del gestor de mensajes de script, entonces el script se cargará por separado en todas las pestañas abiertas. Esto puede causar un problema que las secuencias de scripts de trama están interactuando con un servicio global en el proceso de contenido.

+ +

Por ejemplo, en multiprocesos Firefox, si necesita usar nsIContentPolicy to register a content policy, you must do this in the content process. para registrar una política de contenido, debe hacerlo en el proceso de contenido. Pero si lo registra en una secuencia de frame script la secuencia de frame script se carga más de una vez, registrará la política de contenido más de una vez, lo que probablemente no es lo que pretende.

+ +

De forma similar, algunas notificaciones de observadores deben registrarse en el frame script, pero si lo hace en una secuencia de frame scrip, se cargara más de una vez, recibirá varias notificaciones, para ese evento.

+ +

La solución en estos casos es usar un script de proceso en lugar de un frame script.

+ +

You can load a process script by accessing a parent process message manager and calling its loadProcessScript() function. The following code uses the global parent process message manager, which will load the script into the the chrome process and any child processes:

+ +
// chrome code
+let ppmm = Cc["@mozilla.org/parentprocessmessagemanager;1"]
+  .getService(Ci.nsIProcessScriptLoader);
+ppmm.loadProcessScript("chrome://whatever/process-script.js", true);
+ppmm.addMessageListener("Hello", function(msg) { ... });
+ +

The process script's global is a child process message manager, which enables the process script to receive messages from the chrome side, and to send messages to the chrome side:

+ +
// process-script.js
+if (Services.appinfo.processType == Services.appinfo.PROCESS_TYPE_CONTENT) {
+  dump("Welcome to the process script in a content process");
+} else {
+  dump("Welcome to the process script in the main process");
+}
+
+// Message is sent using ContentProcessMessageManager
+sendAsyncMessage("Hello");
+ +

In this example, the dump() statement will run once in each content process as well as in the main process. This example also figures out whether it is running in the chrome or in a content process by looking at the process type in Services.appinfo.

+ +

In just about every respect, using process scripts is like using frame scripts:

+ + + +

Retrieving the content frame message manager for a content window

+ +

When an observer notification in a process script contains a content document or window it can be useful to not use talk through the child/parent process message managers but through the window's content frame message manager, e.g. if responses should be processed by a frame script instead of the process script.

+ +

This can be achieved by traversing the docshell tree up to the top window and then retrieving its content message manager, as follows:

+ +
function contentMMFromContentWindow(window) {
+  let tree = window.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDocShellTreeItem);
+  let top = tree.sameTypeRootTreeItem;
+  let iface = QueryInterface(Ci.nsIDocShell).QueryInterface(Ci.nsIInterfaceRequestor);
+  return iface.getInterface(Ci.nsIContentFrameMessageManager);
+}
+
+ +
+

This is intended for unprivileged pages running in a content process. Chrome-privileged pages or things running in the parent process may require special treatment.

+
+ +

If the above doesn't work try this:

+ +
function contentMMFromContentWindow_Method2(aContentWindow) {
+    return aContentWindow.QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIDocShell)
+                         .QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIContentFrameMessageManager);
+}
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html b/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html new file mode 100644 index 0000000000..0a4f0cb3e6 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/motivation/index.html @@ -0,0 +1,46 @@ +--- +title: Motivation +slug: Mozilla/Firefox/Multiprocess_Firefox/Motivation +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Motivation +--- +
{{FirefoxSidebar}}

There are three main reasons for making Firefox run content in a separate process: performance, security, and stability.

+ +

Performance

+ +

Most performance work at Mozilla over the last two years has focused on responsiveness of the browser. The goal is to reduce “jank”—those times when the browser seems to briefly freeze when loading a big page, typing in a form, or scrolling. Responsiveness tends to matter a lot more than throughput on the web today. Much of this work has been done as part of the Snappy project. The main focuses have been:

+ + + +

Much of the low-hanging fruit in these areas has already been picked. The remaining issues are difficult to fix. For example, JavaScript execution and layout happen on the main thread, and they block the event loop. Running these components on a separate thread is difficult because they access data, like the DOM, that are not thread-safe. As an alternative, we’ve considered allowing the event loop to run in the middle of JavaScript execution, but doing so would break a lot of assumptions made by other parts of Firefox (not to mention add-ons).

+ +

Running web content in a separate process is a nice alternative to these approaches. Like the threaded approach, Firefox is able to run its event loop while JavaScript and layout are running in a content process. But unlike threading, the UI code has no access to content DOM or or other content data structures, so there is no need for locking or thread-safety. The downside, of course, is that any code in the Firefox UI process that needs to access content data must do so explicitly through message passing.

+ +

We feel this tradeoff makes sense for a few reasons:

+ + + +

Security

+ +

Right now, if someone discovers an exploitable bug in Firefox, they’re able to take over users’ computers. There are a lot of techniques to mitigate this problem, but one of the most powerful is sandboxing. Technically, sandboxing doesn’t require multiple processes. However, a sandbox that covered single-process Firefox wouldn’t be very useful. Sandboxes are only able to prevent processes from performing actions that a well-behaved process would never do. Unfortunately, a well-behaved Firefox process (especially one with add-ons installed) needs access to much of the network and file system. Consequently, a sandbox for single-process Firefox couldn’t restrict much.

+ +

In multiprocess Firefox, content processes will be sandboxed. A well-behaved content process won’t access the filesystem directly; it will have to ask the main process to perform the request. At that time, the main process can verify that the request is safe and that it makes sense. Consequently, the sandbox for content processes can be quite restrictive. Our hope is that this arrangement will make it much harder to craft exploitable security holes for Firefox.

+ +

Stability

+ +

Currently, a crash in the code running a web page will take down the entire browser. With multiprocess Firefox, only the content process that crashed will be killed.

+ +
+

This page incorporates a lot of content from Bill McCloskey's blog post on multiprocess Firefox: http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/

+
+ +

 

diff --git a/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html b/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html new file mode 100644 index 0000000000..4f109bf795 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/pitfalls_for_add-on_developers/index.html @@ -0,0 +1,212 @@ +--- +title: Pitfalls for add-on developers +slug: Mozilla/Firefox/Multiprocess_Firefox/Pitfalls_for_add-on_developers +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Pitfalls_for_add-on_developers +--- +
{{FirefoxSidebar}}

Overview

+ +

This page lists patterns that add-on authors might be using that won't work, or will work differently, in multiprocess Firefox.

+ +

It's split into two sections: chrome process and content process.

+ +

Chrome process

+ +

The first section, chrome process, covers things that used to work in the chrome process that will no longer work in multiprocess Firefox. These are the sorts of things that will break an old add-on in multiprocess Firefox. The fix is generally some variant of "do that in a frame script loaded into the content process".

+ +

Compatibility shims

+ +

For many of the patterns described here we've implemented compatibility shims so the patterns still work. For example: whenever extensions try to access web content from the chrome process, the browser will return a Cross Process Object Wrapper that gives the chrome code synchronous access to the content.

+ +

You'll get the shims for your add-on by default, unless you set the multiprocessCompatible flag in your add-on's install manifest.

+ +

However, these shims are not a substitute for migrating extensions:

+ + + +

For each pattern we've noted:

+ + + +

Content process

+ +

However, some things that used to work in a chrome process will not work in the content process. The second section, content process, lists these sorts of things along with their mitigation.

+ +

Chrome process pitfalls

+ +

gBrowser.contentWindow, window.content...

+ +

Without the shim

+ +

All APIs in the chrome process that provide direct access to content objects will no longer work. For example:

+ +
// chrome code
+
+gBrowser.contentWindow;                    // null
+
+gBrowser.contentDocument;                  // null
+
+gBrowser.selectedBrowser.contentWindow;    // null
+
+window.content;                            // null
+
+content;                                   // null
+
+ +

With the shim

+ +

The shim will give you a CPOW for the content object in these situations.

+ +

To make the shim unnecessary: factor the code that needs to access content into a separate script, load that script into the content process as a frame script, and communicate between the chrome script and the frame script using the message-passing APIs. See the article on using the message manager.

+ +

nsIContentPolicy

+ +

Without the shim

+ +

Under multiprocess Firefox you can't use nsIContentPolicy in the chrome process, because it needs to touch web content.

+ +

With the shim

+ +

The shim enables you to add content policies in the chrome process. It transparently registers an nsIContentPolicy in the content process, whose shouldLoad just forwards to the chrome process. The content to check is forwarded as a CPOW. The chrome process then checks the content against the policy supplied by the add-on, and forwards the response back to the child to be enforced.

+ +

To make the shim unnecessary: define and register nsIContentPolicy inside a frame script.

+ +

Observers in the chrome process

+ +

Depending on the topic, you need to register observers in either the chrome process or in a frame script.

+ +

For most topics you need to register observers in the chrome process.

+ +

However, you must listen to content-document-global-created and document-element-inserted in a frame script. Observers for these topics get content objects as the aSubject argument to observe(), so notifications are not sent to the chrome process.

+ +

There is a shim that will forward these two topics to the chrome process, sending CPOWs as the aSubject argument.

+ +

HTTP requests

+ +

You can't observe HTTP requests in the content process. If you do, you'll get an error.
+
+ If you do so in the chrome process, it will mostly work. The subject for the observer notification will be an nsIHttpChannel as you would expect. A common pattern here is to use the notificationCallbacks property of the nsIHttpChannel to get the DOM window that initiated the load, like this:

+ +
observe: function (subject, topic, data) {
+  if (topic == "http-on-modify-request") {
+    var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+    var domWindow = httpChannel.notificationCallbacks.getInterface(Ci.nsIDOMWindow);
+  }
+}
+ +

Or this:

+ +
observe: function (subject, topic, data) {
+  if (topic == "http-on-modify-request") {
+    var httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+    var domWindow = httpChannel.notificationCallbacks.getInterface(Ci.nsILoadContext).associatedWindow;
+  }
+}
+ +

In multiprocess Firefox these patterns will no longer work: the getInterface call will fail.

+ +

In multiprocess Firefox, notificationCallbacks is a special object that tries to emulate the single-process notificationsCallbacks object as best it can. It will return a dummy nsILoadContext when asked, but any attempt to get a window out of it will fail.
+
+ There is an outstanding bug (bug 1108827) to implement a shim here, that will make notificationCallbacks a CPOW for the objects in the content process.

+ +

DOM Events

+ +

Without the shim

+ +

In multiprocess Firefox, if you want to register an event listener on some content DOM node, that needs to happen in the content process.

+ +

It used to be that if you registered a listener on the XUL <browser>  or <tab> element that hosted some DOM content, then events in the content would bubble up to the XUL and you could handle them there. This no longer happens in multiprocess Firefox.

+ +

With the shim

+ +

The shim intercepts chrome process code that adds listeners to XUL elements and sets up listeners in the content process, relaying the result back to the chrome process. The Event object itself is relayed to the chrome process as a CPOW.

+ +

To make the shim unnecessary: register event listeners on the global object inside a frame script. For example:

+ +
addEventListener("load", handler, true) // for example
+ +
If you need to contact the chrome process when that happens, send it a message.
+ +
 
+ +

Content process pitfalls

+ +

Many privileged APIs will just work in a content process. Anything that just manipulates data structures will just work. XHR and Workers will work.

+ +

File I/O

+ +

You should not write to or read from the disk from a frame script, in particular the profile directory. Even if this is possible, you should not do it and may expect that it could stop working at any time. File I/O should all be done in the chrome process. For example:

+ + + +

XUL and browser UI

+ +

Anything that tries to touch the browser UI or anything to do with XUL is likely to not work in the content process. For example:

+ + + +

Chrome windows

+ +

Anything that needs to use chrome windows will not work in the content process. For example:

+ + + +

Places API

+ +

The Places API can't be used inside a frame script. For example:

+ + + +

Observers in the content process

+ +

As noted in Observers in the chrome process, most observers should be registered in the chrome process and will not work in the content process. The exceptions are content-document-global-created and document-element-inserted , which must be registered in a frame script.

+ +

QI from content window to chrome window

+ +
There's a particular pattern often used to get from a content window to the associated chrome window. It looks something like this:
+ +
 
+ +
window.QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIWebNavigation)
+                         .QueryInterface(Ci.nsIDocShellTreeItem)
+                         .rootTreeItem
+                         .QueryInterface(Ci.nsIInterfaceRequestor)
+                         .getInterface(Ci.nsIDOMWindow);
+ +
This will no longer work. In the content process the root tree item is an nsITabChild, that cannot be converted to an nsIDOMWindow, so the second getInterface call here will fail.
+ +
 
+ +

If you want a chrome window: send a message from the content process using the message manager. The target property of the object passed into the message handler in the chrome process is the XUL <browser> receiving the message, and you can get the chrome window from that (Note: I'm not really sure how...).

+ +

nsIAboutModule

+ +

By default, custom about: pages registered using nsIAboutModule are loaded in the chrome process. This means that you can't access their content from the content process (via XHR, for example).

+ +

There is a shim for this, that makes the content of about: pages registered by the add-on transparently available in the content process.

+ +

To avoid the shim: if you need to access the content of your about page from the content process, you need to register the nsIAboutModule in the content process as well as the chrome process. By default, about: pages (except for a small whitelist) are loaded in the chrome process when browsed to from the AwesomeBar.

diff --git a/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html new file mode 100644 index 0000000000..083b13f1e0 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/remotepagemanager/index.html @@ -0,0 +1,127 @@ +--- +title: RemotePageManager +slug: Mozilla/Firefox/Multiprocess_Firefox/RemotePageManager +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/RemotePageManager +--- +
{{FirefoxSidebar}}

{{ gecko_minversion_header('39') }}

+ +

One of the challenges of converting Firefox features and add-ons to multiprocess Firefox involves in-content pages. These pages (like about:addons) display in a tab but for now still render in the main process. There can be many reasons for wanting to move these into the content process, particularly if the page interacts with web content in any way but more generally just to keep the main UI as responsive as possible.

+ +

This raises the problem of how the page communicates back to the main process to get information and trigger actions. Commonly this is done with a frame script listening for DOM events from inside the page, performing the necessary message passing and then passing results back to the page. However, this middleman approach has problems. The frame code is maintained separately from the page code leading to three different pieces of code handling behavior for the page. Add-ons also have to be careful to choose unique names for messages to avoid conflicting with other add-ons and Firefox code.

+ +

RemotePageManager is an API designed to simplify this. It acts as the middleman between code in the main process and code in the page without needing to write custom code in a frame script. Code in the main process registers URLs that it is interested in. Whenever a frame loads a page with that URL, a pseudo message manager is created to allow message passing between just that page and the code in the main process. Code running in the page itself can access the message manager directly without needing to use a frame script at all.

+ +

RemotePageManager

+ +

RemotePageManager is the low-level way to interact with in-content pages. It includes the following methods:

+ +
+
addRemotePageListener(url, callback)
+
Registers interest in a URL. Whenever a new page loads at that URL callback is called and passed the message channel to use to communicate with the page. Only one callback can be registered per URL.
+
removeRemotePageListener(url)
+
Unregisters interest in a URL. The callback passed above will not be called again.
+
+ +

RemotePages

+ +

RemotePages is a higher-level option. As well as the methods listed here it also has the message channel methods which will send messages to, and receive messages from, every page currently loaded at the URL.

+ +
+
RemotePages(url)
+
Creates a new RemotePages instance for a URL.
+
destroy()
+
Destroys the instance.
+
+ +

Message channel methods

+ +

All of these methods are available directly in the page, on RemotePages instances, or on the channel passed to callbacks registered with RemotePageManager.addRemotePageListener.

+ +
+
sendAsyncMessage(name, data)
+
Sends a named message to the other side of the channel. data is copied as a structured clone.
+
addMessageListener(name, listener)
+
Adds a listener for a named message. listener will be called when the other side of the channel sends a message for name. listener will be passed an object with the properties target, name, and data.
+
removeMessageListener(name, listener)
+
Removed a listener for a named message.
+
+ +

Special messages

+ +

As well as any messages that Firefox or add-on code sends through the message channels, some special messages will be sent. Generally any message name starting with "RemotePage:" should be considered reserved for future use.

+ +
+
RemotePage:Init
+
Sent to a RemotePages instance when a new page is loaded with the matching URL. The target property of the object passed to any listener is a message channel for just that page.
+
RemotePage:Load
+
Sent when the load event for a matching page in the content process is fired.
+
RemotePage.Unload
+
Sent when a matching page in the content process is unloaded.
+
+ +

Low level example

+ +

This example waits for a page to load and then passes it some information.

+ +
// code running in the main process somewhere
+Components.utils.import("resource://gre/modules/RemotePageManager.jsm");
+
+RemotePageManager.addRemotePageListener("about:foo", (channel) => {
+  // Wait for page load here to be sure the page has had chance to register for this message
+  channel.addMessageListener("RemotePage:Load", function() {
+    channel.sendAsyncMessage("MyMessage", { somedata: 42 });
+  });
+});
+
+ +

Here is the code that runs in the page. Note that it has direct access to addMessageListener (as well as the other message channel methods).

+ +
// code running in the content webpage
+addMessageListener("MyMessage", function(msg) {
+  alert(msg.data.somedata);
+});
+
+ +

High level example

+ +

The code above uses a callback that is called every time a page is loaded. In reality it is going to be more common for code in the main process to simply respond to requests from the page and want to update all pages at once. RemotePages is more suited to this:

+ +
// code running in the main process somewhere
+Components.utils.import("resource://gre/modules/Preferences.jsm");
+Components.utils.import("resource://gre/modules/RemotePageManager.jsm");
+
+let listener = new RemotePages("about:bar");
+
+// Listens to messages from all current and future pages
+listener.addMessageListener("GetLabel", ({ target }) => {
+  // target is the channel for just the page that sent this message
+  target.sendAsyncMessage("SetLabel", Preferences.get("extensions.label.text"));
+});
+
+Preferences.observe("extensions.label.text", (newLabel) => {
+  // Sends messages to all currently open pages
+  listener.sendAsyncMessage("SetLabel", newLabel);
+});
+
+listener.addMessageListener("ButtonClicked", () => {
+  // Do something here
+});
+
+ +
// code running in the content webpage
+var button = document.getElementById("button");
+var label = document.getElementById("label");
+
+sendAsyncMessage("GetLabel");
+addMessageListener("SetLabel", function(msg) {
+  label.textContent = msg.data;
+});
+
+function buttonClicked() {
+  sendAsyncMessage("ButtonClicked");
+}
+
+button.addEventListener("click", buttonClicked, false);
+
diff --git a/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html b/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html new file mode 100644 index 0000000000..255fe18315 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/tab_selection_in_multiprocess_firefox/index.html @@ -0,0 +1,23 @@ +--- +title: Tab selection in multiprocess Firefox +slug: Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Tab_selection_in_multiprocess_Firefox +--- +
{{FirefoxSidebar}}

In single-process Firefox, when the user switches tabs, this is a synchronous operation. The browser blocks while it loads content into the newly selected tab, then switches to that tab. It indicates that the tab is selected by setting the selected attribute on the XUL tab object. Code (including browser code, extensions, or themes) that wants to change the appearance of the selected tab can use the selected attribute to apply CSS for that tab.

+ +

In multiprocess Firefox, tab switching is asynchronous. When the user switches tabs, the chrome process sends a request to the content process to load the page into the newly selected tab. The function in the chrome process then returns immediately, so other code can run. Once the content process is ready, it sends a message back to the chrome process, which then switches tabs in the user interface.

+ +

There's also a timer in the chrome process: if the content process has not responded before the timer expires, then the browser switches tabs anyway, and just displays an empty tab containing a spinner, until the content process has finished loading the page. Currently the timer is set to 300 milliseconds.

+ +

There are, correspondingly, two attributes used to signal tab selection:

+ + + +

This means that code which wants to style the currently selected tab needs to use the visuallyselected attribute to do so. If it uses the selected attribute, then there will be a momentary disconnect in which the newly selected tab's style is updated, but the browser is still displaying the old tab's content.

+ + diff --git a/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html b/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html new file mode 100644 index 0000000000..bc743d1dfb --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/technical_overview/index.html @@ -0,0 +1,166 @@ +--- +title: Technical overview +slug: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview +--- +
{{FirefoxSidebar}}
+

This page is an edited extract from Bill McCloskey's blog post on multiprocess Firefox: http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/

+
+ +

At a very high level, multiprocess Firefox works as follows. The process that starts up when Firefox launches is called the parent process. Initially, this process works similarly to single-process Firefox: it opens a window displaying browser.xul, which contains all the principal UI elements for Firefox. Firefox has a flexible GUI toolkit called XUL that allows GUI elements to be declared and laid out declaratively, similar to web content. Just like web content, the Firefox UI has a window object, which has a document property, and this document contains all the XML elements from browser.xul. All the Firefox menus, toolbars, sidebars, and tabs are XML elements in this document. Each tab element contains a <browser> element to display web content.

+ +

The first place where multiprocess Firefox diverges from single-process Firefox is that each <browser> element has a remote="true" attribute. When such a browser element is added to the document, a new content process is started. This process is called a child process. An IPC channel is created that links the parent and child processes. Initially, the child displays about:blank, but the parent can send the child a command to navigate elsewhere.

+ +

Drawing

+ +

Somehow, displayed web content needs to get from the child process to the parent and then to the screen. Multiprocess Firefox depends on a new Firefox feature called off main thread compositing (OMTC). In brief, each Firefox window is broken into a series of layers, somewhat similar to layers in Photoshop. Each time Firefox draws, these layers are submitted to a compositor thread that clips and translates the layers and combines them together into a single image that is then drawn.

+ +

Layers are structured as a tree. The root layer of the tree is responsible for the entire Firefox window. This layer contains other layers, some of which are responsible for drawing the menus and tabs. One subtree displays all the web content. Web content itself may be broken into multiple layers, but they’re all rooted at a single “content” layer.

+ +

In multiprocess Firefox, the content layer subtree is actually a shim. Most of the time, it contains a placeholder node that simply keeps a reference to the IPC link with the child process. The content process retains the actual layer tree for web content. It builds and draws to this layer tree. When it’s done, it sends the structure of its layer tree to the parent process via IPC. Backing buffers are shared with the parent either through shared memory or GPU memory. References to this memory are sent as part of the layer tree. When the parent receives the layer tree, it removes its placeholder content node and replaces it with the actual tree from content. Then it composites and draws as normal. When it’s done, it puts the placeholder back.

+ +

The basic architecture of how OMTC works with multiple processes has existed for some time, since it is needed for Firefox OS. However, Matt Woodrow and David Anderson have done a lot of work to get everything working properly on Windows, Mac, and Linux. One of the big challenges for multiprocess Firefox will be getting OMTC enabled on all platforms. Right now, only Macs use it by default.

+ +

User input

+ +

Events in Firefox work the same way as they do on the web. Namely, there is a DOM tree for the entire window, and events are threaded through this tree in capture and bubbling phases. Imagine that the user clicks on a button on a web page. In single-process Firefox, the root DOM node of the Firefox window gets the first chance to process the event. Then, nodes lower down in the DOM tree get a chance. The event handling proceeds down through to the XUL <browser> element. At this point, nodes in the web page’s DOM tree are given a chance to handle the event, all the way down to the button. The bubble phase follows, running in the opposite order, all the way back up to the root node of the Firefox window.

+ +

With multiple processes, event handling works the same way until the <browser> element is hit. At that point, if the event hasn’t been handled yet, it gets sent to the child process by IPC, where handling starts at the root of the content DOM tree. The parent process then waits to run its bubbling phase until the content process has finished handling the event.

+ +

Inter-process communication

+ +

All IPC happens using the Chromium IPC libraries. Each child process has its own separate IPC link with the parent. Children cannot communicate directly with each other. To prevent deadlocks and to ensure responsiveness, the parent process is not allowed to sit around waiting for messages from the child. However, the child is allowed to block on messages from the parent.

+ +

Rather than directly sending packets of data over IPC as one might expect, we use code generation to make the process much nicer. The IPC protocol is defined in IPDL, which sort of stands for “inter-* protocol definition language”. A typical IPDL file is PNecko.ipdl. It defines a set messages and their parameters. Parameters are serialized and included in the message. To send a message M, C++ code just needs to call the method SendM. To receive the message, it implements the method RecvM.

+ +

IPDL is used in all the low-level C++ parts of Gecko where IPC is required. In many cases, IPC is just used to forward actions from the child to the parent. This is a common pattern in Gecko:

+ +
void AddHistoryEntry(param) {
+  if (XRE_GetProcessType() == GeckoProcessType_Content) {
+    // If we're in the child, ask the parent to do this for us.
+    SendAddHistoryEntry(param);
+    return;
+  }
+
+  // Actually add the history entry...
+}
+
+bool RecvAddHistoryEntry(param) {
+  // Got a message from the child. Do the work for it.
+  AddHistoryEntry(param);
+  return true;
+}
+
+ +

When AddHistoryEntry is called in the child, we detect that we’re inside the child process and send an IPC message to the parent. When the parent receives that message, it calls AddHistoryEntry on its side.

+ +

For a more realistic illustration, consider the Places database, which stores visited URLs for populating the awesome bar. Whenever the user visits a URL in the content process, we call this code. Notice the content process check followed by the SendVisitURI call and an immediate return. The message is received here; this code just calls VisitURI in the parent.

+ +

The code for IndexedDB, the places database, and HTTP connections all runs in the parent process, and they all use roughly the same proxying mechanism in the child.

+ +

Frame scripts

+ +

IPDL takes care of passing messages in C++, but much of Firefox is actually written in JavaScript. Instead of using IPDL directly, JavaScript code relies on the message manager to communicate between processes. To use the message manager in JS, you need to get hold of a message manager object. There is a global message manager, message managers for each Firefox window, and message managers for each <browser> element. A message manager can be used to load JS code into the child process and to exchange messages with it.

+ +

As a simple example, imagine that we want to be informed every time a load event triggers in web content. We’re not interested in any particular browser or window, so we use the global message manager. The basic process is as follows:

+ +
// Get the global message manager.
+let mm = Cc["@mozilla.org/globalmessagemanager;1"].
+         getService(Ci.nsIMessageListenerManager);
+
+// Wait for load event.
+mm.addMessageListener("GotLoadEvent", function (msg) {
+  dump("Received load event: " + msg.data.url + "\n");
+});
+
+// Load code into the child process to listen for the event.
+mm.loadFrameScript("chrome://content/content-script.js", true);
+
+ +

For this to work, we also need to have a file content-script.js:

+ +
// Listen for the load event.
+addEventListener("load", function (e) {
+  // Inform the parent process.
+  let docURL = content.document.documentURI;
+  sendAsyncMessage("GotLoadEvent", {url: docURL});
+}, false);
+
+ +

This file is called a frame script. When the loadFrameScript function call runs, the code for the script is run once for each <browser> element. This includes both remote browsers and regular ones. If we had used a per-window message manager, the code would only be run for the browser elements in that window. Any time a new browser element is added, the script is run automatically (this is the purpose of the true parameter to loadFrameScript). Since the script is run once per browser, it can access the browser’s window object and docshell via the content and docShell globals.

+ +

The great thing about frame scripts is that they work in both single-process and multiprocess Firefox. To learn more about the message manager, see the message manager guide.

+ +

Cross-process APIs

+ +

There are a lot of APIs in Firefox that cross between the parent and child processes. An example is the webNavigation property of XUL <browser> elements. The webNavigation property is an object that provides methods like loadURI, goBack, and goForward. These methods are called in the parent process, but the actions need to happen in the child. First I’ll cover how these methods work in single-process Firefox, and then I’ll describe how we adapted them for multiple processes.

+ +

The webNavigation property is defined using the XML Binding Language (XBL). XBL is a declarative language for customizing how XML elements work. Its syntax is a combination of XML and JavaScript. Firefox uses XBL extensively to customize XUL elements like <browser> and <tabbrowser>. The <browser> customizations reside in browser.xml. Here is how browser.webNavigation is defined:

+ +
<field name="_webNavigation">null</field>
+
+<property name="webNavigation" readonly="true">
+   <getter>
+   <![CDATA[
+     if (!this._webNavigation)
+       this._webNavigation = this.docShell.QueryInterface(Components.interfaces.nsIWebNavigation);
+     return this._webNavigation;
+   ]]>
+   </getter>
+</property>
+
+ +

This code is invoked whenever JavaScript code in Firefox accesses browser.webNavigation, where browser is some <browser> element. It checks if the result has already been cached in the browser._webNavigation field. If it hasn’t been cached, then it fetches the navigation object based off the browser’s docshell. The docshell is a Firefox-specific object that encapsulates a lot of functionality for loading new pages, navigating back and forth, and saving page history. In multiprocess Firefox, the docshell lives in the child process. Since the webNavigation accessor runs in the parent process, this.docShell above will just return null. As a consequence, this code will fail completely.

+ +

One way to fix this problem would be to create a fake docshell in C++ that could be returned. It would operate by sending IPDL messages to the real docshell in the child to get work done. We may eventually take this route in the future. We decided to do the message passing in JavaScript instead, since it’s easier and faster to prototype things there. Rather than change every docshell-using accessor to test if we’re using multiprocess browsing, we decided to create a new XBL binding that applies only to remote <browser> elements. It is called remote-browser.xml, and it extends the existing browser.xml binding.

+ +

The remote-browser.xml binding returns a JavaScript shim object whenever anyone uses browser.webNavigation or other similar objects. The shim object is implemented in its own JavaScript module. It uses the message manager to send messages like "WebNavigation:LoadURI" to a content script loaded by remote-browser.xml. The content script performs the actual action.

+ +

The shims we provide emulate their real counterparts imperfectly. They offer enough functionality to make Firefox work, but add-ons that use them may find them insufficient. I’ll discuss strategies for making add-ons work in more detail later.

+ +

Cross-process object wrappers

+ +

The message manager API does not allow the parent process to call sendSyncMessage; that is, the parent is not allowed to wait for a response from the child. It’s detrimental for the parent to wait on the child, since we don’t want the browser UI to be unresponsive because of slow content. However, converting Firefox code to be asynchronous (i.e., to use sendAsyncMessage instead) can sometimes be onerous. As an expedient, we’ve introduced a new primitive that allows code in the parent process to access objects in the child process synchronously.

+ +

These objects are called cross-process object wrappers, frequently abbreviated to CPOWs. They’re created using the message manager. Consider this example content script:

+ +
addEventListener("load", function (e) {
+  let doc = content.document;
+  sendAsyncMessage("GotLoadEvent", {}, {document: doc});
+}, false);
+
+ +

In this code, we want to be able to send a reference to the document to the parent process. We can’t use the second parameter to sendAsyncMessage to do this: that argument is converted to JSON before it is sent up. The optional third parameter allows us to send object references. Each property of this argument becomes accessible in the parent process as a CPOW. Here’s what the parent code might look like:

+ +
let mm = Cc["@mozilla.org/globalmessagemanager;1"].
+         getService(Ci.nsIMessageListenerManager);
+
+mm.addMessageListener("GotLoadEvent", function (msg) {
+  let uri = msg.objects.document.documentURI;
+  dump("Received load event: " + uri + "\n");
+});
+mm.loadFrameScript("chrome://content/content-script.js", true);
+
+ +

It’s important to realize that we’re send object references. The msg.objects.document object is only a wrapper. The access to its documentURI property sends a synchronous message down to the child asking for the value. The dump statement only happens after a reply has come back from the child.

+ +

Because every property access sends a message, CPOWs can be slow to use. There is no caching, so 1,000 accesses to the same property will send 1,000 messages.

+ +

Another problem with CPOWs is that they violate some assumptions people might have about message ordering. Consider this code:

+ +
mm.addMessageListener("GotLoadEvent", function (msg) {
+  mm.sendAsyncMessage("ChangeDocumentURI", {newURI: "hello.com"});
+  let uri = msg.objects.document.documentURI;
+  dump("Received load event: " + uri + "\n");
+});
+
+ +

This code sends a message asking the child to change the current document URI. Then it accesses the current document URI via a CPOW. You might expect the value of uri to come back as "hello.com". But it might not. In order to avoid deadlocks, CPOW messages can bypass normal messages and be processed first. It’s possible that the request for the documentURI property will be processed before the "ChangeDocumentURI" message, in which case uri will have some other value.

+ +

For this reason, it’s best not to mix CPOWs with normal message manager messages. It’s also a bad idea to use CPOWs for anything security-related, since you may not get results that are consistent with surrounding code that might use the message manager.

+ +

Despite these problems, we’ve found CPOWs to be useful for converting certain parts of Firefox to be multiprocess-compatible. It’s best to use them in cases where users are less likely to notice poor responsiveness. As an example, we use CPOWs to implement the context menu that pops up when users right-click on content elements. Whether this code is asynchronous or synchronous, the menu cannot be displayed until content has responded with data about the element that has been clicked. The user is unlikely to notice if, for example, tab animations don’t run while waiting for the menu to pop up. Their only concern is for the menu to come up as quickly as possible, which is entirely gated on the response time of the content process. For this reason, we chose to use CPOWs, since they’re easier than converting the code to be asynchronous.

+ +

It’s possible that CPOWs will be phased out in the future. Asynchronous messaging using the message manager gives a user experience that is at least as good as, and often strictly better than, CPOWs. We strongly recommend that people use the message manager over CPOWs when possible. Nevertheless, CPOWs are sometimes useful.

diff --git a/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html b/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html new file mode 100644 index 0000000000..fe2917686b --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/types_of_message_manager/index.html @@ -0,0 +1,179 @@ +--- +title: Message manager overview +slug: Mozilla/Firefox/Multiprocess_Firefox/Types_of_message_manager +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Types_of_message_manager +--- +
{{FirefoxSidebar}}

In the initial version of multiprocess Firefox there are two processes:

+ + + +

Message managers are designed to enable code in one process to communicate with code in a different process. At the top level, there are two different sorts of message managers:

+ + + +

Frame message managers

+ +

In multiprocess Firefox, when chrome code needs to interact with web content, it needs to:

+ + + +
+

Some older articles on multiprocess Firefox and the message manager might refer to "content scripts" instead of "frame scripts", but this usage is deprecated because the Add-on SDK uses "content script" to refer to a similar but different kind of script.

+
+ +

There are three different subtypes of frame message manager: the global message manager, the window message manager, and the browser message manager. All three enable chrome code to:

+ + + +
+

Note that in this context, "browser" refers to the XUL <browser> object, which is a frame that hosts a single Web document. It does not refer to the more general sense of a Web browser.

+
+ +

Global message manager

+ +

The global message manager operates on every <browser>  (that is, every open content tab).

+ + + +

It's a ChromeMessageBroadcaster object, which implements the following interfaces:

+ + + +

You can access the global message manager like this:

+ +
// chrome script
+let globalMM = Cc["@mozilla.org/globalmessagemanager;1"]
+  .getService(Ci.nsIMessageListenerManager);
+ +

Window message manager

+ +

The window message manager is associated with a specific browser window, and operates on every <browser> (that is, every content tab) loaded into that window:

+ + + +

It's a ChromeMessageBroadcaster object, which implements the following interfaces:

+ + + +

The window message manager can be accessed as a property of the browser window:

+ +
// chrome script
+let windowMM = window.messageManager;
+ +

Browser message manager

+ +

The browser message manager is specific to a single XUL <browser> element (which essentially corresponds to a single tab):

+ + + +

You can mix and match: so for example, you could load a script into every <browser> using the global message manager, but then send a message to the script instance loaded into a specific <browser> using the browser message manager.

+ +

It's a ChromeMessageSender object, which implements the following interfaces:

+ + + +

The browser message manager can be accessed as a property of the XUL <browser> element:

+ +
// chrome script
+let browserMM = gBrowser.selectedBrowser.messageManager;
+ +

Process message managers

+ +

Process message managers correspond to process boundaries, and enable code running in different processes to communicate. Multiprocess Firefox has the concept of:

+ + + +

For practical purposes, in multiprocess Firefox the parent process is the chrome process, and child processes are content processes. 

+ +

In each child process, there's a single child process message manager (CPMM). For each child process message manager, there's a parent process message manager (PPMM) in the parent process. There's also a single global parent process message manager (GPPMM) in the parent process, that provides access to all the parent process message managers:

+ +

+ +

 

+ +

With the GPPMM, you can broadcast messages to all CPMMs. With a PPMM, you can send a message to its corresponding CPMM. With a CPMM, you can send messages to the parent process: these messages are received first by the corresponding PPMM, then by the GPPMM.

+ +

From Firefox 38 onwards, you can also use a parent process message manager to load a script into a child process. This is the recommended way to load a script that executes just once per child process, which is something you might want to do if you are interacting with some global service (for example, adding listeners to observer notifications or registering components).

+ +

Accessing process message managers

+ +

You can access the global parent process manager with code like this:

+ +
// parent process
+let parentProcessMessageManager = Cc["@mozilla.org/parentprocessmessagemanager;1"]
+                                  .getService(Ci.nsIMessageBroadcaster);
+ +

You can also access it as the ppmm property of Services.jsm.

+ +
// child process script
+let childProcessMessageManager = Cc["@mozilla.org/childprocessmessagemanager;1"]
+                                 .getService(Ci.nsISyncMessageSender);
+ +

Parent process message manager

+ +

The parent process message manager lives in the

+ +

implements

+ + + +

 

+ +

Child process message manager

+ +

implements

+ + + +

Loading scripts per child process

+ +

Since the process message managers do not support script loading the only way to implement per-child process code is to use a frame script which imports a custom javascript module (JSM). Since javascript modules are singletons they will only be executed once per process even when they are loaded in multiple frame scripts.
+ The JSM can then use the child process message manager to exchange messages with the parent process message manager.

+ +

This can be useful for addons to register categories, observers and components in child processes.

diff --git a/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html b/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html new file mode 100644 index 0000000000..3089e24000 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html @@ -0,0 +1,28 @@ +--- +title: Web content compatibility +slug: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility +--- +
{{FirefoxSidebar}}

While the introduction of multi-process capabilities to Firefox should be seamless and invisible to Web content, there are some exceptions and subtle changes from past behavior. This article discusses the known differences you may encounter.

+ +

Events

+ +

Here you'll find information about events whose behaviors have changed due to multiprocess Firefox's implementation.

+ +

No bubbling of events from <option> to <select>

+ +

Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <select> element is displayed as a drop-down list. This behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1.

+ +

Rather than watching <option> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.

+ +

See also

+ + diff --git a/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html b/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html new file mode 100644 index 0000000000..7f9ee69755 --- /dev/null +++ b/files/es/mozilla/firefox/multiprocess_firefox/which_uris_load_where/index.html @@ -0,0 +1,61 @@ +--- +title: Which URIs load where +slug: Mozilla/Firefox/Multiprocess_Firefox/Which_URIs_load_where +tags: + - Necesita traducción +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Which_URIs_load_where +--- +
{{FirefoxSidebar}}

Based initially on the page's URI scheme, the browser can decide whether to load a page in the chrome process or a content process. For some schemes, you can change the default behavior.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SchemeBehavior
about: +

By default, about: pages are always loaded in the chrome process. However, when you register a new about: page, you can change this default.

+ +

Two new flags are defined in nsIAboutModule:

+ +
    +
  • URI_CAN_LOAD_IN_CHILD: the page will be loaded in the same process as the browser that has loaded it.
    • +
  • URI_MUST_LOAD_IN_CHILD: the page will always be loaded in a child process.
    • +
+ +

To use one of these flags, return it from your implementation of getURIFlags in the code that registers the about: URI.

+ +

If you use these flags, you must register the about page in the framescript for each tab. If you do not set multiprocessCompatible to true in your install.rdf then shims will be used. But the e10s shims will be deprecated soon. Read more here - Bug 1257201.

+
chrome: +

By default, chrome: pages are always loaded in the chrome process. However, when you register a new chrome: page, you can change this default.

+ +

Two new flags are defined in the chrome.manifest file:

+ +
    +
  • remoteenabled: the page will be loaded in the same process as the browser that has loaded it.
    • +
  • remoterequired: the page will always be loaded in a child process.
    • +
+
file: +

Always loaded in a content process.

+ +

Note: This does not mean file: URIs can be used freely by code in content processes. Sandboxing may blacklist particular directories and future changes may restrict file: URIs to a separate content process, isolated from regular web content. See bug 1187099 how this can affect addons attempting to load files from the profile directory.

+
resource:Always loaded in a content process.
diff --git a/files/es/mozilla/firefox/privacy/index.html b/files/es/mozilla/firefox/privacy/index.html new file mode 100644 index 0000000000..c6a9e69b09 --- /dev/null +++ b/files/es/mozilla/firefox/privacy/index.html @@ -0,0 +1,9 @@ +--- +title: Privacy +slug: Mozilla/Firefox/Privacy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Privacy +--- +
{{FirefoxSidebar}}

{{ ListSubpages () }}

diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html new file mode 100644 index 0000000000..a66c128f8f --- /dev/null +++ b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/cookieblockedtracker/index.html @@ -0,0 +1,97 @@ +--- +title: 'Blocked: Storage access requests from trackers' +slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors/CookieBlockedTracker +--- +

Mensaje

+ +

Firefox:

+ +
 CookieBlockedTracker = La solicitud de acceso a cookies o almacenamiento en "X" se bloqueó porque provenía de un rastreador y el bloqueo de contenido está habilitado.
+
+ +

¿Qué salió mal?

+ +

Se bloqueó una solicitud de acceso a cookies o almacenamiento porque el navegador la identificó como proveniente de un rastreador y el bloqueo de contenido está habilitado .

+ +

El permiso puede ser cambiado o eliminado por:

+ + + +

If the blocked resource doesn't need authentication, you can fix the warning message by adding a crossorigin="anonymous" attribute to the relevant element.

+ +

See also

+ + + + + +
+
+

Traducción en Español:

+
+ +
¿Necesitas ayuda? • Guía editorial • Guía de estilo
+ +
+
+
+ +
Autoguardado activado.
+
+ +
+
+
+ + +
+
+
+
+
+
+
diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html new file mode 100644 index 0000000000..e34540eb06 --- /dev/null +++ b/files/es/mozilla/firefox/privacy/storage_access_policy/errors/index.html @@ -0,0 +1,24 @@ +--- +title: Errors +slug: Mozilla/Firefox/Privacy/Storage_access_policy/Errors +tags: + - Cookies + - Errors + - NeedsTranslation + - Storage + - TopicStub + - storage access policy +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy/Errors +--- +
{{FirefoxSidebar}}
+ +

This page lists the errors that can be raised due to Firefox's anti-tracking functionality, governed by the Storage access policy. You can find further information about them by clicking on the links below:

+ +

A request to access cookies or storage was blocked because

+ + diff --git a/files/es/mozilla/firefox/privacy/storage_access_policy/index.html b/files/es/mozilla/firefox/privacy/storage_access_policy/index.html new file mode 100644 index 0000000000..14d79a009c --- /dev/null +++ b/files/es/mozilla/firefox/privacy/storage_access_policy/index.html @@ -0,0 +1,267 @@ +--- +title: 'Storage access policy: Block cookies from trackers' +slug: Mozilla/Firefox/Privacy/Storage_access_policy +tags: + - NeedsTranslation + - Privacy + - TopicStub + - storage access policy + - tracking protection +translation_of: Mozilla/Firefox/Privacy/Storage_access_policy +--- +
{{FirefoxSidebar}}
+ +

Firefox includes a new storage access policy that blocks cookies and other site data from third-party tracking resources. This new policy is designed as an alternative to the current policies, which have been available in Firefox for many years. The new policy protects against cross-site tracking while minimizing the site breakage associated with traditional cookie blocking. This article explains how the new policy works and how you can test it.

+ +

Testing in Firefox

+ +

You can test how your website works under the new policy in Firefox version 63+. Those who want to test the absolute newest version of the policy can download Firefox Nightly, but note that Nightly may include versions of the policy that end up changing before they reach our Release users. You can enable it through the “Content Blocking” menu in the Control Center in Firefox:

+ + + +

As this is an experimental policy, it will likely change as we discover site breakage and fix bugs. We’ll keep this page updated with the newest information.

+ +

Report Broken Sites

+ +

If you find a website broken as a result of this change, file a bug under the Tracking Protection component within the Firefox product on Bugzilla. Alternatively you can report a broken sites directly in Firefox by clicking "Report a Problem" in the Content Blocking section of the Control Center.

+ +

diagram showing the report a problem button within the Content Blocking section of the Control Center

+ +

Tracking protection explained

+ +

How does Firefox determine which resources are tracking resources?

+ +

Firefox uses the Tracking Protection list to determine which resources are tracking resources. The Tracking Protection list is maintained by Disconnect. When the list is applied in Firefox, we make two important changes:

+ + + +

Firefox uses the built-in Tracking Protection URL classifier to determine which resources match the tracking protection list. Domains are matched against the list in accordance with the SafeBrowsing v4 specification. Specifically, we check the exact hostname of the resource against the list, as well as the last four hostnames formed by starting with the last five components and successively removing the leading component. Consider the following examples:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Hostname on the listHostname of resourceMatched
example.comexample.comYes
example.coma.b.example.comYes
blah.example.comexample.comNo
a.b.example.comc.d.example.comNo
blah.example.comfoo.blah.example.comYes
+ +

What does the storage access policy block?

+ +

The storage access policy blocks resources identified as trackers from accessing their cookies and other site storage when they are loaded in a third-party context. This prevents those resources from retrieving tracking identifiers stored in cookies or site storage and using them to identify users across visits to multiple first parties. Specifically, Firefox does this by imposing the following restrictions:

+ +

Cookies:

+ + + +

DOM Storage:

+ + + +

Messaging and Workers:

+ + + +

DOM Cache:

+ + + +

Browser caches:

+ + + +

What is not blocked by the policy?

+ +
    +
  1. This policy does not currently restrict third-party storage access for resources that are not classified as tracking resources. We may choose to apply additional restrictions to third-party storage access in the future.
    2. +
  2. The restrictions applied by the policy will not prevent third-party scripts classified as tracking resources from accessing storage in the main context of the page. These scripts can continue to use storage scoped to the top-level origin.
    3. +
  3. Origins classified as trackers will have access to their own storage when they are loaded in a first-party context.
    4. +
  4. Cross-origin resources loaded from the same eTLD+1 as the top-level context will still have access to their storage.
    5. +
  5. Origins normally classified as trackers will not be blocked if the top-level page origin is determined to be from the same organization as them.
    6. +
+ +

Storage access grants

+ +

In order to improve web compatibility and permit third-party integrations that require storage access, Firefox will grant storage access scoped to the first party for a particular third-party origin as described in this section. Currently, Firefox includes some web compatibility heuristics that grant storage access to third-party resources classified as trackers when a user interacts with those third parties. We do this when we expect that not granting access would cause the web page to break. We also support an initial implementation of the Storage Access API, through which embedded {{htmlelement("iframe")}}s can request storage access by calling {{domxref("Document.requestStorageAccess()")}}. Although both of these approaches provide the same level of storage access, we recommend third parties switch to using the Storage Access API in order to guarantee their access to storage.

+ +

Automatic storage access upon interaction

+ +

In order to improve web compatibility, Firefox currently includes some heuristics to grant storage access automatically to third parties that receive user interaction. These heuristics are intended to allow some third-party integrations that are common on the web to continue to function. They are intended to be temporary and will be removed in a future version of Firefox. They should not be relied upon for current and future web development.

+ +

Third-party storage access may be granted to resources that have been classified as tracking resources when a user gesture triggers a pop-up window that has opener access to the originating document. When that occurs, there are two possible ways a third-party origin can be granted access:

+ + + +

Scope of storage access

+ +

When storage access is granted, it is scoped to the origin of the opener document or subdomains of that origin. Access that is granted on the subdomain of an origin does not extend to the top-level origin. As an example, if a resource from tracker.example is granted storage access on foo.example.com, then tracker.example will be able to access its cookies on bar.foo.example.com but not example.com. Instead, if tracker.example were granted access on example.com it would be able to access its storage on bar.foo.example.com, foo.example.com, and example.com.

+ +

When storage access is granted to tracker.example on example.com, all resources loaded from tracker.example on any top-level document loaded from example.com are immediately given storage access. This includes all resources loaded in the main context of the page, embedded <iframe>s, and resources loaded within embedded <iframe>s. Storage access is not extended to other resources loaded on example.com (e.g. other-tracker.example), nor to other first parties on which tracker.example is embedded (e.g. example.org).

+ +

Storage access grants extend into the first level of nested contexts, but no further. This means that <iframe>s embedded in the main context of the page and loaded from a domain classified as a tracker will have full access to all storage locations accessible through JavaScript. Similarly, requests for resources loaded in <iframe>s embedded in the main context of the page will have access to HTTP cookies. However, further nested contexts, including but not limited to those from the origin classified as a tracker, will not be granted storage access.

+ +

Consider the following embedding scenarios on a top-level page loaded from example.com on which tracker.example has been granted storage access.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Embeddingtracker.example resource storage access
An image is loaded from tracker.example and embedded in the main context of example.com.HTTP: Yes
+ JS: N/A
example.com embeds an <iframe> from example.org. That <iframe> goes on to load an image from tracker.example.HTTP: Yes
+ JS: N/A
example.com embeds an <iframe> from example.org. That <iframe> goes on to embed an <iframe> from tracker.example.HTTP: Yes
+ JS: No
example.com embeds an <iframe> from tracker.example.HTTP: Yes
+ JS: Yes
example.com embeds an <iframe> from example.com (same origin). The nested <iframe> embeds an <iframe> from tracker.example.HTTP: Yes
+ JS: No
+ +

Storage access expiration

+ +

The storage access grant expires after 30 days. Domains classified as tracking resources may be granted third-party storage access on multiple first parties, and the storage permission for each party expires independently. The above heuristics will also serve to extend the lifetime of a third-party storage permission on origins that have already been granted access.  Each time the heuristic is activated, or a success call to the Storage Access API is made, the pre-existing storage access expiration will be extended by 30 days, counting from the time the previous access was granted.

+ +

Please note that in the future we expect to make changes to how long storage access will remain valid for.  As mentioned before, the way to know that you will be able to use storage as a third-party going forward will be using the Storage Access API.

+ +

Debugging

+ +

We encourage site owners to test their sites, particularly those that rely on third-party content integrations. We’ve added several new features to Firefox to make testing easier.

+ +

Developer Tools notifications

+ +

The Network Monitor in Firefox Developer Tools now includes an indicator for all resource requests that have been classified as tracking resources. This indicator is shown as a shield icon in the domain column. In the sample image below, trackertest.org is classified as a tracking resource, while the request to example.com is not.

+ +

network requests in Firefox devtools indicating which ones are tracking resources with a small shield icon

+ +

Adding custom domains to the Tracking Protection list

+ +

Curious how things will work if a third-party domain on your site were classified as a tracker? We’ve added a preference that allows you to add custom domains to the Tracking Protection URL classifier. To do so:

+ +
    +
  1. Type about:config in your address bar. If you are presented with a page that warns you "This may void your warranty!", click "I accept the risk!"
    2. +
  2. Right click on the next page and click "New" > "String".
    3. +
  3. For the preference name enter "urlclassifier.trackingAnnotationTable.testEntries".
    4. +
  4. For the preference value enter comma separated origins that you’d like to have classified as trackers. E.g. "example.net,example.org".
    5. +
+ +
+

Warning: Be sure to remove these entries after you have finished testing.

+
+ +

FAQ

+ +

This cookie policy has the potential to lead to site breakage, but has been designed to allow common third-party integrations to continue to work while preventing cross-site tracking. In this section we describe the functionality you can expect in different integration scenarios.

+ +

Will this storage access policy block ads from displaying on my website?

+ +

No — this feature only restricts access to cookies and site data that can be used to track users across websites. Blocking tracking identifiers does not prevent the display of advertisements.

+ +

I use a third-party analytics service that is classified as a tracker. Will I still receive analytics data?

+ +

This depends on how the third-party analytics service is implemented. Third-party analytics providers will no longer be able to user their third-party storage to collect data. This means that providers using cookies which are scoped to their third-party domain, or local storage and other site data stored under their origin, will no longer have access to those identifiers across other websites.

+ +

If these services are embedded into the main context of the page, they can continue to use first-party cookies and site storage to track users across page visits on that specific first-party domain.

+ +

I use third-party services for social login, like, and share button integration. Will my users still be able to make use of these services?

+ +

This depends on how the social integration is implemented. We expect that many of the popular social integrations will continue to function as they do under Firefox’s current cookie policy with some minor differences in the user experience.

+ +

A social content provider that is classified as a tracker will not have access to their third-party cookies when the user first visits a new first party. Thus, the user may appear logged out to the service despite being logged in when they visit the provider’s website directly. Depending on the type of integration, the user may have to take some action to interact with the social content provider before the provider is given access to their cookies. For example:

+ + + +

After these interactions, the provider will receive third-party storage access if they prompt the user in a way that is captured by the storage access activation heuristics described above. These providers should consider switching to explicitly request storage access through the Storage Access API as soon as possible. An initial implementation of this API is currently available in Nightly.

+ +

 

+ +

I use third-party pixels and other tools to measure the effectiveness of my ad campaigns. Will I still be able to measure the conversion rate of my ads?

+ +

This depends on how the third party has implemented the measurement tool, but generally ad conversion measurement will be more difficult. Consider the following examples:

+ +
    +
  1. You run an ad on a social media website that is seen several times by a user, but never clicked. That user later visits your website, which includes a conversion tracking tag from the same social media website. This type of conversion is often referred to as a “view-through conversion.” Since the social media website does not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that most view-through conversion tracking techniques will no longer work, including those offered by display networks.
    2. +
  2. You run an ad on a display network or social media website that is clicked by a user. That user lands on your website, which includes a conversion tracking tag from the same website that displayed your ad. This type of conversion is often referred to as a “click-through conversion.” Since the social media site or display network will not have access to their third-party storage, they will not recognize the user as the same user that saw the advertisements on their website and the conversion will not be tracked. We expect that this version of click-through conversion will no longer work.
    3. +
  3. You run an ad that appears on a social media website. A user clicks on your advertisement and is taken to a landing page that contains a conversion tracking tag from the third-party network. On the social media website, the network annotates the advertisement landing page URL with a query parameter that signals that the visit was the result of a click on an advertisement. On your website, the display network’s tag checks the URL query parameters and saves any ad tracking parameters to first-party storage. If a user later completes a conversion event, the network’s tag checks first-party storage to determine which click (or clicks) was responsible for the visit. We expect that click-through conversion implemented in this way will continue to work.
    4. +
+ +

 

+ +

 

diff --git a/files/es/mozilla/firefox/privacy/tracking_protection/index.html b/files/es/mozilla/firefox/privacy/tracking_protection/index.html new file mode 100644 index 0000000000..50dfda6984 --- /dev/null +++ b/files/es/mozilla/firefox/privacy/tracking_protection/index.html @@ -0,0 +1,80 @@ +--- +title: Protección contra el rastreo +slug: Mozilla/Firefox/Privacy/Tracking_Protection +tags: + - bloqueo + - navegación privada + - privacidad + - rastreo + - seguimiento +translation_of: Mozilla/Firefox/Privacy/Tracking_Protection +--- +
{{FirefoxSidebar}}

¿Qué es la protección contra el rastreo?

+ +

A partir de la versión 42, Firefox para PC y Firefox para Android cuentan con protección contra el rastreo integrada. En las ventanas de Navegación Privada (o pestañas privadas, en Firefox para Android), Firefox bloqueará el contenido de dominios que rastrean la navegación de los usuarios entre diferentes sitios.

+ +

A veces, algunos contenidos bloqueados son parte de la estructura de la página, y los usuarios notarán problemas de disposición de elementos cuando Firefox realice estos bloqueos. Otras veces los usuarios no notarán nada, si la estructura de la página está diseñada de tal manera que los espacios vacíos dejados por los elementos bloqueados los ocupen otros contenidos.

+ +

Cuando Firefox bloquee contenido, registrará un mensaje como el siguiente en la consola web:

+ +
The resource at "http://some/url" was blocked because tracking protection is enabled.
+ +

Nótese que en Firefox para Android uno puede acceder a la salida de la consola usando el depurador remoto.

+ +

La interfaz de usuario de Firefox indica a los usuarios cuándo se ha producido un bloqueo de contenido y les permite desbloquearlo en esa sesión. Si lo desean, también pueden desactivar completamente la protección contra el rastreo. Descubre más en este artículo.

+ +

¿Cómo elige Firefox qué bloquear?

+ +

El contenido se bloquea en base al dominio desde el que se carga.

+ +

Firefox se lanza junto con una lista de sitios en los que se ha detectado actividades de rastreo entre diferentes sitios web. Cuando la protección está activada, Firefox bloqueará el contenido de todos los sitios que se encuentran en esa lista.

+ +

Por norma general,, los sitios que hacen este tipo de rastreo son analíticos y de publicidad de terceras partes.

+ +

¿Qué significa esto para tu sitio?

+ +

Lo más común es que cuando la protección contra rastreo esté activada:

+ + + +

Lo menos común es que si otras partes de tu sitio dependen de la carga de estos rastreadores, entonces estas partes no funcionarán cuando la protección esté habilitada. Por ejemplo, si tu sitio incluye una llamada (callback) que se ejecuta cuando se carga el contenido de un sitio que rastrea, entonces no se ejecutará esa llamada.

+ +

Por ejemplo, no deberías usar Google Analytics de la siguiente forma:

+ +
<a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);">Visit example.com</a>
+<script>
+function trackLink(url,event) {
+    event.preventDefault();
+    ga('send', 'event', 'outbound', 'click', url, {
+     'transport': 'beacon',
+     'hitCallback': function() {
+       document.location = url;
+     }
+   });
+}
+</script>
+ +

En cambio, deberías tener cuenta la posibilidad de que no se cargue Google Analytics. Para ello, comprueba si se ha iniciado el objeto ga:

+ +
<a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);">Visit example.com</a>
+<script>
+function trackLink(url,event) {
+    event.preventDefault();
+    if (window.ga && ga.loaded) {
+         ga('send', 'event', 'outbound', 'click', url, {
+         'transport': 'beacon',
+         'hitCallback': function() { document.location = url; }
+       });
+    } else {
+        document.location = url;
+    }
+}
+</script>
+
+ +

Encontrarás más información sobre esta técnica en este artículo (en inglés).

+ +

Nótese que, de cualquier manera, la dependencia de terceras partes no es una buena práctica, ya que implica que tu sitio no funcione si la tercera parte va lenta o es inaccesible, o si un complemento bloquea ese elemento rastreador.

diff --git a/files/es/mozilla/firefox/releases/30/index.html b/files/es/mozilla/firefox/releases/30/index.html new file mode 100644 index 0000000000..01c5be6cda --- /dev/null +++ b/files/es/mozilla/firefox/releases/30/index.html @@ -0,0 +1,92 @@ +--- +title: Firefox 30 for developers +slug: Mozilla/Firefox/Releases/30 +translation_of: Mozilla/Firefox/Releases/30 +--- +
{{FirefoxSidebar}}

Want to help document Firefox 30? See the list of bugs that need to be written about and pitch in!

+ +

Cambios para los Desarrolladores Web

+ +

Herramientas para Desarrolladores

+ + + +

CSS

+ + + +

HTML

+ +

Sin cambios.

+ +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ + + +

MathML

+ +

No change.

+ +

SVG

+ + + +

Audio/Video

+ + + +

Security

+ +

No change.

+ +

Changes for add-on and Mozilla developers

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('29')}}

diff --git a/files/es/mozilla/firefox/releases/50/index.html b/files/es/mozilla/firefox/releases/50/index.html new file mode 100644 index 0000000000..bac952686e --- /dev/null +++ b/files/es/mozilla/firefox/releases/50/index.html @@ -0,0 +1,203 @@ +--- +title: Firefox 50 para desarrolladores +slug: Mozilla/Firefox/Releases/50 +tags: + - Firefox + - Release Notes +translation_of: Mozilla/Firefox/Releases/50 +--- +
{{FirefoxSidebar}}
+ +

Firefox 50 was released on November 15, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.

+ +

Cambios para desarrolladores Web

+ + + +

HTML

+ + + +

CSS

+ + + +

JavaScript

+ + + +

Herramientas de desarrollador

+ + + +

HTTP

+ + + +

Seguridad

+ + + +

Redes

+ + + +

DOM

+ + + +

SVG

+ + + +

Drag and Drop API

+ + + +

Pointer Lock API

+ + + +

IndexedDB

+ + + +

Service Workers

+ + + +

WebGL

+ + + +

WebRTC

+ + + +

Web Audio API

+ + + +

Audio/Video

+ + + +

API de batería

+ + + +

Archivos y directorios

+ + + +

Ver también

+ + + +

Versiones anteriores

+ +

{{Firefox_for_developers(49)}}

diff --git a/files/es/mozilla/firefox/releases/57/index.html b/files/es/mozilla/firefox/releases/57/index.html new file mode 100644 index 0000000000..557684e1fa --- /dev/null +++ b/files/es/mozilla/firefox/releases/57/index.html @@ -0,0 +1,299 @@ +--- +title: Firefox Quantum 57 para programadores +slug: Mozilla/Firefox/Releases/57 +tags: + - '57' + - Firefox + - Notas de publicación +translation_of: Mozilla/Firefox/Releases/57 +--- +
{{FirefoxSidebar}}

Este artículo proporciona información sobre los cambios incluidos en Firefox 57 (también conocido como Firefox Quantum) que conciernen a los desarrolladores. Firefox 57 se disponibilizó al público el 14 de noviembre de 2017.

+ +

Firefox 57 === Firefox Quantum

+ +

Hemos bautizado a Firefox 57 como Quantum por el proyecto de ingeniería Firefox Quantum, cuyo objetivo ha sido el de reconstruir Firefox desde cero para darle un rendimiento y una estabilidad excelentes, así como mejorar su apariencia visual. Esta es la primera versión de Firefox en incluir algunos de estos cambios, así que quisimos conmemorar el acontecimiento.

+ +
+

Nota: para obtener más información sobre las funciones de Quantum incluidas en esta versión, consúltese el artículo «Firefox Quantum Developer Edition: el Firefox más rápido, con IU Photon y mejores herramientas», escrito por Dan Callahan.

+
+ +

El nuevo procesador de CSS en paralelo de Firefox ―también denominado Quantum CSS o Stylo― está activado de manera predeterminada en Firefox 57 para escritorio; las versiones para móviles darán el salto en el futuro. Los programadores no deberían notar ninguna diferencia importante, aparte de la amplia gama de mejoras de rendimiento. Sin embargo, existen algunas diferencias menores de funcionalidad en Stylo, las cuales se han implementado para corregir comportamientos no estándares de Gecko que habrían de desaparecer. Informaremos de esas diferencias en las páginas de referencia y en las notas de publicación según proceda (véanse {{anch("Notas sobre Quantum CSS")}}).

+ +
+

Cambios para programadores web

+ +

Herramientas de desarrollo

+ +

No hay ningún cambio.

+ +

HTML

+ + + +

CSS

+ + + +

Notas sobre Quantum CSS

+ + + +

SVG

+ +

No hay ningún cambio.

+ +

JavaScript

+ + + +

API

+ +

API nuevas

+ + + +

DOM

+ + + +

Sucesos de DOM

+ +

No hay ningún cambio.

+ +

Multimedia y WebRTC

+ + + +

Seguridad

+ + + +

Plugins

+ +

No hay ningún cambio.

+ +

Otros

+ + + +

Eliminaciones de la plataforma web

+ +

HTML

+ + + +

API

+ + + +

SVG

+ +

No hay ningún cambio.

+ +

Cambios relativos a los complementos y los programadores de Mozilla

+ +
+

A partir de Firefox 57, se ha eliminado por completo la compatibilidad con los complementos basados en la tecnología XPCOM. Todas las extensiones deben convertirse para emplear la tecnología nueva, conocida como WebExtensions, o de lo contrario dejarán de funcionar.

+
+ +

WebExtensions

+ +

Se añadieron o ampliaron las API siguientes:

+ + + +

Véase también

+ + +
+ + + +

 Versiones anteriores

+ +

{{Firefox_for_developers(56)}}

diff --git a/files/es/mozilla/firefox/releases/61/index.html b/files/es/mozilla/firefox/releases/61/index.html new file mode 100644 index 0000000000..49fbfdb07c --- /dev/null +++ b/files/es/mozilla/firefox/releases/61/index.html @@ -0,0 +1,135 @@ +--- +title: Firefox 61 for developers +slug: Mozilla/Firefox/Releases/61 +translation_of: Mozilla/Firefox/Releases/61 +--- +
{{FirefoxSidebar}}
{{draft}}
+ +

Este artículo muestra información sobre los cambios en Firefox 61 que afectarán a los desarrolladores. Firefox 61 es la versión beta actual de Firefox, y se lanzará el 26 de Junio de 2018.

+ +

Cambios para desarrolladores web

+ +

Herramientas de desarrollador

+ +

No hay cambios.

+ +

HTML

+ +

No hay cambios.

+ +

CSS

+ +

No hay cambios.

+ +

SVG

+ + + +

JavaScript

+ + + +

APIs

+ +

Nueva APIs

+ +

No hay cambios.

+ +

DOM

+ +

No hay cambios.

+ +

Eventos DOM

+ +

No hay cambios.

+ +

Trabajadores del servicio

+ +

No hay cambios.

+ +

Media y WebRTC

+ +

No hay cambios.

+ +

Canvas y WebGL

+ +

No hay cambios.

+ +

CSSOM

+ +

No hay cambios.

+ +

HTTP

+ + + +

Seguridad

+ +

No hay cambios.

+ +

Plugins

+ +

No hay cambios.

+ +

Otros

+ +

No hay cambios.

+ +

Eliminaciones de la plataforma web

+ +

HTML

+ +

No hay cambios.

+ +

CSS

+ +

No hay cambios.

+ +

APIs

+ +

No hay cambios.

+ +

SVG

+ + + +

Otros

+ +

No hay cambios.

+ +

Cambios para modificaciones y desarrolladores de Mozilla

+ +

Extensiones web

+ +

No hay cambios.

+ +

También puedes ver

+ + + +

Versiones anteriores

+ +

{{Firefox_for_developers(60)}}

+ +

 

diff --git a/files/es/mozilla/firefox/releases/62/index.html b/files/es/mozilla/firefox/releases/62/index.html new file mode 100644 index 0000000000..ccc68fce29 --- /dev/null +++ b/files/es/mozilla/firefox/releases/62/index.html @@ -0,0 +1,235 @@ +--- +title: Firefox 62 for developers +slug: Mozilla/Firefox/Releases/62 +translation_of: Mozilla/Firefox/Releases/62 +--- +
{{FirefoxSidebar}}
+ +

Este artículo provee información sobre los cambios de Firefox 62 que van a afectar a los programadores. Firefox 62 ha sido lanzado en 5 de septiembre, 2018.

+ +

Cambios para programadores de red

+ +

Herramientas para programadores

+ + + +

Removals

+ + + +

HTML

+ +

No changes.

+ +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

Removals

+ + + +

APIs

+ +

New APIs

+ + + +

DOM

+ + + +

DOM events

+ +

No changes.

+ +

Service workers

+ +

No changes.

+ +

Media, Web Audio, and WebRTC

+ + + +

Removals

+ + + + + + + +

HTTP

+ +

Removals

+ + + +

Security

+ +

No changes.

+ +

Plugins

+ +

No changes.

+ +

WebDriver conformance (Marionette)

+ +

New features

+ + + +

API changes

+ + + +

Bug fixes

+ + + +

Other

+ +

No changes.

+ +

Changes for add-on developers

+ +

API changes

+ + + +

Manifest changes

+ + + +

Theme changes

+ + + +

Removals

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(61)}}

diff --git a/files/es/mozilla/firefox/releases/63/index.html b/files/es/mozilla/firefox/releases/63/index.html new file mode 100644 index 0000000000..cd63bb1eac --- /dev/null +++ b/files/es/mozilla/firefox/releases/63/index.html @@ -0,0 +1,274 @@ +--- +title: Firefox 63 para desarrolladores +slug: Mozilla/Firefox/Releases/63 +tags: + - Firefox + - Mozilla + - Release +translation_of: Mozilla/Firefox/Releases/63 +--- +
{{FirefoxSidebar}}
+ +

Este articulo proporciona información sobre los cambios en Firefox 63, que afectara a los desarrolladores. La versión de Firefox 63 fue publicada el 23 de octubre del 2018.

+ +

Cambios para los desarrolladores web

+ +

Herramientas de desarrollo

+ + + +

HTML

+ + + +

Removals

+ + + +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

Removals

+ + + +

APIs

+ +

New APIs

+ + + +

DOM

+ + + +

DOM events

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Canvas and WebGL

+ + + +

Removals

+ + + +

CSSOM

+ +

No changes.

+ +

HTTP

+ + + +

Security

+ + + +

Plugins

+ +

No changes.

+ +

WebDriver conformance (Marionette)

+ +

New features

+ + + +

API changes

+ + + +

Bug fixes

+ + + +

Other

+ + + +

Changes for add-on developers

+ +

API changes

+ +

Theming

+ + + + + + + +

Tabs

+ + + + + + + +

Other

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(62)}}

diff --git a/files/es/mozilla/firefox/releases/66/index.html b/files/es/mozilla/firefox/releases/66/index.html new file mode 100644 index 0000000000..1231c4e85a --- /dev/null +++ b/files/es/mozilla/firefox/releases/66/index.html @@ -0,0 +1,162 @@ +--- +title: Firefox 66 para desarrolladores +slug: Mozilla/Firefox/Releases/66 +tags: + - '66' + - Firefox + - Lanzamiento + - Mozilla +translation_of: Mozilla/Firefox/Releases/66 +--- +
{{FirefoxSidebar}}
+ +

Este artículo proporciona información sobre los cambios en Firefox 66 que afectarán a los desarrolladores. Firefox 66 fue lanzado el 19 de marzo de 2019.

+ +

Cambios para desarrolladores web

+ +

Herramientas de desarrollo

+ + + +

HTML

+ + + +

Removido

+ + + +

CSS

+ + + +

SVG

+ +

No hay adicionales.

+ +

Removido

+ + + +

JavaScript

+ +

Sin cambios.

+ +

APIs

+ +

Nuevos en APIs/cambios

+ + + +

DOM

+ + + +

Eventos DOM

+ + + +

Media, Audio Web, y WebRTC

+ + + +

Removido

+ + + +

Redes

+ + + +

Seguridad

+ +

Sin cambios.

+ +

Complementos

+ +

Sin cambios.

+ +

Cambios para desarrolladores de complementos

+ +

Cambios en la API

+ +

Menús

+ + + +

Cambios en Manifesto

+ +

Sin cambios.

+ +

Véase también la

+ + + +

Versiones anteriores

+ +

{{Firefox_for_developers(65)}}

diff --git a/files/es/mozilla/firefox/releases/67/index.html b/files/es/mozilla/firefox/releases/67/index.html new file mode 100644 index 0000000000..a60df8ab8a --- /dev/null +++ b/files/es/mozilla/firefox/releases/67/index.html @@ -0,0 +1,198 @@ +--- +title: Firefox 67 for developers +slug: Mozilla/Firefox/Releases/67 +tags: + - '67' + - Firefox + - Lanzamiento + - Mozilla +translation_of: Mozilla/Firefox/Releases/67 +--- +

{{FirefoxSidebar}}

+ +

Este artículo provee información sobre los cambios en Firefox 67 que afectarán a los desarrolladores. Firefox 67 fue lanzado el 21 de Mayo de 2019.

+ +

Cambios para desarrolladores web

+ +

Herramientas de desarrollo

+ + + +

Removals

+ + + +

HTML

+ + + +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

APIs

+ +

DOM

+ + + +

DOM events

+ + + +

Workers/Service workers

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Canvas and WebGL

+ + + +

Removals

+ + + +

Security

+ + + +

WebDriver conformance (Marionette)

+ +

API changes

+ + + +

Corrección de errores

+ + + +

Otros

+ + + +

Changes for add-on developers

+ +

Cambios en API

+ + + +

Cambios en manifiesto

+ + + +

Ver también

+ + + +

Versiones anteriores

+ +

{{Firefox_for_developers(66)}}

diff --git a/files/es/mozilla/firefox/releases/68/index.html b/files/es/mozilla/firefox/releases/68/index.html new file mode 100644 index 0000000000..4c2649dcd2 --- /dev/null +++ b/files/es/mozilla/firefox/releases/68/index.html @@ -0,0 +1,233 @@ +--- +title: Firefox 68 for developers +slug: Mozilla/Firefox/Releases/68 +translation_of: Mozilla/Firefox/Releases/68 +--- +

{{FirefoxSidebar}}

+ +

This article provides information about the changes in Firefox 68 that will affect developers. Firefox 68 was released on July 9, 2019.

+ +

Changes for web developers

+ +

Developer tools

+ +

Browser/web console

+ + + +

JavaScript debugger

+ + + +

Network monitor

+ + + +

Page inspector

+ + + +

Storage inspector

+ + + +

Other

+ + + +

Removals

+ + + +

HTML

+ + + +

 Removals

+ + + +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ + + +

APIs

+ +

CSS Object Model (CSSOM)

+ + + +

DOM

+ + + +

DOM events

+ + + +

Media, Web Audio, and WebRTC

+ + + +

Removals

+ + + +

HTTP

+ + + +

Removals

+ + + +

Security

+ +

No changes.

+ +

WebDriver conformance (Marionette)

+ +

Bug fixes

+ + + +

Other

+ + + +

Plugins

+ +

No changes.

+ +

Changes for add-on developers

+ +

API changes

+ + + +

Manifest changes

+ +

No changes.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(67)}}

diff --git a/files/es/mozilla/firefox/releases/9/index.html b/files/es/mozilla/firefox/releases/9/index.html new file mode 100644 index 0000000000..4e976f6262 --- /dev/null +++ b/files/es/mozilla/firefox/releases/9/index.html @@ -0,0 +1,237 @@ +--- +title: Firefox 9 for developers +slug: Mozilla/Firefox/Releases/9 +tags: + - Firefox + - Firefox 9 + - Gecko 9 + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Releases/9 +--- +
+ +

Firefox 9 was released for Windows on December 20, 2011. Mac and Linux version 9.0.1, which fixed a crashing bug discovered at the last minute, were released on December 21, 2011.

+ +

Changes for web developers

+ +

HTML

+ + + +

CSS

+ + + +

JavaScript

+ +

No change.

+ +

DOM

+ +
+
Using full-screen mode
+
The new full-screen API provides a way to present content using the entire screen, with no browser interface. This is great for video and games. This API is currently experimental and prefixed.
+
+ + + +

Workers

+ + + +

WebGL

+ + + +

MathML

+ + + +

Networking

+ + + +

Developer tools

+ + + +

Changes for Mozilla and add-on developers

+ +

See Updating add-ons for Firefox 9 for an overview of the changes you may need to make to get your add-ons working in Firefox 9.

+ +

XUL

+ + + +

JavaScript code module changes

+ + + +

Service changes

+ + + +

NSPR

+ + + +

Interface changes

+ +

Removed interfaces

+ + + +

Miscellaneous interface changes

+ + + +

IDL parser

+ +

The IDL parser no longer includes support for the never fully-implemented notion of unique pointers.

+ +

Build system changes

+ + + +

Other changes

+ + + +

See also

+ +
+ +
diff --git a/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html b/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html new file mode 100644 index 0000000000..ff9d1e483e --- /dev/null +++ b/files/es/mozilla/firefox/releases/9/updating_add-ons/index.html @@ -0,0 +1,69 @@ +--- +title: Actualizando add-ons para Firefox 9 +slug: Mozilla/Firefox/Releases/9/Updating_add-ons +translation_of: Mozilla/Firefox/Releases/9/Updating_add-ons +--- +
{{FirefoxSidebar}}

Firefox 9 no tiene una gran cantidad de cambios que deberian ser problemas de compatibilidad para los desarrolladores de add-ons. Sin embargo, hay algunos elementos posibles que puedan ser problematicos, así que vamos a echar un vistazo.

+ +

¿Es necesario hacer halgo?

+ +

Si se distribuye su add-on en addons.mozilla.org (AMO), ha sido verificado por una herramienta de verificación de compatibilidad automatizada. Add-ons que no utilice API que cambiaron en Firefox 8, y no tienen componentes binarios (que deben volver a compilar para cada versión importante de Firefox), automáticamente se han actualizado en AMO para indicar que funcionan en Firefox 9.
+
+ Así que usted debe empezar por visitando AMO y mirando para ver si su add-on requiere trabajo.

+ +
Nota: Aún deberia probar su add-on en Firefox 9, incluso si se ha actualizado automáticamente. Hay casos raros que no se pueden detectar de forma automática.
+ +
+
Ya que haya confirmado que necesitas hacer cambios, vuelva de nuevo a esta página y siga leyendo.
+ +
 
+
+ +

Add-ons que estan bootstrapped pueden quitar scripts de carga retrasada

+ +

Si su complemento usa {{ifmethod ("nsIChromeFrameMessageManager", "loadFrameScript")}} con el delayed-load disponido, el script se carga en todo cuadro creado a partir de ese momento. Esto es genial, excepto que desde Firefox 9, no había manera de detener la carga de el script, asi que que seguiria ocurriendo incluso después de que su add-on fue cerrado.
+
+ A partir de Firefox 9, debe llamar a el nuevo {{} ifmethod ("nsIChromeFrameMessageManager", "removeDelayedFrameScript")} método para detener la carga de el script en los nuevos cuadros. Esto se hace de esta manera, por ejemplo:

+ +
browser.messageManager.removeDelayedFrameScript("chrome://myextension/content/somescript.js");
+
+ +

Interface changes

+ + + +

Preference changes

+ +

The geo.wifi.* preferences no longer have default values, although they're honored if they exist. If your code reads these without handling the case where they don't exist, you need to update your code to handle the exception that gets thrown when they're not present.

+ +

XPConnect changes

+ +

nodePrincipal and baseURIObject have been moved from nsDOMClassInfo to XrayWrapper. This shouldn't affect many add-ons, since it would only be an issue if they try to access these properties on DOM {{ domxref("Node") }} objects from unprivileged script that have requested XPConnect privileges using enablePrivilege().

+ +

DOM changes

+ + + +

Other changes that may affect binary compatibility

+ +

These changes are notable in that they may affect binary XPCOM components. These will need rebuilding anyway, since that's required for every major release of Firefox, but could introduce compile-time errors, so they're worth noting in particular.

+ + + +

Theme changes

+ +

The {{ XULAttr("pending") }} attribute has been added to the {{ XULElem("tab") }} element. If this attribute is present, the tab is in the process of being restored by the session store service. You can use that to style the tab during the restore process. It's worth noting that if the user has turned on the "Don't load tabs until selected" preference, the {{ XULAttr("pending") }} attribute is set on tabs until they get loaded.

+ +

Similarly, tabs also now have an {{ XULAttr("unread") }} attribute; this property, if present, indicates that the tab has changed since the last time it was the active tab. You can use this to style tabs differently when they have changed since the last time the user looked at them. This is also present on tabs that have not yet been looked at during the current session.

diff --git a/files/es/mozilla/firefox/releases/index.html b/files/es/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..969916af10 --- /dev/null +++ b/files/es/mozilla/firefox/releases/index.html @@ -0,0 +1,11 @@ +--- +title: Notas de desarrollo de Firefox +slug: Mozilla/Firefox/Releases +tags: + - Firefox + - TopicStub +translation_of: Mozilla/Firefox/Releases +--- +
{{FirefoxSidebar}}

Esta página provee enlaces a artículos de desarrolladores para Firefox X para cada versión de Firefox. Estas notas permiten ver las características añadidas y los errores eliminados en cada versión de Firefox.

+ +
{{ListSubpages("",1,1,1)}}
diff --git a/files/es/mozilla/firefox_para_android/index.html b/files/es/mozilla/firefox_para_android/index.html new file mode 100644 index 0000000000..7ba3ca497b --- /dev/null +++ b/files/es/mozilla/firefox_para_android/index.html @@ -0,0 +1,65 @@ +--- +title: Firefox para Android +slug: Mozilla/Firefox_para_Android +translation_of: Mozilla/Firefox_for_Android +--- +

Para cada vez más personas, los dispositivos móviles representan su manera principal —o incluso la única manera— de navegar por la web. Firefox para Android (cuyo nombre en código es Fennec) es un navegador abierto, «hackeable» y que cumple con los estándares, al igual que el Firefox de escritorio.

+ +

Firefox para Android construye su interfaz de usuario mediante «widgets» nativos de Android en lugar de XUL: esto mejora considerablemente el rendimiento, especialmente el tiempo de inicio y el consumo de memoria. Actualmente esta versión está destinada únicamente a los teléfonos, y la versión para tabletas todavía utiliza XUL. En el futuro, esperamos traer la compatibilidad con los «widgets» nativos también para la IU para tabletas.

+ +

Contribuir a Firefox para Android

+ +

El punto de partida principal para obtener información sobre el proyecto Firefox para Android es la página del wiki del proyecto.

+ +

Puede ayudarnos a crear y mejorar Firefox para Android:

+ + + +

Desarrolle para la web movil

+ +

Hemos comenzado a armar una guía para diseñar sitios web para dispositivos móviles.

+ +

Con Firefox para Android, tiene acceso a varias API que permiten acceder a las capacidades fundamentales del dispositivo, cerrando la brecha entre la Web y las aplicaciones nativas:

+ +

B'

+ + + +

Para probar su sitio web en Firefox para Android, puede instalarlo en un dispositivo con Android o ejecútelo en su escritorio mediante el Emulador de Android.

+ +

Cree complementos para móviles

+ +

Firefox para Android es compatible con los complementos, utilizando el mismo sistema de extensiones que usan todas las demás aplicaciones basadas en Gecko. No hemos inventado un nuevo sistema de complementos. Esto quiere decir que crear un complemento para Firefox en Android es el mismo proceso que seguiría con Firefox para el escritorio. Los complementos que funcionan en el Firefox del escritorio no funcionan automáticamente en Firefox para Android. Pongámoslo así: las interfaces son demasiado diferentes.

+ +
Firefox en Android tiene un identificador de aplicación único que debe utilizarse en install.rdf. El identificador es {aa3c5121-dab2-40e2-81ca-7ea25febc110}
+ +

Son compatibles ambas clases de complementos (los clásicos, que requieren reinicio; y los más recientes que no lo necesitan). De ser posible, se prefiere utilizar la clase que no necesita reinicio, porque la experiencia del usuario es mucho mejor cuando no se necesita forzar un reinicio de la aplicación cada vez que el usuario instala o desinstala un complemento.

+ +

Visión general rápida

+ + + +

Obtenga ayuda con Firefox para Android

+ +

En el sitio web de asistencia de Mozilla hay documentación y tutoriales para aprender a usar Firefox para Android y resolver problemas.

diff --git a/files/es/mozilla/git/index.html b/files/es/mozilla/git/index.html new file mode 100644 index 0000000000..a92f22d5ed --- /dev/null +++ b/files/es/mozilla/git/index.html @@ -0,0 +1,12 @@ +--- +title: Git +slug: Mozilla/Git +translation_of: Mozilla/Git +--- +

El espejo git oficial actual de la base de código de Firefox (también conocido como "gecko" o "mozilla-central") se puede encontrar en https://github.com/mozilla/gecko-dev. Este repositorio contiene todas las ramas que forman parte del desarrollo de la línea principal, incluidas las ramas del tren mozilla-central (todas las noches), mozilla-aurora (edición para desarrolladores), mozilla-beta y mozilla-release.
+
+ Si está buscando trabajar con otras ramas de Mozilla, https://github.com/mozilla/gecko-projects también podrían ser útiles. Este repositorio contiene las ramas del proyecto (también conocidas como "ramitas") cuyo uso varió.
+
+ Si prefiere usar git directamente con los repositorios hg, este flujo de trabajo describe cómo proceder. El uso de este enfoque también le permitirá pasar directamente de su repositorio git a mercurial.
+
+ El flujo de trabajo mencionado anteriormente es el enfoque más actual y oficialmente documentado para usar git para interactuar con mozilla-central.

diff --git a/files/es/mozilla/http_cache/index.html b/files/es/mozilla/http_cache/index.html new file mode 100644 index 0000000000..44b59a8bc1 --- /dev/null +++ b/files/es/mozilla/http_cache/index.html @@ -0,0 +1,487 @@ +--- +title: HTTP Cache +slug: Mozilla/HTTP_cache +translation_of: Mozilla/HTTP_cache +--- +
+

Este documento describe la Nueva caché HTTP versión 2.

+
+ +

+ +

El código reside en /network/cache2.

+ +

+ +

API

+ +

Aquí hay una descripción detallada de la API de caché HTTP v2, con ejemplos incluidos.  Este documento sólo contiene lo que no se puede encontrar o puede no estar claro directamente de los comentarios de los archivos IDL.

+ + + +
+

Está fuertemente codificado para NO USAR más la ANTIGUA API de  caché - nsICacheService y otros.  Pronto será completamente obsoleto y eliminado (bug 913828).

+
+ +

nsICacheStorageService

+ + + +

nsILoadContextInfo

+ + + +

nsICacheStorage

+ + + +

nsICacheEntryOpenCallback

+ + + +

nsICacheEntry

+ + + +

Ciclo de vida de un nuevo ingreso

+ + + +

Concurrent read and write

+ +
+

Important difference in behavior from the old cache: the cache now supports reading a cache entry data while it is still being written by the first consumer - the writer.

+
+ +

This can only be engaged for resumable responses that (bug 960902) don't need revalidation. Reason is that when the writer is interrupted (by e.g. external canceling of the loading channel) concurrent readers would not be able to reach the remaning unread content.

+ +
+

This could be improved by keeping the network load running and being stored to the cache entry even after the writing channel has been canceled.

+
+ +

When the writer is interrupted, the first concurrent reader in line does a range request for the rest of the data - and becomes that way a new writer. The rest of the readers are still concurrently reading the content since output stream for the cache entry is again open and kept by the current writer.

+ +

Lifetime of an existing entry with only a partial content

+ + + +

Lifetime of an existing entry that doesn't pass server revalidation

+ + + +

Adding a new storage

+ +

Should there be a need to add a new distinct storage for which the current scoping model would not be sufficient - use one of the two following ways:

+ +
    +
  1. [preffered] Add a new <Your>Storage method on nsICacheStorageService and if needed give it any arguments to specify the storage scope even more.  Implementation only should need to enhance the context key generation and parsing code and enhance current - or create new when needed - nsICacheStorage implementations to carry any additional information down to the cache service.
    2. +
  2. [not preferred] Add a new argument to nsILoadContextInfo; be careful here, since some arguments on the context may not be known during the load time, what may lead to inter-context data leaking or implementation problems. Adding more distinction to nsILoadContextInfo also affects all existing storages which may not be always desirable.
    3. +
+ +

See context keying details for more information.

+ +

Code examples

+ +

TBD

+ +

Opening an entry

+ +

Creating a new entry

+ +

Recreating an already open entry

+ +

Implementation

+ +

Threading

+ +

The cache API is fully thread-safe.

+ +

The cache is using a single background thread where any IO operations like opening, reading, writing and erasing happen.  Also memory pool management, eviction, visiting loops happen on this thread.

+ +

The thread supports several priority levels. Dispatching to a level with a lower number is executed sooner then dispatching to higher number layers; also any loop on lower levels yields to higher levels so that scheduled deletion of 1000 files will not block opening cache entries.

+ +
    +
  1. OPEN_PRIORITY: except opening priority cache files also file dooming happens here to prevent races
    2. +
  2. READ_PRIORITY: top level documents and head blocking script cache files are open and read as the first
    3. +
  3. OPEN
    4. +
  4. READ: any normal priority content, such as images are open and read here
    5. +
  5. WRITE: writes are processed as last, we cache data in memory in the mean time
    6. +
  6. MANAGEMENT: level for the memory pool and CacheEntry background operations
    7. +
  7. CLOSE: file closing level
    8. +
  8. INDEX: index is being rebuild here
    9. +
  9. EVICT: files overreaching the disk space consumption limit are being evicted here
    10. +
+ +

NOTE: Special case for eviction - when an eviction is scheduled on the IO thread, all operations pending on the OPEN level are first merged to the OPEN_PRIORITY level. The eviction preparation operation - i.e. clearing of the internal IO state - is then put to the end of the OPEN_PRIORITY level.  All this happens atomically. This functionality is currently pending in bug 976866.

+ +

Storage and entries scopes

+ +

A scope key string used to map the storage scope is based on the arguments of nsILoadContextInfo. The form is following (currently pending in bug 968593):

+ +
a,b,i1009,p,
+ + + +

CacheStorageService keeps a global hashtable mapped by the scope key. Elements in this global hashtable are hashtables of cache entries. The cache entries are mapped by concantation of Enhance ID and URI passed to nsICacheStorage.asyncOpenURI.  So that when an entry is beeing looked up, first the global hashtable is searched using the scope key. An entries hashtable is found. Then this entries hashtable is searched using <enhance-id:><uri> string. The elemets in this hashtable are CacheEntry classes, see below.

+ +

The hash tables keep a strong reference to CacheEntry objects. The only way to remove CacheEntry objects from memory is by exhausting a memory limit for intermediate memory caching, what triggers a background process of purging expired and then least used entries from memory. Another way is to directly call the nsICacheStorageService.purge method. That method is also called automatically on the "memory-pressure" indication.

+ +

Access to the hashtables is protected by a global lock. We also - in a thread-safe manner - count the number of consumers keeping a reference on each entry. The open callback actually doesn't give the consumer directly the CacheEntry object but a small wrapper class that manages the 'consumer reference counter' on its cache entry. This both mechanisms ensure thread-safe access and also inability to have more then a single instance of a CacheEntry for a single <scope+enhanceID+URL> key.

+ +

CacheStorage, implementing the nsICacheStorage interface, is forwarding all calls to internal methods of CacheStorageService passing itself as an argument.  CacheStorageService then generates the scope key using the nsILoadContextInfo of the storage. Note: CacheStorage keeps a thread-safe copy of nsILoadContextInfo passed to a *Storage method on nsICacheStorageService.

+ +

Invoking open callbacks

+ +

CacheEntry, implementing the nsICacheEntry interface, is responsible for managing the cache entry internal state and to properly invoke onCacheEntryCheck and onCacheEntryAvaiable callbacks to all callers of nsICacheStorage.asyncOpenURI.

+ + + +

The openers FIFO is an array of CacheEntry::Callback objects. CacheEntry::Callback keeps a strong reference to the opener plus the opening flags.  nsICacheStorage.asyncOpenURI forwards to CacheEntry::AsyncOpen and triggers the following pseudo-code:

+ +

CacheStorage::AsyncOpenURI - the API entry point:

+ + + +

CacheEntry::AsyncOpen (entry atomic):

+ + + +

CacheEntry::InvokeCallbacks (entry atomic):

+ + + +

CacheEntry::OnFileReady (entry atomic):

+ + + +

CacheEntry::OnHandleClosed (entry atomic):

+ + + +

All consumers release the reference:

+ + + +

Intermediate memory caching of frequently used metadata (a.k.a. disk cache memory pool)

+ +
+

This is a description of this feature status that is currently only a patch in bug 986179. Current behavior is simpler and causes a serious memory consumption regression (bug 975367).

+
+ +

For the disk cache entries we keep some of the most recent and most used cache entries' meta data in memory for immediate zero-thread-loop opening. The default size of this meta data memory pool is only 250kB and is controlled by a new browser.cache.disk.metadata_memory_limit preference. When the limit is exceeded, we purge (throw away) first expired and then least used entries to free up memory again. 

+ +

Only CacheEntry objects that are already loaded and filled with data and having the 'consumer reference == 0' (bug 942835) can be purged.

+ +

The 'least used' entries are recognized by the lowest value of frecency we re-compute for each entry on its every access. The decay time is controlled by the browser.cache.frecency_half_life_hours preference and defaults to 6 hours. The best decay time will be based on results of an experiment.

+ +

The memory pool is represented by two lists (strong refering ordered arrays) of CacheEntry objects:

+ +
    +
  1. Sorted by expiration time (that default to 0xFFFFFFFF)
    2. +
  2. Sorted by frecency (defaults to 0)
    3. +
+ +

We have two such pools, one for memory-only entries actually representing the memory-only cache and one for disk cache entries for which we only keep the meta data.  Each pool has a different limit checking - the memory cache pool is controlled by browser.cache.memory.capacity, the disk entries pool is already described above. The pool can be accessed and modified only on the cache background thread.

+ +
"@mozilla.org/netwerk/cache-storage-service;1"
diff --git a/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html b/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html new file mode 100644 index 0000000000..174403bdd8 --- /dev/null +++ b/files/es/mozilla/implementing_pontoon_in_a_mozilla_website/index.html @@ -0,0 +1,76 @@ +--- +title: Implementando Pontoon en un proyecto de Mozilla +slug: Mozilla/Implementing_Pontoon_in_a_Mozilla_website +tags: + - Localización +translation_of: Mozilla/Implementing_Pontoon_in_a_Mozilla_website +--- +

Pontoon Pontoon es una herramienta basada en web, WYSIWYG (localización de lo que se obtiene) y localización (l10n). En Mozilla, actualmente usamos Pontoon para localizar varios proyectos de Mozilla y la interfaz de la aplicación Firefox OS, conocida como Gaia. Pontoon es una herramienta muy simple e intuitiva que requiere poca o ninguna habilidad técnica para el uso de los localizadores, lo que disminuirá el tiempo de publicación de las versiones localizadas de su proyecto. Aquí discutiremos cómo puedes agregar Pontoon a tu proyecto de Mozilla.

+ +
+

¿Te gustaría mejorar Pontoon? Aprende cómo involucrarte en GitHub.

+
+ +
+

¿Empezando con tu proyecto l10n? Mira la wiki en haciendo que tu proyecto sea localizado.

+
+ +

A. Haz tu proyecto localizable

+ +

Nos damos cuenta de que estos ya se consideran estándar buenas practicas para localizar proyectos en Mozilla, pero creemos que es bueno agregarlos aquí como un pequeño recordatorio.

+ +
    +
  1. Asegurate de que tu proyecto sea compatible con uno de los frameworks l10n (gettext, XLIFF, L20n, lang, properties, etc.).
    2. +
  2. Extrae cadenas localizables en archivos de recursos.
    3. +
  3. Envia archivos de recursos a un repositorio (SVN, HG, Git). +
      +
    • Las carpetas locales individuales deben ubicarse en el mismo nivel de anidamiento del árbol de directorios. La fuente de la fuente necesita ser llamadatemplates, en-US, en-us o en. Si existen varias carpetas con ese nombre en el repositorio y contienen archivos en un formato de archivo admitido, se usará el primero. Es posible que desees colocar todas las carpetas de configuración regional de forma dedicada locales carpeta para este propósito. El código de configuración regional no debe ser parte del nombre del archivo.
      • +
    • Patrón correcto: + 
      /locales/{locale_code}/path/to/file.extension
      +
      • +
    • Patrón incorrecto: + 
      /locales/{locale_code}/path/to/file.{locale_code}.extension
      +
      • +
    +
    4. +
  4. Asegúrate de que Pontoon tenga acceso de escritura al repositorio. + +
    5. +
+ +

B. (opcional) Habilita la localización in-page de tu proyecto web

+ +
    +
  1. Enlaza un script desde el elemento HTML <body> , por lo que Pontoon puede comunicarce con tu sitio, pueda detectar contenido y hacerlo localizable en su lugar. Solo necesitas hacer esto en el entorno que se usará para la localización in-page, p.ej. servidor de puesta en escena: + + +
    2. +
  2. Si tu sitio usa CSP,  por favor, asegurate de que lo siguiente está permitido para el dominio pontoon.mozilla.org: +
      +
    1. cargar dentro de iframe
      2. +
    2. cargar a distancia CSS
      3. +
    3. cargar imágenes remotas
      4. +
    +
    3. +
  3. Si tu sitio usa el X-Frame-Options Encabezado, asegurate que la carga dentro del iframe esté permitida para el dominio pontoon.mozilla.org.
    4. +
  4. Asegurate de que tu sitio sea compatible con HTTPS. Es gratis, automatizado y abierto. Vamos a encriptar!
    5. +
+ +

C. Agrega tu proyecto a Pontoon

+ +

Tu proyecto ahora está listo para ser configurado en Pontoon. Por favor presenta un error en Infraestructura de localización y herramientas :: Administración / Configuración y proporciona la siguiente información:

+ + + +

Para más detalles,  por favor ponte en contacto con el Equipo de gestión de proyectos.

diff --git a/files/es/mozilla/index.html b/files/es/mozilla/index.html new file mode 100644 index 0000000000..01b354fbc0 --- /dev/null +++ b/files/es/mozilla/index.html @@ -0,0 +1,6 @@ +--- +title: Mozilla +slug: Mozilla +translation_of: Mozilla +--- +

Esta página fue auto-generada ya que un usuario creó una sub-página a esta página.

diff --git a/files/es/mozilla/instantbird/index.html b/files/es/mozilla/instantbird/index.html new file mode 100644 index 0000000000..2a3d2a931d --- /dev/null +++ b/files/es/mozilla/instantbird/index.html @@ -0,0 +1,58 @@ +--- +title: Instantbird +slug: Mozilla/Instantbird +translation_of: Mozilla/Instantbird +--- +

Instantbird es una aplicación de mensajería con un estrecho vinculo con Mozilla. Estas páginas sirven como documentación de  Instantbird y también proveen enlaces a la documentación acerca del backend Chat Core que es utilizado también por Thunderbird.

+ +

Instabirs está construido sobre la misma plataforma técnica que Firefox. Originalmente propuesto como un porjecto del Google Summer of Code para crear una interfaz XUL al rededor de libpurple (el backend de Pidgin). Instabird no fue aceptado, pero inicio de cualquier modo en 2007, desde entonces ha crecido más allá de ser un simple frontend para libpurple hasta tener protocolos propios.

+ + + + + + + + +
+

Documentación

+ +
+
Construyendo Instabird
+
Información acerca de cómo construir Instabird a partir del repositorio comm-central.
+
Chat Core
+
El código backend, incluyendo amplia documentación sobre protocolos de chat  ({{ Interface("prplIProtocol") }} y amigos).
+
Estilos de mensajes
+
Información acerca de aplicar temas a los mensajes mostrados.
+
Atajos de teclado
+
Lista de atajos de teclado
+
+ +
+
Nightly builds más recientes
+
Estos son generalmente estables, pero espere que algo se rompa de vez en cuando y ocasione bugs.
+
+ +

Ver todos...

+ 		+

Comunidad

+ +
    +
  • #instantbird en irc.mozilla.org (para usuarios y desarrolladores)
    • +
  • El soporte es manejado por la lista de correo support-instabird o en IRC: {{ DiscussionList("support-instantbird", "mozilla.support.instantbird") }}
    • +
  • Las preguntas sobre extensiones pueden ser comentadas en el grupo dev-chat o en  IRC: {{ DiscussionList("dev-chat", "mozilla.dev.chat") }}
    • +
  • una lista de todos los Instantbird communication channels
    • +
+ +

Herramientas

+ + + + + + +
diff --git a/files/es/mozilla/javascript_code_modules/index.html b/files/es/mozilla/javascript_code_modules/index.html new file mode 100644 index 0000000000..2099b4ca62 --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/index.html @@ -0,0 +1,146 @@ +--- +title: JavaScript code modules +slug: Mozilla/JavaScript_code_modules +tags: + - Add-ons + - Extensions + - JavaScript + - Modules + - NeedsTranslation + - TopicStub + - XPCOM +translation_of: Mozilla/JavaScript_code_modules +--- +
+ {{gecko_minversion_header("1.9")}}
+

JavaScript code modules let multiple privileged JavaScript scopes share code. For example, a module could be used by Firefox itself as well as by extensions, in order to avoid code duplication.

+ + + + + + + +
+

General topics

+
+
+ Using JavaScript code modules
+
+ An introduction to how to use JavaScript code modules.
+
+ Component.utils.import
+
+ How to import a JavaScript code module.
+
+ Component.utils.unload {{gecko_minversion_inline("7.0")}}
+
+ How to unload a JavaScript code module.
+
+ Code snippets: Modules
+
+ Examples of how to use code modules.
+
+ Mozilla Labs JS Modules
+
+ This page features a list of JS modules, along with download links and documentation, that extension developers can use in their code.
+
+
+
+ 		+

Standard code modules

+
+
+ AddonManager.jsm {{gecko_minversion_inline("2.0")}}
+
+ Interface to install, manage, and uninstall add-ons.
+
+ AddonRepository.jsm {{gecko_minversion_inline("2.0")}}
+
+ Allows searching of the add-ons repository.
+
+ ctypes.jsm {{fx_minversion_inline("3.6")}}
+
+ Provides an interface that allows JavaScript code to call native libraries without requiring the development of an XPCOM component.
+
+ DeferredTask.jsm {{gecko_minversion_inline("18.0")}}
+
+ Run a task after a delay.
+
+ Dict.jsm {{gecko_minversion_inline("5.0")}}
+
+ Provides an API for key/value pair dictionaries.
+
+ DownloadLastDir.jsm {{gecko_minversion_inline("2.0")}}
+
+ Provides the path to the directory into which the last download occurred.
+
+ Downloads.jsm {{gecko_minversion_inline("23.0")}}
+
+ Provides a single entry point to interact with the downloading capabilities of the platform.
+
+ FileUtils.jsm {{gecko_minversion_inline("1.9.2")}}
+
+ Provides helpers for dealing with files.
+
+ Geometry.jsm {{gecko_minversion_inline("2.0")}}
+
+ Provides routines for performing basic geometric operations on points and rectangles.
+
+ ISO8601DateUtils.jsm
+
+ Provides routines to convert between JavaScript Date objects and ISO 8601 date strings.
+
+ NetUtil.jsm
+
+ Provides helpful networking utility functions, including the ability to easily copy data from an input stream to an output stream asynchronously.
+
+ openLocationLastURL.jsm {{gecko_minversion_inline("1.9.1.4")}}
+
+ Provides access to the last URL opened using the "Open Location" option in the File menu.
+
+ osfile.jsm {{gecko_minversion_inline("16.0")}}
+
+ JavaScript module OS.File contains primitives for manipulating files
+
+ PerfMeasurement.jsm {{fx_minversion_inline("4.0")}}
+
+ Provides access to low-level hardware and OS performance measurement tools.
+
+ PluralForm.jsm
+
+ Provides an easy way to get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.
+
+ PopupNotifications.jsm {{gecko_minversion_inline("2.0")}}
+
+ Provides an easy way to present non-modal notifications to users.
+
+ Promise.jsm {{gecko_minversion_inline("25.0")}}
+
+ Implements the Promises/A+ proposal as known in April 2013.
+
+ Services.jsm {{gecko_minversion_inline("2.0")}}
+
+ Provides getters for conveniently obtaining access to commonly-used services.
+
+ source-editor.jsm {{fx_minversion_inline("11.0")}}
+
+ The Source Editor is used by developer tools such as the Style Editor; this interface implements the editor and lets you interact with it.
+
+ Sqlite.jsm {{gecko_minversion_inline("20.0")}}
+
+ A Promise-based API to {{ interface("mozIStorage") }}/SQLite.
+
+ Task.jsm {{gecko_minversion_inline("17.0")}}
+
+ Implements a subset of Task.js to make sequential, asynchronous operations simple, using the power of JavaScript's yield operator.
+
+ Timer.jsm {{gecko_minversion_inline("22.0")}}
+
+ A pure JS implementation of window.setTimeout.
+
+ XPCOMUtils.jsm
+
+ Contains utilities for JavaScript components loaded by the JS component loader.
+
+
diff --git a/files/es/mozilla/javascript_code_modules/promise.jsm/index.html b/files/es/mozilla/javascript_code_modules/promise.jsm/index.html new file mode 100644 index 0000000000..58806c841b --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/promise.jsm/index.html @@ -0,0 +1,134 @@ +--- +title: Promise.jsm +slug: Mozilla/JavaScript_code_modules/Promise.jsm +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/JavaScript_code_modules/Promise.jsm +--- +

{{ gecko_minversion_header("25") }}

+ +

The Promise.jsm JavaScript code module implements the Promises/A+ proposal as known in April 2013. To use it, you first need to import the code module into your JavaScript scope:

+ +
Components.utils.import("resource://gre/modules/Promise.jsm");
+
+ +
+

Note: A preliminary promise module is also available starting from Gecko 17, though it didn't conform to the Promises/A+ proposal until Gecko 25:

+ +
Components.utils.import("resource://gre/modules/commonjs/promise/core.js");     // Gecko 17 to 20
+Components.utils.import("resource://gre/modules/commonjs/sdk/core/promise.js"); // Gecko 21 to 24
+
+ +

This implementation also includes helper functions that are specific to the Add-on SDK. While you may still import this module from the above paths, the recommended way for loading it is through the Add-on SDK loader.

+
+ +

Introduction

+ +

For an introduction to promises, you may start from the Add-on SDK documentation, keeping in mind that only the core subset is implemented in this module.

+ +

A promise is an object representing a value that may not be available yet. Internally, a promise can be in one of three states:

+ + + +

A reference to an existing promise may be received by different means, for example as the return value of a call into an asynchronous API. In this case, the state of the promise can be observed but not directly controlled.

+ +

To observe the state of a promise, its then method must be used. This method registers callback functions that are called as soon as the promise is either fulfilled or rejected. The method returns a new promise, that in turn is fulfilled or rejected depending on the state of the original promise and on the behavior of the callbacks. For example, unhandled exceptions in the callbacks cause the new promise to be rejected, even if the original promise is fulfilled. See the documentation of the then method for details.

+ +

Promises may also be created using the new Promise() constructor.

+ +

Method overview

+ + + + + + + + + + + + + +
Deferred defer(); {{ obsolete_inline("30") }}
Promise resolve([optional] aValue);
Promise reject([optional] aReason);
+ +

Methods

+ +

defer()

+ +

Creates a new pending promise and provides methods to resolve or reject it.

+ +
Deferred defer(); {{ obsolete_inline("30") }}
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

A new object, containing the new promise in the promise property, and the methods to change its state in the resolve and reject properties. See the Deferred documentation for details.

+ +

resolve()

+ +

Creates a new promise fulfilled with the specified value, or propagates the state of an existing promise.

+ +
Promise resolve(
+  aValue
+);
+
+ +
Parameters
+ +
+
aValue {{ optional_inline() }}
+
If this value is not a promise, including undefined, it becomes the fulfillment value of the returned promise. If this value is a promise, then the returned promise will be resolved with the value, i.e. it will eventually assume the same state as the provided promise.
+
+ +
Return value
+ +

A promise that can be pending, fulfilled, or rejected.

+ +

reject()

+ +

Creates a new promise rejected with the specified reason.

+ +
Promise reject(
+  aReason
+);
+
+ +
Parameters
+ +
+
aReason {{ optional_inline() }}
+
+

The rejection reason for the returned promise. Although the reason can be undefined, it is generally an Error object, like in exception handling.

+ +
Note: This argument should not be a promise. Specifying a rejected promise would make the rejection reason equal to the rejected promise itself, and not its rejection reason.
+
+
+ +
Return value
+ +

A rejected promise.

+ +

Examples

+ +

See the examples page.

+ +

See also

+ + diff --git a/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html b/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html new file mode 100644 index 0000000000..d92d392972 --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/promise.jsm/promise/index.html @@ -0,0 +1,218 @@ +--- +title: Promise +slug: Mozilla/JavaScript_code_modules/Promise.jsm/Promise +tags: + - Firefox + - Módulos + - Promise + - Promise.jsm + - Referencia +translation_of: Mozilla/JavaScript_code_modules/Promise.jsm/Promise +--- +

Un objeto Promise  representa un valor que puede no estar disponible aún.

+ +

Una referencia a un Promise existente puede ser recibida por diferentes medios, por ejemplo como el valor de retorno de una llamada a una API asíncrona. Una vez que tenga una referencia al objeto Promise, puede llamar a su método then() para ejecutar una acción cuando el valor esté disponible o cuando ocurra un error.

+ +

Los objetos Promise también pueden ser creados usando el constructor new Promise(). No necesita importar el módulo Promise.jsm para usar un objeto Promise del que ya se tiene una referencia.

+ +

Internamente, Promise puede encontrarse en uno de tres estados:

+ + + +
+

Nota: siempre debería controlar, enviar o reportar errores (rejection reasons). Si ve el mensaje "A promise chain failed to handle a rejection", es posible que haya algo que corregir en el código. Vea manejo de errores y problemas comunes a continuación.

+
+ +

Convenciones de la documentación

+ +

En la documentación, el tipo de valor fulfillment es especificado normalmente entre corchetes angulados. Por ejemplo, la función OS.File.exists retorna un objeto Promise que eventualmente cumpla con un boolean:

+ +
Promise<boolean> exists(string path);
+
+ +

El motivo de rechazo (rejection reason) podrá especificarse por separado en la documentación de la función, y se considera que es un objeto Error a menos que se especifique lo contrario.

+ +

Resumen del método

+ + + + + + + + + + +
Promise then([opcional] Function onFulfill, [opcional] Function onReject);
Promise catch([opcional] Function onReject);
+ +

Constructor

+ +

Crea un nuevo objeto Promise, inicialmente con estado pendiente (pending) y proporciona referencias a las funciones de resolución que se puedan utilizar para cambiar su estado.

+ +
new Promise(executor);
+
+ +

Parámetros

+ +
+
executor
+
+

Esta función se invoca inmediatamente con la resolución de funciones como sus dos argumentos:

+ + 
executor(resolve, reject);
+
+ +

El constructor no retornará valor hasta que el executor haya terminado. Las funciones de resolución pueden ser usadas en cualquier momento, antes o despues que executor haya terminado, para controlar el estado final de Promise. Si executor lanza una excepción, su valor será pasado a la función de resolución reject .

+
+
+ +

Funciones de resolución

+ +

resolve()

+ +

Cumple con el Promise asociado con el valor especificado, o propaga el estado de un objeto Promise existente. Si el Promise asociado ya ha sido resuelto, ya sea a un valor, un rechazo, o de otro Promise, este método no hace nada.

+ +
Nota: llamar a este método con un Promise pendiente con el argumento aValue, y luego llamándolo con otro valor antes de que Promise se haya cumplido (fulfilled) o rechazado (rejected), no tendrá efecto la segunda vez, ya que el objeto Promise asociado ya está resuelto al objeto Promise pendiente.
+ +
void resolve(
+  aValue
+);
+
+ +
Parameters
+ +
+
aValue Opcional
+
Si este valor no es un Promise, incluyendo undefined, se convierte en el valor de cumplimiento del Promise asociado. Si este valor es un objeto Promise, el Promise asociado será resuelto con el promise pasado, y seguirá el estado como la promesa proporcionada (incluyendo cualquier transición futura).
+
+ +

reject()

+ +

Rechaza el Promise asociada con la razón especificada. Si el Promise ya se ha resuelto, ya sea a un valor, un rechazo, o de otro Promise, este método no hace nada.

+ +
void reject(
+  aReason
+);
+
+ +
Parameters
+ +
+
aReason Opcional
+
+

El motivo de rechazo de la promesa asociada. Aunque la razón puede ser undefined, por lo general es un objeto de Error, como en el manejo de excepciones.

+ +
Nota: este argumento no debería ser un Promise. Especificar un Promise rechazado haría el motivo de rechazo igual al Promise rechazado en sí, y no a su razón de rechazo.
+
+
+ +

Métodos

+ +

then()

+ +

Llama a una de las funciones previstas tan pronto como esta Promise se haya, bien cumplido, o bien rechazado.  Se retorna un nuevo promise, cuyo estado evoluciona dependiendo del promise y la funcion de devolución de llamada (callbacks) proporcionados.

+ +

La devolución de llamada apropiada siempre se invoca después de devolver este método, incluso si esta Promise se ha cumplido o rechazado. Pude lamar al método then() muchas veces para el mismo Promise, y las funciones de devolución de llamada (callbacks) serán invocadas en el mismo orden en el cual fueron registradas.

+ +
+

Advertencia: si la funcion de llamada onFulfill lanza una axcepción, onReject no se invocará y la excepción no será capturada, se muestra en la consola (verá una error de cadena promesa fallida). Puede registrar una función de llamada de rechazo en el promise retornado en su lugar (usando catch() o then()), para procesar cualquier excepción ocurrida en cualquiera de las devoluciones de llamada registradas para este promise.

+
+ +
Nota: cuando llama al método then() multiples veces para el mismo promise, las funciones de devolución de llamada (callbacks) son siempre ejecutadas inmediatamente. Por ejemplo, si una acepción ocurre en un callback, no afecta al callback posterior. El comportamiento del callback sólo afecta al promise retornado por el método then() con el cual el callback fue registrado, esto es en realidad un promise diferente para cada invocación del método.
+ +
Promise then(
+  Function onFulfill,
+  Function onReject
+);
+
+ +
Parámetros
+ +
+
onFulfill {{optional_inline()}}
+
Si el promise está cumplido (fulfilled), esta funciń es invokada con el valor de cumplimiento del promise como su único argumento, y elo resultado de la función determina el estado del nuevo promise retornado por el método then(). En caso este parámetro (usualmente null), el nuevo promise retornado por el método then() es cumplido (fulfilled) con el mismo valor del promise original.
+
onReject {{optional_inline()}}
+
+

Si el promise es rechazado (rejected), esta función es invocada con con el motivo de rechazo del promise como su único argumento, y el resultado del la función determina el nuevo estado del promise retornado por el método then(). En caso este parametro no es un función (Por lo general undefined), el nuevo promise retornado por el método then() es rechazado (rejected) con la misma razón que el promise original.

+
+
+ +
Valor de retorno
+ +

Un nuevo promise que es initialmente pendiente, luego asume un estado que depende del resultado de la función de devolución de llamada (callback):

+ + + +

catch()

+ +

Equivalente a then() con un valor undefined para el parámetro onFulfill. Si encadena then( onFulfill ).catch( onReject ), las excepciones lanzadas en onFulfill serán capturadas y pasadas a onReject, que no es el caso cuando pasa onReject a then().

+ +
Promise catch(
+  Function onReject
+);
+
+ +

Las siguientes llamadas son por lo tanto idénticas:

+ +
p.then(undefined, logError);
+p.catch(logError);
+
+ +

Depuración

+ +

Por diseño, el estado instantáneo y el valor de un Promise no pueden ser inspeccionados de forma sincrónica, sin llamar al método then().

+ +

PAra ayudar con la depuración,  sólo cuando inspeccione un objeto Promise manualmente,  puede ver información con propiedades especialesque son accesibles desde código (esto, actualmente, está implementado se implementa mediante la aleatorización del nombre de la propiedad, por la falta de un lenguaje más sofisticado o soporte depurador).

+ +

Estas propiedades inspeccionables de código inaccesible son:

+ + + +

Promise properties are visible in the debugger.Promise handlers can be watched from the Console.

+ +

Ejemplos

+ +

Ver la página de ejemplos.

+ +

Gestión de errores y problemas comunes

+ +

Debe reportar errores no controlados, a menos que de el relevo de Promise a una función de llamada u otra ruta de código que controlará el error.

+ +
// ###### ERROR: Silenciando cualquier rechazo notificado por "OS.File.Exists".
+OS.File.exists(path).then(exists => { if (exists) myRead(path); });
+
+// ###### ERROR: Silenciando cualquier excepción planteado por "myRead".
+OS.File.exists(path).then(exists => { if (exists) myRead(path); }, Components.utils.reportError);
+
+// CORRECTO (por ejemplo, podria reportar la excepción "myRead ino está definido")
+OS.File.exists(path).then(exists => { if (exists) myRead(path); })
+                    .catch(Components.utils.reportError);
+
+// CORRECTO (La función retorna un Promise, y el caller se encargará del rechazo)
+function myReadIfExists(path)
+{
+  return OS.File.exists(path).then(exists => { if (exists) myRead(path); });
+}
+ +

Ver también

+ + diff --git a/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html b/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html new file mode 100644 index 0000000000..1ec7e5477f --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/source-editor.jsm/index.html @@ -0,0 +1,1549 @@ +--- +title: source-editor.jsm +slug: Mozilla/JavaScript_code_modules/source-editor.jsm +translation_of: Mozilla/JavaScript_code_modules/source-editor.jsm +--- +
+

This component has been removed from the platform in Firefox 28.

+
+ +

{{ fx_minversion_header("11.0") }}

+ +

The source-editor.jsm JavaScript code module implements an editor specifically tailored for editing source code; its primary purpose is to provide support for web developer tools to display and edit web site code. The editor provided is Eclipse Orion.

+ +

To use it, you first need to import the code module into your JavaScript scope:

+ +
Components.utils.import("resource:///modules/source-editor.jsm");
+
+ +
Warning: Much of the functionality of the source editor is implemented by a secondary code module (by default, source-editor-orion.jsm). You must not directly import that code module; it is essentially an implementation detail. Its functionality is all exposed through source-editor.jsm.
+ +

Method overview

+ +

Initialization and destruction

+ + + + + + + + + + +
void destroy();
void init({{ domxref("Element") }} aElement, Object aConfig, Function aCallback);
+ +

Search operations

+ + + + + + + + + + + + + +
Number find(String aString, [optional] Object options); {{ fx_minversion_inline("12.0") }}
Number findNext(Boolean aWrap); {{ fx_minversion_inline("12.0") }}
Number findPrevious(Boolean aWrap); {{ fx_minversion_inline("12.0") }}
+ +

Event management

+ + + + + + + + + + +
void addEventListener(String aEventType, Function aCallback);
void removeEventListener(String aEventType, Function aCallback);
+ +

Undo stack operations

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Boolean canRedo();
Boolean canUndo();
void endCompoundChange();
Boolean redo();
void resetUndo(); {{ gecko_minversion_inline("12.0") }}
void startCompoundChange();
Boolean undo();
+ +

Display management operations

+ + + + + + + + + + + + + + + + +
void focus();
Number getTopIndex();
Boolean hasFocus();
void setTopIndex(Number aTopIndex);
+ +

Content management operations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Number getCharCount();
String getIndentationString(); {{ fx_minversion_inline("13") }}
String getLineDelimiter();
Number getLineCount();
Number getLineEnd(Number aLineIndex, Boolean aIncludeDelimiter); {{ fx_minversion_inline("14") }}
Number getLineStart(Number aLineIndex); {{ fx_minversion_inline("14") }}
String getMode();
String getText([optional] Number aStart, [optional] Number aEnd);
String getSelectedText();
void setMode(String aMode);
void setText(String aText, [optional] Number aStart, [optional] Number aEnd);
+ +

Selection operations

+ + + + + + + + + + + + + + + + + + + + + + + + + +
void dropSelection();
Number getCaretOffset();
Object getCaretPosition();
Object getSelection();
void setCaretOffset(Number aOffset);
void setCaretPosition(Number aLine, [optional] Number aColumn, [optional] Number aAlign);
void setSelection(Number aStart, Number aEnd);
+ +

Breakpoint management

+ + + + + + + + + + + + + +
void addBreakpoint(Number aLineIndex, [optional] String aCondition); {{ fx_minversion_inline("13") }}
Array getBreakpoints(); {{ fx_minversion_inline("13") }}
Boolean removeBreakpoint(Number aLineIndex); {{ fx_minversion_inline("13") }}
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
dirtyBooleanSet this value to false whenever you save the text; the editor will update it to true when the content is changed. You can then use this value to detect when the contents of the text are different from your most recent save. In addition, when this value changes, the "{{ anch("DirtyChanged") }}" event is sent. {{ gecko_minversion_inline("13.0") }}
editorElement{{ domxref("Element") }}The element containing the editor. When using the default Orion editor, this is a XUL {{ XULElem("iframe") }} element. Read only.
lastFindObject +

An object describing the result of the last find operation performed using the {{ manch("find") }}, {{ manch("findNext") }}, or {{ manch("findPrevious") }} method. Read only.

+ +

This object has the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
strStringThe last string that was searched for.
indexNumberAn integer value indicating the result of the most recent find operation; this is the index into the text at which str was found, or -1 if the string wasn't found.
lastFoundNumberThe index of the previous location at which str was found, for multiple find operations (such as {{ manch("find") }} followed by {{ manch("findNext") }}). This can be -1 if the string was never found.
ignoreCaseBooleantrue if the search was case sensitive; otherwise false.
+
readOnlyBooleanSet this value to true to make the editor read only, thereby preventing the user from making changes. Set it to false to allow editing.
+ +

Constants

+ +

Preference name constants

+ +

These constants define the names of preferences used by the source editor.

+ + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
SourceEditor.PREFS.COMPONENT"devtools.editor.component"A string indicating the name of the source editor engine to use; this is "orion" by default. The source editor code module loads a module by the name "source-editor-<component>.jsm" and exposes its API as part of the SourceEditor object.
SourceEditor.PREFS.EXPAND_TAB"devtools.editor.expandtab"A Boolean value that indicates whether or not to automatically expand tabs out to a series of spaces.
SourceEditor.PREFS.TAB_SIZE"devtools.editor.tabsize"An integer value that specifies the number of spaces per tab.
+ +

Editor mode constants

+ +

These constants are used to set the syntax highlighting mode for the editor by calling its {{ manch("setMode") }} method, or in the configuration object when first initializing the editor using its {{ manch("init") }} method.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
SourceEditor.MODES.CSS"css"Cascading Style Sheet.
SourceEditor.MODES.HTML"html"HTML document.
SourceEditor.MODES.JAVASCRIPT"js"JavaScript source code.
SourceEditor.MODES.TEXT"text"UTF-8 text document.
SourceEditor.MODES.XML"xml"XML document.
+ +

Theme constants

+ +

These constants are used to identify the available themes that can be used by the syntax highlighter. Only one is provided by default at this time.

+ + + + + + + + + + + + + + +
ConstantValueDescription
SourceEditor.THEMES.MOZILLA"mozilla"The default Mozilla syntax highlighter theme.
+ +

Configuration defaults constants

+ +

These constants represent the default values for each of the available configuration options. See {{ anch("The editor configuration object") }} for details on configuring the editor.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValue
SourceEditor.DEFAULTS.contextMenu"sourceEditorContextMenu"
SourceEditor.DEFAULTS.expandTabtrue
SourceEditor.DEFAULTS.highlightCurrentLinetrue {{ fx_minversion_inline("13") }}
SourceEditor.DEFAULTS.initialText""
SourceEditor.DEFAULTS.keysnull
SourceEditor.DEFAULTS.modeSourceEditor.MODES.TEXT
SourceEditor.DEFAULTS.readOnlyfalse
SourceEditor.DEFAULTS.showAnnotationRulerfalse {{ fx_minversion_inline("13") }}
SourceEditor.DEFAULTS.showLineNumbersfalse {{ fx_minversion_inline("13") }}
SourceEditor.DEFAULTS.showOverviewRulerfalse
SourceEditor.DEFAULTS.tabSize4
SourceEditor.DEFAULTS.themeSourceEditor.THEMES.MOZILLA
SourceEditor.DEFAULTS.undoLimit200
+ +

Event name constants

+ +

These constants provide the names of the editor events for which you can listen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
SourceEditor.EVENTS.BLUR"{{ anch("Blur") }}"Fired when the editor loses focus. {{ fx_minversion_inline("13.0") }}
SourceEditor.EVENTS.BREAKPOINT_CHANGE"{{ anch("BreakpointChange") }}"Fired when a new breakpoint is added, or when an existing breakpoint is removed. This happens both when the API is used to make the change or when the UI is used to do it. {{ fx_minversion_inline("13.0") }}
SourceEditor.EVENTS.CONTEXT_MENU"{{ anch("ContextMenu") }}"Fired when the editor's context menu is invoked, but before it's opened.
SourceEditor.EVENTS.DIRTY_CHANGED"{{ anch("DirtyChanged") }}"Fired when the dirty state of the editor is changed. The dirty state indicates whether or not there are unsaved changes to the text. {{ fx_minversion_inline("13.0") }}
SourceEditor.EVENTS.FOCUS"{{ anch("Focus") }}"Fired when the editor gains focus. {{ fx_minversion_inline("13.0") }}
SourceEditor.EVENTS.MOUSE_MOVE"{{ anch("MouseMove") }}"Fired when the user moves the mouse over a line annotation. {{ fx_minversion_inline("13.0") }}
SourceEditor.EVENTS.MOUSE_OUT"{{ anch("MouseOut") }}"Fired when the mouse pointer leaves a line annotation. {{ fx_minversion_inline("13.0") }}
SourceEditor.EVENTS.MOUSE_OVER"{{ anch("MouseOver") }}"Fired when the mouse pointer enters a line annotation. {{ fx_minversion_inline("13.0") }}
SourceEditor.EVENTS.SELECTION"{{ anch("Selection") }}"Fired when the current selection in the editor changes.
SourceEditor.EVENTS.TEXT_CHANGED"{{ anch("TextChanged") }}"Fired when the editor's content changes.
+ +

Methods

+ +

addBreakpoint

+ +

Adds a breakpoint to be triggered at a certain line in the code, under an optional condition.

+ +
Note: Implementing actual support for debugger features such as breakpoints is up to you. The editor simply tracks their existence and marks them with annotations in the editor.
+ +
void addBreakpoint(
+  Number aLineIndex,
+  [optional] String aCondition
+);
+
+ +
Parameters
+ +
+
aLineIndex
+
The 0-based line number at which to place the breakpoint.
+
aCondition {{ optional_inline() }}
+
A string describing the condition under which the breakpoint should be triggered. This information is simply recorded as part of the breakpoint annotation. NEED LINK TO TEXT ABOUT HANDLING BREAKPOINT CONDITIONS HERE.
+
+ +

addEventListener()

+ +

Adds a new event listener to the editor. You can listen for any of the events listed in {{ anch("Event name constants") }}. To stop listening for the event, call {{ manch("removeEventListener") }}.

+ +
void addEventListener(
+  String aEventType,
+  Function aCallback
+);
+
+ +
Parameters
+ +
+
aEventType
+
The name of the event type to listen for; see {{ anch("Event name constants") }} for possible values.
+
aCallback
+
The function to call when the specified event occurs.
+
+ +

canRedo()

+ +

Determines whether or not there are changes that can be redone.

+ +
Boolean canRedo();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

true if there are changes that can be redone, otherwise false.

+ +

canUndo()

+ +

Determines whether or not there are changes that can be undone.

+ +
Boolean canUndo();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

true if there are changes that can be undone, otherwise false.

+ +

destroy()

+ +

Destroys the editor, releasing resource it's allocated and removing event handlers it's installed. You should call this method when you're done using the editor object.

+ +
void destroy();
+
+ +
Parameters
+ +

None.

+ +

dropSelection()

+ +

Deselects the currently selected text.

+ +
void dropSelection();
+
+ +
Parameters
+ +

None.

+ +

endCompoundChange()

+ +

Ends a compound change that was previously started by calling {{ manch("startCompoundChange") }}. All changes made to the text between the two calls is considered to be a single edit for the purposes of undo operations.

+ +
void endCompoundChange();
+
+ +
Parameters
+ +

None.

+ +

find()

+ +

Finds a string in the editor's text.

+ +
Number find(
+  [optional] String aString
+  [optional] Object aOptions
+);
+
+ +
Parameters
+ +
+
aString {{ optional_inline() }}
+
The string for which to search. If not specified, the currently selected text in the editor is used as the search string.
+
aOptions {{ optional_inline() }}
+
An optional object containing properties customizing the search operation. See {{ anch("Find options") }} for details.
+
+ +
Return value
+ +

Returns an integer indicating the offset into the text at which the first character of the found string is located, or -1 if the string wasn't found.

+ +
Find options
+ +

The aOptions object can customize the search operation. It may have the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
backwardsBooleanIf true, the search begins at start (or the end of the text, if start is not specified) and progresses toward the beginning of the text. Otherwise the search progresses forward. The default is false.
ignoreCaseBooleanIf true, the search is performed in a case-insensitive manner; otherwise case is considered. The default is false.
startNumberAn integer value indicating the offset into the text at which to begin the find operation. The default is 0 if backwards is false, or text.length if backwards is true.
+ +

findNext()

+ +

Finds the next occurrence of the search operation started by the last call to {{ manch("find") }}.

+ +
Note: This ignores the value you specified for backwards in the original search; it always searches forward.
+ +
Number findNext(
+  Boolean aWrap
+};
+
+ +
Parameters
+ +
+
aWrap
+
If true, the search operation will wrap around to the beginning of the text. Otherwise, the search stops if the end of the text is reached.
+
+ +
Return value
+ +

The offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found.

+ +

findPrevious()

+ +

Finds the previous occurrence of the search operation started by the last call to {{ manch("find") }}.

+ +
Note: This ignores the value you specified for backwards in the original search; it always searches backward.
+ +
Number findNext(
+  Boolean aWrap
+};
+
+ +
Parameters
+ +
+
aWrap
+
If true, the search operation will wrap around to the end of the text. Otherwise, the search stops if the beginning of the text is reached.
+
+ +
Return value
+ +

The offset into the text at which the next occurrence of the string begins, or -1 if the string isn't found.

+ +

focus()

+ +

Makes the editor the focus for user input.

+ +
void focus();
+
+ +
Parameters
+ +

None.

+ +

getBreakpoints

+ +

Returns an array of all of the breakpoints currently set on the code in the editor instance.

+ +
Array getBreakpoints();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

An Array of all of the breakpoints in the editor instance. Each breakpoint is an Object with the following properties:

+ + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
lineNumberThe 0-based line number on which the breakpoint is set.
conditionStringThe condition string that was specified when the breakpoint was set.
+ +

getCaretOffset()

+ +

Returns the current caret position (insertion point) as an offset into the text.

+ +
Number getCaretOffset();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

The 0-based offset into the text at which newly-typed characters will be inserted.

+ +

getCaretPosition()

+ +

Returns an object describing the position of the caret (insertion point) in terms of its line number and column.

+ +
Object getCaretPosition();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

The returned object describes the caret position:

+ + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
lineNumberThe 0-based line number on which the caret is located.
colNumberThe 0-based column number on which the caret is located.
+ +

getCharCount()

+ +

Returns the number of characters in the editor's content.

+ +
Number getCharCount();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

The number of characters in the editor's text.

+ +

getIndentationString

+ +

Returns a string containing the character or characters that are inserted when the user presses the tab key.

+ +
String getIndentationString();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

If tabs are configured to be expanded into spaces (that is, the expandTab property is true), the returned string is comprised of the number of spaces specified by the tabSize property when the editor was initialized by calling {{ manch("init") }}. Otherwise, the returned string is simply "\t".

+ +

getLineCount()

+ +

Returns the number of lines of text in the editor.

+ +
Number getLineCount();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

The number of lines of text in the document being edited.

+ +

getLineDelimiter()

+ +

Returns a string containing the character or characters that are used as the end of each line of text. This may be, for example, "\n", "\r", or "\r\n".

+ +
String getLineDelimiter();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

A string containing the character or characters that delineate lines of text.

+ +

getLineEnd

+ +

Returns the character offset of the character after the specified line number in the text.

+ +
Number getLineEnd(
+  Number aLineIndex,
+  [optional] Boolean aIncludeDelimiter
+);
+
+ +
Parameters
+ +
+
aLineIndex
+
Zero-based offset to the line number to which to return the end offset.
+
aIncludeDelimiter {{ optional_inline() }}
+
If false, the returned offset is to the first character of the end-of-line delimiter if the specified line (this is the default). If true, the returned offset is the offset to the first character of the following line.
+
+ +
Return value
+ +

The offset to the last character in the specified line, or -1 if the specified line number is out of range.

+ +

getLineStart

+ +

Returns the character offset of the first character of the specified line in the text.

+ +
Number getLineStart(
+  Number aLineIndex
+);
+
+ +
Parameters
+ +
+
aLineIndex
+
Zero-based offset to the line number to which to return the end offset.
+
+ +
Return value
+ +

The offset to the first character in the specified line, or -1 if the specified line number is out of range.

+ +

getMode()

+ +

Returns the current syntax highlighting mode for the document's contents.

+ +
String getMode();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

A string indicating the type of file being edited, as previously set using either the mode property when configuring the editor, or by a call to {{ manch("setMode") }}. See {{ anch("Editor mode constants") }} for possible values.

+ +

getSelectedText()

+ +

Returns the currently-selected text.

+ +
String getSelectedText();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

The currently-selected text in the editor.

+ +

getSelection()

+ +

Returns an object indicating the offsets to the first and last characters that are currently selected.

+ +
Object getSelection();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

An object describing the currently selected range of text in the editor:

+ + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
startNumber0-based offset to the first character in the current selection.
endNumber0-based offset to the end of the current selection. The character at this offset is not included in the selection; it's essentially the first character after the selection.
+ +

If there's no selection, the current caret position is returned for both start and end.

+ +

getText()

+ +

Returns the text in the specified range within the editor, or all of the editor's text if no range is given.

+ +
String getText(
+  [optional] Number aStart,
+  [optional] Number aEnd
+);
+
+ +
Parameters
+ +
+
aStart {{ optional_inline() }}
+
The offset to the first character to retrieve.
+
aEnd {{ optional_inline() }}
+
The offset to the last character to retrieve. If this isn't provided, all text from aStart (or the beginning of the document, if that wasn't provided either) to the end of the text is returned.
+
+ +
Return value
+ +

A string containing the specified range of text (or all of the text, if a range wasn't provided).

+ +

getTopIndex()

+ +

Returns the line number of the first line currently visible in the editor, based on the current scroll position of the editor.

+ +
Number getTopIndex();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

The line number of the first visible line; this is a 0-based value, so the first line of the document is line number 0.

+ +

init()

+ +

Initializes the editor. You must call this, and wait until your callback is called, before calling any other Source Editor methods.

+ +
void init(
+  Element aElement,
+  Object aConfig
+  Function aCallback
+);
+
+ +
Parameters
+ +
+
aElement
+
The DOM {{ domxref("element") }} in which to place the editor.
+
aConfig
+
An object containing a set of properties used to configure the editor. See {{ anch("The editor configuration object") }} for details.
+
aCallback
+
A function that will be called when the editor has been fully loaded and initialized.
+
+ +

hasFocus()

+ +

Determines whether or not the editor is currently focused.

+ +
Boolean hasFocus();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

true if the editor is currently focused, otherwise false.

+ +

redo()

+ +

Redoes the most recently undone change in the editor.

+ +
Boolean redo();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

true if a change was redone, otherwise false.

+ +

removeBreakpoint

+ +

Removes the breakpoint from the specified line of code.

+ +
Boolean removeBreakpoint(
+  Number aLineIndex
+);
+
+ +
Parameters
+ +
+
aLineIndex
+
The 0-based line number from which to remove the breakpoint.
+
+ +
Return value
+ +

true if a breakpoint was removed, otherwise false.

+ +

removeEventListener()

+ +

Removes an event listener (previously established by calling {{ manch("addEventListener") }} from the editor.

+ +
void removeEventListener(
+  String aEventType,
+  Function aCallback
+);
+
+ +
Parameters
+ +
+
aEventType
+
The name of the event type to stop listening for; see {{ anch("Event name constants") }} for possible values.
+
aCallback
+
The function to stop calling when the specified event occurs.
+
+ +

resetUndo

+ +

Resets the undo stack, removing all possible undo and redo operations from the stack.

+ +
void resetUndo();
+
+ +
Parameters
+ +

None.

+ +

setCaretOffset()

+ +

Sets the current caret position (insertion point) for newly-entered text.

+ +
void setCaretOffset(
+  Number aOffset
+);
+
+ +
Parameters
+ +
+
aOffset
+
The 0-based offset into the text at which to place the caret.
+
+ +

setCaretPosition()

+ +

Sets the current caret position given a line number and column number.

+ +
void setCaretPosition(
+  Number aLine,
+  [optional] Number aColumn,
+  [optional] Number aAlign
+);
+
+ +
Parameters
+ +
+
aLine
+
The 0-based line number on which to place the caret.
+
aColumn {{ optional_inline() }}
+
The 0-based column number at which to place the caret; if you don't provide this parameter, the caret is placed at the beginning of the line specified by aLine.
+
aAlign {{ optional_inline() }}
+
How to position the line with respect to the viewport when scrolling the line into view. This may be one of SourceEditor.VERTICAL_ALIGN.TOP, SourceEditor.VERTICAL_ALIGN.CENTER, and SourceEditor.VERTICAL_ALIGN_BOTTOM. See {{ anch("Alignment constants") }} for details. The default is SourceEditor.VERTICAL_ALIGN.TOP.
+
+ +

setMode()

+ +

Sets the current syntax highlighting mode for the text being edited.

+ +
void setMode(
+  String aMode
+);
+
+ +
Parameters
+ +
+
aMode
+
A string indicating the file type being edited. See {{ anch("Editor mode constants") }} for possible values.
+
+ +

setSelection()

+ +

Selects the specified range of text.

+ +
void setSelection(
+  Number aStart,
+  Number aEnd
+);
+
+ +
Parameters
+ +
+
aStart
+
The 0-based offset to the first character to select in the text.
+
aEnd
+
The offset to the first character after the range you wish to select.
+
+ +
Remarks
+ +

It's important to note that the character at offset aEnd is not included in the selection.

+ +

setText()

+ +

Replaces a range of text in the editor with the specified string. If you don't specify a range, the entire text is replaced.

+ +
void setText(
+  String aString,
+  [optional] Number aStart,
+  [optional] Number aEnd
+);
+
+ +
Parameters
+ +
+
aString
+
The text to put into the editor.
+
aStart {{ optional_inline() }}
+
The 0-based offset to the first character in the text to replace.
+
aEnd {{ optional_inline() }}
+
The offset to the last character to replace. If you don't specify this value, the entire string from aStart (or the first character in the text, if you don't specify aStart) to the end of the text is replaced.
+
+ +

setTopIndex()

+ +

Scrolls the text as necessary to place the specified line number at the top of the view.

+ +
void setTopIndex(
+  Number aTopIndex
+);
+
+ +
Parameters
+ +
+
aTopIndex
+
The 0-based line number to place at the top of the editor's view.
+
+ +

startCompoundChange()

+ +

Begins a compound change in the editor. All changes made between a call to startCompoundChange() and its corresponding call to {{ manch("endCompoundChange") }} are considered to be a single operation on the undo stack.

+ +
void startCompoundChange();
+
+ +
Parameters
+ +

None.

+ +

undo()

+ +

Undoes the most recent change made in the editor.

+ +
Boolean undo();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

true if a change was undone or false if there were no changes to undo.

+ +

The editor configuration object

+ +

When you call {{ manch("init") }} to initialize the editor, you pass in an object that contains properties configuring the editor's features. That object may contain any combination of the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantTypeDescription
contextMenuString | {{ domxref("Element") }}A reference to the context menu to display when the user right-clicks in the editor. This may be either a string providing the ID of a XUL {{ XULElem("menupopup") }} or an {{ domxref("Element") }} object of type {{ XULElem("menupopup") }}. See XXXXX for details on how to work with the context menu. {{ fx_minversion_inline("13.0") }}
expandTabBooleanA Boolean value indicating whether or not tab characters should be expanded out to spaces. This value is overridden by the user preference named by SourceEditor.PREFS.EXPAND_TAB.
highlightCurrentLineBooleanA Boolean value indicating whether or not to highlight the line on which the text caret is currently located. {{ fx_minversion_inline("13.0") }}
initialTextStringThe default initial text to be in the editor when it's created. By default, this is the empty string, indicating there should be no text on startup. {{ fx_minversion_inline("13.0") }}
keysArrayAn array of objects defining custom keyboard bindings. See XXXXX for details. {{ fx_minversion_inline("13.0") }}
modeStringA string indicating the default syntax highlighting mode; by default, the content is assumed to be plain text. See {{ anch("Editor mode constants") }} for permitted values.
placeholderTextStringThe default initial text to be in the editor when it's created; by default, an empty string. This is deprecated starting in Firefox 13; use initialText instead. {{ deprecated_inline("13.0") }}
readOnlyBooleanA Boolean value indicating whether or not the source editor should be read only. {{ fx_minversion_inline("13.0") }}
showAnnotationRulerBooleanA Boolean value indicating whether or not to display the annotations gutter/ruler. See XXXXX for details. {{ fx_minversion_inline("13.0") }}
showLineNumbersBooleanA Boolean value indicating whether or not the line numbers gutter should be displayed. {{ fx_minversion_inline("13.0") }}
showOverviewRulerBooleanA Boolean value indicating whether or not to show the overview gutter/ruler. This presents an overview of the current annotations in the editor, such as the breakpoints. {{ fx_minversion_inline("13.0") }}
tabSizeNumberA number indicating how many spaces each tab character should occupy. This default can be overridden by the user preference named by SourceEditor.PREFS.TAB_SIZE.
themeStringA string indicating the default syntax highlighting theme to use; you may use one of the predefined values listed in {{ anch("Theme constants") }}, or you may provide your own CSS file reference.
undoLimitNumberA number indicating how many steps the undo stack should hold.
+ +

See {{ anch("Configuration defaults constants") }} for a list of the default values for these configuration options.

+ +

Events

+ +

There are a number of events that can be sent by the source editor, as listed in {{ anch("Event name constants") }}. This section provides details on each of those events and their properties.

+ +

ContextMenu

+ +

The "ContextMenu" event is sent when the editor's context menu is invoked, and has the following properties.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
xNumberThe X-coordinate at which the mouse cursor was located when the context menu was invoked. This value is relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position.
yNumberThe Y-coordinate at which the mouse cursor was located when the context menu was invoked. This value is relative to the document being edited; that is, 0 is the left edge of the document, regardless of horizontal scroll position.
screenXNumberThe X-coordinate at which the mouse cursor was located when the context menu was invoked, relative to the screen. This value comes from the DOM contextmenu's event.screenX property.
screenYNumberThe Y-coordinate at which the mouse cursor was located when the context menu was invoked, relative to the screen. This value comes from the DOM contextmenu's event.screenY property.
+ +

TextChanged

+ +

The "TextChanged" event is sent when the contents of the editor change. It has the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
startNumberThe character offset into the document at which the change occurred.
removedCharCountNumberThe number of characters removed from the document.
addCharCountNumberThe number of characters added to the document.
+ +

Selection

+ +

The "Selection" element is sent when the selection within the editor changes. It has the following properties:

+ + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
oldValueObjectThe previously-selected range of text.
newValueObjectThe newly-selected range of text.
+ +

The objects used for oldValue and newValue each have two properties of type Number: start and end, describing the start and end positions of the range of characters.

+ +

The "Focus" event is sent when the editor is focused. It has no properties.

+ +

The "Blur" event is sent when the editor loses focus. It has no properties.

+ +

MouseMove

+ +

The "MouseMove" event is sent when the user moves the mouse pointer over a line of text content. It has the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
event{{ domxref("MouseEvent") }}The DOM "mousemove" event.
xNumberThe X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position..
yNumberThe Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.
+ +

MouseOver

+ +

The "MouseOver" event is sent when the user moves the mouse pointer enters a line of text content. It has the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
event{{ domxref("MouseEvent") }}The DOM "mouseover" event.
xNumberThe X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position.
yNumberThe Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.
+ +

MouseOut

+ +

The "MouseOut" event is sent when the user moves the mouse pointer over a line of text content. It has the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
event{{ domxref("MouseEvent") }}The DOM "mouseout" event.
xNumberThe X-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the top of the very first line of text in the document, regardless of vertical scroll position..
yNumberThe Y-coordinate of the mouse pointer relative to the document being edited; that is, 0 is the left edge of the very first column of text in the document, regardless of horizontal scroll position.
+ +

The "BreakpointChange" event is sent when a breakpoint is changed. This can be any of the following changes:

+ + + +

The event has the following properties:

+ + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
addedArrayAn array of breakpoint objects representing all of the breakpoints that have been added; see {{ anch("Breakpoint objects") }} for details.
removedArrayAn array of breakpoint objects representing all of the breakpoints that have been removed; see {{ anch("Breakpoint objects") }} for details.
+ +

The "DirtyChanged" event is sent when the dirty state of the editor changes. This state indicates whether or not there have been changes to the text since the last time the content was saved. This event has the following properties:

+ + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
oldValueBooleanThe previous state of the dirty flag.
newValueBooleanThe new state of the dirty flag.
+ +

If the dirty flag is true, the document has not been saved since the last time its text was changed. You can set the dirty state of the document by setting the value of the dirty attribute.

diff --git a/files/es/mozilla/javascript_code_modules/timer.jsm/index.html b/files/es/mozilla/javascript_code_modules/timer.jsm/index.html new file mode 100644 index 0000000000..5b667e8c2b --- /dev/null +++ b/files/es/mozilla/javascript_code_modules/timer.jsm/index.html @@ -0,0 +1,32 @@ +--- +title: Timer.jsm +slug: Mozilla/JavaScript_code_modules/Timer.jsm +tags: + - Add-ons + - JavaScript + - JavaScript temporizador + - modulo + - temporizador +translation_of: Mozilla/JavaScript_code_modules/Timer.jsm +--- +

{{ gecko_minversion_header("22") }}

+ +

El modulo de código JavaScript Timer.jsm contiene implementaciones puras de Javascript de setTimeout, clearTimeout, setInterval, y clearInterval Que son compatibles con las funciones de ventana DOM, pero que pueden ser usadas por código que no tiene acceso a la ventana DOM(por ejemplo, Los módulos de código de Javascript o los scripts de contenido de frames).

+ +

Para usar Timer.jsm, primero impórtalo:

+ +
Components.utils.import("resource://gre/modules/Timer.jsm");
+
+ +

Entonces llama a setTimeout y a clearTimeout como lo harías en una ventana DOM, por ejemplo:

+ +
let timeoutID = setTimeout(function() { console.log("¡Hola!"); }, 500);
+
+clearTimeout(timeoutID);
+
+ +

De forma similar, puedes usar setInterval y clearInterval de la siguiente manera:

+ +
let intervalID = setInterval(function() { console.log("¡Sucederá cada 500ms!"); }, 500);
+
+clearInterval(intervalID);
diff --git a/files/es/mozilla/localization/index.html b/files/es/mozilla/localization/index.html new file mode 100644 index 0000000000..1a5f47f30a --- /dev/null +++ b/files/es/mozilla/localization/index.html @@ -0,0 +1,24 @@ +--- +title: La Localización en Mozilla +slug: Mozilla/Localization +tags: + - Landing + - Localización + - Mozilla + - NeedsTranslation + - TopicStub + - Translation + - l10n +translation_of: Mozilla/Localization +--- +

Localizacíon (L10n) es el proceso por el cual se traduce la interfaz de usuario de un software desde un idioma a otro, realizando los cambios necesarios para que se adapte a la cultura de destino. Estos recursos están destinados a todos aquellos interesados en los aspectos técnicos de la Localización, ya sean programadores o contribuidores.

+ + + +

Vease también

+ +

Localización de MDN (Relacionado con la localización de documentos aquí en MDN)

+ +

Localización de Apps Este conjunto de documentos aplica más específicamente a la localización de apps, incluyendo las apss de Firefox OS.

+ +

L10n Documentos de referencia para el API de L10n que Mozilla usa para localizar Firefox OS.

diff --git a/files/es/mozilla/localization/l10n_style_guide/index.html b/files/es/mozilla/localization/l10n_style_guide/index.html new file mode 100644 index 0000000000..adde6a55af --- /dev/null +++ b/files/es/mozilla/localization/l10n_style_guide/index.html @@ -0,0 +1,363 @@ +--- +title: Mozilla L10n Style Guide +slug: Mozilla/Localization/L10n_Style_Guide +tags: + - Localization + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Localization/L10n_Style_Guide +--- +

Intro

+ +
Style guides define the standard against which we determine a translation's quality. They contain rules that are both defined by Mozilla and by Mozilla's localization communities on how to best translate text in Mozilla products, websites, and other projects. Style guides are used to both translate and evaluate a translation's quality. By following these rules, a translator has a better chance of producing a high quality translation that represents Mozilla values and culture. Some examples of international style guides created by other organizations are:
+ + + +
This style guide is broken up into two main parts: the first contains rules that are language-specific and must be defined by each Mozilla l10n community (covering language-specific style, terminology, and units); the second contains general rules that Mozilla has defined for translators of all languages that can help you translate well (covering principles of accuracy and fluency). Please adapt part one of this style guide to your l10n community's rules for style, terminology, and units. Wherever possible, refer to existing national standards for units, spelling, and grammar in your community's adaptation of the first part of this style guide.
+ +

+ +

Language-specific Mozilla style

+ +
    +
+ +

Style

+ +
Your localization community's style is largely up to you to define. It is a part of your community's instructions and standards for translating strings within each project type. Style encompasses various elements, such as formality, tone, natural expression, handling cultural references, idioms, or slang, and maintaining consistency with Mozilla and 3rd party branding and style guides. Your localization community should define these style elements for localizing Mozilla projects into your language. Let's go through these main aspects of Style.
+ +
+ +
Formality and Tone
+ +
When determining the formality or tone of a Mozilla l10n project in your language, ask yourself these questions:
+ + + +
In fact, localization should not use a level of formality higher or lower than required by this community-defined style guideline. An example of this would be using "click here" (not formal) vs. "please click here" (more formal). Also, the tone employed throughout a l10n project(s) should stay consistent within itself. 
+ +
+ +
Natural expression
+ +
Using natural expressions make your localization sound natural to a native speaker. If your translation does not follow the community defined language guidelines for translating content that contains local or natural expressions, this results in a mediocre and/or awkward translation. Teams should be careful to address those and keep them in mind while translating, which is why it is an important section to address in a Style Guide. An example of a natural expression in a translation would be translating the Spanish phrase, "En ocho días." In English, one might translate this as, "in eight days" or "in a week." The latter is the more natural translation, although both could be considered correct.
+ +
+ +
In this section, form guidelines for how to perform a natural sounding localization. This might take some time and experience to find the right examples to include or create the right guidelines for your language.
+ +
+ +
Handling cultural references, idioms, and slang
+ +

Cultural references, idioms, and slang require a full understanding of these references between the cultures of your source and target languages. An example of a cultural reference in English would be the phrase, "kick-off meeting." This is a reference that uses an American football term. It means a meeting to begin a project. To translate it, you can follow one of two approaches:

+ +
    +
  1. Find an equivalent reference phrase in your language.
    2. +
  2. Remove the cultural reference and translate the core meaning (e.g., "a commencement meeting") 
    3. +
+ +

Define a policy for handling these cultural references, idioms, and slang that you can make standard across all projects. Consider resources you can refer back to in order to find cultural equivalents and list them in this section of your style guide (e.g., a slang dictionary in your language).  

+ +
Style consistency
+ +
Finally, adherence to Mozilla and third-party branding and style guides should be respected throughout a localization project. More information on Mozilla-specific branding rules can be found here: https://www.mozilla.org/en-US/styleguide/identity/firefox/branding/. For example, some brand names should never be translated, such as "Firefox".  For other brands that do not have any branding guidelines, your localization community must define whether to translate them. Be extra careful to check on branding rules before deciding to translate a name or not (whether for Mozilla or for a third-party) and to list them here in your community's l10n style guide.
+ +
+ +
+

Terminology

+ +
Here are a few existing term bases we approve of for software/internet terminology and definitions (though not limited to):
+ + + +
You should be consistent in the use of existing reliable appropriate term bases in your language.  These term bases could be developed and approved by the community, or leveraged from another party that adhere to national, international or local standards for software and internet terminology.  Avoid the following:
+ + + +
Tips on translating difficult concepts
+ +
Translating terms representing difficult concepts is a tricky task. Here are some ideas to help you translate terms that do not have equivalents in your language:
+ + + +
Developing new term bases
+ +
What is your community's process for identifying and creating a new termbase? Here are a few things to keep in mind:
+ + + +

Units and Grammar 

+ +
Many elements of unit or grammar do not exist or apply to all languages. If you find one of these elements that does not apply to your language, please remove it from your style guide. For those definitions of units and grammar that apply document the reference used or how it will be applied to the translation.
+ +
+ +
The translation should strive to achieve proper unit conversions for currency, measurements, etc. for the target audience.
+ +
+ +

Units and Unit Conversion

+ +
Date Format
+ +
How are the date formats for weeks and months expressed in the following forms:
+ + + +
Reference material can be find here: https://en.wikipedia.org/wiki/Date_format_by_country
+ +
+ +
Calendar view: 
+ + + +
Time Format
+ +
How is time expressed in your language? Including 0-24 hr expression, hour, minute and second.
+ +
+ +
Numerals 
+ +
How are numerals and percentages expressed in your language? 
+ +
    Example: 1.23 (decimal separator) or 1,000 (thousand separator) using comma or period. 
+ +
+ +
Currency 
+ +
What are other widely used currency and symbols used in your country/language for paid apps. 
+ +
+ +
Units
+ +
Do you use the imperial, metric or nautical system for measuring weight, distance, etc.? Source strings will use the imperial system (e.g., miles, pounds, feet, gallons, etc.). Target translations should convert imperial metrics to their measurement system.
+ +
+ +
Names  
+ +
What are the order of family name and given name in your language?  Do people use multiple family names? What about patronymics? (The W3C has an introduction to this topic here.)
+ +
+ +
Address and Postal Code Format 
+ +
What is the format in your language?  
+ +
    Example: most Asian countries start from big to small: [Country] [postal code][state/province][city][district][street number and name][building and suite numbers][addressee]
+ +
    Countries of European languages start from small to big: [addressee][street number and name][building and suite numbers][district][city][state/province][postal code][Country]
+ +
   
+ +
Telephone Number format
+ +
Space separators between digits can be different for area codes such as State (Province) and City,
+ +
+ +

Spelling And Grammar Checks

+ +
Many languages have national or international standards that define spelling and grammar rules. When defining these rules for your community, make reference to those standards wherever possible. Do you have automated tests for spell checking and grammar? List those tools and dictionaries here and how regularly they should be used.
+ +
+ +
Tense
+ +
Do you have standards for verb forms that indicate or express the time, such as past, present, or future, of the action or state? What is your policy on tense consistency for certain use cases? For example, for phrases that ask a user to make an action (like "Download Firefox"), do you use a future tense, a command tense, or a neutral tense?  (See: https://en.wikipedia.org/wiki/Grammatical_tense )
+ +
+ +

Word Forms

+ +
Pluralization  
+ +
What is the appropriate form of expressing pluralization in your language?  List all forms of plural forms and examples if there is more than one.  Additional discussions can be found Here. https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals and here:  http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html
+ +
+ +
Abbreviations  
+ +

How are abbreviations expressed in your language?
+     Example, in English, abbreviations are made by removing most vowels and only using the first 3-5 consonants followed by a period (e.g., abbreviation = abbr.).  (see: https://en.wikipedia.org/wiki/Abbreviation)    

+ +

If your language does not have a standard way of expressing abbreviations, do you simply leave them in English?

+ +
Acronyms 
+ +
+

Are there standard translations of widely accepted acronyms such as CD, DVD, MB in your language? If not, do they remain in English? (see: https://en.wikipedia.org/wiki/Acronym )

+
+ +
Punctuation
+ +
Do you use different punctuation rules in your Firefox localization than what your language standard defines?
+ +
    Example: do you use a period at the end of every user interface element translation or only some? What is the international/national standard for punctuation in your language?
+ +
+ +
Emphasis
+ +

Is there an international/national standard for capitalization in your language?

+ + + +
Hyphens and compounds 
+ +
What is the appropriate way of using hyphens and compounds in your language?  ( https://en.wikipedia.org/wiki/Compound_%28linguistics%29 ) 
+ +
+ +
Prepositions and articles 
+ +
What is the appropriate form of expressing prepositions and articles in your language?
+ +
+ +
Diacritics and Special characters  
+ +
Does your language use any special or accented characters and will they be applied and preserved in sort orders, and other aspects of the translation?  (see: https://en.wikipedia.org/wiki/Diacritic )
+ +
+ +
Quotes  
+ +
+

Does your language have a standard use for quotation marks, parenthesis, or brackets?

+
+ +
Whitespace 
+ +
+

Does your language require the use of white space around words, sentences, paragraphs, etc.? If so, in what ways?  (see: https://en.wikipedia.org/wiki/Sentence_spacing_in_language_and_style_guides )

+
+ +
User Interface Elements        
+ +
+ + +
+ +

General Mozilla l10n style

+ +

Accuracy

+ +

Meaning-based translation

+ +
When it comes to translation, meaning is everything. A translator needs to understand the source text's meaning exactly. You then find its most closely linked equivalent in your own language, without adding or subtracting meaning in your translation. Finding meaning-based equivalents between languages can be difficult. To help concentrate your thoughts, ask yourself questions like:
+ + + +

Sometimes translation memory and machine translation tools can offer bad suggestions for a translation. If you use either as part of your translation workflow, make sure to correct the suggestions before submitting them. Avoid literal translation at all costs. Watch out for words that might sound or look the same between English and your language, but have a different meaning.

+ +

Should not be translated

+ +
Shortcuts and accesskeys
+ +

In Firefox and other software it's possible to use keyboard shortcuts to invoke a specific command. For example, to open a file in Firefox you can press the combination of keys CTRL+O (Cmd+O on Mac). The accelerator key depends on the operative system, but the letter itself is normally localizable. This is what is called a shortcut, or commandkey. For example, the Open File… menu item is stored as

+ +
<!ENTITY openFileCmd.label "Open File…">
+<!ENTITY openFileCmd.accesskey "O">
+<!ENTITY openFileCmd.commandkey "o">
+ +

The commandkey is stored in openFileCmd.commandkey (sometimes the string has .key in the identifier). Normally you should not localize this key, since shortcuts are often common across the entire operative system (e.g. CTRL+S to Save) or similar products (CTRL+T to open a new tab in most browsers). But it needs to be localized if the letter is not available in your keyboard layout. For example, in Italian the character [ can be accessed through ALT+è, a command key [ would not work.

+ +

In the code fragment above you see also an accesskey defined for Open File…. Accesskeys are used to access a UI element from the keyboard. Example: if File menu has an accesskey F, and the Open file… menu has O, you can press ALT+F to access the menu, and then O to open a file.

+ +

If the label is File, and the accesskey is F, it will be displayed as "File" on Windows and Linux, with an underscored F. If the accesskey was "O", so a character not available in the original label, it will be displayed underlined between parenthesis: "File (O)".

+ +

One important thing to determine is if, for your locale, it makes sense to have localized accesskeys: for example, if most users will use a keyboard with a different layout (English), it might make sense to keep the English original accesskey instead of using a letter available in your localization.

+ +

Accesskeys, like commandkeys, have their own lines within .dtd and .properties files and are usually identified by .accesskey in the string ID.

+ +
Variables
+ +

Variables should never be translated. You can recognize a variable within a string by its beginning with a specific character (e.g., $, #, %, etc.) followed by a combination of words without spacing. For example, $BrandShortName and %S are variables.  You can move a variable around within a string, if the translation of the string requires it.

+ + + +

Brand names, as well as copyright and trademarks should never be translated, nor transliterated into a non-Latin based script. See the Mozilla branding guide for more details.

+ +

Translating culture-specific references

+ +

At times there will be English content included in Mozilla products or web projects (e.g., marketing campaigns) that makes references to American culture and concepts. When translating these, it is best to find an equivalent cultural reference within your own culture that accurately conveys the meaning of the English reference. For example, an American might say, "Good job, home run!" A home run is a baseball reference for a successful outcome. An appropriate translation would be an equivalent metaphor within your culture. Using soccer as an example, you might translate "Good job, home run!" into "Good job, nice goal!" in your language.

+ +

[Add a note about Mozilla culture.]

+ +

Legal content

+ +

Mozilla projects will often contain legal content in the form of user agreements, privacy statements, etc. When reviewing the translation of legal content, Mozilla localizers should do so according to the criteria concerning accuracy, fluency, style, and terminology found within this style guide and according to Mozilla culture and values.

+ +

Fluency

+ +
+ +
To produce a fluent translation, not only should the translation follow the language's standard grammar, punctuation, and spelling rules, but it should avoid being ambiguous, incoherent, or inconsistent, and unintelligible.
+ +
+ +
To avoid ambiguity, the translator must thoroughly understand the meaning behind the source text, including any references that text might include. For example, if the English source text uses the word, "it", the translator must know what "it" is to avoid an ambiguous translation. Clearly understanding the source text will also allow a translator to make the source text's logical connections in their own translation. This helps to keep the translation coherent.
+ +
+ +
Inconsistency can pop up in many forms. A translator must be consistent in their use of abbreviations, references, and links within each localization project. They must also be consistent with Mozilla and the localization communities' style guides and approved terminology. Abbreviations, like terminology, should come from either a standard reference (like a dictionary of abbreviations) or should follow your language's rules for creating abbreviations. Once used, the abbreviation must remain consistent every place that it is used in the translation. Cross-references (or links) must also be consistently used within a translation. If a text contains a hyperlink URL to a support article in English, the translation should also contain a hyperlink to a translation of that support article (if available) or the English version. Links should not redirect to other pages nor should they be broken and unusable.
+ +
+ +
Finally, there are times that a translation simply doesn't make sense. It's hard to put your finger on what exactly is wrong with it, but you know it is unintelligible and not fluent. While this is uncommon, it's important to report these unintelligible translations and offer suggestions to correct them.
diff --git a/files/es/mozilla/localization/l10n_style_guide/your_language/index.html b/files/es/mozilla/localization/l10n_style_guide/your_language/index.html new file mode 100644 index 0000000000..29ee4fc4b7 --- /dev/null +++ b/files/es/mozilla/localization/l10n_style_guide/your_language/index.html @@ -0,0 +1,40 @@ +--- +title: Contenido de Mozilla localizado en tu idioma +slug: Mozilla/Localization/L10n_Style_Guide/Your_Language +tags: + - Guía de estilo +translation_of: Mozilla/Localization/L10n_Style_Guide/Your_Language +--- +

{{draft}}

+ +
+
        Abreviaturas
+
            ¿Cómo se expresan las abreviaturas en tu idioma?
+
        Numerales y métricas
+
¿Cómo se expresan los numerales y métricas en tu idioma?
+
        Porcentajes
+
            ¿Cómo se expresan los porcentajes en tu idioma?
+
        Grupos de dígitos
+
            ¿Cómo se expresan los grupos de dígitos en tu idioma?
+
        Acrónimos
+
            Los acrónimos sólo deberían traducirse si existe un término oficial equivalente en tu idioma.
+
        Género
+
            ¿Cómo expresa el género tu idioma?
+
        Tono/Registro
+
            ¿cuál es el tono apropiado para tus traducciones? ¿Cambia según el producto y la audiencia objetivo? Si así fuera, ¿qué tonos deberían evitarse?
+
        Pronombres
+
            ¿Cuál es la forma apropiada de expresar pronombres en tu idioma?
+
        Uso de mayúsculas
+
            ¿Cuál es el uso de mayúsculas apropiado en tu idioma?
+
        Guiones y palabras compuestas
+
            ¿Cuál es la forma apropiada de usar guiones y escribir palabras compuestas en tu idioma?
+
        Preposiciones y artículos
+
            ¿Cuál es la forma apropiada de expresar preposiciones y artículos en tu idioma?
+
        Puntuación
+
            ¿Cuál es la forma apropiada de expresar la puntuación en tu idioma?
+
        Pluralización
+
            ¿Cuál es la forma apropiada de expresar plurales en tu idioma?
+
        Voz
+
            ¿Cuál es la forma apropiada de expresar la voz en tu idioma?
+
+
diff --git a/files/es/mozilla/localization/localizing_with_pontoon/index.html b/files/es/mozilla/localization/localizing_with_pontoon/index.html new file mode 100644 index 0000000000..3c0d6cb5b0 --- /dev/null +++ b/files/es/mozilla/localization/localizing_with_pontoon/index.html @@ -0,0 +1,139 @@ +--- +title: Localizando con Pontoon +slug: Mozilla/Localization/Localizing_with_Pontoon +tags: + - Localization +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +

Pontoon es una herramienta de localización (l10n) basada en la web, del tipo "lo que ves es lo que obtienes" usada para localizar contenido web. En Mozilla, usamos Pontoon para localizar los sitios web de Mozilla y la interfaz de aplicación de Firefox OS, conocida como Gaia. Pontoon es una herramienta muy simple e intuitiva que requiere muy poco o nada de habilidades técnicas para el proceso de localización. Aquí discutiremos cómo usar Pontoon para localizar proyectos, desde el primer inicio de sesión hasta finalizar tus contribuciones. En el camino, señalaremos algunas agradables funciones que te harán más eficiente y facilitarán tus contribuciones de localización.

+ +
+

¿Eres un desarrollador? Lee sobre cómo implementar Pontoon en tu sitio web (en inglés) o aprende sobre cómo involucrarte en GitHub.

+
+ +

Primeros pasos

+ +

La página de inicio de Pontoon es muy fácil de usar. Para empezar a localizar el proyecto, haz clic en el ícono de Persona y conéctate. A continuación, simplemente selecciona el proyecto en el que deseas trabajar y tu localización en los menús desplegables. Pontoon abrirá automáticamente el proyecto de esa localización para que puedas comenzar. Nótese que para el propósito de este tutorial, usaremos el sitio web de Firefox Affiliates para demostrar la funcionalidad y forma de trabajo de Pontoon. Y ahí está, abierto dentro de Pontoon:

+ +

Browser app and workspace

+ +

Barra de herramientas principal

+ +

Como puedes ver, la mayor parte de la interfaz es tomada por el sitio siendo traducido. Solo la barra de herramientas de la parte superior pertenece a Pontoon, conteniendo los siguientes elementos (de izquierda a derecha):

+ +

Main toolbar

+ +

List of strings

+ +

Abre una barra lateral con una lista de todas las cadenas a localizar.

+ +

Project selector (Affiliates)

+ +

Cambia entre proyectos a localizar.

+ +

Resource selector (Homepage)

+ +

Cambia entre recursos del proyecto a localizar, como subpáginas o archivos de localización. Oculto si no hay recursos disponibles para el proyecto.

+ +

+ +
+
+ +

Locale selector (Slovenian)

+ +

Cambia entre lenguajes a localizar.

+ +

Go

+ +

Abre la selección de proyecto-recurso-localización realizara en los desplegables.

+ +

Progress indicator

+ +

Muestra tu progreso en el recurso siendo localizado. Más detalles están disponibles en el cuadro emergente.

+ +
+
+ +

User menu

+ +

Permite tareas específicas del usuario, como subir al repositorio, descargar archivos y desconectarse.

+ +

Info menu

+ +

Entega información importante, como la línea de tiempo anticipada del proyecto y una lista de atajos del teclado.

+ +

Estamos listos, ¿te parece que hagamos algunas traducciones?

+ +
+
+ +

Alright, how about we do some translating now?

+ +
+
+ +

Traducir cadenas

+ +

Al usar Pontoon para localizar, tienes un par de opciones para traducir tus cadenas. Puedes traducir en contexto, fuera de contexto o usar una combinación de ambas. Empezaremos viendo la traducción en contexto.

+ +

En contexto

+ +

El modo de traducción en contexto de Pontoon es lo que le destaca sobre otros. Esto abre una página web (o app web) y permite la edición en tiempo real de esa página. Aquí tienes cómo traducir tu primera cadena:

+ +

In-context localization

+ +
    +
  1. Colócate sobre el texto que deseas traducir con tu ratón.
    2. +
  2. Un botón de edición aparece sobre ese texto. Apriétalo para activar el modo de traducción.
    3. +
  3. Reemplaza el texto original con su traducción a tu lenguaje.
    4. +
  4. Apreta el botón guardar para dejar grabada tu traducción.
    5. +
+ +
+

Fuera de contexto

+ +

Algunas cadenas son imposibles de traducir en contexto, como por ejemplo los contenidos de la etiqeuta <title> en sitios web y cadenas con ubicadores o diferentes formas plurales. Haciendo clic en el ícono de hamburguesa en la barra de herramientas principal, una lista de todas las cadenas y traducciones disponibles se abrirá en la barra lateral. También puedes usar la barra lateral para localización fuera de contexto:

+ +

Out-of-context localization: list Out-of-context localization: translate

+ +
    +
  1. Aprieta en la cadena que deseas traducir.
    2. +
  2. El panel de traducción con la cadena original y sus detalles (por ejemplo con comentarios) se abre.
    3. +
  3. Traduce la cadena en el área de traducción de abajo.
    4. +
  4. Aprieta el botón "Save" para guardar tu traducción.
    5. +
+ +

Mientras traduces cadenas fuera de contexto, las traducciones también aparecerán en el sitio web, si es que también pueden ser traducidas en contexto.

+ +

Ayudas para la traducción

+ +

Como puedes ver, sugerencias del historial, la memoria de traducción, traducciones de máquina y de otras localizaciones están disponibles en el panel de traducción fuera de contexto. Les llamamos Ayudas para la traducción y aquí tienes cómo cada una de ellas te ayudarán mientras traduces cadenas:

+
+ +

Translation helpers: History Translation helpers: Machinery Translation helpers: Other locales Translation helpers: Search

+ +

History

+ +

Muestra traducciones sugeridas previamente, incluyendo las de otros usuarios.

+ +

Machinery

+ +

Muestra coincidencias de varios servicios: memoria de traducción interna, Mozilla Transvision, memoria de traducción de código abierto, terminología de Microsoft y traducción por máquina.

+ +

Other locales

+ +

Muestra las traducciones coincidentes realizadas por otras localizaciones.

+ + + +

Casi como la opción "Máquina", pero utiliza la palabra clave proveída como parámetro de entrada en lugar de la cadena original.

+ +

Al hacer clic en una sugerencia, esta es copiada al área de traducción.

+ +
+
+ +

Publicando tu localización

+ +

Supón que ahora deseas publicar tu trabajo de localización subiéndolo a un repositorio. ¡Pontoon también te permite hacer eso! De hecho, lo hace por tí sincronizando de forma automática con los repositorios a cada hora. ¡Ahora puedes darte una palmadita en la espalda, bailar un poco, ir a dormir o hacer algo más para celebrar tu trabajo!

diff --git a/files/es/mozilla/localization/notas_de_localizacion/index.html b/files/es/mozilla/localization/notas_de_localizacion/index.html new file mode 100644 index 0000000000..3c5936a2b9 --- /dev/null +++ b/files/es/mozilla/localization/notas_de_localizacion/index.html @@ -0,0 +1,25 @@ +--- +title: Notas de Localizacion +slug: Mozilla/Localization/Notas_de_Localizacion +tags: + - Guía + - Internacionalizacion + - Localización + - Mozilla +translation_of: Mozilla/Localization/Localization_notes +--- +

Localizadores usualmente funcionan en el archivo localizable sin el contexto los archivos de fuente incluyendo las cadenas localizadas; es importante anadir comentarios en los archivos localizados, tambien. Generalmente, estos comentarios se conocen como notas de localizacion. Existe un formato especifico para estas notas, el cual es descrito en este documento.

+ +

Es importante seguir el formato lo mas parecido posible. Existen muchas herramientas automaticas que analizan estos comentarios para acceso facil y son usados por los localizadores.

+ +

Archivos DTD

+ +
<!-- NOTA DE LOCALIZACION (nombre de entidad): comentario -->
+
+ +

Archivos de Propiedades

+ +
# NOTA DE LOCALIZACION (llave): comentario
+
+ +

Comentarios atraves del archivo deben usar el mismo formato, al principio del archivo (pero despues de la informacion de licencia) y simplemente inserte la referencia (nombre de entidad/llave) .

diff --git a/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html b/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html new file mode 100644 index 0000000000..3475c95e53 --- /dev/null +++ b/files/es/mozilla/localization/quick_start_guide/fase_qa/index.html @@ -0,0 +1,209 @@ +--- +title: Fase de PR +slug: Mozilla/Localization/Quick_start_guide/fase_QA +translation_of: Mozilla/Localization/Quick_start_guide/QA_phase +--- +

Después de todo ese duro esfuerzo de localización estamos seguros que no sólo deseas ver tu trabajo funcionando, sino que quieres asegurarte que sea exacto y fiel. Si no tienes mucha experiencia con código, podrías incluso estar preocupado de que no se haya roto algo (Uuuy!). Ahora te guiaremos a través de la realización de algunas pruebas de control de calidad en tu trabajo para que te asegures de ir por buen camino.

+ +

Si estás localizando sitios web de Mozilla, tu trabajo se desplegará poco después de realizarlo sin necesidad de construir un paquete de idioma. Si ese fuera el caso, esta parte de la guía podría no ser completamente aplicable para tí. De cualquier forma, siéntete libre de saltar a la siguiente sección dando click en el vínculo "Siguiente", ubicado en la parte inferior de la página.

+ +

Para ver tu trabajo en Firefox (u otra aplicación de Mozilla), necesitarás tener un paquete de idioma construído para instalarlo en tu 'instancia' local.

+ +

Construcción manual y automatizada

+ +

Con sólo dar click en un botón, algunas herramientas de L10n (como Narro y Koala) automáticamente crearán paquetes de idiomas para tí. Si estás usando una de estas herramientas, no dudes en saltarte a la sección Probar tu L10n y ver tu trabajo. Si no estás usando una de esas herramientas, déjanos guiarte a través de la construcción manual de tu propio paquete de idioma.

+ +
Nota: ¿Recuerdas todos esos requisitos previos de las herramientas que te preguntamos, y que eran necesarios para realizar la instalción en la configuración inicial?  Pues bien, los necesitararemos casi todos ellos. Si aún no los has instalado, este es el momento de hacerlo.
+ +

Instrucciones preliminares

+ +

Vamos a usar los siguientes directorios de archivo para este ejemplo:

+ +
    Tu directorio de trabajo (root)/mozilla-aurora (fuente de en-US, tomado de http://hg.mozilla.org/releases/mozilla-aurora)/
+    l10n-central (directorio de archivos de L10n, uno por cada L10n; a menudo denominado "l10n base")/
+    tu-codigo-de-idioma (un directorio con tus archivos de L10n, en este ejemplo usaremos prueba-x)
+
+    Ejemplo: root/mozilla-aurora y root/l10n-central/prueba-x
+
+ +

Además, necesitarás copiar y traducir el archivo toolkit/defines.inc directamente de en-US, antes de que puedas construir. Esto se debe a un fallo en la lógica de construcción.

+ +

Por favor sigue la estructura de arriba de cerca o ajusta los comandos siguientes de acuerdo con tu instalación personalizada.

+ +

Para copiar este archivo en el directorio apropiado, haz lo siguiente:

+ +
    +
  1. Ve al directorio de trabajo desde tu terminal de linea de comandos (es decir, donde creaste la estructura de carpetas descrita anteriormente).
    2. +
  2. Ingresa los siguientes comandos:
    3. +
+ +
mkdir -p l10n-central/prueba-x/toolkit/
+
+cp mozilla-aurora/toolkit/locales/en-US/defines.inc l10n-central/prueba-x/toolkit/defines.inc
+
+ +

Tarán! Copiados!

+ +

Para finalizar, necesitarás un archivo llamado .mozconfig para proceder con el manual de construcción. Este archivo contiene las instrucciones de construcción necesarias.

+ +

Para crear y configurar este archivo, sigue estas insctrucciones:

+ +
+

Hasta antes de la corrección del fallo 1063880 en mozilla-aurora y mozilla-beta, al construir los paquetes de idioma en contra de estos dos árboles, usted debía:

+ +
    +
  1. +

    retirar  ac_add_options --disable-compile-environment  de .mozconfig en el paso 3

    +
    2. +
  2. +

    usar ./mach build config  después del paso 4

    +
    3. +
+
+ +
    +
  1. Actualiza el código de fuente de Mozilla:
    2. +
+ +

$ cd mozilla-aurora
+ $ hg pull -u

+ +
    +
  1. Inserta el siguiente comando para crear el archivo  .mozconfig : $ nano -w .mozconfig
    2. +
  2. Inserta las siguientes líneas en tu archivo .mozconfig :
    3. +
+ +
mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/../firefox-build
+ac_add_options --disable-compile-environment
+ac_add_options --with-l10n-base=../l10n-central # path relative to MOZ_OBJDIR
+ac_add_options --enable-application=[browser or mail]
+
+ +

Necesitarás especificar qué aplicación estás localizando en la cuarta línea (por ej. para Firefox sería browser, Thunderbird debería ser mail, etc).

+ +
    +
  1. Inserta el siguiente comando para realizar la configuración: $ ./mach configure
    2. +
  2. Una vez tu línea de comandos finalice devolviendo la salida del 'comando de configuración', ve al directorio recientemente creado: $ cd ../firefox-build/browser/locales
    3. +
+ +

Ahora estás listo para construir! En este punto puedes seleccionar entre dos opciones de construcción:

+ + + +

Visita los enlaces de arriba para aprender cómo hacer estas pruebas de construcción.

+ +

Probar tu L10n y observar tu trabajo

+ +

Ahora que tienes tu paquete-de-idioma o L10n re-empaquetada, vamos a hablar de cómo ver tu trabajo y probarlo en tu aplicación.

+ +

Al probar el paquete-de-idioma estarás un paso más cerca de tener tu L10n añadida a los lanzamientos oficiales. Sigue los pasos siguientes para probar tu localización

+ +
    +
  1. Instala Aurora en tu lenguaje preferido.
    2. +
  2. Instala el paquete-de-idioma .xpi que acabas de crear (o exportar)
    3. +
  3. Selecciona tu lenguaje usando el Interruptor de Localización Rápida o la add-ons del Interruptor de Localización, yendo a Herramientas->Lenguaje->Tu código de localización del lenguaje.
    4. +
  4. Reinicia el navegador y comienza tus pruebas.
    5. +
+ +

En este punto deberías estar en la capacidad de ver todo tu trabajo funcionando. Da click aquí para consultar las guías de cómo realizar pruebas para tu localización.

+ +

¡No pierdas tu trabajo!

+ +

¡Tu trabajo es MUY importante! Realmente odiaríamos ver que perdieras algo de él. Después de probar tu localización, debes enviarlo a un repositorio remoto, que servirá como una copia de seguridad de tu trabajo y permitirá a otros seguir tu progreso.  which will serve as a backup for your work and will let others follow your progress. Vamos a ir por el proceso más abajo.

+ +

Los equipos oficiales de localización usan repositorios que se encuentran en hg.mozilla.org. Antes que un equipo se vuelva oficial, nos gusta hacer que los localizadores se sientan cómodos con los comangos Hg que permiten realizar el trabajo de cloning, pulling, committing, y pushing hacia un repositorio experimental.  Usamos un servicio web llamado Bit Bucket para empezar el proceso de aprendizaje.

+ +
Nota: Debes tener Mercurial configurado antes de que comiences. Ese paso se encuentra en la página de instalación inicial. Si no la has completado aún, no te preocupes, ¡te experaremos!
+ +

Haciendo push a tu repositorio

+ +

Hay un par de cosas que debes tomar en cuenta antes de hacer push a tu repositorio:

+ + + +

Las siguientes instrucciones te ayudarán a aprender cómo usar tu repositorio Hg.

+ +
    +
  1. Después de que tu repositorio sea creado por los drivers l10n, por favor visita la URL para tu repositorio. We'll use x-testing here for our example. You can do this by entering the following URL into your browser: http://hg.mozilla.org/l10n-central/x-testing
    2. +
  2. Now, navigate to your locale's directory on your local machine.
    3. +
+ +

If you're using Koala, this should be located at /path/to/your/koala.project/locale/3.6/x-testing, otherwise, it should be located at /path/to/your/working_dir/l10n_base/x-testing.

+ +

In this directory, you should have an hg repository. You might have created it yourself by running hg init or hg clone or you might have had it created by Koala when you were setting up a new localization project. Also at this point, you shouldn't have any uncommitted changes (i.e., running the hg status command should show nothing). Let's see what the last revision in this repository is.

+ +
    +
  1. Enter the following command: $ hg log -l 1
    2. +
+ +

You should see an output similar to the one below:

+ +
changeset:   0:7c543e8f3a6a
+tag:         tip
+user:        Your Name <email@example.com>
+date:        Mon Nov 23 18:08:25 2009 +0100
+summary:     Added search bar strings
+
+ +
    +
  1. Now compare the local repository on your machine with the remote Hg repository by entering this command: $ hg outgoing http://hg.mozilla.org/l10n-central/x-testing
    2. +
+ +

The hg outgoing command compares the two repositories and lists all changesets that are present locally, but not in the remote repository. These changesets will need to be "pushed" to the remote repository. You can expect to see output like this:

+ +
comparing with http://hg.mozilla.org/l10n-central/x-testing
+searching for changes
+
+changeset:   0:7c543e8f3a6a
+tag:         tip
+user:        Your Name <email@example.com>
+date:        Mon Nov 23 18:08:25 2009 +0100
+summary:     Added search bar strings
+
+ +
    +
  1. Let's now push this changeset. Enter the following command: hg push http://hg.mozilla.org/l10n-central/x-testing
    2. +
  2. Mercurial will connect to your repo and ask you to provide your account information (i.e., the username and the password).
    3. +
+ +
real URL is http://hg.mozilla.org/l10n-central/x-testing
+pushing to http://hg.mozilla.org/l10n-central/x-testing
+searching for changes
+http authorization required
+realm: hg.mozilla.org HTTP
+user: your_id
+password:
+
+ +

After you enter your account information, the changeset will be pushed.

+ +
adding changesets
+adding manifests
+adding file changes
+added 1 changesets with 2 changes to 2 files
+bb/acl: your_id is allowed. accepted payload.
+quota: 979.7 KB in use, 150.0 MB available (0.64% used)
+
+ +

Your changeset has been successfully pushed to your repository!

+ +

As you begin to move through your translations, you should commit the changes locally and push your work to this experimental repository. For instance, if you have finished translating all the .dtd and .properties files in your x-testing/browser/chrome/browser/ directory, then you should run these commands:

+ +
$ hg status
+$ hg commit -m "Translated browser/chrome/browser/"
+$ hg outgoing
+$ hg push http://hg.mozilla.org/l10n-central/x-testing
+ +

Note that due to the distributed nature of Hg, hg commit saves the changes locally (i.e., in your computer's Hg repository). You can see the history of commits with hg log. After doing hg commit, you still need to send the changes to the remote repository. This is where hg push comes in. This sends your commits to the remote repository.

+ +

Now you're ready to proceed to the release phase!

+ +

 

+ +

{{ PreviousNext("Localization_Quick_Start_Guide/Translation_phase", "Localization_Quick_Start_Guide/Release_phase") }}

diff --git a/files/es/mozilla/localization/quick_start_guide/index.html b/files/es/mozilla/localization/quick_start_guide/index.html new file mode 100644 index 0000000000..d437983005 --- /dev/null +++ b/files/es/mozilla/localization/quick_start_guide/index.html @@ -0,0 +1,55 @@ +--- +title: Guía de inicio rápido a la Localización +slug: Mozilla/Localization/Quick_start_guide +tags: + - Localización +translation_of: Mozilla/Localization/Quick_start_guide +--- +

Bienvenido a la Localización de Mozilla (abreviado l10n)!

+ +

Ya sea que estés aquí para poner en marcha tu propia Localización en el proyecto Mozilla o para unirte al proyecto de una Localización existente, has venido al lugar correcto. Esta guía está repleta con toda la información básica y técnica que necesitas para poder comprometerte con el programa Mozilla l10n. Te llevaremos a través una serie de pasos para introducirte, desde la organización del entorno inicial hasta incluso probar y lanzar tu propia localización. A lo largo de esta guía, conocerás los temas referidos a la variedad de proyectos en los que puedas contribuir y a las herramientas que necesitas para poder localizarlos.

+ +

Cuando lleguemos a ejemplos específicos, los llevaremos del proyecto Firefox, ya que es el proyecto localizado más amplio dentro de Mozilla. Mientras más te acerques al final de esta guía, más apto estarás para poder cambiar Firefox en tu entorno local y después ver esos cambios en la interface del mismo. Por último, cuando termines esta guía, tendrás las herramientas necesarias para empezar a contribuir al proyecto.

+ +

Recuerda que esta guía solo te enseñará los aspectos técnicos de Mozilla l10n. Visita la página L10n Process para conocer todo el proceso.

+ +
+

 

+ +

Organización inicial

+Trabajo de preparación técnica antes de localizar.
+ +
+

 

+ +

Fase de traducción

+Tutorial de herramientas l10n para la traducción
+ +
+

 

+ +

Fase QA

+ +

Tutoriales para comprobar l10n.

+
+ +
+

 

+ +

Etapa de lanzamiento

+ +

Pasos para enviar tu trabajo de localización

+
+ +
+

 

+ +


+ Estas cuatro etapas constituyen el lado técnico del programa l10n. Para conocer más sobre alguna de estas, haga clic en cualquiera de los links de arriba. Antes de llegar al cuadro grande (Etapa de lanzamiento), sugerimos que empiece por la fase verde (Organización inicial) y de ahí hacia su derecha.

+ +

 

+
+ +

Nota: Esta guía está escrita para dos clases de colaboradores: Aquellos que se incorporan en una nueva localización y aquellos que comparten una localización existente. Es importante conocer qué información aplica a cada tipo de colaborador. Para ayudarte a conocer cuál es la información más relevante, presta atención al color de las fuentes utilizadas en el texto. Toda la información proveniente de aquellos que empiezan una nueva localización tendrá como fuente de letra el color naranja, y toda la información proveniente de aquellos que se incorporan con una localización existente tendrá como fuente de letra el color azul.

+ +

{{ Next("Localization_Quick_Start_Guide/Initial_setup") }}

diff --git a/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html b/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html new file mode 100644 index 0000000000..3f8a4874a7 --- /dev/null +++ b/files/es/mozilla/localization/quick_start_guide/initial_setup/index.html @@ -0,0 +1,99 @@ +--- +title: Configuración inicial +slug: Mozilla/Localization/Quick_start_guide/Initial_setup +tags: + - Localización +translation_of: Mozilla/Localization/Quick_start_guide/Initial_setup +--- +

Como pre-requisito para contribuir al programa de L10n, necesitas tener acceso a códigos, herramientas y un entorno local apropiadamente configurado (es decir, tu computadora personal). También necesitas determinar si ya existe en tu zona otro proyecto de localización. Aquí abordaremos temas relacionados con las cuentas necesarias, así como las herramientas y las respectivas configuraciones que necesitas montar antes de contribuir.

+ +

Nuevo o existente

+ +

Antes que nada, necesitas saber si crearás una nueva localización o si te unirás a una existente. Esto determinará qué información es más relevante para ti a lo largo de esta guía.

+ +

Esto es lo que tendrás que hacer:

+ +

Revisa el siguiente enlace para ver si ya existe una localización en tu zona: Directorio de la comunidad de localizacion.

+ +

   a.    Si la comunidad ya existe, contáctalos y pregúntales cómo puedes ayudar.

+ +

   b.   Si la comunidad no existe, envía un correo-e al new-locales newsgroup para recibir información adicional.

+ +

Cuentas

+ +

Hay un puñado de cuentas que necesitas tener en mente mientras empiezas. Estas no son necesarias para empezar a contribuir, pero las necesitarás cuando te estés preparando para producir un lanzamiento oficial. Por ahora, solamente ten en cuenta que estas serán importantes cuando tus esfuerzos progresen. Estas cuentas almacenarán tus códigos, contribuciones y te ayudarán a producir una localización oficial.

+ +

Hg (Mercurial)

+ +

Mercurial es el entorno de control de revisión que aloja el principal código fuente de Mozilla, así como el código localizado para cada localización oficial de Mozilla. Necesitarás esto para localizar las aplicaciones de Mozilla. El acceso de confirmación a Hg no es necesario para empezar a localizar. Después de tener un poco de experiencia con Hg, es posible que quieras tener el acceso de confirmación. En ese punto, tienes que visitar la página Mozilla Commiter y seguir el proceso descrito allí. Aquí hay un ejemplo de fallo que ilustra bien el proceso. Usa esta plantilla de fallo cuando se presente un fallo de registro en tu cuenta de Hg. Envía a new locales newsgroup una solicitud sobre crear tu repositorio de la zona.

+ +

SVN

+ +

SVN es un entorno de control de revisión que Mozilla utiliza para alojar las páginas web de la fuente de Mozilla y sus ubicaciones para cada localización oficial de Mozilla. Observa esta página wiki referida a cómo tener acceso a la SVN. La guía de localizadores para SVN, te ayudará a aprender los comandos de SVN más importantes para l10n. Envía a new locales newsgroup una solicitud sobre crear tu repositorio de la zona.

+ +

Herramientas l10n basadas en la web

+ +

 Hablaremos sobre esto más adelante. Por ahora, solo ten en cuenta que si decides usarlos, tal vez necesites crearte una cuenta personal.

+ +

Mozilla LDAP

+ +

Una vez que estés preparado para tener tu localización registrada en los repositorios principales de Mozilla, necesitarás una cuenta Mozilla LDAP. Envía a new locales newsgroup una solicitud sobre crear tu cuenta LDAP.

+ +

Componente Bugzilla de una zona especifica
+ Tener un componente Bugzilla específico para tu zona nos ayudará a seguir tu progreso en la localización desde los primeros pasos hasta su lanzamiento oficial. Además, nos notificará cuando estés teniendo problemas únicos de tus trabajos de equipo de localización. Envía a new locales newsgroup una solicitud sobre crear tu componente Bugzilla de la zona.

+ +

Herramientas de entorno local

+ +

Al igual que las cuentas, hay algunas herramientas de entorno que deberías instalar en tu computadora. Estas herramientas te ayudarán a almacenar tus contribuciones, aplicaciones de Mozilla, paquetes de lenguaje y a probar tu trabajo.

+ +

Hg (Mercurial)

+ +

Como notaste arriba, nosotros usamos Mercurial para mantener el código fuente de Mozilla y el código localizado. No solo necesitarás un repositorio de localización para almacenar tus localizaciones, sino también que lo tendrás que tener instalado y configurado en tu computadora. Puedes encontrar todo lo que necesites saber sobre instalar y configurar Mercurial para tu localización Aquí.

+ +

compare-locales

+ +

compare-locales es un script de Python que te ayuda a probar tu trabajo sin necesidad de ejecutar Firefox u otra aplicación. Las instrucciones de instalación se encuentran Aquí.

+ +

L10n checks

+ +

L10n checks es otro script de Python que te ayuda a probar tu trabajo sin necesidad de ejecutar una aplicación. Las instrucciones de instalación las puedes encontrar Aquí.

+ +

           autoconf 2.13 

+ +

autoconf es una utilidad fundamental para crear aplicaciones de Mozilla y paquetes de lenguaje. Para estos, usamos la versión 2.13 o una mayor. Puedes encontrar los archivos fuente y las instrucciones de instalación Aquí.

+ +

wget

+ +

wget es una utilidad de línea de comando que te permite recuperar archives usando protocolos de internet. Nosotros lo usamos para recuperar los datos de los repositorios. Puedes encontrar los archives fuente e instrucciones de instalación Aquí.

+ +

Perl

+ +

Perl es un lenguaje de programación que te ayudará a crear paquetes de lenguaje y aplicaciones de Mozilla. Puedes encontrar los archivos fuente y las instrucciones de instalación Aquí.

+ +

Python

+ +

Python es un lenguaje de programación en el cual muchos de nuestros script de pruebas l10n son escritos. Puedes encontrar los archivos fuente y las instrucciones de instalación Aquí.

+ +

Locale Switcher o Quick Locale Switcher

+ +

Ambos, tanto Locale Switcher como Quick Locale Switcher son add-ons para las aplicaciones de Mozilla. Cada uno es necesario para permitirte a ti ver tu trabajo dentro de la aplicación de Mozilla. Puedes instalar estos add-ons buscándolos en el administrador de add-ons de Firefox o siguiendo estos links: Locale Switcher, Quick Locale Switcher.

+ +

Un sólido editor de texto basado en unicode

+ +

Aquí hay algunas sugerencias:

+ +

·         Windows: Notepad++ o Notepad2

+ +

·         GNU/Linux: vim, gedit o Kate

+ +

·         Mac OS X: TextWrangler                                                          

+ +

            GNU make

+ +

Make es una herramienta que controla la generación de ejecutables. Puedes encontrar la versión 3.79.1 o una mayor aquí. Desafortunadamente, otras variedades de Make no lo harán.

+ +

Fin de la organización inicial

+ +

Ahora que has finalizado tu organización inicial, es momento de la mejor parte: ¡Traducir!

+ +

{{ PreviousNext("Localization_Quick_Start_Guide", "Localization_Quick_Start_Guide/Translation_phase") }}

diff --git a/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html b/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html new file mode 100644 index 0000000000..0b0c7402a8 --- /dev/null +++ b/files/es/mozilla/localization/web_localizability/creating_localizable_web_content/index.html @@ -0,0 +1,58 @@ +--- +title: Creating localizable web content +slug: Mozilla/Localization/Web_Localizability/Creating_localizable_web_content +tags: + - Desarrollo web + - Internacionalizacón + - Localizabilidad + - Localización +translation_of: Mozilla/Localization/Web_Localizability/Creating_localizable_web_content +--- +

Contenido del texto

+ + + +

Customizaciones por local

+ + + +

Imágenes

+ + diff --git a/files/es/mozilla/marketplace/apis/index.html b/files/es/mozilla/marketplace/apis/index.html new file mode 100644 index 0000000000..4736fa334f --- /dev/null +++ b/files/es/mozilla/marketplace/apis/index.html @@ -0,0 +1,42 @@ +--- +title: Bibliotecas de utilidad y APIs +slug: Mozilla/Marketplace/APIs +tags: + - Apps + - Firefox OS + - Guía + - Marketplace + - Principiante +translation_of: Archive/Mozilla/Marketplace/APIs +--- +
+

Cuando se trata de la codificación de funcionalidad para Firefox Marketplace en tus aplicaciones y páginas web, tendrás que usar las bibliotecas de utilidad del Marketplace, APIs de la web y APIs del Marketplace. Esta página presenta estas dos opciones, describe cuando las puedes usar y ofrece enlaces para obtener más información acerca de ellas.

+
+ +

Bibliotecas de utilidad del Marketplace

+ +

Las bibliotecas de utilidad del Marketplace están diseñadas para facilitar tus necesidades diarias de codificación protegiéndote de las complejidades de la APIs de la web y el Marketplace. Actualmente solo existe una biblioteca, pero otras estarán disponibles a medida que las propiedades del Marketplace se expandan.

+ + + +

APIs de la web

+ +

Tus aplicaciones del Marketplace necesitarán usar APIs de la web para ciertas funciones:

+ + + +

APIs del Marketplace

+ +

Para los requisitos más comunes de codificación de aplicaciones no deberías necesitar de las APIs del Marketplace. Algunas actividades, como crear tu propia tienda, si necesitan de su uso; pero donde tus requerimientos sean soportados, una biblioteca de utilidad del Marketplace probablemente sea mejor opción.

+ +

La documentación para las APIs del Marketplace se encuentra en readthedocs.org aquí. Si necesitas de información mas detalla sobre estas APIs, por favor únete a la lista de correos de dev-marketplace

+ +
+

La documentación de las APIs del Marketplace es usada para identificar las APIs del Marketplace que están en desarrollo. Por lo tanto, puede que incluya detalles de APIs que no están disponibles para el Marketplace público.

+
+ +

 

diff --git a/files/es/mozilla/marketplace/faq/index.html b/files/es/mozilla/marketplace/faq/index.html new file mode 100644 index 0000000000..fa4c4a91cc --- /dev/null +++ b/files/es/mozilla/marketplace/faq/index.html @@ -0,0 +1,30 @@ +--- +title: Preguntas frecuentes del Marketplace de Firefox OS +slug: Mozilla/Marketplace/FAQ +translation_of: Archive/Mozilla/Marketplace/FAQ +--- +
+
+ ¿Cómo puedo enviar una nueva aplicación?
+
+ Ver Enviar una aplicación.
+ +
+ ¿Cuál es el proceso de aprobación?
+
+ Para el Developer Preview, todas las aplicaciones con un manifiesto válido son aprobadas automáticamente.
+
+ ¿Necesitan mis aplicaciones cumplir con una política de contenido?
+
+ Las restricciones de conenido primarias del Marketplace de Firefox OS están para prevenir la actividad maliciosa o ilegal. La política será similar a la política de contenido para complementos de Firefox. Las políticas serán finalizadas antes de llegar al lanzamiento de la beta del Marketplace.
+
+ ¿Cómo venderá mi aplicación el Marketplace de Firefox OS?
+
+
+ Nota: Las aplicaciones pagas y los pagos dentro de las aplicaciones están actualmente deshabilitados en el Marketplace de Firefox OS (agosto de). Se espera que estén disponibles nuevamente en un futuro cercano.
+
+
+ ¿Quién aloja la aplicación?
+
+ Usted aloja todos los archivos de su aplicación en su propio servidor. Cuando envía una aplicación al Marketplace de Firefox OS, usted provee la URL del archivo de manifiesto de su aplicación, que el Marketplace lee y verifica. Puede subir íconos, capturas de pantalla, etc. para promover la aplicación en el Marketplace de Firefox OS.
+
diff --git a/files/es/mozilla/marketplace/index.html b/files/es/mozilla/marketplace/index.html new file mode 100644 index 0000000000..1bb3d078b0 --- /dev/null +++ b/files/es/mozilla/marketplace/index.html @@ -0,0 +1,114 @@ +--- +title: Firefox Marketplace +slug: Mozilla/Marketplace +tags: + - Apps + - B2G + - Firefox OS + - Marketplace + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace +--- +
+

El Firefox Marketplace es una tienda online, abierta y no-propietaria para aplicaciones web. En esta zona encontrarás toda la información necesaria para crear y publicar aplicaciones web en el Firefox Marketplace. Encuentra información acerca de cómo hacer aplicaciones exitosas, opciones de entrega, monetización, publicación y actualización de aplicaciones, y las librerías y APIs necesarias para aprovechar todas las características del Marketplace.

+
+ +
+

Mozilla está trayendo sus valores fundamentales — la apertura, la libertad, la elección del usuario — al mundo de las apps.

+ +

Usando tecnología estándar web, lenguajes y herramientas del Firefox Marketplace puedes publicar Open Web Apps (Aplicaciones de Web Abierta), de manera gratuita o de pago. Estas aplicaciones pueden ser empaquetadas, ejecutadas dentro de Firefox, o almacenadas en tu propio servidor web. Las aplicaciones publicadas están disponibles para los usuarios de Firefox en computadoras, dispositivos Android y teléfonos con sistema operativo Firefox donde sea que estén en el globo. Los usuarios descubren tus aplicaciones con facilidad en el Marketplace de Firefox usando la sección de aplicaciones destacadas, las diferentes categorías de aplicaciones y un poderoso motor de búsqueda. Los usuarios pueden acceder de manera instantánea a aplicaciones gratis, o comprar aplicaciones de pago mediante tarjeta de crédito o facturación por operadora.

+
+ +
+
+

Publicación de tu app

+ +
+
Publicando en el Firefox Marketplace
+
+
+
Documentos particulares para publicar una aplicación en el Firefox Marketplace.
+
+
+
Opciones de publicación de tu app
+
Una vez que hayas construido una Open Web App (Aplicación Web Abierta), hay difererentes opciones disponibles para publicar y que tu app salga al mundo. En este artículo se explica lo que está disponible.
+
Temas generales para la publicación de Aplicaciones
+
+

Información general y tips útiles para la publicación de aplicaciones de web abierta.

+
+
APIs del Firefox Marketplace
+
Enlace a la principal referencia de guías que cubren las APIs del Firefox Marketplace, las cuales puedes usar para configurar los métodos de pago de una aplicación, automatizar la presentación de aplicaciones, y mucho más.
+
+
+ +
+

Monetización

+ +
+
Haciendo dinero con tu app
+
Has trabajado muy duro haciendo funcionar el código de tu última app pero, ¿cómo puedes obtener algo a cambio cuando la publicas?. Esta sección avanza a través de toda la información que necesitarás para implementar los pagos en tu aplicación, ya sean pagos en el Marketplace o dentro de tu aplicación.
+
+ +

Herramientas para desarrolladores de apps

+ + + +

Creando tu propia tienda

+ +
+
Creando una tienda
+
No es necesario que utilices el Marketplace de Firefox para lanzar o distribuir tu aplicación.
+
+
+
+ + + +
    +
  1. Presentación y revisión de la aplicación + +
      +
    1. Enviar una aplicación al Firefox Marketplace
      2. +
    2. Obtener una clasificación para tu aplicación
      3. +
    3. Criterios de revisión de Marketplace
      4. +
    4. Captura de pantalla para la revisión de la aplicación en Marketplace
      5. +
    5. Política de privacidad
      6. +
    6. Pruebas de aplicación y resolución de problemas
      7. +
    +
    2. +
  2. Publicación de aplicaciones +
      +
    1. Opciones para la publicación
      2. +
    2. Aplicaciones empaquetadas
      3. +
    3. Actualización de aplicaciones
      4. +
    4. Aplicaciones Web Abiertas para Android
      5. +
    5. Aplicaciones Web Abiertas para Escritorio
      6. +
    6. Añadiendo un subdominio para la aplicación
      7. +
    7. Creación de una tienda
      8. +
    +
    3. +
  3. Monetización +
      +
    1. Sacando beneficio de tu aplicación
      2. +
    2. Guía de pagos de aplicaciones
      3. +
    3. Pagos en aplicación
      4. +
    4. Validando un recibo
      5. +
    5. Lista de precios de aplicación
      6. +
    6. Estado del pago
      7. +
    +
    4. +
  4. APIs del Marketplace +
      +
    1. Biblioteca de utilidades del Marketplace
      2. +
    2. API de presentación
      3. +
    3. API de pago
      4. +
    4. API del Marketplace
      5. +
    +
    5. +
  5. Preguntas frecuentes del Firefox Marketplace
    6. +
diff --git a/files/es/mozilla/marketplace/marketplace_apis/index.html b/files/es/mozilla/marketplace/marketplace_apis/index.html new file mode 100644 index 0000000000..fc8b78e53e --- /dev/null +++ b/files/es/mozilla/marketplace/marketplace_apis/index.html @@ -0,0 +1,56 @@ +--- +title: Firefox Marketplace APIs +slug: Mozilla/Marketplace/Marketplace_APIs +translation_of: Archive/Mozilla/Marketplace/Marketplace_APIs +--- +

Enlaces a las principales referencias que cubren las APIs de Marketplace de Mozilla Firefox, con las cuales usted puede manejar presentaciones de apps, configurar una cuenta de pago para una app, y más.

+ +
+
Biblioteca de utilidades del Marketplace
+
Para ayudarle a trabajar con el Marketplace Firefox, proporcionamos una biblioteca JavaScript que usted puede usar en sus apps para hacer más fácil el manejo de pagos dentro de la aplicación y verficar la recepción de pagos.
+
API de Presentación
+
La API de Presentación le permite validar su app, actualizar su app, y dar información acerca de las apps que están disponibles para ser instaladas.
+
API de Pago
+
La API de Pago le permite hacer cosas tales como obtener información acerca de compras dentro de la aplicación y obtener información acerca de los níveles de precios de varios países.
+
Otras APIs de Marketplace
+
La documentación completa para las APIs de Marketplace de Firefox.
+
+ +
Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+ +

 

diff --git a/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html b/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html new file mode 100644 index 0000000000..b9e56c49e1 --- /dev/null +++ b/files/es/mozilla/marketplace/monetization/estatus_de_pagos/index.html @@ -0,0 +1,32 @@ +--- +title: Estatus de pagos +slug: Mozilla/Marketplace/Monetization/Estatus_de_pagos +tags: + - Pagos Web +translation_of: Archive/Marketplace/Monetization/App_pricing +--- +
+

Los pagos del Firefox Marketplace son procesados país por país según una base, con diferentes precios y metodos de pagos disponibles en cada país. Este artículo detalla qué países están apoyados por los pagos del mercado, y proporciona vínculos a información más específica sobre cada país.

+
+
+

Nota: Una lista de los puntos de precio se documenta en nuestra página de precios de App y esta disponible en la API.

+
+

Soporte de pagos por país

+

Estos son los paises que el Marketplace soporta para hacer pagos. Estamos trabajando en agregar soporte para mas paises todo el tiempo. Para una lista de los paises soportados, por favor ve la página de precios de App.

+

App payouts

+

Mira las páginas siguients para mas detalles sobre el pago según tu país. Ten en cuenta, si bien tomamos en cuenta la moneda local de facturación, los pagos de tarjeta de credito solo pueden ser manejados en libras esterlinas, dólares estadounidences y euros.

+ +

Más información sobre tasas

+

Para obtener más información sobre tasas, ve al Firefox Marketplace y ve la pagina de tu app. Clikea en Compatibilidad y Pagos, luego Añadir manejar o ver transacciones de su cuenta de pago. A continuación haz click en el link Ver transacciones, como se muestra a continuación.

+

Transactions link

diff --git a/files/es/mozilla/marketplace/monetization/index.html b/files/es/mozilla/marketplace/monetization/index.html new file mode 100644 index 0000000000..47dd53a78b --- /dev/null +++ b/files/es/mozilla/marketplace/monetization/index.html @@ -0,0 +1,80 @@ +--- +title: Monetización +slug: Mozilla/Marketplace/Monetization +tags: + - Apps + - Marketplace +translation_of: Archive/Marketplace/Monetization +--- +
+

Has trabajado duro programando tu ultima app, pero, ¿cómo puedes obtener algo de vuelta cuando la publiques? Esta sección muestra toda la informacion que necesitas para implementar los pagos de aplicaciones, si se trata de pagos del Marketplace o de pagos dentro de la aplicacion.

+
+
+
+
+
+ Beneficiate de tu app
+
+ Esta guía detallada contiene discusiones introductorias acerca de como monetizar tus apps, incluyendo apps de pago, precios y manejo de pagos.
+
+ Guía de pagos de aplicaciones
+
+ Este articulo cubre los tecnicismos de las apps de pago.
+
+ Pagos dentro de las apps
+
+ Una guía detallada de como implementar soporte para pagos dentro de las apps en tu Web app.
+
+ Validar un recibo
+
+ Una guía de cuando (y como) validar el recibo de compra de tu app, sí quieres implementar la validación tu mismo, o usar una libreria preexistente.
+
+ Lista de precios de aplicaciones
+
+ Una serie de puntos de precios fijos que puedes escoger para tus apps de pago y como estos varian a traves de diferentes monedas, junto con informacion útil de apoyo acerca de como ocuparse de los pagos de las apps.
+
+ Estado de los pagos
+
+ Un resumen rápido de que paises tienen nuestos servicios de pagos de apps configurados (básicamente, donde pueden ser distribuidas las apps de pago).
+
+
+
+
Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+
+
+

 

diff --git a/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html b/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html new file mode 100644 index 0000000000..e8a4733c9c --- /dev/null +++ b/files/es/mozilla/marketplace/monetization/introduccion_monetizacion/index.html @@ -0,0 +1,83 @@ +--- +title: Introducción — Monetizacion +slug: Mozilla/Marketplace/Monetization/Introduccion_Monetizacion +tags: + - Apps + - Firefox OS + - Marketplace + - Principiantes + - introducción +translation_of: Archive/Marketplace/Monetization/Introduction_Monetization +--- +
+

Has trabajado duro programando tu última app, pero, ¿cómo puedes obtener algo de vuelta cuando la publiques? Esta sección muestra toda la informacion que necesitas para implementar los pagos de aplicaciones, sí se trata de pagos del Marketplace o de pagos dentro de la aplicacion.

+
+
+
+
+
+ Beneficiate de tu app
+
+ Esta guía detallada contiene discusiones introductorias acerca de como monetizar tus apps, incluyendo apps de pago, precios y manejo de pagos.
+
+ Guía de pagos de aplicaciones
+
+ Este articulo cubre los tecnicismos de las apps de pago.
+
+ Pagos dentro de las apps
+
+ Una guía detallada de como implementar soporte para pagos dentro de las apps en tu Web app.
+
+ Validar un recibo
+
+ Una guía de cuando (y como) validar el recibo de compra de tu app, sí quieres implementar la validación tu mismo, o usar una libreria preexistente.
+
+ Lista de precios de apps
+
+ Una serie de puntos de precios fijos que puedes escoger para tus apps de pago y como estos varian a traves de diferentes monedas, junto con informacion útil de apoyo acerca de como ocuparse de los pagos de las apps.
+
+ Estado de los pagos
+
+ Un resumen rápido de que paises tienen nuestos servicios de pagos de apps configurados (básicamente, donde pueden ser distribuidas las apps de pago).
+
+
+
+
Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+
+
+

 

diff --git a/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html b/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html new file mode 100644 index 0000000000..c8dc291d92 --- /dev/null +++ b/files/es/mozilla/marketplace/normas_valoracion_usuario/index.html @@ -0,0 +1,92 @@ +--- +title: Normas de valoración de usuario +slug: Mozilla/Marketplace/normas_valoracion_usuario +tags: + - Marketplace + - moderación de valoraciones + - normas de valoración + - valoraciones de usuario +translation_of: Archive/Mozilla/Marketplace/User_Review_Guidelines +--- +

La valoración de aplicaciones es una manera de que compartas tu opinión acerca de las aplicaciones que has instalado y usado. Nuestro equipo de moderación se reserva el derecho de borrar cualquier valoración que no cumpla con estas normas.

+ +

Algunos consejos para escribir una buena valoración

+ +

Cosas que hacer:

+ + + +

Cosas que no hacer:

+ + + +

Preguntas frecuentes sobre las Valoraciones

+ +

¿Cómo puedo reportar una valoración problemática?

+ +

Por favor reporta o marca cualquier valoración cuestionable haciendo clic en "Reportar esta valoración" y será enviada al sitio para moderación. Nuestro equipo de moderación utilizará las Normas de valoración para evaluar si borrar o no la valoración o restaurarla en el sitio web.

+ +

¿Qué debo hacer si tengo problemas con una aplicación?

+ +

Deberías contactar al desarrollador usando los botones "Correo de ayuda" o "Sitio de ayuda" para la aplicación en su página de listado en Marketplace.

+ +

Soy un desarrollador de aplicaciones, ¿cómo puedo responder a una valoración?

+ +

Actualmente, esto no es posible.

+ +

Soy un desarrollador de aplicaciones, ¿puedo borrar valoraciones o puntuaciones no favorables?

+ +

En general, no. Pero si la valoración no cumplió con las normas de valoración delineadas arriba, puedes hacer clic en "Reportar esta valoración" y hacer que la moderen. Si una valoración incluía una queja que ya no es válida por una nueva versión de tu aplicación, podemos considerar borrar la valoración. Envía tu solicitud detallada a mozilla.appreview.

diff --git "a/files/es/mozilla/marketplace/options/introducci\303\263n/index.html" "b/files/es/mozilla/marketplace/options/introducci\303\263n/index.html" new file mode 100644 index 0000000000..d1ab1399f5 --- /dev/null +++ "b/files/es/mozilla/marketplace/options/introducci\303\263n/index.html" @@ -0,0 +1,37 @@ +--- +title: Introducción — Opciones de Publicación +slug: Mozilla/Marketplace/Options/Introducción +tags: + - Apps + - Firefox OS + - Marketplace + - Principiantes + - introducción +translation_of: Archive/Mozilla/Marketplace/Options/Introduction +--- +
+

Firefox Marketplace proporciona un canal a través del cual usted puede publicar sus aplicaciones y hacerlas fácilmente descubiertas por los usuarios de Firefox OS, Firefox para Android y Firefox para escritorio. Sin embargo, no es la única opción que tiene para hacer sus aplicaciones disponibles. En esta sección, usted descubrirá los formatos en los que se pueden entregar sus aplicaciones, los mecanimos que hay en los navegadores Firefox para habilitad sus aplicaciones para dispositivos Android y PC de escritorio, como también las opciones para la publicación de sus propias apps y las formas en que usted puede crear su propio Marketplace.

+
+ +

Opciones de publicación

+ +
+
Aplicaciones Empaquetadas
+
Infórmese sobre el método predilecto para subir sus aplicaciones - el que le ofrece acceso privilegiado y APIs seguras.
+
Aplicaciones alojada
+
Descubra cómo hacer que sus aplicaciones estén disponibles desde un servidor, mientras que le proporciona a los usuarios los beneficios de una aplicación instalada.
+
¿Empaquetada o Alojada?
+
Utilice este checklist para determinar qué formato de entrega se adapta mejor a sus aplicaciones.
+
Aplicaciones Web abiertas para Android
+
Tus aplicaciones del Marketplace están habilitadas para ser instaladas en Android como un APK. Permitiendo ser instaladas y utilizadas como los haría con cualquier otra Android ap. Descubre como se hace.
+
Aplicaciones Web abiertas para Desktop
+
Tus aplicaciones web abiertas ahora pueden ser instaladas en Windows, Mac y Linux PC desde Firefox, para escritorio. Permitiéndote utilizarlas como cualquier otra aplicación del Escritorio. Descubre como se hace.
+
Publicando tus propias apps
+
En ocaciones es posible que desees publicar tus aplicaciones fuera del Firefox Marketplace, tal vez para que estén disponibles para las pruebas o la distribución en su empresa. Infórmate sobre las opciones que tiene y la forma de ponerlas en práctica.
+
Creación de su propio Marketplace
+
Ya sea que usted publique sus aplicaciones en Firefox Marketplace, o puede publicarlas usted mismo, tiene un número de opciones para su presentación en una tienda. Esta sección examina las opciones y cómo ponerlas en práctica.
+
 
+
 
+
+ +

 

diff --git a/files/es/mozilla/marketplace/publish/index.html b/files/es/mozilla/marketplace/publish/index.html new file mode 100644 index 0000000000..95c6ab34f7 --- /dev/null +++ b/files/es/mozilla/marketplace/publish/index.html @@ -0,0 +1,69 @@ +--- +title: Publicando en el Firefox Marketplace +slug: Mozilla/Marketplace/Publish +translation_of: Archive/Mozilla/Marketplace/Publish +--- +
+

Documentos relacionados a la publicación de una aplicación en el Marketplace de Firefox.

+
+
+
+
+
+ Prueba de aplicaciones y resolución de problemas
+
+ Una ligera guía sobre pruebas y resolución de problemas que seguir antes de enviar tu aplicación al Marketplace de Firefox.
+
+ Enviando una aplicación al Marketplace de Firefox
+
+ Esta guía paso a paso te ayudará a enviar tu aplicación con éxito al Marketplace de Firefox.
+
+ Normas de revisión del Marketplace
+
+ Una explicación de los criterios que una aplicación debe reunir a fin de ser publicada en el Marketplace de Firefox; siguiendo las normas expuestas en este artículo, puedes facilitar el proceso y conseguir que tu aplicación sea publicada.
+
+ Normas de capturas de pantalla en el Marketplace
+
+ Normas para enviar capturas de pantalla junto a tu aplicación y maximizar su calidad e impacto en el Marketplace.
+
+
+
+
Tools for app developers
+ +
Technology reference documentation
+
+ +
+
Getting help from the community
+

If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!

+ +

Don't forget about the netiquette...

+
+
+

 

diff --git a/files/es/mozilla/marketplace/publishing/index.html b/files/es/mozilla/marketplace/publishing/index.html new file mode 100644 index 0000000000..e2b172a388 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/index.html @@ -0,0 +1,9 @@ +--- +title: Publishing +slug: Mozilla/Marketplace/Publishing +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +

Marketplace publishing

diff --git a/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html b/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html new file mode 100644 index 0000000000..59d3e0ac04 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/marketplace_screenshot_criteria/index.html @@ -0,0 +1,78 @@ +--- +title: Marketplace screenshot criteria +slug: Mozilla/Marketplace/Publishing/Marketplace_screenshot_criteria +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Marketplace_screenshot_criteria +--- +
+

Cuando submitting an app to the Firefox Marketplace, you will be asked to provide one or more screenshots as part of the submission process. The Marketplace has some basic criteria for such screenshots which, while not strictly enforced, should serve as a guideline. Apps which provide no screenshots that meet the criteria in this document may be asked to submit new screenshots.

+
+

Screenshot Overview

+ +

Quality Guidelines

+ +

In general, you should show the app, not its surroundings.

+

Sizes and Formats

+

Screenshots are accepted in JPG and PNG format, though PNG-24 is preferred because of its lossless properties. If JPG is used, the screenshot should use minimal compression and use the highest quality settings.

+

Suggested Sizes

+ + + + + + + + + + + + + + + + + + + + + +
Form FactorSuggested Resolutions
Phonemultiples of 320x480, 720x1280, inverse/landscape ratios
Tabletmultiples of 1024x768, 1280x800
Desktopmultiples of 1280x800, 1440x900
+

Examples

+

Do not include grahical elements other than the app itself, including ads or logos.

+

+

Do not submit "hands-on" photos, or edit the screenshot onto a physical device.

+

+

Do not submit screenshots that use simulated device borders, unnecessary text, or other unnecessary features.

+

diff --git a/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html b/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html new file mode 100644 index 0000000000..c624a48e12 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/open_web_apps_for_android/index.html @@ -0,0 +1,133 @@ +--- +title: 'Open Web Apps for Android: Synthetic APKs' +slug: Mozilla/Marketplace/Publishing/Open_web_apps_for_android +translation_of: Archive/Marketplace/Options/Open_web_apps_for_android +--- +
+

Los usuarios pueden instalar sus aplicaciones de Marketplace en el navegador de Firefox o Firefox OS, obteniendo el beneficio potentes funciones de web abierta. Sin embargo, para los usuarios de Android puede resultar más cómodo instalar sus aplicaciones como aplicaciones de Android 'normales'. Ahora eres capaz de ofrecer esta característica a los usuarios usando Synthetic APKs (también conocido como tiempo de ejecución de Web para Android), una solución disponible en Firefox Marketplace que crea APKs nativas para la instalación en dispositivos Android.

+
+

¿Qué es una Synthetic APK?

+

Una Synthetic APK es una Open Web App contenida en un paquete de instalación de Android, que puede ser instalado y ejecutado del mismo modo que cualquier otra aplicación Android. El paquete APK consiste en contenido web (en el caso de aplicaciones empaquetadas) o un puntero a contenido web (en el caso de aplicaciones organizadas). Este contenido es después encerrado en una fina envoltura Java/Android que proporciona de integración en el Sistema Operativo nativo.

+

Estos paquetes son creados por el APK Factory Service que es ejecutado como un servicio web por Marketplace. El APK Factory Service hace uso del APK Factory Library para crear el paquete real y del APK Signer para firmar digitalmente el APK. Este servicio está disponible para su propio Marketplace, si decide crear uno.

+

Usted no necesita ningún conocimiento de desarrolo Android, o adoptar medidas de desarrollo adicionales, para usar Synthetic APK: usted simplemente selecciona la opción APK al enviar sus aplicaciones al Marketplace.

+
+

Nota: Synthetic APKs son soportadas por los dispositivos Android con Firefox 29 o superior instalado.

+
+

El tiempo de ejecución de Open Web App en Android sostiene 12 APIs para accedes a capacidades del dispositivo tales como vibración, geolocalización, estado de la batería, y más. Puede verse una lista completa de APIs soportadas aquí: las APIs que muestran una "A" bajo "Availability" son aquellas APIs disponibles en Android, con elementos verdes indicando que la API está disponible en su totalidad. Usted puede colocar el puntero del ratón sobre los elementos individuales para obtener mensajes con más información.

+

El tiempo de ejecución en Android continuará añadiendo soporte para otras APIs en futuras versiones. Algunas de las APIs planeadas son:

+ +
+

Nota: Los usuarios de Android pueden estar usando dispositivos con mayores resoluciones (DPI) y  mayores tamaños de pantalla que aquellos encontrados en los dispositivos con Firefox OS. Las aplicaciones que no han usado un diseño de respuesta puede que por ello proporcionen una experiencia pobre, y puede que usted quiera diseñar sus aplicaciones teniendo esto en mente.

+
+

Uso de synthetic APKs

+

Esta sección proporciona detalles en el modo en que usted elija para hacer uso de synthetic APKs, cómo afectan a la experiencia de Marketplace, e información sobre actualizaciones de las aplicaciones. 

+

Activación de la opción synthetic APK 

+

Cuando usted envía una aplicación al Firefox Marketplace, usted tiene la opción de hacer que su aplicación esté disponible como una aplicación "nativa" para dispositivos Android usando una synthetic APK.

+

Envío una aplicación

+

Cuando usted envía una aplicación al al Marketplace el APK Factory Service es invocado para crear una synthetic APK firmada en modo de depuración de Android. Esta versión de la APK entonces se hace disponible para que los críticos de la aplicación completen el proceso normal de revisión. Una vez que la aplicación ha sido revisada y aprobada el APK Factory service es invocado de nuevo, esta vez para firmar la synthetic APK con una APK Signing Key única. La Synthetic APK firmada resultante es entonces almacenada en caché para la entrega cuando un usuario decide instalar la aplicación.

+

Instalación de una synthetic APK

+

Una vez que su aplicación ha sido aprobada, cuando un usuario selecciona su aplicación en el Marketplace en su dispositivo Android la instalación se diferencia ligeramente del proceso habitual, como sigue:

+
    +
  1. Firefox Marketplace muestra la información de la aplicación y el botón de instalación como normalmente.
    2. +
  2. Cuando el usuatio selecciona instalar se muestra el diálogo de confirmación de instalación estándar de Marketplace. El diálogo lista los permisos requeridos por aplicaciones privilegiadas e información acerca de la necesidad de habilitar la opción de instalar aplicaciones de "fuentes desconocidas"; el Marketplace incluirá redacción para explicar cualquien duda que los usuarios puedan tener.
    3. +
  3. Cuando el usuario confirma que quiere continuar con la instalación, {{ domxref("Apps.install") }} / {{ domxref("Apps.installPackage") }} son invocados como usted esperaría (dependiendo de si se trata de una aplicación alojada o empaquetada), sin embargo en vez del proceso normal por el cual la versión Open Web APP es instalada, se realiza una llamada al APK Factory Service para solicitar la APK almacenada en caché. La synthetic APK es entonces descargada al dispositivo Android y el proceso de instalación de aplicación estándar de Android es invocado.
    4. +
+

Una vez que la synthetic APK ha sido instalada, el usuario encontrará la aplicación en su menú de aplicaciones y el proceso para usar y eliminar las aplicaciones será el mismo que esperaría de otras aplicaciones Android.

+

Mantener las aplicaciones actualizadas

+

El Marketplace y la APK Factory también proporcionan un mecanismo para actualizar su aplicación e informar a los usuarios de que la actualización está disponible.

+

Si su aplicación está alojada, siempre que usted haga un cambio en su servidor los usuarios se enterarán de esos cambios la siguiente vez que ejecuten su aplicación. Si usted realiza un cambio visible en su aplicación. tal como realizar un cambio en el icono de la aplicación, tras detectar el número de versión actualizada en el manifiesto de la aplicación la APK Factory creará una APK actualizada y notificará a los usuarios de que una actualización está disponible.

+

Para aplicaciones empaquetadas usted actualiza el contenido de la aplicación y envía un nuevo archivo empaquetado en zip y el manifiesto actualizado. La APK Factory recogerá esos cambios e informará a sus usuarios de que una aplicación actualizada se encuentra disponible.

+

Como funciona la APK Factory 

+

Esta sección describe como la APK Factory crea synthetic APKs.

+
    +
  1. Cuando la APK factory es invocada, como se ha descrito anteriormente, detecta si la aplicación está alojada o empaquetada, entonces pide el archivo de manifiesto de la aplicación del servidor donde se halla alojada (el Firefox Marketplace, o cualquier otro lugar donde la aplicación está alojada): +
      +
    • El manifiesto principal en el caso de aplicaciones alojadas.
      • +
    • El manifiesto mini en el caso de aplicaciones empaquetadas.
      • +
    +
    2. +
  2. La APK factory ahora tiene la información que necesita acerca de la aplicación, y solicita: +
      +
    • La URL de almacenamiento de aplicaciones en el caso de aplicaciones alojadas.
      • +
    • El archivo zip de la aplicación del marketplace en el caso de aplicaciones empaquetadas.
      • +
    +
    3. +
  3. Ahora el APK Factory service crea la synthetic APK mediante la realización de la transcodificación de algunos metadatos para elementos tales como iconos y requerimientos de seguridad, entonces: +
      +
    • envolviendo la URL de alojamiento en un contenedor Android Java para aplicaciones alojadas.
      • +
    • envolviendo el contenido de la aplicación en un contenedor Android Java para aplicaciones empaquetadas.
      • +
    +
    4. +
  4. Una vez creada, la synthetic APK es firmada por un servicio APK Signer seguro: +
      +
    • Para "revisión" las APKs son firmadas en modo de depuración de Android.
      • +
    • For "lanzamiento" las APKs son firmadas con una APK signing key.
      • +
    +
    5. +
  5. Finalmente, la APK firmada es almacenada en caché para enviar a: +
      +
    • el proceso de revisión de aplicación.
      • +
    • un dispositivo Android cuando el usuario solicite su instalación desde Marketplace.
      • +
    +
    6. +
+

Los siguientes diagramas ofrecen una representación alternativa del flujo de trabajo de la APK Factory. Primero, una aplicación empaquetada:

+

+

Ahora, para una aplicación alojada:

+

+

Nombramiento de paquetes y claves de firma de APK

+

En la instalación de una synthetic APK el dispositivo Android comprueba el nombre y la firma del paquete Java. Verifica la firma la primera vez que una aplicación es instalada (no exixte una autoridad central con la que lo comprueba) y actualizaciones futuras deberán tener el mismo nombre y firma del paquete. Si el nombre y la firma del paquete no son los mismos el dispositivo Android no actualizará la instalación.

+

Nombramiento de paquetes

+

El nombre de paquete para una synthetic APK consiste en el sitio de alojamiento y un número de serie único, por ejemplo:

+ +

Claves de firma de APK

+

Cada APK necesita ser identificada por una clave de firma de APK antes de poder ser instalada en un dispositivo Android. Las claves de firma APK son creadas y son propiedad del servicio APK Signer. Estas claves de firma son inestables en sistema, y almacenadas de manera segura en el APK Signer, que es por lo que se considera "seguro".

+

Este servicio crea una clave única para cada aplicación, aplicándola a la publicación inicial y a las actualizaciones subsiguientes. La reutilización de la clave en aplicaciones APK actualizadas es importante ya que sin una igualdad en el nombre del paquete y la clave Android no instalará una actualización sobre una versión anterior de la aplicación. Si usted crea su propia versión del Marketplace la APK conservará el mismo nombre y claves, por lo que cualquier versión podrá actualizar la otra.

+
+

Nota: Mozilla no asume ninguna responsabilidad acerca de la credibilidad de las claves de firma de APK, refiriéndose a que las claves no proporcionen ninguna información acerca de la autenticidad de la aplicación o el desarrollador más allá de que han sido aprobados para su lanzamiento en Marketplace. El servicio no está vinculado a Google o alguna otra autoridad central.

+
+

FAQ

+

Aquí se encuentran las respuestas a algunas preguntas relizadas frecuentemente acerca de Synthetic APKs.

+

¿Qué pasa con la reinstalación de aplicaciones instaladas como favoritas?

+

Esto no ha sido aún realizado totalmente, pero el comportamiento esperado es que el marcado de aplicaciones como favoritas dejará de funcionar cuando el usuario actualice a una versión de Firefox para Android con la implementación Synthetic APK (versión 29 o posterior). El usuario entonces tendrá que reinstalar sus aplicaciones para usarlas de nuevo.

+

¿Cómo funcionarán las compras in-app?

+

La APK tiene acceso a la interfaz de usuario de confianza, mozPay, y todos los procesos de pago para compras in-app, por lo que los pagos in-app funcionarán de manera normal.

+

¿Cómo puedo descargar una copia de la APK de mi aplicación?

+

Usted puede descargar una copia de su aplicación usando using wget y el siguiente comando:

+

https://controller.apk.firefox.com/application.apk?manifestUrl=ESCAPED_URL_TO_MANIFEST

+

donde ESCAPED_URL_TO_MANIFEST es una URL escapada el manifiesto de la aplicación o mini-manifiesto. Esta URL hace que la APK Factory devuelve la copia almacenada en caché de la APK, o crea una nueva si la aplicación no ha sido enviada al Marketplace. Si la aplicación no ha sido enviada al Marketplace la APK es firmada en modo de depuración.

+

Ejemplos

+

Para una aplicación alojada:

+

> wget https://controller.apk.firefox.com/application.apk?manifestUrl=http%3A%2F%2Fmykzilla.org%2Fapp%2Fmanifest.webapp -O mykzilla.apk
+ > aapt dump --values badging mykzilla.apk
+ package: name='org.mykzilla.p362b12c70d0556c124908a3c125d3d02' versionCode='1395692586' versionName=''

+

Para una aplicación empaquetada:

+

> wget https://controller.apk.firefox.com/application.apk?manifestUrl=https%3A%2F%2Fmarketplace.firefox.com%2Fapp%2Fa22e0277-35bc-434d-9371-1568c75fc726%2Fmanifest.webapp -O cuttherope.apk
+ > aapt dump --values badging cuttherope.apk
+ package: name='com.firefox.marketplace.p0604c71abc0d4091829d19be9a50453c' versionCode='1394154656' versionName='1.3'

+

¿Puedo generar una synthetic APK manualmente desde una URL diferente?

+

Sí puede, proporcionando la URL de cualquier ubicación de sus archivos de manifiesto o mini-manifiesto. No obstante, tenga cuidado con esto porque si la synthetic APK es generada desde una URL diferente el nombre de paquete será distinto del creado cuando usted envió la aplicación al Marketplace, por lo que la versión del Marketplace será instalada como una aplicación separada.

+

Si configuro mi propia versión de APK Factory ¿puedo usar la synthetic APK que genera?

+

Usted puede, pero tenga cuidado porque las claves de firma serán diferentes de las asignadas a una versión de la synthetic APK generada por el Marketplace. Como resultado Android rechazará instalar la versión que el usuario intente instalar en segundo lugar. (Ver Si también tengo una versión nativa de Android de mi aplicación, ¿pueden ambas ser instaladas en un dispositivo Android? para más información.)

+

¿Puedo enviar una synthetic APK a Google Play o a otra tienda de Android? 

+

Usted puede enviar una synthetic APK a Google Play o a una tienda alternativa de Android. Sin embargo, es su responsabilidad:

+ +

¿Puedo emplear mis claves de firma Android para firmar la synthetic APK y elegir el nombre del paquete?

+

Actualmente usted no puede usar sus propias clavez de firma para firmar una synthetic APK o elegir el nombre del paquete. Esta opción está siendo considerada. Si esto es de su interés, únase a la discusión en el dev-marketplace mailing list, o el Marketplace IRC channel.

+

Si también tengo una versión nativa de Android de mi aplicación, ¿pueden ambas ser instaladas en un dispositivo Android?

+

A menos que usted elija usar el nombre de paquete de synthetic APK de su aplicación Android nativa, ambas pueden ser instaladas en un dispositivo Android. Si usted elige usar el mismo nombre de paquete para su aplicación Android nativa (la cual usted firmará con su propia clave) Android rechazará instalar la versión que el usuario intente instalar en segundo lugar. Esto es debido a que los nombres de paquete son iguales pero las claves de firma son diferentes, por lo que Android considera que las aplicaciones son la misma, pero de distintas fuentes. Por lo tanto Android rechazará actualizar una aplicación con la otra, ya que eso permitiría a un desarrollador anular la aplicación de otro. El usuario acabará con la primera versión instalada en su dispositivo.

+
+

Debido a los problemas que puede causar a los usuarios, es altamente recomendado que usted no reutilice el nombre de paquete que la APK Factory asigna a su aplicación para una versión Android nativa de su aplicación.

+
+

¿Cómo puedo testear/depurar APKs?

+

Estamos trabajando en una serie de herramientas para testear y depurar una aplicación en un dispositivo Adnroid. La versión inicial incluirá  una herramienta de línea de comandos basada en ndos para generar una APK que usted pueda instalar en el dispositivo y depurar usando Firefox's Remote Developer Tools.

diff --git a/files/es/mozilla/marketplace/publishing/packaged_apps/index.html b/files/es/mozilla/marketplace/publishing/packaged_apps/index.html new file mode 100644 index 0000000000..7a76aa8d98 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/packaged_apps/index.html @@ -0,0 +1,190 @@ +--- +title: Aplicaciones empaquetadas +slug: Mozilla/Marketplace/Publishing/Packaged_apps +translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps +--- +

Una aplicación empaquetada es una Open Web App que tiene todos sus recursos (HTML, CSS, JavaScript, manifiesto y demás) empaquetados en un archivo zip, en lugar de tenerlos en un servidor web. Una aplicación empaquetada es simplemente un archivo zip con el manifiesto de la aplicacion en su directorio raíz. El manifiesto debe ser llamado manifest.webapp.

+ +

Una direferencia de una aplicación alojada es que una aplicación empaquetada, es que debe especificar una ruta de arranque en el manifiesto en tanto que se trata de un campo opcional en una aplicación alojada.

+ +
+

Nota: Actualmente (Enero 2013) Firefox Marketplace solamente soporta aplicaciones empaquetadas para Firefox OS.

+
+ +

Propósito de las aplicaciones empaquetadas.

+ +

El propósito de una aplicación empaquetada, es tener una forma viable de proveer aplicaciones que tengan acceso a APIs sensibles en el dispositivo. Las aplicaciones deben ser verificadas por la tienda donde es distribuida (como Firefox Markerplace). La tienda revisa la aplicación y si la encuentra aceptable, firma el archivo zip de la aplicación con su llave privada. Esto da a los usuarios de la aplicación más seguridad de que han sido revisados problemas potenciales de seguridad, privacidad y capacidad.

+ +

Tipos de aplicaciones empaquetadas.

+ +

Aplicaciones privilegiadas

+ +
+
Una aplicación privilegiada es aprobada por la Firefox Marketplace usando un proceso especial. Esto significa que provee más seguridad a los usuarios cuando la aplicación quiere accesar a ciertas APIs sensibles del dispositivo. Esto equivale a las aplicaciones nativas en plataformas como iOS o Android. Para especificar que se trata de una aplicación privilegiada agregue el campo type a su archivo manifest.webapp  y establezca el valor de privileged.
+
Una aplicación privilegiada tiene las siguientes características : +
    +
  • Es aprobada por una tienda de aplicaciones después de la revisión de código o equivalente.
    • +
  • Los recursos de la aplicación son firmados por la tienda de aplicaciones.
    • +
  • Permite usar ciertas APIs Web sensibles a las que contenido no confiable no puede accesar.
    • +
  • Aplica Politicas de seguridad de contenido (CSP). Una aplicacion con privilegios utiliza estas CSP: + 
    "default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
    +
    • +
  • Implementa otros requisitos relacionados con la seguridad. Vea Seguridad para mas informacion.
    • +
+
+
Aplicación certificada
+
Una aplicacion certificada está destinada a una función crítica del sistema como el marcado por defecto o la configuración del sistema en un teléfono inteligente. Este tipo de aplicación podría ser usada para funciones críticas en un teléfono con Firefox OS. No está destinada para aplicaciones de terceros por lo que la mayoría de desarrolladores no pueden utilizarlas. Una aplicación certificada es una aplicación empaquetada similar a una con privilegios, excepto que todos los permisos del dispositivos son implícitos, lo que significa que son habilitados sin la aprobación explícita del usuario. A Una aplicación certificada debe ser aprovada por el fabricante (OEM) o compañía (carrier) para tener la aprobación implícta para usar APIs críticas. Para especificar que una aplicación es certificada, agregue el campo type a su archivo manifest.webapp y establecer su valor a certified.
+
Las siguientes son las CSP de una aplicación certificada, las cuales, son lígeramente direfentes de las de una con privilegios: + 
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"
+ Esto hace parecer que las reglas en las CSP son ligeramente más flexibles para las aplicaciones con privilegios que en las aplicaciones certificadas. Si quiere saber las razones de esto, vea las Políticas CSP por defecto y Bug 768029.
+
Aplicaciones empaquetadas planas
+
Usted también puede hacer una simple aplicación empaquetada en un archivo zip. La tienda la firma, pero no implementa el proceso especial de autenticación como en las aplicaciones certificadas o con privilegios. Estas aplicaciones no pueden usar ciertas Web APIs sensibles. Tampoco está sujeta a las CSP como las aplicaciones certificadas o con privilegios. Este tipo de aplicación puede ser útil si quiere que todos los recursos de su aplicación estén disponibles cuando el usuario la usa por primera vez sin descargarlos. Este tipo de aplicación empaquetada no requiere el campo type en su archivo manifest.webapp por que el valor por defecto para type (web) es correcto.
+
+ +

Diferencias con las aplicaciones hospedadas

+ +

Las aplicaciones empaquetadas tienen las mismas capacidades que las aplicaciones web de código abierto normales (aplicaciones "alojadas"), pero las aplicaciones empaquetadas tienen algunas diferencias:

+ + + +

Las aplicaciones empaquetadas también pueden hacer cosas como acceder a bases de datos en un servidor web como una aplicación hospedada.

+ +

Usando APIs Web sensibles

+ +

Hay Web APIs que pueden ser usadas maliciosamente por lo que el acceso a estas debe ser controlado. Para cada API sensible a la que se quiera acceder, ustede debe agregar una entrada al campo permissions en el  manifiesto de la aplicación.

+ +

Algunas APIs sensibles pueden ser accedidas por aplicaciones hospedadas normales, pero otras APIs requieren que usted use una aplicación empaquetada (con privilegios o certificada). Vea Permisos de aplicaciones para una tabla que describe los requisitos..

+ +

Aplicaciones empaquetadas de la tienda de Firefox (Firefox Marketplace).

+ +

La tienda de Firefox (Firefox Marketplace) maneja a las aplicaciones empaquetadas de forma diferente que las aplicaciones hospedadas. Cuando usted manda una aplicación empaquetada, su archivo zip es almacenado en los servidores de la Tienda y genera un nuevo manifiesto llamado el "mini-manifiesto" que está basado en el manifiesto de la aplicación que se encuentra en el archivo zip. Cuando un usuario installa su aplicación, el mini-manifiesto es pasado a la función installPackage() en la aplicación instalada. El mini-manifiesto existe para propósitos de instalación y actualización y no es usado cuando la aplicación se ejecuta.

+ +

Prueba de instalación de una aplicación empaquetada (con Simulador)

+ +

Para instalar una aplicación empaquetada en un dispositivo Firefox OS usando el simulador, vea la  sección "Push to Device" en la guía del Simulador.

+ +

Prueba de instalación de una aplicación empaquetada (sin Simulador)

+ +

Si quieres probar localmente la instalación de tu aplicación empaquetada, aquí hay otra forma de hacerlo. Usa los siguietnes pasos para instalar una aplicación empaquetada en un teléfono usando un servidor Web que está en tu red local. Puede ser un servidor local que se ejecute en la computadora en la que estás desarrollandol. Esto también de dará una idea de cómo funciona la instalación de aplicaciones empaquetadas.

+ +

Requisitos

+ + + +

Pasos

+ +
    +
  1. Tenga su aplicación empaquetada disponible y dele el nombre de package.zip. Este archivo tiene todos los recursos, incluyendo el archivo del manifiesto.
    2. +
  2. Cree un archivo llamado package.manifest y agregue el siguiente contenido. Este es un mini-manifiesto usado por aplicaciones empaquetadas dentro del archivo zip. Vea Campos del mini-manifiesto si quiere más información acerca de los mini-manifiestos. + 
    {
+  "name": "My App",
+  "package_path": "http://<server-ip>/package.zip",
+  "version": "1.0"
+}
    +
    3. +
  3. Cree un archivo llamado install.html con el siguiente contenido . Este contiene el código JavaScript que llama a la aplicación empaquetada (installPackage()) y a las funciones callbacks para las notificaciones de éxito o falla. + 
    <html>
+  <body>
+    <p>Packaged app installation page</p>
+    <script>
+      // This URL must be a full url.
+      var manifestUrl = 'http://<server-ip>/package.manifest';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    </script>
+  </body>
+</html>
    +
    4. +
  4. Copie el archivo package.zip, package.manifest, e install.html dentro de la carpeta raíz del documento en el servidor.
    5. +
  5. Utilice el navegador en el teléfono para abrir  http://<server-ip>/install.html y confirme la entrada para instalar la aplicación. El script le dará una la indicación de que la instalación fue exitosa o falló.
    6. +
+ +
+

Nota: Si usted quiere probar aplicaciones certificadas (descritas anteriormente) encienda el "modo de desarrolador" ("developer mode")  en el dispositivo que quiera instalar la aplicación (con Firefox OS) y asegúrese de especificar el type correcto en su archivo manifest.webapp.

+
+ +

Campos del mini-manifiesto

+ +

Aqui hay un ejemplo de los campos del mini-manifiesto (mini-manifest):

+ +
{
+  "name": "My app",
+  "package_path": "http://thisdomaindoesnotexist.org/myapp.zip",
+  "version": "1.0",
+  "size": 172496,
+  "release_notes": "First release",
+  "developer": {
+    "name": "Developer Name",
+    "url": "http://thisdomaindoesnotexist.org/"
+  },
+  "locales": {
+    "fr_FR": {
+      "name": "Mon application"
+    },
+    "se_SE": {
+      "name": "Min balla app"
+    }
+  },
+  "icons": {
+    "16": "/icons/16.png",
+    "32": "/icons/32.png",
+    "256": "/icons/256.png"
+  }
+}
+
+ +

Cuando el Firefox Marketplace genera un mini-manifiesto para tu aplicacion,  extrae informacion desde tu manifiesto de la aplicacion para algunos campos. Usted puede encontrar documentación para estos campos en el  manifiesto de la aplicación. Los campos únicos del mini-manifiesto son package_path, release_notes, y size. Los campos name, version, developer, y locales en su manifiesto de la aplicación deben ser exactamente los mismos que en su mini-manifiesto.

+ +

Aquí hay información sobre el mini-manifiesto que se relaciona con su uso a nivel local para sus propias pruebas::

+ +
+
name
+
(requerido) El nombre de la aplicación. La longitud máxima es de 128 caracteres.
+
package_path
+
(Requerido) Una URL completa donde el zip de la aplicación puede ser encontrado.
+
version
+
La versión de la aplicación.
+
size
+
El tamaño del zip de la aplicación en bytes. No es necesario para las pruebas locales pero se utiliza para mostrar una barra de progreso durante la instalación.
+
release_notes
+
Información acerca del lanzamiento de la aplicación. En el Marketplace esta información proviene de la página web que es parte del proceso de envío..
+
developer
+
Información acerca del desarrolador, contiene los campos name y url.
+
locales
+
Información de localización.
+
icons
+
Iconos usados por la aplicación.
+
+ +

Actualizando aplicaciones empaquetadas

+ +

Para información sobre actualizar aplicaciones, vea Actualizando aplicaciones.

+ +

Ejemplo de aplicación empaquetada

+ +

Firefox OS Boilerplate App

diff --git a/files/es/mozilla/marketplace/publishing/publish_options/index.html b/files/es/mozilla/marketplace/publishing/publish_options/index.html new file mode 100644 index 0000000000..fbe32dff00 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/publish_options/index.html @@ -0,0 +1,70 @@ +--- +title: Opciones para la publicación de aplicaciones +slug: Mozilla/Marketplace/Publishing/Publish_options +tags: + - Apps + - Marketplace +translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing +--- +
+

Una vez usted ha finalizado su aplicación es necesario publicarla para que este disponible para el usuario final (sin importar que se utilice como una página Web desde el navegador o sea descargada y utilizada en un dispositivo como un teléfono con Firefox OS), suministrando información de soporte  como instrucciones de uso y otros recursos. Este articulo muestra brevemente las diferentes opciones disponibles para usted.

+
+

Publicando en el Marketplace de Firefox

+

El Marketplace de Firefox es nuestra tienda para distribuir aplicaciones tanto gratuitas como de pago. Enviar una aplicación al Marketplace de Firefox es un proceso simple, la carga a la tienda implica la subida de la aplicación conjuntamente con su información complementaria, luego espere mientras su aplicación pasa a través del proceso de revisión para segurar su calidad y que no contenga código malicioso. El envió al Marketplace de Firefox también confiere una serie de ventajas como el incremento de publicidad, tampoco es necesario implementar APIs especiales en su sitio Web, y la posibilidad de publicar aplicaciones de pago. Usted puede enviar tanto aplicaciones empaquetadas como aplicaciones hosteadas al Marketplace de Firefox.

+

Aplicaciones hosteadas

+

Una aplicación hosteada es básicamente una página almacenada en un servidor Web que puede utilizarse como una aplicación (el termino hosteada viene del ingles hosting). Si usted quiere permitir a las personas instalar su aplicación directamente desde su Web, usted debe implementar  algo de código JavaScript en su sitio Web para administrar la instalación y/o actualización de la aplicación en el navegador de los usuarios, asegúrese también que el código de su aplicación incluya un archivo de manifiesto válido. Por favor vea nuestros archivos de manifiesto y nuestras  APIs de instalación para ver los pasos para implementar estas funciones.

+

El lugar que usted escoja para almacenar su aplicación queda enteramente a su conveniencia, pero las dos opciones que mostraremos a continuación son las mas comunes y convenientes.

+

GitHub

+

Si tu aplicación Web es puramente estática (HTML/CSS/JavaScript, pero sin procesamiento del lado del servidor), GitHub Pages es una opción bastante confiable. si usted usa una extensión .webapp esta plataforma entregara su manifiesto con correspondiente tipo de MIME.

+

Soluciones genéricas de hosting

+

Para sitios Web dinámicos use la opción de hosting genérico (como un servidor Web de su propiedad o uno al que tenga acceso) con las capacidades necesarias o un proveedor de hosting  específicamente adaptado a las necesidades de su aplicación, como por ejemplo Heroku o Google App Engine.

+
+

Nota: Las aplicaciones Web instalables tienen una política de seguridad llamada "una aplicación por origen" ; básicamente usted no puede almacenar mas de una aplicación por origen. Esto hace el proceso de pruebas un poco mas difícil, pero siempre podrá crear un sub-dominio para cada aplicación y utilizar el simulador de Firefox OS o Firefox Aurora (que permites instalar aplicaciones Web el en escritorio) para probarlas. Vea las FAQs acerca del manifiesto de aplicaciones para mas información sobre los orígenes.

+
+

Aplicaciones empaquetadas

+

Una aplicación empaquetada es una Web que tiene todos sus recursos (HTML, CSS, JavaScript, manifiesto, etc.) contenidos en un archivo zip en lugar de tener esos recursos alojados en un servidor Web. Una aplicación empaquetada es simplemente un archivo zip con el manifiesto de la aplicación en su directorio raíz. El manifiesto debe llamarse manifest.webapp.

+

Una diferencia con las aplicaciones hosteadas es que usted debe especificar un launch_path en el manifiesto, y en las aplicaciones hosteadas esto es un campo opcional. Para mayor información vea nuestro articulo sobre Aplicaciones empaquetadas.

+

Aplicaciones auto-publicadas

+

Usted además puede elegir la opción de auto-publicar. Para aplicaciones hosteadas, esto solo involucra colocarla en un hosting como se indica a continuación.

+

Usted puede auto-publicar una aplicación empaquetada solo colocándola en un servidor conjuntamente con un mini manifiesto en el mismo directorio donde se encuentra y que será usado al instalar la aplicación. Veamos este proceso:

+
    +
  1. Tener el zip de la aplicación empaquetada con el nombre package.zip. Este archivo contiene todos los recursos de la aplicación así como también su manifiesto.
    2. +
  2. Cree un archivo llamado package.manifest con el siguiente contenido. Este es un mini manifiesto usado para la instalación de aplicaciones empaquetadas. No es el manifiesto principal, el cual se encuentra dentro del archivo zip.
    + 
    {
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/my-app.zip",
+    "version": "1",
+    "developer": {
+        "name": "Chris Mills",
+        "url": "http://my-server.com"
+    }
+}
    +
    3. +
  3. Cree un archivo llamado index.html con el siguiente contenido. Este contiene un ejemplo del JavaScript que llama a la aplicación empaquetada (installPackage()) y devuelve la llamada en caso de éxito y notificación de errores. + 
    <html>
+  <body>
+    <p>Packaged app installation page</p>
+    <script>
+      // This URL must be a full url.
+      var manifestUrl = 'http://my-server.com/my-app-directory/package.manifest';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    </script>
+  </body>
+</html>
    +
    4. +
  4. Copie package.zip, package.manifest, y index.html en la raíz del directorio de su aplicación (my-app-directory en este ejemplo).
    5. +
  5. Utilizando un dispositivo compatible (como un teléfono con Firefox OS), navegue hasta la localización en su servidor donde usted coloco los archivos de ejemplo y confirme cuando se le pregunte para completar la instalación. El script le dará una indicación en caso de completarse exitosamente o de una falla.
    6. +
+
+

Nota: Usted no puede instalar aplicaciones privilegiadas o certificadas desde paquetes auto-publicados ya que ellas necesitan ser firmadas durante el proceso de publicación del Marketplace de Firefox.

+
+
+

Nota: Usted incluso puede crear su propia tienda de aplicaciones, ya que dispone de una serie de opciones para hacerlo.

+
+

 

diff --git a/files/es/mozilla/marketplace/publishing/submit/index.html b/files/es/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..265a1ad776 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +

This section describes the process for submitting an app to Firefox Marketplace

+

Residual details: https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app

diff --git a/files/es/mozilla/marketplace/publishing/submit/overview/index.html b/files/es/mozilla/marketplace/publishing/submit/overview/index.html new file mode 100644 index 0000000000..5c2877d8f6 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/submit/overview/index.html @@ -0,0 +1,122 @@ +--- +title: Overview +slug: Mozilla/Marketplace/Publishing/Submit/Overview +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Overview +--- +
+

To make your apps available on Firefox Marketplace, each one needs to be submitted to Marketplace and reviewed before it's published. This page provides an overview to the processes involved in submitting an app to Firefox Marketplace. Subsequent pages provide additional detail on each step.

+
+ +
+

For more details on each step of the process, please follow the links on the step heading or start the process from step 1. A diagrammatic representation of the steps is offered at the bottom of this page.

+
+ +

You can also follow the submission process in this video: http://vid.ly/8k2n4w

+ +

The process

+ +

So you want to submit your app to Firefox Marketplace, let's get started:

+ +
+
Step 1 - Sign in to your Developer account
+
+ +
+
Step 2 - Load your app
+
On the Submit an app page: +
    +
  • Select whether the app is free or paid.
    • +
  • Select the platforms the app will be available on.
    • +
  • Select whether the app is hosted or packaged then: +
      +
    • For a hosted app, provide the link to its manifest file.
      • +
    • For a packaged app, upload the package.zip file, and once it has been validated, identify the minimum API requirements.
      • +
    +
    • +
  • Click Continue.
    • +
+
+
Step 3 - Enter your app's details
+
+

On the Edit App Details page:

+ +
    +
  • Modify the app URL if you wish.
    • +
  • Modify the description (provided in the manifest) if you wish.
    • +
  • Select one or two categories.
    • +
  • Provide a Privacy Policy.
    • +
  • Defined a home page and support website if you have them.
    • +
  • Provide a support email address.
    • +
  • Indicate whether the app requires Flash support.
    • +
  • Add at least one screenshot or video.
    • +
  • Provide additional comments for the app reviewer (such as sign in details if the app requires them) - note you'll only be able to modify these notes by submitting a new version of the app.
    • +
  • Select whether the app will be published as soon as approved - note you'll only be able to modify this setting by submitting a new version of the app.
    • +
  • Click Continue.
    • +
+
+
Step 4 - See details of the next steps
+
On the Next Steps page click Continue.
+
Step 5 - Obtain a content rating
+
On the Content Ratings page: +
    +
  • to obtain a new rating click Create an IARC Ratings Certificate and on the IARC Web site, complete the ratings questionnaire.
    • +
  • to enter a rating you've already obtained provide its Submission ID and Security Code.
    • +
+
+
Step 6 - Update availability and payment details
+
Step 6a - If the app is free (and doesn't include in-app purchases):
+
On the left hand menu, click Compatibility. Change the countries the app will be available in if you wish.
+
Step 6b - If the app is paid (or free, but includes in app payments):
+
On the left hand menu, click Compatibility & Payments +
    +
  • Setup your payment provider accounts, such as Bango and Boku.
    • +
  • Set the price, identify whether the app includes in-app products and select the countries the app will be available in.
    • +
  • If the app is being offered as a premium upgrade to a free app, identify the free app.
    • +
+
+
Step 6c - If the app includes in-app products:
+
+
    +
  • On the left hand menu click In-App Payments and obtain your API key and secret. (Note that you'll have to submit an update to your app once the API key and secret have been added to it, for more details see In-app payments.)
    • +
  • If you're using fxPay, on the left hand menu click In-App Products and define each of your in-app products.
    • +
+
+
Step 7 - Setup team member (optional)
+
On the left hand menu, click Team Members and add any additional team member if you wish.
+
Step 8 - View the listing (optional)
+
On the left hand menu, click View Listing and view your app's Marketplace listing if you wish.
+
Step 9 - Edit other localization listings (optional)
+
On the left hand menu click Edit Listing and modify the app URL, description, and categories for any of the app's localizations or add details for any other locale supported by Firefox Marketplace.
+
+ +

Your app is now in the review queue. You can monitor its progress through the review process by clicking Status and Version on the left hand menu. Remember that if your app makes use of in-app payments you will need to code in the API Key and submit an update before the app can be published.

+ +

Flow chart

+ +

Flow chart showing the app submission process

+ +

What next?

+ +

Having completed your app submission your might want to:

+ + diff --git a/files/es/mozilla/marketplace/publishing/updating_apps/index.html b/files/es/mozilla/marketplace/publishing/updating_apps/index.html new file mode 100644 index 0000000000..f75be357b6 --- /dev/null +++ b/files/es/mozilla/marketplace/publishing/updating_apps/index.html @@ -0,0 +1,24 @@ +--- +title: Actualización de aplicaciones +slug: Mozilla/Marketplace/Publishing/Updating_apps +translation_of: Archive/Mozilla/Marketplace/Publishing/Updating_apps +--- +
+

Nota: Si cambias el nombre de tu aplicacion despues de que haya sido aprobada por el Marketplace, tendrás que volver a enviarla para que sea aprobada.

+
+

Actualización de aplicaciones alojadas

+

Una aplicación respeta las reglas habituales de almacenamiento en caché y, tal vez en ocasiones, utilice mecanismos más avanzados para una mejora en el inicio, como HTML5 AppCache. Una vez dicho esto, no hay nada especial a tener en cuenta cuando actualicemos los recursos normales que utiliza una aplicación.

+

Sin embargo, las aplicaciones de código abierto son diferentes por el modo de manejar el manifiesto (manifest). Podría ser que ciertos cambios en el manifiesto requieran aprobación del usuario. Dependiendo de la implementación del tiempo de ejecución de la Web, puede resultar confuso si ha habido alguna actualización o no.

+

Una forma sencilla de manejar este asunto consiste en añadir un campo version en el manifiesto de la aplicación. Más adelante podrás comprobar la versión examinando el valor de retorno de la función navigator.mozApps.getInstalled(). Si la versión que el usuario tiene instalada no está actualizada, podrás lanzar una actualización utilizando navigator.mozApps.install().

+

El tiempo de ejecución de la Web no utiliza el valor version, de modo que puedes utilizar cualquier esquema de versión que desees.

+

Ten también en cuenta que se detectarán los cambios que hagas a un manifest que provoquen errores u otros daños si subes el manifest a Firefox Marketplace. Aquellos errores graves provocarán que se la aplicación desaparezca del listado. Los errores menos graves marcarán la aplicación para que sea revisada de nuevo.

+

Actualización de aplicaciones empaquetadas

+

Las aplicaciones empaquetadas tienen un proceso de actualización diferente al de las aplicaciones alojadas. Para actualizar una aplicación empaquetada, debes subir una nueva versión del archivo zip de la aplicación a Firefox Marketplace. Entonces, la aplicación actualizada se revisa y se publica en Marketplace. Este proceso lanza una actualización en el teléfono Firefox OS. El usario del teléfono también puede solicitar una actualización utilizando la aplicación de Configuración.

+

Si quieres más detalles sobre el proceso de actualización de una aplicación empaquetada, continúa leyendo.

+

Más detalles sobre la actualización de aplicaciones empaquetadas

+

Aquí tienes más detalles sobre el proceso de actualización de las aplicaciones empaquetadas. Puede que necesites esta información si vas a implementar un mercado de aplicaciones.

+ diff --git a/files/es/mozilla/marketplace/submission/index.html b/files/es/mozilla/marketplace/submission/index.html new file mode 100644 index 0000000000..1c01f1e00d --- /dev/null +++ b/files/es/mozilla/marketplace/submission/index.html @@ -0,0 +1,9 @@ +--- +title: Submission +slug: Mozilla/Marketplace/Submission +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Submission +--- +

Marketplace submission

diff --git a/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html b/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html new file mode 100644 index 0000000000..f33f1e743a --- /dev/null +++ b/files/es/mozilla/marketplace/submission/marketplace_review_criteria/index.html @@ -0,0 +1,82 @@ +--- +title: Marketplace review criteria +slug: Mozilla/Marketplace/Submission/Marketplace_review_criteria +tags: + - test +translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria +--- +
+

Este artículo describe el conjunto de requerimientos que una aplicación debe cumplir para ser distribuida a través de Firefox Marketplace. Los requerimientos están diseñados para equilibrar las necesidades entre desarrolladores y usuarios de aplicaciones de Firefox Marketplace. Los desarrolladores persiguen requerimientos equitativos, consistentes y no draconianos que puedan ser confiables para así construir un negocio sobre ello. Por otro lado, los usuarios necesitan asegurarse que las aplicaciones sean seguras, que funcionarán en su dispositivo, y que harán lo que indica que harán. Los requerimientos que se mencionan a continuación, aspiran un equilibro entre estas necesidades.

+
+

Aquí se mencionan las expectativas de Mozilla sobre lo que una reseña de aplicación es y no es:

+ +

Seguridad

+

Todos los detalles sobre la arquitectura de seguridad de las aplicaciones está disponible aquí: https://wiki.mozilla.org/Apps/Security

+ +

Privacidad

+ +

Contenido

+ +

Pautas de contenido

+

Esta lista describe los tipos de contenidos que son inapropiados para Firefox Marketplace. Esta lista es ilustrativa, no definitiva, y puede ser actualizada. Si una aplicación se encuentra que está violando el contenido de estas pautas, Mozilla tiene el derecho de remover inmediatamente la aplicación del Firefox Marketplace.

+ +

Funcionalidad

+ +

Usabilidad

+ +

Políticas para listas de bloqueo

+

Esperamos que nunca tengamos que usarlas, pero nos reservamos el derecho de remover ("blocklist") cualquier aplicación publicada que posteriormente se encuentre que viola cualquier requerimiento de seguridad, privacidad o contenido, o aplicaciones que seriamente degraden el sistema o el rendimiento de la red. Desarrolladores serán informados de la situación antes de que su aplicación esté en la lista de bloqueo, se asumirá que es un buen ciudadano a menos que encontremos evidencias que demuestren lo contrario y recibirá completa asistencia del equipo revisor de aplicaciones para comunicar lo que está pasando y sea así resulto el problema. Ejemplos específicos de situaciones donde listas de bloqueo se justifican, incluyen:

+ diff --git a/files/es/mozilla/marketplace/submission/rating_your_content/index.html b/files/es/mozilla/marketplace/submission/rating_your_content/index.html new file mode 100644 index 0000000000..ad57d6ee06 --- /dev/null +++ b/files/es/mozilla/marketplace/submission/rating_your_content/index.html @@ -0,0 +1,118 @@ +--- +title: Obtener una clasificación para tu aplicación +slug: Mozilla/Marketplace/Submission/Rating_Your_Content +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit/Rating_Your_Content +--- +
+

Mozilla se ha aliado con la International Age Rating Coalition (IARC) para incluir la clasificación de contenido por edades en todas las aplicaciones. Porque Mozilla se preocupa por los usuarios y cree que deberían tener la oportunidad de decidir qué contenido es apropiado para ellos, desde el 15 de Abril de 2014, todas las aplicaciones del Firefox Marketplace tendrán que tener una clasificación IARC. Aunque amamos todas nuestras aplicaciones, nuestro compromiso con esta iniciativa requiere que cualquier aplicación o juego que no tenga esta clasificación, sea eliminado después de la fecha límite del 15 de Abril de 2014. La IARC dispone de una herramienta gratuita para crear tu clasificación.

+
+ +

Sobre la herramienta de clasificación de la IARC

+ +

IARC, un esfuerzo colaborativo entre varias plataformas internacionales de clasificación, ha introducido una herramienta de de clasificación como solución para asignar clasificación de contenido de manera global a juegos y aplicaciones.
+ Rellenando un simple formulario, puedes recibir una clasificación instantánea para todas las plataformas participantes. Esto no solo ayuda a educar a los usuarios acerca del contenido, sino que reduce dramáticamente los costes y complicaciones de obtener la clasificación en varias plataformas de manera individual.

+ +

Sistemas de clasificación internacionales soportados

+ +

Usando un asistente de clasificacion, se generan las clasificaciones para multiples sistemas, países y regiones.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sistema de clasificaciónPaíses soportados
Classificação Indicativa Brasil
ESRBCanada, México, Estados Unidos
PEGIAustria, Dinamarca, Hungría, Letonia, Noruega, Eslovenia, Bélgica, Estonia, Islandia, Lituania, Polonia, España, Bulgaria, Finlandia, Irlanda, Luxemburgo, Portugal, Suecia, Chipre, Francia, Israel, Malta, Rumania, Suiza, República Checa, Grecia, Italia, Holanda, Eslovaquia, Reino Unido.
USKAlemania
GenericUsado para todos los demás paises
+ +

¿Qué hay en una clasificación de contenido?

+ +

El sistema de clasificación le proporciona a los usuarios tres tipos de información:

+ + + +

El proceso de clasificación es gratuito para los usuarios, solo lleva unos minutos y está integrado con el proceso de envío del Firefox Marketplace y el escritorio de desarrollador. Antes de que se revise una aplicación, debe estar clasificada. Los usuarios ven la clasificación de una aplicación según su región en la página de detalles de la aplicación y pueden ver más información si desean saber más.

+ +

Obtener una clasificación de contenido para tu aplicación

+ +

IARC proporciona una herramienta de clasificación muy sencilla y que para la mayoría de las aplicaciones, debería llevar menos de cinco minutos. En esta sección, vamos a repasar el proceso.

+ +
+

Nota: Desafortunadamente, no podemos aceptar clasificaciones de otros sistemas; si tu aplicación tiene una clasificación de otro sistema, sigues necesitando pasar por el proceso de certificación de IARC.

+
+ +
    +
  1. Ingresa en el sitio de desarrolladores de Firefox Marketplace; la herramienta de clasificación solo está visible si accedes como desarrollador.
    2. +
  2. +

    Accede a la herramienta de clasificación IARC durante el proceso de envío:

    + +

    Demonstrates where in the app submission flow where ratings can be entered.

    + +

    o desde el Escritorio de desarrolladores:

    + +

    +
    3. +
  3. +

    Comienza el proceso de clasificación:

    + +

    + +

    o introduce la información para una clasificación existente:

    + +

    +
    4. +
  4. +

    Rellena el breve cuestionario:

    + +

    +
    5. +
  5. +

    Añade información adicional sobre tu aplicación:

    + +

    +
    6. +
  6. +

    Previsualiza y confirma la información de tu clasificación:

    + +

    +
    7. +
  7. +

    Vuelve al escritorio de desarrollador y deberías ver tu información de clasificación. ¡Y ya estás listo!

    +
    8. +
+ +
+

Nota: Recibirás un correo electrónico con tu certificado de clasificación y código de seguridad. Por favor, conserva una copia para tus archivos.

+
+ +

Más información

+ +

Si tienes preguntas sobre el proceso de clasificación, cómo responder el cuestionario, o si piensas que tu clasificación es incorrecta, por favor escribe un correo electrónico al equipo de IARC, a dev-questions@globalratings.com. También hay información adicional en la página web de clasificaciones globales.

+ +

Si tienes alguna otra pregunta, puedes ponerte en contacto con el equipo de revisión de aplicaciones de Mozilla en mozilla.appreview.

diff --git a/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html b/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html new file mode 100644 index 0000000000..5b3d7bf716 --- /dev/null +++ b/files/es/mozilla/marketplace/submission/testing_and_troubleshooting/index.html @@ -0,0 +1,36 @@ +--- +title: 'Apps, pruebas y solución de problemas' +slug: Mozilla/Marketplace/Submission/Testing_and_troubleshooting +translation_of: >- + Archive/Mozilla/Marketplace/Publishing/Policies_and_Guidelines/Testing_and_troubleshooting +--- +
+

Este articulo engloba todo lo que se necesita para probar y solucionar los problemas de las apps.

+
+

Configura tu entorno de pruebas

+

Hay un número de herramientas que puedes instalar que realizan pruebas de funciones útiles para Firefox OS/open web apps. Te recomendamos al menos instalar las siguientes.

+ +

Idelamente deberás también tener algún dispositivo para propósitos de pruebas. Para más detalles, mira nuestra guía de desarrollo para celulares.

+

Pruebas

+

Incluso a través de las Open Web Apps se usa la misma tecnología métodos de entrega como las páginas web, la experiencia de usuario para las aplicaciónes is diferente dado que el entorno de la aplicación no contiene un navegador ni tampoco una barra de direcciones o un botón de retroceso, y lo celulares con Firefox OS no tendran un botón físico en su hardware como los celulares Android tienen. Estos pasos te ayudarán a asegurarte que te aplicación provée una gran experiencia de usuario.

+
    +
  1. Instala la aplicación. Asegúrate que los íconos se muestran en la ventana de inicio y el nombre de la aplicación no tiene palabras cortadas o escondidas.
    2. +
  2. Inicia la aplicación. Asegúrate que el tamaño de la pantalla y la orientacion son detectadas apropiadamente.
    3. +
  3. Asegúrate de que el usuario vea rápidamente tu aplicación, no tu pantalla de inicio. Recuerda, los usuarios que instalan tu app mediante el Firefox Marketplace ya han estado enterados en las características que ofrece tu aplicación. No hay necesidad de hacerlos brincar a otra pantalla envíandolos a una página de lanzamiento que enlista las características de tu aplicación otra vez. La primer experiencia ideal empieza un una página de inicio o de entrada.
    4. +
  4. Enfócate en las principales caracterísitcas que ofrece tu app. Específicamente presta atención a las opciones de navegación que no tengan opciones para regresar a otra pantalla y contenidos con posibles problemas ascendentes.
    5. +
  5. Asegúrate que los enlaces a contenido exterior a tu aplicación, como los enlaces a otras páginas web o Twitter, se abran en una nueva ventana o marco que le de la opción al usuario la posibilidad de volver a tu aplicación fácilmente.
    6. +
  6. En el navegador de escritorio, usa la Vista de Diseño Responsivo  para poder utilizar tu aplicación en diferentes tamaños de pantalla. Te recomendamos utilizar resoluciones desde 320x480 a 1260x800.
    7. +
+

Resolución de problemas

+ diff --git a/files/es/mozilla/mathml_project/basics/index.html b/files/es/mozilla/mathml_project/basics/index.html new file mode 100644 index 0000000000..2a9031c69d --- /dev/null +++ b/files/es/mozilla/mathml_project/basics/index.html @@ -0,0 +1,821 @@ +--- +title: Bases de MathML +slug: Mozilla/MathML_Project/Basics +translation_of: Mozilla/MathML_Project/Basics +--- +

Bases de MathML

+

Este documento muestra algunas de las construcciones básicas de MathML. Está confeccionado para mostrarse correctamente con la tipografía/fuente Symbol. Puedes ver su fuente. No obstante,  los documentos de MathML tienden a ser verborrágicos y puede ser que te extravíes intentando localizar fragmentos de MathML con la vista usual de código fuente. Se ha hecho esta demo con el fin de ilustrar los siguientes aspectos. Puedes hacer un clic derecho sobre cualquier fragmento matemático de interés a lo largo de este documento. El menú contextual no aparecerá. En realidad, el fragmento matemático hará zoom y, si haces clic una segunda vez, verás el WYSIWYG de lenguaje de marcado de MathML; y, si tu haces clic por tercera vez, el fragmento regresará a su estado original. Este modo de tres estados busca limitar los conflictos con otros agentes que compitan por el mouse.

+

Con MathML se puede construir conjuntos tales como (procede a hacer clic sobre cualquiera de estas ecuaciones para probar el zoom) { 0 , 1 , 2 , 3 , 4 } o { ⌊ a b ⌋ | a 2 + b 2 ≤ 3 } , escribir el cálculo d y d x = 1 y 2 , formar expresiones complejas lim n → N ( 1 + 1 n ) n − e N , k = ∂ 2 z ∂ x 2 ∂ 2 z ∂ y 2 - ( ∂ 2 z ∂ x ∂ y ) 2 ( 1 + ( ∂ z ∂ x ) 2 + ( ∂ z ∂ y ) 2 ) 2 , escribir ecuaciones de vectores Y = a ⁢ X + b , etcétera.

+

Nota cómo las anotaciones matemáticas aparecen en el flujo de texto principal y responden a medida de que reajustas la ventana. También puedes escribir ecuaciones representadas como la siguiente

+

x → mapea a y = f n ⁡ ( x ) = ( 1 + 1 x n ) n ∫ a b f ( x ) d x = b - a 6 [ f ( a ) + 4 f ( a + b 2 ) + f ( b ) ] - ( b - a ) 5 4 ! 5 ! f ( 4 ) ( η ) , a ≤ η ≤ b | x | = { - x si x < 0 x de lo contrario Tambien puedes escribir construcciones matemáticas bidimensionales [2D] como las matrices. El ejemplo siguiente muestra el + + paso i + -th de la multiplicación de una  matriz + + A + por un a vector + + x + (nota cómo ai1 , ... , ain , x1  están en la misma línea de base, otros alineamientos son posibles): i-th row [ a11 a12 a13 ... a1n : : : ... : ai1 ai2 ai3 ... ain : : : : an1 an2 an3 ... a n n ] [ x1 x2 x3 : xn ]

+

En Mozilla, MathML corre dentro del navegador principal por lo tanto responde a otras operaciones del navegador tales como el zoom (intenta Ver -> Ampliación/Zoom de texto), y puedes hacer hiperenlaces a 2 + b 2 = c 2 , aplicar estilos con effectos a 2 + b 2 = c 2 , o usar colores a 2 + b 2 = c 2 en formas variadas. p(x) q(x) = a0 + a1x + a2 x2 + ... + an-1 xn-1 b0 + b1x + b2 x2 + ... + bn-1 xn-1 .

+

También puedes hacer otras cosas extrañas y riesgosas que no son adaptables, advierte Bongo, tales como mezclar MathML con otros markups. Lagartija + Bongo = logo-star ∫ mozilla-16 a b d x + mathboard

+
+

MathML and Javascript

+

HTML Content

+ 
<p>
+And you can turn to JavaScript and the DOM for dynamic operations.
+</p>
+
+<div style="text-align:center">
+Fill the gaps in this matrix with resizable input fields.
+</div>
+<math class="inputmath" display="block">
+<mrow>
+<mi>A</mi>
+<mo>=</mo>
+<mo>[</mo>
+<mtable>
+<mtr>
+<mtd><mn>1</mn></mtd>
+<mtd>
+<mtext><input id="input12" value="?" size="1"/></mtext>
+</mtd>
+</mtr>
+<mtr>
+<mtd>
+<mtext><input id="input21" value="?" size="1"/></mtext>
+</mtd>
+<mtd><mn>4</mn></mtd>
+</mtr>
+</mtable>
+<mo>]</mo>
+</mrow>
+</math>
+<div style="text-align:center">
+Left size:
+<a class="control" href="javascript:incrementInput('input21', 1);" title="increase input">+</a>
+<a class="control" href="javascript:incrementInput('input21',-1);" title="decrease input">-</a>
+
+ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
+
+ Right size:
+<a class="control" href="javascript:incrementInput('input12', 1);" title="increase input">+</a>
+<a class="control" href="javascript:incrementInput('input12',-1);" title="decrease input">-</a>
+<br/>
+ (click these control buttons to see their effects.)
+ </div>
+
+<p>
+Each entry of the following matrix represents
+<math>
+<msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup>
+</math> for some <i>n</i>.
+When you left-click any individual entry, it should toggle between its expanded and
+unexpanded forms. You can also <a href="javascript:unexpand();">unexpand all</a> or
+<a href="javascript:expand();">expand all</a>.
+</p>
+
+<div>
+<math display="block">
+<mtable>
+<mtr>
+<mtd>
+<mtable align="axis" columnalign="left left left">
+<mtr>
+<mtd>
+<maction id="a11" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>0</mn>
+</msup>
+<mn>1</mn>
+</maction>
+</mtd>
+<mtd>
+<maction id="a12" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>1</mn>
+</msup>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+</maction>
+</mtd>
+<mtd>
+<maction id="a13" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>2</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>2</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+</mtr>
+<mtr>
+<mtd>
+<maction id="a21" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>1</mn>
+</msup>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+</maction>
+</mtd>
+<mtd>
+<maction id="a22" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>2</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>2</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+<mtd>
+<maction id="a23" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>3</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>3</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>3</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>3</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>3</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+</mtr>
+<mtr>
+<mtd>
+<maction id="a31" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>2</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>2</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+<mtd>
+<maction id="a32" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>3</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>3</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>3</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>3</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>3</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+<mtd>
+<maction id="a33" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>4</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>4</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>4</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>3</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>6</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>4</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>3</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>4</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+</mtr>
+<mtr>
+<mtd>
+<maction id="a41" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>3</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>3</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>3</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>3</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>3</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+<mtd>
+<maction id="a42" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>4</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>4</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>4</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>3</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>6</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>4</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>3</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>4</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+<mtd>
+<maction id="a43" actiontype="toggle" selection="2">
+<msup>
+<mrow>
+<mo>(</mo>
+<mrow>
+<mi>x</mi>
+<mo>+</mo>
+<mi>y</mi>
+</mrow>
+<mo>)</mo>
+</mrow>
+<mn>5</mn>
+</msup>
+<mrow>
+<msup>
+<mi>x</mi>
+<mn>5</mn>
+</msup>
+<mo>+</mo>
+<mrow>
+<mn>5</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>4</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<mi>y</mi>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>10</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>3</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>2</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>10</mn>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>x</mi>
+<mn>2</mn>
+</msup>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>3</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<mrow>
+<mn>5</mn>
+<mo>&InvisibleTimes;</mo>
+<mi>x</mi>
+<mo>&InvisibleTimes;</mo>
+<msup>
+<mi>y</mi>
+<mn>4</mn>
+</msup>
+</mrow>
+<mo>+</mo>
+<msup>
+<mi>y</mi>
+<mn>5</mn>
+</msup>
+</mrow>
+</maction>
+</mtd>
+</mtr>
+</mtable>
+</mtd>
+</mtr>
+</mtable>
+</math>
+</div>
+
+
+

CSS Content

+ 
.control {
+text-decoration: none;
+font-weight: bold;
+font-size: 200%;
+}
+input {
+color: red;
+}
+[class="inputmath"] {
+border: 1px dotted;
+}
+
+

JavaScript Content

+ 
function setSelection(id,value) {
+document.getElementById(id).setAttribute("selection",value);
+}
+function expand()
+{
+  setSelection("a11","2");  setSelection("a12","2");  setSelection("a13","2");
+  setSelection("a21","2");  setSelection("a22","2");  setSelection("a23","2");
+  setSelection("a31","2");  setSelection("a32","2");  setSelection("a33","2");
+  setSelection("a41","2");  setSelection("a42","2");  setSelection("a43","2");
+}
+function unexpand()
+{
+  setSelection("a11","1");  setSelection("a12","1");  setSelection("a13","1");
+  setSelection("a21","1");  setSelection("a22","1");  setSelection("a23","1");
+  setSelection("a31","1");  setSelection("a32","1");  setSelection("a33","1");
+  setSelection("a41","1");  setSelection("a42","1");  setSelection("a43","1");
+}
+
+function incrementInput(inputID, increment)
+{
+  var inputElement = document.getElementById(inputID);
+  var size = parseInt(inputElement.size) + increment;
+  if (size <= 0)
+    size = 1
+  inputElement.size = size;
+}
+
+

{{ EmbedLiveSample('MathML_and_Javascript', '100%', '400px') }}

+

Y podría haber más cosas...

+
+

MathML Button

+

HTML Content

+ 
<div style="text-align: center">
+  <button style="white-space: normal;">
+     <span style="color: brown;">
+
+       For example, <b>click</b> this MathML continued fraction<br/>
+       inside this HTML button<br />
+     </span>
+<math>
+<mrow>
+<mfrac>
+<mi>&pi;</mi>
+<mn>4</mn>
+</mfrac>
+<mo>=</mo>
+<mfrac numalign="left">
+<mstyle scriptlevel="0">
+<mn>1</mn>
+</mstyle>
+<mstyle scriptlevel="0">
+<mrow>
+<mn>2</mn>
+<mo>+</mo>
+<mfrac numalign="left">
+<mstyle scriptlevel="0">
+<msup><mn>1</mn><mn>2</mn></msup>
+</mstyle>
+<mstyle scriptlevel="0">
+<mrow>
+<mn>2</mn>
+<mo>+</mo>
+<mfrac numalign="left">
+<mstyle scriptlevel="0">
+<msup><mn>3</mn><mn>2</mn></msup>
+</mstyle>
+<mstyle scriptlevel="0">
+<mrow>
+<mn>2</mn>
+<mo>+</mo>
+<mfrac numalign="left">
+<mstyle scriptlevel="0">
+<msup><mn>5</mn><mn>2</mn></msup>
+</mstyle>
+<mstyle scriptlevel="0">
+<mrow>
+<mn>2</mn>
+<mo>+</mo>
+<mfrac numalign="left">
+<mstyle scriptlevel="0">
+<msup><mn>7</mn><mn>2</mn></msup>
+</mstyle>
+<mstyle scriptlevel="0">
+<mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo>
+</mstyle>
+</mfrac>
+</mrow>
+</mstyle>
+</mfrac>
+</mrow>
+</mstyle>
+</mfrac>
+</mrow>
+</mstyle>
+</mfrac>
+</mrow>
+</mstyle>
+</mfrac>
+</mrow>
+</math>
+  </button>
+</div>
+
+
+

{{ EmbedLiveSample('MathML_Button', '100%', '300px') }}

+

Para más información sobre MathML en Mozilla, mira la página del Proyecto MathML. Hay enlaces a más ejemplos, capturas de pantalla e instrucciones sobre cómo descargar fuentes tipográficas para varias plataformas. Dichas fuentes son requeridas para visualizar otros ejemplos además de las construcciones básicas mostradas aquí.

+
+

MathML Background Image

+

HTML Content

+ 
<div class="background"></div>
+<math display="block">
+<mrow>
+<msub>
+<mi>Z</mi>
+<mi>&alpha;</mi>
+</msub>
+<mrow>
+<mo>(</mo>
+<mi>f</mi>
+<mo>)</mo>
+</mrow>
+<mo>=</mo>
+
+<mfrac>
+<mn>1</mn>
+<mrow>
+<mn>2</mn>
+<mi>i</mi>
+<mo>&ThinSpace;</mo>
+<mi>cos</mi>
+<mo>(</mo>
+<mfrac>
+<mrow>
+<mi>&alpha;</mi>
+<mi>&pi;</mi>
+</mrow>
+<mn>2</mn>
+</mfrac>
+<mo>)</mo>
+</mrow>
+</mfrac>
+
+<mrow>
+<msub>
+<mo>&int;</mo>
+<mi>C</mi>
+</msub>
+<mfrac>
+<mrow>
+<mi>f</mi>
+<mo stretchy='false'>(</mo>
+<mi>i</mi>
+<mi>z</mi>
+<mo stretchy='false'>)</mo>
+<msup>
+<mrow>
+<mo>(</mo>
+<mo>-</mo>
+<mi>z</mi>
+<mo>)</mo>
+</mrow>
+<mi>&alpha;</mi>
+</msup>
+</mrow>
+<mrow>
+<msup>
+<mi>e</mi>
+<mrow>
+<mn>2</mn>
+<mi>&pi;</mi>
+<mi>z</mi>
+</mrow>
+</msup>
+<mo>-</mo>
+<mn>1</mn>
+</mrow>
+</mfrac>
+</mrow>
+<mi>d</mi>
+<mi>z</mi>
+</mrow>
+</math>
+

CSS Content

+ 
[class="background"] {
+  background-image: url(http://www.mozilla.org/images/mozilla-banner.gif);
+  opacity: 0.2;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 58px;
+}
+
+
+

{{ EmbedLiveSample('MathML_Background_Image', '100%', '300px') }}

diff --git a/files/es/mozilla/mathml_project/extras/index.html b/files/es/mozilla/mathml_project/extras/index.html new file mode 100644 index 0000000000..39f1f13d7f --- /dev/null +++ b/files/es/mozilla/mathml_project/extras/index.html @@ -0,0 +1,307 @@ +--- +title: Extras +slug: Mozilla/MathML_Project/Extras +tags: + - MathML +translation_of: Mozilla/MathML_Project/Extras +--- +

MathML Extras

+

Esta es una demostración técnica de algunos extras de Mozilla que aun no han sido definidos en la especificación MathML, pero que no se impide su uso por parte de otra especificación. No son portables , solo fueron creados para mostrar algunas características interesantes de usar código nativo desde el entorno del navegador. Se espera que otros renderizadores ignoren los atributos que no pueden comprender mientras estos extras permanezcan indefinidos.

+

El atributo + + title + como una descripción emergente (desde XHTML)

+
+

HTML Content

+ 
<p>Mouse over either log to see a tooltip showing the title
+
+<math display="block">
+<mrow>
+<mrow>
+<msub title="Base-a log">
+<mi>log</mi>
+<mi>a</mi>
+</msub>
+<mo>&ApplyFunction;</mo>
+<mi>x</mi>
+</mrow>
+<mo>=</mo>
+<mfrac>
+<mrow>
+<mi title="Natural log">ln</mi>
+<mo>&ApplyFunction;</mo>
+<mi>x</mi>
+</mrow>
+<mrow>
+<mi title="Natural log">ln</mi>
+<mo>&ApplyFunction;</mo>
+<mi>a</mi>
+</mrow>
+</mfrac>
+</mrow>
+</math>
+
+Rather than repeating the instructions,
+some CSS might be used to provide a visual cue. For example
+with the style rule: <code style="white-space: nowrap;">*[title] { color: blue; }</code>
+
+<math class="cue" display="block">
+<mrow>
+<mrow>
+<msub title="Base-a log">
+<mi>log</mi>
+<mi>a</mi>
+</msub>
+<mo>&ApplyFunction;</mo>
+<mi>x</mi>
+</mrow>
+<mo>=</mo>
+<mfrac>
+<mrow>
+<mi title="Natural log">ln</mi>
+<mo>&ApplyFunction;</mo>
+<mi>x</mi>
+</mrow>
+<mrow>
+<mi title="Natural log">ln</mi>
+<mo>&ApplyFunction;</mo>
+<mi>a</mi>
+</mrow>
+</mfrac>
+</mrow>
+</math>
+</p>
+
+
+

CSS Content

+ 
math.cue *[title] { color: blue; }
+
+

{{ EmbedLiveSample('MathML_Tooltip', '100%', '250px') }}

+

Mezclando con otras marcas

+
+

HTML Content

+ 
<math display="block">
+<mrow>
+<mi>A</mi>
+<mo>=</mo>
+<mo>[</mo>
+<mtable>
+<mtr>
+<mtd><mn>1</mn></mtd>
+<mtd>
+<mtext>
+<img width="16" height="16"
+src="http://www.mozilla.org/images/mozilla-16.png"
+alt="mozilla-16" />
+</mtext>
+</mtd>
+</mtr>
+<mtr>
+<mtd>
+<mtext><input value="type" size="4"/></mtext>
+</mtd>
+<mtd><mn>4</mn></mtd>
+</mtr>
+</mtable>
+<mo>]</mo>
+</mrow>
+</math>
+
+<math display="block">
+<msqrt>
+<mpadded width="30px" height="15px" depth="15px" voffset="-15px">
+<mtext>
+<svg width="30px" height="30px">
+<defs>
+<radialGradient id="radGrad1" cx="50%" cy="50%" r="50%"
+                            fx="50%" fy="50%">
+<stop offset="0%"
+                    style="stop-color:rgb(255,255,255); stop-opacity:1;"/>
+<stop offset="100%"
+                    style="stop-color:rgb(255,0,0); stop-opacity:.8;"/>
+</radialGradient>
+</defs>
+<g transform="translate(15,15)">
+<g>
+<animateTransform attributeName="transform"
+                                attributeType="XML" type="rotate"
+                                from="360" to="0"
+                                dur="15s" repeatCount="indefinite"/>
+<g transform="translate(-15, -15)">
+<path fill="url(#radGrad1)"
+                      d="M 15 0 L 20 10 L 30 15 L 20 20 L 15 30
+                         L 10 20 L 0 15 L 10 10"/>
+</g>
+</g>
+</g>
+</svg>
+</mtext>
+</mpadded>
+</msqrt>
+<mo>=</mo>
+<msubsup>
+<mo>∫</mo>
+<mn>0</mn>
+<mfrac>
+<mi>π</mi>
+<mn>2</mn>
+</mfrac>
+</msubsup>
+<msup>
+<mi>θ</mi>
+<mtext>
+<svg width="15px" height="15px">
+<defs>
+<radialGradient id="radGrad2" cx="50%" cy="50%" r="50%"
+                          fx="50%" fy="50%">
+<stop offset="0%"
+                  style="stop-color:rgb(255,255,255); stop-opacity:1;"/>
+<stop offset="100%"
+                  style="stop-color:rgb(0,0,255); stop-opacity:.9;"/>
+</radialGradient>
+</defs>
+<g>
+<animateMotion path="M0,0 L3,0 L2,5 L5,5 L0,4 L5,2 z"
+                         begin="0s" dur="0.5s" repeatCount="indefinite"/>
+<circle fill="url(#radGrad2)" r="5px" cx="5px" cy="5px"/>
+</g>
+</svg>
+</mtext>
+</msup>
+<mrow>
+<mo>ⅆ</mo>
+<mi>θ</mi>
+</mrow>
+</math>
+
+<div style="width: 300px; margin-left: auto; margin-right: auto;">
+<svg width="300px" height="250px">
+<defs>
+<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
+<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
+</linearGradient>
+
+<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
+<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
+<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
+</linearGradient>
+
+<radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>
+<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/>
+</radialGradient>
+</defs>
+
+<rect width="300" height="250" fill="url(#grad1)"/>
+
+<g transform="translate(150,125)">
+<g>
+<animateTransform attributeName="transform"
+                          attributeType="XML" type="rotate" from="0" to="360"
+                          dur="6s" repeatCount="indefinite"/>
+
+<g transform="translate(-50,-35)">
+<rect width="100" height="70" fill="url(#grad2)"/>
+<switch>
+<foreignObject width="100" height="70"
+                           requiredExtensions="http://www.w3.org/1998/Math/MathML">
+<math display="block">
+<mrow>
+<mo>(</mo>
+<mtable>
+<mtr>
+<mtd><mi>cos</mi><mi>θ</mi></mtd>
+<mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd>
+</mtr>
+<mtr>
+<mtd><mi>sin</mi><mi>θ</mi></mtd>
+<mtd><mi>cos</mi><mi>θ</mi></mtd>
+</mtr>
+</mtable>
+<mo>)</mo>
+</mrow>
+</math>
+</foreignObject>
+<text>rotation matrix</text>
+</switch>
+</g></g></g>
+<g>
+<animateMotion path="M 32,69 C 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z"
+                     begin="0s" dur="20s" repeatCount="indefinite"/>
+<animateTransform attributeName="transform"
+                        attributeType="XML" type="scale"
+            values="1;2;.5;1" keyTimes="0;.25;.75;1" dur="20s"
+            repeatCount="indefinite"/>
+<circle fill="url(#grad3)" r="30"/>
+<g transform="translate(-30,-30)">
+<switch>
+<foreignObject width="60" height="60"
+requiredExtensions="http://www.w3.org/1998/Math/MathML">
+<math display="block">
+<mrow>
+<munderover>
+<mo>∑</mo>
+<mrow>
+<mi>n</mi>
+<mo>=</mo>
+<mn>0</mn>
+</mrow>
+<mrow>
+<mo>+</mo>
+<mi>∞</mi>
+</mrow>
+</munderover>
+<mfrac>
+<msup>
+<mi>α</mi>
+<mi>n</mi>
+</msup>
+<mrow>
+<mi>n</mi>
+<mo>!</mo>
+</mrow>
+</mfrac>
+</mrow>
+</math>
+</foreignObject>
+<text>exp(α)</text>
+</switch>
+</g>
+</g>
+</svg>
+</div>
+
+
+
+

{{ EmbedLiveSample('Mixing_with_other_markups', '100%', '500px') }}

+

 

+

JavaScript Incorporado

+
+

HTML Content

+ 
<math display="block">
+<mfrac>
+<mtext id="num">Mouse</mtext>
+<mtext id="denum">Over</mtext>
+</mfrac>
+</math>
+

JavaScript Content

+ 
function whoIsThereAlert(evt)
+{
+  alert("Who is there?");
+}
+function attachListener(id)
+{
+  document.getElementById(id).addEventListener("mouseover", whoIsThereAlert);
+}
+function init()
+{
+  attachListener("num");
+  attachListener("denum");
+}
+
+window.addEventListener("load", init);
+
+
+

{{ EmbedLiveSample('Inline_JavaScript', '100%', '200px') }}

+

 

diff --git a/files/es/mozilla/mathml_project/fonts/index.html b/files/es/mozilla/mathml_project/fonts/index.html new file mode 100644 index 0000000000..c1fb8a094e --- /dev/null +++ b/files/es/mozilla/mathml_project/fonts/index.html @@ -0,0 +1,60 @@ +--- +title: Fuentes para el motor Mozilla MathML +slug: Mozilla/MathML_Project/Fonts +translation_of: Mozilla/MathML_Project/Fonts +--- +
Nota: Estas instrucciones son para Gecko 2.0 (Firefox 4) y posteriores. Para versiones anteriores ver Fonts for Mozilla 1.8, Fonts for Mozilla 1.9 o Fonts for Mozilla 2.0
+ +

Instrucciones rápidas

+ + + +

Resumen

+ +

Las fórmulas matemáticas hacen uso de numerosos símbolos representados por caracteres Unicode específicos. Mozilla puede mostrar cualquiera de estos símbolos si están instaladas las fuentes Unicode adecuadas. Además, de acuerdo con las  recomendaciones de la W3C sobre funetes en CSS2 , los autores pueden especificar una lista concreta de fuentes que prefieren (utilizando la propiedad font-family de CSS), con la seguridad de que el motor de fuentes de Mozilla's buscará una fuente alternativa cuando las especificadas no se encuentren en el sistema de un usario en particular. Si en último caso no se encontrase un fuente adecuada para un caracter en particular, Mozilla mostrará en su lugar una caja con la representación hexadecimal  del código Unicode que apunta al caracter.

+ +

Algunos operadores matemáticos se dibujan también usando glifos para variantes más largas del caracter ( e.j. el símbolo de la suma )  o montanto glifos para algunas partes del carcater ( e.j. llaves ). En general estas variantes o partes de glifos no tienen asignación Unicode y se necesita soporte soporte específico de la fuente para esos caracteres. Mozilla tiene soporte general para los delimitadores y flechas comunes que tienen las asignaciones Unicode necesarias. Para otros caracteres, Mozilla tiene soporte específico de fuentes. En general, si los glifos necesarios no están disponibles en el sistema, Mozilla intenta estirar los símbolos usando transformaciones de escalado, pero el resuntado del renderizado puede no resultar menos satisfactorio.

+ +

Para ver MathML como se pretende, necesitas tener apoyo de fuentes suficiente, lo que puede significar tener que instalar algunas fuentes. En ese caso, verás el renderizado correcto si usas Geko 15.0 {{ geckoRelease("15.0") }}o superior.

+ +

Fuentes principales

+ +

El STIX Fonts Project ha desarrollado un conjunto de fuentes comprensible que cubre todos los símbolos en MathML y también contiene glifos para estirar los operadores matemáticos. Están disponibles bajo licencia SIL Open Font License y se deberían instalar para un mejor renderizado de MathML. Ten en cuenta que actualmente, solo las fuente en /Fonts/STIX-General/ se utilizan para estirar operadores matemáticos con fuentes STIX. Asana Math  también está disponible de manera gratuita bajo licencia SIL Open Font License y tiene buen soporte para caracteres matemáticos. Empezando en Geko 7.0 {{ geckoRelease("7.0") }}, Mozilla también puede usar glifos contenidos en esa fuente para operadores alargados. Desde Gecko 13.0 {{ geckoRelease("13.0") }}, MathJax fonts se utiliza como fuente por defecto para textos matemáticos y estirado de símbolos. Estas fuentes están disponibles gratuitamente bajo licencia Apache License. Se asemejan al renderizado de LaTeX y deberían resultarle más familiares a los científicos. Las funetes MathJax también mejoran el soporte para el atributo mathvariant (  ej. para escribir el doble tachado, el guión y el texto fraktur ).

+ +

Todas las fuentes arriba mencionadas pueden estar ya instaladas por defecto en tu sistema o pueden ser instaladas fácilmente vía gestor de software. Por conveniencia, proporcionamos un archivo zip con la funtens de MathML. Las fuentes pueden ser instaladas extrayendo los archivos ( que tienen la extensión  .otf ) del archivo zip y siguiendo después las  in instrucciones para Microsoft Windows o copiando los archivos a ~/Library/Fonts folder en Mac OS X, o a al directorio ~/.fonts/ (que puede no estar creado) en sistemas Unix/Linux. De manera alternativa, siga las instrucciones de dafont's "How to install a font". Estas fuentes son OpenType PostScript,  que son soportadas por la mayoría de sistemas operativos modernos. Sin embargo, algunos sistemas operativos puede que no las soporten. En esos sistemas, será necesario convertir esas fuentes a un formato que esté soportado. Por ejemplo Asana Math está disponible en formato TrueType y hay una conversión no oficial TrueType para fuentes STIX.

+ +

Otras fuentes

+ +

Las siguientes fuentes no son necesarias si las fuentes de arriba están instaladas, pero cabe señalarlas por su soporte para Unicode para muchos caracteres matemáticos.

+ +

 

+ +

DejaVu Serif y DejaVu Sans están  disponibles gratuitamente e instalafas con muchas distribuciones Linux. Contienen soporte para muchos caracteres matemáticos y Mozilla mostrará MathML de manera razonable en sistemas con estas fuentes instaladas, incluso sin fuentes STIX. La copia de la fuente, contiene glifos para operadores elásticos con asignación Unicode.

+ +

Cambira Math está preinstalada en Microsoft Windows Vista, y también viene con Microsoft Office 2007 o Microsoft PowerPoint Viewer 2007. La fuente tuene buen soporte para caracteres matemáticos y por tanto, con cualquiera de estos productos instalados, Mozilla será capaz de mostrar MathML razonablemente incluso sin fuentes STIX. La fuente contiene los glifos necesarios para operadores elásticos, pero Mozilla aun no hace uso de todos ellos. La licencia permite que "uses esta según lo permitido por la EULA para el producto en el cual la fuente se incluye para mostrar e imprimir contenido",  así que conviene una consulta legal si estás considerando instalarla en sistemas sin los productos asociados.

+ +

Futuro trabajo (¡Ayuda, por favor!)

+ +

Algunas fuentes OpenType incluyen una tabla MATH como un a extensión OpenType permitiría glifos para operadores flexibles en una manera "no tan específica para fuentes", pero Mozilla aun no hace uso de esto. Esto incluye Cambria Math, Neo Euler, STIX 1.1, LM Math, Lucida fonts, Asana Math y probablemente más.
+ Un instalador experimental para Mac OS X está disponible en {{ Bug("770005") }}.

+ +

Implementar una UI para descargar automáticamente las fuentes. Están disponibles algunos parches en {{ Bug("295193") }}.

+ +

Para distribuciones Linux, uno puede usar el PackageKit DBUS API ({{ Bug("467729") }}).
+ Para plataformas móviles, ver {{ Bug("648548") }} y para  Firefox OS {{ Bug("775060") }}

+ +

Otros bugs relacionados: suggest MathJax/Asana on Debian, Math fonts on Android.

+ +

Reajustar viejas preferencias

+ +

Si los usuarios han cambiado previamente la preferencia "font.mathfont-family" en una versión previa de Mozilla, entonces es mejor resetearlo al valor por defecto. Para hacerlos, escribe la url "about:config", "Filter" para "mathfont", and "Reset" al valor por defecto a través del menú contextual en preferencias.

+ +
 
diff --git a/files/es/mozilla/mathml_project/index.html b/files/es/mozilla/mathml_project/index.html new file mode 100644 index 0000000000..21b436807f --- /dev/null +++ b/files/es/mozilla/mathml_project/index.html @@ -0,0 +1,91 @@ +--- +title: Proyecto Mozilla MathML +slug: Mozilla/MathML_Project +tags: + - MathML + - MathML Project + - NeedsTranslation + - TopicStub +translation_of: Mozilla/MathML_Project +--- +

El proyecto Mozilla MathML es un proyecto de Mozilla para crear y mejorar el soporte de MathML en Firefox y otras aplicaciones de Mozilla.

+ +

Actualizaciones

+ +

mathboard.png

+ + + +

3 de Mayo de 2013

+ +

Firefox Nightly pasa el test MathML Acid2 ; Artículo en Slashdot ; Artículo en ghacks .

+ +

10 de Enero de 2013

+ +

Chrome 24 ha sido lanzado con soporte básico para MathML.

+ +

actualización: MathML deshabilitado de nuevo en Chrome 25 :-(

+ +

1 de Diciembre de 2012

+ +

¡Todas las páginas de Mozilla MathML Project han sido migradas a MDN!

+ +

26 de Noviembre de 2012

+ +

Math typesetting - ¿Por qué estamos dejando un asunto tan importante en manos de voluntarios con escasos recursos y pequeñas organizaciones?

+ +

Comunidad

+ + + +

Enlaces

+ + + +

Documentos de MathML

+ + + +

Crear documentos MathML

+ + + +
+

Información del documento original

+ + +
diff --git a/files/es/mozilla/mathml_project/mathml3testsuite/index.html b/files/es/mozilla/mathml_project/mathml3testsuite/index.html new file mode 100644 index 0000000000..fd25091d3b --- /dev/null +++ b/files/es/mozilla/mathml_project/mathml3testsuite/index.html @@ -0,0 +1,64 @@ +--- +title: MathML3 Testsuite +slug: Mozilla/MathML_Project/MathML3Testsuite +tags: + - MathML + - MathML Testsuite +translation_of: Mozilla/MathML_Project/MathML3Testsuite +--- +

Las siguientes páginas contienen los resultados obtenidos al realizar el MathML 3 full testsuite para la presentación de MathML. Las secciones están marcadas con paso, fallo, no-probado o probado-en-parte,  mostrando así el estado de las construcciones con la correspondiente fuente instalada. Cuando el marcador es intencionalmente erróneo, el comportamiento correcto no esta definido por la recomendación y por lo tanto la prueba se considera "pasada" sí, no hay errores fatales. Esta excepción también se cumple para funciones obsoletas (como por ejemplo macro, mode, etc.) o para otros comportamientos aun no definidos  (attribute, href por ejemplo).

+

Note que en general comparando con el "ejemplo de renderizado" no es suficiente para concluir que una prueba fue aprobada o fallida. Así que por favor no edite estas páginas si usted no es capaz de explicar el proceso de renderizado de Gecko. Sin embargo, cualquier reporte es bienvenido en la web de Rastreo de bug para MathML testsuite.

+ +
+

Información del Documento Original

+ +
+

 

diff --git a/files/es/mozilla/mathml_project/screenshots/index.html b/files/es/mozilla/mathml_project/screenshots/index.html new file mode 100644 index 0000000000..a6b868e20e --- /dev/null +++ b/files/es/mozilla/mathml_project/screenshots/index.html @@ -0,0 +1,14 @@ +--- +title: Pantallas MathML +slug: Mozilla/MathML_Project/Screenshots +translation_of: Mozilla/MathML_Project/Screenshots +--- + diff --git a/files/es/mozilla/mathml_project/start/index.html b/files/es/mozilla/mathml_project/start/index.html new file mode 100644 index 0000000000..78534ad6cd --- /dev/null +++ b/files/es/mozilla/mathml_project/start/index.html @@ -0,0 +1,96 @@ +--- +title: MathML en acción +slug: Mozilla/MathML_Project/Start +tags: + - MathML +translation_of: Mozilla/MathML_Project/Start +--- +

MathML en  acción

+

¿Ves elegantes ecuaciones a lo largo de esta página? ¿No? Que mal, aquí tienes una captura de pantalla  de lo que te estás perdiendo. Descarga una versión de Mozilla habilitada para usar MathML para remediar esta situación.

+

¿Ahora ya tienes una versión de Mozilla habilitada para usar MathML pero lo que ves en las capturas de pantalla no es lo que obtienes? En ese caso, probablemente te faltan algunas fuentes MathML importantes.

+

Ahora que estas bien equipado, deberías poder ver esta ecuación incorporada con varios acentos: x ^ + x⁢y ^ + x⁢y⁢z ^ . Al lado de esta tienes esta pequeña fórmula,  det | a c b d | = a d - b c , la cual también puede ser compuesta en displaystyle como det | a b c d | = a d - b c .

+

La composición matemática es difícil. MathML en Mozilla busca cumplir con las especificaciones MathML de modo que + + What + + You See Is What You Markup + (Lo Que Ves Es Lo Que Marcas), o dicho de otra manera + + What + + You See Is What You Made + (Lo Que Ves Es Lo Que Haces), o de forma más corta "WYSIWYM". ¡La diferencia entre estas dos es el marcado! ( ... ( ( a 0 + a 1 ) n 1 + a 2 ) n 2 + ... + a p ) n p ( ... ( ( a 0 + a 1 ) n 1 + a 2 ) n 2 + ... + a p ) n p

+

Las raíces de esta ecuación en negrita  y 3 + p y + q = 0 también están en negrita y = - q 2 + q 2 4 + p 3 27 2 3 + - q 2 - q 2 4 + p 3 27 2 3 .

+

Mientras que las raíces de la ecuación a x 2 + b x + c = 0 , haz clic en cualquier parte del área amarilla para acercar y alejar:

+
+

Zoomable Math

+

HTML Content

+ 
    <p>
+      <math display="block">
+        <mstyle id="zoomableMath" mathbackground="yellow">
+          <mrow>
+            <mi>x</mi>
+            <mo>=</mo>
+            <mfrac>
+              <mrow>
+                <mrow>
+                  <mo>-</mo>
+                  <mi>b</mi>
+                </mrow>
+                <mo>&#xB1;</mo>
+                <msqrt>
+                  <mrow>
+                    <msup>
+                      <mi>b</mi>
+                      <mn>2</mn>
+                    </msup>
+                    <mo>-</mo>
+                    <mrow>
+                      <mn>4</mn>
+                      <mi>a</mi>
+                      <mi>c</mi>
+                    </mrow>
+                  </mrow>
+                </msqrt>
+              </mrow>
+              <mrow>
+                <mn>2</mn>
+                <mi>a</mi>
+              </mrow>
+            </mfrac>
+          </mrow>
+        </mstyle>
+      </math>
+    </p>
+
+
+

JavaScript Content

+ 
      function zoomToggle()
+      {
+      if (this.hasAttribute("mathsize")) {
+      this.removeAttribute("mathsize");
+      } else {
+      this.setAttribute("mathsize", "200%");
+      }
+      }
+
+      function load()
+      {
+      document.getElementById("zoomableMath").
+      addEventListener("click", zoomToggle, false);
+      }
+
+      window.addEventListener("load", load, false);
+
+

{{ EmbedLiveSample('Zoomable_Math') }}

+

Considere un marcado interesante como este { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if  x < 0 u + if  x > 0 u otros marcados complejos como estos Ell ^ Y ( Z ; z , τ ) := ∫ Y ( ∏ l ( y l 2 π i ) θ ( y l 2 π i - z ) θ ′ ( 0 ) θ ( - z ) θ ( y l 2 π i ) ) × ( ∏ k θ ( e k 2 π i - ( α k + 1 ) z ) θ ( - z ) θ ( e k 2 π i - z ) θ ( - ( α k + 1 ) z ) ) π ( n ) = ∑ m = 2 n ⌊ ( ∑ k = 1 m - 1 ⌊ ( m / k ) / ⌈ m / k ⌉ ⌋ ) - 1 ⌋ ‖ ϕ ‖ W s k ( Ω g ) ≝ ( ∑ | α | ≦ k ∂ α ϕ ∂ ξ α L s ( Ω g ) s ) 1 / s

+

Para más ejemplos, ve a los enlaces en le página del Proyecto MathML, y sí estás construyendo tu propio binario de Mozilla, ve el directorio + + mozilla + + /layout/mathml/tests + .

+

Ahora, ¿Qué sigue? Mientras pruebas MathML en Mozilla, ¿Qué hacer con esas cosas que parecen no funcionar según la especificación MathML? ¿O con esas cosas que simplemente parecen molestas, y que desearías poder hacer un poco mejor? ¿O con esas cosas que antes funcionaban y ya no funcionan mas (regresiones)? En cualquiera de las casos, dirígete a Bugzilla para reportar las anomalías. Bugzilla tiene gran memoria para estas cosas, además, ¿cómo serían tus problemas solucionados si no son reportados?

+

Involucrarse es parte de tu contribución al enriquecimiento de Gecko con un procesador de MathML de estándares elegantes y obediente. Tu puedes dar tu opinión colocando contenido con MathML en la web, reportando bugs en Bugzilla, y, sí puedes ayudar con código, inspeccionando o mejorando el código existente y/o escogiendo un elemento en la lista de tareas pendientes.

+
+  
diff --git a/files/es/mozilla/mathml_project/status/index.html b/files/es/mozilla/mathml_project/status/index.html new file mode 100644 index 0000000000..bee65af721 --- /dev/null +++ b/files/es/mozilla/mathml_project/status/index.html @@ -0,0 +1,325 @@ +--- +title: Estado de Mozilla MathML +slug: Mozilla/MathML_Project/Status +translation_of: Mozilla/MathML_Project/Status +--- +

Resumen de los elementos y/o atributos de MathML 3 (excluyendo elementos sin uso) y estado actual del soporte nativo. Se muestran referencias a MathML 3. Las secciones están marcadas con su correspondiente estado: soportado, en progreso, y no soportado actualmente. Las secciones relacionadas a semántica/contenido, MathML o funciones irrelevantes se dejan en blanco o no se muestran en la lista. Si solo la función principal de un elemento esta implementado, esa sección sera marcada como soportado pero los detalles de los atributos no soportados se especifican después.

+

Elementos de nivel superior de Math

+

Vea § 2.2.

+ + + + + + + + + + + + + + + + + + + + + + + +
AtributoNotas
displayImplementado.
maxwidth, overflowNo Implementado. Ver {{ Bug("534962") }}.
altimg, altimg-width, altimg-height, altimg-valign, alttextMathML esta siempre activado, por lo que soportar estos atributos es irrelevante. Vea {{ Bug("660762") }}.
cdgroup 
+

Atributos Compartidos por todos los elementos MathML

+

Vea § 2.1.6 y § 3.1.10.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoNotas
id, class, styleImplementado.
xref 
hrefImplementado en Gecko.  Nota: la interfaz de usuario funciona correctamente en Seamonkey pero no en Firefox. Ver {{ Bug("534968") }}.
mathcolorImplementado.
mathbackgroundImplementado.
+

Elementos de Señalización

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Elemento [- atributo]Notas
miImplementado.
mi - mathvariantParcialmente Implementado. Ver {{ Bug("114365") }}.
mnImplementado.
moImplementado.
mo - linebreaking attributes, indentation attributesNo Implementado. Ver {{ Bug("534962") }}.
mtextImplementado.
mspaceImplementado.
mspace - linebreakNo Implementado. Ver {{ Bug("380266") }}.
msImplementado.
+

Esquema de Diseño General

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Elemento [- atributo]Notas
mrowImplementado.
mfracImplementado.
msqrtImplementado.
mrootImplementado.
mstyleImplementado.
mstyle - lquote, rquoteNo Implementado. Ver {{ Bug("560100") }}.
mstyle - infixlinebreakstyleNo Implementado. Ver {{ Bug("534962") }}.
mstyle - decimalpointNo Implementado.
merrorImplementado.
mpaddedImplementado.
mphantomImplementado.
mfencedImplementado.
mencloseImplementado.
+

Script y Limites esquemáticos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Elemento [- atributo]Notas
msubImplementado.
msupImplementado.
msubsupImplementado.
munderImplementado.
moverImplementado.
munderoverImplementado.
mmultiscriptsImplementado.
+

Cálculos en Tablas

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Elemento [- atributo]Notas
mtableImplementado.
mtable - alignmentscopeNo Implementado. Ver {{ Bug("122253") }}.
mtable - columnspacing, rowspacingNo Implementado. Ver {{ Bug("330964") }}.
mtable - columnwidth, framespacing, equalrows, equalcolumnsNo Implementado.
mtable - side, minlabelspacingNo Implementado. Ver {{ Bug("356870") }}.
mtrImplementado.
mtdImplementado.
* - groupalign.No Implementado. Ver {{ Bug("122253") }}.
maligngroupNo Implementado. Ver {{ Bug("122253") }}.
malignmarkNo Implementado. Ver {{ Bug("122253") }}.
+

Cálculos Elementales

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Elemento [- atributo]Notas
mstackNo Implementado. Ver {{ Bug("534967") }}.
mlongdivNo Implementado. Ver {{ Bug("534967") }}.
msgroupNo Implementado. Ver {{ Bug("534967") }}.
msrowNo Implementado. Ver {{ Bug("534967") }}.
mscarriesNo Implementado. Ver {{ Bug("534967") }}.
mscarryNo Implementado. Ver {{ Bug("534967") }}.
mslineNo Implementado. Ver {{ Bug("534967") }}.
+

Otros Elementos

+ + + + + + + + + + + + + + + + + + + + + + + +
Elemento [- atributo]Notas
mglyphNo Implementado. Ver {{ Bug("297465") }}.
mactionImplementado.
maction - tooltipNo Implementado. Ver {{ Bug("544001") }}.
semanticsImplementado en {{geckoRelease("23.0")}}.
+
+

Información Original del Documento

+ +
+

 

diff --git a/files/es/mozilla/mathml_project/student_projects/index.html b/files/es/mozilla/mathml_project/student_projects/index.html new file mode 100644 index 0000000000..bff715a243 --- /dev/null +++ b/files/es/mozilla/mathml_project/student_projects/index.html @@ -0,0 +1,49 @@ +--- +title: Proyectos Estudiantiles +slug: Mozilla/MathML_Project/Student_Projects +tags: + - MathML +translation_of: Mozilla/MathML_Project/Student_Projects +--- +

Verano 2012

+

Ver "Como me involucre con Mozilla y mi intento de traer nuevos contribuidores" en el blog de Frédéric para una revisión de contribuciones.

+

MathML Dinámico (Andrii Zui)

+

Andrii ha sido aceptada para el "Google Summer of Code" de 2012.

+ +

reconstrucción de mtable (Quentin Headen)

+ +

Verano 2011

+

Implantación de nuevas funciones de MathML en el motor de Mozilla (Jonathan Hage)

+

Durante un internado de dos meses, Jonathan trabajó en los siguientes bugs

+ +

También agregó soporte para el atributo mpadded@voffset {{ Bug("557474") }} y trabajó también en los elementos munderover:

+ +

Finalmente empezó a trabajar en algunos

+ +

Los parches Jonathan seran integrados en Firefox 7 u 8. El trabajo restante será finalizado por Frédéric después. Actualmente Jonathan no se encuentra involucrado en el proyecto Mozilla MathML.

+

Verano 2007

+

Mejorar el soporte MathML en Mozilla (Vladimir Sukhoy)

+

El plan de Vladimir's era unir MathML al tronco principal pero era demasiado trabajo para un proyecto de verano, el quería empezar implementando MathML DOM para familiarizarse con el código.

+ +

Desafortunadamente la mayoria de sus cambios no han sido integrados al tronco del proyecto. Algunas de las fallas en las que trabajo han sido corregidas por otras personas. Notablemente Karl ha restaurado el soporte MathML en el tronco. DOM fue removido de MathML 3 y no tenemos planes de implementarlo. Vladimir no se encuentra activo en el proyecto Mozilla MathML.

diff --git a/files/es/mozilla/mathml_project/various/index.html b/files/es/mozilla/mathml_project/various/index.html new file mode 100644 index 0000000000..b0ae4a4337 --- /dev/null +++ b/files/es/mozilla/mathml_project/various/index.html @@ -0,0 +1,36 @@ +--- +title: Various MathML Tests +slug: Mozilla/MathML_Project/Various +translation_of: Mozilla/MathML_Project/Various +--- +

Visión en conjunto de la Presentación de los elementos de MathML

+ +

Teoría de la dispersión de Thomson

+

d 2 P d Ω s   d ω s = r e 2 ∫ V < S i > d 3 r ∫ | e ^ . Π ↔ . e ^ | 2 κ 2 f   δ ( k . v - ω ) d 3 v = r e 2 ∫ V < S i > d 3 r ∫ | 1 - ( 1 - s ^ . ı ^ ) ( 1 - β i ) ( 1 - β s ) β e 2 | 2 | 1 - β i 1 - β s | 2 × ( 1 - β 2 )   f   δ ( k . v - ω ) d 3 v

+

Ecuaciones de Maxwell

+

{ ∇ × B → - 1 c ∂ E → ∂ t = 4 π c j → ∇ ċ E → = 4 π ρ ∇ × E → + 1 c ∂ B → ∂ t = 0 → ∇ ċ B → = 0

+

Ecuaciones de campo de Einstein

+

R μ ν - 1 2 g μ ν R = 8 π G c 4 T μ ν

diff --git a/files/es/mozilla/opciones_de_linea_de_comandos/index.html b/files/es/mozilla/opciones_de_linea_de_comandos/index.html new file mode 100644 index 0000000000..f6873fbb6c --- /dev/null +++ b/files/es/mozilla/opciones_de_linea_de_comandos/index.html @@ -0,0 +1,448 @@ +--- +title: Opciones de línea de comandos +slug: Mozilla/Opciones_de_linea_de_Comandos +tags: + - Administración + - Documentación + - Linea de Comandos + - Preguntas y Respuestas + - extensiones +translation_of: Mozilla/Command_Line_Options +--- +

Las opciones de la línea de comandos se utilizan para especificar opciones de arranque para las aplicaciones de Mozilla. Por ejemplo, es posible utilizar una opcion de la linea de comandos para saltearse el Administrador de Perfiles y abrir un perfil específico (en el caso de tener varios perfiles). También es posible controlar la manera en que las aplicaciones de Mozilla se inician, que componentes se abren inicialmente y que es lo que estos hacen cuando se abren. Esta página describe las opciones mas utilizadas y la manera de usarlas.

+ +

Reglas de Sintaxis

+ +

Primero vamos a describir las reglas de sintaxis que aplican a todas las opciones.

+ + + +

Usando las opciones de linea de comandos

+ +

Las opciones de linea de comando son introducidas posteriormente al comando para iniciar la aplicación. Algunas opciones tienen argumentos. Estos son añadidos como opciones de la linea de comandos. Algunas opciones tienen abreviaturas.  Por ejemplo, la opción de linea de comandos "-editor" puede ser abreviada como "-edit". (Cuando las abreviaturas estan habilitada, tal y como esta expuesto mas abajo). En algunos casos sera necesario que los argumentos vayan entrecomillados. (Tal y como se puede contemplar el recuadro inferior.) Se pueden especificar muchas opciones de linea de comandos .  Por lo general la sintaxis es como la que sigue:

+ +
application -option -option "argument" -option argument
+
+ +

Ejemplos

+ +

Los suiguientes ejemplos muestran el uso del comando "-ProfileManager" , esta opción de linea de comando abre el gestor de perfiles de Firefox o Thunderbird:

+ +

Windows

+ +

Seleccione ejecutar en el menú de inicio y escriba:

+ +
firefox -ProfileManager
+
+ +

Mac OS X

+ +

Vaya a Aplicaciones> Utilidades. Abra un emulador de terminal y tecleé:

+ +
cd /Applications/Firefox.app/Contents/MacOS
+./firefox -ProfileManager
+
+ +

Linux

+ +

Abra un terminal y escriba:

+ +
cd Thunderbird installation directory
+./thunderbird -ProfileManager
+
+ +

El ejemplo anterior invoca  la opción de linea de comando"-ProfileManager" en el cliente de correo Mozilla Thunderbird.

+ +

User Profile

+ +

-CreateProfile profile_name

+ +

Create a new profile in the default directory, but do not start application. The profile will be named profile_name in the profile manager. profile_name must not contain spaces ( ).

+ +
firefox -CreateProfile JoelUser
+
+ +

-CreateProfile "profile_name profile_dir"

+ +

Creates a new profile in the profile_dir directory, but do not start application. The profile will be named profile_name in the profile manager. Note profile_name and profile_dir are quoted together, and are separated by exactly 1 space (as with the previous syntax, profile_name must not contain spaces).

+ +

NOTE: profile_dir must not exist and you must not already have a profile called profile_name.

+ +
firefox -CreateProfile "JoelUser c:\internet\joelusers-moz-profile"
+
+ +

-ProfileManager

+ +

Start with Profile Manager. Short form: -P without a profile name.

+ +

-P "profile_name"

+ +

Bypass Profile Manager and launch application with the profile named profile_name. Useful for dealing with multiple profiles. Note profile_name is case sensitive. If you don't specify a profile name then the profile manager is opened instead. You must use an upper case P on Linux with versions older than 7.x, as there lower case invokes Purify mode (memory and leak detection). Other platforms accept both upper and lower case.

+ +
firefox -P "Joel User"
+
+ +

-profile "profile_path"

+ +

Start with the profile with the given path. Firefox, Thunderbird and SeaMonkey2.x only.

+ +

"profile_path" can either be an absolute path ("/path/to/profile") or a relative path ("path/to/profile").

+ +
Note: On Mac OS X specifying a relative path is not supported anymore from Firefox 4.0 and up due to a regression, see {{ bug(673955) }}.
+ +

-no-remote

+ +

Allows multiple copies of application to be open at a time.

+ +
firefox -no-remote -P "Another Profile"
+
+ +
Note: Since Firefox 9, this does really mean what its name implies on all platforms, i.e. instances created with this parameter do not accept or send remote commands, see {{ bug(650078) }}. That means that such instances won't be re-used. Also when using this argument a new instance is created in any case.
+ +

-migration

+ +

Start with Import Wizard.

+ +

-override /path/to/override.ini

+ +

Load the specified override.ini file to override application.ini ({{ Source("browser/app/application.ini") }}). This can be used to suppress the Migration Wizard at startup by loading the following override.ini. Firefox only.

+ +
[XRE]
+EnableProfileMigrator=0
+
+ +

Browser

+ +

-browser

+ +

Start with the browser component. Firefox and SeaMonkey only.

+ +

-url URL

+ +

Open URL in a new tab or window, depend on the browser option. -url can be omitted. You may list multiple URLs, separated by spaces. Firefox and SeaMonkey only.

+ +
Note: When opening multiple URLs, Firefox always opens them as tabs in a new window.
+ +
firefox www.mozilla.com
+firefox www.mozilla.com developer.mozilla.org
+
+ +

-private

+ +

Opens Firefox in permanent private browsing mode. Firefox 3.6 and later only.

+ +

Not Applicable in Ubuntu for Firefox 20 and later.

+ +

-private-window

+ +

Opens a new private browsing window in an existing instance of Firefox. Firefox 20 and later only.

+ +

-private-window URL

+ +

Open URL in a new private browsing window. If a private browsing window is already open, a new tab is opened in the existing window. Firefox 29 and later only. Does not work in Firefox 31 on linux mint 17 - results in page being opened in non-private window.

+ +

-new-tab URL

+ +

Open URL in a new tab. Firefox and SeaMonkey2.x only.

+ +

-new-window URL

+ +

Open URL in a new window. Firefox and SeaMonkey2.x only.

+ +

-search term

+ +

Search term with your default search engine. Firefox and SeaMonkey 2.1 and later only.

+ +

-preferences

+ +

Open Options/Preferences window. Firefox and SeaMonkey2.x only.

+ +

-setDefaultBrowser

+ +

Set the application as the default browser. Firefox only.

+ +

Mail/News

+ +

-mail

+ +

Start with the mail client. Thunderbird and SeaMonkey only.

+ +

-news news_URL

+ +

Start with the news client. If news_URL (optional) is given, open the specified newsgroup. Thunderbird and SeaMonkey only.

+ +
thunderbird -news news://server/group
+
+ +

-compose message_options

+ +

Start with mail composer. See syntax rules. Thunderbird and SeaMonkey only.

+ +
thunderbird -compose "to=foo@nowhere.net"
+
+ +

-addressbook

+ +

Start with address book. Thunderbird and SeaMonkey only.

+ +

-options

+ +

Open Options/Preferences window. Thunderbird only.

+ +

-offline

+ +

Start with the offline mode. Thunderbird and SeaMonkey only.

+ +

-setDefaultMail

+ +

Set the application as the default email client. Thunderbird only.

+ +

Calendar

+ +

-calendar

+ +

Start with the calendar client. Sunbird only.

+ +

-subscribe URL or -url URL

+ +

Subscribe to the given URL. Sunbird only.

+ +

-showdate date

+ +

Show your schedule of the given date. Sunbird only.

+ +
sunbird -showdate 08/04/2008
+
+ +

Other Components

+ +

-editor URL or -edit URL

+ +

Start with editor (Composer) for the given URL (where URL is optional). SeaMonkey only.

+ +
seamonkey -edit www.mozilla.org
+
+ +

-jsdebugger

+ +

Start application with Browser Toolbox (formerly Browser Debugger). That is different to Venkman debugger (see option -venkman).

+ +


+ -jsconsole

+ +

Start application with the Error Console.

+ +
+

The Error Console is deprecated in Firefox, and is now only made available if you set the devtools.errorconsole.enabled preference to true. Use the Web Console instead, for web content, or the Browser Console for chrome content.

+ +

Beginning with Firefox 28, -jsconsole will start Firefox with Browser Console instead.

+
+ +

-inspector URL

+ +

Start with the DOM Inspector, if installed, and inspect the given URL (where URL is optional).

+ +

-venkman

+ +

Start with the JavaScript debugger, Venkman, if installed.

+ +

-purgecaches

+ +

Gecko (layout engine) has a javascript cache, which is not reset on startup. This clears it.

+ +

-chat

+ +

Start with the IRC client, ChatZilla, if installed.

+ +

XULRunner

+ +

-app /path/to/application.ini

+ +

Start a new process running the XULRunner application at path/to. Also works with Firefox version 3 and above.

+ +

--register-global

+ +

Registers XULRunner on the system for all users. Must be run as admin / root.

+ +

--register-user

+ +

Registers XULRunner for a single user.

+ +

--unregister-global

+ +

Unregisters XULRunner for all users.

+ +

--unregister-user

+ +

Unregisters XULRunner for a single user.

+ +

--install-app path/to/myapplication.(xpi|xulapp)

+ +

Installs the XULRunner application at path/to onto the system. Applications are installed into the default location for your system (program files|Applications|usr/lib) at vendorname/applicationName.  Applications may be uninstalled per usual methods for your system.

+ +
"C:\Program Files\Mozilla XULRunner\1.8.0.4\xulrunner\xulrunner.exe" --install-app "C:\Users\Billdo\Desktop\myapplication.xpi"
+ +
/opt/xulrunner/1.8.0.4/xulrunner/xulrunner --install-app ~/Desktop/myapplication.xulapp
+ +
​/Library/Frameworks/XUL.framework/xulrunner-bin --install-app ~/Desktop/myapplication.xpi
+ +

Chrome

+ +

-chrome chrome_URL

+ +

Load the specified chrome.

+ +
firefox -chrome chrome://inspector/content
+
+ +

-register chrome_URL

+ +

Register the specified chrome, but do not start application.

+ +

Add-ons

+ +

{{ gecko_minversion_note("1.9.2", "-install-global-extension and -install-global-theme have been removed from Gecko 1.9.2 and upwards.") }}

+ +

-install-global-extension /path/to/extension

+ +

Installs the extension into the application directory. The parameter is the path to the extension. You must have administrative privileges.

+ +

-install-global-theme /path/to/theme

+ +

Same as above, but for themes. You must have administrative privileges.

+ +
+

Note: Since Firefox 2.0.0.7, use of the -install-global-extension and -install-global-theme command line arguments have been restricted to only allow installing add-ons that are on local disks or mapped drives. Installing from a network share directly will no longer succeed.

+
+ +

-safe-mode

+ +

Launches the application with all extensions disabled, for that launch only. (Extensions are not loaded, but are not permanently disabled in the Extension Manager data source).

+ +

Locale

+ +

-UILocale locale

+ +

Start with locale resources as UI Locale.

+ +
firefox -UILocale en-US
+
+ +

Remote Control

+ +

-remote remote_command

+ +

Execute remote_command in an already running application process (see remote control).

+ +
firefox -remote "openURL(www.mozilla.org, new-tab)"
+
+ +

Miscellaneous

+ +

-tray

+ +

Start application minimized to system tray. Useful with autorun.

+ +

-silent

+ +

Don't open default windows. Useful with those command-line arguments that open their own windows but don't already prevent default windows from opening. Firefox, Thunderbird3.x and SeaMonkey2.x only.

+ +

-console

+ +

Start application with a debugging console. Note: Windows only.

+ +
+

If you would like the console messages to appear in the console you used to launch the application, you can use the Gecko Console Redirector. Precompiled binaries are available in the zipped archive https://github.com/matthewkastor/Redirector/archive/master.zip under Redirector-master\Gecko\Console Redirector\bin\Release Copy all the dll's and the exe to wherever you want. Then run Console Redirector.exe /?

+
+ +

-h or -help or -?

+ +

Print the list of all available command line options. Note that on Windows this only works with a redirection such as |more ({{ Bug(355889) }}). This option is available only in a command console.

+ +

-v or -version

+ +

Print application version. Note that on Windows this only works with a redirection such as |more ({{ Bug(355889) }}). This option is available only in a command console.

+ +

-osint

+ +

Tells the application that it is being launched by the OS shell. This should not be specified unless the caller provides all of the functionality provided by the OS shell when launching the application ({{ Bug(384384) }}).

+ +

-requestPending

+ +

Tells the application that there will be a Windows DDE request to open the same url specified on the command line. This should not be specified unless the caller provides all of the functionality provided by the OS shell when launching the application ({{ Bug(354005) }}).

+ +

X11 options

+ +

These options are only available for an application build for and running atop the X11/X.org display and window system to be found on Linux and other Unix-based systems.

+ +

--display=DISPLAY

+ +

Set the X display to use

+ +

--class=WM_CLASS

+ +

Set the WM_CLASS resource class of the X11 windows created by the application.

+ +

--sync

+ +

Make X calls synchronous

+ +

--g-fatal-warnings

+ +

Make all warnings fatal

+ +

Other options need to be documented

+ + + +

References

+ + + +
+

Original Document Information

+ + +
+ +


+ ciones

diff --git a/files/es/mozilla/participating_in_the_mozilla_project/index.html b/files/es/mozilla/participating_in_the_mozilla_project/index.html new file mode 100644 index 0000000000..846070a7e3 --- /dev/null +++ b/files/es/mozilla/participating_in_the_mozilla_project/index.html @@ -0,0 +1,106 @@ +--- +title: Participating in the Mozilla project +slug: Mozilla/Participating_in_the_Mozilla_project +tags: + - bug-840092 +translation_of: Mozilla/Participating_in_the_Mozilla_project +--- +

Si usted esta interesado en ayudar a reparar bugs y  trabajar de otra manera  con el codigo subyacente de la plataforma de Mozilla, este es el lugar para encontrar la documentación que te orientará en la dirección correcta.

+ + + + + + + + + + + +
+

Temas Generales

+
+
+ Guía para desarrolladores de Mozilla
+
+ Consejos de desarrollo y guías para contribuir al código base de Mozilla.
+
+ Código fuente de Mozilla
+
+ Información sobre cómo obtener el código de Mozilla, ya se mediante descarga o mediante el control de versiones, y cómo obtener el código en el árbol.
+
+ Construir Documentación
+
+ Información sobre cómo contruir los proyectos de Mozilla, como Firefox y Thunderbird. Esta página necesita limpieza.
+
+ La plataforma de Mozilla
+
+ Información sobre la plataforma de Mozilla, incluyendo la totalidad de su APIs y tecnologías, así como la forma de utilizarlos en sus propios proyectos.
+
+ Documentación de Mozilla
+
+ Ayudanos a crear y mejorar nuestra documentación para Mozilla y la Web Abierta.
+
+ Depuración
+
+ Consejos útiles y directrices a seguir para depurar el código de Mozilla.
+
+ Aseguramiento de la calidad
+
+ Información sobre pruebas y bug tracking.
+
+ Localización
+
+ Documentación sobre tradución de los  proyectos de Mozilla, documentación y otros contendos en multiples idiomas.
+
+ Glosario
+
+ Terminos y definiciones usado por los hackers de Mozilla.
+
+

Páginas del proyecto

+
+
+ Thunderbird
+
+ Cliente de correo electrónico de Mozilla
+
+ Sunbird
+
+ Proyecto de calendario de Mozilla
+
+ 		+

Herramientas

+
+
+ Bugzilla
+
+ Bugzilla es la base de datos utilizado para rastrear temas para proyectos de Mozilla.
+
+ MXR
+
+ Examinar y buscar el repositorio de código fuente de Mozilla en la web.
+
+ Bonsai
+
+ Bonsai la herramienta que permite saber quíen cambió qué archivo en el repositorio, y cuando lo hicieron.
+
+ (Esto  es para Firefox 3.0 en adelante.)
+
+ Tinderbox
+
+ Tinderbox muestra el estado de el árbol (si es o no actualmente se genera correctamente). Comprueba esto antes del registro de salida, para asegurarse de que está funcionando con el árbol de trabajo.
+
+ Seguimiento de accidente
+
+ Informacion sobre el sistema de notificaciones de accidente Socorro.
+
+ Seguimiento del rendimiento
+
+ Ver la información del rendimiento para los proyectos de Mozilla.
+
+ Foros para Desarroladores
+
+ Una lista de temas especificos de los foros de discusión donde se pueda hablar de los temas de desarrollo de Mozilla.
+
+
  
+

 

diff --git a/files/es/mozilla/persona/branding/index.html b/files/es/mozilla/persona/branding/index.html new file mode 100644 index 0000000000..5b8b5255ea --- /dev/null +++ b/files/es/mozilla/persona/branding/index.html @@ -0,0 +1,42 @@ +--- +title: Recursos de marca +slug: Mozilla/Persona/branding +translation_of: Archive/Mozilla/Persona/User_interface_guidelines +--- +

Inicia sesión con los botones de Persona

+

Imágenes

+

Los botones de "Inicio de sesión" están disponibles en tres versiones, y tres colores:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Iniciar sesión con tu correoIniciar sesión con PersonaIniciar sesión
Negro
Azul
Red
+

Basados en CSS

+

Sawyer Hollenshead ha creado un conjunto de excelentes botones basados en CSS. Descarga (.zip)

+

Más información

+

Puedes encontrar más información sobre el diseño visual de Persona en manual de estilo de Sean Martell.

diff --git a/files/es/mozilla/persona/browser_compatibility/index.html b/files/es/mozilla/persona/browser_compatibility/index.html new file mode 100644 index 0000000000..f9e916c23c --- /dev/null +++ b/files/es/mozilla/persona/browser_compatibility/index.html @@ -0,0 +1,73 @@ +--- +title: Compatibilidad de navegadores +slug: Mozilla/Persona/Browser_compatibility +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- + +

Persona está desarrollado, probado y es compatible con los siguientes navegadores. Gracias a la biblioteca JavaScript multiplataforma de Persona, los usuarios no necesitan complementos para poderlo usar.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Navegadores de escritorio
Internet Explorer8.0*, 9.0†
FirefoxActual estable, Beta, Aurora, Nightly, y versiones ESR
+ Versión anterior estable
ChromeÚltima versión estable
SafariÚltima versión estable
OperaÚltima versión estable‡
Navegadores en iOS
Mobile SafariiOS 5.x — 6.x
Navegadores en Android
Navegador predeterminado2.x — 4.x
FirefoxActual estable, Beta, Aurora, y versiones
+ Versión anterior estable
ChromeÚltima versión estable
+

*: En Windows XP. †: En Windows Vista y Windows 7. ‡: Siempre que se pueda.

+ + +

Otros navegadores

+

Aunque no se indique explicitamente, cualquier navegador que incluya tanto {{ domxref("window.postMessage()") }} y {{ domxref("Storage", "localStorage") }} debería funcionar. Estas APIs están disponibles en la mayoría de los navegadores desde marzo de 2010.

+

Problemas conocidos

+ diff --git a/files/es/mozilla/persona/faq/index.html b/files/es/mozilla/persona/faq/index.html new file mode 100644 index 0000000000..b015db56ef --- /dev/null +++ b/files/es/mozilla/persona/faq/index.html @@ -0,0 +1,59 @@ +--- +title: Preguntas más frecuentes +slug: Mozilla/Persona/FAQ +tags: + - Persona +translation_of: Archive/Mozilla/Persona/FAQ +--- +

¿Cuál es la diferencia entre Mozilla Persona y BrowserID?

+

Persona es una implementación completa de un nuevo sistema de acceso distribuido de Mozilla.

+

BrowserID es el protocolo abierto que rige el funcionamiento de Persona.

+

Como una analogía: Persona permite a los usuarios iniciar sesión en los sitios que implementan BrowserID. De la misma manera, Firefox permite a los usuarios navegar por la web implementando HTTP.

+

¿Cómo se compara Persona con OpenID?

+

Persona y OpenID tienen objetivos muy similares y una arquitectura similar. Ambos sistemas reducen el número de contraseñas que un usuario necesita, y ambos están diseñados para ser descentralizados. Esto quiere decir que cualquier dominio puede presentarse como proveedor de identidad sin depender de una autoridad central.

+

A pesar de estas similitudes, Persona es más fácil de usar y más fácil de añadir a los sitios web. Persona también protege mejor la privacidad de los usuarios. En concreto:

+
+
+ Persona es más fácil para los usuarios
+
+ Persona identifica los usuarios basándose en las direcciones de correo electrónico, que los usuarios ya conocen, comprenden y asocian naturalmente con las identidades en línea. Con OpenID, los usuarios se ven obligados a aprender un nuevo nombre de usuario: una URL que no es intuitiva.
+
+ Iniciar sesión mediante Persona también es fácil: después de haberse configurado la primera vez, sólo son necesarios 2 clics para autenticarse.
+
+ Persona es más fácil para los desarrolladores
+
+ Persona tiene una {{ domxref("navigator.id", "API simple") }} que sólo toma una tarde para entender y empezar a usar.
+
+ Las identidades Persona son direcciones de correo electrónico, por lo tanto, los sitios web no necesitan pedir a los usuarios más información de contacto durante el registro.
+
+ Dado que los usuarios conocen y entienden su dirección de correo electrónico, los desarrolladores no tienen que construir páginas complejas con botones de inicio de sesión para todos los proveedores populares de OpenID.
+
+ Persona protege mejor la privacidad del usuario
+
+ Por su diseño, OpenID permite a los proveedores de identidad rastrear a sus usuarios en la web: cada vez que un usuario inicia sesión en un sitio web, el navegador se redireccionado al proveedor de identidad del usuario, y luego se redirecciona otra vez al sitio. Estas redirecciones exponen completamente al proveedor de identidad la información de a donde va el usuario.
+
+ En contraste, el protocolo BrowserID nunca filtra información de seguimiento hacia el proveedor de identidad. Más bien, se comporta de una manera similar al de una tarjeta de identificación: los usuarios obtienen credenciales firmadas de sus proveedores de identidad, que se pueden presentar a los sitios web como prueba de identidad. Los sitios web pueden comprobar la validez de las credenciales sin tener que revelar la identidad de un usuario a su proveedor de identidad.
+
+

¿Por qué Persona requiere JavaScript?

+

Persona requiere JavaScript, pero algunos usuarios optan por bloquear selectivamente desactivar el JavaScript mediante el uso de complementos del navegador como NoScript. Muchos de estos usuarios están preocupados por las implicaciones de privacidad de tener habilitado JavaScript, ya que este se utiliza a menudo para rastrear a los visitantes a través de sitios web.

+

Sin embargo, en el caso de Persona, el JavaScript se utiliza realmente para mejorar la privacidad del usuario, ya que permite al navegador realizar operaciones criptográficas en el lado del cliente. Al hacer estas operaciones en el cliente, Persona evita la necesidad de almacenar las claves privadas en otro lugar que no sea en el propio navegador del usuario.

+

¿Persona garantiza la obtención de una dirección de correo electrónico válida para mis usuarios?

+

 

+

No, Persona sólo garantiza la asociación del usuario con una dirección. Al igual que con cualquier dirección de correo electrónico en cualquier sistema de inicio de sesión, es posible que la dirección ya no funcione o no sea comprobada regularmente por el usuario. Para la mayoría de los usuarios, la dirección de correo electrónico será funcional.

+

¿Como verifica Persona la asociación de un usuario con una dirección?

+

Persona le hace una petición al dominio de la dirección, y este es libre de verificar sus usuarios de la manera que elija. Si el dominio no es un proveedor de identidad nativo, y por tanto, no puede verificar sus propios usuarios, el navegador solicita la verificación al proveedor de identidad de reserva (fallback) de Persona a https://login.persona.org. Antes de certificar la identidad de un usuario, el proveedor de identidad de reserva prueba la dirección, enviándole un correo electrónico, y pídiendole al usuario que haga clic en el enlace que éste contiene.

+

¿Cómo manejar la recuperación de la cuenta si los usuarios pierden el control de su correo electrónico?

+

La mejor manera de hacerlo es permitir a los usuarios añadir una dirección de correo electrónico secundaria en su cuenta. Ver "Adición de direcciones de correo electrónico adicionales con Persona".

+

¿Puedo alojar yo mismo include.js, o la tengo que incluir desde https://login.persona.org?

+

El código a include.js aún está sujeto a cambios. No se recomienda que se aloje en ningún servidor propio.

+

¿Puedo verificar las afirmaciones a nivel local, o tengo que usar el servicio de verificación remoto?

+

Para garantizar la privacidad de los usuarios, es importante que las aserciones de identidad se verifiquen a nivel local, y no con el servicio de verificación remota. Sin embargo, el formato de las afirmaciones aún está sujeta a cambios, por lo que la verificación local aún no es recomendable. Aun con la verificación remota, Persona protege al usuario de seguimiento con su proveedor de identidad.

+

Una vez que el protocolo se haya estabilizado, las bibliotecas estarán disponibles para simplificar la verificación local. Siga el Blog de Identity para saber cuándo es recomendable la verificación local.

+

¿Qué consejos hay para la migración de los usuarios que actualmente utilizan otros métodos de inicio de sesión?

+

A pesar de los beneficios de Persona, nunca es fácil mover todos los usuarios a un nuevo sistema de inicio de sesión. Convenientemente, el enfoque que hace Persona con las direcciones de correo electrónico hace que sea fácil de usar junto con los sistemas de acceso ya existentes, por lo que no hace falta cambiar a todos a la vez.

+

Un enfoque particular de baja fricción es sugerir Persona a usuarios que no recuerden su contraseña. En lugar de restablecer las contraseñas, los usuarios sólo tienen que acceder con Persona.

+

¿Como he de señalar que "Sign In" también permite la creación de cuentas nuevas?

+

¿Cómo puedo obtener información sobre cambios importantes en BrowserID, como APIs nuevas u obsoletas?

+

Cuando un cambio que rompe la compatibilidad hacia atrás o una función queda obsoleta, se anuncia a la lista de correo persona-notices. Suscríbete.

+

Para obtener información sobre las nuevas funciones y mejoras, sigue el blog del equipo identity.

+

Para la discusión de desarrollo, suscríbete a la lista de correo dev-identity.

diff --git a/files/es/mozilla/persona/glosario/index.html b/files/es/mozilla/persona/glosario/index.html new file mode 100644 index 0000000000..41f36a0f20 --- /dev/null +++ b/files/es/mozilla/persona/glosario/index.html @@ -0,0 +1,67 @@ +--- +title: Glosario +slug: Mozilla/Persona/Glosario +translation_of: Archive/Mozilla/Persona/Glossary +--- +

"Persona" vs. "BrowserID"

+

Persona es una implementación completa de un nuevo sistema de acceso distribuido, desde Mozilla.

+

BrowserID es el protocolo abierto que rige cómo funciona Persona.

+

Terminología Común De Persona

+
+
+ BrowserID
+
+
+
+ Un protocolo descentralizado abierto para autenticar a los usuarios sobre la base de direcciones de correo electrónico.
+
+
+
+ Proveedor de identidad ("IdP")
+
+
+
+ Servicios que expiden credenciales a sus usuarios.
+
+
+
+ Los proveedores de correo electrónico pueden convertirse en proveedores de identidad de sus usuarios mediante la adición de soporte para el protocolo de autenticación BrowserID a su servicio. Si un proveedor de correo electrónico no admite Persona, Mozilla cuenta con un proveedor de identidad de reserva en login.persona.org.
+
+ login.persona.org
+
+ Un proveedor de identidad de reserva dirigido por el equipo de Identidad de Mozilla.
+
+ Persona
+
+ El nombre de cara al usuario de una suite completa de servicios relacionados con la identidad de Mozilla, entre ellos el proveedor de identidad de reserva operada por Mozilla. Los usuarios finales no deben ver el término "BrowserID."
+
+ Persona puede eventualmente incluir características más allá del protocolo BrowserID, como partes de Firefox Sync o un cuadro de mandos para Open Web Apps.
+
+

Parte Dependiente ("RP")
+      Cualquier sitio web, aplicación o servicio que permite a los usuarios iniciar sesión a través de Persona.

+

Proyecto Codenames

+
+
+ BigTent
+
+ Un conjunto de tres proveedores de identidad de repliegue que avalan a los usuarios de Hotmail, Gmail y Yahoo Mail, respectivamente. BigTent opera cerrando el protocolo BrowserID con OpenID o OAuth para cada proveedor de correo electrónico. Fuente disponible en https://github.com/mozilla/browserid-bigtent.
+
+ Vinz Clortho
+
+ Un proveedor de identidad de direcciones de correo electrónico para @mozilla.com y @mozilla.org . Funciona mediante la consulta LDAP. Fuente disponible en https://github.com/mozilla/vinz-clortho. El nombre es una referencia de una película de 1984 llamada Ghostbusters.
+
+

Terminología Persona Poco Frecuente

+
+
+ Autoridad Primaria ("Principal")
+
+ Término en desuso para los proveedores de correo electrónico que también son capaces de actuar como proveedores de identidad.
+
+ Autoridad Secundaria ("Secundario")
+
+ Término en desuso para un repliegue de proveedores de identidad que pueden dar fe de los usuarios, cuyos proveedores de correo electrónico no son proveedores de identidad. Mozilla cuenta con un proveedor de identidad de reserva en login.persona.org.
+
+ Verificador De Protocolo De Email
+
+ Un viejo nombre, difunto para el protocolo BrowserID.
+
diff --git a/files/es/mozilla/persona/index.html b/files/es/mozilla/persona/index.html new file mode 100644 index 0000000000..66c9c3a1e2 --- /dev/null +++ b/files/es/mozilla/persona/index.html @@ -0,0 +1,131 @@ +--- +title: Persona +slug: Mozilla/Persona +tags: + - Individuo + - Objeto + - Persona +translation_of: Archive/Mozilla/Persona +--- +
+

Contacta o pide ayuda

+ +

Sigue nuestro blog, únete a nuestra lista de correo, o encuéntranos en #identity en IRC.

+
+ +

Mozilla Persona es un sistema de autenticación para la web completamente descentralizado y seguro basado en el protocolo abierto de BrowserID. Para asegurarse que Mozilla Persona trabaja en cualquier lugar y que puede ser usado por cualquiera, Mozilla actualmente opera con una pequeña suite de servicios optativos y centralizados relacionados con Mozilla Persona.

+ +

¿Por qué deberías usar Mozilla Persona en tu sitio web?

+ +
    +
  1. Mozilla Persona elimina por completo las contraseñas específicas para los sitios web, lo que libera a los usuarios y a las páginas web de tener que crear, administrar y guardar de manera segura las contraseñas.
    2. +
  2. Mozilla Persona es fácil de usar. Con tan solo dos clics un usuario de Mozilla Persona puede identificarse en un sitio web nuevo como Voost o The Times Crossword,  lo que elimina la fricción que se asocia a la creación de nuevas cuentas.
    3. +
  3. Mozilla Persona es fácil de implementar. Cualquier desarrollador puede agregar Mozilla Persona a una página web en una tarde.
    4. +
  4. Y lo mejor de todo, no tiene un efecto candado. Los desarrolladores obtienen una dirección de correo verificada para todos sus usuarios y, a su vez, los usuarios pueden utilizar cualquier dirección de correo que deseen con Mozilla Persona
    5. +
+ +

¡Sigue leyendo para saber cómo comenzar!

+ +
Nota: Persona está actualmente en desarrollo activo. Sigue nuestro blog para descubrir nuevas características, o ¡únete a nuestra lista de correo y danos tu opinión!
+ +

Usar Mozilla Persona en tu sitio

+ + + + + + + + + + + + +
+

Comenzar

+ +
+
¿Por qué Mozilla Persona?
+
Descubre los motivos para implementar Mozilla Persona en tu web, así como las diferencias con otros sistemas de identidad y autenticación.
+
Inicio rápido
+
Un paseo rápido para mostrar cómo añadir Mozilla Persona a tu sitio web.
+
+ 		+

Referencia a la API Mozilla Persona

+ +
+
The navigator.id API reference
+
Referencia al objeto navigator.id, el cual pueden utilizar los desarrolladores web para integrar Persona en sus sitios web.
+
Verification API reference
+
Referencia para la API de verificación remota alojada en https://verifier.login.persona.org/verify.
+
+
+

Guías

+ +
+
Consideraciones de seguridad
+
Prácticas y técnicas para asegurar un despliegue seguro de Persona.
+
Compatibilidad de navegadores
+
Descubre qué navegadores son compatibles con Persona.
+
Internacionalización
+
Descubre cómo Persona maneja diferentes idiomas.
+
+ 		+

Recursos

+ +
+
Bibliotecas y complementos
+
Encuentra la biblioteca para tu lenguaje de programación favorito, framework web, blog o sistema de gestión de contenido (CMS).
+
The Persona cookbook
+
Ejemplos de código fuente para sitios con Persona. Incluye snippets en PHP, Node.JS y más.
+
Branding resources
+
Botones de inicio de sesión y otros gráficos para ayudarte a presentar Persona a tus usuarios.
+
+
+ +

 

+ + + + + + + + +
+

Información para proveedores de identidad

+ +

Si usted es un proveedor de correo u otro proveedor de servicios de identidad, vea los siguientes enlaces para aprender acerca de convertirse en un Proveedor de Identidad Persona.

+ +
+
Informaciòn general deIdP
+
Una vista de alto nivel de los Proveedores de Identidad Persona.
+
Implementando un IdP
+
Una guía detallada sobre los detalles técnicos de convertirse en IdP.
+
Consejos de desarrollo
+
Un conjunto de consejos y trucos útiles para el desarrollo de un nuevo Proveedor de Identidad.
+
.well-known/browserid
+
Información general de la estructura y propósito del archivo de .well-known/browserid, el cual IdPs usa para anunciar el soporte para el protocolo.
+
+ 		+

El proyecto Mozilla Persona

+ +
+
Glosario
+
Definición de los términos BrowserID y Persona.
+
FAQ
+
Respuestas a preguntas frecuentes.
+
Información general del protocolo
+
Descripción técnica a nivel medio del protocolo Persona subyacente
+
Crypto
+
Una mirada a los conceptos criptográficos detrás de Persona y BrowserID.
+
La especificación
+
Profundos detalles técnicos viven aquí.
+
El sitio web de Persona
+
Para hacer funcionar a Persona, estamos hosteando trés servicios en https://login.persona.org: un Proveedor de Identidad en caso de fallos, una implementación portable de las APIs de {{ domxref("navigator.id") }} y un servicio de verificación de afirmación de identidad.
+
El código fuente de Persona
+
El código detrás del sitio web de Persona vive en un repositorio de GitHub. Los pedidos de pull son bienvenidos!
+
+
+ +

 

diff --git "a/files/es/mozilla/persona/informaci\303\263n_general_idp/index.html" "b/files/es/mozilla/persona/informaci\303\263n_general_idp/index.html" new file mode 100644 index 0000000000..1befe0db1a --- /dev/null +++ "b/files/es/mozilla/persona/informaci\303\263n_general_idp/index.html" @@ -0,0 +1,39 @@ +--- +title: Información general del Proveedor de Identidad +slug: Mozilla/Persona/Información_general_IdP +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Identity_Provider_Overview +--- +

Un proveedor de identidad Persona (IdP) es un dominio que firma y certifica directamente la identidad de sus usuarios. Como las identidades Persona están basadas en direcciones de correo electrónico, es un paso natural para cualquier dominio que ofrezca correo electrónico convertirse en IdP.

+

Si usted tiene un nombre de dominio, puede convertirse en un IdP de Persona implementando el soporte para el protocolo BrowserID.

+

El documento de apoyo IdP

+

Los dominios anuncian su capacidad de actuar como IDPs mediante la publicación de un documento de apoyo en /.well-known/browserid. Este documento formateado con JSON contiene tres valores:

+ +

Los sitios web utilizan la clave pública para verificar la autenticidad de las aserciones de identidad de los usuarios.

+

Los navegadores utilizan los valores autenticación y aprovisionamiento para obtener la certificación de identidad de los usuarios.

+

Para obtener más información, incluyendo cómo los dominios pueden delegar en otros IdP, véase la /.well-known/browserid documentation.

+

Cómo interactúan los navegadores con los IDPs

+

Para demostrar cómo los navegadores y los IDPs interactúan, veamos qué pasa la primera vez que alice@example.com utiliza Persona para iniciar sesión en un sitio web.

+
    +
  1. El navegador de Alice obtiene el documento de soporte de https://example.com/.well-known/browserid.
    2. +
  2. El navegador de Alice carga de manera invisible la página de aprovisionamiento d'example.com, pidiéndole que firme una clave pública certificando la identidad de Alice.
    3. +
  3. Antes de firmar la clave, example.com necesita pruebas de que el usuario realmente es Alice, así que le indica al navegador que ella necesita autenticarse.
    4. +
  4. El navegador de Alice le muestra a Alice la página de autenticación de example.com y ella inicia sesión, estableciendo una nueva sesión a example.com.
    5. +
  5. El navegador de Alice vuelve a cargar la página de aprovisionamiento y de nuevo le pide que firme la clave pública que certifica la identidad de Alice.
    6. +
  6. La página de aprovisionamiento puede verificar la identidad de Alice inspeccionando la sesión recién creada. Satisfecha, firma un certificado que contiene la clave pública de Alice, su dirección de correo electrónico, y una fecha de caducidad del certificado.
    7. +
+

Durante la vigencia del certificado firmado, el navegador de Alice puede crear aserciones de identidad válidos para alice@example.com cada vez que quiere acceder a un sitio web con Persona.

+

Los pasos 3-5 pueden ser omitidos si Alice ya tiene una sesión válida con example.com, por ejemplo, si ha iniciado sesión en el correo web o un portal de intranet.

+

Cómo interactúan los sitios web con los IDPs

+

Supongamos que Alice quiere acceder a 123done.org. Su navegador genera y firma una aserción de identidad que contiene el certificado de más arriba y que presenta como prueba de su identidad.

+

Al comparar la firma de la aserción de identidad de Alice con la clave pública en el interior del certificado firmado, 123done puede estar seguro de que el certificado ha sido emitido para la misma persona que ha generado la aserción de identidad. Sin embargo, 123done aún debe comprobar que el certificado es válido examinando la firma.

+

Como el certificado ha sido emitido para alice@example.com, 123done coge el documento de soporte de https://example.com/.well-known/browserid. Extrae la clave pública y la compara con la firma del certificado de Alice. Si la clave coincide con la firma, 123done sabe que el certificado es legítimo y puede finalmente permitir que Alice inicie sesión.

+

Tenga en cuenta que 123done no "ha llamado nunca por teléfono a casa" o ha revelado de ninguna otra manera la identidad de Alice cuando ella ha iniciado sesión. Tan sólo ha necesitado pedir un simple documento a example.com que además puede ser guardado en la memoria caché.

+

Seguridad y confianza

+

El protocolo BrowserID, y por tanto Persona, se basan en técnicas estándar de criptografía de clave pública.

+

Puede consultar nuestra documentación sobre los conceptos criptográficos que hay detrás de cómo funcionan los IdP de Persona o puede leer los detalles sobre cómo están implementados los IDPs.

diff --git a/files/es/mozilla/persona/quick_setup/index.html b/files/es/mozilla/persona/quick_setup/index.html new file mode 100644 index 0000000000..c12d2000d4 --- /dev/null +++ b/files/es/mozilla/persona/quick_setup/index.html @@ -0,0 +1,170 @@ +--- +title: Configuración rápida +slug: Mozilla/Persona/Quick_Setup +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +

Agregar el sistema de identificación de Mozilla Persona a tu sitio web solo requiere seguir estos cinco pasos:

+ +
    +
  1. Incluye en tus páginas la biblioteca JavaScript de Mozilla Persona.
    2. +
  2. Agrega los botones "conectar" y "desconectar".
    3. +
  3. Presta atención a las acciones de conexión y desconexión.
    4. +
  4. Comprueba las credenciales de los usuarios.
    5. +
  5. Revisa las buenas prácticas.
    6. +
+ +

Con esto deberías poder ponerlo en funcionamiento en una sola tarde, pero lo primero es lo primero: si vas a usar Mozilla Persona en tu sitio, por favor, dedica unos minutos a suscribirte a la lista de correo de Mozilla Persona. Tiene muy poco tráfico ya que solo se usa para anunciar cambios o cuestiones relacionadas con la seguridad que pueden tener un impacto negativo sobre tu sitio.

+ +

Paso 1: Incluye la biblioteca de Persona

+ +

Persona está diseñado para no depender del navegador y funciona correctamente con la todos los naveadores de escritorio y móviles modernos. Esto es posible gracias a la biblioteca JavaScript multiplataforma de Persona. Una vez que se carga ésta biblioteca en tu página, las funciones de Persona que necesitas ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, y {{ domxref("navigator.id.logout()", "logout()") }}) estarán disponibles en el objeto global navigator.id.

+ +

Para incluir la biblioteca JavaScript de Persona, puedes colocar ésta etiqueta script en el head de tu página:

+ +
<script src="https://login.persona.org/include.js"></script>
+
+ +

Debes incluir esto en todas las páginas que usen las funciones {{ domxref("navigator.id") }}. Debido a que Persona está aún en desarrollo, no debes alojar en tu servidor el archivo include.js.

+ +

Paso 2: Añadir botones de inicio  y cierre de sesión

+ +

Debido a que Persona está diseñado como una API DOM, debes ejecutar funciones cuando un usuario haga clic en los botones de inicio y cierre de sesión en tu web. Para abrir un diálogo de Persona y pedir que el usuario inicie sesión, debes ejecutar {{ domxref("navigator.id.request()") }}. Para cerrar sesión, ejecuta {{ domxref("navigator.id.logout()") }}.

+ +

Por ejemplo:

+ +
var signinLink = document.getElementById('signin');
+if (signinLink) {
+  signinLink.onclick = function() { navigator.id.request(); };
+};
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+  signoutLink.onclick = function() { navigator.id.logout(); };
+};
+
+ +

¿Cómo deben ser esos botones? Da un vistazo a nuestra página de recursos de marca para conseguir imágenes y botones css predefinidos.

+ +

Paso 3: Vigilar las acciones de inicio y cierre de  sesión

+ +

Para que Persona funcione, necesitas indicarle qué hacer cuando un usuario inicia o cierra sesión. Este se puede realizar llamando a la función {{ domxref("navigator.id.watch()") }} y pasandole tres parámetros:

+ +
    +
  1. +

    El loggedInEmail del actual usuario de tu sitio, o null si no existe. Deberías generar esto dinámicamente cuando la página es pintada.

    +
    2. +
  2. +

    Una función a la que invocar cuando la acción onlogin es desencadenada. Esta función se pasa como un parámetro único, una "afirmación de identidad", que debe ser verificada.

    +
    3. +
  3. +

    Una función a la que invocar cuando la acción onlogout es desencadenada. En esta función no se pasa ningún parámetro.

    +
    4. +
+ +
+

Nota: Siempre tienes que incluir ambas funciones, onlogin y onlogout, cuando llames a {{ domxref("navigator.id.watch()") }}.

+
+ +

Por ejemplo, si actulamente crees que Bob ha iniciado sesión en tu sitio, puedes hacer esto:

+ +
var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+  loggedInEmail: currentUser,
+  onlogin: function(assertion) {
+    // Un usuario ha iniciado sesión!  Aquí necesitas:
+    // 1. Enviar la verificación a tu servidor para verificar y crear la sesión.
+    // 2. Actualizar la interfaz de usuario.
+    $.ajax({ /* <-- Este ejemplo utiliza Jquery, pero usar lo que más te guste */
+      type: 'POST',
+      url: '/auth/login', // Esta es la URL de tu servidor.
+      data: {assertion: assertion},
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(res, status, xhr) { alert("login failure" + res); }
+    });
+  },
+  onlogout: function() {
+    // Un usuario ha cerrado sesión. Aqui necesitas:   // Salir de la sesión redirigiendo al usuario o haciendo una llamada a tu servidor.
+    $.ajax({
+      type: 'POST',
+      url: '/auth/logout', // Esta es la URL de tu servidor.
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(res, status, xhr) { alert("logout failure" + res); }
+    });
+  }
+});
+
+ +

En este ejemplo, ambas funciones, onlogin y onlogout,  son implementeadas por una petición asíncrona POST al servidor del sitio. El servidor registra la entrada o salida del usuario usualmente ajustando o eliminando información de la cookie de sesión. Entonces, si todo ha sido verificado, la página recargará para acceder al nuevo estado de sesión de la cuenta.

+ +

Puedes usar AJAX para implementar esto sin necesidad de recargar o redirigir la página, pero eso queda fuera del alcance de este tutorial.

+ +

Tienes que llamar a esta función en cada página con un botón de inicio o cierre de sesión. Para dar soporte a mejoras de Persona, como el inicio de sesión automático y el cierre de sesión global para los usuarios, deberás llamar a esta función en cada página de tu sitio.

+ +

Paso 4: Comprueba las credenciales de los usuarios

+ +

En lugar de contraseñas, Persona utiliza "declaraciones de identidad", que son algo así como contraseñas de un solo uso y un solo sitio combinadas con la dirección de correo electrónico del usuario. Cuando un ususario desea iniciar sesión, tu función de retorno onlogin será invocada con una declaración de ese usuario. Antes de que le inicies sesión, debes verificar que la declaración es válida.

+ +

Es extremadamente importante que verifiques la declaración en tu servidor, y no en el código JavaScript ejecutándose en el navegador del usuario, debido a que podría ser fácil de falsificar. El ejemplo de arriba envió la declaración al servidor del sitio utilizando la función $.ajax() de jQuery para hacer POST en /api/login.

+ +

Una vez que tu servidor tiene la declaración, ¿cómo la verificas? La manera más fácil es utilizando un servicio de ayuda provisto por Mozilla. Simplemente envía una solicitud POST a https://verifier.login.persona.org/verify con dos parámetros:

+ +
    +
  1. assertion: La declaración de identidad provista por el usuario.
    2. +
  2. audience: El nombre y puerto de tu sitio. Debes establecer rígidamente este valor en tu código de servidor; no lo derives de ningún dato suministrado por el usuario.
    3. +
+ +

Por ejemplo, si eres example.com, puedes utilizar la línea de comandos para probar una declaración con:

+ +
$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+
+ +

Si es válida, obtendrás una respuesta JSON como la siguiente:

+ +
{
+  "status": "okay",
+  "email": "bob@eyedee.me",
+  "audience": "https://example.com:443",
+  "expires": 1308859352261,
+  "issuer": "eyedee.me"
+}
+
+ +

Puedes aprender mas acerca del servicio de verificación leyendo La API del Servicio de Verificación. Un ejemplo la implementación de /api/login, utilizando Python, el framework web Flask, y la librería Requests HTTP se vería así:

+ +
@app.route('/api/login', methods=['POST'])
+def login():
+    # The request has to have an assertion for us to verify
+    if 'assertion' not in request.form:
+        abort(400)
+
+    # Send the assertion to Mozilla's verifier service.
+    data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+    resp = requests.post('https://verifier.login.persona.org/verify', data=data)
+
+    # Did the verifier respond?
+    if resp.ok:
+        # Parse the response
+        verification_data = json.loads(resp.content)
+
+        # Check if the assertion was valid
+        if verification_data['status'] == 'okay':
+            # Log the user in by setting a secure session cookie
+            session.update({'email': verification_data['email']})
+            return resp.content
+
+    # Oops, something failed. Abort.
+    abort(500)
+
+ +

El manejo de sesiones es probablemente muy similar a tu sistema actual de login. El primer gran cambio está en la verificación de la identidad del usuario revisando una aserción en vez de revisar un password. El otro gran cambio es asegurarse que la dirección de email del usuario está disponible para usarse en el parametro loggedInEmail para {{ domxref("navigator.id.watch()") }}.

+ +

El Logout es simple: Solo necesitas remover la cookie de la sesión del usuario.

+ +

Paso 5: Revisa las mejores prácticas

+ +

Una vez que todo funciona y has logrado iniciar y cerrar sesion satisfactoriamente en tu sitio, debes de tomarte un momento para revisar las mejores prácticas para usar Persona de forma segura.

+ +

Si estás  haciendo un sitio listo para producción, tal vez quieras hacer pruebas de integración que simulan un usuario entrando y saliendo de tu sitio utilizando BrowserID. Para facilitar esta acción en Selenium, considera la librería bidpom. Los sitios mockmyid.com y personatestuser.org también son útiles.

+ +

Por último, no olvides enrolarte en la lista de correos de Noticias de Persona para que seas notificado de cualquier problema de seguridad o cambios de incopatibilidad con versiones anteriores de la API de persona. La lista es extremadamente de poco tráfico: es solo utilizada para anunciar cambios que pueden impactar en tu sitio.

diff --git a/files/es/mozilla/persona/remote_verification_api/index.html b/files/es/mozilla/persona/remote_verification_api/index.html new file mode 100644 index 0000000000..e2a00c4856 --- /dev/null +++ b/files/es/mozilla/persona/remote_verification_api/index.html @@ -0,0 +1,199 @@ +--- +title: Remote Verification API +slug: Mozilla/Persona/Remote_Verification_API +tags: + - Ochoa +translation_of: Archive/Mozilla/Persona/Remote_Verification_API +--- +

On November 30th, 2016, Mozilla shut down the persona.org services. Persona.org and related domains will soon be taken offline.

For more information, see this guide to migrating your site away from Persona:

https://wiki.mozilla.org/Identity/Persona_Shutdown_Guidelines_for_Reliers

+ +

Summary

+ +

When a user tries to log into a website, their browser generates a data structure called an assertion, which is essentially a cryptographically signed email address. The browser sends this assertion to the website, which must verify that the assertion is valid before logging the user in.

+ +

Assertions can be verified locally, or with an API hosted at https://verifier.login.persona.org/verify. This page describes how to use the API.

+ +

Method

+ +

HTTP POST request to https://verifier.login.persona.org/verify.

+ +

Parameters

+ +
+
assertion
+
The assertion supplied by the user. Available as the first parameter passed to the onlogin function in navigator.id.watch().
+
audience
+
The protocol, domain name, and port of your site. For example, "https://example.com:443".
+
+ +

Return values

+ +

The call returns a JSON structure containing a status element, which may be either "okay" or "failure". Depending on the value of status, the structure contains additional elements listed below.

+ +

"okay"

+ +

The assertion is valid.

+ +

In this case the JSON structure contains the following additional elements:

+ + + + + + + + + + + + + + + + + + + + +
"email"The address contained in the assertion, for the intended person being logged in.
"audience"The audience value contained in the assertion. Expected to be your own website URL.
"expires"The date the assertion expires, expressed as the primitive value of a Date object: that is, the number of milliseconds since midnight 01 January, 1970 UTC.
"issuer"The hostname of the identity provider that issued the assertion.
+ +

"failure"

+ +

The assertion is invalid. In this case, the JSON structure contains one additional element:

+ + + + + + + + +
"reason"A string explaining why verification failed.
+ +

Examples

+ +

node.js

+ +

This example uses a node.js server using express.js

+ +
var express = require("express"),
+    app = express.createServer(),
+    https = require("https"),
+    querystring = require("querystring");
+/* ... */
+
+// The audience must match what your browser's address bar shows,
+// including protocol, hostname, and port
+var audience = "http://localhost:8888";
+
+app.post("/authenticate", function(req, res) {
+  var vreq = https.request({
+    host: "verifier.login.persona.org",
+    path: "/verify",
+    method: "POST"
+  }, function(vres) {
+    var body = "";
+    vres.on('data', function(chunk) { body+=chunk; } )
+        .on('end', function() {
+          try {
+            var verifierResp = JSON.parse(body);
+            var valid = verifierResp && verifierResp.status === "okay";
+            var email = valid ? verifierResp.email : null;
+            req.session.email = email;
+            if (valid) {
+              console.log("assertion verified successfully for email:", email);
+              res.json(email);
+            } else {
+              console.log("failed to verify assertion:", verifierResp.reason);
+              res.send(verifierResp.reason, 403);
+            }
+          } catch(e) {
+            console.log("non-JSON response from verifier");
+            // bogus response from verifier!
+            res.send("bogus response from verifier!", 403);
+
+          }
+        });
+  });
+
+  vreq.setHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  var data = querystring.stringify({
+    assertion: req.body.assertion,
+    audience: audience
+  });
+
+  vreq.setHeader('Content-Length', data.length);
+  vreq.write(data);
+  vreq.end();
+
+  console.log("verifying assertion!");
+});
+
+
+ +

via Lloyd Hilaiel

+ +

PHP

+ +
$url = 'https://verifier.login.persona.org/verify';
+$assert = filter_input(
+    INPUT_POST,
+    'assertion',
+    FILTER_UNSAFE_RAW,
+    FILTER_FLAG_STRIP_LOW|FILTER_FLAG_STRIP_HIGH
+);
+//Use the $_POST superglobal array for PHP < 5.2 and write your own filter
+$params = 'assertion=' . urlencode($assert) . '&audience=' .
+           urlencode('http://localhost:8888');
+$ch = curl_init();
+$options = array(
+    CURLOPT_URL => $url,
+    CURLOPT_RETURNTRANSFER => TRUE,
+    CURLOPT_POST => 2,
+    //CURLOPT_SSL_VERIFYPEER => true,   //This currently blocks connection to 'https://verifier.login.persona.org/verify'
+    CURLOPT_SSL_VERIFYPEER => 0,
+
+    CURLOPT_SSL_VERIFYHOST => 2,
+    CURLOPT_POSTFIELDS => $params
+);
+curl_setopt_array($ch, $options);
+$result = curl_exec($ch);
+curl_close($ch);
+echo $result;
+ +

Via Christian Heilmann

+ +

Java

+ +
@Override
+protected void doPost(final HttpServletRequest req,
+   final HttpServletResponse resp) throws ServletException,
+   IOException {
+
+   final String audience = req.getServerName();
+   final String assertion = req.getParameter("assertion");
+   final Verifier verifier = new Verifier();
+   final BrowserIDResponse personaResponse = verifier.verify(assertion,audience);
+   final Status status = personaResponse.getStatus();
+
+   if (status == Status.OK) {
+     /* Authentication with Persona was successful */
+     String email = personaResponse.getEmail();
+     log.info("{} has sucessfully signed in", email);
+     HttpSession session = req.getSession(true);
+     session.setAttribute("email", email);
+
+   } else {
+     /* Authentication with Persona failed */
+     log.info("Sign in failed...");
+
+   }
+}
+
+ +

Via Javier

+ +

 

+ +

Note: If you send the assertion and audience parameters as a JSON-object, they must not be URL-encoded. If they are sent as regular HTTP POST parameters, as in the example above, they must be URL-encoded.

diff --git a/files/es/mozilla/persona/security_considerations/index.html b/files/es/mozilla/persona/security_considerations/index.html new file mode 100644 index 0000000000..023bd98164 --- /dev/null +++ b/files/es/mozilla/persona/security_considerations/index.html @@ -0,0 +1,59 @@ +--- +title: Consideraciones de Seguridad +slug: Mozilla/Persona/Security_Considerations +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Security_Considerations +--- +

Cuando agregas soporte para Persona en tu sitio web, ella toma tantas medidas de seguridad como puede. Sin embargo, algunas medidas de seguridad solo pueden ser manejadas por tu sitio web. Estas son listadas a continuación.

+

Prácticas Esenciales

+

Verificar la confirmación en tu servidor

+

Cuando utilizas Persona, las declaraciones de identidad son pasadas dentro de la función onlogin a través de

+

{{ domxref("navigator.id.watch()") }}

+

Siempre debes pasar la aserción a tu servidor para verificarla, y solo tu servidor debe decidir si autoriza al usuario permisos adicionales en base al resultado de la verificación:

+
// Inside navigator.id.watch({ ...
+onlogin: function(assertion) {
+  // A user wants to log in! Here you need to:
+  // 1. Send the assertion to your backend for verification and to create a session.
+  // 2. Update your UI.
+},
+
+

Si trata de verificar la aserción usando JavaScript ejecutándose en el navegador del usuario, algún usuario malicioso podría suplantar por otro usuario legítimo de su sitio inyectando código bloqueando tu código JavaScript. Esto es posible debido a que no se tiene control del navegador del usuario, donde se ejecuta el código.

+

Como mencionamos lineas arriba, siempre debe pasar la aserción a su servidor para la verificación. Incluso si está usando la API de verificación remota.

+

Especifique explícitamente el parámetro audience

+

Para verificar la aserción, debe realizar un pedido POST a https://verifier.login.persona.org/verify. El pedido incluye el parámetro llamado audience:

+
assertion=<ASSERTION>&audience=https://mysite.com:443"
+

El parámetro audience es requerido. Siempre debe especificar explícitamente audience en el código, o en la configuración del código. Específicamente:

+ +

Si dejas que el navegador del usuario te envíe el parámetro audience, esto deja la posibilidad de que un sitio web malicioso pueda reusar las declaraciones de su sitio web para autenticarse en tu sitio web.

+

Verifica los certificados SSL

+

Para verificar una aserción, debes realizar un petición POST a https://verifier.login.persona.org/verify. Debes asegurarte que tu petición HTTPS verifique el certificado enviado desde el servidor contra un certificado raíz confiable. Si no lo haces, un atacante podría presentarse como verifer.login.persona.org y realizar verificaciones falsas.

+

Revisa que la libreria que usas para hacer el pedido verifique los certificados correctamente, y que has iniciado esto con un certificado de administrador apropiado.

+

Por ejemplo, el modulo urllib2 estándar de Python 2.7 no valida certificados del servidor. En lugar de ello, recomendamos utilizar los módulos "requests" o "urllib3" en Python 2.x, o la clase estándar http.client.HTTPSConnection en Python 3.x. Para Perl, asegúrate que usas al menos la versión 6.0 de libwww-perl. Dependiendo del lenguaje, librería, y sistema operativo que estés usando, vas a necesitar utilizar algún CA (Certificate Authority) confiable o el CA simple usado por verifier.login.persona.org.

+

Implementar protección CSRF

+

En un ataque de inicio de sesión por CSRF (Cross-Site Request Forgery), el atacante utiliza CSRF para iniciar la sesión del usuario dentro del sitio web usando las credenciales del atacante.

+

Por ejemplo: un usuario visita una web maliciosa que contiene un elemento form. El atributo action del form está configurado para hacer una petición HTTP POST a http://www.google.com/login, dándole el username y password del atacante. Cuando el usuario envía el form, el pedido es enviado a Google, se inicia sesión y el servidor de Google configura una cookie en el navegador del usuario. Ahora el usuario sin saberlo ha iniciado sesión con la cuenta Google del atacante.

+

El ataque puede ser usado para reunir información sensible del usuario. Por ejemplo, Web History de Google tiene la característica de registrar todos los términos de búsqueda del usuario. Si el usuario inicia sesión dentro de la cuenta Google del atacante y el atacante tiene la característica Web History activada, el usuario le estará enviando toda su información al atacante.

+

Los ataques de inicio de sesión CSRF, y defensas potenciales contra éstos son documentados con mayor detalle en Robust Defenses for Cross-Site Request Forgery (PDF). Estos ataques no son específicos de Persona: la mayoría de mecanismos de inicio de sesión son potencialmente vulnerables a ellos.

+

Existen una variedad de técnicas, las cuales pueden ser usadas para proteger un sitio de ataques de inicio de sesión CSRF, las cuales son documentadas con mayor detalle en el estudio antes mencionado.

+

Una propuesta es crear un identificador secreto en el servidor, compartido con el navegador, y requerir al navegador que lo proporcione cuando realice un pedido de inicio de sesión. Por ejemplo:

+
    +
  1. Tan pronto como el usuario visite su sitio, antes de intentar iniciar sesión cree una sesión para él en el servidor. Almacene el ID de la sesión en una cookie del navegador.
    2. +
  2. En el servidor, genere un texto aleatorio de al menos 10 caracteres alfanuméricos. un UUID generado aleatoriamente es una buena opción. Esto es un token CSRF. Almacene esto en la sesión.
    3. +
  3. Envie el CSRF token al navegador a través de JavaScript embebido o HTML como una variable oculta del formulario.
    4. +
  4. Asegurese que el envio AJAX o la petición POST del formulario incluya el token CSRF.
    5. +
  5. En el lado del servidor, antes de aceptar la aserción, revise que el token CSRF enviado concuerde con el almacenado en la sesión.
    6. +
+

Mejoras

+

Politicas de seguridad del contenido (Content Security Policy o CSP)

+

Content Security Policy (CSP) es una capa extra de seguridad que ayuda a detectar y mitigar ciertos tipos de ataques, incluyendo Cross Site Scripting (XSS) y ataques de inyección de datos. Estos ataques son usados para todo desde robo de datos a desconfiguración del sitio o distribución de malware.

+

SI utilizas CSP en tu siitio, es posible que necesites modificar tu politica para permitir Persona. Dependiendo de tu política, puedes necesitar:

+ +

Un ejemplo de la configuración de Apache puede incluir:

+
Header set X-Content-Security-Policy: "default-src 'self'; frame-src 'self' https://login.persona.org ; script-src 'self' https://login.persona.org"
diff --git a/files/es/mozilla/persona/why_persona/index.html b/files/es/mozilla/persona/why_persona/index.html new file mode 100644 index 0000000000..48ce47f155 --- /dev/null +++ b/files/es/mozilla/persona/why_persona/index.html @@ -0,0 +1,30 @@ +--- +title: ¿Por qué Mozilla Persona? +slug: Mozilla/Persona/Why_Persona +translation_of: Archive/Mozilla/Persona/Why_Persona +--- +

El sistema de nombres de  usuarios y contraseñas que prevalece es insostenible: los usuarios están obligados a crear y recordar una nueva, y compleja contraseña para cada sitio y servicio que utilizan, y cada sitio tiene que almacenar dichas contraseñas de manera segura. Sin embargo, brechas recientes demuestran que inclusive las compañías más prominentes tienen fallos de seguridad al almacenar las contraseñas, lo cual expone la información del usuario.

+

"Persona" es un sistema de identificación abierto, distribuído, a escala web que reemplaza las contraseñas para cada sitio. Aborda las deficiencias relacionadas a la usabilidad y privacidad de sistemas tales como OpenID sin recurrir a una infraestructura centralizada como Facebook connect.

+

Persona se deshace de las contraseñas para cada sitio

+

En lugar de contraseñas para cada sitio, Persona permite que los usuarios se autentiquen en los diferentes sitios con tan sólo dos clics después de completar un proceso sencillo, que se realiza una sola vez para cada una de sus identidades. Esto es seguro, y está respaldado por un sistema de cifrado de clave pública. En lugar de una contraseña, el navegador web del usuario genera una confirmación de identidad cifrada que expira después de unos pocos minutos y es únicamente válido para un solo sitio. Debido a que no existen contraseñas específicas por sitio, los sitios web que utilizan Persona no tienen que preocuparse sobre el almacenamiento seguro o de pérdidas de las contraseñas en su base de datos.

+

Este proceso de registro rápido también reduce la desavenencia a los usuarios cada vez que visiten sitios nuevos.

+

Las identidades Persona son los correos electrónicos

+

Lejos de utilizar nombres de usuario de manera libre, Persona utiliza los correos electrónicos como identidades. Esto ofrece muchos beneficios tanto para los usuarios como para los desarrolladores:

+

El usuario se beneficia al utilizar direcciones de correo electrónico

+ +

Los desarrolladores se benefician al utilizar direcciones de correo electrónico

+ +

Sin mencionar que los correos electrónicos ya son sistemas distribuídos con billones de cuentas a través de diferentes proveedores.

+

¿Qué diferencia a Persona de otros proveedores de acceso sencillo?

+

"Persona" es seguro, y fácil. Protege la privacidad del usuario, control del usuario, y elección del usuario de formas que los otros proveedores no hacen o no pueden:

+

Muchas redes sociales tales como Facebook y Google+ obligan a que los usuarios utilicen sus nombres verdaderos, y limitan a los usuarios a una sola cuenta. Al estar construida encima de direcciones de correo electrónico, Persona permite que los usuarios mantengas sus identidades separadas, ya sea de trabajo, hogar, escuela u otras.

+

"Persona" es abierta y distribuída: cualquiera con un correo electrónico puede registrarse en sitios que utilicen Persona. Y no es sólo eso, cualquiera puede alojar su propio proveedor de identidad o delegar a otras autoridades, al igual que con el correo electrónico. Esto difiere a los servicios de acceso que ofrecen los sitios sociales, los cuales requieren una cuenta en un servicio único y centralizado.

+

"Persona" también toma un alcance novedoso para proteger la privacidad del usuario al colocar el navegador web del usuario en medio del proceso de autenticación: el navegador obtiene las credenciales del proveedor de correo electrónico que utiliza el usuario, y luego presenta esas credenciales al sitio web. El proveedor de correo electrónico no puede rastrear al usuario, pero los sitios web pueden seguir confiando en la identidad del usuario al verificar dichas credenciales de manera cifrada. La mayoría de otros sistemas, inclusive aquellas que son distribuídas como el OpenID, requiere que los sitios "llamen a casa" antes de permitir que un usuario ingrese.

diff --git a/files/es/mozilla/preferences/index.html b/files/es/mozilla/preferences/index.html new file mode 100644 index 0000000000..1169ecabf1 --- /dev/null +++ b/files/es/mozilla/preferences/index.html @@ -0,0 +1,48 @@ +--- +title: Preferences +slug: Mozilla/Preferences +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Preferences +--- +

The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.

+ + + + + + + +
+

Documentation

+
+
Preferences system
+
An introduction to using the preference system in Mozilla.
+
XUL School: Handling preferences
+
The XUL School tutorial chapter on preferences.
+
Mozilla preference reference
+
A reference guide to all Mozilla preferences; currently a work in progress.
+
A brief guide to Mozilla preferences
+
An introductory guide to where preferences are stored and other useful information about the core preference system.
+
Using preferences from application code {{gecko_minversion_inline("6.0")}}
+
Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.
+
Mozilla networking preferences
+
A guide to key networking-related preferences.
+
Mozilla preferences for uber-geeks
+
A guide to preferences that only truly elite geeks should play with.
+
+

View all pages tagged with "Preferences"...

+ 		+

Examples

+
+
Code snippets
+
Preference-related code snippets.
+
Adding preferences to an extension
+
How to add preferences to an existing extension.
+
+ + +
diff --git a/files/es/mozilla/projects/index.html b/files/es/mozilla/projects/index.html new file mode 100644 index 0000000000..6291137b31 --- /dev/null +++ b/files/es/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +

{{ draft() }}

+

This page needs to become a pretty index to Mozilla projects whose documentation is located under it.

+

{{ LandingPageListSubpages() }}

diff --git a/files/es/mozilla/projects/nspr/reference/index.html b/files/es/mozilla/projects/nspr/reference/index.html new file mode 100644 index 0000000000..d53b3eed23 --- /dev/null +++ b/files/es/mozilla/projects/nspr/reference/index.html @@ -0,0 +1,770 @@ +--- +title: NSPR API Reference +slug: Mozilla/Projects/NSPR/Reference +tags: + - NSPR + - NSPR_API_Reference + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Projects/NSPR/Reference +--- + + +

Introduction to NSPR

+ + + +

NSPR Types

+ + + +

Threads

+ + + +

Process Initialization

+ + + +

Locks

+ + + +

Condition Variables

+ + + +

Monitors

+ + + +

Cached Monitors

+ + + +

I/O Types

+ + + +

I/O Functions

+ + + +

Network Addresses

+ + + +

Atomic Operations

+ + + +

Interval Timing

+ + + +

Date and Time

+ + + +

Memory Management Operations

+ + + +

String Operations

+ + + +

Floating Point Number to String Conversion

+ + + +

Long Long (64-bit) Integers

+ +

BitMaps

+ +

Formatted Printing

+ +

Linked Lists

+ + + +

Dynamic Library Linking

+ + + +

Process Management and Interprocess Communication

+ + + +

Multiwait Receive

+ +

System Information and Environment Variables

+ +

Logging

+ + + +

Instrumentation Counters

+ +

Named Shared Memory

+ + + +

Anonymous Shared Memory

+ + + +

IPC Semaphores

+ + + +

Thread Pools

+ + + +

Random Number Generator

+ + + +

Hash Tables

+ + + +

NSPR Error Handling

+ + diff --git a/files/es/mozilla/projects/psm/index.html b/files/es/mozilla/projects/psm/index.html new file mode 100644 index 0000000000..5251e19a4b --- /dev/null +++ b/files/es/mozilla/projects/psm/index.html @@ -0,0 +1,11 @@ +--- +title: Administrador de seguridad personal +slug: Mozilla/Projects/PSM +translation_of: Mozilla/Projects/PSM +--- +

Administrador de seguridad personal consiste de un conjunto de librerías que realizan operaciones de criptografía en nombre de una aplicación instalada. Estas operaciones incluyen la creación de una conexión SSL, objeto de firmas y verificación de firmas, la administración de certificados (incluye la emisión y revocación), y otras funciones de PKI.

+

Notas:

+ diff --git a/files/es/mozilla/rendimiento/index.html b/files/es/mozilla/rendimiento/index.html new file mode 100644 index 0000000000..33c54bd649 --- /dev/null +++ b/files/es/mozilla/rendimiento/index.html @@ -0,0 +1,135 @@ +--- +title: Rendimiento +slug: Mozilla/Rendimiento +translation_of: Mozilla/Performance +--- +

Los artículos vinculados desde aquí te ayudarán a mejorar el rendimiento, ya sea que estés desarrollando un código de Mozilla central o un complemento.

+ + + + + + + + +
+

Documentation

+ +
+
Reportar un Problema de rendimiento
+
Una guía fácil de usar para reportar un problema de rendimiento. No se requiere un entorno de desarrollo.
+
Benchmarking
+
Consejos para generar métricas de rendimiento válidas.
+
Mejores prácticas de rendimiento en extensiones
+
Una guía de rendimiento de "mejores prácticas" para desarrolladores de extensiones.
+
Measuring Add-on Startup Performance
+
A guide for add-on developers on how to set up a performance testing environment.
+
XUL School: Add-on Performance
+
Tips for add-on developers to help them avoid impairing application performance.
+
GPU performance
+
Tips for profiling and improving performance when using a GPU.
+
Scroll-Linked Effects
+
Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
+
Automated Performance Testing and Sheriffing
+
Information on automated performance testing and sheriffing at Mozilla.
+
+ +

View all pages tagged with "Performance"...

+ +

Memory profiling and leak detection tools

+ +
+
The Developer Tools "Memory" panel
+
The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.
+
+ +
+
about:memory
+
about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC & CC logs, and dump DMD reports. about:memory is built on top of Firefox's memory reporting infrastructure.
+
DMD
+
DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.
+
Are We Slim Yet
+
areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.
+
BloatView
+
BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.
+
Refcount tracing and balancing
+
Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.
+
GC and CC logs
+
GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.
+
Valgrind
+
Valgrind is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as part of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.
+
LeakSanitizer
+
LeakSanitizer (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.
+
Apple tools
+
Apple provides some tools for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944).
+
Leak Gauge
+
Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.
+
LogAlloc
+
LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.
+
Memory Profiler
+
The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.
+
+ +

See also the documentation on Leak-hunting strategies and tips.

+ 		+

Profiling and performance tools

+ +
+
Profiling with the Developer Tools Profiler
+
The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.
+
+ +
+
Profiling with the Gecko Profiler {{ gecko_minversion_inline("16.0") }}
+
The Gecko Profiler is a good tool to start with, particularly for understanding where time is spent within C++ code in Firefox.
+
Profiling with Instruments
+
How to use Apple's Instruments tool to profile Mozilla code.
+
Profiling with Xperf
+
How to use Microsoft's Xperf tool to profile Mozilla code.
+
Profiling with Concurrency Visualizer
+
How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.
+
Profiling with Zoom
+
Zoom is a profiler for Linux done by the people who made Shark
+
Measuring performance using the PerfMeasurement.jsm code module {{ gecko_minversion_inline("2.0") }}
+
Using PerfMeasurement.jsm to measure performance data in your JavaScript code.
+
Adding a new Telemetry probe
+
Information on how to add a new measurement to the Telemetry performance-reporting system
+
Profiling JavaScript with Shark (obsolete - replaced by Instruments)
+
How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.
+
Profiling with Shark (obsolete - replaced by Instruments)
+
How to use Apple's Shark tool to profile Mozilla code.
+
Investigating CSS Performance
+
How to figure out why restyle is taking so long
+
+ +

Power profiling

+ +
+
Power profiling overview
+
This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.
+
tools/power/rapl (Mac, Linux)
+
tools/power/rapl is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.
+
powermetrics (Mac-only)
+
powermetrics is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.
+
TimerFirings logging (All platforms)
+
TimerFirings logging is a built-in logging mechanism that prints data on every time fired.
+
Activity Monitor, Battery Status Menu and top (Mac-only)
+
The battery status menu, Activity Monitor and top are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.
+
Intel Power Gadget (Windows, Mac, Linux)
+
Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.
+
perf (Linux-only)
+
perf is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.
+
turbostat (Linux-only)
+
turbostat is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.
+
powertop (Linux-only)
+
powertop is an interactive command-line utility that gathers and displays various power-related measurements.
+
+ + + +
+
JavaScript, XPCOM, Developing Mozilla, Extensions, Addons
+
+
+ +

 

diff --git a/files/es/mozilla/rust/index.html b/files/es/mozilla/rust/index.html new file mode 100644 index 0000000000..3454ab434b --- /dev/null +++ b/files/es/mozilla/rust/index.html @@ -0,0 +1,45 @@ +--- +title: The Rust programming language +slug: Mozilla/Rust +tags: + - Desarrollo web + - lenguajes + - paralelización + - systemas +translation_of: Mozilla/Rust +--- +

Rust logoRust es un nuevo lenguaje de programación de código libre, creado por Mozilla y una comunidad de voluntarios, diseñado para ayudar a los desarrolladores a crear rápidamente aplicaciones seguras que puedan tener todas las ventajas de los modernos procesadores de varios núcleos. Evita los accesos de memoria incorrectos, garantiza hilos de procesamiento seguros y además tiene una sintaxis fácil de aprender.

+ +

Además Rust ofrece abstracciones a coste cero, semántica de movimientos, y garantiza memoria segura,  hilos sin condiciones de carreras, genéricos basados en propiedades, identificación de patrones, deducciones de tipos, y uniones eficientes a C, con unos tamaños en ejecución mínimos. 

+ +

Para aprender más de Rust, puede:

+ + + +

Rust and the future of systems programming

+ +

{{EmbedYouTube("8EPsnf_ZYU0")}}

+ +

Unlocking the power of parallelism with Rust

+ +

{{EmbedYouTube("cNeIOt8ZdAY")}}

+ +

Rust for web developers

+ +

{{EmbedYouTube("FfoXFnzZbBM")}}

+ +

Safe systems programming with Rust

+ +

{{EmbedYouTube("P3sfNGtpuxc")}}

+ +

Growing the Rust community

+ +

{{EmbedYouTube("duv0tuPAnO0")}}

+ +

Putting Rust into production at Mozilla

+ +

{{EmbedYouTube("2RhbYpgVpg0")}}

diff --git a/files/es/mozilla/security/index.html b/files/es/mozilla/security/index.html new file mode 100644 index 0000000000..bf7933d35b --- /dev/null +++ b/files/es/mozilla/security/index.html @@ -0,0 +1,33 @@ +--- +title: Browser security +slug: Mozilla/Security +tags: + - Developing Mozilla + - Firefox + - Landing + - Mozilla + - NeedsTranslation + - Security + - TopicStub +translation_of: Mozilla/Security +--- +

An important aspect of developing code for any browser, including Firefox, as well as any Web-oriented project, is its security. These articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines.

+ +

{{LandingPageListSubpages}}

+ + diff --git a/files/es/mozilla/security/x509_certificates/index.html b/files/es/mozilla/security/x509_certificates/index.html new file mode 100644 index 0000000000..cdad565f6d --- /dev/null +++ b/files/es/mozilla/security/x509_certificates/index.html @@ -0,0 +1,386 @@ +--- +title: A Web PKI x509 certificate primer +slug: Mozilla/Security/x509_Certificates +translation_of: Mozilla/Security/x509_Certificates +--- +

X.509 (in this document referred as x509) is an ITU standard to describe certificates. This article provides an overview of what these are and how they work.

+ +

Three versions of the x509 standard have been defined for web-pki. In this document we will be referring to the current standard in use for web pki: x509 v3, which is described in detail in {{rfc(5280)}}. In general, x509 certificates bind a signature to a validity period, a public key, a subject, an issuer, and a set of extensions. The extensions define extra properties of the certificate such as extra attributes of the certificate or constraints on the use of the certificate. In order for a certificate to be valid these three requirements must be met:

+ +
    +
  1. There is a verification path from the site certificate to a trusted certificate of the user agent (ie if you follow the issuer path you will end on a self-signed certificate that is considered trusted by the browser).
    2. +
  2. The attributes of the certificates in the verification path have valid parameters for that verification (for example the validity period of all the certificates are valid for the time the verification is being done)
    3. +
  3. Revocation checks are considered OK for that particular validation.
    4. +
+ +

One issue that is not commonly known is that the x509 trust graph is not a forest (a bunch of trees where each root is a trusted root) but a cyclic graph, where the same key/issuer can be a root or an intermediate for another root in the browsers key store (when roots create intermediates for each other it is called cross-signing).

+ +

Extensions

+ +

While {{rfc(5280)}} defines 16 extensions for webpki in this document we will be describing the six extensions we considered critical for understanding. Certificates can have other extensions not described on {{rfc(5280)}}, but that is out of the scope of this document. Extensions can be marked as critical or non-critical, conforming certificate verification libraries should stop processing verification when encountering a critical extension that they do not understand ( and should continue processing if the extension is marked as non-critical) mozila::pkix has this behavior.

+ +

Subject alternate name

+ +

This extension defines what other names (such as DNS names) are valid for this certificate. This allows for a certificate to be used for more than one FQDN, for example you can have a certificate that is valid for both a.example.com and b.example.com

+ +

Basic constraints

+ +

This allows certificates to be asserted as issuing certificates (it is mandatory for CA certificates). It can also be used to express the maximum depth of the trust path from the CA.

+ +

Key usage

+ +

This extension is used to constrain the purpose for the key in the certificate. More than one key usage can be asserted. Examples of key usages are: digitalSignature, keyEncipherment, dataEncipherment, keyCertSign, and cRLSign. For CA certificates the keyCertSign bit must be set.

+ +

Extended key usages

+ +

This is another bitfield to constrain the usages of the key of the certificate. Its is directed mostly at what type of application the certificate was issued for. Examples of extended key usages are: serverAuth, clientAuth, and OCSPSigning. For end-entity certificates for PKI this extension is required to exist with the serverAuth bit asserted.

+ +

Name constraints

+ +

This is an extension exclusive for CA and indicates limits on the name space for its children. This is one of the most powerful extensions for businesses to have to help limit risk imposed by losing the private key of the CA.

+ +

Authority information access

+ +

This extension is primarily used to to describe the OCSP location for revocation checking. It is mandatory for certificates that chain up to a root in the Mozilla CA program.

+ +

Self-signed certificates

+ +

These are the steps to generate a certificate for www.example.com. Replace this value with the actual server name in the steps below.
+ 1. Generate the key using the following command:

+ + + +
+
+ +

2. Generate CSR using this command:

+ + + +
+
+ +

3. Write extensions file by creating a new file with name openssl.ss.cnf with the following contents:

+ + + +
+
+ +

4. Self-sign csr (using SHA256) and append the extensions described in the file

+ + + +
+
+ +

You can now use example.pem as your certfile

+ +

CAs included in Firefox

+ +

When you visit a secure website, Firefox will validate the website’s certificate by checking that the certificate that signed it is valid, and checking that the certificate that signed the parent certificate is valid and so forth up to a root certificate that is known to be valid. This chain of certificates is called the Certificate Hierarchy.

+ +

If your certificates will only be used to verify one domain (e.g. *.yourcompany.com) but you want others outside of your organization to be able to browse to your website using https without having to manually import a root certificate, then you can get an SSL certificate from one of the CAs who already have a root certificate included in the major browsers.

+ +

Firefox uses a default set of X.509v3 root certificates for various Certification Authorities (CAs). The root certificates included by default have their "trust bits" set to indicate if the CA's root certificates may be used to verify certificates for SSL servers, S/MIME email users, and/or digitally-signed code objects without having to ask users for further permission or information.

+ +

CAs apply to have their root certificates included by default in Mozilla products by following the Mozilla CA Certificate Policy and applying for inclusion as per CA:How_to_apply. Users may override the default root certificate settings using the Certificate Manager.

+ +

Some organizations make use of the set of CAs included in Mozilla's products. If you wish to do this, you should read the relevant part of the Mozilla CA FAQ before doing so.

+ +

Running your Own CA

+ +

If you are going to have your own CA, we recommend building 3 certificates: a long term root cert, a medium term intermediate cert, and a short term end-entity cert. This type of hierarchy allows for a relatively simple long term root to be distributed to clients, and some flexibility on the intermediate cert so that you can change parameters based on best practices and security research.

+ +

Generate your CA Root

+ +

Update *.example.com and *.example.net below to match your domains.

+ +

Assumptions:

+ + + +

Steps to generate your CA root certificate:

+ +
    +
  1. Generate key +
      +
    • "openssl genpkey -algorithm RSA -out rootkey.pem -pkeyopt rsa_keygen_bits:4096"
      • +
    • 4096 is considered secure for the next 15 years.
      • +
    +
    2. +
  2. Generate csr +
      +
    • "openssl req -new -key rootkey.pem -days 5480 -extensions v3_ca -batch -out root.csr -utf8 -subj '/C=US/O=Orgname/OU=SomeInternalName'
      • +
    • Make a new Certificate Signing Request (CSR) that will be valid for 15 years.
      • +
    +
    3. +
  3. Write extensions File (openssl.root.cnf) +
      +
    • basicConstraints = critical, CA:TRUE
      • +
    • keyUsage = keyCertSign, cRLSign
      • +
    • subjectKeyIdentifier = hash
      • +
    • nameConstraints = permitted;DNS:example.com,permitted;DNS:example.net
      • +
    +
    4. +
  4. Self-sign csr (using SHA256) and append the extensions described in the file +
      +
    • "openssl x509 -req -sha256 -days 3650 -in root.csr -signkey rootkey.pem -set_serial $ANY_SMALL_INTEGER -extfile openssl.root.cnf -out root.pem"
      • +
    +
    5. +
+ +

Now you have CA pem file with its associated key.

+ +

Generate your Intermediate cert

+ +

The following steps create an intermediate cert that is valid for 8 years.

+ +
    +
  1. Generate key +
      +
    • "openssl genpkey -algorithm RSA -out r=intkey.pem -pkeyopt rsa_keygen_bits: 3072"
      • +
    • A 3072 bit key is considered secure for the next 8 years.
      • +
    +
    2. +
  2. Generate csr +
      +
    • "openssl req -new -key intkey.pem -days 2922 -extensions v3_ca -batch -out int.csr - utf8 -subj '/C=US/O=Orgname/OU=SomeInternalName2'
      • +
    • Make a new Certificate Signing Request (CSR) that will be valid for 8 years.
      • +
    +
    3. +
  3. Write extensions File (openssl.int.cnf) +
      +
    • basicConstraints = critical, CA:TRUE
      • +
    • authorityKeyIdentifier = keyid, issuer
      • +
    • subjectKeyIdentifier = hash
      • +
    • keyUsage = keyCertSign, cRLSign
      • +
    • extendedKeyUsage =serverAuth
      • +
    • authorityInfoAccess = OCSP;URI:http://ocsp.example.com:8888/
      • +
    +
    4. +
  4. Sign the intermediate csr with the root key and the intermediate extensions +
      +
    • "openssl x509 -req -sha256 -days 2922 -in int.csr -CAkey rootkey.pem -CA root.pem -set_serial $SOME_LARGE_INTEGER -out int.pem -extfile openssl.int.cnf"
      • +
    +
    5. +
+ +

Generate the end entity certificate

+ +

Update www.example.com below to match your domain.

+ +
    +
  1. Generate key +
      +
    • "openssl genpkey -algorithm RSA -out eekey.pem -pkeyopt rsa_keygen_bits: 2048"
      • +
    • 2048 is considered secure for the next 4 years.
      • +
    +
    2. +
  2. Generate csr +
      +
    • "openssl req -new -key key.pem -days 1096 -extensions v3_ca -batch -out example.csr - utf8 -subj '/CN=www.example.com'
      • +
    • Make a new Certificate Signing Request (CSR) that will be valid for 3 years.
      • +
    +
    3. +
  3. Write extensions file (make a new file with name openssl.ss.cnf with the following contents) +
      +
    • basicConstraints = CA:FALSE
      • +
    • subjectAltName =DNS:www.example.com
      • +
    • extendedKeyUsage =serverAuth
      • +
    • authorityInfoAccess = OCSP;URI:http://ocsp.example.com:80/
      • +
    +
    4. +
  4. Intermediate sings the csr (using SHA256) and appends the extensions described in the file +
      +
    • "openssl x509 -req -sha256 -days 1096 -in example.csr -CAkey intkey.pem -CA int.pem -set_serial $SOME_LARGE_INTEGER -out www.example.com.pem -extfile openssl.int.cnf"
      • +
    +
    5. +
+ +

Security Notes

+ +

There are several organizations that provide recommendations regarding the security parameters for key/hash sizes given current computational power. For the end date of the root cert created following the instructions in this page (year 2017). These are the recomendations of bit sizes (from http://www.keylength.com/):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AsymmetricECC(Key)Hash
Linestra(2004)1902172172
Ecrypt 20122432224224
NIST 20122048224224
ANSSI 20104096200256
RFC 37662358200---
BSI1976256256
+ +

In other words, SHA1 is now deprecated for new uses. We should use at least 3072 key sizes and at least a 256 ECC curve. Thus the recommendation here is for the root to be 4096 if using RSA and p384 for the root key. (p384 also chosen for compatibility as most SSL/TLS implementations support this part of suite B).

+ +

Error Codes in Firefox

+ +

Here are some common errors that might be encountered when working with certificates in Firefox.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Error CodeWhat It MeansWhat Can I Do
SEC_ERROR_BAD_DERA certificate is not properly encoded according to ASN.1 (DER) encodingRe-generate the improperly-encoded certificate
SEC_ERROR_CA_CERT_INVALIDAn end-entity certificate is being used to issue another certificateEnsure that any certificate intended to issue certificates has a basic constraints extension with cA: TRUE
SEC_ERROR_BAD_SIGNATUREA signature on a certificate is improperly formatted or the certificate has been tampered withRe-issue the certificate with the bad signature
SEC_ERROR_CERT_BAD_ACCESS_LOCATIONThe OCSP URI in the authorityInformationAccess extension is improperly formedRe-generate the certificate with a well-formed OCSP URI
SEC_ERROR_CERT_NOT_IN_NAME_SPACEA certificate has a common name or subject alternative name that is not in the namespace of an issuing certificateRe-issue the certificate with names that are within the namespace of all certificates in the chain
SEC_ERROR_CERT_SIGNATURE_ALGORITHM_DISABLEDA certificate has been signed with an obsolete algorithmRe-sign the certificate using a modern algorithm
SEC_ERROR_EXPIRED_CERTIFICATEA certificate is too old to be usedRe-generate the certificate
SEC_ERROR_EXTENSION_VALUE_INVALIDA certificate has an extension with an empty valueRe-generate the certificate without the extension, or re-generate it with a non-empty value
SEC_ERROR_INADEQUATE_CERT_TYPEA certificate has an extended key usage extension that does not assert a required usage, or an end-entity certificate asserts the id-kp-OCSPSigning usage when it shouldn'tRe-generate the certificate with the appropriate extended key usage values
SEC_ERROR_INADEQUATE_KEY_USAGEA certificate has a key usage extension that does not assert a required usageRe-generate the certificate with the appropriate key usage values
SEC_ERROR_INVALID_ALGORITHMA certificate has been signed with an unknown algorithmRe-sign the certificate with a standardized certificate signing algorithm
SEC_ERROR_INVALID_TIMEA time field in a certificate has an invalid valueRe-generate the certificate with valid encodings for time fields
MOZILLA_PKIX_ERROR_KEY_PINNING_FAILURE
SEC_ERROR_PATH_LEN_CONSTRAINT_INVALID
SEC_ERROR_UNKNOWN_CRITICAL_EXTENSIONA certificate contains an extension marked as critical that is not handled by mozilla::pkixRe-generate the certificate without the extension or with it not marked as critical
SEC_ERROR_UNKNOWN_ISSUEREither a missing intermediate or root certificate is necessary to verify the certificateImport the root certificate into Firefox or have the server send the intermediate
SEC_ERROR_INVALID_KEY
SEC_ERROR_UNSUPPORTED_KEYALG
SEC_ERROR_EXPIRED_ISSUER_CERTIFICATEAn issuer certificate is too oldRe-issue the issuer certificate
MOZILLA_PKIX_ERROR_CA_CERT_USED_AS_END_ENTITYA certificate with a basic constraints extension with cA:TRUE is being used as an end-entity certificateRe-generate the end-entity certificate without the basic constraints extension
MOZILLA_PKIX_ERROR_INADEQUATE_KEY_SIZEA certificate has a key that is too small to be secureRe-generate a larger key and issue a certificate using that key
diff --git a/files/es/mozilla/tech/index.html b/files/es/mozilla/tech/index.html new file mode 100644 index 0000000000..f9682e62e1 --- /dev/null +++ b/files/es/mozilla/tech/index.html @@ -0,0 +1,14 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XUL +translation_of: Mozilla/Tech +--- +

Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).

+

{{LandingPageListSubpages}}

diff --git a/files/es/mozilla/tech/toolkit_api/smile/index.html b/files/es/mozilla/tech/toolkit_api/smile/index.html new file mode 100644 index 0000000000..20b37a8659 --- /dev/null +++ b/files/es/mozilla/tech/toolkit_api/smile/index.html @@ -0,0 +1,58 @@ +--- +title: SMILE +slug: Mozilla/Tech/Toolkit_API/SMILE +tags: + - Interfaces + - NeedsTranslation + - SMILE + - SeaMonkey + - TopicStub + - XPCOM + - XPCOM API Reference +translation_of: Mozilla/Tech/Toolkit_API/SMILE +--- +

 

+ +
+

This article covers features introduced in SeaMonkey 2

+
+ +

 

+ +

SMILE is a JavaScript library designed to help developers build extensions using terminology and interfaces that are familiar to them.

+ +

SMILE is about making it easier for extension developers to be productive, by minimizing some of the XPCOM formality and adding some "modern" JavaScript ideas. We want to start with areas that will provide the most benefit.

+ +

SMILE has a smileIApplication interface that implements all the functions of extIApplication. The library has also been implemented in Firefox ("FUEL") and in Thunderbird ("STEEL").

+ +

Objects

+ +

extIApplication Objects

+ + + +

smileIApplication Objects

+ + + +

XPCOM

+ +

Although the extIApplication object is preloaded into XUL scripts, it is not preloaded into JavaScript XPCOM code. The object needs to be accessed like any other XPCOM service:

+ +
var Application = Components.classes["@mozilla.org/smile/application;1"].getService(Components.interfaces.smileIApplication);
+
diff --git a/files/es/mozilla/tech/xpcom/guide/index.html b/files/es/mozilla/tech/xpcom/guide/index.html new file mode 100644 index 0000000000..7afb1c9cd1 --- /dev/null +++ b/files/es/mozilla/tech/xpcom/guide/index.html @@ -0,0 +1,16 @@ +--- +title: XPCOM guide +slug: Mozilla/Tech/XPCOM/Guide +tags: + - Landing + - Mozilla + - NeedsTranslation + - TopicStub + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Guide +--- +

These articles provide tutorials and usage documentation for XPCOM, including how to use it in your own projects and how to build XPCOM components for your Firefox add-ons and the like.

+

+
Cómo crear un componente XPCOM en JavaScript
+
Creación de Componentes XPCOM
+

diff --git a/files/es/mozilla/tech/xpcom/language_bindings/index.html b/files/es/mozilla/tech/xpcom/language_bindings/index.html new file mode 100644 index 0000000000..727c397d50 --- /dev/null +++ b/files/es/mozilla/tech/xpcom/language_bindings/index.html @@ -0,0 +1,25 @@ +--- +title: Language bindings +slug: Mozilla/Tech/XPCOM/Language_Bindings +tags: + - Embedding + - Landing + - Mozilla + - NeedsTranslation + - TopicStub + - XPCOM + - 'XPCOM:Language Bindings' +translation_of: Mozilla/Tech/XPCOM/Language_Bindings +--- +

An XPCOM Language Binding is a bridge between a particular language and XPCOM to provide access to XPCOM objects from that language, and to let modules written in that language be used as XPCOM objects by all other languages for which there are XPCOM bindings.

+

More specifically, an XPCOM language binding:

+ +

Since the XPCOM layer itself is written in C/C++, its API can be accessed out-of-the-box using C or C++. In order to allow any other language to use the XPCOM API, a bridging layer is required.

+

The following bridging layers are currently available:

+

+
+
Components.utils.import
Este método fue introducido en Firefox 3 y es usado para compartir código entre diferentes alcances(scopes) de forma sencilla. Por ejemplo, puedes importar XPCOMUtils.jsm para evitar copiar y pegar grandes porciones comunes de código de registración de componentes XPCOM en tus archivos de compomentes.
+

diff --git a/files/es/mozilla/tech/xpcom/reference/index.html b/files/es/mozilla/tech/xpcom/reference/index.html new file mode 100644 index 0000000000..9fcb623f1b --- /dev/null +++ b/files/es/mozilla/tech/xpcom/reference/index.html @@ -0,0 +1,30 @@ +--- +title: XPCOM reference +slug: Mozilla/Tech/XPCOM/Reference +tags: + - Add-ons + - Extensions + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Reference +--- +

This reference describes the interfaces and functions provided by the XPCOM library. In addition, it details the various helper classes and functions, as well as the components, provided by the XPCOM glue library. The contents herein are oriented primarily toward extension developers and people embedding XPCOM in other projects.

+ +
+

WebExtensions are becoming the new standard for creating add-ons. Eventually support for XPCOM add-ons will be deprecated, so you should begin to investigate porting your add-ons to use the WebExtensions API, and report any missing functionality so we can be sure to address your concerns. Work is ongoing on WebExtension capabilities, so your input will help prioritize and plan the work. To learn more about the kinds of changes that will be needed, see Comparison with XUL/XPCOM extensions. In addition, any binaries you use will then need to be converted for use with the WebExtensions native messaging API, or compiled using WebAssembly or Emscripten.

+
+ +
+

If you're working on a module in the Mozilla codebase that's compiled with the MOZILLA_INTERNAL_API flag set, some of these APIs -- the string functions and classes in particular -- are not the ones you should be using. See the XPCOM internal string guide for documentation of the internal string API used within the Mozilla codebase.

+
+ +

+
+
XPCOM Interface Reference
This is a reference to the XPCOM interfaces provided by the Mozilla platform.
+

+ +

Many XPCOM pages return an nsresult. Prior to Gecko 19 (Firefox 19 / Thunderbird 19 / SeaMonkey 2.16), this was an integer that simply returned an error code. It is now a strongly typed enum when XPCOM is built using a C++11 compiler. This causes compile-time errors to occur when improper values are returned as nsresult values, thereby making it easier to catch many bugs.

diff --git a/files/es/mozilla/tech/xpidl/index.html b/files/es/mozilla/tech/xpidl/index.html new file mode 100644 index 0000000000..c091484d6f --- /dev/null +++ b/files/es/mozilla/tech/xpidl/index.html @@ -0,0 +1,26 @@ +--- +title: XPIDL +slug: Mozilla/Tech/XPIDL +tags: + - Todas_las_Categorías + - XPCOM + - xpidl +translation_of: Mozilla/Tech/XPIDL +--- +

+

XPIDL es un lenguaje de descripción de interface usado para especificar clases en la interface XPCOM. +

Los lenguajes de descripción de interface (IDL, por Interface Description Languages) son usados para describir interfaces independientemente del lenguaje y de la máquina. Los IDLs permiten definir interfaces que pueden luego ser procesadas por herramientas para autogenerar especificaciones de interface dependientes del lenguaje. +

Una de estas herramientas es xpidl, que es usada para generar archivos de encabezado para C++ (.h), información 'typelib', y mucho más. +

+

Escribiendo archivos de interfaz XPIDL

+

XPIDL se asemeja bastante a OMG IDL, con sintaxis extendida para manejar IIDs y tipos adicionales. Hay algunos ejemplos en la xpcom/base y en los directorios xpcom/ds del árbol Mozilla. +

+ +

Recursos

+ +{{ languages( { "fr": "fr/XPIDL", "ja": "ja/XPIDL", "en": "en/XPIDL" } ) }} diff --git "a/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_\303\251stas/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_\303\251stas/index.html" new file mode 100644 index 0000000000..efb5adcff9 --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_de_herramientas_y_botones_para_\303\251stas/index.html" @@ -0,0 +1,291 @@ +--- +title: Agregar barras de herramientas y botones para éstas +slug: >- + Mozilla/Tech/XUL/Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_Toolbars_and_Toolbar_Buttons +--- +

{{AddonSidebar}}

+ +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}

+ +

{{ PreviousNext("Escuela_XUL/Agregar_menus_y_submenus", "Escuela_XUL/Agregar_eventos_y_comandos") }}

+ +

Adding a new toolbar

+ +

Adding new toolbars to Firefox is easy, but adding them the wrong way is very easy as well.

+ +

Toolbars in Firefox are very customizable. Some users don't like extra toolbars, or they want to rearrange toolbar buttons to their liking, possibly merging multiple toolbars in the process. Firefox allows all of this by default, and if you don't pay attention to the details we describe here, your toolbar may not be as easy to customize as the rest.

+ +

The first thing you need to do is add your buttons to the toolbar palette. The toolbarpalette is a collection of all toolbar buttons and toolbar items in Firefox, including those added by extensions. To add your buttons, all you need to do is overlay the palette in your main browser overlay.

+ +
<overlay id="xulschoolhello-browser-overlay"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <toolbarpalette id="BrowserToolbarPalette">
+    <toolbarbutton id="xulschoolhello-hello-world-button"
+      class="toolbarbutton-1 chromeclass-toolbar-additional"
+      label="&xulschoolhello.helloWorld.label;"
+      tooltiptext="&xulschoolhello.helloWorld.tooltip;"
+      oncommand="XULSchoolChrome.BrowserOverlay.doSomething(event);" />
+    <!-- More buttons here. -->
+  </toolbarpalette>
+  <!-- More overlay stuff. -->
+</overlay>
+
+ +

One detail that is easy to overlook is the fact that the toolbarpalette element is outside of the window element. If you put the toolbarpalette element inside the window element in your overlay, some weird errors will begin to happen.

+ +
+

Always set the label and tooltiptext attributes of a toolbarbutton. In the case of a toolbaritem element (discussed later), use the title attribute instead of label. Tooltips are very important for users that want to know what a button does before clicking it.

+
+ +

Setting the image for a toolbar button is done with CSS:

+ +
#xulschoolhello-hello-world-button {
+  list-style-image: url("chrome://xulschoolhello/skin/hellow-world.png");
+}
+
+ +

It's not really that simple to set the image for a toolbar button, because we need to consider the appearance of the button on different systems, and also consider the different button states, but we'll get into that further ahead.

+ +

The CSS file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file. This is very important because the toolbar customization dialog won't work correctly without this. The way to include the file in the manifest is to add this line:

+ +
style chrome://global/content/customizeToolbar.xul chrome://xulschoolhello/skin/toolbar.css
+
+ +

If you are using XBL bindings (explained way ahead) for your toolbar items, you'll have to include the CSS files for those as well, each in a new line like the one above.

+ +

We now have code that adds one or more buttons to the toolbar palette. The user can now use the Customize Dialog to add the buttons to the current Firefox toolbars. In most cases this is not what you want as default behavior, because it would be very hard for the user to discover your buttons. Keep in mind most users don't know how to customize toolbars in Firefox.

+ +

Let's add our own toolbar. This is done in the overlay as well.

+ +
<window id="main-window">
+  <toolbox id="navigator-toolbox">
+    <toolbar id="xulschoolhello-toolbar" toolbarname="&xulschoolhello.toolbarName.label;"
+      accesskey="&xulschoolhello.toolbar.accesskey;"
+      customizable="true" mode="icons" context="toolbar-context-menu"
+      defaultset="xulschoolhello-hello-world-button"
+      insertbefore="PersonalToolbar" />
+  </toolbox>
+</window>
+
+ +

Our toolbar is added as a child of the toolbox element in the main browser window. The toolbox is the collection of toolbars in Firefox, including the main menu bar. Let's look at the attributes we used:

+ + + +

That's it for the basics. With this knowledge you should be able to create simple toolbars and toolbar buttons you can add to Firefox. Now we'll look deeper into the details of toolbars so that you can make great toolbars.

+ +

Toolbar buttons

+ +

There are several types of buttons and elements you can add to a toolbar depending on your needs. The toolbarbutton element has the type attribute that allows you to change the behavior of the button in many ways. The menu and menu-button types allow you to create buttons that open popup menus beneath them. See the Back/Forward buttons in the main Firefox toolbar for an example. Menu toolbar buttons are handy when you want to include many options in your toolbar and you don't want it to be too cluttered. The other types, checkbox and radio are useful when you have buttons that change state when the user clicks on them. Read more about this in the type attribute specification.

+ +
+

Keep in mind some users have small screens with low resolution. If you shrink the Firefox window, you'll notice that the content resizes until it reaches its minimum size and begin to be cropped (cut), making UI elements disappear. You should test that your toolbar resizes gracefully and doesn't force Firefox to crop content before it's strictly necessary.

+
+ +

When you need something more elaborate than a button in your toolbar, you can use the toolbaritem element instead. This element is nothing more than a wrapper, so you can have whatever XUL content you want in it. However, you should keep in mind that odd-looking toolbars are likely to confuse and annoy users. Use custom toolbar items sparingly.

+ +

Toolbar button icons

+ +

Making the icons and CSS rules for toolbar buttons is one of the most difficult tasks when making extensions. It is not too hard to come up with some graphics for the buttons, but it can be hard to make them blend in with Firefox on all operating systems. These are the icon sets for Firefox 3.0 on Windows XP, Windows Vista, Mac OS X and Linux:

+ +

Windows XP and older

+ +

Toolbar-win.png

+ +

Windows Vista and 7 (Aero)

+ +

Toolbar-aero.png

+ +

Mac OS X

+ +

Toolbar-mac.png

+ +

Linux (Gnome)

+ +

+ +
+

Note: the images above are probably not distributable under the same CC license, unlike the rest of this material.

+
+ +

There are lots of differences there, right? Let's look at the most important ones:

+ + + +

Now let's look at the CSS work involved in a toolbar that works on the 4 aforementioned systems. If you want your toolbar to look right on all systems, you should consider having different icon sets for each. You should also consider using a graphic designer for this work, as it takes a lot of attention to detail to make good icons.

+ +

You can have a different skin directory for each operating system using Manifest Flags in the chrome.manifest file:

+ +
skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/
+skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/    os=WINNT
+skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/winaero/ os=WINNT osversion>=6
+skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/    os=Darwin
+
+ +

There is a separate skin directory for each system, with the Unix theme as the default (as most other systems are Unix-based). This makes it easy to keep the themes separate and to make changes to one of them without having to worry about the rest. On the other hand, it is often the case that there are multiple images and CSS sheets that are the same for all systems. For example, your extension logo icon will probably be the same. Having 4 copies of these files can be wasteful, so you may want to have a "common" directory.

+ +
+

Image files use the most space in an extension package, by far. Most extensions are a few hundred kilobytes in size or smaller. If your extension is getting too big, you should look into reducing image size.

+
+ +

Given the way manifest files work, we have found that the best solution is to have a separate package name for OS-specific skin files.

+ +
skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/all/
+skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/
+skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/    os=WINNT
+skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/winaero/ os=WINNT osversion>=6
+skin xulschoolhello-os classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/    os=Darwin
+
+ +

All we did here is add a new entry for "common" styles that points to the all directory. The OS-specific entries now use a different package name: xulschoolhello-os. Now you just need to be careful about when to use chrome://xulschoolhello/skin/ and when to use chrome://xulschoolhello-os/skin/. It's a bit hacky, but it works well.

+ +

As for the image files themselves, you may be wondering why it is that all icons are included in a single file instead of having one file for every state of every icon. One reason is that it would be complicated to manage that many files, and it becomes more likely that changes made to some of the files lead to an inconsistent appearance that is not obvious by looking at the individual files. It is easier to be able to edit all icons in one go. There is also a performance gain from using a single file. To get the region that corresponds to a specific state of an icon, the -moz-image-region CSS property is used.

+ +

Here are some examples of how the CSS for a toolbarbutton would look like on the 3 major platforms. This assumes that you've set the class xs-hw-toolbarbutton to all of your buttons.

+ +

Windows:

+ +
/* The second and third selectors at the bottom are necessary to prevent
+   conflicts with installed themes. */
+toolbarbutton.xulschoolhello-toolbarbutton,
+window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
+toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
+  list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
+}
+
+#xulschoolhello-hello-world-button {
+  -moz-image-region: rect(0px, 24px, 24px, 0px);
+}
+
+#xulschoolhello-hello-world-button:not([disabled="true"]):hover {
+  -moz-image-region: rect(24px, 24px, 48px, 0px);
+}
+
+#xulschoolhello-hello-world-button[disabled="true"] {
+  -moz-image-region: rect(48px, 24px, 72px, 0px);
+}
+
+#xulschoolhello-hello-world-button:not([disabled="true"]):hover:active {
+  -moz-image-region: rect(72px, 24px, 96px, 0px);
+}
+
+ +

Mac OS X:

+ +
/* The second and third selectors at the bottom are necessary to prevent
+   conflicts with installed themes. */
+toolbarbutton.xulschoolhello-toolbarbutton,
+window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
+toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
+  list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
+}
+
+#xulschoolhello-hello-world-button {
+  -moz-image-region: rect(0px, 36px, 23px, 0px);
+}
+
+#xulschoolhello-hello-world-button[disabled="true"] {
+  -moz-image-region: rect(23px, 36px, 46px, 0px);
+}
+
+#xulschoolhello-hello-world-button:not([disabled="true"]):hover:active {
+  -moz-image-region: rect(46px, 36px, 69px, 0px);
+}
+
+ +

Linux:

+ +
/* The second and third selectors at the bottom are necessary to prevent
+   conflicts with installed themes. */
+toolbarbutton.xulschoolhello-toolbarbutton,
+window:not([active="true"]) toolbarbutton.xulschoolhello-toolbarbutton,
+toolbar[iconsize="small"] toolbarbutton.xulschoolhello-toolbarbutton {
+  list-style-image: url("chrome://xulschoolhello-os/skin/toolbar.png");
+}
+
+#xulschoolhello-hello-world-button {
+  -moz-image-region: rect(0px, 24px, 24px, 0px);
+  /* Or: list-style-image: url("moz-icon://stock/gtk-some-icon?size=menu"); */
+}
+
+#xulschoolhello-hello-world-button[disabled="true"] {
+  -moz-image-region: rect(24px, 24px, 48px, 0px);
+}
+
+ +

The Windows and Linux themes have several CSS rules that apply by default to all toolbar buttons. These add the button-like look you want. If for some reason you want to override these styles (and we don't recommend doing it), you'll need the following rule:

+ +
-moz-appearance: none;
+
+ +

-moz-appearance can be used in many cases where you want to strip the native look out of an element. This will save you a lot of time trying to remove all the CSS rules that give the buttons a native look. You'll probably still need to override a couple other CSS rules to get a completely plain look.

+ +

The Customize Toolbars Dialog

+ +

Firefox has the option to customize its toolbars. We've already mentioned this before, and if you follow our recommendations, then you shouldn't have many problems making your toolbar compatible with the Customize Toolbars dialog. The dialog can be opened from View > Toolbars > Customize..., or by right-clicking on the main toolbar (or any toolbar with the correct context attribute value) and clicking on the Customize option.

+ +

Other than what we have stated before, you should take into account the controls at the bottom of the Customize Toolbars dialog. You should test your toolbar buttons and items under all combinations of Icons / Icons and text / Text, Use Small Icons, and hiving your icons in different toolbars. You should also test that the Reset to Defaults button works correctly. Adding elements to your toolbar that are not toolbarbutton or toolbaritem will cause it to fail. Make sure your icons look OK while the Customize Dialog is open, and after clicking on the OK button. If you use XBL bindings, make sure everything works normally after customizing toolbars. All of this is very important to test because, when the dialog is opened, Firefox changes the DOM of the toolbar, adding wrapper elements that allow the customization. This tends to break very specific CSS, and XBL bindings lose their internal state when moved around the DOM.

+ +

Adding toolbar buttons to existing toolbars

+ +

Finally, there is the very common case where you just want to add one button to the main toolbar. In this case you still need to add the button to the palette using an overlay. In order to add your button to the main toolbar on first run, you'll have to use Javascript code. Keep in mind that you shouldn't assume anything about the location (or presence!) of any specific buttons; remember users could have moved them or removed them altogether. The Toolbar Code Snippets page has a code sample you can use to do this.

+ +

Remember to validate if your button is already present, to prevent duplicates. It's also a good idea to set a preference that indicates that you added your button already, so that it can be removed permanently if the user chooses to. Another option is to use FUEL's firstRun property, which also relies on a preference.

+ +

Firefox 3

+ +
let extension = Application.extensions.get(YOUR_EXTENSION_ID);
+
+if (extension.firstRun) {
+  // add button here.
+}
+
+ +

Firefox 4

+ +
Application.getExtensions(function (extensions) {
+    let extension = extensions.get(YOUR_EXTENSION_ID);
+
+    if (extension.firstRun) {
+      // add button here.
+    }
+})
+ +

Both

+ +
function firstRun(extensions) {
+    let extension = extensions.get(YOUR_EXTENSION_ID);
+
+    if (extension.firstRun) {
+      // add button here.
+    }
+}
+
+if (Application.extensions)
+    firstRun(extensions);
+else
+    Application.getExtensions(firstRun);
+
+ +

The FUEL library currently only works on Firefox 3 and above.

+ +

{{ PreviousNext("Escuela_XUL/Agregar_menus_y_submenus", "Escuela_XUL/Agregar_eventos_y_comandos") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html new file mode 100644 index 0000000000..64b2aea74a --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_barras_laterales/index.html @@ -0,0 +1,198 @@ +--- +title: Agregar barras laterales +slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_barras_laterales +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_sidebars +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}{{ PreviousNext("Escuela_XUL/Agregar_ventanas_y_dialogos", "Escuela_XUL/Uso_de_objetos_en_JavaScript") }}

+ +

The sidebar in Firefox is a relatively large and flexible space to add rich interfaces without requiring new windows or complicated overlays. Sidebars take as much space as the user wants them to, and provide a frame where you can add elaborate data and controls. You're probably familiar with the Bookmarks and History sidebars. If not, you can open either one from the View > Sidebar menu. They also have shortcuts to open or close them using the keyboard.

+ +

The code required to add a sidebar is very simple, as explained in Creating a Firefox Sidebar. It's even simpler than that. All you need is to overlay the View Sidebar menu.

+ +
+
+
<menupopup id="viewSidebarMenu">
+  <menuitem id="xulschoolhello-sidebar"
+    label="&xulschoolhello.sidebar.title;"
+    accesskey="&xulschoolhello.sidebar.accesskey;"
+    type="checkbox" autoCheck="false" group="sidebar"
+    sidebarurl="chrome://xulschoolhello/content/sidebar.xul"
+    sidebartitle="&xulschoolhello.sidebar.title;"
+    oncommand="toggleSidebar('xulschoolhello-sidebar');" />
+</menupopup>
+
+
+ +

The example in the MDC page includes a shortcut key combination to toggle the new sidebar. Keyboard shortcuts are an essential feature of Firefox, and you can add your own into your extensions, which is also great. The problem is that choosing the right keyboard shortcuts is very, very hard, as explained by the creator of AdBlock Plus, and the Mozilla Keyboard Reference. To sum up both of these references: you can choose an obscure key combination that won't conflict with Firefox, such as Ctrl+Shift+(some letter), but there's no way of knowing if any other extension uses that same combination as well. Shortcut keys can be very valuable for advanced users, but don't rely on them.

+ +

The XUL page for the sidebar can hold any content you want and it's no different from other XUL windows or overlays. One minor difference is that the XUL sidebar should be defined using the page root element instead of window or dialog. The load event is fired every time the sidebar is opened, and unload every time it's closed, so you can use those for initialization and clean up .

+ +

Another, more important difference to take into account is that users can resize the sidebar to their liking, and in most cases, the sidebar is going to be fairly narrow. You should design the content of your sidebar carefully, so that it is usable and appealing regardless of width. There are ways to limit the size boundaries of your sidebar with CSS or even disable resizing altogether, but none of those are good practices. Forcing sidebars to have a fixed size can cause accessibility and usability problems.

+ +

You can still have plenty of content available in your sidebar, you just need to organize it in a way that doesn't take too much space. For this purpose we'll also look at some handy XUL elements in this section. They allow you to stack content on top of other content and switch between different sections easily.

+ +

The tabbox Element

+ +

The tabbox element creates a tabbed view of one or more tabpanel elements. You can see an example of a tabbox element if you open the Firefox Preferences window and select the Advanced section. The tabs are styled to match the operating system you're using, so you should avoid changing the CSS in tab boxes. On the other hand, if you need UI that behaves like a tabbox but doesn't look like one, you should still favor using a tabbox and use CSS to change its look. Using custom-made elements are likely to cause accessibility and functional problems.

+ +

Creating a tabbed view is simple:

+ +
+
+
<tabbox id="xulschoolhello-tabbox">
+  <tabs>
+    <tab label="&xulschoolhello.mainTab.label;" />
+    <tab label="&xulschoolhello.advancedTab.label;" />
+  </tabs>
+  <tabpanels>
+    <tabpanel>
+      <!-- Content for the main panel. -->
+    </tabpanel>
+    <tabpanel>
+      <!-- Content for the advanced panel. -->
+    </tabpanel>
+  </tabpanels>
+</tabbox>
+
+
+ +

The first tab is selected by default, but you can change the default selection by setting the selected attribute to true in the tab element.

+ +

A tabpanel can hold any kind of content. You should take into account that the whole tab box is going to be as large as the tab strip on the top and the content of the largest panel. You should try to balance the content in the tab panels so that you don't end up with uneven an  mostly empty panels.

+ +

Decks and stacks

+ +

Sometimes you'll need finer grained control than the one provided by a tabbox. In these cases the deck and stack elements are probably what you're looking for. They are extremely useful, and you'll find yourself using them in many situations besides sidebars.

+ +

A deck is like a tabbbox without the tabs. It only displays one of its child nodes at a time, depending on its selectedIndex value. In the following example, the second child will be displayed, not the first which would be the default.

+ +
+
+
<deck selectedIndex="2">
+  <hbox>
+    <!-- Content for the first child. -->
+  </hbox>
+  <hbox>
+    <!-- Content for the second child. -->
+  </hbox>
+</deck>
+
+
+ +
+
+
Note how this is one of the few cases where an attribute of an element is named using camel case instead of all small caps.
+
+
+ +

 The size of the deck depends on the size of the largest child node, just like in a tabbox.

+ +
+
+
We recommend that you use hbox or vbox elements as children of a deck or stack. The code is easier to read and maintain this way.
+
+
+ +

A deck can be very useful when you have a large piece of XUL code that only changes in a small way depending on different circumstances. For instance, you could have a window that is used for two different purposes, and the only difference between the two cases is a label that has a value in one case and something else in another. Using a .properties file and a string bundle is a viable option, but it involves a lot of code for something so simple, specially if that's the only case where you need dynamic text. The alternative is to use a deck with the two labels, and change the selected index depending on the purpose of the window. This way you can still use DTD, and the code remains simple.

+ +

A stack is like a deck, except that all of its children are always on display, one of top of the other. It allows you to decompose complex UI into individual layers, broadening the layout possibilities. One common use for a stack is to have an image background that stretches horizontally and vertically depending on the size of the foreground object:

+ +
+
+
<stack>
+  <hbox flex="1">
+    <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1" />
+  </hbox>
+  <hbox>
+    <!-- Some content here. -->
+  </hbox>
+</stack>
+
+
+ +

This workaround is necessary because you can't have an background image stretch using CSS.

+ +

A less common use for the stack element is to use the left and top attributes on its children in order to have absolute positioning for the content on the layers. This kind of positioning can be useful for various artistic effects, as well as some type of desktop-like or Dashboard-like interface, where items are located in positions determined by the user, and they can overlap with each other. This can become complicated very easily, though.

+ +
Remember that you can't have flexibility and absolute positioning at the same time.
+ +

Trees

+ +

The bookmarks and history sidebars in Firefox use the tree element to show their content. Trees are another strong option when you need to show a great amount of information in a compact presentation. With a tree you can show a rather small amount of root nodes, giving the user the possibility to expand whichever ones are needed. Trees are specially powerful when combined with data templates, a topic that will be covered later on. You can also read much more about trees in the XUL Tutorial page.

+ +

The tree element is possibly the most complex element in XUL. It is meant to be very versatile and malleable, but it can require a good amount of work before it fits your specific needs. It is in reality a hierarchical table view, so its content is defined in terms of rows and columns. Here's an example of a simple tree:

+ +
+
+
<tree flex="1">
+  <treecols>
+    <treecol label="&xulschoolhello.nameColumn.label;" flex="1" />
+    <treecol label="&xulschoolhello.greetingColumn.label;" flex="3" />
+  </treecols>
+  <treechildren>
+    <treeitem>
+      <treerow>
+        <treecell label="Peter" />
+        <treecell label="Hey, what's up?" />
+      </treerow>
+    </treeitem>
+    <treeitem>
+      <treerow>
+        <treecell label="John"/>
+        <treecell label="Good evening, how are you doing?" />
+      </treerow>
+    </treeitem>
+  </treechildren>
+</tree>
+
+
+ +

The text in the rows of the tree is hardcoded because we wouldn't generally use text from locale files. We would use data from a datasource such as a database or a remote API. This tree is not much of a tree because it only has one level of depth. A more elaborate tree would look like this:

+ +
+
+
<tree flex="1">
+  <treecols>
+    <treecol label="&xulschoolhello.nameColumn.label;" flex="1" />
+    <treecol label="&xulschoolhello.greetingColumn.label;" flex="3" />
+  </treecols>
+  <treechildren>
+    <treeitem>
+      <treerow>
+        <treecell label="Peter" />
+        <treecell label="Hey, what's up?" />
+      </treerow>
+    </treeitem>
+    <!-- Notice that you need to specify the container attribute. -->
+    <treeitem container="true" open="true">
+      <treerow>
+        <treecell label="John"/>
+        <treecell label="Good evening, how are you doing?" />
+      </treerow>
+      <treechildren>
+        <treeitem>
+          <treerow>
+            <treecell label="John Jr."/>
+            <treecell label="Bah, bah!" />
+          </treerow>
+        </treeitem>
+      </treechildren>
+    </treeitem>
+  </treechildren>
+</tree>
+
+
+ +

In this case, the row for "John" has a child row for "John Jr.". The treechildren element is placed as a child for John's treeitem element, and the container attribute must be set.

+ +

It should be evident at this point that hand-coding a tree would take quite some time and yields a great deal of XML code that is hard to follow. This is why most of the uses of the tree element are for displaying data from an external datasource. Even handling the construction of a tree using Javascript and DOM functions can become very convoluted, which is why trees are better used along with templates. This topic will be covered later when we look at different kinds of datasources and templates.

+ +

Adding style to a tree can also be challenging, which is why there's a guide at MDC specifically covering how to Style a Tree. Looking at the Bookmarks and History sidebars should make it clear that trees are quite customizable with CSS.

+ +

{{ PreviousNext("Escuela_XUL/Agregar_ventanas_y_dialogos", "Escuela_XUL/Uso_de_objetos_en_JavaScript") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html new file mode 100644 index 0000000000..8d1771e21a --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_eventos_y_comandos/index.html @@ -0,0 +1,135 @@ +--- +title: Agregar eventos y comandos +slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_eventos_y_comandos +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_Events_and_Commands +--- +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas", "Escuela_XUL/El_modelo_de_caja") }}

+ +

Event handlers

+ +

Just like with HTML, most JavaScript code execution is triggered by event handlers attached to DOM elements. The most commonly used event is the onload event, which is used in overlays and other windows to detect when the window has loaded and then run initialization code:

+ +
// rest of overlay code goes here.
+window.addEventListener(
+  "load", function() { XulSchoolChrome.BrowserOverlay.init(); }, false);
+
+ +

You can do something similar with the onunload event, to do any cleanup you may need.

+ +
Please read Appendix A for recommendations on how to use the load event to initialize your add-on without having a negative performance impact on Firefox.
+ +

Another way to attach event handlers, just like HTML, is to place the handler in the XUL code:

+ +
<overlay id="xulschoolhello-browser-overlay"
+  onload="XulSchoolChrome.BrowserOverlay.init();"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+ +

We prefer the first method because it keeps a better separation of content and behavior. Also, note that the addEventListener method receives the event name without the "on" prefix, while element attributes do have the prefix. There's a long list of events you can listen to, and which you use depend on the situation. Elements only implement the events that are relevant to them, but there are several events that are implemented for most elements. These are some notable events you should keep in mind:

+ + + +

Event handlers can take an event argument, which is an Event object that holds information on the event. You can get information on key modifiers (in case the user was holding a modifier key like Alt while performing the event), screen coordinates for mouse events, and most importantly, the target element for the event. For example:

+ +
<button label="&xulschoolhello.defaultGreeting.label;"
+  oncommand="XulSchoolChrome.BrowserOverlay.changeGreeting(event);" />
+
+ +

Then on the Javascript code you would have something like this:

+ +
changeGreeting : function(aEvent) {
+  // more stuff
+  aEvent.target.setAttribute("label", someNewGreeting);
+}
+
+ +

The target in this example is the button element, so clicking on it will change its text. The advantage of using the event argument is that the method is not dependent of the specific button, so it can also be used for other elements.

+ +

For more advanced event handling, you should read about Event Propagation. In a nutshell, events propagate from the root of the DOM tree all the way down to the target element and then all the way up back to the root, in the capture and bubble phases, respectively. You can capture and cancel events during any of these phases, provided that they aren't canceled before they reach the point where you intended to capture them. The addEventListener method allows you to control the phase where you want to handle an event, with the last argument of the function.

+ +
In general, you should avoid adding event handlers in the capturing phase, or canceling events. This can lead to unexpected behavior for the user since most events have a default behavior associated to them.
+ +

Custom events

+ +

This is a very powerful tool that you should know, even if it isn't that frequently used. The DOM createEvent function allows you to create custom events that you can dispatch and capture.

+ +

Custom events serve as a good communication mechanism, specially when dealing with a somewhat common problem: communication between window XUL and web page content. It isn't hard for XUL code to control the content on pages being loaded or displayed, as we will see later on, but it can be hard for your extension XUL code to receive information from pages in a secure manner. This is because it would be very insecure to have a website JS controlling the behavior of Firefox and running JavaScript code with chrome privileges.

+ +

Suppose your extension interacts with pages from a website, and you want some actions on this site to trigger actions in your extension. One way to solve this is to have the actions on the site to generate a custom event that can be easily recognized by your extension. You can capture the events in the XUL  overlay, since they'll bubble all the way up:

+ +
// in the overlay code.
+document.addEventListener(
+  "XSHelloGreetingEvent", function(aEvent) { /* do stuff*/ }, false);
+
+ +

Be careful when doing this! You should at least validate the URL of the page that is generating the custom event, so that you know that it's coming from the right place. You should also avoid this kind of events to trigger actions that could be destructive to the user's data, because a malicious site could try to trigger these events and cause damage. There's a reason for the division between remote content and local chrome, so make sure you respect it.

+ +

There's a section further ahead on Intercepting Page Loads which complements this section very well. This should give you a solid foundation to handle interaction between web content and XUL.  Additional information on custom events and how they can be used to effect communication between web content and XUL can be found in the Interaction between privileged and non-privileged pages code snippets, which describe and provide examples of this sort of communication.

+ +

Broadcasters

+ +

Keeping a consistent UI is another important aspect of extension behavior. Maybe your extension needs to disable or enable a series of controls when the user logs in or out of a service, or when Firefox detects it's online or offline. It's common that you need to change several elements at the same time, and this can be difficult to manage through JavaScript. The broadcaster element can help you out in these cases.

+ +

First you need to add a broadcaster element to your XUL code, as a child of a broadcasterset element.

+ +
<broadcasterset id="xulschoolhello-broadcasterset">
+  <broadcaster id="xulschoolhello-online-broadcaster" />
+</broadcasterset>
+
+ +

These elements are completely invisible, so you can put them anywhere. It is recommended that you have them at the top of the XUL code, along with script declarations and other invisible elements with as popupset and commandset.

+ +

Then you need to identify which of your XUL elements will be linked to this broadcaster, using the observes attribute:

+ +
<menuitem id="xulschoolhello-hello-menu-item"
+  label="&xulschoolhello.hello.label;"
+  accesskey="&xulschoolhello.helloItem.accesskey;"
+  observes="xulschoolhello-online-broadcaster"
+  oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+
+ +

The attribute value is set to be the id of the broadcaster element, indicating that this element will observe all attribute changes that happen in the broadcaster. You can have as many elements as you want observing a broadcaster.

+ +

With that set, all you need to do now is set or remove attributes in the broadcaster using JavaScript. All nodes observing it will automatically have those attribute values set or removed as well. You can override pre-existing values, such as the label attribute value in the example.

+ +
let onlineBroadcaster = document.getElementById("xulschoolhello-online-broadcaster");
+
+onlineBroadcaster.setAttribute("label", "Something");
+
+ +

You can also have finer-grained control to this behavior by adding the observes element as a child to your observer node. This allows you to choose which attributes you want it to observe.

+ +

Broadcasters allow you to easily maintain consistency among numerous elements without having to add much code. They also save you the trouble of having to know if a given element is present in the DOM or not. For example, if you have a customizable toolbar, you can't be sure if a given button is present or not, so it's easier to use a broadcaster. This way you only need to set values to the broadcaster instead of having to check if the button is there or not.

+ +

Commands

+ +

The command element is a specialized type of broadcaster, meant to be used with the oncommand event. This is the recommended way of centralizing common UI behavior in Firefox and extensions. Commands are heavily used in Firefox, as a quick look into the DOM Inspector should show.

+ +

Their behavior is identical as broadcaster elements, but they should be used when oncommand is one of the shared attributes. Our menu example is in fact better suited for a command.

+ +
<commandset id="xulschoolhello-commandset">
+  <command id="xulschoolhello-hello-command"
+    oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+  <!-- More commands. -->
+</commandset>
+<!-- More code here... -->
+<menuitem id="xulschoolhello-hello-menu-item"
+  label="&xulschoolhello.hello.label;"
+  accesskey="&xulschoolhello.helloItem.accesskey;"
+  command="xulschoolhello-hello-command" />
+
+ +

Commands allow you to keep your JavaScript calls in a single place, avoiding code repetition and possible bugs. Your UI can easily scale this way. You can create an extension that adds toolbar buttons, statusbar buttons and menu items, all with equivalent behavior, and without having to repeat lots of XUL code in the process. Commands and broadcasters also facilitate working with complex form windows and dialogs. You should always keep them in mind when adding the event-driven code for your extension.

+ +

{{ PreviousNext("Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas", "Escuela_XUL/El_modelo_de_caja") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html new file mode 100644 index 0000000000..e39f36363a --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_menus_y_submenus/index.html @@ -0,0 +1,139 @@ +--- +title: Agregar menus y submenus +slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_menus_y_submenus +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_menus_and_submenus +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Escuela_XUL/Montando_un_ambiente_de_desarrollo", "Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas") }}

+ +

The Hello World example in the previous sections shows the two most common ways to add menus: adding them to the Tools menu (recommended) and adding them to the main menu bar (not recommended). In this section we'll look into more specialized menus and what you can do with them.

+ +

Adding a New Menu

+ +

We already saw how to add menus in overlays, and as you may have imagined, you can nest submenus as deep as you want. You should avoid having deep menus full of options, though, because too many options are confusing for most users.

+ +

If your extension requires new XUL windows, you may also need to have menus on those windows. You can do this with a menubar. The menubar element should be a child of a toolbox element because it is treated like another toolbar on systems other than Mac OS X. On those systems you can move toolbar controls to the menu bar when you're customizing your toolbars.

+ +
+

Mac OS X treats menus in a very different way than other systems. If your extension involves menus in any way, you should test it on Mac OS X to make sure everything works adequately.

+
+ +

The toolbox should be positioned at the beginning of the XUL document, and the code should be similar to this:

+ +
<toolbox>
+  <menubar id="xulschoolhello-menubar">
+    <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;">
+      <menupopup>
+        <menuitem label="&xulschoolhello.greet.short.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" />
+        <menuitem label="&xulschoolhello.greet.medium.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" />
+        <menuitem label="&xulschoolhello.greet.long.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" />
+        <menuseparator />
+        <menuitem label="&xulschoolhello.greet.custom.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" />
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+ +

This code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting. The separator is usually displayed as a horizontal line that creates a logical division between different types of menuitem elements, keeping everything more organized.

+ +

A menubar can hold one or more menu elements. Menus require a menupopup element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels:

+ +
<toolbox>
+ <menubar id="xulschoolhello-menubar">
+    <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;">
+      <menupopup>
+        <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingSizes.label;">
+          <menupopup>
+            <menuitem label="&xulschoolhello.greet.short.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" />
+            <menuitem label="&xulschoolhello.greet.medium.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" />
+            <menuitem label="&xulschoolhello.greet.long.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" />
+          </menupopup>
+        </menu>
+        <menuitem label="&xulschoolhello.greet.custom.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" />
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+ +

In this case we grouped the 3 greeting items into a submenu. It doesn't make much sense to do that in this case because we end up with only two menu items, one of them being a menu with 3 child items.

+ +

You can also have menus that are filled dynamically. Instead of setting the menupopup directly in the XUL, you can use the onpopupshowing event to fill the children when the popup is about to be displayed.

+ +
+

If you have nothing to show on a menu, you should follow the standard used in Firefox: show a single disabled item with an "(Empty)" label.

+ +

If filling your menu takes a noticeable amount of time, you should not make Firefox (and your users) wait for it to fill up before displaying anything. It's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents. We'll look into some asynchronous techniques further ahead in the tutorial.

+
+ +

Adding Elements to Existing Menus

+ +

Just as explained in the previous sections, the best place to overlay your extension menu is inside the Tools menu. That is, unless there's a place inside the menu structure where your extension menus make more sense. If you're overlaying the Tools menu, your overlay code should have something like this:

+ +
<menupopup id="menu_ToolsPopup">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertafter="javascriptConsole,devToolsSeparator">
+    <menupopup>
+      <!-- Your menuitem goes here. -->
+    </menupopup>
+  </menu>
+</menupopup>
+ +

Now let's look at some specialized types of menu items.

+ + + +

Checkbox Menu Items

+ +

You can make a menuitem "checkable" to allow the user to enable/disable options using the menu. We use two attributes for this: type and checked. The type attribute must be set to "checkbox". You can set the checked attribute to "true" to check it by default.

+ +

The item's checked state changes when the user clicks on it. An example of one such item is the View > Status Bar item in the main Firefox menu.

+ +

Radio Menu Items

+ +

If you need to have a set of menuitem elements where only one of them has to be checked at any given moment, you should set the type to "radio". The name attribute is used to identify the items that belong to the radio group.

+ +
<menupopup oncommand="XULSchoolChrome.HW.GreetingDialog.greeting(event);">
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.short.label;" checked="true" />
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.medium.label;" />
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.long.label;" />
+</menupopup>
+ +

This is a modified version of the 3 greeting menus. It is now implemented as a radio menu where you pick one of the 3 available choices. The first one is checked by default. The oncommand attribute is set on the menupopup to avoid code duplication, since now the 3 items call the same function.

+ +

Another example of a menu like this is the View > Sidebars menu. Only one sidebar is visible at any given moment, and you can pick from several.

+ + + +

To add an icon to a menu or menuitem, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the image attribute or the list-style-image CSS property. Menu icons are typically 16px by 16px.

+ + + +

As mentioned earlier, menus are very different on Mac OS X. This is because menus on Mac are unified in a single menu bar which is controlled by the operating system, as opposed to menus in other systems, which are entirely controlled by Firefox. Mac OS X also has menu standards, such as the positioning of certain items that are not used in other systems. Here's a list of the known issues we've run into when handling menus on Mac:

+ + + +

{{ PreviousNext("Escuela_XUL/Montando_un_ambiente_de_desarrollo", "Escuela_XUL/Agregar_barras_de_herramientas_y_botones_para_éstas") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html b/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html new file mode 100644 index 0000000000..030ed3c918 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/agregar_ventanas_y_dialogos/index.html @@ -0,0 +1,197 @@ +--- +title: Agregar ventanas y dialogos +slug: Mozilla/Tech/XUL/Escuela_XUL/Agregar_ventanas_y_dialogos +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_windows_and_dialogs +--- +

{{AddonSidebar}}

+ +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}

+ +

{{ PreviousNext("Escuela_XUL/El_modelo_de_caja", "Escuela_XUL/Agregar_barras_laterales") }}

+ +

Opening windows and dialogs

+ +

To open a new window, use the Javascript window.open function just like with HTML windows.

+ +
+
+
window.open(
+  "chrome://xulschoolhello/content/someWindow.xul",
+  "xulschoolhello-some-window",
+  "chrome,centerscreen");
+
+
+ +

The first argument is the URL to open, the second is an id to identify the window, and the last is an optional comma-separated list of features, which describe the behavior and appearance of the window. If this value is null or empty, the default toolbars of the main window will be added to the new one, which is rarely what you want. The window.open page has a detailed description of the features you can use and their values. The following features are very important and you should always keep them in mind:

+ + + +

To open a new dialog, use the function window.openDialog, an extension of the open function. It allows you to send a set of optional parameters that can be used to communicate with the dialog.

+ +
+
+
let someValue = 2;
+let returnValue = { accepted : false , result : "" };
+
+window.openDialog(
+  "chrome://xulschoolhello/content/someDialog.xul",
+  "xulschoolhello-some-dialog", "chrome,centerscreen",
+  someValue, returnValue); // you can send as many extra parameters as you need.
+
+// if (returnValue.accepted) { do stuff }
+
+
+ +

The optional parameters are available in the dialog code through the window.arguments property:

+ +
+
+
let someValue = window.arguments[0];
+let returnValue = window.arguments[1];
+
+// returnValue.accepted = true;
+// returnValue.result = "something";
+
+
+
+ +

The parameter named returnValue is an object that the dialog will modify to reflect what the user did in it. This is the simplest way to have the dialog return something to its opener. Note that the opener will wait until the dialog is closed. This means the openDialog function call will not return until the dialog has been closed by the user.

+ +

Common Dialogs and the Prompt Service

+ +

There are several types of dialogs that are fairly common, so there are ways to create them easily without having to reinvent the wheel and write all their XUL and JS code all over again. Whenever you need a new dialog, you should ask yourself if it can be implemented using these common dialogs, and use them whenever it is possible. They have been thoroughly tested for OS integration, accessbility and localization, so you save yourself a lot of work and favor them.

+ +

Using the Prompt Service is the recommended way to create common dialogs in an extension. Read the article and its examples carefully, because there are many useful functions to use in the Prompt Service. There are some equivalent, simpler functions that are available in the window object, but those are meant for unprivileged HTML JavaScript code.

+ +

Alert

+ +

The alert is the simplest form of dialog. All it does is display a text message that the user can read and then click the OK button to dismiss it. We have been using the window.alert function to open alert messages in our examples so far, but that's not the right way to do it. It's OK to use this function if you're just debugging some problem and want to see if the program reaches a specific line of code, or to inspect the value of a variable, but your final extension should not have alert calls anywhere.

+ +

If you use window.alert, the alert window will have the title [JavaScript Application], indicating that the source of the message is not well defined. The Prompt Service allows better alerts to be displayed. Here's an example of displaying an alert using the Prompt Service:

+ +
+
+
let prompts =
+  Cc["@mozilla.org/embedcomp/prompt-service;1"].
+    getService(Ci.nsIPromptService);
+
+prompts.alert(window, "Alert Title", "Hello!");
+
+
+ +

You should of course use localized strings instead of hard-coded ones.

+ +

The Prompt Service allows you to set the title of the dialog however you want it, and also lets you specify the window you want to use as a parent for the alert. This normally should be set to the current window. You can pass a null value and the service will pick the currently active window.

+ +

Confirm

+ +

Confirmation dialogs display a text with a Yes / No question, and prompts the user to choose an answer. In HTML you can use the window.confirm function for this. The Prompt Service has a confirm method with similar behavior:

+ +
+
+
let prompts =
+  Cc["@mozilla.org/embedcomp/prompt-service;1"].
+    getService(Ci.nsIPromptService);
+
+if (prompts.confirm(window, "Confirm Title", "Would you like to continue?")) {
+  // do something.
+} else {
+  // do something else
+}
+
+
+ +

The method returns a boolean value indicating the user's response.

+ +

Others

+ +

Unprivileged Javascript can also use the window.prompt function to receive text input from the user. The Prompt Service has a very rich set of functions that allow different kinds of inputs, such as text, passwords, usernames and passwords, and checkboxes that can be used for "Never ask this again"-type dialogs. The confirmEx and prompt methods are the most customizable, allowing a great deal of options that cover most common dialog cases.

+ +

Using the Prompt Service will save you a lot of XUL coding, and you'll be at ease knowing that you're using Mozilla's tried and tested code.

+ +

The Dialog Element

+ +

When the Prompt Service is not enough, you'll have to create you own XUL dialogs. Luckily, you still get a great deal of help from the platform if you use the dialog element as the document root instead of the more generic window element.

+ +

You may be asking yourself what's the big deal about defining a simple XUL window with an OK and maybe a Cancel button. The dialogs we have covered in this section are very simple and shouldn't be too hard to implement manually using XUL. Well, it's more complicated than that. Different operating systems order and position their buttons differently in their dialogs. There are also subtle aspects about window size, margins and paddings that are not the same for all systems, so you should avoid making dialogs from scratch or overriding the default dialog CSS styles.

+ +

The dialog element handles all of this transparently. All you need to do is define which buttons you'll need and the actions associated with them.

+ +
+
+
<dialog id="xulschoolhello-hello-dialog"
+  title="&xulschoolhello.helloDialog.title;"
+  buttons="accept,cancel"
+  ondialogaccept="return XULSchoolChrome.HelloDialog.accept();"
+  ondialogcancel="return XULSchoolChrome.HelloDialog.cancel();"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+
+ +

Carefully read the specification of the dialog element. You'll see that you can choose from a wide variety of buttons, associate any action you need to them, override their labels, and even add completely customized extra buttons. All of this without having to worry about your dialog looking odd in some operating systems. The only constant rule is that clicking on OK and Cancel will close the dialog unless your associated function returns false. You should avoid returning false, though, specially with the Cancel button. Dialogs in general should be easy to dismiss.

+ +
+
+

Your dialogs shouldn't have fixed dimensions because of potential localization problems. Dialogs are sized to their contents and will generally work fine. However, there are cases where the dialog contents are generated or expanded dynamically by your code, and you'll need to resize them appropriately. The window.sizeToContent function is what you need in this case.

+
+
+ +

Input Controls

+ +

Most additional XUL windows and dialogs in extensions are some kind of input form. Let's look into the most commonly used form elements and how to use them in your XUL windows. There isn't much we need to add from what the XUL Tutorial explains, so go ahead and read the following sections:

+ + + +

There are some other aspects to take into account when handling input controls, which we cover in the following sections.

+ +

Groupboxes

+ +

The groupbox element should be easy to understand: it groups a series of XUL controls together. It's a box container with styling that is usually a visible border around its contents, so that it's clear what is being grouped together. It is frequently used with the caption element to associate the grouped elements with a title.

+ +

The groupbox shouldn't be seen as an aesthetic device, but a logical one. If all you need is a border, use CSS. The groupbox element should be used when enclosed elements share some function which is separate from other elements or groups in the same window. It's also a useful accessibility feature, because screen readers will read the caption right before reading any text in its contents. You can change its style using CSS in case you don't want the borders to appear. See the Firefox Preferences window for an example of this: sections are defined using groupbox elements, but their style is quite different from the default.

+ +

Attribute Persistence

+ +

User actions can change the state of your windows, such as selecting an option in a listbox, or entering text in a textbox. If the user closes and then reopens your window, all the controls are reset to their defaults, which may not be what you want. You need some way of remembering the user-manipulated attribute values so that the window reloads it last state when opened.

+ +

Most XUL elements support the persist attribute, which has this exact function. You set the persist attribute with a space-separated list of attribute names, indicating which attribute values must be persisted across window "sessions".

+ +
+
+
<checkbox id="xulschoolhello-some-checkbox"
+  label="&xulschoolhello.someText.label;"
+  checked="false" persist="checked" />
+
+
+ +

Setting the id attribute of the element is mandatory if you want the persist attribute to work. You can also set persistence programatically using the document.persist function:

+ +
+
+
document.persist("xulschoolhello-some-checkbox", "checked");
+
+
+ +

Persistent data is stored in the user profile, in the file localstore.rdf. You may need to modify or delete this file often when testing persistent data in your extension.

+ +

Focus and Tabbing

+ +

Moving through all input controls in a window using only the keyboard is an accessibility requirement. You can do this in most Firefox windows by pressing the Tab key. Each Tab key press moves you to the next control in the window, giving it focus.

+ +

In general, there's nothing you need to do in order to have good keyboard focus management. Firefox will automatically focus the first input control in your window, and tab focus advances in the order the items are found in the XUL document. If you have a very complex layout, or need customized tabbing behavior, you can set the tabindex attribute in the controls. You can also use the focus function to focus an element depending on events such as window load. You should do this carefully, to avoid having inaccessible controls.

+ +

You can also use the -moz-user-focus CSS property to enable focusing of elements that typically wouldn't receive focus. Again, this should be used sparingly.

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html b/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html new file mode 100644 index 0000000000..888f350c16 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/almacenamiento_local/index.html @@ -0,0 +1,140 @@ +--- +title: Almacenamiento local +slug: Mozilla/Tech/XUL/Escuela_XUL/Almacenamiento_local +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Local_Storage +--- +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+

{{ PreviousNext("Escuela_XUL/Manejo_de_preferencias", "Escuela_XUL/Interceptando_cargas_de_página") }}

+ +

It is very common for an extension to require some kind of local persistent storage. We recommend that you at least keep an error log, so that you can request error data from your users when you encounter problems that are hard to debug. We'll discuss logging in this section, but first let's look at the right (or at least, common and scalable) way of managing local files.

+ +

It is strongly recommended that you keep your local files inside the Firefox profile directory. Otherwise you may run into problems if the same extension is installed in multiple profiles. The common practice is to create a directory with the name of your project at the root of the profile folder, and keep your files inside. The structure could be something like this:

+ + + +

The Directory Service and the {{ interface("nsIFile") }} interface are used to create the local directory. Here's what we usually do: we have a function that returns a reference to our root directory and creates it if necessary.

+ +
getLocalDirectory : function() {
+  let directoryService =
+    Cc["@mozilla.org/file/directory_service;1"].
+      getService(Ci.nsIProperties);
+  // this is a reference to the profile dir (ProfD) now.
+  let localDir = directoryService.get("ProfD", Ci.nsIFile);
+
+  localDir.append("XULSchool");
+
+  if (!localDir.exists() || !localDir.isDirectory()) {
+    // read and write permissions to owner and group, read-only for others.
+    localDir.create(Ci.nsIFile.DIRECTORY_TYPE, 0774);
+  }
+
+  return localDir;
+},
+
+ +

ProfD is a special identifier for the profile directory that exists so that you don't need to figure out its location. In general this is the only directory flag you'll need, but sometimes you'll need access to other system directories, and you don't want to have to worry about which operating system or system language your extension is running on. A {{ source("xpcom/io/nsDirectoryServiceDefs.h","full list of these flags") }} can be found in the Firefox source.
+ Having that function in place, we do something like the following:

+ +
let myFile = XULSchool.getLocalDirectory();
+
+myFile.append("someFile.txt");
+// do stuff with the file.
+ +

Files are handled with the {{ interface("nsIFile") }} interface. An {{ interface("nsIFile") }} doesn't necessarily represent an existing file, as in the previous examples. You first specify the file using {{ interface("nsIFile") }} and then use {{ ifmethod("nsIFile","create") }} to actually write it out to disk. You can also check if an {{ interface("nsIFile") }} exists using {{ ifmethod("nsIFile","exists") }}.

+ +

To read and write information in files, you need to use stream objects. You can read more about reading and writing files here. In general you won't need to do this directly, but it's always useful to know.

+ +

Finally, there's the issue of deleting local files when the extension is going to be uninstalled. Whether this is necessary or not is a matter of preference. Some extension developers prefer to leave the data there, so that if the user chooses to install the extension again, all the previous data will be recovered. This is the default behavior when Firefox is uninstalled: the profile information remains intact and it will be there waiting for you if Firefox is installed again. Others feel concerned about privacy and storing private information locally without deleting it. A good argument can be done for both, so it is up to you to choose what to do in this case. The FUEL library has an uninstall event you can use to perform these operations.

+ +

Logging

+ +

Good logging is essential in all kinds of software projects. Any extension that is more complex than a Hello World needs some way to log errors and trace execution without having to fire up a debugger.

+ +

It used to be the case that custom logging solutions were necessary, but Mozilla Labs have come up with a JavaScript implementation of a logger similar to the Log4J logger used in Java projects. The logger is called Log4Moz and it is implemented as a JavaScript Code Module, so it only works on Firefox 3 and above.

+ +

To use this logger, you need to copy the log4moz.js file to your modules directory. In the initialization method of your one of your "common" or startup objects, add the following code:

+ +
let formatter = new Log4Moz.BasicFormatter();
+let root = Log4Moz.repository.rootLogger;
+let logFile = this.getLocalDirectory(); // remember this?
+let appender;
+
+logFile.append("log.txt");
+
+// Loggers are hierarchical, lowering this log level will affect all
+// output.
+root.level = Log4Moz.Level["All"];
+
+// this appender will log to the file system.
+appender = new Log4Moz.RotatingFileAppender(logFile, formatter);
+appender.level = Log4Moz.Level["All"];
+root.addAppender(appender);
+
+ +

After that, you can create a logger object for any object in your project like this:

+ +
this._logger = Log4Moz.repository.getLogger("XULSchool.SomeObject");
+
+this._logger.level = Log4Moz.Level["All"];
+
+ +

{{ note("We recommend that you create a logger instance in the constructor of every object and store it in a private variable.") }}

+ +

And then logging is done with any of the following methods, depending on the kind of message being logged:

+ +
this._logger.fatal("This is a fatal message.");
+this._logger.error("This is an error message.");
+this._logger.warn("This is a warning message.");
+this._logger.info("This is an info message.");
+this._logger.config("This is a config message.");
+this._logger.debug("This is a debug message.");
+this._logger.trace("This is a trace message.");
+
+ +

You can filter the output of the global logger or any specific logger instance by setting the level property. During development you should use the "All" level, but for release versions it's usually better to move the level up to "Warn", so that the log is compact and execution is more efficient.

+ +
Note: We recommend that all exception catch blocks include some logging at the error or warn levels, and in general you should use logging freely in order to have as much information as possible to fix bugs and know what is going on. Don't log inside functions that are called too often, such as mouseover event handlers, or certain HTTP activity listeners. This impacts performance and fills the log with useless messages. We normally add a comment that indicates that logging is not done there for performance reasons.
+ +

SQLite

+ +

SQLite storage was introduced in Firefox 2, and it's the preferred storage mechanism in Firefox. It is the storage system used for the Places API that manages bookmarks and history. It's also used for storing cookies, form inputs, and others.

+ +

SQLite is a lightweight SQL based storage system. It is ideal for embedding in other programs, and is currently in use in several popular applications. It's also the storage system we recommend for local storage in extensions.

+ +

The Storage page has a good explanation on how to use the SQLite API, so we won't go over that again. If you're unfamiliar with SQL or if you're interested in knowing the restrictions in the syntax used by SQLite, you can read more at the SQLite site.

+ +

You should carefully design your database structure, taking into account features you're planning on adding in the future. Adding or removing columns, or making other changes to your DB structure from one version of your extension to the next will probably cause breakage of user data in older versions. You'll need to carefully add migration code that moves the data from the old DB format to the new, and this becomes increasingly complex as you add new versions and new structure changes. So, be careful and plan for the future.

+ +

There are two paths you can take when creating the local database you'll be using for your extension:

+ + + +

RDF

+ +

RDF used to be the preferred storage mechanism for Firefox. If was used for most of its datasources, and you can still see it in use here and there, like in the install.rdf file. It is being phased out, with SQLite taking its place in most cases. The RDF API may be removed at some point in the future because it requires a great deal of code even for the simplest tasks, and it currently sees little maintenance, so we don't recommend using it unless you really have to.

+ +

You'll still need to understand at least a little about RDF when you read the documentation about templates.

+ +

Templates

+ +

Templates are a very powerful tool in Firefox. They allow you to automatically generate XUL content using information from a datasource, and automatically update the content once the datasource changes. They were designed with RDF datasources in mind, but since Firefox 3 they have been extended to support SQLite datasources as well.

+ +

Handling templates can also be complicated, but it is worth the effort if you need to display long lists or trees with complex data. If you manage to get your display code to use templates, you will have saved a lot of coding. Since templates are not necessary for most extensions and they're a complicated subject, it's better that you read it from the experts. There's a very detailed XUL Template Guide here. As mentioned before, it revolves around RDF, so you may need to take some time to understand how RDF works. There's a section about SQLite Templates in the guide, but there are some concepts in it that will require you to read at least some of the rest of it.

+ +

{{ PreviousNext("Escuela_XUL/Manejo_de_preferencias", "Escuela_XUL/Interceptando_cargas_de_página") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git "a/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_a_colon__rendimiento_de_los_add-ons/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_a_colon__rendimiento_de_los_add-ons/index.html" new file mode 100644 index 0000000000..74a50cf7a2 --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_a_colon__rendimiento_de_los_add-ons/index.html" @@ -0,0 +1,57 @@ +--- +title: 'Apéndice A: Rendimiento de los Add-ons' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_A:_Rendimiento_de_los_Add-ons' +translation_of: 'Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_A:_Add-on_Performance' +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +
Note: See the newer article Performance best practices in extensions for more up-to-date information about how to optimize the performance of your add-on.
+ +

Add-ons can have a noticeable performance impact on Firefox. This is evident when opening a Firefox profile that has many add-ons installed; some profiles can take minutes to load, which is a serious inconvenience for users that gives them a negative view of Firefox. Add-on developers need to make sure that they minimize their add-ons' performance impact, and here are a few simple guidelines that should be followed to achieve that.

+ +

Startup

+ +

This is the area where add-ons have the most noticeable impact. Most add-ons use the load event handler in the main overlay to initialize their objects and sometimes read files or even fetch remote data. The problem with the onload event is that it runs before the main window becomes visible, so all handlers need to complete before the user can see the window. An add-on can normally add a few hundred milliseconds to startup time because of the load handler, and it's not hard to figure out what having several add-ons will do.

+ +

Luckily, minimizing your startup time is easy, if you follow these guidelines:

+ +
    +
  1. Do not load or run code before it’s needed. Add-ons can have extra features that are only available depending on user preferences. Other add-ons have most of their features depend on a user being logged in to a service. Don’t load at startup something you won’t need at the time.
    2. +
  2. JavaScript Code Modules. Use them. JSM provide the cleanest way to separate JS into modules that can be loaded on request, unlike chrome scripts which are generally loaded with the overlay at startup. Keep as much of your code in JSM, make it as modular as you can, and only load modules as you require them. If your add-on is too simple for JSM, don’t worry about it. There’s still one more thing you can do.
    3. +
  3. Do as little as possible in your load handler. Ask yourself: is there anything I can’t run 100 ms or even 500 ms later? If there is, just use an nsITimer or the setTimeout function to delay running this code . The Firefox window will be able to load sooner and your startup code will run almost instantaneously afterward, in parallel with the loading of the homepage or the saved tab session. The browser will now load faster, and your code will still load at startup for all practical purposes. The code is simple enough:
    4. +
+ +
// this is the function that is called in the load event handler.
+init : function() {
+  let that = this;
+  // run this later and let the window load.
+  window.setTimeout(function() { that.postInit(); }, 500);
+},
+
+postInit: function() {
+  // actual init code goes here.
+},
+
+ +

How can you tell it works? The Measuring Startup wiki page includes a relatively simple test you can use to compare a clean Firefox profile vs that profile with your add-on installed.

+ +

Page Loads

+ +

This is another critical route that many add-ons tap into. The Intercepting Page Loads section details several techniques to do this, and you should read all of them carefully to figure out which one you need. Some of these events are fired multiple times during a single page load, and having inefficient code in the event handlers can cause a noticeable delay that users may have hard time figuring out.

+ +

Look at the source samples in the article and notice how they mostly consist of nested if statements. This is what you should do first to make sure that you filter out all cases that don't interest you so that your add-on doesn't slow down other requests. A very common filter is the URL of the page, since most add-ons are limited to one or a few domains. Use regular expressions if you need to. Make sure your comparison code is as efficient as possible.

+ +

Finally, make sure all of your page load code is as efficient as possible. This can be tricky for some add-ons, like ad or script blockers that need to check a whitelist or blacklist. Nevertheless, loading pages is pretty important in Firefox, and users expect it to be fast. Try your best to keep it that way.

+ +

Other Recommendations

+ + diff --git "a/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_b_colon__instalar_y_desinstalar_scripts/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_b_colon__instalar_y_desinstalar_scripts/index.html" new file mode 100644 index 0000000000..4ee95d992b --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_b_colon__instalar_y_desinstalar_scripts/index.html" @@ -0,0 +1,51 @@ +--- +title: 'Apéndice B: Instalar y desinstalar Scripts' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_B:_Instalar_y_desinstalar_Scripts' +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_B:_Install_and_Uninstall_Scripts +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

Add-ons normally run code at startup, and as it is covered in the main tutorial, all you need is a load event handler and a little code. It is also common for an add-on to require to run a script only when it is installed for the first time, or every time it is updated. It can be used to write or copy necessary files to the profile folder, like the initial DB the add-on will use for storage. A few others require cleanup code to be run after the add-on is uninstalled. This appendix covers these cases with simple code that should work for most add-ons.

+ +

Install Scripts

+ +

Just like with a regular initialization function, we want a load event handler:

+ +
// rest of overlay code goes here.
+window.addEventListener(
+  "load", function() { XulSchoolChrome.BrowserOverlay.init(); }, false);
+
+ +

Then all we need is some persistent flag that ensures that the first run code is only run once. The best approach in this case is to use a preference, as explained in the Handling Preferences section. So, if we were to use FUEL, we can do the following in the init function:

+ +
init : function() {
+  let firstRunPref =
+    Application.prefs.get("extensions.xulschoolhello.firstRunDone");
+
+  if (!firstRunPref.value) {
+    firstRunPref.value = true;
+    // all the rest of the first run code goes here.
+  }
+}
+
+ +

In this case you would need to declare the first run preference in your default preferences file, with a default value of false. You should also change the preference value before you run any other first run code. Keep in mind that the user could have set multiple Firefox windows to open at startup, so there's a race condition on which window will run the first run code.

+ +

If you need to run code on every update, or some of them, the code would be very similar. Instead of a boolean preference, it would be best to use a string preference with the last-installed add-on version. And then do a version comparison to decide which code to run. The current version number can be hard-coded in the first run function, or you can use the Add-on Manager to dynamically get it. This can get tricky with the Firefox 4 AddonManager, so it's probably best to keep it simple.

+ +

Uninstall Scripts

+ +

There are two common cases for needing these: cleaning up local data and presenting an uninstall feedback form. Regarding local data, it is debatable if it is good practice to remove it or not. If an add-on is uninstalled and later installed again, it might be desirable for preferences and other settings to be kept. Another argument in favor of keeping that data is that Firefox doesn't delete its profile folders after it is uninstalled, so it would be consistent to keep it. On the other hand, local data that is no longer needed takes unnecessary disk space and can contain private information that users forget is there. It's up to the developer's discretion.

+ +

Uninstalling an add-on happens in 2 stages: first the add-on is flagged to be uninstalled, and then the add-on is actually removed. In the case of Bootstrapped Extensions, both steps happen at the same time. In the case of "traditional" extensions, like those explained in the tutorial, both steps happen at different times. In this case the user is told that Firefox needs to restart in order for the extension to be completely removed. Then the user has the option to restart right away, wait to restart whenever is convenient, or even cancel the uninstall operation. The add-on will not be completely removed until the browser is restarted.

+ +

So, in order to detect the first stage, you'll need to add an event listener using the addAddonListener method. The data parameter explains the action being performed.

+ +

If you detect your add-on is going to be uninstalled at this stage, it's a good time to show the uninstall feedback form. It is not a good time to clean up your files, at least not without prior user consent. Remember that the user can revert this decision. So, you should listen to other events, like canceling the operation, to make sure that you know what is going on. Set a boolean flag that indicates if your add-on is set to be uninstalled or not, and reset it when necessary.

+ +

The second stage is knowing when the application is actually going to be closed. Then you'll have reasonable certainty that the add-on will be removed and you can perform any cleanup operations safely. For this, you need to add an observer for the quit-application topic. This is when you'll know the application will close. Then you can check the flag you set up on the first stage and perform any necessary deletions. You shouldn't perform very time-consuming operations here, at least not without telling users what is going on.

diff --git "a/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html" new file mode 100644 index 0000000000..1fb0b53d94 --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_c_colon__evitar_usar_eval_en_los_add-ons/index.html" @@ -0,0 +1,210 @@ +--- +title: 'Apéndice C: Evitar usar eval en los Add-ons' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_C:_Evitar_usar_eval_en_los_Add-ons' +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_C:_Avoid_using_eval_in_Add-ons +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

Using eval in extensions is almost always unnecessary, and many times even a security vulnerability. Moreover, code using eval is harder to parse for a human mind, is often pretty complex, and relies on assumptions that are not necessarily true in the future or even now.

+ +

This article is aimed at presenting alternatives to common eval uses in add-ons and other Javascript code.

+ +

Add-on authors are strongly encouraged to update their code to eliminate all use of eval, no matter if the add-on is to be hosted in the Mozilla Add-ons Gallery or not. In order to host your add-on with Mozilla it is crucial to minimize or completely eliminate eval use in order to receive a positive review and have your add-on made public.

+ +

Parsing JSON

+ +

Mozilla provides native JSON support since Firefox 3. There is simply no need to parse JSON using eval. Additionally, parsing JSON retrieved from a remote location becomes a security vulnerability when parsed with the eval function. Basically, you are executing remote code with full chrome access; that is, introducing a remote code execution vulnerability. Even if you trust the remote server; for example, because it is one you rent and administer yourself, there is a huge security risk, because of, but not limited to:

+ + + +

Use Native JSON

+ +

Since Firefox 3.5 you should use native JSON. In Firefox 3.0, you may take a look at {{ Interface("nsIJSON") }} instead. Using native JSON has the added benefit that it is better when validating the input and also a lot faster.

+ +
Note: Do not use JSON parsers implemented in Javascript. These implementations are less efficient and often also contain serious security vulnerabilities. Such implementations are meant to be used within a very different security context, namely a website, where the origin of the data is usually known in all instances and where vulnerabilities would have a much smaller impact.
+ +

Passing around functions/code as strings

+ +

Often you'll want to pass functions or code to other functions, most notoriously setTimeout and addEventListener. Often this is achieved by a hack "function/code as string" technique.

+ +
// DO NOT USE
+setTimeout("doSomething();", 100);
+addEventListener("load", "myAddon.init(); myAddon.onLoad();", true);
+setInterval(am_I_a_string_or_function_reference_qmark, 100);
+
+ +

That in itself is certainly not elegant, but it may also become a security issue if you construct the passed code with externally provided data:

+ +
// DO NOT USE
+setTimeout("alert('" + xhr.responseText + "');", 100);
+// Attacker manipulated responseText to contain "attack!'); format_computer(); alert('done"
+setTimeout("alert('attack!'); format_computer(); alert('done');", 100);
+
+ +

As a general rule of thumb, just don't pass code around as strings and execute it by calling eval, setTimeout and friends.

+ +

Alternative: Use (anonymous) functions

+ +

You can always create a small anonymous function to pass around instead. Closures will ensure the code is still valid, even if your outer function already returned from execution.

+ +
addEventListener("load", function() { myAddon.init(); myAddon.onLoad(); }, true);
+function doXHR() {
+  //...
+  var response = xhr.responseText;
+  setTimeout(function() { alert(response); }, 100);
+}
+
+ +

Alternative: Use Function.bind

+ +

Function.bind is a new utility function that you may use to (partially) bind parameters to functions.

+ +
addEventListener("load", myAddon.init.bind(myAddon), true);
+setTimeout(alert.bind(null, xhr.responseText), 100);
+
+ +

Overriding/Extending existing functions

+ +

A common thing add-ons do during their initialization is overriding/extending existing browser functions by using Function.toString/Function.toSource and eval to "string-patch" the function body.

+ +
// DO NOT USE
+var functionBody = gBrowser.addTab.toSource();
+var afterBracket = functionBody.indexOf("{"} + 1;
+functionBody = functionBody.substring(0, afterBracket) + "myAddon.onAddTab(aURI);" + functionBody.substring(afterBracket);
+eval("gBrowser.addTab = " + functionBody);
+
+ +

Of course, this not only looks messy, but can be quite error prone.

+ + + +

Like with "Passing functions/code as strings" above, patching function to include some external data will create security vulnerabilities.

+ +

Alternative: Replace + Function.apply

+ +

You may replace the original function with a new function, keeping a reference to the original function which you then call from the new one.

+ +
(function() {
+  var _original = gBrowser.addTab; // Reference to the original function
+  gBrowser.addTab = function() {
+    // Execute before
+    try {
+        myAddon.onAddTab(arguments[0]);
+    } catch (ex) { /* might handle this */ }
+    // Execute original function
+    var rv = _original.apply(gBrowser, arguments);
+    // execute afterwards
+    try {
+      myAddon.doneAddTab(rv);
+    } catch (ex) { /* might handle this */ }
+
+    // return the original result
+    return rv;
+  };
+})();
+
+ +

This is admittedly more verbose, but at the same time it should be easier to understand.

+ + + +
Note: It is not safe to remove such an override again, as this method constitutes in a single-linked function chain. If you want to disable your overrides again, then use a flag indicating that, or similar. At the same time, it is also not safe to "un-string-patch" a function, for the exact same reason.
+ +
Note: There are still some scenarios where incompatibilities may arise, such as trying to cancel the function call under a certain set of conditions when other Add-ons have overridden the same function. Again, this is a problem with the "string-patch" method, too. How to handle this is inter-Add-on specific and not addressed in this article.
+ +

Triggering event handlers

+ +

Sometimes scripts might want to manually trigger an event handler that is defined directly in the XUL document. Consider the following XUL fragment throughout the rest of this section.

+ +
<menuitem id="mymenu" oncommand="executeSomething; executeSomethingElse();"/>
+<label id="mylabel" onclick="executeSomething; executeSomethingElse();"/>
+
+ +

Add-on authors commonly use eval to trigger the handlers.

+ +
// DO NOT USE
+eval(document.getElementById("mymenu").getAttribute("oncommand"));
+eval(document.getElementById("mylabel").getAttribute("onclick"));
+
+ +

Alternative: Dispatch real events

+ +

Dispatching real events has the added bonus that all other event listeners for that Element (and the corresponding bubbling/capturing chain) will fire as well, so this method will have the closed resemblance to a real user event.

+ +
// Fake a command event
+var event = document.createEvent("Events");
+event.initEvent("command", true, true);
+document.getElementById("mymenu").dispatchEvent(event);
+
+// Fake a mouse click
+var mouseEvent = document.createEvent("MouseEvents");
+event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+document.getElementById("mylabel").dispatchEvent(mouseEvent);
+
+ +

Please see the corresponding documentation on how to use and initialize particular event types.

+ +

Alternative: Element.doCommand()

+ +

Elements that have a command (oncommand) assigned will also have a working doCommand method.

+ +
document.getElementById("mymenu").doCommand();
+
+ +

Accessing properties via computed names

+ +

Not that common anymore, but still existing, are Add-Ons or other Javascript programs that access object properties using eval when the property name is not a literal, but computed on the fly.

+ +
//DO NOT USE
+eval("myAddon.phrases.word" + word + " = '" + phrase + "';");
+ +

Again, this is not only unnecessarily hard to parse for a human, but may also contain security vulnerabilities if you compute the names using external data.

+ +

Alternative: Using bracket-access to object properties

+ +

Object properties can always accessed using the bracket syntax:

+ +
obj["property"] === obj.property
+
+ +

Hence the following will just work without having to resort to eval.

+ +
myAddon.phrases["word" + word] = "phrase";
+
+ +

Special thanks

+ +

Special thanks goes to Wladimir Palant of Adblock Plus, who wrote an article years back which heavily inspired this one.

+ +

See also

+ + diff --git "a/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_d_colon__cargar_scripts/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_d_colon__cargar_scripts/index.html" new file mode 100644 index 0000000000..e282486a46 --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_d_colon__cargar_scripts/index.html" @@ -0,0 +1,304 @@ +--- +title: 'Apéndice D: Cargar Scripts' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_D:_Cargar_Scripts' +translation_of: 'Archive/Add-ons/Overlay_Extensions/XUL_School/Appendix_D:_Loading_Scripts' +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

Most add-ons and XUL Runner applications provide their primary functionality by loading and executing JavaScript code. Because there are such a diverse array of add-ons, and because the needs of developers have grown organically over time, the Gecko runtime provides a number of means to dynamically load and execute JavaScript files. Each of these means has its own advantages and disadvantages, as well as its own quirks which may trap the unwary. Below is an overview of the more common means of loading scripts, along with some of their primary advantages, disadvantages, quirks, and use cases.

+ +

The examples below which make use of the Services global assume that you're previously imported the Services.jsm module. As this module only exists on Firefox 4 and other Gecko 2-based platforms, the services in question will have to be manually loaded on other platforms.

+ +

 

+ +

<script> tags

+ +

 

+ +

XUL script tags are traditionally the primary means of loading scripts for extension developers. These tags are generally inserted into XUL overlay files or other XUL documents, after which they are automatically loaded into the context of the XUL window in question and executed immediately and synchronously.

+ +

Advantages

+ + + +

Disadvantages

+ + + +

Example

+ +

The following overlay will load the script “overlay.js” from the same directory as the overlay file into the window which it overlays. The script will be read with the UTF-8 encoding, based on the encoding of the overlay, and will execute as JavaScript version 1.8, based on the version specified in the script tag.

+ +
<?xml version="1.0" encoding="UTF-8"?>
+
+<!DOCTYPE overlay>
+
+<overlay id="script-overlay"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+    <script type="application/javascript;version=1.8" src="overlay.js"/>
+
+</overlay>
+ +

evalInSandbox

+ +

The Components.utils.evalInSandbox method may be used to load arbitrary code into Components.utils.Sandbox objects. JavaScript files or URLs may be loaded in this manner by first retrieving their contents into memory using an XMLHttpRequest. This is the method used by Jetpack's securable module system to load nearly all executable code.

+ +

Advantages

+ + + +

Disadvantages

+ + + +

Examples

+ +

The following code will execute a simple script in a Sandbox with the privilege level of the current content page. The globals of the current content window will be available in the scripts global scope. In stack traces, the script will appear to have been loaded from the file "zz-9://plural/zed/alpha", line 42.

+ +
// Use the current content window as the execution context.
+// To make properties defined by scripts executing on the page
+// available to your sandbox script, use content.wrappedJSObject
+// instead.
+let context = content;
+
+// Create the Sandbox
+let sandbox = Components.utils.Sandbox(context, {
+    // Make properties of the context object available via the
+    // script's global scope
+    sandboxPrototype: context,
+    // Wrap objects retrieved from the sandbox in XPCNativeWrappers.
+    // This is the default action.
+    wantXrays: true
+});
+
+// The script that will be executed:
+let script = String();
+
+// Evaluate the script:
+Components.utils.evalInSandbox(script, sandbox,
+                               // The JavaScript version
+                               "1.8",
+                               // The apparent script filename:
+                               "zz-9://plural/zed/alpha",
+                               // The apparent script starting line number:
+                               42);
+
+ +

The following code will execute a simple script loaded from a local file in the same directory as the current script. The script will execute in the same security context as the current script and will have access to the same globals, but any new globals it creates will be accessible only to the script itself. Objects passed out of the sandbox will not be wrapped in XPCNativeWrappers but will still be wrapped in inter-compartment proxies.

+ +
const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1",
+                                              "nsIXMLHttpRequest",
+                                              "open");
+
+function loadScript(name, context) {
+    // Create the Sandbox
+    let sandbox = Components.utils.Sandbox(context, {
+        sandboxPrototype: context,
+        wantXrays: false
+    });
+
+    // Get the caller's filename
+    let file = Components.caller.stack.filename;
+    // Strip off any prefixes added by the sub-script loader
+    // and the trailing filename
+    let directory = file.replace(/.* -> |[^\/]+$/g, "");
+    let scriptName = directory + name;
+
+    // Read the script
+    let xmlhttp = XMLHttpRequest("GET", scriptName, false);
+    xmlhttp.overrideMimeType("text/plain");
+    xmlhttp.send();
+    let script = xmlhttp.textContent;
+
+    // Evaluate the script:
+    Components.utils.evalInSandbox(script, sandbox,
+                                   "1.8", scriptName, 0);
+}
+
+
+// Use the current global object.
+// The following may be used instead at the top-level:
+//
+// let context = this
+if (Components.utils.getGlobalForObject)
+    // Gecko 2.x
+    var context = Components.utils.getGlobalForObject({});
+else
+    // Gecko 1.x
+    context = {}.__parent__;
+
+loadScript("script.js", context);
+
+ +

The Sub-Script Loader

+ +

The {{ interface("mozIJSSubScriptLoader") }} can be used to load local scripts from the chrome:, resource:, and file: protocols into any JavaScript object. Any new globals created by this script are defined as properties of this object. Additionally, any properties of the target object are available as variables in the script's global namespace, along with as any properties of the global associated with the target object. These scripts execute with the same privileges and restrictions of the global associated with the target object, and this method can therefore also be used when with Sandbox objects with the same effect as evalInSandbox and into content windows with the same effect as injecting script tags into their documents.

+ +

Advantages

+ + + +

Disadvantages

+ + + +

Examples

+ +

The following code will load a script into its own context. The script will execute with the security principal of and have access to the global properties of the current global.

+ +
let context = {};
+Services.scriptloader.loadSubScript("chrome://my-package/content/foo-script.js",
+                                    context, "UTF-8" /* The script's encoding */);
+
+ +

The following code will execute a simple script loaded from a local file in the same directory as the current script. The script will execute in the same security context as the current script and will have access to the same globals, but any new globals it creates will be accessible only to the script itself. Objects passed out of the sandbox will not be wrapped in XPCNativeWrappers but will still be wrapped in inter-compartment proxies.

+ +
function loadScript(name, context) {
+    // Create the Sandbox
+    let sandbox = Components.utils.Sandbox(context, {
+        sandboxPrototype: context,
+        wantXrays: false
+    });
+
+    // Get the caller's filename
+    let file = Components.caller.stack.filename;
+    // Strip off any prefixes added by the sub-script loader
+    // and the trailing filename
+    let directory = file.replace(/.* -> |[^\/]+$/g, "");
+
+    Services.scriptloader.loadSubScript(directory + name,
+                                        sandbox, "UTF-8");
+}
+
+loadScript("foo.js", this);
+
+ +

JavaScript modules

+ +

JavaScript modules are used to efficiently load scripts into their own global namespaces. Because these scripts are loaded from a bytecode cache, and the same scripts are loaded only once per session no matter how many times they are imported, this is one of the most performant methods of script loading.

+ +

Advantages

+ + + +

Disadvantages

+ + + +

Examples

+ +

The following code will import a module into the current global scope. All variables named in the target script's EXPORTED_SYMBOLS global array will be copied into the current execution context.

+ +
Components.utils.import("resource://my-package/my-module.jsm");
+
+ +

The following function will import an arbitrary module into a singleton object, which it returns. If the argument is not an absolute path, the module is imported relative to the caller's filename.

+ +
function module(uri) {
+    if (!/^[a-z-]+:/.exec(uri))
+        uri = /([^ ]+\/)[^\/]+$/.exec(Components.stack.caller.filename)[1] + uri + ".jsm";
+
+    let obj = {};
+    Components.utils.import(uri, obj);
+    return obj;
+}
+
+ +

Given the above code, the following code will import the module "my-module.jsm" from the current directory and define the symbols foo and bar from that module in the current scope. It will also import the symbol Services from the standard Services.jsm module.

+ +
const { Services } = module("resource://gre/modules/Services.jsm");
+const { bar, foo } = module("my-module");
+
+ +

DOM Workers: Worker and ChromeWorker

+ +

DOM Workers can be used to load scripts into their own global contexts which run in their own threads. In order to ensure thread safety, these contexts are extremely limited, can't be passed JavaScript objects, and have no access to the DOM. All communication between these contexts and outer contexts is marshalled through JSON encoding and decoding. ChromeWorkers also have access to ctypes and a limited number of thread safe XPCOM classes, but are otherwise limited to simple computation based on data passed via messages and XMLHttpRequests.

+ +

Advantages

+ + + +

Disadvantages

+ + + +

Jetpack Processes

+ +

nsIJetpack classes are very similar to DOM workers, except that modules execute in entirely separate processes rather than separate threads. Additionally, rather than directly loading files, scripts are executed by evaluating strings.

+ +

Advantages

+ + + +

Disadvantages

+ + diff --git "a/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_e_colon__dom_e_inserci\303\263n_html/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_e_colon__dom_e_inserci\303\263n_html/index.html" new file mode 100644 index 0000000000..66073bcc6b --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/ap\303\251ndice_e_colon__dom_e_inserci\303\263n_html/index.html" @@ -0,0 +1,244 @@ +--- +title: 'Apéndice E: DOM e inserción HTML' +slug: 'Mozilla/Tech/XUL/Escuela_XUL/Apéndice_E:_DOM_e_inserción_HTML' +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/DOM_Building_and_HTML_Insertion +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

Many add-ons need to dynamically generate DOM content, either XUL or HTML, from their scripts. For security reasons, and to prevent errors, care needs to be taken to avoid evaluating arbitrary text as HTML. Failure to do so can lead to execution or remote scripts, and in the worst cases to privilege escalation which can leave a user's PC open to remote attack.

+ +

Building DOM Trees

+ +

In most cases, DOM trees should be built exclusively with DOM creation methods. The following methods will all safely create a DOM tree without risk of remote execution.

+ +

E4X Templating

+ +

The following function can be used to generate DOM nodes from E4X XML objects. It has the advantage of appearing identical to ordinary HTML, but the disadvantage of being nearly exclusive to Firefox.

+ +
var HTML = Namespace("html", "http://www.w3.org/1999/xhtml");
+var XUL = Namespace("xul", "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+default xml namespace = HTML;
+function xmlToDOM(xml, doc, nodes) {
+   if (xml.length() != 1) {
+       let domnode = doc.createDocumentFragment();
+       for each (let child in xml)
+           domnode.appendChild(xmlToDOM(child, doc, nodes));
+       return domnode;
+   }
+   switch (xml.nodeKind()) {
+   case "text":
+       return doc.createTextNode(String(xml));
+   case "element":
+       let domnode = doc.createElementNS(xml.namespace(), xml.localName());
+       for each (let attr in xml.@*::*)
+           domnode.setAttributeNS(attr.namespace(), attr.localName(), String(attr));
+
+       for each (let child in xml.*::*)
+           domnode.appendChild(xmlToDOM(child, doc, nodes));
+       if (nodes && "@key" in xml)
+           nodes[xml.@key] = domnode;
+       return domnode;
+   default:
+       return null;
+   }
+}
+ +

When passed an XML literal and a document, it returns the DOM tree corresponding to the XML for that document. If passed a third argument, the DOM node created for any element with a "key" attribute, is stored in a property of the given object named for the "key" attribute's value.

+ +
default xml namespace = XUL;
+
+var href = "http://www.google.com/";
+var text = "Google";
+var nodes = {};
+document.documentElement.appendChild(
+    xmlToDOM(<hbox xmlns:html={HTML}>
+            <html:div>
+                <a href={href} target="_top" key="link">{text}</a>
+            </html:div>
+        </hhox>,
+        document, nodes);
+
+    nodes.link.addEventListener("click", function (event) { alert(event.target.href); }, false);
+ +

JSON Templating

+ +

For code which needs to be cross-browser compatible, a similar templating system can be used, based on JSON objects rather than E4X. It also has the advantage of being slightly more concise than the E4X variant, though no easier to read.

+ +
var namespaces = {
+    html: "http://www.w3.org/1999/xhtml",
+    xul: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+};
+
+jsonToDOM.defaultNamespace = namespaces.html;
+function jsonToDOM(xml, doc, nodes) {
+    function namespace(name) {
+       var m = /^(?:(.*):)?(.*)$/.exec(name);
+       return [namespaces[m[1]], m[2]];
+    }
+
+   function tag(name, attr) {
+       if (isArray(name)) {
+           var frag = doc.createDocumentFragment();
+           Array.forEach(arguments, function (arg) {
+               if (!isArray(arg[0]))
+                   frag.appendChild(tag.apply(null, arg));
+               else
+                   arg.forEach(function (arg) {
+                       frag.appendChild(tag.apply(null, name[i]));
+                   });
+           });
+           return frag;
+       }
+
+       var args = Array.slice(arguments, 2);
+       var vals = namespace(name);
+       var elem = doc.createElementNS(vals[0] || jsonToDOM.defaultNamespace,
+                                      vals[1]);
+
+       for (var key in attr) {
+           var val = attr[key];
+           if (nodes && key == "key")
+               nodes[val] = elem;
+
+           vals = namespace(key);
+           if (typeof val == "function")
+               elem.addEventListener(key.replace(/^on/, ""), val, false);
+           else
+               elem.setAttributeNS(vals[0] || "", vals[1], val);
+       }
+       args.forEach(function(e) {
+           elem.appendChild(typeof e == "object" ? tag.apply(null, e) :
+                            e instanceof Node    ? e : doc.createTextNode(e));
+       });
+       return elem;
+   }
+   return tag.apply(null, xml);
+}
+ +

In the above, the namespaces object defines the namespace prefixes which can be used in the given DOM tree. Event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes.

+ +
var href = "http://www.google.com/";
+var text = "Google";
+var nodes = {};
+document.documentElement.appendChild(
+    jsonToDOM(["xul:hbox", {},
+        ["div", {},
+            ["a", { href: href, key: "link",
+                    onclick: function (event) { alert(event.target.href); } },
+                text],
+            ["span", { class: "stuff" },
+                "stuff"]]],
+        document, nodes));
+
+alert(nodes.link);
+ +

jQuery Templating

+ +

For extensions which already use jQuery, it is possible to use its builtin DOM building functions for templating, though care must be taken when passing non-static strings to methods such as .append() and .html(). In most cases, .text() should be used instead of the latter. When using the jQuery constructor, only empty tags should be specified in order to avoid invoking the DOM parser.

+ +
var href = "http://www.google.com/";
+var text = "Google";
+ $("body").append(
+    $("<div>", { class: "foo" })
+        .append($("<a>", { href: href, text: text })
+                    .click(function (event) { alert(event.target.href) }))
+        .append($("<span>").text("Foo")));
+ +

innerHTML with HTML Escaping

+ +

This method is a last resort which should be used only as a temporary measure in established code bases. It is safe, though inefficient, to assign dynamic values to innerHTML if any dynamic content in the value is escaped with the following function:

+ +
function escapeHTML(str) str.replace(/[&"<>]/g, function (m) "&" + ({ "&": "amp", '"': "quot", "<": "lt", ">": "gt" })[m] + ";");
+ +

Note that quotation marks must be escaped in order to prevent fragments escaping attribute values, and that single quotes may not be used to quote attribute values in the fragment.

+ +
var href = "http://www.google.com/";
+var text = "Google";
+
+document.getElementById("target-div").innerHTML = '<div>\
+        <a href="' + escapeHTML(href) '" target="_top">' + escapeHTML(text) + '</a>\
+    </div>'
+ +

It needs to be stressed that this method should not be used in new code and is only a temporary measure to shore up legacy code bases.

+ +

Safely Generating Event Listeners and Scripts

+ +

It is occasionally necessary to generate event listeners and script fragments from dynamic content. Great care must be taken in these situations. Under no circumstances should code resembling 'callback("' + str + '")' appear anywhere in your add-on.

+ +

Closures

+ +

By far the best way to create dynamic event listeners is to use closures. The following two code fragments are roughly equivalent:

+ +
function clickify(elem, address) {
+    elem.addEventListener("click", function (event) { openWindow(address) }, false);
+}
+
+function clickify(elem, address) {
+    elem.onclick = function (event) { openWindow(address) };
+}
+ +

Multiple Attributes

+ +

Sometimes there is a need for event listeners to appear as attributes in the DOM. In these cases, multiple attributes should be used, one for each variable:

+ +
function clickify(elem, address) {
+    elem.setAttribute("href", address);
+    elem.setAttribute("onclick", "openWindow(this.getAttribute('href'))");
+}
+ +

Escaping Functions

+ +

When the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as uneval, String.quote, JSON.stringify, or Number. Generating scripts in this matter is deprecated and should be avoided wherever possible, but is relatively safe and sometimes acceptable.

+ +
function createScript(href, otherStuff) {
+    var script = function (href, otherStuff) {
+        doStuffWith(href);
+        doOtherStuff();
+        for (var someStuff in otherStuff)
+            doSomeMoreStuffWith(someStuff);
+    }
+
+    return script.toSource() + "(" + [String.quote(href), uneval(otherStuff)] + ")";
+}
+ +

Safely Using Remote HTML

+ +

In the above cases, we're working with text content that needs to appear in generated DOM. There are cases, however, where we need to safely display formatted HTML sent by a remote server. Fortunately, there is a safe and simple way to do this. The {{ ifmethod("nsIScriptableUnescapeHTML","parseFragment") }} method will convert a string to a document fragment while removing any scripts or other unsafe content in the process.

+ +
function ParseHTML(doc, html) {
+    return Components.classes["@mozilla.org/feed-unescapehtml;1"]
+                     .getService(Components.interfaces.nsIScriptableUnescapeHTML)
+                     .parseFragment(html, false, null, doc.documentElement);
+}
+ +

The returned fragment may be appended to any element in the given document.

+ +
document.body.appendChild(ParseHTML(document, xhr.responseText, xhr.channel.name);
+ +

See Also

+ + + +
+

Original Document Information

+ + +
+ +

 

diff --git "a/files/es/mozilla/tech/xul/escuela_xul/documentaci\303\263n_de_mozilla/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/documentaci\303\263n_de_mozilla/index.html" new file mode 100644 index 0000000000..0928dec065 --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/documentaci\303\263n_de_mozilla/index.html" @@ -0,0 +1,72 @@ +--- +title: Documentación de Mozilla +slug: Mozilla/Tech/XUL/Escuela_XUL/Documentación_de_Mozilla +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Mozilla_Documentation_Roadmap +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Notificaciones_de_usuario_y_alertas", "Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla") }}

+ +

Mozilla Documentation

+ +

Firefox extension development is still an immature discipline, with a developer base consisting mostly of hobbyists and just a few organized development groups. There's a great deal of free online documentation available on XUL and extension development, but finding it and turning it into useful information can be a daunting task. Knowing where to look is critical and non trivial. This tutorial was aimed at compiling all the right resources for extension development and putting them in the right context, but there's much more to learn, and knowing how to find it is part of what we felt was necessary to teach.

+ +

Let's look into the resources that have helped us the most.

+ +

The Mozilla Developer Center

+ +

This is the official and most extensive guide to everything related to Mozilla. MDC is where this tutorial is hosted, and where most of its links point to. It encompasses Firefox, other Mozilla products, Javascript, CSS, XUL, web and extension development guidelines, accessibility, usability, best practices... The list goes on. It's incredibly comprehensive, and its underlying Wiki technology makes it easy to expand and evolve with the help of the community.

+ +

Having said that, there are a few problems with it. First of all, the in-site search is not reliable, so we recommend using a search engine like Google, with queries such as "MDC Javascript Code Modules" or "Javascript code modules site:developer.mozilla.org". Secondly, there are several important articles that are very lacking in information, like the Preferences System page. And finally, what we mentioned in our XPCOM section: almost no documentation on XPCOM components. The documentation on interfaces is very complete, but it isn't nearly as useful as the documentation that existed at XULPlanet and was later taken down. XULPlanet allowed you to navigate between interfaces and their related components, which makes locating components very easy. Hopefully this will be corrected in the future. In the meantime, you can still navigate XULPlanet using the Wayback Machine.

+ +

MDC should be your first stop when looking for documentation. If you find it lacking or missing some piece of information, please consider adding it once you've found it. Everyone looking for it later will thank you for it.

+ +

The AMO Developer Hub

+ +

The AMO Developer Hub is a great guide for add-on developers. It includes links to tutorials and documentation, development tools, and most notably, the Mozilla Add-ons Forum. This is a great place to ask questions and have them answered by experienced developers. It also includes discussions on add-on monetization, job postings and a long list of add-on ideas waiting to be developed.

+ +

The Mozilla Source

+ +

Sometimes you need more than just a tutorial. There are various tricks that you can't learn anywhere, but you know that Firefox implements them in some way. In these cases you should dive into Mozilla's source code and try to locate the code you need. One way to do this is to look into your Firefox installation directory, maybe unpack a few JARs and see what's inside. But this is very awkward and limited. It would be much better to be able to search and navigate through the huge code base with some ease.

+ +

Luckily, Mozilla provides exactly that in the Mozilla Cross-Reference. The main index in this page gives you options to look into the different product branches in development at Mozilla. Make sure you pick the one that matches your target versions.

+ +

All of these provide advanced search capabilities, including regular expression search and file path search. You'll be able to navigate the full source tree, inspect the change history for all files, and link to specific code lines. It takes a little getting used to, specially learning how to choose the best search queries, but it's an invaluable resource of information.

+ +

Mozilla Blogs

+ +

Several Mozilla community members maintain blogs that are updated frequently, often including information on API changes, bug fixes, useful tools and future release plans. Many of the tips and tricks included in this tutorial were discovered by reading these blogs.

+ +

There are several useful feeds that you can follow using a feed reader, such as Thunderbird. Here are some important feeds you should consider following:

+ + + +

IRC and newsgroups

+ +

Mozilla developers use their IRC channels heavily. There are several help and development channels where you can discuss problems and other topics in real time with the people that have the answers. You'll need an IRC client in order to do this, and the Chatzilla extension works well for this purpose. Problems using IRC include: finding help when you have a big timezone difference with the United States, and no records of previously asked questions and their answers.

+ +

Another somewhat obscure communication channel is the Mozilla Newsgroups. They are also very diverse and active, and there's a good chance you'll get your queries answered. Thunderbird also comes in handy for reading and posting to the newsgroups. Another advantage is that discussions are archived and searchable through Google Groups.

+ +

Other

+ +

And finally, a couple resources you should also keep in mind:

+ + + +

Good luck!

+ +

{{ PreviousNext("Notificaciones_de_usuario_y_alertas", "Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git "a/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensi\303\263n/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensi\303\263n/index.html" new file mode 100644 index 0000000000..9fdbda1f36 --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/elementos_esenciales_de_una_extensi\303\263n/index.html" @@ -0,0 +1,417 @@ +--- +title: Elementos esenciales de una extensión +slug: Mozilla/Tech/XUL/Escuela_XUL/Elementos_esenciales_de_una_extensión +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Escuela_XUL/Introducción_a_las_extensiones_de_Firefox", "Escuela_XUL/Montando_un_ambiente_de_desarrollo") }}

+ +

El archivo install.rdf

+ +

En la última sección miramos a los contenidos de la extensión Hola Mundo. Ahora, miraremos sus archivos y su código, comenzando con el archivo install.rdf. Puedes abrirlo con cualquier editor de texto.

+ +

El archivo tiene un formato distinto del XML tradicional, llamado RDF. RDF solía ser el mecanismo central de almacenamiento para Firefox, pero está siendo reemplazado por un sistema de bases de datos más sencillo. Hablaremos de ambos más adelante en este tutorial.

+ +

Ahora, miremos a las partes importantes  del archivo.

+ +
+
+
<em:id>holamundo@xulschool.com</em:id>
+
+
+ +

Este es el identificador único para la extensión. Firefox necesita esto para distinguir tu extensión de otras extensiones, así que se requiere que tengas una ID única.

+ +

Hay dos estándares aceptados para las ids de las extensiones. Una es el formato email presente en el ejemplo de Hola Mundo, que sería algo como <nombreproyecto-name>@<tudominio>. El otro estándar es usar una cadena de texto UUID, la cuál es extremadamente única, y es muy improbable que sea duplicada. Los sistemas basados en Unix tienen una herramienta desde la línea de comandos llamada uuidgen que genera UUIDs. Estas también se pueden crear utilizando herramientas específicas para todos los sistemas. Los paréntesis que cierran son simplemente notación, y son una práctica común. Siempre y cuando tu id sea única, está bien usar cualquiera de las formas.

+ +
+
+
<em:name>XUL School Hello Worldem:name>
+<em:description>Welcome to XUL School!</em:description>
+<em:version>0.1</em:version>
+<em:creator>Appcoast</em:creator>
+<em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL>
+
+
+ +

Esta será la información que será mostrada antes y después de la que la extensión sea instalada, la que puedes ver en la ventana de Extensiones. La URL de la página principal puede ser visitada haciendo clic derecho en la extensión y eligiendo Visitar página principal. Hay muchas otras etiquetas que pueden ser añadidas, para contribuidores y traductores. La especificación completa del archivo install.rdf tiene todos los detalles.

+ +

Ya que las extensiones pueden ser traducidas en múltiples idiomas, suele ser necesario traducir la descripción de la extensión, o incluso su nombre. A partir de Firefox 3 y superior, una descripción y nombres con localización específica se puede añadir de la siguiente manera:

+ +
+
+
<em:localized>
+  <Description>
+    <em:locale>es-ES</em:locale>
+    <em:name>XUL School Hola Mundo</em:name>
+    <em:description>¡Bienvenido a XUL School!</em:description>
+  </Description>
+</em:localized>
+
+
+ +

La cadena de texto es-ES indica que esta es la localización para española (es) para España (ES). Puedes añadir tantos <em:localized> como necesites Para Firefox 2, localizar este archivo es un poco más complicado. Hablaremos de la localizacion más adelante en esta sección.

+ +
+
+
<em:type>2</em:type>
+
+
+ +

Esto especifica que la extensión se instala como una extensión (y no como un tema, por ejemplo). Puedes leer los distintos tipos disponibles en la  especificación de install.rdf.

+ +
+
+
<em:targetApplication>
+  <Description>
+    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+    <em:minVersion>3.0</em:minVersion>
+    <em:maxVersion>6.0a1</em:maxVersion>
+  </Description>
+</em:targetApplication>
+
+
+ +

Este nodo especifica a qué versiones apunta la extensión, especialmente Firefox, desde la versión 3.0 hasta las versiones experimentales de Firefox 6. La UUID es la ID única de Firefox. Otras aplicaciones y aplicaciones basadas en Mozilla como Thunderbird o Seamonkey tienen las suyas propias. Puedes tener una extensión que funcione en múltiples aplicaciones y versiones. Por ejemplo, si creas una extensión para Firefox, normalmente se debería hacer el pequeño esfuerzo para portarla a Flock o SeaMonkey, los cuáles tienen funciones y UI similares.

+ +

La versión mínima y máxima especifica el rango en el cuál la extensión puede ser instalada. Aquí hay más sobre el formato de la versión. Si la aplicación o el rango de versiones no coinciden, no podrás instalar la aplicación, o la aplicación se instalará desactivada. Los usuarios pueden desactivar la comprobación de versiones a través de las preferencias o a través de extensiones como Add-on Compatibility Reporter.

+ +

Esta es toda la información que Firefox y otras aplicaciones de Mozilla necesitan para instalar una extensión. Cualquier error o información omitida causará un error en el proceso de instalación, o la extensión se instalará como desactivada.

+ +

El archivo chrome.manifest

+ +
+

Chrome es el conjunto de elementos gráficos para el usuario de la ventana de la aplicación que están fuera del contenido de la ventana. Barras de herramientas, de menús, de progreso y de título son ejemplos de elementos que son parte de chrome.

+
+ +

Extraído de Chrome Registration.

+ +

En otras palabras, el chrome es todo lo que ves en Firefox. Todas las ventanas de Firefox pueden verse en dos partes: (1) la chrome y (2) la posible área de contenido, como aquella que muestra las páginas web en una pestaña de Firefox. Las ventanas como el administrador de extensiones o la ventana de descargas son puro chrome. La mayoría del código reside en la carpeta chrome, como en el ejemplo de Hola Mundo.

+ +

Los archivos chrome están empacados en un archivo JAR, normalmente nombrados tras la extensión. No es necesario empacar los archivos chrome, pero es una práctica común y recomendada por razones de rendimiento.

+ +

 

+ +

Como hemos visto en la estructura de directorios de la extensión desempacada, la chrome está compuesta de 3 secciones: content, locale y skin. Estas 3 son necesarias para la mayoría de las extensiones. Si abrimos el archivo chrome.manifest (de nuevo, cualquier editor de texto servirá), veremos que las 3 secciones se mencionan:

+ +
+
+
content   xulschoolhello              jar:chrome/xulschoolhello.jar!/content/
+skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/
+locale    xulschoolhello  en-US       jar:chrome/xulschoolhello.jar!/locale/en-US/
+
+
+ +

El archivo chrome.manifest le dice a Firefox donde mirar para los archivos chrome. El texto contiene varios espacios para que parezca una tabla, pero no es necesario. El parseador ignorará los espacios repetidos.

+ +

La pimera línea le dice a Firefox que está siendo declarado (content, skin, locale, u otros que veremos más adelante). La segunda es el nombre del paquete, el cuál explicaremos en breve. Los paquetes skin y locale tienen un tercer valor para especificar que localización o tema están extendiendo. Puede haber múltiples temas y entradas de localización en relación a distintos temas y localizaciones. El caso más común es tener una entrada skin para el skin global, classic/1.0, y múltiples entradas locale, una para cada traducción. Finalmente, la localización es especificada.
+ Nótese del esquema jar; le dice a Firefox que mire dentro del archivo JAR y lea los archivos del camino correcto. Si quieres tener una extensión con un directorio chrome desempacado, sólo necesitas cambiar los lugares a algo como chrome/content/.

+ +

 

+ +

Hay algunas opciones adicionales que pueden ser incluidas en las entradas del archivo chrome.manifest. Están documentadas en la página de Chrome Registration. Notablemente, podemos tener distintas entradas que sean específicas para cada SO. Esto es importante, especialmente en Firefox 3 y versiones superiores, donde la apariencia del navegador es muy diferente para cada sistema operativo. Si nuestra extensión necesitase parecer diferente en los sistemas mayoritarios, podríamos cambiar el archivo de manifiesto para que incluyese esto:

+ +
+
+
content   xulschoolhello              jar:chrome/xulschoolhello.jar!/content/
+skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/unix/
+skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/mac/ os=Darwin
+skin      xulschoolhello  classic/1.0 jar:chrome/xulschoolhello.jar!/skin/win/ os=WinNT
+locale    xulschoolhello  en-US       jar:chrome/xulschoolhello.jar!/locale/en-US/
+
+
+ +

De esta manera podemos tener temas distintos para Windows, Mac OS X, y Linux (además de otros sistemas similares a unix), cada uno definido en un directorio separado. Ya que la mayoría de los sistemas están basados en Unix, el tema "unix" es el utilizado por defecto, sin banderas.

+ +

El Chrome

+ +

Como se ha mencionado antes, el chrome se compone de 3 secciones: contenido, localizaciones y temas. El contenido es la sección mas importante, ya que tiene la interfaz de usuario (XUL) y archivos de scripts (JS). La sección de temas contiene los archivos que definen la mayoría del aspecto y la sensación de la UI (incluyendo CSS e imágenes, como las páginas web). Finalmente, la sección de localización incluye todos los textos utilizados en la extensión, en DTD y archivos de propiedades. Esta división permite a otros desarrolladores crear temas que reemplacen pieles, y traductores para crear localizaciones en distintos idiomas, todo esto sin tener que cambiar tu extensión o tu código. Esto le da a las extensiones de Firefox gran flexibilidad.

+ +

Se accede a los archivos chrome  a través del protocolo chrome. Las URIs chrome se definen así:

+ +
+
+
chrome://packagename/section/path/to/file
+
+
+ +

Así que, por ejemplo, si quiero acceder al archivo browserOverlay.xul en la extensión, la URI chrome sería chrome://xulschoolhello/content/browserOverlay.xul. Si tienes demasiados archivos en el contenido y quieres organizarlos en subdirectorios, no necesitas cambiar nada en chrome.manifest, todo lo que necesitas es añadir el camino correcto tras content en la URI. Los temas y localizaciones funcionan de la misma manera, y no necesitas especificar sus nombre. Así que, para acceder al archivo DTD en la extensión Hola Mundo, el camino chrome es chrome://xulschoolhello/locale/browserOverlay.dtd. Firefox sabe qué localización buscar.

+ +

Aquí tenemos un experimento interesante. Abre una pestaña nueva en Firefox, teclea chrome://mozapps/content/downloads/downloads.xul en la barra de notificaciones y pulsa ENTRAR. ¿Sorprendido? ¡Acabas de abrir la ventana de Descargas en tu pestaña de Firefox! Puedes acceder a cualquier archivo chrome simplemente tecleando su URI en la barra de direcciones. Esto puede ser útil si quieres inspeccionar archivos de script que son parte de Firefox, u otras extensiones, por ti sólo. La mayoría de estos archivos se abren como archivos de texto, a excepción de los archivos XUL, que se ejecutan y muestran como normalmente los verías en una ventana.

+ +

Contenido

+ +

Hay dos archivos de contenido en el directorio de contenido. Miremos el primer archivo XUL.

+ +

Los archivos XUL son archivos XML que definen la interfaz gráfica de usuario de los elementos en Firefox y las extensiones de Firefox. XUL fue inspirado por HTML, así que verás bastantes similitudes entre ambos. De todos modos, XUL es también una mejora sobre HTML, habiendo aprendido de los errores cometidos durante la evolución de HTML. XUL te permite crear interfaces más ricas e interactivas que las que puedas crear con HTML, o al menos XUL lo hace más fácil.

+ +

Los archivos XUL normalmente definen una de dos cosas: ventanas o superposiciones. El archivo que has abierto antes, downloads.xul, tiene el código que define la ventana de Descargas. El archivo XUL incluido en la extensión Hola Mundo tiene una superposición. Una superposición extiende una ventana ya existente, añadiendo nuevos elementos a esta o reemplazando algunos de los elementos que tiene. La línea que nos hemos saltado en el archivo  chrome.manifest declara que este archivo XUL es una superposición para la ventana principal del navegador.

+ +
+
+
overlay chrome://browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul
+
+
+ +

Con esta línea, Firefox sabe que necesita tomar el contenido de browserOverlay.xul y superponerlo sobre la ventana principal del navegador, browser.xul. Puedes declarar overlays para cualquier ventana o diálogo en Firefox, pero superponer la ventana principal del navegador es el caso más común.

+ +

Ahora echemos un vistazo a los contenidos de nuestro archivo XUL. Nos saltaremos las primeras líneas porque se refieren al tema y la localización, las cuales cubriremos más tarde.

+ +
+
+
<overlay id="xulschoolhello-browser-overlay"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+
+ +

El elemento raíz en el archivo es un overlay. Otros documentos XUL usan la etiqueta window o dialog. El elemento tiene una id única, la cuál deberías usar en la mayoría de los elementos en tu XUL. El segundo atributo es el espaciado de nombres, lo cuál es algo que siempre deberías definir en tu elemento raíz. Esto dice que este nodo y todos sus nodos hijos son XUL. Sólo necesitas cambiar las declaraciones del espaciado de nombres cuando combines distintos tipos de contenidos, como XUL con HTML o SVG.

+ +
+
+
Es probable que te hayas dado cuenta del nombre que hemos usado en distintos lugares, así como la id xulschoolhello-browser-overlay. Este es el espaciado de nombres estándar que utilizamos para evitar conflictos con Firefox y otras extensiones, así como hacer algunas tareas de desarrollo más sencillas. Usamos el mismo espaciado de nombres en todas las ids y clases de estilo de los elementos de superposición porque serán mezclados con otros elementos en la ventana principal del navegador. Si usásemos ids genéricas como container o input, estas entrarían en conflicto con las ids usadas dentro de Firefox, o las ids de otras extensiones de superposición. Usando espaciado de nombres minimiza los problemas de compatibilidad con otras extensiones. Usamos camel casing para los nombres de archivos, y todo en minúsculas con barras para las ids de elementos y los nombres de clases de los estilos CSS.
+
+
+ +
+
+
<script type="application/x-javascript"
+  src="chrome://xulschoolhello/content/browserOverlay.js" />
+
+
+ +

Al igual que en HTML, esto incluye un script en JavaScript. Puedes tener tantos elementos scripts en un archivo XUL como necesites. Miraremos su código más tarde.

+ +
+
+
También es posible que te hayas dado cuenta en el formato de nuestro código, y preguntarte sobre las reglas que seguimos. Nuestra regla general es que la longitud de la línea no sea superior a 80 caracteres. Esto puede parecer muy restrictivo, sobre todo en los archivos XML, pero este número ha sido elegido para permitir a casi todos los editores de texto que manejen estos archivos de manera sencilla. Incluso un editor de textos antiguo desde la línea de comandos funciona bien que cortan sus líneas antes de los 80 caracteres. La tabulación es muy directa: 2 espacios en blanco para indentar. Nunca usamos caracteres TAB, a excepción de los Makefiles, los cuáles cubriremos más adelante. La mayoría de nuestros estándares de código se basan en los estándares de Mozilla u otros conocidos.
+
+
+ +

Nos saltaremos algo de código qie se cubrirá en la sección de localización, moviéndonos así a la parte importante del contenido:

+ +
+
+
<menubar id="main-menubar">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</menubar>
+
+
+ +

Este es el código que añade el menú de Hola Mundo a la ventana del navegador. Para escribir este código, necesitamos algo de conocimiento sobre el código XUL en browser.xul. Necesitábamos saber que la id del menú principal es main-menubar. Estamos añadiendo un menú nuestro propio, y diciéndole a Firefox que lo añada a la barra de menú principal, justo después del menú de ayuda. Ese es el propósito del atributo:

+ +
+
+
insertafter="helpMenu"
+
+
+ +

helpMenu es la id del elemento del menú que corresponde al menú de Ayuda en la ventana principal del navegador. Más adelante veremos como podemos encontrar cosas como las ids de los elementos del navegador, pero por ahora miraremos a los elementos que componen el menú de Hola Mundo.

+ +

El elemento menubar representa la barra de menús que normalmente ves arriba del todo de una ventana de aplicación. La ventana principal de Firefox tiene una, pero pocas otras ventanas tienen. También es raro para ventanas adicionales de una extensión tengan sus propias barras de menú.

+ +

Hemos añadido el menú de Hola Mundo justo en la "raíz" de la barra de menús así que sería muy fácil para ti localizarlo, pero no es una práctica recomendada. Imaginemos si todas las extensiones añadieran menús a la barra de menús de arriba; teniendo unas pocas extensiones haría que el menú pareciese como un salpicadero de un avión, lleno de opciones. El lugar recomendado para los menús de extensiones es bajo el menú de Herramientas, así que el código se parecería a este:

+ +
+
+
<menupopup id="menu_ToolsPopup">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertafter="javascriptConsole,devToolsSeparator">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</menupopup>
+
+
+ +

Estamos superponiendo un menú que está más adentro en nuestro árbol XUL, pero no parece importar porque todo lo que necesitamos es la id del elemento que queremos superponer. En estado es el elemento menupopup que está dentro del elemento del menú de Herramientas. El atributo insertafter le dice a Firefox que añada el menú debajo del objeto de la Consola de Errores (formalmente conocida como la Consola de JavaScript) en el menú de Herramientas, como se recomienda en la Extension Etiquette page. Discutiremos más de los menús más adelante en este tutorial. Por ahora vamos a centrarnos en la siguiente línea:

+ +
+
+
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"
+
+
+ +

This attribute defines an event handler. The command event is the most frequently used in Firefox, since it corresponds to the main action for most UI elements. The value of the attribute is JavaScript code that invokes a function. This function is defined in the JS file that was included with the script tag. The JS function will be called once the user clicks on the menu item in the Hello World menu. All event handlers define a special object named event, which is usually good to pass as an argument to the function. Event handlers are explained in greater depth further ahead.

+ +

Now let's look at the JavaScript file and see what's going on when the event is fired.

+ +
+
+
/**
+ * XULSchoolChrome namespace.
+ */
+if ("undefined" == typeof(XULSchoolChrome)) {
+  var XULSchoolChrome = {};
+};
+
+
+ +

The XULSchoolChrome namespace is defined. All objects and variables we define in this JavaScript are global, meaning that scripts in Firefox and other extensions can see them and interact with them. This also means that if we define an object called MenuHandler or some other generic name, it's likely going to conflict with an existing object. What we do here is define a single global object: XULSchoolChrome. Now we know that all of our objects are inside this object, which is unlikely to be duplicated or overwritten by other extensions.

+ +

You can read more about the typeof operator. If you're unfamiliar with JavaScript or this particular syntax, initializing an object as {} is the equivalent of initializing it to new Object().

+ +
+
+
/**
+ * Controls the browser overlay for the Hello World extension.
+ */
+XULSchoolChrome.BrowserOverlay = {
+
+
+ +

Finally, BrowserOverlay is our object. Naming and referencing  objects in such a long and verbose manner can feel uncomfortable at first, but it's worth the cost.

+ +
+
+
We use Javadoc style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.
+
+
+ +
+
+
sayHello : function(aEvent) {
+  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
+  let message = stringBundle.getString("xulschoolhello.greeting.label");
+
+  window.alert(message);
+}
+
+
+ +

And, finally, this is our function declaration. Three lines of code are all we need for it to work. The first line in the body of the function declares a variable that will hold the stringbundle element defined in the overlay. The variable is declared using let, which is similar to var but with more restricted scope. Here you can read more about let declarations. It's worth noting that this is a relatively new addition to JavaScript in Firefox and you should use var if you're creating an extension compatible with very old versions.

+ +

Just like in regular JS, we can use the DOM (Document Object Model) in order to manipulate the XUL document. First we get a reference of the stringbundle element in the document. This is a special element that allows us to obtain localized strings dynamically, by only providing a "key" that identifies the string. This is what we do on the second line. We call the getString method of the bundle element and get the localized message to be displayed. We then call the window.alert function with the message, just like we would do in an HTML document.

+ +

Locale

+ +

There are two types of locale files: DTD and properties, and in this example we use them both. DTD is the most efficient way of showing text in XUL, so you should use it whenever possible. It is somewhat inflexible so it can't be used for dynamically generated text, hence the need for an alternate way of getting localized strings.

+ +

Looking back at the menu code, you probably noticed some attributes such as this:

+ +
+
+
label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;"
+
+
+ +

These attributes define the text that you see on the menus, and they are string keys that are defined in our DTD file, browserOverlay.dtd. The DTD file was included in the XUL file with the following code:

+ +
+
+
<!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" >
+
+
+ +

And in the DTD file you can see the association between keys and localized strings:

+ +
+
+
<!ENTITY xulschoolhello.hello.label            "Hello World!">
+<!ENTITY xulschoolhello.helloMenu.accesskey    "l">
+<!ENTITY xulschoolhello.helloItem.accesskey    "H">
+
+
+ +

Notice that on the XUL file you enclose the string key with & and ; while on the DTD file you only specify the key. You may get weird parsing errors or incorrect localization if you don't get it right.

+ +

Access keys are the shortcuts that allow you to quickly navigate a menu using only the keyboard. They are also the only way to navigate a menu for people with accessibility problems, such as partial or total blindness, or physical disabilities that make using a mouse very difficult or impossible. You can easily recognize the access keys on Windows because the letter that corresponds to the access key is underlined, as in the following image:

+ +
+

+
+ +

Most user interface controls have the accesskey attribute, and you should use it. The value of the access key is localized because it should match a letter in the label text. You should also be careful to avoid access key repetition. For example, within a menu or submenu, access keys should not be repeated. In a window you have to be more careful picking access keys because there are usually more controls there. You have to be specially careful when picking access keys on an overlay. In our case, we can't use the letter "H" as an accesskey in the Main menu item, because it would be the same as the access key in the Help menu. Same goes with "W" and the Window menu on Mac OS. So we settled on the letter "l".

+ +

DTD strings are resolved and set when the document is being loaded. If you request the label attribute value for the Hello World menu using DOM, you get the localized string, not the string key. You cannot dynamically change an attribute value with a new DTD key, you have to set the new value directly:

+ +
+
+
let helloItem = document.getElementById("xulschoolhello-hello-menu-item");
+
+// The alert will say "Hello World!"
+alert(helloItem.getAttribute("label"));
+// Wrong
+helloItem.setAttribute("label", "&xulschoolhello.hello2.label;");
+// Better
+helloItem.setAttribute("label", "Alternate message");
+// Right!
+helloItem.setAttribute("label", someStringBundle.getString("xulschoolhello.hello2.label"));
+
+
+ +

This is the reason DTD strings are not a solution for all localization cases, and the reason we often need to include string bundles in XUL files:

+ +
+
+
<stringbundleset id="stringbundleset">
+  <stringbundle id="xulschoolhello-string-bundle"
+    src="chrome://xulschoolhello/locale/browserOverlay.properties" />
+</stringbundleset>
+
+
+ +

The stringbundleset element is just a container for stringbundle elements. There should only be one per document, which is the reason why we overlay the stringbundleset that is in browser.xul, hence the very generic id. We don't include the insertbefore or insertafter attributes because the ordering of string bundles doesn't make a difference. The element is completely invisible. If you don't include any of those ordering attributes in an overlay element, Firefox will just append your element as the last child of the parent element.

+ +

All you need for the string bundle is an id (to be able to fetch the element later) and the chrome path to the properties file. And, of course, you need the properties file:

+ +
+
+
xulshoolhello.greeting.label = Hi! How are you?
+
+
+ +

The whitespace around the equals sign is ignored. Just like in install.rdf, comments can be added using the # character at the beginning of the line. Empty lines are ignored as well.

+ +

You will often want to include dynamic content as part of localized strings, like when you want to inform the user about some stat related to the extension. For example: "Found 5 words matching the search query". Your first idea would probably be to simply concatenate strings, and have one "Found" property and another "words matching..." property. This is not a good idea. It greatly complicates the work of localizers, and grammar rules on different languages may change the ordering of the sentence entirely. For this reason it's better to use parameters in the properties:

+ +
+
+
xulshoolhello.search.label = Found %S words matching the search query!
+
+
+ +

Then you use getFormattedString instead of getString in order to get the localized string. Thanks to this we don't need to have multiple properties, and life is easier for translators. You can read more about it on the Text Formatting section of the XUL Tutorial. Also have a look at the Plurals and Localization article, that covers a new localization feature in Firefox 3 that allows you to further refine this last example to handle different types of plural forms that are also language-dependent.

+ +

Skin

+ +

Styling XUL is very similar to styling HTML. We'll look into some of the differences when we cover the XUL Box Model, and other more advanced topics. There isn't much styling you can do to a minimal menu and a very simple alert message, so the Hello World extension only includes an empty CSS file and the compulsory global skin file:

+ +
+
+
<?xml-stylesheet type="text/css" href="chrome://global/skin/"  ?>
+<?xml-stylesheet type="text/css"
+  href="chrome://xulschoolhello/skin/browserOverlay.css"  ?>
+
+
+ +

The global skin CSS file holds the default styles for all XUL elements and windows. Forgetting to include this file in a XUL window usually leads to interesting and often unwanted results. In our case we don't really need to include it, since we're overlaying the main browser XUL file, and that file already includes this global CSS. At any rate it's better to always include it. This way it's harder to make the mistake of not including it. You can enter the chrome path in the location bar and inspect the file if you're curious.

+ +

This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.

+ +

Exercise

+ +

Change the welcome message that is displayed in the alert window and move the Hello World menu to the Tools Menu, where it belongs. Repackage the XPI and re-install it. You can just drag the XPI file to the browser and it will be installed locally. Test it and verify your changes worked. If you run into problems at installation, it's likely that you didn't reproduce the XPI structure correctly, maybe adding unnecessary folders. Note that on Firefox 4 and above, on Windows and some Linux distributions, the Tools menu is hidden by default. It can be enabled using the Alt key.

+ +

Once you're done, you can look at this reference solution: Hello World 2.

+ +

{{ PreviousNext("Escuela_XUL/Introducción_a_las_extensiones_de_Firefox", "Escuela_XUL/Montando_un_ambiente_de_desarrollo") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html b/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html new file mode 100644 index 0000000000..bc80d6b948 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/enlazando_contenido_remoto/index.html @@ -0,0 +1,231 @@ +--- +title: Enlazando contenido remoto +slug: Mozilla/Tech/XUL/Escuela_XUL/Enlazando_contenido_remoto +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Connecting_to_Remote_Content +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Escuela_XUL/Interceptando_cargas_de_página", "Escuela_XUL/Personalizar_elementos_XUL_con_XBL") }}

+ +

Using XMLHttpRequest

+ +

XMLHttpRequest is an API for transferring XML between a local script and a remote server via HTTP. It is an integral part of the modern web, and all major browsers support it. Besides XML, it can be used to retrieve data in other formats, for example JSON, HTML and plain text. In this section we'll look into the XML and JSON communication mechanisms.

+ +
let url = "http://www.example.com/";
+let request = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+              .createInstance(Components.interfaces.nsIXMLHttpRequest);
+request.onload = function(aEvent) {
+  window.alert("Response Text: " + aEvent.target.responseText);
+};
+request.onerror = function(aEvent) {
+   window.alert("Error Status: " + aEvent.target.status);
+};
+request.open("GET", url, true);
+request.send(null);
+
+ +

In this example we demonstrate how to make a XMLHttpRequest call in asynchronous mode. You can see that an instance of the XMLHttpRequest class is created and it holds all functionality for making a request. We create this instance using XPCOM instead of the usual way (new XMLHttpRequest()) because this way works both in chrome and non-chrome code.

+ +

Following initialization, onload and onerror handlers are registered to a callback function to handle the response returned from the remote server. In both cases aEvent.target is an {{ interface("nsIXMLHttpRequest") }}. In the onload callback function, the responseText parameter contains the server response as text.

+ +

If the response is an XML document, the responseXML property will hold an XMLDocument object that can be manipulated using DOM methods. Sometimes the server doesn't specify an XML Content-Type header, which is necessary for the XML parsing to happen automatically. You can use overrideMimeType to force the response to be parsed as XML.

+ +
request.overrideMimeType("text/xml"); // do this before sending the request!
+
+ +

The open method takes two required parameters: the HTTP request method and the URL to send the request. The HTTP request method can be "GET", "POST" or "PUT". Sending a POST request requires you to set the content type of the request and to pass the post data to the send() method as below.

+ +
request.open("POST", url, true);
+request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+request.send("data=hello&version=2");
+
+ +

The third parameter for the open method specifies whether the request should be handled asynchronously or not. In asynchronous mode code execution continues immediately after the send call. In synchronous mode the code and user interface are blocked while waiting for a response to come back.

+ +
Note: Requests can take a long time to process and you don't want users to be stuck waiting while a request is obtained and processed. Therefore, it is very important that XMLHttpRequest calls are always done asynchronously.
+ +

Now let's look at the most common types of content you can use to communicate with remote servers.

+ +

JSON content

+ +

JSON is a very lightweight and simple data representation format, similar to the object representation used in JavaScript. Unlike JavaScript, the JSON format doesn't allow any kind of code that can be run, only data.

+ +

JSON used to be risky in terms of security because the favored way of parsing it was to use the JavaScript eval function. Since eval executes any code contained in the string, workarounds had to be devised in order to close security holes. Luckily, Firefox now provides a few alternatives for extension developers. The JSON page explains in detail how to parse JSON data in different versions of Firefox and other applications.

+ +

Assume we need to parse the following data:

+ +
{"shops": [{"name": "Apple", "code": "A001"}, {"name": "Orange"}], "total": 100}
+
+ +

When the onload callback function is called, the response text is converted into a JS object using the parse method. You can then use this object like any other JavaScript objects in your code.

+ +
request.onload = function(aEvent) {
+  let text = aEvent.target.responseText;
+  let jsObject = JSON.parse(text);
+
+  window.alert(jsObject.shops[1].name); // => "Orange"
+  window.alert(jsObject.total);         // => 2;
+};
+
+ +

The JavaScript object can also be serialized back with the stringify method.

+ +
let string = JSON.stringify(jsObject);
+
+ +

XML content

+ +

XML is possibly the most popular data interchange format. Let's assume that the XML returned from remote server is this:

+ +
<?xml version="1.0"?>
+<data>
+  <shops>
+    <shop>
+      <name>Apple</name>
+      <code>A001</code>
+    </shop>
+    <shop>
+      <name>Orange</name>
+    </shop>
+  </shops>
+  <total>2</total>
+</data>
+
+ +

When a valid XML response comes back from the remote server, the XML document object can be manipulated using different DOM methods, to display the data in the UI or store it into a local datasource.

+ +
request.onload = function(aEvent) {
+  let responseXML = aEvent.target.responseXML;
+  let rootElement = responseXML.documentElement;
+
+  if (rootElement && "parseerror" != rootElement.tagName) {
+    let shopElements = rootElement.getElementsByTagName("shop");
+    let totalElement = rootElement.getElementsByTagName("total")[0];
+
+    window.alert(shopElements[1].getElementsByTagName("name")[0].firstChild.nodeValue); // => Orange
+    window.alert(totalElement.firstChild.nodeValue);                                     // => 2
+  }
+};
+
+ +

Using DOM functions is good for simple XML documents, but DOM manipulation code can become too complicated if the documents are more complex. There are a couple of tools you can use to process these documents more efficiently:

+ +

Using XPath

+ +
+

XPath stands for XML Path Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an XML document.

+
+ +

Taken from the XPath page.

+ +

You can use XPath to quickly access specific nodes in an XML or HTML document with a simple query mechanism. XPath can also be used to extract information from web pages once they load, along with the page load interception techniques discussed previously.

+ +

XPath is very useful for cases when you're receiving large and complex XML files, and you only need some of the data contained in them. Using XPath to parse a complete XML document is probably not a good idea performance-wise.

+ +

Using XSLT

+ +

XSLT (eXtensible Stylesheet Language Transformations) is another tool used to manipulate XML documents and transform them into other forms of text output, such as HTML, XUL, and so on.

+ +

We can not cover all transformations to various output formats, so we'll just look into converting an XML document to XUL.

+ +

First you need to create an XSLT stylesheet that acts as a template. This template will transform the XML you receive (in our case, the example XML document above) and convert it into XUL. The XSLT tutorial contains details for building these templates.

+ +
<?xml version="1.0" encoding="utf-8"?>
+<xsl:stylesheet version="1.0"
+  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <xsl:template match="/data">
+    <xul:vbox>
+      <xsl:for-each select="shops/name">
+        <xul:hbox>
+          <xul:label value="Name:" />
+          <xul:label>
+            <xsl:value-of select="." />
+          </xul:label>
+        </xul:hbox>
+      </xsl:for-each>
+      <xul:hbox>
+        <xul:label value="Total:" />
+        <xul:label>
+          <xsl:value-of select="total" />
+        </xul:label>
+      </xul:hbox>
+    </xul:vbox>
+  </xsl:template>
+</xsl:stylesheet>
+
+ +

Next you need to read the XSLT stylesheet as a file stream and parse it into a document object. After that, the XSLT stylesheet can be imported into an XSLT processor as shown below. Now, the processor is ready to perform the transformation.

+ +
let domParser = Components.classes["@mozilla.org/xmlextras/domparser;1"]
+                .createInstance(Components.interfaces.nsIDOMParser);
+let fileStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                .createInstance(Components.interfaces.nsIFileInputStream);
+let xsltProcessor = Components.classes["@mozilla.org/document-transformer;1?type=xslt"]
+                .createInstance(Components.interfaces.nsIXSLTProcessor);
+let xslDocument;
+
+fileStream.init(someXSLFile, -1, 0x01, 0444); // read only
+
+// parse from the XSLT stylesheet file stream
+xslDocument = domParser.parseFromStream(
+    fileStream, null, fileStream.available(), "text/xml");
+
+// import the XSLT stylesheet to the XSLT processor
+xsltProcessor.importStylesheet(xslDocument);
+
+ +

Finally, you can either use {{ ifmethod("nsIXSLTProcessor","transformToDocument") }} or {{ ifmethod("nsIXSLTProcessor","transformToFragment") }} methods to transform the XML document. The {{ ifmethod("nsIXSLTProcessor","transformToDocument") }} method returns a DOM Document with the results of the transformation, whereas, the {{ ifmethod("nsIXSLTProcessor","transformToFragment") }} method returns a DOM DocumentFragment node. In this example code, the first child of the XUL document is appended to a XUL element after the transformation.

+ +
request.onload = function(aEvent) {
+  let responseXML = aEvent.target.responseXML;
+  let xulNode;
+
+  // transform the XML document to a XUL document
+  xulDocument = xsltProcessor.transformToDocument(responseXML);
+
+  // append the XUL node to a XUL element
+  xulNode = document.adoptNode(xulDocument.firstChild);
+  document.getElementById("foo").appendChild(xulNode);
+};
+
+ +

We effectively transformed the XML file into XUL and integrated it into the UI.

+ +
Note: Security should be your number one priority when handling remote content. Do not allow event handlers or any other kinds of code to be passed through your parsers. If you need your generated XUL to have JS code in it, all of it should be added locally, never from the remote source.
+ +

Here are a couple of practical situations were you may want to use XSLT:

+ +
    +
  1. Convert a large XML document directly into XUL.
    2. +
  2. Filter a complex XML file and generate a simpler XML document with only the data you need, so then you can use regular DOM functions to read it.
    3. +
  3. Convert XML into SQL statements. You could use this to generate a script to run on your local database. You would of course need to be very careful about escaping characters and protecting yourself against SQL injection attacks.
    4. +
  4. Convert XML into RDF. This was more useful when RDF was the default storage format. You can still use RDF as an intermediate format, though, and then use templates to generate XUL and display the data.
    5. +
+ +

HTTP debugging

+ +

When you start debugging HTTP requests, you may find it hard to know exactly what data was sent, especially with POST data. We recommend you to use extensions like Tamper Data. They help you to track HTTP/HTTPS requests and responses occurring in Firefox.

+ +

After installation, you can find a Tamper Data menu item in the menu bar:

+ + + +

Once you open the Tamper Data view, all requests and responses will begin to appear in it. You can discover some interesting things about Firefox like this, such as the automatic update URLs for extensions, and the behavior of web applications such as Gmail.

+ +

If you click on the "Start Tamper" button, for every request made you will get a popup dialog for tampering with it before it is sent. You can use it to view or even modify the data in a request, and then inspect the result. This can be a lot of work because there is a lot of web activity in a normal Firefox window, so use it sparingly.

+ +

A tutorial on Tamper Data can be found here.

+ +
Note: You should always test your connection code to cover edge cases, like when there is no Internet connection, or the computer is connected to a local network with no Internet access (like at an airport or hotel room). Make sure you're not telling users everything is OK, or worse, bombarding them with error messages.
+ +

{{ PreviousNext("Escuela_XUL/Interceptando_cargas_de_página", "Escuela_XUL/Personalizar_elementos_XUL_con_XBL") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/index.html b/files/es/mozilla/tech/xul/escuela_xul/index.html new file mode 100644 index 0000000000..94497a9507 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/index.html @@ -0,0 +1,77 @@ +--- +title: Escuela XUL +slug: Mozilla/Tech/XUL/Escuela_XUL +tags: + - Plugins + - Rerencias + - Tutoriales + - XUL + - extensiones +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}

+ +

{{AddonSidebar}}

+ +

El proyecto Escuela XUL es un tutorial completo para la creación de extensiones, enfocándose en el desarrollo de extensiones para Firefox. Es recomendable que lo leas completamente al menos una vez. Como Firefox cambia rápidamente, el contenido en este tutorial debería ser actual y válido.

+ +
+
Introducción
+
+ +
+
Funcionalidad básica
+
+ +
+
Funcionalidad intermedia
+
+ +
+
Temas avanzados
+
+ +
+
Apéndices
+
+ +
+
+ +

El proyecto Escuela XUL fue desarrollado por Appcoast (Anteriormente Glaxstar). El proyecto es ahora publicado aquí bajo las siguientes licencias. Su contenido ha sido necesariamente modificado de la fuente original.

diff --git "a/files/es/mozilla/tech/xul/escuela_xul/introducci\303\263n_a_las_extensiones_de_firefox/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/introducci\303\263n_a_las_extensiones_de_firefox/index.html" new file mode 100644 index 0000000000..758ef60e25 --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/introducci\303\263n_a_las_extensiones_de_firefox/index.html" @@ -0,0 +1,128 @@ +--- +title: Introducción a las extensiones de Firefox +slug: Mozilla/Tech/XUL/Escuela_XUL/Introducción_a_las_extensiones_de_Firefox +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Escuela_XUL/Introducción", "Escuela_XUL/Elementos_esenciales_de_una_extensión") }}

+ +

What's a Firefox Extension?

+ +
+

Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download.

+
+ +

Taken from the Extensions page.

+ +

As described in the quoted text, an extension is a small application that adds something new to one or more Mozilla applications. This tutorial focuses on extensions for Firefox, but the same (or very similar) principles apply to creating extensions for other applications such as Thunderbird, Seamonkey, and Flock.

+ +

It is also worth noting that there are differences between the definition of extension and add-on. All extensions are add-ons, but add-ons can also be themes, plugins, or language packs. This tutorial is about extension development, but themes and language packs are developed in a very similar way. Plugins are entirely different, and they will not be covered on this tutorial. You can read more about plugins and their development in the Plugins page.

+ +

Firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the browser. The Mozilla Add-ons repository (AMO) holds an extensive number of extensions with a wide variety of functions: content filtering (AdBlock Plus, NoScript), web application interaction (Delicious Bookmarks, eBay Companion), web development (DOM Inspector, Firebug), and child protection (Glubble For Families). These are very advanced and complex extensions, and you'll learn most of what it takes to create extensions like these (Glaxstar actually worked on 3 of those listed).

+ +

We'll begin by looking into a very simple extension.

+ +

The Hello World Extension

+ +

Our sample extensions and this tutorial in general are meant for Firefox version 3 and above, but most of it works on previous versions of Firefox as well. We'll try to make it clear when we're discussing a feature that only works on some versions of Firefox.

+ +

We'll now begin with a basic "Hello World" extension. Let's start by installing the extension. Click on the link below.

+ +

Install Hello World

+ +

This will either trigger an install or a file download, depending on the Content-type the webserver is using to serve the file. The appropriate content type to trigger an install is application/x-xpinstall. In this case a file download should occur.

+ +

If the content type is set correctly, you will probably get notified that the site is not allowed to install add-ons on Firefox. This is a security measure that prevents sites from installing extensions without user consent. This is necessary because malicious extensions can do the same level of harm as any malicious program: stealing data, erasing or replacing files, and causing unwanted behavior in general. AMO is the only pre-allowed site because all published add-ons on AMO have gone through a review process that includes security checks.

+ +

After downloading the file, you can drag and drop it into the Firefox content area, and the installation should begin.

+ +

You'll see a window telling you that you're about to install an extension, with some additional information such as the name of the author. You'll see a message saying that the author cannot be verified. Only extensions signed with a digital certificate can verify authorship. Signed extensions are rare, but we'll cover how to sign them later on.

+ +

Click on the Install Now button. After the extension is installed, you'll be asked to restart Firefox. Installing, uninstalling, enabling and disabling add-ons (except plugins) require a restart to complete, and there's no easy way to work around it. This is an important point to keep in mind if you're building an extension that manipulates other extensions or themes. There's a very old bug that tracks this issue.

+ +

Now, after restarting the browser, you'll see the Add-ons Manager window, showing the extension name, version, and a brief description.

+ +

addonman.png

+ +

Close the Add-ons window. Look at the main Firefox window and see if you notice anything different.

+ +

Did you see it? There's a new menu on the main menu bar, labeled "Hello World!". If you open the menu and then the menu item below, you'll see a nice alert message (for some definitions of 'nice'). Click on the OK button to close it.

+ +

+ +

That's all the extension does. Now let's take a closer look at it.

+ +

Extension Contents

+ +

You may have noticed that the extension file you installed is named xulschoolhello1.xpi. XPI (pronounced "zippy") stands for Cross-Platform Installer, because the same installer file can work on all major platforms, and this is the case for most extension XPIs. XPIs are simply compressed ZIP files, but Firefox recognizes the XPI extension and triggers the installation process when an XPI link is clicked.

+ +

To look into the XPI file you need to download it first, not install it. If the server triggers an install when clicking on a link or button, what you need to do is right click on the install link, and choose the Save Link As... option.

+ +

Next, we'll decompress the XPI file. One way to do this is to rename the file so that it uses the zip extension instead of the xpi. Another way is to open the file using a ZIP tool. Most operating systems ship with a ZIP compression utility, and there are more advanced tools available online. Make your pick, and decompress the file in a convenient location. You should see a directory structure similar to this one:

+ + + +

The JAR file contains most of the code, so we'll need to extract the contents of that file as well. Just like XPIs, all you need is a ZIP utility to decompress the file. After doing that, you'll have something like this:

+ + + +

That's a lot of files for something so simple! Well, don't worry, we'll shortly see the purpose of all of these files and realize this is quite simple. In the next section we'll inspect these files and see what they do.

+ +

{{ PreviousNext("Escuela_XUL/Introducción", "Escuela_XUL/Elementos_esenciales_de_una_extensión") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html b/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html new file mode 100644 index 0000000000..f6fd9f2d96 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/introduction/index.html @@ -0,0 +1,54 @@ +--- +title: Introduction +slug: Mozilla/Tech/XUL/Escuela_XUL/Introduction +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction +--- +
{{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
+ +

Welcome to the XUL School Tutorial!

+ +

This tutorial is meant to be the stepping stone that will turn you into a professional Firefox extension developer in no time. We have poured years of XUL experience into it, providing many solutions for problems extension developers commonly run into.

+ +

XUL School was created by Appcoast (formerly Glaxstar), one of the few companies dedicated to building high-quality Firefox extensions. A team of over a dozen XUL developers conformed Glaxstar at the time this tutorial was created, and the combined experiences of years creating Firefox extensions are reflected here.

+ +

With this tutorial you'll learn how to develop Firefox extensions. You'll learn how to quickly do the most common tasks in extension development, comparing several different approaches to solve them. In most cases we'll provide code samples that you can easily copy and adapt to your needs, as well as some working example extensions. The tutorial aims to be as brief as possible, often falling back on Mozilla documentation for more detailed information. You can think of it as a quick guide to the expansive world that is the Mozilla platform. Most links in this documentation are meant to be clicked and read.

+ +

We'll start with a brief introduction to some key concepts, in case you're not familiar with Mozilla and Firefox.

+ +

Mozilla and Firefox

+ +

The term Mozilla can be used to refer to several concepts: the Mozilla project, the Mozilla Foundation, the Mozilla Corporation and the old Mozilla browser. Even Firefox is sometimes referred to as "Mozilla". If you're unfamiliar with these terms, it's good that you take some time and learn a little about Mozilla. This will help you understand the culture that surrounds the Mozilla community.

+ +

Mozilla has spawned several products and projects, the most notable being the Mozilla Firefox web browser. Firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies.

+ +

Version 1.0 of Firefox was released in November 2004, version 2.0 in October 2006, and version 3.0 in June 2008. This tutorial was written after Firefox 3 was released, and has been updated with time. While most of it should still work for creating extensions in Firefox 3 (and even Firefox 2), it is strongly recommended that you aim to support modern Firefox versions, to encourage users to stay up to date with security fixes. A release that is more than 6 months old is likely vulnerable to published security bugs.

+ +

Firefox y otras aplicaciones Mozilla pueden ser vistas como composed of two different parts: a user interface layer that is distinct for each project, and a common platform on top of which the interface layer is built. The user interface is built with technology known as XUL, and the platform is known as XULRunner.

+ +

XUL

+ +

XUL (pronounced "zool") is one of many technologies used for creating Mozilla-based products and extensions. It is only one part of the development landscape, but given that it's practically exclusive to Mozilla, it tends to be used to identify all Mozilla-related development. You'll sometimes read terms like "XUL applications" and "XUL extensions", but rarely will they refer to projects that are exclusively built with XUL. It usually means that the projects were built using Mozilla technologies. Even this project, called XUL School, covers several other technologies such as JavaScript, CSS, XBL and XPCOM.

+ +

XULRunner

+ +

XULRunner includes the Gecko rendering engine, the Necko networking library, and several other components that provide OS-independent file management, accessibility, and localization, among others. It is this very powerful platform that has allowed such a fast growth of the development community surrounding Mozilla and Firefox.

+ +

XULRunner is available in binary form at the XULRunner page, and it is the base for several projects, such as Songbird, Miro and Eudora. There's a very comprehensive list of XULRunner applications in the XULRunner Hall of Fame.

+ +

Gecko

+ +

The Gecko engine is the part of Firefox used to render web pages and its own user interface. You can identify the level of compatibility of web standards in Gecko-based browsers looking at their User Agent string, which should include the Gecko version. Gecko versions are somewhat independent from Firefox versions, and you can see a mapping of Firefox versions and Gecko versions at the Gecko page. The User Agent String for Firefox at the time of this writing (in US English, Mac OS X) is:

+ +

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:25.0.1) Gecko/20100101 Firefox/25.0.1

+ +

The highlighted section is the Gecko version: 25.0.1. You can read and copy the user agent string of any Firefox window, choosing "Help > Troubleshooting Information" from the main menu.

+ +

On to the Tutorial

+ +

With the basic concepts out of the way, we can now get right into extension development. You are probably still wondering what exactly is an extension, what can it do, and how can you make them. Well, this whole tutorial is devoted to explaining that to you.

+ +

Welcome to the world of extension development. Now let's get to it.

+ +
{{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html b/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html new file mode 100644 index 0000000000..9c3f436636 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/manejo_de_preferencias/index.html @@ -0,0 +1,305 @@ +--- +title: Manejo de preferencias +slug: Mozilla/Tech/XUL/Escuela_XUL/Manejo_de_preferencias +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Handling_Preferences +--- +
+
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Escuela_XUL/Notificaciones_Observer", "Escuela_XUL/Almacenamiento_local") }}

+ +

Preferences in Firefox

+ +

Mozilla applications are highly customizable. Preferences are used to store settings and information to change their default behavior. To open the preferences window in Firefox, select the following from the main menu:

+ + + +
+
+
Keep in mind the usage of the terms "Preferences" and "Options" in different platforms. If you need to refer to the term "preference" in any of your locale files, you must change the string depending on the operating system. Tip: you can use window.navigator.platform in your chrome code to figure out the operating system Firefox is running on. You can use the Hidden DOM Window in non-chrome code.
+
+
+ +

Firefox loads user preferences from a number of sources. Each source is a JS file that contains some special functions not available in regular code. The following files are used:

+ + + +

Firefox exposes its most common high-level preferences through the Preferences window and other parts of its UI. In reality there are thousands of other preferences Firefox handles that are not readily available to the user. These are hidden because they are too advanced or obscure for regular users to manage, and because the Preferences window should be as easy to use as possible. To access all other preferences, enter "about:config" into the Location Bar. This XUL page lists all the preferences defined in the Firefox installation, allowing you to change them as you please. As the warning message states, you should be very careful when changing preferences. Incorrect values can make Firefox behave oddly or break altogether.

+ +

You can type on the "Filter" textbox to search for specific preferences. If you type the word "homepage", it will filter all the preferences and display only the ones which include the word "homepage" in its name or value. Right-clicking on the list reveals several options that allow you to modify preference values and add new ones. Preferences with non-default values are highlighted in bold. All changes done in about:config are saved to the prefs.js file.

+ +

The list in about:config is not complete. Some Firefox preferences have no default value, so they are left out unless you add them manually. An extensive specification of Firefox preferences can be seen in this page. You don't need to know them by heart; if doing task X requires some preference, then it's better to look for an explanation on how to do X rather than diving into the preferences list and see if you can find the preference you need. MDC articles and other guides are usually good at specifying the preferences you'll need to use.

+ +

Adding preferences to an extension

+ +

Extensions can read and write Firefox preferences and, most importantly, create and manage their own. The Preferences System provides a simple, unified storage facility for name / value mappings. When your storage needs are more complicated than this, you'll need more advanced APIs that will be discussed in a section further ahead.

+ +

To add preferences to your extension you should first create a JS preferences file that describes the preferences and their default values, although setting defaults is not required. As mentioned earlier, a preference with no default value can be set later on.

+ +
+
+
We recommend that you include all of your extension preferences in the JS defaults file. It makes it easier to compile a list of the preferences your extensions handle, and to document what they do.
+
+
+ +

The preferences file you need to create should be defaults/preferences/yourextensionname.js, under your extension root. The naming of the JS file is not compulsory, but it is the standard most extensions use.

+ +
+
+
The purpose of the defaults directory is to hold non-code files your extension needs. In the past we have used this directory to store XSLT files for XML transformations and local storage template files (more on this later). It's the best place to put miscellaneous files your extension needs.
+
+
+ +

Download this sample Hello World using preferences. There are a couple of additions in the Makefiles, to include the preference file xulschoolhello.js. The contents of the file are fairly simple:

+ +
+
+
// Amount of messages shown to the user.
+pref("extensions.xulschoolhello.message.count", 0);
+
+
+ +

This defines a preference we'll use to keep track of the amount of times we have displayed a greeting message to the user. Its default value is 0. You'll see this preference appear in about:config after installing the extension. Just type "xulschool" in the filter box to see your new preference.

+ +
Always begin your preference names with extensions, followed by some namespacing and finally the actual name of the preference. Name parts are normally separated by dots.
+ +

Now let's look at how we actually manage the preference values.

+ +

Managing Preferences with FUEL

+ +

FUEL is a JS library integrated into Firefox that was meant to facilitate extension development. It fell a little short of its goals, but it is useful for preference handling. Firefox-based applications like Flock include FUEL, and SeaMonkey includes a FUEL equivalent called SMILE since version 2.

+ +

We modified our JSM sample extension so that it uses a preference instead of an internal variable. The main difference in functionality is that after closing Firefox and reopening it, our extension remembers how many greetings have been displayed before. The original extension only kept track of the greetings shown in a browser session. This new version persists this number across sessions.

+ +

Since the only reason we used non-chrome code in the JSM sample extension was to store the message count in a single location, we can easily modify this new extension so that it uses chrome code exclusively. There's no need for JavaScript Code Modules or XPCOM anymore. We're making this point because using the FUEL library from chrome code is slightly different thant using it from non-chrome code. The difference lies in how to get the "root" Application object:

+ +
+
+
// chrome code.
+Application.something
+
+// non-chrome code.
+let application =
+  Cc["@mozilla.org/fuel/application;1"].getService(Ci.fuelIApplication);
+application.something
+
+
+ +

In the chrome you have the global Application object ready to use, while in non-chrome code you need to get it as an XPCOM service. It is an XPCOM service, with the difference that it can be more easily accessed in the chrome.

+ +
+
+
FUEL only works in Firefox 3 and above.
+
+
+ +

The Application object has a prefs property of type PreferenceBranch. You can use it to manage preferences easily.

+ +

First, you get an object that represents your preference:

+ +
+
+
this._countPref =
+  application.prefs.get("extensions.xulschoolhello.message.count");
+
+
+ +

Then you can get or set its value using the value property.

+ +
+
+
/**
+ * Returns the current message count.
+ * @return the current message count.
+ */
+get count() { return this._countPref.value; },
+
+/**
+ * Increments the message count by one.
+ */
+increment : function() {
+  this._countPref.value++;
+}
+
+
+ +

The prefs object also has methods that allow you to get and set preference values directly, but we prefer this approach.

+ +

Preference Listeners

+ +

Sometimes you'll want to be notified when a preference changes its value. For example, if we wanted to have a display of the message count somewhere in the browser, we should use a preference listener to keep it up to date. This way we know we have the right value even if the user changes it manually in about:config.

+ +

To do this in FUEL, add an event listener for the "change" event:

+ +
+
+
this._countPref.events.addListener("change", this);
+
+
+ +

The listener object should implement the EventListener interface. Similarly to observers, all you need to do is have a handleEvent method in a JS object. Or you can use an anonymous function that takes an EventItem object.

+ +
+
+
this._countPref.events.addListener("change", function(aEvent) { /* do stuff. */ });
+
+
+ +

Always remember to remove listeners when you don't need them anymore.

+ +

Managing Preferences with XPCOM

+ +

The preferences system is implemented with XPCOM. FUEL is only a wrapper that gives the XPCOM services a friendlier face, so using either is pretty much the same. Using XPCOM is a little more verbose, as usual.

+ +

We use the Preferences Service in order to get and set preference values:

+ +
+
+
this._prefService =
+  Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch);
+// ...
+get count() {
+  return this._prefService.getIntPref("extensions.xulschoolhello.message.count");
+},
+increment : function() {
+  let currentCount =
+    this._prefService.getIntPref("extensions.xulschoolhello.message.count");
+
+  this._prefService.setIntPref("extensions.xulschoolhello.message.count", currentCount + 1);
+}
+
+
+ +

One important thing to keep in mind is that the "get" methods of the service can throw an exception if the preference is not found. If you are going to use XPCOM, you should always set a default value to your preferences, or use a try / catch block to prevent unhandled errors.

+ +

Preference Listeners

+ +

The XPCOM way to add a listener was mentioned in the XPCOM section when describing the QueryInterface method:

+ +
+
+
this._prefService.QueryInterface(Ci.nsIPrefBranch2);
+this._prefService.addObserver(prefName, this, false);
+this._prefService.QueryInterface(Ci.nsIPrefBranch);
+
+
+ +

All the QI'ing is necessary because the addObserver method is in a different interface, and other than for adding and removing observers, we use the nsIPrefBranch interface for everything related to preferences.

+ +

Then, create the observer method:

+ +
+
+
observe : function(aSubject, aTopic, aData) {
+  if ("nsPref:changed" == aTopic) {
+    let newValue = aSubject.getIntPref(aData);
+    // do something.
+  }
+},
+
+
+ +

Always remember to remove the observer when you don't need it anymore:

+ +
+
+
this._prefService.QueryInterface(Ci.nsIPrefBranch2);
+this._prefService.removeObserver(prefName, this);
+
+
+ +

Preference Windows

+ +

It's very common for extensions to have a few settings that their users can change to tailor them to their needs. Since there are some subtleties related to preference management, there are some facilities provided in XUL and Firefox that make this much easier to deal with.

+ +

The standard way of opening a preferences window is to open the Add-ons Manager, select the add-on, and then click on the Preferences button. In order to have this button enabled in your extension you need to add the following line to install.rdf:

+ +
+
+
<em:optionsURL>chrome://xulschoolhello/content/preferencesWindow.xul</em:optionsURL>
+
+
+ +

If you want to open this window from a different place in the UI, such as a menu item or a button in a toolbar, you need to take into account that the opening behavior of a Preferences window is different depending on the operating system. This is how we do it:

+ +
+
+
openPreferences : function() {
+  if (null == this._preferencesWindow || this._preferencesWindow.closed) {
+    let instantApply =
+      Application.prefs.get("browser.preferences.instantApply");
+    let features =
+      "chrome,titlebar,toolbar,centerscreen" +
+      (instantApply.value ? ",dialog=no" : ",modal");
+
+    this._preferencesWindow =
+      window.openDialog(
+        "chrome://xulschoolhello/content/preferencesWindow.xul",
+        "xulschoolhello-preferences-window", features);
+  }
+
+  this._preferencesWindow.focus();
+},
+
+
+ +

This code is based on the code that opens Preference windows from the Add-ons Manager. It does 2 things:

+ +
    +
  1. Check if the Preferences window is already open. In that case, just give it focus.
    2. +
  2. Make the window modal in systems where the instant apply rule is not used. Notice that this is a preference that users can switch, so checking for the operating system is not good enough.
    3. +
+ +
+
+
The general philosophy in non-Windows systems is that a change in a preference applies immediately. Preference windows don't have any buttons, or just an OK or Close button. On Windows, changing preferences don't apply until the user click on the OK button. The user can click on the Cancel button and none of the changes performed in the window will apply. This is why it makes sense to have Preference windows be modal on Windows. This way the user is urged to apply or discard any changes instead of being able to ignore the Preferences window.
+
+
+ +

For preferences windows you should always use the prefwindow element instead of window in your XUL file. Firefox will know if it needs to add OK and Cancel buttons or not.

+ +

In most cases, your preferences window will have a few options that can be displayed all at once. If you have many preferences, you can organize them using the prefpane element. This creates a visually appealing tabbed view, just like the one in the Firefox Preferences window. The prefpane is just a container, and you can have as many as you want. The tabs at the top of the window will need icons, and just like with toolbar buttons there are subtle differences between operating systems.

+ +

The prefwindow allows you to use the preferences and preference elements, which facilitate preference handling. The preferences element is just a container, and you should have one per window, or one per prefpane if you have those. The element and its children are completely invisible, and their purpose is to list the preferences to be used in the window/pane.

+ +
+
+
<preferences>
+  <preference id="xulschoolhello-message-count-pref"
+    name="extensions.xulschoolhello.message.count" type="int" />
+  <!-- More preference elements. -->
+
+</preferences>
+
+
+ +

After you define the preferences you need, you associate them with the form elements in your window or pane using the preference attribute:

+ +
+
+
<textbox preference="xulschoolhello-message-count-pref" type="number"
+  min="0" max="100" />
+
+
+ +

In this case we use a numeric field to set the message count preference. Changing the value in the control will change the preference (depending on the instant apply rule), and vice versa. You may be able to create a Preferences window without a single line of JS code thanks to the preference element.

+ +

Finally, groupboxes are a good idea to organize the contents of the window and preference panes. They are heavily stylized in the Firefox Preferences window, so you should include the same CSS file that is included in it (chrome://browser/skin/preferences/preferences.css). This way you don't have to rewrite all the CSS rules defined for Firefox. You should also look at the class values set to elements in the XUL file, so that your Preferences window is just like the one in Firefox and your extension is better integrated into the application and the native OS look and feel.

+ +

{{ PreviousNext("Escuela_XUL/Notificaciones_Observer", "Escuela_XUL/Almacenamiento_local") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html b/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html new file mode 100644 index 0000000000..e280fda079 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/montando_un_ambiente_de_desarrollo/index.html @@ -0,0 +1,244 @@ +--- +title: Montando un ambiente de desarrollo +slug: Mozilla/Tech/XUL/Escuela_XUL/Montando_un_ambiente_de_desarrollo +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Escuela_XUL/Elementos_esenciales_de_una_extensión", "Escuela_XUL/Agregar_menus_y_submenus") }}

+ +

Getting the right tools

+ +

There are 3 tools that we think are essential for effective add-on development (or any kind of development, really): a source code editor, a source control system, and a build system.

+ +

In regards to code editing, there's no official Mozilla IDE. On the other hand, extensions use the same (or similar) languages that are used for web development, so most text editors and IDEs are up to the task. Most XUL tools and plugins you'll find online are merely templates that generate the folder structure for the project, and that's not much help.

+ +

We recommend Komodo Edit. It's free, open source, and cross-platform. It's based on the Mozilla XULRunner platform, so it has support for some of the particularities in Firefox extension development. Komodo Edit has automatic completion for XUL tags and attributes, and it supports Mozilla's CSS extensions (CSS values and properties beginning with "-moz"). It has an add-on system similar to the one in Firefox, and there are some Komodo extensions that provide additional help in extension development. That is more than what you can get with most other editors, so we recommend you to give it a try. All of our examples are handled with Komodo Edit, so if you see a .kpf file in an example you downloaded, this is a Komodo project file.

+ +

For source control, we just recommend that you have it. We mostly use Subversion, but any other will do, and it won't be necessary for examples or exercises presented in this tutorial.

+ +

To package XPI files, we use make. We chose make because this is the system used by Mozilla to build Firefox, and it is available for all operating systems. make is a default tool in most UNIX-based systems. It can be installed on Mac OS X as part of the XCode Tools package, and on Windows through cygwin. In cygwin installations you'll have to explicitly check the make and zip utilities from the long list of packages to download and install.

+ +

Also make sure that make is in the executable system path. After setting up make, you should be able to open a command line window, run "make -ver", and get the installed version of make as output.

+ +

We recommend you set up make in your system, since our examples come with all the necessary files to build and install the resulting XPI using this tool. It will save you a lot of packaging time. Or you can create an equivalent system using batch, Ant or whatever you prefer.

+ +

Build system

+ +

Let's start by downloading the project used to build the second version of Hello World, from the exercise in the last section.

+ +

Hello World 2 Project.

+ +

Unzip the file anywhere you want. Inside the HelloWorld2 directory, you'll see two directories: bin and src. The bin directory should be empty. This is where all the resulting build files will be created, and where you'll find the extension XPI file once you get it to build.

+ +

Open the project file (HelloWorld2.kpf) from the src directory in Komodo Edit. In the Projects tab you should be able to see the directory structure inside the src directory. This structure should be familiar, as it is almost identical to the unpacked XPI from the previous section.

+ +

The only notable additions are Makefile under src and Makefile.in under chrome. These are the files that make uses to build the XPI. You should take some time to read them and understand them, or at least identify the parts that you should change to get a project of your own going. This GNU Make Manual is a very good reference to get to know make and Makefiles.

+ +

In most cases you'll only need to change the first lines in the file Makefile. These define the extension name (which will also be the name of the JAR file), the extension id (as specified in install.rdf) and the name of the profile directory where the extension will be installed during development and testing. More about this further ahead.

+ +

Let's try and build the XPI from the command line first. Open the command line program in your system and navigate to the src directory in your project. Run the following command:

+ +
+
+
make
+
+
+ +

That's it. If everything went well, you should see an output similar to this:

+ +
+
+
Creating chrome JAR file.
+  adding: content/browserOverlay.js (deflated 42%)
+  adding: content/browserOverlay.xul (deflated 59%)
+  adding: skin/browserOverlay.css (stored 0%)
+  adding: locale/en-US/browserOverlay.dtd (deflated 52%)
+  adding: locale/en-US/browserOverlay.properties (stored 0%)
+Creating chrome JAR file. Done!
+Creating XPI file.
+  adding: install.rdf (deflated 50%)
+  adding: chrome.manifest (deflated 60%)
+  adding: chrome/xulschoolhello.jar (deflated 30%)
+Creating XPI file. Done!
+
+Build finished successfully.
+
+
+ +

If you inspect the bin directory, you should see the xulschoolhello2.xpi file, and a build directory with copies of the project files. The build directory is just a temporary location where files are copied before the final XPI is built. If you run make again, you'll only see the last line of the build process. That is because make can tell that the files in the build directory are up to date, and nothing needs to be done. Making changes on source files will make make run the necessary steps to build the XPI again.

+ +

You can clean up the bin directory by just running the following command (again, from the src directory):

+ +
+
+
make clean
+
+
+ +

You can also run these commands from Komodo. Click on Tools > Run Command.... In the "Run" textbox you should type this:

+ +
+
+
bash -c "make"
+
+
+ +

Or add "clean" for the clean command. The "bash -c" part forces Komodo to use bash, which for some reason can't be set properly as the default command shell. It isn't necessary to add this, but it's better so that it is consistent with the make command we'll see next.

+ +

In the "Start in" textbox you should choose %p(directory path of active project). If you don't see this textbox, click on the "More" button. You also have the option to save the command, by clicking on the "Add to Toolbox" checkbox. To see the Toolbox, click on View > Tabs > Toolbox, from the main menu. With that, you should now have a very easy way to build your XPI, by just double clicking on the created commands.

+ +

We can make it even better. Once you're testing and debugging your code, you'll find that constantly building and installing an XPI can be very tedious. This is the reason why we introduced "make install". This only works if your extension is already installed in a Firefox profile. Just like in the provided project, you need the add-on id and profile location set in the file Makefile. We use this information to locate the installation path of the extension and overwrite the installed files. If Firefox is open at the time you run "make install", you'll have to restart it in order to see the changes. It's still better than installing the XPI all over again.

+ +

In order to set the profile location to the right value, you should read the support article on profiles, at the Mozilla Support site. We'll also delve deeper in this topic later on in this section.

+ +

To make "make install" work on non-Windows systems, you need an extra step. The install process requires using an environment variable called OSTYPE, which is not exported. Long story short, if you want to run it from a command line, you need to run:

+ +
+
+
export OSTYPE; make install
+
+
+ +

And in the command in Komodo, you should enter the following:

+ +
+
+
bash -c "export OSTYPE; make install"
+
+
+ +

The export command won't work correctly unless you use "bash -c".

+ +
The file Makefile specifies which profile folder the add-on will be reinstalled to. This is set in the profile_dir variable (set to "xulschool-dev" in this case). When creating a development profile for your add-on, make sure you choose an easy name for the profile folder, and set it in your Makefile in order to take advantage of the install command.
+ +

Building IDL files

+ +

Some extensions require developing XPCOM components to add certain advanced functions. There's a section dedicated to XPCOM in this tutorial, but we'll briefly discuss the impact it has on building the extension. You can skip this section and keep it present as a reference in case you do need to use XPCOM in your project.

+ +

XPCOM interfaces are defined using IDL files. These are text files that define the attributes and methods in one or more interfaces. These IDL files are compiled into binary form and included in the extension as XPT files.

+ +

To compile an IDL file to XPT, you need a command line tool called xpidl. This tool is included in the Mozilla Gecko SDK. If you need to compile IDLs, go to the SDK page and download a compiled version for your system. Also note any prerequisites you may need. If your system is not listed in the supported builds, you'll have to build the SDK yourself from the Mozilla source. Good luck with that.

+ +

You should also set up your environment so that xpidl.exe (or just xpidl on other systems) is in the default executable path, and also add a variable called GECKO_SDK, that points to your SDK build:

+ +
+
+
export GECKO_SDK=/path/to/your/sdk
+
+
+ +

Our build system should pick it up from there. To make it work in Komodo in Unix-based systems, we add the command to the .bash_login file in the home directory, and we modify the commands to this:

+ +
+
+
bash -c ". ~/.bash_login; make"
+
+
+ +

An example project with XPCOM components is included in the XPCOM section. There is also a mention about building C++ XPCOM, which is something much more complicated.

+ +

Signing extensions

+ +

In order to provide additional security for your users, you can choose to add a signature to your extension. The signature verifies that you are the author of this extension, and it can only be done if you have a valid certificate provided by a trusted Certificate Authority.

+ +

The only noticeable difference for the user is that the XPI installation dialog will say that the extension was created by you, making the dialog a little easier to trust. It's not common to sign extensions because most users will trust the official add-ons site (AMO) rather than rely on extension signatures. On the other hand, it is standard practice for big companies to sign their extensions.

+ +

You'll need to download some libraries in order to be able to sign your extension. Follow the instructions, and add something like the following to your Makefile:

+ +
+
+
# The directory where the signature sources are located.
+signature_dir := signature
+
+# The signing key /certificate file.
+signature_extra_files := $(build_dir)/META-INF/manifest.mf \
+                         $(build_dir)/META-INF/zigbert.sf
+# The signing key /certificate file.
+signature_rsa_file = $(build_dir)/META-INF/zigbert.rsa# The signing key /certificate file.
+signature_files := $(signature_extra_files) \
+                   $(signature_rsa_file)
+
+$(signature_files): $(build_dir) $(xpi_built)
+  @signtool -d $(signature_dir) -k $(cert_name) \
+  -p $(cert_password) $(build_dir)
+
+
+ +

Keep in mind that your password should not be in your Makefiles, and you must be very careful with the certificate information. Ideally this should be handled by a single person, and only done near the end of the release process. You should also have a different make command, such as make signed in order to distinguish the signed and unsigned development builds.

+ +

Firefox profile management

+ +

It is good development practice to keep your test environment separate from everything else. You don't want unstable extensions to break your everyday Firefox profile, risking data loss. It's much better to have a different "version" of Firefox for testing. This is what Firefox profiles are for.

+ +

You can learn about setting up multiple Firefox profiles in the Mozilla Support article Managing Profiles. You can have as many profiles as you like. You can also mix them with multiple Firefox installations. For instance, you may want to test your extension in Firefox 3.5 and Firefox 3.6, or test it in a localized version of Firefox. You can install as many Firefox versions as you want, and mix profiles and versions.

+ +

On Windows and Linux it's easy to create shortcuts for every profile you create, using the commands mentioned in the support article.

+ +

For Mac OS X developers, there is also a way to set up "shortcuts". You can do this by opening the Automator application, choosing Run Shell Script and then entering the profile-loading script in the textbox:

+ +
+
+
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p MyProfile > /dev/null &
+
+
+ +

You can change "/dev/null" to a file location, in case you want to see dump output from Firefox, or other extensions. The last & prevents Automator from waiting for your Firefox session to finish. Save this as an Application, not a Workflow. And you probably want to have these on your Desktop or Dock, for easy access.

+ +

There are also some configuration changes you shloud make in your testing profiles, so that you get detailed error information in case something fails. The Firefox Error Console (Tools > Error Console) normally displays JavaScript errors that occur on web pages, but with some tweaking you can get error information from your extension. Read this piece on Development preferences.

+ +

Developer extensions

+ +

There's a wide variety of Firefox extensions that aid web development and add-on development. A good place to look for them is the Mozilla Add-ons site, and there's also a good development extension list here. In this section we'll cover a few that we have found to be very useful.

+ +

DOM Inspector

+ +

The DOM Inspector used to be part of Firefox as an installer option, but since Firefox 3 it has been separated as another add-on you can add and remove. It's a very useful inspection tool that lets you look into the DOM of HTML and XUL documents, as well as applied CSS rules and associated JavaScript objects. Introduction to DOM Inspector is a good guide on how to get started using it.

+ +

The DOM inspector is particularly useful in finding out how to overlay a window, and how to replace default CSS style rules. You can see the names of the files involved, which gives you a good starting point when looking into the Mozilla source. You can even change styles, attributes and execute Javascript code in it, although that's not completely reliable.

+ +

JavaScript Debugger

+ +

The name says it all. The Venkman JavaScript Debugger is a great way to trace execution of your JavaScript code.

+ +

To debug extension and browser code, right-click on the Loaded Scripts panel and uncheck Exclude Browser Files. The list of loaded scripts will grow long to include all of the scripts in Firefox. Having our file naming conventions prove very useful in this case. You can set breakpoints, step in and out of methods, and even get profiling information from Javascript execution. You can inspect variables, keep track of watch expressions, and evaluate arbitrary JS at any point in execution.

+ +

This extension has seen little maintenance in quite some time, so it is very buggy. It is specially unreliable when debugging code in Javascript XPCOM and XBL files. Nevertheless, it is a valuable tool when trying to figure out why a certain function is misbehaving.

+ +

Tamper Data

+ +

Tamper Data intercepts HTTP requests and their responses. It allows you to cancel them and even replace payload data before it is sent. There are several similar extensions, such as Live HTTP Headers, but Tamper Data is the one that we use the most. We'll cover more on HTTP debugging later on.

+ +

Firebug

+ +

The Firebug extension includes pretty much all tools mentioned so far, but it's mostly focused on web development. The Chromebug extension helps in making Firebug more useful for extension development, but it may still not be powerful enough to replace all of the previously mentioned add-ons.

+ +

On the other hand, Firebug has a very friendly, integrated user interface, and sees much more development that its counterparts. It's definitely worth a try.

+ +

Leak Monitor

+ +

Memory leaks have always been a big criticism drawn against Firefox. Mozilla has proven with time that they take memory usage seriously, improving performance on several critical areas and removing all kinds of memory leaks.

+ +

However, extensions are also capable of causing memory leaks. If you want your extension to be included in the Mozilla Add-ons site, you better not have any memory leaks. Using XPCOM in JavaScript has some guidelines you should follow to avoid them. One of the most common errors developers make is to register a JS event listener or observer, and never removing it. The simple practice of always including removal code for everything you add makes a big difference.

+ +

To make sure your extension doesn't leak, you should use the Leak Monitor extension when testing it. Always test opening and closing windows. Leaks usually surface when doing this.

+ +

Exercise

+ + + +

Now that you know how to quickly monitor your project and test changes, we'll learn how to add new UI elements to Firefox, through overlays and new windows.

+ +

{{ PreviousNext("Escuela_XUL/Elementos_esenciales_de_una_extensión", "Escuela_XUL/Agregar_menus_y_submenus") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html b/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html new file mode 100644 index 0000000000..efce29ae52 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/notificaciones_de_usuario_y_alertas/index.html @@ -0,0 +1,94 @@ +--- +title: Notificaciones de usuario y alertas +slug: Mozilla/Tech/XUL/Escuela_XUL/Notificaciones_de_usuario_y_alertas +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/User_Notifications_and_Alerts +--- +

{{AddonSidebar}}

+ +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}

+ +

{{ PreviousNext("Escuela_XUL/Personalizar_elementos_XUL_con_XBL", "Escuela_XUL/Documentación_de_Mozilla") }}

+ +

It is often the case that extensions need to notify users about important events, often requiring some response. Using modal dialogs and alerts is usually a bad idea. They interrupt the user's workflow, demanding immediate action before anything else can be done. Users will find them annoying and probably will learn to dismiss them as quickly as possible without even reading what they have to say. Or they will just get rid your add-on.

+ +

This section lists a few alternatives that give you the possibility of notifying the user and requesting action without being too annoying.

+ +

The notificationbox element

+ +

You have probably seen these before. The "remember password" prompt is the one that shows up the most often. They are thin boxes that appear from beneath the tab list and above the page content, with some text and maybe a few buttons. This kind of notification is implemented with a notificationbox.

+ +

This kind on notification is very easy to implement, it doesn't interrupt the user and is easy to read and dismiss, so it is our recommended way of displaying alerts and notifications. There's a catch, though: these notifications are inside the current tab, so switching tabs will make a notification disappear. The notification shows up again when you come back to the tab that displayed it. This means that these notifications make the most sense when they are related to the page currently being displayed, such as a page trying to install an add-on, or a site you just entered a password on.

+ +

Notification boxes are very easy to create, and are very customizable:

+ +
+
+
let nb = gBrowser.getNotificationBox();
+let acceptButton = new Object();
+let declineButton = new Object();
+let message =
+  this._bundle.getString("xulschoolhello.friendMessage.label");
+let that = this;
+
+acceptButton.label =
+  this._bundle.getString("xulschoolhello.acceptButton.label");
+acceptButton.accessKey =
+  this._bundle.getString("xulschoolhello.acceptButton.accesskey");
+acceptButton.popup = null;
+acceptButton.callback = function() { that.acceptRequest(); };
+// similarly for decline button.
+nb.appendNotification(
+  message, "xulschoolhello-friend-notification",
+  "chrome://xulschoolhello/skin/friend-notification.png",
+  nb.PRIORITY_INFO_HIGH, [ acceptButton, declineButton ]);
+
+
+ +

All browser tabs have a notification box by default, so you don't need to do any overlaying. The notificationbox elements can be obtained from the gBrowser object. In this case we don't pass any arguments to getNotificationBox so that we get the notification box that corresponds to the tab currently on display. The appendNotification method takes the message, id, image (32x32), level and buttons. The level argument determines the "strength" of the message, indicated by its background color when it is displayed. You should look for the level that better fits your message, and use the lowest applicable level, to prevent the user from getting used to dismissing high-level notifications. The buttons are represented by simple JS data objects. This is all explained in detail in the notificationbox page.

+ +

Notification boxes are designed to be easily dismissed. All notifications have an additional close button, so you should take into account that it's possible that none of your custom buttons will be clicked. Also, clicking on any of your custom buttons will cause the notification to be immediately closed, so you should only use notification boxes for single-step processes.

+ +

The Alerts Service

+ +

This is a very good option when you want to alert users about events without requiring input from them. Alerts are displayed in an OS-specific way, so their look is native. You can associate an action to the user clicking on the alert. Another advantage is that you use an XPCOM service to do this (nsIAlertsService), so you can easily trigger alerts from chrome and non-chrome code. On the other hand, alerts are displayed only temporarily

+ +

Using the Alerts Service is similar to using notification boxes:

+ +
+
+
let alertsService =
+  Cc["@mozilla.org/alerts-service;1"].getService(Ci.nsIAlertsService);
+let title = this._bundle.getString("xulschoolhello.greeting.title");
+let message = this._bundle.getString("xulschoolhello.greeting.label");
+
+alertsService.showAlertNotification(
+  "chrome://xulschoolhello/skin/hello-notification.png",
+  title, message, true, "", this, "XULSchool Hello Message");
+
+
+ +

We pass this as an argument, assuming that this is an object that implements nsIObserver. We do this when we need to handle clicks on the alert box. The image can have any size, but it is recommended that you use a medium, fixed size.

+ +

The main disadvantage of using alerts is that support for the Alerts Service is not guaranteed for all platforms and Firefox versions. Support for Windows has existed since Firefox 2. For Mac OS X, support was added on Firefox 3, and only through a third-party tool called Growl. On Linux systems, we have confirmed that it works on Firefox 3 on Ubuntu Linux, but we haven't tested all distributions and Firefox versions.

+ +

Because of the inconsistent support and temporary nature of these alerts, we don't recommend using this service to show information the user needs to know and can't get in any other way.

+ +

Custom alerts

+ +

Creating custom solutions for alerting the user is not complicated, given the advantages of XUL overlays and CSS positioning. However, these solutions are prone to be buggy and have accessibility issues. You should use the 2 alternatives mentioned above whenever possible. If none of those fit your needs then this is an acceptable solution.

+ +

An easy way to display alerts is to include a hidden box in your overlay, which you can fill with any content you need before removing the hidden attribute so that it is displayed to the user. The best locations for this kind of box are above and below the tab browser. Below is preferrable because it only cuts the bottom part of the current page, as opposed to pushing down all tabs and content. Notification boxes are a good guideline to what you should aim for: thin, informative and easy to dismiss.

+ +

Another option is to also add a hidden box to the overlay, but use CSS positioning to locate it where you want. This usually means that the box will be hovering on top of the page's content, and there are a few things you must know about this. First of all, switching tabs will probably make your alert disappear. This is probably due to the fact that the browser tab box uses a deck internally, and that affects z-indexing. You'll have to code around this using tab events in order to know when to re-display your alert. Another problem you need to take into account is that transparency of floating XUL on the Mac OS version of Firefox 2 doesn't work. You'll end up with a box with a white background you can't get rid of . On Firefox 3 and above, this seems to have been corrected, using the panel element.

+ +

The bottom right corner of the browser is the recommended location for an alert, because it normally doesn't block the part of the content where the user is reading, or the most important parts of page content, such as menus and titles.

+ +

Remember this is not a recommended practice. Imagine having multiple extensions notifying you in their own custom way, probably even at the same time! This is not good from a UI perspective, so you consider custom alerts the very last resort.

+ +

{{ PreviousNext("Escuela_XUL/Personalizar_elementos_XUL_con_XBL", "Escuela_XUL/Documentación_de_Mozilla") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html b/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html new file mode 100644 index 0000000000..497781a405 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/objetos_xpcom/index.html @@ -0,0 +1,378 @@ +--- +title: Objetos XPCOM +slug: Mozilla/Tech/XUL/Escuela_XUL/Objetos_XPCOM +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/XPCOM_Objects +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ PreviousNext("Escuela_XUL/Uso_de_objetos_en_JavaScript", "Escuela_XUL/Notificaciones_Observer") }}

+ +

XPCOM

+ +
+

XPCOM is a cross platform component object model, similar to Microsoft COM.

+
+ +

Taken from the XPCOM page.

+ +

Firefox can be seen as composed of two layers. The largest of the two is a compiled platform, mostly written in C++. On top of it lies the chrome, mostly written in XML, Javascript and CSS. In fact, you can separate the two. We often mention other "Mozilla based applications". Well, those are applications that, simply put, take the underlying platform with perhaps a few changes and additions, and then write their own chrome layer. This lower layer is called XULRunner, and it is a very powerful platform, providing a very robust development base for web-enabled, cross-platform applications. The fact that it allows to easily create OS-independent applications is a big selling point for XULRunner.

+ +

XPCOM is the way in which the two layers (XULRunner and chrome) communicate. Most of the objects and functions in the lower layers are hidden from the chrome; those that need to be publicized are exposed through XPCOM components and interfaces. You can think of XPCOM as a reference to all the capabilities available on the lower layers of Firefox.

+ +

Using XPCOM components is relatively simple, as you've seen in previous examples.

+ +
+
+
this.obsService = Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
+
+
+ +

The Cc object (Components.classes) is an index to static objects and class definitions available through XPCOM. The string between the brackets is just an identifier, in this case corresponding to the Observer service. You'll usually know what string to use by reading examples and documentation. There is no comprehensive list of these (that we know of), and that's understandable since it would be a very long list, and it can be extended by add-ons. If you want to see the list in your current Firefox installation, just run the following code in the Error Console:

+ +
+
+
var str = ""; for (var i in Components.classes) { str += i + "\n" }; str
+
+
+ +

A run on Firefox 3.6.2 with a few extensions installed yields 876 strings. That's quite a lot. Luckily, you'll only need to know a handful of those for extension development. The @mozilla.org/ prefix is just a way to keep things namespaced. We would use something like @xulschool.com/ to make our own components.

+ +

Components are either services (static objects) or instances of classes, just like the objects we handle in JS. The method you call on Cc["some-string"] should either be getService or createInstance, depending on what you're asking for. In most cases it is very clear which one to call, but in case of doubt, look for documentation on it. Those two methods always receive the interface identifier as an argument.

+ +

Similarly to Cc, Ci (Components.interfaces) is an index of available interfaces. A modified version of the last code snippet produces an even longer list of available interfaces. Just like in component identifiers, the nsI prefix is just a way of keeping things in order. The NS stands for Netscape, Mozilla's predecessor. The "I" stands for interface. Our interfaces should begin with something like xsIHello.

+ +

An interface is just a definition of a set of attributes and methods that an object implementing it should have. XPCOM components can implement multiple interfaces, and they often do. Let's look at the Preference service as an example of this. We'll look at its documentation in a very old XUL site called XUL Planet. All of its documentation was planned to be migrated to MDC, but it looks like it was never finished and XUL Planet was discontinued. Their XPCOM documentation is better in terms of seeing the relationships between components and interfaces, so we'll use that.

+ +

Another useful resource is this XPCOM reference. This is generated from source, and it's kept relatively up to date. It shows the relationships between components and interfaces, but it's more of a source browser than a documentation reference.

+ +

Stepping into the time machine, we see the Preferences Service component page. Right at the top you can see a list of the interfaces it implements, with a link to a documentation page for each one of them. Then you'll see a list of all members of this object, with some documentation about it. It is particularly important to note that, for every member in the component, you'll see in what interface this member is defined. Clicking on the link for the getBranch method takes you to the nsIPrefService documentation page, where you can see more details on the interface and the method. You can also see a list of what components implement this interface. All of this documentation is generated from the one present in the Firefox source files, so it's in general very complete and well written. It's a shame XUL Planet is no longer with us.

+ +

Interfaces can be awkward to handle. If you want to call a method or use an attribute of interface X in a component, you first need to "cast" the component to interface X. This is done via the QueryInterface method that is included in all XPCOM components.

+ +
+
+
this._prefService =
+  Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch);
+
+this._prefValue = this._prefService.getBoolPref("somePreferenceName");
+
+this._prefService.QueryInterface(Ci.nsIPrefBranch2);
+this._prefService.addObserver("somePreferenceName", this, false);
+this._prefService.QueryInterface(Ci.nsIPrefBranch);
+
+
+ +

This is a common piece of code you'll see when initializing components or JSM that rely on preferences. We use the Preferences Service to get and set preference values, such as the preference value we're getting on the fourth line of code. These methods are in the nsIPrefBranch interface. The getService and createInstance methods allow you to get the component already set to an interface. In many cases you only need to use one interface, and you won't have to worry about QueryInterface. But in this case we need to change the interface to nsIPrefBranch2, which is the one that includes the method that adds a preference observer. Then we change it back, because after that we only need to get and set preferences, and those methods are in nsIPrefBranch.

+ +
Trying to access methods or attributes without having the right interface set will result in an exception being thrown.
+ +

Passing parameters

+ +

Passing parameters to XPCOM methods is no different from other JS objects, with some exceptions. In general, you can rely on JavaScript's ability to transform values to the correct type, but it's usually best to pass the right type in the first place. This section is a quick guide on how to read XPCOM documentation, which basically amounts to understanding the syntax of XPIDL, the language used to specify XPCOM interfaces.

+ +

At MDC, you'll see stuff like this:

+ +
+
+
void setCharPref(in string aPrefName, in string aValue);
+
+
+ +

One of the most important details to notice is that both paratemers have the in keyword. This specifies that these are input parameters, values that the method will use to perform its actions. When is a parameter not an in parameter? In some methods the out keyword is used for parameters that are return values in reality. This is done for certain value types that are not valid as return values in IDL, such as typed arrays.

+ +
+
+
void getChildList(in string aStartingAt, out unsigned long aCount,[array, size_is(aCount), retval] out string aChildArray);
+
+
+ +

This method returns an array of strings. The first parameter is an input that tells the method where to start looking. The second one will hold the length of the return array, and the third parameter will hold the array itself. Note the metadata included in the square brackets, indicating that the parameter is an array, and that its size is determined by the aCount parameter.  Here's one way to invoke this method:

+ +
+
+
let childArrayObj = new Object();
+let childArray;
+
+this._prefService.getChildList("", {}, childArrayObj);
+
+// .value holds the actual array.
+childArray = childArrayObj.value;
+
+
+ +

The general rule for out parameters is that you can pass an empty object, and then you can get the result by accessing the value attribute in this object after the method call. The method will set value for you. Also, since JS arrays have the length attribute to get their length, there's no need for the second parameter to be used, so we just pass it an empty object that we won't use. The second parameter is only necessary for callers from within C++ code that use pointers instead of high-level arrays.

+ +

Some commonly used XPCOM methods require other XPCOM types as parameters. The addObserver method in nsIPrefBranch2 is an example of this.

+ +
+
+
void addObserver(in string aDomain, in nsIObserver aObserver, in boolean aHoldWeak);
+
+
+ +

Luckily, you don't have to do anything special if you want to register your JS object as a preference observer. The nsIObserver has a single method observe, so all you need to do is have an observe method in your object and you'll be OK.

+ +
+
+
XULSchool.PrefObserver = {
+  init: function() {
+
+    this._prefService =
+      Cc["@mozilla.org/preferences-service;1"].getService(Ci.nsIPrefBranch2);
+    // pass 'this' as if it implemented nsIObserver.
+    this._prefService.addObserver(
+      "extensions.xulschoolhello.somePref", this, false);
+  },
+
+  observe : function(aSubject, aTopic, aData) {
+    // do stuff here.
+  }
+};
+
+
+ +

Finally, here's a table summarizing the types you will most likely encounter in XPCOM interfaces, and how to handle them:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
JS typeIDL typesNotes
StringsAUTF8String, string, wstring, char*, othersHistorically there have been several string types in XPCOM. The currently favored type for most cases is AUTF8String. You can read more about it in the XPCOM String Guide.
Integersshort, unsigned short, long, unsigned long, PRInt32, PRUInt32PRInt32 is the equivalent to long. Most PR* types have an easier to read equivalent, so it is better to use those.
Floating pointfloat 
Booleanboolean, PRBool 
Voidvoid 
TimestampsPRTimeThis type is used to pass timestamps measured in milliseconds, such as the output of the getTime() method in a Javascript Date object.
+ +

There are more details about XPIDL in the XPDIL Syntax definition.

+ +

Creating Your Own Components

+ +

JavaScript XPCOM Components

+ +

As we've said before, we recommend using JSM whenever you can. Yet there are some cases where you don't have a choice and you have to create XPCOM components to add a specific feature. In these cases you can choose between compiled XPCOM components, written in C++, or JS XPCOM components. You should favor the latter, they are much less complicated to make and maintain.

+ +

Most of the time you'll need 2 source files for a JS XPCOM component: the IDL interface file, and the implementation JS file. In your final extension XPI you'll need to include the JS implementation file, and the XPT file, which is a compiled version of your IDL file. You won't need the IDL or XPT files if your components only use pre-existing Firefox interfaces. In this case you may also find it easier to implement your component using JSM and the XPCOMUtils module.

+ +

Download this version of the Hello World project with XPCOM to see how XPCOM files are structured in the project and built. (Your build will probably break, we'll cover this later on.)

+ +

In the components directory, the file xsIHelloCounter.idl has the following contents:

+ +
+
+
#include "nsISupports.idl"
+
+/**
+ * Counter for the Hello World extension. Keeps track of how many times the
+ * hello world message has been shown.
+ */
+[scriptable, uuid(BD46F689-6C1D-47D0-BC07-BB52B546B8B5)]
+interface xsIHelloCounter : nsISupports
+{
+  /* The maximum allowed count. */
+  const short MAX_COUNT = 100;
+
+  /* The current count. */
+  readonly attribute short count;
+
+  /**
+   * Increments the display count and returns the new count.
+   * @return the incremented count.
+   */
+  short increment();
+};
+
+
+ +

The bits about nsISupports are common to most XPCOM interface definitions. nsISupports is the base interface for all interfaces, so it should always be included, except for cases where your interface extends another interface. In those cases you just need to replace nsISupports with the interface you're extending. You can also extend from multiple interfaces, by including a comma-separated list of interfaces instead of only one.

+ +
+
+
[scriptable, uuid(BD46F689-6C1D-47D0-BC07-BB52B546B8B5)]
+
+
+ +

The scriptable qualifier says that this component can be accessed from JS code. This can also be specified on a per-method basis, which is something you'll see in some of the interfaces in Firefox, but it's not likely you'll have to do it in your own components. The second part defines a UUID for the interface. You must generate a new one for each interface, and you should change it every time the interface changes. In this case you're forced to use UUID, the email address format used for extension ids won't work.

+ +

We included a constant, an attribute and a method to display examples of the 3, but this is clearly an overly elaborate way to keep a simple counter.

+ +

You can define numeric and boolean constants in IDL files, but not string constants. This is a known limitation of XPIDL, and a simple workaround is to define a readonly attribute instead. This means you have to define a getter in the implementation file, though. You can access constants through a reference of the component, or directly from the interface:

+ +
+
+
// these are equivalent.
+max = Ci.xsIHelloCounter.MAX_COUNT;
+max = counterReference.MAX_COUNT;
+
+
+ +

The implementation file, xsHelloCounter.js, is much longer. We'll analyze it piece by piece.

+ +
+
+
const Cc = Components.classes;
+const Ci = Components.interfaces;
+const Cr = Components.results;
+const Ce = Components.Exception;
+
+
+ +

You should be familiar with this already, although there are a couple of additions, Components.results and Components.Exception. They'll be used further ahead.

+ +
+
+
const CLASS_ID = Components.ID("{37ED5D2A-E223-4386-9854-B64FD38932BF}");
+const CLASS_NAME = "Hello World Counter";
+const CONTRACT_ID = "@xulschool.com/counter;1";
+
+
+ +

These constants are used at the bottom, in the component registration code. They specify the details of the component, such as a unique UUID (you have to generate it too and it must be different from the IDL UUID), a descriptive name (this isn't used anywhere that we know of), and the contract ID, which is the string you use to get a reference to the component. The ";1" at the end of the string is supposed to indicate the version of the component, although it shouldn't change much. It can be useful if there are multiple incompatible versions of the component installed at the same time.

+ +

The implementation object itself should be easy to understand. The only aspects to take into account are that methods and attributes must have the same names as their IDL counterparts, and that the QueryInterface method is implemented:

+ +
+
+
QueryInterface : function(aIID) {
+  if (!aIID.equals(Ci.xsIHelloCounter) &&
+      !aIID.equals(Ci.nsISupports)) {
+    throw Cr.NS_ERROR_NO_INTERFACE;
+ }
+
+  return this;
+}
+
+
+ +

The method is very simple, it validates that the caller is requesting a supported interface, otherwise it throws an exception.

+ +

The rest of the code looks long and complicated, but it is pretty much the same for all components, so you shouldn't worry too much about it. All you have to do to use it in other components is copy it and change some names. The purpose of this code is to register the component so that you can get references to it just like all other Firefox components. It is better read from bottom to top.

+ +
+
+
function NSGetModule(aCompMgr, aFileSpec) {
+  return CounterModule;
+}
+
+
+ +

This piece of code is the first one that Firefox looks for in all implementation files in the components directory. It simply returns the object that precedes it.

+ +
+
+
var CounterModule = {
+  // registerSelf, unregisterSelf, getClassObject, canUnload
+};
+
+
+ +

The only thing you may need to change here is when you need to use the Category Manager. The Category Manager is a service that allows you to register your component under categories that are either pre-existing or you make up. The service also allows you to get all components registered in a category and invoke methods on them. One common use for this service is registering a component as a Content Policy. With it you can detect and filter URL loads. This is covered further ahead in another section of the tutorial.

+ +

The add and delete calls to the Category Manager would have to be done in the registerSelf and unregisterSelf methods:

+ +
+
+
registerSelf : function(aCompMgr, aLocation, aLoaderStr, aType) {
+
+  let categoryManager =
+    Cc[@mozilla.org/categorymanager;1].getService(Ci.nsICategoryManager);
+
+  aCompMgr.QueryInterface(Ci.nsIComponentRegistrar);
+  aCompMgr.registerFactoryLocation(
+    CLASS_ID, CLASS_NAME, CONTRACT_ID, aLocation, aLoaderStr, aType);
+  categoryManager.addCategoryEntry(
+    "content-policy", "XULSchool Hello World", CONTRACT_ID, true, true);
+},
+
+
+ +

In this case the component would need to implement nsIContentPolicy.

+ +

And, finally, the factory object.

+ +
+
+
var CounterFactory = {
+  /* Single instance of the component. */
+  _singletonObj: null,
+
+  createInstance: function(aOuter, aIID) {
+    if (aOuter != null) {
+      throw Cr.NS_ERROR_NO_AGGREGATION;
+    }
+    // in this case we need a unique instance of the service.
+    if (!this._singletonObj) {
+      this._singletonObj = MessageCounter;
+    }
+
+    return this._singletonObj.QueryInterface(aIID);
+  }
+};
+
+
+ +

If we wanted a class that can be instantiated, instead of a singleton service, the Factory would look like this:

+ +
+
+
var CounterFactory = {
+
+  createInstance: function(aOuter, aIID) {
+    if (aOuter != null) {
+      throw Cr.NS_ERROR_NO_AGGREGATION;
+    }
+
+    return (new Counter()).QueryInterface(aIID);
+  }
+};
+
+
+ +

The instructions on how to build an IDL file are included in the section Setting up a Development Environment.

+ +

C++ XPCOM Components

+ +

You do not want to do this unless it's really necessary.

+ +

There are few reasons you might need to use binary XPCOM. One of them is adding functionality to Firefox that it doesn't support natively. In that, you would either need to implement this feature for every platform, or limit your extension compatibility to the ones you'll support. You'll need to build a library file for each one of them: DLL for Windows, dylib for Mac (Intel and PPC) and .so for Linux and similar.

+ +

We won't get into details about this because it's certainly not tutorial material. This blog post details the XPCOM build set up. And you'll need to read the Build Documentation thoroughly to understand how this all works.

+ +
If you need to interact with system libraries without really needing to create one of your own, you should consider using c-types instead. The c-types module is a new bridge between JavaScript and native binaries, introduced in Firefox 3.7. With it, you can interact with existing system libraries without using XPCOM at all.
+ +

{{ PreviousNext("Escuela_XUL/Uso_de_objetos_en_JavaScript", "Escuela_XUL/Notificaciones_Observer") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html b/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html new file mode 100644 index 0000000000..f01864d483 --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/personalizar_elementos_xul_con_xbl/index.html @@ -0,0 +1,544 @@ +--- +title: Personalizar elementos XUL con XBL +slug: Mozilla/Tech/XUL/Escuela_XUL/Personalizar_elementos_XUL_con_XBL +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Custom_XUL_Elements_with_XBL +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

 

+ +

{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}

+ +
+

XML Binding Language (XBL, sometimes also called Extensible Bindings Language) is a language for describing bindings that can be attached to elements in other documents. The element that the binding is attached to, called the bound element, acquires the new behavior specified by the binding.

+
+ +

Taken from the XBL page.

+ +

This somewhat cryptic explanation describes a very simple concept: with XBL you can create your own custom elements. XBL is heavily used in XUL, but in theory it could be applied to any XML language. XBL was submitted to the W3C for standardization, but for now it's used in XUL almost exclusively.

+ +

With XBL you can define new elements and define their properties, attributes, methods and event handlers. Many complex elements such as tabs, buttons and input controls are implemented using XBL and simpler XUL elements. As explained earlier, XUL is really just boxes, text and images.

+ +

We'll look into XBL using a modified version of the Hello World extension. Download the Hello World XBL project, build it and test it for a while. You should see a new item in the Hello World menu, that opens a Binding Test window where you can add "Persons" to a list.

+ +

XBL Basics

+ +

In order to create an XBL binding you'll need 2 files: the XBL file and a CSS file that binds an element name to your XBL declaration. If you look into the content directory, you'll see both files:

+ + + +
If you use bindings on toolbar elements, remember to include the CSS file in the customize dialog, using the style directive in the chrome.manifest file.
+ +

With those 2 files properly defined, we can now use the new element. If you look at file bindingDialog.xul, you'll see that the CSS stylesheet is included, which means that the xshelloperson tag can now be used just like any XUL tag. In this case we're adding the "Persons" dynamically, so you'll have to look into the JS file to see how xshelloperson elements are created and added to the DOM just like any other.

+ +
addPerson : function(aEvent) {
+  // ...
+  let person = document.createElement("xshelloperson");
+  // ...
+  person.setAttribute("name", name);
+  person.setAttribute("greeting", greeting);
+  // ...
+  personList.appendChild(person);
+  // ...
+},
+
+ +

This is where the advantage of XBL is obvious: we only need to create a single node and set some attributes. We didn't need to create a whole XUL structure that would require around 7 nodes every time a "Person" is created. XBL provides the encapsulation we needed to manage these nodes as a unit.

+ +
+
+
As a bonus, you should look into the usage of nsIFilePicker to open a "Open File" dialog in a way that looks native for all systems.
+
+
+ +

Now let's look into the XBL file, person.xml.

+ +
+
+
<bindings xmlns="http://www.mozilla.org/xbl"
+  xmlns:xbl="http://www.mozilla.org/xbl"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+
+ +

The bindings element is the root of the document, and it's a container for binding elements. Notice how the default namespace for the document is XBL, and the XUL namespace is defined as "xul". You'll need to keep this in mind when defining the content of the binding, because weird things can happen if you don't add "xul:" to your content nodes.

+ +
+
+
<binding id="person">
+
+
+ +

In general, you should only have one binding per file. Bindings tend to require many lines of code, and having more than one ends up making gigantic, unbrowsable files. On the other hand, if your bindings are small and have a strong relationship with each other, it makes sense to keep them together. As for the CSS file, it's usually good to have a single file declaring all bindings in your extension.

+ +

Content

+ +

Under the content tag you define the XUL content that will be displayed for your element.

+ +
+
+
<content>
+  <xul:hbox>
+    <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" />
+    <xul:vbox flex="1">
+      <xul:label xbl:inherits="value=name" />
+      <xul:description xbl:inherits="value=greeting" />
+    </xul:vbox>
+    <xul:vbox>
+      <xul:button label="&xulshoolhello.remove.label;"
+        accesskey="&xulshoolhello.remove.accesskey;"
+        oncommand="document.getBindingParent(this).remove(event);" />
+    </xul:vbox>
+  </xul:hbox>
+</content>
+
+
+ +

Our element is very simple, displaying an image, a couple of text lines and a button. Here are a couple of important things to notice:

+ + + +

If you need to create a container element, or any other element that has child nodes, you can use the XBL children tag in your content to indicate the place where the child nodes will be inserted. The includes attribute gives you a little more flexibility with children, but it's rarely needed.

+ +

One important thing to take into account is that you shouldn't use the id attribute in any content nodes. These nodes are part of the XUL DOM just like any other, and having an id attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner items with the same id. In order to work around this problem, the anonid attribute is used instead:

+ +
+
+
 <xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" />
+
+
+ +

And then, in order to get a reference to the node from the JS code in your binding, we use the getAnonymousElementByAttribute DOM method:

+ +
+
+
let nameLabel =
+  document.getAnonymousElementByAttribute(
+    this, "anonid", "xulshoolhello-name-label");
+
+
+ +

Implementation

+ +

The implementation section defines most of the scripting side of your element. Here you can define methods and properties, as well as a constructor and a destructor for your element. JavaScript code is enclosed in CDATA sections to prevent JS and XML syntax conflicts.

+ +

Properties and Fields

+ +

The field and property tags allow you to handle element variables and access them from outside of the element.

+ +

A field holds a value that can be changed, except when the readonly attribute is set. It's very similar to a JS object variable, and we generally use a field for private variables inside of the element.

+ +
+
+
<field name="fieldName">defaultValue</field>
+
+
+ +

From inside your binding methods, you can access fields with:

+ +
+
+
this.fieldName
+
+
+ +

You can also access them from outside of the element, if you have a reference to it:

+ +
+
+
elementRef.fieldName
+
+
+ +
+
+
Just like with JS objects, all fields are publicly accessible, and we use a "_" to indicate a field is "private". 
+
+
+ +

A property is a little more robust. It is defined using a getter and setter method, allowing read-only and write-only properties, as well as more complex behavior. There are two properties defined in our binding, which are just meant for easier access to the two text attributes in the element. We use the shorthand version of the property tag:

+ +
+
+
<property name="name" onget="return this.getAttribute('name');"
+  onset="this.setAttribute('name', val);" />
+
+
+ +

There's a less compact version of the property tag that should be used if the getter or setter code involves more than one line of code:

+ +
+
+
<property name="name">
+  <getter><![CDATA[
+    return this.getAttribute('name');
+  ]]></getter>
+  <setter><![CDATA[
+    this.setAttribute('name', val);
+  ]]></setter>
+</property>
+
+
+ +

Properties can be accessed just the same as fields, and they're the ones we prefer for public members.

+ +
+
+
When you add a node to a XUL document using an XBL binding, all normal DOM operations can be performed on it. You can move it around, delete it or clone it. But there is one thing you need to know about moving or cloning your node: all internal state in the node will be lost. This means that all your properties and fields will be reset. If you want some value to be preserved after such DOM operations, you must set it as an attribute and not an internal value.
+
+
+ +

Methods

+ +

Our "Person" binding has a single method that removes the item from the list:

+ +
+
+
<method name="remove">
+  <parameter name="aEvent" />
+  <body><![CDATA[
+    this.parentNode.removeChild(this);
+  ]]></body>
+</method>
+
+
+ +

As you can see, it's very easy to define a method and the parameters it takes. You can also have a return value using the return keyword, just like on regular JS code. The method uses the parent node to remove the Person node. Simple enough.

+ +

You can do almost anything from XBL code, including using XPCOM components, JS Code Modules and available chrome scripts. The main setback is that you can't have script tags defined in a binding, so you depend on the scripts that have been included in the XUL files that use the binding. Also unlike scripts, you can include stylesheets using the stylesheet XBL element. DTD and properties files can be handled just like in regular XUL.

+ +
+
+
There are two conflicting patterns that you should always keep in mind: encapsulation and separation of presentation and logic. Encapsulation mandates that you try to keep your XBL free of outside dependencies. That is, you shouldn't assume that script X will be included somewhere, because not including it will cause the binding to fail. This suggests that you should keep everything inside your binding. On the other hand, a binding is really just a presentation module. Most XUL elements have basic presentation logic, and any other functionality is processed elsewhere. Plus, XBL files are significantly harder to manage than regular JS files. We prefer to err on the side of simplicity and keep the XBL as simple as possible. If that means having outside dependencies, so be it. But you can still keep some separation and versatility by using custom events to communicate to the outside world. This way you reduce your dependency on specific scripts, and your tag behaves more like the rest.
+
+
+ +

Just like fields and properties, methods are easy to invoke if you have a reference to the object that corresponds to the node.

+ +
+
+
We have experienced problems when calling methods and setting properties on XBL nodes right after they are created and inserted to the document. This is likely due to some asynchronous operation related to node insertion. If you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well).
+
+
+ +

Handlers

+ +

The handlers and handler XBL elements are used to define event handlers for the element. We have a "click" handler that displays the greeting when the "Person" element is clicked:

+ +
+
+
<handler phase="bubbling" event="click"><![CDATA[
+  window.alert(this.greeting);
+]]></handler>
+
+
+ +

Handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing. In those cases you just add regular event attributes to the nodes inside the content tag.

+ +

Inheritance

+ +

Inheritance is one of the most powerful features of XBL. It allows you to create bindings that extend existing bindings, allowing lots of code reuse and subtle behavior modifications. All you need is to use the extends attribute of the binding element:

+ +
+
+
<binding id="manager"
+  extends="chrome://xulschoolhello/content/person.xml#person">
+
+
+ +

This gives you an exact copy of the "Person" binding that you can override as you please.

+ +

You could, for instance, just add a content tag with significantly different XUL content, and leave the implementation alone. You do need to be careful about keeping all anonid attributes consistent, and even some DOM structure if the code does node traversal. Sadly, you can't override only some part of the content. If you want to override it, you have to override all of it.

+ +

A more common inheritance use case is when you want to change the behavior of some methods and properties. You can leave the content alone by not including the content tag, and then just add the methods and properties you wish to override. All you need to do is match the names of the originals. All methods and properties that are not overriden will maintain their original behavior.

+ +

With inheritance you could take the richlistbox element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked. And all with very little additional code. Keep it in mind when creating your custom elements because it can save you lots of time.

+ +

Replacing Existing XUL Elements

+ +

As seen in the beginning of this section, the actual binding process is determined by a simple CSS rule that associates the tag name with the binding. This means that you can change the binding for pretty much any element in Firefox by just adding a CSS rule! This is very powerful: it allows you to change almost any aspect of the interface of any XUL window. In conjuntion with inheritance, it's even easy to do. You can enrich the UI of a Firefox window by extending and replacing elements, which is what the Console² extension does in order to improve the Error Console window.

+ +

Replacing elements should always be a last resort solution, specially if it is done on the main browser window. It's very easy to break the UI of the application or other extensions if you do this the wrong way, so be very careful about it. If you only need to change some specific instances of an element, use very specific CSS rules.

+ +

You can use the -moz-binding property with any CSS selector.

+ +

{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

+ +

{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}

+ +
+

XML Binding Language (XBL, sometimes also called Extensible Bindings Language) is a language for describing bindings that can be attached to elements in other documents. The element that the binding is attached to, called the bound element, acquires the new behavior specified by the binding.

+
+ +

Taken from the XBL page.

+ +

This somewhat cryptic explanation describes a very simple concept: with XBL you can create your own custom elements. XBL is heavily used in XUL, but in theory it could be applied to any XML language. XBL was submitted to the W3C for standardization, but for now it's used in XUL almost exclusively.

+ +

With XBL you can define new elements and define their properties, attributes, methods and event handlers. Many complex elements such as tabs, buttons and input controls are implemented using XBL and simpler XUL elements. As explained earlier, XUL is really just boxes, text and images.

+ +

We'll look into XBL using a modified version of the Hello World extension. Download the Hello World XBL project, build it and test it for a while. You should see a new item in the Hello World menu, that opens a Binding Test window where you can add "Persons" to a list.

+ +

XBL Basics

+ +

In order to create an XBL binding you'll need 2 files: the XBL file and a CSS file that binds an element name to your XBL declaration. If you look into the content directory, you'll see both files:

+ + + +
If you use bindings on toolbar elements, remember to include the CSS file in the customize dialog, using the style directive in the chrome.manifest file.
+ +

With those 2 files properly defined, we can now use the new element. If you look at file bindingDialog.xul, you'll see that the CSS stylesheet is included, which means that the xshelloperson tag can now be used just like any XUL tag. In this case we're adding the "Persons" dynamically, so you'll have to look into the JS file to see how xshelloperson elements are created and added to the DOM just like any other.

+ +
addPerson : function(aEvent) {
+  // ...
+  let person = document.createElement("xshelloperson");
+  // ...
+  person.setAttribute("name", name);
+  person.setAttribute("greeting", greeting);
+  // ...
+  personList.appendChild(person);
+  // ...
+},
+
+ +

This is where the advantage of XBL is obvious: we only need to create a single node and set some attributes. We didn't need to create a whole XUL structure that would require around 7 nodes every time a "Person" is created. XBL provides the encapsulation we needed to manage these nodes as a unit.

+ +
+
+
As a bonus, you should look into the usage of nsIFilePicker to open a "Open File" dialog in a way that looks native for all systems.
+
+
+ +

Now let's look into the XBL file, person.xml.

+ +
+
+
<bindings xmlns="http://www.mozilla.org/xbl"
+  xmlns:xbl="http://www.mozilla.org/xbl"
+  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+
+ +

The bindings element is the root of the document, and it's a container for binding elements. Notice how the default namespace for the document is XBL, and the XUL namespace is defined as "xul". You'll need to keep this in mind when defining the content of the binding, because weird things can happen if you don't add "xul:" to your content nodes.

+ +
+
+
<binding id="person">
+
+
+ +

In general, you should only have one binding per file. Bindings tend to require many lines of code, and having more than one ends up making gigantic, unbrowsable files. On the other hand, if your bindings are small and have a strong relationship with each other, it makes sense to keep them together. As for the CSS file, it's usually good to have a single file declaring all bindings in your extension.

+ +

Content

+ +

Under the content tag you define the XUL content that will be displayed for your element.

+ +
+
+
<content>
+  <xul:hbox>
+    <xul:image class="xulshoolhello-person-image" xbl:inherits="src=image" />
+    <xul:vbox flex="1">
+      <xul:label xbl:inherits="value=name" />
+      <xul:description xbl:inherits="value=greeting" />
+    </xul:vbox>
+    <xul:vbox>
+      <xul:button label="&xulshoolhello.remove.label;"
+        accesskey="&xulshoolhello.remove.accesskey;"
+        oncommand="document.getBindingParent(this).remove(event);" />
+    </xul:vbox>
+  </xul:hbox>
+</content>
+
+
+ +

Our element is very simple, displaying an image, a couple of text lines and a button. Here are a couple of important things to notice:

+ + + +

If you need to create a container element, or any other element that has child nodes, you can use the XBL children tag in your content to indicate the place where the child nodes will be inserted. The includes attribute gives you a little more flexibility with children, but it's rarely needed.

+ +

One important thing to take into account is that you shouldn't use the id attribute in any content nodes. These nodes are part of the XUL DOM just like any other, and having an id attribute is bound to cause problems, given that you could have more than instance of your element in the same document and then multiple inner items with the same id. In order to work around this problem, the anonid attribute is used instead:

+ +
+
+
 <xul:label anonid="xulshoolhello-name-label" xbl:inherits="value=name" />
+
+
+ +

And then, in order to get a reference to the node from the JS code in your binding, we use the getAnonymousElementByAttribute DOM method:

+ +
+
+
let nameLabel =
+  document.getAnonymousElementByAttribute(
+    this, "anonid", "xulshoolhello-name-label");
+
+
+ +

Implementation

+ +

The implementation section defines most of the scripting side of your element. Here you can define methods and properties, as well as a constructor and a destructor for your element. JavaScript code is enclosed in CDATA sections to prevent JS and XML syntax conflicts.

+ +

Properties and Fields

+ +

The field and property tags allow you to handle element variables and access them from outside of the element.

+ +

A field holds a value that can be changed, except when the readonly attribute is set. It's very similar to a JS object variable, and we generally use a field for private variables inside of the element.

+ +
+
+
<field name="fieldName">defaultValue</field>
+
+
+ +

From inside your binding methods, you can access fields with:

+ +
+
+
this.fieldName
+
+
+ +

You can also access them from outside of the element, if you have a reference to it:

+ +
+
+
elementRef.fieldName
+
+
+ +
+
+
Just like with JS objects, all fields are publicly accessible, and we use a "_" to indicate a field is "private". 
+
+
+ +

A property is a little more robust. It is defined using a getter and setter method, allowing read-only and write-only properties, as well as more complex behavior. There are two properties defined in our binding, which are just meant for easier access to the two text attributes in the element. We use the shorthand version of the property tag:

+ +
+
+
<property name="name" onget="return this.getAttribute('name');"
+  onset="this.setAttribute('name', val);" />
+
+
+ +

There's a less compact version of the property tag that should be used if the getter or setter code involves more than one line of code:

+ +
+
+
<property name="name">
+  <getter><![CDATA[
+    return this.getAttribute('name');
+  ]]></getter>
+  <setter><![CDATA[
+    this.setAttribute('name', val);
+  ]]></setter>
+</property>
+
+
+ +

Properties can be accessed just the same as fields, and they're the ones we prefer for public members.

+ +
+
+
When you add a node to a XUL document using an XBL binding, all normal DOM operations can be performed on it. You can move it around, delete it or clone it. But there is one thing you need to know about moving or cloning your node: all internal state in the node will be lost. This means that all your properties and fields will be reset. If you want some value to be preserved after such DOM operations, you must set it as an attribute and not an internal value.
+
+
+ +

Methods

+ +

Our "Person" binding has a single method that removes the item from the list:

+ +
+
+
<method name="remove">
+  <parameter name="aEvent" />
+  <body><![CDATA[
+    this.parentNode.removeChild(this);
+  ]]></body>
+</method>
+
+
+ +

As you can see, it's very easy to define a method and the parameters it takes. You can also have a return value using the return keyword, just like on regular JS code. The method uses the parent node to remove the Person node. Simple enough.

+ +

You can do almost anything from XBL code, including using XPCOM components, JS Code Modules and available chrome scripts. The main setback is that you can't have script tags defined in a binding, so you depend on the scripts that have been included in the XUL files that use the binding. Also unlike scripts, you can include stylesheets using the stylesheet XBL element. DTD and properties files can be handled just like in regular XUL.

+ +
+
+
There are two conflicting patterns that you should always keep in mind: encapsulation and separation of presentation and logic. Encapsulation mandates that you try to keep your XBL free of outside dependencies. That is, you shouldn't assume that script X will be included somewhere, because not including it will cause the binding to fail. This suggests that you should keep everything inside your binding. On the other hand, a binding is really just a presentation module. Most XUL elements have basic presentation logic, and any other functionality is processed elsewhere. Plus, XBL files are significantly harder to manage than regular JS files. We prefer to err on the side of simplicity and keep the XBL as simple as possible. If that means having outside dependencies, so be it. But you can still keep some separation and versatility by using custom events to communicate to the outside world. This way you reduce your dependency on specific scripts, and your tag behaves more like the rest.
+
+
+ +

Just like fields and properties, methods are easy to invoke if you have a reference to the object that corresponds to the node.

+ +
+
+
We have experienced problems when calling methods and setting properties on XBL nodes right after they are created and inserted to the document. This is likely due to some asynchronous operation related to node insertion. If you need to perform an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well).
+
+
+ +

Handlers

+ +

The handlers and handler XBL elements are used to define event handlers for the element. We have a "click" handler that displays the greeting when the "Person" element is clicked:

+ +
+
+
<handler phase="bubbling" event="click"><![CDATA[
+  window.alert(this.greeting);
+]]></handler>
+
+
+ +

Handlers are not necessary all that often, since in most cases you'll need the events to only apply to a part of the binding, not the whole thing. In those cases you just add regular event attributes to the nodes inside the content tag.

+ +

Inheritance

+ +

Inheritance is one of the most powerful features of XBL. It allows you to create bindings that extend existing bindings, allowing lots of code reuse and subtle behavior modifications. All you need is to use the extends attribute of the binding element:

+ +
+
+
<binding id="manager"
+  extends="chrome://xulschoolhello/content/person.xml#person">
+
+
+ +

This gives you an exact copy of the "Person" binding that you can override as you please.

+ +

You could, for instance, just add a content tag with significantly different XUL content, and leave the implementation alone. You do need to be careful about keeping all anonid attributes consistent, and even some DOM structure if the code does node traversal. Sadly, you can't override only some part of the content. If you want to override it, you have to override all of it.

+ +

A more common inheritance use case is when you want to change the behavior of some methods and properties. You can leave the content alone by not including the content tag, and then just add the methods and properties you wish to override. All you need to do is match the names of the originals. All methods and properties that are not overriden will maintain their original behavior.

+ +

With inheritance you could take the richlistbox element and modify it to make a rich item tree, or create a switch button that changes state everytime it's clicked. And all with very little additional code. Keep it in mind when creating your custom elements because it can save you lots of time.

+ +

Replacing Existing XUL Elements

+ +

As seen in the beginning of this section, the actual binding process is determined by a simple CSS rule that associates the tag name with the binding. This means that you can change the binding for pretty much any element in Firefox by just adding a CSS rule! This is very powerful: it allows you to change almost any aspect of the interface of any XUL window. In conjuntion with inheritance, it's even easy to do. You can enrich the UI of a Firefox window by extending and replacing elements, which is what the Console² extension does in order to improve the Error Console window.

+ +

Replacing elements should always be a last resort solution, specially if it is done on the main browser window. It's very easy to break the UI of the application or other extensions if you do this the wrong way, so be very careful about it. If you only need to change some specific instances of an element, use very specific CSS rules.

+ +

You can use the -moz-binding property with any CSS selector.

+ +

{{ PreviousNext("Escuela_XUL/Enlazando_contenido_remoto", "Escuela_XUL/Notificaciones_de_usuario_y_alertas") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git "a/files/es/mozilla/tech/xul/escuela_xul/sitios_\303\272tiles_de_la_comunidad_mozilla/index.html" "b/files/es/mozilla/tech/xul/escuela_xul/sitios_\303\272tiles_de_la_comunidad_mozilla/index.html" new file mode 100644 index 0000000000..02cd9bfa0f --- /dev/null +++ "b/files/es/mozilla/tech/xul/escuela_xul/sitios_\303\272tiles_de_la_comunidad_mozilla/index.html" @@ -0,0 +1,46 @@ +--- +title: Sitios útiles de la comunidad Mozilla +slug: Mozilla/Tech/XUL/Escuela_XUL/Sitios_útiles_de_la_comunidad_Mozilla +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Useful_Mozilla_Community_Sites +--- +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}{{AddonSidebar}}

+ +

{{ Previous("Escuela_XUL/Documentación_de_Mozilla") }}

+ +

The Mozilla Community is very rich and active. It's a very powerful tool you have when developing on top of the Mozilla platform, and you should take advantage of it in order to create a truly successful add-on .

+ +

AMO

+ +

AMO (Mozilla Add-ons) is the official Mozilla repository for add-ons. It allows you to upload, search and download all types of add-ons for Mozilla applications. This is the best way to get your extension to users from all around the world.

+ +

Adding your extension to AMO is easy. All you need is your XPI, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of forms. But this won't make your extension public right away. AMO has a Review Process that prevents malicious, insecure or low quality extensions to make it to the public site. Your extension begins in a sandbox with limited access, and once you nominate it an editor will review it and see if it is appropriate for the public AMO site, where everyone can see it and install it. The review process often takes a few weeks. Just be patient and make sure your extension follows AMO's policies when you nominate it. You can still get a good number of downloads while being in the sandbox.

+ +

One of the main advantages of using AMO is that it handles updates automatically for published add-ons. You just need to upload a new version of your extension, and once it's approved it will be pushed as an update to all your users. If you decide to host your own extension, you'll have to learn about the update system in order to push your own updates.

+ +

Babelzilla

+ +

Babelzilla is a worldwide community of localizers. Developers submit their extensions using the Web Translation System (WTS) and volunteers around the world translate them to different languages. The community is very active, and you can be sure to get translations for the most commonly used languages within a few days of submitting your extension. You'll also receive feedback that you wouldn't notice by testing only in one language, which can reveal other bugs in your locale handling.

+ +

There's a significant portion of users that use a localized version of Firefox, so you shouldn't neglect them. Using Babelzilla takes little time and is very valuable.

+ +

Mozdev

+ +

mozdev.org provides free project hosting and software development tools for Mozilla applications and add-ons. It is the only hosting service tailored to the needs of the Mozilla community.

+ +

It offers many necessary services such as bug tracking, source code repositories, download mirrors and many communication tools. There are other free hosting sites such as Souceforge and Google Code that are also very good, but not as specialized as Mozdev. You should pick the one that best fits your development needs.

+ +

Conclusion

+ +

That's it!

+ +

This is the end of the XUL School Tutorial. Hopefully this guide has helped you get started with add-on development and you're on your way to joining the large Mozilla add-ons developer community. The sheer volume of material can be overwhelming, but you can always come back and use this tutorial as a reference for your future development. Now all you need is a good idea (in case you didn't have one already) and get started.

+ +

Happy coding!

+ +

{{ Previous("Escuela_XUL/Documentación_de_Mozilla") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html b/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html new file mode 100644 index 0000000000..ceca9d687d --- /dev/null +++ b/files/es/mozilla/tech/xul/escuela_xul/uso_de_objetos_en_javascript/index.html @@ -0,0 +1,338 @@ +--- +title: Uso de objetos en JavaScript +slug: Mozilla/Tech/XUL/Escuela_XUL/Uso_de_objetos_en_JavaScript +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/JavaScript_Object_Management +--- +

{{AddonSidebar}}

+ +
+

Support for extensions using XUL/XPCOM or the Add-on SDK was removed in Firefox 57, released November 2017. As there is no supported version of Firefox enabling these technologies, this page will be removed by December 2020.

+
+ +

{{LegacyAddonsNotice}}

+ +

{{ PreviousNext("Escuela_XUL/Agregar_barras_laterales", "Escuela_XUL/Objetos_XPCOM") }}

+ +

Chrome JavaScript

+ +

In this section we'll look into how to handle JavaScript data effectively, beginning with chrome code, in ways which will prevent pollution of shared namespaces and conflicts with other add-ons resulting from such global namespace pollution.

+ +

The first step to good JavaScript object management is having a namespace that you know will not conflict with Firefox code or other extensions. Namespace declaration is best located in a file of its own, so that you have this one JS file that should be included in all of your XUL files.

+ +

We'll be using the placeholder 〈Namespace〉 below. This needs to be replaced with an identifier name which is unique to your add-on. If your add-on is called Sergeant Pepper, for instance, then SgtPepper would be a good namespace name.

+ +
+
+
/**
+ * 〈Namespace〉 namespace.
+ */
+if (typeof 〈Namespace〉 == "undefined") {
+  var 〈Namespace〉 = {};
+};
+
+
+
+ +
+
+
The naming standard that we normally follow is that the first part of the namespace corresponds to the development group (or company), and the second to the specific project. However, most extensions are small projects by individuals, so these examples follow a more practical approach of having just one namespace with the project name.
+
+
+ +

Notice how the 〈Namespace〉 namespace is declared using var. We need the namespace to be a global object that it can be used everywhere in the window chrome.

+ +

You can include functions in any namespace, since namespaces are just regular JS objects. That should come in handy when you have general utility functions or properties that you want to use across all objects within the namespace. For instance, there are frequently used XPCOM services such as the Observer service that can be included as members in the namespace:

+ +
+
+
/**
+ * 〈Namespace〉 namespace.
+ */
+if (typeof 〈Namespace〉 == "undefined") {
+  var 〈Namespace〉 = {
+    /**
+     * Initializes this object.
+     */
+    init : function() {
+      this.obsService =
+        Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
+    }
+  };
+
+  /**
+   * Constructor.
+   */
+  (function() {
+    this.init();
+  }).apply(〈Namespace〉);
+};
+
+
+
+ +

JS objects can also be treated as string-indexed arrays:

+ +
+
+
+
+
// equivalent.
+〈Namespace〉.Hello = {};
+〈Namespace〉["Hello"] = {};
+
+// equivalent.
+〈Namespace〉.Hello.init();
+〈Namespace〉.Hello["init"]();
+
+
+
+ +

This is very useful in cases where you have to set attributes or functions with dynamically generated names. It's one of the funky properties of JavaScript: all objects are nothing more than name / value mappings. You can add or replace functions and attributes to any Javascript object, at any moment you want. This is an odd, but powerful feature that comes in handy at times when things get complicated. For instance, you could replace a method in any object in the Firefox chrome, so that it behaves differently than how it normally does. This should be a last resort option, but it is very useful at times.

+
+
+ +

You usually need only one JS file to control a XUL window, since the code required is normally not that much. If you have complex behavior that requires too much code, look for ways to divide it into multiple objects and files. You can include as many scripts in a XUL window as you need.

+ +

To initialize your chrome objects, it's usually better to run the initialization code from the "load" event handler for the window. The load event is fired after the DOM on the window has loaded completely, but before it's displayed to the user. This allows you to manipulate and possibly change elements in the window without the user noticing the changes.

+ +
+
+
/**
+ * Controls the browser overlay for the Hello World extension.
+ */
+〈Namespace〉.BrowserOverlay = {
+  /**
+   * Initializes this object.
+   */
+  init : function(aEvent) {
+    this._stringBundle = document.getElementById("xulschoolhello-string-bundle");
+    // you can make changes to the window DOM here.
+  }
+  // more stuff
+};
+
+window.addEventListener(
+  "load", function() { 〈Namespace〉.BrowserOverlay.init(); }, false);
+
+
+
+ +

There are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs. The window has to finish loading before it can do any of these things. They are bad UI practices anyway and you should avoid them. If you really need to do something like this anyway, one way to do it is to have a timeout execute the code after a delay:

+ +
+
+
init : function(aEvent) {
+  let that = this;
+
+  this._stringBundle = document.getElementById("xs-hw-string-bundle");
+  window.setTimeout(
+    function() {
+      window.alert(that._stringBundle.getString("xulschoolhello.greeting.label")); }, 0);
+}
+
+
+
+ +

The setTimeout function executes the function in the first parameter, after a delay in miliseconds specified by the second parameter. In this case we set the delay to 0, which means the function should be executed as soon as possible. Firefox has a minimum delay of 10-15ms (taken from this blog post), so it won't really run instantly. It is more than enough to let the window finish its load.

+ +
+
+
Use window.setTimeout and window.setInterval to control timed code execution. In case you're using JavaScript Code Modules or XPCOM objects, where a window object is not readily available, use an nsITimer instead. 
+
+
+ +
This post suggests a way to achieve a true zero ms timeout, as a simple way to achieve parallelism in JS code.
+ +

Notice the way we send callback functions as parameters, and the use of an alternate reference for this which we always name that. This is all necessary due to a JavaScript feature (quirk would be a better word for it) called Method Binding. The consequence of doing this wrong is to have a this reference that doesn't do what you expected it to do. There are a few workarounds for this, and we use the ones we have found to be the most elegant and clear to read.

+ +
+
+
The general guideline we follow is this: whenever you have to set a callback function parameter, wrap it in an anonymous function. That is, something like function() { /* your code, usually a single function call. */ }. If you have to use a reference to this inside the function, declare a variable called that that equals this, and use that in the anonymous function.
+
+
+ +

JavaScript has a host of features that make it extremely flexible, but it also has some disadvantages, as it is not as strict as other languages, such as Java. A clear example of this is the fact that there are no private or public keywords that allow you to protect object members. As a alternative for this, a naming standard is frequently used to distinguish private and public members. There's no scope enforcement whatsoever, but this standard give others the chance to "play nice" and don't use private members.

+ +
+
+
Use "_" at the beginning of private attributes and methods in JS objects. For example: _stringBundle, _createUserNode().
+
+
+ +

Exercise

+ +

Here's a short exercise to test a particular aspect of the chrome. Modify the Hello World extension so that the message says how many times it has been displayed. The message could say something like "Hello! This message has been shown 5 times." Keep the counter as a variable in the BrowserOverlay object, and increment it every time the message is going to be shown.

+ +

Once you have this working right, try the following: open the message a few times, so that the number increments. Now open a new window and display the message from the new window. What do you think will happen? What will the count be this time?

+ +

You probably didn't expect this, but the count was reset in the new window. Each window keeps its own counter, and now the extension is not behaving as expected. This is a fundamental lesson: the chrome is not global, it's window-specific. All of your scripts and objects are replicated for each window, and they work independently from each other. This is an issue that is very easy to overlook, since most Firefox users, specially power users, have a single window open at all times. You have to make sure you test your extension with multiple windows open; never assume everything will work the same as with a single window.

+ +

Now, in most cases you'll need to coordinate data in a way that it is consistent for all open Firefox windows. There are several ways in which you can do this. Preferences is one of them, and they are covered in another section of this tutorial. Two other ways are JavaScript Code Modules (Firefox 3 and above), and XPCOM.

+ +

JavaScript Code Modules

+ +

JavaScript Code Modules (also known as JSM) are new to Firefox 3, and they're the best tool for keeping everything in sync between windows. They're very simple to set up. The first thing you need to do is add an entry in the chrome.manifest file:

+ +
+
+
resource  xulschoolhello     modules/
+
+
+
+ +

Javascript code modules are accessed with the resource protocol, which is very similar to the chrome protocol. Just like with the chrome, we define the package name and then a path. To keep things simple, just locate the JSM files in a modules directory under the root of our project. In order to access a file messageCount.js in this directory, the URL would be:

+ +
+
+
resource://xulschoolhello/messageCount.js
+
+
+
+ +

Code modules are regular JS files, so there's nothing new in regards to naming or file types. Mozilla has adopted a standard of using the extension .jsm for these files, but they say .js is fine as well. To keep things simple, specially regarding code editors and default file associations in the developer's system, we have decided to stick with .js.

+ +

Download this version of the Hello World project with JSM to see the changes you need to make to the build system in order to include the files in the modules folder. They are minimal, and we add a very small Makefile.in file in the modules directory, just to keep everything separated and organized.

+ +

With the setup out of the way, let's get to it. What are JavaScript Code Modules?

+ +

A JavaScript Code Module is a regular JS file that specifies which of the declared elements in it are public. All module files should begin with the a declaration like this:

+ +
+
+
var EXPORTED_SYMBOLS = [ "〈ModuleNamespace〉" ];
+
+
+
+ +

EXPORTED_SYMBOLS is a special identifier that tells Firefox that this file is only publishing the object named 〈ModuleNamespace〉. Several objects, functions and variables can be declared on this file, but the only object visible from the outside will be 〈ModuleNamespace〉, which is a namespace in our case. Because of namespacing, we don't need to worry much about what to export, usually we just need the namespace object. All of the objects inside of it are exported as well, since they are members of the 〈ModuleNamespace〉 object.

+ +

Module files can be imported to a chrome script or to other code modules with the following line:

+ +
+
+
Components.utils.import("resource://xulschoolhello/messageCount.js");
+
+
+
+ +
When using Components.utils.import, code modules must be loaded using a file: or resource: URL pointing to a file on the disk. In particular, chrome: URLs (even those that point to a file outside a jar archive) are not valid.
+ +

To get a better idea, let's look at the code of the modified Hello World example. We have defined two files, one to declare namespaces and another one for the message count functionality mentioned in the previous exercise.

+ +

Here again we're using a placeholder, 〈ModuleNamespace〉, for the identifier name that you'll need to choose.

+ +
+
+
var EXPORTED_SYMBOLS = [ "〈ModuleNamespace〉" ];
+
+const { classes: Cc, interfaces: Ci } = Components;
+
+/**
+ * 〈ModuleNamespace〉 namespace.
+ */
+var 〈ModuleNamespace〉 = {};
+
+
+
+ +

This should all be familiar enough. We're declaring the namespace we'll use at the module level. We need a separate namespace for the chrome because the chrome namespace objects are repeated for each window, while the module namespace objects are unique for all windows. Setting window-specific data on code modules will lead to nothing but problems, so be careful when deciding what should be chrome and what shouldn't be. We needn't test for the pre-existence of our namespace object here, as modules are given their own namespace.

+ +

The 2 declared constants above are used to reduce code size. We frequently need to use XPCOM components in our code, so instead of doing this:

+ +
+
+
this.obsService =
+  Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService);
+
+
+
+ +

It's better to do this:

+ +
+
+
this.obsService =
+  Cc["@mozilla.org/observer-service;1"].getService(Ci.nsIObserverService);
+
+
+
+ +

These 2 constants don't need to be defined in the overlay because they are already defined globally in the browser.js file in Firefox. We only need to define them when we're making windows of our own, or when we're working with code outside of the chrome (or porting your code to SeaMonkey, which doesn't have those constants declared in the main window).

+ +
+
+
Include the Cc and Ci constants in all XUL windows that are not overlays, all JSM files, and all XPCOM components (see further ahead). Do this even if you don't need them now. It's better to just make a habit out of it.
+
+
+ +

This is a point that is worth highlighting: modules work outside of the window scope. Unlike scripts in the chrome, modules don't have access to objects such as window, document, or other global functions, such as openUILink. These are all UI components and UI operations anyway, so they are better done in the chrome.

+ +
+
+
As a general guideline, we keep all of our business logic in JSM, available through service objects, and chrome scripts are limited to handle presentation logic.
+
+
+ +

We handle most of our code through static objects, singleton objects that don't require instantiation. But it is sometimes necessary to define classes and be able to create multiple instances. Common cases include interacting with a local database or a remote API. Data will often be translated into arrays of entities, and those are better represented through classes. One way to define a class is as follows:

+ +
+
+
/**
+ * User class. Represents a Hello World user (whatever that may be).
+ */
+〈ModuleNamespace〉.User = function(aName, aURL) {
+  this._name = aName;
+  this._url = aURL;
+};
+
+/**
+ * User class methods.
+ */
+〈ModuleNamespace〉.User.prototype = {
+  /* The name of the user. */
+
+  _name : null,
+  /* The URL of the user. */
+
+  _url : null,
+
+  /**
+   * Gets the user name.
+   * @return the user name.
+   */
+  get name() {
+    return this._name;
+  },
+
+  /**
+   * Gets the user URL.
+   * @return the user URL.
+   */
+  get url() {
+    return this._url;
+  }
+};
+
+
+
+ +

In this example we defined a fictitious User class for the Hello World extension. Using the function keyword to define a class is odd, but this is just the JavaScript way: functions are also objects. The definition of the class acts as a constructor as well, and then you can define all other members using the prototype attribute. In this case we defined "getter" properties for the name and url members. This way we have immutable instances of our class. Well, only if consumers of the class play nice and don't change anything they shouldn't.

+ +

Creating an instance and using it is simple enough:

+ +
+
+
let user = new 〈ModuleNamespace〉.User("Pete", "http://example.com/pete");
+
+window.alert(user.name);
+
+
+
+ +

This is something you can do with JS in general. You can use it in JSM, chrome, even on regular web pages. Since entities tend to be used all throughout an application, we think that having those classes defined at the module level is the best approach.

+ +

JSM is the best solution to handle objects that are window-independent. In the following section we'll discuss XPCOM, which is an older alternative to JSM and one of the foundations of Mozilla applications. You shouldn't skip that section because there are many common situations in extension development where you'll have to use XPCOM, maybe even implement XPCOM components of your own.

+ +

{{ PreviousNext("Escuela_XUL/Agregar_barras_laterales", "Escuela_XUL/Objetos_XPCOM") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/es/mozilla/thunderbird/index.html b/files/es/mozilla/thunderbird/index.html new file mode 100644 index 0000000000..7e7c314908 --- /dev/null +++ b/files/es/mozilla/thunderbird/index.html @@ -0,0 +1,91 @@ +--- +title: Thunderbird +slug: Mozilla/Thunderbird +translation_of: Mozilla/Thunderbird +--- +

Thunderbird es la aplicación de mensajeria de Mozilla. Estas páginas documentan Thunderbird y tambien brindan enlaces a documentación acerca de MailNews backend el cual es usado en otros proyectos como Eudora/Penelope, Seamonkey, Correo, etc. 

+

Thunderbird es el hermano menor de Firefox, y esta construido sobre la misma plataforma técnica que el navegador web. En desarrollo por varios años, y actualmente es uno de los más populares clientes de correo electrónico de código abierto, es utilizado por millones de personas pot todo el mundo para reunir todas las cuentas de correo electrónico, grupo de noticias y alimentar la lectura en un conocido entorno de alta productividad.  (A partir de principios del 2007 hasta principios del 2011 Thunderbird fue desarrollado por Mozilla Messaging, una subsidiaria que era propiedad de Mozilla.)

+
+
+  
+
+ + + + + + + + + + + + + +
+

Documentación

+
+
+ Construyendo Thunderbird
+
+ Información acerca de la construcción de Thunderbird con el repositorio comm-central. También hay informació acerca de how comm-central works, como el review process works y como usar el Mozilla symbol server para ayudar con la depuración
+
+ Protocolos MailNews
+
+ Rigurosa documentación acerca de los protocolos de correo..
+
+ Vista de Base de Datos
+
+ Informació backend acerca de  {{ Interface("nsIMsgDBView") }} e interfaces relacionadas..
+
+ Documentación de la API de Thunderbird
+
+ Documentación de la API de thunderbird
+
+ Extensión de la documentación
+
+ Tutoriales y consejor para la creació de extensiones de Thunderbird
+
+ Pruebas Automatizadas
+
+ Detalles de las facilidades de las pruebas automatizadas de Thunderbird
+
+ Thunderbird en la Empresa
+
+ Ayuda con la implementación de Thunderbird en las grandes organizaciones
+
+
+
+ 		+

Comunidad

+ +

Preguntas de extensiones se discuten con frecuencia en el grupo dev-apps-thunderbird:

+

{{ DiscussionList("dev-apps-thunderbird", "mozilla.dev.apps.thunderbird") }}

+
    +
  • Los debates de desarrollo ocurren en la lista de correo tb-planning:
    • +
  • suscripción
    • +
  • archivos
    • +
+ +

Herramientas

+ + +
+
+ Extensiones
+
+
  
+


+ Categories

+

Interwiki Language Links

diff --git a/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html b/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html new file mode 100644 index 0000000000..681280ec5e --- /dev/null +++ b/files/es/mozilla/thunderbird/thunderbird_in_the_enterprise/index.html @@ -0,0 +1,37 @@ +--- +title: Thunderbird en la empresa +slug: Mozilla/Thunderbird/Thunderbird_in_the_Enterprise +tags: + - empresa + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_in_the_Enterprise +--- +

Muchas organizaciones utilizan Mozilla Thunderbird como su cliente de correo. Esta página enlaza a documentos en la red de desarrolladores de mozilla (Mozilla Developer Network) y en cualquier sitio en la red que sea relevante al desarrollo de Mozilla Thunderbird en la empresa.

+ + + +

La lista de correo tb-enterprise está disponible para discutir acerca de Thunderbird en la empresa.

+ +

A continuación, se presenta información útil sobre Mozilla en la Empresa en:

+ + diff --git a/files/es/mozilla/toolkit_version_format/index.html b/files/es/mozilla/toolkit_version_format/index.html new file mode 100644 index 0000000000..9d4de58b0b --- /dev/null +++ b/files/es/mozilla/toolkit_version_format/index.html @@ -0,0 +1,61 @@ +--- +title: Formato para la versión del Toolkit +slug: Mozilla/Toolkit_version_format +tags: + - Toolkit API +translation_of: Mozilla/Toolkit_version_format +--- +

Este documento es una referencia para el formato de versión, tal como se usa en Firefox 1.5 (XULRunner 1.8) y posteriores. Este formato se usa por el administrador de extensiones, la actualización de software y otras partes de la plataforma. Las versiones en, al menos, los siguientes lugares deben ser conformes a este formato:

+ +

Puede usar nsIVersionComparator para comparar versiones de su aplicación.

+

Véase {{ Anch("Formatos de versión previas") }} más abajo para una descripción del formato de versión anterior usado en Firefox/Thunderbird 1.0.

+

Formato de versión

+

Una cadena de versión consiste en una o más partes de versión, separadas con puntos.

+

Cada parte de versión es en sí misma interpretada como una secuencia de cuatro partes: <tt><número-a><cadena-b><número-c><cadena-d></tt>. Cada una de las partes es opcional. Los números son enteros en base 10 (pueden ser negativos); las cadenas son ASCII.

+

Algunos ejemplos de partes de versión válidas:

+ +

Se aplican algunas reglas especiales de interpretación con el fin de proporcionar compatibilidad hacia atrás y legibilidad:

+ +

La lógica tras el particionado de una parte de versión en una secuencia de cadenas y números es que, cuando se comparan partes de versión, las partes numéricas se comparan como números, por ejemplo: '1.0pre1' < '1.0pre10', mientras que las cadenas se comparan byte a byte. Véase la siguiente sección para obtener detalles sobre cómo se comparan las versiones.

+

Comparar versiones

+

Cuando se comparan dos cadenas de versión, sus partes de versión se comparan de izquierda a derecha. Una parte de versión vacía o no presente equivale a 0.

+

Si en algún punto una parte de una cadena de versión es mayor que la parte correspondiente de otra cadena de versión, entonces la primera cadena de versión es mayor que la otra.

+

En caso contrario, las cadenas de versión son iguales. Observe que, puesto que las partes de versión no presentes se tratan como si fueran 0, las siguientes cadenas de versión son iguales: 1, 1.0, 1.0., 1.0.0, e incluso 1.0...

+

Comparar partes de versión

+

Las partes de versión también se comparan de izquierda a derecha; las partes A y C se comparan como números, mientras que las partes B y D se comparan byte a byte. Una parte de tipo cadena que exista es siempre menor que una parte de tipo cadena no existente (<tt>1.6a</tt> es menor que <tt>1.6</tt>).

+

Ejemplos

+
1.-1
+< 1 == 1. == 1.0 == 1.0.0
+< 1.1a < 1.1aa < 1.1ab < 1.1b < 1.1c
+< 1.1whatever
+< 1.1pre == 1.1pre0 == 1.0+
+< 1.1pre1a < 1.1pre1aa < 1.1pre1b < 1.1pre1
+< 1.1pre2
+< 1.1pre10
+< 1.1.-1
+< 1.1 == 1.1.0 == 1.1.00
+< 1.10
+< 1.* < 1.*.1
+< 2.0
+
+

Formatos de versión previas

+

Firefox y Thunderbird 1.0 usaban un formato de versión más simple, en concreto

+
mayor[.menor[.publicación[.compilación]]][+]
+
+

donde <tt>{{ mediawiki.external('..') }}</tt> designa un componente opcional y <tt>mayor</tt>, <tt>menor</tt>, <tt>publicación</tt> y <tt>compilación</tt> son todos enteros no negativos.

diff --git a/files/es/mozilla/working_with_windows_in_chrome_code/index.html b/files/es/mozilla/working_with_windows_in_chrome_code/index.html new file mode 100644 index 0000000000..74ac175a82 --- /dev/null +++ b/files/es/mozilla/working_with_windows_in_chrome_code/index.html @@ -0,0 +1,386 @@ +--- +title: Trabajar con ventanas desde código chrome +slug: Mozilla/Working_with_windows_in_chrome_code +tags: + - Extensions + - páginas_a_traducir +translation_of: Mozilla/Working_with_windows_in_chrome_code +--- +

Este artículo describe el trabajo con múltiples ventanas en código chrome Mozilla (aplicaciones XUL y extensiones). Contiene trucos y código de ejemplo para abrir nuevas ventanas, encontrar las ventanas ya abiertas, y pasar datos entre diferentes ventanas.

+ +

Abrir ventanas

+ +

Para abrir una ventana nueva, solemos usar la llamada DOM window.open o window.openDialog, así:

+ +
var win = window.open("chrome://myextension/content/about.xul",
+                      "aboutMyExtension", "chrome,centerscreen");
+
+ +

El primer parámetro de window.open es la URI del archivo XUL que describe la ventana y su contenido.

+ +

El segundo parámetro es el nombre de la ventana. El nombre de la ventana puede ser usado en enlaces o formularios como el atributo target. Esto es diferente del título de ventana visible por el usuario, que es especificado usando XUL.

+ +

El tercer, y opcional, parámetro es una lista de las características especiales que la ventana debería tener.

+ +

La función window.openDialog funciona de forma similar, pero te permite especificar argumentos opcionales que pueden ser referenciados desde el código JavaScript. También maneja las funciones de ventana de forma un poco distinta, suponiendo siempre que la funcionalidad dialog es especificada.

+ +

Si el objeto Window no está disponible (por ejemplo, al abrir una ventana desde código de componente XPCOM), puedes querer usar la interfaz nsiWindowWatcher. Sus parámetros son similares a window.open. En realidad, la implementación de window.open llama a métodos de nsiWindowWatcher.

+ +
var ww = Components.classes["@mozilla.org/embedcomp/window-watcher;1"]
+                   .getService(Components.interfaces.nsIWindowWatcher);
+var win = ww.openWindow(null, "chrome://myextension/content/about.xul",
+                        "aboutMyExtension", "chrome,centerscreen", null);
+
+ +

Window object

+ +

Note the win variable in the above section, which is assigned the return value of window.open. It can be used to access the opened window. The return value of window.open (and similar methods) is a Window object (usually ChromeWindow), of the same type that the window variable.

+ +

Technically speaking, it implements a number of interfaces, including nsIDOMJSWindow and nsIDOMWindowInternal, but it also contains the user-defined properties for global variables and functions of the window. So, for example, to access the DOM document corresponding to the window, you can use win.document.

+ +

Note however, that the open() call returns before the window is fully loaded, so some calls, like win.document.getElementById() will fail. To overcome this difficulty, you can move the initialization code to a load handler of the window being opened or pass a callback function, as described below.

+ +

You can get a Window object from a document using document.defaultView.

+ +

Content windows

+ +

When a XUL window contains a widget capable of displaying a page, such as <browser> or <iframe>, the document in that widget is, naturally, separate from the document of the chrome window itself. There also is a Window object for each sub-document, although there's no window in a common sense for the sub-document.

+ +

The same holds for chrome windows opened inside a tab of <tabbrowser>. The elements above the chrome document opened in the tab are separate from your chrome document.

+ +

The following two subsections describe how to cross chrome-content boundaries in either way, i.e. accessing elements which are ancestors of your chrome document, or accessing elements which are descendants of your chrome document (but nevertheless in a different context).

+ +

Accessing content documents

+ +

Assume you have a document loaded in a <tabbrowser>, <browser>, or <iframe> element inside your document. You can use browser.contentDocument to access that document and browser.contentWindow to the Window object of that document.

+ +

You should be aware of XPCNativeWrappers when working with untrusted content. With XPCNativeWrappers turned on (which is the default in Firefox 1.5+), your extension can safely access the DOM of the content document, but not the content JavaScript. Bypassing XPCNativeWrapper to work with content JavaScript directly can lead to security problems.

+ +

See Interaction between privileged and non-privileged pages if you need to interact with the content page.

+ +
The content shortcut
+ +

In case of <browser type="content-primary"/>, you can use the content shortcut property to accesss the Window object of the content document. For example:

+ +
// alerts the title of the document displayed in the content-primary widget
+
+alert(content.document.title);
+
+ +

For example, you can use content.document in a browser.xul overlay to access the web page in the selected tab in a Firefox window.

+ +
Some examples use _content instead of content. The former has been deprecated for a while, and you should use content in the new code.
+ +

Accessing a document in the sidebar

+ +

Firefox has a sidebar, which is implemented as a <browser> element with id="sidebar". To access the elements and variables inside the sidebar, you need to use document.getElementById("sidebar").contentDocument or .contentWindow, like when {{ Anch("Accessing content documents") }}.

+ +

For more sidebar tips, see Code snippets:Sidebar.

+ +

Accessing the elements of the top-level document from a child window

+ +

The opposite case is when you want to access the chrome document from a privileged script loaded in a <browser> or an <iframe>.

+ +

A typical case when this can be useful is when your code runs in the sidebar in the main Firefox window and you want to access the elements in the main browser window.

+ +

The DOM tree, as shown by the DOM Inspector, can look like this:

+ +
#document
+  window                 main-window
+    ...
+      browser
+        #document
+          window         myExtensionWindow
+
+ +

where the child window is where your code runs in.

+ +

Your task is to access elements above your chrome document, i.e. to break out of your chrome window and access the ancestors. This can be done using the following statement:

+ +
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                   .getInterface(Components.interfaces.nsIWebNavigation)
+                   .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
+                   .rootTreeItem
+                   .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                   .getInterface(Components.interfaces.nsIDOMWindow)
+
+ +

This allows you to cross the chrome-content boundaries, and returns the main window object.

+ +

Finding already opened windows

+ +

The window mediator XPCOM component (nsIWindowMediator interface) provides information about existing windows. Two of its methods are often used to obtain information about currently open windows: getMostRecentWindow and getEnumerator. Please refer to the nsIWindowMediator page for more information and examples of using nsIWindowMediator. === Example: Opening a window only if it's not opened already === XXX TBD

+ +

Passing data between windows

+ +

When working with multiple windows, you often need to pass information from one window to another. Since different windows have separate DOM documents and global objects for scripts, you can't just use one global JavaScript variable in scripts from different windows.

+ +

There are several techniques of varying power and simplicity that can be used to share data. We'll demonstrate them from the simplest to the most complex in the next few sections.

+ +

Example 1: Passing data to window when opening it with openDialog

+ +

When you open a window using window.openDialog or nsIWindowWatcher.openWindow, you can pass an arbitrary number of arguments to that window. Arguments are simple JavaScript objects, accessible through window.arguments property in the opened window.

+ +

In this example, we're using window.openDialog to open a progress dialog. We pass in the current status text as well as the maximum and current progress values. Note that using nsIWindowWatcher.openWindow is a bit less trivial . TODO: link to How To Pass an XPCOM Object to a New Window when it has a more useful example

+ +

Opener code:

+ +
window.openDialog("chrome://test/content/progress.xul",
+                  "myProgress", "chrome,centerscreen",
+                  {status: "Reading remote data", maxProgress: 50, progress: 10} );
+
+ +

progress.xul:

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window onload="onLoad();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<script><![CDATA[
+  var gStatus, gProgressMeter;
+  var maxProgress = 100;
+  function onLoad() {
+    gStatus = document.getElementById("status");
+    gProgressMeter = document.getElementById("progressmeter");
+
+    if("arguments" in window && window.arguments.length > 0) {
+      maxProgress = window.arguments[0].maxProgress;
+      setProgress(window.arguments[0].progress);
+      setStatus(window.arguments[0].status);
+    }
+  }
+
+  function setProgress(value) {
+    gProgressMeter.value = 100 * value / maxProgress;
+  }
+
+  function setStatus(text) {
+    gStatus.value = "Status: " + text + "...";
+  }
+]]></script>
+
+<label id="status" value="(No status)"/>
+<hbox>
+  <progressmeter id="progressmeter" mode="determined"/>
+  <button label="Cancel" oncommand="close();"/>
+</hbox>
+
+</window>
+
+ +

Example 2: Interacting with the opener

+ +

Sometimes an opened window needs to interact with its opener; for example, it might do so in order to give notice that the user has made changes in the window. You can find the window's opener using its window.opener property or via a callback function passed to the window in a way described in the previous section.

+ +

Let's add code to the previous example to notify the opener when the user presses Cancel on the progress dialog.

+ + + +

If we're sure the window that opened the progress dialog declares the cancelOperation function, we can use window.opener.cancelOperation() to notify it, like this:

+ +
<button label="Cancel" oncommand="opener.cancelOperation(); close();"/>
+
+ + + +
function onCancel() {
+  alert("Operation canceled!");
+}
+
+...
+
+window.openDialog("chrome://test/content/progress.xul",
+                  "myProgress", "chrome,centerscreen",
+                  {status: "Reading remote data", maxProgress: 50, progress: 10},
+                  onCancel);
+
+ +

The progress dialog can then run the callback like this:

+ +
<button label="Cancel" oncommand="window.arguments[1](); close();"/>
+
+ +

Example 3: Using nsIWindowMediator when opener is not enough

+ +

The window.opener property is very easy to use, but it's only useful when you're sure that your window was opened from one of a few well-known places. In more complicated cases you need to use the nsIWindowMediator interface, introduced above.

+ +

One case in which you might want to use nsIWindowMediator is in an extension's Options window. Suppose you're developing a browser extension that consists of a browser.xul overlay and an Options window. Suppose the overlay contains a button to open the extension's Options window which needs to read some data from the browser window. As you may remember, Firefox's Extension Manager can also be used to open your Options dialog.

+ +

This means the value of window.opener in your Options dialog is not necessarily the browser window -- instead, it might be the Extension Manager window. You could check the location property of the opener and use opener.opener in case it's the Extension Manager window, but a better way is to use nsIWindowMediator:

+ +
var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var browserWindow = wm.getMostRecentWindow("navigator:browser");
+// read values from |browserWindow|
+
+ +

You might be tempted to use a similar technique to apply the changes the user made in the Options dialog, but a better way to do that is to use preferences observers.

+ +

Advanced data sharing

+ +

The above code is useful when you need to pass data from one window to another or to a set of windows, but sometimes you just want to share a JavaScript variable in common between different windows. You could declare a local variable in each window along with corresponding setter functions to keep the "instances" of the variable in sync across windows, but fortunately, there's a better way.

+ +

To declare a shared variable, we need to find a place that exists while the application is running and is easily accessible from the code in different chrome windows. There are actually a few such places.

+ +

Using JavaScript code modules

+ +

JavaScript code modules {{ Fx_minversion_inline(3) }} is a simple method for creating shared global singleton objects that can be imported into any other JavaScript scope. The importing scope will have access to the objects and data in the code module. Since the code module is cached, all scopes get the same instance of the code module and can share the data in the module. See Components.utils.import for more information.

+ + + +

Using an XPCOM singleton component

+ +

The cleanest and most powerful way to share data is to define your own XPCOM component (you can write one in JavaScript) and access it from anywhere using a getService call:

+ +
Components.classes["@domain.org/mycomponent;1"].getService();
+
+ + + +

There are several articles and books about creating XPCOM components online.

+ +

Using FUEL Application object

+ +

The FUEL JavaScript library {{ Fx_minversion_inline(3) }} has a simple method for sharing data between windows. The Application object supports a storage property which can be used to store data globally. This method is a simplified form of the XPCOM singleton method.

+ +
Application.storage.set(keyname, data);
+
+var data = Application.storage.get(keyname, default);
+
+where: keyname is a string used to identify the data
+       data is the data
+       default is the data value to return if keyname does not exists
+
+ + + +

Storing shared data in preferences

+ +

If you just need to store a string or a number, writing a whole XPCOM component may be an unnecessary complication. You can use the preferences service in such cases.

+ + + +

See Code snippets:Preferences for detailed description of the preferences system and example code.

+ +

Example:

+ +
var prefs = Components.classes["@mozilla.org/preferences-service;1"]
+                      .getService(Components.interfaces.nsIPrefService);
+var branch = prefs.getBranch("extensions.myext.");
+var var1 = branch.getBoolPref("var1"); // get a pref
+
+ +

The hidden window hack

+ +

Some extension authors use the special hidden window to store their data and code. The hidden window is similar to a regular window, but unlike any other window, it's available the whole time the application is running, and isn't visible to user. The document loaded into this window is chrome://browser/content/hiddenWindow.xul on Macs where it is used to implement the menus and resource://gre/res/hiddenWindow.html on other operating systems. Eventually this window will be removed for operating systems where it isn't needed ({{ Bug(71895) }}).

+ +

A reference to the hidden window can be obtained from the nsIAppShellService interface. As any other DOM object it allows you to set custom properties:

+ +
var hiddenWindow = Components.classes["@mozilla.org/appshell/appShellService;1"]
+         .getService(Components.interfaces.nsIAppShellService)
+         .hiddenDOMWindow;
+hiddenWindow.myExtensionStatus = "ready";
+
+ +

However, objects put into the hidden window will still belong to the window that created them. If a method of such an object accesses properties of the window object like XMLHttpRequest you might be confronted with an error message because the original window has been closed. To avoid this you can load the objects with a script file into the hidden window:

+ +
var hiddenWindow = Components.classes["@mozilla.org/appshell/appShellService;1"]
+         .getService(Components.interfaces.nsIAppShellService)
+         .hiddenDOMWindow;
+hiddenWindow.Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
+         .getService(Components.interfaces.mozIJSSubScriptLoader)
+         .loadSubScript("chrome://my-extension/content/globalObject.js");
+hiddenWindow.myExtensionObject.doSomething();
+
+ +

With globalObject.js containing something like:

+ +
var myExtensionObject = {
+  doSomething: function() {
+    return new XMLHttpRequest();
+  }
+}
+
+ + + +

See also

+ + diff --git a/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html b/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html new file mode 100644 index 0000000000..b8858b9411 --- /dev/null +++ b/files/es/mozilla/xpcom/xpcom/cambios_xpcom_en_gecko_2.0/index.html @@ -0,0 +1,111 @@ +--- +title: Cambios XPCOM en Gecko 2.0 +slug: Mozilla/XPCOM/XPCOM/Cambios_XPCOM_en_Gecko_2.0 +tags: + - Gecko 2.0 + - XPCOM + - para_revisar +--- +

+

+

Borrador
+ Esta página no está completa.

+ +

+

Han tenido lugar una serie de cambios que afectan la compatibilidad de componentes XPCOM en Gecko 2. Este artículo detalla esos cambios y provee sugerencias sobre cómo actualizar tu código.

+

Se acabaron las interfaces inmovilizadas

+

Se acabaron las interfaces inmovilizadas; a partir de ahora, todas las interfaces está sujetas a cambios. Se actualizará la documentación según permita el tiempo eliminar las referencias a las interfaces que estén "inmovilizadas " o "no inmovilizadas".

Registro de componentes

+

La manera en que los componentes XPCOM son registrados cambió en Gecko 2. Antes de Gecko 2, durante el registro de un componente, todos los binarios y ficheros del componente JavaScript eran cargados y llamados, pidiéndoles que se registraran a sí mismos. Si usabas XPCOMUtils.jsm, algo de esto estaba oculto, pero eso pasaba.

+

Comenzando en Gecko 2, como sea, los componentes son registrados usando archivos manifest, similar a como chrome es registrado. De hecho, el mismo archivo chrome manifest será usado para registrar componentes.

+

Todos los componentes XPCOM necesitarán ser actualizados para soportar esto. Como sea, es muy fácil hacerlo, y se puede actualmente soportar ambos tipos de registro para conservar la compatibilidad hacia atrás.

+

Manifestos de componentes

+

Todo registro de componentes es controlado a través de archivos manifest. Para extensiones, esto es el mismo chrome.manifest actualmente usado para registrar chrome.

+

Archivos XPT

+

La ruta de los archivos XPT debe ser listada explicitamente en un manifest usando una directiva interfaces directive:

+
interfaces components/mycomponent.xpt
+

Componentes JavaScript

+

El registro de información para componentes JavaScript ya no está dentro del componente mismo; en cambio, está alojado en el manifest. El componente es cargado solo cuando el administrador de XPCOM necesita crear un componente.

+

chrome.manifest:

+
# The {classID} here must match the classID in mycomponent.js
+component {e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8} components/mycomponent.js
+contract @foobar/mycomponent;1 {e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8}
+category profile-after-change MyComponent @foobar/mycomponent;1
+
+

El código javascript ya no exporta una función NSGetModule(). Ahora debe exportar una función NSGetFactory(), la cual acepta un ID de contrato como parámetro.

+

Por ejemplo en el código JavaScript de tu componente:

+
Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
+
+function myComponent() {
+}
+myComponent.prototype = {
+  // this must match whatever is in chrome.manifest!
+  classID: Components.ID("{e6b866e3-41b2-4f05-a4d2-3d4bde0f7ef8}"),
+
+  QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIMyComponent]),
+
+  /* nsIMyComponent implementation goes here */
+  ...
+};
+
+// The following line is what XPCOM uses to create components. Each component prototype
+// must have a .classID which is used to create it.
+const NSGetFactory = XPCOMUtils.generateNSGetFactory([myComponent]);
+
+

Un componente puede implemente compatibilidad hacia atrás con Gecko 1.9.2 dinámicamente detectando cuál de los simbolos son exportados por XPCOMUtils.jsm y exportando la función correcta:

+
/**
+* XPCOMUtils.generateNSGetFactory was introduced in Mozilla 2 (Firefox 4).
+* XPCOMUtils.generateNSGetModule is for Mozilla 1.9.2 (Firefox 3.6).
+*/
+if (XPCOMUtils.generateNSGetFactory)
+    var NSGetFactory = XPCOMUtils.generateNSGetFactory([mySample]);
+else
+    var NSGetModule = XPCOMUtils.generateNSGetModule([mySample]);
+

Componentes binarios

+

Los componentes binarios deben ser listados explicitamente en un manifest usando una directiva binary-component:

+
binary-component components/mycomponent.dll
+
+

C++ en el componente debe ser cambiado: un componente binario ya no exporta la función NSGetModule(). En cambio, exporta un simbolo de datos NSModule el cual apunta a la estructura mozilla::Module. Para más información acerca de la estructura mozilla::Module, mira la cabecera Module.h. Para un ejemplo actual de implementación de módulos dinámicos, mira nsSampleModule.cpp.

+

Notese que nsIGenericFactory.h ha sido eliminado. Referencias a nsIGenericFactory.h deben ser reemplazadas con mozilla/ModuleUtils.h.

+

Es posible para un componente binario ser compatible con Mozilla 1.9.2 y Mozilla 2.0 usando un macro extraNS_IMPL_MOZILLA192_NSGETMODULE. mira nsSampleModule.cpp para más detalles.

+

Subdirectorios específicos de plataforma

+

El sistema component/chrome usado para mirar en los subdirectorios específicos de plataforma de una extensión, del tipo platform/WINNT_x86-msvc/chrome.manifest en Windows. Ya no está soportado. Puedes usar las directivas de registro chrome, OS y ABI para lograr el mismo efecto:

+
binary-component components/windows/mycomponent.dll ABI=WINNT_x86-msvc
+binary-component components/mac/mycomponent.dylib ABI=Darwin_x86-gcc3
+binary-component components/mac/mycomponent64.dylib ABI=Darwin_x86-64-gcc3
+binary-component components/linux/mycomponent.so ABI=Linux_x86-gcc3
+
+

Registro de categoría

+

Anterior a Gecko 2, las extensiones podían escuchar las notificaciones para el xpcom-startup y app-startup durante el inicio, y realizar acciones durante. Este ya no es el caso. Las más temprana notificacion de inicio que puede recibir una extensión es profile-after-change, la cual tiene siempre que ser una notificación recomendad para observar. Esto es debido a que está entre las notificaciones más tempranas que ocurren despues de que la carpeta de perfil(y por lo tanto preferencias y otros servicios) está disponible.

+

Qué necesitas cambiar

+

Si tu extension actualmente observa aún a xpcom-startup ó app-startup, necesitas actualizar tu código para observer en vez a profile-after-change.

+

Usualmente, las extensiones observaban app-startup porqué en el pasado, necesitabas cargar app-startup con el fin de poder registrarse para observar profile-after-change en primer lugar. A partir de Gecko 1.9.1, este ya no es el caso, como sea; tu puedes registrar ahora profile-after-change usando el administrador de categoría. Mira Recibiendo notificaciones de inicio para más detalles.

+

Para agregar una entrada de categoria, debes insertar la siguiente linea a tu chrome.manifest:

+
category profile-after-change MyComponent @foobar/mycomponent;1
+
+
Importante: Formalmente, el id de contrado de la entrada de categoría era prefijada con "service," si el componente era implementado como un servicio. Este prefijo necesita ser eliminado cuando migres a chrome.manifest.
+

Nombres de categoría cambiados

+

El administrador de categoría en XPCOM es usado para registrar ciertos objetos auxiliares globales. Como chrome.manifest es un formato de espacio delimitado, los nombres de categoría con espacios no pueden ser registrados. Por lo tanto las siguientes categorías han cambiado:

+ +
Nombre anterior Nuevo nombre
JavaScript global constructor Javascript-global-constructor
JavaScript global constructor prototype alias JavaScript-global-constructor-prototype-alias
JavaScript global property JavaScript-global-property
JavaScript global privileged property JavaScript-global-privileged-property
JavaScript global static nameset JavaScript-global-static-nameset
JavaScript global dynamic nameset JavaScript-global-dynamic-nameset
JavaScript DOM class JavaScript-DOM-class
JavaScript DOM interface JavaScript-DOM-interface
XSLT extension functions XSLT-extension-functions
+

¿Pero por qué?

+

Previamente, cuando fuera Gecko detectaba que la versión de la aplicación habia cambiado, o una o mas extensiones eran agregadas o eliminadas, activadas o desactivadas, era necesario para tratar todos los registros de componentes existentes, reiniciar la aplicación(Lo que llamamos "Reinicio de administrador de extensiones"), durante su proceso de arranque. Esto fue necesario para asegurar que los componentes que ya no estuvieran disponibles fueran eliminados apropiadamente, y para re-registrar todo, cargando algun nuevo componente que se necesitara.

+

En teoría, estos es invisible para el usuario, pero es un proceso costoso, ya que cada componente necesita ser cargado y ejecutado, luego descargado, luego recargado de nuevo durante el reinicio.

+

Además de eso, con el trabajo que estamos haciendo en el soporte multihilo para Firefox, el contenido de los procesos también necesita registrar componentes en una base por proceso, o de alguna manera para compartir la cache de un componente con el proceso chrome.

+

Los cambios para el modelo de registro de componentes permite este llamado Reinicio de administrador de extensiones volverse una cosa del pasado. En lugar de confiar en una potencial caché de componentes en el arranque, nosotros leemos los registros de componentes de la aplicación fuera de su archivo manifest y cargamos esos componentes. Esto obtiene suficiente de XPCOM cargado y en ejecución con lo que podemos cargar el administrador de extensiones y realizar la instalación, desinstalación y acualización necesaria de algunas extensiones instaladas.

+

Hecho esto, las extensiones pueden ser cargadas simplemente leyendo su manifesto, cargando sus componentes y continuando el proceso de arranque, todo sin tener que reiniciar el navegador.

+

Los contenidos de procesos en Electrolysis pueden simplemente leer el registro del componente durante el arranque.

+

 

+

Cambios en los contenedores XPCNativeWrapper

+

No se pueden desactivar del manifiesto  los contenedores XPCNativeWrapper

+

Ya no se admite la especificación de xpcnativewrappers=no en tu manifiesto. El objetivo de ésta fue siempre ofrecer una solución alternativa a corto plazo que permitiera que las extensiones continuaran funcionando mientras que los autores actualizaban el código para usar los contenedores XPCNativeWrapper.

+

Si tu agregado/complemento depende de un enlace XBL adjunto a los objetos de contenido - por ejemplo, la capacidad para llamar a las funciones u obtener y establecer las propiedades creadas por el enlace XBL - tendrás que usar la propiedad de los contenedores XPCNativeWrapper wrappedJSObject para tener acceso a los objetos ajustados.

+

Si necesitas poder llamar a las funciones o tener acceso a las propiedades definidas por el contenido web, tendrás que hacer esto también. Puede ser el caso si, por ejemplo, has escrito una extensión que añade a un servicio de correo web un botón eliminar y el servicio define una función window.delete() que tienes que llamar.

+

Si, por otro lado, lo único que haces con el contenido es tener acceso a métodos y propiedades DOM, no habrás tenido que usar xpcnativewrappers=no y simplemente deberías eliminarlo de tu manifiesto.

+

Cambios varios en los contenedores XPCNativeWrapper

+

Cambios en XPCOMUtils.jsm

+

Se ha actualizado el módulo de código XPCOMUtils.jsm  para permitir que especifiques las ID de las aplicaciones en las que deseas registrar tu componente.

Captadores de servicios XPCOM

+

Una serie de servicios XPCOM que se usan habitualmente disponen ahora de funciones de captadores de servicios en el  mozilla::services namespace; facilitan en gran medida el acceso a estos servicios desde el código C++.

Consulta también

+ +

diff --git a/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html b/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html new file mode 100644 index 0000000000..4c57aa57e9 --- /dev/null +++ b/files/es/mozilla/xpcom/xpcom/el_administrador_de_hilos/index.html @@ -0,0 +1,33 @@ +--- +title: El administrador de hilos +slug: Mozilla/XPCOM/XPCOM/El_administrador_de_hilos +tags: + - Firefox 3 +translation_of: Mozilla/Tech/XPCOM/The_Thread_Manager +--- +

+ +

El administrador de hilos, introducido en Firefox 3, ofrece un mecanismo simple de utilizar para crear hilos y enviarles eventos para que los procese.

+ +

Interfaces

+ +

Existen varias interfaces que proveen el soporte multihilo:

+ +
+
nsIThreadManager
+
El administrador de hilos en sí mismo te permite crear hilos.
+
nsIThread
+
La interfaz nsIThread encapsula un sistema de hilos funcional, proveyendo un acceso multi-plataforma sencillo al multihilo desde tu código.
+
nsIThreadPool
+
Un pool de hilos provee un conjunto limitado de "hilos de trabajo". Cuando envies un evento al pool, el pool elije un hilo de trabajo disponible para procesar el evento.
+
nsIThreadInternal
+
Una subclase de nsIThread que es implementada por el objeto XPCOM de hilo para agregar soporte de observadores de la actividad de envíos al hilo.
+
nsIThreadObserver
+
Provee la habilidad de monitorear el hilo, recibir notificaciones cuando se le envían eventos y cuando terminan de ser procesados.
+
nsIThreadEventFilter
+
Esta interfaz es usada por el método pushEventQueue() en nsIThreadInternal para permitir el filtrado de eventos.
+
+ +

Usando el administrador de hilos

+ +

Para usar el Administrador de Hilos, necesitas encapsular cada porción de código de trabajo en un objeto XPCOM nsIRunnable. Puedes escribir el objeto totalmente en javascript, no es excesivamente dificil hacerlo.

diff --git a/files/es/mozilla/xpcom/xpcom/index.html b/files/es/mozilla/xpcom/xpcom/index.html new file mode 100644 index 0000000000..9cb2755097 --- /dev/null +++ b/files/es/mozilla/xpcom/xpcom/index.html @@ -0,0 +1,83 @@ +--- +title: XPCOM +slug: Mozilla/XPCOM/XPCOM +tags: + - Todas_las_Categorías + - XPCOM +translation_of: Mozilla/Tech/XPCOM +--- +
+ Introducción a XPCOM (en)
+

Tutorial en cinco partes de IBM developer Works: Parte I, Parte II, Parte III, Parte IV, Parte V

+
+
+  XPCOM (cross platform component object model) es un COM multi-plataforma, similar a Microsoft COM. Gracias a sus múltiples "language bindings", los componentes XPCOM pueden ser usados e implementados no sólo en C/C++, sino también en diversos lenguajes tales como JavaScript, Java y Python. La definición de interfaces en XPCOM ha desarrollado su propio dialecto IDL, el XPIDL.
+
+  
+
+  Así mismo, XPCOM proporciona un conjunto básico de componentes; por ejemplo, las estructuras básicas: cadenas, matrices, etc. La mayoría de los componentes XPCOM no forman parte de este conjunto básico sino que son proporcionados por otras partes de la plataforma (p.e. Gecko o Necko), por una aplicación o por una extensión.
+

 

+ + + + + + + +
+

Documentación

+
+
+ Intrefaces XPCOM
+
+ En esta sección, vamos a echar un pequeño vistazo a XPCOM (Cross-platform Component Object Model o Modelo de Objeto de Componentes Multiplataforma), el sistema de objetos que utiliza Mozilla.
+
+
+
+ Creating XPCOM Components (en)
+
+ Este manual proporciona informacion sobre como contruir un componente XPCOM que controle el comportamiento de navegación.
+
+
+
+ Cómo crear un componente XPCOM en JavaScript
+
+ This is a "Hello World" tutorial for creating an XPCOM component in JavaScript. This tutorial does not describe how and why XPCOM works the way it does, or what every bit of the example code does.
+
+
+
+ Usando XPCOM en JavaScript sin perdidas (en)
+
+ Usando XPCOM en JavaScript (tambien llamado XPConnect) es una forma donde la adminsitracion de memoria no es la mas indicada. Apesar de esto, es facil escribir codigo en JavaScript que tenga perdidas, ya que algunos objetos con los que tratas en el fondo estan includos en la referencia.
+
+

; XPCOM: <small>Referencia sobre las cadenas en XPCOM.</small>  ; XPCOM Glue<br /> : <small>El XPCOM Glue permite usar las funciones y clases de la utilidad XPCOM, sin tener dependencia de partes del XPCOM (xpcom_core.{dll,so,dylib}).</small> Ver todos...

+ 		+

Comunidad

+ + +
    +
  • Los foros de Mozilla en inglés.
    • +
+

+

 

+

Temas relacionados

+
+
+ XUL, JavaXPCOM, PyXPCOM, XPConnect, JavaScript.
+
+
+

diff --git a/files/es/mozistorageconnection/index.html b/files/es/mozistorageconnection/index.html new file mode 100644 index 0000000000..3bfa18ae40 --- /dev/null +++ b/files/es/mozistorageconnection/index.html @@ -0,0 +1,470 @@ +--- +title: mozIStorageConnection +slug: mozIStorageConnection +tags: + - Interfaces + - Storage + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/mozIStorageConnection +--- +

 

+

La interfaz de mozIStorageConnection representa una conexión de base de datos adjuntos a un archivo específico o de datos en memoria de almacenamiento. Es la principal interfaz para interactuar con una base de datos, incluyendo la creación de comandos preparados, la ejecución de SQL, y el examen de los errores de base de datos.
+
+ Véase el almacenamiento de una introducción

+


+

+
storage/public/mozIStorageConnection.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.9 (Firefox 3)
+

+

Hereda de: nsISupports

+

Método de vista

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void close();
mozIStorageStatement createStatement(in AUTF8String aSQLStatement);
void executeSimpleSQL(in AUTF8String aSQLStatement);
boolean tableExists(in AUTF8String aTableName);
boolean indexExists(in AUTF8String aIndexName);
void beginTransaction();
void beginTransactionAs(in PRInt32 transactionType);
void commitTransaction();
void rollbackTransaction();
void createTable(in string aTableName, in string aTableSchema);
void createFunction(in AUTF8String aFunctionName, in long aNumArguments, in mozIStorageFunction aFunction);
void createAggregateFunction(in AUTF8String aFunctionName, in long aNumArguments, in mozIStorageAggregateFunction aFunction);
void removeFunction(in AUTF8String aFunctionName);
mozIStorageProgressHandler setProgressHandler(in PRInt32 aGranularity, in mozIStorageProgressHandler aHandler);
mozIStorageProgressHandler removeProgressHandler();
void preload();
+

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
connectionReadybooleanIndica si la conexión está abierta o lista para usar. Esto es pérfido si la conexión no pudo abrir o si se ha cerrado.
databaseFilensIFileEl archivo de base de datos actual. NULL +
+
+
+ <object width="18" height="18" id="tts_flash" data="http://www.gstatic.com/translate/sound_player.swf" type="application/x-shockwave-flash"> <param name="movie" value="http://www.gstatic.com/translate/sound_player.swf"/> <param name="flashvars" value="sound_name=&amp;sound_name_cb=_TTSSoundFile"/> <param name="wmode" value="transparent"/> <param name="allowScriptAccess" value="always"/></object>
+ si La Conexión de la Base de Datos en sí refiere una base de la uña de Datos en la memoria.
+
+
lastInsertRowIDlong longEl identificador de fila de la última operación INSERT de SQL. 
lastErrorlongEl último código de error SQLite que se produjo.
lastErrorStringAUTF8StringLa cadena de error Inglés reportados por la librería SQLite para el funcionamiento de SQLite pasado.
schemaVersionlongLa versión del esquema de la base de datos. Esto no debe ser utilizado hasta la base de datos está listo. La versión será reportado como 0 si no se establece. desde Gecko 1.9 M8
transactionInProgressboolean +

Devuelve true si hay una transacción en curso sobre la base de datos, de lo contrario devuelve false.

+
+

Constantes

+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValorDescripción
TRANSACTION_DEFERRED0Predeterminado. El bloqueo de la base de datos se adquiere cuando sea necesario.
TRANSACTION_IMMEDIATE1Obtener un bloqueo de lectura sobre la base de datos inmediatamente.
TRANSACTION_EXCLUSIVE2Obtener un bloqueo de escritura sobre la base de datos inmediatamente.
+

Métodos

+

close()

+

Cierra una conexión de base de datos. C + + que llaman simplemente debe establecer la variable de la base de datos como NULL. desde Gecko 1.9 M8

+

Tienes que llamar finalize() en la declaración si ha creado uno antes de intentar cerrar o usted recibirá un NS_ERROR_FILE_IS_LOCKED excepción.

+
void close();
+
+
Parámetros
+

Ninguno.

+

createStatement()

+

Crea un mozIStorageStatement para la expresión de SQL dada. La expresión puede utilizar "?" para indicar los argumentos numerados secuencialmente (?1, ?2, etc) or ":name" y "$var" para indicar el nombre argumentos.

+
 mozIStorageStatement createStatement(
+   in AUTF8String aSQLStatement
+ );
+
+
Parámetros
+
+
+ aSQLStatement
+
+ La instrucción SQL a ejecutar.
+
+
Return value
+

Devuelve una nueva mozIStorageStatement que se utilizará para ejecutar la instrucción especificada.

+

executeSimpleSQL()

+

Ejecuta una expresión SQL. De forma predeterminada, que no espera ningún argumento en absoluto.

+
 void executeSimpleSQL(
+   in AUTF8String aSQLStatement
+ );
+
+
Parámetros
+
+
+ aSQLStatement
+
+ La instrucción SQL a ejecutar.
+
+

tableExists()

+

Este método reporta si los informes de la tabla dada existe o no.

+
 boolean tableExists(
+   in AUTF8String aTableName
+ );
+
+
Parámetros
+
+
+ aTableName
+
+ La tabla de SQL cuya existencia debe estar marcada.
+
+
Return value
+

Devuelve true si la tabla existe, false en caso contrario.

+

indexExists()

+

Este método determina si el índice dado existe.

+
 boolean indexExists(
+   in AUTF8String aIndexName
+ );
+
+
Parámetros
+
+
+ aIndexName
+
+ El índice de comprobar.
+
+
Return value
+

Returns true if the index exists, false otherwise.

+

beginTransaction()

+

Inicia una nueva transacción. De forma predeterminada, SQLite aplaza transacciones. Si la transacción ya está activa, este método produce una excepción.

+

Nota: Use of beginTransaction() and related methods is strongly recommended because it stores the transaction state in the connection. Otherwise, the attribute transactionInProgress will have the wrong value.

+
 void beginTransaction();
+
+

beginTransactionAs()

+

This method starts a new transaction of the given transaction type.

+
 void beginTransactionAs(
+   in PRInt32 transactionType
+ );
+
+
Parameters
+
+
+ transactionType
+
+ The type of transaction (TRANSACTION_DEFERRED, TRANSACTION_IMMEDIATE or TRANSACTION_EXCLUSIVE).
+
+

commitTransaction()

+

This method commits the current transaction.

+
 void commitTransaction();
+
+
Parameters
+

None.

+
Exceptions thrown
+
+
+ NS_ERROR_STORAGE_NO_TRANSACTION
+
+ No transaction is active.
+
+

rollbackTransaction()

+

This method rolls back the current transaction. This is essentially an "undo," and returns the database to the state it was in before the transaction began.

+
 void rollbackTransaction();
+
+
Parameters
+

None.

+
Exceptions thrown
+
+
+ NS_ERROR_STORAGE_NO_TRANSACTION
+
+ No transaction is active.
+
+

createTable()

+

This method creates a table with the given table name and schema.

+

Nota: At some point in the near future, this method will check to be sure the schema is the same as what is specified, but that is not currently done.

+
 void createTable(
+   in string aTableName,
+   in string aTableSchema
+ );
+
+

 

+
Parameters
+
+
+ aTableName
+
+ The name of the table to create; table names may consist of the letters A-Z in either upper or lower case, the underscore, and the digits 0-9. The first character must be a letter.
+
+ aTableSchema
+
+ The table's schema. This should be specified using the same syntax the CREATE TABLE statement uses. For example: "foo INTEGER, bar STRING".
+
+
Exceptions thrown
+
+
+ NS_ERROR_FAILURE
+
+ Table already exists or the requested table couldn't be created.
+
+

createFunction()

+

Creates a new SQLite function. since Gecko 1.9 M8

+
 void createFunction(
+   in AUTF8String aFunctionName,
+   in long aNumArguments,
+   in mozIStorageFunction aFunction
+ );
+
+
Parameters
+
+
+ aFunctionName
+
+ The name of function to create, as seen in SQL.
+
+ aNumArguments
+
+ The number of arguments the function takes. Pass -1 for variable-argument functions.
+
+ aFunction
+
+ The instance of mozIStorageFunction that implements the function.
+
+

createAggregateFunction()

+

This method creates a new SQLite aggregate function. since Gecko 1.9 M8

+
 void createAggregateFunction(
+   in AUTF8String aFunctionName,
+   in long aNumArguments,
+   in mozIStorageAggregateFunction aFunction
+ );
+
+
Parameters
+
+
+ aFunctionName
+
+ The name of the aggregate function to create, as seen in SQL.
+
+ aNumArguments
+
+ The number of arguments the function takes. Pass -1 for variable-argument functions.
+
+ aFunction
+
+ The instance of mozIStorageAggregateFunction that implements the function.
+
+

removeFunction()

+

Deletes a custom SQLite function; it works with both standard and aggregate functions. since Gecko 1.9 M8

+
 void removeFunction(
+   in AUTF8String aFunctionName
+ );
+
+
Parameters
+
+
+ aFunctionName
+
+ The name of the function to remove.
+
+

setProgressHandler()

+

This method sets a progress handler. Only one handler can be registered at a time; if you need more than one, you need to chain them yourself. since Gecko 1.9 M8

+
 mozIStorageProgressHandler setProgressHandler(
+   in PRInt32 aGranularity,
+   in mozIStorageProgressHandler aHandler
+ );
+
+

 

+
Parameters
+
+
+ aGranularity
+
+ The number of SQL virtual machine steps between progress handler callbacks.
+
+ aHandler
+
+ The instance of mozIStorageProgressHandler.
+
+
Return value
+

Returns the previous registered handler.

+

removeProgressHandler()

+

Removes a progress handler. since Gecko 1.9 M8

+
 mozIStorageProgressHandler removeProgressHandler();
+
+
Parameters
+

None.

+
Return value
+

Returns the previous registered handler.

+

preload()

+

Precarga el caché de la base de datos mediante la carga de las páginas desde el principio del archivo de base de datos hasta la caché de memoria (el tamaño de las que se especifica en PRAGMA cache_size = tamaño) está lleno o la totalidad del expediente que se lee.

+
+ Advertencia: Este método ha sido eliminado en Firefox 3.
+

El caché debe estar activo en la base de datos para que esto funcione. Esto significa que debe tener una transacción abierta en la conexión, o tiene una transacción abierta en otro contexto, que comparte la misma caché de localizador. Estos datos almacenados en caché se marchará cuando se cierra la transacción.
+
+ Esta operación precarga puede acelerar las operaciones de lectura porque los datos se carga un gran bloque.Normalmente, las páginas se lee en la carta, que puede causar muchos de disco busca.

+
 void preload();
+
+
Parameters
+

None.

+

Ejemplo: Creación de una declaración sin parámetros

+

C++

+
rv = mDBConn->ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TABLE foo (a INTEGER)"));
+
+

JavaScript

+
mDBConn.executeSimpleSQL("CREATE TABLE foo (a INTEGER)");
+
+

Ejemplo: Creación de una declaración que tiene parámetros

+

C++

+
nsCOMPtr<mozIStorageStatement> statement;
+rv = mDBConn->CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+
+

JavaScript

+
var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1");
+
+

Ver también

+ +

diff --git "a/files/es/m\303\263dulos_javascript/index.html" "b/files/es/m\303\263dulos_javascript/index.html" new file mode 100644 index 0000000000..c301b061ca --- /dev/null +++ "b/files/es/m\303\263dulos_javascript/index.html" @@ -0,0 +1,23 @@ +--- +title: Módulos JavaScript +slug: Módulos_JavaScript +tags: + - Firefox 3 + - JavaScript + - Todas_las_Categorías + - XPConnect +--- +

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 introduce el método Components.utils.import() , que provee una sencilla forma de importar código JavaScript desde un módulo externo. Existe información sobre cómo configurar y usar módulos JavaScript. Los Módulos de JavaScript pueden también ser usados para compartir datos en extensiones.

+ +

Además de ofrecer este método para importar módulos, Firefox incluye dos módulos por defecto:

+ +
+
XPCOMUtils
+
El módulo XPCOMUtils.jsm provee facilidades para componentes de JavaScript cargados mediante el cargador de componentes de JavaScript.
+
JSON
+
El módulo JSON.jsm provee facilidades para manipular datos JSON.
+
PluralForm
+
El módulo PluralForm.jsm provee herramientas para pluralizar correctamente palabras en múltiples localizaciones.
+
diff --git "a/files/es/m\303\263vil/index.html" "b/files/es/m\303\263vil/index.html" new file mode 100644 index 0000000000..151bec1066 --- /dev/null +++ "b/files/es/m\303\263vil/index.html" @@ -0,0 +1,30 @@ +--- +title: Móvil +slug: Móvil +tags: + - Mozilla +translation_of: Mozilla/Mobile +--- +

Firefox OS

+ +

Firefox OS is an open source mobile operating system which uses Linux and Mozilla's Gecko engine to run a user interface and set of applications written entirely in HTML, CSS and JavaScript.

+ +

Read about how to install Firefox OS and how to develop apps for it.

+ +

Firefox for Android

+ +

Firefox for Android is Mozilla's mobile web browser for Android devices. It's recently been rewritten to use Android's native UI, making it faster, leaner and more responsive. It provides support for powerful APIs to access device capabilities such as the camera and telephony stack.

+ +

Read about how to help create Firefox for Android, how to use its device APIs, and how to build mobile add-ons.

+ +

Firefox for iOS

+ +

Firefox for iOS is Mozilla's upcoming mobile web browser for iOS devices. Because of AppStore restrictions, it uses the built in WebView supplied by iOS rather than Gecko.

+ +

Read about how to help with Firefox for iOS, and how to integrate it with your other iOS Apps.

+ +

Mobile web development

+ +

Mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the APIs used to work with them are still in the process of being standardized.

+ +

Read about how to develop web sites that look good on mobile devices and take advantage of the new possibilities they offer. Learn how to make sure your web site works well on different browsers.

diff --git "a/files/es/m\303\263vil/viewport_meta_tag/index.html" "b/files/es/m\303\263vil/viewport_meta_tag/index.html" new file mode 100644 index 0000000000..fd26b5bebf --- /dev/null +++ "b/files/es/m\303\263vil/viewport_meta_tag/index.html" @@ -0,0 +1,89 @@ +--- +title: >- + Usando la etiqueta meta viewport para controlar la composición en los + navegadores móviles +slug: Móvil/Viewport_meta_tag +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +

Antecedentes

+ +

El {{glossary("viewport")}} del navegador es el área de la ventana en donde el contenido web está visible. Generalmente no es del mismo tamaño que la página renderizada, en donde se brindan barras de desplazamiento para que el usuario pueda acceder a todo el contenido.

+ +

Dispositivos con pantallas angostas (p.e. móviles) muestran la página en una ventana virtual o viewport, que es usualmente más ancho que la pantalla y la comprimen de manera que pueda verse completa. El usuario podrá recorrerla y hacer zoom para ver diferentes áreas de la página. Por ejemplo, si una pantalla móvil tiene un ancho 640px, las páginas pueden ser procesadas con un viewport de 980px, y después comprimidas para que entren en 640px.

+ +

Esto se hace porque muchas páginas no están optimizadas para dispositivos móviles y se quiebran (o, al menos, se ven mal) cuando son procesadas a un ancho de viewport pequeño. El viewport virtual es una forma de resolver el problema de sitios no optimizados para móviles, logrando que se vean mejor.

+ +

Ingresar el meta tag viewport

+ +

Sin embargo, este mecanismo no es tan bueno para páginas que están optimizadas para pantallas pequeñas usando media queries - si el viewport tiene, por ejemplo, 980px los media queries que se activan en 640px o 480px o menos nunca serán usados, limitando la efectividad de esas técnicas de diseño responsive.

+ +

Para mitigar este problema, Apple introdujo el meta tag "viewport" en Safari para iOS que permite a los desarrolladores controlar su tamaño y escala. Muchos navegadores hoy lo soportan, aunque no es parte de ningún standard. La documentación de Apple hace un buen trabajo explicando cómo los desarrolladores web pueden usar esta etiqueta, pero hemos tenido que hacer trabajo de detectives para descubrir exactamente cómo implementarlo en Fennec. Por ejemplo, la documentación de Safari dice que el contenido está "separado por comas", pero los navegadores existentes y las páginas web usan una mezcla entre comas, punto y coma y espacios como valores de separación.

+ +

Puede aprenderse más sobre los diferentes navegadores móviles en A Tale of Two Viewports en quirksmode.org.

+ +

Viewport básico

+ +

Un sitio típico optimizado para móvil contiene algo así:

+ +
<meta name="viewport" content="width=device-width, user-scalable=no">
+ +

La propiedad width controla el tamaño del viewport. Puede definirse con un número en pixeles como  width=600 o con un valor especial device-width que es el equivalente al ancho de la pantalla en píxeles CSS en una escala de 100%. (Existen valores correspondientes de height y device-height, los cuales pueden ser útiles para páginas con elementos que cambian tamaño o posición basadas en la altura del viewport (height).

+ +

La propiedad initial-scale controla el nivel de zoom cuando la página se carga por primera vez. Las propiedades maximum-scale, minimum-scale, y user-scalable controlan la forma en cómo se permite a los usuarios aumentar o disminiuir el zoom en la página.

+ +

Un pixel no es un pixel

+ +

El iPhone y muchos teléfonos Android populares tienen pantallas de 3 a 4 pulgadas (7–10 cm) con 320—480 píxeles (~160 dpi). Firefox para Maemo se ejecuta en el Nokia N900, el cual físicamente tiene el mismo tamaño, pero 480—800 píxeles (~240 dpi). Debido a esto, la versión más reciente de Fennec mostró muchas páginas alrededor de un tercio más pequeñas (en tamaño real, tamaño físico) que iPhone o Android. Esto causó problemas de usabilidad y lectura en muchos sitios web optimizados con funcionalidad touch. Peter-Paul Koch escribió sobre este problema en A pixel is not a pixel is not a pixel.

+ +

Fennec 1.1 para Maemo usa 1,5 pixels de hardware para cada "pixel" de CSS, siguiendo los criterios de los navegadores en Android basados en WebKit. Esto significa que una página con un valor de  initial-scale=1 se mostrará renderizada aproximadamente al mismo tamaño físico en Fennec para Maemo, Safari Mobile para iPhone, y el navegador de Android tanto en teléfonos  HDPI y MDPI. Esto es consistente con la especificación CSS 2.1, que dice:

+ +
+

Si la densidad en pixeles del aparato es muy diferente de aquella típica en pantalla de computadores, el "user agent" deberá reescalar los valores en pixeles. Se recomienda que la unidad de pixel refiera al número total de pixels del aparato que más se aproxime al pixel de referencia. Se recomienda también que el pixel de referencia sea el ángulo visual de un pixel en un aparato con una densidad de pixels de 96dpi y una distancia del lector del largo de un brazo.

+
+ +

Para los desarrolladores web, esto supone que 320px es el ancho máximo en modo retrato a scale=1, y todos los dispositivos mencionados anteriormente, deben ajustarse acorde al tamaño la maquetación y las imágenes. Pero recuerda que no todos los móviles tienen el mismo ancho; debes asegurarte además que tus páginas funcionan corectamente en modo apaisado, y en dispositivos más grandes como el iPad o las tablets Android.

+ +

En las pantallas de 240-ppp, las páginas con initial-scale=1 serán escaladas efectivamente a un 150% tanto en Fennec como en Android WebKit. Su texto será suave y fresco, pero sus imágenes de bitmap probablemente no obtengan ninguna ventaja de la máxima resolución de la pantalla. Para obtener imágenes más finas en estas pantallas, los desarrolladores web deben diseñar imágenes - o maquetaciones completas - al 150% de sus tamaño final (o al 200%, para soportar dispositivos de 320-ppp como por ejemplo el iPhone con pantalla retina) y entonces disminuar la escala usando CSS o las propiedades del viewport.

+ +

La relación por defecto depende de la densidad de la pantalla. En una pantalla con una densidad inferior a 200ppp, el ratio es 1.0. En pantallas con densidades entre 200 y 300ppp, el ratio es 1.5. Para pantallas con densidades por encima de 300ppp, el ratio es el entero inferior (densidad/150ppp). Hay que observar que el ratio por defecto es cierto sólo cuando la escala del viewport es igual a 1. En cualquier otro caso, la relación entre los pixels en CSS y en el dispositivo dependen del nivel de zoom en cada momento.

+ +

Ancho del viewport y ancho de la pantalla

+ +

Muchos sitios establecen su viewport a "width=320, initial-scale=1" para ajustarse de manera precisa a la pantalla del iPhone en modo portrait. Tal y como se menciona arriba, esto causa problemas cuando Fennec 1.0 renderiza estos sitios, especialmente en modo landscape. Para arreglar esto, Fennec 1.1 expandirá el ancho del viewport si es necesario para rellenar la pantalla a la escala requerida. Esto encaja con el comportamiento de Android y Mobile Safari, y es especialmente útil en dispositivos de gran pantalla como el iPad (el sitio de Allen Pike Choosing a viewport for iPad tiene una buena explicación para desarrolladores web).

+ +

Para páginas que establecen una escala inicial o máxima, esto se traduce en que la propiedad width realmente pasa a ser el ancho mínimo del viewport. Por ejemplo, si tu diseño necesita al menos 500 píxeles de ancho entonces  podrás usar la siguiente anotación. Cuando la pantalla tenga un ancho mayor a 500 píxeles, el navegador extenderá el viewport (en lugar de acercar el zoom) para ajustarlo a la pantalla:

+ +
<meta name="viewport" content="width=500, initial-scale=1">
+ +

Fennec 1.1 también añade soporte para minimum-scale, maximum-scale y user-scalable con valores por defecto y límites similares a los de Safari. Estas propiedades afectan a la escala inicial y al ancho, además de limitar los cambios a nivel de zoom.

+ +

Los navegadores para dispositivos móviles responden a los cambios de orientación de manera ligeramente diferente. Por ejemplo, Mobile Safari a menudo solo amplía el zoom de la página cuando se cambia la orientación portrait a la landscape, en lugar de exponer la página como si originalmente se hubiera cargado en landscape. Si los desarrolladores web quieren que su escala establecida permanezca consistente cuando cambie la orientación en un iPhone, deben añadir un valor maximum-scale para prevenir éste efecto de zoom, el cual tiene el (a veces) efecto secundario indeseado de impedir que los usuarios acerquen el zoom:

+ +
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+ +

Esto no es necesario en Fennec; cuando el dispositivo cambia de orientación, Fennec actualiza el tamaño de viewport, el diseño de la página, y las propiedades de  JavaScript/CSS como device-width, basadas en las nuevas dimensiones de la pantalla.

+ +

Tamaños Comunes de Viewport en Equipos Móviles y Tabletas 

+ +

Si quieres saber qué tipo de ancho de viewport tienen los equipos móviles y tabletas, hay una lista exhaustiva aquí: mobile and tablet viewport sizes. La lista te brinda información tanto del ancho del viewport en los modos de orientación vertical y horizontal ("portrait" y "landscape"), así como del tamaño de la pantalla, sistema operativo y la densidad de píxeles del dispositivo.

+ +

Standards

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}{{Spec2('CSS3 Device')}}Non-normatively describes the Viewport META element
+ +

Claramente existe demanda por la etiqueta "meta viewport", ya que es soportada por la mayoría de los buscadores móviles y usada por miles de sitios web. Sería bueno contar con un verdadero estándar para que las páginas web puedan controlar las propiedades del viewport. Mientras avance el proceso de estandarización, en Mozilla trabajaremos para asegurarnos de poder implementar cualquier cambio realizado durante dicho proceso.

diff --git a/files/es/nsdirectoryservice/index.html b/files/es/nsdirectoryservice/index.html new file mode 100644 index 0000000000..37eb6d6505 --- /dev/null +++ b/files/es/nsdirectoryservice/index.html @@ -0,0 +1,11 @@ +--- +title: nsDirectoryService +slug: nsDirectoryService +--- +

Resumen

+

El servicio de directorio XPCOM devuelve las ubicaciones de directorios "bien conocidos" en los sistemas operativos de una forma independiente. Por ejemplo puede indicarle la ruta del directorio temporal del sistema, el directorio de trabajo actual, etc.

+
 ClassID:    f00152d0-b40b-11d3-8c9c-000064657374
+ ContractID: @mozilla.org/file/directory_service;1
+
+

Interfaces soportados

+

nsIProperties, nsIDirectoryService

diff --git a/files/es/nsicancelable/index.html b/files/es/nsicancelable/index.html new file mode 100644 index 0000000000..f54b4aea34 --- /dev/null +++ b/files/es/nsicancelable/index.html @@ -0,0 +1,50 @@ +--- +title: nsICancelable +slug: nsICancelable +tags: + - Interfaces + - Todas_las_Categorías +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsICancelable +--- +

 

+

 

+


+ La interfaz nsICancelable ofrece in método para cancelar una operación de descarga que está en progreso.

+


+

+
netwerk/base/public/nsICancelable.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.9 (Firefox 3)
+

+

Inherits from: nsISupports

+

Descripción de método

+ + + + + + +
void cancel(in nsresult aReason);
+

Métodos

+

cancel()

+

CLlama a éste método para solicitar la cancelación de cualquier operación que pueda estar realizando.

+
 void cancel(
+   in nsresult aReason
+ );
+
+
Parámetros
+
+
+ <tt>aReason</tt>
+
+ Un código de fallo indica porqué la operación ha sido cancelada. Es un error pasar un código de éxito.
+
+
+  
+

diff --git a/files/es/nsichannel/index.html b/files/es/nsichannel/index.html new file mode 100644 index 0000000000..a221ea5b33 --- /dev/null +++ b/files/es/nsichannel/index.html @@ -0,0 +1,183 @@ +--- +title: nsIChannel +slug: nsIChannel +tags: + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIChannel +--- +

La interfaz nsIChannel permite a los clientes construir peticiones "GET" para protocolos específicos y manejarlos de forma uniforme.

+ +


+ nsIChannel is defined in http://mxr.mozilla.org/mozilla/sourc...nsIChannel.idl .

+ +

Una vez que se crea un canal (via nsIIOService::newChannel), pueden presentarse parámetros para esa petición usando los atributos de canal, o poniéndose en cola (QI'ing) de una subclase de nsIchannel para los parámetros específicos del protocolo. Entonces, puede buscarse la URI llamando nsIChannel::open o nsIChannel::asyncOpen. Después de que una petición se ha completado, el canal está aún disponible para acceder a resultados específicos del protocolo. Por ejemplo, poniéndose en cola (QI'ing) a nsIHttpChannel permite que se puedan leer las correspondientes cabeceras de respuesta de una transacción http.

+ +

Métodos

+ +

open()

+ +
nsIInputStream open();
+
+ +

Abre un canal de forma síncrona.

+ +

@return blocking input stream to the channel's data.

+ +

NOTA: las implementaciones nsIChannel no requieren implementar este método. Aún más, ya que este método puede llegar a bloquear el proceso de la llamada, no debería usarse en el transcurso del proceso de eventos UI.

+ +

NOTA: Las implementaciones deberían devolver NS_ERROR_IN_PROGRESS si se re-abre el canal.

+ +

asyncOpen()

+ +
void asyncOpen(in nsIStreamListener aListener, in nsISupports aContext);
+
+ +

Abre este canal de forma asíncrona. Los datos son enviados al canal de escucha en cuanto están disponibles. El método de escucha es llamado en el mismo hilo en que se encuentra la operación de llamada asyncOpen y no es llamado hasta después del retorno de la función asyncOpen. Si asyncOpen devuelve con éxito, el canal prometo llamar al menos a onStartRequest y onStopRequest.

+ +

Si el objeto nsIRequest pasado al método de escucha no está en este canal, es necesario enviar una notificación onChannelRedirect antes de llamar a onStartRequest.

+ +

Si llamada de retorno del canal y del grupo de carga no ofrecen un nsIChannelEventSink al hacer la llamada a onChannelRedirect, esto es equivalente a haber llamado a onChannelRedirect.

+ +

Si asyncOpen retorna con éxito, el canal es responsable de mantenerse vivo hasta que reciba una llamada onStopRequest en la escucha o se lame a onChannelRedirect.

+ +

Las implementaciones tienen permitido añadirse por sí mismas, de forma síncrona, al grupo de carga asociado (si lo hay).

+ +

NOTA: Las implementaciones deberían devolver NS_ERROR_ALREADY_OPENED si un canal es re-abierto.

+ +

@param aListener the nsIStreamListener implementation @param aContext an opaque parameter forwarded to aListener's methods @see nsIChannelEventSink for onChannelRedirect

+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
originalURInsIURILa URI original usada para construir el canal. Esto se usa en el caso de una "resolución" de una URI re-dirigida (p.e. resolviendo un recurso: URI a archivo: URI) de forma que la URI original (antes de la redireción) esté disponible. +

NOTA: esto es notablemente distinto del Referer de http (URI referente) que es usualmente la página que contenía la URI original (accesible desde nsIHttpChannel).

+
URIreadonly nsIURILa URI correspondienter al canal. Su valor es inmutable.
ownernsISupportsEl dueño, correspondiendo a la entidad que es responsable por este canal. Lo usa el agente de seguridad para otorgar o denegar privilegios al código cargado a través de este canal. +

NOTA: esto es una fuerte referencia al dueño, de forma que si este está también manteniendo una fuerte referencia al canal, hay que tener mucho cuidado de cortar explícitamente la referencia al canal.

+
notificationCallbacksnsIInterfaceRequestorLas llamadas de notificación devueltas al canal. Estas son realizadas por el cliente, que quiere ofrecer una forma de recibir notificaciones de progreso, estado o específicas del protocolo. Si este valor es NULL, la implementación del canal puede usar las llamadas devueltas a su grupo de carga. El canal también puede interrogar las llamadas desde su grupo de carga, si las notificaciones que le llegan no ofrecen el interfaz requerido. +

Los interfaces usualmente requeridos incluyen: nsIProgressEventSink, nsIPrompt, y nsIAuthPrompt/nsIAuthPrompt2.

+ +

Cuando el canal ha terminado, no debe mantener ninguna referencia a estos objetos.

+ +

NOTA: Una implementación de un canal debe tener cuidado cuando almacena ("caching") el puntero de un interfaz llamado en una notificación. Si la notificación cambia, el puntero almacenado puede ser invalido y por tanto debería ser buscado de nuevo.

+
securityInforeadonly nsISupportsInformación de seguridad a nivel transporte (si la hay) correspondiente al canal.
contentTypereadonly ACStringEl tipo MIME del contenido del canal, si está disponible. +

NOTA: el tipo de contenido está, a menudo, incorrectamente especificado (p.e. extensión incorrecta del archivo, tipo MIME incorrecto, tipo de documento equivocado en el servidor, etc.) y es aconsejeble que el llamante verifique los datos propiamente.

+ +

Establecer contentType antes de que el canal esté abierto, da una pista al canal sobre que tipo de MIME se va a encontrar. El canal puede ignorar esta pista y decidir el tipo MIME que va a reportar.

+ +

Establecer contentType despues de que onStartRequest sea llamado o despues de llamar a open(), sobre escribirá el tipo determinado por el canal.

+ +

Establecer contentType en el momento entre que asyncOpen() es llamada y el momento en que se lanza onStartRequest tendrá resultados inpredecibles en este momento.

+ +

El valor del atributo contentType es una cadena en minúsculas. El valor asignado a este atributo será analizado y nomalizado de la siguiente forma:

+ +

1- cualquier parámetro (delimitado con ';') será desnudado. 2- si se da un parámetro del tipo charset, su valor reemplazará el atributo contentCharset del canal. 3- el valor desnudado será convertido a minúsculas. cualquier implementación de nsIChannel debe seguir estas reglas.

+
contentCharsetreadonly ACStringEl juego de caracteres del contenido del canal si está disponible y es aplicable. Este atributo solo se aplica a datos tipo texto. +

El valor del atributo contentCharset es una cadena de mayúsculas y minúsculas.

+
contentLengthreadonly longLa longitud de los datos asociados con el canal si está disponible. Un valor de -1 indica que la longitud es desconocida. +

Los llamantes deberían escoger leer la propiedad "content-length" como un valor de 64 bit pasando a través de nsIPropertyBag2, si esta interfaz está disponible al canal.

+
+ +

Constantes

+ +

Flags de carga específicos del canal:

+ +

Los bit 22 a 31 están reservados para un uso futuro de esta interfaz o una de sus derivadas (ejem. ver nsICachingChannel).

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValorDescripción
LOAD_DOCUMENT_URI16Establecer (p.e. a través de docshell) para indicar si el canal corresponde o no a un documento URI.
LOAD_RETARGETED_DOCUMENT_URI17Si el consumidor final de esta carga ha sido cambiado tras conocer su contenido, este flag será establecido:
LOAD_REPLACE18Este flag se establece a para indicar que este canal está reemplazando a otro canal. Esto significa que: +

1) se pasó al método asyncOpen la escucha en la que este canal sería notificado, de algún otro canal

+ +

y

+ +

2) la URI de este canal es un mejor identificador del recurso que está siendo accedido que la URI original del canal.

+ +

Este flag puede ser establecido, por ejemplo, por redirectores o en casos en que un solo canal tiene múltiples partes (y por tanto pueden seguir onStopRequest con otro par onStartRequest/onStopRequest, cada par para una petición distinta).

+
LOAD_INITIAL_DOCUMENT_URI19Establecer (p.e. a través de docshell) para indicar si el canal corresponde o no a la URI original de la carga (e.g., link click).
LOAD_TARGETED20Establecer (p.e. por el URILoader) para indicar si el consumidor final para esta carga ha sido determinado.
LOAD_CALL_CONTENT_SNIFFERS21Si este flag está establecido, el canal debería llamar al analizador de contenidos según se describe en nsNetCID.h acerca NS_CONTENT_SNIFFER_CATEGORY. +

Nota: Los canales pueden ignorar este flag. Sin embargo, la implementación de nuevos canales deberían hacer esto sólo por una buena razón.

+
diff --git a/files/es/nsidomofflineresourcelist/index.html b/files/es/nsidomofflineresourcelist/index.html new file mode 100644 index 0000000000..ea595df8c8 --- /dev/null +++ b/files/es/nsidomofflineresourcelist/index.html @@ -0,0 +1,228 @@ +--- +title: nsIDOMOfflineResourceList +slug: nsIDOMOfflineResourceList +tags: + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMOfflineResourceList +--- +

El interfaz nsIDOMOfflineResourceList ofrece acceso al "application-cache" (memoria cache temporal de la aplicación) que permite que los recursos del contenido web sean almacenados localmente para ser usados en modo desconectado. Este interfaz incluye métodos para agregar recursos o eliminar recursos de la cache, así como hacer una lista de los recursos manejados dinámicamente.

+ +


+

+
dom/public/idl/offline/nsIDOMOfflineResourceList.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.9 (Firefox 3)
+

+ +

Inherits from: nsISupports

+ +

Resumen del método

+ + + + + + + + + + + + + + + + + + + +
void add(in DOMString uri);
DOMString item(in unsigned long index);
void remove(in DOMString uri);
void swapCache();
void update();
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
lengthunsigned longEl número de entradas la lista de recursos manejados dinámicamenteSólo lectura .
oncheckingnsIDOMEventListenerEl evento de escucha que se llamará cuando se lean los manifiestos en la cache y se busquen actualizaciones.
onerrornsIDOMEventListenerUn evento de escucha que será llamado cuando ocurra un error durante el proceso de almacenaje en cache.
onnoupdatensIDOMEventListenerUn evento de escucha que será llamado cuando no hay actualizaciones a descargar.
ondownloadingnsIDOMEventListenerUn evento de escucha que será llamado cuando se están descargando recursos a la cache.
onprogressnsIDOMEventListenerUn evento de escucha que será llamado periódicamente a lo largo del proceso de descarga.
onupdatereadynsIDOMEventListenerUn evento de escucha que será llamado cuando hay disponible una actualización para un recurso; este evento no se utiliza actualmente ya que las aplicaciones con diferentes versiones aún no están implementadas.
oncachednsIDOMEventListenerUn evento de escucha que será llamado cuando se ha completado el proceso de almacenaje en cache.
statusunsigned shortUna de las constantes constants que indican el estado de la cache de la aplicación.
+ +

Constantes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValorDescripción
UNCACHED0El objeto no está asociado con una aplicación.
IDLE1La cache de la aplicación no está en proceso de ser actualizada.
CHECKING2El manifiesto de la cache de la aplicación está siendo leído y en busca de actualizaciones.
DOWNLOADING3Los recursos están siendo descargados para ser agregados a la cache.
UPDATEREADY4Hay una nueva versión de la aplicación disponible. +

Las aplicaciones con diferentes versiones no están aún implementadas, por lo que este valor de estado no está aún implementado.

+
+ +

Métodos

+ +

add()

+ +

Agrega un ítem a las entradas manejadas dinámicamente. Los recursos serán leídos y agregados a la cache de la aplicación.

+ +
 void add(
+   in DOMString uri
+ );
+
+ +
Parámetros
+ +
+
uri
+
La URI del recurso a agregar a la lista.
+
+ +

item()

+ +

Devuelve la URI del ítem en la posición especificada en la lista de recursos en la cache.

+ +
 DOMString item(
+   in unsigned long index
+ );
+
+ +
Parámetros
+ +
+
index
+
El índice de elementos en la cache cuya URI será devuelta.
+
+ +
Valor devuelto
+ +

Una constante DOMString conteniendo la URI del recurso especificado.

+ +

remove()

+ +

Elimina un ítem de la lista de entradas manejadas dinámicamente. Si es la última referencia a una URI determinada en la cache de la aplicación, la entrada de la caché es eliminada.

+ +
 void remove(
+   in DOMString uri
+ );
+
+ +
Parámetros
+ +
+
uri
+
La URI del elemento a eliminar de la lista.
+
+ +

swapCache()

+ +

Cambia a la nueva versión de la cache de la aplicación.

+ +

Las aplicaciones con diferentes versiones no están aún implementadas. Este método generará una excepción.

+ +
 void swapCache();
+
+ +
Parámetros
+ +

Ninguno.

+ +

update()

+ +

Comienza el proceso de actualización de la cache de la aplicación.

+ +
 void update();
+
+ +
Parámetros
+ +

Ninguno.

+ +

Ver también

+ + diff --git a/files/es/nsidownload/index.html b/files/es/nsidownload/index.html new file mode 100644 index 0000000000..3f0ea1bde1 --- /dev/null +++ b/files/es/nsidownload/index.html @@ -0,0 +1,116 @@ +--- +title: nsIDownload +slug: nsIDownload +tags: + - Firefox 3 + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDownload +--- +

Obsoleto
Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.

+ +

La interfaz nsIDownload describe un objeto descarga. Los objetos descarga son usados por el Administrador de Descargas (ver nsIDownloadManager para manejar archivos que están en cola para ser descargados, están siendo descargados y han terminado de ser descargados).

+ +
Nota: Una vez que la descarga esta completada, el Administrador de Descargas deja de actualizar el objeto nsIDownload. Los estdos de completado son: nsIDownloadManager::DOWNLOAD_FINISHED, nsIDownloadManager::DOWNLOAD_FAILED, y nsIDownloadManager::DOWNLOAD_CANCELED.
+ +


+

+
toolkit/components/downloads/public/nsIDownload.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.9 (Firefox 3)
+

+ +

Inherits from: nsITransfer

+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
targetFilensILocalFileIndica la localización donde estará el archivo descargado (o está, si la descarga se ha completado).Sólo lectura
percentCompletePRint32El porcentaje de la transferencia que se ha completado, o -1 si el tamaño del archivo es desconocido.Sólo lectura
amountTransferredPRUint64El número de bytes que se han descargado hasta ahora.Sólo lectura
sizePRUint64El tamaño total del archivo en bytes o LL_MAXUINT, si el tamaño es desconocido.Sólo lectura'Read only.
sourcensIURILa URI origen del archivo.Sólo lectura
cancelablensICancelableUn objeto que puede ser usado para cancelar la descarga. Una vez que la descarga se ha completado, esta valor se pone a null.Sólo lectura
displayNameAStringUna descripción, legible por el usuario, de la transferencia.Sólo lectura
startTimelong longLa hora a la que empezó la transferencia.Sólo lectura
speeddoubleLa velocidad de la transferencia en bytes por segundo.Sólo lectura
MIMEInfonsIMIMEInfoEste atributo opcional ofrece información relevante del MIME del archivo destino incluyendo el tipo MIME, la aplicación de ayuda y si la aplicación de ayuda debe o no ser llamada al terminar la descarga.
idunsigned longLa ID única por la que se identifica en la base de datos.
stateshortEl estado actual de la transferencia. Ver the nsIDownloadManager constants list.
referrernsIURILa URI referente de la descarga. Esto es sólo válido para descargas HTTP y puede ser null.
resumablebooleanIndica si la descarga puede ser reanudada después de haberse puesto en pausa. Esto es sólo aplicable si la descarga se hace sobre HTTP/1.1 o FTP y el servidor lo admite.
+ +

Ver también

+ +

nsIDownloadManager, nsIDownloadProgressListener, nsIXPInstallManagerUI

diff --git a/files/es/nsidownloadmanager/index.html b/files/es/nsidownloadmanager/index.html new file mode 100644 index 0000000000..95f09bdf4c --- /dev/null +++ b/files/es/nsidownloadmanager/index.html @@ -0,0 +1,442 @@ +--- +title: nsIDownloadManager +slug: nsIDownloadManager +tags: + - Firefox 3 + - Interfaces + - Todas_las_Categorías +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager +--- +

Obsoleto
Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.

El interfaz nsIDownloadManager permite a las aplicaciones y extensiones comunicarse con el Administrador de Descargas, añadiendo y quitando archivos a descargar, recolectando información sobre las descargas y siendo notificado cuando las descargas son finalizadas.

+ +


+

+
toolkit/components/downloads/public/nsIDownloadManager.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.9 (Firefox 3)
+

+ +

Deriva desde: nsISupports

+ +

Implementado por: @mozilla.org/download-manager;1. Para crear una unidad, usa:

+ +
var dm = Components.classes["@mozilla.org/download-manager;1"]
+                   .createInstance(Components.interfaces.nsIDownloadManager);
+
+ +

Descripción del método

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nsIDownload addDownload(aDownloadType para abreviar, en nsIURI aSource, en nsIURI aTarget, en AString aDisplayName, en nsIMIMEInfo aMIMEInfo, en PRTime aStartTime, en nsILocalFile aTempFile, en nsICancelable aCancelable)
nsIDownload getDownload(in unsigned long aID)
void cancelDownload(in unsigned long aID)
void removeDownload(in unsigned long aID)
void pauseDownload(in unsigned long aID)
void resumeDownload(in unsigned long aID)
void retryDownload(in unsigned long aID)
void cleanUp()
void addListener(in nsIDownloadProgressListener aListener)
void removeListener(in nsIDownloadProgressListener aListener)
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
DBConnectionmozIStorageConnectionLa conexión de la base de datos con la base de datos de descargas. Sólo lectura
canCleanUpbooleanSi hay o no descargas que se pueden limpiar (quitar) p.e. descargas completadas, fallidas o canceladas. Sólo lectura
activeDownloadCountlongNúmero de archivos actualmente siendo descargados. Sólo lectura
activeDownloadsnsISimpleEnumeratorEnumeración de los nsIDownloads activos. Sólo lectura
defaultDownloadsDirectorynsILocalFileDevuelve el directorio por defecto (dependiendo del SO) para las descargas. Sólo lectura
userDownloadsDirectorynsILocalFileDevuelve el directorio, configurado por el usuario, para las descargas. Sólo lecturaonly. +

El path depende de dos configuraciones del usuario en las preferencias:

+ +

browser.download.folderList define la localización por defecto para los archivos:

+ +
    +
  • 0: Los archivos se descargan en el Escritorio por defecto.
    • +
  • 1: Los archivos se descargan en el directorio especificado por el OS por defecto.
    • +
  • 2: Los archivos se descargan en el directorio local especificado por la preferencia browser.download.dir. Si esta preferencia es invalida, la descarga se realiza en el sitio por defecto.
    • +
+
+ +

Constantes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstaneValorDescripción
DOWNLOAD_NOTSTARTED-1La descarga no ha comenzado aún.
DOWNLOAD_DOWNLOADING0La descarga esta en proceso de ser descargada.
DOWNLOAD_FINISHED1La descarga ha terminado.
DOWNLOAD_FAILED2La descarga ha fallado.
DOWNLOAD_CANCELED3La descarga fue cancelada por el usuario.
DOWNLOAD_PAUSED4La descarga está actualmente en pausa.
DOWNLOAD_QUEUED5La descarga está en cola pero no está siendo descargada.
DOWNLOAD_BLOCKED6La descarga ha sido bloqueada, bien por un control paterno o el escáner de virus ha determinado que el archivo está infectado y no puede limpiarse.
DOWNLOAD_SCANNING7La descarga está siendo escaneada por la utilidad antivirus.
DOWNLOAD_TYPE_DOWNLOAD0¿Qué es esto?
+ +

Métodos

+ +

addDownload()

+ +

Crea un nsIDownload y lo añade para ser manejado por el Administrador de descargas.

+ +
nsIDownload addDownload(
+  in short aDownloadType,
+  in nsIURI aSource,
+  in nsIURI aTarget,
+  in AString aDisplayName,
+  in nsIMIMEInfo aMIMEInfo,
+  in PRTime aStartTime,
+  in nsILocalFile aTempFile,
+  in nsICancelable aCancelable
+)
+
+ +
Parámetros
+ +
+
aDownloadType
+
El tipo de transferencia de descarga.
+
+ +
+
aSource
+
El inicio del URI de transferencia. No debe ser null.
+
+ +
+
aTarget
+
El destino del URI dónde debe guardarse la transferencia. No debe ser null.
+
+ +
+
aDisplayName
+
Una descripción de la transferencia, legible por el usuario. Puede ser una cadena vacía.
+
+ +
+
aMIMEInfo
+
La información MIME asociada con el objetivo. Esto puede incluir el tipo MIME y la aplicación de ayuda en caso necesario. Este parámetro es opcional.
+
+ +
+
startTime
+
La hora a la que empezó la descarga.
+
+ +
+
aTempFile
+
La localización del archivo temporal (un archivo temporal en el que guardar los datos recibidos, que no es igual que el archivo de destino). El archivo será movido a su localización definitiva indicada por aTarget cuando se complete la descarga. Esto puede ser null.
+
+ +
+
aCancelable
+
Un objeto que puede ser utilizado para abortar una descarga. No debe ser null.
+
+ +
Valor devuelto
+ +

El objeto recientemente creado con las propiedades dadas.

+ +
Nota: Agregar una descarga no comienza el proceso de transferencia. Si quieres que sea así, necsitas crear un objeto nsIWebBrowserPersist, llamar al método, poner el progressListener al objeto de descarga devuelto y entonces llamar al método saveURI().
+ +

getDownload()

+ +

Lee una descarga manejada por el administrador de descargas. La descarga puede estra en proceso, o haber terminado y estar almacenada en la base de datos.

+ +
nsIDownload getDownload(
+  in unsigned long aID
+)
+
+ +
Parámetros
+ +
+
aID
+
La ID única de la descarga.
+
+ +
Valor devuelto
+ +

TLa descarga con el ID único especificado.

+ +
Excepciones
+ +
+
NS_ERROR_NOT_AVAILABLE
+
La descarga no está en la base de datos.
+
+ +

cancelDownload()

+ +

Cancela la descarga que tiene el ID único especificado, si se encuentra en progreso. Esto llama a cancel(NS_BINDING_ABORTED) en el nsICancelable dado por la descarga.

+ +
 void cancelDownload(
+   in unsigned long aID
+ )
+
+ +
Parámetros
+ +
+
aID
+
El ID único de la descarga.
+
+ +
Excepciones
+ +
+
NS_ERROR_FAILURE
+
La descarga no está en progreso.
+
+ +

removeDownload()

+ +

Quita de la lista, la descarga con el ID único especificado, si ésta no está en progreso. Así como cancelDownload() simplemente cancela la transferencia mientras que la información de la descarga se mantiene, removeDownload() borra todos los datos pertenecientes a la descarga.

+ +
 void removeDownload(
+   in unsigned long aID
+ )
+
+ +
Parámetros
+ +
+
aID
+
La ID única de la descarga.
+
+ +
Excepciones
+ +
+
NS_ERROR_FAILURE
+
La descarga está activa (está en proceso de transferencia).
+
+ +

pauseDownload()

+ +

Pone la descarga especificada en pausa.

+ +
 void pauseDownload(
+   in unsigned long aID
+ )
+
+ +
Parámetros
+ +
+
aID
+
La ID única de la descarga a detener.
+
+ +
Excepciones
+ +
+
NS_ERROR_FAILURE
+
La descarga no está en proceso.
+
+ +

resumeDownload()

+ +

Reanuda la descarga especificada.

+ +
 void resumeDownload(
+   in unsigned long aID
+ )
+
+ +
Parámetros
+ +
+
aID
+
La ID única de la descarga a reanudar.
+
+ +
Excepciones
+ +
+
NS_ERROR_FAILURE
+
La descarga no está en progreso.
+
+ +

retryDownload()

+ +

Reintenta una descarga fallida.

+ +
 void retryDownload(
+   in unsigned long aID
+ )
+
+ +
Parámetros
+ +
+
aID
+
La ID única de la descarga.
+
+ +
Excepciones
+ +
+
NS_ERROR_NOT_AVAILALE
+
si la descarga es desconocida.
+
+ +

cleanUp()

+ +

Quita de la lista las descargas terminadas, fallidas y canceladas.

+ +
 void cleanUp()
+
+ +
Parámetros
+ +

Ninguno.

+ +

addListener()

+ +

Agrega una escucha al Administrador de Descargas.

+ +
 void addListener(
+   in nsIDownloadProgressListener aListener
+ )
+
+ +
Parámetros
+ +
+
aListener
+
El objeto nsIDownloadProgressListener que recibirá la información de estado desde el Administrador de Descargas.
+
+ +

removeListener()

+ +

Retira una escucha del Administrador de Descargas.

+ +
 void removeListener(
+   in nsIDownloadProgressListener aListener
+ )
+
+ +
Parámetros
+ +
+
aListener
+
El objeto nsIDownloadProgressListener dejará de escuchar al Administrador de Descargas.
+
+ +

Ver también

+ + diff --git a/files/es/nsidownloadmanagerui/index.html b/files/es/nsidownloadmanagerui/index.html new file mode 100644 index 0000000000..457e4adbe8 --- /dev/null +++ b/files/es/nsidownloadmanagerui/index.html @@ -0,0 +1,126 @@ +--- +title: nsIDownloadManagerUI +slug: nsIDownloadManagerUI +tags: + - Firefox 3 + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManagerUI +--- +

El interfaz nsIDownloadManagerUI se usa para implementar el interfaz del usuario del Administrador de Descargas. Si quieres reemplazar el interfaz de usuario por defecto del Administrador de Descargas, implementa este interfaz.

+ +


+

+
toolkit/components/downloads/public/nsIDownloadManagerUI.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.9 (Firefox 3)
+

+ +

Inherits from: nsISupports

+ +

Resumen del método

+ + + + + + + + + + +
void getAttention();
void show([optional] in nsIInterfaceRequestor aWindowContext, [optional] in unsigned long aID, [optional] in short aReason);
+ +

Atributos

+ + + + + + + + + + + + + + +
AtributoTipoDescripción
visiblebooleanEste atributo de sólo lectura es true cuando el interfaz de usuario del Administrador de Descargas es visible, devolviendo false en caso contrario.
+ +

Constantes

+ + + + + + + + + + + + + + + + + + + +
ConstanteValorDescripción
REASON_USER_INTERACTED0Cuando se abre el interfaz de usuario del Administrador de Descargas, este valor indica que se ha abierto por requerimiento del usuario.
REASON_NEW_DOWNLOAD1Cuando se abre el interfaz de usuario del Administrador de Descargas, este valor indica que el interfaz está visible porque se ha iniciado una nueva descarga.
+ +

Métodos

+ +

getAttention()

+ +

Llama la atención del interfaz de usuario del Administrador de Descargas si este está aún visible.

+ +
 void getAttention();
+
+ +
Parámetros
+ +

Ninguno.

+ +
Excepciones
+ +
+
NS_ERROR_UNEXPECTED
+
El interfaz no es actualmente visible.
+
+ +

show()

+ +

Muestra el interfaz de usuario del Administrador de Descargas al usuario.

+ +
 void show(
+   [optional] in nsIInterfaceRequestor aWindowContext,
+   [optional] in unsigned long aID,
+   [optional] in short aReason
+ );
+
+ +
Parámetros
+ +
+
aWindowContext
+
La ventana padre que mostrará el interfaz. Con esta información, es posible poner el Administrador de Descargas en una pestaña de la misma ventana .
+
aID
+
El ID de la descarga que aparecerá preseleccionada cuando se abra el interfaz de usuario (UI) del administrador de Descargas.
+
aReason
+
Una de las razones (una constantes) indicando porqué debe ser mostrado el interfaz de usuario.
+
+ +

Ver también

+ + diff --git a/files/es/nsidownloadprogresslistener/index.html b/files/es/nsidownloadprogresslistener/index.html new file mode 100644 index 0000000000..ba65413b73 --- /dev/null +++ b/files/es/nsidownloadprogresslistener/index.html @@ -0,0 +1,304 @@ +--- +title: nsIDownloadProgressListener +slug: nsIDownloadProgressListener +tags: + - Firefox 3 + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener +--- +

El interfaz nsIDownloadProgressListener da a las aplicaciones y extensiones una manera de vigilar el estado de las descargas que están siendo procesadas por el Administrador de Descargas. Simplemente implementa este interfaz en tu código y llama a la función addListener() del nsIDownloadManager para empezar a escuchar.

+ +

Cuando no necesites escuchar más al Administrador de Descargas, llama a la función removeListener() del nsIDownloadManager para detener la escucha.

+ +

Al momento en que los estados de las descargan cambian, los métodos descritos aquí son llamados por el Administrador de Descargas para que tu código realice cualquier acción que necesite.

+ +

Esta interfaz trabaja de forma similar a la interfaz nsIWebProgress.

+ +


+

+
toolkit/components/downloads/public/nsIDownloadProgressListener.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.9 (Firefox 3)
+

+ +

Inherits from: nsISupports

+ +

Descripción del método

+ + + + + + + + + + + + + + + + + + + +
void onDownloadStateChange(in short aState, in nsIDownload aDownload)
void onProgressChange(in nsIWebProgress aWebProgress, in nsIRequest aRequest, in long long aCurSelfProgress, in long long aMaxSelfProgress, in long long aCurTotalProgress, in long long aMaxTotalProgress, in nsIDownload aDownload)
void onStatusChange(in nsIWebProgress aWebProgress, in nsIRequest aRequest, in nsresult aStatus, in wstring aMessage, in nsIDownload aDownload)
void onLocationChange(in nsIWebProgress aWebProgress, in nsIRequest aRequest, in nsIURI aLocation, in nsIDownload aDownload)x
void onSecurityChange(in nsIWebProgress aWebProgress, in nsIRequest aRequest, in unsigned long aState, in nsIDownload aDownload)
+ +

Atributos

+ + + + + + + + + + + + + + +
AtributoTipoDescripción
documentnsIDOMDocumentEl objeto documento que representa la ventana del Administrador de Descargas.
+ +

Métodos

+ +

onDownloadStateChange()

+ +

Es llamado cuando el estado de una descarga en particular cambia.

+ +
 void onDownloadStateChange(
+   in short aState,
+   in nsIDownload aDownload
+ );
+
+ +
Parámetros
+ +
+
aState
+
El estado previo de la descarga. Ver nsIDownloadManager para una lista de valores posibles.
+
+ +
+
aDownload
+
El objeto nsIDownload que representa el archivo cuyo estado de descarga ha cambiado. Puedes obtener el nuevo estado de la descarga con este método.
+
+ +

onStateChange()

+ +

Llamado cuando cambia el estado de una descarga en particular.

+ +
 void onStateChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in unsigned long aStateFlags,
+   in nsresult aStatus,
+   in nsIDownload aDownload
+ );
+
+ +
Parámetros
+ +
+
aWebProgress
+
La instancia nsIWebProgress que usa el Administrador de Descargas para vigilar la descarga.
+
+ +
+
aRequest
+
El nsIChannel cuyo estado cambia. Éste parámetro no será NULL.
+
+ +
+
aStateFlags
+
Flags indicandoel nuevo estado de la descarga. Este valores una combinación de uno de los state transition flags documentados en la sección nsIWebProgressListener.
+
+ +
+
aStatus
+
La información del nuevo estado de la descarga. Ver The new state information for the download. See onStateChange() en nsIWebProgressListener para más detalles. También puede ser una constante de nsIDownloadManager state constants.
+
+ +
+
aDownload
+
La descarga cuyo estado ha cambiado.
+
+ +

onProgressChange()

+ +

Llamado cuando el nivel de progreso de la descarga cambia.

+ +
 void onProgressChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in long long aCurSelfProgress,
+   in long long aMaxSelfProgress,
+   in long long aCurTotalProgress,
+   in long long aMaxTotalProgress,
+   in nsIDownload aDownload
+ );
+
+ +
Parámetros
+ +
+
aWebProgress
+
La instancia nsIWebProgress usada por el Administrador de Descargas para vigilar las descargas.
+
+ +
+
aRequest
+
El nsIChannel que ha cambiado de estado. Este parámetro no será NULL.
+
+ +
+
aCurSelfProgress
+
La cantidad actual de progreso de la descarga especificada por aDownload.
+
+ +
+
aMaxSelfProgress
+
El valor de progreso que debe alcanzarse para dar por finalizada la descarga.
+
+ +
+
aCurTotalProgress
+
La cantidad actual de progreso que se ha hecho en todas las descargas.
+
+ +
+
aMaxTotalProgress
+
El valor que necesita alcanzar el progreso total para determinar que todas las descargas están completadas.
+
+ +
+
aDownload
+
El objeto nsIDownload cuyo progreso está representado por los parámetros aCurSelfProgress y aMaxSelfProgress.
+
+ +

onStatusChange()

+ +

Llamado cuando el estado de una descarga solicita un cambio. El mensaje de estado recibido se quiere que sea bien visible al usuario.

+ +
Atención: Este método ya no está en Firefox 3 (Gecko 1.9). En versiones anteriores, este método nunca fue usado.
+ +
 void onStatusChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in nsresult aStatus,
+   in wstring aMessage,
+   in nsIDownload aDownload
+ );
+
+ +
Parámetros
+ +
+
aWebProgress
+
La instancia nsIWebProgress usada por el Administrador de Descargas para vigilar las descargas.
+
+ +
+
nsIChannel
+
El nsIRequest que cambia de estado. Este parámetro no será NULL.
+
+ +
+
aStatus
+
La información del nuevo estado de la descarga. Ver onStateChange() en nsIWebProgressListener para más detalles.
+
+ +
+
aMessage
+
Un mensaje de estado legible por el usuario, que se quiere presentar muy visible en la pantalla.
+
+ +
+
aDownload
+
La descarga cuyo estado ha cambiado.
+
+ +

onLocationChange()

+ +
Atención: Este método ya no está en Firefox 3 (Gecko 1.9). En versiones anteriores, este método nunca fue usado.
+ +
 void onLocationChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in nsIURI aLocation,
+   in nsIDownload aDownload
+ );
+
+ +

 

+ +
Parámetros
+ +
+
aWebProgress
+
La instancia nsIWebProgress usada por el Administrador de Descargas para vigilar las descargas.
+
+ +
+
aRequest
+
El nsIChannel que ha cambiado de estado. Este parámetro no será NULL.
+
+ +
+
aLocation
+
La URI del archivo que se está descargando.
+
+ +
+
aDownload
+
El objeto nsIDownload que representa el archivo que se está descargando.
+
+ +

onSecurityChange()

+ +

Llamado cuando el nivel de seguridad usado mientras se hace la descarga cambia. Por ejemplo, si la petición inicial se ha hecho en un servidor HTTPS pero la descarga cambia a un servidor HTTP, esta función es llamada para avisar de la transición

+ +
 void onSecurityChange(
+   in nsIWebProgress aWebProgress,
+   in nsIRequest aRequest,
+   in unsigned long aState,
+   in nsIDownload aDownload
+ );
+
+
+ +
Parámetros
+ +
+
aWebProgress
+
La instancia nsIWebProgress usada por el Administrador de Descargas para vigilar las descargas.
+
+ +
+
aRequest
+
El nsIChannel que cambia de estado. Este parámetro no será NULL.
+
+ +
+
aState
+
El nuevo estado de la descarga. Ver nsIDownloadManager para una lista de valores posibles.
+
+ +
+
aDownload
+
La descarga cuyo nivel de seguridad ha cambiado.
+
+ +

Ver también

+ +

nsIDownloadManager, nsIDownload, nsIWebProgressListener

diff --git a/files/es/nsidragservice/index.html b/files/es/nsidragservice/index.html new file mode 100644 index 0000000000..89c629f87e --- /dev/null +++ b/files/es/nsidragservice/index.html @@ -0,0 +1,317 @@ +--- +title: nsIDragService +slug: nsIDragService +tags: + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIDragService +--- +

+
widget/nsIDragService.idlScriptable
+ + +Implements the Drag Service for handling drag and drop operations. + + +
+Inherits from: nsISupports +Last changed in Gecko 43 (Firefox 43 / Thunderbird 43 / SeaMonkey 2.40)
+

+ +
Note: Using this interface directly from add-on code is deprecated. Add-ons should use the standard dataTransfer drag and drop API instead. The only exception is getCurrentSession(), since there's currently no way to check for a drag in progress using standard DOM methods or properties.
+ +

Method overview

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void endDragSession( in PRBool aDoneDrag ) ;
void dragMoved(in long aX, in long aY); Native code only!
void fireDragEventAtSource(in unsigned long aMsg); Obsoleto Gecko 43
void fireDragEventAtSource(in mozilla::EventMessage aEventMessage); Native code only!
nsIDragSession getCurrentSession( ) ;
void invokeDragSession( in nsIDOMNode aDOMNode, in nsISupportsArray aTransferables, in nsIScriptableRegion aRegion, in unsigned long aActionType );
void invokeDragSessionWithImage(in nsIDOMNode aDOMNode, in nsISupportsArray aTransferableArray, in nsIScriptableRegion aRegion, in unsigned long aActionType, in nsIDOMNode aImage, in long aImageX, in long aImageY, in nsIDOMDragEvent aDragEvent, in nsIDOMDataTransfer aDataTransfer);
void invokeDragSessionWithSelection(in nsISelection aSelection, in nsISupportsArray aTransferableArray, in unsigned long aActionType, in nsIDOMDragEvent aDragEvent, in nsIDOMDataTransfer aDataTransfer);
void startDragSession( ) ;
void suppress();
void unsuppress();
+ +

Constants

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
DRAGDROP_ACTION_NONE0No action.
DRAGDROP_ACTION_COPY1The drag and drop operation should copy the object.
DRAGDROP_ACTION_MOVE2The drag and drop operation should move the object.
DRAGDROP_ACTION_LINK4The drag and drop operation should link the object.
DRAGDROP_ACTION_UNINITIALIZED64The action is not initialized.
+ +

Methods

+ +

Native code only!

dragMoved

+ +

+ +

Programmatically changes the drag position of the drag session. This is used on Mac and Windows to update the position of a popup being used as a drag image during the drag operation. It's not used on GTK, which handles the drag popup itself.

+ +
[noscript] void dragMoved(
+  in long aX,
+  in long aY
+);
+
+ +
Parameters
+ +
+
aX
+
The X coordinate to which to move the popup being dragged.
+
aY
+
The Y coordinate to which to move the popup being dragged.
+
+ +

endDragSession()

+ +

Tells the Drag Service to end a drag session. This is called when an external drag occurs.

+ +
void endDragSession(
+  in PRBool aDoneDrag
+);
+
+ +
Parameters
+ +
+
aDoneDrag
+
If aDoneDrag is true, the drag has finished, otherwise the drag has just left the window.
+
+ +

fireDragEventAtSource()

+ +

Obsoleto Gecko 43 (Firefox 43 / Thunderbird 43 / SeaMonkey 2.40)
Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.

+ +

Fire a drag event at the source of the drag. This was changed in Gecko 43, see the following section.

+ +
void fireDragEventAtSource(
+  in unsigned long aMsg
+); Obsoleto Gecko 43
+
+ +
Parameters
+ +
+
aMsg
+
One of the NS_DRAGDROP_* contants which was defined in widget/BasicEvents.h
+
+ +

+ +

Fire a drag event at the fource of the drag. This is available only from native code since Gecko 43.

+ +
[noscript] void fireDragEventAtSource(
+  in mozilla::EventMessage aEventMessage
+);
+
+ +
Parameters
+ +
+
aEventMessage
+
One of the event messages between eDragDropEventFirst and eDragDropEventLast defined in widget/EventMessageList.h
+
+ +

getCurrentSession()

+ +

Returns the current nsIDragSession.

+ +
nsIDragSession getCurrentSession();
+
+ +
Parameters
+ +

None.

+ +
Return value
+ +

The current drag session, or null if no drag is in progress.

+ +

invokeDragSession()

+ +

Starts a modal drag session with an array of transferables

+ +
void invokeDragSession(
+  in nsIDOMNode aDOMNode,
+  in nsISupportsArray aTransferables,
+  in nsIScriptableRegion aRegion,
+  in unsigned long aActionType
+);
+
+ +
Parameters
+ +
+
aDOMNode
+
The source node on which the drag gesture was started.
+
aTransferables
+
An array of transferables to be dragged.
+
aRegion
+
A region containing rectangles for cursor feedback, in window coordinates.
+
aActionType
+
Specified which of copy/move/link are allowed.
+
+ +

invokeDragSessionWithImage()

+ +

Starts a modal drag session using an image.

+ +

A custom image may be specified using the aImage argument. If this is supplied, the aImageX and aImageY arguments specify the offset within the image where the cursor would be positioned. That is, when the image is drawn, it is offset up and left the amount so that the cursor appears at that location within the image. If aImage is null, aImageX and aImageY are not used and the image is instead determined from the source node aDOMNode, and the offset calculated so that the initial location for the image appears in the same screen position as where the element is located. The node must be within a document.

+ +

Currently, supported images are all DOM nodes. If this is an HTML <image> or <canvas> element, the drag image is taken from the image data. If the element is in a document, it will be rendered at its displayed size, otherwise, it will be rendered at its real size. For other types of elements, the element is rendered into an offscreen buffer in the same manner as it is currently displayed. The document selection is hidden while drawing. The aDragEvent must be supplied as the current screen coordinates of the event are needed to calculate the image location.

+ +
void invokeDragSessionWithImage(
+  in nsIDOMNode aDOMNode,
+  in nsISupportsArray aTransferableArray,
+  in nsIScriptableRegion aRegion,
+  in unsigned long aActionType,
+  in nsIDOMNode aImage,
+  in long aImageX,
+  in long aImageY,
+  in nsIDOMDragEvent aDragEvent,
+  in nsIDOMDataTransfer aDataTransfer
+);
+
+ +
Parameters
+ +
+
aDOMNode
+
The source node on which the drag gesture was started.
+
aTransferables
+
An array of transferables to be dragged.
+
aRegion
+
A region containing rectangles for cursor feedback, in window coordinates.
+
aActionType
+
Specified which of copy/move/link are allowed.
+
aImage
+
Image object.
+
aImageX
+
X position of image.
+
aImageY
+
Y position of image.
+
aDragEvent
+
The drag gesture event that initiated the drag.
+
aDataTransfer
+
A data transfer object that is available on the current drag session.
+
+ +

invokeDragSessionWithSelection()

+ +

Start a modal drag session using the selection as the drag image. The aDragEvent must be supplied as the current screen coordinates of the event are needed to calculate the image location.

+ +
void invokeDragSessionWithSelection(
+  in nsISelection aSelection,
+  in nsISupportsArray aTransferableArray,
+  in unsigned long aActionType,
+  in nsIDOMDragEvent aDragEvent,
+  in nsIDOMDataTransfer aDataTransfer
+);
+
+ +
Parameters
+ +
+
aSelection
+
The selection that is to be dragged.
+
aTransferableArray
+
An array of transferables to be dragged.
+
aActionType
+
Specified which of copy/move/link are allowed
+
aDragEvent
+
The drag gesture event that initiated the drag.
+
aDataTransfer
+
A data transfer object that is available on the current drag session.
+
+ +

startDragSession()

+ +

Tells the Drag Service to start a drag session. This is called when an external drag occurs

+ +
void startDragSession();
+
+ +
Parameters
+ +

None.

+ +

suppress()

+ +

Increase dragging suppress level by one. This disables dragging if it is not already disabled.

+ +
void suppress();
+
+ +
Parameters
+ +

None.

+ +

unsuppress()

+ +

Decrease dragging suppress level by one. If level is zero, dragging is re-enabled.

+ +
void unsuppress();
+
+ +
Parameters
+ +

None.

+ +

diff --git a/files/es/nsilocalfile/index.html b/files/es/nsilocalfile/index.html new file mode 100644 index 0000000000..60e4f41990 --- /dev/null +++ b/files/es/nsilocalfile/index.html @@ -0,0 +1,121 @@ +--- +title: nsILocalFile +slug: nsILocalFile +tags: + - Interfaces + - 'Interfaces:Frozen' + - 'Interfaces:Scriptable' + - Todas_las_Categorías +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILocalFile +--- +

 

+

 

+

« XPCOM API Reference

+

Resumen

+

La interfaz nsILocalFile representa un archivo o un directorio en una manera independiente de la plataforma, que es accesible en el sistema de archivos local. Por ello, incrementa nsIFile.

+
 #include "nsILocalFile.h"
+
+ [scriptable, uuid=(aa610f20-a889-11d3-8c81-000064657374)]
+ interface nsILocalFile : nsIFile { ... };
+
+

Métodos

+
+
+ initWithPath
+
+ Éste método es usado para establecer el path completo a que hace referencia nsILocalFile.
+
+
+
+ initWithNativePath
+
+ Éste método es usado para establecer el path completo a que hace referencia nsILocalFile references. [variante con los caractéres especiales locales]
+
+
+
+ initWithFile
+
+ Éste método se usa para inicializar un nsILocalFile desde otro nsILocalFile.
+
+
+
+ openNSPRFileDesc
+
+ Éste método se usa para abrir el archivo correspondiente a este nsILocalFile.
+
+
+
+ openANSIFileDesc
+
+ Éste método se usa para abrir el archivo correspondiente a este nsILocalFile.
+
+
+
+ load
+
+ Éste método se usa para abrir la librería (enlazada dinámicamente) correspondiente a nsILocalFile.
+
+
+
+ appendRelativePath
+
+ Éste método es usado para agregar un path relativo al nsILocalFile en curso.
+
+
+
+ appendRelativeNativePath
+
+ Éste método es usado para agregar un path relativo al nsILocalFile en curso. [variante con los caractéres especiales locales]
+
+
+
+ reveal
+
+ Éste método solicita que el sistema operativo revele éste nsILocalFile al usuario. No implementado en algunas plataformas.
+
+
+
+ launch
+
+ Éste método solicita que el sistema operativo intente abrir éste nsILocalFile. No implementado en algunas plataformas.
+
+
+
+ getRelativeDescriptor
+
+ Éste método devuelve una representación multi-plataforma del path relativo de un archivo.
+
+
+
+ setRelativeDescriptor
+
+ Éste método inicializa un nsILocalFile a partir de la descripción relativa obtenida de getRelativeDescriptor.
+
+

Atributos

+
+
+ followLinks
+
+ Éste atributo determina si el nsILocalFile resolverá o no, enlaces simbólicos.
+
+
+
+ diskSpaceAvailable
+
+ Éste atributo presenta la cantidad de espacio disponible en el disco que contiene el nsILocalFile.
+
+
+
+ persistentDescriptor
+
+ Éste atributo presenta una cadena, dependiente de la plataforma, representando el nsILocalFile.
+
+

Observaciones

+

Los métodos initWithNativePath y appendRelativeNativePath toman parámetros representados por cadenas que son codificados usando el sistema de códigos local. Esto significa que no puedes usar nombres con caracteres fuera de la página de códigos de Windows, aunque Windows 2000 y posteriores no tengan problema en manejarlos. Por tanto, nunca uses funciones a no ser que estés absolutamente seguro de que el path que pasan es siempre ASCII. Ver nsIFile para más información sobre los códigos de caractéres locales.

+

launch y reveal están sólo implementados en Windows, MacOSX, BeOS y OS/2 (a fecha 2007/03/14, FX3.0, Gecko 1.9). En sistemas *nix-ish tales como Linux, BSDs, Solaris o similares ninguna de estas dos funciones harán nada más que devolver inmediatamente un valor NS_ERROR_FAILURE. Ver error 391980 para más información.
+ Para trabajar con esos sistemas también, querrás considerar el atajo de Firefox Download Manager. Para un poco de "inspiración" ver: http://mxr.mozilla.org/seamonkey/sou...t/downloads.js

+

Historia

+

Este interfaz fue congelado por Mozilla 1.0. Ver error 129279 para más detalles.

+
+  
+

diff --git a/files/es/nsisimpleenumerator/index.html b/files/es/nsisimpleenumerator/index.html new file mode 100644 index 0000000000..b90d96f4eb --- /dev/null +++ b/files/es/nsisimpleenumerator/index.html @@ -0,0 +1,46 @@ +--- +title: nsISimpleEnumerator +slug: nsISimpleEnumerator +tags: + - Interfaces + - 'Interfaces:Frozen' + - 'Interfaces:Scriptable' + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISimpleEnumerator +--- +

Resumen

+ +

El interfaz nsISimpleEnumerator representa una enumeración de los objetos XPCOM y ofrece métodos para acceder a los elementos secuencialmente.

+ +
#include "nsISimpleEnumerator.h"
+
+[scriptable, uuid=(D1899240-F9D2-11D2-BDD6-000064657374)]
+interface nsISimpleEnumerator : nsISupports { ... };
+
+ +

Métodos

+ +
+
hasMoreElements
+
Este método devuelve true si hay más objetos XPCOM en la lista.
+
+ +
+
getNext
+
Este método devuelve el siguiente objeto XPCOM en la lista.
+
+ +

Observaciones

+ +

Aunque hasMoreElements puede ser llamado independientemente de getNext, getNext debe estar precedido de una llamada a hasMoreElements.

+ +

No hay manera de "reset" una lista nsISimpleEnumerator.

+ +

Historia

+ +

Esta interfaz ha sido congelada por Mozilla 0.9.6. Ver bug 154047para más detalles.

+ +

Ejemplo

+ +

Code example of nsISimpleEnumerator

diff --git a/files/es/nsisupports/addref/index.html b/files/es/nsisupports/addref/index.html new file mode 100644 index 0000000000..75587c76b6 --- /dev/null +++ b/files/es/nsisupports/addref/index.html @@ -0,0 +1,20 @@ +--- +title: AddRef +slug: nsISupports/AddRef +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISupports/AddRef +--- +

 

+

 

+

« XPCOM API Reference

+

Resumen

+

El método AddRef notifica al objeto, que un puntero de la interfaz ha sido duplicado.

+
[noscript, notxpcom] nsrefcnt AddRef();
+
+

Valores devueltos

+

Devuelve un entero que es generalmente ignorado.

+

Observaciones

+

Cada llamada a AddRef debe compensarse con una llamada a Release cuando no se necesita más el puntero.

+

 

+
+  
+

diff --git a/files/es/nsisupports/index.html b/files/es/nsisupports/index.html new file mode 100644 index 0000000000..ab928f9c60 --- /dev/null +++ b/files/es/nsisupports/index.html @@ -0,0 +1,44 @@ +--- +title: nsISupports +slug: nsISupports +tags: + - Interfaces + - 'Interfaces:Frozen' + - Todas_las_Categorías +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISupports +--- +

 

+

 

+

« XPCOM API Reference

+

Resumen

+

Todas las interfaz XPCOM heredan la interfaz de nsISupports.

+
#include "nsISupports.h"
+
+[scriptable, uuid=(0000000-0000-0000-c000-000000000046)]
+interface nsISupports { ... };
+
+

Métodos

+
+
+ AddRef
+
+ El método AddRef notifica al objeto, que un puntero de la interfaz ha sido duplicado.
+
+
+
+ QueryInterface
+
+ El método QueryInterface facilita el tipo de runtime.
+
+
+
+ Release
+
+ El método Release notifica al objeto, que un puntero de la interfaz ha sido destruido y que cualquier recurso que el objeto tenga en nombre del cliente, puede ser liberado.
+
+

Observación

+

Las descripciones de métodos anteriores han sido tomadas de Essential COM by Don Box. El objeto de estas descripciones es resaltar el hecho de que Addref y Release no corresponden necesariamente a incrementar y decrementar, respectivamente, un contador, aunque así sea como se han implementado generalmente.

+

En los sistemas Win32, nsISupports es compatible a nivel ABI con la interfaz IUnknown de Microsoft COM.

+
+  
+

diff --git a/files/es/nsisupports/queryinterface/index.html b/files/es/nsisupports/queryinterface/index.html new file mode 100644 index 0000000000..ab988699f9 --- /dev/null +++ b/files/es/nsisupports/queryinterface/index.html @@ -0,0 +1,43 @@ +--- +title: QueryInterface +slug: nsISupports/QueryInterface +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISupports#QueryInterface() +--- +

 

+

 

+

« XPCOM API Reference

+

Resumen

+

El método QueryInterface facilita el tipo de runtime.

+
void QueryInterface(
+  in nsIIDRef aIID,
+  [iid_is(aIID), retval] out nsQIResult aResult
+);
+
+

Parámetros

+
+
+ aIID
+
+ [in] El IID del interfaz requerido.
+
+
+
+ aResult
+
+ [out] El puntero resultante.
+
+

Valores devueltos

+

Este método no devuelve valor alguno.

+

Excepciones

+
+
+ NS_ERROR_NO_INTERFACE
+
+ La interfaz interrogada no está disponible.
+
+

Observaciones

+

El puntero de interfaz, aResult, devuelto por QueryInterface debe ser liberado mediante una llamada a Release cuando ya no se necesite. QueryInterface es un operador simétrico, transitivo, y reflexivo.

+

 

+
+  
+

diff --git a/files/es/nsisupports/release/index.html b/files/es/nsisupports/release/index.html new file mode 100644 index 0000000000..48b76f3584 --- /dev/null +++ b/files/es/nsisupports/release/index.html @@ -0,0 +1,18 @@ +--- +title: Release +slug: nsISupports/Release +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsISupports/Release +--- +

 

+

 

+

« XPCOM API Reference

+

Resumen

+

El método Release notifica al objeto que, un puntero del interfaz ha sido destruido y que cualquier recurso que el objeto mantenga en nombre del cliente, puede ser liberado.

+
[noscript, notxpcom] nsrefcnt Release();
+
+

Valores devueltos

+

Devuelve un entero que es generalmente ignorado.

+

 

+
+  
+

diff --git a/files/es/nsiuri/index.html b/files/es/nsiuri/index.html new file mode 100644 index 0000000000..051f6399c0 --- /dev/null +++ b/files/es/nsiuri/index.html @@ -0,0 +1,441 @@ +--- +title: nsIURI +slug: nsIURI +tags: + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIURI +--- +

nsIURI es un interfaz para un identificador de recursos uniforme con soporte de internacionalización, que ofrece atributos que permiten la configuración y filtrado de componentes de URI y métodos para le ejecución de operaciones básicas en URI´s. Para detalles vea los siguientes RFC´s:

+ +

+

+

+ +

Las subclases de nsIURI, tales como nsIURL , imponen estructura adicional sobre la URI.

+ +

nsIURI se define en netwerk/base/public/nsIURI.idl . Es encriptable y se ha mantenido congelada desde Mozilla 1.0.0 .

+ +

Heredada de: nsISupports

+ +

Para crear un objeto nsIURI, debes usar el método newURI() de  nsIIOService, como este:

+ +
+
+
view plainprint?
+
+ +
    +
  1. function makeURI(aURL, aOriginCharset, aBaseURI) {  
    2. +
  2.   var ioService = Components.classes["@mozilla.org/network/io-service;1"]  
    3. +
  3.                             .getService(Components.interfaces.nsIIOService);  
    4. +
  4.   return ioService.newURI(aURL, aOriginCharset, aBaseURI);  
    5. +
  5. } 
    6. +
+
+ +

Nota: Esta es la única forma correcta de crear un objeto nsIURI.

+ +

Componentes de un URI

+ +
Edit section
+ +

uri-diagram.png

+ +

Vista rápida del método

+ +
Edit section
+ + + + + + + + + + + + + + + + +
nsIURI clone()
boolean equals(in nsIURI other);
boolean schemeIs(in string scheme);
AUTF8String resolve(in AUTF8String relativePath);
+ +

Atributos

+ +
Edit section
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
specnsACString (UTF-8) +

Retorna un cadena en representación de la URI. Al usar spec causa que la nueva spec sea evaluada usando las reglas que tiene actualmente el el esquema de la URI. Si la cadena no puede ser analizada como una URI, aparece un NS_ERROR_MALFORMED_URI. (error de URI malformada).

+ +
Advertencia: Ya que la comprobación de la cadena se ha hecho usando el esquema de la URI actual, el uso de spec para un URI con un esquema diferente producirá resultados incorrectos. Por lo tanto, únicamente las implementaciones del manejador de protocolo debieran hacer esto.
+ +

Si la URI almacena información de la newURI() de la interfaz de nsIIOService que la creó, una cadena además a la analizada, el comportamiento de esta información cuando el atributo spec es establecido, no está definido.

+
prePathsololectura nsACString (UTF-8) +

La prePath retorna la cadena antes de la ruta(como en "scheme://user:password@host:port"). Esto es muy útil para sesiones de autenticación o administración.

+ +
Nota: Algunos caracteres pueden ser códigos de escape.
+
schemensACString (US-ASCII) +

La scheme es el protocolo al cual esta URI se refiere. El scheme está restringido a los caractéres de la US-ASCII por RFC2396.

+ +
Advertencia: Al usar esto fuera de una implementación de manejador de protocolo es muy desalentador, una vez establecido generalmente lleva a obtener resultados impredecibles.
+
userPassnsACString (UTF-8) +

El "username:password" (o nombre de usuario sólo si el valor no contiene una':').

+ +
Nota: Algunos caracteres pueden ser códigos de escape.
+
usernamensACString (UTF-8) +

El nombre de usuario opcional, suponiendo que la preHost consiste en "username:password".

+ +
Nota: Algunos caracteres pueden ser códigos de escape.
+
passwordnsACString (UTF-8) +

La contraseña opcional, suponiendo que la preHost consiste en "usuario:contraseña".

+ +
Nota: Algunos caracteres pueden ser códigos de escape.
+
hostPortnsACString (UTF-8) +

El "servidor:puerto" parte de la URI (o simplemente el servidor, si el puerto es -1).

+ +
Nota: Los caracteres no son códigos de escape.
+
hostnsACString (UTF-8) +

El servidor es el nombre de dominio de Internet a los que se refiere este URI. Podría ser una dirección literal IPv4 (o IPv6). Si está soportada, podría ser un nombre de dominio no-ASCII internacionalizado.

+ +
Nota: Los caracteres no son códigos de escape.
+
portPRInt32 +

El puerto de URI's. Un valor de puerto de -1 corresponde al puerto por defecto del protocolo (por ejemplo, -1 implica el puerto 80 para HTTP URIs).

+
pathnsACString (UTF-8) +

La ruta, que típicamente incluye al menos una de las principales '/' (aunque también puede estar vacío, dependiendo del protocolo).

+ +
Nota: Algunos caracteres pueden ser códigos de escape.
+
asciiSpecreadonly nsACString (US-ASCII) +

La especificación URI con una codificación compatible con ASCII. La porción de host sigue la especificación del proyecto de IDNA. Otras partes son URL con caracteres de escape por las normas de RFC2396. El resultado es estrictamente ASCII.

+
asciiHostreadonly nsACString (US-ASCII) +

El servidor URI con una codificación compatible con ASCII. Sigue la especificación del proyecto de IDNA para convertir los nombres de dominio internacionalizados (UTF-8) a ASCII para la compatibilidad con la infraestructura de Internet existente.

+
originCharsetreadonly nsACString +

El juego de caracteres del documento del que se originó este URI. Un valor vacío implica UTF-8.

+ +

Si este valor es algo distinto de UTF-8 a continuación, los componentes de URI (por ejemplo, spec, prePath, nombre de usuario, etc) son totalmente URL de escape. De lo contrario, los componentes de URI pueden contener caracteres sin escape multibyte UTF-8 .

+
+ +

 

+ +


+

+
netwerk/base/public/nsIURI.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.0.0
+

+ +

Código de interfaz

+ +
[scriptable, uuid(07a22cc0-0ce5-11d3-9331-00104ba0fd40)]
+interface nsIURI : nsISupports
+{
+  attribute AUTF8String spec;
+  readonly attribute AUTF8String prePath;
+  attribute ACString scheme;
+  attribute AUTF8String userPass;
+  attribute AUTF8String username;
+  attribute AUTF8String password;
+  attribute AUTF8String hostPort;
+  attribute AUTF8String host;
+  attribute long port;
+  attribute AUTF8String path;
+
+  boolean equals(in nsIURI other);
+  boolean schemeIs(in string scheme);
+  nsIURI clone();
+  AUTF8String resolve(in AUTF8String relativePath);
+
+  readonly attribute ACString asciiSpec;
+  readonly attribute ACString asciiHost;
+  readonly attribute ACString originCharset;
+};
+
+ +

Esencialmente URI son nombres estructurados para... cualquier cosa. Este interfaz ofrece métodos para crear y cuestionar los componentes básicos de un URI. Las sub clases, incluida ofrecen mayor estructura a los URI. Esta interfaz sigue las especificaciones Berners-Lee en RFC 2396, donde se definen las URI básicas como:

+ +
ftp://user:password@example.org:12345/path/leaf
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComponenteValore en el ejemplo
schemeftp
userPassuser:password
hostexample.org
port12345
path/path/leaf
prePathftp://user:password@example.org:12345
+ +

Métodos

+ +

equals()

+ +
boolean equals (in nsIURI other);
+
+ +

Compara la URI actual con otra, retornando true si las dos representan el mismo sitio.

+ +

Nota: Es más que un comparación de cadena, ya que dos cadenas URI distintas pueden representar el mismo sitio. P.e.: Esta comparación devolverá true  http://example.com:80/ == http://example.com/

+ +

schemeIs()

+ +
boolean schemeIs(in string scheme);
+
+ +

Una optimización para hacer chequeos de esquema sin pedir los usuarios de nsIURI a GetScheme, con esto se ahorran asignaciones y liberaciones extra de memoria. Retorna True  si el esquema coincide (se ingnoran mayúsculas o minúsculas)

+ +

clone()

+ +
nsIURI clone();
+
+ +

Clona la URI, retornando un nuevo objeto nsIURI

+ +

Para algunos protocolos, esto es más que una simple optimización. Por ejemplo, en MacOS X, la especificación de una dirección de fichero no implica necesariamente la identificación exclusiva de un archivo, ya que dos volúmenes podrían tener el mismo nombre.

+ +

resolve()

+ +
AUTF8String resolve(in AUTF8String relativePath);
+
+ +

Este método resuelve una cadena uri relativa usando esta URI como base.

+ +

Nota: Algunas implementaciones puede que no tengan el concepto de URI relativo.

+ +

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
specnsACString (UTF-8)Devuelve una representación de cadena de la URI. Configura las spec causada con la nueva spec para ser analizada, inicializa la URI.
prePathreadonly nsACString (UTF-8)El prePath (eg. scheme://user:password@host:port) retorna la cadena de caracteres que se encuentran antes del path. Esto es útil para la autenticación o para el manejo de sesiones. +

Some characters may be escaped.

+
schemensACString (US-ASCII)El Esquema es el protocolo al cual la URI se refiere. El Esquema está restringido al conjunto de caracteres US-ASCII definido por el RFC2396.
userPassnsACString (UTF-8)La combinación nombre_de_usuario:contraseña (username:password) (o nombre_de_usuario sólo si el valor no contiene ':'). +

Some characters may be escaped.

+
usernamensACString (UTF-8)The optional username, assuming the preHost consists of username:password. +

Some characters may be escaped.

+
passwordnsACString (UTF-8)The optional password, assuming the preHost consists of username:password. +

Some characters may be escaped.

+
hostPortnsACString (UTF-8)La combinación host:puerto (host:port) (o simplemente el host, si el puerto es -1). +

Characters are NOT escaped.

+
hostnsACString (UTF-8)El host es el nombre de dominio de internet al cual se refiere la URI. Puede ser una dirección IPv4 o IPv6. Si es soportado puede ser un nombre de dominio internacionalizado no-ASCII. +

Characters are NOT escaped.

+
portPRInt32Si el valor del puerto es -1 esto corresponde con el puerto por defecto para el protocolo (ejm. -1 implica que se usa el puerto 80 para las URI http).
pathnsACString (UTF-8)The path, typically including at least a leading '/' (but may also be empty, depending on the protocol). +

Some characters may be escaped.

+
asciiSpecreadonly nsACString (US-ASCII)The URI spec with an ASCII compatible encoding. Host portion follows the IDNA draft spec. Other parts are URL-escaped per the rules of RFC2396. The result is strictly ASCII.
asciiHostreadonly nsACString (US-ASCII)The URI host with an ASCII compatible encoding. Follows the IDNA draft spec for converting internationalized domain names (UTF-8) to ASCII for compatibility with existing internet infrasture.
originCharsetreadonly nsACStringThe charset of the document from which this URI originated. An empty value implies UTF-8. +

If this value is something other than UTF-8 then the URI components (e.g., spec, prePath, username, etc.) will all be fully URL-escaped. Otherwise, the URI components may contain unescaped multibyte UTF-8 characters.

+
diff --git a/files/es/nsiwebprogress/index.html b/files/es/nsiwebprogress/index.html new file mode 100644 index 0000000000..3b9fbb8ff0 --- /dev/null +++ b/files/es/nsiwebprogress/index.html @@ -0,0 +1,233 @@ +--- +title: nsIWebProgress +slug: nsIWebProgress +tags: + - Interfaces + - 'Interfaces:Frozen' + - 'Interfaces:Scriptable' + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIWebProgress +--- +

« XPCOM API Reference

+ +

Resumen

+ +

El interfaz nsIWebProgress es usado para agregar o quitar instancias nsIWebProgressListener para observar la carga de peticiones asíncronas (usualmente en el contexto DOM).

+ +

Las instancias nsIWebProgress pueden ser dispuestas en una configuración padre-hijo, correspondiente a la configuración padre-hijo de sus respectivas ventanas DOM. Sin embargo, en algunos casos, una instancia nsIWebProgress puede no estar asociada a una ventana DOM. La relación padre-hijo de las instancias nsIWebProgress no está hecha explícitamente para este intefaz, pero la relación puede existir en algunas implementaciones.

+ +

Una instancia nsIWebProgressListener recibe notificaciones la instancia nsIWebProgress a la cual se ha agregado y puede tambien recibir notificaciones de cualquier instancia nsIWebProgress que sea hija de la instancia nsIWebProgress.

+ +

+
uriloader/base/nsIWebProgress.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.8.0
+

+ +

Código del interfaz

+ +
[scriptable, uuid(570F39D0-EFD0-11d3-B093-00A024FFC08C)]
+interface nsIWebProgress : nsISupports
+{
+  const unsigned long NOTIFY_STATE_REQUEST  = 0x00000001;
+  const unsigned long NOTIFY_STATE_DOCUMENT = 0x00000002;
+  const unsigned long NOTIFY_STATE_NETWORK  = 0x00000004;
+  const unsigned long NOTIFY_STATE_WINDOW   = 0x00000008;
+  const unsigned long NOTIFY_STATE_ALL      = 0x0000000f;
+
+  const unsigned long NOTIFY_PROGRESS       = 0x00000010;
+  const unsigned long NOTIFY_STATUS         = 0x00000020;
+  const unsigned long NOTIFY_SECURITY       = 0x00000040;
+  const unsigned long NOTIFY_LOCATION       = 0x00000080;
+
+  const unsigned long NOTIFY_ALL            = 0x000000ff;
+
+  void addProgressListener(in nsIWebProgressListener aListener,
+                           in unsigned long aNotifyMask);
+
+  void removeProgressListener(in nsIWebProgressListener aListener);
+
+  readonly attribute nsIDOMWindow DOMWindow;
+
+  readonly attribute PRBool isLoadingDocument;
+};
+
+ +

Constantes

+ +

Estas lineas indican los estados de transición a observar, correspondientes a nsIWebProgressListener::onStateChange.

+ +
+
NOTIFY_STATE_REQUEST + +
+
Sólo recibe el evento onStateChange si el parámetro aStateFlags incluye nsIWebProgressListener::STATE_IS_REQUEST.
+
+
+
+ +
+
NOTIFY_STATE_DOCUMENT + +
+
Sólo recibe el evento onStateChange si el parámetro aStateFlags incluye nsIWebProgressListener::STATE_IS_DOCUMENT.
+
+
+
+ +
+
NOTIFY_STATE_NETWORK + +
+
Sólo recibe el evento onStateChange si el parámetro aStateFlags incluye nsIWebProgressListener::STATE_IS_NETWORK.
+
+
+
+ +
+
NOTIFY_STATE_WINDOW + +
+
Sólo recibe el evento onStateChange si el parámetro aStateFlags incluye nsIWebProgressListener::STATE_IS_WINDOW.
+
+
+
+ +
+
NOTIFY_STATE_ALL + +
+
Recibe todos los eventos onStateChange.
+
+
+
+ +

Estas lineas indican los otros eventos a observar, correspondientes a los otros métodos definidos en nsIWebProgressListener.

+ +
+
NOTIFY_PROGRESS + +
+
Recibe eventos onProgressChange.
+
+
+
+ +
+
NOTIFY_STATUS + +
+
Recibe eventos onStatusChange.
+
+
+
+ +
+
NOTIFY_SECURITY + +
+
Recibe eventos onSecurityChange.
+
+
+
+ +
+
NOTIFY_LOCATION + +
+
Recibe eventos onLocationChange.
+
+
+
+ +

Métodos

+ +

addProgressListener

+ +
void addProgressListener(in nsIWebProgressListener aListener,
+                         in unsigned long aNotifyMask);
+
+ +

Registra un escucha que recibirá los eventos del progreso web.

+ +
Parámetros
+ +

aListener

+ +
+
El interfaz de escucha que será llamado cuando ocurra un evento de progreso.
+
Este objeto debe también implementar nsISupportsWeakReference.
+
+ +

aNotifyMask

+ +
+
Los tipos de notificaciones a recibir.
+
+ +
Excepciones
+ +

NS_ERROR_INVALID_ARG

+ +
+
Indica que aListener fue bien null o que no soporta referencias débiles.
+
+ +

NS_ERROR_FAILURE

+ +
+
Indica que aListener ya fué registrado.
+
+ +

removeProgressListener

+ +
 void removeProgressListener(in nsIWebProgressListener aListener);
+
+
+ +
Parámetros
+ +

aListener

+ +
+
El interfaz e escucha anteriormente registrado con un llamado a addProgressListener.
+
+ +
Excepciones
+ +

NS_ERROR_FAILURE

+ +
+
Indica que aListener no fué registrado.
+
+ +

Atributos

+ +

DOMWindow

+ +
atributo de sólo lectura nsIDOMWindow DOMWindow;
+
+ +

La ventana DOM asociada con esta instancia nsIWebProgress.

+ +
Exceptions
+ +

NS_ERROR_FAILURE

+ +
+
Indica que no hay un ventana DOM asociada.
+
+ +

isLoadingDocument

+ +
readonly attribute PRBool isLoadingDocument;
+
+ +

Indica si un documento está siendo cargado o no en el contexto de esta instancia nsIWebProgress.

diff --git a/files/es/nsizipwriter/index.html b/files/es/nsizipwriter/index.html new file mode 100644 index 0000000000..9c59481e6a --- /dev/null +++ b/files/es/nsizipwriter/index.html @@ -0,0 +1,517 @@ +--- +title: nsIZipWriter +slug: NsIZipWriter +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIZipWriter +--- +

The nsIZipWriter interface provides an easy way for scripts to archive data in the Zip file format. Operations on the archive can be performed one by one, or queued for later execution.

+ +

Once all the operations you wish to perform are added to the queue, a call to processQueue() will perform the operations in the order they were added to the queue. Operations performed on the queue throw any errors that occur out to the observer.

+ +

Attempting to perform a synchronous operation on the interface while the background queue is in progress will throw an NS_ERROR_IN_PROGRESS exception.

+ +

File and directory names should use slashes ("/") as separators and should not begin with a slash.

+ +

Nota: Although it isn't necessary to add directory entries in order to add file entries within them, some Zip utilities may have problems with that, so it may be best to add the directory entries explicitly first.

+ +


+

+
modules/libjar/zipwriter/public/nsIZipWriter.idlScriptable
+ + +Please add a summary to this article. + + +
+  +Last changed in Gecko 1.9 (Firefox 3)
+

+ +

Inherits from: nsISupports

+ +

Implemented by: @mozilla.org/zipwriter;1. To create an instance, use:

+ +
var zipWriter = Components.classes["@mozilla.org/zipwriter;1"]
+                          .createInstance(Components.interfaces.nsIZipWriter);
+
+ +

Method overview

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void addDirectoryEntry(in AUTF8String aZipEntry, in PRTime aModTime, in boolean aQueue);
void addEntryChannel(in AUTF8SZtring aZipEntry, in PRTime aModTime, in PRInt32 aCompression, in nsIChannel aChannel, in boolean aQueue)
void addEntryFile(in AUTF8SZtring aZipEntry, in PRInt32 aCompression, in nsIFile aFile, in boolean aQueue)
void addEntryStream(in AUTF8SZtring aZipEntry, in PRTime aModTime, in PRInt32 aCompression, in nsIInputStream aStream, in boolean aQueue)
void close()
nsIZipEntry getEntry(in AUTF8String aZipEntry);
boolean hasEntry(in AUTF8String aZipEntry);
void open(in nsIFile aFile, in PRInt32 aIoFlags);
void processQueue(in nsIRequestObserver aObserver, in nsISupports aContext)
void removeEntry(in AUTF8String aZipEntry, in boolean aQueue)
+ +

Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + +
AttributeTypeDescription
commentACStringGets or sets the comment associated with the currently open Zip file. Throws NS_ERROR_NOT_INITIALIZED if there isn't an open Zip file.
inQueuebooleantrue if operations are being performed in the background queue, or false if background operations are not in progress. Read-only.
filensIFileThe Zip file being written to. Read-only.
+ +

Constants

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
COMPRESSION_NONE0Don't compress the file.
COMPRESSION_FASTEST1Use the fastest compression method when adding the file to the archive.
COMPRESSION_DEFAULT6Use the default compression method when adding the file to the archive.
COMPRESSION_BEST9Use the best compression method when adding the file to the archive.
+ +

Methods

+ +

addDirectoryEntry()

+ +

Adds a new directory entry to the Zip file.

+ +

Nota: Although it isn't necessary to add directory entries in order to add file entries within them, some Zip utilities may have problems with that, so it may be best to add the directory entries explicitly first.

+ +
 void addEntryDirectory(
+   in AUTF8String aZipEntry,
+   in PRTime aModTime,
+   in boolean aQueue
+ );
+
+ +
Parameters
+ +
+
aZipEntry
+
The path of the directory entry to add to the Zip file.
+
aModTime
+
The modification time of the entry in microseconds.
+
aQueue
+
If true, the operation is queued for later execution. If false, the operation is performed immediately.
+
+ +
Exceptions thrown
+ +
+
NS_ERROR_NOT_INITIALIZED
+
No Zip file is open.
+
NS_ERROR_FILE_ALREADY_EXISTS
+
The specified path already exists in the Zip file.
+
NS_ERROR_IN_PROGRESS
+
The Zip writer is already performing another operation.
+
+ +

addEntryChannel()

+ +

Adds data from a channel to the Zip file.

+ +
 void addEntryChannel(
+   in AUTF8String aZipEntry,
+   in PRTime aModTime,
+   in PRInt32 aCompression,
+   in nsIChannel aChannel,
+   in boolean aQueue
+ );
+
+ +
Parameters
+ +
+
aZipEntry
+
The path of the file entry to add to the Zip file. This is the path it will be located at within the Zip file.
+
+ +

Nota: You must use forward slashes in the path.

+ +
+
aModTime
+
The modification time of the entry in microseconds.
+
aCompression
+
One of the compression constants, indicating the compression method to use.
+
aChannel
+
The channel from which to get the data.
+
aQueue
+
If true, the operation is queued for later execution. If false, the operation is performed immediately.
+
+ +
Exceptions thrown
+ +
+
NS_ERROR_NOT_INITIALIZED
+
No Zip file is open.
+
NS_ERROR_FILE_ALREADY_EXISTS
+
The specified path already exists in the Zip file.
+
NS_ERROR_IN_PROGRESS
+
The Zip writer is already performing another operation.
+
+ +

addEntryFile()

+ +

Adds a new file or directory to the Zip file. If the specified file is a directory, this call is equivalent to:

+ +
 addDirectoryEntry(aZipEntry, aFile.lastModifiedTime, aQueue);
+
+ +
 void addEntryFile(
+   in AUTF8String aZipEntry,
+   in PRInt32 aCompression,
+   in nsIFile aFile,
+   in boolean aQueue
+ );
+
+ +
Parameters
+ +
+
aZipEntry
+
The path of the file entry to add to the Zip file. This is the path it will be located at within the Zip file.
+
+ +

Nota: You must use forward slashes in the path.

+ +
+
aCompression
+
One of the compression constants, indicating the compression method to use.
+
aFile
+
The file from which to get the data and modification time.
+
aQueue
+
If true, the operation is queued for later execution. If false, the operation is performed immediately.
+
+ +
Exceptions thrown
+ +
+
NS_ERROR_NOT_INITIALIZED
+
No Zip file is open.
+
NS_ERROR_FILE_ALREADY_EXISTS
+
The specified path already exists in the Zip file.
+
NS_ERROR_IN_PROGRESS
+
The Zip writer is already performing another operation.
+
+ +

addEntryStream()

+ +

Adds data from an input stream to the Zip file.

+ +
 void addEntryStream(
+   in AUTF8String aZipEntry,
+   in PRTime aModTime,
+   in PRInt32 aCompression,
+   in nsIInputStream aStream,
+   in boolean aQueue
+ );
+
+ +
Parameters
+ +
+
aZipEntry
+
The path of the file entry to add to the Zip file. This is the path it will be located at within the Zip file.
+
+ +

Nota: You must use forward slashes in the path.

+ +
+
aModTime
+
The modification time of the entry in microseconds.
+
aCompression
+
One of the compression constants, indicating the compression method to use.
+
aStream
+
The input stream from which to get the data.
+
aQueue
+
If true, the operation is queued for later execution. If false, the operation is performed immediately.
+
+ +
Exceptions thrown
+ +
+
NS_ERROR_NOT_INITIALIZED
+
No Zip file is open.
+
NS_ERROR_FILE_ALREADY_EXISTS
+
The specified path already exists in the Zip file.
+
NS_ERROR_IN_PROGRESS
+
The Zip writer is already performing another operation.
+
+ +

close()

+ +

Closes the Zip file.

+ +
 void close();
+
+ +
Parameters
+ +

None.

+ +
Exceptions thrown
+ +
+
NS_ERROR_NOT_INITIALIZED
+
No Zip file is open.
+
NS_ERROR_IN_PROGRESS
+
The Zip writer is already performing another operation.
+
+ +

Other errors may be thrown if a failure to complete the Zip file occurs.

+ +

getEntry()

+ +

Returns a specified entry in the current Zip file.

+ +
 nsIZipEntry getEntry(
+   in AUTF8String aZipEntry,
+ );
+
+ +
Parameters
+ +
+
aZipEntry
+
The path of the file entry to get.
+
+ +
Return value
+ +

An nsIZipEntry object describing the specified entry, or null if there is no such entry.

+ +

hasEntry()

+ +

Determines whether or not a specific entry exists in the Zip file.

+ +
 boolean hasEntry(
+   in AUTF8String aZipEntry,
+ );
+
+ +
Parameters
+ +
+
aZipEntry
+
The path of the file entry to check for.
+
+ +
Return value
+ +

true if there is an entry with the given path in the Zip file, otherwise returns false.

+ +

open()

+ +

Opens the specified Zip file.

+ +
 void open(
+   in nsIFile aFile,
+   in PRInt32 aIoFlags
+ );
+
+ +
Parameters
+ +
+
aFile
+
The Zip file to open.
+
aIoFlags
+
The open flags for the Zip file, from prio.h.
+
+ +
Exceptions thrown
+ +
+
NS_ERROR_ALREADY_INITIALIZED
+
A Zip file is already open.
+
NS_ERROR_INVALID_ARG
+
The aFile parameter is null.
+
NS_ERROR_FILE_NOT_FOUND
+
The specified file was not found and the flags didn't permit creating it. Or the directory for the file does not exist.
+
NS_ERROR_FILE_CORRUPTED
+
The specified file is not a recognizable Zip file.
+
+ +

Other errors may be thrown upon failing to open the file, such as if the file is corrupt or in an unsupported format.

+ +

processQueue()

+ +

Processes all queued items until the entire queue has been processed or an error occurs. The observer is notified when the first operation begins and when the last operation completes.

+ +

Any failures are passed to the observer.

+ +

The Zip writer will be busy until the queue is complete or an error halts processing of the queue early. In the event of an early failure, the remaining items stay in the queue; calling processQueue() again will continue where operations left off.

+ +
 void processQueue(
+   in nsIRequestObserver aObserver,
+   in nsISupports aContext
+ );
+
+ +
Parameters
+ +
+
aObserver
+
The observer to receive notifications from the queue.
+
aContext
+
The context to pass to the observer.
+
+ +
Exceptions thrown
+ +
+
NS_ERROR_NOT_INITIALIZED
+
No Zip file is open.
+
NS_ERROR_IN_PROGRESS
+
The queue is already in progress.
+
+ +

removeEntry()

+ +

Removes an entry from the Zip file.

+ +
 void removeEntry(
+   in AUTF8String aZipEntry,
+   in boolean aQueue
+ );
+
+ +
Parameters
+ +
+
aZipEntry
+
The path of the entry to remove from the Zip file.
+
aQueue
+
true to place the remove operation into the queue, or false to process it at once.
+
+ +
Exceptions thrown
+ +
+
NS_ERROR_NOT_INITIALIZED
+
No Zip file is open.
+
NS_ERROR_IN_PROGRESS
+
The queue is already in progress.
+
NS_ERROR_FILE_NOT_FOUND
+
No entry with the given path exists.
+
+ +

Other errors may occur if updating the Zip file fails.

+ +

Examples

+ +

Adding a comment to a Zip file

+ +
var zipWriter = Components.Constructor("@mozilla.org/zipwriter;1", "nsIZipWriter");
+var zipW = new zipWriter();
+
+zipW.open(myZipFilePath, PR_RDWR | PR_CREATE_FILE | PR_TRUNCATE);
+zipW.comment = "This is a comment.";
+zipW.close();
+
+ +

PR_RDWR and friends are constants that are not in any interface (see Bug 433295), so for the code above to work you need something like:

+ +
const PR_RDONLY      = 0x01;
+const PR_WRONLY      = 0x02;
+const PR_RDWR        = 0x04;
+const PR_CREATE_FILE = 0x08;
+const PR_APPEND      = 0x10;
+const PR_TRUNCATE    = 0x20;
+const PR_SYNC        = 0x40;
+const PR_EXCL        = 0x80;
+
+ +

See PR_Open Documentation or File I/O Snippets for details.

+ +

Adding a file to a Zip archive

+ +

This code synchronously adds the file specified by the nsIFile theFile to the Zip archive.

+ +
var zipWriter = Components.Constructor("@mozilla.org/zipwriter;1", "nsIZipWriter");
+var zipW = new zipWriter();
+
+zipW.open(myZipFilePath, PR_RDWR | PR_CREATE_FILE | PR_TRUNCATE);
+zipW.addEntryFile("Path/For/This/File/In/Zip Archive", Components.interfaces.nsIZipWriter.COMPRESSION_DEFAULT, theFile, false);
+zipW.close();
+
+ +

The argument nyZipFilePath isn't a path but rather it has to be an nsIFile instance specifying the location of the new zip file. The file need not exist, but the directory that contains it (nsIFile.parent) must exist.

+ +

Other examples

+ +

For other examples, take a look at the unit tests in the source tree:

+ + + +

See also

+ + diff --git a/files/es/nspr/index.html b/files/es/nspr/index.html new file mode 100644 index 0000000000..51a4540a75 --- /dev/null +++ b/files/es/nspr/index.html @@ -0,0 +1,58 @@ +--- +title: NSPR +slug: NSPR +translation_of: Mozilla/Projects/NSPR +--- +

Netscape Portable Runtime (NSPR) provides a platform-neutral API for system level and libc-like functions. The API is used in the Mozilla clients, many of Red Hat's and Sun's server applications, and other software offerings.

+

Getting NSPR

+

NSPR is available in various source and binary packages, depending on your platform:

+ + + + + + + + +
+

Documentation

+
+
+ About NSPR
+
+ This topic describes, in general terms, the goals of NSPR and a bit about how it does it.
+
+ NSPR API Reference
+
+ The reference describes each API public macro, structure and function in the NSPR API.
+
+ NSPR build instructions
+
+ How to checkout and build from source.
+
+ NSPR release process
+
+ How to prepare an NSPR release.
+
+ Legacy NSPR Content
+
+ Older NSPR content is available in SVN for browsing and/or migration to this site
+
+

View All...

+ 		+

Community

+
    +
  • View Mozilla forums...
    • +
+

{{DiscussionList("dev-tech-nspr", "mozilla.dev.tech.nspr")}}

+ + +
+

 

diff --git a/files/es/nss/index.html b/files/es/nss/index.html new file mode 100644 index 0000000000..b8e53866da --- /dev/null +++ b/files/es/nss/index.html @@ -0,0 +1,17 @@ +--- +title: Servicios de Seguridad de Red +slug: NSS +tags: + - JSS + - NSS + - NeedsMigration + - Proyecto MDC +translation_of: Mozilla/Projects/NSS +--- +

Los Servicios de Seguridad de Red  (Network Security Services (NSS)) son un conjunto de bibliotecas designadas para ayudar al desarrollo en múltiples plataformas de aplicaciones para servidor y cliente con seguridad habilitada. Las aplicaciones desarrolladas con NSS pueden admitir SSL v2 y v3, TLS, PKCS #5, PKCS #7, PKCS #11, PKCS #12, S/MIME, certificados X.509 v3, y otros estándares de seguridad. Para obtener información detallada sobre los estándares admitidos, visita Descripción general sobre_NSS. Para revisar la lista de preguntas frecuentes, visita FAQ.

+

NSS se encuentra disponible bajo licencia pública de Mozilla, la licencia pública general GNU y licencia pública general GNU Lesser. Para obtener información sobre cómo descargar versiones de NSS en formato .tar, visita Fuente de descarga de PKI.

+

 

+ +

Notas de las versiones

 


Documentación

La documentación de Mozilla NSS puede encontrarse en . Toda esta información debe convertirse a formato wiki.

Existe documentación adicional disponible sobre los siguientes temas (sólo en wiki) en:

Control de calidad/evaluación :

La información sobre planificación de NSS se puede encontrar en wiki.mozilla.org, incluyendo:

Comunidad

  • Para ver los foros de seguridad de Mozilla:

{{ DiscussionList("dev-security", "mozilla.dev.security") }}

  • Para ver los foros de criptografía de Mozilla, visita:

{{ DiscussionList("dev-tech-crypto", "mozilla.dev.tech.crypto") }}

Temas relacionados

Seguridad
+

 

+

{{ languages( { "en": "en/NSS", "fr": "fr/NSS", "ja": "ja/NSS" } ) }}

diff --git a/files/es/nss/nss_sources_building_testing/index.html b/files/es/nss/nss_sources_building_testing/index.html new file mode 100644 index 0000000000..de3a9ed645 --- /dev/null +++ b/files/es/nss/nss_sources_building_testing/index.html @@ -0,0 +1,68 @@ +--- +title: NSS sources building testing +slug: NSS/NSS_Sources_Building_Testing +translation_of: Mozilla/Projects/NSS/NSS_Sources_Building_Testing +--- +

Obtener el código fuente de los Servicios de seguridad de red (NSS) , cómo construirlo y cómo ejecutar su conjunto de pruebas.

+ +

Obtener el código fuente y una descripción rápida

+ + + +

La forma más fácil es descargar archivos de versiones NSS del servidor de descargas de Mozilla . Encuentre el directorio que contiene el número de versión más alto. Debido a que NSS depende de la biblioteca base NSPR , debe descargar el archivo que combina NSS y NSPR.

+ +

Si es un desarrollador de software y tiene la intención de aportar mejoras a NSS, debe obtener la última instantánea de desarrollo de NSS utilizando mercurial / hg (una herramienta de administración de control de fuente distribuida ). Para comenzar, el acceso anónimo de solo lectura es suficiente. Cree un nuevo directorio en su computadora que usará como su área de trabajo local y ejecute los siguientes comandos.

+ +
hg clone https://hg.mozilla.org/projects/nspr
+hg clone https://hg.mozilla.org/projects/nss
+ + + +

Después de completar los comandos anteriores, debe tener dos directorios locales, llamados nspr y nss, uno al lado del otro.

+ +

(Información histórica: el código fuente NSPR y NSS se ha reorganizado recientemente en una nueva estructura de directorios. En versiones anteriores, todos los archivos estaban ubicados en una jerarquía de directorios que comenzaba con el prefijo "mozilla". La biblioteca base de NSPR estaba ubicada en el directorio mozilla / nsprpub. Los subdirectorios dbm, security / dbm, security / coreconf, security / nss fueron parte de las fuentes de NSS).

+ +

El directorio nss contiene los siguientes subdirectorios importantes:

+ + + +

Es importante mencionar la diferencia entre el código NSS interno y las interfaces exportadas. El software que quisiera usar la biblioteca NSS debe usar solo las interfaces exportadas. Estos se pueden encontrar mirando los archivos con la extensión de archivo .def, dentro de la jerarquía de directorios nss / lib. Cualquier función C que no esté contenida en archivos .def es estrictamente para uso privado dentro de NSS, y las aplicaciones y herramientas de prueba no pueden llamarlas. Para todas las funciones que se enumeran en los archivos .def, NSS promete que la interfaz de funciones binarias (ABI) se mantendrá estable.

+ +

Compilando NSS

+ + + +

El proceso de compilación está dirigido por Makefiles desde las ventanas de la consola. Debido a los requisitos de portabilidad multiplataforma, la compilación puede comportarse de manera diferente a lo que está acostumbrado. En particular, NSS no usa scripts de configuración. Puede establecer variables de entorno para definir qué variación de compilación desea.

+ +

En un sistema similar a Linux / Unix, use el shell bash. En un sistema Windows, debe descargar el paquete de compilación de Windows proporcionado por el proyecto Mozilla.org, que le proporcionará un entorno de línea de comandos similar, suficiente para los propósitos de compilación.

+ +

Asegúrese de que las fuentes NSPR y NSS estén una al lado de la otra, debajo del mismo directorio principal. Si descargó un archivo fuente nss-with-nspr publicado recientemente del directorio de lanzamiento de NSS en el servidor FTP (versión 3.15 o posterior), ya estará organizado de esa manera.

+ +

Para comenzar el proceso de construcción, use "cd nss" y ejecute "make nss_build_all". De forma predeterminada, esto generará una compilación en modo de depuración y para una arquitectura de 32 bits. Puede configurar la variable de entorno BUILD_OPT = 1 para obtener una compilación optimizada, y / o la variable USE_64 = 1 para obtener una compilación de 64 bits.

+ +

Una vez realizada la compilación, puede encontrar el resultado de la compilación debajo del directorio dist / *. OBJ, donde * será un nombre derivado dinámicamente de la arquitectura de su sistema. Los archivos de encabezado exportados para aplicaciones NSS se pueden encontrar en el directorio "incluir", los archivos de biblioteca en el directorio "lib" y las herramientas en el directorio "bin". Para ejecutar las herramientas, debe configurar el entorno del sistema para utilizar las bibliotecas de su compilación desde el directorio "lib", por ejemplo, utilizando la variable de entorno LD_LIBRARY_PATH.

+ +

La siguiente página puede tener información adicional de interés .

+ +

Ejecutando el conjunto de pruebas NSS

+ + + +

Esta es una parte importante del trabajo de desarrollo, para garantizar que sus cambios no introduzcan regresiones. Al agregar nuevas funciones a NSS, también se deben agregar pruebas para la nueva función.

+ +

Debe compilar NSS antes de ejecutar las pruebas. Después de que la compilación en su computadora haya tenido éxito, antes de que pueda ejecutar las pruebas en su computadora, puede ser necesario establecer variables de entorno adicionales. Las pruebas NSS iniciarán las herramientas del servidor TCP / IP en su computadora, y para que eso funcione, el conjunto de pruebas NSS necesita saber qué nombre de host pueden usar las herramientas del cliente para conectarse a las herramientas del servidor. En las máquinas que están configuradas con un nombre de host que se ha registrado en el DNS de su red, esto debería funcionar automáticamente. En otros entornos (por ejemplo, en redes domésticas), puede establecer las variables de entorno HOST y DOMSUF (para sufijo de dominio) para indicarle al conjunto de NSS qué nombre de host usar. Como prueba, debe ser posible utilizar con éxito el comando "ping $ HOST. $ DOMSUF" en su computadora (ping informa que recibe respuestas). En muchas computadoras, las variables HOST = localhost DOMSUF = localdomain funcionan. En caso de que haya creado NSS en 64 bits, debe establecer la variable de entorno USE_64 en 1 para ejecutar las pruebas.

+ +

Después de haber configurado las variables de entorno requeridas, use "cd nss / tests" e inicie las pruebas usando "./all.sh". Las pruebas tardarán un tiempo en completarse; en una computadora lenta puede tomar un par de horas.

+ +

Una vez que se haya completado el conjunto de pruebas, se imprimirá un resumen que muestra el número de fallas. Puede encontrar los resultados del conjunto de pruebas en el directorio nss /../ tests_results (es decir, el directorio de resultados termina al lado del directorio nss, no dentro de él). Cada ejecución del conjunto de pruebas creará un nuevo subdirectorio; debes limpiarlos de vez en cuando. Dentro del directorio encontrará el archivo de texto output.log, que contiene un informe detallado de todas las pruebas que se están ejecutando. Para conocer los detalles de las fallas de la prueba, busque en el archivo la prueba en mayúscula FALLIDA.

+ +

Si lo desea, es posible ejecutar solo subconjuntos de las pruebas. Lea el contenido del archivo all.sh para aprender cómo funciona.

diff --git a/files/es/nuevas_tablas_de_compatibilidad_beta/index.html b/files/es/nuevas_tablas_de_compatibilidad_beta/index.html new file mode 100644 index 0000000000..8f12f0ca94 --- /dev/null +++ b/files/es/nuevas_tablas_de_compatibilidad_beta/index.html @@ -0,0 +1,24 @@ +--- +title: Nuevas tablas de compatibilidad (beta) +slug: Nuevas_tablas_de_compatibilidad_beta +translation_of: Archive/MDN/New_Compatibility_Tables_Beta +--- +

Quizás estás aquí porque seguiste el enlace de notificación beta desde unas de nuestras nuevas tablas de compatibilidad. (¿No? ¿Quiéres ver las tablas nuevas? Hágase probador beta.)

+ +

Gracias por ayudarnos a probarlas. Son parte de un proyecto mucho más grande. Estamos moviendo todos nuestros datos de compatibilidad del navegador a JSON estructurado.

+ +

Las nuevas tablas aparecerán en las páginas a medida que los datos sean convertidos al nuevo formato.

+ +

Editando

+ +

Nuestros datos de compatibilidad se han movido a archivos JSON dentro del repositorio browser-compat-data de GitHub.

+ +

Para contribuir con datos de compatibilidad, ahora puede enviar un pull request o crear una issue en el repositorio.

+ +

¿Cómo ayudar?

+ +

Si encuentras algún problema con los datos, por favor cree una issue en el repositorio de GitHub.

+ +

Si hay algo mal con la apariencia o funcionalidad de las tablas, por favor haga click en el boton "report an error" en el menu desplegable que se encuentra sobre la tabla.

+ +

Si tiene un momento, le agradeceríamos que rellenase nuestra encuesta.

diff --git a/files/es/participar_en_el_proyecto_mozilla/index.html b/files/es/participar_en_el_proyecto_mozilla/index.html new file mode 100644 index 0000000000..7266e63643 --- /dev/null +++ b/files/es/participar_en_el_proyecto_mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Participar en el proyecto Mozilla +slug: Participar_en_el_proyecto_Mozilla +tags: + - para_revisar +--- +

Si estás interesado en ayudar a corregir los errores o trabajar en el código detrás de la plataforma Mozilla, este es el lugar para encontrar la documentación que te guiará en la dirección correcta.

+ +

Temas generales

Guía para desarrolladores de Mozilla
Consejos y guías sobre desarrollo para contribuir al código base de Mozilla.
Código fuente de Mozilla
Información acerca de cómo obtener el código de Mozilla, ya sea por descarga o por medio de control de versiones, y cómo obtener el código en el árbol.
Elaborar documentación
Información acerca de cómo construir proyectos de Mozilla, incluyendo Firefox y Thunderbird. Esta página necesita limpieza.
La plataforma Mozilla
Información sobre la plataforma Mozilla, incluyendo todos sus APIs y tecnologías, así como la forma de utilizarlas en tus propios proyectos.
Documentar Mozilla
Ayuda a crear y mejorar nuestra documentación para Mozilla y para la Web abierta.
Depuración (Debugging)
Consejos útiles y pautas a seguir para depurar el código de Mozilla.
Aseguramiento/Control de calidad
Información sobre pruebas y control de errores.
Localización
Documentación en múltiples idiomas sobre traducción de los proyectos de Mozilla, documentación y otros muchos aspectos.
Glosario
Términos y definiciones utilizadas por los hackers de Mozilla.

Páginas sobre proyectos

Thunderbird
Cliente de correo Mozilla
Sunbird
Proyecto de calendario de Mozilla

Herramientas

Bugzilla
La base de datos Bugzilla se usa para rastrear los problemas o incidencias relacionados con los proyectos de Mozilla.
MXR
Navega y busca en el repositorio de código fuente de Mozilla en la Web.
Bonsai
La herramienta Bonsai te permite saber quién cambió qué archivo en el repositorio y cuándo lo hicieron.
Tinderbox
Tinderbox muestra el estado del árbol (si actualmente se construye o no con éxito).  Compruébalo antes de proteger (check in) o desplegar (check out) y asegúrate de que estás trabajando con un árbol de trabajo.
Seguimiento de errores
Información sobre los sistemas de notificación de fallos Socorro y Talkback.
Seguimiento del rendimiento
Consulta la información de rendimiento para los proyectos de Mozilla.
Foros para desarrolladores
Una lista de temas específicos de foros de discusión, donde puedes hablar sobre cuestiones de desarrollo de Mozilla.
+

  {{ languages ({"en": "en/Participating_in_the_Mozilla_project", "zh-cn": "cn / Participating_in_the_Mozilla_project", "ja": "ja / Participating_in_the_Mozilla_project", "ko": "ko / Participating_in_the_Mozilla_project"}) }}

diff --git a/files/es/persona/crypto/index.html b/files/es/persona/crypto/index.html new file mode 100644 index 0000000000..aeed5638b6 --- /dev/null +++ b/files/es/persona/crypto/index.html @@ -0,0 +1,21 @@ +--- +title: Cifrado +slug: Persona/Crypto +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Crypto +--- +

El sistema de identidad de Persona usa el cifrado de llave pública para asegurar la confianza y seguridad en el proceso de autenticación.

+

¿Por qué funciona el sistema descrito en Información general del Proveedor de Identidad?

+

Cadena de confianza

+

El navegador del usuario almacena localmente pequeñas piezas de información para cada una de las identidades del usuario: una dirección de correo electrónico, un par de llaves, y un certificado del IdP (Identity Provider) asociado.

+

El par de llaves del usuario es un par criptográfico DSA o RSA estándar que es generado y guardado localmente en el navegador del usuario. El certificado es firmado por el IdP asociado a la identidad del usuario elegida. Estos certificados están diseñados para no durar mas de 24 horas y pueden ser proporcionados de nuevo cuando caducan, siempre y cuando el usuario tenga una sesión activa con el IdP. Los pares de llaves nunca son compartidos entre computadoras ni entre navegadores.

+

+

Como se describe en la descripción general del protocolo, el navegador del usuario es capaz de generar y firmar aserciones de identidad efímeras especifícas del sitio. Cuando se toman juntas estas aserciones con la información en un certificado del usuario, el sitio es capaz de verificar la identidad de ese usuario. La autenticidad de los certificados debe ser verificada obteniendo la llave pública del IdP, la cual es publicada en un documento disponible sobre SSL.

+

De esa manera, la seguridad de Persona depende de que la llave privada del usuario y la llave privada del dominio se mantengan en secreto y de que la conexión SSL al IdP sea segura. Si se rompe la seguridad en cualquiera de estos puntos, la seguridad de la identidad del usuario puede verse comprometida.

+

Generando pares de llaves IdP

+

Para los IdPs (Identity Providers ), el paquete jwcrypto proporciona una herramienta de linea de comandos, generate-keypair, la cual genera las llaves adecuadas para el uso con Persona. Debido a que las llaves generadas ya están serializadas en JSON, la llave pública es adecuada para su inclusión directa en el campo de llaves públicas del archivo /.well-known/browserid del IdP.

+

Certificado y formato de aserción

+

Por favor, consulte la especificación de BrowserID para información más detallada, pero a grandes rasgos, tanto los certificados como las aserciones son cadenas con tres partes: un encabezado, un cuerpo y una firma criptográfica. Cada parte está codificada separadamente en base64url, y concatenada delimitando cada parte con caracteres ".". El cuerpo no está cifrado, es texto plano que puede leerse si lo decodificas en base64url.

+

+

Los certificados y las aserciones son empaquetados juntos en una "aserción respaldada" cuando el usuario intenta autenticarse en un sitio. El paquete es creado concatenando un certificado y una aserción, separados por un "~".

diff --git a/files/es/persona/iniciar_persona/index.html b/files/es/persona/iniciar_persona/index.html new file mode 100644 index 0000000000..eb00a1b3e4 --- /dev/null +++ b/files/es/persona/iniciar_persona/index.html @@ -0,0 +1,29 @@ +--- +title: Iniciando el proyecto Persona +slug: Persona/Iniciar_Persona +translation_of: Archive/Mozilla/Persona/Bootstrapping_Persona +--- +

Para poder ser realmente exitoso y descentralizado, Persona necesita el apoyo de tres grupos diferentes:

+ +

Esto da lugar a un problema del tipo "el huevo o la gallina": ninguno de estos grupos se beneficiaría significativamente a menos que hubiese una masa considerable de usuarios pero un sistema distribuido no puede conseguir una masa considerable de usuarios sin el apoyo de los grupos mencionados anteriormente.

+

Para resolver este problema, https://login.persona.org alberga tres recursos:

+
    +
  1. Un Proveedor de Identidad de respaldo, que intercede por aquellos usuarios cuyos proveedores de email no soportan Persona
    2. +
  2. Una implementación JavaScript multinavegador (cross-browser en inglés) de las APIs navigator.id para los navegadores sin soporte nativo.
    3. +
  3. Una API de verificación albergada para facilitar que los sitios verifiquen las credenciales de usuario.
    4. +
+

Todo esto en conjunto permite que los sitios web ofrezcan Persona a los usuarios sin importar el navegador y sin que los proveedores de email tengan que involucrarse.

+

Estos servicios son temporales y el sistema Persona está diseñado de manera tal que los mismos puedan ser desplazados transparente y automáticamente a medida que se agreguen medios de soporte nativo a los navegadores y proveedores de email. Así, serán menos relevantes a medida que Persona crece; y posiblemente sean todos removidos con el correr del tiempo. En ese momento, https://login.persona.org no figurará en lo absoluto en el sistema Persona.

+

Proveedor de identidad de respaldo

+

Cualquier dominio puede ser un Proveedor de Identidad siempre y cuando las partes involucradas estén dispuestas a confiar en los certificados emitidos por ese dominio. Esperamos que los proveedores de email actúen como IdPs para las direcciones que administran haciendo que la experiencia de usuario de Persona sea fluida para esos usuarios. Permite que los usuarios se beneficien de su relación existente con el proveedor de email cuando se autentiquen (acrediten) en otros sitios.

+

No obstante, los proveedores de email no serán IdPs hasta que haya una demanda significativa por parte de sus usuarios. Mientras tanto, Mozilla opera un IdP de respaldo en https://login.persona.org. Este respaldo permite que los usuarios inicien sesión en sitios con sus direcciones de email existentes sin importar si el proveedor soporta Persona. El IdP de respaldo certificará las direcciones de email de cualquier dominio empleando su propio flujo de autenticación y contraseña, en la medida que el usuario sea capaz de probar el control de una dirección al hacer clic en un enlace de un email de verificación.

+

Una vez que el proveedor de email soporte Persona nativamente, sus usuarios comenzarán a usuarlo transparentemente en lugar del IdP de respaldo.

+

Librería de APIs multinavegador

+

Para que Persona funcione, el navegador del usuario debe soportar la API navigator.id. Con el tiempo, los navegadores proveerán un soporte nativo para estas APIs pero, hasta entonces, una implementación multinavegador está disponlible en https://login.persona.org/include.js. Al incluir este archivo, los sitios web ya pueden empezar a usar Persona. Una vez que las implementaciones nativas de las APIs estén disponibles, la librería las pospondrá automáticamente.

+

Servicio de verificación remota

+

En https://login.persona.org Mozilla alberga un servicio de verificación remota que los sitios web pueden utilizar para verificar las aseveraciones de identad enviadas por sus usuarios. Esto facilita que los sitios web soporten Persona porque se hace cargo de analizar la aseveración y de verificar critográficamente las identidades de los usuarios.

+

Una vez que se estabilicen los formatos de dato de Persona, la verificación se hará posiblemente en el servidor de cada sitio. Esta transición es especialmente importante para la privacidad del usuario debido a que hará imposible que el IdP de respaldo rastree a sus usuarios. Aun con la verificación remota, los usuarios de IdPs nativos no pueden ser rastreados por ese IdP.

diff --git a/files/es/persona/internationalization/index.html b/files/es/persona/internationalization/index.html new file mode 100644 index 0000000000..5eb991287f --- /dev/null +++ b/files/es/persona/internationalization/index.html @@ -0,0 +1,51 @@ +--- +title: Internacionalización +slug: Persona/Internationalization +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Internationalization +--- +

Qué está localizado en Persona

+

En el futuro, la interfaz de usuario para iniciar sesión en sitios con Persona estará directamente integrada con el navegador, y por lo tanto estrá localizada junto con la localización del propio navegador. Para los navegadores sin soporte integrado, la interfaz de usuario Persona consiste en una serie de diálogos servidos desde login.persona.org. Estos diálogos son traducidos por un equipo de voluntarios de la comunidad, y más 45 configuraciones regionales están actualmente habilitadas en producción.

+

Cómo elije Persona la localización

+

El servicio persona selecciona un lenguaje usando el encabezado Accept-Language enviado junto con las peticiones de tu navegador Web. El algoritmo usado para asignar un encabezado Accept-Language a un idioma es el mismo que usa mozilla.org:

+
    +
  1. Por cada etiqueta de idioma en el encabezado Accept-Language: +
      +
    • comprueba si tenemos una coincidencia exacta para el idioma identificado por la etiqueta idioma
      • +
    • comprueba si tenemos una coincidencia exacta para el idioma identificado por la primera parte de la etiqueta idioma
      • +
    +
    2. +
  2. Si no se puede hacer una coincidencia con la regla(1), recurrimos a en-US. Sin embargo, en o en-US es casi siempre el último encabezado accept-lang enviado por muchos navegadores.
    3. +
+

Por ejemplo, la tabla de abajo muestra los idiomas seleccionados para varios encabezados Accept-Language, si las siguientes configuraciones locales fueran soportadas : en-US, es, es-MX:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Encabezado Accept-LanguageIdioma Seleccionado
es-AR,es;q=0.8,en-us;q=0.5es
es-MX,es;q=0.8,en-us;q=0.5es-MX
es-es,en-us;q=0.5en-US
es-esen-US
+

Actualmente no hay manera que un sitio web obligue a un diálogo aparecer en otro idioma. Esto es porque la interfaz de usuario de Persona es lógicamente (y en un futuras implementaciones nativas será asi) parte de la interfaz de usuario del navegador, asi que su idioma debería ser consistente con el idioma seleccionado en el navegador.

+

Cómo puedo ayudar

+

Persona usa Mozilla Verbatim para ayudar a los voluntarios con la creación de sus traducciones . Si quieres ayudarnos, lee iniciando con Verbatim y echa un vistazo al proyecto "BrowserID" de Verbatim.

+

 

diff --git a/files/es/persona/libraries_and_plugins/index.html b/files/es/persona/libraries_and_plugins/index.html new file mode 100644 index 0000000000..47eada5212 --- /dev/null +++ b/files/es/persona/libraries_and_plugins/index.html @@ -0,0 +1,165 @@ +--- +title: Bibliotecas y complementos +slug: Persona/Libraries_and_plugins +tags: + - Persona +translation_of: Archive/Mozilla/Persona/Libraries_and_plugins +--- +

Quieres usar Persona en tu sitio web o blog? Implementar Persona desde cero es fácil, pero con los complementos y las bibliotecas listadas aquí puedes ir más rápido!

+

Esta página enumera tres tipos de bibliotecas:

+
    +
  1. Complementos que integran Persona con marcos existentes y sistemas de gestión de contenidos
    2. +
  2. Bibliotecas que son útiles en la construcción de nuevos complementos o integrar Persona en un sitio desde cero
    3. +
  3. Todo lo demás relacionado con Persona, incluyendo bibliotecas para convertir su dominio en un proveedor de identidad Persona
    4. +
+

Esta es una lista mantenida por la comunidad. Si ha creado una biblioteca o un complemento, por favor agreguelo a esta página.

+
+ Esta página está en proceso de revisión y algunos complementos pueden estar desactualizados. Revise los complementos antes de usarlos.
+

Complementos

+

Clojure

+ +

Cold Fusion

+ +

Haskell

+ +

Java

+ +

JavaScript

+ +

Node.js

+ +

PHP

+ +

Python

+ +

Ruby

+ +

Erlang

+ +

Miscellaneous

+ +

¿No ve su lenguage o marco en la lista? LoginRadius, un widget de autenticación, ofrece una integración Persona para una amplia variedad de plataformas.

+

Bibliotecas

+

C

+ +

Go

+ +

Haskell

+ +

.Net

+ +

Node.js

+ +

Perl

+ +

PHP

+ +

Python

+ +

Ruby

+ +

Todo lo demás

+

Perl

+ +

Python

+ +

Ruby

+ +

PHP

+ +

Racket

+ diff --git a/files/es/plantillas_en_firefox_3/index.html b/files/es/plantillas_en_firefox_3/index.html new file mode 100644 index 0000000000..499fa226a2 --- /dev/null +++ b/files/es/plantillas_en_firefox_3/index.html @@ -0,0 +1,27 @@ +--- +title: Plantillas en Firefox 3 +slug: Plantillas_en_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Templates +--- +
{{FirefoxSidebar}}

{{ Fx_minversion_header(3) }}

+ +

Las plantillas se han mejorado enormemente en Firefox 3. La mejora más importante permite el uso de procesador de consultas personalizado para manejar otro tipo de fuentes de datos además de RDF. Esto es posible gracias a la nueva sintaxis de consultas. También se incluyen soporte para SQL (mozStorage) y fuentes de datos XML. Ya {{ interwiki('wikimo', 'XUL:Template_Features_in_1.9', 'está disponible') }} una descripción completa de las nuevas características para plantillas. ({{ Bug(285631) }})

+ +

Otras mejoras

+ + + +

Véase también

+ + + +

{{ languages( { "en": "en/Templates_in_Firefox_3", "fr": "fr/Templates_dans_Firefox_3", "ja": "ja/Templates_in_Firefox_3" } ) }}

diff --git a/files/es/plugins/index.html b/files/es/plugins/index.html new file mode 100644 index 0000000000..7f9e31e896 --- /dev/null +++ b/files/es/plugins/index.html @@ -0,0 +1,52 @@ +--- +title: Plugins +slug: Plugins +tags: + - Plugins + - Todas_las_Categorías +translation_of: Archive/Plugins +--- +

+

Los Plugins (o plug-ins) son pequeños fragmentos de software que interactúan con el navegador para proporcionar algunas funciones que en la mayoria de los casos son muy especificas. Ejemplos tipicos de plugins son los usados para mostrar los distintos formatos gráficos, o para reproducir ficheros multimedia. Los plugins son ligeramente diferentes de las Extensiones, que modifican o se añaden a funcionalidades ya existentes. +


+

+ +
+

Documentación

+
Usando el marcado correcto para llamar a los plugins +
Este artículo trata de como llamar a un plugin correctamente usando HTML. Habla sobre el elemento object y el elemento embed, asi como detalles sobre como llamar a aplicaciones Java con HTML en aplicaciones web. +
+
Usar XPInstall para instalar plugins +
XPInstall es un instalador basado en la tecnología JavaScript y que funciona en todas las plataformas en las que los navegadores basados en Mozilla y Netscape basados en Mozilla (como Netscape 7) estan presentes. +
+

Detectando Plugins (en) +

+
"Ya que hay situaciones donde esta claro que hay que usar plugins, la pregunta es, ¿que hacer con aquellos que no tienen el plugin requerido instalado?" +
+

Ver todos... +

+		 +

Comunidad

+ +
  • View Mozilla forums... +
+

{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }} +

Ver todo +

+

Herramientas

+ +

Ver todo +

+

Temas relacionados

+
Gecko +
+
+

Categorías +

Interwiki Language Links +


+

+
+
+{{ languages( { "de": "de/Plugins", "en": "en/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "ko": "ko/Plugins", "pl": "pl/Wtyczki", "pt": "pt/Plugins" } ) }} diff --git a/files/es/plugins/supporting_private_browsing_in_plugins/index.html b/files/es/plugins/supporting_private_browsing_in_plugins/index.html new file mode 100644 index 0000000000..4448567bb4 --- /dev/null +++ b/files/es/plugins/supporting_private_browsing_in_plugins/index.html @@ -0,0 +1,10 @@ +--- +title: Supporting private browsing in plugins +slug: Plugins/Supporting_private_browsing_in_plugins +translation_of: Archive/Plugins/Supporting_private_browsing_in_plugins +--- +

{{ fx_minversion_header(3.5) }}

+

Firefox 3.5 introduced private browsing, a mode in which potentially private information is not recorded in any way.  It also introduced a mechanism by which plugins can determine whether or not private browsing mode is in effect.  Plugins should be updated to monitor the state of private browsing mode and only save private information when private browsing is disabled.

+

Potentially private information may include (but is not necessarily limited to) history information for downloaded data.  For example, if private browsing mode is in effect, video player plugins should not record the URLs of watched videos in their histories.

+

Detecting private browsing mode

+

Plug-ins can detect whether or not private browsing mode is in effect by using the NPN_GetValue() function to check the current value of the NPNVprivateModeBool variable.

diff --git a/files/es/preferencias_del_administrador_de_descargas/index.html b/files/es/preferencias_del_administrador_de_descargas/index.html new file mode 100644 index 0000000000..0805f36b3b --- /dev/null +++ b/files/es/preferencias_del_administrador_de_descargas/index.html @@ -0,0 +1,127 @@ +--- +title: Preferencias del Administrador de Descargas +slug: Preferencias_del_Administrador_de_Descargas +tags: + - páginas_a_traducir +translation_of: Archive/Mozilla/Download_Manager_preferences +--- +

Hay varias preferencias usadas por el Administrador de Descargas. Este artículo ofrece una lista de ellas.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PreferenciaDescripción
browser.download.manager.showAlertOnCompleteUn valor booleano que indica si debe ser mostrada o no una aleerta cuando se completa la descarga.
+ Valor por defecto es true.
browser.download.manager.showAlertIntervalEl número mínimo de mili segundos que deben transcurrir entre alertas de descarga completa.
+ Valor por defecto: 2000 (2 segundos).
browser.download.manager.retentionIndica por cuanto tiempo deben permanecer las descargas en la cola del Administrador de Descargas, tras haber sido completadas con éxito. 0 indica que la descarga puede ser eliminada una vez completada, 1 indica que las descargas completadas y las abandonadas deben desparecer al cerrar el navegador, 2 indica que las descargas no deben ser nunca eliminadas automáticamente.
+ En Firefox por defecto el valor es 2.
+ En Thunderbird el valor por defecto es 1;
+ Si la preferencia no existe, el valor usado es 0.
browser.download.manager.quitBehaviorIndica lo que debería pasar con las descargas en progreso si se cierra el navegador. 0 indica que la descarga debería ponerse en pausa y reanudarse automáticamente la siguiente vez que se inicie el navegador, 1 indica que la descarga pero que no debería reanudarse automáticamente y 2 indica que la descarga debe ser cancelada al salir.
+ El valor por defecto es 0 (reanudar en la próxima apertura).
browser.download.manager.closeWhenDoneUn valor boleano indicando si la ventana del Administrador de Descargas deberá ser cerrada o no cuando se completen las descargas.
+ En Thunderbird este valor es por defecto true.
+ En Otras aplicaciones el valor por defecto es false.
browser.download.manager.addToRecentDocsUn valor booleano que indica si las nuevas descargas deben ser añadidas o no a la lista de documentos recientes.
+ El valor por defecto es true.
browser.download.manager.scanWhenDoneUn valor booleano que indica si hay que realizar o no un análisis anti-virus cuando se ha completado una descarga. En Windows XP SP2 y Windows Vista, este valor también indica si las descargas presentan un aviso de seguridad al abrir los archivos.
+ El valor por defecto es true.
browser.helperApps.deleteTempFileOnExitUn valor booleano que indica si hay que borrar o no el archivo temporal usado para la descarga, una vez completada esta.
+ En Mac el valor por defecto es false.
+ En Otros OS el valor por defecto es true
browser.download.manager.flashCountIndica el número de veces que el interfaz de usuario debe parpadear para llamar la atención del usuario, cuando la descarga está completa.
+ El valor por defecto es 2.
browser.download.manager.focusWhenStartingUn valor booleano que indica si poner o no el foco en la ventana del Administrador de Descargas cuando se inicia una descarga.
+ En Firefox y Thunderbird el valor por defecto es false.
+ En Otras aplicaciones el valor por defecto es true.
browser.download.manager.showWhenStartingUn valor booleano que indica si mostrar o no la ventana de descarga cuando se inicia una descarga.
+ El valor por defecto es true.
browser.download.manager.useWindowUn valor booleano indicando si se debe usar la ventana de descargas (true) o presentar el estado en la barra de estado (false) en la ventana del navegador.
+ El valor por defecto es true.
browser.download.useDownloadDirUn valor booleano que indica si la preferencia de usuario es guardar automáticamente las descargas en el directorio de descargas. Si este valor es false, el usuario es preguntado sobre qué hacer.
+ En Thunderbird el valor por defecto es false.
+ En Otras aplicaciones el valor por defecto es true.
browser.download.antivirus.dontcleanUn valor booleano que indica si el software anti-virus debe intentar limpiar un archivo descargado cuando se ha detectado un virus.
+ El valor por defecto es false.
browser.download.manager.alertOnEXEOpenUn valor booleano que indica si el iterfaz de usuario debe alertar al usuario acerca de los peligros de abrir (ejecutar) un archivo .EXE. El usuario puede marcar la casilla de "No volver a preguntar" en el interfaz .
+ El valor por defecto es true.
+ +

Si una preferencia no está marcada cuando el Administrador de Descargas la busca, éste asume el valor por defecto pero no necesariamente añadirá la preferencia. La siguiente tabla, sin embargo, incluye las preferencia que deben ser incluidas en todo producto para que funcione el Administrador.

+ + + + + + + + + + + + + + + + +
PreferenciaDescripción
browser.download.folderListIndica el directorio por defecto dónde descargar los archivos. 0 indica el escritorio, 1 indica el directorio por defecto del sistema operativo, 2 indica un directorio escogido (ver: browser.download.dir) folder.
+ Firefox y Thunderbird ponen el valor por defecto a 0*.
+ * - Firefox en Windows Vista cambia esta preferencia a 1 en la primera ejecución.
browser.download.dirUn directorio local que el usuario puede haber seleccionado para descargar archivos. La migración de las propiedades de otros navegadores pueden alterar este valor. Este directorio se habilita cuando browser.download.folderList es igual a 2.
+ +

Ver también

+ + diff --git a/files/es/preguntas_frecuentes_sobre_extensiones/index.html b/files/es/preguntas_frecuentes_sobre_extensiones/index.html new file mode 100644 index 0000000000..60e87e9f41 --- /dev/null +++ b/files/es/preguntas_frecuentes_sobre_extensiones/index.html @@ -0,0 +1,53 @@ +--- +title: Preguntas frecuentes sobre Extensiones +slug: Preguntas_frecuentes_sobre_Extensiones +tags: + - Complementos + - Todas_las_Categorías + - extensiones +translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions +--- +

Esta es una recopilación de respuestas breves a los problemas más frecuentes del desarrollo de extensiones. Están escritas pensando principalmente en Firefox, pero la mayoría de ellas- si no todas- son fácilmente aplicables a SeaMonkey, Thunderbird o cualesquiera de las demás aplicaciones.

+

Si estás buscando còmo empezar a programar una extensión, prueba con el tutorial Creando una extensión o Primeros pasos (en).

+

Asegúrate de configurar el entorno de desarrollo (en) correctamente antes de empezar.

+

Depuración

+

Deberías configurar el entorno de desarrollo antes de empezar a depurar tu extensión.

+

¿Cómo puedo encontrar los errores de mi código?

+

Después de activar la opción javascript.options.showInConsole (poniéndola a true), podrás leer los errores en la consola de JavaScript. A pesar de su nombre, en esta consola se mostrarán todo tipo de errores (no solo de JavaScript).

+

¿Cómo puedo monitorizar qué está haciendo mi extensión?

+

Puedes usar las funciones alert() o dump() o nsIConsoleService.

+

¿Por qué no se ejecuta correctamente mi script?

+

Si tu script no hace lo que debiera, lo primero que debes hacer es comprobar  la consola de JavaScript (lee más arriba).

+

Un error muy común es intentar acceder al DOM de una ventana antes de que haya terminado de cargarse. Esto ocurre si colocas el código de inicialización fuera de cualquier función (en el programa principal). La solución es usar un listener del evento load que retrase la ejecución de ese código hasta que la ventana haya terminado de cargarse:

+
function exampleBrowserStartup(event)
+{
+  // place your startup code here
+}
+window.addEventListener("load", exampleBrowserStartup, false);
+
+

El acceso al documento de la página web no funciona

+

Para acceder al documento de la página web en uso desde un browser.xul, debes usar content.document, en lugar de simplemente document (que es el documento de la ventana del propio navegador). Lee Trabajando con ventanas en código chrome para más información.

+

Al mismo tiempo, la configuración por defecto de XPCNativeWrapper impide el acceso a objetos definidos por script en la página web y algunas otras cosas.

+

Tengo un error parseando el XML, y el fichero parece correcto

+

Un motivo muy frecuente de errores de parseo (resaltados en <font color="red">rojo</font> con texto como este: <font color="red">-------------^</font> subrayándolos) es la presencia en tu script de un carácter o valor de atributo que tiene un significado especial en XML. Por ejemplo:

+
<button oncommand="window.open('http://example.com/q?param1=value&param2=val2')"/>
+
+

o

+
<script>function lesser(a,b) { return a < b ? a : b; }</script>
+
+

El problema puede resolverse de distintas formas:

+
  1. Escribir el caràcter con la representación apropiada en XML. (Por ejemplo: "&" -> "&amp;", "<" -> "&lt;")
  2. (En caso de tratarse de un nodo de texto, como un script) etiquetar el texto con CDATA: 
    <script><![CDATA[
+   function lesser(a,b) {
+     return a < b ? a : b;
+   }
+ ]]></script>
  3. Colocar el script en un fichero separado, e incluirlo usando: 
    <script type="application/x-javascript" src="our.js"/>
    4. +
+

Código de ejemplo

+

La forma más sencilla de descubrir cómo codificar lo que necesitas, es buscar una extensión (o una parte del propio Mozilla) que lo haga y mirar su código. (Los fichero XPI y JAR están comprimidos en formato ZIP).

+

También puedes encontrar alguna documentación. Busca en Artículos sobre extensiones en MDC y Página de ejemplos de código en MozillaZine.

+

¿Dónde puedo encontrar más ayuda?

+

Puedes buscar más información en la página de la Comunidad y en la categoría Herramientas.

+

Antes de pedir ayuda, asegúrate de configurar las preferencias de depuración y comprobar la consola de JavaScript. Tampoco olvides hacer al menos una búsqueda por internet antes de preguntar, y... ¡leer esta lista de preguntas!

+

 

+ +

{{ languages( { "de": "de/Erweiterungen_FAQ", "en": "en/Extension_Frequently_Asked_Questions", "fr": "fr/Foire_aux_questions_sur_les_extensions", "it": "it/Domande_frequenti_sulle_Estensioni", "ja": "ja/Extension_Frequently_Asked_Questions", "pl": "pl/Cz\u0119sto_zadawane_pytania_dotycz\u0105ce_rozszerze\u0144", "ru": "ru/FAQ_\u043f\u043e_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c" } ) }}

diff --git "a/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" "b/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" new file mode 100644 index 0000000000..77496f3178 --- /dev/null +++ "b/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/index.html" @@ -0,0 +1,5 @@ +--- +title: Preguntas frecuentes sobre incrustación en Mozilla +slug: Preguntas_frecuentes_sobre_incrustación_en_Mozilla +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git "a/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" "b/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" new file mode 100644 index 0000000000..9240658758 --- /dev/null +++ "b/files/es/preguntas_frecuentes_sobre_incrustaci\303\263n_en_mozilla/introducci\303\263n_a_gecko_e_inscrustaci\303\263n/index.html" @@ -0,0 +1,41 @@ +--- +title: Introducción a Gecko e inscrustación +slug: >- + Preguntas_frecuentes_sobre_incrustación_en_Mozilla/Introducción_a_Gecko_e_inscrustación +tags: + - Incrustando_Mozilla + - Todas_las_Categorías +--- +

+

+

Sección 1: Introducción a Gecko e incrustación

+

¿Qué es Gecko?

+

Gecko es el motor del navegador, gestión de redes, analizadores, modelos de diseño, chrome y las otras tecnologías sobre las que Mozilla y otras apliaciones son construidas. En otras palabras, todo aquello queno es específico de la aplicación. +

Gecko tiene una ligeramente desactualizada sección de preguntas frecuentes of its own. +

+

¿Qué es Mozilla?

+

Mozilla es una aplicación multimplataforma formada por un navegador web,un editor de páginas web un gesator de correo /lector de noticiasn desarrollado sobre Gecko. +

+

¿Qué es the GRE?

+

El GRE (anteriormente conocido como MRE) es Gecko Runtime Environment un entorno de ejecución que muchas aplicaciones pueden compartir. Actualmente se ha esta desarrollando como un proyecto independiente llamado XULRunner. +

+

¿Qué es XPCOM?

+

XPCOM es una tecnología de objetos (similar al COM de MS Windows pero multiplataforma) cuya misión es to unificar la creación, el control y la eliminación de objetos y otros datosbajo Mozilla. El núcleo XPCOM es la interfaz nsISupports, que proporciona marco de referencia de conteo y un entorno de ejecución de búsquedas para capacidades. Todos los objetos XPCOM incluyen la interfaz nsISupports, además de las interfaces específicas de cadad objeto. Finalmente, XPCOM incluye una capa lenguaje-independiente llamada XPConnect que permite que el desarrrollo de objetos sea escrito en cualquier lenguage compatible y sean llamados desde cualquier lenguaje compatible. +

Puede encontrar más información aquí. +

+

¿Qué significa Gecko “incrustado”?

+

Gecko permite a desarrolladores de terceros emplear la misma tecnología que Mozilla usa.. Esto significa que puede incrustar un navegador web dentro de una aplicación de terceros, abrir canales y descargas dentro de los límites de la red, navergar por el DOM y más. Incluso puede construir aplicaciones enteras empleando el chrome. +

+

¿Cuales son los términos de licencia para incrustar Gecko?

+

Los mismos que para el resto de Mozilla. Mire página MPL fpara más información. +

+

¿Hay disponible un SDK?

+

Estamos trabajando lentamente para crear un SDK. De momento le recomendamos que obtenga el código fuente y compile desde ahí. +

Las versiones de desarrollo del SDK para Win32 pueden ser encontradas aquí. +

+

¿Cuál es la última versión? ¿Que versión debería usar?

+

Versiones incrustadas y el código fuente se generan con frecuencia y pueden descargarse aquí. Si desea estabilidad se recomienda emplear versiones Mozilla de la rama 1.7.x. +

+

¿Quién está usando Gecko actualmente?

+

Mire aquí para ver la creciente lista de programas que incrustan Gecko. +

diff --git "a/files/es/principios_b\303\241sicos_de_los_servicios_web/index.html" "b/files/es/principios_b\303\241sicos_de_los_servicios_web/index.html" new file mode 100644 index 0000000000..a5e4ca392c --- /dev/null +++ "b/files/es/principios_b\303\241sicos_de_los_servicios_web/index.html" @@ -0,0 +1,36 @@ +--- +title: Principios básicos de los servicios Web +slug: Principios_básicos_de_los_servicios_Web +tags: + - SOAP + - Servicios_Web_XML + - Todas_las_Categorías + - XML + - XML-RPC +--- +

+

Summary: Un tema candente en la Web últimamente son los servicios Web. Esta pequeña guía le permitirá aprender mas acerca de los servicios Web. +

+

Los fundamentos

+

Los servicios Web no son realmente nada nuevo, y actualmente, si ha utilizado RSS o Atom para leer noticias desde un sitio web, tiene una idea de como funciona un servicio Web. +

Los servicios Web intercambian datos desde un servidor al cliente, utilizando el formato XML para enviar las peticiones, de modo que tanto el servidor como el cliente puede entenderse (Introducción a XML). +

Una mejor forma de entender un servicio Web es compararlo con un formulario HTML (en PHP o ASP) para postear y enviar datos. Ambos, el servicio Web y el formulario, reciben y envían peticiones. La única diferencia es que un servicio Web utiliza XML. +

+

Ejemplos de servicios Web en acción

+

Como se dijo anteriormente, RSS y los alimentadores Atom son simplemente un ejemplo de como funciona un servicio Web, más comúnmente, XML-RPC o SOAP son también utilizados para realizar la comunicación entre el servidor y el cliente. +

+

Introducción a XML-RPC

+

XML-RPC es un tipo de servicio Web que ha existido desde 1998 y aunque no es un estándar oficial W3C,es utilizado extensamente. XML-RPC fue desarrollado por Useful Inc, junto con Microsoft. +

+

Introducción a SOAP

+

SOAP, un servicio Web, está listado como un estándar W3C, y es similar de diversas formas a XML_RPC. SOAP está respaldado por IBM, así como por Microsoft. +

+

¿SOAP 0 XML-RPC?

+

Brevemente, SOAP fue pensado para rellenar los huecos de XML-RPC. Por ejemplo, es mucho más fácil enviar un array multi-dimensional con SOAP que con XML-RPC. SOAP tiene más funcionalidad que XML-RPC, aunque XML-RPC también tiene su propio uso. +

+
+

Información sobre el documento

+ +
diff --git a/files/es/prtime/index.html b/files/es/prtime/index.html new file mode 100644 index 0000000000..1292d61054 --- /dev/null +++ b/files/es/prtime/index.html @@ -0,0 +1,432 @@ +--- +title: PRTime +slug: PRTime +translation_of: Mozilla/Projects/NSPR/Reference/PRTime +--- +

+


+

+

Una representación de tiempos absolutos. +

+

Sintaxis

+
 #include <prtime.h>
+
+ typedef PRInt64 PRTime;
+
+

Descripción

+

Este tipo es un entero de 64 bits que representa la cantidad de micro segundos desde la época NSPR, medianoche (00:00:00) del 1 de Enero de 1970 UTC (Coordinated Universal Time). El tiempo despues de esa época, tiene un valor positivo y un tiempo anterior tiene valor negativo.

En NSPR usamos más familiarmente, la expresión GMT (Greenwich Mean Time) en lugar de UTC. Aunque UTC y GMT no son exactamente lo mismo en una definición extricta, pueden ser usados generalmente como equivalentes. +

Ya que PRTime es un entero de 64 bits, debes usar las macros LL definidas en <tt>prlong.h</tt> para manipular los valores de PRTime. (Ver Chapter 18 "Long Long (64-bit) Integers)". +

+
Nota: Recuerda que mientras PRTime almacena el valor de micro segundos de la época, las fechas en JavaScript almacenan el valor en segundos de la época.
+


+

+
+
diff --git a/files/es/pruebas_automatizadas_de_mozilla/index.html b/files/es/pruebas_automatizadas_de_mozilla/index.html new file mode 100644 index 0000000000..43215322de --- /dev/null +++ b/files/es/pruebas_automatizadas_de_mozilla/index.html @@ -0,0 +1,51 @@ +--- +title: Pruebas automatizadas de Mozilla +slug: Pruebas_automatizadas_de_Mozilla +tags: + - Desarrollando_Mozilla + - NecesitaRevisiónGramatical + - NecesitaRevisiónTécnica + - Pruebas_automatizadas + - Todas_las_Categorías +translation_of: Mozilla/QA/Automated_testing +--- +

 

+

Esta página proporciona un compendio de opciones para pruebas automatizadas disponibles para los desarrolladores de Mozilla.

+

La mayoría de las pruebas automatizadas deberían ejecutarse sobre make check. Cómo añadir una prueba en el momento de compilar describe los pasos requeridos para añadir un programa de pruebas arbitrario al conjunto de tests. Dependiendo de lo que se necesite probar, puede usarse uno de los siguientes frameworks disponibles:

+

Pruebas unitarias

+

xpcshell: make check

+

Con las ayudas para pruebas de xpcshell escribes pruebas unitarias en JavaScript. El código se ejecutará más tarde en xpcshell, que es una consola JS con capacidad para XPConnect. Esto significa que tu código puede acceder a componentes XPCOM, pero no puede (fácilmente) abrir ventanas, probar el chrome de la aplicación, trabajar con el analizador HTML o usar DOM.

+

Hay disponible un servidor HTTP sencillo para su uso desde los tests xpcshell.

+

Pruebas mediante código compilado

+

Las funcionalidades no susceptibles de ser usadas en scripts y otras similares requieren que se escriban pruebas en C++ para ejecutar la funcionalidad. A pesar de las apariencias, existen muy pocas pruebas de esta naturaleza en el repositorio en este momento. Aunque en realidad hay muchas pruebas así (mira los contenidos de {{ Source("xpcom/tests") }} para ver muchos ejemplos), muchas de ellas sólo pueden ejecutarse manualmente, la mayoría devuelven fallos usando mensajes personalizados directamente a la consola (y, por tanto, no se puede revisar automáticamente si se han ejecutado correctamente), y muchas no se compilan correctamente o contienen numerosos errores.

+

A pesar de todo ello, se han escrito algunas pruebas en C++ que pueden ser ejecutadas automáticamente detectando los fallos. El mejor ejemplo actual en términos de facilidad de autoría es {{ Source("xpcom/tests/TestPipe.cpp") }}, que usa una cabecera especial de apoyo a pruebas dirigida a facilitar la escritura de tales pruebas. Mira Compiled-code automated tests para obtener detalles.

+

Escribir una prueba en C++ es más difícil que escribir una prueba en xpcshell, y el código es más difícil de mantener y modificar. ¡No escribas pruebas en código compilado si no es necesario! Deberías usar estas pruebas únicamente cuando la funcionalidad a probar depende de interfaces, métodos o propiedades que no se pueden llamar desde scripts.

+

Pruebas gráficas y/o interactivas

+

Mochitest

+

Mochitest es un framework basado en Mochikit para escribir pruebas. Las pruebas se ejecutan en el navegador, desde un servidor web local (proporcionado por Mochitest). Los scripts de inicio que lo acompañan conceden diversos privilegios a localhost (crea un nuevo perfil en cada ejecución). Como resultado, las pruebas unitarias son libres de solicitar privilegios UniversalXPConnect (acceso a componentes XPCOM), abrir ventanas emergentes, etc. Mochitest es una buena solución si realmente necesitas un navegador completo para probar un problema. Por ejemplo, un test reciente verifica que el envío de formularios funciona en iframes fijados a display:none. Hay una FAQ de Mochitest.

+

Pruebas chrome del navegador

+

Las pruebas chrome del navegador están pensadas para usarse probando el código "chrome" de la interfaz, y otras características susceptibles de ser probadas desde el código JavaScript de chrome. Consisten en pequeños bloques de código JavaScript que se ejecutan en el ámbito de la ventana del navegador.

+

Reftest

+

{{ Source("layout/tools/reftest/README.txt", "Tests visuales del motor de dibujado (reftest)") }}. Cada test consiste normalmente en dos archivos - uno de ellos contiene un conjunto de etiquetas de prueba y el otro normalmente contiene un conjunto de etiquetas de referencia (aunque también es posible usar un PNG estático si se desea). El sistema trabaja comparando el renderizado de los dos archivos.

+

reftest se compila e instala ahora automáticamente cuando ENABLE_TESTS está activado (valor predeterminado) y hay pruebas de ejemplo en {{ Source("layout/reftests") }}.

+

Para ejecutar todos estos tests, escribe:

+

obj-debug/dist/MinefieldDebug.app/Contents/MacOS/firefox -reftest layout/reftests/reftest.list

+

(Se supone que "make lcheck" debe hacer esto por ti, pero actualmente no funciona).

+

Puedes buscar entre los resultados (usando "grep") la cadena "UNEXPECTED" o ejecutar una de las herramientas de procesado de salida de reftest listadas en el README.

+

Puede que quieras usar un perfil separado para ejecutar los tests (creando un perfil llamado "reftests" y añadiendo -P reftests a la línea que invoca la aplicación).

+

Para más información, acude a {{ Source("layout/tools/reftest/README.txt", "") }} y el tutorial sobre cómo crear un test basado en reftest.

+

Crash tests

+

El framework para pruebas de fallos está basado en el framework reftest, por lo que escribir y ejecutar pruebas es muy parecido. Cada test es un solo archivo y la prueba funciona cargando el archivo y ejecutándolo sin detener el programa ni lanzar aserciones (el framework no vigila explícitamente las aserciones en este momento, necesitarás hacer grep para localizarlas en la salida).

+

Para ejecutar todas las pruebas de fallos, escribe

+

obj-debug/dist/MinefieldDebug.app/Contents/MacOS/firefox -reftest testing/crashtest/crashtests.list

+

Otra documentación de referencia

+

Por favor, ignora la página {{ interwiki('wikimo', 'SoftwareTesting:Scratchpad', 'wikimo:SoftwareTesting:Scratchpad') }}, y mira únicamente {{ interwiki('wikimo', 'SoftwareTesting', 'wikimo:SoftwareTesting') }}. La pizarra (Scratchpad) es para trabajos en curso, y casi con toda seguridad estará obsoleta o tendrá documentación errónea.

+

También está {{ interwiki('wikimo', 'SoftwareTesting', 'wikimo:SoftwareTesting') }} y Consejos y trucos para pruebas automatizadas si estás buscando algo que leer.

+

Estos otros esfuerzos están en curso:

+ +

Utilidades y frameworks existentes para pruebas

+

(originalmente de {{ interwiki('wikimo', 'SoftwareTesting:Catalog_of_Automated_Tests', 'wikimo:SoftwareTesting:Catalog_of_Automated_Tests') }})

+ +

{{ languages( { "en": "en/Mozilla_automated_testing" } ) }}

diff --git a/files/es/qa/bug_writing_guidelines/index.html b/files/es/qa/bug_writing_guidelines/index.html new file mode 100644 index 0000000000..94641c4a09 --- /dev/null +++ b/files/es/qa/bug_writing_guidelines/index.html @@ -0,0 +1,111 @@ +--- +title: Guía para escribir un Bug +slug: QA/Bug_writing_guidelines +translation_of: Mozilla/QA/Bug_writing_guidelines +--- +
+

Si necesitas ayuda con algún software de Mozilla (por ejemplo con Firefox, Seamonkey o Thunderbird), usa una de las opciones disponibles de ayuda. ¡No modifiques esta página! Por favor, lee esta página para aprender como reportar un bug usando Bugzilla, que es el sistema de seguimiento de bugs de Mozilla.

+ +

Si eres nuevo reportando bugs, puede ser que quieras intentar obtener ayuda de los colaboradores más experimentados. Vaya a la seccion de la comunidad en la página QA para consejos. Si vas a reportar un bug en Firefox, también puedes obtener asitencia en el canal #firefox en irc.mozilla.org.

+ +

Ver también Cómo escribir un bug apropiadamente.

+
+ +

Los reportes efectivos de bugs son los que más probablemente se resolverán. Estos lineamientos explican como escribir reportes efectivos.

+ +

Preliminares

+ +
    +
  1. Asegúrate de que tu software está actualizado +
      +
    • Idealmente, haz las pruebas en las versiones en desarrollo para ver si tu bug ya ha sido solucionado. (Léase Firefox Beta, Aurora, o si estás a la última con Nightly).
      • +
    • Si se reproduce de manera ocaciona, pero no después de seguir pasos especificos, debe proveer información adicional que sea util para el bug.
      • +
    • Si no puede reproducir el problema, es probable que no lo reporte, excepto que provea la información acerca de lo ocurrido.
      • +
    +
    2. +
  2. Haz una búsqueda en Bugzilla para ver si tu bug ya ha sido reportado (tutorial).
    3. +
  3. Abre el formulario para Reportar un nuevo bug, el cual te guiará a través de la mayoría del proceso de reporte del bug. +
      +
    • Si tienes varias cuestiones, llena reportes por separado.
      • +
    +
    4. +
+ +

Escribir pasos precisos para reproducir

+ +

¿Cómo puede el desarrollador reproducir el bug en su propia computadora?

+ +

Los pasos para reproducir un bug son la parte más importante de cualquier reporte. Si el desarrollador está listo para reproducir el bug, el bug es muy probable que sea corregido. Si este paso no está tan claro, no será posible saber si el bug ha sido corregido.

+ +

Describe tu método de interacción con Firefox  además de la atención de cada paso.

+ + + +

Después de tus pasos, describe con precisión los resultados observados y el resultado esperado. Hechos claramente separados (observaciones) de especulaciones.

+ + + +

Si el bug parece enorme, podría ser algo inusual en la configuración necesaria de los pasos para reproducir el bug. Ver si puedes reproducir el bug en un nuevo perfil Firefox. Si el bug solo sucede en tu perfil existente, trata de averiguar que ajustes, extensiones, o archivos en tu perfil se necesitan para reproducir el bug.

+ + + +

Escribiendo un resumen claro

+ +

¿Cómo describirías el bug utilizando aproximadamente 10 palabras? Esta es la primera parte de tu reporte que un triager o desarrollador verá.

+ +

Un buen resumen podría rápida y únicamente identificar un reporte. Esto debe exponer el problema, no tu solución sugerida.

+ + + + + +

Encontrando el producto y componente correcto

+ +

Se te pedirá que categorices tu bug en un "producto" y un  "componente" dentro de ese producto, con el fin de dirigir tu reporte a los desarrolladores correctos.

+ +

Si estás usando Firefox, el bug es más probable en "Firefox", "Toolkit", o "Core".

+ + + +

En caso de duda, se deben buscar errores similares y ver en qué componente están.

+ +

Si ninguno de los componentes parece apropiado, busca un componente "General" en el producto más apropiado.

+ +

Bugs específicos

+ +

Si reporta de un bloqueo, porfavor incluir el ID de Breakpad o adjunte el seguimiento de la pila e incluya la firma del bloqueo en el resumen del bug.

+ +

If you are reporting a memory use or leak bug, please attach the output of about:memory (Firefox 6+). Ideally, find steps to reproduce an increase in what is shown in about:memory (even after clicking the "Minimize memory usage" button at the bottom). If you have trouble finding steps to reproduce, try the Firefox Support page titled High Memory Usage. If you are a C++ developer, more precise tools are available.

+ +

If you are reporting a bug involving a specific web page, please try to make a reduced testcase and attach it to the bug report.

+ +

If the bug was recently introduced, finding a regression window can help identify the cause of the bug.

+ +
+

Original document information

+ + +
diff --git a/files/es/qa/confirming_unconfirmed_bugs/index.html b/files/es/qa/confirming_unconfirmed_bugs/index.html new file mode 100644 index 0000000000..deb06950b6 --- /dev/null +++ b/files/es/qa/confirming_unconfirmed_bugs/index.html @@ -0,0 +1,44 @@ +--- +title: Confirmando bugs sin confirmar +slug: QA/Confirming_unconfirmed_bugs +translation_of: Mozilla/QA/Confirming_unconfirmed_bugs +--- +

Los bugs que son de nuevos reporteros van a estar inicialmente marcados como SIN CONFIRMAR. Para cambiar un bug de SIN CONFIRMAR a NUEVO, necesitaremos tu ayuda para verificar si este es válido. Un bug puede ser movido de SIN CONFIRMAR a NUEVO si:

+ +

Nota: No es necesario que puedas reproducir el bug para poder confirmarlo.

+

Para ayudar a confirmar bugs, tienes que hacer lo siguiente:

+

Consigue configurar

+ +

Es recomendable usar los links Atrás/Adelante (Back/Forward) para moverse dentro de las listas, en vez de recargarlas cada vez que quieras buscar un nuevo bug.

+

Consigue los privilegios adecuados

+

Para poder confirmar los bugs necesitas el privilegio "Puedes confirmar".

+

Si has sido activo en Bugzilla, lo mas seguro es que tengas este privilegio. Revisa tus Preferencias en Bugzilla. Si tus permisos dicen "Puedes confirmar un bug" ("Can confirm a bug"), entonces estas listo. 

+

Si no tienes este privilegio, entonces puedes solicitarlo siguiendo estos pasos.

+

Confirma lo inconfirmado

+

1. Intenta determinar si el bug se encuentra duplicado. Use este método para buscar en la base de datos. 

+

2. Intente reproducir el bug.Si es posible reproducir el bug, entonces anota el hecho de que puedes reproducirlo, y agrega este comentario al campo de Comentarios Adicionales:

+
1. Tu versión de Mozilla (el título de la barra del navegador)
+2. Tu plataforma
+3. Tu sistema operativo
+
+

Si no puedes reproducir el bug, entonces anota en los comentarios de que intentaste reproducirlo y no pudiste. Si otros también están de acuerdo de que el bug es irreproducible, puedes marcarlo como INVÁLIDO (INVALID) o WORKSFORME, y decirle al que lo reportó que lo reabra si puede proporcionar pasos para reproducirlo en la nueva versión. Un texto ejemplo para los problemas coumunes de bugs puede ser encontrado al fondo de esta página.

+

3. Has que el bug sea fácil de entender.Mira los lineamientos para la Redacción de Bugs para saber el tipo de información que es de ayuda en un bug, incluyendo pasos para la reproducción y una buena descripción.

+

4. Verifica el Producto y el Componente. Si el reporte de bug es clasificado incorrectamente, muévelo hacia el correcto Producto y Componente. Asegúrate de clickear en el botón que dice "reasignar el bug al dueño del componente seleccionado" ("reassign the bug to owner of the selected component.")

+

5. Verifica el resumen del bug. Actualiza el resumen para que sea descriptivo, y contenga las suficientes palabras claves para que las personas que lo busquen lo encuentren.

+

6. Cambia el estatus a NUEVO. Deberías confirmar un bug cuando no está en el Componente general.

+

Opcional, pero de ayuda

+ diff --git a/files/es/qa/index.html b/files/es/qa/index.html new file mode 100644 index 0000000000..b8b4bf82af --- /dev/null +++ b/files/es/qa/index.html @@ -0,0 +1,252 @@ +--- +title: Control de calidad de Mozilla (QA) +slug: QA +tags: + - Ayudar + - Calidad + - Landing + - Pruebas + - QA +translation_of: Mozilla/QA +--- +
Cómo escribir un buen bug
+Al seguir estos lineamientos, aseguras que tus bugs estén en la cima de la pila de trabajo de los ingenieros de Mozilla y por lo tanto, ayudas a resolverlos.
+ +

Hay muchas cosas que puedes hacer para ayudar al proyecto Mozilla en el departamento de Control de Calidad (QA). No todas requieren saber programar, algunas tampoco requieren conocer HTML u otra tecnología Web. Si estás interesado en ayudarnos como testeador o en alguna otra actividad de QA, primero debes leer las siguientes páginas: Mozilla Quality Assurance y Helping with Quality Assurance

+ +

Empezando

+ + + +

Bugs

+ +
+
+

Reportando bugs

+ +
+
Bugzilla
+
Todos los proyectosMozilla usan Bugzilla para rastrear bugs. Necesitarás crear una cuenta con Bugzilla en orden para reportar bugs y priorizarlos.
+
Guías de redacción de bugs
+
Entre más efectivamente se reporte un bug, es más probable que un ingeniero puedo arreglarlo. Siguiendo estas guías, ayudas a asegurar que yus bugs sean nototios en el montón de los ingenieros Mozilla, y sean arreglados.
+
La vida de un bug
+
Este tutorial te dara un vistazo del qué sucede en los estados que un bug pasará, así cómo va desde un estado al otro en su ciclo de vida. También explica el significado de banderas (flags)/términos usados en QA.
+
Presentando crash bugs
+
Este documento enlista las guías y consejos acerca de cómo redactar reported de un bug reports que rompe, de una manera que ayude a depurar y arreglar el asunto reportado.
+
+
+ +
+

Catalogando bugs

+ +
+
Confirmando bugs no confirmados
+
Identifica reportes de bugs útiles y cierra el resto.
+
Catalogando bugs para Firefox
+
Información acerca del proceso completo de clasificación de bugs – desde procesar los bugs entrantes hasta detallar los pasos para recrear bugs.
+
Ocultando bugs duplicados
+
Ayuda a que los bugs sean más faciles de arrgelar al ocultar reportes entrantes acerca de duplicados.
+
Guías generales
+
Qué hacer y qué NO hacer en Bugzilla.
+
+
+
+ +
+

Pruebas manuales

+ +
+
+
+
Complementode la redacción de caso de prueba
+
Cómo escribir casos de prueba correctos
+
+
+ +
+
+
TestRail
+
Casos de prueba del área de QA en Mozilla se encuentran en TestRail. Necesitarás una cuenta LDAP para ingresar y ejecutar casos de prueba. Aprende más en la página wiki de TestRail.
+
+
+
+ +
+

Pruebas automatizadas

+ +
+
+
+
Automatización de pruebas en Mozilla
+
Documentación acerca de la creación y uso de pruebas automatizadas para el código de Mozilla.
+
Ejecutando pruebas automatizadas
+
+

Esta página enlista los pasos requeridos para ejecutar suites de pruebas automatizadas de Mozilla.

+
+
Desarrollando pruebas
+
Asegurar que cambios fúturos en Mozilla no vayan a dañar cosas que funcionan correctamente.
+
Evitar fallas intermitentes en pruebas
+
Sugerencias para hacer rus pruebas más confiables, de tal manera que ayudan a evitar fallas intermitentes y aleatorias en pruebas.
+
Verificación de pruebas
+
Cuando una colección de cambios agrega una nueva prueba, o modifica una prueba existente, la verificación de pruebas (test verification,TV) de un grupo de pruebas realiza evaluación adicional que ayuda a encontrar fallas intermitentes en ñas pruebas modificadas tan pronto como es posible.
+
Mozharness FAQ
+
Respuestas a preguntas comunes de Mozharness.
+
+
+ +
+
+
Robocop
+
Robocop es el sistema de automatización de pruebas usado en Firefox para Android. Aprende sus guías de estilo de codificación. 
+
Marionette
+
Conoce las pruebas de interfaz de usuario con Marionette.
+
Pruebas de plataforma-web
+
Aprende cómo usar el  sistema de pruebas Web en tiempo de ejecución estándar de la industria, multi-navegador, multi-platforma para la organización W3C usedo por Mozilla y otros para asegurar interoperabilidad entre navegadores.
+
Pruebas de Media externa
+
Empieza probando elementos de vídeo en HTML5u sando VideoPuppeteer, una colección de pruebas de Marionette usada probar sitios como YouTube o Netflix.
+
Pruebas de cromo
+
Una prueba de cromo es básicamente una prueba de Mochitest corriendo con privilegios de cromo (código Javascript en la parte front-end del sistema Gecko).
+
+
+
+ +
+

Ingeniería de calidad Firefox

+ +
+
+
+
Catalogando bugs para Firefox
+
Información acerca del completo proceso de clasificación de bugs – desde el procesamiento de bugs entrantes hasta reducir los pasos para replicar un bug.
+
+ +
+
Consejos y trucos
+
Estos consejos y trucos harán tu vida más fácil cuando estés probando.
+
+Descargando ramas de builds o nocturnos + +
+
Cada 24 horas, un build "nocturno" es creado para que los testers de todo el mundo lo descarguen y prueben, reportando como van encontrando los defectos.
+
+
+ +
+
+
Opciones de línea de comandos
+
Opciones de la línea de comandos son usadas para especificar varios ajustes de arranque en Firefox.
+
Reportando un problema de desempeño
+
Este artículo te guiará en el reporte de un problema de desempeño usando la extensión Gecko Profiler.
+
Informe de accidentes
+
Firefox incluye un sistema de código abierto para informar accidentes.
+
+
+
+ +
+

Firefox para Android

+ +
+
+
+
Firefox móvil
+
Firefox para Android es la versión móvil de Firefox con una apariencia nativa de Android.
+
Pruebas de compatibilidad
+
Ayudanos a identificar sitios web que no funcionen bien en Firefox al reportar  las cuestiones especificas que encuentras en tu investigación.
+
+
+ +
+
+
Registrando con Android Debug Bridge y Logcat
+
Este artículo proveerá un recorrido en descargar y establecer un ambiente al cual se puede obtener acceso y ver los registros del sistema de Android.
+
Habilitando la Consola de Error
+
Vee el artículo Mozilla Hacks en Depurando Remotamente en Firefox para Android para contenido web. Si necesitas depurar el mismo navegador Firefox  usa adb logcat de Android.
+
+
+
+ +
+

Firefox OS

+ +
+
+

Pruebas manuales

+ +
+
Simulador vs Emulador vs Dispositivo
+
Éstas son las tres opciones cuando viene a conseguir un ambiente Firefox OS en orden para trabajar, o desarrollar para, Firefox OS.
+
Depurando
+
Descubrir las diferentes herramientas a nuestra disposición para depurar tu código Firefox OS.
+
Reportando bugs
+
Este artículo proporciona una guía para archivar bugs acerca del proyecto Firefox OS, incluyendo Gaia y B2G.
+
+
+ +
+

Plataforma (Gecko)

+ +
+
Pruebas Automatizadas
+
Aprende varios aspectos de pruebas Firefox OS, incluyendo ejecutar diferentes pruebas, automatización, y reporte y seguimiento de resultados.
+
Pruebas de desempeño Gaia
+
Este artículo proporciona información acerca de ejecutar pruebas de desempeño en Gaia, así como el cómo crear nuevas pruebas.
+
Gráfico de soporte de funciones
+
Hay varios builds diferentes de Firefox OS que se pueden descargar o construir tú mísmo, y hay algunas diferencias entre los tipos de características disponibles en cada dispositivo.
+
+
+
+ +
+

Web QA

+ +
+
+
+
Refinando casos de prueba
+
Mejorando los reportes de defectos al convertir páginas web rotas en simples casos de prueba, los cuales pueden ayudar a desarrolladores entender el defecto y también pueden ser usados para crear pruebas automatizados.
+
Gestionando XFails
+
Uno de las tareas en marcha del departamento de Web QA es gestionar xfails. Este documento expliacrá que son las xfails, y describe los pasos que uno puede tomar para investigar y actualizarlos.
+
+
+ +
+
+
Ejecutar pruebas automatizadas
+
¿Así que estás interesadx en contribuir en los proyectos de automatización Mozilla Web QA pero no sabes por dónde empezar? Este documento te ayudará a preparar y ejecutar un conjunto de pruebas locales.
+
+
+
+ +
+

Glosario

+ +
+
+
Smoke Test
+
+
+
+ +

Ver también

+ + diff --git a/files/es/qa/organizando_un_testday/index.html b/files/es/qa/organizando_un_testday/index.html new file mode 100644 index 0000000000..25a0d5b818 --- /dev/null +++ b/files/es/qa/organizando_un_testday/index.html @@ -0,0 +1,219 @@ +--- +title: Organizando un Testday +slug: QA/Organizando_un_Testday +tags: + - Evento + - Organizando + - QA + - Testdays +translation_of: Mozilla/QA/Organizing_a_Testday +--- +
+

Esta página necesita una revisión técnica del Equipo QA de Mozilla en Q4 2014. (Asignada a Aaron Train.)

+
+ +

Por favor recuerda que lo mostrado en este artículo es solo una guía aproxmada. Cuanto mayor esfuerzo pongas en la preparación de un Testday, tendrás mayor probabilidad de éxito. Dá de tu parte, y de la comunidad, suficiente tiempo para preparar el evento. Sobre todo, experimenta y diviertete con tu Testday.

+ +

Planeando Tu Evento

+ +
Lo siguiente debe ser hecho en no más de una semana antes de tu evento:
+ +
 
+ +
    +
  1. Una vez tengas un tema en mente, elige un día para agendar tu evento — revisa el calendar on QMO para ver la disonibilidad.
    2. +
  2. Crea un plan de pruebas para definir el criterio de éxito,  establecer un lugar designado para la suscripción de mentores, establece un esquema (ej., past event test-plan)
    3. +
  3. Publica y postea el evento en QMO (de ser necesario, preguntar al staff de QA en  IRC para asistencia) — una valiosa publicación debe contener una solicitud para  inscripción de tutoría y  enlaces a documentación disponible (ej., see past event notice)
    4. +
  4. Difunde tu evento — Seguir nuestras sugerencias de comunicación listadas abajo ayudará a difundir y publicar el evento.
    5. +
  5.  Contar cno mentores para ayudar a facilitar y educar durante todo el evento — reunir información de contacto para asegurar la asistencia al evento.
    6. +
+ +

El Día "D"

+ +
    +
  1. Asegurate que el tema del canal IRC esté actualizado para señalar a las personas al plan de pruebas.
    2. +
  2. Ser proactivo en dar la bienvenida a las personas y eliminar las barreras para que puedan constribuir - hacer preguntas e interactuar con las personas que se unen al canal.
    3. +
  3. Recomendar suscribirse al dev-quality y mozillians a los asistentes para notificaciones de futuros eventos.
    4. +
  4. Proporcionar una encuesta de opinión a los participantes, clonar o copiar este documento de ejemplo
    5. +
+ +

Después del Evento

+ +
    +
  1. Proporcionar un post de seguimiento en tus canales de comunicación agradeciendo a quienes asistieron.
    2. +
  2. Planear un futuro evento.
    3. +
+ +

Consejos para el Éxito

+ +
Lo siguiente es una lista de consejos con lo que esperamos que tu evento sea más exitoso.
+ +
 
+ + + +

Canales de Comunicación

+ +

Lo siguiente es una lista de varios canales de comunicación que deberiamos usar para anuncios. Elige los que veas conveniente.

+ +
Listas de Correo
+ + + +
Redes Sociales
+ + + +
Foros
+ + + +
Páginas de Reuniones
+ + + +
Otros Sitios Web
+ + + +
+
+

Esta página necesita una revisión técnica del equipo Mozilla QA Team in Q4 2014. (Asignado a Aaron Train.)  Este artículo ha sido creado de esta página de QMO: Roles and Tips

+
+ +

Moderadores

+ +

Lo siguiente son algunos consejos para que los moderadores tengan un Testday exitoso.

+ + + +

Colaboradores

+ +

Lo siguiente son algunos consejos para que los colaboradores tengan un testday exitoso.

+ + + +
+

Información Original de Documento

+ + +
+ +
+
+

Esta págna necesita una revisión técnica del Equipo Mozilla QA Team en Q4 2014. (Asignado a Aaron Train.) Este artículo ha sido creado de esta página de QMO: Testday Template

+
+ +

Págna de Evento QMO

+ +

La semana antes al testday necesitamos crear una página de evento QMO.

+ + + +

Este es un ejemplo de una exelente página de Evento QMO. Antes de postear asegurate de:

+ + + +

Publicación en QMO

+ +

El día antes al testday, simplemente crea un post que recuerde a las personas que el testday será mañana.

+ + + +

Este es un buen ejemplo de un Recordatorio a un evento QMO. Tu publicación debe ser sindicada en el Planet dentro de 30 minutos a una hora.

+ +

Publicación de Resultados QMO

+ +

El día después del testday, elavora otra publicación que resalte los resultados.

+ + + +

Este es un buen ejemplo de una Publicación de Resultados QMO. Tu publicación debe estar sindicada en el Planet en 30 minutos a una hora.  

+ +
+

Información Original de documento

+ + +
+ +

 

diff --git a/files/es/qa/screening_duplicate_bugs/index.html b/files/es/qa/screening_duplicate_bugs/index.html new file mode 100644 index 0000000000..b6480d53cb --- /dev/null +++ b/files/es/qa/screening_duplicate_bugs/index.html @@ -0,0 +1,157 @@ +--- +title: Screening duplicate bugs +slug: QA/Screening_duplicate_bugs +translation_of: Mozilla/QA/Screening_duplicate_bugs +--- +
+ Por Sean Richardson
+

Si has estado confirmando bugs SIN CONFIRMAR o viendo nuevos bugs, te habrás dado cuenta de que todos los bugs que son enviados por reporteros inexperimentados son bugs DUPLICADOS. A pesar de que menos de la mitad resultan ser duplicados, lo mejor es asumir que cada uno lo es hasta que uno se convenza de lo contrario.

+

Esto es una guía que sirve para ayudarle a identificar la máxima cantidad posible de bugs duplicados que llegan de la manera mas eficiente. Se asume que siente cierta comodidad usando Searching Bugzilla.

+

Este tutorial está escrito como si fueras a sentarte y a buscar bugs DUPLICADOS (DUPs) uno tras otros, pero muchos de estos se aplican, no importa como llegues a un bug potencialmente duplicado. Si quieres intentar identificar los bugs DUPLICADOS uno por uno al final de la lista hay una lista de bugs, que indica los tipos de bugs que usualmente están DUPLICADOS.

+

Mientras que estés revisando los reportes de bugs para ver si hay DUPLICADOS, por favor confirma los bugs SIN CONFIRMAR, agrega o simplifica casos de prueba, mejora los pasos para reproducirlo, mejora el resumen, reporta si lo has reproducido en otra plataforma, y/o si has hecho algo mas que tenga sentido antes de moverte al próximo, si el bug no parece ser un DUPLICADO.

+

Para marcar a un bug como DUPLICADO, tu necesitas el permiso "Puedes editar todos los aspectos de cualquier bug". Si no tienes este permiso, manda un e-mail a Gerv o a bugmaster@mozilla.com, y pregunta si lo pueden agregar a tu cuenta de Bugzilla. Mientras tanto, agrega un comentario a cualquier bug mencionando de que es, o puede ser un duplicado.

+

 

+

Los bugs rápidos y obvios

+
+
+ Si no lo has hecho todavía, por favor tomate tu tiempo con la lista de los bugs más frecuentemente reportados de Mozilla y la sección de los Problemas Conocidos en notas de versiones de Firefox.
+
+  
+
+ Si el reporte se parece a una regresión reciente, fijate en los bugs recientemente reportados por el equipo de QA team, y en el newsgroup (netscape.public.mozilla.builds) para ver si el problema ya es conocido.
+
+  
+
+ También puedes ver más en la lista de bugs de hoy para Firefox y Thunderbird. Mira la página de smoketesting si quieres concentrarte en esta área.
+
+ Tendrás menos dicultades escogiendo los bugs duplicados que tu ya cononces que se han reportado. En lugar de ir a través de la lista de bugs en orden, busca en ella bugs cuyos resúmenes parecen familiares, para que puedas tener tantos duplicados como se pueda sin reordenar las busquedas no guiadas.  Los DUPs que tu has reportado o que has encontrado deberían de ser los más fáciles de encontrar, y los más productivos al resolverlos, desde que eres capaz de reconocer y evaluar los identicos rápidamente. 
+
+  
+
+ Some ways to narrow down the query based on what you remember: +
    +
  • If you can remember an e-mail address associated with the existing bug, enter it into one of the Email sections and set the appropriate role(s). Do the same if you think you added a comment to the existing bug.
    • +
  • If you can remember roughly when the bug entered the system, choose "[Bug Creation]" in the Where the field(s) field, and set a date range in the dates and to fields.
    • +
  • If you know you've seen some mail from bugzilla-daemon@mozilla.org on the subject of an existing bug that's a candidate for a match lately, enter a number in the Changed in the last [ ] days field.
    • +
+
+
+ If you get no matches, your recall may be fallible, so try the search again without the restriction.
+  
+
+ If you were able to quickly find the correct bug report to mark a new bug a DUP of, but its summary contains none of the words the reporter of the new bug might have tried to search with, consider adding those words to the summary, or, if you can't do that, including them in a comment suggesting that they be added to the summary -- especially if the bug looks likely to get more duplicates.
+
+

Searching

+
+
+ The first field, Status, is normally preset to find NEW, ASSIGNED, and REOPENED bugs. Add UNCONFIRMED (use Ctrl-click in Windows, Command-click in MacOS) to find duplicates among newly-entered bugs too.
+  
+
+ To cast a wider net, add RESOLVED and VERIFIED, or deselect everything in the Status field. Do this if you wouldn't otherwise expect a long bug list, or when trying again if you got a relatively short list with no matches. It can be easier to find earlier DUPLICATE bugs (which will be RESOLVED) and follow them to the "real" bug, especially if there are several DUPs already. The existing bug you are hunting for may also have been fixed already.
+  
+
+ To exclude obviously extraneous bugs, narrow the search by making a choice under Product. Usually it will be "Core" (for Browser, HTML composition, and text-editing bugs) or "Firefox" or "Thunderbird".
+  
+
+ If the proper component for previously reported bug is obvious (as could be expected for, as an example, most "Bookmarks" bugs), choose that component. You can select multiple components at once. Be prepared, though, to retry you query without specifying a component if you don't find a match - not all bugs end up where you'd expect.
+  
+
+ The same will apply to the Keywords field. Not all bugs that should be labelled "fonts", for instance, necessarily are.
+  
+
+ Beside each of the Summary, Description entry, and URL fields. There is a drop-down that lets you choose the type of matching. Choose among "case-insensitive substring","case-sensitive substring", "all words", "any words", or "regular expression", as appropriate (hints on which work best for several common search scenarios are available in the Text Searching tutorial). Although searching within the Description entry is much slower than any other field, go ahead and use it if it makes sense or the search terms available might not show up in the summary, but try to restrict the search with other fields at the same time if you can.
+  
+
+ Boolean Charts are an advanced feature that can let you do searches that are otherwise impossible. You can use any kind of match with almost any field, and set up boolean ands and ors. The first chart always ands with the rest of the query form. As a trivial example, to search for bugs about the tab key and exclude bugs about tables, add [Summary] [Does not contain (case-insensitive) substring] ["table"] after putting "tab" in the Summary field.{C}
+  
+
+ If you don't find a match on the bug list generated by your first query, it is usually worth trying at least one or two more queries.
+
+

Matching

+
+
+ When the bug list appears, scan it for anything that looks like a possible match. It's useful to open bugs in a new window to preserve the list. At the top of each column, clicking on its name will sort the bugs by that field. You can add other fields to the bug list by clicking on Change columns; for some searches, the Components column can be very useful.
+  
+
+ If you find a clear and certain match, add a comment stating which bug the duplicate bug is a DUPLICATE of (if the bug report that matches is itself a DUP, follow the trail of "This bug has been marked as a duplicate of 00000" comments). If you had to read deep into the existing bug or puzzle out the connection, mention the date of the comment that explains the match or describe the connection.
+  
+
+ If you are not certain of the match, but it looks probable or even possible, add a comment, but also say how sure you are. Even if you are not completely certain that a new bug is a DUP at all, if you think it probably is or even might be, add a comment saying that.
+  
+
+ If the original report is deficient enough that you had to try to reproduce the bug before you could understand what the report was saying, please add enough detail so that the next person reading the bug won't have that problem, and will have an easier time confirming or verifying the match. Even if you don't find a match at all, please do this to make it easier for the next person, who might make the connection immediately given your improved description.
+  
+
+ If the existing bug that the DUPLICATE matches to is in a different component, change the Component field to match the existing bug.
+  
+
+ Finally, if you are sure that the bug is a DUPLICATE, go ahead and click on the radio button beside Resolve bug, mark it as duplicate of bug # [     ] and enter the bug number of the existing bug. Be sure to check for a typo or transposition error before clicking on [Commit].
+  
+
+ If, to the best of your knowledge, a new UNCONFIRMED bug is not a DUP, please follow the steps outlined in the Confirming Unconfirmed Bugs guidelines before moving on to the next.
+
+

Which is the Duplicate?

+
+
+ Other things being equal, newer bugs should be made DUPLICATES of older bugs, but, more importantly, whichever bug is further along in the process of getting fixed should not be made a duplicate. Signs that progess has been made include: +
    +
  • the bug is marked FIXED, a patch is attached or a fix is promised soon
    • +
  • the bug is ASSIGNED to the right Component and developer
    • +
  • the bug has been analyzed by developers
    • +
  • the bug has been given a higher priority (e.g., [PDT+], beta2) or an imminent milestone
    • +
  • the bug report has a explanation of how to reliably reproduce the bug and/or it has a simplified testcase
    • +
+
+
+ UNCONFIRMED and "General" bugs should never have another bug made a duplicate of them unless the other bug is also an UNCONFIRMED or "General" bug. Even then, the bug reports that have less detail and work should be made duplicate of the bug reports that are further along, even if those are older. At that point the bug that receives the DUP should normally be confirmed, if it is not already.
+  
+
+ If you are stumped, add a comment resembling the following: + 
This bug appears to be a duplicate of bug nnnnn, but
+I'm not sure which should be made DUPLICATE of which.
+
+
+

One Down, or, Keeping in the Groove

+
+
+ Take another look at the bug list after making a match: there may well be another DUPLICATE of the same bug lurking there. You might also see two bugs on the list that look suspiciously similar even though neither matches the bug you started with.
+  
+
+ After some time you will naturally become much more familiar with some types of issues and some components than others. Go with that, focus on the areas you can make sense of quickly. You might also have some existing expertise or experience that makes it easier for you to evaluate some bugs. If you know javascript well, for instance, it makes sense to check over new-to-you DOM bugs before identifying duplicates in any other area.
+  
+
+ Similarly, let your tools guide you, to some extent at least. If you know how to use a Debugger, you can make more of a contribution to evaluating Crashers than others can, so it makes sense to look at them. Similarly, some bugs that are reported on Linux, Macs, or other platforms are specific to the platform or platform/OS combination that they were reported on. Someone unfamiliar with that platform won't be as efficient, so if you regularly use something other than Microsoft Windows, please look at bugs reported on your platform first, by selecting it on the query page. Use the Edit this query link at the bottom of a bug list to get back to the query form if you can't use the [Back] button.
+  
+
+ By concentrating on the bug reports that you have the skills and experience to evaluate quickly and surely, you will be able to help more in the time you can contribute.
+
+

Specific Types of Duplicates

+

Some types of bug reports need or can benefit from special handling:

+
    +
  1. Bug reports about a particular URL: Check first for a substring (usually just the domain name is appropriate) of the URL in the URL field, matching against bugs with any Status. Obvious exact DUPs should show up easily that way, so long as the reporter filled in the URL field. In case that was not done, check in the Description entry field if there is no match in the URL field.
    2. +
  2. Reports of Crashes: Crashes are identified by what specific code crashed, not how they are reproduced, so some sort of debugging output may be required before a determination can be made whether a crash report is a DUP. If you reproduce a crash on a previously unreported platform or OS, or using a current binary when the reporter was using a milestone release, please add as much detail as you can. If a module name is reported or you can generate a stack trace, search in Bugzilla for bugs with the crash keyword. If you don't find a match, add "crash" to the keywords field, so long as you were able to reproduce the crash.
    3. +
  3. Multiply-DUPLICATE reports: Some bug reports describe a number of often unrelated problems. If all of the problems mentioned are clearly duplicates of existing bug reports, mark the new bug report as a DUPLICATE based on the first issue. If it is clear that all but one of the problems have already been reported, state that, citing the bug numbers if possible, and adjust the Summary to refer to the remaining problem.
    4. +
  4. "General" bug reports: Be sure to move the bug to the appropriate Component if you can identify it, and copy over the QA contact, at the same time that you mark it as a DUP, so that it can be verified by someone familiar with the existing bug report.
    5. +
  5. Same Exact Bug, two bug numbers: Sometimes a bug report ends up in the Bugzilla database twice in a row. If you see two bugs with the same summary and adjacent bug numbers, mark one as a DUP of the other immediately, before both get comments -- but look at both first, in case one has comments already.
    6. +
  6. An ASSIGNED bug may be a DUP: It does sometimes happen that one assigned bug is a duplicate of another. If both are assigned to the same engineer, add a comment to the one that is not as far along as the other; if two different engineers are involved, add a comment to both, pointing out the existence of the other and why it appears to be a DUP. Do not resolve ASSIGNED bugs as DUPs yourself; the assignee should do that.
    7. +
+

Lists Where Duplicates Lurk

+
+
+ The greatest concentration of duplicate bugs is in those that enter the database as UNCONFIRMED, although plenty of NEW bugs also turn out to be DUPs. Bugs do occasionally get ASSIGNED before being found to be a DUP, but that is what duplicate-screening is meant to prevent, so please concentrate on UNCONFIRMED and NEW bugs.
+  
+
+ The bug lists below are displayed in rough descending order of prevalence of duplicates. They will appear in new windows; you may want to open bugs from the list in new windows too, to preserve the list. Happy matching; if you find only one DUP, you'll have earned the thanks of a busy software enginner.
+  
+
+ + +
+
+

(Thanks to Jan Leger, Eli Goldberg, David Baron, John Morrison, Matthew Thomas, Gervase Markham, Liz Henry, and Terry Weissman for contributing to this document. Additional suggestions welcome.)

diff --git a/files/es/rdf/index.html b/files/es/rdf/index.html new file mode 100644 index 0000000000..500f4578d4 --- /dev/null +++ b/files/es/rdf/index.html @@ -0,0 +1,56 @@ +--- +title: RDF +slug: RDF +tags: + - RDF + - Todas_las_Categorías +translation_of: Archive/Web/RDF +--- +

+

+
Guía Breve de Web Semántica
+RDF es uno de los pilares de la Web Semántica, pero... ¿Qué es la Web Semántica?.

El Marco de Descripción de Recursos (RDF) es una familia de especificaciones para un modelo de metadatos que a menudo es implementado como una aplicación XML. +

RDF se basa en la idea de hacer las declaraciones sobre los recursos en la forma de una expresión de sujeto-predicado-objeto, llamado "un triple" en terminología RDF. El sujeto es el recurso, "la cosa" descrita. El predicado es un rasgo o el aspecto relativo al recurso, y a menudo expresa una relación entre el sujeto y el objeto. El objeto es el valor de aquel rasgo. +

RDF es un estándar del W3C +

+
+

Documentación

+
¿Que es RDF? +
RDF es uno de los vocabularios de XML que mas se ha hecho sentir ultimamente, RDF propone ser el gran habilitador de la web semantica y convertirse en el standard universal para los metadatos en la web. +
+
RDF Especificación del Modelo y la Sintaxis +
Traducción de la recomendación del W3C 22 febrero 1999. Este documento ha sido sustituido por: RDF Primer, W3C Recommendation 10 February 2004 +
+
Preguntas frecuentes sobre RDF en Mozilla +
Faq sobre el Marco de Descripción de Recursos en Mozilla. +
+
Marco de Descripción de Recursos +
Otra introducción al tema. +
+

Ver más...

+		 +

Comunidad

+ +
  • La comunidad Mozilla... En inglés. +
+

{{ DiscussionList("dev-tech-rdf", "mozilla.dev.tech.rdf") }} +* {{ mediawiki.external('http://www.ilrt.bris.ac.uk/discovery/rdf-dev/ RDF-Dev mailing list') }} +

Ver más...

+

Herramientas

+ +

Ver más...

+

Temas Relacionados

+
XML +
+
+

Categorías +

Interwiki Language Links +


+

+
+
+{{ languages( { "de": "de/RDF", "en": "en/RDF", "fr": "fr/RDF", "it": "it/RDF", "ja": "ja/RDF", "ko": "ko/RDF", "pl": "pl/RDF", "pt": "pt/RDF", "ru": "ru/RDF" } ) }} diff --git a/files/es/recursos_en_modo_desconectado_en_firefox/index.html b/files/es/recursos_en_modo_desconectado_en_firefox/index.html new file mode 100644 index 0000000000..1c187da642 --- /dev/null +++ b/files/es/recursos_en_modo_desconectado_en_firefox/index.html @@ -0,0 +1,161 @@ +--- +title: Recursos en modo desconectado en Firefox +slug: Recursos_en_modo_desconectado_en_Firefox +tags: + - Aplicaciones_web_en_desconectado + - Firefox 3 +--- +

{{ Fx_minversion_header(3) }}

+ +

Firefox 3 implementa en gran parte el soporte HTML 5 para la memoriacache (memoria temporal) de la aplicación web en modo desconectado. Esto lo hace por medio del cache de la aplicación (un conjunto de recursos obtenido con un manifiesto proporcionado por la aplicación web).

+ +

El cache de la aplicación

+ +

{{ Note("Firefox no gestiona actualmente ningún control de versión en el cache de aplicación.") }}

+ +

Ya que múltiples aplicaciones web pueden compartir recursos (y pueden incluso compartir la misma URI) cada aplicación mantiene su propio cache (su propia memoria temporal). Sin embargo, las diferentes cache de las aplicaciones son agrupadas por su propio manifiesto de usuario y tienen unestado de actualización conjunto. El estado de actualización es uno de los siguientes:

+ +
+
idle
+
El cache de aplicación no está descargando actualizaciones.
+
checking
+
El cache está comprobando su propio manifiesto de recursos, para ver si hay uno más reciente.
+
downloading
+
El cache está actualizando su manifiesto de recursos con información nueva, ya que el anterior fue modificado.
+
+ +

{{ Fx_minversion_note(3, "Actualmente, sólo se permiten estradas de recursos. Firefox no admite aún cambios oportunistas o entradas de restitución (volver a versiones anteriores), sin embargo, es recomendable suministrar una lista blanca, si procede, para una compatibilidad futura.") }}

+ +

Recursos

+ +

El cache siempre incluye al menos un recurso, identificado por su URI, de al menos una de las siguientes categorías:

+ +
+
Entradas implícitas (Implicit entries)
+
Son recursos agregados al cache por que un contexto de navegación principal visitado por el usuario incluyó un documento que indica que el recurso está en su cache, utilizando su atributo manifest.
+
El manifiesto (manifest)
+
Este es el manifiesto de recurso en sí mismo, cargado desde la URI especificada en una entrada de html implícita con el atributo manifest. El manifiesto es descargado y tratado durante el proceso de actualización del cache de la aplicación. Las entradas implícitas han de tener el mismo protocolo, servidor y puerto que el manifiesto.
+
Entradas explícitas (Explicit entries)
+
Son recursos listados en el manifiesto del cache.
+
Entradas de restitución/recuperación (Fallback entries)
+
Son recursos que fueron listados en el manifiesto del cache como entradas "fallback". No admitido aún en Firefox.
+
Entradas oportunistas (Opportunistically cached entries)
+
Son recursos cuyas URI correspondían a un espacio de nombre de puesta en cache oportunista cuando se descargaron y que por tanto, fueron puestas automáticamente en la memoria de la aplicación. No admitido aún en Firefox.
+
Entradas dinámicas (Dynamic entries)
+
Son recursos añadidos por programa, con el método add().
+
+ +

La lista blanca en línea

+ +

La lista blanca puede contener cero o más URIs de recursos, que la aplicación web necesitará obtener del servidor en lugar de desde la memoria cache. Esto permite al modelo de seguridad del navegador proteger al usuario de posibles brechas de seguridad, limitando el acceso sólo a recursos aprobados.

+ +

{{ Note("La lista blanca no se usa en Firefox 3, sin embargo, convendría facilitar una si se necesita, tanto para tener y/o mantener la compatibilidad con versiones futuras de Firefox u otros navegadores que implementen recursos en modo desconectado.") }}

+ +

El manifiesto

+ +

Los archivos de manifiesto deben darse con el tipo MIME text/cache-manifest, y todos los recursos entregados con este tipo MIME deben seguir la sintaxis para un manifiesto de aplicación cache, según se define más abajo. Los manifiestos de cache son archivo de texto con formato 'UTF-8' y pueden, opcionalmente, incluir un carácter BOM. Las líneas nuevas pueden ser representadas por un carácter de nueva linea (U+000A) o por uno de retorno de carro (U+000D) o por ambos caracteres.

+ +

La primera línea de un manifiesto cache debe contener la cadena de orden: "CACHE MANIFEST" (con un espacio simple U´0020 entre las dos palabras), seguido por nada, espacios o caracteres de tabulador. Cualquier otro texto en esta línea será ignorado.

+ +

El resto del manifiesto debe estar compuesto por ninguna , alguna o todas las líneas siguientes:

+ +
+
Línea vacía
+
Podemos utilizar líneas vacías (sin nada) o con caracteres de espacio o tabulador.
+
Comentario
+
Los comentarios son formados por un sólo carácter "#", seguido por nada o con el texto del comentario, si se quiere se puede poner espacio/s antes (por ejemplo: # Aquí va mi comentario ). Los comentarios sólo se pueden escribir en sus propias líneas y no se pueden añadir en otras líneas.
+
Cabecera de sección
+
Las cabeceras de sección especifican qué sección del manifiesto se está manipulando. Hay tres posibles cabeceras de sección:
+
+ +
+ + + + + + + + + + + + + + + + + + + +
Cabecera de secciónDescripción
CACHE:Pasa a la sección explícita. Esta es la sección por defecto.
FALLBACK:Pasa a la sección de recuperación ("fallback"). +

{{ Note("Esta sección no está aún implementada en Firefox y será ignorada.") }}

+
NETWORK:Pasa a la sección de la lista blanca en línea. +

{{ Note("La sección de lista blanca en línea, no está aún implementada en Firefox y será ignorada, sin embargo, suministrar una lista blanca apropiada está fuertemente recomendado.") }}

+
+
+ +
+
La línea de cabecera de sección puede contener espacios vacíos, pero es obligatorio incluir el carácter ":" después del nombre.
+
Datos para la sección activa.
+
El formato de las líneas de datos cambia de sección a sección. En la sección explícita, cada línea es una URI válida o referencia IRI a un recurso del cache. Los espacios vacíos están permitidos antes y después de la URI o IRI en cada línea.
+
+ +

El manifiesto puede pasar de atrás a delante de sección a sección como quiere (de modo que cada cabecera de sección se puede usar más de una vez) y las secciones pueden estar vacías. {{ Note("Las URI relativas son relativas a la URI del manifiesto del cache, no a la URI del documento que referencia el manifiesto.") }}

+ +

Un manifiesto de ejemplo

+ +

Este es un manifiesto simple para una página web imaginaria cuyo sitio es foo.com.

+ +
CACHE MANIFEST
+# v1
+# Esto es un comentario.
+http://www.foo.com/index.html
+http://www.foo.com/header.png
+http://www.foo.com/blah/blah
+
+ +

En este ejemplo, no hay cabecera de sección, por lo que se considera que todas las líneas de datos están en la sección explícita.

+ +

El comentario "v1" está ahí por una buena razón. Ya que el cache es actualizado sólo cuando el manifiesto cambia, si cambia el recurso (por ejemplo, actualizando la imagen header.png con nuevo contenido), el archivo del manifiesto debe modificarse para advertir el navegador que necesita refrescar el cache. Se puede hacer con cualquier truco en el manifiesto, pero tener un número de versión es una buena forma de hacerlo.

+ +

Para indicar a Firefox que use aplicaciones en modo desconectado (almacenadas en el cache) para un sitio determinado, el sitio debe utilizar el atributo manifest en el elemento html, de forma parecida a:

+ +
<html manifest="http://www.foo.com/cache-manifest">
+  ...
+</html>
+
+ +

El proceso de actualización

+ +
    +
  1. Cuando Firefox visita un documento que incluye el atributo manifest, envía un evento checking al objeto window.applicationCache, y a continuación recupera el archivo del manifiesto, siguiendo las reglas HTTP apropiadas. Si la copia actualmente en cache del manifiesto está al día, se envía el evento noupdate a la applicationCache, y el proceso de actualización está completado.
    2. +
  2. Si el archivo del manifiesto no ha cambiado desde la última actualización, de nuevo, se envía el evento noupdate a la applicationCache, y el proceso de actualización está completado. Esta es la razón por la que, si los recursos cambian, el archivo del manifiesto debe modificarse para que Firefox sepa que necesita refrescar la cache de recursos.
    3. +
  3. Si el manifiesto ha cambiado, todos los archivos en el manifiesto -- así como aquellos agregados al manifiesto mediante la llamada a applicationCache.add() -- son agregados al cache temporal, siguiendo las reglas apropiadas de HTTP. Para cada archivo agregado a la cache, se envía un evento progress al objeto applicationCache. Si ocurre algún error, se envía un evento error y se detiene la actualización.
    4. +
  4. Una vez que se han recuperado todos los archivos, son movidos al cache real y se envía un evento cached al objeto applicationCache.
    5. +
+ +

Características aún sin implementar en Firefox

+ +

Debido a que el borrador estándar para HTML 5 estaba aún cambiando cuando llegamos a la fecha de congelación de características de Firefox 3, hay partes de las capacidades en modo desconectado que no han sido implementadas:

+ +
    +
  1. La especificación del WHATWG indica que todas las peticiones deben venir de la copia cache desconectada, cuando es posible, aún cuando el navegador esté conectado. Firefox sólo accede a la copia cache desconectada, cuando el navegador no está conectado. Por esta razón, la lista blanca tampoco está aún funcionando.
    2. +
  2. Firefox no mantiene actualmente copias cache separadas para las distintas aplicaciones. Las aplicaciones deberían evitar compartir recursos entre diferentes manifiestos, a no ser que no produzcan conflicto entre diferentes versiones de los recursos. En general, las aplicaciones deberían mantener copias separadas de cada recurso.
    3. +
  3. Firefox no gestiona aún entradas de recuperación o de oportunidad.
    4. +
+ +

Ver también

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/Offline_resources_in_Firefox", "fr": "fr/Ressources_hors_ligne_dans_Firefox", "ja": "ja/Offline_resources_in_Firefox", "pl": "pl/Zasoby_offline_w_Firefoksie", "zh-tw": "zh_tw/Offline_resources_on_Firefox" } ) }}

diff --git a/files/es/referencia_de_xul/index.html b/files/es/referencia_de_xul/index.html new file mode 100644 index 0000000000..9cab79c0e8 --- /dev/null +++ b/files/es/referencia_de_xul/index.html @@ -0,0 +1,317 @@ +--- +title: Referencia de XUL +slug: Referencia_de_XUL +--- +

« Referencia de XUL «

+ + + + + + + + + + + +
Todos los elementos XUL (ordenados alfabéticamente)
+

action
+ arrowscrollbox
+ assign
+ bbox
+ binding
+ bindings
+ box
+ broadcaster
+ broadcasterset
+ button
+ browser
+ checkbox
+ caption
+ colorpicker
+ column
+ columns
+ commandset
+ command
+ conditions
+ content
+ datepicker
+ deck
+ description
+ dialog
+ dialogheader
+ dropmarker
+ editor
+ grid
+ grippy
+ groupbox
+ hbox
+ iframe
+ image
+ key
+ keyset
+ label
+ listbox
+ listcell
+ listcol
+ listcols
+ listhead
+ listheader
+ listitem

+ 		+

member
+ menu
+ menubar
+ menuitem
+ menulist
+ menupopup
+ menuseparator
+ notification
+ notificationbox
+ observes
+ overlay
+ page
+ panel
+ param
+ popupset
+ preference
+ preferences
+ prefpane
+ prefwindow
+ progressmeter
+ query
+ queryset
+ radio
+ radiogroup
+ resizer
+ richlistbox
+ richlistitem
+ row
+ rows
+ rule
+ scale
+ script
+ scrollbar
+ scrollbox
+ scrollcorner
+ separator
+ spacer
+ spinbuttons
+ splitter
+ stack
+ statusbar

+ 		+

statusbarpanel
+ stringbundle
+ stringbundleset
+ tab
+ tabbrowser (Firefox-a partir de
+ Firefox 3/Gecko 1.9)
+ tabbox
+ tabpanel
+ tabpanels
+ tabs
+ template
+ textnode
+ textbox
+ textbox (Firefox autocomplete)
+ textbox (Mozilla autocomplete)
+ timepicker
+ titlebar
+ toolbar
+ toolbarbutton
+ toolbargrippy
+ toolbaritem
+ toolbarpalette
+ toolbarseparator
+ toolbarset
+ toolbarspacer
+ toolbarspring
+ toolbox
+ tooltip
+ tree
+ treecell
+ treechildren
+ treecol
+ treecols
+ treeitem
+ treerow
+ treeseparator
+ triple
+ vbox
+ where
+ window
+ wizard
+ wizardpage

+
+

Referencia de XUL

+

« Referencia de XUL «

+ + + + + + + + + + + +
Elementos XUL por categoría
+

VENTANAS

+

dialog
+ overlay
+ page
+ window
+ wizard
+ wizardpage
+ preference
+ preferences
+ prefpane
+ prefwindow

+

ESTRUCTURA
+ DE VENTANAS

+

browser
+ tabbrowser
+ editor
+ iframe
+ titlebar
+ resizer
+ statusbar
+ statusbarpanel
+ dialogheader
+ notification
+ notificationbox

+

MENUS Y VENTANAS
+ EMERGENTES

+

menubar
+ menu
+ menuitem
+ menuseparator
+ menupopup
+ panel
+ tooltip
+ popupset

+

BARRAS DE
+ HERRAMIENTAS

+

toolbar
+ toolbarbutton
+ toolbargrippy
+ toolbaritem
+ toolbarpalette
+ toolbarseparator
+ toolbarset
+ toolbarspacer
+ toolbarspring
+ toolbox

+

PESTAÑAS Y
+ AGRUPAMIENTO

+

tabbox
+ tabs
+ tab
+ tabpanels
+ tabpanel
+ groupbox
+ caption
+ separator
+ spacer

+ 		+

CONTROLES

+

button
+ checkbox
+ colorpicker
+ datepicker
+ menulist
+ progressmeter
+ radio
+ radiogroup
+ scale
+ splitter
+ textbox
+ textbox (Firefox autocomplete)
+ textbox (Mozilla autocomplete)
+ timepicker

+

TEXTO E
+ IMAGENES

+

description
+ label
+ image

+

LISTSS

+

listbox
+ listitem
+ listcell
+ listcol
+ listcols
+ listhead
+ listheader
+ richlistbox
+ richlistitem

+

ARBOLES

+

tree
+ treecell
+ treechildren
+ treecol
+ treecols
+ treeitem
+ treerow
+ treeseparator

+

 

+ 		+

DISPOSICION

+

box
+ hbox
+ vbox
+ bbox
+ deck
+ stack
+ grid
+ columns
+ column
+ rows
+ row
+ scrollbox

+

PLANTILLAS

+

action
+ assign
+ binding
+ bindings
+ conditions
+ content
+ member
+ param
+ query
+ queryset
+ rule
+ template
+ textnode
+ triple
+ where

+

SCRIPTING

+

script
+ commandset
+ command
+ broadcaster
+ broadcasterset
+ observes
+ key
+ keyset
+ stringbundle
+ stringbundleset

+

ELEMENTOS DE AYUDA

+

arrowscrollbox
+ dropmarker
+ grippy
+ scrollbar
+ scrollcorner
+ spinbuttons

+
+

Otras listas XUL

+ diff --git "a/files/es/referencia_dom_de_gecko/c\303\263mo_espacioenblanco/index.html" "b/files/es/referencia_dom_de_gecko/c\303\263mo_espacioenblanco/index.html" new file mode 100644 index 0000000000..a943896180 --- /dev/null +++ "b/files/es/referencia_dom_de_gecko/c\303\263mo_espacioenblanco/index.html" @@ -0,0 +1,476 @@ +--- +title: 'Cómo manejan el espacio en blanco HTML, CSS y el DOM' +slug: Referencia_DOM_de_Gecko/Cómo_espacioenblanco +tags: + - CSS + - DOM + - HTML + - JavaScript + - espacioenblanco + - whitespace +translation_of: Web/API/Document_Object_Model/Whitespace +--- +
{{APIRef("DOM")}}
+ +

La presencia de espacios en blanco en el DOM puede causar problemas de diseño y dificultar la manipulación del árbol de contenido de formas inesperadas, dependiendo de dónde se encuentra. Este artículo explora cuándo pueden surgir dificultades y analiza qué se puede hacer para mitigar los problemas resultantes.

+ +

¿Qué es el espacio en blanco?

+ +

El espacio en blanco es cualquier cadena de texto compuesta solo por espacios, tabulaciones o saltos de línea (para ser precisos, secuencias CRLF, retornos de carro o avances de línea). Estos caracteres te permiten formatear tu código de una manera que lo hará fácilmente legible por ti y otras personas. De hecho, gran parte de nuestro código fuente está lleno de estos caracteres de espacio en blanco, y solo tendemos a deshacernos de ellos en un paso de compilación de producción para reducir el tamaño de descarga del código.

+ +

¿HTML ignora en gran medida los espacios en blanco?

+ +

En el caso de HTML, los espacios en blanco se ignoran en gran medida: los espacios en blanco entre palabras se tratan como un solo carácter y los espacios en blanco al principio y al final de los elementos y los elementos externos se ignoran. Tomemos el siguiente ejemplo minimalista:

+ + + +
<!DOCTYPE html>
+
+    <h1>       ¡Hola      mundo!     </h1>
+ +

{{EmbedLiveSample('HTML_largely_ignores_whitespace')}}

+ +

Este código fuente contiene un par de avances de línea después del DOCTYPE y un montón de caracteres de espacio antes, después y dentro del elemento <h1>, pero al navegador no parece importarle en absoluto y solo muestra las palabras "¡Hola mundo!" como si estos caracteres no existieran en absoluto:

+ +

Esto es para que los espacios en blanco no afecten el diseño de tu página. Crear espacio alrededor y dentro de los elementos es el trabajo de CSS.

+ +

¿Qué sucede con los espacios en blanco?

+ +

Sin embargo, no solo desaparecen.

+ +

Cualquier carácter de espacio en blanco que esté fuera de los elementos HTML del documento original se representan en el DOM. Esto es necesario internamente para que el editor pueda preservar el formato de los documentos. Esto significa que:

+ + + +

Tomemos el siguiente documento, por ejemplo:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Mi Documento</title>
+</head>
+<body>
+  <h1>Encabezado</h1>
+  <p>
+    Párrafo
+  </p>
+</body>
+</html>
+
+ +

El árbol del DOM para esto se ve así:

+ +

árbol de dom equivalente al ejemplo de HTML anterior

+ +

Conservar caracteres de espacio en blanco en el DOM es útil de muchas maneras, pero hay ciertos lugares donde esto hace que ciertos diseños sean más difíciles de implementar y causa problemas a los desarrolladores que quieren iterar a través de los nodos del DOM. Veremos estas y algunas soluciones más adelante.

+ +

¿CSS cómo procesa los espacios en blanco?

+ +

La mayoría de los espacios en blanco se ignoran, no todos. En el ejemplo anterior, uno de los espacios entre "!Hola" y "mundo!" todavía existe cuando la página se representa en un navegador. Hay reglas en el motor del navegador que deciden qué caracteres de espacio en blanco son útiles y cuáles no; estos se especifican al menos en parte en el Módulo de texto CSS Nivel 3, y especialmente las partes sobre la propiedad white-space en CSS y detalles de procesamiento del espacio en blanco, pero también ofrecemos una explicación más sencilla a continuación.

+ +

Tomemos otro ejemplo realmente simple. Para hacerlo más fácil, ilustramos todos los espacios con ◦, todas las tabulaciones con ⇥ y todos los saltos de línea con ⏎:

+ +

Este ejemplo:

+ +
<h1>◦◦◦¡Hola◦⏎
+⇥⇥⇥⇥<span>◦mundo!</span>⇥◦◦</h1>
+ +

se representa en el navegador así:

+ + + +

{{EmbedLiveSample('Hidden_example')}}

+ +

El elemento <h1> contiene solo elementos en línea. De hecho contiene:

+ + + +

Debido a esto, establece lo que se llama un {{cssxref("Inline_formatting_context", "contexto de formato en línea")}}. Este es uno de los posibles contextos de representación de diseño con los que funcionan los motores del navegador.

+ +

Dentro de este contexto, el procesamiento de caracteres de espacio en blanco se puede resumir de la siguiente manera:

+ +
    +
  1. +

    Primero, todos los espacios y tabulaciones inmediatamente antes y después de un salto de línea se ignoran, por lo que, si tomamos nuestro marcado de ejemplo anterior y aplicamos esta primera regla, obtenemos:

    + + 
    <h1>◦◦◦¡Hola⏎
+<span>◦mundo!</span>⇥◦◦</h1>
    +
    2. +
  2. +

    A continuación, todos los caracteres de tabulación se tratan como caracteres de espacio, por lo que el ejemplo se convierte en:

    + + 
    <h1>◦◦◦¡Hola⏎
+<span>◦mundo!</span>◦◦◦</h1>
    +
    3. +
  3. +

    A continuación, los saltos de línea se convierten en espacios:

    + + 
    <h1>◦◦◦¡Hola◦<span>◦mundo!</span>◦◦◦</h1>
    +
    4. +
  4. +

    Después de eso, cualquier espacio inmediatamente después de otro espacio (incluso a través de dos elementos en línea separados) se ignora, por lo que terminamos con:

    + + 
    <h1>◦¡Hola◦<span>mundo!</span>◦</h1>
    +
    5. +
  5. +

    Y finalmente, las secuencias de espacios al principio y al final de una línea se eliminan, por lo que eventualmente obtenemos esto:

    + + 
    <h1>¡Hola◦<span>mundo!</span></h1>
    +
    6. +
+ +

Es por eso que las personas que visitan la página web simplemente verán la frase "¡Hola mundo!" muy bien escrita en la parte superior de la página, en lugar de un "!Hola" con una sangría extraña, seguido de un "mundo!" en la línea debajo de esa.

+ +
+

Nota: Firefox DevTools ha admitido el resaltado de nodos de texto desde la versión 52, lo que facilita ver exactamente qué contenido hay dentro de los nodos de espacios en blanco. Los nodos de espacios en blanco puros están marcados con una etiqueta "whitespace".

+
+ +

Espacio en blanco en contextos de formato de bloque

+ +

Anteriormente, solo miramos elementos que contienen elementos en línea y contextos de formato en línea. Si un elemento contiene al menos un elemento de bloque, entonces establece lo que se llama un {{cssxref("Block_formatting_context", "contexto de formato de bloque")}}.

+ +

En este contexto, los espacios en blanco se tratan de manera muy diferente. Veamos un ejemplo para explicar cómo. Hemos marcado los espacios en blanco como antes.

+ +
<body>⏎
+⇥<div>◦◦¡Hola◦◦</div>⏎
+⏎
+◦◦◦<div>◦◦mundo!◦◦</div>◦◦⏎
+</body>
+ +

Tenemos 3 nodos de texto que contienen solo espacios en blanco, uno antes del primer <div>, uno entre los 2 <div>s y uno después del segundo <div>.

+ +

Esto se renderiza así:

+ + + +

{{EmbedLiveSample('Hidden_example_2')}}

+ +

Podemos resumir cómo se maneja el espacio en blanco aquí de la siguiente manera (puede haber algunas pequeñas diferencias en el comportamiento exacto entre los navegadores, pero básicamente, esto funciona):

+ +
    +
  1. +

    Debido a que estamos dentro de un contexto de formato de bloque, todo debe ser un bloque, por lo que nuestros 3 nodos de texto también se convierten en bloques, al igual que los 2 <div>s. Los bloques ocupan todo el ancho disponible y se apilan unos encima de los otros, lo cual significa que terminamos con un diseño compuesto por esta lista de bloques:

    + + 
    <block>⏎⇥</block>
+<block>◦◦¡Hola◦◦</block>
+<block>⏎◦◦◦</block>
+<block>◦◦mundo!◦◦</block>
+<block>◦◦⏎</block>
    +
    2. +
  2. +

    Esto luego se simplifica aún más aplicando las reglas de procesamiento para espacios en blanco en contextos de formato en línea a estos bloques:

    + + 
    <block></block>
+<block>¡Hola</block>
+<block></block>
+<block>mundo!</block>
+<block></block>
    +
    3. +
  3. +

    Los 3 bloques vacíos que tenemos ahora no van a ocupar ningún espacio en el diseño final, porque no contienen nada, así que terminaremos con solo 2 bloques ocupando espacio en la página. Las personas que visitan la página web ven las palabras "!Hola" y "mundo!" en 2 líneas separadas, ya que esperarías que se distribuyeran 2 <div>s. El motor del navegador esencialmente ha ignorado todos los espacios en blanco que se agregaron en el código fuente.

    +
    4. +
+ +

Espacios entre elementos en línea y bloques en línea

+ +

Ahora analicemos algunos problemas que pueden surgir debido a los espacios en blanco y qué se puede hacer al respecto. En primer lugar, veremos qué sucede con los espacios entre los elementos en línea y de bloque en línea. De hecho, ya vimos esto en nuestro primer ejemplo, cuando describimos cómo se procesan los espacios en blanco dentro de los contextos de formato en línea.

+ +

Dijimos que había reglas para ignorar la mayoría de los caracteres, pero que los caracteres que separan palabras permanecen. Cuando solo se trata de elementos a nivel de bloque como <p> que solo contienen elementos en línea como <em>, <strong>, <span>, etc., normalmente no te importa esto porque el espacio en blanco adicional que llega al diseño es útil para separar las palabras en la oración.

+ +

Sin embargo, se vuelve más interesante cuando comienzas a usar elementos inline-block. Estos elementos se comportan como elementos en línea en el exterior y como bloques en el interior, y a menudo se utilizan para mostrar piezas de la IU más complejas que solo texto, una al lado de la otra en la misma línea, por ejemplo, elementos del menú de navegación.

+ +

Debido a que son bloques, muchas personas esperan que se comporten como tales, pero en realidad no es así. Si hay espacios en blanco de formato entre elementos en línea adyacentes, esto dará como resultado un espacio en el diseño, al igual que los espacios entre palabras en el texto.

+ +

Considera este ejemplo (nuevamente, los espacios en blanco en el HTML están marcados para que sean visibles):

+ +
.people-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.people-list li {
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  background: #f06;
+  border: 1px solid;
+}
+
+ +
<ul class="people-list">⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+</ul>
+ +

Esto se traduce de la siguiente manera:

+ + + +

{{EmbedLiveSample('Hidden_example_3')}}

+ +

Probablemente no desees los espacios entre los bloques — dependiendo del caso de uso (¿esta es una lista de avatares o botones de navegación horizontales?), Probablemente desees que los lados del elemento estén alineados entre sí y poder controlar cualquier espacio tú mismo.

+ +

El Inspector HTML de Firefox DevTools resaltará los nodos de texto y también te mostrará exactamente qué áreas están ocupando los elementos, lo que es útil si te preguntas qué está causando el problema y tal vez estés pensando que tienes un margen adicional allí o algo así.

+ +

Espacio en blanco en Devtools

+ +

Hay algunas formas de solucionar este problema:

+ +

Utiliza Flexbox para crear la lista horizontal de elementos en lugar de probar una solución de inline-block. Esto se encarga de todo por ti y definitivamente es la solución preferida:

+ +
ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+ +

Si necesitas confiar en inline-block, puedes establecer el {{cssxref("font-size")}} de la lista a 0. Esto solo trabaja si tus bloques no tienen el tamaño ems (según el font-size, por lo que el tamaño del bloque también terminaría siendo 0). rems sería una buena opción aquí:

+ +
ul {
+  font-size: 0;
+  ...
+}
+
+li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  ...
+}
+
+ +

O puedes establecer un margen negativo en los elementos de la lista:

+ +
li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  margin-right: -0.25rem;
+}
+ +

También puedes resolver este problema colocando los elementos de tu lista en la misma línea en la fuente, lo cual hace que los nodos de espacios en blanco no se creen en primer lugar:

+ +
<li></li><li></li><li></li><li></li><li></li>
+ +

Recorrido del DOM y el espacio en blanco

+ +

Al intentar realizar una manipulación del DOM en JavaScript, también puedes encontrar problemas debido a los nodos de espacios en blanco. Por ejemplo, si tienes una referencia a un nodo padre y deseas afectar su primer elemento hijo usando Node.firstChild, si hay un nodo de espacio en blanco deshonesto justo después de la etiqueta de apertura principal, no obtendrás el resultado que esperabas. Se seleccionaría el nodo de texto en lugar del elemento al que deseas afectar.

+ +

Veamos otro ejemplo, si tienes un determinado subconjunto de elementos en los que deseas hacer algo en función de si están vacíos (no tienen nodos secundarios) o, no puedes verificar si cada elemento está vacío usando algo como Node.hasChildNodes(), pero nuevamente, si algún elemento destino contiene nodos de texto, podrías terminar con resultados falsos.

+ +

Funciones auxiliares de espacios en blanco

+ +

El siguiente código JavaScript define varias funciones que facilitan el manejo de espacios en blanco en el DOM:

+ +
/**
+ * En todo, el espacio en blanco se define como uno de los caracteres
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Esto no usa la "\s" de Javascript porque eso incluye
+ * espacios irrompibles (y también algunos otros caracteres).
+ */
+
+
+/**
+ * Determina si el contenido de texto de un nodo es completamente de espacios en blanco.
+ *
+ * @param nod  Un nodo que implementa la interfaz | CharacterData | (es decir,
+ *             un nodo |Text|, |Comment| o |CDATASection|
+ * @return     True si todo el contenido de texto de |nod| es espacio en blanco,
+ *             de lo contrario false.
+ */
+function is_all_ws( nod )
+{
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Determina si un nodo debe ser ignorado por las funciones del iterador.
+ *
+ * @param nod  Un objeto implementando la interfaz |Node| de DOM1.
+ * @return     true si el nodo es:
+ *                1) Un nodo |Text| en que todo es espacio en blanco
+ *                2) Un nodo |Comment|
+ *             y de lo contrario false.
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // Un nodo comment
+         ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nodo text, todo es eeb
+}
+
+/**
+ * Versión de |previousSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |previousSibling| es una propiedad
+ * de todos los nodos DOM que devuelve el nodo hermano, el nodo que es
+ * un hijo del mismo padre, que ocurre inmediatamente antes del
+ * nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano anterior más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |nextSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |lastChild| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |lastChild| es una propiedad
+ * de todos los nodos del DOM que da el último de los nodos contenidos
+ * directamente en el nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El último hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |firstChild| que omite los nodos que son completamente
+ * espacios en blanco y comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El primer hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |data| que no incluye espacios en blanco al principio
+ * y finaliza y normaliza todos los espacios en blanco a un solo espacio.  (Normalmente
+ * |data| es una propiedad de los nodos de texto que proporciona el texto del nodo).
+ *
+ * @param txt  El nodo de texto cuyos datos se deben devolver
+ * @return     Una cadena que proporciona el contenido del nodo de texto con
+ *             espacios en blanco colapsados.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+
+ +

Ejemplo

+ +

El siguiente código demuestra el uso de las funciones anteriores. Itera sobre los hijos de un elemento (cuyos hijos son todos elementos) para encontrar aquel cuyo texto es "Este es el tercer párrafo", y luego cambia el atributo de clase y el contenido de ese párrafo.

+ +
var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "Este es el tercer párrafo.")
+  {
+    cur.className = "magic";
+    cur.firstChild.textContent = "Este es el párrafo mágico.";
+  }
+  cur = node_after(cur);
+}
+
diff --git a/files/es/referencia_dom_de_gecko/ejemplos/index.html b/files/es/referencia_dom_de_gecko/ejemplos/index.html new file mode 100644 index 0000000000..33f0e9e2b7 --- /dev/null +++ b/files/es/referencia_dom_de_gecko/ejemplos/index.html @@ -0,0 +1,367 @@ +--- +title: Ejemplos +slug: Referencia_DOM_de_Gecko/Ejemplos +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Web/API/Document_Object_Model/Examples +--- +

En este capítulo se brindan ejemplos relativamente extensos que ilustran el uso del DOM para el desarrollo web y XML. Siempre que sea posible, usaremos las APIs, trucos y patrones comunes en JavaScript para la manipulación del objeto document.

+ +

Ejemplo 1: Altos y anchos

+ +

El ejemplo siguiente muestra el uso de las propiedades de alto (height) y ancho (width) junto a imágenes de dimensiones variadas:

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="es">
+
+<head>
+<title>Ejemplo de height/width</title>
+<script type="text/javascript">
+function iniciar()
+{
+  var arrImages = new Array(3);
+  arrImages[0] = document.getElementById("imagen1");
+  arrImages[1] = document.getElementById("imagen2");
+  arrImages[2] = document.getElementById("imagen3");
+  var objOutput = document.getElementById("salida");
+  var strHtml = "<ul>";
+  for (var i = 0; i < arrImages.length; i++)
+    strHtml += "<li>imagen" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "<\/li>";
+  strHtml += "<\/ul>";
+  salida.innerHTML = strHtml;
+}
+</script>
+</head>
+<body onload="iniciar();">
+
+<p>La 1ª imagen:
+- alto (height): no
+- ancho (width): no
+- estilo (style): no
+    <img id="imagen1" src="http://www.mozilla.org/images/mozilla-banner.gif">
+</p>
+<p>La 2ª imagen:
+- height="50"
+- width="500"
+- style: no
+    <img id="imagen2" src="http://www.mozilla.org/images/mozilla-banner.gif"
+         height="50" width="500">
+</p>
+<p>La 3ª imagen:
+- height y width: no
+- style="height: 50px; width: 500px;": sí
+    <img id="imagen3" src="http://www.mozilla.org/images/mozilla-banner.gif"
+         style="height: 50px; width: 500px;">
+</p>
+
+<div id="salida"> </div>
+</body>
+</html>
+
+ +

height y width son además propiedades de los elementos OBJECT y APPLET.

+ +

Ejemplo 2: Atributos de una imagen

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="es">
+
+<head>
+<title>Modificación del borde de una imagen</title>
+<script type="text/javascript">
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+</script>
+</head>
+
+<body>
+<p>
+  <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
+height="100" alt="test de borde">
+</p>
+
+<form name="Formulario">
+  <p><input type="button" value="Definir un borde de 20px"
+onclick="setBorderWidth(20);"> <input type="button" value="Definir un borde de 5px"
+onclick="setBorderWidth(5);"></p>
+</form>
+
+</body>
+</html>
+
+ +

Ejemplo 3: Manipulación de estilos

+ +

En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento párrafo HTML son accedidas utilizando el objeto estilo en el elemento y aquellas propiedades de estilo CSS del objeto, pueden ser entregadas y establecidas desde el DOM. En este caso, está manipulando los estilos directamente. En el siguiente ejemplo (ver ejemplo 4), puede utilizar las hojas de estilo y sus reglas para cambiar estilos para el documento entero.

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+
+<head>
+<title>Changing color and font-size example</title>
+<script type="text/javascript">
+function changeText() {
+	var p = document.getElementById("pid");
+	p.style.color = "blue"
+	p.style.fontSize = "18pt"
+}
+</script>
+</head>
+<body>
+<p id="pid"
+onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
+<form>
+<p><input value="rec" type="button" onclick="changeText();"></p>
+</form>
+</body>
+</html>
+
+ +

Ejemplo 4: Utilización de las hojas de estilo

+ +

La propiedad de las hojas de estilo en un objeto de documento muestra una lista de las hojas de estilo que acompañan a ése documento. Usando los objetos de la hoja de estilo, del estilo y de las reglas de CSS se puede acceder individualmente a esas hojas de estilo y sus reglas, como se demuestra en este ejemplo, el cual muestra todos los selectores de reglas de estilo en la consola.

+ +
ss = document.styleSheets;
+for(i=0; i<ss.length; i++)
+ {
+ for(j=0; j<ss[0].cssRules.length; j++)
+  {
+  dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+ }
+
+ +

Para un documento con una sola hoja de estilo en la cual son definidas las tres reglas siguientes:

+ +
BODY { background-color: darkblue; }
+P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

El script sale así:

+ +
BODY
+P
+#LUMPY
+
+ +

Ejemplo 5: Propagación del evento

+ +

Este ejemplo muestra de una forma muy simple como los eventos se inician y son gestionados en el DOM. Cuando el cuerpo (body ) de ese documento HTML se carga,un evento listener es registrado con la columna superior de la TABLA. El evento listener maneja el evento ejecutando la función stopEvent, que cambia el valor en el final de la celda de la tabla.

+ +

Sin embargo, stopEvent también llama a un método del objeto evento, event.stopPropagation, que mantiene el evento del burbujeo a continuación dentro del DOM. Note que la tabla misma tiene un manejador de evento onclick que muestra un mensaje cuando la tabla es seleccionada. Pero el método stopEvent ha detenido la propagación, y así despues los datos en la tabla son actualizados, la fase de evento es efectivamente finalizada, y un cuadro de alerta es mostrado para confirmar esto.

+ +
<html>
+<head>
+<title>Propagación del evento</title>
+
+<style type="text/css">
+ #t-daddy { border: 1px solid red }
+ #c1 { background-color: pink; }
+</style>
+
+<script type="text/javascript">
+
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hola";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("La propagación del evento se ha parado.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+</script>
+</head>
+
+<body onload="load();">
+
+<table id="t-daddy" onclick="alert('hi');">
+ <tr id="tbl1">
+  <td id="c1">uno</td>
+ </tr>
+ <tr>
+  <td id="c2">dos</td>
+ </tr>
+</table>
+
+</body>
+</html>
+
+ +

Ejemplo 6: Conseguir el estilo computado (getComputedStyle)

+ +

Este ejemplo demuestra como el método window.getComputedStyle puedes utilizarse para obtener los estilos de un elemento que no son especificados en el atributo style o con JavaScript (por ejemplo, element.style.backgroundColor="rgb(173, 216, 230)"). Estos últimos tipos de estilos se pueden recuperar con el atributo element.style, las propiedades del cual están en la lista de propiedades de CSS del DOM.

+ +

getComputedStyle() devuelve un objeto ComputedCSSStyleDeclaration, cuyas propiedades de estilo individuales pueden ser referenciadas con este método del objeto getPropertyValue(), el siguiente documento de ejemplo lo muestra.

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+
+<head>
+ <title>Ejemplo de ''getComputedStyle''</title>
+
+ <script type="text/javascript">
+   function cStyles()
+  {
+   var RefDiv = document.getElementById("d1");
+
+   var txtHeight = document.getElementById("t1");
+   var h_style =
+document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+   txtHeight.value = h_style;
+
+   var txtWidth = document.getElementById("t2");
+   var w_style =
+document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+   txtWidth.value = w_style;
+
+   var txtBackgroundColor = document.getElementById("t3");
+   var b_style =
+document.defaultView.getComputedStyle(RefDiv,
+null).getPropertyValue("background-color");
+   txtBackgroundColor.value = b_style;
+  }
+ </script>
+
+ <style type="text/css">
+   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230);
+height: 20px; max-width: 20px; }
+ </style>
+
+</head>
+
+<body>
+
+<div id="d1">&nbsp;</div>
+
+<form action="">
+<p><button type="button" onclick="cStyles();">getComputedStyle</button>
+  height<input id="t1" type="text" value="1">
+  max-width<input id="t2" type="text" value="2">
+  bg-color<input id="t3" type="text" value="3"></p>
+</form>
+
+</body>
+</html>
+
+ +

Ejemplo 7: Mostrar las propiedades del objeto de evento

+ +

Este ejemplo utiliza métodos del DOM para mostrar todas las propiedades del evento de window.onload y sus valores en una tabla. Muestra además una cómoda técnica del uso de un buclefor...in para iterar sobre las propiedades de un objeto y conseguir sus valores.

+ +

Las propiedades de los objetos de evento difieren bastante entre los navegadores, la especificación W3C de los eventos del DOM 2 enumera las propiedades estándares, sin embargo algunos navegadores han extendido estas diferencias.

+ +

El siguiente código colocado dentro de un nuevo archivo de texto y cargado en un surtido de navegadores, sorprenderá por las diferencias de los números y nombres de propiedades y/o al ponerle más elementos a la página y llamar esa función desde diferentes gestores de evento.

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<title>Muestra las propiedades del evento</title>
+
+<style type="text/css">
+  table {border-collapse: collapse;}
+  thead {font-weight: bold;}
+  td {padding: 2px 10px 2px 10px;}
+  .odd {background-color: #efdfef;}
+  .even {background-color: #ffffff;}
+</style>
+
+<script type="text/javascript">
+
+function showEventProperties(e)
+{
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var e = e || window.event;
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Propriété', 'Valeur'];
+  var len = lableList.length;
+
+  for (var i=0; i<len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+window.onload = function(event){
+  showEventProperties(event);
+}
+</script>
+
+<h1>Propiedades del objeto evento del DOM<span id="eventType"></span></h1>
+
+ +

Ejemplo 8: Utilización del interfaz de tabla del DOM

+ +

La interfaz HTMLTableElement del DOM provee algunos métodos de conveniencia para crear y manipular tablas. Dos métodos usados frecuentemente son table.insertRow y row.insertCell.

+ +

Para agregar una columna y algunas celdas a una tabla existente:

+ +
<table id="table0">
+ <tr>
+  <td>Row 0 Cell 0</td>
+  <td>Row 0 Cell 1</td>
+ </tr>
+</table>
+
+<script type="text/javascript">
+
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell, text;
+for (var i=0; i<2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+
+</script>
+
+ +

Notas

+ + diff --git a/files/es/referencia_dom_de_gecko/eventos/index.html b/files/es/referencia_dom_de_gecko/eventos/index.html new file mode 100644 index 0000000000..fce2530535 --- /dev/null +++ b/files/es/referencia_dom_de_gecko/eventos/index.html @@ -0,0 +1,72 @@ +--- +title: Eventos y el DOM +slug: Referencia_DOM_de_Gecko/Eventos +tags: + - DOM + - Guía +translation_of: Web/API/Document_Object_Model/Events +--- +

Introducción

+ +

Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz Event, así como las interfaces para el registro de eventos en los nodos del DOM, y los oyentes de eventos, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.

+ +

Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador DOM Level 3 Events.

+ +

Vea también el Ejemplo 5: Propagación de eventos en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.

+ +

Registrando oyentes de eventos

+ +

Hay 3 formas de registrar gestores de eventos para un elemento DOM.

+ +

EventTarget.addEventListener

+ +
// Se supone que myButton es un elemento de botón
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+
+ +

Este es el método que debe usar en las páginas web modernas. 

+ +

Nota: Internet Explorer 6-8 no admite este método, ofreciendo una API similar {{domxref("EventTarget.attachEvent")}} en su lugar. Para la compatibilidad entre navegadores utilice una de las muchas bibliotecas de JavaScript disponibles.

+ +

Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.

+ +

Atributo HTML

+ +
<button onclick="alert('Hello world!')">
+
+ +

El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

+ +

Debe evitarse esta forma. Hace que el marcado sea más grande y menos legible. El comitido del contenido/estructura y del comportamiento no están bien separadas, por lo que es más difícil encontrar un error.

+ +

Propiedades del elemento DOM

+ +
// Se supone que myButton es un elemento de botón
+myButton.onclick = function(event){alert('Hello world');};
+
+ +

La función se puede defirnir para que tome un parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

+ +

El problema con este método es que solo se puede establecer un gestor por elemento y por evento.

+ +

Accediendo a las Interfaces de eventos

+ +

Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al objeto window, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.

+ +

Se puede acceder a la interfaz {{domxref ("Evento")}} desde la función del gestor, a través del objeto de evento pasado como primer argumento. El siguiente ejemplo simple muestra cómo se pasa un objeto de evento a la función del controlador de eventos, y se puede usar desde dentro de una de esas funciones.

+ +
function foo(evt) {
+  // al parámetro evt se le asigna automáticamente el objeto event
+  alert(evt);
+}
+table_el.onclick = foo;
+
+ + + + diff --git a/files/es/referencia_dom_de_gecko/index.html b/files/es/referencia_dom_de_gecko/index.html new file mode 100644 index 0000000000..0f3a2a7f75 --- /dev/null +++ b/files/es/referencia_dom_de_gecko/index.html @@ -0,0 +1,91 @@ +--- +title: Referencia DOM de Gecko +slug: Referencia_DOM_de_Gecko +tags: + - DOM + - NecesitaRevisiónTécnica + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +--- +

+« Referencia DOM de Gecko +


+Aquí está la tabla de contenido para la referencia DOM de Gecko. +

+

Prefacio

+ +

Introducción

+ +

La referencia al elemento (element) de DOM

+ +

La referencia a la ventana (window) de DOM

+ +

La referencia al document de DOM

+ +

La referencia al event de DOM

+ +

La referencia al estilo (style) de DOM

+ +

La referencia al rango (range) de DOM

+ +

La referencia a la selección (selection) de DOM

+ +

Interfaz del elemento formulario (form) en HTML

+ +

Interfaz del elemento tabla (table) en HTML

+ +

Ejemplos DOM

+ +
+

Información sobre el documento original

+ +
+{{ languages( { "en": "en/Gecko_DOM_Reference", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "pl": "pl/Dokumentacja_Gecko_DOM", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }} diff --git "a/files/es/referencia_dom_de_gecko/introducci\303\263n/index.html" "b/files/es/referencia_dom_de_gecko/introducci\303\263n/index.html" new file mode 100644 index 0000000000..5c604a7a6c --- /dev/null +++ "b/files/es/referencia_dom_de_gecko/introducci\303\263n/index.html" @@ -0,0 +1,248 @@ +--- +title: Introducción +slug: Referencia_DOM_de_Gecko/Introducción +tags: + - DOM + - Gecko + - Manuales + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model/Introduction +--- +

 

+ +

Ésta sección da una breve introducción conceptual del DOM: qué es, cómo proporciona la estructura para los documentos HTML y XML, cómo se accede a él, y cómo esta "API" presenta la información de referencia y ejemplos.

+ +

¿Qué es el DOM?

+ +

El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.

+ +

Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guardar y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.

+ +

El W3C DOM estándar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones más allá del estándar W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos pueden ser consultados por navegadores que tienen DOMs diferentes.

+ +

Por ejemplo, el DOM de W3C especifica que el método getElementsByTagName en el código de abajo debe devolver una lista de todos los elementos <p> del documento:

+ +
paragraphs = document.getElementsByTagName ("p");
+// paragraphs[0] es el primer elemento <p>
+// paragraphs[1] es el segundo elemento <p>, etc.
+alert (paragraphs [0].nodeName);
+
+ +

Todas las propiedades, métodos y eventos disponibles para la manipulación y la creación de páginas web está organizado dentro de objetos. Un ejemplo: el objeto document representa al documento mismo, el objeto table hace funcionar la interfaz especial HTMLTableElement del DOM para acceder a tablas HTML, y así sucesivamente. Ésta documentación procura una relación objeto-por-objeto del DOM que funciona con los navegadores basados en Gecko.

+ +

DOM y JavaScript

+ +

El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es JavaScript. Es decir, es escrito en JavaScript pero utiliza el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento, los títulos de las tablas, el texto dentro de las celdas de las tablas"- es parte del modelo de objeto del documento para cada documento, así se puede acceder y manipularlos utilizando el DOM y un lenguaje de escritura, como JavaScript.

+ +

En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se desarrollaron como entidades separadas. El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así:

+ +

API(web o página XML) = DOM + JS(lenguaje de script)

+ +

El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, hace que la presentación estructural del documento sea disponible desde un simple y consistente API. Aunque en este manual nos centramos exclusivamente en JavaScript, la directrices del DOM pueden construirse para cualquier lenguaje, así lo demuestra el siguiente ejemplo de Python:

+ +
# Ejemplo DOM de Python
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # Propiedad DOM del objeto document;
+p_list = doc.getElementsByTagName("para");
+ +

¿Cómo se accede al DOM?

+ +

No se tiene que hacer nada especial para empezar a utilizar el DOM. Los diferentes navegadores tienen directrices DOM distintas, y éstas directrices tienen diversos grados de conformidad al actual estándar DOM (un tema que se intenta evitar en este manual), pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las páginas web al script.

+ +

Cuando se crea un script –esté en un elemento <SCRIPT> o incluido en una página web por la instrucción de cargar un script– inmediatamente está disponible para usarlo con el API, accediendo así a los elementos document o window, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función alert() desde el objeto window, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.

+ +
<body onload="window.alert('Bienvenido a mi página!');">
+
+ +

Aparte del elemento <script> en el cual JavaScript es definido, el ejemplo siguiente muestra la función a ejecutar cuando el documento se está cargando (y que el DOM completo es disponible para su uso). Esta función crea un nuevo elemento H1, le pone texto y después lo agrega al árbol del documento:

+ +
<html>
+  <head>
+    <script>
+       // ejecuta esta función cuando se cargue el documento
+       window.onload = function() {
+
+         // crea dinámicamente un par de elementos HTML en una página vacia
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("el texto que desee");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Tipos de datos importantes

+ +

Esta parte intenta describir, de la manera más simple posible, los diferentes objetos y tipos. Pero hay que conocer una cantidad de tipos de datos diferentes que son utilizados por el API. Para simplificarlo, los ejemplos de sintaxis en esta API se refieren a nodos como elements, a una lista de nodos como nodeLists (o simples elementos) y a nodos de atributo como attributes.

+ +

La siguiente tabla describe brevemente estos tipos de datos.

+ + + + + + + + + + + + + + + + + + + + + + + + +
documentCuando un miembro devuelve un objeto del tipo document (por ejemplo, la propiedad ownerDocument de un elemento devuelve el documento "document" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo La referencia al documento (document) de DOM lo explica con más detalles.
elementelement se refiere a un elemento o a un nodo de tipo de elemento "element" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método document.createElement() devuelve un objeto referido a un nodo, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. Los objetos element ponen en funcionamiento a la interfaz Element del DOM y también a la interfaz de nodo "Node" más básica, las cuales son incluidas en esta referencia.
nodeListUna "nodeList" es una serie de elementos, parecido a lo que devuelve el método document.getElementsByTagName(). Se accede a los items de la nodeList de cualquiera de las siguientes dos formas: +
    +
  • list.item (1)
    • +
  • lista {{mediawiki.external (1)}}
    • +
+ +

Ambas maneras son equivalentes. En la primera, item() es el método del objeto nodeList. En la última se utiliza la típica sintaxis de acceso a listas para llegar al segundo ítem de la lista.

+
attributeCuando un atributo ("attribute") es devuelto por un miembro (por ej., por el método createAttribute()), es una referencia a un objeto que expone una interfaz particular (aunque limitada) a los atributos. Los atributos son nodos en el DOM igual que los elementos, pero no suelen usarse así.
NamedNodeMapUn namedNodeMap es una serie, pero los ítems son accesibles tanto por el nombre o por un índice, este último caso es meramente una conveniencia para enumerar ya que no están en ningún orden en particular en la lista. Un NamedNodeMap es un método de ítem() por esa razón, y permite poner o quitar ítems en un NamedNodeMap
+ +

Interfaces del DOM

+ +

Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales cosas que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento HTML form toma la propidedad name desde la interfaz HTMLFormElement pero que las propiedades className se toman desde la propia interfaz HTMLElement. En ambos casos, la propiedad está sólo en el objeto form.

+ +

Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.

+ +

Interfaces y objetos

+ +

En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (table) desde muchas interfaces diversas. El objeto table, por ejemplo, pone en funcionamiento una Interfaz especial del elemento table HTML, la cual incluye métodos como createCaption y insertRow. Pero como también es un elemento HTML, table pone en marcha a la interfaz del Element descrita en el capítulo La referencia al elemento del DOM. Y finalmente, puesto que un elemento HTML es también, por lo que concierna al DOM, un nodo en el árbol de nodos que hace el modelo de objeto para una página web o XML, el elemento de table hace funcionar la interfaz más básica de Node, desde el cual deriva Element.

+ +

La referencia a un objeto table, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/interfaz Element
+for (var i = 0; i < tableAttrs.length; i++) {
+  // interfaz HTMLTableElement: atributo border
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// interfaz HTMLTableElement: atributo summary
+table.summary = "nota: borde aumentado";
+ +

Interfaces esenciales en el DOM

+ +

Esta sección lista las interfaces más comúnmente utilizadas en el DOM. La idea no es describir qué hacen estas APIs pero sí dar una idea de las clases de métodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso común de esta API se encuentran en el capítulo Ejemplos DOM al final de este manual.

+ +

document y window son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto window representa algo como podría ser el navegador, y el objeto document es la raíz del documento en sí. Element hereda de la interfaz genérica Node, y juntos, estas dos interfaces proporcionan muchos métodos y propiedades utilizables sobre los elementos individuales. Éstos elementos pueden igualmente tener interfaces específicas según el tipo de datos representados, como en el ejemplo anterior del objeto table. Lo siguiente es una breve lista de los APIS comunes en la web y en las páginas escritas en XML utilizando el DOM.

+ + + +

Probando el API del DOM

+ +

Ésta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son páginas HTML enteras, con el acceso del DOM a un elemento de <script>, la interfaz necesaria (por ejemplo, botones) para la ejecución del script en un formulario, y también que los elementos HTML sobre los cuales opera el DOM se listen. Según el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.

+ +

No es el caso donde los ejemplos son muchos más concisos. Para la ejecución de estos ejemplos que sólo demuestran la relación básica entre la interfaz y los elementos HTML, resulta útil tener una página de prueba en la cual las interfaces serán fácilmente accesibles por los scripts. La muy simple página siguiente proporciona en las cabeceras un elemento de script en el cual se pondrán las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y también manipular, así como la interfaz web necesaria para llamar esas funciones desde el navegador.

+ +

Para probar y ver como trabajan en la plataforma del navegador las interfaces del DOM, esta página de prueba o una nueva similar son factibles. El contenido de la función test() se puede actualizar según la necesidad, para crear más botones o poner más elementos.

+ +
<html>
+  <head>
+    <title>Pruebas DOM</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr, value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>texto</tt></b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">negro
+          <option value="darkblue">azul oscuro
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">blanco
+          <option value="lightgrey">gris
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">azul
+          <option value="green">verde
+        </select>  <small>
+        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+        (sample link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+ +

La creación de una página de prueba con una paleta de botones, campos de texto u otros elementos HTML, permitirá testar una gran cantidad de interfaces en un mismo documento, por ejemplo una serie de propiedades que afectan a los colores de una página web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.

+ +

Figura 0.1 Muestra DOM página de prueba

+ +

+ +

En este ejemplo, los menúes desplegables actualizan dinámicamente los aspectos de la página web accesibles al DOM como el color de fondo (bgColor), de los hiper-enlaces (aLink), y el del texto (text). El hecho de diseñar páginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilización eficaz del DOM.

+ +

Otros enlaces

+ + + +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
diff --git a/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html b/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html new file mode 100644 index 0000000000..cf8a94cd4a --- /dev/null +++ b/files/es/referencia_dom_de_gecko/localizando_elementos_dom_usando_selectores/index.html @@ -0,0 +1,50 @@ +--- +title: Localizando elementos DOM usando selectores +slug: Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores +tags: + - DOM + - Necesita actualizacion para principiantes + - Principiante +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +

Los selectores api proveen metodos que hacen mas facil y rapido devolver elementos del nodo {{domxref("Element")}} del DOM mediante emparejamiento de un conjunto de selectores. Esto es mucho mas rapido que las tecnicas anteriores, donde fuera necesario, por ejemplo usar un loop en un codigo JavaScript para localizar el item especifico que quisieras encontrar.

+ +

Interfaz de NodeSelector

+ +

Esta especificación añade dos nuevos metodos a cualquier objeto implementando el {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}} interfaces:

+ +
+
{{domxref("Element.querySelector", "querySelector()")}}
+
Devuelve la primera coincidencia del (elemento) {{domxref("Element")}} nodo dentro de las subramas del nodo. Sino se encuentra un nodo coincidente, se devuelve null .
+
{{domxref("Element.querySelectorAll", "querySelectorAll()")}}
+
devuelve un listado de nodos {{domxref("NodeList")}} conteniendo todos los elementos del nodo coincidentes( Element) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio NodeList sino se encuentran coincidencias.
+
+ +
Note: El {{domxref("NodeList")}} devuelto por {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.
+ +

Encontraras ejemplos y detalles leyendo el documento de metodos {{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}, Tambien en el articulo Code snippets for querySelector.

+ +

Selectors

+ +

El metodo de selectores acepta uno o mas selectores seperados por comas entre cada selector  para determinar que elemento o elementos deben ser devueltos. por ejemplo para seleccionar todos los elementos (p) del parrafo en un documento donde la clase CSS sea tanto warning or note, podes hacer lo siguiente:

+ +
var special = document.querySelectorAll( "p.warning, p.note" );
+ +

tambien por usar query para etiquetas id. Por ejemplo:

+ +
var el = document.querySelector( "#main, #basic, #exclamation" );
+ +

luego de ejecutar el codigo de arriba, la variable el contiene el primer elemento del documento, su ID puede ser uno de los siguentes  main, basic, or exclamation.

+ +

Podes usar cualquier selector CSS con los metodos querySelector() y querySelectorAll().

+ +

Ver tambien.

+ + diff --git a/files/es/referencia_dom_de_gecko/prefacio/index.html b/files/es/referencia_dom_de_gecko/prefacio/index.html new file mode 100644 index 0000000000..9295f66869 --- /dev/null +++ b/files/es/referencia_dom_de_gecko/prefacio/index.html @@ -0,0 +1,75 @@ +--- +title: Prefacio +slug: Referencia_DOM_de_Gecko/Prefacio +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +--- +

« Referencia DOM de Gecko

+ +

Sobre Esta referencia

+ +

Esta parte describe el manual en sí: para quién está hecho, cómo se presenta la información y cómo se pueden usar los ejemplos de la referencia en el desarrollo propio de DOM.

+ +

Notará que este documento está en curso de desarrollo y aún no es un listado completo de todos los métodos y propiedades DOM que funcionan para GECKO. Sin embargo, cada parte individual de esta guía (por ejemplo, La referencia al documento de DOM) sí está completa para el/los objeto/s que describe. Cuando nuevas informaciones de referencia para los numerosos miembros de esta enorme API estén disponibles, se irán integrando dentro de este documento.

+ +

A quién va dirigida esta guía?

+ +

El lector de Referencia DOM de Gecko puede ser un desarrollador Web o un usuario sabio que tiene alguna idea de como se construyen las páginas Web. Esta referencia evita tener presunciones sobre el nivel de conocimiento del lector con el DOM, el XML, los servidores o estándares Web y también con JavaScript, el lenguaje en el cual el DOM se hace accesible al lector. Al contrario, sí, supone de la familiaridad con HTML, el marcado, la estructura básica de las páginas Web, los navegadores y con las hojas de estilo.

+ +

El material introductorio presentado aquí, con sus varios ejemplos y sus explicaciones de alto nivel, debe ser valorado tanto para los desarrolladores inexpertos como para los experimentados, no es sólo una guía de desarrollo Web para principiantes. En general y sin embargo se le puede considerar como un manual evolutivo del API.

+ +

Qué es Gecko?

+ +

Mozilla, Firefox, Netscape 6+, y otros navegadores basados en Mozilla tienen la idéntica codificación DOM. Es así porque utilizan la misma tecnología. naturalmente, es sólo aplicable a los productos basados en la misma versión de Gecko, pero es complicado explicarlo - (naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain)

+ +

Gecko, la parte del programa en estos navegadores que se ocupa del análisis del HTML, de la disposición de las páginas, del modelo de objeto del documento, e incluso de la representación de la interfaz de aplicación entera, es una rápida, máquina cumplidora de los estándares de presentación que ejecutar los estándares del modelo de objeto del navegador (por ejemplo, ventana - window) del W3C DOM y del parecido DOM (pero no estándar) en el contexto de las páginas Web y la interfaz de aplicación (ochrome) del navegador.

+ +

Aunque la interfaz de aplicación y el contenido exhibido por el navegador son diferentes en muchos puntos, el DOM los expone uniformemente como una jerarquía de nodos. (commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user

+ +

Sintaxis del API

+ +

Cada descripción en la referencia API incluye la sintaxis, los parámetros de entrada y salida (donde el tipo de retorno es agarrado), un ejemplo, todas las notas adicionales y un enlace a la especificación apropiada.

+ +

Típicamente, las propiedades de sólo lectura tienen una simple línea de sintaxis, porque es posible leerlas pero imposible modificarlas. Por ejemplo, la propiedad de sólo lectura availHeight del objeto screen incluye la información siguiente:

+ +
+ +

Eso significa que sólo se puede utilizar la propiedad a la derecha de la declaración. En el caso de propiedades de lectura/escritura (posibilidad de modificación) se puede asignar un valor a la propiedad, como se ilustra en el siguiente ejemplo de sintaxis:

+ +
+ +

En general, el objeto cuyo miembro se está describiendo se pone en la declaración con un sólo tipo de dato:

+ + + +

Utilización de ejemplos

+ +

Varios ejemplos en esta referencia son archivos completos que se pueden ejecutar copiándolos y pegándolos dentro de un nuevo archivo y abriéndolo en un navegador. Otros son trozos de código que se pueden ejecutar poniéndolos en las funciones repeticón de llamada (callback) de JavaScript. Por ejemplo, la propiedad de window.document se puede probar dentro de la siguiente función, la cual es llamada por el botón acompañante:

+ +
<html>
+
+<script>
+function testWinDoc() {
+
+  doc= window.document;
+
+  alert(doc.title);
+
+}
+</script>
+
+<button onclick="testWinDoc();">Prueba la propiedad del documento</button>
+
+</html>
+
+ +

Funciones y páginas similares pueden ser creadas para todos los miembros de objeto que no hayan sido ya preparados para su uso directo. Ver la parte Probando el API del DOM en la introducción para una "prueba pesada" que permite probar varios API a la vez.

+ +

{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Pr\u00e9face", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}

diff --git a/files/es/rhino/comunidad/index.html b/files/es/rhino/comunidad/index.html new file mode 100644 index 0000000000..6b8eb552f7 --- /dev/null +++ b/files/es/rhino/comunidad/index.html @@ -0,0 +1,13 @@ +--- +title: Comunidad Rhino +slug: Rhino/Comunidad +translation_of: Mozilla/Projects/Rhino/Community +--- +

¿Tiene alguna pregunta que no encuentra respuesta en la documentación Rhino? Estos son algunos recursos adicionales para su ayuda:

+

Lista de Correo

+

En diciembre de 2010, hay una nueva Rhino lista de correo alojada en Grupos de Google.

+

El antiguo grupo de noticias mozilla.dev.tech.js-engine.rhino sufrió un ataque de spam en el verano de 2010 después de lo cual se hizo prácticamente imposible para publicar nuevos mensajes en la misma. Para ver los mensajes archivados en el antiguo grupo de noticias, prueba el  Grupo Google para esto u otros servicios de grupos de noticias.

+

Los mozilla.dev.tech.js-engine Grupos de noticias responde a preguntas sobre la aplicación C de JavaScript, y también se utilizan para responder a preguntas sobre Rhino hasta el 27 de septiembre de 2007. Para ver los mensajes archivados anteriores al 27 de septiembre de 2007, trate Grupo Google para el anterior grupo de noticias.

+

Sistema de errores

+

Utilice Bugzilla para inroducir fallos en contra de Rhino. Tenga en cuenta que Rhino tiene u propia categoría de producto.

+

{{ languages( { "ja": "ja/Rhino_help" } ) }}

diff --git a/files/es/rhino/descarga_rhino/index.html b/files/es/rhino/descarga_rhino/index.html new file mode 100644 index 0000000000..dc0ca60106 --- /dev/null +++ b/files/es/rhino/descarga_rhino/index.html @@ -0,0 +1,106 @@ +--- +title: Descarga Rhino +slug: Rhino/Descarga_Rhino +translation_of: Mozilla/Projects/Rhino/Download_Rhino +--- +

Rhino está disponible para descargar tanto en código fuente como en su forma compilada.

+ +

Binarios

+ +

Rhino 1.7R4 es la versión más reciente calificada.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PublicaciónFecha de PublicaciónNotas de la versiónEnlace de descarga
Rhino 1.7R42012-06-18Nuevo en Rhino 1.7R4rhino1_7R4.zip
Rhino 1.7R52015-01-29Notas de la versiónrhino1_7R5.zip
Rhino 1.7.62015-04-15Notas de la versiónrhino1.7.6.zip
Rhino 1.7.72015-06-17Notas de la versiónrhino1.7.7.zip
Rhino 1.7.7.12016-02-01Notas de la versiónrhino1.7.7.1.zip
Rhino 1.7.7.22017-08-24Notas de la versiónrhino1.7.7.2.zip
Rhino 1.7.82018-01-22Notas de la versiónrhino1.7.8.zip
Rhino 1.7.92018-03-15Notas de la versiónrhino1.7.9.zip
Rhino 1.7.102018-04-09Notas de la versiónrhino1.7.10.zip
Rhino 1.7.112019-05-30Notas de la versiónrhino1.7.11.zip
Rhino 1.7.122020-01-13Notas de la versiónrhino1.7.12.zip
+ +

Para descargar las versiones anteriores de Rhino, consulte el archivo de descargas de Rhino.

+ +

Licencia

+ +

Rhino es de código abierto. Apartir de la versión Rhino 1.7R4  está disponible bajo MPL 2.0.

+ +

Las versiones anteriores fueron liberadas bajo licencia MPL 1.1/GPL 2.0.

+ +

Vea la  licencia de Rhino para obtener más información.

+ +

Fuente

+ +

Además de obtener la fuente en los archivos zip anteriores, el código fuente de Rhino se puede encontrar en github en: https://github.com/mozilla/rhino. Para obtener el código fuente, utilice el comando:

+ +
git clone https://github.com/mozilla/rhino.git
+
+ +

Rhino utiliza Ant como su sistema de compilación. Ejecute el comando ant en el directorio principal de la distribución de Rhino y debe ver la lista de destinos de generación disponible.

diff --git a/files/es/rhino/index.html b/files/es/rhino/index.html new file mode 100644 index 0000000000..f4a3ae69b0 --- /dev/null +++ b/files/es/rhino/index.html @@ -0,0 +1,16 @@ +--- +title: Rhino +slug: Rhino +tags: + - bug-840092 +translation_of: Mozilla/Projects/Rhino +--- +

Image:rhino.jpg

+

Rhino es una implementación de código abierto de una máquina virtual de  JavaScript escrita enteramente en Java. Generalmente se integra en aplicaciones Java para proporcionar secuencias de comandos (scripting) a los usuarios finales. Se integra en J2SE 6 como un motor de secuencia de comandos de Java por omisión.

+

Descarga Rhino

+

¿Cómo conseguir los fuentes y los binarios?

+

Documentación de Rhino

+

Información sobre Rhino para los escribir scripts y empotrarlo en programas.

+

Ayuda de Rhino

+

Aquí hay algunos recursos si te atascas.

+

{{ languages( { "ja": "ja/Rhino" } ) }}

diff --git a/files/es/rhino/resumen/index.html b/files/es/rhino/resumen/index.html new file mode 100644 index 0000000000..bda616d66a --- /dev/null +++ b/files/es/rhino/resumen/index.html @@ -0,0 +1,45 @@ +--- +title: Resumen de Rhino +slug: Rhino/Resumen +translation_of: Mozilla/Projects/Rhino/Overview +--- +

Introducción

+

La mayoría de las personas que han utilizado JavaScript antes lo han hecho añadiendo las secuencias de comandos HTML a sus páginas web. Sin embargo, Rhino es una implementación de sólo el núcleo del lenguaje y no contiene objetos o métodos para manipular documentos HTML.

+

Rhino incluye

+ +

Lenguaje

+

El lenguaje JavaScript en sí esta estandarizado por la norma Standard ECMA-262 ECMAScript: A general purpose, cross-platform programming language. Rhino 1.3 y superiores se ajustan a la Versión 3 de la Norma.

+

Rhino 1.6 y superiores implementan ECMA-357 ECMAScript for XML (E4X). Consulte las especificaciones para obtener más información sobre la norma, y vea Versión de Rhino 1.6R1 notas de versión para obtener mas información sobre la implementación de Rhino.

+

Además, Rhino ha implementado JavaAdapters, que le permite implementar JavaScript en cualquier interfaz Java o ampliar una clase Java con un objeto JavaScript. Vea el ejemplo enum.js para obtener mas información.

+

Numerosos libros y tutoriales de JavaScript están disponibles. JavaScript: The Definitive Guide es recomendable, y contiene un capítulo sobre Rhino.

+

Características del Lenguaje Obsoletas

+

Varias características del lenguaje introducidas en JavaScript 1.2 se consideran obsoletas. Estas características permiten la "reflexión computacional": es decir, la capacidad de un script para determinar e influir en los aspectos de la forma que se evalúa. Estas características no suelen ser útiles, sin embargo, imponen restricciones significativas en las  implementaciones que dificultan o impiden la optimización.  Las características en desuso son the __proto__ and __parent__ properties, y los constructores With, Closure, y Call. Si pretende invocar estos constructores con la versión 1.4 se producirá un error. para otras versiones, se genera una advertencia.

+

Internacionalización

+

Los mensajes reportados por el motor de JavaScript por defecto son recuperados desde el archivo de propiedad org/mozilla/javascript/resources/Messages.properties. Si existen otras propiedades de los archivos con las extensiones correspondientes a la localización actual, se van a utilizar en su lugar.

+

Versiones del Lenguaje JavaScript

+

Algunos comportamientos en el motor JavaScript depende de la versión del lenguaje. En la incorporación del navegador, la versión de idioma se selcciona mediante el atributo LANGUAGE de la etiqueta SCRIPT con los valores tales como "JavaScript1.2".

+

Versión 1.3 y superiores son compatibles con ECMA.

+

Los Operadores == and !=

+

La versión 1.2 sólo utiliza la igualdad estricta para los operadores == y !=. En la versión 1.3 y superiores, == y != tienen el mismo significado que ECMA. Los operadores === y !== se utiliza estrictamente en todas las versiones.

+

Para Booleano

+

Booleano(new Boolean(false)) es falsa para todas las versiones anteriores a 1.3. Es true ( y por lo tanto compatible con ECMA) para la versión 1.3 y superiores.

+

Array.prototype.toString y Object.prototype.toString

+

La versión 1.2 solo retorna array o objetos de notación literal ("{{ mediawiki.external(1,2,3) }}" ó "{a:1, b:2}" por ejemplo). En la  versión 1.3 y superiores esta funciones es compatible con ECMA.

+

Constructores de Array

+

Array(i) para un argumento de número i construye una matriz con un solo elemento igual a i solo para la versión 1.2. Lo contrario si se utiliza la versión ECMA compatible ( Una matriz se construye sin elementos pero con propiedad de longitud igual a i).

+

String.prototype.substring

+

Solo para la versión 1.2, los dos argumentos no se cambian si el primer argumento es menor que el segundo. Todas las demas verciones son compatibles con ECMA.

+

String.prototype.split

+

Solo para la versión 1.2, realiza la division de Perl4 cuando se les da un caracter de espacio como argumento (salta principalmente espacios en blanco, y se divide el espacio en blanco). Todas las demás versiones se divide en el carácter de espacio adecuado segín lo especificado por ECMA.

+

Seguridad

+

Las caracteristicas de seguridad de Rhino proporcionan la capasidad de rastrear el origen de una parte del código ( y cualquier pedazo de código que se pueda generar). Estas caracteristicas permiten la implementación de una politica de seguridad tradicional basada en URL para JavaScript como en el Navegador Netscape. Integrar esa confianza en el código JavaScript que se ejecuta puede ignorar las caracteristicas de seguridad.

+

Insertar código JavaScript que no es de confianza debe hacer dos cosas para habilitar las funciones de seguridad. En primer lugar, todos los contesxtos que se crean deben ser suministrados como instancia de un objeto que implementa la interfaz SecuritySupport. Esto proporcionará la funcionalidad Rhino de apoyo que necesita para realizar tareas reliacionadas con la seguridad.

+

Second, the value of the property security.requireSecurityDomain should be changed to true in the resource bundle org.mozilla.javascript.resources.Security. The value of this property can be determined at runtime by calling the isSecurityDomainRequired method of Context. Setting this property to true requires that any calls that compile or evaluate JavaScript must supply a security domain object of any object type that will be used to identify JavaScript code. In a typical client embedding, this object might be a string with the URL of the server that supplied the script, or an object that contains a representation of the signers of a piece of code for certificate-based security policies.

+

When JavaScript code attempts a restricted action, the security domain can be retrieved in the following manner. The class context should be obtained from the security manager (see java.lang.SecurityManager.getClassContext()). Then, the class of the code that called to request the restricted action can be obtained by looking an appropriate index into the class context array. If the caller is JavaScript the class obtained may be one of two types. First, it may be the class of the interpreter if interpretive mode is in effect. Second, it may be a generated class if classfile generation is supported. An embedding can distinguish the two cases by calling isInterpreterClass() in the Context class. If it is the interpreter class, call the getInterpreterSecurityDomain() method of Context to obtain the security domain of the currently executing interpreted script or function. Otherwise, it must be a generated class, and an embedding can call getSecurityDomain() in the class implementing SecuritySupport. When the class was defined and loaded, the appropriate security domain was associated with it, and can be retrieved by calling this method. Once the security domain has been determined, an embedding can perform whatever checks are appropriate to determine whether access should be allowed.

+

{{ languages( { "ja": "ja/Rhino_Overview" } ) }}

diff --git a/files/es/rhino_documentacon/index.html b/files/es/rhino_documentacon/index.html new file mode 100644 index 0000000000..701fbfd67f --- /dev/null +++ b/files/es/rhino_documentacon/index.html @@ -0,0 +1,115 @@ +--- +title: Documentación de Rhino +slug: Rhino_documentacon +translation_of: Mozilla/Projects/Rhino/Documentation +--- +

Información sobre Rhino para script writers y embedders.

+

General

+
+
+ Resumen
+
+ Una visión general del lenguaje JavaScript y de Rhino.
+
+ Licencia
+
+ Información de la licencia de Rhino.
+
+ Requerimientos y limitaciones
+
+ Lo que usted debe tener para ejecutar Rhino y lo que no puede hacer con Rhino.
+
+ Descargas de archivos
+
+ Incluye notas de versiones para emisiones de Rhino.
+
+ Optimización
+
+ Detalles sobre los distintos niveles de optimización.
+
+ Preguntas frecuentes
+
+ Respuestas a las preguntas más frecuentes acerca de Rhino.
+
+ Historia de Rhino
+
+ Historia de la bestia.
+
+

Escritura de Scripts

+
+
+ Secuencia de comandos Java
+
+ Cómo usar Rhino para escritura en clases Java.
+
+ Secuencia de comandos Java
+
+ Cómo usar Rhino para escritura en clases Java. (forma antigua).
+
+ Secuencias de rendimiento
+
+ Algunos consejos sobre cómo escribir código JavaScript más rápido.
+
+

JavaScript Herramientas

+
+
+ Consola Rhino
+
+ Interactivo o ejecución por lotes de comandos.
+
+ Depurador JavaScript
+
+ Depurar secuencias de comandos que se ejecutan en Rhino.
+
+ Compilador JavaScript
+
+ Compilación de comandos en archivos Java class.
+
+ Ejecución de las pruebas de Rhino
+
+ Ejecutar serie de pruebas JavaScript con Rhino.
+
+

Integración de Rhino

+
+
+ Tutorial de integración
+
+ Un breve tutorial sobre cómo integrar Rhino en su aplicación.
+
+ Referencia del API javadoc (¿Enlace roto? Pruebe esté en Jarvana.)
+
+ un bosquejo de la interfaz de programación de Rhino (tip only).
+
+ Ámbitos y Contextos
+
+ Describe cómo utilizar los ámbitos y contextos para el mejor rendimiento y la flexibilidad, con la mirada puesta en entornos multiproceso.
+
+ Serialización
+
+ Como realizar series de objetos JavaScript y funciones en Rhino.
+
+ Tiempo de ejecución
+
+ Una breve descripción en tiempo de ejecución de JavaScript.
+
+ Pequeña Huella
+
+ Consejos para las personas interesadas en incrustaciones de pequeñas dimensiones.
+
+ Ejemplos
+
+ Una serie de ejemplos que muestran cómo controlar el motor de JavaScript y crear objetos huésped en JavaScript.
+
+ Usando Rhino con Bean Scripting Framework (BSF)
+
+ Cómo usar Rhino con aplicaciones que soportan BSF (Bean Scripting Framework) del proyecto Apache Jakarta.
+
+

Referencias externas

+
+
+ Lenguajes de escritura para Java
+
+ un artículo de comparación y contraste de Rhino y Jython.
+
+

Contribuyentes Rhino

+

¿Interesado en contribuir en Rhino? Echa un vistazo a la Lista de deseos Rhino.

diff --git a/files/es/sandbox/index.html b/files/es/sandbox/index.html new file mode 100644 index 0000000000..e7614ae246 --- /dev/null +++ b/files/es/sandbox/index.html @@ -0,0 +1,29 @@ +--- +title: Sandbox (Página de pruebas) +slug: Sandbox +tags: + - caja-de-arena + - demo + - sanbox + - temporario +translation_of: Sandbox +--- +

Hola Mundo

+ +

Contenido HTML

+ +
<h1>
+
+
Hello friends

+
+
Contenido CSS

+
+
h1{
+color:#AAAF;
+}

+
+
Resultado

+
+

+
+
Hello World
diff --git a/files/es/sax/index.html b/files/es/sax/index.html new file mode 100644 index 0000000000..33cc6fbb9a --- /dev/null +++ b/files/es/sax/index.html @@ -0,0 +1,114 @@ +--- +title: SAX +slug: SAX +tags: + - Complementos + - Todas_las_Categorías + - extensiones +translation_of: Archive/SAX +--- +

+

SAX (Simple API for XML, API simple para XML) es una API de análisis. SAX fue la primera API para XML ampliamente adoptada en Java y más tarde implementada en muchos otros entornos de programación. A partir de Firefox 2 es posible utilizar los analizadores SAX para aplicaciones y extensiones XUL. Para más información, veáse la página de SAX. +


+

+

Inicio rápido

+

La funcionalidad de un analizador SAX está disponible a través del componente lector de XML. Para crear uno, utiliza el siguiente trozo de código: +

+
var xmlReader = Components.classes["@mozilla.org/saxparser/xmlreader;1"]
+                          .createInstance(Components.interfaces.nsISAXXMLReader);
+
+

Después de que hayas creado un analizador SAX, necesitarás asociar los manejadores de eventos que te interesen y arrancar el proceso de análisis. Todas las funcionalidades están disponible a través de la interfaz nsISAXXMLReader. +


+

+

Estableciendo los manejadores

+

Los manejadores son objetos definidos por el usuario que implementan las interfaces de manejadores SAX y dependiendo de la clase de información que necesita obtener desde el analizador. Una vez comenzado el proceso de análisis, los manejadores asociados serán llamados por el analizador (callbacks) con el contenido de XML que está siendo analizado. Los siguientes manejadores están disponibles: +

+ + + + + + + + + + + +
Interfaz Propósito
nsISAXContentHandler Es notificada sobre el contenido lógico de un documento (p.e.: elementos, atributos, espacios en blanco e instrucciones de proceso).
nsISAXDTDHandler Es notificada sobre eventos básicos relacionados con DTDs.
nsISAXErrorHandler Es notificada sobre errores en el flujo de entrada.
nsISAXLexicalHandler Manejador ampliado de SAX2 para eventos léxicos (p.e.: comentarios y nodos de tipo CDATA, declaraciones DTD y entidades).
+

A continuación se muestra un ejemplo de una implementación de un manejador de contenidos más comúnmente usado: +

+
function print(s) {
+  dump(s + "\n");
+}
+
+xmlReader.contentHandler = {
+  // nsISAXContentHandler
+  startDocument: function() {
+    print("startDocument");
+  },
+
+  endDocument: function() {
+    print("endDocument");
+  },
+
+  startElement: function(uri, localName, qName, /*nsISAXAttributes*/ attributes) {
+    var attrs = [];
+    for(var i=0; i<attributes.length; i++) {
+      attrs.push(attributes.getQName(i) + "='" +
+                 attributes.getValue(i) + "'");
+    }
+
+    print("startElement: namespace='" + uri + "', localName='" +
+          localName + "', qName='" + qName + "', attributes={" +
+          attrs.join(",") + "}");
+  },
+
+  endElement: function(uri, localName, qName) {
+    print("endElement: namespace='" + uri + "', localName='" +
+          localName + "', qName='" + qName + "'");
+  },
+
+  characters: function(value) {
+    print("characters: " + value);
+  },
+
+  processingInstruction: function(target, data) {
+    print("processingInstruction: target='" + target + "', data='" +
+          data + "'");
+  },
+
+  ignorableWhitespace: function(whitespace) {
+    // don't care
+  },
+
+  startPrefixMapping: function(prefix, uri) {
+    // don't care
+  },
+
+  endPrefixMapping: function(prefix) {
+    // don't care
+  },
+
+  // nsISupports
+  QueryInterface: function(iid) {
+    if(!iid.equals(Components.interfaces.nsISupports) &&
+       !iid.equals(Components.interfaces.nsISAXContentHandler))
+      throw Components.results.NS_ERROR_NO_INTERFACE;
+    return this;
+  }
+};
+
+

Iniciar el análisis

+

El componente XML Reader puede analizar XMLs a partir de una cadena de texto (un nsIInputStream) o asíncronamente a través de la interfaz nsIStreamListener. Abajo se muestra un ejemplo de análisis a partir de una cadena: +

+
xmlReader.parseFromString("<f:a xmlns:f='g' d='1'><BBQ/></f:a>", "text/xml");
+
+

Esta llamada desemboca en la siguiente salida (asumiendo que se ha usado el manejador de contenidos mostrado antes): +

+
startDocument
+startElement: namespace='g', localName='a', qName='f:a', attributes={d='1'}
+startElement: namespace='', localName='BBQ', qName='BBQ', attributes={}
+endElement: namespace='', localName='BBQ', qName='BBQ'
+endElement: namespace='g', localName='a', qName='f:a'
+endDocument
+
diff --git a/files/es/sections_and_outlines_of_an_html5_document/index.html b/files/es/sections_and_outlines_of_an_html5_document/index.html new file mode 100644 index 0000000000..145f89d9ae --- /dev/null +++ b/files/es/sections_and_outlines_of_an_html5_document/index.html @@ -0,0 +1,411 @@ +--- +title: Secciones y esquema de un documento HTML5 +slug: Sections_and_Outlines_of_an_HTML5_document +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +

La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.

+ +
+

A lo largo de este documento se empleará la palabra esquema en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos algoritmo de esquematizado al proceso de construir el esquema infiriéndolo del contenido.

+
+ +

Estructura de un documento HTML 4

+ +

La estructura de un documento, por ejemplo la estructura semántica de lo que está entre <body> y </body> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.

+ +

Entonces el siguiente marcado:

+ +
+
<div class="seccion" id="zorro" >
+<h1>El zorro</h1>
+<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
+... bla, bla, bla ...
+<div class="subseccion" id="zorro-habitat" >
+<h2>Hábitat</h2>
+<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
+...bla, bla, bla...
+</div>
+</div>
+
+
+ +

genera el siguiente esquema:

+ +
1. El zorro
+   1.1 Hábitat
+
+ +

Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,

+ +
<h1>El zorro</h1>
+<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
+... bla, bla, bla ...
+<h2>Hábitat</h2>
+<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
+...bla, bla, bla...
+<h2>Costrumbres</h2>
+<h1>El oso</h1>
+
+ +

genera el siguiente esquema:

+ +
1. El zorro
+   1.1 Hábitat
+   1.2 Costumbres
+2. El oso
+
+ +

Problemas resueltos por HTML5

+ +

La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:

+ +
    +
  1. El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos class hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para tecnologías de apoyo, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.
    2. +
  2. Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.
    3. +
  3. Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <h1>Mozart</h1><h2>El genio salzburgués</h2> crea el esquema 1. Mozart 1.1 El genio salzburgués). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup> crea el esquema 1. Mozart).
    4. +
  4. En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.
    5. +
  5. Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.
    6. +
+ +

De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.

+ +

El algoritmo de esquematizado de HTML5

+ +

Definiendo secciones en HTML5

+ +

Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, {{HTMLElement("footer")}},  {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.

+ +
Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también Definiendo cabeceras en HTML5.
+ +

Ejemplo:

+ +
<section>
+  <h1>El pato</h1>
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+  <aside>
+    <p>otros estudiosos del pato
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

El bloque de HTML define dos secciones de alto nivel:

+ +
<section>
+  <h1>El pato</h1>
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+   <aside>
+    <p>otros estudiosos del pato
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

La primera sección tiene tres subsecciones:

+ +
<section>
+  <h1>El pato</h1>
+
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+
+  <aside>
+    <p>Otros estudiosos del lobo
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

Esto genera la siguiente estructura:

+ +
1. El pato
+   1.1 Introducción
+   1.2 Hábitat
+   1.3 Section (aside)
+
+ +

Definiendo cabeceras en HTML5

+ +

Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.

+ +

Los elementos de cabecera tienen un rango dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango más alto, y {{HTMLElement("h6")}} tiene el rango más bajo. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:

+ +
<section>
+  <h1>La mosca</h1>
+  <p>El esta sección hablaremos de la mosca, una criatura adorable.
+    ... bla, bla, bla ...
+  <section>
+    <h2>Hábitat</h2>
+    <p>Únicamente se han divisado colonias de moscas en los montes de....
+        ...bla, bla, bla ...
+  </section>
+</section>
+<section>
+  <h3>El mosquito</h3>
+  <p>A continuación, otra rareza a punto de extinguirse, el mosquito.
+     ...bla, bla, bla...
+</section>
+ +

Genera el siguiente esquema:

+ +
1. La mosca
+   1.1 Hábitat
+2. El mosquito
+ +

Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).

+ +

Seccionado implícito

+ +

Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado seccionado implícito.

+ +

Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:

+ +
<section>
+  <h1>El águila</h1>
+  <p> ....
+
+  <h3 class="subsec-implicita">Hábitat</h3>
+  <p> ...
+</section>
+ +

Genera el siguiente esquema:

+ +
1. El águila
+   1.1 Hábitat (impícitamente definido mediante <h3>)
+
+ +

Si es del mismo rango que la cabecera anterior, cierra la sección previa  (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: 

+ +
<section>
+  <h1>El águila</h1>
+  <p>...
+  <h1 class="secc-implicita">El buitre</h1>
+  <p>...
+</section>
+ +

genera el siguiente esquema: 

+ +
1. El águila
+2. El buitre (implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)
+
+ +

Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:

+ +
<body>
+  <h1>Colores</h1>
+  <h2>Rojo</h2>
+  <p> ...
+  <section>
+    <h3>Amarillo</h3>
+    <p> ...
+    <h3>Verde</h3>
+      <p> ...
+    <h2>Sabores</h2>
+      <p>...
+  </section>
+</body>
+ +

generando el siguiente esquema:

+ +
1. Colores
+   1.1 Rojo (implícitamente con <h2> )
+   1.2 Amarillo(explícitamente con <section> )
+   1.3 Verde (impícitamente con <h3>, cerrando el <h3> previo)
+2. Sabores (implícitamente con <h2>, cerrando el <section> previo)
+
+ +

Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica

+ + + +

Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.

+ +

Una excepción a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser reutilizadas en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.

+ +

Sobreescribiendo seccionamiento implícito

+ +

A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:

+ + + +

Debido al seccionado implícito, esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:

+ +
<section>
+  <hgroup>
+    <h1>La flauta mágica</h1>
+    <h2>Ópera en dos actos del genio salzburgués</h2>
+  </hgroup>
+  ... algún contenido ...
+</section>
+
+ +

genera el siguiente esquema, que es el que se desea:

+ +
1. La flauta mágica
+ +

Secciones desacopladas

+ +

Piensa por un momento en una sección A que contiene una subsección B. A veces es conveniente que B mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de A, dando lugar a esquemas más claros.

+ +

Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.
+  Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.

+ +

Además, el elemento de partida para formar el esquema del documento es  {{HTMLElement("body")}}, el cual por ser la raíz,  se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.

+ +

Ejemplo:

+ +
<section>
+  <h1>Bach</h1>
+  <section>
+    <h2>Introducción</h2>
+    <p>...
+  </section>
+  <section>
+    <h2>La Pasión según S. Mateo</h2>
+    <p> Bla, bla, bla ...
+    <blockquote>
+       <h1>Friedich Nietzsche
+       <p>“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios”
+    </blockquote>
+  </section>
+</section>
+ +

Este ejemplo resulta en el siguiente esquema:

+ +
1. Bach
+   1.1 Introducción
+   1.2 La Pasión según s. Mateo
+ +

Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento  {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.

+ +

Secciones fuera del esquema

+ +

HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:

+ +
    +
  1. El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal,  como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.
    2. +
  2. El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.
    3. +
  3. El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.
    4. +
  4. El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.
    5. +
+ +

Direcciones y tiempo de publicación en elementos de seccionado

+ +

El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.

+ +

Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+ +

De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+ +

Usando elementos HTML5 en navegadores no HTML5

+ +

Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como display:inline por defecto:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.
+
+ Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Warning !</strong>
+     Because your browser does not support HTML5, some elements are simulated using JScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

Conclusión

+ +

Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/es/seguridad_en_firefox_2/index.html b/files/es/seguridad_en_firefox_2/index.html new file mode 100644 index 0000000000..43b55fff7c --- /dev/null +++ b/files/es/seguridad_en_firefox_2/index.html @@ -0,0 +1,13 @@ +--- +title: Seguridad en Firefox 2 +slug: Seguridad_en_Firefox_2 +tags: + - Seguridad + - Todas_las_Categorías +translation_of: Mozilla/Firefox/Releases/2/Security_changes +--- +
{{FirefoxSidebar}}

Firefox 2 tiene tanto SSLv2 como la débil "exportación" de juegos de claves desactivados por defecto, en favor de SSLv3. Esto proporciona mejoras en la seguridad.

+ +

Los métodos preferidos de encriptación son TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA y TLS_RSA_WITH_3DES_EDE_CBC_SHA. Algunos sevidores se refieren a ellos como SSL_DHE_DSS_WITH_3DES_EDE_CBC_SHA y SSL_RSA_WITH_3DES_EDE_CBC_SHA.

+ +

Si el soporte SSLv2 tuviera que ser activado, puede hacerse cambiando en las preferencias de usuario el valor security.ssl2.* deseado a true.

diff --git "a/files/es/selecci\303\263n_de_modo_en_mozilla/index.html" "b/files/es/selecci\303\263n_de_modo_en_mozilla/index.html" new file mode 100644 index 0000000000..2dae7b7909 --- /dev/null +++ "b/files/es/selecci\303\263n_de_modo_en_mozilla/index.html" @@ -0,0 +1,143 @@ +--- +title: Selección de modo en Mozilla +slug: Selección_de_modo_en_Mozilla +tags: + - Desarrollo_Web + - HTML + - Todas_las_Categorías + - XHTML + - XML +--- +

 

+

Este documento describe cómo Mozilla utiliza el declaración de DOCTYPE para determinar si utilizar el modo estricto o el. El código que toma la decisión está actualmente en DetermineParseMode() in nsParser.cpp. Vea los error 1312 y error 55264 para saber más sobre la historia de la selección del modo. Vea el error 153032 sobre la creación del modo Casi-Estándar en Mozilla 1.0.

+

Las metas que indujeron a elegir este comportamiento fueron las siguientes::

+ +

En otras palabras, el algoritmo es la mejor aproximación que podemos encontrar para determinarse qué páginas fueron escritas después de que Mozilla se convirtiese en un 'agente de usuario' importante en la Web.

+

Modo Estándar Completo

+

Lo siguiente activa el modo estándar completo:

+ +

Modo casi estándar

+

Lo siguiente activa el modo casi estándar. el fue creado entre (1.0 y 1.1alpha) y (1.0.1 y 1.1beta). Antes de su creación estos DOCTYPE activaban el modo estándar completo.

+ +

Modo Quirks

+

Lo siguiente activa el modo quirks (esta lista necesita ser completa para garantizar que todas las páginas ya existentes en la www pueden activar el modo quirks):

+

En la elaboración de esta lista han sido utilizados los siguientes sitios: W3C HTML Validator, HTMLHelp HTML Validator.

+ +

Tenga en cuenta que todas las comparaciones de los identificadores públicos son insensibles a mayúsculas o minúsculas (técnicamente esto es incorrecto, puesto que las cadenas sí son sensibles). Esto se hace así por el gran número de páginas con identificadores públicos en los que se usan mal.

+

Ver más

+ +
+

Información sobre el Documento Original

+ +
+

 

diff --git a/files/es/server-sent_events/index.html b/files/es/server-sent_events/index.html new file mode 100644 index 0000000000..9b22801732 --- /dev/null +++ b/files/es/server-sent_events/index.html @@ -0,0 +1,99 @@ +--- +title: Server-sent events +slug: Server-sent_events +tags: + - NeedsTranslation + - Server-sent events + - TopicStub +translation_of: Web/API/Server-sent_events +--- +

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page.

+ + + + + + + +
+

Documentation

+
+
+ Using server-sent events
+
+ A tutorial guide to writing both server and client side part of a server-sent events app.
+
+ EventSource reference
+
+ A reference to the client-side EventSource API.
+
+

View All...

+ 		+

Tools

+ + + +
+

See also

+ +

Specification

+ +

Browser compatibility

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}115
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html b/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html new file mode 100644 index 0000000000..81a2f5dacc --- /dev/null +++ b/files/es/server-sent_events/utilizando_server_sent_events_sse/index.html @@ -0,0 +1,231 @@ +--- +title: Utilizando eventos enviados por el servidor (server-sent event) +slug: Server-sent_events/utilizando_server_sent_events_sse +translation_of: Web/API/Server-sent_events/Using_server-sent_events +--- +

Desarrollar una aplicación web que utilice server-sent events es muy fácil. Solo necesitas un pequeño código del lado del servidor para transmitir los eventos a la aplicación web, pero del lado de la aplicacion web se trabaja prácticamente igual que con cualquier otro tipo de eventos.

+ +

Puedes ver un ejemplo aqui (actualmente no funciona).

+ +

ejemplo2

+ +

Recibiendo eventos desde el servidor

+ +

El server-sent event API está contenido en la interfaz EventSource; para abrir una conexión al servidor para recibir eventos de él. Se crea un nuevo objeto new EventSource, especificando el URI de un script que genera los eventos, Por ejemplo:

+ +
var evtSource = new EventSource("ssedemo.php");
+
+ +
Nota: Aunque todavía no es parte de la norma, EventSource es soportado por Firefox 11 y posteriores. Se espera que pronto forme parte del estándar.
+ +

Una vez que ha instanciado el origen del evento, puede comenzar a escuchar los mensajes:

+ +
evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.innerHTML = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+
+ +

Este codigo escucha todos los mensajes entrantes (Es decir, todos los avisos del servidor, que no tienen un campo de eventos en ellos) y anexa texto del mensaje a la lista en el documento HTML.

+ +

También puedes escuchar eventos, usando addEventListener():

+ +
evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+
+ +

Este código es similar,  excepto que este se activa cada vez que el servidor envia un mensaje con el campo de evento "ping"; entonces se analiza el JSON en el campo de datos y retorna esa informacion.

+ +

Enviando eventos desde el servidor

+ +

El script del servidor que envia los datos tiene que responder con el tipo MIME text/event-stream. Cada notificación se envia con un bloque de texto terminado en un par de saltos de línea, para mas detalles sobre el formato sobre la secuencia de evetos, ver {{ anch("Event stream format") }},

+ +

El codigo PHP para este ejemplo que estamos utilizando:

+ +
date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Every second, sent a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_flush();
+  flush();
+  sleep(1);
+}
+
+ +

Se genera un evento cada segundo, con el evento "ping". Los datos de cada evento es un objeto JSON que contiene, en este caso, solo la fecha en formato ISO 8601 correspondiente a la hora en que se generó el evento. A intervalos aleatorios, se envia un mensaje simple (sin ningún tipo de evento)

+ +

Gestion de errores

+ +

Cuando se producen problemas (como un tiempo de espera o problemas relacionados con el control de acceso), se genera un evento de error. Puedes tomar acción sobre esto al implementar una devolución de llamada al objeto EventSource:

+ +
evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+
+ +

En Firefox 22, no parece que haya manera de distinguir entre los diferentes de eventos de error.

+ +

Cerrando flujo de eventos

+ +

Por defecto, si la conexión entre el cliente y el servidor se cierra, la conexión es reiniciada. Podemos terminar la conexión con el método .close()

+ +
evtSource.close();
+ +
 
+ +

Formato de flujo de eventos (formato stream)

+ +

El flujo de eventos es una corriente sencilla de datos de texto, que deben ser codificados usando UTF-8. Los mensajes en el flujo de eventos están separados por un par de caracteres de salto de línea. Si hay un símbolo de dos puntos como primer caracter de una línea, se entiende que es un comentario y es ignorado. 

+ +
Nota: La línea de comentario se puede usar para prevenir que la conexión se agote por tiempo (timeout); un sevidor puede enviar periódicamente un comentario para mantener viva la conexión.
+ +

Cada mensaje consiste en una o más líneas de texto que enumeran los campos para ese mensaje. Cada campo está representado por el nombre del campo, seguido por los datos de texto para el valor de ese campo.

+ +

Campos

+ +

Los siguientes nombres de campo son definidos por la especificación:

+ +

event

+ +

El tipo de evento. Si se especifica, un evento se enviará al navegador a la escucha para el nombre del evento especificado, el sitio web usaria addEventLister() para escuchar eventos nombrados. El controlador onmessage se llama si no se especifica el nombre del evento para un mensaje.

+ +

data

+ +

El campo de datos  para el mensaje. Cuando el EventSource recibe múltiples lineas con "data:", se concatenara, insertando un caracter de nueva de linea entre cada uno. Se eliminan los saltos de línea al final [VERIFICAR].

+ +

id

+ +

  El ID del evento que establecerá el último ID del objeto EventSource.

+ +

Retry

+ +

El tiempo de reconexión para usar al intentar enviar el evento. [Qué código maneja esto?] Este debe ser un número entero, que especifica el tiempo de reconexion en milisegundos. Si se especifica un valor no entero, el campo se ignora.  

+ +

Se omiten todos los demas nombres de campo.

+ +
Nota: Si una línea no contiene dos puntos, la línea entera se tratara como un nombre de campo, con una cadena de valor vacio.
+ +

Ejemplos

+ +

Mensajes con datos únicamente

+ +

En el siguiente ejemplo, hay tres mensajes enviados. El primero es solo un comentario, debido a que empieza con dos puntos. Como se mencionó anteriormente, esto puede ser útil para mantener la conexión viva si los mensajes no son enviados regularmente.

+ +

The second message contains a data field with the value "some text". The third message contains a data field with the value "another message\nwith two lines". Note the newline in the value.

+ +

El segundo mensaje contiene un campo de datos con el valor "some text". El tercer mensaje contiene un campo de datos con el valor "another message\nwith two lines". Nota la nueva línea en el valor.

+ +
: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+
+ +

Eventos nombrados

+ +

Este ejemplo envia algunos eventos nombrados. Cada uno tiene un nombre de evento especificado por el campo event, y un campo data cuyo valor es una cadena JSON apropiada con los datos necesarios para que el cliente actue sobre el evento. El campo data, podria, por supuesto, tener cualquier cadena; no tiene que ser un JSON.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+
+ +

Mezclando y emparejando

+ +

No tienes que usar solamente mensajes sin nombrar o eventos tipados; puedes mezclarlo juntos en un solo flujo de evento.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{ CompatGeckoDesktop("6.0") }}{{ CompatNo() }}115
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroid-and-MeegoFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support6 a 24 b1.0{{ CompatUnknown() }}11.14
+
+ +

 

diff --git a/files/es/servicios_web_xml/index.html b/files/es/servicios_web_xml/index.html new file mode 100644 index 0000000000..3101b6dc9e --- /dev/null +++ b/files/es/servicios_web_xml/index.html @@ -0,0 +1,20 @@ +--- +title: Servicios Web XML +slug: Servicios_Web_XML +tags: + - Servicios_Web_XML + - Todas_las_Categorías +translation_of: Archive/Mozilla/Firefox/SOAP_in_Gecko-based_Browsers +--- +

 

+
Principios básicos de los servicios Web
+A short introduction to web services.
+
Un servicio Web es una colección de protocolos y estándares empleados para intercambiar datos entre aplicaciones y sistemas. Las aplicaciones, escritas en diversos lenguajes de programación y ejecutándose en distintas plataformas pueden utilizar los servicios Web para intercambiar datos sobre una red de ordenadores como Internet de una forma similar a la comunicación entre procesos en un solo ordenador. En los servicios Web, todos los datos se intercambian se formatean con etiquetas XML{{ Ref(1) }}
+ +

Documentación

SOAP Versión 1.2 Parte 0: Fundamentos
Traducción del documento inicial de la especificación de SOAP 1.2.
"Es un documento no normativo que pretende proporcionar un tutorial fácilmente entendible sobre las características de SOAP"
SOAP en los navegadores basados en Gecko
Este artículo muestra como acceder a los servicios web utilizando SOAP y JavaScript en los navegadores basados en Gecko.
Mozilla Web Services Security Model
To prevent the browser from being used as a tool for Web sites to obtain priveleges that belong to the browser's user, Web browsers restrict what Web pages can do when accessing things in other domains. These restrictions apply to Web Services.
Tutorial de W3School sobre SOAP (en)
SOAP es un protocolo basado en XML que permite a las aplicaciones intercambiar información sobre HTTP. En este tutorial de W3Schools sobre SOAP, aprenderá que es SOAP, y como utilizar el lenguaje XML para intercambiar información entre aplicaciones.

los comento por que no me parecen apropiados ; {{ mediawiki.external('http://davenet.scripting.com/1998/07/14/xmlRpcForNewbies XML-RPC para novatos (en)') }}<br /> : <small>Informal pero informativa introducción a XML Remote Procedure Calls. (XML-RPC).</small>  ; {{ mediawiki.external('http://xmlrpc-c.sourceforge.net/xmlrpc-howto/xmlrpc-howto.html XML-RPC HowTo (en)') }}<br /> : <small>Este articulo describe como utilizar XML-RPC para implementar clientes y servidores en una gran variedad de lenguajes, proporcionando código fuente en Perl, Pitón, C, C++, Java, PHP y otros lenguajes. Este articulo también incluye secciones sobre Zope y KDE 2.0.La información aquí contenida se aplica a todos los sistemas operativos con soporte XML-RPC.</small>  ; {{ mediawiki.external('http://webservices.xml.com/pub/a/ws/2001/04/04/webservices/ A Web Services Primer (en)') }}<br /> : <small>"Los servicios Web son una nueva variedad de aplicaciones Web. Son auto contenidos, auto descriptivos, aplicaciones modulares que pueden ser publicadas, localizadas y ejecutadas a través del Web. Realizando funciones que pueden variar desde la función más sencilla a complicados procesos de negocio. Una vez que se despliega un servicio Web otras aplicaciones (y otros servicios Web) pueden descubrirlo y ejecutarlo."</small>

Ver más...

Comunidad

  • La comunidad Mozilla... en inglés

{{ DiscussionList("dev-tech-xml", "mozilla.dev.tech.xml") }}

Ver más...

Herramientas

Ver más...

Temas Relacionados

XML
+<hr> +

{{ Note(1) }} De .

+

Categorías

+

Interwiki Language Links

+

 

+

{{ languages( { "en": "en/XML_Web_Services", "fr": "fr/Services_Web_XML", "it": "it/XML_Web_Services", "ja": "ja/XML_Web_Services", "ko": "ko/XML_Web_Services", "pl": "pl/XML_Web_Services", "zh-cn": "cn/XML_Web_Services" } ) }}

diff --git a/files/es/sistema_de_preferencias/index.html b/files/es/sistema_de_preferencias/index.html new file mode 100644 index 0000000000..07638dcb46 --- /dev/null +++ b/files/es/sistema_de_preferencias/index.html @@ -0,0 +1,65 @@ +--- +title: Sistema de preferencias +slug: Sistema_de_preferencias +tags: + - Sistema_de_preferencias + - Todas_las_Categorías + - XUL + - páginas_a_traducir +translation_of: Mozilla/Preferences/Preferences_system +--- +

Este documento describe el nuevo sistema de preferencias del Toolkit de Aviary. Usando este sistema es posible crear ventanas de preferencias que se muestren y funcionen apropiadamente en varias plataformas (Windows, MacOS X y GNOME).

+ +

Ten en cuenta que el sistema de preferencias solo está disponible desde Firefox/Thunderbird 1.5 (incluyendo sus versiones alpha y beta). No puedes usarlo en las aplicaciones y extensiones basadas en Firefox 1.0.

+ +

El nuevo sistema esta implementado mediante unos pocos elementos y atributos en XUL. Puedes encontrar información sobre estos, simplemente haciendo clic en alguno de los enlaces a continuación:

+ +

Documentación sobre el Sistema de preferencias:

+ +

Uso

+ +

this will eventually be moved from here

+ +

El código para una típica ventana de preferencias sería algo así:

+ +
<prefwindow id="appPreferences"
+            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <prefpane id="pane1" label="&pane1.title;">
+    <preferences>
+      <preference id="pref1" name="pref.name" type="bool"/>
+    </preferences>
+
+   .. UI elements that refer to the preferences above, e.g.:
+    <checkbox id="check1" preference="pref1"
+              label="&check1.label;" accesskey="&check1.accesskey;"/>
+  </prefpane>
+
+  <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/>
+</prefwindow>
+
+ +

La hoja de contenido puede ser especificada en línea, o mediante un enlace externo que cargue dicho contenido en la misma, de manera dinámica.Presta especial atención al HIGs de las plataformas en las que estés desarrollando y al usar el preprocesador de XUL si fuera necesario para configurar apropiadamente los diferentes titulos de ventana. Debes especificar también el ancho de la ventana (en el em) así como hacer un uso correcto del preprocesador para cada plataforma que uses , así como la altura (en el em) para aquellas plataformas en donde el tamaño de la ventana no cambie cuando se cambie al panel seleccionado.(p.ej. Windows).

+ +

Uso en aplicaciones XULRunner

+ +

Cuando abras el diálogo de preferencias en una aplicación XULRunner, asegúrate de comprobar lo siguiente:

+ + + +
pref("browser.preferences.animateFadeIn", false);
+pref("browser.preferences.instantApply", true);
+
+ + + +
var features = "chrome,titlebar,toolbar,centerscreen,modal";
+window.openDialog(url, "Preferences", features);
+
+ +

Bugzilla

+ +

El componente para bugs (no disponible en las opciones de la interfaz de usuario en Firefox/Thunderbird ) se encuentra en Herramientas:Preferencias (archivar un bug lista de bugs)

diff --git a/files/es/social_api/glossary/index.html b/files/es/social_api/glossary/index.html new file mode 100644 index 0000000000..a92cdda06a --- /dev/null +++ b/files/es/social_api/glossary/index.html @@ -0,0 +1,53 @@ +--- +title: Glosario de Social API +slug: Social_API/Glossary +tags: + - Social +translation_of: Archive/Social_API/Glossary +--- +
+

Note: Hay algunos puntos destacados donde los enlaces hacia otros documentos necesitan ser añadidos cuando estos sean escritos.

+
+

Para hacer uso de Social API (si estás escribiendo un nuevo proveedor de servicios sociales o trabajando con un proveedor ya existente), hay un número de términos que necesitas saber. ¡Este glosario te ayudará!

+
+
+ Notificación Cliente-a-usuario (Client-to-user notification)
+
+ La notificación Cliente-a-usuario es la API (interfaz de programación de aplicaciones) que se pone a disposición a un worker del servicio (service worker) para indicar que los datos y las interacciones están pendientes para el usuario en el dispositivo en particular, y que el servicio está listo para proporcionarlas. Sujeto a la configuración del navegador, estas notificaciones pueden ser utilizadas para lanzar una variedad de elementos de interfaz para llamar la atención, incluyendo ventanas temporales de estilo "toast" o "Growl", notificaciones ambientales (por ejemplo brillos, saltos, pulsaciones), o colecciones (por ejemplo paneles desplegables de notificación, listas de eventos pendientes). Estas notificaciones son construidas para permitir al service worker recibir notificaciones cuando el usuario indica interés en una de ellas, permitiendo la presentación de datos o interacción para proceder inmediatamente.
+
+ Panel (Panel)
+
+ Una región del interfaz de usuario (generalmente rectangular) que se muestra temporalmente por encima del contenido y de la interfaz del navegador; estos son usados para interacciones breves que son iniciadas por el usuario o que son muy importantes
+
+ Recomendar (Recommend)
+
+ El acto iniciado por el usuario de indicar que una pieza de contenido web (generalmente una URL) debe marcarse de interés para el usuario. No se espera una entrada distinta a una URL. Una recomendación puede ser completada sin widget; no tiene más interfaz de usuario que el botón, barra de menú o comando que indica "recomienda esto".
+
+ Notificación servidor-a-cliente (Server-to-client notification)
+
+ La notificación de servidor a cliente es un sistema por el cual un servicio Server-to-client notification dispone de notificaciones para ser enviadas de manera rápida y eficaz a un cliente. No es una característica de esta propuesta, aunque las técnicas web existentes incluyendo WebSockets, Server-sent events, XMLHttpRequest con sondeo largo, long polling (o infrequently quick polling) pueden ser todas usadas para workers de servicio (service workers). Se espera que un worker de servicio que recibe una notificación servidor-a-cliente retransmitirá a menudo estos datos en una notificación cliente-a-usuario.
+
+ Mensaje de servicio (Service message)
+
+ Un mensaje es una cadena de texto codificada en JSON que es enviada por el navegador por el worker de servicio, o es enviada por el worker del servicio al navegador. Estos mensajes son usados para coordinar la visualización de elementos de usuario manejados por el navegador y responder a las interacciones de usuario y contenido. Véase Serialización de mensajes para detalles de codificación.
+
+ Worker de servicio (Service worker)
+
+ Un ambiente de cálculo ejecutando durante mucho tiempo un JavaScript, manejado por el navegador y servido por una dirección web específica de usuario, que actúa como un eje o hub de coordinación y comunicación entre el navegador y un servicio web.
+
+ Compartir (Share)
+
+ El acto, iniciado por el usuario, de enviar una parte de contenido web (normalmente una URL) con un comentario opcional, explicación u otros datos a la dirección del usuario, lista de direcciones de usuario, red social u otro destino. Los detalles de la iteración son específicos para cada servicio y se requiere un ShareWidget para representar la interfaz de usuario que complete el intercambio.
+
+ Barra lateral (Sidebar)
+
+ Un rectángulo vertical de espacio de pantalla, posicionado al lado del contenido normal del navegador en una ventana de navegación con pestañas, que es estable a lo largo de la navegación y a cambios de foco entre pestañas. Una barra lateral puede ser minimizada, lo que causa que sea mostrada enteramente en el espacio "por encima del contenido / no superpuesto sobre el contenido".
+
+ Proveedor de servicio social (Social service provider)
+
+ Un servicio web que proporciona una o más APIs al navegador para habilitar características sociales. Es definida en el navegador por un archivo estructurado de texto, que le dice al navegador cómo cargar  recursos de JavaScript y HTML que trae sus funciones al navegador.
+
+ Widget (Widget)
+
+ Un elemento de interfaz de usuario, creado por el navegador, que proporciona una región visual para el contenido producido por el proveedor de servicio.
+
diff --git a/files/es/social_api/guide/index.html b/files/es/social_api/guide/index.html new file mode 100644 index 0000000000..72655a87c5 --- /dev/null +++ b/files/es/social_api/guide/index.html @@ -0,0 +1,32 @@ +--- +title: Guía social API +slug: Social_API/Guide +translation_of: Archive/Social_API/Guide +--- +

 

+

+

Borrador
+ Esta página no está completa.

+ +

+

Este artículo describe el ciclo de vida de un social service worker, como el servicio social permite al navegador interactuar con un sitio  de redes sociales y asi sucesivamente.

+

Ciclo de vida de un social service worker

+

Un proveedor de servicios sociales esta definido por un archivo de texto estructurado (JSON) incluyendo un número de URLs con llave, un nombre y un icono. Los URLs poseen el mismo orígen que el archivo JSON si es cargado remotamente.

+

Un social service worker es instanciado del URL de dicho service worker provisto por el proveedor de servicios; este URL  debe resolver a un archivo JavaScript que es evaluado por el trabajador de servicios. El worker es un worker compartido, renderizado "no comprable" en un estilo muy similar a la especificación de los Trabajadores Web ( aunque debe tomarse en cuenta que la implementación actual no es, de hecho, un Worker).

+

El service worker permanece con vida hasta finalizar, ya sea por cierre de navegador o por un comando de control explícito del usuario.

+

Si el navegador determina que la finalización del service worker es necesaria, todos los contenidos del servicio-nivel asociados con el service worker es descargado ( esto significa, que todos los ServiceWindows y barras laterales seran cerrados) como parte de la finalización.

+

Si el navegador se inicia ( o se reinicia) el servicio durante una sesión de usuario normal, el service worker es primero completamente cargado, y las barras laterales son instanciadas en ventanas existentes. Los ServiceWindows (como los chats) no son reiniciados automáticamente.

+

Flujo de implementación

+

Esta sección ilustra como el social service comenzó, como se comunica con el sitio de redes sociales, y se finaliza.

+

<<<añada un diagrama actual>>>

+
    +
  1. El servicio es registrado con un servicio, widget de barra lateral y widget para compartir.
    2. +
  2. En el momento de inicio del navegador, el trabajador de servicio es instanciado.
    3. +
  3. El servicio abre un conexión a su servicio, si una sesión de usuario esta disponible, y empieza a recibir eventos de inserción.
    4. +
  4. Cuando una ventana del navegador es creada, el contenido del widget de la barra lateral es instanciado.
    5. +
  5. La barra lateral se registra con el servicio usando mozSocial.getWorker().postMessage("hello").
    6. +
  6. El trabajador de servicios captura el mensaje "hello" y añade la sidebarContentWindow a una lista de recepción de eventos.
    7. +
  7. El contenido de la barra lateral podrá entonces realizar una conformidad de conexiónes publicar-suscribir más elaboradas, para limitar que eventos este recibe.
    8. +
  8. Cuando el servicio recibe eventos del servidor (o de otro contenido), invoca window.postMessage() en cada referencia de ventana que fue previamente guardada. La barra lateral se regenera segun sea necesario.
    9. +
  9. Si el usuario hace click en la barra lateral para, por ejemplo, abrir una ventana de chat, window.open() se hace la llamada y una nueva ventana es creada. La ventana de chat se registra con el servicio utilizaando mozSocial.getWorker().postMessage("hello") y recibe un mensaje de vuelta indicandole con quien abrir un chat. El servicio puede entregar eventos servidor-inserción a la ventana de chat, tal vez a través de un sistema publicar-suscribir.
    10. +
diff --git a/files/es/social_api/index.html b/files/es/social_api/index.html new file mode 100644 index 0000000000..087ca43479 --- /dev/null +++ b/files/es/social_api/index.html @@ -0,0 +1,65 @@ +--- +title: Social API +slug: Social_API +tags: + - Social +translation_of: Archive/Social_API +--- +

Social API es una nueva API para facilitar a los navegadores web integrarse con los servicios de redes sociales. Una vez que una red social es implementada por Firefox, permite que el navegador incorpore controles e información del usuario en ese servicio. Los siguientes artículos explican cómo implementar un proveedor de servicios sociales.

+
+

Nota: Mucho del contenido de las subpáginas que se encuentra aquí ha sido escrito pero aún no se ha migrado a este directorio: temporalmente puedes encontrarlos aquí.

+
+
+
+

Documentación de Social API

+
+
+ Glosario de Social API
+
+ Provee definiciones de los términos principales que necesitaras entender cuando estés usando Social API.
+
+ Social API y guía del servicio social.
+
+ Una introducción y guía a Social API y los servicios asociados.
+
+ Archivo manifest del servicio social
+
+ Una descripción de—y una guía para construir— el archivo Manifest requerido.
+
+ Referencia de la API del social service worker
+
+ Una referencia a la API del social service worker.
+
+ Contenido de la API del servicio social: MozSocial
+
+ Una referencia al contenido de la API del servicio social que es proporcionada por el objeto navigator.MozSocial.
+
+ Widgets del servicio social
+
+ Una guía de los widgets proporcionados por el servicio social.
+
+ Implementación de la funcionalidad de chat
+
+ Una guía para implementar las características de chat usando Social API.
+
+

Ver todos...

+
+
+

Obtener ayuda de la comunidad

+

Necesitas ayuda con un problema relacionado con Social API y no puedes encontrar la solución en la documentación?

+
    +
  • Haz tu pregunta en el canal IRC de Mozilla: #socialdev
    • +
+

No te olvides de la netiquette...

+

Herramientas y demostraciones

+ +

Ver todos...

+ + +
+
+

 

diff --git a/files/es/social_api/manifiesto/index.html b/files/es/social_api/manifiesto/index.html new file mode 100644 index 0000000000..5602e901e6 --- /dev/null +++ b/files/es/social_api/manifiesto/index.html @@ -0,0 +1,38 @@ +--- +title: Manifiesto del servicio social +slug: Social_API/Manifiesto +translation_of: Archive/Social_API/Manifest +--- +

Un manifiesto del servicio social es un archivo JSON que describe al navegador cómo crear instancias de un service worker para un service provider.

+

Contenido

+

Como mínimo, un manifiesto del servicio social debe contener una propiedad services, de tipo objeto, que contiene a su vez una propiedad social, también de tipo objeto. El objeto social debe contener las siguientes propiedades:

+
+
+ name
+
+ El nombre del servicio
+
+ iconURL
+
+ La dirección URL del ícono que usará el servicio en la interfaz de usuario.
+
+ workerURL
+
+ La dirección URL de un archivo JavaScript que define el social service worker para el servicio.
+
+ sidebarURL
+
+ La dirección URL de un archivo HTML  que define la barra lateral que utiliza el servicio.
+
+

Ejemplo

+
{
+  "services": {
+    "social": {
+      "name": "Ejemplo de Servicio Social",
+      "iconURL": "/icon.png",
+      "workerURL": "/worker.js",
+      "sidebarURL": "/sidebar.htm",
+    }
+  }
+}
+

 

diff --git a/files/es/social_api/service_worker_api_reference/index.html b/files/es/social_api/service_worker_api_reference/index.html new file mode 100644 index 0000000000..9ce93f64b8 --- /dev/null +++ b/files/es/social_api/service_worker_api_reference/index.html @@ -0,0 +1,377 @@ +--- +title: Service worker API reference +slug: Social_API/Service_worker_API_reference +translation_of: Archive/Social_API/Service_worker_API_reference +--- +

+

No estándar
+ This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

+

+ +

+ +

service Worker de Servicio de Referencia

+ +

Un service Worker hereda todas las limitaciones y los comportamientos disponibles para service Workeres Compartidos de HTML5. Puede crear XMLHttpRequests, usar WebSockets, recibir mensajes de ventanas y del navegador, usar IndexedDB, y publicar mensajes a otras ventanas.

+ +

El service Worker puede usar los métodos ononline, onoffline, y navigator.online y las propiedades que están disponibles para todos los service Workeres para obtener una notificación del estado online/offline de los navegadores.

+ +

Además de los métodos estándar, los Service Wokers tienen acceso a funciones adicionales, todas las cuales están implementadas usando mensajes enviados y recibidos por un service Worker "puertos de mensaje". Así como los puertos de mensaje son inherentemente asíncronos, cualquier mensaje que necesite una respuesta involucrará dos mensajes - uno para la pregunta y otro para la respuesta. No todos los mensajes requieren respuesta - esto es parte de la especificación del mensaje. Los mensajes que no requieran una respuesta son análogos a un 'evento' no solicitado. Si un mensaje sí requiere una respuesta, entonces la respuesta siempre deberá ser enviada en el mismo puerto de la petición y en general, el 'asunto' de la respuesta será el asunto de la petición con "-respuesta" concatenado.

+ +

Se espera que los service Workeres de Servicio provean una función en un ámbito global, nombrado onconnect. El navegador invocará onconnect durante la fase de arranque,pasando un evento. El service Worker debería acceder a la propiedad ports de este evento para extraer una comunicación estable hacia el puerto del navegador, y persiste por el ciclo de vida del service Worker, como esto:

+ +
var apiPort;
+var ports = [];
+onconnect = function(e) {
+    var port = e.ports[0];
+    ports.push(port);
+    port.onmessage = function (msgEvent)
+    {
+        var msg = msgEvent.data;
+        if (msg.topic == "social.port-closing") {
+            if (port == apiPort) {
+                apiPort.close();
+                apiPort = null;
+            }
+            return;
+        }
+        if (msg.topic == "social.initialize") {
+            apiPort = port;
+            initializeAmbientNotifications();
+        }
+    }
+}
+
+// send a message to all provider content
+function broadcast(topic, data) {
+  for (var i = 0; i < ports.length; i++) {
+    ports[i].postMessage({topic: topic, data: data});
+  }
+}
+
+ +

Cada mensaje tiene un elemento con 2 campos: 'topic' y 'data'. El topic identifica el método o evento que es utilizado, y el data especifica datos adicionales únicos al topic. Todos los métodos estandarizados y eventos tienen topics que comienzan con "social." - esto significa que los servicios son libres de usar topics sin este prefijo como un detalle de implementación privada (por ejemplo, para comunicar algún contenido de un servicio a un service Worker de servicio).

+ +

Serialización de mensajes

+ +

Para un mensaje con el asunto topic y los argumentos (arg1:val1, arg2:val2), construye un objeto como:

+ +
{ topic: topic, data: { arg1: val1, arg2: val2 } }
+
+ +

Mensajes de Control enviados a service Workeres de servicios

+ +

social.initialize

+ +

Enviados por el navegador durante el arranque. Cuando el JavaScript de un service Worker ha sido cargado con éxito y evaluado, el navegador enviará un mensaje con este asunto. Cuando el service Worker recibe el social.initalize event, debería enviar ambos, el social.user-profile y, si los Mrcadores de Página son soportados [como en Fx23], el mensaje desocial.page-mark-config.

+ +

social.port-closing

+ +

Enviado por el navegador durante el apagado del service Worker, cuando un PuertodeMensaje para el service Worker está a punto de ser cerrado. Este será el último mensaje que el service Worker recibirá en el puerto.

+ +

Mensajes de Control enviados desde el service Worker de Servicio al navegador

+ +

social.reload-worker

+ +

Enviado por el service Worker para solicitar al navegador que re-cargue al service Worker.

+ +

social.cookies-get

+ +

Enviado por el service Worker para solicitar al navagador que responda con una lista del mismo origen de las cookies para el proveedor. El navegador responderá con un mensaje social.cookies-get-response.

+ +

social.request-chat

+ +

Enviado por el service Worker para solicitar al navagador que abra un nuevo panel de chat flotante con la URL especificada. La ventana de chat abierta por el service Worker será abierta en un modo minimizado.

+ +

Argumentos:

+ +

URL

+ +
+

Cadena, requerida. La URL de la página de chat para abrir en la ventana.

+
+ +

Control de Notificación de Ambiente

+ +

social.user-profile

+ +

Enviada por el service Worker, para establecer las propiedades para el proveedor de icónico de perfil de usuario de datos usado para el botón de la barra. Si el retrato de usuario y userName no se encuentran, el botón de IU indicará el estado de no-logueado. Cuando esté indicando un estado de no-logueado, los íconos de estado establecidos vía social.ambient-notification serán removidos. Un servicio que no maneja el loguéo de usuarios deberá enviar este mensaje con los alores apropiados para el sitio, como lo son el ícono del sitio, URL principal y el nombre de la marca.

+ +

Argumentos:

+ +

iconURL

+ +
+

Cadena, requerida. Si es sumistrada, especifíca la URL hacia una imagen 16x16 pixeles usada por el ícono de estado. El iconURL puede ser una URL de datos con una imagen codificada para evitar solicitudes a los http (ejemplo: "data:image/png;base64,...data...").

+
+ +

portrait

+ +
+

Cadena, opcional. Si es suministrada, especifíca la URL hacia una imagen de 48x48 pixeles del usuario. El retrato puede ser una URL de datos con una imagen codificada para evitar solicitudes a los http.

+
+ +

userName

+ +
+

Cadena, opcional. El nombre de la cuenta mostrado con el retrato en el menú de proveedor.

+
+ +

dispayName

+ +
+

Cadena, requerido. Nombre real del usuario usado para propósitos de visualización en varios elementos de IU.

+
+ +

profileURL

+ +
+

Cadena, requerido. URL a  la página de perfil de un usuario logueado. Este será abierto en una pestaña normal del navegador cuando el nombre de usuario es cliqueado.

+
+ +

social.ambient-notification

+ +

Enviado por el service Worker, para actualizar o crear un ambiente de íconos de notificaciones. Es enviado uno por cada ícono. Un usuario debe estar logueado para mostrar los íconos de estado, y deberás llamar a social.user-profile antes de llamar social.ambient-notification para establecer los íconos de estado.

+ +

Argumentos:

+ +

name

+ +
+

Cadena. Un identificador para el ícono. La primera vez que un nombre dado es mostrado, eficazmente crea un nuevo ícono. Si el mismo nombre es usado en llamadas sub-secuentes, el ícono existente es actualizado.

+
+ +

iconURL

+ +
+

Cadena, opcional. Si es suministrada, especifíca la URL hacia una imagen de 16x16 pixeles usada para el ícono de estado. El iconURL puede ser una URL con una imagen codificada para evitar solicitudes a los http (ejemplo: "data:image/png;base64,...data...")

+
+ +

counter

+ +
+

Número, opcional. Especifíca un númeroque será sobre-puesto sobre el ícono, típicamente usado para transmitir un concepto unread.

+
+ +

contentPanel

+ +
+

Cadena, opcional. Especifíca la URL de un contenido que será mostrado en el panel popup para el ícono.

+
+ +

Control de Notificaciones Activo

+ +

social.notification-create

+ +

Enviado por el service Worker, para crear y mostrar un objeto de notificación. Esto solicita que el navegador notifique al usuario de un relevante e inmediato cambio de estado. Ver https://developer.mozilla.org/en/DOM/navigator.mozNotification para más detalles. Cuando el usuario cliquea en la notificación, el mensaje social.notification-action es enviado al service Worker. El título de la notificación siempre será el nombre del proveedor.

+ +

NOTA: Queremos aumentar el objeto mozNotification definido en los documentos con un "tipo" de campo adicional. Detalles TBD. NOTA: No hay manera de almacenar la duración y tampoco de "cancelar" una notificación (la hipótesis es de que son de muy corta duración). ¿Está bien?

+ +

Argumentos:

+ +

id

+ +
+

Cadena: Un ID para la notificación. Este ID no será mostrado pero será pasado atrás vía el evento social.notification-action si el usuario cliquea en la notificación.

+
+ +

type

+ +
+

Cadena: La cadena Tipo deberá ser consistente para cada tipo de notificación. Este será usado por algun sistema de notificación para proveer filtraciones de notificaciones al nivel del usuario. Un proveedor deberá elegir cualquier cadena para el tipo, pero deberá mantener los tipos de cadena consistentes y descriptivos para cada tipo de acción. Por ejemplo, las notificaciones de chat deberían siempre de tener la cadena del mismo tipo. Sugerencia/ejemplo que incluye la notificación:

+
+ + + +

icon

+ +
+

Cadena/nulo. La URL de una imagen a ser colocada en una notificación. Mientras que esta puede ser cualquier RL válida, los implementadores están muy recomendados que usen una URL de datos para minimizar la latencia.

+
+ +

body

+ +
+

Cadena: El cuerpo del mensaje de notificación. este cuerpo será tomado como un super-enlace y podrá ser cliqueado. El marcado de HTML no es soportado.

+
+ +

action

+ +
+

Cadena: Una acción para ejecutar cuando el usuario hace clic en la notificación. Si ninguna acción es prevista, la notificación no es cliqueable. Acualmente las únicas acciones soportadas son link, callback y openServiceWindow. Si la acción está difinida, actionArgs también deberá ser definida.

+
+ +

actionArgs

+ +
+

Objeto: Una objeto con argumentos (abajo). Acciones soportadas y sus actionArgs son:

+
+ + + +

social.notification-action

+ +

Enviada al service Worker como una respuesta a la notificación "callback", después de que el usuario ha cliqueado en la notificación.

+ +

Argumentos:

+ +

id

+ +
+

Cadena: el ID de la notificación que fue cliqueada.

+
+ +

action

+ +
+

Cadena: La acción enviada en social.notification-create.

+
+ +

actionArgs

+ +
+

Objeto: Las actionArgs enviados en social.notification-create.

+
+ +

Marcadores de página

+ +

ESTADO: CON MIRA EN Fx23 (reemplazando Link Recommendation below)

+ +

Las Marcas de Página son un simple mecanismo de compartir una URL con un proveedor social. Las Marcas de Página difieren para compartir en que la URL solo es enviada al proveedor. Esta funcionalidad puede manejar casos de uso como el Me Gusta de Facebook, Google +1, Pocket, u otras características como ver-más-tarde. Cuando estan habilitados, y el botón adicional de Marca aparecerá al final de la botonera Social en Firefox. No hay una IU asociada con otro botón que no sea el cambiar la imagen de botón para reflejar el estado de marcado o no-marcado.

+ +

social.page-mark-config

+ +

Enviado por el service Worker para notificar a Firefox de soporte para las Marcas de Página. Este mensaje puede ser enviado en cualquier momento. Te recomendamos mandarlo cuando se esté manejando el mensaje social.initialize.

+ +

Argumentos:

+ +

images

+ +
+

Objeto. Debe tener dos llaves de tipo String, 'marked' y 'unmarked', los cuales serán usados como ícono del botón de Marcador de Página. El agente de usuario buscará si la actual página ha sido marcada - si sí, mostrará la imagen 'marked', de otra manera motrará la imagen 'unmarked'. Puede contener una imagen direccionable - web o una URL de datos conteniendo una imagen de datos generada dinamicamente.  Implementadores están fuertemente recomendados de usar una URL de datos para minimizar la latencia. Cada imagen se espera que sea de de 16x16 píxeles.

+
+ +

messages

+ +
+

Objeto. Debe tener las siguientes llaves de cadena:

+
+ + + +

social.page-mark

+ +

Enviado por el navegador hacia el service Worker cuando el usuario 'marca' o 'desmarca' una página. No hay respuesta esperada. El navegador rastreará el estado de la marca de la página separadamente del proveedor. Si el usuario limpia su historial, todas las marcas de página serán removidas.

+ +

Arguments:

+ +

url

+ +
+

Cadena. La URL de la página es marcada.

+
+ +

marked

+ +
+

Boolean.

+
+ +

 

+ +

Enlace de Control de Recomendación

+ +

 

+ +

NOTA: El siguiente mensaje usuario-recomendación fue RECHAZADO y REMOVIDO de Fx23. Fue reemplazado por Page Marks.

+ +

social.user-recommend-prompt

+ +

ESTADO: RECHAZADO, REMOVIDO de Fx23, REEMPLAZADO CON social.page-mark-config

+ +

Enviado por el navegador para solicitar una vista de la interfaz para la "recomendación de usuario". El service Worker debe responder con una user-recommend-prompt-response

+ +

Nota que tipicamente este mensaje solo será enviado cuando un proveedor está activado y la respuesta será usada para todas las URL's. En otras palabras, el proveedor no espera que este mensaje sea enviado cada vez que el agente de usuario navega o muestra una nueva UTL.

+ +

Arguments:

+ +

None

+ +

social.user-recommend-prompt-response

+ +

STATUS: DEPRECATED, REMOVED Fx23

+ +

The Worker constructs and posts a user-recommend-prompt-response in response to a social.user-recommend-prompt message received from the browser. See social.user-recommend-prompt for more details.

+ +

Arguments:

+ +

images

+ +
+

Object. Must have 2 string keys, 'share' and 'unshare', which each value being the URL to an image which will be set as the "src" property of an image contained in the user-facing click target for the "recommend" action. The user agent will track if the current page has been shared - if so, it will show the 'unshare' image, otherwise will show the 'share' image. It can contain a web-addressible image or a data URL containing dynamically-generated image data. Implementors are strongly encouraged to use a data URL to minimize latency. Each image is expected to be 16px wide and 16px high.

+
+ +

messages

+ +
+

Objeto. Debe tener las siguientes llaves de cadena:

+
+ + + +

social.user-recommend

+ +

ESTADO: RECHAZADA, REMOVIDO DE Fx23, REEMPLAZADO CON social.page-mark

+ +

Indica que el usuario ha hecho clic en el elemento de interfaz "user recommendation". El mensaje incluye:

+ +

Argumentos:

+ +

url

+ +
+

Cadena, requerida. La URL que el usuario está viendo, incluída la cadena de busqueda, pero menos cualquier texto de hash, de la raíz de la actual vista del navegador.

+
+ +

No es necesaria una respuesta; como fuere, el servicio debe responder en el mismo puerto con una usuario-recomendación-prompt-respuesta si el objetivo de clic debe cambiar su apariencia.

+ +

social.user-unrecommend

+ +

ESTADO: RECHAZADO, REMOVIDO DE Fx23

+ +

Indíca que al usuario le gustaría volver a su previa recomendación. El mensaje incluye:

+ +

Argumentos:

+ +

url

+ +
+

Cadena, requerido. La URL que el usuario está viendo, incluyendo la cadena de consulta, pero no los textos de hash, de la raíz del contexto actual de vista del navegador.

+ +
+
+
+ +

 

diff --git a/files/es/social_api/widgets/index.html b/files/es/social_api/widgets/index.html new file mode 100644 index 0000000000..85ae2e03a5 --- /dev/null +++ b/files/es/social_api/widgets/index.html @@ -0,0 +1,16 @@ +--- +title: Widgets +slug: Social_API/Widgets +translation_of: Archive/Social_API/Widgets +--- +

Widgets

+

SidebarWidget

+

Si un servicio define un SidebarWidget, el navegador crea instancias, en determinadas ventanas del navegador, un área de contenido cuyo contenido se encuentra en el sidebarURL definido en el manifiesto. Estas regiones no se crean instancias hasta que el Worker ha sido completamente cargado.El contenido de estas regiones tiene la API adicional definida en la referencia de Service Content API.

+

Las Sidebars pueden estar en estado visibles u ocultos.

+ +

Windows Sidebar se crea una instancia única en las ventanas del navegador que tienen una completa interfaz de navegación por pestañas, ventanas creadas con window.open que no cuentan con estos elementos de la interfaz no recibe una barra lateral.

+

Cuando una pestaña que se representa directamente en el navegador sin barra de direcciones se selecciona, la barra lateral se coloca automáticamente en el estado oculto. Cuando el usuario sale de esa pestaña, la barra lateral se hace visible de nuevo. Estas pestañas incluyen la página de administración de complementos, about:permissions, etc.

+

Los estados minimizada / maximizada / oculta de la barra lateral del widget son consistentes a través de todas las ventanas del navegador. El estado más reciente es recordado y usado para las nuevas ventanas, y se conserva en todos los reinicios del navegador.

diff --git a/files/es/spidermonkey/index.html b/files/es/spidermonkey/index.html new file mode 100644 index 0000000000..231a18eab5 --- /dev/null +++ b/files/es/spidermonkey/index.html @@ -0,0 +1,115 @@ +--- +title: SpiderMonkey +slug: SpiderMonkey +tags: + - SpiderMonkey +translation_of: Mozilla/Projects/SpiderMonkey +--- +
{{SpiderMonkeySidebar}}
+ +
+

SpiderMonkey is Mozilla's JavaScript engine written in C and C++. It is used in various Mozilla products, including Firefox, and is available under the MPL2.

+
+ +

Standalone source code releases can be found on the Releases page.

+ +
+
+

Guides

+ +

Building

+ +
+
SpiderMonkey Build Documentation
+
How to get SpiderMonkey source code, build it, and run the test suite.
+
+ +

Using SpiderMonkey

+ +
+
Introduction to the JavaScript shell
+
Documentation of the command-line JavaScript shell, js.
+
JSAPI User Guide
+
This guide provides an overview of SpiderMonkey and describes how you can embed engine calls in your applications to make them JavaScript-aware.
+
JSAPI cookbook
+
Shows the JSAPI translation of some commonly used JavaScript expressions and statements.
+
GC Rooting Guide
+
Guide on how to write code compatible with the Generational GC in SpiderMonkey.
+
How to embed the JavaScript engine
+
An older tutorial about embedding SpiderMonkey.
+
+ +

Hacking on SpiderMonkey

+ +
+
New to SpiderMonkey
+
A guide to hacking on SpiderMonkey.
+
Setting up CDT to work on SpiderMonkey
+
How to configure Eclipse to work on the SpiderMonkey code.
+
Contributing to SpiderMonkey (YouTube)
+
A video that is less than four minutes long.
+
+ +
+
Running Automated JavaScript Tests
+
How to run the JavaScript test suites.
+
Creating JavaScript tests
+
How to add tests to the JavaScript test suites.
+
+
+ +
+

Reference

+ +
+
JSAPI Reference
+
SpiderMonkey API reference.
+
JS Debugger API Reference
+
API reference for the Debugger object introduced in SpiderMonkey 1.8.6, which corresponds to Gecko 8.0 {{ geckoRelease("8.0") }}.
+
Bytecode descriptions
+
Listing of SpiderMonkey's bytecodes.
+
Parser API
+
Reflection of the SpiderMonkey parser, made available as a JavaScript API.
+
+ +

Tips, tricks and philosophy

+ +
+
Future Directions
+
Future directions for functionality, design, and coding practices.
+
SpiderMonkey Internals
+
A design overview and a file-by-file walkthrough of the implementation.
+
Bytecode Reference
+
SpiderMonkey bytecode reference.
+
SpiderMonkey Internals: GC
+
Separate internals article on the GC
+
SpiderMonkey Internals: Hacking Tips
+
Collection of helpful tips & tools for hacking on the engine
+
+ + + + + +

Releases

+ +
+
SpiderMonkey release notes
+
Current and past versions: 52, 45, 38, 31, 24, 17
+
+ +

Community

+ + + +
+
+
+
diff --git a/files/es/storage/index.html b/files/es/storage/index.html new file mode 100644 index 0000000000..87e2df368e --- /dev/null +++ b/files/es/storage/index.html @@ -0,0 +1,252 @@ +--- +title: Storage +slug: Storage +tags: + - Interfaces + - Storage + - Todas_las_Categorías + - Toolkit API + - páginas_a_traducir +--- +
+

{{ Fx_minversion_header(2) }}

+

Storage es una API para la  base de datos SQLite. Responde a las llamadas entidades de confianza, es decir, componentes internos de Firefox y extensiones. hace referencia completa a todos los métodos y propiedades de las conexiones de la interfaz de la  base de datos, lee mozIStorageConnection.

+

El API está actualmente "unfrozen," lo que significa que está sujeto a cambios en cualquier momento. Es muy probable que el API cambie en la transición entre Firefox 2 y Firefox 3.

+

 

+
Nota: Storage no es lo mismo que la característica DOM:Storage que puede ser usada por páginas web para almacenar datos persistentes o la Session store API (una utilidad XPCOM de almacenaje para usar con las extensiones).
+

 

+

Empezando

+

Este documento cubre el API mozStorage y algunas peculiaridades de sqlite. No cubre SQL o el sqlite. Sin embargo, puedes encontrar varios enlaces útiles en la sección Ver también. Para obtener ayuda sobre el API mozStorage, puedes escribir a mozilla.dev.apps.firefox en el servidor de noticias news.mozilla.org. Para reportar errores, usa Bugzilla (producto "Toolkit", componente "Storage").

+

Bueno, aquí vamos. mozStorage fue diseñado igual que muchos otros sistemas de base de datos. El procedimiento general de su uso es:

+ +

Abrir una conexión

+

Para los usuarios de C++: La inicialización del servicio de storage debe hacerse desde el mismo hilo principal.Si lo inicializas por primera vez desde otro hilo, obtendrás un error. Por tanto, si quieres usar el servicio dentro de un hilo, asegúrate de llamar a getService desde el hilo principal para estar seguro de que el servicio ha sido creado.

+

Ejemplo de apertura de una conexión a "asdf.sqlite" en el directorio del perfil del usuario, en C++:

+
nsCOMPtr<nsIFile> dbFile;
+rv = NS_GetSpecialDirectory(NS_APP_USER_PROFILE_50_DIR,
+                            getter_AddRefs(dbFile));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = dbFile->Append(NS_LITERAL_STRING("asdf.sqlite"));
+NS_ENSURE_SUCCESS(rv, rv);
+
+mDBService = do_GetService(MOZ_STORAGE_SERVICE_CONTRACTID, &rv);
+NS_ENSURE_SUCCESS(rv, rv);
+rv = mDBService->OpenDatabase(dbFile, getter_AddRefs(mDBConn));
+NS_ENSURE_SUCCESS(rv, rv);
+
+

MOZ_STORAGE_SERVICE_CONTRACTID está definido en {{ Source("storage/build/mozStorageCID.h") }}. Su valor es "@mozilla.org/storage/service;1"

+

Ejemplo en JavaScript:

+
var file = Components.classes["@mozilla.org/file/directory_service;1"]
+                     .getService(Components.interfaces.nsIProperties)
+                     .get("ProfD", Components.interfaces.nsIFile);
+file.append("my_db_file_name.sqlite");
+
+var storageService = Components.classes["@mozilla.org/storage/service;1"]
+                        .getService(Components.interfaces.mozIStorageService);
+var mDBConn = storageService.openDatabase(file);
+
+
Nota: La función OpenDatabase está sujeta a cambios. Seguramente será simplificada y ampliada para que sea más difícil meterse en problemas.
+
+

Sería tentador nombrar a tu base de datos con un nombre terminado en ".sdb" por sqlite database, pero esto no es recomendable. Esta extensión es tratada de forma especial por Windows como una extensión para "Application Compatibility Database" y sus cambios están respaldados por el sistema automáticamente como parte del sistema de recuperación del sistema. Esto puede dar lugar a un tratamiento desmesurado de las operaciones del archivo.

+

Sentencias

+

Sigue los pasos para crear y ejecutar sentencias SQL en tu base de datos SQLite. Para una completa referencia, lee mozIStorageStatement.

+

Creando una sentencia

+

Hay dos maneras de crear una sentencia. Si no tienes parámetros y la sentencia no devuelve ningún dato, usa mozIStorageConnection.executeSimpleSQL.

+
C++:
+rv = mDBConn->ExecuteSimpleSQL(NS_LITERAL_CSTRING("CREATE TABLE foo (a INTEGER)"));
+
+JS:
+mDBConn.executeSimpleSQL("CREATE TABLE foo (a INTEGER)");
+
+

De otra forma, deberías preparar la sentencia usando mozIStorageConnection.createStatement:

+
C++:
+nsCOMPtr<mozIStorageStatement> statement;
+rv = mDBConn->CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+
+JS:
+var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1");
+
+

Este ejemplo usa el comodín "?1" para recoger un parámetro devuelto más adelante (lee la próxima sección).

+

Una vez que has preparado la sentencia, puedes agrupar su parámetros, ejecutarla y re usarla una y otra vez. Si utilizas una sentencia repetidamente, el uso de sentencias pre compiladas te brindará una mejora notable en la ejecución, ya que las consultas SQL no necesitan ser analizadas cada vez.

+

If you are familiar with sqlite, you may know that prepared statements are invalidated when the schema of the database changes. Fortunately, mozIStorageStatement detects the error and will recompile the statement as needed. Therefore, once you create a statement, you don't need to worry when changing the schema; all statements will continue to transparently work.

+

Agregar los parámetros

+

Generalmente es mucho mejor agregar los parámetros separadamente, en lugar de intentar construir una sentencia SQL en una cadena conteniendo los parámetros. Entre otras cosas, esto evita el ataque de inyección de SQL, ya que un parámetro suelto nunca podrá ser ejecutado como una sentencia SQL.

+

Se agregan los parámetros a una sentencia SQL reemplazando los comodines. Los comodines son llamados por orden, empezando con el "?1", luego el "?2", etcétera. Usa la función BindXXXParameter(0) BindXXXParameter(1)... para cambiar esos comodines.

+
Presta atención: Los indices en los comodines van a partir de 1. Los indices de las funciones de cambio, empiezan en 0. Esto es: el "?1" corresponde al parámetro 0, "?1" corresponde al parámetro 1, etcétera.
+
+

Tambien puedes usar parámetros con nombre como: ":ejemplo" en lugar de "?xx".

+

Un comodín puede aparecer varias veces en una cadena SQL y todas las veces será reemplazado por el correspondiente valos. Los parámetros que no han sido agragados (unbound) serán interpretados como NULL

+

Los ejemplos a continuación, usan bindUTF8StringParameter() y bindInt32Parameter(). Para una lista de todas las demás funciones, lee mozIStorageStatement.

+

Ejemplo en C++:

+
nsCOMPtr<mozIStorageStatement> statement;
+rv = mDBConn->CreateStatement(NS_LITERAL_CSTRING("SELECT * FROM foo WHERE a = ?1 AND b > ?2"),
+                              getter_AddRefs(statement));
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement->BindUTF8StringParameter(0, "hello"); // "hello" será sustituido por "?1"
+NS_ENSURE_SUCCESS(rv, rv);
+rv = statement->BindInt32Parameter(1, 1234); // 1234 será sustituido por "?2"
+NS_ENSURE_SUCCESS(rv, rv);
+
+

Ejemplo en JavaScript:

+
var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b > ?2");
+statement.bindUTF8StringParameter(0, "hello");
+statement.bindInt32Parameter(1, 1234);
+
+

Si usas parámetros con nombre, deberías usar el método getParameterIndex para obtener el índice del parámetro con nombre. Aquí hay un ejemplo en JavaScript:

+
var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = :myfirstparam AND b > :mysecondparam");
+
+var firstidx = statement.getParameterIndex(":myfirstparam");
+statement.bindUTF8StringParameter(firstidx, "hello");
+
+var secondidx = statement.getParameterIndex(":mysecondparam");
+statement.bindInt32Parameter(secondidx, 1234);
+
+

Por supuesto, puedes mezclar parámetros con nombre y con índice en la misma consulta:

+
var statement = mDBConn.createStatement("SELECT * FROM foo WHERE a = ?1 AND b > :mysecondparam");
+
+statement.bindUTF8StringParameter(0, "hello");
+// you can also use
+// var firstidx = statement.getParameterIndex("?1");
+// statement.bindUTF8StringParameter(firstidx, "hello");
+
+var secondidx = statement.getParameterIndex(":mysecondparam");
+statement.bindInt32Parameter(secondidx, 1234);
+
+

Si quieres usar la clausula WHERE con una expresión IN ( value-list ), las sentencias de Bindings no funcionarán. En su lugar, construye una cadena. Si no estas usando unstradas del usuario, la seguridad no es una de tus preocupaciones:

+
var ids = "3,21,72,89";
+var sql = "DELETE FROM table WHERE id IN ( "+ ids +" )";
+
+

Ejecutar una sentencia

+

La manera principal de ejecutar una sentencia es con mozIStorageStatement.executeStep. Esta función te permite enumerar todos los resultados (filas / registros) que produzca tu sentencia y te notificará cuando no hay más resultados.

+

Después de una llamada a executeStep, debes usar la función de recogida apropiada en mozIStorageValueArray para recoger el valor en una fila (mozIStorageStatement implementa mozIStorageValueArray). El ejemplo de abajo sólo usa getInt32().

+

Puedes obtener el tipo de un valor desde mozIStorageValueArray.getTypeOfIndex, que devuelve el tipo de la columna especificada. Ten cuidado: sqlite no es una base de datos que maneje tipos. Si requieres un tipo diferente, sqlite hará lo mejor que pueda para convertirlo, y dará algún tipo por defecto si no lo consigue. Por tanto, es imposible obtener errores de tipo, pero puedes obtener datos extraños como valor devuelto.

+

En código C++ se puede también usar las funciones AsInt32, AsDouble, etcétera. que devuelven el valor como un valor más manejable en C++. Ten precaución, sin embargo, ya que no tendrás errores si tu índice es invalido. Es imposible obtener otros errores, yq que sqlite siempre convertirá los tipos, aún si no tienen sentido.

+

Ejemplo C++:

+
PRBool hasMoreData;
+while (NS_SUCCEEDED(statement->ExecuteStep(&hasMoreData)) && hasMoreData) {
+  PRInt32 value = statement->AsInt32(0);
+  // use the value...
+}
+
+

Ejemplo Javascript:

+
while (statement.executeStep()) {
+  var value = statement.getInt32(0); // ¡usa la función correcta!
+  // usa el valor...
+}
+
+

La función mozIStorageStatement.execute() es útil cuando no estás obteniendo datos de la sentencia. Lo que hace es ejecutar la sentencia una vez y luego volverla al estado inicial. Esto puede ser útil para las sentencias de inserción, ya que realmente limpia el código:

+
var statement = mDBConn.createStatement("INSERT INTO my_table VALUES (?1)");
+statement.bindInt32Parameter(52);
+statement.execute();
+
+

Este es un ejemplo simple pero completo en JavaScript y XUL, de cómo ejecutar sentencias SQL en una base de datos: Image:TTRW2.zip.

+

Re crear una sentencia (reset)

+

Es importante re crear sentencias que no han sido usadas nuevamente. Las sentencias no re creadas, dejarán un bloqueo en las tablas y evitarán que otras sentencias puedan acceder a los datos. Sentencias de lectura no re creadas evitarán que funcionen las sentencias de escritura.

+

Cuando los objetos sentencias son liberados, su correspondiente sentencia en la base de datos es liberada. Si estás usando C++ y sabes que todas las referencias serán destruidas, no tienes que re crear explicitamente las sentencias. Además, si usas mozIStorageStatement.execute(), tampoco necesitas re crear explicitamente las sentencias, esta función lo hará por ti. En otro caso, llama a mozIStorageStatement.reset().

+

Los que usáis JavaScript, deberéis aseguraros de re crear las sentencias. Se particularmente escrupuloso con las excepciones. Querrás estar seguro de re crear las sentencias aún si ocurre una excepción, o los accesos subsiguientes pueden no ser posibles. Re crear una sentencia es relativamente poco pesado y no ocurre nada malo si ya ha sido re creada, así que no te preocupes por re creaciones innecesarias.

+
var statement = connection.createStatement(...);
+try {
+  // usa la sentencia...
+} finally {
+  statement.reset();
+}
+
+

Los que usáis C++ debéis hacer lo mismo. Existe un objeto en {{ Source("storage/public/mozStorageHelper.h") }} llamado mozStorageStatementScoper que se asegurará que una sentencia dada sea re creada cuando sales del ámbito. Es muy recomendable que uses este objeto si te es posible.

+
void someClass::someFunction()
+{
+  mozStorageStatementScoper scoper(mStatement)
+  // use the statement
+}
+
+

id de la última inserción

+

Usa la propiedad lastInsertRowID en la conexión para obtener el id (id de la fila) de la última operación INSERT operation en la base de datos.
+Esto es útil si tienes una columna en tu tabla que sea la clave primaria (como INTEGER PRIMARY KEY o INTEGER PRIMARY KEY AUTOINCREMENT) en cuyo caso SQLite asigna automáticamente un valor a cada fila insertada, si tu no proporcionas alguno. El valor devuelto es del tipo number en JS y long long en C++.

+

lastInsertRowID JS example:

+
var sql = "INSERT INTO contacts_table (number_col, name_col) VALUES (?1, ?2)"
+var statement = mDBConn.createStatement(sql);
+    statement.bindUTF8StringParameter(0, number);
+    statement.bindUTF8StringParameter(1, name);
+    statement.execute();
+    statement.reset();
+
+var rowid = mDBConn.lastInsertRowID;
+
+

Transacciones

+

mozIStorageConnection tiene funciones para las transacciones de comienzo y final. Si no usas transacciones explicitamente, se creará una transacción implícita por ti para cada sentencia. Esto tiene una gran implicación en el rendimiento. Hay una sobrecarga en cada transacción, especialmente para las transacciones de confianza. Por tanto verás una apreciable ganancia en el rendimiento, cuando estés haciendo ejecutando varias sentencias en una fila, si las agrupas en una transacción. Ver Storage:Performance para más detalles.

+

La mayor diferencia entre otros sitemas de base de datos y sqlite es que éste último no implementa transacciones anidadas. Esto significa que en el momento en que una transacción es abierta, no puedes abrir otra transacción. Puedes usar mozIStorageConnection.transactionInProgress para ver si la transacción está en progreso.

+

También puedes simplemente ejecutar "BEGIN TRANSACTION" y "END TRANSACTION" directamente como sentencias SQL (esto es lo que hace la conexión cuando llamas a las funciones). Sin embargo, el uso de mozIStorageConnection.beginTransaction y las funciones relacionadas, está fuertemente recomendado, ya que guarda el estado de la transacción en la conexión. De otra forma, el atributo transactionInProgress tendrá el valor erróneo.

+

sqlite tiene vario tipos de transacción:

+ + + +

Puedes pasar este tipo de transacción a mozIStorageConnection.beginTransactionAs para determinar que clase de transacción necesitas. Recuerda que si ya se ha iniciado otra transacción, esta operación no tendrá éxito. Generalmente, el tipo por defecto de TRANSACTION_DEFERRED es suficiente y no deberías usar otro tipo, a no ser, que realmente sepas porqué lo necesitas. Para más información, lee la documentación de sqlite: BEGIN TRANSACTION y locking.

+
var ourTransaction = false;
+if (!mDBConn.transactionInProgress) {
+  ourTransaction = true;
+  mDBConn.beginTransactionAs(mDBConn.TRANSACTION_DEFERRED);
+}
+
+// ... usa la conexión ...
+
+if (ourTransaction)
+  mDBConn.commitTransaction();
+
+

A partir de código C++, puedes usar la clase mozStorageTransaction definida en {{ Source("storage/public/mozStorageHelper.h") }}. Esta clase iniciará una transacción del tipo especificado en la conexión especificada y, cuando salga del entorno, bien confiará o bien volverá la transacción a su estado inicial. Si ya hay una transacción en progreso, la clase de ayuda de la transacción no hará nada.

+

También tiene funciones de confianza explicitas. El uso típico es que crees la clase que por defecto vuelva a su estado original (rollback) y luego realices la confianza de la transacción explicitamente cuando tenga éxito:

+
nsresult someFunction()
+{
+  // deferred transaction (the default) with rollback on failure
+  mozStorageTransaction transaction(mDBConn, PR_FALSE);
+
+  // ... use the connection ...
+
+  // everything succeeded, now explicitly commit
+  return transaction.Commit();
+}
+
+

Cómo corromper tu base de datos

+ + + + + + +

Bloqueo en SQLite

+

SQLite bloquea la base de datos enteramente, esto es, cualquier intento de lectura causará un que intento de escritura devuelva SQLITE_BUSY, y una escritura activa causará que cualquier intento de lectura devuelva SQLITE_BUSY. Una sentencia es considerada activa a partir del primer step() hasta que se llame a reset(). execute() llama a step() y reset() a un tiempo. Un problema común es olvidar reset() una sentencia después de haber terminado con step().

+

Mientras que una conexión SQLite dada es capaz de tener muchas sentencias abiertas, su modelo de bloqueo limita lo que estas sentencias pueden realmente hacer simultáneamente (leer o escribir). De hecho es posible que muchas sentencias estén leyendo al mismo tiempo, sin embargo, no es posible que varias sentencias estén leyendo y escribiendo a la vez en la misma tabla -- aún cuando deriven de la misma conexión.

+

El modelo de bloque de SQLite se conoce como "two-tiered": nivel de conexión y nivel de tabla. La mayoría de las personas están familiarizadas con el nivel de conexión (base de datos): múltiples lecturas pero solo una escritura. El nivel de tabla (B-Tree) es lo que a veces puede resultar confuso. (Internamente, cada tabla en la base de datos tiene su propio B-Tree, de modo que tabla y "B-Tree" son técnicamente sinonimos).

+

Bloqueo a nivel de tabla

+

Podrías pensar que si tienes sólo una conexión, i esta bloquea la base da datos para escritura, podrías usar multiples sentencias para hacer lo que quieras. No exactamente. Debes tener en cuenta que los bloqueos a nivel de tabla (B-Tree) que están mantenidos por sentencias se mantienen a lo largo de la base de datos (por ejemplo, las sentencias de manejo SELECT).

+

La regla general es esta: una sentencia de manejo puede not modificar una tabla (B-Tree) que otras sentencias de manejo están leyendo (tienen el cursor abierto sobre ellas) -- aún cuando la sentencia de manejo comparte la misma conexión (contenido de la transacción, bloqueo de la base de datos, etcétera) con las otras sentencias de manejo. Intentar hacer eso, también bloqueará (o devolverá SQLITE_BUSY).

+

Este problema a menudo aparece cuando intestas interactuar en una tabla usando una sentencia mientras modificas registros en la tabla con otra sentencia. Esto no funcionará (o entraña muchas posibilidades de no funcionar, dependiendo del optimizador (ver más abajo)). Las sentencias de modificación causarán un bloque ya que la sentencia de lectura tiene el cursor abierto sobre la tabla.

+

Trabajando con los problemas de bloqueo

+

La solución es seguir (1) como se dice más arriba. Teóricamente, (2) actualmente no debería funcionar con SQLite 3.x En este escenario, los bloqueos de base de datos entran en juego (con múltiples conexiones) adicionalmente a los bloqueos de tablas. La conexión 2 (conexiones de cambio) no serán capaces de modificar (escribir en) la base de datos mientras que la conexión 1 (conexión de lectura) esté leyendo. La conexión 2 requerirá un bloqueo exclusivo para ejecutar una sentencia de modificación SQL, que no podrá obtener mientras la conexión 1 tenga sentencias activas leyendo la base de datos (La conexión 1 tiene un bloqueo de lectura compartido durante este tiempo que prohíbe a cualquier otra conexión tener un bloqueo exclusivo).

+

Otra opción es usar una tabla temporal. Crea una tabla temporal que contenga los resultados de la tabla de interés, interactúa con ella (poniendo los bloqueos de la tabla con las sentencias de lectura en la tabla temporal) y entonces las sentencias de modificación pueden hacer cambios en la tabla real sin ningún problema). Esto puede hacerse con sentencias derivadas de una conexión simple (contexto de la transacción). Esta escena ocurre algunas veces 'detrás del escenario' ya que ORDERED BY puede producir tablas temporales internamente. Sin embargo, no es seguro asumir que el optimizador hará esto en todos los casos. Crear tablas temporales explicitamente, es la única forma segura de realizar esta última opción.

+

Seguridad de los hilos

+

El servicio mozStorage y sqlite son hilos seguros. Sin embargo, ningún otro mozStorage u objeto sqlite son hilos seguros.

+ + + +

De nada vale, sin embargo, que los autores de las extensiones de JavaScript del navegador, esten menos impactados por estas restricciones de lo que estaban al principio. Si una base de datos es creada y usada de forma exclusiva desde JavaScript, la seguridad de los hilos no será, normalmente, una preocupación. El motor JavaScript interno de Firefox (SpiderMonkey) ejecuta el JavaScript dentro de un único y persistente hilo, excepto cuando JavaScript se ejecuta en un hilo diferente o es ejecutado a partir de una llamada realizada desde otro hilo (p.e. desde interfaces de stream o delde la red). Con excepción del uso incorrecto de JavaScript en múltiples hilos, los problemas solo deberían ocurrir si se accede aun hilo asociado a una base de datos previamente en uso a través de mozStorage.

+

Ver también

+ + +

 

+

{{ languages( { "es": "es/Almacenamiento", "fr": "fr/Storage", "ja": "ja/Storage", "pl": "pl/Storage", "en": "en/Storage" } ) }}

diff --git a/files/es/storage/performance/index.html b/files/es/storage/performance/index.html new file mode 100644 index 0000000000..91f15d4cb2 --- /dev/null +++ b/files/es/storage/performance/index.html @@ -0,0 +1,196 @@ +--- +title: Rendimiento +slug: Storage/Performance +translation_of: Mozilla/Tech/XPCOM/Storage/Performance +--- +

+
+
+ + mozStorage utiliza SQLite como servidor. Cuenta con el rendimiento generalmente bueno para una pequeña base de datos integrados. Sin embargo, muchas cosas causan varias operaciones de base de datos a ser lenta.
+

 

+
+

Transacciones

+

+ +

 

+


+ Editar la sección
+
+ No hay sobrecarga asociada con cada transacción. Cuando se ejecuta una SQL de forma aislada, una transacción implícita se crea alrededor de esa declaración. Cuando las transacciones se han comprometido, sqlite es el diario que requiere la sincronización de datos en el disco. Esta operación es extremadamente lento. Por lo tanto, si usted está haciendo muchas de las transacciones en una fila, obtendrás mejoras significativas en el rendimiento de las rodea en una transacción.
+
+ Si usted no está usando el almacenamiento en caché avanzadas más adelante, la caché de base de datos en memoria se borra al final de cada transacción. Esta es otra razón para utilizar las transacciones, incluso si sólo está ejecutando operaciones de lectura.
+
+ El asincrónico escribe discuten a continuación elimina la mayor parte de la pena inmediata de una comisión, por lo que no notará el problema como mucho. Sin embargo, todavía hay sobrecarga, y el uso de una transacción seguirá siendo más rápido. Un gran problema es que la cola de operaciones de archivo tendrá mucho tiempo si hay muchas operaciones. Algunas operaciones requieren caminar esta cola para ver qué operaciones han estado pendientes, y que será más lento. Si el usuario cierra el navegador pronto después de hacer este tipo de operaciones, puede retrasar el apagado (posiblemente durante decenas de segundos para que un gran número de transacciones y discos lentos), lo que hace que parezca que el navegador se cuelga.

+

 

+

Consultas

+
+ Edit section
+


+ Reordenación de la atención de la declaración SQL, o la creación de los índices adecuada, a menudo puede mejorar el rendimiento. Véase la descripción general del optimizador sqlite en el sitio web de sqlite para información sobre cómo utiliza los índices de sqlite y ejecuta sentencias.
+
+ Usted también puede tratar de la "explicar" en función de sus estados de cuenta para ver si están utilizando los índices que usted espera. Tipo de "explicar", seguido de su estado de cuenta para ver el plan. Por ejemplo, explicar select * from moz_history; Los resultados son difíciles de entender, pero usted debería ser capaz de ver si es la utilización de índices. Un comando que le dará una visión general de alto nivel es "explicar plan de consulta". Por ejemplo:

+
sqlite> explain query plan select * from moz_historyvisit v join moz_history h
+        on v.page_id = h.id where v.visit_date > 1000000000;
+
+0|0|TABLE moz_historyvisit AS v WITH INDEX moz_historyvisit_dateindex
+1|1|TABLE moz_history AS h USING PRIMARY KEY
+

Esto nos dice que primero buscará en moz_historyvisit partir de un índice, y luego buscará en moz_history utilizando la clave principal. Ambas son "buenas" porque utilizan índices y claves principales, que son rápidos.

+

 

+
sqlite> explain query plan select * from moz_historyvisit where session = 12;
+
+0|0|TABLE moz_historyvisit
+

+
+
+ +

En este ejemplo, se puede ver que no está usando un índice, por lo que esta consulta podría ser muy lento.

+

+
+
+ + Puede descargar la herramienta de línea de comandos desde la página de descarga sqlite. Asegúrese de tener una versión de la herramienta de línea de comandos que es al menos tan reciente como lo utiliza Mozilla. A partir del 10 de abril 2006, Mozilla usa sqlite 3.3.4, pero la última versión precompilada de las herramientas de línea de comandos no está disponible para todas las plataformas. Esto dará lugar a errores que dicen "base de datos es cifrada" porque la herramienta no es capaz de reconocer el formato de archivo. Es posible que desee comprobar la definición SQLITE_VERSION en db/sqlite3/src/sqlite3.h para la versión actual si está teniendo problemas.
+
+
+
+

 

+

+

Caché

+

 

+
+ Edit section
+

 

+


+ Sqlite tiene un caché de páginas de bases de datos en la memoria. Mantiene páginas relacionadas con la transacción actual por lo que puede hacer retroceder, y que además mantiene los utilizados recientemente para que pueda correr más rápido.
+
+ De forma predeterminada, sólo guarda las páginas en la memoria durante una operación (si no explícitamente abierta una transacción, será abierto para usted que rodea cada declaración individual). Al final de una transacción, el caché se vacía. Si, posteriormente, iniciar una nueva transacción, las páginas que necesita se volverá a leer el disco (o esperar que el caché de sistema operativo). Esto hace que incluso bloquear las operaciones simples en los archivos del SO lecturas, que pueden ser prohibitivos en algunos sistemas con cachés de disco malo o unidades de red.
+
+ Usted puede controlar el tamaño de la caché de memoria mediante el  cache_sizepragma. Este valor controla el número de páginas del archivo que se puede guardar en la memoria a la vez. El tamaño de página se pueden establecer mediante el page_size pragma antes de que las operaciones se han realizado en el archivo. Puede ver un ejemplo de establecer el tamaño máximo de caché a un porcentaje de la memoria en nsNavHistory:: initdb en toolkit / components / places / src / nsNavHistory.cpp.

+

 

+

El almacenamiento en caché

+

 

+
+ Edit section
+

 

+

Activa el modo de almacenamiento para  sqlite shared-cache mode), que hace varias conexiones a la parte misma base de datos la misma caché. Debido a que el caché no es multi-hilo, esto significa que por desgracia no se puede tener diferentes conexiones desde diferentes subprocesos el acceso a la misma base de datos. Sin embargo, la memoria caché compartida que nos permite seguir en directo entre las operaciones, en lugar de borrarlo después de cada transacción como sqlite no por defecto.

+
+
+
+ Si su aplicación utiliza muchas transactons pequeña, puede obtener una mejora significativa del rendimiento al mantener el caché en vivo entre las transacciones. Esto se hace mediante el uso de un suplemento "ficticia" la conexión a la misma base de datos (es importante que utilice exactamente el mismo nombre de archivo al abrir estas conexiones según lo determinado por strcmp). La conexión ficticia mantiene una transacción perpetuamente abierta, que bloquea el caché en la memoria. Dado que el caché es compartida con la conexión principal, el caché nunca expira.
+
+ La transacción debe ser un maniquí que bloquea una página en la memoria. Una simple instrucción BEGIN TRANSACTION no hace esto porque el bloqueo no sqlite perezosamente. Por lo tanto, debe tener una declaración que modifica los datos. Puede ser tentador para ejecutar una declaración sobre la sqlite_master que contiene la información sobre las tablas e índices en la base de datos. Sin embargo, si su aplicación se está inicializando la base de datos por primera vez, esta tabla estará vacía y la caché no estará bloqueado. nsNavHistory:: StartDummyStatement crea una tabla de maniquí con un solo elemento en él para este fin.
+
+ Es importante señalar que cuando una instrucción está abierta, el esquema de base de datos no pueden ser modificados. Esto significa que cuando la operación simulada se está ejecutando, no puede crear o modificar las tablas o índices, o el vacío de la base de datos. Usted tiene que parar la operación simulada, hacer la operación de modificación de esquema, y reiniciarlo.
+
+

 

+

+

+
+
+ +

Escrituras en disco

+

Sqlite establece las normas básicas de la teoría ACID base de datos:

+
+
+ +

+
+
+ + El problema es que estos requisitos hacer algunas operaciones, especialmente compromete, muy lento. Para cada confirmación, sqlite hace dos sincroniza el disco entre muchas otras operaciones de archivo (consulte la sección "commit atómico" de http://www.sqlite.org/php2004/slides-all.html para obtener más información sobre cómo funciona esto). Estos sincroniza el disco son muy lentos y limitan la velocidad de un compromiso a la velocidad de rotación del disco mecánico.
+
+ Pasar la aspiradora y cero de relleno
+
+ Sqlite tiene un comando VACUUM para comprimir el espacio no utilizado de la base de datos. Sqlite funciona como un administrador de memoria o un sistema de archivos. Cuando se eliminan datos, los bytes asociados se marcan como libres, pero no se quita del archivo. Esto significa que el archivo no se reducirá, y los datos todavía pueden ser visibles en el archivo. La manera de evitar esto es ejecutar el comando de vacío para eliminar este espacio.
+
+ Pasar la aspiradora es muy lenta. El comando de vacío es esencialmente la misma que la línea de comandos sqlite3 olddb. Volcado sqlite3 olddb .dump | sqlite3 newdb; mv newdb olddb.En algunas unidades de red, pasar la aspiradora una base de datos de 10 MB ha sido el tiempo en más de un minuto. Por lo tanto, debe evitar siempre que sea posible pasar la aspiradora.
+
+ Algunos artículos de bases de datos son la privacidad sensibles, como los elementos eliminados de la historia. Los usuarios tienen la expectativa de que a borrar los elementos de su historia será eliminar los restos de que a partir de la base de datos. Como resultado, Mozilla permite la bandera preprocesador SQLITE_SECURE_DELETE en db/sqlite3/src/Makefile.in .Esta opción hace que los elementos eliminados para ser llenado con 0s en el disco. Esto elimina la necesidad de vacío, excepto para recuperar espacio en disco, y hace que muchas operaciones mucho más rápido.
+
+ Zero-llenado pueden tener sobrecarga de rendimiento significativas en algunas situaciones. Por ejemplo, el servicio de la historia usa para eliminar varios elementos de base de datos cuando se apaga cuando expira elementos antiguos de la historia. Esta operación no es necesariamente lento, pero 0s escribir en el disco en un "ACI" base de datos todavía son lentos. Esto hizo que cierre muy lento porque el hilo AsyncIO bloquearía apagado (bug 328598). tiempos de parada de más de 30 segundos fueron vistos. Como resultado, este error introducido la historia de caducidad incremental eliminando la necesidad de escribir muchas 0s en el disco en el apagado.
+
+ Desafortunadamente, esta operación no puede ser controlado en un esquema por transacción o cada conexión. Algunas operaciones se beneficiarán, mientras que otros serán afectados.
+
+

 

diff --git a/files/es/svg_en_firefox/index.html b/files/es/svg_en_firefox/index.html new file mode 100644 index 0000000000..ba802c6af4 --- /dev/null +++ b/files/es/svg_en_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 +--- +

 

+

Firefox 2 sigue avanzando en la mejora de la implementación de Gráficos vectoriales escalables (SVG). Aunque el único elemento añadido a los ya soportados por Firefox 1.5 ha sido <textPath>, se han resuelto varios fallos y se ha incorporado parte de la especificación.

+

Firefox SVG es un subconjunto de SVG 1.1, 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 SVG y su estado de implementación en Firefox 2.0. El resto del documento aporta información sobre las limitaciones en la implementación.

+

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.

+

Mientras lee esto, usted puede preguntarse cuántos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia la hoja de ruta 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 compilaciones nocturnas las últimas evoluciones. También puede consultar la tabla actualizada sobre la implementación de SVG en la versión de desarrollo.

+

Rendimiento

+

Firefox usa el mismo motor de renderizado, cairo, 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.

+

En Windows el renderizado de SVG es bastante más rápido que en otras plataformas.

+

Rango de coordenadas

+

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.

+

Texto en Windows 98

+

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

+

Selección de fuente

+

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.

+

Impresión

+

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.

+

Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG.

+

Opacidad de grupos

+

La propiedad de opacidad de grupo opacity 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.

+

Fuentes rotadas

+

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:

+

Imagen:Text-fill-stroke.png

+

<image>

+

<image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja.

+

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.

+

De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar sobremanera el rendimiento en Firefox 1.5.

+

Eventos

+

Soportamos los atributos de SVG para eventos, a excepción de onfocusin, onfocusout, y onactivate.

+

Nuestro actual manejo del evento onload no es estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo onload sea llamado para cada elemento, un evento SVGLoad será 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...

+

No damos soporte a los eventos para el teclado específicos de Adobe (onkeydown, onkeyup).

+

Interoperabilidad

+

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 Guías de estilo para crear SVG, Jonathan Watt explica problemas comunes.

+

Situaciones de uso de SVG

+

Firefox 1.5 maneja SVG como un documento completo, o como referencia para los elementos embed, object, e iframe. Actualmente no puede ser usado en HTML o XHTML como fuente del elemento img, ni para las propiedades CSS relativas a las imágenes.

+

Animaciones

+

Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear SmilScript, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG.

+

Fallos corregidos en Firefox 2

+

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.

+ + + + + + + + + + + + + + +

Estado de la implementación de los elementos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Elemento Notas
Módulo de estructura
svg +
    +
  • Implementado.
    • +
  • Los atributos DOM currentScale y currentTranslate están implementados pero no existe una interfaz de usuario para pan ni zoom.
    • +
  • SVGSVGElement +
      +
    • Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView.
      • +
    • Bindings no implementados: pauseAnimations, unpauseAnimations,animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById
      • +
    +
    • +
+
g +
    +
  • Implementado.
    • +
+
defs +
    +
  • Implementado.
    • +
+
desc +
    +
  • Implementado.
    • +
  • Solo disponible en el DOM, sin interfaz de usuario.
    • +
+
title +
    +
  • Implementado.
    • +
+
metadata +
    +
  • Implementado.
    • +
  • Solo disponible en el DOM, sin interfaz de usuario. </td>
    • +
+
symbol +
    +
  • Implementado.
    • +
+
use +
    +
  • Implementado.
    • +
  • Solo funciona para referencias internas al documento (bug 269482).
    • +
  • No sigue completamente las reglas de la cascada <svg:use> (bug 265894).
    • +
  • No entrega eventos a un arbol SVGElementInstance (bug 265895).
    • +
+
Módulo de procesamiento condicional
switch +
    +
  • Implementado.
    • +
+
Módulo de imagen
image +
    +
  • Implementado.
    • +
  • Solo funciona para tramas de bitmaps (bug 272288).
    • +
+
Módulo de estilo
style +
    +
  • Implementado.
    • +
+
Módulo de formas
path +
    +
  • Implementado.
    • +
  • Interfaz SVGPathElement +
      +
    • Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
      • +
    • Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength
      • +
    +
    • +
  • Interfaz SVGPathSegList +
      +
    • Bindings No implementados: replaceItem()
      • +
    +
    • +
+
rect +
    +
  • Implementado.
    • +
+
circle +
    +
  • Implementado.
    • +
+
line +
    +
  • Implementado.
    • +
+
ellipse +
    +
  • Implementado.
    • +
+
polyline +
    +
  • Implementado.
    • +
+
polygon +
    +
  • Implementado.
    • +
+
Módulo de texto
text +
    +
  • Implementado.
    • +
  • SVGTextElement +
      +
    • Atributos no implementados: rotate, textLength, lengthAdjust
      • +
    • Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString.
      • +
    • Bindings not functional at onload time: getExtentOfChar
      • +
    +
    • +
+
tspan +
    +
  • Implementado.
    • +
  • SVGTSpanElement +
      +
    • Atributos no implementados: rotate, textLength, lengthAdjust
      • +
    • Bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • +
    +
    • +
+
tref +
    +
  • No implementado.
    • +
+
textPath +
    +
  • Implementado en Firefox 2.
    • +
  • Atributos no implementados: method, spacing, textLength, lengthAdjust
    • +
+
altGlyph +
    +
  • No implementado.
    • +
+
altGlyphDef +
    +
  • No implementado.
    • +
+
altGlyphItem +
    +
  • No implementado.
    • +
+
glyphRef +
    +
  • No implementado.
    • +
+
Módulo de pinceles
marker +
    +
  • Implementado.
    • +
+
Color Módulo de perfiles
color-profile +
    +
  • No implementado.
    • +
+
Módulo de gradientes
linearGradient +
    +
  • Implementado.
    • +
+
radialGradient +
    +
  • Implementado.
    • +
+
stop +
    +
  • Implementado.
    • +
+
Módulo de patrones
pattern +
    +
  • No implementado.
    • +
+
Módulo de recorte
clipPath +
    +
  • Implementado.
    • +
  • No maneja los caminos de recorte que tiene elementos con diferentes propiedades de reglas de recorte o que referencian otros clipPaths. (bug 267224).
    • +
+
Módulo de máscaras
mask +
    +
  • No implementado.
    • +
+
Módulo de filtros
filter +
    +
  • No implementado.
    • +
+
feBlend +
    +
  • No implementado.
    • +
+
feColorMatrix +
    +
  • No implementado.
    • +
+
feComponentTransfer +
    +
  • No implementado.
    • +
+
feComposite +
    +
  • No implementado.
    • +
+
feConvolveMatrix +
    +
  • No implementado.
    • +
+
feDiffuseLighting +
    +
  • No implementado.
    • +
+
feDisplacementMap +
    +
  • No implementado.
    • +
+
feFlood +
    +
  • No implementado.
    • +
+
feGaussianBlur +
    +
  • No implementado.
    • +
+
feImage +
    +
  • No implementado.
    • +
+
feMerge +
    +
  • No implementado.
    • +
+
feMergeNode +
    +
  • No implementado.
    • +
+
feMorphology +
    +
  • No implementado.
    • +
+
feOffset +
    +
  • No implementado.
    • +
+
feSpecularLighting +
    +
  • No implementado.
    • +
+
feTile +
    +
  • No implementado.
    • +
+
feTurbulence +
    +
  • No implementado.
    • +
+
feDistantLight +
    +
  • No implementado.
    • +
+
fePointLight +
    +
  • No implementado.
    • +
+
feSpotLight +
    +
  • No implementado.
    • +
+
feFuncR +
    +
  • No implementado.
    • +
+
feFuncG +
    +
  • No implementado.
    • +
+
feFuncB +
    +
  • No implementado.
    • +
+
feFuncA +
    +
  • No implementado.
    • +
+
Módulo de cursores
cursor +
    +
  • No implementado.
    • +
+
Módulos de hiperenlaces
a +
    +
  • Implementado como un binding XBL - object is not of type SVGAElement.
    • +
  • Sólo están implementados los atributos xlink:href, xlink:show y xlink:target (en Firefox 2).
    • +
+
Módulo de vista
view +
    +
  • No implementado.
    • +
+
Módulo de scripting
script +
    +
  • Implementado.
    • +
+
Módulo de animación
animate +
    +
  • No implementado.
    • +
+
set +
    +
  • No implementado.
    • +
+
animateMotion +
    +
  • No implementado.
    • +
+
animateTransform +
    +
  • No implementado.
    • +
+
animateColor +
    +
  • No implementado.
    • +
+
mpath +
    +
  • No implementado.
    • +
+
Módulo de fuentes
font +
    +
  • No implementado.
    • +
+
font-face +
    +
  • No implementado.
    • +
+
glyph +
    +
  • No implementado.
    • +
+
missing-glyph +
    +
  • No implementado.
    • +
+
hkern +
    +
  • No implementado.
    • +
+
vkern +
    +
  • No implementado.
    • +
+
font-face-src +
    +
  • No implementado.
    • +
+
font-face-uri +
    +
  • No implementado.
    • +
+
font-face-format +
    +
  • No implementado.
    • +
+
font-face-name +
    +
  • No implementado.
    • +
+
definition-src +
    +
  • No implementado.
    • +
+
Módulo de extensibilidad
foreignObject +
    +
  • Implementado, aunque no integrado.
    • +
+
+

{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}

diff --git a/files/es/temas/background/index.html b/files/es/temas/background/index.html new file mode 100644 index 0000000000..d30153f9c1 --- /dev/null +++ b/files/es/temas/background/index.html @@ -0,0 +1,99 @@ +--- +title: Background Themes +slug: Temas/Background +translation_of: Mozilla/Add-ons/Themes/Lightweight_themes +--- +

Cómo crear su propio fondo temático

+ +
+

Los temas se componen de un archivo de imagen gráfica "de cabecera", que superpone el valor por defecto del IU de Firefox.

+ +

¿Termino su diseño? Puede enviarlo ahora mismo!

+ +

Creación de una Imagen Cabecera del Tema

+ +

La imagen de cabecera se muestra como el fondo de la parte superior de la ventana del navegador, situado detrás de las barras de herramientas, barra de direcciones, barra de búsqueda y la barra de pestañas. Estará anclada en la esquina superior derecha de la ventana del navegador.

+ +

+ + + +

Requisitos de la Imagen

+ + + +

Consejos

+ + + +

Recursos de editores de imágenes en línea

+ + + +

Creando una imagen de pie de página del tema

+ +

En versiones anteriores de Firefox, o versiones más recientes con determinados complementos instalados, la imagen de pie de página se muestra como el fondo de la parte inferior de la ventana del navegador, detrás de las barras complemento. Estará anclada en la esquina inferior izquierda de la ventana del navegador. Imágenes de pie de página son opcionales.

+ +

+ + + +

Requisitos de la Imagen

+ + + +

Consejos

+ + + +

Presentar sus imagenes del tema

+ +

Para empezar a enviar sus imágenes, vaya a la página de presentación de Temas:

+ +
    +
  1. El nombre de su tema — elegir un nombre único para su tema. Nombres duplicados no están permitidos, por lo que puede que tenga que probar un par de veces para encontrar un nombre único.
    2. +
  2. Elija una categoría y etiquetas — seleccionar una categoría y entrar en algunas etiquetas que mejor describen su tema. Tenga en cuenta que un crítico puede rechazar su tema si es obvio que su categoría y / o etiquetas no están relacionados con su tema.
    3. +
  3. Describa su tema — escribir una breve descripción de su tema. Tenga en cuenta que un crítico puede rechazar su tema si su descripción no es una representación exacta de su tema.
    4. +
  4. Seleccione una licencia para su tema — decidir sobre una licencia de derechos de autor para su trabajo. Lea más acerca de los tipos de licencias Creative Common. +
      +
    • Importante: Por favor, asegúrese de que tiene los derechos para usar la imagen en su tema!
      • +
    +
    5. +
  5. Cargue sus imágenes — asegurarse de que son menos de 300 KB de tamaño y JPG o PNG!
    6. +
  6. Seleccione el texto y los colores de la ficha — puede elegir la pestaña ("background") color y color de texto plano que mejor funcione con su imagen de cabecera.
    7. +
  7. Vista previa de su tema — usted está listo para previsualizar su tema! Simplemente puntero del ratón sobre la imagen arriba del botón Enviar Tema y ver cómo se ve al instante.
    8. +
  8. Presentar su tema — si todo se ve bien, haga clic en el botón Enviar Tema y todo listo! Puede ver todos los temas que has sido autor en su página de perfil. +
      +
    • Consejo: para asegurarse de que su tema está aprobado para la galería, asegúrese de que cumple con las directrices de contenido y los términos de servicio!
      • +
    +
    9. +
+ +

+ +

Presente su Tema Ahora

+
diff --git a/files/es/temas/index.html b/files/es/temas/index.html new file mode 100644 index 0000000000..24376902a6 --- /dev/null +++ b/files/es/temas/index.html @@ -0,0 +1,20 @@ +--- +title: Temas +slug: Temas +tags: + - Complementos + - Temas + - Todas_las_Categorías +translation_of: Mozilla/Add-ons/Themes +--- +

 

+
Primeros pasos
Para quienes quieren crear un tema y no saben cómo.
+

Los Temas son skins (apariencias) para las aplicaciones Mozilla. Te permiten cambiar la apariencia de la interfaz de usuario y personalizarlo a tu gusto. Un tema puede cambiar simplemente el color de la UI o puede cambiar toda su apariencia.

+
+ +

Documentación

Creando un tema para Firefox
Para crear un tema para Firefox necesitaras saber tres cosas. Cómo editar imágenes, como extraer archivos zip, y como modificar CSS.
Empaquetar un Tema
Como empaquetar temas para Firefox y Thunderbird.
Cambios del tema en Firefox 2
¿Creaste un tema para Firefox 1.5, y ahora quieres actualizarlo para que funcione correctamente en Firefox 2?
Installing Extensions and Themes From Web Pages (en)
There are a variety of ways you can install Extensiones and Temas from web pages, including direct linking to the XPI files and using the InstallTrigger object.

;{{ mediawiki.external('http://cheeaun.phoenity.com/weblog/2004/12/first-steps-in-theme-design.html First steps in theme design (en)') }} :

Ver todos...

Comunidad

  • DesarrollMDNo Mozilla en los foros de Mozilla-ES.
  • View Mozilla forums...

{{ DiscussionList("dev-themes", "mozilla.dev.themes") }}

Ver todos...

Herramientas

Ver todos...

Temas relacionados

CSS
+

Categorías

+

Interwiki Language Links

+

 

+

 

+

{{ languages( { "de": "de/Themes", "en": "en/Themes", "fr": "fr/Th\u00e8mes", "ja": "ja/Themes", "pl": "pl/Motywy", "zh-cn": "cn/\u4e3b\u9898", "zh-tw": "zh_tw/\u4f48\u666f\u4e3b\u984c" } ) }}

diff --git a/files/es/temas/theme_concepts/index.html b/files/es/temas/theme_concepts/index.html new file mode 100644 index 0000000000..1f096e9586 --- /dev/null +++ b/files/es/temas/theme_concepts/index.html @@ -0,0 +1,231 @@ +--- +title: Conceptos de los temas +slug: Temas/Theme_concepts +translation_of: Mozilla/Add-ons/Themes/Theme_concepts +--- +
{{AddonSidebar()}}
+ +

Los temas desarrollados con la API WebExtensions en Firefox le permiten cambiar el aspecto del navegador al agregar imágenes al área del encabezado del navegador Firefox; este es el área detrás de la barra de menú, las barras de herramientas, la barra de direcciones, la barra de búsqueda y la barra de pestañas.

+ +

Estas opciones de tema se pueden implementar como temas estáticos (aunque las imágenes del tema pueden ser animadas) o como temas dinámicos creados en una extensión del navegador

+ +
+

If you have a lightweight theme it will be converted to this new theme format automatically before lightweight themes are deprecated. You do not need to port your theme. However, please feel free to update your themes to use any of the new features described here.

+
+ +

Static themes

+ +
+

Note that you can't yet submit static WebExtension-based themes to addons.mozilla.org. The work to support this is tracked in https://github.com/mozilla/addons/issues/501. If you want to share a theme with other users, you'll need to make it either a lightweight theme or a dynamic theme.

+
+ +

Static themes are specified using the same resources as a browser extension: a manifest.json file to define the theme components with those components stored in the same folder as the manifest.json file or a sub folder. These resources are then packed in a zip for publication on addons.mozilla.org (AMO).

+ +
+

A theme and browser extension functionality cannot be defined in one package, such as including a theme to complement an extension. You can, however, programmatically include a theme in an extension using the Theme API. See Dynamic themes.

+
+ +

Defining a theme

+ +

To create a theme (in this example a simple, single image theme):

+ + + +

Static theme approaches

+ +

There are two approaches you can take to theming the header area of Firefox: using a single image or using multiple images. You could combine the two, but it’s easier to treat them separately.

+ +

Single image themes

+ +

This is the basic or minimal theming option, where you define:

+ + + +

The area your header image needs to fill is a maximum of 200 pixels high. The maximum image width is determined by the resolution of the monitor Firefox is displaying on and how much of the monitor Firefox is using. Practically, this means you would need to allow for a width of up to 5120 pixels wide (for the next generation of 5k monitors). However, rather than creating a very wide image, a better approach is to use a narrower image with a transparent left edge so that it fades to the background color. For example, we could use this image
+ An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left edge fading to total transparency.
+ combined with a complementary background color, to create this effect in the header
+ A single image theme using the weta.png image

+ +

See details about this theme in the themes example weta_fade.

+ +

Obviously, you can still provide a single wide image if you prefer.

+ +

Multiple image themes

+ +

As an alternative to creating a single image theme, you have the option to use multiple images. These images can be individually anchored to locations within the header, with the option to apply tiling to each image.

+ +

Depending on the effect you want to create you may need to suppress the mandatory "headerURL": image with an empty or transparent image. You would use an empty or transparent image if, for example, you wanted to tile a centrally justified image, such as
+ An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the left and right edges fading to total transparency.
+ to create this effect
+ A single image theme using the additional images option to align an image to the center of the heading and tile it.
+ Here you specify the weta image like this:

+ +
"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta_for_tiling.png"]
+},
+ +

and the images tiling with:

+ +
"properties": {
+  "additional_backgrounds_alignment": [ "top" ],
+  "additional_backgrounds_tiling": [ "repeat"  ]
+},
+ +

Full details of how to setup this theme can be found in the themes example weta_tiled. Full detais of the alignment and tiling options can be found in the "theme" key description.

+ +

Alternatively, you can use multiple images, say combining the original weta image with this one anchored to the left of the header
+ An image of a weta (the common name for a group of about 70 insect species in the families Anostostomatidae and Rhaphidophoridae, endemic to New Zealand) with the right edge fading to total transparency.
+ to create this effect
+ A theme using the additional images option to place two mirrored image to the left and right of the browser header.

+ +

Where the images are specified with:

+ +
"images": {
+  "headerURL": "empty.png",
+  "additional_backgrounds": [ "weta.png", "weta-left.png"]
+},
+ +

and their alignment by:

+ +
"properties": {
+  "additional_backgrounds_alignment": [ "right top" , "left top" ]
+},
+ +

Full details of how to setup this theme can be found in the themes example weta_mirror. Full detais of the alignment options can be found in the "theme" key description.

+ +

Static animated themes

+ +

It is possible to create an animated theme using an APNG format image, as in the themes example animated. However, remember that rapid animations, such as the one in the example might be too distracting for a practical theme.

+ +

You can also animate themes programmatically, which we discuss in Dynamic themes.

+ +

Dynamic themes

+ +

As an alternative to defining a static theme, you can use the {{WebExtAPIRef("theme")}} API to control the theme used in Firefox from within a browser extension. There are a couple of use cases for this option:

+ + + +

And, obviously, you can combine the two and bundle a programmatically controlled theme with your extension.

+ +

Using the {{WebExtAPIRef("theme")}} API is straightforward. First, request "theme" permission in the extension's manifest.json file. Next, you build a JSON object containing the same information you would use in a static theme’s manifest.json, Finally, pass the JSON object in a {{WebExtAPIRef("theme.update()")}} call.

+ +

For example, the following code, from the dynamic theme example defines the content for the day and night elements of the dynamic theme:

+ +
const themes = {
+  'day': {
+    images: {
+     headerURL: 'sun.jpg',
+    },
+    colors: {
+     accentcolor: '#CF723F',
+     textcolor: '#111',
+    }
+  },
+  'night': {
+    images: {
+     headerURL: 'moon.jpg',
+    },
+    colors: {
+     accentcolor: '#000',
+     textcolor: '#fff',
+    }
+  }
+};
+ +

The theme.Theme object is then passed to {{WebExtAPIRef("theme.update()")}} to change the header theme, as in this code snippet from the same example:

+ +
function setTheme(theme) {
+  if (currentTheme === theme) {
+    // No point in changing the theme if it has already been set.
+    return;
+  }
+  currentTheme = theme;
+  browser.theme.update(themes[theme]);
+}
+ +

Learn more about dynamic themes and see an additional example in the following video:

+ +

{{EmbedYouTube("ycckyrUN0AY")}}

+ +

 

+ +

If you have not built a browser extension before, check out Your first extension for a step-by-step guide.

+ +

Cross browser compatibility

+ +

There is currently limited compatibility between themes in the major browsers. Opera takes an entirely different approach, and Microsoft Edge themes are not yet open to developers.

+ +

There is some compatibility between Firefox static themes and Chrome themes, providing the ability to port a single header image theme from Firefox to Chrome. This would be done by amending the manifest.json keys as follows:

+ + + +

Noting that "frame": and "tab_text": support RGB color definition only.

+ +

So, in the single image theme example (weta_fade) could be supported in Chrome using the following manifest.json file:

+ +
{
+  "manifest_version": 2,
+  "version": "1.0",
+  "name": "<your_theme_name>",
+  "theme": {
+    "images": {
+      "theme_frame": "weta.png"
+    },
+    "colors": {
+      "frame": [ 173 , 176 , 159 ],
+      "tab_text": [ 0 , 0 , 0 ]
+    }
+  }
+}
+ +

However, there will be a couple of differences:

+ + + +

The basic theme example using the Chrome compatible manifest.json keys, showing the differences in how those keys are implemented.

+ +

For more information, see the notes on Chrome compatibility.

diff --git a/files/es/thunderbird_localization/index.html b/files/es/thunderbird_localization/index.html new file mode 100644 index 0000000000..18dc50a274 --- /dev/null +++ b/files/es/thunderbird_localization/index.html @@ -0,0 +1,100 @@ +--- +title: Localización de Thundebird +slug: Thunderbird_Localization +tags: + - Localización + - Thunderbird 3 + - Traducción + - thunderbird +translation_of: Mozilla/Projects/Thunderbird/Thunderbird_Localization +--- +

Esta página está dirigida a todos los traductores (tanto presentes como futuros) de Thunderbird, el cliente de correo electrónico y grupos de noticias de Mozilla. Esta página abarca muchos aspectos que un traductor de Thunderbird debe tener en cuenta, como por ejemplo, conocer las herramientas necesarias y saber cómo obtener información sobre los eventos de traducción más importantes, así como otros artículos de interés.

+ +

Crear una localización de Thundebird

+ +

Crear una nueva localización (Mercurial) - En este artículo se describe cómo puedes crear una nueva localización para Thunderbird.

+ +

Sobre los repositorios y las ramas

+ +

Hay 3 repositorios activos para el desarrollo de Thunderbird. El trabajo de desarrollo de Thunderbird se fusiona de una rama a otra cada seis semanas.

+ + + +

La mayoría de los localizadores trabajan en la rama comm-aurora. En lo que se refiere a las cadenas, este repositorio/rama se mantiene estable durante un período de seis semanas. Cuando se finaliza aquí el trabajo significa que está listo para la primera beta y no tendrás que trabajar la rama beta. Tu trabajo, a partir de este punto, se llevara a la versión final de Thunderbird automáticamente.

+ +

Requisitos de localización

+ +

No hay restricciones importantes sobre los cambios que pueden realizar los traductores. Sin embargo, tenemos que trabajar juntos para proporcionar los motores de búsqueda adecuados a los usuarios de Thunderbird y conseguir un equilibrio perfecto entre los motores de búsqueda y su conjunto de opciones. Para más información, puedes consultar esta página.

+ +

Panel de localización.

+ +

El panel de localización de Thunderbird proporciona a los localizadores una visión precisa del estado actual de sus localizaciones. Puedes ver más información detallada en la página del panel de localización.

+ +

Las traducciones se añaden al panel de localización a petición cuando se ha alcanzado un alto nivel de finalización (> 80%), tal y como se muestra por la salida compare-locales. Para solicitar que se añada una traducción al panel de localización, abre una nueva incidencia en el producto Thunderbird, en el componente Build Config.

+ +

Obtener información relevante sobre la localización de Thunderbird

+ +

Grupos de noticias y Listas de correo

+ +

Los traductores de Thunderbird deben leer los grupos de noticias de localización (mozilla.dev.l10n.announce mozilla.dev.l10n) para estar informados de los temás de Thunderbird que les puedan resultar interesantes, tanto los más específicos como los generales. Tambien se les anima a leer el grupo de noticias de desarrollo de Thunderbird (mozilla.dev.apps.thunderbird) para mantenerse informado de las últimas novedades relacionadas con el desarrollo de Thunderbird.

+ +

También se puede acceder a estos grupos de noticias a través de las listas dev-l10n-announce@lists.mozilla.org y dev-l10n@lists.mozilla.org (listas de correo de localización) o de la lista de correo dev-apps-thunderbird@lists.mozilla.org (lista de correo de desarrollo), que reflejan los grupos de noticias mencionados anteriormente. Puedes suscribirte o darte de baja de estas listas de correo a través de la interfaz web que se encuentra en lists.mozilla.org.

+ +

Bugzilla

+ +

Los localizadores deberían echarle un vistazo a la dirección de correo thunderbird@localization.bugs (o a su alias :tb-l10n) para mantenerse informados de los bugs que puedan afectar a la localización de Thunderbird. Para poder acceder a ella, solo tienes que añadir la dirección de correo a la sección "User Watching" de tus preferencias de correo en bugzilla.

+ +

Algunos enlaces útiles

+ + + +

Locale Tiers

+ +

Los niveles de traducción reflejan las traducciones que necesitan estar en un buen estado para su liberación. Hay 10 traducciones en el nivel 1, que son las más importantes para Thunderbird debido al número de usuarios de Thunderbird o a su potencial de crecimiento.

+ +

Estas localizaciones se tratan como ciudadanos de primera clase, son igual de importantes que la locale es-US, lo que quiere decir que cualquier traducción de nivel 1 que no cumpla los requisitos mínimos puede bloquear una versión final de Thunderbird.

+ +

Nivel 1

+ +

Las siguientes localizaciones son P1 (prioridad 1) en orden de prioridad:

+ +
* de             -  Alemán
+* fr             -  Fracnés
+* ja, ja-JP-mac  -  Japonés
+* en-GB          -  Inglés británico
+* es-ES          -  Español (Continente europeo)
+* it             -  Italiano
+* pl             -  Polaco
+* ru             -  Ruso
+* nl             -  Holandés
+* pt-BR          -  Portugués brasileño
+
+ +

Nivel 2

+ +

El resto de localizaciones admitidas se encuentra en la categoria Nivel 2.

diff --git a/files/es/tipo_mime_incorrecto_en_archivos_css/index.html b/files/es/tipo_mime_incorrecto_en_archivos_css/index.html new file mode 100644 index 0000000000..7bdd8d3996 --- /dev/null +++ b/files/es/tipo_mime_incorrecto_en_archivos_css/index.html @@ -0,0 +1,46 @@ +--- +title: Tipo MIME incorrecto en archivos CSS +slug: Tipo_MIME_incorrecto_en_archivos_CSS +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +--- +

¿Cuál es el problema?

+

Quizás encuentres una web que use CSS con un diseño pobre en Netscape 7.x o cualquier navegador basado en Gecko como Mozilla, mientras que en Internet Explorer se muestra correctamente. Una de las razones más comunes para que esto suceda es una configuración inapropiada del servidor que tiene almacenado el archivo CSS. Algunos servidores Apache e iPlanet asocian archivos con extensión .CSS con un tipo incorrecto MIME como el "text/plain" o "application/x-pointplus". En algunos casos, Netscape 7.x y Mozilla ignoran el archivo CSS porque tiene un tipo MIME incorrecto y usan una hoja de estilo por defecto que causa que el diseño sea diferente del que se pretendía por parte del desarrollador web. +

+

¿Cuándo ocurre esto?

+

La especificación W3C menciona que los archivos CSS deben ser almacenados con el tipo MIME "text/css". Mozilla y Netscape 7.x, cuando son usados en "modo estricto" siguen la especificación al pie de la letra y esperan que el archivo CSS este almacenado con el tipo MIME correcto (El "Modo estricto" se activa teniendo una Definición del Tipo de Documento estricta en la primera línea de la página HTML). En el "modo no estricto", ambas aplicaciones tolerarán el tipo MIME incorrecto y usarán la hoja de estilo adjunta a pesar de la configuración errónea del servidor. Esto significa que no puedes tener documentos en modo "estricto" con un servidor mal configurado. Internet Explorer te permite saltarte esta desconfiguración al no tener en cuenta el tipo MIME que el servidor proporciona en la cabecera del http. +

+

¿Qué puedo hacer para cambiar esto?

+

Debes comentar a los administradores del servidor que actualicen el archivo de configuración de tipo MIME en el servidor web. +

Esta cuestión, en los servidores web iPlanet/Netscape ya ha sido puesta en conocimiento por el vendedor, quien ha añadido una nota técnica en su base de conocimientos. +

Si usas Apache, puedes cambiar también la configuración del archivo .htaccess en tu directorio raíz (El archivo .htaccess es un archivo de solo lectura que maneja varias cosas incluyendo los tipos MIME). Añade esta línea a tu archivo .htaccess: +

+
AddType text/css .css
+

Ten en cuenta que algunos Webmasters han deshabilitado el uso del archivo de configuración .htaccess en sus servidores Apache porque tiene un pequeño impacto de rendimiento. +

+

Conclusión

+

Usar un tipo de definición de documento estricta con Mozilla dará lugar a que el servidor que aloja tus páginas web necesite ser configurado apropiadamente. Hay varias soluciones a este problema, pero la más efectiva es tener el tipo MIME correcto asociado a los archivos .css. Comenta al Webmaster que arregle esto por ti, ¡todo el mundo que publique documentos html en modo estricto te lo agradecerá! +

+

Cambiando el tipo MIME en servidores iPlanet/Sun

+

Problema +

Los usuarios se encuentran con un dialogo de Salvar como con el tipo de contenido application/x-pointplus o con el contenido del archivo CSS representado como texto en el navegador cuando una pagina incluye una Hoja de Estilo con la extensión .css. +

Solución +

El tipo de archivo .css no esta enlazado a las hojas de estilo en los tipos por defecto MIME incluidos en el Enterprise Server. Puedes cambiar el enlace en la pagina de tipos globales MIME. +

Para acceder a esta página, desde el admin server acceder a Preferencias del Servidor, MIME Types, y establece el tipo MIME a .css a text/css en vez de application/x-pointplus. +

Si el problema persiste, desactiva el keepalive añadiendo "KeepAliveTimeout 0" al magnus.conf +

Basado en: SunSolve, Sun Microsystems +

+

Fuentes adicionales

+

Configurar correctamente los tipos MIME del servidor +

Sobre garbled media +

+
+

Información original del documento

+ +
+{{ languages( { "en": "en/Incorrect_MIME_Type_for_CSS_Files", "fr": "fr/Type_MIME_incorrect_pour_les_fichiers_CSS", "pl": "pl/Nieprawid\u0142owy_typ_MIME_plik\u00f3w_CSS" } ) }} diff --git a/files/es/tools/3d_view/index.html b/files/es/tools/3d_view/index.html new file mode 100644 index 0000000000..973f780ee7 --- /dev/null +++ b/files/es/tools/3d_view/index.html @@ -0,0 +1,83 @@ +--- +title: 3D view +slug: Tools/3D_View +translation_of: Tools/3D_View +--- +

{{ fx_minversion_header("11") }}

+

Cuando das click sobre el botón ver 3D view, la página entra en modo de vista 3D; en este modo, usted puede ver su página en vista 3D en la cual se anidan bloques de HTML que van sobreponiendose, se proyecta desde la parte inferior de la página. Esta vista hace fácil de visualizar como se anida su contenido.

+

+

By clicking and dragging the view, you can rotate and re-orient the 3D presentation of the DOM hierarchy of your page to see it from different angles, to better examine its structure. Off-screen elements become visible, so that you can see where your elements are located in relation to the visible content. You can click on elements to see their HTML in the HTML panel or or Style panel. Conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3D view.

+

If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the blocklisted drivers page for more information.

+

Controlling the 3D view

+

There are keyboard shortcuts and mouse controls available for the 3D view.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionKeyboardMouse
Zoom in/out+ / -Scroll wheel up/down
Rotate left/righta / dMouse left/right
Rotate up/downw / sMouse up/down
Pan left/right← / →Mouse left/right
Pan up/down↑ / ↓Mouse up/down
Reset zoom level0Resets the zoom level to the default
Focus on selected nodefMakes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}
Reset viewrResets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}
Hide current nodexMakes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured {{ fx_minversion_inline("12.0") }}
+

Use cases for the 3D view

+

There are a variety of ways the 3D view is useful:

+ +

See also

+ +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/es/tools/about_colon_debugging/index.html b/files/es/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..d79402d197 --- /dev/null +++ b/files/es/tools/about_colon_debugging/index.html @@ -0,0 +1,255 @@ +--- +title: 'acerca:depurado' +slug: 'Tools/about:debugging' +tags: + - Debugger + - Depurado + - Depurado remoto + - Remote debugging + - 'about:debugging' +translation_of: 'Tools/about:debugging' +--- +

{{ToolsSidebar}}

+ +

La página about:debugging proporciona un lugar desde el que puede adjuntar las herramientas de desarrollador de Firefox a varios objetivos de depuración. Por el momento, admite tres tipos principales de objetivos: complementos que no requieren reinicio (restartless add-ons), pestañas y trabajadores.

+ +

Abrir la página about:debugging

+ +

Hay dos formas de abrir el about:debugging:

+ + + +

Cuando about:debugging se abre, en el lado izquierdo verá una barra lateral con dos opciones e información sobre su configuración de depuración remota:

+ +
+
Configuración
+
+

Use la pestaña Configuración para configurar la conexión a su dispositivo remoto.

+
+
+ +
+
Este Firefox
+
Proporciona información sobre las extensiones temporales que ha cargado para la depuración, las extensiones que están instaladas en Firefox, las pestañas que tiene abiertas actualmente y los trabajadores de servicios que se ejecutan en Firefox.
+
+ +

+ +

Si su página about:debugging es diferente de la que se muestra aquí, vaya a about:config, busque y establezca la opción devtools.aboutdebugging.new-enabled en true.

+ +

Pestaña Configuración

+ +

Conectarse a un dispositivo remoto

+ +

Firefox admite la depuración a través de USB con dispositivos Android, utilizando la página about:debugging.

+ +

Antes de conectarte:

+ +
    +
  1. Habilite la configuración de desarrollador en su dispositivo Android.
    2. +
  2. Habilite la depuración de USB en la configuración del desarrollador de Android.
    3. +
  3. Habilite la depuración remota a través de USB en la Configuración avanzada en Firefox en el dispositivo Android.
    4. +
  4. Conecte el dispositivo Android a su computadora con un cable USB.
    5. +
+ +

Si su dispositivo no aparece en el lado izquierdo de la página about:debugging, intente hacer clic en el botón Actualizar dispositivos.

+ +

Si aún no aparece, puede deberse a que el enlace entre su dispositivo Android y su computadora aún no está autorizado. Primero asegúrese de haber instalado Android Debug Bridge de Android Tools en su computadora para que pueda conectarse a su dispositivo. A continuación, deshabilite todas las configuraciones de depuración ya activadas y repita los pasos descritos anteriormente. Su dispositivo debe mostrar una ventana emergente para autorizar a su computadora a conectarse a él; acepte esto y luego haga clic en el botón Actualizar dispositivos nuevamente. El dispositivo debería aparecer.

+ +
+

Nota: No necesita instalar el SDK completo de Android Studio. Solo se necesita adb.

+
+ +

Para comenzar una sesión de depuración, primero abra la página que desea depurar y luego haga clic en Conectar al lado del nombre del dispositivo para abrir una conexión. Si la conexión fue exitosa, ahora puede hacer clic en el nombre del dispositivo para cambiar a una pestaña con información sobre el dispositivo.

+ +

Screenshot of the debugging page for an Android device

+ +

La información en esta página es la misma que la información en la pestaña Este Firefox, pero en lugar de mostrar información para su computadora, muestra la información para el dispositivo remoto con la adición de una sección de Pestañas con una entrada para cada una de las pestañas abiertas en el dispositivo remoto.

+ +

Nota: Si la versión de Firefox en su dispositivo es una versión anterior (o más) a la versión de su computadora, es posible que vea un mensaje como el siguiente:

+ +

The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser.

+ +

En Firefox 76 y superior, el mensaje puede tener el siguiente aspecto:This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details

+ +

En la imagen de abajo, hay tres pestañas abiertas: Network or cache Recipe, Nightly Home, y About Nightly. Para depurar el contenido de una de estas pestañas, haga clic en el botón Inspeccionar junto a su título. Cuando lo haga, las Herramientas para desarrolladores se abrirán en una nueva pestaña.

+ +

Screenshot showing the remote debugging window, with the editable URL bar

+ +

Ademas de la lista habitual de herramientas, tambien puede ver información sobre el dispositivo al que está conectado, incluido que está conectado (en este ejemplo) a través de USB, a Firefox Preview, en un Pixel 2, así como el título del página que está depurando y la dirección de la página.

+ +

A partir de Firefox 78, la barra de URL es editable, por lo que puede cambiar la URL utilizada por el navegador en el dispositivo remoto. También puede volver a cargar la página haciendo clic en el botón Reload junto a la barra de URL (a partir de 79), navegar hacia atrás o hacia adelante en el historial de navegación con los botones Atrás y Adelante.

+ +

Conectando a través de la red

+ +

Puede conectarse a un servidor de depuración de Firefox en su red o en su máquina de depuración utilizando la configuración de Ubicación de red de la página about:debugging.

+ +

Ingrese la ubicación y el puerto en el que se ejecuta el servidor del depurador. Cuando lo haga, se agregará a la lista de ubicaciones de red junto con los dispositivos, como se muestra a continuación:

+ +

+ +

Este Firefox

+ +

La pestaña Este Firefox combina las características de Extensiones, Pestañas y Trabajadores en una sola pestaña con las siguientes secciones:

+ +
+
Extensiones Temporales
+
Muestra una lista de las extensiones que ha cargado utilizando el botón Cargar complemento temporal.
+
Extensiones
+
Esta sección enumera información sobre las extensiones que ha instalado en su sistema.
+
Trabajadores de servicios, trabajadores compartidos y otros trabajadores
+
Hay tres secciones en esta página que tratan sobre los trabajadores de servicios, trabajadores compartidos y otros trabajadores.
+
+ +

+ +

Si las extensiones internas aparecen en la lista de esta página depende de la configuración de la preferencia devtools.aboutdebugging.showHiddenAddons. Si necesita ver estas extensiones, navegue hasta about:config y asegúrese de que la preferencia esté establecida en true.

+ +

Extensiones

+ +

Cargando una extensión temporal

+ +

Con el botón Cargar complemento temporalmente puede cargar temporalmente una extensión web desde un directorio en el disco. Haga clic en el botón, navegue hasta el directorio que contiene el complemento y seleccione su archivo de manifiesto. La extensión temporal se muestra debajo del encabezado Extensiones temporales.

+ +

No tiene que empaquetar o firmar la extensión antes de cargarlas. La extensión permanecerá instalada hasta que reinicie Firefox.

+ +

Las principales ventajas de este método, en comparación con la instalación de un complemento desde un XPI, son:

+ + + +

Una vez que haya cargado una extensión temporal, puede ver información sobre ella y realizar operaciones.

+ +

Screenshot of the debugging information panel for a temporary extension

+ +

Puede usar los siguientes botones:

+ +
+
Inspeccionar
+
Carga la extensión en el depurador.
+
Reload
+
Vuelve a cargar la extensión temporal. Esto es útil cuando ha realizado cambios en la extensión.
+
Eliminar
+
Retira la extensión temporal.
+
+ +

Se muestra otra información sobre la extensión:

+ +
+
Ubicación
+
La ubicación del código fuente de la extensión en su sistema local.
+
ID de extensión
+
La ID temporal asignada a la extensión.
+
UUID interno
+
El UUID interno asignado a la extensión.
+
Manifiesto de la URL
+
Si hace clic en el enlace, el manifiesto de esta extensión se carga en una nueva pestaña.
+
+ +

Actualización de una extensión temporal

+ +

Si instala una extensión de esta manera, ¿qué sucede cuando actualiza la extensión?

+ + + +

Extensiones instaladas

+ +

Las extensiones instaladas permanentemente se enumeran en la sección Extensiones. Para cada extensión Ud. verá algo como lo siguiente:

+ +

Screenshot of the debugging information panel for an installed extension

+ +

El botón Inspeccionar y los campos ID de extensión y UUID interno son los mismos que para las extensiones temporales.

+ +

Al igual que sucede con las extensiones cargadas temporalmente, el enlace junto a la URL del manifiesto abre el manifiesto cargado en una nueva pestaña.

+ +
+

Nota: Se recomienda que use la caja de herramientas del navegador, no el depurador de complementos, para depurar extensiones web. Vea Depuración de WebExtensions para todos los detalles.

+
+ +

La sección Complementos en about:debugging enumera todas las extensiones web que están instaladas actualmente. Al lado de cada entrada hay un botón etiquetado Inspeccionar.

+ +
+

Nota: esta lista puede incluir complementos que vienen preinstalados con Firefox.

+
+ +

Si hace clic en Inspeccionar, el depurador de complementos comenzará en una nueva pestaña.

+ +

Consulte la página del depurador de complementos para ver todas las cosas que puede hacer con esta herramienta.

+ +

Workers

+ +

Esta sección muestra todos los Workers que tienes registrados en tu Firefox, clasificados de la siguiente manera:

+ + + +

Puede conectar las herramientas de desarrollador a cada trabajador y enviar notificaciones push a los trabajadores del servicio.

+ +

+ +

Estado trabajador de servicio

+ +

La lista de trabajadores de servicio muestra el estado del trabajador de servicio en su ciclo de vida. Son posibles tres estados:

+ + + +

Screenshot of the debugging panel for a service worker that is in the Running state

+ +

Esta sección utiliza una demostración simple de ServiceWorker, alojada en https://serviceworke.rs/push-simple/.

+ +
+

Nota: Desde Firefox 79 en adelante, puede acceder a información similar sobre los Service Workers registrados en un dominio en particular yendo al panel de Aplicación de Firefox DevTools.

+
+ +

Dar de baja a los trabajadores del servicio

+ +

Haga clic en el botón Cancelar registro para cancelar el registro del trabajador de servicio.

+ +

Envío de eventos push a service workers

+ +

Para depurar notificaciones push, puede establecer un punto de interrupción en el detector de eventos push. Sin embargo, también puede depurar notificaciones push localmente, sin necesidad del servidor. Haga clic en el botón Push para enviar un evento push al trabajador del servicio.

+ +

Trabajadores de servicio no compatibles

+ +
+

Se muestra un mensaje de advertencia en la parte superior de la pestaña Este Firefox si los trabajadores del servicio son incompatibles con la configuración actual del navegador y, por lo tanto, no se pueden usar ni depurar.

+ +

+
+ +

Los trabajadores de servicio pueden no estar disponibles si la preferencia dom.serviceWorkers.enable está configurada como false en about:config.

+ +

Conexión a Firefox para Android 68

+ +

Las versiones de Firefox para Android que se basan en la versión 68 no se pueden depurar desde las versiones de escritorio de Firefox 69 o posteriores, debido a la diferencia en las versiones de lanzamiento. Hasta el momento en que Firefox para Android se actualice a una versión principal más reciente, en sincronización con Firefox de escritorio, debe usar una de las siguientes versiones de Firefox para Android:

+ + + +

Si prefiere realizar la prueba con la versión principal de Firefox para Android (es decir, según la versión 68), puede hacerlo con la versión de soporte extendido (ESR) de Firefox para escritorio, que también se basa en la versión 68.

+ +

Tenga en cuenta queen about:debugging la depuración no está habilitada de forma predeterminada en Firefox ESR. Para habilitarlo, abra el Editor de configuración (about:config) y establezca devtools.aboutdebugging.new-enabled en true.

+ +

Si utilizó una versión superior de Firefox antes de instalar Firefox ESR, se le pedirá que cree un nuevo perfil de usuario para proteger sus datos de usuario. Para obtener más información, consulte ¿Qué sucede con mi perfil si cambio a una versión anterior de Firefox?

diff --git a/files/es/tools/accesos_directos/index.html b/files/es/tools/accesos_directos/index.html new file mode 100644 index 0000000000..9372393011 --- /dev/null +++ b/files/es/tools/accesos_directos/index.html @@ -0,0 +1,1266 @@ +--- +title: Accesos directos +slug: Tools/Accesos_directos +tags: + - Herramientas + - 'l10n:priority' +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Esta página muestra todos los accesos directos utilizados para las herramientas para desarrolladores de Firefox.

+ +

La primera sección muestra el acceso directo para cada herramienta mientras que la segunda sección muestra los accesos directos aplicables sólo a las herramientas de desarrolladores. Por último hay una sección para cada herramienta, que lista todos los accesos directos que puedes usar dentro de la misma.

+ +

Debido a que los accesos directos dependen de la ubicación, no están documentados en esta página.

+ +

Herramientas de apertura y cierre

+ +

Estos accesos directos funcionan en la ventana principal del navegador para abrir la herramienta especificada. Los mismos accesos directos funcionarán para cerrar las herramientas alojadas en la Caja de herramientas si la herramienta está activa. Para herramientas que se abren en una nueva ventana, como la consola del navegador, debe cerrar la ventana para cerrar la herramienta.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abre la caja de herramientas (con la herramienta más reciente activada)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Trae la caja de herramientas a primer plano (solo si está en una ventana separada y no en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Cierra la caja de herramientas (si está en una ventana separada y en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Abre la consola web 1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Abre el inspector de elementosCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
Abre el depurador 2Ctrl + Shift + SCmd + Opt + SCtrl + Shift + S
Abre el editor de estilosShift + F7Shift + F7 1Shift + F7
Abre el perfiladorShift + F5Shift + F5 1Shift + F5
Abre el monitor de red 3Ctrl + Shift + ECmd + Opt + ECtrl + Shift + E
Despliega las herramientas de desarrolladorShift + F2Shift + F2 1Shift + F2
Despliega la vista de diseño adaptableCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Abre la consola del navegador 4Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Abre la caja de herramientas del navegadorCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
Abre el bloc de notasShift + F4Shift + F4Shift + F4
Abre el WebIDEShift + F8Shift + F8Shift + F8
Abre el inspector de almacenamiento 5Shift + F9Shift + F9Shift + F9
Abre el depurador 2Ctrl + Shift + ZCmd + Opt + ZCtrl + Shift + Z
+ +

1. A diferencia de otras herramientas alojadas en la caja de herramientas, este acceso directo tampoco cierra la Consola Web. En cambio, se centra en la línea de comandos de la consola web. Para cerrar la consola web, use el acceso directo de la caja de herramientas global de Ctrl + Shift + I (Cmd + Opt + I en una Mac).

+ +

2. A partir de Firefox 66, este acceso directo ya no estará asociado con el depurador. A partir de Firefox 71, la letra de este acceso directo pasará a ser la Z.

+ +

3. Antes de Firefox 55, el atajo de teclaro era Ctrl + Shift + Q (Cmd + Opt + Q en Mac).

+ +

4. Hasta Firefox 38, cuando la consola del navegador está oculta por una ventana normal de Firefox, la misma combinación de teclas cierra la consola del navegador. Desde Firefox 38 en adelante, si la consola del navegador está oculta por una ventana normal de Firefox, esta combinación de teclas vuelve a colocar la consola del navegador en la parte superior y se enfoca en ella..

+ +

5. La herramienta está deshabilitada de forma predeterminada, por lo que el acceso directo no funcionará hasta que se habilite desde el Panel de configuración.

+ +

Caja de Herramientas

+ +
+

Estos accesos directos funcionan siempre que la caja de herramientas esté abierta, sin importar qué herramienta esté activa.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Recorre las herramientas de izquierda a derechaCtrl + ]Cmd + ]Ctrl + ]
Recorre las herramientas de derecha a izquierdaCtrl + [Cmd + [Ctrl + [
Alterna entre la herramienta activa y la configuración.F1F1F1
Alterna caja de herramientas entre los 2 últimos modos de acoplamientoCtrl + Shift + DCmd + Shift + DCtrl + Shift + D
Alterna consola dividida (excepto si la consola es la herramienta seleccionada actualmente)EscEscEsc
+
+ +
+
+
Estos accesos directos funcionan en todas las herramientas alojadas en la caja de herramientas.
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Incrementa el tamaño de la fuenteCtrl + + Cmd + + Ctrl + +
Decrementa el tamaño de la fuenteCtrl + -Cmd + -Ctrl + -
Restaura el tamaño por defecto de la fuenteCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Editor de código fuente

+ +
+

Esta tabla enumera los accesos directos predeterminados para el editor de código fuente.

+ +

En la sección Preferencias del editor de la configuración de las herramientas del desarrollador, es posible optar por utilizar las combinaciones de teclas Vim, Emacs o Sublime Text en su lugar.

+ +

Para seleccionarlos, visite about:config, seleccione la configuración devtools.editor.keymap y asigne "vim" o "emacs", o "sublime" a esa configuración. Si hace esto, los enlaces seleccionados se usarán para todas las herramientas de desarrollador que usan el editor de origen. Debe volver a abrir el editor para que el cambio surta efecto.

+ +

Desde Firefox 33 en adelante, la preferencia de vinculación de teclas se expone en la sección Preferencias del editor de la configuración de las herramientas del desarrollador, y puede configurarla allí en lugar de en about:config.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Ir a la lineaCtrl + JCmd + JCtrl + J
Buscar en la páginaCtrl + FCmd + FCtrl + F
Volver a buscar en la páginaCtrl + GCmd + GCtrl + G
Seleccionar todoCtrl + ACmd + ACtrl + A
CortarCtrl + XCmd + XCtrl + X
CopiarCtrl + CCmd + CCtrl + C
PegarCtrl + VCmd + VCtrl + V
DesacerCtrl + ZCmd + ZCtrl + Z
RehacerCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
IdentarTabTabTab
Quitar identado o sangríaShift + TabShift + TabShift + Tab
Mover línea(s) hacia arribaAlt + UpAlt + UpAlt + Up
Mover línea (s) hacia abajoAlt + DownAlt + DownAlt + Down
Comentar/Decomentar linea(s)Ctrl + /Cmd + /Ctrl + /
+
+ +

Inspector de páginas

+ +
+ + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abre el inspectorCtrl + Shift + CCmd + Shift + CCtrl + Shift + C
+ +

Selector de nodos

+ +

Estos accesos directos funcionan mientras el selector de nodos está activo.

+ + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Seleccione el elemento debajo del mouse y cancela el modo selectorClickClickClick
Seleccione el elemento debajo del mouse y permanece en modo selectorShift+ClickShift+ClickShift+Click
+ +

Panel HTML

+ +

Estos accesos directos funcionan mientras se esté en el panel HTML del Inspector.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Elimina el nodo seleccionadoDeleteDeleteDelete
Deshace el borrado de un nodoCtrl + ZCmd + ZCtrl + Z
Rehace el borrado de un nodoCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Moverse al siguiente nodo (solo nodos expandidos)Down arrowDown arrowDown arrow
Moverse al nodo anteriorUp arrowUp arrowUp arrow
Moverse al primer nodo del arbolHomeHomeHome
Moverse al últiimo nodo del arbolEndEndEnd
Expandir el nodo seleccionado actualmenteRight arrowRight arrowRight arrow
Contraer el nodo seleccionado actualmenteLeft arrowLeft arrowLeft arrow
(Cuando se selecciona un nodo) moverse dentro del nodo para que pueda comenzar a recorrer los atributos.EnterReturnEnter
Avanza por los atributos de un nodoTabTabTab
Retrocede a través de los atributos de un nodoShift + TabShift + TabShift + Tab
(Cuando se selecciona un atributo) comienza a editar el atributoEnterReturnEnter
Oculta / muestra el nodo seleccionadoHHH
Se centra en el cuadro de búsqueda en el panel HTMLCtrl + FCmd + FCtrl + F
Editar como HTMLF2F2F2
Deja de editar como HTMLF2 / Ctrl +EnterF2 / Cmd + ReturnF2 / Ctrl + Enter
Copia el HTML externo del nodo seleccionadoCtrl + CCmd + CCtrl + C
Desplazar el nodo seleccionado a la vistaSSS
Encuentra la siguiente coincidencia en el marcado, cuando la búsqueda está activaEnterReturnEnter
Encuentra la coincidencia anterior en el marcado, cuando la búsqueda está activaShift + EnterShift + ReturnShift + Enter
+ +

Barra de rutas de exploración o migas de pan

+ +

Estos atajos funcionan cuando la barra de rutas de exploración está enfocada.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Moverse al elemento anterior en la barraLeft arrowLeft arrowLeft arrow
Moverse al siguiente elemento en la barraRight arrowRight arrowRight arrow
Enfoca el panel HTMLShift + TabShift + TabShift + Tab
Enfoca el panel CSSTabTabTab
+ +

Panel CSS

+ +

Estos atajos funcionan cuando estás en el Inspector del panel CSS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Se centra en el cuadro de búsqueda del panel CSSCtrl + FCmd + FCtrl + F
Borrar el contenido del cuadro de búsqueda (solo cuando el cuadro de búsqueda está enfocado y se ha ingresado contenido)EscEscEsc
Avanza a través de propiedades y valores del panelTabTabTab
Retroceda a través de propiedades y valores del panelShift + TabShift + TabShift + Tab
Comienza a editar la propiedad o el valor (Vista de reglas solamente, cuando se selecciona una propiedad o valor, pero aún no se está editando)Enter or SpaceReturn or SpaceEnter or Space
Se desplaza hacia arriba y hacia abajo a través de sugerencias de autocompletar (sólo vista de Reglas, cuando se edita una propiedad o valor)Up arrow , Down arrowUp arrow , Down arrowUp arrow , Down arrow
Elige la sugerencia actual de autocompletar (sólo vista de reglas, cuando se edita una propiedad o valor)Enter or TabReturn or TabEnter or Tab
Incrementar el valor seleccionado en 1Up arrowUp arrowUp arrow
Reducir el valor seleccionado en 1Down arrowDown arrowDown arrow
Incrementar el valor seleccionado en 100Shift + Page UpShift + Page UpShift + Page Up
Decrementar el valor seleccionado en 100Shift + Page DownShift + Page DownShift + Page Down
Incrementar el valor seleccionado en 10Shift + Up arrowShift + Up arrowShift + Up arrow
Reducir el valor seleccionado en 10Shift + Down arrowShift + Down arrowShift + Down arrow
Incrementar el valor seleccionado en 0.1Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)Alt + Up arrowAlt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)
Reducir el valor seleccionado en 0.1Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).Alt + Down arrowAlt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).
Mostrar / ocultar más información sobre la propiedad actual (sólo vista calculada, cuando se selecciona una propiedad)Enter or SpaceReturn or SpaceEnter or Space
Abrir la página de referencia de MDN sobre la propiedad actual (solo vista calculada, cuando se selecciona una propiedad)F1F1F1
Abra el archivo CSS actual en el Editor de estilos (solo vista calculada, donde se muestra más información para una propiedad y se enfoca una referencia de archivo CSS).EnterReturnEnter
+
+ +

Depurador

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Cerrar archivoCtrl + WCmd + WCtrl + W
Buscar texto en el archivo actualCtrl + FCmd + FCtrl + F
Buscar texto en todos los archivosCtrl + Shift + FCmd + Shift + FCtrl + Shift + F
Encuentra el siguiente en el archivo actualCtrl + GCmd + GCtrl + G
Buscar cadenas por nombreCtrl + PCmd + PCtrl + P
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada actualmenteCtrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionada actualmenteCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
+ +

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5).

+ +
+

Nota: Antes de Firefox 66, la combinación Ctrl + Shift + S en Windows y Linux o Cmd + Opt + S en macOS abriría / cerraría el depurador. Desde Firefox 66 y versiones posteriores, este ya no es el caso.

+
+
+ +

Depurador (Antes de Firefox 52)

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsmacOSLinux
Abrir el depuradorCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Buscar una cadena en el archivo actual usando el script filterCtrl + FCmd + FCtrl + F
Encuentra el siguiente en el archivo actualEnter / Up arrowReturn / Up arrowEnter / Up arrow
Encuentra el anterior en el archivo actualShift + Enter / Down arrowShift + Return / Down arrowShift + Enter / Down arrow
Buscar en todas las fuentes usando el script filterCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Buscar cadenas por nombreCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Buscar definiciones de funcionesCtrl + DCmd + DCtrl + D
Filtrar variables cuando la ejecución está en pausaCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada Ctrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionadaCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Agregar texto seleccionado a las expresiones de WatchCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Ir a la linea usando el script filterCtrl + LCmd + LCtrl + L
Buscar usando el script filterCtrl + OCmd + OCtrl + O
En el panel de código fuente, salta a la definición de la funciónCtrl + clickCmd + clickCtrl + click
+ +

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5)

+
+ +

Consola web

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandosWindowsmacOSLinux
Abre la consola webCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Buscar en el panel de visualización de mensajesCtrl + FCmd + FCtrl + F
Abre el panel inspector de objetosCtrl + ClickCtrl + ClickCtrl + Click
Limpia el panel inspector de objetosEscEscEsc
Centrarse en la línea de comandoCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Limpiar salida +

Ctrl + L

+ +

From Firefox 44:

+ +

Ctrl + Shift + L

+ 		Ctrl + L +

Ctrl + L

+ +

From Firefox 44:

+ +

Ctrl + Shift + L

+
+ +

Interprete de línea de comandos

+ +

Estos atajos se aplican cuando estás en el Interprete de línea de comandos.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Desplazarse hasta el inicio de la salida de la consola (solo si la línea de comando está vacía)HomeHomeHome
Desplazarse hasta el final de la salida de la consola (solo si la línea de comando está vacía)EndEndEnd
Avanzar página a través de la salida de la consolaPage upPage upPage up
Retroceder una página a través de la salida de la consolaPage downPage downPage down
Ir hacia atrás a través del historial de comandosUp arrowUp arrowUp arrow
Ir hacia delante a través del historial de comandosDown arrowDown arrowDown arrow
Inicie la búsqueda inversa a través del historial de comandos / retroceda a través de comandos coincidentesF9Ctrl + RF9
Avance por el historial de comandos coincidentes (después de iniciar la búsqueda inversa)Shift + F9Ctrl + SShift + F9
Moverse al principio de la líneaHomeCtrl + ACtrl + A
Moverse al final de la líneaEndCtrl + ECtrl + E
Ejecutar la expresión actualEnterReturnEnter
Agregar una nueva línea (para ingresar expresiones de varias líneas)Shift + EnterShift + ReturnShift + Enter
+ +

Ventana emergente de autocompletado

+ +

Estos atajos se aplican mientras la ventana emergente de autocompletado está desplegada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Elija la sugerencia actual de autocompletadoTabTabTab
Cancelar la ventana emergente de autocompletadoEscEscEsc
Ir a la sugerencia de autocompletado anteriorUp arrowUp arrowUp arrow
Ir a la siguiente sugerencia de autocompletadoDown arrowDown arrowDown arrow
Página arriba a través de sugerencias de autocompletadoPage upPage upPage up
Página abajo a través de sugerencias de autocompletadoPage downPage downPage down
Desplazarse al principio de  las sugerencias de autocompletadoHomeHomeHome
Desplazarse hasta el final de las sugerencias de autocompletadoEndEndEnd
+
+ +

Editor de Estilo

+ + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abrir el editor de estiloShift + F7Shift + F7Shift + F7
Abrir una ventana emergente de autocompletadoCtrl + SpaceCmd + SpaceCtrl + Space
+ +
+

Bloc de Notas

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abrir el bloc de notasShift + F4Shift + F4Shift + F4
Ejecutar el código del bloc de notasCtrl + RCmd + RCtrl + R
Ejecutar el código del bloc de notas y mostrar el resultado en el inspector de objetosCtrl + ICmd + ICtrl + I
Ejecutar el código del bloc de notas e insertar el resultado como un comentarioCtrl + LCmd + LCtrl + L
Reevaluar la función actualCtrl + ECmd + ECtrl + E
Recargar la página actual y ejecutar el código del bloc de notaCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Guardar el código del bloc de notasCtrl + SCmd + SCtrl + S
Abrir un código existenteCtrl + OCmd + OCtrl + O
Crear una nueva página del bloc de notasCtrl + NCmd + NCtrl + N
Cerrar el bloc de notasCtrl + WCmd + WCtrl + W
Imprimir el código en el bloc de notasCtrl + PCmd + PCtrl + P
Mostrar sugerencias de autocompletadoCtrl + SpaceCtrl + SpaceCtrl + Space
Mostrar documentaciónCtrl + Shift + SpaceCtrl + Shift + SpaceCtrl + Shift + Space
+
+ +
+

Selector de color (Gotero)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Seleccionar el color actualEnterReturnEnter
Salir del goteroEscEscEsc
Moverse por 1 píxelArrow keysArrow keysArrow keys
Moverse por 10 píxelsShift + arrow keysShift + arrow keysShift + arrow keys
+
diff --git a/files/es/tools/add-ons/index.html b/files/es/tools/add-ons/index.html new file mode 100644 index 0000000000..53b7924169 --- /dev/null +++ b/files/es/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
diff --git a/files/es/tools/browser_console/index.html b/files/es/tools/browser_console/index.html new file mode 100644 index 0000000000..a33fe72f99 --- /dev/null +++ b/files/es/tools/browser_console/index.html @@ -0,0 +1,177 @@ +--- +title: Consola del Navegador +slug: Tools/Browser_Console +tags: + - Depuración + - Desarrollo web + - 'DesarrolloWeb:Herramientas' + - Herramientas + - Navegador +translation_of: Tools/Browser_Console +--- +

La Consola del Navegador es como la Consola Web, pero se aplica a todo el navegador en lugar de a una sola pestaña de contenido.

+ +

Por lo tanto, registra el mismo tipo de información que la Consola Web: solicitudes de red, JavaScript, CSS, errores y advertencias de seguridad y mensajes registrados explícitamente por código JavaScript. Sin embargo, en lugar de registrar esta información para una sola pestaña de contenido, registra información para todas las pestañas de contenido, complementos y código propio del navegador.

+ +

Si también desea utilizar las otras herramientas de desarrollador web en la caja de herramientas (Toolbox) Web estándar con código de complemento o explorador, considere la posibilidad de utilizar el cuadro de herramientas del navegador (Browser Toolbox).

+ +

Del mismo modo, puede ejecutar expresiones JavaScript utilizando la consola del explorador. Sin embargo, mientras la Consola Web ejecuta el código en el ámbito de la ventana de la página, la consola del explorador los ejecuta en el ámbito de la ventana chrome del navegador. Esto significa que puedes interactuar con todas las pestañas del navegador usando el gBrowser global e incluso con el XUL utilizado para especificar la interfaz de usuario del navegador.

+ +
+

Nota: La línea de comandos de la consola del navegador (para ejecutar expresiones JavaScript) está desactivada de forma predeterminada. Para habilitarla, establezca la preferencia devtools.chrome.enabled a true en about: config o configure la opción "Habilitar explorador {{Glossary ("chrome")}} y add-on debugging toolboxes" (Firefox 40 y posterior) en la opción Configuración de la herramienta de desarrollador (developer tool settings).

+
+ +

Abrir la Consola del Navegador

+ +

Puede abrir la consola del navegador de dos formas:

+ +
    +
  1. Desde el menú: seleccione "Consola del navegador" en el submenú "Desarrollador web" en el menú de Firefox (o en el menú Herramientas si muestra la barra de menús o está en OS X)
    2. +
  2. Desde el teclado: pulse Ctrl+Shift+J (o Cmd+Shift+J en un Mac).
    3. +
+ +

También puedes iniciar la consola del navegador lanzando Firefox desde la línea de comandos y pasando el argumento -jsconsole:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

La consola del navegador se ve así:

+ +

+ +

Puede ver que la consola del navegador se ve y se comporta de forma muy similar a la Consola Web:

+ + + +

Registro de Consola del Navegador

+ +

El registro de consola del Navegador registra el mismo tipo de mensajes que la consola Web:

+ + + +

Sin embargo, tambien muestra mensajes provenientes de:

+ + + +

Mensajes provenientes de complementos

+ +

La consola del navegador muestra mensajes registrados por todos los complementos de Firefox.

+ +

Console.jsm

+ +

Para utilizar la API de consola de un complemento tradicional o bootstrapped, obtenlo desde el modulo de consola.

+ +

Un simbolo exportado por Console.jsm es "console". a continuación se muestra un ejemplo de como accesarlo. lo que añade un mensaje a la Consola del Navegador.

+ +
Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

Aprenda mas:

+ + + +

HUDService

+ +

Tambien existe el HUDService el cual permite el acceso a la Consola de Navegador. El modulo está disponible en Mozilla DXR. Así vemos que no solo podemos acceder a la consola del Navegador sino tambien a la consola web.

+ +

Aqui hay un ejemplo de como limpiar el contenido de la consola del navegador:

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

Si usted quisiera accesar al documento contenido del la consola del navegador, esto puede hacerce mediante el HUDService. Este ejemplo a continuación  hace que cuando usted sobrepase el boton  "Clear" limpiará la Consola del navegador:

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Caracteristicas Adicionales Disponibles

+ +

Para los Complementos SDK, la consola API está disponible automaticamente. A continuación se muestra un ejemplo de complemento que registra un error cuando el usuario hace click en un widget:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

Si uested construye este como un archivo XPI, entonces abra la consola del navegador, y entonces abra el archivo XPI en Firefox e instalelo, verá una etiqueta widget con el mensaje "Error!" en la barra del complemento:

+ +

Haga click en el icono. verá un mensaje como este aparecer en la consola del navegador:

+ +

+ +

Para complementos basados unicamente en SDK, al mensaje se le antepone el nombre del complemento ("log-error"), haciendolo mas facil de encontrar todos los mensajes de este complemento utilizando la caja de busqueda del "Filtro de salida". Por default, solo los mensajes de error son registrados en la consola, aunque usted puede cambiar este comportamiento en preferencias del navegador.

+ +

Consola de línea de comandos del Navegador

+ +
+

La Consola de linea de comandos del navegador esta deshabilitada de manera predeterminada. Para habilitarla cambie la preferencia de devtools.chrome.enabled hacia true en about:config, o establezca la opción "Enable chrome debugging" dentro de developer tool settings.

+
+ +

Al igual que la consola Web, el interprete de linea de comando le permite evaluar expresiones JavaScript en tiempo real:Tambien como el interprete de linea de comando de la consola Web, esta linea de comando soporta autocompletar, historial, y varios atajos de teclado así como comandos de ayuda. si el resultado de un comando  es un objeto, usted puede hacer click sobre el objeto para ver sus detalles.

+ +

Pero mientras la consola Web ejecuta codigo en el ambito (scope) de la ventana que lo contiene, la consola del navegador ejecuta codigo en el ámbito (scope) de la ventana metálica del navegador. Usted puede confirmar este comportamiento evaluendo window:

+ +

+ +

Esto significa que usted puede controlar en el navegador: abrir, cerrar pestañas y ventanas y cambiar el contenido que ellas alojan, y modificar el UI del navegador al crear, cambiar y remover elementos XUL.

+ +

Controlando el navegador

+ +

El interprete de linea de comando obtiene acceso al objeto tabbrowser, a traves de el gBrowser global, y ello le permite a usted controlar el navegador a traves de la linea de comando. Pruebe correr el siguente codigo en la linea de comando en la consola del navegador (recuerde que para enviar multiples lineas de comando a la consola de navegador, utilice Shift+Enter):

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

Añadirá un listener en el (load event) de la pestaña que este actualmente seleccionada, el cual  terminará la pagina, para posteriormente cargar una nueva pagina.

+ +

Modificando el UI del navegador

+ +

Debido a que el  global window object es la ventana metalica del navegador, usted tambien puede modificar la Inteface de Usuario del navegador. En Windows, el siguente codigo añadira un nuevo ITEM al menu principal del navegador:

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

En OS X, este codigo similar añadirá un nuevo item al menu "Herramientas":

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

diff --git a/files/es/tools/browser_toolbox/index.html b/files/es/tools/browser_toolbox/index.html new file mode 100644 index 0000000000..d702370f0d --- /dev/null +++ b/files/es/tools/browser_toolbox/index.html @@ -0,0 +1,64 @@ +--- +title: Caja de Herramienta del Navegador +slug: Tools/Browser_Toolbox +tags: + - Depurador + - Firefox + - JavaScript +translation_of: Tools/Browser_Toolbox +--- +

La Caja de Herramientas del Navegador habilita la depuración de extensiones (add-ons) y del código JavaScript propio del navegador mas que simplemente páginas web como  la Caja de Herramienta normal. El contexto de la Caja de Herramientas del Navegador es el navegador completo en lugar de simplemente una única página en una única pestaña.

+ +
+

Nota: Si usted quiere depurar una extensión especifica que no es reiniciable o basado en SDK entonces pruebe el "Depurador de Extensiones".  Para extensiones que no son ninguna de las dos, use la Caja de Herramientas del Navegador.

+
+ +

Habilitando la Caja de Herramientas del Navegador

+ +
+

La Caja de Herramientas del Navegador no esta habilitada por defecto. Para habilitarla necesita marcar las casillas de configuración "Habilitar depuración  chrome y de extensiones" y "habilitar depuración remota".

+ +

Para hacer esto, abra la Configuración de Caja de Herramientas en Herramientas del Desarrollador, vaya a la sección "Configuración Avanzada", y marque en las opciones "Habilitar navegador chrome y caja de herramientas de depuración de extensiones" y "Habilitar depuración remota".

+ +

Developer Tools Settings

+
+ +

Abriendo la Caja de Herramienta del Navegador

+ +

Abra la caja de Herramientas del navegador a través del botón menú new fx menu y los ítems del menú "Desarrollador" y "Caja de Herramientas del Navegador". 

+ +

A partir de Firefox 39, puede abrirlo con la combinación de teclas  Ctrl + Alt +Shift + I .   ( Cmd + Opt +Shift + I en una Mac).

+ +

Se le presentará una caja de dialogo como esta (la cual puede ser removida configurando la propiedad "devtools.debugger.prompt-connection" a falso):

+ +

Clíque OK, y la Caja de Herramientas del Navegador abrirá en su propia ventana:

+ +

Estará habilitado para inspeccionar la ventana XUL del navegador y ver y depurar, todos los archivos JavaScript cargados por el propio navegador  y por las extensiones que están corriendo. En conjunto tendrá acceso a las siguientes herramientas del desarrollador:

+ + + +

Depurando chrome: y a cerca de: páginas

+ +

A partir de Firefox 37 en adelante, usted puede depurar chrome: y a cerca de: páginas usando el Depurador normal, justo como si fueran páginas con contenido ordinario.

+ +

Seleccionando un documento

+ +

En la Caja de Herramienta normal, hay un botón en la barra de herramienta habilitándolo a usted para seleccionar "iframes" específicos en el documento. A partir de Firefox 40 en adelante el mismo botón aparece en la caja de herramientas del navegador también, pero éste lista todas las ventanas de contenido y de nivel mas alto de chrome como así también cualquier "iframes" que contengan. Esto lo habilita a usted a inspeccionar documentos en ventanas individuales de chrome y ventanas emergentes, como así también en pestañas de contenido.

+ +

Por ejemplo, aquí se tiene lo que la ventana emergente de selección de marco lista cuando hay dos  ventanas de navegador abiertas, una con una pestaña de contenido, y otra con dos:

+ +

+ +

 

+ +

 

+ +

 

diff --git a/files/es/tools/debugger/how_to/disable_breakpoints/index.html b/files/es/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..44e2669bd0 --- /dev/null +++ b/files/es/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,13 @@ +--- +title: Disable breakpoints +slug: Tools/Debugger/How_to/Disable_breakpoints +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +

Para desactivar un punto de interrupción, desactive la casilla de verificación junto a la entrada del punto de interrupción en el panel de lista de Fuente:

+ +

Alternativamente, activar el menú contextual, mientras que el puntero del ratón está sobre la entrada del punto de interrupción en el panel de lista de fuentes y seleccione "breakpoint Desactivar"
+ También es posible eliminar un punto de interrupción con sólo hacer clic en el círculo azul que representa la misma.

+ +

Para activar / desactivar todos los puntos de interrupción, utilice el "Cambia todos los puntos de ruptura" botón en el panel de lista de Fuente:

+ +

diff --git a/files/es/tools/debugger/how_to/index.html b/files/es/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..d77ec65938 --- /dev/null +++ b/files/es/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/es/tools/debugger/how_to/set_a_breakpoint/index.html b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..49376ffc9e --- /dev/null +++ b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,44 @@ +--- +title: Set a breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +
{{ToolsSidebar}}
+ +

Puedes establecer una interrupción incondicional en una de las siguientes maneras:

+ + + +

When you display the context menu, you have a choice of setting either a breakpoint that will pause code execution when it reaches that line, an unconditional breakpoint, or a conditional breakpoint that will only pause the code if the conditions you define are met:

+ +

+ +

If you choose to set a conditional breakpoint, you will be able to add the condition:

+ +

+ +

Each breakpoint is shown in two places in the debugger:

+ + + +

Starting in Firefox 67, you can set a column breakpoint on a complex line of code, such as one that makes multiple function calls. For example, if you try to set a breakpoint on the following line, you will have three possible locations for a breakpoint: at the point where the variable value is set, at the call to parse, or at the call to getItem.

+ +
tasks = JSON.parse(localStorage.getItem('todoList'));
+ +

Possible breakpoints are shown with indicators. The following image shows the line in the debugger. As soon as you click on the line, the three indicators show the possible breakpoints. The default breakpoint is set to the first column. In the image, the second column breakpoint was chosen which you can confirm in the Breakpoints section on the right where it shows that the breakpoint is on the call to parse.

+ +

+ +

Column breakpoints allow you to break at multiple points on the same line. In the previous example, you could have selected both the call to parse and the call to getItem, or even all three columns to break at each of the possible locations.

+ +

In cases where you set breakpoints on multiple columns, the currently active columns breakpoint will be highlighted in the Breakpoints side panel.

diff --git a/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html new file mode 100644 index 0000000000..30e60902cd --- /dev/null +++ b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html @@ -0,0 +1,36 @@ +--- +title: Uso de un mapa fuente +slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente +tags: + - Debug + - mapa fuente + - source map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+ +

Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:

+ + + +

En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un mapa fuente es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.

+ +

Para habilitar al debugger trabajar con un mapa fuente, debes:

+ + + +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

En el video anterior, cargamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:

+ +
//# sourceMappingURL=main.js.map
+ +

En el panel de fuentes del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.

diff --git a/files/es/tools/debugger/index.html b/files/es/tools/debugger/index.html new file mode 100644 index 0000000000..7d869dccf3 --- /dev/null +++ b/files/es/tools/debugger/index.html @@ -0,0 +1,214 @@ +--- +title: Depurador +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +

{{ToolsSidebar}}

+ +
+

Esta página describe el depurador de JavaScript como se muestra en Firefox 52 y superiores, en Firefox Nightly y Firefox Developer Edition.

+ +

Para ver como luce en versiones anteriores de firefox ó en Firefox Beta y Release, ver Depurador (anterior a Firefox 52).

+ +

Si obtienes esta version del Depurador y requires cambiar a la version anterior, lo puedes hacer visitando about:config y cambiando la preferencia de "devtools.debugger.new-debugger-frontend" a false .

+
+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +

El depurador te permite inspeccionar paso a paso el código de JavaScript y examinar o modificar su estado ayudando a eliminar errores.

+ +

Puedes usarlo para depurar código local o remoto, por ejemplo en un dispositivo Android ejecutando Firefox para Android.  Ver acerca del depurador remoto para aprender como depurar un objetivo remoto.j

+ +

{{ fx_minversion_header("15.0") }}

+ +

El depurador JavaScript está disponible en dos variedades: una para depurar contenido que se ejecuta directamente en Firefox, y otra que te permite depurar contenido que se está ejecutando en un dispositivo con Firefox OS , o en Firefox en un dispositivo Android. La principal diferencia entre los dos es que el Depurador Remoto se ejecuta en su propia ventana, mientras que el depurador de contenido web se ejecuta en la misma pestaña de la  Web que se está depurando.

+ +

Iniciar el depurador

+ +

Depurando contenido web

+ +

Para ejecutar contenido Web ejecutado directamente en Firefox (no importa si está guardado localmente en tu equipo o en un servidor), seleccione la opción Depurador del Menú Desarrollador Web en Herramientas.

+ +

Una vez que ha configurado Firefox y Firefox OS para soportar depuración, puede usar el Depurador Remoto para depurar su código ejecutado en  un dispositivo Firefox OS o en el simulador de Firefox OS.

+ +

A fin de depurar código  JavaScript ejecutado en un dispositivo  Firefox OS o Android, debe verificar que el dispositivo este conectado al puerto USB y que ese lsusb y adb pueden verlo. Entonces deberá re-enviar el puerto  TCP apropiado al dispositivo abriendo una ventana de  terminal y digitando el siguiente comando:

+ +
adb forward tcp:6000 tcp:6000
+ +
+

Recuerda: Deberás re-enviar el puerto cada vez que reinicies el dispositivo.

+
+ +

Ahora puede abrir el depurador del menú de desarrolladores. Le pedirá especificar la dirección IP y el puerto al que se quiere conectar. Dé click en "ok" y puede iniciar la depuración.

+ +

Un vistazo rápido a cómo se ve el depurador remoto

+ +

Llegado a este punto, el depurador no está ejecutandose todavía, debido a que no se han puesto puntos de ruptura o breakpoints. El dispositivo solo permanece a la espera. De hecho, en las siguientes secciones se explica como usar el depurador.  

+ +

La Barra del Depurador

+ +

La barra de herramientas tiene diversos controles:

+ +

PNG del diagrama de barra de herramientas etiquetado

+ +
+
Pause/Resume (F6)
+
Pausa o reanuda la ejecución de un script que estas depurando.
+
Step Over (F7)
+
Pausa la linea en curso de codigo JavaScript.
+
Step Into (F8)
+
Pausa la llamada a la función de la linea en curso del código JavaScript.
+
Step Out (Shift-F8)
+
Ejecuta el script hasta que termina la ejecución de la función.
+
Script Chooser (Ctrl-P or Cmd-P)
+
Este pop-up menu te deja seleccionar uno de los scripts en ejecución para leer su código, colocar puntos de ruptura, y continuar.
+
Script Filter
+
Este filtro de script (que también funciona como caja de busquedas) nos deja introducir una cadena para filtrar que scripts deben aparecer en el Buscador de Script. Consulte {{anch("Using the script filter")}}  a continuación.
+
Expandir Paneles
+
Expande o contrae la ventana para mostar u ocultar los paneles laterales.
+
Debugger Options
+
Aparece un menu en una ventana emergente dejandote configurar el depurador. Consulte {{anch("Opciones de depuración")}} a continuación.
+
+ +
+

Nota: El depurador de contenido Web tiene un icono de Cierre al principio de la barra de tareas; puedes usarlo para cerrar el depurador.

+
+ +

Usando el filtro de Scripts

+ +

Cuando haces clic en el filtro de script de la barra de herramientas, puedes introducir una cadena para filtrar el menú de selección de script para que solo muestre los scripts seleccionados. Además, como puede ver al hacer clic en esta caja, hay operadores especiales que puedes usar para utilizar el cuadro como ventana de busqueda, así como para otras utilidades. Cada uno de estos operadores especiales tiene un atajo de teclado que automáticamente te lleva a la ventana de filtros e insertará el operador en el cuadro por usted, para que pueda comenzar a escribir.

+ +

Captura de pantalla del panel emergente del operador del cuadro de búsqueda.

+ +
+
Search in all files - ! (Cmd-Opt-F)
+
Busca el texto que ingresa en todos los scripts en ejecución. Esto agrega un panel justo debajo de la barra de herramientas que muestra todos los archivos coincidentes, cada uno con un cuadro de divulgación que le permite ver las coincidencias encontradas dentro de él.
+
Find in this file - # (Cmd-F)
+
Busca el texto que ingresas en el archivo que estás viendo actualmente.
+
Jump to line - : (Cmd-J)
+
Salta al numero de línea que has introducido en la ventana.
+
Filter variables - * (Cmd-Opt-V)
+
Filtra las variables mostradas para incluir solo aquellas que coinciden con la cadena especificada.
+
+ +

Opciones del depurador

+ +

El icono de Opciones del depurador, cuando cliqueas, presenta un menu de opciones emergente que te deja ajustar el comportamiento del depurador.

+ +
+
Pausa en excepciones
+
Cuando esta opción esta marcada, la ejecución del script se pausará automáticamente cada vez que se produzca una excepción de JavaScript.
+
Mostrar paneles al inicio
+
Cuando esta opción esta marcada, los dos paneles de la barra lateral del depurador son visibles cuando se inicia el depurador por primera vez; por defecto, no se ven.
+
Mostrar propiedades ocultas
+
Si no marcas esta opción, las propiedades de JavaScript ocultas (es decir, aquellas que son no-enumerables) no se muestran.
+
Mostrar cuadro de busqueda de variables
+
Habilitar esta opción agrega un cuadro de búsqueda "Filtrar variables" al panel de variables, que pueda filtrar la lista de variables que se muestra.
+
+ +

Uso del depurador

+ +

El depurador de JavaScript tiene la mayoría de las características estándar que espera en un depurador moderno.

+ +

Breakpoints

+ +

Puede establecer un punto de interrupción eligiendo el archivo en el que desea establecer un punto de interrupción (si aún no lo está mirando) utilizando el menú desplegable del selector de guiones y luego haciendo clic en la columna del número de línea, a la izquierda del to the left of the line number itself, en la línea de código en la que desea establecer un punto de interrupción.También puede hacer clic con el botón derecho en el código, en la línea en la que desea crear un punto de interrupción, y usar el menú contextual resultante para crear un punto de interrupción (Ctrl + B o Cmd-B) o un punto de interrupción condicional (Ctrl + Shift + B o Cmd-Shift-B)

+ +

Por ejemplo, usemos el depurador remoto para establecer un punto de interrupción que se active siempre que baje la barra de notificaciones. Para hacer eso, elija  "app://system.gaiamobile.org/js/quick_settings.js" (esta es la aplicación de configuración rápida que aparece cuando despliega la barra de notificaciones). Vaya al método handleEvent() y haga clic a la izquierda de la primera línea de código. Esto agregará un indicador de punto de interrupción azul al lado de esa línea, como este:

+ +

Imagen que muestra cómo se ve un punto de interrupción establecido

+ +

Puede volver a desactivar el punto de interrupción, por supuesto, haciendo clic en ese indicador de punto de interrupción nuevamente. La parte inferior del panel de la pila también muestra una lista de todos los puntos de interrupción establecidos actualmente. Consulte {{anch ("Gestión de puntos de interrupción")}} para obtener detalles sobre las cosas que puede hacer con esta lista.

+ +

Ahora, despliegue la barra de notificaciones en su dispositivo. La barra se desplegará y luego se encenderá el punto de interrupción cuando la aplicación reciba su primer evento. Si no tiene los paneles mostrados, se abrirán en este momento (para mostrarle el marco de la pila, la visualización de variables, etc.). El depurador, en este punto, se verá así:

+ +

Una imagen que muestra cómo se ve cuando se alcanza un punto de interrupción.

+ +

Mientras tanto, su dispositivo se verá así:

+ +

Imagen que muestra cómo se ve el dispositivo cuando se activa el punto de interrupción de muestra.

+ +

Puede hacer clic hacia adelante y hacia atrás en el marco de la pila para ver el historial de llamadas. Al hacer clic en "ut_onTouchEnd" en el panel del marco de la pila, se mostrará el código app://system.gaiamobile.org/js/utility_tray.jsque manejó el evento que ocurrió cuando quitó el dedo de la pantalla después de bajar la bandeja de notificaciones, por ejemplo.

+ +

Puede usar los botones de reanudar, pasar, entrar y salir de la barra de herramientas como en cualquier depurador típico, para recorrer el código. La siguiente línea de código para ejecutar tiene una flecha verde a su izquierda. Por supuesto, puede establecer y eliminar puntos de interrupción, examinar variables, etc. mientras lo hace.

+ +

El canalón a la derecha del código fuente tiene indicadores azules en los que puede hacer clic para desplazarse rápidamente hasta el punto de interrupción correspondiente.

+ +

Puntos de interrupción condicionales

+ +

Los puntos de interrupción condicionales son un tipo especial de punto de interrupción que se activa solo cuando una expresión de JavaScript determinada es verdadera. Para establecer un punto de interrupción condicional, haga clic derecho en una línea de código y elija "Agregar punto de interrupción condicional" (o presione Ctrl + Shift + B / Cmd-Shift-B). También puede crear un punto de interrupción regular y luego agregar una condición haciendo clic con el botón derecho en la lista de puntos de interrupción en la esquina inferior izquierda de la ventana del depurador.

+ +

Luego puede ingresar una condición que debe ser verdadera para que se active el punto de interrupción:

+ +

El cuadro para configurar un punto de interrupción condicional

+ +

Ahora, cuando se alcanza la línea de código correspondiente, solo se detendrá la ejecución de la expresión si evt.type == 'click'es verdadera.

+ +

Gestionar puntos de interrupción

+ +

Puede administrar los puntos de interrupción que ha establecido utilizando la lista de puntos de interrupción en el lado inferior izquierdo de la ventana del depurador. Activar y desactivar la casilla de verificación en cualquier punto de interrupción activa y desactiva el punto de interrupción. Al hacer clic en cualquier punto de interrupción condicional, aparecerá el panel de edición de puntos de interrupción condicional, como se ve en {{anch ("Puntos de interrupción condicionales")}}.

+ +

Puede obtener opciones adicionales haciendo clic derecho en cualquier punto de interrupción:

+ +
+
Eliminar todos los puntos de interrupción
+
Elimina todos los puntos de interrupción actuales.
+
Habilitar todos los puntos de interrupción
+
Habilita todos los puntos de interrupción actuales. Este es un atajo para alternar en las casillas de verificación junto a todos los puntos de interrupción.
+
Deshabilitar todos los puntos de interrupción
+
Desactiva (sin eliminar) todos los puntos de interrupción. Este es un atajo para desactivar las casillas de verificación junto a todos los puntos de interrupción.
+
Habilitar a otros
+
Habilita todos los puntos de interrupción excepto el que hizo clic con el botón derecho.
+
Deshabilitar a otros
+
Disables all breakpoints except the one you right-clicked.
+
Remove others
+
Removes all breakpoints except the one you right-clicked.
+
Configure conditional breakpoint
+
Configures the conditional breakpoint on which you right-clicked. If the breakpoint isn't a conditional one, you can add a condition and turn it into a conditional breakpoint.
+
Disable breakpoint
+
Disables the breakpoint you right-clicked.
+
Enable breakpoint
+
Enables the breakpoint you right-clicked.
+
+ +

The variable panel

+ +

Primera toma del panel variableMost of the right-hand pane in the debugger is occupied by the variables available in the scope you're currently viewing. As seen here, it shows the variables for the local scope of the currently executing function (in this case, qs_handleEvent()), the calling function (here it's ut_show()), and the global scope (the {{domxref("Window")}} object, in this case).

+ +

Each object can be expanded using a disclosure triangle to show its members, thereby revealing its contents. You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on the "true" next to geolocationEnabled, you can type "false" to set the value to false. Variables whose values you've edited are highlighted in yellow, like this:

+ +

Ejemplo de cómo se ve una variable modificada.

+ +

Pointing your cursor at a variable provides a tooltip that provides additional information about the variable; for example, pointing at the evt object says "configurable enumerable writable". This tells you that the evt object is not configurable, but is enumerable and writable. See Object.defineProperty() for details on what these property descriptors mean.

+ +

If you've enabled the filter variables box, as shown in the screenshot, you can reduce clutter in this list to limit the list to showing only the things you really want to see. This search is even recursive; it will search through sub-objects. Typing "blue", for example, restricts the list to the this.bluetooth object in the qs_handleEvent() function's scope, and the Bluetooth and BluetoothTransfer objects in the global scope.

+ +

Watch expressions

+ +

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

+ +

Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear.

+ +

For example, let's say we're stepping through some code and we want to quickly know what the value of a variable a multiplied by two is, without having to be bothered with any tedious "thinking". We can enter the expression a*2 into the "Add a watch expression box" and hit enter, set an appropriate breakpoint, and run our code.

+ +

When our breakpoint is reached, let's say the value of a is 1. The resulting display looks like this:

+ +

Cómo se ve una expresión de reloj despedido

+ +

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

+ +

Stopping the debugger

+ +

Cuando haya terminado de depurar, si lo desea, puede desactivar la depuración remota en el dispositivo abriendo la aplicación Configuración y luego eligiendo Información del dispositivo. En esa página, verá un botón Más información. Toque eso, luego en la página siguiente, desplácese hacia abajo hasta "Desarrollador" y toque eso. Eso presenta una lista de opciones para desarrolladores. Desactive la depuración remota allí. Sin embargo, no tienes que hacer esto si no quieres.

+ +
+

Nota: No es necesario reiniciar solo para activar y desactivar el soporte de depuración remota en el dispositivo, a partir de las compilaciones nocturnas del 29 de noviembre de 2012 o posteriores.]

+
+ +

Vea también:

+ + diff --git a/files/es/tools/debugger/source_map_errors/index.html b/files/es/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..ff12850c79 --- /dev/null +++ b/files/es/tools/debugger/source_map_errors/index.html @@ -0,0 +1,70 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +tags: + - Consola + - Debugger + - Depurador + - Herramientas + - Source maps + - mapas fuente +translation_of: Tools/Debugger/Source_map_errors +--- +
{{ToolsSidebar}}
+ +

Los mapas fuente son ficheros JSON que proporcionan una forma de asociar las fuentes transformadas, tal como las ven los navegadores, con su fuente original, tal como fue escrita por el desarrollador. A veces puedes encontrar problemas trabajando con los mapas fuente.  Esta página explica los problemas más comunes y como resolverlos.

+ +
+

Nota: Si no conoces los mapas fuente, puedes aprender más sobre ellos en  Como usar un mapa fuente.

+
+ +

Informe de errores general de mapas fuente

+ +

Si ves un problema, aparecerá un mensaje en la consola web. Este mensaje mostrará un mensaje de error, la dirección URL del recurso, y la URL del mapa fuente:

+ +

Error from invalid JSON

+ +

Aquí, la URL del recurso nos dice que bundle.js hace mención a un mapa fuente, y la URL del mapa fuente nos dice dónde encontrar los datos del mapa fuente (en este caso, relativo al recurso).  El error nos dice que el mapa fuente no son datos en formato JSON — por tanto estamos proporcionando el archivo erroneo.

+ +

Hay unas cuantas formas en las que los mapas fuente pueden ir mal; Estas se detallan en las siguientes secciones.

+ +

Mapa fuente no encontrado o inaccesible

+ +

El mapa fuente puede estar desaparecido o inaccesible.

+ +

Source map file is missing

+ +

Para arreglarlo debemos asegurarnos que el fichero existe y esta siendo servido y es accesible por el navegador.

+ +

Mapa fuente invalido

+ +

El mapa fuente puede ser inválido — bien porque no es un fichero en formato JSON o porque tiene una estructura incorrecta. Los típicos mensajes de error son:

+ + + +

Error: "version" is a required argument

+ +

Fuente original no encontrada

+ +

La fuente original podría estar desaparecida. Este mensaje puede encontrarse cuando se intenta abrir una de las fuentes originales en el debugger. El mensaje parece un poco diferente en este caso:

+ +

Debugger source tab showing the error

+ +

En este caso, el error tambien se mostrará en el debugger en la pestaña de la fuente:

+ +

Debugger source tab showing the error

+ +

Error de red intentando acceder al recurso. (NetworkError when attempting to fetch resource)

+ +

Un bug de Firefox evita que los mapas fuente se descarguen para las extensiones y complementos.

+ +

Visita Bug 1437937: WebExtensions Doesn't Find Source Maps para más detalles.

+ +
Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map
+ +

La única forma de corregir este error es cambiando manualmente la URL del mapa a una pública (http://localhost:1234/file.map.js) y arrancar un servidor web local en el puerto establecido.

diff --git "a/files/es/tools/desempe\303\261o/index.html" "b/files/es/tools/desempe\303\261o/index.html" new file mode 100644 index 0000000000..9dbf8e643d --- /dev/null +++ "b/files/es/tools/desempe\303\261o/index.html" @@ -0,0 +1,91 @@ +--- +title: Rendimiento +slug: Tools/Desempeño +translation_of: Tools/Performance +--- +

La herramienta de Rendimiento te da una visión general de la capacidad de respuesta del sitio que visitas así como de su JavaScript y el modelo de diseño. Con esta herramienta puedes generar un perfil o registro de un sitio web en un período de tiempo. En dicho perfil la herramienta te ofrece una vista general de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el tiempo de respuesta de dicha pagina.

+ +

Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Preámbulo

+ +
+
+
+
UI Tour
+
+

Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.

+
+
+
+ +
+
+
How to
+
Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.
+
+
+
+ +
+

Componentes de la herramienta de Rendimiento

+ +
+
+
+
Frame rate
+
Comprender la capacidad de respuesta general de tu sitio.
+
Call Tree
+
Encontrar cuellos de botella en el JavaScript de tu sitio.
+
+
+ +
+
+
Waterfall
+
Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.
+
Flame Chart
+
Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.
+
 
+
+
+
+ +
+

Escenarios

+ +
+
+
+
Animating CSS properties
+
Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.
+
 
+
+
+ +
+
+
Intensive JavaScript
+
Utiliza la velocidad de los fotogramas y la herramienta Waterfall para resaltar los problemas de rendimiento provocados por los JavaScript de larga duración y cómo los workers pueden ayudar en esta situación.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git "a/files/es/tools/desempe\303\261o/ui_tour/index.html" "b/files/es/tools/desempe\303\261o/ui_tour/index.html" new file mode 100644 index 0000000000..8898abae03 --- /dev/null +++ "b/files/es/tools/desempe\303\261o/ui_tour/index.html" @@ -0,0 +1,134 @@ +--- +title: Paseo por la interfaz de usuario +slug: Tools/Desempeño/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +

La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:

+ +

+ + + +

Barra de herramientas (Toolbar)

+ +

De izquierde a derecha la barra de herramientas contiene los siguientes botones:

+ + + +
+

Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.

+
+ + + +

+ +

Lista de grabaciones (Recordings pane)

+ +

La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.

+ +

+ +

En el hay una grabación seleccionada en todo momento y esta se mostrara en el resto de la herramienta. Para seleccionar una grabación diferente, presiónala en la lista del panel. Para guardarla como un archivo JSON haz click en "Guardar".

+ +

Vista previa de la grabacion (Recording overview)

+ +

Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.

+ +

+ +

Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.

+ +

Resumen de la vista en cascada

+ +

Nos presenta una versión comprimida de la vista en cascada:

+ +

+ +

Las operaciones grabadas están codificadas con el mismo esquema de colores empleado para la vista en cascada que se muestra en la ventana de detalles.

+ +

Gráfico con el promedio de fotogramas

+ +

El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:

+ +

+ +

Puedes consultar la entrada sobre el promedio de fotogramas.

+ +

Relacionando eventos

+ +

Como estos eventos están sincronizados, puedes crear una correlación entre ellos.

+ +

Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (representada con una barra verde en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:

+ +

+ +

Ampliando

+ +

Puedes usar la vista previa para seleccionar un trozo de la grabación para examinarlo con mas detalle. Al hacer esto, la ventana de detalles se actualizara con el contenido marcado. En la captura inferior hemos seleccionado la caída en el promedio de fotogramas y así podemos ver la operación de pintado con mas detalle:

+ +

+ +

Ventana de detalles (Details pane)

+ +

La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la barra de herramientas.

+ +

Vista en cascada

+ +

La vista en cascada da una vision de que esta haciendo el navegador durante la grabación: ejecutar Javascript, actualizar CSS,  actualizar la composición de la pagina y el rendimiento del redibujado. El eje-x representa el tiempo y las operaciones grabadas van apareciendo en forma de cascada, reflejando así la naturaleza que tiene el navegador el ejecutar las tareas en serie.

+ +

+ +

Para aprender mas sobre la vista en cascada puedes visitar su entrada.

+ +

Árbol de llamadas

+ +

El árbol de llamadas es una muestra del Javascript que se ejecuta en la pagina. Son una serie de muestras del estado del motor de Javascript y registra el stack de código ejecutado en el momento que se toma la muestra. Estadísticamente, el numero de muestras tomadas al ejecutar una función especifica, corresponde con la cantidad de tiempo que el navegador ha empleado para ejecutarlo, así puedes identificar los cuellos de botella en tu código.

+ +


+ Para aprender mas sobre el árbol de llamadas puedes visitar su entrada.

+ +

Gráfico de llama

+ +

Si el árbol de llamadas te muestra estadísticamente que funciones de tu sitio gastan mas tiempo de ejecución durante la grabación, el gráfico de llama nos indica cualquier stack llamado durante la misma:

+ +

+ +

Para aprender mas sobre el gráfico de llama puedes visitar su entrada.

+ +

Asignaciones

+ +
+

La vista de Asignaciones es nueva en Firefox 46.

+
+ +

La vista de Asignaciones es como el árbol de llamadas, pero para las asignaciones: Nos muestra que funciones en tu pagina tienen mas memoria asignada durante el transacurso de la grabación.

+ +

+ +

La vista de Asignaciones solo aparece si haz seleccionado "Grabar Asignaciones" en las opciones de las herramientas de rendimiento antes de hacer una nueva grabación.

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

Para aprender mas sobre las Asignaciones puedes visitar su entrada.

diff --git a/files/es/tools/editor_audio_web/index.html b/files/es/tools/editor_audio_web/index.html new file mode 100644 index 0000000000..2db0cdbe58 --- /dev/null +++ b/files/es/tools/editor_audio_web/index.html @@ -0,0 +1,31 @@ +--- +title: Editor de audio web +slug: Tools/Editor_Audio_Web +translation_of: Tools/Web_Audio_Editor +--- +
+

El editor de audio web es nuevo en Firefox 32.

+
+

Con la API de Audio Web, los desarrolladores crean un contexto de audio. Dentro de ese contexto construyen un número de  nodos de audio, incluyendo:

+ +

Cada nodo tiene cero o más propiedades AudioParam que configuran su operación. Por ejemplo, GainNode tiene solamente la propiedad gain, mientras que OscillatorNode tiene las propiedades frequency y detune.

+

El desarrollador conecta los nodos en un gráfico y ese gráfico completo define el comportamiento del flujo de audio.

+

El editor de audio web examina un contexto de audio construido en la página y proporciona una visualización de su gráfico. Esto da una vista de alto nivel de su operación y permite asegurar que todos los nodos están conectados de la forma esperada. Entonces se pueden examinar y editar las propiedades AudioParam para cada nodo del gráfico. Algunas propiedades no-AudioParam, como una propiedad OscillatorNode's type son mostradas y también se pueden editar.

+

Esta herramienta todavía es experimental. Si encuentra errores, nos encantaría que los informe en Bugzilla. Si tiene alguna opinión o sugerencias para nuevas funcionalidades, ffdevtools.uservoice.com o Twitter son lugares excelentes para registrarlas.

+

Abriendo el editor de audio web

+

El editor de audio web no está habilitado por defecto en Firefox 32. Para habilitarlo, abra la Configuración de herramientas de desarrollador y marque "Audio web". Ahora debería haber una pestaña extra en la Barra de herramientas llamada "Audio web". Haga clic en esa pestaña y cargue una página que construya un contexto de audio. Dos demos interesantes son:

+ +

Visualizando el gráfico

+

El editor de audio web ahora mostrará el gráfico del contexto de audio cargado. Aquí está el gráfico del demo de Violent Theremin:

+

Se puede ver que usa tres nodos: un OscillatorNode como fuente, un GainNode para controlar el volumen y un AudioDestinationNode como destino.

+

Inspeccionando y modificando AudioNodes

+

Si hace clic en un nodo, se restalta y aparece un inspector del nodo en el lado derecho. Ahí se listan los valores de las propiedades del nodo AudioParam. Por ejemplo, así se ve el OscillatorNode:

+

Con el demo de Violent Theremin, el parámetro frecuencia es modificado cuando el usuario mueve el mouse hacia la izquierda o la derecha y eso se puede ver reflejado en el inspector del nodo. Sin embargo, el valor no es actualizado en tiempo real: hay que hacer clic en el nodo nuevamente para ver el valor actualizado.

+

Si se hace clic en el valor en el inspector del nodo se puede modificar: presione Intro o Tab y el nuevo valor tiene efecto inmediatamente.

diff --git a/files/es/tools/editor_estilo/index.html b/files/es/tools/editor_estilo/index.html new file mode 100644 index 0000000000..cdfc54bebf --- /dev/null +++ b/files/es/tools/editor_estilo/index.html @@ -0,0 +1,101 @@ +--- +title: Editor de Estilo +slug: Tools/Editor_Estilo +tags: + - CSS + - Desarrollo web + - Herramientas + - Herramientas de desarrollo web + - Hojas de estilo +translation_of: Tools/Style_Editor +--- +

El editor de estilo te permite:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

Para abrir el Editor de Estilo selecciona la opción "Editor de Estilo" desde el menú "Web Developer" (este es un submenu del menú "Tools" o "Herramientas" en una Mac). El Toolbox o caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Editor de Estilo activado:

+ +

+ +

El Editor de Estilo está divivido en  dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.

+ +
+

From Firefox 33 onwards, there's a third component to the Style Editor: the media sidebar.

+
+ +

El panel de hojas de estilo

+ +

El panel de hojas de estilo, en la izquierda, muestra todas las hojas de estilos que están siendo utilizadas por el documento actual.  You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. Puede guardar los cambios hechos en la hoja de estilos a su computador, haciendo clic en el botón Guardar en la esquina inferior derecha de cada hoja de estilos de la lista.

+ +

El panel de edición

+ +

A la derecha está el panel de edición. Aquí está disponible el código fuente de la hoja de estilo seleccionada, lista para ver y editar. Cualquier cambio que realice será aplicada inmediatamente. This makes it easy to experiment with, revise, and test changes. Una vez esté satisfecho con sus cambios, puede guardar una copia localmente, haciendo clic en el botón Guardar.

+ +

El editor contiene numeración de líneas y resaltamiento de código, haciendo más fácil la lectura de su CSS. También soporta keyboard shortcuts.

+ +

El Editor de Estilos automáticamente des-minimiza las hojas de estilo que detecta, sin afectar el original. Esto facilita mucho el trabajo en páginas que ya han sido optimizadas.

+ +

El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.

+ +

Puede deshabilitar el autocompletado en Style Editor settings.

+ +

La barra lateral "media"

+ +

A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (@media rules). La barra lateral muestra las reglas y provee un link a la línea donde se define dicha regla. Haga clic en un ítem para ir hacia la definición de esa regla en la hoja de estilo. El texto condicional de la regla estará en gris si el media query no aplica.

+ +

La barra lateral de medios funciona especialmente bien con Responsive Design View para crear y depurar diseños móviles :

+ +

+ +

Creación e importación de hojas de estilo

+ +

Se puede crear una nueva hoja de estilos haciendo click en el nuevo botón de la barra de herrramientas. A continuación puedes comenzar a introducir  CSS en el nuevo editor y ver como los nuevos estilos se aplican de forma inmediata ,al igual que los cambios en otras hojas.

+ +

Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.

+ +

Soporte de mapa fuente

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Los desarrolladores web, con frecuencia crean archivos CSS  utilizando un preprocesador como  Sass, Less, o Stylus. Estas herramientas generan archivos CSS  procedentes de un sintasix mas rico y expresivo. Si haces esto, seras capaz de editar y  ver que el  CSS  generado no es tan util, porque el código que mantienes es el sintaxis preprocesado, no el  CSS generado. Por lo que necesitarás editar el CSS generado, y después manualmente trabajar sobre como reaplicarlo a la fuente original.

+ +

Mapas Fuente habilita para regresar desde el CSS generado a la síntasix original, entonces  se puede ver, y te permite editar archivos en la síntasix original. A partir de Firefox 29 en adelante, el editor de estilos puede interpretar mapas fuente de CSS .

+ +

Esto significa que si utilizas, por ejemplo, Sass, el Editor de Estilos  mostrará,y permitirá editar,archivos Sass , en lugar del CSS que se ha generado desde ellos:

+ +

Para que esto funcione ,es necesario:

+ + + +

Visualización de las fuentes originales

+ +

Ahora, si compruebas "mostrar fuentes originales" en los ajustes del Editor de estilos, el vínculo junto a las reglas  CSS en la Vista de Reglas ,vincula con las fuentes originales en el Editor de Estilos.

+ +

Edición de las fuentes originales

+ +

Se pueden editar tambien las fuentes originales en el  Editor de estilos y ver el resultado aplicado a la página de inmediato. Para conseguir que esto funcione hay dos pasos adicionales.

+ +

Primero, configura el preprocesador para que muestre la fuente original y automaticamente regenere el CSS cuando cambien las fuentes. Con Sass puedes hacer esto simplemente pasando la opción --watch :

+ +
sass index.scss:index.css --sourcemap --watch
+ +

A continuación, guarda la fuente original en el editor de estilos haciendo click en el botón   "Guardar" junto al archivo, y este se guardará sobre el archivo original.

+ +

Ahora cuando hagas cambios en el archivo original en el  Editor de Estilos , el CSS se regenerará y podrás ver los cambios de forma inmediata.

+ +

Atajos de Teclado

+ +

Atajos del editor de código fuente

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/es/tools/index.html b/files/es/tools/index.html new file mode 100644 index 0000000000..1edcffcd61 --- /dev/null +++ b/files/es/tools/index.html @@ -0,0 +1,211 @@ +--- +title: Herramientas +slug: Tools +tags: + - Desarrollando Mozilla + - 'Desarrollo Web: Herramientas' + - Desarrollo web + - Herramientas + - Necesita Revisión Técnica + - Necesita traducción + - NeedsMarkupWork + - TopicStub +translation_of: Tools +--- +
{{ToolsSidebar}}
+
Examina, edita y depura HTML, CSS y  JavaScript en el ordenador y en el móvil
+ +
Instala Firefox Developer Edition + +

¿Qué hay de nuevo en Firefox Developer Edition?

+ +

Firefox Developer Edition es una versión de Firefox adaptada para desarrolladores, ofreciendo las últimas características y herramientas de desarrollo experimental. La actual edición de desarrollo (Firefox Developer Edition) incluye estos cambios en las herramientas de desarrollador:

+ + +
+ +
Comparte tus ideas + +

Comparte tus ideas

+ +

Pregunte por las nuevas propiedades en las herramientas de desarrollador o vote por las ideas que otros desarrolladores están solicitando.

+
+ +

+ +
+
+

Creando

+ +

Herramientas de autorización para sitios web y aplicaciones web.

+ +
+
Scratchpad
+
Un editor construido dentro de Firefox que te permite escribir y ejecutar JavaScript.
+
Editor de estilos
+
Revisa y edita estilos CSS para la página actual.
+
Editor de sombras
+
Revisa y edita los vertex y fragmentos de sombras usado por WebGL.
+
Editor de audio web
+
Examina el gráfico de los nodos de audio en un contexto de audio y modifica sus parámetros.
+
+
+ +
+

Explorando y depurando

+ +

Examina, explora y depura sitios web y aplicaciones web.

+ +
+
Consola Web
+
Mira mensajes de registro (logs) en una página web e interactua con la página usando JavaScript.
+
Inspector de página
+
Revisa y modifica el HTML y CSS de la página.
+
Depurador JavaScript
+
Deten, ve paso a paso, examina y modifica el JavaScript que está ejecuntandose in una página.
+
Monitor de red
+
Mira las solicitudes de red hechas cuando una página está cargada.
+
Inspector de almacenamiento
+
Inspecciona cookies, almacenamiento local, Inspect cookies, local storage, indexedDB y almacenamiento de session presente en una página.
+
Barra de desarrollador
+
Una interface de linea de comandos para el desarrollador.
+
Vista 3D
+
Visualization 3D de la página.
+
Eyedropper
+
Selecciona un color de la página.
+
Trabajando con iframes
+
Como seleccionar un iframe en particular.
+
+
+
+ +
+
+
+

Móvil

+ +

Herramientas para desarrollo móvil.

+ +
+
Administrador de aplicaciones
+
El administrador de aplicaciones ha sido reemplazado por WebIDE.
+
WebIDE
+
El reemplazo para el App Manager, disponible desde Firefox 33 en adelante.
+
Simulador de Firefox OS
+
Corre y depura tu aplicación de Firefox OS en el escritorio, sin necesidad de un dispositivo Firefox OS real.
+
Responsive Design View
+
Mira como tu sitio o aplicación se verá en diferentes pantallas sin cambiar el tamaño de la ventana del navegador.
+
Depurando Firefox para Android
+
Conecta las herramientas de desarrollador a Firefox para Android.
+
Depurando Firefox para Android con WebIDE
+
Para Desktop Firefox 36+ / Android Firefox 35+, existe un proceso más sencillo.
+
Valence
+
Conecta las herramientas de desarrollo de Chrome con Android y Safari en iOS
+
+
+ +
+

Rendimiento

+ +

Diagnostica y arregla problemas de rendimiento.

+ +
+
Performance tool
+
Analiza la capacidad de respuesta de tu sitio web, del JavaScript y el rendimiento del diseño.
+
Frame rate graph
+
Revisa la velocidad de frames de tu sitio web.
+
Waterfall
+
Averigua como esta funcionando tu sito web en el navegador.
+
Call Tree
+
Averigua donde está el codigo JavaScript perdiendo el tiempo.
+
+ +
+
Flame Chart
+
Muestra las funciones que están en la cola de  trabajo a lo largo de un perfil.
+
Paint Flashing Tool
+
Resalta las partes de la página que son repintadas en respuesta a eventos.
+
Reflow Event Logging
+
Ver eventos en la consola web de reflujo.
+
Network Performance
+
Muestra cuanto tardan en cargar las partes de tu sitio web.
+
+
+
+ +
+ + + + +
+
+

Depuración del navegador

+ +

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

+ +
+
Browser Console
+
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
+
Browser Toolbox
+
Attach the Developer Tools to the browser itself.
+
+
+ +
+

Extending the devtools

+ +

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

+ +
+
Add a new panel to the devtools
+
Write an add-on that adds a new panel to the Toolbox.
+
Remote Debugging Protocol
+
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
+
Source Editor
+
A code editor built into Firefox that can be embedded in your add-on.
+
The Debugger Interface
+
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
+
Web Console custom output
+
How to extend and customize the output of the Web Console and the Browser Console.
+
Example devtools add-ons
+
Use these examples to understand how to implement a devtools add-on.
+
+
+
+ +
+

Más recursos

+ +

Esta sección muestra una lista de recursos que no están mantenidos por el equipo de desarrolladores de herramientas de Firefox, pero que son ampliamente usados por los desarrolladores web. Hemos incluido algunos complementos para Firefox en esta lista, pero para un listado completo vea la categoria  "Desarrollo web" en addons.mozilla.org.

+ +
+
+
+
Firebug
+
Una potente y popular herramienta de desarrollo web, que incluye un depurador para JavaScript, visor y editor de CSS y HTML, y un monitor de red.
+
DOM Inspector
+
Inspecciona, busca y edita los DOM de las páginas web o las ventanas XUL.
+
Web Developer
+
Añade un menú y una barra de herramientas al navegador con varias utilidades para el desarrollo web.
+
+
+ +
+
+
Webmaker Tools
+
Un conjunto de utilidades creadas por Mozilla, enfocadas para la gente que empieza con el desarrollo Web.
+
W3C Validators
+
La web del W3C alberga herramientas para comprobar y validar su sitio web, incluyendo su HTML y CSS.
+
JSHint
+
Herramienta para el análisis del código JavaScript.
+
+
+
diff --git a/files/es/tools/monitor_de_red/index.html b/files/es/tools/monitor_de_red/index.html new file mode 100644 index 0000000000..f50f1ee0fc --- /dev/null +++ b/files/es/tools/monitor_de_red/index.html @@ -0,0 +1,189 @@ +--- +title: Monitor de Red +slug: Tools/Monitor_de_Red +tags: + - Debugging + - Firefox + - Guía + - Herramientas + - Herramientas de Desarrollador + - Redes +translation_of: Tools/Network_Monitor +--- +

El monitor de red muestra todas las solicitudes de red que Firefox realiza (por ejemplo, cuando carga una página, o debido a XMLHttpRequests), cuanto tiempo toma cada petición, y los detalles de cada petición. Para abrir el monitor seleccione "Red" del menu "Desarrollador Web"  (el cual es un Submenú del Menú "Herramientas" en Mac), o abra Herramientas de Desarrollador Web y seleccione la solapa "Red".

+ +

El monitor de red aparecerá al final de la ventana de navegación. Recargue la página para ver las solicitudes:

+ +

+ +

Lista de Solicitudes de Red

+ +

Por defecto, el Monitor de Red muestra una lista de todas las solicitudes de red hechas durante la carga de una página. Cada solicitud es mostrada en su propia linea:
+

+ +

Por defecto, el Monitor de Red se limpia cada vez que ud. navega a una nueva página o recarga la página actual. Desde Firefox 31 en adelante se puede cambiar este comportamiento selecccionando "Habilitar Registros Persistentes" en las Opciones de Herramientas.

+ +

Area de Solicitudes de Red

+ +

Cada fila muestra:

+ + + +

La barra de herramientas en la parte superior etiqueta estas columnas, y hacer click en las etiquetas ordena todas las solicitudes por esa columna.

+ +

Desde Firefox 30 en adelante, si el archivo es una imagen, la fila incluye una miniatura de la imagen, y pasar por arriba del nombre del archivo muestra un preview en un tooltip:

+ +

+ +

Linea de Tiempo

+ +

La lista de solicitudes también muestra una linea de tiempo para las diferentes partes de cada solicitud. Cada linea de tiempo es dada en posición horizontal en su fila relativa a las otras solicitudes de red, de manera que ud. pueda ver el tiempo total que tomó cargar la página. Para más detalles sobre los códigos de color usados aqui, vea la sección en la página Tiempos.

+ +

Filtrando por tipo de Contenido

+ +

Al final de la ventana una fila de botones le permite a ud. filtrar las solicitudes por el tipo de contenido de la respuesta:

+ +

En el extremo derecho de esta fila hay un botón llamado "Limpiar": como ud. podrá adivinar, esto le permite limpiar la lista de solicitudes de red.

+ + + +

Haciendo click en una fila de la lista muestra un menú contextual con las siguientes opciones:

+ + + +

Editar y Reenviar

+ +

Esta opción abre un editor que le permite editar el método de Solicitud, URL, parámetros, y cabeceras, y reenviar la solicitud.

+ +

Copiar como cURL

+ +
+

Esta característica es nueva en Firefox 31.

+
+ +

Esta opción copia la solicitud de red al portapapeles como un comando cURL, de manera que ud. pueda ejectutarlo desde una línea de comandos. El comando puede incluir las siguientes opciones:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METODO]Si el método no es GET o POST
--dataPara parámetros de solicitud URL encodeados
--data-binaryPara parámetros de solicitud multiparte
--http/VERSIONSi la versión de HTTP no es 1.1
-ISi el método no es HEAD
-H +

Uno para cada encabezado de solicitud.

+ +

Deesde Firefox 34, si el encabezado "Accept-Encoding" está presente, el comando cURL incluirá --compressed en vez de  -H "Accept-Encoding: gzip, deflate".  Esto significa que la respuesta será automáticamente descomprimida.

+
+ +

Detalles de Solicitud de red

+ +

Hacer click en una fila muestra en un nuevo panel en la parte derecha del monitor de red, que provee más información detallada sobre la solicitud.

+ +

Las pestañas de la parte superior de este panel le permiten cambiar entre 5 diferentes páginas:

+ + + +

Desde Firefox 30 en adelante, hay una sexta página que aparece solamente si el tipo de contenido es HTML, la página de Vista Preliminar.

+ +

Hacer click en el ícono de la izquierda de las pestañas cierra el panel y vuelve a la vista de lista.

+ +

Encabezados

+ +

Esta pestaña lista información básica sobre la solicitud incluyendo URL y código de estado, asi como la solicitud HTTP y encabezados de respuesta que fueron enviados:

+ +

Ud. puede filtrar las encabezados que se muestran:

+ +

Cookies

+ +

Esta pestaña lista detalles completos de cualquier cookie que fue enviada con la solicitud o respuesta:

+ +

Al igual que con los encabezados, ud. puede filtrar las cookies que se muestran.

+ +

Parametros

+ +

Esta pestaña muestra los parámetros GET y datos POST de una solicitud:

+ +

Respuesta

+ +

El contenido completo de la respuesta. Si la respuesta es HTML, JS o CSS, será mostrada como texto:

+ +

Si la respuesta es JSON, será mostrada como un objeto inspeccionable:

+ +

Si la respuesta es una imagen, la pestaña muestra una vista preliminar:

+ +

Tiempos

+ +

La pestaña de tiempo muestra una lista más detallada y comentada de la barra de línea de tiempo para esa solicitud, mostrando como el tiempo de espera total es dividido en varias etapas:

+ +

+ +

Vista Preliminar

+ +
+

Esta caracteristica es nueva en  Firefox 30.

+
+ +

Desde Firefox 30 en adelante, si el tipo de archivo es HTML una sexta pestaña aparece llamada "Vista Preliminar". Esta hace un render de aquel HTML:

+ +

+ +

Análisis de Rendimiento

+ +
+

La herramienta de análisis de rendimiento es nueva en Firefox 29.

+
+ +

Desde Firefox 29 en adelante, el Monitor de Red trae una herramienta de análisis de rendimiento (performance), para ayudarlo a ver cuánto le toma al navegador descargar las diferentes partes de su sitio.
+
+ Para correr la herramienta de análisis de performance haga click en el icono de cronómetro en la barra de herramientas en la parte inferior del Monitor de Red:

+ +

(Alternativamente, si ud. acaba de abrir el Monitor de Red, por ende no está todavia poblado con la lista de Solicitudes, ud. tendrá el icono de Cronómetro en la ventana principal.)

+ +

El Monitor de Red luego carga el sitio dos veces: una vez con un cache de navegador vacio, y una vez con el chaché óptimo. Esto simula la primera vez que un usuario visita su sitio, y visitas siguientes. Muestra los resultados para cada corrida de lado a lado o verticalmente si la ventana de Navegación es angosta:

+ +

El resultado de cada recarga es resumido en una tabla y un gráfico sectorial o de torta. La tabla agrupa recursos por tipo, y muestra el tamaño total de cada recurso y el tiempo total que tomó en cargarlos. El gráfico de torta acompañante muestra el tamaño relativo de cada tipo de recurso.

+ +

Para volver a la lista de Solicitudes de Red del Monitor de Red haga click en el botón "Volver" en la izquierda.

+ +

Hacer click en una porción de la torta lo lleva al Monitor de Red para esa recarga, con un filtro automáticamente aplicado para ver solo este tipo de recurso.

diff --git a/files/es/tools/page_inspector/3er-panel_modo/index.html b/files/es/tools/page_inspector/3er-panel_modo/index.html new file mode 100644 index 0000000000..7165d90a4d --- /dev/null +++ b/files/es/tools/page_inspector/3er-panel_modo/index.html @@ -0,0 +1,69 @@ +--- +title: El 3er panel del modo inspector +slug: Tools/Page_Inspector/3er-panel_modo +tags: + - 3 paneles + - CSS + - Guía + - Herramientas + - Inspectord +translation_of: Tools/Page_Inspector/3-pane_mode +--- +
{{ToolsSidebar}}
+ +

Este articulo explica como usar el 3er panel del modo inspector.

+ +

Feature summary

+ +

Desde Firefox 62 en adelante, el Inspector de página tieen un nuevo modo disponible— modo 3er-Panel. cuando este es activado, te permitira ver en simultaneo lo siguiente:

+ + + +

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +
+

Nota: En tamaños de pantalla mas reducidos, las pestañas apareceran bajo el panel de Reglas CSS.

+
+ +

Tener las reglas de CCS en su propio panel es muy util ya que no solo te permite revisar el HTML y editar el CSS que esta aplicado a este, si no que tambien puedes ver en tiempo real como afectan tus caracteristicas CSS afectan a los estilos computados. solo necesitas tener la pestaña abierta para ver el efecto.

+ +

A brief walkthrough

+ +

El inspector de 3 paneles esta desactivado por defecto. este se activa con el  toggle que se encuentra el parte superior izquierda de la pestaña.

+ +

a view of the tabs panel, showing the 2 to 3 pane toggle icon

+ +

presionando el toggle podras cambiar de la vista de  2 a 3 paneles.

+ +

The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

+ +

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +

Con el modo de 3 paneles activado, podras ver los cambios en vivo realizados a las reglas de CSS en tu página. Por ejemplo, puedes editar las propiedades de una Rejilla CSS y ver inmediatamente los cambios en el Inspector de rejilla.

+ +

{{EmbedYouTube("ELS2OOUvxIw")}}

+ +

Habilitando el  inspector de 3 paneles en versiones anteriores a Firefox 62

+ +

en anteriores versiones de Firefox (desde Firefox 59/60), puedes activar el modo de 3 paneles en su version Beta para esto vas a about:config y pasando las siguientes  true:

+ +

devtools.inspector.split-rule-enabled — esto cambia el modo de 3 paneles de on a off.

+ +

devtools.inspector.split-sidebar-toggle — esto añade el boton a la UI.

+ +

en Firefox 61, estas preferencias se renombran como:

+ + + +

debes pasar estas dos a true en el Beta para probar las caracteristicas enFirefox 61.

+ +
+

Nota: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.

+
diff --git a/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html new file mode 100644 index 0000000000..e45754096e --- /dev/null +++ b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html @@ -0,0 +1,22 @@ +--- +title: Abrir el Inspector +slug: Tools/Page_Inspector/How_to/Abrir_el_Inspector +tags: + - Guía + - Herramientas + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +

Hay dos maneras básicas para abrir el Inspector:

+ + + +

El Inspector aparecerá en la parte inferior de la ventana del navegador:

+ +

The all-new Inspector in Firefox 57 DevTools.Para empezar a aprender sobre el Inspector ve al Tour por la UI.

diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html new file mode 100644 index 0000000000..992a5b8326 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html @@ -0,0 +1,47 @@ +--- +title: Examinar y editar el modelo de cajas +slug: Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel +tags: + - Guía + - Herramientas + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +

Visualización del modelo de caja

+ +

Con el botón Seleccionar elemento pulsado, si se pasa el ratón por encima de un elemento en la página, el modelo de caja para ese elemento se muestra superpuesto en la página:

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

También se muestra superpuesto en la página si en el panel HTML ponemos el cursor sobre la marca de un elemento :

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

Si se trata de un elemento en línea que está dividido en varias filas, se destaca cada una de las líneas individuales que componen el elemento:

+ +

+ +

Vista Modelo de Caja

+ +

Cuando se selecciona un elemento, podemos obtener una vista detallada del modelo de caja en dos de las vistas del panel CCS: Calculado y Disposición:

+ + + +

+ +

Si ponemos el cursor sobre un valor en la vista modelo de caja al lado aparece un tooltip que nos indica de qué regla procede el valor:

+ +

+ +

Si desplazamos el cursor sobre una parte del modelo de caja en la vista Modelo de caja, se resalta la parte correspondiente de la página y aparece otro tooltip con información indicando el elemento, su clase y/o ID y sus dimensiones (ancho x alto):

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

Edición del modelo de caja

+ +

También podemos editar los valores en la Vista Modelo de Caja: hacer clic sobre un valor permite editarlo y ver los resultados inmediatamente en la página:

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html new file mode 100644 index 0000000000..2a361a1d90 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html @@ -0,0 +1,364 @@ +--- +title: Examinar y editar HTML +slug: Tools/Page_Inspector/How_to/Examinar_y_editar_HTML +tags: + - Guía + - Herramientas + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +

Puedes examinar y editar el HTML de la página en el panel HTML.

+ + + +

HTML breadcrumbs (migas de pan)

+ +

En la parte inferior del panel HTML hay una barra de navegación de migas de pan. Muestra la jerarquía completa en el documento para la rama que contiene el elemento seleccionado:

+ +

+ +

Pasar el ratón sobre cada miguita de pan destaca ese elemento de la página.

+ +

La barra breadcrumbs tiene sus propios atajos de teclado.

+ +
+

Ten en cuenta que antes de Firefox 48, esta barra de herramientas estaba en la parte superior del panel HTML.

+
+ +

Buscar

+ +

A partir de Firefox 45, el campo de búsqueda del Inspector de páginas busca coincidencias en todo el marcado del documento actual y en cualquier frame.

+ +

Para empezar a buscar un marcador, haz clic en el cuadro de búsqueda para expandirlo o presiona Ctrl + F , o Cmd + F en Mac.

+ +

A medida que escribes, en la ventana emergente se autocompletarán sugerencias con los atributos de clase o de ID que coincidan con el término de búsqueda actual:

+ +

+ +

Presiona Up y Down para desplazarte por las sugerencias, Tab para elegir la sugerencia actual y entonces Enter para seleccionar el primer nodo con ese atributo.

+ +

Si sólo introduces el término de búsqueda sin seleccionar un valor entre las sugerencias, el término de búsqueda se aplicará al texto completo del documento, incluyendo todos los nombres y valores de atributos y el contenido de texto de los nodos.

+ +

{{EmbedYouTube("AKBhnfp1Opo")}}

+ +

Para desplazarte por las sugerencias presiona Enter . A partir de Firefox 48 es posible el desplazamiento hacia atrás con Shift + Enter .

+ +

Árbol HTML

+ +

El resto del panel muestra el HTML de la página como un árbol (esta interfaz de usuario también se llama Vista de marcado). Justo a la izquierda de cada nodo hay una flecha: haz clic en la flecha para desplegar el nodo. Si mantienes pulsada la tecla Alt mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.

+ +

The new Firefox 57 inspector HTML tree.

+ +

Mover el ratón sobre un nodo del árbol destaca el elemento en la página.

+ +

Los nodos no-visibles se representan descoloridos o desaturados. La invisibilidad puede deberse a razones diversas, entre ellas el uso de display: none, o que el elemento no tenga ninguna dimensión.

+ +

A partir de Firefox 53 se muestra una elipsis entre la etiqueta de apertura y cierre de un elemento si el nodo está colapsado y contiene más contenido. Antes de Firefox 53, era imposible determinar si un nodo colapsado tenía hijos. Ahora los hijos se indican en el árbol con este icono:

+ +
+

Nota: Hay atajos de teclado útiles para usar en el árbol HTML — ve a la lista de atajos de teclado del panel HTML.

+
+ +

::before y ::after

+ +

Desde Firefox 35 en adelante, puede inspeccionar los pseudoelementos añadidos usando {{cssxref("::before")}} y {{cssxref("::after")}}:

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

Whitespace-only text nodes

+ +
Nuevo en Firefox 52
+ +

Los desarrolladores web no escriben todo su código en una sola línea de texto. Introducen espacios en blanco con Space , Return , y Tab entre sus elementos HTML para que el marcado sea más legible.

+ +

Normalmente este espacio en blanco parece no tener efecto ni salida visual, pero de hecho, cuando un navegador analiza HTML genera automáticamente nodos de texto anónimos para elementos que no están contenidos en un nodo. Esto incluye los espacios en blanco que hay después de cualquier tipo de texto.

+ +

Si estos nodos de texto generados automáticamente están inline level, los navegadores les asignarán una anchura y altura distinta de cero. Así puede que encuentres espacios extraños entre los elementos, incluso si no has puesto ningún margen o relleno en ellos.

+ +

Desde Firefox 52, el Inspector muestra los nodos whitespace para que puedas saber de dónde vienen los huecos en su marcado.

+ +

Los nodos Whitespace se representan con un punto: y cuando pasas el ratón sobre ellos muestra un tooltip explicativo

+ +

+ +

Para ver esto en la práctica ve a la demo en https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

+ +

Elemento: menú contextual emergente

+ +

Puedes realizar ciertas tareas comunes en un elemento utilizando su menú contextual emergente. Para activar este menú, haz clic derecho en el elemento. El menú contiene los siguientes elementos - haz clic en los enlaces para encontrar la descripción de cada comando en {{anch("Context menu reference")}}:

+ + + +

* Estas opciones sólo aparecen en determinados contextos, por ejemplo, la opción "Abrir archivo en el editor de estilo" sólo aparece cuando haces clic con el botón contextual sobre el enlace a un archivo CSS.

+ +

Context menu reference

+ +
+

Nota: A partir de Firefox 49 el menú contextual se reorganizó significativamente para hacerlo más compacto. No te preocupes si la estructura de tu menú es ligeramente diferente de la que se muestra arriba: estarán disponibles las mismas opciones

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Edit as /en-US/docs/HTML +

Editar el HTML del elemento

+
(Copy) Inner HTMLCopiar el HTML interno para el elemento.
(Copy) Outer HTML +

Copiar el HTML externo para el elemento.

+ +

Presione Ctrl + C (o Cmd + C en Mac) realiza la misma acción.

+
(Copy) Unique Selector/CSS SelectorCopiar el selector CSS que selecciona únicamente el elemento
(Copy) CSS PathCopiar el selector CSS que representa la ruta completa al elemento.
(Copy) Image Data-URLCopiar imagen como data:// URL, l elemento selecionado es una imagen
(Copy) Attribute +

Copiar el atributo del elemento.

+
Show DOM P/en-US/docs/ropertiesAbrir la split console e introducir el comando "inspect($0)" para inspect el elemento actualmente selecionado.
Use in Console +
+

Nuevo en Firefox 43(Copy) Image Data-URL (Copy) Attribute

+
+ Asigna el nodo actualmente seleccionado a una variable llamada temp0 (o temp1 si temp0 esta ya asignado, y así sucesivamente), entonces abre la split console,que le permite interactuar con ese nodo utilizando la línea de comandos de la consola.
Expand All +
+

Nuevo en Firefox 44

+
+ En la vista de árbol, expande el elemento actual y todos los elementos debajo de él. Esto equivale a mantener presionada la tecla Alt y hacer clic en el triángulo antes del elemento.
Collapse +
+

Nuevo en Firefox 44

+
+ En la vista de árbol, contrae el elemento actual. Esto equivale a hacer clic en la flecha de acceso situada junto al elemento que se ha expandido.
(Paste) Inner HTMLPegar el contenido del portapapeles en el nodo como su HTML interno.
(Paste) Outer HTMLPegar el contenido del portapapeles en el nodo como su HTML externo.
(Paste) BeforePegar el contenido del portapapeles en el documento inmediatamente antes de este nodo
(Paste) AfterPegar el contenido del portapapeles en el documento inmediatamente después de este nodo
(Paste) As First ChildPegar el contenido del portapapeles en el documento como primerdescendiente de este nodo
(Paste) As Last ChildPegar el contenido del portapapeles en el documento como último descendiente de este nodo
Scroll Into View +

Desplazamiento en la página web para que el nodo seleccionado sea visible.

+ +

Desde Firefox 44, pulsando el atajo de teclado S también sirve para desplazarse en la página hasta que el nodo seleccionado está a la vista.

+
Screenshot NodeHace una captura del nodo seleccionado y la guarda en tu directorio de Descargas. Ver Taking screenshots.
Create New NodeCrea un nuevo elemento <div> como último descendiente del elemento actualmente seleccionado. Ver Inserting new nodes.
Duplicate Node +
+

Nuevo en Firefox 44

+
+ +

Crear una copia de este elemento e insertarla inmediatamente antes de este elemento.

+
Delete NodeElimina el elemento del DOM.
Attribute/Add Attribute +
+

Nuevo en Firefox 44

+
+ Añade un atributo al elemento.
Attribute/Edit Attribute +
+

Nuevo en Firefox 44

+
+ (solo cuando se invoca en un atributo) Editar el atributo.
Attribute/Remove Attribute +
+

Nuevo en Firefox 44

+
+ (solo cuando se invoca en un atributo) Suprimir el atributo.
Open Link in New Tab(solo cuando se invoca sobre un enlace como atributo href) Abrir el item enlazado en una nueva pestaña.
Open File in Debugger(solo cuando se invoca sobre un enlace a un archivo de código JS) Abrir el archivo enlazado en el depurador.
Open File in Style-Editor(solo cuando se invoca sobre un enlace a un archivo de código CSS) Abrir el archivo CSS enlazado en un editor de estilos
Copy Link Address(solo cuando se invoca en una URL) Copiar la URL.
:hoverSelecciona la pseudoclase CSS :hover
:activeSelecciona la pseudoclase CSS :active
:focusSelecciona la pseudoclase CSS :focus CSS
+ +

Editar HTML

+ +

 

+ +

Puedes editar el HTML - etiquetas, atributos y contenido - directamente en el panel HTML: haz doble clic en el texto que quieras editar, modifícalo y pulsa Enter para ver los cambios reflejados inmediatamente.

+ +

Para editar el HTML externo de un elemento (HTML externo), activa el menú emergente del elemento y selecciona "Editar como HTML". Verás un cuadro de texto en el panel HTML:

+ +

Edit HTML directly in the Inspector panel in Firefox 57

+ +

Aquí puedes añadir cualquier HTML: cambiar la etiqueta del elemento, cambiar elementos existentes o añadir otros nuevos. Una vez que hagas clic fuera del cuadro, los cambios se aplican a la página.

+ +

A partir de Firefox 52, si estás editando HTML, el menú contextual que verás es el habitual al trabajar con texto editable:

+ +

+ +

Copiar y pegar

+ +

Puedes usar el menú emergente desplegable para copiar nodos en el árbol HTML y pegarlos en la ubicación deseada.

+ +

Arrastrar y Soltar (Drag and drop)

+ +

Puedes editar HTML moviendo nodos en el árbol HTML. Simplemente haz clic manteniendo presionado sobre cualquier elemento y arrástralo hacia arriba o hacia abajo en el árbol. Cuando sueltes el botón del ratón, el elemento se insertará en la posición correspondiente:

+ +

{{EmbedYouTube("oI-a035nfWk")}}

+ +

A partir de Firefox 44, puedes cancelar el arrastrar y soltar pulsando la tecla Esc .

+ +

Insertar nuevos nodos

+ +
Nuevo en Firefox 48
+ +

A partir de Firefox 48, hay un icono "+" en la parte superior de la vista de marcado:

+ +

+ +

Haz clic en este icono para insertar un <div> vacío en el documento como el último hijo del elemento seleccionado actualmente. A continuación, puedes editar el contenido y el estilo del nuevo nodo tal como lo harías con cualquier otro nodo del documento.

+ +

{{EmbedYouTube("NG5daffvVZM")}}

+ +

Puedes acceder a la misma funcionalidad utilizando el menú desplegable "Crear nuevo nodo".

+ +

Ten en cuenta que este botón está desactivado si el tipo de elemento seleccionado es tal que añadir un último hijo no produciría ningún efecto (por ejemplo, si es un elemento <html> o <iframe>). Sin embargo, está habilitado en lugares donde no es válido insertar <div>, como <style> o <link>. En estos casos, el elemento se añade como texto.

diff --git a/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..430c2e32dd --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,228 @@ +--- +title: Examinar y editar CSS +slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +

Puedes examinar y editar CSS en el panel CSS del Inspector.

+ +

Examinar reglas CSS

+ +

La Vista reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado, ordenadas de más específicas a menos específicas:

+ +

+ +

La vista Reglas muestra la lista de estilos aplicados por el navegador o estilos de agente de usuario si la opción para hacerlo está seleccionada en la configuración de las herramienta del desarrollador. Ten en cuenta que esta configuración es independiente de la casilla de verificación "Estilos de navegador" de la Vista calculado.

+ +

La vista Reglas muestra todos los estilos creados, incluidos los estilos que no se admiten o que no son válidos. Esto puede ayudarte a entender por qué ciertos estilos no se están aplicando:

+ +

+ +

Visualización de Reglas

+ +

Muestra cada regla como en una hoja de estilo, con una lista de selectores seguida de una lista de declaraciones con forma property:value;.

+ +

+ + + +

Desde Firefox 52, si el elemento tiene una declaración display: grid, entonces aparece a su lado un icono grid así: . Haz clic en ese icono para mostrar la cuadrícula superpuesta en la página, incluidas las líneas de cuadrícula y las pistas. Consulta Examinar grid layouts para obtener más información al respecto.

+ +

Los estilos del agente de usuario se muestran con un fondo diferente, e indican el enlace al nombre de archivo y número de línea contiene el prefijo (agente de usuario):

+ +

+ +

Regla element {}

+ +

La regla element {} que hay al principio de la lista de reglas no es en realidad una regla CSS. Representa las propiedades CSS asignadas al elemento a través de su atributo {{htmlattrxref("style")}}.

+ +

A partir de Firefox 52, también se muestra el icono de target:: , que ofrece una forma cómoda de resaltar el elemento seleccionado en la página.

+ +

{{EmbedYouTube("bQzOAFvEDco")}}

+ +

Reglas de filtrado

+ +

Hay un campo en la parte superior de la vista Reglas, llamado "Filtrar Estilos":

+ +

A medida que escribes:

+ + + +

Para eliminar el filtro haz clic en la "X" al final del cuadro de búsqueda.

+ +
+

En la vista Reglas, presionar Ctrl / Cmd + F focaliza el campo de búsqueda. Una vez que has escrito un filtro, puedes presionar Esc para quitarlo de nuevo.

+
+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ +

Búsqueda estricta

+ +

De forma predeterminada, el cuadro de búsqueda resalta todas las declaraciones que contienen cualquier parte de la cadena. Por ejemplo, la búsqueda "color" resaltará declaraciones que contengan border-bottom-color y background-color así como color.:

+ +

+ +

Si la consulta de búsqueda se encierra entre comillas de este modo: `color` se limita la búsqueda a las coincidencias exactas:

+ +

+ +

Expandir las propiedades shorthand

+ +

Las propiedades Shorthand (abreviadas) se pueden expandir para mostrar las características correspondientes en forma larga haciendo click en la flecha junto a ellas.

+ +

Mostrar pseudo-elementos

+ +

La vista Regla muestra los siguientes pseudo-elementos, en caso de que se apliquen al elemento seleccionado

+ +

::after
+ ::backdrop
+ ::before
+ ::first-letter
+ ::first-line
+ ::selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

Si el elemento seleccionado tiene pseudo-elementos aplicados, se muestran delante del elemento seleccionado pero ocultos por un triángulo:

+ +

+ +

Haciendo clic en el triángulo se muestran:

+ +

+ +

Setting :hover, :active, :focus

+ +

A la derecha del campo Filtrar hay un botón:

+ +

Haz clic en el botón y verás tres casillas de verificación que puedes utilizar para establecer las pseudo-clases {{cssxref(":hover")}}, {{cssxref(":active")}} y {{cssxref(":focus")}} para el elemento seleccionado:

+ +

También puedes acceder a esta función desde el menú contextual emergente de la vista HTML.

+ +

Si fijas una de estas pseudoclases para un nodo, aparece un punto naranja en la vista HTML junto a todos los nodos a los que se ha aplicado la pseudoclase:

+ +

+ +

Enlazar al archivo CSS

+ +

En la parte superior derecha de cada regla, el nombre del archivo fuente y el número de línea se muestran como enlace: al hacer clic en él, se abre el archivo en el Editor de estilos.

+ +

Puedes copiar la ubicación del archivo fuente: haz clic con el botón derecho del ratón en el enlace y selecciona "Copiar dirección".

+ +

El Inspector entiende los mapas de código fuente de CSS. Esto significa que si estás usando un preprocesador CSS que tiene soporte para mapas de código fuente, y has habilitado Activar mapas de código fuente" en Ajustes avanzados de la Configuración del editor de estilos, entonces el enlace te llevará a la fuente original, no al CSS generado. Lee más sobre el soporte de mapas de código fuente CSS en la Documentación del editor de estilos.

+ +

Declaraciones anuladas

+ +

Si una declaración CSS es anulada por alguna otra regla CSS con mayor peso, entonces la declaración se muestra con una línea a través de ella.

+ +

Las declaraciones anuladas tienen una lupa al lado. Haz clic en la lupa para filtrar la vista de reglas: mostrará sólo las reglas que se aplican al nodo actual intentando establecer la misma propiedad: es decir, la cascada completa para la propiedad dada.

+ +

Esto facilita ver qué regla prevalece sobre la declaración

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examinar CSS calculado

+ +

Para ver todas las reglas CSS que se calculan para el elemento seleccionado cambia a la Vista calculado.Esta vista organiza el estilo del elemento por propiedades: se enumeran por orden alfabético todas las propiedades CSS que se han aplicado a este elemento para mostrar el resultado o valor calculado de cada una de las propiedadades CSS para el elemento seleccionado :

+ +

+ +

Puedes usar la tecla Tab para seleccionarlos moviéndote través de ellos. Desde Firefox 49 en adelante, puedes encontrar más información sobre estas propiedades: si pulsas F1 en una propiedad seleccionada se abrirá su página de referencia MDN

+ +

Haciendo clic en la flecha situada junto al nombre de la propiedad (o pulsando Enter o Space mientras está seleccionado) se muestra la regla que establece este valor, un enlace al nombre del archivo fuente y el número de línea:

+ +

+ +

De forma predeterminada, esta vista sólo muestra los valores que la página ha definido explícitamente: para ver todos los valores, haz clic en la casilla "Estilos de navegador". Puedes pulsar Tab para moverte a través de los nombres de archivo/números de línea; y pulsando Enter/Return Enter/Return se abrirá el archivo en ese punto en el Editor de estilos.

+ +

Al escribir en el cuadro de búsqueda se realiza un filtrado activo de la lista, por lo que, por ejemplo, si sólo quieres ver opciones relacionadas con las fuentes, puedes escribir "font" en el cuadro de búsqueda, y sólo aparecerán las propiedades que contengan "font" en el nombre. También puedes buscar por el valor de las propiedades: para encontrar la regla responsable de seleccionar la fuente "Lucida Grande" , escribe "Lucida Grande" en el cuadro de búsqueda.

+ +
+

En la vista calculado, puedes presionar Ctrl / Cmd + F para enfocar el campo de búsqueda. Una vez que hayas escrito un filtro, presiona Esc para quitarlo.

+
+ +

Editar reglas

+ +

Si haces clic en una declaración o en un selector en la vista Reglas, puedes editarla y ver los resultados inmediatamente. También puedes pulsar Tab para desplazarte por las diferentes propiedades y valores existentes, y empezar a editarlos pulsando Enter o Space. Para añadir una nueva declaración a una regla, haz clic en la última línea de la regla (la línea ocupada por la llave de cierre).

+ +

A medida que comiences a escribir un nombre de propiedad, verás una lista de sugerencias autocompletadas. Presiona Tab para aceptar la sugerencia actual o Up y Down para desplazarte por la lista. La opción predeterminada es la propiedad más común que comienza con las letras que has escrito. Por ejemplo, aquí el usuario ha escrito "c" y la opción por defecto es "color":

+ +

+ +

Si al editar una propiedad introduces un valor no válido o escribes un nombre de propiedad desconocido, aparece un icono de alerta amarillo junto a la declaración.

+ +
+

Nota: Desde Firefox 60 en adelante, los nombres de variables CSS también se completarán automáticamente (ver {{bug(1422635)}}). Si escribes var(- var(- seguido de un guión (-) como valor de una propiedad, cualquier variable que hayas declarado en tu CSS aparecerá en la lista de autocompletado.
+
+

+
+ +

Cualquier cambio que hagas es temporal: recargar la página restaurará el estilo original.

+ +

Puedes utilizar las teclas Up , Down y Page up , Page down (junto con otras) para aumentar/disminuir las reglas numéricas durante la edición:

+ + + +

Los cambios que realices en la vista Reglas se reflejan en el Editor de estilos, y viceversa

+ +

A partir de Firefox 52, si estás editando CSS, el menú contextual que verás es el normal para trabajar con texto editable:

+ +

+ +

Añadir reglas

+ +

Puedes añadir nuevas reglas en la vista reglas. Simplemente haz clic derecho para que se muestre el menú contextual y selecciona "Añadir regla nueva": esto añadirá una regla cuyo selector coincide con el nodo actualmente seleccionado.

+ +

+ +

También hay un botón que te posibilita hacer lo mismo:

+ +

+ +

Copiar reglas

+ +

Para copiar reglas o partes de ellas usa uno de los items del siguiente menú contextual en la vista reglas

+ + + +

+ +

Ver también

+ + diff --git a/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..c312f24c21 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,131 @@ +--- +title: 'Inspector de CSS Grid: examina la rejilla del layout' +slug: Tools/Page_Inspector/How_to/Examine_grid_layouts +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}
+ +

El Grid Inspector te permite examinar los CSS Grid Layouts usando las Firefox DevTools, descubrir las rejillas presentes en una página, examinarlas y modificarlas, depurando los problemas de layout, y más.

+ +
+

Nota: Los ejemplos mostrados en los screenshots aparecen el los articulos de Jen Simmons  Futurismo y Variations on a grid, y un live llamado grid area example de Rachel Andrew.

+
+ +

Descubriendo CSS grids

+ +

Cuando un elemento HTML de tu página tiene display: grid aplicado, un numero de nuevas opciones estan disponibles en las DevTools para proveer un acceso sencillo a las caracteristicas de la rejilla.

+ +

En el panel HTML

+ +

En el panel HTML, los elementos pertenecientes a la rejilla tienen un marker "grid" junto a ellos.

+ +

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

+ +

En el panel CSS

+ +

En el panel CSS veremos las reglas, cualquier instancia con display: grid declarado tendra un icono de rejilla como este: .

+ +

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

+ +

Al dar click en el icono la rejilla sera visible, y aparecera sobre los elemento, mostrando la posicion, lineas y tracks:

+ +

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

+ +

La rejilla permanecera aun cuando selecciones otro elemento, puedes editar las propiedades CSS relacionadas y ver como esta es afectada.

+ +

La vista de rejilla en la seccion disposición

+ +

Cuando grid esta incluido en la pagina, el panel CSS en la seccion disposición incluye una vista de "Rejilla" esta sección incluye algunas opciones para ver las rejillas. Encontraras mas información acontinuación.

+ +
+

Nota: la seccion disposición se encuentra abajo en el panel derecho del inspector de elementos. Con lo anterior y con los siguientes screenshots deberias hacerte una idea de donde encontrarlo.

+
+ +

Opciones de Rejilla

+ +

La seccion Rejilla de la vista de disposicion; luce algo así:

+ +

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

+ +

Encontraras algunas opciones dentro de este:

+ + + +
+

Nota: Tus preferencias de rejilla asi como al sobreposicion, color y configuracion de pantalla persistiran atravez de las paginas cargadas por separado.

+
+ +

Examinemos estas carácteristicas más a detalle.

+ +

Superponer Rejilla

+ +

Cada rejilla presente en tu pagina tiene su propia entrada en la sección "Superponer Rejilla":

+ +

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

+ +

Cada entrada consiste en (de izquierda a derecha):

+ + + +

Mostrar números de línea

+ +

Por defecto, los números de linea se muestran sobre la rejilla superpuesta.

+ +

A CSS grid overlay with grid line numbers displayed

+ +

Al desactivarla opcion "Mostrar números de línea" lucira así.

+ +

A CSS grid overlay with grid line numbers not displayed

+ +

Mostrar nombres de áreas

+ +

En una rejilla con areas nombradas, los nombres de area se mostraran superpuestos sobre la rejilla.

+ +

A CSS grid overlay with named area names displayed

+ +

Al desactivar la opción "Mostrar nombres de áreas" lucira así.

+ +

A CSS grid overlay with named area names not displayed

+ +

Extender líneas infinitamente

+ +

Por defecto, las lineas de rejilla/tracks se muestran solomente sobre el elemento con display: grid.

+ +

A CSS grid overlay with grid lines not extended infinitely

+ +

Cuando activas la opcion "Extender líneas infinitamente", las lineas de la rejilla se extienden hasta el limite del viewport en ambos ejes.

+ +

A CSS grid overlay with grid lines extended infinitely

+ +

Mini vista de Rejilla

+ +

Muestra una version miniatura de la rejilla activa, con la misma proporcion que la real.

+ +

A mini CSS grid view from the Firefox DevTools

+ +

posicionandote sobre cada una de las diferentes areas de la mini rejilla lograras que su equivalente en la rejilla superpuesta sea iluminada tambien, asi como mostrara tambien un tooltip con informacion como el número de colomna, fila y las dimenciones del area.

+ +

A firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

+ +

Mira tambien

+ + diff --git a/files/es/tools/page_inspector/how_to/index.html b/files/es/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..f35f9aec5c --- /dev/null +++ b/files/es/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html new file mode 100644 index 0000000000..f4ab42dabe --- /dev/null +++ b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html @@ -0,0 +1,26 @@ +--- +title: Inspeccionar y seleccionar colores +slug: Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +

En la Vista reglas del panel CSS, si una regla contiene un valor de color, verás una muestra del color junto al valor:

+ +

+ +

Si haces clic en la muestra de color, verás una ventana emergente que te permite cambiar el color:

+ +

+ +

El selector de color incluye un icono de cuentagotas: al hacer clic en este icono, podrás utilizar el cuentagotas para seleccionar un nuevo color para el elemento:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

A partir de Firefox 40, al hacer clic en la muestra de color mientras mantienes pulsada la tecla Shift, cambiará el formato de color: hexadecimal, HSL y RGB

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

Firefox 53 y versiones más recientes son compatibles con los valores de CSS color level 4.

diff --git a/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html new file mode 100644 index 0000000000..bd926e4bed --- /dev/null +++ b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html @@ -0,0 +1,22 @@ +--- +title: Reposicionando elementos en la página +slug: Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +
Novedades en Firefox 48
+ +

A partir de Firefox 48 puede mover elementos con position: absolute arrastrándolos alrededor de la página.

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

Si un elemento tiene su propiedad  {{cssxref("position")}} seteada en absolute, relative o fixed y una o más de las propiedades {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} , la Vista del modelo de caja muestra un botón:

+ +

+ +

Si hace click en ese botón, aparecen dos identificadores junto al elemento:

+ +

Example for changing the position of an element within the content

+ +

Puede utilizar estos identificadores para arrastrar el elemento alrededor de la página.

+ +

Si el elemento está posicionado de forma absoluta, se muestran líneas discontinuas que representan el origen de desplazamiento. Para los elementos relativamente posicionados, las líneas discontinuas indican la posición original del nodo. Los desplazamientos están indicados por una línea y una descripción de herramientas para cada lado.

diff --git a/files/es/tools/page_inspector/how_to/select_an_element/index.html b/files/es/tools/page_inspector/how_to/select_an_element/index.html new file mode 100644 index 0000000000..617fb05afd --- /dev/null +++ b/files/es/tools/page_inspector/how_to/select_an_element/index.html @@ -0,0 +1,36 @@ +--- +title: Seleccionar un elemento +slug: Tools/Page_Inspector/How_to/Select_an_element +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +

Un elemento seleccionado es el elemento de la página en la que el Inspector está actualmente enfocado. El elemento seleccionado se ve en el panel HTML y su CSS en el panel CSS.

+ +

Un elemento destacado es el elemento que se dibuja sobre la página con una representación gráfica del modelo de caja, y un tooltip que contiene su etiqueta y tamaño:

+ +

+ +

Con el menú contextual

+ +

Para abrir el Inspector Selecciona un elemento en la página,y haz clic derecho para que el menú contextual aparezca sobre el elemento de la página. Selecciona "Inspeccionar elemento" y Se abrirá el Inspector inmediatamente.

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

Con el panel HTML

+ +

Si tienes el inspector abierto, al mover el ratón sobre de los elementos listados en el panel HTML, verás que en la página se destacan los elementos correspondientes. Haz clic en un elemento del panel HTML para seleccionarlo:/p> + +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

También puedes utilizar las teclas de flecha para desplazarte por el DOM con el teclado: flecha derecha para expandir un elemento y acceder a los elementos descendientes;
flecha izquierda para contraer un elemento o subir al elemento ascendente;
flecha arriba para recorrer hacia arriba las líneas del panel HTML
flecha abajo para recorrer hacia abajo las líneas del panel HTML.

+ +

Con el boton seccionar elemento

+ +

Para seleccionar un elemento en la propia página, activa el "selector de elementos" haciendo clic en su icono (también llamado Selector de nodos o Node picker). Entonces segun muevas el ratón en la página, se destacará el elemento que esté bajo ratón. Haz clic en el elemento para seleccionarlo:

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

+ +

A partir de Firefox 52, si pulsas Shift + Click en un elemento seleccionas el elemento permitiendo que el selector de elementos permanezca activo. Así es posible ver las reglas del elemento en el panel CSS y al mismo tiempo no impide que puedas seleccionar otro elemento en la página .

diff --git a/files/es/tools/page_inspector/how_to/work_with_animations/index.html b/files/es/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..2ad2d5afa1 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,112 @@ +--- +title: Trabajar con animaciones +slug: Tools/Page_Inspector/How_to/Work_with_animations +tags: + - Guia(2) + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +

Este artículo cubre tres herramientas que puede usar para visualizar y editar animaciones:

+ + + +

Inspector de Animación

+ +
+

Aunque esta herramienta se introdujo en Forefox 41, el interface de usuario se rediseñó en Forefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see this separate page.

+
+ +

Desde Firefox 41, el Inspector de Página incluye una vista extra etiquetada "Animaciones".

+ +

Esta vista muestra las transiciones CSS y las animaciones CSS sincronizadas en la linea de tiempo, puede usar el widget dragueable para moverse a cualquier punto en la linea de tiempo y ver la página en ese punto.

+ +

To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different Firefox channel. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}

+ +

Let's use the animation inspector to see what's going on in this example.

+ + + +

{{EmbedYouTube("U2eJYacf5XY")}}

+ +

Now play the animation:

+ +

{{EmbedYouTube("CwXXXEllB3o")}}

+ +

Let's take a closer look at the contents of the animation inspector here:

+ +

+ +

It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.

+ +

Each animation or transition is shown as a horizontal bar laid across the timeline:

+ + + +

To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.

+ +

To the left of the selector is a "target" icon (). From Firefox 44, clicking this icon will lock the highlighter on the element.

+ +

Applying all this to our example, we can see that:

+ + + +

Animation playback

+ +

At the top of the animation inspector:

+ + + +

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:

+ +

{{EmbedYouTube("1hqNaMsB48g")}}

+ +

Edit @keyframes

+ +

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

+ +

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

This feature uses open source code from Lea Verou’s cubic-bezier.com.

+ +

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

diff --git a/files/es/tools/page_inspector/index.html b/files/es/tools/page_inspector/index.html new file mode 100644 index 0000000000..4ffddc225d --- /dev/null +++ b/files/es/tools/page_inspector/index.html @@ -0,0 +1,348 @@ +--- +title: Inspector de Página +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - Desarrollo web + - Dispositivos + - HTML + - Herramientas + - Herramientas de desarrollo + - Hojas de estilo + - 'Web Development:Tools' +translation_of: Tools/Page_Inspector +--- +

Utiliza el Inspector para examinar y modificar el HTML y CSS de una página.

+ +

Puedes examinar las páginas cargadas en la copia local de Firefox o en un dispositivo remoto como Firefox para Android. Ver depuración remota para aprender a conectar las herramientas de desarrollo a un dispositivo remoto.

+ +
+

Tour por la UI

+ +

El Tour por la UI es un breve recorrido para aprender a usar el Inspector.

+ +
+

How to

+ +

Para saber más sobre lo que puedes hacer con el Inspector, lee las siguientes guías:

+ +
+ +
+ +
+

Referencia

+ +
+ +
+ +
+

Abriendo el Inspector

+ +

Hay varias formas de abrir el Inspector:

+ + + +

La Caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Inspector activado.

+ +

Si ha invocado el Inspector, haga clic en "Inspeccionar elemento", entonces ya estará seleccionado el elemento y el Inspector se mostrará y funcionará como lo hace en la "Selección de elementos" abajo.

+ +

De lo contrario, al mover el ratón por la página, el elemento bajo el puntero del ratón se resalta con un borde punteado y una anotación muestra su etiqueta HTML y cualquier atributo de clase o ID. Al mismo tiempo, se muestra la definición de HTML, en el contexto, en el panel de la izquierda del Inspector. Desde Firefox 30, también se muestran las líneas de cuadrícula para el elemento y su modelo de caja:

+ +

Desde Firefox 32 la anotación también incluye el tamaño del elemento:

+ +

Al hacer clic en el elemento lo selecciona: Después de que hayas seleccionado un elemento, el Inspector se mostrará y funcionará como lo hace en la "Selección de elementos" abajo.

+ +

Selección de elementos

+ +

Cuando se selecciona un elemento, su marcado se resalta en el panel HTML a la izquierda del Inspector, y el panel de CSS a la derecha del Inspector muestra su información de estilo:

+ +

+ +

La linea de puntos alrededor del elemento de la página, y la anotación para ello, ya no se muestra una vez que un elemento ha sido seleccionado. Asimismo, el Inspector no está bloqueado en el elemento seleccionado: cuando se mueve el ratón alrededor de la marcación en el panel HTML, la linea punteada se muestra alrededor del elemento correspondiente. Para seleccionar un elemento diferente en la página web, haz clic en el botón "Seleccionar elemento", que aparece en la Caja de herramientas.

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

Firefox 30 en adelante

+ +

De Firefox 30, el comportamiento de la selección es el mismo que en Firefox 29, pero el inspector también muestra el modelo de caja y  rejilla de líneas para los elementos en la página:

+ +

{{EmbedYouTube("y2LcsxE2pR0")}}

+ +

Firefox 32 en adelante

+ +

Tenga en cuenta que a partir de Firefox 32, el botón "Seleccionar elemento" está en el extremo izquierdo de la barra de herramientas:

+ +

+ +

Menú emergente del elemento

+ +

Puedes llevar a cabo ciertas tareas comunes en un nodo específico mediante un menú emergente. Para activar este menú contextual haz clic en el elemento, en el panel HTML:

+ +

El menú ofrece opciones para:

+ + + +

Copiar imagen como URL datos

+ +
+
Desde Firefox 29 en adelante, si el elemento seleccionado en ese momento es una imagen, a continuación, en el menú emergente incluye una opción para copiar la imagen en el portapapeles como una URL de datos:
+
+ +

+ +

Edición de HTML

+ +

Para editar un elemento de outerHTML, activar el menú emergente del elemento y seleccione "Editar como HTML". Verá un cuadro de texto en el panel HTML:

+ +

Puedes agregar cualquier código HTML aquí: cambiar la etiqueta del elemento cambiando los elementos existentes, o añadiendo otros nuevos. Una vez que se hace clic fuera de la caja, los cambios se aplican a la página.

+ +

Panel de HTML

+ +

El panel de HTML, que muestra el HTML de la página como un árbol. Justo a la izquierda de cada nodo es una flecha: Haz clic en la flecha para expandir el nodo.

+ +

Puedes editar el HTML - etiquetas, atributos y contenido - directamente en este panel: Haz clic en el elemento que deseas editar, cambiar, y pulsa Enter para ver los cambios reflejados inmediatamente.

+ +

Haciendo click en el contenido de un elemento se muestra un menu emergente para trabajar con ese elemento...

+ +

A partir de Firefox 31 en adelante, si se mantiene pulsada la tecla Alt mientras se hace clic en la flecha, se expande el nodo y todos los nodos por debajo de ella.

+ +

 A partir de Firefox 32 en adelante, los nodos que están ocultos usando  display:none se muestran descoloridos.

+ +

Barra de herramientas del panel HTML

+ +

Encima del panel , hay una barra de herramientas dedicada, dividida en dos secciones.

+ + + +

Panel CSS

+ +

El panel de CSS muestra la información acerca de los estilos aplicados al elemento actualmente seleccionado. Hay cuatro puntos de vista diferentes: "Reglas", "computarizada", "Fuentes" y "modelo de caja". Se puede cambiar entre ellas utilizando la barra de herramientas en la parte superior del panel:

+ +

VISTA DE REGLAS

+ +
+
+
+
Esta vista muestra todas las reglas que se aplican al elemento seleccionado, ordenadas desde la más específica, hasta la menos específica:
+
+
+
+ +

 

+ +

La vista de reglas muestra la lista de seudo-elementos, y las reglas que se aplican.

+ +

A partir de Firefox 32 en adelante,el listado de vista de reglas, usuario-agente-estilos (estilos aplicados por el navegador) si la opción de hacerlo se revisa en los ajustes de herramientas de desarrollador. Tenga en cuenta que este ajuste es independiente de la casilla de verificación "Estilos de navegador" en la vista computarizada.

+ +

Muestra de reglas

+ +

Esta muestra cada regla como una hoja de estilos, con una lista de selectores seguida por una lista de  declaraciones. (property:value;)

+ +

Las reglas que se han invalidado por normas posteriores están tachadas. Si se pasa el ratón sobre una declaración, una casilla de verificación aparece junto a ella: Se puede usar esta opción para alternar el estado  de la regla de encendido a apagado.

+ +

Usuario-agente-estilos se muestra  en un gris oscuro, y el vínculo y el número de linea contiene el prefijo (user agent):
+

+ +

Vínculo al archivo CSS

+ +

En la parte superior derecha de cada regla, el nombre del archivo de procedencia y el numero de linea se muestran como un vínculo: Haciendo click en este ,se abre el archivo en el   Editor de estilos.

+ +

El Inspector entiende los mapas de procedencia del CSS. Eso significa que si usted está usando un preprocesador CSS que tiene soporte para mapas fuente, y ha habilitado el apoyo de mapa de origen en los ajustes de editor de estilos , a continuación, el enlace le llevará a la fuente original, no al CSS generado.

+ +

+ +

Leer más sobre el soporte para  mapas de procedencia de CSS  en la documentación del editor de estilos.

+ +

Muestras de color

+ +

Verás que aparece una muestra de color junto a sus valores numéricos:

+ +

+ +

Selector de color

+ +

Si haces click en la muestra de color, verás aparecer un selector de color, que te permite  cambiarlo:

+ +

+ +

A partir de Firefox 31 en adelante, el selector de color incluye un icono de cuentagotas: Al hacer clic en este icono se  permite utilizar el cuentagotas para seleccionar un nuevo color para el elemento de la página:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

 

+ +

Previsualización de la imagen de fondo

+ +

Verás una vista previa de imágenes especificas utilizando Imagen de fondo si te detienes sobre la regla:

+ +

Transformar la visualización

+ +

Si se pasa sobre una propiedad de transformación en la vista de reglas, se obtiene una información sobre herramientas, que visualiza la transformación  que se lleva a cabo:

+ +

+ +

Herramienta informativa fuente-familia

+ +
+

Esto es nuevo en Firefox 30.

+
+ +

A partir de Firefox 30 en adelante,  si pasas sobre una propiedad fuente-familia  en la Vista de Reglas, consigues una información con una muestra sobre ese tipo de letra :

+ +

+ +

Edición de Reglas

+ +

Si haces click en una declaración,puedes modificar esa propiedad o valor, y ves el resultado inmediatamente. Para añadir una nueva declaración a una regla, haces click sobre la última linea de la regla (la linea ocupada por la llave de cierre). Si introduces un valor no válido para una propiedad mientras lo estás editando, o el nombre de una propiedad desconocida, un icono de alerta amarillo aparece bajo  la declaración.

+ +

Cualquier cambio que se realice es temporal: Al volver a cargar la página , se restablecerá el estilo original.

+ +

Consejo: Puedes utilizar las teclas de flecha para aumentar/disminuir reglas numéricas mientras realizas la edición. La flecha hacia arriba cambiará  "1px" a  2px,  y Shift+up/down la aumentará o disminuira en 10. Alt+up/down cambiará los valores en  0.1, y shift+Page up/down  sumará o restará  100 al valor.

+ +

Vista computada

+ +

Esta vista organiza el estilo del elemento por propiedades. En  esta lista se enumeran todas las propiedades CSS que se han aplicado a este elemento en orden alfabétiico: Muestra el valor calculado que cada propiedad CSS tiene para el elemento seleccionado :

+ +

Al hacer click en la flecha junto al nombre de la propiedad ,muestra la regla que establece ese valor , junto a un enlace al nombre del archivo de origen y el número de linea :

+ +

Por defecto, solo muestra los valores que han sido explicitamente establecidos para esa página: Para ver todos los valores haz click en el cuadro de "Estilos del navegador" .

+ +

Escribir en el buscador realiza un filtrado directo de la lista , por lo que, por ejemplo,si lo que deseas es ver los ajustes relacionados con la fuente, puedes escribir "fuente" en el buscador, y unicamente las propiedades con "fuente" en el nombre seran listadas. Tambien puedes buscar por los valores de las propiedades: Para encontrar la regla responsable de establecer la fuente "Lucida Grande", escribe eso en el buscador.

+ +

Vista de fuentes

+ +

Esta muestra todas las fuentes utilizadas por el elemento seleccionado. Tenga en cuenta que muestra el tipo de letra utilizado en su sistema, que puede ser diferente a las especificadas en el css:

+ +

El texto en la vista de fuentes es  "Abc" por defecto,pero  en realidad  es un area de texto y puede ser editado libremente.

+ +

Vista modelo de caja

+ +

Esta muestra una representación gráfica de como el  modelo de caja se aplica a este elemento. A partir de  Firefox 30, mientras el ratón está en vista del modelo de caja, las lineas de cuadrícula y el modelo de caja para el elemento de la página son mostradas:

+ +

Vista detallada del modelo de caja

+ +

 Antes de Firefox 30, la vista del modelo de caja era el siguiente:

+ +

+ + + +

A partir de Firefox 30, se ha simplificado:

+ + + +

A partir de Firefox 31, si haces click sobre uno de los números  en la vista modelo de caja, puedes modificar el valor y ver el resultado en la página inmediatamente.

+ +

Utilización del Inspector de Página en la Consola Web

+ +

El elemento seleccionado en ese momento en el  inspector de página , en su caso, puede ser referenciado en  JavaScript en la Cónsola web utilizando la variable $0.

+ +

+ +

Además, a partir de  Firefox 30, si pasas sobre el elemento en la salida de la Cónsola Web ,este es resaltado en la pantalla:

+ +

+ +

 API para desarrolladores

+ +

Firefox complementos puede acceder a los siguientes objetos desde chrome://browser/content/devtools/inspector/inspector.xul context:

+ +

ventana.inspector

+ +

Definido en inspector-panel.js. Atributos y funciones:

+ + + +

Capacidad de enlazar eventos en:

+ +

  Markup cargado

+ +

LLamado cuando el panel izquierdo ha sido renovado, despues del cambio de página.

+ +

Listo

+ +

LLamado cuando se ha cargado el primer markup.

+ +

Seudoclase

+ +

LLamado despues comando de seudoclase.

+ +

Cambio de diseño

+ +

"Evento de cambio de baja prioridad para cosas como pintar o cambiar el tamaño."

+ +

Atajos de teclado

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Atajos globales

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

+ +

 

+ +

 

+ +

 

diff --git a/files/es/tools/page_inspector/ui_tour/index.html b/files/es/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..a72918603a --- /dev/null +++ b/files/es/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,98 @@ +--- +title: Tour por la UI +slug: Tools/Page_Inspector/UI_Tour +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/UI_Tour +--- +

Este artículo es un breve recorrido por las principales secciones de la interfaz de usuario del Inspector de páginas.

+ +

Recorre los tres componentes de máximo nivel de la interfaz de usuario del Inspector:

+ + + +

The all-new Inspector panel in Firefox 57.

+ +

Esta guía pretende mantenerse tan breve como sea posible, y lo hace enlazando a otras guías más específicas para profundizar en el trabajo con el Inspector.

+ +

Botón seleccionar elemento

+ +

El Inspector ofrece información detallada sobre el elemento actualmente seleccionado. El botón Seleccionar Elemento es una de las maneras para seleccionar el elemento que queremos inspeccionar:

+ +

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

+ +

Este botón forma parte de la barra de herramientas principal, por tanto es accesible desde cualquier herramienta, no sólo desde el Inspector.

+ +

Para aprender a seleccionar un elemento ver la guía seleccionar un elemento.

+ +

Panel HTML

+ +

El Inspector está dividido en dos mitades. La mitad izquierda está ocupada por el panel HTML:

+ +

These are the tasty new HTML and CSS panes in Firefox 57.

+ +

Para aprender más sobre la estructura del panel HTML, ver a la guía examinar y editar HTML.

+ +

Panel CSS

+ +

La mitad derecha del Inspector la ocupa el panel CSS:

+ +

The rules view within the Inspector.The CSS pane is divided into 4 views:

+ +

El panel CSS está dividido en 5 vistas:

+ + + +

Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página

+ +

Vista reglas

+ +

La vista Reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado ordenadas desde la más específica a la menos específica

+ +

Ver Examinar y editar CSS para más detalles.

+ +

Vista calculado

+ +

La vista Calculada muestra el cálculo completo de CSS para el elemento seleccionado, y una representación visual editable del modelo de caja para el elemento:

+ +

The Computed view within the Inspector.

+ +

Para aprender más sobre la vista modelo de cajas ver Examinar y editar el modelo de caja. Ten en cuenta que antes de Firefox 50, la vista modelo de caja no estaba en la pestaña "Vista calculada", sino que tenía su propia pestaña.

+ +

Para aprender más sobre las declaraciones CSS listadas en esta vista ver Examinar CSS calculado.

+ +

Vista tipografía

+ +
+

En Firefox 47 únicamente, la vista Tipografía está desactivada por defecto. Si quieres verla en Firefox 47, visita about:config, busca la opción devtools.fontinspector.enabled, y seleccionala como true.

+ +

Antes y después de Firefox 47, la vista Tipografía está habilitada por defecto.

+
+ +

La vista Tipografía muestra todas las fuentes de la página con muestras editables.

+ +

The all-new Inspector panel in Firefox 57.

+ +

Ver Vista tipografía para más detalles.

+ +

Vista animaciones

+ +

La Vista Animaciones ofrece los detalles de cualquier animación aplicada al elemento seleccionado, y un controlador para pausarlas

+ +

 

+ +

This is the Animations pane in the Firefox 57 Inspector.

+ +

Ver Trabajar con animaciones para más detalles.

diff --git a/files/es/tools/profiler/index.html b/files/es/tools/profiler/index.html new file mode 100644 index 0000000000..86caf8465c --- /dev/null +++ b/files/es/tools/profiler/index.html @@ -0,0 +1,104 @@ +--- +title: JavaScript Profiler +slug: Tools/Profiler +translation_of: Tools/Performance +--- +
+ Utilice la herramienta de perfiles para encontrar los cuellos de botella en el código JavaScript. El Profiler muestras periódicamente la pila actual de llamadas JavaScript y compila información sobre las muestras. 
+
+  
+
+ Puede iniciar el Analizador seleccionando "Profiler" en el menú "Web Developer". Usted encontrará en el menú "Web Developer" en el menú "Herramientas" en Linux y OS X, y directamente bajo el menú "Firefox" en Windows. 
+
+  
+
+ La Caja de herramientas se abrirá, con el Profiler seleccionado.
+
+  
+

Los perfiladores de muestreo

+

El perfilador de JavaScript es un generador de perfiles de muestreo. Esto significa que las muestras periódicamente el estado del motor de JavaScript, y registra la pila para el código que se ejecuta en el momento de tomar la muestra. Estadísticamente, el número de muestras tomadas en la que estábamos ejecutando una función particular, corresponde a la cantidad de tiempo que el navegador está gastando ejecutarlo, para que pueda identificar los cuellos de botella en el código.
+
+ Por ejemplo, considere un programa como este:

+
function doSomething() {
+  var x = getTheValue();
+  x = x + 1;                   // -> sample A
+  logTheValue(x);
+}
+
+function getTheValue() {
+  return 5;
+}
+
+function logTheValue(x) {
+ console.log(x);               // -> sample B, sample C
+}
+
+doSomething();
+

Supongamos que ejecutar este programa con el perfilador activo, y en el tiempo que se tarda en ejecutar, el perfilador toma de tres muestras, como se indica en los comentarios en línea de arriba. 

+

Todos están tomadas desde el interior doSomething(), pero los otros dos se encuentran dentro de la función logTheValue() llamado por doSomething(). Así que el perfil consistiría en tres seguimientos de pila, como este:

+
Sample A: doSomething()
+Sample B: doSomething() > logTheValue()
+Sample C: doSomething() > logTheValue()
+

Esto, obviamente, no hay suficientes datos para que nos digan nada, pero con mucho más muestras de que podría ser capaz de concluir que logTheValue() es el cuello de botella en nuestro código.

+

Creación de un perfil

+

Haga clic en el botón del cronómetro (stopwatch) en el Profiler para iniciar muestras de grabación. Cuando Profiler está grabando, se resaltará el botón del cronómetro. Haga clic en él de nuevo para detener la grabación y guardar el nuevo perfil:

+

+

Una vez que haya hecho clic en "Stop", el nuevo perfil se abrirá de forma automática:

+

+

Este panel está dividido en dos partes:

+ +

Analyzing a profile

+

The profile is split into two parts:

+ +

Profile timeline

+

The profile timeline occupies the top part of the profile display:

+

The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.

+

Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using requestAnimationFrame and Workers.

+

You can examine a specific range within the profile by clicking and dragging inside the timeline:

+

+

A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:

+


+

+

Profile details

+

The profile details occupy the bottom part of the profile display:

+

When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.

+

+

Running time shows the total number of samples in which this function appeared1, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the detectImage() function.

+

Self shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the simple example above, doSomething() would have a Running time of 3 (samples A, B, and C), but a Self value of 1 (sample A).

+

The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.

+

Expanding the call tree

+

In a given row, if there are any samples taken while we were in a function called by this function (that is, if Running Time is greater than Self for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.

+

In the simple example above, the fully-expanded call tree would look like this:

+ + + + + + + + + + + + + + + + + + +
Running TimeSelf 
3            100%1doSomething()
2              67%2logTheValue()
+

To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the detectImage() function. But all of them were taken in functions called by detectImage() (the Self cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:

+

+

This tells us that 6 samples were taken when we were actually executing detectAtScale(), 12 when we were executing getRect() and so on.

+

Footnotes

+
    +
  1. If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like forEach will appear multiple times in the call tree.
    2. +
+

 

diff --git a/files/es/tools/remote_debugging/debugging_over_a_network/index.html b/files/es/tools/remote_debugging/debugging_over_a_network/index.html new file mode 100644 index 0000000000..3eae277997 --- /dev/null +++ b/files/es/tools/remote_debugging/debugging_over_a_network/index.html @@ -0,0 +1,10 @@ +--- +title: Debugging over a network +slug: Tools/Remote_Debugging/Debugging_over_a_network +translation_of: 'Tools/about:debugging#Connecting_over_the_Network' +--- +
+

{{draft}}

+
+ +

Coming soon...

diff --git a/files/es/tools/remote_debugging/firefox_para_android/index.html b/files/es/tools/remote_debugging/firefox_para_android/index.html new file mode 100644 index 0000000000..497d026a34 --- /dev/null +++ b/files/es/tools/remote_debugging/firefox_para_android/index.html @@ -0,0 +1,132 @@ +--- +title: Depuración remota en Firefox para Android +slug: Tools/Remote_Debugging/Firefox_para_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +

Esta guía explica como usar la depuración remota para inspeccionar o depurar código funcionando en Firefox para Android conectado por USB.

+ +

+ +

Esta guía se divide en dos partes: la primera parte, "Requisitos previos" cubre la materia que solo hay que hacer una vez, mientras que la segunda parte, "Conectando", cubre la materia que hay que hacer cada vez que conectas el dispositivo. 

+ +

Requisitos previos

+ +

Primero, lo que necesitará:

+ + + +

Configuración ADB

+ +

A continuación, necesitarás que el ordenador de sobremesa y el dispositivo Android hablen entre si utilizando la herramienta de la línea de comandos del adb.

+ +

En el dispositivo Android

+ + + +

En el ordenador de sobremesa

+ + + +

Para comprobar que funciona, abre en tu ordenador de sobremesa la aplicación que te deja escribir comandos en línea del sistema operativo y teclea:

+ +
adb devices
+ +

Deberías ver una respuesta parecida a esta:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

(La cadena de texto hexadecimal será diferente.)

+ +

Si obtienes ésto, entonces adb ha encontrado tu dispositivo y has configurado correctamente el ADB.

+ +

Habilitar la depuración remota

+ +

A continuación, tienes que activar la depuración remota en el ordenador de sobremesa y en el dispositivo Android.

+ +

Firefox versión 24 y anteriores para Android

+ +

Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia devtools.debugger.remote-enabled al valor true.

+ +

Introduce la dirección about:config en Firefox para Android, escribe "devtools" dentro del cuadro de búsqueda y pulsa la tecla Search. Verás todas las preferencias de DevTools. Busca la preferencia devtools.debugger.remote-enabled preference, y pulsa "Toggle".

+ +

+ +

Firefox versión 25 y posteriores para Android

+ +

En Firefox v.25 y posteriores para Android, hay un elemento de menú para habilitar la depuración remota. Abre el menú, selecciona "Settings", luego "Developer tools" (en algunos dispositivos Android puede que necesites seleccionar "More" para ver la opción "Settings"). Marca la casilla "Remote debugging":

+ +

+ +

El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.

+ +

En el ordenador de sobremesa

+ +

En el ordenador, la depuración remota se habilita  a través de un ajuste en la caja de herramientas. Abre la caja de herramientas, haz clic en el botón "Settings"  de la barra de herramientas, y marca "Enable remote debugging" en la pestaña de Settings:

+ +

+ +
Si estás utilizando una versión de Firefox anterior a la 27, tendrás que reiniciar el navegador para que se aplique la nueva configuración.
+ +

Verás una nueva opción en el menú "Web Developer" con la etiqueta  "Connect...":

+ +

+ +

Conectarse

+ +

Ahora puedes conectar la herramienta de depuración remota con el dispositivo. En primer lugar, conecta el dispositivo al ordenador con un cable USB, si no lo has hecho todavía.

+ +

En el ordenador de sobremesa

+ +

Ve al símbolo del sistema y teclea:

+ +
adb forward tcp:6000 tcp:6000
+ +

(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)

+ +

Para Firefox OS, teclea:

+ +
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
+ +

Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de sobremesa y el dispositivo con el cable USB.

+ +

A continuación, ve al menú Web Developer del Firefox, y selecciona  "Connect...". Verás una página parecida a ésta:

+ +

Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.

+ +

En el dispositivo Android

+ +
+
A continuación verás un cuadro de diálogo en el dispositivo Android que pide que  confirmes la conexión:
+
+ +

Haz click en "OK". El ordenador de sobremesa espera unos segundos para darte tiempo para que confirmes en el cuadro de diálogo: si se agota el tiempo de espera, solo tienes que volver a hacer click en "Connect" en el cuadro de diálogo del ordenador de sobremesa.

+ +

En el ordenador de sobremesa

+ +

A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:

+ +

Te pregunta si quieres depurar el contenido de la web que se ejecuta en alguna pestaña del navegador, o depurar el código del propio navegador.

+ + + +

Elegimos conectarnos al sitio web mozilla.org.  Se abrirá una ventana con la Caja de herramientas, vinculada a la pestaña del Firefox para Android que muestra el sito de mozilla.org:

+ +

+ +

La caja de herramientas y las herramientas que contiene, funcionan de la misma manera que lo hacen cuando están conectadas a un contenido local.

diff --git a/files/es/tools/remote_debugging/index.html b/files/es/tools/remote_debugging/index.html new file mode 100644 index 0000000000..4164a78241 --- /dev/null +++ b/files/es/tools/remote_debugging/index.html @@ -0,0 +1,147 @@ +--- +title: Depurado Remoto +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +

You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the Toolbox to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:

+ + + +

This guide explains how to get set up to debug code running in Firefox for Android over USB. The other main application for remote debugging is to debug code running in the Firefox OS Simulator, but that's covered separately, in the Firefox OS Simulator documentation.

+ +

+ +

This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. 

+ +

Prerequisites

+ +

First, you'll need:

+ + + +

ADB setup

+ +

Next, you'll need to get the desktop and the Android device talking to each other using the adb command-line tool.

+ +

On the Android device

+ + + +

On the desktop

+ + + +

To check it worked, open up a command shell on the desktop and type:

+ +
adb devices
+ +

You should see some output like:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

(The long hex string will be different.)

+ +

If you do, then adb has found your device and you've successfully set up ADB.

+ +

Enable remote debugging

+ +

Next, you need to enable remote debugging on both the Android device and the desktop.

+ +

Firefox for Android 24 and earlier

+ +

To enable remote debugging on the device, you need to set the devtools.debugger.remote-enabled preference to true.

+ +

Go to about:config in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the devtools.debugger.remote-enabled preference, and press "Toggle".

+ +

+ +

Firefox for Android 25 and later

+ +

On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:

+ +

+ +

The browser will display a notification reminding you to set up port forwarding, which we'll do later on.

+ +

On the desktop

+ +

On the desktop, remote debugging is enabled by a setting in the Toolbox. Open the Toolbox, click the "Settings" button in the toolbar, and check "Enable remote debugging" in the Settings tab:

+ +

Restart the browser, and you'll see a new option in the Web Developer menu labeled "Connect...":

+ +

+ +

Connecting

+ +

Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.

+ +
+
On the desktop
+ +

Go to a command prompt, and type:

+ +
adb forward tcp:6000 tcp:6000
+ +

(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)

+ +

For Firefox OS, type:

+ +
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+ +

You'll need to reissue this command each time you physically attach desktop and device with the USB cable.

+ +

Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:

+ +

Unless you've changed the port numbers, choose 6000 and press the "Connect" button.

+
+ +
+
On the Android device
+ +

Next you'll see a dialog on the Android device asking you to confirm the connection:

+ +

Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.

+
+ +
+
On the desktop
+ +

Next, the desktop shows you a dialog that looks something like this:

+ +

This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.

+ + + +

Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:

+ +

+ +

The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.

+
+ +

 

+ +

 

diff --git a/files/es/tools/responsive_design_view/index.html b/files/es/tools/responsive_design_view/index.html new file mode 100644 index 0000000000..2571bc5aa4 --- /dev/null +++ b/files/es/tools/responsive_design_view/index.html @@ -0,0 +1,18 @@ +--- +title: Responsive Design View +slug: Tools/Responsive_Design_View +translation_of: Tools/Responsive_Design_Mode +--- +

{{ fx_minversion_header("15.0") }}

+ +

La vista de Diseño Adaptable hace que sea fácil ver cómo sus diseños se verán y funcionarán en diferentes tamaños de pantallas. Diseño Adaptable se adapta a diferentes tamaños de pantalla para proporcionar una presentación adecuada para diferentes tipos de dispositivos, principalmente teléfonos móviles. La captura de pantalla siguiente es un ejemplo de la página web mozilla.org vista con un área de contenido 320 por 480.

+ +

La vista de Diseño Adaptable es conveniente porque se puede cambiar rápidamente el tamaño del área de contenido sin cambiar el tamaño de la ventana del navegador. Cambiar el tamaño de la ventana del navegador puede ser molesto porque todos los tamaños de tus pestañas cambian entonces y también hay menos espacio en la ventana de herramientas de desarrollo.

+ +

Tu puedes encontrar la vista de Diseño Adaptable en el menú Desarrollador Web.

+ +

Como alternativa, puede usar el atajo ctrl-shift-M en Windows o Linux y cmd-opt-M en Mac  para iniciar la vista de Diseño adaptable. Presionando la tecla <esc> se cerrará la vista. Mientras que estás en la vista de Diseñó Adaptable, puedes seguir con normalidad en el área de contenido reescalado.

+ +

En la parte superior de la vista de Diseño Adaptable, hay un menú desplegable de tamaños preestablecidos que son convenientes para ver rápidamente su diseño en un número de tamaños de pantallas más comunes. También hay un botón de rotación para cambiar inmediatamente la anchura y altura (similar a la rotación de un teléfono móvil o tableta ).

+ +

Usted puede utilizar el controlador de tamaño en la parte inferior derecha del área de contenido para cambiar el tamaño del área de contenido.

diff --git a/files/es/tools/settings/index.html b/files/es/tools/settings/index.html new file mode 100644 index 0000000000..e502957541 --- /dev/null +++ b/files/es/tools/settings/index.html @@ -0,0 +1,206 @@ +--- +title: Configuración +slug: Tools/Settings +translation_of: Tools/Settings +--- +

Configuraciones

+ +

Al hacer clic en el botón "Configuraciones" le permite acceder a la configuración de la propia caja de herramientas y de las herramientas que alberga:

+ +

+ +

Por defecto Firefox Herramientas de Desarrollo

+ +

Este grupo de casillas de verificación determina qué herramientas están habilitadas en la caja de herramientas. Las nuevas herramientas se incluyen con frecuencia en Firefox, pero no está activado de forma predeterminada.

+ +

Elija DevTools tema

+ +

Esto le permite cambiar entre tema claro u oscuro:

+ +

+ +

+ +

Inspector

+ +
+

Este ajuste está disponible en Firefox 27 en adelante

+
+ +

Unidad de color por defecto: un valor para controlar cómo se representan los colores de la inspección: Hex, HSL(A), RGB(A), y por su nombre.

+ +

Consola Web

+ +

Habilitar registros persistentes: una configuración para controlar si la consola borra la salida cuando se navega a una página nueva..

+ +

Analizador JavaScript

+ +

Mostrar datos de la plataforma Gecko: una opción para controlar si los perfiles deben incluir Gecko símbolos de plataforma.

+ +

Configuraciones avanzadas

+ + + + + + +

Opening Settings

+ +

To see the Developer Tools Settings pane, open any of the Developer Tools, and then:

+ + + +

The Settings pane looks something like this:

+ +

Depicts the Toolbox options

+ +

Categories

+ +

Default Firefox Developer Tools

+ +

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

+ +

Available Toolbox Buttons

+ +

This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.

+ +

Note that in Firefox 52 we removed the checkbox to toggle the "Select element" button. The "Select element" button is now always shown.

+ +

Themes

+ +

This enables you to choose one of three different themes.

+ +

There's a light theme, which is the default:

+ +

Light theme for DevTools

+ +

A dark theme (the default on Firefox Developer Edition):

+ +

Dark theme for DevTools

+ +

There's also a Firebug theme that looks like the Firebug extension, letting you feel at home if you're used to Firebug:

+ +

Firebug theme for DevTools

+ +

Common preferences

+ +

Settings that apply to more than one tool. There's just one of these:

+ +
+
Enable persistent logs
+
A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.
+
+ +

Inspector

+ +
+
Show browser styles
+
A setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector's Rules view. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's Computed view.
+
Truncate DOM attributes
+
By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".
+
Default color unit
+
A setting to control how colors are represented in the inspector: +
    +
  • Hex
    • +
  • HSL(A)
    • +
  • RGB(A)
    • +
  • color name
    • +
  • As authored.
    • +
+
+
Enable layout panel
+
Enable the experimental layout panel. This setting only exists in Firefox Nightly.
+
+ +

Web Console

+ +
+
Enable timestamps
+
Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.
+
Enable new console frontend
+
Switch to the experimental new console. This setting only exists in Firefox Nightly.
+
+ +

Debugger

+ +
+
Enable Source Maps
+
Enable source map support in the debugger.
+
Enable new debugger frontend
+
Enable the new debugger. This setting only exists in Firefox Nightly.
+
+ +

Style Editor

+ +
+
Show original sources
+
When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. Learn more about Style Editor support for CSS source maps. With this setting checked, the Page Inspector Rules view will also provide links to the original sources.
+
Autocomplete CSS
+
Enable the Style Editor to offer autocomplete suggestions.
+
+ +

Screenshot Behavior

+ +
+
Screenshot to clipboard
+
When you click the icon for the Screenshot tool, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.
+
Play camera shutter sound
+
When you click the icon for the Screenshot tool, play a shutter sound. New in Firefox 53.
+
+ +

Editor Preferences

+ +

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

+ +
+
Detect indentation
+
Auto-indent new lines based on the current indentation.
+
Autoclose brackets
+
 
+
Indent using spaces
+
 
+
Tab size
+
 
+
Keybindings
+
Choose the default CodeMirror keybindings or keybindings from one of several popular editors: +
    +
  • Vim
    • +
  • Emacs
    • +
  • Sublime Text
    • +
+
+
+ +

Advanced settings

+ +
+
Show Gecko platform data
+
A setting to control whether or not profiles should include Gecko platform symbols.
+
+ +
+
Disable HTTP Cache
+
Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option. +
Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not Service Workers/the Cache API.
+
+
Disable JavaScript
+
Reload the current tab with JavaScript disabled.
+
Enable Service Workers over HTTP
+
Enable Service Worker registrations from insecure websites.
+
Enable browser chrome and add-on debugging toolboxes
+
Enable you to use developer tools in the context of the browser itself, and not only web content.
+
Enable remote debugging
+
Enable the developer tools to debug remote Firefox instances.
+
Enable worker debugging
+
Enable a panel within the debugger to debug workers. +

Note: This option got removed from the UI in Firefox 56, because this version ships with a new Debugger UI, but it can still be enabled for the old UI by setting the preference devtools.debugger.workers to true.

+
+
diff --git a/files/es/tools/storage_inspector/cookies/index.html b/files/es/tools/storage_inspector/cookies/index.html new file mode 100644 index 0000000000..a62f7c2dd3 --- /dev/null +++ b/files/es/tools/storage_inspector/cookies/index.html @@ -0,0 +1,51 @@ +--- +title: Cookies +slug: Tools/Storage_Inspector/Cookies +tags: + - Almacenamiento + - Cookies + - Firefox + - Guía + - Herramientas + - Herramientas de desarrollo + - Inspector de almacenamiento +translation_of: Tools/Storage_Inspector/Cookies +--- +
{{ToolsSidebar}}
+ +

Cuando seleccionas un origen dentro del tipo de almacenamiento de Cookies del árbol de almacenamiento, todas las cookies existentes para ese origen aparecerán listadas en una tabla. La tabla de cookies tiene las siguientes columnas:

+ + + +
+

Note: Some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/hide the columns.

+
+ +

You can edit cookies by double-clicking inside cells in the Table Widget and editing the values they contain, and add new cookies by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.

+ +

Context menu

+ +

The context menu for each cookie includes the following commands:

+ + + +

diff --git a/files/es/tools/storage_inspector/index.html b/files/es/tools/storage_inspector/index.html new file mode 100644 index 0000000000..ae4fc8d026 --- /dev/null +++ b/files/es/tools/storage_inspector/index.html @@ -0,0 +1,124 @@ +--- +title: Storage Inspector +slug: Tools/Storage_Inspector +tags: + - Cookies + - Dev Tools + - Firefox + - Guide + - IndexedDB + - Local Storage + - NeedsTranslation + - Session Storage + - Storage + - Tools + - TopicStub +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +

The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:

+ + + +

For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.

+ +

Opening the Storage Inspector

+ +

You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its Shift + F9 keyboard shortcut.

+ +

The Toolbox will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.

+ +

+ +

Storage Inspector User Interface

+ +

The Storage Inspector UI is split into three main components:

+ + + +

+ +

Storage tree

+ +

The storage tree lists all the storage types that the Storage Inspector can inspect:

+ +

+ +

Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.

+ +

Under "Cache Storage", objects are organized by origin and then by the name of the cache:

+ +

+ +

IndexedDB objects are organized by origin, then by database name, then by object store name:

+ +

+ +

With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:

+ +

+ +

You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.

+ +

Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.

+ +

Table Widget

+ +

The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.

+ +

All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:

+ +

+ + + +

There's a search box at the top of the Table Widget:

+ +

+ +

This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.

+ +

You can use Ctrl + F (Cmd + F on a Mac) to focus the search box.

+ +

Add and refresh storage

+ +

You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):

+ +

+ + + +

When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.

+ +

The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:

+ + + +

The shown values can also be filtered using the search box at the top of the sidebar.

+ +

Working with the Storage Inspector

+ +

The following articles cover different aspects of using the network monitor:

+ + diff --git a/files/es/tools/tomar_capturas_de_pantalla/index.html b/files/es/tools/tomar_capturas_de_pantalla/index.html new file mode 100644 index 0000000000..d842153d65 --- /dev/null +++ b/files/es/tools/tomar_capturas_de_pantalla/index.html @@ -0,0 +1,42 @@ +--- +title: Tomar capturas de pantalla +slug: Tools/Tomar_capturas_de_pantalla +tags: + - Herramientas +translation_of: Tools/Taking_screenshots +--- +

Puedes usar las Herramientas de Desarrollo (Developer Tools) para tomar una captura de pantalla de toda la página, o de un único elemento de la página.

+ +

Tomar una captura de pantalla de la página

+ +

Usa el ícono de captura de pantalla: para tomar una captura completa de la página actual.

+ +

Por defecto, el ícono de captura de pantalla no está habilitado. Para habilitarlo::

+ + + +

Verás el ícono en la barra de herramientas:

+ +

{{EmbedYouTube("KB5V9uJgcS4")}}

+ +

Haz clic en el ícono para tomar una capura de la página actual. La captura se guarda en el directorio de descargas de tu navegador:

+ +

{{EmbedYouTube("HKS6MofdXVE")}}

+ +

Tomar una captura de un elemento

+ +

Para tomar una captura de un único elemento en la página, activa el menú contextual en ese elemento en el panel HTML del Inspector, y selecciona "Screenshot Node". La captura se guarda en el directorio de descargas del navegador:

+ +

{{EmbedYouTube("p2pjF_BrE1o")}}

+ +

Copiar capturas de pantalla al portapapeles

+ +

Desde Firefox 53, también puedes copiar la captura al portapapeles. Sólo marca la caja en Ajustes con la etiqueta "Screenshot to clipboard":

+ +

{{EmbedYouTube("AZedFGh6F78")}}

+ +

Ahora, cuando tomes una captura, la captura también es copiada al portapapeles.

diff --git a/files/es/tools/tools_toolbox/index.html b/files/es/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..ff2f3c4481 --- /dev/null +++ b/files/es/tools/tools_toolbox/index.html @@ -0,0 +1,105 @@ +--- +title: Caja de herramientas +slug: Tools/Tools_Toolbox +tags: + - Guía + - Herramientas +translation_of: Tools/Tools_Toolbox +--- +

La Caja de herramientas proporciona un único lugar para todas las herramientas de desarrollo que están incorporadas en Firefox.

+ +

Puedes abrirla de varias maneras:

+ + + +

Por defecto, la ventana aparece acoplada en la parte inferior de la ventana de Firefox, pero se puede desprender si así lo deseas. Esto es lo que parece cuando está acoplado:

+ +

+ +

La ventana está dividida en dos partes: una barra de herramientas en la parte superior y un panel principal inferior:

+ +

+ +

Modo de Docking

+ +

Por defecto, la ventana está en la parte inferior de la ventana del navegador, pero puedes fijarla al lateral, o mostrarla en una ventana separada usando los botones de la barra de herramientas.

+ +

A partir de Firefox 41 puedes alternar entre los dos últimos que has utilizado pulsando Ctrl + Shift + D en Windows y Linux, o Cmd + Shift + D en OS X.

+ +

Barra de herramientas

+ +

La barra de herramientas contiene los controles para activar una herramienta en particular, para fijar / flotar la ventana, y para cerrar la ventana:

+ +

+ +

Selector de Elementos

+ +

Empezando por la izquierda, primero hay un botón para activar el selector de elementos (también llamado Selector de nodos o Node picker) que sirve para elegir el elemento de la página que vamos a inspeccionar. Ver Seleccionar un elemento.

+ +

Herramientas alojadas en barra de herramientas

+ +

Después hay una serie de botones con etiquetas que te permiten cambiar entre las diferentes herramientas alojadas en la barra. La matriz puede incluir las siguientes herramientas:

+ + + +

Ten en cuenta que no siempre se enumeran todas las herramientas alojadas aquí: sólo se muestran las herramientas realmente disponibles en este contexto (por ejemplo, no todas las herramientas soportan la depuración remota, por tanto si el objetivo de la depuración no es la instancia de Firefox que puso en marcha la ventana, no se mostrarán todas las herramientas alojadas).

+ +

Herramientas Extra

+ +

A continuación están los botones que pueden ponerse o quitarse desde la configuración de la propia barra. Por defecto se incluyen:

+ + + +

Las siguientes herramientas no están incluídas por defecto, pero puedes incluirlas desde el botón de configuración de la barra de herramientas:

+ + + +

Controles de la barra de herramientas

+ +

Próximos a la esquina derecha los últimos botones son para:

+ + + +

Settings

+ +

Ver la página de configuración de las herramientas de desarrollador.

+ + +

Panel principal

+ +

El contenido de la ventana del panel principal está totalmente controlado por, y es específico de la herramienta alojada actualmente seleccionada.

+ +

Atajos de teclado

+ +

{{ Page ("es/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}

+ +

{{ Page ("es/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/es/tools/view_source/index.html b/files/es/tools/view_source/index.html new file mode 100644 index 0000000000..732a6e3fb8 --- /dev/null +++ b/files/es/tools/view_source/index.html @@ -0,0 +1,83 @@ +--- +title: Ver código fuente +slug: Tools/View_source +translation_of: Tools/View_source +--- +

Ver código fuente permite ver el código fuente HTML o XML de la página que estás visitando. Para activar Ver código fuente:

+ + + +

Antes de Firefox 42, se abría una ventana nueva con el código fuente de la página.

+ +

Desde Firefox 42 en adelante, el código fuente se muestra en una pestaña nueva. Si quieres mantener el antiguo comportamiento, dirígete al about:config y cambia la preferencia view_source.tab a false.

+ +

A partir de Firefox 60 en adelante, la preferencia view_source.tab se ha eliminado ({{bug(1418403)}}) y ya no es posible cambiar el modo de comportamiento de Ver código fuente — el código fuentes siempre aparecerá en pestañas nuevas a partir de ahora.

+ +

Características de ver código fuente

+ +

Ver código fuente tiene tres características adicionales, a partir de Firefox 40 se pueden acceder a ellas desde el menú contextual en la pestaña de Ver código fuente:

+ + + +

Cuando el resaltado de sintaxis se encuentra activo, también se destacan los errores de interpretado en rojo. Al pasar el ratón sobre los errores se muestra un texto de ayuda que explica el error.

+ +

Para acceder a Ir a línea usando el teclado, pulsa Control + Option + L en Mac, o Alt + Shift + L en Windows o Linux.

+ +

Enlazar a un número de línea

+ +

Es posible enlazar a un número de línea en particular, añadiendo a la url el ancla #lineNNN el navegador saltará a la línea NNN.

+ +

Por ejemplo view-source:https://www.mozilla.org/#line100

+ +

 

+ +

Ver código fuente seleccionado

+ +

Si seleccionas parte de una página web y haces clic con el botón contextual, verás que aparece un item de menú etiquetado como "Ver código fuente seleccionado", que se comporta como "Ver código fuente", excepto que sólo se muestra el código fuente de la selección.

+ +

Ver código fuente MathML

+ +

Si haces clic con el botón contextual del ratón sobre algún MathML, verás un item del menú contextual con la etiqueta "Ver código fuente": haz clic en él para ver el código fuente MathML.

+ +

Limitaciones de Ver código fuente

+ +

Existen limitaciones en lo que hace Ver el código fuente algo que deberías tener en cuenta.

+ +

Informador de error ≠ validador

+ +

Ver código fuente sólo reporta errores de procesado, no valida errores en el código HTML. Por ejemplo, insertando un elemento {{ HTMLElement("div") }} como hijo de {{ HTMLElement("ul") }} no aparece como error de procesado, pero no es un HTML válido. Por lo tanto, no se marcará este error en Ver código fuente. Si desea comprobar que el HTML es válido, debe utilizar un validador HTML, como el ofrecido por el W3C.

+ +

No se reportan todos los errores de procesado

+ +

A pesar de que todos los errores reportados son errores de análisis de acuerdo con la especificación de HTML, no todos los errores de procesado son reportados por Ver código fuente. Entre los errores que no se informan:

+ + + +

Resaltado de sintaxis XML

+ +

Ver código fuente utiliza el tokenizer de HTML para resaltar la fuente XML. Mientras que el tokenizer implementa el procesamiento de instrucciones cuando se resalta una fuente XML, esta es la única capacidad de XML prevista. Debido a esto, doctypes que tienen un subconjunto interno no se resaltan correctamente, y referencias de entidad a entidades personalizadas tampoco no se resaltan correctamente.

+ +

Este resaltado defectuoso se puede observar si se ve el código fuente de los archivos chrome de Firefox (como los documentos XUL). 

+ +

Sin embargo, esto no debería ser un problema en la práctica cuando se ven los archivos XML típicos.

+ +

Ver también

+ + + +

{{ languages( { "ja": "ja/View_source"} ) }}

diff --git a/files/es/tools/web_console/console_messages/index.html b/files/es/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..102a69d2ef --- /dev/null +++ b/files/es/tools/web_console/console_messages/index.html @@ -0,0 +1,391 @@ +--- +title: Consola de mensajes +slug: Tools/Web_Console/Console_messages +tags: + - Consola + - Herramientas + - Herramientas de desarrollo +translation_of: Tools/Web_Console/Console_messages +--- +

La mayor parte de la Consola Web está ocupada por el panel de visualización de mensaje:

+ +

+ +

Cada mensaje se muestra como una fila separada

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TiempoLa hora a la que se registró el mensaje. Esto no se muestra por defecto: Usted puede ver el tiempo marcado usando una configuracion en la barra de herramientas
Categoria +

Categoria: Esta indicacion nos revela de que trata el mensaje:

+ +
    +
  • Negro: Solicitud de red
    • +
  • Azul: CSS advertencia/error/registro
    • +
  • Naranja: JavaScript advertencia/error
    • +
  • Rojo: Advertencia de seguridad/error
    • +
  • Verde: Registro de servidor
    • +
  • Gris claro: Consola API mensajes
    • +
  • Gris oscuro: de entrada/salida desde el intérprete de línea de Comando
    • +
+
TipoPara todos los mensajes excepto solicitud de red y entrada interectiva/salida de un icono de un error(X), una advertencia(!) o un mensaje informativo de registro (i).
MensajeEl cuerpo del mensaje.
Número de aparicionesSi una línea que genera una advertencia o error que ha sido ejecutado por mas de una vez, sólo se registra una vez y este contador parece indicar cuántas veces se encontró.
Nombre y número de línea +

Para JavaScript, CSS y los mensajes de consola de la API el mensaje se puede rastrear a una línea de código específica. La consola proporciona un enlace con el nombre del archivo y el número de línea que generó el mensaje.

+ +

A partir de Firefox 36, esto incluye también el número de columna.

+
+ +

De forma predeterminada, la consola se borra cada vez que navega a una nueva página o vuevle a cargar la página actual. Para cambiar este comportamiento, comprueba "Activar registros persistentes" en la  Configuración.

+ +

Categorías de los mensajes

+ +

Red

+ +
+

Los mensajes de registro de la red no se muestran por defecto. Utiliza la función de filtrar para mostrarlos

+
+ +

Las solicitudes de red están conectadas con una línea que tiene este aspecto:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
TimeLa hora a la que se registró el mensaje.
CategoryIndica que el mensaje es una solicitud HTTP.
Method +

El método específico de la petición HTTP.

+ +

Si la petición se hizo como una XMLHttpRequest, hay una nota adicional que indica ésto:

+ +

+
URIEl URI de destino.
SummaryLa versión de HTTP, código de estado, y el tiempo que tarda en completarse.
+ +

Revisando los detalles de la petición de red

+ +

Si hace clic en el mensaje, se le redirige al Panel de Red donde se selecciona la petición y más detalles de la petición y la respuesta se muestran en el panel lateral en el lado derecho.

+ +

Puedes acceder a este detalla en linea, sin dejar la Consola Web. Las entradas de peticiones de red obtienen una flecha a su lado. Clícala par ver:

+ +

Encabezados: encabezados de petición y respuesta.

+ +

Respuesta: el cuerpo de la respuesta

+ +

Cookies: cualquier cookie que fuera enviada junto con la solicitud.

+ +

JS

+ +

Los mensajes de JavaScript tienen el siguiente aspecto:

+ +

+ +

CSS

+ +
+

CSS warnings and reflow messages are not shown by default. Use the filtering feature to show them.

+
+ +

Los mensajes CSS tienen el siguiente aspecto:

+ +

+ +

Eventos de reflujo (Reflow events)

+ +

La consola Web también registra los eventos de reflujo en la categoría de CSS. Un reflujo es el nombre que se da a la operación en la que el navegador calcula la distribución de la totalidad o parte de la página. Los reflujos se producen cuando ocurre un cambio en una página y el navegador cree que afecta al diseño. Muchos eventos pueden desencadenar reflujos,  incluso: cambiar el tamaño de la ventana del navegador, activar las pseudoclases como: hover, o manipular el DOM en JavaScript.

+ +

Debido a que los reflujos pueden ser computacionalmente costosos y afectar directamente a la interfaz de usuario, pueden tener un gran impacto en la capacidad de respuesta de un sitio web o aplicación web. Mediante el registro de eventos de reflujo la consola Web le puede dar una idea de cuando se activan los eventos de reflujo, el tiempo que tardan en ejecutarse y, si los reflujos son reflujos sínronos activados desde JavaScript, cuyo código les dispara..

+ +

Los eventos de reflujo se registran como mensajes "Reflow", a diferencia de los errores CSS o advertencias. De forma predeterminada, están deshabilitados. Puede activarlos haciendo clic en el botón "CSS" en la barra de herramientasr y seleccionar "Reflows".

+ +

Cada mensaje está marcado como "reflujo" y muestra el tiempo necesario para ejecutarse:

+ +

Si el reflujo es un reflujo síncrono accionado desde JavaScript, también muestra un enlace a la línea de código que lo provocó:

+ +

Haga clic en el enlace para abrir el archivo en el Debugger.

+ +

Reflujos síncronos y asíncronos

+ +

Si se hace un cambio que invalida el diseño actual  - por ejemplo, la ventana del navegador cambia de tamaño o desdea JavaScript se modifica el CSS de un elemento - el diseño no se vuelve a calcular inmediatamente. En cambio, el reflujo ocurre de forma asíncrona, la próxima vez que el navegador decide que hay que hacer (en general, la próxima vez que el navegador vuelve a pintar). De esta manera, el navegador puede ahorrar un conjunto de cambios que invalidan y recalcular su efecto a la vez.

+ +

Sin embargo, si algún código JavaScript lee un estilo que se ha modificado, a continuación, el navegador debe realizar una reflujo sincrónico con el fin de calcular el estilo computarizado a devolver. Por ejemplo, un código como éste provocará de inmediato un reflujo síncrono cuando se llame a window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +
+
+
Debido a esto, es una buena idea para evitar la interpolación de la escritura y leer llamadas a los estilos de un elemento al manipular el árbol DOM, porque cada vez que vuelve a leer un estilo que ha sido invalidado por una llamada de escritura anterior, se fuerza un reflujo síncrono.
+ +
+
+
+ +

Security

+ +

Security warnings and errors look like this:

+ +

The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.

+ +

The complete list of security messages is as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocked loading mixed active contentThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details.
Blocked loading mixed display contentThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details.
Loading mixed (insecure) active content on a secure pageThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details.
Loading mixed (insecure) display content on a secure pageThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.See Content Security Policy for more details.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.Pages containing login forms must be served over HTTPS, not HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header.See HTTP Strict Transport Security for more details.
+

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

+ 		+

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

+ +

SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the Weak Signature Algorithm article for more details.

+ +

Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.

+
+ +

Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.

+ +

Logging

+ +
+

Messages logged from Shared Workers, Service Workers, add-ons, and Chrome Workers are not shown by default. Use the filtering feature to show them.

+
+ +

The Logging category includes messages logged using the Console API.
+

+ +

The Web console supports the following Console messages:

+ + + +

The console prints a stack trace for all error messages, like this:

+ +
function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();
+ +

+ +

Server

+ +
+

New in Firefox 43

+
+ +
+

Server-side log messages are not shown by default. Use the filtering feature to show them.

+
+ +

From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.

+ +

It uses the Chrome Logger protocol. Briefly, the way it works is:

+ + + +

To find a suitable library for your server code, see the Chrome Logger documentation.

+ +

Command line input/output

+ +

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

+ +

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

+ +

Filtro y búsqueda

+ +

Filtrando por categoría

+ +

You can use the toolbar along the top to constrain the results displayed.

+ +

To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryOptions
NetErrors
+ Warnings
+ XHR
+ Log
CSSErrors
+ Warnings
+ Reflows
JSErrors
+ Warnings
SecurityErrors
+ Warnings
LoggingErrors
+ Warnings
+ Info
+ Log
+ Shared Worker
+ Service Workers
+ Add-on or Chrome Workers
ServerErrors
+ Warnings
+ Info
+ Log
+ +

Filtering by text

+ +

To see only messages that contain a specific string, type in the text box labeled "Filter output".

+ +

Clearing the log

+ +

Finally, you can use this toolbar to clear the log.

diff --git a/files/es/tools/web_console/index.html b/files/es/tools/web_console/index.html new file mode 100644 index 0000000000..d328e31365 --- /dev/null +++ b/files/es/tools/web_console/index.html @@ -0,0 +1,349 @@ +--- +title: Consola Web +slug: Tools/Web_Console +tags: + - Debugging + - Guide + - NeedsTranslation + - Security + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +

La Consola Web:

+ +
    +
  1. Muestra la informacion asociada con los Logs de la pagina Web: cualquier solicitud de red, JavaScript, CSS, y errores de seguridad y advertencias, asi como tambien, advertencias, mensajes informativos explicitamente generados por Javascripten tiempo de ejecucion dentro del contexto de la pagina.
    2. +
  2. te permite interactuar con la pagina ejecutando expresiones Javascript en el contexto de la página.
    3. +
+ +

It's part of the replacement for the old Error Console built into Firefox: but the Error Console showed errors, warnings, and messages from all web pages, from the browser's own code, and from add-ons. This makes it much more difficult to see which messages are relevant to a specific page. The Web Console is always associated with a specific web page and only shows information associated with that page.

+ +

The other half of the replacement for the Error console is the Browser Console, which shows errors, warnings, and messages from the browser's code and from add-ons.

+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +

Abriendo la Consola WEB

+ +

To open the Web Console select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or by pressing its Control-Shift-K (Command-Option-K on the Mac) keyboard shortcut.

+ +

The Toolbox will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the DevTools toolbar):

+ +

+ +

Underneath the DevTools Window's own toolbar, the Web Console's interface is split into three sections:

+ + + +

Message Display Pane

+ +

Most of the Web Console is occupied by the message display pane:

+ +

+ +

The message display pane displays the following sorts of messages:

+ + + +

Each message is displayed as a single row in the pane.

+ +

HTTP requests

+ +

HTTP requests are logged with a line that looks like this:

+ +

+ + + +

By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies".

+ +

If you click on the message, you'll see a window like this, containing more details about the request and response:

+ +

Scrolling down reveals the response headers. By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies", reload the page, and you'll then see them in the "Inspect Network Request" window.

+ +

Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.

+ +

Warnings and errors

+ +

Warnings and errors are logged with a line looking something like this:

+ +

+ + + +

Security messages

+ +

The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.

+ +

The complete list of security messages is as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocked loading mixed active contentThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details.
Blocked loading mixed display contentThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details.
Loading mixed (insecure) active content on a secure page +
+

Introduced in Firefox 26

+
+ 		The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details.
Loading mixed (insecure) display content on a secure page +
+

Introduced in Firefox 26

+
+ 		The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.See Content Security Policy for more details.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. +
+

Introduced in Firefox 26

+
+ 		Pages containing login forms must be served over HTTPS, not HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen. +
+

Introduced in Firefox 26

+
+ 		Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen. +
+

Introduced in Firefox 26

+
+ 		iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header.See HTTP Strict Transport Security for more details.
+ +

Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.

+ +

Reflow events

+ +
+

Reflow events are only logged from Firefox Desktop 27+ and Firefox OS 1.3+.

+
+ +

The Web Console also logs reflow events. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the DOM in JavaScript.

+ +

Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from JavaScript, which code triggered them.

+ +

Reflow events are logged under the CSS category, as "Log" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the toolbar and selecting "Log".

+ +

Each message is labeled "reflow" and shows the time taken to execute the reflow:

+ +

If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:

+ +

Click the link to open the file in the Debugger.

+ +

Synchronous and asynchronous reflows

+ +

If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.

+ +

However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.

+ +

Input/output messages

+ +

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

+ +

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

+ +

Filtering and searching

+ +

You can use the toolbar along the top to constrain the results displayed.

+ +

You can display only specific types of messages or only message containing specific strings.

+ +

Finally, you can use this toolbar to clear the log.

+ +
+
+ +

The command line interpreter

+ +

You can interpret JavaScript expressions in real time using the command line provided by the Web Console.

+ +

+ +

Basic operation

+ +

Entering expressions

+ +

To enter expressions just type into the command line and press "Enter". To enter multiline expressions, use "Shift+Enter" instead of "Enter".

+ +

The expression you type is echoed in the message display window, followed by the result:

+ +

+ +

Accessing variables

+ +

You can access variables defined in the page, both built-in variables like window and variables added by JavaScript like jQuery:

+ +

+ +

Autocomplete

+ +

The command line has autocomplete: enter the first few letters and a popup appears with possible completions:

+ +

Type "Enter" or "Tab" to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.

+ +
+

New in Firefox 28

+
+ +

Starting from Firefox 28, the console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.

+ +

Inspecting objects

+ +

If the result object is an object it appears in square brackets and is underlined, like this: [object Function]. Click on it, and you'll see a new panel appear containing details of the object:

+ +

To dismiss this panel press "Escape".

+ +

Defining variables

+ +

You can define your own variables, and then access them:

+ +

+ +

Command history

+ +

The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.

+ +

Keyboard shortcuts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ShortcutDescription
↑Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.
↓Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.
Ctrl-AMoves the cursor to the beginning of the line. (Note: beginning with Firefox 22, this will select all text on Windows)
Ctrl-EMoves the cursor to the end of the line.
ReturnExecutes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.
Shift-ReturnExpands the height of the text input box for the command line by a line.
EscapeCancels the autocompletion popup.
TabGenerates an autocomplete suggestion and accepts the first one.
+ +

Helper commands

+ +

{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}

+ +

The split console

+ +
+

The split console is new in Firefox 28.

+
+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Starting in Firefox 28, you can use the console alongside other tools. While you're in another tool in the Toolbox, just press "Escape" or press the "Toggle split console" button in the Toolbar. The toolbox will now appear split, with the original tool above and the web console underneath.

+ +

As usual, $0 works as a shorthand for the element currently selected in the Inspector:

+ +

When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:

+ +

+ +

See also

+ + + +

{{ languages( { "ja": "ja/Tools/Web_Console"} ) }}

diff --git a/files/es/tools/web_console/iniciando_la_consola_web/index.html b/files/es/tools/web_console/iniciando_la_consola_web/index.html new file mode 100644 index 0000000000..59b0156a49 --- /dev/null +++ b/files/es/tools/web_console/iniciando_la_consola_web/index.html @@ -0,0 +1,23 @@ +--- +title: Iniciando la Consola Web +slug: Tools/Web_Console/Iniciando_la_Consola_Web +translation_of: Tools/Web_Console/UI_Tour +--- +

Para abrir la Consola Web:

+ + + +

La Caja de herramientas (Toolbox) aparecera en la parte baja de la ventana del navegador, con la Consola Web activada (solamente se le llama "Consola" en la barra de herramientas DevTools (DevTools toolbar)):

+ +

+ +

La interfaz de la Consola Web esta dividida en tres secciones horizontales que son:

+ + diff --git "a/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" "b/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" new file mode 100644 index 0000000000..06e5922248 --- /dev/null +++ "b/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" @@ -0,0 +1,188 @@ +--- +title: La línea de comandos del intérprete de JavaScript +slug: Tools/Web_Console/La_línea_de_comandos_del_intérprete +tags: + - Debugging + - Depuración + - Desarrollo web + - consola web +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +
{{ToolsSidebar}}
+ +

Puedes interpretar expresiones JavaScript en tiempo real utilizando el intérprete proporcionado por la Consola web. Tiene dos modos: entrada unilínea y entrada multilínea.

+ +

Modo unilínea

+ +

Para entrada de una sola línea, puedes escribir expresiones JavaScript en el campo en la parte inferior del registro de la consola, en el indicador >>.

+ +

La consola web, mostrando el modo unilínea

+ +

Para ingresar expresiones en el modo unilínea, escribe en el indicador y presiona Intro. Para ingresar expresiones de varias líneas, presiona Mayús+Intro después de escribir cada línea, luego Intro para ejecutar todas las líneas ingresadas.

+ +

La expresión que escribas se repite debajo de la petición de entrada, seguida del resultado.

+ +

Si tu entrada no parece estar completa cuando presiones Intro, la consola lo trata como Mayús+Intro, lo cual te permite finalizar tu entrada.

+ +

Por ejemplo, si escribes:

+ +
function foo() {
+ +

y luego Intro, la consola no ejecuta inmediatamente la entrada, pero se comporta como si hubieras presionado Mayús+Intro, para que puedas terminar de ingresar la definición de la función.

+ +

Modo multilínea

+ +

Para la entrada multilínea, haz clic en el icono de "panel dividido" en el lado derecho del campo de entrada unilínea, o presiona Ctrl+B (Windows/Linux) o Cmd+B (macOS). El panel de edición multilínea se abre en el lado izquierdo de la Consola web.

+ +

Modo multilínea en la consola web

+ +

De manera predeterminada, en este modo puedes ingresar múltiples líneas de JavaScript, presionando Intro después de cada una. Para ejecutar el fragmento que se encuentre actualmente en el panel de edición, haz clic en el botón Ejecutar o presiona Ctrl+Intro (o Cmd+Intro en MacOS). El fragmento se repite debajo de la petición de entrada (en el panel del lado derecho), seguido del resultado. También puedes seleccionar un rango de líneas en el panel de edición y ejecutar solo el código en esas líneas.

+ +

A partir de Firefox 76, si el fragmento de código tiene más de cinco líneas, solo las primeras cinco líneas se repiten en la consola, precedidas por un triángulo desplegable (o "twistie") y seguidos por puntos suspensivos (…). Haz clic en cualquier parte del área que contiene el código reproducido para mostrar el fragmento completo; haz clic de nuevo en esa área para contraerlo.

+ +

Puedes abrir archivos en el modo multilínea y guardar el contenido actual del panel de edición en un archivo.

+ + + +

Para volver al modo unilínea, haz clic en el icono X en la parte superior del panel de edición multilínea o presiona Ctrl+B (Windows/Linux) o Cmd+B (MacOS).

+ +

Acceder a variables

+ +

Puedes acceder a las variables definidas en la página, tanto variables integradas como window como variables agregadas por bibliotecas de JavaScript como jQuery:

+ +

Accder a variables

+ +

Autocompletado

+ +

El editor tiene autocompletado: ingresa las primeras letras y aparecerá una ventana emergente con posibles terminaciones:

+ +

Autocompletado

+ +

Presiona Intro, Tab o la tecla de flecha derecha para aceptar la sugerencia, usa las flechas arriba/abajo para pasar a una diferente sugerencia, o simplemente sigue escribiendo si no te gusta ninguna de las sugerencias.

+ +

Las sugerencias de autocompletado de la consola no distinguen entre mayúsculas y minúsculas.

+ +

La consola sugiere terminaciones del ámbito del marco de la pila que se está ejecutando actualmente. Esto significa que si has alcanzado un punto de interrupción en una función, obtienes autocompletado para los objetos locales a la función.

+ +

También obtienes sugerencias de autocompletado para elementos de arreglo:

+ +

Autocompletado en arreglos

+ +

Puedes habilitar o deshabilitar el autocompletado a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento de menú Habilitar autocompletado tiene una marca de verificación junto a él cuando la función está habilitada, que falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

+ +

Evaluación instantánea

+ +
+

Esta característica está disponible en Firefox Nightly, en las versiones etiquetadas con 74 y posteriores.

+
+ +

Cuando la característica de "evaluación instantánea" está habilitada, el intérprete muestra los resultados de las expresiones mientras las escribes en el modo unilínea. Ten en cuenta que el resultado puede ser un mensaje de error. Las expresiones que tienen efectos secundarios no se evalúan.

+ +

Puedes habilitar o deshabilitar la evaluación instantánea a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento Evaluación instantánea del menú tiene una marca de verificación junto a él cuando la característica está habilitada, y falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

+ +

Contexto de ejecución

+ +

El código que has ejecutado se convierte en parte del contexto de ejecución, independientemente del modo de edición en el que te encontrabas cuando lo ejecutaste. Por ejemplo, si escribes una definición de función en el editor multilínea y haces clic en Ejecutar, puedes cambiar al modo unilínea y seguir utilizando tu función.

+ +

Resaltado de sintaxis

+ +

La salida de la consola mostrando la sintaxis resaltada

+ +

El texto que ingreses tiene resaltado de sintaxis tan pronto como hayas escrito lo suficiente para que el resaltador lo analice e infiera el significado de las "palabras".

+ +

La salida también se resalta cuando es apropiado.

+ +
+

Nota: El resaltado de sintaxis no está visible en tu navegador si se han habilitado las funciones de accesibilidad.

+
+ +

Historial de ejecución

+ +

El intérprete recuerda las expresiones que has escrito. Para avanzar y retroceder en tu historial:

+ + + +

El historial de expresiones se conserva entre sesiones. Para borrar el historial, usa la función auxiliar clearHistory().

+ +

Puedes iniciar una búsqueda inversa a través del historial de expresiones, al igual que en bash en Linux y Mac o PowerShell en Windows. En Windows y Linux, presiona F9. En Mac, presiona Ctrl+R (Nota: ¡no Cmd+R!) para iniciar la búsqueda inversa.

+ +

Búsqueda inversa

+ +

Ingresa el texto que deseas buscar en el cuadro de entrada en la parte inferior de la consola. Empieza a escribir parte de la expresión que estás buscando y la primera coincidencia se mostrará en la consola. Si escribes F9 repetidamente en Windows y Linux (Ctrl+R en Mac), retrocedes por las coincidencias.

+ +

Ejemplo de búsqueda inversa

+ +

Una vez que hayas iniciado la búsqueda inversa, puedes usar Mayús+F9 en Windows o Linux (Ctrl+S en Mac) para buscar hacia adelante en la lista de coincidencias. También puedes utilizar los iconos ⋀ y ⋁ en la barra de búsqueda de expresiones.

+ +

Cuando encuentres la expresión que deseas, presiona Intro (Intro) para ejecutar la instrucción.

+ +

Trabajando con iframes

+ +

Si una página contiene iframes incrustados, puedes utilizar la función cd() para cambiar el alcance de la consola a un iframe específico, y luego puedes ejecutar funciones definidas en el documento alojado por ese iframe. Hay tres formas de seleccionar un iframe usando cd():

+ +

Puedes pasar el elemento iframe del DOM:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Puedes pasar un selector de CSS que coincida con el iframe:

+ +
cd("#frame1");
+ +

Puedes pasar el objeto window global del iframe:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

Para volver a cambiar el contexto al objeto window de nivel superior, llama a cd() sin argumentos:

+ +
cd();
+ +

Por ejemplo, supongamos que tenemos un documento que incluye un iframe:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

El iframe define una nueva función:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "Yo soy el frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Puedes cambiar el contexto al iframe de esta manera:

+ +
cd("#frame1");
+ +

Ahora verás que el objeto window global del documento es el iframe:

+ +

window global del documentoY puedes llamar a la función definida en el iframe:

+ +

función en la consola web

+ +

Comandos auxiliares

+ +

{{ page("es/docs/Tools/Web_Console/Helpers", "Los comandos") }}

diff --git a/files/es/tools/webide/index.html b/files/es/tools/webide/index.html new file mode 100644 index 0000000000..e2a8c54122 --- /dev/null +++ b/files/es/tools/webide/index.html @@ -0,0 +1,298 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +
+

WebIDE está disponible desde Firefox 34 en adelante.

+ +

También puede habilitarlo en Firefox 33, modificando una opción: Visite about:config, encuentre la opción llamada devtools.webide.enabled y cambie su valor a true.

+
+ +
+

WebIDE es el sustituto de App Manager. Al igual que App Manager, este permite ejecutar y depurar aplicaciones Firefox OS  utilizando el Firefox OS Simulator o un dispositivo Firefox OS real.

+ +

Además, proporciona un entorno de edición para crear y desarrollar aplicaciones para FireFox OS, incluye una vista de árbol jerárquica de todos los archivos de la aplicación con la posibilidad de editarlos y grabar los cambios realizados, y también dos plantillas de aplicación para ayudar a comenzar a desarrollar.

+ +

Por último, WebIDE le permite conectarse a Firefox Developer Tools (Herramientas de Desarrollo Firefox) a otros navegadores, incluyendo Firefox para Android, Chrome para Android, y Safari para iOS. Vea la página de Remote Debugging (Depuración Remota) para instrucciones de como conectar con un navegador específico.

+
+ +

Con WebIDE, primero configura uno o varios runtimes. Un runtime es un entorno en el que podrás ejecutar y depurar la aplicación. Un runtime podría ser un dispositivo Firefox OS conectado al escritorio a través de USB, o podría ser un Simulador de Firefox OS instalado en el propio escritorio.

+ +

Luego, cree una aplicación, o abra una aplicación existente. Si está creando una nueva aplicación, empiece con una plantilla que incluya la estructura y el contenido mínimo que necesita para empezar, o una plantilla más completa que muestre cómo utilizar una API privilegiada. WebIDE muestra los archivos de su aplicación en un árbol, que se pueden editar y guardar usando su editor de código incorporado. Por supuesto, usted no tiene que utilizar el editor integrado: puede desarrollar su aplicación completamente fuera del WebIDE, y sólo utilizarlo para la depuración.

+ +

Finalmente, puede instalar la aplicción en uno de los runtimes y ejecutarla. Usted puede abrir la suite de herramientas para desarrolladores - el Inspector, la Consola, el JavaScript Debugger (Depurador de JavaScript), etc. - para examinar y modificar la aplicación en ejecución.

+ +

Requisitos del Sistema

+ +

Para desarrollar y depurar aplicaciones utilizando la WebIDE, todo lo que necesita es Firefox versión 33 o posterior. Para hacer pruebas en un dispositivo de Firefox OS real, necesita un dispositivo que ejecute Firefox OS 1.2 o posterior, y un cable USB.
+
+ Sólo se puede utilizar el WebIDE si usted está pensando en Firefox OS 1.2 o posterior.

+ +

Ejecutando WebIDE

+ +

Hay tres maneras de abrir WebIDE:

+ + + +

+ +

Así es como luce WebIDE:El menú desplegable de la izquierda con la etiqueta "Abrir aplicación" (Open App) le permite abrir aplicaciones existentes o crear otras nuevas. El menú desplegable de la derecha con la etiqueta "Seleccionar Runtime" (Select Runtime) le permite seleccionar un runtime o configurar uno nuevo.
+
+ Los botones en el medio ejecutan, detienen, y depuran la aplicación: sólo se activan cuando se ha abierto una aplicación y se selecciona un runtime.

+ +

Desde Firefox versión 36, puede cambiar el tamaño de la fuente de todo el WebIDE usando los atajos de teclado estándares (Use Command en vez de Control en OS X):

+ + + +

Configurando runtimes

+ +

En el el menú desplegable "Seleccione Runtime", los rumtimes se agrupan en tres tipos:

+ + + +

La primera vez que hace clic en el menú desplegable, es posible que no vea los runtimes aquí:

+ +

El resto de esta sección describe cómo se pueden agregar algunos runtimes.

+ +

Conectando un dispositivo Firefox OS

+ +

Antes de conectar un dispositivo Firefox OS, algunas configuraciones que debes revisar:

+ + + +
+

Solo Linux :

+ + +
+ +
+

Solo Windows:

+ + +
+ +

Si existe otro dispositivo Android conectado a tu ordenador, desconectelo(s). Ahora conecta el dispositivo al ordenador mediante el USB. Tu podrás ver que tu dispositivo aparecer bajo "USB DEVICES":

+ +

+ +

Si no visualizas el dispositivo, dirigete a la página Solucionador de problemas.

+ +

Añadiendo un Simulador

+ +

Firefox OS Simulator es una versión de altas capas de Firefox OS que simula un dispositivo Firefox OS, pero se ejecuta runs en el escritorio. Corre en una ventana del mismo tamaño de un dispositivo Firefox OS, incluye la interface de usuario Firefox OS, una terminal de construcción built-in apps, y simula varios APIs para dispositivos Firefox OS.

+ +

Esto significa que en muchos casos, no necesitas un dispositivo real para probar y depurar su app.

+ +

El Simulator es grande, tanto que no se desplaza al interior de Firefox sino como un Firefox add-on. Si oprime "Install Simulator" en el menú Runtimes dropdown, irá a la página desde la cual puede instalar Simuladores para varias versiones de Firefox OS.

+ +

Lo puede instalar tantas veces como quieras. Sea paciente: el Simulador es grande y puede llevar unos minutos para descargarlo. Una vez ha instalado algunos Simuladores, puede cerrar la ventana de "Componentes Extra", y los simuladores que ha instalado aparecerán como opciones en el menú desplegable del runtime.

+ +

Para aprender más sobre el Simulador, mire su página de documentación.

+ +

Runtimes personalizados

+ +

Con un runtime personalizado puede usar on nombre de host un un puerto arbitrario para conectarte a un dispositivo remoto.

+ +

Bajo el capó, los dispositivos con el SO Firefox y Android se conectan al escritorio llamado Android Debug Bridge (Puente de Depuración Android), o ADB. Por defecto, el WebIDE usa un complemento llamado ADB Helper: esto simplifica el proceso para usted, puesto que instala el ADB y configura un puerto para que el escritorio de herramientas de Firefox pueda intercambiar mensajes con el dispositivo.

+ +

Esto es conveniente en la mayoría de casos, pero a veces querrá usar el ADB fuera del WebIDE: por ejemplo, podría estar usando el ADB directamente desde línea de comandos. En ese caso, se conectará al dispositivo especificando un host y puerto, usando el  comando adb forward.

+ +

Si, entonces, quiere conectar el WebIDE también, debería desactivar el complemento ADB Helper y conectar el WebIDE usando la opción de Runtime personalizado, introduciendo el host y puerto que has pasqdo a adb forward.

+ +

Tampoco, ADB Helper permite aún conectar a Firefox para Android, así si quiere conectar WebIDE a Firefox para Android, necesitará establecer su propio puerto forwarding y usar la custom runtime. Ver más sobre conexión a Firefox para Android usando ADB.

+ +

Seleccionando un runtime

+ +

Una vez haya configurado un runtime, puede seleccionarlo usando el menú "Select Runtime" (Seleccionar runtime).

+ + + +

Ahora el botón "play" en el centro de la barra de herramientas del WebIDE está habilitado: clícalo para instalar y ejecutar la app en el runtime seleccionado.

+ +

Acciones de los runtime

+ +

Cuando un runtime es seleccionado, el menú desplegable de Runtimes tendrá tres objetos extras:

+ + + +

+ +

+ +

Creando y abriendo apps

+ +

En el menú "Open App" (Abrir App) tiene tres opciones: crear una nueva app, abrir una app empaquetada y abrir una app como anfitrión.

+ +

+ +

Crear una nueva app

+ +

Seleccione "New App..." (Nueva App...) para crear una nueva app. Verá una ventana ofreciéndole dos opciones de plantillas, "App Privilegiada y vacía" y "App Privilegiada".

+ +

+ +

Ambas plantillas son de la colección de plantillas para apps de Mozilla, y le proporcionan la estructura básica que necesita para empezar. La "App Privilegiada" muestra cómo una app puede usar permisos para cargar contenido cross-origin.

+ +

Una vez haya seleccionado una plantilla, deberá poner un nombre a la app y seleccionar un directorio para guardar los archivos, y luego la app será abierta en el editor de proyectos.

+ +

Abrir una app empaquetada

+ +

Seleccione "Open a Packaged App..." (Abrir una app empaquetada) para abrir una app empaquetada. Deberá seleccionar un directorio que contenga el  manifiesto de la app, y esta se abrirá en el editor de proyecto.

+ +

Abrir una app alojada

+ +

Seleccione "Open Hosted App..." (Abrir una app alojada) para abrir una app alojada. Deberá introdducir la URL apuntando al manifiesto de la app, y esta se abrirá en el editor de proyecto

+ +

Editando apps

+ +

El editor de proyecto proporciona un entorno para edición de apps. Hay una visión en arbol a la izquierda con todos los archivos en la app: puedes añadir y borrar archivos usando un menú contextual. Hay un panel de editor a la derecha.

+ +

La página sumario de la app

+ +

Cuando por primera vez abra una app, el panel del editor estará ocupado por la página sumario de la app, mostrada debajo:

+ +

+ +

Puede volver siempre a la página de sumario de la app clicando en la raíz del árbol en la izquierda.

+ +

Validación del manifiesto

+ +

WebIDE automáticamente comprueba el manifiesto por algunos problemas comunes. Si encuentra algún problema, indicará que la app es inválida, y describirá el problema en el sumario de la app.

+ +

+ +

Por supuesto, puede editar el archivo manifest.webapp directamente en el editor de proyecto.

+ +

El editor fuente

+ +

WebIDE usa el editor fuente CodeMirror.

+ +

Atajos de teclado del editor fuente

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Autocompletado de código

+ +

Cuando se edite CSS y JavaScript, el editor proporciona sugerencias de autocompletado. El autocompletado en CSS está siempre habilitado:

+ +

Para mostrar las sugerencias de autocompletado en JavaScript, pulse Control + Espacio:

+ +

+ +

Documentación en línea

+ +

El editor también muestra documentación en línea para JavaScript. Pulsa Shift + Espacio para ver un popup con el contenido de la documentación para el símbolo en el que su cursor está sobrevolando:

+ +

+ +

Clicando el link [docs] en el popup le llevará a la página MDN para el símbolo.

+ +

Guardando archivos

+ +

Para que los cambios en sus archivos tengan efecto necesitas guardarlos. Los archivos no guardaddos tendrán un asterisco junto a su nombre en la vista de árbol, y podrá guardarlos usando el menú o con Control+S (Command+S en Mac OS X).

+ +

Borrando proyectos

+ +

Para borrar una app del WebIDE, vaya a la págnia de sumario de la app y clique "Remove Project" (Borrar Proyecto).

+ +

Ejecutando y depurando apps

+ +

Cuando esté preparado para ejecutar la app, necesitará seleccionar un runtime del menú desplegable "Select Runtime". Si no tiene ningún runtime disponible, compruebe cómo se añaden algunos runtimes en Configurando runtimes.

+ +

El botón "play" en el centro de la bara de herramientas de WebIDE está habilitado ahora: clique para instalar y ejecutar la app en el runtime seleccionado:

+ +

Para depurar la app, da click en el botón de Pausa y las herramientas de la Toolbox de Desarrollador aparecerá, conectada a su app:

+ +

Exactamente, cuáles tools herramientas tiene disponibles depende del runtime, pero tendrá al menos las básicas:  Inspector, Console, JavaScript Debugger, Style Editor, Profiler y Scratchpad. Tal como en una página web, algunos cambios que haga con las herramientas son visibles inmediatamente en la app, pero no son permanentes. Al contrario, algunos cambios que haga en el panel de editor pane pueden ser grabados como respaldo definitivo del disco, pero no son visibles sin reiniciar la app.

+ +

Depurando apps certificadas

+ +

Con el Simulador, si le das click en el menu desplegable de la aplicación mientras el tiempo de ejecucion esta seleccionado , puedes ver y depurar no solo tu aplicacion, sino todas las que esten corriendo en tiempo de ejecucion, incluidas las apps certificadas:

+ +

+ +


+ Pero, para depurar certified apps en un dispositivo real:

+ + + +

Para habilitar la depuración certified app, conéctese al proceso runtime, y entonces, en el menú, vaya a Runtime > Runtime Info. Desde allí, si ve "DevTools restricted privileges: yes", esto significa que las certified apps no pueden ser depuradas. La ruta entonces difiere dependiendo de que depuración usted enfreta:

+ + + +

Ahora (o después del reinicio de B2G desktop client) en WebIDE podrá ver todas las certified apps del dispositivo.

+ +

Monitoriando desempeño

+ +

Si le intereza la ejecución de sus apps, hay maneras de medir su impacto en la ejecución runtime en WebIDE:

+ + + +

Corrección de problemas

+ +

Si tiene algunos problemas trabajando con WebIDE, vea la página Troubleshooting.

+ +

 

+ +

 

diff --git a/files/es/tools/webide/monitor/index.html b/files/es/tools/webide/monitor/index.html new file mode 100644 index 0000000000..c48c5a8d06 --- /dev/null +++ b/files/es/tools/webide/monitor/index.html @@ -0,0 +1,158 @@ +--- +title: Monitor +slug: Tools/WebIDE/Monitor +translation_of: Archive/WebIDE/Monitor +--- +
+

El WebIDE Monitor es una herramienta de datos de propósito general diseñada para ayudar a controlar el desempeño de las aplicaciones y dispositivos Firefox OS.

+
+ +

The WebIDE Monitor

+ +

El Monitor es capaz de mostrar gráficos interactivos en tiempo real para visualizar series de tiempo.

+ +

Gráficos disponibles

+ +

El Monitor viene con algunos gráficos diferentes. Ellos se muestran usualmente una vez que el WebIDE es conectado a un Firefox OS runtime.

+ +

Selección de medida única

+ +

Unique Set Size

+ +

Este gráfico muestra el footprint de la memoria de todos los procesos de Firefox OS a través del tiempo. Si quieres saber el consumo de memoria de una app de Firefox OS, lanzalo y podrás ver la memoria privada usada por el proceso.

+ +

Mostrando tus propios datos

+ +

Es relativamente fácil mostrar cualquier tipo de dato en el Monitor, porque acepta actualizaciones de forma-libre desde muchos orígenes diferentes.

+ +

Desde un dispositivo Firefox OS

+ +

Es posible enviar datos desde un dispositivo conectado enviando notificaciones de observación.

+ +

Nota: Si quieres hacer esto en una  aplicación certificada, por favor sigue las siguientes instrucciones.

+ +

JavaScript

+ +

Services.obs.notifyObservers(null, 'devtools-monitor-update', data);

+ +

Puedes enviar datos desde cualquier código Javascript con privilegios de chrome. Aqui hay un ejemplo completo midiendo el run time de un codigo en Javascript:

+ +

const Services = require('Services');
+
+ var start = Date.now();
+ // code to benchmark
+ var stop = Date.now();
+
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop };
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));

+ +

C++

+ +

observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);

+ +

Puedes enviar datos desde cualquier parte en Gecko. Aqui hay un ejemplo completo midiendo el run time de un codigo:

+ +

#include <time.h>
+ #include "nsPrintfCString.h"
+ #include "nsIObserverService.h"
+
+ clock_t start = clock();
+ // code to benchmark
+ clock_t stop = clock();
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);
+
+ nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();
+ if (observerService) {
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);
+   observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());
+ }

+ +

Desde el computador

+ +

Puedes facilmente enviar datos al Monitor sobre un servidor WebSocket. Esto puede ser útil si estás escribiendo una extensión para Firefox, una herramienta de línea de comandos o un servicio web..

+ +

Por defecto, el Monitor busca un servidor corriendo en el puerto 9000 de tu computador. Puedes cambiar esto actualizando las preferencias en devtools.webide.monitorWebSocketURL.

+ +

Incluso puedes hacer que acepte datos desde tu red local, o desde cualquier parte de Internet.

+ +

Node.js

+ +

TODO

+ +

Python

+ +

TODO

+ +

Formatos soportados

+ +

El Monitor acepta datos en formato de objetos JSON que generalmente lucen similares a esto:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "value": 42,
+   "time": 1234567890
+ }

+ +

Ese formato está destinado a ser muy flexible. Si no existe un gráfico o curva especificada , se creará automáticamente.

+ +

Nombres arbitrarios

+ +

Las entradas no reconocidas serán consideradas como curvas de nombre y valor.

+ +

El paquete de datos más pequeño que puedes enviar es algo como:

+ +

{ "myCurve": 42 }

+ +

Esto añadirá un punto de datos para "myCurve" en un gráfico sin nombre. El tiempo faltante será por defecto cuando el monitor recibe el paquete .

+ +

Para mayor precisión, es probablemente mejor especificar un timestamp para tus datos:

+ +

{
+   "current": 60,
+   "voltage": 500,
+   "time": 1234567890
+ }

+ +

Multiples variables

+ +

En una simple actualización, puedes enviar datos para multiples curvas:

+ +

{
+   "graph": "myGraph",
+   "myCurve1": 50,
+   "myCurve2": 300,
+   "myCurve3": 9000,
+   "time": 1234567890
+ }

+ +

O varios puntos de datos para una sola curva:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "values": [
+     { "time": 1234567890, "value": 42 },
+     { "time": 1234567981, "value": 51 }
+   ]
+ }

+ +

Múltiples actualizaciones

+ +

Y también puedes enviar multiples actualizaciones de datos en forma de un Array:

+ +

[
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
+ ]

+ +

Eventos puntuales

+ +

Para marcar eventos especiales en un gráfico con una barra vertical, agrega una clave event a tu actualización:

+ +

{
+   "graph": "myGraph",
+   "event": "myEvent",
+   "time": 1234567980
+ }

diff --git a/files/es/tools/webide/troubleshooting/index.html b/files/es/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..73d94afd9a --- /dev/null +++ b/files/es/tools/webide/troubleshooting/index.html @@ -0,0 +1,50 @@ +--- +title: Resolución de problemas con WebIDE +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +

Conectando un dispositivo Firefox OS

+

Si estas intentando conectar un dispositivo Firefox OS a WebIDE y no aparece, aquí hay una serie de cosas que puedes probar

+ +

Desarrollo limitado (incluyendo aplicaciones certificadas, aplicaciones incorporadas, aplicaciones ya instaladas en un dispositivo)

+

Si no puedes desarrollar aplicaciones certificadas, aplicaciones incorporadas, o aplicaciones instaladas en un dispositivo real, entonces puede que estés siendo restringido sobre la política de seguridad de privilegios de WebIDE's . Para mas información, acceda a la sección Desarrolo no restringido de aplicaciones (incluyendo aplicaciones certificadas, procesos principales, etc.).

+

Conectando a otros navegadores (Chrome, Safari)

+

WebIDE hace el uso de Valence (Adaptador Formal de Herramientas de Firefox ) para comunicarse con otros navegadores, como Chrome and Safari. 

+

Si esta teniendo problemas al conectarse a estos otros navegadores, revisa los pasos de configuración y otras anotaciones para estos navegadores en la página Valence.

+

Activando el log

+

También puedes activar el logging para recompilar información de diagnostico:

+
    +
  1. accede a about:config, y añade una nueva preferencia llamada .console.logLevel, con el valor de String all, y establece extensions.adbhelper@mozilla.org.debug a true
    2. +
  2. En el Add-ons Manager, desactiva y reactiva el add-on ADB Helper.
    3. +
  3. Abre la Consola del navegador y veras mensajes de consola con el prefijo adb. Si el mensaje no te dice nada, busca ayuda.
    4. +
+

Obtén ayuda

+

Accede a #devtools cuarto en IRC y nosotros te ayudaremos.

diff --git a/files/es/tools/working_with_iframes/index.html b/files/es/tools/working_with_iframes/index.html new file mode 100644 index 0000000000..5d88245288 --- /dev/null +++ b/files/es/tools/working_with_iframes/index.html @@ -0,0 +1,28 @@ +--- +title: Working with iframes +slug: Tools/Working_with_iframes +tags: + - Debuggear devtools herramientas +translation_of: Tools/Working_with_iframes +--- +
+

Esta funcionalidad es nueva en Firefox 34.

+
+ +

A partir de Firefox 34 en adelante, puedes apuntar las developer tools a un iframe específico dentro de un documento.

+ +

{{EmbedYouTube("Me9hjqd74m8")}}

+ +

Esta funcionalidad está desabilitada por defecto: para habilitarla, abre las developer tool settings y selectiona "Select an iframe as the currently targeted document":

+ +

Podrás ver un nuevo botón en la barra de herramientas:

+ +

Haz click en el y verás un popup con una lista de todos los iframes en el documento, además del documento principal.

+ +

+ +
+

Por el momento necesitarás recargar la página o cerrar y reabrir las developer tools para poder ver el popup. Este problema esta siendo sequido como bug 1062233.

+
+ +

Si selecionas una entrada en la lista, todas las herramientas en la barra de herramientas - el Inspector, la Console, el Debugger demás - apuntaran ahora al iframe selecionado y se comportaran como si el resto de la pagina no existiese.

diff --git a/files/es/traducir_las_descripciones_de_las_extensiones/index.html b/files/es/traducir_las_descripciones_de_las_extensiones/index.html new file mode 100644 index 0000000000..f2a85cff51 --- /dev/null +++ b/files/es/traducir_las_descripciones_de_las_extensiones/index.html @@ -0,0 +1,90 @@ +--- +title: Traducir las descripciones de las extensiones +slug: Traducir_las_descripciones_de_las_extensiones +tags: + - Complementos + - Localización + - Todas_las_Categorías + - extensiones +--- +

 

+

Localizing in Gecko 1.9

+

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

+

Gecko 1.9 incluye un nuevo y más robusto método para localizar descripciones añadidas y otros metadatos. Todas las diferentes descripciones aparecen ahora en el fichero install.rdf utilizando las propedades em:localized. Cada una contiene al menos una propiedad em:locale que marca el localizador (locale) para el cual deberá utilizarse la citada información y, además, todas las diversas cadenas (strings) del localizador. El siguiente ejemplo demuestra lo dicho (la mayoría de las propiedades normales del manifiesto han sido suprimidas para abreviar):

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>TabSidebar@blueprintit.co.uk</em:id>
+    <em:localized>
+      <Description>
+        <em:locale>de-DE</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description>
+      </Description>
+    </em:localized>
+    <em:localized>
+      <Description>
+        <em:locale>es-ES</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Muestra una vista previa de sus pestañas en su panel lateral.</em:description>
+      </Description>
+    </em:localized>
+    <em:localized>
+      <Description>
+        <em:locale>nl-NL</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.</em:description>
+      </Description>
+    </em:localized>
+    <em:name>Tab Sidebar</em:name>
+    <em:description>Displays previews of your tabs in your sidebar.</em:description>
+  </Description>
+</RDF>
+
+

Todos los metadatos mencionados más abajo pueden localizarse mediante este procedimiento. La información de localización "por defecto" proporcionada por la propiedad em:localized, puede ser pasada por alto utilizando un conjunto de preferencias de localización, según se detalla a continuación.

+

El proceso para seleccionar la propiedad em:localized a utilizar para una determinada localización (locale) es el siguiente:

+
    +
  1. Si existe una propiedad con un identificador em:locale que se corresponde exactamente con la localización (locale) entonces se usará esa propiedad.
    2. +
  2. Si se encuentran comparaciones inexactas, entonces se utilizará aquella que tenga el máximo de partes coincidentes, estando dichas partes separadas entre sí por un guión (es decir, "es" coincidiría con "es-ES" y viceversa).
    3. +
  3. Si existe más de un localizador (locale) con el mismo número de partes coincidentes, entonces se utilizará el más general (es decir, "en" será preferente en "en-GB" cuando se busque, antes que "en-US").
    4. +
+

En primer lugar se mostrará la localización actual "en-GB" y posteriormente se mostrará la segunda localización correspondiente a "en-US".

+

Si no se ha establecido ninguna preferencia y no se encuentra una coindidencia em:localized property para la localización actual "en-GB" o "en-US" entonces se utilizarán las propiedades especificadas directamente en el manifiesto de instalación, como último recurso, tal y como se utilizaban en las versiones anteriores a la versión Gecko 1.9.

+

Localizar antes de Gecko 1.9

+

Antes de Gecko 1.9, los desarrolladores de extensiones o aplicaciones añadidas (add-ons) tenían que seguir un procedimiento especial para definir las descripciones adicionales locales para las aplicaciones añadidas orientadas a las aplicaciones basadas en el juego de herraminetas "toolkit" original (tales como Firefox o Thunderbird).

+ +

Cadenas Localizables

+

Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden ser localizados utilizando este proceso:

+ +

Listas Localizables

+

En los casos en que puedan existir múltiples valores, se añade un índice numérico al final del nombre de cada preferencia:

+
extensions.EXTENSION_ID.contributor.1=FIRST_LOCALIZED_CONTRIBUTOR_NAME
+extensions.EXTENSION_ID.contributor.2=SECOND_LOCALIZED_CONTRIBUTOR_NAME
+extensions.EXTENSION_ID.contributor.3=THRID_LOCALIZED_CONTRIBUTOR_NAME
+
+pref("extensions.EXTENSION_ID.contributor.1", "PATH_TO_LOCALIZATION_FILE");
+pref("extensions.EXTENSION_ID.contributor.2", "PATH_TO_LOCALIZATION_FILE");
+pref("extensions.EXTENSION_ID.contributor.3", "PATH_TO_LOCALIZATION_FILE");
+
+

Los siguientes "metadatos" de las extensiones o aplicaciones añadidas (add-ons) pueden localizarse utilizando este proceso:

+ diff --git "a/files/es/traducir_una_extensi\303\263n/index.html" "b/files/es/traducir_una_extensi\303\263n/index.html" new file mode 100644 index 0000000000..7c5c33627a --- /dev/null +++ "b/files/es/traducir_una_extensi\303\263n/index.html" @@ -0,0 +1,161 @@ +--- +title: Traducir una extensión +slug: Traducir_una_extensión +tags: + - Complementos + - Localización + - Todas_las_Categorías + - extensiones +--- +

{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}

+ +

Este artículo está construido sobre los anteriores ejemplos de programación de extensiones añadiendo soporte para traducción a nuestra extensión. Realizando unos pocos y simples pasos se conseguirá hacer la extensión mucho más fácil de traducir en varios idiomas sin tener que editar los ficheros XUL o JavaScript.

+ +

Si aún no has creado ninguna extensión o te gustaría refrescar la memoria, echa un vistazo a los anteriores artículos de la serie:

+ + + +

Descargar el ejemplo

+ +

Puedes descargar el código de ejemplo de este artículo para poder compararlo o para usarlo como base para tu propia extensión.

+ +

http://developer.mozilla.org/samples/extension-samples/localizedstockwatcher.zip

+ +

Traducir cadenas en los ficheros XUL

+ +

Crear los ficheros de configuración regional necesarios

+ +

Cada fichero XUL que comprende la interfaz de usuario de tu extensión debería tener un fichero local en su directorio locale.

+ +

Cada fichero locale mapea los nombres de las entidades referenciadas en los ficheros XUL a las mismas cadenas. El diálogo de preferencias, cuyo fichero XUL es options.xul, tiene un fichero options.dtd correspondiente con este aspecto:

+ +
 <!ENTITY options_window_title "StockWatcher 2 Preferences">
+ <!ENTITY options_symbol.label "Stock to watch: ">
+
+ +

La entidad "options_window_title" está mapeada a la cadena "StockWatcher 2 Preferences", la cual es usada como título de la ventana de preferencias.

+ +

El fichero stockwatcher2.dtd contiene el mapa para el fichero stockwatcher2.xul:

+ +
 <!ENTITY panel_loading "Loading...">
+ <!ENTITY menu_refresh_now.label "Refresh Now">
+ <!ENTITY menu_apple.label "Apple (AAPL)">
+ <!ENTITY menu_google.label "Google (GOOG)">
+ <!ENTITY menu_microsoft.label "Microsoft (MSFT)">
+ <!ENTITY menu_yahoo.label "Yahoo (YHOO)">
+
+ +

Actualizar los ficheros XUL

+ +

Cada fichero XUL necesita referenciar su correspondiente fichero de configuración regional. Además necesitamos actualizar el código para utilizar entidades en lugar de cadenas, por lo que las sustituciones tomarán lugar basándose en la configuración regional actualmente activa.

+ +

Para añadir una referencia al fichero de configuración regional correcto dado un fichero XUL necesitamos añadir una línea al fichero XUL. Para options.xul añadimos esta línea:

+ +
 <!DOCTYPE window SYSTEM "chrome://stockwatcher2/locale/options.dtd">
+
+ +

Añadimos una línea similar al fichero stockwatcher.xul:

+ +
 <!DOCTYPE overlay SYSTEM "chrome://stockwatcher2/locale/stockwatcher2.dtd">
+
+ +

En aplicaciones mayores podrías necesitar utilizar entidades de diversos ficheros de configuración regional en un único fichero XUL. Utilizar múltiples DTDs explica cómo hacer esto.

+ +

Date cuenta de que las URLs de los ficheros DTD no incluyen realmente el nombre del idioma a utilizar. el registro chrome resuelve los URIs basándose en la configuración regional actual y los datos que proporcionas en tu manifiesto chrome.

+ +

Luego simplemente reemplazaremos cada cadena de texto en nuestros ficheros XUL con la correspondiente entidad. Por ejemplo, en stockwatcher2.xul cambiamos la línea:

+ +
 <menuitem label="Refresh Now" oncommand="StockWatcher.refreshInformation()"/>
+
+ +

por

+ +
 <menuitem label="&menu_refresh_now.label;" oncommand="StockWatcher.refreshInformation()"/>
+
+ +

Haremos esto para cada cadena utilizada en cada fichero XUL.

+ +

Actualizar el manifiesto chrome

+ +

Para que Firefox conozca los ficheros de configuración regional necesitamos revisar nuestro fichero |chrome.manifest, añadiendo una línea por cada idioma.

+ +
 locale stockwatcher2 en-US chrome/locale/en-US/
+
+ +

Esto le dice a Firefox que el idioma en-US está ubicado en el directorio chrome/locale/en-US.

+ +

Traducir cadenas en el código JavaScript

+ +

Si tu código JavaScript contiene cadenas literales que necesitan ser traducidas, como hace nuestro ejemplo visualizador de stocks, también necesitaremos hacerlo traducible. Podemos hacer esto moviendo las cadenas a un conjunto. Los conjuntos de cadenas son creados mediante el establecimiento de un fichero de propiedades que mapea claves a valores de cadena. Para una explicación detallada de cómo funciona esto, lee Tutorial XUL:Ficheros de propiedades.

+ +

Crear un fichero de propiedades

+ +

Lo primero que hacemos es crear un fichero de propiedades para los literales usados por el código JavaScript en stockwatcher2.js:

+ +
changeString=Chg:
+openString=Open:
+lowString=Low:
+highString=High:
+volumeString=Vol:
+
+ +

El fichero stockwatcher2.properties mostrado anteriormente mapea cinco claves (changeString, openString, lowString, highString, y volumeString) a su correspondiente texto en inglés.

+ +

Crear un conjunto de cadenas

+ +

El siguiente paso es modificar el fichero stockwatcher2.xul para referenciar este fichero de propiedades. Haremos esto creando un conjunto de cadenas utilizando el siguiente código:

+ +
 <stringbundleset id="stringbundleset">
+   <stringbundle id="string-bundle" src="chrome://stockwatcher2/locale/stockw...er2.properties"/>
+ </stringbundleset>
+
+ +

Esto establece un nuevo conjunto de cadenas, referenciados por el ID "string-bundle", cuyas claves y valores han de ser cargados desde el fichero stockwatcher2.properties que ya habíamos creado.

+ +

Actualizando el código JavaScript

+ +

Ahora estamos listos para revisar el código JavaScript para cargar las cadenas desde el conjunto de cadenas en lugar de utilizar literales. Esto implica la reescritura de la función refreshInformation() para cargar las cadenas y su función interna infoReceived() para utilizar las cadenas cargadas y traducidas en lugar de literales.

+ +

Añadimos a refreshInformation() el siguiente código:

+ +
 var stringsBundle = document.getElementById("string-bundle");
+ var changeString = stringsBundle.getString('changeString') + " ";
+ var openString = stringsBundle.getString('openString') + " ";
+ var lowString = stringsBundle.getString('lowString') + " ";
+ var highString = stringsBundle.getString('highString') + " ";
+ var volumeString = stringsBundle.getString('volumeString') + " ";
+
+ +

Este código obtiene una referencia al elemento conjunto de cadenas que hemos añadido a stockwatcher2.xul llamando a document.getElementById(), especificando el ID "string-bundle". Luego recupera todas las cadenas que necesitamos desde el conjunto, una a una, llamando al método del conjunto de cadenas getString(), pasando la clave apropiada para cada cadena.

+ +

En este caso, también añadimos un espacio al final de cada cadena. Hacemos esto porque este programa funciona así en particular y no tienes porqué hacerlo siempre.

+ +

Luego reemplazamos toda ocurrencia de las cadenas literales con las variables apropiadas:

+ +
 samplePanel.tooltipText = changeString + fieldArray[4] + " | " +
+     openString + fieldArray[5] + " | " +
+     lowString + fieldArray[6] + " | " +
+     highString + fieldArray[7] + " | " +
+     volumeString + fieldArray[8];
+
+ +

Traducir la descripción en install.rdf

+ +

Mira Traducir descripciones de extensiones.

+ +

Añadir más traducciones

+ +

Para añadir otra traducción a un nuevo idioma, todo lo que necesitas hacer es añadir otra línea al manifiesto chrome referenciando la nueva configuración regional. Por ejemplo, para añadir una traducción al español deberías añadir:

+ +
 locale stockwatcher2 es-ES chrome/locale/es-ES/
+
+ +

Luego sólo hay que crear un subdirectorio chrome/locale/es-ES y añadir los ficheros DTD necesarios; en este caso options.dtd y stockwatcher2.dtd. Dichos ficheros deberían mapear las mismas etiquetas para la traducción al español de las cadenas utilizadas por la extensión.

+ +

Del mismo modo, si tenemos algún fichero de propiedades que contenga cadenas traducidas para nuestro código JavaScript también necesitaremos crear versiones de configuración regional para aquellos ficheros de propiedades en el directorio chrome/locale/es-ES. Sólo las cadenas deberían ser traducidas; las claves deberían ser las mismas para cada traducción.

+ +

{{PreviousNext("Añadir preferencias a una extensión", "Actualizar una extensión para que soporte múltiples aplicaciones de Mozilla")}}

diff --git a/files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html b/files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html new file mode 100644 index 0000000000..b8bc2e4cf9 --- /dev/null +++ b/files/es/trazado_de_una_tabla_html_mediante_javascript_y_la_interface_dom/index.html @@ -0,0 +1,337 @@ +--- +title: Trazado de una tabla HTML mediante JavaScript y la Interface DOM +slug: Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +--- +

Introducción

+ +

Este artículo es un resumen de algunos métodos DOM nivel 1 poderosos y fundamentales así como una descripción de cómo utilizarlos utilizando Javascript.  Aprenderás a crear, accesar, controlar, y remover elementos HTML dinámicamente.  Los métodos DOM presentados aquí no son específicos de HTML; también aplican para XML. Las demostraciones aquí proporcionadas funcionarán en cualquier navegador moderno, incluyendo todas las versiones de Firefox e IE 5+.

+ +
Los métodos DOM presentados aquí forman parte del Modelo de Documento basado en Objetos (DOM: Document Object Model por sus siglas en inglés) de especificación nivel 1.  DOM nivel 1 incluye métodos tanto para acceso genérico del documento (DOM 1 Core) así como métodos específicos para documentos HTML (DOM 1 HTML).
+ +

Ejemplo: Crear una tabla HTML dinámicamente (Ejemplo1.html)

+ +

Contenido HTML

+ +
<input type="button" value="Genera una tabla" onclick="genera_tabla()">
+
+ +

JavaScript Content

+ +
function genera_tabla() {
+  // Obtener la referencia del elemento body
+  var body = document.getElementsByTagName("body")[0];
+
+  // Crea un elemento <table> y un elemento <tbody>
+  var tabla   = document.createElement("table");
+  var tblBody = document.createElement("tbody");
+
+  // Crea las celdas
+  for (var i = 0; i < 2; i++) {
+    // Crea las hileras de la tabla
+    var hilera = document.createElement("tr");
+
+    for (var j = 0; j < 2; j++) {
+      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
+      // texto sea el contenido de <td>, ubica el elemento <td> al final
+      // de la hilera de la tabla
+      var celda = document.createElement("td");
+      var textoCelda = document.createTextNode("celda en la hilera "+i+", columna "+j);
+      celda.appendChild(textoCelda);
+      hilera.appendChild(celda);
+    }
+
+    // agrega la hilera al final de la tabla (al final del elemento tblbody)
+    tblBody.appendChild(hilera);
+  }
+
+  // posiciona el <tbody> debajo del elemento <table>
+  tabla.appendChild(tblBody);
+  // appends <table> into <body>
+  body.appendChild(tabla);
+  // modifica el atributo "border" de la tabla y lo fija a "2";
+  tabla.setAttribute("border", "2");
+}
+ +

{{ EmbedLiveSample('Overview_of_Sample1.html') }}

+ +

Observa cuidadosamente el orden en el que se crearon los elementos en el nodo de texto:

+ +
    +
  1. Primero se crea el elemento <table>.
    2. +
  2. Posteriormente, creamos el elemento <tbody> , que es el hijo del elemento <table> .
    3. +
  3. Después, utilizamos ciclos para crear los elementos <tr>, que son hijos del elemento <tbody>.
    4. +
  4. Para cada elemento <tr>, utilizamos nuevamente ciclos para generar los elementos <td> que son hijos de los elementos <tr>.
    5. +
  5. Para cada elemento <td>, creamos nodos de texto con el contenido de cada celda.
    6. +
+ +

Una vez creados los elementos <table>, <tbody>, <tr>, y <td> así como los nodos de texto, adicionamos a cada hijo bajo su padre en el órden opuesto:

+ +
    +
  1. Primero, anexamos cada nodo de texto a su elemento padre <td> : + 
    celda.appendChild(textoCelda);
    +
    2. +
  2. Posteriormente, anexamos cada elemento <td> a su elemento padre <tr> : + 
    hilera.appendChild(celda);
    +
    3. +
  3. Posteriomente, anexamos cada elemento <tr> a su elemento padre <tbody>: + 
    tblBody.appendChild(hilera);
    +
    4. +
  4. Después, anexamos el elemento <tbody> a su elemento padre <table>: + 
    tabla.appendChild(tblBody);
    +
    5. +
  5. Finalmente, anexamos el elemento <table> a su elemento padre <body>: + 
    body.appendChild(tabla);
    +
    6. +
+ +

Recuérda esta técnica. Te será muy útil en la programación bajo el estándar W3C DOM. Primero, creas los elementos de arriba a abajo; posteriormente adicionas los hijos a los padres de abajo a arriba.

+ +

A continuación aparece el código HTML generado por el código JavaScript:

+ +
...
+<table border="2">
+    <tbody>
+        <tr><td>celda en la hilera 0, columna 0</td><td>celda en la hilera 0, columna 1</td></tr>
+        <tr><td>celda en la hilera 1, columna 0</td><td>celda en la hilera 1, columna 1</td></tr>
+    </tbody>
+</table>
+...
+
+ +

Aquí está el árbol de objetos DOM generado por el código del elemento <TABLE> :

+ +

Image:sample1-tabledom.jpg

+ +

Tú puedes construir esta tabla y sus elementos internos utilizando sólo algunos de los varios métodos del DOM. Recuerda tener en mente el modelo de la estructura que planeas crear; esto hará mucho más fácil la escritura del código necesario.

+ +

En el árbol del elemento <table> de la Figura 1, el elemento <table> tiene solamente un hijo mientras que <tbody> tiene dos.  A su vez, cada hijo de <tbody> tiene dos hijos. Finalmente, cada elemento <td> tiene sólo uno, el nodo de texto.

+ +

Ejemplo: Configuración del color de fondo de un párrafo

+ +

getElementsByTagName(tagNameValue) es un método disponible en cualquier elemento DOM o el elemento raíz del documento. Cuando se le llama, devolverá una matriz con todos los descendientes de elementos que coincidan con el nombre de la etiqueta. El primer elemento de la lista se encuentra en la posición [0] de la matriz.

+ +

HTML Content

+ +
<body>
+  <input type="button" value="Set paragraph background color" onclick="set_background()">
+  <p>hi</p>
+  <p>hello</p>
+</body>
+ +

JavaScript Content

+ +
function set_background() {
+  // get a list of all the body elements (there will only be one),
+  // and then select the zeroth (or first) such element
+  myBody = document.getElementsByTagName("body")[0];
+
+  // now, get all the p elements that are descendants of the body
+  myBodyElements = myBody.getElementsByTagName("p");
+
+  // get the second item of the list of p elements
+  myP = myBodyElements[1];
+  myP.style.background = "rgb(255,0,0)";
+}
+ +

{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}

+ +

En este ejemplo, establecemos la variable myP en el objeto DOM para el segundo elementop dentro del body:

+ +
    +
  1. Primero, obtendremos una lista de todos los elementos body mediante + 
    myBody = document.getElementsByTagName("body")[0]
    + Como en cualquier documento HTML sólo hay un elemento body válido, esta lista tendrá sólo un elemento, que recuperamos seleccionando el primer elemento de esa lista usando {{mediawiki.external(0)}}.
    2. +
  2. Luego, obtenemos todos los elementos p que son descendientes del body mediante + 
    myBodyElements = myBody.getElementsByTagName("p");
    +
    3. +
  3. Finalmente, obtenemos el segundo item de la lista de elementos p mediante + 
    myP = myBodyElements[1];
    +
    4. +
+ +

Image:sample2a2.jpg

+ +

Una vez que haya obtenido el objeto DOM para un elemento HTML, puede establecer sus propiedades. Por ejemplo, si desea establecer la propiedad estilo de color de fondo, agregue:

+ +
myP.style.background = "rgb(255,0,0)";
+// setting inline STYLE attribute
+
+ +

Creating TextNodes with document.createTextNode("..")

+ +

Use the document object to invoke the createTextNode method and create your text node. You just need to pass the text content. The return value is an object that represents the text node.

+ +
myTextNode = document.createTextNode("world");
+
+ +

This means that you have created a node of the type TEXT_NODE (a piece of text) whose text data is "world", and myTextNode is your reference to this node object. To insert this text into your HTML page, you need to make this text node a child of some other node element.

+ +

Inserting Elements with appendChild(..)

+ +

So, by calling myP.appendChild({{mediawiki.external('node_element')}}), you are making the element a new child of the second <p> element.

+ +
myP.appendChild(myTextNode);
+
+ +

After testing this sample, note that the words hello and world are together: helloworld. So visually, when you see the HTML page it seems like the two text nodes hello and world are a single node, but remember that in the document model, there are two nodes. The second node is a new node of type TEXT_NODE, and it is the second child of the second <p> tag. The following figure shows the recently created Text Node object inside the document tree.

+ +

Image:sample2b2.jpg

+ +
createTextNode and appendChild is a simple way to include white space between the words hello and world. Another important note is that the appendChild method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world you will need to use insertBefore instead of appendChild.
+ +

Creating New Elements with the document object and the createElement(..) method

+ +

You can create new HTML elements or any other element you want with createElement. For example, if you want to create a new <p> element as a child of the <body> element, you can use the myBody in the previous example and append a new element node. To create a node simply call document.createElement("tagname"). For example:

+ +
myNewPTAGnode = document.createElement("p");
+myBody.appendChild(myNewPTAGnode);
+
+ +

Image:sample2c.jpg

+ +

Removing nodes with the removeChild(..) method

+ +

Nodes can be removed. The following code removes text node myTextNode (containing the word "world") from the second <p> element, myP.

+ +
myP.removeChild(myTextNode);
+
+ +

Text node myTextNode (containing the word "world") still exists. The following code attaches myTextNode to the recently created <p> element, myNewPTAGnode.

+ +
myNewPTAGnode.appendChild(myTextNode);
+
+ +

The final state for the modified object tree looks like this:

+ +

Image:sample2d.jpg

+ +

Creating a table dynamically (back to Sample1.html)

+ +

For the rest of this article we will continue working with sample1.html. The following figure shows the table object tree structure for the table created in the sample.

+ +

Reviewing the HTML Table structure

+ +

Image:sample1-tabledom.jpg

+ +

Creating element nodes and inserting them into the document tree

+ +

The basic steps to create the table in sample1.html are:

+ + + +
At the end of the start function there is a new line of code. The table's border property was set using another DOM method, setAttribute. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.
+ +
<head>
+<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
+<script>
+    function start() {
+        // get the reference for the body
+        var mybody = document.getElementsByTagName("body")[0];
+
+        // creates <table> and <tbody> elements
+        mytable     = document.createElement("table");
+        mytablebody = document.createElement("tbody");
+
+        // creating all cells
+        for(var j = 0; j < 2; j++) {
+            // creates a <tr> element
+            mycurrent_row = document.createElement("tr");
+
+            for(var i = 0; i < 2; i++) {
+                // creates a <td> element
+                mycurrent_cell = document.createElement("td");
+                // creates a Text Node
+                currenttext = document.createTextNode("cell is row " + j + ", column " + i);
+                // appends the Text Node we created into the cell <td>
+                mycurrent_cell.appendChild(currenttext);
+                // appends the cell <td> into the row <tr>
+                mycurrent_row.appendChild(mycurrent_cell);
+            }
+            // appends the row <tr> into <tbody>
+            mytablebody.appendChild(mycurrent_row);
+        }
+
+        // appends <tbody> into <table>
+        mytable.appendChild(mytablebody);
+        // appends <table> into <body>
+        mybody.appendChild(mytable);
+        // sets the border attribute of mytable to 2;
+        mytable.setAttribute("border","2");
+    }
+</script>
+</head>
+<body onload="start()">
+</body>
+</html>
+ +

Manipulating the table with DOM and CSS

+ +

Getting a text node from the table

+ +

This example introduces two new DOM attributes. First it uses the childNodes attribute to get the list of child nodes of mycel. The childNodes list includes all child nodes, regardless of what their name or type is. Like getElementsByTagName(), it returns a list of nodes. The differences are that (a) getElementsByTagName() only returns elements of the specified tag name; and (b) getElementsByTagName() returns descendants at any level, not just immediate children. Once you have the returned list, use {{mediawiki.external('x')}} method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table. Then, to display the results in this example, it creates a new text node whose content is the data of myceltext and appends it as a child of the <body> element.

+ +
If your object is a text node, you can use the data attribute and retrieve the text content of the node.
+ +
mybody      = document.getElementsByTagName("body")[0];
+mytable     = mybody.getElementsByTagName("table")[0];
+mytablebody = mytable.getElementsByTagName("tbody")[0];
+myrow       = mytablebody.getElementsByTagName("tr")[1];
+mycel       = myrow.getElementsByTagName("td")[1];
+
+// first item element of the childNodes list of mycel
+myceltext=mycel.childNodes[0];
+
+// content of currenttext is the data content of myceltext
+currenttext=document.createTextNode(myceltext.data);
+mybody.appendChild(currenttext);
+
+ +

Getting an attribute value

+ +

At the end of sample1 there is a call to setAttribute on the mytable object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the getAttribute method:

+ +
mytable.getAttribute("border");
+
+ +

Hiding a column by changing style properties

+ +

Once you have the object in your JavaScript variable, you can set style properties directly. The following code is a modified version of sample1.html in which each cell of the second column is hidden and each cell of the first column is changed to have a red background. Note that the style property was set directly.

+ +
<html>
+<body onload="start()">
+</body>
+<script>
+    function start() {
+       var mybody =document.getElementsByTagName("body")[0];
+       mytable     = document.createElement("table");
+       mytablebody = document.createElement("tbody");
+
+       for(var j = 0; j < 2; j++) {
+           mycurrent_row=document.createElement("tr");
+           for(var i = 0; i < 2; i++) {
+               mycurrent_cell = document.createElement("td");
+               currenttext = document.createTextNode("cell is:" + i + j);
+               mycurrent_cell.appendChild(currenttext);
+               mycurrent_row.appendChild(mycurrent_cell);
+               // set the cell background color
+               // if the column is 0. If the column is 1 hide the cel
+               if (i == 0) {
+                   mycurrent_cell.style.background = "rgb(255,0,0)";
+               } else {
+                   mycurrent_cell.style.display = "none";
+               }
+           }
+           mytablebody.appendChild(mycurrent_row);
+       }
+       mytable.appendChild(mytablebody);
+       mybody.appendChild(mytable);
+    }
+</script>
+</html>
+
diff --git a/files/es/usando_archivos_desde_aplicaciones_web/index.html b/files/es/usando_archivos_desde_aplicaciones_web/index.html new file mode 100644 index 0000000000..a3f0c8546e --- /dev/null +++ b/files/es/usando_archivos_desde_aplicaciones_web/index.html @@ -0,0 +1,377 @@ +--- +title: Usando archivos desde aplicaciones web +slug: Usando_archivos_desde_aplicaciones_web +tags: + - Archivos + - HTML5 + - para_revisar + - páginas_a_traducir +--- +

{{ gecko_minversion_header("1.9.2") }}

+ +

 

+ +

Al usar la API de Archivos agregada al DOM en HTML5, ahora es posible que el contenido de una página web solicite al usuario que elija un archivo local para luego leer el contenido de esos archivos. Esta selección puede hacerse tanto usando un elemento input de HTML o arrastrando y soltando el archivo.

+ +

 Seleccionar archivos usando HTML

+ +

 Seleccionar un solo archivo para usar con la API de archivo es simple:

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+
+ +

Cuando el usuario selecciona un archivo, se  llama a la función handleFiles()  con un objeto FileList que contiene el objeto File representando el archivo seleccionado por el usuario.

+ +

Si desea permitir al usuario seleccionar varios archivos, simplemente use el atributo multiple en el elemento input:

+ +
<input type="file" id="input" multiple="true" onchange="handleFiles(this.files)">
+
+ +

En este caso, la lista de archivos se pasa a la función handleFiles()contiene un objeto File por cada archivo que el usuario ha seleccionado.

+ +

{{ h2_gecko_minversion("Uso de elementos ocultos del archivo de entrada usando el método click() ", "2.0") }}

+ +

Desde la versión 2.0 de Gecko {{ geckoRelease("2.0") }}, puedes esconder el elemento file {{ HTMLElement("input") }} y mostrar una interfaz propia para abrir el examinador de archivos y para mostrar que archivo o archivos ha seleccionado el usuario. Puedes hacerlo agregándole al estilo del elemento input la instrucción "display:none" y usando el método click() en el elemento {{ HTMLElement("input") }}.

+ +

Considere este código HTML:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+
+ +

Tu método doClick() puede verse como esto:

+ +
var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+ +

Obiamente puedes darle estilo al nuevo botón para abrir el selector de archivos como desees.

+ +

Dinámica de la adición de un detector de cambio

+ +

 Si tu campo de entrada fue creado con una librería de JavaScript como jQuery, necesitarás usar {{ domxref("element.addEventListener()") }} para agregar un manejador de eventos de cambio, como este:

+ +
var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  var fileList = this.files;
+
+  /* now you can work with the file list */
+}
+
+ +

 Nota que en este caso, la función handleFiles() busca la lista de archivos en lugar de aceptar un parámetro, ya que los detectores de eventos añadidos de esta manera no pueden aceptar un parámetro de entrada.

+ +

 

+ +

{{ h1_gecko_minversion("Usando Objetos URL", "2.0") }}

+ +

Gecko 2.0 {{ geckoRelease("2.0") }} introduce asistencia para el DOM {{ domxref("window.URL.createObjectURL()") }} y los métodos {{ domxref("window.URL.revokeObjectURL()") }} Esto te permite crear URLs simples para ser usadas como referencia a cualquier dato que pueda ser referenciado usando un objeto DOM File, incluyendo archivos locales en el computador del usuario.

+ +

Cuando tienes un objeto File te gustaría hacer referencia por URL desde HTML, puedes crear un objeto URL para que quede así :

+ +
var objectURL = window.URL.createObjectURL(fileObj);
+
+ +

El objeto URL es una cadena de caracteres que identifica el objeto File . Cada vez que invocas {{ domxref("window.URL.createObjectURL()") }}, un único objeto URL es creado, incluso, si usted ya ha creado un objeto URL de ese archivo. Cada uno de estos debe ser liberado. Mientras se liberan automáticamente cuando se libera la memoria utilizada por el documento, sí tu página los usa dinámicamente, podrías liberarlos explicitamente invocando {{ domxref("window.URL.revokeObjectURL()") }}:

+ +
window.URL.revokeObjectURL(objectURL);
+
+ +

Selección de archivos usando arrastrar y soltar

+ +

 También puedes dejar que el usuario arrastre y suelte los archivos en la aplicación Web.

+ +

El primer paso es establecer una zona para soltar. Exactamente que parte de tu contenido aceptara soltar puede variar dependiendo de el diseño de tu aplicación, pero hacer un elemento que reciba eventos de soltar es fácil:

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

 En este ejemplo, estamos girando el elemento con el ID "dropbox" en nuestra zona para soltar. Esto se hace mediante la adicción de manejadores que escuchen los eventos dragenter, dragover, y drop.

+ +

En realidad no necesitamos hacer nada con los eventos dragenter and dragover en nuestro caso, por lo que estas funciones son a la vez simples. Acabar de detener la propagación del evento y evitar que la acción predeterminada ocurra:

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

La verdadera magia pasa en la función drop():

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Aquí, recuperamos  el campo dataTransfer del evento, a continuación tomamos la lista de archivos fuera de él, que pasa para handleFiles(). Desde este punto, el manejo de los archivos es el mismo si el usuario utiliza el elemento de entrada o arrastrar y soltar. Obteniendo información de los archivos seleccionados.

+ +

El objeto  FileList proporcionado por el DOM de las listas de todos los archivos seleccionados por el usuario, cada una se especifica como un objeto File. Tu puedes determinar cuantos archivos el usuario selecciona, al verificar el valor del atributo length:

+ +
var numFiles = files.length;
+
+ +

Individualmente los objetos File pueden ser recuperados simplemente accediendo a la lista como una matriz:

+ +
for (var i = 0; i < files.length; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

 Este bucle se repite en todos los archivos de la lista de archivos.

+ +

Hay tres atributos proporcionados por el objeto File que contienen información útil sobre el archivo.

+ +
+
name
+
El nombre de archivo como cadena de sólo lectura. Esto es sólo el nombre de el archivo y no incluye ninguna información de la ruta.
+
size
+
El tamaño del  archivo en bytes como de solo lectura entero de 64 bits.
+
type
+
El tipo MIME de el archivo como una cadena de sólo lectura, o "" si el tipo no puede ser determinado.
+
+ +

Ejemplo: Mostrando miniaturas de las imágenes seleccionadas por el usuario

+ +

Digamos que estás desarrollando el próximo gran sitio web para compartir fotos,y deseas usar HTML5 para mostrar vistas previas en miniaturas de las imágenes antes de que el usuario realmente suba los archivos. Simplemente basta con establecer el elemento de entrada o de soltar como se indicó anteriormente, y llamar una función, como la función handleFiles() de abajo.

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    var imageType = /image.*/;
+
+    if (!file.type.match(imageType)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img);
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Aquí nuestro bucle maneja los archivos seleccionados por el usuario buscando en cada tipo de atributo del archivo para ver si es un archivo imagen (Buscando coincidencias con la cadena de expresión regular "image.*"). Por cada archivo de tipo imagen, creamos un nuevo elemento img. El CSS puede ser usado para crear bordes, sombras y/o especificar el tamaño de la imagen, por lo cual no es necesario hacerlo aquí.

+ +

Cada imagen tiene añadida la clase CSS "obj", para que sean fáciles de encontrar en el árbol DOM. También vamos a añadir un archivo atributo a cada imagen especificando el archivo de la imagen, o que nos permitirá buscar las imágenes para en realidad subirlas mas tarde. Por último se utilizamos {{ domxref("Node.appendChild()") }} para agregar la nueva miniatura para el área de previsualización de nuestro documento.

+ +

A continuación, se establece  FileReader para manejar de forma asincrónica la  carga de la  imagen y lo conecta con el elemento img.Después se crea  el  nuevo objeto FileReader, hemos creado la función load, a continuación llamamos readAsDataURL() para empezar la operación de lectura de fondo. cuando todo el contenido del archivo de imagen se carga, se convierten en una  data: URL, cada uno se pasa por  onload callback. Nuestra implementación de esta rutina se limita a establecer el atributo src del elemento img de la imagen cargada, lo que resulta en la imagen que aparece en la miniatura en la pantalla del usuario.

+ +

{{ h1_gecko_minversion("Ejemplo: Usar URL objeto para mostrar imágenes", "2.0") }}

+ +

En este ejemplo se utiliza el objeto URL para mostrar miniaturas de las imágenes. Además, se muestra la información de otro archivo con su nonbre y tamaño. Tu puedes ver el ejemplo vivo (nota se requiere  versión nocturna (nightly build) de Firefox del 22 de noviembre o posterior, o Firefox 4.0 beta 8).

+ +
Nota: Esta API existía en versiones beta de Firefox 4, pero cambio el 22 de noviembre, ¡así que asegúrate que estas en una versión actual!
+ +

Escuchar
+ traducción del inglés al español
+ El código HTML que presenta la interfaz se parece a esto:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Select some files</a>
+<div id="fileList">
+  <p>¡No se han seleccionado archivos!</p>
+</div>
+
+ +

Este establece nuestro archivo {{ HTMLElement("input") }} elemento, así como un enlace que invoca el selector de archivos , ya que mantener la entrada de archivo oculto para para evitar que lo menos atractivo de la interfaz sea mostrado. Esto se explica más arriba en la sección  {{ anch("Using hidden file input elements using the click() method") }}, como es el método doClick() que invoca el selector de archivos.

+ +

El método siguiente handleFiles():

+ +
var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem"),
+  fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // evitar la navegación a "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "<p>¡No se han seleccionado archivos!</p>";
+  }
+  else {
+    var list = document.createElement("ul");
+    for (var i = 0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);;
+      img.height = 60;
+      img.onload = function () {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+    fileList.appendChild(list);
+  }
+}
+
+ +

Esto comienza por ir a buscar el {{ HTMLElement("div") }} con el ID "fileList". Este es el bloque en el que vamos a insertar la lista de archivos, incluyendo vistas en miniaturas.

+ +

Si el  objeto {{ domxref("FileList") }} handleFiles() es null, se establece dentro del código HTML interno del bloque para que no aparezca "¡No se han seleccionado archivos!". De lo contrario, empezamos a contruir nuestra lista de archivos, de la siguiente manera:

+ +

Una nueva lista desordenada elemento ({{ HTMLElement("ul") }} es creada.

+ +
    +
  1. La nueva lista de elementos se inserta en el bloque  {{ HTMLElement("div") }} llamando a este método {{ domxref("element.appendChild()") }}.
    2. +
  2. Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado por files: +
      +
    1. Crear un nuevo elemento de la lista ({{ HTMLElement("li") }}) y se inserta en la lista.
      2. +
    2. Crear un nuevo elemento imagen ({{ HTMLElement("img") }}).
      3. +
    3. Ajuste de la imagen de origen a un nuevo objeto URL representando el archivo, usando {{ domxref("window.URL.createObjectURL()") }} para crear la blob URL.
      4. +
    4. Ajuste la altura de la imagen a 60 píxeles.
      5. +
    5. Establecer el manejador de el evento de carga de imagen para liberar el objeto URL, Set up the image's load event handler to release the object URL, puesto que ya no se necesita una vez que la imagen se ha cargado. esto se hace llamando a el método {{ domxref("window.URL.revokeObjectURL()") }} , pasando en el objeto URL la cadena como lo especifica img.src.
      6. +
    6. Anexar el nuevo elemento lista a la lista.
      7. +
    +
    3. +
+ +

Ejemplo: Cargando archivos seleccionado por el usuario (user-selected file)

+ +

Otra cosa que tu podrías querer hacer es permitir al usuario cargar  un archivo o archivos seleccionados (por ejemplo, las imagenes seleccionadas con el ejemplo previo) a un servidor. Esto puede hacerse asincrónicamente muy facil.

+ +

Creando las tareas de carga

+ +

Continuando con el código que genera las imágenes en miniatura en el ejemplo anterior, recordemos que cada imagen en la clase CSS "obj", con el correspondiente File adjunto en el atributo de el archivo. Esto nos permite fácilmente seleccionar todas las imagenes que el usuario ha escogido para ser cargadas con {{ domxref("Document.querySelectorAll()") }}, así:

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

En la linea 2 se crea una matriz, llamada imgs, de todos los elemtos in el documento con la clase CSS "obj". en nuestro caso, estas serán todas las miniaturas de las imágenes.Una vez que obtenemos esa lista, es trivial pasar por la lista, creando una nueva instancia FileUpload para cada uno. Cada uno de estos manejadores de carga el archivo correspondiente.

+ +

Manejadores de procesos de carga de un archivo

+ +

La función FileUpload acepta dos entradas: un elemento imagen y un archivo desde donde se leerán  los datos de la imagen

+ +
function FileUpload(img, file) {
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  xhr.sendAsBinary(file.getAsBinary());
+}
+
+ +

La función FileUpload() muestra arriba crear un throbber, cada uno es usado para mostrar la información de progreso, a continuación se crea un XMLHttpRequest para manejar la carga de los datos.

+ +

Antes de transferir los datos actualmente, varios pasos preparatorios se tienen:

+ +
    +
  1. El XMLHttpRequest's upload "progress" listener esta configurado para actualizar la información Throbber con nuevo porcentaje, de modo que a medida que avanza la carga, el Throbber sera actualizado basado en la ultima información.
    2. +
  2. El XMLHttpRequest's upload "load" manejador de evento esta configurado para actualizar como un 100% como la información de progreso (para garantizar que el indicador de progreso realmente alcanza el 100%, en caso de peculiaridades y granulidades durante el proceso). A continuación se elimina el thobber, puesto que este no es necesario. Esto hace que el Thobber desaparezca una vez que la carga esta completa.
    3. +
  3. La solicitud de carga de imagen se abre llamando el método XMLHttpRequest's open() para empezar a generar la POST solicitud.
    4. +
  4. El tipo MIME para la carga esta configurada para llamar la función XMLHttpRequest function overrideMimeType(). En este caso, estamos usando un tipo MIME  genérico; puede o no ser necesario para configurar el tipo MIME para todo, dependiendo de su caso de uso.
    5. +
  5. Finalmente la función XMLHttpRequest sendAsBinary() es llamada para cargar el contenido de el archivo. Esto necesita ser revisado; en la actualidad esta obsoleto la rutina para extraer datos desde archivos getAsBinary() síncrona.
    6. +
+ +

Manejando el proceso de carga para un archivo, asíncronicamente

+ +
function fileUpload(file) {
+  // Please report improvements to: marco.buratto at tiscali.it
+
+  var fileName = file.name,
+    fileSize = file.size,
+    fileData = file.getAsBinary(), // works on TEXT data ONLY.
+    boundary = "xxxxxxxxx",
+    uri = "serverLogic.php",
+    xhr = new XMLHttpRequest();
+
+  xhr.open("POST", uri, true);
+  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
+  xhr.setRequestHeader("Content-Length", fileSize);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {
+
+        if (xhr.responseText != "") {
+          alert(xhr.responseText); // display response.
+        }
+      }
+    }
+  }
+
+  var body = "--" + boundary + "\r\n";
+  body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
+  body += "Content-Type: application/octet-stream\r\n\r\n";
+  body += fileData + "\r\n";
+  body += "--" + boundary + "--";
+
+  xhr.send(body);
+  return true;
+}
+
+ +

Esto también necesita ser modificado para trabajar con datos binarios.

+ +

Vea también

+ + diff --git "a/files/es/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" "b/files/es/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" new file mode 100644 index 0000000000..5cb8795395 --- /dev/null +++ "b/files/es/usar_c\303\263digo_de_mozilla_en_otros_proyectos/index.html" @@ -0,0 +1,15 @@ +--- +title: Usando código de Mozilla en otros proyectos +slug: Usar_código_de_Mozilla_en_otros_proyectos +tags: + - para_revisar + - páginas_a_traducir +--- +

Hay varias maneras en las que puede usar código de Mozilla en su propio proyecto.

+ + +

Construyendo aplicaciones XUL

La alegria XUL
La introducción a XUL; una lectura necesaria para los nuevos desarrolladores.
XUL Referencia
La referencia completa a XUL.
XULRunner
Un paquete runtime que puede ser utilizado para arrancar aplicaciones XUL y XPCOM con facilidad.
Mozilla Toolkit
Información acerca de la API Mozilla Toolkit.

Usando componentes Mozilla

SpiderMonkey
SpiderMonkey es el motor JavaScript runtime utilizado por proyectos de Mozilla.
NSPR
El Netscape Portable Runtime proporciona una API de plataforma-neutal para nivel de sistema y funciones libc-type.
Necko
La librería de red Mozilla proporciona la funcionalidad multi-plataforma de redes.
+

Embeber Mozilla

+

Para información sobre embeber un buscador web en su propio proyecto vea Embeber Mozilla.

+

{{ languages( { "ja": "ja/Using_Mozilla_code_in_other_projects", "zh-cn": "cn/Using_Mozilla_code_in_other_projects"} ) }}

diff --git a/files/es/usar_web_workers/index.html b/files/es/usar_web_workers/index.html new file mode 100644 index 0000000000..0dacf19312 --- /dev/null +++ b/files/es/usar_web_workers/index.html @@ -0,0 +1,260 @@ +--- +title: Usar web workers +slug: Usar_web_workers +tags: + - Firefox 3.5 + - Gecko 1.9.1 + - HTML5 + - JavaScript + - Workers + - para_revisar +--- +

{{ gecko_minversion_header ("1.9.2") }}

+

Workers constituye un medio sencillo para que el contenido web ejecute secuencias de comandos en subprocesos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea de generación mediante la publicación de mensajes en un controlador de eventos especificado por el creador.

+

El subproceso del worker puede realizar tareas sin interferir con la interfaz de usuario.  Además, pueden realizar E / S utilizando XMLHttpRequest (aunque los atributos responseXML y channel siempre son nulos).

+
+ Nota: como de costumbre, los subprocesos en segundo plano, incluyendo los workers, no pueden manipular el DOM.  Si las acciones adoptadas por el subproceso en segundo plano tienen que dar lugar a cambios en el DOM, deben enviar mensajes a sus creadores para hacer ese trabajo.
+

Consulta el documento de referencia Worker , al que este artículo complementa ofreciendo ejemplos y añadiendo detalles. Para obtener una lista de funciones disponibles para workers, consulta Funciones disponibles para workers .

+

Acerca de la seguridad en los subprocesos

+

La interfaz Worker genera subprocesos a nivel del sistema operativo y la simultaneidad puede producir efectos interesantes en el código si no tienes cuidado. Sin embargo, en el caso de web workers, los puntos de comunicación controlados cuidadosamente con otros subprocesos supone que en realidad sea muy difícil causar problemas de simultaneidad.  No hay acceso a componentes sin subprocesos seguros o al DOM y tienes que pasar datos específicos dentro y fuera de un subproceso a través de objetos serializados.  Así que te tienes que esforzar mucho para causar problemas en el código.

+

Generar un worker

+

Crear un nuevo worker es simple.  Lo único que tienes que hacer es llamar al constructor Worker(), especificando el URI de un script para ejecutar en el subproceso del worker y, si deseas poder recibir las notificaciones del worker, establece la propiedad onmessage del worker a una función de manejador de evento adecuada.

+
var myWorker = new Worker('my_worker.js');
+myWorker.onmessage = function(event) {
+  print("Llamado de nuevo por el worker\n");
+};
+

De forma alternativa, podemos usar addEventListener():

+
var worker = new Worker('my_worker.js');
+worker.addEventListener('message', function(event) {
+ console.log("Called back by the worker!\n");
+}, false);
+
+worker.postMessage(""); // Iniciar el worker.
+
+

La línea 1 de este ejemplo crea e inicia el subproceso del worker. La línea 2 establece el controlador onmessage para el worker a una función que se llama cuando éste pide su propia función postMessage().

+
+ Nota: La URI pasada como parámetro del constructor del Worker debe obedecer la política del mismo origen o same-origin policy. Actualmente hay un desacuerdo en los diferentes desarrolladores de navegadores acerca de si las URIs han de ser del mismo origen o no; Gecko 10.0 {{ geckoRelease("10.0") }} y posteriores permiten cualquier URI como script válido para workers, otros navegadores pueden no permitirlo.
+

Generar subworkers

+

Los workers pueden generar más workers si así lo desean.  Los llamados subworkers deben estar alojados en el mismo origen que la página principal.  Además, los URI para los subworkers se resuelven en relación a la ubicación del worker principal y no en relación a la de la página propietaria.  Esto hace que sea más fácil que los workers realicen un seguimiento de dónde están sus dependencias.

+

Tiempos de espera e intervalos

+

Los workers pueden utilizar los tiempos de espera y los intervalos al igual que el proceso principal.  Esto puede ser útil, por ejemplo, si quieres hacer que tu subproceso del worker ejecute código de manera periódica en lugar de ininterrumpidamente.

+

Consulta setTimeout(), clearTimeout(), setInterval() y clearInterval() si deseas tener más detalles.

+

Terminar un worker

+

Si tienes que cancelar inmediatamente un worker que se está ejecutando, puedes hacerlo llamando al método terminate() del worker:

+
myWorker.terminate();
+
+

El subproceso del worker se interrumpe inmediatamente y sin tener la posibilidad de terminar sus operaciones o limpiar por sí mismo.

+

Los workers pueden cerrarse llamando a su propio método {{ ifmethod("nsIWorkerScope", "close") }}.

+

Gestión de errores

+

Cuando se produce un error de ejecución en el worker, es llamado su controlador de enventos onerror.  Recibe un evento denominado error que implementa la interfaz ErrorEvent.  El evento no se lanza y se puede cancelar, para evitar que la acción predeterminada tenga lugar, el worker puede llamar al método preventDefault() del evento de error.

+

El evento de error tiene los siguientes tres campos que son de interés:

+
+
+ message
+
+ Un mensaje de error legible para el ojo humano.
+
+ filename
+
+ El nombre del archivo de script en el que se produjo el error.
+
+ lineno
+
+ El número de línea del archivo de script en el que se produjo el error.
+
+

Acceder al objeto navegador

+

Los workers pueden acceder al objeto navigator, que está disponible dentro de su ámbito.  Contiene las siguientes cadenas de texto que pueden usarse para identificar el navegador, tal y como se puede hacer a partir de secuencias de comandos normales:

+ +

Importar de secuencias de comandos y bibliotecas

+

Los subprocesos de trabajo tienen acceso a una función global, importScripts (), que les permite importar secuencias de comandos de comandos o bibliotecas dentro de su ámbito.  Acepta como parámetros cero o más URI de recursos para la importación, todos los ejemplos siguientes son válidos:

+
importScripts();                        /* no importa nada */
+importScripts('foo.js');                /* importa solo "foo.js" */
+importScripts('foo.js', 'bar.js');      /* importa dos scripts */
+
+

Firefox carga cada secuencia de comandos de la lista, luego los ejecuta para permitirles que se inicialicen ellos mismos.  Los objetos globales de cada secuencia de comandos pueden entonces ser utilizados por el worker.

+
+ Nota: los scripts pueden ser descargados en cualquier orden, pero no se ejecutarán en el orden en que pasas los nombres de archivo a importScripts() .  Esto se realiza de forma sincrónica; importScripts() no retorna hasta que todas las secuencias de comandos se han cargado y ejecutado.
+

 

+

Ejemplos

+

Esta sección incluye varios ejemplos de cómo utilizar los DOM workers.

+

Realizar cálculos en segundo plano

+

Una utilidad de los workers es permitir que tu código realice cálculos intensivos en el procesador sin bloquear el subproceso de interfaz de usuario.  En este ejemplo, un worker se utiliza para calcular los números de Fibonacci.

+

El código JavaScript

+
var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i <= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };
+

La función onmessage es llamada cuando el código HTML llamada al postMessage() en el worker.  Esto inicia la recursividad, generando copias nuevas de sí mismo para controlar cada iteración del cálculo.

+

El código HTML

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<html>
+  <title>Test threads fibonacci</title>
+  <body>
+
+  <div id="result"></div>
+
+  <script language="javascript">
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  </script>
+  </body>
+</html>
+
+

La página web crea un elemento div con el id. de cliente result , que se utiliza para mostrar el resultado, a continuación, genera el worker.  Tras generar el worker, el manejadoronmessage está configurado para mostrar los resultados mediante el ajuste de los contenidos del elemento div, y el manejador onerror se establece para volcar el mensaje de error.

+

Por último, se envía un mensaje al worker para iniciarlo.

+

Prueba este ejemplo .

+

Realizar E / S de web en segundo plano

+

Puedes encontrar un ejemplo de esto en el artículo Usar  workers en las extensiones .

+

Dividir tareas entre varios workers

+

A medida que los equipos con varios núcleos se hacen cada vez más frecuentes, resulta útil dividir las tareas  complejas, desde el punto de vista computacional, entre varios workers, que a su vez pueden llevar a cabo esas tareas en núcleos de procesador múltiple.

+

el ejemplo se incluirá muy pronto

+

Crear workers desde dentro de los workers

+

El ejemplo de Fibonacci mostrado anteriormente demuestra que los workers pueden, de hecho, generar más workers.  Esto facilita crear rutinas repetitivas.

+

Enviar objetos a los workers

+

Puede pasar con seguridad los objetos dentro y fuera de los workers que utilizan el método postMessage(), los objetos se convierten automáticamente en JSON de manera interna.

+
var onmessage = function(e) {
+  postMessage(e.data);
+};
+
+ Nota: los objetos que se introducen o se extraer de los workers no deben contener funciones o referencias cíclicas, ya que JSON no es compatible con ellas.
+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Workers dedicados33.5 (1.9.1)1010.604
Workers compartidos5------10.605
Pasar datos usando clonación estructurada. 1381011.505.1
Pasar datos usando objetos transferibles17 {{ property_prefix("webkit") }}------------
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Workers dedicados---0.16------115
Workers compartidos---{{ CompatNo() }}------------
Pasar datos usando clonación estructurada. ---0.16------------
+
+

Consulta también

+ +

{{ HTML5ArticleTOC() }}

+

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

diff --git a/files/es/usar_xpinstall_para_instalar_plugins/index.html b/files/es/usar_xpinstall_para_instalar_plugins/index.html new file mode 100644 index 0000000000..260a29a8e5 --- /dev/null +++ b/files/es/usar_xpinstall_para_instalar_plugins/index.html @@ -0,0 +1,236 @@ +--- +title: Usar XPInstall para instalar plugins +slug: Usar_XPInstall_para_instalar_plugins +tags: + - Plugins + - Todas_las_Categorías + - XPInstall +--- +

+

XPInstall es una tecnología de instalación basada en JavaScript que funciona en todas las plataformas en las que pueden instalarse los navegadores de Mozilla y los de Netscape basados en Mozilla. Puede ser un modo para asegurarle al usuario una plácida experiencia a la hora de obtener plugins, sin obligarlo a abandonar el entorno de navegación para ejecutar un instalador binario (el típico setup.exe en Windows) ni forzarlo a reiniciar su navegador. Los fabricantes de plugins que ya hayan escrito un instalador en código nativo (p.e., EXE) pueden incluir dicho instalador y ejecutarlo para que el usuario no tenga que abandonar el entorno del navegador y hacer clic en el EXE para ejecutarlo. Este artículo muestra una guía de estilo para mejorar la experiencia en la instalación de un plugin para los navegadores de Netscape Gecko utilizando XPInstall. +

+

Definición de términos

+

XPInstall es una tecnología de instalación. El propio nombre significa "Cross Platform Install" (instalador multiplataforma) y de ahí lo de "XP" (abreviatura en inglés de "multiplataforma"). Un paquete XPInstall es generalmente llamado un paquete XPI para abreviar (y pronunciado generalmente "zippy" en inglés). Este artículo explica cómo se puede usar XPInstall para instalar plugin en los navegadores que soporten XPInstall. +

Un paquete XPI es de hecho un fichero ZIP con la extensión XPI (p.e., myPluginInstaller.xip) y puede ser creado en Windows con utilidades tipo WinZip. Los paquetes XPI, como los ficheros ZIP, contienen otros ficheros, normalmente: +

+ +

Un fichero XPInstall se puede crear empaquetando primero los elementos que se quieran instalar con WinZip (es decir, crear un fichero ZIP) y renombrarlo con la extensión XPI en lugar de ZIP. +

A diferencia de los instaladores compilados para código nativo (p.e., los típicos ficheros setup.exe), el lenguaje de programación para las operaciones de instalación en XPI es JavaScript. Como el formato de fichero que contiene al software y al fichero JavaScript install.js es multiplataforma (Zip) y ya que los navegadores de Mozilla para todas las plataformas reconocen JavaScript, generalmente un único paquete XPI sirve para todas las plataformas. Así es, de hecho, cómo las pieles y los temas son instalados en los navegadores de Mozilla, cambiando su aspecto y apariencia. Este artículo se centra en cómo instalar plugins. +

+

¿Qué navegadores soportan XPInstall?

+

Actualmente, todos los navegadores de Mozilla liberados por mozilla.org y la familia de navegadores basados en el código de Mozilla soportan XPInstall. Concretamente, están incluidos: +

+ + +

Advertencias: +

+ + +

¿En qué consiste un plugin?

+

Los plugins pueden estar compuestos de los siguientes tipos de fichero, pudiendo ser todos ellos instalados desde un paquete XPI: +

+ + + +

XPInstall puede ser utilizado para instalar cualquier combinación de estos ficheros en el ordenador del usuario final. Para aquellos que les suene la tecnología SmartUpdate de Netscape Communicator 4.x, esto les resultará familiar. +

+

Breve historia de las tecnologías de instalación de Netscape

+

Esta sección es importante si estás familiarizado con la tecnología de instalación SmartUpdate de Netscape Communicator 4.x. El uso de JavaScript como lógica de instalación no tiene precedentes en los navegadores de Netscape. Netscape Communicator 4.x utilizaba la noción de SmartUpdate para instalar el software, concretamente los plugins y los applets de Java para que fuesen ejecutados localmente. SmartUpdate no está soportado por los navegadores de Mozilla (ni los navegadores de Netscape/AOL basados en Mozilla tales como Netscape 7) pero debido a la similitud entre ambas tecnologías de instalación, es fácil convertir los ficheros SmartUpdate a ficheros XPInstall. SmartUpdate utiliza un fichero JAR firmado digitalmente que contiene los componentes de software a instalar además del fichero JavaScript install.js (el llamado script de instalación) como lógica del instalador. Las descargas y los instaladores deberían empezar mostrando un cuadro de diálogo de seguridad que aclarase la autoridad certificadora y el firmante. Frecuentemente, la descarga SmartUpdate era disparada a través del atributo pluginurl de la etiqueta <embed>. +

+
<embed type="application/x-randomtype" src="myfile.typ" width="50" height="50"
+pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed>
+
+

En el ejemplo anterior, el atributo pluginurl referencia a un fichero firmado JAR, el cual sería descargado por Netscape Communicator 4.x (dependiendo de la elección en el cuadro de diálogo de seguridad) si el plugin no estuviera instalado en la máquina del usuario. SmartUpdate difiere de XPInstall en esto: +

+ +

XPInstall para los navegadores basados en Mozilla es análogo a SmartUpdate en el navegador Netscape Communicator 4.x. Portar SmartUpdate a XPInstall es trivial tras haberse familiarizado con la nueva API de XPInstall. +

+

Proceso de instalación recomendado

+

XPInstall suministra una API unificada para llevar a cabo una rápida instalación y configuración del software del plugin para los usuarios finales. Los beneficios de usar XPInstall son porporcionar un mecanismo de instalación para descargas en flujo. Esta sección explica lo que tendría que hacer un paquete XPInstall ideal, además de descubrir algunas de las llamadas API de JavaScript que llevan a cabo estas tareas. Un paquete XPI ideal debería: +

+
  1. Instalarse en el navegador actual que ha llamado a la instalación XPInstall vía HTML o que la ha ejecutado a través de un script. Usaremos el término "navegador actual" para referirnos al navegador que inicia la descarga del XPInstall visitando un sitio que requiere un plugin que el navegador actual no encuentra localmente. Este paso implica el uso de la llamada a la API initInstall para inicializarlo todo y además la llamada getFolder que ayuda a encontrar el directorio de plugins del navegador actual. +
  2. Instalar el software del plugin en otra ubicación del disco duro del usuario para que otros navegadores basados en Mozilla que el usuario pudiese instalar más tarde encontrasen y pudieran utilizar el plugin (los componentes específicos del navegador). La meta es asegurar que futuros navegadores Netscape Gecko que pudieran ser instalados más adelante puedan beneficiarse de la instalación iniciada por el usuario con el navegador actual. Un ejemplo lo tenemos si el navegador actual fuese Netscape 7 y más adelante el usuario descargase una beta del software de AOL que usase Netscape Gecko. En lugar de descargar de nuevo el plugin con el otro navegador, éste podría detectar que ya se llevó a cabo la instalación. Este mecanismo de descubrimiento necesita que la creación de la localización secundaria quede reflejada en algún repositorio común de metadatos. En Windows es el registro del sistema. De nuevo, este paso implica llamadas a getFolder para localizar un directorio "bien conocido" y usarlo como localización secundaria. +
  3. En Windows: escribir claves de registro que pudiesen ser analizadas por los navegadores Netscape Gecko (instalados tras el navegador actual) para detectar dónde está instalado el plugin en el ordenador. En particular, las claves de registro deberían referenciar a la localización de instalación secundaria para que los futuros navegadores Netscape Gecko pudiesen encontrar y añadir su lista de ubicaciones de plugins disponibles. El formato exacto de dichas claves y cómo deberían ser escritas es tratado en la sección #Problemas con la primera instalación. Para crear y escribir realmente claves en el registro de sistema de Windows se debe usar las funciones del objeto WinReg. +
  4. Asegurar que el plugin recién instalado es actualizado correctamente llamando a la API refreshPlugins. Actualizando el plugin, te estarás asegurando de que el plugin está disponible para uso inmediato, sin obligar al usuario a reiniciar su navegador. Esta es una de las ventajas clave de una experiencia con XPInstall depurada. +
+

El problema de la primera instalación

+

El problema de la primera instalación hace referencia a los problemas que surgen cuando un plugin es instalado en el ordenador de un usuario antes de instalar un navegador. El proceso de instalación recomendado intenta resolver este problema instalando el plugin en una ubicación secundaria tras instalar el navegador actual. En pocas palabras, el problema de la primera instalación podría resumirse con la pregunta: ¿cómo puede un navegador instalado en el ordenador de un usuario después de que un plugin haya sido instalado previamente con el beneplácito del usuario desde una instalación existente en lugar de haber descargado el mismo plugin de nuevo? Para resolver este incoveniente, se aconseja a los vendedores a: +

+ +

Disección de las APIs utilizadas

+

El proceso recomendado de instalación de plugins hace uso de las APIs de XPInstall para instalarlos en el directorio Plugins del navegador actual, en una ubicación secundaria y para escribir una clave en el registro del sistema de Windows que permita recuperar esta última ubicación. Esta sección describe algunas de las APIs de XPInstall que pueden hacer esto y muestra además una plantilla completa de un paquete XPI. No todo el trabajo necesita ser hecho en JavaScript (si tienes un instalador nativo (EXE) que reconoce a los navegadores Netscape Gecko y simplemente deseas incluir el instalador ejecutable en un paquete XPI para que el usuario pueda descargarlo, puedes hacerlo fácilmente). Esta sección hace referencia de modo extensivo a la documentación API de XPInstall. +

+

Inicializar la instalación con el identificador del plugin

+

Toda instalación XPInstall es inicializada con el método initInstall del objeto Install. Ya que el objeto Install está disponible para el script de instalación no necesita ser mencionado en dicho script (p.e., no hay necesidad de utilizar Install.initInstall. Con invocar simplemente a initInstall será suficiente). El método initInstall es polimórfico aunque a continuación se muestra el mecanismo de invocación recomendado: +

+
initInstall("My Plugin Software", "@myplugin.com/MyPlugin,version=2.5", "2.5.0.0");
+
+

En el trozo de código anterior, el método initInstall es invocado con tres parámetros: +

+ +

Advertencia: Ciertas versiones de los navegadores basados en Mozilla (tales como Netscape 6.x) tratan al carácter igual ("=") como un token ilegal, por lo que no permitirán la invocación de initInstall con cadenas que contengan "=". Un truco podría ser detectar si initInstall ha fallado y, en caso afirmativo, invocarlo de nuevo sin el "=". A continuación se muestra un ejemplo: +

+
var PLID = "MyPlugin.plug/version=6.5";
+err = initInstall(SOFTWARE_NAME, PLID, VERSION);
+
+if (err != 0)
+{
+	// la instalación debería fallar: se usa N6 y =
+	// reemplazamos PLID con una cadena simple
+	err = initInstall(SOFTWARE_NAME, "MyPluginString", VERSION);
+	if (err != 0)
+		cancelInstall(err);
+}
+
+

Nótese que en el ejemplo anterior el PLID contiene un "=" y, en caso de que el paquete XPI esté siendo ejecutado en navegadores que tratan a "=" como un token ilegal, el truco capturará el error e invocará de nuevo a initInstall. +

+

Usar XPInstall junto con un instalador ejecutable (código nativo)

+

Si lo que deseas es ejecutar un instalador nativo (EXE) para instalar el software de un plugin pero prefieres que el instalador sea descargado dentro del proceso del navegador entonces probablemente deberías considerar incluirlo en un paquete XPI. Desde JavaScript, puedes llamar al método execute del objeto Install del XPInstall para ejecutar el binario. Además puedes llamar al método execute del objeto File si lo que realmente quieres instalar es el fichero que estás ejecutando en lugar de borrarlo. Puedes pasar parámetros de línea de comandos al ejecutable. Un ejemplo de llamada al método execute desde el objeto Install sobre un ejecutable que tiene un período de vida temporal (y no se necesita tras la instalación) es: +

+
// Initialize the installation ....
+
+// initInstall(..... ) has already been called
+
+// Using the Install Object's execute method to block on a native installer
+
+execute("setup.exe", "-s", true);
+
+// En el ejemplo anterior, se supone que se ha ejecutado "setup -s" desde
+// la línea de comandos que arranca el instalador y que "-s" es algún
+// tipo de parámetro definido por el fichero setup.exe, quizá para forzar
+// al instalador a ejecutarse en modo silencioso. Se pasa el "-s" al instalador.
+// Pasando 'true' le estamos diciendo al script de instalación que bloquee
+// la ejecución del instalador y que lo haga síncronamente.
+
+// Se debería llamar a performInstall para hacer que suceda...
+
+err = getLastError();
+if (!err)
+   performInstall();
+else
+  cancelInstall(err);
+
+

Instalar los ficheros del plugin en el navegador actual

+

La instalación en el navegador actual es la tarea más importante que debe de hacerse bien para un paquete XPI. A continuación se muestra un trozo de código que lleva a cabo esto: +

+
// Name of the files to be installed
+var PLUGIN_FILE    = "NPMyPlugin.dll";
+var COMPONENT_FILE = "NPMyPluginScriptablePeer.xpt";
+
+// invoke initInstall to start the installation
+
+....
+
+var pluginFolder = getFolder("Plugins");
+
+// verify disk space is appropriate
+
+....
+
+err = addFile("@myplugin.com/MyPlugin,version=2.5.0.0",
+                     "2.5.0.0", PLUGIN_FILE, pluginsFolder, null);
+    if (err != 0)
+    {
+	//alert("Installation of MyPlugin plug-in failed. Error code "+err);
+	logComment("adding file "+PLUGIN_FILE+" failed. Errror conde: " + err);
+	return err;
+    }
+
+err = addFile(null, CULT_VERSION, COMPONENT_FILE, componentsFolder, null);
+    if (err != 0)
+    {
+	alert("Installation of MyPlugin component failed. Error code "+err);
+	logComment("adding file "+COMPONENT_FILE+" failed. Error conde: " + err);
+	return err;
+    }
+
+

Instalación en una ubicación secundaria

+

Para solventar el problema de la primera instalación es necesario instalar en una segunda ubicación para asegurar que otros navegadores de Netscape Gecko puedan encontrar el plugin, además del navegador actual. Una buena elección para esta ubicación secundaria podría ser el directorio Windows en ordenadores con Windows. Advertencia: Debido a posibles problemas de permisos se aconseja manejar los errores con sumo cuidado. +

+
// Obtenemos el directorio de sistema de Windows, p.e., el directorio C:\WINNT\system32\
+
+var winDirectory = getFolder("Win System");
+
+// Create the Folder C:\WINNT\system32\MyPlugin
+
+var dllWin32Folder = getFolder("file:///", winDirectory+"\\MyPlugin\\");
+//Install DLL to C:\Windows Folder
+	copyErr = addFile("", VERSION, PLUGIN_FILE, dllWin32Folder, null);
+    if (copyErr != 0)
+    {
+    	logComment("First Install:"+copyErr);
+    	return copyErr;
+    }
+
+// Install the XPT file to C:\WINNT\system32\MyPlugin folder
+
+var xptWin32Folder = getFolder("file:///", winDirectory+"\\MyPlugin\\");
+	copyErr = addFile("", VERSION, COMPONENT_FILE, xptWin32Folder, null);
+    if (copyErr != 0)
+    {
+    	logComment("First Install:"+copyErr);
+    	return copyErr;
+    }
+
+

Una vez decidida la ubicación secundaria, el registro de windows ha de ser actualizado con la ruta de dicha ubicación para que futuros navegadores puedan recuperarla. Esto es realizado con el objeto WinReg proporcionado por XPInstall. Todas las piezas quedan ensambladas en la plantilla mostrada a continuación. +

+

Plantilla XPInstall

+

Se ha mostrado una plantilla para un script de instalación que quizá te gustaría abrir en otra pestaña o ventana. Dicho script de instalación hace lo siguiente: +

+ +

Es cierto que este secript se centra en Windows, pero es fácil portarlo a cualquier otra plataforma. Quizá esto sea todavía más fácil, ya que ni en Linux ni en Mac OSX hay que trabajar con la tediosa manipulación del registro de Windows. La API getFolder proporciona suficientes "golosinas sintácticas" como para determinar otras ubicaciones del ordenador del usuario en distintas plataformas y sistemas operativos. Un único install.js es casi siempre capaz de ejecutarse en muchas plataformas diferentes. +

+

Algunas notas sobre la instalación

+

Esta sección comprende algunas de las notas clave sobre el envío de paquetes XPI, en particular: ¿cómo puede ser iniciada la descarga de un plugin vía XPI? ¿Y qué pasa con la desinstalación de plugins? +

+

Ejecutar una descarga XPInstall con un script autoejecutable

+

Un script autoejecutable es un trozo de JavaScript de una página web que puede iniciar automáticamente una descarga XPInstall. Esto puede estar condicionado al hecho de que los scripts autodisparados pueden detectar además el software que ya está instalado en el ordenador del usuario a través de XPInstall. Esta opción es útil para los sitios web porque: +

+ +

Los scripts autoejecutables son la forma recomendada de iniciar las descargas XPInstall. +

+

Ejecutar una descarga XPInstall desde HTML

+

De manera análoga a como son inicializadas las descargas SmartUpdate por el atributo pluginurl de la etiqueta <embed>, las descargas XPInstall pueden ser también iniciadas por las etiquetas HTML que invocan a plugins, sobre todo a través del atributo codebase de la etiqueta <object>. Esto es análogo a cómo Internet Explorer descarga ficheros CAB referenciados por el atributo codebase de la etiqueta <object>. A continuación se muestra un ejemplo de una hipotética etiqueta <object> usada para invocar a MyPlugin (una aplicación imaginaria): +

+
	<object id="thePlugin" type="application/x-myplugin" width="100"
+	height="100" codebase="http://location/XPI/myplugin.xpi">
+
+<param .... >
+
+

En el caso anterior, el atributo codebase apunta directamente al paquete XPI y si el navegador no pudiese identificar ningún plugin para manejar el tipo MIME (imaginario) application/x-myplugin, entonces descargaría el paquete XPI. +

Nota: Los paquetes XPI (los ficheros con extensión xpi) utilizan el tipo MIME application/x-xpinstall. Al servir los paquetes XPI a los clientes desde el servidor, asegúrate de que los paquetes son servidos con este tipo MIME en las cabeceras HTTP. Asocia el tipo MIME application/x-xpinstall con los paquetes XPI. +

+

El problema de la desinstalación

+

En su versión actual, XPInstall no posee una tecnología de desinstalación. Ya que sólo puede ser usado para instalar ficheros o para servir de transporte a instaladores de código nativo para el cliente, sería una buena idea escribir un desinstalador de código nativo para el cliente, si es procedente. XPInstall puede por tanto ser un "agente de transporte" para llevar el software del ejecutable y con éste la lógica de instalación y desinstalación que será manejada por él, el cual puede crear ficheros y entradas de registro además de limpiarlo todo después de eliminarlo. +

+
+

Información original del documento

+ +
diff --git a/files/es/using_the_w3c_dom_level_1_core/index.html b/files/es/using_the_w3c_dom_level_1_core/index.html new file mode 100644 index 0000000000..6c5f14c025 --- /dev/null +++ b/files/es/using_the_w3c_dom_level_1_core/index.html @@ -0,0 +1,93 @@ +--- +title: Using the W3C DOM Level 1 Core +slug: Using_the_W3C_DOM_Level_1_Core +tags: + - DOM + - NeedsTranslation + - NeedsUpdate + - TopicStub +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +--- +

The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in all major browsers including Mozilla Firefox and Microsoft Internet Explorer. It is a powerful base for scripting on the web.

+ +

What is a content tree?

+ +

Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on whitespace in the DOM):

+ +
<html>
+<head>
+  <title>My Document</title>
+</head>
+<body>
+  <h1>Header</h1>
+  <p>Paragraph</p>
+</body>
+</html>
+
+ +

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

+ +

When Mozilla parses a document, it builds a content tree and then uses it to display the document.

+ +

The terms used to describe trees show up often in the DOM Level 1 Core. Each of the boxes I drew in the tree above is a node in the tree. The line above a node expresses a parent-child relationship: the node on top is the parent, and the node on the bottom is the child. Two children of the same parent are therefore siblings. Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.)

+ +

What does the DOM Level 1 Core let me do?

+ +

The W3C DOM Level 1 allows you to change the content tree any way you want. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the document property of the global object. This document object implements the Document interface from the W3C's DOM Level 1 spec.

+ +

A simple example

+ +

Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job:

+ +

HTML Content

+ +
<body>
+<input type="button" value="Change this document." onclick="change()">
+<h2>Header</h2>
+<p>Paragraph</p>
+</body>
+
+ +

JavaScript Content

+ +
  function change() {
+    // document.getElementsByTagName("H2") returns a NodeList of the <h2>
+    // elements in the document, and the first is number 0:
+
+    var header = document.getElementsByTagName("H2").item(0);
+    // the firstChild of the header is a Text node:
+    header.firstChild.data = "A dynamic document";
+    // now the header is "A dynamic document".
+
+    var para = document.getElementsByTagName("P").item(0);
+    para.firstChild.data = "This is the first paragraph.";
+
+    // create a new Text node for the second paragraph
+    var newText = document.createTextNode("This is the second paragraph.");
+    // create a new Element to be the second paragraph
+    var newElement = document.createElement("P");
+    // put the text in the paragraph
+    newElement.appendChild(newText);
+    // and put the paragraph on the end of the document by appending it to
+    // the BODY (which is the parent of para)
+    para.parentNode.appendChild(newElement);
+  }
+ +

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

+ +

You can see this script as a complete example.

+ +

How can I learn more?

+ +

Now that you are familiar with the basic concepts of the DOM, there is a document explaining the DOM Level 1 fundamental methods. It is the follow-up to this document.

+ +

See also the DOM Level 1 Core specification from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our other DOM documentation.

+ +
+

Original Document Information

+ + +
diff --git a/files/es/uso_de_nsiloginmanager/index.html b/files/es/uso_de_nsiloginmanager/index.html new file mode 100644 index 0000000000..785f9e8681 --- /dev/null +++ b/files/es/uso_de_nsiloginmanager/index.html @@ -0,0 +1,177 @@ +--- +title: Uso de nsILoginManager +slug: Uso_de_nsILoginManager +tags: + - Firefox 3 + - Interfaces + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager/Using_nsILoginManager +--- +

+ +

Working with the Login Manager

+ +

Extensions often need to securely store passwords to external sites, web applications, and so on. To do so securely, they can use nsILoginManager, which provides for secure storage of sensitive password information and nsILoginInfo, which provides a way of storing login information.

+ +

Getting nsILoginManager

+ +

To get a component implementing nsILoginManager, use the following:

+ +
var passwordManager = Components.classes["@mozilla.org/login-manager;1"]
+                                .getService(Components.interfaces.nsILoginManager);
+
+ +

Most Login Manager functions take an nsILoginInfo object as a parameter. An nsILoginInfo object contains the following attributes: hostname, form submit URL, HTTP realm, username, username field, password, and password field. The hostname, username and password attributes are mandatory, while the other fields are set based on whether the login is for a web page form or an HTTP/FTP authentication site login. See the nsILoginInfo attribute definitions for more details. Defining an nsILoginInfo object is simple:

+ +
var nsLoginInfo = new Components.Constructor("@mozilla.org/login-manager/loginInfo;1",
+                                             Components.interfaces.nsILoginInfo,
+                                             "init");
+
+var loginInfo = new nsLoginInfo(hostname, formSubmitURL, httprealm, username, password,
+                                usernameField, passwordField);
+
+ +

Examples

+ +

Creating a login for a web page

+ +
 var formLoginInfo = new nsLoginInfo('http://www.example.com',
+                       'http://login.example.com', null,
+                       'joe', 'SeCrEt123', 'uname', 'pword');
+
+ +

This login would correspond to a HTML form such as:

+ +
 
+  <form action="http://login.example.com/foo/authenticate.cgi">
+  Please log in.
+  Username: <input type="text"     name="uname">
+  Password: <input type="password" name="pword">
+  </form>
+  
+
+ +

Creating a site authentication login

+ +
 var authLoginInfo = new nsLoginInfo('http://www.example.com',
+                       null, 'ExampleCo Login',
+                       'alice', 'SeCrEt321', null, null);
+
+ +

This would correspond to a login on http://www.example.com when the server sends a reply such as:

+ +
 HTTP/1.0 401 Authorization Required
+ Server: Apache/1.3.27
+ WWW-Authenticate: Basic realm="ExampleCo Login"
+
+ +

Creating a local extension login

+ +
 var extLoginInfo = new nsLoginInfo('chrome://firefoo',
+                      'User Registration', null,
+                      'bob', '123sEcReT', null, null);
+
+ +

The Login Manager treats this as if it was a web site login. You should use your extension's chrome:// URL to prevent conflicts with other extensions, and a realm string which briefly denotes the login's purpose.

+ +

Almacenar una contraseña

+ +

Para almacenar una contraseña en el Gestor de Accesos, primero necesitas crear un objeto nsILoginInfo como se define arriba. Entonces simplemente necesitas llamar al método nsILoginManager addLogin().

+ +
 myLoginManager.addLogin(loginInfo);
+
+ +

Esto provocará una excepción si tanto el parámetro httprealm como el parámetro formSubmitURL son NULL. Uno debe ser especificado cuando se almacena una contraseña. Los parámetros hostname, username y password también son obligatorios.

+ +

Retrieving a password

+ +

Retrieving a password from the Login Manager is slightly more difficult. In order to locate a password, the hostname, formSubmitURL and httprealm must match exactly what is stored for the password to be found. The only exception is that if the stored formSubmitURL is blank, in which case the formSubmitURL parameter is ignored. Note that the hostname and formSubmitURL arguments should not include the path from the full URL. The example below should serve as a starting point for matching form logins:

+ +
var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';  // not http://www.example.com/foo/auth.cgi
+var httprealm = null;
+var username = 'user';
+var password;
+
+try {
+   // Get Login Manager
+   var myLoginManager = Components.classes["@mozilla.org/login-manager;1"]
+                         .getService(Components.interfaces.nsILoginManager);
+
+   // Find users for the given parameters
+   var logins = myLoginManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+   // Find user from returned array of nsILoginInfo objects
+   for (var i = 0; i < logins.length; i++) {
+      if (logins[i].username == username) {
+         password = logins[i].password;
+         break;
+      }
+   }
+}
+catch(ex) {
+   // This will only happen if there is no nsILoginManager component class
+}
+
+ +

Note that the user will be prompted for their master password if they have chosen to set one to secure their passwords.

+ +

Removing a password

+ +

Removing a password is simple:

+ +
 myLoginManager.removeLogin(loginInfo);
+
+ +

When removing a password the specified nsILoginInfo object must exactly match what was stored or an exception will be thrown. This includes the password attribute. Here's an example on how to remove the password without actually knowing what the password is:

+ +
// example values
+var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';
+var httprealm = null;
+var username = 'user';
+
+try {
+   // Get Login Manager
+   var passwordManager = Components.classes["@mozilla.org/login-manager;1"]
+                         .getService(Components.interfaces.nsILoginManager);
+
+   // Find users for this extension
+   var logins = passwordManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+   for (var i = 0; i < logins.length; i++) {
+      if (logins[i].username == username) {
+         passwordManager.removeLogin(logins[i]);
+         break;
+      }
+   }
+}
+catch(ex) {
+   // This will only happen if there is no nsILoginManager component class
+}
+
+ +

Changing stored login information

+ +

Changing a password is rather simple. Since all this does is make a removeLogin() call followed by an addLogin() call, it has the same caveats as both of them: namely that the oldLogin must match an existing login exactly (see above) and that the newLogin attributes must be set correctly.:

+ +
myLoginManager.modifyLogin(oldLogin, newLogin);
+ +

Depuración

+ +

La implementación del gestor de accesos tiene la capacidad de enviar mensajes de depuración a la Consola de Errores, lo que puede provocar algo de visibilidad en lo que se está haciendo. Para habilitar la depuración de accesos, véase http://wiki.mozilla.org/Firefox:Pass...ager_Debugging.

+ +

Soporte de versiones anteriores de Firefox

+ +

Si quieres implementar tu extensión para que soporte Firefox 3 y versiones anteriores será necesario implementar tanto el componente nsILoginManager como el componente nsIPasswordManager. Un método simple para hacer ésto se expone a continuación:

+ +
if ("@mozilla.org/passwordmanager;1" in Components.classes) {
+   // El gestor de contraseñas existe así que no es Firefox 3 (puede ser Firefox 2, Netscape, SeaMonkey, etc).
+   // Código del gestor de contraseñas
+}
+else if ("@mozilla.org/login-manager;1" in Components.classes) {
+   // El gestor de accesos existe así que es Firefox 3
+   // Código del gestor de accesos
+}
+
diff --git "a/files/es/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" "b/files/es/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" new file mode 100644 index 0000000000..1e5b13b9a6 --- /dev/null +++ "b/files/es/uso_del_n\303\272cleo_del_nivel_1_del_dom/index.html" @@ -0,0 +1,92 @@ +--- +title: Uso del núcleo del nivel 1 del DOM +slug: Uso_del_núcleo_del_nivel_1_del_DOM +tags: + - DOM + - Todas_las_Categorías +--- +

El núcleo del DOM nivel 1 del W3C es un potente modelo de objetos para cambiar el árbol de contenidos de los documentos. Está soportado en Mozilla (en el cual está basado Netscape 6) y (la mayor parte de) MSIE 5.0 para Windows. Es una potente base para la futura programación de la web.

+ +

¿Qué es un árbol de contenidos?

+ +

Muchos de los que trabajan con HTML pueden pensar que HTML es algo plano, un montón de texto con etiquetas en medio. Sin embargo es mucho más que eso. Todo documento HTML (y por extensión todo documento SGML o XML) posee una estructura en árbol. Por ejemplo, el siguiente documento y la estructura en árbol son similares (aunque no idénticas; ver anotaciones en espacios en blanco en DOM):

+ +
<html>
+<head>
+  <title>Mi documento</title>
+</head>
+<body>
+  <h1>Cabecera</h1>
+  <p>Párrafo</p>
+</body>
+</html>
+
+ + + +

Cuando analiza un documento, Mozilla construye un árbol de contenidos y luego lo utiliza para mostrar el documento.

+ +

Los términos usados para describir los árboles show up frecuentemente en el núcleo del DOM nivel 1. Cada caja dibujada en el árbol de arriba es un nodo en el árbol. La línea sobre cada nodo expresa una relación padre-hijo: el nodo superior es el padre y el inferior, el hijo. Dos hijos del mismo padre son por tanto hermanos. Similarmente, uno puede referirse a sus ancestros y descendientes (incluso a los nodos primos, aunque es más complicado de explicar).

+ +

¿Qué me permite hacer el Nivel 1 del DOM?

+ +

El nivel 1 del DOM del W3C te permite cambiar el árbol de contenidoscomo te de la gana . Es lo suficientemente poderoso como para construir cualquier documento HTML a partir de la nada. Permite a los desarrolladores cambiar cualquier cosa en el documento desde un script, en cualquier momento. La forma más fácil para desarrolladores de páginas web para cambiar el DOM dinámicamente es usando JavaScript. En JavaScript, el documento es accesible en el mismo modo que lo era en los viejos navegadores: desde la propiedad global document. El objeto document implementa el interfaz de documento del nivel 1 de la especificación para el DOM del W3C.

+ +

Un ejemplo simple

+ +

Supongamos que el autor del documento de arriba coge y cambia los contenidos de la cabecera y escribe dos párrafos en lugar de uno. El siguiente script debería hacer lo mismo (Resaltado de sintaxis: palabras reservadas Javascript, métodos y propiedades DOM predefinidos y comentarios en Javascript):

+ +

+// document.getElementsByTagName("H1") devuelve un NodeList de los
+// elementos H1 del documento; el primer elemento tiene índice 0:
+
+var header = document.getElementsByTagName("H1").item(0);
+
+// La propiedad firstChild de la cabecera contiene un nodo de texto y su propiedad
+// data contiene el texto del nodo:
+
+header.firstChild.data = "Un documento dinámico";
+
+// Ahora la cabecera es "Un documento dinámico".
+// Obtenemos el primer elemento P del documento de la misma forma:
+
+var para = document.getElementsByTagName("P").item(0);
+
+// y cambiamos su texto:
+
+para.firstChild.data = "Este es el primer párrafo.";
+
+// creamos un nodo de texto para el segundo párrafo
+
+var newText = document.createTextNode("This is the second paragraph.");
+
+// creamos un nuevo elemento que sea el segundo párrafo
+
+var newElement = document.createElement("P");
+
+// ponemos el texto en el párrafo
+
+newElement.appendChild(newText);
+
+// y ponemos el párrafo al final del documento anexándolo
+// a la etiqueta BODY (que es el padre del párrafo
+
+para.parentNode.appendChild(newElement);
+
+ +

Puedes ver este script en acción en el ejemplo completo.

+ +

¿Cómo puedo aprender más?

+ +

Una vez familiarizado con los conceptos básicos del DOM, puedes leer el documento que explica los métodos fundamentales del DOM nivel 1. Es lo que sigue a este documento.

+ +

Véase también la especificación del núcleo de DOM nivel 1 del W3C. Es una especificación razonablemente clara a pesar de ser una especificación formal. Lo más útil para los desarrolladores es la descripción de los diferentes objetos del DOM y todas sus propiedades y métodos. Véase también nuestra otra documentación del DOM.

+ +
+

Original Document Information

+ + +
diff --git a/files/es/venkman/index.html b/files/es/venkman/index.html new file mode 100644 index 0000000000..eb55384f38 --- /dev/null +++ b/files/es/venkman/index.html @@ -0,0 +1,50 @@ +--- +title: Venkman +slug: Venkman +tags: + - Desarrollo_Web + - 'Desarrollo_Web:Herramientas' + - 'Extensiones:Herramientas' + - JavaScript + - 'JavaScript:Herramientas' + - Todas_las_Categorías + - Venkman + - extensiones +translation_of: Archive/Mozilla/Venkman +--- +

 

+

Venkman es el nombre en código del depurador de JavaScript de Mozilla. Su objetivo es proporcionar un poderoso entorno de depuración de JavaScript para navegadores basados ​​en Mozilla es decir, Firefox, Netscape 7.x/9.x y SeaMonkey. Ten en cuenta que no está incluido en los navegadores basados ​​en Gecko como K-Meleon, Netscape 8.x y Galeon. Venkman se ofrece como parte de la distribución de instalación de Mozilla desde octubre de 2001, así como un paquete de extensiones en formato XPI.

+ +

Documentación

+
Introducción a Venkman
Una visión general y algunos ejemplos prácticos del uso del depurador de JavaScript en el desarrollo web.
+
+
Utilizar puntos de rutura en Venkman
Este artículo describe los puntos de interrupción en JavaScript y cómo utilizar Venkman para establecerlos y examinarlos.
+
+
Conocer el depurador de JavaScript Venkman
Escrito por Svend Tofte para los programadores de JavaScript que no están familiarizados con otras herramientas de depuración.
+
+
Preguntas frecuentes sobre Venkman
Respuestas a preguntas comunes sobre Venkman.
+
+
Información interna acerca de Venkman
Notas sobre el código fuente de Venkman.
+
+
Página de desarrollo de Venkman
Novedades y lanzamientos anteriores.
+

Breve historia

+

En 1998, John Bandhauer fue el encargado de crear el depurador JavaScript de Netscape 4.x . Con el fin de mantener un desarrollo modular, empezó por la creación de una API de depuración de JavaScript de nivel medio llamada js / jsd. Esta API aumenta la API de JavaScript existente, proporcionando a los clientes un conjunto muy útil de funciones de depuración implementadas en C. John, a continuación, pasó a reflejar esa API en Java, y creó su interfaz multiplataforma, que con el tiempo daría lugar al depurador de JavaScript para Netscape 1.0 y 1.1.

+

En abril de 2001, Robert Ginda comenzó a trabajar en un depurador de JavaScript para Mozilla, llamado Venkman. Venkman se basa en la parte de js / jsd del trabajo que realizó John en 1998, exposing it como un componente XPCOM. Esto permite que la user interface se escriba en JavaScript y XUL , lo que permite que Venkman sea una totalmente multiplataforma.

Conseguir Venkman

Firefox y Thunderbird
La última versión de JavaScript Debugger está disponible en Complementos de Firefox .
Mozilla Suite y SeaMonkey
Estas versiones vienen con Venkman preinstalado. En Windows es una opción de instalación, así que elige Avanzada. También está disponible en Complementos de Firefox como extensión.
Nvu y KompoZer
La versión 0.9.84 de la extensión de JavaScript Debugger está disponible en la página de descargas de Nvu . Le animamos a usar con Firefox la última versión disponible 0.9.87.1 (o superior).
Código fuente
El código fuente para Venkman se puede encontrar en Mercurial en la siguiente URL: http://hg.mozilla.org/venkman/summary

Comunidad

+
  • Ver foros de Mozilla...
    • +
+

+

Informar de un error en Venkman

+

Si encuentras un problema con Venkman, por favor, sigue las directivas mencionadas en la sección 5.4 de preguntas frecuentes sobre Venkman y, después, podrás informar de un error en el componente depurador de JavaScript.

Temas relacionados

+
JavaScript, Desarrollo web, Desarrollo de Mozilla
+
+

Información del documento original

+
+

diff --git a/files/es/vigilancia_de_plugins/index.html b/files/es/vigilancia_de_plugins/index.html new file mode 100644 index 0000000000..111ddef8c3 --- /dev/null +++ b/files/es/vigilancia_de_plugins/index.html @@ -0,0 +1,131 @@ +--- +title: Vigilancia de plugins +slug: Vigilancia_de_plugins +tags: + - Firefox 3 + - Plugins + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Archive/Plugins/Monitoring_plugins +--- +

{{ Fx_minversion_header(3) }}

+ +

Sumario

+ +

Un nuevo componente del sistema plugin está ahora disponible para medir cuanto le toma a los plugins (e.g., Adobe Flash) ejecutar sus tareas. Este componente reporta el tiempo de ejecución del plugin usando el observador de servicios a quién esté registrado para recibir las notificaciones. Este artículo discute como los desarrolladores pueden hacer uso de esta nueva característica.

+ +

Datos de tiempos de ejecución (Runtime Data)

+ +

La información de tiempo de ejecución reportada es siempre en fracciones de segundo. Debido a que el componente mide el tiempo reloj que le toma al plugin ejecutar las órdenes, el valor incluye ambos tiempos de CPU, el tiempo requerido para el proceso al igual que el tiempo para operaciones de disco. Por lo tanto es técnicamente incorrecto decir que el tiempo de ejecución es una medida del uso del CPU, sin embargo, es una buena representación of todos los recursos que están siendo consumidos por el plugin.

+ +

Uso

+ +

Para hacer uso del nuevo componente debes registrarte para recibir sus notificaciones de tiempo de ejecución usando el observador de servicios. El tema de la notificación es experimental-notify-plugin-call. Si eres nuevo con el observador de servicios de Mozilla, quizás quieras familiarizarte con este antes de proseguir. Puedes hallar más información sobre el observador de servicios aquí y aquí.

+ +

Abajo hay un número de recortes de JavaScript que podrían ser útiles para desarrolladores que intenten usar esta característica:

+ +

Registro

+ +

Para registrarse en las notificaciones de tiempo de ejecución con el observador de servicios debes crear una clase con un método observe que reciba 3 parámetros (tema, asunto y dato) así como un método register que contenga el siguiente código:

+ +

 

+ +
var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                        .getService (Components.interfaces.nsIObserverService);
+observerService.addObserver(this, "experimental-notify-plugin-call", false);
+
+ +

 

+ +

 

+ +

Observando

+ +

Como se discutió arriba, para especificar que quieres hacer cuando llegue una notificación tu clase debe tener un método observe, recibiendo 3 parámetros (tema, asunto y dato). El asunto contiene el asunto de la notificación - experimental-notify-plugin-call en este caso, el  dato es el tiempo de ejecución en milisegundos y el tema es siempre null y no debería ser usado.

+ +

Aquí hay un ejemplo que muestra el tiempo de ejecución en una caja de alerta al usuario si el tiempo de ejecución excede el medio segundo:

+ +

 

+ +
 observe: function(subject, topic, data) {
+   if (topic == "experimental-notify-plugin-call" ) {
+     if (data > 0.500) {
+       alert("Runtime is: " + data);
+     }
+   }
+ }
+
+ +

 

+ +

NOTA: Este es solo un ejemplo simplificado y el uso de  alert() es muy moderado ya que el componente puede enviar cientos de notificaciones por segundo y puede provocar que el browser deje de funcionar si un número excesivo de cajas de alerta son desplegadas.

+ +

Además note que en el ejemplo de arriba una sentencia if se asegura que el tema de la notificación entrante es el correcto. Esto es muy útil en casos donde tu clase está registrada para recibir notificaciones para más de un tema con el observador de servicios.

+ +

Limpieza

+ +

Para eliminar el registro de tu clase con observador de servicios - cuando ya no quieras recibir más notificaciones de tiempos de ejecución - tu clase debe incluir un método unregister que contenga el siguiente código:

+ +

 

+ +
var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                       .getService(Components.interfaces.nsIObserverService);
+observerService.removeObserver(this, "experimental-notify-plugin-call");
+
+ +

 

+ +

 

+ +

Esqueleto (estructura) de clases para el observador

+ +

Abajo está un esqueleto de clase que podrías usar para recibir notificaciones de tiempos de ejecución:

+ +

 

+ +
 function PluginObserver() {
+   this.registered = false;
+   this.register();	//takes care of registering this class with observer services as an observer for plugin runtime notifications
+ }
+
+ PluginWatcherObserver.prototype = {
+   observe: function(subject, topic, data) {
+
+     if (topic == "experimental-notify-plugin-call") //In case your class is registered to listen to other topics
+       //This gets executed each time a runtime notification arrives
+       // --YOUR CODE GOES HERE--
+     }
+
+
+   },
+   //Takes care of registering the observer services for the "experimental-notify-plugin-call" topic
+   register: function() {
+     if (this.registered == false) { //This check prevents double registration -- something you want to avoid!!
+       var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                       .getService(Components.interfaces.nsIObserverService);
+       observerService.addObserver(this, "experimental-notify-plugin-call", false);
+       this.registered = true;
+     }
+   },
+   //Unregisters from the observer services
+   unregister: function() {
+     if (this.registered == true) {
+       var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                       .getService(Components.interfaces.nsIObserverService);
+       observerService.removeObserver(this, "experimental-notify-plugin-call");
+       this.registered = false;
+     }
+   }
+ }
+
+ +

 

+ +

Recursos adicionales

+ +

Más información sobre el observador de servicios:

+ + diff --git a/files/es/vigilar_descargas/index.html b/files/es/vigilar_descargas/index.html new file mode 100644 index 0000000000..b2e1160452 --- /dev/null +++ b/files/es/vigilar_descargas/index.html @@ -0,0 +1,247 @@ +--- +title: Vigilar descargas +slug: Vigilar_descargas +tags: + - Download Manager + - Firefox 3 +translation_of: Archive/Mozilla/Monitoring_downloads +--- +

Con Firefox 3 es más fácil que nunca vigilar el estado de las descargas. Aunque ya era posible hacer esto en versiones previas de Firefox, solo era posible hacer posible tener un observador en cada momento. Firefox 3 introduce un nuevo API que permite cualquier numero de observadores para las descargas.

+

Este articulo demuestra como vigilar las descargas en Firefox 3, usando el administrador de descargas. Como un bonito añadido adicional, demuestra demás cómo usar el API Storage para crear instrucciones sqlite en una base de datos. El resultado es una ventana que puedes abrir seleccionando "Registro de descargas" en el menú herramientas, que muestra todas las descargas que se han iniciado desde que se instaló la extensión. En la lista está el nombre del archivo, las horas de comienzo y final de la descarga, la velocidad de descarga y el estado de la descarga. Se incluye un título emergente que muestra la URL completa de la fuente del archivo.

+

Descarga un ejemplo completo en samples/extension-samples/DownloadLogger.zip

+

Configuración

+

Al cargar la extensión, se realizarán algunas tareas de limpieza rutinaria. En particular, necesita que exista una versión de la interfaz del administrador de descargas nsIDownloadManager y crea una base de datos en donde almacenará sus datos.

+

 

+
 onLoad: function() {
+   // código de inicialización
+   this.initialized = true;
+   this.strings = document.getElementById("downloadlogger-strings");
+
+   this.dlMgr = Components.classes["@mozilla.org/download-manager;1"]
+                          .getService(Components.interfaces.nsIDownloadManager);
+
+   this.dlMgr.addListener(downloadlogger);
+
+   // Abre la base de datos, poniendo su archivo en el directorio de perfil (profile)
+
+   this.dbFile = Components.classes["@mozilla.org/file/directory_service;1"]
+                    .getService(Components.interfaces.nsIProperties)
+                    .get("ProfD", Components.interfaces.nsIFile);
+   this.dbFile.append("downloadlogger.sqlite");
+
+   // Accede al servicio de almacenamiento y abre la base de datos
+
+   this.storageService = Components.classes["@mozilla.org/storage/service;1"]
+                       .getService(Components.interfaces.mozIStorageService);
+
+   var dbConn = this.storageService.openDatabase(this.dbFile);
+
+   // Ahora crea la tabla; si ya existe, esto produce un error, pero ¡no importa!
+
+   dbConn.executeSimpleSQL("CREATE TABLE items (source TEXT, size INTEGER," +
+                           " startTime INTEGER, endTime INTEGER," +
+                           " speed REAL, status INTEGER)");
+   dbConn.close();
+ },
+
+

Esto es bastante simple. El administrador de descargas es almacenado en una variable en el objeto downloadlogger para ser usado más tarde y llama a su método addListener() para empezar la escucha de los cambios de estado de descargas. El archivo de la base de datos se abre y se ejecuta la instrucción sqlite: CREATE TABLE para crear la tabla.

+

Finalmente, se cierra la base de datos.

+
Nota: El método close() de mozIStorageConnection se añade en la versión alpha 8 de Firefox 3. En versiones anteriores de Firefox, no hay forma explícita de cerrar la base de datos; Se cierra cuando el colector de desperdicios desecha el objeto conexión.
+

Seguir los cambios de estados de las descargas

+

Una vez que el código mostrado más arriba se ejecuta, cada vez que hay un cambio de estado se produce una llamada a nuestro método onDownloadStateChange(). Esto es parte de la interfaz nsIDownloadProgressListener.

+

Ese código es parecido a esto:

+
 onDownloadStateChange: function(aState, aDownload) {
+   var statement;
+
+   switch(aDownload.state) {
+     case Components.interfaces.nsIDownloadManager.DOWNLOAD_DOWNLOADING:
+
+       // Agregar una fila para la nueva descarga que comienza; cada fila incluye
+       // la URI del origen, tamaño y hora de comienzo. La hora de final y la velocidad de descarga
+       // se ponen ambas a cero ya que no las conocemos aún.
+
+       // status es el valor del estado llegado desde el administrador de descargas.
+
+       var dbConn = this.storageService.openDatabase(this.dbFile);
+       statement = dbConn.createStatement("REPLACE INTO items VALUES " +
+                                          "(?1, ?2, ?3, 0, 0.0, 0)");
+
+       statement.bindStringParameter(0, aDownload.source.spec);
+       statement.bindInt64Parameter(1, aDownload.size);
+       statement.bindInt64Parameter(2, aDownload.startTime);
+       statement.execute();
+       statement.reset();
+       dbConn.close();
+       break;
+
+     // Registra si se ha completado (o ha fallado) la descarga
+
+     case Components.interfaces.nsIDownloadManager.DOWNLOAD_FINISHED:
+     case Components.interfaces.nsIDownloadManager.DOWNLOAD_FAILED:
+     case Components.interfaces.nsIDownloadManager.DOWNLOAD_CANCELED:
+       this.logTransferCompleted(aDownload);
+       break;
+   }
+ },
+
+

Nos interesan cuatro estados. Si el estado de la descarga, indicado por el campo aDownload.state es Components.interfaces.nsIDownloadManager.DOWNLOAD_DOWNLOADING, se ha comenzado la descarga del archivo. El objeto aDownload es un objeto nsIDownload.

+

En este caso, creamos una nueva fila en nuestra base de datos para el nuevo archivo, abriendo la base de datos y construyendo una instrucción sqlite: REPLACE INTO. Las primeras tres filas se comlpetan con el valor de la URI de origen, tamaño del archivo y hora de comienzo del objeto descarga (download). Las demás filas se ponen a cero ya que esa información no la tenemos ahora.

+

Si el estado de la descarga indica que ésta ha terminado, se ha cancelado o ha fallado, llamamos a nuestra rutina logTransferCompleted para actualizar el registro indicando el cambio de estado. El código es como:

+
 logTransferCompleted: function(aDownload) {
+     var endTime = new Date();                // La hora actual es la hora de final
+
+     // Utiliza la instrucción sqlite REPLACE para actualizar el registro. Encontramos un
+     // registro para cada URI y hora de comienzo y actualizamos la hora de final,
+     // tamaño y velocidad en el registro. Haciendo coincidir la URI y la hora de comienzo,
+     // podemos tener varias entradas de múltiples descargas del mismo archivo.
+
+

 

+
     var dbConn = this.storageService.openDatabase(this.dbFile);
+     var statement = dbConn.createStatement("UPDATE items SET size=?1, " +
+         "endTime=?2, speed=?3, status=?4 WHERE source=?5 and startTime=?6");
+     statement.bindInt64Parameter(0, aDownload.size);
+     statement.bindInt64Parameter(1, endTime.getTime());
+     statement.bindDoubleParameter(2, aDownload.speed);
+     statement.bindInt32Parameter(3, aDownload.state);
+     statement.bindStringParameter(4, aDownload.source.spec);
+     statement.bindInt64Parameter(5, aDownload.startTime);
+     statement.execute();
+     statement.reset();
+     dbConn.close();
+ },
+
+

Esto simplemente abre la base de datos y ejecuta la instrucción sqlite: UPDATE que encuentra la descarga cuya URI de origen y su hora de inicio coinciden con la descarga que se ha completado y actualiza su información. Buscando por un registro con igual URI y hora de comienzo, implementamos la posibilidad de que un usuario descargue el mismo archivo varias veces.

+

 

+

Mostrando el registro de descargas

+

El código de la ventana de registro está encapsulado en un objeto llamado downloadlogger_dlwindow. Ya que este es un ejemplo simple, es una ventana de registro de una única descarga; no nos preocupamos de cambios posteriores del registro. Simplemente mostramos el estado de la descarga en el momento en que la ventana se abre.

+

Esto significa que todo el trabajo puede hacerse en el manejador del evento de carga, que es algo así:

+
 onLoad: function() {
+   // Abre la base de datos
+
+   this.dbFile = Components.classes["@mozilla.org/file/directory_service;1"]
+                    .getService(Components.interfaces.nsIProperties)
+                    .get("ProfD", Components.interfaces.nsIFile);
+   this.dbFile.append("downloadlogger.sqlite");
+
+   // Consigue acceso al servicio de almacenamiento y abre la base de datos
+
+   this.storageService = Components.classes["@mozilla.org/storage/service;1"]
+                       .getService(Components.interfaces.mozIStorageService);
+
+   var dbConn = this.storageService.openDatabase(this.dbFile);
+
+   var loglist = document.getElementById("loglist");
+
+   var statement = dbConn.createStatement("SELECT * FROM items");   // Get all items in table
+   try {
+     while (statement.executeStep()) {
+       var row = document.createElement('listitem');
+
+       // Agrega las celdas al registro (fila de la tabla)
+
+       var cell = document.createElement('listcell');
+       var sourceStr = statement.getString(0);
+       row.setAttribute("tooltiptext", sourceStr);
+       sourceStr = sourceStr.slice(sourceStr.lastIndexOf("/")+1, sourceStr.length);
+       cell.setAttribute("label", sourceStr);   // Source
+       row.appendChild(cell);
+
+       cell = document.createElement('listcell');
+       cell.setAttribute("label", (statement.getInt64(1) / 1024).toFixed(1) + "KB");    // Size
+       cell.setAttribute("style", "text-align:right");
+       row.appendChild(cell);
+
+       var theDate = new Date(statement.getInt64(2) / 1000);        // Start time
+       cell = document.createElement('listcell');
+       var dateStr = theDate.toLocaleString();
+       cell.setAttribute("label", dateStr);
+       row.appendChild(cell);
+
+       theDate = new Date(statement.getInt64(3));            // End time
+       cell = document.createElement('listcell');
+       dateStr = theDate.toLocaleString();
+       cell.setAttribute("label", dateStr);
+       row.appendChild(cell);
+
+       var speed = statement.getDouble(4) / 1024.0;
+       cell = document.createElement('listcell');
+       cell.setAttribute("label", speed.toFixed(1) + "KB/sec");
+       cell.setAttribute("style", "text-align:right");
+       row.appendChild(cell);
+
+       var status = statement.getInt32(5);
+       var style = "color:black";
+       cell = document.createElement('listcell');
+
+       var statusStr;
+
+       switch(status) {
+         case 0:
+           statusStr = "Descargando";
+           break;
+         case 1:
+           statusStr = "Completada";
+           style = "color:green";
+           break;
+         case 2:
+           statusStr = "Fallida";
+           style = "color:red";
+           break;
+         case 3:
+           statusStr = "Cancelada";
+           style = "color:purple";
+           break;
+         case 4:
+           statusStr = "Pausada";
+           style = "color:blue";
+           break;
+         case 5:
+           statusStr = "En cola";
+           style = "color:teal";
+           break;
+         case 6:
+           statusStr = "Bloqueada";
+           style = "color:white background-color:red";
+           break;
+         case 7:
+           statusStr = "Escaneando";
+           style = "color:silver";
+           break;
+         default:
+           statusStr = "Desconocido";
+           break;
+       }
+       cell.setAttribute("label", statusStr);
+       cell.setAttribute("style", style);
+       row.appendChild(cell);
+
+       loglist.appendChild(row);
+     }
+   } finally {
+     statement.reset();
+     dbConn = null;
+   }
+ }
+
+

Este código es bastante simple. Comienza abriendo la base de datos sqlite que contiene la información de registro y entonces crea una sentencia SQL: SELECT para leer las entradas de la base de datos.

+

Para reiterar sobre los resultados, usamos un bucle while que llama al método executeStep() del objeto mozIStorageStatement. Cada vez que este método es llamado, se recoge una fila de resultados.

+

Después de esto, se crea el objeto fila y cada entrada del resultado de la búsqueda, se pone en su respectiva celda.

+

Los puntos a resaltar son:

+ + + +

Ejercicios para el lector

+

Hay algunas cosas obvias que podrían hacerse para mejorar esta extensión. Si estás aprendiendo a usar el gestor de descargas o el API Storage, hay algunas cosas que convendría que miraras para practicar:

+ + + + +

Ver también

+

Storage, nsIDownloadManager, nsIDownload, nsIDownloadProgressListener

diff --git a/files/es/vigilar_plugins/index.html b/files/es/vigilar_plugins/index.html new file mode 100644 index 0000000000..2e5c6a0863 --- /dev/null +++ b/files/es/vigilar_plugins/index.html @@ -0,0 +1,110 @@ +--- +title: Vigilar plugins +slug: Vigilar_plugins +tags: + - Firefox 3 + - Plugins + - Todas_las_Categorías +--- +

{{ Fx_minversion_header(3) }} +

+

Resumen

+

Ya está disponible un nuevo componente de los plugin que permite saber cuanto tiempo le toma a un determinado plugin (p.e. Adobe Flash) ejecutar sus llamadas. Este componente presenta el runtime del plugin usando el observer service a cualquiera que reciba la notificación. Este artículo cuenta cómo los desarrolladores pueden hacer uso de esta facilidad. +


+

+

Datos del Runtime

+

La información del runtime presentada es siempre en fracciones de segundo. Ya que el componente mide el tiempo que le toma a las llamadas de bloque del plugin, el valor incluye tanto el tiempo de CPU, el tiempo de espera entre asignaciones de tiempo de CPU al proceso, como cualquier tiempo de e/s del disco. Es técnicamente incorrecto decir que el runtime es una medida del uso de CPU, sin embargo, es una buena representación de los recursos totales consumidos por el plugin. +

+

Uso

+

Para hacer uso del nuevo componente, debes registrarte para recibir las notificaciones del runtime usando el observer service. El tópico de la notificación es experimental-notify-plugin-call. Si eres novato con el servicio de observación de Mozilla, querrás familiarizarte con él antes de proseguir. Puedes encontrar información acerca del servicio de observación aquí y aquí. +

Debajo hay un número de conversaciones sobre JavaScript que podrían ser útiles para desarrolladores que quieran usar esta facilidad: +

+

Registro

+

Para registrase en el servicio de notificaciones con el observador debes crear una clase con un método observe que recibe tres parámetros (subject, topic y data) así como un método register que contiene el siguiente código: +


+ +

+
var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                        .getService (Components.interfaces.nsIObserverService);
+observerService.addObserver(this, "experimental-notify-plugin-call", false);
+
+

+


+

+

Observando

+

Como hemos dicho arriba, para especificar lo que quieres que se haga cuando llega una notificación, tu clase debe tener un método observe, que recibe tres parámetros (subject, topic y data). El topic contiene el tópico de la notificación - experimental-notify-plugin-call en este caso, data es el runtime en mili segundos y subject es siempre null y no debería usarse. +

Aquí hay un ejemplo que muestra el runtime en una caja de alerta al usuario si el runtime excede medio segundo de longitud: +

+

+
 observe: function(subject, topic, data) {
+   if (topic == "experimental-notify-plugin-call" ) {
+     if (data > 0.500) {
+       alert("Runtime is: " + data);
+     }
+   }
+ }
+
+

+

NOTA: Esto es un ejemplo simplificado y se desaconseja el uso de alert() ya que el componente puede enviar cientos de notificaciones por segundo y puede, potencialmente, causar la parada del navegador si se abre un número excesivo de cajas de alerta. +

Téngase también en cuenta que en el ejemplo anterior una sentencia if primero comprueba que el tópico de la notificación es el correcto. Esto es útil en casos en los que la clase se registra para recibir notificaciones de más de un tópico en el servicio de observación. +

+

Limpieza

+

Para des-registrar tu clase en el servicio de observación - cuando ya no quieres escuchar las notificaciones del runtime - tu clase debe incluir un método unregister que contenga el siguiente código: +

+

+
var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                       .getService(Components.interfaces.nsIObserverService);
+observerService.removeObserver(this, "experimental-notify-plugin-call");
+
+

+


+

+

Esquema de una clase para el observador

+

A continuación presentamos un esquema de una clase que puedes usar para escuchar el servicio de notificaciones: +

+

+
 function PluginObserver() {
+   this.registered = false;
+   this.register();	// se cuida de registrar esta clase en el servicio de observación como un observador para el servicio de notificación
+ }
+
+ PluginWatcherObserver.prototype = {
+   observe: function(subject, topic, data) {
+
+     if (topic == "experimental-notify-plugin-call") //En caso de que tu clase esté registrada para escuchar otros tópicos
+       //Esto es ejecutado cada vez que llega una notificación
+       // --AQUÍ VA TU CÓDIGO--
+     }
+
+
+   },
+   //Se cuida de registrar el observador para el tópico "experimental-notify-plugin-call"
+   register: function() {
+     if (this.registered == false) { //Este evento previene el doble registro -- ¡algo que quieres evitar!
+       var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                       .getService(Components.interfaces.nsIObserverService);
+       observerService.addObserver(this, "experimental-notify-plugin-call", false);
+       this.registered = true;
+     }
+   },
+   //Des-registra del servicio de observación
+   unregister: function() {
+     if (this.registered == true) {
+       var observerService = Components.classes["@mozilla.org/observer-service;1"]
+                                       .getService(Components.interfaces.nsIObserverService);
+       observerService.removeObserver(this, "experimental-notify-plugin-call");
+       this.registered = false;
+     }
+   }
+ }
+
+

+


+

+

Recursos adicionales

+

Más información sobre el servicio de observación: +

+ +{{ languages( { "ja": "ja/Monitoring_plugins" } ) }} diff --git a/files/es/web/accesibilidad/comunidad/index.html b/files/es/web/accesibilidad/comunidad/index.html new file mode 100644 index 0000000000..34acce8e6e --- /dev/null +++ b/files/es/web/accesibilidad/comunidad/index.html @@ -0,0 +1,44 @@ +--- +title: Comunidad +slug: Web/Accesibilidad/Comunidad +tags: + - Accesibilidad + - Todas_las_Categorías +translation_of: Web/Accessibility/Community +--- +

 

+

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

+

Mozilla

+ +

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

+

Listas de correo

+ +

Foros

+ +

 

+

Bitácoras

+ +

Wikis

+ +

 

+

Otros Sitios

+ +

categorías

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

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

+ +

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

+ +

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

+ +

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

+ + + + + + + + +
+

Documentación

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

Ver más...

+ 		+

Comunidad

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

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

+ +

Ver más...

+ +

Herramientas

+ + + +

Ver más...

+ +

Temas relacionados

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

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

+ +

Categorias

+ +

Interwiki Language Links

+ +

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

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

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

+ +

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

+ +

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

+ +

Ejemplos

+ +

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

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

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

+ +

Ver también

+ + + +

Los diálogos deberían ser etiquetados

+ +

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

+ +

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

+ +

Ejemplos

+ +

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

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

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

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

Ver también

+ + + +

Los documentos deben tener un título

+ +

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

+ +

Ejemplos

+ +

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

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

Otro ejemplo podría ser:

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

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

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

Ver también

+ + + +

Contenido incrustado debe ser etiquetado

+ +

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

+ +

Figuras con leyendas opcionales deberían ser etiquetadas

+ +

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

+ +

Ejemplo

+ +

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

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

Los elementos de un conjuto campos deben ser etiquetados

+ +

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

+ +

Utilizar una leyenda para etiquetar un conjunto de campos

+ +

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

+ +

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

+ +

Ejemplo

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

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

+ +

Ver también

+ + + +

Los elementos de un formulario deben estar etiquetados

+ +

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

+ +

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

+ +

Ejemplos

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

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

+ +

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

+ +

Los elementos marco ('frame') deben estar etiquetados

+ +

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

+ +

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

+ +

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

+ +

Ejemplos

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

Usar el atributo alt para etiquetar elementos mglyph

+ +

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

+ +

Los encabezados deben ser etiquetados

+ +

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

+ +

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

+ +

Los encabezados deberían tener contenido de texto visible

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Contenido con imágenes deben ser etiquetados

+ +

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

+ +

Ejemplo

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

Elementos interactivos deben ser etiquetados

+ +

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

+ +

Usar el atributo label en elementos optgroup

+ +

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

+ +

Ejemplo

+ +

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

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

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

+ +

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

+ +

Ver también

+ + + +

Criterios de aprobación relacionados a WCAG

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

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

+ +

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

+ +

Los cuatro principios

+ +

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

+ +

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

+ + + +

Debo usar WCAG 2.0 o 2.1?

+ +

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

+ +

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

+ +

¿Qué es WCAG 2.1?

+ +

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

+ +

WCAG 2.1 incluye:

+ + + + + +

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

+ +

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

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

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

+ +

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

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

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

+ +

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

+ +

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

+ +

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

+ +

Ejemplos

+ +

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

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

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

+ + + +

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

+ +

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

+ + + +

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

+ +
+
+ +

Solución

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Criterios de conformidad relacionados con WCAG

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

Ver también

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

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

+ +
+

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

+
+ +

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

+ +

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

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

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

+ 		+

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

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

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

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

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

+ 		+

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

+ +

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

+
+ +
+

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

+
+ +

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

+ +

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

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

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

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

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

+
+ +

Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas

+ +

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

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

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

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

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

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

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

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

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

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

Understanding Orientation 

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

 

+ +

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

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

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

+
+ +

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

+ +

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

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

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

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

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

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

This follows, and builds on, criterion 1.4.3.

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

For text content presentation, the following should be true:

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

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

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

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

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

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

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

Los elementos enfocables deben tener una semántica interactiva

+ +

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

+ +
+

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

+
+ +

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

+ +

Ver también

+ + + +

Evitar usar el atributo tabindex con un valor mayor a cero

+ +

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

+ +

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

+ +

Ver también

+ + + +

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

+ +

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

+ +

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

+ +

Ver también

+ + + +

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

+ +

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

+ +

Ver también

+ + + +

Los elementos interactivos deben ser enfocables

+ +

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

+ +

Ver también

+ + + +

Elementos enfocables deben tener un estilo al estar enfocados

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/accessibility/aria/aria_techniques/index.html b/files/es/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..54605f5a65 --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,137 @@ +--- +title: ARIA techniques +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +

Roles

+ +

Widget roles

+ + + +

Composite roles

+ +

The techniques below describes each composite role as well as their required and optional child roles.

+ + + +

Document structure roles

+ + + +

Landmark roles

+ + + +

States and properties

+ +

Widget attributes

+ + + +

Live region attributes

+ + + +

Drag & drop attributes

+ + + +

Relationship attributes

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

Descripción

+ +

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

+ +

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

+ +

Value

+ +

true o false (Default: false)

+ +

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

+ +

Los lectores de pantalla deben anunciar el campo como requerido.

+ +

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

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

Ejemplos

+ +

Ejemplo 1: Un formulario sencillo

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

Ejemplos en acción:

+ +

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

+ +

Notas 

+ +

Usan ARIA roles

+ + + +

Técnicas relacionadas con ARIA

+ + + +

Compatibilidad

+ +

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

+ +

Recursos adicionales

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

Descripción

+ +
+

Esta técnica demuestra como usar el rol alertdialog.

+
+ +

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

+ + + +

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

+ +

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

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

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

+ +

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

+ + + +

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

+ +

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

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

Ejemplos

+ +

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

+ +

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

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

Ejemplos en funcionamiento:

+ +

Pendiente

+ +

Notas 

+ +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidad

+ +

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

+ +

Recursos adicionales

diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html new file mode 100644 index 0000000000..1dc32c0bd0 --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -0,0 +1,138 @@ +--- +title: Using the alert role +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +tags: + - ARIA + - Accesibilidad + - CSS + - HTML + - alert + - alerta + - rol de alerta + - tecnología asistencial +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

Descripción

+ +
+

Esta técnica demuestra como usar el rol alert y describe el efecto que tiene en los navegadores y tecnologías de asistencia.

+
+ +

El rol de alerta es utilizado para comunicar un mensaje importante y normalmente urgente para el usuario. Cuando este rol es añadido a un elemento, el navegador envía un evento de alerta accesible a los productos de tecnología asistencial que notificarán al usuario sobre ésta. El rol de alerta es más útil para información que requiere la atención inmediata del usuario, por ejemplo:

+ + + +

Debido a su naturaleza intrusiva, el rol de alerta debe ser utilizada de forma limitada y sólo en situaciones donde la inmediata atención del usuario es requerida. Cambios dinámicos que son menos urgentes deberían usar un método menos agresivo, como, aria-live="polite"  u otros roles de región en vivo.

+ +

Posibles efectos en agentes de usuario y tecnología asistencial

+ +

Cuando el rol de alerta es añadido a un elemento, o dicho elemento se vuelve visible, el agente de usuario debe hacer lo siguiente:

+ + + +

Productos de tecnología asistencial deben escuchar por dicho evento y notificar al usuario consecuentemente:

+ + + +
Nota: Opiniones pueden diferir en como tecnologías de asistencia deben manejar esta técnica. La información proveida anteriormente es una de estas opiniones y por lo tanto no es normativa.
+ +

Ejemplos

+ +

Ejemplo 1: Agregar el role en el código HTML

+ +

The snippet below shows how the alert role is added directly into the html source code. The moment the element finishes loading the screen reader should be notified of the alert. If the element was already in the original source code when the page loaded, the screen reader will announce the error immediately after announcing the page title.

+ +
<h2 role="alert">Your form could not be submitted because of 3 validation errors.</h2>
+ +

Ejemplo 2: Dinámicamente añadir un elemento con el rol de alerta

+ +

This snippet dynamically creates an element with an alert role and adds it to the document structure.

+ +
var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlert);
+
+ +

Note: The same result can be achieved with less code when using a script library like jQuery:

+ +
$("<p role='alert'>You must agree with our terms of service to create an account.</p>").appendTo(document.body);
+
+ +

Ejemplo 3: Añadir un rol de alerta a un elemento ya existente

+ +

Sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element. This allows the developer to reiterate information that has become more relevant or urgent to the user. For example, a form control may have instruction about the expected value. If a different value is entered, role="alert can be added to the instruction text so that the screen reader announces it as an alert. The pseudo code snippet below illustrates this approach:

+ +
<p id="formInstruction">You must select at least 3 options</p>
+
+ +
// When the user tries to submit the form with less than 3 checkboxes selected:
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Ejemplo 4: Hacer un elemento con un rol de alerta visible

+ +

If an element already has role="alert" and is initially hidden using CSS, making it visible will cause the alert to fire as if it was just added to the page. This means that an existing alert can be "reused" multiple times. 

+ +

Note: In most cases this approach is not recommended, because it's not ideal to hide error or alert text that is currently not applicable. Users of older assistive technology may still be able to perceive the alert text even when the alert does not currently applies, causing users to incorrectly believe that there is a problem.

+ +
.hidden {
+  display:none;
+}
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes</p>
+
+ +
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:
+document.getElementById("expirationWarning").className = "";
+ +

Ejemplos funcionales:

+ + + +

Notas 

+ + + +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidad

+ +

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

+ +

Recursos adicionales

+ + + +

 

diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..b8b319e518 --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,60 @@ +--- +title: Utilizando el atributo aria-label +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - Accesibilidad + - Referencia + - agente +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +
{{draft}}
+ +

El atributo aria-label se utiliza para definir una cadena que etiqueta el elemento actual. Úselo en los casos en que no haya una etiqueta de texto visible en pantalla. Si hay texto visible etiquetando el elemento, utilice aria-labelledby en su lugar.

+ +

Este atributo puede ser utilizado con cualquier elemento HTML típico; no se limita a los elementos que tienen un papel ARIA asignado.

+ +

Valor

+ +

string

+ +

Posibles efectos sobre los agentes de usuario y la tecnología de asistencia 

+ +
Nota: Las opiniones pueden diferir en cómo la tecnología asistencial debe manejar esta técnica. La información proporcionada más arriba es una de esas opiniones y por lo tanto no normativa.
+ +

Ejemplos

+ +
+

Ejemplo 1: Varias etiquetas

+ +

En el siguiente ejemplo se aplica estilo a un botón para que parezca un típico botón "cerrar", con una X en medio. Al no haber nada que indique que el propósito del botón es cerrar el diálogo, se usa el atributo aria-label para proporcionar una etiqueta a cualquier tecnología de asistencia.

+
+ +
<button aria-label="Close" onclick="myDialog.close()">X</button>
+
+ +

Notas

+ + + +

Used by ARIA roles

+ +

Todos los elementos del DOM

+ +

Técnicas ARIA relacionadas

+ + + +

Compatibilidad

+ +

Pendiente: añadir información de soporte para combinaciones de producto comunes a UA y AT.

+ +

Recursos adicionales

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

El problema

+ +

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

+ +

El formulario

+ +

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

+ +

Aquí hay un sencillo formulario:

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

Verificación de validez y notificación al usuario

+ +

La validación de formularios consta de varios pasos:

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

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

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

La función checkValidity

+ +

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

+ +

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

+ +

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

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

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

+ +

La función addAlert

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Modificar el evento "onblur"

+ +

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

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

Probar el ejemplo

+ +

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

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

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

+ +

Algunas preguntas que podrías tener

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

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

+ +

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

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

Etiquetando con ARIA

+ +

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

+ +

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

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

Describiendo con ARIA

+ +

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

+ +

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

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

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

+
+ +

Campos requeridos e inválidos

+ +
+

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

+
+ +

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

+ + + +

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

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

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

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

Ofreciendo Mensajes de Error Útiles

+ +

Lea como usar alertas ARIA para mejorar formularios.

+ +

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

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

Problema

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Ejemplo:

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

Nota para usuarios de JAWS 8

+ +

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

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

¿Puede hacerse sin ARIA?

+ +

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

+
diff --git a/files/es/web/accessibility/aria/forms/index.html b/files/es/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..fc1f08cb9d --- /dev/null +++ b/files/es/web/accessibility/aria/forms/index.html @@ -0,0 +1,17 @@ +--- +title: Formularios +slug: Web/Accessibility/ARIA/forms +tags: + - ARIA + - Accesibilidad +translation_of: Web/Accessibility/ARIA/forms +--- +

Las siguientes páginas proporcionan diversas técnicas para mejorar la accesibilidad de los formularios web:

+ + + +

Consulta también el artículo de Yahoo! sobre validación de formularios y ARIA (recuperado desde archive.org), que abarca gran parte del mismo contenido.

diff --git a/files/es/web/accessibility/aria/index.html b/files/es/web/accessibility/aria/index.html new file mode 100644 index 0000000000..bc0a720962 --- /dev/null +++ b/files/es/web/accessibility/aria/index.html @@ -0,0 +1,142 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA +--- +

Accessible Rich Internet Applications (ARIA) define cómo realizar contenido Web y aplicaciones Web (especialmente las desarrolladas con Ajax y JavaScript) más accesibles a personas con discapacidades. Por ejemplo, ARIA posibilita puntos de navegación accesibles, widgets JavaScript, sugerencias en formularios y mensajes de error, actualizaciones en directo, y más.

+ +

ARIA es un conjunto de atributos especiales para accesibilidad que pueden añadirse a cualquier etiqueta, pero especialmente adaptado a  HTML. El atributo role define el tipo general del objeto (como un artículo, una alerta o un deslizador). Atributos adicionales de ARIA proporcionan otras propiedades útiles, como una descripción para un formulario o el valor actual de una barra de progreso.

+ +

ARIA está implementado en la mayoría de los navegadores y lectores de pantalla más populares. De todas formas, las implementaciones varían y las tecnologías antiguas no lo soportan bien (si es que lo soportan). Use "safe" en ARIA, que reduce elegantemente la funcionalidad en caso necesario o pida a los usuarios actualizarse a una tecnología más actual.

+ +
+

Nota: Por favor, ¡contribuya y mejore ARIA para el siguiente que llegue! ¿No tiene tiempo suficiente? Envíe sus sugerencias a la lista de distribución de accesibilidad de Mozilla o al canal IRC #accessibility.

+
+ + + + + + + + + + + + + +
+

Primeros pasos con ARIA

+ +
+
Introducción a ARIA
+
Una Rápida introducción a la creación de contenido dinámico accesible con ARIA. También revisa el clásico ARIA intro by Gez Lemon, de 2008.
+
Preguntas frecuentes sobre Aplicaciones Web y ARIA
+
Responde preguntas comunes acerca de WAI-ARIA y por qué es necesario para hacer aplicaciones web accesibles.
+
Videos de Lectores de Pantalla usando ARIA
+
Mira ejemplos reales y simplificados de toda la web, incluyendo videos "antes" y "despues" de ARIA.
+
Usando ARIA en HTML
+
Una guía practica para desarrolladores. Sugiere que atributos ARIA usar en elementos HTML. Las sugerencias están basadas en implementaciones reales.
+
+ +

Mejoras sencillas de ARIA

+ +
+
Mejorando la navegación de página con ARIA Landmarks
+
Una buena escusa para introducirte al uso del marcado ARIA es la mejora de la navegación web para los usuarios de lectores de patalla. Ver también, ARIA landmark notas de implementación y ejemplos en sitios reales (actualizado en Julio 11).
+
Mejorando accesibilidad de formularios
+
ARIA no es sólo para contenido dinámico! Aprende como mejorar la accesibilidad de formularios HTML usando atributos adicionales de ARIA. 
+
Live regions (work-in-progress)
+
Live regions provide suggestions to screen readers about how to handle changes to the contents of a page.
+
Using ARIA Live Regions to Announce Content Changes
+
A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).
+
+ +

ARIA for Scripted Widgets

+ +
+
Keyboard Navigation and Focus for JavaScript Widgets
+
The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The Yahoo! focus management article is a great resource as well.
+
Style Guide for Keyboard Navigation
+
A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.
+
+ +

ARIA Resources

+ +
+
Widget Techniques, Tutorials, and Examples
+
Need a slider, a menu, or another kind of widget? Find resources here.
+
Librerías de UI JavaScript con soporte ARIA
+
Si necesita comenzar un nuevo proyecto, elija una librería de controles UI que incluya soporte ARIA. Advertencia: esto es del 2009 -- el contenido debe moverse a una página MDN donde pueda actualizarse.
+
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials
+
Incluye diapositivas y ejemplos.
+
+ 		+

Lista de correo

+ +
+
Free ARIA Google Group
+
A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.
+
+ +

Blogs

+ +

ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.

+ +

Paciello Group

+ +

Accessible Culture

+ +

Filing Bugs

+ +

File ARIA bugs on browsers, screen readers, and JavaScript libraries.

+ +

Ejemplos

+ +
+
ARIA Examples Library
+
A set of barebones example files which are easy to learn from.
+
Accessible JS Widget Library Demos
+
Dojo, jQuery, Fluid, YUI
+
+ +
+
Yahoo! Mail
+
Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a review of Yahoo! Mail by screen reader Marco Zehe says, "Keep up the good work!".
+
+ +
+
Yahoo! Search
+
Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and sharing their techniques. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.
+
+ +

Standardization Efforts

+ +
+
WAI-ARIA Activities Overview at W3C
+
Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)
+
WAI-ARIA Specification
+
The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.
+
WAI-ARIA Authoring Practices
+
Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.
+
+ For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.
+
Open AJAX Accessibility Task Force
+
The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.
+
Under Construction: WCAG 2.0 ARIA Techniques
+
The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.
+
+
+ + +
+
Accessibility, AJAX, JavaScript
+
+
+ +

 

diff --git a/files/es/web/api/abstractworker/index.html b/files/es/web/api/abstractworker/index.html new file mode 100644 index 0000000000..f3f50ecf38 --- /dev/null +++ b/files/es/web/api/abstractworker/index.html @@ -0,0 +1,130 @@ +--- +title: AbstractWorker +slug: Web/API/AbstractWorker +translation_of: Web/API/AbstractWorker +--- +

{{ APIRef("Web Workers API") }}

+ +

La interfaz AbstractWorker de la API de Web Workers es una interfaz abstracta que define propiedades métodos comunes a toda clase de workers, no sólo al {{domxref("Worker")}} básico sino también el {{domxref("ServiceWorker")}} y el {{domxref("SharedWorker")}}.
+ Al ser una clase abstracta, usted no interactúa directamente con el AbstractWorker.

+ +

Propiedades

+ +

La interfaz AbstractWorker no hereda ninguna propiedad.

+ +

Gestor de eventos

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Es un {{ domxref("EventListener") }} el cual es invocado siempre que un {{domxref("ErrorEvent")}} de tipo error se gatilla através del worker.
+
+ +

Métodos

+ +

La interfaz AbstractWorker no implementa o hereda ningún método.

+ +

Ejemplo

+ +

Note que usted no estará usando la interfaz AbstractWorker diractamente en su código — cuando es invocada, {{domxref("Worker")}} y {{domxref("SharedWorker")}} heredan sus propiedades.

+ +

El siguiente fragmento de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor {{domxref("Worker.Worker", "Worker()")}} , junto con la forma de uso del objeto creado:

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Mensaje enviado al worker');
+}
+ +

El código del worker se carga desde el archivo "worker.js". Éste código asume que hay un elemento del tipo {{HTMLElement("input")}} representado como first; un gestor de evento para el evento {{domxref("change")}} se define para que cuando el usuario cambie el valor de first, un mensaje se enviará al worker haciendoselo saber.

+ +

Para ejemplos completos, visitar:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("HTML WHATWG")}}No existen cambios para {{SpecName("Web Workers")}}.
{{SpecName("Web Workers", "#the-abstractworker-abstract-interface", "AbstractWorker")}}{{Spec2("Web Workers")}}Definición inicial.
+ +

Compatibilidad en Navegadores

+ +
{{CompatibilityTable()}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome(4)}}{{CompatGeckoDesktop("1.9.1")}}1010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatGeckoMobile("1.9.1")}}1.0.11011.55.1
+
+ +

Vease también

+ + diff --git a/files/es/web/api/ambient_light_events/index.html b/files/es/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..4ea45847c0 --- /dev/null +++ b/files/es/web/api/ambient_light_events/index.html @@ -0,0 +1,114 @@ +--- +title: Luz Ambiental Eventos +slug: Web/API/Ambient_Light_Events +translation_of: Web/API/Ambient_Light_Events +--- +
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
+ +

Los eventos de luz ambiental son una forma práctica de hacer una página web o una aplicación al tanto de cualquier cambio en la intensidad de la luz. Se les permite reaccionar a un cambio de este tipo, por ejemplo, cambiando el contraste de color de la interfaz de usuario (UI) o cambiando la exposición necesaria para tomar una foto.

+ +

Eventos de luz

+ +

Cuando el sensor de luz de un dispositivo detecta un cambio en el nivel de luz, notifica al navegador de ese cambio. Cuando el navegador recibe dicha notificación, se dispara un {{domxref ( "DeviceLightEvent")}} evento que proporciona información sobre la intensidad de la luz exacta.

+ +

Este evento puede ser capturado en el plano objeto de la ventana mediante el uso de la {{domxref ( "EventTarget.addEventListener", "addEventListener")}} El método (usando el {{event( "devicelight")}} nombre del evento) o adjuntando una controlador de eventos al {{domxref ( "window.ondevicelight")}} propiedad.

+ +

Una vez capturado, el objeto de evento da acceso a la intensidad de la luz expresada en lux a través de la {{domxref ( "DeviceLightEvent.value")}} propiedad.

+ +

Ejemplo

+ +
if ('ondevicelight' in window) {
+  window.addEventListener('devicelight', function(event) {
+    var body = document.querySelector('body');
+    if (event.value < 50) {
+      body.classList.add('darklight');
+      body.classList.remove('brightlight');
+    } else {
+      body.classList.add('brightlight');
+      body.classList.remove('darklight');
+    }
+  });
+} else {
+  console.log('devicelight event not supported');
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}definición inicial
+ +

Compatibilidad del Navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatGeckoDesktop("22.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceLightEvent")}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("15.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] The {{event("devicelight")}} event is implemented and preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}} a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).

+ +

See also

+ + diff --git a/files/es/web/api/analysernode/index.html b/files/es/web/api/analysernode/index.html new file mode 100644 index 0000000000..73a51adba8 --- /dev/null +++ b/files/es/web/api/analysernode/index.html @@ -0,0 +1,218 @@ +--- +title: AnalyserNode +slug: Web/API/AnalyserNode +translation_of: Web/API/AnalyserNode +--- +

{{APIRef("Web Audio API")}}

+ +

La interfaz AnalyserNode representa un nodo habilitado para proveer frecuencia en tiempo real y analisis de tiempo-dominio. Es un {{domxref("AudioNode")}} que pasa el flujo de audio sin modificación desde el origen de entrada a la salida, pero, te permite obtener los datos generados, procesarlos, y crear visualizaciones de audio.

+ +

Un AnalyzerNode tiene exactamente una entrada y una salida. El nodo trabaja incluso si la salida no se encuentra conectada.

+ +

Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Numero de entradas1
Numero de salidas1 (puede estar desconectada)
Modo de conteo de canal"explicit"
Conteo de cana1
Interpretación de canal"speakers"
+ +

Herencia

+ +

Esta interfaz hereda de las siguientes interfaces padre:

+ +

{{InheritanceDiagram}}

+ +

Propiedades

+ +

Inherits properties from its parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("AnalyserNode.fftSize")}}
+
Is an unsigned long value representing the size of the FFT (Fast Fourier Transform) to be used to determine the frequency domain.
+
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
+
Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.
+
{{domxref("AnalyserNode.minDecibels")}}
+
Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using getByteFrequencyData().
+
{{domxref("AnalyserNode.maxDecibels")}}
+
Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using getByteFrequencyData().
+
{{domxref("AnalyserNode.smoothingTimeConstant")}}
+
Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
+
Copies the current frequency data into a {{domxref("Float32Array")}} array passed into it.
+
+ +
+
{{domxref("AnalyserNode.getByteFrequencyData()")}}
+
Copies the current frequency data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.
+
+ +
+
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
+
Copies the current waveform, or time-domain, data into a {{domxref("Float32Array")}} array passed into it.
+
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
+
Copies the current waveform, or time-domain, data into a {{domxref("Uint8Array")}} (unsigned byte array) passed into it.
+
+ +

Examples

+ +
+

Note: See the guide Visualizations with Web Audio API for more information on creating audio visualizations.

+
+ +

Basic usage

+ +

The following example shows basic usage of an {{domxref("AudioContext")}} to create an AnalyserNode, then {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 128–205 for relevant code).

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// draw an oscilloscope of the current audio source
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      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();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

See also

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

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

+ +

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

+ +

Sintaxis

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

Parámetros

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

Ejemplos

+ +

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

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

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/cancel/index.html b/files/es/web/api/animation/cancel/index.html new file mode 100644 index 0000000000..e08956221a --- /dev/null +++ b/files/es/web/api/animation/cancel/index.html @@ -0,0 +1,119 @@ +--- +title: Animation.cancel() +slug: Web/API/Animation/cancel +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - cancel + - metodo + - waapi +translation_of: Web/API/Animation/cancel +--- +

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

+ +

El método cancel() de la Web Animations API de la interfaz {{domxref("Animation")}} borra todos los {{domxref("KeyframeEffect")}} causados por esta animación y aborta su reproducción.

+ +
+

Cuando se cancela una animación, su {{domxref("Animation.startTime", "startTime")}} y su {{domxref("Animation.currentTime", "currentTime")}} se establecen en  null.

+
+ +

Sintaxis

+ +
Animation.cancel();
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +

Excepciones

+ +

Este método no arroja excepciones directamente; sin embargo, si la animación {{domxref ("Animation.playState", "playState")}} no está "idle""inactiva" cuando se cancela, el {{domxref ("Animation.finished", "current finished promise", "", 1)}} se rechaza con un {{domxref ("DOMException")}} llamado AbortError.

+ +
+
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/effect/index.html b/files/es/web/api/animation/effect/index.html new file mode 100644 index 0000000000..f4283c52c4 --- /dev/null +++ b/files/es/web/api/animation/effect/index.html @@ -0,0 +1,104 @@ +--- +title: Animation.effect +slug: Web/API/Animation/effect +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - efecto +translation_of: Web/API/Animation/effect +--- +
{{ SeeCompatTable() }} {{ APIRef("Web Animations") }}
+ +

La propiedad Animation.effect de la  Web Animations API obtiene y establece el efecto objetivo de una animación. El efecto objetivo puede ser un objeto efecto de un tipo basado en {{domxref("AnimationEffectReadOnly")}}, como {{domxref("KeyframeEffect")}}, o null.

+ +

Sintaxis

+ +
var effect = Animation.effect;
+
+Animation.effect = {{domxref("AnimationEffectReadOnly")}}
+ +

Valor

+ +

Un objeto {{domxref("AnimationEffectReadOnly")}} que describe el efecto de animación objetivo para la animación, o null para indicar que el efecto no está activo.

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

Compatibilidad con navegadores

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

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

+ +

[2] Esta propiedad es compatible con Firefox 48 pero es de solo-lectura. La versión Firefox 51 admite también escritura.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/finish/index.html b/files/es/web/api/animation/finish/index.html new file mode 100644 index 0000000000..69ed0e4a68 --- /dev/null +++ b/files/es/web/api/animation/finish/index.html @@ -0,0 +1,147 @@ +--- +title: Animation.finish() +slug: Web/API/Animation/finish +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Finish + - Reference + - metodo + - waapi +translation_of: Web/API/Animation/finish +--- +

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

+ +
+

El método finish() de la interfaz {{domxref("Animation")}} de la Web Animations API  establece el tiempo de reproducción actual hasta el final de la animación correspondiente a la dirección de reproducción actual. Es decir, si la animación se está reproduciendo hacia adelante, establece el tiempo de reproducción a la longitud de la secuencia de animación, y si la animación se reproduce hacia atras , (habiendo llamado a su método {{domxref("Animation.reverse", "reverse()")}}), establece el tiempo de la reproducción en 0.

+
+ +

Sintaxis

+ +
Animation.finish();
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +
+
+ +

Excepciones

+ +
+
InvalidState
+
La velocidad de reproducción del reproductor es 0 o la velocidad de reproducción de la animación es mayor que 0 y el tiempo de finalización de la animación es infinito.
+
+ +

Ejemplos

+ +

El siguiente ejemplo muestra cómo usar el método finish() y captura un error InvalidState.

+ +
interfaceElement.addEventListener("mousedown", function() {
+  try {
+    player.finish();
+  } catch(e if e instanceof InvalidState) {
+    console.log("finish() called on paused or finished animation.");
+  } catch(e);
+    logMyErrors(e); //pasa el objeto excepción al manejador de errores.
+  }
+});
+
+ +

El siguiente ejemplo finaliza todas las animaciones en un solo elemento, independientemente de su dirección de reproducción.

+ +
elem.getAnimations().forEach(
+  function(animation){
+    return animation.finish();
+  }
+);
+
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

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

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

+ +

La propiedad Animation.id de la Web Animations API devuelve o establece una cadena(string) utilizado para identificar la animación.

+ +

Sintaxis

+ +
var animationsId = Animation.id;
+
+Animation.id = newIdString;
+
+ +

Valor

+ +

Un {{domxref("DOMString")}} que se puede usar para identificar la animación, o null si la animación no tiene id.

+ +

Ejemplos

+ +

En el ejemplo Follow the White Rabbit , puedes asignar  a rabbitDownAnimation un  id de esta manera:

+ +
rabbitDownAnimation.effect.id = "rabbitGo";
+
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/index.html b/files/es/web/api/animation/index.html new file mode 100644 index 0000000000..ac1f5f46fb --- /dev/null +++ b/files/es/web/api/animation/index.html @@ -0,0 +1,147 @@ +--- +title: Animation +slug: Web/API/Animation +tags: + - API + - Animacion + - Experimental + - Interfaz + - Reeferencia + - Web Animations + - waapi + - web animation api +translation_of: Web/API/Animation +--- +
{{ APIRef("Web Animations") }}{{SeeCompatTable}}
+ +

La interfaz Animation de la  Web Animations API representa un reproductor de animación y proporciona controles de reproducción y una línea de tiempo para un nodo o una fuente de animación.

+ +

Constructor

+ +
+
{{domxref("Animation.Animation()", "Animation()")}}
+
Crea una nueva instancia de objeto Animation.
+
+ +

Propiedades

+ +
+
{{domxref("Animation.currentTime")}}
+
El valor del tiempo de la animación actual en milisegundos , ya sea en ejecución o en pausa. Si la animación carece de {{domxref("AnimationTimeline", "timeline")}}, está inactivo, o no se ha reproducido todavía, su valor es null.
+
+ +
+
{{domxref("Animation.effect")}}
+
Obtiene y establece el {{domxref("AnimationEffectReadOnly")}} asociado con esta animación. Normalmente, este será un objeto {{domxref("KeyframeEffect")}}.
+
{{domxref("Animation.finished")}} {{readOnlyInline}}
+
Devuelve la Promesa actual terminada para esta animación.
+
+ +
+
{{domxref("Animation.id")}}
+
Obtiene y establece la String usada para identificar la animación.
+
{{domxref("Animation.playState")}} {{readOnlyInline}}
+
Devuelve un valor enumerado que describe el estado de la reproducción de una animación.
+
+ +
+
{{domxref("Animation.playbackRate")}}
+
Obtiene o establece la velocidad de reproducción de la animación.
+
+ +
+
{{domxref("Animation.ready")}} {{readOnlyInline}}
+
Devuelve la Promesa actual lista para esta animación.
+
+ +
+
{{domxref("Animation.startTime")}}
+
Obiene o establece la hora programada en la que debe comenzar la reproducción de la animación.
+
+ +
+
{{domxref("Animation.timeline")}}
+
Obtiene o establece el  {{domxref("AnimationTimeline", "timeline")}} asociado con esta animación.
+
+ +

Manejadores de eventos

+ +
+
{{domxref("Animation.oncancel")}}
+
Obtiene y establece en manejador de eventos para el evento cancel.
+
{{domxref("Animation.onfinish")}}
+
Obtiene y establece en manejador de eventos para el evento finish .
+
+ +

Métodos

+ +
+
{{domxref("Animation.cancel()")}}
+
Borra todos los {{domxref("KeyframeEffect", "keyframeEffects")}} causados por la animación y aborta su reproducción.
+
+ +
+
{{domxref("Animation.finish()")}}
+
Busca cualquier final de una animación, dependiendo de si la animación se está reproduciendo o invirtiendo.
+
+ +
+
{{domxref("Animation.pause()")}}
+
Pone la reproducción en pausa.
+
+ +
+
{{domxref("Animation.play()")}}
+
Busca el final de una animación, dependiendo de si la animación se está reproduciendo o si se está invirtiendo.
+
+ +
+
{{domxref("Animation.reverse()")}}
+
Invierte la dirección de reproducción, deteniéndose al comienzo de la animación. Si la animación finaliza o no se activa, volverá a reproducirse desde el final al principio.
+
+ +
+
{{domxref("Animation.updatePlaybackRate()")}}
+
Establece la velocidad de la animación después de sincronizar por primera vez su posición de reproducción.
+
+ +

Problemas de accesibilidad

+ +

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

+ +

Considera ofrecer un mecanismo para pausar o deshabilitar las animaciones, así como utilizar Reduced Motion Media Query para crear una experiencia complementaria para los usuarios que han expresado su preferencia por experiencias no animadas.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

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

+ +

Ver también

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

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

+ +

La propiedad oncancel de la interfaz {{domxref("Animation")}} de la  Web Animations API es el manejador de eventos para el evento {{event("cancel")}} .

+ +

El evento cancel puede ser activado manualmente con {{domxref("Animation.cancel()")}} cuando la animación entra en estado de reproducción "idle"(inactivo) desde otro estado, como cuando una animación se elimina de un elemento antes de que termine de reproducirse.

+ +
+

La creación de una nueva animación, inicialmente inactiva, no activa el evento {{event("cancel")}} en la nueva animación.

+
+ +

Sintaxis

+ +
var cancelHandler = Animation.oncancel;
+
+Animation.oncancel = cancelHandler;
+ +

Valor

+ +

Una función que será ejecutada cuando la animación sea cancelada, o null si no hay un manejador de eventos {{event("cancel")}}.

+ +

Ejemplos

+ +

Si esta animación es cancelada, elimina su elemento.

+ +
animation.oncancel = animation.effect.target.remove();
+
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/onfinish/index.html b/files/es/web/api/animation/onfinish/index.html new file mode 100644 index 0000000000..592014f698 --- /dev/null +++ b/files/es/web/api/animation/onfinish/index.html @@ -0,0 +1,131 @@ +--- +title: Animation.onfinish +slug: Web/API/Animation/onfinish +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - onfinish + - waapi +translation_of: Web/API/Animation/onfinish +--- +

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

+ +

La propiedad onfinish de la interfaz {{domxref("Animation")}} (de la Web Animations API) es el manejador de eventos para el evento {{event("finish")}}. Este evento se envía cuando la animación termina de reproducirse.

+ +

El evento finish ocurre cuando la reproducción se completa de forma natural, así como cuando se llama al  método {{domxref("Animation.finish()")}} para que la animación termine inmediatamente.

+ +
+

El estado de reproducción "paused" reemplaza al estado  "finished" ; Si la animación está pausada y finalizada, el estado"paused" será el único reportado. Puedes forzar el estado de la animación a "finished" configurando su {{domxref("Animation.startTime", "startTime")}} a document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate).

+
+ +

Sintaxis

+ +
var finishHandler = Animation.onfinish;
+
+Animation.onfinish = finishHandler;
+ +

Valor

+ +

Una función que debe ser llamada para manejar el evento {{event("finish")}} , o null si no se establece ningún manejador para el evento finish.

+ +

Ejemplos

+ +

Animation.onfinish es utilizado en varias ocasiones en el juego de Alice in Web Animations API Land Growing/Shrinking Alice Game.  Aquí hay una instancia en la que agregamos eventos de puntero a un elemento después de que su animación de opacidad se haya desvanecido:

+ +
// Agrega una animación a los créditos finales del juego.
+var endingUI = document.getElementById("ending-ui");
+var bringUI = endingUI.animate(keysFade, timingFade);
+
+// Pone en Pausa dichos créditos.
+bringUI.pause();
+
+// Esta función elimina los eventos de puntero en los créditos.
+hide(endingUI);
+
+// Cuando los créditos se hayan desvanecido,
+// volvemos a agregar los eventos de puntero cuando terminen.
+bringUI.onfinish = function() {
+  endingUI.style.pointerEvents = 'auto';
+};
+
+
+ +

Especificaciones

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

Browser compatibility

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/pause/index.html b/files/es/web/api/animation/pause/index.html new file mode 100644 index 0000000000..0c0329dda7 --- /dev/null +++ b/files/es/web/api/animation/pause/index.html @@ -0,0 +1,106 @@ +--- +title: Animation.pause() +slug: Web/API/Animation/pause +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Referencia + - pausar + - pause + - waapi +translation_of: Web/API/Animation/pause +--- +

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

+ +

El método pause() de la interfaz {{domxref("Animation")}} de la  Web Animations API, suspende la reproducción de la animación.

+ +

Sintaxis

+ +
animation.pause();
+
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

None.

+ +

Excepciones

+ +
+
InvalidStateError
+
La animación {{domxref ("Animation.currentTime", "currentTime")}} no está resuelta unresolved (por ejemplo, si nunca se ha reproducido o no se está reproduciendo actualmente) y el tiempo de finalización de la animación es infinito positivo.
+
+ +

Lanza un InvalidStateError si el {{domxref("Animation.currentTime", "currentTime")}} de la animación no está resuelto unresolved (tal vez no se haya iniciado la reproducción) y el fin de la animación es infinito positivo.

+ +

Ejemplos

+ +

Animation.pause() es utilizado en varias ocasiones en el juego Alice in Web Animations API Land Growing/Shrinking Alice Game, porque las animaciones creadas con el método {{domxref("Element.animate()")}} se inician de inmediato y deben ser detenidas manualmente para evitar esto:

+ +
// animación de la magdalena que lentamente se está comiendo
+var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+
+// realmente solo debe funcionar al hacer click, así que se pausa inicialmente:
+nommingCake.pause();
+
+ +

Adicionalmente, al restablecer:

+ +
// Una función multiusos para pausar las animaciones de Alicia, el pastelito y la botella que dice "drink me."
+var stopPlayingAlice = function() {
+  aliceChange.pause();
+  nommingCake.pause();
+  drinking.pause();
+};
+
+// Cuando el usuario suelte el cupcake o la botella, pause las animaciones.
+cake.addEventListener("mouseup", stopPlayingAlice, false);
+bottle.addEventListener("mouseup", stopPlayingAlice, false);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Animations', '#dom-animation-pause', 'play()')}}{{Spec2("Web Animations")}}
+ +

Compatibilidad en navegadores

+ +
+

{{Compat("api.Animation.pause")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/animation/play/index.html b/files/es/web/api/animation/play/index.html new file mode 100644 index 0000000000..9ccb5d68a6 --- /dev/null +++ b/files/es/web/api/animation/play/index.html @@ -0,0 +1,149 @@ +--- +title: Animation.play() +slug: Web/API/Animation/play +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - metodo + - play + - waapi +translation_of: Web/API/Animation/play +--- +
{{ APIRef("Web Animations") }}{{SeeCompatTable}}
+ +

El método play() de la interfaz {{ domxref("Animation") }} de la  Web Animations API inicia o reanuda la reproducción de una animación. Si la animación ha finalizado, llamando a  play() reinicia la animación y la reproduce desde el principio.

+ +

Sintaxis

+ +
animation.play();
+
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}

+ +

Ejemplo

+ +

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar el pastel hace que la animación de crecimiento de Alicia (aliceChange) sea reproducida hacia adelante, causando que Alicia se haga más grande, ademas de desencadenar la animación del pastel. Dos  Animation.play() y un EventListener:

+ +
// El pastel tiene su propia animación:
+var nommingCake = document.getElementById('eat-me_sprite').animate(
+[
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(-80%)' }
+], {
+  fill: 'forwards',
+  easing: 'steps(4, end)',
+  duration: aliceChange.effect.timing.duration / 2
+});
+
+// Pausa la animación del pastel para que no se reproduzca inmediatamente.
+nommingCake.pause();
+
+// Esta función se reproducirá cuando el usuario haga click o toque
+var growAlice = function() {
+
+  // Reproduce la animación de Alicia.
+  aliceChange.play();
+
+  // Reproduce la animación del pastel.
+  nommingCake.play();
+
+}
+
+// Cuando el usuario hace click o toca, llama a growAlice, para reproducir todas las animaciones.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/playbackrate/index.html b/files/es/web/api/animation/playbackrate/index.html new file mode 100644 index 0000000000..0961c0bd6c --- /dev/null +++ b/files/es/web/api/animation/playbackrate/index.html @@ -0,0 +1,162 @@ +--- +title: Animation.playbackRate +slug: Web/API/Animation/playbackRate +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - playbackRate +translation_of: Web/API/Animation/playbackRate +--- +

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

+ +

La propiedad Animation.playbackRate de la Web Animations API devuelve o  establece la velocidad de reproducción de la animación.

+ +

Las animaciones tienen un playback rate que proporciona un factor de escala para el cambio de velocidad de la animación {{domxref("DocumentTimeline", "timeline")}} valores del estado actual de la linea de tiempo de la animación. La velocidad de reproducción inicial es 1.

+ +

Sintaxis

+ +
var currentPlaybackRate = Animation.playbackRate;
+
+Animation.playbackRate = newRate;
+
+ +

Valor

+ +

Toma un número que puede ser 0, negativo o positivo. Los valores negativos invierten la animación. El valor es un factor de escala, por lo que, por ejemplo, un valor de 2 duplicaría la velocidad de reproducción.

+ +
+

si establecemos el playbackRate a 0 pausa la animación de manera efectiva (sin embargo, su {{domxref("Animation.playstate", "playstate")}} no se convierte necesariamente en  paused).

+
+ +

Ejemplos

+ +

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia  (aliceChange) se invierta para reducirse:

+ +
var shrinkAlice = function() {
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia se encogerá.
+bottle.addEventListener("mousedown", shrinkAlice, false);
+bottle.addEventListener("touchstart", shrinkAlice, false);
+
+ +

Por el contrario, hacer click en el pastel hace que "crezca" reproduciendo aliceChange hacia adelante otra vez:

+ +
var growAlice = function() {
+  aliceChange.playbackRate = 1;
+  aliceChange.play();
+}
+
+// Con un toque o un click, Alicia crecerá.
+cake.addEventListener("mousedown", growAlice, false);
+cake.addEventListener("touchstart", growAlice, false);
+
+ +

En otro ejemplo,  Red Queen's Race Game, Alicia y La Reina Roja están ralentizandose constantemente:

+ +
setInterval( function() {
+
+  // Asegúrate de que la velocidad de reproducción nunca descienda por debajo de .4
+
+  if (redQueen_alice.playbackRate > .4) {
+    redQueen_alice.playbackRate *= .9;
+  }
+
+}, 3000);
+
+ +

Pero hacer click o hacer tapping(pasar el puntero) sobre ellos hace que aceleren multiplicando su playbackRate(velocidad de reproducción):

+ +
var goFaster = function() {
+  redQueen_alice.playbackRate *= 1.1;
+}
+
+document.addEventListener("click", goFaster);
+document.addEventListener("touchstart", goFaster);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-playbackrate', 'Animation.playbackRate')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/playstate/index.html b/files/es/web/api/animation/playstate/index.html new file mode 100644 index 0000000000..35d104739b --- /dev/null +++ b/files/es/web/api/animation/playstate/index.html @@ -0,0 +1,158 @@ +--- +title: Animation.playState +slug: Web/API/Animation/playState +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - playState +translation_of: Web/API/Animation/playState +--- +

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

+ +

La propiedad  Animation.playState de la Web Animations API devuelve y establece un valor enumerado que describe el estado de reproducción de una animación.

+ +
+

Esta propiedad es de solo lectura para las Animaciones y Transiciones en CSS.

+
+ +

Sintaxis

+ +
var currentPlayState = Animation.playState;
+
+Animation.playState = newState;
+
+ +

Valor

+ +
+
idle(inactivo)
+
El tiempo actual de la animación no está resuelto y no hay tareas pendientes.
+
pending(pendiente)
+
La animación está esperando que se complete una tarea pendiente.
+
running(funcionando)
+
La animación se está ejecutando.
+
paused(pausado)
+
La animación se ha suspendido y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.
+
finished(finalizado)
+
La animación ha alcanzado uno de sus límites y la propiedad {{domxref ("Animation.currentTime")}} no se está actualizando.
+
+ +

Ejemplo

+ +

En el ejemplo Growing/Shrinking Alice Game , los jugadores pueden tener un final con (Alicia llorando en un mar de lágrimas) Alice crying into a pool of tears. En el juego, por razones de rendimiento, las lágrimas solo se deben animar cuando son visibles. Por lo tanto, deben detenerse tan pronto como estén animadas, de esta manera:

+ +
// Configurando las animaciones de lágrimas
+
+tears.forEach(function(el) {
+  el.animate(
+    tearsFalling,
+    {
+      delay: getRandomMsRange(-1000, 1000), // cada lágrima aleatoria
+      duration: getRandomMsRange(2000, 6000), // cada lágrima aleatoria
+      iterations: Infinity,
+      easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)"
+    });
+  el.playState = 'paused';
+});
+
+
+// Reproduce las lágrimas cayendo cuando el final necesita mostrarlas.
+
+tears.forEach(function(el) {
+  el.playState = 'playing';
+});
+
+
+// Reinicia la animación de las lágrimas y la detiene.
+
+tears.forEach(function(el) {
+  el.playState = "paused";
+  el.currentTime = 0;
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#play-state', 'playState')}}{{Spec2("Web Animations")}}Initial definition.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}} [1]{{CompatGeckoDesktop(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(39.0)}} [1]{{CompatChrome(39.0)}} [1]{{CompatGeckoMobile(48)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Antes de Chrome 50, este atributo mostraba idle para una animación que aún no había comenzado. A partir de Chrome 50, muestra paused.

+ +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/ready/index.html b/files/es/web/api/animation/ready/index.html new file mode 100644 index 0000000000..35dfb68954 --- /dev/null +++ b/files/es/web/api/animation/ready/index.html @@ -0,0 +1,122 @@ +--- +title: Animation.ready +slug: Web/API/Animation/ready +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Ready Promise + - Reference +translation_of: Web/API/Animation/ready +--- +

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

+ +

La propiedad de solo-lectura  Animation.ready de la Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve cuando la animación está lista para reproducirse. Una nueva 'promesa' es creada cada vez que la animación entra en play state(estado de reproducción) "pending"(pendiente) así como si la reproducción es cancelada, ya que en ambos escenarios, la animación estará lista para ser reiniciada.

+ +
+

Dado que la misma {{jsxref("Promise")}} es usada para las solicitudes pendientes de play ypause , se recomienda a los autores que comprueben el estado de la animación cuando se resuelva la promesa.

+
+ +

Sintaxis

+ +
var readyPromise = Animation.ready;
+
+ +

Valor

+ +

Un {{jsxref("Promise")}} que se resuelve cuando la animación esta lista para reproducirse. Por lo general, se usará una construcción similar a esta usando una promise lista:

+ +
animation.ready.then(function() {
+  // Hace lo que sea necesario cuando
+  // la animación está lista para reproducirse
+});
+ +

Ejemplo

+ +

En el siguiente ejemplo, el estado de la animación será running(reproduciendo) cuando la Promise actual se resuelva ya que la animación no deja el estado de reproducción pending entre las llamadas pause and play ,por lo tanto, la Promise actual no cambia.

+ +
animation.pause();
+animation.ready.then(function() {
+  // Displays 'running'
+  alert(animation.playState);
+});
+animation.play();
+
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/reverse/index.html b/files/es/web/api/animation/reverse/index.html new file mode 100644 index 0000000000..9f2dbf790e --- /dev/null +++ b/files/es/web/api/animation/reverse/index.html @@ -0,0 +1,136 @@ +--- +title: Animation.reverse() +slug: Web/API/Animation/reverse +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - metodo + - reverse + - waapi +translation_of: Web/API/Animation/reverse +--- +
{{APIRef("Web Animations")}}{{SeeCompatTable}}
+ +

El método Animation.reverse() de la interfaz {{ domxref("Animation") }} Interface invierte la dirección de reproducción, lo que significa que la animación termina al principio. Si se llama en una animación sin reproducir, toda la animación se reproduce al revés. Si se llama en una animación pausada, continúa a la inversa.

+ +

Sintaxis

+ +
animation.reverse();
+
+ +

Parámetros

+ +

None.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}

+ +

Ejemplos

+ +

En el ejemplo Growing/Shrinking Alice Game , hacer click o tocar la botella, hace que la animación de crecimiento de Alicia(aliceChange) sea reproducida al revés, lo que la hace más pequeña. Esto se hace estableciendo el {{ domxref("Animation.playbackRate") }} de aliceChange  en -1 de esta forma:

+ +
var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.playbackRate = -1;
+  aliceChange.play();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}
+ +

Pero también se podría haber hecho lamando a reverse() en aliceChange así:

+ +
var shrinkAlice = function() {
+  // reproduce la animación de Alicia al revés.
+  aliceChange.reverse();
+
+  // reproduce la animación de la botella.
+  drinking.play()
+}
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/starttime/index.html b/files/es/web/api/animation/starttime/index.html new file mode 100644 index 0000000000..8ad69e8ffa --- /dev/null +++ b/files/es/web/api/animation/starttime/index.html @@ -0,0 +1,138 @@ +--- +title: Animation.startTime +slug: Web/API/Animation/startTime +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Interface + - Reference + - startTime +translation_of: Web/API/Animation/startTime +--- +

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

+ +

La propiedad Animation.startTime de la interfaz {{domxref ("Animación")}} es un valor de punto flotante de doble precisión que indica el tiempo programado en el que debe comenzar la reproducción de una animación.

+ +

El  start time (tiempo de inicio) es el valor de tiempo de su {{domxref("timeline", "DocumentTimeline")}}cuando su objetivo {{domxref("KeyframeEffect")}} está programado para comenzar la reproducción. El start time (tiempo de inicio) de una animación inicialmente no está resuelto (lo que significa que es null porque no tiene valor).

+ +

Sintaxis

+ +
var animationStartedWhen = Animation.startTime;
+
+Animation.startTime = newStartTime;
+ +

Valor

+ +

Un número de punto flotante que representa el tiempo actual en milisegundos, o nulo si no se establece ningún valor de  tiempo. Puede leer este valor para determinar en qué momento está establecido el punto de inicio, y puede modificarlo para que la animación comience en un momento diferente.

+ +

Ejemplos

+ +

En el ejemplo Running on Web Animations API example, podemos sincronizar todos los nuevos gatos animados dándoles el mismo tiempo de inicio startTime que el gato original:

+ +
var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing);
+
+/* Una función que crea nuevos gatos. */
+function addCat(){
+  var newCat = document.createElement("div");
+  newCat.classList.add("cat");
+  return newCat;
+}
+
+/* Esta es la función que agrega un gato a la columna WAAPI */
+function animateNewCatWithWAAPI() {
+  // crea unnuevo gato
+  var newCat = addCat();
+
+  // Animar a dicho gato con la función "animate" de WAAPI
+  var newAnimationPlayer = newCat.animate(keyframes, timing);
+
+  // Establece que el punto de inicio de la animación sea el mismo que el original .cat#withWAAPI
+  newAnimationPlayer.startTime = catRunning.startTime;
+
+  // Agrega el gato a la pila.
+  WAAPICats.appendChild(newCat);
+}
+
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

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

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

+ +

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

+ +
+

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

+
+ +

Sintaxis

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

Valor

+ +

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

+ +

Ejemplos

+ +

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

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

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

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

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

+ +

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

+ +

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

+ +

Sintaxis

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

Valor

+ +

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

+ +

Ejemplos

+ +

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

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

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

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

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

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

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

+ +

La propiedad Animation.timeline de la interfaz {{domxref ("Animation")}} devuelve o establece el {{domxref ("AnimationTimeline", "timeline")}} asociado a esta animación. Un 'timeline' es una fuente de valores de tiempo para propósitos de sincronización, y es un objeto basado en {{domxref ("AnimationTimeline")}}. Por defecto, la línea de tiempo de la animación y la línea de tiempo de {{domxref ("Document")}} son las mismas.

+ +

Sintaxis

+ +
var animationsTimeline = Animation.timeline;
+
+Animation.timeline = newTimeline;
+ +

Valor

+ +

Un {{domxref ("AnimationTimeline", "timeline object", "", 1)}} para usar como la fuente de sincronización para la animación, o null para usar el predeterminado, que es el 'timeline' del {{domxref ("Document")}}.

+ +

Ejemplos

+ +

Aquí establecemos que la línea de tiempo timeline de la animación sea la misma que la del tiempo del documento (por cierto, esta es la timeline predeterminada para todas las animaciones):

+ +
animation.timeline = document.timeline;
+
+ +

Especificaciones

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

Compatibilidad del navegador

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

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

+ +

Ver también

+ + diff --git a/files/es/web/api/animationevent/animationname/index.html b/files/es/web/api/animationevent/animationname/index.html new file mode 100644 index 0000000000..ada4eb4a04 --- /dev/null +++ b/files/es/web/api/animationevent/animationname/index.html @@ -0,0 +1,101 @@ +--- +title: AnimationEvent.animationName +slug: Web/API/AnimationEvent/animationName +tags: + - API + - Animaciones Web + - AnimationEvent + - CSSOM + - Experimental + - Propiedad + - Referencia +translation_of: Web/API/AnimationEvent/animationName +--- +

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

+ +

La propiedad de solo-lectura AnimationEvent.animationName es un {{domxref("DOMString")}} conteniendo el valor de  la propiedad de CSS {{cssxref("animation-name")}} asociada con la transición.

+ +

Sintaxis

+ +
name = AnimationEvent.animationName
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{ SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName') }}{{ Spec2('CSS3 Animations')}}Definición Inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{ CompatGeckoDesktop("6.0") }}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome para Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/animationevent/index.html b/files/es/web/api/animationevent/index.html new file mode 100644 index 0000000000..c726ac42f9 --- /dev/null +++ b/files/es/web/api/animationevent/index.html @@ -0,0 +1,186 @@ +--- +title: AnimationEvent +slug: Web/API/AnimationEvent +tags: + - API + - Animaciones Web + - Experimental + - Interface + - Referencia +translation_of: Web/API/AnimationEvent +--- +

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

+ +

La interfaz AnimationEvent representa los eventos que proporciona información relacionada con las animaciones.

+ +

{{InheritanceDiagram}}

+ +

Propiedades

+ +

También hereda las propiedades de su padre {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
+
Es un {{domxref("DOMString")}} que contiene el valor de la propiedad CSS {{cssxref("animation-name")}} asociado con la transición.
+
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
+
Es un número flotante que da la cantidad de tiempo que ha estado corriendo la animación, en segundos, cuando este evento es disparado, excluyendo cualquier vez que la aimación fue pausada.  Para un evento "animationstart", elapsedTime es 0.0 a ménos que hubiera un valor negativo para {{cssxref("animation-delay")}}, en tal caso sería disparado el evento con elapsedTime conteniendo (-1 * retraso).
+
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
+
Es un {{domxref("DOMString")}}, empezando con '::', conteniendo el nombre del pseudo-element en el cual corre la animación. Si la animación no corre sobre un pseudo-element sino en el elemento, un string vacío: ''. 
+
+ +

Constructor

+ +
+
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
+
Crea un evento AnimationEvent con los parametros dados.
+
+ +

Métodos

+ +

También hereda los métodos de su padre {{domxref("Event")}}.

+ +
+
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
+
Inicializa un evento AnimationEvent creado utilizando el método obsoleto  {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico +

1.0 {{ property_prefix("webkit") }}

+ +

{{CompatChrome(43.0)}}

+ 		{{ CompatGeckoDesktop("6.0") }}10.012 {{ property_prefix("o") }}
+ 12.10
+ 15.0 {{ property_prefix("webkit") }}		4.0 {{ property_prefix("webkit") }}
Constructor de AnimationEvent() +

{{CompatChrome(43.0)}}

+ 		{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}1.0{{ CompatGeckoDesktop("6.0") }}
+ Removed in {{ CompatGeckoDesktop("23.0") }}		10.0124.0
pseudoelement{{CompatNo}}{{ CompatGeckoDesktop("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome para Android
Soporte básico{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{ CompatGeckoMobile("6.0") }}10.012 {{ property_prefix("o") }}
+ 12.10
+ 15.0 {{ property_prefix("webkit") }}		{{CompatVersionUnknown}}{{ property_prefix("webkit") }}{{CompatChrome(43.0)}}
Constructor de AnimationEvent(){{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
initAnimationEvent() {{non-standard_inline}}{{deprecated_inline}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("6.0") }}
+ Removed in {{ CompatGeckoMobile("23.0") }}		10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
pseudoelement{{CompatNo}}{{ CompatGeckoMobile("23.0") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

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

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

+ +

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

+ +

Almacenamiento web, conceptos y uso

+ +

Los dos mecanismos en el almacenamiento web son los siguientes:

+ + + +

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

+ +
+

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

+
+ +
+

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

+
+ +

Interfaces de almacenamiento web

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

Ejemplos

+ +

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

+ +

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

+ +

Especificaciones

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

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

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

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

+ +
+

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

+
+ + + +

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

+ +

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

+ +

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

+ +

Ver también

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

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

+ +

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

+
+ +

Conceptos básicos

+ +

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

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

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

+
+ +

Los dos mecanismos en el almacenamiento web son los siguientes:

+ + + +

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

+ +

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

+ +

Detectar la característica localStorage

+ +

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

+ +

Probar la disponibilidad

+ +
+

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

+
+ +

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

+ +

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

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

Y aquí se muestra cómo usarla:

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

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

+ +

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

+ +

Ejemplo

+ +

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

+ +

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

+ +

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

+ +

+ +
+

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

+
+ +

Probar si la memoria tiene valores

+ +

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

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

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

+ +

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

+ +

Obtener valores de la memoria

+ +

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

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

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

+ +

Guardar valores en la memoria

+ +

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

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

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

+ +

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

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

Responder a cambios en la memoria con el evento StorageEvent

+ +

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

+ +

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

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

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

+ +

Borrar registros

+ +

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

+ + + +

Especificaciones

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

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

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

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

+ +
+

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

+
+ +

Ver también

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

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

+ +

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

+ +

Accediendo al portapapeles

+ +

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

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

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

+ +

Interfaces

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

Especificaciones

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

Compatibilidad con navegadores

+ +

Clipboard

+ +
+ + +

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

+ +

ClipboardEvent

+ + + +

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

+ +

ClipboardItem

+ + + +

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

+ +

Véase también

+ + +
diff --git a/files/es/web/api/attr/index.html b/files/es/web/api/attr/index.html new file mode 100644 index 0000000000..2e73f60c55 --- /dev/null +++ b/files/es/web/api/attr/index.html @@ -0,0 +1,194 @@ +--- +title: Attr +slug: Web/API/Attr +translation_of: Web/API/Attr +--- +
{{APIRef("DOM")}}
+ +

Este tipo representa un atributo de un elemento DOM como un objeto. En muchos métodos DOM, probablemente vas a obtener el atributo como una cadena (e.g., {{domxref("Element.getAttribute()")}}, pero algunas funciones (e.g., {{domxref("Element.getAttributeNode()")}}) or means of iterating give Attr types.

+ +

{{InheritanceDiagram}}

+ +
Advertencia:En el DOM Core 1, 2 y 3, Attr se hereda del {{domxref("Node")}}. Este ya no es el caso en DOM4.Para llevar la implementación de Attr  a la especifiación, se esta trabajando para cambiarlo y dejar de heredar de{{domxref("Node")}}. No debe de utilizar ninguna propiedad o método de nodo en los objetos Attr. A partir de Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), los que se eliminarán enviarán mensajes de advertencia a la consola. Debe revisar su código en consecuencia. Consulte Propiedades y métodos en desuso para obtener una lista completa.
+ +

Propiedades

+ +
+
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
+
El nombre del atributo.
+
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
+
Un {{domxref("DOMString")}} representing the namespace URI of the attribute, or null if there is no namespace.
+
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the local part of the qualified name of the attribute.
+
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
+
A {{domxref("DOMString")}} representing the namespace prefix of the attribute, or null if no prefix is specified.
+
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
+
This property always returns true. Originally, it returned true if the attribute was explicitly specified in the source code or by a script, and false if its value came from the default one defined in the document's DTD.
+
{{domxref("Attr.value", "value")}}
+
El valor del atributo.
+
+ +
+

Note: DOM Level 3 defined namespaceURI, localName and prefix on the {{domxref("Node")}} interface. In DOM4 they were moved to Attr.

+ +

This change is implemented in Chrome since version 46.0 and Firefox since version 48.0.

+
+ +

Propiedades y métodos obsoletos

+ +

Las siguientes propiedades son obsoletos. Where available, the appropriate replacement is provided.

+ +
+
attributes
+
Este propiedad ahora siempre devuelve NULL.
+
childNodes
+
Este propiedad ahora siempre devuelve NULL.
+
firstChild
+
Este propiedad ahora siempre devuelve NULL.
+
isId {{readOnlyInline}}
+
Indicates whether the attribute is an "ID attribute". An "ID attribute" being an attribute which value is expected to be unique across a DOM Document. In HTML DOM, "id" is the only ID attribute, but XML documents could define others. Whether or not an attribute is unique is often determined by a {{Glossary("DTD")}} or other schema description.
+
lastChild
+
Este propiedad ahora siempre devuelve NULL.
+
nextSibling
+
Este propiedad ahora siempre devuelve NULL.
+
nodeName
+
Utilizar {{domxref("Attr.name")}} en su lugar.
+
nodeType
+
Esta propiedad ahora siempre devuelve 2 (ATTRIBUTE_NODE).
+
nodeValue
+
Utilizar {{domxref("Attr.value")}} en su lugar.
+
ownerDocument
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
ownerElement {{deprecated_inline("7.0")}} {{obsolete_inline("29.0")}} {{readOnlyInline}}
+
Since you get an Attr object from an {{domxref("Element")}}, you should already know the associated element.
+
Contrary to above claim, {{domxref("Document.evaluate")}} can return Attr objects from an XPath, in which case you would not easily know the owner.
+
parentNode
+
Estra propiedad ahora siempre devuelve NULL.
+
previousSibling
+
Estra propiedad ahora siempre devuelve NULL.
+
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
+
The type information associated with this attribute. While the type information contained in this attribute is guaranteed to be correct after loading the document or invoking {{domxref("Document.normalizeDocument")}}, this property may not be reliable if the node was moved.
+
specified
+
Estra propiedad ahora siempre devuelve true.
+
textContent
+
Utilizar {{domxref("Attr.value")}} en su lugar.
+
+ +

Los siguientes metodos ahora son obsoletos.

+ +
+
appendChild()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
cloneNode()
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
createAttribute()
+
Use {{domxref("Element.setAttribute()")}} instead.
+
createAttributeNS()
+
Use {{domxref("Element.setAttributeNS()")}} instead.
+
getAttributeNode()
+
Use {{domxref("Element.getAttribute()")}} instead.
+
getAttributeNodeNS()
+
Use {{domxref("Element.getAttributeNS()")}} instead.
+
hasAttributes() {{obsolete_inline("21.0")}}
+
Estra propiedad ahora retorna false.
+
hasChildNodes()
+
Estra propiedad ahora devuelve false.
+
insertBefore()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
isSupported()
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
isEqualNode()
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
normalize()
+
Seguramente nunca usaste esta propiedad asi que no deberias preocuparte si esque ya no está disponible.
+
removeAttributeNode()
+
Use {{domxref("Element.removeAttribute()")}} instead.
+
removeChild()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
replaceChild()
+
Modify the value of {{domxref("Attr.value")}} instead.
+
setAttributeNode()
+
Use {{domxref("Element.setAttribute()")}} instead.
+
setAttributeNodeNS()
+
Use {{domxref("Element.setAttributeNS()")}} instead.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}}Moved namespaceURI, prefix and localName from {{domxref("Node")}} to this API and removed ownerElement, schemaTypeInfo and isId.
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] As of Chrome 45, this property no longer inherits from Node.

diff --git a/files/es/web/api/audiobuffer/index.html b/files/es/web/api/audiobuffer/index.html new file mode 100644 index 0000000000..1909323a6d --- /dev/null +++ b/files/es/web/api/audiobuffer/index.html @@ -0,0 +1,108 @@ +--- +title: AudioBuffer +slug: Web/API/AudioBuffer +translation_of: Web/API/AudioBuffer +--- +

{{APIRef("Web Audio API")}}

+ +

La interfaz AudioBuffer representa un pequeño recurso de audio que se almacena en memoria, creado a partir de un archivo de audio usando el método {{ domxref("AudioContext.decodeAudioData()") }}, o de datos en bruto con el método {{ domxref("AudioContext.createBuffer()") }}. Una véz cargado en AudioBuffer, el audio puede ser reproducido pasandolo en el método {{ domxref("AudioBufferSourceNode") }}.

+ +

Objetos de este tipo son diseñados para almacenar pequeños trozos de audio, normalmente menos de 45 segundos. Para audios más extensos, los objectos implementan  {{domxref("MediaElementAudioSourceNode")}} que es más adecuado. El buffer contiene data en el siguiente formado: non-interleaved IEEE754 32-bit linear PCM with a nominal range between -1 and +1, that is, 32bits floating point buffer, with each samples between -1.0 and 1.0. If the {{domxref("AudioBuffer")}} has multiple channels, they are stored in separate buffer.

+ +

Constructor

+ +
+
{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}
+
Crea y retorna una nueva instancia de AudioBuffer 
+
+ +

Propiedades

+ +
+
{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
+
Returns a float representing the sample rate, in samples per second, of the PCM data stored in the buffer.
+
{{domxref("AudioBuffer.length")}} {{readonlyInline}}
+
Returns an integer representing the length, in sample-frames, of the PCM data stored in the buffer.
+
{{domxref("AudioBuffer.duration")}} {{readonlyInline}}
+
Returns a double representing the duration, in seconds, of the PCM data stored in the buffer.
+
{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
+
Returns an integer representing the number of discrete audio channels described by the PCM data stored in the buffer.
+
+ +

Métodos

+ +
+
{{domxref("AudioBuffer.getChannelData()")}}
+
Returns a {{jsxref("Float32Array")}} containing the PCM data associated with the channel, defined by the channel parameter (with 0 representing the first channel).
+
{{domxref("AudioBuffer.copyFromChannel()")}}
+
Copies the samples from the specified channel of the AudioBuffer to the destination array.
+
{{domxref("AudioBuffer.copyToChannel()")}}
+
Copies the samples to the specified channel of the AudioBuffer, from the source array.
+
+ +

Ejemplo

+ +

El siguiente ejemplo muestra como se crea un AudioBuffer  y rellena con un sonido blanco aleatorio. Puedes encontrar el código completo en nuestro repositorio: webaudio-examples; y una versión disponible: running live

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// Create an empty three-second stereo buffer at the sample rate of the AudioContext
+var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate);
+
+// Fill the buffer with white noise;
+// just random values between -1.0 and 1.0
+for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
+  // This gives us the actual array that contains the data
+  var nowBuffering = myArrayBuffer.getChannelData(channel);
+  for (var i = 0; i < myArrayBuffer.length; i++) {
+    // Math.random() is in [0; 1.0]
+    // audio needs to be in [-1.0; 1.0]
+    nowBuffering[i] = Math.random() * 2 - 1;
+  }
+}
+
+// Get an AudioBufferSourceNode.
+// This is the AudioNode to use when we want to play an AudioBuffer
+var source = audioCtx.createBufferSource();
+
+// set the buffer in the AudioBufferSourceNode
+source.buffer = myArrayBuffer;
+
+// connect the AudioBufferSourceNode to the
+// destination so we can hear the sound
+source.connect(audioCtx.destination);
+
+// start the source playing
+source.start();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audiobuffer-interface', 'AudioBuffer')}}{{Spec2('Web Audio API')}}Initial definition.
+ +

Compatibilidad de navegadores

+ +
+ + +

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

+
+ +

Mira también

+ + diff --git a/files/es/web/api/audionode/index.html b/files/es/web/api/audionode/index.html new file mode 100644 index 0000000000..ea6ff34406 --- /dev/null +++ b/files/es/web/api/audionode/index.html @@ -0,0 +1,154 @@ +--- +title: AudioNode +slug: Web/API/AudioNode +translation_of: Web/API/AudioNode +--- +
{{APIRef("Web Audio API")}}
+ +

La interfaz AudioNode es una interfaz genérica para representar un módulo de procesamiento de audio. Ejemplos:

+ + + +

{{InheritanceDiagram}}

+ +

Note: An AudioNode can be target of events, por lo tanto este implementa  {{domxref("EventTarget")}} interface.

+ +

Descripción

+ +

The audio routing graph

+ +

AudioNodes participating in an AudioContext create a audio routing graph.

+ +

Cada AudioNode posee entradas y salidas, y múltiples nodos de audio son conectados para construir un processing graph. Este graph es contenido en {{domxref("AudioContext")}}, y cada nodo de audio solo puede pertecener a un audio context.

+ +

Un source node tiene cero entradas pero una o muchas salidas, y puede ser usado para generar sonido. Por otro lado, un destination node no tiene salidas; instead, all its inputs are directly played back on the speakers (or whatever audio output device the audio context uses). In addition, there are processing nodes which have inputs and outputs. The exact processing done varies from one AudioNode to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the {{domxref("AnalyserNode")}}, where the result of the processing is accessed separately).

+ +

The more nodes in a graph, the higher the latency will be. Por ejemplo, si tu graph tiene una latencia de 500ms, Cuando el source node reproduzca un sonido, este va a tomar la mitad de un segundo hasta que el sonido pueda ser escuchado en tus altavoces. (or even longer because of latency in the underlying audio device). Por lo tanto, si tu necesitas tener un audio interactivo, keep the graph as small as possible, and put user-controlled audio nodes at the end of a graph. For example, a volume control (GainNode) should be the last node so that volume changes take immediate effect.

+ +

Each input and output has a given amount of channels. For example, mono audio has one channel, while stereo audio has two channels. The Web Audio API will up-mix or down-mix the number of channels as required; check the Web Audio spec for details.

+ +

For a list of all audio nodes, see the Web Audio API homepage.

+ +

Creating an AudioNode

+ +

There are two ways to create an AudioNode: via the constuctor and via the factory method.

+ +
// constructor
+const analyserNode = new AnalyserNode(audioCtx, {
+  fftSize: 2048,
+  maxDecibels: -25,
+  minDecibels: -60,
+  smoothingTimeConstant: 0.5,
+});
+
+// factory method
+const analyserNode = audioCtx.createAnalyser();
+analyserNode.fftSize = 2048;
+analyserNode.maxDecibels = -25;
+analyserNode.minDecibels = -60;
+analyserNode.smoothingTimeConstant = 0.5;
+ +

Eres libre de usar cualquiera de los constructors o factory methods, o una mezcla de ambos, sin embargo hay ventajas al usar contructores:

+ + + +

Tener en cuenta que Microsoft Edge does not yet appear to support the constructors; it will throw a "Function expected" error when you use the constructors.

+ +

Brief history: The first version of the Web Audio spec only defined the factory methods. After a design review in October 2013, it was decided to add constructors because they have numerous benefits over factory methods. The constructors were added to the spec from August to October 2016. Factory methods continue to be included in the spec and are not deprecated.

+ +

Properties

+ +
+
{{domxref("AudioNode.context")}} {{readonlyInline}}
+
Returns the associated {{domxref("BaseAudioContext")}}, that is the object representing the processing graph the node is participating in.
+
+ +
+
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
+
Returns the number of inputs feeding the node. Source nodes are defined as nodes having a numberOfInputs property with a value of 0.
+
+ +
+
{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
+
Returns the number of outputs coming out of the node. Destination nodes — like {{ domxref("AudioDestinationNode") }} — have a value of 0 for this attribute.
+
+ +
+
{{domxref("AudioNode.channelCount")}}
+
Represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.
+
+ +
+
{{domxref("AudioNode.channelCountMode")}}
+
Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.
+
{{domxref("AudioNode.channelInterpretation")}}
+
Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio up-mixing and down-mixing will happen.
+ The possible values are "speakers" or "discrete".
+
+ +

Methods

+ +

Also implements methods from the interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("AudioNode.connect()")}}
+
Allows us to connect the output of this node to be input into another node, either as audio data or as the value of an {{domxref("AudioParam")}}.
+
{{domxref("AudioNode.disconnect()")}}
+
Allows us to disconnect the current node from another one it is already connected to.
+
+ +

Example

+ +

This simple snippet of code shows the creation of some audio nodes, and how the AudioNode properties and methods can be used. You can find examples of such usage on any of the examples linked to on the Web Audio API landing page (for example Violent Theremin.)

+ +
const audioCtx = new AudioContext();
+
+const oscillator = new OscillatorNode(audioCtx);
+const gainNode = new GainNode(audioCtx);
+
+oscillator.connect(gainNode).connect(audioCtx.destination);
+
+oscillator.context;
+oscillator.numberOfInputs;
+oscillator.numberOfOutputs;
+oscillator.channelCount;
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html new file mode 100644 index 0000000000..b94165b364 --- /dev/null +++ b/files/es/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -0,0 +1,130 @@ +--- +title: BaseAudioContext.createBiquadFilter() +slug: Web/API/BaseAudioContext/createBiquadFilter +translation_of: Web/API/BaseAudioContext/createBiquadFilter +--- +

{{ APIRef("Web Audio API") }}

+ +
+

El metodo createBiquadFilter() de la interfaz {{ domxref("BaseAudioContext") }} crea un {{ domxref("BiquadFilterNode") }}, el cual representa un filtro de segundo orden configurable, asi como varios tipos de filtros comunes diferentes.

+
+ +

Sintaxis

+ +
var audioCtx = new AudioContext();
+var biquadFilter = audioCtx.createBiquadFilter();
+ +

Retorna

+ +

Un {{domxref("BiquadFilterNode")}}.

+ +

Ejemplo

+ +

El siguiente ejemplo muestra el uso básico de un AudioContext para crear un nodo de filtro Biquad. Para ver el ejemplo trabanjando completamente, mire nuestra demostración voice-change-o-matic (mirar tambien source code).

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// Configurar los diferentes nodos de audio que usaremos para la aplicación.
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// conectar los nodos juntos
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// Manipule el filtro Biquad
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstadosComentario
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidad con el navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Ver tambien

+ + diff --git a/files/es/web/api/baseaudiocontext/index.html b/files/es/web/api/baseaudiocontext/index.html new file mode 100644 index 0000000000..593f535ef0 --- /dev/null +++ b/files/es/web/api/baseaudiocontext/index.html @@ -0,0 +1,293 @@ +--- +title: BaseAudioContext +slug: Web/API/BaseAudioContext +tags: + - API + - Audio + - BaseAudioContext + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Audio API +translation_of: Web/API/BaseAudioContext +--- +

{APIRef("Web Audio API")}}

+ + +

The BaseAudioContext interface acts as a base definition for online and offline audio-processing graphs, as represented by {{domxref("AudioContext")}} and {{domxref("OfflineAudioContext")}} resepectively. You wouldn't use BaseAudioContext directly — you'd use its features via one of these two inheriting interfaces.

+ +

A BaseAudioContext can be a target of events, therefore it implements the {{domxref("EventTarget")}} interface.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +
+
{{domxref("BaseAudioContext.baseLatency")}} {{readonlyinline}}
+
Returns a double epresents the number of seconds of processing latency incurred by the AudioContext passing the audio from the AudioDestinationNode to the audio subsystem. 
+
{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
+
Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at 0.
+
{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
+
Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.
+
{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
+
Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.
+
{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
+
Returns a float representing the sample rate (in samples per second) used by all nodes in this context. The sample-rate of an {{domxref("AudioContext")}} cannot be changed.
+
{{domxref("BaseAudioContext.state")}} {{readonlyInline}}
+
Returns the current state of the AudioContext.
+
+ +

Event handlers

+ +
+
{{domxref("BaseAudioContext.onstatechange")}}
+
An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the AudioContext's state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}).
+
+ +

Methods

+ +

Also implements methods from the interface {{domxref("EventTarget")}}.

+ +
+
{{domxref("BaseAudioContext.createBuffer()")}}
+
Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("BaseAudioContext.createConstantSource()")}}
+
Creates a {{domxref("ConstantSourceNode")}} object, which is an audio source that continuously outputs a monaural (one-channel) sound signal whose samples all have the same value.
+
{{domxref("BaseAudioContext.createBufferSource()")}}
+
Creates an {{domxref("AudioBufferSourceNode")}}, which can be used to play and manipulate audio data contained within an {{ domxref("AudioBuffer") }} object. {{ domxref("AudioBuffer") }}s are created using {{domxref("AudioContext.createBuffer")}} or returned by {{domxref("AudioContext.decodeAudioData")}} when it successfully decodes an audio track.
+
{{domxref("BaseAudioContext.createScriptProcessor()")}}
+
Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.
+
{{domxref("BaseAudioContext.createStereoPanner()")}}
+
Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.
+
{{domxref("BaseAudioContext.createAnalyser()")}}
+
Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.
+
{{domxref("BaseAudioContext.createBiquadFilter()")}}
+
Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.
+
{{domxref("BaseAudioContext.createChannelMerger()")}}
+
Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.
+
{{domxref("BaseAudioContext.createChannelSplitter()")}}
+
Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.
+
{{domxref("BaseAudioContext.createConvolver()")}}
+
Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.
+
{{domxref("BaseAudioContext.createDelay()")}}
+
Creates a {{domxref("DelayNode")}}, which is used to delay the incoming audio signal by a certain amount. This node is also useful to create feedback loops in a Web Audio API graph.
+
{{domxref("BaseAudioContext.createDynamicsCompressor()")}}
+
Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.
+
{{domxref("BaseAudioContext.createGain()")}}
+
Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.
+
{{domxref("BaseAudioContext.createIIRFilter()")}}
+
Creates an {{domxref("IIRFilterNode")}}, which represents a second order filter configurable as several different common filter types.
+
{{domxref("BaseAudioContext.createOscillator()")}}
+
Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.
+
{{domxref("BaseAudioContext.createPanner()")}}
+
Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.
+
{{domxref("BaseAudioContext.createPeriodicWave()")}}
+
Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.
+
{{domxref("BaseAudioContext.createWaveShaper()")}}
+
Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.
+
{{domxref("BaseAudioContext.decodeAudioData()")}}
+
Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s response attribute after setting the responseType to arraybuffer. This method only works on complete files, not fragments of audio files.
+
{{domxref("BaseAudioContext.resume()")}}
+
Resumes the progression of time in an audio context that has previously been suspended/paused.
+
+ +

Examples

+ +

Basic audio context declaration:

+ +
var audioCtx = new AudioContext();
+ +

Cross browser variant:

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+var finish = audioCtx.destination;
+// etc.
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}{{Spec2('Web Audio API')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
baseLatency{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
createConstantSource(){{CompatChrome(56)}}{{CompatNo}}{{CompatGeckoDesktop(52)}}{{CompatNo}}{{CompatOpera(43)}}{{CompatNo}}
createStereoPanner(){{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(40.0)}}{{CompatNo}}{{CompatNo}}{{CompatSafari(8.0)}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}2.2{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
baseLatency{{CompatChrome(60)}}{{CompatChrome(60)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
createConstantSource(){{CompatChrome(56)}}{{CompatChrome(56)}}{{CompatNo}}{{CompatGeckoMobile(52)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
createStereoPanner(){{CompatChrome(42)}}{{CompatChrome(42)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onstatechange, state, suspend(), resume(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Unprefixed{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(43)}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/batterymanager/charging/index.html b/files/es/web/api/batterymanager/charging/index.html new file mode 100644 index 0000000000..8295785a2c --- /dev/null +++ b/files/es/web/api/batterymanager/charging/index.html @@ -0,0 +1,28 @@ +--- +title: BatteryManager.charging +slug: Web/API/BatteryManager/charging +tags: + - Apps + - Batería + - Battery + - Firefox OS + - Mobile + - Móvil + - WebAPI +translation_of: Web/API/BatteryManager/charging +--- +

{{ ApiRef() }}

+

Resumen

+

Un valor boleano indicando si o no esta cargando la batería del dispositivo (está conectado el cargador).

+

Sintaxis

+
var charging = navigator.battery.charging
+

Valor de retorno, charging indica si o no la batería esta siendo cargada; si la batería se está cargando (o si no hay batería), este valor es true. De lo contrario el valor es false.

+

Specifications

+

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

+

Browser compatibility

+

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

+

See also

+ diff --git a/files/es/web/api/batterymanager/chargingtime/index.html b/files/es/web/api/batterymanager/chargingtime/index.html new file mode 100644 index 0000000000..6876834636 --- /dev/null +++ b/files/es/web/api/batterymanager/chargingtime/index.html @@ -0,0 +1,26 @@ +--- +title: BatteryManager.chargingTime +slug: Web/API/BatteryManager/chargingTime +tags: + - API + - Battery + - Battery API + - Mobile + - Property +translation_of: Web/API/BatteryManager/chargingTime +--- +

{{ APIRef("BatteryManager") }}

+

Resumen

+

Indica la cantidad de tiempo, en segundos, que faltan para que la batería esté completamente cargada.

+

Sintaxis

+
var time = navigator.battery.chargingTime
+

Cuando devuelve, time es el tiempo restante en segundos para que la batería esté completamente cargada o 0 (cero) si la batería ya está completamente cargada. Si la batería está descargándose —o si el sistema no puede determinar el restante de carga— el valor es Infinity.

+

Especificaciones

+

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

+

Compatibilidad con navegadores

+

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

+

See also

+ diff --git a/files/es/web/api/batterymanager/dischargingtime/index.html b/files/es/web/api/batterymanager/dischargingtime/index.html new file mode 100644 index 0000000000..4cc79f0b9d --- /dev/null +++ b/files/es/web/api/batterymanager/dischargingtime/index.html @@ -0,0 +1,29 @@ +--- +title: BatteryManager.dischargingTime +slug: Web/API/BatteryManager/dischargingTime +tags: + - API + - Apps + - Batería + - Battery + - Firefox OS + - Gecko DOM Reference + - WebAPI + - aplicaciones +translation_of: Web/API/BatteryManager/dischargingTime +--- +

{{ ApiRef() }}

+

Resumen

+

Indíca la cantidad de tiempo, en segundos, que restan antes de que la batería se descargue completamente.

+

Sintaxis

+
var time = navigator.battery.dischargingTime
+

Valor de retorno, time es el tiempo restante en segundos antes que la batería esté completamente descargada y el sistema se suspenda. Este valor es Infinity si la batería se está cargando en vez de descargando, o si el sistema es incapaz de calcular el tiempo de descarga (o si no hay batería)

+

Specifications

+

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

+

Browser compatibility

+

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

+

See also

+ diff --git a/files/es/web/api/batterymanager/index.html b/files/es/web/api/batterymanager/index.html new file mode 100644 index 0000000000..5d2aee0710 --- /dev/null +++ b/files/es/web/api/batterymanager/index.html @@ -0,0 +1,127 @@ +--- +title: BatteryManager +slug: Web/API/BatteryManager +translation_of: Web/API/BatteryManager +--- +

{{APIRef()}}

+

Sumario

+

La interfaz BatteryManager proporciona la información del nivel de carga de la bateria del sistema.

+

La propiedad {{domxref("window.navigator.battery","navigator.battery")}} devuelve una petición de la interfaz  BatteryManager que se utiliza para interactuar con la API Battery Status.

+

Propiedades

+
+
+ {{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}
+
+ Valor booleano que indica si la bateria se está o no cargando.
+
+ {{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}
+
+ Número que indica el tiempo que queda en segundos hasta que la batería esté completamente cargada, o 0 si la batería está completamente cargada.
+
+ {{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}
+
+ Número que indica el tiempo restante en segundos hasta que la batería esté completamente descargada y el sistema entra en suspensión.
+
+ {{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
+
+ Número que indica el nivel de carga de la batería del sistema, los valores están escalados entre 0.0 y 1.0.
+
+

Eventos del controlador

+
+
+ {{domxref("BatteryManager.onchargingchange")}}
+
+  Controlador para el evento {{event("chargingchange")}} ; Este evento se envía cuando se actualiza el estado de carga de la batería.
+
+ {{domxref("BatteryManager.onchargingtimechange")}}
+
+ Controlador para el evento {{event("chargingtimechange")}}; Este evento se envía cuando se actualiza el tiempo de carga de la batería.
+
+ {{domxref("BatteryManager.ondischargingtimechange")}}
+
+ Controlador para el evento{{event("dischargingtimechange")}}; Este evento se envía cuando se actualiza el tiempo de descarga de la batería.
+
+ {{domxref("BatteryManager.onlevelchange")}}
+
+ Controlador para el evento {{event("levelchange")}}; Este evento se envía cuando se actualizael nivel de la batería.
+
+

Métodos

+

Heredado de{{domxref("EventTarget")}}:

+

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+

Especificaciones

+ + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName('Battery API')}}{{Spec2('Battery API')}}Especificaciones iniciales.
+

Compatibilidad

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}
+ Chrome on Android: crbug.com/135863
+ Chrome OS: crbug.com/122593		{{CompatGeckoDesktop("10")}} {{ property_prefix("moz") }} [1]
+ {{CompatGeckoDesktop("16")}} (without prefix) [2]		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatNo() }}{{CompatGeckoMobile("10")}} {{ property_prefix("moz") }} [1]
+ {{CompatGeckoMobile("16")}} (without prefix) [2]		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+

Notas Gecko

+

[1] Descativado por defecto en Firefox 10.0, pero se puede habilitar estableciendo las preferencias en dom.battery.enabled a true. A partir de Firefox 11.0, mozBattery está activado por defecto.

+

[2] La Battery API actualmente es soportada por Android, Windows, y Linux con UPower instalado. Está soportado para MacOS con Gecko 18.0 {{geckoRelease("18.0")}}.

+

Ver también

+ diff --git a/files/es/web/api/batterymanager/level/index.html b/files/es/web/api/batterymanager/level/index.html new file mode 100644 index 0000000000..d88c8ffbe3 --- /dev/null +++ b/files/es/web/api/batterymanager/level/index.html @@ -0,0 +1,22 @@ +--- +title: BatteryManager.level +slug: Web/API/BatteryManager/level +tags: + - API +translation_of: Web/API/BatteryManager/level +--- +

{{ APIRef("BatteryManager") }}

+

Resumen

+

Indica el valor actual del nivel de carga, estos valores están entre 0.0 a 1.0.

+

Sintaxis

+
var level = navigator.battery.level
+

Es un número que representa el nivel de carga de la batería del sistema en una escala entre los valores 0.0 y 1.0. Un valor de 0 significa que la batería está vacía y el sistema esta apunto de entrar en suspensión. Un valor de 1.0 significa que la batería está cargada al máximo. Este valor también nos indica que el sistema no puede determinar el nivel de carga de la batería o si no está alimentado por batería.

+

Especificaciones

+

{{page("/es/docs/Web/API/BatteryManager","Especificaciones")}}

+

Compatibilidad del navegador

+

{{page("/es/docs/Web/API/BatteryManager","Compatibilidad")}}

+

Vea también

+ diff --git a/files/es/web/api/batterymanager/onchargingchange/index.html b/files/es/web/api/batterymanager/onchargingchange/index.html new file mode 100644 index 0000000000..2688bfc3aa --- /dev/null +++ b/files/es/web/api/batterymanager/onchargingchange/index.html @@ -0,0 +1,20 @@ +--- +title: BatteryManager.onchargingchange +slug: Web/API/BatteryManager/onchargingchange +translation_of: Web/API/BatteryManager/onchargingchange +--- +

{{ APIRef("BatteryManager") }}

+

Resumen

+

Especifica un evento oyente para recibir eventos {{event("chargingchange")}}. Estos eventos se producen cuando se actualiza el estado de la batería {{domxref("BatteryManager.charging", "charging")}}.

+

Sintaxis

+
navigator.battery.onchargingchange = funcRef
+

Donde funcRef es una función para llamar cuando se produce el evento {{event("chargingchange")}}.

+

Especificaciones

+

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

+

Compatibilidad con navegadores

+

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

+

Ver también

+ diff --git a/files/es/web/api/batterymanager/onlevelchange/index.html b/files/es/web/api/batterymanager/onlevelchange/index.html new file mode 100644 index 0000000000..2b2e957619 --- /dev/null +++ b/files/es/web/api/batterymanager/onlevelchange/index.html @@ -0,0 +1,20 @@ +--- +title: BatteryManager.onlevelchange +slug: Web/API/BatteryManager/onlevelchange +translation_of: Web/API/BatteryManager/onlevelchange +--- +

{{ APIRef("BatteryManager") }}

+

Resumen

+

Especifica un detector de eventos para recibir eventos de  {{event("levelchange")}} ("cambio de nivel"). Estos eventos ocurren cuando el {{domxref("BatteryManager.level")}} de batería se actualiza.

+

Sintaxis

+
navigator.battery.onlevelchange = funcRef
+

Donde funcRef es una función que se convoca cuando el evento de {{event("levelchange")}} sucede.

+

Especificaciones

+

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

+

Compatibilidad de navegadores

+

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

+

Véase también

+ diff --git a/files/es/web/api/beforeunloadevent/index.html b/files/es/web/api/beforeunloadevent/index.html new file mode 100644 index 0000000000..5bd5e2204f --- /dev/null +++ b/files/es/web/api/beforeunloadevent/index.html @@ -0,0 +1,70 @@ +--- +title: BeforeUnloadEvent +slug: Web/API/BeforeUnloadEvent +translation_of: Web/API/BeforeUnloadEvent +--- +

{{APIRef}}

+ +

El evento beforeunload se diapara cuando la ventana, el documento y sus recursos están a punto de ser cerrados.

+ +

Cuando una cadena no vacía es asignada a la propiedad returnValue del Evento, un cuadro de diálogo aparece, pidiendo a los usuarios la confirmación para la página (ver ejemplo a continuación). Cuando no es asignado un valor, el evento se procesa en silencio. Algunas implementaciones muestran solamente el cuadro de diálogo si el marco o cualquier marco embebido recibe un gesto o interacción del usuario. Ver {{anch("Compatibilidad del navegador")}} para más información.

+ + + + + + + + + + + + + + + + + + + + +
BurbujasNo
CancelableSí
Objetos de destinodefaultView
Interface{{domxref("Event")}}
+ +

Ejemplos

+ +
window.addEventListener("beforeunload", function( event ) {
+  event.returnValue = "\o/";
+});
+
+//is equivalent to
+window.addEventListener("beforeunload", function( event ) {
+  event.preventDefault();
+});
+ +

Los navegadores basado en Webkit no se basan en las especificaciones del cuadro de diálogo. Un ejemplo compatible con la mayoria de los navegadores seria algo parecido al siguiente ejemplo.

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
+  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
+});
+ +

Compatibilidad del navegador

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/blob/blob/index.html b/files/es/web/api/blob/blob/index.html new file mode 100644 index 0000000000..5aa6b895d6 --- /dev/null +++ b/files/es/web/api/blob/blob/index.html @@ -0,0 +1,75 @@ +--- +title: Blob() +slug: Web/API/Blob/Blob +tags: + - API + - Archivo + - Blob + - File API + - Referencia +translation_of: Web/API/Blob/Blob +--- +

{{APIRef("File API")}}

+ +

El constructor Blob() retorna un nuevo objeto {{domxref("Blob")}} . El contenido del blob consiste en la concatenación de los valores obtenidos en el parrametro array.

+ +

Sintaxis

+ +
var aBlob = new Blob( array, options );
+
+ +

Parámetros

+ +
+
array
+
Es un {{jsxref("Array")}} de {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, objetos {{domxref("USVString")}}, o una mezcla de cualquiera de éstos objetos, que será puesto dentro de {{domxref("Blob")}}. Los objetos USVString estan codificados como UTF-8.
+
options {{optional_inline}}
+
+

Un objeto opcional de tipo {{domxref("BlobPropertyBag")}} que puede especificar las siguientes propiedades:

+ +
+
type {{optional_inline}}
+
El {{Glossary("MIME type")}} de la información que será almacenada en el blob. El valor por defecto es una cadena vacía, ("").
+
endings {{optional_inline}} {{non-standard_inline}}
+
Cómo interpretar los carácteres de nueva línea (\n) en el contenido, si la información es texto. El valor por defecto, transparent, copia los caracteres de nueva línea  en el blob sin cambiarlos. Para convertir las nuevas líneas a la convención nativa del sistema, se especifica endings.
+
+
+
+ +

Valor de retorno

+ +

Un nuevo objeto {{domxref("Blob")}} conteniendo la información especificada.

+ +

Ejemplo

+ +
var unaParteDeArchivo = ['<a id="a"><b id="b">hey!</b></a>']; // un array de un solo DOMString
+var oMiBlob = new Blob(unaParteDeArchivo, {type : 'text/html'}); // el blob
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de los navegadores

+ + + +

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

+ +

Vea también

+ + diff --git a/files/es/web/api/blob/index.html b/files/es/web/api/blob/index.html new file mode 100644 index 0000000000..2ee7811292 --- /dev/null +++ b/files/es/web/api/blob/index.html @@ -0,0 +1,194 @@ +--- +title: Blob +slug: Web/API/Blob +translation_of: Web/API/Blob +--- +

{{ APIRef("File API") }}

+ +

Resumen

+ +

Un objeto Blob representa un objeto tipo fichero de  datos planos inmutables. Los Blobs representan datos que no necesariamente se encuentran en un formato nativo de JavaScript. La interfaz {{ domxref("File") }} se encuentra basada en un Blob, heredando y expendiendo la funcionalidad de un Blob para soportar archivos en el sistema del usuario.

+ +

Una forma fácil de construir un Blob es invocando el constructor {{domxref("Blob.Blob", "Blob()")}}. Otra manera es utilizando el método slice() para crear un blob que contiene un subconjunto de los datos de otro Blob.

+ +

Constructor

+ +
+
{{domxref("Blob.Blob", "Blob()")}}
+
Regresa un nuevo objeto Blob creado cuyo contenido consiste en la concatenación de un arreglo de valores establecidos en el parámetro de la función.
+
+ +

Propiedades

+ +
+
{{domxref("Blob.size")}} {{readonlyinline}}
+
El tamaño, en bytes,  de los datos contenidos en el objeto Blob
+
{{domxref("Blob.type")}} {{readonlyinline}}
+
Una cadena (String) indicando el tipo MIME de los datos contenidos en el Blob. Si el tipo es desconocido, esta cadena será vacía.
+
+ +

Métodos

+ +
+
{{domxref("Blob.slice()")}}
+
Regresa un nuevo objeto Blob conteniendo los datos de un rango específico de bytes del origen del Blob.
+
+ +
Nota: Esté consciente que el método slice() posee prefijos propios del fabricante en algunos exploradores y versiones: blob.mozSlice() para Firefox 12 e inferior y blob.webkitSlice() en Safari. Una versión anterior del método slice(), sin prefijos del fabricante, tenía diferente semántica, y se encuentra obsoleto. El soporte para  blob.mozSlice() ha sido eliminado a partir de  Firefox 30.
+ +

Ejemplos

+ +

Ejemplo de uso de un constructor de Blob

+ +

El siguiente código:

+ +
var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // the blob
+
+ +

es equivalente a:

+ +
var oBuilder = new BlobBuilder();
+var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
+oBuilder.append(aFileParts[0]);
+var oMyBlob = oBuilder.getBlob('text/xml'); // the blob
+
+ +
+

La interfaz {{ domxref("BlobBuilder") }} ofrece otra manera de crear Blob, pero se encuentra ahora obsoleta y no debería volverse a utilizar.

+
+ +

Ejemplo para crear una URL en un arreglo tipado utilizando un blob

+ +

El siguiente código:

+ +
var typedArray = GetTheTypedArraySomehow();
+var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // pass a useful mime type here
+var url = URL.createObjectURL(blob);
+// url will be something like: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
+// now you can use the url in any context that regular URLs can be used in, for example img.src, etc.
+
+ +

Ejemplo para extraer datos de un Blob

+ +

La única manera de leer contenido de un Blob es utilizando un {{domxref("FileReader")}}. El siguiente código lee el contenido de un Blob como un arreglo tipado.

+ +
var reader = new FileReader();
+reader.addEventListener("loadend", function() {
+   // reader.result contains the contents of blob as a typed array
+});
+reader.readAsArrayBuffer(blob);
+ +

Al utilizar otros métodos de {{domxref("FileReader")}}, es posible leer los contenidos del Blob como una cadena o una URL de datos.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico541011.105.1
slice()10 {{property_prefix("webkit")}}‡
+ 21		5 {{ property_prefix("moz") }}‡
+ 13		10125.1 (534.29) {{ property_prefix("webkit") }}
Blob() constructor20{{ CompatGeckoDesktop("13.0") }}1012.106 (536.10)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("13.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notas en implementaciones del método slice()

+ +

El método slice() ha tomado inicialmente length como el segundo argumento para indicar el número de bytes para copiar en el nuevo Blob. Si usted especificó valores como start + length excediento el tamaño del Blob de origen, el Blob retornado contendrá los datos a partir del índice de inicio hasta el final del Blob de origen.

+ +

Esa versión del método slice() fué implementada en Firefox 4, WebKit, y Opera 11.10. Sin embargo, desde que la sintaxis ha diferido desde  Array.slice() y String.slice(), Gecko y WebKit removieron este soporte y agregaron soporte  para la nueva sintaxis como {{ manch("mozSlice") }}/Blob.webkitSlice.

+ +

Comenzando en Gecko 13.0 {{ geckoRelease("13.0") }} y Chrome 21, {{ manch("slice") }} no se encuentra más prefijado. El soporte para mozSlice() ha sido eliminado en Gecko 30.0 {{ geckoRelease("30.0") }}.‡

+ +

Notas de Gecko

+ +

Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, existía un error que afectaba el comportamiento de {{ manch("slice") }}; No funcionaba para las posiciones start and end por fuera del rango de valores de 64 bits con signo; Ha sido ahora arreglado para soportar valores de 64 bits sin signo.

+ +

Disponilidad del alcance del código en Chrome

+ +

El alcance JSM del Blob se encuentra disponible sin la necesidad de hacer nada en especial.

+ +

En el alcance de arranque, este debe importarse de igual modo:

+ +
const {Blob, Services} = Cu.import('resource://gre/modules/Services.jsm', {});
+ +

Ver también

+ + diff --git a/files/es/web/api/blob/type/index.html b/files/es/web/api/blob/type/index.html new file mode 100644 index 0000000000..73dc045027 --- /dev/null +++ b/files/es/web/api/blob/type/index.html @@ -0,0 +1,121 @@ +--- +title: Blob.type +slug: Web/API/Blob/type +tags: + - API + - Archivo + - Archivos + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Blob/type +--- +
{{APIRef("File API")}}
+ +

La propiedad type de un objeto Blob proporciona el tipo MIME del archivo. Retorna una cadena vacía si el tipo no puede ser determinado.

+ +

Sintaxis

+ +
var tipo = instanceOfFile.type
+ +

Valor

+ +

Una cadena

+ +

Ejemplo

+ +
var i, fileInput, files, allowedFileTypes;
+
+// fileInput es un HTMLInputElement: <input type="file" multiple id="myfileinput">
+fileInput = document.getElementById("myfileinput");
+
+// files es un objeto FileList (similar a NodeList)
+files = fileInput.files;
+
+// nuestra aplicacion solo acepta imagenes *.png, *.jpeg y *.gif
+allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
+
+for (i = 0; i < files.length; i++) {
+  // Prueba si file.type es un tipo de archivo permitido.
+  if (allowedFileTypes.indexOf(files[i].type) > -1) {
+    // El tipo de archivo es uno de los permitidos. Hacer algo aquí.
+  }
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspeficicacionesEstadoComentario
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Definicion inicial.
+ +

Compatibilidad con browsers

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.type5{{CompatVersionUnknown}}{{CompatGeckoDesktop("2")}}10.011.105.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.type{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/blobbuilder/index.html b/files/es/web/api/blobbuilder/index.html new file mode 100644 index 0000000000..e07f1217cf --- /dev/null +++ b/files/es/web/api/blobbuilder/index.html @@ -0,0 +1,193 @@ +--- +title: BlobBuilder +slug: Web/API/BlobBuilder +tags: + - API + - Archivo + - DOM + - File API + - NeedsBrowserCompatibility + - Obsoleto + - Referencia +translation_of: Web/API/BlobBuilder +--- +

{{APIRef("File API")}}{{ obsolete_header}}

+ +

La interfaz BlobBuilder provee una manera fácil de construir objetos {{domxref("Blob")}} . Solo crea un BlobBuilder y anexa trozos de datos invocando  el método {{manch("append")}} . Cuando termines de construir tu objeto, llama al método {{manch("getBlob")}} para obtener un objeto  {{domxref("Blob")}}  que contiene los datos que le enviaste al blob builder.

+ +
Nota: La interfaz BlobBuilder ha sido descontinuada en favor de introducir el constructor mas reciente {{domxref('Blob')}}.
+ +

Información general de los metodos

+ + + + + + + + + + + + + + + + + + + +
void append(in ArrayBuffer data);
void append(in Blob data);
void append(in String data, [optional] in String endings);
Blob getBlob([optional] in DOMString contentType);
File getFile(in DOMString name, [optional] in DOMString contentType);
+ +

Metodos

+ +

append()

+ +

Anexa el contenido del objeto javascript especificado al {{domxref("Blob")}} que esta siendo construido. Si el valor especificado no es  un  {{domxref("Blob")}}, ArrayBuffer, o String, el valor es convertido a String antes de ser anexado al  blob.

+ +
void append(
+  in ArrayBuffer data
+);
+
+void append(
+  in Blob data
+);
+
+
+void append(
+  in String data,
+  [optional] in String endings
+);
+
+ +

Parametros

+ +
+
data
+
Los datos a anexar al objeto {{domxref("Blob")}} que esta siendo construido.
+
endings
+
Establece como serán escritas las cadenas que contienen  \n. Puede ser "transparent" (los finales no cambian) o "native" (los finales cambian para coincidir  a conveniencia del sistema operativo anfitrión). El valor predeterminado es "transparent".
+
+ +

getBlob()

+ +

Regresa el objeto  {{domxref("Blob")}} que ha sido construido usando los datos pasados atraves del método {{manch("append")}}.

+ +
Blob getBlob(
+  in DOMString contentType {{optional_inline}}
+);
+
+ +

Parametros

+ +
+
contentType {{optional_inline}}
+
El tipo MIME de los datos que seran regresados en el objeto {{domxref("Blob")}}. Esto será la propiedad tipo (Type) de los objetos Blob.
+
+ +

Valor de Retorno

+ +

Un objeto  {{domxref("Blob")}} conteniendo todos los datos pasados por cualquier llamada hecha  al método {{manch("append")}} desde que el  BlobBuilder fue creado. Esto tambien reinicializa el  BlobBuilder sí que la siguiente llamada al metodo {{manch("append")}} es empezar de nuevo , un blob vacio.

+ +

getFile() {{non-standard_inline}}

+ +

Retorna un objeto {{domxref("File")}}.

+ +
File getFile(
+  in DOMString name,
+  [optional] in DOMString contentType
+);
+
+ +

Parametros

+ +
+
name
+
El nombre del archivo.
+
contentType {{optional_inline}}
+
El tipo MIME de dats regresados en el objeto {{domxref("File")}}. Este será el valor de la propiedad tipo (type) del objeto File.
+
+ +

Valor de Retorno

+ +

Un Objeto {{domxref("File")}}.

+ +

Compatibilidad con Nevegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (soporte básico)8[1]{{CompatNo}}[2]10[3]{{CompatNo}}{{CompatNo}}[1]
getfile() {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (soporte básico)3[1]{{CompatNo}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]
getfile() {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] WebKit implementa el API como WebKitBlobBuilder, aunque es obsoleta ahora y ha hecho su soporte configurable. Actualmente Safari deshabilita esta caracteristica  en Nightly, asi que probablemente no venga en la version final. Por otra parte, Chrome, que lo ha soportado desde Chrome 8, mantiene disponible esta caracteristica. Asi que Chrome podrá continuar soportando esta caracteristica. (Visita WebKit changeset para mas detalles).

+ +

[2] Gecko implementa el API como MozBlobBuilder. Empezando con Firefox 14, usando MozBlobBuilder mostrará un mensaje de advertencia en la consola de que usar MozBlobBuilder es obsoleto y se sugiere usar el constructor  {{domxref("Blob")}} en su lugar. En Gecko 18.0 esta caracteristica fue removida..

+ +

[3] Trident implementa el API como MSBlobBuilder.

+ +

Vea también

+ + diff --git a/files/es/web/api/body/formdata/index.html b/files/es/web/api/body/formdata/index.html new file mode 100644 index 0000000000..6915954d6e --- /dev/null +++ b/files/es/web/api/body/formdata/index.html @@ -0,0 +1,72 @@ +--- +title: Body.formData() +slug: Web/API/Body/formData +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - FormData + - Method + - NeedsExample + - Reference +translation_of: Web/API/Body/formData +--- +
{{APIRef("Fetch")}}
+ +

El método formData() de {{domxref("Body")}} mixin toma una cadena {{domxref("Response")}} y la lee completamente. Esto devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.

+ +
+

Nota: Esto es principalmente relevante en service workers. Si un usuario envia un formulario y un service worker intercepta el request, tu por ejemplo podrás llamar a formData() para obtener un mapeo del tipo llave-valor, modificar algunos campos, luego enviar el formulario al servidor (o utilizarlo localmente).

+
+ +

Sintaxis

+ +
response.formData()
+.then(function(formdata) {
+  // hacer algo con tu formdata
+});
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Una {{domxref("Promise")}} que resuelve con un objeto {{domxref("FormData")}}.

+ +

Ejemplo

+ +

TBD.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.Body.formData")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/body/index.html b/files/es/web/api/body/index.html new file mode 100644 index 0000000000..3693a73653 --- /dev/null +++ b/files/es/web/api/body/index.html @@ -0,0 +1,99 @@ +--- +title: Body +slug: Web/API/Body +tags: + - API + - BODY + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Body +--- +
{{ APIRef("Fetch") }}
+ +

The Body {{glossary("mixin")}} of the Fetch API represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.

+ +

Body is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated body (a stream), a used flag (initially unset), and a MIME type (initially the empty byte sequence).

+ +

Properties

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
A {{domxref("Boolean")}} that indicates whether the body has been read.
+
+ +

Methods

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.
+
{{domxref("Body.json()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.
+
{{domxref("Body.text()")}}
+
Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is always decoded using UTF-8.
+
+ +

Examples

+ +

The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.

+ +

HTML Content

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JS Content

+ +
const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+	.then(res => res.blob())
+	.then(res => {
+		const objectURL = URL.createObjectURL(res);
+		myImage.src = objectURL;
+});
+ +

{{ EmbedLiveSample('Examples', '100%', '250px') }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#body-mixin','Body')}}{{Spec2('Fetch')}} 
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + + +

 

diff --git a/files/es/web/api/body/json/index.html b/files/es/web/api/body/json/index.html new file mode 100644 index 0000000000..54c8d75d12 --- /dev/null +++ b/files/es/web/api/body/json/index.html @@ -0,0 +1,82 @@ +--- +title: Body.json() +slug: Web/API/Body/json +translation_of: Web/API/Body/json +--- +
{{APIRef("Fetch API")}}
+ +

El método json() de {{DOMxRef("Body")}} recibe un flujo de datos {{DOMxRef("Response")}} y lo lee a término. Devuelve una promesa con el cuerpo del texto transformado a {{JSxRef("JSON")}}.

+ +

Sintáxis

+ +
response.json().then(data => {
+  // do something with your data
+});
+ +

Parámetros

+ +

No.

+ +

Valor devuelto

+ +

Una {{jsxref("Promise")}} que se resuelve a un objeto JavaScript. Este objeto puede ser cualquier cosa que pueda ser representada por JSON (un objeto, un array, una cadena de caracteres, un número...).

+ +

Example

+ +

In our fetch json example (run fetch json live), we create a new request using the {{DOMxRef("Request.Request", "Request()")}} constructor, then use it to fetch a .json file. When the fetch is successful, we read and parse the data using json(), then read values out of the resulting objects as you'd expect and insert them into list items to display our product data.

+ +
const myList = document.querySelector('ul');
+const myRequest = new Request('products.json');
+
+fetch(myRequest)
+  .then(response => response.json())
+  .then(data => {
+    for (const product of data.products) {
+      let listItem = document.createElement('li');
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = product.Name;
+      listItem.append(
+        ` can be found in ${
+          product.Location
+        }. Cost: `
+      );
+      listItem.appendChild(
+        document.createElement('strong')
+      ).textContent = `£${product.Price}`;
+      myList.appendChild(listItem);
+    }
+  });
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}{{Spec2("Fetch")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.Body.json")}}

+ +

See also

+ + diff --git a/files/es/web/api/cachestorage/index.html b/files/es/web/api/cachestorage/index.html new file mode 100644 index 0000000000..fdcfe56217 --- /dev/null +++ b/files/es/web/api/cachestorage/index.html @@ -0,0 +1,198 @@ +--- +title: CacheStorage +slug: Web/API/CacheStorage +tags: + - API + - CacheStorage + - Experimental + - Interface + - NeedsTranslation + - Reference + - Service Workers + - ServiceWorker + - TopicStub +translation_of: Web/API/CacheStorage +--- +

{{APIRef("Service Workers API")}}

+ +

The CacheStorage interface represents the storage for {{domxref("Cache")}} objects.

+ +

The interface:

+ + + +

Use {{domxref("CacheStorage.open()")}} to obtain a {{domxref("Cache")}} instance.

+ +

Use {{domxref("CacheStorage.match()")}} to check if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the CacheStorage object tracks.

+ +

You can access CacheStorage through the global {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}} property.

+ +
Note: CacheStorage always rejects with a SecurityError on untrusted origins (i.e. those that aren't using HTTPS, although this definition will likely become more complex in the future.) When testing, you can get around this by checking the "Enable Service Workers over HTTP (when toolbox is open)" option in the Firefox Devtools options/gear menu.
+ +
Note: {{domxref("CacheStorage.match()")}} is a convenience method. Equivalent functionality to match a cache entry can be implemented by returning an array of cache names from {{domxref("CacheStorage.keys()")}}, opening each cache with {{domxref("CacheStorage.open()")}}, and matching the one you want with {{domxref("Cache.match()")}}.
+ +

Methods

+ +
+
{{domxref("CacheStorage.match()")}}
+
Checks if a given {{domxref("Request")}} is a key in any of the {{domxref("Cache")}} objects that the {{domxref("CacheStorage")}} object tracks, and returns a {{jsxref("Promise")}} that resolves to that match.
+
{{domxref("CacheStorage.has()")}}
+
Returns a {{jsxref("Promise")}} that resolves to true if a {{domxref("Cache")}} object matching the cacheName exists.
+
{{domxref("CacheStorage.open()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the {{domxref("Cache")}} object matching the cacheName (a new cache is created if it doesn't already exist.)
+
{{domxref("CacheStorage.delete()")}}
+
Finds the {{domxref("Cache")}} object matching the cacheName, and if found, deletes the {{domxref("Cache")}} object and returns a {{jsxref("Promise")}} that resolves to true. If no {{domxref("Cache")}} object is found, it resolves to false.
+
{{domxref("CacheStorage.keys()")}}
+
Returns a {{jsxref("Promise")}} that will resolve with an array containing strings corresponding to all of the named {{domxref("Cache")}} objects tracked by the {{domxref("CacheStorage")}}. Use this method to iterate over a list of all the {{domxref("Cache")}} objects.
+
+ +

Examples

+ +

This code snippet is from the MDN sw-test example (see sw-test running live.) This service worker script waits for an {{domxref("InstallEvent")}} to fire, then runs {{domxref("ExtendableEvent.waitUntil","waitUntil")}} to handle the install process for the app. This consists of calling {{domxref("CacheStorage.open")}} to create a new cache, then using {{domxref("Cache.addAll")}} to add a series of assets to it.

+ +

In the second code block, we wait for a {{domxref("FetchEvent")}} to fire. We construct a custom response like so:

+ +
    +
  1. Check whether a match for the request is found in the CacheStorage. If so, serve that.
    2. +
  2. If not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).)
    3. +
  3. If this fails (e.g. because the network is down), return a fallback response.
    4. +
+ +

Finally, return whatever the custom response ended up being equal to, using {{domxref("FetchEvent.respondWith")}}.

+ +
self.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+  event.respondWith(caches.match(event.request).then(function(response) {
+    // caches.match() always resolves
+    // but in case of success response will have value
+    if (response !== undefined) {
+      return response;
+    } else {
+      return fetch(event.request).then(function (response) {
+        // response may be used only once
+        // we need to save clone to put one copy in cache
+        // and serve second one
+        let responseClone = response.clone();
+
+        caches.open('v1').then(function (cache) {
+          cache.put(event.request, responseClone);
+        });
+        return response;
+      }).catch(function () {
+        return caches.match('/sw-test/gallery/myLittleVader.jpg');
+      });
+    }
+  }));
+});
+
+ +

This snippet shows how the API can be used outside of a service worker context, and uses the await operator for much more readable code.

+ +
// Try to get data from the cache, but fall back to fetching it live.
+async function getData() {
+   const cacheVersion = 1;
+   const cacheName    = `myapp-${ cacheVersion }`;
+   const url          = 'https://jsonplaceholder.typicode.com/todos/1';
+   let cachedData     = await getCachedData( cacheName, url );
+
+   if ( cachedData ) {
+      console.log( 'Retrieved cached data' );
+      return cachedData;
+   }
+
+   console.log( 'Fetching fresh data' );
+
+   const cacheStorage = await caches.open( cacheName );
+   await cacheStorage.add( url );
+   cachedData = await getCachedData( cacheName, url );
+   await deleteOldCaches( cacheName );
+
+   return cachedData;
+}
+
+// Get data from the cache.
+async function getCachedData( cacheName, url ) {
+   const cacheStorage   = await caches.open( cacheName );
+   const cachedResponse = await cacheStorage.match( url );
+
+   if ( ! cachedResponse || ! cachedResponse.ok ) {
+      return false;
+   }
+
+   return await cachedResponse.json();
+}
+
+// Delete any old caches to respect user's disk space.
+async function deleteOldCaches( currentCache ) {
+   const keys = await caches.keys();
+
+   for ( const key of keys ) {
+      const isOurCache = 'myapp-' === key.substr( 0, 6 );
+
+      if ( currentCache === key || ! isOurCache ) {
+         continue;
+      }
+
+      caches.delete( key );
+   }
+}
+
+try {
+   const data = await getData();
+   console.log( { data } );
+} catch ( error ) {
+   console.error( { error } );
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#cachestorage', 'CacheStorage')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/cachestorage/keys/index.html b/files/es/web/api/cachestorage/keys/index.html new file mode 100644 index 0000000000..eee8e0e443 --- /dev/null +++ b/files/es/web/api/cachestorage/keys/index.html @@ -0,0 +1,74 @@ +--- +title: CacheStorage.keys() +slug: Web/API/CacheStorage/keys +translation_of: Web/API/CacheStorage/keys +--- +

{{APIRef ("API de Service Workers")}}

+ +

El keys()método de la interfaz {{domxref ("CacheStorage")}} devuelve un {{jsxref ("Promise")}} que se resolverá con una matriz que contiene las cadenas correspondientes a todos los {{domxref ("Cache")}} objetos rastreados por el objeto {{domxref ("CacheStorage")}} en el orden en que fueron creados. Use este método para iterar sobre una lista de todos los objetos {{domxref ("Cache")}}.

+ +

Puede acceder a CacheStoragetravés de la propiedad global {{domxref ("WindowOrWorkerGlobalScope.caches", "caches")}}.

+ +

Sintaxis

+ +
caches.keys().then(function(keyList) {
+  // haz algo con tu keyList
+});
+
+ +

Parámetros

+ +

Ninguna.

+ +

Valor de retorno

+ +

a {{jsxref("Promise")}} that resolves with an array of the {{domxref("Cache")}} names inside the {{domxref("CacheStorage")}} object.

+ +

Examples

+ +

In this code snippet we wait for an {{domxref("ServiceWorkerGlobalScope.onactivate", "activate")}} event, and then run a {{domxref("ExtendableEvent.waitUntil","waitUntil()")}} block that clears up any old, unused caches before a new service worker is activated. Here we have a whitelist containing the names of the caches we want to keep (cacheWhitelist). We return the keys of the caches in the {{domxref("CacheStorage")}} object using keys(), then check each key to see if it is in the whitelist. If not, we delete it using {{domxref("CacheStorage.delete()")}}.

+ +
then.addEventListener('activar', función (evento) { 
+  var cacheWhitelist = ['v2']; 
+
+  event.waitUntil( 
+    caches.keys().then(function(keyList) { 
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      });
+    })
+  );
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Service Workers', '# dom-cachestorage-keys', 'CacheStorage: keys')}}{{Spec2 ('Trabajadores de servicio')}}Definición inicial
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.CacheStorage.keys")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/cameracapabilities/effects/index.html b/files/es/web/api/cameracapabilities/effects/index.html new file mode 100644 index 0000000000..1204fb0c34 --- /dev/null +++ b/files/es/web/api/cameracapabilities/effects/index.html @@ -0,0 +1,37 @@ +--- +title: CameraCapabilities.effects +slug: Web/API/CameraCapabilities/effects +translation_of: Archive/B2G_OS/API/CameraCapabilities/effects +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Resumen

+

El valor de la propiedad effects en un Array que identifica los efectos  (tales como normal, sepia, mono, etc.) que soporta la camara.

+

Sintaxis

+
var effects = instanceOfCameraControl.capabilities.effects
+

Valor

+

Devuelve un Array de cadenas.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var effects = camera.capabilities.effects;
+
+  effects.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especifiacion

+

No forma parte de ninguna especifiacion; en cualquier caso, esta API deberia ser eliminada cuando la WebRTC Capture and Stream API haya sido implementada.

+

Ver tambien

+ diff --git a/files/es/web/api/cameracapabilities/fileformats/index.html b/files/es/web/api/cameracapabilities/fileformats/index.html new file mode 100644 index 0000000000..5193200866 --- /dev/null +++ b/files/es/web/api/cameracapabilities/fileformats/index.html @@ -0,0 +1,37 @@ +--- +title: CameraCapabilities.fileFormats +slug: Web/API/CameraCapabilities/fileFormats +translation_of: Archive/B2G_OS/API/CameraCapabilities/fileFormats +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Summary

+

La propiedad fileFormats es un Array que identifica los formatos de archivo que soporta la camara, tales como jpeg, rgb565, etc.

+

Sintaxis

+
var formats = instanceOfCameraControl.capabilities.fileFormats
+

Valor

+

Devuelve un Array de cadenas.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var formats = camera.capabilities.fileFormats;
+
+  formats.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especificacion

+

No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la WebRTC Capture and Stream API haya sido implementada.

+

Ver tambien

+ diff --git a/files/es/web/api/cameracapabilities/flashmodes/index.html b/files/es/web/api/cameracapabilities/flashmodes/index.html new file mode 100644 index 0000000000..be89eac3ac --- /dev/null +++ b/files/es/web/api/cameracapabilities/flashmodes/index.html @@ -0,0 +1,37 @@ +--- +title: CameraCapabilities.flashModes +slug: Web/API/CameraCapabilities/flashModes +translation_of: Archive/B2G_OS/API/CameraCapabilities/flashModes +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Resumen

+

La propiedad flashModes es un Array de cadenas que identifican cada modo de flash soportado por la camara. Los posibles valores son auto, off, on o torch.

+

Sintaxis

+
var flash = instanceOfCameraControl.capabilities.flashModes
+

Valor

+

Devuelve un  Array de cadenas.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  var flash = camera.capabilities.flashModes;
+
+  flash.forEach(function (value) {
+    console.log(value)
+  });
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especifiacion

+

No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la WebRTC Capture and Stream API haya sido implementada.

+

Ver tambien

+ diff --git a/files/es/web/api/cameracapabilities/index.html b/files/es/web/api/cameracapabilities/index.html new file mode 100644 index 0000000000..a534b51ab5 --- /dev/null +++ b/files/es/web/api/cameracapabilities/index.html @@ -0,0 +1,86 @@ +--- +title: CameraCapabilities +slug: Web/API/CameraCapabilities +translation_of: Archive/B2G_OS/API/CameraCapabilities +--- +

{{ Apiref() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

The {{domxref("CameraControl.capabilities")}} property returns a CameraCapabilities object, which describes all the camera's capabilities.

+

Properties

+
+
+ {{domxref("CameraCapabilities.effects")}} {{readonlyinline}}
+
+ An Array of strings identifying the effects (such as normal, sepia, mono, etc.) that the camera supports.
+
+ {{domxref("CameraCapabilities.fileFormats")}} {{readonlyinline}}
+
+ An Array of strings identifying the file formats supported by the camera, such as jpeg, rgb565, etc.
+
+ {{domxref("CameraCapabilities.flashModes")}} {{readonlyinline}}
+
+ An Array of strings identifying each of the flash modes supported by the camera. Possible values are auto, off, on or torch.
+
+ {{domxref("CameraCapabilities.focusModes")}} {{readonlyinline}}
+
+ An Array of strings identifying each of the focus modes supported by the camera such as auto, fixed, macro, etc.
+
+ {{domxref("CameraCapabilities.maxExposureCompensation")}} {{readonlyinline}}
+
+ A number that defines the maximum supported exposure compensation value.
+
+ {{domxref("CameraCapabilities.maxFocusAreas")}} {{readonlyinline}}
+
+ A number that defines the maximum number of focus areas supported by the camera.
+
+ {{domxref("CameraCapabilities.maxMeteringAreas")}} {{readonlyinline}}
+
+ A number that defines the maximum number of metering areas supported by the camera.
+
+ {{domxref("CameraCapabilities.minExposureCompensation")}} {{readonlyinline}}
+
+ A number that defines the minimum supported exposure compensation value.
+
+ {{domxref("CameraCapabilities.pictureSizes")}} {{readonlyinline}}
+
+ An Array of objects containing the height and width properties supported for picture taking.
+
+ {{domxref("CameraCapabilities.previewSizes")}} {{readonlyinline}}
+
+ An Array of objects containing the height and width properties supported for the video preview stream.
+
+ {{domxref("CameraCapabilities.recorderProfiles")}} {{readonlyinline}}
+
+ An object with attributes for each of the supported recorder profiles.
+
+ {{domxref("CameraCapabilities.sceneModes")}} {{readonlyinline}}
+
+ An Array of strings identifying each of the scene modes supported by the camera such as auto, night, beach, etc.
+
+ {{domxref("CameraCapabilities.stepExposureCompensation")}} {{readonlyinline}}
+
+ A number that defines the exposure compensation minimum step-size.
+
+ {{domxref("CameraCapabilities.videoSizes")}} {{readonlyinline}}
+
+ An Array of objects containing the height and width properties supported for video recording.
+
+ {{domxref("CameraCapabilities.whiteBalanceModes")}} {{readonlyinline}}
+
+ An Array of strings identifiers for each white balance modes supported by the camera such as auto, fluorecent, etc.
+
+ {{domxref("CameraCapabilities.zoomRatios")}} {{readonlyinline}}
+
+ An Array of numbers representing all the supported zoom ratios. If the camera has no zoom capabilities, the value is null.
+
+

Methods

+

None.

+

Specification

+

Not part of any specification; however, this API should be removed when the WebRTC Capture and Stream API has been implemented.

+

See also

+ diff --git a/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html b/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html new file mode 100644 index 0000000000..2baf025df3 --- /dev/null +++ b/files/es/web/api/cameracapabilities/maxexposurecompensation/index.html @@ -0,0 +1,33 @@ +--- +title: CameraCapabilities.maxExposureCompensation +slug: Web/API/CameraCapabilities/maxExposureCompensation +translation_of: Archive/B2G_OS/API/CameraCapabilities/maxExposureCompensation +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Resumen

+

La propiedad maxExposureCompensation es un número que define el valor máximo de compensación de exposición soportado.

+

Sintaxis

+
var max = instanceOfCameraControl.capabilities.maxExposureCompensation
+

Valor

+

Devuelve un número.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  console.log(camera.capabilities.maxExposureCompensation);
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especificación

+

No forma parte de ninguna especificación; No obstante, esta API debería ser eliminada cuando la WebRTC Capture and Stream API haya sido implementada.

+

Ver también

+ diff --git a/files/es/web/api/cameracapabilities/maxfocusareas/index.html b/files/es/web/api/cameracapabilities/maxfocusareas/index.html new file mode 100644 index 0000000000..6d0024bebb --- /dev/null +++ b/files/es/web/api/cameracapabilities/maxfocusareas/index.html @@ -0,0 +1,33 @@ +--- +title: CameraCapabilities.maxFocusAreas +slug: Web/API/CameraCapabilities/maxFocusAreas +translation_of: Archive/B2G_OS/API/CameraCapabilities/maxFocusAreas +--- +

{{ Apiref() }}

+

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('certified') }}

+

Resumen

+

La propiedad maxFocusAreas es un numero que define el numero maximo de areas de foco que permite la camara.

+

Sintaxis

+
var max = instanceOfCameraControl.capabilities.maxFocusAreas
+

Valor

+

Devuelve un numero.

+

Ejemplo

+
var options = {
+  camera: navigator.mozCameras.getListOfCameras()[0]
+};
+
+function onSuccess(camera) {
+  console.log(camera.capabilities.maxFocusAreas);
+};
+
+navigator.mozCameras.getCamera(options, onSuccess)
+
+

Especificacion

+

No es parte de ninguna especificacion; en cualquier caso, esta API deberia ser eliminada cuando la  WebRTC Capture and Stream API haya sido implementada.

+

Ver tambien

+ diff --git a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html b/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html new file mode 100644 index 0000000000..b85b83238c --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html @@ -0,0 +1,295 @@ +--- +title: Ejemplo de composición +slug: Web/API/Canvas_API/Tutorial/Compositing/Ejemplo +tags: + - Canvas + - Ejemplo + - HTML + - HTML5 + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

Este programa de ejemplo muestra una cantidad de operaciones de composición. La salida se ve así:

+ +

{{EmbedLiveSample("Ejemplo_de_composición", "100%", 7250)}}

+ +

Ejemplo de composición

+ +

Este código establece los valores globales utilizados por el resto del programa.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.',
+'La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.',
+'La nueva forma se dibuja donde no se superpone al contenido del canvas existente.',
+'La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.',
+'Se dibujan nuevas formas detrás del contenido del canvas existente',
+'El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.',
+'El contenido existente se mantiene donde no se superpone a la nueva forma.',
+'El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.',
+'Donde ambas formas se superponen, el color se determina agregando valores de color.',
+'Solo se muestra la nueva forma.',
+'Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.',
+'Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ',
+'Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).',
+'Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.',
+'Conserva los píxeles más oscuros de ambas capas.',
+'Conserva los píxeles más claros de ambas capas.',
+'Divide la capa inferior por la capa superior invertida.',
+'Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.',
+'Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.',
+'Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.',
+'Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.',
+'Al igual que la diferencia, pero con menor contraste.',
+'Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.',
+'Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.',
+'Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.',
+'Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.'
+          ].reverse();
+var width = 320;
+var height = 340;
+
+ +

Programa principal

+ +

Cuando se carga la página, este código se ejecuta para configurar y ejecutar el ejemplo:

+ +
window.onload = function() {
+    // lum en sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensionar canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+
+ +

Y este código, runComposite(), maneja la mayor parte del trabajo, dependiendo de una serie de funciones de utilidad para hacer las partes difíciles.

+ +
function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('existing content', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('new content', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+
+ +

Funciones de utilidad

+ +

El programa se basa en una serie de funciones de utilidad.

+ +
var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
+ +
var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // por grado
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
+ +
// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/es/web/api/canvas_api/tutorial/compositing/index.html b/files/es/web/api/canvas_api/tutorial/compositing/index.html new file mode 100644 index 0000000000..1d45712fd4 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/compositing/index.html @@ -0,0 +1,117 @@ +--- +title: Compositing and clipping +slug: Web/API/Canvas_API/Tutorial/Compositing +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Lienzo + - NeedsTranslation + - Recorte + - TopicStub + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Compositing +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
+ +
+

En todos nuestros ejemplos anteriores, las formas siempre fueron dibujadas una encima de la anterior. Estos es más que adecuado para la mayoría de las situaciones pero se limita al orden compuesto de las figuras. Podemos, sin embargo, cambiar este comportamiento estableciendo  el valor de la propiedad globalCompositeOperation. Además, la proeidad clip nos permite ocultar partes de figuras que no queremos mostrar.

+
+ +

globalCompositeOperation

+ +

No solo podemos dibujar formas nuevas detrás de las ya existentes sino que las podemos utilizar para enmascarar ciertas áreas, limpiar secciones del lienzo (canvas no se limita a utilizar rectángulos como en el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) y algunas cosas más.

+ +
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+
Esto establece el tipo de operación compuesta a aplicar cuando se dibujan nuevas figuras, en donde tipo (type) es una cadena de caracteres que identifica cual de las doce operaciones compuestas se utilizará.
+
+ +

Vea ejemplos de composición para el código de los siguientes ejemplos.

+ +

{{EmbedLiveSample("Compositing_example", 750, 6750, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}

+ +

Trazado de Recorte

+ +

Un trazado de recoirte es como una figura normal en el lienzo pero actúa como una máscara para ocultar las partes de la misma que no se quieren mostrar. Este efecto se muestra en la figura de la derecha. La estrella roja es nuestro trazado de recorte. Todo lo que cae fuera de este trazado no se dibujará en el lienzo.

+ +

Si comparamos el trazado de recorte con la propiedad globalCompositeOperation que hemos visto antes, vemos dos modos compuestos que logran mas o menos los mismos efectos en source-in y source-atop. Las diferencias mas importantes entre éstos dos son que el trazado de recorte no dibujan nunca en el lienzo y que nunca se afecta por agregar nuevas figuras. Esto vuelve al trazado de recorte ideal para dibujar múltiples figuras en un área delimitada.

+ +

En el capítulo acerca de dibujo de figuras solo menciono a los métodos stroke() y fill() pero existe un tercer método que se usa para trazados llamado clip().

+ +
+
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+
Convierte al trazado en ejecución a un trazado de recorte.
+
+ +

Se utiliza clip() en lugar de closePath() para cerrar el trazado y volverlo uno de recorte, en vez de marcar (stroke) o rellenar el trazado.

+ +

Por edfecto el elemento {{HTMLElement("canvas")}} tiene un trazado de recorte que es de extacamente el mismo tamaño del propio lienzo. En otras palabras, la máscara de recorte (clipping) no se da.

+ +

Un ejemplo de clip

+ +

En este ejemplo, utilizamos un trazado de recorte de forma circular para restringir el dibujo de un conjunto de estrellas aleatorias dentro de una región particular del lienzo.

+ +
function dibuja() {
+  var ctx = document.getElementById('lienzo').getContext('2d');
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.translate(75, 75);
+
+  // crear un trazado de corte de forma circular
+  ctx.beginPath();
+  ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
+  ctx.clip();
+
+  // pinta el fondo
+  var lingrad = ctx.createLinearGradient(0, -75, 0, 75);
+  lingrad.addColorStop(0, '#232256');
+  lingrad.addColorStop(1, '#143778');
+
+  ctx.fillStyle = lingrad;
+  ctx.fillRect(-75, -75, 150, 150);
+
+  // dibuja las estrellas
+  for (var j = 1; j < 50; j++) {
+    ctx.save();
+    ctx.fillStyle = '#fff';
+    ctx.translate(75 - Math.floor(Math.random() * 150),
+                  75 - Math.floor(Math.random() * 150));
+    dibulaEstrella(ctx, Math.floor(Math.random() * 4) + 2);
+    ctx.restore();
+  }
+
+}
+
+function dibujaEstrella(ctx, r) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(r, 0);
+  for (var i = 0; i < 9; i++) {
+    ctx.rotate(Math.PI / 5);
+    if (i % 2 === 0) {
+      ctx.lineTo((r / 0.525731) * 0.200811, 0);
+    } else {
+      ctx.lineTo(r, 0);
+    }
+  }
+  ctx.closePath();
+  ctx.fill();
+  ctx.restore();
+}
+
+ + + +

En las primeras líneas de código, dibujamos un rectángulo negro del tamaño del lienzo como telón de fondo, luego trasladamos el origen del mismo al centro. A continuación, creamos un trazado de recorte de forma circular, a través de dibujar un arco y mediante la llamada a clip(). El recorte también es parte del estado guardado del lienzo. Si queremos mantener el recorte original, podríamos haber guardado el estado anterior del lienzo justo antes de que creamos el nuevo.

+ +

Todo lo que se dibuja después de crear un recorte aparecerá dentro de su trazado. Se puede ver claramente esto en el dibujo de gradiente lineal que realizamos a continuación. Después se ubican estrellas en 50 posiciones alteatorias y escaladas utilizando la función drawStar(). Una vez más, las estrellas solo aparecen dentro del recorte trazado  en el lienzo.

+ +

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+ +

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

diff --git a/files/es/web/api/canvasimagesource/index.html b/files/es/web/api/canvasimagesource/index.html new file mode 100644 index 0000000000..bf143d9335 --- /dev/null +++ b/files/es/web/api/canvasimagesource/index.html @@ -0,0 +1,42 @@ +--- +title: CanvasImageSource +slug: Web/API/CanvasImageSource +tags: + - API + - Auxiliar + - Canvas + - Referencia +translation_of: Web/API/CanvasImageSource +--- +

{{APIRef("Canvas API")}}

+ +

El tipo auxiliar CanvasImageSource representa cualquiera de los siguientes tipos:

+ + + +

Este es un tipo auxiliar usado para simplificar la especificación, no es una interfáz y por ello no hay objetos implementandolo.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#canvasimagesource", "CanvasImageSource")}}{{Spec2('HTML WHATWG')}}Definición inicial.
diff --git a/files/es/web/api/canvasrenderingcontext2d/arc/index.html b/files/es/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..db4803a7ab --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,226 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D .arc() de la API de Canvas 2D añade un arco a la trayectoria centrada en la posición (x, y) con el radio r comenzando en startAngle y terminando en endAngle que va en la dirección dada en sentido antihorario (predeterminado en sentido  horario) .

+ +

Sintaxis

+ +
Void ctx .arc (x, y, radio, startAngle, endAngle, antihorario);
+ +

Parámetros

+ +
+
x
+
La coordenada x del centro del arco.
+
y
+
La coordenada y del centro del arco.
+
radius
+
El radio del arco.
+
startAngle
+
El ángulo en el que se inicia el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.
+
endAngle
+
El ángulo en el que termina el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.
+
anticlockwise Opcional
+
Un Boolean opcional que, si es true , hace que el arco se dibuje en sentido contrario a las agujas del reloj entre los dos ángulos. De forma predeterminada, se dibuja en el sentido de las agujas del reloj.
+
+ +

Ejemplos

+ +

Utilizando el método del arc

+ +

Esto es sólo un simple fragmento de código dibujando un círculo.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(75, 75, 50, 0, 2 * Math.PI);
+ctx.stroke();
+
+ +

Edite el código de abajo y vea su actualización de cambios en vivo en el lienzo:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.beginPath();
+ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

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

+ +

Diferentes formas demostradas

+ +

En este ejemplo se dibujan diferentes formas para mostrar lo que es posible al usar arc() .

+ +
+
HTML
+ +
<canvas id="canvas" width="150" height="200"></canvas>
+
+ +
JavaScript
+
+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+// Draw shapes
+for (var i = 0; i < 4; i++) {
+  for(var j = 0; j < 3; j++) {
+    ctx.beginPath();
+    var x              = 25 + j * 50;               // x coordinate
+    var y              = 25 + i * 50;               // y coordinate
+    var radius         = 20;                    // Arc radius
+    var startAngle     = 0;                     // Starting point on circle
+    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
+    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise
+
+    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+    if (i > 1) {
+      ctx.fill();
+    } else {
+      ctx.stroke();
+    }
+  }
+}
+ +

{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarioWHATWG HTML Estándar de vida
+ La definición de 'CanvasRenderingContext2D.arc' en esa especificación.		Estándar de vidaStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Notas específicas de Gecko

+ +

Comenzando con Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1):

+ + + +

Ver también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html new file mode 100644 index 0000000000..1c91e264f4 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -0,0 +1,180 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Referencia + - metodo +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.beginPath() del API Canvas 2D comienza una nueva ruta vaciando la lista de sub-rutas. Invoca este método cuando quieras crear una nueva ruta. 

+ +

Sintaxis

+ +
void ctx.beginPath();
+
+ +

Ejemplos

+ +

Usando el método beginPath

+ +

Este es solo un trozo de código el cual usa el método beginPath.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120,120);
+ctx.stroke();
+
+ +

Edita el código aquí debajo y mira tus cambios actualizarse en vivo en el canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:200px">
+// First path
+ctx.beginPath();
+ctx.strokeStyle = 'blue';
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.stroke();
+
+// Second path
+ctx.beginPath();
+ctx.strokeStyle = 'green';
+ctx.moveTo(20,20);
+ctx.lineTo(120, 120);
+ctx.stroke();</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html new file mode 100644 index 0000000000..64aa1a3908 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -0,0 +1,203 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +
{{APIRef}}
+ +
El método CanvasRenderingContext2D.clearRect() del API Canvas 2D convierte todos los pixeles en el rectangulo definido por el punto de inicio (x, y) y tamaño (width, height) a negro transparente, borrando cualquier contenido dibujado anteriormente.
+ +
 
+ +

Syntaxis

+ +
+

HTML Content

+ +
void ctx.clearRect(x, y, width, height);
+ +

Parametros

+ +
+
x
+
El eje x  de la coordenada para el punto de inicio del rectangulo.
+
y
+
El eje y  de la coordenada para el punto de inicio del rectangulo.
+
width
+
El ancho del rectangulo.
+
heigth
+
el alto del rectangulo.
+
+ +

Notas de uso

+ +

Un problema común con clearRect es que puede parecer que no funciona cuando no se usan las trayectorias de dibujo (paths) de forma adecuada. No olvide llamar {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} antes de comenzar a dibujar el nuevo cuadro después de llamar clearRect.

+ +

Ejemplos

+ +
+
+

Usando el método clearRect

+
+
+ +

  Este es un simple fragmento (snippet) de código que usa el método clearRect.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d'); c
+
+tx.beginPath(); ctx.moveTo(20, 20);
+ctx.lineTo(200, 20);
+ctx.lineTo(120, 120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);
+
+// clear the whole canvas
+// ctx.clearRect(0, 0, canvas.width, canvas.height);
+ +

  

+ +

Edite el código de abajo y vea sus cambios actualizados en vivo en el canvas:

+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}{{Spec2('HTML WHATWG')}} 
+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code" style="height:140px;">
+ctx.beginPath();
+ctx.moveTo(20,20);
+ctx.lineTo(200,20);
+ctx.lineTo(120,120);
+ctx.closePath(); // draws last line of the triangle
+ctx.stroke();
+
+ctx.clearRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+
+ + + + +
+ +

Compatibilidad con exploradores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Vea También

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html new file mode 100644 index 0000000000..2d5330ec53 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -0,0 +1,232 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContect2D + - Métodos + - Referencia +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.drawImage() de la API Canvas 2D proporciona diferentes formas para dibujar una imagen dentro de canvas.

+ +

Sintaxis

+ +
void ctx.drawImage(image, dx, dy);
+void ctx.drawImage(image, dx, dy, dWidth, dHeight);
+void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+
+ +

drawImage

+ +

Parámetros

+ +
+
image
+
Un elemento a dibujar dentro del context. La especificación permite cualquier fuente de imagen en canvas ({{domxref("CanvasImageSource")}}), tal como una {{domxref("HTMLImageElement")}}, un {{domxref("HTMLVideoElement")}}, un {{domxref("HTMLCanvasElement")}} o un{{domxref("ImageBitmap")}}.
+
dx
+
La coordenada X del canvas destino en la cual se coloca la esquina superior izquierda de la imagen origen.
+
dy
+
La coordenada Y del canvas destino en la cual se coloca la esquina superior izquierda de la imagen origen.
+
dWidth
+
El ancho para dibujar la imagen en el canvas destino.
+
dHeight
+
El alto para dibujar la imagen en el canvas destino. Esto permite escalar la imagen dibujada. Si no se especifica, el alto de  la imagen no se escala al dibujar.
+
sx
+
La coordenada X de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.
+
sy
+
La coordenada Y de la esquina superior izquierda del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.
+
sWidth
+
El ancho del sub-rectangulo de la imagen origen a dibujar en el contexto de destino. Si no se especifica, se utiliza todo el rectangulo entero desde las coordenadas especificadas por sx y sy hasta la esquina inferior derecha de la imagen.
+
sHeight
+
La altura del sub-rectangulo de la imagen origen a dibujar en el contexto de destino.
+
+ +

Excepciones lanzadas

+ +
+
INDEX_SIZE_ERR
+
Si el canvas o la fuente de anchura o altura del rectangulo es igual a cero.
+
INVALID_STATE_ERR
+
La imagen no tiene datos de imagen.
+
TYPE_MISMATCH_ERR
+
El elemento de origen especificado no es compatible.
+
+ +

Ejemplos

+ +

Usando el método drawImage

+ +

Este es sólo un simple fragmento de código que utiliza el método drawImage.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+<div style="display:none;">
+  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
+       width="300" height="227">
+</div>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
+
+ +

Edita el código debajo y observa los cambios actualizarse en vivo en el canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div style="display:none;">
+  <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+</div>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var image = document.getElementById('source');
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ImageBitmap como fuente de imagen{{CompatUnknown}}{{CompatGeckoDesktop(42)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ImageBitmap como fuente de imagen{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(42)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Notas de compatibilidad

+ + + +

Mira también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..bc1a6ddf65 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,169 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.fillRect()  de la API Canvas 2D dibuja un rectángulo relleno en la posición ( x, y ). El tamaño del rectángulo se determina por width (anchura) y height (altura). El estilo de relleno se determina por el atributo fillStyle.

+ +

Sintaxis

+ +
void ctx.fillRect(x, y, width, height);
+
+ +

Parámetros

+ +
+
x
+
La componente x de la coordenada para el punto de comienzo del rectángulo.
+
y
+
La componente y de la coordenada para el punto de comienzo del rectángulo.
+
width
+
La anchura del rectángulo.
+
height
+
La altura del rectángulo.
+
+ +

Ejemplos

+ +

Usando el método fillRect

+ +

El siguiente fragmento de código usa el método fillRect.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+// Rellenar el canvas completo
+// ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ +

Edita el código  que se encuentra a continuación y observa en vivo los cambios actualizados en el canvas:

+ +
+
Playable code
+ +
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
+<div class="playable-buttons">
+  <input id="edit" type="button" value="Edit" />
+  <input id="reset" type="button" value="Reset" />
+</div>
+<textarea id="code" class="playable-code">
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);</textarea>
+
+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById("code");
+var reset = document.getElementById("reset");
+var edit = document.getElementById("edit");
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener("click", function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener("click", function() {
+  textarea.focus();
+})
+
+textarea.addEventListener("input", drawCanvas);
+window.addEventListener("load", drawCanvas);
+
+
+ +

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

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Documentos relacionados

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..4f0c72afd0 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,103 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +tags: + - CanvasRenderingContext2D + - Context 2D + - Español + - Method + - Reference + - getImageData +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +
{{APIRef}}
+ +

 

+ +

El método CanvasRenderingContext2D.getImageData() de la API de Canvas 2D devuelve un objeto ImageData que representa los datos de píxeles subyacentes para el área del lienzo denotada por el rectángulo que comienza en (sx, sy) y tiene un ancho de sw y una altura de sh. Este método no se ve afectado por la matriz de transformación de la lona.

+ +

Los píxeles fuera del área del lienzo están presentes como valores negros transparentes en los datos de imagen devueltos.

+ +

 

+ +

Sintaxis

+ +
ImageData ctx.getImageData(sx, sy, sw, sh);
+
+ +

Parámetros

+ +
+
sx
+
La coordenada 'x' de la esquina superior izquierda del rectángulo del que se extraerán los datos de imagen.
+
sy
+
La coordenada 'y' de la esquina superior izquierda del rectángulo del que se extraerá el ImageData.
+
sw
+
El ancho del rectángulo del que se extraerán los datos de la imagen.
+
sh
+
La altura del rectángulo del que se extraerán los datos de la imagen.
+
+ +

Valor de retorno

+ +

An ImageData object containing the image data for the given rectangle of the canvas.

+ +

Errores cometidos

+ +
+
IndexSizeError
+
Lanzado si cualquiera de los argumentos de anchura o altura es cero.
+
+ +

Ejemplos

+ +

Usando el método getImageData

+ +

Esto es sólo un simple fragmento de código que utiliza el método getImageData. Para obtener más información, consulte Manipulación de píxeles con Canvas y el objeto ImageData.

+ +

HTML

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

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.rect(10, 10, 100, 100);
+ctx.fill();
+
+console.log(ctx.getImageData(50, 50, 100, 100));
+// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.CanvasRenderingContext2D.getImageData")}}

+ +

Véase también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/index.html b/files/es/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..77df4af190 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,519 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D +--- +
{{APIRef}}
+ +

La interfaz CanvasRenderingContext2D proporciona el contexto de renderizado 2D para la superficie de dibujo de un elemento {{ HTMLElement("canvas") }}.

+ +

Para obtener un objeto de esta interfaz, llama a {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} en un <canvas>, proporcionando "2d" como argumento:

+ +
var canvas = document.getElementById('mycanvas');
+var ctx = canvas.getContext('2d');
+
+ +

Una vez que tengas el contexto de renderizado 2D para un canvas, podrás dibujar en ella. Por ejemplo:

+ +
ctx.fillStyle = "rgb(200,0,0)";
+ctx.fillRect(10, 10, 55, 50);
+
+ +

Mira las propiedades y métodos en la barra lateral. El tutorial de canvas tiene más información, ejemplos y recursos también.

+ +

Dibujando rectángulos

+ +

Hay 3 métodos que inmediatamente dibujan rectángulos en el bitmap.

+ +
+
{{domxref("CanvasRenderingContext2D.clearRect()")}}
+
Establece todos los píxeles del rectangulo definido por los puntos (x, y) y tamaños (ancho, alto) a negro transparente, borrando cualquier contenido previo.
+
{{domxref("CanvasRenderingContext2D.fillRect()")}}
+
Dibuja un rectángulo relleno en la posición (x, y) cuyo tamaño está determinado por la anchura y la altura.
+
{{domxref("CanvasRenderingContext2D.strokeRect()")}}
+
Dibuja un rectángulo que tiene como posición inicial (x, y) con un ancho w y altura h sobre el canvas, utilizando el estilo de trazo actual.
+
+ +

Dibujando texto

+ +

Los siguientes métodos  se proporcionan para dibujar texto. Mira también el objeto {{domxref("TextMetrics")}} para propiedades de texto.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText()")}}
+
Dibuja (llena) un texto dado en una posición (x, y) dada.
+
{{domxref("CanvasRenderingContext2D.strokeText()")}}
+
Dibuja (trazas) un texto dado en una posición (x, y) dada.
+
{{domxref("CanvasRenderingContext2D.measureText()")}}
+
Devuelve el objeto {{domxref("TextMetrics")}}.
+
+ +

Los estilos de línea

+ +

Los siguientes métodos y propiedades controlan como las líneas son dibujadas.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth")}}
+
Ancho de líneas. Por defecto 1.0
+
{{domxref("CanvasRenderingContext2D.lineCap")}}
+
Tipo de terminaciones en el final de las líneas. Posibles valores: butt (defecto), round, square.
+
{{domxref("CanvasRenderingContext2D.lineJoin")}}
+
Define el tipo de esquinas donde dos líneas se encuentran. Pislbes valores: round, bevel, miter (defecto).
+
{{domxref("CanvasRenderingContext2D.miterLimit")}}
+
Relación límite angular. Defecto 10.
+
{{domxref("CanvasRenderingContext2D.getLineDash()")}}
+
Devuelve la matriz patrón de trazos actual que contiene un número de par de números no negativos.
+
{{domxref("CanvasRenderingContext2D.setLineDash()")}}
+
Establece el patrón de trazos linea actual.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset")}}
+
Especifica donde inicia una gama de instrumentos en una línea.
+
+ +

Estilos de texto

+ +

Las siguientes propiedades control como el texto es presentado.

+ +
+
{{domxref("CanvasRenderingContext2D.font")}}
+
Ajuste de fuente. Valor por defecto 10px sans-serif.
+
{{domxref("CanvasRenderingContext2D.textAlign")}}
+
Text alignment setting. Possible values: start (default), end, left, right or center.
+
{{domxref("CanvasRenderingContext2D.textBaseline")}}
+
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic (default), ideographic, bottom.
+
{{domxref("CanvasRenderingContext2D.direction")}}
+
Directionality. Possible values: ltr, rtl, inherit (default).
+
+ +

Estilo del relleno y de los bordes

+ +

Fill styling es utilizado para estilizar los colores del relleno y los bordes de las  formas.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle")}}
+
Utilizado para dar color al relleno de las formas. Color por defecto #000 (negro).
+
{{domxref("CanvasRenderingContext2D.strokeStyle")}}
+
Utilizado para dar color al borde de las formas. Color por defecto #000 (negro)..
+
+ +

Degradados y patrones

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}
+
Creates a linear gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}
+
Creates a radial gradient along the line given by the coordinates represented by the parameters.
+
{{domxref("CanvasRenderingContext2D.createPattern()")}}
+
Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.
+
+ +

Sombras

+ +
+
{{domxref("CanvasRenderingContext2D.shadowBlur")}}
+
Especifica el efecto de desenfoque. Predeterminado 0
+
{{domxref("CanvasRenderingContext2D.shadowColor")}}
+
Color de la sombra. Predeterminado totalmente transparente negro.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}
+
Distancia horizontal del desplazamiento de la sombra. Predeterminado 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}
+
Distancia vertical del desplazamiento de la sombra. Predeterminado 0.
+
+ +

Paths

+ +

The following methods can be used to manipulate paths of objects.

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath()")}}
+
Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.
+
{{domxref("CanvasRenderingContext2D.closePath()")}}
+
Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.
+
{{domxref("CanvasRenderingContext2D.moveTo()")}}
+
Moves the starting point of a new sub-path to the (x, y) coordinates.
+
{{domxref("CanvasRenderingContext2D.lineTo()")}}
+
Connects the last point in the subpath to the x, y coordinates with a straight line.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}
+
Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}
+
Adds a quadratic Bézier curve to the current path.
+
{{domxref("CanvasRenderingContext2D.arc()")}}
+
Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.arcTo()")}}
+
Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.
+
{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}
+
Adds an ellipse to the path which is centered at (x, y) position with the radii radiusX and radiusY starting at startAngle and ending at endAngle going in the given direction by anticlockwise (defaulting to clockwise).
+
{{domxref("CanvasRenderingContext2D.rect()")}}
+
Creates a path for a rectangle at position (x, y) with a size that is determined by width and height.
+
+ +

Drawing paths

+ +
+
{{domxref("CanvasRenderingContext2D.fill()")}}
+
Fills the subpaths with the current fill style.
+
{{domxref("CanvasRenderingContext2D.stroke()")}}
+
Strokes the subpaths with the current stroke style.
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}
+
Scrolls the current path or a given path into the view.
+
{{domxref("CanvasRenderingContext2D.clip()")}}
+
Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. For an example, see Clipping paths in the Canvas tutorial.
+
{{domxref("CanvasRenderingContext2D.isPointInPath()")}}
+
Reports whether or not the specified point is contained in the current path.
+
{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}
+
Reports whether or not the specified point is inside the area contained by the stroking of a path.
+
+ +

Transformations

+ +

Objects in the CanvasRenderingContext2D rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.

+ +
+
{{domxref("CanvasRenderingContext2D.currentTransform")}}
+
Current transformation matrix ({{domxref("SVGMatrix")}} object).
+
{{domxref("CanvasRenderingContext2D.rotate()")}}
+
Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.
+
{{domxref("CanvasRenderingContext2D.scale()")}}
+
Adds a scaling transformation to the canvas units by x horizontally and by y vertically.
+
{{domxref("CanvasRenderingContext2D.translate()")}}
+
Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.
+
{{domxref("CanvasRenderingContext2D.transform()")}}
+
Multiplies the current transformation matrix with the matrix described by its arguments.
+
{{domxref("CanvasRenderingContext2D.setTransform()")}}
+
Resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments.
+
{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}
+
Resets the current transform by the identity matrix.
+
+ +

Compositing

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha")}}
+
Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque).
+
{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}
+
With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap.
+
+ +

Drawing images

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage()")}}
+
Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.
+
+ +

Pixel manipulation

+ +

See also the {{domxref("ImageData")}} object.

+ +
+
{{domxref("CanvasRenderingContext2D.createImageData()")}}
+
Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.
+
{{domxref("CanvasRenderingContext2D.getImageData()")}}
+
Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh height.
+
{{domxref("CanvasRenderingContext2D.putImageData()")}}
+
Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.
+
+ +

Image smoothing

+ +
+
{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}
+
Image smoothing mode; if disabled, images will not be smoothed if scaled.
+
+ +

The canvas state

+ +

The CanvasRenderingContext2D rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:

+ +
+
{{domxref("CanvasRenderingContext2D.save()")}}
+
Saves the current drawing style state using a stack so you can revert any change you make to it using restore().
+
{{domxref("CanvasRenderingContext2D.restore()")}}
+
Restores the drawing style state to the last element on the 'state stack' saved by save().
+
{{domxref("CanvasRenderingContext2D.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
+ +

Hit regions

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

Non-standard APIs

+ + + +

Most of these APIs are deprecated and will be removed in the future.

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.clearShadow()
+
Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.
+
{{non-standard_inline}} CanvasRenderingContext2D.drawImageFromRect()
+
This is redundant with an equivalent overload of drawImage.
+
{{non-standard_inline}} CanvasRenderingContext2D.setAlpha()
+
Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setCompositeOperation()
+
Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineWidth()
+
Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineJoin()
+
Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setLineCap()
+
Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setMiterLimit()
+
Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setStrokeColor()
+
Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setFillColor()
+
Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.setShadow()
+
Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDash
+
Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitLineDashOffset
+
Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitImageSmoothingEnabled
+
Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.
+
+ + + +
+
{{non-standard_inline}} CanvasRenderingContext2D.getContextAttributes()
+
Inspired by the same WebGLRenderingContext method it returns an Canvas2DContextAttributes object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (true by default) to indicate that transparency is used in the canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.isContextLost()
+
Inspired by the same WebGLRenderingContext method it returns true if the Canvas context has been lost, or false if not.
+
+ +

WebKit only

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitBackingStorePixelRatio
+
The backing store size in relation to the canvas element. See High DPI Canvas.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitGetImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
{{non-standard_inline}} CanvasRenderingContext2D.webkitPutImageDataHD
+
Intended for HD backing stores, but removed from canvas specifications.
+
+ +
+
+ +

Gecko only

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}
+
CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.
+
+ +

Prefixed APIs

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransform
+
Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozCurrentTransformInverse
+
Sets or gets the current inversed transformation matrix.  {{ gecko_minversion_inline("7.0") }}
+
{{non-standard_inline}} CanvasRenderingContext2D.mozFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
{{non-standard_inline}} CanvasRenderingContext2D.mozImageSmoothingEnabled
+
See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDash
+
An array which specifies the lengths of alternating dashes and gaps {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozDashOffset
+
Specifies where to start a dash array on a line. {{ gecko_minversion_inline("7.0") }}. Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.
+
{{non-standard_inline}} {{deprecated_inline}} CanvasRenderingContext2D.mozTextStyle
+
Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozDrawText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozMeasureText()
+
This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozPathText()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
{{non-standard_inline}} {{obsolete_inline}} CanvasRenderingContext2D.mozTextAlongPath()
+
This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.
+
+ +

Internal APIs (chrome-context only)

+ +
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}
+
Renders a region of a XUL element into the canvas.
+
{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}
+
Renders a region of a window into the canvas. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
+
{{non-standard_inline}} CanvasRenderingContext2D.demote()
+
This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.
+
+ +

Internet Explorer

+ +
+
{{non-standard_inline}} CanvasRenderingContext2D.msFillRule
+
The fill rule to use. This must be one of evenodd or nonzero (default).
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("1")}}{{CompatGeckoDesktop("1.8")}}{{CompatIE("9")}}{{CompatOpera("9")}}{{CompatSafari("2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Compatibility notes

+ + + +

See also

+ + + +
+ + + + + +
diff --git a/files/es/web/api/canvasrenderingcontext2d/linecap/index.html b/files/es/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..e61f3c1465 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,131 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +
{{APIRef}}
+ +

La propiedad CanvasRenderingContext2D.lineCap del API Canvas 2D determina la forma usada para dibujar los puntos finales de las líneas.

+ +
+

Nota: La líneas se puede dibujar con los métodos {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}}, y {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.

+
+ +

Sintaxis

+ +
ctx.lineCap = "butt" || "round" || "square";
+
+ +

Opciones

+ +
+
"butt"
+
Los finales de las líneas son recortados. Valor por defecto.
+
"round"
+
Los finales de las líneas son redondeados.
+
"square"
+
Los finales de líneas son recortados al agregar un cuadrado de ancho y altura igual que el grosor de línea.
+
+ +

Ejemplos

+ +

Cambiando los finales de línea

+ +

En este ejemplo se redondean los puntos finales de una línea recta.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineWidth = 15;
+ctx.lineCap = 'round';
+ctx.lineTo(100, 100);
+ctx.stroke();
+
+ +

Result

+ +

{{ EmbedLiveSample('Changing_the_shape_of_line_caps', 700, 180) }}

+ +

Comparando los finales de línea

+ +

En este ejemplo se dibujan 3 líneas, cada una con un valor distinto de la propiedad lineCap. Se agregaron dos guías para resaltar las diferencias entre las tres líneas. Cada una de estas líneas empiezan y terminan en estas guías.

+ +

La línea de la izquiera usa la opción por defecto "butt". Esta es dibujada completamente al ras de las líneas de guía. La segunda esta configurada para usar la opción "round. Esta agrega un semicírculo al final que tiene un radio de la mitad del grosor de línea. La línea de la derecha use la opción "square". Esta agrega un cuadrado con ancho y altura de la mitad del grosor de línea.

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

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

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de navegador.

+ + + +

{{Compat("api.CanvasRenderingContext2D.lineCap")}}

+ + + + + +

Ver también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/rotate/index.html b/files/es/web/api/canvasrenderingcontext2d/rotate/index.html new file mode 100644 index 0000000000..009b280c4c --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/rotate/index.html @@ -0,0 +1,137 @@ +--- +title: CanvasRenderingContext2D.rotate() +slug: Web/API/CanvasRenderingContext2D/rotate +tags: + - metodo +translation_of: Web/API/CanvasRenderingContext2D/rotate +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.rotate() de la API Canvas 2D añade una rotación a la matriz de transformación.

+ +

Sintaxis

+ +
void ctx.rotate(angulo);
+
+ +

+ +

Parámetros

+ +
+
angulo
+
El ángulo de rotación en radianes, en sentido horario. Se puede usar grado* Math.PI / 180 si se quiere calcular a partir de un valor de grado sexagesimal.
+
+ +

El centro de rotación es siempre el orígen del canvas. Para cambiar el centro de rotación hay que mover el canvas mediante el método {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.

+ +

Ejemplos

+ +

Rotando una figura

+ +

En este ejemplo se rota un rectangulo 45º. Nótese que el centro de rotación es la esquina superior izquierda del canvas y no un punto cualquiera relativo a alguna figura.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// origen del punto de transformación
+ctx.arc(0, 0, 5, 0, 2 * Math.PI);
+ctx.fillStyle = 'blue';
+ctx.fill();
+
+// rectángulo sin rotar
+ctx.fillStyle = 'gray';
+ctx.fillRect(100, 0, 80, 20);
+
+// rectángulo rotado 45º
+ctx.rotate(45 * Math.PI / 180);
+ctx.fillStyle = 'red';
+ctx.fillRect(100, 0, 80, 20);
+
+// se reinicia la matriz de transformación a la matriz identidad
+ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+ +

Resultado

+ +

El centro de rotación es azul. El rectángulo no rotado es gris, y el rectángulo rotado es rojo.

+ +

{{ EmbedLiveSample('Rotating_a_shape', 700, 180) }}

+ +

Rotando una figura por su centro

+ +

Este ejemplo rota una figura alrededor del punto central de ésta. Para realizarlo se aplican estos pasos a la matriz de transformación:

+ +
    +
  1. Primero, {{domxref("CanvasRenderingContext2D.translate()", "translate()")}} mueve el orígen de la matriz hacia el centro de la figura.
    2. +
  2. rotate() rota la matriz la cantidad deseada.
    3. +
  3. Finalmente, translate() mueve el origen de la matriz de nuevo a su punto inicial. Esto se realiza utilizando los valores del centro de coordenadas de la figura en dirección negativa.
    4. +
+ +

HTML

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

JavaScript

+ +

La figura es un rectángulo con su esquina en (80, 60), un ancho de 140 y un alto de 30. El centro de la coordenada horizontal está en  (80 + 140 / 2) = 150. Su centro en la coordenada vertical será  (60 + 30 / 2) = 75. Por tanto, el punto central está en (150, 75).

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// rectángulo sin rotar
+ctx.fillStyle = 'gray';
+ctx.fillRect(80, 60, 140, 30);
+
+// Matriz de transformación
+ctx.translate(150, 75);
+ctx.rotate(Math.PI / 2);
+ctx.translate(-150, -75);
+
+// rectángulo rotado
+ctx.fillStyle = 'red';
+ctx.fillRect(80, 60, 140, 30);
+
+ +

Resultado

+ +

El rectángulo no rotado es gris, y el rectángulo rotado es rojo.

+ +

{{ EmbedLiveSample('Rotating_a_shape_around_its_center', 700, 180) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con exploradores

+ + + +

{{Compat("api.CanvasRenderingContext2D.rotate")}}

+ +

Véase también

+ + diff --git a/files/es/web/api/canvasrenderingcontext2d/save/index.html b/files/es/web/api/canvasrenderingcontext2d/save/index.html new file mode 100644 index 0000000000..6351bb3ad1 --- /dev/null +++ b/files/es/web/api/canvasrenderingcontext2d/save/index.html @@ -0,0 +1,91 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Referencia + - metodo +translation_of: Web/API/CanvasRenderingContext2D/save +--- +
{{APIRef}}
+ +

El método CanvasRenderingContext2D.save() del API Canvas 2D guarda el estado completo del canvas añadiendo el estado actual a una pila.

+ +

El estado del dibujo

+ +

El estado del dibujo que se almacena en una pila consiste en los siguientes elementos:

+ + + +

Sintaxis

+ +
void ctx.save();
+ +

Ejemplos

+ +

Guardando el estado del dibujo

+ +

Este ejemplo usa el método save() para guardar el estado por defecto y el método restore() para restaurarlo luego, de tal manera que luego se puede dibujar el segundo rectángulo con el estado por defecto.

+ +

HTML

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

JavaScript

+ +
const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+// Guardar el estado por defecto
+ctx.save();
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+// Restaurar el estado por defecto
+ctx.restore();
+
+ctx.fillRect(150, 40, 100, 100);
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad con exploradores

+ + + +

{{Compat("api.CanvasRenderingContext2D.save")}}

+ +

Véase también

+ + diff --git a/files/es/web/api/childnode/after/index.html b/files/es/web/api/childnode/after/index.html new file mode 100644 index 0000000000..b6512e73c0 --- /dev/null +++ b/files/es/web/api/childnode/after/index.html @@ -0,0 +1,181 @@ +--- +title: ChildNode.after() +slug: Web/API/ChildNode/after +tags: + - API + - DOM + - Experimental + - Nodo + - Referencia + - metodo +translation_of: Web/API/ChildNode/after +--- +

{{APIRef("DOM")}} {{SeeCompatTable}}
+ El método ChildNode.after() inserta un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} en la lista de hijos de este ChildNode del padre, justo después de este ChildNode. Los objetos {{domxref("DOMString")}} se insertan como nodos equivalentes {{domxref("Text")}}.

+ +

Sintaxis

+ +
[Throws, Unscopable]
+void ChildNode.after((Node o DOMString)... nodes);
+
+ +

Parámetros

+ +
+
nodes
+
Un conjunto de objetos {{domxref("Node")}} o {{domxref("DOMString")}} para insertar.
+
+ +

Excepciones

+ + + +

Ejemplos

+ +

Insertando un elemento

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span);
+
+console.log(parent.outerHTML);
+// "<div><p></p><span></span></div>"
+
+ +

Insertando texto

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.after("Text");
+
+console.log(parent.outerHTML);
+// "<div><p></p>Text</div>"
+ +

Insertando un elemento y texto

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.after(span, "Text");
+
+console.log(parent.outerHTML);
+// "<div><p></p><span></span>Text</div>"
+ +

ChildNode.after() es unscopable

+ +

El método after() no está incluido en la declaración with.Consulte {{jsxref("Symbol.unscopables")}} para obtener más información.

+ +
with(node) {
+  after("foo");
+}
+// ReferenceError: after is not defined
+ +

Polyfill

+ +

Puedes usar un polyfill del método after() en Internet Explorer 9 y superiores con el siguente código:

+ +
// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('after')) {
+      return;
+    }
+    Object.defineProperty(item, 'after', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function after() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.parentNode.insertBefore(docFrag, this.nextSibling);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+ +

Otro polyfill

+ +
// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js
+
+(function(x){
+ var o=x.prototype,p='after';
+ if(!o[p]){
+    o[p]=function(){
+     var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document;
+     if(p!==null){
+        while(i<l){
+         e=m[i];
+         if(e instanceof n){
+            t=t.nextSibling;
+            if(t!==null){
+                p.insertBefore(e,t);
+            }else{
+                p.appendChild(e);
+            };
+         }else{
+            p.appendChild(d.createTextNode(s(e)));
+         };
+         ++i;
+        };
+     };
+    };
+ };
+})(Element);
+
+
+
+/*
+minified:
+
+(function(x){
+ var o=x.prototype;
+ o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}});
+}(Element));
+*/
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.ChildNode.after")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/childnode/before/index.html b/files/es/web/api/childnode/before/index.html new file mode 100644 index 0000000000..b7ac4e3835 --- /dev/null +++ b/files/es/web/api/childnode/before/index.html @@ -0,0 +1,175 @@ +--- +title: ChildNode.before() +slug: Web/API/ChildNode/before +tags: + - API + - DOM + - Experimental + - Nodo + - Referencia + - metodo +translation_of: Web/API/ChildNode/before +--- +

+ +
+
 
+
+ +
+
 
+
+ +
+
{{APIRef ( "DOM")}} {{SeeCompatTable}}
+
+El método ChildNode.before inserta un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} en la lista de hijos de este ChildNode del padre, justo antes de este ChildNode. Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.
+
+ +

Síntasix

+ +
[Throws, Unscopable]
+void ChildNode.before((Node or DOMString)... nodes);
+
+ +

Parámetros

+ +
+
nodos
+
Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para insertar.
+
+ +

Excepciones

+ + + +

Ejemplos

+ +

Insertando un elemento

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span);
+
+console.log(parent.outerHTML);
+// "<div><span></span><p></p></div>"
+
+ +

Insertando texto

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+
+child.before("Text");
+
+console.log(parent.outerHTML);
+// "<div>Text<p></p></div>"
+ +

Insertando un elemento y texto

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.before(span, "Text");
+
+console.log(parent.outerHTML);
+// "<div><span></span>Text<p></p></div>"
+ +

ChildNode.before() es unscopable

+ +

El método before () no está definido en la declaración with. Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.

+ +
with(node) {
+  before("foo");
+}
+// ReferenceError: before is not defined
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte  Básico{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/childnode/index.html b/files/es/web/api/childnode/index.html new file mode 100644 index 0000000000..f354d73bd1 --- /dev/null +++ b/files/es/web/api/childnode/index.html @@ -0,0 +1,180 @@ +--- +title: ChildNode +slug: Web/API/ChildNode +tags: + - API + - DOM + - Experimental + - Interface + - NeedsTranslation + - Node + - TopicStub +translation_of: Web/API/ChildNode +--- +
{{APIRef("DOM")}}
+ +

The ChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent.

+ +

ChildNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("DocumentType")}}, and {{domxref("CharacterData")}} objects.

+ +

Properties

+ +

There are neither inherited, nor specific properties.

+ +

Methods

+ +

There are no inherited methods.

+ +
+
{{domxref("ChildNode.remove()")}} {{experimental_inline}}
+
Removes this ChildNode from the children list of its parent.
+
{{domxref("ChildNode.before()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just before this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ChildNode.after()")}} {{experimental_inline}}
+
Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this ChildNode's parent, just after this ChildNode. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}
+
Replaces this ChildNode in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}{{Spec2('DOM WHATWG')}}Split the ElementTraversal interface in {{domxref("ParentNode")}} and ChildNode. previousElementSibling and nextElementSibling are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the remove(), before(), after() and replaceWith() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Polyfill

+ +

External on github: childNode.js

+ +

Browser compatibility

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}}){{CompatChrome(1.0)}}{{CompatGeckoDesktop(23)}}9.010.04.0
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatChrome(23.0)}}{{CompatGeckoDesktop(23)}}{{CompatNo}}16.0{{CompatNo}}
remove(){{experimental_inline}}{{CompatChrome(29.0)}}{{CompatGeckoDesktop(23)}}Edge16.0{{CompatNo}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatOpera(39)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support (on {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Support on {{domxref("DocumentType")}} and {{domxref("CharacterData")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
remove(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(23)}}{{CompatNo}}16.0{{CompatNo}}{{CompatVersionUnknown}}
before(), after(), and replaceWith() {{experimental_inline}}{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatOperaMobile(39)}}{{CompatNo}}{{CompatChrome(54.0)}}
+
+ +

See also

+ + diff --git a/files/es/web/api/childnode/remove/index.html b/files/es/web/api/childnode/remove/index.html new file mode 100644 index 0000000000..90aab3d869 --- /dev/null +++ b/files/es/web/api/childnode/remove/index.html @@ -0,0 +1,94 @@ +--- +title: ChildNode.remove() +slug: Web/API/ChildNode/remove +tags: + - API + - ChildNode + - DOM + - Experimental + - metodo +translation_of: Web/API/ChildNode/remove +--- +

{{APIRef ( "DOM")}}
+ El método ChildNode.remove ( ) elimina el objeto del árbol al que pertenece.

+ +

Sintaxis

+ +
node.remove();
+
+ +

Ejemplo

+ +

Utilizando remove()

+ +
<div id="div-01">Este es el div-01</div>
+<div id="div-02">Este es el div-02</div>
+<div id="div-03">Este es el div-03</div>
+
+ +
var el = document.getElementById('div-02');
+el.nextElementSibling.remove(); // Elimina el div con el id 'div-03'
+
+ +

ChildNode.remove() es unscopable

+ +

El método remove() no está definido en el contexto de las declaración with. Consulte {{jsxref ("Symbol.unscopables")}} para obtener más información.

+ +
with(node) {
+  remove();
+}
+// ReferenceError: remove is not defined
+ +

Polyfill

+ +

El código a continuación es un polyfill del método remove() para Internet Explorer 9 y superiores:

+ +
// from:https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('remove')) {
+      return;
+    }
+    Object.defineProperty(item, 'remove', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function remove() {
+        if (this.parentNode !== null)
+          this.parentNode.removeChild(this);
+      }
+    });
+  });
+})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Definición inicial.
+ +

Compatibilidad en los navegadores

+ +
+

{{Compat("api.ChildNode.remove")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/childnode/replacewith/index.html b/files/es/web/api/childnode/replacewith/index.html new file mode 100644 index 0000000000..32f78b7e4e --- /dev/null +++ b/files/es/web/api/childnode/replacewith/index.html @@ -0,0 +1,141 @@ +--- +title: ChildNode.replaceWith() +slug: Web/API/ChildNode/replaceWith +tags: + - API + - DOM + - Experimental + - Nodo + - Referencia + - metodo +translation_of: Web/API/ChildNode/replaceWith +--- +

{{APIRef ( "DOM")}} {{SeeCompatTable}}
+
+ El método ChildNode.replaceWith () reemplaza este ChildNode en la lista de hijos de su padre con un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}}. Los objetos {{domxref ( "DOMString")}} se insertan como nodos equivalentes {{domxref ( "Text")}}.

+ +

 

+ +

Síntasix

+ +

 

+ +
[Throws, Unscopable]
+void ChildNode.replaceWith((Node or DOMString)... nodes);
+
+ +

Parámetros

+ +
+
nodos
+
Un conjunto de objetos {{domxref ( "Node")}} o {{domxref ( "DOMString")}} para reemplazar.
+
+ +

Excepciones

+ + + +

Ejemplos

+ +

Utilizando replaceWith()

+ +
var parent = document.createElement("div");
+var child = document.createElement("p");
+parent.appendChild(child);
+var span = document.createElement("span");
+
+child.replaceWith(span);
+
+console.log(parent.outerHTML);
+// "<div><span></span></div>"
+
+ +

ChildNode.replaceWith() es unscopable

+ +

El método replaceWith () no está incluido en la declaracion with. Consulte {{jsxref ( "Symbol.unscopables")}} para obtener más información.

+ +
with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}{{Spec2('DOM WHATWG')}}Definición Inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Mobile
Soporte Básico{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOperaMobile(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

Ver También

+ + diff --git a/files/es/web/api/clipboardevent/clipboarddata/index.html b/files/es/web/api/clipboardevent/clipboarddata/index.html new file mode 100644 index 0000000000..547b2d1f9e --- /dev/null +++ b/files/es/web/api/clipboardevent/clipboarddata/index.html @@ -0,0 +1,58 @@ +--- +title: ClipboardEvent.clipboardData +slug: Web/API/ClipboardEvent/clipboardData +tags: + - API + - Clipboard API + - Experimental + - Portapapeles + - Solo lectura + - metodo +translation_of: Web/API/ClipboardEvent/clipboardData +--- +

{{ apiref("Clipboard API") }} {{SeeCompatTable}}

+ +

La propiedad ClipboardEvent.clipboardData, del tipo {{domxref("DataTransfer")}}, puede ser usuada:

+ + + +

Para más información, mira la documentación de los eventos {{event("cut")}}, {{event("copy")}}, y {{event("paste")}}.

+ +

Sintaxis

+ +
data = ClipboardEvent.clipboardData
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Clipboard API', '#widl-ClipboardEvent-clipboardData', 'ClipboardEvent.clipboardData') }}{{ Spec2('Clipboard API') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/clipboardevent/index.html b/files/es/web/api/clipboardevent/index.html new file mode 100644 index 0000000000..332846c031 --- /dev/null +++ b/files/es/web/api/clipboardevent/index.html @@ -0,0 +1,67 @@ +--- +title: ClipboardEvent +slug: Web/API/ClipboardEvent +tags: + - API + - Clipboard API + - Event + - Experimental + - Interface + - NeedsTranslation + - TopicStub +translation_of: Web/API/ClipboardEvent +--- +

{{APIRef("Clipboard API")}} {{SeeCompatTable}}

+ +

The ClipboardEvent interface represents events providing information related to modification of the clipboard, that is {{event("cut")}}, {{event("copy")}}, and {{event("paste")}} events.

+ +

Constructor

+ +
+
{{domxref("ClipboardEvent.ClipboardEvent", "ClipboardEvent()")}}
+
Creates a ClipboardEvent event with the given parameters.
+
+ +

Properties

+ +

Also inherits properties from its parent {{domxref("Event")}}.

+ +
+
{{domxref("ClipboardEvent.clipboardData")}} {{readonlyInline}}
+
Is a {{domxref("DataTransfer")}} object containing the data affected by the user-initiated {{event("cut")}}, {{event("copy")}}, or {{event("paste")}} operation, along with its MIME type.
+
+ +

Methods

+ +

No specific methods; inherits methods from its parent {{domxref("Event")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Clipboard API', '#clipboard-event-interfaces', 'ClipboardEvent') }}{{ Spec2('Clipboard API') }}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/closeevent/index.html b/files/es/web/api/closeevent/index.html new file mode 100644 index 0000000000..f92dd84d16 --- /dev/null +++ b/files/es/web/api/closeevent/index.html @@ -0,0 +1,237 @@ +--- +title: CloseEvent +slug: Web/API/CloseEvent +translation_of: Web/API/CloseEvent +--- +

{{APIRef("Websockets API")}}

+ +

Un CloseEvent se envia a los clientes usando {{Glossary("WebSockets")}} cuando la conexión esta cerrada. Esto se entrega al que escucha indicado por el atributo onclose del objeto WebSocket.

+ +

Constructor

+ +
+
{{domxref("CloseEvent.CloseEvent", "CloseEvent()")}}
+
Crear un nuevo CloseEvent.
+
+ +

Propiedades

+ +

Esta interface tambien hereda propiedades de su padre, {{domxref("Event")}}.

+ +
+
{{domxref("CloseEvent.code")}} {{readOnlyInline}}
+
Devuelve un unsigned short que contienen el código de cierre enviado por el servidor. Los siguientes valores son los codigos de estado permitidos. Las siguientes definiciones vienen del sitio web de IANA [Ref]. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Status codeNameDescription
0–999Reserved and not used.
1000Cierre NormalCierre normal; La conexion se completo con exito cualquiera sea el proposito para el cual fue creado.
1001Going AwayEl punto final se fue(desaparecio), ya sea por una falla en el servidor o por que el navegador esta navegando fuera de la página que abrio la conexión.
1002Error de ProtocoloEl punto final esta terminando la conexion debido a un error en el protocolo. 
1003Datos no soportadorsLa conexión esta siendo terminada  por que el punto final recibio daros de un tipo que acepta o soportar (por ejemplo, está esperando un solo texto y el punto final recibio datos binarios).
1004Reservado. Un signinficado se podria definir en un futuro.
1005Estado no recibido. Reservado.  Indica que no se proporciono ningún código de estado aunque se esperaba uno.
1006Cierre anormalReservado. Se usa para indicar que una conexion fue cerrada de forma anormal (es decir, sin que se envie un frame cerrado with no close frame being sent) when a status code is expected.
1007Invalid frame payload dataThe endpoint is terminating the connection because a message was received that contained inconsistent data (e.g., non-UTF-8 data within a text message).
1008Violación de politicaThe endpoint is terminating the connection because it received a message that violates its policy. This is a generic status code, used when codes 1003 and 1009 are not suitable.
1009Mensaje muy grandeThe endpoint is terminating the connection because a data frame was received that is too large.
1010Extensión faltante.The client is terminating the connection because it expected the server to negotiate one or more extension, but the server didn't.
1011Error internoThe server is terminating the connection because it encountered an unexpected condition that prevented it from fulfilling the request.
1012Reinicio de servicioEl servidor esta terminado la conexion porque esta reiniciando. [Ref]
1013Trate mas tarde nuevamenteThe server is terminating the connection due to a temporary condition, e.g. it is overloaded and is casting off some of its clients. [Ref]
1014Bad GatewayThe server was acting as a gateway or proxy and received an invalid response from the upstream server. This is similar to 502 HTTP Status Code.
1015TLS SaludoReserved. Indicates that the connection was closed due to a failure to perform a TLS handshake (e.g., the server certificate can't be verified).
1016–1999Reservado para futuro uso del estandar WebSocket.
2000–2999Reservado para uso de extensiones WebSocket .
3000–3999Available for use by libraries and frameworks. May not be used by applications. Available for registration at the IANA via first-come, first-serve.
4000–4999Disponible para uso de aplicaciones.
+
+
{{domxref("CloseEvent.reason")}} {{readOnlyInline}}
+
Retorna un {{domxref("DOMString")}} indicando la razon por que el servidor cerro la conexión. Esto es especifico para el servidor  y sub-protocolo en particular. 
+
{{domxref("CloseEvent.wasClean")}} {{readOnlyInline}}
+
Retorna un {{jsxref("Boolean")}} que indica si o no la conexion fue cerrada limpiamente.
+
+ +

Metodos

+ +

Esta interface tambien hereda metodos de su padre, {{domxref("Event")}}.

+ +
+
{{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}}
+
Inicializa el valor de un CloseEvent creado. Si el evento ya ha sido enviado, este método no funciona. No use más este método, use el {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} constructor en su lugar.
+
+ +

Compatibilidad entre Navegadores 

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("8.0")}}[1]
+ {{CompatGeckoDesktop("12.0")}}[2]		10{{CompatUnknown}}{{CompatUnknown}}
initCloseEvent() {{Non-standard_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("8.0")}}
+ {{CompatNo}} 41.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
initCloseEvent() {{Non-standard_inline}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("8.0")}}
+ {{CompatNo}} 41.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Prior to Gecko 8.0 {{geckoRelease("8.0")}}, Gecko sent the WebSocket {{event("close")}} event to the listener as a simple event. Support for CloseEvent was implemented in Gecko 8.0.

+ +

[2] Prior to Gecko 12.0 {{geckoRelease("12.0")}}, Gecko reported the close code CLOSE_NORMAL when the channel was closed due to an unexpected error, or if it was closed due to an error condition that the specification doesn't cover. Now CLOSE_GOING_AWAY is reported instead.

+ +

Ver tambien

+ + diff --git a/files/es/web/api/comment/index.html b/files/es/web/api/comment/index.html new file mode 100644 index 0000000000..b1c6a89de9 --- /dev/null +++ b/files/es/web/api/comment/index.html @@ -0,0 +1,75 @@ +--- +title: Comment +slug: Web/API/Comment +tags: + - API + - DOM + - Referências + - comentários +translation_of: Web/API/Comment +--- +
{{ ApiRef("DOM") }}
+ +

La interfaz Comment representa las anotaciones y comentarios dentro del código fuente; aunque generalmente no se muestran visualmente en el navegador, dichos comentarios están disponibles para ser leídos en la vista de código.
+ Los comentarios se representan en HTML y XML como contenido entre '<!--' y '-->'. En XML, la secuencia de caracteres '--' no se puede usar dentro de un comentario.

+ +

{{InheritanceDiagram}}

+ +

Propiedades

+ +

Esta interfaz no tiene ninguna propiedad específica, pero hereda las de su padre,{{domxref("CharacterData")}}, e indirectamente los de {{domxref("Node")}}.

+ +

Constructor

+ +
+
{{ domxref("Comment.Comment()", "Comment()") }} {{experimental_inline}}
+
Devuelve un objeto Comment con el contenido del comentario como parámetro.
+
+ +

Métodos

+ +

Esta interfaz no tiene ninguna propiedad específica, pero hereda las de su padre,{{domxref("CharacterData")}}, e indirectamente los de {{domxref("Node")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#comment', 'Comment')}}{{Spec2('DOM WHATWG')}}Agregado el constructor.
{{SpecName('DOM3 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM3 Core')}}Sin cambios de {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM2 Core')}}Sin cambios de {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-1728279322', 'Comment')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ + + +

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

+ +

Lea también

+ + diff --git a/files/es/web/api/console/assert/index.html b/files/es/web/api/console/assert/index.html new file mode 100644 index 0000000000..b57d21a2aa --- /dev/null +++ b/files/es/web/api/console/assert/index.html @@ -0,0 +1,140 @@ +--- +title: Console.assert() +slug: Web/API/console/assert +tags: + - API + - Consola + - DOM + - Debug + - Debugging + - Gecko DOM Referencia + - Métodos + - afirmación + - consola web +translation_of: Web/API/console/assert +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Aparece un mensaje de error en la consola si la afirmación es falsa. Si la afirmación es verdadera, no aparecerá nada.

+ +

{{AvailableInWorkers}}

+ +
+

Nota: El método console.assert() se implementa de diferente manera en Node.js que el mismo método disponible en los navegadores.

+ +

En los navegadores, llamando console.assert() con una falsa afirmación hará que el message se imprima por consola sin interrumpir la ejecución del código posterior. En Node.js, sin embargo, una falsa afirmación lanzará un AssertionError.

+
+ +

Sintaxis

+ +
console.assert(afirmación, obj1 [, obj2, ..., objN]);
+console.assert(afirmación, msg [, subst1, ..., substN]);
+
+ +

Parámetros

+ +
+
afirmación
+
Cualquier expresión booleana.Si la afirmación es falsa, el mensaje aparecerá en consola.
+
obj1 ... objN
+
Salida de una lista de objetos de  JavaScript. Las representaciones de cadena de cada uno de estos objetos se añaden juntos en el orden y salida indicados.
+
msg
+
Una cadena de JavaScript que contiene cero o más cadenas de sustitución.
+
subst1 ... substN
+
Objetos de JavaScript con el que reemplaza las cadenas dentro de msg. Esto te da más control sobre el formato de salida.
+
+ +

Para más detalles ver Salida de texto a la consola en la documentación de {{domxref("console")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("Console API", "#consoleassertexpression-object", "console.assert()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterìsticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("28.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en workers{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/console/count/index.html b/files/es/web/api/console/count/index.html new file mode 100644 index 0000000000..c641504034 --- /dev/null +++ b/files/es/web/api/console/count/index.html @@ -0,0 +1,168 @@ +--- +title: Console.count() +slug: Web/API/Console/count +translation_of: Web/API/Console/count +--- +
{{APIRef("Console API")}}
+ +

Registra el número de veces que se llama a count(). Esta función toma como argumento opcional una etiqueta.

+ +

{{AvailableInWorkers}}

+ +

Si la etiqueta es colocada, esta funcion muestra el numeros de veces que count() ha sido utilizada con la misma etiqueta.

+ +

Si la etiqueta es omitida, la funcion registra el numero de veces  que  count() fue llamada en esta línea en particular.

+ +

Por ejemplo, en este código:

+ +
var user = "";
+
+function greet() {
+  console.count();
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count();
+ +

La salida de la consola va a mostrar algo como esto:

+ +
"<no label>: 1"
+"<no label>: 2"
+"<no label>: 3"
+"<no label>: 1"
+
+ +

Note que al final de la linea de la salida: La llamada separada count() en la linea 11 es tratada como un evento independiente.

+ +

Si pasamos la variable user como etiqueta  en la primera llamada a count()  y  la cadena "alice" en la segunda llamada:

+ +
var user = "";
+
+function greet() {
+  console.count(user);
+  return "hi " + user;
+}
+
+user = "bob";
+greet();
+user = "alice";
+greet();
+greet();
+console.count("alice");
+ +

Vamos a ver una salida como esta:

+ +
"bob: 1"
+"alice: 1"
+"alice: 2"
+"alice: 3"
+ +

Ahora tenemos diferentes contadores según el valor de la etiqueta.  Al coincidir la etiqueta "alice" en la línea 11 con el valor de user dos veces, no se considera un evento independiente.

+ +

Sintaxis

+ +
console.count([label]);
+
+ +

Parámetros

+ +
+
label
+
Una cadena. Si se proporciona, la salida de count() indica el número de veces que fue llamada con la etiqueta. Si se omite, la salida de count() indica el número de veces que fue llamada en esa misma línea.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#count", "console.count()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("30.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteriticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("30.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/console/dir/index.html b/files/es/web/api/console/dir/index.html new file mode 100644 index 0000000000..6faa810f7d --- /dev/null +++ b/files/es/web/api/console/dir/index.html @@ -0,0 +1,119 @@ +--- +title: Console.dir() +slug: Web/API/Console/dir +translation_of: Web/API/Console/dir +--- +

{{APIRef("Console API")}}

+ +

El método dir() de {{domxref("Console")}} despliega una lista interactiva de las propiedades del objeto JavaScript especificado. El resultado es presentado como un listado jerárquico con triángulos de despliegue que te dejan ver los contenidos de los objetos hijos.

+ +

Dicho de otra manera, console.dir() es la manera de ver todas las propiedades de un objeto JavaScript específicado por consola, mediante la cual el desarrollador puede facilmente obtener las propiedades del objeto.

+ +

{{AvailableInWorkers}}

+ +

console-dir.png

+ +

Sintaxis

+ +
console.dir(objeto);
+
+ +

Parámetros

+ +
+
objeto
+
Un objeto JavaScript cuyas propiedades deben ser mostradas como resultado.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("Console API", "#consoledirobject", "console.dir()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("8.0")}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/console/dirxml/index.html b/files/es/web/api/console/dirxml/index.html new file mode 100644 index 0000000000..c4d6b529f5 --- /dev/null +++ b/files/es/web/api/console/dirxml/index.html @@ -0,0 +1,103 @@ +--- +title: Console.dirxml() +slug: Web/API/Console/dirxml +tags: + - API + - DOM + - Depuración + - metodo +translation_of: Web/API/Console/dirxml +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Muestra en consola un árbol interactivo de los elementos descendientes del elemento XML/HTML especificado. Si no es posible mostrarlo como un elemento, la vista de objeto se muestra en su lugar. La salida se presenta como una lista jerárquica de nodos expandibles que le permiten ver el contenido de los nodos hijos.

+ +

Sintaxis

+ +
console.dirxml(objeto);
+
+ +

Parámetros

+ +
+
objeto
+
Un objeto JavaScript cuyas propiedades deben ser mostradas.
+
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/console/error/index.html b/files/es/web/api/console/error/index.html new file mode 100644 index 0000000000..41efb36598 --- /dev/null +++ b/files/es/web/api/console/error/index.html @@ -0,0 +1,179 @@ +--- +title: console.error() +slug: Web/API/Console/error +tags: + - API + - DOM + - Depurando + - Desarrollo web + - consola web + - metodo +translation_of: Web/API/Console/error +--- +
{{APIRef("Console API")}}
+ +

Muestra un mensaje de error en la Consola Web.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
console.error(obj1 [, obj2, ..., objN]);
+console.error(msg [, subst1, ..., substN]);
+console.exception(obj1 [, obj2, ..., objN]);
+console.exception(msg [, subst1, ..., substN]);
+
+ +
+

Nota: console.exception() es un alias de console.error(); son funcionalmente identicas.

+
+ +

Parametros

+ +
+
obj1 ... objN
+
+

Una lista de objetos JavaScript para mostrar. Las representaciones en texto de cada uno de los objetos se agregan y muestran juntas (al final una tras otra), en el orden listado.

+
+
msg
+
Un texto (mensaje) conteniendo cero o más sustituciones de cadenas (sustituciones de strings). 
+
subst1 ... substN
+
Objetos JavaScript con la sustitución a reemplazar dentro del texto (msg). Esto brinda control adicional en el formato de salida del texto. 
+
+ +

Vea "Mostrando texto en la consola" en la documentacion de {{domxref("console")}} para mas detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Console API", "#error", "console.error()")}}{{Spec2("Console API")}}Definicion inicial.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Substitucion de cadenas{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
console.exception alias{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Disponible en workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Substitucion de cadenas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
console.exception alias{{CompatNo}}{{CompatVersionUnknown}}{{CompatGeckoMobile("28.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Disponible en workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/console/index.html b/files/es/web/api/console/index.html new file mode 100644 index 0000000000..9c1dd3fcba --- /dev/null +++ b/files/es/web/api/console/index.html @@ -0,0 +1,254 @@ +--- +title: Console +slug: Web/API/Console +tags: + - API + - DOM + - Debugging + - Depuración + - NeedsCompatTable + - NeedsTranslation + - Reference + - TopicStub + - consola web + - web console +translation_of: Web/API/Console +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

El objeto Console provee acceso a la consola de depuración de los navegadores (e.j., la Consola Web en Firefox). Los detalles de como funciona varían de navegador en navegador, pero hay un conjunto de características que de facto son generalmente proporcionadas.

+ +

Console puede ser accedido desde cualquier método global, {{domxref("Window")}} en el ámbito de navegación, {{domxref("WorkerGlobalScope")}}, y sus variantes especificas de worker.

+ +

Esta página documenta los {{anch("Métodos")}} disponibles en el objeto console y da algunos ejemplos de {{anch("uso")}}.

+ +

{{AvailableInWorkers}}

+ +

Métodos

+ +
+
{{domxref("Console.assert()")}}
+
Registra un mensaje y envía una traza de error a la consola si el primer argumento es false.
+
{{domxref("Console.count()")}}
+
Registra el numero de veces que esta línea ha sido llamada con etiqueta dada.
+
{{domxref("Console.debug()")}} 
+
Registra un mensaje con el nivel de"debug". +
Note: A partir de Chromium 58 este método solo aparece en las consolas de navegadores Chromium cuando el nivel "Verbose" está seleccionado.
+
+
{{domxref("Console.dir()")}}
+
Muestra un listado interactivo de las propiedades de un objeto JavaScript específico. Esta lista le permite examinar el contenido de los objetos hijos.
+
{{domxref("Console.dirxml()")}}
+
+

Muestra una representación en forma de árbol de un elemento XML/HTML si es posible o la vista del objeto JavaScript si no es posible.

+
+
{{domxref("Console.error()")}}
+
Muestra un mensaje de error. Se pueden utilizar sustituciones de cadena y argumentos adicionales con este método.
+
{{domxref("Console._exception()")}}
+
Es un alias de error().
+
{{domxref("Console.group()")}}
+
Crea un nuevo grupo, indentando todos los mensajes subsecuentes en un nuevo nivel. Para retroceder un nivel, se utiliza groupEnd().
+
{{domxref("Console.groupCollapsed()")}}
+
Crea un nuevo grupo, indentando todos los mensajes subsecuentes en un nuevo nivel. A diferencia de group(), inicia con la línea de grupo colapsada, requiriendo el uso de un botón de apertura para expandir el grupo. Para retroceder un nivel, se utiliza groupEnd().
+
{{domxref("Console.groupEnd()")}}
+
Finaliza el grupo actual.
+
{{domxref("Console.info()")}}
+
Muestra un mensaje de información en la Consola Web. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.
+
{{domxref("Console.log()")}}
+
Para mensajes generales de registro de información. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.
+
{{domxref("Console.profile()")}}
+
Inicia el registro de un perfil de rendimiento (Firefox performance tool). Se puede especificar un nombre opcional para el perfil.
+
{{domxref("Console.profileEnd()")}}
+
Detiene el perfil. Usted puede revisar el perfil resultante en la herramienta de desempeño del navegador (por ejemplo, la herramienta de rendimiento de Firefox).
+
{{domxref("Console.table()")}}
+
Muestra datos tabulares en forma de una tabla.
+
{{domxref("Console.time()")}}
+
Inicia un temporizador con un nombre específico como parámetro. Hasta 10.000 temporizadores simultáneos pueden ejecutarse en una página determinada.
+
{{domxref("Console.timeEnd()")}}
+
Detiene el temporizador especificado y registra el tiempo transcurrido, en segundos, desde su inicio.
+
{{domxref("Console.timeStamp()")}}
+
Adiciona una marca a las herramientas Timeline o Waterfall del navegador.
+
{{domxref("Console.trace()")}}
+
Muestra una traza de error.
+
{{domxref("Console.warn()")}}
+
Muestra un mensaje de advertencia. Se puede utilizar sustitución de cadena y argumentos adicionales con este método.
+
+ +

Uso

+ +

Enviar texto a la consola

+ +

La característica mas utilizada de la consola es la de mostrar texto y otro datos. Existen cuatro categorías de salida que se pueden generar, utilizando los métodos {{domxref("console.log()")}}, {{domxref("console.info()")}}, {{domxref("console.warn()")}} y {{domxref("console.error()")}}. Cada uno de estos muestran resultados que se lucen diferentes en el registro y se pueden utilizar los controles de filtro proveidos por el navegador para ver únicamente los tipos de salida de interés.

+ +

Hay dos maneras de usar cada uno de los métodos de salida; se puede ingresar una lisa de objetos de cadena (objectos strings) los cuales serán concatenados en una sola cadena, la cual se mostrará en la consola, o se puede ingresar una lista que contenga ninguna o mas sustituciones de cadena seguida por una lista de objetos con los cuales reemplazarlas.

+ +

Mostrando un solo objeto

+ +

La manera mas simple de utilizar los métodos de registro es mostrar un solo objeto:

+ +
var someObject = { str: "Algún texto", id: 5 };
+console.log(someObject);
+
+ +

La salida se vera parecido a esto:

+ +
[09:27:13.475] ({str:"Algún texto", id:5})
+ +

Mostrando múltiples objetos

+ +

También se pueden mostrar múltiples objetos listándolos y luego llamando el método de registro, de esta forma:

+ +
var car = "Dodge Charger";
+var someObject = {str:"Algún texto", id:5};
+console.info("Mi primer carro fue un ", car, ". El objeto es: ", someObject);
+ +

La salida se verá parecido a esto:

+ +
[09:28:22.711] Mi primer carro fue un Dodge Charger . El objeto es:  ({str:"Algún texto", id:5})
+
+ +

Utilizando sustituciones de cadena

+ +

Gecko 9.0 {{geckoRelease("9.0")}} introdujo soporte para sustituciones de cadena. Cuando se ingresa una caden a uno de los objetos de consola que acepta una cadena, es posible utilizar las siguientes sustituciones de cadena:

+ + + + + + + + + + + + + + + + + + + + + + + + +
Sustitución de cadenaDescripción
%oMuestra un hiper vinculo a un objeto JavaScript. Dando click en el link se abre un inspector.
%d or %iMuestra un entero. El formato de presentación aun no esta soportado.
%sMuestra una cadena.
%fMuestra un valor de punto flotante. El formato de presentación aun no esta soportado.
+ +

Cada uno de estos llama al siguiente argumento de un array declarado en los argumentos. Por ejemplo:

+ +
for (var i=0; i<5; i++) {
+  console.log("Hola, %s. Usted me ha llamado %d veces.", "Bob", i+1);
+}
+
+ +

La salida se verá parecido a esto:

+ +
[13:14:13.481] Hola, Bob. Usted me ha llamado me 1 veces.
+[13:14:13.483] Hola, Bob. Usted me ha llamado 2 veces.
+[13:14:13.485] Hola, Bob. Usted me ha llamado 3 veces.
+[13:14:13.487] Hola, Bob. Usted me ha llamado 4 veces.
+[13:14:13.488] Hola, Bob. Usted me ha llamado 5 veces.
+
+ +

Dando estilo a la salida de la consola.

+ +

Puedes usar la directiva "%c" para aplicar un estilo CSS a la salida de la consola:

+ +
console.log("%cMy stylish message", "color: red; font-style: italic");
+ +
+ +
{{h3_gecko_minversion("Usando grupos en la consola", "9.0")}}
+ +

Puedes usar grupos anidades para ayudar a organizar la salida visualmente combinando material relacionado. Para crear un nuevo bloque anidado, se debe usar console.group(). El método console.groupCollapsed() es similar, pero crea el nuevo bloque colapsado, requiriendo el uso de un "botón de mostrar" para abrirlo y leerlo.

+ +
Nota: Grupos colapsados no están soportados en Gecko todavía,  el método groupCollapsed() es el mismo que group() en este momento.
+ +

Para editar el grupo actual, simplemente usa console.groupEnd().

+ +

Por ejemplo con el siguiente código:

+ +
console.log("This is the outer level");
+console.group();
+console.log("Level 2");
+console.group();
+console.log("Level 3");
+console.warn("More of level 3");
+console.groupEnd();
+console.log("Back to level 2");
+console.groupEnd();
+console.debug("Back to the outer level");
+
+ +

La salida se verá así:

+ +

nesting.png

+ +
{{h3_gecko_minversion("Timers", "10.0")}}
+ +

En orden para calcular la duración de una operación específica, Geco 10 introdujo soporte de contadores (timers del inglés) en el objeto console. Para iniciar un contador, usa el método console.time() , pasándole como parámetro un nombre. Para detener un contador, y obtener el tiempo transcurrido en milisegúndos, solo usa el método console.timeEnd(), nuevamente pasándole el nombre del contador como parámetro. Se pueden ejecutar hasta 10000 (diez mil) contadores simultáneamente en una página.

+ +

Por ejemplo, teniendo el siguiente código:

+ +
console.time("answer time");
+alert("Click to continue");
+console.timeEnd("answer time");
+
+ +

Registrará el tiempo necesitado por el usuario para descartar el cuadro de alerta (alert box del inglés):

+ +

timerresult.png

+ +

Tener presente de que los nombres de los contadores son mostrados cuando el contador inicia y cuando es detenido (respectivamente).

+ +
Nota: Es importante saber que si estas usando esto para registrar el tiempo del trafico de red, el contador reportará el tiempo total para la transacción, mientras que el tiempo listado en el panel de conexiones o panel de red (network panel del inglés) es solo la cantidad de tiempo requerida para la cabecera (transaction header). Si en cambio tienes el registro de cuerpo hablitado (response body loggin del inglés), el tiempo listado para la respuesta de la cabecera y el cuerpo combinados debiera coincidir con lo que vez en la salida de la consola. 
+ +

Rastro de pilas (Stack traces)

+ +

El objeto consola tambien soporta la salida de una traza de pila (stack trace del inglés); Esto te mostrará  la ruta de llamadas tomadas hasta alcanzar el punto de tu llamada {{domxref("console.trace()")}}. Dado un código como el siguiente:

+ +
foo();
+
+function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+ +

La salida en la consola se verá como esto:

+ +

+ +

Especificación

+ +

Objeto API Console

+ +

Notas

+ + + +

Ver tambien

+ + + +

Otras implementaciones

+ + diff --git a/files/es/web/api/console/info/index.html b/files/es/web/api/console/info/index.html new file mode 100644 index 0000000000..75fb215b47 --- /dev/null +++ b/files/es/web/api/console/info/index.html @@ -0,0 +1,163 @@ +--- +title: Console.info() +slug: Web/API/Console/info +tags: + - API + - Depuración + - Desarrollo web + - NecesidadNavegadorCompatible + - consola web + - metodo +translation_of: Web/API/Console/info +--- +
{{APIRef("Console API")}}
+ +
Emite un mensaje informativo a la Consola Web. En Firefox y Chrome, se muestra un pequeño ícono "i" junto a estos elementos en el registro de la Consola Web.
+ +

 

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
console.info(obj1 [, obj2, ..., objN]);
+console.info(msg [, subst1, ..., substN]);
+
+ +

Parametros

+ +
+
obj1 ... objN
+
Una lista de objetos JavaScript a la salida. Las representaciones de cadena de cada uno de estos objetos se anexan en el orden y salida.
+
msg
+
Un String en JavaScript contiene cero o mas strings de sustitucion
+
subst1 ... substN
+
Objetos en JavaScript con los que reemplazar cadenas de sustitución dentro del mensaje. Esto le da un control adicional sobre el formato de la salida.
+
+ +

Ver Salida de texto en la consola en la documentacion de  {{domxref("console")}} para detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
Especificacion EstadoComentario
{{SpecName("Console API", "#info", "console.info()")}}{{Spec2("Console API")}}Definicion inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sustitucion de strings{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Icono de informacion{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
Trabajadores Disponibles{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sustitucion de strings{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Trabajadores Disponibles{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vea tambien

+ + diff --git a/files/es/web/api/console/log/index.html b/files/es/web/api/console/log/index.html new file mode 100644 index 0000000000..56e369f395 --- /dev/null +++ b/files/es/web/api/console/log/index.html @@ -0,0 +1,190 @@ +--- +title: Console.log() +slug: Web/API/Console/log +tags: + - API + - Compatibilidad necesaria con navegadores + - Consola + - DOM + - Desarrollo web + - Método(2) + - consola web + - console.dir() + - console.log() + - debuguear + - depurar + - diferencia + - Árbol HTML + - Árbol JSON +translation_of: Web/API/Console/log +--- +
{{APIRef("Console API")}}
+ +
Muestra un mensaje en la consola web (o del intérprete JavaScript).
+ +
 
+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
console.log(obj1 [, obj2, ..., objN]);
+console.log(msg [, subst1, ..., substN]);
+
+ +

Parámetros

+ +
+
obj1 ... objN
+
Una lista de objetos JavaScript para mostrar. Las representaciones en texto de cada uno de los objetos se agregan y muestran juntas (al final una tras otra), en el orden listado.
+
msg
+
Un texto (mensaje) conteniendo cero o más sustituciones de cadenas (sustituciones de strings). 
+
subst1 ... substN
+
Objetos JavaScript con la sustitución a reemplazar dentro del texto (msg). Esto brinda control adicional en el formato de salida del texto. 
+
+ +

Vea "Mostrando texto en la consola" en la documentación de {{domxref("console")}} para mas detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Console API", "#log", "console.log()")}}{{Spec2("Console API")}}Definicion inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
+

Soporte Básico

+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}8{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Substitución de texto{{CompatVersionUnknown}}
+ {{CompatChrome(28)}}[1]		{{CompatUnknown}}{{CompatGeckoDesktop("9.0")}}10[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en trabajadores{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Substitución de texto{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en trabajadores{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Si se le pasa un valor negativo a %d, este será redondeado hacia abajo al entero negativo mas cercano, por ejemplo: -0.1 se convierte en -1.

+ +

[2] %c no esta soportado, %d devolverá 0 cuando no sea un número.

+ +

Diferencia con console.dir()

+ +

Te preguntarás cual es la diferencia entre console.dir() y console.log().

+ +

Una diferencia útil en Chrome es cuando envías elementos DOM a la consola.

+ +

+ +

Importante:

+ + + +

Específicamente, console.log brinda un tratamiento especial a los elementos del DOM, mientras que console.dir no. Esto es útil a menudo cuando intentas ver la representación completa del objeto JavaScript del DOM. 

+ +

Hay mas información en la referencia de la API Console de Chrome acerca de esto y otras funciones.

+ +

Ver también

+ + diff --git a/files/es/web/api/console/tabla/index.html b/files/es/web/api/console/tabla/index.html new file mode 100644 index 0000000000..53f57f5636 --- /dev/null +++ b/files/es/web/api/console/tabla/index.html @@ -0,0 +1,212 @@ +--- +title: Console.table() +slug: Web/API/Console/tabla +tags: + - API + - Consola + - DOM + - Depuración +translation_of: Web/API/Console/table +--- +
{{APIRef("Console API")}}
+ +

Muestra datos tabulares como una tabla.

+ +

Esta función toma un argumento obligatorio: data, que debe ser un array o un objeto, y un parámetro adicional: columns.

+ +

Muestra data como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si data es un objeto) será una fila en la tabla.

+ +

La primera columna de la tabla se identificará como (index). Si data es un array, sus valores serán los índices del array. Si data es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) console.table está limitado a mostrar 1000 filas (la primera columna es la llamada index).

+ +

{{AvailableInWorkers}}

+ +

Colecciones de tipos primitivos

+ +

El argumento data puede ser un array o un objeto.

+ +
// un array de strings
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// un objeto cuyas propiedades son strings
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Colecciones de tipos compuestos

+ +

Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:

+ +
// un array de arrays
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Table displaying array of arrays

+ +
// un array de objetos
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.

+ +

Table displaying array of objects

+ +
// un objeto cuyas propiedades son objetos
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Table displaying object of objects

+ +

Restringiendo las columnas mostradas

+ +

Por defecto, console.table() muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional columns  para seleccionar un subconjunto de columnas que mostrar:

+ +
// an array of objects, logging only firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Table displaying array of objects with filtered output

+ +

Ordenando columnas

+ +

Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.

+ +

Sintaxis

+ +
console.table(data [, columns]);
+
+ +

Parámetros

+ +
+
data
+
La información a mostrar. Puede ser tanto un array como un objeto.
+
columns
+
Un array que contenga los nombres de las columnas a incluir.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/console/time/index.html b/files/es/web/api/console/time/index.html new file mode 100644 index 0000000000..b714b4d20c --- /dev/null +++ b/files/es/web/api/console/time/index.html @@ -0,0 +1,122 @@ +--- +title: Console.time() +slug: Web/API/Console/time +translation_of: Web/API/Console/time +--- +
{{APIRef("Console API")}} +

Inicia un temporizador que puede usar para realizar un seguimiento de la duración de una operación. Le da a cada temporizador un nombre único y puede tener hasta 10.000 temporizadores ejecutándose en una página determinada. Cuando llame a {{domxref ("console.timeEnd()")}} con el mismo nombre, el navegador generará el tiempo, en milisegundos, transcurrido desde que se inició el temporizador.

+ +

Consulte Timers en la documentación de {{domxref("console")}} para obtener detalles y ejemplos.

+
+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
console.time(label);
+
+ +

Parametros

+ +
+
label
+
El nombre para dar el nuevo temporizador. Esto identificará el temporizador; use el mismo nombre cuando llame a {{domxref ("console.timeEnd()")}} para detener el temporizador y obtener el tiempo de salida a la consola.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionStatusComment
{{SpecName("Console API", "#time", "console.time()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilidad con exploradores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}11{{CompatVersionUnknown}}4.0
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/console/timeend/index.html b/files/es/web/api/console/timeend/index.html new file mode 100644 index 0000000000..ad452782ab --- /dev/null +++ b/files/es/web/api/console/timeend/index.html @@ -0,0 +1,57 @@ +--- +title: Console.timeEnd() +slug: Web/API/Console/timeEnd +translation_of: Web/API/Console/timeEnd +--- +
{{APIRef("Console API")}}
+ +

Detiene un temporizador que haya sido establecido previamente con {{domxref("console.time()")}}.

+ +

Consulte la documentación de Timers  para más detalles y ejemplos.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
console.timeEnd(etiqueta);
+
+ +

Parámetros

+ +
+
etiqueta
+
El nombre del temporizador a detener. Al detenerse, el tiempo transcurrido será mostrado automáticamente en la Consola del Navegador.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("Console API", "#timeend", "console.timeEnd()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilidad con Navegadores

+ +
+ + +

{{Compat("api.Console.timeEnd")}}

+
+ +

Relacionados

+ + diff --git a/files/es/web/api/console/trace/index.html b/files/es/web/api/console/trace/index.html new file mode 100644 index 0000000000..7d11170b1e --- /dev/null +++ b/files/es/web/api/console/trace/index.html @@ -0,0 +1,132 @@ +--- +title: Console.trace() +slug: Web/API/Console/trace +translation_of: Web/API/Console/trace +--- +
{{APIRef("Console API")}}{{Non-standard_header}}
+ +

Outputs a stack trace to the Web Console.

+ +

{{AvailableInWorkers}}

+ +

Ver Stack traces en la documentación de {{domxref("console")}} para detalles y ejemplos.

+ +

Sintaxis

+ +
console.trace();
+
+ +

Ejemplo

+ +
function foo() {
+  function bar() {
+    console.trace();
+  }
+  bar();
+}
+
+foo();
+
+ +

La siguiente indicador será mostrado en la consola:

+ +
bar
+foo
+<anonymous>
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Console API", "#consoletraceobject--object-", "console.trace()")}}{{Spec2("Console API")}}Initial definition
+ +

Compatibilidad con el navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}11{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Available in workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver tambien

+ + diff --git a/files/es/web/api/console/warn/index.html b/files/es/web/api/console/warn/index.html new file mode 100644 index 0000000000..d16491e7c0 --- /dev/null +++ b/files/es/web/api/console/warn/index.html @@ -0,0 +1,63 @@ +--- +title: Console.warn() +slug: Web/API/Console/warn +tags: + - Desarrollo web +translation_of: Web/API/Console/warn +--- +
{{APIRef("Console API")}}
+ +

Imprime un mensaje de advertencia en la Consola Web.

+ +

{{AvailableInWorkers}}

+ +

{{Note("En Firefox, las advertencias tienen un pequeño icono de signo de exclamación junto a estas en el registro de la Consola Web.")}}

+ +

Sintaxis

+ +
console.warn(obj1 [, obj2, ..., objN]);
+console.warn(msg [, subst1, ..., substN]);
+
+ +

Parámetros

+ +
+
obj1 ... objN
+
Una lista de objetos JavaScript para ser emitidos en la Consola Web. Las representaciones como string de cada uno de estos objetos son anexados juntos en el orden listado e impresos.
+
msg
+
Un string JavaScript que contiene cero o más strings de sustitución.
+
subst1 ... substN
+
Objetos JavaScript con los cuales se reemplaza los strings de sustitución dentro de msg. Esto le proporciona un control adicional sobre el formato de salida.
+
+ +

Vea Outputting text to the console en la documentación de {{domxref("console")}} para mas detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("Console API", "#warn", "console.warn()")}}{{Spec2("Console API")}}Definición Inicial
+ +

Compatibilidad del Navegador

+ +

{{Compat("api.Console.warn")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/constraint_validation/index.html b/files/es/web/api/constraint_validation/index.html new file mode 100644 index 0000000000..81811b4891 --- /dev/null +++ b/files/es/web/api/constraint_validation/index.html @@ -0,0 +1,154 @@ +--- +title: Constraint validation API +slug: Web/API/Constraint_validation +tags: + - API + - Constraint validation + - Landing + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Constraint_validation +--- +
{{apiref()}}
+ +

The Constraint Validation API enables checking values that users have entered into form controls, before submitting the values to the server.

+ +

Concepts and usage

+ +

Certain HTML form controls, such as {{HTMLElement("input")}}, {{HTMLElement("select")}} and {{HTMLElement("textarea")}}, can restrict the format of allowable values, using attributes like required and pattern to set basic constraints.

+ +

However, you may want to impose more complex constraints, or to provide clearer reporting of validation failures than the defaults. This can be done using the Constraint Validation API.

+ +
+

Note: Client-side constraint validation doesn't remove the need for validation on the server side. Even though client-side validation can prevent many common kinds of invalid values, invalid ones can still be sent by older browsers or by attackers trying to trick your web application. Therefore, you need to also validate input values on the server side, in a way that is consistent with what is done on the client side. Client side validation is a tool for giving quick feedback to the user. You should not rely on it to completely sanitize data received by the server.

+
+ +

Validation of constraints through the constraint validation API is done either on a single form element or at the form level, on the {{ HTMLElement("form") }} element itself.

+ +

Constraint validation interfaces

+ +
+
ValidityState
+
The ValidityState interface represents the validity states that a form control element can have, with respect to its defined constraints. Together, they help explain whether and why an element's value fails to validate.
+
invalid event
+
This event type is fired at a form control element if the element does not satisfy its constraints.
+
+ +

Extensions to other interfaces

+ +

The constraint validation API extends the interfaces for the form-associated elements listed below with a number of new properties and methods (elements that can have a form attribute that indicates their form owner):

+ + + +

Properties

+ +
+
validity
+
A read-only properity that returns a ValidityState object, whose properties represent validation errors for the value of that element.
+
validationMessage
+
A read-only property that returns an empty string if the element is not a candidate for constraint validation, or if the element's value is valid. If the element's value is not valid, it returns a localized validation message. This will be displayed in the UI if the element is the only form control with a validity problem; if a custom error message is set using setCustomValidity(), this will be shown.
+
willValidate
+
A read-only boolean property that returns true if the element is a candidate for constraint validation; and false otherwise. Elements with the HTMLObjectElement interface are never candidates for constraint validation. Others may be barred from constraint validation depending on specific conditions.
+
+ +

Methods

+ +
+
checkValidity()
+
Checks the element's value against its constraints. If the value is invalid, it fires an invalid event at the element and returns false; otherwise it returns true.
+
reportValidity()
+
Checks the element's value against its constraints and also reports the validity status; if the value is invalid, it fires an invalid event at the element, returns false, and then reports the validity status to the user in whatever way the user agent has available. Otherwise, it returns true.
+
setCustomValidity(message)
+
Sets a custom error message string to be shown to the user upon submitting the form, explaining why the value is not valid — when a message is set, the validity state is set to invalid. To clear this state, invoke the function with an empty string passed as its argument. In this case the custom error message is cleared, the element is considered valid, and no message is shown.
+
+ +

Examples

+ +

Take the following form:

+ +
<form>
+  <label for="name">Enter username (upper and lowercase letters): </label>
+  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
+  <button>Submit</button>
+</form>
+ +

The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the pattern.

+ +

If you wanted to instead display custom error messages, you could use JavaScript like the following:

+ +
const nameInput = document.querySelector('input');
+const form = document.querySelector('form');
+
+nameInput.addEventListener('input', () => {
+  nameInput.setCustomValidity('');
+  nameInput.checkValidity();
+});
+
+nameInput.addEventListener('invalid', () => {
+  if(nameInput.value === '') {
+    nameInput.setCustomValidity('Enter your username!');
+  } else {
+    nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');
+  }
+});
+ +

The example renders like so:

+ +

{{EmbedLiveSample('Examples')}}

+ +

In brief:

+ + + +
+

Note: Firefox supported a proprietary error attribute — x-moz-errormessage — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see bug 1513890).

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'constraint validation API') }}{{Spec2('HTML WHATWG')}} 
{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'constraint validation API') }}{{Spec2('HTML5.1')}}No change from the previous snapshot {{SpecName('HTML5 W3C')}}.
{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'constraint validation API') }}{{Spec2('HTML5 W3C')}}First snapshot of  {{SpecName('HTML WHATWG')}} containing this interface.
+ +

See also

+ + diff --git a/files/es/web/api/crypto/index.html b/files/es/web/api/crypto/index.html new file mode 100644 index 0000000000..3eb118b7b7 --- /dev/null +++ b/files/es/web/api/crypto/index.html @@ -0,0 +1,66 @@ +--- +title: Crypto +slug: Web/API/Crypto +tags: + - API + - Interfaz + - Referencia + - Web Crypto API +translation_of: Web/API/Crypto +--- +

{{APIRef("Web Crypto API")}}

+ +

La interfaz Crypto representa las características básicas de criptografía disponibles en el contexto actual. Permite acceder a un generador de números aleatorios criptográficamente fuerte y a primitivos criptográficos.

+ +

Un objeto con esta interfaz está disponible en el contexto de la Web a través de la propiedad {{domxref("Window.crypto")}}.

+ +

Propiedades

+ +

Esta interfaz implementa las propiedades definidas en {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.subtle")}} {{readOnlyInline}}
+
Retorna un {{domxref("SubtleCrypto")}} objeto proporcionando acceso a primitivos criptográficos comunes, como el hashing, el firmado, cifrado o descifrado.
+
+ +

Métodos

+ +

Esta interfaz implementa las propiedades definidas en {{domxref("RandomSource")}}.

+ +
+
{{domxref("Crypto.getRandomValues()")}}
+
Llena el pasado {{ jsxref("TypedArray") }} valores aleatorio sólidos criptográficamente.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Crypto API", "#crypto-interface", "Crypto")}}{{Spec2("Web Crypto API")}}Definición inicial
+ +

Compatibilidad del navegador

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/crypto/subtle/index.html b/files/es/web/api/crypto/subtle/index.html new file mode 100644 index 0000000000..af1106f076 --- /dev/null +++ b/files/es/web/api/crypto/subtle/index.html @@ -0,0 +1,51 @@ +--- +title: Crypto.subtle +slug: Web/API/Crypto/subtle +tags: + - API + - Criptografía + - Propiedad + - Referencia + - Sólo-Lectura + - Web Crypto API +translation_of: Web/API/Crypto/subtle +--- +

{{APIRef("Web Crypto API")}}

+ +

La propiedad de sólo lectura Crypto.subtle retorna un objeto {{domxref("SubtleCrypto")}} permitiendo realizar operaciones criptográficas.

+ +

Sintaxis

+ +
var crypto = crypto.subtle;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Web Crypto API', '#dfn-Crypto', 'Crypto.subtle') }}{{ Spec2('Web Crypto API') }}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.Crypto.subtle")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/css_object_model/index.html b/files/es/web/api/css_object_model/index.html new file mode 100644 index 0000000000..3665c750cd --- /dev/null +++ b/files/es/web/api/css_object_model/index.html @@ -0,0 +1,129 @@ +--- +title: CSS Object Model +slug: Web/API/CSS_Object_Model +tags: + - API + - CSSOM + - Referencia +translation_of: Web/API/CSS_Object_Model +--- +

{{DefaultAPISidebar('CSSOM')}}

+ +

El Modelo de objetos CSS (CSS Object Model) es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.

+ +

Referencia

+ +
+ +
+ +

Algunas otras interfaces también son complementadas por las especificaciones relacionadas con CSSOM: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, y {{domxref("SVGElement")}}.

+ +

Tutoriales

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EpecificacionEstadoComentario
{{SpecName("CSSOM")}}{{Spec2("CSSOM")}} 
{{SpecName("CSSOM View")}}{{Spec2("CSSOM View")}} 
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}} 
{{SpecName("CSS3 Fonts")}}{{Spec2("CSS3 Fonts")}} 
{{SpecName("CSS3 Animations")}}{{Spec2("CSS3 Animations")}} 
{{SpecName("CSS3 Transitions")}}{{Spec2("CSS3 Transitions")}} 
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}} 
{{SpecName("CSS3 Conditional")}}{{Spec2("CSS3 Conditional")}} 
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}} 
{{SpecName("CSS3 Counter Styles")}}{{Spec2("CSS3 Counter Styles")}} 
+ +

Notas de compatibilidad con los navegadores

+ +

Todas estas funcionalidades han sido añadidas a los navegadores poco a poco durante los años: Es un complejo proceso que no puede ser resumido en una simple tabla. Por favor busca la disponibilidad en navegadores en las interfaces específicas.

diff --git a/files/es/web/api/cssrule/csstext/index.html b/files/es/web/api/cssrule/csstext/index.html new file mode 100644 index 0000000000..4dd97fff2c --- /dev/null +++ b/files/es/web/api/cssrule/csstext/index.html @@ -0,0 +1,22 @@ +--- +title: CssRule.cssText +slug: Web/API/CSSRule/cssText +translation_of: Web/API/CSSRule/cssText +--- +
+ {{APIRef}}
+
+  
+

Summary

+

cssText returns the current text style rule.

+

Syntax

+
string = cssRule.cssText
+
+

Instance

+
if (myRule.cssText.indexOf ("background-color")! = -1) {
+   bgRule = MyRule;
+}
+...
+
+

Specification

+

DOM Level 2 Style - cssRule

diff --git a/files/es/web/api/cssrule/index.html b/files/es/web/api/cssrule/index.html new file mode 100644 index 0000000000..bd8837d217 --- /dev/null +++ b/files/es/web/api/cssrule/index.html @@ -0,0 +1,95 @@ +--- +title: CssRule +slug: Web/API/CSSRule +translation_of: Web/API/CSSRule +--- +

{{ ApiRef("CSSOM") }}

+ +

El objeto CSSRule representa una única regla de estilo CSS. Puede ser parte de una lista cssRules de hojas de estilo (stylesheet).

+ +

Existen varias clases de reglas y todas ellas comparten unas cuantas propiedades comunes en el interface {{ Anch("CSSRule") }} y la mayor parte de ellas son propiedades específicas de un tipo particular de reglas.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipointerface específico de la reglaDescripción
CSSRule.STYLE_RULE{{ Anch("CSSStyleRule") }} 
CSSRule.MEDIA_RULE{{ Anch("CSSMediaRule") }} 
CSSRule.FONT_FACE_RULE{{ Anch("CSSFontFaceRule") }} 
CSSRule.PAGE_RULE{{ Anch("CSSPageRule") }} 
CSSRule.IMPORT_RULE{{ Anch("CSSImportRule") }} 
CSSRule.CHARSET_RULE{{ Anch("CSSCharsetRule") }} 
CSSRule.UNKNOWN_RULE{{ Anch("CSSUnknownRule") }} 
+ +

CSSRule

+ +
+
cssText
+
Devuelve la representación en forma de texto, de la regla. Ejem.: "h1,h2 { font-size: 16pt }".
+
parentRule
+
Devuelve la regla contenedora, si existe. Ejem.: una regla de estilo dentro de un bloque @media.
+
parentStyleSheet
+
Devuelve el objeto stylesheet del que esta regla es parte.
+
type
+
El tipo de regla. ejem.: CSSRule.CHARSET_RULE o CSSRule.IMPORT_RULE.
+
+ +

CSSStyleRule

+ +
+
selectorText
+
Recoje/Establece la representación en forma de texto, del selector de la regle. Ejem.: "h1,h2".
+
style
+
Devuelve el objeto CSSStyleDeclaration para el bloque declaration block de la regla.
+
+ +

CSSStyleRule

+ +

CSSMediaRule

+ +

CSSFontFaceRule

+ +

CSSPageRule

+ +

CSSImportRule

+ +

CSSCharsetRule

+ +

CSSUnknownRule

+ +

Specification

+ +

DOM Level 2 CSS: CSSRule

diff --git a/files/es/web/api/cssrule/parentstylesheet/index.html b/files/es/web/api/cssrule/parentstylesheet/index.html new file mode 100644 index 0000000000..f66c603137 --- /dev/null +++ b/files/es/web/api/cssrule/parentstylesheet/index.html @@ -0,0 +1,27 @@ +--- +title: cssRule.parentStyleSheet +slug: Web/API/CSSRule/parentStyleSheet +translation_of: Web/API/CSSRule/parentStyleSheet +--- +
+ {{APIRef}}
+
+  
+

Summary

+

parentStyleSheet returns the object type of style sheet, in which the rule is defined.

+

Syntax

+
stylesheet = cssRule.parentStyleSheet
+
+

Parameters

+ +

Instance

+
if (bgRule.parentStyleSheet! = MySheet) {
+   // Style alien rule!
+}
+
+

Letters

+

See Gecko DOM Reference: event # DOM_styleSheet_Object for more information about the interface type objects stylesheet.

+

Specification

+

DOM Level 2 Style - cssRule

diff --git a/files/es/web/api/cssstyledeclaration/index.html b/files/es/web/api/cssstyledeclaration/index.html new file mode 100644 index 0000000000..f63d7a2cfd --- /dev/null +++ b/files/es/web/api/cssstyledeclaration/index.html @@ -0,0 +1,73 @@ +--- +title: CSSStyleDeclaration +slug: Web/API/CSSStyleDeclaration +tags: + - Interfaz + - Referencia +translation_of: Web/API/CSSStyleDeclaration +--- +

{{ APIRef("CSSOM") }}

+ +

Resúmen

+ +

CSSStyleDeclaration representa una colección CSS de pares propiedad-valor. Se utiliza en unas cuantas APIs:

+ + + +

Atributos

+ +
+
{{domxref("CSSStyleDeclaration.cssText")}}
+
Representación textual del bloque de declaración. Estableciendo este atributo cambia el estilo.
+
{{domxref("CSSStyleDeclaration.length")}}
+
El número de propiedades. Ver el método del elemento inferior.
+
{{domxref("CSSStyleDeclaration.parentRule")}}
+
El contenedor {{domxref("CssRule")}}.
+
+ +

Métodos

+ +
+
{{domxref("CSSStyleDeclaration.getPropertyPriority()")}}
+
Retorna la prioridad opcional, "important". Ejemplo: priString= styleObj.getPropertyPriority('color')
+
{{domxref("CSSStyleDeclaration.getPropertyValue()")}}
+
Retorna el valor de la propiedad. Ejemplo: valString= styleObj.getPropertyValue('color')
+
{{domxref("CSSStyleDeclaration.item()")}}
+
Retorna un nombre de propiedad. Ejemplo: nameString= styleObj.item(0) Alternative: nameString= styleObj[0]
+
{{domxref("CSSStyleDeclaration.removeProperty()")}}
+
Retorna el valor borrado. Ejemplo: valString= styleObj.removeProperty('color')
+
{{domxref("CSSStyleDeclaration.setProperty()")}}
+
Sin retorno. Ejemplo: styleObj.setProperty('color', 'red', 'important')
+
{{domxref("CSSStyleDeclaration.getPropertyCSSValue()")}}
+
Solo soportado a través de getComputedStyle. Devuelve un {{ domxref("ROCSSPrimitiveValue") }} en Firefox ({{ domxref("CSSPrimitiveValue") }}, en otros, los cuales implementan CSSValue), o nulo para Propiedades taquigráficas. Ejemplo: cssString= window.getComputedStyle(elemento, null).getPropertyCSSValue('color').cssText;
+ Observación: Gecko 1.9 devuelve null a menos que se utilice getComputedStyle().
+ Observación: Este método puede estar desaconsejado por el W3C , y no está presente en el último borrador CSSOM. No está soportado por IE e incluso aunque la función existe en Opera, llamarla lanza una excepción {{ domxref("DOMException") }} NOT_SUPPORTED_ERR.
+
+ +

Ejemplo

+ +
var styleObj= document.styleSheets[0].cssRules[0].style;
+alert(styleObj.cssText);
+for (var i = styleObj.length-1; i >= 0; i--) {
+   var nameString = styleObj[i];
+   styleObj.removeProperty(nameString);
+}
+alert(styleObj.cssText);
+ +

Notas

+ +

El bloque de declaración es esa parte de la regla de estilo que aparece dentro de las llaves ({}) y que actualmente proporciona las definiciones de estilo (para el selector, la parte que precede a las llaves).

+ +

Ver también

+ + + +

Especificación

+ +

CSSOM: CSSStyleDeclaration

diff --git a/files/es/web/api/cssstylerule/index.html b/files/es/web/api/cssstylerule/index.html new file mode 100644 index 0000000000..1026c9af82 --- /dev/null +++ b/files/es/web/api/cssstylerule/index.html @@ -0,0 +1,105 @@ +--- +title: CSSStyleRule +slug: Web/API/CSSStyleRule +tags: + - API +translation_of: Web/API/CSSStyleRule +--- +

{{ APIRef("CSSOM") }}

+ +

CSSStyleRule representa una sola regla de estilos CSS. Implementa la interfaz {{domxref("CSSRule")}} with a type value of 1 (CSSRule.STYLE_RULE).

+ +

Sintaxis

+ +

La sintaxis es descrita usando el formato WebIDL.

+ +
interface CSSStyleRule : CSSRule {
+    attribute DOMString selectorText;
+    readonly attribute CSSStyleDeclaration style;
+};
+ +

Propiedades

+ +
+
{{domxref("CSSStyleRule.selectorText")}}
+
Obtiene la representación textual del selector para esta regla, e.g. "h1,h2".
+
{{domxref("CSSStyleRule.style")}} {{readonlyinline}}
+
Retorna el objeto {{domxref("CSSStyleDeclaration")}} para la regla. Sólo lectura.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }}{{ Spec2('CSSOM') }}Sin cambios
{{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }}{{ Spec2('DOM2 Style') }} 
+ +

Compatibilidad entre Navegadores

+ +

Para obtener informacion de compatibilidad en los distintos navegadores, por favor consulta la tabla de compatibilidad de la interfaz asociada.

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+  		{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/es/web/api/cssstylerule/selectortext/index.html b/files/es/web/api/cssstylerule/selectortext/index.html new file mode 100644 index 0000000000..56dec42a94 --- /dev/null +++ b/files/es/web/api/cssstylerule/selectortext/index.html @@ -0,0 +1,23 @@ +--- +title: CssRule.selectorText +slug: Web/API/CSSStyleRule/selectorText +translation_of: Web/API/CSSStyleRule/selectorText +--- +

{{ ApiRef() }}

+

Resumen

+

selectorText recoge/establece la representación en forma de texto, del selector para el grupo de reglas.

+

Sintaxis

+
string = cssRule.selectorText
+cssRule.selectorText = string
+
+

Ejemplo

+
 // for cssrule: body { background-color: darkblue; }
+ cssrule = document.styleSheets[1]
+ !!TODO!!
+ selector = cssrule.selectorText;
+ // selector is now "body"
+
+

Notas

+

La implementación puede haber eliminado espacios en blanco no significativos, en el momento de comprobar el selector.

+

Especificación

+

DOM Level 2 Style - cssRule

diff --git a/files/es/web/api/cssstylesheet/deleterule/index.html b/files/es/web/api/cssstylesheet/deleterule/index.html new file mode 100644 index 0000000000..f11a905d98 --- /dev/null +++ b/files/es/web/api/cssstylesheet/deleterule/index.html @@ -0,0 +1,21 @@ +--- +title: Stylesheet.deleteRule +slug: Web/API/CSSStyleSheet/deleteRule +translation_of: Web/API/CSSStyleSheet/deleteRule +--- +

{{ ApiRef() }}

+

Resumen

+

El método deleteRule elimina una regla de la hoja de estilos actual.

+

Sintaxis

+
stylesheet.deleteRule(index)
+
+

Parámetros

+ +

Ejemplo

+
 myStyles.deleteRule(0);
+
+

Especificación

+

deleteRule

+

{{ languages( { "pl": "pl/DOM/stylesheet.deleteRule" } ) }}

diff --git a/files/es/web/api/cssstylesheet/index.html b/files/es/web/api/cssstylesheet/index.html new file mode 100644 index 0000000000..f9781136ae --- /dev/null +++ b/files/es/web/api/cssstylesheet/index.html @@ -0,0 +1,64 @@ +--- +title: CSSStyleSheet +slug: Web/API/CSSStyleSheet +translation_of: Web/API/CSSStyleSheet +--- +

{{ ApiRef() }}

+

 

+

This section describes the CSSStyleSheet object, which represents a single CSS stylesheet.

+

A CSS stylesheet consists of CSS rules, each of them can be manipulated through its CSSRule object. The stylesheet object itself lets you examine and modify the stylesheet, including its list of rules.

+

You can get the list of stylesheets for a given document using the document.styleSheets property.

+

Properties

+
+
+ stylesheet.cssRules
+
+ Returns all of the CSS rules in the stylesheet as an array.
+
+ stylesheet.disabled
+
+ This property indicates whether the current stylesheet has been applied or not.
+
+ stylesheet.href
+
+ Returns the location of the stylesheet.
+
+ stylesheet.media
+
+ Specifies the intended destination medium for style information.
+
+ stylesheet.ownerNode
+
+ Returns the node that associates this style sheet with the document.
+
+ stylesheet.ownerRule
+
+ If this style sheet comes from an @import rule, the ownerRule property will contain the CSSImportRule.
+
+ stylesheet.parentStyleSheet
+
+ Returns the stylesheet that is including this one, if any.
+
+ stylesheet.title
+
+ Returns the advisory title of the current style sheet.
+
+ stylesheet.type
+
+ Specifies the style sheet language for this style sheet.
+
+

Methods

+
+
+ stylesheet.deleteRule
+
+ Deletes a rule from the stylesheet.
+
+ stylesheet.insertRule
+
+ Inserts a new style rule into the current style sheet.
+
+

Specification

+

DOM Level 2 Style Sheets: StyleSheet

+

DOM Level 2 CSS: CSSStyleSheet

+

{{ languages( { "pl": "pl/DOM/stylesheet" } ) }}

diff --git a/files/es/web/api/cssstylesheet/insertrule/index.html b/files/es/web/api/cssstylesheet/insertrule/index.html new file mode 100644 index 0000000000..ef0f3e522d --- /dev/null +++ b/files/es/web/api/cssstylesheet/insertrule/index.html @@ -0,0 +1,119 @@ +--- +title: CSSStyleSheet.insertRule() +slug: Web/API/CSSStyleSheet/insertRule +tags: + - CSSStyleSheet +translation_of: Web/API/CSSStyleSheet/insertRule +--- +
+ {{APIRef}}
+

El método CSSStyleSheet.insertRule() inserta una nueva regla de estilo en la actual hoja de estilos.

+

Para conjuntos de reglas ésta contiene tanto al selector como la declaración de estilo. Para reglas-arroba, ésta especifica tanto al identificador-arroba como como al contenido de la regla. Si se asignan varias reglas en el  {{domxref("DOMString")}} como parámetro se dispara una  {{domxref("DOMException")}} con el código SYNTAX_ERR.

+

Syntax

+
stylesheet.insertRule(regla, índice)
+

Parameters

+ +

Ejemplos

+

Ejemplo 1

+
// Insertar una nueva regla al principio de mi hoja de estilos
+myStyle.insertRule("#blanc { color: white }", 0);
+
+

Example 2

+
/**
+ * Agregar una regla de hoja de estilos al documento(sin embargo, una mejor práctica puede ser
+ * cambiar las clases dinamicamente, así se mantiene la información de estilo en
+ * hojas de estilo genuinas (evitando agregar elementos extras al DOM))
+ * Note que se necesita una matriz para las declaraciones y reglas ya que ECMAScript
+ * no proporciona un orden de iteración predecible y como CSS
+ * depende del orden(i.e., es cascada); aquellos sin necesidad de
+ * reglas en cascada podrían construir una API basada en objetos de acceso más amigable.
+ * @param {Matriz} reglas. Acepta una matriz de  declaraciones JSON-encoded
+ * @example
+addStylesheetRules([
+  ['h2', // Acepta un segundo argumento como una matriz de matrices
+    ['color', 'red'],
+    ['background-color', 'green', true] // 'true' para reglas !important
+  ],
+  ['.myClass', ['background-color', 'yellow']
+  ]
+]);
+ */
+function addStylesheetRules (decls) {
+  var styleEl = document.createElement('style');
+  document.head.appendChild(styleEl);
+  // Aparentemente ¿alguna versión de Safari necesita la siguiente linea? No lo sé.
+  styleEl.appendChild(document.createTextNode(''));
+  var s = styleEl.sheet;
+  for (var i=0, rl = rules.length; i < rl; i++) {
+    var j = 1, rule = rules[i], selector = decl[0], propStr = '';
+    // Si el segundo argumento de una regla es una matriz de matrices, corrijamos nuestras variables.
+    if (Object.prototype.toString.call(rule[1][0]) === '[object Array]') {
+      rule = rule[1];
+      j = 0;
+    }
+    for (var pl=rule.length; j < pl; j++) {
+      var prop = rule[j];
+      propStr += prop[0] + ':' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
+    }
+    s.insertRule(selector + '{' + propStr + '}', s.cssRules.length);
+  }
+}
+

Specification

+ +

Browser compatibility

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}8{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+

See also

+ diff --git a/files/es/web/api/cssstylesheet/ownerrule/index.html b/files/es/web/api/cssstylesheet/ownerrule/index.html new file mode 100644 index 0000000000..cd8c302ce3 --- /dev/null +++ b/files/es/web/api/cssstylesheet/ownerrule/index.html @@ -0,0 +1,19 @@ +--- +title: Stylesheet.ownerRule +slug: Web/API/CSSStyleSheet/ownerRule +--- +

{{ ApiRef() }}

+

Resumen

+

Si esta hoja de estilos viene de una regla @import, la propiedad ownerRule contendrá la CSSImportRule.

+

Sintaxis

+
rule = stylesheet.ownerRule
+
+

Parámetros

+ +

Notas

+

Ten en cuenta que si el valor de la propiedad ownerNode en el elemento STYLE actual es NULL, el valor ownerRule devolverá !!TODO!! y viceversa.

+

Specification

+

ownerRule

+

{{ languages( { "pl": "pl/DOM/stylesheet.ownerRule" } ) }}

diff --git a/files/es/web/api/customelementregistry/define/index.html b/files/es/web/api/customelementregistry/define/index.html new file mode 100644 index 0000000000..5ab2ecb1b9 --- /dev/null +++ b/files/es/web/api/customelementregistry/define/index.html @@ -0,0 +1,239 @@ +--- +title: CustomElementRegistry.define() +slug: Web/API/CustomElementRegistry/define +translation_of: Web/API/CustomElementRegistry/define +--- +

{{APIRef("CustomElementRegistry")}}

+ +

El método define() de la interfaz {{domxref("CustomElementRegistry")}} define un nuevo elemento personalizado.

+ +

Se pueden crear dos tipos de elementos personalizados:

+ + + +

Sintaxis

+ +
customElements.define(name, constructor, options);
+
+ +

Parámetros

+ +
+
name
+
Nombre del nuevo elemento personalizado. Fíjate en que los nombres de elementos personalizados deben contener un guión.
+
constructor
+
Constructor para el nuevo elemento personalizado
+
options {{optional_inline}}
+
Objecto que controla cómo se define el elemento. Actualmente solo se permite una opción: +
    +
  • extends: Cadena que especifica el nombre del elemento preconstruido del cual se va a extender. Se usa para crear elementos personalizados preconstruidos.
    • +
+
+
+ +

Valor de retorno

+ +

Void.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + + + + + +
ExcepciónDescripción
NotSupportedErrorEl {{domxref("CustomElementRegistry")}} ya contiene una entrada con el mismo nombre o el mismo constructor (o se ha definido ya de alguna otra manera), o se ha especificado extends pero el elemento del que se está intentando extender es desconocido.
SyntaxErrorEl nombre proporcionado no es un nombre válido de elemento personalizado.
TypeErrorEl constructor referenciado no es un constructor
+ +
+

Nota: A menudo se obtienen excepciones NotSupportedErrors cuando el método define() está fallando, pero realmente es un problema relacionado con {{domxref("Element.attachShadow()")}}.

+
+ +

Ejemplos

+ +

Elemento personalizado autónomo

+ +

El siguiente código está tomado de nuestro ejemplo popup-info-box-web-component  (verlo en vivo).

+ +
// Crear una clase para el elemento
+class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Siempre lo primero es llamar a super en el constructor
+    super();
+
+    // Crear una shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Crear tres elementos span
+    var wrapper = document.createElement('span');
+    wrapper.setAttribute('class','wrapper');
+
+    var icon = document.createElement('span');
+    icon.setAttribute('class','icon');
+    icon.setAttribute('tabindex', 0);
+
+    var info = document.createElement('span');
+    info.setAttribute('class','info');
+
+    // Coger el contenido del atributo text y ponerlo en el span info
+    var text = this.getAttribute('text');
+    info.textContent = text;
+
+    // Coger el contenido del atributo img (si existe) y ponerlo en el span icon
+    var imgUrl;
+    if(this.hasAttribute('img')) {
+      imgUrl = this.getAttribute('img');
+    } else {
+      imgUrl = 'img/default.png';
+    }
+
+    // El span no puede tener directamente una imagen, pero si contener un elemento img
+    var img = document.createElement('img');
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // Crear los estilos CSS e incluirlos en el shadow DOM
+    var style = document.createElement('style');
+
+    style.textContent = '.wrapper {' +
+                           'position: relative;' +
+                        '}' +
+
+                         '.info {' +
+                            'font-size: 0.8rem;' +
+                            'width: 200px;' +
+                            'display: inline-block;' +
+                            'border: 1px solid black;' +
+                            'padding: 10px;' +
+                            'background: white;' +
+                            'border-radius: 10px;' +
+                            'opacity: 0;' +
+                            'transition: 0.6s all;' +
+                            'position: absolute;' +
+                            'bottom: 20px;' +
+                            'left: 10px;' +
+                            'z-index: 3;' +
+                          '}' +
+
+                          'img {' +
+                            'width: 1.2rem' +
+                          '}' +
+
+                          '.icon:hover + .info, .icon:focus + .info {' +
+                            'opacity: 1;' +
+                          '}';
+
+    // adjuntar los elementos creados (spans y estilo) al shadow DOM
+    // notese que el span wrapper contiene los spans icon e info
+
+    shadow.appendChild(style);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
+
+// Definir el nuevo elemento
+customElements.define('popup-info', PopUpInfo);
+
+ +
<popup-info img="img/alt.png" text="Su código de validación de tarjeta (CVC) es una característica
+                                    extra de seguridad — consiste en 3 o 4
+                                    numeros en la parte posterior de su tarjeta.">
+ +
+

Nota: Los constructores de elementos personalizados autónomos deben extender {{domxref("HTMLElement")}}.

+
+ +

Elemento personalizado preconstruido

+ +

El siguiente código está tomado de nuestro ejemplo word-count-web-component (verlo en vivo).

+ +
// Crear una clase para el elemento
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Siempre lo primero es llamar a super en el constructor
+    super();
+
+    // contar palabras del padre de este elemento
+    var wcParent = this.parentNode;
+
+    // la función countWords cuenta palabras (aunque estén separadas por más de un espacio)
+    // que existe en el nodo pasado como parámetro.
+    // innerText está definido para objetos HTMLElement, mientras que textContent para todos los objetos Node
+    // el operador || hace que obtengamos al menos uno de los dos
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // // Crear una shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Crear un nodo span con el número de palabras
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Añadirlo a la shadow root
+    shadow.appendChild(text);
+
+
+    // Actualizar el contador cuando el contenido del elemento cambie
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "custom-elements.html#dom-customelementregistry-define", "customElements.define()")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Compatibilidad navegadores

+ +
+ + +

{{Compat("api.CustomElementRegistry.define")}}

+
diff --git a/files/es/web/api/customelementregistry/index.html b/files/es/web/api/customelementregistry/index.html new file mode 100644 index 0000000000..624bc8f1fb --- /dev/null +++ b/files/es/web/api/customelementregistry/index.html @@ -0,0 +1,101 @@ +--- +title: CustomElementRegistry +slug: Web/API/CustomElementRegistry +tags: + - API + - CustomElementRegistry + - Experimental + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Components + - custom elements +translation_of: Web/API/CustomElementRegistry +--- +
{{DefaultAPISidebar("Web Components")}}
+ +

The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the {{domxref("window.customElements")}} property.

+ +

Methods

+ +
+
{{domxref("CustomElementRegistry.define()")}}
+
Defines a new custom element.
+
{{domxref("CustomElementRegistry.get()")}}
+
Returns the constuctor for the named custom element, or {{jsxref("undefined")}} if the custom element is not defined.
+
{{domxref("CustomElementRegistry.upgrade()")}}
+
Upgrades a custom element directly, even before it is connected to its shadow root.
+
{{domxref("CustomElementRegistry.whenDefined()")}}
+
Returns an empty {{jsxref("Promise", "promise")}} that resolves when a custom element becomes defined with the given name. If such a custom element is already defined, the returned promise is immediately fulfilled.
+
+ +

Examples

+ +

The following code is taken from our word-count-web-component example (see it live also). Note how we use the {{domxref("CustomElementRegistry.define()")}} method to define the custom element after creating its class.

+ +
// Create a class for the element
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // count words in element's parent element
+    var wcParent = this.parentNode;
+
+    function countWords(node){
+      var text = node.innerText || node.textContent
+      return text.split(/\s+/g).length;
+    }
+
+    var count = 'Words: ' + countWords(wcParent);
+
+    // Create a shadow root
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Create text node and add word count to it
+    var text = document.createElement('span');
+    text.textContent = count;
+
+    // Append it to the shadow root
+    shadow.appendChild(text);
+
+
+    // Update count when element content changes
+    setInterval(function() {
+      var count = 'Words: ' + countWords(wcParent);
+      text.textContent = count;
+    }, 200)
+
+  }
+}
+
+// Define the new element
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
+

Note: The CustomElementRegistry is available through the {{domxref("Window.customElements")}} property.

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "custom-elements.html#customelementregistry", "CustomElementRegistry")}}{{Spec2("HTML WHATWG")}}Initial definition.
+ +

Browser compatibility

+ + + +

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

diff --git a/files/es/web/api/customevent/index.html b/files/es/web/api/customevent/index.html new file mode 100644 index 0000000000..b189c77f66 --- /dev/null +++ b/files/es/web/api/customevent/index.html @@ -0,0 +1,94 @@ +--- +title: CustomEvent +slug: Web/API/CustomEvent +tags: + - API + - DOM + - Interfaz + - Referencia +translation_of: Web/API/CustomEvent +--- +

{{APIRef("DOM")}}La interfaz CustomEvent  representa eventos inicializados por una aplicación para cualquier propósito.

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}
+
+

Crea un CustomEvent.

+
+
+ +

Propiedades

+ +
+
{{domxref("CustomEvent.detail")}} {{readonlyinline}}
+
Cualquier dato transmitido al inicializar el evento.
+
+ +

Esta interfaz hereda las propiedades de su padre, {{domxref("Event")}}:

+ +

{{Page("/es/docs/Web/API/Event", "Propiedades")}}

+ +

Métodos

+ +
+
{{domxref("CustomEvent.initCustomEvent()")}} {{deprecated_inline}}
+
+

Inicializar un objeto CustomEvent. Si el evento ya ha sido enviado, este método no hace nada.

+
+
+ +

Esta interfaz hereda los métodos de su padre, {{domxref("Event")}}:

+ +

{{Page("/es/docs/Web/API/Event", "Métodos")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#interface-customevent','CustomEvent')}}{{Spec2('DOM WHATWG')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Disparar desde código privilegiado a código no-privilegiado

+ +

Al disparar un CustomEvent desde código privilegiado (una extensión) a un código no-privilegiado (una página web),  deben considerarse algunos problemas de seguridad. Firefox y otras aplicaciones Gecko restringen al objeto creado desde un contexto siendo directamente utilizado por otro, el cual automáticamente evitará los agujeros de seguridad, pero estas restricciones también pueden impedir que su código se ejecute como esperaba.

+ +

Al crear un objeto CustomEvent, debes crear el objeto desde la misma ventana. El atributo detail de tu CustomEvent estará sujeto a las mismas restricciones. Los valores de String y Array serán legibles sin restricciones por el content, pero los objetos personalizados no lo harán. Al utilizar un objeto personalizado, necesitaras definir que atributos de ese objeto se pueden leer desde la secuencia de comandos de contenido usando  Components.utils.cloneInto().

+ +
// doc es una referencia al contenido del documento
+function dispatchCustomEvent(doc) {
+  var eventDetail = Components.utils.cloneInto({foo: 'bar'}, doc.defaultView);
+  var myEvent = doc.defaultView.CustomEvent("mytype", eventDetail);
+  doc.dispatchEvent(myEvent);
+}
+ +

Pero hay que tener en cuenta que exponer una función permitirá que el script content lo ejecute con privilegios de chrome, lo que puede abrir una vulnerabilidad de seguridad.

+ +

Ver también

+ + diff --git a/files/es/web/api/datatransfer/index.html b/files/es/web/api/datatransfer/index.html new file mode 100644 index 0000000000..8d8a6a5b1d --- /dev/null +++ b/files/es/web/api/datatransfer/index.html @@ -0,0 +1,378 @@ +--- +title: DataTransfer +slug: Web/API/DataTransfer +translation_of: Web/API/DataTransfer +--- +
{{APIRef("HTML DOM")}}
+ +

{{ gecko_minversion_header("1.9") }} El objeto DataTransfer es usado como contenedor de datos que estan siendo manipulados durante la operación de drag and drop. Este puede contener uno o varios objetos, de uno o varios tipos de datos. Para más información  en cuanto a drag and drop, ver Drag and Drop.

+ +

Este objeto esta disponible desde la propiedad dataTransfer de todos los eventos de drag . No pueden ser creados por separado.

+ +

Lista de propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertiesType
dropEffectString
effectAllowedString
files {{ gecko_minversion_inline("1.9.2") }}{{ domxref("FileList") }}
mozCursor {{ non-standard_inline() }} {{ gecko_minversion_inline("1.9.1") }}String
mozItemCount {{ non-standard_inline() }}unsigned long
mozSourceNode {{ non-standard_inline() }} {{ gecko_minversion_inline("2") }}{{ domxref("Node") }}
mozUserCancelledBoolean
typesDOMStringList
+ +

Lista de métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void addElement(in Element element)
void clearData([in String type])
String getData(in String type)
void setData(in String type, in String data)
void setDragImage(in nsIDOMElement image, in long x, in long y)
void mozClearDataAt([in String type, in unsigned long index])
nsIVariant mozGetDataAt(in String type, in unsigned long index)
void mozSetDataAt(in String type, in nsIVariant data, in unsigned long index)
StringList mozTypesAt([in unsigned long index])
+ +

Propiedades

+ +

dropEffect

+ +

The actual effect that will be used, and should always be one of the possible values of effectAllowed.

+ +

For the dragenter and dragover events, the dropEffect will be initialized based on what action the user is requesting. How this is determined is platform specific, but typically the user can press modifier keys to adjust which action is desired. Within an event handler for the dragenter and dragover events, the dropEffect should be modified if the action the user is requesting is not the one that is desired.

+ +

For dragstart, drag, and dragleave events, the dropEffect is initialized to "none". Any value assigned to the dropEffect will be set, but the value isn't used for anything.

+ +

For the drop and dragend events, the dropEffect will be initialized to the action that was desired, which will be the value that the dropEffect had after the last dragenter or dragover event.

+ +

Possible values:

+ + + +

Assigning any other value has no effect and retains the old value.

+ +

effectAllowed

+ +

Specifies the effects that are allowed for this drag. You may set this in the dragstart event to set the desired effects for the source, and within the dragenter and dragover events to set the desired effects for the target. The value is not used for other events.

+ +

Possible values:

+ + + +

Assigning any other value has no effect and retains the old value.

+ +

files

+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list. An invalid index access on the {{ domxref("FileList") }} specified by this property will return null.

+ +

Example

+ +

This example dumps the list of files dragged into the browser window: http://jsfiddle.net/9C2EF/

+ +

types

+ +

Holds a list of the format types of the data that is stored for the first item, in the same order the data was added. An empty list will be returned if no data was added.

+ +

{{ gecko_minversion_note("1.9.2", 'The string "Files" is included in this list if files are included in the drag.') }}

+ +

{{ h3_gecko_minversion("mozCursor", "1.9.1", "mozCursor") }}

+ +

The drag cursor's state. This is primarily used to control the cursor during tab drags.

+ +
Note: This method is currently only implemented on Windows.
+ +

Possible values

+ +
+
auto
+
Uses the default system behavior.
+
default
+
Uses the default Gecko behavior, which is to set the cursor to an arrow during the drag operation.
+
+ +
Note: If you specify any value other than "default", "auto" is assumed.
+ +

mozItemCount

+ +

The number of items being dragged.

+ +
Note: This property is Gecko-specific.
+ +

mozSourceNode

+ +

{{ gecko_minversion_header("2") }}

+ +

The {{ domxref("Node") }} over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is null for external drags or if the caller can't access the node.

+ +
Note: This property is Gecko-specific.
+ +

mozUserCancelled

+ +

This property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape. It will be false in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location. This property is not currently implemented on Linux.

+ +
Note: This property is Gecko-specific.
+ +

Métodos

+ +

addElement()

+ +

Set the drag source. Usually you would not change this, but it will affect which node the drag and dragend events are fired at. The default target is the node that was dragged.

+ +
 void addElement(
+   in Element element
+ );
+
+ +
Parameters
+ +
+
element
+
The element to add.
+
+ +

clearData()

+ +

Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.

+ +
 void clearData(
+   [optional] in String type
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to remove.
+
+ +

getData()

+ +

Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.

+ +

A security error will occur if you attempt to retrieve data during a drag that was set from a different domain, or the caller would otherwise not have access to. This data will only be available once a drop occurs during the drop event.

+ +
 String getData(
+   in String type
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to retrieve.
+
+ +

setData()

+ +

Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position. That is, the order of the types list is not changed when replacing data of the same type.

+ +
 void setData(
+   in String type,
+   in String data
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to add.
+
data
+
The data to add.
+
+ +

setDragImage()

+ +

Set the image to be used for dragging if a custom one is desired. Most of the time, this would not be set, as a default image is created from the node that was dragged.

+ +

If the node is an HTML img element, an HTML canvas element or a XUL image element, the image data is used. Otherwise, image should be a visible node and the drag image will be created from this. If image is null, any custom drag image is cleared and the default is used instead.

+ +

The coordinates specify the offset into the image where the mouse cursor should be. To center the image, for instance, use values that are half the width and height of the image.

+ +
 void setDragImage(
+   in Element image,
+   in long x,
+   in long y
+ );
+
+ +
Parameters
+ +
+
image
+
An element to use as the drag feedback image
+
x
+
Horizontal offset within the image.
+
y
+
Vertical offset within the image.
+
+ +

mozClearDataAt()

+ +

Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.

+ +

If the last format for the item is removed, the entire item is removed, reducing mozItemCount by one.

+ +

If the format list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.

+ +
Note: This method is Gecko-specific.
+ +
 void mozClearDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to remove.
+
index
+
The index of the data to remove.
+
+ +

mozGetDataAt()

+ +

Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.

+ +
Note: This method is Gecko-specific.
+ +
 nsIVariant mozGetDataAt(
+   [optional] in String type,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to retrieve.
+
index
+
The index of the data to retrieve.
+
+ +

mozSetDataAt()

+ +

A data transfer may store multiple items, each at a given zero-based index. mozSetDataAt() may only be called with an index argument less than mozItemCount in which case an existing item is modified, or equal to mozItemCount in which case a new item is added, and the mozItemCount is incremented by one.

+ +

Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.

+ +

The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an {{ interface("nsISupports") }}.

+ +
Note: This method is Gecko-specific.
+ +
 void mozSetDataAt(
+   [optional] in String type,
+   in nsIVariant data,
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
type
+
The type of data to add.
+
data
+
The data to add.
+
index
+
The index of the data to add.
+
+ +

mozTypesAt()

+ +

Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.

+ +
Note: This method is Gecko-specific.
+ +
 nsIVariant mozTypesAt(
+   in unsigned long index
+ );
+
+ +
Parameters
+ +
+
index
+
The index of the data for which to retrieve the types.
+
+ +

Mira también

+ +

Drag and Drop

+ +

{{ languages( { "ja": "Ja/DragDrop/DataTransfer" } ) }}

diff --git a/files/es/web/api/detecting_device_orientation/index.html b/files/es/web/api/detecting_device_orientation/index.html new file mode 100644 index 0000000000..60302ae643 --- /dev/null +++ b/files/es/web/api/detecting_device_orientation/index.html @@ -0,0 +1,278 @@ +--- +title: Detectando la orientación del dispositivo +slug: Web/API/Detecting_device_orientation +translation_of: Web/API/Detecting_device_orientation +--- +
{{SeeCompatTable}}
+ +

Resumen

+ +

Cada vez más, los dispositivos habilitados para la web son capaces de determinar su orientación; esto hace que estos puedan reportar datos indicando los cambios de su orientación con relación a la fuerza de gravedad. In particular, dispositivos de mano como los teléfonos móviles pueden usar esta información para rotar la pantalla automaticamente para mostrar información en de forma vertical, presentando un vista extendida del contenido de la web cuando el dispositivo de forma que el ancho es mayor que el alto. 

+ +

Hay dos eventos JavaScript que manejan la información de orientación. El primero es {{domxref("DeviceOrientationEvent")}}, que es enviado cuando el aceleromentro detecta un cambio de orientación del dispositivo. Recibiendo y procesando los datos reportados por el evento es posible responder interactivamente a la rotación y aplicar cambios correspondientes al movimiento del dispositivo.

+ +

El segundo evento es {{domxref("DeviceMotionEvent")}}, que es enviado cuando un cambio de la aceleración fue añadido. Esto es diferente de {{domxref("DeviceOrientationEvent")}} por que está escuchando cambios de aceleración mas no de orientación. Los sensores son comunmente capaces de detetar {{domxref("DeviceMotionEvent")}} incluso aquellos sensores de laptops que protegen del movimiento a los disposivitos de almacenamiento. {{domxref("DeviceOrientationEvent")}} es comunmente encontrado en dispositivos móviles.

+ +

Trabajando con eventos de orientación

+ +

Todo lo que necesitas hacer para empezar a recibir cambios de orientación es escuchar el evento {{ event("deviceorientation") }}:

+ +
window.addEventListener("deviceorientation", handleOrientation, true);
+
+ +

Después de registrar el evento de escucha (en este caso, una función de JavaScript llamada handleOrientation()), tu función de escucha periodicamente será invocada con una actualización de datos.

+ +

La información del evento contiene 4 valores:

+ + + +

El manejador del evento puede ser similar a lo siguiente:

+ +
function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // Do stuff with the new orientation data
+}
+
+ +

Explicación de los Valores de Orientación

+ +

El valor reportado para cada eje indica la cantidad de rotación alrededor de un eje dado, con referencia a un estandar marco de coordenadas. El siguiente enlace describe con mayor detalle la Orientacíon y datos del movimiento explicado que es resumido abajo. 

+ + + +

Ejemplo de orientación

+ +

Este ejemplo va a funcionar en cualquier nevegador que soporte el evento {{event("deviceorientation")}} y funcione en un dispositivo con capacidades de detectar la orientación.

+ +

Imaginemos una pelota en un jardin:

+ +
<div class="garden">
+  <div class="ball"></div>
+</div>
+
+<pre class="output"></pre>
+
+ +

Este jardin tiene 200 pixeles de ancho (Si, es uno pequeño), y la pelota esta en el centro:

+ +
.garden {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+
+ +

Ahora, si nosotros movemos nuestro dispositivo, la pelota va a moverse acorde a este:

+ +
var ball   = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth  - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta;  // In degree in the range [-180,180]
+  var y = event.gamma; // In degree in the range [-90,90]
+
+  output.innerHTML  = "beta : " + x + "\n";
+  output.innerHTML += "gamma: " + y + "\n";
+
+  // Because we don't want to have the device upside down
+  // We constrain the x value to the range [-90,90]
+  if (x >  90) { x =  90};
+  if (x < -90) { x = -90};
+
+  // To make computation easier we shift the range of
+  // x and y to [0,180]
+  x += 90;
+  y += 90;
+
+  // 10 is half the size of the ball
+  // It center the positioning point to the center of the ball
+  ball.style.top  = (maxX*x/180 - 10) + "px";
+  ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+
+ +

Aqui el resultado en vivo:

+ +
{{ EmbedLiveSample('Orientation_example', '230', '260') }}
+ +
+

Tener en cuenta: Chrome y Firefox no manejan los angulos de la misma forma, asi que en algunos ejes la dirección se invierte.

+
+ +

Procesando eventos de movimiento

+ +

Eventos de movimiento son manejados de la misma manera que la orientación, con la excepción de que estos tienen sus propios nombres de evento: {{ event("devicemotion") }}

+ +
window.addEventListener("devicemotion", handleMotion, true);
+ +

Lo que realmente ha cambiado es la información proporcionada en {{ domxref("DeviceMotionEvent") }} objeto pasado como parametro de la función HandleMotion.

+ +

El evento de movimiento tiene cuatro propiedades:

+ + + +

Valores de movimiento explicados

+ +

{{ domxref("DeviceMotionEvent") }} proporciona a los desarrolladores web información sobre la velocidad de los cambios de la posición y orientación del dispositivo. Los cambios son proporcionados por sus tres ejes (ver Datos de orientación y movimiento explicados por más detalles).

+ +

Para {{domxref("DeviceMotionEvent.acceleration","acceleration")}} y {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}, los ejes corresponden a lo siguiente:

+ + + +

Para {{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}, la situación es un poco diferente; la información corresponde a lo siguiente en cada caso:

+ + + +

Finalmente, {{domxref("DeviceMotionEvent.interval","interval")}} representa el intervalo de tiempo, en milisegundos, en el que los datos han sido obtenidos del dispositivo.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Especificación inicial.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
+ 6		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
+ 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+

Note: gyronorm.js es un polyfill para normalizar los datos del acelerómetro y giroscopio en dispositivos móviles. Esto es útil para superar algunas de las diferencias en la compatibilidad del dispositivo con la orientación del dispositivo..

+
+ +

Gecko implementation notes

+ +
    +
  1. Firefox 3.6, 4, and 5 supported mozOrientation versus the standard {{domxref("DeviceOrientationEvent")}} event
    2. +
+ +

Vea también

+ + diff --git a/files/es/web/api/devicemotionevent/index.html b/files/es/web/api/devicemotionevent/index.html new file mode 100644 index 0000000000..a8820d1173 --- /dev/null +++ b/files/es/web/api/devicemotionevent/index.html @@ -0,0 +1,73 @@ +--- +title: DeviceMotionEvent +slug: Web/API/DeviceMotionEvent +translation_of: Web/API/DeviceMotionEvent +--- +

{{APIRef("Device Orientation Events")}}{{SeeCompatTable}}

+ +

El evento DeviceMotionEvent proporciona a los desarrolladores información acerca de la velocidad de los cambios en la posición y orientación del dispositivo.

+ +
+

Aviso: Acualmente, Firefox and Chrome no manejan las corrdenadas de la misma forma. Tenga en cuenta esto cuando lo use.

+
+ +

Constructor

+ +
+
{{DOMxRef("DeviceMotionEvent.DeviceMotionEvent()")}} {{Non-standard_Inline}}
+
Crea un nuevo DeviceMotionEvent.
+
+ +

Properties

+ +
+
{{DOMxRef("DeviceMotionEvent.acceleration")}}{{ReadOnlyInline}}
+
Objeto que nos proporciona la aceleración del dispositivo en los ejes X, Y y Z. La aceleración está expresada en m/s2.
+
{{DOMxRef("DeviceMotionEvent.accelerationIncludingGravity")}}{{ReadOnlyInline}}
+
Objeto que nos proporciona la aceleración del dispositivo en los ejes X, Y y Z con el efecto de la gravedad. La aceleración está expresada en m/s2.
+
{{DOMxRef("DeviceMotionEvent.rotationRate")}}{{ReadOnlyInline}}
+
Objeto que nos proporciona los cambios en la orientación del dispositivo en los ejes alpha, beta y gamma. La velocidad de rotación se expresa en grados por segundo
+
{{DOMxRef("DeviceMotionEvent.interval")}}{{ReadOnlyInline}}
+
Número que representa el intervalo de tiempo, en milisegundos, en el que se obtienen los datos del dispositivo..
+
+ +

Ejemplo

+ +
window.addEventListener('devicemotion', function(event) {
+  console.log(event.acceleration.x + ' m/s2');
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Device Orientation", "#devicemotionevent", "DeviceMotionEvent")}}{{Spec2("Device Orientation")}}Initial definition.
+ +

Compativilidad con los navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/document/abrir/index.html b/files/es/web/api/document/abrir/index.html new file mode 100644 index 0000000000..13b541561d --- /dev/null +++ b/files/es/web/api/document/abrir/index.html @@ -0,0 +1,109 @@ +--- +title: Document.open() +slug: Web/API/Document/abrir +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +

El método Document.open() abre un documento para escritura (writing)

+ +

Esto viene con algunos efectos secundarios. Por ejemplo:

+ + + +

Sintaxis

+ +
document.open();
+
+ +

Parametros

+ +

Ninguno.

+ +

Valor devuelto

+ +

Una instancia del objeto Document (Document).

+ +

Ejemplos

+ +

El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.

+ +
document.open();
+document.write("<p>Hola mundo!</p>");
+document.write("<p>Soy un pez</p>");
+document.write("<p>El numero es 42</p>");
+document.close();
+ +

Notas

+ +
+

Traducción pendiente para el texto que sigue

+
+ +

An automatic document.open() call happens when {{domxref("document.write()")}} is called after the page has loaded.

+ +

For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.document non-spec'ed parameters to document.open

+ +

Gecko-specific notes

+ +

Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.

+ +

Starting with Gecko 1.9.2, document.open() uses the principal of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using wrappedJSObject. See Security check basics for more about principals.

+ +

Three-argument document.open()

+ +

There is a lesser-known and little-used three-argument version of document.open() , which is an alias of {{domxref("Window.open()")}} (see its page for full details).

+ +

This call, for example opens github.com in a new window, with its opener set to null:

+ +
document.open('https://www.github.com','', 'noopener=true')
+ +

Two-argument document.open()

+ +

Browsers used to support a two-argument document.open(), with the following signature:

+ +
document.open(type, replace)
+ +

Where type specified the MIME type of the data you are writing (e.g. text/html) and replace if set (i.e. a string of "replace") specified that the history entry for the new document would replace the current history entry of the document being written to.

+ +

This form is now obsolete; it won't throw an error, but instead just forwards to document.open() (i.e. is the equivalent of just running it with no arguments).  The history-replacement behavior now always happens.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.open")}}

+ +

See also

+ + diff --git a/files/es/web/api/document/adoptnode/index.html b/files/es/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..0a90679756 --- /dev/null +++ b/files/es/web/api/document/adoptnode/index.html @@ -0,0 +1,61 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +tags: + - API + - DOM + - DOM Reference + - Referencia + - metodo +translation_of: Web/API/Document/adoptNode +--- +
{{ ApiRef("DOM") }}
+ +

Document.adoptNode() transfiere un {{Glossary("node/dom", "node")}} desde otro {{domxref("Document", "document", "", "1")}} al documento del método. El nodo adoptado y sus subnodos se eliminan del documento original (si lo hubiera), encuentra  y su {{domxref("Node.ownerDocument", "ownerDocument")}} se cambia por el documento actual. El nodo puede entoces ser insertado en el documento actual.

+ +

Sintaxis

+ +
node = document.adoptNode(externalNode);
+
+ +
+
node
+
El nodo adoptado que ahora tiene este documento como su {{domxref("Node.ownerDocument", "ownerDocument")}}. El {{domxref("Node.parentNode", "parentNode")}} del nodo es null, esto se debe a que aún no a sido insertado en el árbol del documento. Tenga en cuenta que node y externalNode son el mismo objeto después de esta llamada.
+
externalNode
+
El nodo a ser adoptado desde otro documento.
+
+ +

Ejemplo

+ +
var iframe = document.querySelector('iframe');
+var iframeImages = iframe.contentDocument.querySelectorAll('img');
+var newParent = document.getElementById('images');
+
+iframeImages.forEach(function(imgEl) {
+  newParent.appendChild(document.adoptNode(imgEl));
+});
+
+ +

Notas

+ +

Los nodos de documentos externos deberían ser clonados utilizando {{domxref("document.importNode()")}} (o adoptado utilizando document.adoptNode()) antes de que puedan ser insertados en el documento actual. Para más incidencias sobre {{domxref("Node.ownerDocument")}}, vea el W3C DOM FAQ.

+ +

Firefox actualmente no obliga a cumplir esta regla (lo hizo un tiempo durante el desarrollo de Firefox 3, pero muchos sitios se rompían cuando esta regla era obligatoria). Animamos a los desarrolladores web a que corrijan su código para seguir esta regla con el fin de mejorar la compatibilidad futura.

+ +

Epecificación

+ + + +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Document.adoptNode")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/document/alinkcolor/index.html b/files/es/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..f270799c53 --- /dev/null +++ b/files/es/web/api/document/alinkcolor/index.html @@ -0,0 +1,36 @@ +--- +title: document.alinkColor +slug: Web/API/Document/alinkColor +translation_of: Web/API/Document/alinkColor +--- +

{{APIRef("DOM")}}

+ +
+

Desaprobado

+
+ +

Devuelve o define el color que tendrán los vínculos activos en el cuerpo (elemento body del documento. Un vínculo está activo durante el tiempo entre los eventos mousedown (cuando se presiona el botón izquierdo del "mouse" sobre el vínculo) y mouseup (cuando se deja de presionar el vínculo al soltar el botón izquierdo del "mouse").

+ +

Sintaxis

+ +
color = document.alinkColor
+document.alinkColor =color
+
+ +

color es un texto que deberá llevar el nombre del color en inglés(e.g., "blue", "darkblue", etc.) o el valor hexadecimal del color (e.g., #0000FF)

+ +

Notas

+ +

El valor por defecto de esta propiedad en Mozilla es rojo (#ee0000 en hexadecimal).

+ +

document.alinkColor es obsoleto en DOM Level 2 HTML. Una alternativa es el selector CSS {{ Cssxref(":active") }}.

+ +

Otra alternativa es document.body.aLink, sin embargo éste es desaprobado en HTML 4.01 a favor de la alternativa CSS.

+ +

Gecko soporta tanto alinkColor/:active como {{ Cssxref(":focus") }}. Internet Explorer 6 y 7 soportan alinkColor/:active sólo para vínculos de ancla (<a>) HTML y el comportamiento es el mismo que :focus bajo Gecko. En IE (Internet Explorer) no hay soporte para :focus.

+ +

Especificación

+ +

DOM Nivel 0. No es parte de ningún estándar.

+ +

MSDN: alinkColor property

diff --git a/files/es/web/api/document/anchors/index.html b/files/es/web/api/document/anchors/index.html new file mode 100644 index 0000000000..fbcd8eea0e --- /dev/null +++ b/files/es/web/api/document/anchors/index.html @@ -0,0 +1,95 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +tags: + - API + - Desaprobado + - Documento + - HTML DOM + - Propiedad + - Referencia +translation_of: Web/API/Document/anchors +--- +
{{APIRef("DOM")}}{{deprecated_header()}}
+ +
La propiedad de solo lectura anchors de la interfaz {{domxref("Document")}} devuelve una lista de todas las anclas (anchors) del documento.
+ +

Sintaxis

+ +
nodeList = document.anchors;
+
+ +

Valor

+ +

Una {{domxref("HTMLCollection")}}.

+ +

Ejemplo

+ +
if ( document.anchors.length >= 5 ) {
+    dump("dump found too many anchors");
+    window.location = "http://www.google.com";
+}
+
+ +

Lo siguiente es un ejemplo que puebla una Tabla de Contenido con cada ancla en la página:

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Test</title>
+<script>
+function init() {
+  var toc = document.getElementById("toc");
+  var i, li, newAnchor;
+  for (i = 0; i < document.anchors.length; i++) {
+    li = document.createElement("li");
+    newAnchor = document.createElement('a');
+    newAnchor.href = "#" + document.anchors[i].name;
+    newAnchor.innerHTML = document.anchors[i].text;
+    li.appendChild(newAnchor);
+    toc.appendChild(li);
+  }
+}
+</script>
+</head>
+<body onload="init()">
+
+<h1>Title</h1>
+<h2><a name="contents">Contents</a></h2>
+<ul id="toc"></ul>
+
+<h2><a name="plants">Plants</a></h2>
+<ol>
+  <li>Apples</li>
+  <li>Oranges</li>
+  <li>Pears</li>
+</ol>
+
+<h2><a name="veggies">Veggies</a></h2>
+<ol>
+  <li>Carrots</li>
+  <li>Celery</li>
+  <li>Beats</li>
+</ol>
+
+</body>
+</html>
+ +

Ver en JSFiddle

+ +

Notas

+ +

Por razones de retrocompatibilidad, el conjunto de anclas devuelto sólo contiene aquellas anclas creadas con el atribuo name, y no aquellas creadas con el atributo id.

+ +

Especificaciones

+ +

DOM Level 2 HTML: anchors

+ +

{{ languages( { "en": "en/DOM/document.anchors", "pl": "pl/DOM/document.anchors", "ja": "ja/DOM/document.anchors" } ) }}

+ +

Compatibilidad de navegadores

+ + + +
{{Compat("api.Document.anchors")}}
diff --git a/files/es/web/api/document/applets/index.html b/files/es/web/api/document/applets/index.html new file mode 100644 index 0000000000..e6ecf71b60 --- /dev/null +++ b/files/es/web/api/document/applets/index.html @@ -0,0 +1,30 @@ +--- +title: document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +

{{APIRef("DOM")}}

+ +

Resumen

+ +

applets Devuelve una lista ordenada de los + + applets + del documento.

+ +

Sintaxis

+ +
nodeList = document.applets
+
+ +

Ejemplo

+ +
// ( Cuando sabes que el segundoapplet es el que quieres )
+my_java_app = document.applets[1];
+
+ +

Especificación

+ +

DOM Level 2 HTML: applets

+ +

{{ languages( { "en": "en/DOM/document.applets", "pl": "pl/DOM/document.applets" } ) }}

diff --git a/files/es/web/api/document/async/index.html b/files/es/web/api/document/async/index.html new file mode 100644 index 0000000000..132fd106e1 --- /dev/null +++ b/files/es/web/api/document/async/index.html @@ -0,0 +1,33 @@ +--- +title: Document.async +slug: Web/API/Document/async +translation_of: Web/API/XMLDocument/async +--- +

document.async es utilizado para indicar cuándo un llamado de  {{domxref("document.load")}} debe ser sincrónico o asincrónico. true es su valor por defecto, indicando que el documento se cargó asincrónicamente.

+ +

(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)

+ +

Ejemplo

+ +
function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');
+ +

Especificación

+ + + +

Véase también

+ + diff --git a/files/es/web/api/document/bgcolor/index.html b/files/es/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..7baf9c893b --- /dev/null +++ b/files/es/web/api/document/bgcolor/index.html @@ -0,0 +1,39 @@ +--- +title: document.bgColor +slug: Web/API/Document/bgColor +translation_of: Web/API/Document/bgColor +--- +

{{APIRef("DOM")}}{{ Deprecated_header() }}

+ +

bgColor da/define el color de fondo (bgColor) del documento actual.

+ +

Sintaxis

+ +
color = document.bgColor
+document.bgColor =
+color
+
+ +

Parámetros

+ + + +

Ejemplos

+ +
# document.bgColor = "darkblue";
+# document.bgColor = "#ff00ff";
+
+ +

Notas

+ +

El valor por defecto de esta propiedad en Mozilla Firefox es blanco (#ffffff en hexadecimal).

+ +

document.bgColor está desaprobado en DOM Level 2 HTML. La alternativa recomendada es el uso del estilo background-color de CSS el cual puede ser accesado a través del DOM con document.body.style.backgroundColor. Otra alternativa es document.body.bgColor, sin embargo, ésta última también está desaprobada en HTML 4.01 a favor de la alternativa CSS.

+ +

Especificación

+ +

DOM Nivel 0. No es parte de ningún estándar.

+ +

{{ languages( { "en": "en/DOM/document.bgColor", "pl": "pl/DOM/document.bgColor" } ) }}

diff --git a/files/es/web/api/document/body/index.html b/files/es/web/api/document/body/index.html new file mode 100644 index 0000000000..724ee899b2 --- /dev/null +++ b/files/es/web/api/document/body/index.html @@ -0,0 +1,39 @@ +--- +title: document.body +slug: Web/API/Document/body +translation_of: Web/API/Document/body +--- +
{{APIRef("DOM")}}
+ +

Resumen

+ +

Devuelve el nodo del <body> o el nodo del <frameset> del documento.

+ +

Sintaxis

+ +
objRef = document.body
+document.body =
+objRef
+
+ +

Ejemplo

+ +
// en HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+var aNewBodyElement = document.createElement("body");
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+ +

Notas

+ +

document.body es el elemento que contiene el contenido para el documento. En documentos con contenidos <body>, devuelven el elemento <body>, y en documentos de marco de sistema, esto devuelve el elemento extremo <frameset>.

+ +

Aunque body es programable, colocando un nuevo cuerpo en un documento efectivamente quitará a todos los hijos actuales del elemento existente <body>.

+ +

Especificación

+ +

DOM Level 2 HTML: HTMLDocument.body

+ +

{{ languages( { "en": "en/DOM/document.body", "pl": "pl/DOM/document.body" } ) }}

diff --git a/files/es/web/api/document/characterset/index.html b/files/es/web/api/document/characterset/index.html new file mode 100644 index 0000000000..b4fb1e2551 --- /dev/null +++ b/files/es/web/api/document/characterset/index.html @@ -0,0 +1,36 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +translation_of: Web/API/Document/characterSet +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve la codificación de caracteres (conjunto de caracteres) usado en el documento.

+ +

Sintaxis

+ +
string = document.characterSet
+
+ +

Ejemplo

+ +
<button onclick="alert(document.characterSet);"
+>Mostrar conjunto de caracteres</button>
+// devuelve el conjunto de caracteres del documento, por ejemplo "ISO-8859-1 o UTF-8"
+
+ +

Notas

+ +

La codificación de caracteres es el conjunto de caracteres usados para interpretar el documento, el cual puede ser diferente a la codificación especificada por la página (el usuario puede omitir la codificación).

+ +

Para una lista completa de juegos/conjuntos de caracteres, visite: http://www.iana.org/assignments/character-sets.

+ +

Especificación

+ +

DOM Nivel 0. No es parte de ningún estándar.

+ +
 
+ +

{{ languages( { "en": "en/DOM/document.characterSet", "pl": "pl/DOM/document.characterSet" } ) }}

diff --git a/files/es/web/api/document/clear/index.html b/files/es/web/api/document/clear/index.html new file mode 100644 index 0000000000..6208e48885 --- /dev/null +++ b/files/es/web/api/document/clear/index.html @@ -0,0 +1,31 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +tags: + - API + - Document + - HTML DOM + - Method + - NeedsCompatTable + - NeedsExample + - NeedsMarkupWork + - NeedsSpectTable + - Referencia +translation_of: Web/API/Document/clear +--- +

{{APIRef("DOM")}}{{ Deprecated_header() }}

+ +

Método que se usa en versiones anterior a las 1.0 de Mozilla para para limpiar el documento completo.

+ +

No hace nada en versiones más recientes basado en Mozilla así como en Internet Explorer y Netscape 4.

+ +

Síntaxis

+ +
document.clear()
+
+ +

Especificación

+ + diff --git a/files/es/web/api/document/close/index.html b/files/es/web/api/document/close/index.html new file mode 100644 index 0000000000..313678de2c --- /dev/null +++ b/files/es/web/api/document/close/index.html @@ -0,0 +1,27 @@ +--- +title: Document.close() +slug: Web/API/Document/close +translation_of: Web/API/Document/close +--- +

{{APIRef("DOM")}}

+ +

El método document.close() finaliza la escritura de un documento abierta con document.open().

+ +

Sintaxis

+ +
document.close();
+
+ +

Ejemplo

+ +
// Abrir un documento.
+// Escribir contenido en el documento.
+// Cerrar el documento.
+document.open();
+document.write("<p>El único contenido.</p>");
+document.close();
+
+ +

Especificación

+ +

DOM Level 2 HTML: close() Method

diff --git a/files/es/web/api/document/contenttype/index.html b/files/es/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..f385843676 --- /dev/null +++ b/files/es/web/api/document/contenttype/index.html @@ -0,0 +1,25 @@ +--- +title: Document.contentType +slug: Web/API/Document/contentType +translation_of: Web/API/Document/contentType +--- +

{{ ApiRef("DOM") }}{{Non-standard_header}}

+ +

Devuelve el tipo MIME con el que el documento está siendo renderizado. Puede obtenerlo a partir de los encabezados HTTP (Headers) o de otras fuentes de información MIME, y puede ser afectado por conversiones automáticas inferidas tanto por el navegador como por cualquiera de sus extensiones.

+ +

Sintáxis

+ +
contentType = document.contentType;
+
+ +

contentType es una propiedad de sólo lectura.

+ +

Notas

+ +

Esta propiedad no es afectada por los tags meta.

+ +

Especificaciones

+ +

No estándar, sólo soportada por Gecko.

+ +

 

diff --git a/files/es/web/api/document/crearatributo/index.html b/files/es/web/api/document/crearatributo/index.html new file mode 100644 index 0000000000..22f769d577 --- /dev/null +++ b/files/es/web/api/document/crearatributo/index.html @@ -0,0 +1,91 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/crearAtributo +tags: + - Atributos + - Crear Atributo + - JavaScript + - Métodos +translation_of: Web/API/Document/createAttribute +--- +
{{ ApiRef("DOM") }}
+ +

El método Document.createAttribute() crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.

+ +
+

El texto pasado como parametro es convertido a minusculas.

+
+ +

Sintaxis

+ +
atributo = document.createAttribute(nombre)
+
+ +

Parametros

+ + + +

Valor que retorna

+ +

Un nodo {{domxref("Attr")}} nodo.

+ +

Excepciones

+ + + +

Ejemplo

+ +
var nodo = document.getElementById("div1");
+var a = document.createAttribute("miAtributo");
+a.value = "nuevoVal";
+nodo.setAttributeNode(a);
+console.log(nodo.getAttribute("miAtributo")); // "nuevoVal"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}}Comportamiento preciso con caracteres en mayuscula 
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Sin cambios
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Sin cambios
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad del buscador

+ + + +

{{Compat("api.Document.createAttribute")}}

+ +

Ver ademas

+ + diff --git a/files/es/web/api/document/createdocumentfragment/index.html b/files/es/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..5137778ee7 --- /dev/null +++ b/files/es/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,119 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +translation_of: Web/API/Document/createDocumentFragment +--- +
{{ ApiRef("DOM") }}
+ +
+ +

Crea un nuevo DocumentFragment vacio, dentro del cual un nodo del DOM puede ser adicionado para construir un nuevo arbol DOM fuera de pantalla.

+ +

Sintaxis

+ +
var fragment = document.createDocumentFragment();
+
+ +

Se crea un objeto DocumentFragment vacio, el cual queda listo para que pueda insertarseles nodos en el.

+ +

Notas de uso

+ +

DocumentFragment son Nodos del DOM que nunca forman parte del arbol DOM. El caso de uso mas comun es crear un document fragment, agregar elementos al document fragment y luego agregar dicho document fragment al arbol del DOM. En el arbol del DOM, el document fragment es remplazado por todos sus hijos.

+ +

Dado que el document fragment es generado en memoria y no como parte del arbol del DOM, agregar elementos al mismo no causan reflow (computo de la posicion y geometria de los elementos) en la pagina. Como consecuencia, usar document fragments usualmente resultan en mejor performance.

+ +

Tambien puede utilizarse el constructor {{domxref("documentFragment")}} para crear un nuevo fragmento:

+ +
let fragment = new DocumentFragment();
+ +

Ejemplo

+ +

Este ejemplo crea una lista de los principales navegadores web en un DocumentFragment, y luego adiciona el nuevo subarbol DOM al document para ser mostrado.

+ +

HTML

+ +
<ul id="ul">
+</ul>
+ +

JavaScript

+ +
var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+ +

Resultado

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte Basico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Especificaciónes

+ + + +

Vea También

+ + diff --git a/files/es/web/api/document/createelement/index.html b/files/es/web/api/document/createelement/index.html new file mode 100644 index 0000000000..cb7b3d175b --- /dev/null +++ b/files/es/web/api/document/createelement/index.html @@ -0,0 +1,180 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Documento + - Referencia + - metodo +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ +

En un documento HTML, el método Document.createElement() crea un elemento HTML especificado por su tagName, o un  {{domxref("HTMLUnknownElement")}} si su tagName no se reconoce. En un documento XUL, crea el elemento XUL especificado. En otros documentos, crea un elemento con un namespace URI null.

+ +

Para declarar el namespace URI del elemento, utiliza document.createElementNS().

+ +

Sintaxis

+ +
var element = document.createElement(tagName, [options]);
+
+ +

Parámetros

+ +
+
tagName
+
+ +

Cadena que especifica el tipo de elemento a crear. El {{domxref("Node.nodeName", "nodeName")}} del elemento creado se inicializa con el valor de tagName. No utilizar nombres reservados (como "html:a") con este método. Al ser invocado en un documento HTML, createElement() convierte tagName a minúsculas antes de crear el elemento. En Firefox, Opera, y Chrome, createElement(null) funciona como createElement("null").

+ +
+
options{{optional_inline}}
+
Un objeto opcional ElementCreationOptions que contiene una única propiedad llamada is, cuyo valor es el de la etiqueta name de un elemento personalizado definido previamente utilizando customElements.define(). Para compatibilidad con versiones anteriores de Elements specification, algunos navegadores podrían permitir pasar una cadena aquí en vez de un objeto, donde el valor de la cadena es la etiqueta name del elemento creado. Ver Extending native HTML elements para más información sobre como usar este parámetro.
+
El nuevo elemento recibirá el atributo cuyo valor es la etiqueta name del elemento personalizado. Los elementos personalizados son una característica experimental solo disponible en algunos navegadores.
+
+ +

Retorna

+ +

El nuevo Element.

+ +

Ejemplo

+ +

Crea un nuevo <div> y lo inserta antes del elemento con ID "div1".

+ +

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Trabajando con elementos||</title>
+</head>
+<body>
+  <div id="div1">El texto superior se ha creado dinámicamente.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // crea un nuevo div
+  // y añade contenido
+  var newDiv = document.createElement("div");
+  var newContent = document.createTextNode("Hola!¿Qué tal?");
+  newDiv.appendChild(newContent); //añade texto al div creado.
+
+  // añade el elemento creado y su contenido al DOM
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+ +

{{EmbedLiveSample("Example", 500, 50)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1][2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Parámetro options{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatGeckoDesktop(50)}}[4][5]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Desde Gecko 22.0 {{geckoRelease("22.0")}} createElement() no utiliza {{domxref("HTMLSpanElement")}} interface cuando el argumento es "bgsounds", "multicol", o "image".  En cambio, HTMLUnknownElement se utiliza para "bgsound" y "multicol" y {{domxref("HTMLElement")}} HTMLElement se utiliza para "image".

+ +

[2] La implementación en Gecko de createElement no cumple la especificación DOM para documentos XUL y XHTML: localName y namespaceURI no son inicializados como null en el elemento creado. Consúltese el {{ Bug(280692) }} para más información.

+ +

[3] En versiones anteriores de la especificación, este argumento era solamente una cadena cuyo valor era la etiqueta name del elemento personalizado. Por ejemplo: Podia recibir document.createElement("button", "mi-boton") en lugar de document.createElement("button", {id: "mi-boton"}). Por razones de compatibilidad, Chrome acepta ambas formas.

+ +

[4] Consultar [3] arriba: como Chrome, Firefox acepta una cadena en vez de un objeto en esta posición, pero solamente desde la versión 51 en adelante. En la versión 50, options debe ser un objeto.

+ +

[5] Para experimentar con elementos personalizados en Firefox, deben establecerse las preferencias dom.webcomponents.enabled y dom.webcomponents.customelements.enabled a true.

+ +

Notas de CSS Quantum

+ + + +

Ver también

+ + diff --git a/files/es/web/api/document/createelementns/index.html b/files/es/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..29571b0978 --- /dev/null +++ b/files/es/web/api/document/createelementns/index.html @@ -0,0 +1,168 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +translation_of: Web/API/Document/createElementNS +--- +
{{ApiRef("DOM")}}
+ +

Crea un elemento del DOM con el espacio de nombres URI y un nombre calificado.

+ +

Para crear un elemento sin especificar un espacio de nombre URI usa el método createElement.

+ +

Sintaxis

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+
+ +

Parámetros

+ +
+
namespaceURI
+
String que especifica el namespace URI a asociar con el elemento. La propiedad namespaceURI del elemento creado es inicializada con el valor del namespaceURI. Ver Namespace URIs válidos.
+
qualifiedName
+
String que especifica el tipo del elemento a ser creado. La propiedad nodeName del elemento creado es inicializada con el valor qualifiedName.
+
optionsOpcional
+
Un objeto opcional ElementCreationOptions que contiene una sola propiedad llamada is, cuyo valor es el nombre de la etiqueta para un elemento personalizado previamente definido usando customElements.define(). Para retro compatibilidad con versiones previas de la Especificación de Elementos Personalizados, algunos navegadores te permitirán pasar un String aquí en lugar de un Objeto, donde el valor del String es el nombre de la etiqueta del elemento personalizado. Ver Extendiendo elementos HTML nativos para más información sobre como usar este parámetro.
+
Al nuevo elemento le será dado un atributo is cuyo valor es el nombre de la etiqueta del elemento personalizado. Los elementos personalizados son una característica experimental disponible solo en algunos navegadores.
+
+ +

Valor de Retorno

+ +

El nuevo Elemento.

+ +

Namespace URIs válidos

+ + + +

Ejemplo

+ +

El código siguiente crea un elemento <div> nuevo en el namespace XHTML y lo agrega al elemento vbox. Aunque no es un documento XUL extremamente útil esto demuestra el uso de los elementos de dos namespaces distintos dentro de un solo documento:

+ +
<?xml version="1.0"?>
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Trabajando con elementos||"
+      onload="init()">
+
+<script type="text/javascript"><![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("Este es el texto que fue construido dinámicamente con createElementNS y createTextNode y luego insertado dentro del documento usando appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]></script>
+
+ <vbox id='ContainerBox' flex='1'>
+  <html:div>
+   El script en esta página agregará contenido dinámico debajo:
+  </html:div>
+ </vbox>
+
+</page>
+
+ +
+

El ejemplo dado arriba usa script en linea lo cúal no es recomendable en documentos XHTML. Este ejemplo en particular es un documento XUL con XHTML embedido, de cualquier forma la recomendación aplica.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
SoporteChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
argumento options {{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(50)}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
SoporteAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] En versiones previas de la especificación  el argumento fue solo un String cuyo valor fue el nombre de etiqueta del elemento personalizado. Por motivo de retro compatibilidad Chrome acepta ambas formas.

+ +

[2] Ver [1] arriba: Firefox al igual que Chrome acepta un string en lugar de un objeto, pero solo de la version 51 en adelante. En la version 50 options debe ser un objeto.

+ +

[3] Para experimentar con elementos personalizados en Firefox debes establecer las preferencias  dom.webcomponents.enabled y dom.webcomponents.customelements.enabled como true.

+ +

Ver también

+ + diff --git a/files/es/web/api/document/createrange/index.html b/files/es/web/api/document/createrange/index.html new file mode 100644 index 0000000000..8c0cc63391 --- /dev/null +++ b/files/es/web/api/document/createrange/index.html @@ -0,0 +1,42 @@ +--- +title: document.createRange +slug: Web/API/Document/createRange +tags: + - Rango + - Referencia_DOM_de_Gecko + - crear rango +translation_of: Web/API/Document/createRange +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

Retorna un nuevo objeto Rango.

+ +

Sintáxis

+ +
range = document.createRange();
+
+ +

En este ejemplo, range es el nuevo objeto rango creado.

+ +

Ejemplo

+ +
var range = document.createRange();
+range.setStart(startNode, startOffset);
+range.setEnd(endNode, endOffset);
+
+ +

Notas

+ +

Una vez que se ha creado un objeto Rango, se necesita configurar sus puntos límites antes de hacer uso de la mayoría de sus métodos.

+ +

Especificación

+ +

DOM Level 2 Range: DocumentRange.createRange

+ + + +
+ +

{{ languages( { "en": "en/DOM/document.createRange", "pl": "pl/DOM/document.createRange" } ) }}

diff --git a/files/es/web/api/document/createtextnode/index.html b/files/es/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..fc1b1488f4 --- /dev/null +++ b/files/es/web/api/document/createtextnode/index.html @@ -0,0 +1,78 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Documento + - Referencia + - createTextNode + - metodo +translation_of: Web/API/Document/createTextNode +--- +
{{APIRef("DOM")}}
+ +

Crea un nuevo nodo de texto. Este método puede ser usado para escapar caracteres HTML.

+ +

Sintaxis

+ +
var text = document.createTextNode(data);
+
+ + + +

Ejemplo

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('YES! ');">YES!</button>
+  <button onclick="addTextNode('NO! ');">NO!</button>
+  <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
+
+  <hr />
+
+  <p id="p1">First line of paragraph.</p>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-document-createtextnode', 'Document: createTextNode')}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Document.createTextNode")}}

diff --git a/files/es/web/api/document/defaultview/index.html b/files/es/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..e2b44cdd71 --- /dev/null +++ b/files/es/web/api/document/defaultview/index.html @@ -0,0 +1,35 @@ +--- +title: Document.defaultView +slug: Web/API/Document/defaultView +tags: + - API + - Document + - HTML DOM + - NeedsUpdate + - Property + - Reference +translation_of: Web/API/Document/defaultView +--- +
{{ ApiRef() }}
+ +

Resumen

+ +

En los navegadores devuelve el objeto window asociado con el document o null si no está disponible.

+ +

Sintaxis

+ +
var win = document.defaultView;
+ +

Esta propiedad es de solo lectura.

+ +

Notas

+ +

De acuerco con quirksmode, defaultView no está soportado en IE hasta su version 9.

+ +

Especificación

+ + diff --git a/files/es/web/api/document/designmode/index.html b/files/es/web/api/document/designmode/index.html new file mode 100644 index 0000000000..cf234abee9 --- /dev/null +++ b/files/es/web/api/document/designmode/index.html @@ -0,0 +1,56 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - Documento + - HTML DOM + - Propiedad + - Referencia + - editor +translation_of: Web/API/Document/designMode +--- +
{{ ApiRef() }}
+ +

document.designMode controla la posibilidad de editar un documento entero. Los valores válidos son "on" y "off". De acuerdo a las especificaciones,  el valor predeterminado de esta propiedad es "off". Firefox sigue este estándar. El valor predeterminado de versiones anteriores de Chrome y IE es "inherit". En IE6-10, el valor se escribe con mayúscula.

+ +

Sintaxis

+ +
var mode = document.designMode;
+document.designMode = "on" || "off";
+ +

Ejemplo

+ +

Hacer un documento {{HTMLElement("iframe")}} editable:

+ +
iframeNode.contentDocument.designMode = "on";
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}{{Spec2('HTML WHATWG')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +

{{Compat("api.Document.designMode")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/document/dir/index.html b/files/es/web/api/document/dir/index.html new file mode 100644 index 0000000000..61c8a2d637 --- /dev/null +++ b/files/es/web/api/document/dir/index.html @@ -0,0 +1,76 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +translation_of: Web/API/Document/dir +--- +

{{ApiRef("")}}{{non-standard_header}}

+ +

La propiedad Document.dir es una {{domxref("DOMString")}} que representa la dirección del texto del documento, ya sea de izquierda a derecha o de derecha a izquierda, siendo la primera el valor por defecto. Sus valores posibles son rtl (Right To Left) o ltr (Left To Right).

+ +

Sintáxis

+ +
dirStr = document.dir;
+document.dir = dirStr;
+
+ +

Especificaciones

+ +

HTML5 WHATWG

+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}} [1]{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Antes de Firefox 23, la propiedad Document.dir devolvía "ltr" independientemente del valor de su elemento {{htmlelement("html")}} raíz.

+ +

Véase también

+ + diff --git a/files/es/web/api/document/doctype/index.html b/files/es/web/api/document/doctype/index.html new file mode 100644 index 0000000000..145ca57300 --- /dev/null +++ b/files/es/web/api/document/doctype/index.html @@ -0,0 +1,65 @@ +--- +title: Document.doctype +slug: Web/API/Document/doctype +tags: + - API + - DOCTYPE + - DOM + - Document + - Propiedad + - Referencia +translation_of: Web/API/Document/doctype +--- +
{{ApiRef("DOM")}}
+ +

Devuelve la Declaración de tipo de documento (Document Type Declaration (DTD)), asociada al documento actual. El objeto devuelto implementa la interfaz {{domxref("DocumentType")}}. Utilice {{domxref("DOMImplementation.createDocumentType()")}} para crear un DocumentType.

+ +

Sintaxis

+ +
doctype = document.doctype;
+
+ + + +

Ejemplo

+ +
var doctypeObj = document.doctype;
+
+console.log(
+  "doctypeObj.name: "           + doctypeObj.name            + "\n" +
+  "doctypeObj.internalSubset: " + doctypeObj.internalSubset  + "\n" +
+  "doctypeObj.publicId: "       + doctypeObj.publicId        + "\n" +
+  "doctypeObj.systemId: "       + doctypeObj.systemId
+);
+ +

Notas

+ +

La propiedad devuelve null si no hay DTD asociada al documento actual.

+ +

El nivel 2 de DOM no soporta la edición de la declaración de tipo de documento.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM3 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM3 Core")}}Cambiado el valor de retorno para documentos HTML sin el elemento {{HTMLElement("html")}}. Define que el tipo de documento puede ser modificado.
{{SpecName("DOM2 Core", "core.html#ID-B63ED1A31", "Document.doctype")}}{{Spec2("DOM2 Core")}}Definición inicial
diff --git a/files/es/web/api/document/documentelement/index.html b/files/es/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..30453050f7 --- /dev/null +++ b/files/es/web/api/document/documentelement/index.html @@ -0,0 +1,42 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/documentElement +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Solo-lectura

+ +

Devuelve el Element que es el elemento raíz de document (por ejemplo, devuelve el elemento <html> en los documentos HTML).

+ +

Sintaxis

+ +
varelement = document.documentElement;
+
+ +

Ejemplo

+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+// firstTier el la NodeList de los hijos directos del elemento raízof the direct children of the root element
+for (var i = 0; i < firstTier.length; i++) {
+   // hacer algo con cada uno de los hijos directos del elemento raíz
+   // como firstTier[i]
+}
+
+ +

Notas

+ +

Esta propiedad es de sólo-lectura, facilitada para obtener el elemento raíz de cualquier documento.

+ +

Los documentos HTML contienen normalmente un único hijo directo, <html>, quizá con una declaración DOCTYPE antes que él. Los documento XML contienen a menudo, múltiples hijos: el elemento raíz, la declaración DOCTYPE y processing instructions.

+ +

Por tanto, deberías usar document.documentElement en lugar de {{ Domxref("document.firstChild") }} para obtener el elemento raíz.

+ +

Especificación

+ +

DOM Level 2 Core: Document.documentElement

diff --git a/files/es/web/api/document/documenturi/index.html b/files/es/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..4ff365a258 --- /dev/null +++ b/files/es/web/api/document/documenturi/index.html @@ -0,0 +1,121 @@ +--- +title: Document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - ContenidoNecesario + - DOM + - EjemploNecesario + - Propiedad + - Referencia + - UbicaciónDocumento +translation_of: Web/API/Document/documentURI +--- +
{{ApiRef("DOM")}}
+ +

La propiedad documentURI de la interfaz del documento ({{domxref("Document")}}) devuelve la ubicación del documento como un string.

+ +

Originalmente DOM3 fue definido como un atributo de lectura/escritura. En DOM4 se especifica unicamente como de lectura.

+ +

Sintaxis

+ +
var string = document.documentURI;
+
+ +

Notas

+ +

Los documentos HTML tienen una propiedad {{domxref("document.URL")}} la cual devuelve el mismo valor (ubicación del documento). A diferencia de URL, documentURI está disponible para todos los tipos de documentos web.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM4', '#dom-document-documenturi','documentURI')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}{{Spec2('DOM3 Core')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Funcionamiento DOM3{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Funcionamiento DOM4{{CompatChrome(43.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Funcionamiento DOM3{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Funcionamiento DOM4{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
diff --git a/files/es/web/api/document/documenturiobject/index.html b/files/es/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..fe28ca825f --- /dev/null +++ b/files/es/web/api/document/documenturiobject/index.html @@ -0,0 +1,39 @@ +--- +title: document.documentURIObject +slug: Web/API/Document/documentURIObject +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/documentURIObject +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Read-only

+ +

Devuelve un objeto {{ Interface("nsIURI") }} que representa la URI de document.

+ +

Esto sólo funciona para programas con privilegios (UniversalXPConnect) incluidas las extensiones. Para páginas web, esta propiedad no tiene significado especial y puede usarse de igual forma que cualquier otra propiedad del usuario.

+ +

El código con privilegios, debe tener cuidado de no leer o escribir esta propiedad en un objeto no controlado (e.g. on a wrappedJSObject of an XPCNativeWrapper). Ver {{ Bug(324464) }}para más detalles.

+ +

Sintaxis

+ +
varuri =doc.documentURIObject;
+
+ +

Ejemplo

+ +
// Comprueba que el esquema URI de la pestaña de Firefox es 'http',
+// asumiendo que este código se ejecuta dentro de browser.xul
+var uriObj = content.document.documentURIObject;
+var uriPort = uriObj.port;
+
+if (uriObj.schemeIs('http')) {
+  ...
+}
+
+ +

Especificación

+ +

No forma parte de ninguna especificación W3C.

diff --git a/files/es/web/api/document/dragover_event/index.html b/files/es/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..c4fe204135 --- /dev/null +++ b/files/es/web/api/document/dragover_event/index.html @@ -0,0 +1,338 @@ +--- +title: dragover +slug: Web/API/Document/dragover_event +translation_of: Web/API/Document/dragover_event +--- +
{{APIRef}}
+ +

El evento dragover se activa cuando un elemento o texto se arrastra a un objetivo válido (cada pocos cientos de milisegundos).

+ +

 

+ +

El evento se activa en la caída al objetivo.

+ +

General info

+ + + + + + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Target objects{{domxref("Document")}}, {{domxref("Element")}}
Interface{{domxref("DragEvent")}}
Default ActionReset the current drag operation to "none".
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetEl elemento que se encontraba bajo el elemento que está siendo arrastrado.
type {{readonlyInline}}DOMStringEl tipo de evento.
bubbles {{readonlyInline}}BooleanSi el evento se propaga normalmente o no.
cancelable {{readonlyInline}}BooleanSi el evento es cancelable o no.
view {{readonlyInline}}WindowProxydocument.defaultView (window del documento)
detail {{readonlyInline}}long (float)0.
dataTransferDataTransferLos datos que subyacen a la operación de drag-and-drop , conocidas como drag data store. Modo protegido.
currentTarget {{readonlyInline}}EventTargetEl nodo que tiene adjunto el detector de eventos.
relatedTarget {{readonlyInline}}EventTargetPara los eventos de mouseover, mouseout, mouseenter y mouseleave:El objetivo del evento complementario (el objetivo mouseleave en el caso del evento mouseenter). null sino.
screenX {{readonlyInline}}longLa coordinada X del puntro del ratón en coordenadas globales (de pantalla).
screenY {{readonlyInline}}longLa coordinada Y del puntero del ratón en coordenadas globales (en pantalla).
clientX {{readonlyInline}}longLa coordinada X del puntro del ratón en coordenadas locales (DOM content).
clientY {{readonlyInline}}longLa coordinada Y del puntro del ratón en coordenadas locales (DOM content).
button {{readonlyInline}}unsigned short +

El número de botón que se preionó cuando el ecento fue ectivado: Botón izquierdo=0, botón del medio=1(en caso de que esté presente), botón derecho=2. Para ratones configurados para zurdos donde laas acciones están configuradas al contrario los valores se leerán de derecha a izquierda.

+
buttons {{readonlyInline}}unsigned short +

Los botones presionados cuando el evento de ratón se activa: botón izquierdo=1,botón derecho=2, botón medio (rueda)=4, 4º botón (tipo "hacia atrás del navegador"=8, 5º botón ("tipo hacia delante en el navegador"=16. Si dos o más botones se presionan, devolverá la suma lógica de los valores. Ej: si se presionan los botones izquierdo y derecho, devolverá 3 (=1|2). Más información.

+
mozPressure {{readonlyInline}}float +

La cantidad de presión aplicada en dispositivos táctiles cuando se genera el evento; Este valor tiene un rango entre 0.0 (mínima presión) y 1.0 (máxima presión)

+
ctrlKey {{readonlyInline}}booleantrue si la tecla control estaba pulsada cuando el evento se lanzó false en cualquier otro caso.
shiftKey {{readonlyInline}}booleantrue si la tecla shift estaba pulsada cuando el evento de lanzó. false en otro caso.
altKey {{readonlyInline}}booleantrue si la tecla alt estaba pulsada cuando el evento se lanzó. false si no.
metaKey {{readonlyInline}}booleantrue si la tecla meta estaba presionada cuando el evento se disparó. false si no.
+ +

Example

+ +
<div class="dropzone">
+  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+    This div is draggable
+  </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* events fired on the draggable target */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // store a ref. on the dragged elem
+      dragged = event.target;
+      // make it half transparent
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // reset the transparency
+      event.target.style.opacity = "";
+  }, false);
+
+  /* events fired on the drop targets */
+  document.addEventListener("dragover", function( event ) {
+      // prevent default to allow drop
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // highlight potential drop target when the draggable element enters it
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // reset background of potential drop target when the draggable element leaves it
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // prevent default action (open as link for some elements)
+      event.preventDefault();
+      // move dragged elem to the selected drop target
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}{{Spec2("HTML5.1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/es/web/api/document/embeds/index.html b/files/es/web/api/document/embeds/index.html new file mode 100644 index 0000000000..865efdb2fd --- /dev/null +++ b/files/es/web/api/document/embeds/index.html @@ -0,0 +1,48 @@ +--- +title: Document.embeds +slug: Web/API/Document/embeds +tags: + - API + - Documento + - Ejemplo + - HTML DOM + - Propiedad +translation_of: Web/API/Document/embeds +--- +
{{ApiRef}}
+ +

embeds es una propiedad de sólo lectura de la interfaz de {{domxref("Document")}}. Devuelve una lista con los elementos {{htmlelement("object")}} incrustados dentro del documento actual.

+ +

Sintaxis

+ +
nodeList = document.embeds
+
+ +

Valor

+ +

Una {{domxref("HTMLCollection")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}{{ Spec2('HTML WHATWG') }}
+ +

Compatibilidad con Navegadores

+ + + +
{{Compat("api.Document.embeds")}}
diff --git a/files/es/web/api/document/evaluate/index.html b/files/es/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..67bc5d432e --- /dev/null +++ b/files/es/web/api/document/evaluate/index.html @@ -0,0 +1,211 @@ +--- +title: Document.evaluate() +slug: Web/API/Document/evaluate +translation_of: Web/API/Document/evaluate +--- +
{{ ApiRef("DOM") }}
+ +

Retorna XPathResult basado en una expresión XPath y otros parametros dados .

+ +

Sintaxis

+ +
var xpathResult = document.evaluate(
+ xpathExpression,
+ contextNode,
+ namespaceResolver,
+ resultType,
+ result
+);
+ + + +

Ejemplo

+ +
var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null);
+/* Search the document for all h2 elements.
+ * The result will likely be an unordered node iterator. */
+var thisHeading = headings.iterateNext();
+var alertText = "Level 2 headings in this document are:\n";
+while (thisHeading) {
+  alertText += thisHeading.textContent + "\n";
+  thisHeading = headings.iterateNext();
+}
+alert(alertText); // Alerts the text of all h2 elements
+
+ +

Note, in the above example, a more verbose XPath is preferred over common shortcuts such as //h2. Generally, more specific XPath selectors as in the above example usually gives a significant performance improvement, especially on very large documents. This is because the evaluation of the query spends does not waste time visiting unnecessary nodes. Using // is generally slow as it visits every node from the root and all subnodes looking for possible matches.

+ +

Further optimization can be achieved by careful use of the context parameter. For example, if you know the content you are looking for is somewhere inside the body tag, you can use this:

+ +
document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null);
+
+ +

Notice in the above document.body has been used as the context instead of document so the XPath starts from the body element. (In this example, the "." is important to indicate that the querying should start from the context node, document.body. If the "." was left out (leaving //h2) the query would start from the root node (html) which would be more wasteful.)

+ +

See Introduction to using XPath in JavaScript for more information.

+ +

Nota

+ + + +

Tipos de resultados

+ +

(Merge with Template:XPathResultConstants?

+ +

These are supported values for the resultType parameter of the evaluate method:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Result TypeValueDescription
ANY_TYPE0Whatever type naturally results from the given expression.
NUMBER_TYPE1A result set containing a single number. Useful, for example, in an XPath expression using the count() function.
STRING_TYPE2A result set containing a single string.
BOOLEAN_TYPE3A result set containing a single boolean value. Useful, for example, an an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result set containing the first node in the document that matches the expression.
+ +

Results of NODE_ITERATOR types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.

+ +

Results of NODE_SNAPSHOT types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}{{Spec2("DOM3 XPath")}}Initial specification
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
XPath 1.0{{CompatChrome(1.0)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.8)}}{{CompatNo}}{{CompatOpera(9.0)}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
XPath 1.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implemented in WebKit 5.0 (531) or earlier.

+ +

Ver también

+ + diff --git a/files/es/web/api/document/execcommand/index.html b/files/es/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..2102597c22 --- /dev/null +++ b/files/es/web/api/document/execcommand/index.html @@ -0,0 +1,288 @@ +--- +title: Document.execCommand() +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - Método(2) + - NecesitaEjemplo + - Referencia + - editor +translation_of: Web/API/Document/execCommand +--- +
{{ApiRef("DOM")}}
+ +

Resumen

+ +

Cuando un documento HTML se ha cambiado a designMode, el objeto de documento expone el método execCommand lo que permite ejecutar comandos para manipular el contenido de la región editable. La mayoría de los comandos afectan a la selección de documento (negrita, cursiva, etc.), mientras que otros insertar nuevos elementos (añadiendo un enlace) o afectan a toda una línea (sangría). Al usar contentEditable, la llamada a execCommand afectará el elemento editable activo actual.

+ +

Sintaxis

+ +
execCommand(aCommandName, aShowDefaultUI, aValueArgument)
+
+ +

Parámetros

+ +
+
aCommandName
+
Una {{domxref("DOMString")}} que especifica el nombre del comando a ejecutar. Vea {{anch("Comandos")}} para una lista de posibles comandos.
+
aShowDefaultUI
+
Un {{jsxref("Boolean")}} que indica si la interfaz de usuario por defecto se debe mostrar. Esto no se ha implementado en Mozilla.
+
aValueArgument
+
Una {{domxref("DOMString")}} representando algunos comandos (como insertImage) requiere un argumento valor extra (url de la imagen). Pasar un argumento de null si no se necesita ningún argumento.
+
+ +

Comandos

+ +
+
backColor
+
 Cambia el color de fondo del documento. En el modo styleWithCss, afecta el color de fondo del bloque que contiene. Esto requiere una cadena con el valor del color de fondo que se pasa como un valor de argumento. (Internet Explorer utiliza esta opción para definir el color de fondo del texto.)
+
bold
+
Pone las negritas o las quita para la selección o en el punto de inserción. (Internet Explorer utiliza la etiqueta STRONG en lugar de B.)
+
contentReadOnly
+
Hace que el documento de contenido, ya sea de sólo lectura o editable. Esto requiere un booleano verdadero / falso que se pasa como un valor de argumento. (No es compatible con Internet Explorer.)
+
copy
+
Copia la selección actual en el portapapeles. Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. Vea
+
createLink
+
Crea un vínculo de anclaje a partir de la selección, sólo si hay una selección. Esto requiere la cadena HREF URI que se pasa como un argumento de valor. El URI debe contener al menos un solo carácter, el cual puede ser un espacio en blanco. (Internet Explorer creará un enlace con un nulo valor URI.)
+
cut
+
Corta la selección y lo copia en el portapapeles actual. Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. Vea
+
decreaseFontSize
+
Añade una etiqueta SMALL alrededor de la selección o en el punto de inserción. (No es compatible con Internet Explorer.)
+
delete
+
Elimina la selección actual.
+
enableInlineTableEditing
+
Activa o desactiva la fila de la tabla y los controles de inserción y supresión de columna. (No es compatible con Internet Explorer.)
+
enableObjectResizing
+
Activa o desactiva los controladores de tamaño en imágenes y otros objetos de tamaño variable. (No es compatible con Internet Explorer.)
+
fontName
+
Cambia el nombre de la fuente para la selección o en el punto de inserción. Esto requiere una cadena de nombre de la fuente ("Arial", por ejemplo) que se pasa como un valor de argumento.
+
fontSize
+
Cambia el tamaño de fuente para la selección o en el punto de inserción. Esto requiere un tamaño de fuente HTML (1-7) que se pasa como un valor de argumento.
+
foreColor
+
Cambia un color de fuente para la selección o en el punto de inserción. Esto requiere una cadena de valor de color que se pasa como un valor de argumento.
+
formatBlock
+
Añade una etiqueta HTML de estilo bloque alrededor de la línea que contiene la selección actual, reemplazando el elemento de bloque que contiene la línea si existe (en Firefox, BLOCKQUOTE es la excepción - que envolverá cualquier elemento de bloque que contiene). Requiere una cadena de etiqueta-nombre que se pasa como un argumento de valor. Prácticamente todas las etiquetas de estilo bloque se pueden utilizar (por ejemplo. "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer sólo admite etiquetas de título H1 - H6, dirección y PRE, que también debe incluir los delimitadores de etiquetas <>, como "<H1>".)
+
forwardDelete
+
Elimina el character delante de la posición del cursor cursor.  Es lo mismo que pulsar la tecla suprimir.
+
heading
+
Añade una etiqueta de encabezado en torno a una selección, o la línea en el punto de inserción. Requiere la cadena de nombre de etiqueta que se pasa como un valor de argumento (es decir, "H1", "H6"). (No es compatible con Internet Explorer y Safari.)
+
hiliteColor
+
Cambia el color de fondo para la selección o el punto de inserción. Requiere una cadena de valores de color que se pasa como un valor de argumento. UseCSS debe estar encendido para que esto funcione. (No es compatible con Internet Explorer.)
+
increaseFontSize
+
Añade una etiqueta BIG alrededor de la selección o en el punto de inserción. (No es compatible con Internet Explorer.)
+
indent
+
Indenta la línea que contiene el punto de selección o inserción. En Firefox, si la selección abarca varias líneas en los diferentes niveles de indentación serán indentadas sólo las líneas menos indentadas en la selección.
+
insertBrOnReturn
+
Controla si la tecla Intro inserta una etiqueta br o divide el elemento de bloque actual en dos. (No es compatible con Internet Explorer.)
+
insertHorizontalRule
+
 Inserta una regla horizontal en el punto de inserción (borra la selección).
+
insertHTML
+
Inserta una cadena HTML en el punto de inserción (borra la selección). Requiere una cadena HTML válido que se ha pasado como un valor de argumento. (No es compatible con Internet Explorer.)
+
insertImage
+
Inserta una imagen en el punto de inserción (borra la selección). Requiere la cadena de imagen SRC URI que se pasa como un argumento de valor. El URI debe contener al menos un solo carácter, que puede ser un espacio en blanco. (Internet Explorer creará un enlace con un nulo valor URI.)
+
insertOrderedList
+
Crea una lista ordenada con números para la selección o en el punto de inserción.
+
insertUnorderedList
+
Crea una lista desordenada con viñetas para la selección o en el punto de inserción.
+
insertParagraph
+
  Inserta un párrafo en torno a la selección o la línea actual. (Internet Explorer inserta un párrafo en el punto de inserción y elimina la selección.)
+
insertText
+
Inserta el texto plano expedido en el punto de inserción (borra la selección).
+
italic
+
Alterna cursiva para la selección o el punto de inserción. (Internet Explorer utiliza la etiqueta de EM en lugar de I.)
+
justifyCenter
+
 Centra el punto de selección o inserción.
+
justifyFull
+
Justifica el punto de selección o inserción.
+
justifyLeft
+
Justifica la selección o inserción punto a la izquierda.
+
justifyRight
+
Justifica la selección o el punto de inserción a la derecha.
+
outdent
+
Anula la sangría de la línea que contiene la selección o el punto de inserción.
+
paste
+
Pega el contenido del portapapeles en el punto de inserción (reemplaza la selección actual). Capacidad del Portapapeles debe estar habilitado en el archivo de preferencias user.js. Ver
+
redo
+
Rehace el anterior comando deshecho.
+
removeFormat
+
Quita todo el formato de la selección actual.
+
selectAll
+
Selecciona todo el contenido de la región editable.
+
strikeThrough
+
Alterna tachado para la selección o el punto de inserción.
+
subscript
+
Alterna subíndice para la selección o el punto de inserción.
+
superscript
+
Alterna exponente para la selección o el punto de inserción.
+
underline
+
Alterna subrayado para la selección o el punto de inserción.
+
undo
+
Deshace el último comando ejecutado.
+
unlink
+
 Elimina la etiqueta de ancla de un enlace ancla seleccionado.
+
useCSS {{ Deprecated_inline() }}
+
Alterna el uso de etiquetas HTML o CSS para el marcado generado. Requiere un booleano verdadero / falso como valor del argumento. NOTA: Este argumento es lógicamente hacia atrás (es decir, si se usa falso a usar CSS, entonces es verdadero a usar HTML). (No compatible con Internet Explorer.) Esto ha quedado obsoleto; utilice el comando styleWithCSS en su lugar.
+
styleWithCSS
+
Reemplaza el comando useCSS; el argumento funciona como se esperaba, es decir, si es verdadero modifica / genera atributos de estilo en el marcado, falso genera elementos de formato.
+
+ +

Ejemplo

+ +

(Este artículo está actualmente incompleto y carece de un ejemplo.)

+ +

Compatibilidad del navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
insertBrOnReturn{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+ +

Consulte la Scribe's "Browser Inconsistencies" documentation para obtener una lista de los muchos errores del navegador relacionadas con document.execCommand.

+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML Editing','#execcommand()','execCommand')}}{{Spec2('HTML Editing')}} 
+ +

Vea también

+ + diff --git a/files/es/web/api/document/exitfullscreen/index.html b/files/es/web/api/document/exitfullscreen/index.html new file mode 100644 index 0000000000..cd90147d82 --- /dev/null +++ b/files/es/web/api/document/exitfullscreen/index.html @@ -0,0 +1,75 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +translation_of: Web/API/Document/exitFullscreen +--- +
{{ApiRef("Fullscreen API")}}
+ +

El método exitFullscreen() de {{domxref("Document")}} solicita que el elemento de este documento que se presenta actualmente en modo de pantalla completa se retire del modo de pantalla completa, restaurando el estado anterior de la pantalla. Esto generalmente revierte los efectos de una llamada previa a {{domxref("Element.requestFullscreen()")}}.

+ +

La excepción es si otro elemento ya estaba en modo de pantalla completa cuando el elemento actual se colocó en modo de pantalla completa usando requestFullscreen(). En ese caso, el elemento de pantalla completa anterior se restaura al estado de pantalla completa. En esencia, se mantiene un {{interwiki("wikipedia", "Stack_(abstract_data_type)", "stack")}} de elementos de pantalla completa.

+ +

Sintaxis

+ +
exitPromise = document.exitFullscreen();
+
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Un {{jsxref("Promise")}} que se resuelve una vez que el {{Glossary("user agent")}} a terminado de salir del modo de pantalla completa. Si se produce un error al intentar salir del modo de pantalla completa, se llama al controlador catch() para la promesa.

+ +

Ejemplo

+ +

Este ejemplo hace que el documento actual entre y salga de una presentación a pantalla completa cada vez que se hace clic dentro del botón del mouse.

+ +
document.onclick = function (event) {
+  if (document.fullscreenElement) {
+    document.exitFullscreen()
+  } else {
+    document.documentElement.requestFullscreen()
+  }
+};
+ +
+

Nota: Para un ejemplo más completo, vea {{SectionOnPage("/en-US/docs/Web/API/Element/requestFullScreen", "Example")}}.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}{{Spec2("Fullscreen")}}Definición inicial
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.Document.exitFullscreen")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/document/getelementbyid/index.html b/files/es/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..1232df45b4 --- /dev/null +++ b/files/es/web/api/document/getelementbyid/index.html @@ -0,0 +1,200 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Documento + - Elementos + - Referencia + - Web + - id + - metodo +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Devuelve una referencia al elemento por su ID.

+ +

Sintaxis

+ +
elemento = document.getElementById(id);
+
+ +

Parámetros

+ +
+
id
+
Es una cadena sensible a mayúsculas referida al ID único del elemento buscado.
+
+ +

Valor Retornado

+ +
+
element
+
Es una referencia a un objeto {{domxref("Element")}}, o null si un elemento con el ID especificado no se encuentra en el documento.
+
+

Ejemplo

+ +

HTML

+ + 
<html>
+<head>
+   <title>Ejemplo getElementById</title>
+</head>
+<body>
+   <p id="para">Cualquier texto acá</p>
+   <button onclick="changeColor('blue');">Azul</button>
+   <button onclick="changeColor('red');">Rojo</button>
+</body>
+</html>
+
+ +

JavaScript

+ + 
function changeColor(newColor) {
+   var elem = document.getElementById('para');
+   elem.style.color = newColor;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 250, 100)}}

+
+
+ +

Notas

+ +

Los usuarios nuevos deberían notar que escribir en mayúsculas 'Id' en el nombre de este método debe ser corregida para que el código sea válido - 'getElementByID' no funcionará a pesar de que parezca natural.

+ +

A diferencia de otros métodos similares, getElementById sólo está disponible como un método del objeto global document, y no se encuentra disponible como un método en todos los objetos  del DOM. Como los valores ID deben ser únicos a traves del documento, no existe necesidad para versiones "locales" de la función.

+ +

Ejemplo

+ +
<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Documento</title>
+</head>
+<body>
+    <div id="parent-id">
+        <p>Hola Mundo 1</p>
+        <p id="test1">Hola Mundo 2</p>
+        <p>Hola palabra 3</p>
+        <p>Hola palabra 4</p>
+    </div>
+    <script>
+        var parentDOM = document.getElementById('parent-id');
+        var test1=parentDOM.getElementById('test1');
+        //lanza error
+        //Uncaught TypeError: parentDOM.getElementById is not a function
+    </script>
+</body>
+</html>
+ +

Si no existe un elemento con la id solicitada, esta función devuelve null. Note que el parámetro id es sensible a mayúsculas, así que document.getElementById("Main") devolverá null dentro del elemento <div id="main"> porque "M" y "m" son diferentes para los propósitos de este método.

+ +

Elementos que no se encuentren en el documento no serán buscados por getElementById(). Cuando se cree un elemento y se le asigne un ID, debe insertar el elemento dentro del árbol del documento con {{domxref("Node.insertBefore()")}} u otro método similar antes de que se pueda acceder a el con getElementById():

+ +
+
var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el será null!
+
+ +

Documentos no-HTML. La implementación de DOM debe tener información que diga que atributos son del tipo ID. Los atributos con el nombre "id" son son del tipo ID a menos que se los defina en el DTD del documento. El atributo id es definido para ser del tipo ID en los casos comunes de XHTML, XUL,  y otros. Las implementaciones que no sepan si los atributos son o no del tipo ID se espera que retornen null.

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}{{Spec2('DOM1')}}Definición inicial para la interfase
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop(1.0) }}5.57.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile(1.0) }}6.06.01.0
+
+ +

Ver también

+ + +
diff --git a/files/es/web/api/document/getelementsbyclassname/index.html b/files/es/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..b3a7179e4d --- /dev/null +++ b/files/es/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,96 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Retorna un objecto similar a un array de los elementos hijos que tengan todos los nombres de clase indicados. Cuando es llamado sobre el objeto document , la busqueda se realiza en todo el document, incluido el nodo raíz. También puedes llamar {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} sobre cualquier elemento; en ese caso retornara sólo los elementos hijos del elemento raíz indicado que contengan los nombres de clase indicados.

+ +

Sintaxis

+ +
var elementos = document.getElementsByClassName(nombres); // ó :
+var elementos = elementoRaiz.getElementsByClassName(nombres);
+ + + +

Ejemplos

+ +

Obtener todos los elementos de la clase 'prueba'

+ +
document.getElementsByClassName('prueba');
+ +

Obtener todos los elementos que tengan al mismo tiempo las clases 'rojo' y 'prueba'

+ +
document.getElementsByClassName('rojo prueba');
+ +

Obtener todos los elementos que tengan la clase 'prueba' y que estén dentro de un elemento de ID 'principal'

+ +
document.getElementById('principal').getElementsByClassName('prueba');
+ +

También podemos usar los metodos de Array.prototype en cualquier {{ domxref("HTMLCollection") }} pasando el HTMLCollection como el valor this del método. Aquí buscaremos todos los elementos div de la clase 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}3.09.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Especifiación

+ + diff --git a/files/es/web/api/document/getelementsbyname/index.html b/files/es/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..50350fe0ec --- /dev/null +++ b/files/es/web/api/document/getelementsbyname/index.html @@ -0,0 +1,81 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +translation_of: Web/API/Document/getElementsByName +--- +
{{APIRef("DOM")}}
+ +

Returns a nodelist collection with a given {{domxref("element.name","name")}} in the (X)HTML document.

+ +

Sintaxis

+ +
elements = document.getElementsByName(name)
+
+ + + +

Ejemplo

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+ ...
+</head>
+
+<body>
+<form name="up"><input type="text"></form>
+<div name="down"><input type="text"></div>
+
+<script>
+var up_forms = document.getElementsByName("up");
+console.log(up_forms[0].tagName); // returns "FORM"
+</script>
+</body>
+</html>
+
+ +

Notas

+ +

El atributo name es solamente aplicable al documento (X)HTML. El método retorna una colección existente de {{domxref("NodeList")}} que contiene todos los elementos con el valor dado para el atributo name, tanto {{htmlelement("meta")}} o {{htmlelement("object")}} o en caso que name sea colocado en elementos que no soportan un atributo de atributo del todo.

+ +

El método getElementsByName trabaja de diferente manera en diferentes navegadires. En IE < 10, el método getElementsByName() tambipen retornará elementos que tienen un atributo id con el valor especificado. Entonces, debería tener cuidado de no usar el mismo string como name y ID.

+ +

Especificaciones

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificacionesestadoComentario
{{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}{{ Spec2('HTML WHATWG') }} 
{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}{{Spec2("DOM2 HTML")}}Initial definition
+ +

Mira también

+ + diff --git a/files/es/web/api/document/getelementsbytagname/index.html b/files/es/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..7be48858c0 --- /dev/null +++ b/files/es/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,104 @@ +--- +title: document.getElementsByTagName +slug: Web/API/Document/getElementsByTagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/getElementsByTagName +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento, incluyendo el nodo raíz.

+ +

Sintaxis

+ +
elements = document.getElementsByTagName(name)
+
+ + + +

Ejemplo

+ +

En el siguiente ejemplo, getElementsByTagName empieza por el elemento padre y busca hacia abajo recurrentemente a lo largo de todo el DOM por ese elemento padre, buscando por hijos que cumplan con el criterio: nombre = name.

+ +

Ten en cuenta que cuando el nodo en el que se invoca getElementsByTagName, no es el nodo document, en realidad se está usando el método element.getElementsByTagName.

+ +
<html>
+
+<head>
+<title>ejemplo de getElementsByTagName</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagName("p");
+
+  var num = allParas.length;
+
+  alert("Hay " + num + " <p> elementos en este documento");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagName("p");
+
+  var num = div1Paras.length;
+
+  alert("Hay " + num + " <p> elementos en el elemento div1");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagName("p");
+
+  var num = div2Paras.length;
+
+  alert("Hay " + num + " <p> elementos en el elemento div2");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Algo de texto</p>
+<p>Algo de texto</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Algo de texto en div1</p>
+    <p>Algo de texto en div1</p>
+    <p>Algo de texto en div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Algo de texto en div2</p>
+    <p>Algo de texto en div2</p>
+    </div>
+  </div>
+
+<p>Algo de texto</p>
+<p>Algo de texto</p>
+
+<button onclick="getAllParaElems();">
+ muestra todos los elementos p en el documento</button><br />
+
+<button onclick="div1ParaElems();">
+ muestra todos los elementos p en div1</button><br />
+
+<button onclick="div2ParaElems();">
+ muestra todos los elementos p en div2</button>
+
+</body>
+</html>
+
+ +

Especificación

+ +

DOM Level 2 Core: Document.getElementsByTagName

diff --git a/files/es/web/api/document/getelementsbytagnamens/index.html b/files/es/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..d97657647b --- /dev/null +++ b/files/es/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,107 @@ +--- +title: document.getElementsByTagNameNS +slug: Web/API/Document/getElementsByTagNameNS +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/getElementsByTagNameNS +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

Devuelve una lista de elementos cuyo nombre pertenece a un determinado 'namespace'. La búsqueda se realiza en todo el documento, incluyendo el elemento raíz.

+ +

Sintaxis

+ +
elements = document.getElementsByTagNameNS(namespace,name)
+
+ + + +

Ejemplo

+ +

En el siguiente ejemplo, getElementsByTagNameNS comienza por un elemento padre determinado y busca recurrentemente, hacia abajo, por los elementos que tienen el parámetro name que concuerda.

+ +

Es importante tener en cuenta que cuando el nodo en el que se invoca getElementsByTagName, no es el nodo document, en realidad estamos usando el método element.getElementsByTagNameNS.

+ +

Para usar el siguiente ejemplo, copia y pega en un documento con la extensión xhtml.

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>ejemplo de getElementsByTagNameNS</title>
+
+<script type="text/javascript">
+
+function getAllParaElems()
+{
+  var allParas = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = allParas.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en este documento");
+}
+
+
+function div1ParaElems()
+{
+  var div1 = document.getElementById("div1")
+  var div1Paras = div1.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div1Paras.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en el elemento div1");
+}
+
+
+function div2ParaElems()
+{
+  var div2 = document.getElementById("div2")
+  var div2Paras = div2.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
+
+  var num = div2Paras.length;
+
+  alert("Hay " + num + " &lt;p&gt; elementos en el elemento div2");
+}
+
+</script>
+</head>
+
+<body style="border: solid green 3px">
+<p>Algo de texto exterior</p>
+<p>Algo de texto exterior</p>
+
+  <div id="div1" style="border: solid blue 3px">
+    <p>Algo de texto en div1</p>
+    <p>Algo de texto en div1</p>
+    <p>Algo de texto en div1</p>
+
+    <div id="div2" style="border: solid red 3px">
+    <p>Algo de texto en div2</p>
+    <p>Algo de texto en div2</p>
+    </div>
+  </div>
+
+<p>Algo de texto exterior</p>
+<p>Algo de texto exterior</p>
+
+<button onclick="getAllParaElems();">
+ muestra todos los elementos p en el documento</button><br />
+
+<button onclick="div1ParaElems();">
+ muestra todos los elementos p en el div1</button><br />
+
+<button onclick="div2ParaElems();">
+ muestra todos los elementos p en el div2</button>
+
+</body>
+</html>
+
+ +

Especificación

+ +

DOM Level 2 Core: Document.getElementsByTagNameNS

diff --git a/files/es/web/api/document/getselection/index.html b/files/es/web/api/document/getselection/index.html new file mode 100644 index 0000000000..494ded4250 --- /dev/null +++ b/files/es/web/api/document/getselection/index.html @@ -0,0 +1,12 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +tags: + - Referencia + - Selección + - metodo +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +

{{APIRef("DOM")}}

+ +

Este método funciona exactamente igual que {{domxref("Window.getSelection()")}}; devuelve un objeto {{domxref("Selection")}} que representa el texto que se ha seleccionado en el documento.

diff --git a/files/es/web/api/document/hasfocus/index.html b/files/es/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..a3f4a7ce9e --- /dev/null +++ b/files/es/web/api/document/hasfocus/index.html @@ -0,0 +1,23 @@ +--- +title: element.hasFocus +slug: Web/API/Document/hasFocus +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Document/hasFocus +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

El atributo hasFocus devuelve true si el foco está en en algún sitio del documento activo. Este atributo es parte de la especificación HTML 5 actualmente en desarrollo.

+ +

Sintaxis

+ +
focused = element.hasFocus
+
+ +

Ejemplo

+ +

Especificación

+ +

Focus management

diff --git a/files/es/web/api/document/head/index.html b/files/es/web/api/document/head/index.html new file mode 100644 index 0000000000..a135b5cf3e --- /dev/null +++ b/files/es/web/api/document/head/index.html @@ -0,0 +1,83 @@ +--- +title: Document.head +slug: Web/API/Document/head +translation_of: Web/API/Document/head +--- +

{{APIRef("DOM")}}

+ +

Devuelve el elemento {{HTMLElement("head")}} del documento actual. Si hay más de un elemento <head>, devuelve el primero de estos.

+ +

Sintaxis

+ +
var objRef = document.head;
+
+ +

Ejemplo

+ +
// en el HTML: <head id="my-document-head">
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+
+ +

Notas

+ +

document.head is de sólo lectura. Cualquier intento de asignar un valor a esta propiedad fallará silenciosamente o, en caso de que se encuentre en Modo estricto de ECMAScript en un navegador Gecko, lanzará un TypeError.

+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico4.0{{CompatGeckoDesktop("2")}}9.011.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile("2")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Especificación

+ + diff --git a/files/es/web/api/document/height/index.html b/files/es/web/api/document/height/index.html new file mode 100644 index 0000000000..1bc2852c58 --- /dev/null +++ b/files/es/web/api/document/height/index.html @@ -0,0 +1,44 @@ +--- +title: Document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Note: Comenzando en {{Gecko("6.0")}}, document.height no es soportada. En lugar usar document.body.clientHeight. Ver {{domxref("element.clientHeight")}}.

+
+ +

Summary

+ +

Devuelve la altura del objeto {{domxref("document")}} . En la mayoría de los casos, esto equivale al elemento {{HTMLElement("body")}}  del documento actual.

+ +

Syntax

+ +
height_value = document.height
+
+ +

Example

+ +
// alert document height
+alert(document.height);
+
+ +

Alternatives

+ +
document.body.clientHeight
+document.documentElement.clientHeight
+document.documentElement.scrollHeight
+
+ +

Specification

+ +

HTML5

+ +

See also

+ + diff --git a/files/es/web/api/document/hidden/index.html b/files/es/web/api/document/hidden/index.html new file mode 100644 index 0000000000..e90970233b --- /dev/null +++ b/files/es/web/api/document/hidden/index.html @@ -0,0 +1,43 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +translation_of: Web/API/Document/hidden +--- +

{{ ApiRef("DOM") }}

+ +

El  Document.hidden Es una propiedad solo de lectura, retorna un valor Booleano que indica si la pagina esta conciderada oculta o no.

+ +

Sintaxis

+ +
var boolean = document.hidden
+ +

Ejemplo

+ +
document.addEventListener("visibilitychange", function() {
+  console.log( document.hidden );
+  // Modify behavior...
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}{{Spec2('Page Visibility API')}}definicion inicial
+ +

Compatibilidad con Navegadores

+ + + +

{{Compat("api.Document.hidden")}}

diff --git a/files/es/web/api/document/importnode/index.html b/files/es/web/api/document/importnode/index.html new file mode 100644 index 0000000000..ea34cd33be --- /dev/null +++ b/files/es/web/api/document/importnode/index.html @@ -0,0 +1,84 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +

{{APIRef("DOM")}}

+ +

Crea una copia de un nodo desde un documento externo para ser insertado en el documento actual.

+ +

Sintaxis

+ +
var node = document.importNode(externalNode, deep);
+
+ +
+
node
+
El nuevo nodo importado al documento actual. El parentNode del nuevo nodo es null, ya que aun no ha sido insertado en el arbol del documento.
+
externalNode
+
El nodo externo a ser importado
+
deep
+
Un booleano que indica si los descendientes del nodo deben ser importados también.
+
+ +
+

Nota: En la especificación DOM4 (tal y como se ha implementado en Gecko 13.0 {{geckoRelease(13)}}), deep es un argumento opcional. En el caso de ser omitido, adopta el valor de true, por lo que se hace una deep copy por defecto. Para realizar una copia superficial (shallow copy), deep debe ser false.

+ +

Este comportamiento ha cambiado en la ultima especificación, por lo que si se omite el parámetro deep, éste adopta el valor false. Aunque aún es opcional, debería ser siempre provisto por razones de compatibilidad. Con Gecko 28.0 {{geckoRelease(28)}}, la consola advertia a los desarrolladores de no omitir el argumento. Empezando con Gecko 29.0 {{geckoRelease(29)}}), se realiza una copia superficial (shallow copy) por defecto.

+
+ +

Ejemplo

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+
+ +

Notas

+ +

El nodo original no se borra del documento. El nodo importado es un clon del original.

+ +

 

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they can be inserted into the current document. For more on the Node.ownerDocument issues, see the W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Compatibilidad navegadores

+ +
+ + +

{{Compat("api.Document.importNode")}}

+
+ +

See also

+ + diff --git a/files/es/web/api/document/index.html b/files/es/web/api/document/index.html new file mode 100644 index 0000000000..5b72f5850e --- /dev/null +++ b/files/es/web/api/document/index.html @@ -0,0 +1,390 @@ +--- +title: Documento +slug: Web/API/Document +tags: + - páginas_a_traducir +translation_of: Web/API/Document +--- +
{{ ApiRef }}
+ +
 
+ +

La interfaz Document representa cualquer página web cargada en el navegador y sirve como punto de entrada al contenido de la página (El árbol DOM). El DOM incluye elementos como {{HTMLElement("body")}} y {{HTMLElement("table")}}), entre muchos otros, y proporciona funcionalidad que es global al documento, como obtener la URL de la página y crear nuevos elementos en el documento.

+ +

{{inheritanceDiagram}}

+ +

La interfaz Document describe los métodos y propiedade comunes para cualquier clase de documento. Dependiento del tipo de documento (ej. HTML, XML, SVG, …), hay disponible una API más extensa: los documentos HTML, que se sirven con el tipo de contenido text/html, también implementan la interfaz {{domxref("HTMLDocument")}}, mientras que los documentos XML y SVG implementan la interfaz {{domxref("XMLDocument")}}.

+ +

Propiedades

+ +
+

Nota: La interfaz Document también hereda de las interfaces {{domxref("Node")}} y {{domxref("EventTarget")}}.

+
+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Da acceso a todos los elementos del documento. Es una interfaz no estándar y no se debería utilizar.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Se utiliza con {{domxref("document.load")}} para indicar una petición asíncrona.
+
{{domxref("Document.characterSet")}} {{readonlyinline}}
+
Devuelve el juego de caracteres que utiliza el documento.
+
{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}
+
Es un alias de {{domxref("Document.characterSet")}}. Utilice esta propiedad en su lugar.
+
{{domxref("Document.compatMode")}} {{experimental_inline}}
+
Indicates whether the document is rendered in Quirks or Strict mode.
+
{{domxref("Document.contentType")}} {{experimental_inline}}
+
Returns the Content-Type from the MIME Header of the current document.
+
{{domxref("Document.doctype")}}
+
Returns the Document Type Definition (DTD) of the current document.
+
{{domxref("Document.documentElement")}}
+
Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.
+
{{domxref("Document.documentURI")}}
+
Returns the document URL.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Should return a {{domxref("DOMConfiguration")}} object.
+
{{domxref("Document.implementation")}}
+
Returns the DOM implementation associated with the current document.
+
{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}
+
Returns the encoding used when the document was parsed.
+
{{domxref("Document.lastStyleSheetSet")}}
+
Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
true if this document is synthetic, such as a standalone image, video, audio file, or the like.
+
{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:

+ +
+
{{domxref("Document.activeElement")}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}}
+
Returns the domain of the current document.
+
{{domxref("Document.embeds")}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Returns the title of the current document.
+
{{domxref("Document.URL")}}
+
Returns a string containing the URL of the current document.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns the event handling code for the readystatechange event.
+
+ +

Methods

+ +
+

Note: The Document interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.

+
+ +
+
{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}
+
See {{domxref("window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}
+
Gets a {{domxref("CaretPosition")}} based on two coordinates.
+
{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment","Document.createComment(String comment)")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement","Document.createElement(String name)")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent","Document.createEvent(String interface)")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}
+
Creates a text node.
+
{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}
+
Returns the element visible at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}
+
Returns a clone of a node from an external document.
+
{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("window.releaseEvents")}}.
+
{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("window.routeEvent")}}.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("Document.getElementById","Document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Extension for HTML documents

+ +

The Document interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:

+ +
+
{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("Document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("Document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("Document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("Document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formatting command.
+
{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}
+
Registers a new custom element in the browser and returns a constructor for the new element.
+
{{domxref("Document.write","Document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("Document.writeln","Document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend Document.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser compatibility

+ +

Firefox notes

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer notes

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
+ +

 

diff --git a/files/es/web/api/document/keydown_event/index.html b/files/es/web/api/document/keydown_event/index.html new file mode 100644 index 0000000000..57dc4336a5 --- /dev/null +++ b/files/es/web/api/document/keydown_event/index.html @@ -0,0 +1,178 @@ +--- +title: keydown +slug: Web/API/Document/keydown_event +tags: + - Evento + - keydown +translation_of: Web/API/Document/keydown_event +--- +

El evento keydown se produce cuando se presiona una tecla.

+ +

A diferencia del evento keypress, el evento keydown es producido por todas las teclas, independientemente de si estas son caracteres o no.

+ +

Información general

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
KeyboardEvent
+
Burbuja
+
Si
+
Cancelable
+
Si
+
Objetivo
+
Document, Element
+
Acción
+
Varía: evento keypress; lanza el sistema de composición de texto; eventos blur y focus; DOMActivate evento; otro evento
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
target {{readonlyInline}}EventTarget (DOM element)Focused element processing the key event, root element if no suitable input element focused.
char {{readonlyInline}}DOMString (string)The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See key names and char values for the detail. +
Note: If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.
+
key {{readonlyInline}}DOMString (string)The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the char attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See key names and char values for the detail. Read Only.
charCode {{readonlyInline}}Unsigned long (int)The Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. +
Warning: This attribute is deprecated; you should use char instead, if available.
+
keyCode {{readonlyInline}}Unsigned long (int)A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
which {{readonlyInline}}Unsigned long (int)A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
location {{readonlyInline}}long (float)The location of the key on the device.
repeat {{readonlyInline}}booleantrue if a key has been depressed long enough to trigger key repetition, otherwise false.
locale {{readonlyInline}}stringThe language code for the key event, if available; otherwise, the empty string.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

preventDefault() del evento keydown

+ +

Empezando desde Gecko 25, una llamada a preventDefault() del evento keydown impide la emisión del consiguiente evento keypress. Este es un comportamiento válido para la especificación D3E y otros navegadores importantes que se comportan de esta misma forma. Por otro lado, Gecko 24 y anteriores emiten el evento keypress aunque se haya llamado a preventDefault() del evento keydown predecesor. Aunque el atributo defaultPrevented del evento keypress sea true en este caso.

+ +

Eventos relacionados

+ + + +

Ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+
+'use strict';
+
+document.addEventListener('keydown', (event) => {
+  const keyName = event.key;
+  alert('keydown event\n\n' + 'key: ' + keyName);
+});
+
+</script>
+</head>
+<body>
+</body>
+</html>
diff --git a/files/es/web/api/document/keyup_event/index.html b/files/es/web/api/document/keyup_event/index.html new file mode 100644 index 0000000000..350629e9ab --- /dev/null +++ b/files/es/web/api/document/keyup_event/index.html @@ -0,0 +1,149 @@ +--- +title: Tecla Arriba +slug: Web/API/Document/keyup_event +translation_of: Web/API/Document/keyup_event +--- +

El evento es iniciado cuando la tecla es soltada.

+ +

Información General

+ +
+
Specification
+
DOM L3
+
Interface
+
KeyboardEvent
+
Bubbles
+
Si
+
Cancelable
+
Si
+
Target
+
Document, Element
+
Default Action
+
Ninguna
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
target {{readonlyInline}}EventTarget (DOM element)Focused element processing the key event, root element if no suitable input element focused.
char {{readonlyInline}}DOMString (string)The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See key names and char values for the detail. +
Note: If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.
+
key {{readonlyInline}}DOMString (string)The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the char attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See key names and char values for the detail. Read Only.
charCode {{readonlyInline}}Unsigned long (int)The Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. +
Warning: This attribute is deprecated; you should use char instead, if available.
+
keyCode {{readonlyInline}}Unsigned long (int)A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
which {{readonlyInline}}Unsigned long (int)A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
location {{readonlyInline}}long (float)The location of the key on the device.
repeat {{readonlyInline}}booleantrue if a key has been depressed long enough to trigger key repetition, otherwise false.
locale {{readonlyInline}}stringThe language code for the key event, if available; otherwise, the empty string.
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Eventos Relacionados

+ + diff --git a/files/es/web/api/document/pointerlockelement/index.html b/files/es/web/api/document/pointerlockelement/index.html new file mode 100644 index 0000000000..cc5d490e5c --- /dev/null +++ b/files/es/web/api/document/pointerlockelement/index.html @@ -0,0 +1,105 @@ +--- +title: Document.pointerLockElement +slug: Web/API/Document/pointerLockElement +translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +--- +
{{APIRef("DOM")}}
+ +

La propiedad pointerLockElement conserva el elemento adquirido, para el evento del mouse, mientras el bloqueo se encuentre activo .  Es null si el bloqueo se encuentra en estado pendiente para bloqueo, o si el bloqueo se ha liberado, es decir ya no se encuentra en estado bloqueado, o si el elemento bloqueado se encuentra en otro documento.

+ +

Sintaxis

+ +
var elemento = document.pointerLockElement;
+
+ +

Valor retornado

+ +

Un {{domxref("Element")}} o null.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Bloquear puntero','l#extension-to-the-document-interface','Document')}}{{Spec2('Pointer lock')}}Extiende de la interfaz Document
+ +

Compatibilidad del Navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} {{property_prefix("moz")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Soporte sin prefijar{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}   
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Véase también:

+ + diff --git a/files/es/web/api/document/queryselector/index.html b/files/es/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..b442ba5bbb --- /dev/null +++ b/files/es/web/api/document/queryselector/index.html @@ -0,0 +1,136 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - Consulta + - DOM + - Referencias(2) + - Referências + - Selectores + - metodo +translation_of: Web/API/Document/querySelector +--- +
{{ ApiRef("DOM") }}
+ +
Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincida con el grupo especificado de selectores.
+ +
 
+ +

Sintaxis

+ +
element = document.querySelector(selectores);
+
+ +

Donde:

+ + + +

Ejemplo

+ +

En este ejemplo, obtendremos el primer elemento del documento con la clase "miClase":

+ +
var el = document.querySelector(".miClase");
+
+ +

Ejemplo más útil

+ +

Los Selectores pueden ser muy útiles como se demostrará en el siguiente ejemplo. Aquí, será retornado el primer elemento <input name="login" /> dentro de <div class="user-panel main">.

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+ +

Notas

+ + + +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar"
+  document.querySelector('#foo\bar');    // No coincide con nada
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\\\bar'); // Coincide con el primer div
+
+  document.querySelector('#foo:bar');    // No coincide con nada
+  document.querySelector('#foo\\:bar');  // Coincide con el segundo div
+</script>
+
+ +

Compatibilidad en los navegadores

+ +
+ + + + + + + + + + + + + + + + + + + +
PlataformaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Basico13.5 (1.9.1)
+ {{bug(416317)}}		8103.2 (525.3)
+ {{Webkitbug("16587")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PlataformaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Basico2.1Si910.03.2
+
+ +

Especificaciones

+ + + +

Vea también

+ + diff --git a/files/es/web/api/document/queryselectorall/index.html b/files/es/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..7f041b6e84 --- /dev/null +++ b/files/es/web/api/document/queryselectorall/index.html @@ -0,0 +1,179 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Buscando Elementos + - DOM + - Document + - Encontrando Elementos + - Localizando Elementos + - Métodos + - Referencia + - Seleccionando Elementos + - Selectores + - Selectores CSS + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +
{{ ApiRef("DOM") }}
+ +

El método querySelectorAll() de un {{domxref("Element")}} devuelve una {{domxref("NodeList")}} estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.

+ +
+

Nota: Esto método se implementa en base al método {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} del mixin {{domxref("ParentNode")}}.

+
+ +

Sintaxis

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parámetros

+ +
+
selectors
+
Un {{domxref("DOMString")}} que contiene uno o más selectores para buscar coincidencias. Esta cadena de texto debe ser una cadena CSS selector válida; si no lo es, se lanzará una excepción SyntaxError. Vea Locating DOM elements using selectors para más información acerca de utilizar selectores para identificar elementos. Se pueden especificar varios selectores separándolos utilizando comas.
+
+ +
+

Nota: Los caracteres que no son parte de la sintaxis estándar de CSS deben ser escapados utilizando el caracter de barra invertida. Dado que JavaScript también utiliza el escapado por retroceso, se debe tener especial cuidado al escribir cadenas de texto literales utilizando estos caracteres. Vea {{anch("Escapando caracteres especiales")}} para más información.

+
+ +

Valor devuelto

+ +

Una {{domxref("NodeList")}} no viva que contenga un objeto {{domxref("Element")}} para cada elemento que coincida con al menos uno de los selectores especificados o una {{domxref("NodeList")}} vacía en caso de que no haya coincidencias.

+ +
+

Nota: Si los selectores indicados incluyen un pseudo-elemento CSS, la lista devuelta siempre estará vacía.

+
+ +

Excepciones

+ +
+
SyntaxError
+
La sintaxis de la cadena de texto selectors no es válida.
+
+ +

Ejemplos

+ +

Obteniendo una lista de coincidencias

+ +

Para obtener una {{domxref("NodeList")}} de todos los elementos {{HTMLElement("p")}} en el documento:

+ +
var matches = document.querySelectorAll('p');
+ +

Este ejemplo devuelve una lista de todos los elementos {{HTMLElement("div")}} del documento con una clase "nota" o "alerta":

+ +
var matches = document.querySelectorAll('div.nota, div.alerta');
+
+ +

Aquí, se obtiene una lista de elementos <p> cuyo elemento padre inmediato es un {{domxref("div")}} con la clase "highlighted" y que está ubicado dentro de un contenedor cuyo ID es "test".

+ +
var container = document.querySelector('#test');
+var matches = container.querySelectorAll('div.highlighted > p');
+ +

Este ejemplo usa un selector de atributos para devolver una lista de elementos {{domxref("iframe")}} en el documento que contienen un atributo llamado "data-src":

+ +
var matches = document.querySelectorAll('iframe[data-src]');
+ +

Aquí, un selector de atributo se utiliza para devolver una lista de los elementos de una lista cuyo ID es "userlist" que tiene un atributo "data-active" cuyo valor es "1":

+ +
var container = document.querySelector('#userlist');
+var matches = container.querySelectorAll('li[data-active="1"]');
+ +

Accediendo a las coincidencias

+ +

Una vez que se devuelve la {{domxref("NodeList")}} de los elementos que coinciden, se puede examinar como cualquier array. Si el array está vacío (lo que significa que su propiedad length es 0), entonces es que no se encontraron coincidencias.

+ +

En cualquier caso, se puede simplemente utilizar la notación estándar de los arrays para acceder al contenido de la lista. Se puede usar cualquier sentencia de iteración, como por ejemplo:

+ +
var highlightedItems = userList.querySelectorAll('.highlighted');
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Notas de usuario

+ +

querySelectorAll() se comporta de forma diferente que la mayoría de librerías DOM de JavaScript, que pueden llevar a resultados inesperados.

+ +

HTML

+ +

Considere este HTML, con sus tres bloques anidados {{HTMLElement("div")}}.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

En este ejemplo, cuando se selecciona ".outer .inner" en el contexto el <div> con la clase "select", el elemento con la clase ".inner" todavía es encontrado, aun sabiendo que .outer no es descendiente del elemento base sobre el que se realiza la búsqueda (".select"). Por defecto, querySelectorAll() sólo verifica que el último elemento en el selector se encuentra dentro del rango de búsqueda.

+ +

La pseudo-clase {{cssxref(":scope")}} recupera el comportamiento esperado, encontrando coincidencias sólo en selectores descendientes del elemento base:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Estándar vivo
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Sin cambios
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Definición inicial
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Definición original
+ +

Compatibilidad en navegadores

+ +
+ + +

{{Compat("api.Document.querySelectorAll")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/document/readystate/index.html b/files/es/web/api/document/readystate/index.html new file mode 100644 index 0000000000..7e5a24c5d8 --- /dev/null +++ b/files/es/web/api/document/readystate/index.html @@ -0,0 +1,104 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +translation_of: Web/API/Document/readyState +--- +
{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
+ +

Resumen

+ +

La propiedad Document.readyState de un {{ domxref("document") }} describe el estado de carga del documento.

+ +

Valores

+ +

El readyState de un documento puede tener uno de los siguientes valores:

+ +
+
loading
+
El {{ domxref("document") }} todavía esta cargando.
+
interactive
+
El documento ha terminado de cargar y ha sido analizado pero  los sub-recursos como imágenes, estilos y frames aún siguen cargando. El estado indica que el evento {{event("DOMContentLoaded")}} ha sido disparado.
+
complete
+
El documento y todos los sub-recursos han cargado completamente. El estado indica que el evento {{event("load")}} ha sido disparado.
+
+ +

Cuando el valor de esta propiedad cambia, un evento {{event("readystatechange")}} se dispara en el objecto {{ domxref("document") }}.

+ +

Sintaxis

+ +
var string = document.readyState;
+
+ +

Ejemplos

+ +

Diferentes estados del readyState

+ +
switch (document.readyState) {
+  case "loading":
+    // The document is still loading.
+    break;
+  case "interactive":
+    // The document has finished loading. We can now access the DOM elements.
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // The page is fully loaded.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange como alternativa al evento DOMContentLoaded

+ +
// alternative to DOMContentLoaded event
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}
+ +

readystatechange como alternativa al evento load

+ +
// alternative to load event
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}} 
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Especificación inicial.
+ +

Ver también

+ + diff --git a/files/es/web/api/document/registerelement/index.html b/files/es/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..504cf8314b --- /dev/null +++ b/files/es/web/api/document/registerelement/index.html @@ -0,0 +1,115 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}}{{Deprecated_header}}{{draft()}}

+ +

El Document.registerElement() registra un nuevo elemento personalizado en el navegador y devuelve un constructor para el nuevo elemento.

+ +
+

Nota: Esta es una tecnología experimental. El navegador que utilice debe ser compatible con Web Components. Ver Web Components habilitados en Firefox.

+
+ +

Sintaxis

+ +
var constructor = document.registerElement(tag-name, options);
+ +

Parámetros

+ +
+
tag-name
+
El nombre del elemento personalizado. El nombre debe contener un guión (-), por ejemplo my-tag.
+
options {{optional_inline}}
+
Un objeto que da nombre al prototipo que sirve de base para el elemento personalizado, y una etiqueta existente para extender. Ambos son opcionales.
+
+ +

Ejemplo

+ +

Aquí hay un ejemplo muy simple:

+ +
var Mytag = document.registerElement('my-tag');
+
+ +

Ahora el nuevo tag se ha registrado en el navegador. La variable MyTag contiene un constructor que lo puedes usar para crear un elemento my-tag  en el documento de la siguiente manera:

+ +
document.body.appendChild(new Mytag());
+ +

Esto inserta un elemento my-tag vacío que será visible si utiliza las herramientas de desarrollo del navegador. No será visible si usa la capacidad de ver el código fuente del navegador. Y no será visible en el navegador a menos que agregue algún contenido para la etiqueta. Esta es la manera de agregar contenido a la nueva etiqueta:

+ +
var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Custom Elements')}}{{Spec2('Custom Elements')}}Definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support3531 (behind a flag){{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4.431 (behind a flag){{CompatNo}}25{{CompatNo}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/document/scripts/index.html b/files/es/web/api/document/scripts/index.html new file mode 100644 index 0000000000..254df25276 --- /dev/null +++ b/files/es/web/api/document/scripts/index.html @@ -0,0 +1,84 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +translation_of: Web/API/Document/scripts +--- +
{{APIRef("DOM")}}
+ +

Devuelve una lista de elementos {{HTMLElement("script")}} ubicados en el documento. El objeto devuelto es una colección {{domxref("HTMLCollection")}}.

+ +

Sintáxis

+ +
var scriptList = document.scripts;
+
+ +

El objeto scriptList devuelto es una {{domxref("HTMLCollection")}}. Se puede utilizar como un array corriente para acceder a sus elementos.

+ +

Ejemplo

+ +

Este ejemplo busca demostrar la existencia de objetos {{HTMLElement("script")}} en el documento.

+ +
var scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Especificaciones

+ + diff --git a/files/es/web/api/document/scroll_event/index.html b/files/es/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..944d539834 --- /dev/null +++ b/files/es/web/api/document/scroll_event/index.html @@ -0,0 +1,104 @@ +--- +title: scroll +slug: Web/API/Document/scroll_event +translation_of: Web/API/Document/scroll_event +--- +

El evento scroll se produce cuando la vista del documento o un elemento es deslizado.

+ +

Información General

+ +
+
Especificación
+
DOM L3, CSSOM View
+
Interfaz
+
UIEvent
+
Bubbles
+
No en elementos, pero burbujea a la vista default cuando se ejecuta en el documento
+
Cancelable
+
No
+
Objetivo
+
defaultView, Document, Element
+
Acción por defecto
+
Ninguna
+
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetEl objetivo de evento (el objetivo superior en el árbol DOM).
type {{readonlyInline}}DOMStringEl tipo de evento.
bubbles {{readonlyInline}}BooleanSi el evento burbujea o no.
cancelable {{readonlyInline}}BooleanSi el evento puede ser cancelado o no.
view {{readonlyInline}}WindowProxydocument.defaultView (window de el documento)
detail {{readonlyInline}}long (float)0.
+ +

Ejemplo

+ +

Dado que los eventos scroll pueden ejecutarse a un ritmo elevado, el event handler no debería ejecutar operaciones computacionalmente costosas como modificaciones en el DOM. En cambio, se recomienda acelerar el evento utilizando requestAnimationFrame, setTimeout or customEvent, de este modo:

+ +

Optimización de Scroll con window.requestAnimationFrame

+ +
// Referencia: http://www.html5rocks.com/en/tutorials/speed/animations/
+
+var last_known_scroll_position = 0;
+var ticking = false;
+
+function doSomething(scroll_pos) {
+  // Hacer algo con la posición del scroll
+}
+
+window.addEventListener('scroll', function(e) {
+  last_known_scroll_position = window.scrollY;
+  if (!ticking) {
+    window.requestAnimationFrame(function() {
+      doSomething(last_known_scroll_position);
+      ticking = false;
+    });
+  }
+  ticking = true;
+});
+ + + +

Más ejemplos se pueden ver en el evento resize.

+ +

Compatibilidad en navegadores

+ +

iOS UIWebView

+ +

En iOS UIWebViews, los eventos scroll no se ejecutan mientras el escroleo/deslizamiento se lleva a cabo; solo son ejecutados cuando el deslizamiento terminó. Ver Bootstrap issue #16202. Safari y WKWebViews no se ven afectados por este bug.

diff --git a/files/es/web/api/document/stylesheets/index.html b/files/es/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..0cc8e47181 --- /dev/null +++ b/files/es/web/api/document/stylesheets/index.html @@ -0,0 +1,21 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve una lista de objetos de tipo stylesheet para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.

+

Propiedades

+

styleSheetList.length - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.

+

Sintaxis

+
styleSheetList = document.styleSheets
+
+

El objeto devuelto es del tipo StyleSheetList.

+

Es una colección ordenada de objetos de tipo stylesheet. styleSheetList.item(index) o simplemente styleSheetList{{ mediawiki.external(' + + index + ') }} devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).

+

Especificación

+

DOM Level 2 Style: styleSheets

+

{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}

diff --git a/files/es/web/api/document/url/index.html b/files/es/web/api/document/url/index.html new file mode 100644 index 0000000000..eec4361827 --- /dev/null +++ b/files/es/web/api/document/url/index.html @@ -0,0 +1,71 @@ +--- +title: document.URL +slug: Web/API/Document/URL +tags: + - API + - Documento + - HTML DOM + - Propiedad + - Referencia +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura URL de la interfaz {{domxref("Document")}} devuelve la ubicación del documento como una cadena de texto.

+ +

Sintaxis

+ +
var string = document.URL
+ +

Ejemplo

+ +

JavaScript

+ +
document.getElementById("url").textContent = document.URL;
+ +

HTML

+ +
<p id="urlText">
+  URL:<br/>
+  <span id="url">La URL va aquí</span>
+</p>
+ +

Resultado

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-document-url", "Document.URL")}}{{Spec2("DOM WHATWG")}}Define que la propiedad es una {{domxref("USVString")}} en lugar de un {{domxref("DOMString")}}.
{{SpecName("DOM1", "level-one-html.html#attribute-URL", "Document.URL")}}{{Spec2("DOM1")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("api.Document.URL")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/document/write/index.html b/files/es/web/api/document/write/index.html new file mode 100644 index 0000000000..f07bd5c9a9 --- /dev/null +++ b/files/es/web/api/document/write/index.html @@ -0,0 +1,76 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Documentación + - Referencia + - metodo +translation_of: Web/API/Document/write +--- +
{{ ApiRef("DOM") }}
+ +


+ Escribe una cadena de texto dentro del hilo de un document abierto por document.open().

+ +
Nota: dado que document.write escribe directo al hilo (stream) de un documento, la llamada a document.write en un documento ya cargado automáticamente ejecuta document.open, lo cual limpiará todo el contenido del documento en cuestión.
+ +

Sintaxis

+ +
document.write(texto);
+
+ +

texto es una cadena de texto que contiene el texto a ser impreso en el documento.

+ +

Example

+ +
<html>
+
+<head>
+  <title>Ejemplo de write</title>
+
+  <script>
+    function nuevoContenido() {
+      alert("carga el contenido nuevo");
+      document.open();
+      document.write("<h1>Quita el contenido viejo - Agrega el contenido nuevo!</h1>");
+      document.close();
+    }
+  </script>
+</head>
+
+<body onload="nuevoContenido();">
+  <p>Algo de contenido original del documento</p>
+</body>
+
+</html>
+ +

Notas

+ +

Escribir a un documento que ya tiene contenido cargado previamente sin llamar a document.open(), automáticamente hará una llamada a document.open(). Después de haber finalizado la escritura del documento, es recomendable llamar a document.close(), para informar al navegador que la carga de la página ya ha terminado. El texto que escribas allí es convertido a la estructura tipificada de HTML dentro del modelo estructural del documento. En el ejemplo de más arriba, el elemento h1 se convierte en un nodo dentro del documento.

+ +

Si la llamada a document.write() se ejecuta dentro de una etiqueta <script> incluído en el HTML, entonces la llamada a document.open() nunca ocurrirá. Por ejemplo:

+ +
<script>
+  document.write("<h1>Título Principal</h1>")
+</script>
+
+ +
Nota: document.write y document.writeln no funcionan dentro de un documento XHTML (obtendrás un mensaje de error que dice "Operación no soportada" ("Operation is not supported") [NS_ERROR_DOM_NOT_SUPPORTED_ERR] en la consola). Esto sucede cuando abrimos un archivo local de extensión .xhtml o para cualquier document servido con un MIME del tipo application/xhtml+xml. Hay más información disponible en W3C XHTML FAQ.
+ +
Nota: document.write en scripts de modo diferido o asyncrónico serán ignorados, y recibirás un mensaje de error en la consola del tipo "Una llamada a document.write() desde un script cargado asincrónicamente fue ignorado" ("A call to document.write() from an asynchronously-loaded external script was ignored").
+ +

Especificaciones

+ + + +

También puedes ver

+ + diff --git a/files/es/web/api/document/writeln/index.html b/files/es/web/api/document/writeln/index.html new file mode 100644 index 0000000000..d9e0b72019 --- /dev/null +++ b/files/es/web/api/document/writeln/index.html @@ -0,0 +1,40 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Escribe una cadena de texto en el documento, seguida de una nueva línea.

+ +
+

Nota: dado que document.writeln (al igual que document.write) escribe directo al hilo (stream) de un documento, la llamada a document.write en un documento ya cargado automáticamente ejecuta document.open, lo cual limpiará todo el contenido del documento en cuestión.

+
+ +

Sintaxis

+ +
document.writeln(línea);
+
+ +

Parámetros

+ + + +

Ejemplo

+ +
document.writeln("<p>¡Hola mundo!</p>");
+
+ +

Notas

+ +

document.writeln actúa igual que document.write exepto que agrega un carácter de nueva línea (\n) al final del texto a escribir.

+ +
Nota: document.write y document.writeln no funcionan dentro de un documento XHTML (obtendrás un mensaje de error que dice "Operación no soportada" ("Operation is not supported") [NS_ERROR_DOM_NOT_SUPPORTED_ERR] en la consola). Esto sucede cuando abrimos un archivo local de extensión .xhtml o para cualquier document servido con un MIME del tipo application/xhtml+xml. Hay más información disponible en W3C XHTML FAQ.
+ +
Nota: document.writeln y document.write en scripts de modo diferido o asyncrónico serán ignorados, y recibirás un mensaje de error en la consola del tipo "Una llamada a document.write() desde un script cargado asincrónicamente fue ignorado" ("A call to document.write() from an asynchronously-loaded external script was ignored").
+ +

Especificación

+ +

writeln

diff --git a/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html new file mode 100644 index 0000000000..b93f8e1d7e --- /dev/null +++ b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/example/index.html @@ -0,0 +1,40 @@ +--- +title: Example +slug: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example +tags: + - DOM + - Ejemplo +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core/Example +--- +
 <html>
+ <head>
+   <title>Mi Documento</title>
+   <script type="text/javascript">
+   function cambio() {
+     // document.getElementsByTagName("H1") retorna un NodeList de elementos
+     // h1 en el documento, y el primero es numero 0:
+     var header = document.getElementsByTagName("H1").item(0);
+     // El firstChild del encabezado es un nodo Text:
+     header.firstChild.data = "Un documento dinamico";
+     // Ahora el encabezado es "Un documento dinamico".
+     var para = document.getElementsByTagName("P").item(0);
+     para.firstChild.data = "Este es el primer parrafo.";
+     // Crea un nuevo nodo Text para el segundo parrafo
+     var newText = document.createTextNode("Este es el segundo parrafo.");
+     // Crea un nuevo Element para que sea el segundo parrafo
+     var newElement = document.createElement("P");
+     // Agrega el texto en el parrafo
+     newElement.appendChild(newText);
+     // Y agrega el parrafo al final del documento dentro del
+     // BODY (el cuál es el padre de "para")
+     para.parentNode.appendChild(newElement);
+   }
+   </script>
+ </head>
+ <body>
+   <input type="button" value="Cambia este documento." onclick="cambio()">
+   <h1>Encabezado</h1>
+   <p>Parrafo</p>
+ </body>
+ </head>
+
diff --git a/files/es/web/api/documentfragment/index.html b/files/es/web/api/documentfragment/index.html new file mode 100644 index 0000000000..625ea1e2c9 --- /dev/null +++ b/files/es/web/api/documentfragment/index.html @@ -0,0 +1,129 @@ +--- +title: DocumentFragment +slug: Web/API/DocumentFragment +translation_of: Web/API/DocumentFragment +--- +
{{ APIRef("DOM") }}
+ +

La interfaz DocumentFragment representa un objeto de documento mínimo que no tiene padre. Se utiliza como una versión ligera de {{domxref("Document")}} que almacena un segmento de una estructura de documento compuesta de nodos como un documento estándar. La gran diferencia se debe al hecho de que el fragmento de documento no forma parte de la estructura de árbol del documento activo. Los cambios realizados en el fragmento no afectan el documento  (incluso en {{Glossary("reflow")}})  ni inciden en el rendimiento cuando se realizan cambios. {{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }}
+
Crea y devuelve un nuevo objeto DocumentFragment.
+
+ +

Propiedades

+ +

Esta interfaz no tiene propiedades específicas, pero hereda las de su padre, {{domxref("Node")}}, e implementa los de la interfaz {{domxref("ParentNode")}}.

+ +
+
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("HTMLCollection")}} que contiene los objetos de tipo {{domxref("Element")}} que son elementos secundarios del objeto DocumentFragment.
+
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Devuelve el {{domxref("Element")}} que es el primer hijo del objeto DocumentFragment, o null si no hay ninguno.
+
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Devuelve el {{domxref("Element")}} que es el último hijo del objeto DocumentFragment, o null si no hay ninguno.
+
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un unsigned long que indica cantidad de elementos secundarios que tiene el objeto DocumentFragment.
+
+ +

Métodos

+ +

Esta interfaz hereda los métodos de su padre, {{domxref("Node")}}, e implementa los de la interfaz {{domxref("ParentNode")}}.

+ +
+
{{domxref("DocumentFragment.querySelector()")}}
+
Devuelve el primer nodo {{domxref("Element")}} dentro de DocumentFragment, en el orden del documento, que coincide con los selectores especificados.
+
{{domxref("DocumentFragment.querySelectorAll()")}}
+
Devuelve un {{domxref("NodeList")}} de todos los nodos {{domxref("Element")}} dentro de DocumentFragment que coincide con los selectores especificados.
+
{{domxref("DocumentFragment.getElementById()")}}
+
Devuelve el primer nodo{{domxref("Element")}} dentro de DocumentFragment, en el orden del documento, que coincide con el ID especificado. funcionalmente equivale a {{domxref("Document.getElementById()")}}.
+
+ +

Notas de uso

+ +

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using {{domxref("Node")}} interface methods such as {{domxref("Node.appendChild", "appendChild()")}} or {{domxref("Node.insertBefore", "insertBefore()")}}. Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment. Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.

+ +

This interface is also of great use with Web components: {{HTMLElement("template")}} elements contain a DocumentFragment in their {{domxref("HTMLTemplateElement.content")}} property.

+ +

An empty DocumentFragment can be created using the {{domxref("document.createDocumentFragment()")}} method or the constructor.

+ +

Example

+ +

HTML

+ +
<ul id="list"></ul>
+
+ +

JavaScript

+ +
var list = document.querySelector('#list')
+var fruits = ['Apple', 'Orange', 'Banana', 'Melon']
+
+var fragment = new DocumentFragment()
+
+fruits.forEach(function (fruit) {
+  var li = document.createElement('li')
+  li.innerHTML = fruit
+  fragment.appendChild(li)
+})
+
+list.appendChild(fragment)
+
+ +

Result

+ +

{{EmbedLiveSample('Example')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}Added the constructor and the implementation of {{domxref("ParentNode")}}.
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}Added the querySelector() and querySelectorAll() methods.
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/domapplicationsregistry/checkinstalled/index.html b/files/es/web/api/domapplicationsregistry/checkinstalled/index.html new file mode 100644 index 0000000000..5c2d298aa9 --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/checkinstalled/index.html @@ -0,0 +1,49 @@ +--- +title: Apps.checkInstalled +slug: Web/API/DOMApplicationsRegistry/checkInstalled +tags: + - API + - Apps + - Apps API + - Firefox OS + - Procedimiento +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/checkInstalled +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

Resúmen

+

Obtiene información acerca de la aplicación dada. Esto puede ser usado para determinar si se ha instalado la aplicación.

+

Sintaxis

+
var request = window.navigator.mozApps.checkInstalled(url);
+
+

Parámetros

+
+
+ url
+
+ Una cadena de URL que contiene la ubicación de el manifiesto de la aplicación.
+
+

Resultados

+

La función checkInstalled() devuelve un objeto {{ domxref("DOMRequest") }}. La propiedad DOMRequest.result contiene un App object, que es un objeto JavaScript que describe la aplicación instalada. Si la aplicación no se encuentra instalada, entonces DOMRequest.result es null (nulo).

+

Ejemplo

+
var request = window.navigator.mozApps.checkInstalled("http://ejemplo.com/manifest.webapp");
+request.onerror = function(e) {
+  alert("Error de llamada checkInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  if (request.result) {
+    console.log("La aplicación está instalada!");
+  }
+  else {
+    console.log("La aplicación no está instalada!");
+  }
+};
+

Se espera a las personas que llaman para establecer las propiedades de devolución de llamada onsuccess y onerror del objeto devuelto, como se muestra en este ejemplo. Si la llamada se realiza correctamente,  un App object se devuelve en la propiedad result del objeto devuelto. En el ejemplo esto es request.result.

+

Errores

+

La cadena ERROR pueden ser devueltos en DOMRequest.error.

+

Una excepción NS_ERROR_DOM_BAD_URI se produce si el manifiesto está en un dominio diferente a la página en que se solicita la información. Este se produce tan pronto como se invoca checkInstalled.

+

Temas relacionados

+ diff --git a/files/es/web/api/domapplicationsregistry/getinstalled/index.html b/files/es/web/api/domapplicationsregistry/getinstalled/index.html new file mode 100644 index 0000000000..a1b96ee7ff --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/getinstalled/index.html @@ -0,0 +1,40 @@ +--- +title: Apps.getInstalled +slug: Web/API/DOMApplicationsRegistry/getInstalled +tags: + - API + - Apps + - Apps API + - Firefox OS + - Procedimiento +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/getInstalled +--- +

{{ ApiRef() }}

+

{{ non-standard_header() }}

+

Resumen

+

Obtenga una lista de todas las aplicaciones instaladas desde este origen. Por ejemplo, si se llama a esto en el Firefox Marketplace, obtendrá la lista de aplicaciones instaladas por el Firefox Marketplace.

+
+

Note: Múltiples aplicaciones por origen no son compatibles. Para alojar varias aplicaciones de un dominio, establezca un subdominio para cada aplicación; por ejemplo: miapp.midominio.com, otraapp.midominio.com, y así sucesivamente.

+
+

Sintaxis

+
var request = window.navigator.mozApps.getInstalled();
+
+

Parámetros

+

Ninguno.

+

Ejemplo

+
var request = window.navigator.mozApps.getInstalled();
+request.onerror = function(e) {
+  alert("Error de llamada getInstalled: " + request.error.name);
+};
+request.onsuccess = function(e) {
+  alert("Éxito, numero de apps: " + request.result.length);
+  var appsRecord = request.result;
+};
+

Se espera a las personas que llaman para establecer las propiedades de devolución onsuccess y onerror del objeto devuelto, como se muestra en este ejemplo. Si la llamada se realiza correctamente un array de App objects se devuelve en la propiedad result del objeto devuelto. En el ejemplo esto es request.result.

+

Errores

+

La cadena ERROR puede ser devuelta en DOMRequest.error.

+

Temas relacionados

+ diff --git a/files/es/web/api/domapplicationsregistry/index.html b/files/es/web/api/domapplicationsregistry/index.html new file mode 100644 index 0000000000..e9d68ecf20 --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/index.html @@ -0,0 +1,89 @@ +--- +title: DOMApplicationsRegistry +slug: Web/API/DOMApplicationsRegistry +tags: + - API + - Apps + - B2G + - Firefox OS + - No estandar + - Referencia +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry +--- +

{{ ApiRef("Apps") }}

+ +

{{ non-standard_header() }}

+ +

Provides support for installing, managing, and controlling Open Web apps in a browser. Currently implemented as {{ domxref('window.navigator.mozApps') }}.

+ +

Propiedad

+ +
+
{{domxref("DOMApplicationsRegistry.mgmt")}}
+
Un objeto mgmt que define funciones que le permiten a los tableros manejar y arrancar apps  a favor del usuario.
+
+ +

Metodos

+ +
+
{{ domxref("DOMApplicationsRegistry.checkInstalled()") }}
+
Verifica cuando una app se ha instalado tomando el manifiesto como su parametro.
+
{{ domxref("DOMApplicationsRegistry.install()") }}
+
Desencade la instalación de una app. Durante el proceso de instalación, la app es validada y se le pregunta al usuario si desea aprovar la instalación.
+
{{ domxref("DOMApplicationsRegistry.getSelf()") }}
+
Returna un objeto que contiene un {{ domxref('app') }} para la app.
+
{{ domxref("DOMApplicationsRegistry.getInstalled()") }}
+
Obtine una lista de todas las apps instaladas.
+
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basico{{ CompatUnknown() }}16.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/api/domapplicationsregistry/install/index.html b/files/es/web/api/domapplicationsregistry/install/index.html new file mode 100644 index 0000000000..56f18e777b --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/install/index.html @@ -0,0 +1,90 @@ +--- +title: Apps.install +slug: Web/API/DOMApplicationsRegistry/install +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/install +--- +
+ {{ ApiRef() }} {{non-standard_header}}
+

Resumen

+

Activa la instalación de una aplicación. Durante este proceso la aplicación es validada y el usuario se le solicita aprovar la instalación .

+

Si la aplicación estaba previamente instalada desde el mismo dominio, llamando install()otra vez puede silenciosamente reescribir los datos de instalación. This can be used to modify the purchase receipt, for example, when a user upgrades from a free app to a premium app.

+

Syntax

+
var request = window.navigator.mozApps.install(url, [receipt1, …]);
+

Parameters

+
+ Note: There is currently (May 2012) a bug with passing a relative path in the url parameter. See {{ Bug("745928") }}.
+
+
+ url
+
+ A string URL containing the location of the manifest to be installed. In the case of self distribution (where the installing origin is the same as the app origin), the installing site may omit the origin part of the URL and provide an absolute path (beginning with /).
+
+ receipts
+
+ (Optional) An array of one or more receipts. Example:
+
+ 
window.navigator.mozApps.install(url, ["receipt"])
+
+
+ If receipts is omitted it is treated as null. For more information see Validating a receipt.
+
+

The install() function throws an exception if the required argument (url) is missing, or if unsupported arguments are present.

+

Returns

+

The install() function returns a {{ domxref("DOMRequest") }} object. The DOMRequest.result field contains an App object, which is a JavaScript object that describes the app that was just installed. Before the operation is finished, DOMRequest.result is null.

+

If the installation is not successful, DOMRequest.error contains a DOMError object, which has information about the error.

+

Example

+

An example that shows how to use install() with the DOMRequest.onsuccess and DOMRequest.onerror callback properties.

+
var request = window.navigator.mozApps.install(manifestUrl);
+request.onsuccess = function () {
+  // Save the App object that is returned
+  var appRecord = this.result;
+  alert('Installation successful!');
+};
+request.onerror = function () {
+  // Display the error information from the DOMError object
+  alert('Install failed, error: ' + this.error.name);
+};
+
+

The onsuccess callback is called if the installation is successful. This means that the installation actions described here have occurred.

+

If the installation is not successful the onerror callback is called. On a failed installation, DOMRequest.error contains a DOMError object that has information about the error.

+

The code above may look unusual to you, with listeners being added after the function has already been invoked. However, this is the way the DOMRequest object operates. The function invocation will wait until the listeners are defined, and then the listeners will fire appropriately. The install() function also works by itself, without the .onsuccess and .onerror listeners.

+

Errors

+

When the installation is unsuccessful, one of the following errors can be returned in DOMRequest.error.

+
+
+ DENIED
+
+ The user cancelled the installation.
+
+ INVALID_MANIFEST
+
+ The manifest, while well-formed JSON, does not have some required field or is somehow invalid.
+
+ MANIFEST_URL_ERROR
+
+ Something other than an HTTP 200 status code was received, or some connection errors.
+
+ MANIFEST_PARSE_ERROR
+
+ Bad JSON in the manifest.
+
+ NETWORK_ERROR
+
+ Connection error.
+
+ REINSTALL_FORBIDDEN
+
+ Reinstalls of apps are forbidden.
+
+ MULTIPLE_APPS_PER_ORIGIN_FORBIDDEN
+
+ Installable apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin.
+
+ + diff --git a/files/es/web/api/domapplicationsregistry/installpackage/index.html b/files/es/web/api/domapplicationsregistry/installpackage/index.html new file mode 100644 index 0000000000..c269240c60 --- /dev/null +++ b/files/es/web/api/domapplicationsregistry/installpackage/index.html @@ -0,0 +1,36 @@ +--- +title: Apps.installPackage +slug: Web/API/DOMApplicationsRegistry/installPackage +translation_of: Archive/Marketplace/API/DOMApplicationsRegistry/installPackage +--- +
+ {{ApiRef}} {{non-standard_header}}
+

Resumen

+

Instala una aplicación empaquetada.

+
+ Solo disponible en Firefox OS.
+

Sintaxis

+
installPackage: function(aURL[, aParams])
+

Parametros

+ +

Resultados

+
+
+ aURL
+
+ El URL del paquete de aplicación a instalar. Esta debe ser una URL completa y absoluta.
+
+ aParams
+
+ Opcionalmente, un objeto con información adicional:
+
+ DOMRequest
+
+

Véase también

+ diff --git a/files/es/web/api/domerror/index.html b/files/es/web/api/domerror/index.html new file mode 100644 index 0000000000..d0768d0b41 --- /dev/null +++ b/files/es/web/api/domerror/index.html @@ -0,0 +1,130 @@ +--- +title: DOMError +slug: Web/API/DOMError +translation_of: Web/API/DOMError +--- +

{{ APIRef("DOM") }}

+ +

La interfaz DOMError describe un objeto de error que contiene un nombre de error.

+ +

Propiedades

+ +
+
{{domxref("DOMError.name")}} {{readOnlyInline}}
+
Devuelve un {{ domxref("DOMString") }} representando uno de los tipos de errores listados a continuación.
+
+ +

Tipos de errores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeDescription
IndexSizeErrorIndice fuera de rango (Ej:. en un objeto {{ domxref("range") }}).
HierarchyRequestErrorEl árbol de jerarquías del nodo no es correcto.
WrongDocumentErrorEl objeto está en un {{ domxref("document") }} incorrecto.
InvalidCharacterErrorEl string contiene caracteres inválidos.
NoModificationAllowedErrorEl objeto no puede modificarse.
NotFoundErrorEl objeto no puede hallarse.
NotSupportedErrorLa operación no está permitida/soportada.
InvalidStateErrorEl objeto está inválido.
SyntaxErrorEl string no coincide con el patrón dado.
InvalidModificationErrorEl objeto no puede modificarse de esta manera.
NamespaceErrorLa operación no está permitida por Namespaces de XML.
InvalidAccessErrorEl objeto no soporta la operación o el argumento.
TypeMismatchErrorEl tipo de objeto no es el esperado.
SecurityErrorLa operación es insegura.
NetworkErrorError de red.
AbortErrorLa operación fue abortada.
URLMismatchErrorLa URL dada no coincide con otra URL a comparar.
QuotaExceededErrorLa quota ha sido excedida.
TimeoutErrorLa operación ha alcanzado su timeout.
InvalidNodeTypeErrorEl nodo (o uno de sus antecedentes) es incorrecto.
DataCloneErrorEl objeto no puede clonarse.
+ +

Compatibilidad de Navegadores

+ + + +

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

+ +

Especificaciones

+ +

 

+ + + +

Véase también

+ + diff --git a/files/es/web/api/domparser/index.html b/files/es/web/api/domparser/index.html new file mode 100644 index 0000000000..983d989f3e --- /dev/null +++ b/files/es/web/api/domparser/index.html @@ -0,0 +1,227 @@ +--- +title: DOMParser +slug: Web/API/DOMParser +translation_of: Web/API/DOMParser +--- +

{{APIRef("DOM")}}{{SeeCompatTable}}

+ +

DOMParser puede analizar gramaticalmente (parsear, en adelante) código XML o HTML almacenado en una cadena de texto y convertirlo en un Documento DOM. DOMParser está especificado en DOM Parsing and Serialization.

+ +

Tener en cuenta que XMLHttpRequest soporta parsear XML y HTML desde recursos direccionables por URL.

+ +

Creando un DOMParser

+ +

Para crear un objeto DOMParser simplemente usar new DOMParser().

+ +

Para más información sobre crear un objeto DOMParser en extensiones Firefox, por favor vea la documentación de nsIDOMParser.

+ +

Parseando XML

+ +

Una vez creado el objeto parseador, puedes parsear XML desde una cadena de texto usando el método parseFromString:

+ +
var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+
+ +

Manejo de errores

+ +

Es importante tener en cuenta que si el proceso de parseado falla, actualmente DOMParser no arroja una excepción, pero devuelve en cambio un documento de error (see {{Bug(45566)}}):

+ +
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
+(error description)
+<sourcetext>(a snippet of the source XML)</sourcetext>
+</parsererror>
+
+ +

Los errores de parseo son reportados también a la Consola de errores, con el URI del documento (ver debajo) como el origen del error.

+ +

Parseando un documento SVG o HTML

+ +

El DOMParser puede ser usado para parsear un documento SVG {{geckoRelease("10.0")}} o un documento HTML{{geckoRelease("12.0")}}. Hay 3 resultados diferentes posibles, dependiendo del tipo MIME dado. Si el tipo del MIME es text/xml, el objeto resultante será un XMLDocument, si el tipo MIME es image/svg+xml será un SVGDocument, y si el tipo MIME es text/html será un HTMLDocument.

+ +
var parser = new DOMParser();
+var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+// returns a Document, but not a SVGDocument nor a HTMLDocument
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
+// returns a SVGDocument, which also is a Document.
+
+parser = new DOMParser();
+doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
+// returns a HTMLDocument, which also is a Document.
+
+ +

Extensión HTML DOMParser para otros navegadores

+ +
/*
+ * DOMParser HTML extension
+ * 2012-09-04
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+
+/*! @source https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+	"use strict";
+
+	var
+	  proto = DOMParser.prototype
+	, nativeParse = proto.parseFromString
+	;
+
+	// Firefox/Opera/IE throw errors on unsupported types
+	try {
+		// WebKit returns null on unsupported types
+		if ((new DOMParser()).parseFromString("", "text/html")) {
+			// text/html parsing is natively supported
+			return;
+		}
+	} catch (ex) {}
+
+	proto.parseFromString = function(markup, type) {
+		if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+			var
+			  doc = document.implementation.createHTMLDocument("")
+			;
+	      		if (markup.toLowerCase().indexOf('<!doctype') > -1) {
+        			doc.documentElement.innerHTML = markup;
+      			}
+      			else {
+        			doc.body.innerHTML = markup;
+      			}
+			return doc;
+		} else {
+			return nativeParse.apply(this, arguments);
+		}
+	};
+}(DOMParser));
+
+ +

DOMParser de Chrome/JSM/XPCOM/Privileged Scope

+ +

Ver artículo aquí: nsIDOMParser

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM Parsing', '#the-domparser-interface', 'DOMParser')}}{{Spec2('DOM Parsing')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
XML support{{CompatChrome(1)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}{{CompatIE(9)}}{{CompatOpera(8)}}{{CompatSafari(3.2)}}
SVG support{{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(10.0)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(3.2)}}
HTML support{{CompatChrome(30)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(12.0)}}{{CompatIE(10)}}{{CompatOpera(17)}}{{CompatSafari(7.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
XML support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
SVG support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(10.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
HTML support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(12.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/domstring/cadenas_binarias/index.html b/files/es/web/api/domstring/cadenas_binarias/index.html new file mode 100644 index 0000000000..a52358f62c --- /dev/null +++ b/files/es/web/api/domstring/cadenas_binarias/index.html @@ -0,0 +1,31 @@ +--- +title: Cadenas binarias +slug: Web/API/DOMString/Cadenas_binarias +tags: + - Arreglos tipados JavaScript + - Cadena + - Cadena de caracteres + - DOM + - JavaScript + - Referencia + - String +translation_of: Web/API/DOMString/Binary +--- +

{{jsxref("String", "Cadenas JavaScript")}} son cadenas codificadas en UTF-16. Esto significa que cada unidad de código requiere dos bytes de memoria y puede representar 65535 puntos de código diferentes. Un subconjunto de estas cadenas está representado por cadenas UTF-16 que contienen solo caracteres ASCII (es decir, caracteres cuyo punto de código no excede 127). Por ejemplo, la cadena "¡Hola mundo!" pertenece al subconjunto ASCII, mientras que la cadena "ÀÈÌÒÙ" no. Una cadena binaria es un concepto similar al subconjunto ASCII, pero en lugar de limitar el rango a 127, permite hasta 255 puntos de código. Sin embargo, su propósito no es representar caracteres, sino datos binarios. El tamaño de los datos así representados es el doble de lo que sería en formato binario normal, sin embargo, esto no será visible para el usuario final, ya que la longitud de las cadenas de JavaScript se calcula usando dos bytes como unidad.

+ +

Las cadenas binarias no forman parte del diseño del lenguaje JavaScript. Sin embargo, al menos una función nativa requiere cadenas binarias como entrada, {{domxref("WindowBase64.btoa", "btoa()")}}: invocarla en una cadena que contiene puntos de código mayores de 255 causará un error Caracter fuera de rango.

+ +

La razón que llevó al uso de unidades de código UTF-16 como marcadores de posición para los números uint8 es que a medida que las aplicaciones web se vuelven cada vez más poderosas (agregando funciones como manipulación de audio y video, acceso a datos sin procesar usando WebSockets, y así sucesivamente) ha quedado claro que hay ocasiones en las que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar.

+ +

En el pasado, esto se tenía que simular tratando los datos sin procesar como string y utilizar el método charCodeAt() para leer los bytes del búfer de datos (es decir, usando cadenas binarias). Sin embargo, esto es lento y propenso a errores, debido a la necesidad de múltiples conversiones (especialmente si los datos binarios en realidad no son datos en formato de bytes, sino, por ejemplo, enteros de 32 bits o flotantes).

+ +

Los arreglos tipados en JavaScript proporcionan un mecanismo para acceder a datos binarios sin procesar mucho más eficientemente. La API de StringView cuyo constructor no es nativo está un nivel por encima de los arreglos tipados y proporciona una interfaz para cadenas similar a la de C.

+ +

Ve también

+ + diff --git a/files/es/web/api/domstring/index.html b/files/es/web/api/domstring/index.html new file mode 100644 index 0000000000..3809094105 --- /dev/null +++ b/files/es/web/api/domstring/index.html @@ -0,0 +1,60 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - Referencia + - Referencia DOM Gecko + - Referência DOM + - String + - WebAPI +translation_of: Web/API/DOMString +--- +

{{APIRef("DOM")}}

+ +

DOMString es un String UTF-16. Dado que JavaScript ya usa estos strings, se mapea DOMString directamente a {{jsxref("String")}}.

+ +

Pasarle null a un método o parámetro que acepte unDOMString suele convertirse a texto como "null".

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Reescritura de la definición que elimina casos extraños.
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Sin cambios desde {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Sin cambios desde {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Ver también

+ + diff --git a/files/es/web/api/dragevent/index.html b/files/es/web/api/dragevent/index.html new file mode 100644 index 0000000000..8599ef6b93 --- /dev/null +++ b/files/es/web/api/dragevent/index.html @@ -0,0 +1,110 @@ +--- +title: DragEvent +slug: Web/API/DragEvent +tags: + - API + - DragEvent + - Referencia + - arrastrar y soltar + - drag and drop +translation_of: Web/API/DragEvent +--- +
{{APIRef("HTML Drag and Drop API")}}
+ +

La interfaz DragEvent es un {{domxref("Event","evento DOM")}} que representa una interacción de arrastrar y soltar. El usuario inicia un arrastre posicionando un dispositivo puntero (como un ratón) en la superficie táctil y luego arrastra el puntero a una nueva posición (como como elemento del DOM). Las aplicaciones son libres de interpretar una interacción de arrastrar y soltar en una manera específica a la aplicación.

+ +

Esta interfaz hereda propiedades de {{domxref("MouseEvent")}} y {{domxref("Event")}}.

+ +

Propiedades

+ +
+
{{domxref('DragEvent.dataTransfer')}} {{readonlyInline}}
+
Los datos que son transferidos durante una interacción de arrastrar y soltar.
+
+ +

Constructores

+ +

A pesar que esta interfaz tiene un constructor, no es posible crear un objeto DataTransfer útil desde código, ya que los objetos {{domxref("DataTransfer")}} tienen un modelo de procesamiento y seguridad que está coordinado por el navegador durante el arrastrar y soltar.

+ +
+
{{domxref("DragEvent.DragEvent", "DragEvent()")}}
+
Crea un DragEvent sintético y que no es de confianza.
+
+ +

Tipos de eventos

+ +
+
{{event('drag')}}
+
Este evento es lanzado cuando un elemento o selección de texto está siendo arrastrado.
+
{{event('dragend')}}
+
Este evento es lanzado cuando la operación de arrastrar está siendo terminada (liberando el botón del ratón o pulsando la tecla de escape).
+
{{event('dragenter')}}
+
Este evento es lanzado cuando un elemento arrastrado ingresa a un destino de liberación válido.
+
{{event('dragexit')}}
+
Este evento es lanzado cuando un elemento ya no es el destino de selección inmediato de la operación de arrastre.
+
{{event('dragleave')}}
+
Este evento es lanzado cuando el elemento arrastrado o selección de texto deja un destino de liberación válido.
+
{{event('dragover')}}
+
Este evento es lanzado continuamente cuando un elemento o selección de texto está siendo arrastrado y el puntero del ratón está sobre un destino de liberación válido (cada 50 ms CUANDO el ratón no se está moviendo SINO más rápido entre 5 ms (movimiento lento) y 1 ms (movimiento rápido) aproximadamente. Este patrón de disparo es diferente que {{Event("mouseover")}}).
+
{{event('dragstart')}}
+
Este evento es lanzado cuando el usuario empieza a arrastrar un elemento o selección de texto.
+
{{event('drop')}}
+
Este evento es lanzado cuando un elemento o selección de texto es soltado en un destino válido.
+
+ +

GlobalEventHandlers

+ +
+
{{domxref('GlobalEventHandlers.ondrag')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('drag')}}.
+
{{domxref('GlobalEventHandlers.ondragend')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragend')}}.
+
{{domxref('GlobalEventHandlers.ondragenter')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragenter')}}.
+
{{domxref('GlobalEventHandlers.ondragexit')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragexit')}}.
+
{{domxref('GlobalEventHandlers.ondragleave')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragleave')}}.
+
{{domxref('GlobalEventHandlers.ondragover')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragover')}}.
+
{{domxref('GlobalEventHandlers.ondragstart')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('dragstart')}}.
+
{{domxref('GlobalEventHandlers.ondrop')}}
+
Un {{domxref('GlobalEventHandlers','manejador de evento global')}} para el evento {{event('drop')}}.
+
+ +

Ejemplo

+ +

Un ejemplo para cada propiedad, constructor, tipo de evento, y manejador de evento global están incluidos en sus respectivas páginas de referencia.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("HTML WHATWG", "#dragevent", "DragEvent")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "editing.html#the-dragevent-interface", "DragEvent")}}{{Spec2("HTML5.1")}}Definición inicial
+ +

Compatibilidad entre navegadores

+ + + +

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

+ +

Ver también

+ +

{{page("/en-US/docs/Web/API/DataTransfer", "Ver también")}}

diff --git a/files/es/web/api/element/accesskey/index.html b/files/es/web/api/element/accesskey/index.html new file mode 100644 index 0000000000..a21970faa6 --- /dev/null +++ b/files/es/web/api/element/accesskey/index.html @@ -0,0 +1,22 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - Propiedad + - necesidades de contenido +translation_of: Web/API/HTMLElement/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La propiedad Element.accessKey establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.

+ +
+

Nota: la propiedad Element.accessKey se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes  en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).

+
+ +

 

+ +

 

diff --git a/files/es/web/api/element/animate/index.html b/files/es/web/api/element/animate/index.html new file mode 100644 index 0000000000..e491efc0d7 --- /dev/null +++ b/files/es/web/api/element/animate/index.html @@ -0,0 +1,208 @@ +--- +title: Element.animate() +slug: Web/API/Element/animate +tags: + - API + - Animacion + - Elemento + - Experimental + - metodo + - waapi + - web animations api +translation_of: Web/API/Element/animate +--- +
+

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

+ +

El método Element.animate() es un método abreviado para crear y reproducir una animación en un elemento. Devuelve la instancia creada de un objeto {{domxref("Animation")}} .

+ +

Síntaxis

+ +
+
element.animate(keyframes, options); 
+
+ +

Parámetros

+ +
+
keyframes
+
+

Un Objeto formateado para representar un conjunto de fotogramas clave.

+
+
opciones
+
Puede ser un entero representando la duración de la animación  (en milisegundos), o un Objeto conteniendo una o más propiedades de sincronización: 
+
+
+
id {{optional_inline}}
+
Una propiedad única para animar(): a DOMString con la cual se hace referencia a la animación.
+
+ {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}}
+
+ +

Opciones Futuras

+ +

Las siguientes opciones actualmente no se han enviado a todos los sitios, pero se añadirán en un futuro próximo.

+ +
+
composite {{optional_inline}}
+
Determina como se combinan los valores entre esta animación y otra, animaciones independientes sin especificar la composición de su propia operación. Valores predeterminados a reemplazar. +
    +
  • añadir dicta un efecto aditivo, donde cada iteración sucesiva se basa en la anterior. Por ejemplo con transform, a translateX(-200px) no anularía un valor anterior rotate(20deg) que resultaría  translateX(-200px) rotate(20deg).
    • +
  • acumular es similar pero un poco más inteligente: blur(2) y blur(5) resultaría  blur(7), no blur(2) blur(5).
    • +
  • remplazar sobreescribe el valor anterior con el nuevo.
    • +
+
+
iterationComposite {{optional_inline}}
+
Determina como se construyen los valores de una iteración a otra en esta animación. . Se puede configurar para acumular o reemplazar (ver arriba). Valores predeterminados para reemplazar.
+
spacing {{optional_inline}}
+
Determina como los keyframes sin compensación temporal  deben ser distribuidos durante la duración de la animación. Valores predeterminados para distribuir. +
    +
  • distribuir las posiciones de los keyframes para que la diferencia entre el anterior y el  posterior estén compensadas por igual , lo que es como decir, sin ninguna compensación, esto distribuirá equitativamente los keyframes a traves del tiempo de ejecución.
    • +
  • situar las posiciones de los keyframes de manera que  igualen la diferencia entre los siguientes valores de una propiedad especifica sincronizada  , lo que es como decir,  que los keyframes estén más espaciados cuanto mayores sean los valores de sus propiedades.
    • +
+ +

 

+
+
+ +

Valor de retorno

+ +

Returns an {{domxref("Animation")}}.

+ +

Ejemplo

+ +

En la demostración Down the Rabbit Hole (con la Web Animation API), utilizamos el método conveniente, animate() para inmediatamente crear y ejecutar una animación en el elemento  #tunnel  para hacerlo fluir hacia arriba, indefinidamente. Observar el orden  de paso de los objetos por los keyframes y también el bloque de opciones de sincronización.

+ +
document.getElementById("tunnel").animate([
+  // keyframes
+  { transform: 'translateY(0px)' },
+  { transform: 'translateY(-300px)' }
+], {
+  // timing options
+  duration: 1000,
+  iterations: Infinity
+});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#the-animatable-interface', 'animate()' )}}{{Spec2('Web Animations')}}Initial definition
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome("36")}}{{CompatUnknown}}{{ CompatGeckoDesktop("48.0")}}{{CompatUnknown}}23{{CompatUnknown}}
id option{{CompatChrome(50.0)}}{{CompatUnknown}}{{ CompatGeckoDesktop("48.0")}}{{CompatUnknown}}37{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome(39.0)}}{{CompatChrome(39.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
id option{{CompatNo}}{{CompatChrome(50.0)}}{{CompatChrome(50.0)}}{{ CompatGeckoMobile("48.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
composite, iterationComposite, and spacing options{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver También

+ + +
diff --git a/files/es/web/api/element/attachshadow/index.html b/files/es/web/api/element/attachshadow/index.html new file mode 100644 index 0000000000..33e1d119ae --- /dev/null +++ b/files/es/web/api/element/attachshadow/index.html @@ -0,0 +1,158 @@ +--- +title: Element.attachShadow() +slug: Web/API/Element/attachShadow +translation_of: Web/API/Element/attachShadow +--- +
{{APIRef('Shadow DOM')}}
+ +

El método Element.attachShadow() adjunta un árbol DOM "sombra" al elemento especificado y devuelve una referencia a su raíz {{domxref("ShadowRoot")}}.

+ +

Elementos a los que puedes adjuntar un DOM "sombra"

+ +

No se puede adjuntar un DOM "sombra" a cualquier tipo de elemento. Hay algunos que no pueden tenerlo por razones de seguridad (por ejemplo {{htmlelement("a")}}), y algunos más. Los siguientes elementos de la lista pueden adjuntar un DOM "sombra":

+ + + +

Syntaxis

+ +
var shadowroot = element.attachShadow(shadowRootInit);
+
+ +

Parámetros

+ +
+
shadowRootInit
+
Un diccionario ShadowRootInit , que puede contener los siguientes campos: +
+
mode
+
+

Una cadena que especifique el modo de encapsulación para el árbol DOM "sombra". Este puede tener uno de los siguientes valores:

+ +
    +
  • open: Los elementos del árbol son accesibles desde fuera del elemento, por ejemplo usando {{domxref("Element.shadowRoot")}}:
    + + 
    element.shadowRoot; // Returns a ShadowRoot obj
    +
    • +
  • closed: Deniega el acceso a lo(s) nodo(s) desde fuera mediante JavaScript:
    + + 
    element.shadowRoot; // Returns null
+
    +
    • +
+
+
delegatesFocus
+
Un booleano que, si se establece a true, mitiga problemas de comportamiento relativos a la capacidad de tomar el foco. Cuando se hace click en una parte del DOM "sombra" que no puede tomar el foco, la primera parte del árbol que pueda tomar el foco lo hará, y le dará cualquier estilo disponible mediante CSS con :focus.
+
+
+
+ +

Valor retorno

+ +

Devuelve un objeto {{domxref("ShadowRoot")}}.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
ExcepciónExplicación
InvalidStateErrorEl elemento que estás intentando adjuntar ya tiene una DOM "sombra".
NotSupportedErrorEstás intentando adjuntar DOM "sombra" a un elemento fuera del espacio de nombres HTML, o el elemento no puede tener una DOM "sombra". adjunta (ver abajo).
+ +

Ejemplos

+ +

Los siguientes ejemplos están tomados de la demo word-count-web-component  (verlo también en modo live). Puedes ver que usamos attachShadow() en mitad del código para crear una DOM "sombra", a la que luego adjuntamos el contenido de nuesto elemento personalizado.

+ +
// Crear una clase para el elemento
+class CuentaPalabras extends HTMLParagraphElement {
+  constructor() {
+    // Siemmpre llamar a super en el constructor
+    super();
+
+    // contar las palabras en el nodo padre
+    var cpPadre = this.parentNode;
+
+    function cuentaPalabras(nodo){
+      var texto = nodo.innerText || nodo.textContent
+      return texto.trim().split(/\s+/g).length;
+    }
+
+    var cuenta = 'Palabras: ' + cuentaPalabras(cpPadre);
+
+    // Crear un DOM "sombra"
+    var sombra = this.attachShadow({mode: 'open'});
+
+    // Crear el nodo de texto y añadirle el contador de palabras
+    var texto = document.createElement('span');
+    texto.textContent = count;
+
+    // Añadirlo a la sombra
+    sombra.appendChild(texto);
+
+    // Actualizar el contador cuando el contenido del elemento cambie
+    setInterval(function() {
+      var cuenta = 'Palabras: ' + cuentaPalabras(cpPadre);
+      texto.textContent = cuenta;
+    }, 200)
+  }
+}
+
+// Definir el nuevo elemento
+customElements.define('cuenta-palabras', CuentaPalabras , { extends: 'p' });
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-attachshadow', 'attachShadow()')}}{{Spec2('DOM WHATWG')}}
+ +

Compatibilidad navegadores

+ + + +

{{Compat("api.Element.attachShadow")}}

diff --git a/files/es/web/api/element/attributes/index.html b/files/es/web/api/element/attributes/index.html new file mode 100644 index 0000000000..3b0f1da338 --- /dev/null +++ b/files/es/web/api/element/attributes/index.html @@ -0,0 +1,157 @@ +--- +title: Element.attributes +slug: Web/API/Element/attributes +translation_of: Web/API/Element/attributes +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.attributes retorna una colección "viva" cuyos nodos son todos los atributos registrados en el nodo especificado. Es un {{domxref("NamedNodeMap")}}, no un Array, así que no tiene los métodos de {{jsxref("Array")}} y los índices de nodo {{domxref("Attr")}} pueden diferir en cada navegador. Más concretamente attributes es un conjunto de pares de cadenas nombre/valor que representan la información relativa a cada atributo.

+ +

Sintaxis

+ +
var attr = element.attributes;
+
+ +

Ejemplo

+ +

Ejemplos básicos

+ +
// Obtiene el primer elemento <p> en el documento
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+ +

Enumerando atributos de elemtentos

+ +

La indexación numérica es útil para recorrer de todos los atributos de un elemento.
+ El siguiente ejemplo corre a través de los atributors del elemento con id "p1" en el documento, e imprime el valor de cada atributo.

+ +
<!DOCTYPE html>
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function listAttributes() {
+     var paragraph = document.getElementById("paragraph");
+     var result = document.getElementById("result");
+
+     // Primero, verifiquenmos que el párrafo tiene algún atributo
+     if (paragraph.hasAttributes()) {
+       var attrs = paragraph.attributes;
+       var output = "";
+       for(var i = attrs.length - 1; i >= 0; i--) {
+         output += attrs[i].name + "->" + attrs[i].value;
+       }
+       result.value = output;
+     } else {
+       result.value = "No hay atributos que mostrar";
+     }
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="paragraph" style="color: green;">Párrafo de ejemplo</p>
+ <form action="">
+  <p>
+    <input type="button" value="Muestra el nombre cada atributo y su valor"
+      onclick="listAttributes();">
+    <input id="result" type="text" value="">
+  </p>
+ </form>
+</body>
+</html>
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-attributes', 'Element.attributes')}}{{Spec2('DOM WHATWG')}}From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} a {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM3 Core')}}Sin cambios desde {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM2 Core')}}Sin cambios desde {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-84CF096', 'Element.attributes')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]6.0 [2]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] Anes de Firefox 22, este atributo era implementado en la interfaz  {{domxref("Node")}} (heredada de {{domxref("Element")}}). Se trasladó a esta interfaz de acuerdo a la especificación y el uso en otros navegadores.

+ +

[2] Internet Explorer 5.5 retorna un mapa conteniendo los valores en lugar de objetos attribute.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/classlist/index.html b/files/es/web/api/element/classlist/index.html new file mode 100644 index 0000000000..4d45dd2e31 --- /dev/null +++ b/files/es/web/api/element/classlist/index.html @@ -0,0 +1,215 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +tags: + - API + - DOM + - Elemento + - Propiedad + - Referencia + - Sólo-Lectura +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura Element.classList devuelve una colección activa de DOMTokenList de los atributos de clase del elemento.

+ +

Usar classList es una forma práctica de acceder a la lista de clases de un elemento como una cadena de texto delimitada por espacios a través de {{domxref("element.className")}}.

+ +

Sintaxis

+ +
var elementClasses = elementNodeReference.classList;
+
+ +

elementClasses es un DOMTokenList que representa el atributo clase de elementNodeReference. Si el atributo clase no está definido o está vacío, elementClasses.length devuelve 0. element.classList por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos add() y remove().

+ +

Métodos

+ +
+
add( String [, String] )
+
Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.
+
remove( String [, String] )
+
Elimina las clases indicadas.
+ Nota: Eliminar una clase que no existe NO produce un error.
+
item( Number )
+
Devuelve el valor de la clase por índice en la colección.
+
toggle( String [, force] )
+
Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la elimina y devuelve false, si no, la añade y devuelve true.
+ Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como true, se añade la clase indicada, y si se evalúa como false, la elimina.
+
contains( String )
+
Comprueba si la clase indicada existe en el atributo de clase del elemento.
+
replace( oldClass, newClass )
+
Reemplaza una clase existente por una nueva.
+
+ +

Ejemplos

+ +
// div es una referencia de objeto al elemento <div> con class="foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// si visible está presente la elimina, de lo contrario la añade
+div.classList.toggle("visible");
+
+// añadir/eliminar visible, dependiendo de la condición, i menor que 10
+div.classList.toggle("visible", i < 10 );
+
+alert(div.classList.contains("foo"));
+
+// añadir o eliminar varias clases
+div.classList.add("foo", "bar");
+div.classList.remove("foo", "bar");
+
+// reemplazar la clase "foo" por "bar"
+div.classList.replace("foo", "bar");
+ +
+

Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Nota en la especificación de HTML relacionada con el atributo {{htmlattrxref("class")}}.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Definición inicial
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
Segundo argumento del método toggle()2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Múltiples argumentos para add() y remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace()61{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
Segundo argumento del método toggle()4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
Múltiples argumentos para add() y remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] No soportado para elementos SVG.  Vea un informe de Microsoft acerca de esto.
+ [2] Internet Explorer no lo implementa actualmente. Vea un informe de Microsoft acerca de esto.

+ +

Vea también

+ + diff --git a/files/es/web/api/element/classname/index.html b/files/es/web/api/element/classname/index.html new file mode 100644 index 0000000000..be9b04b4b0 --- /dev/null +++ b/files/es/web/api/element/classname/index.html @@ -0,0 +1,130 @@ +--- +title: Element.className +slug: Web/API/Element/className +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

Resumen

+ +

className obtiene y establece el valor del atributo class del elemento especificado.

+ +

Sintaxis

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Ejemplo

+ +
let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}
+ +

Notas

+ +

El nombre className es utilizado para esta propiedad en lugar de class para evitar conflictos con la palabra clave "class" existente en muchos de los lenguages que son usados para manipular el DOM.

+ +

className también puede ser una instancia de {{domxref("SVGAnimatedString")}} si element es un {{domxref("SVGElement")}}. Es mejor de obtener/establecer la propiedad className de un elemento utilizando {{domxref("Element.getAttribute")}} y {{domxref("Element.setAttribute")}} si estás tratando con elementos SVG.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/element/click_event/index.html b/files/es/web/api/element/click_event/index.html new file mode 100644 index 0000000000..9a74553c13 --- /dev/null +++ b/files/es/web/api/element/click_event/index.html @@ -0,0 +1,280 @@ +--- +title: click +slug: Web/API/Element/click_event +translation_of: Web/API/Element/click_event +--- +

El evento "click" se dispara cuando se presiona el botón de un dispositivo de entrada (Mouse o Mousepad) sobre un elemento. 

+ +

Información General

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Yes
+
Cancelable
+
Yes
+
Target
+
Element
+
Default Action
+
Varies
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Ejemplo

+ +
<div id="prueba"></div>
+
+<script>
+  document.getElementById("prueba").addEventListener("click", function( event ) {
+    // presentar la cuenta de clicks realizados sobre el elemento con id "prueba"
+    event.target.innerHTML = "Conteo de Clicks: " + event.detail;
+  }, false);
+</script>
+
+ +

Compatibilidad con Navegadores

+ +

Internet Explorer

+ +

Internet Explorer 8 & 9 tiene problemas con elementos con un  valor {{cssxref("background-color")}} de transparent que es sobrepuesto a los demas elementos por lo que no les permite recibir el evento.

+ +

Un ejemplo aqui

+ +

¿Cómo evitarlo?

+ + + +

Safari Mobile

+ +

En Safari Mobile 7.0+ ( también algunas versiones anteriores) presenta un problema cuando se da click sobre elementos que no son tipicamente interactivos como es el caso de un div. 

+ +

¿Cómo evitarlo?

+ + + +

Lo siguientes elementos son considerados por Safari típicamente interactivos

+ + + +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En elementos inhabilitados{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}[2]{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
En elementos inhabilitados{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sólo funciona para los tipos {{HTMLElement("textarea")}} elements and some {{HTMLElement("input")}} .

+ +

[2] Internet Explorer sólo dispara el evento click en los elementos  {{HTMLElement("input")}} tipo checkbox o radio cuando se ha realizdo sobre ellos un doble click.

+ +

Véase también

+ + diff --git a/files/es/web/api/element/clientheight/index.html b/files/es/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..0784b49a36 --- /dev/null +++ b/files/es/web/api/element/clientheight/index.html @@ -0,0 +1,61 @@ +--- +title: Element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - Propiedad +translation_of: Web/API/Element/clientHeight +--- +

{{ APIRef("DOM") }}

+ +

La propiedad de sólo lectura Element.clientHeight devuelve la altura de un elemento en píxeles, incluyendo el padding pero no las barras horizontales, el borde o el margen.

+ +

clientHeight puede ser calculado como CSS height + CSS padding - alto de la barra horizontal (si existe).

+ +
+

Nota: Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var h = element.clientHeight;
+ +

h es un entero que representa el alto de element en píxeles.

+ +

Ejemplo

+ +

 

+ +

             Image:Dimensions-client.png

+ + +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}{{Spec2('CSSOM View')}} 
+ +

Notas

+ +

clientHeight es una propiedad introducida en el modelo de objeto de Internet Explorer.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/clientleft/index.html b/files/es/web/api/element/clientleft/index.html new file mode 100644 index 0000000000..e6ffc24faf --- /dev/null +++ b/files/es/web/api/element/clientleft/index.html @@ -0,0 +1,58 @@ +--- +title: element.clientLeft +slug: Web/API/Element/clientLeft +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/clientLeft +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

El ancho del borde izquierdo de un elemento en pixel. Incluye el ancho de la barra de desplazamiento vertical, si la dirección del texto esrtl (derecha a izquierda) y si hay un desbordamiento que provoque la aparición de la barra en el lado izquierdo. clientLeft NO incluyemargin-left o padding-left. clientLeft es de sólo lectura.

+ +

Las aplicaciones "Gecko-based applications" implementan clientLeft a partir de Gecko 1.9 (Firefox 3, ver {{ Bug(111207) }}). Esta propiedad no está implementada en Firefox 2 o anteriores.

+ +

Sintaxis

+ +
var left = element.clientLeft;
+
+ +

Ejemplo

+ +
+
+

padding-top

+ +

Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.

+ +

Image:BirmanCat.jpgTodos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.

+ +

La imagen del gato y el texto vienen de www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:clientLeft.png

+ +

La barra de desplazamiento vertical en el lado izquierdo, aparece cuando la propiedad layout.scrollbar.side tiene el valor 1 o 3

+ +

Cuando la propiedad layout.scrollbar.side se establece a 1 o a 3 y la dirección de texto está puesta a RTL, entonces la barra de desplazamiento se pone a la izquierda y esto afecta a la forma en que se calcula clientLeft.

+ +

Especificación

+ +

No es parte de ninguna especificación W3C.

+ +

Notas

+ +

clientLeft apareció por primera vez en el modelo de objetos de MS IE DHTML.

+ +

La posición de la barra de desplazamiento vertical en textosrtl depende de la preferencias de layout.scrollbar.side

+ +

Referencias

+ + diff --git a/files/es/web/api/element/clienttop/index.html b/files/es/web/api/element/clienttop/index.html new file mode 100644 index 0000000000..063ac86c13 --- /dev/null +++ b/files/es/web/api/element/clienttop/index.html @@ -0,0 +1,54 @@ +--- +title: element.clientTop +slug: Web/API/Element/clientTop +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/clientTop +--- +

 

+ +

{{ Fx_minversion_header(3) }} {{ ApiRef() }}

+ +

Resumen

+ +

El ancho del borde superior de un elemento en pixel. No incluye ni elmargin-top , ni elpadding-top . clientTop es de sólo lectura.

+ +

Las aplicaciones "Gecko-based applications" implementan el uso de clientTop a partir de Gecko 1.9 (Firefox 3,ver {{ Bug(111207) }}). Esta propiedad no está disponible en Firefox 2 o anteriores.

+ +

Sintaxis

+ +
vartop = element.clientTop;
+
+ +

Ejemplo

+ +
+
+

padding-top

+ +

Suave, individualista y muy leal, los gatos de Birmania tienen un carácter entre los persas y los siameses. Si le gustan los gatos que no son agresivos, disfrutan estar entre los humanos y son generalmente tranquilos, esta es la raza para usted.

+ +

Image:BirmanCat.jpgTodos los Birmanos tienen pintas y coloración obscura en la cara, orejas, patas y cola.

+ +

La imagen del gato y el texto vienen de www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:clientTop.png

+ +

Especificación

+ +

No es parte de ninguna especificación W3C.

+ +

Notas

+ +

clientTop se presento por primera vez en el modelo de objetos de MS IE DHTML.

+ +

Referencias

+ + diff --git a/files/es/web/api/element/clientwidth/index.html b/files/es/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..bdf813c867 --- /dev/null +++ b/files/es/web/api/element/clientwidth/index.html @@ -0,0 +1,60 @@ +--- +title: Element.clientWidth +slug: Web/API/Element/clientWidth +translation_of: Web/API/Element/clientWidth +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.clientWidth es cero para elementos sin CSS o cajas de diseño (layout), en caso contrario es la anchura interior de un elemento en pixels, incluyendo la anchura de relleno (padding) pero no la anchura de la barra de desplazamiento vertical (si está presente, si está dibujada), el borde o el margen.

+ +
+

El valor de esta propiedad será redondeado a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var intElemClientWidth = element.clientWidth;
+
+ +

intElemClientWidth será un entero que corresponde con el clientWidth del elemento en pixels. clientWidth es de sólo-lectura.

+ +

Ejemplo

+ +

 

+ +

             Image:Dimensions-client.png

+ + +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('CSSOM View', '#dom-element-clientwidth', 'clientWidth')}}{{Spec2("CSSOM View")}} 
+ +

Notas

+ +

clientWidth fue introducida en el modelo de objetos DHTML de MS IE.

+ +

Compatibilidad con navegadores

+ +

{{Compat("api.Element.clientWidth")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/element/closest/index.html b/files/es/web/api/element/closest/index.html new file mode 100644 index 0000000000..ecf35158b5 --- /dev/null +++ b/files/es/web/api/element/closest/index.html @@ -0,0 +1,145 @@ +--- +title: Element.closest() +slug: Web/API/Element/closest +tags: + - API + - DOM + - Elemento + - Referencia + - metodo +translation_of: Web/API/Element/closest +--- +
{{APIRef('Shadow DOM')}}
+ +

El método closest() de la interfaz {{domxref("Element")}} devuelve el ascendiente más cercano al elemento actual (o el propio elemento actual) que coincida con el selector proporcionado por parámetro. Si no existe dicho ascendiente, devuelve null.

+ +

Sintaxis

+ +
var closestElement = element.closest(selectors);
+
+ +

Parámetros

+ + + +

Valor del resultado

+ + + +

Excepciones

+ + + +

Ejemplo

+ +

HTML

+ +
<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+ +

JavaScript

+ +
var el = document.getElementById('div-03');
+
+var r1 = el.closest("#div-02");
+// returns the element with the id=div-02
+
+var r2 = el.closest("div div");
+// returns the closest ancestor which is a div in div, here is div-03 itself
+
+var r3 = el.closest("article > div");
+// returns the closest ancestor which is a div and has a parent article, here is div-01
+
+var r4 = el.closest(":not(div)");
+// returns the closest ancestor which is not a div, here is the outmost article
+ +

Polyfill

+ +

Para los navegadores que no tengan soporte para Element.closest(), pero sí lo tengan para document.querySelectorAll() (o un equivalente prefijado, es decir IE9+), existe un polyfill:

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+if (!Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
+    var el = this;
+
+    do {
+      if (el.matches(s)) return el;
+      el = el.parentElement || el.parentNode;
+    } while (el !== null && el.nodeType === 1);
+    return null;
+  };
+}
+ +

Sin embargo, si realmente se necesita soporte para IE 8, entonces el siguiente polyfill servirá para conseguirlo de forma muy lenta, pero lo hará. Sin embargo, sólo admitirá selectores CSS 2.1 en IE 8, puede causar picos severos de retraso en sitios web en producción.

+ +
if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest =
+  function(s) {
+    var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i,
+        el = this;
+    do {
+      i = matches.length;
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
+    return el;
+  };
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}{{Spec2('DOM WHATWG')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("api.Element.closest")}}

+ +

Notas de compatibilidad

+ + +
+ +

Ver también

+ + diff --git a/files/es/web/api/element/computedstylemap/index.html b/files/es/web/api/element/computedstylemap/index.html new file mode 100644 index 0000000000..656312b1f5 --- /dev/null +++ b/files/es/web/api/element/computedstylemap/index.html @@ -0,0 +1,99 @@ +--- +title: Element.computedStyleMap() +slug: Web/API/Element/computedStyleMap +tags: + - API + - CSS Typed Object Model API + - Element + - Experimental + - Houdini + - Method + - Reference + - StylePropertyMapReadOnly + - computedStyleMap() +translation_of: Web/API/Element/computedStyleMap +--- +

{{APIRef("CSS Typed Object Model API")}}{{SeeCompatTable}}

+ +

El método computedStyleMap() de la interfaz {{domxref("Element")}} devuelve una interfaz {{domxref("StylePropertyMapReadOnly")}} que provee una representación de solo-lectura de un bloque de declaración de CSS que es una alternativa a {{domxref("CSSStyleDeclaration")}}.

+ +

Sintaxis

+ +
var stylePropertyMapReadOnly = Element.computedStyleMap()
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de resultado

+ +

Una interfaz {{domxref("StylePropertyMapReadOnly")}}.

+ +

Ejemplos

+ +

Comenzamos con algo de HTML simple: un párrafo con un enlace, y una lista de definición a la cual le añadiremos todos los pares de Propiedad CSS / Valor.

+ +
<p>
+   <a href="https://example.com">Link</a>
+</p>
+<dl id="regurgitation"></dl>
+ +

Añadimos un poco de CSS

+ +
a {
+  --colour: red;
+  color: var(--colour);
+}
+ +

Añadimos Javascript para tomar nuestro enlace y devolvemos una lista de definición de todos los valores de propiedades CSS usando computedStyleMap().

+ +
// obtenemos el elemento
+const myElement = document.querySelector('a');
+
+// obtenemos la <dl> que llenaremos
+const stylesList = document.querySelector('#regurgitation');
+
+// recuperamos todos los estilos calculados con computedStyleMap()
+const allComputedStyles = myElement.computedStyleMap();
+
+// iteramos a través del mapa de todas las propiedades y valores, añadiendo un <dt> y <dd> para cada mapa
+for (const [prop, val] of allComputedStyles) {
+	// propiedades
+	const cssProperty = document.createElement('dt');
+	cssProperty.appendChild(document.createTextNode(prop));
+	stylesList.appendChild(cssProperty);
+
+	// valores
+	const cssValue = document.createElement('dd');
+	cssValue.appendChild(document.createTextNode(val));
+	stylesList.appendChild(cssValue);
+}
+ +

En navegadores que soportan computedStyleMap(), verás una lista de todas las propiedades CSS y valores. En otros navegadores verás un enlace.

+ +

{{EmbedLiveSample("Examples", 300, 300)}}

+ +

¿Te diste cuenta cuántas propiedades CSS por defecto tenía un enlace? Actualiza el 'a' a un 'p', y notarás una diferencia en los valores calculados por defecto del margin-top y margin-bottom.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Typed OM','#dom-element-computedstylemap','computedStyleMap()')}}{{Spec2('CSS Typed OM')}}Definición inicial.
+ +

Compatibilidad con navedadores

+ + + +

{{Compat("api.Element.computedStyleMap")}}

diff --git a/files/es/web/api/element/currentstyle/index.html b/files/es/web/api/element/currentstyle/index.html new file mode 100644 index 0000000000..620ff01129 --- /dev/null +++ b/files/es/web/api/element/currentstyle/index.html @@ -0,0 +1,80 @@ +--- +title: Element.currentStyle +slug: Web/API/Element/currentStyle +tags: + - API + - Compatibilidad en los navegadores móviles + - Property +translation_of: Web/API/Element/currentStyle +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

Sumario

+ +

Element.currentStyle es una propiedad que es una alternativa propietaria del método estandarizado {{domxref("window.getComputedStyle")}} . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

+ +

Especificación

+ +

No forma parte de ninguna especificación.

+ +

Microsoft tiene una descripción MSDN.

+ +

Compatibilidad en los Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

Ver También

+ + diff --git a/files/es/web/api/element/getattribute/index.html b/files/es/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..91f55e2c43 --- /dev/null +++ b/files/es/web/api/element/getattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.getAttribute() +slug: Web/API/Element/getAttribute +tags: + - API + - DOM + - metodo +translation_of: Web/API/Element/getAttribute +--- +
{{APIRef("DOM")}}
+ +

Resumen

+ +

getAttribute() devuelve el valor del atributo especificado en el elemento. Si el atributo especificado no existe, el valor retornado puede ser tanto null como "" (una cadena vacía); ver {{Anch("Notes")}} para más detalles.

+ +

Sintaxis

+ +
var atributo = element.getAttribute(nombreAtributo);
+
+ +

donde

+ + + +

Ejemplo

+ +
var div1 = document.getElementById("div1");
+var align = div1.getAttribute("align");
+
+alert(align); // Muestra el valor de la alineación(align) del elemento con id="div1"
+ +

Notas

+ +

Cuando es invocado en un elemento HTML desde un DOM marcado como documento HTML, getAttribute() convierte a minúsculas el argumento antes de proceder.

+ +

Esencialmente todos los navegadores (Firefox, Internet Explorer, versiones recientes de Opera, Safari, Konqueror, y iCab, siendo una lista no exhaustiva) devuelven null cuando el atributo especificado no existe en el elemento especificado y esto es lo que establece el actual borrador de la especificación del DOM. Por otra parte, la antigua especificación del DOM 3 Core dice que el valor correcto de retorno es de hecho una cadena vacía, y algunas implementaciones de DOM aplican este comportamiento. La implementación de getAttribute en XUL (Gecko) sigue la especificación de DOM 3 Core y retorna una cadena vacía. Por consiguiente, es recomendable usar {{domxref("element.hasAttribute()")}} para verificar la existencia de un atributo previo a la utilización de getAttribute() si es posible que el atributo requerido no exista en el elemento especificado.

+ +
{{DOMAttributeMethods}}
+ +

Especificación

+ + diff --git a/files/es/web/api/element/getattributenodens/index.html b/files/es/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..07ca649174 --- /dev/null +++ b/files/es/web/api/element/getattributenodens/index.html @@ -0,0 +1,38 @@ +--- +title: Element.getAttributeNodeNS() +slug: Web/API/Element/getAttributeNodeNS +tags: + - API + - DOM + - Referencia + - metodo +translation_of: Web/API/Element/getAttributeNodeNS +--- +

{{ APIRef("DOM") }}

+ +

Sumario

+ +

Dados namespace y nodeName del element, devuelve su Attr .

+ +

Sintaxis

+ +
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
+
+ + + +

== Example == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top" </pre

+ +

Notas

+ +

getAttributeNodeNS es más específica getAttributeNode en el sentido de que puedes especificar atributos de un namespace en particular.  Su método setter es setAttributeNodeNS.

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: getAttributeNodeNS

diff --git a/files/es/web/api/element/getboundingclientrect/index.html b/files/es/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..9d1b6ae4bb --- /dev/null +++ b/files/es/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,98 @@ +--- +title: element.getBoundingClientRect +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Boundary + - Bounding + - Bounds + - CSSOM View + - Cliente + - DOM + - Elemento + - Minimo + - Referencia + - metodo +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

El método Element.getBoundingClientRect() devuelve el tamaño de un elemento y su posición relativa respecto a la ventana de visualización (viewport).

+ +

Sintaxis

+ +
domRect = element.getBoundingClientRect();
+ +

Valor

+ +

El valor devuelto es un objeto {{domxref("DOMRect")}} que es la unión de los rectángulos devueltos por {{domxref("Element.getClientRects", "getClientRects()")}}para el elemento, es decir, las CSS border-boxes asociadas con el elemento. El resultado es el rectángulo más pequeño que contiene al elemento completo, con las propiedades de solo lectura left, top, right, bottom, x, y, width, and height describiendo la border-box total en pixels. Excepto width and height las propiedades son relativas a la esquina superior izquierda (top-left) de la ventana.

+ +

Explicación de los valores DOMRect

+ +

Las border-boxes vacías son ignoradas. Si todas las border-boxes del elemento estan vacías, entonces se devuelve un rectángulo con width and height iguales a cero donde el top y el left son el top-left de la border-box de la primera CSS box (en onden de contenido) para el elemento.

+ +

La cantidad de scrolling realizado en la ventana (o cualquier otro elemento scrollable) se tiene en cuenta cuando se calcula el rectángulo. Esto implica que los bordes del rectángulo (top, left, bottom, and right) cambián sus valores cada vez que la posición de scrolling cambia (ya que sus valores no son absolutos sino relativos a la ventana). Si se necesita el bounding rectangle relativo a la esquina top-left del documento, hay que añadir la posición de scrolling actual a las propiedades top and left  (dicha posición de scrolling puede obtenerse usando {{domxref("window.scrollX")}} y {{domxref("window.scrollY")}}) para obtener el bounding rectangle independiente de la posición de scrolling.

+ +

Fallback para todos los navegadores

+ +

Los scripts que requieran una alta compatibilidad cross-browser pueden usar {{domxref("window.pageXOffset")}} y {{domxref("window.pageYOffset")}} en lugar de window.scrollX y window.scrollY. Si no se tiene acceso a esas propiedades puede usarse el siguiente código:

+ +
// Para scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
+// Para scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
+
+ +

Ejemplo

+ +
// rect es un objeto DOMRect con ocho propiedades: left, top, right, bottom, x, y, width, height
+var rect = obj.getBoundingClientRect();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-getboundingclientrect", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}Definición inicial
+ +

Notas

+ +

El objeto DOMRect devuelto puede modificarse en navegadores modernos. Esto no era así en versiones anteriores que devolvían DOMRectReadOnly de forma efectiva. Con IE y Edge, el hecho de no poder agregar propiedades faltantes a su objeto ClientRect MSDN: ClientRect, devuelto impide rellenar los valores x e y.

+ +

Debido a problemas de compatibilidad (ver a continuación), es más seguro confiar sólo en las propiedades left, top, right, and bottom. 

+ +

Las propiedades en el objeto DOMRect devuelto no son suyas. Mientras que el operador in y for...in encontrarán las propiedades devueltas, otras API como Object.keys() fallarán. Además, e inesperadamente, ES2015 y nuevas características como Object.assign() y los operadores rest/spread de los objetos, no podrán copiar las propiedades devueltas.

+ +
rect = elt.getBoundingClientRect()
+// El resultado en emptyObj es {}
+emptyObj = Object.assign({}, rect)
+emptyObj = { ...rect }
+{width, ...emptyObj} = rect
+
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Element.getBoundingClientRect")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/element/getclientrects/index.html b/files/es/web/api/element/getclientrects/index.html new file mode 100644 index 0000000000..507cda7bb8 --- /dev/null +++ b/files/es/web/api/element/getclientrects/index.html @@ -0,0 +1,54 @@ +--- +title: element.getClientRects +slug: Web/API/Element/getClientRects +tags: + - NeedsBrowserCompatibility + - NeedsExample + - NeedsLiveSample + - NeedsUpdate + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/getClientRects +--- +

 {{ ApiRef("DOM") }}

+ +

El método Element.getClientRects() devuelve una colección de objetos {{domxref("DOMRect")}} que indican los rectángulos que delimitan el rectángulo de cada línea de texto en el navegador.

+ +

Sintaxis

+ +
var rectCollection = object.getClientRects();
+ +

Devuelve

+ +

El valor devuelto es una colección de objetos rectangulares {{domxref("DOMRect")}}, uno para cada cuadro borde CSS asociado al elemento. Cada objeto {{domxref("DOMRect")}} contiene las propiedades de sólo lectura: left, top, right y bottom, que describen la caja, en pixeles, con el valor top-left relativo al valor top-left del viewport. En el caso de tablas con subtítulos, el subtítulo es incluido aún cuado esté fuera del cuadro borde de la tabla. En caso de ser ejecutado en algún elemento SVG que no sea el <svg> externo, el "viewport" al cual los rectángulos de resultado serán relativos será el "viewport" que establece el <svg> externo (y serán transformados por las trasnformaciones del <svg> externo, si estas existen).

+ +

{{ fx_minversion_note(3.5, "Firefox 3.5 ha agregado las propiedades width y height al objeto TextRectangle.") }}

+ +

La cantidad de desplazamiento que ha tenido el área del viewport (o cualquier otro elemento desplazable) se tiene en cuenta al calcular los rectángulos.

+ +

Los rectángulos devueltos no incluyen los márgenes de ningún elemento hijo que se haya podido haber desbordado.

+ +

Para los elementos de AREA en HTML, elementos SVG que no renderizen nada por si mismos, los elementos display:none, y generalmente cualquier elemento que no sea renderizado directamente, se devuelve una lista vacia.

+ +

Aún si la caja CSS tiene bordes vacios, se devuelven las coordenadas. Las coordenadas left, top, right y bottom pueden aún tener significado.

+ +

Es posible que los valores de desplazamiento sean fracciones de pixel.

+ +

Ejemplo

+ +
var rects = obj.getClientRects();
+var numLines = rects.length;
+
+ +

Especificación

+ +

No forma parte de ninguna especificación W3C.

+ +

Notas

+ +

getClientRects() apareció por primera vez en el modelo de objeto de MS IE DHTML.

+ +

Referencias

+ + diff --git a/files/es/web/api/element/getelementsbyclassname/index.html b/files/es/web/api/element/getelementsbyclassname/index.html new file mode 100644 index 0000000000..a1e6d7b3e3 --- /dev/null +++ b/files/es/web/api/element/getelementsbyclassname/index.html @@ -0,0 +1,112 @@ +--- +title: Element.getElementsByClassName() +slug: Web/API/Element/getElementsByClassName +translation_of: Web/API/Element/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

El método Element.getElementsByClassName() retorna una {{domxref("HTMLCollection")}} "viva" conteniendo todos los elementos hijos que tienen todos los nombres de clase dados. Cuando se llama en el objeto document, se realiza la búsqueda en el documento completo, incluyendo el nodo raíz.

+ +

De forma similar, el método {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} actúa en todo el documento; retornará los elementos que sean descendientes del documento raiz especificado que tengan los nombres de clase dados.

+ +

Sintaxis

+ +
var elements = element.getElementsByClassName(names);
+ + + +

Ejemplo

+ +

Obtiene todos los elementos que tienen una clase test:

+ +
element.getElementsByClassName('test');
+ +

Obtiene todos los elementos que tienen tanto la clase red como test:

+ +
element.getElementsByClassName('red test');
+ +

Obtiene todos los elementos que tienen la clase of test, dentro de un elemento que tiene el id main:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Podemos también usar métodos de  {{jsxref("Array.prototype")}} en cualquier {{ domxref("HTMLCollection") }} pasando el HTMLCollection como el valor this del método. Aquí encontramos todos los elementos {{HTMLElement("div")}} que tienen una clase test:

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'div';
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}{{Spec2('DOM WHATWG')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]9{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Anteriormente a Firefox 19, este método retornaba una {{domxref("NodeList")}}; se cambió para reflejar el cambio en la especificación.

+ +

[2] Safari en iOS 8 y OS X 10.10 retorna una {{domxref("NodeList")}}.

diff --git a/files/es/web/api/element/getelementsbytagname/index.html b/files/es/web/api/element/getelementsbytagname/index.html new file mode 100644 index 0000000000..6080c186af --- /dev/null +++ b/files/es/web/api/element/getelementsbytagname/index.html @@ -0,0 +1,50 @@ +--- +title: element.getElementsByTagName +slug: Web/API/Element/getElementsByTagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/getElementsByTagName +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve una lista de elementos que tienen un tag name determinado. Se explora el árbol por debajo del elemento dado, excluyendo el propio elemento.

+ +

Sintaxis

+ +
elements =element.getElementsByTagName(tagName)
+
+ + + +
+

En Firefox 2 (Gecko 1.8.1) y anteriores, este método no funcionaba correctamente si el árbol contenía algún elemento con etiqueta de nombre conteniendo espacios. (Ver {{ Bug(206053) }} para más detalles).

+ +

Es recomendable usar DOM:document.getElementsByTagNameNS cuando se manejan documentos con "multi-namespace".

+
+ +

Ejemplo

+ +
// comprueba la alineación de las celdas en una tabla.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagName("td");
+for (var i = 0; i < cells.length; i++) {
+    status = cells[i].getAttribute("status");
+    if ( status == "open") {
+        // grab the data
+    }
+}
+
+ +

Notas

+ +

element.getElementsByTagName es similar a document.getElementsByTagName, excepto por que su búsqueda está restringida a los elementos que descienden del elemento especificado.

+ +

Especificación

+ +

DOM Level 2 Core: Element.getElementsByTagName

diff --git a/files/es/web/api/element/getelementsbytagnamens/index.html b/files/es/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..3f8a92ef90 --- /dev/null +++ b/files/es/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,128 @@ +--- +title: Element.getElementsByTagNameNS() +slug: Web/API/Element/getElementsByTagNameNS +translation_of: Web/API/Element/getElementsByTagNameNS +--- +
{{APIRef("DOM")}}
+ +

El método Element.getElementsByTagNameNS() devuelve una {{domxref("HTMLCollection")}} viva de elementos con el nombre de etiqueta dado perteneciente al espacio de nombres dado. Es similar a {{Domxref("Document.getElementsByTagNameNS")}}, con la excepción de que su búsqueda está limitada a los descendientes del elemento especificado.

+ +

Sintaxis

+ +
elementos = elemento.getElementsByTagNameNS(espacioNombreURI, nombreLocal)
+ + + +

Ejemplo

+ +
// verifica la alineación en un número de celdas en una tabla en un documento XHTML.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
+
+for (var i = 0; i < cells.length; i++) {
+    var axis = cells[i].getAttribute("axis");
+    if (axis == "year") {
+        // obtiene los datos
+    }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-getelementsbytagnamens', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM WHATWG')}}Cambió el valor devuelto de {{domxref("NodeList")}} a {{domxref("HTMLCollection")}}.
{{SpecName('DOM3 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM3 Core')}}Sin cambios desde {{SpecName('DOM2 Core')}}.
{{SpecName('DOM2 Core', 'core.html#ID-A6C90942', 'Element.getElementsByTagNameNS()')}}{{Spec2('DOM2 Core')}}Definición inicial
+ +

Compatibilidad con los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]5.5{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]
getElementsByTagName("*")1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}6.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Inicialmente, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.

+ +

[2] El comportamiento de element.getElementsByTagNameNS cambió entre Firefox 3.5 y Firefox 3.6. En Firefox 3.5 y anteriores, esta función automáticamente convertía mayúsculas o minúsculas en las consultas, de manera que una búsqueda de "foo" encontraría "Foo" o "foo". En Firefox 3.6 y posteriores esta función es sensible a mayúsculas y minúsculas, por lo que una consulta por "foo" sólo encontrará "foo" y no "Foo". Para más información al respecto, por favor vea el comentario de Henri Sivonen sobre este cambio. También puede ver la parte relevante del estándar, que establece qué partes de la API son sensibles a mayúsculas y minúsculas y qué partes no.

+ +

Previo a Firefox 19, este método devolvía una {{domxref("NodeList")}}; luego fue modificado para reflejar el cambio en la especificación.

diff --git a/files/es/web/api/element/hasattribute/index.html b/files/es/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..ea7a38ddff --- /dev/null +++ b/files/es/web/api/element/hasattribute/index.html @@ -0,0 +1,123 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

El método Elemento.hasAttribute() devuelve un valor Booleano indicando si el elemento tiene el atributo especificado o no.

+ +

Sintaxis

+ +
var resultado = elemento.hasAttribute(nombre);
+
+ +
+
resultado
+
contendrá el valor devuelto (true o false).
+
nombre
+
consiste en una cadena de caracteres que representa el nombre del atributo a chequear.
+
+ +

Ejemplo

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // hacer algo
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Notas

+ +
{{DOMAttributeMethods}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}From {{SpecName('DOM3 Core')}}, moved from {{domxref("Node")}} to {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Initial definition.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/element/id/index.html b/files/es/web/api/element/id/index.html new file mode 100644 index 0000000000..b75cd87e77 --- /dev/null +++ b/files/es/web/api/element/id/index.html @@ -0,0 +1,119 @@ +--- +title: Element.id +slug: Web/API/Element/id +tags: + - API + - DOM + - Elemento + - Propiedad + - Referencia +translation_of: Web/API/Element/id +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

La propiedad Element.id representa el identificador del elemento, reflejando el atributo global de id.

+ +

debe ser un único documento, y con frecuencia es utilizado para recuperar el elemento usando {{domxref("document.getElementById", "getElementById")}}. Otros usos comunes de id incluyen la utilización de elementos ID como un selector cuando se está estilando el documento con CSS.

+ +
+

Nota: los identificadores distinguen mayúsculas y minúsculas, pero se debe evitar la creación de IDs que difieran solamente en la capitalization (ver diferenciación de mayúsculas y minúsculas en nombres y destacados ).

+
+ +

Síntasix

+ +
var idStr = elt.id; // Get the id.
+elt.id = idStr; // Set the id
+
+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-id', 'id')}}{{Spec2('DOM WHATWG')}}No change from {{SpecName('DOM2 HTML')}}.
{{SpecName('DOM2 HTML', 'html.html#ID-63534901', 'id')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM1')}}.
{{SpecName('DOM1', 'level-one-html.html#ID-63534901', 'id')}}{{Spec2('DOM1')}}Initial definition.
+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/element/index.html b/files/es/web/api/element/index.html new file mode 100644 index 0000000000..a689499051 --- /dev/null +++ b/files/es/web/api/element/index.html @@ -0,0 +1,539 @@ +--- +title: element +slug: Web/API/Element +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element +--- +

{{ ApiRef("DOM") }} Este capítulo proporciona una breve explicación para los métodos generales, las propiedades y los eventos disponibles para los elementos HTML y XML en el DOM de Gecko.

+ +

Varias especificaciones aplicadas a los elementos:

+ + + +

Los artículos listados aquí amplían lo antedicho e incluyen enlaces a la especificación apropiada del DOM de W3C.

+ +

Mientras que estas interfaces son generalmente compartidas por la mayoría de los elementos HTML y XML, hay muchas más especiales para los objetos particulares listados en la especificación HTML del DOM —por ejemplo las interfaces del elemento tabla de HTML y elemento formulario de HTML.

+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreDescripciónTipoDisponibilidad
attributesTodos los atributos asociados a un elemento.NamedNodeMappara todos
childNodesTodos los nodos hijos de un elemento.Listado de nudopara todos
classNameLa clase del elemento.Secuenciapara HTML, XUL
clientHeightEl alto interior del elemento.Númeropara HTML
clientWidthEl ancho interior del elemento.Númeropara HTML
dirLa direccionalidad del elemento.Secuenciapara HTML, XUL
firstChildEl primer hijo directo del elemento, null si no hay.Nudopara todos
idLa identificación del elemento.Secuenciapara HTML, XUL
innerHTMLEl contenido y el código que hay dentro del elemento.Secuenciapara HTML
langEl lenguaje de los atributos, texto y contenidos del elemento.Secuenciapara HTML
lastChildEl último hijo directo del elemento, null si no hay.Nodepara todos
localNameLa parte local del nombre cualificado del elemento.Secuenciapara todos
NombreDescripciónTipoDisponibilidad
nameEl nombre del elemento.Secuenciapara HTML
namespaceURIEl URI del espacio de nombre de ese nodo, null si no está especificado.Secuenciapara todos
nextSiblingEl nodo inmediatamente posterior al primero dado en el árbol, null si no hay.Nudopara todos
nodeNameEl nombre del nodo de ese elemento.Secuenciapara todos
nodeTypeUn número que representa el tipo del nodo. Lo mismo que 1 para los elementos DOM.Númeropara todos
nodeValueEl valor del nodo. Lo mismo que null para los elementos DOM.Secuenciapara todos
offsetHeightEl alto de un elemento, tal cual está escrito en la composición.Númeropara HTML
offsetLeftLa distancia que hay desde el borde izquierdo del elemento al de su offsetParent.Númeropara HTML
offsetParentEl elemento del cual todos los cálculos de distancia son actualmente computados.Elementopara HTML
offsetTopLa distancia desde el borde superior del elemento hasta el de su offsetParent.Númeropara HTML
offsetWidthEl ancho de un elemento, tal cual está escrito en la composición.Númeropara HTML
ownerDocumentEl documento en el cual está ese nodo, null si no hay.Documentopara todos
NombreDescripciónTipoDisponibilidad
parentNodeEl elemento original(padre) de ese nodo, null si no hay dentro del documento de DOM.Nudopara todos
prefixEl prefijo del espacio de nombre del nodo, null si no está especificado.Secuenciapara todos
previousSiblingEl nodo inmediatamente anterior al primero dado en el árbol , null si no hay.Nudopara todos
scrollHeightMuestra la altura de deslizamiento del elemento.Númeropara HTML
scrollLeftObtiene/establece el offset de scroll izquierdo de un elemento.Númeropara HTML
scrollTopObtiene/establece el offset de scroll superior de un elemento.Númeropara HTML
scrollWidthMuestra el ancho de deslizamiento de un elemento.Númeropara HTML
styleUn objeto representando las declaraciones de los atributos de estilo del elemento.Estilo CSSpara HTML, XUL
tabIndexObtiene/establece la posición del elemento en el órden de tabulación.Númeropara HTML
tagNameEl nombre de la etiqueta para el elemento dado.Secuenciapara todos
textContentObtiene/establece los contenidos textuales de un elemento y todos sus descendentes.Secuenciapara todos
+ +

Métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre y DescripciónDevuelveDisponible
addEventListener( type, handler, bubble)
+ Registra un controlador de evento para un tipo de evento específico en un elemento.		-Todos
appendChild( appendedNode )
+ Inserta un nodo así como el último nodo hijo de este elemento.		NodeTodos
blur()
+ Quita el foco del teclado del elemento actual.		-para HTML, XUL
click()
+ Simula un clic sobre el elemento actual.		-para HTML, XUL
cloneNode( deep)
+ Hace copia de un nudo, y opcionalmente, de todo sus contenidos		Nodepara Todos
dispatchEvent( event )
+ Envía un evento a este nodo en el DOM.		BooleanTodos
getAttribute( name )
+ Devuelve el valor de un atributo nombrado desde el nodo actual.		ObjectTodos
getAttributeNS( namespace, name )
+ Devuelve el valor del atributo con el nombre especificado, desde el nodo actual.		ObjectTodos
getAttributeNode( name )
+ Devuelve la representación del nodo del atributo nombrado desde el nodo actual.		AttrTodos
getAttributeNodeNS( namespace, name )
+ Devuelve la representación del nodo del atributo con el nombre especificado, desde el nodo actual.		AttrTodos
Nombre y DescripciónDevuelveDisponibilidad
getElementsByTagName( name )
+ Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta particular, desde el elemento actual.		NodeSetTodos
getElementsByTagNameNS( namespace, name )
+ Devuelve un conjunto de todos los elementos descendentes, de un nombre de etiqueta y espacio particular, desde el elemento actual.		NodeSetTodos
hasAttribute( name )
+ Verifica si el elemento tiene el atributo especificado o no.		BooleanTodos
hasAttributeNS( namespace, name )
+ Verifica si el elemento tiene el atributo especificado, en el nombre de espacio especificado o no.		BooleanTodos
hasAttributes()
+ Verifica si el elemento tiene o no algún atributo.		BooleanTodos
hasChildNodes()
+ Verifica si el elemento tiene nodos hijos o no.		BooleanTodos
insertBefore( insertedNode, adjacentNode )
+ Inserta el primer nodo antes que el segundo, Nodo hijo en el DOM.		NodeTodos
normalize()
+ Limpia todos los nodos de texto debajo de este elemento (une lo adyacente, quita lo vacío).		-Todos
removeAttribute( name )
+ Quita el atributo nombrado desde el nodo actual.		-All
removeAttributeNS( namespace, name )
+ Quita el atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
Nombre y DescripciónDevuelveDisponibilidad
removeAttributeNode( name )
+ Quita la representación del nodo del atributo nombrado desde el nodo actual.		-Todos
removeChild( removedNode )
+ Quita el nodo hijo desde el elemento actual.		NodeTodos
removeEventListener( type, handler )
+ Quita un oyente de evento desde el elemento.		-Todos
replaceChild( insertedNode, replacedNode )
+ Reemplaza un nodo hijo en el elemento actual con otro.		NodeTodos
scrollIntoView( alignWithTop )
+ Recorre la página hasta que el elemento se obtiene en la vista.		-HTML
setAttribute( name, value )
+ Establece el valor de un atributo nombrado desde el nodo actual.		-Todos
setAttributeNS( namespace, name, value )
+ Establece el valor del atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
setAttributeNode( name, attrNode )
+ Establece la representación del nodo del atributo nombrado desde el nodo actual.		-Todos
setAttributeNodeNS( namespace, name, attrNode )
+ Establece la representación del nodo del atributo con el nombre y nombre de espacio especificado desde el nodo actual.		-Todos
+ +

Eventos

+ +

Son propiedades correspondientes a los atributos del evento "on" en HTML.

+ +

A diferencia de los atributos correspondientes, los valores de esas propiedades son funciones (o cualquier otro objeto trabajando con la interfaz EventListener) más bien que una cadena de carácteres. En efecto, asignar un atributo de evento en HTML crea una función envolvente alrededor del código especificado. Por ejemplo, el siguiente HTML:

+ +
<div onclick="foo();">clic aquí!</div>
+
+ +

Si element es una referencia a esta div, el valor de element.onclick será:

+ +
function onclick(event) {
+   foo();
+}
+
+ +

El objeto event es pasado al parámetro event de esta función envolvente.

+ +
+
onblur - (al quitar el foco)
+
Devuelve el código de manejo de evento para el evento blur.
+
+ +
+
onchange - (al modificar)
+
Devuelve el código de manejo de evento para el evento change.
+
+ +
+
onclick - (al hacer clic)
+
Devuelve el código de manejo de evento para el evento onclick.
+
+ +
+
ondblclick - (al hacer doble clic)
+
Devuelve el código de manejo de evento para el evento ondblclick.
+
+ +
+
onfocus - (al poner el foco)
+
Devuelve el código de manejo de evento para el evento onfocus.
+
+ +
+
onkeydown - (al tener una tecla apretada)
+
Devuelve el código de manejo de evento para el evento onkeydown.
+
+ +
+
onkeypress - (al apretar una tecla)
+
Devuelve el código de manejo de evento para el evento onkeypress.
+
+ +
+
onkeyup - (al soltar una tecla)
+
Devuelve el código de manejo de evento para el evento onkeyup.
+
+ +
+
onmousedown - (al tener el botón del ratón apretado)
+
Devuelve el código de manejo de evento para el evento onmousedown.
+
+ +
+
onmousemove - (al mover el ratón)
+
Devuelve el código de manejo de evento para el evento onmousemove.
+
+ +
+
onmouseout - (al quitar el puntero del ratón)
+
Devuelve el código de manejo de evento para el evento onmouseout.
+
+ +
+
onmouseover - (al pasar el ratón encima)
+
Devuelve el código de manejo de evento para el evento onmouseover.
+
+ +
+
onmouseup - (al soltar el botón del ratón)
+
Devuelve el código de manejo de evento para el evento onmouseup.
+
+ +
+
onresize - (al re-dimensionar la pantalla)
+
Devuelve el código de manejo de evento para el evento onresize.
+
diff --git a/files/es/web/api/element/innerhtml/index.html b/files/es/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..b0e9552b47 --- /dev/null +++ b/files/es/web/api/element/innerhtml/index.html @@ -0,0 +1,151 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/Element/innerHTML +--- +

{{APIRef("DOM")}}

+ +

Resumen

+ +

La propiedad Element.innerHTML devuelve o establece la sintaxis HTML describiendo los descendientes del elemento.

+ +

Al establecerse se reemplaza la sintaxis HTML del elemento por la nueva.

+ +
Nota: Si un nodo tiene un texto secundario que incluye los caracteres (&), (<), o (>), innerHTML devuelve estos caracteres como &amp, &lt y &gt respectivamente. Use {{ domxref("Node.textContent") }} para conseguir una copia correcta del contenido de estos nodos de texto.
+ +

Para insertar el código HTML en el documento en lugar de cambiar el contenido de un elemento, use el método insertAdjacentHTML().

+ +

Sintaxis

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+ +

Valor

+ +

La variable constante content contiene un DOMString que contiene el código HTML serializado describiendo todos los descendientes de element. Cuando se establece el valor de innerHTML, se eliminan todos los descendientes de element, analiza la cadena htmString y asigna los nodos resultantes como descendientes de element.

+ +

Excepciones

+ +
+
SyntaxError
+
Se intentó establecer el valor de innerHTML utilizando una cadena que no está formada correctamente en HTML
+
NoModificationAllowedError
+
Se intentó insertar el código HTML en un nodo cuyo elemento primario es document.
+
+ +

Notas de uso

+ +

La propiedad innerHTML de muchos tipos de elementos—incluyendo {{ HTMLElement("body") }} o {{ HTMLElement("html") }}—puede ser devuelta o establecida. Esta propiedad se puede usar para ver el código HTML de la página actual, incluida la que haya sido modificada dinámicamente:

+ +

Devolver la sintaxis HTML de un elemento

+ +

Devolver el valor de innerHTMLhace que el agente de usuario serialice el fragmento HTML compuesto por los descendientes del elemento. La cadena resultante es devuelta.

+ +
const content = element.innerHTML;
+
+ +

Esto le permite ver la sintaxis HTML de los nodos contenidos en el elemento.

+ +

Reemplazar el contenido de un elemento

+ +

Esta propiedad proporciona una forma sencilla de cambiar completamente los contenidos de un elemento por contenido nuevo. Por ejemplo, los contenidos completos del cuerpo del documento se pueden borrar así:

+ +
document.body.innerHTML = "";  // Reemplaza el contenido de <body> con una cadena vacía
+
+ +

El siguiente ejemplo recupera la sintaxis HTML actual del documento y reemplaza los caracteres "<" con la entidad HTML "&lt;", convirtiendo esencialmente el HTML en texto plano. Esto luego se envuelve en un elemento <pre>. Entonces el valor de innerHTML se cambia a esta nueva cadena. Como resultado, se muestra en pantalla el código fuente completo de la página.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+
+ +
+

Esta propiedad fue inicialmente implementada por navegadores web, y luego especificada por el WHATWG y el W3C en HTML5. Implementaciones antiguas no la implementarán exactamente igual. Por ejemplo, cuando el texto es ingresado en una caja de texto multilinea (elemento textarea), Internet Explorer cambiará el valor de la propiedad innerHTML del elemento textarea, mientras que los navegadores Gecko no lo hacen.

+
+ +

Consideración de seguridad

+ +

No es extraño que innerHTML sea usado para  introducir texto en una página web. Esto añade un riesgo de seguridad.

+ +
//ejemplo 1
+var name = "Juan";
+// asumiendo que 'el' es un elemento de HTML DOM
+el.innerHTML = name; // sin peligro
+
+// ...
+
+//ejemplo 2
+name = "<script>alert('Soy Juan con una alerta molesta!')</script>";
+el.innerHTML = name; // fíjese que el texto es molesto y no es realmente lo que se esperaba.
+
+ +

Aunque esto, el ejemplo 2, puede parecer un ataque cross-site scripting, el resultado es inofensivo, ya que HTML5 especifica que un tag <script> insertado a través innerHTML no debe ejecutarse.

+ +

Sin embargo, hay maneras de ejecutar JavaScript sin necesidad de utilizar el elemento <script>, por lo que todavía hay un riesgo de seguridad cada vez que se utiliza innerHTML para establecer cadenas de texto sobre las que no tiene control. Por ejemplo:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // con peligro, la alerta ahora si es mostrada
+ +

Por esa razón, cuando solo tratamos con texto, es recomendable no usar innerHTML, sino Node.textContent, que no interpretará la cadena pasada como HTML, sino como texto plano.

+ +

Ejemplo

+ +
<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Documento sin título</title>
+  </head>
+  <body>
+    <div id="txt">
+      <p>primer parrafo hijo de div id="txt"</p>
+      <p>segundo parrafo hijo de id="txt" txt</p>
+    </div>
+  </body>
+</html>
+ +
txt = document.getElementById("txt");
+console.log(txt.innerHTML);
+/*
+La siguiente cadena (string) se muestra en la ventana de la consola:
+<p>primer parrafo hijo de div id="txt"</p>
+<p>segundo parrafo hijo de id="txt" txt</p>
+*/
+ +

Especificaciones

+ + + +

Ver también

+ + + +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
diff --git a/files/es/web/api/element/insertadjacentelement/index.html b/files/es/web/api/element/insertadjacentelement/index.html new file mode 100644 index 0000000000..4f06780e1e --- /dev/null +++ b/files/es/web/api/element/insertadjacentelement/index.html @@ -0,0 +1,115 @@ +--- +title: Element.insertAdjacentElement() +slug: Web/API/Element/insertAdjacentElement +translation_of: Web/API/Element/insertAdjacentElement +--- +

{{APIRef("DOM")}}

+ +

El método insertAdjacentElement() inserta un elemento nodo dado en una posición dada con respecto al elemento sobre el que se invoca.

+ +

Sintaxis

+ +
elementoObjetivo.insertAdjacentElement(posición, elemento);
+ +

Parameters

+ +
+
posición
+
Un {{domxref("DOMString")}} representando la posición relativa al elementoObjetivo; debe ser una de las siguientes cadenas: +
    +
  • 'beforebegin': Antes del elementoObjetivo.
    • +
  • 'afterbegin': Dentro del elementoObjetivo, antes de su primer hijo.
    • +
  • 'beforeend': Dentro del elementoObjetivo, después de su último hijo.
    • +
  • 'afterend': Después del elementoObjetivo.
    • +
+
+
elemento
+
El elemento HTML a ser insertado.
+
+ +

Valor devuelto

+ +

El elemento insertado  o null, si la inserción falla.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
ExcepciónExplicación
SyntaxErrorLa posición especificada no tiene un valor reconocido.
TypeErrorEl elemento especificado no es un elemento válido.
+ +

Visualización de los nombres de posición

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Nota: Las posiciones beforebegin y afterend sólo funcionan si el nodo está en un árbol y tiene un padre.
+ +

Ejemplo

+ +
beforeBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  activeElem.insertAdjacentElement('beforebegin',tempDiv);
+  setListener(tempDiv);
+});
+
+afterBtn.addEventListener('click', function() {
+  var tempDiv = document.createElement('div');
+  tempDiv.style.backgroundColor = randomColor();
+  activeElem.insertAdjacentElement('afterend',tempDiv);
+  setListener(tempDiv);
+});
+ +

Mira nuestro insertAdjacentElement.html demo en Github (mira el código fuente también.) Aquí tenemos una  secuencia de elementos {{htmlelement("div")}} dentro de un contenedor. Cuando uno es clickeado, se torna en seleccionado y tu puedes presionar los botones Insert before e Insert after para insertar nuevos divs antes o despues del elemento seleccionado usando insertAdjacentElement().

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-element-insertadjacentelement', 'insertAdjacentElement()')}}{{ Spec2('DOM WHATWG') }}
+ +

Compatibilidad con Navegadores

+ +

{{Compat("api.Element.insertAdjacentElement")}}

+ +

Mira también

+ + diff --git a/files/es/web/api/element/insertadjacenthtml/index.html b/files/es/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..03be31a430 --- /dev/null +++ b/files/es/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,99 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - API + - Cambiando el DOM + - DOM + - HTML + - Insertando Elementos + - Insertando Nodos + - Referencia + - insertAdjacentHTML + - metodo +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

EL método insertAdjacentHTML() de la interfaz {{domxref("Element")}} analiza la cadena de texto introducida como cadena HTML o XML e inserta al árbol DOM los nodos resultantes de dicho análisis en la posición especificada. Este método no re-analiza el elemento sobre el cual se está invocando y por lo tanto no corrompe los elementos ya existentes dentro de dicho elemento. Esto evita el paso adicional de la serialización, haciéndolo mucho más rápido que la manipulación directa con {{domxref("Element.innerHTML", "innerHTML")}}.

+ +

Sintaxis

+ +
element.insertAdjacentHTML(posición, texto);
+ +

Parámetros

+ +
+
posición
+
Un {{domxref("DOMString")}} que representa la posición relativa al elemento, y deberá ser una de las siguientes cadenas: +
    +
  • 'beforebegin': Antes que el propio elemento.
    • +
  • 'afterbegin': Justo dentro del elemento, antes de su primer elemento hijo.
    • +
  • 'beforeend': Justo dentro del elemento, después de su último elemento hijo.
    • +
  • 'afterend': Después del propio elemento.
    • +
+
+
texto
+
Es la cadena a ser analizada como HTML o XML e insertada en el árbol.
+
+ +

Visualizacion de las posiciones

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Nota: Las posiciones beforebegin y afterend funcionan únicamente si el nodo se encuentra en el árbol DOM y tiene un elemento padre.
+ +

Ejemplo

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// En este punto, la nueva estructura es:
+// <div id="one">one</div><div id="two">two</div>
+ +

Notas

+ +

Consideraciones de seguridad

+ +

Cuando se inserte texto HTML en una página usando insertAdjacentHTML() debe tener cuidado de no usar cadenas de texto que no contengan las secuencias de escape pertinentes según sea el caso.

+ +

Se recomienda no usar insertAdjacentHTML() cuando se pretende insertar texto plano; en su lugar, se debe utilizar la propiedad {{domxref("Node.textContent")}} o el método {{domxref("Element.insertAdjacentText()")}}. Este método no interpreta el contenido pasado como HTML, si no que lo inserta como texto plano.

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }}
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/element/localname/index.html b/files/es/web/api/element/localname/index.html new file mode 100644 index 0000000000..0876729853 --- /dev/null +++ b/files/es/web/api/element/localname/index.html @@ -0,0 +1,152 @@ +--- +title: Element.localName +slug: Web/API/Element/localName +tags: + - API + - Compatibilidad de los Navegadores en Móviles + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/localName +--- +
{{APIRef("DOM")}}
+ +

La propiedad únicamente de lectura Element.localName devuelve la parte local del nombre calificado de un objeto.

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz{{domxref("Node")}}.

+
+ +

Sintasix

+ +
name = element.localName
+
+ +

Valor de Retorno

+ +

 {{domxref("DOMString")}} que representa la parte local del nombre cualificado del elemento.

+ +

Ejemplo

+ +

(debe ser servido con contenido tipo XML , como text/xml o application/xhtml+xml.)

+ +
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script type="application/javascript"><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <svg:svg version="1.1"
+    width="100px" height="100px"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+  <textarea id="text" rows="4" cols="55"/>
+</body>
+</html>
+
+ +

Notas

+ +

El nombre local de un nodo es la parte del nombre completo del nodo que va situado después de los dos puntos. Nombres calificados se utilizan normalmente en XML como parte del espacio de los nombres (s) de los documentos particulares XML . Por ejemplo, en el nombre calificado ecomm : socios,  socios es el nombre local y ecomm es el prefijo:

+ +
1  <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm">
+2   <ecomm:partners>
+3    <ecomm:partner id="1001">Tony's Syrup Warehouse
+4     </ecomm:partner>
+5    </ecomm:partner>
+6  </ecomm:business>
+ +
+

Nota: En {{Gecko("1.9.2")}} y anteriores,devuelve la versión en mayúsculas del nombre local para elementos HTML en HTML DOMs (en contraposición a elementos XHTML en XML DOMs). En versiones posteriores, en concordancia con HTML5,la propiedad devuelve en el caso de almacenamiento interno DOM ,  minúscula para ambos elementos HTML en HTML DOM y elementos XHTML en DOM XML. La propiedad {{domxref("element.tagName","tagName")}} continua devolviéndolo en mayúsculas para elementos HTML en HTML DOMs.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM4', '#interface-element', 'Element.localName')}}{{Spec2('DOM4')}}definición inicial
+ +

Compatibilidad de los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba disponible previamente en la  {{domxref("Node")}} API.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/matches/index.html b/files/es/web/api/element/matches/index.html new file mode 100644 index 0000000000..eef4ae271d --- /dev/null +++ b/files/es/web/api/element/matches/index.html @@ -0,0 +1,120 @@ +--- +title: Element.matches() +slug: Web/API/Element/matches +tags: + - API + - DOM + - Elemento + - Referencia + - metodo + - msMatchesSelector + - webkitMatchesSelector +translation_of: Web/API/Element/matches +--- +
{{APIRef("DOM")}}
+ +

El método matches() comprueba si el {{domxref("Element")}} sería seleccionable por el selector CSS especificado en la cadena; en caso contrario, retorna false.

+ +

Sintaxis

+ +
var result = element.matches(selectorString);
+
+ +

Parámetros

+ +

selectorString es una cadena de texto que representa el selector a probar.

+ +

Valor devuelto

+ +

result es un {{domxref("Boolean")}}.

+ +

Excepciones

+ +
+
SYNTAX_ERR
+
La cadena especificada como selector no es válida.
+
+ +

Ejemplo

+ +
<ul id="aves">
+  <li>Loro de alas naranja</li>
+  <li class="amenazada">Ágila Filipina</li>
+  <li>Gran Pelícano Blancpo/li>
+</ul>
+
+<script type="text/javascript">
+  var aves = document.getElementsByTagName('li');
+
+  for (var i = 0; i < aves.length; i++) {
+    if (aves[i].matches('.amenazada')) {
+      console.log('El ' + aves[i].textContent + ' está amenazada de extinción!');
+    }
+  }
+</script>
+
+ +

Esto mostrará "El Águila Filipina está amenazada de extinción!" en el log de la consola, dado que el elemento tiene un atributo class con valor amenazada.

+ +

Polyfill

+ +

Para navegadores que no soportan Element.matches() o Element.matchesSelector(), pero aun incorporan soporte para document.querySelectorAll(), existe un polyfill:

+ +
if (!Element.prototype.matches) {
+    Element.prototype.matches =
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector ||
+        function(s) {
+            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+                i = matches.length;
+            while (--i >= 0 && matches.item(i) !== this) {}
+            return i > -1;
+        };
+}
+ +

However, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (ej. soporte IE9+).

+ +
if (!Element.prototype.matches) {
+  Element.prototype.matches = Element.prototype.msMatchesSelector ||
+                              Element.prototype.webkitMatchesSelector;
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-element-matches', 'Element.prototype.matches')}}{{Spec2('DOM WHATWG')}}Definición Inicial
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Element.matches")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/element/mousedown_event/index.html b/files/es/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..4a207e28f3 --- /dev/null +++ b/files/es/web/api/element/mousedown_event/index.html @@ -0,0 +1,223 @@ +--- +title: mousedown +slug: Web/API/Element/mousedown_event +tags: + - API + - DOM + - Evento + - Interfaz +translation_of: Web/API/Element/mousedown_event +--- +

El evento mousedown se activa cuando el botón de un dispositivo apuntador (usualmente el botón de un ratón) es presionado en un elemento.

+ +

General info

+ +
+
Especificación
+
DOM L3
+
Interface
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Sí
+
Cancelable
+
Sí
+
Target
+
Elemento
+
Default Action
+
Varios: Comenzar una acción de arrastrar y soltar; comenzar la selección de un texto; comenzar una interacción de desplazamiento (en combinación con el botón medio del mouse, si es soportado)
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
On disabled form elements{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On disabled form elements{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Sólo funciona para elementos {{HTMLElement("textarea")}} y algunos elementos tipo {{HTMLElement("input")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/name/index.html b/files/es/web/api/element/name/index.html new file mode 100644 index 0000000000..717ad9dd3c --- /dev/null +++ b/files/es/web/api/element/name/index.html @@ -0,0 +1,79 @@ +--- +title: Element.name +slug: Web/API/Element/name +tags: + - API + - Compatibilidad de los navegadores + - DOM + - Elemento + - Propiedad + - Referencia + - Web + - actualizacion +translation_of: Web/API +--- +

{{ APIRef("DOM") }}

+ +

Sumario

+ +

name obtiene o establece la propiedad del nombre de un objeto DOM; sólo se aplica a los siguientes elementos: {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.

+ +
+

Nota: La propiedad name no esixte para otros elementos; a diferencia de tagName y nodeName, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.

+
+ +

name puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una configuración y con la colección de elementos de la configuración. cuando utilizamos una configuración o  elementos de una colección, puede devolver un solo elemento o una colección.

+ +

Síntasix

+ +
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+ +

Ejemplo

+ +
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // Get a reference to the first element in the form
+  var formElement = document.forms['formA'].elements[0];
+
+  // Give it a name
+  formElement.name = 'inputA';
+
+  // Show the value of the input
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+ +

Notas

+ +

En Internet Explorer (IE), la propiedad name de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada

+ +

Especificaciones

+ +

W3C DOM 2 HTML Specification:

+ + diff --git a/files/es/web/api/element/namespaceuri/index.html b/files/es/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..e2403ce0a5 --- /dev/null +++ b/files/es/web/api/element/namespaceuri/index.html @@ -0,0 +1,125 @@ +--- +title: Element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - API + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/namespaceURI +--- +
{{APIRef("DOM")}}
+ +

La propiedad Element.namespaceURI unicamente de lectura devuelve la URI namespace de el elemento, o la anula si el elemento no está en un namespace.

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.

+
+ +

Síntasix

+ +
namespace = element.namespaceURI
+ +

Ejemplo

+ +

En este snippet, un elemento está siendo examinado por su {{domxref("localName")}} y  su namespaceURI. Si el namespaceURI devuelve el  XUL namespace y el localName devuelve "browser", entonces  se entiende  que el nodo es  XUL <browser/>.

+ +
if (element.localName == "browser" &&
+    element.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // this is a XUL browser
+}
+ +

Notas

+ +

Esto no es un valor calculado resultante de una búsqueda de un namespace, basado en un examen de las declaraciones del namespace en el campo de aplicación. La URI del namespace de un nodo se congela en el momento de creación del nodo.

+ +
+
En Firefox 3.5 y versiones anteriores, la  URI del namespace  para elementos HTML en documentos HTML es nula. En versiones posteriores, de conformidad con HTML5, es http://www.w3.org/1999/xhtml como en XHTML. {{gecko_minversion_inline("1.9.2")}}
+ +
 
+
+ +

Se puede crear un elemento con el namespaceURI especificado utilizando el método  DOM Level 2  document.createElementNS.

+ +

El DOM no maneja o hace valer la validación del  namespace  por si mismo. Depende de la aplicación DOM para hacer cualquier validación necesaria. Date cuenta también que el prefijo del namespace , una vez que se asocia con un particular elemento, no puede ser cambiado.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}definición inicial
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba disponible previamente en  {{domxref("Node")}} API.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/ongotpointercapture/index.html b/files/es/web/api/element/ongotpointercapture/index.html new file mode 100644 index 0000000000..156c25f4fb --- /dev/null +++ b/files/es/web/api/element/ongotpointercapture/index.html @@ -0,0 +1,133 @@ +--- +title: Element.ongotpointercapture +slug: Web/API/Element/ongotpointercapture +tags: + - API + - Controlador + - DOM + - Elemento + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +--- +

{{ ApiRef("DOM") }}

+ +

ongotpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("gotpointercapture")}}.

+ +

Síntasix

+ +
var gotCaptureHandler = target.ongotpointercpature;
+
+ +

Valor de Retorno

+ +
+
gotCaptureHandler
+
El controlador de eventos  gotpointercapture para el elemento target.
+
+ +

Ejemplo

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's gotpointercapture handler
+ var gotCaptureHandler = ev.target.ongotpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/onlostpointercapture/index.html b/files/es/web/api/element/onlostpointercapture/index.html new file mode 100644 index 0000000000..336c672605 --- /dev/null +++ b/files/es/web/api/element/onlostpointercapture/index.html @@ -0,0 +1,132 @@ +--- +title: Element.onlostpointercapture +slug: Web/API/Element/onlostpointercapture +tags: + - API + - Controlador de Eventos + - DOM + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onlostpointercapture +--- +

{{ ApiRef("DOM") }}

+ +

onlostpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("lostpointercapture")}} .

+ +

Síntasix

+ +
var lostCaptureHandler = target.onlostpointercpature;
+
+ +

Valor de Retorno

+ +
+
lostCaptureHandler
+
El controlador de eventos  lostpointercapture para el elemento target.
+
+ +

Ejemplo

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's lostpointercapture handler
+ var lostCaptureHandler = ev.target.onlostpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/onwheel/index.html b/files/es/web/api/element/onwheel/index.html new file mode 100644 index 0000000000..b8f829969b --- /dev/null +++ b/files/es/web/api/element/onwheel/index.html @@ -0,0 +1,31 @@ +--- +title: Element.onwheel +slug: Web/API/Element/onwheel +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +

{{ ApiRef("DOM") }}

+ +

{{ non-standard_header() }}

+ +

Sumario

+ +

La propiedad  onwheel devuelve el código del controlador de eventos onwheel en el elemento actual.

+ +

Syntax

+ +
element.onwheel = event handling code
+
+ +

Notas

+ +

El evento wheel se genera cuando el usuario desplaza el contenido de un elemento.

+ +

Ver también

+ +

Bug 18542 – el atributo onmousewheel  debe ser reemplazado con onwheel

diff --git a/files/es/web/api/element/outerhtml/index.html b/files/es/web/api/element/outerhtml/index.html new file mode 100644 index 0000000000..7e9647f0db --- /dev/null +++ b/files/es/web/api/element/outerhtml/index.html @@ -0,0 +1,143 @@ +--- +title: Element.outerHTML +slug: Web/API/Element/outerHTML +translation_of: Web/API/Element/outerHTML +--- +

{{APIRef("DOM")}}

+ +

Resumen

+ +

El atributo outerHTML del interfaz DOM {{ domxref("element") }} obtiene el fragmento HTML serializado que describe el elemento incluyendo sus descendientes. Puede ser asignado para reemplazar el elemento por los nodos resultantes de examinar de la cadena proporcionada.

+ +

Sintaxis

+ +
var content = element.outerHTML;
+
+ +

Al retorno, content contendrá el fragmento de HTML serializado que describe al elemento element y a sus descendientes.

+ +
element.outerHTML = content;
+
+ +

Reemplaza el elemento por los nodos generados del análisis de la cadena content con el padre de element como el nodo de contexto para el algoritmo de procesado del fragmento.

+ +

Ejemplos

+ +

Ontener el valor de la propiedas outerHTML de un elemento:

+ +
// HTML:
+// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
+
+d = document.getElementById("d");
+dump(d.outerHTML);
+
+// La cadena '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
+// es volcada a la ventana de la consola.
+
+ +

Reemplazar un nodo mediante la asignación de la propiedad outerHTML:

+ +
// HTML:
+// <div id="container"><div id="d">This is a div.</div></div>
+
+container = document.getElementById("container");
+d = document.getElementById("d");
+console.log(container.firstChild.nodeName); // logs "DIV"
+
+d.outerHTML = "<p>This paragraph replaced the original div.</p>";
+console.log(container.firstChild.nodeName); // logs "P"
+
+// El div #d no será parte del árbol del documento,
+// el nuevo párrafo lo reemplazará.
+
+ +

Notas

+ +

Si el elemento no tiene elemento padre, esto es, si es el elemento raíz del documento, la asignación de su propiedad outerHTML lanzará una DOMException con el código de error NO_MODIFICATION_ALLOWED_ERR. Por ejemplo:

+ +
document.documentElement.outerHTML = "test";  // lanza una DOMException
+
+ +

Además, aunque el elemento es reemplazado en el documento, la variable cuya propiedad outerHTML fue asignada continuará conteniendo una referencia al elemento original:

+ +
var p = document.getElementsByTagName("p")[0];
+console.log(p.nodeName); // muestra: "P"
+p.outerHTML = "<div>This div replaced a paragraph.</div>";
+console.log(p.nodeName); // sigue mostrando: "P";
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM Parsing', '#outerhtml', 'Element.outerHTML')}}{{ Spec2('DOM Parsing') }} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{ CompatGeckoDesktop("11") }}0.24.071.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestiaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("11") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/element/prefix/index.html b/files/es/web/api/element/prefix/index.html new file mode 100644 index 0000000000..4fc15aed1a --- /dev/null +++ b/files/es/web/api/element/prefix/index.html @@ -0,0 +1,115 @@ +--- +title: Element.prefix +slug: Web/API/Element/prefix +tags: + - API + - Compatibilidad de los Navegadores en Móviles + - Compatibilidad de los navegadores + - DOM + - Propiedad + - Referencia +translation_of: Web/API/Element/prefix +--- +
{{APIRef("DOM")}}
+ +

La propiedad Element.prefix unicamente de lectura devuelve el namespace prefix de el elemento especificado, o null si no hay especificado prefix .

+ +
+

Antes de DOM4 esta API fué definida dentro de la interfaz {{domxref("Node")}}.

+
+ +

Síntasix

+ +
string = element.prefix
+
+ +

Ejemplos

+ +

Los siguientes registros "x" en la consola.

+ +
<x:div onclick="console.log(this.prefix)"/>
+
+ +

Notas

+ +

 Solo funcionará cuando se utiliza un analizador de namespace, ej. Cuando un documento es servido con un tipo XML MIME . No funcionará para documentos HTML.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#dom-element-prefix", "Element.prefix")}}{{Spec2("DOM4")}}Definición inicial
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico46.0[1]{{CompatGeckoDesktop("48.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("48.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API estaba previamente disponible en {{domxref("Node")}} API.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/queryselector/index.html b/files/es/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..8ce9cbe15f --- /dev/null +++ b/files/es/web/api/element/queryselector/index.html @@ -0,0 +1,187 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

El método querySelector() de la intrefaz  {{domxref("Element")}} devuelve el primer descendiente del elemento sobre el cual es invocado que coincida con el o los selectores especificados.

+ +

Sintáxis

+ +
elemento = elementoBase.querySelector(selectores);
+
+ +

Parametros

+ +
+
selectores
+
Es el grupo de selectores que servirán para filtrar los elementos descendientes del  {{domxref("Element")}} elementoBase; debe tener una sintáxis CSS válida o se producirá una excepción SyntaxError. Devuelve el primer elemento que encuentre que coincida con el grupo de selectores.
+
+ +

Valor devuelto

+ +

Devolverá el primer descendiente del elemento elementoBase que coincida con el grupo de selectores especificado. Para la comparación se recorrerá la jerarquía completa de elementos, incluyendo a aquellos que no son descendientes del elementoBase; en otras palabras, los selectores se aplican primero al documento completo, no sólo al elementoBase, creando una lista inicial de elementos potencialmente seleccionables. Después se examina dicha lista para comprobar qué elementos son descendientes del elementoBase. El método querySelector() devolverá el primero de dichos elementos descendientes.

+ +

Si no hubiera coincidencias, devolverá el valor null.

+ +

Excepciones

+ +
+
SyntaxError
+
Los selectores especificados no son válidos.
+
+ +

Ejemplos

+ +

Vamos a ver unos cuantos ejemplos.

+ +

Encontrar un elemento a traves del valor de sus atributos

+ +

En este primer ejemplo, obtendremos el primer elemento {{HTMLElement("style")}} del body del documento HTML que no tenga atributo "type" o cuyo atributo "type" sea igual a "text/css":

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Toda la jerarquía cuenta

+ +

El ejemplo que mostramos a continuación, demuestra que la jerarquía de todo el documento se tiene en cuenta cuando se aplican los selectores, de modo que se tienen en cuenta todos los niveles que se encuentran fuera de la jerarquía del elementoBase para localizar coincidencias.

+ +

HTML

+ +
<div>
+  <h5>Original content</h5>
+  <p>
+    inside paragraph
+    <span>inside span</span>
+    inside paragraph
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);
+ +

Resultado

+ +

El resultado es el siguiente:

+ +

{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}

+ +

Podemos ver que el selector "div span" coincide con el elemento {{HTMLElement("span")}}, aunque baseElement excluye el elemento {{domxref("div")}} al no ser parte de su selector.

+ +

Más ejemplos

+ +

Puedes ver más ejemplos sobre el formato apropiado para los selectores aquí {{domxref("Document.querySelector()")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}{{Spec2('DOM4')}}
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}}
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}}
+ +

Compatibilidad en los Navegadores

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(1) }}
+  		 +

{{ CompatGeckoDesktop(1.9.1) }}

+ 		+

9 [1]

+ 		+

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] querySelector() funciona en IE8, pero solo para selectores CSS 2.1.

+ +

También puedes consultar:

+ + diff --git a/files/es/web/api/element/removeattribute/index.html b/files/es/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..bc4573b0af --- /dev/null +++ b/files/es/web/api/element/removeattribute/index.html @@ -0,0 +1,41 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - DOM + - Elemento + - Referencia +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute elimina un atributo del elemento especificado.

+ +

Sintaxis

+ +
element.removeAttribute(attrName);
+
+ + + +

Ejemplo

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// ahora: <div id="div1" width="200px">
+
+ +

Notas

+ +

Debe usarse preferiblemente removeAttribute en lugar de establecer el valor del atributo a null usando setAttribute.

+ +

Intentar eliminar un atributo que no existe en el elemento no disparará una excepción.

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: removeAttribute (introducido en DOM Level 1 Core)

diff --git a/files/es/web/api/element/requestfullscreen/index.html b/files/es/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..823330dbe8 --- /dev/null +++ b/files/es/web/api/element/requestfullscreen/index.html @@ -0,0 +1,104 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +tags: + - Pantalla completa +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("DOM")}}{{seeCompatTable}}
+ +

Asynchronously requests that the element be made full-screen.

+ +

Syntax

+ +
element.mozRequestFullScreen();
+
+ +

Notas

+ +

No esta garantizado que el elemento se cambie a modo pantalla completa. Si la autorización para entrar a modo pantalla completa es permitida, el documento obtendrá un evento "mozfullscreenchange" para hacerle saber que esta en modo pantalla completa en ese momento. Si la autorización es denegada, el documento obtiene un evento "mozfullscreenerror".

+ +

Ve a Using full-screen mode para mas detalles y ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Initial definition
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxEdge
+ Internet Explorer		OperaSafari
Basic support{{CompatVersionUnknown}}{{property_prefix("webkit")}} (also as webkitRequestFullScreen){{CompatGeckoDesktop("9.0")}} (as mozRequestFullScreen)11 {{property_prefix("ms")}}¹
+ 20¹²		{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Mira también

+ + diff --git a/files/es/web/api/element/runtimestyle/index.html b/files/es/web/api/element/runtimestyle/index.html new file mode 100644 index 0000000000..289c3fe13b --- /dev/null +++ b/files/es/web/api/element/runtimestyle/index.html @@ -0,0 +1,82 @@ +--- +title: Element.runtimeStyle +slug: Web/API/Element/runtimeStyle +tags: + - API + - Necesidad de compatibilidad de los navegadores + - Necesidad de compatibilidad de los navegadores móviles + - Necesidad de ejemplo + - Propiedad +translation_of: Web/API/Element/runtimeStyle +--- +
{{APIRef("DOM")}}
+ +

{{ Non-standard_header() }}

+ +

Sumario

+ +

Element.runtimeStyle es una propiedad exclusiva similar a {{domxref ("HTMLElement.style")}}, excepto sus estilos, que tienen mayor precedencia y modificaciön.It no modifica el contenido del atributo  style . Está disponible en las versiones anteriores de Microsoft Internet Explorer.

+ +

especificación

+ +

No forma parte de ninguna especificación.

+ +

Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad de los Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}6{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/element/scrollheight/index.html b/files/es/web/api/element/scrollheight/index.html new file mode 100644 index 0000000000..d281054beb --- /dev/null +++ b/files/es/web/api/element/scrollheight/index.html @@ -0,0 +1,212 @@ +--- +title: Element.scrollHeight +slug: Web/API/Element/scrollHeight +tags: + - API + - Necesidad de Ejemplo de eliminación DHTML + - Propiedad + - Referencia + - Vista CSSOM +translation_of: Web/API/Element/scrollHeight +--- +

{{APIRef("DOM")}}

+ +

El elemento  Element.scrollHeight atributo unicamente de lectura es una medida de la altura del contenido de un elemento, incluyendo el contenido que no es visible en la pantalla debido al desbordamiento. El valor scrollHeight es igual a la altura mínima (donde la altura incluye el relleno , pero no incluye bordes y márgenes) El elemento lo necesita con el fin de adaptarse a todos los contenidos en el punto de vista sin necesidad de utilizar una barra de desplazamiento vertical. Incluye el  elemento relleno pero no su margen.

+ +
+

Esta propiedad redondea el valor a un número entero. Si se necesita un valor fraccionario, utilizar {{domxref("Element.getBoundingClientRect()")}}.

+
+ +

Sintaxis

+ +
var intElemScrollHeight = element.scrollHeight;
+ +

intElemScrollHeight es una variable que almacena un número entero correspondiente al valor  scrollHeight en pixels del elemento. scrollHeight es una propiedad unicamente de lectura.

+ +

Ejemplo

+ +
+
+

padding-top

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollHeight.png

+ +

Problemas y Soluciones

+ +

Determina si un elemento ha sido totalmente desplazado

+ +

La siguiente equivalencia devuelve true si un elemento está al final de su desplazamiento, false si no es así.

+ +
element.scrollHeight - element.scrollTop === element.clientHeight
+ +

scrollHeight Demo

+ +

Asociada al evento onscroll , esta equivalencia puede ser útil para determinar si un usuario ha leido un texto o no (ver también las propiedades de  element.scrollTop y  element.clientHeight ). Por ejemplo:

+ +

HTML

+ +
<form name="registration">
+  <p>
+    <textarea id="rules">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at laoreet magna.
+Aliquam erat volutpat. Praesent molestie, dolor ut eleifend aliquam, mi ligula ultrices sapien, quis cursus
+neque dui nec risus. Duis tincidunt lobortis purus eu aliquet. Quisque in dignissim magna. Aenean ac lorem at
+velit ultrices consequat. Nulla luctus nisi ut libero cursus ultrices. Pellentesque nec dignissim enim. Phasellus
+ut quam lacus, sed ultricies diam. Vestibulum convallis rutrum dolor, sit amet egestas velit scelerisque id.
+Proin non dignissim nisl. Sed mi odio, ullamcorper eget mattis id, malesuada vitae libero. Integer dolor lorem,
+mattis sed dapibus a, faucibus id metus. Duis iaculis dictum pulvinar. In nisi nibh, dapibus ac blandit at, porta
+at arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent
+dictum ipsum aliquet erat eleifend sit amet sollicitudin felis tempus. Aliquam congue cursus venenatis. Maecenas
+luctus pellentesque placerat. Mauris nisl odio, condimentum sed fringilla a, consectetur id ligula. Praesent sem
+sem, aliquet non faucibus vitae, iaculis nec elit. Nullam volutpat, lectus et blandit bibendum, nulla lorem congue
+turpis, ac pretium tortor sem ut nibh. Donec vel mi in ligula hendrerit sagittis. Donec faucibus viverra fermentum.
+Fusce in arcu arcu. Nullam at dignissim massa. Cras nibh est, pretium sit amet faucibus eget, sollicitudin in
+ligula. Vivamus vitae urna mauris, eget euismod nunc. Aenean semper gravida enim non feugiat. In hac habitasse
+platea dictumst. Cras eleifend nisl volutpat ante condimentum convallis. Donec varius dolor malesuada erat
+consequat congue. Donec eu lacus ut sapien venenatis tincidunt. Quisque sit amet tellus et enim bibendum varius et
+a orci. Donec aliquet volutpat scelerisque. Proin et tortor dolor. Ut aliquet, dolor a mattis sodales, odio diam
+pulvinar sem, egestas pretium magna eros vitae felis. Nam vitae magna lectus, et ornare elit. Morbi feugiat, ipsum
+ac mattis congue, quam neque mollis tortor, nec mollis nisl dolor a tortor. Maecenas varius est sit amet elit
+interdum quis placerat metus posuere. Duis malesuada justo a diam vestibulum vel aliquam nisi ornare. Integer
+laoreet nisi a odio ornare non congue turpis eleifend. Cum sociis natoque penatibus et magnis dis parturient montes,
+nascetur ridiculus mus. Cras vulputate libero sed arcu iaculis nec lobortis orci fermentum.
+    </textarea>
+  </p>
+  <p>
+    <input type="checkbox" id="agree" name="accept" />
+    <label for="agree">I agree</label>
+    <input type="submit" id="nextstep" value="Next" />
+  </p>
+</form>
+ +

CSS

+ +
#notice {
+  display: inline-block;
+  margin-bottom: 12px;
+  border-radius: 5px;
+  width: 600px;
+  padding: 5px;
+  border: 2px #7FDF55 solid;
+}
+
+#rules {
+  width: 600px;
+  height: 130px;
+  padding: 5px;
+  border: #2A9F00 solid 2px;
+  border-radius: 5px;
+}
+ +

JavaScript

+ +
function checkReading () {
+  if (checkReading.read) {
+    return;
+  }
+  checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight;
+  document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read;
+  checkReading.noticeBox.innerHTML = checkReading.read ? "Thank you." : "Please, scroll and read the following text.";
+}
+
+onload = function () {
+  var oToBeRead = document.getElementById("rules");
+  checkReading.noticeBox = document.createElement("span");
+  document.registration.accept.checked = false;
+  checkReading.noticeBox.id = "notice";
+  oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead);
+  oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead);
+  oToBeRead.onscroll = checkReading;
+  checkReading.call(oToBeRead);
+}
+ +

{{EmbedLiveSample('scrollHeight_Demo', '640', '400')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-scrollheight", "Element.scrollHeight")}}{{Spec2("CSSOM View")}}Inicial definición
+ +

Compatibilidad de los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico4.03.0[1]8.0{{CompatVersionUnknown}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] En versiones anteriores a Firefox 21, cuando el contenido de un elemento no genera una barra de desplazamiento vertical,su propiedad scrollHeight es igual a su propiedad clientHeight . Esto puede significar que el contenido es demasiado breve para necesitar una barra de desplazamiento vertical, o que el elemento tiene un estilo CSS con un valor  overflow que desborda el contenido visible (no desplazable).

+ +

Ver También

+ + diff --git a/files/es/web/api/element/scrollintoview/index.html b/files/es/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..7c0b23a429 --- /dev/null +++ b/files/es/web/api/element/scrollintoview/index.html @@ -0,0 +1,151 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - Experimental + - Expérimental(2) + - metodo +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}
+ +

El método  scrollIntoView() de la interfaz  {{domxref("Element")}} desplaza el contenedor principal del elemento de forma que el elemento sobre el cual se invoca scrollIntoView() sea visible al usuario.

+ +

Sintaxis

+ +
element.scrollIntoView(); // Equivalente a element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // Argumentos booleanos
+element.scrollIntoView(scrollIntoViewOptions); // Argumento objeto
+
+ +

Parámetros

+ +
+
alignToTop
+
Es un valor {{jsxref("Boolean")}}: +
    +
  • Si es true, la parte superior del elemento se alineará con la parte superior del área visible del elemento desplazable antecesor.
    • +
  • Si es false, la parte inferior del elemento se alineará con la parte inferior del área visible del elemento desplazable antecesor.
    • +
+
+
scrollIntoViewOptions {{optional_inline}} {{experimental_inline}}
+
Un booleano o un objeto con las siguientes opciones:
+
behavior {{optional_inline}}
+
Establece la transición de la animación.
+ Puede ser auto o smooth. Por defecto es auto.
+
block {{optional_inline}}
+
Establece el alineamiento vertical.
+ Puede ser start, center, end, o nearest. Por defecto es start.
+
inline {{optional_inline}}
+
Establece el alineamiento horizontal
+ Puede ser start, center, end, o nearest. Por defecto es nearest.
+
+ +

Ejemplo

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+
+ +

Notas

+ +

Puede que el desplazamiento no sea llevado completamente a la parte superior o inferior dependiente de la disposición de otros elementos. 

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Definición inicial
+ + + +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Implementación básica1.0{{ CompatGeckoDesktop(1.0) }}610.0 and possibly older versions4 and possibly older versions
+

Implementan
+ scrollIntoViewOptions

+ 		{{CompatNo}}{{ CompatGeckoDesktop(36) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Implementación básica?{{ CompatGeckoMobile(1.0) }}???
+

Implementan
+ scrollIntoViewOptions

+ 		{{CompatNo}}{{ CompatGeckoMobile(36) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/api/element/scrollleft/index.html b/files/es/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..df527ccdc5 --- /dev/null +++ b/files/es/web/api/element/scrollleft/index.html @@ -0,0 +1,153 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - API + - Necesita Tabla de Compatibilidad + - Necesita Trabajo de Markup + - Necesita tabla de Especificaciones + - Propiedad + - Referencia + - Vista CSSOM +translation_of: Web/API/Element/scrollLeft +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.scrollLeft obtiene o establece el número de píxeles que desplaza el contenido de un elemento hacia la izquierda.

+ +

Tenga en cuenta que si el elemento {{cssxref ( "dirección")}} del elemento es rtl (derecha-a-izquierda), entonces scrollLeft es 0 cuando la barra de desplazamiento está en su posición más a la derecha (al inicio del contenido desplazado) y cada vez más Negativo mientras se desplaza hacia el final del contenido.

+ +

Síntasix

+ +
// Obtener el número de píxeles desplazados
+var sLeft = element.scrollLeft;
+
+ +

SLeft es un número entero que representa el número de píxeles que el elemento ha desplazado hacia la izquierda.

+ +
// Establecer el número de píxeles desplazados
+element.scrollLeft = 10;
+
+ +

ScrollLeft se puede establecer en cualquier valor entero, sin embargo:

+ + + +

Ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    </script>
+</head>
+<body>
+    <div id="container">
+        <div id="content">Lorem ipsum dolor sit amet.</div>
+    </div>
+    <button id="slide" type="button">Slide</button>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte Básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/element/scrolltop/index.html b/files/es/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..5b4fb19139 --- /dev/null +++ b/files/es/web/api/element/scrolltop/index.html @@ -0,0 +1,69 @@ +--- +title: Element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +

{{ APIRef("DOM") }}

+ +

La propiedad Element.scrollTop obtiene o establece el número de pixels que el contenido de un elemento ha sido desplazado (enrollado) hacia arriba. El scrollTop de un elemento es una medida de la distancia desde el límite superior de un elemento al límite superior de su contenido visible. Cuando un elemento no genera una barra de scroll vertical, el valor de su scrollTop es establecido por defecto a 0.

+ +

Sintaxis

+ +
// Obtiene el número de pixels desplazados
+var  intElemScrollTop = someElement.scrollTop;
+
+ +

Después de ejecutar este código, intElemScrollTop es un entero que corresponde al número de pixesl que el contenido del {{domxref("element")}} ha sido desplazado hacia arriba.

+ +
// Establece el número de pixels desplazados
+element.scrollTop = intValue;
+
+ +

scrollTop puede ser establecido a cualquier valor entero, con ciertas salvedades:

+ + + +

Ejemplo

+ +
+
+

padding-top

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+ +

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +

padding-bottom

+
+Left Top Right Bottom margin-top margin-bottom border-top border-bottom
+ +

Image:scrollTop.png

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('CSSOM View', '#dom-element-scrolltop', 'scrollTop')}}{{Spec2("CSSOM View")}} 
+ +

Referencias

+ + diff --git a/files/es/web/api/element/scrolltopmax/index.html b/files/es/web/api/element/scrolltopmax/index.html new file mode 100644 index 0000000000..9e5fc20255 --- /dev/null +++ b/files/es/web/api/element/scrolltopmax/index.html @@ -0,0 +1,80 @@ +--- +title: Element.scrollTopMax +slug: Web/API/Element/scrollTopMax +tags: + - API + - CSSOM View + - Elemento + - Propiedad + - Read-only + - Referencia + - Solo lectura +translation_of: Web/API/Element/scrollTopMax +--- +

{{APIRef("DOM")}}{{Non-standard_header}}

+ +

La propiedad de solo lectura(read-only)  Element.scrollTopMax retorna un {{jsxref("Number")}} que representa el máximo offset posible para el elemento.

+ +

Sintaxis

+ +
var pxl = elt.scrollTopMax;
+ +

Especificaciones

+ +

Esta propiedad no es parte de ninguna especificación.

+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatGeckoDesktop(16) }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile(16) }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Ver además

+ + diff --git a/files/es/web/api/element/scrollwidth/index.html b/files/es/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..aaeb7486a8 --- /dev/null +++ b/files/es/web/api/element/scrollwidth/index.html @@ -0,0 +1,119 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +translation_of: Web/API/Element/scrollWidth +--- +
{{ APIRef("DOM") }}
+ +

La propiedad de sólo lectura Element.scrollWidth retorna bien la anchura en pixels del contenido de un elemento o bien la anchura del elemento en si, la que sea mayor de ambas. Si el elemento es más ancho que su área contenedora (por ejemplo, si existen barras de desplazamiento para desplazarse a través del contenido),  scrollWidth es mayor que  clientWidth.

+ +
+

El valor de esta propiedad será red redondedo a un entero. Si necesita un valor fraccional, use {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth es el ancho del contenido de element en pixels.

+ +

Ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <title>Ejemplo</title>
+    <style>
+        div {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        #aDiv {
+            width: 100px;
+        }
+
+        button {
+            margin-bottom: 2em;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="aDiv">
+        FooBar-FooBar-FooBar-FooBar
+    </div>
+    <button id="aButton">
+        Check for overflow
+    </button>
+
+    <div id="anotherDiv">
+        FooBar-FooBar-FooBar-FooBar
+    </div>
+    <button id="anotherButton">
+        Check for overflow
+    </button>
+</body>
+<script>
+    var buttonOne = document.getElementById('aButton'),
+    buttonTwo = document.getElementById('anotherButton'),
+    divOne = document.getElementById('aDiv'),
+    divTwo = document.getElementById('anotherDiv');
+
+    //comprueba si un desbordamiento está ocurriendo
+    function isOverflowing(element) {
+        return (element.scrollWidth > element.offsetWidth);
+    }
+
+    function alertOverflow(element) {
+        if (isOverflowing(element)) {
+            alert('El contenido desborda el contenedor.');
+        } else {
+            alert('Sin desobordamiento!');
+        }
+    }
+
+    buttonOne.addEventListener('click', function() {
+        alertOverflow(divOne);
+    });
+
+    buttonTwo.addEventListener('click', function() {
+        alertOverflow(divTwo);
+    });
+</script>
+</html>
+
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("CSSOM View", "#dom-element-scrollwidth", "Element.scrollWidth")}}{{Spec2("CSSOM View")}}Definición inicial
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.scrollWidth")}}

+ +

Ver también

+ + + diff --git a/files/es/web/api/element/setattribute/index.html b/files/es/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..725efd11fc --- /dev/null +++ b/files/es/web/api/element/setattribute/index.html @@ -0,0 +1,88 @@ +--- +title: Element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - API + - DOM + - Elemento + - NeedsBrowserCompatibility + - NeedsSpecTable + - Referencia + - metodo + - setAttribute +translation_of: Web/API/Element/setAttribute +--- +

{{APIRef("DOM")}}

+ +

Establece el valor de un atributo en el elemento indicado. Si el atributo ya existe, el valor es actualizado, en caso contrario, el nuevo atributo es añadido con el nombre y valor indicado.

+ +

Para obtener el valor actual de un atributo, se utiliza {{domxref("Element.getAttribute", "getAttribute()")}}; para eliminar un atributo, se llama a {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Sintaxis

+ +
Element.setAttribute(name, value);
+
+ +

Parámetros

+ +
+
name
+
Un {{domxref("DOMString")}} indicando el nombre del atributo cuyo valor se va a cambiar. El nombre del atributo se convierte automáticamente en minúsculas cuando setAttribute() se llama sobre un elemento HTML en un documento HTML.
+
value
+
Un {{domxref("DOMString")}} que contenga el valor que asignar al atributo. Cualquier valor indicado que no sea una cadena de texto se convierte automáticamente en una cadena de texto.
+
+ +

Los atributos booleanos se consideran true si al menos están presentes en el elemento, independientemente de su value actual; como regla, se debería especificar una cadena de texto vacía ("") en value (algunas personas utilizan el nombre del atributo; esto funciona pero no es un standard). Vea un {{anch("Ejemplo", "ejemplo")}} posterior para una demostración práctica.

+ +

Dado que value se convierte en una cadena de texto, indicando null no necesariamente hace lo que se espera. En lugar de eliminar el atributo o establecer su valor para ser {{jsxref("null")}}, establece el valor del atributo a la cadena de texto "null". Si se desea eliminar un atributo, se debe llamar a {{domxref("Element.removeAttribute", "removeAttribute()")}}.

+ +

Valor devuelto

+ +

{{jsxref("undefined")}}.

+ +

Excepciones

+ +
+
InvalidCharacterError
+
El atributo especificado name contiene uno o más caracteres que no son válidos en el nombre del atributo.
+
+ +

Ejemplo

+ +

En el siguiente ejemplo, setAttribute() se utiliza para establecer atributos en un {{HTMLElement("button")}}.

+ +

HTML

+ +
<button>Hola Mundo</button>
+ +

JavaScript

+ +
var b = document.querySelector("button");
+
+b.setAttribute("name", "helloButton");
+b.setAttribute("disabled", "");
+
+ +

Esto demuestra dos cosas:

+ + + +

{{ EmbedLiveSample('Example', '300', '50') }}

+ +

{{DOMAttributeMethods}}

+ +

Especificación

+ + + + + +

Notas Gecko

+ +

Utilizando setAttribute() para modificar ciertos atributos, el más notable es value en XUL, funciona de forma inconsistente, ya que el atributo especifica el valor determinado. Para acceder o modificar los valores actuales, se deben utilizar las propiedades. Por ejemplo, utilizar Element.value en lugar de Element.setAttribute().

diff --git a/files/es/web/api/element/setattributens/index.html b/files/es/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..59a4d9809e --- /dev/null +++ b/files/es/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: Element.setAttributeNS() +slug: Web/API/Element/setAttributeNS +translation_of: Web/API/Element/setAttributeNS +--- +

{{ APIRef("DOM") }}

+ +

setAttributeNS añade un nuevo atributo o cambia el valor de un atributo con el namespace dado y el nombre.

+ +

Sintaxis

+ +
elemento.setAttributeNS(namespace,nombre,valor)
+
+ + + +

Ejemplo

+ +
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+ +

Notas

+ +

{{ DOMAttributeMethods() }}

+ +

Especificación

+ +

DOM Level 2 Core: setAttributeNS

diff --git a/files/es/web/api/element/setcapture/index.html b/files/es/web/api/element/setcapture/index.html new file mode 100644 index 0000000000..b0c3ef52ab --- /dev/null +++ b/files/es/web/api/element/setcapture/index.html @@ -0,0 +1,86 @@ +--- +title: Element.setCapture() +slug: Web/API/Element/setCapture +tags: + - API + - DOM + - Element + - Método(2) + - Referencia +translation_of: Web/API/Element/setCapture +--- +

{{ APIRef("DOM") }}{{ gecko_minversion_header("2.0") }}

+ +

Llame a este método durante el manejo de un evento mousedown para redirigir todos los eventos de mouse a este elemento hasta que se suelte el botón del mouse o se llame {{domxref ( "document.releaseCapture ()")}}.

+ +

Sintasix

+ +
element.setCapture(retargetToElement);
+
+ +
+
retargetToElement
+
     Si es verdadero, todos los eventos se dirigen directamente a este elemento; Si es falso, los eventos también pueden descargar a los descendientes de este elemento.
+
+ +

Ejemplo

+ +

En este ejemplo, las coordenadas actuales del mouse se dibujan mientras situas el mouse alrededor después de hacer clic y mantener pulsado un elemento.

+ +
<html>
+<head>
+  <title>Mouse Capture Example</title>
+  <style type="text/css">
+    #myButton {
+      border: solid black 1px;
+      color: black;
+      padding: 2px;
+      -moz-box-shadow:black 2px 2px;
+    }
+  </style>
+
+  <script type="text/javascript">
+    function init() {
+      var btn = document.getElementById("myButton");
+      btn.addEventListener("mousedown", mouseDown, false);
+      btn.addEventListener("mouseup", mouseUp, false);
+    }
+
+    function mouseDown(e) {
+      e.target.setCapture();
+      e.target.addEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseUp(e) {
+      e.target.removeEventListener("mousemove", mouseMoved, false);
+    }
+
+    function mouseMoved(e) {
+      var output = document.getElementById("output");
+      output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
+    }
+  </script>
+</head>
+<body onload="init()">
+  <p>This is an example of how to use mouse capture on elements in Gecko 2.0.</p>
+  <p><a id="myButton" href="#">Test Me</a></p>
+  <div id="output">No events yet</div>
+</body>
+</html>
+
+ +

Ver ejemplo en vivo

+ +

Notas

+ +

El elemento no puede desplazarse completamente hacia arriba o hacia abajo dependiendo del diseño de otros elementos.

+ +

Especificación

+ +

Ninguna.

+ +

Ver también

+ + diff --git a/files/es/web/api/element/shadowroot/index.html b/files/es/web/api/element/shadowroot/index.html new file mode 100644 index 0000000000..17af57bb3c --- /dev/null +++ b/files/es/web/api/element/shadowroot/index.html @@ -0,0 +1,83 @@ +--- +title: Element.shadowRoot +slug: Web/API/Element/shadowRoot +translation_of: Web/API/Element/shadowRoot +--- +
{{APIRef("Shadow DOM")}}
+ + + +

La propiedad de solo lectura 'Element.shadowRoot' representa el shadow root alojado por el elemento. Use {{DOMxRef("Element.attachShadow()")}} para agregar un shadow root a un elemento existente.

+ +

Syntax

+ +
var shadowroot = element.shadowRoot;
+
+ +

Value

+ +

A {{DOMxRef("ShadowRoot")}} object instance, or null if the associated shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to closed. (See {{DOMxRef("Element.attachShadow()")}} for further details).

+ +

Examples

+ +

The following snippets are taken from our life-cycle-callbacks example (see it live also), which creates an element that displays a square of a size and color specified in the element's attributes.

+ +

Inside the <custom-square> element's class definition we include some life cycle callbacks that make a call to an external function, updateStyle(), which actually applies the size and color to the element. You'll see that we are passing it this (the custom element itself) as a parameter.

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+
+attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+ +

In the updateStyle() function itself, we get a reference to the shadow DOM using {{domxref("Element.shadowRoot")}}. From here we use standard DOM traversal techniques to find the {{htmlelement("style")}} element inside the shadow DOM and then update the CSS found inside it:

+ +
function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  const childNodes = Array.from(shadow.childNodes);
+
+  childNodes.forEach(childNode => {
+    if (childNode.nodeName === 'STYLE') {
+      childNode.textContent = `
+        div {
+          width: ${elem.getAttribute('l')}px;
+          height: ${elem.getAttribute('l')}px;
+          background-color: ${elem.getAttribute('c')};
+        }
+      `;
+    }
+  });
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-element-shadowroot', 'shadowRoot')}}{{Spec2('DOM WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.shadowRoot")}}

+ +

See also

+ + diff --git a/files/es/web/api/element/tagname/index.html b/files/es/web/api/element/tagname/index.html new file mode 100644 index 0000000000..5f522efc3e --- /dev/null +++ b/files/es/web/api/element/tagname/index.html @@ -0,0 +1,44 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Element/tagName +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el nombre del elemento.

+ +

Sintaxis

+ +
elementName = element.tagName
+
+ + + +

Notas

+ +

En XML (y los lenguajes basados en XML tales como XHTML) el código tagName es sensible a las mayúsculas. En HTML, tagName devuelve el nombre del elemento en forma canonica, es decir con todas sus letras en mayúscula. El valor del código of tagName es el mismo que el de la instrucción nodeName.

+ +

Ejemplo

+ +

Si tenemos la siguiente línea de código:

+ +
<span id="born">Cuando yo nací...</span>
+
+ +

y el siguiente script

+ +
var span = document.getElementById("born");
+alert(span.tagName);
+
+ +

en XHTML (o alguna otra forma de XML) el resultado de la alerta será el contenido de "span". En HTML, el contenido será el de "SPAN".

+ +

Especificación

+ +

DOM Level 2 Core: tagName

diff --git a/files/es/web/api/element/wheel_event/index.html b/files/es/web/api/element/wheel_event/index.html new file mode 100644 index 0000000000..6b4e69d173 --- /dev/null +++ b/files/es/web/api/element/wheel_event/index.html @@ -0,0 +1,320 @@ +--- +title: wheel +slug: Web/API/Element/wheel_event +tags: + - eventos +translation_of: Web/API/Element/wheel_event +--- +

El evento "wheel" se dispara cuando la ruleta de un dispositivo (usualmente un ratón) gira. Este evento reemplaza al ahora obsoleto evento {{event("mousewheel")}}.

+ +

Información general

+ +
+
Interfaz
+
{{domxref("WheelEvent")}}
+
Sincronía
+
asíncrono
+
Bubble
+
Si
+
Cancelable
+
Si
+
Target
+
defaultView, Document, Element
+
Acción predet.
+
Scroll, atras/adelante (historial), o zoom.
+
+ +

Propiedades

+ +

Este evento implementa las propiedades de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +

Propiedades de WheelEvent

+ +

{{page("/en-US/docs/Web/API/WheelEvent", "Properties")}}

+ +

Propiedades de MouseEvent

+ +

{{page("/en-US/docs/Web/API/MouseEvent", "Properties")}}

+ +

Propiedades UIEvent

+ +

{{page("/en-US/docs/Web/API/UIEvent", "Properties")}}

+ +

Propiedades Event

+ +

{{page("/en-US/docs/Web/API/Event", "Properties")}}

+ +

Métodos

+ +

Este evento implementa los métodos de:  {{domxref("WheelEvent")}}, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +

Métodos de WheelEvent

+ +

{{page("/en-US/docs/Web/API/WheelEvent", "Methods")}}

+ +

Métodos de MouseEvent

+ +

{{page("/en-US/docs/Web/API/MouseEvent", "Methods")}}

+ +

Métodos de UIEvent

+ +

{{page("/en-US/docs/Web/API/UIEvent", "Methods")}}

+ +

Métodos de Event

+ +

{{page("/en-US/docs/Web/API/Event", "Methods")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM3 Events','DOM3-Events.html#event-type-wheel','wheel')}}{{Spec2('DOM3 Events')}}Definición inicial.
+ +

Compatibilidad

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico31{{CompatVersionUnknown}}{{CompatGeckoDesktop("17.0")}}{{CompatIE("9.0")}}[1]187.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("17.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer solo toma el evento "wheel" mediante addEventListener, no se permite el atributo onwheel en objetos del DOM. Bug report.
+  

+ +

Escuchar al evento en distintos navegadores

+ +

En el siguiente script se crea el método multi-navegador addWheelListener que permite escuchar el evento wheel en diferentes navegadores a la vez que se previene el funcionamiento por defecto.

+ +
// crea el metodo "addWheelListener" global
+// ejemplo: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
+(function(window,document) {
+
+    var prefix = "", _addEventListener, support;
+
+    // detecta el tipo de evento permitido por el navegador
+    if ( window.addEventListener ) {
+        _addEventListener = "addEventListener";
+    } else {
+        _addEventListener = "attachEvent";
+        prefix = "on";
+    }
+
+    // detecta el tipo de evento wheel manejado por el navegador
+    support = "onwheel" in document.createElement("div") ? "wheel" : // Los navegadores modernos permiten "wheel"
+              document.onmousewheel !== undefined ? "mousewheel" : // Webkit e IE soportan al menos "mousewheel"
+              "DOMMouseScroll"; // Asumiremos que el resto de navegadores son Firefox antiguos
+
+    window.addWheelListener = function( elem, callback, useCapture ) {
+        _addWheelListener( elem, support, callback, useCapture );
+
+        // controlaremos MozMousePixelScroll en Firefox antiguos
+        if( support == "DOMMouseScroll" ) {
+            _addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
+        }
+    };
+
+    function _addWheelListener( elem, eventName, callback, useCapture ) {
+        elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
+            !originalEvent && ( originalEvent = window.event );
+
+            // Creamos un objeto de evento
+            var event = {
+                // tomamos como referencia el objeto original
+                originalEvent: originalEvent,
+                target: originalEvent.target || originalEvent.srcElement,
+                type: "wheel",
+                deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
+                deltaX: 0,
+                deltaZ: 0,
+                preventDefault: function() {
+                    originalEvent.preventDefault ?
+                        originalEvent.preventDefault() :
+                        originalEvent.returnValue = false;
+                }
+            };
+
+            // calculamos deltaY (y deltaX) dependiendo del evento
+            if ( support == "mousewheel" ) {
+                event.deltaY = - 1/40 * originalEvent.wheelDelta;
+                // Webkit tambien soporta wheelDeltaX
+                originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
+            } else {
+                event.deltaY = originalEvent.detail;
+            }
+
+            // Disparamos el callback
+            return callback( event );
+
+        }, useCapture || false );
+    }
+
+})(window,document);
+ +

Notas para Gecko

+ +

Orden de los eventos en eventos antiguos

+ +

Si el evento wheel no ha sido implementado, los eventos DOMMouseScroll y MozMousePixelScroll se usarán para dar retrocompativilidad. Sus atributos se calculan dependiendo del delta del evento wheel y el padre más cercano. Si el evento wheel o alguno de los anteriores invoca {{ domxref("event.preventDefault()") }}, no ocurrirá nada.

+ +

El orden de ejecución del evento es:

+ +
    +
  1. Eventos wheel en grupo de eventos por defecto (aplicaciones web y add-ons pueden manejar los eventos de este grupo)
    2. +
  2. Un evento DOMMouseScroll vertical en caso de que el deltaY, en consecutivas llamadas del evento se vuelva mayor que 1.0 o menor que -1.0
    3. +
  3. Un evento MozMousePixelScroll vertical en caso de que el deltaY del último evento wheel no sea igual a cero
    4. +
  4. Un evento DOMMouseScroll horizontal en caso de que el deltaX acumule un valor mayor que 1.0 o menor que -1.0
    5. +
  5. Un evento MozMousePixelScroll horizontal en caso de que el deltaX del último evento no sea igual que cero
    6. +
  6. Un evento wheel en el grupo de sistema (Solamente add-ons pueden gestionar este grupo de eventos)
    7. +
+ +


+ ¿Qué ocurre si preventDefault() es llamado?

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
wheel (grupo por defecto de evetos)Se llama preventDefault()    
DOMMouseScroll (Vertical)No se llamaSe llama preventDefault()   
MozMousePixelScroll (Vertical)No se llamadefaultPrevented devuelve trueSe llama preventDefault()  
DOMMouseScroll (Horizontal)No se llamaNo se ve afectadoNo se ve afectadoSe llama preventDefault() 
MozMousePixelScroll (Horizontal)No se llamaNo se ve afectadoNo se ve afectadodefaultPrevented devuelve trueSe llama preventDefault()
wheel (grupo de eventos de sistema)defaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve truedefaultPrevented devuelve true
+ +

En caso de que un Add-on necesite conocer si uno de los eventos legacy es usado por contenidos del DOM puede usar el evento wheel de #6. Lee la documentación de nsIEventListenerService para mayor detalle acerca del grupo de eventos de sistema.

+ +

Los valores delta y las acciones por defecto de eventos predefinidos pueden ser personalizados en las preferencias de usuario (details). Por lo tanto, no se debe presuponer que alguna acción en concreto va a ocurrir tras recibir este evento.

+ +

Valores delta

+ +

Los valores delta no indican la cantidad de scroll actual de manera predeterminada. Si el usuario presiona alguna tecla mdificadora mientras mueve la rueda de scroll, dicha acción puede causar otra totalmente diferente a la esperada, como ir adelante o atras por el historial o hacer zoom. Además, incluso cuando la acción sea la esperada, el elemento que la recibe puede ser distinto al deseado.
+ El objetivo del evento wheel solo está definido por la posición del cursor en el momento que se dispara este.

+ +

El valor de deltaMode

+ +

En Windows, los siguientes 3 eventos nativos del DOM causan eventos wheel.

+ +
+
WM_MOUSEWHEEL (Evento wheel vertical del ratón)
+
El deltaMode puede ser DOM_DELTA_LINE o DOM_DELTA_PAGE. Depende de las preferencias de usuario en Windows (Para configuraciones por defecto, debería ser DOM_DELTA_LINE).
+
WM_MOUSEHWHEEL (Evento wheel horizontal del ratón)
+
EldeltaMode puede ser DOM_DELTA_LINE o DOM_DELTA_PAGE. Sin embargo, ni la configuración de velocidad de rueda de ratón de Windows ni ningún UI similar de drivers permite modificar el scroll de páginas. De modo que, normalmente este valor es DOM_DELTA_LINE.
+
WM_GESTURE (Solo utilizado en navegación gestual)
+
El deltaMode es siempre DOM_DELTA_PIXEL. Pero la mayoría de dispositivos táctiles de portatiles emulan la rueda de ratón en lugar de usar este evento. Este evento es usado típicamente en Tablet PC.
+
+ +

En Mac, el valor de deltaMode depende del dispositivo. Si el dispositivo permite alta resolución, el scroll se hará en pixels, de manera que el valor del deltaMode será DOM_DELTA_PIXEL. De todos modos, el usuario puede cambiarlo a DOM_DELTA_LINE con la preferencia "mousewheel.enable_pixel_scrolling".  Si el dispositivo no soporta alta resolución, es siembre DOM_DELTA_LINE.

+ +

En otras plataformas, el valor de deltaMode es siempre DOM_DELTA_LINE.

+ +

Eventos no confiables

+ +

Los eventos wheel no nativos nunca causarán acción por defecto.

+ +

Ver también

+ + diff --git a/files/es/web/api/elementoshtmlparavideo/index.html b/files/es/web/api/elementoshtmlparavideo/index.html new file mode 100644 index 0000000000..4b36d9cba2 --- /dev/null +++ b/files/es/web/api/elementoshtmlparavideo/index.html @@ -0,0 +1,202 @@ +--- +title: Elementos HTML para Video +slug: Web/API/ElementosHTMLparaVideo +translation_of: Web/API/HTMLVideoElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

El interfaz de HTMLVideoElement provee propiedades especiales y metodos para manipular objectos de videos. Tambien, este interfaz hereda propiedades y métodos de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

+ +

La lista de supported media formats (formatos de medios compatibles) varía de un navegador a otro. Debe proveer su video en un formato sencillo que sea compatible con todos los navegadores o proveer varias fuentes de videos in varios formatos, para que así todo navegador que necesite este cubierto.

+ +

{{InheritanceDiagram(600, 140)}}

+ +

Propiedades

+ +

Hereda las propiedades de los interfaces anteriores, {{domxref("HTMLMediaElement")}}, y {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.height")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("height", "video")}}, el cual especifica la altura del area mostrada, en pixeles CSS.
+
{{domxref("HTMLVideoElement.poster")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("poster", "video")}}, el cual especifica que imagen sera mostrada en la ausencia de data de video.
+
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
+
Devuelve un unsigned long que contiene la altura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
+
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
+
Devuelve un unsigned long que contiene la anchura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
+
{{domxref("HTMLVideoElement.width")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("width", "video")}}, el cual especifica la anchura del area mostrada, en pixeles CSS.
+
+ +

Propiedades especificas para Gecko

+ +
+
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos de video que han sido analizados del recurso de multimedia.
+
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos de video que han sido decifrados como imágines.
+
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos decodificados que han sido  presentados a la canalización de render para pintar.
+
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos presentados que han sido pintados en la pantalla.
+
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un double con el tiempo, en segundos, que el último marco de video fue pintado por retrazo.
+
{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un {{domxref("Boolean")}} indicando si existe algún audio asociado con el video.
+
+ +

Métodos

+ +

Hereda los métodos anteriores de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
+
Devuelve un {{domxref("VideoPlaybackQuality")}} para objetos que contienen las medidas de reproducciones actuales.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}{{Spec2("Media Source Extensions")}}Anadio el metodo getVideoPlaybackQuality() .
{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML WHATWG')}}Sin cambios del {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML5 W3C')}}Definicion incial.
+ +

Compatibilidad con Navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Apoyo basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.010.50{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Apoyo básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko implementa esto detras de la preferencia media.mediasource.enabled, predispuesto a false.

+ +

Lea Tambien

+ + diff --git a/files/es/web/api/event/bubbles/index.html b/files/es/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..a940b1e4a7 --- /dev/null +++ b/files/es/web/api/event/bubbles/index.html @@ -0,0 +1,47 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +tags: + - Anidado + - DOM + - Propagación + - Referencia + - Referência(2) + - eventos +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Indica si el evento determinado se propaga (burbujea) a través del DOM o no. Esta propagación se refiere a si el evento viaja desde el elemento donde se originó hasta los elementos padres en orden de anidamiento.

+ +

Sintaxis

+ +
event.bubbles
+
+ +

Retorna un valor Booleano que es true si el evento se propaga en el DOM.

+ +

Ejemplo

+ +
var bool = event.bubbles;
+ +

bool tiene el valor true o false, dependiendo de si el evento puede ser burbuja o no.

+ +

Notas

+ +

Sólo ciertos eventos pueden ser burbuja. Los eventos que pueden ser burbuja tienen esta propiedad con el valor true. Podemos usar esta propiedad para comprobar si un elemento puede ser burbuja o no.

+ +

Ejemplo

+ +
 function goInput(e) {
+  // comprueba si es burbuja y
+  if (!e.bubbles) {
+     // entrega el evento si no lo es
+     passItOn(e);
+  }
+  // está siendo propagado
+  doOutput(e)
+}
+
diff --git a/files/es/web/api/event/cancelable/index.html b/files/es/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..efb6eb04f6 --- /dev/null +++ b/files/es/web/api/event/cancelable/index.html @@ -0,0 +1,38 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/cancelable +--- +
{{ ApiRef("DOM") }}
+ +

Resumen

+ +

Indica si el elemento puede ser cancelado o no.

+ +

Sintaxis

+ +
bool =
+event.cancelable;
+
+ +

bool tiene valor true o false, dependiendo de si el evento puede ser desactivado.

+ +

Notas

+ +

Si un evento puede ser cancelado o no, es algo que se determina en el momento en que el evento es inicializado.

+ +

Para cancelar un evento, llama al método preventDefault en el evento. Esto evita que la tarea de implementación ejecute la acción por defecto asociada con el evento.

+ +

Especificación

+ +

DOM Level 2 Events: cancelable

+ +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/event.cancelable", "ja": "ja/DOM/event.cancelable", "pl": "pl/DOM/event.cancelable" } ) }}

diff --git a/files/es/web/api/event/createevent/index.html b/files/es/web/api/event/createevent/index.html new file mode 100644 index 0000000000..0d04851789 --- /dev/null +++ b/files/es/web/api/event/createevent/index.html @@ -0,0 +1,34 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evento + - metodo +translation_of: Web/API/Document/createEvent +--- +

{{APIRef("DOM")}}

+ +

Crea un nuevo evento, que debe ser inicializado llamando a su método init().

+ +

Sintaxis

+ +
document.createEvent(tipo);
+ +
+
tipo
+
Una string indicando el tipo de evento a crear.
+
+ +

Este método devuelve un nuevo objeto {{ domxref("Event") }} del DOM del tipo indicado, que debe ser inicializado antes de su uso.

+ +

Ejemplo

+ +
var nuevoEvento = document.createEvent("UIEvents");
+ +

Especificación

+ + diff --git a/files/es/web/api/event/currenttarget/index.html b/files/es/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..0c9d9a2a9e --- /dev/null +++ b/files/es/web/api/event/currenttarget/index.html @@ -0,0 +1,75 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - DOM + - Gecko + - Property +translation_of: Web/API/Event/currentTarget +--- +

{{APIRef("DOM")}}

+ +

Identifica el target (objetivo) actual del evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elmento al cual el controlador del evento fue asociado, a diferencia de event.target, que identifica el elemento el el que se produjo el evento.

+ +

Ejemplo

+ +

Es interesante utilizar event.currentTarget cuando se asocia un mismo controlador de eventos a varios elementos.

+ +
function hide(e){
+  e.currentTarget.style.visibility = "hidden";
+  console.log(e.currentTarget);
+  // Cuando esta función es usada como un controlador de evento: this === e.currentTarget
+}
+
+var ps = document.getElementsByTagName('p');
+
+for(var i = 0; i < ps.length; i++){
+  // console: imprime el elemento pulsado <p>
+  ps[i].addEventListener('click', hide, false);
+}
+// console: imprime <body>
+document.body.addEventListener('click', hide, false);
+
+// hace desaparecer párrafos al hacer click alrededor
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}{{Spec2("DOM4")}} 
{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}{{Spec2("DOM3 Events")}} 
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.Event.currentTarget")}}

+ +

Ver también

+ +

Comparativa de Event Targets

diff --git a/files/es/web/api/event/defaultprevented/index.html b/files/es/web/api/event/defaultprevented/index.html new file mode 100644 index 0000000000..ff1f9fba79 --- /dev/null +++ b/files/es/web/api/event/defaultprevented/index.html @@ -0,0 +1,81 @@ +--- +title: event.defaultPrevented +slug: Web/API/Event/defaultPrevented +translation_of: Web/API/Event/defaultPrevented +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

Retorna un boleano indicando si {{ domxref("event.preventDefault()") }} fue llamado en el evento o no.

+ +
Nota: Deberías usar este en lugar del que no es estándar, el método obsoleto getPreventDefault() (ver {{ bug(691151) }}).
+ +

Sintaxis

+ +
bool = event.defaultPrevented
+ +

Ejemplo

+ +
 if (e.defaultPrevented) {
+   /* El evento por defecto fue prevenido */
+ }
+
+ +

Compatibilidad del Navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatChrome(18) }}{{ CompatGeckoDesktop("6.0") }}{{ CompatIE(9.0) }}{{ CompatOpera(11.0) }}{{ CompatSafari("5.0") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatSafari(5.0) }}
+
+ +

Especificación

+ + + +

{{ languages( {"zh-cn": "zh-cn/DOM/event.defaultPrevented" } ) }}

diff --git a/files/es/web/api/event/event/index.html b/files/es/web/api/event/event/index.html new file mode 100644 index 0000000000..b1410daf7b --- /dev/null +++ b/files/es/web/api/event/event/index.html @@ -0,0 +1,80 @@ +--- +title: Event() +slug: Web/API/Event/Event +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

El constructor Event() crea un nuevo {{domxref("Event")}}.

+ +

Sintaxis

+ +
 event = new Event(typeArg, eventInit);
+ +

Valores

+ +
+
typeArg
+
Es un {{domxref("DOMString")}} que representa el nombre del evento.
+
eventInit {{optional_inline}}
+
+ +
+
Es un EventInit dictionary, con los siguientes campos: + +
    +
  • "bubbles": (Opcional) {{jsxref("Boolean")}} indica si el evento se propaga. Por defecto es false.
    • +
  • "cancelable": (Opcional) A {{jsxref("Boolean")}} indica si el evento puede ser cancelado. Por defecto es false.
    • +
  • "scoped": (Opcional) {{jsxref("Boolean")}} indica el ámbito de propagación. Si el valor es true, deepPath contendrá el nodo de destino.
    • +
  • "composed": (Opcional) {{jsxref("Boolean")}} que indica si el evento disparará listeners fuera de un shadow root. Por defecto es false. 
    • +
+
+
+ +

Ejemplo

+ +
// crea un evento look que se propaga y no puede cancelarse
+
+var ev = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(ev);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Definición inicial.
{{SpecName('Shadow DOM','#widl-EventInit-scoped', 'scoped')}}{{Spec2('Shadow DOM')}}Añade ámbito a EventInit dictionary.
+ +

Compatibilidad con navegadores

+ +

 

+ + + +

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

+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/event/index.html b/files/es/web/api/event/index.html new file mode 100644 index 0000000000..67cc05b076 --- /dev/null +++ b/files/es/web/api/event/index.html @@ -0,0 +1,185 @@ +--- +title: evento +slug: Web/API/Event +tags: + - para_revisar +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

« Referencia DOM de Gecko

+ +

Introducción

+ +

Éste capítulo describe el Modelo De Evento DOM de nivel 2 como es implementado por Gecko. La propia interfaz de Evento es descrita, así como las interfaces para el registro de evento sobre los nodos en el DOM, manipuladores y "oyentes" (listeners) de eventos, y varios ejemplos mas extensos que muestran como las varias interfaces de evento se relacionan unas  con las otras.

+ +

Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el DOM Level 3 Events draft.

+ +

La interfaz evento (Event) de DOM

+ +

Los gestores de eventos pueden estar atados a varios elementos en el DOM. Cuando un evento ocurre, un objeto de evento es dinámicamente creado y pasado secuencialmente a las "escuchas" (listeners) autorizadas para la gestión del evento. La interfaz Event del DOM es entonces accesible por la función de manejo, vía el objeto de evento puesto como el primer (y único) argumento.

+ +

Given that we don't list the three ways right here, the sentence is unclear, and is not perfectly right either IMO. -Nickolay There are three ways to attach an event listener to an element. With 2 of those techniques, the event object is passed to the handler function implicitly. The remaining technique requires you to specify the <code>event</code> object as a parameter, which is passed explicitly to the event handler function. El ejemplo siguiente muestra como un objeto de evento es pasado a una función de gestión de evento, y puede llamarse desde otra parecida.

+ +

El parámetro "evt" no es pasado en el código de abajo, el objeto de evento es cambiado automáticamente a foo. Todo lo necesario es definir un parámetro en el gestor de evento para recibir el objeto de evento.

+ +
function foo(evt) {
+  // Las funciones de gestión como esta
+  // dan una referencia implícita del
+  // evento que toca manejar
+  // (en este caso se llama "evt").
+  alert(evt);
+}
+table_el.onclick = foo;
+
+ +

Este ejemplo es muy simple pero muestra una característica importante de los eventos en el DOM de Gecko, la cual es que en el DOM se accede a los objetos de eventos a través de las funciones de manejo. Entonces al tener una referencia al objeto de evento, se puede llegar a todas las propiedades y métodos descritos en este capítulo.

+ +

Para más detalles de como los eventos se mueven dentro del DOM, ver: Ejemplo 5: Propagación de evento

+ +

Lista de los gestores de evento del DOM

+ +

Además del objeto event descrito aquí, el Gecko DOM también proporciona métodos para registrar oyentes de eventos en nodos en el DOM, quitando aquellos oyentes de eventos, y enviando eventos desde el DOM.

+ +

Estos y los varios manejos de eventos de elementos HTML o XML son los puntos de entrada principales para los eventos en el DOM. Estos tres métodos se describen en la lista de referencia al elemento.

+ +

Puede también pasar la referencia del objeto del evento como un parámetro predefinido, llamado event, a la función que maneja el evento. Esto es muy parecido a la forma en que trabaja this, pero para objetos de eventos, más bien que las referencias del objeto del elemento.

+ +
<html>
+<head>
+<title>Ejemplo de parámetro de objeto de evento</title>
+
+<script type="text/javascript">
+
+function showCoords(event){
+  alert(
+    "clientX value: " + event.clientX + "\n" +
+    "clientY value: " + event.clientY + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="showCoords(event)">
+<p>Para ver las coordinadas del ratón
+haga clic en cualquier lugar de esta página.</p>
+</body>
+</html>
+
+ +

El parámetro predefinido del objeto event permite pasar tantos parámetros de gestión de evento como sea necesario:

+ +
<html>
+<head>
+<title>Ejemplo de objeto con varios parámetros</title>
+
+<script type="text/javascript">
+
+var par2 = 'hello';
+var par3 = 'world!';
+
+function muestraCoords(evt, p2, p3){
+  alert(
+    "clienteX value: " + evt.clientX + "\n"
+    + "clientY value: " + evt.clientY + "\n"
+    + "p2: " + p2 + "\n"
+    + "p3: " + p3 + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onmousedown="muestraCoords(event, par2, par3)">
+<p>Para ver las coordinadas del ratón
+haga clic en cualquier lugar de esta página.</p>
+</body>
+</html>
+
+ +

Propiedades

+ +
+
event.altKey 
+
Devuelve un valor indicando si la tecla <alt> fue pulsada durante el evento.
+
event.bubbles 
+
Devuelve un valor que indica si el evento se propaga hacia arriba a través del DOM o no.
+
event.button 
+
Devuelve el botón del ratón.
+
event.cancelBubble {{deprecated_inline}} 
+
Devuelve un valor que indica si la propagación hacia arriba fue cancelada o no.
+
event.cancelable 
+
Devuelve un valor que indica si el evento se puede cancelar.
+
event.charCode 
+
Devuelve el valor Unicode de una tecla de carácter que fue apretada como parte de un evento keypress.
+
event.clientX 
+
Devuelve la posición horizontal del evento.
+
event.clientY 
+
Devuelve la posición vertical del evento.
+
event.ctrlKey 
+
Devuelve un valor que indica si la tecla <Ctrl> fue apretada durante el evento.
+
event.currentTarget 
+
Devuelve una referencia al objetivo actual registrado para el evento.
+
event.detail 
+
Devuelve detalles sobre el evento, dependiendo del tipo de evento.
+
event.eventPhase 
+
Utilizado para indicar qué fase del flujo del evento es actualmente en proceso de evaluación.
+
event.explicitOriginalTarget 
+
El objetivo del evento (específico a Mozilla).
+
event.isChar 
+
Devuelve un valor que indica si el evento produce o no una tecla de carácter.
+
event.keyCode 
+
Devuelve el valor Unicode de una tecla que no es caracter en un evento keypress o cualquier tecla en cualquier otro tipo de evento de teclado.
+
event.layerX 
+
Devuelve la coordenada horizontal del evento relativo a la capa actual.
+
event.layerY 
+
Devuelve la coordenada vertical del evento relativo a la capa actual.
+
event.metaKey 
+
Devuelve un valor booleano indicando si la meta tecla fue presionada durante un evento.
+
event.originalTarget 
+
El objetivo principal de un evento, antes de cualquier reapunte (Especifiación Mozilla).
+
event.pageX 
+
Devuelve la coordenada horizontal del evento, relativo al documento completo.
+
event.pageY 
+
Devuelve la coordenada vertical del evento, relativo al documento completo.
+
event.relatedTarget 
+
Identifica un objetivo secundario para el evento.
+
event.screenX 
+
Devuelve la coordenada horizontal del evento en la pantalla.
+
event.screenY 
+
Devuelve la coordenada vertical del evento en la pantalla.
+
event.shiftKey 
+
Devuelve un valor booleano indicando si la tecla <shift> fue presionada cuando el evento fue disparado.
+
event.target 
+
Devuelve una referencia al objetivo en la cual el evento fue originalmente enviado.
+
event.timeStamp 
+
Devuelve el momento de creación del evento.
+
event.type 
+
Devuelve el nombre del evento (distingue mayúsculas y minúsculas).
+
event.view 
+
El atributo vista identifica la AbstractView del cual el evento fue generado.
+
event.which 
+
Devuelve el valor Unicode de la tecla en un evento del teclado, sin importar el tipo de tecla que se presionó.
+
+ +

Métodos

+ +
+
event.initEvent 
+
Inicia el valor de un evento que se ha creado vía la interfaz DocumentEvent.
+
event.initKeyEvent 
+
Inicia un evento del teclado. (Específico de Gecko).
+
event.initMouseEvent 
+
Inicia un evento del ratón una vez que se ha creado.
+
event.initUIEvent 
+
Inicia un evento de la interfaz de usuario (UI) una vez que se ha creado.
+
event.preventBubble {{obsolete_inline}} 
+
Previene la expansión del evento. Este método es desaconsejado en favor del estándar stopPropagation y ha sido retirado en Gecko 1.9.
+
event.preventCapture {{obsolete_inline}}
+
Este método es desaconsejado en favor del estándar stopPropagation y ha sido retirado en Gecko 1.9.
+
event.preventDefault 
+
Cancela el evento (si éste es anulable).
+
event.stopPropagation 
+
Para la propagación de los eventos más allá en el DOM.
+
diff --git a/files/es/web/api/event/initevent/index.html b/files/es/web/api/event/initevent/index.html new file mode 100644 index 0000000000..360effb8ef --- /dev/null +++ b/files/es/web/api/event/initevent/index.html @@ -0,0 +1,42 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/initEvent +--- +
{{ ApiRef("DOM") }}{{deprecated_header}}
+

Resumen

+ +

El método initEvent se usa para dar valor inicial a un evento creado mediante document.createEvent.

+ +

Sintaxis

+ +
event.initEvent(type,bubbles,cancelable)
+
+ +
+
type
+
El tipo de evento.
+
bubbles
+
Un valor binario indicando si el evento debe ser recurrente en la cadena de eventos, o no (ver bubbles).
+
cancelable
+
Un valor binario indicando si el evento puede ser cancelado o no (ver cancelable).
+
+ +

Nota: Un valor binario puede tener sólo valores 1 y 0. En lógica de Boole, cierto (true ) y falso (false ).

+ +

Ejemplo

+ +
// crea un evento "click" que puede ser recurrente y
+// NO puede ser cancelado.
+event.initEvent("click", true, false);
+
+ +

Notas

+ +

Los eventos inicializados de esta forma, deben haber sido creados por el método document.createEvent. Debemos llamar a initEvent para inicializar el evento antes de que pueda ser lanzado con dispatched.

+ +

Especificación

+ +

DOM Level 2 Events: Event.initEvent

diff --git a/files/es/web/api/event/preventdefault/index.html b/files/es/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..e0e6ba18b1 --- /dev/null +++ b/files/es/web/api/event/preventdefault/index.html @@ -0,0 +1,95 @@ +--- +title: event.preventDefault +slug: Web/API/Event/preventDefault +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Event/preventDefault +--- +

{{ApiRef("DOM")}}

+ +

Resumen

+ +

Cancela el evento si este es cancelable, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevo.

+ +

Sintaxis

+ +
event.preventDefault()
+
+ +

Ejemplo

+ +

Cambiar el estado de una caja de selección es la función por defecto de la acción de hacer clic sobre la caja. Este ejemplo ilustra como hacer que esto no ocurra:

+ +
<html>
+<head>
+<title>ejemplo de preventDefault</title>
+
+<script type="text/javascript">
+
+function stopDefAction(evt) {
+  evt.preventDefault();
+}
+</script>
+</head>
+
+<body>
+
+<p>Por favor, haz clic sobre la caja de selección.</p>
+
+<form>
+<input type="checkbox" onclick="stopDefAction(event);"/>
+<label for="checkbox">Selección</label>
+</form>
+
+</body>
+</html>
+
+ +

Puedes ver preventDefault en acción aquí.

+ +

El siguiente ejemplo demuestra cómo puede evitarse que un texto invalido entre en un campo de formulario mediante preventDefault().

+ +
<html>
+<head>
+<title>preventDefault example</title>
+
+<script type="text/javascript">
+
+function checkName(evt) {
+var charCode = evt.charCode;
+
+  if (charCode != 0) {
+    if (charCode < 97 || charCode > 122) {
+      evt.preventDefault();
+      alert("Por favor usa sólo letras minúsculas." + "\n"
+            + "charCode: " + charCode + "\n"
+      );
+    }
+  }
+}
+
+</script>
+</head>
+
+<body>
+
+<p>Por favor entra tu nombre en letras minúsculas solamente.</p>
+<form>
+<input type="text" onkeypress="checkName(event);"/>
+</form>
+
+</body>
+</html>
+
+ +

Notas

+ +

Llamar a preventDefault en cualquier momento durante la ejecución, cancela el evento, lo que significa que cualquier acción por defecto que deba producirse como resultado de este evento, no ocurrirá.

+ +

Puedes usar event.cancelable para comprobar si el evento es cancelable o no. Llamar a preventDefault para un evento no cancelable, no tiene ningún efecto.

+ +

preventDefault no detiene las siguientes llamadas al evento producidas en el DOM. En su lugar debería usarse event.stopPropagation para ese propósito.

+ +

Especificación

+ +

DOM Level 2 Events: preventDefault

diff --git a/files/es/web/api/event/stoppropagation/index.html b/files/es/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..c92c594950 --- /dev/null +++ b/files/es/web/api/event/stoppropagation/index.html @@ -0,0 +1,103 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +translation_of: Web/API/Event/stopPropagation +--- +
{{APIRef("DOM")}}
+ +

El método stopPropagation() de la interfaz {{domxref("Event")}} evita la propagación adicional del evento actual en las fases de captura y bubbling.

+ +

Sintaxis

+ +
event.stopPropagation();
+ +

Ejemplo

+ +

Ver ejemplo 5: Propagación del evento en el capítulo de Ejemplos para un ejemplo mas detallado de este método y la propagación del evento en el DOM.

+ +

Notas

+ +

Ver las Especificaciones del DOM para la explicación del flujo del eventos. (El Borrador de eventos del DOM nivel 3 tiene una ilustración.)

+ +

preventDefault es un método complementario que puede ser usado para prevenir la acción default del evento cuando este ocurre.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/event/target/index.html b/files/es/web/api/event/target/index.html new file mode 100644 index 0000000000..1e28aef0b3 --- /dev/null +++ b/files/es/web/api/event/target/index.html @@ -0,0 +1,138 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - Evento + - Propiedad + - Referencia +translation_of: Web/API/Event/target +--- +

{{ApiRef("DOM")}}

+ +

La propiedad target de la interfaz del {{domxref("event.currentTarget")}} es una referencia al objeto en el cual se lanzo el evento. Es diferente de {{domxref("event.currentTarget")}} donde el controlador de eventos (event handler) es llamado durante la fase de bubbling or capturing del evento.

+ +

Sintaxis

+ +
const theTarget = algunEvento.target
+ +

Ejemplo

+ +

La propiedad event.target  puede ser usada para implementar una delegación del evento.

+ +
// Crear una lista
+const ul = document.createElement('ul');
+document.body.appendChild(ul);
+
+const li1 = document.createElement('li');
+const li2 = document.createElement('li');
+ul.appendChild(li1);
+ul.appendChild(li2);
+
+function hide(e){
+  // e.target se refiere elemento clickado <li>
+  // Esto es diferente de e.currentTarget, que se referiría al padre <ul> en este contexto
+  e.target.style.visibility = 'hidden';
+}
+
+// Incluir el 'listener' a la lista
+// Se ejecutará cuando se haga click en cada <li>
+ul.addEventListener('click', hide, false);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}Definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Notas de compatibilidad

+ +

En IE 6-8 el evento 'model' es diferente. Los eventos 'listeners' son  are incluidos con el método no estándar {{domxref('EventTarget.attachEvent')}}. En este modelo, el evento 'object' tiene una propiedad {{domxref('Event.srcElement')}}, en vez de la propiedad target, y tiene la misma semántica que event.target.

+ +
function hide(e) {
+  // Soporte en IE6-8
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

También  ver

+ + diff --git a/files/es/web/api/event/type/index.html b/files/es/web/api/event/type/index.html new file mode 100644 index 0000000000..7f9f02f6e9 --- /dev/null +++ b/files/es/web/api/event/type/index.html @@ -0,0 +1,103 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Evento + - Propiedad + - Referencia +translation_of: Web/API/Event/type +--- +
{{APIRef}}
+ +

La propiedad de sólo-lectura Event.type devuelve una cadena de texto que contiene el tipo de evento. Se establece cuando se contruye el evento y es el nombre que se utiliza normalmente para referirse al evento en cuestión, como click, load o error.

+ +

El argumento event de {{ domxref("EventTarget.addEventListener()") }} y {{ domxref("EventTarget.removeEventListener()") }} no es sensible a mayúsculas.

+ +

Para una lista de tipos de evento displonibles, vea la referencia de eventos

+ +

Sintaxis

+ +
event.type
+
+ +

Ejemplos

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+
+    <title>Event.type Example</title>
+
+    <script>
+        var currEvent;
+        function getEvtType(evt) {
+            console.group();
+
+            currEvent = evt.type;
+            console.log(currEvent);
+
+            document.getElementById("Etype").innerHTML = currEvent;
+
+            console.groupEnd();
+        }
+
+        // Eventos de teclado
+        document.addEventListener("keypress", getEvtType, false); //[second]
+
+        document.addEventListener("keydown", getEvtType, false); //first
+        document.addEventListener("keyup", getEvtType, false); //third
+
+        // Eventos de ratón
+        document.addEventListener("click", getEvtType, false); // third
+
+        document.addEventListener("mousedown", getEvtType, false); //first
+        document.addEventListener("mouseup", getEvtType, false); //second
+
+    </script>
+</head>
+
+<body>
+
+<p>Press any key or click the mouse to get the event type.</p>
+<p>Event type: <span id="Etype" style="color:red">-</span></p>
+
+</body>
+</html>
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}{{ Spec2('DOM2 Events') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.Event.type")}}

diff --git a/files/es/web/api/eventlistener/index.html b/files/es/web/api/eventlistener/index.html new file mode 100644 index 0000000000..e0a11040cc --- /dev/null +++ b/files/es/web/api/eventlistener/index.html @@ -0,0 +1,44 @@ +--- +title: EventListener +slug: Web/API/EventListener +translation_of: Web/API/EventListener +--- +

{{APIRef("DOM Events")}}

+ +

Información General del Método

+ + + + + + + +
void handleEvent(in Event event);
+ +

Metodos

+ +

handleEvent()

+ +

Este metodo es llamado cuando un evento ocurre del tipo para el cual la interfaz EventListener fue registrada.

+ +
void handleEvent(
+  in Event event
+);
+
+ +
Parametros
+ +
+
event
+
El DOM {{ domxref("Event") }} a registrar.
+
+ +

Observaciones

+ +

Como la interfaz es marcada con la bandera [function],todas los objetos Function  de javascript automaticamente implementan esta interfaz. Llamando el método {{manch("handleEvent") }} en tales implementaciones automaticamente invocan la funcion.

+ +

Mira también

+ + diff --git a/files/es/web/api/eventsource/index.html b/files/es/web/api/eventsource/index.html new file mode 100644 index 0000000000..db259edd2a --- /dev/null +++ b/files/es/web/api/eventsource/index.html @@ -0,0 +1,168 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Eventos Server-sent + - Interfaz +translation_of: Web/API/EventSource +--- +
{{APIRef("Websockets API")}}
+ +

La interfaz EventSource se utiliza para recibir eventos server-side. Se realiza la conexión a un servidor sobre HTTP y se reciben eventos en formato text/event-stream sin tener que cerrar la conexión.

+ +
+
+ +

Constructor

+ +
+
{{domxref("EventSource.EventSource", "EventSource()")}}
+
Crea un nuevo  EventSource a partiendo de un valor {{domxref("USVString")}}.
+
+ +

Propiedades

+ +

Esta interfaz también heredará propiedades de su antecesor, {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
Un número representando el estado de la conexión. Los valores posibles son CONECTANDO (0), ABIERTO (1), o CERRADO (2).
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
Un valor {{domxref("DOMString")}} representando la URL de la fuente.
+
{{domxref("EventSource.withCredentials")}} {{readonlyinline}}
+
Un valor {{domxref("Boolean")}} indicando si el objecto EventSource ha sido instanciado con credeciales CORS disponibles (true) o no (false, valor por defecto).
+
+ +

Manejadores de Eventos

+ +
+
{{domxref("EventSource.onerror")}}
+
En un {{domxref("EventHandler")}} que se invoca cuando ocurre un error y se envía el evento {{event("error")}} a través del objeto EventSource.
+
{{domxref("EventSource.onmessage")}}
+
Es un {{domxref("EventHandler")}} que se invoca cuando se recibe un evento {{event("message")}}, que indica que se ha enviado un mensaje desde la fuente.
+
{{domxref("EventSource.onopen")}}
+
Es un {{domxref("EventHandler")}} que se invoca cuando se recibe un evento {{event("open")}}, que sucede en el momento que la conexión se abre.
+
+ +

Métodos

+ +

Esta interfaz también heredará métodos de su antecesor, {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.close()")}}
+
Cierra la conexión, si ésta existe, y asigna el valor CLOSED al atributo readyState. Si la conexión ya estaba cerrada, este método no hace nada.
+
+ +

Ejemplos

+ +
var evtSource = new EventSource('sse.php');
+var eventList = document.querySelector('ul');
+
+evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.textContent = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+ +
+

Nota: Está disponible un ejemplo completo en GitHub — ver Simple SSE demo using PHP.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}} 
+ + + +

Compatibilidad de navegadoresEdit

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte EventSource6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
Disponible en workers compartidos y dedicados[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte EventSource4.445{{CompatNo}}124.1
Disponible en workers compartidos y dedicados[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Pero todavía no disponible en service workers.

+ +

Ver también

+ + diff --git a/files/es/web/api/eventsource/onopen/index.html b/files/es/web/api/eventsource/onopen/index.html new file mode 100644 index 0000000000..109962298c --- /dev/null +++ b/files/es/web/api/eventsource/onopen/index.html @@ -0,0 +1,127 @@ +--- +title: EventSource.onopen +slug: Web/API/EventSource/onopen +translation_of: Web/API/EventSource/onopen +--- +
{{APIRef('WebSockets API')}}
+ +

La propiedad onopen de la interfaz  {{domxref("EventSource")}}  es un {{domxref("EventHandler")}} llamado cuando un evento  {{event("open")}} es recibido, esto pasa cuando la conexión fue solo abierta.

+ +

Syntax

+ +
eventSource.onopen = function
+ +

Ejemplos

+ +
evtSource.onopen = function() {
+  console.log("Connection to server opened.");
+};
+ +
+

Nota: Tu puedes encontrar un ejemplo completo en GitHub — ve Simple SSE demo using PHP.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "comms.html#handler-eventsource-onopen", "onopen")}}{{Spec2('HTML WHATWG')}}Initial definition
+ + + +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support6{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatVersionUnknown}}5
Available in shared and dedicated workers[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + +
Caracteristica
+ 		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support4.445{{CompatNo}}124.1
Available in shared and dedicated workers[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] But not service workers as yet.

+ +

Mira también

+ + diff --git a/files/es/web/api/eventtarget/addeventlistener/index.html b/files/es/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..d5b3aa4aef --- /dev/null +++ b/files/es/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,335 @@ +--- +title: element.addEventListener +slug: Web/API/EventTarget/addEventListener +translation_of: Web/API/EventTarget/addEventListener +--- +

{{apiref("DOM Events")}}

+ +

Resumen

+ +

addEventListener() Registra un evento a un objeto en específico. El Objeto especifico puede ser un simple elemento en un archivo, el mismo  documento , una ventana o un  XMLHttpRequest.

+ +

Para registrar más de un eventListener, puedes llamar addEventListener() para el mismo elemento pero con diferentes tipos de eventos o parámetros de captura.

+ +

Sintaxis

+ +
target.addEventListener(tipo, listener[, useCapture]);
+target.addEventListener(tipo, listener[, useCapture, wantsUntrusted {{ Non-standard_inline() }}]); // Gecko/Mozilla only
+ +
+
tipo
+
Una cadena representando el  tipo de evento a escuchar.
+
listener
+
El objeto que recibe una notificación cuando un evento de el tipo especificado ocurre. Debe ser un objeto implementando la interfaz EventListener o solo una function en JavaScript.
+
useCapture {{ optional_inline() }}
+
Si es true, useCapture indica que el usuario desea iniciar la captura.   Después de iniciar la captura, todos los eventos del tipo especificado serán lanzados al listener registrado antes de comenzar  a ser controlados por algún EventTarget que esté por debajo en el arbol DOM del documento. +
Note: For event listeners attached to the event target; the event is in the target phase, rather than capturing and bubbling phases. Events in the target phase will trigger all listeners on an element regardless of the useCapture parameter.
+ +
Note: useCapture became optional only in more recent versions of the major browsers; for example, it was not optional prior to Firefox 6. You should provide that parameter for broadest compatibility.
+
+
+ +
+
wantsUntrusted {{Non-standard_inline}}
+
If true, the listener receives synthetic events dispatched by web content (the default is false for chrome and true for regular web pages). This parameter is only available in Gecko and is mainly useful for the code in add-ons and the browser itself. See Interaction between privileged and non-privileged pages for an example.
+
+ +

Ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>DOM Event Example</title>
+
+<style>
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+</style>
+
+<script>
+// Function to change the content of t2
+function modifyText() {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = "three";
+}
+
+// Function to add event listener to t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", modifyText, false);
+}
+
+document.addEventListener("DOMContentLoaded", load, false);
+</script>
+
+</head>
+<body>
+
+<table id="t">
+   <tr><td id="t1">one</td></tr>
+   <tr><td id="t2">two</td></tr>
+</table>
+
+</body>
+</html>
+
+ +

Ver en el JSFiddle

+ +

En el ejemplo anterior , modifyText() es una listener para los eventos click registrados utilzando addEventListener(). Un click en cualquier parte de la tabla notificara al handler y ejecutara la función  modifyText().

+ +

Si quieres pasar parámetros a la función del listener, debes utilizar funciones anónimas.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<title>DOM Event Example</title>
+
+<style>
+#t { border: 1px solid red }
+#t1 { background-color: pink; }
+</style>
+
+<script>
+
+// Function to change the content of t2
+function modifyText(new_text) {
+  var t2 = document.getElementById("t2");
+  t2.firstChild.nodeValue = new_text;
+}
+
+// Function to add event listener to t
+function load() {
+  var el = document.getElementById("t");
+  el.addEventListener("click", function(){modifyText("four")}, false);
+}
+</script>
+
+</head>
+<body onload="load();">
+
+<table id="t">
+  <tr><td id="t1">one</td></tr>
+  <tr><td id="t2">two</td></tr>
+</table>
+
+</body>
+</html>
+
+ +

Notas

+ +

¿Porqué utilizar addEventListener?

+ +

addEventListener es la forma de registrar un listener de eventos, como se especifica en W3C DOM. Sus beneficios son los siguientes:

+ + + +

La alternativa,  Antigua forma de registrar event listeners es descrita a continuación.

+ +

Adding a listener during event dispatch

+ +

If an EventListener is added to an EventTarget while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase.

+ +

Multiple identical event listeners

+ +

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called twice, and since the duplicates are discarded, they do not need to be removed manually with the removeEventListener method.

+ +

The value of this within the handler

+ +

It is often desirable to reference the element from which the event handler was fired, such as when using a generic handler for a series of similar elements. When attaching a function using addEventListener() the value of this is changed—note that the value of this is passed to a function from the caller.

+ +

In the example above, the value of this within modifyText() when called from the click event is a reference to the table 't'. This is in contrast to the behavior that occurs if the handler is added in the HTML source:

+ +
<table id="t" onclick="modifyText();">
+  . . .
+
+ +

The value of this within modifyText() when called from the onclick event will be a reference to the global (window) object.

+ +
Note: JavaScript 1.8.5 introduces the Function.prototype.bind() method, which lets you specify the value that should be used as this for all calls to a given function. This lets you easily bypass problems where it's unclear what this will be, depending on the context from which your function was called. Note, however, that you'll need to keep a reference to the listener around so you can later remove it.
+ +

This is an example with and without bind:

+ +
var Something = function(element)
+{
+  this.name = 'Something Good';
+  this.onclick1 = function(event) {
+    console.log(this.name); // undefined, as this is the element
+  };
+  this.onclick2 = function(event) {
+    console.log(this.name); // 'Something Good', as this is the binded Something object
+  };
+  element.addEventListener('click', this.onclick1, false);
+  element.addEventListener('click', this.onclick2.bind(this), false); // Trick
+}
+
+ +

A problem in the example above is that you cannot remove the listener with bind. Another solution is using a special function called handleEvent to catch any events:

+ +
var Something = function(element)
+{
+  this.name = 'Something Good';
+  this.handleEvent = function(event) {
+    console.log(this.name); // 'Something Good', as this is the Something object
+    switch(event.type) {
+      case 'click':
+        // some code here...
+        break;
+      case 'dblclick':
+        // some code here...
+        break;
+    }
+  };
+
+  // Note that the listeners in this case are this, not this.handleEvent
+  element.addEventListener('click', this, false);
+  element.addEventListener('dblclick', this, false);
+
+  // You can properly remove the listners
+  element.removeEventListener('click', this, false);
+  element.removeEventListener('dblclick', this, false);
+}
+
+ +

Legacy Internet Explorer and attachEvent

+ +

In Internet Explorer versions prior to IE 9, you have to use attachEvent rather than the standard addEventListener. To support IE, the example above can be modified to:

+ +
if (el.addEventListener) {
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent)  {
+  el.attachEvent('onclick', modifyText);
+}
+
+ +

There is a drawback to attachEvent, the value of this will be a reference to the window object instead of the element on which it was fired.

+ +

Older way to register event listeners

+ +

addEventListener() was introduced with the DOM 2 Events specification. Before then, event listeners were registered as follows:

+ +
// Pass a function reference — do not add '()' after it, which would call the function!
+el.onclick = modifyText;
+
+// Using a function expression
+element.onclick = function() {
+    // ... function logic ...
+};
+
+ +

This method replaces the existing click event listener(s) on the element if there are any. Similarly for other events and associated event handlers such as blur (onblur), keypress (onkeypress), and so on.

+ +

Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to register event listeners dynamically unless the extra features of addEventListener() are needed.

+ +

Memory issues

+ +
var i;
+var els = document.getElementsByTagName('*');
+
+// Case 1
+for(i=0 ; i<els.length ; i++){
+  els[i].addEventListener("click", function(e){/*do something*/}, false});
+}
+
+// Case 2
+function processEvent(e){
+  /*do something*/
+}
+
+for(i=0 ; i<els.length ; i++){
+  els[i].addEventListener("click", processEvent, false});
+}
+
+
+ +

In the first case, a new (anonymous) function is created at each loop turn. In the second case, the same previously declared function is used as an event handler. This results in smaller memory consumption. Moreover, in the first case, since no reference to the anonymous functions is kept, it is not possible to call element.removeEventListener because we do not have a reference to the handler, while in the second case, it's possible to do myElement.removeEventListener("click", processEvent, false).

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop(1.0) }}9.071.0
useCapture made optional1.06.09.011.60{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile(1.0) }}9.06.01.0
+
+ +

Gecko notes

+ + + +

WebKit notes

+ + + +

See Also

+ + + +

Specification

+ + diff --git a/files/es/web/api/eventtarget/dispatchevent/index.html b/files/es/web/api/eventtarget/dispatchevent/index.html new file mode 100644 index 0000000000..22a15ca8b5 --- /dev/null +++ b/files/es/web/api/eventtarget/dispatchevent/index.html @@ -0,0 +1,35 @@ +--- +title: element.dispatchEvent +slug: Web/API/EventTarget/dispatchEvent +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/EventTarget/dispatchEvent +--- +

{{ ApiRef("DOM Events")}}

+ +

Resumen

+ +

Lanza un evento en el sistema de eventos. El evento está sujeto al mismo comportamiento y capacidades que si fuera un evento de lanzamiento directo.

+ +

Sintaxis

+ +
bool = element.dispatchEvent(event)
+
+ + + +

Notas

+ +

Como se ve en el ejemplo anterior, dispatchEvent es el último paso en el proceso crear-inicializar-lanzar, que se usa para el lanzamiento manual de eventos en el modelo de implementación de eventos.

+ +

El evento puede ser creado mediante el método document.createEvent e inicializado usando initEvent u otro método, más específicamente, métodos de inicialización como initMouseEvent o initUIEvent.

+ +

Ver también Event object reference.

+ +

Especificación

+ +

DOM Level 2 Events: dispatchEvent

diff --git a/files/es/web/api/eventtarget/index.html b/files/es/web/api/eventtarget/index.html new file mode 100644 index 0000000000..f263590861 --- /dev/null +++ b/files/es/web/api/eventtarget/index.html @@ -0,0 +1,119 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - API +translation_of: Web/API/EventTarget +--- +

{{ ApiRef("DOM Events") }}

+ +

EventTarget es una interfaz implementada por los objetos que pueden administrar eventos y sus escuchadores.

+ +

{{domxref("Element")}}, {{domxref("document")}}, y {{domxref("window")}} son los objetivos más comunes de un evento, pero otros objetos pueden serlo también, por ejemplo {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, entre otros.

+ +

Muchos objetivos de eventos tales como: elementos, documentos y ventanas, también admiten la configuración de controladores de eventos a través de propiedades y atributos.

+ +

Métodos

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Registre un controlador de eventos de un tipo de evento específico en EventTarget.
+
{{domxref("EventTarget.removeEventListener()")}}
+
Elimina un detector de eventos del EventTarget.
+
{{domxref("EventTarget.dispatchEvent()")}}
+
Enviar un evento a este EventTarget.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}A few parameters are now optional (listener), or accepts the null value (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Compatibilidad

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}9.071.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}9.06.01.0
+
+ +

Additional methods for Mozilla chrome code

+ +

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

+ + + +

Vea también

+ + diff --git a/files/es/web/api/eventtarget/removeeventlistener/index.html b/files/es/web/api/eventtarget/removeeventlistener/index.html new file mode 100644 index 0000000000..1b022bbe50 --- /dev/null +++ b/files/es/web/api/eventtarget/removeeventlistener/index.html @@ -0,0 +1,217 @@ +--- +title: EventTarget.removeEventListener() +slug: Web/API/EventTarget/removeEventListener +tags: + - API + - DOM + - Event +translation_of: Web/API/EventTarget/removeEventListener +--- +

{{APIRef("DOM Events")}}

+ +

El método EventTarget.removeEventListener() remueve del {{domxref("EventTarget")}} un detector de evento previamente registrado con {{domxref("EventTarget.addEventListener")}}. El detector de evento a ser removido es identificado usando una combinación de de tipos de eventos, la misma funcion del detector de eventos, y muchas opciones adicionales que pueden afectar

+ +

Sintaxis

+ +
target.removeEventListener(type, listener[, options]);
+target.removeEventListener(tipo, listener[, useCapture])
+ +

Parámetros

+ +
+
tipo
+
Un string representando el tipo de evento del que se está removiendo un detector de evento.
+
detector (listener)
+
La función {{domxref("EventListener")}} del manejador de evento a eliminar del objetivo del evento.
+
options {{optional_inline}}
+
Un objeto que especifíca diversas características acerca del detector de eventos. Las opciones disponibles son: +
    +
  • capture: Un {{jsxref("Boolean")}} que indica que eventos de este tipo serán enviados al listener antes de ser enviado a cualquier EventTarget debado de éste en el DOM.
    • +
  • {{non-standard_inline}} mozSystemGroup: Sólo disponible ejecutando XBL o Firefox' chrome, es un {{jsxref("Boolean")}} que define si el detector es añadido al grupo del sistema.
    • +
+
+
useCapture {{optional_inline}}
+
Especifíca si el {{domxref("EventListener")}} que se está eliminando fue registrado como un detector de captura o no. Si no se indica, por defecto useCapture asumirá el valor false.
+
Si un detector se registro dos veces, uno con captura y otro sin, cada uno debe ser eliminado por separado. La eliminación de un detector de captura no afecta a una versión de "no-captura" del mismo detector, y viceversa.
+
+ +

Valor de retorno

+ +

undefined.

+ +

Coincidiendo disparadores de evento para su eliminación

+ +

Habiendose añadido detector de evento llamando {{domxref("EventTarget.addEventListener", "addEventListener()")}}, puede llegar un punto donde se requiera eliminar. Obviamente, se necesita especificar los mismos parámetros de tipo y listener a removeEventListener(), pero que hay acerca de los parámetros de options o de useCapture?

+ +

Mientras addEventListener() permite añadir el mismo detector más de una vez para el mismo tipo, si la opción es diferente, la única opción que removeEventListener() revisará es la bandera de capture/useCapture. Su valor debe coincidir con removeEventListener() para coincidir, pero otros valores no necesitan corresponder.

+ +

Por ejemplo, considerar la siguiente llamada a addEventListener():

+ +
element.addEventListener("mousedown", handleMouseDown, true);
+ +

Ahora, considera  removeEventListener():

+ +
element.removeEventListener("mousedown", handleMouseDown, false);     // Fallo
+element.removeEventListener("mousedown", handleMouseDown, true);      // Éxito
+ +

La primera llamada falla porque el valor de useCapture no coincide. El segundo valor funciona, puesto que useCapture es igual a su valor cuando se añadió el detector.

+ +

Ahora considera lo siguiente:

+ +
element.addEventListener("mousedown", handleMouseDown, { passive: true });
+ +

Aqui, especificamos un objeto options en el cual passive esta definido como true, mientras que otras opciones son dejados con su valor por defecto de false.

+ +

Vea consecutivamente, cada una de las siguientes llamadas a  removeEventListener(). Cualquiera de éstas donde capture o useCapture es true falla; en todas las demás funciona. Solo la configuración capture importa a removeEventListener().

+ +
element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Funciona
+element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Funciona
+element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Falla
+element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Funciona
+element.removeEventListener("mousedown", handleMouseDown, false);                 // Funciona
+element.removeEventListener("mousedown", handleMouseDown, true);                  // Falla
+ +

Vale la pena mencionar que algunos navegadores tienen un comportamiento inconsistente, y a menos que se tengan razones específicas, es probablemente una buena idea usar los mismos valores usados por la llamada a addEventListener() al momento de utilizar removeEventListener().

+ +

Notas

+ +

Si un {{ domxref("EventListener") }} es removido de un {{ domxref("EventTarget") }} cuando aún se está procesando el evento, no será ejecutado. Después de ser removido, un {{ domxref("EventListener") }} no será invocado por el evento al cual se registró, sin embargo se podrá adjuntar de nuevo a dicho evento.

+ +

Llamar {{ domxref("removeEventListener") }}  en algún {{ domxref("EventTarget") }} que no contenga el {{ domxref("EventListener") }} especificado será un acción sin efecto, es decir, se podrá llamar {{ domxref("removeEventListener") }} sin efectos negativos en los scripts.

+ +

Ejemplo

+ +

Este es un ejemplo en donde se agrega y después se elimina un {{ domxref("EventListener") }} 

+ +
var body = document.querySelector('body'),
+    clickTarget = document.getElementById('click-target'),
+    mouseOverTarget = document.getElementById('mouse-over-target'),
+    toggle = false;
+
+function makeBackgroundYellow() {
+    'use strict';
+
+    if (toggle) {
+        body.style.backgroundColor = 'white';
+    } else {
+        body.style.backgroundColor = 'yellow';
+    }
+
+    toggle = !toggle;
+}
+
+clickTarget.addEventListener('click',
+    makeBackgroundYellow,
+    false
+);
+
+mouseOverTarget.addEventListener('mouseover', function () {
+    'use strict';
+
+    clickTarget.removeEventListener('click',
+        makeBackgroundYellow,
+        false
+    );
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-eventtarget-removeeventlistener", "EventTarget.removeEventListener()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-EventTarget-removeEventListener", "EventTarget.removeEventListener()")}}{{Spec2("DOM2 Events")}}Definición inicial
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("api.EventTarget.removeEventListener", 3)}}

+ + + +

Polyfill to support older browsers

+ +

addEventListener() and removeEventListener() are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of addEventListener() and removeEventListener() in implementations which do not natively support it. However, this method will not work on Internet Explorer 7 or earlier, since extending the Element.prototype was not supported until Internet Explorer 8.

+ +
if (!Element.prototype.addEventListener) {
+  var oListeners = {};
+  function runListeners(oEvent) {
+    if (!oEvent) { oEvent = window.event; }
+    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) {
+        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
+        break;
+      }
+    }
+  }
+  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (oListeners.hasOwnProperty(sEventType)) {
+      var oEvtListeners = oListeners[sEventType];
+      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
+        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+      }
+      if (nElIdx === -1) {
+        oEvtListeners.aEls.push(this);
+        oEvtListeners.aEvts.push([fListener]);
+        this["on" + sEventType] = runListeners;
+      } else {
+        var aElListeners = oEvtListeners.aEvts[nElIdx];
+        if (this["on" + sEventType] !== runListeners) {
+          aElListeners.splice(0);
+          this["on" + sEventType] = runListeners;
+        }
+        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
+          if (aElListeners[iLstId] === fListener) { return; }
+        }
+        aElListeners.push(fListener);
+      }
+    } else {
+      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
+      this["on" + sEventType] = runListeners;
+    }
+  };
+  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
+    if (!oListeners.hasOwnProperty(sEventType)) { return; }
+    var oEvtListeners = oListeners[sEventType];
+    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
+      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
+    }
+    if (nElIdx === -1) { return; }
+    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
+      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
+    }
+  };
+}
+
+ +

+ +

Ver también

+ + diff --git a/files/es/web/api/fetch_api/conceptos_basicos/index.html b/files/es/web/api/fetch_api/conceptos_basicos/index.html new file mode 100644 index 0000000000..8c02021de6 --- /dev/null +++ b/files/es/web/api/fetch_api/conceptos_basicos/index.html @@ -0,0 +1,73 @@ +--- +title: Conceptos básicos de Fetch +slug: Web/API/Fetch_API/Conceptos_basicos +tags: + - API + - API Fetch + - Fetch + - conceptos + - guard + - request +translation_of: Web/API/Fetch_API/Basic_concepts +--- +

{{DefaultAPISidebar("Fetch API")}}{{draft}}

+ +
+

La API Fetch proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.

+
+ +
+

Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el foro de discusión de MDN, o Mozilla IRC (#mdn room.)

+
+ +

En pocas palabras

+ +

En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.

+ +

Service Workers es un ejemplo de una API que hace un fuerte uso de Fetch.

+ +

Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.

+ +

Guard

+ +

Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles immutable, request, request-no-cors, response, o none, dependiendo de donde el encabezado es usado.

+ +

Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a none (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto  {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nuevo tipo de objetocreando el constructorconfiguraciones de guarda (guard) del objeto {{domxref("Headers")}} asociado
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
{{domxref("Request.Request","Request()")}} con {{domxref("Request.mode","mode")}} de no-corsrequest-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
Métodos {{domxref("Response.error","error()")}} o {{domxref("Response.redirect","redirect()")}}immutable
+ +

Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un TypeError es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es immutable. Sin embargo, la operación funcionará si

+ + diff --git a/files/es/web/api/fetch_api/index.html b/files/es/web/api/fetch_api/index.html new file mode 100644 index 0000000000..13c733a799 --- /dev/null +++ b/files/es/web/api/fetch_api/index.html @@ -0,0 +1,81 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +

{{DefaultAPISidebar("Fetch API")}}
+ La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red). Resultará familiar a cualquiera que haya usado {{domxref("XMLHttpRequest")}}, pero la nueva API ofrece un conjunto de características más potente y flexible.

+ +

Conceptos y uso

+ +

Fetch ofrece una definición genérica de los objetos {{domxref("Request")}} y {{domxref("Response")}} (y otras cosas relacionadas con las solicitudes de red). Esto permitirá su uso donde sea necesario en un futuro, ya sea para operadores de servicios, API caché y otras cosas similares que manipulen o modifiquen las solicitudes y respuestas, o cualquier otro tipo de caso de uso que pudiera requerirle la generación de sus propias respuestas mediante programación.

+ +

También proporciona una definición para conceptos relacionados, como CORS y la semántica de encabezado HTTP origen, suplantando sus definiciones separadas en otros lugares.

+ +

Para hacer una solicitud y recuperar un recurso, utilice el método {{domxref("GlobalFetch.fetch")}}. Se implementa en múltiples interfaces, específicamente {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}. Esto hace que esté disponible en casi cualquier contexto donde quiera buscar recursos.

+ +

El método fetch() toma un argumento obligatorio, la ruta de acceso al recurso que desea recuperar. Devuelve una {{domxref("Promise")}} que resuelve en {{domxref("Response")}} a esa petición, sea o no correcta. También puede pasar opcionalmente un objeto de opciones init como segundo argumento (ver {{domxref("Request")}}).

+ +

Una vez que {{domxref("Response")}} es recuperada, hay varios métodos disponibles para definir cuál es el contenido del cuerpo y como se debe manejar (ver {{domxref("Body")}}).

+ +

Puede crear una solicitud y respuesta directamente a con los constructores {{domxref("Request.Request","Request()")}} y {{domxref("Response.Response","Response()")}}, pero no es recomendable hacerlo directamente. En su lugar, es preferible que sean creados como resultado de otras acciones de la API (por ejemplo, {{domxref("FetchEvent.respondWith")}} desde los operadores de servicios).

+ +
+

Nota: Puede encontrar mas información sobre las características de la API Fetch en Usando Fetch, y aprender los conceptos en Fetch: conceptos básicos.

+
+ +

Abortar una petición

+ +

Los navegadores han empezado a añadir soporte experimental para las interfaces {{domxref("AbortController")}} y {{domxref("AbortSignal")}} (Conocidas también como La API Abort), las cuales permiten que operaciones como Fetch y XHR puedan ser abortadas si no han terminado todavía. Visita las páginas de las interfaces para más detalles.

+ +

Fetch Interfaces o Métodos

+ +
+
{{domxref("GlobalFetch")}}
+
Contiene el método fetch() utilizado para obtener o inicializar un recurso.
+
{{domxref("Headers")}}
+
Representa los encabezados de la respuesta/solicitud, lo que le permite consultar y tomar diferentes acciones en función de los resultados.
+
{{domxref("Request")}}
+
Representa una solicitud de recursos.
+
{{domxref("Response")}}
+
Representa la respuesta a una solicitud.
+
+ +

Fetch mixin

+ +
+
{{domxref("Body")}}
+
Proporciona métodos relacionados con el contenido de la respuesta/solicitud, lo que le permite declarar cuál es su tipo y cómo debe manejarse.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/fetch_api/utilizando_fetch/index.html b/files/es/web/api/fetch_api/utilizando_fetch/index.html new file mode 100644 index 0000000000..0f647a7e61 --- /dev/null +++ b/files/es/web/api/fetch_api/utilizando_fetch/index.html @@ -0,0 +1,377 @@ +--- +title: Uso de Fetch +slug: Web/API/Fetch_API/Utilizando_Fetch +tags: + - API + - BODY + - Experimental + - Fetch + - Guía + - HTTP + - Petición + - Promesa + - Promise + - Respuesta +translation_of: Web/API/Fetch_API/Using_Fetch +--- +

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

+ +
+

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

+
+ +

Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.

+ +

La especificación fetch difiere de JQuery.ajax() en dos formas principales:

+ + + +

Una petición básica de fetch es realmente simple de realizar. Eche un vistazo al siguente código:

+ +
fetch('http://example.com/movies.json')
+  .then(response => response.json())
+  .then(data => console.log(data));
+ +

Aquí estamos recuperando un archivo JSON a través de red e impriminedo en la consola. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres buscas) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.

+ +

Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el mixin de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).

+ +
+

Nota: El mixin de Body tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease {{anch("Body")}} para más información.

+
+ +

Las peticiones de Fetch son controladas por la directiva de connect-src de Content Security Policy en vez de la directiva de los recursos que se han devuelto.

+ +

Suministrando opciones de petición

+ +

El método fetch() puede aceptar opcionalmente un segundo parámetro, un objeto init que permite controlar un numero de diferentes ajustes:

+ +

Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.

+ +
// Ejemplo implementando el metodo POST:
+async function postData(url = '', data = {}) {
+  // Opciones por defecto estan marcadas con un *
+  const response = await fetch(url, {
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'follow', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    body: JSON.stringify(data) // body data type must match "Content-Type" header
+  });
+  return response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+  .then(data => {
+    console.log(data); // JSON data parsed by `data.json()` call
+  });
+ +

Tenga en cuenta que  mode: "no-cors" solo permite un conjunto limitado de encabezados en la solicitud:

+ + + +

Comprobando que la petición es satisfactoria

+ +

Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición fetch() es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor true que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:

+ +
fetch('flores.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(miBlob) {
+      var objectURL = URL.createObjectURL(miBlob);
+      miImagen.src = objectURL;
+    });
+  } else {
+    console.log('Respuesta de red OK pero respuesta HTTP no OK');
+  }
+})
+.catch(function(error) {
+  console.log('Hubo un problema con la petición Fetch:' + error.message);
+});
+ +

Proporcionando tu propio objeto Request

+ +

En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método fetch(), puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método fetch():

+ +
var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+ +

Request() acepta exactamente los mismos parámetros que el método fetch(). Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:

+ +
var anotherRequest = new Request(myRequest, myInit);
+ +

Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de init. La copia debe estar hecha antes de la lectura del <body>, y leyendo el <body> en la copia, se marcará como leido en la petición original.

+ +
+

Nota: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que clone() no.

+
+ +

Enviar una petición con credenciales incluido

+ +

Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos credentials: 'include' en el el objeto init que se pasa al método fetch().

+ +
fetch('https://example.com', {
+  credentials: 'include'
+})
+ +

Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade credentials: 'same-origin'.

+ +
// El script fué llamado desde el origen 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})
+ +

Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa credentials: 'omit'.

+ +
fetch('https://example.com', {
+  credentials: 'omit'
+})
+ +

Enviando datos JSON

+ +

Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .

+ +
var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST', // or 'PUT'
+  body: JSON.stringify(data), // data can be `string` or {object}!
+  headers:{
+    'Content-Type': 'application/json'
+  }
+}).then(res => res.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+ +

Enviando un archivo

+ +

Los archivos pueden ser subido mediante el HTML de un elemento input <input type="file" />, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.

+ +
var formData = new FormData();
+var fileField = document.querySelector("input[type='file']");
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response => response.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+ +

Cabeceras

+ +

La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:

+ +
var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+ +

Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:

+ +
myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});
+ +

Los contenidos pueden ser consultados o recuperados:

+ +
console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+ +

Algunas de estas operaciones solo serán utiles en  {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API  para manipular headers.

+ +

Todos los métodosde de headers lanzan un TypeError si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un TypeError si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:

+ +
var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Cannot pretend to be a bank!");
+}
+ +

Un buen caso de uso para headers es comprobar cuando el tipo de contenido es correcto antes de que se procese:

+ +
fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType && contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // process your JSON further
+    });
+  } else {
+    console.log("Oops, we haven't got JSON!");
+  }
+});
+ +

Guarda (Guard)

+ +

Desde que las cabeceras pueden ser enviadas  en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.

+ +

Los valores posibles de guarda (guard) son:

+ + + +
+

Nota:  No se debería añadir o establecer una petición a un objeto headers guardado con la cabecera Content-Length. De igual manera, insertar Set-Cookie en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.

+
+ +

Objetos Response

+ +

Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando fetch() es resuelto.

+ +

Las propiedades de response que usarás son:

+ + + +

Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}},  cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:

+ +
var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});
+ +

El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).

+ +
+

Nota: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.

+
+ +

Body

+ +

Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:

+ + + +

El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.

+ + + +

Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.

+ +

Las peticiones body pueden ser establecidas pasando el parametro body:

+ +
var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+});
+ +

Tanto peticiones y respuestas (y por extensión la function fetch()), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad Context-Type de la cabecera si no es ha establecido una.

+ +

Detectar característica

+ +

Puedes comprobar si el navegador soporta  la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:

+ +
if (self.fetch) {
+    // run my fetch request here
+} else {
+    // do something with XMLHttpRequest?
+}
+ +

Polyfill

+ +

Para utilizar fetch() en un explorador no soportado, hay disponible un Fetch Polyfill que recrea la funcionalidad para navegadores no soportados.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/fetchevent/index.html b/files/es/web/api/fetchevent/index.html new file mode 100644 index 0000000000..c2f8e4d693 --- /dev/null +++ b/files/es/web/api/fetchevent/index.html @@ -0,0 +1,176 @@ +--- +title: FetchEvent +slug: Web/API/FetchEvent +tags: + - API + - FetchEvent + - Interfaz + - Offline + - Referencia + - Service Workers + - Workers +translation_of: Web/API/FetchEvent +--- +

{{APIRef("Service Workers API")}}{{ SeeCompatTable() }}

+ +

Este es el tipo de evento para eventos "fetch" despachados en el {{domxref("ServiceWorkerGlobalScope", "scope global del service worker", "", 1)}}. Contiene información sobre la búsqueda (fetch), incluyendo la petición (request) y cómo el receptor tratará la respuesta (response).

+ +

Provee el método {{domxref("FetchEvent.respondWith", "event.respondWith()")}}, el cúal nos permite proporcionar una respuesta a esta búsqueda (fetch).

+ +

Constructor

+ +
+
{{domxref("FetchEvent.FetchEvent()", "new FetchEvent()")}}
+
Crea un nuevo objecto FetchEvent. Este constructor no se usa normalmente.  El propio navegador crea estos objetos y los proporciona a los callbacks de eventos "fetch".
+
+ +

Propiedades

+ +

Hereda propiedades del ancestro, {{domxref("Event")}}.

+ +
+
{{domxref("fetchEvent.clientId")}} {{readonlyInline}}
+
El {{domxref("Client.id", "id")}} del mismo origen {{domxref("Client", "client")}} que inició el "fetch".
+
{{domxref("fetchEvent.preloadResponse")}} {{readonlyinline}}
+
Un {{jsxref("Promise")}} para un {{domxref("Response")}}, o vacío si este no es una navegación, o {{domxref("NavigationPreloadManager", "navigation preload", "", 1)}} no esta habilitado.
+
{{domxref("fetchEvent.request")}} {{readonlyInline}}
+
La {{domxref("Request")}} que el navegador intenta crear.
+
+ +

Métodos

+ +

Herada métodos del padre, {{domxref("ExtendableEvent")}}.

+ +
+
{{domxref("fetchEvent.respondWith()")}}
+
Evita el manejo de búsqueda predeterminado del navegador y proporciona (una promesa) una respuesta usted mismo.
+
{{domxref("extendableEvent.waitUntil()")}}
+
+

Extiende el tiempo de vida del evento. Se usa para notificar al navegador las tareas que van más allá de la devolución de una respuesta, como la transmisión y el almacenamiento en caché.

+
+
+ +

Ejemplos

+ +

Este evento fetch, permite al navegador hacer esta acción por defecto para peticiones non-GET. Para peticiones GET  esto intenta retornar una coincidencia en el cache, y  vuelve de nuevo a la red. Si busca una concidencia en el cache, actualiza asincronicamente el cache para la próxima vez.

+ +
addEventListener('fetch', event => {
+  // Permite al navegador hacer este asunto por defecto
+  // para peticiones non-GET.
+  if (event.request.method != 'GET') return;
+
+  // Evita el valor predeterminado, y manejar solicitud nosostros mismos.
+  event.respondWith(async function() {
+    // Intenta obtener la respuesta de el cache.
+    const cache = await caches.open('dynamic-v1');
+    const cachedResponse = await cache.match(event.request);
+
+    if (cachedResponse) {
+      // Si encontramos una coincidencia en el cache, lo devuelve, pero también
+      // actualizar la entrada en el cache en segundo plano.
+      event.waitUntil(cache.add(event.request));
+      return cachedResponse;
+    }
+
+    // Si no encontramos una coincidencia en el cache, usa la red.
+    return fetch(event.request);
+  }());
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Service Workers', '#fetch-event-section', 'FetchEvent')}}{{Spec2('Service Workers')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatChrome(40)}}{{ CompatGeckoDesktop("44.0") }}[1]{{CompatNo}}24{{CompatNo}}
Propiedad preloadResponse {{CompatChrome(59)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(46)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatChrome(40)}}{{CompatChrome(40)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
Propiedad preloadResponse {{CompatChrome(59)}}{{CompatChrome(59)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(46)}}{{CompatUnknown}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR.)

+ +

Ver también

+ + diff --git a/files/es/web/api/file/filename/index.html b/files/es/web/api/file/filename/index.html new file mode 100644 index 0000000000..2179e85756 --- /dev/null +++ b/files/es/web/api/file/filename/index.html @@ -0,0 +1,35 @@ +--- +title: File.fileName +slug: Web/API/File/fileName +tags: + - API + - Archivos + - DOM + - File API + - Propiedad + - Referencia +translation_of: Web/API/File/fileName +--- +

{{APIRef("File API")}}{{non-standard_header}} {{obsolete_header(7.0)}}

+ +

Devuelve el nombre del archivo. Por razones de seguridad la ruta es excluída de esta propiedad.

+ +
Propiedad deprecada. Utilice {{domxref("File.name")}} en su lugar.
+ +

Sintaxis

+ +
var name = instanceOfFile.fileName;
+ +

Valor

+ +

Una cadena

+ +

Especificación

+ +

No es parte de una especificación.

+ +

Ver también

+ + diff --git a/files/es/web/api/file/index.html b/files/es/web/api/file/index.html new file mode 100644 index 0000000000..006125622e --- /dev/null +++ b/files/es/web/api/file/index.html @@ -0,0 +1,112 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - File API + - Interfaz + - Referencia + - Web +translation_of: Web/API/File +--- +
{{APIRef }}
+ +

La interfaz File provee información acerca de los archivos y permite que el código JavaScript en una página web tenga acceso a su contenido.

+ +

Los objetos File son generalmente recuperados a través de un objeto {{domxref("FileList")}} retornado como resultado de un usuario seleccionado archivos por medio de un elemento {{ HTMLElement("input") }} , desde las operaciones drag y drop de un objeto  {{domxref("DataTransfer")}} , o desde la API mozGetAsFile() en un {{ domxref("HTMLCanvasElement") }}. En Gecko, desde código con privilegios es posible crear objetos File representando cualquier archivo local sin esperar la interacción del usuario (ver {{anch("Implementation notes")}} para más información.)

+ +

Un objeto File es una especie específica de {{DOMxRef("Blob")}}, y puede ser utilizada en cualquier contexto que un Blob puede ser usado. En particular, {{DOMxRef("FileReader")}}, {{DOMxRef("URL.createObjectURL()")}}, {{DOMxRef("ImageBitmapFactories.createImageBitmap()", "createImageBitmap()")}}, y {{DOMxRef("XMLHttpRequest", "", "send()")}} aceptan tanto Blobs y Files.

+ +

Ver Utilizando archivos desde aplicaciones web (Using files from web applications) para más información y ejemplos.

+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{domxref("File.File", "File()")}}
+
Retorna un nuevo objeto de tipo File.
+
+ +

Propiedades

+ +
+
{{DOMxRef("File.lastModified")}}{{ReadOnlyInline}}
+
Retorna el último tiempo que el archivo se modifico, en milisegundos desde la época de UNIX (1 de enero de 1970 a medianoche).
+
{{DOMxRef("File.lastModifiedDate")}} {{Deprecated_Inline}}{{ReadOnlyInline}} {{Gecko_MinVersion_Inline("15.0")}}
+
Retorna la última fecha (en un objeto {{JSxRef("Date")}}Date) de modificación del archivo referenciada por el objeto File.
+
{{DOMxRef("File.name")}}{{ReadOnlyInline}}
+
Retorna el nombre del archivo referenciada por el objeto File.
+
{{DOMxRef("File.webkitRelativePath")}} {{Non-standard_Inline}}{{ReadOnlyInline}}
+
Retorna la ruta relativa de la URL del {{DOMxRef("File")}}.
+
+

File implementa {{DOMxRef("Blob")}}, así que también cuenta con las siguientes propiedades:

+
+
{{DOMxRef("File.size")}}{{ReadOnlyInline}}
+
Retorna el tamaño del archivo en bytes.
+
{{DOMxRef("File.type")}}{{ReadOnlyInline}}
+
Retorna el tipo MIME del archivo.
+
+ +

Métodos

+ +

La interfaz File no define algún método, pero los hereda de la interfaz {{domxref("Blob")}}:

+ +
+
{{DOMxRef("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}}
+
Retorna un nuevo objeto Blob conteniendo la información en el rango especificado de bytes de la fuente Blob.
+
{{DOMxRef("Blob.stream()")}}
+
Transforma el archivo File en un {{DOMxRef("ReadableStream")}} que puede ser usado para leer el contenido de File.
+
{{DOMxRef("Blob.text()")}}
+
Transforma el archivo File en una corriente (stream) para leerse hasta completarse. Retorna una promesa que se resuelve con un {{DOMxRef("USVString")}} (texto).
+
{{DOMxRef("Blob.arrayBuffer()")}}
+
Transforma el archivo File en una corriente y leerlo hasta completarse. Devuelve una promesa que resuelve con un {{DOMxRef("ArrayBuffer")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad en Navegadores

+ +
+ + +

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

+
+ +

Notas de Implementación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/file/lastmodifieddate/index.html b/files/es/web/api/file/lastmodifieddate/index.html new file mode 100644 index 0000000000..8e322a2eec --- /dev/null +++ b/files/es/web/api/file/lastmodifieddate/index.html @@ -0,0 +1,101 @@ +--- +title: File.lastModifiedDate +slug: Web/API/File/lastModifiedDate +tags: + - API + - Archivo + - Archivos + - Deprecado + - File API + - Propiedad + - Referencia + - Solo lectura +translation_of: Web/API/File/lastModifiedDate +--- +
{{APIRef("File API") }} {{deprecated_header}}
+ +

La propiedad de solo lectura File.lastModifiedDate retorna la fecha de ultima modificacion del archivo. Archivos sin una ultima fecha de modificacion conocida retornan la fecha actual.

+ +

Sintaxis

+ +
var time = instanceOfFile.lastModifiedDate
+ +

Valor

+ +

Un objeto Date.

+ +

Ejemplo

+ +
// fileInput es un HTMLInputElement: <input type="file" multiple id="myfileinput">
+var fileInput = document.getElementById("myfileinput");
+
+// files es un objeto FileList (similar a NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i < files.length; i++) {
+  alert(files[i].name + " tiene una fecha de ultima modificacion el " + files[i].lastModifiedDate);
+}
+ +

Especificaciones

+ +

Aunque estaba presente en las primeras versiones de la especificacion de File API, esta propiedad ha sido eliminada de esta y ahora es no-estandar. Usar {{domxref("File.lastModified")}} como reemplazo.

+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.lastModified13.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}10.016.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.lastModified{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/file/name/index.html b/files/es/web/api/file/name/index.html new file mode 100644 index 0000000000..c03fefb77e --- /dev/null +++ b/files/es/web/api/file/name/index.html @@ -0,0 +1,70 @@ +--- +title: File.name +slug: Web/API/File/name +tags: + - API + - Archivo + - Archivos + - Propiedad + - Referencia +translation_of: Web/API/File/name +--- +

{{APIRef("File API")}}

+ +

Retorna el nombre del archivo representado por el objeto {{domxref("File")}}. Por razones de seguridad, la ruta de directorios es excluida de esta propiedad.

+ +

Sintaxis

+ +
var nombre = file.name;
+ +

Valor

+ +

Una cadena, conteniendo el nombre del archivo sin la ruta de directorios, por ejemplo: "Mi resumen.rtf".

+ +

Ejemplo

+ +
<input type="file" multiple onchange="processSelectedFiles(this)">
+
+ +
function processSelectedFiles(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i < files.length; i++) {
+    alert("Filename " + files[i].name);
+  }
+}
+ +

Prueba el resultado:

+ +

{{ EmbedLiveSample('Example', 300, 50) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('File API', '#file-attrs', 'name')}}{{Spec2('File API')}}Definicion inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("api.File.name")}}

+
+ +

Vea también

+ + diff --git a/files/es/web/api/file/type/index.html b/files/es/web/api/file/type/index.html new file mode 100644 index 0000000000..b433446aa4 --- /dev/null +++ b/files/es/web/api/file/type/index.html @@ -0,0 +1,72 @@ +--- +title: File.type +slug: Web/API/File/type +tags: + - API + - Archivos + - File API + - Propiedad + - Referencia + - Tipo de archivo +translation_of: Web/API/File/type +--- +
{{APIRef("File API")}}
+ +

Retorna el tipo de media (MIME) del archivo representado por un objeto {{domxref("File")}}.

+ +

Sintaxis

+ +
var tipo = file.type;
+ +

Valor

+ +

Una cadena (string), conteniendo el tipo de media (MIME) indicando el tipo del archivo, por ejemplo "image/png" para imágenes PNG.

+ +

Ejemplo

+ +
<input type="file" multiple onchange="mostrarTipo(this)">
+
+ +
function mostrarTipo(fileInput) {
+  const archivos = fileInput.files;
+
+  for (let i = 0; i < archivos.length; i++) {
+    const nombre = archivos[i].name;
+    const tipo = archivos[i].type;
+    alert("Nombre del archivo: " + nombre + " , Tipo: " + tipo);
+  }
+}
+ +

Note: Based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type. It is assumed based on the file extension; a PNG image file renamed to .txt would give "text/plain" and not "image/png". Moreover, file.type is generally reliable only for common file types like images, HTML documents, audio and video. Uncommon file extensions would return an empty string. Client configuration (for instance, the Windows Registry) may result in unexpected values even for common types. Developers are advised not to rely on this property as a sole validation scheme.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("api.File.type")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/file/using_files_from_web_applications/index.html b/files/es/web/api/file/using_files_from_web_applications/index.html new file mode 100644 index 0000000000..5aceed9d6a --- /dev/null +++ b/files/es/web/api/file/using_files_from_web_applications/index.html @@ -0,0 +1,372 @@ +--- +title: Utilizar ficheros desde aplicaciones web +slug: Web/API/File/Using_files_from_web_applications +tags: + - Basura + - Ficheros + - HTML5 + - HacerNavegadorAgnóstico + - Intermedio + - NecesitaActualizar + - Subir + - ajax actualización +translation_of: Web/API/File/Using_files_from_web_applications +--- +

{{ gecko_minversion_header("1.9.2") }}

+ +

 

+ +

El uso de la API File añadida al DOM en HTML5, ahora hace posible que la página web solicite al usuario que seleccione archivos locales y, a continuación, leer el contenido de esos archivos.  Esta selección se puede hacer, ya sea usando un elemento {{HTMLElement ( "input")}} de HTML o mediante arrastrar y soltar.

+ +

Selección de ficheros utilizando HTML

+ +

Seleccionar solo un fichero usando la API File es sencillo:

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+
+ +

Cuando el usuario elige el fichero, la función handleFiles() es llamada con un objeto FileList el cual a su vez contiene un objeto File que representa el fichero elegido por el usuario.

+ +

Si se prefiere permitir al usuario elegir varios ficheros, entonces se pone el atributo multiple en el elemento input:

+ +
<input type="file" id="input" multiple="true" onchange="handleFiles(this.files)">
+
+ +

En este caso, la lista de ficheros pasada a la función handleFiles() contiene un objeto File por cada fichero seleccionado por el usuario. 

+ +

{{ h2_gecko_minversion("Using hidden file input elements using the click() method", "2.0") }}

+ +

Comenzando en Gecko 2.0 {{ geckoRelease("2.0") }}, se puede ocultar el realmente feo {{ HTMLElement("input") }} y representar tu propio interfaz para abrir el picker de ficheros y pintar que fichero o ficheros ha seleccionado el usuario. Esto se puede hacer añadiendo al elemento input la característica "display:none" en su css, o estilo y llamando al método click() del elemento {{ HTMLElement("input") }}.

+ +

Como aparece en este HTML:

+ +
<form>
+  <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+</form>
+
+<a href="javascript:doClick()">Select some files</a>
+
+ +

Tu método doClick() puede parecerse al siguiente:

+ +
function doClick() {
+  var el = document.getElementById("fileElem");
+  if (el) {
+    el.click();
+  }
+}
+
+ +

Obviamente puedes cambiar como quieras, el estilo del botón para abrir el picker de ficheros.

+ +

Añadir dinámicamente un listener tipo change

+ +

Si tu campo input ha sido creado usando una libreria JavaScript como jQuery, se necesitará usar {{ domxref("element.addEventListener()") }} para añadir el manejador de eventos tipo change, como en el ejemplo siguiente:

+ +
var inputElement = document.getElementById("inputField");
+inputElement.addEventListener("change", handleFiles, false);
+
+function handleFiles() {
+  var fileList = this.files;
+
+  /* now you can work with the file list */
+}
+
+ +

Nota: en este caso, la función handleFiles() mira la lista de ficheros con la finalidad de aceptar un parametro, mientras los eventos listeners sean añadidos de esta manera no pueden aceptar un parametro del input.

+ +

{{ h1_gecko_minversion("Using blob URLs", "2.0") }}

+ +

Gecko 2.0 {{ geckoRelease("2.0") }} introduce soporte para los métodos de DOM {{ domxref("window.createBlobURL()") }} y {{ domxref("window.revokeBlobURL()") }}. El cual te permite crear un simple string con la URL que referenciar cualquier dato que pueda referenciar usando un objeto File DOM, esto incluye los ficheros locales del usuario del dispositivo.

+ +

Cuando tienes un objeto File te gusta poder referenciarlo con una URL desde el HTML, la manera de crear tu propio blob URL para poder hacer esto es la siguiente:

+ +
var blobURL = window.createBlobURL(fileObj);
+
+ +

El blob URL es un string que identifica el objeto File. Cada vez que se llama a {{ domxref("window.createBlobURL()") }}, un único blob URL se crea. Cada vez que esto pasa debe de ser liberado. Cuando el documento se cierra, se libera automáticamente, pero si tu página lo usa dinámicamente deberás liberarlos explicitamente llamando a {{ domxref("window.revokeBlobURL()") }}:

+ +
window.revokeBlobURL(blobURL);
+
+ +

Selección de ficheros usando drag and drop

+ +

También se puede dejar al usuario arrastrar los ficheros en tu aplicación web.

+ +

El primer paso para establecer la zona de arrastre, el lugar en donde dejar los ficheros arrastrados. La parte exacta en donde se coloque esta zona de arrastre dentro de tu aplicación, dependerá del diseño de la aplicación, pero crear el elemento es sencillo:

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

En este ejemplo se transforma el elemento de ID "dropbox" en la zona de arrastre. Esto se hace añadiendo listeners para lo eventos de dragenter, dragover, y drop.

+ +

Realmente en este caso no se necesita hacer nada con los eventos dragenter y dragover, por lo que ambas funciones seran muy sencillas. Sólo pararán la propagacion de eventos y prevendran las acciones por defecto:

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

La verdadera magia ocurre en la función drop():

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Aquí se recupera el campo dataTransfer del evento, a partir de ahi se extraen la lista de ficheros, y se pasan a handleFiles(). A partir de este punto se manejan los ficheros de igual manera tanto si se han obtenido usado el elemento input o drag and drop.

+ +

Recuperando la información de los ficheros selecionados

+ +

El objeto FileList es dado por el DOM y lista todos los ficheros selecionados por el usuario, cada uno es un objeto File. Para determinar el número de ficheros que han sido seleccionados se comprueba la longitud de la lista con el atributo length:

+ +
var numFiles = files.length;
+
+ +

Al objeto File se accede de manera sencilla, accediendo a la lista como si fuera un array:

+ +
for (var i = 0; i < files.length; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

El bucle itera por todos los ficheros de la lista.

+ +

Cada objeto File tiene tres atributos que contienen información util sobre el fichero.

+ +
+
name
+
Es de solo lectura y es el nombre del fichero sin ninguna información sobre el path.
+
size
+
Es de solo lectura y es el tamaño del fichero en bytes como un entero de 64-bit.
+
type
+
Es de solo lectura y contiene MIME type del fichero, o "" si el tipo no puede ser determinado.
+
+ +

Ejemplo: Mostrando miniaturas de una selección de imágenes del usuario

+ +

Digamos que usted esta desarrollando el próximo gran sitio web para compartir fotos, y quiere usar HTML5 para mostrar previsualizaciones de miniaturas de imágenes antes de que el usuario actual las suba. Basta con establecer su elemento input o zona de arrastre como se indicó anteriormente, y hacer una llamada a una función handleFiles() como la siguiente.

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    var imageType = /image.*/;
+
+    if (!file.type.match(imageType)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img);
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Aquí nuestro bucle recorre los archivos seleccionados por el usuario y mira el atributo type de cada archivo para ver si es una imagen (haciendo que una expresión regular coincida con la cadena de texto "image.*"). Para cada archivo que sea una imagen, creamos un nuevo elemento img. Se puede usar CSS para establecer bordes bonitos, sombras, y especificar el tamaño de la imagen, el de manera que ni siquiera necesita hacerse aquí.

+ +

Cada imagen tiene la clase CSS "obj" añadida, para hacerla mas fácil buscarla en el árbol del DOM. Además añadimos un atributo file a cada imagen especificando el Fichero para la imagen; esto nos permitira traer el hecho de subir las imágenes más tarde. Finalmente, usamos {{ domxref("Node.appendChild()") }} para añadir la nueva miniatura en el área de la previsualización de nuestro documento.

+ +

A continuación establecemos el FileReader para controlar la carga de la imagen de forma asíncrona y enlazarla con el elemento img. Después de crear el nuevo objeto FileReader, configuramos su función onload, luego llamamos a readAsDataURL() para comenzar la operación de lectura en segundo plano. Cuando el contenido completo de la imagen ha sido cargado, se convierte a  data: URL, el cuál es pasado al callback onload. Nuestra implementación de esta rutina simplemente establece el atributo src del elemento img cargado, cuyo resultado es la imagen apareciendo en la miniatura en la pantalla del usuario.

+ +

{{ h1_gecko_minversion("Example: Using blob URLs to display images", "2.0") }}

+ +

Este ejemplo el objeto blob URLs para mostrar las miniaturas de las imágenes. Además, se muestra otra información del archivo incluyendo sus nombres y tamaños. Tú puedes ver el ejemplo (tenga en cuenta que se requiere una versión Nghtly de Firefox del 23 de september 23 o mas reciente, o Firefox 4.0 beta 7).

+ +

El HTML que representa la interfaz es::

+ +
<form>
+  <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+</form>
+<a href="javascript:doClick()">Seleccione algunos archivos</a>
+<div id="fileList">
+  <p>¡No se han seleccionado archivos!</p>
+</div>
+
+ +

Esto establece nuestro elemento {{ HTMLElement("input") }} de nuestro, así como un enlace que invoca el selector de archivos, ya que mantenmos el input file oculto para prevenir mostrar un UI menos atractivo. Esto se explica anteriormente en al la sección {{ anch("Using hidden file input elements using the click() method") }}, así como el método doClick() que invoca el el selector de archivos.

+ +

El método handleFiles() es el siguiente:

+ +
function handleFiles(files) {
+  var d = document.getElementById("fileList");
+  if (!files.length) {
+    d.innerHTML = "<p>¡No se han seleccionado archivos!</p>";
+  } else {
+    var list = document.createElement("ul");
+    d.appendChild(list);
+    for (var i=0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.createBlobURL(files[i]);;
+      img.height = 60;
+      img.onload = function() {
+        window.revokeBlobURL(this.src);
+      }
+      li.appendChild(img);
+
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

Esto comienza buscando la URL del {{ HTMLElement("div") }} con la ID "fileList". Este es el bloque donde vamos a insertar la lista de archivos incluyendo las miniaturas.

+ +

Si el objeto {{ domxref("FileList") }} pasado a handleFiles() es null, simplemente establecemos el bloque inner HTML para mostrar "¡No se han seleccionado archivos!". En caso contrario, comenzamos a construir nuestra lista de archivos como sigue:

+ +
    +
  1. Un nuevo elemento de lista desordenada ({{ HTMLElement("ul") }} es creado.
    2. +
  2. El nuevo elemento de la lista es insertado en el bloque {{ HTMLElement("div") }} llamando a si método {{ domxref("element.appendChild()") }}.
    3. +
  3. Para cada {{ domxref("File") }} en el {{ domxref("FileList") }} representado files: +
      +
    1. Se crea un nuevo elemento de lista ({{ HTMLElement("li") }}) y lo inserta en la lista.
      2. +
    2. Se crea un nuevo elemento imagen ({{ HTMLElement("img") }}).
      3. +
    3. Establece en la fuente de la imagen un nuevo blob URL representandoel archivo, usando {{ domxref("window.createBlobURL()") }} para crear el blob URL.
      4. +
    4. Se establece el alto de la imagen en 60 pixels.
      5. +
    5. Se configura el controlador para el evento load para liberar el blob URL, puesto que ya no es necesario una vez que la imagen ha sido cargada. Esto se hace llamando al método {{ domxref("window.revokeBlobURL()") }}, pasando la cadena en el blob URL como se ha especificado para img.src.
      6. +
    6. Se añade el nuevo elemento de la lista a la lista.
      7. +
    +
    4. +
+ +

Ejemplo: Subiendo un archivo seleccionado por el usuario

+ +

Otra cosa que podrías querer hacer es dejar que el usuario suba el archivo o los archivos seleccionados (como las imagenes seleccionadas usando el ejemplo anterior) al servidor. Esto se puede hacer de forma asíncrona muy facilmente.

+ +

Creando las tareas de subida

+ +

Continuando con el código que contruye las miniaturas en el ejemplo anterior, hay que recordar que cada imagen en miniatura se encuentra en la clase CSS "obj", con el correspondiente File adjunto en un attributo file. Vamos a seleccionar todas las imágenes que el usuario ha seleccionado facilmente para subirlas usando {{ domxref("Document.querySelectorAll()") }}, como sigue:

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

La segunda línea crea un array, llamado imgs, de todos los elementos  en el documento con la clase CSS "obj". En nuestro caso, estos serán todas las miniaturas de las imágenes. Una vez que tenemos esa lista,    of all the elements in the document with the CSS class "obj". In our case, these will be all the image thumbnails. Once we have that list, es trivial pasar por la lista, creando una nueva instancia de FileUpload por cada una. Subiendo el correspondiente archivo por cada uno de ellos.

+ +

Manipulando el proceso de carga de un archivo

+ +

La función FileUpload acepta dos entradas: un elemento de imagen y un archivo desde el que leer los datos de la imagen.

+ +
function FileUpload(img, file) {
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  xhr.sendAsBinary(file.getAsBinary());
+}
+
+ +

La función FileUpload() mostrada arriba crea un throbber, el cual es usado para mostrar la información del progreso, a continuación se crea un XMLHttpRequest para manejar la subida de los datos.

+ +

Antes de subir los datos de hecho, se toman varias medidas preparatorias:

+ +
    +
  1. El listener del progreso de la carga del XMLHttpRequest's se configura para actualizar el throbber con una nueva información de porcentaje, por lo que a medida que progresa la carga, el throbber será actualizado en base a la última información.
    2. +
  2. El evento "load" de la carga del XMLHttpRequest's se configura para actualizar el throbber con el 100% como la información de progreso (para asegurar que el indicador de progreso realmente alcanza el 100%, en caso de las peculiaridades de granularidad durante el proceso). Entoces se elimina el throbber, puesto que ya no es necesario. Esto causa que el throbber desaparezca una vez la carga está completa.
    3. +
  3. La petición para cargar la imagen se inicia llamando al método XMLHttpRequest's open() para comenzar a generar una petición de tipo POST.
    4. +
  4. El MIME type para la carga se establece llamando a la función deXMLHttpRequest overrideMimeType(). En este caso, estamos usando un MIME type genérico; usted puede o no puede necesitar establecer MIME type en absoluto, dependiendo de su necesidad.
    5. +
  5. Finalmente, se llama a la función sendAsBinary() del XMLHttpRequest es llamada para subir el contenido del archivo. TEsto es necesario ser revisado, actualmete se está usando la rutina sincronizada en desuso getAsBinary() para extraer los datos del archivo..
    6. +
+ +

Manipulación del proceso de carga para un archivo, de forma asíncrona

+ +
function fileUpload(file) {
+  // Please report improvements to: marco.buratto at tiscali.it
+
+  var fileName = file.name;
+  var fileSize = file.size;
+  var fileData = file.getAsBinary(); // works on TEXT data ONLY.
+
+  var boundary = "xxxxxxxxx";
+  var uri = "serverLogic.php";
+
+  var xhr = new XMLHttpRequest();
+
+  xhr.open("POST", uri, true);
+  xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.
+  xhr.setRequestHeader("Content-Length", fileSize);
+
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) {
+
+        if (xhr.responseText != "") {
+          alert(xhr.responseText); // display response.
+        }
+      }
+    }
+  }
+
+  var body = "--" + boundary + "\r\n";
+  body += "Content-Disposition: form-data; name='fileId'; filename='" + fileName + "'\r\n";
+  body += "Content-Type: application/octet-stream\r\n\r\n";
+  body += fileData + "\r\n";
+  body += "--" + boundary + "--";
+
+  xhr.send(body);
+  return true;
+}
+
+ +

Esto necesita ser modificado para funcionar con datos binarios también.

+ +

Ver también

+ + + +

{{ HTML5ArticleTOC() }}

diff --git a/files/es/web/api/file/webkitrelativepath/index.html b/files/es/web/api/file/webkitrelativepath/index.html new file mode 100644 index 0000000000..749914e234 --- /dev/null +++ b/files/es/web/api/file/webkitrelativepath/index.html @@ -0,0 +1,132 @@ +--- +title: File.webkitRelativePath +slug: Web/API/File/webkitRelativePath +tags: + - Archivo + - Entidades Archivo y Directorio de la API + - File API + - Propiedad + - Referencia + - Solo lectura + - Web +translation_of: Web/API/File/webkitRelativePath +--- +

{{APIRef("File API")}}{{non-standard_header}}

+ +

La propiedad File.webkitRelativePath de solo lectura contiene un {{domxref("USVString")}} el cual especifica la ruta relativa del archivo al directorio seleccionado por el usuario en un elemento {{HTMLElement("input")}} con su {{htmlattrxref("webkitdirectory", "input")}} atributo definido.

+ +

Sintaxis

+ +
var rulaRelativa = File.webkitRelativePath
+ +

Valor

+ +

Un {{domxref("USVString")}} conteniendo la ruta del archivo relativa al directorio padre seleccionado por el usuario.

+ +

Ejemplo

+ +

En este ejemplo,un seleccionador de directorios es mostrado al usuario para permitirle seleccionar uno o mas directorios. Cuando el evento {{event("change")}} ocurre, una lista de todos los archivos contenidos dentro de la gerarquia de directorio seleccionado es generado y mostrado.

+ +

HTML

+ +
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
+<ul id="listing"></ul>
+ +

JavaScript

+ +
document.getElementById("filepicker").addEventListener("change", function(event) {
+  let output = document.getElementById("listing");
+  let files = event.target.files;
+
+  for (let i=0; i<files.length; i++) {
+    let item = document.createElement("li");
+    item.innerHTML = files[i].webkitRelativePath;
+    output.appendChild(item);
+  };
+}, false);
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{ SpecName('File System API', '#dom-file-webkitrelativepath', 'webkitRelativePath') }}{{ Spec2('File System API') }}Especificacion inicial.
+ +

Esta API no tiene especificacion W3C o WHATWG.

+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico13 {{ property_prefix("webkit") }}{{ CompatGeckoDesktop(49) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidChrome para AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basico{{ CompatNo }}0.16 {{ property_prefix("webkit") }}{{ CompatGeckoMobile(49) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/fileerror/index.html b/files/es/web/api/fileerror/index.html new file mode 100644 index 0000000000..c748ea51af --- /dev/null +++ b/files/es/web/api/fileerror/index.html @@ -0,0 +1,193 @@ +--- +title: FileError +slug: Web/API/FileError +translation_of: Web/API/FileError +--- +

{{APIRef("File System API")}}{{obsolete_header()}}

+ +

Se ha presentado un error al utilizar la interfaz {{ domxref("FileReader") }}.

+ +
+

Nota: Esta interfaz es obsoleta de acuerdo a la última especificación. Use la nueva DOM4 {{ domxref("DOMError") }} en su lugar.

+
+ +

La File System API, a FileError Representa un error que puede surgir al acceder al sistema de archivos utilizando la API asíncrona. Se extiende la interfaz FileERror descrita en la escritura del archivo y añadiendo así códigos de error nuevos.

+ +

FileError Objects son pasados una vez se haya lanzado un error. Los objetos tiene un código que muestra el tipo de error que haya ocurrido.

+ +

Mejores prácticas

+ +

La mayoría de la gente no lee la página de errores y excepciones a menos que estén perpletos. Así que los siguientes tips, son algúnos consejos que podrían ayudar a evitar algunos problemas.

+ +

Errores de retrollamada.

+ +

Aunque las devoluciones de llamada de error son opcionales, usted debe incluirlos en los argumentos de los métodos. Una aplicación web puede fallar por diversas razones, por lo que no requiere pasar el resto de su día adivinando lo que está pasando y/o realizando el sistema.

+ +

No haga funcionar su aplicación desde ruta://  (file://)

+ +

Por razones de seguridad, los navegadores no le permiten ejecutar su aplicación desde file://. De hecho, muchas de las API de almacenamiento de gran alcance(como sistema de archivos, BlobBuilder y FileReader) lanzan errores si ejecuta la aplicación a nivel local de file://. Cuando estás haciendo una prueba de su aplicación y no deseas configurar un servidor web, puede pasarse por alto la restricción de seguridad en Chrome. Simplemente comienza a Chrome con la restricción de seguridad en Chrome con la bandera --allow-file- access-from-files Utilice la bandera sólo para propósitos de prueba.

+ +

Tradución a español en proceso...

+ +

Hasta el momento se ha traducido hasta este punto, las tablas que verás a continuación contienen pequeñas descripciones báscicas de la implementación y el análisis del tema que se está observando.

+ +

Atributo

+ + + + + + + + + + + + + + + + +
AttributeTypeDescription
codeunsigned shortThe most appropriate error code for the condition. See {{anch("Error codes")}} for possible values.
+ +

Error codes

+ +

{{ Note("Do not rely on the numeric values of the constants, which might change as the specifications continue to change. Use the constant names instead.") }}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
ENCODING_ERR5The URL is malformed. Make sure that the URL is complete and valid.
INVALID_MODIFICATION_ERR9The modification requested is not allowed. For example, the app might be trying to move a directory into its own child or moving a file into its parent directory without changing its name.
INVALID_STATE_ERR7The operation cannot be performed on the current state of the interface object. For example, the state that was cached in an interface object has changed since it was last read from disk.
NO_MODIFICATION_ALLOWED_ERR6The state of the underlying file system prevents any writing to a file or a directory.
NOT_FOUND_ERR1A required file or directory could not be found at the time an operation was processed. For example, a file did not exist but was being opened.
NOT_READABLE_ERR4The file or directory cannot be read, typically due to permission problems that occur after a reference to a file has been acquired (for example, the file or directory is concurrently locked by another application).
PATH_EXISTS_ERR12The file or directory with the same path already exists.
QUOTA_EXCEEDED_ERR10Either there's not enough remaining storage space or the storage quota was reached and the user declined to give more space to the database. To ask for more storage, see Managing HTML5 Offline Storage.
SECURITY_ERR2 +

Access to the files were denied for one of the following reasons:

+ +
    +
  • The files might be unsafe for access within a Web application.
    • +
  • Too many calls are being made on file resources.
    • +
  • Other unspecified security error code or situations.
    • +
+
TYPE_MISMATCH_ERR11The app looked up an entry, but the entry found is of the wrong type. For example, the app is asking for a directory, when the entry is really a file.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}0.16{{ property_prefix("webkit") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Gecko notes

+ + + +

See also

+ + diff --git a/files/es/web/api/filereader/index.html b/files/es/web/api/filereader/index.html new file mode 100644 index 0000000000..d5d0f5e349 --- /dev/null +++ b/files/es/web/api/filereader/index.html @@ -0,0 +1,182 @@ +--- +title: FileReader +slug: Web/API/FileReader +translation_of: Web/API/FileReader +--- +

{{ APIRef("File API") }}

+ +

Sumario

+ +

 

+ +

El objeto FileReader permite que las aplicaciones web lean ficheros (o información en buffer) almacenados en el cliente de forma asíncrona, usando los objetos {{domxref("File")}} o {{domxref("Blob")}} dependiendo de los datos que se pretenden leer.

+ +

 

+ +

El objeto File puede ser obtenido desde un objeto {{domxref("FileList")}} devuelto como resultado de la selección de archivos por parte del usuario en un elemento {{HTMLElement("input")}}, desde el objeto DataTransfer producido por una operación de arrastre (drag and drop) o desde la API mozGetAsFile () en un {{domxref("HTMLCanvasElement")}}.

+ +

Constructor

+ +
FileReader FileReader();
+ +

Mira el artículo Using files from web applications para más detalles y ejemplos.

+ +

Propiedades

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
Un {{domxref("DOMError")}} que representa el error que ocurrió al momento de leer el archivo.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
Devuelve un entero que indica el estado de FileReader. Puede ser uno de los siguientes: + + + + + + + + + + + + + + + + + + +
EMPTY0No ha sido leido ningún dato aún.
LOADING1La información está siendo leída.
DONE2Se ha completado la solicitud de lectura.
+
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
El contenido del fichero. Esta propieda es válida solo cuando la propiedad FileReader.readyState es 2, es decir, cuando la lectura ha finalizado. El formato de la información depende de los métodos usados al iniciar la operación de lectura.
+
+ +

Controladores de eventos

+ +
+
{{domxref("FileReader.onabort")}}
+
Un controlador para el evento {{event("abort")}}. Este evento se activa cada vez que se interrumpe la operación de lectura.
+
{{domxref("FileReader.onerror")}}
+
Un controlador para el evento {{event("error")}}. Este evento se activa cada vez que la operación de lectura encuentra un error.
+
{{domxref("FileReader.onload")}}
+
Un controlador para el evento {{event("load")}}. Este evento se activa cada vez que la operación de lectura se ha completado satisfactoriamente.
+
{{domxref("FileReader.onloadstart")}}
+
Un controlador para el evento {{event("loadstart")}}. Este evento se activa cada vez que comienza la lectura.
+
{{domxref("FileReader.onloadend")}}
+
Un controlador para el evento {{event("loadend")}}. Este evento se activa cada vez que  la operación de lecura se ha completado (ya sea con éxito o fallo).
+
{{domxref("FileReader.onprogress")}}
+
Un controlador para el evento {{event("progress")}}. Este evento se activa mientras se está leyendo el contenido del objeto {{domxref("Blob")}}.
+
+ +
+

Nota: Como FileReader hereda de {{domxref("EventTarget")}}, todos esos eventos también pueden ser escuchados usando el método {{domxref("EventTarget.addEventListener()","addEventListener")}}.

+
+ +

 

+ +

Métodos

+ +

 

+ +
+
{{domxref("FileReader.abort()")}}
+
Interrumpe la operación de lectura. A su regreso readyState será DONE.
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}
+
Comienza la lectura del contenido del objeto {{ domxref("Blob") }} especificado, una vez terminada, el atributo result contiene un  {{domxref("ArrayBuffer")}} representando los datos del fichero.
+
{{domxref("FileReader.readAsBinaryString()")}}
+
Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene los datos binarios en bruto del archivo como una cadena.
+
{{domxref("FileReader.readAsDataURL()")}}
+
Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene un data: URL que representa los datos del fichero.
+
{{domxref("FileReader.readAsText()")}}
+
Comienza la lectura del contenido del objeto {{ domxref("Blob") }}, una vez terminada, el atributo result contiene el contenido del fichero como una cadena de texto.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API','#FileReader-interface','FileReader')}}{{Spec2('File API')}}Definición inicial.
+ +

Soporte en los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet Explorer*Opera*Safari
Soporte básico{{ CompatGeckoDesktop("1.9.2") }}71012.026.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte básico3231011.56.1
+
+ +

Notas de implementación

+ + + +

Notas específicas para Gecko

+ + + +

See also

+ + diff --git a/files/es/web/api/filereader/onload/index.html b/files/es/web/api/filereader/onload/index.html new file mode 100644 index 0000000000..d3172638fd --- /dev/null +++ b/files/es/web/api/filereader/onload/index.html @@ -0,0 +1,29 @@ +--- +title: FileReader.onload +slug: Web/API/FileReader/onload +tags: + - Archivo + - Controlador de Eventos + - Lector de Archivos + - Propiedad + - Referencia +translation_of: Web/API/FileReader/onload +--- +

{{APIRef}}

+ +

La propiedad FileReader.onload contiene un controlador de evento ejecutado cuando {{event('load')}}  es ejecutado, cuando el  contenido es leído con readAsArrayBuffer, readAsBinaryString, readAsDataURL o readAsText está habilitado.

+ +

Ejemplo

+ +
// Respuest desde un <input type="file" onchange="onChange(event)">
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // El texto del archivo se mostrará por consola aquí
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+
diff --git a/files/es/web/api/filereader/readasarraybuffer/index.html b/files/es/web/api/filereader/readasarraybuffer/index.html new file mode 100644 index 0000000000..c8ebd96ae7 --- /dev/null +++ b/files/es/web/api/filereader/readasarraybuffer/index.html @@ -0,0 +1,37 @@ +--- +title: FileReader.readAsArrayBuffer() +slug: Web/API/FileReader/readAsArrayBuffer +tags: + - File + - FileReader + - Leer archivo +translation_of: Web/API/FileReader/readAsArrayBuffer +--- +

{{APIRef("File API")}}

+ +

El método readAsArrayBuffer es usado para iniciar la lectura del contenido especificado en {{domxref("Blob")}} o {{domxref("File")}}. Cuando finaliza la operación de lectura, el método {{domxref("FileReader.readyState","readyState")}} devuelve DONE, y el evento {{event("loadend")}} es lanzado. Al mismo tiempo, el atributo {{domxref("FileReader.result","result")}} contiene {{domxref("ArrayBuffer")}} que representa los datos del archivo.

+ +

Sintaxis

+ +
instanceOfFileReader.readAsArrayBuffer(blob);
+ +

Parámetros

+ +
+
blob
+
El {{domxref("Blob")}} o {{domxref("File")}} (archivo) que se va a leer.
+
+ +

Especificaciones

+ +

{{page("/es-ES/docs/Web/API/FileReader","Specifications")}}

+ +

Compatibilidad del navegador

+ +

{{page("/es-ES/docs/Web/API/FileReader","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/filereader/readasdataurl/index.html b/files/es/web/api/filereader/readasdataurl/index.html new file mode 100644 index 0000000000..a4f7155a70 --- /dev/null +++ b/files/es/web/api/filereader/readasdataurl/index.html @@ -0,0 +1,68 @@ +--- +title: FileReader.readAsDataURL() +slug: Web/API/FileReader/readAsDataURL +tags: + - Archivos + - Referencia + - metodo +translation_of: Web/API/FileReader/readAsDataURL +--- +

{{APIRef("File API")}}

+ +

El método readAsDataURL es usado para leer el contenido del especificado {{domxref("Blob")}} o {{domxref("File")}}.  Cuando la operación de lectura es terminada, el {{domxref("FileReader.readyState","readyState")}} se convierte en DONE, y el {{event("loadend")}} es lanzado. En ese momento, el atributo {{domxref("FileReader.result","result")}} contiene  la información como una URL representando la información del archivo como una cadena de caracteres codificados en base64.

+ +

Sintaxis

+ +
instanceOfFileReader.readAsDataURL(blob);
+ +

Parametros

+ +
+
blob
+
El {{domxref("Blob")}} o {{domxref("File")}} desde el cual leer.
+
+ +

Ejemplo

+ +

HTML

+ +
<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Image preview...">
+ +

JavaScript

+ +
function previewFile() {
+  var preview = document.querySelector('img');
+  var file    = document.querySelector('input[type=file]').files[0];
+  var reader  = new FileReader();
+
+  reader.onloadend = function () {
+    preview.src = reader.result;
+  }
+
+  if (file) {
+    reader.readAsDataURL(file);
+  } else {
+    preview.src = "";
+  }
+}
+ +

Resultado en vivo

+ +

{{EmbedLiveSample("Ejemplo", "100%", 240)}}

+ +
Nota: el constructor FileReader()  no es soportado por Internet Explorer version anterior a la 10. Para una completa compatibilidad de codigo puedes ver nuestra Posibler solución de compatibilidad para vista previa de imagenes entre navegadores. Ve también este ejemplo más poderoso.
+ +

Especificaciones

+ +

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

+ +

Compatibilidad de navegadores

+ +

{{page("/en-US/docs/Web/API/FileReader","Browser compatibility")}}

+ +

Tambien ver

+ + diff --git a/files/es/web/api/filereader/readastext/index.html b/files/es/web/api/filereader/readastext/index.html new file mode 100644 index 0000000000..0eaa0e636b --- /dev/null +++ b/files/es/web/api/filereader/readastext/index.html @@ -0,0 +1,109 @@ +--- +title: FileReader.readAsText() +slug: Web/API/FileReader/readAsText +tags: + - API + - File API + - api de lectura de archivos + - leer archivos +translation_of: Web/API/FileReader/readAsText +--- +
{{APIRef("File API")}}
+ +

El método readAsText se usa para leer el contenido de un tipo {{domxref("Blob")}} o {{domxref("File")}}. Cuando la operación de lectura se completa, el atributo {{domxref("FileReader.readyState","readyState")}} cambia a DONE, el evento {{event("loadend")}} se dispara y el atributo {{domxref("FileReader.result","result")}} contiene el contenido del archivo como una cadena de texto.

+ +

Sintaxis

+ +
instanceOfFileReader.readAsText(blob[, encoding]);
+ +

Parametros

+ +
+
blob
+
Una variable de tipo {{domxref("Blob")}} o {{domxref("File")}} de la cual se leerán los datos.
+
encoding {{optional_inline}}
+
Una cadena de texto especificando la codificación de caracteres que se usará en los datos leidos. Por defecto, se utiliza UTF-8 si el parametro no se especifica
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Initial definition
+ +

Compatibilidad en los navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.2")}}[1]7{{CompatVersionUnknown}}10[2]12.02[3]6.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support323{{CompatVersionUnknown}}1011.56.1
+
+ +

[1] Anterior a Gecko 2.0 beta 7 (Firefox 4.0 beta 7), todos los parámetros de tipo {{domxref("Blob")}} eran de tipo {{domxref("File")}} ; esto ha sido actualizado para emparejarse a la especificacion de manera correcta. Anterior a Gecko 13.0 {{geckoRelease("13.0")}} la propiedad FileReader.error devolvía un objeto de tipo {{domxref("FileError")}}. Esta interfaz ha sido eliminada y ahora la propiedad FileReader.error devuelve el objeto {{domxref("DOMError")}} como está definido en el borrador de FileAPI.

+ +

[2] IE9 tiene una File API Lab.

+ +

[3] Opera tiene soporte parcial in 11.1.

+ +

Vea también

+ + diff --git a/files/es/web/api/filereader/result/index.html b/files/es/web/api/filereader/result/index.html new file mode 100644 index 0000000000..83104c8e28 --- /dev/null +++ b/files/es/web/api/filereader/result/index.html @@ -0,0 +1,107 @@ +--- +title: FileReader.result +slug: Web/API/FileReader/result +tags: + - API + - Archivos + - Ficheros +translation_of: Web/API/FileReader/result +--- +
{{APIRef("File API")}}
+ +
 
+ +
La propiedad result de {{domxref("FileReader")}} retorna el contenido del archivo. Esta propiedad es válida únicamente después de que la operación de lectura del archivo es completada. El formato de la infomación devuelta depende de cuál de los métodos de lectura fue usado.
+ +

Sintaxis

+ +
var file = instanceOfFileReader.result
+
+ +

Valor

+ +

Una cadena de texto apropiada o un {{domxref("ArrayBuffer")}} dependiendo de cuál método de lectura haya provocado la operación de lectura. El valor es null si la lectura no se ha completado aún o no fue exitosa.

+ +

Los tipos de resultados son descritos a continuación.

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
MétodoDescripción
readAsArrayBuffer()result es un ArrayBuffer de JavaScript que contiene la información binaria.
readAsBinaryString() +

result contiene la información binaria del archivo en una cadena de texto.

+
readAsDataURL() +

result es una cadena de texto que representa una URL con la propiedad data: que contiene la información leída del archivo.

+
readAsText()result es una cadena de texto con el contenido del archivo.
+ +

Ejemplo

+ +

Este ejemplo representa una función read(), que lee un archivo de un file input. Funciona creando un objeto de {{domxref("FileReader")}} y creando un listener para los eventos load de tal manera que cuando el archivo es leído, la propiedad result es obtenida y pasada a la función callback proporcionada a read().

+ +

El contenido es manejado como texto.

+ +
var fileInput = document.querySelector('input[type="file"]');
+
+function read(callback) {
+  var file = fileInput.files.item(0);
+  var reader = new FileReader();
+
+  reader.onload = function() {
+    callback(reader.result);
+  }
+
+  reader.readAsText(file);
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Definición inicial
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.FileReader.result")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/filesystem/index.html b/files/es/web/api/filesystem/index.html new file mode 100644 index 0000000000..62f5e91b4b --- /dev/null +++ b/files/es/web/api/filesystem/index.html @@ -0,0 +1,118 @@ +--- +title: FileSystem +slug: Web/API/FileSystem +translation_of: Web/API/FileSystem +--- +

{{APIRef("File System API")}} {{non-standard_header}}

+ +

La interfaz de la API FileSystem  para la entrada de archivos y directorios es usada para representar un sistema de archivos.  Estos objetos pueden ser obtenidos desde la propiedad {{domxref("FileSystemEntry.filesystem", "filesystem")}} en cualquier entrada del sistema de archivos . Algunos navegadores ofrecen APIs adicionales para crear y administrar el sistema de archivos , como el metodo de Chrome {{domxref("Window.requestFileSystem", "requestFileSystem()")}}.

+ +

This interface will not grant you access to the users filesystem. Instead you will have a "virtual drive" within the browser sandbox. If you want to gain access to the users filesystem you need to invoke the user by eg. installing a Chrome extension. The relevant Chrome API can be found here.

+ +
+

Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the {{anch("Browser compatibility")}} section for details.

+
+ +

Conceptos Basicos

+ +

Hay dos formas de acceder a un objeto FileSystem :

+ +
    +
  1. You can directly ask for one representing a sandboxed file system created just for your web app directly by calling window.requestFileSystem().  If that call is successful, it executes a callback handler, which receives as a parameter a FileSystem object describing the file system.
    2. +
  2. You can get it from a file system entry object, through its {{domxref("FileSystemEntry.filesystem", "filesystem")}} property.
    3. +
+ +

Propiedades

+ +
+
{{domxref("FileSystem.name")}} {{ReadOnlyInline}}
+
A {{domxref("USVString")}} representing the file system's name. This name is unique among the entire list of exposed file systems.
+
{{domxref("FileSystem.root")}} {{ReadOnlyInline}}
+
A {{domxref("FileSystemDirectoryEntry")}} object which represents the file system's root directory. Through this object, you can gain access to all files and directories in the file system.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File System API')}}{{Spec2('File System API')}}Draft of proposed API
+ +

This API has no official W3C or WHATWG specification.

+ +

Compatibilidad entre navegadores 

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Soporte basico13{{ property_prefix("webkit") }}{{ CompatGeckoDesktop(50) }}{{ CompatNo }}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}} {{ property_prefix("webkit") }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo }}0.16{{ property_prefix("webkit") }}{{ CompatGeckoMobile(50) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

[1] Microsoft Edge implements this interface under the name WebKitFileSystem, and supports its use only in drag-and-drop scenarios using the {{domxref("DataTransferItem.webkitGetAsEntry()")}} method. It's not available for use in file or folder picker panels (such as when you use an {{HTMLElement("input")}} element with the {{domxref("HTMLInputElement.webkitdirectory")}} attribute.

+ +

See also

+ + diff --git a/files/es/web/api/fullscreen_api/index.html b/files/es/web/api/fullscreen_api/index.html new file mode 100644 index 0000000000..0914c6d627 --- /dev/null +++ b/files/es/web/api/fullscreen_api/index.html @@ -0,0 +1,297 @@ +--- +title: Fullscreen API +slug: Web/API/Fullscreen_API +translation_of: Web/API/Fullscreen_API +--- +

{{DefaultAPISidebar("Fullscreen API")}}

+ +

La API Fullscreen provee una manera fácil de presentar contenido web usando la pantalla completa del usuario. La API permite indicar al navegador que un elemento y sus hijos, si los tiene, ocupar la pantalla completa, ocultando toda la interfaz del usuario y otras aplicaciones de la pantalla mientras se esté en pantalla completa.

+ +
+

De momento, no todos los navegadores usan la versión sin prefijo de la API. Consulta la tabla que resume las diferencias de prefijos y nombres.

+
+ +

Activando modo de pantalla completa

+ +

Para cualquier elemento que quieras presentar en pantalla completa (como por ejemplo, un elemento {{ HTMLElement("video") }}), puedes presentarlo en pantalla completa, simplemente invocando a su método requestFullscreen().

+ +

Consideremos este elemento {{ HTMLElement("video") }}:

+ +
<video controls id="myvideo">
+  <source src="somevideo.webm"></source>
+  <source src="somevideo.mp4"></source>
+</video>
+
+ +

Podemos poner este video en pantalla completa con un script como éste:

+ +
var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+}
+
+ +

Diferencias de presentación

+ +

Cabe aclarar una diferencia clave entre las implementaciones de Gecko y WebKit: Gecko automáticamente añade reglas CSS al elemento para ajustarlo a las dimensiones de la pantalla: "width: 100%; height: 100%". WebKit no hace esto; en su lugar, centra el elemento con su mismo tamaño original en un fondo negro. Para obtener el mismo comportamiento en WebKit, necesitas añadir manualmente las reglas CSS "width: 100%; height: 100%;" al elemento:

+ +
#myvideo:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+ +

Por otro lado, si quieres emular el comportamiento de WebKit en Gecko, necesitarías colocar el elemento a presentar dentro de otro elemento, con las reglas CSS necesarias para ajustarlo a la apariencia requerida, y será dicho elemento contenedor el que se establecerá para aparecer en pantalla completa.

+ +

Notificación

+ +

Cuando el modo de pantalla completa sea invocado exitosamente, el documento que contiene al elemento recibe un evento {{ event("fullscreenchange") }}. Cuando se sale del modo de pantalla completa, el documento recibe de nuevo un evento {{ event("fullscreenchange") }}. Nótese que el evento {{ event("fullscreenchange") }} no provee información alguna sobre si el documento está entrando o saliendo a modo de pantalla completa, pero puedes saber si está en dicho modo si la propiedad {{ domxref("document.fullscreenElement", "fullscreenElement") }} del documento no es nula.

+ +

Cuando la solicitud de pantalla completa falla

+ +

No es garantía que se pueda cambiar a modo de pantalla completa. Por ejemplo, los elementos {{ HTMLElement("iframe") }} tienen un atributo {{ HTMLAttrXRef("allowfullscreen", "iframe") }} para decidir si se permitirá que el contenido se muestre en pantalla completa. Además, ciertos tipos de contenido, como plug-ins en ventana, no pueden ser presentados en modo de pantalla completa. Intentar hacerlo con elementos que no lo permitan (o el padre o descendente de un elemento así), no funcionará. En su lugar, el elemento que solicitó la pantalla completa recibirá un evento fullscreenerror. En Firefox, cuando falla una solicitud de pantalla completa, el navegador registrará un mensaje de error en la consola, explicando la falla de la solicitud. En Chrome y versiones recientes de Opera, sin embargo, no se genera ninguna advertencia.

+ +
+

Nota: Las solicitudes de pantalla completa necesitan ser invocadas dentro de un manejador de eventos, o de otro modo, serán denegadas.

+
+ +

Saliendo del modo de pantalla completa

+ +

El usuario siempre tendrá la habilidad de salir del modo de pantalla completa por su propia cuenta; véase {{ anch("Things_your_users_want_to_know", "Cosas que los usuarios querrán saber") }}. Incluso se puede hacer programáticamente, llamando al método {{domxref("exitFullscreen()")}}.

+ +

Otra información

+ +

El objeto {{ domxref("document") }} provee información adiciional que puede ser útil al desarrollar aplicaciones de pantalla completa:

+ +
+
{{ domxref("document.fullscreenElement", "fullscreenElement") }}
+
El atributo fullscreenElement apunta al {{ domxref("element", "elemento") }} actualmente en modo pantalla. Si no es nulo, el documento está en pantalla completa, y si es nulo, no lo está.
+
{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
+
El atributo fullscreenEnabled indica si el documento está actualmente en un estado que permitiría solicitudes al modo de pantalla completa.
+
+ +

Cosas que los usuarios querrán saber

+ +

Puedes asegurarte de hacer saber a los usuarios que pueden presionar la tecla ESC (o F11) para salir del modo de pantalla completa.

+ +

Adicionalmente, navegando a otra página, cambiando de pestaña, o cambiando a otra aplicación(usando, por ejemplo, Alt-Tab) mientras se está en pantalla completa, también se saldrá de dicho modo.

+ +

Ejemplo

+ +

En este ejemplo, se presenta un video en una página web. Presionando la tecla Return o Enter el usuario podrá moverse entre modo de ventana o de pantalla completa para la presentación del video.

+ +

Ver ejemplo en vivo

+ +

Observando la tecla Enter

+ +

Cuando la página se carga, este código se ejecuta para establecer un evento para cuando se presione la tecla Enter.

+ +
document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+
+ +

Cambiando entre modo de pantalla completa y modo de ventana

+ +

Este código es llamado cuando el usuario presiona la tecla Enter, como se ve arriba.

+ +
function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+
+ +

En este código, primero se observa si el atributo fullscreenElement de {{ domxref("document") }} (comprobando si tiene prefijo moz, ms, o webkit). Si es null, el documento está en modo de ventana actualmente, así que necesitamos cambiarlo a modo de pantalla completa. Esto se hace llamando a la función {{ domxref("element.requestFullscreen()") }}.

+ +

Si el modo de pantalla completa está activado (fullscreenElement no es null), llamamos a la función {{ domxref("document.exitFullscreen()") }}.

+ +

Prefijado

+ +

De momento, no todos los navegadores están implementando la versión sin prefijo de la API. Aquí está la tabla que resume los prefijos y diferencias de nombres entre ellos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EstándarBlink (Chrome y Opera)Gecko (Firefox)Internet Explorer 11EdgeSafari (WebKit)
{{domxref("Document.fullscreen")}}webkitIsFullScreenmozFullScreen-webkitIsFullScreenwebkitIsFullScreen
{{domxref("Document.fullscreenEnabled")}}webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
{{domxref("Document.fullscreenElement")}}webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
{{domxref("Document.onfullscreenchange")}}onwebkitfullscreenchangeonmozfullscreenchangeonmsfullscreenchangeonwebkitfullscreenchangeonwebkitfullscreenchange
{{domxref("Document.onfullscreenerror")}}onwebkitfullscreenerroronmozfullscreenerroronmsfullscreenerroronwebkitfullscreenerroronwebkitfullscreenerror
{{domxref("Document.exitFullscreen()")}}webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
{{domxref("Element.requestFullscreen()")}}webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Versión inicial.
+ +

Browser compatibility

+ +

All browsers implement this APIs. Nevertheless some implement it with prefixed names we slightly different spelling: e.g. instead of requestFullscreen(), there is a MozRequestFullScreen().

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico15 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.0 {{ property_prefix("-webkit") }}
fullscreenEnabled20 {{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.1 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
fullscreenEnabled{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatUnknown}}{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Véase también

+ + diff --git a/files/es/web/api/gamepad_api/index.html b/files/es/web/api/gamepad_api/index.html new file mode 100644 index 0000000000..ea16ef2b62 --- /dev/null +++ b/files/es/web/api/gamepad_api/index.html @@ -0,0 +1,95 @@ +--- +title: Gamepad API +slug: Web/API/Gamepad_API +tags: + - API + - Experimental + - Gamepad API + - juegos +translation_of: Web/API/Gamepad_API +--- +
{{DefaultAPISidebar("Gamepad API")}}
+ +

Gamepad API es la manera de los desarrolladores de acceder y responder a las señales de los gamepads y otros controles para juegos de una manera simple y consistente. Éste contiene tres interfaces, dos eventos y una función especializada, para responder a los gamepads siendo conectados y desconectados, y acceder a otra información sobre los mismos gamepads, y que botones y otros controles están siendo presionados.

+ +

Interfaces

+ +
+
Gamepad
+
Representa un gamepad/control conectado a la computadora.
+
GamepadButton
+
Representa un botón en uno de los gamepads conectados.
+
GamepadEvent
+
El evento objeto representa eventos que son enviados a los gamepads.
+
+ +

Extensiones experimentales de los gamepads

+ +
+
GamepadHapticActuator
+
Representa el hardware en el control designado para proveer retroalimentación háptica al usuario (si está disponible), más comunmente hardware de vibración.
+
GamepadPose
+
Representa la posición de un control (ej. posición y orientación el espacio 3D) en el caso de un controllador WebVR. Éste no es usado por el nuevo estándar WebXR.
+
+ +

Ver también las extensiones para la interfaz del navegador, para caracteristicas que le permitan acceder a la información mencionada.

+ +

Extensiones y otras interfaces

+ + + +
+
{{domxref("Navigator.getGamepads()")}}
+
Una extensión a el objeto {{domxref("Navigator")}} que devuelve un arreglo de objetos {{domxref("Gamepad")}}, uno para cada gamepad conectado.
+
+ +

Eventos del Window

+ +
+
{{domxref("Window.ongamepadconnected")}}
+
Representa un manejador de evento que se ejecutará cuando un gamepad es conectado (cuando se dispara el evento {{event('gamepadconnected')}}).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Representa un manejador de evento que se ejecutará cuando un gamepad es desconectado (cuando se dispara el evento {{event('gamepaddisconnected')}}).
+
+ +

Guías y tutoriales

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Defines the {{anch("Experimental Gamepad extensions")}}.
{{SpecName("Gamepad", "", "The Gamepad API specification")}}{{Spec2("Gamepad")}}Initial definition
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/gamepadbutton/index.html b/files/es/web/api/gamepadbutton/index.html new file mode 100644 index 0000000000..666d75b9a9 --- /dev/null +++ b/files/es/web/api/gamepadbutton/index.html @@ -0,0 +1,90 @@ +--- +title: GamepadButton +slug: Web/API/GamepadButton +tags: + - API + - API Gamepad + - Referencia + - juegos +translation_of: Web/API/GamepadButton +--- +
{{APIRef("Gamepad API")}}
+ +

La interfaz GamepadButton define un botón individual de un gamepad u otro control, dando acceso al estado actual de diferentes tipos de botones disponibles en el dispositivo de control.

+ +

Un objeto GamepadButton se devuelve al solicitar cualquier valor del array devuelto por la propiedad buttons de la interfaz {{domxref("Gamepad")}}.

+ +
+

Nota: Este es el caso en Firefox Gecko 28 en adelante; Chrome y versiones anteriores de Firefox continúan devolviendo un array de valores dobles cuando se accede a esta propiedad.

+
+ +

Propiedades

+ +
+
{{domxref("GamepadButton.value")}} {{readonlyInline}}
+
Un valor doble usado para representar el estado actual de botones análogos, así como los gatillos de muchos gamepads modernos. Los valores se normalizan al rango 0.0 —1.0, donde 0.0 representa un botón que no está presionado, y 1.0 representa un botón que está completamente presionado.
+
{{domxref("GamepadButton.pressed")}} {{readonlyInline}}
+
Un valor {{domxref("Boolean")}} que indica el estado el botón, ya sea que actualmente se encuentre presionado (true) o sin presionar (false).
+
+ +

Ejemplo

+ +

El siguiente código se toma de mi demostración del botón del API de Gamepad (puedes ver el demo en vivo, y encontrar el código fuente en Github.) Nota que el código — en Chrome {{domxref("Navigator.getGamepads")}} necesita un prefijo webkit y los valores del botón serán guardados como un array de valores dobles, mientras qe en Firefox {{domxref("Navigator.getGamepads")}} no se necesita un prefijo, y los valores de los botones se guardan como un array de objetos {{domxref("GamepadButton")}}; estas son las propiedades {{domxref("GamepadButton.value")}} o {{domxref("GamepadButton.pressed")}} a las que necesitamos acceder, dependiendo de qué tipo de botones haya. En este simple ejemplo yo solo he permitido estos.

+ +
function gameLoop() {
+  if(navigator.webkitGetGamepads) {
+    var gp = navigator.webkitGetGamepads()[0];
+
+    if(gp.buttons[0] == 1) {
+      b--;
+    } else if(gp.buttons[1] == 1) {
+      a++;
+    } else if(gp.buttons[2] == 1) {
+      b++;
+    } else if(gp.buttons[3] == 1) {
+      a--;
+    }
+  } else {
+    var gp = navigator.getGamepads()[0];
+
+    if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) {
+      b--;
+    } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) {
+      a++;
+    } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) {
+      b++;
+    } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) {
+      a--;
+    }
+  }
+
+  ball.style.left = a*2 + "px";
+  ball.style.top = b*2 + "px";
+
+  var start = rAF(gameLoop);
+};
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Gamepad", "#gamepadbutton-interface", "GamepadButton")}}{{Spec2("Gamepad")}}Definición inicial
+ +

Compatibilidad de Navegadores

+ +

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

+ +

Recomendado

+ +

Usando la API de Gamepad

diff --git a/files/es/web/api/geolocation/clearwatch/index.html b/files/es/web/api/geolocation/clearwatch/index.html new file mode 100644 index 0000000000..ceb2cec832 --- /dev/null +++ b/files/es/web/api/geolocation/clearwatch/index.html @@ -0,0 +1,134 @@ +--- +title: Geolocation.clearWatch() +slug: Web/API/Geolocation/clearWatch +translation_of: Web/API/Geolocation/clearWatch +--- +
+
{{ APIref("Geolocation API") }}
+ +
El método Geolocation.clearWatch() se utiliza para eliminar el registro de controladores de monitoreo lugar/error previamente instalados usando Geolocation.watchPosition().
+
+ +

Sintaxis

+ +
navigator.geolocation.clearWatch(id);
+ +

Parametros

+ +
+
id
+
El número de identificación que devuelve el método Geolocation.watchPosition() al instalar el controlador que desea eliminar.
+
+ +

Ejemplo

+ +
var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial.
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removido en 15.0
+ Reintroducido en 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidChrome for AndroidFirefox Mobil (Gecko)IE MobilOpera MobilSafari Mobil
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocation/getcurrentposition/index.html b/files/es/web/api/geolocation/getcurrentposition/index.html new file mode 100644 index 0000000000..436a002971 --- /dev/null +++ b/files/es/web/api/geolocation/getcurrentposition/index.html @@ -0,0 +1,130 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +

{{ APIref("Geolocation API") }}

+ +

Resumen

+ +

El método Geolocation.getCurrentPosition() se utiliza para obtener la posición de un dispositivo.

+ +

Sintaxis

+ +
navigator.geolocation.getCurrentPosition(success, error, options)
+ +

Parámetros

+ +
+
success
+
Una función de devolución de llamada que toma un objeto de posición({{domxref("Position")}}) como único parámetro de entrada.
+
error {{optional_inline}}
+
Una función de devolución de llamada opcional que toma un objeto {{domxref("PositionError")}} como único parámetro de entrada.
+
options {{optional_inline}}
+
Un objeto opcional {{domxref("PositionOptions")}}.
+
+ +

Ejemplo

+ +
var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Your current position is:');
+  console.log('Latitude : ' + crd.latitude);
+  console.log('Longitude: ' + crd.longitude);
+  console.log('More or less ' + crd.accuracy + ' meters.');
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Eliminado en 15.0
+ Reintroducido en 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobil (Gecko)IE MobileOpera MobilSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocation/index.html b/files/es/web/api/geolocation/index.html new file mode 100644 index 0000000000..56d37a2314 --- /dev/null +++ b/files/es/web/api/geolocation/index.html @@ -0,0 +1,114 @@ +--- +title: Geolocalización +slug: Web/API/Geolocation +translation_of: Web/API/Geolocation +--- +
{{APIRef("Geolocation API")}}
+ +

La interfaz Geolocalización representa un objeto capaz de obtener mediante programación la posición del dispositivo. Se da acceso Web de la ubicación del dispositivo. Esto permite a un sitio Web o aplicación ofrecer resultados personalizados basados ​​en la ubicación del usuario.

+ +

Se obtiene un objeto con esta interfaz mediante la propiedad {{domxref("NavigatorGeolocation.geolocation")}} implementado por el objeto {{domxref("Navigator")}}.

+ +
+

Nota: Por razones de seguridad, cuando una página web intenta obtener acceso a la información de ubicación, se notifica al usuario y le pide conceder el permiso. Tenga en cuenta que cada navegador tiene sus propias políticas y métodos para solicitar este permiso.

+
+ +

Propiedades

+ +

La interfaz de Geolocalización no implementa ni hereda propiedades.

+ +

Métodos

+ +

La interfaz Geolocation no hereda ningún método.

+ +
+
Geolocation.getCurrentPosition()
+
Determina la ubicación actual del dispositivo y devuelve un objeto de posición({{domxref("Position")}}) con los datos.
+
Geolocation.watchPosition()
+
+ +

Devuelve un valor de largo(long) que representa la función de devolución de llamada de reciente creación que se invoca cada vez que cambia la ubicación del dispositivo.

+ +
+
Geolocation.clearWatch()
+
Elimina el controlador especial instalado previamente utilizando watchPosition().
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad en navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removido en 15.0
+ Reintroducido en 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocation/watchposition/index.html b/files/es/web/api/geolocation/watchposition/index.html new file mode 100644 index 0000000000..dbd6a1170d --- /dev/null +++ b/files/es/web/api/geolocation/watchposition/index.html @@ -0,0 +1,138 @@ +--- +title: Geolocation.watchPosition() +slug: Web/API/Geolocation/watchPosition +translation_of: Web/API/Geolocation/watchPosition +--- +

{{ APIref("Geolocation API") }}

+ +

El método Geolocation.watchPosition() se utiliza para registrar una función de controlador que se llamará automáticamente cada vez que la posición del dispositivo cambia. También puede, opcionalmente, especificar una función de devolución de la gestión de errores.

+ +

Este método devuelve un valor de ID de seguimiento que se puede utilizar para anular el registro del controlador pasándolo al método Geolocation.clearWatch().

+ +

Sintaxis

+ +
id = navigator.geolocation.watchPosition(success, error, options)
+ +

Parámetros

+ +
+
success
+
Una función de devolución de llamada que toma un objeto de posición({{domxref("Position")}}) como parámetro de entrada.
+
error {{optional_inline}}
+
Una función de devolución de llamada opcional que toma un objeto {{domxref("PositionError")}} como parámetro de entrada.
+
options {{optional_inline}}
+
Un objeto opcional {{domxref("PositionOptions")}}.
+
+ +

Ejemplo

+ +
var id, target, option;
+
+function success(pos) {
+  var crd = pos.coords;
+
+  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
+    console.log('Congratulation, you reach the target');
+    navigator.geolocation.clearWatch(id);
+  }
+};
+
+function error(err) {
+  console.warn('ERROR(' + err.code + '): ' + err.message);
+};
+
+target = {
+  latitude : 0,
+  longitude: 0,
+}
+
+options = {
+  enableHighAccuracy: false,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+id = navigator.geolocation.watchPosition(success, error, options);
+
+ +

Especificacines

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation', '#watch-position', 'Geolocation.watchPosition()')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Eliminado en 15.0
+ Reintroducido en 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobil (Gecko)IE MobileOpera MobilSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocationcoordinates/index.html b/files/es/web/api/geolocationcoordinates/index.html new file mode 100644 index 0000000000..e59758e448 --- /dev/null +++ b/files/es/web/api/geolocationcoordinates/index.html @@ -0,0 +1,113 @@ +--- +title: Coordinates +slug: Web/API/GeolocationCoordinates +translation_of: Web/API/GeolocationCoordinates +--- +
{{APIRef("Geolocation API")}}
+ +

La interfaz Coordinates representa la posición y altitud del dispositivo en la Tierra, así como la precisión con la cual estas propiedades son calculadas.

+ +

Propiedades

+ +

La interfaz Coordinates no hereda ninguna propiedad.

+ +
+
{{domxref("Coordinates.latitude")}} {{readonlyInline}}
+
Devuelve un double que representa la latitud de la posición en grados con decimales.
+
{{domxref("Coordinates.longitude")}} {{readonlyInline}}
+
Devuelve un double que representa la longitud de la posición en grados con decimales.
+
{{domxref("Coordinates.altitude")}} {{readonlyInline}}
+
Devuelve un double que representa la altitud de la posición en metros, relativo al nivel del mar. Este valor puede ser null si la implementación no puede proporcionar la información.
+
{{domxref("Coordinates.accuracy")}} {{readonlyInline}}
+
Devuelve un double que representa la precisión de las propiedades latitude y longitude, expresada en metros.
+
{{domxref("Coordinates.altitudeAccuracy")}} {{readonlyInline}}
+
Devuelve un double que representa la precisión de la propiedad altitude expresada en metros. Este valor puede ser null.
+
{{domxref("Coordinates.heading")}} {{readonlyInline}}
+
Devuelve un double que representa la dirección en la que el dispositivo está viajando. Este valor, indicado en grados, indica la distancia real a la que el dispositivo se encuentra del norte. 0 grados representa el norte real, y la dirección se determina en el sentido de la agujas del reloj (lo que significa que el este es 90 grados y el oeste es 270 grados). Si speed es 0, heading es NaN. En caso de que el dispositivo no pueda proporcionar la información de heading, este valor es null.
+
{{domxref("Coordinates.speed")}} {{readonlyInline}}
+
Devuelve un double que representa la velocidad del dispositivo en metros por segundo. Este valor puede ser null.
+
+ +

Métodos

+ +

La interfaz Coordinates no implementa ni edita ningún método.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation', '#coordinates', 'Coordinates')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/geolocationcoordinates/latitude/index.html b/files/es/web/api/geolocationcoordinates/latitude/index.html new file mode 100644 index 0000000000..0bff2b5c34 --- /dev/null +++ b/files/es/web/api/geolocationcoordinates/latitude/index.html @@ -0,0 +1,97 @@ +--- +title: Coordinates.latitude +slug: Web/API/GeolocationCoordinates/latitude +translation_of: Web/API/GeolocationCoordinates/latitude +--- +
{{APIRef("Geolocation API")}}
+ +

Coordinates.latitude es una propiedad de sólo lectura que devuelve un double representando la latitud de la posición en grados decimales.

+ +

Sintaxis

+ +
lat = coordinates.latitude
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Geolocation', '#lat', 'Coordinates.latitude')}}{{Spec2('Geolocation')}}Especificación Inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico5{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("4")}}{{CompatUnknown}}10.60{{CompatUnknown}}
+
+ +

Mirar también

+ + diff --git a/files/es/web/api/geolocationposition/index.html b/files/es/web/api/geolocationposition/index.html new file mode 100644 index 0000000000..23c3881e5c --- /dev/null +++ b/files/es/web/api/geolocationposition/index.html @@ -0,0 +1,63 @@ +--- +title: Position +slug: Web/API/GeolocationPosition +tags: + - API + - Contexto seguro + - Geolocalización + - Geolocation API + - Interfaz + - Posición + - Position +translation_of: Web/API/GeolocationPosition +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

La interfaz Position representa la posición del dispositivo en cuestión en un momento dado. La posición, representada por el objeto {{domxref("Coordinates")}}, comprende la posición en dos dimensiones del dispositivo en un esferoide representando la Tierra y además su altitud y velocidad.

+ +

Propiedades

+ +

La interfaz Position no hereda ninguna propiedad.

+ +
+
{{domxref("Position.coords")}} {{readonlyInline}} {{securecontext_inline}}
+
Devuelve un objeto {{domxref("Coordinates")}} que indica la posición actual.
+
{{domxref("Position.timestamp")}} {{readonlyInline}} {{securecontext_inline}}
+
Devuelve un  {{domxref("DOMTimeStamp")}} indicando el momento en que la localización ha sido recuperada.
+
+ +

Métodos

+ +

La interfaz Position no implementa ni hereda ningún método.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation', '#position', 'Position')}}{{Spec2('Geolocation')}}Especificación inicial.
+ +

Compatibilidad de navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/globaleventhandlers/index.html b/files/es/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..7cc46be5aa --- /dev/null +++ b/files/es/web/api/globaleventhandlers/index.html @@ -0,0 +1,272 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM HTML + - GlobalEventHandlers + - Mixin + - Referencia + - combinación + - eventos +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("DOM HTML")}}
+ +

La combinación («mixin» en inglés) GlobalEventHandlers describe los controladores de eventos comunes a varias interfaces como {{DOMxRef("HTMLElement")}}, {{DOMxRef("Document")}} o {{DOMxRef("Window")}}. Cada una de estas interfaces puede, por supuesto, agregar más controladores de eventos además de los que se enumeran a continuación.

+ +
+

Nota: GlobalEventHandlers es una combinación («mixin») y no una interfaz; en realidad, no puedes crear un objeto de tipo GlobalEventHandlers.

+
+ +

Propiedades

+ +

Esta interfaz no incluye ninguna propiedad excepto los controladores de eventos que se enumeran a continuación.

+ +

Controladores de eventos

+ +

Estos controladores de eventos se definen en el mixin {{DOMxRef("GlobalEventHandlers")}} y se implementan mediante {{DOMxRef("HTMLElement")}}, {{DOMxRef("Document")}}, {{DOMxRef("Window ")}}, así como por {{DOMxRef("WorkerGlobalScope")}} para «Web Workers».

+ +
+
+
{{DOMxRef("GlobalEventHandlers.onabort")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{DOMxRef("HTMLMediaElement/abort_event", "abort")}}.
+
{{DOMxRef("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationcancel")}}, lo cual indica que una {{web.link("/s/docs/Web/CSS/CSS_Animations", "animación CSS")}} se ha cancelado.
+
{{DOMxRef("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationend")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Animations", "la animación CSS")}} se ha detenido.
+
{{DOMxRef("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
Un {{DOMxRef("EventHandler")}} llamado cuando se ha enviado un evento {{event("animationiteration")}}, indica que una {{web.link("/es/docs/Web/CSS/CSS_Animations", "animación CSS")}} ha comenzado a reproducir una nueva iteración de la secuencia de animación.
+
{{DOMxRef("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("animationstart")}}, lo cual indica que una {{web.link("/es/docs/Web/CSS/CSS_Animations", "animación CSS")}} se ha comenzado a reproducir.
+
{{DOMxRef("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("auxclick")}}, el cual indica que se ha presionado un botón no principal en un dispositivo de entrada (por ejemplo, un botón central del ratón).
+
{{DOMxRef("GlobalEventHandlers.onblur")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("blur")}}.
+
{{DOMxRef("GlobalEventHandlers.onerror")}}
+
Es un {{DOMxRef("OnErrorEventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("error")}}.
+
{{DOMxRef("GlobalEventHandlers.onfocus")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("focus")}}.
+
{{DOMxRef("GlobalEventHandlers.oncancel")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("cancel")}}.
+
{{DOMxRef("GlobalEventHandlers.oncanplay")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("canplay")}}.
+
{{DOMxRef("GlobalEventHandlers.oncanplaythrough")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("canplaythrough")}}.
+
{{DOMxRef("GlobalEventHandlers.onchange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("change")}}.
+
{{DOMxRef("GlobalEventHandlers.onclick")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("click")}}.
+
{{DOMxRef("GlobalEventHandlers.onclose")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("close")}}.
+
{{DOMxRef("GlobalEventHandlers.oncontextmenu")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("contextmenu")}}.
+
{{DOMxRef("GlobalEventHandlers.oncuechange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("cuechange")}}.
+
{{DOMxRef("GlobalEventHandlers.ondblclick")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dblclick")}}.
+
{{DOMxRef("GlobalEventHandlers.ondrag")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("drag")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragend")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragend")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragenter")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragenter")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragexit")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragexit")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragleave")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragleave")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragover")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragover")}}.
+
{{DOMxRef("GlobalEventHandlers.ondragstart")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("dragstart")}}.
+
{{DOMxRef("GlobalEventHandlers.ondrop")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("drop")}}.
+
{{DOMxRef("GlobalEventHandlers.ondurationchange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("durationchange")}}.
+
{{DOMxRef("GlobalEventHandlers.onemptied")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("emptied")}}.
+
{{DOMxRef("GlobalEventHandlers.onended")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("ended")}}.
+
{{DOMxRef("GlobalEventHandlers.onformdata")}}
+
Es un {{DOMxRef("EventHandler")}} para procesar eventos {{event("formdata")}}, que se activa después de que se construye la lista de entrada que representa los datos del formulario.
+
{{DOMxRef("GlobalEventHandlers.ongotpointercapture")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el tipo de evento {{event("gotpointercapture")}}.
+
{{DOMxRef("GlobalEventHandlers.oninput")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("input")}}.
+
{{DOMxRef("GlobalEventHandlers.oninvalid")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("invalid")}}.
+
{{DOMxRef("GlobalEventHandlers.onkeydown")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keydown")}}.
+
{{DOMxRef("GlobalEventHandlers.onkeypress")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keypress")}}.
+
{{DOMxRef("GlobalEventHandlers.onkeyup")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("keyup")}}.
+
{{DOMxRef("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{DOMxRef("GlobalEventHandlers.onloadeddata")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadeddata ")}}.
+
{{DOMxRef("GlobalEventHandlers.onloadedmetadata")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadedmetadata")}}.
+
{{DOMxRef("GlobalEventHandlers.onloadend")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadend")}} (cuando el progreso se haya detenido en la carga de un recurso).
+
{{DOMxRef("GlobalEventHandlers.onloadstart")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("loadstart")}} (cuando el progreso ha comenzado a cargar un recurso).
+
{{DOMxRef("GlobalEventHandlers.onlostpointercapture")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el tipo de evento {{event("lostpointercapture")}}.
+
{{DOMxRef("GlobalEventHandlers.onmousedown")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousedown")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseenter")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseenter")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseleave")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseleave")}}.
+
{{DOMxRef("GlobalEventHandlers.onmousemove")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousemove")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseout")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseout")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseover")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseover")}}.
+
{{DOMxRef("GlobalEventHandlers.onmouseup")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mouseup")}}.
+
{{DOMxRef("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("mousewheel")}}. Desaprobado. Utiliza onwheel en su lugar.
+
{{DOMxRef("GlobalEventHandlers.onwheel")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("wheel")}}.
+
{{DOMxRef("GlobalEventHandlers.onpause")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pause")}}.
+
{{DOMxRef("GlobalEventHandlers.onplay")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("play")}}.
+
{{DOMxRef("GlobalEventHandlers.onplaying")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("playing")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerdown")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerdown")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointermove")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointermove")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerup")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerup")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointercancel")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointercancel")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerover")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerover")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerout")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerout")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerenter")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerenter")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerleave")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerleave")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerlockchange")}}.
+
{{DOMxRef("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("pointerlockerror")}}.
+
{{DOMxRef("GlobalEventHandlers.onprogress")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("progress")}}.
+
{{DOMxRef("GlobalEventHandlers.onratechange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("ratechange")}}.
+
{{DOMxRef("GlobalEventHandlers.onreset")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("reset")}}.
+
{{DOMxRef("GlobalEventHandlers.onresize")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("resize")}}.
+
{{DOMxRef("GlobalEventHandlers.onscroll")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("scroll")}}.
+
{{DOMxRef("GlobalEventHandlers.onseeked")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("seeked")}}.
+
{{DOMxRef("GlobalEventHandlers.onseeking")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("seek")}}.
+
{{DOMxRef("GlobalEventHandlers.onselect")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("select")}}.
+
{{DOMxRef("GlobalEventHandlers.onselectstart")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("selectionchange")}}, es decir, cuando el usuario comience a realizar una nueva selección de texto en una página web.
+
{{DOMxRef("GlobalEventHandlers.onselectionchange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genera el evento {{event("selectionchange")}}, es decir, cuando cambia el texto seleccionado en una página web.
+
{{DOMxRef("GlobalEventHandlers.onshow")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("show")}}.
+
{{DOMxRef("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("sort")}}.
+
{{DOMxRef("GlobalEventHandlers.onstalled")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("stalled")}}.
+
{{DOMxRef("GlobalEventHandlers.onsubmit")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("submit")}}.
+
{{DOMxRef("GlobalEventHandlers.onsuspend")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("suspend")}}.
+
{{DOMxRef("GlobalEventHandlers.ontimeupdate")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("timeupdate")}}.
+
{{DOMxRef("GlobalEventHandlers.onvolumechange")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("volumechange")}}.
+
{{DOMxRef("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchcancel")}}.
+
{{DOMxRef("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchend")}}.
+
{{DOMxRef("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchmove")}}.
+
{{DOMxRef("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("touchstart")}}.
+
{{DOMxRef("GlobalEventHandlers.ontransitioncancel")}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitioncancel")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "se canceló la transición CSS")}}.
+
{{DOMxRef("GlobalEventHandlers.ontransitionend")}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionend")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} se ha terminado de reproducir.
+
{{DOMxRef("GlobalEventHandlers.ontransitionrun")}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionrun")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} se está ejecutando, aunque no necesariamente se inició.
+
{{DOMxRef("GlobalEventHandlers.ontransitionstart")}}
+
Se llama a {{DOMxRef("EventHandler")}} cuando se envía un evento {{event("transitionstart")}}, lo cual indica que {{web.link("/es/docs/Web/CSS/CSS_Transitions", "la transición CSS")}} ha comenzado a realizar la transición.
+
{{DOMxRef("GlobalEventHandlers.onwaiting")}}
+
Es un {{DOMxRef("EventHandler")}} que representa el código que se llamará cuando se genere el evento {{event("waiting")}}.
+
+
+ +

Métodos

+ +

Esta interfaz no define métodos

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Selection API",'', 'Extensión a GlobalEventHandlers')}}{{Spec2('Selection API')}}Agrega en el cambio de selección.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extensión de Document')}}{{Spec2('Pointer Lock')}}Agrega onpointerlockchange y onpointerlockerror en {{DOMxRef("Document")}}. Está implementado experimentalmente en GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{ Spec2('HTML WHATWG') }}Sin cambios desde la última instantánea, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Instantánea de {{SpecName("HTML WHATWG")}}. Agregó onsort desde la instantánea de {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{ Spec2('HTML5 W3C') }}Instantánea de {{SpecName("HTML WHATWG")}}. Creación de GlobalEventHandlers (propiedades en el destino anterior).
+ +

Compatibilidad del navegador

+ +
+ + +

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

+
+ +

Ve también

+ + diff --git a/files/es/web/api/globaleventhandlers/onblur/index.html b/files/es/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..204cce4ab1 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,90 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +translation_of: Web/API/GlobalEventHandlers/onblur +--- +
{{ApiRef("HTML DOM")}}
+ +

La propiedad onblur retorna el código del manejador de evento onBlur, si existe, en el elemento actual.

+ +

Sintaxis

+ +
element.onblur = function;
+
+ + + +
element.onblur = function() { console.log("¡evento onblur detectado!"); };
+
+ +

Ejemplo

+ +
<html>
+
+<head>
+<title>ejemplo de evento onblur</title>
+
+<script type="text/javascript">
+
+var elem = null;
+
+function initElement()
+{
+  elem = document.getElementById("foo");
+  // NOTA: doEvent(); ó doEvent(param); no funcionará aquí.
+  // Debe ser una referencia a un nombre de función, no una llamada a función.
+  elem.onblur = doEvent;
+};
+
+function doEvent()
+{
+  elem.value = 'Bye-Bye';
+  console.log("¡Evento onblur detectado!")
+}
+</script>
+
+<style type="text/css">
+<!--
+#foo {
+border: solid blue 2px;
+}
+-->
+</style>
+</head>
+
+<body onload="initElement();">
+<form>
+<input type="text" id="foo" value="Hola!" />
+</form>
+
+<p>Haga click en el elemento superior to darle el foco, luego click fuera del elemento.<br />
+Recarge la página desde la barra de navegación.</p>
+
+</body>
+</html>
+
+ +

Notas

+ +

El evento blur es generado cuando un elemento pierde el foco.

+ +

A diferencia de MSIE --en el cual la mayoría de tipos de elementos reciben el evento blur--  la mayoría de elementos de los navegadores basados en Gecko NO funcionan con este evento.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/es/web/api/globaleventhandlers/onchange/index.html b/files/es/web/api/globaleventhandlers/onchange/index.html new file mode 100644 index 0000000000..a51f7d25d8 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onchange/index.html @@ -0,0 +1,97 @@ +--- +title: GlobalEventHandlers.onchange +slug: Web/API/GlobalEventHandlers/onchange +translation_of: Web/API/GlobalEventHandlers/onchange +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +

La propiedad onchange establece y devuelve el event handler para el evento {{event("change")}}.

+ +

Sintaxis

+ +
element.onchange = handlerFunction;
+var handlerFunction = element.onchange;
+
+ +

handlerFunction debería ser null o una  Función de javascript espeficiando el manejador para el evento.

+ +

Notas

+ +

Mir el la págna Manejadores de eventos DOM para más información sobre cómo trabajar con los manejadore on.

+ +

Mira la documentación para el evento {{event("change")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte báico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/onclick/index.html b/files/es/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..62d6c622ec --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,139 @@ +--- +title: GlobalEventHandlers.onclick +slug: Web/API/GlobalEventHandlers/onclick +translation_of: Web/API/GlobalEventHandlers/onclick +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +
+ +

La propiedad onclick devuelve el manejador del evento click del elemento actual.

+ +
Note: Cuando uses el evento click para ejecutar algo, considera agregar la misma acción al evento keydown, para permitirle el uso a personas que no usan mouse o pantalla táctil.
+ +

Sintaxis

+ +
element.onclick = functionRef;
+
+ +

Donde functionRef es una función - muchas veces el nombre de la función está declarado ya en otro sitio o como una expresión de la función .Ver "JavaScript Guide:Functions" para más detalles.

+ +

el único argumento pasado a la función  manejador de evento especificamente {{domxref("MouseEvent")}} object. Dentro del manejador, this será el elemento sobre él  el evento ha sido invocado.

+ +

Ejemplo

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>onclick event example</title>
+    <script>
+      function initElement() {
+        var p = document.getElementById("foo");
+        // NOTE: showAlert(); or showAlert(param); will NOT work here.
+        // Must be a reference to a function name, not a function call.
+        p.onclick = showAlert;
+      };
+
+      function showAlert(event) {
+        alert("onclick Event detected!");
+      }
+    </script>
+    <style>
+      #foo {
+        border: solid blue 2px;
+      }
+    </style>
+  </head>
+  <body onload="initElement();">
+    <span id="foo">My Event Element</span>
+    <p>click on the above element.</p>
+  </body>
+</html>
+
+ +

O se puede usar una función anoníma, como esa:

+ +
p.onclick = function(event) { alert("moot!"); };
+
+ +

Notas

+ +

El evento click se genera cuando el usuario hace clic en un elemento. El evento clic ocurrirá después de los eventos mousedown y mouseup.

+ +

Solo se puede asignar un controlador click a un objeto a la vez con esta propiedad. Puede que prefiera utilizar el método {{domxref ("EventTarget.addEventListener()")}} en su lugar, ya que es más flexible y forma parte de la especificación DOM Events.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/onclose/index.html b/files/es/web/api/globaleventhandlers/onclose/index.html new file mode 100644 index 0000000000..20ddb639f5 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onclose/index.html @@ -0,0 +1,52 @@ +--- +title: GlobalEventHandlers.onclose +slug: Web/API/GlobalEventHandlers/onclose +tags: + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onclose +--- +
{{ApiRef("HTML DOM")}}
+ +

Un gestor de eventos para los eventos de cerrar enviados a la ventana. (No disponible con Firefox 2 o Safari)

+ +

Sintaxis

+ +
window.onclose = funcRef;
+
+ +

Parámetros

+ + + +

Ejemplo

+ +
window.onclose = resetThatServerThing;
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con Navegadores

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onclose")}}

+
diff --git a/files/es/web/api/globaleventhandlers/onerror/index.html b/files/es/web/api/globaleventhandlers/onerror/index.html new file mode 100644 index 0000000000..44c921b4ad --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onerror/index.html @@ -0,0 +1,65 @@ +--- +title: GlobalEventHandlers.onerror +slug: Web/API/GlobalEventHandlers/onerror +translation_of: Web/API/GlobalEventHandlers/onerror +--- +
{{ ApiRef("HTML DOM") }}
+ +

Un manejador de eventos para errores en scripts en tiempo de ejecución.

+ +

Note that some/many error events do not trigger window.onerror, you have to listen for them specifically.

+ +

Sintaxis

+ +
window.onerror = funcRef;
+
+ +

Parámetros

+ + + +

Ejemplos

+ +
// Example 1:
+
+// Prevent error dialogs from displaying -which is the window's normal
+// behavior- by overriding the default event handler for error events that
+// go to the window.
+window.onerror = null;
+
+// Example 2:
+
+var gOldOnError = window.onerror;
+// Override previous handler.
+window.onerror = function myErrorHandler(errorMsg, url, lineNumber) {
+  if (gOldOnError)
+    // Call previous handler.
+    return gOldOnError(errorMsg, url, lineNumber);
+
+  // Just let default handler run.
+  return false;
+}
+
+ +

Notas

+ +

El evento de error es lanzado cuando ocurre un error en el script.

+ +

Cuando se use el marcado html en línea (<body onerror="alert('an error occurred')>...), los argumentos son anónimos. Pueden ser referenciados usando desde arguments{{ mediawiki.external(0) }} hasta arguments{{ mediawiki.external(2) }}.

+ +

No hay llamante Components.stack.caller que recuperar. (Vea bug 355430.)

+ +

Especificación

+ +

JavaScript 1.1

diff --git a/files/es/web/api/globaleventhandlers/onfocus/index.html b/files/es/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..e29b3fb84b --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +
{{ApiRef("HTML DOM")}}
+ +

La propiedad onfocus devuelve un manejador de eventos para el evento onFocus en el elemento actual.

+ +

Sintaxis

+ +
element.onfocus = event handling code
+
+ +

Notas

+ +

El evento focus se dispara cuando el usuario establece el foco en el elemento.

+ +

Para que el evento onfocus se dispare en elementos que no sean inputs, los mismos deben establecerse con el atributo  {{htmlattrxref("tabindex")}}  (vea Building keyboard accessibility back in para mas detalles).

+ +

A diferencia de MSIE, en que casi toda clase de elemento puede recibir el evento focus,  en los navegadores Gecko en los que casi todos los elementos NO reciben este evento.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con los Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/oninput/index.html b/files/es/web/api/globaleventhandlers/oninput/index.html new file mode 100644 index 0000000000..18785b9fe3 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/oninput/index.html @@ -0,0 +1,86 @@ +--- +title: GlobalEventHandlers.oninput +slug: Web/API/GlobalEventHandlers/oninput +translation_of: Web/API/GlobalEventHandlers/oninput +--- +
{{ ApiRef("HTML DOM") }}
+ +

Un controlador de eventos para el evento input en la ventana. El evento input es llamado cuando el valor de un elemento {{ HTMLElement("input") }} ha cambiado. 

+ +

Este evento se propaga. Si está soportado en la ventana, también estará soportado en elementos {{ HTMLElement("input") }}.

+ +

Ejemplo

+ +
<script>
+
+window.addEventListener('input', function (e) {
+ console.log("Evento keyup detectado! proveniente de este elemento:", e.target);
+}, false);
+
+</script>
+
+<input placeholder="Tipee aquí y vea la consola.">
+
+ +

Especificaciones

+ +

HTML - APIs de elementos de entrada comunes (input)

+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}2910{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/globaleventhandlers/onkeydown/index.html b/files/es/web/api/globaleventhandlers/onkeydown/index.html new file mode 100644 index 0000000000..4eea7b0c68 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onkeydown/index.html @@ -0,0 +1,93 @@ +--- +title: GlobalEventHandlers.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +translation_of: Web/API/GlobalEventHandlers/onkeydown +--- +
{{ApiRef("HTML DOM")}}
+ +

La propiedad onkeydown devuelve un manejador para el evento onKeyDown del elemento actual.

+ +

Sintaxis

+ +
element.onkeydown = event handling code
+ +

Notas

+ +

El evento keydown se lanza cuando el usuario presiona una tecla.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/onkeyup/index.html b/files/es/web/api/globaleventhandlers/onkeyup/index.html new file mode 100644 index 0000000000..f6b97819eb --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onkeyup/index.html @@ -0,0 +1,100 @@ +--- +title: GlobalEventHandlers.onkeyup +slug: Web/API/GlobalEventHandlers/onkeyup +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +
{{ApiRef("HTML DOM")}}
+ +

La propiedad onkeyup devuelve un manejador para el evento onKeyUp del elemento actual.

+ +

Sintaxis

+ +
element.onkeyup = event handling code
+
+ +

Ejemplo

+ +
 <input type="text" onKeyUp="keyWasPressed(event)">
+ <script>function keyWasPressed(evt){ console.log(evt.keyCode) }</script>
+
+ +

Notas

+ +

El evento keyup se lanza cuando el usuario suelta la tecla que ha sido presionada.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/onload/index.html b/files/es/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..b97cf40b4f --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,51 @@ +--- +title: window.onload +slug: Web/API/GlobalEventHandlers/onload +tags: + - window.onload +translation_of: Web/API/GlobalEventHandlers/onload +--- +

{{ ApiRef() }}

+

Sumario

+

Un evento tipo handler para el evento load event de el {{ domxref("window") }}.

+

Syntax

+
window.onload = funcRef;
+
+ +

Ejemplos

+
window.onload = function() {
+  init();
+  doSomethingElse();
+};
+
+
<!doctype html>
+<html>
+  <head>
+    <title>Ejemplo Onload</title>
+    <script>
+      function load() {
+        alert("evento load detectado!");
+      }
+      window.onload = load;
+    </script>
+  </head>
+  <body>
+    <p>El Evento load se dispara cuando el documento ha terminado de cargarse!</p>
+  </body>
+</html>
+
+

Notas

+

El evento load dispara el evento al final del proceso de carga del documento. En este punto, todos los objetos del documento son DOM,  y todas las imágenes y sub-frames han terminado de cargarse.

+

Existen también los  Eventos DOM Específicos como DOMContentLoaded y DOMFrameContentLoaded (los cuales pueden ser manejados usando {{ domxref("element.addEventListener()") }}) y son ejecutados despues de que el DOM de la página ha sido construido, pero no esperear a que otros recursos terminen de cargar.

+

Especificación

+

Este evento tipo handler se encuentra especificado en HTML.

+

Ver También

+ +

{{ languages( { "fr": "fr/DOM/window.onload", "pl": "pl/DOM/window.onload" } ) }}

diff --git a/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html b/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html new file mode 100644 index 0000000000..01bbdcefd8 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onloadedmetadata/index.html @@ -0,0 +1,48 @@ +--- +title: GlobalEventHandlers.onloadedmetadata +slug: Web/API/GlobalEventHandlers/onloadedmetadata +translation_of: Web/API/GlobalEventHandlers/onloadedmetadata +--- +
{{ ApiRef("HTML DOM") }}
+ +

The onloadedmetadata property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("loadedmetadata")}} events.

+ +

The loadedmetadata event is fired when the metadata has been loaded.

+ +

Syntax

+ +
element.onloadedmetadata = handlerFunction;
+var handlerFunction = element.onloadedmetadata;
+
+ +

handlerFunction should be either null or a JavaScript function specifying the handler for the event.

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-onloadedmetadata','onloadedmetadata')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.GlobalEventHandlers.onloadedmetadata")}}

+ +

See also

+ + diff --git a/files/es/web/api/globaleventhandlers/onresize/index.html b/files/es/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..5d18902f04 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,71 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Propiedad +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

La propiedad GlobalEventHandlers.onresize contiene un {{domxref("EventHandler")}} desencadenado cuando un evento {{event("resize")}} es recibido.

+ +

Sintaxis

+ +
window.onresize = funcRef;
+
+ +

Parametros

+ + + +

Ejemplo

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize test</title>
+
+<script type="text/javascript">
+
+window.onresize = resize;
+
+function resize()
+{
+ alert("resize event detected!");
+}
+</script>
+</head>
+
+<body>
+<p>Resize the browser window to fire the resize event.</p>
+</body>
+</html>
+
+ +

Notas

+ +

El evento resize es activado después de que la ventana ha sido redimensionada.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/es/web/api/globaleventhandlers/onscroll/index.html b/files/es/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..017085065a --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,80 @@ +--- +title: GlobalEventHandlers.onscroll +slug: Web/API/GlobalEventHandlers/onscroll +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +
{{ApiRef("HTML DOM")}}
+ +

Un manejador de eventos para desplazamiento en element.

+ +

Sintaxis

+ +
element.onscroll = functionReference
+
+ +

Parámetros

+ +

functionReference es una referencia a una función para ser ejecutada cuando  element es desplazado (enrollado).

+ +

Example

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+  <meta charset="UTF-8" />
+  <style>
+  #container {
+    position: absolute;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    width: auto;
+    left: 0;
+    right: 0;
+    overflow: auto;
+  }
+
+  #foo {
+    height:1000px;
+    width:1000px;
+    background-color: #777;
+    display: block;
+  }
+
+  </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="foo"></div>
+    </div>
+
+    <script type="text/javascript">
+      document.getElementById('container').onscroll = function() {
+        console.log("scrolling");
+      };
+    </script>
+  </body>
+</html>
+ +

Notas

+ +

El evento es generado cuando el usuario realiza desplazamiento (scrolls) sobre el contenido de un elemento. Element.onscroll es equivalente a element.addEventListener("scroll" ... ).

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}{{Spec2("DOM3 Events")}}Definición inicial
diff --git a/files/es/web/api/globaleventhandlers/onselect/index.html b/files/es/web/api/globaleventhandlers/onselect/index.html new file mode 100644 index 0000000000..a97e18c74a --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onselect/index.html @@ -0,0 +1,74 @@ +--- +title: GlobalEventHandlers.onselect +slug: Web/API/GlobalEventHandlers/onselect +translation_of: Web/API/GlobalEventHandlers/onselect +--- +
+
{{ ApiRef("HTML DOM") }}
+ +
Un manejador de evento para el evento select en la ventana.
+
+ +

 

+ +

Sintaxis

+ +
window.onselect = funcRef;
+
+ + + +

Ejemplo

+ +
<html>
+<head>
+
+<title>onselect test</title>
+
+<style type="text/css">
+.text1 { border: 2px solid red; }
+</style>
+
+<script type="text/javascript">
+
+window.onselect = selectText;
+
+function selectText()
+{
+ alert("¡detectado evento select!");
+}
+</script>
+</head>
+
+<body>
+<textarea class="text1" cols="30" rows="3">
+Resalte algo de este texto
+con el puntero del ratón
+para disparar el evento onselect.
+</textarea>
+</body>
+</html>
+
+ +

Notas

+ +

El evento select sólo se genera cuando es seleccionado texto dentro de un control de entrada (INPUT) de tipo text o textarea. El evento es disparado después de que el texto haya sido seleccionado.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecifiaciónEstadoObservaciones
{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/es/web/api/globaleventhandlers/onselectstart/index.html b/files/es/web/api/globaleventhandlers/onselectstart/index.html new file mode 100644 index 0000000000..9ef1886a4f --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onselectstart/index.html @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.onselectstart +slug: Web/API/GlobalEventHandlers/onselectstart +translation_of: Web/API/GlobalEventHandlers/onselectstart +--- +
{{ApiRef('DOM')}}{{SeeCompatTable}}
+ +

La propiedad GlobalEventHandlers.onselectstart representa el manejador de evento que es invocado cuando un evento {{event("selectstart")}} alcanza el objeto.

+ +

Sintaxis

+ +
obj.onselectstart = function;
+
+ + + +

Ejemplo

+ +
document.onselectstart = function() { console.log("¡Selección iniciada!"); };
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('Selection API','','GlobalEventHandlers.onselectstart')}}{{Spec2('Selection API')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop(43)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
onselectionchange{{CompatGeckoMobile(43)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esto está implementado subordinado a la preferencia dom.select_events.enabled, que por defecto es false, excepto en las versiones Nightly.

+ +

Ver también

+ + diff --git a/files/es/web/api/globaleventhandlers/onsubmit/index.html b/files/es/web/api/globaleventhandlers/onsubmit/index.html new file mode 100644 index 0000000000..948f7c9e57 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onsubmit/index.html @@ -0,0 +1,125 @@ +--- +title: GlobalEventHandlers.onsubmit +slug: Web/API/GlobalEventHandlers/onsubmit +translation_of: Web/API/GlobalEventHandlers/onsubmit +--- +
{{ApiRef("HTML DOM")}}
+ +

Manejador de eventos del evento submit para el objeto window.

+ +

Sintaxis

+ +
window.onsubmit = funcRef;
+
+ +

Parametros

+ + + +

Ejemplo

+ +
<html>
+<script>
+function reg() {
+  window.captureEvents(Event.SUBMIT);
+  window.onsubmit = hit;
+}
+
+function hit() {
+  console.log('hit');
+}
+</script>
+
+<body onload="reg();">
+<form>
+  <input type="submit" value="submit" />
+</form>
+<div id="d"> </div>
+</body>
+</html>
+
+ +

Notas

+ +

El evento submit se genera cuando el usuario hace click en el boton submit en un formulario (<input type="submit"/>).

+ +

El evento submit no se genera cuando el usuario llama a la función form.submit() directamente.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/globaleventhandlers/ontouchstart/index.html b/files/es/web/api/globaleventhandlers/ontouchstart/index.html new file mode 100644 index 0000000000..db51db726f --- /dev/null +++ b/files/es/web/api/globaleventhandlers/ontouchstart/index.html @@ -0,0 +1,126 @@ +--- +title: GlobalEventHandlers.ontouchstart +slug: Web/API/GlobalEventHandlers/ontouchstart +translation_of: Web/API/GlobalEventHandlers/ontouchstart +--- +
{{ApiRef("HTML DOM")}}
+ +

Un {{domxref("GlobalEventHandlers","global event handler")}} para el evento {{event("touchstart")}}.

+ +

{{SeeCompatTable}}

+ +
+

Nota: Este atributo no ha sido estandarizado formalmente. Está especificado en la especificación {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} y no en {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}. Este atributo no está totalmente implementado.

+
+ +

Sintaxis

+ +
var startHandler = cualquierElemento.ontouchstart;
+
+ +

Valor devuelto

+ +
+
startHandler
+
El manejador del evento touchstart para el elemento cualquierElemento.
+
+ +

Ejemplo

+ +

Este ejemplo muestra dos formas de utilizar ontouchstart para establecer un manejador de evento touchstart.

+ +
<html>
+<script>
+function startTouch(ev) {
+ // Procesar el evento
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.ontouchstart = startTouch;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Tócame ... </div>
+<div id="target2" ontouchstart="startTouch(event)"> Tócame ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchstart')}}{{Spec2('Touch Events 2')}}Versión no estable.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support     
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome para AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support        
+
+ +

Ver también

+ + diff --git a/files/es/web/api/globaleventhandlers/onunload/index.html b/files/es/web/api/globaleventhandlers/onunload/index.html new file mode 100644 index 0000000000..a665fc2027 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onunload/index.html @@ -0,0 +1,45 @@ +--- +title: window.onunload +slug: Web/API/GlobalEventHandlers/onunload +translation_of: Web/API/WindowEventHandlers/onunload +--- +

{{ ApiRef() }}

+

Test Summary

+

The unload event is raised when the document is unloaded.

+

Syntax

+
window.onunload = funcRef;
+
+ +

Example

+
<html>
+<head>
+
+<title>onunload test</title>
+
+<script type="text/javascript">
+
+window.onunload = unloadPage;
+
+function unloadPage()
+{
+ alert("unload event detected!");
+}
+</script>
+</head>
+
+<body>
+<p>Reload a new page into the browser<br />
+ to fire the unload event for this page.</p>
+<p>You can also use the back or forward buttons<br />
+ to load a new page and fire this event.</p>
+</body>
+</html>
+
+

Notes

+

Note that using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.

+

Browsers equipped with pop-up window blockers will ignore all window.open() method calls in onunload event handler functions.

+

Specification

+

{{ DOM0() }}

+

{{ languages( {"zh-cn": "zh-cn/DOM/window.onunload" } ) }}

diff --git a/files/es/web/api/headers/index.html b/files/es/web/api/headers/index.html new file mode 100644 index 0000000000..cb65b6aa11 --- /dev/null +++ b/files/es/web/api/headers/index.html @@ -0,0 +1,135 @@ +--- +title: Headers +slug: Web/API/Headers +tags: + - API + - Experimental + - Fetch + - Headers + - Interface + - Reference +translation_of: Web/API/Headers +--- +
{{ APIRef("Fetch") }}
+ +
La interfaz Headers de la Fetch API permite realizar diversas acciones en los Headers de solicitud y respuesta HTTP.Estas acciones incluyen recuperar, establecer, agregar y eliminar. Un objeto Header tiene una lista  asociada que inicialmente está vacía, y consta de cero o más pares de nombre y valor.
+ +
Es posible añadir metodos de uso como {{domxref("Headers.append","append()")}} (ver{{anch(" ejemplos")}}.) En todos los métodos de esta interfaz, los nombres de los encabezados se relacionan con una secuencia de bytes sensible a mayúsculas y minúsculas.
+ +
Por razones de seguridad, algunos headers pueden ser controlados unicamente por el user agent. Estos headers incluyen los {{Glossary("Forbidden_header_name", "nombres prohibidos para headers", 1)}}  y {{Glossary("Forbidden_response_header_name", "nombres prohibidos de Headers response", 1)}}.
+ +

A Headers object also has an associated guard, which takes a value of immutable, request, request-no-cors, response, or none. This affects whether the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods will mutate the header. For more information see {{Glossary("Guard")}}.

+ +

You can retrieve a Headers object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new Headers object using the {{domxref("Headers.Headers()")}} constructor.

+ +

An object implementing Headers can directly be used in a {{jsxref("Statements/for...of", "for...of")}} structure, instead of {{domxref('Headers.entries()', 'entries()')}}: for (var p of myHeaders) is equivalent to for (var p of myHeaders.entries()).

+ +
+

Note: you can find more out about the available headers by reading our HTTP headers reference.

+
+ +

Constructor

+ +
+
{{domxref("Headers.Headers()")}}
+
Creates a new Headers object.
+
+ +

Methods

+ +
+
{{domxref("Headers.append()")}}
+
Appends a new value onto an existing header inside a Headers object, or adds the header if it does not already exist.
+
{{domxref("Headers.delete()")}}
+
Deletes a header from a Headers object.
+
{{domxref("Headers.entries()")}}
+
Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.
+
{{domxref("Headers.forEach()")}}
+
Executes a provided function once for each array element.
+
{{domxref("Headers.get()")}}
+
Returns a {{domxref("ByteString")}} sequence of all the values of a header within a Headers object with a given name.
+
{{domxref("Headers.has()")}}
+
Returns a boolean stating whether a Headers object contains a certain header.
+
{{domxref("Headers.keys()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.
+
{{domxref("Headers.set()")}}
+
Sets a new value for an existing header inside a Headers object, or adds the header if it does not already exist.
+
{{domxref("Headers.values()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.
+
+ +
+

Note: To be clear, the difference between {{domxref("Headers.set()")}} and {{domxref("Headers.append()")}} is that if the specified header does already exist and does accept multiple values, {{domxref("Headers.set()")}} will overwrite the existing value with the new one, whereas {{domxref("Headers.append()")}} will append the new value onto the end of the set of values. See their dedicated pages for example code.

+
+ +
+

Note: All of the Headers methods will throw a TypeError if you try to pass in a reference to a name that isn't a valid HTTP Header name. The mutation operations will throw a TypeError if the header has an immutable {{Glossary("Guard")}}. In any other failure case they fail silently.

+
+ +
+

Note: When Header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined.

+
+ +

Obsolete methods

+ +
+
{{domxref("Headers.getAll()")}}
+
Used to return an array of all the values of a header within a Headers object with a given name; this method has now been deleted from the spec, and {{domxref("Headers.get()")}} now returns all values instead of just one.
+
+ +

Examples

+ +

In the following snippet, we create a new header using the Headers() constructor, add a new header to it using append(), then return that header value using get():

+ +
var myHeaders = new Headers();
+
+myHeaders.append('Content-Type', 'text/xml');
+myHeaders.get('Content-Type') // should return 'text/xml'
+
+ +

The same can be achieved by passing an array of arrays or an object literal to the constructor:

+ +
var myHeaders = new Headers({
+    'Content-Type': 'text/xml'
+});
+
+// or, using an array of arrays:
+myHeaders = new Headers([
+    ['Content-Type', 'text/xml']
+]);
+
+myHeaders.get('Content-Type') // should return 'text/xml'
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#headers-class','Headers')}}{{Spec2('Fetch')}} 
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + + +

 

diff --git a/files/es/web/api/history/index.html b/files/es/web/api/history/index.html new file mode 100644 index 0000000000..03bcb13185 --- /dev/null +++ b/files/es/web/api/history/index.html @@ -0,0 +1,86 @@ +--- +title: History +slug: Web/API/History +tags: + - API + - HTML DOM + - History API + - Interface + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/API/History +--- +
{{ APIRef("History API") }}
+ +

The History interface allows manipulation of the browser session history, that is the pages visited in the tab or frame that the current page is loaded in.

+ +

Properties

+ +

The History interface doesn't inherit any property.

+ +
+
{{domxref("History.length","length")}} {{readOnlyInline}}
+
Returns an Integer representing the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns 1.
+
{{domxref("History.scrollRestoration","scrollRestoration")}}
+
Allows web applications to explicitly set default scroll restoration behavior on history navigation. This property can be either auto or manual.
+
{{domxref("History.state","state")}} {{readOnlyInline}}
+
Returns an any value representing the state at the top of the history stack. This is a way to look at the state without having to wait for a {{event("popstate")}} event.
+
+ +

Methods

+ +

The History interface doesn't inherit any methods.

+ +
+
{{domxref("History.back","back()")}}
+
This asynchronous method goes to the previous page in session history, the same action as when the user clicks the browser's Back button. Equivalent to history.go(-1). +
Calling this method to go back beyond the first page in the session history has no effect and doesn't raise an exception.
+
+
{{domxref("History.forward","forward()")}}
+
This asynchronous method goes to the next page in session history, the same action as when the user clicks the browser's Forward button; this is equivalent to history.go(1). +
Calling this method to go forward beyond the most recent page in the session history has no effect and doesn't raise an exception.
+
+
{{domxref("History.go","go()")}}
+
Asynchronously loads a page from the session history, identified by its relative location to the current page, for example -1 for the previous page or 1 for the next page. If you specify an out-of-bounds value (for instance, specifying -1 when there are no previously-visited pages in the session history), this method silently has no effect. Calling go() without parameters or a value of 0 reloads the current page. Internet Explorer lets you specify a string, instead of an integer, to go to a specific URL in the history list.
+
{{domxref("History.pushState","pushState()")}}
+
Pushes the given data onto the session history stack with the specified title (and, if provided, URL). The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.  Note that all browsers but Safari currently ignore the title parameter. For more information, see Working with the History API.
+
{{domxref("History.replaceState","replaceState()")}}
+
Updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL. The data is treated as opaque by the DOM; you may specify any JavaScript object that can be serialized.  Note that all browsers but Safari currently ignore the title parameter. For more information, see Working with the History API.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML WHATWG')}}Adds the scrollRestoration attribute.
{{SpecName('HTML5 W3C', "browsers.html#the-history-interface", "History")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/history/length/index.html b/files/es/web/api/history/length/index.html new file mode 100644 index 0000000000..f8d8bd65ba --- /dev/null +++ b/files/es/web/api/history/length/index.html @@ -0,0 +1,56 @@ +--- +title: History.length +slug: Web/API/History/length +tags: + - API + - DOM HTML + - Historial de navegación + - History + - Lectura + - Navegador + - Propiedad + - historial +translation_of: Web/API/History/length +--- +
{{APIRef("History API")}}
+ +

La propiedad de sólo lectura History.length retorna un entero representando el número de elementos en el historial de la sesión, incluyendo la página cargada actualmente. Por ejemplo, para una página cargada en una nueva pestaña esta propiedad retorna 1.

+ +

Sintaxis

+ +
const length = history.length
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "history.html#dom-history-length", "History.length")}}{{Spec2('HTML WHATWG')}}Sin cambios desde {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-history-length", "History.length")}}{{Spec2('HTML5 W3C')}}Definición Inicial.
+ +

Compatibilidad de Navegadores

+ + + +

{{Compat("api.History.length")}}

+ +

Mira también

+ + diff --git a/files/es/web/api/history/pushstate/index.html b/files/es/web/api/history/pushstate/index.html new file mode 100644 index 0000000000..29de4cf521 --- /dev/null +++ b/files/es/web/api/history/pushstate/index.html @@ -0,0 +1,96 @@ +--- +title: History.pushState() +slug: Web/API/History/pushState +tags: + - API + - DOM HTML + - Historial de navegación + - History + - History API + - Navegador + - Sesion + - URL + - Web + - historial + - pushState +translation_of: Web/API/History/pushState +--- +
{{APIRef("History API")}}
+ +

En un documento HTML, el método history.pushState() anexa un registro en la sesión de historial del navegador.

+ +

Sintaxis

+ +
history.pushState(state, title, [url])
+ +

Parámetros

+ +
+
state
+
El objeto state es un objeto de JavaScript asociado al nuevo registro en el historial creado por pushState(). Cuando el usuario navega al nuevo registro, un evento {{event("popstate")}} es accionado, y la propiedad state del evento contiene una copia del objeto state del registro en el historial.
+
El objeto state puede ser cualquier cosa que pueda ser serializada. Porque Firefox guarda los objetos  state en el disco del usuario para que así puedan ser restaurados luego de que el usuario reinicia el navegador, se impone un límite de 640k caracteres en la representación serializada de un objeto state. Si pasas un objeto state con una representación serializada más grande que lo mencionado, a pushState(), el método arrojará una excepción. Si necesitas más espacio que el mencionado, es recomendable que uses {{domxref("Window.sessionStorage", "sessionStorage")}} y/o {{domxref("Window.localStorage", "localStorage")}}.
+
title
+
La mayoría de los navegadores ignoran este parámetro, sin embargo, podrían usarlo en el futuro. Pasar una cadena de texto vacía aquí, debería ser seguro contra futuros cambios en el método. Alternativamente, podrías pasar un título corto por el estado al cual te estás moviendo. Si necesitas que el título sea modificado, puedes usar {{domxref("Document.title", "document.title")}}.
+
url {{optional_inline}}
+
La URL del nuevo registro en el historial, se define en este parámetro. Es importante destacar que el navegador no intentará cargar esta URL luego de una llamada a pushState(), pero podría intentar cargar esta URL luego, por ejemplo, luego de que el usuario reinicie el navegador. La nueva URL no necesita ser absoluta; puede ser relativa a la URL actual. La nueva URL debe tener el mismo {{glossary("origin")}} que la URL actual; de otra manera, pushState() arrojará una excepción. Si este parámetro no es especificado, por defecto se usa la URL del documento actual.
+
+ +

Descripción

+ +

En cierto sentido, llamar a pushState() es similar a window.location = "#foo", ambos crearán y activarán un nuevo registro en el historial asociado al documento actual. Pero pushState() tiene unas ventajas adicionales:

+ + + +

Cabe destacar que pushState() nunca hace que el evento {{event("hashchange")}} sea accionado, incluso si la nueva URL difiere de la URL antigua sólo en su hash.

+ +

En otros documentos, crea u nelemento con una URI null.

+ +

Ejemplos

+ +

Esto crea un nuevo registro en el historial del navegador, estableciendo state, title, y url.

+ +

JavaScript

+ +
const state = { 'page_id': 1, 'user_id': 5 }
+const title = ''
+const url = 'hello-world.html'
+
+history.pushState(state, title, url)
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML WHATWG')}}Ningún cambio desde {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "history.html#dom-history-pushstate", "History.pushState()")}}{{Spec2('HTML5 W3C')}}Definición Inicial.
+ +

Compatibilidad en Navegadores

+ + + +

{{Compat("api.History.pushState")}}

+ +

Mira también

+ + diff --git a/files/es/web/api/htmlanchorelement/index.html b/files/es/web/api/htmlanchorelement/index.html new file mode 100644 index 0000000000..57cb21820e --- /dev/null +++ b/files/es/web/api/htmlanchorelement/index.html @@ -0,0 +1,279 @@ +--- +title: HTMLAnchorElement +slug: Web/API/HTMLAnchorElement +tags: + - API + - HTML DOM + - Interfaz + - Referencia +translation_of: Web/API/HTMLAnchorElement +--- +
{{APIRef ("HTML DOM")}}
+La interfaz HTMLAnchorElement representa elementos de hipervínculo y proporciona propiedades y métodos especiales (más allá de los de la interfaz de objeto {{domxref ("HTMLElement")}} regular de la que heredan) para manipular el diseño y la presentación de dichos elementos.
+ +

Propiedades

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Hereda propiedades de su elemento primario, {{domxref ("HTMLElement")}}, y las implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.

+ +

{{domxref ("HTMLAnchorElement.accessKey")}}
+ Es un {{domxref ("DOMString")}} que representa un solo carácter que cambia el foco de entrada al hipervínculo.

+ +


+ {{domxref ("HTMLAnchorElement.charset")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa la codificación de caracteres del recurso vinculado.

+ +


+ {{domxref ("HTMLAnchorElement.coords")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa una lista de coordenadas separadas por comas.

+ +

 

+ +
+
{{domxref ("HTMLAnchorElement.download")}} {{experimental_inline}}
+ Es un {{domxref ("DOMString")}} que indica que el recurso vinculado está destinado a descargarse en lugar de mostrarse en el navegador. El valor representa el nombre propuesto del archivo. Si el nombre no es un nombre de archivo válido del sistema operativo subyacente, el navegador lo adaptará.
+

+ {{domxref ("HTMLHyperlinkElementUtils.hash")}}
+ Es un {{domxref ("USVString")}} que representa el identificador de fragmento, incluida la marca hash inicial ('#'), si la hay, en la URL a la que se hace referencia.
+

+ {{domxref ("HTMLHyperlinkElementUtils.host")}}
+ Es un {{domxref ("USVString")}} que representa el nombre de host y el puerto (si no es el puerto predeterminado) en la URL a la que se hace referencia.
+

+ {{domxref ("HTMLHyperlinkElementUtils.hostname")}}
+ Es un {{domxref ("USVString")}} que representa el nombre de host en la URL referenciada.
+
 
+
{{domxref ("HTMLHyperlinkElementUtils.href")}}
+ Es un {{domxref ("USVString")}} que refleja el atributo HTML {{htmlattrxref ("href", "a")}}, que contiene una URL válida de un recurso vinculado.
+

+ {{domxref ("HTMLAnchorElement.hreflang")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("hreflang", "a")}}, que indica el idioma del recurso vinculado.
+

+ {{domxref ("HTMLAnchorElement.media")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("media", "a")}}, que indica los medios previstos para el recurso vinculado.
+

+ {{domxref ("HTMLAnchorElement.name")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa el nombre del ancla.
+ {{domxref ("HTMLHyperlinkElementUtils.password")}}
+ Es un {{domxref ("USVString")}} que contiene la contraseña especificada antes del nombre de dominio.
+
 
+
{{domxref ("HTMLHyperlinkElementUtils.origin")}} {{readonlyInline}}
+ Devuelve un {{domxref ("USVString")}} que contiene el origen de la URL, que es su esquema, su dominio y su puerto.
+

+ {{domxref ("HTMLHyperlinkElementUtils.pathname")}}
+ Es un {{domxref ("USVString")}} que representa el componente del nombre de ruta, si lo hay, de la URL referenciada.
+

+ {{domxref ("HTMLHyperlinkElementUtils.port")}}
+ Es un {{domxref ("USVString")}} que representa el componente de puerto, si lo hay, de la URL a la que se hace referencia.
+

+ {{domxref ("HTMLHyperlinkElementUtils.protocol")}}
+ Es un {{domxref ("USVString")}} que representa el componente de protocolo, incluidos los puntos finales (':'), de la URL a la que se hace referencia.
+

+ {{domxref ("HTMLAnchorElement.referrerPolicy")}} {{experimental_inline}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo {{htmlattrxref ("referrerpolicy", "a")}} HTML que indica qué referencia usar.
+

+ {{domxref ("HTMLAnchorElement.rel")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("rel", "a")}}, que especifica la relación del objeto de destino con el objeto vinculado.
+

+ {{domxref ("HTMLAnchorElement.relList")}} {{readonlyInline}}
+ Devuelve un {{domxref ("DOMTokenList")}} que refleja el atributo HTML {{htmlattrxref ("rel", "a")}}, como una lista de tokens.
+

+ {{domxref ("HTMLAnchorElement.rev")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa el atributo HTML {{htmlattrxref ("rev", "a")}}, que especifica la relación del objeto de enlace con el objeto de destino.
+

+ {{domxref ("HTMLHyperlinkElementUtils.search")}}
+ Es un {{domxref ("USVString")}} que representa el elemento de búsqueda, incluido el signo de interrogación principal ('?'), Si lo hay, de la URL a la que se hace referencia.
+

+ {{domxref ("HTMLAnchorElement.shape")}} {{obsolete_inline}}
+ Es un {{domxref ("DOMString")}} que representa la forma del área activa.
+

+ {{domxref ("HTMLAnchorElement.tabindex")}}
+ Es un largo que contiene la posición del elemento en el orden de navegación de tabulación para el documento actual.
+

+ {{domxref ("HTMLAnchorElement.target")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("target", "a")}}, que indica dónde mostrar el recurso vinculado.
+

+ {{domxref ("HTMLAnchorElement.text")}}
+ Es un {{domxref ("DOMString")}} un sinónimo de la propiedad {{domxref ("Node.textContent")}}.
+

+ {{domxref ("HTMLAnchorElement.type")}}
+ Es un {{domxref ("DOMString")}} que refleja el atributo HTML {{htmlattrxref ("type", "a")}}, que indica el tipo MIME del recurso vinculado.
+

+ {{domxref ("HTMLHyperlinkElementUtils.nombre de usuario")}}
+ Es un {{domxref ("USVString")}} que contiene el nombre de usuario especificado antes del nombre de dominio.
+
+ +

Metodos

+ +

Hereda los métodos de su padre, {{domxref ("HTMLElement")}}, y los implementa desde {{domxref ("HTMLHyperlinkElementUtils")}}.

+ +

{{domxref ("HTMLElement.blur ()")}}
+ Elimina el foco del teclado del elemento actual.
+ {{domxref ("HTMLElement.focus ()")}}
+ Da el foco del teclado al elemento actual.
+ {{domxref ("HTMLHyperlinkElementUtils.toString ()")}}
+ Devuelve un {{domxref ("USVString")}} que contiene la URL completa. Es un sinónimo de {{domxref ("URLUtils.href")}}, aunque no se puede usar para modificar el valor.
+ Los métodos blur () y focus () se heredan de {{domxref ("HTMLElement")}} de HTML5 on, pero se definieron en HTMLAnchorElement en DOM Level 2 HTML y especificaciones anteriores.

+ +

 

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EpecificacionEstadoCommentario
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Se agregó la propiedad de referencia.
{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML WHATWG')}}Se agregó el refe. Se agregó la siguiente propiedad: descargar.
+ Técnicamente, las propiedades relacionadas con URL, medios, host, nombre de host, ruta, puerto, protocolo, búsqueda y hash, se han movido a la interfaz {{domxref ("URLUtils")}}, y HTMLAreaElement implementa esta propiedad de interface.
{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}{{Spec2('HTML5 W3C')}}Los métodos blur () y focus (), así como las propiedades tabindex y accessKey, ahora están definidos en {{domxref ("HTMLElement")}}.
+ Las siguientes propiedades ahora están obsoletas: charset, coords, name, rev y shape.
+ Se han agregado las siguientes propiedades: hash, host, nombre de host, medios, ruta, puerto, protocolo, relList, búsqueda y texto.
{{SpecName('DOM2 HTML', 'html.html#ID-48250443', 'HTMLAnchorElement')}}{{Spec2('DOM2 HTML')}}Sin cambios desde {{SpecName ("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}{{Spec2('DOM1')}}definicion Inicial .
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatChrome(14)}}{{CompatVersionUnknown}}20{{CompatUnknown}}15{{CompatUnknown}}
username, password, and origin{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrerPolicy{{CompatChrome(51)}}{{CompatUnknown}}{{CompatGeckoDesktop("50")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
download{{CompatChrome(14)}}{{CompatChrome(14)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username, password, and origin{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
referrerPolicy{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatUnknown}}{{CompatGeckoMobile("50")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver tambien

+ + diff --git a/files/es/web/api/htmlaudioelement/index.html b/files/es/web/api/htmlaudioelement/index.html new file mode 100644 index 0000000000..0d725ebb14 --- /dev/null +++ b/files/es/web/api/htmlaudioelement/index.html @@ -0,0 +1,77 @@ +--- +title: HTMLAudioElement +slug: Web/API/HTMLAudioElement +tags: + - DOM + - HTML + - Media + - para_revisar +translation_of: Web/API/HTMLAudioElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

La interfaz HTMLAudioElement proporciona acceso a las propiedades de los elementos {{ HTMLElement("audio") }}, así como métodos para manipularlos. Se deriva de la interfaz HTMLMediaElement; se implementa por medio de {{ interface("nsIDOMHTMLMediaElement") }}.

+ +

Para obtener más detalles sobre cómo usar las caracterísitcas de transmisión de sonido que expone esta interfaz, por favor consulta Introducción a la extensión de la API de sonido.

+ +

Propiedades

+ + + + + + + + + + + + + + +
NombreTipoDescripción
mozCurrentSampleOffset {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}unsigned long longIndica el desplazamiento actual de la transmisión de sonido que fue creada por una llamada a mozWriteAudio(). Esta posición de desplazamiento se especifica como el número de muestras desde que se inició la transmisión.
+ +

Métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre y argumentosRetornoDescripción
Audio()HTMLAudioElementConstructor para elementos de audio. La propiedad preload del objeto devuelto se establece en auto.
Audio(en DOMString src)HTMLAudioElementConstructor para elementos de audio. La propiedad preload del objeto devuelto se establece a auto; la propiedad src se establece al valor del argumento . El navegador comienza una selección asíncrona del recurso antes de que devuelva el objeto.
+

mozSetup(in PRUint32 channels, in PRUint32 rate) {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}

+ 		-Configura la transmisión de sonido para escritura. Especificas como parámetros el número de canales (1 para mono o 2 para estéreo), a continuación la frecuencia de muestreo ((44100 for 44.1kHz, por ejemplo).
mozWriteAudio(in jsval data) {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}unsigned longInserta en la transmisión la escritura de sonido en la posición de desplazamiento actual . Devuelve el número de bytes que se han escrito en la transmisión.
+ +

Consulta también

+ + + +

{{ languages( { "en": "en/DOM/HTMLAudioElement" } ) }}

diff --git a/files/es/web/api/htmlcanvaselement/getcontext/index.html b/files/es/web/api/htmlcanvaselement/getcontext/index.html new file mode 100644 index 0000000000..cb77b1594e --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/getcontext/index.html @@ -0,0 +1,284 @@ +--- +title: HTMLCanvasElement.getContext() +slug: Web/API/HTMLCanvasElement/getContext +translation_of: Web/API/HTMLCanvasElement/getContext +--- +
{{APIRef("Canvas API")}}
+ +

El método HTMLCanvasElement.getContext() retorna un contexto de dibujo en el lienzo, o {{jsxref("null")}} si el identificador del contexto no está soportado.

+ +

Sintaxis

+ +
canvas.getContext(contextType, contextAttributes);
+
+ +

Parámetros

+ +
+
contextType
+
Es una  {{domxref("DOMString")}} que contiene el identificador del contexto que define el contexto de dibujo asociado a el lienzo. Los posibles valores son: +
    +
  • "2d", dando lugar a la creación de un objeto {{domxref("CanvasRenderingContext2D")}} que representa un contexto de renderizado de dos dimensiones.
    • +
  • "webgl" (o "experimental-webgl") el cual creará  un objeto {{domxref("WebGLRenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan WebGL version 1 (OpenGL ES 2.0).
    • +
  • "webgl2" (o "experimental-webgl2") el cual creará un objeto {{domxref("WebGL2RenderingContext")}} que representa un contexto de renderizado de tres dimensiones. Este contexto sólo está disponible en navegadores que implementan WebGL version 2 (OpenGL ES 3.0). {{experimental_inline}}
    • +
  • "bitmaprenderer" el cuál creará un {{domxref("ImageBitmapRenderingContext")}} que únicamente provee funcionalidad para remplazar el contenido del lienzo con un {{domxref("ImageBitmap")}} dado.
    • +
+ +

Nota: Los identificadores  "experimental-webgl" o "experimental-webgl2" son usados en nuevas implementaciones de WebGL. Estas implementaciones no han logrado aprobar el conjunto de pruebas de conformidad o la situación de los controladores gráficos en la plataforma no es estable aun. Khronos Group certifica las implementaciones de WebGL bajo ciertas reglas de conformidad.

+
+
contextAttributes
+
+

Puedes usar varios atributos al momento de crear tu contexto de renderizado. Por ejemplo:

+ + 
canvas.getContext('webgl',
+                 { antialias: false,
+                   depth: false });
+ Atributos del contexto 2d: + +
    +
  • alpha: Booleano que indica si el lienzo contiene canal alfa. Si es asignado falso, el naveagdor sabe que el fondo siempre es opaco, lo cual puede acelerar el dibujado de contenido transparente e imágenes.
    • +
  • {{non-standard_inline}} (Gecko únicamente) willReadFrequently: Booleano que indica si muchas operaciones de read-back están planeadas o no. Esto forzará el uso de software (en lugar de aceleración de hardware) y puede ahorrar memoria al llamar {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}} constantemente. Esta opción solo está disponible si gfx.canvas.willReadFrequently.enable es verdadero(lo cual solo está asignado por defecto en B2G/Firefox OS).
    • +
  • {{non-standard_inline}} (Blink únicamente) storage: Cadena que indica si el almacenamiento es usado ("persistent"  por defecto).
    • +
+ Atributos del contexto WebGL: + +
    +
  • alpha: Booleano que indica si el lienzo contiene un buffer alfa.
    • +
  • depth: Booleano que indica si el buffer de dibujo tiene un buffer de profundidad de al menos 16 bits.
    • +
  • stencil: Booleano que indica si el buffer de dibujo tiene un stencil de al menos 8 bits.
    • +
  • antialias: Booleano que indica si se debe aplicar anti-aliasing.
    • +
  • premultipliedAlpha: Booleano que indica que el compositor de páginas asumirá que el buffer de dibujo contiene colores con alfa premultiplicado.
    • +
  • preserveDrawingBuffer: Si es verdadero los buffers no se limpiarán y mantendrán sus valores hasta que el autor los limpie o los sobreescriba.
    • +
  • +

    failIfMajorPerformanceCaveat: Booleano que indica si un contexto será creado si el rendimiento del sistema es bajo.

    +
    • +
+
+
+ +

Valor de retorno

+ +

Un {{domxref("RenderingContext")}} que puede ser:

+ + + +

Si contextType no corresponde con un posible contexto de dibujo retorna null.

+ +

Ejemplos

+ +

Dado este elemento {{HTMLElement("canvas")}}:

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

Puedes obtener un contexto 2d del canvas con el código siguiente:

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+console.log(ctx); // CanvasRenderingContext2D { ... }
+
+ +

Ahora tienes el contexto de renderizado 2D para un canvas y puedes dibujar en él.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}}{{Spec2('HTML5 W3C')}}Snapshot del {{SpecName('HTML WHATWG')}} que contiene la definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2d context){{CompatChrome(4)}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatIE(9)}}{{CompatOpera(9)}}{{CompatSafari(3.1)}}
webgl context{{CompatChrome(9)}}[1]
+ {{CompatChrome(33)}}		{{CompatVersionUnknown}}{{CompatGeckoDesktop('1.9.2')}}[1]
+ {{CompatGeckoDesktop('24')}}		11.0[2]9.0[3]5.1[2]
webgl2 context {{experimental_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop('25')}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
2d alpha context attribute32{{CompatUnknown}}{{CompatGeckoDesktop(30)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+

failIfMajorPerformanceCaveat attribute

+ 		{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(41)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
bitmaprenderer context{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop(46)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2d context){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
webgl2 context {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
2d alpha context attribute{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(30)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
failIfMajorPerformanceCaveat attribute{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
bitmaprenderer context{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile(46)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Chrome 9 y Gecko 1.9.2 inicialmente implementaron esta como experimental-webgl. A partir de Chrome 33 y Gecko 24 es implementado como webgl estándar.

+ +

[2] Internet Explorer 11, WebKit 5.1 y Firefox Mobile implementaron esto como  experimental-webgl.

+ +

[3] Opera 9 implementó esto como experimental-webgl, behind a user preference, in version 15.0 the user preference got removed.

+ +

[4] Gecko 25 implements this as "experimental-webgl2" behind the user preference webgl.enable-prototype-webgl2. Starting with Gecko 42, the string "webgl2" is used behind the same preference.

+ +

See also

+ + diff --git a/files/es/web/api/htmlcanvaselement/height/index.html b/files/es/web/api/htmlcanvaselement/height/index.html new file mode 100644 index 0000000000..0d2fa7f2e2 --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/height/index.html @@ -0,0 +1,121 @@ +--- +title: HTMLCanvasElement.height +slug: Web/API/HTMLCanvasElement/height +tags: + - Propiedad +translation_of: Web/API/HTMLCanvasElement/height +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

La propiedad HTMLCanvasElement.height es un entero positivo que refleja el atributo {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}}  interpretado en pixeles CSS. Cuando el atributo no esta especificado o esta puesto en un valor invalido(ej. Número negativo), es usado el valor por defecto de 150.

+ +

Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.width")}}.

+ +

Syntax

+ +
var pxl = canvas.height;
+canvas.height = pxl;
+
+ +

Ejemplos

+ +

Dado el siguiente elemento {{HTMLElement("canvas")}}:

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

Puedes obtener la altura del canvas con el siguiente codigo:

+ +
var canvas = document.getElementById("canvas");
+console.log(canvas.height); // 300
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML WHATWG')}}No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}}{{Spec2('HTML5 W3C')}}Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.
+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatChrome(4) }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatIE(9) }}{{ CompatOpera(9) }}{{ CompatSafari(3.1) }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlcanvaselement/index.html b/files/es/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..07a570f193 --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/index.html @@ -0,0 +1,249 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

La interfaz HTMLCanvasElement provee propiedades y métodos para manipular la capa de presentación de los elementos de tipo canvas. La interfaz HTMLCanvasElement también hereda las propiedades y métodos de la interfaz {{domxref("HTMLElement")}} .

+ +

Propiedades

+ +

Hereda propiedades de la interfaz padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Un entero positivo que se asocia al atributo HTML {{htmlattrxref("height", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretada en píxeles CSS. Cuando el atributo no está especificado, o si este se inicializa a un valor inválido, como un negativo, el valor 150 es usado por defecto.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Un {{jsxref("Boolean")}} asociado al atributo HTML {{htmlattrxref("moz-opaque", "canvas")}} del elemento {{HTMLElement("canvas")}} . Proporciona al canvas una forma de saber si  la transparencia será considerada un factor. Si el canvas conoce que no hay transparencia, el desempeño de renderezación será optimizado.
+
{{domxref("HTMLCanvasElement.width")}}
+
Un entero positivo asociado al atributo HTML {{htmlattrxref("width", "canvas")}} del elemento canvas {{HTMLElement("canvas")}} interpretado en píxeles CSS. Cuando el atributo no está especificado, o si se inicializa a un valor inválido, como un negativo, se utiliza el valor 300 por defecto.
+
+ +

Métodos

+ +

Herada métodos de la interfaz padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Retorna un {{domxref("CanvasCaptureMediaStream")}} que es una captura de video en tiempo real, de la superficie del canvas.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Retorna el contexto del dibujado del canvas, o bien null(nulo) si el ID de contexto no está soportado. Un contexto de dibujo, te permite dibujar sobre el canvas. Llamando al método getContext con el parámetro "2d" retorna un objeto {{domxref("CanvasRenderingContext2D")}} , mientras que el llamarlo con el parámetroca "experimental-webgl" (o "webgl") retorna un objeto {{domxref("WebGLRenderingContext")}} . Este tipo de contexto sólo está disponible en navegadores que implementen WebGL.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Retorna una data-URL conteniendo una representación de la imagen en el formato especificado por el tipo de parámetro(png por defecto). La imagen de retorno se encuentra a una resolución de 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Crea un objeto {{domxref("Blob")}} representando la imagen contenida en el canvas; este archivo puede ser cacheado en disco o bien almacenado en memoria, lo cual dependerá del "user-agent"(especificación del navegador).
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Retorna un objeto {{domxref("File")}} representando una imagen contenida en el canvas; este archivo es del tipo memory-based, con su nombre especificado. Si el tipo no se especifica, el tipo usado por defecto es image/png.
+
{{domxref("HTMLCanvasElement.mozFetchAsStream()")}} {{non-standard_inline}}
+
Crea un nuevo flujo de entrada, el cual una vez listo, proveerá los contenidos del canvas como datos de imagen. Cuando el nuevo flujo está listo, la retrollamada específica el método {{ifmethod("nsIInputStreamCallback", "onInputStreamReady")}} es invocada. Si no se especifica el tipo, el tipo de imagen por defecto es image/png. +
Nota: Sólo puede ser invocado desde Chrome.
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Añade el método  captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}El método getContext()ahora retorna un objeto {{domxref("RenderingContext")}} en vez de un objeto opaco.
+ Los métodos  probablySupportsContext(), setContext() y transferControlToProxy() han sido añadidos.
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Definición Inicial.
+ +

Compatibilidad en Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
webgl context9.0 as experimental-webgl
+ ~33 as webgl		{{CompatGeckoDesktop('1.9.2')}} as experimental-webgl
+ {{CompatGeckoDesktop('24')}} as webgl		11.0 as experimental-webgl9.0 as experimental-webgl, behind a user pref.
+ 15.0 as experimental-webgl		5.1 as experimental-webgl
+ ~8.0 as webgl
toBlob(){{CompatNo}} (bug 67587){{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozFetchAsStream() {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop('13')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587){{CompatNo}} (bug 67587){{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozFetchAsStream() {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('13')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Opera Mini 5.0 y posteriores poseen soporte parcial.

+ +

[2] Soporte para un tercer parámetro, ha sido añadido sólo en Gecko 25: cuando se utiliza con el tipo "image/jpeg", este argumento especifica la calida de imagen.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlcanvaselement/toblob/index.html b/files/es/web/api/htmlcanvaselement/toblob/index.html new file mode 100644 index 0000000000..4759cd6250 --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/toblob/index.html @@ -0,0 +1,261 @@ +--- +title: HTMLCanvasElement.toBlob() +slug: Web/API/HTMLCanvasElement/toBlob +translation_of: Web/API/HTMLCanvasElement/toBlob +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

EL metodo HTMLCanvasElement.toBlob() crea un objeto {{domxref("Blob")}} que representa la imagen contenida en el canvas; este archivo puede ser cacheado en el disco oo guardado en la memoria a desicion del  user agent. Si la propiedad type no se especifica el tipo de la imagen será image/png. La imagen creada tiene una resolución de 96dpi.
+ El tercer argumento es usado con las imagenes  image/jpeg para especificar la calidad de salida.

+ +

Syntax

+ +
void canvas.toBlob(callback, type, encoderOptions);
+
+ +

Parameters

+ +
+
callback
+
A callback function with the resulting {{domxref("Blob")}} object as a single argument.
+
type {{optional_inline}}
+
A {{domxref("DOMString")}} indicating the image format. The default type is image/png.
+
encoderOptions {{optional_inline}}
+
A {{jsxref("Number")}} between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.
+
+ +

Return value

+ +

None.

+ +

Examples

+ +

Getting a file representing the canvas

+ +

Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the {{HTMLElement("canvas")}} element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new {{HTMLElement("img")}} element to the document, whose source image is the one created using the canvas.

+ +
var canvas = document.getElementById("canvas");
+
+canvas.toBlob(function(blob) {
+  var newImg = document.createElement("img"),
+      url = URL.createObjectURL(blob);
+
+  newImg.onload = function() {
+    // no longer need to read the blob so it's revoked
+    URL.revokeObjectURL(url);
+  };
+
+  newImg.src = url;
+  document.body.appendChild(newImg);
+});
+
+ +

Note that here we're creating a PNG image; if you add a second parameter to the toBlob() call, you can specify the image type. For example, to get the image in JPEG format:

+ +
 canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality
+ +
+

A way to convert a canvas to an ico (Mozilla only)

+ +

This uses -moz-parse to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.

+ +
var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var a = document.createElement("a");
+    a.textContent = "Download";
+    document.body.appendChild(a);
+    a.style.display = "block";
+    a.download = iconName + ".ico";
+    a.href = window.URL.createObjectURL(b);
+  }
+}
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+
+ +

Save toBlob to disk with OS.File (chrome/add-on context only)

+ +
+

This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.

+
+ +
var canvas = document.getElementById("canvas");
+var d = canvas.width;
+ctx = canvas.getContext("2d");
+ctx.beginPath();
+ctx.moveTo(d / 2, 0);
+ctx.lineTo(d, d);
+ctx.lineTo(0, d);
+ctx.closePath();
+ctx.fillStyle = "yellow";
+ctx.fill();
+
+function blobCallback(iconName) {
+  return function(b) {
+    var r = new FileReader();
+    r.onloadend = function () {
+    // r.result contains the ArrayBuffer.
+    Cu.import('resource://gre/modules/osfile.jsm');
+    var writePath = OS.Path.join(OS.Constants.Path.desktopDir,
+                                 iconName + '.ico');
+    var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result),
+                                      {tmpPath:writePath + '.tmp'});
+    promise.then(
+      function() {
+        console.log('successfully wrote file');
+      },
+      function() {
+        console.log('failure writing file')
+      }
+    );
+  };
+  r.readAsArrayBuffer(b);
+  }
+}
+
+canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon',
+              '-moz-parse-options:format=bmp;bpp=32');
+ +

Polyfill

+ +

A low performance polyfill based on toDataURL.

+ +
if (!HTMLCanvasElement.prototype.toBlob) {
+ Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
+  value: function (callback, type, quality) {
+
+    var binStr = atob( this.toDataURL(type, quality).split(',')[1] ),
+        len = binStr.length,
+        arr = new Uint8Array(len);
+
+    for (var i=0; i<len; i++ ) {
+     arr[i] = binStr.charCodeAt(i);
+    }
+
+    callback( new Blob( [arr], {type: type || 'image/png'} ) );
+  }
+ });
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5.1')}}No change
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}{{Spec2('HTML5 W3C')}}Snapshot of the {{SpecName('HTML WHATWG')}} containing the initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}[1]{{CompatGeckoDesktop('19')}}{{CompatIE(10)}}{{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}[2]
Image quality parameter (jpeg){{CompatNo}}{{CompatGeckoDesktop('25')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
Image quality parameter (jpeg){{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("25")}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Chrome does not implement this feature yet. See bug 67587.

+ +

[2] WebKit does not implement this feature yet. See {{WebKitBug("71270")}}.

+ +

See also

+ + diff --git a/files/es/web/api/htmlcanvaselement/todataurl/index.html b/files/es/web/api/htmlcanvaselement/todataurl/index.html new file mode 100644 index 0000000000..30e2fdd71a --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/todataurl/index.html @@ -0,0 +1,159 @@ +--- +title: HTMLCanvasElement.toDataURL() +slug: Web/API/HTMLCanvasElement/toDataURL +tags: + - API + - Canvas + - HTMLCanvasElement + - Lienzo + - Referencia + - metodo +translation_of: Web/API/HTMLCanvasElement/toDataURL +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

El método HTMLCanvasElement.toDataURL() devuelve un data URI el cual contiene una representación de la imagen en el formato especificado por el parámetro type (por defecto es PNG). La imagen obtenida tendrá una resolución de 96 dpi.

+ + + +

Sintaxis

+ +
canvas.toDataURL(tipo, opcionesCodificación);
+
+ +

Parámetros

+ +
+
tipo{{optional_inline}}
+
Un {{domxref("DOMString")}} indicando el formato de la imagen. El tipo por defecto es image/png.
+
opcionesCodificación{{optional_inline}}
+
Un {{jsxref("Number")}} entre 0 y 1 indicando la calidad de la imagen si el tipo solicitado es image/jpeg o image/webp.
+ Si este argumento es cualquier otra cosa, se usa el valor por defecto de la imagen. El valor por defecto es 0.92. Otros argumentos se ignoran.
+
+ +

Valor devuelto

+ +

Un {{domxref("DOMString")}} que contiene el valor data URI.

+ +

Ejemplos

+ +

Dado un elemento {{HTMLElement("canvas")}}:

+ +
<canvas id="canvas" width="5" height="5"></canvas>
+
+ +

Puedes obtener el data-URL del canvas con las siguientes líneas:

+ +
var canvas = document.getElementById('canvas');
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+
+ +

Establecer la calidad de imagen con jpegs

+ +
var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
+// "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
+var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
+
+ +

Ejemplo: Cambiar imágenes dinámicamente

+ +

Se puede usar esta técnica junto con los eventos del mouse para cambiar las imágenes de manera dinámica (escala de grises versus color en este ejemplo):

+ +

HTML

+ +
<img class="grayscale" src="myPicture.png" alt="Description of my picture" />
+ +

JavaScript

+ +
window.addEventListener('load', quitarColor);
+
+function verImgEnColor() {
+  this.style.display = 'none';
+  this.nextSibling.style.display = 'inline';
+}
+
+function verImgEnGris() {
+  this.previousSibling.style.display = 'inline';
+  this.style.display = 'none';
+}
+
+function quitarColor() {
+  var aImages = document.getElementsByClassName('escalagrises'),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement('canvas'),
+      oCtx = oCanvas.getContext('2d');
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
+    var oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = verImgEnColor;
+    oColorImg.onmouseout = verImgEnGris;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5 W3C')}}Snapshot del {{SpecName('HTML WHATWG')}} con la definición inicial.
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("api.HTMLCanvasElement.toDataURL")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlcanvaselement/width/index.html b/files/es/web/api/htmlcanvaselement/width/index.html new file mode 100644 index 0000000000..1eb26275af --- /dev/null +++ b/files/es/web/api/htmlcanvaselement/width/index.html @@ -0,0 +1,119 @@ +--- +title: HTMLCanvasElement.width +slug: Web/API/HTMLCanvasElement/width +translation_of: Web/API/HTMLCanvasElement/width +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

TLa propiedad  HTMLCanvasElement.width es un entero positivo que refleja el atributo {{htmlattrxref("width", "canvas")}} del elemento {{HTMLElement("canvas")}} interpretado en pixeles CSS. Cuando el atributo no esta especificado o se define con un valor invalido (ej. Número negativo), es usado el valor por defecto de 150.

+ +

Esta es una de de las dos propiedades que controlan el tamaño del canvas, siendo la otra {{domxref("HTMLCanvasElement.height")}}, that controls the size of the canvas.

+ +

Syntax

+ +
var pxl = canvas.width;
+canvas.width = pxl;
+
+ +

Ejemplos

+ +

Dado el siguiente elemento {{HTMLElement("canvas")}} :

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

Puedes obtener el ancho del canvas con el siguiente codigo:

+ +
var canvas = document.getElementById("canvas");
+console.log(canvas.width); // 300
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('HTML WHATWG', "scripting.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML WHATWG')}}No hay cambios desde la ultima foto {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-width", "HTMLCanvasElement.width")}}{{Spec2('HTML5 W3C')}}Foto que contiene la definición inicial {{SpecName('HTML WHATWG')}}.
+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
BSoporte Básico{{ CompatChrome(4) }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatIE(9) }}{{ CompatOpera(9) }}{{ CompatSafari(3.1) }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.2") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlcollection/index.html b/files/es/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..6d255f4536 --- /dev/null +++ b/files/es/web/api/htmlcollection/index.html @@ -0,0 +1,99 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +tags: + - API + - DOM + - HTML DOM + - HTMLCollection + - Interfaz + - Lista de elementos + - Referencia + - Referência DOM +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

La interfaz HTMLCollection representa una colección genérica (objeto tipo array similar a arguments) de elementos (en orden de documento) y ofrece métodos y propiedades para seleccionarlos de la lista.

+ +
Nota: Esta interfaz se llama HTMLCollection por razones históricas (antes del DOM moderno, las colecciones que implementaban esta interfaz sólo podían tener elementos HTML como sus ítems).
+ +

Una HTMLCollection en el DOM de HTML está viva; se actualiza automáticamente cuando el documento subyacente cambia.

+ +

Propiedades

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Devuelve el numero de ítems en la colección.
+
+ +

Métodos

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Devuelve el nodo específicado en el índice en base cero dentro de la lista. Devuelve null si el índice está fuera de rango.
+
{{domxref("HTMLCollection.namedItem()")}}
+
Devuelve el nodo específico cuyo ID o, en último caso, cuyo nombre coincide con la cadena especificada por name. La coincidencia por nombre sólo se hace como último recurso, sólo en HTML, y sólo si el elemento referenciado soporta el atributo name. Devuelve null si no existe ningún nodo con el nombre indicado.
+
+ +

Uso en JavaScript

+ +

HTMLCollection también expone a sus miembros directamente como propiedades tanto por name como por index. Los IDS de HTML deben contener : y . como caracteres válidos, los cuales necesitan del uso de corchetes para acceder a sus propiedades. Actualmente las HTMLCollections no reconocen los IDS puramente numéricos, lo que causaría conflicto con el acceso al estilo array, aunque HTML5 sí permite estos.

+ +

Por ejemplo, suponiendo que hay un elemento <form> en el documento y que su id es "myForm":

+ +
var elem1, elem2;
+
+// document.forms es un HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // muestra: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // muestra: "true"
+
+elem1 = document.forms["named.item.with.periods"];
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM2 HTML') }} 
{{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}}{{ Spec2('DOM1') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

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

+ +

Vea también

+ + diff --git a/files/es/web/api/htmlcontentelement/getdistributednodes/index.html b/files/es/web/api/htmlcontentelement/getdistributednodes/index.html new file mode 100644 index 0000000000..c4aad9ddb8 --- /dev/null +++ b/files/es/web/api/htmlcontentelement/getdistributednodes/index.html @@ -0,0 +1,95 @@ +--- +title: HTMLContentElement.getDistributedNodes() +slug: Web/API/HTMLContentElement/getDistributedNodes +tags: + - Necesita traducción +translation_of: Web/API/HTMLContentElement/getDistributedNodes +--- +

{{ APIRef("Web Components") }}

+ +

The HTMLContentElement.getDistributedNodes() method returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <content> element.

+ +

Syntax

+ +
var nodeList = object.getDistributedNodes()
+
+ +

Example

+ +
// Get the distributed nodes
+var nodes = myContentObject.getDistributedNodes();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <content> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + diff --git a/files/es/web/api/htmlcontentelement/index.html b/files/es/web/api/htmlcontentelement/index.html new file mode 100644 index 0000000000..637210416d --- /dev/null +++ b/files/es/web/api/htmlcontentelement/index.html @@ -0,0 +1,110 @@ +--- +title: HTMLContentElement +slug: Web/API/HTMLContentElement +tags: + - Necesita traducción +translation_of: Web/API/HTMLContentElement +--- +

{{ APIRef("Web Components") }}

+ +

{{Deprecated_header}}

+ +

The HTMLContentElement interface represents a {{HTMLElement("content")}} HTML Element, which is used in Shadow DOM. 

+ +

Properties

+ +

This interface inherits the properties of {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.select")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("select", "content") }} HTML attribute. The value is a comma-separated list of CSS selectors that select the content to insert in place of the <content> element.
+
+ +

Methods

+ +

This interface inherits the methods of {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLContentElement.getDistributedNodes()")}}
+
Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <content> element. 
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <content> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + + +
+
 
+
diff --git a/files/es/web/api/htmlcontentelement/select/index.html b/files/es/web/api/htmlcontentelement/select/index.html new file mode 100644 index 0000000000..916be57621 --- /dev/null +++ b/files/es/web/api/htmlcontentelement/select/index.html @@ -0,0 +1,95 @@ +--- +title: HTMLContentElement.select +slug: Web/API/HTMLContentElement/select +tags: + - Necesita traducción +translation_of: Web/API/HTMLContentElement/select +--- +

{{ APIRef("Web Components") }}

+ +

The HTMLContentElement.select property reflects the select attribute. It is a {{domxref("DOMString")}} containing a space-separated list of CSS selectors that select the content to insert in place of the <content> element.

+ +

Syntax

+ +
object.select = "CSSselector CSSselector ...";
+
+ +

Example

+ +
// Select <h1> elements and elements with class="error"
+myContentObject.select = "h1 .error";
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-content-element', 'content')}}{{Spec2('Shadow DOM')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <content> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + diff --git a/files/es/web/api/htmldivelement/index.html b/files/es/web/api/htmldivelement/index.html new file mode 100644 index 0000000000..164b6f7108 --- /dev/null +++ b/files/es/web/api/htmldivelement/index.html @@ -0,0 +1,125 @@ +--- +title: HTMLDivElement +slug: Web/API/HTMLDivElement +tags: + - API + - HTML DOM + - Interfaz + - NeedsNewLayout + - Referencia +translation_of: Web/API/HTMLDivElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
 
+ +

La interfaz HTMLDivElement provee propiedades especiales (más allá de la interfaz regular {{domxref("HTMLElement")}} que también está disponible por herencia) para manipular elementos div.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propiedades

+ +

Hereda las propiedades de su padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLDivElement.align")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que representa una propiedad enumerada que indica la alineación de los contenidos del elemento con respecto al contexto circundante. Los posibles valores son "left", "right", "justify", and "center".
+
+ +

Métodos

+ +

No hay métodos específicos; hereda los métodos de su padre, {{domxref("HTMLElement")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "grouping-content.html#the-div-element", "HTMLDivElement")}}{{Spec2('HTML WHATWG')}}No hay cambios de  {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "grouping-content.html#the-div-element", "HTMLDivElement")}}{{Spec2('HTML5 W3C')}}No hay cambios de {{SpecName("DOM2 HTML")}}.
{{SpecName('DOM2 HTML', 'html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM2 HTML')}}No hay cambios de {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-22445964', 'HTMLDivElement')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FuncionalidadAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/change_event/index.html b/files/es/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..25642a5322 --- /dev/null +++ b/files/es/web/api/htmlelement/change_event/index.html @@ -0,0 +1,143 @@ +--- +title: 'HTMLElement: Evento change' +slug: Web/API/HTMLElement/change_event +tags: + - Change + - DOM + - Evento + - HTML + - Referencia + - Web +translation_of: Web/API/HTMLElement/change_event +--- +
{{APIRef}}
+ +

El evento change se dispara para elementos {{HTMLElement("input")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}} cuando una alteración al valor de un elemento es confirmada por el usuario. A diferencia del evento {{event("input")}}, el evento change no es disparado necesariamente por cada alteración al valor value del elemento

+ + + + + + + + + + + + + + + + + + + + +
BurbujasSí
CancelableNo
Interfaz{{domxref("Event")}}
Propiedad del manejador del eventoonchange
+ +

Dependiendo del tipo de elemento siendo cambiado y la forma en que el usuario interactua con el elemento, el evento change dispara en un momento diferente:

+ + + +

La especificaciones HTML listan los tipos de <input> que deberían disparar el evento change.

+ +

Ejemplos

+ +

Ejemplos Live: Elemento select

+ +
+

HTML

+ +
<label>Elija un sabor de nieve:
+    <select class="nieve" name="nieve">
+        <option value="">Seleccione Uno …</option>
+        <option value="chocolate">Chocolate</option>
+        <option value="sardina">Sardina</option>
+        <option value="vainilla">Vainilla</option>
+    </select>
+</label>
+
+<div class="resultado"></div>
+ + + +

JS

+ +
const selectElement = document.querySelector('.nieve');
+
+selectElement.addEventListener('change', (event) => {
+    const resultado = document.querySelector('.resultado');
+    resultado.textContent = `Te gusta el sabor ${event.target.value}`;
+});
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('select-example', '100%', '75px') }}

+ +

Elemento de entrada de texto

+ +

Para algunos elementos, incluyendo <input type="text">, el evento change no se lanza hasta que el campo pierde el foco. Prueba a introducir algo en el campo anterior, y luego pulsa en algún otro lugar para lanzar el evento.

+ +

HTML

+ +
<input placeholder="Enter some text" name="name"/>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('change', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.target.value;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Text_input_element', '100%', '75px') }}

+ +

Especificaciones

+ + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', "indices.html#event-change", "change")}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.change_event")}}

+ +

Diferentes navegadores no siempre concuerdan cuando un evento change debería ser disparado para ciertos tipo de interacciones. Por ejemplo, navegación por teclado en en elementos {{HTMLElement("select")}} nunca disparan el evento change en Gecko hasta que el usuario presiona Enter o cambia el foco fuera del <select> (ver {{bug("126379")}}). A partir de Firefox 63 (Quantum), sin embargo, este comportamiento es consistente entre los mayores navegadores.

diff --git a/files/es/web/api/htmlelement/click/index.html b/files/es/web/api/htmlelement/click/index.html new file mode 100644 index 0000000000..0f6d7983c7 --- /dev/null +++ b/files/es/web/api/htmlelement/click/index.html @@ -0,0 +1,88 @@ +--- +title: HTMLElement.click() +slug: Web/API/HTMLElement/click +tags: + - HTMLElement + - Referencia + - metodo +translation_of: Web/API/HTMLElement/click +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

El método HTMLElement.click() simula el click de un ratón físico en un elemento HTML.

+ +

Cuando click() se usa en un elemento que soporte este método (como un elemento {{HTMLElement("input")}}), el elemento lanza el evento asociado al click. Luego, este evento iniciará otros eventos asociados al clicado en elementos más altos en la jerarquía del documento html (o de la cadena de eventos).

+ +

Sintaxis

+ +
elemento.click()
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM2 HTML', 'html.html#ID-2651361')}}{{Spec2('DOM2 HTML')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.click")}}

+ + +

Traducción en Español:

+ + + +
+
¿Necesitas ayuda? • Guía editorial • Guía de estilo
+ +
+
+
 
+ +
Borrador autoguardado:
+
+ +
+
+
 
+ +
+
 
+
+
+
+
+
+ +
+
+
+
+
+
+
 
+
+
+
+
+
+
+ +

 

diff --git a/files/es/web/api/htmlelement/contenteditable/index.html b/files/es/web/api/htmlelement/contenteditable/index.html new file mode 100644 index 0000000000..bbb0749b7f --- /dev/null +++ b/files/es/web/api/htmlelement/contenteditable/index.html @@ -0,0 +1,57 @@ +--- +title: HTMLElement.contentEditable +slug: Web/API/HTMLElement/contentEditable +translation_of: Web/API/HTMLElement/contentEditable +--- +
{{APIRef("HTML DOM")}}
+ +

La propiedad contentEditable de la interfaz {{domxref("HTMLElement")}} especifica si el elemento es editable o no. Este atributo puede tener los siguientes valores:

+ + + +

Se puede usar la propiedad {{domxref("HTMLElement.isContentEditable")}} para comprobar el valor {{jsxref("Boolean")}} de esta propiedad.

+ +

Sintáxis

+ +
editable = element.contentEditable
+element.contentEditable = 'true'
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónStatusComment
{{SpecName('HTML WHATWG', 'interaction.html#contenteditable', 'contenteditable')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.contentEditable")}}

+ +

In Internet Explorer, contenteditable cannot be applied to the {{htmlelement("table")}}, {{htmlelement("col")}}, {{htmlelement("colgroup")}}, {{htmlelement("tbody")}}, {{htmlelement("td")}}, {{htmlelement("tfoot")}}, {{htmlelement("th")}}, {{htmlelement("thead")}}, and {{htmlelement("tr")}} elements directly. A content editable {{htmlelement("span")}} or {{htmlelement("div")}} element can be placed inside the individual table cells.

+ +

See also

+ + diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..10c6f555f9 --- /dev/null +++ b/files/es/web/api/htmlelement/dataset/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad dataset en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los atributos de datos personalizados (data-*) de cada uno de los elementos. Está disponible el acceso en HTML y en el DOM.  Dentro del map of DOMString, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad dataset puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del dataset, que representan a cada atributo correspondiente. Además un HTML data-attribute y su correspondiente DOM dataset.property no comparten el mismo nombre, pero son siempre similares:

+ + + +

Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo Using data attributes.

+ +

Conversion de nombres

+ +

dash-style a camelCase: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas

+ + + +

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

+ + + +

La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.

+ +

Por ejemplo, el atributo nombrado data-abc-def corresponde a la clave abcDef.

+ + + +

Accediendo valores

+ + + +

Definiendo valores

+ + + +

Sintaxis

+ + + +

Ejemplos

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlelement/focus/index.html new file mode 100644 index 0000000000..d615cbf12e --- /dev/null +++ b/files/es/web/api/htmlelement/focus/index.html @@ -0,0 +1,164 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - HTML DOM + - HTMLElement + - Referencia + - metodo +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

El método HTMLElement.focus() fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.

+ +

Sintaxis

+ +
element.focus();
+element.focus(focusOption); // Object parameter
+ +

Parámetros

+ +
+
focusOptions {{optional_inline}} {{experimental_inline}}
+
Es un objeto con la siguiente propiedad:
+
+
+
preventScroll {{optional_inline}}
+
Es un valor Boolean: +
    +
  • Si es false, el método hará scroll hasta que el elemento esté visible en la ventana del navegador
    • +
  • Si es true,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.
    • +
+
+
+
+
+ +

Ejemplos

+ +

Enfocar un campo de texto

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="Campo de texto.">
+<p></p>
+<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

Enfocar un botón

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+
+ +

HTML

+ +
<button type="button" id="myButton">Púlsame!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ + + +

Enfocar con focusOption

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+
+ +

HTML

+ +
<button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
+<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
+</div>
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

Notas

+ +

Si se llama a HTMLElement.focus() desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método event.preventDefault() para evitar que el foco abandone HTMLElement.

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.focus")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/index.html b/files/es/web/api/htmlelement/index.html new file mode 100644 index 0000000000..d27114fccc --- /dev/null +++ b/files/es/web/api/htmlelement/index.html @@ -0,0 +1,402 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API +translation_of: Web/API/HTMLElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +
+ +
La interfaz HTMLElement representa cualquier elemento HTML. Algunos elementos implementan directamente esta interfaz, otros la implementan a través de una interfaz que hereda de ella.
+ +

Properties

+ +

Hereda propiedades de su padre, {{domxref("Element")}}, y los implementalo de  {{domxref("GlobalEventHandlers")}} y {{domxref("TouchEventHandlers")}}.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
Es un {{domxref("DOMString")}} que representa la clave de acceso al elemento.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
Devuelve un {{domxref("DOMString")}} que contiene la clave asignada del elemento.
+
{{domxref("HTMLElement.contentEditable")}}
+
Es un  {{domxref("DOMString")}}, donde el valor "true" significa que el elemento es editable y si el valor es "false" significa que no lo es.
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
Devuelve un {{domxref("Boolean")}} si el contenido del elemento puede ser editado.
+
{{domxref("HTMLElement.contextMenu")}}
+
Es un  {{domxref("HTMLMenuElement")}} que representa el menú contextual asociado al elemento. Puede ser null
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
Devuelve un {{domxref("DOMStringMap")}} que permite el acceso de lectura y escritura de los atributos personalizados del elemento (data-*) .
+
{{domxref("HTMLElement.dir")}}
+
Es un {{domxref("DOMString")}}, que refleja el atributo global dir, representando la direccionalidad del elemento. Los posibles valores son "ltr", "rtl", and "auto".
+
{{domxref("HTMLElement.draggable")}}
+
Es un {{jsxref("Boolean")}} que indica si el elemento puede ser arrastrado..
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
Devuelve un {{domxref("DOMSettableTokenList")}} que refleja el atributo global dropzone y describe el comportamiento del elemento con respecto a una operación de soltar.
+
{{domxref("HTMLElement.hidden")}}
+
Es un {{jsxref("Boolean")}} que indica si el elemento está oculto.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
Es un {{jsxref("Boolean")}}...
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
Es un {{domxref("DOMString")}}…
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
Devuelve un {{jsxref("Object")}}…
+
{{domxref("HTMLElement.lang")}}
+
Es un {{domxref("DOMString")}} que representa el lenguaje de los atributos del elemento, texto, y contenido del elemento.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un double que contiene la altura de, en relación al diseño (layout).
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
Devuelve un double, que representa la distancia desde el borde izquierdo del elemento hasta el borde izquierdo del elemento padre offsetParent'.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's top border to its offsetParent's top border.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the width of an element, relative to the layout.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("HTMLPropertiesCollection")}}…
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it hasn't an effect on all of them.
+
{{domxref("HTMLElement.style")}}
+
Is {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
+
{{domxref("HTMLElement.tabIndex")}}
+
Is a long representing the position of the element in the tabbing order.
+
{{domxref("HTMLElement.title")}}
+
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}}
+
+ +

Event handlers

+ +

La mayoria de las propiedades de los eventos, del formulario onXYZ, estan definidas en las interfaces {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}}, implementadas por HTMLElement. Otras pocas son especificas de HTMLElement.

+ +
+
{{ domxref("HTMLElement.oncopy") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the copy event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }}  {{ non-standard_inline() }}
+
Returns the event handling code for the cut event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
Returns the event handling code for the paste event ({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchstart")}} event.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchend")}} event.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchmove")}} event.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchenter")}} event.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchleave")}} event.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchcancel")}} event.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("Element")}}.

+ +
+
{{domxref("HTMLElement.blur()")}}
+
Removes keyboard focus from the currently focused element.
+
{{domxref("HTMLElement.click()")}}
+
Sends a mouse click event to the element.
+
{{domxref("HTMLElement.focus()")}}
+
Makes the element the current keyboard focus.
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
Makes the spell checker runs on the element.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
+ Added the following method: forceSpellcheck().
+ Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
+ Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoDesktop("5.0")}}17.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.10)
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoDesktop("8.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{WebkitBug(72715)}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}(535.24)
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}9.0{{CompatUnknown}}11.105.1
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoDesktop("5.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.contentEditable", "contentEditable")}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}5.59{{CompatVersionUnknown}}
{{domxref("HTMLElement.spellcheck", "spellcheck")}}{{CompatGeckoDesktop("1.8.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.style", "style")}}{{CompatVersionUnknown}} (returns a {{domxref("CSS2Properties")}}, rather than a {{domxref("CSSStyleDeclaration")}}){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.forceSpellCheck", "forceSpellCheck()")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoDesktop("6.0")}}8.01111.106
{{domxref("HTMLElement.draggable", "draggable")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}12.0{{CompatUnknown}}
{{domxref("HTMLElement.dropzone", "dropzone")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}12.0{{CompatNo}}
{{domxref("HTMLElement.offsetLeft", "offsetLeft")}}, {{domxref("HTMLElement.offsetTop", "offsetTop")}}, {{domxref("HTMLElement.offsetParent", "offsetParent")}}, {{domxref("HTMLElement.offsetHeight", "offsetHeight")}} and {{domxref("HTMLElement.offsetWidth", "offsetWidth")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.translate", "translate")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("HTMLElement.itemScope", "itemScope")}}, {{domxref("HTMLElement.itemType", "itemType")}}, {{domxref("HTMLElement.itemRef", "itemRef")}}, {{domxref("HTMLElement.itemId", "itemId")}}, {{domxref("HTMLElement.itemProp", "itemProp")}}, and {{domxref("HTMLElement.itemValue", "itemValue")}} {{experimental_inline}}{{CompatGeckoDesktop("6.0")}}{{CompatNo}}{{CompatNo}}11.60
+ (Removed in Opera 15)		{{CompatNo}}
{{domxref("HTMLElement.properties", "properties")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.ontouchstart")}}, {{domxref("HTMLElement.ontouchend")}}, {{domxref("HTMLElement.ontouchmove")}}, {{domxref("HTMLElement.ontouchenter")}}, {{domxref("HTMLElement.ontouchleave")}}, and {{domxref("HTMLElement.ontouchcancel")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support +

{{CompatGeckoMobile("1.0")}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLElement.accessKey", "accessKey")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.accessKeyLabel", "accessKeyLabel")}}{{CompatGeckoMobile("8.0")}}
{{domxref("HTMLElement.blur()", "blur()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.click()", "click()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.dataset", "dataset")}}{{CompatGeckoMobile("6.0")}}
{{domxref("HTMLElement.focus()", "focus()")}}{{CompatGeckoMobile("5.0")}}
{{domxref("HTMLElement.oncopy")}}, {{domxref("HTMLElement.oncut")}}, and {{domxref("HTMLElement.onpaste")}} {{Non-standard_inline}}{{CompatGeckoMobile("1.9")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/htmlelement/innertext/index.html b/files/es/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..403f3c0bc1 --- /dev/null +++ b/files/es/web/api/htmlelement/innertext/index.html @@ -0,0 +1,84 @@ +--- +title: HTMLElement.innerText +slug: Web/API/HTMLElement/innerText +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("HTML DOM")}}
+ +

The innerText property of the {{domxref("HTMLElement")}} interface represents the "rendered" text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

+ +
+

Note: innerText is easily confused with {{domxref("Node.textContent")}}, but there are important differences between the two. Basically, innerText is aware of the rendered appearance of text, while textContent is not.

+
+ +

Syntax

+ +
const renderedText = htmlElement.innerText
+htmlElement.innerText = string
+ +

Value

+ +

A {{domxref("DOMString")}} representing the rendered text content of an element. If the element itself is not being rendered (e.g detached from the document or is hidden from view), the returned value is the same as the {{domxref("Node.textContent")}} property.

+ +

Example

+ +

This example compares innerText with {{domxref("Node.textContent")}}. Note how innerText is aware of things like {{htmlElement("br")}} elements, and ignores hidden elements.

+ +

HTML

+ +
<h3>Source element:</h3>
+<p id="source">
+  <style>#source { color: red; }</style>
+Take a look at<br>how this text<br>is interpreted
+       below.
+  <span style="display:none">HIDDEN TEXT</span>
+</p>
+<h3>Result of textContent:</h3>
+<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
+<h3>Result of innerText:</h3>
+<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
+ +

JavaScript

+ +
const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.innerHTML = source.textContent;
+innerTextOutput.innerHTML = source.innerText;
+ +

Result

+ +

{{EmbedLiveSample("Example", 700, 450)}}

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLElement.innerText")}}

+ +

See also

+ + diff --git a/files/es/web/api/htmlelement/input_event/index.html b/files/es/web/api/htmlelement/input_event/index.html new file mode 100644 index 0000000000..ab082e4a06 --- /dev/null +++ b/files/es/web/api/htmlelement/input_event/index.html @@ -0,0 +1,329 @@ +--- +title: Evento input +slug: Web/API/HTMLElement/input_event +tags: + - DOM + - Evento + - InputEvent + - Referencia +translation_of: Web/API/HTMLElement/input_event +--- +
{{APIRef}}
+ +

El evento input se dispara cuando el valor (value) de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido cambiado. 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BurbujasYes
CancelableNo
Interfaz{{DOMxRef("InputEvent")}}
Objectivo{{domxref("Element")}}
Acción por defectoNone
Propiedad del manejador del evento{{domxref("GlobalEventHandlers.oninput")}}
+ +

El evento también aplica a los elementos con la propiedad {{domxref("HTMLElement.contentEditable", "contenteditable")}} habilidado, y para cualquier otro elemento cuando la propiedad {{domxref("Document.designMode", "designMode")}} esta encendida. En el caso de un contenteditable y designMode, el objetivo del evento es el  the event target is the editing host. Si estas propiedades aplian a múltiples elementos, el host de edición es el elemento ancestro más cercano cuyo padre no es editable.

+ +

Para elementos <input> con type=checkbox o type=radio, el evento input debería disparar cuando el usuario alterna el control, por la especificación HTML5. Sin embargo, históricamente no siempre es el caso. Revise la compatibilidad o use el evento {{event("change")}} en su lugar para estos tipos.

+ +
+

Nota: A diferencia de input, el evento {{event("change")}} no es disparado necesariamente por cada alteración al valor (value) de un elemento.

+
+ +

Ejemplos

+ +

Este ejemplo registra el valor siempre que se cambia el valor del elemento {{HtmlElement("input")}}.

+ +

HTML

+ +
<input placeholder="Ingrese algún texto" name="nombre"/>
+<p id="valores"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('valores');
+
+input.addEventListener('input', updateValue);
+
+function updateValue(e) {
+  log.textContent = e.srcElement.value;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Examples")}}

+ +

(Funciona en la versión en inglés)

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("api.HTMLElement.input")}}

+ + + +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/offsetheight/index.html b/files/es/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..82f683d7c5 --- /dev/null +++ b/files/es/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,65 @@ +--- +title: HTMLElement.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +tags: + - API + - Propiedad + - Referencia +translation_of: Web/API/HTMLElement/offsetHeight +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad de sólo lectura HTMLElement.offsetHeight devuelve el alto de un elemento, incluyendo el padding vertical y los bordes, en píxeles, como un número entero.

+ +

Generalmente, offsetHeight es una medida en píxeles que representa la altura CSS del elemento, incluyendo cualquier borde, padding, y barras de desplazamiento horizontales (si existieran). No incluye el alto de pseudo-elementos como ::before y ::after. Para el objeto body del documento, la medida incluye la altura total del contenido lineal en lugar de la altura CSS del elemento. Los elementos flotantes que se extienden por debajo de otros contenidos lineales son ignorados

+ +

Si un elemento está oculto (por ejemplo, al establecer style.display a "none" en el elemento o uno de sus ancestros), se devuelve 0.

+ +
+

Esta propiedad redondea el valor a un entero. Si necesitas un  valor decimal, usa {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Sintaxis

+ +
var intElemOffsetHeight = element.offsetHeight;
+ +

intElemOffsetHeight es una variable que almacena el entero correspondiente al valor de offsetHeight en píxeles de un elemento. La propiedad offsetHeight es de sólo lectura.

+ +

Ejemplo

+ +

Image:Dimensions-offset.png

+ +

El ejemplo de la imagen de superior muestra una barra de desplazamiento y un offsetHeight que cabe en la ventana. Sin embargo, los elementos no desplazables podrían tener un offsetHeight mucho más grande que el área visible. Esos elementos están típicamente contenidos en elementos desplazables (scroll); con lo cual esos elementos no desplazables podrían ser parcial o completamente invisibles, dependiendo de la configuración de scrollTop del elemento contenedor.

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSSOM View', '#dom-htmlelement-offsetHeight', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

Notas

+ +

offsetHeight es una pripiedad del modelo del objeto DHTML que fue inicialmente introducido por MSIE. A veces se le conoce como las dimensiones físicas/gráficas de un elemento, o la altura border-box del elemento.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/offsetleft/index.html b/files/es/web/api/htmlelement/offsetleft/index.html new file mode 100644 index 0000000000..0067faf65f --- /dev/null +++ b/files/es/web/api/htmlelement/offsetleft/index.html @@ -0,0 +1,141 @@ +--- +title: HTMLElement.offsetLeft +slug: Web/API/HTMLElement/offsetLeft +translation_of: Web/API/HTMLElement/offsetLeft +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad de solo lectura HTMLElement.offsetLeft devuelve el número de píxeles a la izquierda del elemento actual con respecto al nodo {{domxref("HTMLElement.offsetParent")}} .

+ +

Para los elementos de bloque, offsetTop, offsetLeft, offsetWidth, y offsetHeight determina el borde de la caja del elemento relativo al offsetParent.

+ +

Sin embargo, para los elementos inline (por ejemplo span), que puede ser cortado de un línea a otra, offsetTop, and offsetLeft describe la posición de la primer borde de la caja (usar {{domxref("Element.getClientRects()")}} para obtener el ancho y el alto), mientras que offsetWidth y offsetHeight describen las dimensiones de los límites (usar {{domxref("Element.getBoundingClientRect()")}} para obtener su posición). Por lo tanto, una caja con left, top, width y height del offsetLeft, offsetTop, offsetWidth, offsetHeight, no definirá los límites para un span con texto que continúa en otra línea.

+ +

Sintaxis

+ +
left = element.offsetLeft;
+
+ +

left es un entero que representa la posición de la izquierda del elemento actual con respecto al padre.

+ +

Ejemplo

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // posición izquierda muy larga: hacer algo
+}
+
+ +

This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

+ +

Image:offsetLeft.jpg

+ +
<div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="long">Long span that wraps within this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script>
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
+  box.style.top = long.offsetTop + document.body.scrollTop + "px";
+  box.style.width = long.offsetWidth + "px";
+  box.style.height = long.offsetHeight + "px";
+</script>
+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}{{Spec2('CSSOM View')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

+ +

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

+ +

See also

+ + diff --git a/files/es/web/api/htmlelement/offsetparent/index.html b/files/es/web/api/htmlelement/offsetparent/index.html new file mode 100644 index 0000000000..4fb14be33d --- /dev/null +++ b/files/es/web/api/htmlelement/offsetparent/index.html @@ -0,0 +1,52 @@ +--- +title: HTMLElement.offsetParent +slug: Web/API/HTMLElement/offsetParent +tags: + - API + - CSSOM View + - Propiedad + - Reference + - Referencia +translation_of: Web/API/HTMLElement/offsetParent +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La propiedad de solo lectura HTMLElement.offsetParent retorna una referencia al objeto, el cual es el elemento contenedor posicionado más cercano (más cercano en la jerarquía contenedora). Si el elemento es no-posicionado, td, th, table o el body más cercano es retornado.

+ +

offsetParent retorna null cuando el elemento style.display tiene asignado none. offsetParent es útil porque {{domxref("HTMLElement.offsetTop","offsetTop")}} y {{domxref("HTMLElement.offsetLeft","offsetLeft")}} son relativos a su borde de relleno.

+ +

Sintaxis

+ +
parentObj = element.offsetParent;
+
+ + + +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSSOM View', '#dom-htmlelement-offsetparent', 'offsetParent')}}{{Spec2('CSSOM View')}} 
+ +

Compatibilidad de Browser

+ + + +

{{Compat("api.HTMLElement.offsetParent")}}

diff --git a/files/es/web/api/htmlelement/offsettop/index.html b/files/es/web/api/htmlelement/offsettop/index.html new file mode 100644 index 0000000000..0b5f19708a --- /dev/null +++ b/files/es/web/api/htmlelement/offsettop/index.html @@ -0,0 +1,61 @@ +--- +title: HTMLElement.offsetTop +slug: Web/API/HTMLElement/offsetTop +translation_of: Web/API/HTMLElement/offsetTop +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La propiedad de sólo lectura HTMLElement.offsetTop retorna la distancia del elemento actual respecto al borde superior del nodo {{domxref("HTMLelement.offsetParent","offsetParent")}}.

+ +

Sintaxis

+ +
topPos = element.offsetTop;
+
+ +

Parámetros

+ + + +

Ejemplo

+ +
var d = document.getElementById("div1");
+var topPos = d.offsetTop;
+
+if (topPos > 10) {
+  // objeto está posicionado a más de
+  // de 10 pixels de distancia de su padre
+}
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('CSSOM View', '#dom-htmlelement-offsettop', 'offsetTop')}}{{Spec2('CSSOM View')}} 
+ +

Compatibilidad con navegadores

+ + + + +

{{Compat("api.HTMLElement.offsetTop")}}

+ +

In compliance with the specification, this property will return null on Webkit if the element is hidden (the style.display of this element or any ancestor is "none") or if the style.position of the element itself is set to "fixed".

+ +

This property will return null on Internet Explorer (9) if the style.position of the element itself is set to "fixed". (Having display:none does not affect this browser.)

diff --git a/files/es/web/api/htmlelement/offsetwidth/index.html b/files/es/web/api/htmlelement/offsetwidth/index.html new file mode 100644 index 0000000000..13a9a7e454 --- /dev/null +++ b/files/es/web/api/htmlelement/offsetwidth/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLElement.offsetWidth +slug: Web/API/HTMLElement/offsetWidth +translation_of: Web/API/HTMLElement/offsetWidth +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad de solo lectura HTMLElement.offsetWidth  devuelve el ancho del layout del elemento. Esta medida incluye los bordes del elemento asignados al mismo en los estilos CSS.

+ +

Sintáxis

+ +
var offsetWidth =element.offsetWidth;
+
+ +

offsetWidth es una propiedad de solo lectura.

+ +
+

Esta propiedad redondeará el valor a un entero. Si necesitas un valor fraccional usa: {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Ejemplo

+ +

 

+ +

             Image:Dimensions-offset.png

+ + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSSOM View', '#dom-htmlelement-offsetwidth', 'offsetWidth')}}{{Spec2('CSSOM View')}} 
+ +

Notas

+ +

offsetWidth es una propiedad del  DHTML "object model" que fue inicialmente introducido por MSIE. A veces es referido como box-width.

+ +

Compatibilidad con Navegadores

+ +

{{Compat("api.HTMLElement.offsetWidth")}}

+ + + + diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/htmlelement/style/index.html new file mode 100644 index 0000000000..62c8903b72 --- /dev/null +++ b/files/es/web/api/htmlelement/style/index.html @@ -0,0 +1,52 @@ +--- +title: Element.style +slug: Web/API/HTMLElement/style +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

{{ ApiRef("HTML DOM") }}

+ +

Resumen

+ +

Devuelve un objeto que representa el atributo style del elemento.

+ +

Ejemplo

+ +
var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+
+ +

Notas

+ +

Ya que la propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones in-line hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. 

+ +

Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style in-line y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.

+ +

Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar window.getComputedStyle en su lugar.

+ +

Mira la lista de Propiedades CSS del DOM (DOM CSS Properties List) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.

+ +

Generalmente es mejor usarla propiedad style que usar elt.setAttribute('style', '...'), ya que el uso de la propiedad style no reemplazará otras propiedades CSS que puedan especificarse en el atributo style.

+ +

Los estilos no pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en elt.style = "color: blue;". Esto es porque el atributo style devuelve un objeto del tipo CSSStyleDeclaration. En su lugar, pueds establecer las propiedades como:

+ +
elt.style.color = "blue";  // Asignación directa
+
+var st = elt.style;
+st.color = "blue";  // Asignación Indirecta
+
+ +

El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos elt y sus valores heredados: 

+ +
var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(elt, null);
+for (x in st)
+  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
+
+ +

 

+ +

Especificación

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/es/web/api/htmlformelement/index.html b/files/es/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..4409f7e160 --- /dev/null +++ b/files/es/web/api/htmlformelement/index.html @@ -0,0 +1,109 @@ +--- +title: form +slug: Web/API/HTMLFormElement +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías +translation_of: Web/API/HTMLFormElement +--- +
{{APIRef("HTML DOM")}}
+

Interfaz del elemento formulario de HTML

+ +

Los elementos FORM comparten todas las propiedades y métodos de los otros elementos HTML descritos en el capítulo del elemento. También tienen la interfaz especial HTMLFormElement.

+ +

Esta interfaz proporciona métodos para crear y modificar los elementos FORM usando el DOM. El siguiente ejemplo muestra como crear un nuevo formulario, como modificar sus atributos y enviarlo:

+ +
// Crea un formulario
+var f = document.createElement("form");
+
+// Lo añade en el cuerpo ('body') del documento
+document.body.appendChild(f);
+
+// Añade los atributos de acción y método
+f.action = "/cgi-bin/some.cgi";
+f.method = "POST"
+
+// Llama el método de enviar el formulario
+f.submit();
+
+ +

Además, el siguiente documento HTML muestra como se puede extraer información de un formulario y cambiar algunos de sus atributos.

+ +
<title>Ejemplo de formulario</title>
+<script type="text/javascript">
+  function getFormInfo() {
+    var info;
+
+    // Obtiene una referencia utilizando la colección de formularios
+    var f = document.forms["formularioA"];
+    info = "f.elements: " + f.elements + "\n"
+         + "f.length: " + f.length + "\n"
+         + "f.name: " + f.elements + "\n"
+         + "f.acceptCharset: " + f.acceptCharset + "\n"
+         + "f.action: " + f.action + "\n"
+         + "f.enctype: " + f.enctype + "\n"
+         + "f.encoding: " + f.encoding + "\n"
+         + "f.method: " + f.method + "\n"
+         + "f.target: " + f.target;
+    document.forms["formularioA"].elements['tex'].value = info;
+  }
+
+  // Se pasa la referencia al formulario desde el
+  // atributo al hacer clic ('onclick') del botón con la ayuda de este.formulario ('this.form')
+  function setFormInfo(f) {
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+
+<h1>Ejemplo de formulario</h1>
+
+<form name="formularioA" id="formularioA"
+ action="/cgi-bin/test" method="POST">
+ <p>Haga clic en "Info" para ver informaciones de este formulario.
+    Haga clic en "Set" para cambiar los parámetros y otra vez en "Info" para ver los efectos</p>
+ <p>
+  <input type="button" value="Info"
+   onclick="getFormInfo();">
+  <input type="button" value="Set"
+   onclick="setFormInfo(this.form);">
+  <input type="reset" value="Reset">
+  <br>
+  <textarea id="tex" style="height:15em; width:20em">
+ </p>
+</form>
+
+ +

Propiedades

+ +
+
form.elements (todos los elementos del formulario) 
+
.elements devuelve una colección de todos los controles que hay en el formulario FORM.
+
form.length
+
.length devuelve la cantidad de controles que hay en el formulario
+
form.name
+
.name devuelve el nombre del formulario actual en forma de cadena.
+
form.acceptCharset
+
.acceptCharset devuelve una lista del conjunto de caracteres soportados para el actual elemento FORM.
+
form.action
+
.action obtiene/configura la acción del elemento FORM.
+
form.enctype
+
.enctype gets/sets the content type of the FORM element.
+
form.encoding
+
.encoding gets/sets the content type of the FORM element.
+
form.method
+
.method obtiene/configura el método HTTP utilizado para enviar el formulario.
+
form.target
+
.target obtiene/configura el objetivo de la acción (i.e., the frame to render its output in).
+
+ +

Métodos

+ +
+
form.submit
+
submit() manda el formulario.
+
form.reset
+
reset() restaura el formulario, lo devuelve al estado inicial.
+
diff --git a/files/es/web/api/htmlformelement/reset/index.html b/files/es/web/api/htmlformelement/reset/index.html new file mode 100644 index 0000000000..43f3df8e37 --- /dev/null +++ b/files/es/web/api/htmlformelement/reset/index.html @@ -0,0 +1,59 @@ +--- +title: HTMLFormElement.reset() +slug: Web/API/HTMLFormElement/reset +tags: + - API + - HTML DOM + - HTMLFormElement + - Method + - NeedsMarkupWork + - NeedsSpecTable + - Referencia +translation_of: Web/API/HTMLFormElement/reset +--- +
{{APIRef("HTML DOM")}}
+ +

El método HTMLFormElement.reset() restaura los elementos de un formulario a sus valores por defecto. Este método hace lo mismo que haciendo clic en el botón de restauración.

+ +

Si un control del formulario (como el botón de restaurar) tiene el nombre o un id de reset enmascarará el método de restauración del formulario. No restaura otros atributos del campo, como el de disabled.

+ +

Síntaxis

+ +
HTMLFormElement.reset()
+
+ +

Ejemplo

+ +
document.getElementById('myform').reset();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-form-reset', 'HTMLFormElement: reset')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.HTMLFormElement.reset")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/htmlheadelement/index.html b/files/es/web/api/htmlheadelement/index.html new file mode 100644 index 0000000000..0327683cbe --- /dev/null +++ b/files/es/web/api/htmlheadelement/index.html @@ -0,0 +1,72 @@ +--- +title: HTMLHeadElement +slug: Web/API/HTMLHeadElement +translation_of: Web/API/HTMLHeadElement +--- +
{{APIRef("HTML DOM")}}
+ +

La interfaz HTMLHeadElement contiene la información descriptiva, o metadata, para un documento. Este objeto hereda las propiedades y métodos descritos en la interfaz {{domxref("HTMLElement")}}.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Propiedades

+ +

Hereda las propiedades del padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLHeadElement.profile")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que representa las URI de uno o más perfiles de metadatos (separados por espacios en blanco).
+
+ +

Métodos

+ +

No hay un método especifico; hereda los métodos del padre, {{domxref("HTMLElement")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', "#htmlheadelement", "HTMLHeadElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', "document-metadata.html#the-head-element", "HTMLHeadElement")}}{{Spec2('HTML5.1')}}Sin cambio desde {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "document-metadata.html#the-head-element", "HTMLHeadElement")}}{{Spec2('HTML5 W3C')}}La siguiente propiedad ha sido removida: profile.
{{SpecName('DOM2 HTML', 'html.html#ID-77253168', 'HTMLHeadElement')}}{{Spec2('DOM2 HTML')}}Sin cambio
{{SpecName('DOM1', 'level-one-html.html#ID-77253168', 'HTMLHeadElement')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad con Navegadores

+ + + +

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

+ +

Vea también

+ + diff --git a/files/es/web/api/htmlhtmlelement/index.html b/files/es/web/api/htmlhtmlelement/index.html new file mode 100644 index 0000000000..f079c9a07a --- /dev/null +++ b/files/es/web/api/htmlhtmlelement/index.html @@ -0,0 +1,121 @@ +--- +title: HTMLHtmlElement +slug: Web/API/HTMLHtmlElement +tags: + - API + - HTML DOM + - Interface + - Referencia +translation_of: Web/API/HTMLHtmlElement +--- +
{{ APIRef("HTML DOM") }}
+ +

The HTMLHtmlElement interface serves as the root node for a given HTML document.  This object inherits the properties and methods described in the {{domxref("HTMLElement")}} interface.

+ +

You can retrieve the HTMLHtmlElement object for a given document by reading the value of the {{domxref("document.documentElement")}} property.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLHtmlElement.version")}}  {{ obsolete_inline() }}
+
Is a {{domxref("DOMString")}} representing the version of the HTML Document Type Definition (DTD) that governs this document. This property should not be used any more as it is non-conforming. Simply omit it.
+
+ +

Methods

+ +

No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "semantics.html#the-html-element", "HTMLHtmlElement")}}{{Spec2('HTML WHATWG')}}Live specification, no change since last snapshot
{{SpecName('HTML5.1', "semantics.html#the-html-element", "HTMLHtmlElement")}}{{Spec2('HTML5.1')}}No change since the last snapshot
{{SpecName('HTML5 W3C', "semantics.html#the-html-element", "HTMLHtmlElement")}}{{Spec2('HTML5 W3C')}}The version element has been removed, as it is non-conforming.
{{SpecName('DOM2 HTML', 'html.html#ID-33759296', 'HTMLHtmlElement')}}{{Spec2('DOM2 HTML')}}Reflecting the element change in {{SpecName("HTML4.01")}}, the version property is now deprecated.
{{SpecName('DOM1', 'level-one-html.html#ID-33759296', 'HTMLHtmlElement')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/htmlimageelement/image/index.html b/files/es/web/api/htmlimageelement/image/index.html new file mode 100644 index 0000000000..7bf5d299b5 --- /dev/null +++ b/files/es/web/api/htmlimageelement/image/index.html @@ -0,0 +1,46 @@ +--- +title: Image() +slug: Web/API/HTMLImageElement/Image +translation_of: Web/API/HTMLImageElement/Image +--- +
{{ APIRef("HTML DOM") }}
+ +

Constructor del elemento de Imagen

+ +

Acepta dos parametros opcionales: Image([unsigned long width, unsigned long height])

+ +

Devuelve un  HTMLImageElement instanciado  justo como document.createElement('img') would.

+ +

Ejemplo:

+ +
var myImage = new Image(100, 200);
+myImage.src = 'picture.jpg';
+console.log(myImage);
+ +
Resultado:
+ +
<img width="100" height="200" src="picture.jpg">
+
+ +
+ + + + + + + + + + + + + +
SpecificationStatusComment
HTML5
+ La definición del constructor de imagen, en esta especificación.		RecommendaciónUn constructor (con 2 parametros opcionales) han sido agregados.
+ Las siguientes propiedades ahora son obsoletas: name, border, align, hspace, vspace, and longdesc.
+ The following properties are now unsigned long, instead of long: height, and width.
+ Las siguientes propiedadeas ahora han sido agrgados: crossorigin,
+
+ +
 
diff --git a/files/es/web/api/htmlimageelement/index.html b/files/es/web/api/htmlimageelement/index.html new file mode 100644 index 0000000000..55c8a5e306 --- /dev/null +++ b/files/es/web/api/htmlimageelement/index.html @@ -0,0 +1,344 @@ +--- +title: HTMLImageElement +slug: Web/API/HTMLImageElement +tags: + - API + - HTML DOM + - Interfaz + - Reference +translation_of: Web/API/HTMLImageElement +--- +
{{APIRef("HTML DOM")}}
+ +

La interfaz HTMLImageElement provee de propiedas especiales y métodos (más allá de las interfaces {{domxref("HTMLElement")}}, también tiene disponible la herencia) para manipular el diseño y la presentación de elementos {{HTMLElement("img")}}.

+ +

Propiedades

+ +

Heredadas de su padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLImageElement.align")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que indica el alineamiento de la imagen respecto al contexto que la rodea.
+
{{domxref("HTMLImageElement.alt")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("alt", "img")}}, indicando texto de respaldo a la imagen.
+
{{domxref("HTMLImageElement.border")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que indica el ancho del borde alrededor de la imagen. Este está desaprobado y debe usarse la propiedad CSS {{cssxref("border")}} en su lugar.
+
{{domxref("HTMLImageElement.complete")}} {{readonlyInline}}
+
Devuelve un {{domxref("Boolean")}} que es true si el navegador ha terminado de buscar la imagen, sea o no exitoso. También devuelve true si la imagen no tiene valor {{domxref("HTMLImageElement.src", "src")}}.
+
{{domxref("HTMLImageElement.crossOrigin")}}
+
Es un {{domxref("DOMString")}} representa la configuración CORS para el elemento imagen. Ver Atributos de configuración CORS para más detalles.
+
{{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMString")}}
+
{{domxref("HTMLImageElement.height")}}
+
Es un unsigned long que refleja el atributo HTML {{htmlattrxref("height", "img")}}, indica el alto de la imagen en píxeles CSS.
+
{{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}}
+
Es un long que representa el espacio a izquierda y derecha de la imagen.
+
{{domxref("HTMLImageElement.isMap")}}
+
Es un {{domxref("Boolean")}} que refleja el atributo HTML {{htmlattrxref("ismap", "img")}}, indica que la imagen es parte del mapa de imagen del lado del servidor.
+
{{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que representa la URI de una larga descripción de la imagen.
+
{{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}} que referencia una copia de la imagen en mala calidad (pero más rápida cargando)
+
{{domxref("HTMLImageElement.name")}} {{obsolete_inline}}
+
Es un {{domxref("DOMString")}}.
+
{{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}}
+
Devuelve un unsigned long  que representa el alto intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.
+
{{domxref("HTMLImageElement.naturalWidth")}} {{readonlyInline}}
+
Devuelve un unsigned long que representa el ancho intrínseco de la imagen en píxeles CSS, si está disponible, de otro modo, es 0.
+
{{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("referrerpolicy", "img")}} indica la referencia a usar para buscar la imagen.
+
{{domxref("HTMLImageElement.src")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("src", "img")}} HTML attribute, contiene la URL completa de la imagen, incluido la base del URI
+
{{domxref("HTMLImageElement.sizes")}} {{experimental_inline}}
+
Es un {{domxref("DOMString")}}
+
{{domxref("HTMLImageElement.srcset")}} {{experimental_inline}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("srcset", "img")}}, contiene una ista de imágenes candidatas, separadas por una coma (',', U+002C COMMA). Una imagen candidata es una URL seguida por 'w' con el ancho, o una 'x' seguida de la densidad del píxel.
+
{{domxref("HTMLImageElement.useMap")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("usemap", "img")}}, contiene una URL parcial del mapa del elemento.
+
{{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}}
+
Es un long que representa el espacio sobre y bajo la imagen.
+
{{domxref("HTMLImageElement.width")}}
+
Es un unsigned long que refleja el atributo HTML {{htmlattrxref("width", "img")}}, indica el ancho de la imagen en píxeles CSS.
+
{{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un long que representa el hueco horizontal hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.
+
{{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}}
+
Devuelve un long que representa el hueco vertical hasta la capa más cercana. Esta propiedad copia el comportamiento de Netscape 4.
+
+ +

Métodos

+ +

Heredados de su padre, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLImageElement.Image()", "Image()")}}
+
El constructor Image(), toma dos unsigned long opcionales, ancho y alto del recurso, crea una instacia de creates HTMLImageElement no insertada en el árbol DOM.
+
+ +

Ejemplo

+ +
var img1 = new Image(); // HTML5 Constructor
+img1.src = 'image1.png';
+img1.alt = 'alt';
+document.body.appendChild(img1);
+
+var img2 = document.createElement('img'); // Uso DOM HTMLImageElement
+img2.src = 'image2.jpg';
+img2.alt = 'alt text';
+document.body.appendChild(img2);
+
+// Usando la primera imagen en el documento
+alert(document.images[0].src);
+
+ +

Especificiaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecicifaciónEstadoComentario
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Añadida la propiedad referrerPolicy.
{{SpecName("CSSOM View", "#excensions-to-the-htmlimageelement-interface", "Extensions to HTMLImageElement")}}{{Spec2('CSSOM View')}}Añadidas propiedades x e y
{{SpecName('HTML WHATWG', "embedded-content.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML WHATWG')}}Las siguientes propiedades han sido añadidas: srcset, currentSrc y sizes.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-img-element", "HTMLImageElement")}}{{Spec2('HTML5 W3C')}}Un constructor (con 2 parámetros opcionales) añadido. Las siguientes propiedades quedaron obsoletas: name, border, align, hspace, vspace, y longdesc. Las siguientes propiedades son ahora unsigned long, en lugar de long: height, y width.Las siguientes propiedades fueron añadidas: crossorigin, naturalWidth, naturalHeight, y complete.
{{SpecName('DOM2 HTML', 'html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM2 HTML')}}La propiedad lowSrc fue eliminada.
+ Las siguientes propiedades son ahora long, en lugar de DOMString: height, width, hspace, y vspace.
{{SpecName('DOM1', 'level-one-html.html#ID-17701901', 'HTMLImgElement')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
naturalWidth, naturalHeight{{CompatVersionUnknown}}{{CompatVersionUnknown}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
complete{{CompatVersionUnknown}}{{CompatVersionUnknown}}5[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatChrome(34)}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}21{{CompatSafari(7.1)}}
currentSrc {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(32)}}[2]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(33)}}[3]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
x e y{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(42)}} [5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
lowSrc{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
naturalWidth, naturalHeight{{CompatUnknown}}{{CompatUnknown}}9{{CompatUnknown}}{{CompatVersionUnknown}}
crossorigin{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
complete{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
srcset {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}iOS 8
currentSrc {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile(32)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
sizes {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile(33)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
x e y{{CompatVersionUnknown}}14[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
referrerPolicy {{experimental_inline}}{{CompatNo}}{{CompatGeckoMobile(42)}} [5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Las propiedades x e y fueron eliminadas en Gecko 7.0 {{geckoRelease("7.0")}} pero reestablecidas en Gecko 14.0 {{geckoRelease("14.0")}} por razones de compatibilidad.

+ +

[2] Esta característica está detras de la preferencia dom.image.srcset.enabled, por defecto false.

+ +

[3] Esta característica está detras de la preferencia dom.image.picture.enabled, por defecto false.

+ +

[4] IE reporta false para imágenes rotas.

+ +

[5] Esta propiedad fue nombrada referrer desde Firefox 42 a 44.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlinputelement/index.html b/files/es/web/api/htmlinputelement/index.html new file mode 100644 index 0000000000..049ddd7942 --- /dev/null +++ b/files/es/web/api/htmlinputelement/index.html @@ -0,0 +1,673 @@ +--- +title: HTMLInputElement +slug: Web/API/HTMLInputElement +tags: + - API + - HTML DOM + - HTMLInputElement + - Input + - Interface + - NeedsContent + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLInputElement +--- +
{{ APIRef("HTML DOM") }}
+ +

La interface HTMLInputElement proporciona propiedades y métodos especiales para manipular las opciones, estructura y presentacion de los elementos {{HtmlElement("input")}}.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades relacionadas al formulario padre
form {{readonlyInline}}{{domxref("HTMLFormElement")}} object:  Retorna una referencia al elemento {{HtmlElement("form")}} padre
formActionstring: Retorna / Establece los atributos de los elementos {{ htmlattrxref("formaction", "input") }}, conteniendo la URI de un programa que procesa la información enviada por el elemento. Esto invalida al atributo {{ htmlattrxref("action", "form") }} del formulario padre.
formEncTypestring: Returns / Sets the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.
formMethodstring: Returns / Sets the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.
formNoValidateboolean: Returns / Sets the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.
formTargetstring: Returns / Sets the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades que aplican a cualquier tipo de elemento input que no se encuentre escondido
namestring: Returns / Sets the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.
typestring: Returns / Sets the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.
disabledboolean: Returns / Sets the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }} 
autofocusboolean: Returns / Sets the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
requiredboolean: Returns / Sets the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.
valuestring: Returns / Sets the current value of the control. +

Nota: Si el usuario ingresa un valor diferente al esperado, esto puede retornar una cadena vacía.

+
validity {{readonlyInline}}{{domxref("ValidityState")}} object: Returns the validity state that this element is in.
validationMessage {{readonlyInline}}string: Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints.
willValidate {{readonlyInline}}{{jsxref("Boolean")}}: Indicates whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
+ + + + + + + + + + + + + + + + + +
Propiedades que aplican solo a los elementos de tipo checkbox o radio
checked boolean: Returns / Sets the current state of the element when {{htmlattrxref("type","input")}} is checkbox or radio.
defaultCheckedboolean: Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
indeterminateboolean: indicates that the checkbox is neither on nor off. Changes the appearance to resemble a third state. Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.
+ + + + + + + + + + + + + + + + + + + + + +
Propiedades que sólo aplican a los elementos de tipo image
altstring: Returns / Sets the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is image.
heightstring: Returns / Sets the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
srcstring: Returns / Sets the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is image; otherwise it is ignored.
widthstring: Returns / Sets the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades que sólo aplican a los elementos de tipo file
acceptstring: Returns / Sets the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is file.
allowdirs {{non-standard_inline}}boolean: Part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.
filesReturns/accepts a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.
{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}boolean: Returns the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.
{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}Array of {{domxref("FileSystemEntry")}} objects describing the currently-selected files or directories.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to text/number-containing or elements
autocompletestring: Returns / Sets the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are:
+ "on": the browser can autocomplete the value using previously stored value
+ "off": the user must explicity enter a value
maxLengthlong: Returns / Sets the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the maximum length of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
sizeunsigned long: Returns / Sets the element's {{ htmlattrxref("size", "input") }} attribute, containing size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is text or password, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to text, search, tel, url, email, or password; otherwise it is ignored.
patternstring: Returns / Sets the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a regular expression that the control's value is checked against.  Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
placeholderstring: Returns / Sets the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
readOnlyboolean: Returns / Sets the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.
+ {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, range, color, checkbox, radio, file, or a button type.
minstring: Returns / Sets the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.
maxstring: Returns / Sets the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
selectionStartunsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.
selectionEndunsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
selectionDirectionstring: Returns / Sets the direction in which selection occurred. Possible values are:
+ "forward" if selection was performed in the start-to-end direction of the current locale,
+ "backward" for the opposite direction,
+ "none" if the direction is unknown."
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades aun no categorizadas
defaultValuestring: Returns / Sets the default value as originally specified in the HTML that created this object.
dirNamestring: Returns / Sets the directionality of the element.
accessKeystring: Returns a string containing a single character that switches input focus to the control when pressed.
list {{readonlyInline}}{{domxref("HTMLElement")}} object: Returns the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be null if no HTML element found in the same tree.
multipleboolean: Returns / Sets the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).
files{{domxref("FileList")}} array: Returns the list of selected files.
{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}{{domxref("NodeList")}} array: Returns a list of {{ HTMLElement("label") }} elements that are labels for this element.
stepstring: Returns / Sets the element's {{ htmlattrxref("step", "input") }} attribute, which works with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
valueAsDate{{jsxref("Date")}} object: Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.
valueAsNumberdouble: Returns the value of the element, interpreted as one of the following, in order: +
    +
  • a time value
    • +
  • a number
    • +
  • NaN if conversion is impossible
    • +
+
autocapitalize {{experimental_inline}}string: defines the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
+ +
+
{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}
+
string: represents the alignment of the element. Use CSS instead.
+
{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}
+
string: represents a client-side image map.
+
+ +

Métodos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
focus()Focus on the input element; keystrokes will subsequently go to this element.
blur()Removes focus from input; keystrokes will subsequently go nowhere.
select()Selects the input text in the element, and focuses it so the user can subsequently replace the whole entry.
click()Simulates a click on the element.
setSelectionRange()Selects a range of text in the element (but does not focus it). The optional selectionDirection parameter may be "forward" or "backward" to establish the direction in which selection was set, or "none" if the direction is unknown or not relevant. The default is "none". Specifying a selectionDirection parameter sets the value of the selectionDirection property.
setRangeText() +
+
+

Replaces a range of text with the new text. If the start and end arguments are not provided, the range is assumed to be the selection.The final argument determines how the selection should be set after the text has been replaced. The possible values are:

+ +
+
"select"
+
Selects the newly inserted text.
+
"start"
+
Moves the selection to just before the inserted text.
+
"end"
+
Moves the selection to just after the selected text.
+
"preserve"
+
Attempts to preserve the selection. This is the default.
+
+
+
+
setCustomValidity()Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
checkValidity()Returns a {{jsxref("Boolean")}} that is false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
+ +
+
{{domxref("HTMLInputElement.stepDown()")}}
+
Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}. 
    • +
+
+
{{domxref("HTMLInputElement.stepUp()")}}
+
Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+
+

Métodos no estandarizados

+
+
+

{{domxref("HTMLInputElement.mozSetFileArray()")}}{{non-standard_inline}}

+
+
Sets the files selected on the input to the given array of {{domxref("File")}} objects.  This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
+
{{domxref("HTMLInputElement.mozGetFileNameArray()")}}{{non-standard_inline}}
+
Returns an array of all the file names from the input.
+
{{domxref("HTMLInputElement.mozSetFileNameArray()")}}{{non-standard_inline}}
+
Sets the filenames for the files selected on the input.  Not for use in frame scripts, because it accesses the file system.
+
+ +

Eventos

+ +

Responde a este elemento usando addEventListener() o asignando una respuesta a la propiedad oneventname de esta interface:

+ +
+
input
+
Se activa cuando el value de un elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} ha sido modificado.
+
+

Nota: Esto es actualmente gatillado en la interface {{domxref("HTMLElement")}} y también aplica a los elementos contenteditable, pero lo hemos listado acá porque es más utilizado con los elementos de entrada de formularios.

+
+
+

También disponible por la propiedad manipuladora oninput.

+
+
invalid
+
Fired when an element does not satisfy its constraints during constraint validation.
+
Also available via the oninvalid event handler property.
+
search
+
Fired when a search is initiated on an {{HTMLElement("input")}} of type="search".
+
Also available via the onsearch event handler property.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}
{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML5 W3C')}}Technically, the  tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.
+ The following properties are now obsolete: align and useMap.
+ The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.
+ The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().
{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM2 HTML')}}The size property is now an unsigned long. The type property must be entirely given in lowercase characters.
{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
autocomplete & autofocus properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
files property{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9)}}[2]10{{CompatUnknown}}{{CompatUnknown}}
multiple property{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
indeterminate property{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
list property{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formAction, formEncType, formMethod, formTarget properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}[3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
formNoValidate, validationMessage, validity, willValidate properties and setCustomValidity() and checkValidity() methods.{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
pattern, placeholder, required properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(2)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
height and weight properties{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(16)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
labels property{{CompatChrome(14.0)}}{{CompatNo}}{{CompatGeckoDesktop("56")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
min, max, and step for <input type="number">{{CompatVersionUnknown}}{{CompatVersionUnknown}}Experimental, and without specific UI, since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
stepUp and stepDown methods{{CompatUnknown}}{{CompatVersionUnknown}}Experimental since {{CompatGeckoDesktop(16)}}: behind the pref dom.experimental_forms
+
+ There are still differences with the latest spec: {{bug(835773)}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
min, max, and step properties for <input type="range">{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(23)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
min, max, and step properties for <input type="date">{{CompatVersionUnknown}}{{CompatVersionUnknown}}Experimental, and without specific UI, since {{CompatGeckoDesktop(20)}}: behind the pref dom.experimental_forms{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
min, max, and step properties for other date-related type values{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
mozGetFileNameArray() and mozSetFileNameArray() methods {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozSetFileArray() method {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("38")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
autocapitalize{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}[3]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
autocapitalize{{CompatNo}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(43.0)}}
+
+ +

[1] Implemented in {{bug("556743")}}.

+ +

[2] The files property was made settable in Firefox 57 ({{bug(1384030)}}).

+ +

[3] In Firefox 56, the implementation has been updated so that the formAction property returns the correct form submission URL, as per spec, when the associated <input> is being used to submit a form ({{bug(1366361)}}).

+ +

Vea también

+ + diff --git a/files/es/web/api/htmlinputelement/invalid_event/index.html b/files/es/web/api/htmlinputelement/invalid_event/index.html new file mode 100644 index 0000000000..e5dec7a141 --- /dev/null +++ b/files/es/web/api/htmlinputelement/invalid_event/index.html @@ -0,0 +1,108 @@ +--- +title: Evento invalid +slug: Web/API/HTMLInputElement/invalid_event +tags: + - Evento + - Referencia + - eventos + - formulários + - invalid + - inválido +translation_of: Web/API/HTMLInputElement/invalid_event +--- +
{{APIRef}}
+ +

El evento invalid se dispara cuando se ha comprobado la validez de un elemento que se puede enviar y no satisface sus restricciones.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Interfaz{{DOMxRef("Event")}}
BurbujasNo
CancelableSí
Objetivos{{domxref("Element")}}
Acción por defectoVaría (puede prevenir que un formulario sea enviado)
+ +

Este evento puede ser útil para desplegar un resumen de los problemas con un formulario al enviarlo. Cuando un formulario se envía, los eventos invalid son disparados en cada control del formulario que es inválido, y entonces en el mismo elemento form. La válidez de los elementos presentados se comprueba antes de enviar al propio {{HtmlElement("form")}}, o despúes del método checkValidity() de un elemento o su propio <form> es llamado. No es revisada al perder el foco (on blur).

+ +

Ejemplo

+ +

Si un formulario es enviado con un valor inválido, los elementos pressentados son revisados, y si un error es encontrado, el evento invalid se disparará en el elemento invalid. En este ejemplo, el valor inválido del input dispara un evento invalid, y el valor inválido es registrado.

+ +

HTML

+ +
<form action="#">
+  <ul>
+    <li><label>Enter an integer between 1 and 10: <input type="number" min="0" max="10" required></label></li>
+    <li><input type="submit" value="submit"></li>
+  </ul>
+</form><p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.addEventListener('invalid', logValue);
+
+function logValue(e) {
+  log.textContent += e.srcElement.value;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +

(Funciona en la versión en inglés)

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML WHATWG')}} 
{{ SpecName('HTML5.1', 'sec-forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML5.1')}} 
{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'Invalid event') }}{{Spec2('HTML5 W3C')}} 
+ +

Ver también

+ + diff --git a/files/es/web/api/htmlinputelement/select/index.html b/files/es/web/api/htmlinputelement/select/index.html new file mode 100644 index 0000000000..645932d012 --- /dev/null +++ b/files/es/web/api/htmlinputelement/select/index.html @@ -0,0 +1,51 @@ +--- +title: HTMLInputElement.select() +slug: Web/API/HTMLInputElement/select +tags: + - API + - HTML DOM + - HTMLInputElement + - NeedsCompatTable + - Referencia + - metodo +translation_of: Web/API/HTMLInputElement/select +--- +
{{ APIRef("HTML DOM") }}
+ +

El método HTMLInputElement.select() selecciona todo el texto en un elemento {{HTMLElement("textarea")}} o un elemento{{HTMLElement("input")}} con un campo de texto.

+ +

Sintaxis

+ +
element.select()
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}{{Spec2('HTML WHATWG')}} 
+ +

Notas

+ +

Llamando a element.select() no necesariamente se enfoca el campo, por lo que suele utilizarse junto con {{domxref("HTMLElement.focus()")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmllabelelement/index.html b/files/es/web/api/htmllabelelement/index.html new file mode 100644 index 0000000000..50df0281c2 --- /dev/null +++ b/files/es/web/api/htmllabelelement/index.html @@ -0,0 +1,82 @@ +--- +title: HTMLLabelElement +slug: Web/API/HTMLLabelElement +tags: + - API + - HTML DOM + - HTMLLabeledElement + - Interface + - Referencia +translation_of: Web/API/HTMLLabelElement +--- +
{{ APIRef("HTML DOM") }}
+ +

La interfaz HTMLLabelElement proporciona acceso a propiedades especificas de los elementos {{HTMLElement("label")}}. A su vez, hereda métodos y propiedades de la interfaz base {{domxref("HTMLElement")}}.

+ +

{{InheritanceDiagram(600,120)}}

+ +

Propiedades

+ +

Heredando propiedades de los elementos padres {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLLabelElement.control")}} {{ReadOnlyInline}}
+
Es un {{domxref("HTMLElement")}} representando el control a la cual cada etiqueta esta asociado.
+
{{domxref("HTMLLabelElement.form")}} {{ReadOnlyInline}}
+
Es un objeto {{domxref("HTMLFormElement")}} representado el formulario al cual el control etiquetado está asociado, arrojando el valor null, si no hay asociado ningun control o si ese control no está asociado con un formulario. En otras palabras, esto es un atajo para: HTMLLabelElement.control.form.
+
{{domxref("HTMLLabelElement.htmlFor")}}
+
Este es un contenedor de caracteres que contiene el ID del control etiquetado, esto es lo que refleja el atributo {{htmlattrxref("for", "label")}}
+
+ +

Métodos

+ +

No hay metodos específicos, hereda los metodos de los elelemtos padres, {{domxref("HTMLElement")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "#htmllabelelement", "HTMLLabelElement")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', "forms.html#the-label-element", "HTMLLabelElement")}}{{Spec2('HTML5 W3C')}}La propiedad accessKey ahora está definida en: {{domxref("HTMLElement")}}.
+ La siguiente propiedad ha sido agregada: control.
{{SpecName('DOM2 HTML', 'html.html#ID-13691394', 'HTMLLabelElement')}}{{Spec2('DOM2 HTML')}}Sin cambios desde: {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-13691394', 'HTMLLabelElement')}}{{Spec2('DOM1')}}definición inicial
+ +

Compatibilidad de Navegador Web

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/htmllielement/index.html b/files/es/web/api/htmllielement/index.html new file mode 100644 index 0000000000..93c6555b63 --- /dev/null +++ b/files/es/web/api/htmllielement/index.html @@ -0,0 +1,118 @@ +--- +title: HTMLLIElement +slug: Web/API/HTMLLIElement +tags: + - API + - HTML DOM +translation_of: Web/API/HTMLLIElement +--- +
+
{{ APIRef("HTML DOM") }}
+
+ +

La interfaz HTMLLIElement expone las propiedades y los métodos específicos (más allá de los definidos por la interfaz regular {{domxref ("HTMLElement")}} que también tiene disponible por herencia) para manipular elementos de la lista.

+ +

Propiedades

+ +

Hereda las propiedades de su elemento primario, {{domxref ("HTMLElement")}}.

+ +
+
{{domxref("HTMLLIElement.type")}} {{obsolete_inline}}
+
Es un {{domxref ("DOMString")}} que representa el tipo de las viñetas, "disco", "cuadrado" o "círculo". Como la forma estándar de definir el tipo de lista es a través de la propiedad CSS {{cssxref ("list-style-type")}}, use los métodos CSSOM para establecerlo a través de un script.
+
{{domxref("HTMLLIElement.value")}}
+
Es un largo que indica la posición ordinal del elemento de lista dentro de un {{HTMLElement ("ol")}} dado. Refleja el atributo {{htmlattrxref ("valor", "li")}} del elemento HTML {{HTMLElement ("li")}} y puede ser menor que 0. Si el elemento {{HTMLElement ("li")}} Elemento no es hijo de un elemento {{HTMLElement ("ol")}}, la propiedad no tiene ningún significado.
+
+ +

Metodos

+ +

No specific method; inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('HTML WHATWG', "grouping-content.html#the-li-element", "HTMLLIElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "grouping-content.html#the-li-element", "HTMLLIElement")}}{{Spec2('HTML5 W3C')}}The following property is now obsolete: type.
{{SpecName('DOM2 HTML', 'html.html#ID-74680021', 'HTMLLIElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-html.html#ID-74680021', 'HTMLLIElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Compatibilidad con Navegadores

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

[1] Prior to Firefox 10, Gecko incorrectly reflected negative {{htmlattrxref("value", "li")}} attributes to 0.

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlmediaelement/canplay_event/index.html b/files/es/web/api/htmlmediaelement/canplay_event/index.html new file mode 100644 index 0000000000..4eb6386c37 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/canplay_event/index.html @@ -0,0 +1,109 @@ +--- +title: 'HTMLMediaElement: canplay' +slug: Web/API/HTMLMediaElement/canplay_event +translation_of: Web/API/HTMLMediaElement/canplay_event +--- +

El evento canplay es lanzado cuando el elemento <video> o <audio> puede ser iniciado o fue iniciado satisfactoriamente.

+ +

Lo que puede evitar que el evento canplay se dispare puede ser por alguna de estás razones:

+ + + +
<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Evento oncanplay - Javascript</title>
+    <script>
+        function Start() {
+            alert("Start")
+        }
+    </script>
+</head>
+<body>
+
+<video controls autoplay oncanplay="Start()">
+     <source src="audio.mp4" type="video/mp4">
+</video>
+
+</body>
+</html>
+ +

Intente especificar mal la ruta del src y comprobrará que el evento no funciona.

+ +

General info

+ +
+
Specification
+
HTML5 media
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None.
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ + + + diff --git a/files/es/web/api/htmlmediaelement/index.html b/files/es/web/api/htmlmediaelement/index.html new file mode 100644 index 0000000000..c507549375 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/index.html @@ -0,0 +1,231 @@ +--- +title: HTMLMediaElement +slug: Web/API/HTMLMediaElement +translation_of: Web/API/HTMLMediaElement +--- +

{{APIRef("HTML DOM")}}

+ +

La interfaz HTMLMediaElement añade a {{domxref("HTMLElement")}} las propiedades y métodos necesarios para soportar las capacidades básicas relacionadas con los medios de comunicación que son comunes en audio y vídeo. Los elementos {{domxref("HTMLVideoElement")}}} y {{domxref("HTMLAudioElement")}}} heredan esta interfaz.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

Esta interfaz también hereda propiedades de sus antepasados {{domxref("HTMLElement")}}, {{domxref("Element")}}, {{domxref("Node")}} y {{domxref("EventTarget")}}.

+ +
+
{{domxref("HTMLMediaElement.audioTracks")}}
+
Un {{domxref("AudioTrackList")}}} que lista los {{domxref("AudioTrack")}} objetos contenidos en el elemento.
+
{{domxref("HTMLMediaElement.autoplay")}}
+
Un {{jsxref("Booleano")}} que refleja el {{htmlattrxref("autoplay", "video")}}. Atributo HTML, que indica si la reproducción debe comenzar automáticamente tan pronto como haya suficiente material disponible para hacerlo sin interrupción. +
Los sitios que reproducen automáticamente audio (o vídeos con una pista de audio) pueden ser una experiencia desagradable para los usuarios, por lo que deben evitarse en la medida de lo posible. Si debe ofrecer la funcionalidad de autojuego, debe hacer que se active (requiriendo que el usuario lo habilite específicamente). Sin embargo, esto puede ser útil a la hora de crear elementos multimedia cuya fuente se establecerá más adelante, bajo el control del usuario.
+
+
{{domxref("HTMLMediaElement.buffered")}} {{readonlyinline}}
+
Devuelve un objeto {{domxref("TimeRanges")}}} que indica los rangos de la fuente de medios que el navegador ha almacenado en el búfer (si existe) en el momento en que se accede a la propiedad almacenada en el búfer.
+
{{domxref("HTMLMediaElement.controller")}}
+
Es un objeto {{domxref("MediaController")}}} que representa el controlador de medios asignado al elemento, o nulo si no se asigna ninguno.
+
{{domxref("HTMLMediaElement.controls")}}
+
Es un {{jsxref('booleano')}} que refleja el {{htmlattrxref("controles", "vídeo")}}}[1]. Atributo HTML, que indica si deben visualizarse las posiciones de la interfase de usuario para controlar el recurso.
+
{{domxref("HTMLMediaElement.controlsList")}} {{readonlyinline}}
+
Devuelve un {{domxref("DOMTokenList")}} que ayuda al agente de usuario a seleccionar qué controles mostrar en el elemento multimedia cuando el agente de usuario muestra su propio conjunto de controles. La DOMTokenList toma uno o más de los tres valores posibles: nodownload, nofullscreen y noremoteplayback.
+
{{domxref("HTMLMediaElement.crossOrigin")}}
+
Es un {{domxref("DOMString")}}} que indica la configuración CORS para este elemento multimedia.
+
{{domxref("HTMLMediaElement.currentSrc")}} {{readonlyinline}}
+
Devuelve un {{domxref("DOMString")}}} con la URL absoluta del recurso multimedia elegido.
+
{{domxref("HTMLMediaElement.currentTime")}}
+
Es un doble indicador del tiempo de reproducción actual en segundos. Fijar este valor busca que los medios de comunicación se adapten a los nuevos tiempos.
+
{{domxref("HTMLMediaElement.defaultMuted")}}
+
Es un {{jsxref('booleano')}} que refleja el {{htmlattrxref("silenciado", "video")}}}. Atributo HTML, que indica si la salida de audio del elemento multimedia debe silenciarse de forma predeterminada.
+
{{domxref("HTMLMediaElement.defaultPlaybackRate")}}
+
Es un doble que indica la velocidad de reproducción predeterminada del material.
+
{{domxref("HTMLMediaElement.disableRemotePlayback")}}
+
Es un {{jsxref('Booleano')}} que establece o devuelve el estado de reproducción remota, indicando si el elemento multimedia puede tener una interfaz de reproducción remota.
+
{{domxref("HTMLMediaElement.duration")}} {{readonlyinline}}
+
Devuelve un doble indicando la longitud del material en segundos, o 0 si no hay datos de material disponibles.
+
{{domxref("HTMLMediaElement.ended")}} {{readonlyinline}}
+
Devuelve un {{jsxref('Booleano')}} que indica si el elemento multimedia ha terminado de reproducirse.
+
{{domxref("HTMLMediaElement.error")}} {{readonlyinline}}
+
Returns a {{domxref("MediaError")}} object for the most recent error, or null if there has not been an error.
+
{{domxref("HTMLMediaElement.loop")}}
+
Is a {{jsxref('Boolean')}} that reflects the {{htmlattrxref("loop", "video")}} HTML attribute, which indicates whether the media element should start over when it reaches the end.
+
{{domxref("HTMLMediaElement.mediaGroup")}}
+
Is a {{domxref("DOMString")}} that reflects the {{ htmlattrxref("mediagroup", "video")}} HTML attribute, which indicates the name of the group of elements it belongs to. A group of media elements shares a common {{domxref('MediaController')}}.
+
{{domxref("HTMLMediaElement.mediaKeys")}} {{readonlyinline}} {{experimental_inline}}
+
Returns a {{domxref("MediaKeys")}} object or null. MediaKeys is a set of keys that an associated HTMLMediaElement can use for decryption of media data during playback.
+
{{domxref("HTMLMediaElement.mozAudioCaptured")}} {{readonlyinline}} {{non-standard_inline}}
+
Returns a {{jsxref('Boolean')}}. Related to audio stream capture.
+
{{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}}
+
Is a double that provides access to the fragment end time if the media element has a fragment URI for currentSrc, otherwise it is equal to the media duration.
+
{{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}}
+
+

Is a unsigned long that indicates the number of samples that will be returned in the framebuffer of each MozAudioAvailable event. This number is a total for all channels, and by default is set to be the number of channels * 1024 (e.g., 2 channels * 1024 samples = 2048 total).

+ +

The mozFrameBufferLength property can be set to a new value for lower latency, larger amounts of data, etc. The size given must be a number between 512 and 16384. Using any other size results in an exception being thrown. The best time to set a new length is after the loadedmetadata event fires, when the audio info is known, but before the audio has started or MozAudioAvailable events have begun firing.

+
+
{{domxref("HTMLMediaElement.mozSampleRate")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a double representing the number of samples per second that will be played. For example, 44100 samples per second is the sample rate used by CD audio.
+
{{domxref("HTMLMediaElement.muted")}}
+
Is a {{jsxref('Boolean')}} that determines whether audio is muted. true if the audio is muted and false otherwise.
+
{{domxref("HTMLMediaElement.networkState")}} {{readonlyinline}}
+
Returns a unsigned short (enumeration) indicating the current state of fetching the media over the network.
+
{{domxref("HTMLMediaElement.paused")}} {{readonlyinline}}
+
Returns a {{jsxref('Boolean')}} that indicates whether the media element is paused.
+
{{domxref("HTMLMediaElement.playbackRate")}}
+
Is a double that indicates the rate at which the media is being played back. 
+
{{domxref("HTMLMediaElement.played")}} {{readonlyinline}}
+
Returns a {{domxref('TimeRanges')}} object that contains the ranges of the media source that the browser has played, if any.
+
{{domxref("HTMLMediaElement.preload")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("preload", "video")}} HTML attribute, indicating what data should be preloaded, if any. Possible values are: none, metadata, auto.
+
{{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}}
+
Is a {{jsxref('Boolean')}} that determines if the pitch of the sound will be preserved. If set to false, the pitch will adjust to the speed of the audio. This is implemented with prefixes in Firefox (mozPreservesPitch) and WebKit (webkitPreservesPitch).
+
{{domxref("HTMLMediaElement.readyState")}} {{readonlyinline}}
+
Returns a unsigned short (enumeration) indicating the readiness state of the media.
+
{{domxref("HTMLMediaElement.seekable")}} {{readonlyinline}}
+
Returns a {{domxref('TimeRanges')}} object that contains the time ranges that the user is able to seek to, if any.
+
{{domxref("HTMLMediaElement.seeking")}} {{readonlyinline}}
+
Returns a {{jsxref('Boolean')}} that indicates whether the media is in the process of seeking to a new position.
+
{{domxref("HTMLMediaElement.sinkId")}} {{readonlyinline}} {{experimental_inline}}
+
Returns a {{domxref("DOMString")}} that is the unique ID of the audio device delivering output, or an empty string if it is using the user agent default. This ID should be one of the MediaDeviceInfo.deviceid values returned from {{domxref("MediaDevices.enumerateDevices()")}}, id-multimedia, or id-communications.
+
{{domxref("HTMLMediaElement.src")}}
+
Is a {{domxref("DOMString")}} that reflects the {{htmlattrxref("src", "video")}} HTML attribute, which contains the URL of a media resource to use.
+
{{domxref("HTMLMediaElement.srcObject")}}
+
Is a {{domxref('MediaStream')}} representing the media to play or that has played in the current HTMLMediaElement, or null if not assigned.
+
{{domxref("HTMLMediaElement.textTracks")}} {{readonlyinline}}
+
Returns the list of {{domxref("TextTrack")}} objects contained in the element.
+
{{domxref("HTMLMediaElement.videoTracks")}} {{readonlyinline}}
+
Returns the list of {{domxref("VideoTrack")}} objects contained in the element. +
+

Gecko sólo soporta la reproducción de una sola pista, y el análisis de los metadatos de las pistas sólo está disponible para los medios con el formato de contenedor Ogg.

+
+
+
{{domxref("HTMLMediaElement.volume")}}
+
Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest).
+
+ +

Event handlers

+ +
+
 
+
{{domxref("HTMLMediaElement.onencrypted")}}
+
Sets the {{domxref('EventHandler')}} called when the media is encrypted.
+
{{domxref("HTMLMediaElement.onwaitingforkey")}}
+
Sets the {{domxref('EventHandler')}} called when playback is blocked while waiting for an encryption key.
+
+ +

Obsolete attributes

+ +

These attributes are obsolete and should not be used, even if a browser still supports them.

+ +
+
{{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns a double that indicates the initial playback position in seconds.
+
{{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a double representing the number of channels in the audio resource (e.g., 2 for stereo).
+
+ +

Obsolete event handlers

+ +
+
{{domxref("HTMLMediaElement.onmozinterruptbegin")}} {{non-standard_inline}} {{obsolete_inline}}
+
Sets the {{domxref("EventHandler")}} called when the media element is interrupted because of the Audio Channel manager. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.
+
{{domxref("HTMLMediaElement.onmozinterruptend")}} {{non-standard_inline}} {{obsolete_inline}}
+
Sets the {{domxref('EventHandler')}} called when the interruption is concluded. This was Firefox-specific, having been implemented for Firefox OS, and was removed in Firefox 55.
+
+ +

Methods

+ +

This interface also inherits methods from its ancestors {{domxref("HTMLElement")}}, {{domxref('Element')}}, {{domxref('Node')}}, and {{domxref('EventTarget')}}.

+ +
+
{{domxref("HTMLMediaElement.addTextTrack()")}}
+
Adds a text track (such as a track for subtitles) to a media element.
+
{{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}}
+
Returns {{domxref("MediaStream")}}, captures a stream of the media content.
+
{{domxref("HTMLMediaElement.canPlayType()")}}
+
Determines whether the specified media type can be played back.
+
{{domxref("HTMLMediaElement.fastSeek()")}}
+
Directly seeks to the given time.
+
{{domxref("HTMLMediaElement.load()")}}
+
Resets the media to the beginning and selects the best available source from the sources provided using the {{htmlattrxref("src", "video")}} attribute or the {{HTMLElement("source")}} element.
+
{{domxref("HTMLMediaElement.mozCaptureStream()")}} {{non-standard_inline}}
+
[enter description]
+
{{domxref("HTMLMediaElement.mozCaptureStreamUntilEnded()")}} {{non-standard_inline}}
+
[enter description]
+
{{domxref("HTMLMediaElement.mozGetMetadata()")}} {{non-standard_inline}}
+
Returns {{jsxref('Object')}}, which contains properties that represent metadata from the playing media resource as {key: value} pairs. A separate copy of the data is returned each time the method is called. This method must be called after the loadedmetadata event fires.
+
{{domxref("HTMLMediaElement.pause()")}}
+
Pauses the media playback.
+
{{domxref("HTMLMediaElement.play()")}}
+
Begins playback of the media.
+
{{domxref("HTMLMediaElement.seekToNextFrame()")}} {{non-standard_inline}} {{experimental_inline}}
+
Seeks to the next frame in the media. This non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to perform filtering or other operations.
+
{{domxref("HTMLMediaElement.setMediaKeys()")}} {{experimental_inline}}
+
Returns {{jsxref("Promise")}}. Sets the {{domxref("MediaKeys")}} keys to use when decrypting media during playback.
+
{{domxref("HTMLMediaElement.setSinkId()")}} {{experimental_inline}}
+
Sets the ID of the audio device to use for output and returns a {{jsxref("Promise")}}. This only works when the application is authorized to use the specified device.
+
+ +

Obsolete methods

+ +

These methods are obsolete and should not be used, even if a browser still supports them.

+ +
+
{{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}}
+
This method, available only in Mozilla's implementation, loads data from another media element. This works similarly to load() except that instead of running the normal resource selection algorithm, the source is simply set to the other element's currentSrc. This is optimized so this element gets access to all of the other element's cached and buffered data; in fact, the two elements share downloaded data, so data downloaded by either element is available to both.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "the-video-element.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
{{SpecName('EME', '#introduction', 'Encrypted Media Extensions')}}{{Spec2('EME')}}Adds {{domxref("MediaKeys")}}, {{domxref("MediaEncryptedEvent")}}, {{domxref("setMediaKeys")}}, {{domxref("onencrypted")}}, and {{domxref("onwaitingforkey")}}.
{{SpecName('Media Capture','#htmlmediaelement-extensions','HTMLMediaElement')}}{{Spec2('Media Capture')}}Adds sinkId and setSinkId(), and captureStream().
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/htmlmediaelement/loadeddata_event/index.html b/files/es/web/api/htmlmediaelement/loadeddata_event/index.html new file mode 100644 index 0000000000..6606275c6a --- /dev/null +++ b/files/es/web/api/htmlmediaelement/loadeddata_event/index.html @@ -0,0 +1,130 @@ +--- +title: 'HTMLMediaElement: loadeddata event' +slug: Web/API/HTMLMediaElement/loadeddata_event +tags: + - Audio + - HTMLMediaElement + - Referências + - Video + - eventos +translation_of: Web/API/HTMLMediaElement/loadeddata_event +--- +

{{APIRef("HTMLMediaElement")}}

+ +

El evento loadeddata se arroja cuando el cuadro en la posición de reproducción actual del medio ha terminado de cargarse; a menudo el primer marco

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BurbujasNo
CancelableNo
Interfaz{{DOMxRef("Event")}}
ObjetivoElement
Acción por defectoNinguno
Propiedad del controlador de eventos{{domxref("GlobalEventHandlers.onloadeddata")}}
EspecificaciónHTML5 media
+ +
+

Tenga en cuenta que este evento no se activará en dispositivos móviles / tablet, si el protector de datos está activado en configuración del navegador.

+
+ +

Ejemplos

+ +

Estos ejemplos agregan un escucha de eventos para el evento de loadeddata del HTMLMediaElement, luego publican un mensaje cuando ese controlador de eventos ha respondido al disparo del evento.

+ +

Utilizando addEventListener():

+ +
const video = document.querySelector('video');
+
+video.addEventListener('loadeddata', (event) => {
+  console.log('Hurra! El readyState solo aumentó a ' +
+      'HAVE_CURRENT_DATA or mayor por primera vez.');
+});
+ +

Utilizando el onloadeddata propiedad del controlador de eventos:

+ +
const video = document.querySelector('video');
+
+video.onloadeddata = (event) => {
+  console.log('Hurra! El readyState solo aumentó a ' +
+      'HAVE_CURRENT_DATA or mayor por primera vez.');
+};
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstado
{{SpecName('HTML WHATWG', "media.html#event-media-loadeddata", "loadeddata media event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#event-media-loadeddata", "loadeddata media event")}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.HTMLMediaElement.loadeddata_event")}}

+ +

Eventos Relacionados

+ + + +

Ver También

+ + diff --git a/files/es/web/api/htmlmediaelement/pause/index.html b/files/es/web/api/htmlmediaelement/pause/index.html new file mode 100644 index 0000000000..10e276e508 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/pause/index.html @@ -0,0 +1,52 @@ +--- +title: HTMLMediaElement.pause() +slug: Web/API/HTMLMediaElement/pause +translation_of: Web/API/HTMLMediaElement/pause +--- +

{{APIRef("HTML DOM")}}

+ +

El método HTMLMediaElement.pause() pausará la reproducción de los medios, si los medios ya están en pausa, este método no tendrá efecto.

+ +

Sintaxis

+ +
HTMLMediaElement.pause()
+ +

Parametros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Ninguno.

+ +

Excepciones

+ +

Ninguno.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-pause', 'pause()')}}{{Spec2('HTML WHATWG')}}Initial definition; living specification.
{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-pause','pause()')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("api.HTMLMediaElement.pause")}}

diff --git a/files/es/web/api/htmlmediaelement/paused/index.html b/files/es/web/api/htmlmediaelement/paused/index.html new file mode 100644 index 0000000000..3bf4430dae --- /dev/null +++ b/files/es/web/api/htmlmediaelement/paused/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLMediaElement.paused +slug: Web/API/HTMLMediaElement/paused +translation_of: Web/API/HTMLMediaElement/paused +--- +
{{APIRef("HTML DOM")}}
+ +

La propiedad HTMLMediaElement.paused es solo de lectura, indica si el elemento multimedia está en pausa.

+ +

Sintaxis

+ +
var pausado = audioOVideo.paused
+ +

Valor

+ +

Es un {{domxref("Boolean")}}. Mostrara true si está pausado y false en caso contrario.

+ +

Ejemplo

+ +
var obj = document.createElement('video');
+console.log(obj.paused); // true
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "#dom-media-paused", "HTMLMediaElement.paused")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "embedded-content-0.html#htmlmediaelement", "HTMLMediaElement.paused")}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.HTMLMediaElement.paused")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlmediaelement/play/index.html b/files/es/web/api/htmlmediaelement/play/index.html new file mode 100644 index 0000000000..3931470b78 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/play/index.html @@ -0,0 +1,124 @@ +--- +title: HTMLMediaElement.play() +slug: Web/API/HTMLMediaElement/play +translation_of: Web/API/HTMLMediaElement/play +--- +
{{APIRef("HTML DOM")}}
+ +

El método play() de {{domxref("HTMLMediaElement")}} intenta comenzar la reproducción de los medios. Devuelve una promesa ({{jsxref("Promise")}}) que se resuelve cuando la reproducción se ha iniciado con éxito. Si no se inicia la reproducción por cualquier motivo, como problemas de permisos, la promesa será rechazada.

+ +

Sintaxis

+ +
var promesa = HTMLMediaElement.play();
+ +

Parametros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Es una promesa({{jsxref("Promise")}}) que se resuelve cuando se inicia la reproducción, o se rechaza si por algún motivo no se puede iniciar la reproducción.

+ +
+

Nota: Los navegadores más antiguos pueden no devolver un valor de play().

+
+ +

Excepciones

+ +

El controlador de rechazo de la promesas se llama con un nombre de excepción pasado como su único parámetro de entrada (a diferencia de una excepción tradicional que se lanza). Los posibles errores incluyen:

+ +
+
NotAllowedError( Error no permitido)
+
El agente de usuario(navegador) o el sistema operativo no permiten la reproducción de medios en el contexto o situación actual. Esto puede suceder, por ejemplo, si el navegador requiere que el usuarion inicie explícitamente la reproducción de medios haciendo clic en el botón "reproducir".
+
NotSupportedError( Error no admitido)
+
La fuente de medios (que puede especificarse como {{domxref("MediaStream")}}, {{domxref("MediaSource")}}, {{domxref("Blob")}}, o {{domxref("File")}}) no representa un formato de medios compatible.
+
+ +

Se pueden informar otras excepciones, según los detalles de implementación del navegador, la implementación del reproductor de medios, etc.

+ +

Notas

+ +

Aunque generalmente se considera que el término "reproducción automática" se refiere a páginas que comienzan a reproducir contenido multimedia inmediatamente después de cargarse, las políticas de reproducción automática de los navegadores web también se aplican a cualquier reproducción de contenido multimedia que inicia por script, incluidas las llamadas a el método play().

+ +

Si el {{Glossary("user agent")}} está configurado para no permitir la reproducción automática o iniciada por script de medios, llamando el método play() hara que la promesa devuelta sea rechazada inmediatamente con un NotAllowedError. Los sitios web deben estar preparados para manejar esta situación. Por ejemplo, un sitio no debe presentar una interfaz de usuario que suponga que la reproducción ha comenzado automáticamenta, sino que debe actualizar su interfaz de usuario en función de si la promesa devuelta se resulve o se rechaza. Mira el {{anch("Example", "Ejemplo")}} abajo para más información.

+ +
+

Nota: El método play() puede hacer que se le pida al usuario que otorgue permiso para reproducir medios, lo que puede ocacionar un posible retraso antes de que se resuelva la promesa devuelta. Asegúrese de que su código no espere una  respuesta inmediata.

+
+ +

Para obtener información más detallada sobre la reproducción automática y el bloqueo de reproducción automática, consulte nuestro artículo Guía de reproducción automática para medios y API de audio web.

+ +

Ejemplo

+ +

Este ejemplo muestra cómo confirmar que la reproducción ha comenzado y cómo manejar adecuadamente la reproducción automática bloqueada:

+ +
let videoElem = document.getElementById("video");
+let playButton = document.getElementById("playbutton");
+
+playButton.addEventListener("click", handlePlayButton, false);
+playVideo();
+
+async function playVideo() {
+  try {
+    await videoElem.play();
+    playButton.className = "playing";
+  } catch(err) {
+    playButton.className = "";
+  }
+}
+
+function handlePlayButton() {
+  if (videoElem.paused) {
+    playVideo();
+  } else {
+    videoElem.pause();
+    playButton.className = "";
+  }
+}
+ +

En este ejemplo, la reproducción de video se activa y desactiva por la función async playVideo(). Intenta reproducir el video y, si tiene éxito, establece el nombre de clase del elemento playButton en "playing". Si la reproducción no se inicia, la clase del elemento playButton se borra, restaurando su apariencia predeterminada. Esto garantiza que el bóton de reproducción coincida con el estado real de reproducción al observar la resolución o el rechazo de {{jsxref("Promise")}} devuelto por el método play().

+ +

Cuando se ejecuta este ejemplo, comienza recogiendo referencias al elemento {{HTMLElement("video")}}, así como al {{HTMLElement("button")}} utilizado para activar y desactivar la reproducción. Luego configura un controlador de eventos para el evento {{event("click")}} en el botón de alternancia de reproducción e intenta comenzar automáticamente la reproducción llamando al método playVideo().

+ +

Puedes probar o remezclar este ejemplo en tiempo real en Glitch.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}}{{Spec2('HTML WHATWG')}}Initial definition; living specification.
{{SpecName('HTML5 W3C','embedded-content-0.html#dom-media-play','play()')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +
+

Nota: Las versiones WHATWG y W3C de la especificación difieren (a partir de agosto de 2018) en cuanto a si este método devuelve una {{jsxref("Promise")}} o nada en absoluto, respectivamente.

+
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.HTMLMediaElement.play")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlmediaelement/timeupdate_event/index.html b/files/es/web/api/htmlmediaelement/timeupdate_event/index.html new file mode 100644 index 0000000000..e7c931cf64 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/timeupdate_event/index.html @@ -0,0 +1,82 @@ +--- +title: 'HTMLMediaElement: timeupdate' +slug: Web/API/HTMLMediaElement/timeupdate_event +translation_of: Web/API/HTMLMediaElement/timeupdate_event +--- +

El evento timeupdate es llamado cuando el tiempo indicado por el atributo currentTime es actualizado.

+ +

La frecuencia del evento depende de la carga del sistema, pero se encuentra en un rango de 4Hz y 66Hz (asumiendo que los manejadores de eventos no toman mas de 250ms para correr). Se recomienda a los User agents variar la frecuencia del evento basados en la carga del sistema y el costo promedio de procesamiento del evento cada vez que corre, para que las actualizaciones a la UI no sean mas frecuentes que las que el user agent puede manejar confortablemente mientras se decodifica el video.

+ +

Información General

+ +
+
Specification
+
HTML5 media
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None.
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Eventos Relacionados

+ + diff --git a/files/es/web/api/htmlselectelement/checkvalidity/index.html b/files/es/web/api/htmlselectelement/checkvalidity/index.html new file mode 100644 index 0000000000..fe4755de95 --- /dev/null +++ b/files/es/web/api/htmlselectelement/checkvalidity/index.html @@ -0,0 +1,53 @@ +--- +title: HTMLSelectElement.checkValidity() +slug: Web/API/HTMLSelectElement/checkValidity +tags: + - API + - Constraint Validation API + - HTML DOM + - HTMLSelectElement + - Referencia + - metodo +translation_of: Web/API/HTMLSelectElement/checkValidity +--- +
{{ APIRef("HTML DOM") }}
+ +

El método HTMLSelectElement.checkValidity() comprueba si el elemento tiene restricciones y si las cumple. Si el elemento no cumple sus restricciones, el navegador lanza un evento cancelable {{event("invalid")}} al momento y luego devuelve false.

+ +

Sintaxis

+ +
var result = selectElt.checkValidity();
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-cva-checkvalidity', 'HTMLSelectElement.checkValidity()')}}{{Spec2('HTML5 W3C')}}Definición inicial, snapshot de {{SpecName('HTML WHATWG')}}
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLSelectElement.checkValidity")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlselectelement/index.html b/files/es/web/api/htmlselectelement/index.html new file mode 100644 index 0000000000..058aabd1e2 --- /dev/null +++ b/files/es/web/api/htmlselectelement/index.html @@ -0,0 +1,152 @@ +--- +title: HTMLSelectElement +slug: Web/API/HTMLSelectElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLSelectElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLSelectElement interface represents a {{HTMLElement("select")}} HTML Element. These elements also share all of the properties and methods of other HTML elements via the {{domxref("HTMLElement")}} interface.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

This interface inherits the properties of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

+ +
+
{{domxref("HTMLSelectElement.autofocus")}}
+
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("autofocus", "select")}} HTML attribute, which indicates whether the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified. {{gecko_minversion_inline("2.0")}}
+
{{domxref("HTMLSelectElement.disabled")}}
+
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("disabled", "select")}} HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks.
+
{{domxref("HTMLSelectElement.form")}}{{ReadOnlyInline}}
+
An {{domxref("HTMLFormElement")}} referencing the form that this element is associated with. If the element is not associated with of a {{HTMLElement("form")}} element, then it returns null.
+
{{domxref("HTMLSelectElement.labels")}}{{ReadOnlyInline}}
+
A {{domxref("NodeList")}} of {{HTMLElement("label")}} elements associated with the element.
+
{{domxref("HTMLSelectElement.length")}}
+
An unsigned long The number of {{HTMLElement("option")}} elements in this select element.
+
{{domxref("HTMLSelectElement.multiple")}}
+
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("multiple", "select")}} HTML attribute, which indicates whether multiple items can be selected.
+
{{domxref("HTMLSelectElement.name")}}
+
A {{domxref("DOMString")}} reflecting the {{htmlattrxref("name", "select")}} HTML attribute, containing the name of this control used by servers and DOM search functions.
+
{{domxref("HTMLSelectElement.options")}}{{ReadOnlyInline}}
+
An {{domxref("HTMLOptionsCollection")}} representing the set of {{HTMLElement("option")}} elements contained by this element.
+
{{domxref("HTMLSelectElement.required")}}
+
A {{jsxref("Boolean")}} reflecting the {{htmlattrxref("required", "select")}} HTML attribute, which indicates whether the user is required to select a value before submitting the form. {{gecko_minversion_inline("2.0")}}
+
{{domxref("HTMLSelectElement.selectedIndex")}}
+
A long reflecting the index of the first selected {{HTMLElement("option")}} element. The value -1 indicates no element is selected.
+
{{domxref("HTMLSelectElement.selectedOptions")}}{{ReadOnlyInline}}
+
An {{domxref("HTMLCollection")}} representing the set of {{HTMLElement("option")}} elements that are selected.
+
{{domxref("HTMLSelectElement.size")}}
+
A long reflecting the {{htmlattrxref("size", "select")}} HTML attribute, which contains the number of visible items in the control. The default is 1, unless multiple is true, in which case it is 4.
+
{{domxref("HTMLSelectElement.type")}}{{ReadOnlyInline}}
+
A {{domxref("DOMString")}} represeting the form control's type. When multiple is true, it returns "select-multiple"; otherwise, it returns "select-one".
+
{{domxref("HTMLSelectElement.validationMessage")}}{{ReadOnlyInline}}
+
A {{domxref("DOMString")}} representing a localized message that describes the validation constraints that the control does not satisfy (if any). This attribute is the empty string if the control is not a candidate for constraint validation (willValidate is false), or it satisfies its constraints.
+
{{domxref("HTMLSelectElement.validity")}}{{ReadOnlyInline}}
+
A {{domxref("ValidityState")}} reflecting the validity state that this control is in.
+
{{domxref("HTMLSelectElement.value")}}
+
A {{domxref("DOMString")}} reflecting the value of the form control (the first selected option). Returns the value attribute of the option element or if it is missing, the text attribute.
+
{{domxref("HTMLSelectElement.willValidate")}}{{ReadOnlyInline}}
+
A {{jsxref("Boolean")}} that indicates whether the button is a candidate for constraint validation. It is false if any conditions bar it from constraint validation.
+
+ +

Methods

+ +

This interface inherits the methods of {{domxref("HTMLElement")}}, and of {{domxref("Element")}} and {{domxref("Node")}}.

+ +
+
{{domxref("HTMLSelectElement.add()")}}
+
Adds an element to the collection of option elements for this select element.
+
{{domxref("HTMLSelectElement.blur()")}}{{obsolete_inline}}
+
Removes input focus from this element. This method is now implemented on {{domxref("HTMLElement")}}.
+
{{domxref("HTMLSelectElement.checkValidity()")}}
+
Checks whether the element has any constraints and whether it satisfies them. If the element fails its constraints, the browser fires a cancelable {{event("invalid")}} event at the element (and returns false).
+
{{domxref("HTMLSelectElement.focus()")}}{{obsolete_inline}}
+
Gives input focus to this element. This method is now implemented on {{domxref("HTMLElement")}}.
+
{{domxref("HTMLSelectElement.item()")}}
+
Gets an item from the options collection for this {{HTMLElement("select")}} element. You can also access an item by specifying the index in array-style brackets or parentheses, without calling this method explicitly.
+
{{domxref("HTMLSelectElement.namedItem()")}}
+
Gets the item in the options collection with the specified name. The name string can match either the id or the name attribute of an option node. You can also access an item by specifying the name in array-style brackets or parentheses, without calling this method explicitly.
+
{{domxref("HTMLSelectElement.remove()")}}
+
Removes the element at the specified index from the options collection for this select element.
+
{{domxref("HTMLSelectElement.setCustomValidity()")}}
+
Sets the custom validity message for the selection element to the specified message. Use the empty string to indicate that the element does not have a custom validity error.
+
+ +

Example

+ +

Get information about the selected option

+ +
/* assuming we have the following HTML
+<select id='s'>
+    <option>First</option>
+    <option selected>Second</option>
+    <option>Third</option>
+</select>
+*/
+
+var select = document.getElementById('s');
+
+// return the index of the selected option
+console.log(select.selectedIndex); // 1
+
+// return the value of the selected option
+console.log(select.options[select.selectedIndex].value) // Second
+
+ +

A better way to track changes to the user's selection is to watch for the {{event("change")}} event to occur on the <select>. This will tell you when the value changes, and you can then update anything you need to. See the example provided in the documentation for the change event for details.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML WHATWG')}}Since the latest snapshot, {{SpecName('HTML5 W3C')}}, it adds the autocomplete property and the reportValidity() method.
{{SpecName('HTML5 W3C', 'forms.html#htmlselectelement', 'HTMLSelectElement')}}{{Spec2('HTML5 W3C')}}Is a snapshot of {{SpecName("HTML WHATWG")}}.
+ It adds the autofocus, form, required, labels, selectedOptions, willValidate, validity and validationMessage properties.
+ The tabindex property and the blur() and focus() methods have been moved to {{domxref("HTMLElement")}}.
+ The methods item(), namedItem(), checkValidity() and setCustomValidity().
{{SpecName('DOM2 HTML', 'html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM2 HTML')}}options now returns an {{domxref("HTMLOptionsCollection")}}.
+ length now returns an unsigned long.
{{SpecName('DOM1', 'level-one-html.html#ID-94282980', 'HTMLSelectElement')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/htmlselectelement/setcustomvalidity/index.html b/files/es/web/api/htmlselectelement/setcustomvalidity/index.html new file mode 100644 index 0000000000..b5477a5ed0 --- /dev/null +++ b/files/es/web/api/htmlselectelement/setcustomvalidity/index.html @@ -0,0 +1,52 @@ +--- +title: HTMLSelectElement.setCustomValidity() +slug: Web/API/HTMLSelectElement/setCustomValidity +translation_of: Web/API/HTMLSelectElement/setCustomValidity +--- +
{{ APIRef("HTML DOM") }}
+ +

El metodo HTMLSelectElement.setCustomValidity() define el mensaje de validación personalizado para el elemento seleccionado con el mensaje especifico. Usa una string vacia para indicar que ese elemento no tiene error de validación customizado.

+ +

Syntax

+ +
selectElt.setCustomValidity(string);
+ +

Parameters

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', 'forms.html#dom-cva-setcustomvalidity', 'HTMLSelectElement.setCustomValidity()')}}{{Spec2('HTML5 W3C')}}Initial definition, snapshot of {{SpecName('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLSelectElement.setCustomValidity")}}

+ +

See also

+ + diff --git a/files/es/web/api/htmlshadowelement/getdistributednodes/index.html b/files/es/web/api/htmlshadowelement/getdistributednodes/index.html new file mode 100644 index 0000000000..782506dff6 --- /dev/null +++ b/files/es/web/api/htmlshadowelement/getdistributednodes/index.html @@ -0,0 +1,93 @@ +--- +title: HTMLShadowElement.getDistributedNodes() +slug: Web/API/HTMLShadowElement/getDistributedNodes +tags: + - Necesita traducción +translation_of: Web/API/HTMLShadowElement/getDistributedNodes +--- +
{{APIRef("Web Components")}}
+ +

The HTMLShadowElement.getDistributedNodes() method returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <shadow> element.

+ +

Syntax

+ +
var nodeList = object.getDistributedNodes()
+
+ +

Example

+ +
// Get the distributed nodes
+var nodes = myShadowObject.getDistributedNodes();
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}{{Spec2('Shadow DOM')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatNo}}{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/htmlshadowelement/index.html b/files/es/web/api/htmlshadowelement/index.html new file mode 100644 index 0000000000..4a83b2f733 --- /dev/null +++ b/files/es/web/api/htmlshadowelement/index.html @@ -0,0 +1,117 @@ +--- +title: HTMLShadowElement +slug: Web/API/HTMLShadowElement +tags: + - Necesita traducción +translation_of: Web/API/HTMLShadowElement +--- +
{{APIRef("Web Components")}}{{obsolete_header}}
+ +

The HTMLShadowElement interface represents a {{HTMLElement("shadow")}} HTML Element, which is used in Shadow DOM.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

This interface inherits the properties of {{domxref("HTMLElement")}}.

+ +

Methods

+ +

This interface inherits the methods of {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLShadowElement.getDistributedNodes()")}}
+
Returns a static {{domxref("NodeList")}} of the {{glossary("distributed nodes")}} associated with this <shadow> element. 
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', '#the-shadow-element', 'shadow')}}{{Spec2('Shadow DOM')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}}[1]{{CompatNo}}26{{CompatNo}}
{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}35{{CompatNo}}{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}}[1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
{{domxref("HTMLShadowElement.getDistributedNodes", "getDistributedNodes()")}}37{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] If Shadow DOM is not enabled in Firefox, <shadow> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 28 and is behind a preference, dom.webcomponents.enabled, which is disabled by default.

+ +

See also

+ + diff --git a/files/es/web/api/htmlstyleelement/index.html b/files/es/web/api/htmlstyleelement/index.html new file mode 100644 index 0000000000..33ffecb551 --- /dev/null +++ b/files/es/web/api/htmlstyleelement/index.html @@ -0,0 +1,125 @@ +--- +title: HTMLStyleElement +slug: Web/API/HTMLStyleElement +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - para_revisar +translation_of: Web/API/HTMLStyleElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Notas

+ +

Vea las siguientes páginas para información sobre alguno de los objetos utilizados para manipular propiedades CSS especificadas utilizando el DOM:

+ + + +

Material que se moverá a otras páginas

+ +

El objeto básico style, presenta los estilos definidos para el DOM en su especificación de nivel 2. Los estilos se definen mediante las interfaces StyleSheet y CSSStyleSheet. Estas interfaces contienen  miembros tales como insertRule, selectorText, y parentStyleSheet que permiten acceder y manipular las reglas de estilo individuales de que se compone una hoja de estilos CSS.

+ +

Para obtener los objetos style de un document, podemos usar la propiedad document.styleSheets y llegar a los distintos objetos por su índice (por ejemplo: document.styleSheets{{ mediawiki.external(0) }} es la primer stylesheet definida en el documento, etc.). Aunque hay varias formas y sintaxis para expresar una stylsheet para un documento, Netscape implementa exclusivamente, CSS, de manera que el objeto style obtenido por este método, es a la vez StyleSheet y CSSStyleSheet.

+ +
var ss = document.styleSheets[1];
+ss.cssRules[0].style.backgroundColor="blue";
+
+ +

La lista de propiedades disponibles en el DOM se encuentra en la página: DOM CSS Properties List.

+ +

El elemento propiedad style puede ser usado también para leer o establecer el estilo de un elemento. Sin embargo, esta propiedad solo devuelve atributos de estilo que han sido establecidos in-line (por ejemplo: <td style="background-color: lightblue"> devuelve la cadena "background-color: lightblue" o directamente para ese elemento usando element.style.propertyName, aún si hay otros estilos definidos para ese elemento en un stylesheet).

+ +

De igual manera, cuando establecemos esa propiedad en un elemento, sobreescribimos y borramos cualquier estilo que hubiera sido fijado en alguna otra parte para la propiedad particular de ese elemento que estamos estableciendo. Por ejemplo, estableciendo la propiedad border sobreescribimos cualquier asignación que se establezca en la sección principal o en una hoja de estilo externa, sobre la propiedad border del elemento. Sin embargo, esto no afectará ninguna otra declaración de propiedad que se haga para el estilo del elemento, tales como padding o margin o font-size, por ejemplo.

+ +

Para cambiar el estilo de un elemento en particular, podemos adaptar el siguiente ejemplo para el elemento al que quieres cambiar su estilo/s.

+ +
<html>
+<head>
+<title>ejemplo simple de estilo</title>
+
+<script type="text/javascript">
+
+function alterStyle(elem) {
+  elem.style.background = 'green';
+}
+
+function resetStyle(elemId) {
+  elem = document.getElementById(elemId);
+  elem.style.background = 'white';
+}
+</script>
+
+<style type="text/css">
+#p1 {
+ border: solid blue 2px;
+}
+</style>
+</head>
+
+<body>
+
+<!-- pasar la referencia al objeto del elemento, como parámetro 'this'. -->
+<p id="p1" onclick="alterStyle(this)";>
+ Haz clic aquí para cambiar el color de fondo. </p>
+
+<!-- pasar el identificador 'pl' de otro elemento a modificar. -->
+<button onclick="resetStyle('p1');">Volver al color de fondo original</button>
+
+</body>
+</html>
+
+ +

El método getComputedStyle() en el objeto document.defaultView devuelve todos los estilos que han sido asignados al elemento. Para una explicación del uso de este método, consulta el capítulo de ejemplos en: Example 6: getComputedStyle (en).

+ +

El objeto estilo (style) de DOM

+ +

El objeto style representa una sentencia de estilo individual. Al contrario de las reglas individuales disponibles en la colección: document.styleSheets, se accede al objeto style a partir del document o desde el elemento para el cual se aplica el estilo. Representa pues, el estilo in-line de ese elemento.

+ +

Más importante que los dos procedimientos que señalamos aquí, es el uso del objeto style para establecer las propiedades de un elemento:

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+ <head>
+  <title>Ejemplo de la Propiedad style</title>
+  <link rel="StyleSheet" href="example.css" type="text/css">
+  <script type="text/javascript">
+    function stilo()
+    {
+      document.getElementById("d").style.color = "orange";
+    }
+  </script>
+ </head>
+
+ <body>
+  <div id="d" class="thunder">Trueno</div>
+  <button onclick="stilo()">ss</button>
+ </body>
+</html>
+
+ +

Los atributos media y type de style pueden o no estar presentes. Ten en cuenta que también puedes cambiar el estilo de un elemento haciendo una referencia a él y luego usando el método setAttribute para especificar la propiedad CSS y su valor.

+ +
var el = document.getElementById("some-element");
+el.setAttribute("style", "background-color:darkblue;");
+
+ +

Ten presente, si embargo, que el método setAttribute eliminará cualquier otra propiedad que haya podido ser definida en el estilo del objeto. Si el elemento some-element arriba, tenia un atributo de estilo in-line como style="font-size: 18px", ese valor habrá sido eliminado por el uso de setAttribute.

+ +
Propiedades
+ +
+
style.media 
+
Especifica el destino intencionado de la información de estilo
+
style.type 
+
Devuelve el tipo de estilo que esta siendo aplicado por esta declaración.
+
+ +

{{ languages( { "en": "en/DOM/style", "fr": "fr/DOM/style", "pl": "pl/DOM/style" } ) }}

diff --git a/files/es/web/api/htmltableelement/align/index.html b/files/es/web/api/htmltableelement/align/index.html new file mode 100644 index 0000000000..de10e6cbc6 --- /dev/null +++ b/files/es/web/api/htmltableelement/align/index.html @@ -0,0 +1,40 @@ +--- +title: HTMLTableElement.align +slug: Web/API/HTMLTableElement/align +translation_of: Web/API/HTMLTableElement/align +--- +
+
{{APIRef("HTML DOM")}}{{deprecated_header()}}
+
+ +

La propiedad HTMLTableElement.align representa la alineación de la tabla.

+ +

Sintaxis

+ +
HTMLTableElement.align =alignment;
+varalignment =HTMLTableElement.align;
+ +

Parámetros

+ +
+
alignment {{deprecatedGeneric('inline','HTML4')}}
+
alignment es una cadena con uno de los siguientes valores: +
    +
  • left
    • +
  • center
    • +
  • right
    • +
+
+
+ +

Ejemplo

+ +
// Establecer la alineación de una tabla
+var t = document.getElementById('TableA');
+t.align = 'center';
+ +

Especificación

+ + diff --git a/files/es/web/api/htmltableelement/index.html b/files/es/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..56ef6ad502 --- /dev/null +++ b/files/es/web/api/htmltableelement/index.html @@ -0,0 +1,72 @@ +--- +title: table +slug: Web/API/HTMLTableElement +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - para_revisar +translation_of: Web/API/HTMLTableElement +--- +
{{ ApiRef() }}
+ +

Interfaz del elemento tabla HTML

+ +

Los objetos table revelan la interfaz del HTMLTableElement la cual posee métodos y propiedades especiales (más allá del interfaz regular del objeto del elemento que también tienen disponibles mediante herencia) para manipular la vista y presentación de tablas en HTML.

+ +

Propiedades

+ +
+
table.caption
+
caption devuelve la leyenda de la tabla.
+
table.tHead
+
tHead devuelve el encabezado de la tabla.
+
table.tFoot
+
tFoot devuelve el pie de la tabla.
+
table.rows
+
rows devuelve las filas de la tabla.
+
table.tBodies
+
tBodies devuelve los cuerpos de la tabla.
+
+ +
+
table.align {{Deprecated_inline}}
+
align da/define el alineamiento de la tabla.
+
table.bgColor{{Deprecated_inline}}
+
bgColor da/define el color de fondo de la tabla.
+
table.border {{Deprecated_inline()}}
+
border da/define el borde de la tabla.
+
table.cellPadding
+
cellPadding da/define el relleno interno de las celdas.
+
table.cellSpacing
+
cellSpacing da/define el espacio entre celdas.
+
table.frame
+
frame especifica que lados de la tabla tienen borde.
+
table.rules
+
rules especifica cuales de los bordes internos son visibles.
+
table.summary
+
summary da/define el resumen de la tabla.
+
table.width
+
width da/define el ancho de la tabla.
+
+ +

Métodos

+ +
+
table.createTHead
+
createTHead crea el encabezado de la tabla.
+
table.deleteTHead
+
deleteTHead elimina el encabezado de la tabla.
+
table.createTFoot
+
createTFoot crea el pie de tabla.
+
table.deleteTFoot
+
deleteTFoot elimina el pie de tabla.
+
table.createCaption
+
createCaption crea una nueva leyenda para la tabla.
+
table.deleteCaption
+
deleteCaption elimina la leyenda de tabla.
+
table.insertRow
+
insertRow inserta una nueva fila.
+
table.deleteRow
+
deleteRow elimina una fila.
+
diff --git a/files/es/web/api/htmltableelement/insertrow/index.html b/files/es/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..a3e49f3ac0 --- /dev/null +++ b/files/es/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,144 @@ +--- +title: HTMLTableElement.insertRow() +slug: Web/API/HTMLTableElement/insertRow +translation_of: Web/API/HTMLTableElement/insertRow +--- +
+
+
{{APIRef("HTML DOM")}}
+
+
+ +

El método HTMLTableElement.insertRow() inserta una nueva fila en la tabla.

+ +

Sintaxis

+ +
var row = HTMLTableElement.insertRow(optional index = -1);
+ + + +

Ejemplo

+ +
<table id="TableA">
+<tr>
+<td>Antigua fila superior</td>
+</tr>
+</table>
+<script type="text/javascript">
+
+function addRow(tableID) {
+  // Obtiene una referencia a la tabla
+  var tableRef = document.getElementById(tableID);
+
+  // Inserta una fila en la tabla, en el índice 0
+  var newRow   = tableRef.insertRow(0);
+
+  // Inserta una celda en la fila, en el índice 0
+  var newCell  = newRow.insertCell(0);
+
+  // Añade un nodo de texto a la celda
+  var newText  = document.createTextNode('Nueva fila superior');
+  newCell.appendChild(newText);
+}
+
+// Llama a addRow() con el ID de la tabla
+addRow('TableA');
+
+</script>
+ +

Para ser válida en un documento HTML, una TR debe contener al menos un elemento TD.

+ +

Observese que insertRow inserta la fila diréctamente en la tabla y retorna una referencia a la nueva fila. La fila no necesita ser añadida separadamente (p.e. con document.appendChild()) tal sería el caso si se usase document.createElement() para crear el nuevo elemento TR.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}{{Spec2("DOM2 HTML")}}Especificó con más detalle dónde se inserta la fila.
{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}{{Spec2("DOM1")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico43[1]5.5104
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] A partir deGecko 20.0 {{geckoRelease("20.0")}} el argumento index se estableció como opcional y con valor por defecto -1 según la especificación HTML.

+ +

Ver también

+ + diff --git a/files/es/web/api/idbcursor/continue/index.html b/files/es/web/api/idbcursor/continue/index.html new file mode 100644 index 0000000000..90679783b1 --- /dev/null +++ b/files/es/web/api/idbcursor/continue/index.html @@ -0,0 +1,194 @@ +--- +title: IDBCursor.continue() +slug: Web/API/IDBCursor/continue +tags: + - API + - Almacen + - Basededatos + - Continuar + - CursorIDB + - IndexadoIDB + - Referencia + - metodo +translation_of: Web/API/IDBCursor/continue +--- +

{{APIRef("IndexedDB")}}

+ +

El siguiente() método de la  {{domxref("IDBCursor")}} interfaz, avanza el cursor hacia la siguiente posición a lo largo de su dirección, para el elemento cuya tecla marque la opción de una tecla parámetro. si ninguna tecla es especificada, el cursor avanzará hacia la siguiente posición, bazado en su dirección actual.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
cursor.continue(optionalKey);
+ +

Parámetros

+ +
+
Tecla opcional
+
La tecla para posisionar al cursor en.
+
+ +

Excepciones

+ +

Este método puede plantear un{{domxref("DOMException")}} con una {{domxref("DOMError")}} de uno de los siguientes tipos:

+ + + + + + + + + + + + + + + + + + + + + + +
ExcepciónDescripción
TransactionInactiveErrorEsta transacción en el Cursor IDB está inactiva.
DataError +

El parámetro de una tecla podría tener una de las siguientes condiciones:

+ +
    +
  • La tecla no es una tecla valida.
    • +
  • La tecla está más atrás o en el mismo sitio que la posición del cursor y además la dirección del cursor es la siguiente o la única siguiente.
    • +
  • La tecla está más adelante o en el mismo sitio que la posición del cursor y además la dirección del cursor es previa o la única previa.
    • +
+
InvalidStateErrorEl cursor está siendo reiterado o se ha reiterado mas allá de su final.
+  
+ +

Ejemplo

+ +

En este simple fragmento nosotros creamos una transacción, recuperar un objeto del almacen, despues usamos un cursor para interactuar a traves de todos los registros en almacen de objetos. El cursor no requiere que nosotros seleccionemos los datos basados en una tecla; podemos tomarlo todo. También es importante resaltar que en cada interacción de la cadena, puedes tomar datos desde el registro actual debajo del objeto del cursor usando cursor.value.foo. Para dar un ejemplo completo, puedes mirar nuestra IDBCursor example (view example live.)

+ +
function displayData() {
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+};
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationEstadoComentarios
{{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico23{{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, parcial157.1
Disponible en workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatGeckoMobile("22.0")}}1.0.110228
Disponible en workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+

Ten cuidado en Chrome ya que todavía están siendo implementado las antiguas especificaciones con las nuevas. Del mismo modo que todavía tiene la propiedad webkitIndexedDB aun si el indexedDB sin prefijo esta presente.

+
+ +

Te puede interesar

+ + + +

 

diff --git a/files/es/web/api/idbcursor/index.html b/files/es/web/api/idbcursor/index.html new file mode 100644 index 0000000000..841bf6f9be --- /dev/null +++ b/files/es/web/api/idbcursor/index.html @@ -0,0 +1,194 @@ +--- +title: IDBCursor +slug: Web/API/IDBCursor +tags: + - API + - Database + - IDBCursor + - IndexedDB + - Interface + - NeedsTranslation + - Reference + - Référence(2) + - Storage + - TopicStub +translation_of: Web/API/IDBCursor +--- +

{{APIRef("IndexedDB")}}

+ +

La interfaz IDBCursor de la IndexedDB API representa un cursor para atravesar o iterar varios registros de una base de datos.

+ +

El cursor tiene una fuente que indica el índice o el almacén de objetos sobre el que se está iterando. Tiene una posición dentro del rango y se mueve en una dirección que aumenta o disminuye en el orden de las Keys de registro. El cursor permite a una aplicación procesar asincrónicamente todos los registros del rango del cursor.

+ +

Puede tener un número ilimitado de cursores al mismo tiempo. Siempre se obtiene el mismo objeto IDBCursor que representa un cursor determinado. Las operaciones se realizan en el índice subyacente o en el almacén de objetos.

+ +

{{AvailableInWorkers}}

+ +

Methods

+ +
+
{{domxref("IDBCursor.advance()")}}
+
Establece el número de veces que un cursor debe mover su posición hacia adelante.
+
{{domxref("IDBCursor.continue()")}}
+
Avanza el cursor a la siguiente posición a lo largo de su dirección, hasta el elemento cuya key coincide con el parámetro clave opcional.
+
+ +
+
{{domxref("IDBCursor.delete()")}}
+
Devuelve un objeto {{domxref("IDBRequest")}} y, en un hilo separado, elimina el registro en la posición del cursor, sin cambiar la posición del cursor. Esto se puede utilizar para borrar registros específicos.
+
{{domxref("IDBCursor.update()")}}
+
Devuelve un objeto {{domxref("IDBRequest")}} y, en un hilo separado, actualiza el valor en la posición actual del cursor en el almacén de objetos. Esto se puede utilizar para actualizar registros específicos.
+
+ +

Propiedades

+ +
+
{{domxref("IDBCursor.source")}} {{readonlyInline}}
+
Devuelve {{domxref("IDBObjectStore")}} o {{domxref("IDBIndex")}}} que el cursor está iterando. Esta función nunca devuelve nulo o lanza una excepción, incluso si el cursor está siendo iterado, ha iterado más allá de su final, o su transacción no está activa.
+
{{domxref("IDBCursor.direction")}} {{readonlyInline}}
+
+
Devuelve la dirección de desplazamiento del cursor. Ver Constants para valores posibles.
+
{{domxref("IDBCursor.key")}} {{readonlyInline}}
+
Devuelve la key del registro en la posición del cursor. Si el cursor está fuera de su rango, se fija en undefined. La key del cursor puede ser de cualquier tipo de datos.
+
{{domxref("IDBCursor.primaryKey")}} {{readonlyInline}}
+
Devuelve la key primaria efectiva actual del cursor. Si el cursor está siendo iterado o ha iterado fuera de su rango, se fija en undefined. La key principal del cursor puede ser cualquier tipo de datos.
+
+ +

Constants

+ +
{{ deprecated_header(13) }}
+ +
+

These constants are no longer available — they were removed in Gecko 25. You should use the string constants directly instead. ({{ bug(891944) }})

+
+ + + +

Ejemplo

+ +

En este simple fragmento creamos una transacción, recuperamos un almacén de objetos y usamos un cursor para iterar todos los registros del almacén de objetos. El cursor no nos obliga a seleccionar los datos en base a una key; podemos simplemente cogerlos todos. También tenga en cuenta que en cada iteración del bucle, puede tomar datos del registro actual bajo el objeto del cursor utilizando cursor.value.foo. Para un ejemplo completo de funcionamiento, vea nuestro IDBCursor example (view example live.)

+ +
function displayData() {
+  var transaction = db.transaction(['rushAlbumList'], "readonly");
+  var objectStore = transaction.objectStore('rushAlbumList');
+
+  objectStore.openCursor().onsuccess = function(event) {
+    var cursor = event.target.result;
+    if(cursor) {
+      var listItem = document.createElement('li');
+      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
+      list.appendChild(listItem);
+
+      cursor.continue();
+    } else {
+      console.log('Entries all displayed.');
+    }
+  };
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}}{{Spec2('IndexedDB')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{property_prefix("webkit")}}
+ 24 [1]		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, partial157.1
Available in workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatGeckoMobile("22.0")}}1.0.110228
Available in workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +

[1]Be careful in Chrome as it still implements the old specification along with the new one. Similarly it still has the prefixed webkitIndexedDB property even if the unprefixed indexedDB is present.

+ +

See also

+ + diff --git a/files/es/web/api/idbdatabase/index.html b/files/es/web/api/idbdatabase/index.html new file mode 100644 index 0000000000..c16635051b --- /dev/null +++ b/files/es/web/api/idbdatabase/index.html @@ -0,0 +1,258 @@ +--- +title: IDBDatabase +slug: Web/API/IDBDatabase +tags: + - API + - Database + - IDBDatabase + - IndexedDB + - Interface + - NeedsTranslation + - Reference + - Storage + - TopicStub + - accessing data + - asynchronous access + - transactions +translation_of: Web/API/IDBDatabase +--- +

{{APIRef("IndexedDB")}}

+ +
+

The IDBDatabase interface of the IndexedDB API provides a connection to a database; you can use an IDBDatabase object to open a transaction on your database then create, manipulate, and delete objects (data) in that database. The interface provides the only way to get and manage versions of the database.

+ +

{{AvailableInWorkers}}

+
+ +
+

Note: Everything you do in IndexedDB always happens in the context of a transaction, representing interactions with data in the database. All objects in IndexedDB — including object stores, indexes, and cursors — are tied to a particular transaction. Thus, you cannot execute commands, access data, or open anything outside of a transaction.

+
+ +

Methods

+ +

Inherits from: EventTarget

+ +
+
{{domxref("IDBDatabase.close()")}}
+
Returns immediately and closes the connection to a database in a separate thread.
+
{{domxref("IDBDatabase.createObjectStore()")}}
+
Creates and returns a new object store or index.
+
{{domxref("IDBDatabase.deleteObjectStore()")}}
+
Destroys the object store with the given name in the connected database, along with any indexes that reference it.
+
{{domxref("IDBDatabase.transaction()")}}
+
Immediately returns a transaction object ({{domxref("IDBTransaction")}}) containing the {{domxref("IDBTransaction.objectStore")}} method, which you can use to access your object store. Runs in a separate thread.
+
+ +

Properties

+ +
+
{{domxref("IDBDatabase.name")}} {{readonlyInline}}
+
A {{ domxref("DOMString") }} that contains the name of the connected database.
+
{{domxref("IDBDatabase.version")}} {{readonlyInline}}
+
A 64-bit integer that contains the version of the connected database. When a database is first created, this attribute is an empty string.
+
{{domxref("IDBDatabase.objectStoreNames")}} {{readonlyInline}}
+
A {{ domxref("DOMStringList") }} that contains a list of the names of the object stores currently in the connected database.
+
+ +

Event handlers

+ +
+
{{domxref("IDBDatabase.onabort")}}
+
Fires when access of the database is aborted.
+
{{domxref("IDBDatabase.onclose")}}
+
Fires when the {{event("close")}} event occurs; this happens when the database is unexpectedly closed, such as during application shutdown.
+
{{domxref("IDBDatabase.onerror")}}
+
Fires when access to the database fails.
+
{{domxref("IDBDatabase.onversionchange")}}
+
+

Fires when a database structure change ({{domxref("IDBOpenDBRequest.onupgradeneeded")}} event or {{domxref("IDBFactory.deleteDatabase()")}} was requested elsewhere (most probably in another window/tab on the same computer). This is different from the version change transaction (see {{domxref("IDBVersionChangeEvent")}}), but it is related.

+
+
+ +

Example

+ +

In the following code snippet, we open a database asynchronously ({{domxref("IDBFactory")}}), handle success and error cases, and create a new object store in the case that an upgrade is needed ({{ domxref("IDBdatabase") }}). For a complete working example, see our To-do Notifications app (view example live.)

+ +
// Let us open our database
+  var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+  // these two event handlers act on the IDBDatabase object, when the database is opened successfully, or not
+  DBOpenRequest.onerror = function(event) {
+    note.innerHTML += '<li>Error loading database.</li>';
+  };
+
+  DBOpenRequest.onsuccess = function(event) {
+    note.innerHTML += '<li>Database initialised.</li>';
+
+    // store the result of opening the database in the db variable. This is used a lot later on
+    db = DBOpenRequest.result;
+
+    // Run the displayData() function to populate the task list with all the to-do list data already in the IDB
+    displayData();
+  };
+
+  // This event handles the event whereby a new version of the database needs to be created
+  // Either one has not been created before, or a new version number has been submitted via the
+  // window.indexedDB.open line above
+
+  DBOpenRequest.onupgradeneeded = function(event) {
+    var db = event.target.result;
+
+    db.onerror = function(event) {
+      note.innerHTML += '<li>Error loading database.</li>';
+    };
+
+    // Create an objectStore for this database using IDBDatabase.createObjectStore
+
+    var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+    // define what data items the objectStore will contain
+
+    objectStore.createIndex("hours", "hours", { unique: false });
+    objectStore.createIndex("minutes", "minutes", { unique: false });
+    objectStore.createIndex("day", "day", { unique: false });
+    objectStore.createIndex("month", "month", { unique: false });
+    objectStore.createIndex("year", "year", { unique: false });
+
+    objectStore.createIndex("notified", "notified", { unique: false });
+
+    note.innerHTML += '<li>Object store created.</li>';
+  };
+ +

This next line opens up a transaction on the Database, then opens an object store that we can then manipulate the data inside of.

+ +
    var objectStore = db.transaction('toDoList').objectStore('toDoList');
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}}{{Spec2('IndexedDB')}}Initial version
{{SpecName("IndexedDB 2", "#database-interface", "IDBDatabase")}}{{Spec2("IndexedDB 2")}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)[1]Internet ExplorerOperaSafari (WebKit)
Basic support23 {{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop(16)}}		10, partial157.1
Available in workers{{CompatVersionUnknown}}{{CompatGeckoDesktop(37)}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
{{event("close")}} event{{CompatVersionUnknown}}{{CompatGeckoDesktop(50)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari MobileChrome for Android
Basic support4.4{{CompatVersionUnknown}}{{CompatGeckoMobile(22)}}1.0.110228{{CompatVersionUnknown}}
Available in workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(37)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
{{event("close")}} event{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(50)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}). Previously in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk. In Firefox 40+ the complete event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The complete event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare most consumers should not need to concern themselves further. If you must ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see {{domxref("IDBDatabase.transaction")}}).

+ +

See also

+ + + +

 

diff --git a/files/es/web/api/idbdatabase/transaction/index.html b/files/es/web/api/idbdatabase/transaction/index.html new file mode 100644 index 0000000000..8e8fcfedd6 --- /dev/null +++ b/files/es/web/api/idbdatabase/transaction/index.html @@ -0,0 +1,229 @@ +--- +title: IDBDatabase.transaction() +slug: Web/API/IDBDatabase/transaction +tags: + - Almacenamiento + - Base de datos + - Referencia + - metodo + - transacción +translation_of: Web/API/IDBDatabase/transaction +--- +

{{ APIRef("IndexedDB") }}

+ +
+

El método transaction() [transacción] de la interfaz {{domxref("IDBDatabase")}} retorna inmediatamente un objeto de transacción ({{domxref("IDBTransaction")}}) que contiene el método {{domxref("IDBTransaction.objectStore")}}, el cual puedes usar para acceder a tu almacén de objetos.

+ +

{{AvailableInWorkers}}

+
+ +

Sintáxis

+ +
var transaccion = db.transaction(["toDoList"], "readwrite");
+ +

Retorna

+ +

Un objeto {{domxref("IDBTransaction")}}.

+ +

Excepciones

+ +

Éste método puede invocar una excepción {{domxref("DOMException")}} de alguno de los siguientes tipos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ExcepciónDescripción
InvalidStateError +

El método close() ha sido llamado previamente en esta instancia de {{domxref("IDBDatabase")}}.

+
NotFoundErrorUn almacén de objetos especificado en el parámetro storeNames ha sido borrado o removido.
TypeErrorEl valor para el parámetro mode es inválido.
InvalidAccessErrorLa función fue llamada con una lista vacía de nombres de almacenes.
+  
+ +

Ejemplo

+ +

En este ejemplo abrimos la conexión a una base de datos, luego usamos transaction() para abrir una transacción en dicha base de datos. Para un ejemplo completo, vea nuestra aplicación To-do Notifications (ver ejemplo en vivo).

+ +
var db;
+
+// Abrimos nuestra base de datos:
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Base de datos inicializada.</li>';
+
+  // almacenar el resultado de la apertura de la base de datos en la variable db. Esto es bastante usado más abajo:
+  db = DBOpenRequest.result;
+
+  // ejecutar la función displayData() para popular la lista de tareas con los datos "to-do" que existen actualmente en la Base de Datos Indizada (IDB):
+  displayData();
+
+};
+
+// abrir una transacción lectura/escritura, lista para añadir los datos:
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// reportar cuando haya éxito al abrir la transacción
+transaction.oncomplete = function(event) {
+  note.innerHTML += '<li>Transacción completa: modificación a la base de datos finalizada.</li>';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '<li>Transacción no abierta debido a un error. No se permite duplicar ítems.</li>';
+};
+
+// después deberías continuar y hacerle algo a esta base de datos a través del almacén de objetos:
+var objectStore = transaction.objectStore("toDoList");
+// etc.
+ +

Parámetros

+ +
+
storeNames
+
Son los nombres de los almacenes de objetos e índices que están en el ámbito de la nueva transacción, declarados como un arreglo de cadenas de texto. Especifíca solamente aquellos a los que necesitas acceso.
+ Si necesitas acceder a un solo almacén, puedes especificar su nombre como una cadena. Por tanto las siguientes líneas son equivalentes:
+
+ 
var transaction = db.transaction(['my-store-name']);
+var transaction = db.transaction('my-store-name');
+
+
Si necesitas acceder a todos los almacenes de objetos en la base de datos, puedes usar la propiedad {{domxref("IDBDatabase.objectStoreNames")}}: + 
var transaction = db.transaction(db.objectStoreNames);
+
+
Pasar un arreglo vació como parámetro  arrojará una excepción.
+
mode
+
Opcional. Los tipos de acceso que pueden desempeñarse en la transacción. Las transacciones son abiertas en uno de tres modos: readonly [sólo lectura], readwrite [lectura/escritura], y readwriteflush [descarga de lectura/escritura] (no-estándar, sólo para Firefox). El modo versionchange [cambio de versión] no puede ser especificado aquí. Si no provees un parámetro, el modo predeterminado será readonly [sólo lectura]. Para evitar ralentizar las cosas, no abras una transacción readwrite [lectura/escritura] a menos que realmente necesites escribir en la base de datos.
+
Si necesitas abrir un almacén de objetos en modo readwrite para cambiar los datos, usa lo siguiente: + 
var transaction = db.transaction('my-store-name', "readwrite");
+ +

Desde Firefox 40, las transacciones de IndexedDB tienen garantías de durabilidad relajadas para aumentar el rendimiento (ver {{Bug("1112702")}}), lo cual es el mismo comportamiento de otros navegadores que soportan IndexedDB. Es decir, anteriormente en una transacción readwrite el evento {{domxref("IDBTransaction.oncomplete")}} era invocado sólo cuando se garantizaba que todos los datos habían sido vaciados al disco duro. En Firefox 40+ el evento complete es accionado después de indicársele al Sistema Operativo que escriba los datos al disco pero esta confirmación podría suceder poco antes de que los datos hayan sido verdaderamente escritos en él. Si bien dicho evento puede entonces ser entregado un poco antes de tiempo, de cualquier modo, existe una pequeña probabilidad de que la entera transacción se pierda si el SO se bloquea o si ha ocurrido una pérdida de energía antes de que los datos efectivamente se descarguen al disco duro. Como esas catastróficas circunstancias son más bien raras, la mayoría de los consumidores no deberían preocuparse demasiado.

+ +
+

Nota: En Firefox, si deseas asegurar la durabilidad por alguna razón (por ejemplo, que estés almacenando datos críticos que no puedan ser recalculados después) puedes forzar una transacción a descargar al disco antes de invocar el evento complete creando una transacción que use un modo experimental readwriteflush  (no-estándar) (ver {{domxref("IDBDatabase.transaction")}}). Esto actualmente es experimental, y puede usarse únicamente si la configuración dom.indexedDB.experimental es igual a true en about:config.

+
+
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}}{{Spec2('IndexedDB')}} 
+ +

Compatibilidad con Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico23{{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, parcial157.1
Disponible en workers [obreros web]{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Móvil (Gecko)Firefox OSIE PhoneOpera MóvilSafari MóvilChrome para Android
Soporte básico4.4{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}1.0.110228{{CompatVersionUnknown}}
Disponible en workers [obreros web]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/idbobjectstore/add/index.html b/files/es/web/api/idbobjectstore/add/index.html new file mode 100644 index 0000000000..1a28ff194c --- /dev/null +++ b/files/es/web/api/idbobjectstore/add/index.html @@ -0,0 +1,193 @@ +--- +title: IDBObjectStore.add +slug: Web/API/IDBObjectStore/add +tags: + - API + - Add + - Almacenamiento + - Base de datos + - IDBObjectStore + - IndexedDB + - Referencia +translation_of: Web/API/IDBObjectStore/add +--- +

{{ APIRef("IDBObjectStore") }}

+
+

El metodo add() de la interfaz {{domxref("IDBObjectStore")}} retorna un objeto {{domxref("IDBRequest")}}, y, un hilo separado, crea un clone estructurado del valor, y almacena el valor clonado en el almacén de objetos. Esto es para agregar nevos registros a un almacén de objetos.

+

Para determinar si la operación de agregar fue completada satisfactoriamente, escucha el evento complete de la transaccion en adicion al evento success de la peticion IDBojectStore.add, porque la transaccion y todavía puede fallar después de lanzar el evento success. En otras palabras, el eventos success sólo es lanzado cuando la transacción ha sido puesta en cola satisfactoriamente.

+

El método agregar es un método de sólo inserción. Si un registro ya existe en el almacén de objetos con el argumento key como su clave, entonces un error ConstrainError es lanzado en el objeto petición devuelto. Para actualizar registros existentes, debes usar el método {{domxref("IDBObjectStore.put")}} en su lugar.

+
+

Sintaxis

+
var request = objectStore.add(myItem, optionalKey);
+

Retorno

+

Un objeto {{domxref("IDBRequest")}} en el que los eventos subsecuentes relacionados a esta operación son lanzados.

+

Excepciones

+

Este método puede generar un {{domxref("DOMException")}} con un {{domxref("DOMError")}} de uno de los siguiente tipos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ExcepciónDescripción
ReadOnlyErrorLa transacción asociada con esta operación está en un modo de sólo lectura.
TransactionInactiveErrorEsta transacción de {{domxref("IDBObjectStore")}}'s está inactiva.
DataError +

Cualquiera de los siguientes condiciones aplica:

+
    +
  • El almacén de objetos usa llaves en línea o tiene un generador de llaves, y una argumento llave fue proporcionado.
    • +
  • El almacén de objetos usa llaves fuera de línea y no tiene un generador de llaves, y un argumento llave fue proporcionado.
    • +
  • El almacén de objetos usa llaves en línea pero no un generador de llaves, y la ruta de la llave del almacén de objetos no da una llave válida.
    • +
  • El argumento llave fue proporcionado pero no contiene una llave válida.
    • +
+
InvalidStateErrorEl {{domxref("IDBObjectStore")}} ha sido borrado o removido.
DataCloneErrorLos datos siendo almacenados no pueden ser clonados por el algoritmo de clonado estructurado interno.
+

Ejemplo

+

En el siguiente código, abrimos una transacción read/write en nuestra base de datos y agregado algunos datos al almacén de datos usando add(). También ten en cuenta que las funciones adjuntas a los manejadores de eventos de la transacción para informar en la salida de la apertura de transacciones en el evento de éxito o falla. Para un ejemplo completo funcionando, mira nuestra aplicación To-do Notifications (ver ejemplo).

+
// Abrimos nuestra base de datos
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Database initialised.</li>';
+
+  // Almacenar el resultado de la apertura de la base de datos en la variable db. Esta es usada mucho después
+  db = DBOpenRequest.result;
+
+  // Ejecuta la función addData() para agregar los datos
+  addData();
+};
+
+function addData() {
+  // Crea un nuevo objeto listo para ser insertado en la IDB
+  var newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ];
+
+  // Inicia una transacción de lectura/escritura db transaction, lista para agregar los datos
+  var transaction = db.transaction(["toDoList"], "readwrite");
+
+  // Informa sobre el éxito de la inicio de la transacción
+  transaction.oncomplete = function(event) {
+    note.innerHTML += '<li>Transaction completed: database modification finished.</li>';
+  };
+
+
+  transaction.onerror = function(event) {
+  note.innerHTML += '<li>Transaction not opened due to error. Duplicate items not allowed.</li>';
+  };
+
+  // Crea una almacén de objetos en la transacción
+  var objectStore = transaction.objectStore("toDoList");
+
+  // Agrega nuestro objeto newItem al almacén de objetos
+  var objectStoreRequest = objectStore.add(newItem[0]);
+
+  objectStoreRequest.onsuccess = function(event) {
+    //Informa sobre el éxito de nuestro nuevo elemento en la base de datos
+    note.innerHTML += '<li>New item added to database.</li>';
+  };
+};
+

Parámetros

+
+
+ value
+
+ El valor para ser almacenado.
+
+ key
+
+ La llave a usar para identificar el registro. Si no es especificada, el resultado es nulo.
+
+

Especificación

+ + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}}{{Spec2('IndexedDB')}} 
+

Compatibilidad de navegadores

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico23{{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, partial157.1
+
+
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatGeckoMobile("22.0")}}1.0.11022{{CompatNo}}
+
+

Ver también

+ diff --git a/files/es/web/api/idbobjectstore/index.html b/files/es/web/api/idbobjectstore/index.html new file mode 100644 index 0000000000..32bb499284 --- /dev/null +++ b/files/es/web/api/idbobjectstore/index.html @@ -0,0 +1,207 @@ +--- +title: IDBObjectStore +slug: Web/API/IDBObjectStore +tags: + - API +translation_of: Web/API/IDBObjectStore +--- +

{{APIRef("IndexedDB")}}

+ +
+

The IDBObjectStore interface of the IndexedDB API represents an object store in a database. Records within an object store are sorted according to their keys. This sorting enables fast insertion, look-up, and ordered retrieval.

+
+ +

Methods

+ +
+
{{domxref("IDBObjectStore.add")}}
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store. This is for adding new records to an object store.
+
{{domxref("IDBObjectStore.clear")}}
+
Creates and immediately returns an {{domxref("IDBRequest")}} object, and clears this object store in a separate thread. This is for deleting all current records out of an object store.
+
{{domxref("IDBObjectStore.delete")}}
+
returns an {{domxref("IDBRequest")}} object, and, in a separate thread, deletes the current object store. This is for deleting individual records out of an object store.
+
{{domxref("IDBObjectStore.get")}}
+
returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns the object store selected by the specified key. This is for retrieving specific records from an object store.
+
{{domxref("IDBObjectStore.createIndex")}}
+
Creates a new index during a version upgrade, returning a new {{domxref("IDBIndex")}} object in the connected database.
+
{{domxref("IDBObjectStore.deleteIndex")}}
+
Destroys the specified index in the connected database, used during a version upgrade.
+
{{domxref("IDBObjectStore.index")}}
+
Opens an index from this object store after which it can, for example, be used to return a sequence of records sorted by that index using a cursor.
+
{{domxref("IDBObjectStore.put")}}
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store. This is for updating existing records in an object store when the transaction's mode is readwrite.
+
{{domxref("IDBObjectStore.openCursor")}} 
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns a new {{domxref("IDBCursorWithValue")}} object. Used for iterating through an object store by primary key with a cursor.
+
+ +

Properties

+ +
+
{{domxref("IDBObjectStore.indexNames")}} {{readonlyInline}}
+
A list of the names of indexes on objects in this object store.
+
{{domxref("IDBObjectStore.keyPath")}} {{readonlyInline}}
+
The key path of this object store. If this attribute is null, the application must provide a key for each modification operation.
+
{{domxref("IDBObjectStore.name")}} {{readonlyInline}}
+
The name of this object store.
+
{{domxref("IDBObjectStore.transaction")}} {{readonlyInline}}
+
The name of the transaction to which this object store belongs.
+
{{domxref("IDBObjectStore.autoIncrement")}} {{readonlyInline}}
+
The value of the auto increment flag for this object store.
+
+ +

Obsolete methods

+ +
+
{{domxref("IDBObjectStore.openKeyCursor")}} 
+
Returns an {{domxref("IDBRequest")}} object, and, in a separate thread, returns a new {{domxref("IDBCursorWithValue")}}. Used for iterating through an object store with a key. However, this is now handled by {{domxref("IDBObjectStore.openCursor")}}, if a value is specified.
+
+ +

Example

+ +

This example shows a variety of different uses of ObjectStores, from updating the data structure with {{domxref("IDBObjectStore.createIndex")}} inside an onupgradeneeded function, to adding a new item to our object store with {{domxref("IDBObjectStore.add")}}. For a full working example, see our To-do Notifications app (view example live.)

+ +
// Let us open our database
+var DBOpenRequest = window.indexedDB.open("toDoList", 4);
+
+DBOpenRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>Database initialised.</li>';
+
+  // store the result of opening the database in the db variable.
+  db = DBOpenRequest.result;
+};
+
+// This event handles the event whereby a new version of the database needs to be created
+// Either one has not been created before, or a new version number has been submitted via the
+// window.indexedDB.open line above
+DBOpenRequest.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  db.onerror = function(event) {
+    note.innerHTML += '<li>Error loading database.</li>';
+  };
+
+  // Create an objectStore for this database
+
+  var objectStore = db.createObjectStore("toDoList", { keyPath: "taskTitle" });
+
+  // define what data items the objectStore will contain
+
+  objectStore.createIndex("hours", "hours", { unique: false });
+  objectStore.createIndex("minutes", "minutes", { unique: false });
+  objectStore.createIndex("day", "day", { unique: false });
+  objectStore.createIndex("month", "month", { unique: false });
+  objectStore.createIndex("year", "year", { unique: false });
+
+  objectStore.createIndex("notified", "notified", { unique: false });
+
+  note.innerHTML += '<li>Object store created.</li>';
+};
+
+// Create a new item to add in to the object store
+var newItem = [
+  { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: 'December', year: 2013, notified: "no" }
+];
+
+// open a read/write db transaction, ready for adding the data
+var transaction = db.transaction(["toDoList"], "readwrite");
+
+// report on the success of opening the transaction
+transaction.oncomplete = function(event) {
+  note.innerHTML += '<li>Transaction opened for task addition.</li>';
+};
+
+transaction.onerror = function(event) {
+  note.innerHTML += '<li>Transaction not opened due to error. Duplicate items not allowed.</li>';
+};
+
+// create an object store on the transaction
+var objectStore = transaction.objectStore("toDoList");
+// add our newItem object to the object store
+var objectStoreRequest = objectStore.add(newItem[0]);
+
+objectStoreRequest.onsuccess = function(event) {
+  note.innerHTML += '<li>New item added to database.</li>';
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}}{{Spec2('IndexedDB')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{property_prefix("webkit")}}
+ 24		10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, partial157.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatGeckoMobile("22.0")}}1.0.11022{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/es/web/api/imagebitmap/index.html b/files/es/web/api/imagebitmap/index.html new file mode 100644 index 0000000000..31a33886b9 --- /dev/null +++ b/files/es/web/api/imagebitmap/index.html @@ -0,0 +1,65 @@ +--- +title: ImageBitmap +slug: Web/API/ImageBitmap +tags: + - API + - Canvas + - Imagen de mapa de bits + - Referencia +translation_of: Web/API/ImageBitmap +--- +
{{APIRef("Canvas API")}}
+ +

The ImageBitmap interface represents a bitmap image which can be drawn to a {{HTMLElement("canvas")}} without undue latency. It can be created from a variety of source objects using the {{domxref("ImageBitmapFactories.createImageBitmap", "createImageBitmap()")}} factory method. ImageBitmap provides an asynchronous and resource efficient pathway to prepare textures for rendering in WebGL.

+ +

Properties

+ +
+
{{domxref("ImageBitmap.height")}} {{readonlyInline}}
+
Is an unsigned long representing the height, in CSS pixels, of the ImageData.
+
{{domxref("ImageBitmap.width")}} {{readonlyInline}}
+
Is an unsigned long representing the width, in CSS pixels, of the ImageData.
+
+ +

Methods

+ +
+
{{domxref("ImageBitmap.close()")}}
+
+

Disposes of all graphical resources associated with an ImageBitmap.

+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "webappapis.html#imagebitmap", "ImageBitmap")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/imagebitmaprenderingcontext/index.html b/files/es/web/api/imagebitmaprenderingcontext/index.html new file mode 100644 index 0000000000..4fb6f8816f --- /dev/null +++ b/files/es/web/api/imagebitmaprenderingcontext/index.html @@ -0,0 +1,37 @@ +--- +title: ImageBitmapRenderingContext +slug: Web/API/ImageBitmapRenderingContext +translation_of: Web/API/ImageBitmapRenderingContext +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

El interface ImageBitmapRenderingContext es un lienzo de contexto renderizado que sólo permite la funcionalidad de reemplazar el contenido del lienzo ( <canvas> ) con el  {{domxref("ImageBitmap")}} dado. La identificación de contenido (el primer argumento a {{domxref("HTMLCanvasElement.getContext()")}} o {{domxref("OffscreenCanvas.getContext()")}}  es "bitmaprenderer".

+ +

Esta interface es posible en ambos , la ventana y el "worker context"  (contexto de tabajo).

+ +

Métodos

+ +
+
{{domxref("ImageBitmapRenderingContext.transferFromImageBitmap()")}}
+
+

Muestra el ImageBitmap en el lienzo asociado con el contexto de renderizado. La propiedad del ImageBitmap se transfiere al lienzo. Este se llamaba transferImageBitmap(), pero se renombra en un cambio especulativo . El viejo nombre se mantiene como un alias para evitar una ruptura del código.

+
+
+ +

Especificaciones

+ +

Escrito como una propuesta en la especificaación OffscreenCanvas.

+ +

Compatibilidad del Buscador

+ +
+ + +

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

+
+ +

Ver también

+ + diff --git a/files/es/web/api/index.html b/files/es/web/api/index.html new file mode 100644 index 0000000000..eb83cedc1b --- /dev/null +++ b/files/es/web/api/index.html @@ -0,0 +1,37 @@ +--- +title: Referencia de la API Web +slug: Web/API +tags: + - API + - Aterrizaje + - DOM + - Referencia + - Web +translation_of: Web/API +--- +

Cuando escribimos código para la web utilizando JavaScript, podemos usar gran número de APIs disponibles. A continuación mostramos una lista de todas las interfaces (es decir, tipos de objetos) que puedes usar al desarrollar tu aplicación o sitio Web. Para obtener una lista de las API que contiene cada una de estas interfaces, consulta la referencia de la API Web.

+ +
{{APIListAlpha}}
+ +
+ +

Especificaciones

+ +

Esta es una lista de todas las APIs que están disponibles.

+ +

{{ListGroups}}

+ +

Interfaces

+ +


+ Esta es una lista de todas las interfaces (es decir, tipos de objetos) que están disponibles

+ +

{{APIListAlpha}}

+ +

Ve también

+ + + + diff --git a/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html b/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html new file mode 100644 index 0000000000..34d4fdd438 --- /dev/null +++ b/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html @@ -0,0 +1,216 @@ +--- +title: Conceptos Básicos +slug: Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +

IndexedDB es una manera de almacenar datos de manera persistente en el navegador. Dado que permite la creación de aplicaciones web con capacidades de consulta mejoradas, éstas pueden funcionar tanto en línea como fuera de línea. IndexedDB es útil para aplicaciones que almacenan una gran cantidad de datos (catálogos de DVDs en una biblioteca, por ejemplo) y para aplicaciones que no necesitan de una conexión permanente a internet para funcionar (clientes de correo, listas de tareas y blocs de notas, por ejemplo).

+ +

Sobre este documento

+ +

Esta introducción discute conceptos y terminologías fundamentales en IndexedDB. Provee una visión general y orienta sobre los conceptos clave. Para aprender más sobre los términos relacionados con IndexedDB, vea la sección de Definiciones.

+ +

Para un tutorial sobre cómo usar la API, vea Usando IndexedDB. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus sub-páginas, que documentan los tipos de objetos utilizados por IndexedDB, así como los métodos de las API síncrona y asíncrona.

+ +

Visión general de IndexedDB

+ +

IndexedDB le permite almacenar y obtener objetos indizados a partir de una "llave". Todos los cambios realizados a la base de datos ocurren dentro de transacciones. Como la mayoría de las soluciones de almacenamiento web, IndexedDB sigue una política de mismo origen, por lo que aún cuando se puede acceder a datos almacenados en un dominio, no se pueden acceder a datos a través de distintos dominios.

+ +

La API incluye una variante asíncrona y una síncrona. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo WebWorkers, mientras la variante síncrona está diseñada para ser utilizada solo con WebWorkers. Actualmente, ninguno de los navegadores principales soportan la API síncrona. Sin embargo, aún cuando la API síncrona sea soportada, en la mayoría de los casos de uso de IndexedDB lo más probable es que se utilice la API asíncrona.

+ +

IndexedDB es una alternativa a WebSQL, que fue marcada como obsoleta por W3C el 18 de Noviembre de 2010. Aún cuando IndexedDB y WebSQL son soluciones para el almacenamiento, éstas no ofrecen las mismas funcionalidades. WebSQL es un sistema relacional de acceso a datos, mientras que IndexedDB es un sistema de tablas indizadas.

+ +

Conceptos principales

+ +

Si usted tiene alguna idea de cómo trabajan otros tipos de bases de datos, podría tener algún conflicto de conceptos al trabajar con IndexedDB. Por esta razón mantenga los siguientes conceptos importantes en mente:

+ + + +

Definiciones

+ +

Esta sección define y explica los términos utilizados en la API de IndexedDB.

+ +

Base de Datos

+ +
+
base de datos
+
Un repositorio de información, típicamente compuesto de uno o más  almacenes de objetos. Cada base de datos debe tener: +
    +
  • Nombre. Identifica la base de datos dentro de un mismo origen y no cambia a lo largo de la existencia de ésta. El nombre puede ser cualquier cadena de caracteres (incluyendo una vacía).
    • +
  • +

    Versión actual. Cuando una base de datos se crea por primera vez, la versión es el número entero 1 si no se indica otra cosa. Cada base de datos puede tener una y sólo una versión en cualquier momento.

    +
    • +
+
+
almacén de objetos
+
+

El mecanismo a través del cual los datos son almacenados en la base de datos. El almacén de objetos mantiene registros de manera persistente, que son pares de llave-valor. Los registros dentro de un almacén de objetos son ordenados de acuerdo con las llaves en orden ascendente.

+ +

Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un generador de llaves y una ruta de llaves. Si el almacén tiene una ruta de llaves, éste utiliza llaves en línea; si no, utiliza llaves fuera de línea.

+ +

Para documentación de referencia sobre los almacenes de objetos, vew IDBObjectStore o IDBObjectStoreSync.

+
+
versión
+
Cuando una base de datos es creada por primera vez, su versión es 1. Cada base de datos tiene una versión en cualquier momento y no puede tener varias versiones al mismo tiempo. La única manera de cambiar la versión es abrir la base de datos con una versión mayor a la actual. Esto arranca una transacción versionchange y dispara el evento upgradeneeded. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.
+
Nota: Esta definición describe la especificación más actual, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método IDBDatabase.setVersion(), que ya ha sido marcado obsoleto y removido.
+
conexión a la base de datos
+
Una operación creada al abrir una base de datos. Una base de datos puede tener múltiples conexiónes al mismo tiempo.
+
transacción
+
+

Un conjunto atómico y durable de operaciónes de acceso y modificación de datos sobre una base de datos particular. Esta es la manera cómo se interactúa con los datos de una base de datos. De hecho, cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.

+ +

Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan ámbitos que se solapen. El ámbito de las transacciones, que es definido al momento en que éstas son creadas, determina con qué almacenes de datos puede interactuar ésta y permanece constante a lo largo de su existencia. Así, por ejemplo, si una conexión tiene una transacción escribiendo con un ámbito que abarca solo el almacén flyingMonkey, se puede iniciar una segunda que tenga como ámbito los almacenes unicornCentaur y unicornPegasus. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.

+ +

Se espera que las transacciones tengan una existencia corta, de manera que el navegador puede cancelar una transacción que tome demasiado tiempo para liberar recursos que la misma tenga bloqueados. Usted puede abortar la transacción, lo que deshace los cambios hechos a la base de datos durante la misma. Ni siquiera es necesario esperar a que la transacción inicie para abortarla.

+ +

Los tres modos de transacción son: readwrite, readonly, y versionchange. La única manera de crear y borrar almacenes es usar una transacción versionchange. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de IndexedDB.

+ +

Debido a que todo sucede dentro de una transacción, este es un concepto muy importante. Para aprender más sobre las transacciones, especialmente sobre como se relacionan con el versionado, vea IDBTransaction, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea IDBTransactionSync.

+
+
solicitud
+
La operación por medio de la cual se lee o se escribe en una base de datos. Toda solicitud representa una y solo una operación de lectura o escritura.
+
índice
+
+

Un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado. El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado. Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado. Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.

+ +

Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.

+ +

Para aprender más sobre el uso de los índices, vea Usando IndexedDB. Para documentación de referencia, vea IDBKeyRange.

+
+
+ +

Llave y valor

+ +
+
llave
+
+

Es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos. El almacén puede derivar una llave desde uno de tres orígenes: un generador de llaves, una ruta de llave, y un valor indicado de forma explícita. La llave debe ser de un tipo de datos que tenga un número creciente en relación con los objetos almacenados previamente. Cada registro en un almacén de datos debe tener una llave única en el almacén, de manera que no se pueden tener varios objetos con la misma llave en un almacén de objetos dado.

+ + +

Una llave puede ser de uno de los siguientes tipos: String, Date, float, y Array. Para los arreglos, la llave puede tener un rango desde un valor vacío hasta infinito, y puede incluirse un arreglo dentro de otro. No se requiere usar solo cadenas o enteros para las llaves {{ fx_minversion_inline("11") }}.

+ +

Como alternativa, se pueden realizar búsquedas de objetos usando un índice.

+
+
generador de llaves
+
Es un mecanismo para producir nuevas llaves en una secuencia ordenada. Si un almacén de objetos no tiene un generador de llaves, entonces la aplicación debe proveer llaves para los registros que se almacenen. Los generadores no son compartidos entre almacenes. Esto es un detalle de implementación de los navegadores, porque en desarrollo web, realmente no se crea o se accede a un generador de llaves.
+
llaves en línea
+
Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una  ruta de llave. Una llave en línea puede obtenerse con un generador. Después de que la llave ha sido generada, esta puede almacenarse en el valor usando la ruta del atributo o puede ser usada directamente como llave.
+
llave fuera de línea
+
Una llave que se almacena separada del valor.
+
ruta de llave
+
Define de dónde se debe extraer la llave desde un valor en el almacén o en un índice. Una ruta de llave válida puede incluir alguno de los siguientes: una cadena vacía, un identificador de JavaScript, o múltiples identificadores de JavaScript separados con puntos. No puede incluir espacios.
+
valor
+
+

Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: booleanos, números, cadenas, fechas, objetos, arreglos, expresiones regulares, undefined, y null.

+ +

Cuando un objeto o un arreglo es almacenado, las propiedades y valores en ese objeto o arreglo pueden ser cualquier cosa que sea un valor válido.

+ +

Se pueden almacenar Blobs y archivos. cf. especificación {{ fx_minversion_inline("11") }}.

+
+
+ +

Rango y ámbito

+ +
+
ámbito
+
El conjunto de almacenes de objetos e índices en los que una transacción aplica. Los ámbitos de varias transacciones de solo lectura pueden solaparse y ejecutarse al mismo tiempo. En cambio, los ámbitos de transacciones de escritura no pueden solaparse. Aún así se pueden crear varias transacciones con el mismo ámbito al mismo tiempo, pero éstas serán manejadas por una cola y ejecutadas una detrás de otra.
+
cursor
+
Un mecanismo para iterar a través de múltiples registros con un rango de llaves. El cursor tiene un orígen que indica que índice o almacén de datos está iterando. El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro. Para obtener documentación de referencia sobre cursores, vea IDBCursor o IDBCursorSync.
+
rango de llaves
+
+

Un intervalo continuo sobre algún tipo de datos utilizado para las llaves. Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves. Los rangos pueden limitarse o filtrarse con umbrales inferiores y superiores. Por ejemplo, se puede iterar sobre todos los valores de una llave desde x hasta y.

+ +

Para documentación de referencia sobre los rangos de llaves, vea IDBKeyRange.

+
+
+ +

Limitaciones

+ +

IndexedDB está diseñado para cubrir la mayoría de los casos en los que se necesita almacenamiento del lado del cliente. Sin embargo, no están contemplados en su diseño unos pocos casos como los siguientes:

+ + + +

Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:

+ + + +

Las circunstancias exactas y capacidades de los navegadores cambian con el tiempo, pero la filosofía de los navegadores es, en general, hacer lo posible por conservar los datos.

+ +
+

Advertencia: Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un Web App. Esto requiere mayor investigación para documentarlo.

+
+ +

Próximo paso

+ +

Ok, ahora con estos conceptos generales bajo nuestros cinturones, podemos seguir a cosas más concretas. Para un tutorial sobre como utilizar la API, vea Usando IndexedDB.

+ +

Vea también

+ +

Especificación

+ + + +

Referencia

+ + + +

Tutoriales

+ + + +

Artículo relacionado

+ + diff --git a/files/es/web/api/indexeddb_api/index.html b/files/es/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..6ac53d75fe --- /dev/null +++ b/files/es/web/api/indexeddb_api/index.html @@ -0,0 +1,144 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +translation_of: Web/API/IndexedDB_API +--- +

{{ SeeCompatTable() }}

+ +

IndexedDB es una API de bajo nivel que ofrece almacenamiento en el cliente de cantidades significativas de datos estructurados, incluyendo archivos y blobs. Para búsquedas de alto rendimiento en esos datos usa índices. Mientras DOM Storage es útil para el almacenamiento de pequeñas cantidades de datos, no es útil para almacenar grandes cantidades de datos estructurados. IndexedDB proporciona una solución.

+ +

Esta página es básicamente el punto de entrada para la descripción técnica de los objetos de la API. Si necesita algo elemental, debería consultar ;Conceptos básicos acerca de IndexedDB. Para más detalles, vea Usando IndexedDB.

+ +

IndexedDB provee APIs separados para un acceso síncrono o asíncrono. El API síncrono está destinado a ser usado únicamente dentro de Web Workers, pero no será implementado aún por cualquier navegador. El API asíncrono trabaja con o sin Web Workers.

+ +

API Asíncrono

+ +

Los métodos del API Asíncrono, retornan sin bloquear el hilo de llamada. Para obtener un acceso asíncrono a la base de datos, use open() en el atributo indexedDB de un objeto window. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); operaciones asíncronas se comunicarán con la aplicación que llama, disparando eventos en los objetos IDBRequest.

+ +
+

Nota: El objeto indexedDB se prefija en las versiones antiguas de los navegadores (propiedad mozIndexedDB para Gecko < 16, webkitIndexedDB en Chrome, y msIndexedDB en IE 10).

+
+ + + +

Una versión anterior de la especificación también define estas -ahora removidas- interfaces. Éstas son documentadas todavía, en caso de que necesite actualizar código escrito previamente:

+ + + +

Hay también una versión sincrónica de la API. La API síncrona no ha sido implementada en cualquier navegador. Está destinada a ser usada con WebWorkers.

+ +

Límites de almacenamiento

+ +

No existe un límite de tamaño para un elemento simple de la base de datos. Sin embargo, puede haber un límite en el tamaño de cada base de datos IndexedDB. Este límite (y la forma en que la interfaz de usuario la hace valer) puede variar de una navegador a otro:

+ + + +

Ejemplo

+ +

Un claro ejemplo para lo que IndexedDB puede ser utilizado en la web, es el ejemplo de Marco Castelluccio, ganador del DevDerby IndexedDB Mozilla. La demostración ganadora fue eLibri, una biblioteca y una aplicación de lectura de libros electrónicos.

+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
API asíncrono +

24.0
+ 11.0 {{ property_prefix("webkit") }}

+ 		+

{{ CompatGeckoDesktop("16.0") }}
+ {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}

+ 		10 {{ property_prefix("ms") }}{{ CompatNo() }}{{ CompatNo() }}
API síncrono
+ (usado por WebWorkers)		{{ CompatNo() }}{{ CompatNo() }}
+ Vea {{ bug(701634) }}		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
API síncrono{{ CompatNo() }}{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Para otra matriz de compatibilidad, vea también: Cuándo puedo usar IndexedDB

+ +

También existe la posibilidad de usar IndexedDB en navegadores que soportan WebSQL por el uso de IndexedDB Polyfill.

+ +

Ver también

+ + diff --git a/files/es/web/api/indexeddb_api/usando_indexeddb/index.html b/files/es/web/api/indexeddb_api/usando_indexeddb/index.html new file mode 100644 index 0000000000..ea9d2d879c --- /dev/null +++ b/files/es/web/api/indexeddb_api/usando_indexeddb/index.html @@ -0,0 +1,1308 @@ +--- +title: Usando IndexedDB +slug: Web/API/IndexedDB_API/Usando_IndexedDB +tags: + - API + - Almacenamiento + - Avanzado + - Base de datos + - Guía + - IndexedDB + - Tutorial + - jsstore +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +
+

IndexedDB es una manera de almacenar datos dentro del navegador del usuario. Debido a que permite la creación de aplicaciones con habilidades de consulta enriquecidas, con independencia de la disponibilidad de la red, sus aplicaciones pueden trabajar tanto en línea como fuera de línea.

+
+ +

Acerca de este documento

+ +

Este tutorial es una guía sobre el uso de la API asíncrona de IndexedDB. Si no está familiarizado con IndexedDB, por favor consulte primero Conceptos Básicos Acerca de IndexedDB.

+ +

Para la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus subpaginas, que documentan los tipos de objetos usados por IndexedDB, así como los métodos síncronos y asíncronos. 

+ +

Patrones Básicos

+ +

El patrón básico que indexedDB propone es:

+ +
    +
  1. Abrir una base de datos.
    2. +
  2. Crear un objeto de almacenamiento en la base de datos.
    3. +
  3. Iniciar una transacción y hacer una petición para hacer alguna operación de la base de datos, tal como añadir o recuperar datos.
    4. +
  4. +
    Espere a que se complete la operación por la escucha de la clase correcta de eventos DOM .
    +
    5. +
  5. +
    Hacer algo con el resultado (El cual puede ser encontrado en el objeto de la petición).
    +
    6. +
+ +

Con esos grandes rasgos en mente, seremos más concretos.

+ +

Creando y estructurando el almacenamiento

+ +

Como las especificaciones están todavía elaborandose, las implementaciones actuales de indexedDB dependen de los navegadores. Hasta que la especificación se haya consolidado, los proveedores de navegadores pueden tener diferentes implementaciones de los estandares de indexedDB. Una vez se alcance el consenso en el estandar, los proveedores implementarán la API sin prefijos. En algunas implementaciones ya fueron removidos los prefijos: Internet Explorer 10, Firefox 16, Chrome 24. Cuando utilizan un prefijo, los navegadores basados en gecko usan el prefijo moz , mientras que los navegadores basados en WebKit usan el prefijo webkit.

+ +

Usando una versión experimental de IndexedDB

+ +

En caso que usted quiera probar su código en navegadores que todavía usen un prefijo, puede usar el siguiente codigo:  

+ +
// En la siguiente línea, puede incluir prefijos de implementación que quiera probar.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// No use "var indexedDB = ..." Si no está en una función.
+// Por otra parte, puedes necesitar referencias a algun objeto window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla nunca ha prefijado estos objetos, por lo tanto no necesitamos window.mozIDB*)
+ +

Hay que tener cuidado con las implementaciones que usan un prefijo ya que puede ser inestables, incompletas, o usen una versión antigua de la especificación. En producción se recomienda usar el código sin prefijos. Es preferible no tener soporte para un navegador a decir que lo tiene y fallar en ello :

+ +
if (!window.indexedDB) {
+    window.alert("Su navegador no soporta una versión estable de indexedDB. Tal y como las características no serán validas");
+}
+
+ +

Abriendo una base de datos

+ +

Iniciamos todo el proceso así:

+ +
// dejamos abierta nuestra base de datos
+var request = window.indexedDB.open("MyTestDatabase", 3);
+
+ +

¿Lo has visto? Abrir una base de datos es igual que cualquier otra operación — solo tienes que "solicitarla" (request).

+ +

La solicitud de apertura no abre la base de datos o inicia la transacción de inmediato. La llamada a la función open() retornan unos objetos IDBOpenDBRequest, cuyo resultado, correcto o erróneo, se maneja en un evento.  Alguna otra función asincrónica en indexedDB hace lo mismo - Devolver un objeto IDBRequest que disparará un evento con el resultado o el error. El resultado para la función de abrir es una instancia de un IDBDatabase.

+ +

El segundo parámetro para el método open es la versión de la base de datos. La versión de la base de datos determina el esquema - El almacen de objectos en la base de datos y su estructura. Si la base de datos no existe, es creada y se dispara un evento onupgradeneeded de inmediato, permitiéndote proveer una actualización de la estructura e índices en la función que capture dicho evento. Se verá más adelante en  Actualizando la versión de la base de datos. 

+ +
+

Importante: El número de versión es un unsigned long. Por lo tanto significa que puede ser un entero muy grande. También significa que si usas un flotante será convertido en un entero más cercano y la transacción puede no ser iniciada, el evento upgradeneeded no se desencadenará. Por ejemplo no use 2.4 como un número de versión ya que será igual que la 2:

+ +
var request = indexedDB.open("MyTestDatabase", 2.4); // Esto no se hace, la versión será redondeada a 2
+
+ +

Generando manipuladores

+ +

La primera cosa que usted querrá hacer con la totalidad de las peticiones que usted genera es agregar controladores de éxito y de error:

+ +
request.onerror = function(event) {
+  // Hacer algo con request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Hacer algo con request.result!
+};
+ +

¿Cuál de las dos funciones, onSuccess () o onerror (), se vuelve a llamar? Si todo tiene éxito, un evento de éxito (es decir, un evento DOM cuya propiedad tipo se establece en el "éxito") se dispara con la solicitud como su objetivo. Una vez que se dispara, la función onSuccess () a petición se activa con el evento de éxito como argumento. De lo contrario, si había algún problema, un evento de error (es decir, un evento DOM cuyo tipo de propiedad se establece en "error") se dispara a petición. Esto desencadena la función onerror () con el evento de error como argumento.

+ +

La API IndexedDB está diseñada para minimizar la necesidad de control de errores, por lo que no es probable que veamos muchos eventos de error (al menos, no una vez que estás acostumbrado a la API). En el caso de la apertura de una base de datos, sin embargo, hay algunas condiciones comunes que generan eventos de error. El problema más común se produce cuando el usuario ha decidido no dar, a su aplicación web, el permiso para crear una base de datos. Uno de los principales objetivos de diseño de IndexedDB es permitir que grandes cantidades de datos se almacenen para su uso sin conexión a internet. (Para obtener más información sobre la cantidad de almacenamiento que puede tener para cada navegador, consulte Límites de almacenamiento.)  

+ +

Obviamente, los navegadores no permitirán que alguna red de publicidad o sitio web malicioso pueda contaminar su ordenador, por ello los navegadores utilizan un diálogo para indicar al usuario la primera vez que cualquier aplicación web determinada intente abrir una IndexedDB para el almacenamiento. El usuario puede optar por permitir o denegar el acceso. Además, el almacenamiento IndexedDB en los modos de privacidad navegadores sólo dura en memoria hasta que la sesión de incógnito haya sido cerrada (modo de navegación privada para el modo de Firefox e Incognito para Chrome, pero en Firefox no está implementado a partir de noviembre 2015 por lo que no puede utilizar IndexedDB en Firefox navegación privada en absoluto).

+ +

Ahora, asumiendo que el usuario acepta su solicitud para crear una base de datos, y que ha recibido un evento de éxito para activar la devolución de llamada de éxito; ¿Que sigue? La solicitud aquí se generó con una llamada a indexedDB.open (), por lo request.result es una instancia de IDBDatabase, y que sin duda quieren ahorrar para más adelante. Su código podría ser algo como esto:

+ +
var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Why didn't you allow my web app to use IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Manejando errores

+ +

Como se mencionó anteriormente, los eventos de error de burbujas. Eventos de error se dirigen a la solicitud que generó el error, entonces el evento se propaga a la operación, y finalmente con el objeto de base de datos. Si desea evitar la adición de controladores de errores a cada solicitud, en su lugar puede añadir un solo controlador de errores en el objeto de base de datos, así:

+ +
db.onerror = function(event) {
+  // Generic error handler for all errors targeted at this database's
+  // requests!
+  alert("Database error: " + event.target.errorCode);
+};
+
+ +

Uno de los errores más comunes posibles al abrir una base de datos es VER_ERR. Indica que la versión de la base de datos almacenada en el disco es mayor que la versión que está intentando abrir. Este es un caso de error que siempre debe ser manejado por el gestor de errores.

+ +

Creación o actualización de la versión de la base de datos

+ +

Cuando se crea una nueva base de datos o se aumenta el número de versión de una base de datos existente (mediante la especificación de un número de versión más alto de lo que hizo antes, en {{anch ("Cómo abrir una base de datos")}}), el evento onupgradeneeded se activará y un objeto IDBVersionChangeEvent será pasado a cualquier controlador de eventos onversionchange establecido en request.result (es decir, db en el ejemplo). En el controlador para el evento upgradeneeded, se debe crear los almacenes de objetos necesarios para esta versión de la base de datos:

+ +
// Este evento solamente está implementado en navegadores recientes
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Crea un almacén de objetos (objectStore) para esta base de datos
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

En este caso, la base de datos ya tendrá los almacenes de objetos de la versión anterior de la base de datos, por lo que no tiene que crear estos almacenes de objetos de nuevo. Sólo es necesario crear nuevos almacenes de objetos, o eliminar las tiendas de objetos de la versión anterior que ya no son necesarios. Si necesita cambiar un almacén de objetos existentes (por ejemplo, para cambiar la ruta de acceso clave keyPath), entonces se debe eliminar el antiguo almacén de objetos y crear de nuevo con las nuevas opciones. (Tenga en cuenta que esto borrará la información en el almacén de objetos Si usted necesita guardar esa información, usted debe leerlo y guardarlo en otro lugar antes de actualizar la base de datos.)

+ +

Tratar de crear un almacén de objetos con un nombre que ya existe (o tratando de eliminar un almacén de objetos con un nombre que no existe) lanzará un error.

+ +

Si el evento onupgradeneeded retorna éxito, entonces se activará el manejador onsuccess de la solicitud de base de datos abierta.

+ +

Blink / Webkit soportan la versión actual de la especificación, tal como fue liberado en Chrome 23+ y Opera 17+ ; IE10+ también lo soporta. Implementaciones mas viejas o distintas no implementan la versión actual de la especificación, y por lo tanto no son compatibles todavía con el indexedDB.open (nombre, versión).onupgradeneeded . Para obtener más información sobre cómo actualizar la versión de la base de datos en Webkit/Blink mas viejos, consulte el artículo de referencia IDBDatabase.

+ +

Estructuración de la base de datos

+ +

Ahora para estructurar la base de datos. IndexedDB usa almacenes de datos (object stores) en lugar de tablas, y una base de datos puede contener cualquier número de almacenes. Cuando un valor es almacenado, se le asocia con una clave. Existen diversas maneras en que una clave pude ser indicada dependiendo de si el almacén usa una ruta de clave o generador.

+ +

La siguiente table muetra las distintas formas en que las claves pueden ser indicadas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ruta de clave(keyPath)Generador de clave (autoIncrement)Descripción
NoNoEste almacén puede contener cualquier tipo de valor, incluso valores primitivos como números y cadenas. Se debe indicar un argumento de clave distinto cada vez que se agregue un nuevo valor.
SiNoEste almacén de objetos solo puede contener objetos de JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de clave.
NoSiEste objeto puede contener cualquier tipo de valor. La clave es generada automáticamente, o se puede indicar un argumento de clave distinto si se quiere usar una clave específica.
SiSi +

Este almacén de objetos solo puede contener objetos de JavaScript. Usualmente una clave es generada y dicho valor es almacenado en el objeto en una propiedad con el mismo nombre que la ruta de clave. Sin embargo, si dicha propiedad ya existe en el objeto, el valor de esa propuiedad es usado como clave en lugar de generar una nueva.

+
+ +

También se puede crear índices en cualquer almacén de objetos, siempre y cuando el almacén contenga objets, y no primitivos. Un índice permite buscar valores contenidos en el almacén usando el valor de una propiedad del objeto almacenado, en lugar de la clave del mismo.

+ +

Adicionalmente, los índices tienen la habilidad para hacer cumplir restricciones simples en los datos almacendos. Al indicar la bandera unique al crear el índice, el índice asegurará que no se puedan almacenar dos objetos que tengan el mismo valor para la clave del índice. Así, por ejemplo si se tiene un almacén de objetos que contiene un set de personas, y se desea asegurar que no existan dos personas con el mismo email, se puede usar un índice con la bandera unique activada para forzar esto.

+ +

Esto puede sonar confuso, pero un ejemplo simple debe ilustrar el concepto. Primero, definiremos alguna información de clientes para usar en nuestro ejemplo:

+ +
// Así se ve nuestra información de clientes.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+
+ +

Ahora, creemos una IndexedDB para almacenar los datos:

+ +
const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Manejar errores.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Se crea un almacén para contener la información de nuestros cliente
+  // Se usará "ssn" como clave ya que es garantizado que es única
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Se crea un índice para buscar clientes por nombre. Se podrían tener duplicados
+  // por lo que no se puede usar un índice único.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Se crea un índice para buscar clientespor email. Se quiere asegurar que
+  // no puedan haberdos clientes con el mismo email, asi que se usa un índice único.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Se usa transaction.oncomplete para asegurarse que la creación del almacén
+  // haya finalizado antes de añadir los datos en el.
+  objectStore.transaction.oncomplete = function(event) {
+    // Guarda los datos en el almacén recién creado.
+    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
+    for (var i in customerData) {
+      customerObjectStore.add(customerData[i]);
+    }
+  }
+};
+
+ +

Como se indicó previamente, onupgradeneeded es el único lugar donde se puede alterar la estructura de la base de datos. En el, se puede crear y borrar almacenes de objetos y construir y remover índices.

+ +
Los almacenes de datos son creados con una llamada a  createObjectStore(). El método toma como parámetros el nombre del almacén y un objeto.  A pesar de que el segundo parámetro es opcional, es muy importante, porque permite definir propiedades opcionales importantes y refinar el tipo de almacén que se desea crear. En este caso, se pregunta por un almacén llamado "customers" y se define la clave, que es la propiedad que indica que un objeto en el almacén es único. La propiedad en este ejemplo es "ssn" (Social Security Number) ya que los números de seguridad social está garantizado que sea único. "ssn" debe estar presente en cada objeto que se guarda al almacén.
+ +

También se solicitó crear un índice llamado "name" que se fija en la propiedad name de los objetos almacenados. Así como con createObjectStore(), createIndex() toma un objeto opcional options que refina el tipo de índice que se desea crear. Agregar objetos que no tengan una propiedad name funcionará, pero los objetos no aparecerán en el índice "name"

+ +
Ahora se pueden obtener los clientes almacenados usando su ssn directamente del almacen, o usando su nombre a través del índice. Para aprender como hacer esto, vea la sección El uso de un índice
+ +

El uso de un generador de claves

+ +

Indicar la bandera autoIncrement  cuando se crea el almacén habilitará el generador de claves para dicho almacén. Por defecto esta bandera no está marcada.

+ +

Con el generador de claves, la clave será generada automáticamente a medida que se agreguen valores al almacén. El número actual de un generador de claves siempre se establece en 1 cuando se creal el almacén por primera vez. Básicamente la nueva clave autogenerada es incrementada en 1 basada en la llave anterior. El numero actual para un generador de claves nunca disminuye, salvo como resultado de operaciones de base de datos  que sean revertidos, por ejemplo, cuando la transacción de base de datos es abortada. Por lo tanto borrar un registro o incluso borrar todos los registros de un almacén nunca afecta al generador de claves

+ +

Se puede crear otro almacén de objetos con generador de claves como se muestra abajo:

+ +
// Abrir la indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Create another object store called "names" with the autoIncrement flag set as true.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
+    // The added records would be like:
+    // key : 1 => value : "Bill"
+    // key : 2 => value : "Donna"
+    for (var i in customerData) {
+        objStore.add(customerData[i].name);
+    }
+}
+ +

Para más detalles acerca del generador de claves, por favor ver "W3C Key Generators".

+ +

Añadir, recuperación y eliminación de datos

+ +

Antes que haga algo con su nueva base de datos , necesita comenzar una transacción. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Once you are inside the transaction, you can access the object stores that hold your data and make your requests. Next, you need to decide if you're going to make changes to the database or if you just need to read from it. Transactions have three available modes: readonly, readwrite, and versionchange.

+ +

To change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in versionchange mode. This transaction is opened by calling the {{domxref("IDBFactory.open")}} method with a version specified. (In WebKit browsers, which have not implemented the latest specifcation, the {{domxref("IDBFactory.open")}} method takes only one parameter, the name of the database; then you must call {{domxref("IDBVersionChangeRequest.setVersion")}} to establish the versionchange transaction.)

+ +

To read the records of an existing object store, the transaction can either be in readonly or readwrite mode. To make changes to an existing object store, the transaction must be in readwrite mode. You open such transactions with {{domxref("IDBDatabase.transaction")}}. The method accepts two parameters: the storeNames (the scope, defined as an array of object stores that you want to access) and the mode (readonly or readwrite) for the transaction. The method returns a transaction object containing the {{domxref("IDBIndex.objectStore")}} method, which you can use to access your object store. By default, where no mode is specified, transactions open in readonly mode.

+ +

You can speed up data access by using the right scope and mode in the transaction. Here are a couple of tips:

+ + + +

Agregar datos a la base de datos

+ +

If you've just created a database, then you probably want to write to it. Here's what that looks like:

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

+ +

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

+ +

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by first calling preventDefault() on the error event then doing something else, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine-grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aid your sanity.

+ +

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

+ +
// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, you can use the put() function, as shown below in the {{ anch("Updating an entry in the database") }} section.

+ +

Extracción de datos de la base de datos

+ +

Removing data is very similar:

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};
+ +

Obtener datos de la base de datos

+ +

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property.

+ +
+

Note: You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:

+ + +
+ +

Actualización de una entrada en la base de datos

+ +

Now we've retrieved some data, updating it and inserting it back into the IndexedDB is pretty simple. Let's update the previous example somewhat:

+ +
var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Get the old value that we want to update
+  var data = request.result;
+
+  // update the value(s) in the object that you want to change
+  data.age = 42;
+
+  // Put this updated object back into the database.
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Do something with the error
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Success - the data is updated!
+   };
+};
+ +

So here we're creating an objectStore and requesting a customer record out of it, identified by its ssn value (444-44-4444). We then put the result of that request in a variable (data), update the age property of this object, then create a second request (requestUpdate) to put the customer record back into the objectStore, overwriting the previous value.

+ +
+

Note that in this case we've had to specify a readwrite transaction because we want to write to the database, not just read out of it.

+
+ +

El uso de un cursor

+ +

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

+ +

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
+

Note: Mozilla has also implemented getAll() to handle this case (and getAllKeys(), which is currently hidden behind the dom.indexedDB.experimental preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll() for example, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

+
+ +

El uso de un índice

+ +

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, and outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

+ +
var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

+ +

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

+ +
// Using a normal cursor to grab whole customer record objects
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Using a key cursor to grab customer record object keys
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Especificación de la gama y la dirección de los cursores

+ +

If you would like to limit the range of values you see in a cursor, you can use an IDBKeyRange object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one that has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value(s)) or "open" (i.e., the key range does not include the given value(s)). Here's how it works:

+ +
// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};
+ +

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function as the second argument:

+ +
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:

+ +
objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

+ +
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Please see "IDBCursor Constants" for the valid direction arguments.

+ +

Cambios Versión mientras que una aplicación web está abierto en otra pestaña

+ +

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until tey are closed or reloaded). Here's how it works:

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user closes the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+
+ +

Seguridad

+ +

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

+ +

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of third-party cookies. For more details, see {{ bug(595307) }}.

+ +

Warning About Browser Shutdown

+ +

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted — they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

+ +

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction. 

+ +

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

+ +

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

+ +

Full IndexedDB example

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Next step

+ +

If you want to start tinkering with the API, jump in to the reference documentation and check out the different methods.

+ +

See also

+ +

Reference

+ + + +

Tutorials

+ + + +

Related articles

+ + + +

Firefox

+ + diff --git a/files/es/web/api/intersection_observer_api/index.html b/files/es/web/api/intersection_observer_api/index.html new file mode 100644 index 0000000000..d96bb02280 --- /dev/null +++ b/files/es/web/api/intersection_observer_api/index.html @@ -0,0 +1,638 @@ +--- +title: Intersection Observer API +slug: Web/API/Intersection_Observer_API +translation_of: Web/API/Intersection_Observer_API +--- +

{{DefaultAPISidebar("Intersection Observer API")}}

+ +
+ +

La API Observador de Intersección provee una vía asíncrona para observar cambios en la intersección de un elemento con un elemento ancestro o con el {{Glossary("viewport")}} del documento de nivel superior.

+ +

Históricamente, detectar la visibilidad de un elemento, o la visibilidad relativa de dos elementos, uno respecto del otro, ha sido una tarea difícil para la cual las soluciones no han sido muy fiables y propensas a causar que el navegador y los sitios a los que el usuario accede lleguen a ser lentos. A medida que la web ha madurado, la necesidad para este tipo de información ha ido en aumento. La información sobre intersección es necesaria por muchas razones, tales como:

+ + + +

Implementar la detección de intersecciones en el pasado implicaba manejadores de eventos y bucles llamando a métodos como {{domxref("Element.getBoundingClientRect()")}} para reunir la información necesaria para cada elemento afectado. Dado que todo este código corre sobre el hilo principal, incluso uno de estos puede causar problemas de rendimiento. Cuando un sitio es cargado con estos tests, las cosas pueden ponerse muy feas.

+ +

Considere una página web que usa scroll infinito. Usa una librería de terceros para manejar los anuncios situados periódicamente en la página, que tiene gráficos animados aquí y allá, y usa una librería personalizada que muestra cajas de notificación y similares. Cada uno de estos tiene sus propias rutinas de detección de intersecciones, todas corriendo en el hilo principal. El autor del sitio web puede no darse cuenta de que esto está pasando, ya que están usando dos librerías de las que quizás conocen muy poco acerca de su funcionamiento interno. A medida que el usuario desplaza la página, estas rutinas de detección de intersecciones están disparando código constantemente durante el scroll, lo que resulta en una experiencia que deja al usuario frustrado con el navegador, el sitio web y su ordenador.

+ +

El API Intersection Observer deja al código registrar una función callback que se ejecuta si un elemento que se desea monitorizar entra o sale de otro elemento (o del {{Glossary("viewport")}}), o cuando la cantidad por la que ambos elementos se intersecan cambia en una cantidad requerida. De esta manera, los sitios no necesitan hacer nada sobre el hilo principal para mirar este tipo de intersección entre elementos, y el navegador está libre para optimizar la gestión de intersecciones como le parezca conveniente.

+ +

Una cosa que el API Intersection Observer no puede decirle es: el número exacto de pixels que se solapan o específicamente cuales son; sin embargo, cubre el caso de uso mucho más común de "Si se intersecan por algún lugar alrededor del N%, necesito hacer algo."

+ +

Intersection observer conceptos y uso

+ +

La API Intersection Observer le permite configurar una función callback que es llamada cuando alguna de las siguientes circunstancias ocurren:

+ + + +

Típicamente, usted querrá observar los cambios en las intersecciones con respecto al ancestro scrollable más cercano al elemento, o, si el elemento no desciende de un ancestro scrollable, al viewport.
+ Para observar la intersección relativa al elemento root, especifique null;

+ +

Tanto si está usted usando el viewport o algún otro elemento como root, el API funciona de la misma manera, ejecutando una función callback que usted le proporciona cuando la visibilidad del elemento target cambia al cruzar en la cantidad de intersección deseada con el elemento root.

+ +

El grado de intersección entre el elemento target y su elemento root es el intersection ratio. Esto es una representación del porcentaje del elemento target que es visible, indicado como un valor entre 0.0 y 1.0.

+ +

Creando un intersection observer

+ +

Cree el intersection observer llamando a su constructor y pasándole una función callback para que se ejecute cuando se cruce un umbral (threshold) en una u otra dirección:

+ +
let options = {
+  root: document.querySelector('#scrollArea'),
+  rootMargin: '0px',
+  threshold: 1.0
+}
+
+let observer = new IntersectionObserver(callback, options);
+ +

Un umbral de 1.0 significa que cuando el 100% del elemento target está visible dentro del elemento especificado por la opción root, la función callback es invocada.

+ +

Opciones de Intersection observer

+ +

El objeto options pasado al constructor {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} le deja controlar las circunstancias bajo las cuales la función callback es invocada. Tiene los siguientes campos:

+ +
+
root
+
El elemento que es usado como viewport para comprobar la visibilidad de elemento target. Debe ser ancestro de target. Por defecto es el viewport del navegador si no se especifica o si es null.
+
rootMargin  
+
Margen alrededor del elemeto root. Puede tener valores similares a los de CSS {{cssxref("margin")}} property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). Los valores pueden ser porcentajes. Este conjunto de valores sirve para aumentar o encoger cada lado del cuadro delimitador del elemento root antes de calcular las intersecciones. Por defecto son todos cero.
+
threshold
+
Es un número o un array de números que indican a que porcentaje de visibilidad del elemento target, la función callback del observer debería ser ejecutada. Si usted quiere que se detecte cuando la visibilidad pasa la marca del 50%, debería usar un valor de 0.5. Si quiere ejecutar la función callback cada vez que la visibilidad pase otro 25%, usted debería especificar el array [0, 0.25, 0.5, 0.75, 1]. El valor por defecto es 0 (lo que significa que tan pronto como un píxel sea visible, la función callback será ejecutada). Un valor de 1.0 significa que el umbral no se considera pasado hasta que todos los pixels son visibles.
+
+ +

Determinando un elemento para ser observado

+ +

Una vez usted ha creado el observer, necesita darle un elemento target para observar:

+ +
var target = document.querySelector('#listItem');
+observer.observe(target);
+
+// el callback que indicamos al observador será ejecutado ahora por primera vez
+// espera hasta que le asignemos un target a nuestro observador (aún si el target no está actualmente visible)
+
+ +

Cuando el elemento target encuentra un threshold especificado por el IntersectionObserver, la función callback es invocada. La función callback recibe una lista de objetos {{domxref("IntersectionObserverEntry")}} y el observer:

+ +
var callback = function(entries, observer) {
+  entries.forEach(entry => {
+    // Cada entry describe un cambio en la intersección para
+    // un elemento observado
+    //   entry.boundingClientRect
+    //   entry.intersectionRatio
+    //   entry.intersectionRect
+    //   entry.isIntersecting
+    //   entry.rootBounds
+    //   entry.target
+    //   entry.time
+  });
+};
+
+ +

Asegúrese de que su función callback se ejecute sobre el hilo principal. Debería operar tan rápidamente como sea posible; si alguna cosa necesita  tiempo extra para ser realizada, use {{domxref("Window.requestIdleCallback()")}}.

+ +

También, note que si especifica la opción root, el elemento target debe ser un descendiente del elemento root.

+ +

Cómo se calcula la intersección

+ +

Todas las áreas consideradas por la API de Intersection Observer son rectángulos; los elementos que su forma es irregular se considera que están ocupando el rectángulo más pequeño que encierra todas las partes del elemento. De forma similar, si la porción visible de un elemento no es un rectángulo, entonces el rectángulo de intersección del elemento se interpreta como el rectángulo más pequeño que contiene todas las partes visibles del elemento.

+ +

Es útil entender un poco sobre cómo las diferentes propiedades proporcionadas por {{domxref("IntersectionObserverEntry")}} describe una intersección.

+ +

La intersección entre el elemento root y su margen

+ +

Antes de poder realizar un seguimiento de la intersección de un elemento en un contenedor, necesitamos saber qué cuál es contendor. Este contenedor se le conoce como intersection root, o root element. Este puede ser un elemento del documento, que es ascendiente del elemento observado, o null, que usará el viewport del documento como contenedor.

+ +

El rectángulo usado como los límites de la intersección del intersection root pueden ser ajustados configurando la opción root margin, rootMargin, cuando creamos el {{domxref("IntersectionObserver")}}. Los valores en rootMargin define los espacios añadidos a cada lado del cuadro delimitador que sirve de contenedor, creando los límites definitivos del contenedor, o intersection root (los cuáles están explicados en {{domxref("IntersectionObserverEntry.rootBounds")}} cuando la función callback es ejecutada).

+ +

Umbrales

+ +

En lugar de reportar cada mínimo cambio indicando cómo de visible es el elemento que observamos, la Intersection Observer API usa umbrales. Cuando creamos un observable, puedes proporcionar uno o más valores númericos representando, en porcentaje, cuán visible es el elemento observado. Entonces, la API reporta sólo los cambios de visibilidad que cruza este umbral.

+ +

Por ejemplo, si te gustaría ser informado cada vez que la visibilidad del elemento pasa, hacia delante o hacía atrás, una marca de un 25%, entonces puedes especificar el array [0, 0.25, 0.5, 0.75, 1] como una lista de umbrales a la hora de crear el observable. Puedes saber incluso en qué dirección la visibilidad ha cambiado (esto es, saber si el elemento ha pasado a ser más o menos visible) comprobando el valor de la propiedad {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} disponible en el {{domxref("IntersectionObserverEntry")}} que tienes disponible en la función callback cada vez que la visibilidad cambia. Si isIntersecting es true, el elemento se ha vuelto al menos tan visibile como el umbral que pasó. Si es false, el elemento entonces ha dejado de ser tan visible como el umbral que sobrepasó.

+ +

Para entender cómo funciona el concepto de umbral (threshold), pruebe a hacer scroll en el siguiente ejemplo. Cada caja coloreada muestra dentro de ella el porcentaje que tiene visible de cada una de las cuadro esquinas, de forma que podrá ver cómo cambian los porcentajes conforme va haciendo scroll. Cada caja tiene diferentes valores configurado de umbrales.

+ + + + + +

{{EmbedLiveSample("threshold-example", 500, 500)}}

+ +

Acotamiento y el rectángulo de intersección

+ +

El navegador computa el rectángulo de intersección final de la siguiente forma; la API hace todo esto por usted, pero puede ser útil entender estos pasos para comprender mejor cuando ocurrirán exactamente las intersecciones.

+ +
    +
  1. El rectangulo delimitador del elemento target (el rectangulo mas pequeño, que encierra por completo los componentes que conforman el elemento) es obtenido llamando {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} en el target. Este es el rectangulo de intersección mas grande que puede ser. Los pasos restantes removeran las porciones que no intersectan.
    2. +
  2. Starting at the target's immediate parent block and moving outward, each containing block's clipping (if any) is applied to the intersection rectangle. A block's clipping is determined based on the intersection of the two blocks and the clipping mode (if any) specified by the {{cssxref("overflow")}} property. Setting overflow to anything but visible causes clipping to occur.
    3. +
  3. If one of the containing elements is the root of a nested browsing context (such as the document contained in an {{HTMLElement("iframe")}}, the intersection rectangle is clipped to the containing context's viewport, and recursion upward through the containers continues with the container's containing block. So if the top level of an <iframe> is reached, the intersection rectangle is clipped to the frame's viewport, then the frame's parent element is the next block recursed through toward the intersection root.
    4. +
  4. When recursion upward reaches the intersection root, the resulting rectangle is mapped to the intersection root's coordinate space.
    5. +
  5. The resulting rectangle is then updated by intersecting it with the root intersection rectangle.
    6. +
  6. This rectangle is, finally, mapped to the coordinate space of the target's {{domxref("document")}}.
    7. +
+ +

Callbacks de cambio de intersección

+ +

Cuando la cantidad del elemento target que es visible dentro del elemento root cruza uno de los umbrales de visibilidad, el callback del objeto {{domxref("IntersectionObserver")}} es ejecutado. El callback recibe como input un array de todos los objetos {{domxref("IntersectionObserverEntry")}}, uno por cada umbral que haya sido cruzado, y una referencia al objeto IntersectionObserver mismo.

+ +

Cada entrada en la lista de  umbrales es un objeto {{domxref("IntersectionObserverEntry")}} que describe un umbral que ha sido cruzado; esto es, cada entrada describe qué porción de un elemento dado se está intersectando con el elemento root, sea que el elemento se considere en intersección o no, y la dirección en la cual ocurrió la transición.

+ +

The code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%. For a threshold value of 0.0 (default) the callback is called approximately upon transition of the boolean value of {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}}. The snippet thus first checks that the transition is a positive one, then determines whether {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is above 75%, in which case it increments the counter.

+ +
intersectionCallback(entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      let elem = entry.target;
+
+      if (entry.intersectionRatio >= 0.75) {
+        intersectionCounter++;
+      }
+    }
+  });
+}
+
+ +

Interfaces

+ +
+
{{domxref("IntersectionObserver")}}
+
The primary interface for the Intersection Observer API. Provides methods for creating and managing an observer which can watch any number of target elements for the same intersection configuration. Each observer can asynchronously observe changes in the intersection between one or more target elements and a shared ancestor element or with their top-level {{domxref("Document")}}'s {{Glossary('viewport')}}. The ancestor or viewport is referred to as the root.
+
{{domxref("IntersectionObserverEntry")}}
+
Describes the intersection between the target element and its root container at a specific moment of transition. Objects of this type can only be obtained in two ways: as an input to your IntersectionObserver callback, or by calling {{domxref("IntersectionObserver.takeRecords()")}}.
+
+ +

Un ejemplo sencillo

+ +

Este ejemplo causa que el elemento que queremos observar cambia de color y transparencia conforme se va haciendo más o menos visible. En la página Timing element visibility with the Intersection Observer API, puedes encontrar un ejemplo más extenso que muestra cómo calcular cuanto tiempo que una serie de elementos, como anuncios, son visibles para el usuario y reaccionar a esa información guardando estadísticas.

+ +

HTML

+ +

El HTML para este ejemplo es muy simple, con un elemento primario que será la caja que querremos observar (con la creativa ID de "box") y algo de contenido para dentro de la caja.

+ +
<div id="box">
+  <div class="vertical">
+    Welcome to <strong>The Box!</strong>
+  </div>
+</div>
+ +

CSS

+ +

El CSS del ejemplo no es muy importante para el propósito de este ejemplo: pinta el elemento y establece que los atributos {{cssxref("background-color")}} y {{cssxref("border")}} puedan participar en las CSS transitions, los cuáles usaremos para afectar los cambios al elemento conforme este es más o menos visible.

+ +
#box {
+  background-color: rgba(40, 40, 190, 255);
+  border: 4px solid rgb(20, 20, 120);
+  transition: background-color 1s, border 1s;
+  width: 350px;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.vertical {
+  color: white;
+  font: 32px "Arial";
+}
+
+.extra {
+  width: 350px;
+  height: 350px;
+  margin-top: 10px;
+  border: 4px solid rgb(20, 20, 120);
+  text-align: center;
+  padding: 20px;
+}
+ +

JavaScript

+ +

Finalmente, vamos a mirar el código JavaScript que usa la API Intersection Observer API para hacer que las cosas ocurran.

+ +

Preparación

+ +

Primero, necesitamos preparar algunas variables e instalar el observador.

+ +
var numSteps = 20.0;
+
+var boxElement;
+var prevRatio = 0.0;
+var increasingColor = "rgba(40, 40, 190, ratio)";
+var decreasingColor = "rgba(190, 40, 40, ratio)";
+
+// Set things up.
+
+window.addEventListener("load", function(event) {
+  boxElement = document.querySelector("#box");
+
+  createObserver();
+}, false);
+ +

Las constantes y variables que establecimos aquí son:

+ +
+
numSteps
+
A constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0.
+
prevRatio
+
This variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible.
+
increasingColor
+
A string defining a color we'll apply to the target element when the visibility ratio is increasing. The word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured.
+
decreasingColor
+
Similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing.
+
+ +

We call {{domxref("EventTarget.addEventListener", "Window.addEventListener()")}} to start listening for the {{event("load")}} event; once the page has finished loading, we get a reference to the element with the ID "box" using {{domxref("Document.querySelector", "querySelector()")}}, then call the createObserver() method we'll create in a moment to handle building and installing the intersection observer.

+ +

Creating the intersection observer

+ +

The createObserver() method is called once page load is complete to handle actually creating the new {{domxref("IntersectionObserver")}} and starting the process of observing the target element.

+ +
function createObserver() {
+  var observer;
+
+  var options = {
+    root: null,
+    rootMargin: "0px",
+    threshold: buildThresholdList()
+  };
+
+  observer = new IntersectionObserver(handleIntersect, options);
+  observer.observe(boxElement);
+}
+ +

This begins by setting up an options object containing the settings for the observer. We want to watch for changes in visibility of the target element relative to the document's viewport, so root is null. We need no margin, so the margin offset, rootMargin, is specified as "0px". This causes the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space.

+ +

The list of visibility ratio thresholds, threshold, is constructed by the function buildThresholdList(). The threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjustable.

+ +

Once options is ready, we create the new observer, calling the {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} constructor, specifying a function to be called when intersection crosses one of our thresholds, handleIntersect(), and our set of options. We then call {{domxref("IntersectionObserver.observe", "observe()")}} on the returned observer, passing into it the desired target element.

+ +

We could opt to monitor multiple elements for visibility intersection changes with respect to the viewport by calling observer.observe() for each of those elements, if we wanted to do so.

+ +

Building the array of threshold ratios

+ +

The buildThresholdList() function, which builds the list of thresholds, looks like this:

+ +
function buildThresholdList() {
+  var thresholds = [];
+
+  for (var i=1.0; i<=numSteps; i++) {
+    var ratio = i/numSteps;
+    thresholds.push(ratio);
+  }
+
+  thresholds.push(0);
+  return thresholds;
+}
+ +

This builds the array of thresholds—each of which is a ratio between 0.0 and 1.0, by pushing the value i/numSteps onto the thresholds array for each integer i between 1 and numSteps. It also pushes 0 to include that value. The result, given the default value of numSteps (20), is the following list of thresholds:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#Ratio#Ratio
10.05110.55
20.1120.6
30.15130.65
40.2140.7
50.25150.75
60.3160.8
70.35170.85
80.4180.9
90.45190.95
100.5201.0
+ +

We could, of course, hard-code the array of thresholds into our code, and often that's what you'll end up doing. But this example leaves room for adding configuration controls to adjust the granularity, for example.

+ +

Handling intersection changes

+ +

When the browser detects that the target element (in our case, the one with the ID "box") has been unveiled or obscured such that its visibility ratio crosses one of the thresholds in our list, it calls our handler function, handleIntersect():

+ +
function handleIntersect(entries, observer) {
+  entries.forEach(function(entry) {
+    if (entry.intersectionRatio > prevRatio) {
+      entry.target.style.backgroundColor = increasingColor.replace("ratio", entry.intersectionRatio);
+    } else {
+      entry.target.style.backgroundColor = decreasingColor.replace("ratio", entry.intersectionRatio);
+    }
+
+    prevRatio = entry.intersectionRatio;
+  });
+}
+ +

For each {{domxref("IntersectionObserverEntry")}} in the list entries, we look to see if the entry's {{domxref("IntersectionObserverEntry.intersectionRatio", "intersectionRatio")}} is going up; if it is, we set the target's {{cssxref("background-color")}} to the string in increasingColor (remember, it's "rgba(40, 40, 190, ratio)"), replaces the word "ratio" with the entry's intersectionRatio. The result: not only does the color get changed, but the transparency of the target element changes, too; as the intersection ratio goes down, the background color's alpha value goes down with it, resulting in an element that's more transparent.

+ +

Similarly, if the intersectionRatio is going up, we use the string decreasingColor and replace the word "ratio" in that with the intersectionRatio before setting the target element's background-color.

+ +

Finally, in order to track whether the intersection ratio is going up or down, we remember the current ratio in the variable prevRatio.

+ +

Resultado

+ +

Abajo se encuentra el contenido resultante. Desplace ésta página hacia arriba y abajo y note como la apariencia de la caja cambia mientras lo hace.

+ +

{{EmbedLiveSample('A_simple_example', 400, 400)}}

+ +

Hay un ejemplo aún más extensivo en Cronometrando la visibilidad de un elemento con la API Intersection Observer.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('IntersectionObserver')}}{{Spec2('IntersectionObserver')}}
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(51)}}15{{CompatGeckoDesktop(55)}}[1][2]{{CompatNo}}{{CompatOpera(38)}}{{WebKitBug(159475)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(51)}}{{CompatChrome(51)}}{{CompatGeckoMobile(55)}}[1][2]{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(38)}}{{WebKitBug(159475)}}
+
+ +

[1] This feature has been implemented since Gecko 53.0 {{geckoRelease("53.0")}} behind the preference dom.IntersectionObserver.enabled, which was false by default. Enabled by default beginning in Firefox 55. See {{bug(1243846)}}.

+ +

[2] Firefox doesn't currently take the {{cssxref("clip-path")}} of ancestor elements into account when computing the visibility of an element within its root. See {{bug(1319140)}} for the status of this issue.

+ +

Ver también

+ + diff --git a/files/es/web/api/keyboardevent/getmodifierstate/index.html b/files/es/web/api/keyboardevent/getmodifierstate/index.html new file mode 100644 index 0000000000..b44ecc6da3 --- /dev/null +++ b/files/es/web/api/keyboardevent/getmodifierstate/index.html @@ -0,0 +1,253 @@ +--- +title: KeyboardEvent.getModifierState() +slug: Web/API/KeyboardEvent/getModifierState +tags: + - API + - DOM + - KeyboardEvent + - Referencia + - getModifierState + - metodo +translation_of: Web/API/KeyboardEvent/getModifierState +--- +

{{APIRef("DOM Events")}}

+ +

El método KeyboardEvent.getModifierState() retorna true respecto al estado actual de la tecla modificadora especificada si la misma está presionada o bloqueada, en caso contrario devuelve false.

+ +

Sintaxis

+ +
var active = event.getModifierState(keyArg);
+ +

Retorna

+ +

A {{jsxref("Boolean")}}

+ +

Parámetros

+ +
+
keyArg
+
El valor de la tecla modificadora. El valor debe ser uno de los valores {{domxref("KeyboardEvent.key")}} que representan las teclas modificadoras, o el string "Accel" {{deprecated_inline}}, el cual es case-sensitive.
+
+ +

Teclas modificadoras en Internet Explorer

+ +

IE9 usa "Scroll" para "ScrollLock" y "Win" para "OS".

+ +

Teclas modificadoras en Gecko

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
When getModifierState() returns true on Gecko?
 WindowsLinux (GTK)MacAndroid 2.3Android 3.0 or latter
"Alt"Either Alt key or AltGr key pressedAlt key pressed⌥ Option key pressedAlt key or option key pressed
"AltGraph" +

Both Alt and Ctrl keys are pressed, or AltGr key is pressed

+ 		Level 3 Shift key (or Level 5 Shift key {{gecko_minversion_inline("20.0")}}) pressed⌥ Option key pressedNot supported
"CapsLock"During LED for ⇪ Caps Lock turned onNot supportedWhile CapsLock is locked {{gecko_minversion_inline("29.0")}}
"Control"Either Ctrl key or AltGr key pressedCtrl key pressedcontrol key pressedmenu key pressed.Ctrl key, control key or menu key pressed.
"Fn"Not supportedFunction key is pressed, but we're not sure what key makes the modifier state active. Fn key on Mac keyboard doesn't cause this active. {{gecko_minversion_inline("29.0")}}
"FnLock"Not supported
"Hyper"Not supported
"Meta"Not supportedMeta key pressed {{gecko_minversion_inline("17.0")}}⌘ Command key pressedNot supported⊞ Windows Logo key or command key pressed
"NumLock"During LED for Num Lock turned onA key on numpad pressedNot supportedWhile NumLock is locked {{gecko_minversion_inline("29.0")}}
"OS"⊞ Windows Logo key pressedSuper key or Hyper key pressed (typically, mapped to ⊞ Windows Logo key)Not supported
"ScrollLock"During LED for Scroll Lock turned onDuring LED for Scroll Lock turned on, but typically this isn't supported by platformNot supportedWhile ScrollLock is locked {{gecko_minversion_inline("29.0")}}
"Shift"⇧ Shift key pressed
"Super"Not supported
"Symbol"Not supported
"SymbolLock"Not supported
+ + + +

 El modificador virtual "Accel"

+ +
Note: The "Accel" virtual modifier has been effectively deprecated in current drafts of the DOM3 Events specification.
+ +

getModifierState() also accepts a deprecated virtual modifier named "Accel". event.getModifierState("Accel") returns true when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or {{domxref("KeyboardEvent.metaKey")}} is true.

+ +

In old implementations and outdated specifications, it returned true when a modifier which is the typical modifier key for the shortcut key is pressed. For example, on Windows, pressing Ctrl key may make it return true. However, on Mac, pressing ⌘ Command key may make it return true. Note that which modifier key makes it return true depends on platforms, browsers, and user settings. For example, Firefox users can customize this with a pref, "ui.key.accelKey".

+ +

Ejemplo

+ +
// Ignore if following modifier is active.
+if (event.getModifierState("Fn") ||
+    event.getModifierState("Hyper") ||
+    event.getModifierState("OS") ||
+    event.getModifierState("Super") ||
+    event.getModifierState("Win") /* hack for IE */) {
+  return;
+}
+
+// Also ignore if two or more modifiers except Shift are active.
+if (event.getModifierState("Control") +
+    event.getModifierState("Alt") +
+    event.getModifierState("Meta") > 1) {
+  return;
+}
+
+// Handle shortcut key with standard modifier
+if (event.getModifierState("Accel")) {
+  switch (event.key.toLowerCase()) {
+    case "c":
+      if (event.getModifierState("Shift")) {
+        // Handle Accel + Shift + C
+        event.preventDefault(); // consume the key event
+      }
+      break;
+    case "k":
+      if (!event.getModifierState("Shift")) {
+        // Handle Accel + K
+        event.preventDefault(); // consume the key event
+      }
+      break;
+  }
+  return;
+}
+
+// Do somethig different for arrow keys if ScrollLock is locked.
+if ((event.getModifierState("ScrollLock") ||
+       event.getModifierState("Scroll") /* hack for IE */) &&
+    !event.getModifierState("Control") &&
+    !event.getModifierState("Alt") &&
+    !event.getModifierState("Meta")) {
+  switch (event.key) {
+    case "ArrowDown":
+    case "Down": // hack for IE and old Gecko
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowLeft":
+    case "Left": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowRight":
+    case "Right": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+    case "ArrowUp":
+    case "Up": // hack for IE and old Gecko
+      // Do something different if ScrollLock is locked.
+      event.preventDefault(); // consume the key event
+      break;
+  }
+}
+
+ +
+

Although, this example uses .getModifierState() with "Alt", "Control", "Meta" and "Shift", perhaps it's better for you to use altKey, ctrlKey, metaKey and shiftKey because they are shorter and may be faster.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}{{Spec2('DOM3 Events')}}Initial definition (Modifier Keys spec)
+ +

Compatibilidad con Browsers

+ + + +

{{Compat("api.KeyboardEvent.getModifierState")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/keyboardevent/index.html b/files/es/web/api/keyboardevent/index.html new file mode 100644 index 0000000000..bcb27d00b6 --- /dev/null +++ b/files/es/web/api/keyboardevent/index.html @@ -0,0 +1,441 @@ +--- +title: KeyboardEvent +slug: Web/API/KeyboardEvent +tags: + - API +translation_of: Web/API/KeyboardEvent +--- +

{{APIRef("DOM Events")}}

+ +

Los objetos KeyboardEvent describen una interacción del usuario con el teclado. Cada evento describe una tecla; el tipo de evento(keydown, keypress, o keyup) identifica el tipo de acción realizada.

+ +
Nota: El KeyboardEvent solo indica qué está pasando en una tecla. Cuando necesite manejar la entrada de texto, use el evento input de HTML5 en su lugar. Por ejemplo, si el usuario introduce texto desde un sistema de tipo manuscrito como una tableta, los eventos para teclas no podrán ser lanzados.
+ +

Constructor

+ +
+
{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
+
Crea un objeto KeyboardEvent.
+
+ +

Métodos

+ +

Esta interfaz también hereda métodos de sus padres, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.getModifierState()")}}
+
Devuelve un {{jsxref("Boolean")}} indicando si una tecla modificadora, como Alt, Shift, Ctrl, o Meta, fue pulsada cuando el evento fue creado.
+
{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}
+
Inicializa un objeto KeyboardEvent. Este método solo ha sido implementado por Gecko (otros usados {{domxref("KeyboardEvent.initKeyboardEvent()")}}) y nunca más será usado. El modo estándar moderno es usar el constructor {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}
+
Inicializa un objeto KeyboardEvent. Este método nunca fue implementado por Gecko (quien usa {{domxref("KeyboardEvent.initKeyEvent()")}}) y no debe ser utilizado más. El modo estándar moderno es usar el constructor {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.
+
+ +

Propiedades

+ +

Esta interfaz también hereda propiedades de sus padres {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+
Devuelve un {{jsxref("Boolean")}} que será true si la tecla Alt ( Option or ⌥ on OS X) fue activada cuando el evento fue generado.
+
{{domxref("KeyboardEvent.char")}} {{Non-standard_inline()}}{{Deprecated_inline}}{{Readonlyinline}}
+
Devuelve un {{domxref("DOMString")}} representando el valor del carácter de la tecla. Si la tecla corresponde con un carácter imprimible, este valor es una cadena Unicode no vacía que contiene este carácter. Si la tecla no tiene una representación imprimible, esta es una cadena vacía.
+
+
Nota: Si la tecla es usada como una macro que inserta múltiples caracteres, If the key is used as a macro that inserts multiple characters, el valor de este atributo es la cadena completa, no solo el primer carácter.
+ +
Advertencia: Esta propiedad ha sido eliminada de los eventos del DOM de nivel 3. Esta es únicamente soportada en IE.
+
+
{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
+
Returns an unsigned long representing the Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute. In Firefox 26 this returns codes for printable characters. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
+
{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+
Returns a {{domxref("DOMString")}} with the code value of the key represented by the event.
+
{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the Ctrl key was active when the key event was generated.
+
{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the event is fired between after compositionstart and before compositionend.
+
{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+
Returns a {{domxref("DOMString")}} representing the key value of the key represented by the event.
+
{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline()}}{{Readonlyinline}}
+
Returns an unsigned long representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
+
{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+
Returns a {{domxref("DOMString")}} representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn't know the keyboard's locale. +
Note: This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.
+
+
{{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
+
Returns an unsigned long representing the location of the key on the keyboard or other input device.
+
{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the Meta (or Command on OS X) key was active when the key event was generated.
+
{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the key is being held down such that it is automatically repeating.
+
{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+
Returns a {{jsxref("Boolean")}} that is true if the Shift key was active when the key event was generated.
+
{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}
+
Returns an unsigned long representing a system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode. +
Warning: This attribute is deprecated; you should use key instead, if available.
+
+
+ +

Notes

+ +

There are keydown, keypress, and keyup events. For most keys, Gecko dispatches a sequence of key events like this:

+ +
    +
  1. When the key is first depressed, the keydown event is sent.
    2. +
  2. If the key is not a modifier key, the keypress event is sent.
    3. +
  3. When the user releases the key, the keyup event is sent.
    4. +
+ +

Special cases

+ +

Certain keys toggle the state of an LED indicator, such as Caps Lock, Num Lock, and Scroll Lock. On Windows and Linux, these keys dispatch only the keydown and keyup events. Note that on Linux, Firefox 12 and earlier also dispatched the keypress event for these keys.

+ +

On Mac, however, Caps Lock dispatches only the keydown event due to a platform event model limitation. Num Lock had been supported on old MacBook (2007 model and older) but Mac hasn't supported Num Lock feature even on external keyboards in these days. On the old MacBook which has Num Lock key, Num Lock doesn't cause any key events. And Gecko supports Scroll Lock key if an external keyboard which has F14 is connected. However, it generates keypress event. This inconsistent behavior is a bug; see {{bug(602812)}}.

+ +

Auto-repeat handling

+ +

When a key is pressed and held down, it begins to auto-repeat. This results in a sequence of events similar to the following being dispatched:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keydown
    4. +
  4. keypress
    5. +
  5. <<repeating until the user releases the key>>
    6. +
  6. keyup
    7. +
+ +

This is what the DOM Level 3 specification says should happen. There are some caveats, however, as described below.

+ +

Auto-repeat on some GTK environments such as Ubuntu 9.4

+ +

In some GTK-based environments, auto-repeat dispatches a native key-up event automatically during auto-repeat, and there's no way for Gecko to know the difference between a repeated series of keypresses and an auto-repeat. On those platforms, then, an auto-repeat key will generate the following sequence of events:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keyup
    4. +
  4. keydown
    5. +
  5. keypress
    6. +
  6. keyup
    7. +
  7. <<repeating until the user releases the key>>
    8. +
  8. keyup
    9. +
+ +

In these environments, unfortunately, there's no way for web content to tell the difference between auto-repeating keys and keys that are just being pressed repeatedly.

+ +

Auto-repeat handling prior to Gecko 4.0

+ +

Before Gecko 4.0 {{geckoRelease('4.0')}}, keyboard handling was less consistent across platforms.

+ +
+
Windows
+
Auto-repeat behavior is the same as in Gecko 4.0 and later.
+
Mac
+
After the initial keydown event, only keypress events are sent until the keyup event occurs; the inter-spaced keydown events are not sent.
+
Linux
+
The event behavior depends on the specific platform. It will either behave like Windows or Mac depending on what the native event model does.
+
+ +

Example

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+var metaChar = false;
+var exampleKey = 16;
+
+function keyEvent(event) {
+  var key = event.keyCode || event.which;
+  var keychar = String.fromCharCode(key);
+  if (key == exampleKey) {
+    metaChar = true;
+  }
+  if (key != exampleKey) {
+    if (metaChar) {
+      alert("Combination of metaKey + " + keychar);
+      metaChar = false;
+    } else {
+      alert("Key pressed " + key);
+    }
+  }
+}
+
+function metaKeyUp (event) {
+  var key = event.keyCode || event.which;
+
+  if (key == exampleKey) {
+    metaChar = false;
+  }
+}
+</script>
+</head>
+
+<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
+</body>
+</html>
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#interface-KeyboardEvent', 'KeyboardEvent')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

The KeyboardEvent interface specification went through numerous draft versions, first under DOM Events Level 2 where it was dropped as no consensus arose, then under DOM Events Level 3. This led to the implementation of non-standard initialization methods, the early DOM Events Level 2 version, {{domxref("KeyboardEvent.initKeyEvent()")}} by Gecko browsers and the early DOM Events Level 3 version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} by others. Both have been superseded by the modern usage of a constructor: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
constructor{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("31.0") }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
.char{{ CompatNo() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
.charCode{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
.codeSee Browser compatibility of {{domxref("KeyboardEvent.code")}}.
.isComposing{{ CompatNo() }}{{ CompatGeckoDesktop("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
.keySee Browser compatibility of {{domxref("KeyboardEvent.key")}}.
.keyCode{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
.locale{{ CompatNo() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
.location{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("15.0") }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
.repeat{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("28.0") }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatNo() }}
.which{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
.getModifierState()See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}
.initKeyboardEvent(){{ CompatVersionUnknown() }} *1{{ CompatNo() }} *2{{ CompatIE("9.0") }} *3{{ CompatUnknown() }}{{ CompatVersionUnknown() }} *1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
constructor{{ CompatUnknown() }}{{ CompatGeckoMobile("31.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.char{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.charCode{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.codeSee Browser compatibility of {{domxref("KeyboardEvent.code")}}.
.isComposing{{ CompatNo() }}{{ CompatGeckoMobile("31.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
.keySee Browser compatibility table of {{domxref("KeyboardEvent.key")}}.
.keyCode{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.locale{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.location{{ CompatUnknown() }}{{ CompatGeckoMobile("15.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.repeat{{ CompatUnknown() }}{{ CompatGeckoMobile("28.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.which{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
.getModifierState()See Browser compatibility of {{domxref("KeyboardEvent.getModifierState")}}
.initKeyboardEvent(){{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +


+ *1 The arguments of initKeyboardEvent() of WebKit and Blink's are different from the definition in DOM Level 3 Events. The method is: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg,  in views::AbstractView viewArg, in DOMString keyIndentifierArg, in unsigned long locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)

+ +

*2 Gecko won't support initKeyboardEvent() because supporting it completely breaks feature detection of web applications. See {{Bug(999645)}}.

+ +

*3 The argument of initKeyboardEvent() of IE is different from the definition in DOM Level 3 Events. The method is: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in unsigned long locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg). See document of initKeyboardEvent() in MSDN.

diff --git a/files/es/web/api/keyboardevent/key/index.html b/files/es/web/api/keyboardevent/key/index.html new file mode 100644 index 0000000000..ed765b38b3 --- /dev/null +++ b/files/es/web/api/keyboardevent/key/index.html @@ -0,0 +1,212 @@ +--- +title: KeyboardEvent.key +slug: Web/API/KeyboardEvent/key +translation_of: Web/API/KeyboardEvent/key +--- +

{{APIRef("DOM Events")}}

+ +

La propiedad de solo lectura KeyboardEvent.key retorna el valor de la tecla presionada por el usuario while taking into considerations the state of modifier keys such as the shiftKey as well as the keyboard locale/layout. Its value is determined as follows:

+ +
+

See a full list of key values.

+
+ + + +

KeyboardEvent Sequence

+ +

KeyboardEvents are fired in a pre-determined sequence and understanding this will go a long way into understanding the key property value for a particular KeyboardEvent. For a given key press, the sequence of KeyboardEvents fired is as follows assuming that {{domxref("Event.preventDefault")}} is not called:

+ +
    +
  1. A {{event("keydown")}} event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the {{domxref("KeyboardEvent.repeat")}} read only property  is set to true.
    2. +
  2. If the key produces a character key that would result in a character being inserted into possibly an {{HTMLElement("input")}}, {{HTMLElement("textarea")}} or an element with {{domxref("HTMLElement.contentEditable")}} set to true, the {{event("beforeinput")}} and {{event("input")}} event types are fired in that order. Note that some other implementations may fire {{event("keypress")}} event if supported. The events will be fired repeatedly while the key is held down.
    3. +
  3. A {{event("keyup")}} event is fired once the key is released. This completes the process.
    4. +
+ +

In sequence 1 & 3, the KeyboardEvent.key attribute is defined and is set appropriately to a value according to the rules defined ealier.

+ +

KeyboardEvent Sequence Sample

+ +

Consider the event sequence generated when we interact with the ShiftKey and the legend key 2 using a U.S keyboard layout and a UK keyboard layout.

+ +

Try experimenting using the following two test cases:

+ +
    +
  1. Press and hold the shift key, then press key 2 and release it. Next, release the shift key.
    2. +
  2. Press and hold the shift key, then press and hold key 2. Release the shift key. Finally, release key 2.
    3. +
+ +

HTML

+ +
<div class="fx">
+  <div>
+    <textarea rows="5" name="test-target" id="test-target"></textarea>
+    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
+  </div>
+  <div class="flex">
+    <div id="console-log"></div>
+  </div>
+</div>
+
+ +

CSS

+ +
.fx {
+  -webkit-display: flex;
+  display: flex;
+  margin-left: -20px;
+  margin-right: -20px;
+}
+
+.fx > div {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.fx > div:first-child {
+   width: 30%;
+}
+
+.flex {
+  -webkit-flex: 1;
+  flex: 1;
+}
+
+#test-target {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+ +

JavaScript

+ +
let textarea = document.getElementById('test-target'),
+consoleLog = document.getElementById('console-log'),
+btnClearConsole = document.getElementById('btn-clear-console');
+
+function logMessage(message) {
+  let p = document.createElement('p');
+  p.appendChild(document.createTextNode(message));
+  consoleLog.appendChild(p);
+}
+
+textarea.addEventListener('keydown', (e) => {
+  if (!e.repeat)
+    logMessage(`first keydown event. key property value is "${e.key}"`);
+  else
+    logMessage(`keydown event repeats. key property value is "${e.key}"`);
+});
+
+textarea.addEventListener('beforeinput', (e) => {
+  logMessage(`beforeinput event. you are about inputing "${e.data}"`);
+});
+
+textarea.addEventListener('input', (e) => {
+  logMessage(`input event. you have just inputed "${e.data}"`);
+});
+
+textarea.addEventListener('keyup', (e) => {
+  logMessage(`keyup event. key property value is "${e.key}"`);
+});
+
+btnClearConsole.addEventListener('click', (e) => {
+  let child = consoleLog.firstChild;
+  while (child) {
+   consoleLog.removeChild(child);
+   child = consoleLog.firstChild;
+  }
+});
+ +

Result

+ +

{{EmbedLiveSample('KeyboardEvent_Sequence_Sample')}}

+ +

Case 1

+ +

When the shift key is pressed, a {{event("keydown")}} event is first fired, and the key property value is set to the string "Shift". As we keep holding this key, the {{event("keydown")}} event does not continue to fire repeatedly because it does not produce a character key.

+ +

When key 2 is pressed, another {{event("keydown")}} event is fired for this new key press, and the key property value for the event is set to the string "@" for the U.S keyboard type and """ for the UK keyboard type, because of the active modifier shift key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced.

+ +

As we release the key 2, a {{event("keyup")}} event is fired and the key property will maintain the string values "@" and """ for the different keyboard layouts respectively.

+ +

As we finally release the shift key, another {{event("keyup")}} event is fired for it, and the key attribute value remains "Shift".

+ +

Case 2

+ +

When the shift key is pressed, a {{event("keydown")}} event is first fired, and the key property value is set to be the string "Shift". As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.

+ +

When key 2 is pressed, another {{event("keydown")}} event is fired for this new key press, and the key property value for the event is set to be the string "@" for the U.S keyboard type and """ for the UK keyboard type, because of the active modifier shift key. The {{event("beforeinput")}} and {{event("input")}} events are fired next because a character key has been produced. As we keep holding the key, the {{event("keydown")}} event continues to fire repeatedly and the {{domxref("KeyboardEvent.repeat")}}  property is set to true. The {{event("beforeinput")}} and {{event("input")}} events are fired repeatedly as well.

+ +

As we release the shift key, a {{event("keyup")}} event is fired for it, and the key attribute value remains "Shift". At this point, notice that the key property value for the repeating keydown event of the key 2 key press is now "2" because the modifier shift key is no longer active. The same goes for the {{domxref("InputEvent.data")}} property of the {{event("beforeinput")}} and {{event("input")}} events.

+ +

As we finally release the key 2, a {{event("keyup")}} event is fired but the key property will be set to the string value "2" for both keyboard layouts because the modifier shift key is no longer active.

+ +

Example

+ +

This example uses {{domxref("EventTarget.addEventListener()")}} to listen for {{event("keydown")}} events. When they occur,  the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).

+ +
window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Do nothing if the event was already processed
+  }
+
+  switch (event.key) {
+    case "Down": // IE specific value
+    case "ArrowDown":
+      // Do something for "down arrow" key press.
+      break;
+    case "Up": // IE specific value
+    case "ArrowUp":
+      // Do something for "up arrow" key press.
+      break;
+    case "Left": // IE specific value
+    case "ArrowLeft":
+      // Do something for "left arrow" key press.
+      break;
+    case "Right": // IE specific value
+    case "ArrowRight":
+      // Do something for "right arrow" key press.
+      break;
+    case "Enter":
+      // Do something for "enter" or "return" key press.
+      break;
+    case "Escape":
+      // Do something for "esc" key press.
+      break;
+    default:
+      return; // Quit when this doesn't handle the key event.
+  }
+
+  // Cancel the default action to avoid it being handled twice
+  event.preventDefault();
+}, true);
+
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}{{Spec2('DOM3 Events')}}Initial definition, included key values.
+ +

Browser compatibility

+ + + +

{{Compat("api.KeyboardEvent.key")}}

diff --git a/files/es/web/api/keyboardevent/metakey/index.html b/files/es/web/api/keyboardevent/metakey/index.html new file mode 100644 index 0000000000..7a83c5c0b2 --- /dev/null +++ b/files/es/web/api/keyboardevent/metakey/index.html @@ -0,0 +1,131 @@ +--- +title: KeyboardEvent.metaKey +slug: Web/API/KeyboardEvent/metaKey +tags: + - Evento + - Referencia +translation_of: Web/API/KeyboardEvent/metaKey +--- +

{{APIRef("DOM Events")}}

+ +

La propiedad KeyboardEvent.metaKey  es de solo lectura y regresa un valor {{jsxref("Boolean")}} que indica si la tecla Meta estaba presionada (true) o no (false) cuando el evento ocurrio.

+ +
+

Nota: En teclados Macintosh es la tecla comando (⌘). En teclados Windows la tecla es lla tecla window (⊞).

+
+ +

Syntax

+ +
var metaKeyPressed = instanceOfKeyboardEvent.metaKey
+
+ +

Valor de retorno

+ +

{{jsxref("Boolean")}}

+ +

Ejemplo

+ +
 function goInput(e) {
+ // Revisa si estaba presionada la tecla meta y
+   if (e.metaKey) {
+        // realiza esto en caso de cierto
+     superSizeOutput(e);
+   } else {
+         //Realiz esto en caso de falso
+     doOutput(e);
+   }
+ }
+
+ +

metaKey

+ +

Contenido HTML

+ +
<div id="example" onmousedown="ismetaKey(event);">¡Presiona la tecla meta y dame click!<div>
+
+ +

Contenido Javascript

+ +
function ismetaKey(e){
+ var el=document.getElementById("example");//Toma el control del div example
+ var mK=e.metaKey;//Obtiene el valor de metaKey y lo almacena
+ el.innerHTML="¡Presiona la tecla meta y dame click!</br>metaKey:"+mK;//Muestra el valor de metaKey
+}
+
+ +

 

+ +

{{ EmbedLiveSample('metaKey') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('DOM3 Events','#widl-KeyboardEvent-metaKey','KeyboardEvent.metaKey')}}{{Spec2('DOM3 Events')}}Definición inicial
+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/keyboardevent/which/index.html b/files/es/web/api/keyboardevent/which/index.html new file mode 100644 index 0000000000..11e1e3e48e --- /dev/null +++ b/files/es/web/api/keyboardevent/which/index.html @@ -0,0 +1,62 @@ +--- +title: event.which +slug: Web/API/KeyboardEvent/which +tags: + - DOM + - events + - metodo + - which +translation_of: Web/API/KeyboardEvent/which +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve el keyCode de la tecla presionada, o el codigo del caracter (charCode) de la tecla alfanumerica presionada.

+

Sintaxis

+
var keyResult = event.which;
+
+

keyResult contiene el codigo numerico para una tecla en particular, dependiendo si la tecla presionada es alfanumerica o no-alfanumerica. Por favor mire charCode y keyCode para mas informacion.

+

Ejemplo

+
<html>
+<head>
+<title>charCode/keyCode/which example</title>
+
+<script type="text/javascript">
+
+function showKeyPress(evt)
+{
+alert("onkeypress handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+      + "charCode property: " + evt.charCode + "\n"
+      + "Character Key Pressed: "
+      + String.fromCharCode(evt.charCode) + "\n"
+     );
+}
+
+
+function keyDown(evt)
+{
+alert("onkeydown handler: \n"
+      + "keyCode property: " + evt.keyCode + "\n"
+      + "which property: " + evt.which + "\n"
+     );
+}
+
+
+</script>
+</head>
+
+<body
+ onkeypress="showKeyPress(event);"
+ onkeydown="keyDown(event);"
+>
+
+<p>Por favor presione cualquier tecla.</p>
+
+</body>
+</html>
+
+
+ Nota: El codigo de arriba falla en Firefox 9 debido al bug 696020.
+

Especificacion

+

No es parte de ninguna especificacion.

diff --git a/files/es/web/api/location/index.html b/files/es/web/api/location/index.html new file mode 100644 index 0000000000..9276724542 --- /dev/null +++ b/files/es/web/api/location/index.html @@ -0,0 +1,212 @@ +--- +title: Location +slug: Web/API/Location +tags: + - API + - HTML DOM + - Interface + - Location + - Referencia +translation_of: Web/API/Location +--- +

{{APIRef("HTML DOM")}}

+ +

La interface Location representa la ubicación (URL) del objeto al que esta vinculado. Los cambios hechos en ella son reflejados en el objeto al cual está relacionado. Ambas interfaces, {{domxref("Document")}} y {{domxref("Window")}} tienen una interface Location asignada, accessible desde {{domxref("Document.location")}} y {{domxref("Window.location")}} respectivamente.

+ +

Propiedades

+ +

La interface Location no hereda ninguna propiedad, pero las implementa desde {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.href")}}
+
Es un {{domxref("DOMString")}} que contiene la URL completa. Si es cambiada, el documento asociado navegará a la nueva pagina. Puede ser cambiada desde un origen diferente que el asociado al documento.
+
{{domxref("Location.protocol")}}
+
Es un {{domxref("DOMString")}} que contiene el esquema del protocolo de la URL, incluyendo el ':' final.
+
{{domxref("Location.host")}}
+
Es un {{domxref("DOMString")}} que contiene el host, el cual esta compuesta por: hostname,  ':', y el port de la URL.
+
{{domxref("Location.hostname")}}
+
Es un {{domxref("DOMString")}} que contiene el dominio de la URL.
+
{{domxref("Location.port")}}
+
Es un {{domxref("DOMString")}} que contiene el numero del puerto de la URL.
+
{{domxref("Location.pathname")}}
+
Es un {{domxref("DOMString")}} que contiene el '/' inicial, seguido por la ruta de la URL.
+
{{domxref("Location.search")}}
+
Es un {{domxref("DOMString")}} que contiene un '?' seguido por los parametros o el "querystring" de la URL. Navegadores modernos proveen URLSearchParams y URL.searchParams para hacer mas facil de obtener los parametros desde el querystring.
+
{{domxref("Location.hash")}}
+
Es un {{domxref("DOMString")}} que contiene un '#' seguido por el fragmento identificador de la URL.
+
{{domxref("Location.username")}}
+
Es un {{domxref("DOMString")}} que contiene el username (usuario) especificado antes del dominio.
+
{{domxref("Location.password")}}
+
Es un {{domxref("DOMString")}} que contiene el password (contraseña) especificado antes del dominio.
+
{{domxref("Location.origin")}} {{readOnlyInline}}
+
Es un {{domxref("DOMString")}} que contiene la forma canonica del origin (origen) de la URL.
+
+ +

Metodos

+ +

La interface Location no hereda ningun metodo, pero los implementa desde {{domxref("URLUtils")}}.

+ +
+
{{domxref("Location.assign()")}}
+
Carga el recurso en la URL proporcionada en el parámetro.
+
{{domxref("Location.reload()")}}
+
Recarga el recurso desde la URL actual. Si unico y opcional parametro es {{domxref("Boolean")}}, el cual, cuando es true, hace que la pagina siempre sea recargada desde el servidor. Si es false o no es especificado, el navegador puede recargar la pagina desde su cache.
+
{{domxref("Location.replace()")}}
+
Reemplaza el recurso actual por el recibido como URL. La diferencia con el metodo assign() es que luego de usar replace() la pagina actual no va a ser guardada en la sesión {{domxref("History")}}, esto significa que el usuario no podrá usar el boton Atras para navegar a esta.
+
{{domxref("Location.toString()")}}
+
Retorna un {{domxref("DOMString")}} que contiene la URL completa. Es un sinonimo de {{domxref("URLUtils.href")}}, aunque este no puede ser utilizado para modificar el valor.
+
+ +

Ejemplo

+ +
// Crear un elemento <a> y usar la propiedad href para el proposito de este ejemplo.
+// Una alternativa mas correcta es navegar a la URL y usar document.location o window.location
+var url = document.createElement('a');
+url.href = 'https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container';
+console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
+console.log(url.protocol);  // https:
+console.log(url.host);      // developer.mozilla.org:8080
+console.log(url.hostname);  // developer.mozilla.org
+console.log(url.port);      // 8080
+console.log(url.pathname);  // /en-US/search
+console.log(url.search);    // ?q=URL
+console.log(url.hash);      // #search-results-close-container
+console.log(url.origin);    // https://developer.mozilla.org
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('HTML WHATWG', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Location")}}{{Spec2('HTML5 W3C')}}Definicion inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
origin en Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin en todos los objetos location (pero en Workes, usa {{domxref("WorkerLocation")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username and password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
origin en Windows.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
origin en todos los objetos location (pero en Workers, usa {{domxref("WorkerLocation")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
username y password{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("26")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vea también

+ + diff --git a/files/es/web/api/location/origin/index.html b/files/es/web/api/location/origin/index.html new file mode 100644 index 0000000000..4e019a68f0 --- /dev/null +++ b/files/es/web/api/location/origin/index.html @@ -0,0 +1,56 @@ +--- +title: 'Location: origin' +slug: Web/API/Location/origin +tags: + - API + - Location + - Propiedad + - Referencia + - Ubicación +translation_of: Web/API/Location/origin +--- +

{{APIRef("Location")}}

+ +

La propiedad de sólo-lectura origin de la interfaz {{domxref("Location")}} es una {{domxref("USVString")}} que contiene la serialización Unicode del origen de la URL que representa; que es:

+ + + +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
string = object.origin;
+
+ +

Ejemplos

+ +
// En esta página, devuelve el origen
+var result = window.location.origin; // Devuelve:'https://developer.mozilla.org'
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-location-origin', 'origin')}}{{Spec2('HTML WHATWG')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.Location.origin")}}

diff --git a/files/es/web/api/location/reload/index.html b/files/es/web/api/location/reload/index.html new file mode 100644 index 0000000000..2c7cedccab --- /dev/null +++ b/files/es/web/api/location/reload/index.html @@ -0,0 +1,75 @@ +--- +title: 'Location: reload()' +slug: Web/API/Location/reload +tags: + - API + - HTML + - HTML DOM + - Location + - Method + - Referencia + - metodo +translation_of: Web/API/Location/reload +--- +
{{ APIRef("HTML DOM") }}
+ +

El metodo location.reload() carga de nuevo la URL actual, como lo hace el boton de Refresh de los navegadores.

+ +

La recarga puede estar bloqueada y arrojar un SECURITY_ERROR {{domxref("DOMException")}} . Esto sucede si el {{Glossary("origin")}} de la llamada location.reload() difiere del origen de la página que posee el objeto { {domxref("Location")}}. Consulta Same-origin policy para mayor información.

+ +

Syntax

+ +
location.reload();
+
+ +

Ejemplo

+ +

HTML

+ +
<button id="reload">Click para recargar</button>
+
+ +

JavaScript

+ +
const reload = document.getElementById('reload');
+
+reload.addEventListener('click', _ => { // el _ es para indicar la ausencia de parametros
+    location.reload();
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#dom-location-reload", "Location.reload()")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.Location.reload")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/mediadevices/getusermedia/index.html b/files/es/web/api/mediadevices/getusermedia/index.html new file mode 100644 index 0000000000..1466aecd36 --- /dev/null +++ b/files/es/web/api/mediadevices/getusermedia/index.html @@ -0,0 +1,300 @@ +--- +title: MediaDevices.getUserMedia() +slug: Web/API/MediaDevices/getUserMedia +translation_of: Web/API/MediaDevices/getUserMedia +--- +
{{APIRef("WebRTC")}}{{SeeCompatTable}}
+ +

El método MediaDevices.getUserMedia() solicita al usuario permisos para usar un dispositivo de entrada de vídeo y/o uno de audio como una cámara o compartir la pantalla y/o micrófono. Si el usuario proporciona los permisos, entonces le retornará un {{domxref("Promise")}} que es resuelto por el resultado del objeto MediaStream. Si el usuario niega el permiso, o si el recurso multimedia no es válido, entonces el promise es rechazado con PermissionDeniedError o NotFoundError respectivamente. Nótese que es posible que el promise retornado no sea ni resuelto ni rechazado, ya que no se requiere que el usuario tome una decisión.

+ +

Sintaxis

+ +
var gumPromise = MediaDevices.getUserMedia(constraints);
+ +

Generalmente, accederás al objeto singleton {{domxref("MediaDevices")}} usando {{domxref("navigator.mediaDevices")}}, de esta forma:

+ +
navigator.mediaDevices.getUserMedia(myConstraints).then(function(mediaStream) {
+  /* usar el flujo de datos */
+}).catch(function(err) {
+  /* manejar el error */
+});
+ +

Parámetros

+ +
+
constraints
+
+

Es un objeto {{domxref("MediaStreamConstraints")}} que especifica los tipos de recursos a solicitar, junto con cualquier requerimiento para cada tipo.

+ +

El parámetro constraints es un objeto MediaStreamConstaints con dos miembros: video y audio, que describen los tipos de recurso solicitados. Debe especificarse uno o ambos. Si el navegador no puede encontrar todas las pistas de recursos con los tipos especificados que reúnan las restricciones dadas, entonces el promise retornado es rechazado con NotFoundError.

+ +

Lo siguiente realiza la petición de tanto audio como vídeo sin requerimientos específicos:

+ + 
{ audio: true, video: true }
+ +

Mientras que la información acerca de las cámaras y micrófonos de los usuarios se encuentran inaccesibles por razones de privacidad, una aplicación puede solicitar la cámara y las capacidades del micrófono que este requiera, usando restricciones adicionales. El siguiente código es para mosrtar una resolución de una cámara de 1280x720.

+ + 
{
+  audio: true,
+  video: { width: 1280, height: 720 }
+}
+ +

El navegador tratará de respetar esto, pero puede devolver otras resoluciones si una coincidencia exacta no está disponible o si el usuario la reemplaza.

+ +

Para conseguir otras resoluciones, puede utilizar las propiedaes min, max, or exact (también conocido como min == max). El siguiente ejemplo le muestra cómo solicitar una resolución mínima de 1280x720.

+ + 
{
+  audio: true,
+  video: {
+    width: { min: 1280 },
+    height: { min: 720 }
+  }
+}
+ +

Si no existe una cámara con una resolución mínima para trabajar, entonces la promesa devuelta será rechazada con NotFoundError, y no se le pedirá al usuario.

+ +

La razón de esto es debido a que las propiedades min, max, y exact son inherentemente obligatorias, mientras que los valores planos y una propiedad llamada ideal no lo son. He aquí un ejemplo más completo:

+ + 
{
+  audio: true,
+  video: {
+    width: { min: 1024, ideal: 1280, max: 1920 },
+    height: { min: 776, ideal: 720, max: 1080 }
+  }
+}
+ +

Un valor perteneciente a la propiedad ideal, cuando es usada, tiene gravedad, lo que significa que el navegador tratará de encontrar la configuración (una cámara, si tienes más de una), con la distancia de aptitud más pequeña (fitness distance) de los valores ideales dados.

+ +

Los valores planos son inherentemente ideales, lo que significa que de los ejemplos mostrados anteriormente, podrían haberse escrito de la siguiente manera:

+ + 
{
+  audio: true,
+  video: {
+    width: { ideal: 1280 },
+    height: { ideal: 720 }
+  }
+}
+ +

No todas las restricciones son números. Por ejemplo, en dispositivos móviles, los siguientes preferirán la cámara frontal (si está disponible) sobre la posterior:

+ + 
{ audio: true, video: { facingMode: "user" } }
+ +

Para solicitar la cámara frontal, use:

+ + 
{ audio: true, video: { facingMode: { exact: "environment" } } }
+
+
+ +

Valor de retorno

+ +

Un {{jsxref("Promise")}} que resuelve a un objeto {{domxref("MediaStream")}}.

+ +

Errores

+ +

Los rechazos de la promesa devuelta se realizan con un objeto {{domxref ("MediaStreamError")}} que está modelado en {{domxref ("DOMException")}}. Los errores más relevantes son:

+ +
+
SecurityError
+
Permiso para usar un dispositivo fue denegado por el usuario o por el sistema.
+
NotFoundError
+
No se encontraron pistas multimedia del tipo especificado que satisfagan las restricciones especificadas.
+
+ +

Ejemplos

+ +

Usando la Promesa (Promise)

+ +

Este ejemplo asigna el objeto {{domxref("MediaStream")}} al elemento apropiado.

+ +
var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+
+p.then(function(mediaStream) {
+  var video = document.querySelector('video');
+  video.src = window.URL.createObjectURL(mediaStream);
+  video.onloadedmetadata = function(e) {
+    // Do something with the video here.
+  };
+});
+
+p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.
+ +

Ancho y alto

+ +

He aquí un ejemplo del uso de mediaDevices.getUserMedia(), incluyendo un polyfill para hacer frente a los navegadores más antiguos.

+ +
var promisifiedOldGUM = function(constraints, successCallback, errorCallback) {
+
+  // First get ahold of getUserMedia, if present
+  var getUserMedia = (navigator.getUserMedia ||
+      navigator.webkitGetUserMedia ||
+      navigator.mozGetUserMedia);
+
+  // Some browsers just don't implement it - return a rejected promise with an error
+  // to keep a consistent interface
+  if(!getUserMedia) {
+    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
+  }
+
+  // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
+  return new Promise(function(successCallback, errorCallback) {
+    getUserMedia.call(navigator, constraints, successCallback, errorCallback);
+  });
+
+}
+
+// Older browsers might not implement mediaDevices at all, so we set an empty object first
+if(navigator.mediaDevices === undefined) {
+  navigator.mediaDevices = {};
+}
+
+// Some browsers partially implement mediaDevices. We can't just assign an object
+// with getUserMedia as it would overwrite existing properties.
+// Here, we will just add the getUserMedia property if it's missing.
+if(navigator.mediaDevices.getUserMedia === undefined) {
+  navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
+}
+
+
+// Prefer camera resolution nearest to 1280x720.
+var constraints = { audio: true, video: { width: 1280, height: 720 } };
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var video = document.querySelector('video');
+  video.src = window.URL.createObjectURL(stream);
+  video.onloadedmetadata = function(e) {
+    video.play();
+  };
+})
+.catch(function(err) {
+  console.log(err.name + ": " + err.message);
+});
+
+ +

Cuadros por segundo

+ +

Pocos frame-rates ó cuadros por segundo pueden ser deseables  en algunos casos, como transmisiones  WebRTC con restricciones de ancho de banda.

+ +
var constraints = { video: { frameRate: { ideal: 10, max: 15 } } };
+
+ +

Camara frontal y camara trasera

+ +

En telefonos moviles.

+ +
var front = false;
+document.getElementById('flip-button').onclick = function() { front = !front; };
+
+var constraints = { video: { facingMode: (front? "user" : "environment") } };
+
+ +

Permisos

+ +

Para usar getUserMedia() en una app instalable (por ejemplo, una Firefox OS app), necesitas especificar uno o ambos de los siguientes campos dentro de tu archivo manifest:

+ +
"permissions": {
+  "audio-capture": {
+    "description": "Required to capture audio using getUserMedia()"
+  },
+  "video-capture": {
+    "description": "Required to capture video using getUserMedia()"
+  }
+}
+ +

Ver permission: audio-capture y  permission: video-capture para más información.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#dom-mediadevices-getusermedia', 'MediaDevices.getUserMedia()')}}{{Spec2('Media Capture')}}Initial definition
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Stream API{{CompatVersionUnknown}}[1][3]
+ 47		36[2]{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android 
Stream API{{CompatNo}}{{CompatNo}}36[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Viejas versiones de Chrome y Opera implementan navigator.webkitGetUserMedia, la versión prefijada {{domxref("navigator.getUserMedia")}} del metodo.

+ +

En Chrome, esta promise-based interfaz esta unicamente disponible mediante el adapter.js polyfill, o usando la bandera chrome://flags/#enable-experimental-web-platform-features.

+ +

Chrome usa una sintaxis de restricciones desactualizada, pero la sintaxis descrita aquí esta disponible mediante el  adapter.js polyfill.

+ +

[2] Viejas versiones de  Firefox implementan navigator.mozGetUserMedia, la versión prefijada  {{domxref("navigator.getUserMedia")}} del método.

+ +

Esta promise-based interfaz y  la sintaxis de restricciones descrita aquí esta disponible  en Firefox 38. Versiones anteriores (32-37) usaban una sitaxis de restriciones desactualizada, pero la sintaxis descrita aquí, tanto como la promise-based interfaz, esta disponible mediante adapter.js polyfill.

+ +

Opera usa una sintaxis de restricciones desactualizada, pero la sintaxis descrita aquí esta disponible mediante adapter.js polyfill.

+ +

[3] Chrome lanza un  error si la página que sirve el script es cargada desde un origen inseguro (i.e. HTTP).

+ +

Ver También

+ + diff --git a/files/es/web/api/mediadevices/index.html b/files/es/web/api/mediadevices/index.html new file mode 100644 index 0000000000..9c02a60cea --- /dev/null +++ b/files/es/web/api/mediadevices/index.html @@ -0,0 +1,172 @@ +--- +title: MediaDevices +slug: Web/API/MediaDevices +tags: + - API + - Experimental + - Interface + - Media + - MediaDevices + - NeedsTranslation + - TopicStub +translation_of: Web/API/MediaDevices +--- +
{{APIRef("WebRTC")}}{{SeeCompatTable}}
+ +

The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screensharing.

+ +

Properties

+ +

None.

+ +

Methods

+ +
+
{{ domxref("MediaDevices.getUserMedia()") }}
+
With the user's permission through a prompt, turns on a camera or screensharing and/or a microphone on the system and provides a {{domxref("MediaStream")}} containing a video track and/or an audio track with the input.
+
{{ domxref("MediaDevices.enumerateDevices()") }}
+
Obtains an array of information about the media input and output devices available on the system.
+
+ +

Example

+ +
'use strict';
+
+// Put variables in global scope to make them available to the browser console.
+var video = document.querySelector('video');
+var constraints = window.constraints = {
+  audio: false,
+  video: true
+};
+var errorElement = document.querySelector('#errorMsg');
+
+navigator.mediaDevices.getUserMedia(constraints)
+.then(function(stream) {
+  var videoTracks = stream.getVideoTracks();
+  console.log('Got stream with constraints:', constraints);
+  console.log('Using video device: ' + videoTracks[0].label);
+  stream.onended = function() {
+    console.log('Stream ended');
+  };
+  window.stream = stream; // make variable available to browser console
+  video.srcObject = stream;
+})
+.catch(function(error) {
+  if (error.name === 'ConstraintNotSatisfiedError') {
+    errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
+        constraints.video.width.exact + ' px is not supported by your device.');
+  } else if (error.name === 'PermissionDeniedError') {
+    errorMsg('Permissions have not been granted to use your camera and ' +
+      'microphone, you need to allow the page access to your devices in ' +
+      'order for the demo to work.');
+  }
+  errorMsg('getUserMedia error: ' + error.name, error);
+});
+
+function errorMsg(msg, error) {
+  errorElement.innerHTML += '<p>' + msg + '</p>';
+  if (typeof error !== 'undefined') {
+    console.error(error);
+  }
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}{{Spec2('Media Capture')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop("36.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
enumerateDevices(){{CompatChrome(45.0)}}[1]{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("36.0")}}2.2{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
enumerateDevices(){{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Behind a flag.

+ +

See also

+ + diff --git a/files/es/web/api/mediaquerylist/addlistener/index.html b/files/es/web/api/mediaquerylist/addlistener/index.html new file mode 100644 index 0000000000..e52d1b8b33 --- /dev/null +++ b/files/es/web/api/mediaquerylist/addlistener/index.html @@ -0,0 +1,148 @@ +--- +title: MediaQueryList.addListener() +slug: Web/API/MediaQueryList/addListener +translation_of: Web/API/MediaQueryList/addListener +--- +
{{APIRef("CSSOM View")}}
+ +
El método addListener() de la interfaz {{domxref ("MediaQueryList")}} añade un escucha al MediaQueryListener que ejecutará una función de devolución de llamada personalizada en respuesta al cambio de estado de consulta de medios.
+ 
+ +
+

Esto es básicamente un alias para {{domxref("EventTarget.addEventListener()")}}, para propósitos de compatibilidad con versiones anteriores: en los navegadores antiguos se puede usar addEventListener.

+
+ +

Sintaxis

+ +
MediaQueryList.addListener(func)
+ +

Parametros

+ +
+
func
+
A function or function reference representing the callback function you want to run when the media query status changes. In the original implementation, the callback was a non-standard {{domxref("MediaQueryListListener")}} object. In the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a {{domxref("MediaQueryListEvent")}}, which inherits from {{domxref("Event")}}.
+
+ +

Return value

+ +

Void.

+ +

Examples

+ +
var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM View", "#dom-mediaquerylist-addlistener", "addListener")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}1012.15
New version spec update{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
New version spec update{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/mediaquerylist/index.html b/files/es/web/api/mediaquerylist/index.html new file mode 100644 index 0000000000..a13b29cdbb --- /dev/null +++ b/files/es/web/api/mediaquerylist/index.html @@ -0,0 +1,178 @@ +--- +title: MediaQueryList +slug: Web/API/MediaQueryList +tags: + - API + - CSSOM Vista + - CompatibilidadDeNavegadores + - Interface + - MediaQueryList + - Refetencia +translation_of: Web/API/MediaQueryList +--- +
{{APIRef("CSSOM View")}}{{SeeCompatTable}}
+ +

Un objeto MediaQueryList almacena información en un media query aplicada a un documento y se encarga de enviar notificaciones a los oyentes cuando cambia el estado de consulta de medios (es decir, cuando la prueba de consulta de medios comienza o deja de evaluarse a true).

+ +

Esto hace posible observar un documento para detectar cuando sus consultas de medios cambian, en lugar de sondear los valores periódicamente y le permite programar cambios en un documento basado en el estado de consulta de medios.

+ +

Propiedades

+ +

La nueva versión de la interfaz de MediaQueryList hereda las propiedades de su interfaz principal, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaQueryList.matches")}} {{readonlyInline}}
+
 Un {{domxref("Boolean")}} que devuelve  true si el
+  {{domxref("document")}} actualmente coincide con la lista de consultas de medios, o false si no.
+
{{domxref("MediaQueryList.media")}} {{readonlyInline}}
+
 Un {{domxref("DOMString")}} representa una consulta de medios serializada.
+
+ +

Controladores de eventos

+ +
+
{{domxref("MediaQueryList.onchange")}}
+
Una propiedad de controlador de eventos que representa una función que se invoca cuando se desencadena el evento {{event("change")}}, es decir, cuando cambia el estado del soporte de consulta de medios. El objeto de evento es una instancia {{domxref("MediaQueryListEvent")}}, que se reconoce como una instancia de MediaListQuery en navegadores antiguos, para propósitos de compatibilidad con versiones anteriores.
+
+ +

Métodos

+ +

La nueva versión de la interfaz de MediaQueryList hereda métodos de su interfaz principal, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaQueryList.addListener()")}}
+
 Agrega un escucha al MediaQueryListener que ejecutará una función de devolución de llamada personalizada en respuesta al cambio de estado de consulta de medios. Esto es básicamente un alias para {{domxref("EventTarget.addEventListener()")}}, para propósitos de compatibilidad con versiones anteriores. 
+
{{domxref("MediaQueryList.removeListener()")}}
+
 Elimina un escucha de MediaQueryListener. Esto es básicamente un alias para {{domxref ("EventTarget.removeEventListener ()")}}, para propósitos de compatibilidad con versiones anteriores.
+
+ +
+
+ +

Ejemplos

+ +

Este ejemplo sencillo crea una MediaQueryList y, a continuación, establece un detector para detectar cuándo cambia el estado de la consulta de medios, ejecutando una función personalizada cuando cambia la apariencia de la página.

+ +
var para = document.querySelector('p');
+
+var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* el ventana tiene 600 píxeles de ancho o menos*/
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* la ventana tiene más de 600 píxeles de ancho */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+ +
+

Nota: Puedes encontrar este ejemplo en GitHub (ver el codigo fuente, y también verlo en ejecución).

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}1012.15
New version spec update{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
New version spec update{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/mediaquerylist/matches/index.html b/files/es/web/api/mediaquerylist/matches/index.html new file mode 100644 index 0000000000..c31f6fa707 --- /dev/null +++ b/files/es/web/api/mediaquerylist/matches/index.html @@ -0,0 +1,108 @@ +--- +title: MediaQueryList.matches +slug: Web/API/MediaQueryList/matches +translation_of: Web/API/MediaQueryList/matches +--- +
{{APIRef("CSSOM View")}}
+ +

La propiedad matches de sólo lectura de la interfaz {{domxref ("MediaQueryList")}} es {{domxref ("Boolean")}} que devuelve true si el {{domxref ("document")}} coincide actualmente con el medio lista de consultas, o false si no.

+ +

Sintaxis

+ +
var matches = MediaQueryList.matches;
+ +

Value

+ +

A {{domxref("Boolean")}}; returns true if the {{domxref("document")}} currently matches the media query list, false if not.

+ +

Examples

+ +
var mql = window.matchMedia('(max-width: 600px)');
+
+if(mql.matches) {
+  // media query test returning true
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSSOM View", "#dom-mediaquerylist-matches", "matches")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}1012.15
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/mediaquerylist/removelistener/index.html b/files/es/web/api/mediaquerylist/removelistener/index.html new file mode 100644 index 0000000000..2689dde854 --- /dev/null +++ b/files/es/web/api/mediaquerylist/removelistener/index.html @@ -0,0 +1,149 @@ +--- +title: MediaQueryList.removeListener() +slug: Web/API/MediaQueryList/removeListener +translation_of: Web/API/MediaQueryList/removeListener +--- +
{{APIRef("CSSOM View")}}
+ +

El método removeListener() de la interfaz {{domxref ("MediaQueryList")}} elimina un escucha de MediaQueryListener.

+ +

Esto es básicamente un alias para {{domxref("EventTarget.removeEventListener()")}}, para propósitos de compatibilidad con versiones anteriores: en los navegadores antiguos puede usar removeEventListener().

+ +

Sintaxis

+ +
MediaQueryList.removeListener(func)
+ +

Parametros

+ +
+
func
+
Una función o referencia de función que representa la función de devolución de llamada que desea eliminar. En la implementación original, la devolución de llamada era un objeto {{domxref ("MediaQueryListListener")}} no estándar. En la nueva implementación se utiliza el mecanismo de eventos estándar y la devolución de llamada es una función estándar.
+
+ +

Return value

+ +

Void.

+ +

Ejemplos

+ +
var mql = window.matchMedia('(max-width: 600px)');
+
+function screenTest(e) {
+  if (e.matches) {
+    /* the viewport is 600 pixels wide or less */
+    para.textContent = 'This is a narrow screen — less than 600px wide.';
+    document.body.style.backgroundColor = 'red';
+  } else {
+    /* the viewport is more than than 600 pixels wide */
+    para.textContent = 'This is a wide screen — more than 600px wide.';
+    document.body.style.backgroundColor = 'blue';
+  }
+}
+
+mql.addListener(screenTest);
+
+// Later on, when it is no longer needed
+mql.removeListener(screenTest);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName("CSSOM View", "#dom-mediaquerylist-removelistener", "removeListener")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatVersionUnknown}}{{CompatGeckoDesktop("6.0")}}1012.15
New version spec update{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
New version spec update{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("55")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/mediasource/index.html b/files/es/web/api/mediasource/index.html new file mode 100644 index 0000000000..2f5ff914c9 --- /dev/null +++ b/files/es/web/api/mediasource/index.html @@ -0,0 +1,182 @@ +--- +title: MediaSource +slug: Web/API/MediaSource +translation_of: Web/API/MediaSource +--- +

{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}

+ +

El MediaSource interfaz representa un recurso de media en datos por un {{domxref("HTMLMediaElement")}} objeto. Un MediaSource objeto puede ser atribuido a un {{domxref("HTMLMediaElement")}} para ser reproducido por el usuario.

+ +

Constructor

+ +
+
{{domxref("MediaSource.MediaSource", "MediaSource()")}}
+
construye y retorna un MediaSource objeto sin asociar un recurso con buffers.
+
+ +

Propiedades

+ +

Inherits properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}
+
Returns a {{domxref("SourceBufferList")}} object containing the list of {{domxref("SourceBuffer")}} objects associated with this MediaSource.
+
{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}
+
Returns a {{domxref("SourceBufferList")}} object containing a subset of the {{domxref("SourceBuffer")}} objects contained within {{domxref("SourceBuffers")}} — the list of objects providing the selected video track,  enabled audio tracks, and shown/hidden text tracks.
+
{{domxref("MediaSource.readyState")}} {{readonlyInline}}
+
Returns an enum representing the state of the current MediaSource, whether it is not currently attached to a media element (closed), attached and ready to receive {{domxref("SourceBuffer")}} objects (open), or attached but the stream has been ended via {{domxref("MediaSource.endOfStream()")}} (ended.)
+
{{domxref("MediaSource.duration")}}
+
Gets and sets the duration of the current media being presented.
+
+ +
+
+ +
+
+ +

Methods

+ +

Inherits properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("MediaSource.addSourceBuffer()")}}
+
Creates a new {{domxref("SourceBuffer")}} of the given MIME type and adds it to the MediaSource's {{domxref("SourceBuffers")}} list.
+
{{domxref("MediaSource.removeSourceBuffer()")}}
+
Removes the given {{domxref("SourceBuffer")}} from the {{domxref("SourceBuffers")}} list associated with this MediaSource object.
+
{{domxref("MediaSource.endOfStream()")}}
+
Signals the end of the stream.
+
+

Static methods

+
+
{{domxref("MediaSource.isTypeSupported()")}}
+
Returns a {{domxref("Boolean")}} value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create {{domxref("SourceBuffer")}} objects for that MIME type.
+
+ +

Examples

+ +

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here (you can also download the source for further investigation.)

+ +
var video = document.querySelector('video');
+
+var assetURL = 'frag_bunny.mp4';
+// Need to be specific for Blink regarding codecs
+// ./mp4info frag_bunny.mp4 | grep Codec
+var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
+
+if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
+  var mediaSource = new MediaSource;
+  //console.log(mediaSource.readyState); // closed
+  video.src = URL.createObjectURL(mediaSource);
+  mediaSource.addEventListener('sourceopen', sourceOpen);
+} else {
+  console.error('Unsupported MIME type or codec: ', mimeCodec);
+}
+
+function sourceOpen (_) {
+  //console.log(this.readyState); // open
+  var mediaSource = this;
+  var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+  fetchAB(assetURL, function (buf) {
+    sourceBuffer.addEventListener('updateend', function (_) {
+      mediaSource.endOfStream();
+      video.play();
+      //console.log(mediaSource.readyState); // ended
+    });
+    sourceBuffer.appendBuffer(buf);
+  });
+};
+
+function fetchAB (url, cb) {
+  console.log(url);
+  var xhr = new XMLHttpRequest;
+  xhr.open('get', url);
+  xhr.responseType = 'arraybuffer';
+  xhr.onload = function () {
+    cb(xhr.response);
+  };
+  xhr.send();
+};
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Source Extensions', '#mediasource', 'MediaSource')}}{{Spec2('Media Source Extensions')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support23{{CompatGeckoDesktop("25.0")}}[1]
+ {{CompatGeckoDesktop("42.0")}}		11[2]158
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4.4 +

{{CompatNo}}

+ 		{{CompatNo}}1130{{CompatNo}}
+
+ +

[1] Available after switching the about:config preference media.mediasource.enabled to true. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.

+ +

[2] Only works on Windows 8+.

+ +

See also

+ + diff --git a/files/es/web/api/mediastreamaudiosourcenode/index.html b/files/es/web/api/mediastreamaudiosourcenode/index.html new file mode 100644 index 0000000000..7e620ac305 --- /dev/null +++ b/files/es/web/api/mediastreamaudiosourcenode/index.html @@ -0,0 +1,129 @@ +--- +title: MediaStreamAudioSourceNode +slug: Web/API/MediaStreamAudioSourceNode +tags: + - API + - MediaStreamAudioSourceNode + - Web Audio API +translation_of: Web/API/MediaStreamAudioSourceNode +--- +

{{APIRef("Web Audio API")}}

+ +
+

La interfaz MediaStreamAudioSourceNode representa una fuente de audio compuesta por un WebRTC {{domxref("MediaStream")}} (tal como una cámara web o un micrófono.) Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.

+
+ +

El MediaElementSourceNode no tiene entradas y una y sólo una salida, y es creado usando el método {{domxref("AudioContext.createMediaStreamSource")}}.

+ +

La cantidad de canales en la salida es igual al número de canales en  {{domxref("AudioMediaStreamTrack")}}. Si no existe un flujo de media válido, entonces el número de canales de salida será un canal silencioso.

+ +
+

Nota: MediaStreamAudioSourceNode selecciona la pista de audio automáticamente, y puede que no siempre sea predecible. Usted debería considerar seriamente usar el {{domxref("MediaStreamTrackAudioSourceNode")}} en su lugar, que se crea especificando la pista exacta que desea utilizar.

+
+ + + + + + + + + + + + + + + + +
Número de entradas0
Número de salidas1
Cantidad de canalesdefinido por {{domxref("AudioMediaStreamTrack")}} pasado al método  {{domxref("AudioContext.createMediaStreamSource")}} que lo creó.
+ +

Propiedades

+ +

Heredadas de su padre, {{domxref("AudioNode")}}.

+ +

Métodos

+ +

Heredadas de su padre, {{domxref("AudioNode")}}.

+ +

Ejemplo

+ +

{{page("/en-US/docs/Web/API/AudioContext.createMediaStreamSource","Example")}}

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Audio API', '#the-mediastreamaudiosourcenode-interface', 'MediaStreamAudioSourceNode')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico14 {{property_prefix("webkit")}}{{CompatGeckoDesktop("25")}}{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísiticaAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatGeckoMobile("25")}}1.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/mediastreamtrack/index.html b/files/es/web/api/mediastreamtrack/index.html new file mode 100644 index 0000000000..3bc2159332 --- /dev/null +++ b/files/es/web/api/mediastreamtrack/index.html @@ -0,0 +1,181 @@ +--- +title: MediaStreamTrack +slug: Web/API/MediaStreamTrack +translation_of: Web/API/MediaStreamTrack +--- +
{{APIRef("WebRTC")}}
+ +

Sumario

+ +

La interfaz MediaStream  representa un flujo de contenido de los medios. Un flujo consiste en gran cantidad de  tracks, como pistas de audio o video.

+ +

Propiedades

+ +
+
{{domxref("MediaStreamTrack.enabled")}}
+
Es un valor Booleano con un valor de  true si la pista está habilitada, que se permite para renderizar el fujo fuente del medio; o false si está desactivado, ue no está rederizando el flujo de la fuente de medios que el silencio y la oscuridad. Si la pista se ha desconectado, este valor puede ser cambiado, pero no tiene más efecto.
+
{{domxref("MediaStreamTrack.id")}} {{readonlyInline}}
+
Retorna un {{domxref("DOMString")}} que contiene un identificador único (GUID) para la pista; que es generado por le navegador.
+
{{domxref("MediaStreamTrack.kind")}} {{readonlyInline}}
+
Retorna un {{domxref("DOMString")}} se establece en "audio" si la pista es un audio y para "video", si es una pista de video. Este no cambia si la pista se disociada de su fuente.
+
{{domxref("MediaStreamTrack.label")}} {{readonlyInline}}
+
Retorna un {{domxref("DOMString")}} que contiene una etiqueta agente-asignado por el usuario que identifica la fuente de la pista, como en  "internal microphone".  La cadena puede dejarse vacío y está vacía, siempre y cuando ninguna fuente haya sido conectada. Cuando la pista está disociada de la fuente, la etiqueta no cambia.
+
{{domxref("MediaStreamTrack.muted")}} {{readonlyInline}}
+
Retorna un valor booleano con un valor de true si la pista esta silenciada, de lo contrario false.
+
{{domxref("MediaStreamTrack.readonly")}} {{readonlyInline}}
+
Retona un valor Booleano con un valor de true  si la pista es de solo lectura ( una fuente de archivo de vídeo o una cámara que los ajustes no puedan ser modificados), de lo contrario false.
+
{{domxref("MediaStreamTrack.readyState")}} {{readonlyInline}}
+
Retorna un valor enumerado dando el estado de la pista. Este toma uno de los siguientes valores: +
    +
  • "live" el cual indica  que una entrada es conectada y hace de esta el mejor esfuerzo en proveer datos en tiempo real. En este caso, la salida de datos puede ser cambiada a on u off usando el atributo MediaStreamTrack.enabled.
    • +
  • "ended" este indica que la entrada no esta obteniendo algun dato mas y negará proporcionar nuevos datos.
    • +
+
+
{{domxref("MediaStreamTrack.remote")}} {{readonlyInline}}
+
retorna un booleano con un valor de verdadero si la pista es originada por  {{domxref("RTCPeerConnection")}}, falso a cualquier otro.
+
+ +

Disparador de eventos

+ +
+
{{domxref("MediaStreamTrack.onstarted")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción a realizar cuando el evento {{event("started")}} es disparado sobre el objeto,  que es cuando un objeto {{domxref("MediaStreamTrack")}} es añadido.
+
{{domxref("MediaStreamTrack.onmute")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento {{event("mute")}} es disparado sobre el objeto, que es cuando la transmición es terminada.
+
{{domxref("MediaStreamTrack.onunmute")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento  {{event("unmute")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}} es removido por este.
+
{{domxref("MediaStreamTrack.onoverconstrained")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un objeto {{event("overconstrained")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}}  es removido por este.
+
{{domxref("MediaStreamTrack.oneended")}}
+
Es un contenedor {{domxref("EventHandler")}} de la acción ha realizar cuando un evento {{event("ended_(MediaStream)", "ended")}} es disparado sobre el objeto, que es cuando un objeto  {{domxref("MediaStreamTrack")}} es removido por este.
+
+ +

Métodos

+ +
+
{{domxref("MediaStreamTrack.getConstraints()")}}
+
 
+
{{domxref("MediaStreamTrack.applyConstraints()")}}
+
 
+
{{domxref("MediaStreamTrack.getSettings()")}}
+
 
+
{{domxref("MediaStreamTrack.getCapabilities()")}}
+
 
+
{{domxref("MediaStreamTrack.clone()")}}
+
 
+
{{domxref("MediaStreamTrack.stop()")}}
+
Detiene la reproducción del origen asociado a la pista, pero el origen y la pista son desasociados. El estado de la pista es un conjunto de ended.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Media Capture', '#mediastreamtrack', 'MediaStreamTrack')}}{{Spec2('Media Capture')}}Initial definition
+ +

Compatibilidad de los navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
stop(){{CompatUnknown}}{{CompatGeckoDesktop(34)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
muted, onmuted, onunmuted, readonly, readyState, remote, onstarted, onended, onoverconstrained, appendConstraint(), applyConstraints(), constraints(), getConstraints(){{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+ + + + + + +
stop()
+ 		{{CompatUnknown}}{{CompatGeckoDesktop(34)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
muted, onmuted, onunmuted, readonly, readyState, remote, onstarted, onended, onoverconstrained, appendConstraint(), applyConstraints(), constraints(), getConstraints(){{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Ver támbien

+ + diff --git a/files/es/web/api/messageevent/index.html b/files/es/web/api/messageevent/index.html new file mode 100644 index 0000000000..1d1e898be5 --- /dev/null +++ b/files/es/web/api/messageevent/index.html @@ -0,0 +1,195 @@ +--- +title: MessageEvent +slug: Web/API/MessageEvent +translation_of: Web/API/MessageEvent +--- +
{{APIRef("HTML DOM")}}
+ +

La interface MessageEvent representa un mensaje recibido por un objeto de destino.

+ +

Este es usado  para representar mensajes en : 

+ + + +

La acción desencadenada por este evento es definida en una función establecida como el controlador de eventos para el evento pertinente {{event("message")}} ( es decir :  Usando un manejador de onmessage  como se lista arriba).

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
+
Crear un nuevo MessageEvent.
+
+ +

Propiedades

+ +

Esta interface tambien herada propiedadesde desde su padre {{domxref("Evento")}}.

+ +
+
{{domxref("MessageEvent.data")}} {{readonlyInline}}
+
La información enviada por el emisor del mensaje.
+
{{domxref("MessageEvent.origin")}} {{readonlyInline}}
+
{{domxref("USVString")}} es una representacion del origen del emisor del mensaje. 
+
{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
+
{{domxref("DOMString")}} es una representación de una ID unico para el evento.
+
{{domxref("MessageEvent.source")}} {{readonlyInline}}
+
El MessageEventSource (El cual puede ser un {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) es ima representación del mensaje emitido.
+
{{domxref("MessageEvent.ports")}} {{readonlyInline}}
+
Un  array de objetos {{domxref("MessagePort")}} representa los puertos asociados al canal, el mensaje se esta enviado a traves de (donde sea apropiado,  por ejemplo, en mensajes de canal o al enviar un mensaje a un trabajador compartido).
+
+ +

Metodos

+ +

Esta interface tambien herada propiedadesde desde su padre, {{domxref("Evento")}}.

+ +
+
{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}
+
Inicializar un vento de mensaje. No use esto mas — en vez de eso use el constructor {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} .
+
+ +

Ejemplos

+ +

En nuestro Ejemplo basico de trabajador compartido(Ejecutar trabajador compartdo ), Tenemos dos paginas HTML, cada una de las cuales usa algo de JavaScript para mejorar un calculo simple. Los diferentes scripts estan usando el mismo archivo de trabajo para mejorar el calculo — Ambos pueden accederlo,  Incluso si sus paginas esta corriendo n diferentes ventanas. 

+ +

The following code snippet shows creation of a SharedWorker object using the {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor. Both scripts contain this:

+ +
var myWorker = new SharedWorker('worker.js');
+
+ +

Both scripts then access the worker through a {{domxref("MessagePort")}} object created using the {{domxref("SharedWorker.port")}} property. If the onmessage event is attached using addEventListener, the port is manually started using its start() method:

+ +
myWorker.port.start();
+ +

When the port is started, both scripts post messages to the worker and handle messages sent from it using port.postMessage() and port.onmessage, respectively:

+ +
first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

Inside the worker we use the {{domxref("SharedWorkerGlobalScope.onconnect")}} handler to connect to the same port discussed above. The ports associated with that worker are accessible in the {{event("connect")}} event's ports property — we then use {{domxref("MessagePort")}} start() method to start the port, and the onmessage handler to deal with messages sent from the main threads.

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9{{CompatUnknown}}{{CompatSafari('10.0+')}}
origin as {{domxref("USVString")}} and source as MessageEventSource{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.0+
origin as {{domxref("USVString")}} and source as MessageEventSource{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver tambien

+ + diff --git a/files/es/web/api/mimetype/index.html b/files/es/web/api/mimetype/index.html new file mode 100644 index 0000000000..0594c0c5eb --- /dev/null +++ b/files/es/web/api/mimetype/index.html @@ -0,0 +1,97 @@ +--- +title: MimeType +slug: Web/API/MimeType +tags: + - API + - Interface + - Plugins + - Referencia +translation_of: Web/API/MimeType +--- +

{{SeeCompatTable}}{{APIRef("HTML DOM")}}

+ +

La interfaz MimeType provee información acerca de un tipo MIME asociado con un plugin en particular. {{domxref("NavigatorPlugins.mimeTypes")}} retorna un arreglo de estos objetos.

+ +

Propiedades

+ +
+
{{domxref("MimeType.type")}}
+
Retorna el tipo MIME del plugin asociado.
+
{{domxref("MimeType.description")}}
+
Retorna la descripción del plugin asociado o un string vacío en caso de no haberla.
+
{{domxref("MimeType.suffixes")}}
+
Un string que contiene las extensiones de archivo válidas para los datos mostrados por el plugin, o un string vacío si una extensión de archivo no es válida para el módulo en particular. Por ejemplo, un módulo de decriptación de contenido del navegador podría aparecer en la lista de plugins, pero soportar más extensiones de archivo de las que se pueden anticipar. Por lo tanto, podría retornar un string vacío.
+
{{domxref("MimeType.enabledPlugin")}}
+
Retorna una instancia de {{domxref("Plugin")}} que contiene la información acerca del plugin en sí mismo.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG','#mimetype','MimeType')}}{{Spec2('HTML WHATWG')}}Definición Inicial.
+ +

Compatibilidad de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/mouseevent/index.html b/files/es/web/api/mouseevent/index.html new file mode 100644 index 0000000000..74aabe922e --- /dev/null +++ b/files/es/web/api/mouseevent/index.html @@ -0,0 +1,298 @@ +--- +title: MouseEvent +slug: Web/API/MouseEvent +tags: + - API +translation_of: Web/API/MouseEvent +--- +

{{APIRef("DOM Events")}}

+ +

The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.

+ +

MouseEvent derives from {{domxref("UIEvent")}}, which in turn derives from {{domxref("Event")}}. Though the {{domxref("MouseEvent.initMouseEvent()")}} method is kept for backward compatibility, creating of a MouseEvent object should be done using the {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} constructor.

+ +

Several more specific events derivate from MouseEvent: {{domxref("WheelEvent")}} and {{domxref("DragEvent")}}.

+ +

Constructor

+ +
+
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
+
Creates a MouseEvent object.
+
+ +

Properties

+ +

This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.altKey")}} {{readonlyinline}}
+
Returns true if the alt key was down when the mouse event was fired.
+
{{domxref("MouseEvent.button")}} {{readonlyinline}}
+
The button number that was pressed when the mouse event was fired. 
+
{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
+

The buttons being pressed when the mouse event was fired

+
+
{{domxref("MouseEvent.clientX")}} {{readonlyinline}}
+
The X coordinate of the mouse pointer in local (DOM content) coordinates.
+
{{domxref("MouseEvent.clientY")}} {{readonlyinline}}
+
The Y coordinate of the mouse pointer in local (DOM content) coordinates.
+
{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
+
Returns true if the control key was down when the mouse event was fired.
+
{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
+
Returns true if the meta key was down when the mouse event was fired.
+
{{domxref("MouseEvent.movementX")}} {{readonlyinline}}
+
The X coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.
+
{{domxref("MouseEvent.movementY")}} {{readonlyinline}}
+
The Y coordinate of the mouse pointer relative to the position of the last {{event("mousemove")}} event.
+
{{domxref("MouseEvent.region")}} {{readonlyinline}}
+
Returns the id of the hit region affected by the event. If no hit region is affected, null is returned.
+
{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
+
+

The secondary target for the event, if there is one.

+
+
{{domxref("MouseEvent.screenX")}} {{readonlyinline}}
+
The X coordinate of the mouse pointer in global (screen) coordinates.
+
{{domxref("MouseEvent.screenY")}} {{readonlyinline}}
+
The Y coordinate of the mouse pointer in global (screen) coordinates.
+
{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
+
Returns true if the shift key was down when the mouse event was fired.
+
{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}
+
The button being pressed when the mouse event was fired.
+
{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}
+
The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
+
{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}
+
+

The type of device that generated the event (one of the MOZ_SOURCE_* constants listed below). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). The possible values are:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Constant nameValueDesription
MouseEvent.MOZ_SOURCE_UNKNOWN0The input device is unknown.
MouseEvent.MOZ_SOURCE_MOUSE1The event was generated by a mouse (or mouse-like device).
MouseEvent.MOZ_SOURCE_PEN2The event was generated by a pen on a tablet.
MouseEvent.MOZ_SOURCE_ERASER3The event was generated by an eraser on a tablet.
MouseEvent.MOZ_SOURCE_CURSOR4The event was generated by a cursor.
MouseEvent.MOZ_SOURCE_TOUCH5The event was generated on a touch interface.
MouseEvent.MOZ_SOURCE_KEYBOARD6The event was generated by a keyboard.
+
+
+ +

Methods

+ +

This interface also inherits methods of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.getModifierState()")}}
+
Returns the current state of the specified modifier key. See the {{domxref("KeyboardEvent.getModifierState")}}() for details.
+
{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
+
Initializes the value of a MouseEvent created. If the event has already being dispatched, this method does nothing.
+
+ +

Example

+ +

This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. 

+ +
function simulateClick() {
+  var evt = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);
+ +
<p><label><input type="checkbox" id="checkbox"> Checked</label>
+<p><button id="button">Click me</button>
+ +

Click on the button to see how the sample works:

+ +

{{ EmbedLiveSample('Example', '', '', '') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}{{Spec2('HTML WHATWG')}}From {{SpecName('DOM3 Events')}}, added the region property.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}{{Spec2('Pointer Lock')}}From {{SpecName('DOM3 Events')}}, added movementX and movementY properties.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.movementX","movementX")}}
+ {{domxref("MouseEvent.movementY","movementY")}}		{{CompatVersionUnknown()}} {{property_prefix("moz")}}{{CompatVersionUnknown()}} {{property_prefix("webkit")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{ domxref("MouseEvent.buttons", "buttons") }}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{ domxref("MouseEvent.which", "which") }}1.01.09.05.01.0
{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}{{CompatGeckoDesktop(15)}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}{{CompatGeckoDesktop(11)}}{{CompatVersionUnknown()}}{{ CompatUnknown() }}{{CompatVersionUnknown()}}{{ CompatUnknown() }}
{{domxref("MouseEvent.region")}}{{CompatGeckoDesktop(32)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/es/web/api/mouseevent/initmouseevent/index.html b/files/es/web/api/mouseevent/initmouseevent/index.html new file mode 100644 index 0000000000..0e5a795b27 --- /dev/null +++ b/files/es/web/api/mouseevent/initmouseevent/index.html @@ -0,0 +1,60 @@ +--- +title: event.initMouseEvent +slug: Web/API/MouseEvent/initMouseEvent +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/MouseEvent/initMouseEvent +--- +

{{ApiRef("DOM Events")}}{{deprecated_header}}

+ +
+

No utilize este método porque está obsoleto.

+ +

Usa constructores de eventos específicos, como {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}. La página Creando y disparando eventos da más información sobre cómo usarlos.

+
+ +

Resumen

+ +

Asigna el valor inicial de un evento de ratón una vez creado (normalmente usando el método document.createEvent).

+ +

Sintaxis

+ +
event.initMouseEvent(type,canBubble,cancelable,view,detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,button,relatedTarget);
+
+ +
+
type
+
la cadena del type. Los tipos posibles para un evento de ratón incluyen: click, mousedown, mouseup, mouseover, mousemove, mouseout.
+
canBubble
+
si el elemento puede ser recurrente. Pone el valor de event.bubbles.
+
cancelable
+
si la acción inicial del evento puede o no ser cancelada. Pone el valor de event.cancelable.
+
view
+
el valor AbstractView del evento. Aquí debes pasar el objeto window. Pone el valor de event.view.
+
detail
+
el contador de clic del evento. Pone el valor de event.detail.
+
screenX
+
la coordenada x en pantalla donde ha ocurrido el evento. Pone el valor de event.screenX.
+
screenY
+
la coordenada y en pantalla donde ha ocurrido el evento. Pone el valor de event.screenY.
+
clientX
+
la coordenada client x donde ha ocurrido el evento. Pone el valor de event.clientX.
+
clientY
+
la coordenada client y donde ha ocurrido el evento. Pone el valor de event.clientY.
+
ctrlKey
+
si se ha pulsado o no la tecla Control mientras ha ocurrido el evento. Pone el valor de event.ctrlKey.
+
altKey
+
si se ha pulsado o no la tecla Alt mientras ha ocurrido el evento. Pone el valor de event.altKey.
+
shiftKey
+
si se ha pulsado o no la tecla Mayúsculas mientras ha ocurrido el evento. Pone el valor de event.shiftKey.
+
metaKey
+
si se ha pulsado o no una meta tecla mientras ha ocurrido el evento. Pone el valor de event.metaKey.
+
button
+
el ratón del evento event.button.
+
relatedTarget
+
el destino del evento related EventTarget. Sólo se usa con algún tipo de evento (ejemplo: mouseover y mouseout). En otros casos, devuelve null.
+
+ +

Especificación

+ +

DOM Level 2 Events: initMouseEvent

diff --git a/files/es/web/api/mouseevent/shiftkey/index.html b/files/es/web/api/mouseevent/shiftkey/index.html new file mode 100644 index 0000000000..7f2fc25d61 --- /dev/null +++ b/files/es/web/api/mouseevent/shiftkey/index.html @@ -0,0 +1,126 @@ +--- +title: MouseEvent.shiftKey +slug: Web/API/MouseEvent/shiftKey +translation_of: Web/API/MouseEvent/shiftKey +--- +

{{APIRef("DOM Events")}}

+ +

El evento de MouseEvent.shiftKey es una propiedad de solo lectura que indica si la tecla de shift se presionó (true) o no (false).

+ +

Sintaxis

+ +
var shiftKeyPressed = instanceOfMouseEvent.shiftKey
+
+ +

Valor que retorna

+ +

Un valor booleano

+ +

Ejemplo

+ +
<html>
+<head>
+<title>Ejemplo de shiftKey</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Tecla presionada: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "SHIFT presionada: " + e.shiftKey + "\n"
+    + "ALT presionado: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>Presione cualquier tecla, con o sin la tecla SHIFT.<br />
+También puede utilizar SHIFT junto a la tecla ALT.</p>
+</body>
+</html>
+
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM3 Events','#widl-MouseEvent-shiftKey','MouseEvent.shiftKey')}}{{Spec2('DOM3 Events')}}Sin cambios desde {{SpecName('DOM2 Events')}}.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent.shiftKey')}}{{Spec2('DOM2 Events')}}Primera definición.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver más

+ + diff --git a/files/es/web/api/mozsocial/closepanel/index.html b/files/es/web/api/mozsocial/closepanel/index.html new file mode 100644 index 0000000000..1b2305967f --- /dev/null +++ b/files/es/web/api/mozsocial/closepanel/index.html @@ -0,0 +1,19 @@ +--- +title: MozSocial.closePanel +slug: Web/API/MozSocial/closePanel +tags: + - Social +translation_of: Archive/Social_API/MozSocial/closePanel +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Cierra el panel social que está actualmente abierto en el panel del proveedor de servicios sociales de nivel superior.

+

Sintaxis

+
MozSocial.closePanel();
+
+

Parametros

+

Ninguno.

+

Especificación

+

No es parte de ninguna especificación.

diff --git a/files/es/web/api/mozsocial/getattention/index.html b/files/es/web/api/mozsocial/getattention/index.html new file mode 100644 index 0000000000..e362749b56 --- /dev/null +++ b/files/es/web/api/mozsocial/getattention/index.html @@ -0,0 +1,19 @@ +--- +title: MozSocial.getAttention +slug: Web/API/MozSocial/getAttention +tags: + - Social +translation_of: Archive/Social_API/MozSocial/getAttention +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Ejecuta algunas acciones, posiblemente específicas de la plataforma, diseñadas para obtener la atención del usuario. Esto puede involucrar la reproducción de un efecto de sonido, parpadeo en la pantalla, o mostrando alguna otra forma de efecto.

+

Sintaxis

+
MozSocial.getAttention();
+
+

Parámetros

+

Ninguno.

+

Especificación

+

No es parte de ninguna especificación.

diff --git a/files/es/web/api/mozsocial/getworker/index.html b/files/es/web/api/mozsocial/getworker/index.html new file mode 100644 index 0000000000..e32cc7b240 --- /dev/null +++ b/files/es/web/api/mozsocial/getworker/index.html @@ -0,0 +1,19 @@ +--- +title: MozSocial.getWorker +slug: Web/API/MozSocial/getWorker +translation_of: Archive/Social_API/MozSocial/getWorker +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Devuelve una referencia al  worker del servicio de contenidos de redes sociales. Una vez obtenido, puedes llamar a su método postMessage() para comunicarte con él. Puedes usar uno de los  mensajes estándares para redes sociales, o mensajes específicos de ese servicio.

+

Sintaxis

+
var socialWorker = MozSocial.getWorker();
+
+

Parámetros

+

Ninguno.

+

Valor devuelto

+

Una referencia al worker del servicio.

+

Especificación

+

No forma parte de ninguna especificación.

diff --git a/files/es/web/api/mozsocial/index.html b/files/es/web/api/mozsocial/index.html new file mode 100644 index 0000000000..a2f559a9df --- /dev/null +++ b/files/es/web/api/mozsocial/index.html @@ -0,0 +1,44 @@ +--- +title: MozSocial +slug: Web/API/MozSocial +tags: + - API +translation_of: Archive/Social_API/MozSocial +--- +
{{ ApiRef("Social API") }} {{non-standard_header}}{{fx_minversion_header("17.0")}}
+ +

The MozSocial object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.

+ +
+

Note: Although Mozilla hopes to submit this API for standardization eventually, it has not yet done so.

+
+ +

Properties

+ +
+
{{domxref("MozSocial.isVisible")}}
+
Returns a Boolean value; the result is true if the content is visible, otherwise it's false.
+
+ +

Methods

+ +
+
{{domxref("MozSocial.closePanel()")}}
+
Closes the currently open flyout panel.
+
{{domxref("MozSocial.getAttention()")}}
+
Performs some action designed to get the user's attention; the exact behavior may vary from platform to platform. This might display a visual effect, play an audible notification, flash the screen, or use some other technique.
+
{{domxref("MozSocial.getWorker()")}}
+
Returns a reference to the service worker; once content has this reference, it can call worker.port.postMessage() method to communicate with the service.
+
{{domxref("MozSocial.openChatWindow()")}}
+
Opens a chat window that is anchored to the bottom of the browser window. Each chat window is expected to be a singular chat, but functionality may vary by provider.
+
{{domxref("MozSocial.openPanel()")}}
+
Opens a flyout panel attached to the sidebar at a given vertical offset. This might be, for example, used to display the actual conversation corresponding to a notification in the sidebar.
+
{{domxref("MozSocial.share()")}}
+
Initiates a share action via the SocialAPI Share panel.  One argument is passed, an object containing "url", "title", "description", "source" and "image".
+
+ +

See also

+ + diff --git a/files/es/web/api/mozsocial/isvisible/index.html b/files/es/web/api/mozsocial/isvisible/index.html new file mode 100644 index 0000000000..7bc90e47da --- /dev/null +++ b/files/es/web/api/mozsocial/isvisible/index.html @@ -0,0 +1,22 @@ +--- +title: MozSocial.isVisible +slug: Web/API/MozSocial/isVisible +tags: + - Social +translation_of: Archive/Social_API/MozSocial/isVisible +--- +

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

{{ ApiRef() }}

+

Resumen

+

Indica si la barra lateral del contenido del proveedor de social media está o no visible actualmente.

+

Sintaxis

+
var visible = navigator.MozSocial.isVisible
+
+

Al retornar, visible es true si la barra lateral es visible actualmente; de otro modo es false.

+

Especificación

+

No es parte de ninguna especificación.

+

Ver también

+ diff --git a/files/es/web/api/mozsocial/openchatwindow/index.html b/files/es/web/api/mozsocial/openchatwindow/index.html new file mode 100644 index 0000000000..26f6b97643 --- /dev/null +++ b/files/es/web/api/mozsocial/openchatwindow/index.html @@ -0,0 +1,26 @@ +--- +title: MozSocial.openChatWindow +slug: Web/API/MozSocial/openChatWindow +translation_of: Archive/Social_API/MozSocial/openChatWindow +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Abre una ventana de chat, anclada en la parte inferior de la ventana del navegador. Cada ventana de chat suele ser un one-on-one chat, pero esta funcionalidad puede variar dependiendo del proveedor.

+

Sintaxis

+
MozSocial.openChatWindow(toUrl, callback);
+
+

Parametros

+
+
+ toUrl
+
+ URL a la que se abre la conexión de chat.
+
+ callback
+
+ Un objeto para recibir notificaciones de devolución de llamada en la conexión. La devolución de llamada recibe como entrada una referencia a la ventana de chat. Vease Implementing chat functionality para más detalles.
+
+

Especificaciones

+

No es parte de ninguna especificación.

diff --git a/files/es/web/api/mozsocial/openpanel/index.html b/files/es/web/api/mozsocial/openpanel/index.html new file mode 100644 index 0000000000..9ea96cd5bd --- /dev/null +++ b/files/es/web/api/mozsocial/openpanel/index.html @@ -0,0 +1,30 @@ +--- +title: MozSocial.openPanel +slug: Web/API/MozSocial/openPanel +translation_of: Archive/Social_API/MozSocial/openPanel +--- +

{{ ApiRef() }}

+

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

Resumen

+

Abre un panel desplegable sujeto a la barra lateral del proveedor de medios sociales con una distancia vertical dada.

+

Sintaxis

+
MozSocial.openPanel(toUrl, offset, callback);
+
+

Parámetros

+
+
+ toUrl
+
+ La URL al contenido a presentar en el panel.
+
+ offset
+
+ La distancia vertical, en pixeles, a la cual posicionar el panel desplegable.
+
+ callback
+
+ Un objeto para recibir notificaciones devueltas por la conexión. La llamada de vuelta recibe como entrada una referencia al panel desplegable. <<<OCUPA ENLACE A DETALLES>>>
+
+

Especificación

+

No es parte de ninguna especificación.

diff --git a/files/es/web/api/mutationobserver/index.html b/files/es/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..f0fe2a4b01 --- /dev/null +++ b/files/es/web/api/mutationobserver/index.html @@ -0,0 +1,330 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

MutationObserver establece un mecanismo para reaccionar ante cambios en el DOM. Ha sido diseñado como un sustituto de los Mutation Events definidos en las especificaciones de DOM3 Events.

+ +

Constructor

+ +

MutationObserver()

+ +

Constructor para la instaciación de nuevos DOM mutation observers.

+ +
MutationObserver(
+  function callback
+);
+
+ +
Parámetros
+ +
+
callback
+
La función que será llamada en cada mutación del DOM. El observer llamará a esta función con dos argumentos. El primero es un array de objetos, cada uno del tipo MutationRecord. El segundo es la propia instancia del MutationObserver.
+
+ +

Métodos

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +

observe()

+ +

Registra la instancia del MutationObserver  para recibir notificaciones de las mutaciones del DOM sobre el nodo especificado.

+ +
void observe(
+  {{domxref("Node")}} target,
+  MutationObserverInit options
+);
+
+ +
Parámetros
+ +
+
target
+
El {{domxref("Node")}} sobre el que observar las mutaciones del DOM.
+
options
+
Un objeto MutationObserverInit, que especifica que mutaciones del DOM deben ser informadas.
+
+ +
NOTA: Añadir un observador a un elemento es igual que addEventListener, si usted observa el elemento múltiples veces no hace ninguna diferencia. Si se observa dos veces un elemento, el observe callback no se ejecutará dos veces, ni tampoco tendrá que ejecutar disconnect() dos veces. En otras palabras, una vez el elemento es observado, observarlo de nuevo con la misma instancia del observador no hará nada. Sin embargo, si el callback es diferente por supuesto se le añadirá otro observador.
+ +

disconnect()

+ +

Evita que la instancia de MutationObserver continue recibiendo notificaciones de modificaciones del DOM. Hasta que el método observe() sea usado de nuevo, la función callback no será invocada.

+ +
void disconnect();
+
+ +

takeRecords()

+ +

Vacía la cola de registros de la instancia de MutationObserver devolviendo su contenido.

+ +
Array takeRecords();
+
+ +
Return value
+ +

Returns an Array of MutationRecords.

+ +

MutationObserverInit

+ +

MutationObserverInit es un objeto para el que se pueden especificar las siguientes propiedades:

+ +
NOTA: Como mínimo las propiedades childList, attributes, o characterData deben ser true. En caso contrario, se producirá un error "An invalid or illegal string was specified"
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadDescripción
childList +

Establecer a true si la adición y/o eliminación de elementos hijo del nodo (incluso los nodos text) han se ser observados.

+
attributes +

Establecer a true si los cambios en los atributos deben ser observados

+
characterData +

Establecer a true si los cambios en los datos deben ser observados

+
subtree +

Establecer a true si los cambios tambien deben ser observados en los descendientes.

+
attributeOldValue +

Establecer a true si attributes es true y el valor anterior al cambio debe ser guardado.

+
characterDataOldValue +

Establecer a true si characterData vale true y el dato anterior al cambio de be ser guardado.

+
attributeFilter +

Asigne un array de nombres de atributos locales (sin su espacio de nombres) si no necesita observar los cambios en todos los atributos

+
+ +

MutationRecord

+ +

MutationRecord es el objeto que será pasado a la funcion "callback" del observador. Tiene las siguientes propiedades:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
typeString +

Devuelve:

+ +
    +
  • attributes si el cambio fué en un atributo
    • +
  • characterData si se produjo en un nodo.
    • +
  • childList si se produjo en los nodos del árbol.
    • +
+ +
+
+
target{{domxref("Node")}} +

Devuelve el nodo afectado por el cambio, dependiendo del type:

+ +
    +
  • Para attributes, el elemento cuyos atributos han cambiado.
    • +
  • Para characterData, el nodo CharacterData.
    • +
  • Para childList, El nodo padre cuyos hijos han cambiado.
    • +
+
addedNodes{{domxref("NodeList")}} +

Devuelve los nodos añadidos. Si no tiene nodos añadidos devuelve un NodeList vacio.

+
removedNodes{{domxref("NodeList")}} +

Devuelve los nodos eliminados. Si no tiene nodos eliminados devuelve un NodeList vacio.

+
previousSibling{{domxref("Node")}} +

Devuelve el nodo hermano anterior añadido o eliminado, o el valor null.

+
nextSibling{{domxref("Node")}} +

Devuelve el siguiente nodo hermano añadido o eliminado, o el valor null.

+
attributeNameString +

Devuelve el nombre local del atributo cambiado, o el valor null.

+
attributeNamespaceString +

Devuelve espacio de nombres (namespace) del atributo cambiado, o el valor null.

+
oldValueString +

El valor devuelto depende del type:

+ +
    +
  • Para attributes,el valor anterior del atributo.
    • +
  • Para characterData,los datos antes del cambio
    • +
  • Para childList,devuelve null.
    • +
+
+ +

Ejemplo de uso

+ +

El siguiente ejemplo fué tomado de: this blog post.

+ +
// selecciona el nodo target
+var target = document.querySelector('#some-id');
+
+// Crea una instancia de observer
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// Configura el observer:
+var config = { attributes: true, childList: true, characterData: true };
+
+// pasa al observer el nodo y la configuracion
+observer.observe(target, config);
+
+// Posteriormente, puede detener la observacion
+observer.disconnect();
+
+ +

Lectura adicional

+ + + +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support18 {{ property_prefix("-webkit") }}
+ 26		{{ CompatGeckoDesktop(14) }}11156.0 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE  (Windows Phone) Opera MobileSafari Mobile
Basic support{{ CompatUnknown() }}18 {{ property_prefix("-webkit") }}
+ 26		{{ CompatGeckoMobile(14) }}11 (8.1)15 +

6 {{ property_prefix("-webkit")}}

+ +

7

+
+
+ +

 

diff --git a/files/es/web/api/mutationobserver/mutationobserver/index.html b/files/es/web/api/mutationobserver/mutationobserver/index.html new file mode 100644 index 0000000000..faf72f1db3 --- /dev/null +++ b/files/es/web/api/mutationobserver/mutationobserver/index.html @@ -0,0 +1,98 @@ +--- +title: MutationObserver.MutationObserver() +slug: Web/API/MutationObserver/MutationObserver +translation_of: Web/API/MutationObserver/MutationObserver +--- +
{{APIRef("DOM WHATWG")}}
+ +

El constructor DOM MutationObserver() — parte del interface {{domxref("MutationObserver")}} — crea y devuelve un nuevo objeto observer que llamará a la función especificada (callback), cuando tengan lugar cambios sobre el DOM. Estos observadores no se inician inmediatamente; en primer lugar debemos llamar al método {{domxref("MutationObserver.observe", "observe()")}} para establecer qué parte del DOM observar y que tipo de cambios comunicar.

+ +

Sintaxis

+ +
var observer = new MutationObserver(callback);
+ +

Parámetros

+ +
+
callback
+
La función que será llamada con cada cambio en el DOM, determinado por el nodo, subárbol y opciones. Esta función toma dos parámetros de entrada: un array de objetos {{domxref("MutationRecord")}}, con los cambios producidos, y el MutationObserver que llamó a la función. Para mas detalles vea {{anch("Example", "example")}}
+
 
+
+ +

Valor devuelto

+ +

Un nuevo objeto {{domxref("MutationObserver")}}, configurado para llamar a una determinada función cuando se producca un cambio en el DOM.

+ +

Ejemplo

+ +

Este ejemplo crea un nuevo MutationObserver configurado para observar a un nodo y a sus hijos (subárbol), cuando se añadan o eliminen elementos al mismo; tambien observa cualquier cambio en los atributos de los elementos del árbol.

+ +

La función callback

+ +
function callback(mutationList, observer) {
+  mutationList.forEach((mutation) => {
+    switch(mutation.type) {
+      case 'childList':
+        /* Uno o mas hijos han sido añadidos y/o eliminados del árbol;
+           vea mutation.addedNodes y mutation.removedNodes */
+        break;
+      case 'attributes':
+        /* El valor de un atributo en mutation.target ha cambiado;
+           El nombre del atributo esta en mutation.attributeName y
+           su valor anterior en mutation.oldValue */
+        break;
+    }
+  });
+}
+
+ +

La función callback() es llamada cuando el observer detecta cambios que coinciden con la configuración de consulta especificada cuando llamamos a {{domxref("MutationObserver.observe", "observe()")}} para que inicie la observación.

+ +

El tipo de cambio que se produjo (tanto en la lista de hijos como en los atributos) es detectado observando la propiedad {{domxref("MutationRecord.type", "mutation.type")}}

+ +

Crear e iniciar un  "observer"

+ +

Este código establece el proceso de observación

+ +
var targetNode = document.querySelector("#someElement");
+var observerOptions = {
+  childList: true,
+  attributes: true,
+  subtree: true //Omita o ponga false si no quiere controlar los cambios en los hijos
+}
+
+var observer = new MutationObserver(callback);
+observer.observe(targetNode, observerOptions);
+ +

El subárbol deseado se localiza buscando un elemento cuyo ID es "someElement". Un conjunto de opciones para el "observer" es establecido en el registro observerOptions. En él, especificamos los valores true tanto para childList como attributes, para obtener la información deseada.

+ +

Posteriormente instanciamos el objeto observer, especificando la función callback(), e iniciamos la observación de los nodos del DOM llamando al método observe(), pasandole el nodo y las opciones.

+ +

Desde este momento y hasta que se llame al método {{domxref("MutationObserver.disconnect", "disconnect()")}}, la funcion callback() será llamada cada vez que un elemento sea añadido o eliminado del árbol del DOM, cuya raiz es  targetNode, o uno de sus atributos sea cambiado.

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-mutationobserver-mutationobserver', 'MutationObserver()')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilidad

+ + + +

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

diff --git a/files/es/web/api/mutationobserver/observe/index.html b/files/es/web/api/mutationobserver/observe/index.html new file mode 100644 index 0000000000..607af27cd0 --- /dev/null +++ b/files/es/web/api/mutationobserver/observe/index.html @@ -0,0 +1,95 @@ +--- +title: MutationObserver.observe() +slug: Web/API/MutationObserver/observe +translation_of: Web/API/MutationObserver/observe +--- +
{{APIRef("DOM WHATWG")}}
+ +

El método {{domxref("MutationObserver")}} observe() configura la funcion MutationObserver para que inicie la recepción de cambios en el DOM que coincidan con las opciones dadas.

+ +

Según la configuración, el observador verá un solo {{domxref("Node")}} del árbol del DOM, o ese nodo y alguno o todos los nodos descendientes.

+ +

Para detener al MutationObserver (de modo que la funcion no sea llamada), llame al método {{domxref("MutationObserver.disconnect()")}}.

+ + + +

Sintaxis

+ +
mutationObserver.observe(target[, options])
+
+ +

Parámetros

+ +
+
target
+
 Un {{domxref("Node")}} del DOM (que puede ser un {{domxref("Element")}}) perteneciente al  árbol DOM, o la raiz de un subárbol de nodos, donde observar cambios.
+
options {{optional_inline}}
+
Un objeto {{domxref("MutationObserverInit")}} opcional, que decribe qué cambios en el DOM deben ser enviados a la función callback del observador.
+
+ +

Valor devuelto

+ +

undefined.

+ +

Excepciones

+ +
+
TypeError
+
llamado en cualquiera de las siguientes circunstancias
+
+
    +
  • Las opciones han sido configuradas de tal modo que no existe nada que monitorizar (por ejemplo, si {{domxref("MutationObserverInit.childList")}}, {{domxref("MutationObserverInit.attributes")}}, y {{domxref("MutationObserverInit.characterData")}} son false)
    • +
  • La opcion attributes es  false (indicando que los cambios en los atributos no son monitorizados) y attributeOldValue es true y/o attributeFilter está presente.
    • +
  • Las opciones {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} son true pero {{domxref("MutationObserverInit.characterData")}} es false (indicando que los cambios en los caracteres no se guardan).
    • +
+
+
+ +

Notas de uso

+ +

Reutilizar MutationObservers

+ +

Puede llamar varias veces al método observe() del mismo objeto MutationObserver  para ver los cambios en diferentes partes del árbol del DOM y/o diferentes tipos de cambios. Sin embargo ha de tener en cuenta:

+ + + +

La observación sigue a los nodos cuando se desconecta

+ +

Los observadores de cambios tienen como objetivo permitirle ver un conjunto de nodos a lo largo del tiempo, incluso si la conexion entre estos nodos desaparece. Si esta observando un subárbol de nodos, y una parte del subárbol es desconectado y llevado a otra parte del DOM, continuará viendo ese mismo segmento de nodos, recibiendo las mismas llamadas a la función que antes de ser desconectado.

+ +

En otras palabras, hasta que se le haya notificado que los nodos se están separando de su subárbol monitoreado, recibirá notificaciones de los cambios en ese subárbol y sus nodos. Esto evita que pierda los cambios producidos despues de que la conexion se corte y antes de que tenga la oportunidad de especificar un nuevo monitoreo sobre los cambios en el nodo o subárbol movido.

+ +

De manera que en teoria si mantiene la pista de los objetos {{domxref("MutationRecord")}} que describen los cambios, podrá "deshacer" los mismos, devolviendo el DOM a su estado inicial.

+ +

Ejemplo

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-mutationobserver-observe', 'MutationObserver.observe()')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilidad

+ + + +

{{Compat("api.MutationObserver.observe")}}

diff --git a/files/es/web/api/navigator/donottrack/index.html b/files/es/web/api/navigator/donottrack/index.html new file mode 100644 index 0000000000..fbc7c54b32 --- /dev/null +++ b/files/es/web/api/navigator/donottrack/index.html @@ -0,0 +1,111 @@ +--- +title: Navigator.doNotTrack +slug: Web/API/Navigator/doNotTrack +tags: + - API + - DOM + - Experimental + - Propiedad + - Referencia +translation_of: Web/API/Navigator/doNotTrack +--- +
{{ApiRef("HTML DOM")}}{{SeeCompatTable}}
+ +

Devuelve los ajustes de do-not-track del usuario. Esto es "1" si el usuario ha solicitado no ser rastreado por sitios web, contenidos, o anuncios.

+ +

Sintaxis

+ +
dnt = navigator.doNotTrack;
+
+ +

El valor refleja el de la cabecera do-not-track, ej. valores de {"1", "0", "unspecified" }. Nota: Antes de Gecko 32, Gecko empleaba los valores { "yes", "no", "unspecified"} (bug 887703).

+ +

Ejemplo

+ +
console.log(navigator.doNotTrack);
+// imprime "1" si DNT está habilitado; "0" si el usuario ha aceptado el rastreo; en caso contrario es "unspecified"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Tracking", "#widl-Navigator-doNotTrack", "Navigator.doNotTrack")}}{{Spec2("Tracking")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico23{{CompatGeckoDesktop("9.0")}}[1]9[2]
+ 11[3]		125.1[4]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}[1]{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Antes de Gecko 32 Firefox reporta navigator.doNotTrack con valores de yes y no en lugar de 1 y 0.

+ +

[2] Internet Explorer 9 y 10 utilizan un prefijo, ej. navigator.msDoNotTrack.

+ +

[3] Internet Explorer 11 y Edge utilizan window.doNotTrack en lugar de navigator.doNotTrack.

+ +

[4] Safari 7.1.3+ utiliza window.doNotTrack en lugar de navigator.doNotTrack.

+ +

Vea también

+ + diff --git a/files/es/web/api/navigator/getusermedia/index.html b/files/es/web/api/navigator/getusermedia/index.html new file mode 100644 index 0000000000..e3fd046743 --- /dev/null +++ b/files/es/web/api/navigator/getusermedia/index.html @@ -0,0 +1,184 @@ +--- +title: Navigator.getUserMedia +slug: Web/API/Navigator/getUserMedia +translation_of: Web/API/Navigator/getUserMedia +--- +

Pide al usuario permiso para usar un dispositivo multimedia como una cámara o micrófono. Si el usuario concede este permiso, el successCallback es invocado en la aplicación llamada con un objeto LocalMediaStream como argumento.

+ +

Sintaxis

+ +
navigator.getUserMedia ( constraints, successCallback, errorCallback );
+ +

Ejemplo

+ +

Aquí  hay un ejemplo usando getUserMedia() con los prefijos del navegador.

+ +
navigator.getMedia = ( navigator.getUserMedia ||
+                       navigator.webkitGetUserMedia ||
+                       navigator.mozGetUserMedia);
+
+navigator.getMedia (
+
+   // Restricciones (contraints) *Requerido
+   {
+      video: true,
+      audio: true
+   },
+
+   // Funcion de finalizacion (Succes-Callback) *Requerido
+   function(localMediaStream) {
+      var video = document.querySelector('video');
+      video.src = window.URL.createObjectURL(localMediaStream);
+      video.onloadedmetadata = function(e) {
+         // Haz algo con el video aquí.
+      };
+   },
+
+   // errorCallback *Opcional
+   function(err) {
+    console.log("Ocurrió el siguiente error: " + err);
+   }
+
+);
+ +

Parámetros

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Parámetro +

Requerido/Opcional

+ 		Descripción
constraintsRequeridoEl tipo de multimedia que soporta el objeto LocalMediaStream devuelto en el successCallback.
successCallback RequeridoLa función a invocar cuando se pasa el objeto LocalMediaStream.
errorCallbackOpcionalLa función que se invoca en la aplicación si falla la llamada.
+ +

constraints

+ +

El parámetro constraints es un objeto MediaStreamConstraints con dos miembros booleanos: video y audio. Estos describen el los tipos de multimedia soportados por el objeto LocalMediaStream. Uno o ambos deben ser especificados para validar el argumento del parametro constraint. Si un constraint especificado no es soportado por el navegador, getUserMedia llama a la función errorCallback con el error NOT_SUPPORTED_ERROR. Si el navegador no puede encontrar ninguna fuente multimedia con el tipo especificado, getUserMedia llama a la función errorCallback con el error MANDATORY_UNSATISFIED_ERR.

+ +

Si el valor o el miembro no es especificado en el objeto, el valor del miembro por defecto será falso. El siguiente ejemplo muestra como definir el constraints para audio y video:

+ +
{ video: true, audio: true }
+ +

successCallback

+ +

La función getUserMedia llamará a la función especificada en el successCallback con el objeto LocalMediaStream que contenga la secuencia multimedia. Puedes asignar el objeto al elemento apropiado y trabajar con él, como se muestra en el siguiente ejemplo:

+ +
function(localMediaStream) {
+   var video = document.querySelector('video');
+   video.src = window.URL.createObjectURL(localMediaStream);
+   video.onloadedmetadata = function(e) {
+      // Haz algo aquí con el video.
+   };
+},
+ +

errorCallback

+ +

La función getUserMedia llama a la función indicada en el errorCallback con un código como argumento. Los códigos de error se describen a continuación:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Error Descripción 
PERMISSION_DENIED El usuario denegó el permiso para usar el dispositivo multimadia requerido para esta operación. 
NOT_SUPPORTED_ERROR Un constraint especificado no es soportado por el navegador.
MANDATORY_UNSATISFIED_ERROR No se encontraron fuentes multimedia del tipo especificado en el constraints.
NO_DEVICES_FOUNDNo se encontró ninguna webcam instalada.
+ +

Compatibilidad con los navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Stream API 21{{property_prefix("webkit")}} 20{{property_prefix("moz")}} {{CompatNo}} 12{{CompatUnknown}} 
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Stream API {{CompatNo}} {{CompatNo}}{{CompatUnknown}} 12{{CompatNo}} 
+
+ +

Actualmente el uso de WebRTC para acceder a la cámara esta soportado en Chrome, Opera y Firefox 20.

+ +

Vease también

+ + diff --git a/files/es/web/api/navigator/id/index.html b/files/es/web/api/navigator/id/index.html new file mode 100644 index 0000000000..707d9a6255 --- /dev/null +++ b/files/es/web/api/navigator/id/index.html @@ -0,0 +1,16 @@ +--- +title: navigator.id +slug: Web/API/Navigator/id +translation_of: Archive/Navigator-id +--- +
{{ ApiRef("Persona") }}
+ +

Summary

+ +

The BrowserID protocol defines a new id property on the {{ domxref ("window.navigator")}} object, through which it exposes the BrowserID API, that is the {{domxref("IdentityManager")}} intreface. This API has gone through several significant revisions. Each generation is listed separately below.

+ +

Syntax

+ +
var id = navigator.id
+ +

 

diff --git a/files/es/web/api/navigator/index.html b/files/es/web/api/navigator/index.html new file mode 100644 index 0000000000..6c38d2ca6b --- /dev/null +++ b/files/es/web/api/navigator/index.html @@ -0,0 +1,141 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - HTML-DOM +translation_of: Web/API/Navigator +--- +

{{Apiref}}

+ +

La interfaz Navigator representa el estado y la identidad del user agent. Es completamente consultable y es posible registrar scripts para que ejecuten diversas actividades.

+ +

Un objeto Navigator puede ser obtenido usando la propiedad de sólo lectura {{domxref("Window.navigator")}}.

+ +

Propiedades

+ +

No hereda ninguna propiedad, pero implementa las definidas en {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorStorageUtils")}}, {{domxref("NavigatorCookies")}}, {{domxref("NavigatorConcurrentHardware")}}, {{domxref("NavigatorPlugins")}}, y {{domxref("NavigatorUserMedia")}}.

+ +

Estándar

+ +
+
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un arreglo que contiene cada objeto {{domxref("VRDisplay")}} que está siendo presentado en el momento ({{domxref("VRDisplay.ispresenting")}} es true).
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve el nombre código interno del navegador actual. No confie en que esta propiedad devuelva siempre el valor correcto.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("DOMString")}} con el nombre oficial del navegador. No confie en que esta propiedad devuelva siempre el valor correcto. 
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve la versión del navegador como un {{domxref("DOMString")}}. No confie en que esta propiedad devuelva siempre el valor correcto.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Devuelve un objeto de tipo {{domxref("BatteryManager")}} que puede utilizar para obtener la información del estado de carga de la batería.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provee un objeto {{domxref("NetworkInformation")}} con la información sobre la conexión a la red de un dispositivo.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Devuelve un objeto {{domxref("Geolocation")}} que permite el acceso a la ubicación del dispositivo.
+
{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readOnlyInline}}
+
Devuelve el número de núcleos de procesador lógicos disponibles.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un valor {{domxref("Boolean")}} que indica si el navegador tiene o no habilitado Java.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Devuelve un valor {{domxref("DOMString")}} que representa el idioma elegido por el usuario, generalmente el idioma de la interfaz del navegador. Si no se puede identificar el idioma, devuelve un valor null.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Devuelve un arreglo de {{domxref("DOMString")}} que representan los idiomas conocidos por el usuario, en orden de preferencia.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Devieñve im {{domxref("MimeTypeArray")}} que enlista los tipos MIME soportados por el navegador.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Devuelve un valor {{domxref("Boolean")}} que indica si el navegador está trabajando en línea.
+
{{domxref("Navigator.oscpu")}}
+
Devuelve una cadena de texto que representa al sistema operativo actual.
+
{{domxref("Navigator.permissions")}} {{readonlyinline}}{{experimental_inline}}
+
;
+
Devuelve un objeto {{domxref("Permissions")}} que puede ser usado para consultar y actualizar estatus de permisos de las APIs, acorde a la API Permissions.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve una cadena de texto que representa la plataforma del navegador. No confíe en que esta función devuelva un valor significativo.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Devuelve un {{domxref("PluginArray")}} que enlista los plugins instalados en el navegador.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Siempre devuelve 'Gecko', en cualquier navegador. Esta propiedad es mantenido únicamente por razones de compatibilidad.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Devuelve la cadena de agente usuario del navegador actual.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Devuelve un objeto {{domxref("ServiceWorkerContainer")}}, el cual provee acceso a registro, eliminación, actualización y comunicación con los objetos {{domxref("ServiceWorker")}} para documentos asociados.
+
+ +

No Estándar

+ +
+

Dispositivos con Firefox OS añaden más propiedades no estándares. Puede consultarlas en el artículo de extensiones de Navigator de Firefox OS.

+
+ +
+
{{domxref("Navigator.buildID")}} {{non-standard_inline}}
+
Devuelve el identificador de la compilación del navegador(p.ej., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Devuelve un booleano que indica si el navegador tiene activadas las cookies.
+
{{domxref("Navigator.credentials")}} {{non-standard_inline}}
+
Devuelve la interfaz {{domxref("CredentialsContainer")}}, la cual expone métodos para solicitar credenciales y notificar al agente usuario cuando ocurran eventos de interés, como inicios o cierres de sesión.
+
{{domxref("Navigator.doNotTrack")}} {{non-standard_inline}}
+
Reporta el valor de la preferencia do-not-track. Cuando su valor es positivo ("yes", "1"), el sitio o aplicación web no debe rastrear al usuario.
+
{{domxref("Navigator.id")}} {{non-standard_inline}}
+
Devuelve el objeto {{domxref("window.navigator.id", "id")}}, el cual se puede usar para añadir soporte a BrowserID en el sitio web.
+
{{domxref("Navigator.mediaDevices")}} {{non-standard_inline}}
+
Devuelve una referencia a la interfaz {{domxref("MediaDevices")}}.
+
{{domxref("Navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("Navigator.webkitNotification")}}
+
Devuelve un objeto {{domxref("navigator.mozNotification", "notification")}} que puede ser usado para enviar notificaciones al usuario desde la aplicación web.
+
{{domxref("Navigator.mozSocial")}} {{non-standard_inline}}
+
El objeto devuelto por la propiedad navigator.mozSocial, está disponible en el panel de proveedor de medios sociales para proporcionar funcionalidad la que se necesite.
+
{{domxref("Navigator.presentation")}} {{non-standard_inline}}
+
Devuelve una referencia a la API {{domxref("Presentation")}}.
+
{{domxref("Navigator.productSub")}} {{non-standard_inline}}
+
Devuelve el número de compilación del navegador actual (p.ej., "20060909").
+
{{domxref("Navigator.securitypolicy")}} {{non-standard_inline}}
+
Devuelve una cadena de texto vacía. En Netscape 4.7x, devuelve "US & CA domestic policy" o "Export policy".
+
{{domxref("Navigator.standalone")}} {{non-standard_inline}}
+
Devuelve un booleano que indica si el navegador está ejecutándose en modo standalone. Disponible sólo para Safari de iOS de Apple.
+
{{domxref("Navigator.vendor")}} {{non-standard_inline}}
+
Devuelve el nombre del fabricante del navegador actual (p.ej., "Netscape6").
+
{{domxref("Navigator.vendorSub")}} {{non-standard_inline}}
+
Devuelve la versión de fabricante (p.ej. "6.1").
+
{{domxref("Navigator.webkitPointer")}} {{non-standard_inline}}
+
Devuelve un objeto PointerLock para la API Mouse Lock.
+
+ +

Métodos

+ +

No hereda ninguna propiedad, pero implementa las definidas en {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, y {{domxref("NavigatorStorageUtils")}}.

+ +

Estándar

+ +
+
{{domxref("Navigator.getVRDisplays()")}} {{experimental_inline}}
+
Devuelve una promesa que se resuelve en un arreglo de objetos {{domxref("VRDisplay")}} que representan cualquier dispositivo VR conectado a la computadora que esté disponible.
+
{{domxref("Navigator.getUserMedia", "NavigatorUserMedia.getUserMedia()")}}
+
Después de solicitar permiso al usuario, devuelve el stream de audio o video asociado a la cámara o micrófono de la computadora local.
+
{{domxref("Navigator.registerContentHandler()")}}
+
Permite a los web sites registrarse como posibles controladores de un tipo MIME determinado.
+
{{domxref("Navigator.registerProtocolHandler()")}}
+
Permite a los sitios webs registrarse como posibles controladores de un protocolo determinado.
+
{{domxref("Navigator.requestMediaKeySystemAccess()")}} {{experimental_inline}}
+
Devuelve un objeto {{jsxref("Promise")}} para un objeto MediaKeySystemAccess.
+
{{domxref("Navigator.sendBeacon()")}}{{experimental_inline}}
+
Usado para transferir, de forma asíncrona, conjuntos pequeños de datos HTTP del agente usuario al servidor.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Devuelve false. Las funciones taint/untaint de JavaScript fueron desaprobadas en JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causa vibración en el dispositivo que la soporta. No hace nada si el soporte para vibración no está disponible.
+
+ +

No Estándar

+ +
+

Dispositivos con Firefox OS añaden más métodos no estándares. Puede consultarlas en el artículo de extensiones de Navigator de Firefox OS.

+
+ +
+
{{domxref("Navigator.mozIsLocallyAvailable()")}} {{non-standard_inline}}
+
Permite al código verificar si el documento en una URI determinada está disponible sin usar la red.
+
{{domxref("Navigator.mozPay()")}} {{non-standard_inline}}
+
Permite pagos dentro de la aplicación.
+
diff --git a/files/es/web/api/navigator/mozsocial/index.html b/files/es/web/api/navigator/mozsocial/index.html new file mode 100644 index 0000000000..cf5dd808f8 --- /dev/null +++ b/files/es/web/api/navigator/mozsocial/index.html @@ -0,0 +1,48 @@ +--- +title: navigator.mozSocial +slug: Web/API/Navigator/mozSocial +translation_of: Archive/mozSocial +--- +

{{non-standard_header()}}

+

{{fx_minversion_header("17.0")}}

+

{{ ApiRef() }}

+

El objeto MozSocial , regresado por la propiedad navigator.mozSocial , esta disponible dentro del tablero del proveedor de medios de comunicación para proporcionar la funcionalidad que pueda necesitar.

+
+

Nota: Aunque mozilla espera enviar eventualmente este API para su  estandarización, aun no se ha hecho.

+
+

Atributos

+
+
+ {{domxref("MozSocial.isVisible")}}
+
+ Regresa un valor Booleano; el resultado es true si el contenido es visible, de otra manera es false.
+
+

Métodos

+
+
+ {{domxref("MozSocial.closePanel()")}}
+
+ Cierra el tablero flotante abierto actualmente.
+
+ {{domxref("MozSocial.getAttention()")}}
+
+ Realiza algunas acciones diseñadas para obtener la atención del usuario; el mismo comportamiento puede variar de plataforma a plataforma. Esto puede mostrar un efecto visual, reproducir una notificación audible, parpadear la pantalla, o utilizar alguna otra técnica.
+
+ {{ domxref("MozSocial.getWorker()") }}
+
+ Regresa una referencia al trabajador de servicios; una vez el  contenido tiene esta referencia, puede llamar a su método postMessage() para comunicarse con el servicio.
+
+ {{domxref("MozSocial.openChatWindow()")}}
+
+ Abre una ventana de chat que es anclada al pie de la ventana del navegador. Se espera que cada ventana de chat sea un chat singular, pero su funcionalidad va a variar dependiento del proveedor.
+
+ {{domxref("MozSocial.openPanel()")}}
+
+ Abre un tablero flotante adjunto a la barra lateral en una vertical dada para compensar. Esto puede ser, por ejemplo, utilizado para mostrar la conversación actual correspondiente a una notificación en la barra lateral.
+
+  
+
+ Vease Tambien
+
+ Social API
+
diff --git a/files/es/web/api/navigator/registerprotocolhandler/index.html b/files/es/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..a2a57f7ae3 --- /dev/null +++ b/files/es/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,33 @@ +--- +title: window.navigator.registerProtocolHandler +slug: Web/API/Navigator/registerProtocolHandler +tags: + - Firefox 3 + - Referencia_DOM_de_Gecko +translation_of: Web/API/Navigator/registerProtocolHandler +--- +

 

+

{{ ApiRef() }} {{ Fx_minversion_header(3) }}

+

Resumen

+

Permite que las páginas web se registren por si mismas como posibles manejadores para protocolos concretos.

+

Sintaxis

+
window.navigator.registerProtocolHandler(protocol,uri,title);
+
+ +

Ejemplo

+
navigator.registerProtocolHandler("mailto",
+                                 "https://mail.google.com/mail?view=cm&tf=0&to=%s",
+                                 "Google Mail");
+
+

Esto crea un nuevo manejador que permite a los enlaces de tipo "mailto:" dirigir al usuario a Google Mail, insertando la dirección de correo especificada en el enlace, en la URL.

+

Especificación

+

Especificado en el documento del WHATWG: Web Applications 1.0 working draft.

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/window.navigator.registerProtocolHandler", "fr": "fr/DOM/window.navigator.registerProtocolHandler", "ja": "ja/DOM/window.navigator.registerProtocolHandler", "ko": "ko/DOM/window.navigator.registerProtocolHandler", "pl": "pl/DOM/window.navigator.registerProtocolHandler" } ) }}

diff --git a/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html b/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html new file mode 100644 index 0000000000..2f72c52dc9 --- /dev/null +++ b/files/es/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html @@ -0,0 +1,132 @@ +--- +title: Controladores de protocolos basados en web +slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +tags: + - Avanzado + - Controladores de Protocolos Basados en Web + - HTML5 +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +
{{Fx_minversion_header(3)}}
+ +

Antecedentes

+ +

Es bastante común encontrar enlaces de páginas web a recursos que no usan protocolos http. Un ejemplo es el protocolo mailto::

+ +
+
<a href="mailto:webmaster@example.com">Web Master</a>
+
+ +

Los autores de la Web pueden usar un enlace mailto: cuando quieren proporcionar una forma conveniente para que los usuarios envién un correo electrónico, directamente desde la página web. Cuando el enlace está activo, el navegador debería lanzar la aplicación de escritorio predeterminada para gestionar correos electrónicos. Se puede pensar en esto como un controlador de protocolos basados en escritorio.

+ +

Los controladores de protocolos basados en web permiten a las aplicaciones basadas en web participar en el proceso también. Esto es cada vez más importante a medida que más tipos de aplicaciones migren a la web. De hecho, hay muchas aplicaciones basadas en web que gestionan correo electrónicos podrían procesar un enlace mailto.

+ +

Registro

+ +

Configurar una aplicación web como un controlador de protocolo no es un proceso difícil. Básicamente la aplicación web usa registerProtocolHandler() para registrarse a sí mismo con el navegador como un controlador potencial para un protocolo dado. Por ejemplo:

+ +
navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+ +

En donde los parámetros son:

+ + + +

Cuando un navegador ejecuta este código, se le mostrará un mensaje al usuario, pidiendo permiso para permitir a la aplicación web registrase como controlador para el protocolo. Firefox muestra un mensaje en el área de la barra de notificaciones:

+ +

+ +
Nota: La plantila de la URL proporcionada al registrar debe ser del mismo dominio que el de la página que intenta realizar el registro o el registro fallará. Por ejemplo, http://example.com/homepage.html puede registrar un controlador de protocolo para http://example.com/handle_mailto/%s, pero no para http://example.org/handle_mailto/%s.
+ +

Al registrar el mismo controlador de protocolo más de una vez aparecerá una notifiación diferente, indicando que el controlador del protocolo ya ha está registrado. Por lo tanto, es una buena idea cuidar el registro del controlador de protocolo con una verificación para saber si ya está registrado, como con el siguiente ejemplo.

+ +

Ejemplo

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Ejemplo de Controlador de Protocolo Web - Registro</title>
+  <script type="text/javascript">
+    navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+  </script>
+</head>
+<body>
+  <h1>Ejemplo de Controlador de Protocolo Web</h1>
+  <p>Esta página web instalará un controlador de protocolo web para el protocolo <code>burger:</code>.</p>
+</body>
+</html>
+
+ +

Activando

+ +

Ahora, cada vez que el usuario active un enlace que usa el protocolo registrado, el navegador enrutará la acción a la URL suministrada cuando la aplicación web se haya registrado. Firefox, de manera predeterminada, alertará al usaurio antes de controlar la acción.

+ +

Ejemplo

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Ejemplo de Controlador de Protocolo Web - Prueba</title>
+</head>
+<body>
+  <p>Oye ¿Has visto <a href="burger:cheeseburger">esto</a> antes?</p>
+</body>
+</html>
+
+ +

Controlando

+ +

La siguiente fase es controlar la acción. El navgador extrae el href desde el enlace activado, lo combina con la plantilla de la URL suministrada durante el registro del controlador y realzia una petición HTTP GET sobre la URL. Luego, usando los ejemplos anteriores, el navegador realizará una petición GET sobre esta URL:

+ +
http://www.google.co.uk/?uri=burger:cheeseburger
+
+ +

El código del lado del servidor puede extraer los parámetros de la cadena de petición y realizar la acción deseada.

+ +
Nota: Al código del lado del servidor se le pasa todo el contenido del href.  Esto significa que el código del lado del servidor tendrá que analizar el protocolo desde los datos.
+ +

Example

+ +
<?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?>
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Ejemplo de Controlador de Protocolo Web</title>
+</head>
+<body>
+  <h1>Ejemplo de Controlador de Protocolo Web - Controlador</h1>
+  <p>Esta página es llamada al controlar una acción del protocolo <code>burger:</code>. Datos enviados:</p>
+  <textarea>
+<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?>
+  </textarea>
+</body>
+</html>
+
+ +

Referencias

+ + + +

Véase también

+ + diff --git a/files/es/web/api/navigator/vibrate/index.html b/files/es/web/api/navigator/vibrate/index.html new file mode 100644 index 0000000000..39969f4cfc --- /dev/null +++ b/files/es/web/api/navigator/vibrate/index.html @@ -0,0 +1,82 @@ +--- +title: window.navigator.vibrate +slug: Web/API/Navigator/vibrate +translation_of: Web/API/Navigator/vibrate +--- +
+ {{ApiRef}}{{SeeCompatTable}}
+

Resumen

+

Ejecuta la vibración por hardware en el dispositivo, si existe dicho hardware. Si el dispositivo no soporta vibración, este método no tendrá efecto. Si un patrón de vibración ya estaba en progreso cuando este método es ejecutado, el patrón anterior se detiene y en su lugar se iniciará el último patrón ejecutado.

+

Sintaxis

+
window.navigator.vibrate(pattern);
+
+ +
+
+ pattern
+
+ Proporciona un patrón de intervalos de vibraciones y pausas. Cada valor indica el número de milisegundos que durará la vibración y la pausa, respectivamente. Se puede porporcionar un valor único (en cuyo caso la vibración se ejecutará una vez, con la duración especificada en milisegundos) o un arreglo de valores (array) para alternar vibraciones y pausas. Ver Vibration API para más detalles.
+
+

Si se especifica el valor 0, un array vacío o un array que contenga todos los valores en 0, se cancelarán todos los patrones de vibración que se estén ejecutando.

+

Excepciones

+

Podrá producirse una excepción si el patrón de vibración especificado es demasiado largo o si cualquiera de sus elementos son demasiado grandes.

+

Compatibilidad con navegadores

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}} +

11.0 {{property_prefix("moz")}}

+

16 (no prefix)

+ 		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

Especificación

+ +

Véase también

+ diff --git a/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html b/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html new file mode 100644 index 0000000000..ed2116fa94 --- /dev/null +++ b/files/es/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html @@ -0,0 +1,69 @@ +--- +title: navigator.hardwareConcurrency +slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency +translation_of: Web/API/NavigatorConcurrentHardware/hardwareConcurrency +--- +

{{APIRef("HTML DOM")}}

+ +

{{AvailableInWorkers}}

+ +

La propiedad navigator.hardwareConcurrency  es de solo lectura navigator.hardwareConcurrency devuelve el número de procesadores lógicos disponibles para ejecutar subprocesos en la computadora del usuario.

+ +

Sintaxi

+ +
logicalProcessors = window.navigator.hardwareConcurrency
+
+ +

Valor

+ +

{{jsxref("Number")}} indica el número de núcleos de procesadores lógicos.

+ +

Las computadoras modernas tienen múltiples núcleos de procesadores físicos en su CPU (dos o cuatro núcleos son típicos), pero cada núcleo físico también puede ejecutar más de un subproceso a la vez utilizando técnicas avanzadas de programación. Por lo tanto, una CPU de cuatro núcleos puede ofrecer ocho núcleos de procesador lógico, por ejemplo. El número de núcleos de procesador lógico se puede utilizar para medir el número de subprocesos que se pueden ejecutar de manera efectiva a la vez sin que tengan que cambiar de contexto.

+ +

 Sin embargo, el navegador puede optar por informar un número menor de núcleos lógicos para representar con mayor precisión el número de {{domxref("Worker")}}s que pueden ejecutarse a la vez, así que no trate esto como una medida absoluta del número de núcleos en el sistema del usuario .

+ +

Ejemplos

+ +

En este ejemplo, se crea un {{domxref ("Worker")}} para cada procesador lógico informado por el navegador y se crea un registro que incluye una referencia al nuevo worker, así como un valor booleano que indica si nosotros ' estoy usando ese worker todavía; Estos objetos, a su vez, se almacenan en una matriz para su uso posterior. Esto crea un grupo de workers que podemos usar para procesar solicitudes más adelante.

+ +
let workerList = [];
+
+for (let i = 0; i < window.navigator.hardwareConcurrency; i++) {
+  let newWorker = {
+    worker: new Worker('cpuworker.js'),
+    inUse: false
+  };
+  workerList.push(newWorker);
+}
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-navigator-hardwareconcurrency', 'navigator.hardwareConcurrency')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.NavigatorConcurrentHardware.hardwareConcurrency")}}

+
+ +

See also

+ + diff --git a/files/es/web/api/navigatorconcurrenthardware/index.html b/files/es/web/api/navigatorconcurrenthardware/index.html new file mode 100644 index 0000000000..d7cee835c0 --- /dev/null +++ b/files/es/web/api/navigatorconcurrenthardware/index.html @@ -0,0 +1,71 @@ +--- +title: NavigatorConcurrentHardware +slug: Web/API/NavigatorConcurrentHardware +tags: + - API + - Concurrency + - HTML DOM + - Interface + - Navigator + - NavigatorCPU + - NavigatorConcurrentHardware + - NeedsBrowserCompatibility + - NeedsTranslation + - Reference + - Threading + - Threads + - TopicStub + - WorkerNavigator + - Workers +translation_of: Web/API/NavigatorConcurrentHardware +--- +

{{APIRef("HTML DOM")}}

+ +

The NavigatorConcurrentHardware {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} interface features which allow Web content to determine how many logical processors the user has available, in order to let content and Web apps optimize their operations to best take advantage of the user's CPU.

+ +

{{AvailableInWorkers}}

+ +

The number of logical processor cores is a way to measure the number of threads which can effectively be run at once without them having to share CPUs. Modern computers have multiple physical cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may return 8. The browser may, however, choose to reduce the number in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once

+ +

Properties

+ +
+
{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyinline}}
+
Returns the number of logical processors which may be available to the user agent. This value is always at least 1, and will be 1 if the actual number of logical processors can't be determined.
+
+ +

Methods

+ +

The NavigatorConcurrentHardware mixin has no methods.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/navigatorgeolocation/geolocation/index.html b/files/es/web/api/navigatorgeolocation/geolocation/index.html new file mode 100644 index 0000000000..94c22ef6b0 --- /dev/null +++ b/files/es/web/api/navigatorgeolocation/geolocation/index.html @@ -0,0 +1,106 @@ +--- +title: window.navigator.geolocation +slug: Web/API/NavigatorGeolocation/geolocation +translation_of: Web/API/Navigator/geolocation +--- +

{{APIRef("Geolocation API")}}
+ La propiedad de sólo lectura Navigator.geolocation devuelve un objeto Geolocation que proporciona acceso web a la ubicación de un dispositivo. Esto permite ofrecer al sitio web o aplicación resultados personalizados basados en la ubicación del usuario.

+ +
+

Nota: Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.

+
+ +

Sintaxis

+ +
geo = navigator.geolocation
+
+ +

Métodos

+ +
+
{{domxref("geolocation.getCurrentPosition", "geolocation.getCurrentPosition()")}}
+
Utilizado para obtener la posición actual.
+
{{domxref("geolocation.watchPosition", "geolocation.watchPosition()")}}
+
Utilizado para asignar un manejador para dar seguimiento a cualquier cambio de ubicación.
+
{{domxref("geolocation.clearWatch", "geolocation.clearWatch()")}}
+
Utilizado para eliminar un manejador asignado a los cambios de ubicación.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.150{{CompatGeckoMobile("4")}}1010.603.2
+
+ +

Ver también

+ + diff --git a/files/es/web/api/navigatorgeolocation/index.html b/files/es/web/api/navigatorgeolocation/index.html new file mode 100644 index 0000000000..f9e540d902 --- /dev/null +++ b/files/es/web/api/navigatorgeolocation/index.html @@ -0,0 +1,106 @@ +--- +title: NavigatorGeolocation +slug: Web/API/NavigatorGeolocation +tags: + - API +translation_of: Web/API/Geolocation +--- +

{{APIRef("Geolocation API")}}

+ +

NavigatorGeolocation  contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.

+ +

There is no object of type NavigatorGeolocation, but some interfaces, like {{domxref("Navigator")}} implements it.

+ +

Properties

+ +

The NavigatorGeolocation interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
+ +

Methods

+ +

The NavigatorGeolocation interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}{{Spec2('Geolocation')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

See also

+ + + +

 

diff --git a/files/es/web/api/navigatorlanguage/index.html b/files/es/web/api/navigatorlanguage/index.html new file mode 100644 index 0000000000..7d6b0751e7 --- /dev/null +++ b/files/es/web/api/navigatorlanguage/index.html @@ -0,0 +1,148 @@ +--- +title: NavigatorLanguage +slug: Web/API/NavigatorLanguage +tags: + - API + - HTML-DOM + - NeedsTranslation + - No Interface + - Reference + - TopicStub +translation_of: Web/API/NavigatorLanguage +--- +

{{APIRef("HTML DOM")}}

+ +

NavigatorLanguage contains methods and properties related to the language of the navigator.

+ +

There is no object of type NavigatorLanguage, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorLanguage interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
+ +

Methods

+ +

The NavigatorLanguage interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML WHATWG')}}Since the {{SpecName('HTML5 W3C')}} snapshot, the languages property has been added.
{{SpecName('HTML5 W3C', '#navigatorlanguage', 'NavigatorLanguage')}}{{Spec2('HTML5 W3C')}}Initial specification; snapshot of  an early version{{SpecName('HTML WHATWG')}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
languages37{{CompatGeckoDesktop("32")}}{{CompatNo}}24{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
languages{{CompatUnknown}}{{CompatUnknown}} {{CompatGeckoMobile("32")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/es/web/api/navigatorlanguage/language/index.html b/files/es/web/api/navigatorlanguage/language/index.html new file mode 100644 index 0000000000..a8c388b631 --- /dev/null +++ b/files/es/web/api/navigatorlanguage/language/index.html @@ -0,0 +1,133 @@ +--- +title: NavigatorLanguage.language +slug: Web/API/NavigatorLanguage/language +tags: + - API + - Gecko + - Idioma + - Lenguaje + - NavigatorLanguage + - Propiedad + - Referencia + - Referencia DOM de Gecko + - Solo lectura +translation_of: Web/API/NavigatorLanguage/language +--- +
{{APIRef("HTML DOM")}}
+ +

La propiedad de solo lectura NavigatorLanguage.language devuelve un string representando el lenguaje predefinido del usuario, generalmente es el lenguaje configurado para la interfaz del navegador.

+ +

Sintaxis

+ +
lang = globalObj.navigator.language
+
+ +

Valores

+ +

Un string que representa el código del lenguaje standard como se define en la BCP 47. Ejemplos de códigos válidos de lenguaje incluyen: "en", "en-US", "fr", "es-ES", etc.

+ +

Ejemplo

+ +
if (window.navigator.language != "en") {
+  doLangSelect(window.navigator.language);
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML5.1', '#dom-navigator-language', 'NavigatorLanguage.language') }}{{ Spec2('HTML5.1') }}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("1.0")}}[2]
+ {{CompatGeckoDesktop("5.0")}}[3]		11.0[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
sobre {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}{{CompatNo}}[4]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
sobre {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Devuelve el lenguaje configurado para la interfaz del navegador, no el valor de la Accept-Language HTTP header.

+ +

[2] Antes de Gecko 2.0 {{geckoRelease("2.0")}}, el valor de esta propiedad fue también parte de la cadena de user agent, como se informa en {{domxref("window.navigator.userAgent", "navigator.userAgent")}}.

+ +

[3] A partir de  Gecko 5.0 {{geckoRelease("5.0")}}, el valor de esta propiedad está basada en el valor de la Accept-Language HTTP header.

+ +

[4] Otras propiedades disponibles (no estandarizadas) son: userLanguage y browserLanguage.

+ +

Ver también

+ + diff --git a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html new file mode 100644 index 0000000000..d4f8a77824 --- /dev/null +++ b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html @@ -0,0 +1,91 @@ +--- +title: Eventos online y offline +slug: Web/API/NavigatorOnLine/Eventos_online_y_offline +tags: + - AJAX + - DOM + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

{{ Fx_minversion_header(3) }} +Firefox 3 implementa eventos Online/Offline de la especificacióbn WHATWG Web Applications 1.0. +

+

Descripción

+

Para poder construir una aplicación web offline-funcional, necesitas conocer cuándo está tu aplicación realmente offline. Además, también necesitas conocer cuándo vuelve la aplicación al estado 'online' nuevamente. A efectos prácticos, los requisitos son los siguientes: +

+
  1. Necesitas conocer cuándo el usuario vuelve a estar online, para que puedas re-sincronizar con el servidor. +
  2. Necesitas conocer cuándo el usuario está offline, para así estar seguro de poner en cola las peticiones al servidor para más tarde. +
+

Es este proceso el que los eventos online/offline ayudan a trivializar. +

Tu aplicación web quizás necesite establecer que ciertos documentos se mantengan en la caché de recursos offline. Para hacerlo, incluye elementos LINK en tu sección HEAD de la siguiente manera: +

+
<link rel="offline-resource" href="mi_recurso>
+
+

Cuando Firefox 3 o superiores procesan el HTML, esto causará que el recurso referenciado se mantenga en caché para su uso offline en un recurso especial de la caché. +

+

API

+ +

navigator.onLine es una propiedad que mantiene un valor true/false (true para online, false para offline). Esta propiedad se actualiza siempre que el usuario cambia hacia "Modo sin conexión" seleccionando el menú correspondiente (Archivo -> Trabajar sin conexión en Firefox). +

Además, esta propiedad se debería actualizar siempre que el navegador no sea capaz de conectarse a la red. De acuerdo con la especificación: +

+
+El atributo navigator.onLine debe devolver false si el agente de usuario no contactará con la red cuando el usuario siga los enlaces o cuando un script solicite una página remota (o sepa que intentarlo fallaría)... +
+

Firefox 2 actualiza esta propiedad cuando cambia desde/hacia el modo offline del navegador, y cuando pierde/recupera la conectividad de la red en Windows y Linux. +

Esta propiedad existía en versiones más antiguas de Firefox e Internet Explorer (la especificación surgió a partir estas implementaciones previas), así que puedes comenzar a usarla inmediatamente. La detección automática del estado de la red se implementó en Firefox 2. +

+

eventos "online" y "offline"

+

Firefox 3 introduce dos nuevos eventos: "online" y "offline". Estos dos eventos son iniciados en el <body> de cada página cuando el usuario cambia de modo online a offline. Además, los eventos emergen desde document.body a document, terminando en window. Ambos eventos son no-cancelables (no se puede evitar que el usuario pase a modo online u offline). +

Puedes registrar listeners para estos eventos de varias maneras habituales: +

+ +

Ejemplo:

+

Hay una prueba sencilla que puedes ejecutar para verificar que los eventos están funcionando. +

+

+
 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+
+

Referencias

+ +


+

+
+
+{{ languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/es/web/api/navigatoronline/index.html b/files/es/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..7aa4d6c0e1 --- /dev/null +++ b/files/es/web/api/navigatoronline/index.html @@ -0,0 +1,133 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorOnLine +--- +

{{APIRef("HTML DOM")}}

+ +

The NavigatorOnLine interface contains methods and properties related to the connectivity status of the browser.

+ +

There is no object of type NavigatorOnLine, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorOnLine interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
+ +

Methods

+ +

The NavigatorOnLine interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML WHATWG')}}No change from the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/navigatoronline/online/index.html b/files/es/web/api/navigatoronline/online/index.html new file mode 100644 index 0000000000..cc74bdbb8b --- /dev/null +++ b/files/es/web/api/navigatoronline/online/index.html @@ -0,0 +1,166 @@ +--- +title: Navigator.onLine +slug: Web/API/NavigatorOnLine/onLine +translation_of: Web/API/NavigatorOnLine/onLine +--- +
{{ApiRef("HTML DOM")}}
+ +

Retorna el estado en línea del navegador. La propiedad retorna un valor booleano,  true significa en línea y false significa desconectado. La propiedad envía actualizaciones siempre que el navegador tenga la capacidad de conectarse a los cambios de red. La actualización se produce cuando un usuario sigue un enlace o cuando un script pide una pagina remota. Por ejemplo, la propiedad debe retornar false cuando los usuarios hacen clic en un enlace poco después de perder la conexión a internet.

+ +

Los navegadores implementan esta propiedad de forma diferente.

+ +

En Chrome y Safari, si el navegador no puede conectarse a la red de area local (LAN) o al router, está desconectado; todas las otras condiciones retornan true. Así que puedes suponer que el navegador esta desconectado cuando retorna un valor false, no puedes suponer que un valor true signifique que el navegador puede acceder a internet. Podrías estar recibiendo falsos positivos, como en los casos en el que el ordenador este ejecutando un software de virtualización que tiene los adaptadores ethernet virtuales siempre "conectados". Por lo tanto, si tu quieres determinar el estado en linea de el navegador, tu debes desarrollar medios adicionales para comprobarlo. Para más información, consulte el artículo HTML5 Rocks article, Working Off the Grid.

+ +

En Firefox e Internet Explorer, cambiando el navegador al modo desconectado envía un valor false. Hasta Firefox 41, todas las demás condiciones retornaban un valor true; desde Firefox 41, en OS X y Windows, el valor sigue la actual conectividad de red.

+ +

Puedes ver los cambios en el estado de red escuchando los eventos window.ononline y window.onoffline.

+ +

Sintaxis

+ +
online = window.navigator.onLine;
+
+ +

Valor

+ +

online es booleano true o false.

+ +

Ejemplo

+ +

Ver ejemplo en linea.

+ +

Para comprobar que estas es linea, consulte window.navigator.onLine, como en el siguiente ejemplo: 

+ +
if (navigator.onLine) {
+  console.log('online');
+} else {
+  console.log('offline');
+}
+ +

Si el navegador no soporta navigator.onLine el ejemplo anterior siempre devolvera false/undefined.

+ +

Para ver los cambios en el estado de la red, use addEventListener para escuchar los eventos window.ononline y window.onoffline, como en el siguiente ejemplo:

+ +
window.addEventListener('offline', function(e) { console.log('offline'); });
+
+window.addEventListener('online', function(e) { console.log('online'); });
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "browsers.html#navigator.online", "navigator.onLine")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}[2]
+ {{CompatGeckoDesktop(2.0)}}[4]		8[3]{{CompatNo}}[2]5.0.4
on {{domxref("WorkerNavigator")}}Yes{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileBlackBerry
Basic support2.2[5]{{CompatVersionUnknown}}{{CompatGeckoMobile(1.9.1)}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} +

7
+ 10

+
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Earlier versions of Chrome incorrectly return true when a tab is first opened, but it starts reporting the correct connectivity status after the first network event. Windows: 11, Mac: 14, Chrome OS: 13, Linux: Always returns true. For history, see crbug.com/7469.

+ +

[2] Since Firefox 4, and Opera 11.10, the browser returns true when "Work Offline" mode is disabled and false when it is enabled, regardless of actual connectivity.

+ +

[3] in Internet Explorer 8 "online" and "offline" events are raised on the document.body; under IE 9 they are raised on both document.body and window.

+ +

[4] Since Firefox 41, on OS X and Windows, the returned values follow the actual network connectivity, unless "Work offline" mode is selected (where it will always return false).

+ +

[5] Faulty in a WebView component, see Issue bug 16760.

+ +

Notas

+ +

See Online/Offline Events‎ for a more detailed description of this property as well as new offline-related features introduced in Firefox 3.

+ +

Véase también

+ + diff --git a/files/es/web/api/network_information_api/index.html b/files/es/web/api/network_information_api/index.html new file mode 100644 index 0000000000..07b3d3e3a7 --- /dev/null +++ b/files/es/web/api/network_information_api/index.html @@ -0,0 +1,93 @@ +--- +title: Network Information API +slug: Web/API/Network_Information_API +tags: + - API + - Experimental + - JSAPI Reference + - Referencia +translation_of: Web/API/Network_Information_API +--- +

{{DefaultAPISidebar("Network Information API")}}{{SeeCompatTable}}

+ +

La Network Information (Información de red) API provee información sobre el sistema de conexión en términos genéricos de tipos de conexión (ej., 'wifi', 'cellular', etc.). Esta puede ser usada para elegir contenido en alta definición o contenido  baja definición basándose en la conexión del usuario. Toda la API consiste en la adición de la {{domxref("NetworkInformation")}} interfaz y una única propiedad para la {{domxref("Navigator")}} interfaz: {{domxref("Navigator.connection")}}.

+ +

{{AvailableInWorkers}}

+ +

Examples

+ +

Detectar cambios de conexiónThis example watches for changes to the user's connection.

+ +
var conexion = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+var tipo = connection.effectiveType;
+
+function updateConnectionStatus() {
+  console.log("Connection type changed from " + tipo + " to " + conexion.effectiveType);
+  tipo = conexion.effectiveType;
+}
+
+conexion.addEventListener('change', updateConnectionStatus);
+
+ +

Precargar recursos grandes

+ +

El objeto de conexión es muy útil por ir decidiendo entre precargar recursos que ocupan mucho ancho de banda o memoria. Este ejemplo puede ser llamado justo después de que la página cargue para verificar el tipo de conexión donde precargar un video tal vez no sea lo deseado.Si se detecta la conexión de un celular, entonces el preloadVideo flag está seteado en false. Para simplificación y claridad, este ejemplo sólo testea un tipo de conexión. Una real-word usa case probablemente una declaración de switch o otro método para verificar todos los posibles valores de {{domxref("NetworkInformation.type")}}. 
+
+ en caso usaría una declaración de switch o algún otro método para verificar todos los valores posibles de
+ use case would likely use a switch statement or some other method to check all of the possible values of {{domxref("NetworkInformation.type")}}. Independientemente del valor de tipo, puede obtener una estimación de la velocidad de conexión a través de la propiedad {{domxref("NetworkInformation.effectiveType")}}.

+ +
let precargarVideo = true;
+var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+if (connection) {
+  if (connection.effectiveType === 'slow-2g') {
+    precargarVideo = false;
+  }
+}
+ +

Interfaces

+ +
+
{{domxref("NetworkInformation")}}
+
Provee información sobre la conexión de un dispositivo si está usándose para cominicarse con la red y proveer un tipo de scripts para ser notificado si el tipo de conexión cambia. La intefaz de NetworkInformation no puede ser inicializada. En lugar de esto, se accede a través de la interfaz {{domxref("Navigator")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecifiaciónEstadoComentario
{{SpecName('Network Information', '', 'Network Information API')}}{{Spec2('Network Information')}}Initial specification
+ +

Compatibilidad en Navegadores

+ +

NetworkInformation

+ + + +

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

+ + + + + +

{{Compat("api.Navigator.connection")}}

+ +

Véase también

+ + diff --git a/files/es/web/api/node/appendchild/index.html b/files/es/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..a72eb7d6c3 --- /dev/null +++ b/files/es/web/api/node/appendchild/index.html @@ -0,0 +1,113 @@ +--- +title: Nodo appendChild +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Node + - Referencia + - metodo +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

Agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado.

+ +

Si el hijo(Child) es una referencia(hace referencia) hacia un nodo existente en el documento actual, este es quitado del padre actual para ser puesto en el nodo padre nuevo. La clave está en si el (Child) es una referencia a un nodo existente en el documento.

+ +
+

Nueva API disponible 
+ El método {{domxref("ParentNode.append()")}} soporta varios argumentos y cadenas para adjuntar.

+
+ +

Sintaxis

+ +
element.appendChild(aChild);
+ +

Parámetros

+ +
+
aChild
+
El nodo a adjuntar al nodo padre proporcionado (normalmente un elemento).
+
+ +

Valor de retorno

+ +

El valor devuelto es el hijo adjunto excepto cuando el hijo proporcionado es un {{domxref("DocumentFragment")}}, en cuyo caso el {{domxref("DocumentFragment")}} vacío es devuelto.

+ +

Notas

+ +

El encadenamiento podría no funcionar como se espera debido a que appendChild() devuelve un elemento hijo:

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Establece aBlock como <b></b> sólo, que no es probablemente lo que quieras.

+ +

Si el child hace una referencia a un nodo existente en el documento, el método appendChild se mueve de su posición actual a su nueva posición (ej. no existen requerimientos para eliminar el nodo desde su nodo padre antes de añadirlo a cualquier otro nodo).

+ +

Ésto significa también que el nodo no puede estar en dos puntos del documento de manera simultánea. Así que si el nodo ya contiene un padre, primero es eliminado, y después se añade a la nueva posición.

+ +

Se puede usar {{domxref("Node.cloneNode")}} para hacer una copia del nodo antes de añadirlo debajo de su nuevo elemento padre. (Nota: las copias echas con cloneNode no serán guardadas automáticamente en sincronía.)

+ +

Éste método no es permitido para mover nodos entre distintos documentos. Si se quiere añadir un nodo desde un documento diferente (por ejemplo para mostrar los resultados de una petición AJAX) se debe usar primero:
+ {{domxref("document.importNode")}}.

+ +

appendChild() Es uno de los métodos fundamentales de la programación web usando el DOM. El método appendChild() inserta un nuevo nodo dentro de la estructura DOM de un documento, y es la segunda parte del proceso central uno-dos, crear-y-añadir para construir páginas web a base de programación.

+ +

Ejemplo

+ +
// Crea un nuevo elemento párrafo, y lo agrega al final del cuerpo del documento
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecifaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}Sin cambio desde {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}Sin cambio desde {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}Sin cambio desde {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("api.Node.appendChild")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/node/childnodes/index.html b/files/es/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..567cd9fd08 --- /dev/null +++ b/files/es/web/api/node/childnodes/index.html @@ -0,0 +1,103 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +tags: + - API + - DOM + - Propiedad + - Referencia + - Referência DOM +translation_of: Web/API/Node/childNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de solo lectura Node.childNodes  devuelve una colección de hijos {{domxref("Node","nodes")}} del elemento dado donde el primer nodo hijo es asignado un índice 0.

+ +

Sintaxis

+ +
var nodeList = elementNodeReference.childNodes;
+
+ +

Ejemplos

+ +

Uso simple

+ +
// parg is an object reference to a <p> element
+
+// First check that the element has child nodes
+if (parg.hasChildNodes()) {
+  var children = parg.childNodes;
+
+  for (var i = 0; i < children.length; i++) {
+    // do something with each child as children[i]
+    // NOTE: List is live, adding or removing children will change the list
+  }
+}
+ +

Eliminar todos los hijos de un nodo

+ +
// This is one way to remove all children from a node
+// box is an object reference to an element
+
+while (box.firstChild) {
+    //The list is LIVE so it will re-index each call
+    box.removeChild(box.firstChild);
+}
+ +

Notas

+ +

Los items en una colección de nodos son objetos y no cadenas de caracteres. Para obtener los datos de los objetos del nodo, use sus propiedades (ej. elementNodeReference.childNodes[1].nodeName para obtener el nombre, etc.).

+ +

El objeto document contiene 2 hijos: la declaración del Doctype y el elemento raíz, generalmente referido como  documentElement. (En documentos (X)HTML  es el elemento HTML)

+ +

childNodes incluye todos los nodos hijos, incluidos los nodos no elementos, como nodos de tipo textos y comentarios. Para obtener una colección de solo elementos, use {{domxref("ParentNode.children")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('DOM WHATWG', '#dom-node-childnodes', 'Node.childNodes')}}{{Spec2('DOM WHATWG')}}Sin cambios
{{SpecName('DOM3 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM3 Core')}}Sin cambios
{{SpecName('DOM2 Core', 'core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM2 Core')}}Sin cambios
{{SpecName('DOM1', 'level-one-core.html#ID-1451460987', 'Node.childNodes')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.Node.childNodes")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/node/clonenode/index.html b/files/es/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..0fb78af5dd --- /dev/null +++ b/files/es/web/api/node/clonenode/index.html @@ -0,0 +1,91 @@ +--- +title: Node.cloneNode() +slug: Web/API/Node/cloneNode +tags: + - API + - DOM + - Referencia + - Referência DOM + - metodo +translation_of: Web/API/Node/cloneNode +--- +
{{APIRef("DOM")}}
+ +

El método Node.cloneNode() devuelve un duplicado del nodo en el que este método fue llamado.

+ +

Sintaxis

+ +
var dupNode = node.cloneNode(deep);
+
+ +
+
node
+
El nodo que se desea clonar.
+
dupNode
+
El nuevo nodo que será un clon de node
+
deep {{optional_inline}}
+
true si los hijos del nodo también deben ser clonados, o false para clonar únicamente al nodo.
+
+ +
+

Nota: En la especificación DOM4 (como se implementó en Gecko 13.0 {{geckoRelease(13)}}), deep es un argumento opcional. Si éste se omite, el método actua como si el valor se estableciera en true, estableciendo el uso de la clonación profunda como el comportamiento por defecto. Para crear un clon superficial, deep debe establecerse en false.

+ +

Este comportamiento ha sido modificado en la última especificación, si es omitido, el método se comportará como si deep fuera false. Aunque sigue siendo opcional, usted siempre debería proporcionar el argumento deep tanto para la compatibilidad con las nuevas y anteriores especificaciones. Con Gecko 28.0 {{geckoRelease(28)}}),  la consola advierte a los desarrolladores a no omitir el argumento. Desde Gecko 29.0 {{geckoRelease(29)}}),  una copia superficial, es el comportamiento por defecto en lugar de una copia profunda.

+
+ +

Ejemplo

+ +
var p = document.getElementById("para1");
+var p_prime = p.cloneNode(true);
+
+ +

Notas

+ +

Al clonar un nodo se copian todos sus atributos y valores, incluyendo escuchadores intrínsecos (en–línea). No copia los escuchadores de evento añadidos utilizando addEventListener() o aquellos asignados a las propiedades de un elemento. (ej. node.onclick = fn). Además, para un elemento <canvas>, la imagen pintada no se copia.

+ +

El nodo duplicado devuelto por cloneNode() no formará parte del documento hasta que sea añadido a otro nodo que sea parte del documento utilizando {{domxref("Node.appendChild()")}} o un método similar. Tampoco tiene padre hasta que sea añadido a otro nodo.

+ +

Si deep se establece a false, los elementos hijos no se clonan. Tampoco se clona ningún texto que contenga el nodo, ya que está contenido en uno o más nodos {{domxref("Text")}}.

+ +

Si deep se evalúa a true, el subárbol completo (incluyendo texto que pueda estar en nodos {{domxref("Text")}} hijos) también se copian. En los nodos vacíos (por ejemplo, los elementos {{HTMLElement("img")}} y {{HTMLElement("input")}}) no importa si deep es true o false.

+ +
Advertencia: cloneNode() puede conducir a elementos con ID's duplicados en el documento.
+ +

Si el nodo original tiene un ID el elemento clonado se ubicará en el mismo documento, el ID del clon debería ser modificado para ser único. Los atributos name pueden necesitar ser modificados también, dependiendo de si se esperan nombres duplicados.

+ +

Para clonar un nodo con el fin de agregarlo a un domento distinto, utiliza {{domxref("Document.importNode()")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM3 Core")}} 
{{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}}{{Spec2("DOM2 Core")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +
+

{{Compat("api.Node.cloneNode")}}

+
diff --git a/files/es/web/api/node/contains/index.html b/files/es/web/api/node/contains/index.html new file mode 100644 index 0000000000..be0f8848d9 --- /dev/null +++ b/files/es/web/api/node/contains/index.html @@ -0,0 +1,56 @@ +--- +title: Node.contains() +slug: Web/API/Node/contains +tags: + - API + - DOM + - Nodo + - metodo +translation_of: Web/API/Node/contains +--- +
{{APIRef("DOM")}}
+ +

El método Node.contains() devuelve un valor {{jsxref("Boolean")}} indicando si un nodo es descendiente de un nodo dado o no, por ejemplo, el propio nodo, uno de sus hijos directos (({{domxref("Node.childNodes", "childNodes")}})), uno de los hijos directos de su nodo hijo, etc.

+ +

Sintaxis

+ +
node.contains( otroNodo )
+
+ +

Ejemplo

+ +

Esta función verifica si un un elemento esté en el cuerpo de la página. Como contains es inclusivo y determinar si el cuerpo se contiene a sí mismo no es la intención de  isInPage este caso explícitamente devuelve false.

+ +
function isInPage(node) {
+  return (node === document.body) ? false : document.body.contains(node);
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM WHATWG", "#dom-node-contains", "Node.contains()")}}{{Spec2("DOM WHATWG")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Node.contains")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/node/elementopadre/index.html b/files/es/web/api/node/elementopadre/index.html new file mode 100644 index 0000000000..2a2e947a8d --- /dev/null +++ b/files/es/web/api/node/elementopadre/index.html @@ -0,0 +1,46 @@ +--- +title: Node.parentElement +slug: Web/API/Node/elementoPadre +tags: + - API + - DOM + - NecesitaCompatiblidadNavegador + - Nodo + - Propiedad +translation_of: Web/API/Node/parentElement +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo lectura de Nodo.parentElement devuelve el nodo padre del DOM {{domxref("Element")}}, o null, si el nodo no tiene padre o si el padre no es un {{domxref("Element")}} DOM .

+ +

Sintaxis

+ +
elementoPadre = node.parentElement
+ +

El elementoPadre es el padre del nodo actual. Esto es siempre un objecto {{domxref("Element")}} DOM, o null.

+ +

Ejemplo

+ +
if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}
+ +

Compatibilidad en navegadores

+ +

En algunos navegadores, la propiedad elementoPadre es solo definida en nodos que ellos mismos son {{domxref("Element")}}. En particular, esto no está definido en nodos de texto.

+ +

{{Compat("api.Node.parentElement")}}

+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/node/haschildnodes/index.html b/files/es/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..b5b3bc58b2 --- /dev/null +++ b/files/es/web/api/node/haschildnodes/index.html @@ -0,0 +1,73 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - API + - DOM + - Nodo + - metodo +translation_of: Web/API/Node/hasChildNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

El método Node.hasChildNodes() devuelve un valor Boolean indicando si el {{domxref("Node")}} (nodo) actual tiene nodos hijos o no.

+ +

Sintaxis

+ +
resultado = node.hasChildNodes();
+ +
+
resultado
+
almacena el valor devuelto true o false.
+
+ +

Ejemplos

+ +

El siguiente ejemplo elimina el primer nodo dentro del elemento con id "foo" si foo tiene nodos hijos.

+ +
var foo = document.getElementById("foo");
+if (foo.hasChildNodes()) {
+    // do something with 'foo.childNodes'
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasChildNodes = prototype.hasChildNodes || function() {
+        return !!this.firstChild;
+    }
+})(Node.prototype);
+
+ +

Resumen

+ +

Hay varias maneras de determinar si el nodo tiene nodos hijos.

+ + + +

Especificación

+ + + +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Node.hasChildNodes")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/node/index.html b/files/es/web/api/node/index.html new file mode 100644 index 0000000000..6511274333 --- /dev/null +++ b/files/es/web/api/node/index.html @@ -0,0 +1,371 @@ +--- +title: Node +slug: Web/API/Node +tags: + - API + - DOM + - Interfaz + - Nodo + - Referencia +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

Node es una interfaz en la cuál un número de objetos de tipo DOM API heredan. Esta interfaz permite que esos objetos sean tratados similarmente.

+ +

Las siguientes interfaces todas heredan de los metodos y propiedades de Node: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (heredan el {{domxref("Text")}}, el {{domxref("Comment")}}, y {{domxref("CDATASection")}}), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

Estas interfaces pueden retornar null en casos particulares donde los métodos y las propiedades no son relevantes. Pueden retornar una excepción - por ejemplo cuando se agregan hijos a un tipo de node del cuál no puede existir hijos.

+ +

Propiedades

+ +

herendan propiedades de sus padres {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Retorna un {{domxref("DOMString")}} representando la base de la URL. El concepto de la base de la URL cambia de un lenguaje a otro;  en HTML, le corresponde al protocolo, el nombre del dominio y la estructura del directorio, eso es todo hasta el último '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}
+ Though recent specifications require localName to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}
+ Though recent specifications require namespaceURI to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the '#text' string, or a {{domxref("Document")}} node will have the '#document' string.
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
A {{ Interface("nsIPrincipal") }} representing the node principal.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+
+
{{domxref("Node.nodeValue")}}
+
Is a {{domxref("DOMString")}} representing the value of an object. For most Node type, this returns null and any set operation is ignored. For nodes of type TEXT_NODE ({{domxref("Text")}} objects), COMMENT_NODE ({{domxref("Comment")}} objects), and PROCESSING_INSTRUCTION_NODE ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns null.
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+ Though recent specifications require prefix to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{domxref("Node.textContent")}}
+
Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Insert a {{domxref("Node")}} as the last child node of this element.
+
{{domxref("Node.cloneNode()")}}
+
Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{domxref("Node.compareDocumentPosition()")}}
+
 
+
{{domxref("Node.contains()")}}
+
 
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
...
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Allows a user to get some {{domxref("DOMUserData")}} from the node.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.
+
{{domxref("Node.isDefaultNamespace()")}}
+
 
+
{{domxref("Node.isEqualNode()")}}
+
 
+
{{domxref("Node.isSameNode()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a Boolean flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
+
{{domxref("Node.lookupPrefix()")}}
+
 
+
{{domxref("Node.lookupNamespaceURI()")}}
+
 
+
{{domxref("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{domxref("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{domxref("Node.replaceChild()")}}
+
Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
 
+
+ +

Examples

+ +

Browse all child nodes

+ +

The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Syntax

+ +
DOMComb(parentNode, callbackFunction);
+ +

Description

+ +

Recursively cycle all child nodes of parentNode and parentNode itself and execute the callbackFunction upon them as this objects.

+ +

Parameters

+ +
+
parentNode
+
The parent node (Node Object).
+
callbackFunction
+
The callback function (Function).
+
+ +

Sample usage

+ +

The following example send to the console.log the text content of the body:

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

Remove all children nested within a node

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), isSameNode(), getFeature(), setUserData(), and getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{domxref("Document")}}.
+ The normalize() method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}The ownerDocument property was slightly modified so that {{domxref("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Initial definition.
+ +

 

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode() {{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.
+ Removed in {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Webkit and Blink incorrectly do not make Node inherit from {{domxref("EventTarget")}}.

diff --git a/files/es/web/api/node/insertarantes/index.html b/files/es/web/api/node/insertarantes/index.html new file mode 100644 index 0000000000..102d4dfbdd --- /dev/null +++ b/files/es/web/api/node/insertarantes/index.html @@ -0,0 +1,172 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertarAntes +tags: + - API + - DOM + - Nodo + - Referencia + - metodo +translation_of: Web/API/Node/insertBefore +--- +
{{APIRef("DOM")}}
+ +

El método Node.insertBefore() inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, insertBefore() lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).

+ +

Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con cloneNode() no se mantendrán sincronizadas automáticamente.

+ +

Si el nodo de referencia es null, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.

+ +

Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del DocumentFragment se moverá a la lista de hijos del nodo padre indicado.

+ +

Sintaxis

+ +
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
+
+ + + +

Si referenceNode es null, el newNode se insertará al final de la lista de nodos hijos.

+ +
+

referenceNode no es un parámetro opcional -- debes pasar explícitamente un Node o null. No proporcionándolo o pasando valores no válidos podría provocar un comportamiento distinto en diferentes versiones de navegadores.

+
+ +

Valor devuelto

+ +

El valor devuelto es el hijo añadido excepto cuando newNode es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.

+ +

Ejemplo

+ +

Ejemplo 1

+ +
<div id="parentElement">
+   <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crear el nodo a insertar
+var newNode = document.createElement("span");
+
+// Obtener una referencia al nodo padre
+var parentDiv = document.getElementById("childElement").parentNode;
+
+// Comienzo del test [ 1 ] : Existe un childElement --> Todo funciona correctamente
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode, sp2);
+// Fin del test [ 1 ]
+
+// Comienzo del test [ 2 ] : childElement no es del tipo undefined
+var sp2 = undefined; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+// Fin del test [ 2 ]
+
+// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string )
+var sp2 = "undefined"; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument"
+// Fin del test [ 3 ]
+</script>
+
+ +

Ejemplo 2

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crea un nuevo, elemento <span>
+var sp1 = document.createElement("span");
+
+// Obtener una referencia al elemento, antes de donde queremos insertar el elemento
+var sp2 = document.getElementById("childElement");
+// Obtener una referencia al nodo padre
+var parentDiv = sp2.parentNode;
+
+// Inserta un nuevo elemento en el DOM antes de sp2
+parentDiv.insertBefore(sp1, sp2);
+</script>
+
+ +

No existe el método insertAfter().  Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.

+ +

En el ejemplo anterior, sp1 podría insertarse después de sp2 usando:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+ +

Si sp2 no tiene ningún hermano depués de él, entonces debe ser el último hijo — sp2.nextSibling devuelve null, y sp1 se inserta al final de la lista de nodos hijos (inmediatamente después de sp2).

+ +

Ejemplo 3

+ +

Inserta un elemento antes del primer elemento hijo, utilizando la propiedad firstChild.

+ +
// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo
+var parentElement = document.getElementById('parentElement');
+// Obtener una referencia al primer hijo
+var theFirstChild = parentElement.firstChild;
+
+// Crear un nuevo elemento
+var newElement = document.createElement("div");
+
+// Insertar el nuevo elemento antes que el primer hijo
+parentElement.insertBefore(newElement, theFirstChild);
+
+ +

Cuando el elemento no tiene ub primer hijo, entonces firstChild es null. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.

+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Node.insertBefore")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Corrige errores en el algoritmo de inserción
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Describe el algoritmo con mayor detalle
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}Sin cambios notables
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}Sin cambios notables
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}Introducido
+ +

Ver también

+ + diff --git a/files/es/web/api/node/issamenode/index.html b/files/es/web/api/node/issamenode/index.html new file mode 100644 index 0000000000..205b6fd222 --- /dev/null +++ b/files/es/web/api/node/issamenode/index.html @@ -0,0 +1,110 @@ +--- +title: Node.isSameNode() +slug: Web/API/Node/isSameNode +translation_of: Web/API/Node/isSameNode +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +

Node.isSameNode() comprueba si dos nodos son iguales, es decir si hacen referencia al mismo objecto.

+ +
+

Warning: This method is no longer implemented in recent browsers.

+ +
// Instead of using
+node1.isSameNode(node2)
+
+// use
+node1 === node2 // or
+node1 == node2
+
+ +

Sintaxis

+ +
var isSameNode = node.isSameNode(other);
+
+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Eliminado de la especificación.
{{SpecName('DOM3 Core', 'core.html#Node3-isSameNode', 'Node.isSameNode()')}}{{Spec2('DOM3 Core')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}} {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}
+ {{CompatNo}} {{CompatGeckoMobile("10.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/api/node/lastchild/index.html b/files/es/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..0228c3264c --- /dev/null +++ b/files/es/web/api/node/lastchild/index.html @@ -0,0 +1,65 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +tags: + - API + - DOM + - NecesitaCompatibilidadNavegador + - Propiedad + - Referencia +translation_of: Web/API/Node/lastChild +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura Node.lastChild devuelve el último hijo del nodo. Si su padre es un elemento, entonces el hijo es generalmente un nodo de element, nodo de texto o un nodo de comentario. Devuelve null si no hay elementos hijos.

+ +

Sintaxis

+ +
var nodoHijo= nodo.lastChild;
+
+ +

Ejemplo

+ +
var tr = document.getElementById("row1");
+var corner_td = tr.lastChild;
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-node-lastchild', 'Node.lastChild')}}{{Spec2('DOM WHATWG')}}Sin cambio
{{SpecName('DOM3 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM3 Core')}}Sin cambio
{{SpecName('DOM2 Core', 'core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM2 Core')}}Sin cambio
{{SpecName('DOM1', 'level-one-core.html#ID-61AD09FB', 'Node.lastChild')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad en navegador

+ + + +

{{Compat("api.Node.lastChild")}}

diff --git a/files/es/web/api/node/namespaceuri/index.html b/files/es/web/api/node/namespaceuri/index.html new file mode 100644 index 0000000000..f24b54d713 --- /dev/null +++ b/files/es/web/api/node/namespaceuri/index.html @@ -0,0 +1,145 @@ +--- +title: Node.namespaceURI +slug: Web/API/Node/namespaceURI +tags: + - API + - DOM + - NecesitaCompatilibidadNavegador + - Propiedad + - Referencia + - obsoleta +translation_of: Web/API/Node/namespaceURI +--- +
{{APIRef("DOM")}}{{obsolete_header}}
+ +

La propiedad de solo lectura Nodo.namespaceURI devuelve la URI del nodo, o null en caso de que el nodo no tenga espacio de nombres. Cuando el nodo es un documento, este devuelve el espacio de nombres del XML para el documento actual.

+ +
+

En DOM4 esta API fué movida desde Node a las interficies {{domxref("Element")}} y {{domxref("Attr")}}.

+
+ +

Sintaxis

+ +
namespace = node.namespaceURI
+ +

Ejemplo

+ +

En este fragmento, un nodo esá siendo examinado por su {{domxref("Node.localName")}} y namespaceURI. Si el namespaceURI devuelve el nombre de espaciosXUL y el localName devuelve "browser", entonces el nodo es entendido  a ser un XUL <browser/>.

+ +
if (node.localName == "browser" &&
+    node.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
+  // Este es un navegador XUL
+}
+ +

Notas

+ +

Este no es un valor calculado que es el resultado de una búsqueda del espacio de nombres basada en la examinación de las declaraciones de un espacio de nombres en el ámbito. El espacio de nombres URI de un nodo es congelado ene l momento de su creación.

+ +

En Firefox 3.5 y anteriores, el espacio de nombres URI para los elementos HTML en los Documents HTML es null. En versiones psoteriores, en conformidad con HTML5, es https://www.w3.org/1999/xhtml como en XHTML. {{gecko_minversion_inline("1.9.2")}}

+ +

Para nodos de cualquier {{domxref("Node.nodeType")}} distintos de ELEMENT_NODE y ATTRIBUTE_NODE el valor de namespaceURI es siempre null.

+ +

Puedes crear un elemento con un namespaceURI concreto creando un método DOM de nivel 2 {{domxref("Document.createElementNS")}} y atributos con el método {{domxref("Element.setAttributeNS")}}.

+ +

Para la especificación Namespaces in XML, un atributo no hereda su espacio de nombres del elemento al que está sujeto. Si un atributo no es dado de manera explícita como espacio de nombres, entonces no los tiene.

+ +

El DOM no controla ni impone la validación del espacio de nombres. Depende de la aplicación DOM de hacer cualquier tipo de validación necesaria. Destacar también que el prefijo de espacio de nombre, una vez es asociado a un nodo enparticular, no puede ser modificado.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM3 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}{{Spec2("DOM3 Core")}}Specifies the behavior when it's set to null.
{{SpecName("DOM2 Core", "core.html#Namespaces-Considerations", "DOM Level 2 Core: XML Namespaces")}}{{Spec2("DOM2 Core")}} 
{{SpecName("DOM2 Core", "core.html#ID-NodeNSname", "Node.namespaceURI")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}
+ {{CompatNo}}46.0[1]		{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]
+ {{CompatNo}} {{CompatGeckoDesktop("48.0")}}[1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[2]
+ {{CompatNo}} {{CompatGeckoMobile("48.0")}}[1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta API fue movida a las APIs {{domxref("Element")}} y {{domxref("Attr")}} de acuerdo con el standard de DOM4.

+ +

[2] Antes de Gecko 5.0 {{geckoRelease("5.0")}}, esta propiedad era de lectura-escritura; empezando con Gecko 5.0  es sólo lectura, siguiendo la especificación.

+ +

Ver también

+ + diff --git a/files/es/web/api/node/nextsibling/index.html b/files/es/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..188357f9c6 --- /dev/null +++ b/files/es/web/api/node/nextsibling/index.html @@ -0,0 +1,87 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +tags: + - API + - DOM + - Gecko + - Nodo + - Propiedad +translation_of: Web/API/Node/nextSibling +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura Node.nextSibling devuelve el siguiente nodo con respecto al indicado en la lista de nodos ({{domxref("Node.childNodes","childNodes")}}) a la que este pertenece o null si el nodo especificado es el último en dicha lista.

+ +

Sintaxis

+ +
siguienteNodo = node.nextSibling
+
+ +

Notas

+ +
+ +

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. + Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a + whitespace text node rather than the actual element the author intended to get.

+ +

See Whitespace in the DOM and + W3C DOM 3 FAQ: Why are some Text nodes empty? + for more information.

+ +

{{domxref("Element.nextElementSibling")}} debe ser utilizado para obtener el siguiente elemento ignorando cualquier nodo en blanco.

+
+ +

Ejemplo

+ +
<div id="div-01">Este es el div-01</div>
+<div id="div-02">Este es el div-02</div>
+
+<script type="text/javascript">
+var el = document.getElementById('div-01').nextSibling,
+    i = 1;
+
+console.log('Hermanos de div-01:');
+
+while (el) {
+  console.log(i + '. ' + el.nodeName);
+  el = el.nextSibling;
+  i++;
+}
+
+</script>
+
+/**************************************************
+  Lo siguiente se escribe en la consola cuando carga:
+
+      Nodos hermanos del div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+
+**************************************************/
+
+ +

En el ejemplo anterior, se puede observar que los nodos #text se insertan en el DOM, donde se produce un espacio en blanco en el marcado entre las etiquetas (es decir, después de la etiqueta de cierre de un elemento y antes de la etiqueta de apertura del siguiente). No se crea ningún espacio en blanco entre los elementos insertados por la sentencia document.write.

+ +

La posible inclusión de los nodos de texto en el DOM se debe permitir cuando se atraviese el DOM utilizando nextSibling. Vea los recursos en la sección Notas.

+ +

Especificación

+ + + +

Compatibilidad en navegadores

+ +

{{Compat("api.Node.nextSibling")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/node/nodename/index.html b/files/es/web/api/node/nodename/index.html new file mode 100644 index 0000000000..5865b21e21 --- /dev/null +++ b/files/es/web/api/node/nodename/index.html @@ -0,0 +1,107 @@ +--- +title: element.nodeName +slug: Web/API/Node/nodeName +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Node/nodeName +--- +
{{APIRef("DOM")}}
+ +

Resumen

+ +

Devuelve el nombre del nodo actual, en forma de cadena.

+ +

Sintaxis

+ +
varstr =node.nodeName;
+
+ +

str es una variable de cadena en la que se almacena el nombre del elemento actual.

+ +

nodeName es un atributo de solo-lectura.

+ +

Notas

+ +

Aquí tenemos el valor devuelto por varios tipos de nodo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfaznodeName
Attrigual que Attr.name
CDATASection"#cdata-section"
Comment"#comment"
Document"#document"
DocumentFragment"#document-fragment"
DocumentTypeigual que DocumentType.name
Elementigual que Element.tagName
Entitynombre de entity
EntityReferencenombre de la identidad de referencia
Notationnombre de la notación
ProcessingInstructionigual que ProcessingInstruction.target
Text"#text"
+ +

Ejemplo

+ +

Dado el siguiente código:

+ +
<div id="d1">hola mundo</div>
+<input type="text" id="t"/>
+
+ +

y el siguiente script:

+ +
var div1 = document.getElementById("d1");
+var text_field = document.getElementById("t");
+text_field.value = div1.nodeName;
+
+ +

En XHTML (o alguna otra forma de XML) el valor de text_field será "div". Sin embargo, en HTML, el valor de text_field sería "DIV".

+ +

Ten en cuenta que podríamos haber usado la propiedad tagName en su lugar, ya que nodeName tiene el mismo valor que tagName para un elemento. Presta atención, sin embargo, a que nodeName devolverá #text para los nodos de texto, mientras que tagName devolverá undefined.

+ +

Especificaciones

+ +

DOM Level 2 Core: Node.nodeName

+ +

DOM Level 3 Core: Node.nodeName

diff --git a/files/es/web/api/node/nodetype/index.html b/files/es/web/api/node/nodetype/index.html new file mode 100644 index 0000000000..1a1f28ac39 --- /dev/null +++ b/files/es/web/api/node/nodetype/index.html @@ -0,0 +1,95 @@ +--- +title: Node.nodeType +slug: Web/API/Node/nodeType +translation_of: Web/API/Node/nodeType +--- +
+
{{APIRef("DOM")}}
+ +
La propiedad de solo lectura Node.nodeType retornará un valor positivo entero representando el tipo de nodo.
+ +
 
+
+ +

Sintaxis

+ +
var type = node.nodeType;
+
+ +

la variable type será un entero positivo con alguno de los siguientes valores:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+ +

Ejemplo

+ +

Este es un ejemplo que verifica si el primer nodo dentro de un elemento tipo documento (document) es un comentario nodo, y si no lo es, muestra un mensaje.

+ +
var node = document.documentElement.firstChild;
+if (node.nodeType != Node.COMMENT_NODE)
+  console.log("You should comment your code well!");
+
+ +

Especificación

+ + diff --git a/files/es/web/api/node/nodevalue/index.html b/files/es/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..418cecdb77 --- /dev/null +++ b/files/es/web/api/node/nodevalue/index.html @@ -0,0 +1,86 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +translation_of: Web/API/Node/nodeValue +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad Nodo.nodeValue devuelve o actualiza el valor del nodo actual.

+ +

Sintaxis

+ +
valor= nodo.nodeValue;
+
+ +

valor es una cadena contenedora del valor del nodo actual, si es que tiene alguno.

+ +

Notas

+ +

Para el nodo en si, nodeValue devuelve null. Para texto, comentarios, y nodos CDATA, nodeValue devuelve el contenido de dicho nodo. Para nodos atributos, el valor del atributo es devuelto.

+ +

La siguiente table muestra los distintos valores retornados por los diferentes elementos.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalor del atributo
CDATASectioncontenido de la sección CDATA
CommentContenido del comentario
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionTodo el contexto excluyendo el objetivo
TextContenido del nodo de texto
+ +

Cuando nodeValue es definido como null, actualizarlo no tiene efecto.

+ +

Especificación

+ + diff --git a/files/es/web/api/node/nodoprincipal/index.html b/files/es/web/api/node/nodoprincipal/index.html new file mode 100644 index 0000000000..55f02037bb --- /dev/null +++ b/files/es/web/api/node/nodoprincipal/index.html @@ -0,0 +1,33 @@ +--- +title: Nodo.nodoPrincipal +slug: Web/API/Node/nodoPrincipal +tags: + - API + - DOM + - Gecko + - Propiedad +translation_of: Web/API/Node +--- +
+
{{APIRef("DOM")}}
+{{Non-standard_header}} + +

La propiedad de solo loctura de Nodo.nodePrincipal devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.

+ +

{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}

+ +

Sintaxis

+ +
principalObj = element.nodePrincipal
+
+ +

Notas

+ +

Esta propiedad es de solo lectura; Si intentamos editarla nos lanzará una excepción. Además, esta propiedad tan solo debería ser accesible desde código privilegiado

+ +

Especificación

+ +

No hay especificaciones.

+
+ +

 

diff --git a/files/es/web/api/node/ownerdocument/index.html b/files/es/web/api/node/ownerdocument/index.html new file mode 100644 index 0000000000..b1213ac818 --- /dev/null +++ b/files/es/web/api/node/ownerdocument/index.html @@ -0,0 +1,118 @@ +--- +title: Node.ownerDocument +slug: Web/API/Node/ownerDocument +tags: + - API + - DOM + - Nodo + - Propiedad + - Referencia +translation_of: Web/API/Node/ownerDocument +--- +
{{APIRef("DOM")}}
+ +

La propiedad de lectura ownerDocument de la interfaz {{domxref("Node")}} devuelve el objeto Document de más alto nivel/jerarquia para ese nodo.

+ +

Sintaxis

+ +
var document = element.ownerDocument;
+
+ +

Resultado

+ +

document es el objeto {{domxref("Document")}} de más alto nivel, con el que todos los nodos descendientes se crean. Si la propiedad se usa en un nodo que el mismo es un Document, el resultado es null.

+ +

Ejemplo

+ +
// dado un nodo "p",  coge el hijo que tenga la más alta jerarquia
+// del objeto Document
+
+var d = p.ownerDocument;
+var html = d.documentElement;
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}}{{Spec2("DOM4")}}
{{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM3 Core")}}No change
{{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}}{{Spec2("DOM2 Core")}}Initial definition
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]6.0[2]{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Starting in Gecko 9.0 {{geckoRelease("9.0")}}, the ownerDocument of doctype nodes (that is, nodes for which {{domxref("Node.nodeType")}} is Node.DOCUMENT_TYPE_NODE or 10) is no longer null. Instead, the ownerDocument is the document on which document.implementation.createDocumentType() was called.

+ +

[2] http://msdn.microsoft.com/en-us/library/ie/ms534315(v=vs.85).aspx

diff --git a/files/es/web/api/node/parentnode/index.html b/files/es/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..62bf77c4ff --- /dev/null +++ b/files/es/web/api/node/parentnode/index.html @@ -0,0 +1,105 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +translation_of: Web/API/Node/parentNode +--- +
+
{{APIRef("DOM")}}
+ +
 
+
+ +

La propiedad de sólo lectura node.parentNode devuelve el padre del nodo especificado en el árbol.

+ +

Sintaxis

+ +
parentNode = node.parentNode
+ +

parentNode es el padre del nodo actual. El padre de un elemento es un nodo del tipo Element, un nodo Document, o un nodo DocumentFragment.

+ +

Ejemplo

+ +
if (node.parentNode) {
+  // Borra un nodo del árbol a no ser que
+  // esté ya en el árbol
+  node.parentNode.removeChild(node);
+}
+ +

Notas

+ +

Los nodos del tipo Document y DocumentFragment nunca van a tener un elemento padre, parentNode devolverá siempre null.

+ +

También devuelve null si el nodo acaba de ser creado y no está atado/incorporado al árbol.

+ +

Compatiblidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}0.2{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/node/previoussibling/index.html b/files/es/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..e537d09a23 --- /dev/null +++ b/files/es/web/api/node/previoussibling/index.html @@ -0,0 +1,63 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +tags: + - API + - DOM + - Gecko + - Propiedad +translation_of: Web/API/Node/previousSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo-lectura Node.previousSibling devuelve el nodo inmediatamente anterior al especificado en la lista de nodos {{domxref("Node.childNodes", "childNodes")}} de su padre, o null si el nodo especificado es el primero en dicha lista.

+ +

Sintaxis

+ +
nodoAnterior = nodo.previousSibling;
+
+ +

Ejemplo

+ +
<img id="b0">
+<img id="b1">
+<img id="b2">
+ +
console.log(document.getElementById("b1").previousSibling); // <img id="b0">
+console.log(document.getElementById("b2").previousSibling.id); // "b1"
+
+ +

Notas

+ + +

Gecko-based browsers insert text nodes into a document to represent whitespace in the source markup. + Therefore a node obtained, for example, using Node.firstChild or Node.previousSibling may refer to a + whitespace text node rather than the actual element the author intended to get.

+ +

See Whitespace in the DOM and + W3C DOM 3 FAQ: Why are some Text nodes empty? + for more information.

+ +

Para navegar en el sentido opuesto de la lista de nodos hijos se utiliza Node.nextSibling.

+ +

Especificación

+ + + +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Node.previousSibling")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/node/removechild/index.html b/files/es/web/api/node/removechild/index.html new file mode 100644 index 0000000000..423d482bb6 --- /dev/null +++ b/files/es/web/api/node/removechild/index.html @@ -0,0 +1,94 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +translation_of: Web/API/Node/removeChild +--- +
+
{{APIRef ( "DOM")}}
+ +

El método Node.removeChild() elimina un nodo hijo del DOM y puede devolver el nodo eliminado.

+ +

Sintaxis

+ +
+
var antiguoHijo = elemento.removeChild(child);
+O
+elemento.removeChild(child);
+
+
+ + + +

El hijo(child) eliminado aún existe en memoria pero ya no es parte del DOM. Con la primera forma de sintaxis mostrada, se puede reutilizar el nodo eliminado más tarde en el código, por medio de la referencia al objeto antiguoHijo. Sin embargo, en la segunda forma, la referencia a antiguoHijo se pierde, y suponiendo que el código no mantenga una referencia a ese objeto en alguna otra parte, inmediatamente será inutilizable e irrecuperable y será eliminada automáticamente de memoria después de poco tiempo.

+ +

Si hijo(child) no es en realidad hijo del nodo elemento, el método lanza una excepción. Esto también sucederá si child es en realidad hijo de elemento al momento de llamar al método, pero fue eliminado por un controlador(manejador) de eventos(event handler) invocado en el curso de tratar de eliminar el elemento. (e.g. blur).

+ +

Por lo tanto el método removeChild(child) lanza una excepción de 2 casos diferentes: 

+ +

1.      Si child es un hijo del elemento y por lo tanto existe en el DOM, pero se retiró el método lanza la siguiente excepción:

+ +

​​Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

+ +

2.      Si child no existe en el DOM de la página, el método emite la siguiente excepción:
+
+ Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

+ +

Ejemplos

+ +
<!--Ejemplo 1 HTML-->
+<div id="top" align="center"> </div>
+ +
<!--Javascript-->
+// El método lanza la excepción correspondiente al (caso 2)
+var top = document.getElementById("top");
+var nested = document.getElementById("nested");
+var garbage = top.removeChild(nested);
+ +
<!--Ejemplo 2 HTML-->
+<div id="top">
+   <div id="anidados"></div> 
+</div>
+ +
<!--Javascript-->
+// Eliminando un elemento específico cuando se conoce su nodo padre
+var d = document.getElementById("top");
+var d_nested = document.getElementById("anidados");
+var throwawayNode = d.removeChild(d_nested);
+ +
<!--Javascript-->
+// Eliminando un elemento específico utilizando la propiedad parentNode, que siempre hace referencia al nodo padre de un nodo (nodoHijo.parentNode.).
+nodo var = document.getElementById("anidados");
+if (node.parentNode) {
+  node.parentNode.removeChild(nodo);
+}
+ +
<!--Javascript-->
+// Eliminando todos los hijos de un elemento
+elemento var = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+ +

Notas:

+ +

removeChild() se debe invocar sobre el nodo padre del nodo que se va a eliminar.

+ +

Especificación

+ + + +

Vea también

+ + diff --git a/files/es/web/api/node/replacechild/index.html b/files/es/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..e93f025bd9 --- /dev/null +++ b/files/es/web/api/node/replacechild/index.html @@ -0,0 +1,73 @@ +--- +title: Node.replaceChild() +slug: Web/API/Node/replaceChild +tags: + - API + - DOM + - Nodo + - Referencia + - metodo +translation_of: Web/API/Node/replaceChild +--- +
+
{{APIRef("DOM")}}
+
+ +

El método Node.replaceChild() reemplaza un nodo hijo del elemento especificado por otro.

+ +

Sintáxis

+ +
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ + + +

Ejemplo

+ +
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// crear un nodo con un elemento vacío
+// sin ID, atributos, ni contenido
+var sp1 = document.createElement("span");
+
+// darle un atributo id llamado 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// crear algún contenido para el nuevo elemento
+var sp1_content = document.createTextNode("Nuevo elemento span para reemplazo.");
+
+// aplicar dicho contenido al nuevo elemento
+sp1.appendChild(sp1_content);
+
+// construir una referencia al nodo existente que va a ser reemplazado
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// reemplazar el nodo sp2 existente con el nuevo elemento span sp1
+parentDiv.replaceChild(sp1, sp2);
+
+// resultado:
+// <div>
+//   <span id="newSpan">Nuevo elemento span para reemplazo.</span>
+// </div>
+
+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/node/textcontent/index.html b/files/es/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..46586e89d5 --- /dev/null +++ b/files/es/web/api/node/textcontent/index.html @@ -0,0 +1,98 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

La propiedad textContent de la interfaz {{domxref("Node")}} representa el contenido de texto de un nodo y sus dencendientes.

+ +
+

Nota: textContent y {{domxref("HTMLElement.innerText")}} son confundidos con facilidad, pero ambos son diferentes en varias formas importantes.

+
+ +

Sintaxis

+ +
var text = Node.textContent;
+Node.textContent = string;
+
+ +

Valor devuelto

+ +

Una cadena de texto o null

+ +

Descripción

+ +

Al obtener esta propiedad:

+ + + +

Estableciendo textContent en un nodo elimina todos sus hijos y los reemplaza con un solo nodo de texto con el valor dado.

+ +

Diferencias con innerText

+ +

Internet Explorer introdujo elemento.innerText. La intención es muy parecida, con un par de diferencias:

+ + + +

Diferencias con innerHTML

+ +

innerHTML retorna el HTML como su nombre indica. Con bastante frecuencia, para leer o escribir texto en un elemento, la gente usa innerHTML. textContent debería usarse en su lugar. Ya que el texto no es procesado es más probable que tenga mejor rendimiento. Además, esto evita un vector de ataques XSS.

+ +

Ejemplo

+ +
// Dado el siguiente fragmento HTML:
+//   <div id="divA">Esto <span>es</span>un texto</div>
+
+// Lee el contenido textual:
+var text = document.getElementById("divA").textContent;
+// |text| contiene la cadena "Esto es un texto".
+
+// Escribe el contenido textual:
+document.getElementById("divA").textContent = "Esto es un nuevo texto";
+// El HTML "divA" ahora contiene una nueva cadena:
+//   <div id="divA">Esto es un nuevo texto</div>
+
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Node.textContent")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM WHATWG')}}Sin cambios desde DOM 4
{{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}}{{Spec2('DOM4')}} 
{{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}}{{Spec2('DOM3 Core')}}Introducido
+ +

 

diff --git a/files/es/web/api/nodelist/foreach/index.html b/files/es/web/api/nodelist/foreach/index.html new file mode 100644 index 0000000000..4cb55533e1 --- /dev/null +++ b/files/es/web/api/nodelist/foreach/index.html @@ -0,0 +1,132 @@ +--- +title: NodeList.prototype.forEach() +slug: Web/API/NodeList/forEach +tags: + - DOM + - Iterable + - Métodos + - NodeList + - Referencia + - Web +translation_of: Web/API/NodeList/forEach +--- +

{{APIRef("DOM")}}

+ +

El métodoforEach() de la interfase{{domxref("NodeList")}} llama a la función callback proporcionada como parámetro una vez para cadapar de valores en la lista, en el orden en que se insertaron.

+ +

Syntax

+ +
nodeList.forEach(callback[, thisArg]);
+
+ +

Parámetros

+ +
+
callback
+
Función a ser ejecutada paracada elemento, tomando eventualmente 3 argumentos: +
+
currentValue
+
El valor que esta siendo procesado en la lista de nodos.
+
currentIndex
+
El índice del elemento que esta siendo procesado en la lista de nodos.
+
listObj
+
El objeto NodeList al que se está aplicando el métodoforEach().
+
+
+
thisArg {{Optional_inline}}
+
Valor a ser usado como {{jsxref("this")}} al ejecutarcallback.
+
+ +

Valor Retornado

+ +

{{jsxref('undefined')}}.

+ +

Excepciones

+ +

Ninguna.

+ +

Ejemplo

+ +
var nodo = document.createElement("div");
+var infante1 = document.createElement("p");
+var infante2 = document.createTextNode("hey");
+var infante3 = document.createElement("span");
+
+nodo.appendChild(infante1);
+nodo.appendChild(infante2);
+nodo.appendChild(infante3);
+
+var list = nodo.childNodes;
+
+list.forEach(
+  function(currentValue, currentIndex, listObj) {
+    console.log(currentValue + ', ' + currentIndex + ', ' + this);
+  },
+  'miEsteArg'
+);
+ +

resulta en:

+ +
[object HTMLParagraphElement], 0, miEsteArg
+[object Text], 1, miEsteArg
+[object HTMLSpanElement], 2, miEsteArg
+ +

Polyfill

+ +

Este {{Glossary("Polyfill","polyfill")}} le da compatibilidad a todos los navegadores que soportan ES5:

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+   NodeList.prototype.forEach = function (callback, thisArg) {
+        thisArg = thisArg || window;
+       for (var i = 0; i < this.length; i++) {
+           callback.call(thisArg, this[i], i, this);
+       }
+    };
+}
+ +

ó

+ +
if (window.NodeList && !NodeList.prototype.forEach) {
+    NodeList.prototype.forEach = Array.prototype.forEach;
+}
+ +

El comportamiento ateriror esta implementado en muchos navegadores. NodeList.prototype.forEach (Chrome, Firefox for example).

+ +

Especificaciones

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + +
StatusComentarios
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }}DefineNodeList como<Nodo>iterable
{{SpecName("WebIDL", "#es-forEach", "forEach")}}{{Spec2("WebIDL")}}DefineforEachen declaracionesiterables
+ +

Compatibilidad en Navegadores

+ + + +

{{Compat("api.NodeList.forEach")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/nodelist/index.html b/files/es/web/api/nodelist/index.html new file mode 100644 index 0000000000..444a6cbb07 --- /dev/null +++ b/files/es/web/api/nodelist/index.html @@ -0,0 +1,123 @@ +--- +title: NodeList +slug: Web/API/NodeList +tags: + - API + - DOM + - Interfaz + - NodeList +translation_of: Web/API/NodeList +--- +
{{APIRef("DOM")}}
+ +

Los objetos NodeList son colecciones de nodos como los devueltos por propiedades como {{domxref ("Node.childNodes")}} y el método {{domxref ("document.querySelectorAll ()")}}..

+ +
+

Aunque NodeList no es un Array, es posible iterar sobre él utilizando forEach(). También puede convertirse a un Array usando Array.from.

+ +

Sin embargo, algunos navegadores antiguos no han implementado NodeList.forEach() ni Array.from(). Pero esas limitaciones pueden eludirse utilizando {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (más en este documento).

+
+ +

En algunos casos, NodeList es una colección en vivo, lo que significa que los cambios en el DOM se reflejan en la colección. Por ejemplo, {{domxref ("Node.childNodes")}} está en vivo:

+ +
var parent = document.getElementById('parent');
+var child_nodes = parent.childNodes;
+console.log(child_nodes.length); // asumamos "2"
+parent.appendChild(document.createElement('div'));
+console.log(child_nodes.length); // debería imprimir "3"
+
+ +

En otros casos, NodeList es una colección estática, lo que significa que cualquier cambio posterior en el DOM no afecta el contenido de la colección. {{domxref ("document.querySelectorAll ()")}} devuelve un NodeList estático.

+ +

Es bueno tener en cuenta esta distinción cuando elige cómo iterar sobre los elementos en NodeList, y cómo guarda en caché la longitud de la lista en particular.

+ +

Propiedades

+ +
+
{{domxref("NodeList.length")}}
+
El número de nodos en la NodeList.
+
+ +

Métodos

+ +
+
{{domxref("NodeList.item()")}}
+
+ +
+
Devuelve un elemento en la lista por su índice, o null si el índice está fuera de límites; se puede utilizar como una alternativa para acceder simplemente a nodeList[idx] (que en cambio devuelve indefinido cuando idx está fuera de límites).
+
{{domxref("NodeList.entries()")}}
+
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todos los pares clave / valor contenidos en este objeto.
+
{{domxref("NodeList.forEach()")}}
+
Ejecuta una función proporcionada una vez por elemento NodeList.
+
{{domxref("NodeList.keys()")}}
+
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite pasar por todas las claves de los pares clave / valor contenidos en este objeto.
+
{{domxref("NodeList.values()")}}
+
Devuelve un {{jsxref ("Iteration_protocols", "iterator")}} que permite recorrer todos los valores de los pares clave / valor contenidos en este objeto.
+
+ +

Ejemplo

+ +

Es posible iterar sobre los items en un NodeList usando:

+ +
for (var i = 0; i < myNodeList.length; i++) {
+  var item = myNodeList[i];  // No es necesario llamar a myNodeList.item(i) en JavaScript
+}
+
+ +

No se sienta tentado a for...in or for each...in para enumerar los elementos en la lista, ya que eso también enumerará la longitud y las propiedades del elemento de NodeList y causará errores si su secuencia de comandos asume que solo tiene que tratar con objetos {{domxref ("element")}}. Además, for..in no garantiza visitar las propiedades en ningún orden en particular.

+ +

Los bucles for...of harán un bucle sobre los objetos NodeList correctamente:

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+for (var item of list) {
+  item.checked = true;
+}
+
+ +

Los navegadores recientes también son compatibles con los métodos de iteración, {{domxref("NodeList.forEach()", "forEach()")}}, así como {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}}, y {{domxref("NodeList.keys()", "keys()")}}

+ +

También hay una forma compatible con Internet Explorer de usar {{jsxref ("Array.forEach ()", "Array.prototype.forEach")}} para la iteración.

+ +
var list = document.querySelectorAll( 'input[type=checkbox]' );
+Array.prototype.forEach.call(list, function (item) {
+  item.checked = true;
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM3 Core') }} 
{{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM2 Core') }} 
{{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}}{{ Spec2('DOM1') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

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

diff --git a/files/es/web/api/nondocumenttypechildnode/index.html b/files/es/web/api/nondocumenttypechildnode/index.html new file mode 100644 index 0000000000..20f5c6ea40 --- /dev/null +++ b/files/es/web/api/nondocumenttypechildnode/index.html @@ -0,0 +1,132 @@ +--- +title: NonDocumentTypeChildNode +slug: Web/API/NonDocumentTypeChildNode +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/NonDocumentTypeChildNode +--- +
{{APIRef("DOM")}}
+ +

The NonDocumentTypeChildNode interface contains methods that are particular to {{domxref("Node")}} objects that can have a parent, but not suitable for {{domxref("DocumentType")}}.

+ +

NonDocumentTypeChildNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, and {{domxref("CharacterData")}} objects.

+ +

Properties

+ +

There is no inherited property.

+ +
+
{{domxref("NonDocumentTypeChildNode.previousElementSibling")}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} immediately prior to this node in its parent's children list, or null if there is no {{domxref("Element")}} in the list prior to this node.
+
{{domxref("NonDocumentTypeChildNode.nextElementSibling")}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} immediately following this node in its parent's children list, or null if there is no {{domxref("Element")}} in the list following this node.
+
+ +

Methods

+ +

There is neither inherited, nor specific method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-childnode', 'NonDocumentTypeChildNode')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, and NonDocumentTypeChildNode. The previousElementSibling and nextElementSibling are now defined on the latter.
+ The {{domxref("CharacterData")}} and {{domxref("Element")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Support (on {{domxref("CharacterData")}})1.0{{CompatGeckoDesktop("25.0")}} [1]9.010.04.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("1.9.1")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
Support (on {{domxref("CharacterData")}}){{ CompatVersionUnknown() }}{{CompatGeckoDesktop("25.0")}}{{ CompatVersionUnknown() }}10.0{{ CompatVersionUnknown() }}
+
+ +

[1] Firefox 25 also added the two properties defined here on {{domxref("DocumentType")}}, this was removed in Firefox 28 due to compatibility problems, and led to the creation of this new pure interface.

+ +

See also

+ + diff --git a/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html b/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html new file mode 100644 index 0000000000..68395bc2b3 --- /dev/null +++ b/files/es/web/api/nondocumenttypechildnode/nextelementsibling/index.html @@ -0,0 +1,113 @@ +--- +title: NonDocumentTypeChildNode.nextElementSibling +slug: Web/API/NonDocumentTypeChildNode/nextElementSibling +tags: + - API + - DOM + - NonDocumentTypeChildNode + - Propiedad +translation_of: Web/API/NonDocumentTypeChildNode/nextElementSibling +--- +
{{APIRef("DOM")}}
+ +

La propiedad de sólo lectura NonDocumentTypeChildNode.nextElementSibling devuelve el elemento inmediatamente posterior al especificado, dentro de la lista de elementos hijos de su padre, o bien null si el elemento especificado es el último en dicha lista.

+ +

Sintaxis

+ +
var nextNode = elementNodeReference.nextElementSibling;
+ +

Ejemplo

+ +
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+  var el = document.getElementById('div-01').nextElementSibling;
+  console.log('Siblings of div-01:');
+  while (el) {
+    console.log(el.nodeName);
+    el = el.nextElementSibling;
+  }
+</script>
+
+ +

Este ejemplo muestra en la consola lo siguiente cuando se carga:

+ +
Siblings of div-01:
+DIV
+SCRIPT
+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente fragmento de código puede utilizarse para añadir el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("nextElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "nextElementSibling", {
+        get: function(){
+            var e = this.nextSibling;
+            while(e && 1 !== e.nodeType)
+                e = e.nextSibling;
+            return e;
+        }
+    });
+}
+ +

Polyfill para Internet Explorer 9+ y Safari

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('nextElementSibling')) {
+      return;
+    }
+    Object.defineProperty(item, 'nextElementSibling', {
+      configurable: true,
+      enumerable: true,
+      get: function () {
+        var el = this;
+        while (el = el.nextSibling) {
+          if (el.nodeType === 1) {
+              return el;
+          }
+        }
+        return null;
+      },
+      set: undefined
+    });
+  });
+})([Element.prototype, CharacterData.prototype]);
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-nextelementsibling', 'ChildNodenextElementSibling')}}{{Spec2('DOM WHATWG')}}Se dividió la interfaz ElementTraversal en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definido en la primera.
+ Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.
{{SpecName('Element Traversal', '#attribute-nextElementSibling', 'ElementTraversal.nextElementSibling')}}{{Spec2('Element Traversal')}}Añadió su definición inicial a la interfaz pura ElementTraversal y su uso en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +

{{Compat("api.NonDocumentTypeChildNode.nextElementSibling")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html b/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html new file mode 100644 index 0000000000..13867e8fe4 --- /dev/null +++ b/files/es/web/api/nondocumenttypechildnode/previouselementsibling/index.html @@ -0,0 +1,160 @@ +--- +title: NonDocumentTypeChildNode.previousElementSibling +slug: Web/API/NonDocumentTypeChildNode/previousElementSibling +translation_of: Web/API/NonDocumentTypeChildNode/previousElementSibling +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo lectura NonDocumentTypeChildNode.previousElementSibling retorna el {{domxref("Element")}} predecesor inmediato al especificado dentro de la lista de hijos de su padre, o bien null si el elemento especificado es el primero de dicha lista.

+ +

Sintaxis

+ +
prevNode = elementNodeReference.previousElementSibling;
+
+ +

Ejemplo

+ +
<div id="div-01">Aquí está div-01</div>
+<div id="div-02">Aquí está div-02</div>
+<li>Esto es un elemento de lista</li>
+<li>Esto es otro elemento de lista</li>
+<div id="div-03">Aquí esta div-03</div>
+
+<script>
+  var el = document.getElementById('div-03').previousElementSibling;
+  document.write('<p>Hermanos de div-03</p><ol>');
+  while (el) {
+    document.write('<li>' + el.nodeName + '</li>');
+    el = el.previousElementSibling;
+  }
+  document.write('</ol>');
+</script>
+
+ +

Este ejemplo muestra lo siguiente en la página cuando carga:

+ +
Hermanos de div-03
+
+   1. LI
+   2. LI
+   3. DIV
+   4. DIV
+
+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a IE9, así que puede utilizarse el siguiente fragmento para añadri el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("previousElementSibling" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "previousElementSibling", {
+        get: function(){
+            var e = this.previousSibling;
+            while(e && 1 !== e.nodeType)
+                e = e.previousSibling;
+            return e;
+        }
+    });
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-nondocumenttypechildnode-previouselementsibling', 'NonDocumentTypeChildNode.previousElementSibling')}}{{Spec2('DOM WHATWG')}}Dividió el interfaz ElementTraversal en {{domxref("ChildNode")}}, {{domxref("ParentNode")}}, y {{domxref("NonDocumentTypeChildNode")}}. Este método queda ahora definida en el primero.
+ Los interfaces {{domxref("Element")}} y {{domxref("CharacterData")}} implementaron la nueva interfaz.
{{SpecName('Element Traversal', '#attribute-previousElementSibling', 'ElementTraversal.previousElementSibling')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal y lo usa en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})4{{CompatGeckoDesktop("1.9.1")}}99.84
Soporte en {{domxref("CharacterData")}}29.0{{CompatGeckoDesktop("25")}} [1]{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatVersionUnknown}}9.8{{CompatVersionUnknown}}
Soporte en {{domxref("CharacterData")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Firefox 25 también añadía esta propiedad a {{domxref("DocumentType")}}, y fue eliminada en Firefox 28 debido a problemas de compatibildad.

+ +

Ver también

+ + diff --git a/files/es/web/api/notification/body/index.html b/files/es/web/api/notification/body/index.html new file mode 100644 index 0000000000..46c3209386 --- /dev/null +++ b/files/es/web/api/notification/body/index.html @@ -0,0 +1,63 @@ +--- +title: Notification.body +slug: Web/API/notification/body +tags: + - API + - API Notificaciones + - Javascript Notificador + - Notificaciones +translation_of: Web/API/Notification/body +--- +

{{APIRef("Web Notifications")}}

+ +

{{ SeeCompatTable() }}

+ +

Resumen 

+ +

El body es la  propiedad que representa el contenido  de la notificacion.

+ +

Los valores por esta propiedad son enviandos durante la  instanciación de {{domxref("Notification")}}  definiendo la propiedad body en el objeto de las opciones pasa al {{domxref("Notification")}} constructor.

+ +

Sintaxis

+ +
var body = instanceOfNotification.body;
+
+ +

Tipo

+ +

String.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Initial specification.
   
+ + + +

{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/notification/dir/index.html b/files/es/web/api/notification/dir/index.html new file mode 100644 index 0000000000..35f58dfca7 --- /dev/null +++ b/files/es/web/api/notification/dir/index.html @@ -0,0 +1,59 @@ +--- +title: Notification.dir +slug: Web/API/notification/dir +translation_of: Web/API/Notification/dir +--- +

{{APIRef("Web Notifications")}}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad dir indica la direccion para el lenguaje a usar dentro de la notificación.

+ +

El valor por esta propiedad es envianda durante la instanciancion de {{domxref("Notification")}} mediante la definición de la propiedad dir el objeto de las opciones pasa al {{domxref ("Notificación")}} constructor.

+ +

Sintaxis

+ +
var direction = instanceOfNotification.dir;
+
+ +

Tipo

+ +

String representa la actual direccion. puede ser:  

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionEstadoComentarios
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Initial specification.
+ + + +

{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

+ +

Ver tambien

+ + diff --git a/files/es/web/api/notification/icon/index.html b/files/es/web/api/notification/icon/index.html new file mode 100644 index 0000000000..deb7c0606e --- /dev/null +++ b/files/es/web/api/notification/icon/index.html @@ -0,0 +1,58 @@ +--- +title: Notification.icon +slug: Web/API/notification/icon +translation_of: Web/API/Notification/icon +--- +

{{APIRef("Web Notifications")}}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad icon indica la URL del icono a usar dentro de la notificacion.

+ +

El valor para esta propiedad es enviada durante la instanciacion {{domxref("Notification")}}  definiendo la propiedad icon el objeto pasa al  {{domxref("Notification")}} constructor.

+ +

Sintaxis

+ +
var icon = instanceOfNotification.icon;
+
+ +

Tipo

+ +

String que representa una URL válida.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Initial specification.
   
+ + + +

{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/notification/index.html b/files/es/web/api/notification/index.html new file mode 100644 index 0000000000..a673bc5739 --- /dev/null +++ b/files/es/web/api/notification/index.html @@ -0,0 +1,430 @@ +--- +title: Notification +slug: Web/API/notification +translation_of: Web/API/Notification +--- +
{{APIRef("Web Notifications")}}
+ +
+ +

La interfaz Notification de la Notifications API se usa para configurar y mostrar notificaciones de escritorio al usuario. La apariencia y las funcionalidad especificas de esta notificacion varia a traves de las distintas plataformas, pero generalmente esta plataformas proveen un camino para proveer informacion al usuario de manera asincronica.

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("Notification.Notification", "Notification()")}}
+
Crea una nueva instancia del objecto Notification.
+
+ +

Propiedades

+ +

Propiedades Estáticas

+ +

Estas propiedades solo estan disponibles en el objecto Notification en sí mismo.

+ + + +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Una cadena que representa el permiso actual para mostrar notificaciones. Los valores posibles son:
+
+ + + + + +
+
+ +

Propiedades de Instancia

+ +

Estas propiedades solo están disponibles en instancias del objecto Notification.

+ +
+
{{domxref("Notification.actions")}} {{readonlyinline}}
+
Arreglo de acciones de la notificación, como se especifica en el parámetro de opciones del constructor.
+
{{domxref("Notification.badge")}} {{readonlyinline}}
+
URL de la imagen usada para representar la notificación cuando no hay espacio suficiente para mostrarla.
+
+ +
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
El título de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
La dirección del texto de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
El código del lenguaje de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
The body string de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
El ID de la notificación (si hay) como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
La URL de la imagen usada como ícono de la notificación como está especificado en el parámetro options del constructor.
+
{{domxref("Notification.image")}} {{readonlyinline}}
+
URL de una imagen para mostrar como parte de la notificación, al igual que se especifica en el parámetro de opciones del constructor.
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Retorna un clon estructurado de los datos de la notificación.
+
{{domxref("Notification.requireInteraction")}} {{readonlyinline}}
+
Un {{jsxref("Boolean")}} indicando en dispositivos pantallas lo suficientemente grandes, una notificación debería permanecer activa hasta que el usuario haga click o la descarte.
+
{{domxref("Notification.silent")}} {{readonlyinline}}
+
Especifica si la notificación debería ser silenciada, por ejemplo sin generar sonidos o vibraciones, independientemente de la configuración del dispositivo.
+
{{domxref("Notification.timestamp")}} {{readonlyinline}}
+
Especifica el tiempo en la cual una notificación fué creada o aplicable (pasado, presente o futuro).
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
Especifica un patrón de vibración para dispositivos que disponen de hardware para emitirlo. 
+
+ +

Propiedades no soportadas

+ +

Las siguientes propiedades están listadas en las especificaciones más actualizadas, pero aún no están soportadas por los navegadores. Es aconsejable verificarlas regularmente para ver si el estado de ellas ha sido actualizado, y háganos saber si encuentra información desactualizada.

+ +
+
{{domxref("Notification.noscreen")}} {{readonlyinline}}
+
Specifies whether the notification firing should enable the device's screen or not.
+
{{domxref("Notification.renotify")}} {{readonlyinline}}
+
Especifica si se debe notificar al usuario después de que una notificación nueva reemplace a una anterior.
+
{{domxref("Notification.sound")}} {{readonlyinline}}
+
Especifica un recurso de sonido para reproducir cuando se activa la notificación, en lugar del sonido de notificación del sistema predeterminado.
+
{{domxref("Notification.sticky")}} {{readonlyinline}}
+
+
Especifica si la notificación debe ser 'fija', es decir, no fácilmente eliminable por el usuario.
+
+
{{domxref("Notification.vibrate")}} {{readonlyinline}}
+
+
Especifica un patrón de vibración para los dispositivos con hardware de vibraciones para emitir.
+
+
+ +

Manejador de Eventos(Event Handler)

+ +
+
{{domxref("Notification.onclick")}}
+
Un manejador para el {{event("click")}} event. Sera inicializado cada vez que el usuario de click en la notificacion.
+
{{domxref("Notification.onerror")}}
+
A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.
+
+ +

Obsolete handlers

+ +

The following event handlers are still supported as listed in the {{anch("browser compatibility")}} section below, but are no longer listed in the current spec. It is safe therefore to assume they are obsolete, and may stop working in future browser versions.

+ +
+
{{domxref("Notification.onclose")}}
+
A handler for the {{event("close")}} event. It is triggered when the user closes the notification.
+
{{domxref("Notification.onshow")}}
+
A handler for the {{event("show")}} event. It is triggered when the notification is displayed.
+
+

Methods

+ +

Static methods

+ Estos métodos están disponibles solo en el objeto de Notificación en sí.
+
+
{{domxref("Notification.requestPermission()")}}
+
Solicita permiso del usuario para mostrar notificaciones.
+
+

Instance methods

+ +

These properties are available only on an instance of the Notification object or through its prototype. The Notification object also inherits from the {{domxref("EventTarget")}} interface.

+
+
{{domxref("Notification.close()")}}
+
Programmatically closes a notification.
+
+

Example

+ +

Assume this basic HTML:

+ + 
<button onclick="notifyMe()">Notify me!</button>
+ +

It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.

+ + 
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have already been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you 
+  // want to be respectful there is no need to bother them any more.
+}
+ +

{{EmbedLiveSample('Example', '100%', 30)}}

+ +

In many cases, you don't need to be this verbose. For example, in our Emogotchi demo (see source code), we simply run {{domxref("Notification.requestPermission")}} regardless to make sure we can get permission to send notifications (this uses the newer promise-based method syntax):

+ + 
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Then we run a simple spawnNotification() function when we want to fire a notification — this is passed arguments to specify the body, icon and title we want, then it creates the necessary options object and fires the notification using the {{domxref("Notification.Notification","Notification()")}} constructor.

+ + 
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}256[3]
icon5{{property_prefix("webkit")}}[1]
+ 22		4.0 {{property_prefix("moz")}}[2]
+ 22		{{CompatNo}}25{{CompatNo}}
Available in workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
silent{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
noscreen, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
renotify{{CompatChrome(50.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatUnknown}}{{CompatGeckoDesktop("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
icon{{CompatUnknown}}{{CompatVersionUnknown}}4.0{{property_prefix("moz")}}[2]
+ 22		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}
Available in workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
silent{{CompatNo}}{{CompatChrome(43.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(43.0)}}
noscreen, sticky{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
sound{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
renotify{{CompatNo}}{{CompatChrome(50.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Promise-based Notification.requestPermission(){{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("47.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification.

+ +

Before Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

Before Chrome 42, service worker additions were not supported.

+ +

Starting in Chrome 49, notifications do not work in incognito mode.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification must be done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification method.

+ +

Prior to Firefox 22 (Firefox OS <1.2), the Notification was displayed when calling the show method and supported only the click and close events.

+ +

Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.

+ +

One particular Firefox OS issue is that you can pass a path to an icon to use in the notification, but if the app is packaged you cannot use a relative path like /my_icon.png. You also can't use window.location.origin + "/my_icon.png" because window.location.origin is null in packaged apps. The manifest origin field fixes this, but it is only available in Firefox OS 1.1+. A potential solution for supporting Firefox OS <1.1 is to pass an absolute URL to an externally hosted version of the icon. This is less than ideal as the notification is displayed immediately without the icon, then the icon is fetched, but it works on all versions of Firefox OS.

+ +

When using notifications  in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above: "permissions": { "desktop-notification": {} }

+ +

[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

+ +

See also

+ Using the Notifications API
+
diff --git a/files/es/web/api/notification/onclick/index.html b/files/es/web/api/notification/onclick/index.html new file mode 100644 index 0000000000..211947a1b8 --- /dev/null +++ b/files/es/web/api/notification/onclick/index.html @@ -0,0 +1,61 @@ +--- +title: Notification.onclick +slug: Web/API/notification/onclick +tags: + - API + - DOM + - Notifications + - Propiedad + - Referencia + - onclick +translation_of: Web/API/Notification/onclick +--- +

{{APIRef("Web Notifications")}}

+ +

La propiedad onclick de la interfaz {{domxref("Notification")}} especifica un event listener para recibir eventos {{event("click")}}. Estos eventos ocurren cuando el usuario hace un click sobre el {{domxref("Notification")}} mostrado.

+ +

Sintaxis

+ +
Notification.onclick = function(event) { ... };
+
+ +

El comportamiento por defecto es mover el foco al viewport del sitio de contexto de dicha notificación. Si no deseas este comportamiento, puedes llamar preventDefault() en el objeto del evento.

+ +

Ejemplos

+ +

En el siguiente ejemplo, utilizamos un manejador onclick para abrir un sitio web en una nueva pestaña (especificado con la inclusión del parámetro '_blank') una vez que la notifación es cliqueada.

+ +
notification.onclick = function(event) {
+  event.preventDefault(); // Previene al buscador de mover el foco a la pestaña del Notification
+  window.open('http://www.mozilla.org', '_blank');
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications','#dom-notification-onclick','onclick')}}{{Spec2('Web Notifications')}}Living standard.
+ +

Compatibilidad de navegadores

+ +

{{Page("/en-US/docs/Web/API/Notification","Browser compatibility")}}

+ +

Mira también

+ + diff --git a/files/es/web/api/notification/permission/index.html b/files/es/web/api/notification/permission/index.html new file mode 100644 index 0000000000..d528e2f9e0 --- /dev/null +++ b/files/es/web/api/notification/permission/index.html @@ -0,0 +1,191 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +translation_of: Web/API/Notification/permission +--- +

{{APIRef("Web Notifications")}}

+ +

La propiedad permission es una propiedad de sólo lectura de la interfaz {{domxref("Notification")}}. Esta propiedad indica el permiso concedido por el usuario para mostrar notificaciones.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
var permission = Notification.permission;
+ +

Valor

+ +

Una {{domxref("DOMString")}} que representa el permiso actual. El valor puede ser:

+ + + +

Ejemplos

+ +

Podríamos usar el próximo fragmento para:

+ +
    +
  1. Comprobar si las notificaciones están soportadas
    2. +
  2. Comprobar si el permiso ha sido concedido para el origen actual +
      +
    1. Si ha sido concedido, lanzar la notificación
      2. +
    2. Si no ha sido concedido, pedir el permiso
      3. +
    3. Si se concede, lanzar la notificación
      4. +
    +
    3. +
+ +
function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    console.log("Este navegador no es compatible con las notificaciones de escritorio");
+  }
+
+  // Comprobamos si los permisos han sido concedidos anteriormente
+  else if (Notification.permission === "granted") {
+    // Si es correcto, lanzamos una notificación
+    var notification = new Notification("Hola!");
+  }
+
+  // Si no, pedimos permiso para la notificación
+  else if (Notification.permission !== 'denied' || Notification.permission === "default") {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario nos lo concede, creamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Hola!");
+      }
+    });
+  }
+
+  // Por último, si el usuario ha denegado el permiso, y quieres ser respetuoso, no hay necesidad de molestarlo.
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Notifications","#dom-notification-permission","permission")}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5 {{ property_prefix("webkit") }} (see notes)
+ 22		{{CompatVersionUnknown}}4.0 {{ property_prefix("moz") }} (see notes)
+ 22		{{ CompatNo() }}256 (see notes)
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{ CompatUnknown() }} +

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}4.0 {{ property_prefix("moz") }} (see notes)
+ 22		1.0.1 {{ property_prefix("moz") }} (see notes)
+ 1.2		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }} +

{{CompatVersionUnknown}}

+
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Notas de Firefox OS

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}

+ +

Notas de Chrome

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}

+ +

Notas de Safari

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/notification/requestpermission/index.html b/files/es/web/api/notification/requestpermission/index.html new file mode 100644 index 0000000000..6c4b8080b3 --- /dev/null +++ b/files/es/web/api/notification/requestpermission/index.html @@ -0,0 +1,143 @@ +--- +title: Notification.requestPermission() +slug: Web/API/notification/requestPermission +translation_of: Web/API/Notification/requestPermission +--- +

{{APIRef("Web Notifications")}}

+ +

El método requestPermission() de la interfaz {{domxref("Notification")}} realiza una petición de permiso al usuario para que en ese dominio web se puedan mostrar notificaciones. 

+ +

Sintaxis

+ +

La ultima especificación ha actualizado este método a una sintaxis basada en Promise:

+ +
Notification.requestPermission().then(function(permission) { ... });
+ +

Anteriormente, la sintaxis se basaba en una simple retrollamada (callback); esta especificación ahora está obsoleta.

+ +
Notification.requestPermission(callback);
+ +

Parámetros

+ +
+
callback {{optional_inline}} {{deprecated_inline("gecko46")}}
+
Una retrollamada (callback) opcional que es ejecutado con el valor del permiso elegido por el usuario. Obsoleto y reemplazado por el valor de retorno de Promise.
+
+ +

Retorno

+ +

Devuleve un Promise que se transforma a DOMString con el permiso escogido por el usuario. Los valores posibles para este son granted, denied, ó default.

+ +

Ejemplo

+ +

El siguiente fragmento realiza la petición de permiso al usuario, después registra un resultado diferente dependiendo de la elección del usuario.

+ +
Notification.requestPermission(function(result) {
+  if (result === 'denied') {
+    console.log('Permission wasn\'t granted. Allow a retry.');
+    return;
+  } else if (result === 'default') {
+    console.log('The permission request was dismissed.');
+    return;
+  }
+  // Hacer algo con el permiso concedido.
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad con los buscadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5 {{ property_prefix("webkit") }} (ver notas)
+ 22		4.0 {{ property_prefix("moz") }} (ver notas)
+ 22		{{ CompatNo() }}256 (ver notas)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{ CompatUnknown() }} +

{{CompatVersionUnknown}}

+ 		4.0 {{ property_prefix("moz") }} (ver notas)
+ 22		1.0.1 {{ property_prefix("moz") }} (ver notas)
+ 1.2		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }} +

{{CompatVersionUnknown}}

+
+
+ +

Notas de Firefox OS

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}

+ +

Notas de Chrome

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}

+ +

Notas de Safari

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/notifications_api/index.html b/files/es/web/api/notifications_api/index.html new file mode 100644 index 0000000000..596064172e --- /dev/null +++ b/files/es/web/api/notifications_api/index.html @@ -0,0 +1,198 @@ +--- +title: Notifications API +slug: Web/API/Notifications_API +tags: + - Landing + - NeedsTranslation + - Notifications + - TopicStub + - permission + - system +translation_of: Web/API/Notifications_API +--- +

{{DefaultAPISidebar("Web Notifications")}}

+ +

The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.

+ +

Concepts and usage

+ +

On supported platforms, showing a system notification generally involves two things. First, the user needs to grant the current origin permission to display system notifications, which is generally done when the app or site initialises, using the {{domxref("Notification.requestPermission()")}} method. This will spawn a request dialog, along the following lines:

+ +

+ +

From here the user can choose to allow notifications from this origin, block notifications from this origin, or not choose at this point. Once a choice has been made, the setting will generally persist for the current session. 

+ +
+

Note: As of Firefox 44, the permissions for Notifications and Push have been merged. If permission is granted for notifications, push will also be enabled.

+
+ +

Next, a new notification is created using the {{domxref("Notification.Notification","Notification()")}} constructor. This must be passed a title argument, and can optionally be passed an options object to specify options, such as text direction, body text, icon to display, notification sound to play, and more.

+ +

{{AvailableInWorkers}}

+ +

In addition, the Notifications API spec specifies a number of additions to the ServiceWorker API, to allow service workers to fire notifications.

+ +
+

Note: To find out more about using notifications in your own app, read Using the Notifications API.

+
+ +

Notifications interfaces

+ +
+
{{domxref("Notification")}}
+
Defines a notification object.
+
+ +

Service worker additions

+ +
+
{{domxref("ServiceWorkerRegistration")}}
+
Includes the {{domxref("ServiceWorkerRegistration.showNotification()")}} and {{domxref("ServiceWorkerRegistration.getNotifications()")}} method, for controlling the display of notifications.
+
{{domxref("ServiceWorkerGlobalScope")}}
+
Includes the {{domxref("ServiceWorkerGlobalScope.onnotificationclick")}} handler, for firing custom functions when a notification is clicked.
+
{{domxref("NotificationEvent")}}
+
A specific type of event object, based on {{domxref("ExtendableEvent")}}, which represents a notification that has fired.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{property_prefix("webkit")}}[1]
+ 22		{{CompatGeckoDesktop("2.0")}}{{property_prefix("moz")}}[2]
+ {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}256[3]
Available in workers{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Service worker additions +

{{CompatChrome(42.0)}}

+ 		{{CompatGeckoDesktop("42.0")}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}} +

{{CompatVersionUnknown}}

+ 		{{CompatGeckoMobile(2.0)}}{{property_prefix("moz")}}[2]
+ {{CompatGeckoMobile(22.0)}}		1.0.1{{property_prefix("moz")}}[2]
+ 1.2		{{CompatNo}}{{CompatUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+
Available in workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41.0)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Service worker additions{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(42.0)}}[4]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
+
+ +

[1] Prior to Chrome 22, the support for notification followed an old prefixed version of the specification and used the {{domxref("window.navigator.webkitNotifications","navigator.webkitNotifications")}} object to instantiate a new notification. Prior to Chrome 32, {{domxref("Notification.permission")}} was not supported.

+ +

[2] Prior to Firefox 22 (Firefox OS <1.2), the instantiation of a new notification was done with the {{domxref("window.navigator.mozNotification", "navigator.mozNotification")}} object through its createNotification() method. In addition, the Notification was displayed when calling the show() method, and supported only the click and close events (Nick Desaulniers wrote a Notification shim to cover both newer and older implementations.)

+ +

[3] Safari started to support notification with Safari 6, but only on Mac OSX 10.8+ (Mountain Lion).

+ +

[4] Firefox 42 has shipped with web notifications from Service Workers disabled.

+ +

Firefox OS permissions

+ +

When using notifications in a Firefox OS app, be sure to add the desktop-notification permission in your manifest file. Notifications can be used at any permission level, hosted or above:

+ +
"permissions": {
+  "desktop-notification": {}
+}
+ +

See also

+ + diff --git a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html new file mode 100644 index 0000000000..8220534f63 --- /dev/null +++ b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html @@ -0,0 +1,294 @@ +--- +title: Usando la API de Notificaciones +slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones +tags: + - API + - Notificaciones + - Tutorial +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +

{{APIRef("Web Notifications")}}

+ +

La API de Notificaciones permite a una página web enviar notificaciones que se mostrarán fuera de la web al nivel del sistema. Esto permite a las aplicaciones web enviar información al usuario aunque estas estén de fondo.

+ +

{{AvailableInWorkers}}

+ +

Para comenzar, tenemos que saber qué son las notificaciones y cómo se muestran. En la imagen de abajo se puede ver un ejemplo de notificaciones en android.

+ +

+ +

El sistema de notificaciones variará según el navegador y la plataforma en la que estemos, pero esto no va a suponer ningún problema. La API de notificaciones está escrita de manera que sea compatible con la gran mayoría de sistemas.

+ +

Ejemplos

+ +
+
+

Un ejemplo claro de uso de notificaciones web puede ser un mail basado en web o una aplicación IRC que nos notificará cada vez que nos llegue un nuevo mensaje, aunque estemos fuera de la aplicación. Un ejemplo de esto lo podemos ver en Slack.

+ +

Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:

+ +
    +
  • Lista de pendientes: Esto es una app sencilla que almacena las tareas pendientes localmente usando IndexedDB y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. Descarga el código, o echa un vistazo al ejemplo en tiempo real.
    • +
  • Emogotchi: Una parodia absurda de Tamagotchi, en la que tienes que mantener a tu Emo miserable o perderás el juego. Esto usa las notificaciones del sistema para indicarte cómo lo estás haciendo y para quejarse de ti, TODO EL RATO. Descarga el código de Emogotchi, o echa un vistazo a la versión en tiempo real.
    • +
+
+ +
+

.

+
+
+ +

Pidiendo permiso

+ +

Antes de que una app pueda lanzar una notificación, el usuario tiene que darle permiso para ello. Esto es un requisito común cuando una API intenta interactuar con algo fuera de una página web — al menos una vez, el usuario tendrá que permitir a la aplicación mostrar notificaciones, de esta forma, el usuario decide qué aplicaciones le pueden mostrar notificaciones y cuáles no.

+ +

Comprobando el permiso actual

+ +

Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:

+ +
+
default
+
No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.
+
granted
+
El usuario ha permitido las notificaciones de la app.
+
denied
+
El usuario ha denegado las notificaciones de la app.
+
+ +

Obteniendo permiso

+ +

Si la aplicación aún no tiene permiso para mostrar notificaciones, tendremos que hacer uso de {{domxref("Notification.requestPermission()")}} para pedir permiso al usuario. En su manera más simple, tal y como se usa en la Demo de Emogotchi (código fuente), solo tenemos que incluir lo siguiente:

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Esto usa la versión promise del método, que está soportada en las versiones recientes (p.ej. Firefox 47). Si quieres soportar versiones más antiguas tendrás que usar la versión de callback, que es la siguiente:

+ +
Notification.requestPermission();
+ +

La versión de callback acepta de forma opcional una función callback que será ejecutada cuando el usuario responda a si quiere notificaciones o no (tal y como se ve en el segundo else ... if abajo). Por lo general, pedirás permiso para mostrar notificaciones una vez que hayas inicializado la app, y antes de lanzar una notificación. Si quieres ser muy cuidadoso puedes usar lo siguiente (ver To-do List Notifications):

+ +
function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    alert("Este navegador no soporta las notificaciones del sistema");
+  }
+
+  // Comprobamos si ya nos habían dado permiso
+  else if (Notification.permission === "granted") {
+    // Si esta correcto lanzamos la notificación
+    var notification = new Notification("Holiwis :D");
+  }
+
+  // Si no, tendremos que pedir permiso al usuario
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario acepta, lanzamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Gracias majo!");
+      }
+    });
+  }
+
+  // Finalmente, si el usuario te ha denegado el permiso y
+  // quieres ser respetuoso no hay necesidad molestar más.
+}
+ +
+

Nota: Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos load (ver problema 274284).

+
+ +

Permisos en Firefox OS manifest

+ +

Ten en cuenta que mientras la API de Notificaciones no esté {{Glossary("privileged")}} o {{Glossary("certified")}}, deberías seguir inculyendo una entrada en tu archivo manifest.webapp cuando vayas a usarlo en una app en Firefox OS:

+ +
"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+},
+"messages": [{"notification": "path/to/your/index.html"}]
+
+
+ +
+

Nota: Cuándo una aplicación es instalada, no deberías de necesitar {{anch("Getting permission","explicitly request permission")}}, pero vas a seguir necesitando los permisos y las entradas de texto de arriba para poder lanzar las notificaciones.

+
+ +

Creando una notificación

+ +

Crear una notificación es fácil, simplemente usa el constructor {{domxref("Notification")}}. Este constructor espera un título que mostrar en la notificación y otras opciones para mejorar la notificación, como un {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body","body")}}.

+ +

Por ejemplo, en el Ejemplo de Emogotchi tenemos dos funciones que pueden ser llamadas cuando hay que lanzar una notificación; el uso de una u otra depende de si queremos establecer el contenido de la notificación, o si queremos una notificación con contenido aleatorio:

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+  setTimeout(n.close.bind(n), 5000);
+}
+
+function randomNotification() {
+  var randomQuote = quoteChooser();
+  var options = {
+      body: randomQuote,
+      icon: 'img/sad_head.png',
+  }
+
+  var n = new Notification('Emogotchi says',options);
+  setTimeout(n.close.bind(n), 5000);
+}
+ +

Cerrando las notificaciones

+ +

Firefox y Safari cierran las notificaciones automáticamente tras cierto tiempo (unos 4 segundos). Esto también puede suceder a nivel de sistema operativo (en Windows duran 7 segundos por defecto). En cambio, en algunos navegadores no se cierran automáticamente, como en Chrome, por ejemplo. Para asegurarnos de que las notificaciones se cierran en todos los navegadores, al final de las funciones de arriba, llamamos a la función {domxref("Notification.close")}}  dentro de {{domxref("WindowTimers.setTimeout","setTimeout()")}} para cerrar la notificación tras 5 segundos. Date cuenta también del uso que hacemos de bind() para asegurarnos de que la función close() está asociada a la notificación.

+ +
setTimeout(n.close.bind(n), 5000);
+
+ +
+

Nota: Cuándo recibes un evento "close", no hay ninguna garantía de que haya sido el usuario quién ha cerrado la notificación. Esto coincide con la especificación que dice: "Cuando una notificación es cerrada, sea por la misma plataforma o por el usuario, se deben lanzar los pasos de cierre para la misma".

+
+ +

Eventos de Notificación

+ +

Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:

+ +
+
{{event("click")}}
+
Lanzado cuando el usuario hace click en la notificación.
+
{{event("error")}}
+
Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.
+
+ +

Estos eventos se pueden monitorizar usando los manejadores {{domxref("Notification.onclick","onclick")}} y {{domxref("Notification.onerror","onerror")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ella.

+ +

También hay otros dos eventos que estaban listados en la especificación, pero que han sido eliminados recientemente. Estos puede que sigan funcionando en los navegadores por ahora, pero deberían tratarse como obsoletos y evitar su uso:

+ +
+
{{event("close")}}
+
Lanzado cuándo la notificación se cierra.
+
{{event("show")}}
+
Lanzado cuándo la notificación se muestra al usuario.
+
+ +

Reemplazando notificaciones existentes

+ +

Normalmente los usuario no quieren recibir muchas notificaciones en poco tiempo — por ejemplo, una aplicación de mensajería que te notifica cada mensaje que te llegue, y te llegan un montón. Para evitar el spam de notificaciones, se puede modificar la cola de notificaciones, reemplazando una o varias notificaciones pendientes, por una nueva notificación.

+ +

Para hacer esto, se puede añadir una etiqueta a cualquier nueva notificación. Si ya hay una notificación con la misma etiqueta y aún no se ha mostrado, la nueva reemplazará a la anterior. Si la notificación con la misma etiqueta ya ha sido mostrada, se cerrará la anterior y se mostrará la nueva.

+ +

Ejemplo de etiquta

+ +

Teniendo el siguiente código HTML:

+ +
<button>Notifícame!</button>
+ +

Es posible controlar múltiples notificaciones de la siguiente forma:

+ +
window.addEventListener('load', function () {
+  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
+  // Si no lo tenemos, lo pedimos
+  if (window.Notification && Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si el usuario ha dado permiso
+    // le intentamos enviar 10 notificaciones
+    if (window.Notification && Notification.permission === "granted") {
+      var i = 0;
+      // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+      var interval = window.setInterval(function () {
+        // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9"
+        var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // Si el usuario no ha dicho si quiere notificaciones
+    // Nota: en Chrome no estamos seguros de si la propiedad permission
+    // esta asignada, por lo que es inseguro comprobar el valor "default".
+    else if (window.Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // Si el usuario acepta
+        if (status === "granted") {
+          var i = 0;
+          // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+          var interval = window.setInterval(function () {
+          // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9" var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // Otherwise, we can fallback to a regular modal alert
+        else {
+          alert("Hi!");
+        }
+      });
+    }
+
+    // If the user refuses to get notified
+    else {
+      // We can fallback to a regular modal alert
+      alert("Hi!");
+    }
+  });
+});
+ +

Comprueba el ejemplo en directo abajo:

+ +

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

+ +

Receiving notification of clicks on app notifications

+ +

When a user clicks on a notification generated by an app, you will be notified of this event in two different ways, depending on the circumstance:

+ +
    +
  1. A click event if your app has not closed or been put in the background between the time you create the notification and the time the user clicks on it.
    2. +
  2. A system message otherwise.
    3. +
+ +

See this code snippet for an example of how to deal with this.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad de navegadores

+ +

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/parentnode/append/index.html b/files/es/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..3899492a80 --- /dev/null +++ b/files/es/web/api/parentnode/append/index.html @@ -0,0 +1,134 @@ +--- +title: ParentNode.append() +slug: Web/API/ParentNode/append +translation_of: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}}
+ +

El método ParentNode.append() inserta un conjunto de objetos de tipo {{domxref("Node")}} u objetos de tipo {{domxref("DOMString")}} después del último hijo de ParentNode. Los objetos {{domxref("DOMString")}} son insertados como nodos {{domxref("Text")}} equivalentes.

+ +

Diferencias con {{domxref("Node.appendChild()")}}:

+ + + +

Sintaxis

+ +
[Throws, Unscopable]
+void ParentNode.append((Node or DOMString)... nodes);
+
+ +

Parameters

+ +
+
nodes
+
Un conjunto de {{domxref("Node")}} u objetos {{domxref("DOMString")}} a agegar.
+
+ +

Exceptions

+ + + +

Examples

+ +

Appending an element

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

Appending text

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"
+ +

Appending an element and text

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

ParentNode.append() is unscopable

+ +

The append() method is not scoped into the with statement. See {{jsxref("Symbol.unscopables")}} for more information.

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Polyfill

+ +

You can polyfill the append() method in Internet Explorer 9 and higher with the following code:

+ +
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
+(function (arr) {
+  arr.forEach(function (item) {
+    if (item.hasOwnProperty('append')) {
+      return;
+    }
+    Object.defineProperty(item, 'append', {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: function append() {
+        var argArr = Array.prototype.slice.call(arguments),
+          docFrag = document.createDocumentFragment();
+
+        argArr.forEach(function (argItem) {
+          var isNode = argItem instanceof Node;
+          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
+        });
+
+        this.appendChild(docFrag);
+      }
+    });
+  });
+})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

See also

+ + diff --git a/files/es/web/api/parentnode/childelementcount/index.html b/files/es/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..3e8c834262 --- /dev/null +++ b/files/es/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,126 @@ +--- +title: ParentNode.childElementCount +slug: Web/API/ParentNode/childElementCount +tags: + - API + - ChildNode + - DOM + - ParentNode + - childElement + - children +translation_of: Web/API/ParentNode/childElementCount +--- +
+

{{ APIRef("DOM") }}

+
+ +

La propiedad de sólo lectura ParentNode.childElementCount devuelve un número del tipo unsigned long que representa la cantidad de elementos hijo que penden del elemento padre (ParentNode).

+ +
+

Esta propiedad fue inicialmente definida en la interfaz pura {{domxref("ElementTraversal")}}. Como esta interfaz contenía dos conjuntos distintos de propiedades: una apuntaba al {{domxref("Node")}} con hijos y otra a los hijos, fueron trasladados a dos interfaces puras separadas: {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, childElementCount se mudó a {{domxref("ParentNode")}}. Este es un cambio bastante técnico que no debería afectar a la compatibilidad.

+
+ +

Sintaxis

+ +
var elCount = elementNodeReference.childElementCount;
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspacificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}Dividida la interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método está ahora definido en la segunda.
+ Se implementaron las nuevas interfaces en {{domxref("Document")}} y {{domxref("DocumentFragment")}}.
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}Añadida su definición inicial a la interfaz pura ElementTraversal y se emplea en {{domxref("Element")}}.
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (para {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Soporta {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (para {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporta {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Internet Explorer 6, 7 y 8 lo soportan, pero cuenta los nodos {{domxref("Comment")}} de forma incorrecta.

+ +

Véase también

+ + diff --git a/files/es/web/api/parentnode/children/index.html b/files/es/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..8a9071830c --- /dev/null +++ b/files/es/web/api/parentnode/children/index.html @@ -0,0 +1,157 @@ +--- +title: ParentNode.children +slug: Web/API/ParentNode/children +tags: + - API + - DOM + - ParentNode + - Propiedad +translation_of: Web/API/ParentNode/children +--- +

{{ APIRef("DOM") }}

+ +

Node.children es una propiedad de sólo lectura que retorna una {{domxref("HTMLCollection")}} "viva" de los elementos hijos de un Node.

+ +

Sintaxis

+ +
var children = node.children;
+ +

children es una {{ domxref("HTMLCollection") }}, que es una colección ordenada de los elementos DOM que son hijos de node. Si no hay elementos hijos, entonces children no contendrá elementos y su longitud ( length )  será 0.

+ +

Ejemplo

+ +
var foo = document.getElementById('foo');
+for (var i = 0; i < foo.children.length; i++) {
+    console.log(foo.children[i].tagName);
+}
+
+ +

Polyfill

+ +
// Sobrescribe el prototipo 'children' nativo.
+// Añade soporte para Document y DocumentFragment en IE9 y Safari.
+// Devuelve un array en lugar de HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.children == null) {
+        Object.defineProperty(constructor.prototype, 'children', {
+            get: function() {
+                var i = 0, node, nodes = this.childNodes, children = [];
+                while (node = nodes[i++]) {
+                    if (node.nodeType === 1) {
+                        children.push(node);
+                    }
+                }
+                return children;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Definición Inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]38.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}{{CompatNo}}16.0{{CompatNo}}
Soporte en {{domxref("SVGElement")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte básico {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

[1] Internet Explorer 6, 7 y 8 lo soportan, pero incluyen nodos {{domxref("Comment")}} de manera errónea.

+ +

Ver también

+ + diff --git a/files/es/web/api/parentnode/firstelementchild/index.html b/files/es/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..a9993d8ccf --- /dev/null +++ b/files/es/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,143 @@ +--- +title: ParentNode.firstElementChild +slug: Web/API/ParentNode/firstElementChild +translation_of: Web/API/ParentNode/firstElementChild +--- +

{{ APIRef("DOM") }}

+ +

La propiedad de sólo lectura ParentNode.firstElementChild retorna el primer hijo del objeto {{domxref("Element")}}, o bien null si no existen elementos hijos.

+ +
+

Esta propiedada fue definida inicialmente en el interfaz puro {{domxref("ElementTraversal")}}. Como este interfaz contenía dos juegos distintos de propiedades, uno orientado a {{domxref("Node")}} que tenía hijos, y otro a aquellos que eran hijos, se trasladaron a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, firstElementChild fue movido a {{domxref("ParentNode")}}. Es un cambio de carácter estrictamente técnico que no debería afectar a la compatibilidad.

+
+ +

Sintaxis

+ +
var childNode = elementNodeReference.firstElementChild;
+
+ +

Ejemplo

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+</script>
+ +

En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.

+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a  IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("firstElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "firstElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Dividido el interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método queda definido ahora en el segundo.
+ Los {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal y lo usa en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/parentnode/index.html b/files/es/web/api/parentnode/index.html new file mode 100644 index 0000000000..53af6c3203 --- /dev/null +++ b/files/es/web/api/parentnode/index.html @@ -0,0 +1,151 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API DOM Tab + - NeedsTranslation + - TopicStub +translation_of: Web/API/ParentNode +--- +

{{ APIRef("DOM") }}

+ +

The ParentNode interface contains methods that are particular to {{domxref("Node")}} objects that can have children.

+ +

ParentNode is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.

+ +

 

+ +

Properties

+ +
+
{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}
+
Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this ParentNode.
+
{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} that is the first child of this ParentNode, or null if there is none.
+
{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
+
Returns the {{domxref("Element")}} that is the last child of this ParentNode, or null if there is none.
+
{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
+
Returns an unsigned long giving the amount of children that the object has.
+
+ +

Methods

+ +

There is no inherited or specific and implemented methods.

+ +

Specification

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. The firstElementChild, lastElementChild, and childElementCount properties are now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
+ Added the children property.
+ Added the append() and prepend() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}{{Spec2('Element Traversal')}}Added the initial definition of its properties to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
append() and prepend() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.

+ +

See also

+ + diff --git a/files/es/web/api/parentnode/lastelementchild/index.html b/files/es/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..c644b90db8 --- /dev/null +++ b/files/es/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,146 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +translation_of: Web/API/ParentNode/lastElementChild +--- +

{{ APIRef("DOM") }}

+ +

La propiedad de sólo lectura ParentNode.lastElementChild retorna el último hijo del objeto {{domxref("Element")}} o bien null si no hay elementos hijos.

+ +
+

Esta propiedad fue inicialmente definida en el interfaz puro {{domxref("ElementTraversal")}}. Dado que este interfaz contenía dos juegos distintos de propiedades, uno dirigido al nodo {{domxref("Node")}} que tiene hijos, y otro a aquellos que son hijos, se han trasladado a dos interfaces puros separados, {{domxref("ParentNode")}} y {{domxref("ChildNode")}}. En este caso, lastElementChild fue movido a {{domxref("ParentNode")}}. Este es un cambio de carácter técnico que no debería afectar a la compatibilidad.

+
+ +

Sintaxis

+ +
var childNode = elementNodeReference.lastElementChild;
+ +

Ejemplo

+ +
<p id="para-01">
+  <span>First span</span>
+  <b>bold</b>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.lastElementChild.nodeName)
+</script>
+
+ +

En este ejemplo, la alerta muestra "B", que es el nombre de etiqueta del último nodo hijo del elemento párrafo ("P").

+ +

Polyfill para Internet Explorer 8

+ +

Esta propiedad no está soportada con anterioridad a IE9, así que el siguiente códigopuede ser usado para añadir el soporte a IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("lastElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "lastElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = nodes.length - 1; i >= 0; --i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}{{Spec2('DOM WHATWG')}}Dividido el interfaz ElementTraversal en {{domxref("ChildNode")}} y ParentNode. Este método queda ahora definido en el segundo.
+ {{domxref("Document")}} y {{domxref("DocumentFragment")}} implementaron los nuevos interfaces.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Añadida su definición inicial al interfaz puro ElementTraversal  y lo usa en {{domxref("Element")}}.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (en {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (en {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte en {{domxref("Document")}} y {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/payment_request_api/index.html b/files/es/web/api/payment_request_api/index.html new file mode 100644 index 0000000000..376a9899c2 --- /dev/null +++ b/files/es/web/api/payment_request_api/index.html @@ -0,0 +1,136 @@ +--- +title: API de Solicitud de Pago +slug: Web/API/Payment_Request_API +tags: + - API + - API de Solicitud de Pago + - Comercio + - Contexto seguro + - Intermediário + - Pago + - Referencia + - Solicitud de Pago + - Tarjeta de Crédito +translation_of: Web/API/Payment_Request_API +--- +
{{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}}
+ +

El API de solicitud de pago provee una experiencia consistente tanto para comerciantes, como para usuarios. No es una nueva forma de pagar; más bien, es una manera para que los usuarios puedan seleccionar su forma de pago preferida para pagar por cosas, y que esa información esté disponible para el comerciante.

+ +

Solicitud de pago conceptos y uso

+ +

Muchos problemas relacionados con el abandono de carros de compras en línea pueden deberse a los formularios de pago, los cuales pueden ser complicados y consumir demasiado tiempo para llenarse y a veces requieren muchos pasos para completarse. El API de Petición de Pago intenta reducir el número de pasos necesarios para completar un pago en línea, potencialmente haciendo a un lado los formularios de pago. Hace el proceso de pago mucho más fácil recordando los datos del usuario, los cuales son entregados al comerciante ojalá sin requerid un formulario HTML.

+ +

Ventajas de usar la API de Solicitud de Pago con "basic-card" (pagos basados en cartas):

+ + + +

Para solicitar un pago, a página web crea un objeto {{domxref("PaymentRequest")}} en respuesta a una acción del usuario que inicia el pago, como hacer click en un botón "Comprar". El PaymentRequest permite a la página web intercambiar información agente de usuario (user agent) mientras que el usuario provee los datos para completar la transacción.

+ +

Puedes encontrar una guía completa en Usando la API de Solicitud de Pago.

+ +
+

Nota: La API solo está disponibledentro de elementos {{htmlelement("iframe")}} cross-origin si tienen el atributo {{htmlattrxref("allowpaymentrequest","iframe")}}.

+
+ +

Interfaces

+ +
+
{{domxref('PaymentAddress')}}
+
Un objeto que contiene la dirección; usada para facturación y despacho, por ejemplo.
+
{{domxref('PaymentRequest')}}
+
Un objeto que provee la API para crear y administrar la interfaz de pago del {{Glossary("user agent", "user agent's")}}.
+
{{domxref('PaymentRequestEvent')}}
+
Un evento entregado a un manejador de pagos cuando un {{domxref("PaymentRequest")}} es realizado.
+
{{domxref('PaymentRequestUpdateEvent')}}
+
Permite que la página web actualice los detalles de la solicitud de pago en respuesta a una acción del usuario.
+
{{domxref('PaymentMethodChangeEvent')}}
+
Representa al usuario cambiando el instrumento de pago (por ejemplo, cambiando de una tarjeta de crédito a una tarjeta de débito).
+
{{domxref('PaymentResponse')}}
+
Objeto devuelto después de que el usuario selecciona un método de pago y aprueba una solicitud de pago.
+
{{domxref('MerchantValidationEvent')}}
+
Representa el navegador que requiere que el comerciante (sitio web) se valide a sí mismo como autorizado para usar un manejador de pagos en particular (por ejemplo, registrado como autorizado para usar Apple Pay).
+
+ +
+
+ +

Diccionarios

+ +
+
{{domxref("AddressErrors")}}
+
Un diccionario que contiene cadenas que proporcionan explicaciones descriptivas de cualquier error en cualquier entrada de {{domxref ("PaymentAddress")}} que tenga errores.
+
{{domxref("PayerErrors")}}
+
Un diccionario que contiene cadenas que proporcionan explicaciones descriptivas de cualquier error relacionado con los atributos de correo electrónico, teléfono y nombre de {{domxref ("PaymentResponse")}}.
+
{{domxref("PaymentDetailsUpdate")}}
+
Un objeto que describe los cambios que deben realizarse en los detalles del pago en caso de que el servidor necesite actualizar la información después de la instanciación de la interfaz de pago, pero antes de que el usuario comience a interactuar con ella.
+
+ +

Diccionarios relacionados para la especificación Basic Card

+ +
+
{{domxref("BasicCardChangeDetails")}}
+
Un objeto que proporciona información de dirección redactada que se proporciona como {{domxref ("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} en el evento {{event ("paymentmethodchange")}} enviado al {{domxref ("PaymentRequest" )}} cuando el usuario cambia la información de pago.
+
{{domxref("BasicCardErrors")}}
+
Un objeto que proporciona mensajes de error asociados con los campos del objeto {{domxref ("BasicCardResponse")}} que no son válidos. Esto se usa como el valor de la propiedad {{domxref ("PaymentValidationErrors.paymentMethod", "paymentMethod")}} en el objeto {{domxref ("PaymentValidationErrors")}} enviado al {{domxref ("PaymentRequest")}} cuando ocurre un error.
+
{{domxref('BasicCardRequest')}}
+
Define una estructura de objeto para contener detalles de la solicitud de pago, como el tipo de tarjeta.
+
{{domxref('BasicCardResponse')}}
+
Define una estructura de objeto para los detalles de la respuesta de pago, como el número o la fecha de vencimiento de la tarjeta utilizada para realizar el pago y la dirección de facturación.
+
+ +

Specificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificaciónEstatusComentario
{{SpecName('Payment')}}{{Spec2('Payment')}}Definición inicial.
{{SpecName('Basic Card Payment')}}{{Spec2('Basic Card Payment')}}Define {{domxref ("BasicCardRequest")}} y {{domxref ("BasicCardResponse")}}, entre otras cosas necesarias para manejar el pago con tarjeta de crédito
{{SpecName('Payment Method Identifiers')}}{{Spec2('Payment Method Identifiers')}}Define los identificadores de los métodos de pago y cómo se validan y, en su caso, se acuñan y se registran formalmente en el W3C.
+ +

Compatibilidad del navegador

+ +
+

Interfaz PaymentRequest

+ +
+ + +

{{Compat("api.PaymentRequest", 0)}}

+
+
+ +

Ver también

+ + diff --git a/files/es/web/api/performance/clearmarks/index.html b/files/es/web/api/performance/clearmarks/index.html new file mode 100644 index 0000000000..dca7aa8ac1 --- /dev/null +++ b/files/es/web/api/performance/clearmarks/index.html @@ -0,0 +1,95 @@ +--- +title: performance.clearMarks() +slug: Web/API/Performance/clearMarks +tags: + - API + - Referencia + - Rendimiento Web + - metodo +translation_of: Web/API/Performance/clearMarks +--- +
{{APIRef("User Timing API")}}
+ +

El método clearMarks() elimina la marca llamada del búfer de rendimiento de entrada del navegador. Si el método es llamado sin argumentos, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "mark" serán eliminados del búfer de rendimiento de entrada.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
performance.clearMarks();
+performance.clearMarks(name);
+
+ +

Argumentos

+ +
+
nombre {{optional_inline}}
+
Un {{domxref("DOMString")}} representando el nombre de la marca de tiempo. Si este argumento es omitido, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "mark" serán eliminados.
+
+ +

Valor de retorno

+ +
+
vacío
+
+
+ +

Ejemplo

+ +

El siguiente ejemplo muestra ambos usos del método clearMarks().

+ +
// Create a small helper to show how many PerformanceMark entries there are.
+function logMarkCount() {
+  console.log(
+    "Found this many entries: " + performance.getEntriesByType("mark").length
+  );
+}
+
+// Create a bunch of marks.
+performance.mark("squirrel");
+performance.mark("squirrel");
+performance.mark("monkey");
+performance.mark("monkey");
+performance.mark("dog");
+performance.mark("dog");
+
+logMarkCount() // "Found this many entries: 6"
+
+// Delete just the "squirrel" PerformanceMark entries.
+performance.clearMarks('squirrel');
+logMarkCount() // "Found this many entries: 4"
+
+// Delete all of the PerformanceMark entries.
+performance.clearMarks();
+logMarkCount() // "Found this many entries: 0"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('User Timing Level 2', '#dom-performance-clearmarks', 'clearMarks()')}}{{Spec2('User Timing Level 2')}}Se clarifica clearMarks().
{{SpecName('User Timing', '#dom-performance-clearmarks', 'clearMarks()')}}{{Spec2('User Timing')}}Definición básica.
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.clearMarks")}}

+
diff --git a/files/es/web/api/performance/clearmeasures/index.html b/files/es/web/api/performance/clearmeasures/index.html new file mode 100644 index 0000000000..63fa0dd936 --- /dev/null +++ b/files/es/web/api/performance/clearmeasures/index.html @@ -0,0 +1,96 @@ +--- +title: performance.clearMeasures() +slug: Web/API/Performance/clearMeasures +tags: + - API + - Referencia + - Rendimiento Web + - metodo +translation_of: Web/API/Performance/clearMeasures +--- +
{{APIRef("User Timing API")}}
+ +

El método clearMeasures() elimina la medida llamada del búfer de rendimiento de entrada, si el método es llamado sin argumentos, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "measure" serán eliminados del búfer de rendimiento de entrada.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
performance.clearMeasures();
+performance.clearMeasures(name);
+
+ +

Argumentos

+ +
+
nombre {{optional_inline}}
+
Un {{domxref("DOMString")}} representando el nombre de la marca de tiempo. Si el argumento se omite, todos los {{domxref("PerformanceEntry","performance entries")}} con un {{domxref("PerformanceEntry.entryType","entry type")}} de "measure" serán eliminados.
+
+ +

Valor de retorno

+ +
+
vacío
+
+
+ +

Ejemplo

+ +

En el siguiente ejemplo se muestran los dos usos del método clearMeasures() .

+ +
// Create a small helper to show how many PerformanceMeasure entries there are.
+function logMeasureCount() {
+  console.log(
+    "Found this many entries: " + performance.getEntriesByType("measure").length
+  );
+}
+
+// Create a bunch of measures.
+performance.measure("from navigation");
+performance.mark("a");
+performance.measure("from mark a", "a");
+performance.measure("from navigation");
+performance.measure("from mark a", "a");
+performance.mark("b");
+performance.measure("between a and b", "a", "b");
+
+logMeasureCount() // "Found this many entries: 5"
+
+// Delete just the "from navigation" PerformanceMeasure entries.
+performance.clearMeasures("from navigation");
+logMeasureCount() // "Found this many entries: 3"
+
+// Delete all of the PerformanceMeasure entries.
+performance.clearMeasures();
+logMeasureCount() // "Found this many entries: 0"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('User Timing Level 2', '#dom-performance-clearmeasures', 'clearMeasures()')}}{{Spec2('User Timing Level 2')}}Se clarifica clearMeasures().
{{SpecName('User Timing', '#dom-performance-clearmeasures', 'clearMeasures()')}}{{Spec2('User Timing')}}Definición básica.
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.clearMeasures")}}

+
diff --git a/files/es/web/api/performance/index.html b/files/es/web/api/performance/index.html new file mode 100644 index 0000000000..00d3cbfe16 --- /dev/null +++ b/files/es/web/api/performance/index.html @@ -0,0 +1,142 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interfaz + - Referencia + - Rendimiento + - Rendimiento Web + - Tiempo de navegación +translation_of: Web/API/Performance +--- +
{{APIRef("High Resolution Time")}}
+ +

La interfaz Performance representa información relacionada con el tiempo de rendimiento para la página dada.

+ +

Un objeto de este tipo puede ser obtenido por el llamado de el atributo de solo lectura {{domxref("Window.performance")}}.

+ +
+

Nota:  Esta interfaz y sus miembros están disponibles en Web Workers, exceptuando en los mencionados abajo. También, tenga en cuenta que las marcas y medidas de rendimiento son por contexto. Si crea una marca en el hilo principal (u otro worker), no puedes verlo en un hilo de un worker, y vice versa.

+
+ +

Propiedades

+ +

La interfaz Performance no hereda ninguna propiedad.

+ +
+
{{domxref("Performance.navigation")}} {{readonlyInline}} {{deprecated_inline}}
+
Un objeto del legado {{domxref("PerformanceNavigation")}} que provee contexto útil acerca de operaciones, incluidas en los tiempos listados en timing, incluyendo si la página fue cargada o refrescada, cuántas redirecciones ocurrieron, entre otros. No disponible en workers
+
{{domxref("Performance.timing")}} {{readonlyInline}} {{deprecated_inline}}
+
Un objeto del legado {domxref("PerformanceTiming")}} que contiene información relacionada con la latencia.
+
{{domxref("Performance.memory")}} {{readonlyInline}} {{Non-standard_inline}}
+
Una no standarizada extensión añadida a Chrome, esta propiedad provee un objeto con información básica de uso de memoria. No deberías usar esta no estandarizada API.
+
{{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Non-standard_inline}}
+
Retorna una marca de tiempo de alta precisión de la hora de inicio de la medida de rendimiento.
+
+ +

Métodos

+ +

La interfaz Performance no hereda ningún método.

+ +
+
{{domxref("Performance.clearMarks()")}}
+
Elimina la marca dada del búfer de entrada de rendimiento del navegador.
+
{{domxref("Performance.clearMeasures()")}}
+
Elimina las medida dadas del búfer de entrada del navegador.
+
{{domxref("Performance.clearResourceTimings()")}}
+
Elimina todas las {domxref("PerformanceEntry","performance entries")}} con una {{domxref("PerformanceEntry.entryType","entryType")}} de "resource" del búfer de datos de rendimiento del navegador.
+
{{domxref("Performance.getEntries()")}}
+
Devuelve una lista de objetos {{domxref("PerformanceEntry")}} basados en el filtro dado.
+
{{domxref("Performance.getEntriesByName()")}}
+
Devuelve una lista de objetos {{domxref("PerformanceEntry")}} basados en el nombre dado y el tipo de entrada.
+
{{domxref("Performance.getEntriesByType()")}}
+
Devuelve una lista de objetos {{domxref("PerformanceEntry")}} de el tipo de entrada dado.
+
{{domxref("Performance.mark()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} en el  búfer de entrada de rendimiento del navegador.
+
{{domxref("Performance.measure()")}}
+
Crea un {{domxref("DOMHighResTimeStamp","timestamp")}} nombrado en el  búfer de entrada de rendimiento del navegador entre dos especificadas marcas (conocidas como la marca de inicio y la marca final, respectivamente).
+
{{domxref("Performance.now()")}}
+
Retorna un {{domxref("DOMHighResTimeStamp")}} representando el número de milisegundos transcurridos desde un instante de referencia.
+
{{domxref("Performance.setResourceTimingBufferSize()")}}
+
Define el tamaño del búfer de temporización de recursos de "resource"  a los objetos {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}}.
+
{{domxref("Performance.toJSON()")}}
+
Es un jsonizador que retorna un objeto json que respresenta el objecto Performance.
+
+ +

Eventos

+ +

Escucha a estos eventos que están usando addEventListener() o por asignación de un escuchador de eventos a la propiedad oneventname de esta interfaz.

+ +
+
{{DOMxRef("Performance.resourcetimingbufferfull_event", "resourcetimingbufferfull")}}
+
Disparado cuando "resource timing buffer" está lleno.
+ También disponible usando la propiedad {{DOMxRef("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}. 
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}{{Spec2('Highres Time Level 2')}}Se define el método toJson().
{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}{{Spec2('Highres Time')}}Se define el método now().
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}{{Spec2('Navigation Timing')}}Se definen las propiedades timing and navigation.
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Cambia la interfaz getEntries().
{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Se definen los métodos getEntries(), getEntriesByType() y getEntriesByName() .
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Se definen los métdos clearResourceTimings() y setResourceTimingBufferSize() y la propiedad onresourcetimingbufferfull .
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Se clarifican los métodos mark(), clearMark(), measure() y clearMeasure().
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Se definen los métodos mark(), clearMark(), measure() y clearMeasure().
{{SpecName('Frame Timing', '#extensions-performance-interface','Performance extensions')}}{{Spec2('User Timing')}}Se definen los métodos clearFrameTimings(), setFrameTimingBufferSize(), y onframetimingbufferfull.
+ +

Compatibilidad de navegadores

+ +
+
+ + +

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

+
+
diff --git a/files/es/web/api/performance/memory/index.html b/files/es/web/api/performance/memory/index.html new file mode 100644 index 0000000000..91c3dd3e0b --- /dev/null +++ b/files/es/web/api/performance/memory/index.html @@ -0,0 +1,42 @@ +--- +title: Performance.memory +slug: Web/API/Performance/memory +translation_of: Web/API/Performance/memory +--- +

{{APIRef}}

+ +

Sintaxis

+ +
timingInfo = performance.memory
+ +

Atributos

+ +
+
jsHeapSizeLimit
+
El tamaño máximo del heap en bytes que está disponible para el contexto.
+
totalJSHeapSize
+
El total del heap asignado, en bytes. The total allocated heap size, in bytes.
+
+ +
+
usedJSHeapSize
+
El actualmente activo segmento de heap de JS, en bytes.
+
+ +

Especificaciones

+ +

Ninguna.

+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.memory")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/performance/navigation/index.html b/files/es/web/api/performance/navigation/index.html new file mode 100644 index 0000000000..62bef8feb5 --- /dev/null +++ b/files/es/web/api/performance/navigation/index.html @@ -0,0 +1,58 @@ +--- +title: Performance.navigation +slug: Web/API/Performance/navigation +tags: + - API + - Deprecado + - HTTP + - Legado + - Propiedad + - Rendimiento + - Solo lectura + - Tiempo de navegación +translation_of: Web/API/Performance/navigation +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Esta propiedad está deprecada en Navigation Timing Level 2 specification.

+
+ +

La propiedad de solo lectura Performance.navigation del legado devuelve un objeto {{domxref("PerformanceNavigation")}} representado el tipo de navegación que ocurre en el contexto de navegación dado, tales como el número de redirecciones necesarias para traer el recurso.

+ +

Esta propiedad no está disponible en workers.

+ +

Sintaxis

+ +
navObject = performance.navigation;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}{{Spec2('Navigation Timing')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.navigation")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/performance/now/index.html b/files/es/web/api/performance/now/index.html new file mode 100644 index 0000000000..64f73a4916 --- /dev/null +++ b/files/es/web/api/performance/now/index.html @@ -0,0 +1,166 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Referencia + - Rendimiento + - Web Performance API + - metodo +translation_of: Web/API/Performance/now +--- +
{{APIRef("High Resolution Timing")}}
+ +

El método performance.now() devuelve un {{domxref("DOMHighResTimeStamp")}}, medido en milisegundos, con una precisión de cinco milésimas de segundo (5 microsegundos).

+ +

El valor devuelto representa el tiempo transcurrido desde el tiempo de origen (la propiedad {{domxref("PerformanceTiming.navigationStart")}}). En un web worker, el tiempo de origen es el momento en que se crea su contexto de ejecución (ej. hilo o proceso). En una ventana, es el momento en que el usuario navegó (o confirmó la navegación, si la confirmación fue necesaria) al documento actual. Tenga en cuenta los siguientes puntos:

+ + + +

Sintaxis

+ +
t = performance.now();
+ +

Ejemplo

+ +
var t0 = performance.now();
+hacerAlgo();
+var t1 = performance.now();
+console.log("La llamada a hacerAlgo tardó " + (t1 - t0) + " milisegundos.");
+
+ +

A diferencia de otros datos de tiempo disponibles en JavaScript (por ejemplo Date.now), las marcas de tiempo devueltas por Performance.now() no se limitan a resoluciones de un milisegundo. En su lugar, representan tiempos como números en punto flotante con hasta una precisión de microsegundos.

+ +

También a diferencia de Date.now(), los valores devueltos por Performance.now() siempre se incrementan a un ritmo constante, independientemente del sistema de reloj (que podría estar ajustado manualmente o manipulado por software como NTP). De todos modos, performance.timing.navigationStart + performance.now() será aproximadamente igual a Date.now().

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Definiciones más estrictas de interfaces y tipos.
{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("20.0")}} {{property_prefix("webkit")}}
+ {{CompatChrome("24.0")}} [1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}10.0{{CompatOpera("15.0")}}{{CompatSafari("8.0")}}
en Web workers{{CompatChrome("33")}}{{CompatUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
now() en un worker dedicado está ahora separado del contexto principal de now().{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("45.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome para Android
Soporte básico{{CompatAndroid("4.0")}}{{CompatChrome("25.0")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("15.0")}}10.0{{CompatNo}}9{{CompatChrome("25.0")}}
en Web workers{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
now() en un worker dedicado está ahora separado del contexto principal de now().{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("45.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Las versiones de Windows desde Chrome 20 al 33 devuelven performance.now() sólo con precisión de milisegundos.

+ +

Vea también

+ + diff --git a/files/es/web/api/performance/timeorigin/index.html b/files/es/web/api/performance/timeorigin/index.html new file mode 100644 index 0000000000..c8f6255687 --- /dev/null +++ b/files/es/web/api/performance/timeorigin/index.html @@ -0,0 +1,48 @@ +--- +title: Performance.timeOrigin +slug: Web/API/Performance/timeOrigin +tags: + - API + - Experimental + - Propiedad + - Referencia + - Rendimiento + - timeOrigin +translation_of: Web/API/Performance/timeOrigin +--- +

{{SeeCompatTable}}{{APIRef("High Resolution Time")}}

+ +

La propiedad de solo lectura timeOrigin de la inferfaz {{domxref("Performance")}} devuelve una marca de tiempo de alta precisión del inicio de medida de rendimiento.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
var timeOrigin = performance.timeOrigin
+ +

Valor

+ +

Una marca de tiempo de alta precisión.

+ +

Especificaciones

+ + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('Highres Time Level 2','#dom-performance-timeorigin','timeOrigin')}}{{Spec2('Highres Time Level 2')}}
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.timeOrigin")}}

+
diff --git a/files/es/web/api/performance/timing/index.html b/files/es/web/api/performance/timing/index.html new file mode 100644 index 0000000000..ef5e07387b --- /dev/null +++ b/files/es/web/api/performance/timing/index.html @@ -0,0 +1,57 @@ +--- +title: Performance.timing +slug: Web/API/Performance/timing +tags: + - API + - Deprecada + - Legado + - Propiedad + - Rendimiento + - Solo lectura + - Tiempo de navegación +translation_of: Web/API/Performance/timing +--- +

{{APIRef("Navigation Timing")}}{{deprecated_header}}

+ +
+

Esta propiedad está deprecada en Navigation Timing Level 2 specification. Por favor usa {{domxref("Performance.timeOrigin")}} en vez esta..

+
+ +

La propiedad de solo lecutra Performance.timing de legado devulve un objeto {{domxref("PerformanceTiming")}} que contienen información relacionada con el rendimiento en relación a la latencia.

+ +

Esta propiedad no está disponible en workers.

+ +

Sintaxis

+ +
var timingInfo = performance.timing;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.timing')}}{{Spec2('Navigation Timing')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("api.Performance.timing")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/api/performancenavigation/index.html b/files/es/web/api/performancenavigation/index.html new file mode 100644 index 0000000000..60ed7f1ce4 --- /dev/null +++ b/files/es/web/api/performancenavigation/index.html @@ -0,0 +1,87 @@ +--- +title: PerformanceNavigation +slug: Web/API/PerformanceNavigation +tags: + - API + - API de tiempo de navegación + - Compatibilidad + - Deprecada + - Interfaz + - Legado + - Referencia + - Rendimiento + - TIempo + - Tiempo de navegación +translation_of: Web/API/PerformanceNavigation +--- +

{{APIRef("Navigation Timing")}}

+ +
+

Esta interfaz está deprecada en Navigation Timing Level 2 specification. Por favor usa la interfaz {{domxref("PerformanceNavigationTiming")}} en lugar de esta.

+
+ +

La interfaz de legado PerformanceNavigation representa información acerca de cómo la navegación en el documento actual fue hecha.

+ +

Un objeto de este tipo puede ser optenido con el llamado del atributo de solo lectura {{domxref("Performance.navigation")}}.

+ +

Propiedades

+ +

La interfaz PerformanceNavigation no hereda ninguna propiedad.

+ +
+
{{deprecated_inline}} {{domxref("PerformanceNavigation.type")}} {{readonlyInline}}
+
Un unsigned short el cual indica cómo la navegación en esta página fue hecha. Los valores posibles son:
+
+
+
TYPE_NAVIGATE (0)
+
La página fue accesada por un link, un marcador, un formulario enviado, o un script, o escribiendo la URL en la barra de direcciones.
+
TYPE_RELOAD (1)
+
La página fue accesada haciendo click al botón de Recargar o con el método {{domxref("Location.reload()")}}.
+
TYPE_BACK_FORWARD (2)
+
La página fue accesada por la navegación en el historial.
+
TYPE_RESERVED (255)
+
Cualquier otra forma.
+
+
+
{{deprecated_inline}} {{domxref("PerformanceNavigation.redirectCount")}} {{readonlyInline}}
+
Un unsigned short que representa el número de REDIRECTs hechos antes de llegar a la página.
+
+ +

Métodos

+ +

La interfaz Performance no hereda ningún método.

+ +
+
{{deprecated_inline}} {{domxref("PerformanceNavigation.toJSON()")}}
+
Es un jsonizer que retorna un objeto json que representa el objecto PerformanceNavigation.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Navigation Timing', '#sec-navigation-info-interface', 'PerformanceNavigation')}}{{Spec2('Navigation Timing')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/positionoptions/index.html b/files/es/web/api/positionoptions/index.html new file mode 100644 index 0000000000..349aba4631 --- /dev/null +++ b/files/es/web/api/positionoptions/index.html @@ -0,0 +1,109 @@ +--- +title: PositionOptions +slug: Web/API/PositionOptions +tags: + - Geolocalización + - Interfaz + - Referencia +translation_of: Web/API/PositionOptions +--- +

{{APIRef("Geolocation API")}}

+ +

La interfaz PositionOptions describe las opciones disponibles cuando invocamos el "backend" de geolocalización. El navegador no crea este objeto directamente: es el script que invoca quien lo crea y usa como un parámetro de {{domxref("Geolocation.getCurrentPosition()")}} y {{domxref("Geolocation.watchPosition()")}}.

+ +

Propiedades

+ +

La interfaz PositionOptions no hereda ninguna propiedad.

+ +
+
{{domxref("PositionOptions.enableHighAccuracy")}}
+
Es un {{domxref("Boolean")}} que indica que la aplicación quiere recibir los mejores resultados posibles. Si es true y si el dispositivo es capaz de proporcionar una posición más precisa, así lo hará. Ten en cuenta que esto puede resultar en tiempos de respuesta más lentos o en un incremento del uso de energía (con un chip GPS en un teléfono móvil por ejemplo). Por otro lado, si es false (el valor por defecto), el dispositivo tiene libertad para decidir ahorrar recursos respondiendo más rápido y/o usando menos energía.
+
{{domxref("PositionOptions.timeout")}}
+
Es un valor long positivo que representa el máximo período de tiempo (en millisegundos) que se le permite tomar al dispositivo para retornar a una posición. El valor por defecto es Infinity, y significa que getCurrentPosition() no retornará hasta que esté disponible la posición.
+
{{domxref("PositionOptions.maximumAge")}}
+
Es un valor long positivo que indica la edad máxima en milisegundos de una posible posición "cacheada" que es aceptable retornar. Si es 0, significa que el dispositivo no puede usar posiciones "cacheadas" y debe intentar conseguir la posición real actual. Si es Infinity el dispositivo debe retornar una posición previamente "cacheada" independientemente de su edad.
+
+ +

Métodos

+ +

La interfaz PositionOptions no implementa ni hereda ningún método.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Geolocation', '#positionoptions', 'PositionOptions')}}{{Spec2('Geolocation')}}Especificación inicial.
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ Removed in 15.0
+ Reintroduced in 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/push_api/index.html b/files/es/web/api/push_api/index.html new file mode 100644 index 0000000000..0379ef3ee2 --- /dev/null +++ b/files/es/web/api/push_api/index.html @@ -0,0 +1,175 @@ +--- +title: Push API +slug: Web/API/Push_API +tags: + - API + - Experimental + - Notificaciones + - Push + - Referencia +translation_of: Web/API/Push_API +--- +

{{DefaultAPISidebar("Push API")}}{{SeeCompatTable}}

+ +

La API Push otorga a las aplicaciones web la habilidad de recibir mensajes enviados a ellas desde un servidor, sin importar si la aplicación está o no en primer plano o cargada. Esto permite a los desarrolladores enviar notificaciones asíncronas y actualizaciones para los usuarios que las aceptan.

+ +
+

Nota: Esta documentación cubre la especificación del API Push de W3C; si estás buscando la documentación para el mecanismo push propio de Firefox OS, ve Simple Push.

+
+ +

Push conceptos y uso

+ +

Para que una aplicación recibá mensajes push, esta debe tener un service worker. Cuando el service worker esta activo, se puede suscribir usando {{domxref("PushManager.subscribe()")}}.

+ +

El resultado de {{domxref("PushSubscription")}} incluye toda la información que la aplicación necesita para enviar un mensaje push: un endpoint y la llave de cifrado necesaria para enviar los datos.

+ +

El service worker se iniciará cuando sea necesario manejar mensajes push entrantes, que se entregan al manejador de eventos. Esto permite a las aplicaciones reaccionar a los mensajes push recibidos, por ejemplo para mostrar una notiificación usando {{domxref("ServiceWorkerRegistration.showNotification()")}}.

+ +

Cada suscripción es unica para un service worker. El endpoint para la subscripción es una unica capability URL: el conocimiento del endpoint es todo lo se necesita para enviar un mensaje a tu aplicación. La URL del endpoint  por lo tanto necesita ser mantenida secreta, u otras aplicaciones podrían ser capases de enviar mensajes push a tu aplicación.

+ +

Activar un Service-Worker para entregar un mensaje push puede resultar en el incremento de uso de recursos, especialmente de la batería. Los diferentes navegadores disponen de diferentes esquemas para manejar esto - en la actualidad no existe un mecanismo estándar para ello. Firefox permite un numero limitado (det. cuota) de mensajes push para enviar a una aplicación, aunque los mensajes push que generan una notificación estan exentos de este límite. Este límite se actualiza cada vez que se visita el sitio web. En comparación, Chrome no aplica límites, pero requiere que todo mensaje push muestre una notificación.

+ +
+

Note:  Desde Gecko 44, la cuota permitida de Push-messages por aplicación no se ve incrementada cada vez que se emite una nueva notificación, cuando otra sigue visible, durante el periodo de 3 segundos. Esto ayuda al manejo de casos en los que se reciben rafagas de notificaciones y no todas ellas emiten una notificación visible. 

+
+ +
+

Nota: en Chrome las versiones anteriores a la 52, requieren la cnfiguración de un proyecto en Google Cloud Messaging para el envío de Push-Messages, así como el uso del numero de proyecto y la API key asociadas para el envío de notificaciones push. Tambien se requiere el detalle de algunos parametros especiales en el app manifest para el uso de este servicio.

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Represena una acción push enviada al alcance global (global scope) de un {{domxref("ServiceWorker")}}. Contiene información enviada desde una aplicación a {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Provides a way to receive notifications from third-party servers as well as request URLs for push notifications. This interface has replaced functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Provee acceso a los datos push enviados por el servidor e incluye metodos para manipular los datos recibidos.
+
{{domxref("PushSubscription")}}
+
Provee el URL endpoint para una suscripción y permite la desuscripción de un servicio push.
+
+ +

Service worker: Adiciones

+ +

Las siguientes adiciones al Service Worker API han sido especificadas en la Push API, para proveer un punto de entrada al uso de Push messages. Tambien monitorizan y responden a los cambios en los eventos Push y Subscription.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Devuelve una referencia a la interfaz {{domxref("PushManager")}} para el manejo de las suscripciones incluyendo: la suscripción, obteniendo una suscripción activa y accediendo al estado de permiso de push. Este es el punto de inicio para el uso de Push messaging.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
Manipulador de eventos activado, cada vez que ocurre un evento {{Event("push")}}; Eto es, cada vez que se recibe un push-message del servidor.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
Manipulador de eventos activado, cada vez que ocurre un evento {{Event("pushsubscriptionchange")}}; Por ejemplo, cuando una suscripción ha sido invalidada o esta apunto de serlo. (P.ej. cuando un push service determina un tiempo de expiración.)
+
+ +

Ejemplos

+ +

Mozilla's ServiceWorker Cookbook contiene varios ejemplos Push muy utiles

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1]{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Currently available only on desktop versions of Firefox; also, push messages are only delivered when Firefox is running.

+ +

[2]: Microsoft Edge status: Under Consideration; Roadmap Priority: Low

+ +

See also

+ + 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 new file mode 100644 index 0000000000..0088b97dd7 --- /dev/null +++ b/files/es/web/api/push_api/using_the_push_api/index.html @@ -0,0 +1,432 @@ +--- +title: Usando la API Push +slug: Web/API/Push_API/Using_the_Push_API +translation_of: Web/API/Push_API +--- +

La W3C Push API offers some exciting new functionality for developers to use in web applications: this article provides an introduction to getting Push notifications setup and running, with a simple demo.

+ +

La habilidad de enviar mensajes o notificaciones de un servidor a un cliente en cualquier momento —si la aplicación está activa en su sitema o no—es algo que ha sido disfrutado por las plataformas nativas durante algún tiempo, y esta finalmente llega a la web! el soporte para muchos push está ahora disponible en Firefox 43+ y Chrome 42+ en escritorio, esperamos seguir pronto con las plataformas moviles. {{domxref("PushMessageData")}} actualmente solo es soportada experimentalmente en Firefox (44+), y la implementación está sujeta a cambios.

+ +
+

Note: Early versions of Firefox OS used a proprietary version of this API called Simple Push. This is being rendered obsolete by the Push API standard.

+
+ +

Demo: las bases de una simple app de servidor de chat

+ +

La demo que hemos creado proporciona los principios de una simple app de chat. Esta presenta un formulario para que ingreses un identificador de chat y un boton que al presionar se suscriba a los mensajes push.

+ +

En este punto, el nombre de los nuevos suscriptores aparecerá en la lista de suscriptores, junto con un campo de texto y un botón de envío para permitir al suscriptor enviar mensajes.

+ +

At this point, the new subscriber's name will appear in the subscriber's list, along with a text field and submit button to allow the subscriber to send messages.

+ +

+ +

Para correr la demo, siga las instrucciones de push-api-demo README. Tenga en cuenta que el componente server-side aún nesecita un poco de trabajo para que funcione en chrome y se ejecute de una manera más rezonable. Pero los aspectos de push pueden ser explicados a fondo; Nos sumergiremos en ella después de revisar las tecnologías en juego.

+ +

Visión de la tecnología

+ +

Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.

+ +

Los mensajes web push hacen parte de la familia tecnológica service workers; en particular, se requiere que un service worker esté activo en la página para recibir mensajes push. el service worker recibe el mensaje push, y acontinuación depende de usted cómo notificar a la página. Usted puede:

+ +

Web Push messages are part of the service workers technology family; in particular, a service worker is required to be active on the page for it to receive push messages. The service worker receives the push message, and then it is up to you how to then notify the page. You can:

+ + + +

A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.

+ +
+

Nota: Usted necesita algún tipo de código que se ejecute en el servidor para manejar el cifrado de punto final/datos y enviar las solicitudes de notificaciones push. En nuestra demostración hemos creado un servidor  quick-and-dirty usando NodeJS.

+
+ +

El service worker también tiene que suscribirse al servicio de mensajería psuh. Cada sesión recibe su propio punto final único cuando se suscribe al servicio de mensajería. Este punto final es obtenido desde la propiedad  ({{domxref("PushSubscription.endpoint")}}) en el objeto de suscripción. Este punto final se puede enviar a su servidor y se utiliza para enviar un mensaje al service worker asctivo en esta sesión. Cada navegador tiene su propio servidor de mensajería push para manejar el envío del mensaje push.

+ +

Encryption

+ +
+

Note: For an interactive walkthrough, try JR Conlin's Web Push Data Encryption Test Page.

+
+ +

To send data via a push message, it needs to be encrypted. This requires a public key created using the {{domxref("PushSubscription.getKey()")}} method, which relies upon some complex encryption mechanisms that are run server-side; read Message Encryption for Web Push for more details. As time goes on, libraries will appear to handle key generation and encryption/decryption of push messages; for this demo we used Marco Castelluccio's NodeJS web-push library.

+ +
+

Note: There is also another library to handle the encryption with a Node and Python version available, see encrypted-content-encoding.

+
+ +

Push workflow summary

+ +

To summarize, here is what is needed to implement push messaging. You can find more details about specific parts of the demo code in subsequent sections.

+ +
    +
  1. Request permission for web notifications, or anything else you are using that requires permissions.
    2. +
  2. Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.
    3. +
  3. Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.
    4. +
  4. Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that getKey() is currently experimental and Firefox only.)
    5. +
  5. Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use Fetch.
    6. +
  6. If you are using the Channel Messaging API to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send port2 over to the service worker by calling {{domxref("Worker.postMessage()")}} on the service worker, in order to open up the communication channel. You should also set up a listener to respond to messages sent back from the service worker.
    7. +
  7. On the server side, store the endpoint and any other required details so they are available when a push message needs to be sent to a push subscriber (we are using a simple text file, but you could use a database or whatever you like). In a production app, make sure you keep these details hidden, so malicious parties can't steal endpoints and spam subscribers with push messages.
    8. +
  8. To send a push message, you need to send an HTTP POST to the endpoint URL. The request must include a TTL header that limits how long the message should be queued if the user is not online. To include payload data in your request, you must encrypt it (which involves the client public key). In our demo, we are using the web-push module, which handles all the hard work for you.
    9. +
  9. Over in your service worker, set up a push event handler to respond to push messages being received. +
      +
    1. If you want to respond by sending a channel message back to the main context (see Step 6) you need to first get a reference to the port2 we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the onmessage handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the ports property, index 0. Once this is done, you can send a message back to port1, using {{domxref("MessagePort.postMessage()")}}.
      2. +
    2. If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.
      3. +
    +
    10. +
+ +

Construyendo la demo

+ +

Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.

+ + + +

No hay nada destacalbe sobre el HTML y el CSS para la demo; el HTML inicialmente contiene un simple formulario que permite introducir un udentificador para la sala de chat, un boton que al hacer click se suscribe a las notificaciones push, y dos listas con los suscriptores y los mensajes. Una vez suscrito, aparecerán controles adicionales para permitir al usuario actual escribir mensajes en el chat.

+ +

El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.

+ + + +

El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.

+ +

Variables y configuración inicial

+ +

Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:

+ +
var isPushEnabled = false;
+var useNotifications = false;
+
+var subBtn = document.querySelector('.subscribe');
+var sendBtn;
+var sendInput;
+
+var controlsBlock = document.querySelector('.controls');
+var subscribersList = document.querySelector('.subscribers ul');
+var messagesList = document.querySelector('.messages ul');
+
+var nameForm = document.querySelector('#form');
+var nameInput = document.querySelector('#name-input');
+nameForm.onsubmit = function(e) {
+  e.preventDefault()
+};
+nameInput.value = 'Bob';
+ +

Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.

+ +

A continuación, tomamos una referencia al suscrito/no-suscrito {{htmlelement("button")}}, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)

+ +

Las siguientes variables toman referencia a los trés elementos principales {{htmlelement("div")}} en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón envíar el mensaje de chat o el mensaje de chat aparezca en la lista de mensajes.)

+ +

Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento {{htmlelement("input")}}, damos a la entrada un valor por defecto, y usamos preventDefault() para detener el envío del formulario cuando este es enviado pulsando return.

+ +

A continuación, pedimos permiso para enviar las notificaciones web, usando {{domxref("Notification.requestPermission","requestPermission()")}}:

+ +
Notification.requestPermission();
+ +

Ahora ejecutamos una sección de código cuando se dispara el onload, para empezar el proceso de inicialización de la app cuando se carga pro primera vez. En primer lugar añadimos un detector de eventos de clik al botón  Sucribirse/unsubscribe que ejecuta nuestra funcion unsubscribe() si actualmente estamos suscritos (isPushEnabled is true), y subscribe() de la otra manera:

+ +
window.addEventListener('load', function() {
+  subBtn.addEventListener('click', function() {
+    if (isPushEnabled) {
+      unsubscribe();
+    } else {
+      subscribe();
+    }
+  });
+ +

A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando {{domxref("ServiceWorkerContainer.register()")}}, y ejecutando nuestra función initialiseState(). Si no es así, entregamos un mensaje de error a la consola.

+ +
  // Check that service workers are supported, if so, progressively
+  // enhance and add push messaging support, otherwise continue without it.
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js').then(function(reg) {
+      if(reg.installing) {
+        console.log('Service worker installing');
+      } else if(reg.waiting) {
+        console.log('Service worker installed');
+      } else if(reg.active) {
+        console.log('Service worker active');
+      }
+
+      initialiseState(reg);
+    });
+  } else {
+    console.log('Service workers aren\'t supported in this browser.');
+  }
+});
+
+ +

La siguiente cosa en el código es la función initialiseState() — para el codigo completo comentado, mira en initialiseState() source on Github (no lo estamos repitiendo aquí por brevedad.)

+ +

initialiseState() primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable  useNotifications a verdadero. A continuación comprueba si dichas notificaciones están permitidas por el usuario y si los mensajes push están soportados, y reacciona deacuerdo a cada uno.

+ +

Finalmente, se usa {{domxref("ServiceWorkerContainer.ready()")}} para esperar a que el service worker esté activo y listo para hacer las cosas. Una vez se revuelva el promise, recuperamos nuestra suscripsión para enviar los mensajes push usando la propiedad {{domxref("ServiceWorkerRegistration.pushManager")}}, que devuelve un objeto {{domxref("PushManager")}} cuando llamamos a {{domxref("PushManager.getSubscription()")}}. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (subBtn.disabled = false;), y verificamos que tenemos un objeto suscripsión para trabajar.

+ +

Si lo hacemos, entonces ya estamos suscritos. Esto es posible cuando la app no está abierta en el navegador; el service worker aun puede ser activado en segundo plano. si estamos suscritos, actualizamos la UI para mostrar que estamos suscritos por la actualizacion del label en el botón, entonces establecemos isPushEnabled to true, toma el punto final de suscripsión desde {{domxref("PushSubscription.endpoint")}}, genera una public key usando {{domxref("PushSubscription.getKey()")}}, y ejecutando nuestra función updateStatus(), que como verá más adelante se comunica con el servidor.

+ +

Como un bonus añadido, configuramos un nuevo {{domxref("MessageChannel")}} usando el constructor {{domxref("MessageChannel.MessageChannel()")}}, toma una referencia al service worker activo usando {{domxref("ServiceworkerRegistration.active")}}, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando {{domxref("Worker.postMessage()")}}. El contexto del navegador recive mensajes en {{domxref("MessageChannel.port1")}}; Cuando esto suceda, ejecutamos la función handleChannelMessage() para decidir que hacer con esos datos (mirar la sección {{anch("Handling channel messages sent from the service worker")}} ).

+ +

Subscribing and unsubscribing

+ +

Ahora regresamos la atención a las funciones subscribe() y unsubscribe() usadas para subscribe/unsubscribe al servicion de notificaciones push.

+ +

In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our updateStatus() function along with the update type (subscribe) to send the necessary details to the server.

+ +

We also make the necessary updates to the app state (set isPushEnabled to true) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)

+ +

The unsubscribe() function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.

+ +

Appropriate error handling is also provided in both functions.  

+ +

We only show the subscribe() code below, for brevity; see the full subscribe/unsubscribe code on Github.

+ +
function subscribe() {
+  // Disable the button so it can't be changed while
+  // we process the permission request
+
+  subBtn.disabled = true;
+
+  navigator.serviceWorker.ready.then(function(reg) {
+    reg.pushManager.subscribe({userVisibleOnly: true})
+      .then(function(subscription) {
+        // The subscription was successful
+        isPushEnabled = true;
+        subBtn.textContent = 'Unsubscribe from Push Messaging';
+        subBtn.disabled = false;
+
+        // Update status to subscribe current user on server, and to let
+        // other users know this user has subscribed
+        var endpoint = subscription.endpoint;
+        var key = subscription.getKey('p256dh');
+        updateStatus(endpoint,key,'subscribe');
+      })
+      .catch(function(e) {
+        if (Notification.permission === 'denied') {
+          // The user denied the notification permission which
+          // means we failed to subscribe and the user will need
+          // to manually change the notification permission to
+          // subscribe to push messages
+          console.log('Permission for Notifications was denied');
+
+        } else {
+          // A problem occurred with the subscription, this can
+          // often be down to an issue or lack of the gcm_sender_id
+          // and / or gcm_user_visible_only
+          console.log('Unable to subscribe to push.', e);
+          subBtn.disabled = false;
+          subBtn.textContent = 'Subscribe to Push Messaging';
+        }
+      });
+  });
+}
+ +

Updating the status in the app and server

+ +

The next function in our main JavaScript is updateStatus(), which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.

+ +

The function does one of three different things, depending on the value of the statusType parameter passed into it:

+ + + +

Again, we have not included the entire function listing for brevity. Examine the full updateStatus() code on Github.

+ +

Handling channel messages sent from the service worker

+ +

As mentioned earlier, when a channel message is received from the service worker, our handleChannelMessage() function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:

+ +
channel.port1.onmessage = function(e) {
+  handleChannelMessage(e.data);
+}
+ +

This occurs when the service worker sends a channel message over.

+ +

The handleChannelMessage() function looks like this:

+ +
function handleChannelMessage(data) {
+  if(data.action === 'subscribe' || data.action === 'init') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name;
+    subscribersList.appendChild(listItem);
+  } else if(data.action === 'unsubscribe') {
+    for(i = 0; i < subscribersList.children.length; i++) {
+      if(subscribersList.children[i].textContent === data.name) {
+        subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]);
+      }
+    }
+    nameInput.disabled = false;
+  } else if(data.action === 'chatMsg') {
+    var listItem = document.createElement('li');
+    listItem.textContent = data.name + ": " + data.msg;
+    messagesList.appendChild(listItem);
+    sendInput.value = '';
+  }
+}
+ +

What happens here depends on what the action property on the data object is set to:

+ + + +
+

Note: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read Using Service Workers for more details.

+
+ +

Sending chat messages

+ +

When the Send Chat Message button is clicked, the content of the associated text field is sent as a chat message. This is handled by the sendChatMessage() function (again, not shown in full for brevity). This works in a similar way to the different parts of the updateStatus() function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a statusType of chatMsg.

+ +

The server

+ +

As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using NodeJS (server.js), which handles the XHR requests sent by our client-side JavaScript code.

+ +

It uses a text file (endpoint.txt) to store subscription details; this file starts out empty. There are four different types of request, marked by the statusType property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:

+ + + +

A couple more things to note:

+ + + +

The service worker

+ +

Now let's have a look at the service worker code (sw.js), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's action property:

+ + + +
self.addEventListener('push', function(event) {
+  var obj = event.data.json();
+
+  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
+    fireNotification(obj, event);
+    port.postMessage(obj);
+  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
+    port.postMessage(obj);
+  }
+});
+ +

Next, let's look at the fireNotification() function (which is blissfully pretty simple).

+ +
function fireNotification(obj, event) {
+  var title = 'Subscription change';
+  var body = obj.name + ' has ' + obj.action + 'd.';
+  var icon = 'push-icon.png';
+  var tag = 'push';
+
+  event.waitUntil(self.registration.showNotification(title, {
+    body: body,
+    icon: icon,
+    tag: tag
+  }));
+}
+ +

Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)

+ +

+ +

Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. waitUntil() will extend the life cycle of the service worker until everything inside this method has completed.

+ +
+

Note: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as Clients.openWindow()) is properly implemented (see {{bug(1203324)}} for more details.)

+
+ +

Handling premature subscription expiration

+ +

Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example.  This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.

+ +
self.addEventListener('pushsubscriptionchange', function() {
+  // do something, usually resubscribe to push and
+  // send the new subscription details back to the
+  // server via XHR or Fetch
+});
+ +

Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.

+ +

Extra steps for Chrome support

+ +

To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.

+ +

Setting up Google Cloud Messaging

+ +

To get this set up, follow these steps:

+ +
    +
  1. Navigate to the Google Developers Console  and set up a new project.
    2. +
  2. Go to your project's homepage (ours is at https://console.developers.google.com/project/push-project-978, for example), then +
      +
    1. Select the Enable Google APIs for use in your apps option.
      2. +
    2. In the next screen, click Cloud Messaging for Android under the Mobile APIs section.
      3. +
    3. Click the Enable API button.
      4. +
    +
    3. +
  3. Now you need to make a note of your project number and API key because you'll need them later. To find them: +
      +
    1. Project number: click Home on the left; the project number is clearly marked at the top of your project's home page.
      2. +
    2. API key: click Credentials on the left hand menu; the API key can be found on that screen.
      3. +
    +
    4. +
+ +

manifest.json

+ +

You need to include a Google app-style manifest.json file in your app, which references the project number you made a note of earlier in the gcm_sender_id parameter. Here is our simple example manifest.json:

+ +
{
+  "name": "Push Demo",
+  "short_name": "Push Demo",
+  "icons": [{
+        "src": "push-icon.png",
+        "sizes": "111x111",
+        "type": "image/png"
+      }],
+  "start_url": "/index.html",
+  "display": "standalone",
+  "gcm_sender_id": "224273183921"
+}
+ +

You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:

+ +
<link rel="manifest" href="manifest.json">
+ +

userVisibleOnly

+ +

Chrome requires you to set the userVisibleOnly parameter to true when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be seen in action in our subscribe() function.

+ +

See also

+ + + +
+

Note: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in Push Notifications on the Open Web. Thanks for the awesome work, Matt!

+
diff --git a/files/es/web/api/pushmanager/index.html b/files/es/web/api/pushmanager/index.html new file mode 100644 index 0000000000..2e42155112 --- /dev/null +++ b/files/es/web/api/pushmanager/index.html @@ -0,0 +1,161 @@ +--- +title: PushManager +slug: Web/API/PushManager +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Push + - Push API + - Reference + - Service Workers + - TopicStub + - WebAPI +translation_of: Web/API/PushManager +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

The PushManager interface of the Push API provides a way to receive notifications from third-party servers as well as request URLs for push notifications.

+ +

This interface is accessed via the {{domxref("ServiceWorkerRegistration.pushManager")}} property.

+ +
+

Note: This interface replaces functionality previously offered by the obsolete {{domxref("PushRegistrationManager")}} interface.

+
+ +

Properties

+ +

None.

+ +

Methods

+ +
+
{{domxref("PushManager.getSubscription()")}}
+
Retrieves an existing push subscription. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of an existing subscription. If no existing subscription exists, this resolves to a null value.
+
{{domxref("PushManager.permissionState()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the permission state of the current {{domxref("PushManager")}}, which will be one of 'granted', 'denied', or 'default'.
+
{{domxref("PushManager.subscribe()")}}
+
Subscribes to a push service. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of a push subscription. A new push subscription is created if the current service worker does not have an existing subscription.
+
+ +

Deprecated methods

+ +
+
{{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}
+
Returns a {{jsxref("Promise")}} that resolves to the PushPermissionStatus of the requesting webapp, which will be one of granted, denied, or default. Replaced by {{domxref("PushManager.permissionState()")}}.
+
{{domxref("PushManager.register()")}} {{deprecated_inline}}
+
Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.
+
{{domxref("PushManager.registrations()")}} {{deprecated_inline}}
+
Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.
+
{{domxref("PushManager.unregister()")}} {{deprecated_inline}}
+
Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the {{domxref("PushSubscription.unsubscribe()")}} method.
+
+ +

Example

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API','#pushmanager-interface','PushManager')}}{{Spec2('Push API')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

See also

+ + diff --git a/files/es/web/api/pushmanager/permissionstate/index.html b/files/es/web/api/pushmanager/permissionstate/index.html new file mode 100644 index 0000000000..f017b2da93 --- /dev/null +++ b/files/es/web/api/pushmanager/permissionstate/index.html @@ -0,0 +1,111 @@ +--- +title: PushManager.permissionState() +slug: Web/API/PushManager/permissionState +translation_of: Web/API/PushManager/permissionState +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

El metodo permissionState()  de la interface   {{domxref("PushManager")}} retorna un {{jsxref("Promise")}} that resolves to a {{domxref("DOMString")}} indicating the permission state of the push manager. Possible values are  'prompt', 'denied', or 'granted'.

+ +
+

Note: As of Firefox 44, the permissions for Notifications and Push have been merged. If permission is granted for notifications, push will also be enabled.

+
+ +

Sintaxis

+ +
PushManager.permissionState(options).then(function(PushMessagingState) { ... });
+
+ +

Parámetros

+ +
+
opciones {{optional_inline}}
+
An object containing optional configuration parameters. It can have the following properties: +
    +
  • userVisibleOnly: A boolean indicating that the returned push subscription will only be used for messages whose effect is made visible to the user.
    • +
+
+
+ +

Retorna

+ +

Un {{jsxref("Promise")}} que resuelve a un {{domxref("DOMString")}} con un valor de  'prompt', 'denied', o 'granted'.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Push API','#widl-PushManager-permissionState-Promise-PushPermissionState--PushSubscriptionOptions-options','permissionState()')}}{{Spec2('Push API')}}Initial definition.
+ +

Compactibilidad del Navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/pushmanager/supportedcontentencodings/index.html b/files/es/web/api/pushmanager/supportedcontentencodings/index.html new file mode 100644 index 0000000000..9966fa3cda --- /dev/null +++ b/files/es/web/api/pushmanager/supportedcontentencodings/index.html @@ -0,0 +1,43 @@ +--- +title: PushManager.supportedContentEncodings +slug: Web/API/PushManager/supportedContentEncodings +translation_of: Web/API/PushManager/supportedContentEncodings +--- +

{{SeeCompatTable}}{{APIRef("Push API")}}

+ +

La propiedadsupportedContentEncodings de solo lectura (read-only) de la interfaz {{domxref("PushManager")}} devuelve un array de los codigos de contenido que puede soportar y que pueden ser usados para encriptar los datos (payload) de un push-message.

+ +

Sintaxis

+ +
var encodings[] = PushManager.supportedContentEncodings
+ +

Valor

+ +

Un array de Strings

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API','#dom-pushmanager-supportedcontentencodings','supportedContentEncodings')}}{{Spec2('Push API')}}Initial definition.
+ +

Browser Compatibility

+ +
+
+ + +

{{Compat("api.PushManager.supportedContentEncodings")}}

+
+
diff --git a/files/es/web/api/randomsource/index.html b/files/es/web/api/randomsource/index.html new file mode 100644 index 0000000000..7c68f85c01 --- /dev/null +++ b/files/es/web/api/randomsource/index.html @@ -0,0 +1,110 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - NeedsTranslation + - RandomSource + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +--- +

{{APIRef("Web Crypto API")}}

+ +

RandomSource represents a source of cryptographically secure random numbers. It is available via the {{domxref("Crypto")}} object of the global object: {{domxref("Window.crypto")}} on Web pages, {{domxref("WorkerGlobalScope.crypto")}} in workers.

+ +

RandomSource is a not an interface and no object of this type can be created.

+ +

Properties

+ +

RandomSource neither defines nor inherits any property.

+ +
+
+ +

Methods

+ +
+
{{ domxref("RandomSource.getRandomValues()") }}
+
Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.
+
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Initial definition
+ +

Browser Compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
+
+ +

[1] Although the transparent RandomSource is only available since Firefox 26, the feature was available in Firefox 21.

+ +

See also

+ + diff --git a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html b/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html new file mode 100644 index 0000000000..b6e09439a9 --- /dev/null +++ b/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html @@ -0,0 +1,75 @@ +--- +title: Crypto.getRandomValues() +slug: Web/API/RandomSource/Obtenervaloresaleatorios +tags: + - API + - Criptografía + - Referencia + - metodo +translation_of: Web/API/Crypto/getRandomValues +--- +

{{APIRef("Web Crypto API")}}

+ +

El método Crypto.getRandomValues() permite obtener valores aleatorios criptográficamente fuertes. El array que se pasa como parámetro se rellena con números aleatorios (entiéndase aleatorios en el sentido criptográfico).

+ +

Con el fin de garantizar un rendimiento razonable, las distintas implementaciones no utilizan un generador de numeros aleatorios puro, sino que utilizan un generador numérico pseudo-aleatorio, sembrado con un valor con suficiente entropía. Los generadores numéricos pseudo-aleatorios utilizados difieren entre {{Glossary("user agent", "user agents")}}, pero son adecuados para usos criptográficos. Se require también que las distintas implementaciones usen una semilla con suficiente entropía, como una fuente de entropía a nivel de sistema.

+ +

Sintaxis

+ +
cryptoObj.getRandomValues(typedArray);
+ +

Parámetros

+ +
+
typedArray
+
Es un entero {{jsxref("TypedArray")}}, que puede ser un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Int16Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, o un {{jsxref("Uint32Array")}}. Todos los elementos dentro del array seran sobreescritos con números aleatorios.
+
+ +

Excepciones

+ + + +

Ejemplo

+ +
/* Asumiendo que window.crypto.getRandomValues está disponible */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Tus numeros de la suerte:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definición Inicial
+ +

Compatibilidad del navegador

+ +

La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, compruebe https://github.com/mdn/browser-compat-data y envianos un pull request.

+ +

{{Compat("api.Crypto.getRandomValues")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/range/collapsed/index.html b/files/es/web/api/range/collapsed/index.html new file mode 100644 index 0000000000..ce3b6fa91f --- /dev/null +++ b/files/es/web/api/range/collapsed/index.html @@ -0,0 +1,35 @@ +--- +title: range.collapsed +slug: Web/API/Range/collapsed +translation_of: Web/API/Range/collapsed +--- +

{{ APIRef("DOM") }}

+ +

Resumen

+ +

Devuelve un valor booleano verdadero indicando si los puntos de inicio y fin de un rango están en la misma posición.

+ +

Sintaxis

+ +
isCollapsed = range.collapsed;
+
+ +

Ejemplo

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+isCollapsed = range.collapsed;
+
+ +

Notas

+ +

Devuelve un valor boleano verdadero si los puntos límite inicial y final del rango están en el mismo punto en el DOM, y devuelve un valor falso si no lo están.

+ +

Un rango plegado está vacío, sin tener algún contenido, especificando un simple punto en el árbol del DOM. La propiedad plegada es de sólo lectura. Para plegar un rango, vea el método collapse.

+ +

Especificación

+ +

collapsed

+ +

{{ languages( { "en": "en/DOM/range.collapsed", "ja": "ja/DOM/range.collapsed" } ) }}

diff --git a/files/es/web/api/range/commonancestorcontainer/index.html b/files/es/web/api/range/commonancestorcontainer/index.html new file mode 100644 index 0000000000..0f449e5858 --- /dev/null +++ b/files/es/web/api/range/commonancestorcontainer/index.html @@ -0,0 +1,35 @@ +--- +title: range.commonAncestorContainer +slug: Web/API/Range/commonAncestorContainer +translation_of: Web/API/Range/commonAncestorContainer +--- +
{{ApiRef("DOM")}}
+ +

Resumen

+ +

Devuelve el nodo más profundo que contienen los nodos startContainer y endContainer.

+ +

Sintaxis

+ +
rangeAncestor = range.commonAncestorContainer;
+
+ +

Ejemplo

+ +
range = document.createRange();
+range.setStart(startNode,startOffset);
+range.setEnd(endNode,endOffset);
+rangeAncestor = range.commonAncestorContainer;
+
+ +

Notas

+ +

Devuelve el último nodo, o el más lejano a lo largo del árbol del documento, que contienen los nodos startContainer y endContainer. Ya que un rango no necesita ser contínuo y puede seleccionar nodos parcialmente, ésta es una forma conveniente para encontrar un nodo que encierra un rango.

+ +

Esta propiedad es de sólo lectura. Para cambiar el contenedor ancestro de un nodo, considere usar varios métodos para definir las posiciones iniciales y finales de el rango.

+ +

Especificación

+ +

commonAncestorContainer

+ +

{{ languages( { "en": "en/DOM/range.commonAncestorContainer" } ) }}

diff --git a/files/es/web/api/range/getclientrects/index.html b/files/es/web/api/range/getclientrects/index.html new file mode 100644 index 0000000000..c324753d0b --- /dev/null +++ b/files/es/web/api/range/getclientrects/index.html @@ -0,0 +1,103 @@ +--- +title: Range.getClientRects() +slug: Web/API/Range/getClientRects +tags: + - API + - Experimental + - Rango + - Vista CSSOM + - metodo +translation_of: Web/API/Range/getClientRects +--- +

{{ApiRef("DOM")}}{{ seeCompatTable }}

+ +

El método Range.getClientRects() regresa una lista de objetos {{ domxref("DOMRect") }} los cuales representan el área de la pantalla ocupada por el rango. El resultado es generado al agregar los resultados de las llamadas a {{ domxref("Element.getClientRects()") }} para cada uno de los elementos dentro del rango.

+ +

Sintaxis

+ +
rectList = range.getClientRects()
+
+ +

Ejemplo

+ +
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+rectList = range.getClientRects();
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSSOM View', '#dom-range-getclientrects', 'Range.getClientRects()')}}{{Spec2('CSSOM View')}}Especificación inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}915.05
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatNo}}15.0{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/range/index.html b/files/es/web/api/range/index.html new file mode 100644 index 0000000000..8a9cc686ea --- /dev/null +++ b/files/es/web/api/range/index.html @@ -0,0 +1,108 @@ +--- +title: range +slug: Web/API/Range +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Range +--- +

{{ APIRef("DOM") }}

+ +

Introducción

+ +

El objeto Range representa un fragmento de un documento que puede contener nodos y partes de nodos de texto en un documento dado.

+ +

Un rango puede ser creado usando el método createRange del objeto document. Los objetos rango pueden ser recuperados usando el método getRangeAt del objeto Selection.

+ +

Propiedades

+ +
+
collapsed
+
Devuelve un valor booleano indicando si los puntos de inicio y fin están en la misma posición.
+
commonAncestorContainer
+
Devuelve el nodo más profundo que contiene los nodos startContainer y endContainer.
+
endContainer
+
Devuelve el nodo dentro del cual termina el rango.
+
endOffset
+
Devuelve un número representando donde termina el Range en el endContainer.
+
startContainer
+
Devuelve el nodo dentro del cual comienza el rango.
+
startOffset
+
Devuelve un número representando donde empieza el Range en el endContainer.
+
+ +

Métodos

+ +

Métodos de ubicación

+ +

Estos métodos definen el punto de inicio y fin de un rango.

+ +
+
setStart
+
Define la posición inicial de un rango.
+
setEnd
+
Define la posición final de un rango.
+
setStartBefore
+
Define la posición inicial de un rango relativa a otro nodo.
+
setStartAfter
+
Define la posición inicial de un rango relativa a otro nodo.
+
setEndBefore
+
Define la posición final de un rango relativa a otro nodo.
+
setEndAfter
+
Define la posición final de un rango relativa a otro nodo.
+
selectNode
+
Define el rango a contener el nodo y sus contenidos.
+
selectNodeContents
+
Define el rango a contener los contenidos de un nodo.
+
collapse
+
Pliega el Rango a uno de sus puntos límite.
+
+ +

Editando métodos

+ +

Estos métodos recuperan nodos de un rango y modifican los contenidos de un rango.

+ +
+
cloneContents
+
Devuelve un fragmento de documento copiando los nodos de un rango.
+
deleteContents
+
Elimina del documento los contenidos de un rango.
+
extractContents
+
Mueve los contenidos de un rango del árbol de documento a un fragmento del documento.
+
insertNode
+
Inserta un nodo al comienzo de un rango.
+
surroundContents
+
Mueve el contenido de un rango a un nodo nuevo.
+
+ +

Otros métodos

+ +
+
compareBoundaryPoints
+
Compara los puntos límite de dos rangos.
+
cloneRange
+
Devuelve un objeto rango con puntos límites idénticos al rango clonado.
+
detach
+
Libera el Rango desde el uso para mejorar el rendimiento.
+
toString
+
Devuelve el texto del rango.
+
+ +

Métodos de Gecko

+ +

Esta sección describe métodos de Range que son particulares a Mozilla y no son parte de las especificaciones DOM W3C.

+ +
+
compareNode {{obsolete_inline}}
+
Devuelve una constante representando si el nodo está antes, después, dentro o alrededor del rango.
+
comparePoint
+
Devuelve -1, 0, or 1 indicando si el punto ocurre antes, dentro o después del rango.
+
createContextualFragment
+
Devuelve un fragmenteo de documento creado de un texto de código.
+
intersectsNode {{obsolete_inline}}
+
Devuelve un valor boleano verdadero si el nodo dado intersecta el rango.
+
isPointInRange
+
Devuelve un valor boleano verdadero indicando si el punto dado está en el rango.
+
+ +

{{ languages( { "en": "en/DOM/range", "fr": "fr/DOM/range", "ja": "ja/DOM/range", "pl": "pl/DOM/range" } ) }}

diff --git a/files/es/web/api/range/intersectsnode/index.html b/files/es/web/api/range/intersectsnode/index.html new file mode 100644 index 0000000000..5ffd11b79e --- /dev/null +++ b/files/es/web/api/range/intersectsnode/index.html @@ -0,0 +1,48 @@ +--- +title: range.intersectsNode +slug: Web/API/Range/intersectsNode +tags: + - Referencia_DOM_de_Gecko +translation_of: Web/API/Range/intersectsNode +--- +

{{ ApiRef() }}

+

Summary

+

{{ Obsolete_header() }} Returns a boolean indicating whether the given node intersects the range.

+

Syntax

+
bool = range.intersectsNode( referenceNode )
+
+

Parameters

+
+
+ referenceNode 
+
+ The Node to compare with the Range.
+
+

Example

+
range = document.createRange();
+range.selectNode(document.getElementsByTagName("div").item(0));
+bool = range.intersectsNode(document.getElementsByTagName("p").item(0));
+
+

Notes

+

This method is obsolete; you should instead use the W3C DOM Range methods (see compareBoundaryPoints()).

+
+ Warning: This method has been removed from Gecko 1.9 and will not exist in future versions of Firefox; you should switch to compareBoundaryPoints() as soon as possible.
+

The following function can be used as replacement:

+
function rangeIntersectsNode(range, node) {
+  var nodeRange = node.ownerDocument.createRange();
+  try {
+    nodeRange.selectNode(node);
+  }
+  catch (e) {
+    nodeRange.selectNodeContents(node);
+  }
+
+  return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &&
+         range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
+}
+
+

Specification

+

This method is not part of a specification.

+
+  
+

{{ languages( { "en": "en/DOM/range.intersectsNode", "pl": "pl/DOM/range.intersectsNode" } ) }}

diff --git a/files/es/web/api/range/setstart/index.html b/files/es/web/api/range/setstart/index.html new file mode 100644 index 0000000000..f4a991615c --- /dev/null +++ b/files/es/web/api/range/setstart/index.html @@ -0,0 +1,120 @@ +--- +title: Range.setStart() +slug: Web/API/Range/setStart +translation_of: Web/API/Range/setStart +--- +

{{ApiRef("DOM")}}

+ +

El método Range.setStart() establece la posición de inicio de un {{ domxref("Range") }}.

+ +

Si startNode es un {{ domxref("Node") }} de tipo Text, Comment, o CDATASection, entonces startOffset es el número de caracteres de partida de startNode. Para otros tiposde nodos, startOffset es el número de nodos hijos entre el inicio de los startNode.

+ +

Setting the start point below (lower in the document) the end point will result in a collapsed range with the start and end points both set to the specified start position.

+ +

Definiendo el punto de partida abajo (más abajo en el documento) el punto final resultará en un rango colapsado con el punto tanto de inicio como de entrada establecidos a la posición de partida especificada.

+ +

Sintaxis

+ +
range.setStart(startNode, startOffset);
+
+ +

Parámetros

+ +
+
startNode
+
El {{ domxref("Node") }} donde {{ domxref("Range") }} debe empezar.
+
startOffset 
+
Un entero mayor o igual a cero representando el offset o desplazamiento de caracteres para el inicio del {{ domxref("Range") }} desde el comienzo de startNode.
+
+ +

Ejemplo

+ +
var range = document.createRange();
+var startNode = document.getElementsByTagName("p").item(2);
+var startOffset = 0;
+range.setStart(startNode,startOffset);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}{{Spec2('DOM WHATWG')}}Sin cambio.
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}{{Spec2('DOM2 Traversal_Range')}}Especificación inicial.
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}9.09.0{{CompatVersionUnknown}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/request/headers/index.html b/files/es/web/api/request/headers/index.html new file mode 100644 index 0000000000..e36f914087 --- /dev/null +++ b/files/es/web/api/request/headers/index.html @@ -0,0 +1,68 @@ +--- +title: Request.headers +slug: Web/API/Request/headers +translation_of: Web/API/Request/headers +--- +
{{APIRef("Fetch")}}
+ +

La propiedad de solo lectura headers de la interface {{domxref("Request")}} es un objeto de tipo {{domxref("Headers")}}, asociado a la petición.

+ +

Sintax

+ +
var myHeaders = request.headers;
+ +

Valor

+ +

Un objeto de tipo {{domxref("Headers")}}.

+ +

Ejemplo

+ +

En el siguiente fragmento de código, crearemos una nueva petición utilizando el constructor del {{domxref("Request.Request()")}} (para un archivo de imagen ubicado en el mismo directorio del script), guardamos el encabezado de la petición en una variable:

+ +
var myRequest = new Request('flowers.jpg');
+var myHeaders = myRequest.headers; // Headers {}
+ +

Para agregar encabezados al objeto {{domxref("Headers")}} usamos {{domxref("Headers.append")}}; creamos una nueva petición usando el parametro init del constructor y asignamos los encabezados como una opción del parametro init:

+ +
var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+                   headers: myHeaders,
+                   mode: 'cors',
+                   cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+myContentType = myRequest.headers.get('Content-Type'); // returns 'image/jpeg'
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch','#dom-request-headers','headers')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.Request.headers")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/request/index.html b/files/es/web/api/request/index.html new file mode 100644 index 0000000000..770647619e --- /dev/null +++ b/files/es/web/api/request/index.html @@ -0,0 +1,170 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Experimental + - Fetch + - Fetch API + - Interface + - NeedsTranslation + - Reference + - TopicStub + - request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch")}}
+ +

La interfaz Request de la API Fetch representa una solicitud de respuesta.

+ +

Puedes crear un nuevo objeto Request usando el constructor {{domxref("Request.Request()")}}, pero es preferible encontrar un objeto Request que sea devuelto como el resultado de otra operacion API, como un operador de servicio {{domxref("FetchEvent.request")}}.

+ +

Constructor

+ +
+
{{domxref("Request.Request()")}}
+
Crea un nuevo objeto Request.
+
+ +

Propiedades

+ +
+
{{domxref("Request.method")}} {{readonlyInline}}
+
Contiene el metodo de solicitud (GET, POST, etc.)
+
{{domxref("Request.url")}} {{readonlyInline}}
+
Contiene la URL de la solicitud.
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
Contiene el objeto asociado de la solicitud {{domxref("Headers")}}
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
Contiene el contexto de la solicitud (p.ej., audio, image, iframe, etc.)
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
Contiene la referencia de la soliditud (p.ej., client).
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
Contiene la política de referencia de la solicitud (p.ej., no-referrer).
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
Contiene el modo de la solicitud. (p.ej., cors, no-cors, same-origin, navigate.)
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
Contiene las credenciales de la solicitud (p.ej., omit, same-origin).
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
Contiene el modo de cómo son manipuladas las redirecciones. Puede ser follow, error, o manual.
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
Contiene el valor del subrecurso de integridad (subresource integrity) de la solicitud (p.ej., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
Contiene el modo de caché de la solicitud (p.ej., default, reload, no-cache).
+
+ +

Request implementa {{domxref("Body")}}, por lo que también tiene las siguientes propiedades disponibles:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Un simple getter usado para exponer un contenido del cuerpo {{domxref("ReadableStream")}}
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Almacena un {{domxref("Boolean")}} que declara si ya se ha usado el cuerpo en una respuesta.
+
+ +

Métodos

+ +
+
{{domxref("Request.clone()")}}
+
Crea una copia del objeto actual Request.
+
+ +

Request implementa {{domxref("Body")}}, por lo que también tiene los siguientes métodos disponibles:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref("ArrayBuffer")}} del cuerpo de la solicitud.
+
{{domxref("Body.blob()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref("Blob")}} del cuerpo de la solicitud.
+
{{domxref("Body.formData()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref("FormData")}} del cuerpo de la solicitud.
+
{{domxref("Body.json()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref ("JSON")}} del cuerpo de la solicitud.
+
{{domxref("Body.text()")}}
+
Devuelve una promesa que se resuelve con una representación {{domxref("USVString")}} (text) del cuerpo de la solicitud.
+
+ +
+

Nota: Las funciones {{domxref("Body")}} solo pueden ser ejecutadas una vez; Las siguientes llamadas se resolverán con strings/ArrayBuffers vacíos.

+
+ +

Ejemplos

+ +

En el siguiente fragmento de código, creamos una nueva solicitud utilizando el constructor Request() (para un archivo de imagen en el mismo directorio que el script),  luego devolvemos algunos valores de propiedad de la solicitud:

+ +
const myRequest = new Request('http://localhost/flowers.jpg');
+
+const myURL = myRequest.url; // http://localhost/flowers.jpg
+const myMethod = myRequest.method; // GET
+const myCred = myRequest.credentials; // omit
+
+ +

Puede obtener esta solicitud pasando el objeto Request como parámetro a una llamada {{domxref("GlobalFetch.fetch()")}}, por ejemplo:

+ +
fetch(myRequest)
+  .then(response => response.blob())
+  .then(blob => {
+    myImage.src = URL.createObjectURL(blob);
+  });
+ +

En el siguiente fragmento de código, creamos una nueva solicitud utilizando el constructor Request() con algunos datos iniciales y contenido del cuerpo para una solicitud de API que necesita una carga útil del cuerpo:

+ +
const myRequest = new Request('http://localhost/api', {method: 'POST', body: '{"foo":"bar"}'});
+
+const myURL = myRequest.url; // http://localhost/api
+const myMethod = myRequest.method; // POST
+const myCred = myRequest.credentials; // omit
+const bodyUsed = myRequest.bodyUsed; // true
+
+ +
+

Nota: El tipo de cuerpo solo puede ser {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} o tipo {{domxref("ReadableStream")}}, así que para añadir un objeto JSON a la carga útil, necesitas convertir a string (stringify) dicho objeto.

+
+ +

Puede obtener esta solicitud de API pasando el objeto Request como parámetro a una llamada {{domxref("GlobalFetch.fetch()")}}, por ejemplo, y obtener la respuesta:

+ +
fetch(myRequest)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/response/index.html b/files/es/web/api/response/index.html new file mode 100644 index 0000000000..11e18a501c --- /dev/null +++ b/files/es/web/api/response/index.html @@ -0,0 +1,128 @@ +--- +title: Response +slug: Web/API/Response +tags: + - API + - Experimental + - Fetch + - Interface + - Referencia + - Respuesta +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

La interfaz Response de la Fetch API representa la respuesta a una petición.

+ +

Tú puedes crear un nuevo objeto Response usando el  constructor{{domxref("Response.Response()")}}, pero es más probable encontrar un objeto Response siendo devuelto como resultado de la operación de otra API, por ejemplo un service worker {{domxref("Fetchevent.respondWith")}}, o un simple {{domxref("GlobalFetch.fetch()")}}.

+ +

Constructor

+ +
+
{{domxref("Response.Response","Response()")}}
+
Crea un nuevo objeto Response.
+
+ +

Propiedades

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
Contiene el objeto {{domxref("Headers")}} asociado con la respuesta.
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
Contiene un estado indicando si la respuesta fue exitosa (estado en el rango  200-299) o no.
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
Indica si la respuesta es o no el resultado de una redirección; eso es, su lista de URL tiene más de una entrada.
+
{{domxref("Response.status")}} {{readonlyinline}}
+
Contiene el código de estado de la respuesta (e.g., 200 si fue exitosa).
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
Contiene el mensaje de estado correspondiente al código de estado (e.g., OK para el Código 200).
+
{{domxref("Response.type")}} {{readonlyinline}}
+
Contiene el tipo de respuesta (e.g., basic, cors).
+
{{domxref("Response.url")}} {{readonlyinline}}
+
Contiene la URL de respuesta.
+
{{domxref("Response.useFinalURL")}}
+
Contiene un valor booleano indicando si ésta es la URL final de respuesta.
+
+ +

Response implementa {{domxref("Body")}}, de modo que además contiene las propiedades que se detallan a continuación:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Un simple método get que expone un {{domxref("ReadableStream")}} de los contenidos del body.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Almacena un {{domxref("Boolean")}}  en el cuál declara si el body ya fue enviado como respuesta anteriormente.
+
+ +

Methods

+ +
+
{{domxref("Response.clone()")}}
+
Clona un Objeto Respuesta.
+
{{domxref("Response.error()")}}
+
Devuelve un nuevo objeto Respuesta asociado a un error de red.
+
{{domxref("Response.redirect()")}}
+
Crea una nueva respuesta con un URL distinto.
+
Response iimplementa {{domxref("Body")}}, de modo que además contiene los métodos que se detallan a continuación:
+
+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("ArrayBuffer")}}.
+
{{domxref("Body.blob()")}}
+
Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("Blob")}}.
+
{{domxref("Body.formData()")}}
+
Toma un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un objeto {{domxref("FormData")}}.
+
{{domxref("Body.json()")}}
+
Recibe un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve como {{jsxref("JSON")}} el texto del Body enviado.
+
{{domxref("Body.text()")}}
+
Recibe un flujo {{domxref("Response")}} y lo lee hasta completarlo. Devuelve una promesa que resuelve con un {{domxref("USVString")}} (texto).
+
+ +

Examples

+ +

En nuestro ejemplo básico de ferch (ejecutar el ejemplo) usamos una llamada fetch() para descargar una imagen y mostrarla en una etiqueta {{htmlelement("img")}} . La llamda a fetch() call devuelve una promesa, la cual resuelve a un objetoResponse asociado a la operación fetch.

+ +

Observa como ya que lo que estamos solicitando es una imagen, necesitamos ejecutar {{domxref("Body.blob")}} ({{domxref("Response")}} implements body) para darle a la respuesta su tipo MIME correcto.

+ +
var myImage = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  var objectURL = URL.createObjectURL(blob);
+  myImage.src = objectURL;
+});
+ +

También puedes usar el constructor {{domxref("Response.Response()")}} para crear tus objetos Response personalizados:

+ +
var myResponse = new Response();
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/response/ok/index.html b/files/es/web/api/response/ok/index.html new file mode 100644 index 0000000000..1bff7fe5db --- /dev/null +++ b/files/es/web/api/response/ok/index.html @@ -0,0 +1,66 @@ +--- +title: Response.ok +slug: Web/API/Response/ok +translation_of: Web/API/Response/ok +--- +
{{APIRef("Fetch")}}
+La propiedad de solo lectura ok de la interfaz {{domxref("Response")}} contiene un Booleano que indica si la respuesta fue exitosa (estado en un rango de 200 a 299)  o no.
+ +

Sintaxis

+ +
var miOK = respuesta.ok;
+ +

Valor

+ +

Un {{domxref("Boolean")}}.

+ +

Ejemplo

+ +

En nuestro ejemplo de Fetch Response (véase Fetch Response en vivo) creamos un nuevo {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasando una ruta a un JPG. Luego traemos esta petición usando {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL usando {{domxref("URL.createObjectURL")}}, y mostrar esto en un {{htmlelement("img")}}.

+ +
+

Nota:  en la parte superior del bloque de fetch() imprimimos el valor de ok en la consola.

+
+ +
var imagen = document.querySelector('img');
+
+var peticion = new Request('flowers.jpg');
+
+fetch(peticion).then(function(respuesta) {
+  console.log(respuesta.ok); //retorna true si la respuesta fue exitosa
+  respuesta.blob().then(function(miBlob) {
+    var objectoURL = URL.createObjectURL(miBlob);
+    imagen.src = objectURL;
+  });
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{Spec2('Fetch')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("api.Response.ok")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/response/response/index.html b/files/es/web/api/response/response/index.html new file mode 100644 index 0000000000..f967d677f2 --- /dev/null +++ b/files/es/web/api/response/response/index.html @@ -0,0 +1,75 @@ +--- +title: Response() +slug: Web/API/Response/Response +translation_of: Web/API/Response/Response +--- +
{{APIRef("Fetch")}}
+ +

El constructor Response() crea un nuevo objeto {{domxref("Response")}}

+ +

Sintaxis

+ +
var miRespuesta = new Response(cuerpo,opciones);
+ +

Parámetros

+ +
+
cuerpo {{optional_inline}}
+
Un objeto que define el cuerpo de la respuesta. Puede ser null, o uno de los siguientes elementos: +
    +
  • {{domxref("Blob")}}
    • +
  • {{domxref("BufferSource")}}
    • +
  • {{domxref("FormData")}}
    • +
  • {{domxref("ReadableStream")}}
    • +
  • {{domxref("URLSearchParams")}}
    • +
  • {{domxref("USVString")}}
    • +
+
+
opciones {{optional_inline}}
+
Un objeto que contiene las opciones de personalización para la respuesta HTTP. Las opciones posibles son: +
    +
  • status: El código de estado HTTP, p.e.: 200.
    • +
  • statusText: El mensaje de estado asociado con el código de estado HTTP, p.e.: OK.
    • +
  • headers: Cualquier cabecera que quieras añadir a la respuesta. Puede ser un objeto {{domxref("Headers")}} o un objeto literal de {{domxref("ByteString")}} pares claves/valor (ver Cabeceras HTTP para más información).
    • +
+
+
+ +

Ejemplos

+ +

En nuestro ejemplo Fetch Response (ver Fetch Response live) creamos un nuevo objeto Response usando el constructor, pasándole un nuevo objeto {{domxref("Blob")}} como cuerpo, y un objeto con status ystatusText como opciones:

+ +
var miBlob = new Blob();
+var opciones = { "status" : 200 , "statusText" : "Flipante!" };
+var miRespuesta = new Response(miBlob,opciones);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Fetch','#dom-response','Response()')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad en navegadores

+ + + +

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

+ +

Relacionado

+ + diff --git a/files/es/web/api/response/status/index.html b/files/es/web/api/response/status/index.html new file mode 100644 index 0000000000..eecaf02967 --- /dev/null +++ b/files/es/web/api/response/status/index.html @@ -0,0 +1,73 @@ +--- +title: Response.status +slug: Web/API/Response/status +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - Response + - status +translation_of: Web/API/Response/status +--- +
{{APIRef("Fetch")}}
+ +

La propiedad de solo lectura status de la interfaz {{domxref("Response")}} contiene el código de estado de la respuesta (ejm., 200 para un éxito).

+ +

Sintaxis

+ +
var myStatus = response.status;
+ +

Valor

+ +

Un número (para ser preciso, uno corto sin signo).

+ +

Ejemplo

+ +

En nuestro ejemplo Fetch Response (ver Fetch Response en vivo) nosotros creamos un nuevo objeto {{domxref("Request")}} usando el constructor {{domxref("Request.Request","Request()")}}, pasándole una ruta JPG. Luego buscamos esta solicitud usando  {{domxref("GlobalFetch.fetch","fetch()")}}, extraemos un blob de la respuesta usando {{domxref("Body.blob")}}, creamos un objeto URL fuera de ella usando {{domxref("URL.createObjectURL")}}, y mostramos esto en un {{htmlelement("img")}}.

+ +

Tenga en cuenta que en la parte superior del bloque  fetch() registramos el valor de la respuesta  status en la consola.

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  console.log(response.status); // returns 200
+  response.blob().then(function(myBlob) {
+    var objectURL = URL.createObjectURL(myBlob);
+    myImage.src = objectURL;
+  });
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Fetch','#dom-response-status','status')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.Response.status")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html b/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html new file mode 100644 index 0000000000..d455433b6c --- /dev/null +++ b/files/es/web/api/rtcpeerconnection/cantrickleicecandidates/index.html @@ -0,0 +1,87 @@ +--- +title: RTCPeerConnection.canTrickleIceCandidates +slug: Web/API/RTCPeerConnection/canTrickleIceCandidates +translation_of: Web/API/RTCPeerConnection/canTrickleIceCandidates +--- +
{{APIRef("WebRTC")}}
+ +

La propiedad {{domxref("RTCPeerConnection")}} es de solo lectura canTrickleIceCandidates  , devuelve un  {{jsxref("Boolean")}} que indica si el par remoto puede aceptar o no candidatos ICE.

+ +

ICE trickling is the process of continuing to send candidates after the initial offer or answer has already been sent to the other peer.

+ +

This property is only set after having called {{domxref("RTCPeerConnection.setRemoteDescription()")}}.  Ideally, your signaling protocol provides a way to detect trickling support, so that you don't need to rely on this property. A WebRTC browser will always support trickle ICE. If trickling isn't supported, or you aren't able to tell, you can check for a falsy value for this property and then wait until the value of {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} changes to "completed" before creating and sending the initial offer. That way, the offer contains all of the candidates.

+ +

Syntax

+ +
 var canTrickle = RTCPeerConnection.canTrickleIceCandidates;
+ +

Value

+ +

A {{jsxref("Boolean")}} that is true if the remote peer can accept trickled ICE candidates and false if it cannot. If no remote peer has been established, this value is null.

+ +
+

Note: This property's value is determined once the local peer has called {{domxref("RTCPeerConnection.setRemoteDescription()")}}; the provided description is used by the ICE agent to determine whether or not the remote peer supports trickled ICE candidates.

+
+ +

Example

+ +
var pc = new RTCPeerConnection();
+// The following code might be used to handle an offer from a peer when
+// it isn't known whether it supports trickle ICE.
+pc.setRemoteDescription(remoteOffer)
+  .then(_ => pc.createAnswer())
+  .then(answer => pc.setLocalDescription(answer))
+  .then(_ =>
+    if (pc.canTrickleIceCandidates) {
+      return pc.localDescription;
+    }
+    return new Promise(r => {
+      pc.addEventListener('icegatheringstatechange', e => {
+        if (e.target.iceGatheringState === 'complete') {
+          r(pc.localDescription);
+        }
+      });
+    });
+  })
+  .then(answer => sendAnswerToPeer(answer)) // signaling message
+  .catch(e => handleError(e));
+
+pc.addEventListener('icecandidate', e => {
+  if (pc.canTrickleIceCandidates) {
+    sendCandidateToPeer(e.candidate); // signaling message
+  }
+});
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('WebRTC 1.0', '#dom-rtcpeerconnection-cantrickleicecandidates', 'RTCPeerConnection.canTrickleIceCandidates') }}{{ Spec2('WebRTC 1.0') }}Initial specification.
+ +

Browser compatibility

+ + + +

{{Compat("api.RTCPeerConnection.canTrickleIceCandidates")}}

+ +

See also

+ + diff --git a/files/es/web/api/rtcpeerconnection/index.html b/files/es/web/api/rtcpeerconnection/index.html new file mode 100644 index 0000000000..8a902d3ab5 --- /dev/null +++ b/files/es/web/api/rtcpeerconnection/index.html @@ -0,0 +1,444 @@ +--- +title: RTCPeerConnection +slug: Web/API/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection +--- +

{{APIRef('WebRTC')}}{{draft}}

+ +

La interfaz RTCPeerConnection representa una conexión WebRTC entre un computador local y un par remoto (otro computador). Esta interfaz provee métodos para: conectar un equipo remoto (remote peer), mantener y monitorear esa coneexión y cerrar la conexión una vez que no se necesite más.

+ +
+

RTCPeerConnection y {{domxref("RTCSessionDescription")}} aún están prefijados en algunos navegadores. Se recomienda encarecidamente usar una librería de ajuste (shim) como la excelente y ampliamente soportada Adapter.js, para asegurar la compatibilidad más amplia posible de su sitio o aplicación web. Vale la pena señalar que Adapter.js va más allá del manejo de prefijos, esta librería implementa ajustes (shims) para asegurar la compatibilidad entre las distintas implementaciones de WebRTC de los distintos navegadores.

+
+ +

{{InheritanceDiagram}}

+ +

{{InterfaceOverview("WebRTC")}}

+ +

Método obsoleto

+ +

El siguiente método fue declarado obsoleto ya hace un tiempo, admás, nunca fue implementado en los navegadores más importantes.

+ +
+
{{domxref("RTCPeerConnection.createDTMFSender()")}} {{obsolete_inline}}
+
Crea un nuevo {{domxref("RTCDTMFSender")}}, que se asocia a un {{domxref("MediaStreamTrack")}} específico, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.
+
+ +

Constantes

+ +

RTCBundlePolicy enum

+ +

The RTCBundlePolicy enum defines string constants which are used to request a specific policy for gathering ICE candidates if the remote peer isn't compatible with the SDP BUNDLE standard for bundling multiple media streams on a single transport link.

+ +
+

In technical terms, a BUNDLE lets all media flow between two peers flow across a single 5-tuple; that is, from the same IP and port on one peer to the same IP and port on the other peer, using the same transport protocol.

+
+ + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"balanced"On BUNDLE-aware connections, the ICE agent should gather candidates for all of the media types in use (audio, video, and data). Otherwise, the ICE agent should only negotiate one audio and video track on separate transports.
"max-compat"The ICE agent should gather candidates for each track, using separate transports to negotiate all media tracks for connections which aren't BUNDLE-compatible.
"max-bundle"The ICE agent should gather candidates for just one track. If the connection isn't BUNDLE-compatible, then the ICE agent should negotiate just one media track.
+ +

RTCIceConnectionState enum

+ +

The RTCIceConnectionState enum defines the string constants used to describe the current state of the ICE agent and its connection to the ICE server (that is, the {{Glossary("STUN")}} or {{Glossary("TURN")}} server).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"new"The ICE agent is gathering addresses or is waiting to be given remote candidates through calls to {{domxref("RTCPeerConnection.addIceCandidate()")}} (or both).
"checking"The ICE agent has been given one or more remote candidates and is checking pairs of local and remote candidates against one another to try to find a compatible match, but has not yet found a pair which will allow the peer connection to be made. It's possible that gathering of candidates is also still underway.
"connected"A usable pairing of local and remote candidates has been found for all components of the connection, and the connection has been established. It's possible that gathering is still underway, and it's also possible that the ICE agent is still checking candidates against one another looking for a better connection to use.
"completed"The ICE agent has finished gathering candidates, has checked all pairs against one another, and has found a connection for all components.
"failed"The ICE candidate has checked all candidates pairs against one another and has failed to find compatible matches for all components of the connection. It is, however, possible that the ICE agent did find compatible connections for some components.
"disconnected"Checks to ensure that components are still connected failed for at least one component of the {{domxref("RTCPeerConnection")}}. This is a less stringent test than "failed" and may trigger intermittently and resolve just as spontaneously on less reliable networks, or during temporary disconnections. When the problem resolves, the connection may return to the "connected" state.
"closed"The ICE agent for this {{domxref("RTCPeerConnection")}} has shut down and is no longer handling requests.
+ +

RTCIceGatheringState enum

+ +

The RTCIceGatheringState enum defines string constants which reflect the current status of ICE gathering, as returned using the {{domxref("RTCPeerConnection.iceGatheringState")}} property. You can detect when this value changes by watching for an event of type {{event("icegatheringstatechange")}}.

+ + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"new"The peer connection was just created and hasn't done any networking yet.
"gathering"The ICE agent is in the process of gathering candidates for the connection.
"complete"The ICE agent has finished gathering candidates. If something happens that requires collecting new candidates, such as a new interface being added or the addition of a new ICE server, the state will revert to "gathering" to gather those candidates.
+ +

RTCIceTransportPolicy enum

+ +

The RTCIceTransportPolicy enum defines string constants which can be used to limit the transport policies of the ICE candidates to be considered during the connection process.

+ + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"all"All ICE candidates will be considered.
"public" {{obsolete_inline}}Only ICE candidates with public IP addresses will be considered. Removed from the specification's May 13, 2016 working draft.
"relay"Only ICE candidates whose IP addresses are being relayed, such as those being passed through a TURN server, will be considered.
+ +

RTCPeerConnectionState enum

+ +

The RTCPeerConnectionState enum defines string constants which describe states in which the RTCPeerConnection may be. These values are returned by the {{domxref("RTCPeerConnection.connectionState", "connectionState")}} property. This state essentially represents the aggregate state of all ICE transports (which are of type {{domxref("RTCIceTransport")}} or {{domxref("RTCDtlsTransport")}}) being used by the connection.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"new"At least one of the connection's ICE transports ({{domxref("RTCIceTransport")}}s or {{domxref("RTCDtlsTransport")}}s) are in the "new" state, and none of them are in one of the following states: "connecting", "checking", "failed", or "disconnected", or all of the connection's transports are in the "closed" state.
"connecting"One or more of the ICE transports are currently in the process of establishing a connection; that is, their RTCIceConnectionState is either "checking" or "connected", and no transports are in the "failed" state. <<< Make this a link once I know where that will be documented
"connected"Every ICE transport used by the connection is either in use (state "connected" or "completed") or is closed (state "closed"); in addition, at least one transport is either "connected" or "completed".
"disconnected"At least one of the ICE transports for the connection is in the "disconnected" state and none of the other transports are in the state "failed", "connecting", or "checking".
"failed"One or more of the ICE transports on the connection is in the "failed" state.
"closed" +

The RTCPeerConnection is closed.

+ +

This value was in the RTCSignalingState enum (and therefore found by reading the value of the {{domxref("RTCPeerConnection.signalingState", "signalingState")}}) property until the May 13, 2016 draft of the specification.

+
+ +

RTCRtcpMuxPolicy enum

+ +

The RTCRtcpMuxPolicy enum defines string constants which specify what ICE candidates are gathered to support non-multiplexed RTCP. <<<add a link to info about multiplexed RTCP.

+ + + + + + + + + + + + + + + + + + +
ConstantDescription
"negotiate"Instructs the ICE agent to gather both {{Glossary("RTP")}} and {{Glossary("RTCP")}} candidates. If the remote peer can multiplex RTCP, then RTCP candidates are multiplexed atop the corresponding RTP candidates. Otherwise, both the RTP and RTCP candidates are returned, separately.
"require"Tells the ICE agent to gather ICE candidates for only RTP, and to multiplex RTCP atop them. If the remote peer doesn't support RTCP multiplexing, then session negotiation fails.
+ +

RTCSignalingState enum

+ +

The RTCSignalingState enum specifies the possible values of {{domxref("RTCPeerConnection.signalingState")}}, which indicates where in the process of signaling the exchange of offer and answer the connection currently is.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantDescription
"stable"There is no ongoing exchange of offer and answer underway. This may mean that the {{domxref("RTCPeerConnection")}} object is new, in which case both the {{domxref("RTCPeerConnection.localDescription", "localDescription")}} and {{domxref("RTCPeerConnection.remoteDescription", "remoteDescription")}} are null; it may also mean that negotiation is complete and a connection has been established.
"have-local-offer"The local peer has called {{domxref("RTCPeerConnection.setLocalDescription()")}}, passing in SDP representing an offer (usually created by calling {{domxref("RTCPeerConnection.createOffer()")}}), and the offer has been applied successfully.
"have-remote-offer"The remote peer has created an offer and used the signaling server to deliver it to the local peer, which has set the offer as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.
"have-local-pranswer"The offer sent by the remote peer has been applied and an answer has been created (usually by calling {{domxref("RTCPeerConnection.createAnswer()")}}) and applied by calling {{domxref("RTCPeerConnection.setLocalDescription()")}}. This provisional answer describes the supported media formats and so forth, but may not have a complete set of ICE candidates included. Further candidates will be delivered separately later.
"have-remote-pranswer"A provisional answer has been received and successfully applied in response to an offer previously sent and established by calling setLocalDescription().
"closed" {{obsolete_inline}} +

The connection is closed.

+ +
+

This value moved into the RTCPeerConnectionState enum in the May 13, 2016 draft of the specification, as it reflects the state of the RTCPeerConnection, not the signaling connection. You now detect a closed connection by checking for {{domxref("RTCPeerConnection.connectionState", "connectionState")}} to be "closed" instead.

+
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0', '#interface-definition', 'RTCPeerConnection')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerMicrosoft EdgeOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(56)}} (unprefixed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop(22)}}
+ {{property_prefix("-moz")}} until Firefox 44		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
addTrack(){{CompatNo}}{{CompatUnknown}}{{ CompatGeckoDesktop(45) }} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
iceConnectionState: disconnected{{CompatChrome(48)}}{{CompatUnknown}}{{CompatGeckoDesktop(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onicegatheringstatechange{{CompatChrome(59)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
removeTrack(){{CompatNo}}{{CompatUnknown}}{{ CompatVersionUnknown }}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(56)}} (unprefixed)		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(56)}} (unprefixed)		{{CompatVersionUnknown}}{{CompatGeckoDesktop(22)}}
+ {{property_prefix("-moz")}} until Firefox 44		22{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
addTrack(){{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{ CompatGeckoDesktop(45) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} 
iceConnectionState: disconnected{{CompatChrome(48)}}{{CompatChrome(48)}}{{CompatUnknown}}{{CompatGeckoDesktop(52)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onicegatheringstatechange{{CompatChrome(59)}}{{CompatChrome(59)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
removeTrack(){{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} 
+
+ +

[1] Prior to Firefox 49, the specified track was required to be component of all passed {{domxref("MediaStream")}}s. Starting in Firefox 49, this is no longer the case. See {{bug(1271669)}} for specifics.

+ +

[2] Firefox currently removes the {{domxref("RTCRtpSender")}} from the list of senders as reported by {{domxref("RTCPeerConnection.getSenders()")}}. This was correct in earlier versions of the specification, but no longer is. See {{bug(1290949)}}.

+ +

See also

+ + diff --git a/files/es/web/api/rtcrtpreceiver/index.html b/files/es/web/api/rtcrtpreceiver/index.html new file mode 100644 index 0000000000..0944e1d163 --- /dev/null +++ b/files/es/web/api/rtcrtpreceiver/index.html @@ -0,0 +1,72 @@ +--- +title: RTCRtpReceiver +slug: Web/API/RTCRtpReceiver +translation_of: Web/API/RTCRtpReceiver +--- +
{{APIRef("WebRTC")}}
+ +

La interfaz RTCRtpReceiver de la WebRTC API gestiona la recepción y decodificación de los datos para una {{domxref("MediaStreamTrack")}} a una {{domxref("RTCPeerConnection")}}.

+ +

Propiedades

+ +
+
{{domxref("RTCRtpReceiver.track")}} {{readonlyinline}}
+
Devuelve el {{domxref("MediaStreamTrack")}} asociado con la instancia actual de RTCRtpReceiver
+
{{domxref("RTCRtpReceiver.rtcpTransport")}} {{readonlyinline}}
+
Devuelve la instancia {{domxref("RTCDtlsTransport")}} en la que se envía y se recibe el RTCP.
+
{{domxref("RTCRtpReceiver.transport")}} {{readonlyinline}}
+
Devuelve la instancia {{domxref("RTCDtlsTransport")}} en la que se reciben los medios para la pista del receptor.
+
+ +

Métodos

+ +
+
{{domxref("RTCRtpReceiver.getContributingSources()")}}
+
Devuelve un array de instancia {{domxref("RTCRtpContributingSource")}} para cada identificador CSRC (fuente contribuyente) identificador recibido actual RTCRtpReceiver en los últimos 10 segundos.
+
{{domxref("RTCRtpReceiver.getParameters()")}} 
+
Devuelve un objeto RTCRtpParameters que contiene información sobre cómo se van a decodificar los datos de RTC.
+
{{domxref("RTCRtpReceiver.getStats()")}}
+
Devuelve un {{jsxref("Promise")}} cuyo controlador de cumplimiento recibe un
+ {{domxref("RTCStatsReport")}} que contiene estadísticas sobre los flujos entrantes y sus dependencias.
+
{{domxref("RTCRtpReceiver.getSynchronizationSources()")}} 
+
Devuelve un arreglo que incluye una instancia {{domxref("RTCRtpSynchronizationSource")}} para cada identificador SSRC (fuente de sincronización) único recibido por el RTCRtpReceiver actual en los últimos diez segundos.
+
+ +

Métodos estáticos

+ +
+
{{domxref("RTCRtpReceiver.getCapabilities()")}}
+
Devuelve la visión más optimista de las capacidades del sistema para recibir medios de comunicación del tipo dado.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('WebRTC 1.0','#rtcrtpreceiver-interface','RTCRtpReceiver')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Compatibilidad

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/screen/index.html b/files/es/web/api/screen/index.html new file mode 100644 index 0000000000..0d5e87f9c9 --- /dev/null +++ b/files/es/web/api/screen/index.html @@ -0,0 +1,89 @@ +--- +title: Screen +slug: Web/API/Screen +translation_of: Web/API/Screen +--- +
{{APIRef("CSSOM View")}}
+ +

La interfaz Screen representa una pantallaa, usualmente la misma donde la ventana actual está siendo visualizada.

+ +

Usualmente es también la única en la que la ventana actual está siendo visualizada, obtenida utilizando window.screen.

+ +

Propiedades

+ +
+
{{domxref("Screen.availTop")}}
+
Especifica la coordenada-y del primer pixel que no está asignado a prestaciones permanentes o semipermanentes de la interfaz de usuario.
+
{{domxref("Screen.availLeft")}}
+
Retorna el primer pixel disponible desde el border izquierdo de la pantalla.
+
{{domxref("Screen.availHeight")}}
+
Especifica la altura de la pantalla, en pixels, menos la altura de los elementos permanentes o semipermanentes de la interfaz de usuario visualizados por el sistema operativo, como la barra de tareas de Windows.
+
{{domxref("Screen.availWidth")}}
+
Retorna el total de espacio horizontal en pixels disponibles para la ventana.
+
{{domxref("Screen.colorDepth")}}
+
Retorna la profundidad de color de la pantalla.
+
{{domxref("Screen.height")}}
+
Retorna la altura de la pantalla en pixels.
+
{{domxref("Screen.left")}}
+
Retorna la distancia en pixels desde el borde izquierdo de la pantalla principal al borde izquierdo de la pantalla actual.
+
{{domxref("Screen.orientation")}}
+
Retorna la orientación actual de la pantalla.
+
{{domxref("Screen.pixelDepth")}}
+
Obtiene la profundidad de bits de la pantalla.
+
{{domxref("Screen.top")}}
+
Retorna la distancia en pixels desde el borde supierior de la pantalla principal al border superior de la pantalla actual.
+
{{domxref("Screen.width")}}
+
Retorna la anchura de la pantalla.
+
{{domxref("Screen.mozEnabled")}} {{gecko_minversion_inline("12.0")}}
+
Booleano. Estableciendo su valor a false desactivará el dispositivo de pantalla.
+
{{domxref("Screen.mozBrightness")}} {{gecko_minversion_inline("12.0")}}
+
Controla el brillo del dispositivo de pantalla. Espera un valor doble-precisión entre 0 y 1.0.
+
+ +

Manejador de eventos

+ +
+
{{domxref("Screen.onorientationchange")}}
+
Un manejador para los eventos {{event("orientationchange")}}.
+
+ +

Métodos

+ +
+
{{domxref("Screen.lockOrientation")}}
+
Bloquea la orientación de pantalla (sólo funciona en pantalla completa o para apps instaladas)
+
{{domxref("Screen.unlockOrientation")}}
+
Desbloquea la orientación de pantalla (sólo funciona en pantalla completa o para apps instaladas)
+
+ +

Métodos heredados de {{domxref("EventTarget")}}

+ +

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+ +

Ejemplo

+ +
if (screen.pixelDepth < 8) {
+  // usa versión low-color de la página
+} else {
+  // usa versión regular, a todo color de la página
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{ SpecName('CSSOM View', '#the-screen-interface', 'Screen') }}{{ Spec2('CSSOM View') }}
diff --git a/files/es/web/api/selection/addrange/index.html b/files/es/web/api/selection/addrange/index.html new file mode 100644 index 0000000000..a684954e9c --- /dev/null +++ b/files/es/web/api/selection/addrange/index.html @@ -0,0 +1,46 @@ +--- +title: addRange +slug: Web/API/Selection/addRange +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/addRange +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Añade un objeto de rango a la selección.

+ +

Sintaxis

+ +
sel.addRange(
+range)
+
+ +

Parámetros

+ +
+
+ range +
+
Un objeto range que será añadido a la selección.
+
+ +

Ejemplos

+ +
 /* Seleccionar todos los elementos en NEGRITA en un documento HTML */
+ var strongs = document.getElementsByTagName("strong");
+ var s = window.getSelection();
+ if(s.rangeCount > 0) s.removeAllRanges();
+ for(var i = 0; i < strongs.length; i++) {
+  var range = document.createRange();
+  range.selectNode(strongs[i]);
+  s.addRange(range);
+ }
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/addRange", "it": "it/DOM/Selection/addRange", "pl": "pl/DOM/Selection/addRange" } ) }}

diff --git a/files/es/web/api/selection/anchornode/index.html b/files/es/web/api/selection/anchornode/index.html new file mode 100644 index 0000000000..dcb4b194b0 --- /dev/null +++ b/files/es/web/api/selection/anchornode/index.html @@ -0,0 +1,27 @@ +--- +title: anchorNode +slug: Web/API/Selection/anchorNode +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/anchorNode +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el nodo en el cual empieza la selección.

+ +

Sintaxis

+ +
sel.anchorNode
+
+ +

Notas

+ +

Un usuario puede hacer una selección de izquierda a derecha (en el orden del documento) o de derehca a izquierda (en el orden contrario del documento). El ancla es donde el usuario empezó la selección. Ésta puede ser visualizada manteniendo presionada la tecla Shift y presionando las flechas de movimiento del teclado. El ancla de la selección no se mueve, pero el foco de ésta (el otro "final" de la selección) sí se mueve.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/anchorNode", "it": "it/DOM/Selection/anchorNode", "pl": "pl/DOM/Selection/anchorNode" } ) }}

diff --git a/files/es/web/api/selection/anchoroffset/index.html b/files/es/web/api/selection/anchoroffset/index.html new file mode 100644 index 0000000000..e228803085 --- /dev/null +++ b/files/es/web/api/selection/anchoroffset/index.html @@ -0,0 +1,27 @@ +--- +title: anchorOffset +slug: Web/API/Selection/anchorOffset +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/anchorOffset +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el número de caracteres en que el ancla de la selección es colocada dentro de anchorNode.

+ +

Sintaxis

+ +
sel.anchorOffset
+
+ +

Notas

+ +

Este número está basado en cero. Si la selección empieza con el primer carácter en anchorNode, el número devuelto será 0.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/anchorOffset", "it": "it/DOM/Selection/anchorOffset", "pl": "pl/DOM/Selection/anchorOffset" } ) }}

diff --git a/files/es/web/api/selection/collapse/index.html b/files/es/web/api/selection/collapse/index.html new file mode 100644 index 0000000000..a0540265c3 --- /dev/null +++ b/files/es/web/api/selection/collapse/index.html @@ -0,0 +1,50 @@ +--- +title: collapse +slug: Web/API/Selection/collapse +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/collapse +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Pliega la selección a un simple punto. El documento no es modificado. Si el contenido es enfocado y editable, el cursor parpadeará ahí.

+ +

Sintaxis

+ +
sel.collapse(
+parentNode,
+offset);
+
+ +

Parámetros

+ +
+
+ parentNode +
+
La localización del cursor estará dentro de este nodo.
+
+ +
+
+ offset +
+
El cursor estará colocado éste número de caracteres desdel el comienzo del texto de + parentNode' + s text.
+
+ +

Ejemplos

+ +
/* Colocar el cursor al principio del cuerpo de un documento HTML. */
+var body = document.getElementsByTagName("body")[0];
+window.getSelection().collapse(body,0);
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/collapse", "it": "it/DOM/Selection/collapse", "pl": "pl/DOM/Selection/collapse" } ) }}

diff --git a/files/es/web/api/selection/collapsetoend/index.html b/files/es/web/api/selection/collapsetoend/index.html new file mode 100644 index 0000000000..f0f729b928 --- /dev/null +++ b/files/es/web/api/selection/collapsetoend/index.html @@ -0,0 +1,27 @@ +--- +title: collapseToEnd +slug: Web/API/Selection/collapseToEnd +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/collapseToEnd +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Traslada el ancla hasta el mismo punto del foco. El foco no se mueve. Si el contenido es enfocado y editable, el cursor parpadeará ahí.

+ +

Sintaxis

+ +
sel.collapseToEnd()
+
+ +

Parámetros

+ +

Ninguno.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/collapseToEnd", "it": "it/DOM/Selection/collapseToEnd", "pl": "pl/DOM/Selection/collapseToEnd" } ) }}

diff --git a/files/es/web/api/selection/collapsetostart/index.html b/files/es/web/api/selection/collapsetostart/index.html new file mode 100644 index 0000000000..ce04e7a985 --- /dev/null +++ b/files/es/web/api/selection/collapsetostart/index.html @@ -0,0 +1,29 @@ +--- +title: collapseToStart +slug: Web/API/Selection/collapseToStart +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/collapseToStart +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Traslada el foco de la selección al mismo punto que el ancla. El ancla no se mueve. Si el contenido es enfocado y editable, el cursor parpadeará ahí.

+ +

Sintaxis

+ +
sel.collapseToStart()
+
+ +

Parámetros

+ +

Ninguno.

+ +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/collapseToStart", "it": "it/DOM/Selection/collapseToStart", "pl": "pl/DOM/Selection/collapseToStart" } ) }}

diff --git a/files/es/web/api/selection/containsnode/index.html b/files/es/web/api/selection/containsnode/index.html new file mode 100644 index 0000000000..272c7e71af --- /dev/null +++ b/files/es/web/api/selection/containsnode/index.html @@ -0,0 +1,49 @@ +--- +title: containsNode +slug: Web/API/Selection/containsNode +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/containsNode +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Indica si tal nodo es parte de la selección.

+ +

Sintaxis

+ +
sel.containsNode(
+aNode,
+aPartlyContained)
+
+ +

Parámetros

+ +
+
+ aNode +
+
El nodo que está siendo vigilado por si es parte de la selección.
+
+ aPartlyContained +
+
Cuando da un valor + verdadero + , containsNode devuelve verdadero cuanbdo una parte del nodo es parte de la selección.
+
Cuando da un valor + falso + , containsNode solo devuelve verdadeor cuando el nodo completo es parte de la selección.
+
+ +

Ejemplos

+ +
 /* Checar si algo dentro del elemento cuerpo (etiquetas body) está seleccionado */
+ alert(window.getSelection().containsNode(document.body, true));
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/containsNode", "it": "it/DOM/Selection/containsNode", "pl": "pl/DOM/Selection/containsNode" } ) }}

diff --git a/files/es/web/api/selection/deletefromdocument/index.html b/files/es/web/api/selection/deletefromdocument/index.html new file mode 100644 index 0000000000..808461dba4 --- /dev/null +++ b/files/es/web/api/selection/deletefromdocument/index.html @@ -0,0 +1,31 @@ +--- +title: deleteFromDocument +slug: Web/API/Selection/deleteFromDocument +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/deleteFromDocument +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Elimina del documento el contenido de la selección.

+ +

Sintaxis

+ +
sel.deleteFromDocument()
+
+ +

Parámetros

+ +

Ninguno.

+ +

Ejemplos

+ +

Un usuario selecciona el texto (imaginario) "jos tienen do" del texto "Los conejos tienen dos orejas." en una página web. Después el usuario da click en un botón que ejecuta la acción cortar de JavaScript window.getSelection().deleteFromDocument(). El texto del documento quedaría como "Los cones orejas."

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/deleteFromDocument", "it": "it/DOM/Selection/deleteFromDocument", "pl": "pl/DOM/Selection/deleteFromDocument" } ) }}

diff --git a/files/es/web/api/selection/extend/index.html b/files/es/web/api/selection/extend/index.html new file mode 100644 index 0000000000..d4c0315631 --- /dev/null +++ b/files/es/web/api/selection/extend/index.html @@ -0,0 +1,41 @@ +--- +title: extend +slug: Web/API/Selection/extend +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/extend +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Traslada el foco de la selección a un punto especificado. El ancla de la selección no se mueve. La selección será desde el ancla hasta el nuevo focus regardless of direction.

+ +

Sintaxis

+ +
sel.extend(
+parentNode,
+offset)
+
+ +

Parámetros

+ +
+
+ parentNode +
+
El nodo dentro del cual el foco será movido.
+
+ +
+
+ offset +
+
El número de caracteres que habrá desde el principio del texto + parentNode + hasta donde el foco se colocará.
+
+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/extend", "it": "it/DOM/Selection/extend", "pl": "pl/DOM/Selection/extend" } ) }}

diff --git a/files/es/web/api/selection/focusnode/index.html b/files/es/web/api/selection/focusnode/index.html new file mode 100644 index 0000000000..6ccaae09fe --- /dev/null +++ b/files/es/web/api/selection/focusnode/index.html @@ -0,0 +1,25 @@ +--- +title: focusNode +slug: Web/API/Selection/focusNode +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/focusNode +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el nudo en el cual acaba la selección.

+ +

Sintaxis

+ +
sel.focusNode
+
+ +

Notas

+ +

Un usuario puede hacer una selección de izquierda a derecha (en el orden del documento) o de derehca a izquierda (en el orden contrario del documento). El foco es donde el usuario terminó la selección. Éste puede ser visualizado manteniendo presionada la tecla Shift y presionando las flechas de movimiento del teclado para modificar la selección. El foco de la selección se mueve, pero el ancla de ésta (el otro final de la selección) no se mueve.

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/focusNode", "it": "it/DOM/Selection/focusNode", "pl": "pl/DOM/Selection/focusNode" } ) }}

diff --git a/files/es/web/api/selection/focusoffset/index.html b/files/es/web/api/selection/focusoffset/index.html new file mode 100644 index 0000000000..88f525f887 --- /dev/null +++ b/files/es/web/api/selection/focusoffset/index.html @@ -0,0 +1,27 @@ +--- +title: focusOffset +slug: Web/API/Selection/focusOffset +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/focusOffset +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el número de caracteres en que el foco de la selección es colocado dentro de focusNode.

+ +

Sintaxis

+ +
sel.focusOffset
+
+ +

Notas

+ +

Este número está basado en cero. Si la selección termina con el primer carácter en focusNode, el número devuelto será 0.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/focusOffset", "it": "it/DOM/Selection/focusOffset", "pl": "pl/DOM/Selection/focusOffset" } ) }}

diff --git a/files/es/web/api/selection/getrangeat/index.html b/files/es/web/api/selection/getrangeat/index.html new file mode 100644 index 0000000000..db0505dd77 --- /dev/null +++ b/files/es/web/api/selection/getrangeat/index.html @@ -0,0 +1,49 @@ +--- +title: getRangeAt +slug: Web/API/Selection/getRangeAt +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/getRangeAt +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve un objeto de rango representando uno de los rangos seleccionados.

+ +

Sintaxis

+ +
range =
+sel.getRangeAt(
+index)
+
+ +

Parámetros

+ +
+
+ range +
+
El objeto range (rango) que será devuelto.
+
+ +
+
+ index +
+
El exponente (basado en cero) del rango a devolver. Un número negativo o un número mayor o igual a rangeCount provocará un error.
+
+ +

Ejemplos

+ +
ranges = [];
+sel = window.getSelection();
+for(var i = 0; i < sel.rangeCount; i++) {
+ ranges[i] = sel.getRangeAt(i);
+}
+/* Cada artículo en el array de rangos ahora es
+ * un objeto rango representando uno de los
+ * rangos en la selección */
+
+ +

{{ languages( { "en": "en/DOM/Selection/getRangeAt", "pl": "pl/DOM/Selection/getRangeAt" } ) }}

diff --git a/files/es/web/api/selection/index.html b/files/es/web/api/selection/index.html new file mode 100644 index 0000000000..d267e3b16b --- /dev/null +++ b/files/es/web/api/selection/index.html @@ -0,0 +1,105 @@ +--- +title: Selection +slug: Web/API/Selection +tags: + - DOM + - Todas_las_Categorías +translation_of: Web/API/Selection +--- +

{{ ApiRef("DOM") }}

+ +

Introducción

+ +

Selección es la clase de objeto devuelto por window.getSelection() y otros métodos.

+ +

Un objeto de selección representa los rangos que el usuario ha seleccionado. Suele llevar un sólo rango, accesado como sigue:

+ +
range = sel.getRangeAt(0);
+
+ +

Llamar al método toString() devuelve el texto contenido en la selección, ej:

+ +
selObj = window.getSelection();
+window.alert(selObj.toString());
+
+ +

 

+ +

Glosario

+ +

Otros términos claves usados en esta parte.

+ +
+
anchor
+
El ancla de una selección es el punto inicial de ésta. Cuando se hace una selección con el ratón, el ancla es el punto donde se presionó por primera vez el botón del ratón. Cuando el usuario mueve la selección utilizando el ratón o el teclado, el ancla no se mueve.
+
focus
+
El foco de una selección es el punto último de ésta. Cuando se hace la selección con el ratón, el foco es el punto donde se suelta el botón del ratón. Cuando el usuario mueve la selección utilizando el "mouse" o el teclado, el foco es el final de la selección que el usuario está moviendo.
+
range
+
Un rango es una parte contigua de un documento. Un rango puede contener un nodo entero así como porciones de nodos, por ejemplo una parte de un nodo de texto. Normalmente un usuario seleccionará únicamente un solo rango a la vez, pero también le es posible seleccionar múltiples rangos (por ejemplo, utilizando la tecla controlCtrl ). Un rango puede ser recuperado de una selección como un objeto de rango. Los objetos de rango también pueden ser creados vía el DOM y programadamente adheridos o removidos de una selección.
+
+ +

Propiedades

+ +
+
anchorNode
+
Devuelve el nodo en el cual empieza la selección.
+
anchorOffset
+
Devuelve el número de caracteres en que el ancla de la selección es colocada dentro de anchorNode.
+
focusNode
+
Devuelve el nodo en el cual acaba la selección.
+
focusOffset
+
Devuelve el número de caracteres en que el foco de la selección es colocado dentro de focusNode.
+
isCollapsed
+
Devuelve un valor boleano verdadero si los puntos de inicio y fin de la selección están en la misma posición.
+
rangeCount
+
Devuelve el número de los rangos que hay en la selección.
+
+ +

Métodos

+ +
+
getRangeAt
+
Devuelve un objeto de rango representando uno de los rangos seleccionados.
+
collapse
+
Pliega la selección a un simple punto.
+
extend
+
Traslada el foco de la selección a un punto especificado.
+
collapseToStart
+
Traslada el foco de la selección al mismo punto que el ancla.
+
collapseToEnd
+
Traslada el ancla hasta el mismo punto del foco. El foco no se mueve.
+
selectAllChildren
+
Añadirá todos los "hijos" del nodo especificado a la selección.
+
addRange
+
Añade un objeto de rango a la selección.
+
removeRange
+
Quita un rango de la selección.
+
removeAllRanges
+
Quita todos los rangos de la selección.
+
deleteFromDocument
+
Elimina del documento el contenido de la selección.
+
selectionLanguageChange
+
NO IMPLEMENTADA, Cambia la direccion de la seleccion de Izquierda a Derecha a Derecha a Izquierda
+
toString
+
Devuelve una cadena de caracteres (texto), la cual es representada por el objeto de selección, es decir, el texto seleccionado.
+
containsNode
+
Indica si tal nodo es parte de la selección.
+
+ +

Ver también

+ +

window.getSelection, Rango

+ +

Enlaces externos

+ + + +

 

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection", "fr": "fr/DOM/selection", "it": "it/DOM/Selection", "ja": "ja/DOM/selection", "pl": "pl/DOM/Selection" } ) }}

diff --git a/files/es/web/api/selection/iscollapsed/index.html b/files/es/web/api/selection/iscollapsed/index.html new file mode 100644 index 0000000000..230c9f147d --- /dev/null +++ b/files/es/web/api/selection/iscollapsed/index.html @@ -0,0 +1,25 @@ +--- +title: isCollapsed +slug: Web/API/Selection/isCollapsed +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/isCollapsed +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve un valor boleano verdadero si los puntos de inicio y fin de la selección están en la misma posición.

+ +

Sintaxis

+ +
sel.isCollapsed
+
+ +

Notas

+ +

Incluso hasta una selección colapsada/plegada puede tener un rangeCount mayor que 0. sel.getRangeAt(0) puede retornar un rango que también esté colapsado/plegado.

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/isCollapsed", "it": "it/DOM/Selection/isCollapsed", "pl": "pl/DOM/Selection/isCollapsed" } ) }}

diff --git a/files/es/web/api/selection/rangecount/index.html b/files/es/web/api/selection/rangecount/index.html new file mode 100644 index 0000000000..fb39e6be07 --- /dev/null +++ b/files/es/web/api/selection/rangecount/index.html @@ -0,0 +1,28 @@ +--- +title: rangeCount +slug: Web/API/Selection/rangeCount +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/rangeCount +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve el número de los rangos que hay en la selección.

+ +

Sintaxis

+ +
sel.rangeCount
+
+ +

Notas

+ +

Antes de que el usuario haya hecho + click + en una página recién cargada, el rangeCount es 0. Un usuario normalmente puede seleccionar un rango a la vez, entonces el rangeCount usualmente será 1. El + + scripting + puede usarse para hacer que la selección contenga más de 1 rango.

+ +

{{ languages( { "en": "en/DOM/Selection/rangeCount", "it": "it/DOM/Selection/rangeCount", "pl": "pl/DOM/Selection/rangeCount" } ) }}

diff --git a/files/es/web/api/selection/removeallranges/index.html b/files/es/web/api/selection/removeallranges/index.html new file mode 100644 index 0000000000..5c8ad3f311 --- /dev/null +++ b/files/es/web/api/selection/removeallranges/index.html @@ -0,0 +1,27 @@ +--- +title: removeAllRanges +slug: Web/API/Selection/removeAllRanges +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/removeAllRanges +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Quita todos los rangos de la selección, dejando las propiedades anchorNode y focusNode con un valor null (nulo) y dejando nada seleccionado.

+ +

Sintaxis

+ +
sel.removeAllRanges();
+
+ +

Parámetros

+ +

Ninguno.

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/removeAllRanges", "it": "it/DOM/Selection/removeAllRanges", "pl": "pl/DOM/Selection/removeAllRanges" } ) }}

diff --git a/files/es/web/api/selection/removerange/index.html b/files/es/web/api/selection/removerange/index.html new file mode 100644 index 0000000000..fa617c49b9 --- /dev/null +++ b/files/es/web/api/selection/removerange/index.html @@ -0,0 +1,45 @@ +--- +title: removeRange +slug: Web/API/Selection/removeRange +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/removeRange +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Quita un rango de la selección.

+ +

Sintaxis

+ +
sel.removeRange(
+range)
+
+ +

Parámetros

+ +
+
+ range +
+
Un objeto rango que será eliminado de la selección.
+
+ +

Ejemplos

+ +
/* Programadamente, mas de un rango puede ser seleccionado.
+ * Esto eliminará todos los rangos excepto el primero. */
+s = window.getSelection();
+if(s.rangeCount > 1) {
+ for(var i = 1; i < s.rangeCount; i++) {
+  s.removeRange(s.getRangeAt(i));
+ }
+}
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/removeRange", "it": "it/DOM/Selection/removeRange", "pl": "pl/DOM/Selection/removeRange" } ) }}

diff --git a/files/es/web/api/selection/selectallchildren/index.html b/files/es/web/api/selection/selectallchildren/index.html new file mode 100644 index 0000000000..5f824dc200 --- /dev/null +++ b/files/es/web/api/selection/selectallchildren/index.html @@ -0,0 +1,45 @@ +--- +title: selectAllChildren +slug: Web/API/Selection/selectAllChildren +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/selectAllChildren +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Añadirá todos los "hijos" del nodo especificado a la selección. La selección previa se pierde.

+ +

Sintaxis

+ +
sel.selectAllChildren(
+parentNode)
+
+ +

Parámetros

+ +
+
+ parentNode +
+
Todos los "hijos" de + parentNode + serán seleccionados. El mismo + + parentNode + no es parte de la selección.
+
+ +

Ejemplos

+ +
footer = document.getElementById("footer");
+window.getSelection().selectAllChildren(footer);
+/* Todo el contendio del pie de página ahora está seleccionado */
+
+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/selectAllChildren", "it": "it/DOM/Selection/selectAllChildren", "pl": "pl/DOM/Selection/selectAllChildren" } ) }}

diff --git a/files/es/web/api/selection/tostring/index.html b/files/es/web/api/selection/tostring/index.html new file mode 100644 index 0000000000..0a70de979b --- /dev/null +++ b/files/es/web/api/selection/tostring/index.html @@ -0,0 +1,48 @@ +--- +title: toString +slug: Web/API/Selection/toString +tags: + - páginas_a_traducir +translation_of: Web/API/Selection/toString +--- +

{{ ApiRef("DOM") }}

+ +

Resumen

+ +

Devuelve una cadena de caracteres (texto), la cual es representada por el objeto de selección, es decir, el texto seleccionado.

+ +

Sintaxis

+ +
string =
+sel.toString()
+
+ + + +

Parámetros

+ +

Ninguno.

+ +

Descripción

+ +

Este método devuelve el texto seleccionado.

+ +

En JavaScript, este método es llamado automáticamente cuando una función, a la cual es pasado como parámetro el objeto de selección, requiere una cadena de caracteres (texto):

+ +
alert(window.getSelection()) // Lo que se llama.
+alert(window.getSelection().toString())  // Lo que está siendo efectivamente llamado.
+
+ +

Ver también

+ + + +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/Selection/toString", "fr": "fr/DOM/Selection/toString", "it": "it/DOM/Selection/toString", "pl": "pl/DOM/Selection/toString" } ) }}

diff --git a/files/es/web/api/service_worker_api/index.html b/files/es/web/api/service_worker_api/index.html new file mode 100644 index 0000000000..8b0b05e252 --- /dev/null +++ b/files/es/web/api/service_worker_api/index.html @@ -0,0 +1,311 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Landing + - NeedsTranslation + - Offline + - Overview + - Reference + - Service Workers + - TopicStub + - Workers +translation_of: Web/API/Service_Worker_API +--- +
+

{{ServiceWorkerSidebar}}

+ +

Los Service workers actúan esencialmente como proxy servers asentados entre las aplicaciones web, el navegador y la red (cuando está accesible). Están destinados, entre otras cosas, a permitir la creación de experiencias offline efectivas, interceptando peticiones de red y realizando la acción apropiada si la conexión de red está disponible y hay disponibles contenidos actualizados en el servidor. También permitirán el acceso a notificaciones tipo push y APIs de  sincronización en segundo plano.

+
+ +

Conceptos y uso de Service worker

+ +

Un service worker es un worker manejado por eventos registrado para una fuente y una ruta. Consiste en un fichero JavaScript que controla la página web (o el sitio) con el que está asociado, interceptando y modificando la navegación y las peticiones de recursos, y cacheando los recursos de manera muy granular para ofrecer un control completo sobre cómo la aplicación debe comportarse en ciertas situaciones (la mas obvia es cuando la red no está disponible).

+ +

Un service worker se ejecuta en un contexto worker: por lo tanto no tiene acceso al DOM, y se ejecuta en un hilo distinto al JavaScript principal de la aplicación, de manera que no es bloqueante. Está diseñado para ser completamente asíncrono, por lo que APIs como el XHR asíncrono y localStorage no se pueden usar dentro de un service worker.

+ +

Los service workers solo funcionan sobre HTTPS, por razones de seguridad. Modificar las peticiones de red en abierto permitiría ataques man in the middle realmente peligrosos. En Firefox, las APIs de service worker se ocultan y no pueden ser empleadas cuando el usuario está en modo de navegación en privado.

+ +
+

Nota: Los Service Workers mejoran los intentos anteriores en este área tal como AppCache puesto que no hacen suposiciones sobre qué se está intentando hacer para luego tener que cortar cuando las suposiciones no son correctas; hay control granular sobre todos los aspectos.

+
+ +
+

Nota: Los Service workers hace un uso intensivo de las promesas, por lo que generalmente esperarán a que lleguen las respuestasas correspondientes, tras lo cual responderán con una acción de éxito o de fracaso. La arquitectura de promesas es ideal en este caso.

+
+ +

Registro

+ +

Un service worker se registra primero mediante el método {{domxref("ServiceWorkerContainer.register()")}}. Si ha habido éxito, el service worker se descargará al cliente e intentará la instalación/activación (ver más abajo) de las URLs accedidas por el usuario dentro de todo su origen de datos, o dentro de algún subconjunto especificado por el autor.

+ +

Descarga, instalación y activación

+ +

En este punto, su service worker observará el siguiente ciclo de vida:

+ +
    +
  1. Descarga
    2. +
  2. Instalación
    3. +
  3. Activación
    4. +
+ +

El service worker se descaga inmediatamente cuando un usuario accede por primera vez a un sitio controlado por el mismo.

+ +

Después de esto se descarga cada 24 horas aproximadamente. Se puede descargar con más frecuencia, pero debe ser descargado cada 24 horas para prevenir que una mala programación sea molesta durante mucho tiempo.

+ +

La instalación se realiza cuando el fichero descargado es nuevo, es decir, diferente a otro service worker existente (comparado byte a byte), o si es el primero descargado para esta página/sitio.

+ +

Si es la primera vez que el service worker está disponible se intenta la instalación, y tras una instalación satisfactoria se activa.

+ +

Si ya existe un service worker disponible la nueva versión se instala en segundo plano, pero no se activa -en ese momento se llama worker in waiting. Sólo se activa cuando ya no hay más páginas cargadas que utilicen el antiguo service worker. En cuanto no hay más páginas de este estilo cargadas, el nuevo service worker se activa (pasando a ser el active worker). La activación se puede realizar antes mediante {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} y las páginas existentes se pueden llamar por el active worker usando {{domxref("Clients.claim()")}}.

+ +

Presta atención a {{domxref("InstallEvent")}}; es habitual preparar tu service worker para usarlo cuando se dispara, por ejemplo creando una caché que utilice la API incorporada de almacenamiento, y colocando los contenidos dentro de ella para poder usarlos con la aplicación offline.

+ +

También hay un evento activate. El momento en el que este evento se activa es, en general, un bueno momento para limpiar viejas cachés y demás cosas asociadas con la versión previa de tu service worker.

+ +

Tu service worker puede responder a las peticiones usando el evento {{domxref("FetchEvent")}}. Puedes modificar la respuesta a estas peticiones de la manera que quieras, usando el método {{domxref("FetchEvent.respondWith") }}.

+ +
+

Nota: Dado que oninstall/onactivate puede tardar un poco en completarse, la especificación de service worker spec provee un método waitUntil que, cuando es llamado oninstall o onactivate, pasa una promesa. Los eventos funcionales no se envían al service worker hasta que la promesa se resuelve con éxito.

+
+ +

Para un tutorial completo que muestra cómo construir tu primer ejemplo básico, lee Using Service Workers.

+ +

Otras posibilidades

+ +

Los service workers también pueden usarse para cosas como:

+ + + +

En el futuro, los service workers podrán hacer una cantidad de cosas útiles para la plataforma web que estarán muy próximos a las aplicaciones nativas. Interesantement, otras especificacions pueden comenzar y lo harán a hacer uso del contexto de service worker, por ejemplo:

+ + + +

Interfaces

+ +
+
{{domxref("Cache") }}
+
Representa el almacenamiento para un par de objetos {{domxref("Request")}} / {{domxref("Response")}} que son cacheados como parte del ciclo de vida de {{domxref("ServiceWorker")}}.
+
{{domxref("CacheStorage") }}
+
Representa el almacenamiento de objetos {{domxref("Cache")}}. Proporciona un directorio maestro de todos los nombres de caché a los que puede acceder un {{domxref("ServiceWorker")}} y mantiene un mapa de nombres (strings) correspondientes a objetos {{domxref("Cache")}}.
+
{{domxref("Client") }}
+
Representa el ámbito de un cliente service worker. Un cliente service worker es bien un documento en un contexto de navador, bien un {{domxref("SharedWorker")}}, que está controlado por un worker activo.
+
{{domxref("Clients") }}
+
Representa un contenedor para una lista de objetos {{domxref("Client")}}; principal vía de acceso de los clientes service worker al origen actual.
+
{{domxref("ExtendableEvent") }}
+
Extiende el tiempo de vida de los eventosinstall y activate lanzados en {{domxref("ServiceWorkerGlobalScope")}} como parte del ciclo de vida del service worker. Esto asegura que cualquier evento funcional (como {{domxref("FetchEvent")}}) no se despachan al {{domxref("ServiceWorker")}} hasta que actualiza los esquemas de base de datos, borra entradas de caché antiguas, etc.
+
{{domxref("ExtendableMessageEvent") }}
+
Es el objeto evento de un {{event("message_(ServiceWorker)","message")}} lanzado en un service worker (cuando se recibe un mensaje en el {{domxref("ServiceWorkerGlobalScope")}} desde otro contexto) — extiende el tiempo de vida de tales eventos.
+
{{domxref("FetchEvent") }}
+
Parametro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.onfetch")}}, FetchEvent representa una acción de consulta (fetch) despachada en el {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}. Contiene información sobre la petición y respuesta resultante, y proporciona el método {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}, que nos permite proporcionar una respuesta arbitraria a la página controlada.
+
{{domxref("InstallEvent") }}
+
Parámetro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}}, el interfazInstallEvent representa una acctión de instalación realizada en el {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}. Como hijo de {{domxref("ExtendableEvent")}}, asegura que los eventos funcionales como {{domxref("FetchEvent")}} no se llevan a cabo durante la instalación. 
+
{{domxref("Navigator.serviceWorker") }}
+
Devuelve un objeto {{domxref("ServiceWorkerContainer")}}, que proporciona acceso al registro, eliminación, actualización y comunicación con los objetos {{domxref("ServiceWorker")}} para el documento asociado.
+
{{domxref("NotificationEvent") }}
+
Parámetro pasado en el controlador {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, el interfaz NotificationEvent representa una notificación del evento click ejecutado en  {{domxref("ServiceWorkerGlobalScope")}} de un {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorker") }}
+
Representa un service worker. Multiples contextos de navegación (e.g. pages, workers, etc.) se pueden asociar con el mismo objeto ServiceWorker.
+
{{domxref("ServiceWorkerContainer") }}
+
Proporciona un objeto que representa el service worker como una unidad en el ecosistema de red, incluyendo servicios para registrar, eliminar y actualizar los service workers, y acceder al estado de los service workers y sus registros.
+
{{domxref("ServiceWorkerGlobalScope") }}
+
Representa el contexto global de ejecución de un service worker.
+
{{domxref("ServiceWorkerMessageEvent")}} {{deprecated_inline}}
+
Representa un mensaje envaido a un{{domxref("ServiceWorkerGlobalScope")}}. Observese que este interfaz está considerado obsoleto en navegadores modernos. Los mensajes de service worker no podrán utilizar el interfaz {{domxref("MessageEvent")}}, por consistencia con otras características de mensajería web.
+
{{domxref("ServiceWorkerRegistration") }}
+
Representa un registro service worker.
+
{{domxref("SyncEvent")}} {{non-standard_inline}}
+
+

El interfaz SyncEvent representa una acción sync ejecutada en el {{domxref("ServiceWorkerGlobalScope")}} de un ServiceWorker. 

+
+
{{domxref("SyncManager")}} {{non-standard_inline}}
+
Proporciona un interfaz para registrar y listar registros sync.
+
{{domxref("WindowClient") }}
+
Representa el ámbito de un cliente service worker que es un documento en un contexto de navegador, controlado por un worker activo. Es un tipo especial de objeto {{domxref("Client")}}, con algunos métodos y propiedades adicionales disponibles.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +
{{ CompatibilityTable() }}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoDesktop("44.0") }}[2]{{ CompatNo() }}24{{ CompatNo() }}
install/activate events{{ CompatChrome(40.0) }}{{CompatNo}}[1]{{ CompatGeckoDesktop("44.0") }}[2]{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoDesktop("44.0") }}[2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache +

{{CompatChrome(42.0)}}

+ 		{{CompatNo}}[1]{{ CompatGeckoDesktop("39.0") }}[2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
{{domxref("ServiceWorkerMessageEvent")}} deprecated in favour of {{domxref("MessageEvent")}} +

{{CompatChrome(57.0)}}

+ 		{{ CompatNo() }}{{ CompatGeckoDesktop("55.0") }}[2]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoMobile("44.0") }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
 install/activate events{{ CompatNo() }}{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoMobile("44.0") }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{ CompatNo() }}{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoMobile("44.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache{{ CompatNo() }}{{CompatChrome(40.0)}}{{CompatNo}}[1]{{ CompatGeckoMobile("39.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
{{domxref("ServiceWorkerMessageEvent")}} deprecated in favour of {{domxref("MessageEvent")}}{{ CompatNo() }} +

{{CompatChrome(57.0)}}

+ 		{{ CompatNo() }}{{ CompatGeckoMobile("55.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] Esta característica aún no está soportada, aunque está  ya en desarrollo.

+ +

[2] Service workers (y Push) han sido inhabilitados en Firefox 45 & 52 Extended Support Releases (ESR.)

+ +

Ver también

+ + diff --git a/files/es/web/api/service_worker_api/using_service_workers/index.html b/files/es/web/api/service_worker_api/using_service_workers/index.html new file mode 100644 index 0000000000..d687cddd19 --- /dev/null +++ b/files/es/web/api/service_worker_api/using_service_workers/index.html @@ -0,0 +1,526 @@ +--- +title: Usando Service Workers +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - Guía + - básico +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +
+

Este articulo provee información sobre cómo empezar con los service workers, incluyendo su arquitectura básica, el registro de un service worker, el proceso de instalación y activación de un nuevo service worker, cómo actualizar un service worker, controlar su cache y respuestas personalizadas, todo esto en el contexto de una simple aplicación con la capacidad de trabajar offline (sin internet).

+
+ +

La premisa de los service workers

+ +

Un problema primordial que los usuarios de la web han sufrido durante años es la pérdida de conectividad. La mejor aplicación web en el mundo ofrecerá una experiencia de usuario terrible si simplemente no se puede utilizar. Han habido varios intentos de crear tecnologías para resolver este problema, como muestra nuestra página offline, y algunos problemas han sido solucionados. Pero el problema primordial es que todavía no hay un mecanismo de control eficiente para el almacenamiento en caché de activos y solicitudes de red personalizadas.

+ +

El mecanismo previamente utilizado -el AppCache- parecía una buena idea porque te permitía especificar los recursos que almacenarías en caché de una forma realmente fácil. Sin embargo, AppCache presuponía lo que el desarrollador trataba de crear y fallaba demasiado cuando la aplicación no se comportaba exactamente según las suposiciones iniciales. Veáse el artículo de Jake Archibald Application Cache is a Douchebag para más información.

+ +
+

Nota: A partir de Firefox 44, cuando se usa AppCache para proveer soporte offline a una página se muestra un mensaje de advertencia en la consola aconsejandole al desarrollador para que  use Service workers en su lugar ({{bug("1204581")}}.)

+
+ +

Los Service workers deberían finalmente solucionar estos inconvenientes. Aunque la sintaxis de Service Worker es más compleja que la de AppCache, presenta la ventaja de que puede usar JavaScript para controlar los recursos de cache con gran detalle, permitiendo gestionar los problemas asociados a  AppCache, y muchos más.

+ +

Al utilizar un Service Worker, puedes configurar fácilmente una aplicación para que utilice primero los recursos en caché antes de obtener alguna información de la red (Comunmente conocido como Offline First) lo que proporciona la experiencia de uso predeterminada incluso cuando se está offline. Este paradigma se usa en aplicaciones nativas, y es una de las principales razones por las que a menudo éstas se eligen por encima de las aplicaciones web.

+ +

Setting up to play with service workers

+ +

Many service workers features are now enabled by default in newer versions of supporting browsers. If however you find that demo code is not working in your installed versions, you might need to enable a pref:

+ + + +

You’ll also need to serve your code via HTTPS — Service workers are restricted to running across HTTPS for security reasons. GitHub is therefore a good place to host experiments, as it supports HTTPS. In order to facilitate local development, localhost is considered a secure origin by browsers as well.

+ +

Basic architecture

+ +

With service workers, the following steps are generally observed for basic set up:

+ +
    +
  1. The service worker URL is fetched and registered via {{domxref("serviceWorkerContainer.register()")}}.
    2. +
  2. If successful, the service worker is executed in a {{domxref("ServiceWorkerGlobalScope") }}; this is basically a special kind of worker context, running off the main script execution thread, with no DOM access.
    3. +
  3. The service worker is now ready to process events.
    4. +
  4. Installation of the worker is attempted when service worker-controlled pages are accessed subsequently. An Install event is always the first one sent to a service worker (this can be used to start the process of populating an IndexedDB, and caching site assets). This is really the same kind of procedure as installing a native or Firefox OS app — making everything available for use offline.
    5. +
  5. When the oninstall handler completes, the service worker is considered installed.
    6. +
  6. Next is activation. When the service worker is installed, it then receives an activate event. The primary use of onactivate is for cleanup of resources used in previous versions of a Service worker script.
    7. +
  7. The Service worker will now control pages, but only those opened after the register() is successful. i.e. a document starts life with or without a Service worker and maintains that for its lifetime. So documents will have to be reloaded to actually be controlled.
    8. +
+ +

+ +

The below graphic shows a summary of the available service worker events:

+ +

install, activate, message, fetch, sync, push

+ +

Promises

+ +

Las promesas (Promises) son un gran mecanismo para ejecutar operaciones asíncronas,  con éxito dependiente el uno del otro. Esto es fundamental para la forma en que trabajan los service workers.
+
+ Promises can do a great many things, but for now, all you need to know is that if something returns a promise, you can attach .then() to the end and include callbacks inside it for success, failure, etc., or you can insert .catch() on the end if you want to include a failure callback.

+ +

Let’s compare a traditional synchronous callback structure to its asynchronous promise equivalent.

+ +

sync

+ +
try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}
+ +

async

+ +
myFunction().then(function(value) {
+  console.log(value);
+}).catch(function(err) {
+  console.log(err);
+});
+ +

In the first example, we have to wait for myFunction() to run and return value before any more of the code can execute. In the second example, myFunction() returns a promise for value, then the rest of the code can carry on running. When the promise resolves, the code inside then will be run, asynchronously.
+
+ Now for a real example — what if we wanted to load images dynamically, but we wanted to make sure the images were loaded before we tried to display them? This is a standard thing to want to do, but it can be a bit of a pain. We can use .onload to only display the image after it’s loaded, but what about events that start happening before we start listening to them? We could try to work around this using .complete, but it’s still not foolproof, and what about multiple images? And, ummm, it’s still synchronous, so blocks the main thread.
+
+ Instead, we could build our own promise to handle this kind of case. (See our Promises test example for the source code, or look at it running live.)

+ +

{{note("A real service worker implementation would use caching and onfetch rather than the deprecated XMLHttpRequest API. Those features are not used here so that you can focus on understanding Promises.")}}

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Image didn\'t load successfully; error code:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('There was a network error.'));
+    };
+
+    request.send();
+  });
+}
+ +

We return a new promise using the Promise() constructor, which takes as an argument a callback function with resolve and reject parameters. Somewhere in the function, we need to define what happens for the promise to resolve successfully or be rejected — in this case return a 200 OK status or not — and then call resolve on success, or reject on failure. The rest of the contents of this function is fairly standard XHR stuff, so we won’t worry about that for now.

+ +

When we come to call the imgLoad() function, we call it with the url to the image we want to load, as we might expect, but the rest of the code is a little different:

+ +
var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});
+ +

On to the end of the function call, we chain the promise then() method, which contains two functions — the first one is executed when the promise successfully resolves, and the second is called when the promise is rejected. In the resolved case, we display the image inside myImage and append it to the body (it’s argument is the request.response contained inside the promise’s resolve method); in the rejected case we return an error to the console.

+ +

This all happens asynchronously.

+ +
+

Note: You can also chain promise calls together, for example:
+ myPromise().then(success, failure).then(success).catch(failure);

+
+ +
+

Note: You can find a lot more out about promises by reading Jake Archibald’s excellent JavaScript Promises: there and back again.

+
+ +

Service workers demo

+ +

To demonstrate just the very basics of registering and installing a service worker, we have created a simple demo called sw-test, which is a simple Star wars Lego image gallery. It uses a promise-powered function to read image data from a JSON object and load the images using Ajax, before displaying the images in a line down the page. We’ve kept things static and simple for now. It also registers, installs, and activates a service worker, and when more of the spec is supported by browsers it will cache all the files required so it will work offline!

+ +


+
+
+ You can see the source code on GitHub, and view the example live. The one bit we’ll call out here is the promise (see app.js lines 22-47), which is a modified version of what you read about above, in the Promises test demo. It is different in the following ways:

+ +
    +
  1. In the original, we only passed in a URL to an image we wanted to load. In this version, we pass in a JSON fragment containing all the data for a single image (see what they look like in image-list.js). This is because all the data for each promise resolve has to be passed in with the promise, as it is asynchronous. If you just passed in the url, and then tried to access the other items in the JSON separately when the for() loop is being iterated through later on, it wouldn’t work, as the promise wouldn’t resolve at the same time as the iterations are being done (that is a synchronous process.)
    2. +
  2. We actually resolve the promise with an array, as we want to make the loaded image blob available to the resolving function later on in the code, but also the image name, credits and alt text (see app.js lines 31-34). Promises will only resolve with a single argument, so if you want to resolve with multiple values, you need to use an array/object.
    3. +
  3. To access the resolved promise values, we then access this function as you’d then expect (see app.js lines 60-64). This may seem a bit odd at first, but this is the way promises work.
    4. +
+ +

Enter service workers

+ +

Now let’s get on to service workers!

+ +

Registering your worker

+ +

The first block of code in our app’s JavaScript file — app.js — is as follows. This is our entry point into using service workers.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', {scope: '/sw-test/'})
+  .then(function(reg) {
+    // registration worked
+    console.log('Registration succeeded. Scope is ' + reg.scope);
+  }).catch(function(error) {
+    // registration failed
+    console.log('Registration failed with ' + error);
+  });
+}
+ +
    +
  1. The outer block performs a feature detection test to make sure service workers are supported before trying to register one.
    2. +
  2. Next, we use the {{domxref("ServiceWorkerContainer.register()") }} function to register the service worker for this site, which is just a JavaScript file residing inside our app (note this is the file's URL relative to the origin, not the JS file that references it.)
    3. +
  3. The scope parameter is optional, and can be used to specify the subset of your content that you want the service worker to control. In this case, we have specified '/sw-test/', which means all content under the app's origin. If you leave it out, it will default to this value anyway, but we specified it here for illustration purposes.
    4. +
  4. The .then() promise function is used to chain a success case onto our promise structure.  When the promise resolves successfully, the code inside it executes.
    5. +
  5. Finally, we chain a .catch() function onto the end that will run if the promise is rejected.
    6. +
+ +

This registers a service worker, which runs in a worker context, and therefore has no DOM access. You then run code in the service worker outside of your normal pages to control their loading.
+
+ A single service worker can control many pages. Each time a page within your scope is loaded, the service worker is installed against that page and operates on it. Bear in mind therefore that you need to be careful with global variables in the service worker script: each page doesn’t get its own unique worker.

+ +
+

Note: Your service worker functions like a proxy server, allowing you to modify requests and responses, replace them with items from its own cache, and more.

+
+ +
+

Note: One great thing about service workers is that if you use feature detection like we’ve shown above, browsers that don’t support service workers can just use your app online in the normal expected fashion. Furthermore, if you use AppCache and SW on a page, browsers that don’t support SW but do support AppCache will use that, and browsers that support both will ignore the AppCache and let SW take over.

+
+ +

Why is my service worker failing to register?

+ +

This could be for the following reasons:

+ +
    +
  1. You are not running your application through HTTPS.
    2. +
  2. The path to your service worker file is not written correctly — it needs to be written relative to the origin, not your app’s root directory. In our example, the worker is at https://mdn.github.io/sw-test/sw.js, and the app’s root is https://mdn.github.io/sw-test/. But the path needs to be written as /sw-test/sw.js, not /sw.js.
    3. +
  3. The service worker being pointed to is on a different origin to that of your app. This is also not allowed.
    4. +
+ +

+ +

Also note:

+ + + +

Install and activate: populating your cache

+ +

After your service worker is registered, the browser will attempt to install then activate the service worker for your page/site.
+
+ The install event is fired when an install is successfully completed. The install event is generally used to populate your browser’s offline caching capabilities with the assets you need to run your app offline. To do this, we use Service Worker’s brand new storage API — {{domxref("cache")}} — a global on the service worker that allows us to store assets delivered by responses, and keyed by their requests. This API works in a similar way to the browser’s standard cache, but it is specific to your domain. It persists until you tell it not to — again, you have full control.

+ +
+

Note: The Cache API is not supported in every browser. (See the {{anch("Browser support")}} section for more information.) If you want to use this now, you could consider using a polyfill like the one available in Google's Topeka demo, or perhaps store your assets in IndexedDB.

+
+ +

Let’s start this section by looking at a code sample — this is the first block you’ll find in our service worker:

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +
    +
  1. Here we add an install event listener to the service worker (hence this), and then chain a {{domxref("ExtendableEvent.waitUntil()") }} method onto the event — this ensures that the service worker will not install until the code inside waitUntil() has successfully occurred.
    2. +
  2. Inside waitUntil() we use the caches.open() method to create a new cache called v1, which will be version 1 of our site resources cache. This returns a promise for a created cache; once resolved, we then call a function that calls addAll() on the created cache, which for its parameter takes an array of origin-relative URLs to all the resources you want to cache.
    3. +
  3. If the promise is rejected, the install fails, and the worker won’t do anything. This is ok, as you can fix your code and then try again the next time registration occurs.
    4. +
  4. After a successful installation, the service worker activates. This doesn’t have much of a distinct use the first time your service worker is installed/activated, but it means more when the service worker is updated (see the {{anch("Updating your service worker") }} section later on.)
    5. +
+ +
+

Note: localStorage works in a similar way to service worker cache, but it is synchronous, so not allowed in service workers.

+
+ +
+

Note: IndexedDB can be used inside a service worker for data storage if you require it.

+
+ +

Custom responses to requests

+ +

Now you’ve got your site assets cached, you need to tell service workers to do something with the cached content. This is easily done with the fetch event.

+ +

+ +

A fetch event fires every time any resource controlled by a service worker is fetched, which includes the documents inside the specified scope, and any resources referenced in those documents (for example if index.html makes a cross origin request to embed an image, that still goes through its service worker.)

+ +

You can attach a fetch event listener to the service worker, then call the respondWith() method on the event to hijack our HTTP responses and update them with your own magic.

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // magic goes here
+  );
+});
+ +

We could start by simply responding with the resource whose url matches that of the network request, in each case:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});
+ +

caches.match(event.request) allows us to match each resource requested from the network with the equivalent resource available in the cache, if there is a matching one available. The matching is done via url and vary headers, just like with normal HTTP requests.

+ +

Let’s look at a few other options we have when defining our magic (see our Fetch API documentation for more information about {{domxref("Request")}} and {{domxref("Response")}} objects.)

+ +
    +
  1. +

    The {{domxref("Response.Response","Response()")}} constructor allows you to create a custom response. In this case, we are just returning a simple text string:

    + + 
    new Response('Hello from your friendly neighbourhood service worker!');
    +
    2. +
  2. +

    This more complex Response below shows that you can optionally pass a set of headers in with your response, emulating standard HTTP response headers. Here we are just telling the browser what the content type of our synthetic response is:

    + + 
    new Response('<p>Hello from your friendly neighbourhood service worker!</p>', {
+  headers: { 'Content-Type': 'text/html' }
+});
    +
    3. +
  3. +

    If a match wasn’t found in the cache, you could tell the browser to simply {{domxref("GlobalFetch.fetch","fetch")}} the default network request for that resource, to get the new resource from the network if it is available:

    + + 
    fetch(event.request);
    +
    4. +
  4. +

    If a match wasn’t found in the cache, and the network isn’t available, you could just match the request with some kind of default fallback page as a response using {{domxref("CacheStorage.match","match()")}}, like this:

    + + 
    caches.match('/fallback.html');
    +
    5. +
  5. +

    You can retrieve a lot of information about each request by calling parameters of the {{domxref("Request")}} object returned by the {{domxref("FetchEvent")}}:

    + + 
    event.request.url
+event.request.method
+event.request.headers
+event.request.body
    +
    6. +
+ +

Recovering failed requests

+ +

So caches.match(event.request) is great when there is a match in the service worker cache, but what about cases when there isn’t a match? If we didn’t provide any kind of failure handling, our promise would resolve with undefined and we wouldn't get anything returned.

+ +

Fortunately service workers’ promise-based structure makes it trivial to provide further options towards success. We could do this:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(response) {
+      return response || fetch(event.request);
+    })
+  );
+});
+ +

If the resources isn't in the cache, it is requested from the network.

+ +

If we were being really clever, we would not only request the resource from the network; we would also save it into the cache so that later requests for that resource could be retrieved offline too! This would mean that if extra images were added to the Star Wars gallery, our app could automatically grab them and cache them. The following would do the trick:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Here we return the default network request with return fetch(event.request), which returns a promise. When this promise is resolved, we respond by running a function that grabs our cache using caches.open('v1'); this also returns a promise. When that promise resolves, cache.put() is used to add the resource to the cache. The resource is grabbed from event.request, and the response is then cloned with response.clone() and added to the cache. The clone is put in the cache, and the original response is returned to the browser to be given to the page that called it.

+ +

Cloning the response is necessary because request and response streams can only be read once.  In order to return the response to the browser and put it in the cache we have to clone it. So the original gets returned to the browser and the clone gets sent to the cache.  They are each read once.

+ +

The only trouble we have now is that if the request doesn’t match anything in the cache, and the network is not available, our request will still fail. Let’s provide a default fallback so that whatever happens, the user will at least get something:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+        });
+        return response;
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});
+ +

We have opted for this fallback image because the only updates that are likely to fail are new images, as everything else is depended on for installation in the install event listener we saw earlier.

+ +

Updating your service worker

+ +

If your service worker has previously been installed, but then a new version of the worker is available on refresh or page load, the new version is installed in the background, but not yet activated. It is only activated when there are no longer any pages loaded that are still using the old service worker. As soon as there are no more such pages still loaded, the new service worker activates.

+ +

You’ll want to update your install event listener in the new service worker to something like this (notice the new version number):

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+        …
+
+        // include other new resources for the new version...
+      ]);
+    })
+  );
+});
+ +

While this happens, the previous version is still responsible for fetches. The new version is installing in the background. We are calling the new cache v2, so the previous v1 cache isn't disturbed.

+ +

When no pages are using the current version, the new worker activates and becomes responsible for fetches.

+ +

Deleting old caches

+ +

You also get an activate event. This is a generally used to do stuff that would have broken the previous version while it was still running, for example getting rid of old caches. This is also useful for removing data that is no longer needed to avoid filling up too much disk space — each browser has a hard limit on the amount of cache storage that a given service worker can use. The browser does its best to manage disk space, but it may delete the Cache storage for an origin.  The browser will generally delete all of the data for an origin or none of the data for an origin.

+ +

Promises passed into waitUntil() will block other events until completion, so you can rest assured that your clean-up operation will have completed by the time you get your first fetch event on the new cache.

+ +
this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Developer tools

+ +

Chrome has chrome://inspect/#service-workers, which shows current service worker activity and storage on a device, and chrome://serviceworker-internals, which shows more detail and allows you to start/stop/debug the worker process. In the future they will have throttling/offline modes to simulate bad or non-existent connections, which will be a really good thing.

+ +

Firefox has also started to implement some useful tools related to service workers:

+ + + +
+

Note: You may serve your app from http://localhost (e.g. using me@localhost:/my/app$ python -m SimpleHTTPServer) for local development. See Security considerations

+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("33.0") }}[1]{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome(40.0)}}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{CompatNo}}{{ CompatVersionUnknown() }}{{CompatNo}}
+
+ +

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

+ +

See also

+ + diff --git a/files/es/web/api/serviceworkercontainer/index.html b/files/es/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..36eca36006 --- /dev/null +++ b/files/es/web/api/serviceworkercontainer/index.html @@ -0,0 +1,127 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

The ServiceWorkerContainer interface of the ServiceWorker API provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.

+ +

Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.

+ +

Properties

+ +
+
{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
+
Returns a {{domxref("ServiceWorker")}} object if its state is activated (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns null during a force-refresh request (Shift + refresh) or if there is no active worker.
+
+ +
+
{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
+
Provides a way of delaying code execution until a service worker is active. It returns a {{jsxref("Promise")}} that will never reject, and which waits indefinitely until the {{domxref("ServiceWorkerRegistration")}} associated with the current page has an {{domxref("ServiceWorkerRegistration.active")}} worker. Once that condition is met, it resolves with the {{domxref("ServiceWorkerRegistration")}}.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerContainer.oncontrollerchange")}}
+
Fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active","active")}} worker.
+
{{domxref("ServiceWorkerContainer.onerror")}}
+
Fired whenever an {{Event("error")}} event occurs in the associated service workers.
+
{{domxref("ServiceWorkerContainer.onmessage")}}
+
Fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)
+
+ +

Methods

+ +
+
{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
+
Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given scriptURL.
+
{{domxref("ServiceWorkerContainer.getRegistration()")}}
+
Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a Promise. 
+
{{domxref("ServiceWorkerContainer.getRegistrations()")}}
+
Returns all {{domxref("ServiceWorkerRegistration")}} objects associated with a ServiceWorkerContainer in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}} objects, it returns a Promise. 
+
+ +

Examples

+ +

The example below first checks to see if the browser supports service workers. If supported, the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.

+ +
if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+
+    // At this point, you can optionally do something
+    // with registration. See https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+
+  // Independent of the registration, let's also display
+  // information about whether the current page is controlled
+  // by an existing service worker, and when that
+  // controller changes.
+
+  // First, do a one-off check if there's currently a
+  // service worker in control.
+  if (navigator.serviceWorker.controller) {
+    console.log('This page is currently controlled by:', navigator.serviceWorker.controller);
+  }
+
+  // Then, register a handler to detect when a new or
+  // updated service worker takes control.
+  navigator.serviceWorker.oncontrollerchange = function() {
+    console.log('This page is now controlled by:', navigator.serviceWorker.controller);
+  };
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

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

+
+ +

See also

+ + diff --git a/files/es/web/api/serviceworkercontainer/register/index.html b/files/es/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..c5b1d3ed8a --- /dev/null +++ b/files/es/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,92 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +translation_of: Web/API/ServiceWorkerContainer/register +--- +
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+ +

El método register()de la interfaz {{domxref("ServiceWorkerContainer")}} crea o actualiza un {{domxref("ServiceWorkerRegistration")}} para un scriptURL. dado

+ +

Si tiene éxito, el registro de un "service worker" relaciona la URL del script proporcionada con un ámbito, que posteriormente se utiliza para la coincidencia de navegación. Puede llamar a este método incondicionalmente desde la página controlada. Es decir, no necesita verificar primero si hay un registro activo.

+ +

Existe una confusión frecuente en torno al significado y uso del alcance. Dado que un trabajador de servicio no puede tener un alcance más amplio que su propia ubicación, solo use la opción de ámbito cuando necesite un alcance que sea más estrecho que el predeterminado.

+ +

Sintaxis

+ +
ServiceWorkerContainer.register(scriptURL, options)
+  .then(function(ServiceWorkerRegistration) { ... });
+ +

Parámetros

+ +
+
scriptURL
+
La URL del script de trabajador de servicio.
+
options {{optional_inline}}
+
Un objeto que contiene opciones de registro. Las opciones disponibles actualmente son: +
    +
  • alcance: {{domxref("USVString")}} representa una URL que define el alcance de registro de un "service worker"; es decir, qué rango de URL puede controlar un "service worker". Esto es generalmente una URL relativa. El valor predeterminado es la URL que obtendría si resolviera './' utilizando la ubicación de la página web como base. No es, como se cree comúnmente, relativo a la ubicación del "service worker". Vea la sección de Ejemplos para más información sobre cómo funciona.
    • +
+
+
+ +

Valor retornado

+ +

A {{domxref("Promise")}} that resolves with a {{domxref("ServiceWorkerRegistration")}} object.

+ +

Ejemplos

+ +

The examples described here should be taken together to get a better understanding of how service workers scope applies to a page.

+ +

The following example uses the default value of scope (by omitting it). The service worker in this case will control example.com/index.html as well as pages underneath it, like example.com/product/description.html.

+ +
if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using the default scope.
+  navigator.serviceWorker.register('/sw.js').then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

The following code, if included in a page at the root of a site, would apply to exactly the same pages as the example above. Remember the scope, when included, uses the page's location as its base. Alternatively, if this code were included in a page at example.com/product/description.html, the scope of './' would mean that the service worker only applies to resources under example.com/product. If I needed to register a service worker on example.com/product/description.html that applied to all of example.com, I would leave off the scope as above.

+ +
if ('serviceWorker' in navigator) {
+  // Register a service worker hosted at the root of the
+  // site using a more restrictive scope.
+  navigator.serviceWorker.register('/sw.js', {scope: './'}).then(function(registration) {
+    console.log('Service worker registration succeeded:', registration);
+  }).catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.ServiceWorkerContainer.register")}}

+
diff --git a/files/es/web/api/serviceworkerregistration/index.html b/files/es/web/api/serviceworkerregistration/index.html new file mode 100644 index 0000000000..88f1c3da52 --- /dev/null +++ b/files/es/web/api/serviceworkerregistration/index.html @@ -0,0 +1,145 @@ +--- +title: ServiceWorkerRegistration +slug: Web/API/ServiceWorkerRegistration +tags: + - API + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - Service worker API + - ServiceWorkerRegistration + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerRegistration +--- +
+
{{SeeCompatTable}}{{APIRef("Service Workers API")}}
+
+ +

The ServiceWorkerRegistration interface of the ServiceWorker API represents the service worker registration. You register a service worker to control one or more pages that share the same origin.

+ +

The lifetime of a service worker registration is beyond that of the ServiceWorkerRegistration objects that represent them within the lifetime of their corresponding service worker clients. The browser maintains a persistent list of active ServiceWorkerRegistration objects.

+ +
+

Note: This feature is available in Web Workers.

+
+ +

Properties

+ +

Also implements properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.scope")}} {{readonlyinline}}
+
Returns a unique identifier for a service worker registration. This must be on the same origin as the document that registers the {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorkerRegistration.installing")}} {{readonlyinline}}
+
Returns a service worker whose state is installing. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.waiting")}} {{readonlyinline}}
+
Returns a service worker whose state is waiting. This is initially set to null.
+
{{domxref("ServiceWorkerRegistration.active")}} {{readonlyinline}}
+
Returns a service worker whose state is either activating or activated. This is initially set to null. An active worker will control a {{domxref("ServiceWorkerClient")}} if the client's URL falls within the scope of the registration (the scope option set when {{domxref("ServiceWorkerContainer.register")}} is first called.)
+
{{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}}
+
Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration.
+
{{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes.
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status.
+
{{domxref("ServiceWorkerRegistration.sync")}} {{non-standard_inline}} {{readonlyinline}} 
+
Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}}
+
An EventListener property called whenever an event of type updatefound is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker.
+
+ +

Methods

+ +

Also implements methods from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("ServiceWorkerRegistration.getNotifications()")}}
+
Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects.
+
{{domxref("ServiceWorkerRegistration.showNotification()")}}
+
Displays the notification with the requested title.
+
{{domxref("ServiceWorkerRegistration.update()")}}
+
Checks the server for an updated version of the service worker without consulting caches.
+
{{domxref("ServiceWorkerRegistration.unregister()")}}
+
Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered.
+
+ +

Examples

+ +

In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and updatefound event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the updatefound event will not be fired.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw.js')
+  .then(function(registration) {
+    registration.addEventListener('updatefound', function() {
+      // If updatefound is fired, it means that there's
+      // a new service worker being installed.
+      var installingWorker = registration.installing;
+      console.log('A new service worker is being installed:',
+        installingWorker);
+
+      // You can listen for changes to the installing service worker's
+      // state via installingWorker.onstatechange
+    });
+  })
+  .catch(function(error) {
+    console.log('Service worker registration failed:', error);
+  });
+} else {
+  console.log('Service workers are not supported.');
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}}{{Spec2('Service Workers')}}Initial definition.
{{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}}{{Spec2('Push API')}}Adds the {{domxref("PushManager","pushManager")}} property.
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method.
{{SpecName('Background Sync')}}{{Spec2('Background Sync')}}Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property.
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/simple_push_api/index.html b/files/es/web/api/simple_push_api/index.html new file mode 100644 index 0000000000..d3d4dd4d1a --- /dev/null +++ b/files/es/web/api/simple_push_api/index.html @@ -0,0 +1,235 @@ +--- +title: Simple Push +slug: Web/API/Simple_Push_API +translation_of: Archive/B2G_OS/API/Simple_Push_API +--- +

{{ non-standard_header() }}

+ +
+

Nota: Esta documentación cubre el mecanismo propietario Simple Push de Firefox OS; si usted está buscando la documentación sobre el W3C Push API, diríjase a Push API.

+
+ +

El Simple Push API, también conocido como Push Notification API, provee a las aplicaciones la habilidad de ser despertadas para recibir notificaciones. Usted puede utilizar Simple Push como un mecanismo de sincronización, o incluso para traer datos desde servidores de terceros.

+ +

Un "push" (empujón) no es más que un evento enviado a un servidor remoto. Así es como funciona: una aplicación usa el Simple Push API para solicitar una URL especial y única llamada endpoint (punto final). Esta solicitud viaja hacia un servidor existente mantenido por Mozilla especialmente para este proposito (este se denomina "push server"). Cuando la aplicación recibe el endpoint de vuelta desde el push server, la aplicación envía el endpoint a su propio servidor (su servidor de aplicación). El servidor de aplicación guarda este endpoint, luego cuando quiere despertar la aplicación, llama al endpoint con un número de versión, y el push server contacta a la aplicación con una notificación del número de versión. La aplicación puede hacer cualquier cosa al momento de recibir la notificación, incluso ignorarla.

+ +

El Simple Push API extiende Window.navigator con una propiedad push que es un objeto {{domxref("PushManager")}}, e incluye algunos eventos nuevos que usted puede recibir para monitorear el estado del empuje.

+ +

Ejemplo mostrando los conceptos básicos

+ +

Existen varias formas de usar la Simple Push API. Este ejemplos cubren los conceptos básicos de como usarla. El ejemplo consta de los siguientes pasos generales. Consulte las siguientes secciones para obtener información completa sobre cada paso.

+ +
    +
  1. Añadir configuración push al manifiesto de la aplicación
    2. +
  2. LLamar a PushManager.register para solicitar un endpoint
    3. +
  3. Enviar un endpoint a su servidor
    4. +
  4. Agregar a su aplicación controladores de mensajes para notificaciones push
    5. +
  5. Enviar una notificación desde su servidor utilizando el endpoint
    6. +
+ +

1. Añadir configuración push al manifiesto de la aplicación

+ +

Usted necesita cambiar dos cosas en el manifiesto de la aplicación para poder utilizar Simple Push:

+ +
    +
  1. Campo messages - Añadir push y push-register a messages.
    + Esto le hace saber a la página de aplicación que recibirá cada uno de estos eventos (push y push-register). En este ejemplo, ambos van a la misma página: "/index.html", pero también pueden usar otras páginas. Observe a continuación para mayor información sobre cada uno de estos eventos.
    2. +
  2. Campo permissions - Añadir que su aplicación quiere recibir notificaciones push.
    + Es una buena idea proveer una descripción clara en este campo para que el usuario final entienda por qué usted necesita permisos de empuje ("push").
    3. +
+ +
"messages": [
+   { "push": "/index.html"},
+   { "push-register": "/index.html"}
+],
+"permissions": {
+  "push": {
+    "description": "Required for being updated with new goals in soccer matches"
+  }
+}
+ +

2. LLamar a PushManager.register() para solicitar un endpoint

+ +

La aplicación necesita solicitar un endpoint llamando {{domxref("PushManager.register")}}. Usted debe decidir cuando este debe ser llamado. Usted podría llamarlo cuando el usuario ha iniciado sesión en el servicio, o cuando el usuario decide comenzar a ver un partido de fútbol, o en cualquier otro momento. El código a continuación es una forma de hacerlo.

+ +
if (navigator.push) {
+  // Solicitar el endpoint. Esto usa PushManager.register().
+  var req = navigator.push.register();
+
+  req.onsuccess = function(e) {
+    var endpoint = req.result;
+      console.log("New endpoint: " + endpoint );
+      // En este punto, usted deberá usar algunos llamados para enviar el
+      // endpoint a su servidor. Por ejemplo:
+      /*
+      var post = XMLHTTPRequest();
+      post.open("POST", "https://your.server.here/registerEndpoint");
+      post.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+      post.send("endpoint=" + encodeURIComponents( endpoint ) );
+      */
+      // Obviamente usted querrá añadir controladores .onload y .onerror,
+      // añadir información de id del usuario, y cualquier otra cosa que podría
+      // necesitar para asocial el endpoint con el usuario.
+    }
+
+   req.onerror = function(e) {
+     console.error("Error getting a new endpoint: " + JSON.stringify(e));
+   }
+} else {
+  // push no se encuentra disponible en el DOM, así que haga algo diferente.
+}
+ +

3. Enviar un endpoint a su servidor

+ +

Una vez que la aplicación ha recibido un endpoint, esta necesita enviarla a su servidor de aplicación. Hay más de una forma de hacer esto. Por ejemplo usted puede enviarla por email, o enviarla a través de POST, PUT, o incluso GET. Nosotros recomendamos que almacene el endpoint con algunos datos de usuario desde la aplicación, tales como una cookie, un username, o lo que sea que usted utilice para identificar su par enpoint-user.

+ +

Pero si usted está enviando a su servidor, nosotros recomendamos que siga estas buenas prácticas:

+ + + +

4. Agregar a su aplicación controladores de mensajes para notificaciones push

+ +

Una vez haya configurado su endpoint siguiendo los pasos anteriores, usted está listo para hacer que su aplicación comience a escuchar mensajes push y push-register utilizando los controladores de mensajes.

+ +

Añadir un controlador de mensajes push

+ +

El controlador de mensajes push puede encontrarse en su archivo index.html o en su script main.js, o incluso en un archivo específico push-message.html que contiene solamente el controlador de mensajes. Esto puede ser útil si un mensaje push es enviado y su aplicación se encuentra cerrada, porque cargará solamente una pequeña porción del código HTML/JavaScript, y usted puede decidir si la aplicación necesita estar completamente abierta o puede hacer algo en segundo plano. Donde sea que usted decida ubicar el controlador de mensajes push, asegurese de que el manifiesto apunte a la ubicación correcta (ver el primer paso anterior), de otro modo su aplicación podría no obtener actualizaciones. Aquí hay un ejemplo de un controlador de mensajes push:

+ +
if (window.navigator.mozSetMessageHandler) {
+  window.navigator.mozSetMessageHandler('push', function(e) {
+    console.log('My endpoint is ' + e.pushEndpoint);
+    console.log('My new version is ' +  e.version);
+    // Recuerde que usted puede controlar aquí si tiene más de
+    // un pushEndpoint
+    if (e.pushEndpoint === emailEndpoint) {
+      emailHandler(e.version);
+    } else if (e.pushEndpoint === imEndpoint) {
+      imHandler(e.version);
+    }
+  });
+} else {
+  // Controlador No message
+}
+ +

Añadir un controlador de mensajes push-register

+ +
+

Nota: Asegurese de añadir este controlador y verificar que funciona. Si ustedes no registra de nuevo sus endpoints cuando este mensaje es recibido por su aplicación, la aplicación NO SERÁ CAPAZ de recibir nuevas notificaciones push.

+
+ +

Un mensaje push-register será enviado a todas las aplicaciones cuando el dispositivo cambie su identificador interno (llamado el UAID o User Agent Identifier). Esto puede deberse a que el servidor push ha cambiado, o se ha caido y necesita recuperarse, o cualquier otra circunstancia. Si cualquiera de estas cosas llegara a ocurrir, ustedes DEBE registrar de nuevo todos sus endpoints, porque sus previos endpoints ya no serán válidos. Por lo tanto su aplicación necesita implementar un controlador de mensajes push-register. Observe el siguiente código de ejemplo.

+ +
if (window.navigator.mozSetMessageHandler) {
+  window.navigator.mozSetMessageHandler('push-register', function(e) {
+    console.log('push-register received, I need to register my endpoint(s) again!');
+
+    var req = navigator.push.register();
+    req.onsuccess = function(e) {
+      var endpoint = req.result;
+      console.log("New endpoint: " + endpoint );
+      localStorage.endpoint = endpoint;
+    }
+
+    req.onerror = function(e) {
+      console.error("Error getting a new endpoint: " + JSON.stringify(e));
+    }
+  });
+} else {
+  // Controlador No message
+}
+ +

5. Enviar una notificación desde su servidor utilizando el endpoint

+ +

Una vez usted tiene el endpoint en su servidor, usted puede enviar una notificación simplemente enviando una petición HTTP PUT al endpoint con el cuerpo version=<version>. Por ejemplo, imagine un endpoint con la siguiente URL:

+ +
https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef
+ +

y con la version 5:

+ +
version=5
+ +

Así es como la notificación se verá utilizando curl:

+ +
curl -X PUT -d "version=5" https://updates.push.services.mozilla.com/update/abcdef01234567890abcdefabcdef01234567890abcdef
+ +

Si el servidor push esta corriendo correctamente, usted recibirá una respuesta con un 200 Status (OK) y un {} como cuerpo. También podría recibir un 200 Status indicando que el mensaje fue aceptado, pero que pudo haber sido controlado por un sistema alternativo. Si no, una respuesta error HTTP valida con un JSON explicando el error será retornada.

+ +
+

Por favor recuerde: Solo porque Simple Push ha aceptado el mensaje, esto no garantiza que el mensaje será entregado exitosamente a la aplicación. Muchos factores, desde un dispositivo desconectado a varios fallos de transmisión de datos, pueden ocacionar que no se entregue exitosamente una notificación. Nosotros hacemos nuestro mejor esfuerzo, pero a veces el universo tiene otros planes.

+
+ +

Recuerde que el valor de version debe ser números enteros, e incrementales. Las aplicaciones no recibirán nuevas notificaciones si la versión en menor a aquella almacenada en el servidor y/o dispositivo. Las versiones pueden ser útiles para que la aplicación indique si existen eventos "perdidos" que realmente debería verificar. Usted también podriá simplemente usar el UTC (el número de segundos desde la media noche del 1 de enero de 1970, GMT) actual si el valor de la versión no es muy importante para usted.

+ +

Anular el registro de un endpoint

+ +

Una vez haya terminado de utilizar el endpoint y no desee recibir más notificaciones, le rogamos anular el registro del antiguo endpoint mediante {{domxref("PushManager.unregister")}}. Esto limpiará la cantidad de datos que el dispositivo envía al servidor push, y además disminuirá el consumo de batería al no enviar notificaciones de las aplicaciones que no las usen.

+ +

Especificaciones

+ +

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

+ +

Conpatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/storage/clear/index.html b/files/es/web/api/storage/clear/index.html new file mode 100644 index 0000000000..fc9e9890b2 --- /dev/null +++ b/files/es/web/api/storage/clear/index.html @@ -0,0 +1,131 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API + - Almacenamiento local + - Storage + - Web Storage + - sessionStorage +translation_of: Web/API/Storage/clear +--- +

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

+ +

El método clear() de la interfaz {{domxref("Storage")}}, al invocarlo, elimina todos los registros del almacen local.

+ +

Sintaxis

+ +
storage.clear();
+ +

Parámetros

+ +

No recibe parámetros.

+ +

Devuelve

+ +

No devuelve ningún valor.

+ +

 

+ +

Ejemplo

+ +

 

+ +

La siguiente función crea tres elementos con datos dentro del almacen local, seguidamente, los elimina usando clear().

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.clear();
+}
+ +
+

Nota: Para ver un ejemplo real, vea nuestro Web Storage Demo.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage', '#dom-storage-clear', 'clear()')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Los navegadores tienen diferentes niveles de capacidad, tanto para el localStorage como para el sesionStorage. He aquí una lista detallada de todas las capacidades de almacenamiento para varios navegadores.

+ +
+

Nota: desde la versión 5.1 de iOS, Safari Mobile almacena los datos de localStorage en la carpeta de la caché, la cual se vacía a intervalos, a criterio del sistema operativo, generalmente, si hay una falta de espacio.

+
+ +

Vea también

+ +

Uso de la Web Storage API

diff --git a/files/es/web/api/storage/getitem/index.html b/files/es/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..ea5da3292b --- /dev/null +++ b/files/es/web/api/storage/getitem/index.html @@ -0,0 +1,139 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API + - Almacenamiento + - Almacenamiento web + - Referencia + - Storage + - Web Storage + - metodo +translation_of: Web/API/Storage/getItem +--- +

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

+ +

El método getItem() de la interfaz {{domxref("Storage")}} devuelve el valor de la clave cuyo nombre se le pasa por parámetro.

+ +

Sintaxis

+ +
var aValue = storage.getItem(keyName);
+
+ +

Parámetros

+ +
+
keyName
+
Una {{domxref("DOMString")}} que contiene el nombre de la clave cuyo valor se quiere obtener.
+
+ +

Devuelve

+ +

Una {{domxref("DOMString")}} que contiene el valor de la clave. Si la clave no existe, devuelve null.

+ +

Ejemplo

+ +

La siguiente función toma 3 elementos del almacenamiento local (local storage) y los utiliza para establecer estilos personalizados en una página.

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

Nota: Para ver esto utilizado en un ejemplo real, vea nuestra Demo de Web Storage.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Web Storage', '#dom-storage-getitem', 'getItem()')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

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

Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage como para sessionStorage. Aquí hay un resumen detallado de la capacidad de almacenamiento para diversos navegadores.

+ +
+

Nota: desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de cache, que está sujeta a borrados ocasionales a petición del sistema operativo, típicamente cuando queda poco espacio.

+
+ +

Vea también

+ +

Utilizando la API de Web Storage

diff --git a/files/es/web/api/storage/index.html b/files/es/web/api/storage/index.html new file mode 100644 index 0000000000..f5116f0fff --- /dev/null +++ b/files/es/web/api/storage/index.html @@ -0,0 +1,162 @@ +--- +title: Almacenamiento +slug: Web/API/Storage +tags: + - API + - Almacenamiento + - Almacenamiento web + - Interface + - Reference + - TopicStub + - data +translation_of: Web/API/Storage +--- +

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

+ +

La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados.

+ +

Si deseas manipular el almacenamiento de sesión para un dominio, debes llamar al método {{domxref("Window.sessionStorage")}}; Si deseas manipular el almacenamiento local para un dominio, debes llamar a {{domxref("Window.localStorage")}}.

+ +

Propiedades

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Retorna un entero que representa el número de elementos almacenados en el objeto Storage.
+
+ +

Métodos

+ +
+
{{domxref("Storage.key()")}}
+
Cuando se le pasa un número n, éste método retorna el nombre de la enésima clave en el almacenamiento.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Cuando se le pasa un nombre de clave, retorna el valor de esa clave.
+
{{domxref("Storage.setItem()")}}
+
Cuando se le pasa un nombre de clave y un valor, añade dicha clave al almacenamiento, o la actualiza el valor de la clave si ya existe.
+
{{domxref("Storage.removeItem()")}}
+
Cuando se le pasa el nombre de una clave, eliminará dicha clave del almacenamiento.
+
{{domxref("Storage.clear()")}}
+
Cuando es invocado vacía todas las claves del almacenamiento.
+
+ +

Ejemplos

+ +

Aquí tenemos un objeto Storage al llamar a localStorage. Primero probamos si el almacenamiento local contiene elementos de dato usando !localStorage.getItem('bgcolor'). Si lo hace, ejecutamos una función llamada setStyles() que obtiene los elementos usando {{domxref("localStorage.getItem()")}} y utiliza dichos valores para actualizar los estilos de la página. Si no, ejecutamos otra función, populateStorage(), que utiliza {{domxref("localStorage.setItem()")}} para definir los valores de los elementos, luego ejecuta setStyles().

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

Nota: Para ver la ejecución de esto como un ejemplo funcional completo, mira nuestra Demo de almacenamiento web.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}8113.2[1]
+
+ +

[1] A partir de iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta cache, que es sujeta a ser vaciada ocasionalmente a petición del SO, típicamente si hay poco espacio disponible.

+ +

Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage y sessionStorage. Aquí hay un análisis detallado de todas las capacidades de almacenamiento para diferentes navegadores.

+ +

Ver también

+ +

Usar la API de almacenamiento Web

diff --git a/files/es/web/api/storage/length/index.html b/files/es/web/api/storage/length/index.html new file mode 100644 index 0000000000..47434b2813 --- /dev/null +++ b/files/es/web/api/storage/length/index.html @@ -0,0 +1,117 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +translation_of: Web/API/Storage/length +--- +

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

+ +

La propiedad de sólo lectura length de la interfaz {{domxref("Storage")}} devuelve un entero que indica el numero de elementos guardados en el objeto Storage.

+ +

Sintaxis

+ +
var aLength = storage.length;
+ +

Valor devuelto

+ +

Entero

+ +

Ejemplo

+ +

La siguiente función añade tres elementos de datos en el almacen local para el dominio actual, posteriormente, devuelve el número de elementos guardados en el almacen:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // should return 3
+}
+ +
+

Nota: Para un ejemplo real, vea nuestro Web Storage Demo.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacíonEstadoComentario
{{SpecName('Web Storage', '#dom-storage-length', 'length')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Los navegadores tienen diferentes niveles de capacidad, tanto para el localStorage como para el sesionStorage. He aquí una lista detallada de todas las capacidades de almacenamiento para varios navegadores.

+ +
+

Nota:  desde la versión 5.1 de iOS, Safari Mobile almacena los datos de localStorage en la carpeta de la caché, la cual se vacía a intervalos, a criterio del sistema operativo, generalmente, si hay una falta de espacio.

+
+ +

Vea también

+ +

Uso de la Web Storage API

diff --git a/files/es/web/api/storage/localstorage/index.html b/files/es/web/api/storage/localstorage/index.html new file mode 100644 index 0000000000..80a54ff11b --- /dev/null +++ b/files/es/web/api/storage/localstorage/index.html @@ -0,0 +1,135 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +tags: + - Almacenamiento en Navegador + - Almacenamiento local +translation_of: Web/API/Window/localStorage +--- +

localStorage (almacenamiento local) es lo mismo que sessionStorage (almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. localStorage se introdujo en la version Firefox 3.5.

+ +
Nota: Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar datos de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.
+ +
// Guardar datos al almacenamiento local actual
+localStorage.setItem("nombredeusuario", "John");
+
+// Acceder a datos almacenados
+alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));
+ +

La persistencia de localStorage lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en este tutorial en Codepen.

+ +

Compatibilidad

+ +

Los objetos de Storage (almacenamiento) son una adición reciente al estándar, por lo que pueden no estar presentes en todos los navegadores. Esto se puede solucionar si introduce uno de los dos códigos al principio de sus scripts, permitiendo el uso de el objeto localStorage en implementaciones que no lo soportan de forma nativa.

+ +

Este algoritmo es una imitación exacta del objeto localStorage, pero hace uso de cookies.

+ +
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+ +
Nota: El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
+ +
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se pasará a ser un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
+ +

Esta es otra imitación menos exacta de el objeto localStorage, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer < 8 (probado y funcional incluso en Internet Explorer 6). También hace uso de cookies.

+ +
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+ +
Nota: El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
+ +
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se volverá un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
+ +

Compatibilidad y relación con globalStorage

+ +

localStorage es lo mismo que globalStorage[location.hostname], con la excepción de que tiene un ámbito de origen HTML5 (esquema + nombre del host + puerto no estandar), y localStorage es una instancia de Storage, al contrario que globalStorage[location.hostname], que es una instancia de StorageObsolete, como se explica más adelante. Por ejemplo, http://ejemplo.com no puede acceder al mismo objeto localStorage que https://ejemplo.com, pero los dos pueden acceder al mismo elemento de globalStorage. --localStorage es una interfaz estándar mientras que globalStorage no lo es, así que no se debe depender de ella.

+ +

Nótese que al establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage, y al extender Storage.prototype no afecta a los elementos de globalStorage; sólo al extender StorageObsolete.prototype los afecta.

+ +

El formato de Storage

+ +

Las claves y valores de Storage se guardan en el formato UTF-16 DOMString, que usa 2 bytes por carácter.

diff --git a/files/es/web/api/storage/removeitem/index.html b/files/es/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..f597bd4d5a --- /dev/null +++ b/files/es/web/api/storage/removeitem/index.html @@ -0,0 +1,142 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - API + - Almacenamiento + - Almacenamiento web + - Referencia + - Storage + - Web Storage + - metodo +translation_of: Web/API/Storage/removeItem +--- +

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

+ +

El método removeItem() de la interfaz {{domxref("Storage")}} elimina la clave cuyo nombre recibe por parámetro del almacenamiento. La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión (sessionStorage) o al almacenamiento local (localStorage).

+ +

Sintaxis

+ +
storage.removeItem(keyName);
+ +

Parámetros

+ +
+
keyName
+
Una {{domxref("DOMString")}} que contiene el nombre de la clave que se desea eliminar.
+
+ +

Devuelve

+ +

Ningún valor.

+ +

Ejemplos

+ +

La siguiente función crea 3 elementos dentro del almacenamiento local y después elimina el elemento image.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}
+ +

De la misma manera se podría manipular el almacenamiento de sesión:

+ +
function populateSessionStorage() {
+  sessionStorage.setItem('bgcolor', 'red');
+  sessionStorage.setItem('font', 'Helvetica');
+  sessionStorage.setItem('image', 'myCat.png');
+
+  sessionStorage.removeItem('image');
+}
+ +
+

Nota: Para ver esto en un ejemplo real, vea nuestra Demo de Web Storage.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}{{Spec2('Web Storage')}}
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

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

Todos los navegadores tienen diferentes niveles de capacidad tanto para localStorage como para sessionStorage. Aquí hay un resumen detallado de la capacidad de almacenamiento para diversos navegadores.

+ +
+

Nota: desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de cache, que está sujeta a borrados ocasionales a petición del sistema operativo, típicamente cuando queda poco espacio.

+
+ +

Vea también

+ +

Utilizando la API de Web Storage

diff --git a/files/es/web/api/storage/setitem/index.html b/files/es/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..f9d4ee0237 --- /dev/null +++ b/files/es/web/api/storage/setitem/index.html @@ -0,0 +1,136 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Almacenamiento + - Almacenamiento web + - Storage + - Web Storage + - metodo +translation_of: Web/API/Storage/setItem +--- +

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

+ +

El método setItem() de la interfaz {{domxref("Storage")}}, cuando reciba una clave y un valor, añadirá estos al almacén, o actualizará el valor si la clave ya existe.

+ +

Sintaxis

+ +
storage.setItem(keyName, keyValue);
+ +

Parámetros

+ +
+
keyName
+
Un {{domxref("DOMString")}} conteniendo la clave que se quiere crear/actualizar.
+
keyValue
+
Un {{domxref("DOMString")}} conteniendo el valor que se le quiere dar a la clave que se está creando/actualizando.
+
+ +

Devuelve

+ +

No devuelve valor.

+ +

Excepciones

+ +

setItem() puede lanzar una excepción si el almacén esta lleno. Particularmente, en Safari Mobile (desde iOS 5) siempre lo hará cuando el usuario ingresa en modo privado (Safari determina una cuota de 0 bytes en modo privado, al contrario de otros navegadores, que permiten almacenamiento en modo privado, usando contenedores de información separados).
+ Por lo tanto, los desarrolladores deben asegurarse de capturar siempre las posibles excepciones de setItem().

+ +

Ejemplo

+ +

La siguiente función crea tres ítems dentro del almacenamiento local.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Nota: Para ver un ejemplo real, vea nuestro Web Storage Demo.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage', '#dom-storage-setitem', 'setItem()')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen niveles de capacidad variados para localStorage y sessionStorage. Aquí hay un análisis detallado de todas las capacidades de almacenamiento para varios navegadores.

+ +
+

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

+
+ +

Vea también

+ +

Usando la Web Storage API

diff --git a/files/es/web/api/storagemanager/estimate/index.html b/files/es/web/api/storagemanager/estimate/index.html new file mode 100644 index 0000000000..b2c0ee4df6 --- /dev/null +++ b/files/es/web/api/storagemanager/estimate/index.html @@ -0,0 +1,90 @@ +--- +title: StorageManager.estimate() +slug: Web/API/StorageManager/estimate +tags: + - API + - Almacenamiento + - Contexto seguro + - Cuota + - Referencia + - Storage API + - StorageManager + - Uso + - estimación + - estimate + - metodo +translation_of: Web/API/StorageManager/estimate +--- +

{{securecontext_header}}{{APIRef("Storage")}}

+ +

El método estimate() de la interfaz {{domxref("StorageManager")}} solicita al Gestor de Almacenamiento la información de cuota y uso para el origen actual. Este método opera de forma asíncrona, por lo que devuelve una {{jsxref("Promise")}} que se resuelve una vez que la información esté disponible. La función que controla el cumplimiento de la promesa recibe un {{domxref("StorageEstimate")}} como entrada con la informción de uso y cuota.

+ +

Sintaxis

+ +
var estimatePromise = StorageManager.estimate();
+ +

Parámetros

+ +

Ninguno.

+ +

Valor devuelto

+ +

Una {{jsxref('Promise')}} que se resuelve como un objeto que se ajusta al diccionario {{domxref('StorageEstimate')}}. Este diccionario contiene estimaciones sobre la cantidad de espacio disponible para el origen o aplicación (en {{domxref("StorageEstimate.quota")}}, así como la cantidad que se usa en ese momento (in {{domxref("StorageEstimate.usage")}}). Estos no son números exactos; entre la compresión, la deduplicación y la ofuscación por razones de seguridad, no serán precisos.

+ +

Es posible que la quota varíe de una aplicación a otra en función de factores como la frecuencia con la que el usuario la visita, los datos de popularidad del sitio, etc.

+ +

Ejemplo

+ +

En este ejemplo, obtenemos las estimaciones de uso y presentamos el porcentaje de la capacidad de almacenamiento utilizada actualmente al usuario.

+ +

HTML

+ +
<p>
+  You're currently using about <span id="percent">
+  </span>% of your available storage.
+</p>
+
+ +

JavaScript

+ +
navigator.storage.estimate().then(function(estimate) {
+  document.getElementById("percent").innerHTML =
+      (estimate.usage / estimate.quota).toFixed(2);
+});
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', 600, 40) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Storage','#dom-storagemanager-estimate','estimate()')}}{{Spec2('Storage')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.StorageManager.estimate")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/storagemanager/index.html b/files/es/web/api/storagemanager/index.html new file mode 100644 index 0000000000..afc0bd77ad --- /dev/null +++ b/files/es/web/api/storagemanager/index.html @@ -0,0 +1,55 @@ +--- +title: StorageManager +slug: Web/API/StorageManager +tags: + - API + - Interface + - NeedsTranslation + - Persistence + - Quotas + - Reference + - Secure context + - Storage + - Storage API + - StorageManager + - TopicStub + - Usage +translation_of: Web/API/StorageManager +--- +

{{securecontext_header}}{{SeeCompatTable}}{{APIRef("Storage")}}

+ +

The StorageManager interface of the the Storage API provides an interface for managing persistance permissions and estimating available storage. You can get a reference to this interface using either {{domxref("navigator.storage")}} or {{domxref("WorkerNavigator.storage")}}.

+ +

Methods

+ +
+
{{domxref("StorageManager.estimate()")}} {{securecontext_inline}}
+
Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin.
+
{{domxref("StorageManager.persist()")}} {{securecontext_inline}}
+
Returns a {{jsxref('Promise')}} that resolves to true if the user agent is able to persist your site's storage.
+
{{domxref("StorageManager.persisted()")}} {{securecontext_inline}}
+
Returns a {{jsxref('Promise')}} that resolves to true if persistence has already been granted for your site's storage.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Storage','#storagemanager','StorageManger')}}{{Spec2('Storage')}}Initial definition.
+ +

Browser compatibility

+ + + +

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

diff --git a/files/es/web/api/storagemanager/persist/index.html b/files/es/web/api/storagemanager/persist/index.html new file mode 100644 index 0000000000..bb42fbeac4 --- /dev/null +++ b/files/es/web/api/storagemanager/persist/index.html @@ -0,0 +1,59 @@ +--- +title: StorageManager.persist() +slug: Web/API/StorageManager/persist +tags: + - Contexto seguro + - Referencia + - Storage API + - metodo + - persist() +translation_of: Web/API/StorageManager/persist +--- +

{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}

+ +

El método persist() de la interfaz {{domxref("StorageManager")}} solicita permiso para usar el almacenamiento persistente, y devuelve una {{jsxref('Promise')}} que se resuelve como true si se concede el permiso y box mode es persistente, y false en cualquier otro caso.

+ +

Sintaxis

+ +
navigator.storage.persist().then(function(persistent) { ... })
+ +

Parámetros

+ +

Ninguno.

+ +

Valor devuelto

+ +

Una {{jsxref('Promise')}} que se resuelve en un {{jsxref('Boolean')}}.

+ +

Ejemplo

+ +
if (navigator.storage && navigator.storage.persist)
+  navigator.storage.persist().then(function(persistent) {
+    if (persistent)
+      console.log("Storage will not be cleared except by explicit user action");
+    else
+      console.log("Storage may be cleared by the UA under storage pressure.");
+  });
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Storage','#dom-storagemanager-persist','persist')}}{{Spec2('Storage')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.StorageManager.persist")}}

diff --git a/files/es/web/api/storagemanager/persisted/index.html b/files/es/web/api/storagemanager/persisted/index.html new file mode 100644 index 0000000000..bce6970649 --- /dev/null +++ b/files/es/web/api/storagemanager/persisted/index.html @@ -0,0 +1,59 @@ +--- +title: StorageManager.persisted() +slug: Web/API/StorageManager/persisted +tags: + - Contexto seguro + - Referencia + - Storage API + - metodo + - persisted() +translation_of: Web/API/StorageManager/persisted +--- +

{{securecontext_header}}{{APIRef("Storage")}}{{SeeCompatTable}}

+ +

La propiedad persisted de la interfaz {{domxref("StorageManager")}} devuelve una {{jsxref('Promise')}} que se resuelve como true si box mode es persistente para el alamacenamiento de su sitio.

+ +

Sintaxis

+ +
navigator.storage.persisted().then(function(persistent) { ... })
+ +

Parámetros

+ +

Ninguno.

+ +

Devuelve

+ +

Una {{jsxref('Promise')}} que se resuelve como {{jsxref('Boolean')}}.

+ +

Ejemplo

+ +
if (navigator.storage && navigator.storage.persist)
+  navigator.storage.persisted().then(function(persistent) {
+    if (persistent)
+      console.log("Storage will not be cleared except by explicit user action");
+    else
+      console.log("Storage may be cleared by the UA under storage pressure.");
+  });
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Storage','#dom-storagemanager-persisted','persisted')}}{{Spec2('Storage')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.StorageManager.persisted")}}

diff --git a/files/es/web/api/stylesheet/disabled/index.html b/files/es/web/api/stylesheet/disabled/index.html new file mode 100644 index 0000000000..470283c9dc --- /dev/null +++ b/files/es/web/api/stylesheet/disabled/index.html @@ -0,0 +1,20 @@ +--- +title: Stylesheet.disabled +slug: Web/API/StyleSheet/disabled +translation_of: Web/API/StyleSheet/disabled +--- +

{{ ApiRef() }}

+

Resumen

+

Esta propiedad indica si es se aplica o no, la hoja de estilo actual.

+

Sintaxis

+
bool = stylesheet.disabled
+
+

Ejemplo

+
// si la hoja de estilo está deshabilitada...
+if (stylesheet.disabled) {
+   // apply style in-line
+}
+
+

Especificación

+

disabled

+

{{ languages( { "pl": "pl/DOM/stylesheet.disabled" } ) }}

diff --git a/files/es/web/api/stylesheet/href/index.html b/files/es/web/api/stylesheet/href/index.html new file mode 100644 index 0000000000..0f4a42dd0c --- /dev/null +++ b/files/es/web/api/stylesheet/href/index.html @@ -0,0 +1,38 @@ +--- +title: stylesheet.href +slug: Web/API/StyleSheet/href +translation_of: Web/API/StyleSheet/href +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve la localización de la hoja de estilo.

+

Sintaxis

+
uri = stylesheet.href
+
+

Parámetros

+ +

Ejemplo

+
 // en una máquina local:
+ <html>
+  <head>
+   <link rel="StyleSheet" href="example.css" type="text/css" />
+   <script>
+    function sref() {
+     alert(document.styleSheets[0].href);
+    }
+   </script>
+  </head>
+  <body>
+   <div class="thunder">Thunder</div>
+   <button onclick="sref()">ss</button>
+  </body>
+ </html>
+// returns "file:////C:/Windows/Desktop/example.css
+
+

Notas

+

Si la hoja de estilo es un enlace, el valor de este atributo es su localización. Para las hojas de estilo in-line, el valor del atributo es NULL.

+

 

+

Specification

+

href

diff --git a/files/es/web/api/stylesheet/index.html b/files/es/web/api/stylesheet/index.html new file mode 100644 index 0000000000..3344780e21 --- /dev/null +++ b/files/es/web/api/stylesheet/index.html @@ -0,0 +1,50 @@ +--- +title: objeto Stylesheet +slug: Web/API/StyleSheet +translation_of: Web/API/StyleSheet +--- +

{{ ApiRef("CSSOM") }}

+ +

Esta sección describe el objeto CSSStyleSheet, que representa una única hoja de estilos CSS.

+ +

Una hoja de estilos CSS consiste en reglas CSS que pueden, cada una de ellas, ser manipuladas a través del objeto CSSRule. El objeto de la hoja de estilo en sí mismo, te permite examinar y modificar la hoja de estilos, incluyendo su lista de reglas.

+ +

Puedes tomar la lista de estilos de un documento determinado mediante el uso de la propiedad document.styleSheets.

+ +

Propiedades

+ +
+
stylesheet.cssRules
+
Devuelve todas las reglas CSS que hay en la hoja de estilo, en forma de arreglo.
+
stylesheet.disabled
+
Esta propiedad indica si se ha aplicado o no, la hoja de estilo actual.
+
stylesheet.href
+
Devuelve la localización de la hoja de estilo.
+
stylesheet.media
+
Especifica el medio al que se tiene intención de aplicar la hoja de estilo.
+
stylesheet.ownerNode
+
el nodo que asocia la hoja de estilo con el documento.
+
stylesheet.ownerRule
+
Si la hoja de estilo tiene una regla marcada con @import, la propiedad ownerRule contendrá la CSSImportRule.
+
stylesheet.parentStyleSheet
+
Devuelve la hoja de estilo que que está incluida en esta, si existe.
+
stylesheet.title
+
Devuelve el título de la hoja de estilo actual.
+
stylesheet.type
+
Especifica el lenguaje de la hoja de estilo.
+
+ +

Métodos

+ +
+
stylesheet.deleteRule
+
Elimina una regla de la hoja de estilo.
+
stylesheet.insertRule
+
Agrega una nueva regla de estilo a la hoja de estilo actualmente usada.
+
+ +

Especificación

+ +

DOM Level 2 Style Sheets: StyleSheet

+ +

DOM Level 2 CSS: CSSStyleSheet

diff --git a/files/es/web/api/stylesheet/media/index.html b/files/es/web/api/stylesheet/media/index.html new file mode 100644 index 0000000000..47e36011cd --- /dev/null +++ b/files/es/web/api/stylesheet/media/index.html @@ -0,0 +1,24 @@ +--- +title: Stylesheet.media +slug: Web/API/StyleSheet/media +translation_of: Web/API/StyleSheet/media +--- +

{{ ApiRef() }}

+

Resumen

+

media Especifica el medio al que se tiene intención de aplicar la hoja de estilo.

+

Sintaxis

+
medium = stylesheet.media
+stylesheet.media = medium
+
+

Parámetros

+ +

Ejemplo

+
<link rel="StyleSheet" href="document.css" type="text/css" media="screen" />
+
+

Notas

+

El valor por defecto para media es "screen."

+

Especificación

+

DOM Level 2 Styles - STYLESHEET

+

{{ languages( { "pl": "pl/DOM/stylesheet.media" } ) }}

diff --git a/files/es/web/api/stylesheet/ownernode/index.html b/files/es/web/api/stylesheet/ownernode/index.html new file mode 100644 index 0000000000..e7a14fb528 --- /dev/null +++ b/files/es/web/api/stylesheet/ownernode/index.html @@ -0,0 +1,35 @@ +--- +title: Stylesheet.ownerNode +slug: Web/API/StyleSheet/ownerNode +translation_of: Web/API/StyleSheet/ownerNode +--- +

{{ ApiRef() }}

+

Resumen

+

ownerNode devuelve el nodo que asocia la hoja de estilo con el documento.

+

Sintaxis

+
objRef = stylesheet.ownerNode
+
+

Ejemplo

+
<html>
+ <head>
+  <link rel="StyleSheet" href="example.css" type="text/css" />
+  <script>
+   function stilo() {
+    alert(document.styleSheets[0].ownerNode);
+   }
+  </script>
+ </head>
+ <body>
+
+
+ Thunder
+
  <button onclick="stilo()">ss</button>
+ </body>
+</html>
+// displays "object HTMLLinkElement"
+
+

Notas

+

Para el HTML, ownerNode correspondería a un elemento LINK o STYLE. Para XML, serían las instrucciones del proceso de enlace. Para las hojas de estilo que están incluidas en otras hojas de estilo, este valor es NULL.

+

Especificación

+

DOM Level 2 Styles - STYLESHEET

+

{{ languages( { "pl": "pl/DOM/stylesheet.ownerNode" } ) }}

diff --git a/files/es/web/api/stylesheet/parentstylesheet/index.html b/files/es/web/api/stylesheet/parentstylesheet/index.html new file mode 100644 index 0000000000..118aedd82a --- /dev/null +++ b/files/es/web/api/stylesheet/parentstylesheet/index.html @@ -0,0 +1,24 @@ +--- +title: Stylesheet.parentStyleSheet +slug: Web/API/StyleSheet/parentStyleSheet +translation_of: Web/API/StyleSheet/parentStyleSheet +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve la hoja de estilo que incluye a la que está en curso, si existe.

+

Sintaxis

+
objRef = stylesheet.parentStyleSheet
+
+

Ejemplo

+
// encuentra la hoja de estilo de alto nivel
+if (stylesheet.parentStyleSheet) {
+  sheet = stylesheet.parentStyleSheet;
+}
+else
+{ sheet = stylesheet; }
+
+

Notas

+

Esta propiedad devuelve NULL si la hoja de estilo actual es una hoja de estilo de alto nivel o si la inclusión de hojas de estilo no está implementada.

+

Specification

+

parentStyleSheet

+

{{ languages( { "pl": "pl/DOM/stylesheet.parentStyleSheet" } ) }}

diff --git a/files/es/web/api/stylesheet/title/index.html b/files/es/web/api/stylesheet/title/index.html new file mode 100644 index 0000000000..e6c61082d7 --- /dev/null +++ b/files/es/web/api/stylesheet/title/index.html @@ -0,0 +1,13 @@ +--- +title: Stylesheet.title +slug: Web/API/StyleSheet/title +translation_of: Web/API/StyleSheet/title +--- +

{{ ApiRef() }}

+

Resumen

+

title devuelve el título de la hoja de estilo que se está usando.

+

Notas

+

El título es a menudo especificado en el ownerNode.

+

Especificación

+

title

+

{{ languages( { "pl": "pl/DOM/stylesheet.title" } ) }}

diff --git a/files/es/web/api/stylesheet/type/index.html b/files/es/web/api/stylesheet/type/index.html new file mode 100644 index 0000000000..fa60372cc0 --- /dev/null +++ b/files/es/web/api/stylesheet/type/index.html @@ -0,0 +1,17 @@ +--- +title: Stylesheet.type +slug: Web/API/StyleSheet/type +translation_of: Web/API/StyleSheet/type +--- +

{{ ApiRef() }}

+

Resumen

+

type especifica el lenguaje de la hoja de estilo.

+

Sintaxis

+
string = stylesheet.type
+
+

Ejemplo

+
 ss.type = "text/css";
+
+

Especificación

+

type

+

{{ languages( { "pl": "pl/DOM/stylesheet.type" } ) }}

diff --git a/files/es/web/api/subtlecrypto/digest/index.html b/files/es/web/api/subtlecrypto/digest/index.html new file mode 100644 index 0000000000..48669844b6 --- /dev/null +++ b/files/es/web/api/subtlecrypto/digest/index.html @@ -0,0 +1,135 @@ +--- +title: SubtleCrypto.digest() +slug: Web/API/SubtleCrypto/digest +translation_of: Web/API/SubtleCrypto/digest +--- +
{{APIRef("Web Crypto API")}}
+ +

El método digest() de la interfaz {{domxref("SubtleCrypto")}} genera un digest de los datos proveidos. Un {{domxref("digest")}} es un valor corto de longitud fija derivado de alguna entrada de longitud variable. Los digest criptográficos deben mostrar resistencia a colisiones, lo que significa que es difícil encontrar dos entradas diferentes que tengan el mismo valor de digest.

+ +

Toma como argumento un identificador para el algoritmo digest a utilizar y los datos a codificar. Devuelve un Promise que se completará con el digest.

+ +

Sintaxis

+ +
const digest = crypto.subtle.digest(algorithm, data);
+
+ +

Parámetros

+ + + +

Valor de retorno

+ + + +

Algoritmos soportados

+ +

Los argoritmos digest, también conocidos como funciones criptográficas hash, transforman un bloque de datos arbitrariamente grande en una salida de tamaño fijo, normalmente mucho más corta que la entrada. Tienen una variedad de aplicaciones en criptografía.

+ +

SHA-1

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.1, y produce una salida de 160 bits de largo.

+ +
+

Advertencia: Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.

+
+ +

SHA-256

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.2, y produce una salida de 256 bits de largo.

+ +

SHA-384

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.5, y produce una salida de 384 bits de largo.

+ +

SHA-512

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.4, y produce una salida de 512 bits de largo.

+ +
+

Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" (HMAC), necesitas usar SubtleCrypto.sign() en su lugar.

+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

Este ejemplo codifica un mensaje, luego calcula su digest SHA-256 y muestra la longitud del mismo:

+ +
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+
+ +

Convirtiendo un digest a una cadena hexadecimal

+ +

El resumen se devuelve como un ArrayBuffer, pero para la comparación y visualización los digests se representan a menudo como cadenas hexadecimales. Este ejemplo calcula un digest, y luego convierte el ArrayBuffer a un string hexadecimal:

+ +
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.SubtleCrypto.digest")}}

+ +
+

En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.

+
+ +

Ver también

+ + diff --git a/files/es/web/api/subtlecrypto/encrypt/index.html b/files/es/web/api/subtlecrypto/encrypt/index.html new file mode 100644 index 0000000000..8f35030d35 --- /dev/null +++ b/files/es/web/api/subtlecrypto/encrypt/index.html @@ -0,0 +1,142 @@ +--- +title: SubtleCrypto.digest() +slug: Web/API/SubtleCrypto/encrypt +tags: + - API + - Encriptación + - Referencia + - SubtleCrypto + - Web Crypto API + - encrypt +translation_of: Web/HTTP/Headers/Digest +--- +
{{APIRef("Web Crypto API")}}
+ +

El método digest() de la interfaz {{domxref("SubtleCrypto")}} genera un digest de los datos proveidos. Un {{domxref("digest")}} es un valor corto de longitud fija derivado de alguna entrada de longitud variable. Los digest criptográficos deben mostrar resistencia a colisiones, lo que significa que es difícil encontrar dos entradas diferentes que tengan el mismo valor de digest.

+ +

Toma como argumento un identificador para el algoritmo digest a utilizar y los datos a codificar. Devuelve un Promise que se completará con el digest.

+ +

Sintaxis

+ +
const digest = crypto.subtle.digest(algorithm, data);
+
+ +

Parámetros

+ + + +

Valor de retorno

+ + + +

Algoritmos soportados

+ +

Los argoritmos digest, también conocidos como funciones criptográficas hash, transforman un bloque de datos arbitrariamente grande en una salida de tamaño fijo, normalmente mucho más corta que la entrada. Tienen una variedad de aplicaciones en criptografía.

+ +

SHA-1

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.1, y produce una salida de 160 bits de largo.

+ +
+

Advertencia: Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.

+
+ +

SHA-256

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.2, y produce una salida de 256 bits de largo.

+ +

SHA-384

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.5, y produce una salida de 384 bits de largo.

+ +

SHA-512

+ +

Este algoritmo se especifica en FIPS 180-4, sección 6.4, y produce una salida de 512 bits de largo.

+ +
+

Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" (HMAC), necesitas usar SubtleCrypto.sign() en su lugar.

+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

Este ejemplo codifica un mensaje, luego calcula su digest SHA-256 y muestra la longitud del mismo:

+ +
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(message);
+  const hash = await crypto.subtle.digest('SHA-256', data);
+  return hash;
+}
+
+const digestBuffer = await digestMessage(text);
+console.log(digestBuffer.byteLength);
+
+ +

Convirtiendo un digest a una cadena hexadecimal

+ +

El resumen se devuelve como un ArrayBuffer, pero para la comparación y visualización los digests se representan a menudo como cadenas hexadecimales. Este ejemplo calcula un digest, y luego convierte el ArrayBuffer a un string hexadecimal:

+ +
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
+
+async function digestMessage(message) {
+  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
+  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
+  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
+  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
+  return hashHex;
+}
+
+const digestHex = await digestMessage(text);
+console.log(digestHex);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.SubtleCrypto.digest")}}

+ +
+

En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.

+
+ +

Ver también

+ + diff --git a/files/es/web/api/subtlecrypto/index.html b/files/es/web/api/subtlecrypto/index.html new file mode 100644 index 0000000000..429f0c080e --- /dev/null +++ b/files/es/web/api/subtlecrypto/index.html @@ -0,0 +1,290 @@ +--- +title: SubtleCrypto +slug: Web/API/SubtleCrypto +tags: + - API + - Interfaz + - Referencia + - SubtleCrypto + - Web Crypto API +translation_of: Web/API/SubtleCrypto +--- +
{{APIRef("Web Crypto API")}}
+ +

La interfaz SubtleCrypto de la Web Crypto API provee una serie de funciones criptográficas de bajo nivel. Se accede a ella a través de las propiedades {{domxref("Crypto.subtle")}} disponible en un contexto de la ventana (via {{domxref("Window.crypto")}}).

+ +
+

Advertencia: Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.

+ +

Incluso suponiendo que se utilicen correctamente las funciones criptográficas básicas, la gestión segura de las claves y el diseño general del sistema de seguridad son extremadamente difíciles de conseguir correctamente, y generalmente son el dominio de expertos en seguridad especializados.

+ +

Los errores en el diseño e implementación del sistema de seguridad pueden hacer que la seguridad del sistema sea completamente ineficaz.

+ +

Si no estás seguro de saber lo que estás haciendo, probablemente no deberías usar esta API.

+
+ +

Descripción general

+ +

Podemos dividir las funciones implementadas por esta API en dos grupos: funciones criptográficas y funciones de administración de claves.

+ +

Funciones criptográficas

+ +

Estas son las funciones que puedes utilizar para implementar características de seguridad como la privacidad y la autenticación en un sistema. El API de SubtleCrypto proporciona las siguientes funciones criptográficas:

+ +

* {{DOMxRef("SubtleCrypto.sign","sign()")}} y {{DOMxRef("SubtleCrypto.verify","verify()")}}: crea y verifica las firmas digitales.
+ * {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} y {{DOMxRef("SubtleCrypto.decrypt","decrypt()")}}: encripta y desencripta datos.
+ * {{DOMxRef("SubtleCrypto.digest","digest()")}}: crea un digest de longitud fija y resistente a colisiones de algunos datos.

+ +

Funciones de gestión clave

+ +

Excepto para {{DOMxRef("SubtleCrypto.digest","digest()")}}, todas las funciones de criptografía de la API utilizan claves criptográficas. En la API SubtleCrypto una clave criptográfica se representa usando un objeto {{DOMxRef("CryptoKey","CryptoKey")}}. Para realizar operaciones como firmado y encriptación, provee un objeto {{DOMxRef("CryptoKey","CryptoKey")}} a la función {{DOMxRef("SubtleCrypto.sign","sign()")}} o {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}}.

+ +

Generando y derivando claves

+ +

Las funciones {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} y {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} ambos crean un nuevo objeto {{DOMxRef("CryptoKey")}}.

+ +

La diferencia es que generateKey() generará un nuevo valor clave distinto cada vez que lo llames, mientras que deriveKey() deriva una llave de algún material inicial de claves. Si proporcionas el mismo material de claves a dos llamadas separadas a deriveKey(), obtendrás dos objetos  CryptoKey que tienen el mismo valor de base. Esto es útil si, por ejemplo, se quiere derivar una clave de cifrado de una contraseña y luego derivar la misma clave de la misma contraseña para descifrar los datos.

+ +

Importación y exportación de claves

+ +

Para hacer que las claves estén disponibles fuera de tu aplicación, necesitas exportar la clave, y para eso sirve {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}}.Puedes elegir uno de varios formatos de exportación.

+ +

El inverso de exportKey() es {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. Puedes importar claves de otros sistemas, y la compatibilidad con formatos estándar como PKCS #8 y JSON Web Key te ayudan a hacer esto. La función exportKey() exporta la clave en un formato no codificado.

+ +

Si la clave es sensible, deberías usar {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, que exporta la clave y luego la encripta usando otra clave; el API llama a una "llave de envoltura".

+ +

El inverso de wrapKey() es {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, que descifra y luego importa la llave.

+ +

Almacenamiento de claves

+ +

Epecification objetos CryptoKey pueden ser almacenados usando el structured clone algorithm, lo que significa que puedes almacenarlos y recuperarlos usando las API de almacenamiento web estándar. La especificación espera que la mayoría de los desarrolladores usen el IndexedDB API para almacenar objetos CryptoKey.

+ +

Algoritmos Suportados

+ +

Las funciones criptográficas que proporciona la Web Crypto API pueden ser realizadas por uno o más algoritmos criptográficos diferentes: El argumento algorithm de la función indica el algoritmo a utilizar. Algunos algoritmos necesitan parámetros adicionales: en estos casos el argumento algorithm es un objeto de diccionario que incluye los parámetros adicionales.

+ +

En el cuadro que figura a continuación se resume qué algoritmos son adecuados para cada operación criptográfica:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

sign()

+ +

verify()

+ 		+

encrypt()

+ +

decrypt()

+ 		digest() +

deriveBits()

+ +

deriveKey()

+ 		+

wrapKey()

+ +

unwrapKey()

+
RSASSA-PKCS1-v1_5✓
RSA-PSS✓
ECDSA✓
HMAC✓
RSA-OAEP✓✓
AES-CTR✓✓
AES-CBC✓✓
AES-GCM✓✓
SHA-1✓
SHA-256✓
SHA-384✓
SHA-512✓
ECDH✓
HKDF✓
PBKDF2✓
AES-KW✓
+ +

Propiedades

+ +

Esta interfaz no hereda ni implementa ninguna propiedad.

+ +

Métodos

+ +

Esta interfaz no hereda ningún método.

+ +
+
{{domxref("SubtleCrypto.encrypt()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con los datos codificados correspondientes al texto sin cifrar, el algoritmo y la clave dados como parámetros.
+
{{domxref("SubtleCrypto.decrypt()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con los datos claros correspondientes al texto encriptado, el algoritmo y la clave dados como parámetros.
+
{{domxref("SubtleCrypto.sign()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con la firma correspondiente al texto, algoritmo y clave dados como parámetros.
+
{{domxref("SubtleCrypto.verify()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un valor {{jsxref("Boolean")}} indicando si la firma dada como parámetro coincide con el texto, el algoritmo y la clave que también se dan como parámetros.
+
{{domxref("SubtleCrypto.digest()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con digest generado a partir del algoritmo y el texto dados como parámetros.
+
{{domxref("SubtleCrypto.generateKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un recién generado {{domxref("CryptoKey")}}, para algoritmos simétricos, o un {{domxref("CryptoKeyPair")}}, que contiene dos claves recién generadas, para algoritmos asimétricos. Estas coincidirán con el algoritmo, usos y extraíbles dados como parámetros.
+
{{domxref("SubtleCrypto.deriveKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un recién generado {{domxref("CryptoKey")}} derivado de la clave maestra y el algoritmo específico dados como parámetros.
+
{{domxref("SubtleCrypto.deriveBits()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un recién generado buffer de bits pseudo-aleatorios derivado de la clave maestra y el algoritmo específico dados como parámetros.
+
{{domxref("SubtleCrypto.importKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un {{domxref("CryptoKey")}} correspondiente al formato, el algoritmo, los datos clave en bruto, los usos y la extraíbilidad dados como parámetros.
+
{{domxref("SubtleCrypto.exportKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un buffer que contiene la clave en el formato solicitado.
+
{{domxref("SubtleCrypto.wrapKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con una llave simétrica envuelta para su uso (transferencia y almacenamiento) en entornos inseguros. La llave envuelta coincide con el formato especificado en los parámetros dados, y la envoltura se hace con la llave envuelta dada, usando el algoritmo especificado.
+
{{domxref("SubtleCrypto.unwrapKey()")}}
+
Retorna un {{jsxref("Promise")}} que se completa con un {{domxref("CryptoKey")}} correspondiente a la llave envuelta dada en el parámetro.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Web Crypto API', '#subtlecrypto-interface', 'SubtleCrypto') }}{{ Spec2('Web Crypto API') }}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/svgpoint/index.html b/files/es/web/api/svgpoint/index.html new file mode 100644 index 0000000000..9709061af4 --- /dev/null +++ b/files/es/web/api/svgpoint/index.html @@ -0,0 +1,13 @@ +--- +title: SVGPoint +slug: Web/API/SVGPoint +tags: + - SVGPoint + - createSVGPoint + - getScreenCTM + - matrixTransform +translation_of: Web/API/SVGPoint +--- +
{{APIRef("SVG")}}
+ +

Crea un nuevo elemento SVGPoint que se inicializa en el origen ( 0,0) del sistema de coordenadas. El elemento no es visible ni es agregado al DOM

diff --git a/files/es/web/api/texttrack/cuechange_event/index.html b/files/es/web/api/texttrack/cuechange_event/index.html new file mode 100644 index 0000000000..4a667535fc --- /dev/null +++ b/files/es/web/api/texttrack/cuechange_event/index.html @@ -0,0 +1,109 @@ +--- +title: 'TextTrack: evento cuechange' +slug: Web/API/TextTrack/cuechange_event +tags: + - API + - Audio + - Event + - Media + - Reference + - TextTrack + - Video + - WebVTT + - cuechange + - events + - oncuechange + - track +translation_of: Web/API/TextTrack/cuechange_event +--- +
{{APIRef}}
+ +

El evento cuechange se activa cuando un {{domxref("TextTrack")}} ha cambiado las anotaciones que se estan mostrando. El evento es activado tanto en TextTrack y en el {{domxref("HTMLTrackElement")}} donde esta siendo mostrado, si lo hay.

+ + + + + + + + + + + + + + + + + + + + +
BurbujasNo
CancelableNo
Interfaz{{domxref("Event")}}
Propiedad del controlador de eventos{{domxref("GlobalEventHandlers.oncuechange")}}
+ +

Ejemplos

+ +

En el TextTrack

+ +

Tu puedes preparar una escucha para el evento cuechange en un TextTrack usando el método {{domxref("EventTarget.addEventListener", "addEventListener()")}}:

+ +
track.addEventListener('cuechange', function () {
+  let cues = track.activeCues;  // array de las anotaciones actuales
+});
+
+ +

O puedes solo preparar la propiedad del controlador de eventos {{domxref("GlobalEventHandlers.oncuechange", "oncuechange")}}:

+ +
track.oncuechange = function () {
+  let cues = track.activeCues; // array of current cues
+}
+ +

En el elemento track

+ +

El subyacente {{domxref("TextTrack")}}, indicado por la propiedad {{domxref("HTMLTrackElement.track", "track")}}, recive un evento  {{domxref("TextTrack.cuechange_event", "cuechange")}} cada vez que la anotación que esta siendo actualmente presentada cambia. Est sucede incluso si la pista de texto no está asociada cun un elemento multimedia.

+ +

Si la pista de texto está asociada con el elemento multimedia, usando el elemento {{HTMLElement("track")}} como hijo del elemento {{HTMLElement("audio")}} o del elemento {{HTMLElement("video")}}, el evento cuechange es también enviado al {{domxref("HTMLTrackElement")}}.

+ +
let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.addEventListener("cuechange", (event) => {
+  let cues = event.target.track.activeCues;
+});
+
+ +

Además, puedes utilizar el controlador de eventos oncuechange:

+ +
let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.oncuechange = (event) => {
+  let cues = event.target.track.activeCues;
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("api.TextTrack.cuechange_event")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/texttrack/index.html b/files/es/web/api/texttrack/index.html new file mode 100644 index 0000000000..17c32575fa --- /dev/null +++ b/files/es/web/api/texttrack/index.html @@ -0,0 +1,102 @@ +--- +title: TextTrack +slug: Web/API/TextTrack +tags: + - API + - Interface + - Media + - NeedsTranslation + - Reference + - TextTrack + - TopicStub + - Web + - WebVTT +translation_of: Web/API/TextTrack +--- +
{{APIRef("WebVTT")}}
+ +
+

The TextTrack interface—part of the API for handling WebVTT (text tracks on media presentations)—describes and controls the text track associated with a particular {{HTMLElement("track")}} element.

+
+ +

Properties

+ +

This interface also inherits properties from {{domxref("EventTarget")}}.

+ +
+
{{domxref("TextTrack.activeCues")}} {{readonlyInline}}
+
A {{domxref("TextTrackCueList")}} object listing the currently active set of text track cues. Track cues are active if the current playback position of the media is between the cues' start and end times. Thus, for displayed cues such as captions or subtitles, the active cues are currently being displayed.
+
{{domxref("TextTrack.cues")}} {{readonlyInline}}
+
A {{domxref("TextTrackCueList")}} which contains all of the track's cues.
+
{{domxref("TextTrack.id")}} {{readonlyInline}}
+
A {{domxref("DOMString")}} which identifies the track, if it has one. If it doesn't have an ID, then this value is an empty string (""). If the TextTrack is associated with a {{HTMLElement("track")}} element, then the track's ID matches the element's ID.
+
{{domxref("TextTrack.inBandMetadataTrackDispatchType")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} which indicates the track's in-band metadata track dispatch type. needs details
+
{{domxref("TextTrack.kind")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} indicating what kind of text track the TextTrack describes. The value must be one of those in the TextTrackKind enum.
+
{{domxref("TextTrack.label")}} {{readonlyInline}}
+
A human-readable {{domxref("DOMString")}} which contains the text track's label, if one is present; otherwise, this is an empty string (""), in which case a custom label may need to be generated by your code using other attributes of the track, if the track's label needs to be exposed to the user.
+
{{domxref("TextTrack.language")}} {{readonlyInline}}
+
A {{domxref("DOMString")}} which specifies the text language in which the text track's contents is written. The value must adhere to the format specified in the Tags for Identifying Languages (BCP 47) document from the IETF, just like the HTML {{htmlattrxref("lang")}} attribute. For example, this can be "en-US" for United States English or "pt-BR" for Brazilian Portuguese.
+
{{domxref("TextTrack.mode")}}
+
A {{domxref("DOMString")}} specifying the track's current mode. Changing this property's value changes the track's current mode to match. Permitted values are listed under Text track mode constants. The default is disabled, unless the {{HTMLElement("track")}} element's {{htmlattrxref("default", "track")}} Boolean attribute is specified, in which case the default mode is started.
+
+ +

Events

+ +
+
cuechange
+
Fired when cues are entered and exited. A given text cue appears when the cue is entered and disappears when the cue is exited.
+ Also available via the oncuechange property.
+
+ +

Methods

+ +

This interface also inherits methods from {{domxref("EventTarget")}}.

+ +
+
{{domxref("TextTrack.addCue()")}}
+
Adds a cue (specified as a {{domxref("TextTrackCue")}} object to the track's list of cues.
+
{{domxref("TextTrack.removeCue()")}}
+
Removes a cue (specified as a {{domxref("TextTrackCue")}} object from the track's list of cues.
+
+ +
+
+ +

Example

+ +

tbd

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', '#texttrack', 'TextTrack') }}{{ Spec2('HTML WHATWG') }}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/touchevent/index.html b/files/es/web/api/touchevent/index.html new file mode 100644 index 0000000000..c18c737064 --- /dev/null +++ b/files/es/web/api/touchevent/index.html @@ -0,0 +1,190 @@ +--- +title: TouchEvent +slug: Web/API/TouchEvent +translation_of: Web/API/TouchEvent +--- +

{{ APIRef("Touch Events") }}

+ +

La interfaz TouchEvent representa un evento enviado cuando cambia el estado de los contactos con una superficie sensible al tacto. Esta superficie puede ser una pantalla táctil o un trackpad, por ejemplo. El evento puede describir uno o mas puntos de contacto con la pantalla e incluye soporte para detectar el movimiento, adición y remoción de puntos de contacto, etc.

+ +

Los toques pueden ser representados por el objeto {{ domxref("Touch") }}, cada toque es descrito por una posición, tamaño y forma, cantidad de presión, y el elemento que se presiona. Los toques son almacenados en el objeto {{ domxref("TouchList") }}

+ +

Constructor

+ +
+
{{domxref("TouchEvent.TouchEvent", "TouchEvent()")}}
+
Crea un objeto TouchEvent.
+
+ +

Propiedades

+ +

Esta interfaz hereda propiedades de sus padres {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +
+
{{ domxref("TouchEvent.altKey") }} {{readonlyInline}}
+
Un valor Booleano indicando si la tecla alt estaba pulsada cuando el evento touch fue lanzado.
+
{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}
+
Una lista {{ domxref("TouchList") }} objetos {{ domxref("Touch") }} representan puntos de contacto individuales cuyos estados cambiaron entre el evento touch previo y este. 
+
{{ domxref("TouchEvent.ctrlKey") }} {{readonlyInline}}
+
Un valor booleano que indica si la tecla de control estaba pulsada o no cuando el evento touch se disparó.
+
{{ domxref("TouchEvent.metaKey") }} {{readonlyInline}}
+
Un valor Boleano que indica si la tecla meta estaba apagada o no cuando el evento touch se disparó.
+
{{ domxref("TouchEvent.shiftKey") }} {{readonlyInline}}
+
Un valor Boleano que indica si la techa shift estaba apagado(presionada) cuando el evento touch se disparó.
+
{{ domxref("TouchEvent.targetTouches") }}{{readonlyInline}}
+
A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects that are both currently in contact with the touch surface and were also started on the same element that is the target of the event.
+
{{ domxref("TouchEvent.touches") }} {{readonlyInline}}
+
A {{ domxref("TouchList") }} of all the {{ domxref("Touch") }} objects representing all current points of contact with the surface, regardless of target or changed status.
+
+ +

Tipos de evento táctiles

+ +

Hay varios tipos de eventos que pueden ser disparados (activados) para indicar que han ocurrido cambios relacionados con el contacto. Puede determinar cuál de estos ha ocurrido mirando la propiedad {{domxref ("event.type", "TouchEvent.type")}} del evento.

+ +
Nota: Es importante observar que en muchos casos, Los eventos táctiles y de mouse se envían (para permitir que el código no táctil específico aún interactúe con el usuario). Si usa eventos táctiles, debe llamar a {{domxref ("event.preventDefault ()")}} para evitar que también se envíe el evento del mouse.
+ +

{{event("touchstart")}}

+ +

Sent when the user places a touch point on the touch surface. The event's target will be the {{ domxref("element") }} in which the touch occurred.

+ +

{{event("touchend")}}

+ +

Sent when the user removes a touch point from the surface (that is, when they lift a finger or stylus from the surface). This is also sent if the touch point moves off the edge of the surface; for example, if the user's finger slides off the edge of the screen.

+ +

The event's target is the same {{ domxref("element") }} that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element.

+ +

The touch point (or points) that were removed from the surface can be found in the {{ domxref("TouchList") }} specified by the changedTouches attribute.

+ +

{{event("touchmove")}}

+ +

Sent when the user moves a touch point along the surface. The event's target is the same {{ domxref("element") }} that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element.

+ +

This event is also sent if the values of the radius, rotation angle, or force attributes of a touch point change.

+ +
Note: The rate at which touchmove events is sent is browser-specific, and may also vary depending on the capability of the user's hardware. You must not rely on a specific granularity of these events.
+ +

{{event("touchcancel")}}

+ +

Sent when a touch point has been disrupted in some way. There are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as browser to browser):

+ + + +

GlobalEventHandlers

+ +

{{SeeCompatTable}}

+ +
+
{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}
+
A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchstart")}} event.
+
{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}
+
A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchend")}} event.
+
{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}
+
A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.
+
{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}
+
A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchcancel")}} event.
+
+ +

Ejemplo

+ +

See the example on the main Touch events article.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}{{Spec2('Touch Events 2')}}Added ontouchstart, ontouchend, ontouchmove, ontouchend global attribute handlers
{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}{{Spec2('Touch Events')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome("22.0")}}{{CompatGeckoDesktop("18.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("6.0")}}{{CompatVersionUnknown}}11{{CompatVersionUnknown}}{{CompatVersionUnknown}}
TouchEvent(){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/uievent/index.html b/files/es/web/api/uievent/index.html new file mode 100644 index 0000000000..8d896924eb --- /dev/null +++ b/files/es/web/api/uievent/index.html @@ -0,0 +1,158 @@ +--- +title: UIEvent +slug: Web/API/UIEvent +tags: + - API +translation_of: Web/API/UIEvent +--- +

{{APIRef("DOM Events")}}

+ +

The UIEvent interface represents simple user interface events.

+ +

UIEvent derives from {{domxref("Event")}}. Though the {{domxref("UIEvent.initUIEvent()")}} method is kept for backward compatibility, creating of a UIEvent object should be done using the {{domxref("UIEvent.UIEvent", "UIEvent()")}} constructor.

+ +

Several interfaces are direct or indirect descendants of this one: {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}}, and {{domxref("CompositionEvent")}}.

+ +

Constructors

+ +
+
{{domxref("UIEvent.UIEvent()", "UIEvent()")}}
+
Creates a UIEvent object.
+
+ +

Properties

+ +

This interface also inherits properties of its parent, {{domxref("Event")}}.

+ +
+
{{domxref("UIEvent.cancelBubble")}} {{Deprecated_inline}}{{Non-standard_inline}}
+
Is a {{jsxref("Boolean")}} indicating whether the bubbling of the event has been canceled or not.
+
+ +
+
{{domxref("UIEvent.detail")}}{{readonlyinline}}
+
Returns a long that gives some detail about the event, depending on the type of event.
+
{{domxref("UIEvent.isChar")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns a {{jsxref("Boolean")}} indicating whether the event produced a key character or not.
+
{{domxref("UIEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the horizontal coordinate of the event relative to the current layer.
+
{{domxref("UIEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the vertical coordinate of the event relative to the current layer.
+
{{domxref("UIEvent.pageX")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the horizontal coordinate of the event relative to the whole document.
+
{{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the vertical coordinate of the event relative to the whole document.
+
{{domxref("UIEvent.view")}}{{readonlyinline}}
+
Returns a {{domxref("WindowProxy")}} that contains the view that generated the event.
+
{{domxref("UIEvent.which")}} {{Non-standard_inline}} {{readonlyinline}}
+
Returns the numeric keyCode of the key pressed, or the character code (charCode) for an alphanumeric key pressed.
+
+ +

Methods

+ +

This interface also inherits methods of its parent, {{domxref("Event")}}.

+ +
+
{{domxref("UIEvent.initUIEvent()")}} {{deprecated_inline}}
+
Initializes a UIEvent object. If the event has already being dispatched, this method does nothing.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#interface-UIEvent', 'UIEvent')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}: +
    +
  • added the UIEvent() constructor,
    • +
  • deprecated the initUIEvent() method,
    • +
  • and changed the type of view from AbstractView to WindowProxy.
    • +
+
{{SpecName('DOM2 Events', '#Events-UIEvent', 'UIEvent')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
UIEvent(){{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(11)}}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
UIEvent(){{ CompatVersionUnknown() }}{{ CompatGeckoMobile(11)}}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/es/web/api/uievent/pagex/index.html b/files/es/web/api/uievent/pagex/index.html new file mode 100644 index 0000000000..fbd75e26f8 --- /dev/null +++ b/files/es/web/api/uievent/pagex/index.html @@ -0,0 +1,102 @@ +--- +title: event.pageX +slug: Web/API/UIEvent/pageX +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías +translation_of: Web/API/UIEvent/pageX +--- +

{{ ApiRef() }}

+

Sumario

+

Retorna la coordena horizontal del evento, relativo al documento completo.

+

Sintaxis

+
pageX =event.pageX;
+
+

pageX es un valor entero expresado en pixels para la corrdenada X del puntero del ratón, relativo al documento entero, cuando se produjo el evento. Esta propiedad toma en cuenta la barra de desplazamiento horizontal de la página.

+

Ejemplo

+
<html>
+<head>
+<title>pageX\pageY & layerX\layerY example</title>
+
+<script type="text/javascript">
+
+function showCoords(evt){
+  var form = document.forms.form_coords;
+  var parent_id = evt.target.parentNode.id;
+  form.parentId.value = parent_id;
+  form.pageXCoords.value = evt.pageX;
+  form.pageYCoords.value = evt.pageY;
+  form.layerXCoords.value = evt.layerX;
+  form.layerYCoords.value = evt.layerY;
+}
+
+</script>
+
+<style type="text/css">
+
+ #d1 {
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d2 {
+  position: absolute;
+  top: 180px;
+  left: 80%;
+  right:auto;
+  width: 40%;
+  border: solid blue 1px;
+  padding: 20px;
+ }
+
+ #d3 {
+  position: absolute;
+  top: 240px;
+  left: 20%;
+  width: 50%;
+  border: solid blue 1px;
+  padding: 10px;
+ }
+
+</style>
+</head>
+
+<body onmousedown="showCoords(event)">
+
+<p>To display the mouse coordinates please click anywhere on the page.</p>
+
+<div id="d1">
+<span>This is an un-positioned div so clicking it will return
+layerX/layerY values almost the same as pageX/PageY values.</span>
+</div>
+
+<div id="d2">
+<span>This is a positioned div so clicking it will return layerX/layerY
+values that are relative to the top-left corner of this positioned
+element. Note the pageX\pageY properties still return the
+absolute position in the document, including page scrolling.</span>
+
+<span>Make the page scroll more! This is a positioned div so clicking it
+will return layerX/layerY values that are relative to the top-left
+corner of this positioned element. Note the pageX\pageY properties still
+return the absolute position in the document, including page
+scrolling.</span>
+</div>
+
+<div id="d3">
+<form name="form_coords">
+ Parent Element id: <input type="text" name="parentId" size="7" /><br />
+ pageX:<input type="text" name="pageXCoords" size="7" />
+ pageY:<input type="text" name="pageYCoords" size="7" /><br />
+ layerX:<input type="text" name="layerXCoords" size="7" />
+ layerY:<input type="text" name="layerYCoords" size="7" />
+</form>
+</div>
+
+</body>
+</html>
+
+

Specificación

+

No es parte del estándar público.

+

{{ languages( { "pl": "pl/DOM/event.pageX", "en": "en/DOM/event.pageX" } ) }}

diff --git a/files/es/web/api/url/createobjecturl/index.html b/files/es/web/api/url/createobjecturl/index.html new file mode 100644 index 0000000000..9a6b6841b4 --- /dev/null +++ b/files/es/web/api/url/createobjecturl/index.html @@ -0,0 +1,148 @@ +--- +title: URL.createObjectURL() +slug: Web/API/URL/createObjectURL +tags: + - API + - Experimental + - Method + - URL + - URL API + - createObjectURL +translation_of: Web/API/URL/createObjectURL +--- +

{{ApiRef("URL")}}{{SeeCompatTable}}

+ +

El método estático URL.createObjectURL() crea un {{domxref("DOMString")}} que contiene una URL que representa al objeto pasado como parámetro. La vida de la URL está ligado al {{domxref("document")}} de la ventana en la que fue creada. El nuevo objeto URL representa al objeto {{domxref("File")}} especificado o al objeto {{domxref("Blob")}}.

+ +
+

El uso de un objeto {{domxref("MediaStream")}} como entrada a este método está en proceso de ser obsoleto. Las discusiones están en curso sobre si o no debe ser quitado totalmente. Como tal, se debe de evitar usar este método con  {{domxref("MediaStream")}}s, y se debería usar {{domxref("HTMLMediaElement.srcObject", "HTMLMediaElement.srcObject()")}}.

+
+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
objectURL = URL.createObjectURL(object);
+
+ +

Parámetros

+ +
+
object
+
Un objeto {{domxref("File")}} o un objeto {{domxref("Blob")}} para el que se creará la URL.
+
+ + + +

Ejemplo

+ +

Ver Usando objetos URL para representar imágenes.

+ +

Notas

+ +

Cada vez que se llama a createObjectURL(), un nuevo objeto URL es creado, incluso si ya creaste uno para el mismo objeto. Cada uno de estos objetos puede ser liberado usando {{domxref("URL.revokeObjectURL()")}} cuándo ya no lo necesitas. Los navegadores liberan estos objetos cuando el documento es cerrado; de todas formas, para obtener un rendimiento óptimo y un óptimo uso de memoria, si hay momentos seguros en los que puedes liberar estos objetos deberías hacerlo. Por ejemplo: No liberar los recursos cuando se ha creado una URL a partir de un {{domxref('MediaStream')}} puede dejar la luz de la cámara del navegador encendida más tiempo del necesario.

+ +
+

Notese que no es necesario crear URLs a partir de un {{domxref('MediaStream')}}, ya que los objetos de streams deberían asignarse directamente a elementos de reproducción con {{domxref("HTMLMediaElement.srcObject")}}. La posibilidad de usar un MediaStream como valor de un objeto está obsoleta.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}{{Spec2('File API')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico8 [1]
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(2)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(6)}} [1]
+ {{CompatSafari(7)}}
In a {{ domxref("Worker", "Web Worker") }}10 [1]
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(21)}}{{CompatIE(11)}}{{CompatOpera(15)}}{{CompatSafari(6)}} [1]
+ {{CompatSafari(7)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChrome para AndroidAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico18 [1]4.0 [1]{{CompatGeckoMobile(14)}}{{CompatUnknown}}{{CompatOpera(15)}} [1]6.0 [1]
In a {{ domxref("Worker", "Web Worker") }}18 [1]{{CompatVersionUnknown}} [1]{{CompatGeckoMobile(14)}}{{CompatUnknown}}{{CompatOpera(15)}} [1]6.0 [1]
+
+ +

[1] Con URL prefijado como webkitURL

+ +

Mirar también

+ + diff --git a/files/es/web/api/url/host/index.html b/files/es/web/api/url/host/index.html new file mode 100644 index 0000000000..f18934e6a6 --- /dev/null +++ b/files/es/web/api/url/host/index.html @@ -0,0 +1,62 @@ +--- +title: Estabilidad +slug: Web/API/URL/Host +translation_of: Web/API/URL/host +--- +
{{ApiRef("URL API")}}
+ +

The host property of the {{domxref("URL")}} interface is a {{domxref("USVString")}} containing the host, that is the {{domxref("URL.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a ':', followed by the {{domxref("URL.port", "port")}} of the URL.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
const host = url.host
+url.host = newHost
+
+ +

Value

+ +

A {{domxref("USVString")}}.

+ +

Examples

+ +
let url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org"
+
+url = new URL('https://developer.mozilla.org:443/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org"
+// The port number is not included because 443 is the scheme's default port
+
+url = new URL('https://developer.mozilla.org:4097/en-US/docs/Web/API/URL/host');
+console.log(url.host); // "developer.mozilla.org:4097"
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('URL', '#dom-url-host', 'URL.host')}}{{Spec2('URL')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("api.URL.host")}}

+ +

See also

+ + diff --git a/files/es/web/api/url/index.html b/files/es/web/api/url/index.html new file mode 100644 index 0000000000..c107b21511 --- /dev/null +++ b/files/es/web/api/url/index.html @@ -0,0 +1,217 @@ +--- +title: URL +slug: Web/API/URL +tags: + - API + - Experimental + - Expérimental(2) + - NeedsTranslation + - TopicStub + - URL API +translation_of: Web/API/URL +--- +
{{ApiRef("URL API")}} {{SeeCompatTable}}
+ +

La interfaz URL representa a un objeto que provee métodos estáticos para crear objetos URL.

+ +

When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as Window.webkitURL).

+ +

{{AvailableInWorkers}}

+ +

Properties

+ +
+
{{domxref("URL.href")}}
+
Is a {{domxref("DOMString")}} containing the whole URL.
+
{{domxref("URL.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("URL.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, a ':', and the port of the URL.
+
{{domxref("URL.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("URL.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("URL.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("URL.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("URL.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("URL.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("URL.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("URL.origin")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
+ +
+
{{domxref("URL.searchParams")}}
+
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
+
+ +

Constructor

+ +
+
{{domxref("URL.URL", "URL()")}}
+
Creates and return a URL object composed from the given parameters.
+
+ +

Methods

+ +

The URL interface implements methods defined in {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Static methods

+ +
+
{{domxref("URL.createObjectURL()")}}
+
Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.
+
{{domxref("URL.revokeObjectURL()")}}
+
Revokes an object URL previously created using {{domxref("URL.createObjectURL()")}}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#creating-revoking', 'URL')}}{{Spec2('File API')}}Added the static methods URL.createObjectURL() and URL.revokeObjectURL().
{{SpecName('URL', '#api', 'Node')}}{{Spec2('URL')}}Initial definition (implements URLUtils).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8.0[2]
+ 32		In Development[5]{{CompatGeckoDesktop("2.0")}}[1][3]
+ {{CompatGeckoDesktop("19.0")}}		{{CompatNo}}[4]15.0[2]
+ 19		6.0[2]
+ 7.0
username, password, and origin32{{CompatUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}19{{CompatVersionUnknown}}
searchParams{{CompatChrome(49)}}{{CompatUnknown}}{{CompatGeckoDesktop("29.0")}}{{CompatUnknown}}36{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4[2]
+ 4.4		8.0[2]
+ 32		{{CompatGeckoMobile("14.0")}}[1][3]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
username, password, and origin4.432{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
searchParams{{CompatNo}}{{CompatChrome(49)}}{{CompatGeckoMobile("29.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard nsIDOMMozURLProperty internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.

+ +

[2] This feature is implemented under the non-standard name webkitURL.

+ +

[3] For Firefox, to use from chrome code, JSM and Bootstrap scope, you have to import it like this:

+ +
Cu.importGlobalProperties(['URL']);
+
+ +

URL is available in Worker scopes.

+ +

[4] As of IE11, instantiating new URL objects is not supported - ie. new URL() does not work. 

+ +

[5] Edge in development: see https://developer.microsoft.com/en-us/microsoft-edge/platform/status/urlapi/  and https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263638-url-api

+ +

See also

+ + diff --git a/files/es/web/api/url/port/index.html b/files/es/web/api/url/port/index.html new file mode 100644 index 0000000000..fea61df62a --- /dev/null +++ b/files/es/web/api/url/port/index.html @@ -0,0 +1,55 @@ +--- +title: URL.port +slug: Web/API/URL/port +translation_of: Web/API/URL/port +--- +
{{ApiRef("URL API")}}
+ +

La propiedad port de la interfaz {{domxref("URL")}} es un {{domxref("USVString")}} que contiene el número de puerto de la URL. Si la URL no contiene un número de puerto explícito, se establecerá ''.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
string = object.port;
+object.port = string;
+
+ +

Valor

+ +

Un {{domxref("USVString")}}.

+ +

Ejemplos

+ +
var url = new URL('https://mydomain.com:80/svn/Repos/');
+var result = url.port; // Devuelve:'80'
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-url-port', 'URL.port')}}{{Spec2('URL')}}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("api.URL.port")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/url/url/index.html b/files/es/web/api/url/url/index.html new file mode 100644 index 0000000000..978a7de9f9 --- /dev/null +++ b/files/es/web/api/url/url/index.html @@ -0,0 +1,99 @@ +--- +title: URL() +slug: Web/API/URL/URL +translation_of: Web/API/URL/URL +--- +
{{APIRef("URL API")}}
+ +

El constructor URL() devuelve un objeto {{domxref("URL")}} recién creado que representa la URL definida por los parámetros.

+ +

Si la URL base dada o la URL resultante no son URL válidas, se lanza un {{domxref("DOMException")}}  de tipo SYNTAX_ERROR.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +
url = new URL(url, [base])
+
+ +

Parámetros

+ +
+
url
+
Un {{domxref("USVString")}} que representa una URL absoluta o relativa. Si url es una URL relativa, se requiere base, y se usará como URL base. Si url es una URL absoluta, se ignorará una base determinada.
+
base {{optional_inline}}
+
Un {{domxref("USVString")}} representa la URL base a usar en caso de que la URL sea una URL relativa. Si no se especifica, el valor predeterminado es ''.
+
+ +
+

Nota: Aún puede usar un objeto {{domxref("URL")}} existente para la base, que se enchufa al atributo  {{domxref("DOMString.href","href")}} del objeto.

+
+ +

Excepciones

+ + + + + + + + + + + + + + +
ExcepciónExplicación
TypeErrorurl (en el caso de URL absolutas) o base + url (en el caso de URL relativas) no es una URL válida.
+ +

Ejemplos

+ +
// Urls base
+var m = 'https://developer.mozilla.org';
+var a = new URL("/", m);                                // => 'https://developer.mozilla.org/'
+var b = new URL(m);                                     // => 'https://developer.mozilla.org/'
+
+        new URL('en-US/docs', b);                      // => 'https://developer.mozilla.org/en-US/docs'
+var d = new URL('/en-US/docs', b);                     // => 'https://developer.mozilla.org/en-US/docs'
+        new URL('/en-US/docs', d);                     // => 'https://developer.mozilla.org/en-US/docs'
+        new URL('/en-US/docs', a);                     // => 'https://developer.mozilla.org/en-US/docs'
+
+        new URL('/en-US/docs', "https://developer.mozilla.org/fr-FR/toto");
+                                                       // => 'https://developer.mozilla.org/en-US/docs'
+
+        new URL('/en-US/docs', '');                    // Provoca una excepción TypeError ya que '' no es una URL válida
+        new URL('/en-US/docs');                        // Provoca una excepción TypeError ya que '/en-US/docs' no es una URL válida
+        new URL('http://www.example.com', );           // => 'http://www.example.com/'
+        new URL('http://www.example.com', b);          // => 'http://www.example.com/'
+
+        new URL("//foo.com", "https://example.com")    // => 'https://foo.com' (ver URL relativas)
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#constructors', 'URL.URL()')}}{{Spec2('URL')}}Initial definition.
+ +

Compatibilidad del navegador

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/urlsearchparams/index.html b/files/es/web/api/urlsearchparams/index.html new file mode 100644 index 0000000000..ec3433af72 --- /dev/null +++ b/files/es/web/api/urlsearchparams/index.html @@ -0,0 +1,204 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +translation_of: Web/API/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

La interfaz URLSearchParams define métodos útiles para trabajar con los parámetros de búsqueda de una URL.

+ +

Un objeto implementando URLSearchParams puede directamente ser usado en una {{jsxref("Statements/for...of", "for...of")}} estructura, en lugar de {{domxref('URLSearchParams.entries()', 'entries()')}}: for (var p of mySearchParams) la cual es equivalente a for (var p of mySearchParams.entries()).

+ +

Constructor

+ +
+
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
+
El Constructor returna un objeto de tipo URLSearchParams.
+
+ +

Propiedades

+ +

Esta interfaz no hereda ninguna propiedad.

+ +

Métodos

+ +

Esta interfaz no hereda ningún método.

+ +
+
{{domxref("URLSearchParams.append()")}}
+
Agrega el par de llave/valor especificado como un nuevo parámetro de búsqueda.
+
{{domxref("URLSearchParams.delete()")}}
+
Elimina el parámetro de búsqueda especificado, y su valor asociado, de la lista de todos los parámetros de búsqueda.
+
{{domxref("URLSearchParams.entries()")}}
+
Returna un {{jsxref("Iteration_protocols","iterator")}} que permite iterar a traves de todos los pares de llave/valor que contiene el objeto.
+
{{domxref("URLSearchParams.get()")}}
+
Returna el primer valor asociado al parámetro de búsqueda especificado.
+
{{domxref("URLSearchParams.getAll()")}}
+
Returna todas los valores asociados con el parámetro de búsqueda especificado.
+
{{domxref("URLSearchParams.has()")}}
+
Returna un {{jsxref("Boolean")}} que indica si el parametro de búsqueda especificado existe.
+
{{domxref("URLSearchParams.keys()")}}
+
Returna un {{jsxref("Iteration_protocols", "iterator")}} que permite iterar a través de todas las llaves de los pares de llave/valor que contiene un objeto.
+
{{domxref("URLSearchParams.set()")}}
+
Establece el valor al parámetro de búsqueda asociado con el valor dado. Si hay varios valores, elimina los demás.
+
{{domxref("URLSearchParams.sort()")}}
+
Organiza todos los pares de llave/valor, si existen, por sus llaves.
+
{{domxref("URLSearchParams.toString()")}}
+
Returna una cadena de texto que contiene un parámetro de consulta adecuado para utilizar en una URL.
+
{{domxref("URLSearchParams.values()")}}
+
Returna un {{jsxref("Iteration_protocols", "iterator")}} que permite iterar a través de todos los valores de los pares de llave/valor que contiene un objeto.
+
+ +

Ejemplo

+ +
var paramsString = "q=URLUtils.searchParams&topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Itera los parámetros de búsqueda.
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(49)}}{{CompatGeckoDesktop("29.0")}}{{CompatNo}}3610.1
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatGeckoDesktop("44.0")}}{{CompatNo}}36{{CompatUnknown}}
USVString for constructor init object{{CompatVersionUnknown}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
Record for constructor init object{{CompatNo}}{{CompatGeckoDesktop("54.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatChrome(49)}}{{CompatChrome(49)}}{{CompatGeckoMobile("29.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatChrome(49)}}{{CompatGeckoMobile("44.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
USVString for constructor init object{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Record for constructor init object{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("54.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Vea también

+ + + +
+
diff --git a/files/es/web/api/urlsearchparams/urlsearchparams/index.html b/files/es/web/api/urlsearchparams/urlsearchparams/index.html new file mode 100644 index 0000000000..0cfe5f28df --- /dev/null +++ b/files/es/web/api/urlsearchparams/urlsearchparams/index.html @@ -0,0 +1,78 @@ +--- +title: URLSearchParams() +slug: Web/API/URLSearchParams/URLSearchParams +tags: + - API + - API URL + - Constructor + - Referencia + - URLSearchParams +translation_of: Web/API/URLSearchParams/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

El constructor URLSearchParams() crea y retorna un nuevo objeto {{domxref("URLSearchParams")}}. Si se incluye el caracter '?' al comienzo, éste es ignorado.

+ +

{{availableinworkers}}

+ +

Sintaxis

+ +
var URLSearchParams = new URLSearchParams(init);
+ +

Parámetros

+ +
+
init {{optional_inline}}
+
Una instancia de {{domxref("USVString")}}, una secuencia de {{domxref("USVString")}}s, o un registro conteniendo dos {{domxref("USVString")}}s.
+
+ +

Valor retornado

+ +

Un objeto instancia de {{domxref("URLSearchParams")}}.

+ +

Ejemplos

+ +

El siguiente ejemplo muestra cómo crear un objeto {{domxref("URLSearchParams")}} desde un string que representa una URL.

+ +
// Pasar un literal string
+var url = new URL('https://example.com?foo=1&bar=2');
+// Obtener la URL actual desde window.location
+var url2 = new URL(window.location);
+
+// Obtener parámetros de url.search y pasarlos al constructor
+var params = new URLSearchParams(url.search);
+var params2 = new URLSearchParams(url2.search);
+
+// Pasar una secuencia
+var params3 = new URLSearchParams([["foo", 1],["bar", 2]]);
+
+// Pasar un registro
+var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-urlsearchparams-urlsearchparams', "URLSearchParams()")}}{{Spec2('URL')}}Definición inicial.
+ +

Compatibilidad de browsers

+ +
+ + +

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

+
diff --git a/files/es/web/api/using_the_browser_api/index.html b/files/es/web/api/using_the_browser_api/index.html new file mode 100644 index 0000000000..31fb24d2fb --- /dev/null +++ b/files/es/web/api/using_the_browser_api/index.html @@ -0,0 +1,159 @@ +--- +title: Using the browser API +slug: Web/API/Using_the_Browser_API +translation_of: Mozilla/Gecko/Chrome/API/Browser_API/Using +--- +

{{ non-standard_header() }}

+

{{ B2GOnlyHeader2('privileged') }}

+

Summary

+

The HTML Browser API is an extension of the HTML {{HTMLElement("iframe")}} element that allows web apps to implement browsers or browser-like applications. This entails two major aspects:

+ +

In addition to that, it's also possible to express the notion that the embedded content is an Open Web App. In that case the content is loaded within the appropriate app context (such as permissions).

+

Usage

+

An {{HTMLElement("iframe")}} is turned into a browser frame by setting the {{htmlattrxref("mozbrowser","iframe")}} attribute:

+
<iframe src="http://hostname.tld" mozbrowser>
+

In order to embed an Open Web App, the {{htmlattrxref("mozapp","iframe")}} attribute must also be supplied, with the path to the app's manifest:

+
<iframe src="http://hostname.tld" mozapp='http://path/to/manifest.webapp' mozbrowser>
+

At last the content of the {{HTMLElement("iframe")}} can be loaded in its own child process, separate to the page embedding this frame by using the {{htmlattrxref("remote","iframe")}} attribute.

+
<iframe src="http://hostname.tld" mozbrowser remote>
+
+

Warning: That last attribute is necessary for security reasons if you plan to load content from an untrusted/unknown origin. If you don't use it, you take the risk of your application being compromised by a malicious web site.

+
+

Permissions

+

Any application that wants to embed a browser frame must have the browser permission within its app manifest.

+
{
+  "permissions": {
+    "browser": {}
+  }
+}
+

Additionally, to embed an Open Web App, the app must have the embed-apps permission.

+
{
+  "permissions": {
+    "browser": {},
+    "embed-apps": {}
+  }
+}
+

Extra methods

+

To support the requirement of a browser {{HTMLElement("iframe")}}, Firefox OS extends the {{domxref("HTMLIFrameElement")}} DOM interface. Those new methods gives the {{HTMLElement("iframe")}} some super powers:

+ +

Those methods allow navigating through the browsing history of the {{HTMLElement("iframe")}}. They are necessary to be able to implement back, forward, stop, and reload buttons.

+ +

Performance methods

+

Those methods are used to manage the resources used by a browser {{HTMLElement("iframe")}}. This is especially useful for implementing tabbed browser application.

+ +

Event methods

+

In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:

+ +

Miscellaneous methods

+

Those methods are utilities, useful for apps that host a browser {{HTMLElement("iframe")}}.

+ +

Events

+

In order to allow an application to manage the browser {{HTMLElement("iframe")}}, the application can listen for new events about what's happening within the browser {{HTMLElement("iframe")}}. The following new events can be listened for:

+ +

Example

+

In this example we'll see how to implement a very basic browser app.

+

HTML

+

In the HTML we just add a URL bar, a "Go" and "Stop" button, and a browser {{HTMLElement("iframe")}}.

+
<header>
+  <input id="url">
+  <button id="go">Go</button>
+  <button id="stop">Stop</button>
+</header>
+
+<iframe src="about:blank" mozbrowser remote></iframe>
+
+

CSS

+

We switch between the go and stop button with a little css trick.

+
button:disabled {
+  display: none;
+}
+

JavaScript

+

Now we can add the required functionalities:

+
document.addEventListener("DOMContentLoaded", function () {
+  var url  = document.getElementById("url");
+  var go   = document.getElementById("go");
+  var stop = document.getElementById("stop");
+
+  var browser = document.getElementsByTagName("iframe")[0];
+
+  // This function is used to switch the Go and Stop button
+  // If the browser is loading content, "Go" is disabled and "Stop" is enabled
+  // Otherwise, "Go" is enabled and "Stop" is disabled
+  function uiLoading(isLoading) {
+      go.disabled =  isLoading;
+    stop.disabled = !isLoading;
+  }
+
+  go.addEventListener("touchend", function () {
+    browser.setAttribute("src", url.value);
+  });
+
+  stop.addEventListener("touchend", function () {
+    browser.stop();
+  });
+
+  // When the browser starts loading content, we switch the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowserloadstart', function () {
+    uiLoading(true);
+  });
+
+  // When the browser finishes loading content, we switch back the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowserloadend', function () {
+    uiLoading(false);
+  });
+
+  // In case of error, we also switch back the "Go" and "Stop" buttons
+  browser.addEventListener('mozbrowsererror', function (event) {
+    uiLoading(false);
+    alert("Loading error: " + event.detail);
+  });
+
+  // When a user follows a link, we make sure the new location is displayed in the address bar
+  browser.addEventListener('mozbrowserlocationchange', function (event) {
+    url.value = event.detail;
+  });
+});
+

See also

+ 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 new file mode 100644 index 0000000000..f2e2ef65fd --- /dev/null +++ b/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html @@ -0,0 +1,30 @@ +--- +title: Verificando la autenticidad usando contraseña +slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password +translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password +--- +

{{APIRef("Web Crypto API")}}{{draft}}

+ +

La autenticidad del mensaje puede ser verificada usando el API Crypto Web. En este artículo mostrarémos como crear y controlar una firma digital utilizando una contraseña y una función hash.

+ +

Un algoritmo HMAC toma una llave y genera un código digerido de la llave y los datos a firmar. Posteriormente, cualquiera con la llave puede volver a generar el mismo código digerido para verificar si los datos han sido alterados.  Además, mediante el conocimiento de una clave secreta, permite almacenar juntos el código digerido y los datos: un atacante no podrá generar un código digerido sobre datos manipulados si no conoce la clave secreta.

+ +

Note that this algorithm doesn't carry any information about the person owning the data, nor its unicity: the mere knowledge of the key is enough to alter the data.

+ +

Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use localforage.js a small library wrapping the different storages capabilities of a browser in the same interface. This library is not an essential component of this use case and is used here for convenience, to keep focused on what really matter, the cryptographic part.

+ +

The data we want to access is of the form:

+ +

 

+ +

where data is the information to guarantee the integrity and signature the information used to verify it.

+ +

Cryptographic keys can't be remembered by heart by human, and passwords, or passphrases, make bad, that is unsecure, cryptographic key. To solve this problem, cryptographers have designed algorithms generating cryptographically-sound keys from password. Knowing the password allowed to regenerate the same key and to use it.

+ +

We ask the user for a password, and we use it to generate the key:

+ +
 
+ +

With that key, we will be able to compute the mac of the data.

+ +
 
diff --git a/files/es/web/api/web_crypto_api/index.html b/files/es/web/api/web_crypto_api/index.html new file mode 100644 index 0000000000..d8d0069fe4 --- /dev/null +++ b/files/es/web/api/web_crypto_api/index.html @@ -0,0 +1,85 @@ +--- +title: Web Crypto API +slug: Web/API/Web_Crypto_API +tags: + - Referencia + - Vista general + - Web Crypto API +translation_of: Web/API/Web_Crypto_API +--- +

{{DefaultAPISidebar("Web Crypto API")}}{{SeeCompatTable}}{{draft}}

+ +

La Web Crypto API  es una interfaz que permite a un script usar primitivos criptográficos con el fin de construir sistemas utilizando criptografía.

+ +
+

Advertencia: Esta API proporciona una serie de primitivos criptográficos de bajo nivel. Es muy fácil hacer un mal uso de ellos, y las trampas involucradas pueden ser muy sutiles.

+ +

Incluso suponiendo que se utilicen correctamente las funciones criptográficas básicas, la gestión segura de las claves y el diseño general del sistema de seguridad son extremadamente difíciles de conseguir correctamente, y generalmente son el dominio de expertos en seguridad especializados.

+ +

Los errores en el diseño e implementación del sistema de seguridad pueden hacer que la seguridad del sistema sea completamente ineficaz.

+ +

Si no estás seguro de saber lo que estás haciendo, probablemente no deberías usar esta API.

+
+ +

Una de las principales características de esta API es que permite la manipulación y almacenamiento de claves privadas y secretas sin la capa de bits de la clave para poder usarlo con Javascript.

+ +

Esta interfaz permite el acceso a las siguientes primitivos:

+ + + +

La Web Crypto API no resuelve todos los problemas criptográficos a los que un sitio web o una aplicación puedan encontrarse:

+ + + +
+

¡Atención!

+ + +
+ +

Interfaces

+ +

Algunos navegadores implementan una interfaz llamada {{domxref("Crypto")}} sin tenerla bien definida o criptográficamente siendo llamada. Con el fin de evitar conclusiones, los métodos y propiedades de esta interfaz van a ir implementados en la Web Crypto API, y todos los métodos de la Web Crypto API están disponibles en una nueva interfaz: {{domxref("SubtleCrypto")}}.
+ La propiedad {{domxref("Crypto.subtle")}} da acceso a un objeto para implementarla.

+ +

Casos de uso

+ +

La Web Crypto API puede ser usada para:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Web Crypto API")}}{{Spec2("Web Crypto API")}}Initial definition
diff --git a/files/es/web/api/web_speech_api/index.html b/files/es/web/api/web_speech_api/index.html new file mode 100644 index 0000000000..0a8de49da3 --- /dev/null +++ b/files/es/web/api/web_speech_api/index.html @@ -0,0 +1,121 @@ +--- +title: Web Speech API +slug: Web/API/Web_Speech_API +tags: + - API + - Experimental + - Landing + - NeedsTranslation + - Reference + - TopicStub + - Web Speech API + - recognition + - speech + - synthesis +translation_of: Web/API/Web_Speech_API +--- +
{{DefaultAPISidebar("Web Speech API")}}{{seecompattable}}
+ +
+

The Web Speech API enables you to incorporate voice data into web apps. The Web Speech API has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition.)

+
+ +

Web Speech Concepts and Usage

+ +

The Web Speech API makes web apps able to handle voice data. There are two components to this API:

+ + + +

For more details on using these features, see Using the Web Speech API.

+ +

Web Speech API Interfaces

+ +

Speech recognition

+ +
+
{{domxref("SpeechRecognition")}}
+
The controller interface for the recognition service; this also handles the {{domxref("SpeechRecognitionEvent")}} sent from the recognition service.
+
{{domxref("SpeechRecognitionAlternative")}}
+
Represents a single word that has been recognised by the speech recognition service.
+
{{domxref("SpeechRecognitionError")}}
+
Represents error messages from the recognition service.
+
{{domxref("SpeechRecognitionEvent")}}
+
The event object for the {{event("result")}} and {{event("nomatch")}} events, and contains all the data associated with an interim or final speech recognition result.
+
{{domxref("SpeechGrammar")}}
+
The words or patterns of words that we want the recognition service to recognize.
+
{{domxref("SpeechGrammarList")}}
+
Represents a list of {{domxref("SpeechGrammar")}} objects.
+
{{domxref("SpeechRecognitionResult")}}
+
Represents a single recognition match, which may contain multiple {{domxref("SpeechRecognitionAlternative")}} objects.
+
{{domxref("SpeechRecognitionResultList")}}
+
Represents a list of {{domxref("SpeechRecognitionResult")}} objects, or a single one if results are being captured in {{domxref("SpeechRecognition.continuous","continuous")}} mode.
+
+ +

Speech synthesis

+ +
+
{{domxref("SpeechSynthesis")}}
+
The controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.
+
{{domxref("SpeechSynthesisErrorEvent")}}
+
Contains information about any errors that occur while processing {{domxref("SpeechSynthesisUtterance")}} objects in the speech service.
+
{{domxref("SpeechSynthesisEvent")}}
+
Contains information about the current state of {{domxref("SpeechSynthesisUtterance")}} objects that have been processed in the speech service.
+
{{domxref("SpeechSynthesisUtterance")}}
+
Represents a speech request. It contains the content the speech service should read and information about how to read it (e.g. language, pitch and volume.)
+
+ +
+
{{domxref("SpeechSynthesisVoice")}}
+
Represents a voice that the system supports. Every SpeechSynthesisVoice has its own relative speech service including information about language, name and URI.
+
{{domxref("Window.speechSynthesis")}}
+
Specced out as part of a [NoInterfaceObject] interface called SpeechSynthesisGetter, and Implemented by the Window object, the speechSynthesis property provides access to the {{domxref("SpeechSynthesis")}} controller, and therefore the entry point to speech synthesis functionality.
+
+ +

Examples

+ +

The Web Speech API repo on GitHub contains demos to illustrate speech recognition and synthesis.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Speech API')}}{{Spec2('Web Speech API')}}Initial definition
+ +

Browser compatibility

+ +

SpeechRecognition

+ +
+ + +

{{Compat("api.SpeechRecognition", 0)}}

+ +

SpeechSynthesis

+ + + +

{{Compat("api.SpeechSynthesis", 0)}}

+ +

See also

+ + +
diff --git a/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html b/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html new file mode 100644 index 0000000000..407de0e10d --- /dev/null +++ b/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html @@ -0,0 +1,301 @@ +--- +title: Uso de la Web Speech API +slug: Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API +translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API +--- +

La API Web Speech API proporciona dos funcionalidades distintas — reconocimiento de voz, y síntesis de voz (también conocido como texto a voz o tts) — lo que nos ofrece nuevas e interesantes posibilidades para accesibilidad y otros mecanismos. Este artículo ofrece una breve introducción en las dos áreas, así como unas demos.

+ +

Reconocimiento de voz

+ +

El reconocimiento de voz implica recibir voz a través del micrófono de un dispositivo, luego es verificado por un servicio de reconocimiento de voz contra una lista de palabras o frases 'grammar' (esta lista básicamente es el vocabulario a reconocer en una app particular). Cuando se reconoce con éxito una palabra o frase, esta se devuelve como una cadena de texto y así poder iniciar otras acciones.

+ +

La API Web Speech tiene una interfaz principal de control para el - {{domxref ("SpeechRecognition")}} -, además de una serie de interfaces estrechamente relacionadas para representar la gramática, los resultados, etc. Normalmente, el sistema de reconocimiento de voz predeterminado que dispone el dispositivo se utilizará para el reconocimiento de voz: la mayoría de los sistemas operativos modernos tienen un sistema de reconocimiento de voz para emitir comandos de voz. Piense en Dictado en macOS, Siri en iOS, Cortana en Windows 10, Android Speech, etc.

+ +
+

Note: En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.

+
+ +

Demo

+ +

Para mostrar un uso sencillo del reconocimiento de voz Web, hemos escrito una demo llamada Speech color changer. Cuando se toca o hace click en la pantalla, se puede decir un color HTML, y el color de fondo de la aplicación cambiará a ese color.

+ +

The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.

+ +

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

+ +

Compatibilidad de navegadores

+ +

Actualmente, la compatibilidad de la Web Speech API para el reconocimiento de voz se limita a Chrome para escritorio y Android — Chrome tiene soporte desde la versión 33 pero con interfaces 'prefixed', por lo que se deben incluir ese tipo de interfaces 'prefixed', por ejemplo webkitSpeechRecognition.

+ +

HTML y CSS

+ +

El HTML y el CSS para esta app no son importantes. Solo tenemos un título, instrucciones en un párrafo, y un div dentro del cual visualizaremos los mensajes de diagnósticos.

+ +
<h1>Speech color changer</h1>
+<p>Tap/click then say a color to change the background color of the app.</p>
+<div>
+  <p class="output"><em>...diagnostic messages</em></p>
+</div>
+ +

El CSS proporciona un estilo responsive muy simple para que se visualice bien en todos los dispositivos.

+ +

JavaScript

+ +

Miremos el JavaScript con un poco más de detalle.

+ +

Compatibilidad con Chrome 

+ +

Como se ha mencionado anteriormente, Chrome actualmente admite el reconocimiento de voz con propiedades 'prefixed', por lo tanto, al principio de nuestro código incluiremos las siguientes líneas para usar los objetos que correspondan a Chrome, y así cualquier implementación en el futuro pueda admitir estas características sin ningún 'prefixed':

+ +
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
+ +

La gramática -grammar-

+ +

Las siguientes líneas de código definen la gramática que queremos que reconozca nuestra app. Se define una variable para contener nuestra gramática:

+ +
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
+ +

El formato usado para 'grammar' es JSpeech Grammar Format (JSGF) — Se puede encontrar más sobre las especificaciones de este formato en el anterior enlace. Sin embargo y por ahora vamos a echarle un vistazo rápidamente:

+ + + +

Conectando la gramática a nuestro reconocimiento de voz

+ +

Lo siguiente que tenemos que hacer es definir una instancia de reconocimiento de voz para el control en nuestra aplicación. Esto se hace usando el constructor {{domxref("SpeechRecognition.SpeechRecognition()", "SpeechRecognition()")}}. También creamos una lista de gramática de voz para contener nuestra gramática usando el constructor {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}}.

+ +
var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+ +

Añadimos nuestra  grammar  a la lista anterior usando el método {{domxref("SpeechGrammarList.addFromString()")}}. Este método acepta como parámetro la cadena que queremos añadir, así como opcionalmente, un valor que especifique la importancia de esta gramática en relación a otras gramáticas disponibles en la lista (el rango del valor va desde 0 hasta 1 inclusive). La gramática agregada está disponible en la lista como una instancia del objeto {{domxref("SpeechGrammar")}}.

+ +
speechRecognitionList.addFromString(grammar, 1);
+ +

Después añadimos la lista {{domxref("SpeechGrammarList")}} a la instancia del reconocimiento de voz estableciéndola en la propiedad {{domxref("SpeechRecognition.grammars")}}. También establecemos algunas otras propiedades a la instancia de reconocimiento antes de continuar:

+ + + +
recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+ +

Comenzando el reconocimiento de voz

+ +

Tomamos las referencias de la salida {{htmlelement("div")}} y del elemento HTML (para que podamos enviar mensajes de diagnostico y actualizar el color de fondo de la aplicación más adelante), e implementamos un manejador onclick para que cuando se haga click o se toque la pantalla, se inicie el reconocimiento de voz. Esto se logra llamando al método {{domxref("SpeechRecognition.start()")}}. El método forEach() se usa para visualizar indicadores de colores que muestran qué colores intenta decir.

+ +
var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+var hints = document.querySelector('.hints');
+
+var colorHTML= '';
+colors.forEach(function(v, i, a){
+  console.log(v, i);
+  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
+});
+hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+ +

Recepción y manejo de resultados

+ +

Una vez que comienza el reconocimiento de voz, hay muchos manejadores de eventos que se pueden usar para recuperar los resultados, así como otros elementos de información adicional (ver SpeechRecognition event handlers list.) El más común que probablemente usarás es {{domxref("SpeechRecognition.onresult")}}, el cual es lanzado cuando se recibe el resultado con éxito:

+ +
recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color + '.';
+  bg.style.backgroundColor = color;
+  console.log('Confidence: ' + event.results[0][0].confidence);
+}
+ +

La tercera línea es un poco más compleja, así que vamos a explicarla paso a paso. La propiedad {{domxref("SpeechRecognitionEvent.results")}} devuelve un objeto {{domxref("SpeechRecognitionResultList")}} que contiene los objetos {{domxref("SpeechRecognitionResult")}}. Tiene un getter para que pueda ser accesible como si fuera un array — así el primer [0] devuelve el SpeechRecognitionResult en la posición 0. Cada objeto SpeechRecognitionResult contiene objetos {{domxref("SpeechRecognitionAlternative")}} que contienen palabras individuales reconocidas. Estos también tienen getters para que se puedan acceder a ellos como arrays — por lo tanto el segundo [0] devuelve SpeechRecognitionAlternative en la posición 0. Luego devolvemos su propiedad transcript para obtener una cadena que contenga  el resultado individual reconocido como un string, estableciendo el color de fondo a ese color, e informando del color reconocido como un mensaje de diagnóstico en el IU.

+ +

También usamos el manejador {{domxref("SpeechRecognition.onspeechend")}} para parar el servicio de reconocimiento de voz (usando {{domxref("SpeechRecognition.stop()")}}) cuando se ha reconocido una sola palabra y se ha finalizado de hablar:

+ +
recognition.onspeechend = function() {
+  recognition.stop();
+}
+ +

Manejo de errores y voz no reconocida

+ +

Los dos últimos manejadores son para controlar los casos donde no se reconoce ninguna de las palabras definidas en la gramática, o cuando ocurre un error. {{domxref("SpeechRecognition.onnomatch")}} maneja el primer caso mencionado, pero tenga en cuenta que de momento no parece que se dispare correctamente; solo devuelve lo que ha reconocido:

+ +
recognition.onnomatch = function(event) {
+  diagnostic.textContent = 'I didnt recognise that color.';
+}
+ +

{{domxref("SpeechRecognition.onerror")}} maneja los casos donde se ha producido en error en el reconocimiento  — la propiedad {{domxref("SpeechRecognitionError.error")}} contiene el error devuelto:

+ +
recognition.onerror = function(event) {
+  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}
+ +

Síntesis de voz

+ +

La síntesis de voz (también  conocida como texto a voz o tts) implica recibir  contenido en forma de texto dentro de una aplicación y convertirla en voz a través del altavoz del dispositivo o de la conexión de salida del audio.

+ +

La Web Speech API tiene una interface principal controladora — {{domxref("SpeechSynthesis")}} — además de una serie de interfaces estrechamente relacionadas para representar  el texto que se va a sintetizar (conocido como dictados 'utterances'), voces que se usarán para los dictados, etc. De nuevo, la mayoría de sistemas operativos disponen de algún sistema de síntesis de voz que pueden serán usados por la API si están disponibles.

+ +

Demo

+ +

Para mostrar un uso sencillo de la síntesis de voz Web, tenemos la demo llamada Speak easy synthesis. Esta incluye un juego de controles de formulario para introducir texto a sintetizar, configurar el tono, velocidad de reproducción y la voz a usar cuando el texto sea pronunciado.  Después de introducir el texto se puede presionar Enter/Return para escucharlo.

+ +

UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.

+ +

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

+ +

Compatibilidad de navegadores

+ +

El soporte para la síntesis de voz Web Speech API solo ha llegado a los navegadores más importantes  y actualmente se limita a los siguientes:

+ + + +

HTML y CSS

+ +

El HTML y CSS de nuevo no son fundamentales, simplemente contiene un titulo, algunas instrucciones de uso y un formulario con algunos controles sencillos. El elemento {{htmlelement("select")}} inicialmente está vacío pero se rellena con {{htmlelement("option")}} mediante JavaScript (ver más adelante.)

+ +
<h1>Speech synthesiser</h1>
+
+<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
+
+<form>
+  <input type="text" class="txt">
+  <div>
+    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
+    <div class="rate-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <div>
+    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
+    <div class="pitch-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <select>
+
+  </select>
+</form>
+ +

JavaScript

+ +

Analicemos el JavaScript usado en esta app.

+ +

Configurar variables

+ +

En primer lugar, capturamos las referencias de todos los elementos DOM involucrados en la IU, pero lo más importante es capturar una referencia a  {{domxref("Window.speechSynthesis")}}. Este es el punto de entrada a la API — devuelve una instancia a {{domxref("SpeechSynthesis")}}, la interface controladora para la síntesis de voz en la web.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+ +

Rellenar el elemento select 

+ +

Para rellenar el elemento {{htmlelement("select")}} con las diferentes opciones de voz del que dispone el dispositivo, hemos escrito la función populateVoiceList(). Primero invocamos {{domxref("SpeechSynthesis.getVoices()")}}, que devuelve una lista de todas las voces disponibles representadas por objetos {{domxref("SpeechSynthesisVoice")}}. Después recorremos esa lista — para cada voz creamos un elemento {{htmlelement("option")}}, establecemos su contenido con el nombre de la voz (desde {{domxref("SpeechSynthesisVoice.name")}}), y el lenguaje de la misma (desde {{domxref("SpeechSynthesisVoice.lang")}}), y -- DEFAULT si la voz es la predeterminada para el motor de síntesis (verificando si {{domxref("SpeechSynthesisVoice.default")}} devuelve true.)

+ +

Para cada opción también creamos atributos data-, conteniendo el nombre y lenguaje de la voz asociada, para que más tarde podamos usarlos fácilmente, y después añadimos las opciones 'option' como hijos del select.

+ +
function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+ +

Cuando vamos a ejecutar la función hacemos lo siguiente debido a que Firefox no soporta {{domxref("SpeechSynthesis.onvoiceschanged")}}, y sólo devolverá una lista de voces cuando se ejecute {{domxref("SpeechSynthesis.getVoices()")}}. Sin embargo con Chrome solo hay que esperar a que se active el evento antes de rellenar la lista, de ahí la siguiente parte de código.

+ +
populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+ +

Reproduciendo el texto introducido

+ +

A continuación, creamos un manejador de eventos para comenzar a reproducir el texto introducido en el campo de texto. Usamos un manejador onsubmit en el formulario para que la acción ocurra cuando se presione Enter/Return. Primero creamos una nueva instancia de  {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} usando su constructor — a este se le pasa el valor de la entrada de texto como parámetro.

+ +

A continuación, debemos obtener la voz que queremos utilizar. Usamos la propiedad {{domxref("HTMLSelectElement")}} selectedOptions para devolver el elemento seleccionado {{htmlelement("option")}}. Entonces usamos el atributo de este elemento data-name, encontrando el objeto {{domxref("SpeechSynthesisVoice")}} cuyo nombre coincida con el valor del atributo. Y configuramos la propiedad de {{domxref("SpeechSynthesisUtterance.voice")}} con el valor que coincida con la opción seleccionada.

+ +

Por último, configuramos {{domxref("SpeechSynthesisUtterance.pitch")}} y {{domxref("SpeechSynthesisUtterance.rate")}} con los valores de los elementos del formulario correspondientes. Entonces y ya configurado todo lo necesario, comenzamos la reproducción invocando  {{domxref("SpeechSynthesis.speak()")}}, y pasándolo a la instancia {{domxref("SpeechSynthesisUtterance")}} como parámetro.

+ +
inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+ +

Al final del manejador incluimos un manejador {{domxref("SpeechSynthesisUtterance.onpause")}} para mostrar cómo usar {{domxref("SpeechSynthesisEvent")}}. Cuando se invoca a  {{domxref("SpeechSynthesis.pause()")}},este devuelve un mensaje informando del número y nombre del carácter en el que se detuvo la reproducción.

+ +
   utterThis.onpause = function(event) {
+    var char = event.utterance.text.charAt(event.charIndex);
+    console.log('Speech paused at character ' + event.charIndex + ' of "' +
+    event.utterance.text + '", which is "' + char + '".');
+  }
+ +

Por último, llamamos a blur() en la entrada de texto. Esto permite ocultar la entrada de texto en Firefox OS.

+ +
  inputTxt.blur();
+}
+ +

Actualizando los valores de tono y velocidad mostrados

+ +

La última parte del código simplemente actualiza los valores pitch/rate mostrados en la IU, cada vez que el slider cambia de posición.

+ +
pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+}
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+}
diff --git a/files/es/web/api/web_workers_api/index.html b/files/es/web/api/web_workers_api/index.html new file mode 100644 index 0000000000..3a055af3ca --- /dev/null +++ b/files/es/web/api/web_workers_api/index.html @@ -0,0 +1,226 @@ +--- +title: Web Workers API +slug: Web/API/Web_Workers_API +translation_of: Web/API/Web_Workers_API +--- +

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

+ +

Los Web Workers hacen posible ejecutar la operación de un script en un hilo en segundo plano separado de la ejecución el hilo principal de la aplicación web. La ventaja de esto es que un proceso laborioso puede actuar en un hilo separado, permitiendo al hilo principal (normlamente la UI) ejecutarse sin ser bloqueado o ralentizado.

+ +

Web Workers conceptos y uso

+ +

Un worker es un objeto que se crea a través del constructor ( {{domxref("Worker.Worker", "Worker()")}}) este ejecuta un archivo javascript — este fichero contiene los scripts que se van a ejecutan en el hilo del worker; los workers se ejecutan en un contexto global diferente al actual del navegador {{domxref("window")}}. Este contexto está representado por el objeto {{domxref("DedicatedWorkerGlobalScope")}} en el caso de los workers dedicados (los workers standard utilizan un solo script; y los shared workers usan {{domxref("SharedWorkerGlobalScope")}}).

+ +

Podemos ejecutar los script que necesitemos dentro del hilo del worker, pero con algunas excepciones. Por ejemplo no se puede manipular directamente el DOM, ni usar algunos métodos y propiedades por defecto del objeto {{domxref("window")}}. Pero puede usar un gran número de elementos que están dentro de window, incluyendo WebSockets, y data storage formas de almacenamiento como IndexedDB y solo en Firefox OS Data Store API.  Mira Funciones y clases disponibles para workers para saber más.

+ +

Los datos se comunican entre los workers y el hilo principal a través de un sistema de mensajes — tanto del hilo principal como del worker para enviar un mensaje se invoca al método postMessage() , y a través del listener del evento onmessage se pueden escuchar los mensajes (El mensaje está dentro de la propiedad data del evento) . Los datos se copian en lugar de compartirse.

+ +

Los workers también pueden generar nuevos workers, siempre que los workers estén en la misma página que el principal.  Además, los workers pueden usar XMLHttpRequest para la network I/O, con la excepción de que los atributos responseXML y channel de XMLHttpRequest siempre retornan valor null.

+ +

Ademas de los workers dedicados, hay otro tipo de workers:

+ + + +
+

Note: Según el Web workers Spec, los errores del worker no deberían bubujear (mira {{bug(1188141)}}. Esto está implementado en Firefox 42.

+
+ +

Web Worker interfaces

+ +
+
{{domxref("AbstractWorker")}}
+
Abstrae todas las propiedades y métodos comunes a toda clase de workers (i.e. {{domxref("Worker")}} or {{domxref("SharedWorker")}}).
+
{{domxref("Worker")}}
+
Representa el hilo del worker en ejecución, pudiendo pasar mensajes a este.
+
{{domxref("WorkerLocation")}}
+
Define la ruta absoluta del script que ejecuta el Worker.
+
+ +
+
{{domxref("SharedWorker")}}
+
Representa un tipo de worker al que se puede acceder desde distintos contextos de navegación, tanto de varias ventanas, iframes, y otros workers.
+
{{domxref("WorkerGlobalScope")}}
+
Representa el ámbito genérico de cualquier worker (similar a  {{domxref("Window")}} en un contenido web normal). Los diferentes tipos de workers tienen objetos de ámbito que heredan de esta interfaz y añade características más específicas.
+
{{domxref("DedicatedWorkerGlobalScope")}}
+
Representa el ámbito de un worker dedicado, hereda de {{domxref("WorkerGlobalScope")}} y añade algunas características.
+
{{domxref("SharedWorkerGlobalScope")}}
+
Representa el ámbito de un shared worke, hereda de {{domxref("WorkerGlobalScope")}} y añade algunas características.
+
{{domxref("WorkerNavigator")}}
+
Representa la identidad y estado del user agent (El cliente):
+
+ +

Examples

+ +

Hemos creado un par de demostraciones para ver su uso básico:

+ + + +

You can find out more information on how these demos work in Using web workers.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#workers')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
soporte básico4{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}10.010.64
Shared workers4{{CompatNo}}{{CompatGeckoDesktop(29)}}{{CompatNo}}10.64
Paso de datos usando structured cloning13{{CompatVersionUnknown}}{{CompatGeckoDesktop(8)}}10.011.56
Paso de datos usando transferable objects17 {{property_prefix("webkit")}}
+ 21		{{CompatNo}}{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[1]
+ 23		{{CompatVersionUnknown}}{{CompatGeckoDesktop(21)}}11156[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.44{{CompatVersionUnknown}}{{CompatGeckoMobile(1.9.1)}}1.0.110.011.55.1
Shared workers{{CompatNo}}4{{CompatNo}}291.4{{CompatNo}}{{CompatNo}}{{CompatNo}}
Pasando datos usando structured cloning{{CompatNo}}4{{CompatVersionUnknown}}81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Pasando datos usando transferable objects{{CompatNo}}{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] As webkitURL.

+ +

See also

+ + diff --git a/files/es/web/api/webgl_api/index.html b/files/es/web/api/webgl_api/index.html new file mode 100644 index 0000000000..28d94c22d4 --- /dev/null +++ b/files/es/web/api/webgl_api/index.html @@ -0,0 +1,98 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +

WebGL trae gráficos en 3D para la Web mediante la introducción de una API que cumple estrictamente la OpenGL ES 2.0 que se puede utilizar en elementos canvas HTML5. La compatibilidad para WebGL viene en Firefox 4 y se puede probar en las betas de Firefox 4 o en trunk builds. .

+ +
Nota: La especificación para WebGL se encuentra todavía en fase de borrador y sujeta a cambios.
+ + + + + + + + +
+

Temas sobre desarrollo

+ +
+
Primeros pasos con WebGL
+
Cómo crear un contexto WebGL.
+
Adición de contenido 2D a un contexto WebGL
+
Cómo representar formas planas sencillas utilizando WebGL.
+
Uso de sombreadores para aplicar color en WebGL
+
Muestra cómo agregar color a las formas mediante sombreadores.
+
Animación de objetos con WebGL
+
Muestra cómo rotar y trasladar los objetos para crear animaciones sencillas.
+
Creación de objetos 3D utilizando WebGL
+
Muestra cómo crear y animar un objeto 3D (en este caso, un cubo).
+
Uso de texturas en WebGL
+
Muestra cómo asignar texturas a las caras de un objeto.
+
Iluminación en WebGL
+
Cómo simular efectos de iluminación en tu contexto WebGL.
+
Animación de texturas en WebGL
+
Se muestra cómo animar texturas, en este caso, mediante la asignación de un vídeo Ogg a las caras de un cubo que gira.
+
+ 		+

Recursos

+ +
+
Especificación WebGL (Borrador de trabajo)
+
El borrador de la especificación WebGL.
+
Sitio de Khronos WebGL
+
El sitio web principal de WebGL en el Grupo Khronos.
+
Aprender WebGL
+
Un sitio con tutoriales sobre cómo usar WebGL.
+
La guía práctica de WebGL
+
Un sitio web con recetas muy útiles para escribir código WebGL.
+
Sylvester
+
Una biblioteca de código abierto para la manipulación de vectores y matrices.
+
Planeta WebGL
+
Un agregador de RSS para las personas que pertenecen a la comunidad WebGL.
+
+
+ +

Compatibilidad de los navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorCompatibilidad básica.getContext(context)
Internet Explorer------
Firefox (Gecko)4.0 (2)experimental-webgl
Opera------
Chrome9experimental-webgl
Safari6 (en Safari nightlies)experimental-webgl
+ +

 

diff --git a/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html new file mode 100644 index 0000000000..595b0f57f1 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -0,0 +1,276 @@ +--- +title: Agregando Contenido 2D en el Contexto WebGL +slug: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +
{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}
+ +

Una vez que has logrado crear el contexto WebGL, estás listo para crear objetos dentro del mismo. Algo sencillo que podemos hacer es pintar un simple cuadrado plano sin texturas, así que vamos a empezar desde ahí, creando el código para dibujar el cuadrado plano.

+ +

Dibujando la Escena

+ +

Lo mas importante que tenemos que entender antes de empezar, es que aún cuando dibujaremos un cuadrado plano en este ejemplo, estaremos trabajando en un espacio 3D. Lo que estaremos haciendo es dibujar un cuadrado plano y posicionándolo frente de la camara de forma perpendicular. Necesitaremos definir los Shaders que definirán el color para nuestra escena además de dibujar nuestro objeto. Esto establecerá cómo aparece el cuadrado plano en nuestra pantalla.

+ +

Los Shaders 

+ +

Los shaders usan especificamente OpenGL ES Shading Language. Los detalles de la forma de trabajar de los shaders estan fuera del alcance de este articulo, como tambien la sintaxis del lenguaje de los shaders sin embargo la version corta es que hay 2 tipos de shaders (funciones que se ejecutan en la GPU) que necesitas escribir.  shaders de vertices y shaders de fragmentos. Estos son pasados al WebGL como una cadena y compilados para ejecutarse en el GPU.

+ +

Shaders de Vértices

+ +

La responsabilidad de los Shaders de Vértices es asignar un valor a una variable especial gl_Position para crear los valores del espacio de trabajo (valores entre  -1 y +1) en toda la zona del canvas. En nuestro Shader de Vértices de abajo estamos recibiendo valores de un atributo que definiremos como aVertexPosition. Estamos entonces multiplicando esa posición por dos matrices 4x4 que definimos como uProjectionMatrix y uModelMatrix e igualando gl_Position al resultado. Para más información sobre proyección y otras matrices puedes encontrar útil este artículo.

+ +
  // Vertex shader program
+
+  const vsSource = `
+    attribute vec4 aVertexPosition;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    void main() {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+    }
+  `;
+
+ +

Shaders de Fragmentos

+ +

Cada vez que el Shader de Vértices escribe de 1 a 3 valores al gl_Position este también dibujará un punto, una linea o un triángulo. Mientras éste esta dibujando, llamará al Shader de Fragmentos y preguntará: ¿De qué color debería dibujar este pixel? En este caso, simplemente retornaremos blanco cada vez.

+ +

gl_FragColor es una variable built-in de GL que es usada para el color del fragmento. Al definir su valor se establece el color del pixel, como se ve a continuación:

+ +
  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;
+
+ +

Inicializando los shaders

+ +

Ahora que hemos definido los dos shaders, necesitamos pasarlos a WebGL, compilarlos y enlazarlos juntos. El código de abajo crea dos shaders al llamar loadShader, pasando el tipo y la fuente para el shader. Entonces crea un programa, adjunta los shaders y los enlaza juntos. Si la compilación o el enlace fallan, el código muestra una alerta.

+ +
//
+// Initialize a shader program, so WebGL knows how to draw our data
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Create the shader program
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // If creating the shader program failed, alert
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// creates a shader of the given type, uploads the source and
+// compiles it.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Send the source to the shader object
+
+  gl.shaderSource(shader, source);
+
+  // Compile the shader program
+
+  gl.compileShader(shader);
+
+  // See if it compiled successfully
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+
+ +

Para usar este código lo llamamos así:

+ +
  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+
+ +

Después de haber creado el programa de sombreado necesitaremos buscar las ubicaciones que WebGL asignó a nuestras entradas (inputs). En este caso tenemos un attribute y 2 uniforms. Los attribute reciben valores de los buffers. Cada iteración del Shader de Vértices recibe el siguiente valor desde el buffer asignado al attribute. Los uniforms son similares a variables globales en Javascript, estos mantienen el mismo valor para todas las iteraciones de un shader. Como las ubicaciones attribute y uniform son específicas de un solo programa de sombreado, los almacenamos juntos para que sean fáciles de pasar.

+ +
  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };
+
+ +

Creando el cuadrado plano

+ +

Antes de que podamos renderizar nuestro cuadrado plano, necesitamos crear el buffer que contenga sus posiciones de vértice y poner las posiciones de vértice en él. Lo haremos usando una función que llamaremos initBuffers(). Mientras vayamos explorando conceptos WebGL más avanzados, esta rutina crecerá para crear objetos 3D más y más complejos.

+ +
function initBuffers(gl) {
+
+  // Create a buffer for the square's positions.
+
+  const positionBuffer = gl.createBuffer();
+
+  // Select the positionBuffer as the one to apply buffer
+  // operations to from here out.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Now create an array of positions for the square.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Now pass the list of positions into WebGL to build the
+  // shape. We do this by creating a Float32Array from the
+  // JavaScript array, then use it to fill the current buffer.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}
+
+ +

Esta rutina es muy sencilla dada la naturaleza de la escena en este ejemplo. Empieza llamando el método {{domxref("WebGLRenderingContext.createBuffer()", "createBuffer()")}} del objeto gl para obtener un buffer dentro del cual almacenaremos las posiciones del vértice. Este es ligado al contexto al llamar el método {{domxref("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.

+ +

Una vez terminado, creamos un array de Javascript almacenando la posición de cada vértice en el cuadrado plano. Este es convertido entonces en un array de flotantes y es pasado al método {{domxref("WebGLRenderingContext.bufferData()", "bufferData()")}} del objeto gl para establecer las posiciones de vértice para el objeto.

+ +

Renderizando la escena

+ +

Una vez que los shaders estan establecidos, se buscan las ubicaciones, y las posiciones de vértice del cuadrado plano puestas en un buffer, podemos renderizar la escena. Como no estamos animando nada en este ejemplo, nuestra función drawScene() es muy simple. Esta usa unas rutinas de utilidad que cubriremos en breve.

+ +
function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
+  gl.clearDepth(1.0);                 // Clear everything
+  gl.enable(gl.DEPTH_TEST);           // Enable depth testing
+  gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Create a perspective matrix, a special matrix that is
+  // used to simulate the distortion of perspective in a camera.
+  // Our field of view is 45 degrees, with a width/height
+  // ratio that matches the display size of the canvas
+  // and we only want to see objects between 0.1 units
+  // and 100 units away from the camera.
+
+  const fieldOfView = 45 * Math.PI / 180;   // in radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js always has the first argument
+  // as the destination to receive the result.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Set the drawing position to the "identity" point, which is
+  // the center of the scene.
+  const modelViewMatrix = mat4.create();
+
+  // Now move the drawing position a bit to where we want to
+  // start drawing the square.
+
+  mat4.translate(modelViewMatrix,     // destination matrix
+                 modelViewMatrix,     // matrix to translate
+                 [-0.0, 0.0, -6.0]);  // amount to translate
+
+  // Tell WebGL how to pull out the positions from the position
+  // buffer into the vertexPosition attribute.
+  {
+    const numComponents = 2;  // pull out 2 values per iteration
+    const type = gl.FLOAT;    // the data in the buffer is 32bit floats
+    const normalize = false;  // don't normalize
+    const stride = 0;         // how many bytes to get from one set of values to the next
+                              // 0 = use type and numComponents above
+    const offset = 0;         // how many bytes inside the buffer to start from
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Tell WebGL to use our program when drawing
+
+  gl.useProgram(programInfo.program);
+
+  // Set the shader uniforms
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}
+
+
+ +

El primer paso es limpiar el canvas de nuestro color de fondo; establecemos la perspectiva de la cámara. Configuramos un campo de 45º, con una relación ancho/alto que coincide con las dimensiones de nuestro canvas. También especificamos que queremos objetos entre 0.1 y 100 unidades de la cámara para ser renderizados.

+ +

Entonces establecemos la posición del cuadrado plano al cargar la posición de identidad y alejando la cámara en 6 unidades. Déspues de eso, enlazamos el buffer del vértice del cuadrado al atributo que el shader estaba usando para aVertexPosition y le decimos a WebGL como jalar los datos fuera de este. Finalmente dibujamos el objeto al llamar el método {{domxref("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}

+ +

Ver código completo | Abrir esta demostración en una nueva página

+ +

Utilidades para operaciones de Matrices

+ +

Las operaciones de matrices pueden parecer complicadas pero en realidad son muy fáciles si las tomas un paso a la vez. Generalmente la gente usa una librería de matrices antes que escribir la suya. En nuestro caso estamos usando la popular librería glMatrix.

+ +

Ver también

+ + + +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html new file mode 100644 index 0000000000..ad9b98310a --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html @@ -0,0 +1,119 @@ +--- +title: Animación de Objetos con WebGL +slug: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

+ +

Our existing code from the previous examples is already configured to redraw our WebGL scene every 15 milliseconds. Until now, it's simply redrawing everything exactly the same way every time. It's time to change that, so that our square actually moves.

+ +

In this example, we'll actually rotate and move our 2D square in all three dimensions; this will prove that even though we're only creating a 2D object, it still exists in 3D space.

+ +

Making the square rotate

+ +

Let's start by making the square rotate. The first thing we'll need is a variable in which to track the current rotation of the square:

+ +
var squareRotation = 0.0;
+
+ +

Now we need to update the drawScene() function to apply the current rotation to the square when drawing it. After translating to the initial drawing position for the square, we apply the rotation like this:

+ +
mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+
+ +

This saves the current model-view matrix, then rotates the matrix by the current value of squareRotation, around the X and Z axes.

+ +

After drawing, we need to restore the original matrix:

+ +
  mvPopMatrix();
+
+ +

We save and restore the original matrix to avoid having this rotation applied to other objects we might draw.

+ +

To actually animate, we need to add code that changes the value of squareRotation over time. We can do that by creating a new variable to track the time at which we last animated (let's call it lastSquareUpdateTime), then adding the following code to the end of the drawScene() function:

+ +
  var currentTime = (new Date).getTime();
+  if (lastSquareUpdateTime) {
+  	var delta = currentTime - lastSquareUpdateTime;
+
+  	squareRotation += (30 * delta) / 1000.0;
+  }
+
+  lastSquareUpdateTime = currentTime;
+
+ +

This code uses the amount of time that's passed since the last time we updated the value of squareRotation to determine how far to rotate the square.

+ +

Making the square move

+ +

We can also move the square around by translating to a different position before drawing it. This example is going to do some very basic animation; obviously in the real world you'd want to do something less insane.

+ +

Let's track offsets to each axis for our translation in new variables:

+ +
var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+
+ +

And the amount by which to change our position on each axis in these variables:

+ +
var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+
+ +

Now we can simply add this code to the previous code that updates the rotation:

+ +
    squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+    squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+    squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+    if (Math.abs(squareYOffset) > 2.5) {
+      xIncValue = -xIncValue;
+      yIncValue = -yIncValue;
+      zIncValue = -zIncValue;
+    }
+
+ +

This causes our square to zoom around, moving haphazardly around the context as well as toward and away from the viewer, all while rotating. It looks rather like a screen saver.

+ +

If your browser supports WebGL, click here to take a look at this example in action.

+ +

More matrix operations

+ +

This example uses a few additional matrix operations, including two routines to push and pop matrices from a stack to preserve them, and one that rotates a matrix a given number of degrees. These follow, for your reference:

+ +
var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+
+ +

These routines were borrowed from a sample previously written by Vlad Vukićević.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

diff --git a/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html new file mode 100644 index 0000000000..0274f91187 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html @@ -0,0 +1,106 @@ +--- +title: Animating textures in WebGL +slug: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

En esta demostración nos basamos en el ejemplo anterior, solo que ahora reemplazaremos nuestra textura estática con los fotogramas de un video Ogg.

+ +

Esto es de hecho muy fácil de entender y de hacer, así que vamos a empezar. 

+ +

Podemos utilizar un código similar para usar, como fuente para las texturas, otros tipos de datos tales como {{ HTMLElement("canvas") }}.

+ +

Obteniendo acceso al video

+ +

El primer paso es añadir el HTML para crear el elemento {{ HTMLElement("video") }} que usaremos para obtener los fotogramas de video:

+ +
<video id="video">
+  Parece ser que tu navegador no soporta el elemento HTML5. <code>&lt;video&gt;</code>
+</video>
+
+ +

Esto simplemente crea un elemento para reproducir el archivo de video "Firefox.ogv". Usaremos CSS para ocultar el video

+ +
video {
+  display: none;
+}
+
+ +

Ahora pasamos al código JavasScript, empezando por añadir una línea de código a la función start() para obtener la referencia al elemento de video:

+ +
videoElement = document.getElementById("video");
+
+ +

Y reemplazamos el código que configura las llamadas de "interval-driven" en drawScecene() por esto:

+ +
videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+
+ +

Finalmente configuramos el atributo src para empezar a cargar el video. FIXME (bjacob): También se debe configurar preload="auto" o si no, el video nunca ejecuta canplaythrough en Firefox. En Chrome se debería cargar el video aun sin usar preload="auto".

+ +
video.preload = "auto";
+videoElement.src = "Firefox.ogv";
+ +

El objetivo aquí es no empezar la animación hasta que una parte suficiente del video se haya cargado de modo que pueda ser reproducido sin interrupciones. Para esto añadimos un event listener para esperar a que el elemento de video nos diga que ya ha cargado los suficientes datos como para reproducir el video puede ser reproducido sin pausas.

+ +

The startVideo() quedará así:

+ +
function startVideo() {
+  videoElement.play();
+  intervalID = setInterval(drawScene, 15);
+}
+
+ +

Esto simplemente reproduce el video, entonces establece las llamadas "interval-driven" a drawScene() para gestionar el renderizado del cubo.

+ +

Añadiremos también un segundo event listener en el "ended" del video de modo que cuando el video haya finalizado de reproducirse nosotros podamos parar la animación.

+ +
function videoDone() {
+  clearInterval(intervalID);
+}
+ +

La función de videoDone() simplemente llama a {{ domxref("window.clearInterval()") }}  para terminar de llamar a la función de actualizar la animación.

+ +

Usando los fotogramas del video como textura

+ +

El siguiente paso es initTexture(), el cual se ha vuelto mucho más simple desde que no es necesario cargar un archivo de imagen. En lugar de esto, todo lo que vamos a hacer es crear un objeto de textura vacío para configurar el filtering cuando lo usemos más tarde:

+ +
function initTextures() {
+  cubeTexture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+
+ +
La función updateTexture() quedaría así; Aquí es donde se realiza el trabajo real.
+ +
function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
+        gl.UNSIGNED_BYTE, videoElement);
+}
+
+ +

Has visto este código antes. Es prácticamente idéntico a la rutina de handleTextureLoaded() en el ejemplo anterior, excepto que cuando llamamos a texImage2D() en lugar de pasarle un objeto Image, lo pasamos en el elemento {{ HTMLElement("video") }}. Ya que WebGL sabe como obtener el fotograma actual y usarlo como textura.

+ +

updateTexture() se llama cada vez que estamos preparados para que la función drawScene() redibuje la escena. La única diferencia es que añadimos la llamada de updateTexture() antes de hacer nada más.

+ +

¡Esto es todo al respecto!

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}

+ +

Ver el código completo | Abrir esta demo en una nueva página

+ +

Artículos relacionados

+ + + +

{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html new file mode 100644 index 0000000000..a56004e010 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -0,0 +1,106 @@ +--- +title: Primeros pasos con WebGL +slug: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +tags: + - Intro + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

+ +

WebGL permite que el contenido web utilice una API basada en OpenGL ES 2.0 para llevar a cabo la representación 2D y 3D en un elemento canvas HTML en los navegadores que lo soporten sin el uso de plug-ins. WebGL consiste en código de control escrito en JavaScript y código de efectos especiales (código shader) que se ejecuta en la unidad de procesamiento gráfico de una computadora (GPU). Los elementos WebGL se pueden mezclar con otros elementos HTML y componerse con otras partes de la página o el fondo de la misma.

+ +

Este artículo le dará a conocer los conceptos básicos de WebGL. Se asume que ya tiene una comprensión de las matemáticas implicadas en gráficos 3D, y este artículo no pretende tratar de enseñar OpenGL en sí.

+ +

Preparando el renderizado en 3D

+ +

Lo primero que necesitas para poder usar WebGL para renderizar en 3D es un HTML canvas. El fragmento HTML a continuación establece un canvas y configura un controlador de eventos onload que se utilizarán para inicializar nuestro contexto WebGL.

+ +
<body onload="start()">
+  <canvas id="glcanvas" width="640" height="480">
+   Tu navegador parece no soportar el elemento HTML5 <code>&lt;canvas&gt;</code>.
+  </canvas>
+</body>
+
+ +

Preparando el contexto de WebGL

+ +

La función start(), en nuestro código JavaScript, es llamada después de que el documento fue cargado. Su misión es establecer el contexto WebGL y empezar a renderizar contenido.

+ +
var gl; // Un variable global para el contexto WebGL
+
+function start() {
+  var canvas = document.getElementById("glcanvas");
+
+  gl = initWebGL(canvas);      // Inicializar el contexto GL
+
+  // Solo continuar si WebGL esta disponible y trabajando
+
+  if (gl) {
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);                      // Establecer el color base en negro, totalmente opaco
+    gl.enable(gl.DEPTH_TEST);                               // Habilitar prueba de profundidad
+    gl.depthFunc(gl.LEQUAL);                                // Objetos cercanos opacan objetos lejanos
+    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);      // Limpiar el buffer de color asi como el de profundidad
+  }
+}
+
+ +

La primer cosa que hacemos aqui es obtener una referencia al canvas, ocultándolo en una variable llamada canvas. Obviamente si no necesitas referenciar repetidamente, deberías evitar guardar este valor globalmente, y solo guardarlo en una variable local o miembro de un objeto.

+ +

Una vez tenemos el canvas, llamamos a la función llamada initWebGL(); esta es una función que definiremos momentaneamente; su trabajo es inicializar el contexto WebGL.

+ +

Si el contexto es exitosamente inicializado, gl sera una referencia a este. En este caso, establecemos el color base a negro, después limpiamos el contexto a ese color. Después, el contexto es configurado estableciendo parametros. En este caso, estamos habilitando la prueba de profundidad y especificando que los objetos cercanos opacaran a los objetos lejanos.

+ +

Para los propositos de esta introducción al código, eso sera todo lo que haremos. Empezaremos a ver como crear algo después.

+ +

Crear el contexto de WebGL

+ +

La función initWebGL()se ve como esto:

+ +
function initWebGL(canvas) {
+  gl = null;
+
+  try {
+    // Tratar de tomar el contexto estandar. Si falla, retornar al experimental.
+    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  }
+  catch(e) {}
+
+  // Si no tenemos ningun contexto GL, date por vencido ahora
+  if (!gl) {
+    alert("Imposible inicializar WebGL. Tu navegador puede no soportarlo.");
+    gl = null;
+  }
+
+  return gl;
+}
+
+
+ +

Para obtener el contexto WebGL de un canvas, pedimo el contexto llamado "webgl" del canvas. Si este falla, intentamos con el nombre "experimental-webgl". Si este igualmente, falla, mostramos una alerta permitiendo al usuario conocer que parece no tener soporte WebGL. Eso es todo al respecto. En este punto, gl es nulo (no hay ningun contexto WebGL disponible) o es una referencia al contexto WebGL en donde renderizaremos.

+ +
Nota: El nombre de contexto "experimental-webgl" es nombre temporal para usar durante el desarrollo de las especificaciones; el nombre "webgl" sera usado una vez se termine el desarrollo.
+ +

En este punto, tienes suficiente código para que el contexto WebGL, inicialice exitosamente, y deberias terminar con una gran cuadro negro y vacio, listo y esperando a recibir contenido .

+ +

Prueba este ejemplo si estas usando un navegador compatible con WebGL.

+ +

Cambiando el tamaño del contexto WebGL

+ +

Un nuevo contexto WebGL establecera el tamaño de su ventana a la altura y anchura del elemento canvas, sin CSS, al instante el contexto fue obtenido. Editando el estilo del elemento canvas cambiara su tamaño mostrado pero no cambiara la resolución de renderizado. Editando los atributos de anchura y altura de un elemento canvas después de crear el contexto tampoco cambiara el numero de pixeles a ser renderizados. Para cambiar la resolución en la cual WebGL renderiza, como cuando el usuario cambia el tamaño de ventana de un canvas de documento completo o quieres proveer ajustes graficos ajustables dentro de la aplicación, necesitaras llamar a la función del contexto WebGL llamada viewport() para hacer efectivo el cambio.

+ +

Para modificar la resolución renderizada de un contexto WebGL con las variables gl y canvas como fue usado en el ejemplo de arriba:

+ +
gl.viewport(0, 0, canvas.width, canvas.height);
+ +

Un lienzo experimentara escalado cuando es renderizado en una resolución diferente a la establecida en el estilo CSS . Cambiar el tamaño con CSS es muy util para salvar recursos renderizando a una baja resolución y permitiendo que el navegador aumente la escala; bajar la escala es posible, lo que producira un efecto de Super Sample AntiAliasing (SSAA) (con resultados sencillos y un costo alto de rendimiento). Es mejor usar el MSAA (Multi Sample AntiAliasing) e implementar un filtrado de texturas en el navegador del usuario, si es que esta disponible y es apropiado, en lugar de hacerlo por medio de la fuerza bruta, esperando que el algoritmo de reducción de la imagen del navegador produzca un resultado limpio.

+ +

También podría interesarte

+ + + +

{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}

diff --git a/files/es/web/api/webgl_api/tutorial/index.html b/files/es/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..47a0aceb5e --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,42 @@ +--- +title: Tutoral de WebGL +slug: Web/API/WebGL_API/Tutorial +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

+
+ +

This tutorial describes how to use the <canvas> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.

+ +

Antes de que inicies

+ +

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

+ +

 

+ +

En este tutorial

+ +
+
Getting started with WebGL
+
How to set up a WebGL context.
+
Adding 2D content to a WebGL context
+
How to render simple flat shapes using WebGL.
+
Using shaders to apply color in WebGL
+
Demonstrates how to add color to shapes using shaders.
+
Animating objects with WebGL
+
Shows how to rotate and translate objects to create simple animations.
+
Creating 3D objects using WebGL
+
Shows how to create and animate a 3D object (in this case, a cube).
+
Using textures in WebGL
+
Demonstrates how to map textures onto the faces of an object.
+
Lighting in WebGL
+
How to simulate lighting effects in your WebGL context.
+
Animating textures in WebGL
+
Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.
+
diff --git a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html b/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html new file mode 100644 index 0000000000..91e6bf3d37 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html @@ -0,0 +1,133 @@ +--- +title: Creación de objetos 3D utilizando WebGL +slug: Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL +tags: + - Cubo 3D + - Objetos 3D + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

+ +

Vamos a llevar nuestro cuadrado hacia la tercera dimensión agregando cinco caras más para crear el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el método {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} por el uso de un arreglo de vértices como tabla, esto por medio del llamado hacia   {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

+ +

Considerar: cada cara cuatro vértices para su definición, pero cada vértice es compartido por 3 caras. Realizando una lista con los 24 vértices es como nosotros haremos un menor intercambio de datos, después haremos referencia hacia cada vértic por medio se su índice en la lista en lugar de pasar el juego entero de coordenadas. Si te preguntas por qué necesitamos 24 vértices, y no solo 8, es porque cada esquina pertenece a tres caras de diferente color, y un solo vértice necesita tener un solo color específico, por lo tanto crearemos 3 copias de cada vértice en tres colores diferentes, uno por cada cara.

+ +

Definir la posición de los vértices del cubo

+ +

Primero, construiremos el buffer para la posición de los vértices actualizando el código en initBuffers(). Esto es muy parecido a lo como si fuera para el cuadraro, pero más lardo debido a que ahora son 24 vértices (4 por lado):

+ +
var vertices = [
+  // Cara delantera
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // Cara trasera
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // Top face
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // Bottom face
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // Right face
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // Left face
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+
+ +

Definir los colores de los vértices

+ +

Necesitamos construir un arreglo de colores por cada uno de los 24 vertices. Este código comienza por definir un color para cada cara, después utiliza un ciclo para ensamblar el arreglo de colores por cada uno de los vértices.

+ +
var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // Cara delantera: blanco
+  [1.0,  0.0,  0.0,  1.0],    // Cara trasera: rojo
+  [0.0,  1.0,  0.0,  1.0],    // Cara superior: verde
+  [0.0,  0.0,  1.0,  1.0],    // Cara inferior: azul
+  [1.0,  1.0,  0.0,  1.0],    // Cara derecha: amarillo
+  [1.0,  0.0,  1.0,  1.0]     // Cara izquierda: morado
+];
+
+var generatedColors = [];
+
+for (j=0; j<6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i<4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+var cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+
+ +

Definir el elemento arreglo

+ +

Una ves que el vértice es generado, nosotros necesitamos contruir el elemento arreglo.

+ +
var cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// Este arrelgo define cada cara como 2 triángulos utilizando
+// los índices dentro de cada arreglo de vértices
+// para especificar cada posición en los tríangulos.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // enfrente
+  4,  5,  6,      4,  6,  7,    // atrás
+  8,  9,  10,     8,  10, 11,   // arriba
+  12, 13, 14,     12, 14, 15,   // fondo
+  16, 17, 18,     16, 18, 19,   // derecha
+  20, 21, 22,     20, 22, 23    // izquierda
+];
+
+// Ahora enviamos el elemento arreglo a  GL
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+
+ +

El arreglo cubeVertexIndices define cada cara como un par de triángulos, especificando cada vértice del triángulo como un índice dentro del arreglo de vértices en el cubo. Así el cubo es descrito como una colección de 12 triángulos. 

+ +

Dibujando el cubo

+ +

Para continuar necesitaremos agregar el código a nuestra función drawScene() esto para poder dibujar utilizando el buffer índice del cubo, agregaremos un nuevo llamado a  {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}}  y {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}como se muestra a continuación:

+ +
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ +

Desde que cada cara de nuestro cubo está compuesto de dos triángulos, tenemos 6 vértices en el cubo, se podría pensar que algunos de ellos son duplicados. Sin embargo, desde que nuestro arreglo índice se encuentra compuesto de enteros simples, esto no es una cantidad excesiva de intercambio de datos para pasar por cada cuadro de la animación.

+ +

En este punto ahora tenemos un cubo animado rebotando y rotando, cuenta con seis caras coloreadas vívidamente.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

+ +

Ver el Código completo | Abrir esta demostración en una página nueva

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html new file mode 100644 index 0000000000..25192a8281 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -0,0 +1,91 @@ +--- +title: Utilizar los shaders para aplicar color en WebGL +slug: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

+ +

Habiendo creado un cuadrado en la demostración anterior, el siguiente paso es agregar algo de color. Nosotros podemos hacer esto a través de los shaders.

+ +

Aplicando color a los vértices

+ +

En WebGL, los objetos son construidos  utilizando conjuntos de vértices, donde cada uno de ellos posee una posición y un color. Por defecto, los colores de los otros pixeles (y todos sus atributos, incluyendo la posición) son procesados utilizando interpolación, creando automáticamente gradientes suaves. Anteriormente, nuestro sombreador de vértices (vertex shader) no aplicaba ningún color específico a los vértices. Entre éste y el fragmento sombreado que asigna el color blanco fijo a cada pixel, todo el cuadrado se renderizó como blanco sólido.

+ +

Vamos a suponer que queremos desplegar un gradiente donde cada una de las esquinas tiene diferente color: rojo, azul, verde, y blanco. La primera tarea es establecer estos colores en los cuatro vértices. Para hacer esto, primero necesitamos crear una matriz de colores de vértices, después la guardaremos dentro del buffer WebGL. Podemos realizarlo agregando el siguiente código a nuestra función initBuffers(): 

+ +
  var colors = [
+    1.0,  1.0,  1.0,  1.0,    // blanco
+    1.0,  0.0,  0.0,  1.0,    // rojo
+    0.0,  1.0,  0.0,  1.0,    // verde
+    0.0,  0.0,  1.0,  1.0     // azul
+  ];
+
+  squareVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+
+ +

El código comienza por crear una matriz JavaScript que contenga cuatro vectores de 4 valores, para cada uno de los colores del vértice. Entonces se reserva un nuevo buffer WebGL para almacenar esos colores y la matriz se convierte en floats (Números de tipo flotante) y se almacena dentro del buffer.

+ +

Para designar los colores a utilizar, el vertex shader necesita ser actualizado para extraer el color apropiado del buffer de color:

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexPosition;
+      attribute vec4 aVertexColor;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vColor = aVertexColor;
+      }
+    </script>
+
+ +

La diferencia principal aquí es que, por cada vértice, vamos a establecer su color usando varying en el fragmento de sombreado.

+ +

Coloreando los fragments

+ +

Anteriormente utilizábamos el fragment shader como un actualizador:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      void main(void) {
+        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+      }
+    </script>
+
+ +

Según vayamos tomando el color interpolado para cada pixel, nosotros simplemente necesitamos cambiar esto para obtener el valor de la variable vColor:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+    	varying lowp vec4 vColor;
+
+      void main(void) {
+        gl_FragColor = vColor;
+      }
+    </script>
+
+ +

Es un cambio simple; cada fragmento simplemente recibe el color interpolado basado en su posición relativa a los vértices, en lugar que de un valor establecido.

+ +

Dibujando usando los colores

+ +

Como siguiente, es necesario agregar código hacia la rutina initShaders() esto para inicializar el atributo de color para el shader program:

+ +
  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+
+ +

Then, drawScene() puede ser revisado para que utilice dichos colores cuando dibuje el cuadrado:

+ +

gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer); gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}

+ +

Ver el código completo | Abrir demostración en una nueva página

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html b/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html new file mode 100644 index 0000000000..9d2be2d61b --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html @@ -0,0 +1,209 @@ +--- +title: Utilizando texturas en WebGL +slug: Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL +tags: + - Texturas + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

Ahora que nuestro programa de prueba tiene un cubo, asignemos una textura en lugar de tener sus caras de un color solido.

+ +

Cargando texturas

+ +

La primera cosa que debemos hacer es añadir el codigo para cargar nuestra textura. en nuestro caso, estaremos usando una unica textura, asignada en las seis caras de nuestro cubo rotador, pero la misma tecnica puede ser utilizada para cualquier cantidad de texturas.

+ +
Note: Es importante señalar que la carga de texturas sigue reglas de dominio-cruzado; Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.
+ +

El codigo que carga la textura se ve como esto:

+ +
function initTextures() {
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = 'cubetexture.png';
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

La rutina initTextures() comienza por crear el GL texture cubeTexture llamando la rutina GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Para cargar la textura desde un archivo de imagen, este luego crea un Objeto Imagen y carga en él el archivo de imagen que deseamos utilizar como nuestra textura. La rutina handleTextureLoaded() corre cuando la textura ha terminado de cargar.

+ +

Para realmente crear la textura, especificamos que la nueva textura es la textura actual en la que queremos operar vinculándola a gl.TEXTURE_2D. Despues de esto, la imagen cargada es pasada a  {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} para escribir la informacion de la imagen en la textura.

+ +
Nota: El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: "Texturas no potencia de dos", a continuación.
+ +

Las siguientes dos líneas setean el filtrado para la textura; Esto controla cómo se filtra la imagen mientras se escala. En este caso estamos usando linear filtering cuando escala la imagen, y mipmap cuando se hace mas pequeña. Entonces el mipmap es generado llamando {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}}, Y terminamos diciéndole a WebGL que hemos terminado de manipular la textura vinculando null a gl.TEXTURE_2D.

+ +

Texturas no potencia-de-dos

+ +

Generalmente hablando, Utilizar texturas cuyos lados son una potencia de dos es ideal. Están almacenadas eficientemente en la memoria de video y no están restringidas en cómo podrían ser utilizadas. Las texturas creadas por el artista deben ser escaladas hacia arriba o hacia abajo a una potencia cercana a dos y, realmente, debería haber sido creada en potencia-de-dos para empezar. Cada lado debe ser: 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 ó 2048 píxeles. Muchos dispositivos, pero no todos, pueden soportar 4096 píxeles; Algunos pueden soportar 8192 e incluso más.

+ +

Ocasionalmente, es difícil utilizar texturas en potencia-de-dos dada una circunstancia especifica. Si la fuente es alguna tercera parte, A menudo los mejores resultados vienen de modificar las imágenes usando canvas HTML5 en tamaños de potencia-de-dos antes de que se pasen a WebGL; Las coordenadas UV también pueden requerir ajuste si el estiramiento es notorio.

+ +

Pero, Si tiene que tener una textura no-potencia-de-dos (NPOT = no-power-of-two), WebGL incluye un limitado soporte nativo. Las texturas NPOT son en su mayoría útiles si las dimensiones de la textura debe ser la misma resolución que otra cosa, como la resolución de tu monitor, o si no vale la pena molestarse por las sugerencias anteriores. Resumiendo: estas texturas no se pueden usar con mipmapping y no deben repetirse (tile o wrap).

+ +

Un ejemplo de una textura es tilear una imagen de unos ladrillos para cubrir una pared de ladrillos.

+ +

Mipmapping y "UV tiling" pueden ser desactivados utilizando {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} y cuando creas tu textura utilizando {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}. Ésto permitirá las texturas NPOT a expensas de mipmapping, UV wrapping, UV tiling, y tu control sobre cómo el dispositivo procederá a manejar tu textura.

+ +
// gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Prevents s-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Prevents t-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ +

Una vez más, con estos parámetros, los dispositivos compatibles con WebGL aceptarán automáticamente cualquier resolución para esa textura (hasta sus dimensiones máximas). Sin realizar la configuración anterior, WebGL requiere que todas las muestras de texturas NPOT fallen al devolver el color "negro sólido": rgba (0,0,0,1).

+ +

Mapeando la textura en las caras

+ +

A este punto, la textura esta cargada y lista para usar. pero antes de utilizarla, Necesitamos asignar el mapeo de las coordenadas de textura a los vértices de las caras de nuestro cubo. Esto reemplaza todo el código previamente existente para configurar colores para cada una de las caras del cubo en initBuffers().

+ +
cubeVerticesTextureCoordBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+var textureCoordinates = [
+  // Front
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Back
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Top
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Bottom
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Right
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Left
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+              gl.STATIC_DRAW);
+
+ +

Primeramente, este codigo crea un GL buffer en el cual almacenaremos las coordenadas de la textura para cada cara, luego enlazamos ese buffer como el array en el cual escribiremos.

+ +

El array textureCoordinates define las coordenadas de textura correspondientes a cada vértice de cada cara. Tenga en cuenta que las coordenadas de textura van de 0,0 a 1,0; Las dimensiones de las texturas se normalizan a un rango de 0,0 a 1,0 independientemente de su tamaño real, con el propósito de mapeo de textura.

+ +

Una vez que hemos seteado la matriz de mapeo de textura, pasamos la matriz al búfer, de modo que GL tiene esos datos listos para su uso.

+ +

Actualizando los shaders

+ +

El shader -- y el código que inicializa los shaders -- también necesita ser actualizado para utilizar la textura en vez de un color solido.

+ +

Primero, echemos un vistazo a un cambio muy sencillo que se necesita en initShaders():

+ +
textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
+gl.enableVertexAttribArray(textureCoordAttribute);
+gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+ +

Esto reemplaza el código que setea el atributo "vertex color" (color del vertice) con uno que contiene la coordenada de textura para cada vértice.

+ +

El vertex shader

+ +

A continuación, necesitamos reemplazar el "vertex shader" de modo que en lugar de buscar datos de color, busque los datos de coordenadas de textura.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+  attribute vec2 aTextureCoord;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+  }
+</script>
+
+ +

El cambio clave aquí es que en lugar de buscar el color del vértice (vertex color), estamos estableciendo las coordenadas de textura; Esto indicará la ubicación dentro de la textura correspondiente al vértice.

+ +

El fragment shader

+ +

El fragment shader también debe actualizarse:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  varying highp vec2 vTextureCoord;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+  }
+</script>
+
+ +

En lugar de asignar un valor de color al fragment color, el fragment color se calcula recolectando el texel (es decir, el píxel dentro de la textura) que el muestreador dice que se corresponde mejor con la posición del fragment.

+ +

Dibujando el cubo texturado

+ +

El cambio a la función drawScene() es simple (excepto que por razones de claridad, he eliminado el código que hace que el cubo se traslade a través del espacio mientras se anima, en vez de eso, solo gira).

+ +

El código para mapear colores a la textura se ha ido, sustituido por esto:

+ +
gl.activeTexture(gl.TEXTURE0);
+gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
+
+ +

GL proporciona 32 registros de textura; La primera de ellas es gl.TEXTURE0. Vincularemos nuestra textura previamente cargada a ese registro, a continuación, establecremos el shader sampler uSampler (especificado en el shader) para utilizar esa textura.

+ +

En este punto, el cubo giratorio debe estar listo.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

+ +

Ver el código completo | Abrir esta demo en una nueva pestaña

+ +

Texturas entre dominios

+ +

La carga de texturas WebGL esta sujeta a controles de acceso entre dominios. Para que su contenido cargue una textura de otro dominio, La aprobacion CORS debe ser obtenida. Ver control de acceso HTTP para mas detalles sobre CORS.

+ +

Ver este articulo hacks.mozilla.org para una explicacion de como usar imágenes CORS-approved como texturas WebGL , con un ejemplo auto-contenido.

+ +
+

Nota: El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en {{Gecko ("8.0")}}.

+
+ +

Canvas 2D contaminados (Solo lectura) no pueden ser utilizados como texturas WebGL. una 2D {{ HTMLElement("canvas") }} se convierte en contaminada, por ejemplo, cuando una imagen de dominio cruzado (cross-domain) es dibujada en el.

+ +
+

Nota: El soporte de CORS para Canvas 2D drawImage se implementa en {{Gecko ("9.0")}}. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL. 

+
+ +
+

Nota: El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en {{Gecko ("12.0")}}.

+
+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/es/web/api/webrtc_api/index.html b/files/es/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..d4de66d803 --- /dev/null +++ b/files/es/web/api/webrtc_api/index.html @@ -0,0 +1,126 @@ +--- +title: API de WebRTC +slug: Web/API/WebRTC_API +tags: + - API + - WebRTC +translation_of: Web/API/WebRTC_API +--- +

{{WebRTCSidebar}}

+ +

WebRTC (Web real-time communications o comunicaciones web en tiempo real) es una tecnología que permite a aplicaciones y sitios web capturar y opcionalmente retransmitir audio/vídeo, así como intercambiar datos arbitrarios entre navegadores sin necesidad de un intermediario. El conjunto de estándares que comprende WebRTC hace posible compartir datos y realizar teleconferencias de igual-a-igual (peer-to-peer), sin requerir que el usuario instale complementos (plug-ins) o cualquier otro software de terceros.

+ +

WebRTC consta de varias API y protocolos interrelacionados que trabajan juntos para lograr esto. La documentación que encontrará aquí le ayudará a entender los fundamentos de WebRTC, cómo configurarlo y usar tanto datos como conexiones de medios, etc.

+ +

Referencia

+ +
+ +
+ +

Guías

+ +
+
Visión general de la arquitectura de WebRTC
+
Debajo de las API que los desarrolladores usan para crear y usar conexiones WebRTC se encuentran varios protocolos de red y estándares de conectividad. Esta breve descripción cubre estos estándares.
+
Lo esencial de WebRTC
+
Este artículo le muestra la creación de una aplicación RTC a través del navegador. Al final, debe tener un canal de datos punto a punto y un canal de medios en funcionamiento.
+
Protocolos de WebRTC
+
Este artículo presenta los protocolos sobre los cuales se construye la API WebRTC.
+
Conectividad de WebRTC
+
Este artículo describe cómo los diversos protocolos relacionados con WebRTC interactúan entre sí para crear una conexión y transferir datos y / o medios entre pares.
+
Nociones sobre la API WebRTC
+
WebRTC consta de varias API y protocolos interrelacionados que trabajan juntos para admitir el intercambio de datos y medios entre dos o más pares. Este artículo proporciona una breve descripción de cada una de estas API y para qué sirve.
+
Duración de una sesión de WebRTC
+
WebRTC le permite construir una comunicación punto a punto de datos arbitrarios, audio o video, o cualquier combinación de los mismos, en una aplicación de navegador. En este artículo, veremos la duración de una sesión de WebRTC, desde establecer la conexión hasta cerrarla cuando ya no sea necesaria.
+
+ +

Tutoriales

+ +
+
Improving compatibility using WebRTC adapter.js
+
The WebRTC organization provides on GitHub the WebRTC adapter to work around compatibility issues in different browsers' WebRTC implementations. The adapter is a JavaScript shim which lets your code to be written to the specification so that it will "just work" in all browsers with WebRTC support.
+
Taking still photos with WebRTC
+
This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.
+
A simple RTCDataChannel sample
+
The {{domxref("RTCDataChannel")}} interface is a feature which lets you open a channel between two peers over which you may send and receive arbitrary data. The API is intentionally similar to the WebSocket API, so that the same programming model can be used for each.
+
+ + + +

Protocolos

+ +

WebRTC-proper protocols

+ + + + + + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}The initial definition of the API of WebRTC.
{{SpecName('Media Capture')}}{{Spec2('Media Capture')}}The initial definition of the object conveying the stream of media content.
{{SpecName('Media Capture DOM Elements')}}{{Spec2('Media Capture DOM Elements')}}The initial definition on how to obtain stream of content from DOM Elements
+ +

In additions to these specifications defining the API needed to use WebRTC, there are several protocols, listed under resources.

+ + + + diff --git a/files/es/web/api/webrtc_api/protocols/index.html b/files/es/web/api/webrtc_api/protocols/index.html new file mode 100644 index 0000000000..efa90077fa --- /dev/null +++ b/files/es/web/api/webrtc_api/protocols/index.html @@ -0,0 +1,38 @@ +--- +title: WebRTC protocols +slug: Web/API/WebRTC_API/Protocols +translation_of: Web/API/WebRTC_API/Protocols +--- +

{{WebRTCSidebar}}

+ +

Este artículo presenta los protocolos sobre los cuales se construye la API WebRTC.

+ +

ICE

+ +

Interactive Connectivity Establishment (ICE) es un marco para permitir que su navegador web se conecte con sus compañeros. Hay muchas razones por las que una conexión directa de un par a otro simplemente no funcionará. Debe evitar los firewalls que evitarían abrir conexiones, darle una dirección única si, como en la mayoría de las situaciones, su dispositivo no tiene una dirección IP pública y transmitir datos a través de un servidor si su enrutador no le permite conectarse directamente con sus pares. ICE utiliza algunas de las siguientes técnicas que se describen a continuación para lograr esto:

+ +

STUN

+ +

Session Traversal Utilities for NAT (STUN) (acrónimo dentro de un acrónimo) es un protocolo para descubrir su dirección pública y determinar cualquier restricción en su enrutador que impida una conexión directa con un par.

+ +

El cliente enviará una solicitud a un servidor STUN en Internet que responderá con la dirección pública del cliente y si el cliente está accesible detrás del NAT del enrutador.

+ +

An interaction between two users of a WebRTC application involving a STUN server.

+ +

NAT

+ +

Network Address Translation (NAT) se usa para dar a su dispositivo una dirección IP pública. Un enrutador tendrá una dirección IP pública y cada dispositivo conectado al enrutador tendrá una dirección IP privada. Las solicitudes se traducirán de la IP privada del dispositivo a la IP pública del enrutador con un puerto único. De esa manera, no necesita una IP pública única para cada dispositivo, pero aún puede descubrirse en Internet.

+ +

Algunos enrutadores tendrán restricciones sobre quién puede conectarse a dispositivos en la red. Esto puede significar que aunque tengamos la dirección IP pública encontrada por el servidor STUN, nadie puede crear una conexión. En esta situación, debemos recurrir a TURN.

+ +

TURN

+ +

Algunos enrutadores que utilizan NAT emplean una restricción llamada "NAT simétrica". Esto significa que el enrutador solo aceptará conexiones de pares a los que se haya conectado previamente.

+ +

Traversal Using Relays around NAT (TURN) está destinado a eludir la restricción NAT simétrica al abrir una conexión con un servidor TURN y transmitir toda la información a través de ese servidor. Crearía una conexión con un servidor TURN y le diría a todos los pares que envíen paquetes al servidor que luego se le reenviarán. Obviamente, esto conlleva algunos gastos generales, por lo que solo se usa si no hay otras alternativas.

+ +

An interaction between two users of a WebRTC application involving STUN and TURN servers.

+ +

SDP

+ +

Session Description Protocol (SDP) es un estándar para describir el contenido multimedia de la conexión, como la resolución, los formatos, los códecs, el cifrado, etc., de modo que ambos pares puedan entenderse una vez que se transfieren los datos. Esto es, en esencia, los metadatos que describen el contenido y no el contenido de los medios en sí.

diff --git a/files/es/web/api/websocket/close_event/index.html b/files/es/web/api/websocket/close_event/index.html new file mode 100644 index 0000000000..da70792cdc --- /dev/null +++ b/files/es/web/api/websocket/close_event/index.html @@ -0,0 +1,72 @@ +--- +title: close +slug: Web/API/WebSocket/close_event +translation_of: Web/API/WebSocket/close_event +--- +

El manejador close es ejecutado cuando una conexión con un websocket es cerrada.

+ +

General info

+ +
+
Specification
+
WebSocket
+
Interface
+
Event
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
WebSocket
+
Default Action
+
None
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}El objetivo del evento (el objetivo superior en el árbol DOM).
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si el evento normalmente burbujea o no.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si el evento es cancelable o no.
+ + + + + +

See also

+ + diff --git a/files/es/web/api/websocket/index.html b/files/es/web/api/websocket/index.html new file mode 100644 index 0000000000..b281258e99 --- /dev/null +++ b/files/es/web/api/websocket/index.html @@ -0,0 +1,356 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +translation_of: Web/API/WebSocket +--- +
{{APIRef("Web Sockets API")}}{{SeeCompatTable}}
+ +
 
+ +
El objeto WebSocket provee la API para la creación y administración de una conexión WebSocket a un servidor, así como también para enviar y recibir datos en la conexión.
+ +
 
+ +
El constructor de WebSocket acepta un parámetro requerido y otro opcional.
+ +

 

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+
+ +

 

+ +
+
url
+
La URL a la cual se conecta, debe ser la URL con la cual el servidor WebSocket debe responder.
+
protocols {{optional_inline}}
+
Permite cualquier caso, desde un simple protocolo o un arreglo de cadenas de texto. Estas cadenas de texto son usadas para indicar subprotocolos, en los cuales un único servidor puede implementar múltiples subprotocolos para el WebSocket (por ejemplo, tu podrías esperar que un servido gestione diferentes tipos de interacciones dependiendo de un tipo específico de protocolo). Si no especificas un subprotocolo, se asume una cadena de texto vacía.
+
 
+
+ +

El constructor puede levantar excepciones:

+ +
+
SECURITY_ERR
+
El puerto en el cual la conexión se realiza se encuentra bloqueado.
+
+ +

Revisión de Métodos

+ + + + + + + + + + +
void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescricción
binaryType{{DOMXref("DOMString")}} +

Una cadena de texto indicando el tipo de dato binario que es transmitido por la conexión. Debe ser de cualquier manera "blob" si es se unas objetos DOM {{domxref("Blob")}}  o bien "arraybuffer" {{jsxref("ArrayBuffer")}} si se usan otro tipo de objetos

+
bufferedAmountunsigned long +

La cantidad de bytes de data que pueden ser almacenadas en cola utilizando llamadas a {{manch("send")}} pero que aún no se han transmitido a la red. Este valor se reestablece a cero una vez que toda la información ha sido enviada. Este valor no vuelve a cero cuando la conexión es cerrada; si mantientes llamando {{manch("send")}}, continuará acumulandose. Solo de lectura.

+
extensions{{DOMXref("DOMString")}} +

Las extensiones seleccionadas por el servidor. Esto solamente puede ser un string vacío o bien una lista de extensiones que es negociada por la conexión.

+
onclose{{domxref("EventListener")}} +

Un monitor de eventos que atiende una llamada cuando la conexión del WebSocket cambia a un estado CERRADO (CLOSED). El monitor recibe un CloseEvent llamado "cerrado".

+
onerror{{domxref("EventListener")}} +

Un monitor de eventos que es llamado cuando un error ocurre. Esto es un evento simple llamado "error"

+
onmessage{{domxref("EventListener")}} +

Un monitor de eventos que es llamado cuando un mensaje es recibido desde un servidor. El monitor recibe un objeto MessageEvent llamado "mensaje".

+
onopen{{domxref("EventListener")}}Un monitor de eventos que es llamado cuando el estado readyState de la conexión Websocket cambia a OPEN. Esto indica que la conexión está lista para enviar y recibir datos. El evento es uno simple con el nombre "open".
protocol{{DOMXref("DOMString")}}Una cadena indicando el nombre del sub-protocolo que el servidor ha seleccionado. Este puede ser una de las cadenas especificadas en el parámetro protocols cuando se ha creado el objeto Websocket.
readyStateunsigned shortEl estado actual de la conexión. Este es uno de {{anch("Ready state constants")}}. Solo lectura.
url{{DOMXref("DOMString")}}La URL como la resuelve el constructor. Esto siempre es una URL absoluta. Solo lectura.
+ +

Constantes

+ +

Ready state constants

+ +

Estas constantes son usadas por el atributo readyState para describir el estado de la conexión WebSocket.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstanteValorDescripción
CONNECTING0La conexión no está aún abierta.
OPEN1La conexión está abierta y lista para comunicar.
CLOSING2La conexión está siendo cerrada.
CLOSED3La conexión está cerrada o no puede ser abierta.
+ +

Métodos

+ +

close()

+ +

Cierra la conexión o intento de conexión del WebSocket si lo hay. Si la conexión ya está cerrada, no hace nada.

+ +
void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+
+ +

Parámetros

+ +
+
code {{optional_inline}}
+
Un valor numérico indicando el código de estado que explica porqué la conexión está siendo cerrada. Si no se especifica este parámetro, se asume un valor por defecto de 1000 (que indica un cierre normal por "transacción completa") . Ver códigos de estado en la página de CloseEvent para la lista de valores permitidos.
+
reason {{optional_inline}}
+
Una cadena legible explicando porqué la conexión está siendo cerrada. Esta cadena no puede ser mayor que 123 bytes de texto UTF-8 (no caracteres)
+
+ +

Exceptions thrown

+ +
+
INVALID_ACCESS_ERR
+
Se ha especificado un código erróneo.
+
SYNTAX_ERR
+
La reason cadena es demasiado larga o continene caracteres no validos.
+
+ +
+

Note: En Gecko, este métido no soporta ningun parámetro antes de Gecko 8.0 {{geckoRelease("8.0")}}.

+
+ +

send()

+ +

Transmite datos al servidor sobre la conexión WebSocket.

+ +
void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+
+ +

Parametros

+ +
+
data
+
Una cadena de texto que enviar al servidor.
+
+ +

Excepciones

+ +
+
INVALID_STATE_ERR
+
La conexión no está abierta en este momento.
+
SYNTAX_ERR
+
La data tiene caracteres no válidos que no se pueden decodificar.
+
+ +
+

Note: La implementación del método send() en el  motor de renderizado Gecko puede cambiar de la especificación en {{Gecko("6.0")}}; Gecko devuelve un boolean indicando si la conexión esta todavía abierta (y, por extensión, que los datos son encolados o trasmitidos satisfactoriamente). Esto ha sido corregido en {{Gecko("8.0")}}.

+ +

A partir de {{Gecko("11.0")}}, implementa {{jsxref("ArrayBuffer")}} pero no tipos de datos {{domxref("Blob")}}.

+
+ +

Ejemplo

+ +
// Crea una nueva conexión.
+const socket = new WebSocket('ws://localhost:8080');
+
+// Abre la conexión
+socket.addEventListener('open', function (event) {
+    socket.send('Hello Server!');
+});
+
+// Escucha por mensajes
+socket.addEventListener('message', function (event) {
+    console.log('Message from server', event.data);
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Websockets", "#the-websocket-interface", "WebSocket")}}{{Spec2("Websockets")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sub-protocol support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
Sub-protocol support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Starting in Gecko 6.0 {{geckoRelease("6.0")}}, the constructor is prefixed; you will need to use MozWebSocket(): var mySocket = new MozWebSocket("http://www.example.com/socketserver");

+ +

The extensions attribute was not supported in Gecko until Gecko 8.0.

+ +

Prior to Gecko 11.0 {{geckoRelease("11.0")}}, outbound messages sent using the send() method were limited to 16 MB. They can now be up to 2 GB in size.

+ +

Referencias adicionales

+ + diff --git a/files/es/web/api/websocket/onerror/index.html b/files/es/web/api/websocket/onerror/index.html new file mode 100644 index 0000000000..69a523b1b6 --- /dev/null +++ b/files/es/web/api/websocket/onerror/index.html @@ -0,0 +1,50 @@ +--- +title: WebSocket.onerror +slug: Web/API/WebSocket/onerror +tags: + - API + - Error + - Propiedad + - Referencia + - Web API + - WebSocket +translation_of: Web/API/WebSocket/onerror +--- +

{{APIRef("Web Sockets API")}}

+ +

La propiedad WebSocket.onerror, del tipo {{domxref("EventHandler")}}, será llamada cuando se dé un error. Esta llamada recibirá un tipo {{domxref("Event")}} como argumento.

+ +

Sintaxis

+ +
aWebSocket.onerror = function(event) {
+  console.error("Error en el WebSocket detectado:", event);
+};
+ +

Valor

+ +

Un {{domxref("EventListener")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#handler-websocket-onerror', 'WebSocket: onerror')}}{{Spec2('HTML WHATWG')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.WebSocket.onerror")}}

diff --git a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html new file mode 100644 index 0000000000..333e8e8830 --- /dev/null +++ b/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html @@ -0,0 +1,244 @@ +--- +title: Escribiendo un servidor WebSocket en C# +slug: Web/API/WebSockets_API/Escribiendo_servidor_WebSocket +tags: + - HTML5 + - Tutorial + - WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_server +--- +

Introducción

+ +

Si deseas utilizar la API WebSocket, es conveniente si tienes un servidor. En este artículo te mostraré como puedes escribir uno en C#. Tú puedes hacer esto en cualquier lenguaje del lado del servidor, pero para mantener las cosas simples y más comprensibles, elegí el lenguaje de Microsoft.

+ +

Este servidor se ajusta a RFC 6455 por lo que solo manejará las conexiones de Chrome version 16, Firefox 11, IE 10 and superiores.

+ +

Primeros pasos

+ +

WebSocket se comunica a través de conexiones TCP (Transmission Control Protocol), afortunadamente C# tiene una clase TcpListener la cual hace lo que su nombre sugiere. Esta se encuentra en el namespace System.Net.Sockets.

+ +
+

Es una buena idea usar la instrucción using para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.

+
+ +

TcpListener

+ +

Constructor:

+ +
TcpListener(System.Net.IPAddress localaddr, int port)
+ +

localaddr especifica la IP a escuchar y port especifica el puerto.

+ +
+

Para crear un objeto IPAddress desde un string, usa el método estático Parse de IPAddres.

+
+ +

Métodos:

+ + + +

Aquí está como utilizar lo que hemos aprendido:

+ +
​using System.Net.Sockets;
+using System.Net;
+using System;
+
+class Server {
+    public static void Main() {
+        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
+
+        server.Start();
+        Console.WriteLine("El server se ha iniciado en 127.0.0.1:80.{0}Esperando una conexión...", Environment.NewLine);
+
+        TcpClient client = server.AcceptTcpClient();
+
+        Console.WriteLine("Un cliente conectado.");
+    }
+}
+
+ +

TcpClient

+ +

Métodos:

+ + + +

Propiedades:

+ + + +

NetworkStream

+ +

Métodos:

+ +
Write(Byte[] buffer, int offset, int size)
+ +

Escribe bytes desde el buffer; el offset y el size determinan la longitud del mensaje.

+ +
Read(Byte[] buffer, int offset, int size)
+ +

Lee bytes al buffer; el offset y el size determinan la longitud del mensaje.

+ +

Ampliemos nuestro ejemplo anterior.

+ +
TcpClient client = server.AcceptTcpClient();
+
+Console.WriteLine("Un cliente conectado.");
+
+NetworkStream stream = client.GetStream();
+
+//enter to an infinite cycle to be able to handle every change in stream
+while (true) {
+    while (!stream.DataAvailable);
+
+    Byte[] bytes = new Byte[client.Available];
+
+    stream.Read(bytes, 0, bytes.Length);
+}
+ +

Handshaking

+ +

Cuando un cliente se conecta al servidor, envía una solicitud GET para actualizar la conexión al WebSocket desde una simple petición HTTP. Esto es conocido como handshaking.

+ +

Este código de ejemplo detecta el GET desde el cliente. Nota que esto bloqueará hasta los 3 primeros bytes del mensaje disponible. Soluciones alternativas deben ser investigadas para ambientes de producción.

+ +
using System.Text;
+using System.Text.RegularExpressions;
+
+while(client.Available < 3)
+{
+   // wait for enough bytes to be available
+}
+
+Byte[] bytes = new Byte[client.Available];
+
+stream.Read(bytes, 0, bytes.Length);
+
+//translate bytes of request to string
+String data = Encoding.UTF8.GetString(bytes);
+
+if (Regex.IsMatch(data, "^GET")) {
+
+} else {
+
+}
+ +

Esta respuesta es fácil de construir, pero puede ser un poco díficil de entender. La explicación completa del handshake al servidor puede encontrarse en  RFC 6455, section 4.2.2. Para nuestros propósitos, solo construiremos una respuesta simple.

+ +

Debes:

+ +
    +
  1. Obtener el valor de "Sec-WebSocket-Key" sin espacios iniciales ni finales de el encabezado de la solicitud
    2. +
  2. Concatenarlo con "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    3. +
  3. Calcular el código SHA-1 y Base64
    4. +
  4. Escribe el valor Sec-WebSocket-Accept en el encabezado como parte de la respuesta HTTP.
    5. +
+ +
if (new Regex("^GET").IsMatch(data)) {
+    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
+        + "Connection: Upgrade" + Environment.NewLine
+        + "Upgrade: websocket" + Environment.NewLine
+        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
+            SHA1.Create().ComputeHash (
+                Encoding.UTF8.GetBytes (
+                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
+                )
+            )
+        ) + Environment.NewLine
+        + Environment.NewLine);
+
+    stream.Write(response, 0, response.Length);
+}
+
+ +

Decoding messages

+ +

Luego de un handshake exitoso el cliente puede enviar mensajes al servidor, pero estos serán codificados.

+ +

Si nosotros enviamos "MDN", obtendremos estos bytes:

+ + + + + + + + + + + + + + + +
129131618435611216109
+ +

- 129:

+ + + + + + + + + + + + + + + + + + + + +
FIN (¿Es el mensaje completo?)RSV1RSV2RSV3Opcode
10000x1=0001
+ +

FIN: Puedes enviar tu mensaje en marcos, pero ahora debe mantener las cosas simples.
+ Opcode 0x1 significa que es un texto. Lista completa de Opcodes

+ +

- 131:

+ +

Si el segundo byte menos 128 se encuentra entre 0 y 125, esta es la longitud del mensaje. Si es 126, los siguientes 2 bytes (entero sin signo de 16 bits), si es 127, los siguientes 8 bytes (entero sin signo de 64 bits) son la longitud.

+ +
+

Puedo tomar 128, porque el primer bit siempre es 1.

+
+ +

- 61, 84, 35 y 6 son los bytes de la clave a decodificar. Cambian en cada oportunidad.

+ +

- Los bytes codificados restantes son el mensaje.

+ +

Algoritmo de decodificación

+ +

byte decodificado = byte codificado XOR (posición del byte codificado Mod 4) byte de la clave

+ +

Ejemplo en C#:

+ +
Byte[] decoded = new Byte[3];
+Byte[] encoded = new Byte[3] {112, 16, 109};
+Byte[] key = Byte[4] {61, 84, 35, 6};
+
+for (int i = 0; i < encoded.Length; i++) {
+    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
+}
+ +

Relacionado

+ + + +
 
diff --git a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html new file mode 100644 index 0000000000..1261f75bec --- /dev/null +++ b/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html @@ -0,0 +1,246 @@ +--- +title: Escribir servidores WebSocket +slug: Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

{{gecko_minversion_header("2")}}

+ +

Introducción

+ +

Un servidor WebSocket es simplemente una aplicación TCP que escucha en cualquier puerto de un servidor que sigue un protocolo específico. La tarea de crear un servidor propio personalizado suele asustar a los desarrolladores, sin embargo puede resultar muy fácil implementar un servidor WebSocket en la plataforma que elijas.

+ +

Un servidor WebSocket puede ser escrito en cualquier lenguaje de programación Server-Side que sea soporte Berkeley Sockets, como por ejemplo C++ o Python o inclusive PHP y JavaScript para servidores. Este no va a ser un tutorial para ningún lenguaje espefícamente sino que te ayudará a escribir tu propio servidor.
+
+ Necesitarás conocer como trabaja el protocolo HTTP y una experiencia intermedia en programación. Dependiendo de las capacidades de tu lenguaje puede ser necesario tener conocimientos en sockets TCP. Esta guía te dará el conocimiento necesario para escribir un servidor con WebSocket.

+ +
+

Lea las últimas especificaciones oficiales de WebSocket RFC 6455. Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.

+
+ +

Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores WebSocket usualmente estan separados y especializados (por una cuestión de balance de cargas y otra razones prácticas), por lo tanto deberías usar un Reverse Proxy (semejante a un servidor HTTP común) casi siempre para detectar los Handshakes de WebSocket, preprocesarlos, y reenviar los datos de los clientes al servidor WebSocket real.
+  

+ +

Paso 1: El Handshake del WebSocket

+ +

Antes que nada, el servidor debe escuchar las conexiones entrantes usando un socket TCP estandar. Dependiendo de tu plataforma, esto puede ser manejado por tí. Por ejemplo asumamos que tu servidor esta escuchando la dirección example.com en el puerto 8000, y tu socket en el servidor responde a la petición GET con /chat.

+ +
+

Advertencia: El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS). 

+
+ +

El Handshake es el puente desde HTTP a WS. En el Handshake se negocian los detalles de la conexión y cualquier de las partes pueden abandonar el proceso antes de completar dicha conexión si los términos no son favorables. El servidor debe ser cuidadoso al analizar lo que el cliente pide, de lo contrario podrían introducirse problemas de seguridad.

+ +

Petición de Handshake en el cliente

+ +

A pesar de que estamos creando un servidor, un cliente es quien tiene que comenzar el proceso de Handshake de WebSocket. Entonces tú tienes que saber cómo interpretar la petición del cliente. El cliente enviará una linda petición HTTP estandar que lucirá algo asi (la versión del HTTP debe ser 1.1 o mayor y el método debe ser GET):

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

El cliente puede solicitar aquí extensiones y/o sub protocolos; vea Misceláneos para más detalles. También, cabeceras comunes como User-Agent, Referer, Cookie, or cabeceras de autenticación podrían ser incluidos. Haz lo que quieras con ellos; no pertencen a WebSocket. También puedes ignorarlos. En muchas configuraciones comunes, un proxy inverso ya ha tratado con ellos.

+ +

Si alguna cabecera no se entiende o posee un valor incorrecto, el servidor debe responder "400 Bad Request" e inmediatamente cerrar la conexión. Normalmente, también puede dar la razón porque falló el handshake en el cuerpo de la respuesta HTTP, pero el mensaje podría no ser mostrado (el browser no lo muestra). Si el servidor no comprende que la versión del WebSockets, debería enviar una cabecera Sec-WebSocket-Version que contenga la(s) versión(es) no entendidas. (Esta guía explica v13, la más nueva). Ahora, vamos a ver la cabecera más curiosa, Sec-WebSocket-Key.

+ +
+

Tip: Todos los navegadores deben enviar una cabecera Origin. Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un 403 Forbidden si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso Origin.  La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.

+
+ +
+

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

+
+ +
+

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

+
+ +

Respuesta de Handshake del servidor

+ +

Después de la petición, el servidor debería enviar una linda respuesta (aunque todavía en formato HTTP) que se verá asi (hay que recordar que la cabecera termina con \r \n y agrega un \r \n extra después del último):

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Adicionalmente, el servidor puede decidir respecto de las solicitudes "extension/subprotocol" en este punto (ver Miscelláneos para más detalles). La cabecera Sec-WebSocket-Accept es interesante. El servidor debe derivarla a partir de la cabecera Sec-WebSocket-Key enviada anteriormente por el cliente. Para lograr esto se deben concatenar la cabecera del cliente Sec-WebSocket-Key y el string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es un "magic string"), calcular el hash SHA-1 del resultado y devolver el string codificado en base64 de este hash.

+ +
+

FYI: Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.

+
+ +

Así, si la cabecera Sec-WebSocket-Key era "dGhlIHNhbXBsZSBub25jZQ==", la correspondiente respuesta Sec-WebSocket-Accept será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Una vez que el servidor envía estas cabeceras, el "handshake" se considera completo y puedes comenzar a intercambiar datos.

+ +
+

El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.

+
+ +

Llevando registro de los clientes

+ +

Esto no está directamente relacionado con el protocolo WebSocket, pero no está de más mencionarlo: tu servidor debe llevar el registro de los sockets de los clientes, de manera de no realizar handshakes constantemente con los clientes que ya han completado este proceso. La misma dirección IP cliente puede intentar conectarse múltiples veces (pero el servidor puede denegar la conexión si se intentan demasiadas conexiones con el objetivo de evitar ataques ataques DoS).

+ +

Paso 2: Intercambiando Data Frames

+ +

Tanto el cliente como el servidor puede decidir enviar un mensaje en cualquier momento — ese es el encanto de los WebSockets. Sin embargo, extraer información de esos denominados "frames" o tramas de datos no es una experiencia muy mágica. Aunque todos los frames siguen el mismo formato específico, los datos que van del cliente al servidor se enmascaran utilizando el cifrado XOR (con una clave de 32 bits). La sección 5 de la especificación describe esto en detalle.

+ +

Formato

+ +

Cada trama de datos (desde el cliente al servidor o viceversa) sigue este mismo formato:

+ +
 0                   1                   2                   3
+ 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+
+ +

Los RSV1-3 se pueden ignorar, son para las extensiones.

+ +

El bit MASK simplemente indica si el mensaje está codificado. Los mensajes del cliente deben estar enmascarados, por lo que tu servidor debe esperar que valga 1. (De hecho, la sección 5.1 de las espeficicaciones  dice que tu servidor debe desconectarse de un cliente si ese cliente envía un mensaje sin enmascarar). Cuando se envía una trama al cliente, no lo ocultes y no pongas el bit de la máscara. Te explicaremos el enmascaramiento más tarde. Nota: Tienes que enmascarar los mensajes incluso cuando uses un socket seguro.

+ +

El campo opcode define cómo interpretar los datos de la carga útil:0x0 para continuar, 0x1 para texto (que siempre se codifica con UTF-8), 0x2 para datos binarios, otros llamados "códigos de control" se explican más tarde. En esta versión de WebSockets, de 0x3 a 0x7 y de 0xB a 0xF no tienen significado.

+ +

El bit FIN indica si este es el último mensaje de una serie. Si es 0, el servidor seguirá escuchando más partes del mensaje; de lo contrario, el servidor debería considerar el mensaje entregado. Más sobre esto después.

+ +

Decoding Payload Length

+ +

To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:

+ +
    +
  1. Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're done. If it's 126, go to step 2. If it's 127, go to step 3.
    2. +
  2. Read the next 16 bits and interpret those as an unsigned integer. You're done.
    3. +
  3. Read the next 64 bits and interpret those as an unsigned integer. You're done.
    4. +
+ +

Reading and Unmasking the Data

+ +

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

Now you can figure out what DECODED means depending on your application.

+ +

Message Fragmentation

+ +

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

+ +

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

+ +

Pings and Pongs: The Heartbeat of WebSockets

+ +

At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.

+ +

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

+ +
+

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

+
+ +

Step 4: Closing the connection

+ +

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

+ +

Miscellaneous

+ +
+

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

+
+ +

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

+ +

Extensions

+ +
+

This section needs expansion. Please edit if you are equipped to do so.

+
+ +

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

+ +
+

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

+
+ +

TODO

+ +

Subprotocols

+ +

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

+ +
+

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

+
+ +

A client has to ask for a specific subprotocol. To do so, it will send something like this as part of the original handshake:

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

or, equivalently:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

Now the server must pick one of the protocols that the client suggested and it supports. If there are more than one, send the first one the client sent. Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

The server can't send more than one Sec-Websocket-Protocol header.
+ If the server doesn't want to use any subprotocol, it shouldn't send any Sec-WebSocket-Protocol header. Sending a blank header is incorrect.
+ The client may close the connection if it doesn't get the subprotocol it wants.

+
+ +

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

+ +
+

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

+
+ + + + diff --git a/files/es/web/api/websockets_api/index.html b/files/es/web/api/websockets_api/index.html new file mode 100644 index 0000000000..e1c339558f --- /dev/null +++ b/files/es/web/api/websockets_api/index.html @@ -0,0 +1,172 @@ +--- +title: WebSockets +slug: Web/API/WebSockets_API +translation_of: Web/API/WebSockets_API +--- +

{{DefaultAPISidebar("Websockets API")}}

+ +

WebSockets es una tecnología avanzada que hace posible abrir una sesión de comunicación interactiva entre el navegador del usuario y un servidor. Con esta  API, puede enviar mensajes a un servidor y  recibir  respuestas controladas por eventos sin tener que consultar al servidor para una respuesta.

+ +

Interfaces

+ +
+
WebSocket
+
El interfaz principal para conectar a un servidor Websocket y así enviar y recibir datos a través de la conexión.
+
CloseEvent
+
El evento enviado por el objeto WebSocket cuando se cierra la conexión.
+
MessageEvent
+
El evento enviado por el objeto WebSocket cuando se recibe un mensaje enviado desde el servidor.
+
+ +
+

Herramientas

+ + + + + + +
+ +

Ver también

+ + + +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Versión -76  {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
Protocolo versión 7{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
Protocolo versión 1014{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
RFC 6455 (IETF Draft 17)16{{CompatGeckoDesktop("11.0")}}1012.10{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Versión -76  {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo versión 7{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Protocolo versión 8 (IETF draft 10){{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
RFC 6455 (IETF Draft 17)16{{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +

Notas para Gecko

+ +

La compatibilidad de Firefox con WebSockets ha seguido la evolución de la especificación WebSocket. Firefox 6 implementa la versión 7 del protocolo subyacente, mientras que Firefox 7 implementa la versión 8 (como especifica IETF draft 10). Firefox mobile tuvo compatibilidad con WebSocket en Firefox mobile 7.0.

+ +

Gecko 6.0

+ +

Prior to Gecko 6.0 {{geckoRelease("6.0")}}, there was, incorrectly, a WebSocket object that some sites were thinking implied that WebSocket services were not prefixed; this object has been renamed to MozWebSocket.

+ +

Gecko 7.0

+ +

Starting in Gecko 7.0 {{geckoRelease("7.0")}}, the network.websocket.max-connections preference is used to determine the maximum number of WebSocket connections that can be open at a time. The default value is 200.

+ +

Gecko 8.0

+ +

Starting in Gecko 8.0 {{geckoRelease("8.0")}}, the deflate-stream extension to the WebSocket protocol has been disabled, since it's been deprecated from the specification drafts. This resolves incompatibilities with some sites.

+ +

Gecko 11.0

+ +

Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size. They may now be up to 2 GB in size. Note, however, that memory limitations (especially on mobile devices) make that a theoretical maximum, not a practical one. In reality, transfers of that size will fail on devices that don't have enough memory.

+ +

Additionally, ArrayBuffer send and receive support for binary data has been implemented.

+ +

Starting in Gecko 11.0, the WebSocket API is no longer prefixed.

+ +
Warning: Among other things, a key reason WebSockets was disabled by default in Firefox 4 and 5 is the discovery of a security issue in the protocol's design. This was fixed in Firefox 6 by implementing a newer version of the protocol that corrects the problem.
+ +
{{HTML5ArticleTOC}}
diff --git a/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..3dda33b8da --- /dev/null +++ b/files/es/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,197 @@ +--- +title: Escribiendo aplicaciones con WebSockets +slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications +tags: + - Guía WebSocket WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +

{{ draft() }}

+ +

WebSockets es una tecnología basada en el protocolo ws, este hace posible establecer una conexión continua  full-duplex, entre un cliente y servidor. Un cliente websocket podría ser el navegador del usuario, pero el protocolo es una plataforma independiente.

+ +
Nota: Tenemos un ejemplo funcional de un sistema de chat/servidor usado para ejemplos de código que estará disponible una vez nuestra infraestructura esté en posición de hospedar ejemplos de WebSocket apropiadamente.
+ +

Disponibilidad de WebSockets

+ +

La API de WebSocket esta disponible para el código JavaScript cuyo alcance DOM sea un objeto {{ domxref("Window") }} o cualquier objeto implementando {{ domxref("WorkerUtils") }}; si es así, puedes usarlos desde los Web Workers.

+ +
Nota: La API de WebSockets (y el protocolo subyacente) continúan en activo desarrollo, y existen muchos problemas de compatibilidad entre los navegadores en este momento (e inclusive entre los diferentes lanzamientos del mismo navegador).
+ +

Creando un Objeto WebSocket

+ +

Para comunicarse utilizando  el protocolo webSocket, necesitarás crear un objeto WebSocket; este automáticamente abrirá una conexión temporal al servidor.

+ +

El constructor WebSocket requiere de un parámetro obligatorio y otro opcional:

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+
+ +
+
url
+
La url a la que conectar; esta es la URL a la que el WebSocket responde.
+
protocols {{ optional_inline() }}
+
Un string o array de strings con el/los protocolos a usar. Estos strings son usados para indicar sub-protocolos, para que el servidor pueda implementar multiples sub-protocolos WebSocket (por ejemplo, puede necesitar usar un servidor para manejar diferentes tipos de interacciones dependiendo del protocolo especificado). Si no se especifica el string como protocolo, se asumirá un string vacío.
+
+ +

El constructor puede lanzar excepciones:

+ +
+
SECURITY_ERR
+
El puerto de la conexión está siendo bloqueado.
+
+ +
+
+ +

Errores de conexión

+ +

Si ocurre un error al intentar conectar, lo primero que recibiremos será un evento con el nombre de "error" en el objeto WebSocket (de este modo se invoca el manejador onerror), y luego CloseEvent es enviado al objeto WebSocket (de este modo se invoca el manejador onclose), para indicar la razón del cierre de la conexión.

+ +

A partir de Firefox 11, es normal recibir un mensaje de error descriptivo  en la consola de la plataforma Mozilla, y un código de cierre como está definido en el RFC 6455, Section 7.4 a través de un CloseEvent.

+ +

Ejemplos

+ +

En este ejemplo de crea un nuevo WebSocket, conectandose al servidor ws://www.example.com/socketserver. El nombre del protocolo "protocolOne"  es el utilizado para la consulta del socket, aunque puede ser omitido.

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+
+ +

Como respuesta, exampleSocket.readyState es CONNECTING. El readyState será  OPEN una vez que la conexión este lista para transferir información.

+ +

Si se quiere establecer una conexión que soporte varios protocolos, se puede establecer un array de protocolos:

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+
+ +

Una vez que la conexión este establecida (readyState estará OPEN), exampleSocket.protocol te dirá qué protocolo ha seleccionado el servidor.

+ +

En los ejemplos anteriores ws sustituye http, y de igual manera wss sustituye a https. Al crear un WebSocket se hace uso del mecanismo Upgrade de HTTP, por lo que la petición de actualización del protocolo está implícita cuando accedemos al servidor HTTP con ws://www.example.com o wss://www.example.com.

+ +

Enviando Información al servidor

+ +

Una vez la conexión esta abierta, se puede comenzar a enviar datos al servidor. Para hacer esto, simplemente se llama al metodo send() del objeto WebSocket, cada vez que se desea enviar un mensaje:

+ +
exampleSocket.send("Here's some text that the server is urgently awaiting!");
+
+ +

Puedes enviar información como un string, {{ domxref("Blob") }}, o en un  ArrayBuffer.

+ +
Nota: Antes de la version 11, Firefox sólo soportaba el envío de datos como una cadena.
+ +

Como la conexión es asincronica y es propensa a fallar, no hay garantia de poder llamar al metodo send() inmediatamente despúes de haber creado el objeto WebSocket de manera exitosa. Para enviar información se debe estar seguro de que almenos una conexión ya esta abierta, usando el manejador onopen:

+ +
exampleSocket.onopen = function (event) {
+  exampleSocket.send("Here's some text that the server is urgently awaiting!");
+};
+
+ +

Usando JSON para transferir Objetos

+ +

Una forma de enviar información compleja al servidor es utilizar JSON. Por ejemplo, un programa para chatear puede interactuar con el servidor usando un protocolo que implementa el uso de paquetes de JSON:

+ +
// Envia texto a todos los usuarios através del servidor
+function sendText() {
+  // Se construye un Objeto msg que contiene la información que el servidor necesita procesar de ese cliente.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Send the msg object as a JSON-formatted string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Blank the text input element, ready to receive the next line of text from the user.
+  document.getElementById("text").value = "";
+}
+
+ +

Recibiendo mensajes del servidor

+ +

WebSockets API es un manejador de eventos; cuando el mensaje es recibido, un "message" el evento es pasado el manejador onmessage. Para escuchar la entrada de información, se puede hacer algo como lo siguiente:

+ +
exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+
+ +

Recibiendo e interpretando objetos JSON

+ +

Vamos a imaginar una aplicación de chat, donde el cliente usa JSON para transmitir objetos con información. Hay varios tipos de paquetes que el cliente recibirá:

+ + + +

El código que interpretará los mensajes entrantes será así:

+ +
exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
+      break;
+    case "message":
+      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
+      break;
+    case "rejectusername":
+      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i < msg.users.length; i++) {
+        ul += msg.users[i] + "<br>";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+
+ +

Se usa JSON.parse() para convertir el objeto JSON de vuelta al original, luego se examina y se realiza la acción pertinente.

+ +

Formato de texto de los datos

+ +

El texto recibido a través de la conexión WebSocket está en formato UTF-8.

+ +

Antes de Gecko 9.0 {{ geckoRelease("9.0") }}, algunos no-caracteres que siguen siendo texto UTF-8 válido podrían causar el cierre de la conexión. Ahora Gecko permite esos valores.

+ +

Cerrando la conexión

+ +

Cuando se ha terminado de usar la conexión WebSocket, se llama el método close() del objeto WebSocket:

+ +
exampleSocket.close();
+
+ +

Puede ser de gran ayuda revisar el atributo bufferedAmount del socket para verificar que toda la información ha sido enviada antes de intentar cerrar el socket.

+ +

Consideraciones de Seguridad

+ +

Los WebSockets no deben ser usados en entornos de contenido mixto; eso es, no debes abrir una conexión de WebSocket no segura desde una página cargada usando HTTPS o viceversa. De hecho, muchos navegadores solo admiten conexiones WebSocket seguras, y ya no soportan su uso en contextos no seguros.

+ +

{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}

diff --git a/files/es/web/api/webvr_api/index.html b/files/es/web/api/webvr_api/index.html new file mode 100644 index 0000000000..199e8f6458 --- /dev/null +++ b/files/es/web/api/webvr_api/index.html @@ -0,0 +1,256 @@ +--- +title: WebVR API +slug: Web/API/WebVR_API +tags: + - API + - Experimental + - Landing + - NeedsTranslation + - Reference + - TopicStub + - VR + - Virtual Reality + - WebVR +translation_of: Web/API/WebVR_API +--- +
{{SeeCompatTable}}{{APIRef("WebVR API")}}
+ +

WebVR proporciona soporte para la exposición de dispositivos de realidad virtual — por ejemplo el visualizador de Oculus Rift o HTC Vive — para aplicaciones web, permitiendo a los desarrolladores traducir la información de posición y movimiento del visualizador al movimiento alrededor de una escena en 3D. Esto tiene numerosas aplicaciones interesantes, desde visitas virtuales de productos y aplicaciones de capacitación interactiva hasta juegos inmersivos en primera persona.

+ +

Concepts and usage

+ +

Any VR devices attached to your computer will be returned by the {{domxref("Navigator.getVRDisplays()")}} method; each one will be represented by a {{domxref("VRDisplay")}} object.

+ +

Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"

+ +

{{domxref("VRDisplay")}} is the central interface in the WebVR API — via its properties and methods you can access functionality to:

+ + + +

A typical (simple) WebVR app would work like so:

+ +
    +
  1. {{domxref("Navigator.getVRDisplays()")}} is used to get a reference to your VR display.
    2. +
  2. {{domxref("VRDisplay.requestPresent()")}} is used to start presenting to the VR display.
    3. +
  3. WebVR's dedicated {{domxref("VRDisplay.requestAnimationFrame()")}} method is used to run the app's rendering loop at the correct refresh rate for the display.
    4. +
  4. Inside the rendering loop, you grab the data required to display the current frame ({{domxref("VRDisplay.getFrameData()")}}), draw the displayed scene twice — once for the view in each eye, then submit the rendered view to the display to show to the user ({{domxref("VRDisplay.submitFrame()")}}).
    5. +
+ +

In addition, WebVR 1.1 adds a number of events on the {{domxref("Window")}} object to allow JavaScript to respond to changes to the status of the display.

+ +
+

Note: You can find a lot more out about how the API works in our Using the WebVR API and WebVR Concepts articles.

+
+ +

Using controllers: Combining WebVR with the Gamepad API

+ +

Many WebVR hardware setups feature controllers that go along with the headset. These can be used in WebVR apps via the Gamepad API, and specifically the Gamepad Extensions API that adds API features for accessing controller pose, haptic actuators, and more.

+ +
+

Note: Our Using VR controllers with WebVR article explains the basics of how to use VR controllers with WebVR apps.

+
+ +

WebVR Interfaces

+ +
+
{{domxref("VRDisplay")}}
+
Represents any VR device supported by this API. It includes generic information such as device IDs and descriptions, as well as methods for starting to present a VR scene, retrieving eye parameters and display capabilities, and other important functionality.
+
{{domxref("VRDisplayCapabilities")}}
+
Describes the capabilities of a {{domxref("VRDisplay")}} — it's features can be used to perform VR device capability tests, for example can it return position information.
+
{{domxref("VRDisplayEvent")}}
+
Represents the event object of WebVR-related events (see the {{anch("Window", "window object extensions")}} listed below).
+
{{domxref("VRFrameData")}}
+
Represents all the information needed to render a single frame of a VR scene; constructed by {{domxref("VRDisplay.getFrameData()")}}.
+
{{domxref("VRPose")}}
+
Represents the position state at a given timestamp (which includes orientation, position, velocity, and acceleration.)
+
{{domxref("VREyeParameters")}}
+
Provides access to all the information required to correctly render a scene for each given eye, including field of view information.
+
{{domxref("VRFieldOfView")}}
+
Represents a field of view defined by 4 different degree values describing the view from a center point.
+
{{domxref("VRLayerInit")}}
+
Represents a layer to be presented in a {{domxref("VRDisplay")}}.
+
{{domxref("VRStageParameters")}}
+
Represents the values describing the the stage area for devices that support room-scale experiences.
+
+ +

Extensions to other interfaces

+ +

The WebVR API extends the following APIs, adding the listed features.

+ +

Gamepad

+ +
+
{{domxref("Gamepad.displayId")}} {{readonlyInline}}
+
Returns the {{domxref("VRDisplay.displayId")}} of the associated {{domxref("VRDisplay")}} — the VRDisplay that the gamepad is controlling the displayed scene of.
+
+ + + +
+
{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}
+
Returns an array containing every {{domxref("VRDisplay")}} object that is currently presenting ({{domxref("VRDisplay.ispresenting")}} is true).
+
{{domxref("Navigator.getVRDisplays()")}}
+
Returns a promise that resolves to an array of {{domxref("VRDisplay")}} objects representing any available VR displays connected to the computer.
+
+ +

Window events

+ +
+
{{domxref("Window.onvrdisplaypresentchange")}}
+
Represents an event handler that will run when the presenting state of a VR display changes — i.e. goes from presenting to not presenting, or vice versa (when the {{event("vrdisplaypresentchange")}} event fires).
+
{{domxref("Window.onvrdisplayconnect")}}
+
Represents an event handler that will run when a compatible VR display has been connected to the computer (when the {{event("vrdisplayconnect")}} event fires).
+
{{domxref("Window.onvrdisplaydisconnect")}}
+
Represents an event handler that will run when a compatible VR display has been disconnected from the computer (when the {{event("vrdisplaydisconnect")}} event fires).
+
{{domxref("Window.onvrdisplayactivate")}}
+
Represents an event handler that will run when a display is able to be presented to (when the {{event("vrdisplayactivate")}} event fires), for example if an HMD has been moved to bring it out of standby, or woken up by being put on.
+
{{domxref("Window.onvrdisplaydeactivate")}}
+
Represents an event handler that will run when a display can no longer be presented to (when the {{event("vrdisplaydeactivate")}} event fires), for example if an HMD has gone into standby or sleep mode due to a period of inactivity.
+
+ +

Unimplemented window events

+ +

The following events are listed in the spec, but do not currently seem to be implemented anywhere as yet.

+ +
+
{{domxref("Window.onvrdisplayblur")}}
+
Represents an event handler that will run when presentation to a display has been paused for some reason by the browser, OS, or VR hardware (when the {{event("vrdisplayblur")}} event fires) — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.
+
{{domxref("Window.onvrdisplayfocus")}}
+
Represents an event handler that will run when presentation to a display has resumed after being blurred (when the {{event("vrdisplayfocus")}} event fires).
+
+ +

Examples

+ +

You can find a number of examples at these locations:

+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Defines the Experimental Gamepad extensions.
{{SpecName('WebVR 1.1')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}[1]{{CompatVersionUnknown}}{{CompatGeckoDesktop(55)}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
Gamepad extensions{{CompatNo}}{{CompatNo}}{{CompatNo}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for AndroidSamsung Internet for GearVR
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(55)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[3]{{CompatVersionUnknown}}
+  
Gamepad extensions{{CompatNo}}{{CompatNo}}{{CompatNo}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] API Available on all platforms behind a flag, but currently only works on desktop in an experimental version of Chrome (other builds won't return any devices when {{domxref("Navigator.getVRDisplays()")}} is invoked).

+ +

[2] Currently only Windows support is enabled by default. Mac support is available in Firefox Nightly.

+ +

[3] Currently supported only by Google Daydream.

+ +

[4] Enabled in Firefox Nightly and Beta, versions 55 and above. Enabled/disabled by the dom.gamepad-extensions.enabled pref.

+ +

See also

+ + diff --git a/files/es/web/api/webvr_api/using_the_webvr_api/index.html b/files/es/web/api/webvr_api/using_the_webvr_api/index.html new file mode 100644 index 0000000000..0a4bc67e58 --- /dev/null +++ b/files/es/web/api/webvr_api/using_the_webvr_api/index.html @@ -0,0 +1,448 @@ +--- +title: Uso de la API de WebVR +slug: Web/API/WebVR_API/Using_the_WebVR_API +tags: + - '1.1' + - API + - Canvas + - Realidad Virtual + - Tutorial + - VR + - WebGL + - WebVR +translation_of: Web/API/WebVR_API/Using_the_WebVR_API +--- +
{{APIRef("WebVR API")}}
+ +

La API WebVR es una fantástica adición al kit de herramientas del desarrollador web, permitiendo que las escenas de WebGL sean presentadas en pantallas de realidad virtual como el Oculus Rift y HTC Vive. Pero, ¿cómo empezar a desarrollar aplicaciones VR para la Web? Este artículo le guiará a través de los fundamentos.

+ +
+

Nota: La versión más estable de la API de WebVR (1.1) se ha implementado recientemente en Firefox 55 (Windows en versión de lanzamiento y Mac OS X sólo en Nightly) y también está disponible en Chrome cuando se usa con hardware de Google Daydream. También hay una evolución posterior de la especificación 2.0, pero esto está en una etapa temprana ahora mismo. Puede encontrar información sobre el estado más reciente de las especificaciones en  WebVR Spec Version List.

+
+ +

Empezando

+ +

Para empezar, necesita:

+ + + +

Una vez que tengas todo montado, puedes probar si tu configuración funciona con WebVR yendo a nuestro simple A-Frame demo, y ver si la escena se procesa y si puede entrar en el modo de visualización VR pulsando el botón en la parte inferior derecha.

+ +

A-Frame es de lejos la mejor opción si desea crear una escena 3D compatible con WebVR rápidamente, sin necesidad de entender un montón de código nuevo de JavaScript. Sin embargo, no te enseña cómo funciona la API WebVR en bruto, y esto es lo que veremos a continuación.

+ +

Introduccion a nuestra demostración

+ +

Para ilustrar cómo funciona la API de WebVR, estudiaremos nuestro ejemplo raw-webgl-example, que se parece un poco a esto:

+ +

+ +
+

Nota: Puedes encontrar el código fuente de nuestra demo en  GitHub, y verlo en vivo también.

+
+ +
+

Nota: Si WebVR no funciona en su navegador, es posible que deba asegurarse de que se está ejecutando a través de su tarjeta gráfica. Por ejemplo, para las tarjetas NVIDIA, si el panel de control de NVIDIA se ha configurado correctamente, habrá una opción de menú contextual disponible - haga clic con el botón derecho del ratón en Firefox y seleccione Ejecutar con procesador gráfico > Procesador NVIDIA de alto rendimiento.

+
+ +

Nuestra demo presenta el santo grial de las demostraciones de WebGL - un cubo 3D giratorio. Hemos implementado esto usando raw WebGL API código. No enseñaremos ningún JavaScript básico o WebGL, solo las partes de WebVR.

+ +

Nuestra demo también cuenta con:

+ + + +

Cuando miras a través del código fuente de nuestro archivo JavaScript principal de demostraciones , puede encontrar fácilmente las partes específicas de WebVR buscando la cadena "WebVR" en comentarios anteriores.

+ +
+

Nota: Para obtener más información sobre JavaScript básico y WebGL, consulte nuestro material de aprendizaje JavaScrip , y nuestro WebGL Tutorial.

+
+ +

¿Como funciona?

+ +

En este punto, veamos cómo funcionan las partes WebVR del código.

+ +

Una típica (simple) aplicación WebVR funciona de esta manera:

+ +
    +
  1. {{domxref("Navigator.getVRDisplays()")}} se utiliza para obtener una referencia a la visualización VR.
    2. +
  2. {{domxref("VRDisplay.requestPresent()")}} se utiliza para iniciar la presentación en la pantalla VR.
    3. +
  3. WebVR's dedicado {{domxref("VRDisplay.requestAnimationFrame()")}} se utiliza para ejecutar el bucle de representación de la aplicación a la velocidad de actualización correcta para la pantalla.
    4. +
  4. Dentro del bucle de procesamiento, se capturan los datos necesarios para mostrar el marco actual ({{domxref("VRDisplay.getFrameData()")}}), dibuja la escena visualizada dos veces - una vez para la vista en cada ojo -  luego envia la vista renderizada a la pantalla para mostrar al usuario a través de ({{domxref("VRDisplay.submitFrame()")}}).
    5. +
+ +

En las secciones siguientes veremos en detalle nuestra demostración raw-webgl y veremos dónde se utilizan exactamente las características anteriores.

+ +

Comenzando con algunas variables

+ +

El primer código relacionado con WebVR que encontrarás es el siguiente bloque:

+ +
// WebVR variables
+
+var frameData = new VRFrameData();
+var vrDisplay;
+var btn = document.querySelector('.stop-start');
+var normalSceneFrame;
+var vrSceneFrame;
+
+var poseStatsBtn = document.querySelector('.pose-stats');
+var poseStatsSection = document.querySelector('section');
+poseStatsSection.style.visibility = 'hidden'; // hide it initially
+
+var posStats = document.querySelector('.pos');
+var orientStats = document.querySelector('.orient');
+var linVelStats = document.querySelector('.lin-vel');
+var linAccStats = document.querySelector('.lin-acc');
+var angVelStats = document.querySelector('.ang-vel');
+var angAccStats = document.querySelector('.ang-acc');
+var poseStatsDisplayed = false;
+ +

Vamos a explicar estos brevemente :

+ + + +

Cómo obtener una referencia a nuestra pantalla VR

+ +

Una de las principales funciones dentro de nuestro código es start () - ejecutamos esta función cuando el cuerpo ha terminado de cargar:

+ +
// start
+//
+// Called when the body has loaded is created to get the ball rolling.
+
+document.body.onload = start;
+ +

Para empezar, start() recupera un contexto de WebGL para usarlo para renderizar gráficos 3D {{htmlelement("canvas")}} elemento en our HTML. A continuación verificamos si la gl contexto está disponible — si es así, ejecutamos una serie de funciones para configurar la escena para su visualización.

+ +
function start() {
+  canvas = document.getElementById("glcanvas");
+
+  initWebGL(canvas);      // Initialize the GL context
+
+  // WebGL setup code here
+ +

Next, we start the process of actually rendering the scene onto the canvas, by setting the canvas to fill the entire browser viewport, and running the rendering loop (drawScene()) for the first time. This is the non-WebVR — normal — rendering loop.

+ +
    // draw the scene normally, without WebVR - for those who don't have it and want to see the scene in their browser
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    drawScene();
+ +

Now onto our first WebVR-specific code. First of all, we check to see if {{domxref("Navigator.getVRDisplays")}} exists — this is the entry point into the API, and therefore good basic feature detection for WebVR. You'll see at the end of the block (inside the else clause) that if this doesn't exist, we log a message to indicate that WebVR 1.1 isn't supported by the browser.

+ +
    // WebVR: Check to see if WebVR is supported
+    if(navigator.getVRDisplays) {
+      console.log('WebVR 1.1 supported');
+ +

Inside our if() { ... } block, we run the {{domxref("Navigator.getVRDisplays()")}} function. This returns a promise, which is fulfilled with an array containing all the VR display devices connected to the computer. If none are connected, the array will be empty.

+ +
      // Then get the displays attached to the computer
+      navigator.getVRDisplays().then(function(displays) {
+ +

Inside the promise then() block, we check whether the array length is more than 0; if so, we set the value of our vrDisplay variable to the 0 index item inside the array. vrDisplay now contains a {{domxref("VRDisplay")}} object representing our connected display!

+ +
        // If a display is available, use it to present the scene
+        if(displays.length > 0) {
+          vrDisplay = displays[0];
+          console.log('Display found');
+ +
+

Nota: Es poco probable que tenga varias pantallas VR conectadas a su computadora, y esto es sólo una demostración simple, por lo que esto lo hará por ahora.

+
+ +

Starting and stopping the VR presentation

+ +

Now we have a {{domxref("VRDisplay")}} object, we can use it do a number of things. The next thing we want to do is wire up functionality to start and stop presentation of the WebGL content to the display.

+ +

Continuing on with the previous code block, we now add an event listener to our start/stop button (btn) — when this button is clicked we want to check whether we are presenting to the display already (we do this in a fairly dumb fashion, by checking what the button textContent contains).

+ +

If the display is not already presenting, we use the {{domxref("VRDisplay.requestPresent()")}} method to request that the browser start presenting content to the display. This takes as a parameter an array of the {{domxref("VRLayerInit")}} objects representing the layers you want to present in the display.

+ +

Since the maximum number of layers you can display is currently 1, and the only required object member is the {{domxref("VRLayerInit.source")}} property (which is a reference to the {{htmlelement("canvas")}} you want to present in that layer; the other parameters are given sensible defaults — see {{domxref("VRLayerInit.leftBounds", "leftBounds")}} and {{domxref("VRLayerInit.rightBounds", "rightBounds")}})), the parameter is simply [{ source: canvas }].

+ +

requestPresent() returns a promise that is fulfilled when the presentation begins successfully.

+ +
          // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+          btn.addEventListener('click', function() {
+            if(btn.textContent === 'Start VR display') {
+              vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+                console.log('Presenting to WebVR display');
+ +

With our presentation request successful, we now want to start setting up to render content to present to the VRDisplay. First of all we set the canvas to the same size as the VR display area. We do this by getting the {{domxref("VREyeParameters")}} for both eyes using {{domxref("VRDisplay.getEyeParameters()")}}.

+ +

We then do some simple math to calculate the total width of the VRDisplay rendering area based on the eye {{domxref("VREyeParameters.renderWidth")}} and {{domxref("VREyeParameters.renderHeight")}}.

+ +
                // Set the canvas size to the size of the vrDisplay viewport
+
+                var leftEye = vrDisplay.getEyeParameters('left');
+                var rightEye = vrDisplay.getEyeParameters('right');
+
+                canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+                canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+ +

Next, we {{domxref("Window.cancelAnimationFrame()", "cancel the animation loop")}} previously set in motion by the {{domxref("Window.requestAnimationFrame()")}} call inside the drawScene() function, and instead invoke drawVRScene(). This function renders the same scene as before, but with some special WebVR magic going on. The loop inside here is maintained by WebVR's special {{domxref("VRDisplay.requestAnimationFrame")}} method.

+ +
                // stop the normal presentation, and start the vr presentation
+                window.cancelAnimationFrame(normalSceneFrame);
+                drawVRScene();
+ +

Finalmente, actualizamos el texto del botón para que la próxima vez que se presione, detenga la presentación en la pantalla VR.

+ +
                btn.textContent = 'Exit VR display';
+              });
+ +


+ To stop the VR presentation when the button is subsequently pressed, we call {{domxref("VRDisplay.exitPresent()")}}. We also reverse the button's text content, and swap over the requestAnimationFrame calls. You can see here that we are using {{domxref("VRDisplay.cancelAnimationFrame")}} to stop the VR rendering loop, and starting the normal rendering loop off again by calling drawScene().

+ +
            } else {
+              vrDisplay.exitPresent();
+              console.log('Stopped presenting to WebVR display');
+
+              btn.textContent = 'Start VR display';
+
+              // Stop the VR presentation, and start the normal presentation
+              vrDisplay.cancelAnimationFrame(vrSceneFrame);
+              drawScene();
+            }
+          });
+        }
+      });
+    } else {
+      console.log('WebVR API not supported by this browser.');
+    }
+  }
+}
+ +

Una vez iniciada la presentación, podrás ver la vista estereoscópica que se muestra en el navegador:

+ +

+ +

A continuación, aprenderá cómo se produce realmente la vista estereoscópica.

+ +

Why does WebVR have its own requestAnimationFrame()?

+ +

This is a good question. The reason is that for smooth rendering inside the VR display, you need to render the content at the display's native refresh rate, not that of the computer. VR display refresh rates are greater than PC refresh rates, typically up to 90fps. The rate will be differ from the computer's core refresh rate.

+ +

Note that when the VR display is not presenting, {{domxref("VRDisplay.requestAnimationFrame")}} runs identically to {{domxref("Window.requestAnimationFrame")}}, so if you wanted, you could just use a single rendering loop, rather than the two we are using in our app. We have used two because we wanted to do slightly different things depending on whether the VR display is presenting or not, and keep things separated for ease of comprehension.

+ +

Rendering and display

+ +

At this point, we've seen all the code required to access the VR hardware, request that we present our scene to the hardware, and start running the rending loop. Let's now look at the code for the rendering loop, and explain how the WebVR-specific parts of it work.

+ +

First of all, we begin the definition of our rendering loop function — drawVRScene(). The first thing we do inside here is make a call to {{domxref("VRDisplay.requestAnimationFrame()")}} to keep the loop running after it has been called once (this occurred earlier on in our code when we started presenting to the VR display). This call is set as the value of the global vrSceneFrame variable, so we can cancel the loop with a call to {{domxref("VRDisplay.cancelAnimationFrame()")}} once we exit VR presenting.

+ +
function drawVRScene() {
+  // WebVR: Request the next frame of the animation
+  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);
+ +

Next, we call {{domxref("VRDisplay.getFrameData()")}}, passing it the name of the variable that we want to use to contain the frame data. We initialized this earlier on — frameData. After the call completes, this variable will contain the data need to render the next frame to the VR device, packaged up as a {{domxref("VRFrameData")}} object. This contains things like projection and view matrices for rendering the scene correctly for the left and right eye view, and the current {{domxref("VRPose")}} object, which contains data on the VR display such as orientation, position, etc.

+ +

This has to be called on every frame so the rendered view is always up-to-date.

+ +
  // Populate frameData with the data of the next frame to display
+  vrDisplay.getFrameData(frameData);
+ +

Now we retrieve the current {{domxref("VRPose")}} from the {{domxref("VRFrameData.pose")}} property, store the position and orientation for use later on, and send the current pose to the pose stats box for display, if the poseStatsDisplayed variable is set to true.

+ +
  // You can get the position, orientation, etc. of the display from the current frame's pose
+
+  var curFramePose = frameData.pose;
+  var curPos = curFramePose.position;
+  var curOrient = curFramePose.orientation;
+  if(poseStatsDisplayed) {
+    displayPoseStats(curFramePose);
+  }
+ +

  We now clear the canvas before we start drawing on it, so that the next frame is clearly seen, and we don't also see previous rendered frames:

+ +
  // Clear the canvas before we start drawing on it.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+ +

We now render the view for both the left and right eyes. First of all we need to create projection and view locations for use in the rendering. these are {{domxref("WebGLUniformLocation")}} objects, created using the {{domxref("WebGLRenderingContext.getUniformLocation()")}} method, passing it the shader program's identifier and an identifying name as parameters.

+ +
  // WebVR: Create the required projection and view matrix locations needed
+  // for passing into the uniformMatrix4fv methods below
+
+  var projectionMatrixLocation = gl.getUniformLocation(shaderProgram, "projMatrix");
+  var viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");
+ +

The next rendering step involves:

+ + + +
  // WebVR: Render the left eye’s view to the left half of the canvas
+  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.leftProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
+  drawGeometry();
+ +

We now do exactly the same thing, but for the right eye:

+ +
  // WebVR: Render the right eye’s view to the right half of the canvas
+  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
+  gl.uniformMatrix4fv(projectionMatrixLocation, false, frameData.rightProjectionMatrix);
+  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
+  drawGeometry();
+ +

Next we define our drawGeometry() function. Most of this is just general WebGL code required to draw our 3D cube. You'll see some WebVR-specific parts in the mvTranslate() and mvRotate() function calls — these pass matrices into the WebGL program that define the translation and rotation of the cube for the current frame

+ +

You'll see that we are modifying these values by the position (curPos) and orientation (curOrient) of the VR display we got from the {{domxref("VRPose")}} object. The result is that, for example, as you move or rotate your head left, the x position value (curPos[0]) and y rotation value ([curOrient[1]) are added to the x translation value, meaning that the cube will move to the right, as you'd expect when you are looking at something and then move/turn your head left.

+ +

This is a quick and dirty way to use VR pose data, but it illustrates the basic principle.

+ +
  function drawGeometry() {
+    // Establish the perspective with which we want to view the
+    // scene. Our field of view is 45 degrees, with a width/height
+    // ratio of 640:480, and we only want to see objects between 0.1 units
+    // and 100 units away from the camera.
+
+    perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+    // Set the drawing position to the "identity" point, which is
+    // the center of the scene.
+
+    loadIdentity();
+
+    // Now move the drawing position a bit to where we want to start
+    // drawing the cube.
+
+    mvTranslate([
+                  0.0 - (curPos[0] * 25) + (curOrient[1] * 25),
+                  5.0 - (curPos[1] * 25) - (curOrient[0] * 25),
+                  -15.0 - (curPos[2] * 25)
+               ]);
+
+    // Save the current matrix, then rotate before we draw.
+
+    mvPushMatrix();
+    mvRotate(cubeRotation, [0.25, 0, 0.25 - curOrient[2] * 0.5]);
+
+    // Draw the cube by binding the array buffer to the cube's vertices
+    // array, setting attributes, and pushing it to GL.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
+    gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+
+    // Set the texture coordinates attribute for the vertices.
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+    gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+    // Specify the texture to map onto the faces.
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+    gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+    // Draw the cube.
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+    setMatrixUniforms();
+    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+    // Restore the original matrix
+
+    mvPopMatrix();
+  }
+
+ +

The next bit of the code has nothing to do with WebVR — it just updates the rotation of the cube on each frame:

+ +
  // Update the rotation for the next draw, if it's time to do so.
+
+  var currentTime = (new Date).getTime();
+  if (lastCubeUpdateTime) {
+    var delta = currentTime - lastCubeUpdateTime;
+
+    cubeRotation += (30 * delta) / 1000.0;
+  }
+
+  lastCubeUpdateTime = currentTime;
+ +

The last part of the rendering loop involves us calling {{domxref("VRDisplay.submitFrame()")}} — now all the work has been done and we've rendered the display on the {{htmlelement("canvas")}}, this method then submits the frame to the VR display so it is displayed on there as well.

+ +
  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
+  vrDisplay.submitFrame();
+}
+ +

Displaying the pose (position, orientation, etc.) data

+ +

In this section we'll discuss the displayPoseStats() function, which displays our updated pose data on each frame. The function is fairly simple.

+ +

First of all, we store the six different property values obtainable from the {{domxref("VRPose")}} object in their own variables — each one is a {{domxref("Float32Array")}}.

+ +
function displayPoseStats(pose) {
+  var pos = pose.position;
+  var orient = pose.orientation;
+  var linVel = pose.linearVelocity;
+  var linAcc = pose.linearAcceleration;
+  var angVel = pose.angularVelocity;
+  var angAcc = pose.angularAcceleration;
+ +

We then write out the data into the information box, updating it on every frame. We've clamped each value to three decimal places using toFixed(), as the values are hard to read otherwise.

+ +

You should note that we've used a conditional expression to detect whether the linear acceleration and angular acceleration arrays are successfully returned before we display the data. These values are not reported by most VR hardware as yet, so the code would throw an error if we did not do this (the arrays return null if they are not successfully reported).

+ +
  posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3);
+  orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3);
+  linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3);
+  angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3);
+
+  if(linAcc) {
+    linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3);
+  } else {
+    linAccStats.textContent = 'Linear acceleration not reported';
+  }
+
+  if(angAcc) {
+    angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3);
+  } else {
+    angAccStats.textContent = 'Angular acceleration not reported';
+  }
+}
+ +

WebVR events

+ +

The WebVR spec features a number of events that are fired, allowing our app code to react to changes in the state of the VR display (see Window events). For example:

+ + + +

To demonstrate how they work, our simple demo includes the following example:

+ +
window.addEventListener('vrdisplaypresentchange', function(e) {
+  console.log('Display ' + e.display.displayId + ' presentation has changed. Reason given: ' + e.reason + '.');
+});
+ +

As you can see, the {{domxref("VRDisplayEvent", "event object")}} provides two useful properties — {{domxref("VRDisplayEvent.display")}}, which contains a reference to the {{domxref("VRDisplay")}} the event was fired in response to, and {{domxref("VRDisplayEvent.reason")}}, which contains a human-readable reason why the event was fired.

+ +

This is a very useful event; you could use it to handle cases where the display gets disconnected unexpectedly, stopping errors from being thrown and making sure the user is aware of the situation. In Google's Webvr.info presentation demo, the event is used to run an onVRPresentChange() function, which updates the UI controls as appropriate and resizes the canvas.

+ +

Summary

+ +

This article has given you the very basics of how to create a simple WebVR 1.1 app, to help you get started.

diff --git a/files/es/web/api/webvtt_api/index.html b/files/es/web/api/webvtt_api/index.html new file mode 100644 index 0000000000..b7142d1dce --- /dev/null +++ b/files/es/web/api/webvtt_api/index.html @@ -0,0 +1,903 @@ +--- +title: Formato de pistas de texto para la web (WebVTT) +slug: Web/API/WebVTT_API +translation_of: Web/API/WebVTT_API +--- +
{{DefaultAPISidebar("WebVTT")}}
+ +

El formato de pistas de texto para la web (WebVTT) es un formato para mostrar pistas de texto en le tiempo (como subtítulos) usando el elemento {{HTMLElement("track")}}. El propósito principal de los archivos de WebVTT es superponer pistas de texto a un elemento {{HTMLElement("video")}}. WebVTT es un formato basado en el texto, que debe de ser codificado usando {{Glossary("UTF-8")}}. Donde puedes usar espacios también puedes usar tabulaciones. También hay una pequeña API disponible para representar y manejar estas pistas de texto y los datos necesarios para realizar la reproducción del texto en los momentos correctos.

+ +

Archivos WebVTT

+ +

El tipo MIME de los archivos WebVTT es text/vtt.

+ +

Un archivo WebVTT (.vtt) contiene apuntes, que pueden ser tanto de una línea como de varias, como se muestra debajo:

+ +
WEBVTT
+
+00:01.000 --> 00:04.000
+- Nunca bebas nitrógeno líquido.
+
+00:05.000 --> 00:09.000
+- Podría perforar tu estómago.
+- Podrías morir.
+
+NOTE Esta es la última línea en el archivo
+
+ +

Estructura WebVTT

+ +

La estructura de un archivo WevWTT consiste de los siguientes componentes, algunos de ellos opcionales, en este orden:

+ + + +
Ejemplo 1 - El archivo WebVTT más simple posible
+ +
WEBVTT
+
+ +
Ejemplo 2 - Archivo WebVTT muy simple con un encabezado de texto
+ +
WEBVTT - Este archivo no tiene anotaciones.
+
+ +
Ejemplo 3 - Ejemplo de un archivo WebVTT común con encabezado y anotaciones
+ +
WEBVTT - Este archivo tiene anotaciones.
+
+14
+00:01:14.815 --> 00:01:18.114
+- ¿Qué?
+- ¿Dónde estamos ahora?
+
+15
+00:01:18.171 --> 00:01:20.991
+- Este es el país de los murciélagos grandes.
+
+16
+00:01:21.058 --> 00:01:23.868
+- [ Murciélagos chillando ]
+- Ellos no se pondrán entu pelo. Ellos están persiguiendo a los bichos.
+
+ +

Estructura interna de un archivo WebVTT

+ +

Vamos a reexaminar uno de nuestros ejemplos previos, y mirar la estructura de las anotaciones con un poco más de detalle.

+ +
WEBVTT
+
+00:01.000 --> 00:04.000
+- Nunca bebas nitrógeno líquido.
+
+00:05.000 --> 00:09.000
+- Podría perforar tu estómago.
+- Podrías morir.
+
+NOTE Esta es la última línea en el archivo
+ +

En el caso de cada anotación:

+ + + +

También podemos poner comentarios en nuestro archivo .vtt, para ayudarnos a recorddar información importante sobre las partes de nuestro archivo. Estas deben estar en líneas separadas empezando con la cadena NOTE. Aprenderas más sobre eso en la siguiente sección.

+ +

Es importante no usar líneas en blanco extras dentro de una anotación, por ejemplo entre las líneas de tiempo y las anotaciones. WebVTT está basado en líneas, una línea en blanco finalizará la anotación.

+ +

Comentarios en WebVTT

+ +

Los comentarios son un componente opcional que se puede usar para añadir informacion a un archivo WebVTT. Los comentarios estan pensados para aquellos que leen el archivo y no se muestran con las pistas de texto. Los comentarios pueden contener saltos de línea pero no una línea en blanco, que es equivalente a dos saltos de línea consecutivos. Una línea en blanco indica el fin de un comentario.

+ +

Un comentario no puede contener la cadena de texto "-->", el símbolo &, o el signo de menor que (<). Si quisieses usar esos caracteres necesitarías hacer un escape usando por ejemplo &amp; para el símbolo &, y &lt; para menor que (<). Tambien es recomendado que uses la secuencia de escape de mayor que &gt; en vez de el simbo de mayor que (>) para evitar la confusión con etiquetas.

+ +

Un comentario consiste en tres partes:

+ + + +
Ejemplo 4 - Ejemplo común de WebVTT
+ +
NOTE Esto es un comentario
+
+ +
Ejemplo 5 - Comentario multilínea
+ +
NOTE
+Un comentario que está ocupando
+más de una línea.
+
+NOTE También puedes hacer un comentario
+que ocupe más de una línea de esta manera.
+
+ +
Ejemplo 6 - Uso común de comentarios
+ +
WEBVTT - Traducción de la película que me gusta
+
+NOTE
+Esta traducción esta hecha por Kyle para que
+Algunos amigos puedan verla con sus padres.
+
+1
+00:02:15.000 --> 00:02:20.000
+- Ta en kopp varmt te.
+- Det är inte varmt.
+
+2
+00:02:20.000 --> 00:02:25.000
+- Har en kopp te.
+- Det smakar som te.
+
+NOTE Esta ultima línea puede no estar bien traducida.
+
+3
+00:02:25.000 --> 00:02:30.000
+- Ta en kopp
+
+ +

Estilizando anotaciones WebVTT

+ +

Tu puedes estilizar anotaciones WebVTT buscado elementos que coincidan con el pseudoelemento {{cssxref("::cue")}}.

+ +

Dentro del CSS del sitio

+ +
video::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+
+video::cue(b) {
+  color: peachpuff;
+}
+
+ +

Aquí, todos los elementos de video estan estilizados para usar un gradiente gris como fondo, con "papayawhip" como color principal. Además el texto en negrita usando el elemento {{HTMLElement("b")}} tiene el color "peachpuff".

+ +

El ejemplo HTML de abajo actualemte se encarga de mostrar los archivos multimedia él solo.

+ +
<video controls autoplay src="video.webm">
+ <track default src="track.vtt">
+</video>
+
+ +

Within the WebVTT file itself

+ +

You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string "STYLE" all by itelf on a line of text, as shown below:

+ +
WEBVTT
+
+STYLE
+::cue {
+  background-image: linear-gradient(to bottom, dimgray, lightgray);
+  color: papayawhip;
+}
+/* Style blocks cannot use blank lines nor "dash dash greater than" */
+
+NOTE comment blocks can be used between style blocks.
+
+STYLE
+::cue(b) {
+  color: peachpuff;
+}
+
+00:00:00.000 --> 00:00:10.000
+- Hello <b>world</b>.
+
+NOTE style blocks cannot appear after the first cue.
+ +

We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:

+ +
WEBVTT
+
+1
+00:00.000 --> 00:02.000
+That’s an, an, that’s an L!
+
+crédit de transcription
+00:04.000 --> 00:05.000
+Transcrit par Célestes™
+
+ +
::cue(#\31) { color: lime; }
+::cue(#crédit\ de\ transcription) { color: red; }
+ +

Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):

+ +
WEBVTT
+
+00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
+Where did he go?
+
+00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
+I think he went down this lane.
+
+00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
+What are you waiting for?
+ +

WebVTT cues

+ +

A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:

+ + + +
Example 7 - Example of a cue
+ +
1 - Title Crawl
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+Some time ago in a place rather distant....
+ +

Cue identifier

+ +

The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "-->". It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).

+ +
Example 8 - Cue identifier from Example 7
+ +
1 - Title Crawl
+ +
Example 9 - Common usage of identifiers
+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+3
+00:00:34.159 --> 00:00:35.743
+Third
+
+ +

Cue timings

+ +

A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.

+ +

If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is chapters) then the file cannot have overlapping timings.

+ +

Each cue timing contains five components:

+ + + +

The timestamps must be in one of two formats:

+ + + +

Where the components are defined as follows:

+ + + +
Example 10 - Basic cue timing examples
+ +
00:00:22.230 --> 00:00:24.606
+00:00:30.739 --> 00:00:34.074
+00:00:34.159 --> 00:00:35.743
+00:00:35.827 --> 00:00:40.122
+ +
Example 11 - Overlapping cue timing examples
+ +
00:00:00.000 --> 00:00:10.000
+00:00:05.000 --> 00:01:00.000
+00:00:30.000 --> 00:00:50.000
+ +
Example 12 - Non-overlapping cue timing examples
+ +
00:00:00.000 --> 00:00:10.000
+00:00:10.000 --> 00:01:00.581
+00:01:00.581 --> 00:02:00.100
+00:02:01.000 --> 00:02:01.000
+ +

Cue settings

+ +

Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.

+ +

The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:

+ + + +
Example 13 - Cue setting examples
+ +

The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.

+ +
00:00:05.000 --> 00:00:10.000
+00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
+00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
+00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
+
+ +

Cue payload

+ +

The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

+ +

A cue text payload cannot contain the string "-->", the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.

+ +

In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 6 - Escape sequences
NameCharacterEscape Sequence
Ampersand&&amp;
Less-than<&lt;
Greater-than>&gt;
Left-to-right mark&lrm;
Right-to-left mark&rlm;
Non-breaking space &nbsp;
+ +

Cue payload text tags

+ +

There are a number of tags, such as <bold>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is chapters then you cannot use tags.

+ + + +

The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).

+ + + +

Interfaces

+ +

There are two interfaces or APIs used in WebVTT which are:

+ +

VTTCue interface

+ +

It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.

+ +

Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:

+ +
enum AutoKeyword { "auto" };
+enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
+enum LineAlignSetting { "start", "center", "end" };
+enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
+enum AlignSetting { "start", "center", "end", "left", "right" };
+[Constructor(double startTime, double endTime, DOMString text)]
+interface VTTCue : TextTrackCue {
+  attribute VTTRegion? region;
+  attribute DirectionSetting vertical;
+  attribute boolean snapToLines;
+  attribute (double or AutoKeyword) line;
+  attribute LineAlignSetting lineAlign;
+  attribute (double or AutoKeyword) position;
+  attribute PositionAlignSetting positionAlign;
+  attribute double size;
+  attribute AlignSetting align;
+  attribute DOMString text;
+  DocumentFragment getCueAsHTML();
+};
+ +

VTT Region interface

+ +

This is the second interface in WebVTT API.

+ +

The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:

+ +
enum ScrollSetting { "" /* none */, "up" };
+[Constructor]
+interface VTTRegion {
+  attribute double width;
+  attribute long lines;
+  attribute double regionAnchorX;
+  attribute double regionAnchorY;
+  attribute double viewportAnchorX;
+  attribute double viewportAnchorY;
+  attribute ScrollSetting scroll;
+};
+ +

Methods and properties

+ +

The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:

+ + + +

Tutorial on how to write a WebVTT file

+ +

There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:

+ +
    +
  1. Open a notepad.
    2. +
  2. The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:
    3. +
+ +
WEBVTT
+ +

      3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:

+ +
00:01.000 --> 00:05.000
+ +
    +
  1. On the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive.
    2. +
  2. Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
    3. +
+ +

CSS pseudo-classes

+ +

CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.

+ +

It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:

+ +
WEBVTT
+
+04:02.500 --> 04:05.000
+J’ai commencé le basket à l'âge de 13, 14 ans
+
+04:05.001 --> 04:07.800
+Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
+ +

In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <i> tag is for italics.

+ +

The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:

+ + + +

Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}Initial definition
+ +

Browser compatibility

+ +

VTTCue interface

+ +
+ + +

{{Compat("api.VTTCue", 0)}}

+ +

TextTrack interface

+ +
+ + +

{{Compat("api.TextTrack", 0)}}

+ +

Notes

+
+
+ +

Prior to Firefox 50, the AlignSetting enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value "middle" instead of "center". This has been corrected.

+ +

WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to true. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to false.

+ +

Prior to Firefox 58, the REGION keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports VTTRegion and its use; however, this feature is disabled by default behind the preference media.webvtt.regions.enabled; set it to true to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).

diff --git a/files/es/web/api/wheelevent/deltay/index.html b/files/es/web/api/wheelevent/deltay/index.html new file mode 100644 index 0000000000..68135cd221 --- /dev/null +++ b/files/es/web/api/wheelevent/deltay/index.html @@ -0,0 +1,95 @@ +--- +title: WheelEvent.deltaY +slug: Web/API/WheelEvent/deltaY +translation_of: Web/API/WheelEvent/deltaY +--- +

{{APIRef("DOM Events")}}

+ +

La propiedad de solo lectura WheelEvent.deltaY es un double que representa la cantidad de deslizamiento vertical en la unidad {{domxref("WheelEvent.deltaMode")}} .

+ +

Sintaxis

+ +
var dY = event.deltaY;
+ +

Ejemplo

+ +
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaY": 4, "deltaMode": 0});
+
+console.log(syntheticEvent.deltaY);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM3 Events','#widl-WheelEvent-deltaY','WheelEvent.deltaY')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

Compatibilidad de los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support31{{ CompatGeckoDesktop("17.0") }}{{ CompatIE("9.0") }} [1]189.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("17.0") }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
+
+ +

[1] IE9 soporta un viejo boceto de esta propuedad cuyo valor de retorno era un long en vez de un double.

+ +

Ver más

+ + diff --git a/files/es/web/api/wheelevent/index.html b/files/es/web/api/wheelevent/index.html new file mode 100644 index 0000000000..c53bbb87cc --- /dev/null +++ b/files/es/web/api/wheelevent/index.html @@ -0,0 +1,174 @@ +--- +title: WheelEvent +slug: Web/API/WheelEvent +tags: + - API + - DOM + - Interface + - Referencia + - WheelEvent + - eventos +translation_of: Web/API/WheelEvent +--- +

{{APIRef("DOM Events")}}

+ +

El interface WheelEvent retrata los eventos que ocurren cuando el usuario mueve la rueda del ratón o de un dispositivo similar.

+ +
+

Esta es la forma estándar de usar el evento wheel.

+ +

Antiguas versiones de navegadores implementaron dos formas no-estándar y no-compatibles-entre-navegadores, los interfaces {{ domxref("MouseWheelEvent") }} y {{domxref("MouseScrollEvent")}}. Utilice este interfaz y evite los dos últimos.

+
+ +

{{InheritanceDiagram}}

+ +

Constructor

+ +
+
{{domxref("WheelEvent.WheelEvent", "WheelEvent()")}}
+
Crea el objeto WheelEvent.
+
+ +

Propiedades

+ +

Este interfaz hereda propiedades de estos padres, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +
+
{{domxref("WheelEvent.deltaX")}} {{readonlyinline}}
+
Devuelve un doble (número de doble precisión) que representa la cantidad de desplazamiento horizontal.
+
{{domxref("WheelEvent.deltaY")}} {{readonlyinline}}
+
Devuelve un doble que representa la cantidad de desplazamiento vertical.
+
{{domxref("WheelEvent.deltaZ")}} {{readonlyinline}}
+
Devuelve un doble que representa la cantidad de desplazamiento del eje-z.
+
{{domxref("WheelEvent.deltaMode")}} {{readonlyinline}}
+
Devuelve un entero largo sin signo que representa la unidad manejada por los valores de cantidad de desplazamiento delta. Los valores permitidos son: + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
DOM_DELTA_PIXEL0x00Los valores delta están especificados en pixeles.
DOM_DELTA_LINE0x01Los valores delta están especificados en líneas.
DOM_DELTA_PAGE0x02Los valores delta están especificados en páginas.
+
+
+ +

Métodos

+ +

Este interfaz no define ningún método, pero hereda métodos de estos padres, {{domxref("MouseEvent")}}, {{domxref("UIEvent")}} y {{domxref("Event")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM3 Events','#interface-WheelEvent','WheelEvent')}}{{Spec2('DOM3 Events')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Implementación básica31{{ CompatVersionUnknown }}{{ CompatGeckoDesktop("17.0") }}{{ CompatIE("9.0") }}187.0
window.WheelEvent{{CompatVersionUnknown}}{{ CompatVersionUnknown }}{{ CompatGeckoDesktop("17.0") }}{{ CompatIE("9.0") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Implementación básica{{CompatVersionUnknown}}{{ CompatGeckoMobile("17.0") }}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}
window.WheelEvent{{CompatVersionUnknown}}{{ CompatGeckoMobile("17.0") }}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +

[1] Safari no implementa actualmente WheelEvent actually; sin embargo este devuelve un objeto para window.WheelEvent.

+ +

Ver también

+ + diff --git a/files/es/web/api/window/alert/index.html b/files/es/web/api/window/alert/index.html new file mode 100644 index 0000000000..fd7e9f7d01 --- /dev/null +++ b/files/es/web/api/window/alert/index.html @@ -0,0 +1,69 @@ +--- +title: Window.alert() +slug: Web/API/Window/alert +tags: + - Referencia + - metodo +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

El método Window.alert() muestra un diálogo de alerta con contenido opcional especificado y un botón OK (Aceptar).

+ +

Sintaxis

+ +
window.alert(message);
+ + + +

Ejemplo

+ +
window.alert("Hello world!");
+
+ +

produce:

+ +

Image:AlertHelloWorld.png

+ +

Más JS:

+ +
alert()
+ +

Notas

+ +

El diálogo alert debe ser usado para mensajes que no requieren respuesta por parte del usuario, otra que la aceptación del mensaje.

+ +

Los cuadros de diálogo son ventanas modales - previenen que el usuario acceda al resto de la interfaz del programa hasta que el diálogo sea cerrado. Por esta razón, no se debe abusar de cualquier función que crea cuadros de diálogo (o ventanas modales).

+ +

Los usuarios de Mozilla Chrome (p.ej. extensiones de Firefox) deben usar preferentemente métodos de {{interface("nsIPromptService")}}.

+ +

A partir de Chrome {{CompatChrome(46.0)}}, este método está bloqueado para los elementos {{htmlelement("iframe")}}, a menos que su atributo sandbox tenga el valor allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} El argumento es ahora opcional, como establece la especificación.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML5 Web application', '#dom-alert', 'alert()')}}{{Spec2('HTML5 Web application')}}Definición inicial
+ +

Véase también

+ + diff --git a/files/es/web/api/window/applicationcache/index.html b/files/es/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..37dac1f769 --- /dev/null +++ b/files/es/web/api/window/applicationcache/index.html @@ -0,0 +1,30 @@ +--- +title: window.applicationCache +slug: Web/API/Window/applicationCache +tags: + - Referencia_DOM_de_Gecko + - páginas_a_traducir +translation_of: Web/API/Window/applicationCache +--- +

{{ ApiRef() }} {{ Fx_minversion_header(3) }}

+ +

Resumen

+ +

Devuelve una referencia al objeto application cache para la ventana.

+ +

Sintaxis

+ +
cache = window.applicationCache
+
+ +

Parámetros

+ + + +

Especificación

+ + diff --git a/files/es/web/api/window/cancelanimationframe/index.html b/files/es/web/api/window/cancelanimationframe/index.html new file mode 100644 index 0000000000..eae485c315 --- /dev/null +++ b/files/es/web/api/window/cancelanimationframe/index.html @@ -0,0 +1,118 @@ +--- +title: window.cancelAnimationFrame() +slug: Web/API/Window/cancelAnimationFrame +translation_of: Web/API/Window/cancelAnimationFrame +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

Resumen

+ +

Cancela la petición de animación previamente programada a través de {{domxref("window.requestAnimationFrame()")}}.

+ +

Sintaxis

+ +
window.cancelAnimationFrame(requestID);
+
+ +
+

Nota: Antes de Firefox 23, la función es independiente del proveedor con el prefijo window.mozCancelAnimationFrame(). Consulte la tabla de compatibilidad, a continuación, para otras implementaciones de navegador.

+
+ +

Parámetros

+ +
+
ID de la petición
+
El valor del ID regresado por la llamada a {{domxref("window.requestAnimationFrame()")}} que solicitó una llamada de vuelta.
+
+ +

Ejemplos

+ +
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Only supported in FF. Other browsers can use something like Date.now().
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress < 2000) {
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+
+window.cancelAnimationFrame(myReq);
+
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico21.0 {{property_prefix("webkit")}}
+ 24.0		{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}
+ 23.0		1015.06.0 {{property_prefix("webkit")}}
+ 6.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.433{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}
+ 23.0		10337.1
+
+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/window/close/index.html b/files/es/web/api/window/close/index.html new file mode 100644 index 0000000000..e4a3c910ee --- /dev/null +++ b/files/es/web/api/window/close/index.html @@ -0,0 +1,76 @@ +--- +title: Window.close() +slug: Web/API/Window/close +translation_of: Web/API/Window/close +--- +

{{ ApiRef() }}

+ +

Resumen

+ +

Cierra la ventana actual, o la ventana en la cual fue llamada.

+ +

Sintaxis

+ +
window.close();
+
+ +

Descripción

+ +

Cuando este método es llamado, la ventana referenciada es cerrada.

+ +

Este método solo se permite ser llamado por ventanas que fueron abiertas por un script utilizando el método {{domxref("window.open()")}}. Si la ventana no fue abierta por un script, el siguiente error aparece en la consola de JavaScript: Scripts may not close windows that were not opened by script.

+ +

Ejemplos

+ +

Cerrar una ventana abierta con window.open()

+ +

Este es un ejemplo que demuestra como utilizar este método para cerrar una ventana que fue abierta por un script llamando {{domxref("window.open()")}}.

+ +
<script type="text/javascript">
+//Global var to store a reference to the opened window
+var openedWindow;
+
+function openWindow()
+{
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow()
+{
+  openedWindow.close();
+}
+</script>
+
+ +

Cerrando la ventana actual

+ +

Cuando se llama al método del objeto window close() directamente, en vez de llamar a close() en una instancia de la ventana, el navegador cerrará la ventana que está en primer plano,  independientemente si el script fue creado en la ventana o no. (Firefox 35.0.1: los scripts no pueden cerrar ventanas que ellos no han abierto)

+ +
<script type="text/javascript">
+function closeCurrentWindow()
+{
+  window.close();
+}
+</script>
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}{{Spec2('HTML WHATWG')}} 
+ +

Referencia adicional

+ +

{{Compat("api.Window.close")}}

diff --git a/files/es/web/api/window/closed/index.html b/files/es/web/api/window/closed/index.html new file mode 100644 index 0000000000..b5caf862f3 --- /dev/null +++ b/files/es/web/api/window/closed/index.html @@ -0,0 +1,65 @@ +--- +title: Window.closed +slug: Web/API/Window/closed +tags: + - API + - HTML DOM + - Propiedad + - Referencia + - Ventana +translation_of: Web/API/Window/closed +--- +
{{APIRef}}
+ +

Resumen

+ +

Esta propiedad de solo lectura indica si la ventana referenciada está cerrada o no.

+ +

Syntax

+ +
isClosed = windowRef.closed;
+
+ +
+
isClosed
+
Booleano. Valores posibles: +
    +
  • true: La ventana ha sido cerrada.
    • +
  • false: La ventana está abierta.
    • +
+
+
+ +

Ejemplos

+ +

Cambiar la URL de una ventana desde una ventana emergente

+ +

El siguiente ejemplo demuestra cómo una ventana emergente puede cambiar la URL de la ventana que la abrió. Antes de intentar cambiar la URL, verifica que la ventana actual tiene referencia a la ventana que la abrió usando la propiedad window.opener y que esa ventana no está cerrada:

+ +
// Verifica que opener existe y no esté cerrado
+if (window.opener && !window.opener.closed) {
+  window.opener.location.href = "http://www.mozilla.org";
+}
+ +

Nótese que las ventanas emergentes solo pueden acceder a la ventana que las abrió.

+ +

Actualizando una ventana emergente abierta previamente

+ +

En este ejemplo la función refreshPopupWindow() llama al método reload del objeto location de la ventana emergente para actualizar su información. Si la ventana emergente no ha sido abierta o el usuario la cerró una nueva ventana es abierta.

+ +
var popupWindow = null;
+
+function refreshPopupWindow() {
+  if (popupWindow && !popupWindow.closed) {
+    // popupWindow está abierta, actualízala
+    popupWindow.location.reload(true);
+  } else {
+    // Abre una nueva ventana emergente
+    popupWindow = window.open("popup.html","dataWindow");
+  }
+}
+
+ +

Especificación

+ +

HTML5

diff --git a/files/es/web/api/window/confirm/index.html b/files/es/web/api/window/confirm/index.html new file mode 100644 index 0000000000..a09a6cdb1d --- /dev/null +++ b/files/es/web/api/window/confirm/index.html @@ -0,0 +1,64 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

El método Window.confirm() muestra una ventana de diálogo con un mensaje opcional y dos botones, Aceptar y Cancelar.

+ +

Sintaxis

+ +
result = window.confirm(message);
+
+ + + +

Ejemplo

+ +
if (window.confirm("Do you really want to leave?")) {
+  window.open("exit.html", "Thanks for Visiting!");
+}
+
+ +

Da como resultado:

+ +

firefox confirm
+  

+ +

Notas

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.alert Las cajas de diálogo son ventanas modales - ello impide al usuario continuar accediendo al resto del interfaz del programa hasta que la ventana modal haya sido cerrada. Por esta razón no se debería usar en exceso funciones que creen cajas de diálogo (o ventanas modales). No obstante, hay muy buenas razones para evitar el uso de cajas de diálogo para confirmaciones.

+ +

Los usuarios de Mozilla Chrome users (e.g. Firefox extensions) deberían usar métodos de {{interface("nsIPromptService")}} en vez de cajas de diálogo.

+ +

A partir de la versión {{CompatChrome(46.0)}} de Chrome este método es bloqueado dentro de un {{htmlelement("iframe")}} a no ser que el atributo sandbox tenga el valor allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} El argumento es opcional y no requerido por la especificación.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML5 Web application', '#dom-confirm', 'confirm()')}}{{Spec2('HTML5 Web application')}}Definición inicial.
+ +

Ver también

+ + diff --git a/files/es/web/api/window/crypto/index.html b/files/es/web/api/window/crypto/index.html new file mode 100644 index 0000000000..49756dfc08 --- /dev/null +++ b/files/es/web/api/window/crypto/index.html @@ -0,0 +1,88 @@ +--- +title: Window.crypto +slug: Web/API/Window/crypto +translation_of: Web/API/Window/crypto +--- +

{{APIRef}}

+ +

La propiedad de sólo lectura {{domxref("Window.crypto")}} devuelve el objeto Crypto asociado a un objeto global. Este objeto permite a las páginas web acceder a ciertos servicios relacionados con criptografía.

+ +

Sintaxis

+ +
var cryptoObj = window.crypto || window.msCrypto; // para IE 11
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API')}}{{Spec2('Web Crypto API')}}Definición Inicial
+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Sporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}11 {{ property_prefix("-ms") }}15{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Ver También

+ + diff --git a/files/es/web/api/window/devicepixelratio/index.html b/files/es/web/api/window/devicepixelratio/index.html new file mode 100644 index 0000000000..97db13d974 --- /dev/null +++ b/files/es/web/api/window/devicepixelratio/index.html @@ -0,0 +1,91 @@ +--- +title: Window.devicePixelRatio +slug: Web/API/Window/devicePixelRatio +translation_of: Web/API/Window/devicePixelRatio +--- +

{{APIRef}}

+ +

La propiedad de sólo-lectura Window.devicePixelRatio retorna la relación de tamaño (vertical) de un pixel físico en el dispositivo de visualización actual respecto del de un dispositivo de tamaño de pixel independiente (dips).

+ +

No hay retrofunciones o eventos a escuchar cuando este valor cambia (por ejemplo, si usted arrastra la ventana entre displays con diferentes densidades de pixels).

+ +

Sintaxis

+ +
value = window.devicePixelRatio;
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName("CSSOM View", "#dom-window-devicepixelratio", "Window.devicePixelRatio")}}{{Spec2("CSSOM View")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/window/dialogarguments/index.html b/files/es/web/api/window/dialogarguments/index.html new file mode 100644 index 0000000000..f3f23cb43e --- /dev/null +++ b/files/es/web/api/window/dialogarguments/index.html @@ -0,0 +1,14 @@ +--- +title: Window.dialogArguments +slug: Web/API/Window/dialogArguments +translation_of: Web/API/Window/dialogArguments +--- +

{{APIRef}}

+ +

Resumen

+ +

La propiedad dialogArguments retorna los parámetros que fueron pasados al método {{domxref("window.showModalDialog()")}}. Esto permite determinar qué parámetros fueron especificados cuando el diálogo modal fue creado.

+ +

Sintaxis

+ +
value = window.dialogArguments;
diff --git a/files/es/web/api/window/document/index.html b/files/es/web/api/window/document/index.html new file mode 100644 index 0000000000..d5acd251de --- /dev/null +++ b/files/es/web/api/window/document/index.html @@ -0,0 +1,46 @@ +--- +title: Window.document +slug: Web/API/Window/document +translation_of: Web/API/Window/document +--- +
{{APIRef}}
+ +

Resumen

+ +

Retorna una referencia al documento contenido en la ventana.

+ +
Nota: {{Fx_minversion_inline(3)}} Firefox 3 altera la seguridad para los documentos entre ventanas, de modo que sólo el dominio desde el cual ha sido cargada una ventana puede acceder al documento. A pesar de que esto rompe el funcionamiento de algunos sitios existentes, es una modificación adoptada por Firefox 3 e Internet Explorer 7, que resulta en una mejora de seguridad.
+ +

Sintaxis

+ +
doc = window.document
+
+ +

Parámetros

+ + + +

Example

+ +
<!DOCTYPE html>
+<html>
+<head>
+   <title>Hola, Mundo!</title>
+</head>
+<body>
+
+<script type="text/javascript">
+   var doc = window.document;
+   console.log(doc.title); // Hola, Mundo!
+</script>
+
+</body>
+</html>
+ +

Especificación

+ + diff --git a/files/es/web/api/window/frameelement/index.html b/files/es/web/api/window/frameelement/index.html new file mode 100644 index 0000000000..27f809265c --- /dev/null +++ b/files/es/web/api/window/frameelement/index.html @@ -0,0 +1,106 @@ +--- +title: Window.frameElement +slug: Web/API/Window/frameElement +translation_of: Web/API/Window/frameElement +--- +
{{ ApiRef }}
+ +

Retorna el elemento (como es {{HTMLElement("iframe")}} ó {{HTMLElement("object")}}) en el cual la ventana está incrustada o null si el elemento es bien de nivel superior (top-level) o bien está inrustada en un documento con un origen de diferente; esto es, en situaciones de origen cruzado.

+ +

Sintaxes

+ +
frameEl = window.frameElement;
+
+ + + +
+

A pesar del nombre de esta propiedad, funciona para documentos empotrados en cualquier forma o método de incrustación, incluyendo {{HTMLElement("object")}}, {{HTMLElement("iframe")}}, or {{HTMLElement("embed")}}.

+
+ +

Ejemplo

+ +
var frameEl = window.frameElement;
+// Si estamos empotrados, cambia la URL de elemento contenedor to 'http://mozilla.org/'
+if (frameEl) {
+  frameEl.src = 'http://mozilla.org/';
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{ SpecName('HTML WHATWG', '#dom-frameelement', 'Window.frameElement') }}{{ Spec2('WebRTC 1.0') }}Especificación inicial.
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico4?{{CompatGeckoDesktop("1")}}5.5?12.1?4?
+
+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/window/fullscreen/index.html b/files/es/web/api/window/fullscreen/index.html new file mode 100644 index 0000000000..7662bc7888 --- /dev/null +++ b/files/es/web/api/window/fullscreen/index.html @@ -0,0 +1,43 @@ +--- +title: window.fullScreen +slug: Web/API/Window/fullScreen +tags: + - Referencia_DOM_de_Gecko + - páginas_a_traducir +translation_of: Web/API/Window/fullScreen +--- +
{{APIRef}}
+ +

Resumen

+ +

Esta propiedad indica si la ventana se presenta en modo de pantalla comleta o no. Su funcionamiento es sólo fiable a partir de Gecko 1.9 (Firefox 3), ver Notas más abajo.

+ +

Sintaxis

+ +
var isInFullScreen = windowRef.fullScreen;
+
+ +


+ Con privilegios chrome, el valor de esta propiedad se puede cambiar, de otra forma, es de sólo lectura. Ten en cuenta que si intentas cambiar el valor de esta propiedad sin tener privilegios chrome, no cambiará nada y la propiedad simplemente fallará. Esto se hace para evitar que los programas diseñados para Internet Explorer fallen.

+ +

Valor devuelto

+ +
+
isInFullScreen
+
Un valorbinario . Los valores posibles son:
+
+ + + +

Ejemplos

+ +

Especificaciones

+ +

DOM nivel 0. window.fullScreen no forma parte de ninguna especificación W3C.

+ +

Notas

+ +

El funcionamiento de esta propiedad es fiable sólo en Mozilla 1.9 (Firefox 3) y posteriores. Mozilla 1.8 y versiones anteriores manejan esta propiedad pero el valor devuelto es siempre false, aún cuando la ventana está en modo pantalla completa ({{ Bug(127013) }}).

diff --git a/files/es/web/api/window/getcomputedstyle/index.html b/files/es/web/api/window/getcomputedstyle/index.html new file mode 100644 index 0000000000..3ce1aa1c0b --- /dev/null +++ b/files/es/web/api/window/getcomputedstyle/index.html @@ -0,0 +1,26 @@ +--- +title: Window.getComputedStyle +slug: Web/API/Window/getComputedStyle +translation_of: Web/API/Window/getComputedStyle +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve el estilo computado del elemento. Los estilos computados representan los valores finales computed (en)  de las propiedades CSS del elemento. 

+

Sintaxis

+
var style = window.getComputedStyle(element, pseudoElt);
+
+ +

Ejemplo

+
var element = document.getElementById(“elemId”);
+var style = document.defaultView.getComputedStyle(element, pseudoElt);
+
+

Descripción

+

El objeto devuelto es del mismo tipo que el objeto devuelto por la propiedad style del elemento, sin embargo ambos objetos tienen un propósito distinto. El objeto devuelto por getComputedStyle es de sólo lectura y puede usarse para inspeccionar el estilo del elemento (incluyendo los estilos de una etiqueta <style> o una hoja de estlo).  El objeto elt.style debería usarse para establecerel estilo de un elemento específico.

+

El primer argumento debe ser un Element, no un nodo (como en #texto Node).

+

Especificación

+

DOM Level 2 Style: getComputedStyle

+

{{ languages( { "ja": "ja/DOM/window.getComputedStyle" } ) }}

diff --git a/files/es/web/api/window/getselection/index.html b/files/es/web/api/window/getselection/index.html new file mode 100644 index 0000000000..4e08399ad5 --- /dev/null +++ b/files/es/web/api/window/getselection/index.html @@ -0,0 +1,53 @@ +--- +title: window.getSelection +slug: Web/API/Window/getSelection +tags: + - páginas_a_traducir +translation_of: Web/API/Window/getSelection +--- +
{{ ApiRef() }}
+ +

Resumen

+ +

Devuelve un objeto de selección representando el rango del texto seleccionado por el usuario. NB. this is nothing to do with the DOM selection list object! What the heck is 'selection list object'? -Nickolay

+ +

Sintaxis

+ +
selection =window.getSelection() ;
+
+ + + +

Ejemplo

+ +
function foo() {
+   var selObj = window.getSelection();
+   alert(selObj);
+   var selRange = selObj.getRangeAt(0);
+   // ... Hacer las cosas con el rango ...
+}
+
+ +

Notas

+ +

En JavaScript, cuando un objeto de selección es pasado a una función que espera una cadena de caracteres como parámetro (como {{ Domxref("window.alert") }} o {{ Domxref("document.write") }}), una representación de texto, del objeto de selección (e.j. el texto seleccionado) es pasado en vez del objeto en sí. Esto hace al objeto de selección parecer una cadena de caracteres (texto), cuando realmente es un objeto con sus propios métodos y propiedades. Específicamente, el valor de retorno de llamar al método toString() del objeto de selección es lo que realmente se pasa como parámetro a la función.

+ +

En el ejemplo de arriba, selObj es automaticamente "convertido" cuando pasó a window.alert. Sin embargo, para usar una propiedad String de JavaScript o un método como length o substr, debe llamar manualmente al método toString. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian

+ +

Especificación

+ +

DOM Nivel 0. No es parte de ninguna especificación.

+ +

Ver también

+ +

Selection, Range

+ + + + + +
+ +

{{ languages( { "en": "en/DOM/window.getSelection", "fr": "fr/DOM/window.getSelection", "it": "it/DOM/window.getSelection", "ja": "ja/DOM/window.getSelection", "pl": "pl/DOM/window.getSelection" } ) }}

diff --git a/files/es/web/api/window/hashchange_event/index.html b/files/es/web/api/window/hashchange_event/index.html new file mode 100644 index 0000000000..e0a5be4bbc --- /dev/null +++ b/files/es/web/api/window/hashchange_event/index.html @@ -0,0 +1,194 @@ +--- +title: hashchange +slug: Web/API/Window/hashchange_event +tags: + - Referencia + - URL + - Web +translation_of: Web/API/Window/hashchange_event +--- +

El evento hashchange es ejecutado cuando el fragmento identificador de la URL ha cambiado (la parte de la URL que continúa despues del simbolo #, incluyendo el símbolo #).

+ + + + + + + + + + + + + + + + + + + + + + + + +
BurbujasSi
CancelableNo
Objetivo{{domxref("Window")}}
Interface{{domxref("HashChangeEvent")}}
Acción predeterminadaNinguna
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The browsing context (window).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
oldURL {{readonlyInline}}{{jsxref("String")}}The previous URL from which the window was navigated.
newURL {{readonlyInline}}{{jsxref("String")}} 
+ +

En esta página se enlistan algunos scripts de ejemplo. Básicamente estos scripts revisan el location.hash en un intervalo regular. Aquí se muestra una versión que permite que solo un controlador sea ligado a la propiedad window.onhashchange:

+ +
;(function(window) {
+
+  // salir si el navegador implementa el evento
+  if ("onhashchange" in window) { return; }
+
+  var location = window.location,
+    oldURL = location.href,
+    oldHash = location.hash;
+
+  // revisa el hash cada 100ms
+  setInterval(function() {
+    var newURL = location.href,
+      newHash = location.hash;
+
+    // si el hash ha cambiado y un controlador ha sido ligado...
+    if (newHash != oldHash && typeof window.onhashchange === "function") {
+      // ejecuta el controlador
+      window.onhashchange({
+        type: "hashchange",
+        oldURL: oldURL,
+        newURL: newURL
+      });
+
+      oldURL = newURL;
+      oldHash = newHash;
+    }
+  }, 100);
+
+})(window);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('HTML WHATWG', 'indices.html#event-hashchange', 'hashchange')}}{{Spec2('HTML WHATWG')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico5.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}[1]8.0[2]10.65.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico2.2{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}9.011.05.0
+
+ +

[1] Soporte para los atributos oldURL/newURL agregado en Firefox 6.

+ +

[2] Atributos oldURL/newURL no soportados.

+ +

Ver también

+ + diff --git a/files/es/web/api/window/history/index.html b/files/es/web/api/window/history/index.html new file mode 100644 index 0000000000..02fb7a8cab --- /dev/null +++ b/files/es/web/api/window/history/index.html @@ -0,0 +1,39 @@ +--- +title: Window.history +slug: Web/API/Window/history +translation_of: Web/API/Window/history +--- +

{{ APIRef }}

+ +

La propiedad de solo lectura Window.history regresa una referencia al objeto {{domxref("History")}}, quien provee una interfaz para manipular el historial de sesión del navegador (páginas visitadas en el tab o marco de la pagina actual cargada).

+ +

Ver Manipulando el historial del navegador para ejemplos y detalles. En particular, este articulo explica características seguras de los métodos pushState() y replaceState() que debe tener en cuenta antes de usarlos. 

+ +

Sintaxis

+ +
var historyObj = window.history;
+
+ +

Ejemplo

+ +
history.back();     // equivalente a hacer clic en el botón de regresar
+history.go(-1);     // equivalente a history.back();
+
+ +

Notas

+ +

Para las páginas de nivel superior se puede ver la lista de páginas en el historial de la sesión, accesible a través del objeto de la History, en los desplegables de tu navegador junto a los botones de avance y retroceso.

+ +

Por razones de seguridad el objeto History no permite que el código sin privilegio acceda a las URLs de otras páginas en el historial de la sesión, pero permite navegar por el historial de la sesión.

+ +

No hay manera de limpiar el historial de la sesión o desactivar la parte de atrás/adelante desde la navegación de código sin privilegios. La solución más cercana disponible es el método location.replace(), que sustituye al elemento actual de la historia sesión con la URL proporcionada.

+ +

{{Compat("api.Window.history")}}

+ +

+

Especificaciones

+

+ + diff --git a/files/es/web/api/window/index.html b/files/es/web/api/window/index.html new file mode 100644 index 0000000000..c0f8e9aa38 --- /dev/null +++ b/files/es/web/api/window/index.html @@ -0,0 +1,412 @@ +--- +title: window +slug: Web/API/Window +tags: + - API + - DOM + - Window + - páginas_a_traducir +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

El objeto window representa la ventana que contiene un documento DOM; la propiedad document apunta al DOM document cargado en esa ventana. El objeto window al que pertenece un documento puede ser obtenido usando la propiedad {{Domxref("document.defaultView")}}.

+ +

Esta sección proporciona una pequeña referencia a todos los métodos, propiedades y eventos disponibles a través del objeto DOM window. El objeto window implementa la interfaz Window , que a su vez hereda de la interfaz AbstractView. Algunas funciones como globales adicionales, espacios de nombres, interfaces, y constructores no típicamente asociados con el objeto window pero disponibles en éste, están listados en las Referencia de JavaScript y en el Referencia DOM de Gecko.

+ +

En un navegador con pestañas, como Firefox, cada pestaña contine su propio window object (y si está escribiendo una extensión, la ventana del navegador es una ventana separada también - para más información vea Trabajar con ventanas desde el código chrome). Esto significa que el objeto window no se comparte entre diferentes pestañas de la misma ventana del navegador. Algunos métodos, como {{Domxref("window.resizeTo")}} y {{Domxref("window.resizeBy")}} se aplican sobre toda la ventana del navegador y no sobre una pestaña específica a la que pertenece el objeto window. Generalmente, cualquier cosa que razonablemente no pueda pertenecer a una pestaña, pertenece a la ventana.

+ +

Constructores

+ +

Ver también DOM Interfaces.

+ +
+
{{domxref("Window.DOMParser")}}
+
DOMParser puede traducir una fuente XML o  HTML almacenada en una cadena en un Documento DOM. DOMParser se especifica en DOM Parsing and Serialization.
+
{{domxref("Image")}}
+
Se usa para crear un {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Se usa para crear un {{domxref("HTMLOptionElement")}}
+
+ +
+
{{domxref("StaticRange")}} {{experimental_inline}} {{readonlyinline}}
+
Retorna un constructor {{domxref('StaticRange.StaticRange','StaticRange()')}} que crea un objeto {{domxref('StaticRange')}}.
+
+ +
+
{{domxref("Worker")}}
+
Se usa para crear un Web worker.
+
{{domxref("Window.XMLSerializer")}}
+
Convierte un árbol DOM en una fuente XML o HTML.
+
+ +

Propiedades

+ +

Esta interface hereda propiedades de {{domxref("EventTarget")}} interface e implementa propiedades de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.

+ +

Nota que la propiedades que son objetos (por ejemplo para sobreescribir los prototipos de los elementos built-in) son descritos en una sección separada más abajo.

+ +
+
{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
+
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
Esta propiedad indica si la actual ventana esta cerrada o abierta.
+
Window.Components {{Non-standard_inline}}
+
El punto de acceso a muchas propiedades  XPCOM.  Algunas propiedades, ej. classes, son disponibles solamente a codigo suficientemente privilegiado. El codigo Web no deberia usar esta propiedad.
+
{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}
+
Retorna una referencia al objeto de la consola proveyendo acceso a la consola debugger del navegador.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Sinonimo de {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Retorna una referencia al documento que esa ventana contiene.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
Esta propiedad indica si la ventana esta desplegada en pantalla completa o no.
+
{{domxref("window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Retorna una referencia a la historia del objeto.
+
{{domxref("Window.innerHeight")}}
+
Obtiene la altura del area de contenido del navegador incluyendo, si es interpretado, la barra de deslizado.
+
{{domxref("window.innerWidth")}}
+
Obtiene el ancho del area de contenido de la ventana del navegador, si es interpretado, la barra de deslizado vertical.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Retorna el numero de marcos en la ventana. Ver tambien {{domxref("window.frames")}}.
+
{{domxref("Window.location")}} {{ReadOnlyInline}}
+
Obtiene/fija la location, o URL actual, del objeto de la ventana.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Retorna el objeto locationbar, cuya visibilidad puede ser fijada en la ventana.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Retorna una referencia al objeto almacenamiento local usado para almacenar datos que pueden ser de accedidos por el origen que los creo.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Retorna el objeto barra de menu, cuya visibilidad puede ser fijada en la ventana.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Retorna el objeto message manager  para esta ventana.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}
+
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Provides a hosting area for performance related attributes.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Methods

+ +

 Esta interfaz hereda metodos de la interfaz {{domxref("EventTarget")}}  e implementa metodos {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Registra un controlador de eventos a un tipo de evento especifico en la ventana.
+
{{domxref("Window.alert()")}}
+
Muestra una pequeña ventana de alerta.
+
El estilo y posición de la ventana puede variar dependiendo de que navegador este usando.
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Regresa en la ventana de historial.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("Window.close()")}}
+
Cierra la ventana actual.
+
{{domxref("Window.confirm()")}}
+
Muestra una ventana de comfirmación con dos únicas y posibles respuestas. Confirmar y Cancelar.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Usado para activar un evento.
+
{{domxref("Window.dump()")}}
+
Escribe un mensaje a la consola.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Busca un string dado en una ventana.
+
{{domxref("Window.focus()")}}
+
Fija el enfoque en la ventana actual.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaulComputedStyle()")}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Regresa el navegador a la pagina de inicio.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimiza la ventana.
+
{{domxref("Window.moveBy()")}}
+
Mueve la ventana actual por una cantidad especificada.
+
{{domxref("Window.moveTo()")}}
+
Mueve la ventana a una coordenada especificada.
+
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
+
{{domxref("Window.open()")}}
+
Abre una nueva ventana.
+
{{domxref("Window.openDialog()")}}
+
Abre una nueva ventana de dialogo.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("element.removeEventListener","Window.removeEventListener()")}}
+
Removes an event listener from the window.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.restore()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}}
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("Window.setResizable")}}
+
{{todo("NeedsContents")}}
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}
+
Displays a modal dialog.
+
{{domxref("Window.sizeToContent()")}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Controlador de Eventos

+ +

Estas son propiedades del objeto ventana que pueden ser fijadas para establecer controladores de eventos para las diversar cosas que pueden pasar en la ventana que podria ser de interes.

+ +

Esta interfaz hereda controladores de eventos de la interfaz {{domxref("EventTarget")}} e implementa controladores de eventos desde {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, y {{domxref("WindowEventHandlers")}}.

+ +
+

Nota: Empezando en {{Gecko("9.0")}}, se puede usar el sintaxis if ("onabort" in window) para determinar si existe una propiedad dada de controlador de eventos o no. Esto es porque interfazes de controlador de eventos han sido actualizadas al respectivo web IDL interfaz. Ver DOM event handlers para mas detalles.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
An event handler property for abort events on the window.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
An event handler property for blur events on the window.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
An event handler property for click events on the window.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
An event handler property for handling the window close event.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
An event handler property for right-click events on the window.
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
An event handler property for any device orientation changes
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
An event handler property for {{event("error")}} events raised on the window.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
An event handler property for {{event("focus")}} events on the window.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
An event handler property for {{event("keydown")}} events on the window.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
An event handler property for {{event("keypress")}} events on the window.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
An event handler property for {{event("keyup")}} events on the window.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
An event handler property for window loading.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
An event handler property for mousedown events on the window.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
An event handler property for mousemove events on the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
An event handler property for mouseout events on the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
An event handler property for mouseover events on the window.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
An event handler property for mouseup events on the window.
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
An event handler property for pageshow events on the window.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
An event handler property for pagehide events on the window.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
An event handler property for reset events on the window.
+
{{domxref("GlobalEventHandlers.onresize")}}
+
An event handler property for window resizing.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
An event handler property for window scrolling.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
An event handler property for window selection.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
An event handler property for submits on window forms.
+
{{domxref("Window.onunload")}}
+
An event handler property for unload events on the window.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events
+
+ +

Constructores

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("Window.DOMParser")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

Ver DOM Reference

+ +

Ver Tambien

+ + diff --git a/files/es/web/api/window/innerheight/index.html b/files/es/web/api/window/innerheight/index.html new file mode 100644 index 0000000000..ef563d9e97 --- /dev/null +++ b/files/es/web/api/window/innerheight/index.html @@ -0,0 +1,79 @@ +--- +title: window.innerHeight +slug: Web/API/Window/innerHeight +tags: + - API + - Propiedades + - Referências + - Window +translation_of: Web/API/Window/innerHeight +--- +
//Propiedad solo lectura del objeto window.
+ +

    Representa la altura (en pixeles) del viewport

+ +

Sintaxis

+ +
var alturaDelViewport = window.innerHeight;
+ +

Valor

+ +

Como retorno, la propiedad innerHeight del objeto window nos retornara un valor de tipo entero, que representara (en pixeles) la altura del viewport.

+ +

La propiedad window.innerHeight es solo de lectura; Y no tiene un valor por defecto.

+ +

Notas .                           

+ +

La propiedad innerHeight es soportada por cualquier objeto de ventana. Pudiendo ejectutarse en un conjunto de marcos  (<frameset> </frameset>). O en una ventana secundaria.

+ +

Es un algoritmo para obtener la altura del viewport, excluyendo si se representa la barra de desplazamiento horizontal

+ +

Ejemplo

+ +

Asumiendo un frameset

+ +
var alturaViewport = window.innerHeight;
+
+var alturaViewport = self.innerHeight;
+// self es window
+
+
+
+ +

  //otra forma de obtener la altura (aúnque, no del         viewport, síno de la ventana), es usando  la propiedad outerHeight, del objeto window.

+ +

Ejemplo (Grafica)

+ +

innerHeight vs outerHeight illustration

+ +

Especificacion

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#dom-window-innerheight', 'window.innerHeight')}}{{Spec2('CSSOM View')}}Initial definition
+ +


+ Compatibilidad del navegador

+ + + +

Tambien me intersa

+ + diff --git a/files/es/web/api/window/localstorage/index.html b/files/es/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..c93ae93d98 --- /dev/null +++ b/files/es/web/api/window/localstorage/index.html @@ -0,0 +1,148 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Propiedad + - Referencia + - Web Storage + - WindowLocalStorage + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

La propiedad de sólo lectura localStorage te permite acceder al objeto local {{DOMxRef("Storage")}}; los datos persisten almacenados entre de las diferentes sesiones de navegación. localStorage es similar a sessionStorage. La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra la página.

+ +

Con sessionStorage los datos persisten sólo en la ventana/tab que los creó, mientras que con localStorage los datos persisten entre ventanas/tabs con el mismo origen.

+ +

Debe tenerse en cuenta que los datos almacenados tanto en localStorage como en sessionStorage son específicos del protocolo de la página.

+ +

Las claves y los valores son siempre cadenas de texto (ten en cuenta que, al igual que con los objetos, las claves de enteros se convertirán automáticamente en cadenas de texto).

+ +

Sintaxis

+ +
miStorage = window.localStorage;
+ +

Valor

+ +

Un objeto {{DOMxRef("Storage")}} que se puede utilizar para acceder al espacio de almacenamiento local del origen actual.

+ +

Excepciones

+ +
+
SecurityError
+
La solicitud viola una decisión de política, o el origen no es una tupla válida de protocolo/host/puerto (esto puede suceder si el origen usa el protocolo file: o data:, por ejemplo). Por ejemplo, el usuario puede tener su navegador configurado a fin de denegar el permiso para conservar datos al origen especificado.
+
+ +

Ejemplo

+ +

El siguiente código accede al objeto local {{DOMxRef("Storage")}} actual y agrega un ítem al mismo usando {{DOMxRef("Storage.setItem()")}}.

+ +
localStorage.setItem('miGato', 'Juan');
+ +
+

Nota: Por favor ver el articulo Usando la Web Storage API para un ejemplo completo.

+
+ +

La sintaxis para leer el ítem almacenado en localStorage es la siguiente:

+ +
var cat = localStorage.getItem('miGato');
+ +

La sintaxis para eliminar el ítem almacenado en localStorage es la siguiente:

+ +
localStorage.removeItem('miGato');
+ +

La sintaxis para eliminar todos los ítems almacenados en localStorage es la siguiente:

+ +
// Elimina todos los elementos
+localStorage.clear();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
Especificación EstadoComentario
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
+ +

Compatibiliad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+ +

Todos los navegadores tienen variaciones en los niveles de capacidad de almacenamiento tanto para localStorage como para sessionStorage. He aquí un detalle sobre las distintas capacidades en los diferentes navegadores.

+
+ +
+

Nota: a partir de iOS 5.1, Safari Mobile almacena la data del localStorage en el directorio de cache, lo cual esta sujeto al borrado y perdida ocacional de los datos ante la petición del sistema operativo, tipicamente requerido cuando el dispositivo sufre de falta de espacio de almacenamiento.

+
+ +

Ver  también

+ + diff --git a/files/es/web/api/window/location/index.html b/files/es/web/api/window/location/index.html new file mode 100644 index 0000000000..d1d44a2b84 --- /dev/null +++ b/files/es/web/api/window/location/index.html @@ -0,0 +1,274 @@ +--- +title: Window.location +slug: Web/API/Window/location +tags: + - Location + - contexto + - navegación +translation_of: Web/API/Window/location +--- +

{{APIRef}}

+ +

La propiedad de sólo lectura Window.location retorna un objeto {{domxref("Location")}} con información acerca de la ubicación actual del documento.

+ +

Window.location no sólo es una propiedad de sólo lectura, también se le puede asignar un {{domxref("DOMString")}}. Esto significa que puedes trabajar con location como si fuera una cadena de caracteres en la mayoría de los casos: location = 'http://www.example.com' es un sinónimo de location.href = 'http://www.example.com'.

+ +

Sintaxis

+ +
var oldLocation = location;
+location = newLocation;
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +
alert(location); // alerts "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"
+ +

Ejemplo #1: Navegar a una nueva página

+ +

Cuando un nuevo valor es asignado a un objeto location, un documento será cargado usando la URL como si location.assing() fuera llamada con la URL modificada. Note que configuraciones de seguridad como CORS, esto puede ser prevenido cuando pase.

+ +
location.assign("http://www.mozilla.org"); // o
+location = "http://www.mozilla.org";
+
+ +

Ejemplo #2: Forzar la recarga de una página desde el servidor

+ +
location.reload(true);
+ +

Ejemplo #3

+ +

Considerando el siguiente ejemplo, el cual recargará la página usando el método replace() para insertar un valor de location.pathname dentro del hash:

+ +
function reloadPageWithHash() {
+  var initialPage = location.pathname;
+  location.replace('http://example.com/#' + initialPage);
+}
+
+ +
Nota: El ejemplo anterior funciona en situaciones cuando location.hash no necesita ser retenido. Sin embargo, en navegadores basados en Gecko, configurar location.pathname en esta manera eliminará cualquier información en location.hash, mientras que en WebKit (y posiblemente en otros navegadores), configurar el pathname no afectará el hash. Si necesitas cambiar el pathname pero mantener el hash como está, usa el método replace(), el cual funcionará consistentemente a través de los navegadores..
+ +

Ejemplo #4: Muestra las propiedades de la URL actual en una ventana emergente:

+ +
function showLoc() {
+  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
+  for (var sProp in oLocation){
+    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
+  }
+  alert(aLog.join("\n"));
+}
+
+// in html: <button onclick="showLoc();">Show location properties</button>
+
+ + + +
function sendData (sData) {
+  location.search = sData;
+}
+
+// in html: <button onclick="sendData('Some data');">Send data</button>
+
+ +

La siguiente URL con "?Some%20data" anexa es enviada al servidor (Si no hay ninguna acción tomada por el servidor, el documento actual es recargado con la cadena de caracteres modificada).

+ +

Ejemplo #6: Usando marcadores sin cambiar la propiedad hash:

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8"/>
+<title>MDN Example</title>
+<script>
+function showNode (oNode) {
+  var nLeft = 0, nTop = 0;
+  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
+  document.documentElement.scrollTop = nTop;
+  document.documentElement.scrollLeft = nLeft;
+}
+
+function showBookmark (sBookmark, bUseHash) {
+  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
+  var oBookmark = document.querySelector(sBookmark);
+  if (oBookmark) { showNode(oBookmark); }
+}
+</script>
+<style>
+span.intLink {
+    cursor: pointer;
+    color: #0000ff;
+    text-decoration: underline;
+}
+</style>
+</head>
+
+<body>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>
+<p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>&nbsp;]</p>
+<p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p>
+<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+<p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
+<p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p>
+<p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p>
+<p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p>
+<p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Go to bookmark #1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Go to bookmark #1 without using location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Go to bookmark #3</span>&nbsp;]</p>
+<p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p>
+<p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p>
+<p id="myBookmark3"><em>Here is the bookmark #3</em></p>
+<p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p>
+<p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p>
+<p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p>
+<p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p>
+<p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p>
+<p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p>
+<p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p>
+<p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p>
+<p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p>
+<p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p>
+</body>
+</html>
+
+ +
Nota: La función showNode es también un ejemplo del uso del ciclo for sin una sección de statement. En este caso un punto y coma es siempre puesto inmediatamente después de la declaración de el ciclo.
+ +

…De igual manera pero con un scroll animado:

+ +
var showBookmark = (function () {
+  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
+       /*
+       * nDuration: the duration in milliseconds of each frame
+       * nFrames: number of frames for each scroll
+       */
+       nDuration = 200, nFrames = 10;
+
+  function _next () {
+    if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
+    _isBot = true;
+    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
+    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
+    if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
+    _itFrame++;
+  }
+
+  function _chkOwner () {
+    if (_isBot) { _isBot = false; return; }
+    if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
+  }
+
+  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
+  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }
+
+  return function (sBookmark, bUseHash) {
+    _scrollY = document.documentElement.scrollTop;
+    _scrollX = document.documentElement.scrollLeft;
+    _bookMark = sBookmark;
+    _useHash = arguments.length === 1 || bUseHash;
+    for (
+      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
+      oNode;
+      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
+    );
+    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
+    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
+  };
+})();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "history.html#the-location-interface", "Window.location")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Window.location")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
window.location.origin30.0.1599.101 (possibly earlier){{CompatGeckoDesktop("21.0")}}11{{CompatUnknown}}7 (possibly earlier, see webkit bug 46558)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
window.location.origin30.0.1599.101 (possibly earlier){{CompatGeckoMobile("21.0")}}{{CompatUnknown}}{{CompatUnknown}}7 (possibly earlier, see webkit bug 46558)
+
+ +

Ver también

+ + diff --git a/files/es/web/api/window/locationbar/index.html b/files/es/web/api/window/locationbar/index.html new file mode 100644 index 0000000000..8cff663446 --- /dev/null +++ b/files/es/web/api/window/locationbar/index.html @@ -0,0 +1,66 @@ +--- +title: Window.locationbar +slug: Web/API/Window/locationbar +translation_of: Web/API/Window/locationbar +--- +
{{APIRef}}
+ + + +

Devuelve el objeto locationbar, del cual se puede comprobar su visibilidad.

+ +

Sintaxis

+ +
objRef = window.locationbar
+
+ +

Ejemplo

+ +

El siguiente ejemplo completo en HTML, muestra la forma en la que se utiliza la propiedad visible del objeto locationbar.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Various DOM Tests</title>
+
+<script>
+var visible = window.locationbar.visible;
+</script>
+
+</head>
+<body>
+  <p>Various DOM Tests</p>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-locationbar', 'Window.locationbar')}}{{Spec2('HTML5 W3C')}} 
+ +

Ver también

+ + diff --git a/files/es/web/api/window/matchmedia/index.html b/files/es/web/api/window/matchmedia/index.html new file mode 100644 index 0000000000..eaa7be6dc3 --- /dev/null +++ b/files/es/web/api/window/matchmedia/index.html @@ -0,0 +1,67 @@ +--- +title: Window.matchMedia() +slug: Web/API/Window/matchMedia +tags: + - API + - CSSOM View + - JavaScript + - Media Queries + - Referencia + - Window + - metodo +translation_of: Web/API/Window/matchMedia +--- +
{{APIRef}}
+ +

El método Window.matchMedia() devuelve un nuevo objeto {{domxref("MediaQueryList")}} que representa los analizados de la media query indicada.

+ +

Sintaxis

+ +
mql = window.matchMedia(mediaQueryString)
+ +

Donde mediaQueryString es una cadena de texto que representa la media query de la que devolver un nuevo objeto {{domxref("MediaQueryList")}}.

+ +

Ejemplo

+ +

Este código le permite manejar las cosas de forma diferente cuando la ventana es muy estrecha.

+ +
if (window.matchMedia("(min-width: 400px)").matches) {
+  /* La pantalla tiene al menos 400 píxeles de ancho */
+} else {
+  /* La pantalla tiene menos de 400 píxeles de ancho */
+}
+ +

Consulte Probando media queries para ver ejemplos adicionales.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSSOM View", "#dom-window-matchmedia", "Window.matchMedia()")}}{{Spec2("CSSOM View")}}Definición initial
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Window.matchMedia")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/window/menubar/index.html b/files/es/web/api/window/menubar/index.html new file mode 100644 index 0000000000..a81e1e45ef --- /dev/null +++ b/files/es/web/api/window/menubar/index.html @@ -0,0 +1,42 @@ +--- +title: Window.menubar +slug: Web/API/Window/menubar +translation_of: Web/API/Window/menubar +--- +

{{ APIRef() }}

+ +

Resumen

+ +

Retorna el objeto menubar, cuya visibilidad puede ser examinada.

+ +

Sintaxis

+ +
objRef = window.menubar
+
+ +

Ejemplo

+ +

El siguiente ejemplo HTML completo muestra la forma en que es utilizada la propiedad visible del objeto menubar.

+ +
<html>
+<head>
+  <title>Various DOM Tests</title>
+  <script>
+    var visible = window.menubar.visible;
+  </script>
+</head>
+<body>
+  <p>Various DOM Tests</p>
+</body>
+</html>
+
+ +

Ver también:

+ +

window.locationbar, window.personalbar, window.scrollbars, window.statusbar, window.toolbar

+ +

 

+ +

Especificación

+ +

HTML5

diff --git a/files/es/web/api/window/moveby/index.html b/files/es/web/api/window/moveby/index.html new file mode 100644 index 0000000000..cd8cd4ba9d --- /dev/null +++ b/files/es/web/api/window/moveby/index.html @@ -0,0 +1,70 @@ +--- +title: Window.moveBy() +slug: Web/API/Window/moveBy +translation_of: Web/API/Window/moveBy +--- +
{{APIRef}}
+ +

Resumen

+ +

Mueve la actual ventana a consecuencia de una cantidad especificada.

+ +

Sintaxis

+ +
window.moveBy(deltaX, deltaY)
+
+ +

Parametros

+ + + +

Ejemplo

+ +
function budge() {
+  moveBy(10, -10);
+}
+ +

Notes

+ +

Puedes usar numeros negativos como parametros para esta función. Esta función realiza un movimiento relativo mientras que {{domxref("window.moveTo")}} hace un movimiento absoluto.

+ +

Desde Firefox 7, no es posible para un sitio web mover una ventana en el navegador, deacuerdo con las siguientes reglas:

+ +
    +
  1. No puedes mover una ventana o pestaña que no haya sido creada por window.open.
    2. +
  2. No puedes mover una ventana o pestaña cuando esta en una ventana con más de una sola pestaña.
    3. +
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSSOM View', '#dom-window-moveby', 'window.moveBy()') }}{{ Spec2('CSSOM View') }} 
+ +

Compatilidad de Navegador

+ + + +

{{Compat("api.Window.moveBy")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/window/navigator/index.html b/files/es/web/api/window/navigator/index.html new file mode 100644 index 0000000000..4766713060 --- /dev/null +++ b/files/es/web/api/window/navigator/index.html @@ -0,0 +1,60 @@ +--- +title: Window.navigator +slug: Web/API/Window/navigator +tags: + - API + - DOM + - DOM Reference + - HTML-DOM + - Property + - Reference + - WebAPI + - Window + - Window.navigator +translation_of: Web/API/Window/navigator +--- +
+ {{ApiRef}}
+
+ La propiedad de solo lectura Window.navigator es una referencia al objeto {{domxref("Navigator")}}, el cual puede ser utilizado para obtener información sobre la aplicación que está ejecutando el script.
+

 

+

Sintaxis

+
navigatorObject = window.navigator
+

 

+

Ejemplos

+

Ejemplo #1: Detectar un navegador y retornar un string

+
var sBrowser, sUsrAg = navigator.userAgent;
+
+if(sUsrAg.indexOf("Chrome") > -1) {
+    sBrowser = "Google Chrome";
+} else if (sUsrAg.indexOf("Safari") > -1) {
+    sBrowser = "Apple Safari";
+} else if (sUsrAg.indexOf("Opera") > -1) {
+    sBrowser = "Opera";
+} else if (sUsrAg.indexOf("Firefox") > -1) {
+    sBrowser = "Mozilla Firefox";
+} else if (sUsrAg.indexOf("MSIE") > -1) {
+    sBrowser = "Microsoft Internet Explorer";
+}
+
+alert("Usted está utilizando: " + sBrowser);
+

Ejemplo #2: Detectar un navegador y retornar un índice

+
function obtenerIdNavegador() {
+    var
+        aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+        sUsrAg = navigator.userAgent, nIdx = aKeys.length - 1;
+
+    for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+    return nIdx
+}
+
+console.log(obtenerIdNavegador());
+
+

Especificación

+ +

Vea además

diff --git a/files/es/web/api/window/offline_event/index.html b/files/es/web/api/window/offline_event/index.html new file mode 100644 index 0000000000..7c503b836a --- /dev/null +++ b/files/es/web/api/window/offline_event/index.html @@ -0,0 +1,70 @@ +--- +title: Offline +slug: Web/API/Window/offline_event +tags: + - Event + - Evento + - Reference + - Referencia +translation_of: Web/API/Window/offline_event +--- +
{{APIRef}}
+ +

El evento offline se activa cuando el navegador ha pierdido acceso a la red y el valor de navigator.onLine cambia a false.

+ +

Información General

+ +
+
Especificación
+
HTML5 Offline
+
Interfaz
+
Evento
+
Burbujas
+
No
+
Cancelable
+
No
+
Target
+
DefaultView (<window>)
+
Acción por Defecto
+
Ninguna
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}Evento target (el objetivo más alto en el árbol DOM).
type {{readonlyInline}}{{domxref("DOMString")}}Tipo de evento.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si el evento normalmente burbujea o no.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si el evento normalmente es cancelable o no.
+ +

Eventos Relacionados

+ + diff --git a/files/es/web/api/window/open/index.html b/files/es/web/api/window/open/index.html new file mode 100644 index 0000000000..8e0376ee75 --- /dev/null +++ b/files/es/web/api/window/open/index.html @@ -0,0 +1,663 @@ +--- +title: Window.open() +slug: Web/API/Window/open +translation_of: Web/API/Window/open +--- +

{{APIRef}}

+ +

Carga un recurso en el contexto de un nuevo navegador (como una ventana) o uno que ya existe, dependiendo de los parametros.

+ +

Sintaxis

+ +
var referencia_objeto_window = window.open([url],[nombre_de_la_ventana],[configuracion_ventana]);
+ +

Parámetros

+ +
+
referencia_objeto_window
+
Una referencia de la ventana creada. La referencia puede ser usada para acceder a propiedades y métodos de la nueva ventana.
+
url (opcional)
+
La URL especifica que página se va cargar en la ventana creada. La URL puede ser una página web (http://www.ejemplo.com.co) o un documento que se encuentre en algun directorio de su PC (html, imagenes y demás). Si no se expecifica una URL, por defecto abrira la ventana en blanco
+
nombre_de_la_ventana (opcional)
+
Un nombre para la nueva ventana. El nombre puede ser usado como el destino de enlaces y formularios usando el atributo de un elemento {{HTMLElement("a")}} ó {{HTMLElement("form")}}. El nombre no debe contener ningun caracter de espacio en blanco. Notese que nombre_de_la_ventana no especifica el titulo de la nueva ventana.
+
strWindowFeatures
+
An optional parameter listing the features (size, position, scrollbars, etc.) of the new window as a string. The string must not contain any whitespace, and each feature name and its value must be separated by a comma. See {{anch("Position and size features")}} below for details.
+
+ +

Descripción

+ +

El metodo open() crea una nueva ventana secundaria del navegador, similar a seleccionar Nueva ventana desde el menú archivo. El parámetro url especifica la URL a ser solicitada y cargada en la nueva ventana. Si url es una cadena de caracteres vacia, entonces se creará una nueva ventana en blanco (URL about:blank) con las barras de herramientas por defecto de la ventana principal.

+ +

Observe que las URLs no cargarán inmediatamente. Cuando window.open() retorna, la ventana siempre contiene about:blank. La solicitud de la URL es diferida y comienza luego de que el bloque actual se termine de ejecutar. La creación de la ventana y la carga de los recursos referenciados suceden de forma asíncrona.

+ +

Ejemplo

+ +
var objeto_window_referencia;
+var configuracion_ventana = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
+
+function abrir_Popup() {
+  objeto_window_referencia = window.open("http://www.cnn.com/", "Pagina_CNN", configuracion_ventana);
+}
+
+// Llamamos a la función
+
+abrir_Popup();
+ + + + + +
var windowObjectReference;
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImageFile.png",
+    "DescriptiveWindowName",
+    "resizable,scrollbars,status"
+  );
+}
+ +

If a window with the name strWindowName already exists, then strUrl is loaded into the existing window. In this case the return value of the method is the existing window and strWindowFeatures is ignored. Providing an empty string for strUrl is a way to get a reference to an open window by its name without changing the window's location. To open a new window on every call of window.open(), use the special value _blank for strWindowName.

+ +

strWindowFeatures is an optional string containing a comma-separated list of requested features of the new window. After a window is opened, JavaScript can't be used to change the features. If strWindowName does not specify an existing window and the strWindowFeatures parameter is not provided (or if the strWindowFeatures parameter is an empty string), then the new secondary window will render the default toolbars of the main window.

+ +

If the strWindowFeatures parameter is used and no size features are defined, then the new window dimensions will be the same as the dimensions of the most recently rendered window.

+ +

If the strWindowFeatures parameter is used and if no position features are defined, then the left and top coordinates of the new window dimension will be 22 pixels from where the most recently rendered window was. An offset is universally implemented by browser manufacturers (it is 29 pixels in MSIE 6 SP2 with the default theme) and its purpose is to help users to notice new windows opening. If the most recently used window was maximized, then there is no offset: the new window will be maximized as well.

+ +

If the strWindowFeatures parameter is used, the features that are not listed will be disabled or removed (except titlebar and close which are by default yes).

+ +
+

Tip: If using the strWindowFeatures parameter, only list the features to be enabled or rendered; the others (except titlebar and close) will be disabled or removed.

+ +

Note that in some browsers, users can override the strWindowFeatures settings and enable (or prevent the disabling of) features.

+
+ +

Firefox Chrome Toolbars Illustration

+ +

Características de posición y tamaño

+ +
{{gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), overriding the position of a window using window features will not change the persisted values saved by the session store feature. That means the next time the window is opened, it will still open in the saved location.")}}
+ +

Note on position and dimension error correction

+ +
{{bug(176320)}}
+ +

Note on precedence

+ +
+
left
+
Specifies the distance the new window is placed from the left side of the work area for applications of the user's operating system to the leftmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
top
+
Specifies the distance the new window is placed from the top side of the work area for applications of the user's operating system to the topmost border (resizing handle) of the browser window. The new window can not be initially positioned offscreen.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
height
+
Specifies the height of the content area, viewing area of the new secondary window in pixels. The height value includes the height of the horizontal scrollbar if present. The minimum required value is 100.
+
Note on outerHeight versus height (or innerHeight)
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
width
+
Specifies the width of the content area, viewing area of the new secondary window in pixels. The width value includes the width of the vertical scrollbar if present. The width value does not include the sidebar if it is expanded. The minimum required value is 100.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
screenX
+
Deprecated. Same as left but only supported by Netscape and Mozilla-based browsers.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
screenY
+
Deprecated. Same as top but only supported by Netscape and Mozilla-based browsers.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
centerscreen
+
Centers the window in relation to its parent's size and position. Requires chrome=yes.
+
outerHeight
+
Specifies the height of the whole browser window in pixels. This outerHeight value includes any/all present toolbar, window horizontal scrollbar (if present) and top and bottom window resizing borders. Minimal required value is 100.
+
Note: since titlebar is always rendered, then requesting outerHeight=100 will make the innerHeight of the browser window under the minimal 100 pixels.
+
Note on outerHeight versus height (or innerHeight)
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
outerWidth
+
Specifies the width of the whole browser window in pixels. This outerWidth value includes the window vertical scrollbar (if present) and left and right window resizing borders.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
innerHeight
+
Same as height but only supported by Netscape and Mozilla-based browsers. Specifies the height of the content area, viewing area of the new secondary window in pixels. The innerHeight value includes the height of the horizontal scrollbar if present. Minimal required value is 100.
+
Note on outerHeight versus height (or innerHeight)
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
innerWidth
+
Same as width but only supported by Netscape and Mozilla-based browsers. Specifies the width of the content area, viewing area of the new secondary window in pixels. The innerWidth value includes the width of the vertical scrollbar if present. The innerWidth value does not include the sidebar if it is expanded. Minimal required value is 100.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

Barra de herramienta y características de chrome

+ +
+
NOTE: All features can be set to yes, 1 or just be present to be "on", set to no or 0 or in most cases just not present to be "off"
+
example "status=yes", "status=1" and "status" have identical results
+
+
menubar
+
If this feature is on, then the new secondary window renders the menubar.
+
Mozilla and Firefox users can force new windows to always render the menubar by setting dom.disable_window_open_feature.menubar to true in about:config or in their user.js file.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
toolbar
+
If this feature is on, then the new secondary window renders the Navigation Toolbar (Back, Forward, Reload, Stop buttons). In addition to the Navigation Toolbar, Mozilla-based browsers will render the Tab Bar if it is visible, present in the parent window. (If this feature is set to no all toolbars in the window will be invisible, for example extension toolbars).
+
Mozilla and Firefox users can force new windows to always render the Navigation Toolbar by setting dom.disable_window_open_feature.toolbar to true in about:config or in their user.js file.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
location
+
If this feature is on, then the new secondary window renders the Location bar in Mozilla-based browsers. MSIE 5+ and Opera 7.x renders the Address Bar.
+
Mozilla and Firefox users can force new windows to always render the location bar by setting dom.disable_window_open_feature.location to true in about:config or in their user.js file. {{Fx_minversion_note(3, "In Firefox 3, dom.disable_window_open_feature.location now defaults to true, forcing the presence of the Location Bar much like in IE7. See bug 337344 for more information.")}}
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x, Opera 6+
+
personalbar
+
If this feature is on, then the new secondary window renders the Personal Toolbar in Netscape 6.x, Netscape 7.x and Mozilla browser. It renders the Bookmarks Toolbar in Firefox. In addition to the Personal Toolbar, Mozilla browser will render the Site Navigation Bar if such toolbar is visible, present in the parent window.
+
Mozilla and Firefox users can force new windows to always render the Personal Toolbar/Bookmarks toolbar by setting dom.disable_window_open_feature.personalbar to true in about:config or in their user.js file.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
directories {{obsolete_inline("2")}}
+
Obsolete synonym of personalbar. In IE, it rendered the Links bar. Supported in Gecko up to 1.9.2 and in IE up to 6.
+
status
+
If this feature is on, then the new secondary window has a status bar. Users can force the rendering of status bar in all Mozilla-based browsers, in MSIE 6 SP2 (Note on status bar in XP SP2) and in Opera 6+. The default preference setting in recent Mozilla-based browser releases and in Firefox 1.0 is to force the presence of the status bar.
+
Note on status bar
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ + + +

Características de funcionalidad de window

+ +
+
+
attention {{NonStandardBadge}}
+
If this feature is specified, the window is able to open even if another application is already in the foreground. This feature is for Firefox OS applications only, and is currently restricted to certified applications. See {{SectionOnPage("/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/App_permissions", "Internal (Certified) app permissions")}} for more information.
+
Supported in:
+
dependent
+
If on, the new window is said to be dependent of its parent window. A dependent window closes when its parent window closes. A dependent window is minimized on the Windows task bar only when its parent window is minimized. On Windows platforms, a dependent window does not show on the task bar. A dependent window also stays in front of the parent window.
+
Dependent windows are not implemented on MacOS X, this option will be ignored.
+
The dependent feature is currently under revision to be removed ({{Bug(214867)}})
+
In MSIE 6, the nearest equivalent to this feature is the showModelessDialog() method.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
minimizable
+
This setting can only apply to dialog windows; "minimizable" requires dialog=yes. If minimizable is on, the new dialog window will have a minimize system command icon in the titlebar and it will be minimizable. Any non-dialog window is always minimizable and minimizable=no will be ignored.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
fullscreen
+
Do not use. Not implemented in Mozilla. There are no plans to implement this feature in Mozilla.
+
This feature no longer works in MSIE 6 SP2 the way it worked in MSIE 5.x. The Windows taskbar, as well as the titlebar and the status bar of the window are not visible, nor accessible when fullscreen is enabled in MSIE 5.x.
+
fullscreen always upsets users with large monitor screen or with dual monitor screen. Forcing fullscreen onto other users is also extremely unpopular and is considered an outright rude attempt to impose web author's viewing preferences onto users.
+
Note on fullscreen
+
Supported in: Internet Explorer 5+
+
fullscreen does not really work in MSIE 6 SP2.
+
resizable
+
If this feature is on, the new secondary window will be resizable.
+
Note: Starting with version 1.4, Mozilla-based browsers have a window resizing grippy at the right end of the status bar, this ensures that users can resize the browser window even if the web author requested this secondary window to be non-resizable. In such case, the maximize/restore icon in the window's titlebar will be disabled and the window's borders won't allow resizing but the window will still be resizable via that grippy in the status bar. +

Starting with Firefox 3, secondary windows are always resizable ({{Bug(177838)}})

+ +
+

Tip: For accessibility reasons, it is strongly recommended to set this feature always on

+
+
+
Mozilla and Firefox users can force new windows to be easily resizable by setting
+ dom.disable_window_open_feature.resizable
+ to true in about:config or in their user.js file.
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
scrollbars
+
If this feature is on, the new secondary window will show horizontal and/or vertical scrollbar(s) if the document doesn't fit into the window's viewport. +
+

Tip: For accessibility reasons, it is strongly encouraged to set this feature always on.

+
+
+
Mozilla and Firefox users can force this option to be always enabled for new windows by setting
+ dom.disable_window_open_feature.scrollbars
+ to true in about:config or in their user.js file.
+
Note on scrollbars
+
Supported in: Internet Explorer 5+, Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

Características que requieren privilegios

+ +

The following features require the UniversalBrowserWrite privilege, otherwise they will be ignored. Chrome scripts have this privilege automatically, others have to request it from the PrivilegeManager.

+ +
+
chrome
+
Note: Starting with Mozilla 1.7/Firefox 0.9, this feature requires the UniversalBrowserWrite privilege ({{Bug(244965)}}). Without this privilege, it is ignored.
+
If on, the page is loaded as window's only content, without any of the browser's interface elements. There will be no context menu defined by default and none of the standard keyboard shortcuts will work. The page is supposed to provide a user interface of its own, usually this feature is used to open XUL documents (standard dialogs like the JavaScript Console are opened this way).
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
dialog
+
Note: Starting with Firefox 44, this feature can only be used with chrome privileges. If content attempts to toggle this feature, it will be ignored.
+
MenuSystemCommands.pngThe dialog feature removes all icons (restore, minimize, maximize) from the window's titlebar, leaving only the close button. Mozilla 1.2+ and Netscape 7.1 will render the other menu system commands (in FF 1.0 and in NS 7.0x, the command system menu is not identified with the Firefox/NS 7.0x icon on the left end of the titlebar: that's probably a bug. You can access the command system menu with a right-click on the titlebar). Dialog windows are windows which have no minimize system command icon and no maximize/restore down system command icon on the titlebar nor in correspondent menu item in the command system menu. They are said to be dialog because their normal, usual purpose is to only notify info and to be dismissed, closed. On Mac systems, dialog windows have a different window border and they may get turned into a sheet.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
modal
+
Note: Starting with Mozilla 1.2.1, this feature requires the UniversalBrowserWrite privilege ({{Bug(180048)}}). Without this privilege, it is ignored.
+
If on, the new window is said to be modal. The user cannot return to the main window until the modal window is closed. A typical modal window is created by the alert() function.
+
The exact behavior of modal windows depends on the platform and on the Mozilla release version. +
+

Note: As of {{Gecko("1.9")}}, the Internet Explorer equivalent to this feature is the {{domxref("window.showModalDialog()")}} method. For compatibility reasons, it's now supported in Firefox. Note also that starting in {{Gecko("2.0")}}, you can use {{domxref("window.showModalDialog()")}} without UniversalBrowserWrite privileges.

+
+
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
titlebar
+
By default, all new secondary windows have a titlebar. If set to no or 0, this feature removes the titlebar from the new secondary window.
+
Mozilla and Firefox users can force new windows to always render the titlebar by setting
+ dom.disable_window_open_feature.titlebar
+ to true in about:config or in their user.js file.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
alwaysRaised
+
If on, the new window will always be displayed on top of other browser windows, regardless of whether it is active or not.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
alwaysLowered
+
If on, the new created window floats below, under its own parent when the parent window is not minimized. alwaysLowered windows are often referred as pop-under windows. The alwaysLowered window can not be on top of the parent but the parent window can be minimized. In NS 6.x, the alwaysLowered window has no minimize system command icon and no restore/maximize system command.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
z-lock
+
Same as alwaysLowered.
+
close
+
When set to no or 0, this feature removes the system close command icon and system close menu item. It will only work for dialog windows (dialog feature set). close=no will override minimizable=yes.
+
Mozilla and Firefox users can force new windows to always have a close button by setting
+ dom.disable_window_open_feature.close
+ to true in about:config or in their user.js file.
+
Supported in: Netscape 6.x, Netscape 7.x, Mozilla 1.x, Firefox 1.x
+
+ +

The position and size feature elements require a number to be set. The toolbars and window functionalities can be set with a yes or no; you can use 1 instead of yes and 0 instead of no. The toolbar and functionality feature elements also accept the shorthand form: you can turn a feature on by simply listing the feature name in the features string. If you supply the features parameter, then the titlebar and close are still yes by default, but the other features which have a yes/no choice will be no by default and will be turned off.

+ +

Example:

+ +
var windowObjectReference; // global variable
+
+function openRequestedPopup() {
+  windowObjectReference = window.open(
+    "http://www.domainname.ext/path/ImgFile.png",
+    "DescriptiveWindowName",
+    "width=420,height=230,resizable,scrollbars=yes,status=1"
+  );
+}
+ +

In this example, the window will be resizable, it will render scrollbar(s) if needed, if the content overflows requested window dimensions and it will render the status bar. It will not render the menubar nor the location bar. Since the author knew about the size of the image (400 pixels wide and 200 pixels high), he added the margins applied to the root element in MSIE 6 which is 15 pixels for top margin, 15 pixels for the bottom margin, 10 pixels for the left margin and 10 pixels for the right margin.

+ +

Buenas prácticas

+ +
<script type="text/javascript">
+var windowObjectReference = null; // global variable
+
+function openFFPromotionPopup() {
+  if(windowObjectReference == null || windowObjectReference.closed)
+  /* if the pointer to the window object in memory does not exist
+     or if such pointer exists but the window was closed */
+
+  {
+    windowObjectReference = window.open("http://www.spreadfirefox.com/",
+   "PromoteFirefoxWindowName", "resizable,scrollbars,status");
+    /* then create it. The new window will be created and
+       will be brought on top of any other window. */
+  }
+  else
+  {
+    windowObjectReference.focus();
+    /* else the window reference must exist and the window
+       is not closed; therefore, we can bring it back on top of any other
+       window with the focus() method. There would be no need to re-create
+       the window or to reload the referenced resource. */
+  };
+}
+</script>
+
+(...)
+
+<p><a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindowName"
+ onclick="openFFPromotionPopup(); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+>Promote Firefox adoption</a></p>
+
+ +

The above code solves a few usability problems related to links opening secondary window. The purpose of the return false in the code is to cancel default action of the link: if the onclick event handler is executed, then there is no need to execute the default action of the link. But if javascript support is disabled or non-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "PromoteFirefoxWindowName". If no frame nor window has the name "PromoteFirefoxWindowName", then the browser will create a new window and will name it "PromoteFirefoxWindowName".

+ +

More reading on the use of the target attribute:

+ +

HTML 4.01 Target attribute specifications

+ +

How do I create a link that opens a new window?

+ +

You can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and webpages:

+ +
<script type="text/javascript">
+var windowObjectReference = null; // global variable
+
+function openRequestedPopup(strUrl, strWindowName) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, strWindowName,
+           "resizable,scrollbars,status");
+  } else {
+    windowObjectReference.focus();
+  };
+}
+</script>
+
+(...)
+
+<p><a
+ href="http://www.spreadfirefox.com/"
+ target="PromoteFirefoxWindow"
+ onclick="openRequestedPopup(this.href, this.target); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+>Promote Firefox adoption</a></p>
+
+ +

You can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner:

+ +
<script type="text/javascript">
+var windowObjectReference = null; // global variable
+var PreviousUrl; /* global variable which will store the
+                    url currently in the secondary window */
+
+function openRequestedSinglePopup(strUrl) {
+  if(windowObjectReference == null || windowObjectReference.closed) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+         "resizable,scrollbars,status");
+  } else if(PreviousUrl != strUrl) {
+    windowObjectReference = window.open(strUrl, "SingleSecondaryWindowName",
+      "resizable=yes,scrollbars=yes,status=yes");
+    /* if the resource to load is different,
+       then we load it in the already opened secondary window and then
+       we bring such window back on top/in front of its parent window. */
+    windowObjectReference.focus();
+  } else {
+    windowObjectReference.focus();
+  };
+
+  PreviousUrl = strUrl;
+  /* explanation: we store the current url in order to compare url
+     in the event of another call of this function. */
+}
+</script>
+
+(...)
+
+<p><a
+ href="http://www.spreadfirefox.com/"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+>Promote Firefox adoption</a></p>
+
+<p><a
+ href="http://www.mozilla.org/support/firefox/faq"
+ target="SingleSecondaryWindowName"
+ onclick="openRequestedSinglePopup(this.href); return false;"
+ title="This link will create a new window or will re-use an already opened one"
+>Firefox FAQ</a></p>
+
+ +

FAQ

+ +
+
How can I prevent the confirmation message asking the user whether he wants to close the window?
+
You can not. New windows not opened by javascript can not as a rule be closed by JavaScript. The JavaScript Console in Mozilla-based browsers will report the warning message: "Scripts may not close windows that were not opened by script." Otherwise the history of URLs visited during the browser session would be lost.
+
More on the window.close() method
+
How can I bring back the window if it is minimized or behind another window?
+
First check for the existence of the window object reference of such window and if it exists and if it has not been closed, then use the focus() method. There is no other reliable way. You can examine an example explaining how to use the focus() method.
+
How do I force a maximized window?
+
You cannot. All browser manufacturers try to make the opening of new secondary windows noticed by users and noticeable by users to avoid confusion, to avoid disorienting users.
+
How do I turn off window resizability or remove toolbars?
+
You cannot force this. Users with Mozilla-based browsers have absolute control over window functionalities like resizability, scrollability and toolbars presence via user preferences in about:config. Since your users are the ones who are supposed to use such windows (and not you, being the web author), the best is to avoid interfering with their habits and preferences. We recommend to always set the resizability and scrollbars presence (if needed) to yes to insure accessibility to content and usability of windows. This is in the best interests of both the web author and the users.
+
How do I resize a window to fit its content?
+
You can not reliably because the users can prevent the window from being resized by unchecking the Edit/Preferences/Advanced/Scripts & Plug-ins/Allow Scripts to/ Move or resize existing windows checkbox in Mozilla or Tools/Options.../Content tab/Enable Javascript/Advanced button/Move or resize existing windows checkbox in Firefox or by setting dom.disable_window_move_resize to true in about:config or by editing accordingly their user.js file.
+
In general, users usually disable moving and resizing of existing windows because allowing authors' scripts to do so has been abused overwhelmingly in the past and the rare scripts that do not abuse such feature are often wrong, inaccurate when resizing the window. 99% of all those scripts disable window resizability and disable scrollbars when in fact they should enable both of these features to allow a cautious and sane fallback mechanism if their calculations are wrong.
+
The window method sizeToContent() is also disabled if the user unchecks the preference Move or resize existing windows checkbox. Moving and resizing a window remotely on the user's screen via script will very often annoy the users, will disorient the user, and will be wrong at best. The web author expects to have full control of (and can decide about) every position and size aspects of the users' browser window ... which is simply not true.
+
How do I open a referenced resource of a link in a new tab? or in a specific tab?
+
To open a resource in a new tab see Tabbed browser. Some Code snippets are available. If you are using the SDK, tabs are handled a bit differently
+
K-meleon 1.1, a Mozilla-based browser, gives complete control and power to the user regarding how links are opened. Only the user can set his advanced preferences to do that. Some advanced extensions also give Mozilla and Firefox a lot of power over how referenced resources are loaded.
+
In a few years, the target property of the CSS3 hyperlink module may be implemented (if CSS3 Hyperlink module as it is right now is approved). And even if and when this happens, you can expect developers of browsers with tab-browsing to give the user entire veto power and full control over how links can open web pages. How to open a link should always be entirely under the control of the user.
+
How do I know whether a window I opened is still open?
+
You can test for the existence of the window object reference which is the returned value in case of success of the window.open() call and then verify that windowObjectReference.closed return value is false.
+
How can I tell when my window was blocked by a popup blocker?
+
With the built-in popup blockers of Mozilla/Firefox and Internet Explorer 6 SP2, you have to check the return value of window.open(): it will be null if the window wasn't allowed to open. However, for most other popup blockers, there is no reliable way.
+
What is the JavaScript relationship between the main window and the secondary window?
+
The window.open() method gives a main window a reference to a secondary window; the opener property gives a secondary window a reference to its main window.
+
I can not access the properties of the new secondary window. I always get an error in the javascript console saying "Error: uncaught exception: Permission denied to get property <property_name or method_name>. Why is that?
+
It is because of the cross-domain script security restriction (also referred as the "Same Origin Policy"). A script loaded in a window (or frame) from a distinct origin (domain name) cannot get nor set properties of another window (or frame) or the properties of any of its HTML objects coming from another distinct origin (domain name). Therefore, before executing a script targeting a secondary window, the browser in the main window will verify that the secondary window has the same domain name.
+
More reading on the cross-domain script security restriction: http://www.mozilla.org/projects/secu...me-origin.html
+
+ +

Problemas de usos

+ +

Avoid resorting to window.open()

+ +

Generally speaking, it is preferable to avoid resorting to window.open() for several reasons:

+ + + + + +

If you want to offer to open a link in a new window, then follow tested and recommendable usability and accessibility guidelines:

+ +

Never use this form of code for links: <a href="javascript:window.open(...)" ...>

+ +

"javascript:" links break accessibility and usability of webpages in every browser.

+ + + +

Further reading:

+ + + +

Never use <a href="#" onclick="window.open(...);">

+ +

Such pseudo-link also breaks accessibility of links. Always use a real URL for the href attribute value so that if javascript support is disabled or inexistent or if the user agent does not support opening of secondary window (like MS-Web TV, text browsers, etc), then such user agents will still be able to load the referenced resource according to its default mode of opening/handling a referenced resource. This form of code also interferes with advanced features in tab-capable browsers: eg. middle-click on links, Ctrl+click on links, Ctrl+Enter on links, "mouse gestures" features.

+ + + +

Identify links that will open new windows in a way that helps navigation for users by coding the title attribute of the link, by adding an icon at the end of the link or by coding the cursor accordingly.

+ +

The purpose is to warn users in advance of context changes to minimize confusion on the user's part: changing the current window or popping up new windows can be very disorienting to users (Back toolbar button is disabled).

+ +
+

"Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button."
+ quote from The Top Ten New Mistakes of Web Design: 2. Opening New Browser Windows, Jakob Nielsen, May 1999

+
+ +

When extreme changes in context are explicitly identified before they occur, then the users can determine if they wish to proceed or so they can be prepared for the change: not only they will not be confused or feel disoriented, but more experienced users can better decide how to open such links (in a new window or not, in the same window, in a new tab or not, in "background" or not).

+ +

References

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Example "New Window" Icons & Cursors
New window icon from yahoo.comNew window icon from microsoft.comNew window icon from webaim.orgNew window icon from sun.com
New window icon from bbc.co.ukNew window icon from Accessible Internet SolutionsNew window icon from accessify.comNew window icon from webstyleguide.com
New window icon from an unknown sourceNew window icon from an unknown sourceNew window icon from an unknown sourceNew window icon from gtalbot.org
New window cursor from draig.deNew window cursor from mithgol.ru
+ +

Always use the target attribute

+ +

If javascript support is disabled or non-existent, then the user agent will create a secondary window accordingly or will render the referenced resource according to its handling of the target attribute: e.g. some user agents which can not create new windows, like MS Web TV, will fetch the referenced resource and append it at the end of the current document. The goal and the idea is to try to provide - not impose - to the user a way to open the referenced resource, a mode of opening the link. Your code should not interfere with the features of the browser at the disposal of the user and your code should not interfere with the final decision resting with the user.

+ +

Do not use target="_blank"

+ +

Always provide a meaningful name to your target attribute and try to reuse such target attribute in your page so that a click on another link may load the referenced resource in an already created and rendered window (therefore speeding up the process for the user) and therefore justifying the reason (and user system resources, time spent) for creating a secondary window in the first place. Using a single target attribute value and reusing it in links is much more user resources friendly as it only creates one single secondary window which is recycled. On the other hand, using "_blank" as the target attribute value will create several new and unnamed windows on the user's desktop which can not be recycled, reused. In any case, if your code is well done, it should not interfere with the user's final choice but rather merely offer him more choices, more ways to open links and more power to the tool he's using (a browser).

+ +

Glosario

+ +
+
Opener window, parent window, main window, first window
+
Terms often used to describe or to identify the same window. It is the window from which a new window will be created. It is the window on which the user clicked a link which lead to the creation of another, new window.
+
Sub-window, child window, secondary window, second window
+
Terms often used to describe or to identify the same window. It is the new window which was created.
+
Unrequested popup windows
+
Script-initiated windows opening automatically without the user's consent.
+
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#dom-open', 'Window.open()')}}{{Spec2('HTML WHATWG')}}
{{ SpecName('CSSOM View', '#the-features-argument-to-the-open()-method', 'The features argument to the open() method') }}{{ Spec2('CSSOM View') }}Defines the effect of the features argument
+ +

Notas

+ +

Nota sobre la precedencia

+ +

In cases where left and screenX (and/or top and screenY) have conflicting values, then left and top have precedence over screenX and screenY respectively. If left and screenX (and/or top and screenY) are defined in the features list, then left (and/or top) will be honored and rendered. In the following example the new window will be positioned at 100 pixels from the left side of the work area for applications of the user's operating system, not at 200 pixels.

+ +
windowObjectReference = window.open(
+  "http://news.bbc.co.uk/",
+  "BBCWorldNewsWindowName",
+  "left=100,screenX=200,resizable,scrollbars,status"
+);
+ +

If left is set but top has no value and screenY has a value, then left and screenY will be the coordinate positioning values of the secondary window.

+ +

outerWidth has precedence over width and width has precedence over innerWidth. outerHeight has precedence over height and height has precedence over innerHeight. In the following example, Mozilla-browsers will create a new window with an outerWidth of 600 pixels wide and will ignore the request of a width of 500 pixels and will also ignore the request of an innerWidth of 400 pixels.

+ +
windowObjectReference = window.open(
+  "http://www.wwf.org/",
+  "WWildlifeOrgWindowName",
+  "outerWidth=600,width=500,innerWidth=400,resizable,scrollbars,status"
+);
+ +

Note on position and dimension error correction

+ +

Requested position and requested dimension values in the features list will not be honored and will be corrected if any of such requested value does not allow the entire browser window to be rendered within the work area for applications of the user's operating system. No part of the new window can be initially positioned offscreen. This is by default in all Mozilla-based browser releases.

+ +

MSIE 6 SP2 has a similar error correction mechanism but it is not activated by default in all security levels: a security setting can disable such error correction mechanism.

+ +

Note on scrollbars

+ +

When content overflows window viewport dimensions, then scrollbar(s) (or some scrolling mechanism) are necessary to ensure that content can be accessed by users. Content can overflow window dimensions for several reasons which are outside the control of web authors:

+ + + +

Note on status bar

+ +

You should assume that a large majority of users' browsers will have the status bar or that a large majority of users will want to force the status bar presence: best is to always set this feature to yes. Also, if you specifically request to remove the status bar, then Firefox users will not be able to view the Site Navigation toolbar if it is installed. In Mozilla and in Firefox, all windows with a status bar have a window resizing grippy at its right-most side. The status bar also provides info on http connection, hypertext resource location, download progress bar, encryption/secure connection info with SSL connection (displaying a yellow padlock icon), internet/security zone icons, privacy policy/cookie icon, etc. Removing the status bar usually removes a lot of functionality, features and information considered useful (and sometimes vital) by the users.

+ +

Note on security issues of the status bar presence

+ +

In MSIE 6 for XP SP2: For windows opened using window.open():

+ +
+

"For windows opened using window.open():
+ Expect the status bar to be present, and code for it. The status bar will be on by default and is 20-25 pixels in height. (...)"
+ quote from Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2

+
+ +
+

"(...) windows that are created using the window.open() method can be called by scripts and used to spoof a user interface or desktop or to hide malicious information or activity by sizing the window so that the status bar is not visible.
+ Internet Explorer windows provide visible security information to the user to help them ascertain the source of the Web page and the security of the communication with that page. When these elements are not in view, the user might think they are on a more trusted page or interacting with a system process when they are actually interacting with a malicious host. (...)
+ Script-initiated windows will be displayed fully, with the Internet Explorer title bar and status bar. (...)
+ Script management of Internet Explorer status bar
+ Detailed description
+ Internet Explorer has been modified to not turn off the status bar for any windows. The status bar is always visible for all Internet Explorer windows. (...) Without this change, windows that are created using the window.open() method can be called by scripts and spoof a user interface or desktop or hide malicious information or activity by hiding important elements of the user interface from the user.
+ The status bar is a security feature of Internet Explorer windows that provides Internet Explorer security zone information to the user. This zone cannot be spoofed (...)"
+ quote from Changes to Functionality in Microsoft Windows XP Service Pack 2, Internet Explorer Window Restrictions

+
+ +

Note on fullscreen

+ +

In MSIE 6 for XP SP2:

+ + + +

References:

+ + + +

Note on outerHeight versus height

+ +

innerHeight vs outerHeight illustration

+ +

Note on refreshing vs. opening a new window/tab

+ +

If the strWindowName parameter is omitted, a new window or tab is opened. If a window with the same name already exists, the existing window is refreshed.

+ +
//Always opens a new window/tab
+window.open("map.php");
+
+//Refreshes an existing window/tab that was opened with the same name, if one exists
+window.open("map.php", "BiggerMap");
+ +

Tutoriales

+ + + +

Referencias

+ + diff --git a/files/es/web/api/window/opener/index.html b/files/es/web/api/window/opener/index.html new file mode 100644 index 0000000000..531eb6d2e4 --- /dev/null +++ b/files/es/web/api/window/opener/index.html @@ -0,0 +1,28 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +
{{APIRef}}
+ +

Resumen

+ +

Devuelve una referencia de, la ventana que abrió la ventana actuál.

+ +

Sintaxis

+ +
objRef = window.opener;
+
+ +

Ejemplo

+ +
if (window.opener != indexWin) {
+  referToTop(window.opener);
+}
+
+ +

Notas

+ +

Cuando una ventana es abierta desde otra utilizando "Window.open()", esta, mantiene una referencia a la primera mediante "window.opener".  Si la ventana actuál no fué abierta, el metodo retorna NULL.

+ +

El navegador de Windows Phone no soporta window.opener. Tampoco es soportado en Internet Explorer si la ventana nueva se encuentra en una zona de seguridad distinta.

diff --git a/files/es/web/api/window/outerheight/index.html b/files/es/web/api/window/outerheight/index.html new file mode 100644 index 0000000000..cb77c574f4 --- /dev/null +++ b/files/es/web/api/window/outerheight/index.html @@ -0,0 +1,114 @@ +--- +title: Window.outerHeight +slug: Web/API/Window/outerHeight +tags: + - API + - Propiedad + - Referencia +translation_of: Web/API/Window/outerHeight +--- +
{{APIRef}}
+ +

Sumario

+ +

Window.outerHeight obtiene la altura en pixeles de toda la ventana del navegador. Representa el alto de toda la ventana, incluyendo la barra de notificaciones (si se encuentra) y los bordes.

+ +

Esta propiedad es de sólo lectura, no tiene valor por defecto

+ +

Sintaxis

+ +
outWindowHeight = window.outerHeight;
+
+ +

Al obtener, outWindowHeight contiene el alto de la ventana.

+ +

Notas

+ +

Para cambiar el tamaño de una ventana, ver {{domxref("window.resizeBy()")}} y {{domxref("window.resizeTo()")}}.

+ +

Para obtener la altura interna de una ventana, por ejemplo, el alto de una página siendo desplegada, ver {{domxref("window.innerHeight")}}.

+ +

Ejemplo gráfico

+ +

La siguiente figura muestra la diferencia entre innerHeight y outerHeight.

+ +

innerHeight vs outerHeight illustration

+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop(1.0)}}993
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1{{CompatGeckoMobile(1.0)}}993
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSSOM View', '#dom-window-outerheight', 'Window.outerHeight') }}{{ Spec2('CSSOM View') }} 
+ +

Ver también

+ + diff --git a/files/es/web/api/window/outerwidth/index.html b/files/es/web/api/window/outerwidth/index.html new file mode 100644 index 0000000000..b0b91a9beb --- /dev/null +++ b/files/es/web/api/window/outerwidth/index.html @@ -0,0 +1,105 @@ +--- +title: Window.outerWidth +slug: Web/API/Window/outerWidth +translation_of: Web/API/Window/outerWidth +--- +
{{APIRef}}
+ +

Sumario

+ +

Window.outerWidth obtiene el ancho exterior del navegador. Representa el ancho total de la ventana incluyendo las barras laterales (si es expandida), interfaz grafíca y los de elementos para redimencionado de bordes.

+ +

Esta propiedad es de sólo lectura; no tiene valores por default.

+ +

Sintaxis

+ +
outWindowWidth = window.outerWidth;
+
+ +

Lo que retorna outWindowWidth es el ancho exterior del navegador.

+ +

Notas

+ +

Para cambiar el tamaño de la ventana, ver {{domxref("window.resizeBy()")}} y {{domxref("window.resizeTo()")}}.

+ +

Para obtener el ancho exterior de la ventana, i.e. el ancho de la pagina desplegada, ver {{domxref("window.innerWidth")}}.

+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}993
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}993
+
+ +

Specificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-window-outerwidth', 'Window.outerWidth') }}{{ Spec2('CSSOM View') }}Initial definition.
+ +

Ver también

+ + diff --git a/files/es/web/api/window/print/index.html b/files/es/web/api/window/print/index.html new file mode 100644 index 0000000000..7ab8bdb63f --- /dev/null +++ b/files/es/web/api/window/print/index.html @@ -0,0 +1,58 @@ +--- +title: Window.print() +slug: Web/API/Window/print +tags: + - API + - Compatibilidad + - Compatibilidad en móviles + - DOM + - Referencia + - Window + - metodo +translation_of: Web/API/Window/print +--- +

{{ ApiRef() }}

+ +

Abre el diálogo para imprimir el documento actual.

+ +

En la mayoría de navegadores, este método bloquea mientras el díalogo de impresión esté abierto, sin embargo, en algunas versiones recientes de Safari podría retornar de inmediato.

+ +

Resumen

+ +

Abre el Diálogo de Impresión para imprimir el documento actual.

+ +

Sintaxis

+ +
window.print()
+
+ +

Notas

+ +

Empezando con Chrome {{CompatChrome(46.0)}} este método esta bloqueado dentro de un {{htmlelement("iframe")}} a menos que el atributo del contenedor tenga el valor allow-modal.

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}{{Spec2('HTML5 Web application')}}Initial definition.
+ +

Ver también

+ + + +

{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}

diff --git a/files/es/web/api/window/prompt/index.html b/files/es/web/api/window/prompt/index.html new file mode 100644 index 0000000000..f05be58868 --- /dev/null +++ b/files/es/web/api/window/prompt/index.html @@ -0,0 +1,82 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +tags: + - Referencia + - metodo +translation_of: Web/API/Window/prompt +--- +
{{ApiRef("Window")}}
+ +

El método Window.prompt() muestra un diálogo con mensaje opcional, que solicita al usuario que introduzca un texto.

+ +

Sintaxis

+ +
result = window.prompt(message, default);
+
+ + + +

Ejemplo

+ +
var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// there are many ways to use the prompt feature
+var sign = window.prompt(); // open the blank prompt window
+var sign = prompt();       //  open the blank prompt window
+var sign = window.prompt('Are you feeling lucky'); // open the window with Text "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // open the window with Text "Are you feeling lucky" and default value "sure"
+ +

Cuando el usuario hace clic en el botón OK, el valor introducido en el campo de texto es devuelto por el método. Si el usuario da clic al botón OK sin introducir algun texto, se devuelve una cadena vacía. Si el usuario presiona el botón Cancel, la función devuelve null.

+ +

El ejemplo anterior muestra el siguiente cuadro de diálogo (en Chrome en OS X):

+ +

prompt() dialog in Chrome on OS X

+ +

Notas

+ +

Un diálogo prompt contiene un cuadro de texto de una línea, un botón Cancel (Cancelar)  un botón OK (Aceptar), y devuelve el texto (posiblemente vacío) que el usuario introdujo en el cuadro de texto.

+ +

The following text is shared between this article, DOM:window.confirm and DOM:window.alertLos cuadros de diálogo son ventanas modales; previenen que el usuario acceda al resto de la interfaz del programa hasta que el cuadro de diálogo es cerrado. Por esta razón, no se debe abusar de cualquier función que crea un cuadro de diálogo (o ventana modal).

+ +

Nótese que el resultado es una cadena de texto. Esto significa que a veces se deberá hacer una conversión al valor introducido por el usuario. Por ejemplo, si la respuesta debe ser un valor numérico, se debe hacer la conversión del valor a tipo Number. var aNumber = Number(window.prompt("Type a number", "")); 

+ +

Usuarios de Mozilla Chrome (p.ej. extensiones de Firefox) deben usar preferentemente métodos de {{interface("nsIPromptService")}}.

+ +

A partir de Chrome {{CompatChrome(46.0)}} este método está bloqueado para los elementos {{htmlelement("iframe")}}, , a menos que su atributo sandbox tenga el valor allow-modal.

+ +

En Safari, si el usuario presiona el botón Cancel, la función devuelve una cadena vacía. Por lo tanto, no se puede diferenciar si canceló o si mandó una cadena de texto vacía como valor del cuadro de texto.

+ +

Esta función no tiene efecto en la versión Modern UI/Metro de Internet Explorer para Windows 8. No se muestra un diálogo al usuario, y siempre devuelve undefined. No está claro si esto es un bug o un comportamiento previsto. Las versiones de escritorio de IE sí implementan esta función

+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML5 Web application', '#dom-prompt', 'prompt()')}}{{Spec2('HTML5 Web application')}}Definición inicial
+ +

Véase también

+ + diff --git a/files/es/web/api/window/requestanimationframe/index.html b/files/es/web/api/window/requestanimationframe/index.html new file mode 100644 index 0000000000..2f3ae5342b --- /dev/null +++ b/files/es/web/api/window/requestanimationframe/index.html @@ -0,0 +1,153 @@ +--- +title: Window.requestAnimationFrame() +slug: Web/API/Window/requestAnimationFrame +translation_of: Web/API/window/requestAnimationFrame +--- +
{{APIRef}}
+ +
El método window.requestAnimationFrame informa al navegador que quieres realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación. El método acepta como argumento una función a la que llamar antes de efectuar el repintado.
+ +
+ +
Nota: Si no quieres que tu animación se detenga, debes asegurarte de  llamar a su vez a requestAnimationFrame() desde tu callback.
+ +

Debes llamar a este método cuando estés preparado para actualizar tu animación en la pantalla para pedir que se programe el repintado. Ésto puede suceder hasta 60 veces por segundo en pestañas en primer plano, pero se puede ver reducido a velocidades inferiores en pestañas en segundo plano.

+ +

El método indicado como callback recibe un único argumento que indica el tiempo en el que está programado que se ejecute el ciclo de animación.

+ +

Sintaxis

+ +
requestID = window.mozRequestAnimationFrame(callback);   // Firefox
+window.msRequestAnimationFrame(callback);                // IE 10 PP2+
+window.webkitRequestAnimationFrame(callback[, element]); // Chrome/Webkit
+
+ +

Parámetros

+ +
+
callback
+
Parámetro que especifica la función a la cual llamar llegado el momento de actualizar tu animación para el próximo repintado.
+
+ +

Valor devuelto

+ +

Un valor entero long, es un entero de tipo long que identifica de manera exclusiva la entrada en la lista de callbacks. Es siempre un distinto de cero, pero no debes realizar ninguna otra suposición acerca de su valor. Puedes pasar este valor a {{ domxref("window.cancelAnimationFrame()") }} para cancelar la petición de actualización del callback.

+ +

Ejemplo

+ +
(function() {
+  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+  window.requestAnimationFrame = requestAnimationFrame;
+})();
+
+var start = null;
+var element = document.getElementById('SomeElementYouWantToAnimate');
+
+function step(timestamp) {
+  if (!start) start = timestamp;
+  var progress = timestamp - start;
+  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
+  if (progress < 2000) {
+    window.requestAnimationFrame(step);
+  }
+}
+
+window.requestAnimationFrame(step);
+ +

Compatibilidad entre Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support21.0 {{ property_prefix("webkit") }}14.0 {{ property_prefix("moz") }}10.0{{ CompatNo() }}6.0 {{ property_prefix("webkit") }}
requestID return value{{ CompatUnknown() }}{{ CompatGeckoDesktop("11.0") }} {{ property_prefix("moz") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidBlackBerry BrowserChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}10.0 {{ property_prefix("webkit") }} +

0.16 {{ property_prefix("webkit") }}

+ 		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}6.0 {{ property_prefix("webkit") }}
requestID return value{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("11.0") }} {{ property_prefix("moz") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notas para Gecko

+ +

Antes que Gecko 11.0 {{ geckoRelease("11.0") }}, mozRequestAnimationFrame() se podía llamar sin parámetros. Esta opción ya no está soportada ya que no es probable que se convierta en parte del estándar.

+ +

Notas para Chrome

+ +

En estos momentos, la llamada correcta en Chrome para cancelar la petición es window.webkitCancelAnimationFrame(). La antigua versión, window.webkitCancelRequestAnimationFrame(), está obsoleta se sigue soportando por ahora.

+ +

Especificaciones

+ +

{{ spec("http://www.w3.org/TR/animation-timing/#requestAnimationFrame", "Timing control for script-based animations: requestAnimationFrame", "WD") }}

+ +

Véase también

+ + diff --git a/files/es/web/api/window/requestidlecallback/index.html b/files/es/web/api/window/requestidlecallback/index.html new file mode 100644 index 0000000000..ba4351f818 --- /dev/null +++ b/files/es/web/api/window/requestidlecallback/index.html @@ -0,0 +1,126 @@ +--- +title: requestIdleCallback +slug: Web/API/Window/requestIdleCallback +translation_of: Web/API/Window/requestIdleCallback +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

El método window.requestIdleCallback() encola la función que será ejecutada en periodos de inactividad del navegador permitiendo a los desarrolladores ejecutar en segundo plano tareas de baja prioridad del bucle de eventos, sin perjudicar la latencia de eventos principales como animaciones o respuestas a entradas. La funciones son ejecutadas normalmente en orden FIFO (primero en entrar primero en salir) salvo que se alcance el timeout definido de la función antes de que el navegador la ejecute.

+ +

Sintaxis

+ +
var handle = window.requestIdleCallback(callback[, options])
+ +

Valor devuelto

+ +

Un entero largo sin signo (unsigned long integer) que puede utilizarse para cancelar el callback a través del método {{domxref("Window.cancelIdleCallback()")}}.

+ +

Parámetros

+ +
+
callback
+
La referencia a la función que debe ser ejecutada en un futuro inmediato. La función callback toma un argumento con las siguientes propiedades: +
    +
  • timeRemaining: Referencia a un metodo que devuelve un {{domxref("DOMHighResTimeStamp")}}.
    • +
  • didTimeout: Booleano que se devuelve a false si el callback fue invocado por el navegador durante su inactividad, y true en otro caso (por ejemplo, si se definió timeout y expiró antes de que hubiera suficiente tiempo de inactividad).
    • +
+
+
options {{optional_inline}}
+
+ +

Contiene parametros opcionales de configuración. Contiene la siguiente propiedad:

+ + + + + +

Ejemplos

+ +

Ver ejemplo en el artículo Planificación Cooperativa de la API de Tareas en segundo plano.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
+

Especificación

+ 		EstadoComentarios
{{SpecName('Background Tasks')}}{{Spec2('Background Tasks')}}Definición Inicial.
+ +

Compatibilidad en Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + +
CaracterísticaChrome Firefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatChrome(47)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidWebview AndroidFirefox para Móvil (Gecko)Firefox OSIE para MóvilOpera para MóvilSafari para MóvilChrome para Android
Soporte Básico{{CompatNo}}{{CompatChrome(47)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(47)}}
+
+ +

Vease también

+ + diff --git a/files/es/web/api/window/scroll/index.html b/files/es/web/api/window/scroll/index.html new file mode 100644 index 0000000000..ec2c61ab41 --- /dev/null +++ b/files/es/web/api/window/scroll/index.html @@ -0,0 +1,84 @@ +--- +title: Window.scroll() +slug: Web/API/Window/scroll +tags: + - API + - CSSOM View + - Referencia + - metodo +translation_of: Web/API/Window/scroll +--- +
{{APIRef}}
+ +

El método Window.scroll() desplaza la ventana a un lugar particular en el documento.

+ +

Sintaxis

+ +
window.scroll(x-coord, y-coord)
+window.scroll(options)
+
+ +

Parámetros

+ + + +

- o -

+ + + +

Ejemplo

+ +
<!-- poner el pixel 100º verticalmente en el tope superior de la ventana -->
+
+<button onClick="scroll(0, 100);">Clic para desplazarse hacia abajo 100 pixeles</button>
+
+ +

Utilizando options:

+ +
window.scroll({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

Notas

+ +

{{domxref("Window.scrollTo()")}} es efectivamente idéntico a este método. Para desplazamiento relativo, mira {{domxref("Window.scrollBy()")}}, {{domxref("Window.scrollByLines()")}} y {{domxref("Window.scrollByPages()")}}.

+ +

Para desplazarse sobre elementos, mira {{domxref("Element.scrollTop")}} y {{domxref("Element.scrollLeft")}}.

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}{{ Spec2('CSSOM View') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Window.scroll")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/window/scrollby/index.html b/files/es/web/api/window/scrollby/index.html new file mode 100644 index 0000000000..e07da04b65 --- /dev/null +++ b/files/es/web/api/window/scrollby/index.html @@ -0,0 +1,85 @@ +--- +title: Window.scrollBy() +slug: Web/API/Window/scrollBy +tags: + - API + - CSSOM View + - Método(2) + - NeedsCompatTable + - NeedsSpecTable + - Referencia +translation_of: Web/API/Window/scrollBy +--- +

{{ APIRef() }}

+ +

Resumen

+ +

Desplaza el documento el número de pixels proporcionados.

+ +

Sintaxis

+ +
window.scrollBy(X, Y);
+window.scrollBy(opciones)
+ +

Parámetros

+ + + +

Si X o Y son positivos, desplazarán la página hacia la derecha o hacia abajo respectivamente. Si son negativos, la desplazarán hacia la izquierda o hacia arriba respectivamente.

+ +

- or -

+ + + +

Ejemplo

+ +
// Desplazarse la longitud de una página
+window.scrollBy(0, window.innerHeight);
+
+ +

Para hacer scroll hacia arriba:

+ +
window.scrollBy(0, -window.innerHeight);
+ +

Utilizando opciones:

+ +
window.scrollBy({
+  top: 100,
+  left: 100,
+  behaviour: 'smooth'
+})
+ +

Notas

+ +

window.scrollBy desplaza el documento una cantidad determinada, mientras que window.scroll lo hace hacia una posición absoluta en el documento. Vea también window.scrollByLines, window.scrollByPages

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSSOM View', '#dom-window-scrollby', 'window.scrollBy()') }}{{ Spec2('CSSOM View') }}Definición inicial.
diff --git a/files/es/web/api/window/scrollto/index.html b/files/es/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..ec20698673 --- /dev/null +++ b/files/es/web/api/window/scrollto/index.html @@ -0,0 +1,50 @@ +--- +title: Window.scrollTo() +slug: Web/API/Window/scrollTo +translation_of: Web/API/Window/scrollTo +--- +
{{ APIRef }}
+ +

Resumen

+ +

Desplaza el visor a un conjunto específico de coodenadas en el documento.

+ +

Sintaxis

+ +
window.scrollTo(x-coord, y-coord)
+ +

Parámetros

+ + + +

Ejemplo

+ +
window.scrollTo( 0, 1000 );
+ +

Notas

+ +

Esta función es en efecto la misma que window.scroll. Para desplazamiento relativo, ver window.scrollBy, window.scrollByLines, y window.scrollByPages.

+ +

Para desplazar el visor dentro de elementos, ver Element.scrollTop and Element.scrollLeft.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}{{ Spec2('CSSOM View') }}Definición inicial.
diff --git a/files/es/web/api/window/scrollx/index.html b/files/es/web/api/window/scrollx/index.html new file mode 100644 index 0000000000..71b0df1338 --- /dev/null +++ b/files/es/web/api/window/scrollx/index.html @@ -0,0 +1,124 @@ +--- +title: Window.scrollX +slug: Web/API/Window/scrollX +translation_of: Web/API/Window/scrollX +--- +
{{ APIRef() }}
+ +

Resumen

+ +

Retorna el número de pixels que el documento ha sido desplazado horizontalmente.

+ +

Sintaxis

+ +
var x = window.scrollX;
+ +

Parámetros

+ + + +

Ejemplo

+ +
// Si scrollX es mayor que 400, reinicia la posición de desplazxamiento al inicio supuerior-izquierdo del documento.
+if (window.scrollX > 400) {
+  window.scroll(0,0);
+}
+ +

Notas

+ +

La propiedad pageXOffset es un alias de la propiedad scrollX:

+ +
window.pageXOffset == window.scrollX; // siempre true
+ +

Para compatibilidad cruzada entre navegadores, use window.pageXOffset en lugar de window.scrollX. Adicionalmente, versiones más antiguas de Internet Explorer (< 9) no soportan ninguna de las dos propiedades y deben ser sorteadas examinando otras propiedade no estandar. Un ejemplo totalmente compatible:

+ +
var x = (window.pageXOffset !== undefined)
+  ? window.pageXOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
+
+var y = (window.pageYOffset !== undefined)
+  ? window.pageYOffset
+  : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{ SpecName('CSSOM View', '#dom-window-scrollx', 'window.scrollX') }}{{ Spec2('CSSOM View') }} 
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
PrestaciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
PrestaciónAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/api/window/scrolly/index.html b/files/es/web/api/window/scrolly/index.html new file mode 100644 index 0000000000..81b8275746 --- /dev/null +++ b/files/es/web/api/window/scrolly/index.html @@ -0,0 +1,61 @@ +--- +title: Window.scrollY +slug: Web/API/Window/scrollY +tags: + - API + - Propiedad + - Rerencia + - Scroll Vertical +translation_of: Web/API/Window/scrollY +--- +
{{APIRef}}
+ +

Sumario

+ +

Retorna el número de píxeles que han sido desplazados en el documento mediante el scroll vertical.

+ +

Sintaxis

+ +
var y = window.scrollY;
+ + + +

Ejemplo

+ +
// Asegurate de bajar a la segunda página
+if (window.scrollY) {
+  window.scroll(0, 0);  // Restablece la posición de desplazamiento en la parte superior izquierda del documento
+}
+
+window.scrollByPages(1);
+ +

Notas

+ +

Usa esta propiedad para verificar que al documento no se le ha hecho scroll, si estás usando funciones relativas de scroll como {{domxref("window.scrollBy")}}, {{domxref("window.scrollByLines")}}, o {{domxref("window.scrollByPages")}}.

+ +

La propiedad pageYOffset es un alias para la propiedad scrollY:

+ +
window.pageYOffset == window.scrollY; // Siempre verdadero
+ +

Para compatibilidad entre navegadores, es recomendable usar window.pageYOffset en vez de window.scrollY. Adicionalmente, tener en cuenta que versiones más viejas de Internet Explorer (<9) no soportan del todo la propiedad y debe ser solucionado usando propiedades no estandarizadas . Un ejemplo totalmente compatible entre navegadores:

+ +
var supportPageOffset = window.pageXOffset !== undefined;
+var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/window/sessionstorage/index.html b/files/es/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..870cb2dbd8 --- /dev/null +++ b/files/es/web/api/window/sessionstorage/index.html @@ -0,0 +1,143 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - Almacenaje + - Propiedad + - Referencia + - Sesion +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

La propiedad sessionStorage permite acceder a un objeto {{domxref("Storage")}} asociado a la sesión actual. La propiedad sessionStorage es similar a localStorage, la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión, lo que difiere en la forma en que trabajan las cookies de sesión.

+ +

Sintaxis

+ +
// Almacena la información en sessionStorage
+sessionStorage.setItem('key', 'value');
+
+// Obtiene la información almacenada desde sessionStorage
+var data = sessionStorage.getItem('key');
+ +

Valor 

+ +

Un objeto de tipo {{domxref("Storage")}}.

+ +

Ejemplo

+ +

El siguiente código accede al objeto {{domxref("Storage")}} del la sesión actual del domino y le añade un elemento utilizando {{domxref("Storage.setItem()")}}.

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

El siguiente ejemplo graba de forma automática el contenido de un campo de texto, y si el navegador es actualizado accidentalmente, restaura el contenido del campo de texto para no perder lo escrito.

+ +
// Obtiene el campo de texto que vamos a moniterear
+var field = document.getElementById("field");
+
+// Verificamos si tenemos algún valor auto guardado
+// (esto solo ocurrirá si la página es recargada accidentalmente)
+if (sessionStorage.getItem("autosave")) {
+  // Restaura el contenido al campo de texto
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Espera por cambios en el campo de texto
+field.addEventListener("change", function() {
+  // Almacena el resultado en el objeto de almacenamiento de sesión
+  sessionStorage.setItem("autosave", field.value);
+});
+ +

 

+ +
+

Nota: Por favor diríjase al artículo Usando la API de Web Storage para un ejemplo completo.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen distintos niveles de capacidad para localStorage y para sessionStorage. Aquí encontraras un resumen detallado de todas las capacidades de almacenamiento para diversos navegadores.

+ +
+

Nota: desde iOS 5.1, Safari Mobile almacena los datos de localStorage en un directorio de cache, el cual esta sujeto a limpezas ocacionales, por orden del sistema operativo, generalmente si el espacio es reducido.

+
+ +

Vea También

+ + diff --git a/files/es/web/api/window/showmodaldialog/index.html b/files/es/web/api/window/showmodaldialog/index.html new file mode 100644 index 0000000000..1e0f24f2a3 --- /dev/null +++ b/files/es/web/api/window/showmodaldialog/index.html @@ -0,0 +1,95 @@ +--- +title: Window.showModalDialog() +slug: Web/API/Window/showModalDialog +translation_of: Web/API/Window/showModalDialog +--- +
{{ Fx_minversion_header(3) }} {{ deprecated_header() }}{{APIRef}}
+ +

El método Window.showModalDialog() crea y visualiza una caja de diálogo modal, conteniendo el documento HTML especificado.

+ +
+

Esta prestación va a desaparecer. Por favor ajuste sus sitios Web y aplicaciones.

+ +

El soporte ha sido eliminado en Chrome 37. Pero se añadió temporalmente un ajuste de Política Coporativa para rehabilitar showModalDialog. Este método showModalDialog() fue eliminado definitivamente en Chrome 43.

+ +

Mozilla ha anunciado que eliminará el soporte para este método ({{bug(981796)}}). Sin plazo específico, debería ser antes de Firefox 46. Esto quiere decir que la función estará fuera de uso sobre mediados de junio de 2016. Una revisión ESR podría soportarla aun por algunas meses más.

+
+ +

Sintaxis

+ +
valRetorno = window.showModalDialog(uri[, argumentos][, opciones]);
+
+ +

donde

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SintaxisDescripción
center: {on | off | yes | no | 1 | 0 }Si el valor de este argumento es  on, yes, ó 1, la ventana de diálogo será centrada en el escritorio; en caso contrario será oculta. El valor por defecto es yes.
dialogheight: heightEspecifica la altura de la caja de diálogo; por defecto, el tamaño es especificado en pixels.
dialogleft: leftEspecifica la posición horizontal de la caja de diálogo respecto de la esquina superior izquierda del escritorio.
dialogwidth: widthEspecifica la anchura de la caja de diálogo; por defecto el tamaño es especificado en pixels.
dialogtop: topEspecifica la posición vertical de la caja de diálogo, respcto de la esquina superior izquierda del escritorio.
resizable: {on | off | yes | no | 1 | 0 }Si el valor de este argumentoes  on, yes, ó 1, la ventana de diálogo podrá ser redimensionada por el usuario; en caso controario su tamaño será fijo. El valor por defecto es no.
scroll: {on | off | yes | no | 1 | 0 }Si el valor de este argumento es on, yes, ó 1, la ventana de diálogo tendrá barras de desplazamiento; en caso contrario su tamaño será fijo. El valor por defecto es no.
+ +

{{Note("Firefox no implementa los argumentos dialogHide, edge, status, ó unadorned.")}}

+ +

Compatibilidad con navegadores

+ +

Introducido por Microsoft Internet Explorer 4. Soporte añadido a Firefox en Firefox 3 (desaconsejado en Fx 28), y a Safari en Safari 5.1. Ver WebKit bug 151885 para posible futura eliminación de Safari.

+ +

Ejemplos

+ +

Probar showModalDialog().

+ +

Notas

+ +

showModalDialog() está siendo estandarizado actualmente como parte de HTML5. El tercer argumento (para opciones adicionales) no está presente en la versión HTML5, y es (seguramente) ignorado por Safari and Chrome.

+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/window/sidebar/index.html b/files/es/web/api/window/sidebar/index.html new file mode 100644 index 0000000000..280b5dcce3 --- /dev/null +++ b/files/es/web/api/window/sidebar/index.html @@ -0,0 +1,56 @@ +--- +title: Window.sidebar +slug: Web/API/Window/sidebar +tags: + - DOM + - NeedsTranslation + - Non-standard + - Property + - Reference + - TopicStub + - Window +translation_of: Web/API/Window/sidebar +--- +
{{APIRef}} {{Non-standard_header}}
+ +

Returns a sidebar object, which contains several methods for registering add-ons with the browser.

+ +

Notes

+ +

The sidebar object returned has the following methods:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MethodDescription (SeaMonkey)Description (Firefox)
addPanel(title, contentURL, "")Adds a sidebar panel.Obsolete since Firefox 23 (only present in SeaMonkey).
+ End users can use the "load this bookmark in the sidebar" option instead. Also see Creating a Firefox sidebar.
addPersistentPanel(title, contentURL, "")Adds a sidebar panel, which is able to work in the background.
AddSearchProvider(descriptionURL)Installs a search provider (OpenSearch). Adding OpenSearch search engines contains more details. Added in Firefox 2.
addSearchEngine(engineURL, iconURL, suggestedTitle, suggestedCategory) {{Obsolete_inline(44)}}Installs a search engine (Sherlock). Adding Sherlock search engines contains more details.
IsSearchProviderInstalled(descriptionURL)Indicates if a specific search provider (OpenSearch) is installed.
+ +

Specification

+ +

Mozilla-specific. Not part of any standard.

diff --git a/files/es/web/api/window/statusbar/index.html b/files/es/web/api/window/statusbar/index.html new file mode 100644 index 0000000000..bd0b2eaa6c --- /dev/null +++ b/files/es/web/api/window/statusbar/index.html @@ -0,0 +1,72 @@ +--- +title: Window.statusbar +slug: Web/API/Window/statusbar +translation_of: Web/API/Window/statusbar +--- +
{{APIRef}}
+ +

Resumen

+ +

Retorna el objeto statusbar, la visibilidad se puede alternar en la ventana.

+ +

Sintaxis

+ +
objRef = window.statusbar
+
+ +

Ejemplo

+ +

El siguiente ejemplo HTML muestra una forma de utilizar la propiedad visible de los diversos objetos de "bar", y tambien el cambio de privilegios nesesarios para escribir en la propiedad visible para cada una de las ventanas existentes.

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<title>Various DOM Tests</title>
+
+<script>
+// cambia el estado de la barra en la ventana existente
+netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
+window.statusbar.visible=!window.statusbar.visible;
+</script>
+
+</head>
+<body>
+  <p>Various DOM Tests</p>
+</body>
+</html>
+
+ +

Notas

+ +

Al cargar la pagina del ejemplo anterior se muestra el siguiente cuadro de dialogo:

+ +

Para alternar la visibilidad de las barras,  debe de firmar sus scripts o abilitar los privilegios apropiados, como en el ejemplo anterior. Tenga en cuenta que cambiar la visibilidad de manera dinamica de las barras de herramientas puede cambiar el tamaño de la ventana de forma dramatica y afectando de manera significativa el rendimiento de su pagina.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'browsers.html#dom-window-statusbar', 'Window.statusbar')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-statusbar', 'Window.statusbar')}}{{Spec2('HTML5 W3C')}} 
+ +

Ver tambien

+ + diff --git a/files/es/web/api/window/url/index.html b/files/es/web/api/window/url/index.html new file mode 100644 index 0000000000..7758a161b9 --- /dev/null +++ b/files/es/web/api/window/url/index.html @@ -0,0 +1,101 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +tags: + - API + - DOM + - Propiedad + - Referencia + - Referência DOM + - WebAPI +translation_of: Web/API/URL +--- +

{{ApiRef("Window")}}{{SeeCompatTable}}

+ +

La propiedad Window.URL devuelve un objeto que proporciona métodos estáticos usados para crear y gestionar objetos de URLs. Además puede ser llamado como un constructor para construir objetos {{domxref("URL")}}.

+ +

{{AvailableInWorkers}}

+ +

Sintaxis

+ +

Llamando a un método estático:

+ +
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
+ +

Construyendo un nuevo objeto:

+ +
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
+ {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
+ 7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
+
+ +

[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar nsIDOMMozURLProperty. En la práctica, esto no hace ninguna diferencia.

+ +

[2] Implementado bajo el nombre no estandar webkitURL.

diff --git a/files/es/web/api/windowbase64/atob/index.html b/files/es/web/api/windowbase64/atob/index.html new file mode 100644 index 0000000000..aa9eeead07 --- /dev/null +++ b/files/es/web/api/windowbase64/atob/index.html @@ -0,0 +1,111 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +

{{APIRef}}

+ +

La función WindowBase64.atob() descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.

+ +

For use with Unicode or UTF-8 strings, see this note at Base64 encoding and decoding and this note at window.btoa().

+ +

Syntax

+ +
var decodedData = window.atob(encodedData);
+ +

Example

+ +
var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1][2]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

+ +

[2] Starting with Firefox 27, this atob() method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})

+ +

See also

+ + diff --git a/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html b/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html new file mode 100644 index 0000000000..c8747777cd --- /dev/null +++ b/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html @@ -0,0 +1,345 @@ +--- +title: Base64 codificando y decodificando +slug: Web/API/WindowBase64/Base64_codificando_y_decodificando +translation_of: Glossary/Base64 +--- +

Base64 es un grupo de esquemas de codificación de binario a texto que representa los datos binarios mediante una cadena ASCII, traduciéndolos en una representación radix-64. El término Base64 se origina de un sistema de codificación de transmisión de contenido MIME específico.

+ +

Los esquemas de codificación Base64 son comúnmente usados cuando se necesita codificar datos binarios para que sean almacenados y transferidos sobre un medio diseñado para tratar con datos textuales. Esto es para asegurar que los datos se mantienen intactos y sin modificaciones durante la transmisión. Base64 es comúnmente usado en muchas aplicaciones, incluyendo la escritura de emails vía MIME y el almacenamiento de datos complejos en XML.

+ +

En JavaScript hay dos funciones para decodificar y codificar cadenas base64, respectivamente:

+ + + +

La función atob() decodifica una cadena de datos que ha sido codificada usando la codificación en base 64. Por el contrario, la función btoa() crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.

+ +

Ambas funciones trabajan sobre cadenas de texto. Si desea trabajar con ArrayBuffers, lea este párrafo.

+ + + + + + + + + + +
+

Documentación

+ +
+
data URIs
+
Los URIs de datos, definidos por RFC 2397, permiten a los creadores de contenido introducir pequeños ficheros en línea en documentos.
+
Base64
+
Artículo en Wikipedia sobre el sistema de codificación Base64.
+
{{domxref("WindowBase64.atob","atob()")}}
+
Decodifica una cadena de datos que ha sido codificada utilizando base-64.
+
{{domxref("WindowBase64.btoa","btoa()")}}
+
Crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.
+
The "Unicode Problem"
+
En la mayoría de navegadores, llamar a btoa() con una cadena Unicode causará una excepción Character Out Of Range. Este párrafo muestra algunas soluciones.
+
URIScheme
+
Lista de esquemas URI soportados por Mozilla.
+
StringView
+
En este artículo está publicada una librería hecha por nosotros con los siguientes objetivos:
+
+
    +
  • crear una interfaz al estilo de C para cadenas (es decir, arrays de códigos de caracteres — ArrayBufferView en JavaScript) basada en la interfaz  ArrayBuffer de JavaScript.
    • +
  • crear una colección de métodos para los que los objetos parecidos a cadenas (de ahora en adelante, stringViews) funcionen estrictamente en arrays de números más que en cadenas JavaScript inmutables.
    • +
  • trabajar con otras codificaciones Unicode diferentes de las DOMStrings UTF-16 por defecto de JavaScript.
    • +
+
+
+ +

Ver todo...

+ 		+

Herramientas

+ + + + + + +
+ + + +

El "Problema Unicode"

+ +

Como las DOMStrings son cadenas codificadas en 16 bits, en la mayoría de navegadores llamar a window.btoa sobre una cadena Unicode resultará en una excepción Character Out Of Range si un carácter excede el rango de los caracteres ASCII de 8 bits. Hay dos posibles métodos para resolver este problema:

+ + + +

Aquí están los dos posibles métodos:

+ +

Solución #1 – escapar la cadena antes de codificarla

+ +
function utf8_to_b64( str ) {
+  return window.btoa(unescape(encodeURIComponent( str )));
+}
+
+function b64_to_utf8( str ) {
+  return decodeURIComponent(escape(window.atob( str )));
+}
+
+// Uso:
+utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+ +

Esta solución ha sido propuesta por Johan Sundström.

+ +

Otra posible solución sin utilizar las funciones 'unscape' y 'escape', ya obsoletas.

+ +
function b64EncodeUnicode(str) {
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
+        return String.fromCharCode('0x' + p1);
+    }));
+}
+ b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+
+ +

Solución #2 – reescribir atob() y btoa() usando TypedArrays y UTF-8

+ +
Nota: El siguiente código también es útil para obtener un ArrayBuffer a partir de una cadena Base64 y/o viceversa (véase abajo). Para una librería completa de arrays tipados, vea este artículo.
+ +
"use strict";
+
+/*\
+|*|
+|*|  Base64 / binary data / UTF-8 strings utilities
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
+|*|
+\*/
+
+/* Decodificación de cadena base64 en array de bytes */
+
+function b64ToUint6 (nChr) {
+
+  return nChr > 64 && nChr < 91 ?
+      nChr - 65
+    : nChr > 96 && nChr < 123 ?
+      nChr - 71
+    : nChr > 47 && nChr < 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlocksSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
+    nMod4 = nInIdx & 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
+        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
+      }
+      nUint24 = 0;
+
+    }
+  }
+
+  return taBytes;
+}
+
+/* Codificación de array en una cadena Base64 */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 < 26 ?
+      nUint6 + 65
+    : nUint6 < 52 ?
+      nUint6 + 71
+    : nUint6 < 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var nMod3 = 2, sB64Enc = "";
+
+  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
+      nUint24 = 0;
+    }
+  }
+
+  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
+
+}
+
+/* De array UTF-8 a DOMString y viceversa */
+
+function UTF8ArrToStr (aBytes) {
+
+  var sView = "";
+
+  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
+    nPart = aBytes[nIdx];
+    sView += String.fromCharCode(
+      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
+        /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
+        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
+        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
+        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
+        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
+        (nPart - 192 << 6) + aBytes[++nIdx] - 128
+      : /* nPart < 127 ? */ /* one byte */
+        nPart
+    );
+  }
+
+  return sView;
+
+}
+
+function strToUTF8Arr (sDOMStr) {
+
+  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
+
+  /* mapeando... */
+
+  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
+    nChr = sDOMStr.charCodeAt(nMapIdx);
+    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
+  }
+
+  aBytes = new Uint8Array(nArrLen);
+
+  /* transcripción... */
+
+  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
+    nChr = sDOMStr.charCodeAt(nChrIdx);
+    if (nChr < 128) {
+      /* un byte */
+      aBytes[nIdx++] = nChr;
+    } else if (nChr < 0x800) {
+      /* dos bytes */
+      aBytes[nIdx++] = 192 + (nChr >>> 6);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x10000) {
+      /* tres bytes */
+      aBytes[nIdx++] = 224 + (nChr >>> 12);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x200000) {
+      /* cuatro bytes */
+      aBytes[nIdx++] = 240 + (nChr >>> 18);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x4000000) {
+      /* cinco bytes */
+      aBytes[nIdx++] = 248 + (nChr >>> 24);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else /* if (nChr <= 0x7fffffff) */ {
+      /* seis bytes */
+      aBytes[nIdx++] = 252 + (nChr >>> 30);
+      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    }
+  }
+
+  return aBytes;
+
+}
+
+ +

Tests

+ +
/* Tests */
+
+var sMyInput = "Base 64 \u2014 Mozilla Developer Network";
+
+var aMyUTF8Input = strToUTF8Arr(sMyInput);
+
+var sMyBase64 = base64EncArr(aMyUTF8Input);
+
+alert(sMyBase64);
+
+var aMyUTF8Output = base64DecToArr(sMyBase64);
+
+var sMyOutput = UTF8ArrToStr(aMyUTF8Output);
+
+alert(sMyOutput);
+ +

Apéndice: Decodificar una cadena Base64 en Uint8Array o ArrayBuffer

+ +

Estas funciones nos permiten crear también uint8Arrays o arrayBuffers a partir de cadenas codificadas en base 64:

+ +
var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
+
+var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
+
+alert(myBuffer.byteLength);
+ +
Nota: La función base64DecToArr(sBase64[, nBlocksSize]) devuelve un uint8Array de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento nBlocksSize, que es el número de bytes de los que la propiedad uint8Array.buffer.bytesLength debe devolver un múltiplo (1 u omitido para ASCII, cadenas binarias o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).
+ +

Para una librería más completa, véase StringView, una representación parecida a C de cadenas basadas en arrays tipados.

+ +

Véase también

+ + diff --git a/files/es/web/api/windowbase64/index.html b/files/es/web/api/windowbase64/index.html new file mode 100644 index 0000000000..bdce1f982f --- /dev/null +++ b/files/es/web/api/windowbase64/index.html @@ -0,0 +1,108 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +

{{APIRef}}

+

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+

Properties

+

This helper neither defines nor inherits any properties.

+

Methods

+

This helper does not inherit any methods.

+
+
+ {{domxref("WindowBase64.atob()")}}
+
+ Decodes a string of data which has been encoded using base-64 encoding.
+
+ {{domxref("WindowBase64.btoa()")}}
+
+ Creates a base-64 encoded ASCII string from a string of binary data.
+
+

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+

Browser compatibility

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+

See also

+ diff --git a/files/es/web/api/windoweventhandlers/index.html b/files/es/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..9a1ab057e9 --- /dev/null +++ b/files/es/web/api/windoweventhandlers/index.html @@ -0,0 +1,184 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowEventHandlers describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.

+ +

WindowEventHandlers is a not an interface and no object of this type can be created.

+ +

Properties

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML 5")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoDesktop(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoMobile(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/windoweventhandlers/onbeforeunload/index.html b/files/es/web/api/windoweventhandlers/onbeforeunload/index.html new file mode 100644 index 0000000000..308096a56a --- /dev/null +++ b/files/es/web/api/windoweventhandlers/onbeforeunload/index.html @@ -0,0 +1,81 @@ +--- +title: Window.onbeforeunload +slug: Web/API/WindowEventHandlers/onbeforeunload +translation_of: Web/API/WindowEventHandlers/onbeforeunload +--- +
+ {{ApiRef}}
+

Introducción

+

Evento que se ejecuta antes de abandonar la página, justo antes de que se ejecute {{domxref("window.onunload","window.onunload")}}. El documento aún está visible y {{domxref("event.preventDefault","el evento aún se puede cancelar")}}.

+

Sintaxis

+
window.onbeforeunload = funcRef
+ +

Ejemplo

+
window.onbeforeunload = function(e) {
+  return 'Texto de aviso';
+};
+
+

Notas

+

Cuando este evento devuelve un valor que no sea nulo, se solicita al usuario que confirme que quiere abandonar la página. En la mayoría de los navegadores, el valor de retorno del evento se muestra en este cuadro de diálogo.

+

Desde el 25 de mayo de 2011, los estados de la especificación HTML5 que llaman a los métodos {{domxref("window.showModalDialog()")}}, {{domxref("window.alert()")}}, {{domxref("window.confirm()")}} y {{domxref("window.prompt()")}} pueden ser ignorados en este evento.

+

Se puede y se debería controlar este evento con {{domxref("EventTarget.addEventListener","window.addEventListener()")}} y el evento beforeunload (más información en los enlaces).

+

Compatibilidad con los navegadores

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico114123
+
+
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+

Especificación

+

Este evento fue introducido originalmente por Microsoft en Internet Explorer 4 y estandarizado en la especificación HTML5.

+ +

Ver también

+ diff --git a/files/es/web/api/windoweventhandlers/onhashchange/index.html b/files/es/web/api/windoweventhandlers/onhashchange/index.html new file mode 100644 index 0000000000..282176df2b --- /dev/null +++ b/files/es/web/api/windoweventhandlers/onhashchange/index.html @@ -0,0 +1,165 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +tags: + - HTML-DOM + - JavaScript + - Propiedades + - Referencia + - WindowEventHandlers + - eventos +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

El evento hashchange se dispara cuando la almohadilla ha cambiado (ver {{domxref("Window.location", "location.hash")}}).

+ +

Sintaxis

+ +
window.onhashchange = funcRef;
+
+ +

ó

+ +
<body onhashchange="funcRef();">
+
+ +

ó

+ +
window.addEventListener("hashchange", funcRef, false);
+
+ +

Parámetros

+ +
+
funcRef
+
Una referencia a una función.
+
+ +

Ejemplo

+ +
if ("onhashchange" in window) {
+    alert("¡El navegador soporta el evento hashchange!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#somecoolfeature") {
+        somecoolfeature();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+
+ +

El evento hashchange

+ +

El evento hashchange enviado, tiene los siguientes campos:

+ + + + + + + + + + + + + + + + + + + +
CampoTipoDescripción
newURL {{gecko_minversion_inline("6.0")}}DOMStringLa URL nueva hacia la cual la ventana está navegando.
oldURL {{gecko_minversion_inline("6.0")}}DOMStringLa URL anterior desde la cual la ventana navegó.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Basico5.0{{CompatGeckoDesktop("1.9.2")}} +

8.0

+ +

los atributos oldURL/newURL no estan soportados.

+ 		10.65.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Basico2.2{{CompatGeckoMobile("1.9.2")}}9.011.05.0
+
+ + diff --git a/files/es/web/api/windoweventhandlers/onpopstate/index.html b/files/es/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..5ee8539dbd --- /dev/null +++ b/files/es/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,74 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +
{{APIRef}}
+ +

La propiedad onpopstate del mixin {{domxref("WindowEventHandlers")}} es el {{domxref("EventHandler")}} para procesar eventos popstate de la ventana.

+ +

Se evnía un evento popstate a la ventana cada vez que la entrada activa de la historia cambia entre otra otras dos entradas del mismo documento. Si la entrada de la historia fue creada al llamar a history.pushState(), o fue afectada por una llamada a history.replaceState(), la propiedad state del evento popstate contendrá una copia del objeto de estado de la entrada de la hisotria.

+ +
+

Nota: Llamar a history.pushState() o a history.replaceState() no dispararán un evento popstate. El evento popstate solamente se dispará realizando una acción de navegador, tal como pulsar el botón volver (o llamando a history.back() en JavaScript), mientras se navega entre dos entradas de la historia de un mismo documento.

+
+ +

Sintaxis

+ +
window.onpopstate = funcRef;
+
+ + + +

El evento popstate

+ +

Por ejemplo, la página en http://example.com/example.html ejecutando el código siguiente, generará alertas como se indica.:

+ +
window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+
+ +

Tenga en cuenta que, a pesar de que la entrada original (para http://example.com/example.html) no tiene un objeto de estado asociado, el evento popstate se dispara igualemente cuando se activa la entrada después de la segunda llamada a history.back().

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#handler-window-onpopstate', 'onpopstate')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.WindowEventHandlers.onpopstate")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/caches/index.html b/files/es/web/api/windoworworkerglobalscope/caches/index.html new file mode 100644 index 0000000000..c8d3a71b97 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/caches/index.html @@ -0,0 +1,127 @@ +--- +title: WindowOrWorkerGlobalScope.caches +slug: Web/API/WindowOrWorkerGlobalScope/caches +translation_of: Web/API/WindowOrWorkerGlobalScope/caches +--- +

{{APIRef()}}{{SeeCompatTable}}

+ +

La propiedad de sólo-lectura caches, de la interfaz {{domxref("WindowOrWorkerGlobalScope")}}, devuelve el objeto {{domxref("CacheStorage")}} asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización offline, y generar respuestas personalizadas a las peticiones.

+ +

Sintaxis

+ +
var myCacheStorage = self.caches; // or just caches
+
+ +

Valor

+ +

Un objeto {{domxref("CacheStorage")}}.

+ +

Ejemplo

+ +

El siguiente ejemplo muestra la forma en la que utilizarías una cache en un contexto de service worker para guardar assets offline.

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      );
+    })
+  );
+});
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definido en un WindowOrWorkerGlobalScope parcial en la última especificación.
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico40.0{{CompatGeckoDesktop(42)}}
+ {{CompatGeckoDesktop(52)}}[1]		{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(42)}}
+ {{CompatGeckoMobile(52)}}[1]		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] las caches se definen ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html b/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html new file mode 100644 index 0000000000..e24e4b11f4 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/createimagebitmap/index.html @@ -0,0 +1,108 @@ +--- +title: self.createImageBitmap() +slug: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +tags: + - API + - Canvas + - DOM + - Referencia + - WindowOrWorkerGlobalScope + - createImageBitmap + - metodo +translation_of: Web/API/WindowOrWorkerGlobalScope/createImageBitmap +--- +
{{APIRef("Canvas API")}}
+ +

El método createImageBitmap() crea un bitmap a partir de un recurso especificado, opcionalmente recortado para mostrar únicamente una porción de este. El método existe a nivel global como parte, tanto de las ventanas (window), como de los workers. Este admite una variedad de tipos de entrada, y devuelve una {{domxref("Promise")}} que es resuelta con un {{domxref("ImageBitmap")}}.

+ +

Sintaxis

+ +
createImageBitmap(image[, options]).then(function(response) { ... });
+createImageBitmap(image, sx, sy, sw, sh[, options]).then(function(response) { ... });
+ +

Parámetros

+ +
+
image
+
Un recurso/imagen origen, que puede uno de los siguientes elementos: {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, o {{domxref("OffscreenCanvas")}}.
+
sx
+
La coordenada x del rectángulo que será usado para la extracción del ImageBitmap.
+
sy
+
La coordenada y del rectángulo que será usado para la extracción del ImageBitmap.
+
sw
+
La anchura del rectángulo que será usado para extraer el ImageBitmap. El valor podría ser negativo.
+
sh
+
La altura del rectángulo que será usado para extraer el ImageBitmap. El valor podría ser negativo.
+
options {{optional_inline}}
+
Un objeto que proporciona opciones para la extracción de la imagen. Las opciones posibles son: +
    +
  • imageOrientation: Especifica si la imagen debe ser extraida tal y como se muestra, o debe ser volteada verticalmente. Las valores posibles: none (por defecto) o flipY.
    • +
  • premultiplyAlpha: Especifica si los canales de color del mapa de bits generado deben premultiplicarse por el canal alpha. Uno de: none, premultiply, o default (por defecto).
    • +
  • colorSpaceConversion: Especifica si la imagen debe ser decodificada usando conversión del espacio de color. Uno de: none o default (por defecto). El valor default indica que se usará la implementación que haya disponible.
    • +
  • resizeWidth: Un entero largo que especifica la anchura final.
    • +
  • resizeHeight: Un entero largo que especifica la altura final.
    • +
  • resizeQuality: Especifica que algorítmo debe ser usado en el redimensionado para alcanzar las dimensiones deseadas. Uno de estos valores: pixelated, low (por defecto), medium, o high.
    • +
+
+
+ +

Valor devuelto

+ +

Una {{domxref("Promise")}} que es resuelta con un objeto {{domxref("ImageBitmap")}}, el cual contiene los datos del mapa de bits generado para el rectángulo dado.

+ +

Ejemplo

+ +

Creando sprites desde un sprite sheet

+ +

El siguiente ejemplo carga un sprite sheet, extrae los sprites, y muestra cada uno de ellos en el canvas. Un sprite sheet es una imagen que contiene multiples imágenes más pequeñas, que finalmente son utilizadas de manera individual.

+ +
var canvas = document.getElementById('myCanvas'),
+ctx = canvas.getContext('2d'),
+image = new Image();
+
+// Esperar que el sprite sheet se cargue
+image.onload = function() {
+  Promise.all([
+    // Recortar dos sprites del conjunto
+    createImageBitmap(image, 0, 0, 32, 32),
+    createImageBitmap(image, 32, 0, 32, 32)
+  ]).then(function(sprites) {
+    // Pintar cada uno de los sprites en el canvas
+    ctx.drawImage(sprites[0], 0, 0);
+    ctx.drawImage(sprites[1], 32, 32);
+  });
+}
+
+// Cargar el sprite sheet desde un archivo de imagen
+image.src = 'sprites.png';
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstado Comentario
{{SpecName('HTML WHATWG', "webappapis.html#dom-createimagebitmap", "createImageBitmap")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.createImageBitmap")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/fetch/index.html b/files/es/web/api/windoworworkerglobalscope/fetch/index.html new file mode 100644 index 0000000000..9540fe5d05 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/fetch/index.html @@ -0,0 +1,177 @@ +--- +title: WindowOrWorkerGlobalScope.fetch() +slug: Web/API/WindowOrWorkerGlobalScope/fetch +tags: + - API + - Experimental + - Fetch + - Fetch API + - GlobalFetch + - Petición + - Referencia + - metodo + - solicitud +translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +--- +
{{APIRef("Fetch API")}}
+ +

El método fetch() del mixin {{domxref("WindowOrWorkerGlobalScope")}} lanza el proceso de solicitud de un recurso de la red. Esto devuelve una promesa que resuelve al objeto {{domxref("Response")}} que representa la respuesta a la solicitud realizada.

+ +

Tanto {{domxref("Window")}} como {{domxref("WorkerGlobalScope")}} implementan WorkerOrGlobalScope, por lo que el método fetch() está disponible en prácticamente cualquier contexto desde el que se pueda necesitar solicitar un recurso.

+ +

Una promesa {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} se rechaza con un {{jsxref("TypeError")}} cuando sucede un error en la red, aunque normalmente significa un tema de permisos o similar. Una comprobación más precisa de una solicitud con fetch() debería comprobar que la promesa se resuelve, y que la propiedad {{domxref("Response.ok")}} tiene valor true. Un estatus HTTP 404 no constituye un error de red.

+ +

El método fetch() es controlado por la directiva connect-src de la Política de Seguridad de Contenido (Content Security Policy) en lugar de la directiva del recurso que se solicita.

+ +
+

Nota: Los parámetros del método fetch() son indénticos a los del constructor de {{domxref("Request.Request","Request()")}}.

+
+ +

Sintaxis

+ +
Promise<Response> fetch(input[, init]);
+ +

Parámetros

+ +
+
input
+
Define el recurso que se quiere solicitar. Puede ser: +
    +
  • Un {{domxref("USVString")}} con la URL del recurso a solicitar. Algunos navegadores aceptan los esquemas blob: y data:.
    • +
  • Un objeto {{domxref("Request")}}.
    • +
+
+
init {{optional_inline}}
+
Objeto de opciones que contiene configuraciones para personalizar la solicitud. Estas opciones pueden ser: +
    +
  • method: El método de solicitud, p.ej., GET, POST.
    • +
  • headers: Cualquier cabecera que se quiera añadir a la solicitud, contenidas en un objeto {{domxref("Headers")}} o un objeto literal con valores {{domxref("ByteString")}}.
    • +
  • body: Cualquier cuerpo que se quiera añadir a la solicitud: puede ser un {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, u objeto {{domxref("USVString")}}. Nótese que las solicitudes con métodos GET o HEAD no pueden tener cuerpo.
    • +
  • mode: El modo a usar en la solicitud, p.ej., cors, no-cors, o same-origin.
    • +
  • credentials: Las credenciales que se quieran utilizar para la solicitud: omit, same-origin, o include. Para enviar automáticamente las cookies del dominio actual, debe indicarse esta opción. Desde Chrome 50, esta propiedad también acepta una instancia de {{domxref("FederatedCredential")}} o de {{domxref("PasswordCredential")}}.
    • +
  • cache: El modo de caché a utilizar en la solicitud: default, no-store, reload, no-cache, force-cache, o only-if-cached.
    • +
  • redirect: El modo de redirección a usar: follow (seguir redirecciones automáticamente), error (abortar si sucede un error durante la redirección), o manual (gestionar redirecciones manualmente). El valor por defecto en Chrome es follow (hasta la versión 46 era manual).
    • +
  • referrer: Un {{domxref("USVString")}} que especifique no-referrer, client, o una URL. El valor por defecto es client.
    • +
  • referrerPolicy: Especifica el valor de la cabecera HTTP referer. Puede ser no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, unsafe-url.
    • +
  • integrity: Contiene el valor de integridad de subrecurso (subresource integrity) de la solicitud (p.ej., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).
    • +
  • keepalive: La opción keepalive se puede usar para permitir que recurso dure más que la página. Las solicitudes con el indicador keepalive son un reemplazo de la API {{domxref("Navigator.sendBeacon()")}}. 
    • +
  • signal: Una instancia de objeto {{domxref("AbortSignal")}}; permite comunicarse con con una solicitud vigente y abortarla si se desea via {{domxref("AbortController")}}.
    • +
+
+
+ +

Return value

+ +

Una {{domxref("Promise")}} que resuelve a un objeto {{domxref("Response")}}.

+ +

Excepciones

+ + + + + + + + + + + + + + + + + + +
TipoDescriptción
AbortErrorSe abortó la solicitud (mediante {{domxref("AbortController.abort()")}}).
TypeErrorDesde Firefox 43, fetch() lanza un TypeError si la URL tiene credenciales, como en http://usuario:clave@ejemplo.com.
+ +

Ejemplo

+ +

En el ejemplo de solicitud con Request (ver Fetch Request live) creamos un nuevo objeto {{domxref("Request")}} usando el constructor pertinente, y realizamos una solicitud usando fetch(). Dado que estamos solicitando una imagen, ejecutamos {{domxref("Body.blob()")}} en la respuesta para darle el tipo MIME correspondiente para que sea gestionada apropiadamente, luego creamos un objeto URL de ella para mostrarla en un elemento {{htmlelement("img")}}.

+ +
var miImagen = document.querySelector('img');
+
+var miSolicitud = new Request('flores.jpg');
+
+fetch(miSolicitud).then(function(respuesta) {
+  return respuesta.blob();
+}).then(function(respuesta) {
+  var objeto = URL.createObjectURL(respuesta);
+  miImagen.src = objeto;
+});
+ +

En el ejemplo de solicitud con inicializador y Request (ver Fetch Request init live) hacemos lo mismo pero además pasamos un objeto inicializador cuando invocamos el fetch():

+ +
var miImagen = document.querySelector('img');
+
+var misCabeceras = new Headers();
+misCabeceras.append('Content-Type', 'image/jpeg');
+
+var miInicializador = { method: 'GET',
+                        headers: misCabeceras,
+                        mode: 'cors',
+                        cache: 'default' };
+
+var miSolicitud = new Request('flores.jpg');
+
+fetch(miSolicitud,miInicializador).then(function(respuesta) {
+  ...
+});
+ +

Nótese que también podríamos pasar el objeto inicializador con el constructor de Request para conseguir el mismo efecto, p.ej.:

+ +
var miSolicitud = new Request('flores.jpg', miInicializador);
+ +

También se puede usar un objeto literal a modo de headers en init.

+ +
var miInicializador = { method: 'GET',
+                        headers: {
+                            'Content-Type': 'image/jpeg'
+                        },
+                        mode: 'cors',
+                        cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', miInicializador);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definida parcialmente en WindowOrWorkerGlobalScope en la especificación más reciente.
{{SpecName('Fetch','#dom-global-fetch','fetch()')}}{{Spec2('Fetch')}}Definición inicial
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Añade una instancia de {{domxref("FederatedCredential")}} o {{domxref("PasswordCredential")}} como valor posible para init.credentials.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/index.html b/files/es/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..b45747a2b3 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,169 @@ +--- +title: WindowOrWorkerGlobalScope +slug: Web/API/WindowOrWorkerGlobalScope +tags: + - API + - DOM + - DOM API + - NeedsTranslation + - Service Worker + - TopicStub + - Window + - WindowOrWorkerGlobalScope + - Worker + - WorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{ApiRef()}}
+ +

El mixin WindowOrWorkerGlobalScope describe diversas características comunes a las interfaces {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}. Cada una de estas interfaces pueden, por supuesto, añadir más funcionalidades sobre las listadas a continuación.

+ +
+

Nota: WindowOrWorkerGlobalScope es un mixin y no una interface; no se puede crear un objeto de tipo WindowOrWorkerGlobalScope.

+
+ +

Propiedades

+ +

Estas propiedades se definen en el mixin {{domxref("WindowOrWorkerGlobalScope")}}, y son implementadas por {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}.

+ +
+
+
{{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}}
+
Devuelve el objeto {{domxref("CacheStorage")}}, asociado al contexto actual. Este objeto habilita funcionalidades como guardar assets para su utilización offline, y generar respuestas personalizadas a las peticiones.
+
{{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}}
+
Proporciona un mecanismo para que las aplicaciones puedan acceder asíncronamente a las capacidades de las bases de datos indexadas.; devuelve un objeto {{domxref("IDBFactory")}}.
+
{{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}}
+
Devuelve un booleano indicando si el contexto actual es seguro (true)  o no (false).
+
{{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}}
+
Devuelve el origen del objeto global, serializado como un string. (Esto no parece estar implementado todavía en ningun navegador).
+
+
+ +

Métodos

+ +

Estas propiedades se definen en el mixin {{domxref("WindowOrWorkerGlobalScope")}}, y son implementadas por {{domxref("Window")}} y {{domxref("WorkerGlobalScope")}}.

+ +
+
{{domxref("WindowOrWorkerGlobalScope.atob()")}}
+
Decodifica un string de datos que ha sido codificado utlizando codificación en base-64.
+
{{domxref("WindowOrWorkerGlobalScope.btoa()")}}
+
Crea un string ASCII codificado en base-64 desde un string de datos binarios.
+
{{domxref("WindowOrWorkerGlobalScope.clearInterval()")}}
+
Procesa el set de ejecución repetida utilizando {{domxref("WindowOrWorkerGlobalScope.setInterval()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}
+
Cancela el retraso del set de ejecuión utilizando {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}.
+
{{domxref("WindowOrWorkerGlobalScope.createImageBitmap()")}}
+
Acepta variedad de recursos de imagen, y devuelve una {{domxref("Promise")}} que se resuelve como un {{domxref("ImageBitmap")}}. Opcionalmente, la fuente se recorta como un rectángulo de pixels con origen en (sx, sy) con ancho sw, y altura sh.
+
{{domxref("WindowOrWorkerGlobalScope.fetch()")}}
+
Comienza el proceso de búsqueda de un recurso desde la red.
+
{{domxref("WindowOrWorkerGlobalScope.setInterval()")}}
+
Programa la repetición de la ejecución de una función dado un número de lapsos en milisegundos.
+
{{domxref("WindowOrWorkerGlobalScope.setTimeout()")}}
+
Programa la ejecución de una función dada una cantidad de tiempo.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG",'webappapis.html#windoworworkerglobalscope-mixin', 'WindowOrWorkerGlobalScope mixin')}}{{Spec2('HTML WHATWG')}}Aquí es donde se define el mixin principal.
{{SpecName('Fetch','#fetch-method','fetch()')}}{{Spec2('Fetch')}}Definición del método fetch().
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}}Definición de la propiedad caches.
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definición de la propiedad indexedDB.
{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'isSecureContext')}}{{Spec2('Secure Contexts')}}Definición de la propiedad isSecureContext.
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari MobileChrome para Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html b/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html new file mode 100644 index 0000000000..e6ef3fe5cd --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/indexeddb/index.html @@ -0,0 +1,141 @@ +--- +title: WindowOrWorkerGlobalScope.indexedDB +slug: Web/API/WindowOrWorkerGlobalScope/indexedDB +translation_of: Web/API/WindowOrWorkerGlobalScope/indexedDB +--- +

{{ APIRef() }}

+ +

La propiedad indexedDB del mixin {{domxref("WindowOrWorkerGlobalScope")}} proporciona un mecanismo para que las aplicaciones puedan acceder asíncronamente a las capacidades de las bases de datos indexadas.

+ +

Sintaxis

+ +
var DBOpenRequest = self.indexedDB.open('toDoList');
+ +

Valor

+ +

Un objeto {{domxref("IDBFactory")}}.

+ +

Ejemplo

+ +
var db;
+function openDB() {
+ var DBOpenRequest = window.indexedDB.open('toDoList');
+ DBOpenRequest.onsuccess = function(e) {
+   db = DBOpenRequest.result;
+ }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('IndexedDB 2', '#dom-windoworworkerglobalscope-indexeddb', 'indexedDB')}}{{Spec2('IndexedDB 2')}}Definido en un WindowOrWorkerGlobalScope parcial en la última especificación.
{{SpecName('IndexedDB', '#widl-IDBEnvironment-indexedDB', 'indexedDB')}}{{Spec2('IndexedDB')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico23{{property_prefix("webkit")}}
+ 24		{{CompatVersionUnknown}}10 {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}
+ {{CompatGeckoDesktop("52.0")}}[1]		10, parcial157.1
Disponible en los workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico4.4{{CompatVersionUnknown}}{{CompatGeckoMobile("22.0")}}
+ {{CompatGeckoMobile("52.0")}}[1]		1.0.110228
Disponible en los workers{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +

[1] indexedDB se define ahora en el mixin {{domxref("WindowOrWorkerGlobalScope")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html b/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html new file mode 100644 index 0000000000..a99c499c7c --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/issecurecontext/index.html @@ -0,0 +1,86 @@ +--- +title: WindowOrWorkerGlobalScope.isSecureContext +slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext +translation_of: Web/API/WindowOrWorkerGlobalScope/isSecureContext +--- +

{{APIRef()}}{{SeeCompatTable}}

+ +

La propiedad de sólo-lectura isSecureContext, de la interface  {{domxref("WindowOrWorkerGlobalScope")}} Devuelve un booleano indicando si el contexto actual es seguro (true) or not (false).

+ +

Sintaxis

+ +
var isItSecure = self.isSecureContext; // or just isSecureContext
+
+ +

Valor

+ +

Un {{domxref("Boolean")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Secure Contexts', 'webappapis.html#dom-origin', 'WindowOrWorkerGlobalScope.isSecureContext')}}{{Spec2('Secure Contexts')}}Definición inicial.
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(55)}}{{CompatGeckoDesktop(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatChrome(55)}}{{CompatChrome(55)}}{{CompatGeckoMobile(52)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/windowtimers/clearinterval/index.html b/files/es/web/api/windowtimers/clearinterval/index.html new file mode 100644 index 0000000000..14a1b0d1b8 --- /dev/null +++ b/files/es/web/api/windowtimers/clearinterval/index.html @@ -0,0 +1,43 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/WindowTimers/clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.

+ +

Sintaxis

+ +
window.clearInterval(intervalID)
+
+ +

intervalID es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de setInterval().

+ +

Ejemplo

+ +

Vea el ejemplo de setInterval().

+ +

Especificación

+ + + + + + + + +
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
+ +

Vea también

+ + diff --git a/files/es/web/api/windowtimers/cleartimeout/index.html b/files/es/web/api/windowtimers/cleartimeout/index.html new file mode 100644 index 0000000000..0df5242672 --- /dev/null +++ b/files/es/web/api/windowtimers/cleartimeout/index.html @@ -0,0 +1,63 @@ +--- +title: window.clearTimeout +slug: Web/API/WindowTimers/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +
{{ApiRef}}
+ +

Resumen

+ +

Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.

+ +

Sintaxis

+ +
window.clearTimeout(timeoutID)
+
+ + + +

Ejemplo

+ +

Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.

+ +
var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };
+ +

Notas

+ +

Pasar un ID inválido a clearTimeout no tiene ningún efecto (y no lanza una excepción).

+ +

Especificación

+ +

DOM Nivel 0. Especificado en HTML5.

+ +

Vea también

+ + diff --git a/files/es/web/api/windowtimers/index.html b/files/es/web/api/windowtimers/index.html new file mode 100644 index 0000000000..3516b78c0d --- /dev/null +++ b/files/es/web/api/windowtimers/index.html @@ -0,0 +1,118 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This interface do not define any property, nor inherit any.

+ +

Methods

+ +

This interface do not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/es/web/api/windowtimers/setinterval/index.html b/files/es/web/api/windowtimers/setinterval/index.html new file mode 100644 index 0000000000..fe41612dd6 --- /dev/null +++ b/files/es/web/api/windowtimers/setinterval/index.html @@ -0,0 +1,692 @@ +--- +title: WindowTimers.setInterval() +slug: Web/API/WindowTimers/setInterval +tags: + - API + - DOM + - Gecko + - Intervalos + - Method + - Temporizadores + - Temporizadores de JavaScript + - WindowTimers + - setInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +
{{APIRef("HTML DOM")}}
+ +
Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.
+ +
+ +

Sintaxis

+ +
var procesoID = window.setInterval(función, intervaloDeTiempo[, parámetro1, parámetro2, ... , parámetroN]);
+var procesoID = window.setInterval(código, intervaloDeTiempo);
+
+ +

Parámetros

+ +
+
función
+
La {{jsxref("function")}} que será ejecutada cada intervaloDeTiempo milisegundos.
+
código
+
Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada intervaloDeTiempo milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.
+
intervaloDeTiempo
+
El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.
+
+
El parámetro intervaloDeTiempo es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.
+
+
parámetro1, ..., parámetroN {{optional_inline}}
+
Parámetros adicionales que se pasan a la función a ejecutar.
+
+ +
+

En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección Callback arguments).

+
+ +

Valor de Retorno

+ +

El valor de retorno procesoID es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar setInterval(); este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones setInterval() y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos clearInterval() y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.

+ +
+

Nota: El argumento intervaloDeTiempo se convierte aun entero con signo de 32 bits. Esto limita efectivamente al intervaloDeTiempo a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.

+
+ +

Ejemplos

+ +

Ejemplo 1: Sintaxis básica

+ +

El siguiente ejemplo muestra la sintaxis básica.

+ +
var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
+
+function miFuncion(a,b) {
+  // Aquí va tu código
+  // Los parámetros son opcionales completamente
+  console.log(a);
+  console.log(b);
+}
+
+ +

Ejemplo 2: Alternando dos colores

+ +

El siguiente ejemplo se llama a la función flashtext() una vez por segundo hasta que se presiona el botón Detener.

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Ejemplo de setInterval/clearInterval</title>
+  <script>
+     var nIntervId;
+
+     function cambiaDeColor() {
+        nIntervId = setInterval(flasheaTexto, 1000);
+     }
+
+     function flasheaTexto() {
+        var oElem = document.getElementById('mi_mensaje');
+        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+        //oElem.style.color ... es un operador ternario o condicional
+     }
+
+     function detenerCambioDeColor() {
+        clearInterval(nIntervId);
+     }
+  </script>
+</head>
+<body onload="cambiaDeColor();">
+  <div id="mi_mensaje">
+    <p>¡Hola mundo!</p>
+  </div>
+  <button onclick="detenerCambioDeColor();">Detener</button>
+</body>
+</html>
+
+ +

Ejemplo 3: Simulando una máquina de escribir

+ +

El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (NodeList) que coinciden con un grupo de selectores y después lo escribe lentamente.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>Máquina de Escribir con JavaScript</title>
+<script>
+  function maquinaEscribir (sSelector, nRate) {
+
+      function limpiar () {
+        clearInterval(nIntervId);
+        bTyping = false;
+        bStart = true;
+        oCurrent = null;
+        aSheets.length = nIdx = 0;
+      }
+
+      function desplazarse (oSheet, nPos, bEraseAndStop) {
+        if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; }
+
+        var oRel, bExit = false;
+
+        if (aMap.length === nPos) { aMap.push(0); }
+
+        while (aMap[nPos] < oSheet.parts.length) {
+          oRel = oSheet.parts[aMap[nPos]];
+
+          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+          if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
+            bExit = true;
+            oCurrent = oRel.ref;
+            sPart = oCurrent.nodeValue;
+            oCurrent.nodeValue = "";
+          }
+
+          oSheet.ref.appendChild(oRel.ref);
+          if (bExit) { return false; }
+        }
+
+        aMap.length--;
+        return true;
+      }
+
+      function mecanografear () {
+        if (sPart.length === 0 && desplazarse(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { limpiar(); return; }
+
+        oCurrent.nodeValue += sPart.charAt(0);
+        sPart = sPart.slice(1);
+      }
+
+      function Hoja (oNode) {
+        this.ref = oNode;
+        if (!oNode.hasChildNodes()) { return; }
+        this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+        for (var nChild = 0; nChild < this.parts.length; nChild++) {
+          oNode.removeChild(this.parts[nChild]);
+          this.parts[nChild] = new Hoja(this.parts[nChild]);
+        }
+      }
+
+      var
+        nIntervId, oCurrent = null, bTyping = false, bStart = true,
+        nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+      this.rate = nRate || 100;
+
+      this.ejecuta = function () {
+        if (bTyping) { return; }
+        if (bStart) {
+          var aItems = document.querySelectorAll(sSelector);
+
+          if (aItems.length === 0) { return; }
+          for (var nItem = 0; nItem < aItems.length; nItem++) {
+            aSheets.push(new Hoja(aItems[nItem]));
+            /* Uncomment the following line if you have previously hidden your elements via CSS: */
+            // aItems[nItem].style.visibility = "visible";
+          }
+
+          bStart = false;
+        }
+
+        nIntervId = setInterval(mecanografear, this.rate);
+        bTyping = true;
+      };
+
+      this.pausa = function () {
+        clearInterval(nIntervId);
+        bTyping = false;
+      };
+
+      this.finaliza = function () {
+        oCurrent.nodeValue += sPart;
+        sPart = "";
+        for (nIdx; nIdx < aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
+        limpiar();
+      };
+  }
+
+    /* usage: */
+    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
+
+    /* default frame rate is 100: */
+    var oTWExample2 = new maquinaEscribir("#controls");
+
+    /* you can also change the frame rate value modifying the "rate" property; for example: */
+    // oTWExample2.rate = 150;
+
+    onload = function () {
+      oTWExample1.ejecuta();
+      oTWExample2.ejecuta();
+    };
+</script>
+<style type="text/css">
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+</style>
+</head>
+
+<body>
+
+<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p>
+<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.ejecuta();">Ejecutar</span> | <span class="intLink" onclick="oTWExample1.pausa();">Pausar</span> | <span class="intLink" onclick="oTWExample1.finaliza();">Terminar</span>&nbsp;]</p>
+<div id="info">
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+</div>
+<h1>Maquina de Escribir en JavaScript </h1>
+
+<div id="article">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+<form>
+<p>Phasellus ac nisl lorem: <input type="text" /><br />
+<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>
+<p><input type="submit" value="Send" />
+</form>
+<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p>
+<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+</div>
+</body>
+</html>
+
+ +

Observa este ejemplo en acción. Ver más: clearInterval().

+ +

Argumentos de Callback

+ +

Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en setTimeout() ni en setInterval(). El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.

+ +
/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:

+ +
var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);
+ +

También puedes hacer uso de function's bind. Ejemplo:

+ +
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
+ +

{{h3_gecko_minversion("Inactive tabs", "5.0")}}

+ +

A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.

+ +

Problemas usando "this"

+ +

Cuando pasas el método de un objeto a la función setInterval() éste es invocado fuera de su contexto. Esto puede crear un valor de this que puede no ser el esperado. Este problema es abordado en detalle en JavaScript reference.

+ +

Explicación

+ +

Cuando setInterval() o setTimeOut() ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave this se le asigna el valor del objeto window (o el objeto global), no es igual que usar this dentro de una fuinción que invoque a setTimeOut(). Observa el siguiente ejemplo (que utiliza setTimeOut() en lugar de setInterval() – el problema, de hecho, es el mismo para ambos temporizadores):

+ +
miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sPropiedad) {
+    alert(arguments.length > 0 ? this[sPropiedad] : this);
+};
+
+miArreglo.miMetodo(); // imprime "cero,uno,dos"
+miArreglo.miMetodo(1); // imprime "uno"
+setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
+setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
+// tratemos de pasar el objeto 'this'
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error
+ +

Como puedes ver no hay forma de pasar el objeto this a la función de Callback en la versión anterior de JavaScript.

+ +

Una posible solución

+ +

Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas setTimeout() y setInterval() con las siguientes funciones no nativas que permiten su ejecución a través del método Function.prototype.call. El siguiente ejemplo muestra una posible sustitución:

+ +
// Permite el pase del objeto 'this' a través de temporizadores JavaScript
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+ +
Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) no estándar. Para más información vea callback arguments paragraph.
+ +

Prueba de nueva funcionalidad:

+ +
miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
+
+ +

Otra solución más compleja está en la siguiente liga de framework.

+ +
JavaScript 1.8.5 introduce el método Function.prototype.bind(), el cual permite especificar el valor de this para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra this. También, ES2015 soporta arrow functions, dentro del lenguaje nos permite escribir cosas como setInterval( () => this.myMethod) si estamos dentro del método de miArreglo .
+ +

MiniDaemon - Un framework para administrar temporizadores

+ +

En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto this a la función de Callback (observa la sección Problemas usando "this" para más detalles). Puedes consultar también el siguiente código en GitHub.

+ +
Para una versión más modular de este (Daemon)puedes verlo en JavaScript Daemons Management. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor Daemon. Éste constructor no es más que un clon del  MiniDaemon con soporte para las funciones init y onstart declarables durante la instanciación del mismo. Por esto el MiniDaemon framework se mantiene como el camino recomendado para realizar animaciones simples.
+ +

minidaemon.js

+ +
/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this && this instanceof MiniDaemon)) { return; }
+  if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
+  if (nLen > 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+
+ +
MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.
+ +

Sintaxis

+ +

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);

+ +

Descripción

+ +

Regresa un Objecto que contiene la información necesaria para una animación (como el objeto this, la función de Callback, la duración y el frame-rate).

+ +

Parámetros

+ +
+
thisObject
+
El valor de la palabra this sobre el cual funcionará la función de Callback. Puede ser un objecto o null.
+
callback
+
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
+
rate (optional)
+
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.
+
length (optional)
+
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omisión es Infinity.
+
+ +

Propiedades de la intancia MiniDaemon 

+ +
+
myDaemon.owner
+
El objeto this sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un objecto o null.
+
myDaemon.task
+
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
+
myDaemon.rate
+
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).
+
myDaemon.length
+
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omición es Infinity (lectura/escritura).
+
+ +

MiniDaemon instances methods

+ +
+
myDaemon.isAtEnd()
+
Regresa un valor boleano que expresa cuando el daemon está en posición de inicio/fin o no.
+
myDaemon.synchronize()
+
Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.
+
myDaemon.pause()
+
Pausa el deamon.
+
myDaemon.start([reverse])
+
Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).
+
+ +

Métodos del objeto global del MiniDaemon

+ +
+
MiniDaemon.forceCall(minidaemon)
+
Fuerza una sola función callback a la función minidaemon.task  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.
+
+ +

Ejemplo de uso

+ +

Tu página HTML:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>MiniDaemin Example - MDN</title>
+  <script type="text/javascript" src="minidaemon.js"></script>
+  <style type="text/css">
+    #sample_div {
+      visibility: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <p>
+    <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" />
+    <input type="button" onclick="fadeInOut.start(true);" value="fade out">
+    <input type="button" onclick="fadeInOut.pause();" value="pause" />
+  </p>
+
+  <div id="sample_div">Some text here</div>
+
+  <script type="text/javascript">
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? "hidden" : "visible";
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
+  </script>
+</body>
+</html>
+ +

Prueba este ejemplo

+ +

Notas

+ +

La función setInterval() es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.

+ +

Puedes cancelar el ciclo iniciado por un setInterval() usando el comando window.clearInterval().

+ +

Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función window.setTimeout().

+ +

Asegúrate que el tiempo de ejecución sea menor que la frecuencia

+ +

Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando window.setTimeout. Por ejemplo, si usas setInterval para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.

+ +

En estos casos llamadas con un patrón de setTimeout() recursivo es preferible:

+ +
(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+
+ +

En este fragmento de código, la función loop() es declarada y es ejecutada inmediatamente. La función loop() es invocada de forma recursiva dentro de setTimeout() despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. 

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstatusComentarios
{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}}Definición inicial (DOM Level 0)
+ +

Compatibilidad

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)[2]Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Soporta parámetros para callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Soporta parámetros para callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Whether it supports the optional parameters when in its first form or not.

+ +

[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.

+ +

Ver más

+ + diff --git a/files/es/web/api/windowtimers/settimeout/index.html b/files/es/web/api/windowtimers/settimeout/index.html new file mode 100644 index 0000000000..1180d9f8af --- /dev/null +++ b/files/es/web/api/windowtimers/settimeout/index.html @@ -0,0 +1,340 @@ +--- +title: WindowOrWorkerGlobalScope.setTimeout +slug: Web/API/WindowTimers/setTimeout +tags: + - API + - HTML DOM + - WindowOrWorkerGlobalScope + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

El método setTimeout() del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.

+ + +

Sintaxis

+ +
var idTemporizador = scope.setTimeout(funcion[, retraso, parametro1, parametro2, ...]);
+var idTimeout = scope.setTimeout(funcion[, retraso]);
+var idTimeout = scope.setTimeout(codigo[, retraso]);
+
+ +

Parámetros

+ +
+
funcion
+
Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.
+
codigo
+
Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis no se recomienda por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.
+
retraso {{optional_inline}}
+
Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.
+
param1, ..., paramN {{optional_inline}}
+
Parámetros adicionales que se pasan a la función especificada por  func una vez el temporizador expira.
+
+ +
Nota: Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección Callback arguments).
+ +

Valor retornado

+ +

El valor retornado IDtemporizador es númerico y no es cero; identifica el temporizador creado con la llamada a setTimeout(); este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.

+ +

Puede ser útil advertir que  setTimeout() y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto clearTimeout() como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.

+ +

Ejemplo

+ +

El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas setTimeout() y clearTimeout(). Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con clearTimeout(). Opcionalmente puede cancelar este temporizador presionando el segundo botón.

+ +

Contenido HTML

+ +
<p>Ejemplo funcional</p>
+<button onclick="delayedAlert();">Muestra una caja de alerta después de dos segundos</button>
+<p></p>
+<button onclick="clearAlert();">Cancela la alerta antes de que ocurra</button>
+
+ +

Contenido JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

Vea también clearTimeout() example.

+ +

Callback arguments

+ +

Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con setTimeout() o setInterval()) usted puede incluir este código de compatibilidad IE-specific que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.

+ +
/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Arreglo solo para IE

+ +

Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+
+ +

O usar un enfoque más limpio basado en el condicional para IE de HTML:

+ +
<!--[if lt IE 9]><script>
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+</script><![endif]-->
+
+ +

Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:

+ +
var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
+
+ +

Sin embargo, otra posibilidad es usar function's bind. Ejemplo:

+ +
setTimeout(function(arg1){}.bind(undefined, 10));
+
+ +

El problema "this"

+ +

Cuando pasa un método a setTimeout() (o cualquier otra función , por el estilo), podría ser invocada con el valor de this equivocado. Este problema es explicado en detalle en la referencia de JavaScript.

+ +

Explicación

+ +

El código ejecutado por setTimeout() corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave this para la función llamada será asignado al objeto window (o global); no tendrá el mismo valor del this de la función que llamó al setTimeout. Vea el siguiente ejemplo:

+ +
myArray = ["cero", "uno", "dos"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // imprime "cero,uno,dos"
+myArray.myMethod(1); // imprime "uno"
+setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
+setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
+// intentemos pasar el objeto 'this'
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error
+ +

Como puedes ver no hay forma de pasar el objeto this a la función callback.

+ +

Una posible solución

+ +

Una posible forma de resolver el problema del "this" es reemplazar las dos funciones globales nativas setTimeout() or setInterval()por dos no-nativas  que permitan su invocación a través del método Function.prototype.call. El siguiente ejemplo muestra un posible reemplazo:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Nota: Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo Callback arguments.
+ +

Prueba de la nueva característica:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +

No hay soluciones nativas ad hoc a este problema.

+ +
Nota: JavaScript 1.8.5 introduce el método Function.prototype.bind(, que permite especificar el valor que debería usarse como this para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.
+ +

Notas

+ +

Puede cancelar el temporizador usando window.clearTimeout(). Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar window.setInterval().

+ +

Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó setTimeout()haya terminado.

+ +

Pasando cadenas literales

+ +

Pasando una cadena en vez de una función a setTimeout()pasa lo mismo que al usar eval.

+ +
// Correcto
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrecto
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+
+ +

Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde setTimeout() fue llamado no estarán disponibles cuando la cadena es evaluada como código.

+ +

Minimum/ maximum delay and timeout nesting

+ +

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

+ +

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.

+ +

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

+ +

To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as described here.

+ +

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

+ +

Inactive tabs

+ +

In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
Soporta parámetros para callback*1{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}10.0{{ CompatVersionUnknown }}{{ CompatUnknown }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
Soporta parámetros para callback*1{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
+
+ +

*1 Whether it supports the optional parameters when in its first form or not.

+ +

Especificación

+ +

Parte del DOM nivel 0, como se especifica en HTML5.

+ +

Vea también

+ + diff --git a/files/es/web/api/worker/index.html b/files/es/web/api/worker/index.html new file mode 100644 index 0000000000..4be8325629 --- /dev/null +++ b/files/es/web/api/worker/index.html @@ -0,0 +1,155 @@ +--- +title: Worker +slug: Web/API/Worker +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Web Workers + - Worker + - Workers +translation_of: Web/API/Worker +--- +

{{APIRef("Web Workers API")}}

+ +

The Worker interface of the Web Workers API represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread.

+ +

Workers may in turn spawn new workers as long as those workers are hosted within the same origin as the parent page (Note: nested workers are currently not implemented in Blink).  In addition workers may use XMLHttpRequest for network I/O, with the stipulation that the responseXML and channel attributes on XMLHttpRequest always return null.

+ +

Not all interfaces and functions are available to the script associated with a Worker.

+ +

In Firefox, if you want to use workers in extensions and would like to have access to js-ctypes, you should use the {{ domxref("ChromeWorker") }} object instead.

+ +

Properties

+ +

Inherits properties from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.

+ +

Event handlers

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
An {{ domxref("EventListener") }} called whenever an {{domxref("ErrorEvent")}} of type error bubbles through to the worker. This is inherited from {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
An {{ domxref("EventListener") }} called whenever a {{domxref("MessageEvent")}} of type message bubbles through the worker — i.e. when a message is sent to the parent document from the worker via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. The message is stored in the event's {{domxref("MessageEvent.data", "data")}} property.
+
+ +

Constructors

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Creates a dedicated web worker that executes the script at the specified URL. Workers can also be constructed using Blobs.
+
+ +

Methods

+ +

Inherits methods from its parent, {{domxref("EventTarget")}}, and implements properties from {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Sends a message — which can consist of any JavaScript object — to the worker's inner scope.
+
{{domxref("Worker.terminate()")}}
+
Immediately terminates the worker. This does not offer the worker an opportunity to finish its operations; it is simply stopped at once. ServiceWorker instances do not support this method.
+
+ +

Example

+ +

The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor and usage of the object:

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

For a full example, see ourBasic dedicated worker example (run dedicated worker).

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#worker", "Worker")}}{{Spec2('Web Workers')}}Initial definition.
+ +

Browser compatibility

+ +

Support varies for different types of workers. See each worker type's page for specifics.

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support43.510.010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support4.43.51.0.110.011.55.1{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/es/web/api/worker/postmessage/index.html b/files/es/web/api/worker/postmessage/index.html new file mode 100644 index 0000000000..c47fe400fc --- /dev/null +++ b/files/es/web/api/worker/postmessage/index.html @@ -0,0 +1,206 @@ +--- +title: Worker.postMessage() +slug: Web/API/Worker/postMessage +translation_of: Web/API/Worker/postMessage +--- +

{{APIRef("Web Workers API")}}

+ +

Web Workers API posee un metodo llamado postMessage() el cual envia un mensaje al ambito del worker. Este metodo acepta un parametro, el cual es un dato enviado al worker. El dato puede ser un valor o objeto controlado por el algoritmo strctured clone (incluye referencias ciclicas).

+ +

El Worker puede enviar de vuelta información al hilo que lo genero usando el metodo {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.

+ +

Syntax

+ +
myWorker.postMessage(aMessage, transferList);
+ +

Parameters

+ +
+
aMessage
+
The object to deliver to the worker; this will be in the data field in the event delivered to the {{domxref("DedicatedWorkerGlobalScope.onmessage")}} handler. This may be any value or JavaScript object handled by the structured clone algorithm, which includes cyclical references.
+
transferList {{optional_inline}}
+
An optional array of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (neutered) in the context it was sent from and it becomes available only to the worker it was sent to.
+
Only {{domxref("MessagePort")}} and {{domxref("ArrayBuffer")}} objects can be transferred.
+
+ +

Returns

+ +

Void.

+ +

Example

+ +

The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor. When either of two form inputs (first and second) have their values changed, {{event("change")}} events invoke postMessage() to send the value of both inputs to the current worker.

+ +
var myWorker = new Worker("worker.js");
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+ +

For a full example, see ourBasic dedicated worker example (run dedicated worker).

+ +
+

Note: postMessage() can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.

+
+ +

Transfer Example

+ +

This example is of a Firefox addon that transfers an ArrayBuffer from the main thread to the ChromeWorker, and then the ChromeWorker trasnfers it back to the main thread.

+ +

Main thread code:

+ +
var myWorker = new ChromeWorker(self.path + 'myWorker.js');
+
+function handleMessageFromWorker(msg) {
+    console.log('incoming message from worker, msg:', msg);
+    switch (msg.data.aTopic) {
+        case 'do_sendMainArrBuff':
+            sendMainArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+myWorker.addEventListener('message', handleMessageFromWorker);
+
+// Ok lets create the buffer and send it
+var arrBuf = new ArrayBuffer(8);
+console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength);
+
+myWorker.postMessage(
+    {
+        aTopic: 'do_sendWorkerArrBuff',
+        aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below
+    },
+    [
+        arrBuf // The array buffer we created 9 lines above
+    ]
+);
+
+console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength);
+
+ +

Worker code

+ +
self.onmessage = function (msg) {
+    switch (msg.data.aTopic) {
+        case 'do_sendWorkerArrBuff':
+                sendWorkerArrBuff(msg.data.aBuf)
+            break;
+        default:
+            throw 'no aTopic on incoming message to ChromeWorker';
+    }
+}
+
+function sendWorkerArrBuff(aBuf) {
+    console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength);
+
+    self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]);
+
+    console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength);
+}
+
+ +

Output logged

+ +
arrBuf.byteLength pre transfer: 8                              bootstrap.js:40
+arrBuf.byteLength post transfer: 0                             bootstrap.js:42
+
+from worker, PRE send back aBuf.byteLength: 8                  myWorker.js:5:2
+
+incoming message from worker, msg: message { ... }             bootstrap.js:20
+got back buf in main thread, aBuf.byteLength: 8                bootstrap.js:12
+
+from worker, POST send back aBuf.byteLength: 0                 myWorker.js:7:2
+ +

We see that byteLength goes to 0 as it is trasnferred. To see a fully working example of this Firefox demo addon see here: GitHub :: ChromeWorker - demo-transfer-arraybuffer

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dom-worker-postmessage", "Worker.postMessage()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#dom-worker-postmessage", "Worker.postMessage()")}}{{Spec2('Web Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0 [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0 [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer does not support {{domxref("Transferable")}} objects.

+ +

See also

+ + diff --git a/files/es/web/api/worker/terminate/index.html b/files/es/web/api/worker/terminate/index.html new file mode 100644 index 0000000000..d557989f25 --- /dev/null +++ b/files/es/web/api/worker/terminate/index.html @@ -0,0 +1,107 @@ +--- +title: Worker.terminate() +slug: Web/API/Worker/terminate +translation_of: Web/API/Worker/terminate +--- +

{{APIRef("Web Workers API")}}

+ +

El método terminate() de la interfaz {{domxref("Worker")}} termina inmediatamente el {{domxref("Worker")}}. Esto no ofrece la oportunidad de finalizar las operaciones que estuviera realizando el worker, termina la ejecución por completo.

+ +

Sintaxis

+ +
myWorker.terminate();
+ +

Parámetros

+ +

Ninguno.

+ +

Retorna

+ +

Nada.

+ +

Ejemplo

+ +

El siguiente extracto de código muestra la creación de un objeto {{domxref("Worker")}} usando el constructor de  {{domxref("Worker.Worker", "Worker()")}} y éste es inmediatamente terminado.

+ +
var myWorker = new Worker('worker.js');
+
+myWorker.terminate();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "#dom-worker-terminate", "Worker.postMessage()")}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers', "#dom-worker-terminate", "Worker.postMessage()")}}{{Spec2('Web Workers')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico43.510.010.64
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.43.51.0.110.011.55.1
+
+ +

Mirar también

+ +

La interfaz {{domxref("Worker")}} a la que pertenece.

diff --git a/files/es/web/api/xmlhttprequest/abort/index.html b/files/es/web/api/xmlhttprequest/abort/index.html new file mode 100644 index 0000000000..de73cb1a5d --- /dev/null +++ b/files/es/web/api/xmlhttprequest/abort/index.html @@ -0,0 +1,120 @@ +--- +title: XMLHttpRequest.abort() +slug: Web/API/XMLHttpRequest/abort +tags: + - AJAX + - API + - HTTP + - HttpRequest + - Referencia + - XHR + - XMLHttpRequest + - abortar + - metodo +translation_of: Web/API/XMLHttpRequest/abort +--- +

{{APIRef('XMLHttpRequest')}}

+ +

El método XMLHttpRequest.abort() aborta la petición si ha sido enviada. Cuando una petición se aborta, readyState se asigna a 0 (UNSENT), pero el evento readystatechange no se lanza.

+ +

Sintaxis

+ +
xhrInstance.abort();
+ +

Parámetros

+ +

Ninguno.

+ +

Valor de retorno

+ +

Vacío.

+ +

Ejemplo

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+xhr.open(method,url,true);
+
+xhr.send();
+
+xhr.abort();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest', '#the-abort()-method')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
MejoraChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome(1)}}{{CompatUnknown}}{{CompatIe('5')}}[1]
+ {{CompatIe('7')}}		{{CompatVersionUnknown}}{{CompatSafari('1.2')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MejoraAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] This feature was implemented via ActiveXObject(). Internet Explorer implementa el estándar XMLHttpRequest desde la versión 7.

+ +

Ver también

+ + diff --git a/files/es/web/api/xmlhttprequest/formdata/index.html b/files/es/web/api/xmlhttprequest/formdata/index.html new file mode 100644 index 0000000000..2ca830daf7 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/formdata/index.html @@ -0,0 +1,84 @@ +--- +title: FormData +slug: Web/API/XMLHttpRequest/FormData +tags: + - API + - FormData + - Interfaz + - Referencia + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La interfaz FormData proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores, que pueden ser enviados fácilmente con el método {{domxref("XMLHttpRequest.send()")}}. Utiliza el mismo formato que usaría un formulario si el tipo de codificación fuera "multipart/form-data".

+ +

También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío GET simple.

+ +

Un objeto que implementa FormData puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: for (var p of myFormData) es equivalente a for (var p of myFormData.entries()).

+ +
+

Nota: Esta característica está disponible en Web Workers.

+
+ +

Constructor

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Crea un nuevo objeto FormData.
+
+ +

Métodos

+ +
+
{{domxref("FormData.append()")}}
+
Agrega un nuevo valor a una clave existente dentro de un objeto FormData, o añade la clave si aún no existe.
+
{{domxref("FormData.delete()")}}
+
Elimina una pareja clave/valor de un objeto FormData.
+
{{domxref("FormData.entries()")}}
+
Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.
+
{{domxref("FormData.get()")}}
+
Devuelve el primer valor asociado con una clave dada en un objeto FormData.
+
{{domxref("FormData.getAll()")}}
+
Devuelve un array con todos los valores asociados con una clave dada en un objeto FormData.
+
{{domxref("FormData.has()")}}
+
Devuelve un booleano que indica si un objeto FormData contiene una clave determinada.
+
{{domxref("FormData.keys()")}}
+
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.
+
{{domxref("FormData.set()")}}
+
Establece un nuevo valor para una clave existente dentro de un objeto FormData, o agrega la clave/valor si aún no existe.
+
{{domxref("FormData.values()")}}
+
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData definido en XHR spec
+ +

Compatibilidad con navegadores

+ + + +

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

+ +

Ver también

+ + diff --git a/files/es/web/api/xmlhttprequest/index.html b/files/es/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..243b3220e6 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/index.html @@ -0,0 +1,428 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +tags: + - AJAX + - Todas_las_Categorías + - XMLHttpRequest + - páginas_a_traducir +translation_of: Web/API/XMLHttpRequest +--- +

XMLHttpRequest es un objeto JavaScript que fue diseñado por Microsoft y adoptado por Mozilla, Apple y Google. Actualmente es un estándar de la W3C. Proporciona una forma fácil de obtener información de una URL sin tener que recargar la página completa. Una página web puede actualizar sólo una parte de la página sin interrumpir lo que el usuario está haciendo. XMLHttpRequest es ampliamente usado en la programación AJAX.

+ +

A pesar de su nombre, XMLHttpRequest puede ser usado para recibir cualquier tipo de dato, no solo XML, y admite otros formatos además de HTTP (incluyendo file y ftp).

+ +

Para crear una instancia de XMLHttpRequest, debes hacer lo siguiente:

+ +
var req = new XMLHttpRequest();
+
+ +

Para obtener más información de cómo usar XMLHttpRequest, mira Usar XMLHttpRequest.

+ +
Nota: De forma predeterminada, Firefox 3 limita la cantidad de conexiones de XMLHttpRequest por servidor a 6 (las versiones previas limitan a 2 conexiones por servidor). Algunos sitios web interactivos pueden mantener una conexión XMLHttpRequest abierta, así que abrir múltiples sesiones a esos sitios puede derivar en congelamientos del navegador de una forma que la ventana no se actualiza y los controles no responden. Este valor puede ser cambiado al editar la preferencia network.http.max-persistent-connections-per-server en about:config.
+ +

Resumen del método

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void abort();
string getAllResponseHeaders();
ACString getResponseHeader(in AUTF8String header);
[noscript] void init(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);
void open(in AUTF8String method, in AUTF8String url);
[noscript] void openRequest(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);
void overrideMimeType(in AUTF8String mimetype);
void send([optional] in nsIVariant body);
void sendAsBinary(in DOMString body); {{ fx_minversion_inline(3) }}
void setRequestHeader(in AUTF8String header, in AUTF8String value);
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
channel{{ Interface("nsIChannel") }}El canal es usado por el objeto cuando se produce el pedido. Esto da null si el canal aún no fue creado. En el caso de un pedido de múltiples partes, este es el canal inicial, no las diferentes partes del pedido múltiple. Es necesario tener privilegios elevados para acceder; sólo lectura. {{ Non-standard_inline() }}
mozBackgroundRequestbooleano +

Indica si el objeto representa o no un pedido de un servicio de fondo. Si es true, no se asocia una carga de grupo con el pedido, y los diálogos de seguridad no se muestran al usuario. Es necesario tener privilegios elevados para acceder. {{ Non-standard_inline() }}

+ +

En los casos en que un diálogo de seguridad debe ser mostrado (como en una autentficación o la notificación de un certificado no válido), el pedido simplemente falla.

+
mozResponseArrayBuffer  {{ non-standard_inline() }}ArrayBufferLa respuesta al pedido en la forma de un arreglo de JavaScript. Esto es NULL si el pedido no fue exitoso o si todavía no ha sido enviado. Sólo lectura.
multipartbooleano +

Indica cuando se espera que la respuesta sea o no una serie de mútiples documentos XML. Si se define como true, el tipo de contenido de la respuesta inicial debe ser multipart/x-mixed-replace u ocurrirá un error. Todos los pedidos deben ser asincrónicos.

+ +

Esto permite el uso del push del servidor; para cada documento XML que se escribe para este pedido, se crea un nuevo XMLDOMdocument y se llama al manejador onload entre cada documento.

+ +
Nota: Cuando esto se elige, el manejador onload y otros manejadores de eventos no son reiniciados después de que el primer XMLdocument es cargado, y el manejador onload es llamado después de que cada parte de la respuesta es recibida.
+
+

onreadystatechange

+ 		{{ Interface("nsIDOMEventListener") }} +

Una función del objeto JavaScript que se llama cuando el atributo readyState cambia. El callback se llama desde la interfaz del usuario.

+ +
Aviso: Esto no debe ser usado desde código nativo. Tampoco debes usarlo con pedidos sincrónicos.
+
readyStatelong +

El estado del pedido:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorEstadoDescripción
0UNINITIALIZEDtodavía no se llamó a open().
1LOADINGtodavía no se llamó a send().
2LOADEDsend() ya fue invocado, y los encabezados y el estado están disponibles.
3INTERACTIVEDescargando; responseText contiene información parcial.
4COMPLETEDLa operación está terminada.
+
responseTextAStringLa respuesta al pedido como texto, o null si el pedido no fue exitoso o todavía no se envió. Sólo lectura.
responseXMLnsIDOMDocument +

La respuesta al pedido como un objeto DOMDocument, o null si el pedido no fue exitoso, aún no fue enviado o no puede ser analizado como XML. La respuesta es analizada como si fuera text/xml. Sólo lectura.

+ +
Nota: Si el servidor no aplica el encabezado de tipo de contenido text/xml, puedes usar overrideMimeType() para forzar a XMLHttpRequest a analizarlo como XML igualmente.
+
statusunsigned longEl estado de la respuesta al pedido. Éste es el código HTTPresult (por ejemplo, status es 200 por un pedido exitoso). Sólo lectura.
statusTextAUTF8StringLa cadena de respuesta que devuelve el HTTPserver. A diferencia de status, este incluye el texto completo del mensaje de respuesta ("200 OK", por ejemplo). Sólo lectura.
upload{{ Interface("nsIXMLHttpRequestUpload") }}El proceso de subida puede ser rastreado al agregar un registro de evento a upload. {{ fx_minversion_inline(3.5) }}
withCredentialsbooleano +

Indica cuando el pedido de Access-Control entre sitios debe o no ser realizado usando credenciales como cookies o encabezados de autorización. {{ fx_minversion_inline(3.5) }}

+ +
Nota: Esto nunca afecta los pedidos en para el propio sitio.
+ +

El valor predeterminado es false.

+
+ +

Métodos

+ +

abort()

+ +

Aborta el pedido si éste ya fue enviado.

+ +
void abort();
+
+ +
Parámetros
+ +

Ninguno.

+ +

getAllResponseHeaders()

+ +

Devuelve todos los encabezados de respuesta como una cadena.

+ +
Nota: Para pedidos multi partes, esto devuelve los encabezados de la parte actual del pedido, no del canal original.
+ +
string getAllResponseHeaders();
+
+ +
Parámetros
+ +

Ninguno.

+ +
Valor devuelto
+ +

El texto de todos los encabezados de respuesta, o null si no se ha recibido ninguna respuesta.

+ +

getResponseHeader()

+ +

Devuelve el texto de un encabezado específico.

+ +
ACString getResponseHeader(
+ in AUTF8String header
+);
+
+ +
Parámetros
+ +
+
header
+
El nombre del encabezado buscado.
+
+ +
Valor devuelto
+ +

Una cadena que contiene el texto de un encabezado específico, o null tanto si la respuesta no se ha recibido o el encabezado no existe en la respuesta.

+ +

init()

+ +

Inicializa el objeto para que sea usado desde código C++.

+ +
Aviso: Este método no debe ser llamado desde JavaScript.
+ +
[noscript] void init(
+ in nsIPrincipal principal,
+ in nsIScriptContext scriptContext,
+ in nsPIDOMWindow ownerWindow
+);
+
+ +
Parámetros
+ +
+
principal
+
El principal para usar en el pedido; no debe ser null.
+
scriptContext
+
El contexto del programa que usará en el pedido; no debe ser null.
+
ownerWindow
+
La ventana asociada con el pedido; puede ser null.
+
+ +

open()

+ +

Inicializa el pedido. Este método es para ser usado desde código JavaScript, para inicializar un pedido desde código nativo, debes usar openRequest().

+ +
Nota: Llamar a este método en un pedido activo (uno para el cual open() o openRequest() ya han sido llamados) es equivalente a usar abort().
+ +
void open(
+ in AUTF8String method,
+ in AUTF8String url,
+ [optional] in boolean async,
+ [optional] in AString user,
+ [optional] in AString password
+);
+
+ +
Parámetros
+ +
+
method
+
El método HTTP a usar: tanto "POST" o "GET". Se ignora para urls que no son de HTTP.
+
url
+
La URL a la que se envía el pedido.
+
async
+
Un parámetro booleano opcional, predeterminado es true, que indica si se debe o no realizar la operación de forma asíncrona. Si este valor es false, el método send() no se devuelve hasta que se reciba la respuesta completa. Si es true, la notificación de una transacción completada se proporciona mediante los oyentes de eventos. Esto debe ser true si el atributo multipart es verdadero o se lanzará una excepción.
+
user
+
El nombre de usuario es opcional solo es usado con fines de autenticación, de forma predeterminada es una cadena vacía.
+
password
+
La contraseña es opcional solo es usado con fines de autenticación, de forma predeterminada es una cadena vacía.
+
+ +

openRequest()

+ +

Inicia la peticion, este metodo est

+ +

Inicializa la peticion. Este método se utiliza desde el código nativo, para inicializar una solicitud desde el código JavaScript, utilice open () en su lugar.

+ +
Nota: Calling this method an already active request (one for which open()or openRequest()has already been called) is the equivalent of calling abort().
+ +
void open(
+ in AUTF8String method,
+ in AUTF8String url,
+ in boolean async,
+ in AString user,
+ in AString password
+);
+
+ +
Parameters
+ +
+
method
+
The HTTPmethod to use; either "POST"or "GET". Ignored for non-HTTPURLs.
+
url
+
The URLto which to send the request.
+
async
+
An optional boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send()method does not return until the response is received. If true, notification of a completed transaction is provided using event listeners. This must be true if the multipart attribute is true, or an exception will be thrown.
+
user
+
The optional user name to use for authentication purposes; by default, this is an empty string.
+
password
+
The optional password to use for authentication purposes; by default, this is an empty string.
+
+ +

overrideMimeType()

+ +

Overrides the MIMEtype returned by the server.

+ +
Note: This method must be called before send().
+ +
void overrideMimeType(
+ in AUTF8String mimetype
+);
+
+ +
Parameters
+ +
+
mimetype
+
The type that should be used instead of the one returned by the server, if any.
+
+ +

send()

+ +

Sends the request. If the request is asynchronous (which is the default), this method returns as soon as the request is sent. If the request is synchronous, this method doesn't return until the response has arrived.

+ +
Note: Any event listeners you wish to set must be set before calling send().
+ +
void send(
+ [optional] in nsIVariant body
+);
+
+ +
Parameters
+ +
+
body
+
This may be an nsIDocument, nsIInputStream, or a string (an nsISupportsString if called from native code) that is used to populate the body of a POST request. Starting with Gecko 1.9.2, you may also specify an DOM{{ domxref("File") }} , and starting with Gecko 2.0 {{ geckoRelease("2.0") }} you may also specify a FormData object.
+
+ +
Notes
+ +

If the body is an nsIDOMDocument, it is serialized before being sent.

+ +

If it's an nsIInputStream, it must be compatible with nsIUploadChannel's setUploadStream()method. In that case, a Content-Length header is added to the request, with its value obtained using nsIInputStream's available()method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the setRequestHeader()method prior to calling send().

+ +

sendAsBinary()

+ +

A variant of the send()method that sends binary data.

+ +
void sendAsBinary(
+ in DOMString body
+);
+
+ +
Parameters
+ +
+
body
+
The request body as a DOMstring. This data is converted to a string of single-byte characters by truncation (removing the high-order byte of each character).
+
+ +

setRequestHeader()

+ +

Sets the value of an HTTPrequest header.

+ +
Note: You must call open()before using this method.
+ +
void setRequestHeader(
+ in AUTF8String header,
+ in AUTF8String value
+);
+
+ +
Parameters
+ +
+
header
+
The name of the header whose value is to be set.
+
value
+
The value to set as the body of the header.
+
+ +

Implementation notes

+ +

XMLHttpRequest is implemented in Gecko using the {{ interface("nsIJSXMLHttpRequest") }} and {{ interface("nsIXMLHttpRequest") }} interfaces.

+ +

See also

+ + + +

{{ languages( { "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "pl": "pl/XMLHttpRequest", "zh-cn": "cn/XMLHttpRequest" } ) }}

diff --git a/files/es/web/api/xmlhttprequest/onreadystatechange/index.html b/files/es/web/api/xmlhttprequest/onreadystatechange/index.html new file mode 100644 index 0000000000..7f35ad3e88 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/onreadystatechange/index.html @@ -0,0 +1,109 @@ +--- +title: XMLHttpRequest.onreadystatechange +slug: Web/API/XMLHttpRequest/onreadystatechange +translation_of: Web/API/XMLHttpRequest/onreadystatechange +--- +
{{APIRef}}
+ +

Un EventHandler que es invocado cada vez que cambia el atributo readyState. La retrollamada (callback) es invocada desde el hilo (thread) perteneciente a la interfaz de usuario. La propiedad XMLHttpRequest.onreadystatechange contiene el manejador del evento que es invocado cuando se dispara el evento {{event("readystatechange")}}, lo cual sucede cada vez que cambia el valor de la propiedad {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}}. La retrollamada (callback) es invocada desde el hilo perteneciente a la interfaz de usuario.

+ +
+

Aviso: No debería ser usado con peticiones síncronas ni tampoco en código nativo.

+
+ +

El evento readystatechange no se disparará cuando una petición XMLHttpRequest sea cancelada mediante el método abort().

+ +

Sintaxis

+ +
XMLHttpRequest.onreadystatechange = callback;
+ +

Valores

+ + + +

Ejemplo

+ +
var xhr = new XMLHttpRequest(),
+    method = "GET",
+    url = "https://developer.mozilla.org/";
+
+xhr.open(method, url, true);
+xhr.onreadystatechange = function () {
+        if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+            console.log(xhr.responseText);
+        }
+    };
+xhr.send();
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onreadystatechange')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilidad con navegadores Web

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(1)}}{{CompatGeckoDesktop(1.0)}}{{CompatIe(7)}}[1]{{CompatVersionUnknown}}{{CompatSafari(1.2)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}1.0{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Las versiones 5 y 6 admiten llamadas AJAX usando ActiveXObject().

diff --git a/files/es/web/api/xmlhttprequest/responsetext/index.html b/files/es/web/api/xmlhttprequest/responsetext/index.html new file mode 100644 index 0000000000..d119565243 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/responsetext/index.html @@ -0,0 +1,104 @@ +--- +title: XMLHttpRequest.responseText +slug: Web/API/XMLHttpRequest/responseText +translation_of: Web/API/XMLHttpRequest/responseText +--- +
{{draft}}
+ +
{{APIRef('XMLHttpRequest')}}
+ +

La propiedad XMLHttpRequest.responseText  devuelve un DOMString que contiene la  respuesta a la consulta como un texto o null si la consulta  no tuvo exito o  aun no ha sido completada. la propiedad responseText  tendra una respuesta parcial como retorno aunque la consulta no haya sido  completada. si responseType contiene algo que no sea un string vacio o un "text", el acceso a responseText sera throw InvalidStateError exception.

+ +

Ejemplo. Lanza  una excepción InvalidStateError

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+// If specified, responseType must be empty string or "text"
+xhr.responseType = 'text';
+
+xhr.onload = function () {
+    if (xhr.readyState === xhr.DONE) {
+        if (xhr.status === 200) {
+            console.log(xhr.response);
+            console.log(xhr.responseText);
+        }
+    }
+};
+
+xhr.send(null);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesestadoComentarios
{{SpecName('XMLHttpRequest', '#the-responsetext-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Anteriores a  IE 10, El valo de  XMLHttpRequest.responseText debe ser leido una vez que la consulta fuera completada.

diff --git a/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html new file mode 100644 index 0000000000..28675abd79 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html @@ -0,0 +1,232 @@ +--- +title: Solicitudes síncronas y asíncronas +slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests +--- +

XMLHttpRequest soporta solicitudes síncronas y asíncronas, pero la mas preferida es la asíncrona por razones de rendimiento

+ +

Las solicitudes síncronas bloquean la ejecución del código, mientras se procesa la solicitud, dejando a la pantalla congelada y dando una experiencia de usuario poco agradable

+ +

Peticiones asíncronas

+ +

Si se utiliza XMLHttpRequest de forma asíncrona, recibirá una devolución de llamada cuando los datos se hayan recibido . Esto permite que el navegador continúe funcionando de forma normal mientras se procesa la solicitud.

+ +

Ejemplo: Enviar un archivo a la consola

+ +

Este es el uso más simple de la asíncronia XMLHttpRequest.

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "/bar/foo.txt", true);
+xhr.onload = function (e) {
+  if (xhr.readyState === 4) {
+    if (xhr.status === 200) {
+      console.log(xhr.responseText);
+    } else {
+      console.error(xhr.statusText);
+    }
+  }
+};
+xhr.onerror = function (e) {
+  console.error(xhr.statusText);
+};
+xhr.send(null);
+ +

En la linea 2, el ultimo parametro de open() , especifica true para indicar que la solicitud se tratara de forma asíncrona

+ +

Line 3 creates an event handler function object and assigns it to the request's onload attribute.  This handler looks at the request's readyState to see if the transaction is complete in line 4, and if it is, and the HTTP status is 200, dumps the received content.  If an error occurred, an error message is displayed.

+ +

Line 15 actually initiates the request.  The callback routine is called whenever the state of the request changes.

+ +

Ejemplo: Creando una funcion estandar para leer archivos externos.

+ +

In some cases you must read many external files. This is a standard function which uses the XMLHttpRequest object asynchronously in order to switch the content of the read file to a specified listener.

+ +
function xhrSuccess () { this.callback.apply(this, this.arguments); }
+
+function xhrError () { console.error(this.statusText); }
+
+function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oReq = new XMLHttpRequest();
+  oReq.callback = fCallback;
+  oReq.arguments = Array.prototype.slice.call(arguments, 2);
+  oReq.onload = xhrSuccess;
+  oReq.onerror = xhrError;
+  oReq.open("get", sURL, true);
+  oReq.send(null);
+}
+
+ +

Usage:

+ +
function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", showMessage, "New message!\n\n");
+
+ +

The signature of the utility function loadFile declares (i) a target URL to read (via HTTP GET), (ii) a function to execute on successful completion of the XHR operation, and (iii) an arbitrary list of additional arguments that are "passed through" the XHR object to the success callback function.

+ +

Line 1 declares a function invoked when the XHR operation completes successfully.  It, in turn, invokes the callback function specified in the invocation of the loadFile function (in this case, the function showMessage) which has been assigned to a property of the XHR object (Line 7). The additional arguments (if any) supplied to the invocation of function loadFile are "applied" to the running of the callback function.

+ +

Line 3 declares a function invoked when the XHR operation fails to complete successfully.

+ +

Line 7 stores on the XHR object the success callback function given as the second argument to loadFile.

+ +

Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.

+ +

Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes.  

+ +

Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.

+ +

Line 11 specifies true for its third parameter to indicate that the request should be handled asynchronously.

+ +

Line 12 actually initiates the request.

+ +

Example: using a timeout

+ +

You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the timeout property on the XMLHttpRequest object, as shown in the code below:

+ +
function loadFile(sUrl, timeout, callback){
+
+    var args = arguments.slice(3);
+    var xhr = new XMLHttpRequest();
+    xhr.ontimeout = function () {
+        console.error("The request for " + url + " timed out.");
+    };
+    xhr.onload = function() {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                callback.apply(xhr, args);
+            } else {
+                console.error(xhr.statusText);
+            }
+        }
+    };
+    xhr.open("GET", url, true);
+    xhr.timeout = timeout;
+    xhr.send(null);
+}
+ +

Notice the addition of code to handle the "timeout" event by setting the ontimeout handler.

+ +

Usage:

+ +
function showMessage (sMsg) {
+  alert(sMsg + this.responseText);
+}
+
+loadFile("message.txt", 2000, showMessage, "New message!\n");
+
+ +

Here, we're specifying a timeout of 2000 ms.

+ +
+

Note: Support for timeout was added in {{Gecko("12.0")}}.

+
+ +

Synchronous request

+ +
Note: Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.
+ +

In rare cases, the use of a synchronous method is preferable to an asynchronous one.

+ +

Example: HTTP synchronous request

+ +

This example demonstrates how to make a simple synchronous request.

+ +
var request = new XMLHttpRequest();
+request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
+request.send(null);
+
+if (request.status === 200) {
+  console.log(request.responseText);
+}
+
+ +

Line 3 sends the request.  The null parameter indicates that no body content is needed for the GET request.

+ +

Line 5 checks the status code after the transaction is completed.  If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.

+ +

Example: Synchronous HTTP request from a Worker

+ +

One of the few cases in which a synchronous request does not usually block execution is the use of XMLHttpRequest within a Worker.

+ +

example.html (the main page):

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+  var worker = new Worker("myTask.js");
+  worker.onmessage = function(event) {
+    alert("Worker said: " + event.data);
+  };
+
+  worker.postMessage("Hello");
+</script>
+</head>
+<body></body>
+</html>
+
+ +

myFile.txt (the target of the synchronous XMLHttpRequest invocation):

+ +
Hello World!!
+
+ +

myTask.js (the Worker):

+ +
self.onmessage = function (event) {
+  if (event.data === "Hello") {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "myFile.txt", false);  // synchronous request
+    xhr.send(null);
+    self.postMessage(xhr.responseText);
+  }
+};
+
+ +
Note: The effect, because of the use of the Worker, is however asynchronous.
+ +

It could be useful in order to interact in background with the server or to preload some content. See Using web workers for examples and details.

+ +

Adapting Sync XHR usecases to the Beacon API

+ +

There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the window.onunload and window.onbeforeunload events.  The navigator.sendBeacon API can support these usecases typically while delivering a good UX.

+ +

The following example (from the sendBeacon docs) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // third parameter indicates sync xhr. :(
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

Using the sendBeacon() method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.

+ +

The following example shows a theoretical analytics code pattern that submits data to a server using the by using the sendBeacon() method.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

See also

+ + + +

{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}

diff --git a/files/es/web/api/xmlhttprequest/timeout/index.html b/files/es/web/api/xmlhttprequest/timeout/index.html new file mode 100644 index 0000000000..a9fec94792 --- /dev/null +++ b/files/es/web/api/xmlhttprequest/timeout/index.html @@ -0,0 +1,67 @@ +--- +title: XMLHttpRequest.timeout +slug: Web/API/XMLHttpRequest/timeout +tags: + - AJAX + - Propiedad + - Referencia + - XHR + - XHR asincrónico + - XMLHttpRequest + - XMLHttpRequest asincrónico + - tiempo de espera + - timeout +translation_of: Web/API/XMLHttpRequest/timeout +--- +
{{APIRef('XMLHttpRequest')}}
+ +

La propiedad XMLHttpRequest.timeout es un unsigned long que representa el número de milisegundos que puede tomar una solicitud antes de que se finalice automáticamente. El valor por defecto es 0, lo que significa que no hay tiempo de espera (timeout). Timeout no debe utilizarse para solicitudes XMLHttpRequests sincrónicas usadas en un {{Glossary('document environment')}}, pues generará una excepción InvalidAccessError. Cuando ocurre un tiempo de espera, se dispara un evento timeout. {{gecko_minversion_inline("12.0")}}

+ +
+
+
Nota: No puede usar un timeout para solicitudes sincrónicas con una ventana propietaria (owning window).
+
+
Uso de timeout con una solicitud asincrónica
+
+ +

En Internet Explorer, la propiedad timeout se puede establecer solo después de llamar al método open() y antes de llamar al método send().

+ +

Ejemplo

+ +
var xhr = new XMLHttpRequest();
+xhr.open('GET', '/server', true);
+
+xhr.timeout = 2000; // tiempo en milisegundos
+
+xhr.onload = function () {
+  // Solicitud finalizada. Haz el procesamiento aquí.
+};
+
+xhr.ontimeout = function (e) {
+  // Tiempo de espera del XMLHttpRequest agotado. Haz algo aquí.
+};
+
+xhr.send(null);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest', '#the-timeout-attribute')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.XMLHttpRequest.timeout")}}

diff --git a/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..c3d2b48e7f --- /dev/null +++ b/files/es/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,447 @@ +--- +title: Using XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +

{{APIRef("XMLHttpRequest")}}

+ +

En esta guía le echaremos un vistazo a cómo usar {{domxref("XMLHttpRequest")}} para enviar solicitudes HTTP con el objetivo de intercambiar datos entre el sitio web y el servidor. Se incluyen ejemplos, tanto para los casos de uso comunes de XMLHttpRequest, como para los más inusuales.

+ +

Para enviar una solicitud HTTP, cree un objeto XMLHttpRequest, abra una URL y envíe la solicitud. Una vez que la transacción haya sido completada, el objeto contendrá información útil tal como el cuerpo de la respuesta y el estado HTTP del resultado.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Solicitudes Síncronas y Asíncronas

+ +

XMLHttpRequest soporta tanto comunicaciones síncronas como asíncronas.

+ +
Nota: No deberias usar XMLHttpRequests síncronas porque, dada la naturaleza inherentemente asíncrona del intercambio de datos en las redes, hay multiples formas en que la memoria y eventos se puedan perder usando solicitudes síncronas.
+ +

En versiones de Firefox anteriores a Firefox 3, (solicitudes) XMLHttpRequest síncronas bloqueaban la interfaz de usuario.  Con tal de permitirle al usuario terminar solicitudes congeladas, Firefox 3 ya no lo hace.

+ +

Ejemplo: Solicitud síncrona

+ +

Este ejemplo demuestra como hacer una solicitud síncrona.

+ +
var req = new XMLHttpRequest();
+req.open('GET', 'http://www.mozilla.org/', false);
+req.send(null);
+if (req.status == 200)
+  dump(req.responseText);
+ +

En la línea 1 se instancia un objeto XMLHttpRequest.  Después en la línea 2 se abre una nueva solicitud, especificando que una solicitud GET se utilizará para extraer la pagina de inicio de Mozilla.org, y que la operación no debe ser asíncrona.

+ +

En la línea 3 se envía la solicitud.  El parámetro null indica que la solicitud GET no necesita contenido en el cuerpo.

+ +

En la línea 4 se verifica el código de estatus después de que la transacción se completa.  Si el resultado es 200 -- El código HTTP para resultado "OK"-- el contenido de texto del documento se escribe en la consola.

+ +

Ejemplo: Solicitudes síncronas no-HTTP

+ +

A pesar de su nombre, XMLHttpRequest se puede usar para hacer solicitudes que no sean de HTTP.  Este ejemplo muestra como usarlo para extraer un archivo del sistemas de archivos local.

+ +
var req = new XMLHttpRequest();
+req.open('GET', 'file:///home/user/file.json', false);
+req.send(null);
+if(req.status == 0)
+  dump(req.responseText);
+ +

La clave aqui es notar que el estado del resultado se compara con 0 en lugar de 200.  Esto es porque los esquemas file y ftp no usan los codigos de resultado de HTTP.

+ +

Ejemplo: Solicitudes asíncronas

+ +

Si usas XMLHttpRequest desde una extensión, deberias usarla asíncronamente.  En este caso, recibiras una llamada de regreso cuando se hallan recibido los datos, lo cual permite al navegador continuar trabajando con normalidad mientras se maneja tu solicitud.

+ +
var req = new XMLHttpRequest();
+req.open('GET', 'http://www.mozilla.org/', true);
+req.onreadystatechange = function (aEvt) {
+  if (req.readyState == 4) {
+     if(req.status == 200)
+      dump(req.responseText);
+     else
+      dump("Error loading page\n");
+  }
+};
+req.send(null);
+ +

La linea 2 especifica true en su tercer parametro indicando que la solicitud debe manejarse asíncronamente.

+ +

Line 3 crea un objeto función para manejar eventos y lo asigna al atributo de la solicitud onreadystatechange.  Este manejador observa el readyState de la solicitud verificando si la transacción se ha completado en la linea 4, si así es, y el estatus HTTP es 200, imprime el contenido recibido.  Si ocurrió un error, se muestra un mensaje de error.

+ +

La linea 11 de hecho inicia la solicitud.  La función onreadystatechange es llamada siempre que el estado de una solicitud cambia.

+ +

Analizando y Manipulando el Texto de Respuesta HTML

+ +

Si usas XMLHttpRequest para obtener el contenido de una página HTML remota, el responseText (texto de la respuesta) sera una cadena que contenga una "sopa" de etiquetas HTML, lo que puede ser dificil de analizar y manipular. Existen tres maneras principales de analizar estas cadenas HTML

+ +
    +
  1. Analizar con nsIScriptableUnescapeHTML repidamente convertira la cadena HTML en DOM, al mismo tiempo que tira javascript y otros elementos avanzados, incluyendo la etiqueta <head> de la página.
    2. +
  2. RegExp se puede usar si de antemano conoces el HTML que vendra en el responseText. Quizas quieras remover los saltos de linea, si usas RegExp para escanear considerandolos. Sin embargo, este metodo es un "ultimo recurso" ya que si el HTML cambia ligeramente, posiblemente fallara.
    3. +
  3. Usar un hidden chrome o un content-level iframe para cargar toda la pagina también se puede hacer para manipularla luego como DOM, sin embargo existen riesgos de seguridad al dar a código remoto este nivel de acceso privilegiado, que puede causar problemas en la revisión de tu addon. Por ejemplo, si una pagina ejecuta el comando común "document.location = redirecttothispage.html" para cargar, esto se interpretara como cambiar la locación del navegador (document.location en una extensión) en contraposición a la locación de una página web (content.document.location en una extensión), y en consecuecia destruir todos los componentes del navegador. Alternativamente, y de algun modo mas seguro, una cadena responseText adquirida mediante XMLHttpRequest se puede analizar con RegExp para remover problemas de javascript, luego cargada en un iframe oculto previamente  establecido:
    4. +
+ +
document.getElementById('hiddenXULiframe').contentWindow.document.body.innerHTML = req.responseText
+
+ +

Using FormData objects

+ +

{{ gecko_minversion_header("2") }}

+ +

The FormData object lets you compile a set of key/value pairs to send using XMLHttpRequest. It's primarily intended for use in sending form data, but can be used independently from forms in order to transmit keyed data. The transmitted data is in the same format that the form's submit() method would use to send the data if the form's encoding type were set to "multipart/form-data".

+ +

Creating a FormData object from scratch

+ +

You can build a FormData object yourself, instantiating it then appending fields to it by calling its append() method, like this:

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456);
+formData.append("afile", fileInputElement.files[0]);
+
+var xhr = new XMLHttpRequest();
+xhr.open("POST", "http://foo.com/submitform.php");
+xhr.send(formData);
+
+ +

This example builds a FormData object containing values for fields named "username" and "accountnum", then uses the XMLHttpRequest method send() to send the form's data.

+ +

Retrieving a FormData object from an HTML form

+ +

To construct a FormData object that contains the data from an existing {{ HTMLElement("form") }}, specify that form element when creating the FormData object:

+ +
newFormData = new FormData(someFormElement);
+
+ +

For example:

+ +
var formElement = document.getElementById("myFormElement");
+var xhr = new XMLHttpRequest();
+xhr.open("POST", "submitform.php");
+xhr.send(new FormData(formElement));
+
+ +

You can also add data to the FormData object between retrieving it from a form and sending it, like this:

+ +
var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+xhr.send(formData);
+
+ +

This lets you augment the form's data before sending it along, to include additional information that's not necessarily user editable on the form.

+ +

Sending files using a FormData object

+ +

You can also send files using FormData. Simply include an {{ HTMLElement("input") }} element of type "file":

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"><br />
+  <label>Custom file ID:</label>
+  <input type="text" name="fileid" size="12" maxlength="32"><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required>
+</form>
+<div id="output"></div>
+<a href="javascript:sendForm()">Stash the file!</a>
+
+ +

Then you can send it using code like the following:

+ +
function sendForm() {
+  var output = document.getElementById("output");
+  var data = new FormData(document.getElementById("fileinfo"));
+
+  data.append("CustomField", "This is some extra data");
+
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "stash.pl", false)
+  xhr.send(data);
+  if (xhr.status == 200) {
+    output.innerHTML += "Uploaded!<br />";
+  } else {
+    output.innerHTML += "Error " + xhr.status + " occurred uploading your file.<br />";
+  }
+}
+
+ +

Note that this example is directing the output to a Perl CGI script running on the server, and handles HTTP errors, although not prettily.

+ +

Handling binary data

+ +

Although XMLHttpRequest is most commonly used to send and receive textual data, it can be used to send and receive binary content.

+ +

Receiving binary data

+ +

The load_binary_resource() function shown below loads binary data from the specified URL, returning it to the caller.

+ +
function load_binary_resource(url) {
+  var req = new XMLHttpRequest();
+  req.open('GET', url, false);
+  //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
+  req.overrideMimeType('text/plain; charset=x-user-defined');
+  req.send(null);
+  if (req.status != 200) return '';
+  return req.responseText;
+}
+
+ +

The magic happens in line 5, which overrides the MIME type, forcing Firefox to treat it as plain text, using a user-defined character set.  This tells Firefox not to parse it, and to let the bytes pass through unprocessed.

+ +
var filestream = load_binary_resource(url);
+var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
+ +

The example above fetches the byte at offset x within the loaded binary data.  The valid range for x is from 0 to filestream.length-1.

+ +

See downloading binary streams with XMLHttpRequest for a detailed explanation. See also downloading files.

+ +

Receiving binary data using JavaScript typed arrays

+ +

{{ gecko_minversion_header("2.0") }}

+ +

Gecko 2.0 {{ geckoRelease("2.0") }} adds a Gecko-specific mozResponseArrayBuffer property to the XMLHttpRequest object, which contains a JavaScript typed array representing the raw binary contents of the response from the server. This lets you read the binary data without taking any special steps.

+ +
var xhr = new XMLHttpRequest();
+xhr.open("GET", "binary_file", false);
+xhr.send(null);
+
+buffer = xhr.mozResponseArrayBuffer;
+if (buffer) {
+  var byteArray = new UInt8Array(buffer);
+  for (var i=0; i<byteArray.byteLength; i++) {
+    // do something with each byte in the array
+  }
+}
+
+ +

This example reads a binary file and interprets it as 8-bit unsigned integers.

+ +

Sending binary data

+ +

This example transmits binary content asynchronously, using the POST method.

+ +
var req = new XMLHttpRequest();
+req.open("POST", url, true);
+// set headers and mime-type appropriately
+req.setRequestHeader("Content-Length", 741);
+req.sendAsBinary(aBody);
+ +

Line 4 sets the Content-Length header to 741, indicating that the data is 741 bytes long.  Obviously you need to change this value based on the actual size of the data being sent.

+ +

Line 5 uses the sendAsBinary() method to initiate the request.

+ +

You can also send binary content by passing an instance of the {{ interface("nsIFileInputStream") }} to send().  In that case, you don't have to set the Content-Length header yourself, as the information is fetched from the stream automatically:

+ +
// Make a stream from a file.
+var stream = Components.classes["@mozilla.org/network/file-input-stream;1"]
+                       .createInstance(Components.interfaces.nsIFileInputStream);
+stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance
+
+// Try to determine the MIME type of the file
+var mimeType = "text/plain";
+try {
+  var mimeService = Components.classes["@mozilla.org/mime;1"]
+          .getService(Components.interfaces.nsIMIMEService);
+  mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance
+}
+catch(e) { /* eat it; just use text/plain */ }
+
+// Send
+var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.open('PUT', url, false); /* synchronous! */
+req.setRequestHeader('Content-Type', mimeType);
+req.send(stream);
+
+ +

Monitoring progress

+ +

XMLHttpRequest provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.

+ +

In Firefox 3.5 and later

+ +

Firefox 3.5 adds support for DOM progress event monitoring of XMLHttpRequest transfers; this follows the Web API specification for progress events.

+ +
var req = new XMLHttpRequest();
+
+req.addEventListener("progress", updateProgress, false);
+req.addEventListener("load", transferComplete, false);
+req.addEventListener("error", transferFailed, false);
+req.addEventListener("abort", transferCanceled, false);
+
+req.open();
+
+...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress(evt) {
+  if (evt.lengthComputable) {
+    var percentComplete = evt.loaded / evt.total;
+    ...
+  } else {
+    // Unable to compute progress information since the total size is unknown
+  }
+}
+
+function transferComplete(evt) {
+  alert("The transfer is complete.");
+}
+
+function transferFailed(evt) {
+  alert("An error occurred while transferring the file.");
+}
+
+function transferCanceled(evt) {
+  alert("The transfer has been canceled by the user.");
+}
+
+ +

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.  See {{ interface("nsIDOMProgressEvent") }} and {{ interface("nsIXMLHttpRequestEventTarget") }} for details on these events.

+ +
Note: You need to add the event listeners before calling open() on the request.  Otherwise the progress events will not fire.
+ +

The progress event handler, specified by the updateProgress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields.  However, if the lengthComputable field is false, the total length is not known and will be zero.

+ +

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

+ +
var req = new XMLHttpRequest();
+
+req.upload.addEventListener("progress", updateProgress, false);
+req.upload.addEventListener("load", transferComplete, false);
+req.upload.addEventListener("error", transferFailed, false);
+req.upload.addEventListener("abort", transferCanceled, false);
+
+req.open();
+ +
Note: Progress events are not available for the file: protocol.
+ +

In Firefox 3 and earlier

+ +

If, for example, you wish to provide progress information to the user while the document is being received, you can use code like this:

+ +
function onProgress(e) {
+  var percentComplete = (e.position / e.totalSize)*100;
+  // ...
+}
+
+function onError(e) {
+  alert("Error " + e.target.status + " occurred while receiving the document.");
+}
+
+function onLoad(e) {
+  // ...
+}
+// ...
+var req = new XMLHttpRequest();
+req.onprogress = onProgress; // or req.addEventListener("progress", onProgress, false);
+req.open("GET", url, true);
+req.onload = onLoad; // or req.addEventListener("load", onLoad, false);
+req.onerror = onError; // or req.addEventListener("error", onError, false);
+req.send(null);
+
+ +

The onprogress event's attributes, position and totalSize, indicate the current number of bytes received and the total number of bytes expected, respectively.

+ +

All of these events have their target attribute set to the XMLHttpRequest they correspond to.

+ +
Note: Firefox 3 properly ensures that the values of the target, currentTarget, and this fields of the event object are set to reference the correct objects when calling event handlers for XML documents represented by XMLDocument. See {{ Bug(198595) }} for details.
+ +

Cross-site XMLHttpRequest

+ +
+

Este artículo cubre características introducidas en Firefox 3.5.

+
+ +

Firefox 3.5 supports cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Bypassing the cache

+ +

Normally, XMLHttpRequest tries to retrieve content from the cache, if it's available.  To bypass this, do the following:

+ +
var req = new XMLHttpRequest();
+req.open('GET', url, false);
+req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;
+req.send(null);
+ +
Note: This approach will only work in Gecko-based software, as the channel attribute is Gecko-specific.
+ +

An alternate, cross-browser compatible approach is to append a timestamp to the URL, being sure to include a "?" or "&" as appropriate.  For example:

+ +
http://foo.com/bar.html
+ +

becomes

+ +
http://foo.com/bar.html?12345
+ +

and

+ +
http://foo.com/bar.html?foobar=baz
+ +

becomes

+ +
http://foo.com/bar.html?foobar=baz&12345
+ +

Since the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var req = new XMLHttpRequest();
+req.open("GET", url += (url.match(/\?/) == null ? "?" : "&") + (new Date()).getTime(), false);
+req.send(null); 
+ +

Security

+ +

{{ fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy..XMLHttpRequest.open to allAccess to give specific sites cross-site access.  This is no longer supported.") }}

+ +

Downloading JSON and JavaScript from extensions

+ +

For security reasons, extensions should never use eval() to parse JSON or JavaScript code downloaded from the web.  See Downloading JSON and JavaScript in extensions for details.

+ +

Using XMLHttpRequest from JavaScript modules / XPCOM components

+ +

Instantiating XMLHttpRequest from a JavaScript module or an XPCOM component works a little differently; it can't be instantiated using the XMLHttpRequest() constructor. The constructor is not defined inside components and the code results in an error. You'll need to create and use it using a different syntax.

+ +

Instead of this:

+ +
var req = new XMLHttpRequest();
+req.onprogress = onProgress;
+req.onload = onLoad;
+req.onerror = onError;
+req.open("GET", url, true);
+req.send(null);
+
+ +

Do this:

+ +
var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"]
+                    .createInstance(Components.interfaces.nsIXMLHttpRequest);
+req.onprogress = onProgress;
+req.onload = onLoad;
+req.onerror = onError;
+req.open("GET", url, true);
+req.send(null);
+
+ +

For C++ code you would need to QueryInterface the component to an nsIEventTarget in order to add event listeners, but chances are in C++ using a channel directly would be better.

+ +

See also

+ +
    +
  1. MDC AJAX introduction
    2. +
  2. HTTP access control
    3. +
  3. How to check the security state of an XMLHTTPRequest over SSL
    4. +
  4. XMLHttpRequest - REST and the Rich User Experience
    5. +
  5. Microsoft documentation
    6. +
  6. Apple developers' reference
    7. +
  7. "Using the XMLHttpRequest Object" (jibbering.com)
    8. +
  8. The XMLHttpRequest Object: W3C Working Draft
    9. +
  9. Web Progress Events specification
    10. +
  10. Reading Ogg files with JavaScript (Chris Double)
    11. +
diff --git a/files/es/web/api/xmlhttprequesteventtarget/index.html b/files/es/web/api/xmlhttprequesteventtarget/index.html new file mode 100644 index 0000000000..f53063d82b --- /dev/null +++ b/files/es/web/api/xmlhttprequesteventtarget/index.html @@ -0,0 +1,68 @@ +--- +title: XMLHttpRequestEventTarget +slug: Web/API/XMLHttpRequestEventTarget +tags: + - AJAX + - API + - NeedsBrowserCompatibility + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub + - XMLHttpRequest +translation_of: Web/API/XMLHttpRequestEventTarget +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequestEventTarget is the interface that describes the event handlers you can implement in an object that will handle events for an {{ domxref("XMLHttpRequest") }}.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +
+
{{ domxref("XMLHttpRequestEventTarget.onabort") }}
+
Contains the function to call when a request is aborted and the {{event('abort')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.onerror") }}
+
Contains the function to call when a request encounters an error and the {{event('error')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.onload") }}
+
Contains the function to call when an HTTP request returns after successfully fetching content and the {{event('load')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.onloadstart") }}
+
Contains the function that gets called when the HTTP request first begins loading data and the {{event('loadstart')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.onprogress") }}
+
Contains the function that is called periodically with information about the progress of the request and the {{event('progress')}} event is received by this object.
+
{{ domxref("XMLHttpRequestEventTarget.ontimeout") }}
+
Contains the function that is called if the event times out and the {{event("timeout")}} event is received by this object; this only happens if a timeout has been previously established by setting the value of the XMLHttpRequest object's timeout attribute.
+
{{ domxref("XMLHttpRequestEventTarget.onloadend") }}
+
Contains the function that is called when the load is completed, even if the request failed, and the {{event('loadend')}} event is received by this object.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/es/web/api/xmlhttprequesteventtarget/onload/index.html b/files/es/web/api/xmlhttprequesteventtarget/onload/index.html new file mode 100644 index 0000000000..c6d6f78974 --- /dev/null +++ b/files/es/web/api/xmlhttprequesteventtarget/onload/index.html @@ -0,0 +1,55 @@ +--- +title: XMLHttpRequestEventTarget.onload +slug: Web/API/XMLHttpRequestEventTarget/onload +translation_of: Web/API/XMLHttpRequestEventTarget/onload +--- +
{{APIRef("XMLHttpRequest")}}
+ +

El evento XMLHttpRequestEventTarget.onload es la función que se llama cuando una transacción del {{domxref("XMLHttpRequest")}} es ejecutada correctamente.

+ +

Sintaxis

+ +
XMLHttpRequest.onload = callback;
+ +

 Valores

+ + + +

Ejemplo

+ +
var xmlhttp = new XMLHttpRequest(),
+  method = 'GET',
+  url = 'https://developer.mozilla.org/';
+
+xmlhttp.open(method, url, true);
+xmlhttp.onload = function () {
+  // Hacer algo con la información recivida ( found in xmlhttp.response )
+};
+xmlhttp.send();
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#handler-xhr-onload')}}{{Spec2('XMLHttpRequest')}}WHATWG living standard
+ +

Browser compatibility

+ + + +

{{Compat("api.XMLHttpRequestEventTarget.onload")}}

diff --git a/files/es/web/css/--_star_/index.html b/files/es/web/css/--_star_/index.html new file mode 100644 index 0000000000..06106e8c7d --- /dev/null +++ b/files/es/web/css/--_star_/index.html @@ -0,0 +1,106 @@ +--- +title: 'Propiedades personalizadas (--*): variables CSS' +slug: Web/CSS/--* +translation_of: Web/CSS/--* +--- +
{{CSSRef}}
+ +

Los nombres de las propiedades que tiene el prefijo --, como --ejemplo-nombre, representan las propiedades personalizadas que contienen un valor que puede ser usado en otras declaraciones usando la función {{cssxref("var")}}.

+ +

Las propiedades personalizadas tienen como alcance los elementos en los que se declaran y participan en la cascada: el valor de dicha propiedad personalizada es el de la declaración decidida por el algoritmo en cascada.

+ +

{{CSSInfo}}

+ +

Sintaxis

+ +
--somekeyword: left;
+--somecolor: #0000ff;
+--somecomplexvalue: 3px 6px rgb(20, 32, 54);
+
+ +
+
<declaración-valor>
+
Este valor coincide con cualquier secuencia de uno o más tokens, siempre que la secuencia no contenga un token no permitido.
+
+ +
+

Nota: Los nombres de las propiedades personalizadas distinguen entre mayúsculas y minúsculas — --mi-color se tratará como una propiedad personalizada separada de --Mi-color.

+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p id="firstParagraph">Este párrafo debe tener un fondo azul y un texto amarillo.</p>
+<p id="secondParagraph">Este párrafo debe tener un fondo amarillo y un texto azul.</p>
+<div id="container">
+  <p id="thirdParagraph">Este párrafo debe tener un fondo verde y un texto amarillo.</p>
+</div>
+ +

CSS

+ +
:root {
+  --first-color: #488cff;
+  --second-color: #ffff8c;
+}
+
+#firstParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+#secondParagraph {
+  background-color: var(--second-color);
+  color: var(--first-color);
+}
+
+#container {
+  --first-color: #48ff32;
+}
+
+#thirdParagraph {
+  background-color: var(--first-color);
+  color: var(--second-color);
+}
+
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 500, 130)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Variables", "#defining-variables", "--*")}}{{Spec2("CSS3 Variables")}}Initial definition.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.custom-property")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/-moz-binding/index.html b/files/es/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..0280bb44b8 --- /dev/null +++ b/files/es/web/css/-moz-binding/index.html @@ -0,0 +1,110 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - No estándar(2) + - Referencia CSS + - XBL +translation_of: Archive/Web/CSS/-moz-binding +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS -moz-binding CSS es usada por las aplicaciones basadas en Mozilla para adjuntar una asociación o enlace XBL a un elemento del DOM

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* <uri> value */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Global values */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+
+ +

Valores

+ +
+
<uri>
+
La URI del enlace XBL (incluyendo el identificador de fragmento).
+
none
+
No se aplica ninguna asociación o enlace XBL al elemento.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
.exampleone {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-border-bottom-colors/index.html b/files/es/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..75dea0131a --- /dev/null +++ b/files/es/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-bottom-colors")}} establece una lista de colores para el borde inferior.

+ +

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado

+ +

{{cssinfo}}

+ +

No se aplica

+ +
    +
  1. Si {{Cssxref("border-style")}} es dashed o dotted.
    2. +
  2. En tablas con border-collapse: collapse.
    3. +
+ +

Síntaxis

+ +
/* Valor de <color> único */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Valores de <color> múltiples */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores globales */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Valores

+ +

Acepta una lista de colores separados por espacios en blanco.

+ +
+
<color>
+
Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de {{cssxref("<color>")}} para ver las posibles unidades.
+
none
+
Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}
+
+ +

Síntaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div id="example">Ejemplo</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Especificaciones

+ +

Esta propiedad no forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-border-left-colors/index.html b/files/es/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..81eb29d51f --- /dev/null +++ b/files/es/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,144 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

En aplicaciones de Mozilla, como Firefox, la propiedad CSS {{cssxref("-moz-border-left-colors")}} aplica una lista de colores al borde derecho.

+ +

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado.

+ +

 

+ +

{{cssinfo}}

+ +

 

+ +

No se aplica

+ +
    +
  1. Si  {{Cssxref("border-style")}} es dashed o dotted.
    2. +
  2. A tablas con border-collapse: collapse.
    3. +
+ +

Síntaxis

+ +
/* Valor de <color> único */
+-moz-border-left-colors: #f0f0f0;
+
+/* Valor de <color> único */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores globales */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+
+ +

Valores

+ +

Acepta una lista de colores separados por espacios en blanco.

+ +
+
<color>
+
Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de {{cssxref("<color>")}} para ver las posibles unidades.
+
none
+
Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}.
+
+ +

 

+ +

Síntaxis Formal

+ +

 

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div id="example">Ejemplo</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Especificaciones

+ +

Esta propiedad no forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-border-right-colors/index.html b/files/es/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..5939baf82f --- /dev/null +++ b/files/es/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-right-colors")}} establece una lista de colores para el borde derecho.

+ +

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado

+ +

{{cssinfo}}

+ +

No se aplica

+ +
    +
  1. Si {{Cssxref("border-style")}} es dashed o dotted.
    2. +
  2. a tablas con border-collapse: collapse.
    3. +
+ +

Síntaxis

+ +
/* Valor de <color> único */
+-moz-border-right-colors: #f0f0f0;
+
+/* Valor de <color> múltiple */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores gloables */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+
+ +

Valores

+ +

Acepta una lista de colores separados por espacios en blanco.

+ +
+
<color>
+
Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de {{cssxref("<color>")}} para ver las posibles unidades.
+
none
+
Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div id="example">Ejemplo</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Especificaciones

+ +

Esta propiedad no forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-border-top-colors/index.html b/files/es/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..2db9dffac6 --- /dev/null +++ b/files/es/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,140 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

En la aplicaciones de Mozilla como Firefox la propiedad CSS {{cssxref("-moz-border-top-colors")}} establece una lista de colores para el borde inferior.

+ +

Cuando un elemento tiene un borde que es mayor de un único pixel CSS, cada línea de pixels usa el siguiente color especificado con esta propiedad, desde fuera hacia adentro. Esto elimina la necesidad de cajas anidadas. Si el borde es mayor que el número colores especificados, la parte restante del borde mantendrá el último color interno especificado

+ +

{{cssinfo}}

+ +

No se aplica

+ +
    +
  1. Si {{Cssxref("border-style")}} es dashed o dotted.
    2. +
  2. En tablas con border-collapse: collapse.
    3. +
+ +

 

+ +

Síntaxis

+ +

 

+ +
/* Valores de <color> único */
+-moz-border-top-colors: #f0f0f0;
+
+/* Valores de color <color> múltiple */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Valores gloables */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+
+ +

Valores

+ +

Acepta una lista de colores separados por espacios en blanco.

+ +
+
<color>
+
Especifica el color de una línea de pixels para el borde inferiror. transparent (transparente) es un color válido. Ver  valores de {{cssxref("<color>")}} para ver las posibles unidades.
+
none
+
Valor por defecto, si se establece no se muestra ningún color  ni se usa {{cssxref("border-color")}}
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div id="example">Ejemplo</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Example", 120, 90)}}

+ +

Especificaciones

+ +

Esta propiedad no forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-box-flex/index.html b/files/es/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..c7491aea2d --- /dev/null +++ b/files/es/web/css/-moz-box-flex/index.html @@ -0,0 +1,155 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles  'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).")}}
+ +

Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.

+ +

Resumen

+ +

Las propiedades CSS-moz-box-flex y -webkit-box-flex especifican cómo una  -moz-box o -webkit-box crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores <number> */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Valores gloables */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+
+ +

Valores

+ +
+
0
+
La caja no crece.
+
> 0
+
La caja crece para rellenar un proporción del espacio disponible..
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ejemplo de -moz-box-flex</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>Creceré para rellenar un espacio extra</p>
+      <p>No creceré</p>
+    </div>
+  </body>
+</html>
+
+ +

Notas

+ +

La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.

+ +

Los elementos dentro del contenedor que tienen 0 flex no crecen.

+ +

Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.

+ +

Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.

+ +

Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.

+ +

Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize de la caja contenedora a always. Este atributo no tiene correspondencia con ninguna propiedad CSS.

+ +

Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1).

+ +

Especificaciones

+ +

Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex , pero ese borrador nunca ha sido sustituido.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
característicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/es/web/css/-moz-box-ordinal-group/index.html b/files/es/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..7969d3e525 --- /dev/null +++ b/files/es/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - Caja Flexible + - No estandar + - Referencia CSS +translation_of: Web/CSS/box-ordinal-group +--- +

{{CSSRef}}
+ {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}

+ +

Ver Flexbox para más información sobre qué usar en sustitución de esta propiedad.

+ +

Resumen

+ +

Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.

+ +

Valores

+ +

Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.

+ +

Ejemplos

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/es/web/css/-moz-box-pack/index.html b/files/es/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..118d60287a --- /dev/null +++ b/files/es/web/css/-moz-box-pack/index.html @@ -0,0 +1,184 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
+ +

Ver Flexbox para más información.

+ +

Resumen

+ +

Las propiedades  CSS -moz-box-pack y -webkit-box-pack especifican cómo una -moz-box o un -webkit-box empaquetan o disponen  su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

+ +

La dirección del esquema o diseño (layout)  depende de la orientación del elemento: vertical o horizontal.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores de palabras clave */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Valores gloables */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+
+ +

Valores

+ +
+
start
+
La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
+
center
+
La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
+
end
+
La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
+
justify
+
El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera start.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
+     para el empaquetado en la caja */
+  height: 300px;
+  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
+     centrados horizontalmente */
+  width: 300px;
+
+  /* Los hijos deberían estar orientados verticalmente */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Alínea los hijos con el centro horizontal de la caja */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Dispone a los hijos en el fondo de la caja */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* hace los hijos más estrechos que el padra para que
+     haya espacio suficiente para el box-align */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p>
+  <p>Estaré en el fondo de div.example y centrado horizontalmente.</p>
+</div>
+
+ +

{{EmbedLiveSample('Examples', 310, 310)}}

+ +

Notas

+ +

EL borde  de la caja que será tomado como start  para el empqeutado dependerá de la orientación y dirección de la caja:

+ + + + + + + + + + + + + + + + + + + +
 NormalReverse
Horizontalleftright
Verticaltopbottom
+ +

El borde opuesto a start será el considerado como end.

+ +

Si el empaquetado se establece usando el atributo pack del elemento el estilo es ignorado.

+ +

Especificaciones

+ +

Esta propiedad es no estándar aunque una propiedad similar apareción en draft of CSS3 Flexbox,  que a su vez ha sido sustituida para nuevas versiones de la especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/es/web/css/-moz-cell/index.html b/files/es/web/css/-moz-cell/index.html new file mode 100644 index 0000000000..b1c5e8aa32 --- /dev/null +++ b/files/es/web/css/-moz-cell/index.html @@ -0,0 +1,10 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}{{obsolete_header}}
+ +

¡No uses este valor!Don't use this value! Usa el valor  {{cssxref("cursor#cell","cell")}} en su lugar.

diff --git a/files/es/web/css/-moz-context-properties/index.html b/files/es/web/css/-moz-context-properties/index.html new file mode 100644 index 0000000000..2a9f0d3137 --- /dev/null +++ b/files/es/web/css/-moz-context-properties/index.html @@ -0,0 +1,79 @@ +--- +title: '-moz-context-properties' +slug: Web/CSS/-moz-context-properties +translation_of: Web/CSS/-moz-context-properties +--- +
{{CSSRef}}{{Non-standard_header}} +
+

Note: Este recurso esta disponible desde Firefox 55, pero solamente es compatible con imagenes SVG cargadas via chrome:// o resource:// URLs. Para experimentar con la caracteristica SVG en la web, es necesario poner svg.context-properties.content.enabled en true.

+
+
+ +

Si mencionas una imagen SVG en una pagina web({{htmlelement("img")}} como elemento o como fondo de pagina), la imagen SVG puede coordinarse con el elemento incrustado(su contexto) para que la imagen adopte las propiedades puestas en el elemento incrustado. Para hacer esto, el elemento incrustado necesita listar las propiedades que deben estar disponibles para la imagen listadolas como valores de la propiedad-moz-context-properties, y la imagen necesita optar a usar esas propiedades utilizando valores tales como el valor de  context-fill.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Keyword values */
+-moz-context-properties: fill;
+-moz-context-properties: fill, stroke;
+
+/* Global values */
+-moz-context-properties: inherit;
+-moz-context-properties: initial;
+-moz-context-properties: unset;
+
+ +

Valores

+ +
+
fill
+
Expone el valor de fill determinado en la imagen del SVG.
+
stroke
+
Expone el valor de stroke determinado en la imagen del SVG..
+
fill-opacity
+
Expone el valor defill-opacity determinado en la imagen del SVG.
+
stroke-opacity
+
Expone el valor de stoke-opacity determinado en la imagen del SVG.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

En este ejemplo tenemos un SVG sencillo utilizando un elemento <img>.

+ +

Primero necesitas especificar en el elemento incrustado las propiedades cuyos valores quieres exponer al SVG, utilizando la propiedad -moz-context-properties. Por ejemplo:

+ +
.img1 {
+  width: 100px;
+  height: 100px;
+  -moz-context-properties: fill, stroke;
+  fill: lime;
+  stroke: purple;
+}
+ +

Ahora que has hecho eso la imagen SVG puede utlizar los valores de {{cssxref("fill")}} y {{cssxref("stroke")}} , por ejemplo:

+ +
<img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
+                       <rect width='100%' height='100%' stroke-width='30px'
+                       fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>">
+ +

Aqui hemos puesto que la imagen src sea una URL de datos que contiene una imagen SVG simple; el <rect>de dentro ha sido hecho para coger sus valores de fill y stroke de {{cssxref("fill")}} y {{cssxref("stroke")}} puestos en el elemento <img>poniendo  context-fill/context-stroke en sus valores asi como un color para rellenar(rojo) que sera utilizado en caso que el SVG es cargado independientemente en una ventana superior(donde no tendra contexto para dar los valores ). Tener en cuenta que si un colore es directamente puesto en el SVG, pero el color del contexto tambien es especificado, el color del contexto sobreescribe el color directo.

+ +
+

Note: Puedes en contrar un ejemplo de ejecucion en Github.

+
+ +

Especificaciones

+ +

Esta propiedad no esta definida en ningun estándar de CSS

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.-moz-context-properties")}}

diff --git a/files/es/web/css/-moz-float-edge/index.html b/files/es/web/css/-moz-float-edge/index.html new file mode 100644 index 0000000000..9454e77fc9 --- /dev/null +++ b/files/es/web/css/-moz-float-edge/index.html @@ -0,0 +1,78 @@ +--- +title: '-moz-float-edge' +slug: Web/CSS/-moz-float-edge +tags: + - CSS + - 'CSS: Extensión Mozilla' + - Diseño + - No estandar + - Propiedad CSS +translation_of: Web/CSS/-moz-float-edge +--- +
   {{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS no estándar -moz-float-edge especifica si las propiedades  altura y anchura  del elemento incluyen el margen, el borde o el espesor del padding (relleno)

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Valores globales */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+
+ +

Valores

+ +
+
border-box
+
La altura y anchura incluyen el contenido, el padding (relleno) y el bordee, pero no el margin.
+
content-box
+
La altura y anchura incluyen el contenido, pero no el padding (relleno),borde ni el margen.
+
margin-box
+
La altura y anchura incluyen el contenido, el padding (relleno), el borde y el margen.
+
padding-box
+
La altura y anchura incluyen el contenido, y el padding (relleno), pero no el borde ni el margen.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

 

+ +

Ejemplo

+ +

Contenido HTML

+ +
<div class="box"> 
+   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+</div>
+ +

Contenido CSS

+ +
.box {
+    display: block;
+    height: 5px;
+    margin: 0.5em auto 0.5em auto;
+    color: gray;
+    -moz-float-edge: margin-box;
+    box-sizing: border-box;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-float-edge') }}

+ +

Ver además

+ +

{{bug(432891)}}

diff --git a/files/es/web/css/-moz-font-language-override/index.html b/files/es/web/css/-moz-font-language-override/index.html new file mode 100644 index 0000000000..5d035a4cd3 --- /dev/null +++ b/files/es/web/css/-moz-font-language-override/index.html @@ -0,0 +1,6 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/es/web/css/-moz-force-broken-image-icon/index.html b/files/es/web/css/-moz-force-broken-image-icon/index.html new file mode 100644 index 0000000000..67f407e77b --- /dev/null +++ b/files/es/web/css/-moz-force-broken-image-icon/index.html @@ -0,0 +1,56 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +
{{Non-standard_header}}{{ CSSRef() }}
+ +

Resumen

+ +

-moz-force-broken-image-icon es una propiedad CSS extendida. El valor 1 fuerza un icono de imagen no encontrada aunque la imagen tenga el atributo alt. Cuando el valor es 0 la imagen actuará normalmente y solo mostrará el atributo  alt.

+ +
Nota: Aunque el valor sea 1 el atributo alt se seguirá mostrando. Más información debajo.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
-moz-force-broken-image-icon: <integer>;
+ +

Valores

+ +
+
{{cssxref("<integer>")}}
+
 
+
+ +

Ejemplos

+ +
img {
+  -moz-force-broken-image-icon: 1;
+  height:100px;
+  width:100px;
+}
+ +
<img src='/enlace/roto/imagen.png' alt='Imagen con enlace roto'>
+ +

{{ EmbedLiveSample('Examples','125','125','/files/4619/broken%20image%20link.png') }}

+ +
Nota: A no ser que la imagen tenga una altura y ancho especificados, el icono de imagen rota no se mostrará, pero el atributo alt no se mostrará si el valor de -moz-force-broken-image-icon es 1.
+ +

Notas

+ + + +

Ver también

+ + diff --git a/files/es/web/css/-moz-image-rect/index.html b/files/es/web/css/-moz-image-rect/index.html new file mode 100644 index 0000000000..5d6b6f1e69 --- /dev/null +++ b/files/es/web/css/-moz-image-rect/index.html @@ -0,0 +1,143 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-image-rect +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}
+ +

Resumen

+ +

Este valor para la propiedad CSS {{cssxref("background-image")}} te permite usar una parte de una imagen de gran tamaño como fondo. Esto permitirá, por ejemplo, usar diferentes partes de una imagen grande como si fueran una sóla imagen grande usada como fondo de diferentes partes de tú contenido.

+ +

Funciona de manera similar a la propiedad {{cssxref("-moz-image-region")}} , que se usa junto con la propiedad{{cssxref("list-style-image")}} para utilizar partes de imágnes como iconos de listas. Sin embargo puede ser usado para cualquier fondo CSS.

+ +

La síntaxis para el rectánigulo es similar a la de la función rect() y genera un tipo CSS {{cssxref("<shape>")}} . Los cuatro valores son relativos a la esquina superior izquierda de la imagen.

+ +

Síntaxis

+ +
-moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left);
+ +

Valores

+ +
+
{{cssxref("<uri>")}}
+
La URI de la imagen de la que se cogera una parte.
+
top
+
El borde superior, especificado como  {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.
+
right
+
El borde derecho, especificado como  {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.
+
bottom
+
El borde inferior, especificado como  {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.
+
left
+
El borde izquierdo, especificado como  {{cssxref("<length>")}}, de la subimagen dentro de la imagen seleccionada.
+
+ +

Ejemplo

+ +

Este ejemplo carga una imagen y la usa en cuatro segmento para dibujar el logo de Firefox en cuatro bloques  {{HTMLElement("div")}} blocks. Si hacemos click en el contenedor los cuatro segmentos rotarán cmabiando los valores de la propiedad {{cssxref("background-image")}} entre estos cuatro bloques {{HTMLElement("div")}}.

+ +

CSS

+ +

El CSS define un estilo para el contenedor y, posteriormente los estilos para las cuatro cajas que comprenden la imagen completa.

+ +

Para el contenedor:

+ +
#container {
+  width:267px;
+  height:272px;
+  top:100px;
+  left:100px;
+  position:absolute;
+  font-size:16px;
+  text-shadow:white 0px 0px 6px;
+  text-align:center;
+}
+ +

posteriormente las cuatro caja se defines las cajas que especifican los segmentos de la imagen. La vamos a ver una por una.

+ +
#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

Esta es la esquina superior izquierda de la imagen. Define un rectángulo que contiene el cuartil superior izquierda de la imagen firefox.jpg.

+ +
#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

Esto define la esquina superior derecha:

+ +

Las otras dos siguen un patrón similar:

+ +
#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width:133px;
+  height:136px;
+  position:absolute;
+}
+
+ +

HTML

+ +

Es bastante simple:

+ +
<div id="container" onclick="rotate()">
+  <div id="box1" style="left:0px;top:0px;">Top left</div>
+  <div id="box2" style="left:133px;top:0px;">Top right</div>
+  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
+  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
+</div>
+
+ +

Sitúa los 4 segmentos de una imagen en un caja de 2x2 celdas. Estos cuatro elementos están dentro de un bloque {{HTMLElement("div")}} más grande cuya función es recibir eventos click y mandarlos al código JavaScript.

+ +

El codigo javaScript

+ +

Gestiona el evento click cuando el contenedor recibe un click de ratón

+ +
function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Una vez hemos guardado la última, empezamos a rotar.
+
+  for (var i=1; i<=4; i++) {
+    var curId = "box" + i;
+
+    // Permuta las imágenes de fondo.
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}
+ +

Usa {{domxref("window.getComputedStyle()")}} para establecer el estilo de cada elemento, cambiándolo al elemento posterior. Destacar que, una vez se empieza se guarda una copia del estilo de la última caja ya que será sobreescrito por el tercer elemento. Simplemente copiando los valores de la propiedad {{cssxref("background-image")}} de un elemento al siguiente, cuando hacemos click de ratón, conseguiremos el efecto deseado.

+ +

Como queda

+ +

{{EmbedLiveSample("Example","400","400")}}

+ +

Bugs

+ + diff --git a/files/es/web/css/-moz-image-region/index.html b/files/es/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..4b8ff97c95 --- /dev/null +++ b/files/es/web/css/-moz-image-region/index.html @@ -0,0 +1,37 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - No estandar + - Referencia + - Referencia CSS +translation_of: Web/CSS/-moz-image-region +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Para sistemas que funcionan con cualquier fondo ver {{ Cssxref("-moz-image-rect") }}.

+ +

Resumen

+ +

Para cierto elementos y pseudo-elementos XUL que usan una imagen para la propiedad {{cssxref("list-style-image")}}, esta propiedad especifica la parte de una imagen que es usada en lugar en vez de la imagen completa. Esto permite a los elementos usar diferentes partes de la misma imagen para mejorar el rendimiento.

+ +

La síntaxis es similar a la síntaxis de la propiedad {{cssxref("clip")}}. Los 4 valors son relativos la esquina superior izquierda de la imagen.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
#example-button {
+  /* muestra sólo el área 4x4 desde la esquina izquierda de esta imagen */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* muestra sólo el área 4x4 a la derecha del primero para cuando pongamos el ratón sobre el botón */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}
diff --git a/files/es/web/css/-moz-orient/index.html b/files/es/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..171a8e47ef --- /dev/null +++ b/files/es/web/css/-moz-orient/index.html @@ -0,0 +1,156 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +translation_of: Web/CSS/-moz-orient +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

The -moz-orient CSS especifica la orientación del elemento al que se aplica.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
inline
+
El elemento se representa en la misma dirección que el eje del texto : horizontal para los modos de escritura horizontales , verticalmente para los modos de escritura vertical .
+
block
+
El elemento se representa de forma ortogonal al eje del texto : verticalmente para los modos de escritura horizontal , horizontal para los modos de escritura vertical .
+
horizontal
+
El elemento se representa horizontalmente.
+
vertical
+
El elemento se representa verticalmente.
+
+ +

Ejemplos

+ +

HTML

+ +
<p>
+  The following progress meter
+  is horizontal (the default):
+</p>
+<progress max="100" value="75"></progress>
+
+<p>
+ The following progress meter
+ is vertical:
+</p>
+<progress class="vert" max="100" value="75"></progress>
+ +

CSS

+ +
.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Examples","200","360")}}

+ +

Especificaciones

+ +

Aunque somete al W3C , con retroalimentación positiva inicial , esta propiedad no es todavía parte de ninguna especificación ; Actualmente , esto es una extensión de Mozilla-specific (that is, -moz-orient).

+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
apoyo básico{{CompatNo}}{{CompatGeckoDesktop("6.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
auto valor{{CompatNo}}{{CompatGeckoDesktop("21.0")}}[2]
+ {{CompatNo}}{{CompatGeckoDesktop(40)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}

+ línea y el valor de bloqueo		{{CompatNo}}{{CompatGeckoDesktop(40)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteísticasAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
apoyo básico{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
auto valor{{CompatNo}}{{CompatGeckoMobile("21.0")}}[2]
+ {{CompatNo}}{{CompatGeckoDesktop(40)}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
línea y el valor de bloqueo{{CompatNo}}{{CompatGeckoMobile(40)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +

[1] In Gecko 6.0 {{geckoRelease("6.0")}}, error causado por verticales{{HTMLElement("progress")}} elementos para el procesamiento con las dimensiones de una barra horizontal. Esto se soluciona en Gecko 7.0 { { geckoRelease ( " 7.0 " ) } } .

+ +

[2] El valor auto era equivalente a la horizontal.

+ +

Ver también

+ + diff --git a/files/es/web/css/-moz-outline-radius-bottomleft/index.html b/files/es/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..b5103d501e --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Summary

+ +

La propiedad  CSS -moz-outline-radius-bottomleft establece, en aplicaciones Mozilla, el redondeado de la esquina inferior izquierda de un contorno.

+ +

{{cssinfo}}

+ +

Ver la propiedad {{cssxref("-moz-outline-radius")}} para más información.

diff --git a/files/es/web/css/-moz-outline-radius-bottomright/index.html b/files/es/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..3d40fde4ce --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,21 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Summary

+ +

La propiedad  CSS -moz-outline-radius-bottomright establece, en aplicaciones Mozilla, el redondeado de la esquina inferior derecha de un contorno.

+ +

+

{{cssinfo}}

+

+ +

Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.

diff --git a/files/es/web/css/-moz-outline-radius-topleft/index.html b/files/es/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..045ff93826 --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad  CSS -moz-outline-radius-topleft establece, en aplicaciones Mozilla, el redondeado de la esquina superior izquierda de un contorno.

+ +

{{cssinfo}}

+ +

Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.

diff --git a/files/es/web/css/-moz-outline-radius-topright/index.html b/files/es/web/css/-moz-outline-radius-topright/index.html new file mode 100644 index 0000000000..cabb6e97a1 --- /dev/null +++ b/files/es/web/css/-moz-outline-radius-topright/index.html @@ -0,0 +1,19 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius-topright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad  CSS -moz-outline-radius-topright establece, en aplicaciones Mozilla, el redondeado de la esquina superior derecha de un contorno.

+ +

{{cssinfo}}

+ +

Ver la propiedad  {{cssxref("-moz-outline-radius")}} para más información.

diff --git a/files/es/web/css/-moz-outline-radius/index.html b/files/es/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..01370818bb --- /dev/null +++ b/files/es/web/css/-moz-outline-radius/index.html @@ -0,0 +1,158 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/-moz-outline-radius +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

En aplicaciones de Mozilla como Firefox, la propiedad CSS -moz-outline-radius puede ser usada para a los contornos de esquinas redondeadas. Un {{cssxref("outline")}} es una línea que es dibujada alrededor de los elementos, fuera del límite del borde, para hacer que el elemento destaque.

+ +

-moz-outline-radius es un atajo para establecer las cuatro propiedades{{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} y {{cssxref("-moz-outline-radius-bottomleft")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Un valor */
+-moz-outline-radius: 25px;
+
+/* Dos valores */
+-moz-outline-radius: 25px 1em;
+
+/* Tres valores */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Cuator valores */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* valores globales */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+
+ +

Valores

+ +
Los contornos elípticos y los valores <porcentaje> se expresan de acuerdo a la síntaxis descrita en {{cssxref("border-radius")}}.
+ +

Uno, dos,tres o cuatro valores  <outline-radius> , representan uno de los siguientes casos:

+ +
+
{{cssxref("<length>")}}
+
Ver {{cssxref("<length>")}} para ver los posibles valores.
+
{{cssxref("<percentage>")}}
+
Un {{cssxref("<percentage>")}}; ver {{cssxref("border-radius")}} para más detalles.
+
+ + + +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<style>
+p {
+border: 1px solid black; 
+outline: dotted red; -moz-outline-radius: 12% 1em 25px;
+}
+</style> </head>
+
+<body> <p>La propiedad  outline-style usando -moz-outline-radius</p> </body>
+
+<head> <style>
+p1 {
+border: 1px solid black; outline: dotted red; 
+-moz-outline-radius-topleft: 12%; 
+-moz-outline-radius-topright: 1em; 
+-moz-outline-radius-bottomright: 35px; 
+-moz-outline-radius-bottomleft: 1em; }
+</style> </head>
+
+<body> <p1>La propiedad outline-style usando un -moz-outline-radius-xxx más complicado</p1> </body>
+
+ +

Result

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/-moz-outline-radius') }}

+ +

Notas

+ + + +

Especificaciones

+ +

Esta propiedad no se define es ningún estándar CSS.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.8")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("1.8")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/-moz-stack-sizing/index.html b/files/es/web/css/-moz-stack-sizing/index.html new file mode 100644 index 0000000000..639c05d4a5 --- /dev/null +++ b/files/es/web/css/-moz-stack-sizing/index.html @@ -0,0 +1,57 @@ +--- +title: '-moz-stack-sizing' +slug: Web/CSS/-moz-stack-sizing +tags: + - CSS + - No estandar + - Referencia CSS + - XUL +translation_of: Archive/Web/CSS/-moz-stack-sizing +--- +

{{Non-standard_header}}{{CSSRef}} {{gecko_minversion_header("1.9.1")}}

+ +

Resumen

+ +

-moz-stack-sizing es una propiedad de CSS extendido. Normalmente, una {{XULElem("stack")}} cambiará su tamaño para que todos los elementos hijo sean completamente visibles. Por ejemplo, al mover un hijo de la pila lo suficientemente a la derecha anchará la plia para que el hijo permanezca visible.

+ +

Si quieres evitar que la pila cambie de tamaño automáticamente puedes establecer -moz-stack-sizing a ignore en el hijo. La propiedad no se estable en la misma pila si no que se establece en los hijos de la pila. Esto permite ignorar a ciertos elementos hijos pero no a otros.

+ +

Nota: En versiones anteriores de Gecko  era posible solucionar el problema estableciendo un valor negativo muy grande como margen derecho e inferior para la pila y de igual manera unos márgenes inferior y derecho con grandes valores positivos para los hijos cuyo tamaño no quería ignorar. (El problema no afecta los hijos que se muevan en la parte inferior o izquierda de la pila.)

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave de los valores */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* valores gloables */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+
+ +

Valores

+ +
+
stretch-to-fit
+
El hijo influirá en el tamaño de la pila.
+
ignore
+
La pila no tendrá en cuenta el hijo al calcular su tamaño..
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+
+ +

Ver además

+ +

{{bug("346189")}}

diff --git a/files/es/web/css/-moz-text-blink/index.html b/files/es/web/css/-moz-text-blink/index.html new file mode 100644 index 0000000000..95f6961609 --- /dev/null +++ b/files/es/web/css/-moz-text-blink/index.html @@ -0,0 +1,95 @@ +--- +title: '-moz-text-blink' +slug: Web/CSS/-moz-text-blink +tags: + - CSS + - 'CSS:Entensiones de Mozilla' + - Referencia CSS +translation_of: Archive/Web/CSS/-moz-text-blink +--- +
{{CSSRef}} {{non-standard_header}}{{deprecated_header}}
+ +

Resumen

+ +

La extensión de Mozilla no estándar  -moz-text-blink especifica si se establece el modo parpadeo.

+ +
+

Firefox, que era el único de entre los navegadores más conocidos que lo soportaba, dejó de soportarla a partir de la versión 26. Esta propiedad no es soportadoa por ningún navegador en la actualizad.

+
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
none
+
No produce parpadeo
+
blink
+
El texto parpade. Destacar que el hecho de que el texto no parpadee es una técnica para satisfacer checkpoint 3.3 of WAI-UAAG.
+
+ +

Ejemplo

+ +
.example {
+  -moz-text-blink: blink;
+}
+ +

Especificaciones

+ +

Esta propiedad fue definida en un antiguo borrador de la especificación CSS 3 . La versiones nuevas eliminaron esta definición.

+ +

Compatibilidad con los distintos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("6.0")}}
+ Removed in {{CompatGeckoDesktop("26.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatGeckoMobile("6.0")}}
+ Removed in {{CompatGeckoMobile("26.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/-moz-user-focus/index.html b/files/es/web/css/-moz-user-focus/index.html new file mode 100644 index 0000000000..f945c3e64b --- /dev/null +++ b/files/es/web/css/-moz-user-focus/index.html @@ -0,0 +1,113 @@ +--- +title: '-moz-user-focus' +slug: Web/CSS/-moz-user-focus +tags: + - CSS + - 'CSS:Extensiones Mozilla' + - Referencia CSS +translation_of: Web/CSS/-moz-user-focus +--- +
{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -moz-user-focusse usa para indicar si el elemento puedo obtener el foco.

+ +

Al poner el valor de esta propiedad a ignore, deshabilitas el hecho de que el elemento pueda obtener el foco lo que significa que el usuario no podrá activar el elemento. Se saltará el elemento es un secuncia de tabuladores.

+ +

{{cssinfo}}

+ +
Nota: Esta propiedad no funciona con los elementos XUL {{XULElem("textbox")}} , porque el textbox en sí mismo nunca tomará el foco. En su lugar , XBL crea un elemento HTML  {{HTMLElement("input")}} anónimo dentro del textbox, y es ese elemento el que recibe el foco. Se puede evitar que el textbox obtenga el foco de teclado estableciendo su índice de tabulación a -1, y que obtenga el foco del ratón evitando la acción por defecto para los eventos mousedown.
+ +

Síntaxis

+ +
/* Palabras clave de valores */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Valores gloables */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+
+ +

Valores

+ +
+
ignore
+
El elemento no aceptará el foco y será saltado en el orden de tabulación.
+
normal
+
El elemento puedeo aceptar el foco del teclado.
+
select-after
+
?
+
select-before
+
?
+
select-menu
+
?
+
select-same
+
?
+
select-all
+
?
+
none
+
?
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ +

Esta propiedad no es parte de ninguna especificación. Una propiedad similar user-focus fue propuesta en borradores previos de la especificación CSS 3 UI pero finalmente fué rechazada por el grupo de trabajo.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/-moz-user-input/index.html b/files/es/web/css/-moz-user-input/index.html new file mode 100644 index 0000000000..f94b13f1b3 --- /dev/null +++ b/files/es/web/css/-moz-user-input/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: Web/CSS/-moz-user-input +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

En las aplicaciones Mozilla , -moz-user-input determina si un elemento aceptará entrada por parte del usuario. user-focus, una propiedad similar fue propuesta en  primeros borradores de un predecesor de la especificación CSS3 UI pero fue rechazada posteriormente por el grupo de trabajo..

+ +

{{cssinfo}}

+ +

-moz-user-input fue was one of the proposals leading to the proposed CSS 3 {{cssxref("user-input")}} property, which has not yet reached Candidate Recommendation (call for implementations).

+ +

Para elementos que normalmente son receptores de entrada por parte del usuario, como  {{HTMLElement("textarea")}}, el valor inicial de -moz-user-input es enabled.

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Valores gloables */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+
+ +

Valores

+ +
+
none
+
El elemento no responde a la entrada de datos por parte del usuario y no estará {{Cssxref(":active")}}.
+
enabled
+
El elemento acepta entrada por parte del usuario. Para cajas de texto es el comportamiento por defecto.
+
disabled
+
El elemento no acepta datos del usuario. Sin embargo, no es lo mismo que establecer  {{XULAttr("disabled")}} a true, en ese caso el elemento es dibujado normalmente.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
input.example {
+  /* the user will be able to select the text, but not change it. */
+  -moz-user-input: disabled;
+}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-user-modify/index.html b/files/es/web/css/-moz-user-modify/index.html new file mode 100644 index 0000000000..21b9593d93 --- /dev/null +++ b/files/es/web/css/-moz-user-modify/index.html @@ -0,0 +1,132 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/user-modify +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad -moz-user-modify determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo {{htmlattrxref("contenteditable")}} .  user-focus , que es una propiedad similar, fue propuesta como parte de los borradores iniciales de un predecesor de la especificación CSS3 UI ,pero fue rechazada por el grupo de trabajo.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Valores globales */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+
+ +

Valores

+ +
+
read-only
+
Valor por defecto. El contenido sólo se puede leer.
+
read-write
+
El usuario puede leer y escribir contenidos.
+
write-only
+
El usuario puede editar el contenido pero no leerlo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+
+ +

HTML

+ +
<div class="readwrite">El usuario puede cambiar este texto.</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Example", 300, 30)}}

+ +

Especificaciones

+ +

user-modify en una versión inicial de la especificación CSS 3 UI (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por CSS 3 UI)

+ +

Compatibilidad con los distintos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] También soporta: -webkit-user-modify: read-write-plaintext-only (Se perderá el texto enriquecido).
+ Esta propiedad se llamó  -khtml-user-modify en Safari 2.0.

+ +

Ver además

+ + diff --git a/files/es/web/css/-moz-window-shadow/index.html b/files/es/web/css/-moz-window-shadow/index.html new file mode 100644 index 0000000000..fb2d15bdf0 --- /dev/null +++ b/files/es/web/css/-moz-window-shadow/index.html @@ -0,0 +1,52 @@ +--- +title: '-moz-window-shadow' +slug: Web/CSS/-moz-window-shadow +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - XUL +translation_of: Archive/Web/CSS/-moz-window-shadow +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Resumen

+ +

La propiedad  CSS -moz-window-shadow especifica si una ventana tendrá sombra. Sólo funciona en Mac OS X.

+ +
+

Esta propiedad no estándar y a partir de Firefox 44 no puede ser usada más en sitios Web.

+
+ +

{{cssinfo}}

+ +

Firefox 3 añadió el soporte para ventanas transparentes en Mac OS X. Sin embargo, para este tipo de ventanas,  se quitaron las sombras y no había manera de habilitarlas.

+ +

En Firefox 3.5 cambiamos el comportamiento por defecto; todas las ventanas tienen ahora sombra. Introducimos la propiedad CSS -moz-window-shadow para proporcionar una manera de quitar las sombras no deseadas.

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
default
+
La ventana tendrá sombra con el estilo por defecto de la ventana.
+
menu {{gecko_minversion_inline("2.0")}}
+
La ventana tendrá el estilo de sombra que es apropiado para los menús.
+
tooltip {{gecko_minversion_inline("2.0")}}
+
La ventana tendrá el estilo de sombra que es apropiado para las herramientas.
+
sheet {{gecko_minversion_inline("2.0")}}
+
La ventana tendrá el estilo de sombra que es apropiado para las ventanas de datos
+
none
+
La ventana no tendrá sombra.
+
+ +

Ejemplos

+ +
.KUI-panel {
+  -moz-window-shadow: none;
+}
+
diff --git a/files/es/web/css/-ms-accelerator/index.html b/files/es/web/css/-ms-accelerator/index.html new file mode 100644 index 0000000000..33f1a38f9e --- /dev/null +++ b/files/es/web/css/-ms-accelerator/index.html @@ -0,0 +1,75 @@ +--- +title: '-ms-accelerator' +slug: Web/CSS/-ms-accelerator +tags: + - CSS + - Non-standard + - Propiedad CSS + - Referencia +translation_of: Archive/Web/CSS/-ms-accelerator +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +

La propiedad CSS -ms-accelerator es una  esxtensión Microsoft que establece o recupera una cadena que indica si el objeto representa un método abreviado de teclado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* El objeto no es un atajo de teclado (por defecto) */
+-ms-accelerator: false
+/* El objeto es un atajo de teclado */
+-ms-accelerator: true
+
+ +

Values

+ +
+
false
+
+

El objeto no es un atajo de teclado

+
+
true
+
+

El objeto es un atajo de teclado

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Este ejemplo usa el atributo -ms-accelerator en un  elemento {{HTMLElement("u")}} para especificar que la "N" en el elemento {{HTMLElement("label")}} es un atajo de teclado. Cuando la opción de "Ocultar los indicadores de navegación del teclado hasta que use la tecla Alt" está habilitada en las propiedades de pantalla del usuario la "N" no estará subrayada hasta que el usuario presione la tecla Alt . Cuando Alt + N son presionadas,el elemento {{HTMLElement("input")}} que define un atributo {{htmlattrxref("accessKey","input")}} valor de atributo de "N" recibe el foco.

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <title>Acelerador</title>
+  </head>
+  <body>
+    <label for="oName"><u style="-ms-accelerator: true; accelerator: true">N</u>ame: </label>
+    <input type="text"
+      id="oName"
+      size="25"
+      accesskey="N"
+      value="Your name here" />
+  </body>
+</html>
+
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Observaciones

+ +

Esta propiedad está soportada por Windows 2000 y versiones posteriores. permite a los usuarios ocultar los indicadores de navegación para los elementos del menú y los controles hasta que se presiona la tecla  Alt

+ +

Una clave de acceso es un solo carácter que se utiliza como método abreviado de teclado para seleccionar un objeto. El usuario presiona la tecla Alt y la mantiene presionada mientras presiona el carácter para mover el enfoque de entrada al objeto e invocar el evento predeterminado asociado con el objeto.

+ +

En Internet Explorer 8 (IE8) el atributo -ms-accelerator es una extensión de CSS, y se puede usar como un sinónimo para accelerator en el modo estándar de IE8.

diff --git a/files/es/web/css/-ms-overflow-style/index.html b/files/es/web/css/-ms-overflow-style/index.html new file mode 100644 index 0000000000..8e2295067a --- /dev/null +++ b/files/es/web/css/-ms-overflow-style/index.html @@ -0,0 +1,40 @@ +--- +title: '-ms-overflow-style' +slug: Web/CSS/-ms-overflow-style +tags: + - CSS + - No estándar(2) + - Propiedad + - Propiedad CSS + - Referencia + - Referencia CSS +translation_of: Archive/Web/CSS/-ms-overflow-style +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

-ms-overflow-style es una propiedad CSS propietaria, específica de  Internet Explorer y Microsoft Edge, que controla el compartamiento de la barra de desplazamiento (scroll) cuando el contenido de un elemento se desborda.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
auto
+
Valor inicial. Lo mismo que  inherit.
+
none
+
La barras de desplazamiento (Scrollbars) no son nuncas mostradas, aunque se puede hacer el scroll sobre el elemento si el contenido lo desoborda.
+
scrollbar
+
Las  barras de desplazamiento(sroll) "Tradicionales" se muestran si el contenido desborda el elemento. Estas barras no se auto ocultan ni se solapan con el contenido del elemento. Por consiguente, las dimensiones del aréa de contenido son reducidas en una cantidad igual al tamaño de las barras de desplazamiento.
+
-ms-autohiding-scrollbar
+
Se muestran barras de desplazamiento que se auto ocultan si el contenido desborda el elemento. Estas barras se muestran mientras se hace el desplzamiento o scroll y brevemente después de realizar el desplazamiento y cuando la interacción ha terminado se ocultan. Mientras estén visibles se supeponen al contenido del elemento..
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificciones

+ +

No es parte de ninguna especificación. Microsoft tiene una descripción suya en MSDN.

diff --git a/files/es/web/css/-webkit-border-before/index.html b/files/es/web/css/-webkit-border-before/index.html new file mode 100644 index 0000000000..444337ac10 --- /dev/null +++ b/files/es/web/css/-webkit-border-before/index.html @@ -0,0 +1,137 @@ +--- +title: '-webkit-border-before' +slug: Web/CSS/-webkit-border-before +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-webkit-border-before +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-border-before es una propiedad que permite configurar los valores de la propiedad borde para el bloque lógico de inicio en un sólo sitio de la hoja de estilos. -webkit-border-before se puede usar para establecer los valores para más de uno de: {{cssxref("-webkit-border-before-width")}}, {{cssxref("-webkit-border-before-style")}}, y {{cssxref("-webkit-border-before-color")}}. Se mapea a un borde físico dependiendo del modo de escritura del elemento, la direccionalidad y la orientación del texto. Se corresonde con  la propiedad {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos en {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Se relaciona con {{cssxref("-webkit-border-after")}}, {{cssxref("-webkit-border-start")}}, y {{cssxref("-webkit-border-end")}}, que definen los otros bordes del elemento.

+ +

Esta propiedad se prevee que será incluida en el estándar como  {{cssxref("border-block-start")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores para el borde */
+-webkit-border-before: 1px;
+-webkit-border-before: 2px dotted;
+-webkit-border-before: medium dashed blue;
+
+/* Valores globales */
+-webkit-border-before: inherit;
+-webkit-border-before: initial;
+-webkit-border-before: unset;
+
+ +

Valores

+ +

Uno o más de los siguiente valores, dando igual el orden en el que se especifiquen:

+ +
+
<'border-width'>
+
Ver {{cssxref("border-width")}}
+
<'border-style'>
+
Ver {{cssxref("border-style")}}
+
<'color'>
+
Ver {{cssxref("color")}}
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  -webkit-border-before: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Example", 140, 140)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación aunque está relacionada con la propiedad {{cssxref("border-block-start")}}.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-box-reflect/index.html b/files/es/web/css/-webkit-box-reflect/index.html new file mode 100644 index 0000000000..ca3fde311e --- /dev/null +++ b/files/es/web/css/-webkit-box-reflect/index.html @@ -0,0 +1,116 @@ +--- +title: '-webkit-box-reflect' +slug: Web/CSS/-webkit-box-reflect +tags: + - CSS + - No estándar(2) + - Propiedad + - Referencia +translation_of: Web/CSS/-webkit-box-reflect +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS -webkit-box-reflect peermite reflejar el contenido del elemento en una dirección específica.

+ +
Nota: Esta característica no está pensada para ser usada en páginas Web .Para conseguir reflexión en la Web, la forma estándar es usando la función CSS {{cssxref("element", "element()")}} .
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores para la dirección */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Valor del desplazamiento */
+-webkit-box-reflect: below 10px;
+
+/* Valor de máscara */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Valores globales */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-webkit-box-reflect: unset;
+
+ +

Valores

+ +
+
above, below, right, left
+
Son palabras clave que indican en qué dirección se realiza la reflexión.
+
<length>
+
Indica el tamaño de la reflexión.
+
<image>
+
Describe la máscara que se aplicará a la reflexión.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ +

Esta propiedad no está entre los objetivos de la especificación estándar y no será parte de CSS. La manera estándar para conseguir reflexión en CSS es el uso de la función {{cssxref("element", "element()")}}.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatChrome("4.0")}}{{CompatNo}}{{CompatOpera("15.0")}}{{CompatSafari("4.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatAndroid("2.1")}}{{CompatNo}}22.0 {{CompatVersionUnknown}}3.2 {{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-mask-attachment/index.html b/files/es/web/css/-webkit-mask-attachment/index.html new file mode 100644 index 0000000000..50309f5376 --- /dev/null +++ b/files/es/web/css/-webkit-mask-attachment/index.html @@ -0,0 +1,95 @@ +--- +title: '-webkit-mask-attachment' +slug: Web/CSS/-webkit-mask-attachment +tags: + - CSS + - Diseño + - Referencia + - Web +translation_of: Web/CSS/-webkit-mask-attachment +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Si se ha especificado una {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-attachment determina si la posición de la imagen de la máscara es fija dentro de la ventana (viewport) , o se desplaza a lo largo del bloque que la contiene.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+
+ +

Valores

+ +
+
scroll
+
Si se ha especifiacod  scroll , la imagen de máscara se desplaza dentro de la ventana (viewport) junto con el bloque que contiene la máscara de imagen.
+
fixed
+
Si se ha especificado el valor fixed , la imagen de máscara no se desplaza junto con el elemento que la contienen, en vez de eso permanece es una posición fija dentro de la ventana (viewport).
+
+ +

Ejemplos

+ +
body {
+    -webkit-mask-image: url('images/mask.png');
+    -webkit-mask-attachment: fixed;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatNo() }} [1]{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

[1] Se ha dejado de dar soporte desde Chrome 24.

+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-clip") }},  {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/-webkit-mask-box-image/index.html b/files/es/web/css/-webkit-mask-box-image/index.html new file mode 100644 index 0000000000..6ba9930377 --- /dev/null +++ b/files/es/web/css/-webkit-mask-box-image/index.html @@ -0,0 +1,130 @@ +--- +title: '-webkit-mask-box-image' +slug: Web/CSS/-webkit-mask-box-image +tags: + - CSS + - Diseño + - Referencia + - Web +translation_of: Web/CSS/-webkit-mask-box-image +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

-webkit-mask-box-image establece la imagen de máscara para la caja del borde de un elemento.

+ + + +

Síntaxis

+ +
-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
+
+ +

Where:

+ +
+
<mask-box-image>
+
{{cssxref("<uri>")}} | <gradient> | none
+
<top> <right> <bottom> <left>
+
<length> | <percentage>
+
<x-repeat> <y-repeat>
+
repeat | stretch | round
+
+ +

Valores

+ +
+
<uri>
+
La localización del recurso imagen que será usada como imagen de máscara..
+
<gradient>
+
La función -webkit-gradient que se usará como imagen de máscara.
+
none
+
Para especificar que la caja del borde no va a tener imagen de máscara.
+
+ +
+
<length>
+
El tamaño del desplazamiento de la imagen de máscara. Ver  {{cssxref("<length>")}} para posibles unidades.
+
<percentage>
+
El desplazamiento de la imagen de máscara tiene un valor que se corresponde con un porcentaje de la dimensiones (altura y anchura) del tamaño de la caja del borde.
+
repeat
+
La imagen de máscara se repite tanta veces como sean necesarios para cubrir la caja.  Puede incluir una imagen parcial si no existe una división exacta con el tamaño de la caja.
+
stretch
+
La imagen de máscara se encoge para contener la caja del borde exactamente.
+
round
+
 Se encoge y repite de tal manera que no existan partes de la imagen de máscara al final de la caja.
+
+ +

Ejemplos

+ +
.exampleone {
+    -webkit-mask-box-image: url('mask.png');
+}
+
+.exampletwo {
+    -webkit-mask-box-image: url('logo.png') 100 100 0 0 round round;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-clip") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/-webkit-mask-clip/index.html b/files/es/web/css/-webkit-mask-clip/index.html new file mode 100644 index 0000000000..02a522733f --- /dev/null +++ b/files/es/web/css/-webkit-mask-clip/index.html @@ -0,0 +1,101 @@ +--- +title: '-webkit-mask-clip' +slug: Web/CSS/-webkit-mask-clip +tags: + - CSS +translation_of: Web/CSS/mask-clip +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Si se especificado {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-clip determina el comportamiento de recorte (clipping) de la imagen de máscara.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+
+ +

donde:

+ +
+
<clip-style>
+
border | padding | content | text
+
+ +

Valores

+ +
+
border
+
Si se ha especificado border , la máscara de imagen se extiende hasta el borde del elemento.
+
padding
+
Si se ha especificado padding , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.
+
content
+
Si se ha espeficiado content , la imagen de máscara se recorta al tamaño del contenido del elemento.
+
text
+
Si se ha especificado  text , la imagen de máscara de recorta al tamaño del texto del elemento.
+
+ +

Ejemplo

+ +
div {
+    -webkit-mask-image: url('images/mask.png');
+    -webkit-mask-clip: padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/-webkit-mask-composite/index.html b/files/es/web/css/-webkit-mask-composite/index.html new file mode 100644 index 0000000000..c8a3666fee --- /dev/null +++ b/files/es/web/css/-webkit-mask-composite/index.html @@ -0,0 +1,121 @@ +--- +title: '-webkit-mask-composite' +slug: Web/CSS/-webkit-mask-composite +tags: + - CSS +translation_of: Web/CSS/-webkit-mask-composite +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

La propiedad -webkit-mask-composite especifica la forma en la que múltiples imágenes de máscara son compuestas para ser aplicadas al mismo elemento. Son compuestas en el orden en el que son declaradas en la propiedad {{ Cssxref("-webkit-mask-image") }}.

+ + + +

Síntaxis

+ +
-webkit-mask-composite: <composite-style>[, <composite-style>]*
+
+ +

Donde:

+ +
+
<composite-style>
+
clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor
+
+ +

Valores

+ +
+
clear
+
Los píxeles coincidentes en la imagen origen y destino son borrados.
+
copy
+
La imagen de máscara origen reemplaza la imagen de máscara destino.
+
source-over
+
La imagen de máscara origen se dibuja sobre la imagen de máscara destino.
+
source-in
+
Los píxeles coincidentes en las imágenes de máscara origen y destino son reemplazados por los píxeles de la imagen origen; los demás son borrados.
+
source-out
+
Los píxeles coincidentes en las imágenes de máscara origen y destino son borrados; todos los demás píxeles de la imagen de máscara origen son dibujados.
+
source-atop
+
Se dibujan los píxeles de la imagen de máscara destino. Los de la imagen de máscara destino sólo son dibujados si están sobre una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara origen no tengo efecto alguno.
+
destination-over
+
Se dibuja la imagen de máscara destino sobre la de origen.
+
destination-in
+
Los píxeles coincidentes en las imágenes de máscara origen y destino permanecen; los demás son borrados.
+
destination-out
+
Los píxeles coincidentes en las imágenes de máscara origen y destino se borran; se dibuja todos los demás píxeles de la imagen de máscara origen.
+
destination-atop
+
Se dibujan Los píxeles de la imagen de máscara origen. Los de la imagen de máscara destino sólo se dibujaran si coinciden con una parte no transparente de la imagen de máscara destino. Esto provoca que la imagen de máscara destino no tenga efecto.
+
xor
+
Los píxeles coincidentes en las imágenes de máscara origen y destino se convierten en totalmente transparentes y ambos con totalmente opacos.
+
+ +

Ejemplos

+ +
.example {
+    -webkit-mask-image: url(mask1.png), url('mask2.png');
+    -webkit-mask-composite: xor, source-over;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-clip") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }}

diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/-webkit-mask-image/index.html new file mode 100644 index 0000000000..17fc6d5e1e --- /dev/null +++ b/files/es/web/css/-webkit-mask-image/index.html @@ -0,0 +1,156 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-image +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-image establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
-webkit-mask-image: url(images/mymask.png);
+-webkit-mask-image: url(images/foo.png), url(images/bar.png);
+-webkit-mask-image: none;
+
+ +

Valores

+ +
+
<uri>
+
La localización del recurso imagen que será utilizado como imagen de máscara.
+
<gradient>
+
La función webkit-gradient que será usada como imagen de máscara.
+
none
+
Usado para especificar si un elemento no tiene imagen de máscara.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
body {
+  -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+  -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+  -webkit-mask-image: none;
+}
+
+ +

Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Múltiples imágenes de máscara{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Gradientes{{CompatNo}}1.0{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}
Máscaras SVG{{CompatNo}}8.0[1]{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Soporte básico3.2{{CompatNo}}{{CompatNo}}2.1
Múltiples imágenes de máscara{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
Gradientes{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Máscaras SVG{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta Efectos de filtro SVG, que se pueden usar para aplicar máscaras a contenido HTML.

+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/-webkit-mask-origin/index.html b/files/es/web/css/-webkit-mask-origin/index.html new file mode 100644 index 0000000000..23b0f52dc7 --- /dev/null +++ b/files/es/web/css/-webkit-mask-origin/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referencia +translation_of: Web/CSS/mask-origin +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propiedad  CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
padding
+
Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas  "0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.)
+
border
+
La posición de la imagen de máscara es relativa al borde.
+
content
+
La posición de la imagen de máscara es relativa al contenido.
+
+ +

Ejemplos

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* La imagen de máscara estará dentro del padding */
+  -webkit-mask-origin: content;
+}
+
+ +
div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+
+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básica2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/es/web/css/-webkit-mask-position-x/index.html b/files/es/web/css/-webkit-mask-position-x/index.html new file mode 100644 index 0000000000..a2d712e337 --- /dev/null +++ b/files/es/web/css/-webkit-mask-position-x/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-position-x' +slug: Web/CSS/-webkit-mask-position-x +tags: + - CSS + - Máscaras CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-position-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-position-x CSS establece la posición horizontal inicial de una imagen de máscara.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras Clave valores */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* <porcentaje> valores */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* <longitud> valores */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Múltiples valores */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Valores globales */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+
+ +

Valores

+ +
+
<percentage>
+
Un porcentaje que sirve para indicar, empezando por el lado izquierdo, la posición de la imagen en relación a la dimensión horizontal del área de la caja de relleno (padding). Un valor del 0% indica que  el lado izquierdo de la imagen de máscara se alinea con el lado izquierdo de la caja. Un valor del 100% indica que que el lado derecho de la imagen se alinea con el lado derecho de la caja.
+
<length>
+
Una longitud indicando la posición del lado izquierdo de la imagen en relación con el lado izquierdo de la caja.
+
left
+
Equivalente a 0%.
+
center
+
Equivalente a 50%.
+
right
+
Equivalente a 100%.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: 25%;
+}
+
+ +

Especificaciones

+ +

No forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

See also

+ +

{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}

diff --git a/files/es/web/css/-webkit-mask-position-y/index.html b/files/es/web/css/-webkit-mask-position-y/index.html new file mode 100644 index 0000000000..e68f3ac8e8 --- /dev/null +++ b/files/es/web/css/-webkit-mask-position-y/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-position-y' +slug: Web/CSS/-webkit-mask-position-y +tags: + - CSS + - Máscaras CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-position-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-position-y fija la posición inicial vertical de una imagen de máscara.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valores */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* valores <porcentaje> */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* valores <longitud> */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Valores Múltiples*/
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Valores globales */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+
+ +

Values

+ +
+
<percentage>
+
Un porcentaje que sirve para indicar, empezando por el lado superior, la posición de la imagen en relación a la dimensión vertical del área de la caja de relleno (padding). Un valor del 0% indica que  el lado superior de la imagen de máscara se alinea con el lado superior de la caja. Un valor del 100% indica que que el lado inferior de la imagen se alinea con el lado inferior de la caja.
+
<length>
+
Una longitud indicando la posición del lado superior de la imagen en relación con el lado superior de la cajade relleno (padding).
+
top
+
Equivalente a 0%.
+
bottom
+
Equivalente a 100%.
+
center
+
Equivalente a 50%.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: bottom;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: 25%;
+}
+
+ +

Especificaciones

+ +

Not part of any specification.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}

diff --git a/files/es/web/css/-webkit-mask-position/index.html b/files/es/web/css/-webkit-mask-position/index.html new file mode 100644 index 0000000000..f2162ce36b --- /dev/null +++ b/files/es/web/css/-webkit-mask-position/index.html @@ -0,0 +1,118 @@ +--- +title: '-webkit-mask-position' +slug: Web/CSS/-webkit-mask-position +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-position +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Sumario

+ +
la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +

 Acepta uno o dos valores.  Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}.

+ + + +
+
<percentage>
+
Con un par de valores  0% 0%,  (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen  en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14%  a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14%  a lo largo y el 84% del área del relleno.
+
<length>
+
Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.
+
top
+
Equivalente al 0% para la posición vertical.
+
right
+
Equivalente al 100% para la posición horizontal.
+
bottom
+
Equivalente al 100% para la posición vertical.
+
left
+
Equivalente al 0% para la posición horizontal.
+
center
+
Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.
+
+ +

Ejemplos

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: bottom right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: 25%;
+}
+
+ +

Especificaciones

+ +

No forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos nevegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Ver tambien

+ +

{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/-webkit-mask-repeat-x/index.html b/files/es/web/css/-webkit-mask-repeat-x/index.html new file mode 100644 index 0000000000..5395782abd --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat-x/index.html @@ -0,0 +1,136 @@ +--- +title: '-webkit-mask-repeat-x' +slug: Web/CSS/-webkit-mask-repeat-x +tags: + - CSS + - Máscara CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-repeat-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-repeat-x especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera horizontal.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras Clave Valor */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Múltiples valores */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Valores globales */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+
+ +

Valores

+ +
+
repeat
+
La imagen de máscara se repite tanto horizontal como verticalmente.
+
no-repeat
+
La imagen de máscara no se repite; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.
+
space
+
La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas a ambos lados del elemento y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.
+
round
+
Al aumentar el espacio la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una achura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una anchura de 300px y, entonces, se añadirá otra que se encogerá hasta 225px.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: no-repeat;
+}
+
+ +

Soporte para múltiples imágenes de máscara

+ +

Es posible especificar un  <repeat-style> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-x: repeat, space;
+}
+
+ +

Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo  el orden que se ha establecido.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.

+ +

Ver además

+ +

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}

diff --git a/files/es/web/css/-webkit-mask-repeat-y/index.html b/files/es/web/css/-webkit-mask-repeat-y/index.html new file mode 100644 index 0000000000..23f989db45 --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat-y/index.html @@ -0,0 +1,137 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +tags: + - CSS + - Máscara CSS + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-repeat-y especifica si una imagen de máscara se repite(en mosaico) y cómo se lleva acabo esa repetición de manera vertical.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras Clave Valor */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Múltiples valores */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Valores globales */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+
+ +

Valores

+ +
+
repeat
+
La imagen se repite verticalmente
+
no-repeat
+
La imagen de máscara no se repite verticalmente; sólo se dibuja una copia de la misma. El resto del contenido del elemento al cual se le ha aplicado la máscara, no es mostrado.
+
space
+
La imagen se repite tanta veces como sea posible pero sin aplicarle ningún recorte. La primera y la última imagen estarán pegadas al borde superior e inferior del elemento  y el espacio restante se distribuye de igual manera entre las imágenes. Se ignora la propiedad {{cssxref("mask-position")}} a menos que únicamente se pueda mostrar una sóla imagen sin aplicar recortes. El único caso en el que se aplican recortes usando este valor es cuando no hay suficiente espacio para mostrar una sóla imagen.
+
round
+
Al aumentar el espacio vertical  la imágenes repetidas pueden estiarse (sin dejar huecos) hasta que sólo haya hueco para añadir una más. Al añadir la siguiente se encogen para permitir el hueco.Ejemplo: Una imagen con una altura original de 260px, repetida 3 veces, puede estirarse hasta que cada repetición tenga una altura de 300px y, entonces, se añadirá otra que se encogerá hasta una altura 225px.
+
As the allowed vertical space increases in size, the repeated images will stretch (leaving no gaps) until there is room for another one to be added. When the next image is added, all of the current ones compress to allow room. Example: An image with an original height of 260px, repeated three times, might stretch until each repetition is 300px high, and then another image will be added. They will then compress to a height of 225px.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: no-repeat;
+}
+
+ +

Soporte para múltiples imágenes de máscara

+ +

Es posible especificar un  <repeat-style> diferente para cada una de las imágenes de máscara. Los distintos valores deben separarme mediante el uso de comas:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-y: repeat, space;
+}
+
+ +

Cada imagen se asocia con el correspondiente estilo de repetición, desde la primera hasta la última y siguiendo  el orden que se ha establecido.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Pese a que la propiedad sí que es reconocida, no acepta ningun valor.

+ +

Ver además

+ +

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}

diff --git a/files/es/web/css/-webkit-mask-repeat/index.html b/files/es/web/css/-webkit-mask-repeat/index.html new file mode 100644 index 0000000000..50ff3bc603 --- /dev/null +++ b/files/es/web/css/-webkit-mask-repeat/index.html @@ -0,0 +1,132 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - Web +translation_of: Web/CSS/mask-repeat +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask-repeat especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave de valor únicas */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Palabras clave de valor mútiple */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Valores globlaes */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+
+ +

Valores

+ +
+
repeat
+
La máscara de imagen se repite tanto vertical como horizontalmente.
+
repeat-x
+
La imagen de máscara de repite sólo horizontalmente.
+
repeat-y
+
La imagen de máscara de repite sólo verticalemente.
+
no-repeat
+
La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: repeat-x;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: no-repeat;
+}
+
+ +

Soporte para múltiples imágenes de máscara

+ +

Se puede especificar, seperados por comas,  un <repeat-style> para cada una de las imágenes de máscara:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat: repeat-x, repeat-y;
+}
+
+ +

Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/-webkit-mask/index.html new file mode 100644 index 0000000000..59b3a02370 --- /dev/null +++ b/files/es/web/css/-webkit-mask/index.html @@ -0,0 +1,124 @@ +--- +title: '-webkit-mask' +slug: Web/CSS/-webkit-mask +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/mask +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask es una  manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask  puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-webkit-mask: none;
+
+/* Valores de imágene */
+-webkit-mask: url(mask.png);                       /* Imagen de pixel usado coo máscara */
+-webkit-mask: url(masks.svg#star);                 /* Elemento dentro de un gráfico SVG usado como máscara */
+-webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */
+
+/* Valores combinados */
+-webkit-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
+-webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
+-webkit-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
+-webkit-mask: url(masks.svg#star) border;          /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
+-webkit-mask: url(masks.svg#star) text;            /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */
+
+/* Valores globales */
+-webkit-mask: inherit;
+-webkit-mask: initial;
+-webkit-mask: unset;
+
+ +

Valores

+ +
+
mask-image
+
Requierido.Ver {{Cssxref("-webkit-mask-image")}}.
+
mask-repeat
+
Opcional. Ver {{Cssxref("-webkit-mask-repeat")}}.
+
mask-attachment
+
Opcional Ver {{Cssxref("-webkit-mask-attachment")}}.
+
mask-position
+
Opcional. Ver {{Cssxref("-webkit-mask-position")}}.
+
mask-origin
+
Opcional. Ver {{Cssxref("-webkit-mask-origin")}}.
+
mask-clip
+
Opcional Ver {{Cssxref("-webkit-mask-clip")}}.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.example {
+  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatNo}}{{CompatNo}}{{CompatNo}}3.2
+
+ +

See also

+ + diff --git a/files/es/web/css/-webkit-overflow-scrolling/index.html b/files/es/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..61d96b749d --- /dev/null +++ b/files/es/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,85 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propiedad CSS -webkit-overflow-scrolling controla si los dispositivos táctiles usan el desplazamiento momentum o inercial (momentum-based scroll) para el elemento dado.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
auto
+
Usa el desplazamiento (scroll) normal, donde el contenido deja inmediatamente de desplazarse cuando quitas el dedo de la pantalla.
+
touch
+
Use el desplazamiento momentum o inercial, donde el contenido sigue desplazándose después incluso de haber acabado el gesto de control y de haber quitado el dedo de la pantalla. La velocidad y duración de esta continuación es proporcional a cuán fuerte fue el gesto de desplazamiento o scroll. Además se crea un nuevo contexto de apilado (stacking context).
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<div class="scroll-touch">
+  <p>
+    This paragraph has momentum scrolling
+  </p>
+</div>
+<div class="scroll-auto">
+  <p>
+    This paragraph does not.
+  </p>
+</div>
+ +

CSS

+ +
div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Examples')}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Apple tiene una  descripción en la Referencia CSS de Safari.

+ +

Compatibilidad en navegadores

+ +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/-webkit-print-color-adjust/index.html b/files/es/web/css/-webkit-print-color-adjust/index.html new file mode 100644 index 0000000000..67e3456e5a --- /dev/null +++ b/files/es/web/css/-webkit-print-color-adjust/index.html @@ -0,0 +1,102 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/-webkit-print-color-adjust +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-print-color-adjust es una extensión CSS no estándar que puede ser usada para forzar la impresión de fondos e imágenes en navegadores basado en el motor WebKit.

+ +

Síntaxis

+ +
-webkit-print-color-adjust: economy | exact
+
+ +

Valores

+ +
+
economy
+
Comportamiento normal.  Los colores de fondo y las imágenes son sólo impresos si el usuario lo permite de manera explícita en el cuadro de diálogo de preferencias de impresión.
+
exact
+
Los colores de fondo y las imágenes del elemento en el que se aplica esta reglar son siempre impresos, la configuración de la impresora del usuario es ignorada.
+
+ +

Herencia

+ +

Esta propiedad es heredada.

+ +

Especificaciones

+ +

Aún no es parte de ninguna especificación aunque hay una propuesta en la wiki de CSSWG para que sea estandarizada.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}6.0[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Chrome no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  exact en el elemento body , sólo se aplicará a sus descendientes.

+ +

Cuando se recortan las imágenes de fondo (por ejemplo cuando usamos sprites e imágenes de fondo), causado por el Chromium bug 131054,  las imágenes aparecerán distorsionadas al ser impresas desde el navegador Chrome con  -webkit-print-color-adjust: exact. Fondos de colores sólidos e imágenes de fondo que no sean recortadas (es decir que tengan menor anchura y altura que el elemento al que se aplican) serán impresas de manera correcta.

+ +

[2] Safari no soporta la impresión de fondo del elemento {{HTMLElement("body")}}. Si se fija la propiedad a  exact en el elemento body , sólo se aplicará a sus descendientes.

+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-tap-highlight-color/index.html b/files/es/web/css/-webkit-tap-highlight-color/index.html new file mode 100644 index 0000000000..065b35dac9 --- /dev/null +++ b/files/es/web/css/-webkit-tap-highlight-color/index.html @@ -0,0 +1,43 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

-webkit-tap-highlight-color es una propiedad CSS no estándar que fija el color que sirve para destacar un enlace cuando se golpea  sobre él (normalmente con el dedo en dispositivos táctiles). Ese color destacado indica que se ha presionado correctamente e indica el elemento sobre el cuál se ha golpeado.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
-webkit-tap-highlight-color: red;
+
+ +

Valores

+ +

Un {{Cssxref("color value")}}.

+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ +

No es parte de ninguna especificación. Apple tiene una descripción en la Guía Web de Contenidos sobre Safari.

+ +

Compatibilidad con los distintos navegadores

+ +

Soportado por WebKit/Safari, Blink/Chrome, y y algunas versiones de Internet Explorer y Microsoft Edge.

diff --git a/files/es/web/css/-webkit-text-fill-color/index.html b/files/es/web/css/-webkit-text-fill-color/index.html new file mode 100644 index 0000000000..6882843fd7 --- /dev/null +++ b/files/es/web/css/-webkit-text-fill-color/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-text-fill-color' +slug: Web/CSS/-webkit-text-fill-color +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-text-fill-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-text-fill-color especifica el color de relleno de las letras de un texto. Si la propiedad no está establecidad se usará el valor de la propiedad {{cssxref("color")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Compat', '#the-webkit-text-fill-color', '-webkit-text-fill-color')}}{{Spec2('Compat')}}Estandarización estándar
Referencia CSS Safari
+ '-webkit-text-fill-color' en ese documento.		Documentanción no oficial no estándarDocumentación inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CompatibilidadChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CompatibilidadAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-text-stroke-color/index.html b/files/es/web/css/-webkit-text-stroke-color/index.html new file mode 100644 index 0000000000..ef5119cb4e --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke-color/index.html @@ -0,0 +1,129 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - No estándar(2) + - Propiedad CSS +translation_of: Web/CSS/-webkit-text-stroke-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-text-stroke-color especifica el  color del trazo de los caracteres de texto. Si no se fija se usa el valor de la propiedad {{cssxref("color")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* valores <color> */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Valores gloables */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+
+ +

Valores

+ +
+
<color>
+
El color del trazo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Compat', '#the-webkit-text-stroke-color', '-webkit-text-stroke-color')}}{{Spec2('Compat')}}Estandarización Inicial
Referencia CSS de Safari CSS
+ '-webkit-text-stroke-color' en ese documento.		Documentación no estándar y no oficial.Documentación Inicial
+ +

No es parte de ninguna especificación.

+ +

Apple tiene una descripción de -webkit-text-stroke-color en la referencia CSS de Safari.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-text-stroke-width/index.html b/files/es/web/css/-webkit-text-stroke-width/index.html new file mode 100644 index 0000000000..797dbea3f4 --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke-width/index.html @@ -0,0 +1,118 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - Experimental + - No estandar + - Referencia +translation_of: Web/CSS/-webkit-text-stroke-width +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad  CSS -webkit-text-stroke-width especifica la anchura del trazo de texto.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* TODO */
+
+ +

Valores

+ +
+
<line-width>
+
La anchura del trazo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Compat', '#the-webkit-text-stroke-width', '-webkit-text-stroke-width')}}{{Spec2('Compat')}}Estandarización Inicial
Referencia CSS de Safari
+ '-webkit-text-stroke-width' en ese documento.		Non-standard unofficial documentationDocumentación Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-text-stroke/index.html b/files/es/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..d9c1e26ae6 --- /dev/null +++ b/files/es/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,142 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - No estándar(2) + - Propiedad + - Referencia +translation_of: Web/CSS/-webkit-text-stroke +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad  CSS -webkit-text-stroke especifica la  anchura y  color del trazo para los caractéres de texto. Esta forma es una manera corta en relación con la forma larga que necesita usar las propiedades{{cssxref("-webkit-text-stroke-width")}} y {{cssxref("-webkit-text-stroke-color")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores anchura y color */
+-webkit-text-stroke: 4px navy;
+
+/* Valores globales */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+
+ +

Valores

+ +
+
<length>
+
La anchura del trazo.
+
<color>
+
El color del trazo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p id="example">El trazo de este texto es rojo.</p>
+ +

CSS

+ +
#example {
+  font-size: 50px;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}
+ +

{{EmbedLiveSample("Example", 600, 60)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Compat', '#the-webkit-text-stroke', '-webkit-text-stroke')}}{{Spec2('Compat')}}Estandarización Inicial
Referencia CSS Safari
+ '-webkit-text-stroke' en ese documento.		Documentación no oficial y no estándarDocumentación Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/-webkit-touch-callout/index.html b/files/es/web/css/-webkit-touch-callout/index.html new file mode 100644 index 0000000000..dbb8e830e7 --- /dev/null +++ b/files/es/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,106 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia +translation_of: Web/CSS/-webkit-touch-callout +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-touch-callout controla la visualización de la llamada predeterminada que se muestra cuando se mantiene pulsado un objetivo táctil .

+ +

Cuando se toca y se mantiene la presión  en un objetivo en iPhone OS, Safari muestra un un cuadro con información sobre el enlace.  Esta propiedad permite deshabilitar este comportamiento.

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Valores globales */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;
+ +

Valores

+ +
+
default
+
Se muestra el cuadro de información por defecto.
+
none
+
El cuadro está deshabilitado
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Example

+ +
.example {
+  -webkit-touch-callout: none;
+}
+
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Apple tiene una descripcón en la Referencia CSS de Safari.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +

[1] La propiedad  -webkit-touch-callout fue implementada en iOS 2.0 y posteriormente añadida a WebKit ({{webkitbug(121507)}}).

diff --git a/files/es/web/css/@charset/index.html b/files/es/web/css/@charset/index.html new file mode 100644 index 0000000000..c45a05f3e8 --- /dev/null +++ b/files/es/web/css/@charset/index.html @@ -0,0 +1,123 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - Regla-at +translation_of: Web/CSS/@charset +--- +
{{ CSSRef }}
+ +

Resumen

+ +

La regla-at @charset de CSS especifica la codificación de caracteres usada en la hoja de estilos. Éste debe ser el primer elemento en la hoja de estilos, y no debe ser precedidad por ningun otro caracter; al no ser una declaración anidada, no puede ser usada dentro de grupos de reglas-at condicionales. Si se definen varias reglas-at @charset, solamente se usará la primera. La regla-at @charset no puede ser usada dentro de un atributo style style en un elemento HTML o dentro del elemento {{ HTMLElement("style") }} , ya que en estos casos se tomará en cuenta la codificación de la página HTML contenedora.

+ +

Esta regla-at es útil cuando se usan caracteres fuera de la codificación ASCII en alguna propiedad CSS, como {{ cssxref("content") }}.

+ +

Habiendo diferentes maneras de definir la codificación de caracteres en una hoja de estilos, el navegador intentará seguir este orden para identificarlo (deteniéndose en el primer paso que dé resultado):

+ +
    +
  1. El valor de la Marca de orden de bytes al principio del archivo.
    2. +
  2. El valor dado por el atributo charset del encabezado HTTP Content-Type: o su equivalente en el protocolo usado para descargar la hoja de estilos.
    3. +
  3. La regla-at @charset de CSS.
    4. +
  4. Usar la codificación de caracteres definida en el documento de referencia: el atributo charset attribute del elemento {{ HTMLElement("link") }}. Este método es obsoleto para HTML5 y no debe ser usado.
    5. +
  5. Asumir que el documento es UTF-8.
    6. +
+ +

Sintaxis

+ +
@charset "UTF-8";
+@charset 'iso-8859-15';
+
+ +

donde:

+ +
+
charset
+
Es un valor {{cssxref("<string>")}} que denota la codificación de caracteres que será usada. Debe ser el nombre de una codificación de caracteres compatible con Web, definida en el registro IANA. Si varios nombres están asociados a una codificación, solamente se usará el que está marcado como principal.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
@charset "UTF-8";       /* Establece la codificación de la hoja de estilos a Unicode UTF-8 */
+@charset 'iso-8859-15'; /* Establece la codificación de la hoja de estilos a Latin-9 (idiomas de Europa Occidental, con símbolo de euro) */
+ @charset "UTF-8";      /* Inválido, hay un caracter (espacio) antes de la regla-at */
+@charset UTF-8;         /* Inválido, sin comillas simples o dobles, el valor no es una cadena {{cssxref("<string>")}} de CSS */
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}{{ Spec2('CSS2.1') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico2.0{{ CompatGeckoDesktop("1.8") }}[1]5.5[2]94
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.1{{ CompatGeckoMobile("1.8") }}5.5[2]10.04
+
+ +

[1] Firefox 1.0 soporta sólo una sintaxis inválida donde la codificación de caracteres no se establece entre comillas sencillas o dobles.

+ +

[2] De IE 5.5 a IE 7, IE también soporta la sintaxis inválida donde la codificación de caracteres no se establece entre comillas sencillas o dobles.

diff --git a/files/es/web/css/@counter-style/additive-symbols/index.html b/files/es/web/css/@counter-style/additive-symbols/index.html new file mode 100644 index 0000000000..9c91ff7f39 --- /dev/null +++ b/files/es/web/css/@counter-style/additive-symbols/index.html @@ -0,0 +1,129 @@ +--- +title: additive-symbols +slug: Web/CSS/@counter-style/additive-symbols +tags: + - Descriptor CSS + - Estilos de Contador CSS + - Referencia +translation_of: Web/CSS/@counter-style/additive-symbols +--- +

Resumen

+ +

El descriptor additive-symbols es similar al descriptor {{cssxref('symbols')}}, y permite al usuario especificar símbolos que se usarán para representación de contadores cuando el valor del descriptor {{cssxref('system')}} es additive. El descriptor additive-symbols define lo que se conoce como tuplas aditivas, cada una de las cuales es un par que contiene un símbolo y su peso como entero no negativo. El sistema aditivo es usado para construir sistemas de numeración de valores de signos como la numeración romana.

+ +

Cuando el valor del descriptor es cyclic, numeric, alphabetic, symbolic, o fixed, se usa el descriptor symbols, en lugar de additive-symbols para especificar los símbolos de conteo.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
additive-symbols: 3 "0";
+additive-symbols: 3 "0", 2 "\2E\20";
+additive-symbols: 3 "0", 2 url(symbol.png);
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<ul class="list">
+   <li>One</li>
+   <li>Two</li>
+   <li>Three</li>
+   <li>Four</li>
+   <li>Five</li>
+</ul>
+ +

Contenido CSS

+ +
@counter-style additive-symbols-example {
+  system: additive;
+  additive-symbols: I 1;
+}
+.list {
+  list-style: additive-symbols-example;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'additive-symbols')}}{{Spec2('CSS3 Counter Styles')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

+ + diff --git a/files/es/web/css/@counter-style/index.html b/files/es/web/css/@counter-style/index.html new file mode 100644 index 0000000000..557c5b42a9 --- /dev/null +++ b/files/es/web/css/@counter-style/index.html @@ -0,0 +1,200 @@ +--- +title: '@counter-style' +slug: Web/CSS/@counter-style +tags: + - At-rule + - CSS + - NeedsTranslation + - Reference + - Styles + - TopicStub + - counter +translation_of: Web/CSS/@counter-style +--- +

{{CSSRef}}

+ +

Summary

+ +

The @counter-style CSS at-rule lets authors define specific counter styles that are not part of the predefined set of styles. A @counter-style rule defines how to convert a counter value into a string representation.

+ +

Initial version of CSS defined a set of useful counter styles. Although more styles were added to this set of predefined styles over the years, this restrictive way proved unable to fulfill the needs of worldwide typography. The @counter-style at-rule addresses this shortcoming in an open-ended manner, by allowing authors to define their own counter styles when the pre-defined styles aren't fitting their needs.

+ +

Syntax

+ +

Descriptors

+ +

Each @counter-style is identified by a name and has a set of descriptors.

+ +
+
{{cssxref("@counter-style/system", "system")}}
+
Specifies the algorithm to be used for converting the integer value of a counter to a string representation.
+
+ +
+
{{cssxref("@counter-style/negative", "negative")}}
+
Lets the author specify symbols to be appended or prepended to the counter representation if the value is negative.
+
+ +
+
{{cssxref("@counter-style/prefix", "prefix")}}
+
Specifies a symbol that should be prepended to the marker representation. Prefixes are added to the representation in the final stage, so in the final representation of the counter, it comes before the negative sign.
+
+ +
+
{{cssxref("@counter-style/suffix", "suffix")}}
+
Specifies, similar to the prefix descriptor, a symbol that is appended to the marker representation. Prefixes come after the marker representation.
+
+ +
+
{{cssxref("@counter-style/range", "range")}}
+
Defines the range of values over which the conter style is applicable. If a counter style is used to represent a counter value outside of its ranges, the counter style will drop back to its fallback style.
+
+ +
+
{{cssxref("@counter-style/pad", "pad")}}
+
Is used when you need the marker representations to be of a minimum length. For example if you want the counters to start start at 01 and go through 02, 03, 04 etc, then the pad descriptor is to be used. For representations larger than the specified pad value, the marker is constructed as normal.
+
+ +
+
{{cssxref("@counter-style/fallback", "fallback")}}
+
Specifies a system to fall back into if either the specified system is unable to construct the representation of or a counter value or if the counter value outside the specified range. If the specified fallback also fails to represent the value, then the fallback style's fallback is used, if one is specified. If there are either no fallback systems described or if the chain of fallback systems are unable to represent a counter value, then it will ultimately fall back to the decimal style.
+
+ +
+
{{cssxref("@counter-style/symbols", "symbols")}}
+
Specifies the symbols that are to be used for the marker representations. Symbols can contain string, images or custom identifiers. How the symbols are used to construct the marker representation is up to the algorithm specified in the system descriptor. For example, if the system specified is fixed, then each of the N symbols specified in the descriptor will be used to represent the first N counter symbols. Once the specified set of symbols have exhausted, the fallback style will be used for the rest of the list.
+
+ The below @counter-style rule uses images instead of character symbols.
+ + 
@counter-style winners-list {
+  system: fixed;
+  symbols: url(gold-medal.svg) url(silver-medal.svg) url(bronze-medal.svg);
+  suffix: " ";
+}
+
+
+ +
+
{{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
+
While the symbols specified in the symbols descriptor is used for constructing marker representation by most algorithms, some systems such as 'additive' rely on additive tuples described in this descriptor. Each additive tuple consists of a counter symbol and a non negative integer weight. The additive tuples must be specified in the descending order of their weights.
+
+ +
+
{{cssxref("@counter-style/speak-as", "speak-as")}}
+
Describes how to read out the counter style in speech synthesizers, such as screen readers. For example, the value of the marker symbol can be read out as numbers or alphabets for ordered lists or as audio cues for unordered lists, based on the value of this descriptor.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Examples

+ +
@counter-style circled-alpha {
+  system: fixed;
+  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
+  suffix: " ";
+}
+ +

The above counter style rule can be applied to lists like this:

+ +
.items {
+   list-style: circled-alpha;
+}
+
+ +

Which will produce lists like this:

+ +

Ⓐ One
+ Ⓑ Two
+ Ⓒ Three
+ Ⓓ Four
+ Ⓔ FIve
+ ....
+ ...
+ Ⓨ Twenty Five
+ Ⓩ Twenty Six

+ +

27 Twenty Seven
+ 28 Twenty Eight
+ 29 Twenty Nine
+ 30 Thirty

+ +

Checkout more examples on the demo page.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Counter Styles', '#the-counter-style-rule', 'counter-style')}}{{Spec2('CSS3 Counter Styles')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/es/web/css/@counter-style/symbols/index.html b/files/es/web/css/@counter-style/symbols/index.html new file mode 100644 index 0000000000..8a81c04645 --- /dev/null +++ b/files/es/web/css/@counter-style/symbols/index.html @@ -0,0 +1,144 @@ +--- +title: symbols +slug: Web/CSS/@counter-style/symbols +tags: + - Descriptor CSS + - Estilos de contadores CSS +translation_of: Web/CSS/@counter-style/symbols +--- +

Summary

+ +

El descriptor symbols es usado para definir los símbolos que usará un sistema de conteo específico para construir una representación de conteo. Un símbolo puede ser un texto, una imagen o un identificador. El descriptor symbols debe ser especificado cuando el valor del descriptor {{cssxref('system')}} es cyclic, numeric, alphabetic, symbolic, o fixed. Cuando se usa el sistema additive, el descriptor {{cssxref('additive-symbols')}} es usado para especificar los símbolos.

+ +

Los valores posibles para descriptor de símbolos incluyen:

+ + + +

{{cssinfo}}

+ +

Sintaxis

+ +
symbols: A B C D E;
+symbols: "\24B6" "\24B7" "\24B8" D E;
+symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
+symbols: url('first.svg') url('second.svg') url('third.svg');
+symbols: indic-numbers;
+
+ +

Valores

+ +
+
<symbol>
+
Representa u símbolo (<symbol>) usado dentro del sistema de conteo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul class="list">
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+  <li>Four</li>
+  <li>Five</li>
+</ul>
+ +

CSS

+ +
@counter-style symbols-example {
+  system: fixed;
+  symbols: A "1" "\24B7" D E;
+}
+
+.list {
+  list-style: symbols-example;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/symbols') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}{{Spec2('CSS3 Counter Styles')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(33)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

+ + diff --git a/files/es/web/css/@document/index.html b/files/es/web/css/@document/index.html new file mode 100644 index 0000000000..250b5342c7 --- /dev/null +++ b/files/es/web/css/@document/index.html @@ -0,0 +1,82 @@ +--- +title: '@document' +slug: Web/CSS/@document +translation_of: Web/CSS/@document +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

The @document CSS at-rule restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.

+ +
@document url("https://www.example.com/") {
+  h1 {
+    color: green;
+  }
+}
+
+ + + +

Syntax

+ + + +

Una regla @document puede especificar una o más funciones coincidentes. Si alguna de las funciones se aplica a una URL determinada, la regla tendrá efecto en esa URL. Las funciones disponibles son:

+ + + +

The values provided to the url(), url-prefix(), and domain() functions can be optionally enclosed by single or double quotes. The values provided to the regexp() function must be enclosed in quotes.

+ +

Escaped values provided to the regexp() function must additionally be escaped from the CSS. For example, a . (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to \.), then escape that string using CSS rules (to \\.).

+ +
+

Note: There is a -moz-prefixed version of this property — @-moz-document. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks ({{bug(1035091)}}).

+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

CSS

+ +
@document url(http://www.w3.org/),
+          url-prefix(http://www.w3.org/Style/),
+          domain(mozilla.org),
+          regexp("https:.*") {
+  /* CSS rules here apply to:
+     - The page "http://www.w3.org/"
+     - Any page whose URL begins with "http://www.w3.org/Style/"
+     - Any page whose URL's host is "mozilla.org"
+       or ends with ".mozilla.org"
+     - Any page whose URL starts with "https:" */
+
+  /* Make the above-mentioned pages really ugly */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+
+ +

Specifications

+ +

Initially in {{SpecName('CSS3 Conditional')}}, @document has been postponed to Level 4.

+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.document")}}

+ +

See also

+ + diff --git a/files/es/web/css/@font-face/font-display/index.html b/files/es/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..f6dcaf0c03 --- /dev/null +++ b/files/es/web/css/@font-face/font-display/index.html @@ -0,0 +1,96 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - '@font-face' + - CSS + - Descriptor CSS + - Experimental + - Fuentes CSS + - Referencia + - font-display + - web fonts +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

El descriptor font-display determina cómo se muestra una fuente basándose en cuándo está descargada y lista para usarse.

+ +

La visualización de las fuentes

+ +

La  visualización de la fuentes se basa en un temporizador que comienza en el momento en que el agente de usuario intenta utilizar una fuente descargada. El tiempo de visualización se divide en tres periodos dictan el comportamiento de renderizado de cualquier elemento que utilice la fuente.

+ +
+
Tiempo de bloqueo de fuente
+
Si la fuente no está cargada, cualquier elemento que intente utilizarla debe mostrar una fuente alternativa invisible. Si la fuente se carga correctamente durante este período, se utiliza normalmente.
+
Tiempo de intercambio de fuente
+
Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Si la fuente se carga correctamente durante este período, se utiliza normalmente.
+
Tiempo de fallo de la fuente
+
Si la fuente no está cargada el agente de usuario lo trata como una descarga fallida y utiliza una fuente alternativa.
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Valores

+ +
+
auto
+
El agente de usuario define la estrategia de visualización de fuentes.
+
block
+
Establece un tiempo de bloqueo de la fuente corto y un periodo de intercambio infinito
+
swap
+
No establece  tiempo de bloqueo para la fuente y un tiempo infinito de intercambio.
+
fallback
+
Establece un tiempo de bloqueo muy pequeño y un período de intercambio corto.
+
optional
+
Establece un tiempo de bloqueo muy corto y sin tiempo de intercambio.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

diff --git a/files/es/web/css/@font-face/font-family/index.html b/files/es/web/css/@font-face/font-family/index.html new file mode 100644 index 0000000000..1069ff05a8 --- /dev/null +++ b/files/es/web/css/@font-face/font-family/index.html @@ -0,0 +1,116 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +tags: + - CSS + - font-family +translation_of: Web/CSS/@font-face/font-family +--- +

{{CSSRef}}

+ +

Resumen

+ +

El descriptor CSS font-family CSS permite al autor especificar el tipo de fuente para un elemento.

+ +

La propiedad font-family puede contener varias fuentes  a modo de sistema de "seguridad. Si el navegador no soporta la primera, probará con la siguiente y así sucesivamente.

+ +

hay dos tipos de nombres de familias de fuentes:

+ + + +

Comienza con la fuente que quieras, y acaba siempre con una familia de fuente genérica para permitir al navegador elegir una fuente similar dentro de la familia genérica en caso de que no haya otras fuentes disponibles.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
font-family: font|initial|inherit;
+ +

Valores

+ +

family-name
+ generic-family
+ Un lista priorizada de nombre de familias de fuentes y/o de nombres de familias genéricas.

+ +

initial
+ Establace el valor por defecto para esta propiedad.

+ +

inherit
+ Hereda esta propiedad del elemento padre.

+ +

serif
+ Fuente genérica con serif como, por ejemplo, el tipo de fuente Times.

+ +

sans-serif
+ Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial.

+ +

fantasy
+ Fuente genérica Fantasy.

+ +

monospace
+ Fuente genérica Monospace, como por ejemplo Courier.

+ +

cursive
+ Fuente genérica cursiva, como por ejemplo Script.

+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Como ejemplo , consideremos la familia de fuentes garamon, es su forma normal, obtendremos el siguiente resultado:

+ +
p {
+    font-family: "Times New Roman", Georgia, Serif;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Definición inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico1.01.04.03.51.0
+ +

 

diff --git a/files/es/web/css/@font-face/font-style/index.html b/files/es/web/css/@font-face/font-style/index.html new file mode 100644 index 0000000000..5b812c2d63 --- /dev/null +++ b/files/es/web/css/@font-face/font-style/index.html @@ -0,0 +1,134 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +tags: + - '@font-face' + - CSS + - Fuentes + - Referências +translation_of: Web/CSS/@font-face/font-style +--- +

{{CSSRef}}

+ +

Summary

+ +

La propiedad CSS "font-style" permite a los autores esepcificar estilos de fuente para las fuentes especificadas en la regla "@font-face".

+ +

Para un tipo de fuente particular, los autores pueden descargar varios tipos de fuentes que correspondan a diferentes estilos de la misma familia de fuentes, y luego usar la propiedad "font-style" para especificar explicitamente el tipo de fuente descargada. Los valores para esta propiedad CSS son los mismos que los correspondientes a font property.

+ +

{{cssinfo}}

+ +

Syntax

+ +
+
font-style: normal;
+font-style: italic;
+font-style: oblique;
+ +

Values

+ +

normal
+ Selecciona la version normal del estilo de fuente.

+ +

italic
+ Especifica que el estilo de fuente es la versión en cursiva de la fuente normal.

+ +

oblique
+ Especifica que el estilo de fuente es la versión en cursiva, también, pero de forma diferente, de la fuente normal.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

A modo de ejemplo, consideremos Garamond como un tipo de fuente que, en su forma normal, obtenemos el siguiente resultado:

+ +
@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}
+ +

unstyled Garamond

+ +

La versión en cursiva de este texto utiliza los mismos trazos presentes en la versión sin estilo, pero artificialmente inclinadas unos pocos grados.

+ +

artificially sloped garamond

+ +

Por otra parte, si existe un verdadera versión en cursiva del estilo de fuente, podemos incluirla en la propiedad "src" y especificar el estilo de fuente como "italic", con que claramente la fuente quedará en cursiva. Las verdaderas cursivas utilizan unos trazos específicos que son un poco diferentes de su versión normal, teniendo algunas características únicas y generalmente con cualidades redondeadas y caligráficas. Estas fuentes son específicamente creadas por diseñadores de fuentes y no son artificialmente inclinadas.

+ +

@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; }

+ +

italic garamond

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.1")}}4.0  4.010.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatNo}}10.0{{CompatVersionUnknown}}
+
+
diff --git a/files/es/web/css/@font-face/index.html b/files/es/web/css/@font-face/index.html new file mode 100644 index 0000000000..b00594d694 --- /dev/null +++ b/files/es/web/css/@font-face/index.html @@ -0,0 +1,162 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

@font-face permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.

+ +

Sintaxis

+ +
@font-face {
+  font-family: <un-nombre-de-fuente-remota>;
+  src: <origen> [,<origen>]*;
+  [font-weight: <peso>];
+  [font-style: <estilo>];
+}
+
+ +

Valores

+ +
+
<un-nombre-de-fuente-remota> 
+
Especifica el nombre de una fuente que será utilizada como valor de font face por las propiedades de fuente.
+
<origen> 
+
Dirección URL para la ubicación remota del archivo de fuente, o el nombre de una fuente en la computadora del usuario en la forma local("Nombre de Fuente").
+
<peso> 
+
Un valor de peso/grosor de fuente.
+
<estilo> 
+
Un valor de estilo de fuente.
+
+ +

Puede especificar una fuente por nombre en la computadora local del usuario utilizando la sintaxis local(). Si esa fuente no es encontrada, se intentarán otros orígenes hasta encontrar una fuente.

+ +

Formatos de fuentes soportados

+ + + +

Ejemplos

+ +

Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.

+ +

Muestra en vivo

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

En este ejemplo, es utilizada la copia local de "Helvetica Neue Bold" del usuario; si el usuario no tiene esa fuente instalada (se prueban dos nombre distintos), luego la fuente descargable de nombre "MgOpenModernaBold.ttf" es utilizada en cambio:

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

Notas

+ + + +

Compatibilidad del navegador

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Chrome (WebKit)4 (532.5)Solo fuentes TrueType y OpenType
6 (534.3)Web Open Font Format (WOFF) soporte agregado
Opera10.0Solo fuentes TrueType y OpenType
Safari (WebKit)3.1 (525.6)Solo fuentes TrueType y OpenType
NavegadorVersión desdeSoporte de
Internet Explorer4.0Solo fuentes OpenType embebidas
Internet Explorer9.0 Preview 3Web Open Font Format (WOFF) soporte agregado
Firefox (Gecko)3.5 (1.9.1)Solo fuentes TrueType y OpenType
3.6 (1.9.2)Web Open Font Format (WOFF) soporte agregado
+ +

Vea también MSDN Microsoft library @font-face.

+ +

Especificaciones

+ + + +

Vea también

+ + diff --git a/files/es/web/css/@font-face/src/index.html b/files/es/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..a9627ebf9b --- /dev/null +++ b/files/es/web/css/@font-face/src/index.html @@ -0,0 +1,245 @@ +--- +title: src +slug: Web/CSS/@font-face/src +tags: + - Descriptor CSS + - Fuentes CSS + - Referencia +translation_of: Web/CSS/@font-face/src +--- +
{{CSSRef}}
+ +

El descriptor CSS src de la regla {{cssxref("@font-face")}} especifica el recurso que contiene a la fuente. Es requerido para que la regla @font-face sea válida.

+ +

Su valor es una lista de referencias externas o nombres de fuentes instaladas, separadas por coma según su prioridad. Cuando se necesita una fuente, el agente usuario itera sobre el conjunto de referencias, usando la primera que pueda ser activada exitosamente. Fuentes que contienen datos inválidos o fuentes locales que no se encuentren son ignoradas, y el agente usuario cargará la siguiente en la lista.

+ +

Al igual que con otras URLs en CSS, la URL puede ser relativa, en cuyo caso se resuelve relativamente a la ubicación de la hoja de estilos que contenga la regla @font-face. En caso de fuentes SVG, la URL apunta a un elemento dentro de un documento que contenga definiciones de fuentes SVG. Si se omite la referencia al elemento, se deduce que se usará la referencia a la primera fuente definida. De forma similar, formatos contenedores de fuentes que puedan contener más de una, cargarán solo una de las fuentes para una regla @font-face. Los identificadores de fragmentos son usados para indicar cuál fuente se cargará. Si un formato contenedor no tiene un esquema de identificadores de fragmento definido, se usará un esquema de indexado simple, con base en 1 (por ejemplo, "font-collection#1" para la primera fuente, "font-collection#2" para la segunda fuente).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* <url> values */
+src: url(https://somewebsite.com/path/to/font.woff); /* absolute URL */
+src: url(path/to/font.woff);                         /* relative URL */
+src: url(path/to/font.woff) format("woff");          /* explicit format */
+src: url('path/to/font.woff');                       /* quoted URL */
+src: url(path/to/svgfont.svg#example);               /* fragment identifying font */
+
+/* <font-face-name> values */
+src: local(font);      /* unquoted name */
+src: local(some font); /* name containing space */
+src: local("font");    /* quoted name */
+
+/* Multiple items */
+src: local(font), url(path/to/font.svg) format("svg"),
+    url(path/to/font.woff) format("woff"),
+    url(path/to/font.ttf) format("opentype");
+
+ +

Valores

+ +
+
<url> [ format( <string># ) ]?
+
Especifica una referencia externa que consiste en una URL seguida por un indicador opcional que describe el formato del recurso referenciado por esa URL. El indicador de formato contiene una lista de textos de formato, separados por coma, que denota formatos de fuente conocidos. Si un agente usuario no soporta los formatos especificados, omitirá descargar el recurso. Si no se especifican los indicadores de formato, el recurso siempre es descargado.
+
<font-face-name>
+
Especifica el nombre de una fuente instalada localmente, usando la función local(), que identifica de forma única a una fuente dentro de una familia larga. El nombre puede ser opcionalmente encerrado en comillas.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
@font-face {
+  font-family: examplefont;
+  src: local(Example Font), url('examplefont.woff') format("woff"),
+      url('examplefont.woff') format("opentype");
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("4.0")}}12.0{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("6.0")}}{{CompatOpera("9.0")}}{{CompatSafari("3.1")}}
WOFF{{CompatChrome("5.0")}}{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}{{CompatIE("9.0")}}{{CompatOpera("11.1")}}{{CompatSafari("5.1")}}
WOFF 2{{CompatChrome("36.0")}}{{CompatUnknown}}{{CompatGeckoDesktop("35.0")}}[1]{{CompatNo}}{{CompatOpera("26.0")}}{{CompatNo}}
TrueType{{CompatChrome("4.0")}}{{CompatUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("10.0")}}{{CompatSafari("3.1")}}
OpenType{{CompatChrome("4.0")}}{{CompatUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("10.0")}}{{CompatSafari("3.1")}}
Embedded OpenType{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatIE("6.0")}}{{CompatNo}}{{CompatNo}}
SVG Font{{CompatChrome("4.0")}}{{CompatUnknown}}{{CompatNo}}[2]{{CompatNo}}{{CompatOpera("9.0")}}{{CompatSafari("3.2")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Soporte básico{{CompatAndroid("2.2")}}{{CompatGeckoMobile("1.9.1")}}{{CompatIE("10.0")}}{{CompatNo}}{{CompatOpera("12.0")}}{{CompatSafari("3.1")}}
WOFF{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
WOFF 2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
TrueType{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
OpenType{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Embedded OpenType{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
SVG Font{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Esta característica está implementada bajo la preferencia gfx.downloadable_fonts.woff2.enabled, inicialmente con valor predeterminado de false. A partir de Gecko 39.0 {{geckoRelease("39.0")}}, esta preferencia tiene valor predeterminado de true.

+ +

[2] Esta característica aun no está implementada. Véase {{bug("119490")}}.

diff --git a/files/es/web/css/@font-face/unicode-range/index.html b/files/es/web/css/@font-face/unicode-range/index.html new file mode 100644 index 0000000000..61638788ac --- /dev/null +++ b/files/es/web/css/@font-face/unicode-range/index.html @@ -0,0 +1,86 @@ +--- +title: unicode-range +slug: Web/CSS/@font-face/unicode-range +tags: + - CSS + - Experimental + - Layout + - Reference +translation_of: Web/CSS/@font-face/unicode-range +--- +
{{cssref}}
+ +

La regla CSS unicode-range especifica un rango específico de caracteres a ser usados por una fuente definida  {{cssxref("@font-face")}} y hacerla disponible para su uso en la página actual. Si la página no usa algún caracter en ese rango, la fuente no es descargada; si usa al menos uno de ellos, la fuente es descargada.

+ +

El propósito de esta regla es permitir a las fuente ser segmentados, así el navegador solo necesita descargar la fuente necesitada para el contexto de texto en una página en particular. Por ejemplo, un sitio con muchas localizaciones podría proveer fuentes separadas para el inglés, griego y japonés. Para los usuarios que ven la versión en inglés de la página, las fuentes para el griego y el japonés no son necesarias, y por lo tanto no se descargan, ahorrando ancho de banda.

+ +

Sintaxis

+ +
/* valores <unicode-range> */
+unicode-range: U+26;               /* un único código */
+unicode-range: U+0-7F;
+unicode-range: U+0025-00FF;        /* rango de códigos */
+unicode-range: U+4??;              /* rango por expresión */
+unicode-range: U+0025-00FF, U+4??; /* multiples valores */
+
+ +

Valores

+ +
+
un único código
+
Un único código de caracter Unicode, por ejemplo U+26.
+
un rango de código
+
Un rango de códigos de caracter Unicode. Asi que, por ejemplo, U+0025-00FF significa incluir todos caracteres en el rango U+0025 a U+00FF.
+
rango por expresión
+
Un rango de códigos Unicode que contienen caracteres comodín, usando el caracter '?', asi que, por ejemplo U+4?? significa incluir todos los caracteres en el rango U+400 a U+4FF.
+
+ +

Ejemplos

+ +

Hemos creado una etiqueta HTML que contiene un elemento {{HTMLElement("div")}}, que incluye un simbolo &, el cual queremos que se muestre con una fuente diferente. Para hacerlo obvio,  usaremos una fuente sans-serif, Helvetica para el texto, y una fuente serif, Times New Roman, para el caracter &.

+ +
+
<div>Me & You = Us</div>
+
+ +

En el CSS, puedes ver que en efecto estamos definiendo una separación completa {{cssxref("@font-face")}} el cual solo incluye un caracter, significando que solo ese caracter será estilizado con esa fuente. Podríamos haber hecho esto tambien encapsulando el caracter & en un elemento {{HTMLElement("span")}} y aplicando una fuente solo a ese elemento, pero esto es un elemento y una regla extra.

+ +
+
@font-face {
+  font-family: 'Ampersand';
+  src: local('Times New Roman');
+  unicode-range: U+26;
+}
+
+div {
+  font-size: 4em;
+  font-family: Ampersand, Helvetica, sans-serif;
+}
+ +

Reultado

+ +

What the example should looks like if your browser supports it.

+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.at-rules.font-face.unicode-range")}}

diff --git a/files/es/web/css/@font-feature-values/index.html b/files/es/web/css/@font-feature-values/index.html new file mode 100644 index 0000000000..7966f7433e --- /dev/null +++ b/files/es/web/css/@font-feature-values/index.html @@ -0,0 +1,134 @@ +--- +title: '@font-feature-values' +slug: Web/CSS/@font-feature-values +tags: + - CSS + - Fuentes + - Referencia + - Regla-at +translation_of: Web/CSS/@font-feature-values +--- +
{{CSSRef}}
+ +

Resumen

+ +

La regla-at CSS @font-feature-values permite a los autores usar un nombre común de {{cssxref("font-variant-alternates")}} para características activadas de distintas formas en OpenType. Permite simplificar el código CSS cuando se usan distintas fuentes.

+ +
@font-feature-values Font One { /* Cómo activar nice-style en Font One */
+  @styleset {
+    nice-style: 12;
+  }
+}
+
+@font-feature-values Font Two { /* Cómo activar nice-style en Font Two */
+  @styleset {
+    nice-style: 4;
+  }
+}
+
+…
+
+.nice-look { font-variant-alternates: styleset(nice-style); } /* Independiente de la fuente */
+
+ +

La regla-at @font-feature-values debe ser usada en la parte superior de la hoja de estilos, pero también dentro de Grupos de reglas condicionales.

+ +

Sintaxis

+ +

Bloques de valores de características

+ +
+
@swash
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "swash()", "#swash()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de swash permite solo un valor: ident1: 2 es válido con ident2: 2 4 no lo es.
+
@annotation
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de annotation permite solo un valor: ident1: 2 es válido con ident2: 2 4 no lo es.
+
@ornaments
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de ornaments permite solo un valor: ident1: 2 es válido con ident2: 2 4 no lo es.
+
@stylistic
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylistic permite solo un valor: ident1: 2 es válido con ident2: 2 4 no lo es.
+
@styleset
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de stylset permite una cantidad ilimitada de valores: ident1: 2 4 12 1 corresponden a los valores OpenType ss02, ss04, ss12, ss01. Nótese que los valores superiores a 99 son válidos, pero no corresponden a ningún valor OpenType y serán ignorados.
+
@character-variant
+
Especifica el nombre de una característica que trabajará con la notación funcional {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} de {{cssxref("font-variant-alternates")}}. La definición de un valor de character-variant permite uno o dos valores: ident1: 2  corresponde a cv02=1 y ident2: 2 4 corresponde a cv02)4 e ident2: 2 4 5 no es válido.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}{{Spec2('CSS3 Fonts')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("34")}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("34")}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implementación experimental de las extensiones CSS Fonts Nivel 3 estaba disponible desde Gecko 24. Estaba regido por la preferencia layout.css.font-features.enabled con valor predeterminado true en Nightly y Aurora solamente.

+ +

Véase también

+ + diff --git a/files/es/web/css/@import/index.html b/files/es/web/css/@import/index.html new file mode 100644 index 0000000000..145304cf70 --- /dev/null +++ b/files/es/web/css/@import/index.html @@ -0,0 +1,118 @@ +--- +title: '@import' +slug: Web/CSS/@import +translation_of: Web/CSS/@import +--- +

{{CSSRef}}

+ +

Resumen

+ +

La regla-at CSS @import  permite importar reglas desde otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto a las reglas {{ cssxref("@charset") }}; como esto no es una declaración anidada, no puede ser usado dentro de grupos condicionales de reglas-at.

+ +

Para que los agentes de usuario puedan evitar recuperar recursos para tipos de medios no soportados, los autores pueden especificar reglas dependientes del tipo de medio @import. Estas condiciones @import se especifican separando por una coma las consultas de medios (media query) despues de la url. En la ausencia de cualquier consulta de medios (media query), la importación es incondicional. Especificando  all para el medio tiene el mismo efecto.

+ +

Sintaxis

+ +
@import url;                      or
+@import url list-of-media-queries;
+
+ +

Dónde :

+ +
+
url
+
es una {{cssxref("<string>")}} o un {{cssxref("<uri>")}}
+
Representa la ubicación del recurso a importar. La url puede ser absoluta o relativa.
+
list-of-media-queries
+
Es una lista separada por comas de consultas de medios (media query) que condicionan la aplicación de las reglas CSS definidas en el enlace url. Si el navegador no soporta cualquiera de estos consultas de medios (media query),  ni siquiera cargará el recurso vinculado.
+
+ +

Ejemplos

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+@import 'custom.css';
+@import "common.css" screen, projection;
+@import url('landscape.css') screen and (orientation:landscape);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Media Queries', '#media0', '@import') }}{{ Spec2('CSS3 Media Queries') }}Extiende la sintaxis para soportar cualquier consultas de medios (media query) y no sólo los tipos de medios simples.
{{ SpecName('CSS2.1', 'cascade.html#at-import', '@import') }}{{ Spec2('CSS2.1') }}Añade soporte para {{cssxref("<string>")}}
+  para denotar la url de una hoja de estilo,
+ y es requerida para insertar la regla @import  en el principio del documento CSS.
{{ SpecName('CSS1', '#the-cascade', '@import') }}{{ Spec2('CSS1') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}5.5{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}5.5{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/es/web/css/@keyframes/index.html b/files/es/web/css/@keyframes/index.html new file mode 100644 index 0000000000..55944c37db --- /dev/null +++ b/files/es/web/css/@keyframes/index.html @@ -0,0 +1,178 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +translation_of: Web/CSS/@keyframes +--- +

{{ CSSRef() }} {{ SeeCompatTable() }}

+ +

Resumen

+ +

La regla arroba @keyframes permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación. Esto le da un control más específico sobre los pasos intermedios de la secuencia de animación que se obtiene al dejar que el navegador maneje todo automáticamente.

+ +
Para utilizar keyframes, se crea una regla de @keyframes con un nombre que es utilizada por la propiedad {{cssxref ("animation-name")}} para que coincida con una animación de keyframe a su lista. Cada regla @keyframes contiene una lista de estilo de selectores de keyframe, cada una de los cuales está compuesto de un porcentaje a lo largo de la animación en la que se produce el keyframe así como un bloque que contiene la información de estilo para ese keyframe.
+ +
 
+ +
Puede listar los keyframes en cualquier orden, éstos serán tratados en el orden en que los porcentajes especificados indican que debe ocurrir.
+ +

Listas válidas de keyframe

+ +
Para obtener una lista de keyframe que sea válida, debe incluir reglas para al menos los tiempos  0% (o desde) y 100% (o hacia) (o sea, los estados inicial y final de la animación). Si ambos desplazamientos de tiempo no se especifican, la declaración keyframe es inválida y no se puede utilizar para la animación.
+ +
 
+ +
Si se incluyen las propiedades que no se pueden animar en sus reglas de keyframe, serán ignoradas, pero las propiedades admitidas todavía estarán animadas.
+ +

Duplicar resolución

+ +
Si existen varios conjuntos de keyframe para un nombre dado, el último encontrado se utiliza. Las reglas de @keyframes no estan en cascada, por lo que nunca las animaciones se conducen en keyframe desde un conjunto de reglas más de uno.
+ +
 
+ +
Si una animación en tiempo compensado dado se duplica, el último keyframe en la regla de @keyframes para que ese porcentaje se utilice para ese frame. No hay una cascada dentro de una regla de @keyframes
+si varios kayframes especifican los valores de los mismos porcentajes.
+ +
+

Cuando las propiedades son dejadas fuera de algunos keyframes

+ +
Cualquier propiedad que no se especifican en cualquier keyframes son interpoladas (con la excepción de aquellas que no pueden ser interpoladas, las que son eliminadas de la animación completamente). Por ejemplo:
+
+ +
@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+
+ +
En este caso, la propiedad {{cssxref ("top")}} anima con los keyframes de 0%, 30% y 100%, y {{cssxref ("left")}} anima utilizando los keyframes 0%, 68%, y 100%.
+ +
 
+ +
Sólo las propiedades que se especifican tanto en el 0% y 100% de keyframe serán animadas; cualquier propiedad no incluido en ambos de los keyframes conservarán su valor de partida para la duración de la secuencia de animación.
+ +

Cuando se define un keyframe varias veces

+ +
La especificación define que si un keyframe se define varias veces, pero no todas las propiedades afectadas se especifican en cada keyframe, sólo los valores especificados en el último keyframe se consideran. Por ejemplo:
+ +
@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+
+ +
+
En este ejemplo, en el 50% del keyframe, el valor utilizado es top: 10px y todos los demás valores en este keyframe se ignoran.
+ +
 
+ +
{{non-standard_inline}} {{fx_minversion_inline ("14")}} los keyframes (fotogramas clave) en cascada son compatibles a partir de Firefox 14. Para el ejemplo anterior, esto significa que en el fotograma clave 50%, el valor left: 20px será considerado. Esto no está definido en la especificación todavía, pero se está discutiendo.
+
+ +

Sintaxis

+ +
@keyframes <identifier> {
+  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
+}
+
+ +

Valores

+ +
+
<identifier>
+
Un nombre que identifica la lista de keyframe. Debe coincidir con el identificador de la producción en la sintaxis del CSS.
+
from
+
Un desplazamiento inicial de 0%.
+
to
+
Un desplazamiento final de 100%.
+
{{cssxref("<percentage>")}}
+
Un porcentaje de las veces aunque la secuencia de la animación en la que el keyframe especifica debe ocurrir.
+
+ +

Ejemplos

+ +

Mira los ejemplos del CSS animations.

+ +

Especificaciones

+ +

Compatibilidad del navegador

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadpComentario
{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}{{ Spec2('CSS3 Animations') }} 
+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012 {{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }} +

{{ CompatUnknown()}}iones

+
+ +

Vease también

+
+ + diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/altura/index.html new file mode 100644 index 0000000000..7cb29fe768 --- /dev/null +++ b/files/es/web/css/@media/altura/index.html @@ -0,0 +1,82 @@ +--- +title: Altura +slug: Web/CSS/@media/altura +tags: + - '@media' + - CSS + - Media Queries + - Referencia + - características media +translation_of: Web/CSS/@media/height +--- +
{{cssref}}
+ +

Las CSS media feature (consulta de medios) height puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para paged media).

+ +

Sintáxis

+ +

La característica height es especificada como un valor {{cssxref("<length>")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes min-height y max-height para consultar valores mínimos y máximos, respectivamente.

+ +

Ejemplo

+ +

HTML

+ +
<div>Watch this element as you resize your viewport's height.</div>
+ +

CSS

+ +
/* Altura exacta */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Altura mínima */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Altura máxima */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Definición inicial. El valor debe ser positivo.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.at-rules.media.height")}}

diff --git a/files/es/web/css/@media/color/index.html b/files/es/web/css/@media/color/index.html new file mode 100644 index 0000000000..462a566a07 --- /dev/null +++ b/files/es/web/css/@media/color/index.html @@ -0,0 +1,80 @@ +--- +title: color +slug: Web/CSS/@media/color +tags: + - CSS + - Referencia +translation_of: Web/CSS/@media/color +--- +

color es una característica CSS relativa al medio de presentación cuyo valor es un  <integer> que contiene el número de bits por componente de color en el dispositivo de salida, o cero si el dispositivivo no es en color.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Media Queries', '#color', 'color')}}{{Spec2('CSS3 Media Queries')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/css/@media/display-mode/index.html b/files/es/web/css/@media/display-mode/index.html new file mode 100644 index 0000000000..91b1d2cce4 --- /dev/null +++ b/files/es/web/css/@media/display-mode/index.html @@ -0,0 +1,90 @@ +--- +title: display-mode +slug: Web/CSS/@media/display-mode +tags: + - '@media' + - CSS + - Media Queries + - Referencia + - características de medio + - consultas de medio + - display + - display-mode + - media feature +translation_of: Web/CSS/@media/display-mode +--- +
{{cssref}}
+ +

La característica de medios (media feature) de CSS display-mode puede ser utilizada para probar el modo de visualización de una aplicación. Puede ser usada para proveer de una experiencia de usuario consistente entre el lanzamiento de un sitio desde una URL y desde un ícono del escritorio.

+ +

La característica corresponde al miembro display del manifiesto de la aplicación web. Ambos aplican al contexto de navegación de nivel más alto y a cualquier hijo del contexto de navegación. La característica de consulta aplica sin importar si el manifiesto de la aplicación web esta presente

+ +

Sintaxis

+ +

La característica display-mode se especifica como un valor de palabra clave elegida de la siguiente lista.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Modo de visualizaciónDescripciónModo de visualización de reserva
fullscreenToda la área disponible de desplegado es usada y ningún agente de usuario {{glossary("chrome")}} es mostrado.standalone
standaloneLa aplicación se vera y sentira como una aplicación independiente. Esto puede incluir que la aplicación tenga una ventana diferente, su propio ícono en el lanzador de aplicaciones, etc. En este modo, el agente de usuario excluirá elementos UI paara controlar la navegación, pero puede incluir otros elementos UI como la barra de estado.minimal-ui
minimal-uiLa aplicación se vera y sentira como una apicación autónoma, pero tendra un conjunto mínimo de elementos UI para controlar la navegación. Los elementos pueden variar por navegador.browser
browserLa aplicación se abre en una pestaña o nueva ventana convencional del navegador, dependiendo del navegador y la plataforma.(none)
+ +

Ejemplo

+ +
@media all and (display-mode: fullscreen) {
+  body {
+    margin: 0;
+    border: 5px solid black;
+  }
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}}{{Spec2('Manifest')}}Definición inicial.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.at-rules.media.display-mode")}}

diff --git a/files/es/web/css/@media/hover/index.html b/files/es/web/css/@media/hover/index.html new file mode 100644 index 0000000000..770d2e7494 --- /dev/null +++ b/files/es/web/css/@media/hover/index.html @@ -0,0 +1,70 @@ +--- +title: hover +slug: Web/CSS/@media/hover +tags: + - '@media' + - CSS + - Consulta de medios + - Media Queires + - Referencia + - característica de medios + - media feature +translation_of: Web/CSS/@media/hover +--- +
{{cssref}}
+ +

La característica de medios CSS hover, puede se utilizada para probar si el mecanismo de entrada primario de un usuario puede flotar sobre los elementos.

+ +

Sintaxis

+ +

La característica hover es especificada como un valor de palabra clave elegida de la siguiente lista.

+ +
+
none
+
El mecanismo de entrada primario no puede flotar o no puede convenientemente flotar (es decir, algunos dispositivos mobiles emulan la flotación cuando el usuario presiona inconvenientemente por bastante rato la pantalla), o no hay mecanismo de puntero primario.
+
hover
+
El mecanismo de entrada primario puede convenientemente flotar sobre los elementos.
+
+ +

Ejemplo

+ +

HTML

+ +
<a href="#">Try hovering over me!</a>
+ +

CSS

+ +
@media (hover: hover) {
+  a:hover {
+    background: yellow;
+  }
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Media Queries', '#hover', 'hover')}}{{Spec2('CSS4 Media Queries')}}Definición inicial.
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("css.at-rules.media.hover")}}

diff --git a/files/es/web/css/@media/index.html b/files/es/web/css/@media/index.html new file mode 100644 index 0000000000..05e5f6ec5a --- /dev/null +++ b/files/es/web/css/@media/index.html @@ -0,0 +1,360 @@ +--- +title: '@media' +slug: Web/CSS/@media +translation_of: Web/CSS/@media +--- +

{{CSSRef}}

+ +

Resumen

+ +

La regla-at CSS @media asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un media query. La regla-at @media puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier grupo de reglas conditionales.

+ +

La regla-at @media puede ser accesible por medio de la interfaz de modelo de objeto {{domxref("CSSMediaRule")}}.

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Un <media-query> está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.

+ +

Tipos de medios

+ +
+
all
+
Aplicable a todos los dispositivos.
+
print
+
Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión. Por favor, consulte la sección de medios paginados, y la sección de Media en el tutorial de Introducción para más información acerca de problemas de formateo específicos para los medios paginados.
+
screen
+
Destinado a principalmente a pantallas de computadora a color.
+
speech
+
Destinado a sintetizadores de voz. Nota: CSS2 tenía un tipo de medio similar llamado 'aural' para este propósito. Vea el apéndice sobre hojas de estilo aural para más detalles.
+
+ +
Nota: CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (tty, tv, projection, handheld, braille, embossed, aural), pero fueron descontinuados en Media Queries 4 y no deben ser usados.
+ +

Características de Medios (media feature)

+ +

Cada característica de medios verifica una característica específica del navegador o dispositivo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NombreResumenNotas
widthAnchura del viewport 
heightAltura del viewport 
aspect-ratioRelación de aspecto anchura-altura del viewport 
orientationOrientación del viewport 
resolutionDensidad de pixeles del dispositivo 
scanProceso de escaneo del dispositivo 
grid¿El dispositivo es un grid o un mapa de bits? 
update-frequencyQué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenidoIncluido en Media Queries Nivel 4
overflow-blockCómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloqueIncluido en Media Queries Nivel 4
overflow-inline¿Puede desplazarse hacia el contenido que excede los límites del viewport?Incluido en Media Queries Nivel 4
colorComponente de número de bits por color del dispositivo, o cero si el dispositivo no es a color. 
color-indexNúmero de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla. 
display-modeModo de visualización de la aplicación, según se especifique en la propiedad display del manifiesto de la aplicación web.Definido en la especificación del Manifiesto de Aplicación Web.
monochromeBits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático. 
inverted-colors¿El agente usuario o el Sistema Operativo está invirtiendo los colores?Incluido en Media Queries Nivel 4
pointer¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es?Incluido en Media Queries Nivel 4
hover¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos?Incluido en Media Queries Nivel 4
any-pointer¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste?Incluido en Media Queries Nivel 4
any-hover¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos?Incluido en Media Queries Nivel 4
light-levelNivel de luz ambiental actualIncluido en Media Queries Nivel 4
scripting¿Se soporta lenguaje de script (p.ej. JavaScript)?Incluido en Media Queries Nivel 4
device-width {{obsolete_inline}}Anchura de la superficie de representación del dispositivoDescontinuado en Media Queries Nivel 4
device-height {{obsolete_inline}}Altura de la superficie de representación del dispositivoDescontinuado en Media Queries Nivel 4
device-aspect-ratio {{obsolete_inline}}Relación de aspecto anchura-altura del dispositivoDescontinuado en Media Queries Nivel 4
-webkit-device-pixel-ratio {{non-standard_inline}}Número de pixeles reales del dispositivo por pixel CSSNo estándar; Específica de WebKit/Blink. De ser posible, use la característica resolution en su lugar.
-webkit-transform-3d {{non-standard_inline}}¿Se soportan {{cssxref("transform", "transformaciones")}} 3D?No estándar; Específica de WebKit/Blink
-webkit-transform-2d {{non-standard_inline}}¿Se soportan {{cssxref("transform", "transformaciones")}} 2D?No estándar; Específica de WebKit
-webkit-transition {{non-standard_inline}}Se soportan {{cssxref("transition", "transiciones")}} CSS?No estándar; Específica de WebKit
-webkit-animation {{non-standard_inline}}¿Se soportan {{cssxref("animation", "animaciones")}} CSS?No estándar; Específica de WebKit
+ +

Ejemplos

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+    body { line-height: 1.4 }
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Compat', '#css-media-queries', 'CSS Media Queries')}}{{Spec2('Compat')}}Estandariza las características -webkit-device-pixel-ratio y -webkit-transform-3d.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Define la sintaxis básica de la regla @media.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Se agregan las características scripting, pointer, hover, light-level, update-frequency, overflow-block, y overflow-inline.
+ Se descontinúan todos los tipos de medios excepto screen, print, speech, y all.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}Sin cambios.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico (all, print, screen)1.0{{ CompatGeckoDesktop(1.7) }}6.09.21.3
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.2{{CompatNo}}
Media features (características de medios)1.0{{ CompatGeckoDesktop(1.7) }}9.09.21.3
Característica display-mode{{CompatUnknown}}{{ CompatGeckoDesktop(47) }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico (all, print, screen)1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
speech{{CompatNo}}{{CompatNo}}{{CompatNo}}9.0{{CompatNo}}
Media features (características de medios)1.0{{ CompatGeckoMobile(1.7) }}{{CompatVersionUnknown}}9.03.1
Característica display-mode{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Véase también

+ + diff --git a/files/es/web/css/@media/pointer/index.html b/files/es/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..f7fca78ca6 --- /dev/null +++ b/files/es/web/css/@media/pointer/index.html @@ -0,0 +1,101 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +translation_of: Web/CSS/@media/pointer +--- +
{{cssref}}
+ +

La caracteristica pointer CSS comprueba si el usuario tiene un dispositivo de puntero (como el ratón), y si es así, cuán preciso es el dispositivo de puntero primario.

+ +
+

Nota: Si quieres comprobar la precisión de cualquier dispositivo apuntador, usa any-pointer en su lugar.

+
+ +

Sintaxis

+ +

La propiedad pointer se especifica como un valor de palabra clave elegido de la lista que figura a continuación.

+ +
+
none
+
El mecanismo de entrada principal no incluye un dispositivo apuntador.
+
coarse
+
El mecanismo primario de entrada incluye un dispositivo de apuntamiento de precisión limitada.
+
fine
+
El mecanismo de entrada principal incluye un dispositivo de apuntamiento preciso.
+
+ +

Ejemplo

+ +

Este ejemplo crea una pequeño checkbox para los usuarios con punteros primarios finos y un gran checkbox para los usuarios con punteros primarios gruesos.

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Mírame!</label>
+ +

CSS

+ +
input[type="checkbox"] {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: solid;
+  margin: 0;
+}
+
+input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    width: 15px;
+    height: 15px;
+    border-width: 1px;
+    border-color: blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    width: 30px;
+    height: 30px;
+    border-width: 2px;
+    border-color: red;
+  }
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

Compatibilidad

+ + + +

{{Compat("css.at-rules.media.pointer")}}

+ +

Ver también

+ + diff --git "a/files/es/web/css/@media/resoluci\303\263n/index.html" "b/files/es/web/css/@media/resoluci\303\263n/index.html" new file mode 100644 index 0000000000..bd2beb4866 --- /dev/null +++ "b/files/es/web/css/@media/resoluci\303\263n/index.html" @@ -0,0 +1,88 @@ +--- +title: Resolución +slug: Web/CSS/@media/resolución +tags: + - Referencia + - resolución +translation_of: Web/CSS/@media/resolution +--- +

resolución es una función de medios de CSS cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<resolution>.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + +
Característica
+ 		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/css/@media/width/index.html b/files/es/web/css/@media/width/index.html new file mode 100644 index 0000000000..a4392047b3 --- /dev/null +++ b/files/es/web/css/@media/width/index.html @@ -0,0 +1,124 @@ +--- +title: width +slug: Web/CSS/@media/width +translation_of: Web/CSS/@media/width +--- +
{{cssref}}
+ +

El width CSS {{cssxref("@media")}} media caracteristica puede ser usada para aplicar estilos basados en el ancho  de el  {{glossary("viewport")}} (o la caja de la pagina, para paged media).

+ +

Syntax

+ +

La característica width es especificada como {{cssxref("<length>")}} valor que representa el ancho de la ventana gráfica. Es una función de rango, lo que significa que también puede usar el prefijo min-width and max-width variantes para consultar valores mínimos y máximos, respectivamente.

+ +

Example

+ +

HTML

+ +
<div>Watch this element as you resize your viewport's width.</div>
+ +

CSS

+ +
/* Exact width */
+@media (width: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Minimum width */
+@media (min-width: 35rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Maximum width */
+@media (max-width: 50rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

Specificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#width', 'width')}}{{Spec2('CSS4 Media Queries')}}The value can now be negative, in which case it computes to false.
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Initial definition. The value must be nonnegative.
+ +

Navegadores Compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChrome +

Firefox (Gecko)

+ 		Internet ExplorerEdgeOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}9.014+{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support56+{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}9.3+
+
diff --git a/files/es/web/css/@namespace/index.html b/files/es/web/css/@namespace/index.html new file mode 100644 index 0000000000..ef48776311 --- /dev/null +++ b/files/es/web/css/@namespace/index.html @@ -0,0 +1,71 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +translation_of: Web/CSS/@namespace +--- +
{{CSSRef}}
+ +

@namespace es una regla que define XML namespace a ser usados en una hoja de estilos CSS. Los namespaces definidos pueden utilizarse para restringir selectores universales, types, y selectores de atributos para seleccionar sólo elementos dentro de ese namespace.La regla @namespace generalmente sólo es útil cuando se trata de documents que contienen múltiples namespace—como HTML5 con SVG o MathML, o XML que mezclamúltiplesvocabularios.

+ +
@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* Esto coincide con todos los elementos XHTML <a>, ya que el XHTML es el namespace por defecto sin prefijo */
+a {}
+
+/* Esto coincide con todos los elementos SVG <a> */
+svg|a {}
+
+/* Esto concuerda con todos los elementos XHTML y SVG <a> elements */
+*|a {}
+ +

Cualquier @namespace debe seguir todas las reglas de @charset y @import, y preceder a todas las demás reglas y declaraciones de estilo de una hoja de estilos.

+ +

Se puede utilizar @namespace para definirun namespace por defecto de una hoja de estilos. Cuando se define un namespace por defecto, todos los selectores universales y tipos (pero no los selectores de atributo, véase la nota a continuación) se aplican únicamente a los elementos de ese namespace

+ +

La regla @namespace también puede usarse para definir un prefijo de namespace. Cuando un selector universal, tipo, o selector de atributo se antepone a un prefijo de un namespace, ese selector sólo coincide si el namespace y el nombre del elemento o atributo coinciden.

+ +

En HTML5, conocidos como elementos externos automaticamente se les asignarán un namespace. Esto significa que los elementos HTML actuarán como si estuvieran en un namespace XHTML (http://www.w3.org/1999/xhtml), incluso si no hay ningún atributo xmlns en ninguna parte del document, y los elementos <svg> y <math> se les asignará un namespace propio (http://www.w3.org/2000/svg and http://www.w3.org/1998/Math/MathML).

+ +
+

Nota: En XML, a menos que se defina un prefijo directamente sobre un atributo (ejemplo., xlink:href), ese atributo no tiene namespace. En otras palabras, los atributos no heredan el namespace del elemento en el que están. Para que coincida con este comportamiento, el namespace por defecto en CSS no se aplica a los selectores de atributos.

+
+ +

Sintaxis

+ +
/* Namespace por defecto */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* Namespace sin prefijo */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";
+ +

Sintaxis oficial

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}Initial definition
+ +

Compatibilidad

+ + + +

{{Compat("css.at-rules.namespace")}}

diff --git a/files/es/web/css/@page/index.html b/files/es/web/css/@page/index.html new file mode 100644 index 0000000000..b13d0eddf7 --- /dev/null +++ b/files/es/web/css/@page/index.html @@ -0,0 +1,129 @@ +--- +title: '@page' +slug: Web/CSS/@page +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

Resumen

+ +

La regla @page es usada para modificar algunas propiedades CSS cuando se va a imprimir una página web. No se pueden cambiar todas las propiedades CSS con @page, solo los márgenes, las líneas viudas, huérfanas y los saltos de página. Cualquier intento de cambiar otra propiedad será ignorada.

+ +

La regla @page puede ser accesada por medio de la interfaz modelo objeto {{domxref("CSSPageRule")}}.

+ +
Nota: La W3C esta discutiendo como manejar las unidades relativas {{cssxref("<length>")}} : vh, vw, vmin, y vmax. Mientras tanto, se recomienda no usarlas en la regla @page.
+ +

Sintaxis

+ +

Descriptores

+ +
+
size
+
Especifica el tamaño y la orientación de la caja objetivo de la página. En general, una caja es representada dentro de una hoja, también indica el tamaño de la hoja destino.
+
+ +
+
marks
+
Añade marcas de corte y/o registro al documento.
+
+ +
+
bleed
+
Especifica la extensión más allá de la caja de página a la que se recorta el procesamiento de página.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Por favor dirígete a las pseudo-classes de @page por ejemplos.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}Agrega los selectores de página:recto y :verso.
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}Ningún cambio desde {{SpecName('CSS2.1')}}, aunque mas reglas CSS pueden ser usadas dentro de @page.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico2.0{{CompatGeckoDesktop("19.0")}}8.06.05.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/@supports/index.html b/files/es/web/css/@supports/index.html new file mode 100644 index 0000000000..4d07fc1afe --- /dev/null +++ b/files/es/web/css/@supports/index.html @@ -0,0 +1,138 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +translation_of: Web/CSS/@supports +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La regla "CSS @supports"asocia un conjunto de declaraciones anidadas en un bloque CSS (que está delimitado por corchetes) con una condición consistente en probar declaraciones de CSS (es decir, pares propiedad-valor, así como conjunciones, disjunciones o negaciones abritrarias sobre ellas). A esas condiciones se le llama condición "soporta" (supports condition).

+ +

@supports otorga la habilidad de realizar consultas que comprueben si ciertas funcionalidades están disponibles (feature query).

+ +

La regla @supports puede ser usada tanto en el nivel superior de una hoja de estilos, como dentro de cualquier regla de grupo condicional y se puede acceder a ella a través del modelo de objetos de CSS {{domxref("CSSSupportsRule")}}.

+ +

Sintaxis

+ +

Una condición "soporta" (supports condition) consiste en una o varias declaraciones combinadas por diferentes operadores lógicos. La precedencia de los operadores puede ser definida usando paréntesis.

+ +

Sintaxis de una declaración

+ +

La expresión más simple es una declaración CSS, es decir el nombre de una propiedad CSS seguida por un valor, separada por dos puntos. La siguiente expresión

+ +
( transform-origin: 5% 5% )
+ +

devuelve "cierto" si la {{ cssxref("transform-origin") }} implementa una sintaxis que reconoce 5% 5% como válida.

+ +

Una declaración CSS está siempre rodeada entre paréntesis.

+ +

El operador "not "

+ +

El operador not puede preceder cualquier expresión para crear una nueva, resultando en la negación de la expresión original. La siguiente expresión

+ +
not ( transform-origin: 10em 10em 10em )
+ +

devuelve "cierto" si {{ cssxref("transform-origin") }} no reconoceo 10em 10em 10em como una sintaxis válida.

+ +

Como cualquier operador, el operador not puede ser aplicado a una declaración de complejidad arbitraria. Los siguientes ejemplos son todas expresiones válidas:

+ +
not ( not ( transform-origin: 2px ) )
+(display: flexbox) and ( not (display: inline-grid) )
+ +
+

Nota: no hay necesidad de encerrar el operador not entre paréntesis cuando se encuentra en el nivel superior. Para combinarlo con otros operadores, como and y or, sí se requieren paréntesis

+
+ +

El operador  "and"

+ +

Partiendo de dos expresiones, el operador and crea una nueva expresión consistente en la conjunción de dos originales; la expresión resultante es verdadera si sólo ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si y sólo si, las dos expresiones son simultáneamente veraderas:

+ +
(display: table-cell) and (display: list-item)
+ +

Varias conjunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:

+ +
(display: table-cell) and (display: list-item) and (display:run-in)
+ +

es equivalente a:

+ +
(display: table-cell) and ((display: list-item) and (display:run-in))
+ +

El operador "or"

+ +

Partiendo de dos expresiones, el operador  or crea una nueva expresión consistente en la disyunción de dos originales; la expresión resultante es verdadera si una o ambas expresiones originales lo son. En este ejemplo, la expresión completa resuelve a true si al menos una de las dos expresiones es veradera:

+ +
( transform-style: preserve ) or ( -moz-transform-style: preserve )
+ +

Varias disyunciones pueden ser yuxtapuestas sin la necesidad de agregar paréntesis:

+ +
( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
+( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )
+ +

es equivalente a:

+ +
( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
+(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))
+ +
+

Nota: cuando se usan and y or, el paréntesis debe ser usado para definir el orden en el cual aplican. Si no, la condición es inválida provocando que se ignore todo el "at-rule" .

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Prueba "soporta" de una propiedad CSS determinada

+ +
@supports (animation-name: test) {
+    … /* specific CSS applied when animations are supported unprefixed */
+    @keyframes { /* @supports being a CSS conditional group at-rule, it can includes other relevant at-rules */
+      …
+    }
+}
+
+ +

Prueba "soporta" de una propiedad CSS determinada o de una versión con prefijo

+ +
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
+}
+
+ +

Prueba "soporta" para propiedades customizadas

+ +
@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
+    … /* specific CSS applied to simulate text-align-last:justify */
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}{{ Spec2('CSS3 Conditional') }}Initial definition.
+ +

Compatibilidad con navegadores

+ +{{Compat("css.at-rules.supports")}} + +

Ver también

+ + diff --git a/files/es/web/css/@viewport/height/index.html b/files/es/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..8389bdb95e --- /dev/null +++ b/files/es/web/css/@viewport/height/index.html @@ -0,0 +1,125 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - Descriptor CSS + - Referencia +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Resumen

+ +

El descriptor CSS height es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.

+ +

Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Dos valores */
+height: 320px 200px;
+
+ +

Valores

+ +
+
auto
+
El valor a usar es calculado con los valores de otros descriptores CSS.
+
<length>
+
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
+
<percentage>
+
Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +
@viewport {
+  height: 500px;
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
diff --git a/files/es/web/css/@viewport/index.html b/files/es/web/css/@viewport/index.html new file mode 100644 index 0000000000..f03aaee77b --- /dev/null +++ b/files/es/web/css/@viewport/index.html @@ -0,0 +1,159 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - Adaptation + - At-rule + - CSS + - Device + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@viewport +--- +

{{CSSRef}}

+ +

Summary

+ +

The @viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.

+ +

Syntax

+ +

A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

+ +

Descriptors

+ +

Browsers are supposed to ignore unrecognized descriptors.

+ +
+
min-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
max-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
width
+
A shorthand descriptor for setting both min-width and max-width
+
min-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
max-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
height
+
A shorthand descriptor for setting both min-height and max-height
+
zoom
+
Sets the initial zoom factor.
+
min-zoom
+
Sets the minimum zoom factor.
+
max-zoom
+
Sets the maximum zoom factor.
+
user-zoom
+
Controls whether or not the user should be able to change the zoom factor.
+
orientation
+
Controls the document's orientation.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support29 (behind a flag) [4]{{CompatNo()}} [2]10 {{property_prefix("-ms")}}11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.429{{CompatNo}} [2]10{{property_prefix("-ms")}}[1]11.10
+ Removed in 15
+ Reintroduced behind a flag in 16		{{CompatNo}} [3]
+
+ +

[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where device-width, when used within @-ms-viewport, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a viewport {{HTMLElement("meta")}} tag, device-width evaluates correctly. According to Microsoft, this bug was fixed in Windows Phone 8 Update 3 (a.k.a. GDR3), although there are some reports that the Lumia Black GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, see Tim Kadlec's blog post "Windows Phone 8 and Device-Width".

+ +

[2]: See {{bug(747754, 'summary')}}

+ +

[3]: See {{webkitbug(95959)}}

+

[4]: See Chromium issue #235457: Enable @viewport on all platforms

+

See also

+ + diff --git a/files/es/web/css/@viewport/width/index.html b/files/es/web/css/@viewport/width/index.html new file mode 100644 index 0000000000..8ff87e0443 --- /dev/null +++ b/files/es/web/css/@viewport/width/index.html @@ -0,0 +1,122 @@ +--- +title: width +slug: Web/CSS/@viewport/width +translation_of: Web/CSS/@viewport +--- +
{{CSSRef}}
+ +

Resumen

+ +

El descriptor CSS width es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.

+ +

Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Ejemplo con un valor de viewport: */
+@viewport {
+    width: 320px;
+}
+
+/* Ejemplo con dos valores de viewport: */
+@viewport {
+    width: 320px, 120px;
+}
+
+
+ +

 

+ +

Valores

+ +
+
auto
+
El valor a usar es calculado con los valores de otros descriptores CSS.
+
<length>
+
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
+
<percentage>
+
Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
+ Removido en 15
+ Reintroducido con una bandera en 16		{{CompatNo}}
+
+ +

 

diff --git a/files/es/web/css/_colon_-moz-broken/index.html b/files/es/web/css/_colon_-moz-broken/index.html new file mode 100644 index 0000000000..a419ae3cbc --- /dev/null +++ b/files/es/web/css/_colon_-moz-broken/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-broken' +slug: 'Web/CSS/:-moz-broken' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-broken' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Resumen

+ +

La pseudo-clase CSS  :-moz-broken  selecciona elementos con enlaces a imágenes no válidos

+ +

Este selector está pensado sobre todo para desarrolladores de temas.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-drag-over/index.html b/files/es/web/css/_colon_-moz-drag-over/index.html new file mode 100644 index 0000000000..5e18bdd1fa --- /dev/null +++ b/files/es/web/css/_colon_-moz-drag-over/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-drag-over' +slug: 'Web/CSS/:-moz-drag-over' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-drag-over' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-drag-over  se usa para editar un elemento cuando se produce un evento de arrasttar (drag) sobre él.

+ +

Síntaxis

+ +
element:-moz-drag-over { propiedades del estilo }
+
+ +

Ejemplo

+ +

CSS

+ +
td:-moz-drag-over {
+  color: red;
+}
+
+ +

HTML

+ +
<table border="1">
+  <tr>
+    <td width="100px" height="100px">Arrastra aquí</td>
+  </tr>
+</table>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

diff --git a/files/es/web/css/_colon_-moz-first-node/index.html b/files/es/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..6bd7cb3460 --- /dev/null +++ b/files/es/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-first-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-first-node representa cualquier elemento que sea el primer nodo hijo de algún otro elemento. Se diferencia de {{Cssxref(":first-child")}} en que  no selecciona al primer hijo si tiene texto (que no sea espacios en blanco) detrás de él.

+ +

Cualquier espacion en blanco al principio del elemento se ignora a la hora de determina cual elemento es :-moz-first-node.

+ +

Síntaxis

+ +
span:-moz-first-node { propiedades del estilo }
+
+ +

Ejemplo

+ +

CSS

+ +
span:-moz-first-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Example", "220", "20")}}

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-focusring/index.html b/files/es/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..95ef9db9c4 --- /dev/null +++ b/files/es/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,90 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - CSS + - NeedsLiveSample + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/:-moz-focusring' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS  :-moz-focusring es similar a la pseudo-clase {{cssxref(":focus")}} , pero sólo selecciona un elemento si éste tiene el foco y el agente de usuario (user-agent) tiene habilitado el mostrar el anillo (borde) alrededor del elemento que actualmente tiene el foco. Si :-moz-focusring selecciona un elemento entonces  :focus también lo selecciona pero esto no se da igual al revés, depende, como se ha dicho anteriormente, de la configuración del agente de usuario. Que un agente de usuario tenga el dibujo del anillo de foco habilitado depende de cosas como la configuración del sistema operativo así que el comportamiento preciso de esta propiedad puede variar de una plataforma a otra dependiendiendo de la configuración de la misma o de la configuración del usuario.

+ +

Síntaxis

+ +
:-moz-focusring
+ +

Ejemplo

+ +

Para especificar la apariencia de un elemento cuando recibe el foco se puede usar este psuedo-selector de la siguiente manera:

+ +
mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+
+ +

Especificaciones

+ +

Esta propiedad todavía no está definida en ninguna especificación, aunque fue debatida en el grupo de trabajo y se decidió añadirla a los selectores 4 o 5.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html new file mode 100644 index 0000000000..3163a3e07e --- /dev/null +++ b/files/es/web/css/_colon_-moz-full-screen-ancestor/index.html @@ -0,0 +1,83 @@ +--- +title: ':-moz-full-screen-ancestor' +slug: 'Web/CSS/:-moz-full-screen-ancestor' +tags: + - CSS + - NeedsExample + - No estandar + - Pseudo clase + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-full-screen-ancestor se aplica a todos los ancestros de el elemento full-screen(pantalla completa) exceptuando los frames (marcos) que pueda contener en los documentos padre, que son los elementos full-screen(pantalla completa) es sus propios documentos. Sin embargo, sí que se aplica la clase a los antecesores de esos elementos.

+ +

Ejemplos

+ +

Necesita un ejemplo

+ +

Compatibilidad con distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("10.0")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además.

+ + diff --git a/files/es/web/css/_colon_-moz-handler-blocked/index.html b/files/es/web/css/_colon_-moz-handler-blocked/index.html new file mode 100644 index 0000000000..3d4569b68d --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-blocked/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-blocked' +slug: 'Web/CSS/:-moz-handler-blocked' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-blocked' +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}

+ +

Resumen

+ +

:-moz-handler-blocked selecciona elementos que no pueden ser mostrado por haber sido sus manejadores bloqueados.

+ +

Es útil principalmente para los desarrolladores de temas.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-handler-crashed/index.html b/files/es/web/css/_colon_-moz-handler-crashed/index.html new file mode 100644 index 0000000000..406cd7c72d --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-crashed/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-crashed' +slug: 'Web/CSS/:-moz-handler-crashed' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-crashed' +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}

+ +

Resumen

+ +

:-moz-handler-crashed selecciona elementos que no pueden ser mostrados porque el plugin para dibujarlos ha dejado de funcionar.

+ +

Es útil principalmente para  los desarrolladores de temas.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-handler-disabled/index.html b/files/es/web/css/_colon_-moz-handler-disabled/index.html new file mode 100644 index 0000000000..f69c0d7ca3 --- /dev/null +++ b/files/es/web/css/_colon_-moz-handler-disabled/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-disabled' +slug: 'Web/CSS/:-moz-handler-disabled' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-handler-disabled' +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("1.9.1") }}

+ +

Resumen

+ +

:-moz-handler-disabled selecciona elementos que no pueden ser mostrados porque sus manejadores han sido deshabilitados por el usuario.

+ +

Es útil principalmente para desarrolladores de temas.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-last-node/index.html b/files/es/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..a857fcd9df --- /dev/null +++ b/files/es/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-last-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-last-node selecciona un elemento si es el último nodo hijo de algún otro elemento. Se diferencia de {{cssxref(":last-child")}} en que no selecciona el último elemento hijo si tiene texto (sin contar espacios en blanco) después de él.

+ +

Cualquier espacio en blanco al final de un elemento se ignora al usar :-moz-last-node.

+ +

Síntaxis

+ +
span:-moz-last-node {propiedades del estilo }
+
+ +

Ejemplo

+ +

CSS

+ +
span:-moz-last-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Example", "220", "20")}}

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-list-bullet/index.html b/files/es/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..07415595a9 --- /dev/null +++ b/files/es/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,46 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El  pseudo-elemento CSS no-estándar de Mozilla ::-moz-list-bullet  se usa para establecer el estilo para los iconos que preceden a los elemento de una lista.

+ +

Síntaxis

+ +
li::-moz-list-bullet { propiedades del estilo }
+ +

Ejemplo

+ +

HTML

+ +
<ul>
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+
+<ul class="list">
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+
+ +

CSS

+ +
.list ::-moz-list-bullet { font-size: 36px; }
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/:-moz-list-bullet') }}

+ +

 

diff --git a/files/es/web/css/_colon_-moz-list-number/index.html b/files/es/web/css/_colon_-moz-list-number/index.html new file mode 100644 index 0000000000..31747f5fe1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-list-number/index.html @@ -0,0 +1,45 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/:-moz-list-number' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Pseudo-elemento + - Referencia CSS +translation_of: 'Web/CSS/:-moz-list-number' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El  pseudo-elemento CSS ::-moz-list-number te permite personalizar la apariencia de los números de los elementos de lista  ({{HTMLElement("li")}}) en listas que sean listas ordenadas ({{HTMLElement("ol")}}).

+ +

Síntaxis

+ +
li::-moz-list-number { style properties }
+
+ +

Ejemplo

+ +

CSS

+ +
li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+
+ +

HTML

+ +
<ol>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ol>
+
+ +

Resultado

+ +

moz-list-number.png
+ {{EmbedLiveSample("Example")}}

diff --git a/files/es/web/css/_colon_-moz-loading/index.html b/files/es/web/css/_colon_-moz-loading/index.html new file mode 100644 index 0000000000..ba3eaff1c6 --- /dev/null +++ b/files/es/web/css/_colon_-moz-loading/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-loading' +slug: 'Web/CSS/:-moz-loading' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-loading' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-loading selecciona elementos que no pueden mostrarse porque no aún no se han empezado a cargar, elementos como imágenes que todavía no han empezado a llegar. Destacar que las imágenes que están en proceso de carga no son seleccionadas por esta pseudo-clase.

+ +

Principalmente es útil para desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html new file mode 100644 index 0000000000..a626dc93ee --- /dev/null +++ b/files/es/web/css/_colon_-moz-locale-dir(ltr)/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-locale-dir(ltr)' +slug: 'Web/CSS/:-moz-locale-dir(ltr)' +tags: + - CSS + - Localización + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +--- +
{{Non-standard_header}}{{CSSRef}} {{gecko_minversion_header("1.9.2")}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-locale-dir(ltr)  selecciona un elemento si el interfaz del usuario se está mostrando de izquierda a derecha. Esto viene determinado cuando la opción de las preferencias  intl.uidirection.locale (donde  locale es la localización de idioma actual) está estáblecido a "ltr".

+ +

Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña.  Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.

+ +

Este selector no funciona adecuadamente en HTML; siempre selecciona no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html new file mode 100644 index 0000000000..8fdb2f9dfd --- /dev/null +++ b/files/es/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -0,0 +1,33 @@ +--- +title: ':-moz-locale-dir(rtl)' +slug: 'Web/CSS/:-moz-locale-dir(rtl)' +tags: + - CSS + - Localización + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-locale-dir(rtl)  selecciona un elemento si el interfaz del usuario se está mostrando de derecha a izquierda. Esto viene determinado cuando la opción de las preferencias  intl.uidirection.locale (donde  locale es la localización de idioma actual) está estáblecida a "rtl".

+ +

Esto permite que extensiones (y temas) puedan fácilmente adaptar su interfaz de usuario dependiendo de las necesidades del usuario en relación a la localización.Puede variar de ventana a ventana e incluso de pestaña a pestaña.  Permite que las extensiones funcionen incluso si no soportan esa preferencia del usuario, siempre que puedan soportar izquierda-derecha o derecha-izquierda, sin preocuparse de las necesidades específicas con respecto a la localización.

+ +

Este selector no funciona adecuadamente en HTML; nunca selecciona nada, no importa si la localización del UI (Interfaz de Usuario) sea izquierda a derecha (left-to-right) o derecha a izqauierda (right-to-left).

+ +

 

+ +

Ver además

+ +

 

+ + diff --git a/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html new file mode 100644 index 0000000000..16421aa6f1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme-brighttext/index.html @@ -0,0 +1,24 @@ +--- +title: ':-moz-lwtheme-brighttext' +slug: 'Web/CSS/:-moz-lwtheme-brighttext' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase :-moz-lwtheme-brighttext es seleccionada en los documentos chrome cuando  {{cssxref(":-moz-lwtheme")}} es true (verdadero) y se ha seleccionado un tema ligero con un color de texto brillante.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html new file mode 100644 index 0000000000..4cc595e8d1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme-darktext/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-lwtheme-darktext' +slug: 'Web/CSS/:-moz-lwtheme-darktext' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS + - Temas +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Resumen

+ +

La pseudo-clase :-moz-lwtheme-darktext es seleccionada en los documentos chrome cuando  {{cssxref(":-moz-lwtheme")}} es verdadero (true) y se ha seleccionado un tema ligero con un color de texto oscuro.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-lwtheme/index.html b/files/es/web/css/_colon_-moz-lwtheme/index.html new file mode 100644 index 0000000000..7ce4770c52 --- /dev/null +++ b/files/es/web/css/_colon_-moz-lwtheme/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-lwtheme' +slug: 'Web/CSS/:-moz-lwtheme' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS + - Temas + - Temas Ligeros +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase :-moz-lwtheme es verdadera y seleccionada en los documento chrome cuando el atributo {{xulattr("lightweightthemes")}} del elemento raíz es true (verdadero) y se ha seleccionado un tema

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-only-whitespace/index.html b/files/es/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..9c8f5e89ec --- /dev/null +++ b/files/es/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,36 @@ +--- +title: ':-moz-only-whitespace' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Pseudo-clase + - Referencia CSS +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-class CSS:-moz-only-whitespace selecciona un elemento si no tiene ningún hijo, o bien nodos textos vacíos o bien nodos texto que sólo contienen espacios en blanco. Sólo cuando hay elementos o nodos texto con uno o más caracteres dentro, el elemento no será seleccionado por esta pseudo-clase.

+ +

Síntaxis

+ +
span:-moz-only-whitespace { propiedades del estilo }
+
+ +

Ejemplo

+ +

CSS

+ +
span:-moz-only-whitespace::before {
+  background-color: lime;
+}
+ +

HTML

+ +
<span> </span>
+
+ +

{{EmbedLiveSample("Example", "50", "20")}}

diff --git a/files/es/web/css/_colon_-moz-placeholder/index.html b/files/es/web/css/_colon_-moz-placeholder/index.html new file mode 100644 index 0000000000..a3e0afd5b0 --- /dev/null +++ b/files/es/web/css/_colon_-moz-placeholder/index.html @@ -0,0 +1,122 @@ +--- +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' +--- +
Nota: La pseudo-clase CSS :-moz-placeholder está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.
+ +
Nota:  El CSSWG ha decidido introducir  :placeholder-shown. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}
+ +
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase :-moz-placeholder representa a cualquier elemento que muestre un  texto del marcador de posición (placeholder). Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,

+ +

Ejemplo

+ +

Ejemplo básico

+ +

Este ejemplo le da estilo a un placeholder (marcador de posición) haciendo que el color del texto sea verde.

+ +
<!doctype html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input::-moz-placeholder {
+      color: green;
+    }
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

{{EmbedLiveSample("Basic_example")}}

+ +

Desbordamiento

+ +

En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y  es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS text-overflow: ellipsis para envolverlo.

+ +
input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementado en {{bug("457801")}}.

+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-submit-invalid/index.html b/files/es/web/css/_colon_-moz-submit-invalid/index.html new file mode 100644 index 0000000000..75cd48a3f0 --- /dev/null +++ b/files/es/web/css/_colon_-moz-submit-invalid/index.html @@ -0,0 +1,76 @@ +--- +title: ':-moz-submit-invalid' +slug: 'Web/CSS/:-moz-submit-invalid' +tags: + - CSS + - No estandar + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:-moz-submit-invalid' +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +

Resumen

+ +

La pseudo-clase CSS :-moz-submit-invalid  representa cualquier botón de enviar de formularios cuyos contenidos no sean válidos conforme a las  restricciones de validación HTML.

+ +

Por defecto no se aplica ningún estilo. Puedes usar tu estilo para personalizar la apariencia del botón de enviar cuando existen campos no válidos en el formulario.

+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatNo() }}{{ CompatGeckoDesktop("2") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo() }}{{ CompatGeckoMobile("2") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-suppressed/index.html b/files/es/web/css/_colon_-moz-suppressed/index.html new file mode 100644 index 0000000000..554a4c55d8 --- /dev/null +++ b/files/es/web/css/_colon_-moz-suppressed/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-suppressed' +slug: 'Web/CSS/:-moz-suppressed' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-suppressed' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Resumen

+ +

La  pseudo-clase CSS:-moz-suppressed selecciona elementos que representan a imágenes que no han sido cargadas por estar bloqueado el sitio del que provienen.

+ +

Este selector está pensado sobre todo para los desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html b/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html new file mode 100644 index 0000000000..b99e17b59f --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(images-in-menus)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-system-metric(images-in-menus)' +slug: 'Web/CSS/:-moz-system-metric(images-in-menus)' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus' +--- +
{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}
+ +

Resumen

+ +

La   pseudo-class CSS :-moz-system-metric(images-in-menus) selecciona un elemento si el interfaz de usuario del equipo soporta imágenes en menús.

+ +

Está pensado sobre todo para desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html b/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html new file mode 100644 index 0000000000..981760b5de --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-system-metric(mac-graphite-theme)' +slug: 'Web/CSS/:-moz-system-metric(mac-graphite-theme)' +tags: + - CSS + - NeedsCompatTable + - No estandar + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-system-metric(mac-graphite-theme) seleccionará cualquier elemento si el usuario ha elegido la apariencia "Graphite" en el panel de preferencias  "Appearance"  dentro de la sección de preferencias de sistema de Mac OS X.

+ +

Este selector está pensado sobre todo para desarrolladores de temas

+ +

Ejemplos

+ +

Demo

+ +

Bugzilla

+ +

{{Bug(448767)}}

diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html new file mode 100644 index 0000000000..00239c5bd1 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-backward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-system-metric(scrollbar-end-backward) seleccionará un elemento  si el interfaz de usuario del equipo incluye un botón de flecha hacia atrás al final de las barras de desplazamiento o barras de scroll.

+ +

Está pensado sobre todo para desarrolladores de temas

+ +

Especificaciones

+ +

No es parte de ningún estándar.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html new file mode 100644 index 0000000000..2712092b3c --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-forward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-system-metric(scrollbar-end-forward) seleccionará un elemento si el interfaz de usuario del equpo incluye una flecha hacia adelante al final de las barras de desplazamiento o barras de scroll.

+ +

Está pensado sobre todo para desarrolldores de temas.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html new file mode 100644 index 0000000000..a3a5c21e82 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-backward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS:-moz-system-metric(scrollbar-start-backward) seleccionará un elemento si el interfaz de usuario del equipo incluye una flecha hacia atrás al principio de las barras de desplazamiento o barras de scroll.

+ +

Este selector está pensado sobre todo para desarrolladores de temas.

+ +

Especificaciones

+ +

No es parte de niguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html new file mode 100644 index 0000000000..f309dabd5c --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-forward)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS:-moz-system-metric(scrollbar-start-forward) seleccionará un elemento si el interfaz de usuario del equipo incluye una flecha hacia atrás al principio de las barras de desplazamiento o barras de scroll.

+ +

Este selector está pensado sobre todo para desarrolladores de temas.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html b/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html new file mode 100644 index 0000000000..1cbef2d0ec --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-thumb-proportional)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS:-moz-system-metric(scrollbar-thumb-proportional) seleccionará un elemento si el interfaz de usuario del equipo proporciona miniaturas (thumbnails) proporcionales en las barras de desplazamiento o barras de scroll; es decir, la miniatura o parte arrastrable en la barra de desplazamiento cambia de tamaño para indicar el tamaño relativo del área visible del documento.

+ +

Está pensado sobre todo para desarrolladores de temas.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html b/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html new file mode 100644 index 0000000000..5ee2a63aa2 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(touch-enabled)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(touch-enabled)' +slug: 'Web/CSS/:-moz-system-metric(touch-enabled)' +tags: + - CSS + - NeedsContent + - NeedsExample + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La   pseudo-clase CSS :-moz-system-metric(touch-enabled) seleccionará un elemento si el dispositivo en el cuál se está mostrando el contenido soporta un interfaz táctil.

+ +
Nota: No está pensado para contenido web. Para eso se debería usar la consulta de medios  (media query) -moz-touch-enabled
+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html b/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html new file mode 100644 index 0000000000..8d134cb531 --- /dev/null +++ b/files/es/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html @@ -0,0 +1,113 @@ +--- +title: ':-moz-system-metric(windows-default-theme)' +slug: 'Web/CSS/:-moz-system-metric(windows-default-theme)' +tags: + - CSS + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Psuedo clase CSS + - Referencia CSS +translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-system-metric(windows-default-theme)  selecciona un elemento si el usuario está usando en esos momento uno de los siguientes temas de Windows: Luna, Royale, Zune, or Aero (por ejemplo  Vista Basic, Vista Standard, or Aero Glass). Esto excluye los temas clásicos de Windows y los temas realizados por terceros.

+ +

Este selector está pensado sobre todo para desarrolladores de temas.

+ +

Ejemplo

+ +

Contenido HTML

+ +
<p id="defaultThemes">
+  Este párrafo debería tener un fondo verde con los temas de Windows Luna/Royale/Zune/Aero
+  y un fondo rojo con otros temas.
+</p>
+
+<p id="nonDefaultThemes">
+  Este párrafo debería tener fondo verde con el tema clásico de Window o con temas de terceros
+  y fondo rojo con otros temas
+</p>
+
+<p id="notSupported">La detección de temas no está soportada.</p>
+ +

Contenido CSS

+ +
#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", 170)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("1.9")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementando en {{Bug("426660")}}. Cambió el comportamiento de los temas  Royale y Zone para que funcionaran igual que el tema Luna {{Bug("429176")}}.

diff --git a/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html b/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html new file mode 100644 index 0000000000..c0ef648273 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell-text(hover)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-tree-cell-text(hover)' +slug: 'Web/CSS/:-moz-tree-cell-text(hover)' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text(hover)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header(1.9)}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-tree-cell-text(hover) seleccionará un elemento si el cursor del ratón está actualmente sobre el texto en una celda o elemento del árbol

+ +

Está pensado principalmente para desarrolladores.

diff --git a/files/es/web/css/_colon_-moz-tree-cell-text/index.html b/files/es/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..c6dcc5f378 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Activado por el atributo  properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-cell/index.html b/files/es/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..cf8ee0162c --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,38 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Activado por el attributo  properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + + +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-tree-column/index.html b/files/es/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..62376be975 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Activado por el atributo  properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..320955cddf --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Pseudo clase + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-image/index.html b/files/es/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..65e270ddb5 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,34 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsLiveSample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + + +

Ejemplos

+ +

Bookmark icons in the Places window - Mozillazine Forum

diff --git a/files/es/web/css/_colon_-moz-tree-indentation/index.html b/files/es/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..bce9310aaf --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-line/index.html b/files/es/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..67d05a7b74 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-progressmeter/index.html b/files/es/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..57cdb929bd --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Activado cuando al atributo type se le da el valor progressmeter.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-row(hover)/index.html b/files/es/web/css/_colon_-moz-tree-row(hover)/index.html new file mode 100644 index 0000000000..6a5a723a12 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-row(hover)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-tree-row(hover)' +slug: 'Web/CSS/:-moz-tree-row(hover)' +tags: + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row(hover)' +--- +
{{Non-standard_header}}{{CSSRef}}{{Fx_minversion_header(3)}}
+ +

Resumen

+ +

La   pseudo-clase CSS :-moz-tree-row(hover) seleccionará un elemento si el cursor del ratón está sobre una fila de un árbol.

+ +

Está pensado principalmente para ser usado por desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-tree-row/index.html b/files/es/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..b334d502f9 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,50 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El  pseudo-elemento::-moz-tree-row CSS  se usa para seleccionar filas y para aplicar estilos a las filas de los árboles.

+ +

Elementos asociados

+ + + +

Síntaxis

+ +
treechildren::-moz-tree-row {propiedades de estilo }
+
+ +

Propiedades de estilo

+ + + +

Ejemplos

+ +
treechildren::-moz-tree-row( foo bar )
+{
+    margin: 2%;
+}
+
+ +

...donde...

+ +
  <treerow properties="foo">...</treerow>
+
diff --git a/files/es/web/css/_colon_-moz-tree-separator/index.html b/files/es/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..c3d15f89f8 --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-tree-twisty/index.html b/files/es/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..80f03fadec --- /dev/null +++ b/files/es/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,33 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +

{{ CSSRef() }}{{Non-standard_header}}

+ +

Activado por el atributo properties.

+ +

Elementos asociados

+ + + +

Propiedades de estilo

+ + diff --git a/files/es/web/css/_colon_-moz-ui-invalid/index.html b/files/es/web/css/_colon_-moz-ui-invalid/index.html new file mode 100644 index 0000000000..6f12ca97a6 --- /dev/null +++ b/files/es/web/css/_colon_-moz-ui-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo clase + - Referencia CSS +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-ui-invalid representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene  restricciones de validación y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::

+ + + +

El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").

+ +

Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-ui-valid/index.html b/files/es/web/css/_colon_-moz-ui-valid/index.html new file mode 100644 index 0000000000..0e49681290 --- /dev/null +++ b/files/es/web/css/_colon_-moz-ui-valid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-valid' +slug: 'Web/CSS/:-moz-ui-valid' +tags: + - CSS + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo clase CSS + - Referencia CSS +translation_of: 'Web/CSS/:-moz-ui-valid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS:-moz-ui-valid CSS representa cualquier elemento de un formulario cuyo valor es válido atendiendo a sus  restricciones de validación.

+ +

Se aplica siguiendo las siguientes reglas:

+ + + +

El resultado es que, si el control era válido cuando el usuario empieza a interactuar con él, el estilo de validación sólo se cambia cuando el usuario cambia el foco a otro control. Sin embargo, si el usuario está intentando corregir un campo que previamente se ha marcado como un valor inválido, cuando el control sea ya correcto esto se mostrará de manera inmediata. Los elementos requeridos sólo se marcan como inválidos si el usuario lo cambia o si lo intenta enviar con un valor inválido.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-moz-user-disabled/index.html b/files/es/web/css/_colon_-moz-user-disabled/index.html new file mode 100644 index 0000000000..b7749f1a29 --- /dev/null +++ b/files/es/web/css/_colon_-moz-user-disabled/index.html @@ -0,0 +1,18 @@ +--- +title: ':-moz-user-disabled' +slug: 'Web/CSS/:-moz-user-disabled' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Referencia CSS +translation_of: 'Web/CSS/:-moz-user-disabled' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Resumen

+ +

La pseudo-class CSS :-moz-user-disabled selecciona imágenes que no fueron cargadas porque en las preferencias del usuario las imagenes han sido totalmente desahabilitadas.

+ +

Está pensado para que, sobre todo, sea usado por desarrolladores de temas.

diff --git a/files/es/web/css/_colon_-moz-window-inactive/index.html b/files/es/web/css/_colon_-moz-window-inactive/index.html new file mode 100644 index 0000000000..e22e734842 --- /dev/null +++ b/files/es/web/css/_colon_-moz-window-inactive/index.html @@ -0,0 +1,99 @@ +--- +title: ':-moz-window-inactive' +slug: 'Web/CSS/:-moz-window-inactive' +tags: + - CSS + - 'CSS:Extensiones Mozilla' + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/:-moz-window-inactive' +--- +
{{CSSRef}}
+ +

Resumen

+ +

La pseudo-clase CSS :-moz-window-inactive selecciona cualquier elemento mientras está en una ventana inactiva.

+ +
Nota: Antes de añadir esta pseudo-clase, dar  dieferentes estilos a las ventanas de fondo podría lograrse con el atributo (active="true") en la venta del nivel superior XUL. Este atributo ya no se usa.
+ +

:-moz-window-inactive funciona también en documentos de contenido HTML.

+ +

Ejemplo

+ +

Este ejemplo modifica la apariencia del fondo de una caja dependiendo de si está o no en una ventana activa.

+ +
<style type="text/css">
+#mybox {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#mybox:-moz-window-inactive {
+  background: cyan;
+}
+</style>
+
+<div id="mybox" style="width:200px; height:200px;">
+  <p>This is a box!</p>
+</div>
+
+ +

Puedes verlo aquí en un ejemplo en directo.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop(2)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implementado en {{bug("508482")}}.

diff --git a/files/es/web/css/_colon_-ms-input-placeholder/index.html b/files/es/web/css/_colon_-ms-input-placeholder/index.html new file mode 100644 index 0000000000..a2be7fcf59 --- /dev/null +++ b/files/es/web/css/_colon_-ms-input-placeholder/index.html @@ -0,0 +1,111 @@ +--- +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' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase propietaria y no estándar  :-ms-input-placeholder representa el  texto del marcador de posición (placeholder) de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.

+ +

Ejemplo

+ +

El siguiente ejemplo destaca con un estilo personalizado los campos "Branch" y código "ID". El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.

+ +

HTML

+ +
<form id="test">
+  <p><label>Enter Student Name: <input id="name" placeholder="Student Name"/></label></p>
+  <p><label>Enter Student Branch: <input id="branch" placeholder="Student Branch" /></label></p>
+  <p><label>Enter Student ID: <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /></label></p>
+  <input type="submit" />
+</form>
+ +

CSS

+ +
input {
+   background-color:#E8E8E8;
+   color:black; }
+/* placeholder only style */
+input.studentid:-ms-input-placeholder {
+   font-style:italic;
+   color: red;
+   background-color: yellow;
+}
+ +

Resultado

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación aunque  Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_-webkit-autofill/index.html b/files/es/web/css/_colon_-webkit-autofill/index.html new file mode 100644 index 0000000000..98c1c68215 --- /dev/null +++ b/files/es/web/css/_colon_-webkit-autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-webkit-autofill CSS selecciona un elemento {{HTMLElement("input")}} cuando su valor es rellenado automáticamente por el navegador.

+ +

Nota: La hoja de estilos por defecto de muchos navegadores usan !important en sus declaraciones de estilo  :-webkit-autofill , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_active/index.html b/files/es/web/css/_colon_active/index.html new file mode 100644 index 0000000000..7dc6934848 --- /dev/null +++ b/files/es/web/css/_colon_active/index.html @@ -0,0 +1,97 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

La pseudo-clase :active de CSS  representa un elemento (como un botón) que el usuario está activando.  Cuando se usa un mouse, la "activación" generalmente comienza cuando el usuario presiona el botón primario del mouse y termina cuando se suelta. La pseudo-clase :active se usa comúnmente en los elementos {{HTMLElement("a")}} y {{HTMLElement("button")}}, pero también se puede usar en otros elementos.

+ +
/* Selecciona cualquier <a> que esté siendo activado */
+a:active {
+  color: red;
+}
+ +

Los estilos definidos por la pseudoclase :active serán anulados por cualquier pseudoclase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :active después de todas las demás reglas relacionadas con el enlace, tal como lo define el orden LVHA: :link — :visited — :hover — :active.

+ +
Nota: En los sistemas con los ratones de varios botones, CSS3 especifica que la pseudo-clase :active sólo debe aplicarse al botón primario; en ratones diestros, este suele ser el botón más a la izquierda.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<a href="#">Este enlace cambiará a color lima mientras hace clic en él.</a>
+
+ +

CSS

+ +
a:link { color: blue; }          /* Enlaces no visitados */
+a:visited { color: purple; }     /* Enlaces visitados */
+a:hover { background: yellow; }  /* El usuario esta sobre el enlace */
+a:active { color: lime; }        /* Enlaces activos */
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Ningún cambio.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Ningún cambio.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("css.selectors.active")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_any-link/index.html b/files/es/web/css/_colon_any-link/index.html new file mode 100644 index 0000000000..00c8a94bda --- /dev/null +++ b/files/es/web/css/_colon_any-link/index.html @@ -0,0 +1,78 @@ +--- +title: ':any-link' +slug: 'Web/CSS/:any-link' +tags: + - CSS + - Diseño + - Experimental + - Presentación + - Pseudo-Clase CSS + - Referencia + - Web +translation_of: 'Web/CSS/:any-link' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +
La pseudo-clase :any-link de CSS representa a un elemento que actúa como el ancla origen de un hipervínculo independientemente de si ha sido visitado, es decir, coincide con cualquier elemento {{HTMLElement("a")}}, {{HTMLElement("area")}} o {{HTMLElement("link")}} con un atributo href. Por lo tanto, coincide con todos los elementos que coincidan con {{cssxref(":link")}} o {{cssxref(":visited")}}.
+ +
+ +
/* Selecciona cualquier elemento que coincida con :link o :visited */
+:any-link {
+  color: green;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
<a href="https://example.com">Enlace externo</a><br>
+<a href="#">Enlace de destino interno</a><br>
+<a>Enlace de marcador de posición (no se personalizará)</a>
+ +

CSS

+ +
a:any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+
+/* navegadores WebKit */
+a:-webkit-any-link {
+  border: 1px solid blue;
+  color: orange;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("CSS4 Selectors", "#the-any-link-pseudo", ":any-link")}}{{Spec2('CSS4 Selectors')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.any-link")}}

+ +
diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_any/index.html new file mode 100644 index 0000000000..b65249dfe3 --- /dev/null +++ b/files/es/web/css/_colon_any/index.html @@ -0,0 +1,186 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-Clase CSS + - Referencia +translation_of: 'Web/CSS/:is' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Resumen

+ +

La pseudo-clase :any() permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.

+ +
Nota: Esta pseudo-clase está en progreso de ser estandarizada en Selectores CSS Nivel 4 bajo el nombre :matches(). Es probable que la sintaxis y el nombre de :-vendor-any() sean cambiados para reflejar el estándar en el futuro próximo.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
selector
+
Un selector. Puede ser un selector simple o un selector múltiple, comprendido de selectores simples de CSS 3, y puede incluir el combinador descendiente.
+
+ +
Nota: Los selectores pueden no contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
+ +

Ejemplos

+ +

Por ejemplo, el siguiente CSS:

+ +
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

Puede ser reemplazado con:

+ +
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

Sin embargo, no se debe usar lo siguiente: (Véase la sección de rendimiento abajo.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notas

+ +

Esto es particularmente útil al tratar con secciones y encabezados de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar :any().

+ +

Por ejemplo, sin :any(), estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:

+ +
/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Nivelo 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... ni siquiera lo pienses*/
+
+ +

Usando :-any(), en cambio, es mucho más fácil:

+ +
/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Nivel 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Nivel 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Problemas con rendimiento y especificidad

+ +

Bug 561154 sigue un problema con Gecko donde la especificidad de :-moz-any() es incorrecta. La implementación hasta Firefox 12 pone a :-moz-any() en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.

+ +

Por ejemplo

+ +
.a > :-moz-any(.b, .c)
+
+ +

es más lento que:

+ +
.a > .b, .a > .c
+
+ +

y lo siguiente es rápido:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/es/web/css/_colon_blank/index.html b/files/es/web/css/_colon_blank/index.html new file mode 100644 index 0000000000..8545c5ce04 --- /dev/null +++ b/files/es/web/css/_colon_blank/index.html @@ -0,0 +1,54 @@ +--- +title: ':blank' +slug: 'Web/CSS/:blank' +tags: + - ':blank' + - Borrador + - CSS + - Experimental +translation_of: 'Web/CSS/:blank' +--- +

{{CSSRef}}{{Draft}}{{SeeCompatTable}}

+ +
+

Nota: El selector :blank esta considerado en riesgo, puesto que la CSSWG sigue haciendo cambios.

+ +

Ver CSSWG issue #1967.

+
+ +

La pseudo-clase CSS :blank selecciona elementos de entrada vaciós (eg. {{HTMLElement("input")}} or {{HTMLElement("textarea")}}).

+ +

Sintáxis

+ +
{{CSSSyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Selectors", "#blank-pseudo", ":blank")}}{{Spec2("CSS4 Selectors")}}Definición inicial
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("css.selectors.blank")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_checked/index.html b/files/es/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..fd5bb8e13c --- /dev/null +++ b/files/es/web/css/_colon_checked/index.html @@ -0,0 +1,197 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:checked' +--- +
{{ CSSRef() }}
+ +

La pseudo-clase :checked de CSS representa cualquier radio (<input type="radio">), checkbox (<input type="checkbox">) u option ({{ HTMLElement("option") }} en un elemento {{ HTMLElement("select") }}) que está marcado o conmutado a un estado on.

+ +
/* Coincide con cualquier checked/selected radio, checkbox, u option */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+ +

El usuario puede activar este estado marcando/seleccionando un elemento, o desactivándolo desmarcando/deseleccionando el elemento.

+ +
+

Nota: Debido a que los navegadores a menudo tratan las <option> s como elementos reemplazados, la medida en que se pueden diseñar con la pseudo-clase :checked varía de un navegador a otro.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Yes</label>
+
+  <input type="radio" name="my-input" id="no">
+  <label for="no">No</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Check me!</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Apples</option>
+  <option value="opt2">Grapes</option>
+  <option value="opt3">Pears</option>
+</select>
+
+ +

CSS

+ +
div,
+select {
+  margin: 8px;
+}
+
+/* Etiquetas para entradas marcadas */
+input:checked + label {
+  color: red;
+}
+
+/* Elemento Radio, cuando está marcado */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Elemento Checkbox, cuando está marcado */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Elementos Option, cuando se seleccionan */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo_básico")}}

+ +

Alternar elementos con un checkbox oculto

+ +

Este ejemplo utiliza la pseudoclase :checked para permitir al usuario alternar contenido según el estado de un checkbox, todo sin usar JavaScript.

+ +

HTML

+ +
<input type="checkbox" id="expand-toggle" />
+
+<table>
+  <thead>
+    <tr><th>Columna #1</th><th>Columna #2</th><th>Columna #3</th></tr>
+  </thead>
+  <tbody>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+  </tbody>
+</table>
+
+<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
+ +

CSS

+ +
/* Hide the toggle checkbox */
+#expand-toggle {
+  display: none;
+}
+
+/* Hide expandable content by default */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Style the button */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Show hidden content when the checkbox is checked */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Style the button when the checkbox is checked */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Alternar_elementos_con_un_checkbox_oculto", "auto", 220)}}

+ +

Galería de imágenes

+ +

Puede usar la pseudoclase :checked para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el usuario hace clic en una miniatura. Vea esta demostración.

+ +
Nota: Para un efecto análogo, pero basado en la pseudoclase :hover y sin radioboxes ocultos, vea esta demostración, tomada de la página de referencia :hover.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}Define la semántica con respecto a HTML.
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 UI', '#pseudo-checked', ':checked') }}{{ Spec2('CSS3 UI') }}Enlace al Nivel 3 de Selectores.
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}Define la pseudoclase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.checked")}}

diff --git a/files/es/web/css/_colon_default/index.html b/files/es/web/css/_colon_default/index.html new file mode 100644 index 0000000000..e46989a6b0 --- /dev/null +++ b/files/es/web/css/_colon_default/index.html @@ -0,0 +1,99 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:default' +--- +

{{ CSSRef() }}

+ +

La pseudo-clase :default de CSS representa cualquier elemento de formulario que sea el predeterminado entre un grupo de elementos relacionados.

+ +

Este selector se puede usar en los elementos {{htmlelement("button")}}, <input type="checkbox">, <input type="radio"> y {{htmlelement("option")}}.

+ +
/* Selecciona cualquier <input> predeterminado */
+input:default {
+  background-color: lime;
+}
+ +

Los elementos agrupados que permiten selecciones múltiples también pueden tener múltiples valores predeterminados, es decir, pueden tener múltiples elementos seleccionados inicialmente. En este caso, todos los valores predeterminados se representan utilizando la pseudo-clase :default. Por ejemplo, puede diseñar las casillas de verificación predeterminadas entre un grupo de casillas de verificación (checkboxes).

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<input type="radio" name="season" id="spring">
+<label for="spring">Spring</label>
+
+<input type="radio" name="season" id="summer" checked>
+<label for="summer">Summer</label>
+
+<input type="radio" name="season" id="fall">
+<label for="fall">Fall</label>
+
+<input type="radio" name="season" id="winter">
+<label for="winter">Winter</label>
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}Define la semántica HTML asociada y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 Basic UI')}}Definición inicial, pero sin la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.default")}}

+ +
+

 

+
diff --git a/files/es/web/css/_colon_defined/index.html b/files/es/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..8e5921184f --- /dev/null +++ b/files/es/web/css/_colon_defined/index.html @@ -0,0 +1,115 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:defined' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :defined de CSS representa cualquier elemento que se haya definido.  Esto incluye cualquier elemento estándar integrado en el navegador y elementos personalizados que se hayan definido correctamente (es decir, con el método {{domxref("CustomElementRegistry.define()")}}).

+ +
/* Selecciona cualquier elemento definido */
+:defined {
+  font-style: italic;
+}
+
+/* Selecciona cualquier instancia de un elemento personalizado específico */
+simple-custom:defined {
+  display: block;
+}
+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Los siguientes fragmentos están tomados de nuestra demostración Pseudo-clase-definida (ver también en directo).

+ +

En esta demostración, definimos un elemento personalizado trivial muy simple:

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

Luego inserta una copia de este elemento en el documento, junto con un <p> estándar:

+ +
<simple-custom text="Texto de ejemplo del elemento personalizado"></simple-custom>
+
+<p>Texto de ejemplo de párrafo estándar</p>
+ +

En el CSS primero incluimos las siguientes reglas:

+ +
/* Dar a los dos elementos fondos distintivos */
+p {
+  background: yellow;
+}
+
+simple-custom {
+  background: cyan;
+}
+
+/* Tanto el elemento personalizado como el incorporado tienen texto en cursiva */
+:defined {
+  font-style: italic;
+}
+ +

A continuación, proporcione las dos reglas siguientes para ocultar las instancias de nuestro elemento personalizado que no están definidas y las instancias que se definen como elementos de nivel de bloque:

+ +
simple-custom:not(:defined) {
+  display: none;
+}
+
+simple-custom:defined {
+  display: block;
+}
+ +

Esto es útil si tiene un elemento personalizado complejo que demora un tiempo en cargarse en la página — es posible que desee ocultar las instancias del elemento hasta que la definición esté completa, para que no terminen con feos destellos de elementos sin estilo en la página

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }}
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.defined")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_dir/index.html b/files/es/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..b39c21888a --- /dev/null +++ b/files/es/web/css/_colon_dir/index.html @@ -0,0 +1,108 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - Experimental + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-clase :dir de CSS coincide con los elementos en función de la direccionalidad del texto contenido en ellos.

+ +
/* Selecciona cualquier elemento con texto de derecha a izquierda */
+:dir(rtl) {
+  background-color: red;
+}
+ +

La pseudo-clase :dir() usa solo el valor semántico de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del estilo, es decir, la direccionalidad establecida por las propiedades de CSS como {{cssxref("direction")}}.

+ +
+

Nota: Tenga en cuenta que el comportamiento de la pseudo-clase :dir() no es equivalente a los selectores de atributo [dir=...]. Estos últimos coinciden con el atributo HTML {{htmlattrxref("dir")}} e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, [dir=rtl] y [dir=ltr] no coincidirán con el valor auto.) En contraste, :dir() coincidirá con el valor calculado por {{glossary("user agent")}}, incluso si se hereda.

+
+ +
+

Nota: En HTML, la dirección está determinada por el atributo {{htmlattrxref("dir")}} . Otros tipos de documentos pueden tener diferentes métodos.

+
+ +

Sintaxis

+ +

La pseudoclase :dir() requiere un parámetro, que representa la direccionalidad de texto que desea orientar.

+ +

Parámetros

+ +
+
ltr
+
Orientar elementos de izquierda a derecha.
+
rtl
+
Orientar elementos de derecha a izquierda.
+
+

Sintaxis formal

+ + 
{{csssyntax}}
+
+
+
+ +

Ejemplo

+ +

HTML

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+ +

CSS

+ +
:dir(ltr) {
+  background-color: yellow;
+}
+
+:dir(rtl) {
+  background-color: powderblue;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Ejemplo') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.dir")}}

+ +
 
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_disabled/index.html b/files/es/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..ce16ddb96e --- /dev/null +++ b/files/es/web/css/_colon_disabled/index.html @@ -0,0 +1,127 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

La pseudo-clase :disabled de CSS representa a cualquier elemento deshabilitado. Un elemento se encuentra deshabilitado si no puede ser activado (por ejemplo ser selecionado, hacer click en él o aceptar texto de entrada) ni aceptar el foco. El elemento tiene además un estado habilitado en el cual puede ser activado o recibir foco.

+ +
/* Selecciona cualquier <input> deshabilitado */
+input:disabled {
+  background: #ccc;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Este ejemplo muestra un formulario de envío básico. Utiliza el evento JavaScript {{event("change")}} para permitir al usuario habilitar / deshabilitar los campos de facturación.

+ +

HTML

+ +
<form action="#">
+  <fieldset id="shipping">
+    <legend>Dirección de Envío</legend>
+    <input type="text" placeholder="Nombre">
+    <input type="text" placeholder="Dirección">
+    <input type="text" placeholder="Código postal">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>Dirección de facturación</legend>
+    <label for="billing_is_shipping">Igual que la dirección de envío:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="Nombre" disabled>
+    <input type="text" placeholder="Dirección" disabled>
+    <input type="text" placeholder="Código postal" disabled>
+  </fieldset>
+</form>
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+ +

JavaScript

+ +
// Esperar a que la página termine de cargarse
+document.addEventListener('DOMContentLoaded', function () {
+  // Adjunte el detector de eventos `change` al checkbox
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // Seleccione los campos de texto de facturación
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // Alternar los campos de texto de facturación
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 300, 250)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Define la semántica referente a HTML y los formularios.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 Basic UI')}}Referencia a los selectores de Nivel 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Define la pseudo clase pero no la semántica asociada..
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.disabled")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_empty/index.html b/files/es/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..d86e01d306 --- /dev/null +++ b/files/es/web/css/_colon_empty/index.html @@ -0,0 +1,106 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{ CSSRef() }}
+ +
La pseudo-clase :empty de CSS representa cualquier elemento que no tenga hijos. Los hijos pueden ser nodos de elemento o texto (incluido el espacio en blanco). Los comentarios o las instrucciones de procesamiento no afectan si un elemento se considera vacío.
+ +
+ +
+

Nota: En {{SpecName("CSS4 Selectors", "#the-empty-pseudo")}} la pseudo-clase :empty fue modificada para actuar como {{CSSxRef(":-moz-only-whitespace")}}, pero ningún navegador actualmente suporta aún esto.

+
+ +
/* Selecciona cualquier <div> que no contenga contenido */
+div:empty {
+  background: lime;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div class="box"><!-- Voy a ser de color lima. --></div>
+<div class="box">Voy a ser de color rosa.</div>
+<div class="box">
+    <!-- Seré de color rosa debido a los espacios en blanco alrededor de este comentario. -->
+</div>
+ +

CSS

+ + + +
.box {
+  background: pink;
+  height: 80px;
+  width: 80px;
+}
+
+.box:empty {
+  background: lime;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 300, 80)}}

+ +

Problemas de accesibilidad

+ +

La tecnología de asistencia, como los lectores de pantalla, no puede analizar el contenido interactivo que está vacío. Todo el contenido interactivo debe tener un nombre accesible, que se crea proporcionando un valor de texto para el elemento principal del control interactivo (anclajes, botones, etc.). Los nombres accesibles exponen el control interactivo al árbol de accesibilidad, una API que comunica información útil para las tecnologías de asistencia.

+ +

El texto que proporciona el nombre accesible del control interactivo se puede ocultar mediante una combinación de propiedades que lo eliminan visualmente de la pantalla, pero que la tecnología de asistencia lo puede analizar. Esto se usa comúnmente para botones que dependen solo de un ícono para transmitir el propósito.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}{{ Spec2('CSS3 Selectors') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+

{{Compat("css.selectors.empty")}}

+
diff --git a/files/es/web/css/_colon_enabled/index.html b/files/es/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..c91360c9ab --- /dev/null +++ b/files/es/web/css/_colon_enabled/index.html @@ -0,0 +1,103 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

La pseudo-clase :enabled CSS representa cualquier elemento habilitado. Un elemento está habilitado si puede ser activado (es decir seleccionado, se puede hacer click en él, acepta que se le introduzca texto, etc.) o si accepta el foco. El elemento también tiene un estado deshabilitado el en cuál, no puede ser activado ni acepta el foco.

+ +
/* Selecciona cualquier <input> habilitado */
+input:enabled {
+  color: blue;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

El siguiente ejemplo hace que el color del texto y el botón {{htmlElement ("input")}} sean verdes cuando están habilitados, y grises cuando están deshabilitados. Esto ayuda al usuario a comprender con qué elementos se puede interactuar.

+ +

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">Primer campo (habilitado):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Segundo campo (deshabilitado):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Enviar">
+</form>
+
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 550, 95)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Define la semántica en relación con HTML y los formularios.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Enlaza con selectores nivel 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Define la pseudo clase pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.enabled")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_first-child/index.html b/files/es/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..225aa2ffa5 --- /dev/null +++ b/files/es/web/css/_colon_first-child/index.html @@ -0,0 +1,133 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :first-child de CSS representa el primer elemento entre un grupo de elementos hermanos.

+ +
/* Selecciona cualquier <p> que sea el primer
+   elemento entre sus hermanos */
+p:first-child {
+  color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<div>
+  <p>¡Este texto está seleccionado!</p>
+  <p>Este texto no está seleccionado.</p>
+</div>
+
+<div>
+  <h2>Este texto no está seleccionado: no es un `p`.</h2>
+  <p>Este texto no está seleccionado.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}

+ +

Diseñando una lista

+ +

HTML

+ +
<ul>
+  <li>Objeto 1</li>
+  <li>Objeto 2</li>
+  <li>Objeto 3
+    <ul>
+      <li>Objeto 3.1</li>
+      <li>Objeto 3.2</li>
+      <li>Objeto 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Diseñando_una_lista')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Ningún cambio.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.first-child")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_first-of-type/index.html b/files/es/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..d219d9cd70 --- /dev/null +++ b/files/es/web/css/_colon_first-of-type/index.html @@ -0,0 +1,114 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-clase :first-of-type de CSS representa el primer elemento de su tipo entre un grupo de elementos hermanos.

+ +
/* Selecciona cualquier <p> que sea el primer elemento
+   de este tipo entre sus hermanos */
+p:first-of-type {
+  color: red;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Diseñando el primer párrafo

+ +

HTML

+ +
<h2>Encabezado</h2>
+<p>Párrafo 1</p>
+<p>Párrafo 2</p>
+ +

CSS

+ +
p:first-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Diseñando_el_primer_párrafo')}}

+ +

Elementos anidados

+ +

Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el selector universal (*) está implícito cuando no se escribe un selector simple.

+ +

HTML

+ +
<article>
+  <div>!Este `div` es primero!</div>
+  <div>¡Este <span>`span` anidado es el primero</span>!</div>
+  <div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el último</em>!</div>
+  <div>¡Este <span>`span` anidado tiene estilo</span>!</div>
+  <b>¡Este `b` califica!</b>
+  <div>Este es el `div` final.</div>
+</article>
+
+ +

CSS

+ +
article :first-of-type {
+  background-color: pink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Elementos_anidados', 500)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.first-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_first/index.html b/files/es/web/css/_colon_first/index.html new file mode 100644 index 0000000000..2f02c35bd7 --- /dev/null +++ b/files/es/web/css/_colon_first/index.html @@ -0,0 +1,97 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +
La pseudo-clase :first de CSS, utilizada con la regla-at {{cssxref("@page")}}, representa la primera página de un documento impreso.
+ +
 
+ +
/* Selecciona la primera página al imprimir */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +
Nota: No puede cambiar todas las propiedades de CSS con esta pseudoclase. Solo puede cambiar los márgenes, {{cssxref("orphans")}}, {{cssxref("widows")}} y saltos de página del documento. Además, solo puede usar unidades de longitud absoluta al definir los márgenes. Todas las otras propiedades serán ignoradas.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Primera página.</p>
+<p>Segunda página.</p>
+<button>Imprimir!</button>
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+ +

JavaScript

+ +
document.querySelector("button").onclick = function () {
+  window.print();
+}
+ +

Resultado

+ +

Presione el botón "Imprimir!" para imprimir el ejemplo. Las palabras en la primera página deben estar en algún lugar del centro, mientras que otras páginas tendrán sus contenidos en la posición predeterminada.

+ +

{{ EmbedLiveSample('Ejemplo', '80%', '150px') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Ningún cambio.
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.first")}}

+ +
 
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_focus-visible/index.html b/files/es/web/css/_colon_focus-visible/index.html new file mode 100644 index 0000000000..53212edeac --- /dev/null +++ b/files/es/web/css/_colon_focus-visible/index.html @@ -0,0 +1,128 @@ +--- +title: ':focus-visible' +slug: 'Web/CSS/:focus-visible' +translation_of: 'Web/CSS/:focus-visible' +--- +
{{CSSRef}}
+ +

La pseudo-clase :focus-visible  se aplica mientras un elemento coincide con la pseudo-clase {{CSSxRef(":focus")}} y el  UA (Agente de Usuario) determina mediante heurística que el foco debe hacerse evidente en el elemento. (Muchos navegdores muestras un "anillo de enfoque" por defecto en este caso.

+ +

Este selector es útil para proporcionar un indicador de enfoque diferente basado en la modalidad de entrada del usuario (ratón vs teclado).

+ +

Nótese que Firefox soporta una funcionalidad similar a través de una pseudo-clase prefijada — {{CSSxRef(":-moz-focusring")}}.

+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +

Ejemplos

+ +

Ejemplos básicos

+ +

En este ejemplo, el selector  :focus-visible usa el comportamiento del UA para deteminar cuándo emparejar. Compara lo que sucede cuando haces clic en los diferentes controles con un ratón con lo que sucede cuando los atraviesas con el teclado. Note la diferencia de comportamiento con respecto a los elementos con estilo :focus.

+ +
<input value="Default styles"><br>
+<button>Default styles</button><br>
+<input class="focus-only" value=":focus only"><br>
+<button class="focus-only">:focus only</button><br>
+<input class="focus-visible-only" value=":focus-visible only"><br>
+<button class="focus-visible-only">:focus-visible only</button>
+ +
input, button {
+  margin: 10px;
+}
+
+.focus-only:focus {
+  outline: 2px solid black;
+}
+
+.focus-visible-only:focus-visible {
+  outline: 4px dashed darkorange;
+}
+
+ +

{{EmbedLiveSample("Basic_example", "100%", 300)}}

+ +

Mostrando selectivamente el indicador de enfoque

+ +

Un control personalizado, como un botón de elemento personalizado, puede utilizar :focus-visible para aplicar selectivamente un indicador de enfoque sólo en el enfoque del teclado. Esto coincide con el comportamiento de enfoque nativo para controles como {{htmlelement("button")}}.

+ +
<custom-button tabindex="0" role="button">Click Me</custom-button>
+ +
custom-button {
+  display: inline-block;
+  margin: 10px;
+}
+
+custom-button:focus {
+  /* Provide a fallback style for browsers
+     that don't support :focus-visible */
+  outline: none;
+  background: lightgrey;
+}
+
+custom-button:focus:not(:focus-visible) {
+  /* Remove the focus indicator on mouse-focus for browsers
+     that do support :focus-visible */
+  background: transparent;
+}
+
+custom-button:focus-visible {
+  /* Draw a very noticeable focus style for
+     keyboard-focus on browsers that do support
+     :focus-visible */
+  outline: 4px dashed darkorange;
+  background: transparent;
+}
+ +

{{EmbedLiveSample("Selectively_showing_the_focus_indicator", "100%", 300)}}

+ +

Polyfill

+ +

You can polyfill :focus-visible usando focus-visible.js.

+ +

Problemas de accesibilidad

+ +

Baja visión

+ +

Asegúrate de que el indicador de enfoque visual pueda ser visto por personas con baja visión. Esto también beneficiará a cualquier persona que utilice una pantalla en un espacio brillantemente iluminado (como el exterior en el sol). WCAG 2.1 SC 1.4.11 Contraste Sin Texto requiere que el indicador de enfoque visual sea al menos 3 a 1.

+ + + +

Cognición

+ +

Puede que no sea obvio por qué el indicador de enfoque aparece y desaparece si una persona está utilizando formas mixtas de entrada. Para los usuarios con preocupaciones cognitivas, o que tienen menos conocimientos tecnológicos, esta falta de comportamiento consistente para los elementos interactivos puede ser confusa.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Selectors", "#the-focus-visible-pseudo", ":focus-visible")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

Compatibilidad de navegador

+ + + +

{{Compat("css.selectors.focus-visible")}}

+ +

Vea también

+ + diff --git a/files/es/web/css/_colon_focus-within/index.html b/files/es/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..5628c3b8bc --- /dev/null +++ b/files/es/web/css/_colon_focus-within/index.html @@ -0,0 +1,96 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudo-clases +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

La pseudo-clase CSS :focus-within representa un elemento que ha recibido el foco o que contiene un elemento que ha recibido el foco. En otras palabras, representa un elemento que en sí coincide con la pseudoclase {{cssxref(":focus")}} o tiene descendientes que coincidan con :focus. (Esto incluye descendientes en shadow DOM)

+ +
/* Selecciona un <div> cuando uno de sus descendientes recibe el foco*/
+div:focus-within {
+  background: cyan;
+}
+ +

Este selector es útil, por tomar un ejemplo común, para resaltar un contenedor {{HTMLElement("form")}} completo cuando el usuario enfoca sobre uno de sus elementos {{HTMLElement("input")}}.

+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +

Ejemplos

+ +

En este ejemplo, el formulario recibirá estilos de color especiales cuando cualquiera de las entradas de texto reciba el foco.

+ +

HTML

+ +
<p>Intenta escribir en este formulario.</p>
+
+<form>
+  <label for="given_name">Nombre:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">Apellido:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplos", 500, 150)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.focus-within")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_focus/index.html b/files/es/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..5e1ecbe49f --- /dev/null +++ b/files/es/web/css/_colon_focus/index.html @@ -0,0 +1,114 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

La pseudo-clase :focus CSS representa un elemento (como una entrada de formulario) que ha recibido el foco. Generalmente se activa cuando el usuario hace clic, toca un elemento o lo selecciona con la tecla "Tab" del teclado.

+ +
/* Selecciona cualquier <input> cuando se enfoca */
+input:focus {
+  color: red;
+}
+ +
+

Nota: Esta pseudo-clase se aplica solo al elemento enfocado en sí mismo. Utilice {{cssxref(":focus-within")}} si desea seleccionar un elemento que contenga un elemento enfocado.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<input class="red-input" value="Voy a ser de color rojo cuando enfoque."><br>
+<input class="blue-input" value="Voy a ser de color azul cuando enfoque.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Sobre Accesibilidad

+ +

Asegúrate de que el indicador visual de foco pueda ser notado por personas con baja visión. Esto beneficiará a cualquier persona utilizando una pantalla en un ambiente con mucha luminosidad (por ejemplo, exterior en un día soleado). El estándar de WCAG 2.1 requiere que el indicador de foco tenga un contraste de por lo menos 3:1.

+ + + +

:focus { outline: none; }

+ +

Nunca elimines el outline de un foco sin reemplazarlo por otro tipo de indicador que cumpla con las condiciones de contraste.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}}{{Spec2('HTML WHATWG')}}Define la semántica específica de HTML.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Ningún cambio.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_fullscreen/index.html b/files/es/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..d86528d5d8 --- /dev/null +++ b/files/es/web/css/_colon_fullscreen/index.html @@ -0,0 +1,170 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Experimental + - Pantalla completa + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

La pseudo-clase :fullscreen de CSS representa un elemento que se muestra cuando el navegador está en modo de pantalla completa.

+ +
/* Selecciona cualquier <div> que se muestre en modo de pantalla completa */
+/* Implementado en Firefox, WebKit/Chrome, y Edge/IE usando prefijos;
+   Edge también es compatible con la versión sin prefijo */
+div:-moz-full-screen {
+  background-color: pink;
+}
+
+div:-webkit-full-screen {
+  background-color: pink;
+}
+
+div:fullscreen {
+  background-color: pink;
+}
+ +
+

Nota: La especificación W3C usa la palabra única :fullscreen, sin guiones, pero las implementaciones experimentales de WebKit y Gecko usan una variante prefijada con dos palabras separadas por un guión: :-webkit-full-screen y :-moz-full-screen, respectivamente. Microsoft Edge e Internet Explorer utilizan la convención estándar: :fullscreen y :-ms-fullscreen, respectivamente.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="fullscreen">
+  <h1>Demostración :fullscreen</h1>
+  <p>Este texto se pondrá grande y rojo cuando el navegador esté en modo de pantalla completa.</p>
+  <button id="fullscreen-button">Entrar en pantalla completa</button>
+</div>
+
+ + + +

CSS

+ +
#fullscreen:fullscreen {
+  padding: 42px;
+  background-color: pink;
+  border:2px solid #f00;
+  font-size: 200%;
+}
+
+#fullscreen:fullscreen > h1 {
+  color: red;
+}
+
+#fullscreen:fullscreen > p {
+  color: darkred;
+}
+
+#fullscreen:fullscreen > button {
+  display: none;
+}
+
+ +

Resultado

+ +

{{ LiveSampleLink('Ejemplo', "Haga clic aquí para probar este ejemplo.") }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.fullscreen")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_has/index.html b/files/es/web/css/_colon_has/index.html new file mode 100644 index 0000000000..186e999382 --- /dev/null +++ b/files/es/web/css/_colon_has/index.html @@ -0,0 +1,98 @@ +--- +title: ':has' +slug: 'Web/CSS/:has' +tags: + - CSS + - Experimental + - Pseudo clase + - Referencia + - Selectores CSS +translation_of: 'Web/CSS/:has' +--- +

{{ CSSRef() }}{{SeeCompatTable}}

+ +

Resumen

+ +

La pseudo-class CSS:has() representa un elemento si cualquiera de los selectores, en relación con el {{cssxref(":scope")}} del elemento dado, que se pasa como parámetro, coincide con al menos un elemento. La pseudo clase :has() tomo un selector como argumento.

+ +

Síntaxis

+ +
:has(selector_list) { propiedades de estilo }
+ +

Ejemplos

+ +

El siguiente selector  selecciona únicamente los elementos {{HTMLElement("a")}}  que contienen {{HTMLElement("img")}} hijo:

+ +
a:has(> img)
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS4 Selectors', '#relational', ':has()') }}{{ Spec2('CSS4 Selectors') }}Definición Inicial
+ +

Compatibilidad entre los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_colon_host/index.html b/files/es/web/css/_colon_host/index.html new file mode 100644 index 0000000000..dca8c822d4 --- /dev/null +++ b/files/es/web/css/_colon_host/index.html @@ -0,0 +1,95 @@ +--- +title: ':host' +slug: 'Web/CSS/:host' +tags: + - ':host' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:host' +--- +
{{ CSSRef }}
+ +

La pseudo-clase CSS :host selecciona la sombra host de sombra DOM que contiene el CSS que se usa en el interior — es decir, esto le permite seleccionar un elemento personalizado desde su sombra DOM.

+ +
+

Nota: Esto no tiene ningún efecto cuando se usa fuera de una sombra DOM.

+
+ +
/* Selects a shadow root host */
+:host {
+  font-weight: bold;
+}
+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Los siguientes fragmentos se toman de nuestro ejemplo de selectores de host (ver también en directo).

+ +

En este ejemplo, tenemos un elemento personalizado simple — <context-span> — que se puede envolver alrededor del texto:

+ +
<h1>Host selectors <a href="#"><context-span>example</context-span></a></h1>
+ +

Dentro del constructor del elemento, creamos los elementos style y span, llenamos el span con el contenido del elemento personalizado y llenamos el elemento style con algunas reglas CSS:

+ +
let style = document.createElement('style');
+      let span = document.createElement('span');
+      span.textContent = this.textContent;
+
+      const shadowRoot = this.attachShadow({mode: 'open'});
+      shadowRoot.appendChild(style);
+      shadowRoot.appendChild(span);
+
+      style.textContent = 'span:hover { text-decoration: underline; }' +
+                          ':host-context(h1) { font-style: italic; }' +
+                          ':host-context(h1):after { content: " - no links in headers!" }' +
+                          ':host-context(article, aside) { color: gray; }' +
+                          ':host(.footer) { color : red; }' +
+                          ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';
+ +

La regla :host { background: rgba(0,0,0,0.1); padding: 2px 5px; }  estiliza todas las instancias del elemento <context-span> (la sombra host en esta instancia) en el documento.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS Scope', '#host-selector', ':host') }}{{ Spec2('CSS Scope') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +

Compatible con Chrome y Safari.

+ +
+ + +

{{Compat("css.selectors.host")}}

+
+ +

Ver también

+ + + +

 

diff --git a/files/es/web/css/_colon_hover/index.html b/files/es/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..65b6202f03 --- /dev/null +++ b/files/es/web/css/_colon_hover/index.html @@ -0,0 +1,105 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :hover de CSS coincide cuando el usuario interactúa con un elemento con un dispositivo señalador, pero no necesariamente lo activa. Generalmente se activa cuando el usuario se desplaza sobre un elemento con el cursor (puntero del mouse).

+ +
/* Selecciona cualquier elemento <a> cuando está "mantenido (hovered)" */
+a:hover {
+  color: orange;
+}
+ +

Los estilos definidos por la pseudoclase :active serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{ cssxref(":link") }}, {{ cssxref(":visited") }}, o {{ cssxref(":active") }}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :hover después de las reglas :link y :visited, pero antes de :active, según lo definido por el orden LVHA: :link — :visited — :hover — :active.

+ +
Nota: La pseudo-clase :hover es problemática en las pantallas táctiles. Dependiendo del navegador, la pseudo-clase :hover podría no coincidir, coincidir solo por un momento después de tocar un elemento, o continuar coincidiendo incluso después de que el usuario haya dejado de tocar y hasta que el usuario toque otro elemento. Los desarrolladores web deben asegurarse de que el contenido sea accesible en dispositivos con capacidades hovering limitadas o inexistentes.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<a href="#">Intenta pasar el mouse sobre este enlace.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo_básico")}}

+ +

Galería de imágenes

+ +

Puede usar la pseudoclase :hover para crear una galería de imágenes con imágenes de tamaño completo que solo se muestran cuando el mouse se mueve sobre una miniatura. Vea esta demostración para una posible nota.

+ +
Nota: Para un efecto análogo, pero basado en la pseudo-clase :checked (aplicado a radioboxes ocultos), vea esta demostración, tomada de la página de referencia :checked.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}{{ Spec2('CSS4 Selectors') }}Permite aplicar :hover a cualquier pseudo-elemento.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}Ningún cambio significativo.
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.hover")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_in-range/index.html b/files/es/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..95cee43d30 --- /dev/null +++ b/files/es/web/css/_colon_in-range/index.html @@ -0,0 +1,115 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +

La pseudo-clase :in-range de CSS representa un elemento {{htmlelement("input")}} cuyo valor actual se encuentra dentro de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.

+ +
/* Selecciona cualquier <input>, pero solo cuando tiene un rango
+   especificado, y su valor está dentro de ese rango */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está dentro de los límites permitidos.

+ +
Nota: Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Los valores entre 1 y 10 son válidos.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12">
+      <label for="value1">Tu valor esta </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'bien.';
+}
+
+input:out-of-range + label::after {
+  content: 'fuera de rango!';
+}
+ +

Resultado

+
+ +
{{EmbedLiveSample('Ejemplo', 600, 140)}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Define cuándo :in-range coincide con elementos en HTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+
+ + +

{{Compat("css.selectors.in-range")}}

+
+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_indeterminate/index.html b/files/es/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..ff56f97c85 --- /dev/null +++ b/files/es/web/css/_colon_indeterminate/index.html @@ -0,0 +1,134 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

La pseudo-clase :indeterminate de CSS representa cualquier elemento de formulario cuyo estado sea indeterminado.

+ +
/* Selecciona cualquier <input> cuyo estado sea indeterminado */
+input:indeterminate {
+  background: lime;
+}
+ +

Los elementos seleccionados por este selector son:

+ + + +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Checkbox y radio button

+ +

Este ejemplo aplica estilos especiales a las etiquetas asociadas con campos de formulario indeterminados.

+ +

HTML

+ +
<div>
+  <input type="checkbox" id="checkbox">
+  <label for="checkbox">Esta etiqueta comienza con el color lima.</label>
+</div>
+<div>
+  <input type="radio" id="radio">
+  <label for="radio">Esta etiqueta comienza con el color lima.</label>
+</div>
+ +

CSS

+ +
input:indeterminate + label {
+  background: lime;
+}
+
+ +

JavaScript

+ +
var inputs = document.getElementsByTagName("input");
+
+for (var i = 0; i < inputs.length; i++) {
+  inputs[i].indeterminate = true;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Checkbox_y_radio_button', 'auto', 50)}}

+ +

Barra de progreso

+ +

HTML

+ +
<progress>
+
+ +

CSS

+ +
progress {
+  margin: 4px;
+}
+
+progress:indeterminate {
+  opacity: 0.5;
+  background-color: lightgray;
+  box-shadow: 0 0 2px 1px red;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Barra_de_progreso', 'auto', 30)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Define la semántica de HTML y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Basic UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 Basic UI')}}Define la pseudo-clase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.indeterminate")}}

+
diff --git a/files/es/web/css/_colon_invalid/index.html b/files/es/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..a357717a25 --- /dev/null +++ b/files/es/web/css/_colon_invalid/index.html @@ -0,0 +1,149 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:invalid' +--- +
{{CSSRef}}
+ +

La pseudo-clase :invalid de CSS representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyos contenidos no se puedan validar.

+ +
/* Selecciona cualquier <input> no válido */
+input:invalid {
+  background-color: pink;
+}
+ +

Esta pseudo-clase es útil para resaltar errores de campo para el usuario.

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Este ejemplo presenta una forma simple que colorea los elementos en verde cuando son validos y en rojo cuando no lo son.

+ +

HTML

+ +
<form>
+  <label for="url_input">Ingresa una URL:</label>
+  <input type="url" id="url_input" />
+  <br />
+  <br />
+  <label for="email_input">Introduzca una dirección de correo electrónico:</label>
+  <input type="email" id="email_input" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 600, 150)}}

+ +

Problemas de accesibilidad

+ +

El color rojo se usa comúnmente para indicar una entrada no válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

+ + + +

Notas

+ +

Radio buttons

+ +

Si alguno de los radio buttons en un grupo es required, la pseudo-clase :invalid se aplica a todos ellos si no se selecciona ninguno de los botones del grupo. (Los radio buttons agrupados comparten el mismo valor para su atributo name).

+ +

Gecko por defecto

+ +

Por defecto, Gecko no aplica un estilo a la pseudo-clase :invalid. Sin embargo, sí aplica un estilo (un "resplandor" rojo que usa la propiedad {{Cssxref("box-shadow")}}) a la pseudoclase {{cssxref(":-moz-ui-invalid")}}, que se aplica en un subconjunto de casos para: :invalid.

+ +

Puede inhabilitar el brillo con el siguiente CSS o anularlo por completo para modificar la apariencia de los campos no válidos:

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', '#selector-invalid', ':invalid')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-invalid', ':invalid')}}{{Spec2('HTML5 W3C')}}Define la semántica de HTML y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.invalid")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_lang/index.html b/files/es/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..46bfc7609e --- /dev/null +++ b/files/es/web/css/_colon_lang/index.html @@ -0,0 +1,101 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Pseudo-clase + - Web +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

La pseudo-clase :lang() de CSS es utilizada para modificar elementos en función del idioma en el que se determina que están.

+ +
/* Selecciona cualquier <p> en inglés (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

Nota: En HTML, el lenguaje está determinado por una combinación del atributo {{htmlattrxref("lang")}}, el elemento {{HTMLElement("meta")}} y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.

+
+ +

Sintaxis

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Parámetro

+ +
+
<language-code>
+
Un {{cssxref("<string>")}} que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones HTML.
+
+ +

Ejemplo

+ +

En este ejemplo, la pseudo-clase :lang() se usa para hacer coincidir los elementos primarios de los elementos de cita ({{htmlElement("q")}}) utilizando selectores de hijo. Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de {{glossary("Unicode")}} se utilizan para especificar algunos de los caracteres de comillas especiales.

+ +

HTML

+ +
<div lang="en"><q>Esta cita en inglés tiene una cita <q>anidada</q> adentro.</q></div>
+<div lang="fr"><q>Esta cita en francés tiene una cita <q>anidada</q> adentro.</q></div>
+<div lang="de"><q>Esta cita en aleman tiene una cita <q>anidada</q> adentro.</q></div>
+
+ +

CSS

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 350)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Ningún cambio significativo.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.lang")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_last-child/index.html b/files/es/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..309a8b4b38 --- /dev/null +++ b/files/es/web/css/_colon_last-child/index.html @@ -0,0 +1,127 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :last-child de CSS representa el último elemento entre un grupo de elementos hermanos.

+ +
/* Selecciona cualquier <p> que sea el último elemento
+   entre sus hermanos */
+p:last-child {
+  color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Ejemplo básico

+ +

HTML

+ +
<div>
+  <p>Este texto no está seleccionado.</p>
+  <p>¡Este texto está seleccionado!</p>
+</div>
+
+<div>
+  <p>Este texto no está seleccionado.</p>
+  <h2>Este texto no está seleccionado: no es un `p`.</h2>
+</div>
+
+ +

CSS

+ +
p:last-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico', 500, 200)}}

+ +

Diseñando una lista

+ +

HTML

+ +
<ul>
+  <li>Artículo 1</li>
+  <li>Artículo 2</li>
+  <li>Artículo 3
+    <ul>
+      <li>Artículo 3.1</li>
+      <li>Artículo 3.2</li>
+      <li>Artículo 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:last-child {
+  border: 1px solid red;
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Diseñando_una_lista')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.last-child")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_last-of-type/index.html b/files/es/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..3058cd668f --- /dev/null +++ b/files/es/web/css/_colon_last-of-type/index.html @@ -0,0 +1,113 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-class :last-of-type de CSS representa el último elemento de su tipo entre un grupo de elementos hermanos.

+ +
/* Selecciona cualquier <p> que sea el último elemento
+   de su tipo entre sus hermanos */
+p:last-of-type {
+  color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

Diseñando el último párrafo

+ +

HTML

+ +
<h2>Título</h2>
+<p>Párrafo 1</p>
+<p>Párrafo 2</p>
+ +

CSS

+ +
p:last-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Diseñando_el_último_párrafo')}}

+ +

Elementos anidados

+ +

Este ejemplo muestra cómo los elementos anidados también pueden utilizarse. Tenga en cuenta que el selector universal (*) está implícito cuando no se escribe un selector simple.

+ +

HTML

+ +
<article>
+  <div>Este `div` es primero.</div>
+  <div>¡Este <span>'span' anidado es el último</span>!</div>
+  <div>¡Este <em>`em` anidado es el primero</em>, pero este <em>`em` anidado es el último</em>!</div>
+  <b>¡Este `b` califica!</b>
+  <div>¡Este es el 'div' final!</div>
+</article>
+
+ +

CSS

+ +
article :last-of-type {
+  background-color: pink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Elementos_anidados', 500)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.last-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_left/index.html b/files/es/web/css/_colon_left/index.html new file mode 100644 index 0000000000..33a66ad6d3 --- /dev/null +++ b/files/es/web/css/_colon_left/index.html @@ -0,0 +1,80 @@ +--- +title: ':left' +slug: 'Web/CSS/:left' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:left' +--- +
{{ CSSRef() }}
+ +

La :left CSS pseudo-clase, utilizada con la regla @page at, representa todas las páginas de la izquierda de un documento impreso.

+ +
/* Selects any left-hand pages when printing */
+@page :left {
+  margin: 2in 3in;
+}
+ +

La dirección principal de escritura del documento determina si una página es "izquierda" o "derecha". Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right (derecha); si tiene una dirección de escritura importante de derecha a izquierda, será una página :left (izquierda).

+ +
+

Nota: Esta pseudoclase se puede usar para cambiar solo las propiedades margin, padding, border y background del cuadro de página. Se ignorarán todas las demás propiedades y solo se verá afectado el cuadro de página, no el contenido del documento en la página.

+
+ +

Sintaxis 

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
@page :left {
+  margin: 2in 3in;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionesEstatusComentario
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':left') }}{{ Spec2('CSS3 Paged Media') }}Sin Cambio.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':left') }}{{ Spec2('CSS2.1') }} +

Definición Inicial.

+
+ +

Compatibilidad con navegadores

+ + + + + +

{{Compat("css.selectors.left")}}

+ + + +

Ver También

+ + diff --git a/files/es/web/css/_colon_link/index.html b/files/es/web/css/_colon_link/index.html new file mode 100644 index 0000000000..7859239d9e --- /dev/null +++ b/files/es/web/css/_colon_link/index.html @@ -0,0 +1,105 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:link' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :link CSS representa un elemento que aún no se ha visitado. Coincide con cada elemento no visitado {{HTMLElement("a")}}, {{HTMLElement("area")}}, o {{HTMLElement("link")}} que tiene un atributo href.

+ +
/* Selecciona cualquier <a> que aún no se haya visitado */
+a:link {
+  color: red;
+}
+ +

Los estilos definidos por la pseudo-clase :link serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":active")}}, {{cssxref(":hover")}}, o {{cssxref(":visited")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :link antes de todas las demás reglas relacionadas con el enlace, tal como lo define el orden LVHA: :link — :visited — :hover — :active.

+ +
+

Nota: Use {{cssxref(":any-link")}} para seleccionar un elemento independientemente de si ha sido visitado o no.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Por defecto, la mayoría de los navegadores aplican un valor especial {{cssxref("color")}} a los enlaces visitados. Por lo tanto, los enlaces de este ejemplo probablemente tendrán colores de fuente especiales solo antes de visitarlos. (Después de eso, deberá borrar el historial de su navegador para volver a verlos). Sin embargo, es probable que los valores de {{cssxref("background-color")}} permanezcan, ya que la mayoría de los navegadores no establecen esa propiedad en los enlaces visitados de forma predeterminada.

+ +

HTML

+ +
<a href="#ordinary-target">Este es un enlace ordinario.</a><br>
+<a href="">Ya has visitado este enlace.</a><br>
+<a>Enlace de marcador de posición (no se personalizará)</a>
+
+ +

CSS

+ +
a:link {
+  background-color: gold;
+  color: green;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplos")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}Ningún cambio.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Elevar la restricción para aplicarla únicamente al elemento {{ HTMLElement("a") }}.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.link")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not()/index.html new file mode 100644 index 0000000000..5182d83d77 --- /dev/null +++ b/files/es/web/css/_colon_not()/index.html @@ -0,0 +1,112 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not()' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudoclase +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

La pseudoclase :not() de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.

+ +
/* Selecciona cualquier elemento que NO sea un párrafo */
+:not(p) {
+  color: blue;
+}
+ +
+

Notas:

+ + +
+ +

Sintaxis

+ +

La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

+ +
+

La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

+
+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Soy un párrafo.</p>
+<p class="fancy">¡Soy muy elegante!</p>
+<div>NO soy un párrafo.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* elementos <p> que no están en la clase `.fancy` */
+p:not(.fancy) {
+  color: green;
+}
+
+/* Elementos que no son elementos <p> */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* Elementos que no son elementos <div> o <span> */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* Elementos que no son `.crazy` o `.fancy` */
+/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Extiende su argumento para permitir algunos selectores no simples.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.not")}}

+
diff --git a/files/es/web/css/_colon_nth-child/index.html b/files/es/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..19e024c8ff --- /dev/null +++ b/files/es/web/css/_colon_nth-child/index.html @@ -0,0 +1,188 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :nth-child() de CSS coincide con uno o más elementos en función de su posición entre un grupo de hermanos.

+ +
/* Selecciona cada cuarto elemento entre
+   cualquier grupo de hermanos */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

Sintaxis

+ +

La pseudo-clase nth-child se especifica con un único argumento, que representa el patrón para los elementos coincidentes.

+ +

Valores de palabras clave

+ +
+
odd
+
Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc.
+
even
+
Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc.
+
+ +

Notación funcional

+ +
+
<An+B>
+
Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B, para cada entero positivo o valor cero de n. El índice del primer elemento es 1. Los valores A y B deben ser ambos {{cssxref("<integer>")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Selectores de ejemplo

+ +
+
tr:nth-child(odd) o tr:nth-child(2n+1)
+
Representa las filas impares de una tabla HTML: 1, 3, 5, etc.
+
tr:nth-child(even) o tr:nth-child(2n)
+
Representa las filas pares de una tabla HTML: 2, 4, 6, etc.
+
:nth-child(7)
+
Representa el séptimo elemento.
+
:nth-child(5n)
+
Representa los elementos 5, 10, 15, etc.
+
:nth-child(3n+4)
+
Representa los elementos 4, 7, 10, 13, etc.
+
:nth-child(-n+3)
+
Representa los primeros tres elementos entre un grupo de hermanos.
+
p:nth-child(n)
+
Representa cada elemento <p> entre un grupo de hermanos. Esto es lo mismo que un simple selector p.
+
p:nth-child(1) o p:nth-child(0n+1)
+
Representa cada <p> que es el primer elemento entre un grupo de hermanos. Esto es lo mismo que el selector {{cssxref(":first-child")}}.
+
+ +

Ejemplo detallado

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, SIN un
+   <code>&lt;em&gt;</code> entre los hijos.</h3>
+<p>Los hijos 1, 3, 5 y 7 son seleccionados.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, CON un
+   <code>&lt;em&gt;</code> entre los hijos.</h3>
+<p>Los hijos 1, 5 y 7 son seleccionados.<br>
+   3 se usa en el conteo porque es un hijo, pero
+   no se selecciona porque no es un <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>Este es un `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, CON un
+   <code>&lt;em&gt;</code> entre los hijos.</h3>
+<p>Los hijos 1, 4, 6 y 8 son seleccionados.<br>
+   3 no se usa en el conteo ni se selecciona porque es un <code>&lt;em&gt;</code>,
+   no un <code>&lt;span&gt;</code>, y <code>nth-of-type</code> solo selecciona
+   hijos de ese tipo. El <code>&lt;em&gt;</code> se omite por completo y se ignora.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>Este es un `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_detallado', 550, 550)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}} +

Agrega la sintaxis of <selector> y especifica que no se requiere que los elementos coincidentes tengan un padre.

+
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.nth-child")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_nth-last-child/index.html b/files/es/web/css/_colon_nth-last-child/index.html new file mode 100644 index 0000000000..daf0b8a50b --- /dev/null +++ b/files/es/web/css/_colon_nth-last-child/index.html @@ -0,0 +1,197 @@ +--- +title: ':nth-last-child' +slug: 'Web/CSS/:nth-last-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-last-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :nth-last-child() de CSS selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.

+ +
/* Selecciona cada cuarto elemento entre
+   cualquier grupo de hermanos, contando
+   hacia atrás desde el último */
+:nth-last-child(4n) {
+  color: lime;
+}
+ +
+

Nota: Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-child")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.

+
+ +

Sintaxis

+ +

La pseudo-clase nth-last-child se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.

+ +

Valores de palabras clave

+ +
+
odd
+
Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.
+
even
+
Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.
+
+ +

Notación funcional

+ +
+
<An+B>
+
Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón An+B, para cada entero positivo o valor cero de n. El índice del primer elemento, contando desde el final, es 1. Los valores A y B deben ser ambos {{cssxref("<integer>")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Selectores de ejemplo

+ +
+
tr:nth-last-child(odd) o tr:nth-last-child(2n+1)
+
Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.
+
tr:nth-last-child(even) o tr:nth-last-child(2n)
+
Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.
+
:nth-last-child(7)
+
Representa el séptimo elemento, contando desde el final.
+
:nth-last-child(5n)
+
Representa los elementos 5, 10, 15, etc., contando desde el final.
+
:nth-last-child(3n+4)
+
Representa los elementos 4, 7, 10, 13, etc., contando desde el final.
+
:nth-last-child(-n+3)
+
Representa los últimos tres elementos entre un grupo de hermanos.
+
p:nth-last-child(n)
+
Representa cada elemento <p> entre un grupo de hermanos. Esto es lo mismo que un simple selector p. 
+
p:nth-last-child(1) or p:nth-last-child(0n+1)
+
Representa cada <p> que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector {{cssxref(":last-child")}}. 
+
+ +

Ejemplo de tabla

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>Primera línea</td>
+    </tr>
+    <tr>
+      <td>Segunda línea</td>
+    </tr>
+    <tr>
+      <td>Tercera línea</td>
+    </tr>
+    <tr>
+      <td>Cuarta línea</td>
+    </tr>
+    <tr>
+      <td>Quinta línea</td>
+    </tr>
+  </tbody>
+</table>
+
+ +

CSS

+ +
table {
+  border: 1px solid blue;
+}
+
+/* Selecciona los últimos tres elementos */
+tr:nth-last-child(-n+3) {
+  background-color: pink;
+}
+
+/* Toma todos los elementos a partir del penúltimo elemento */
+tr:nth-last-child(n+2) {
+  color: blue;
+}
+
+/* Seleccione solo el penúltimo elemento */
+tr:nth-last-child(2) {
+  font-weight: 600;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_de_tabla', 300, 150)}}

+ +

Ejemplo de caso Edge

+ +

Como n comienza en cero, mientras que el último elemento comienza en uno, n y n+1 seleccionarán los mismos elementos.

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <td>Primera línea</td>
+    </tr>
+    <tr>
+      <td>Segunda línea</td>
+    </tr>
+    <tr>
+      <td>Tercera línea</td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
tr:nth-last-child(n) {
+  background-color: lightgray;
+}
+
+tr:nth-last-child(n+1){
+  font-weight: 600;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_de_caso_Edge')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.nth-last-child")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_nth-last-of-type/index.html b/files/es/web/css/_colon_nth-last-of-type/index.html new file mode 100644 index 0000000000..6699c2520d --- /dev/null +++ b/files/es/web/css/_colon_nth-last-of-type/index.html @@ -0,0 +1,97 @@ +--- +title: ':nth-last-of-type()' +slug: 'Web/CSS/:nth-last-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-last-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-clase :nth-last-of-type() CSS coincide con uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos, contando desde el final.

+ +
/* Selecciona cada cuarto elementos <p> entre
+   cualquier grupo de hermanos, contando hacia
+   atrás desde el último */
+p:nth-last-of-type(4n) {
+  color: lime;
+}
+ +
+

Nota: Esta pseudo-clase es esencialmente la misma que {{Cssxref(":nth-of-type")}}, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.

+
+ +

Sintaxis

+ +

La pseudo-clase nth-last-of-type se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.

+ +

Ver {{Cssxref(":nth-last-child")}} para una explicación más detallada de su sintaxis.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
<div>
+  <span>Este es un span.</span>
+  <span>Este es otro span.</span>
+  <em>Esto esta enfatizado.</em>
+  <span>¡Guauu, este span se pone color lima!</span>
+  <strike>Esto está tachado.</strike>
+  <span>Aquí hay un último span.</span>
+</div>
+ +

CSS

+ +
span:nth-last-of-type(2) {
+  background-color: lime;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#nth-last-of-type-pseudo', ':nth-last-of-type')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.nth-last-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_nth-of-type/index.html b/files/es/web/css/_colon_nth-of-type/index.html new file mode 100644 index 0000000000..ad133d3584 --- /dev/null +++ b/files/es/web/css/_colon_nth-of-type/index.html @@ -0,0 +1,107 @@ +--- +title: ':nth-of-type' +slug: 'Web/CSS/:nth-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:nth-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-clase :nth-of-type() de CSS selecciona uno o más elementos de un tipo dado, en función de su posición entre un grupo de hermanos.

+ +
/* Selecciona cada cuarto elementos <p> entre
+   cualquier grupo de hermanos */
+p:nth-of-type(4n) {
+  color: lime;
+}
+ +

Sintaxis

+ +

La pseudo-clase nth-of-type se especifica con un solo argumento, que representa el patrón para los elementos coincidentes.

+ +

Ver {{Cssxref(":nth-child")}} para una explicación más detallada de su sintaxis.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<div>
+  <div>Este elemento no se cuenta.</div>
+  <p>1er párrafo.</p>
+  <p>2do párrafo.</p>
+  <div>Este elemento no se cuenta.</div>
+  <p>3er párrafo.</p>
+  <p>4to párrafo.</p>
+</div>
+ +

CSS

+ +
/* Párrafos impares */
+p:nth-of-type(2n+1) {
+  color: red;
+}
+
+/* Párrafos pares */
+p:nth-of-type(2n) {
+  color: blue;
+}
+
+/* Primer párrafo */
+p:nth-of-type(1) {
+  font-weight: bold;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico', 250, 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#nth-of-type-pseudo', ':nth-of-type')}}{{Spec2('CSS3 Selectors')}}
+ Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.nth-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_only-child/index.html b/files/es/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..c11051748e --- /dev/null +++ b/files/es/web/css/_colon_only-child/index.html @@ -0,0 +1,136 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

La pseudo-clase :only-child de CSS representa un elemento sin hermanos. Esto es lo mismo que :first-child:last-child o :nth-child(1):nth-last-child(1), pero con una especificidad menor.

+ +
/* Selecciona cada <p>, pero solo si es el */
+/* único hijo de su padre */
+p:only-child {
+  background-color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<main>
+  <div>
+    <i>Soy un hijo único y solitario.</i>
+  </div>
+
+  <div>
+    <i>Yo tengo hermanos.</i><br>
+    <b>¡Yo también!</b><br>
+    <span>Yo también tengo hermanos, <span>pero este es un hijo único.</span></span>
+  </div>
+</main>
+ +

CSS

+ +
main :only-child {
+  color: red;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_básico','100%',180)}}

+ +

Ejemplo de lista

+ +

HTML

+ +
<ol>
+  <li>Primero
+    <ul>
+      <li>Esta lista tiene solo un elemento.
+    </ul>
+  </li>
+  <li>Segundo
+    <ul>
+      <li>Esta lista tiene tres elementos.
+      <li>Esta lista tiene tres elementos.
+      <li>Esta lista tiene tres elementos.
+    </ul>
+  </li>
+<ol>
+
+ +

CSS

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: red;
+  list-style-type: square;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_de_lista', '100%', 210)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}
+ Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+
+ + +

{{Compat("css.selectors.only-child")}}

+
+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_only-of-type/index.html b/files/es/web/css/_colon_only-of-type/index.html new file mode 100644 index 0000000000..36d26b5fea --- /dev/null +++ b/files/es/web/css/_colon_only-of-type/index.html @@ -0,0 +1,97 @@ +--- +title: ':only-of-type' +slug: 'Web/CSS/:only-of-type' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:only-of-type' +--- +
{{CSSRef}}
+ +

La pseudo-clase :only-of-type CSS representa un elemento que no tiene hermanos del mismo tipo.

+ +
/* Selecciona cada <p>, pero solo si es el único */
+/* elemento <p> dentro de su padre */
+p:only-of-type {
+  background-color: lime;
+}
+ +
+

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
<main>
+  <div>Soy un `div` #1.</div>
+  <p>Yo soy el único `p` entre mis hermanos.</p>
+  <div>Soy un `div` #2.</div>
+  <div>Soy un `div` #3.
+    <i>Yo soy el único hijo `i`.</i>
+    <em>Soy un `em` #1.</em>
+    <em>Soy un `em` #2.</em>
+  </div>
+</main>
+
+ +

CSS

+ +
main :only-of-type {
+  color: red;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo','100%',180)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS4 Selectors')}}Los elementos coincidentes no requieren tener un padre.
{{SpecName('CSS3 Selectors', '#only-of-type-pseudo', ':only-of-type')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.only-of-type")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_optional/index.html b/files/es/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..2efdc61674 --- /dev/null +++ b/files/es/web/css/_colon_optional/index.html @@ -0,0 +1,91 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:optional' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :optional de CSS representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que no tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.

+ +
/* Selecciona cualquier opción <input> */
+input:optional {
+  border: 1px dashed black;
+}
+ +

Esta pseudo-clase es útil para diseñar campos que no son necesarios para enviar un formulario.

+ +
+

Nota: La pseudo-clase {{cssxref(":required")}} selecciona los campos de formulario requeridos.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ver {{cssxref(":invalid")}} para un ejemplo.

+ +

Problemas de accesibilidad

+ +

Si un formulario contiene {{htmlelement("input")}}s opcionales, las entradas requeridas deben indicarse utilizando el atributo {{ htmlattrxref("required", "input") }}. Esto se asegurará de que las personas que navegan con la ayuda de la tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar el envío exitoso del formulario.

+ +

Las entradas requeridas también deben indicarse visualmente, utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Por lo general, se utilizan textos descriptivos y/o un icono.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', '#selector-optional', ':optional') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-optional', ':optional') }}{{ Spec2('HTML5 W3C') }}Define la semántica de HTML y la validación de restricciones.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':optional') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':optional') }}{{ Spec2('CSS3 Basic UI') }}Define la pseudoclase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.optional")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_out-of-range/index.html b/files/es/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..2ed8e84372 --- /dev/null +++ b/files/es/web/css/_colon_out-of-range/index.html @@ -0,0 +1,116 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - Presentación + - Pseudo-Clase CSS + - Referencia CSS + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +

La pseudo-clase :out-of-range de CSS representa un elemento {{htmlelement("input")}} cuyo valor actual está fuera de los límites de rango especificados por los atributos {{htmlattrxref("min", "input")}} y {{htmlattrxref("max","input")}}.

+ +
/* Selecciona cualquier <input>, pero solo cuando tiene un
+   rango especificado, y su valor está fuera de ese rango */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+ +

Esta pseudo-clase es útil para dar al usuario una indicación visual de que el valor actual de un campo está fuera de los límites permitidos.

+ +
Nota: Esta pseudo-clase solo se aplica a los elementos que tienen (y pueden tomar) una limitación de rango. En ausencia de tal limitación, el elemento no puede estar "dentro del rango" ni "fuera de rango".
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Los valores entre 1 y 10 son válidos.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 a 10" min="1" max="10" value="12">
+      <label for="value1">Tu valor esta </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'bien.';
+}
+
+input:out-of-range + label::after {
+  content: '¡fuera de rango!';
+}
+ +

Resultado

+
+ +
{{EmbedLiveSample('Ejemplo', 600, 140)}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}{{Spec2('HTML WHATWG')}}Define cuándo :out-of-range coincide con los elementos en HTML.
{{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}{{Spec2('CSS4 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+
+ + +

{{Compat("css.selectors.out-of-range")}}

+
+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_placeholder-shown/index.html b/files/es/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..9a113639b6 --- /dev/null +++ b/files/es/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,97 @@ +--- +title: ':placeholder-shown' +slug: 'Web/CSS/:placeholder-shown' +tags: + - CSS + - Experimental + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:placeholder-shown' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La pseudo-clase :placeholder-shown de CSS  representa cualquier elemento {{htmlElement("input")}} o {{htmlElement("textarea")}} que esté mostrando actualmente el texto de marcador de posición (placeholder).

+ +
/* Selecciona cualquier elemento con un placeholder activo */
+:placeholder-shown {
+  border: 2px solid silver;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo básico

+ +

HTML

+ +
<input placeholder="¡Escribe algo aquí!">
+ +

CSS

+ +
input {
+  border: 2px solid black;
+  padding: 3px;
+}
+
+input:placeholder-shown {
+  border-color: silver;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo_básico", 200, 60)}}

+ +

Texto desbordante

+ +

En pantallas angostas como teléfonos inteligentes, el ancho de los cuadros de búsqueda y otros campos de formulario pueden acortarse drásticamente. Esto puede provocar que el texto de marcador de posición se recorte de una manera no deseada. A menudo es útil alterar este comportamiento con la propiedad {{cssxref("text-overflow")}}.

+ +

HTML

+ +
<input placeholder="¡Ingresa algo en este campo, por favor!">
+ +

CSS

+ +
input:placeholder-shown {
+  text-overflow: ellipsis;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Texto_desbordante", 200, 60)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("CSS4 Selectors", "#placeholder", ":placeholder-shown")}}{{Spec2("CSS4 Selectors")}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.placeholder-shown")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_read-only/index.html b/files/es/web/css/_colon_read-only/index.html new file mode 100644 index 0000000000..a97724cdf8 --- /dev/null +++ b/files/es/web/css/_colon_read-only/index.html @@ -0,0 +1,100 @@ +--- +title: ':read-only' +slug: 'Web/CSS/:read-only' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:read-only' +--- +
{{CSSRef}}
+ +

La pseudo-clase :read-only de CSS representa un elemento que ya no es editable por el usuario (como un input).

+ +
/* Selecciona cualquier <input> que está en modo de solo lectura */
+/* Soportado en Firefox usando prefijo */
+input:-moz-read-only {
+  background-color: #ccc;
+}
+
+/* El prefijo no es necesario en navegadores basados en Blink/WebKit/Edge  */
+p:read-only {
+  cursor: not-allowed;
+}
+input:read-only {
+  background-color: #ccc;
+}
+ +
+

Nota: El selector no solo selecciona {{htmlElement("input")}} marcados como  {{htmlattrxref("readonly", "input")}}; también selecccionará cualquier elemento que no pueda ser editar por el usuario.  Lea sobre el atributo contenteditable.

+
+ +

Sintaxis

+ +
:read-only
+ +

Ejemplo

+ +

HTML

+ +
<input type="text" value="Aquí puedes poner lo que quieras.">
+<input type="text" value="Campo de solo lectura." readonly>
+<p>Este es un párrafo normal.</p>
+<p contenteditable="true">Puedes editar este párrafo, ¡inténtalo!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-only { background: cyan; }
+input:read-only { background: cyan; }
+
+p:-moz-read-only { background: lightgray; }
+p:read-only { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}{{ Spec2('HTML5 W3C') }}Define la semántica relacionada con HTML y de la validación de las restricciones.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}{{ Spec2('CSS4 Selectors') }}Define la pseudoclase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ +

{{Compat("css.selectors.read-only")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_read-write/index.html b/files/es/web/css/_colon_read-write/index.html new file mode 100644 index 0000000000..404b97ce79 --- /dev/null +++ b/files/es/web/css/_colon_read-write/index.html @@ -0,0 +1,99 @@ +--- +title: ':read-write' +slug: 'Web/CSS/:read-write' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:read-write' +--- +
{{CSSRef}}
+ +

La pseudo-clase :read-write de CSS representa un elemento (como un input) que es editable por el usuario.

+ +
/* Selecciona cualquier elemento <input> que sea editable */
+/* Compatible con Firefox con un prefijo */
+input:-moz-read-write {
+  background-color: #bbf;
+}
+
+/* Compatible con Blink/WebKit/Edge sin un prefijo */
+input:read-write {
+  background-color: #bbf;
+}
+ +
+

Nota: Este selector no solo selecciona texto de {{htmlElement("input")}}; seleccionará cualquier elemento que pueda editar el usuario, como un elemento {{htmlelement("p")}} con {{htmlattrxref("contenteditable")}} establecido en él.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<input type="text" value="Escribe lo que quieras aquí.">
+<input type="text" value="Este es un campo de solo lectura." readonly>
+<p>Este es un párrafo normal.</p>
+<p contenteditable="true">¡Puedes editar este párrafo!</p>
+ +

CSS

+ +
input { min-width: 25em; }
+input:-moz-read-write { background: cyan; }
+input:read-write { background: cyan; }
+
+p:-moz-read-write { background: lightgray; }
+p:read-write { background: lightgray; }
+p[contenteditable="true"] { color: blue; }
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}{{ Spec2('HTML5 W3C') }}Define la semántica con respecto a HTML y validación de restricciones.
{{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}{{ Spec2('CSS4 Selectors') }}Define la pseudo-clase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.read-write")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_required/index.html b/files/es/web/css/_colon_required/index.html new file mode 100644 index 0000000000..2dd6458012 --- /dev/null +++ b/files/es/web/css/_colon_required/index.html @@ -0,0 +1,91 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:required' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :required de CSS representa cualquier elemento {{HTMLElement("input")}}, {{HTMLElement("select")}}, o {{HTMLElement("textarea")}} que tenga el atributo {{ htmlattrxref("required", "input") }} establecido en él.

+ +
/* Selecciona cualquier <input> requerido */
+input:required {
+  border: 1px dashed red;
+}
+ +

Esta pseudo-clase es útil para resaltar campos que deben tener datos válidos antes de que se pueda enviar un formulario.

+ +
+

Nota: La pseudoclase {{cssxref(":optional")}} selecciona campos de formulario opcionales.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ver {{cssxref(":invalid")}} para un ejemplo.

+ +

Problemas de accesibilidad

+ +

Obligatoriamente los {{htmlelement("input")}} deben tener el atributo {{ htmlattrxref("required", "input") }} aplicado a ellos. Esto asegurará que las personas que navegan con la ayuda de tecnología de asistencia, como un lector de pantalla, puedan comprender qué entradas necesitan contenido válido para garantizar un envío exitoso.

+ +

Si el formulario también contiene entradas opcionales, las entradas requeridas deben indicarse visualmente utilizando un tratamiento que no dependa únicamente del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('HTML WHATWG', '#selector-required', ':required') }}{{ Spec2('HTML WHATWG') }}Ningún cambio.
{{ SpecName('HTML5 W3C', '#selector-required', ':required') }}{{ Spec2('HTML5 W3C') }}Define la semántica de HTML y la validación de restricciones.
{{ SpecName('CSS4 Selectors', '#opt-pseudos', ':required') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required') }}{{ Spec2('CSS3 Basic UI') }}Define la pseudo-clase, pero no la semántica asociada.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.required")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_right/index.html b/files/es/web/css/_colon_right/index.html new file mode 100644 index 0000000000..97490676a3 --- /dev/null +++ b/files/es/web/css/_colon_right/index.html @@ -0,0 +1,78 @@ +--- +title: ':right' +slug: 'Web/CSS/:right' +tags: + - '@page' + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:right' +--- +
{{ CSSRef() }}
+ +

La pseudo-clase CSS :right, utilizada con la regla-at {{cssxref("@page")}}, representa todas las páginas de la derecha de un documento impreso.

+ +
/* Selecciona cualquier página de la derecha al imprimir */
+@page :right {
+  margin: 2in 3in;
+}
+ +

Que una página dada sea "izquierda" o "derecha" está determinada por la dirección principal de escritura del documento. Por ejemplo, si la primera página tiene una dirección de escritura principal de izquierda a derecha, entonces será una página :right; si tiene una dirección de escritura principal de derecha a izquierda, entonces será una página {{Cssxref(":left")}}.

+ +
+

Nota: No puede cambiar todas las propiedades de CSS con esta pseudo-clase. Solo puede cambiar las propiedades {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, y {{ Cssxref("background") }} de la caja de página. Se ignorarán todas las demás propiedades y solo se verá afectada la caja de página, no el contenido del documento en la página.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
@page :right {
+  margin: 2in 3in;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Paged Media', '#left-right-first', ':right') }}{{ Spec2('CSS3 Paged Media') }}Ningún cambio.
{{ SpecName('CSS2.1', 'page.html#page-selectors', ':right') }}{{ Spec2('CSS2.1') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

 

+ + + +

{{Compat("css.selectors.right")}}

+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_root/index.html b/files/es/web/css/_colon_root/index.html new file mode 100644 index 0000000000..5c5bc5e192 --- /dev/null +++ b/files/es/web/css/_colon_root/index.html @@ -0,0 +1,64 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

La pseudo-clase :root de CSS selecciona el elemento raíz de un árbol que representa el documento. En HTML, :root representa el elemento {{HTMLElement("html")}} y es idéntico al selector html, excepto que su especificidad es mayor.

+ +
/* Selecciona el elemento raíz del documento:
+   <html> en el caso de HTML */
+:root {
+  background: yellow;
+}
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

:root puede ser útil para declarar variables CSS globales:

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Ningún cambio.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.root")}}

diff --git a/files/es/web/css/_colon_target/index.html b/files/es/web/css/_colon_target/index.html new file mode 100644 index 0000000000..bb426f225d --- /dev/null +++ b/files/es/web/css/_colon_target/index.html @@ -0,0 +1,214 @@ +--- +title: ':target' +slug: 'Web/CSS/:target' +tags: + - CSS + - Layout + - Pseudo clase CSS + - Referencia + - Web +translation_of: 'Web/CSS/:target' +--- +
{{CSSRef}}
+ +

La pseudo-clase :target de CSS representa un elemento único (el elemento objetivo) con un {{htmlattrxref("id")}} que coincide con el fragmento de la URL.

+ +
/* Selecciona un elemento con una ID que coincida con el fragmento de la URL actual */
+:target {
+  border: 2px solid black;
+}
+ +

Por ejemplo, la siguiente URL tiene un fragmento (indicado por el signo #) que apunta a un elemento llamado section2:

+ +
http://www.example.com/index.html#section2
+ +

El siguiente elemento sería seleccionado por un selector :target cuando la URL actual sea igual a la anterior:

+ +
<section id="section2">Ejemplo</section>
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Una tabla de contenido

+ +

La pseudo-clase :target se puede usar para resaltar la parte de una página a la que se ha vinculado desde una tabla de contenido.

+ +

HTML

+ +
<h3>Tabla de contenido</h3>
+<ol>
+ <li><a href="#p1">¡Salta al primer párrafo!</a></li>
+ <li><a href="#p2">¡Salta al segundo párrafo!</a></li>
+ <li><a href="#nowhere">Este enlace no va a ninguna parte,
+   porque el objetivo no existe.</a></li>
+</ol>
+
+<h3>Mi artículo divertido</h3>
+<p id="p1">Puede orientar elegir como blanco <i>este párrafo</i> utilizando un
+  fragmento de URL. ¡Haz clic en el enlace de arriba para probar!</p>
+<p id="p2">Este es <i>otro párrafo</i>, también accesible
+  desde los enlaces de arriba. ¿No es encantador?</p>
+
+ +

CSS

+ +
p:target {
+  background-color: gold;
+}
+
+/* Agrega un pseudo-elemento dentro del elemento de destino */
+p:target::before {
+  font: 70% sans-serif;
+  content: "►";
+  color: limegreen;
+  margin-right: .25em;
+}
+
+/* Estilo de elementos en cursiva dentro del elemento de destino */
+p:target i {
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Una_tabla_de_contenido', 500, 300)}}

+ +

CSS-Puro lightbox

+ +

Puede usar la pseudo-clase :target para crear un lightbox sin usar JavaScript. Esta técnica se basa en la capacidad de los enlaces de anclaje para señalar elementos que están inicialmente ocultos en la página. Una vez segmentado, el CSS cambia su display para que se muestren.

+ +
Nota: Un CSS-Puro lightbox más completo basado en la pseudoclase :target está disponible en GitHub (demo).
+ +

HTML

+ +
<ul>
+  <li><a href="#ejemplo1">Abrir ejemplo #1</a></li>
+  <li><a href="#ejemplo2">Abrir ejemplo #2</a></li>
+</ul>
+
+<div class="lightbox" id="ejemplo1">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
+  </figure>
+</div>
+
+<div class="lightbox" id="ejemplo2">
+  <figure>
+    <a href="#" class="close"></a>
+    <figcaption>Cras risus odio, pharetra nec ultricies et,
+      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+      Quisque quis neque arcu, nec gravida magna.</figcaption>
+  </figure>
+</div>
+ +

CSS

+ +
/* lightbox sin abrir */
+.lightbox {
+  display: none;
+}
+
+/* lightbox abierto */
+.lightbox:target {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Contenido de Lightbox */
+.lightbox figcaption {
+  width: 25rem;
+  position: relative;
+  padding: 1.5em;
+  background-color: lightpink;
+}
+
+/* Botón Cerrar */
+.lightbox .close {
+  position: relative;
+  display: block;
+}
+
+.lightbox .close::after {
+  right: -1rem;
+  top: -1rem;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  display: flex;
+  z-index: 1;
+  align-items: center;
+  justify-content: center;
+  background-color: black;
+  border-radius: 50%;
+  color: white;
+  content: "×";
+  cursor: pointer;
+}
+
+/* superposición Lightbox */
+.lightbox .close::before {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background-color: rgba(0,0,0,.7);
+  content: "";
+  cursor: default;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('CSS-Puro_lightbox', 500, 220)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Define la semántica específica de HTML.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Ningún cambio.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.target")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_valid/index.html b/files/es/web/css/_colon_valid/index.html new file mode 100644 index 0000000000..047421e43a --- /dev/null +++ b/files/es/web/css/_colon_valid/index.html @@ -0,0 +1,83 @@ +--- +title: ':valid' +slug: 'Web/CSS/:valid' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:valid' +--- +
{{CSSRef}}
+ +

La pseudo-clase :valid de CSS representa cualquier elemento {{HTMLElement("input")}} u otro elemento {{HTMLElement("form")}} cuyo contenido se valide satisfactoriamente. Esto permite que los campos válidos adopten fácilmente una apariencia que ayuda al usuario a confirmar que sus datos están formateados correctamente.

+ +
/* Selecciona cualquier <input> válido */
+input:valid {
+  background-color: powderblue;
+}
+ +

Esta pseudo-clase es útil para resaltar los campos correctos para el usuario.

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ver {{cssxref(":invalid")}} para un ejemplo.

+ +

Problemas de accesibilidad

+ +

El color verde se usa comúnmente para indicar una entrada válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#selector-valid', ':valid')}}{{Spec2('HTML WHATWG')}}Ningún cambio.
{{SpecName('HTML5 W3C', '#selector-valid', ':valid')}}{{Spec2('HTML5 W3C')}}Define la semántica de HTML y la validación de restricciones.
{{SpecName('CSS4 Selectors', '#validity-pseudos', ':valid')}}{{Spec2('CSS4 Selectors')}}
+ Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.valid")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_colon_visited/index.html b/files/es/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..3fa81d8ddc --- /dev/null +++ b/files/es/web/css/_colon_visited/index.html @@ -0,0 +1,120 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Diseño + - Pseudo-clase + - Referencia + - Web +translation_of: 'Web/CSS/:visited' +--- +
{{ CSSRef }}
+ +

La pseudo-clase :visited de CSS  representa enlaces que el usuario ya ha visitado. Por motivos de privacidad, los estilos que se pueden modificar con este selector son muy limitados.

+ +
/* Selecciona cualquier <a> que ha sido visitado */
+a:visited {
+  color: green;
+}
+ +

Los estilos definidos por la pseudo-clase :visited serán anulados por cualquier pseudo-clase posterior relacionada con el enlace ({{cssxref(":link")}}, {{cssxref(":hover")}} o {{cssxref(":active")}}) que tenga al menos la misma especificidad. Para darle un estilo apropiado a los enlaces, coloque la regla :visited después de la regla :link pero antes de las reglas :hover y :active, según lo definido por el orden LVHA: :link — :visited — :hover — :active.

+ +

Restricciones de estilo

+ +

Por motivos de privacidad, los navegadores limitan estrictamente los estilos que puede aplicar utilizando esta pseudo-clase y cómo se pueden usar:

+ + + +
+

Nota: Para obtener más información sobre estas limitaciones y las razones detrás de ellas, vea Privacidad y el selector :visited.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Las propiedades que de otro modo no tendrían ningún color o serían transparentes no se pueden modificar con :visited. De las propiedades que se pueden establecer con esta pseudo-clase, su navegador probablemente solo tenga un valor predeterminado para color y column-rule-color. Por lo tanto, si desea modificar las otras propiedades, deberá darles un valor base fuera del selector :visited.

+ +

HTML

+ +
<a href="#test-visited-link">¿Ya has visitado este enlace?</a><br>
+<a href="">Ya has visitado este enlace.</a>
+ +

CSS

+ +
a {
+  /* Especifique los valores predeterminados no transparentes a ciertas propiedades,
+     lo que les permite ser diseñado con el estado :visited */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Ningún cambio.
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Ningún cambio.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Levanta la restricción para aplicar  :visited solo al elemento {{ HTMLElement("a") }}. Permite a los navegadores restringir su comportamiento por razones de privacidad.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.visited")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_doublecolon_-moz-color-swatch/index.html b/files/es/web/css/_doublecolon_-moz-color-swatch/index.html new file mode 100644 index 0000000000..3edb2edc5b --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-color-swatch/index.html @@ -0,0 +1,56 @@ +--- +title: '::-moz-color-swatch' +slug: 'Web/CSS/::-moz-color-swatch' +translation_of: 'Web/CSS/::-moz-color-swatch' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El ::-moz-color-swatch pdseudo-elemento CSS es una extension de Mozilla que representa el color seleccionado en un {{HTMLElement("input")}} de type="color".

+ +
+

Nota: Usando ::-moz-color-swatch con cualquier cosa excepto <input type="color"> no concuerda con nada y no tiene efecto.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
<input type="color" value="#de2020" />
+
+ +

CSS

+ +
input[type=color]::-moz-color-swatch {
+  border-radius: 10px;
+  border-style: none;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificacion. Es un pseudo-elemento patentado específicamente para Gecko.

+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.-moz-color-swatch")}}

+ +

Ver tambien

+ + diff --git a/files/es/web/css/_doublecolon_-moz-page-sequence/index.html b/files/es/web/css/_doublecolon_-moz-page-sequence/index.html new file mode 100644 index 0000000000..33ee3c2706 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-page-sequence/index.html @@ -0,0 +1,82 @@ +--- +title: '::-moz-page-sequence' +slug: 'Web/CSS/::-moz-page-sequence' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Referencia CSS +translation_of: 'Web/CSS/::-moz-page-sequence' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento  CSS ::-moz-page-sequence sirve para representar el fondo de la previsualización de impresión.

+ +

Ejemplos

+ +

Necesita un eejemplo

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-page/index.html b/files/es/web/css/_doublecolon_-moz-page/index.html new file mode 100644 index 0000000000..5e6d7d7ffa --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-page/index.html @@ -0,0 +1,27 @@ +--- +title: '::-moz-page' +slug: 'Web/CSS/::-moz-page' +tags: + - CSS + - NeedsCompatTable + - NeedsE + - No estándar(2) + - Referencia CSS +translation_of: 'Web/CSS/::-moz-page' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-moz-page se aplica a una página individual que va a ser impresa o que está en previsualización para impresión.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-placeholder/index.html b/files/es/web/css/_doublecolon_-moz-placeholder/index.html new file mode 100644 index 0000000000..efe8d9c509 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-placeholder/index.html @@ -0,0 +1,108 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento CSS + - Referencia CSS +translation_of: 'Web/CSS/::placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +
Nota: El pseudo-elemento ::-moz-placeholder fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.
+ +

Resumen

+ +

El  pseudo-elemento ::-moz-placeholder sirve para seleccionar cualquier elemento de un formulario que esté mostrando un  marcador de posición de texto (placeholder text) . Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).

+ +

Ejemplo

+ +

En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).

+ +

Contenido HTML

+ +
<input id="test" placeholder="Placeholder text!">
+
+ +

Contenido CSS

+ +
input::-moz-placeholder {
+  color: green;
+}
+
+ +

Obtendremos el siguiente resultado:

+ +

{{EmbedLiveSample("Example")}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox aplica un estilo por defecto de  {{cssxref("opacity")}}: 0.54 al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.

+ +

La implementación previa en el motor Gecko era como la pseudo-clase  {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-progress-bar/index.html b/files/es/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..0d3cd4d002 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,55 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - NeedsCompatTable + - No estandar + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

El pseudo-elemento ::-moz-progress-bar de CSS es una extensión de Mozilla que representa la barra de progreso dentro de un elemento {{HTMLElement("progress")}}. (La barra representa la cantidad de progreso que se ha realizado).

+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<progress value="30" max="100">30%</progress>
+<progress max="100">Indeterminado</progress>
+ +

CSS

+ +
::-moz-progress-bar {
+  background-color: red;
+}
+
+/* Forzar barras indeterminadas para tener ancho cero */
+:indeterminate::-moz-progress-bar {
+  width: 0;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplos')}}

+ +

La primera barra de arriba debe tener este aspecto:

+ +

Custom styled progress bar

+ +

Ver también

+ + diff --git a/files/es/web/css/_doublecolon_-moz-range-progress/index.html b/files/es/web/css/_doublecolon_-moz-range-progress/index.html new file mode 100644 index 0000000000..22c7889cf0 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-progress/index.html @@ -0,0 +1,115 @@ +--- +title: '::-moz-range-progress' +slug: 'Web/CSS/::-moz-range-progress' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-progress' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento CSS ::-moz-range-progress representa la parte del "camino" (la ranura sobre la que desliza) de un elemento  {{HTMLElement("input")}} con type="range", que se corresponde con los valores inferiores al valor seleccionado actualmente en ese "camino".

+ +
+

Si usamos  ::-moz-range-progress con cualquier otra cosa que no sea  <input type="range"> ni seleccionaremos nada ni conseguiremos ningún efecto.

+
+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido CSS

+ +
input[type=range]::-moz-range-progress {
+  background-color: green;
+  height: 1em;
+}
+
+ +

Contenido HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Salida

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progreso que utilice este estilo se vería de la siguiente manera:

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario de Gecko.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-range-thumb/index.html b/files/es/web/css/_doublecolon_-moz-range-thumb/index.html new file mode 100644 index 0000000000..97900536ba --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-thumb/index.html @@ -0,0 +1,119 @@ +--- +title: '::-moz-range-thumb' +slug: 'Web/CSS/::-moz-range-thumb' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento CSS ::-moz-range-thumb representa el elemento que el usuario puede usar en el "camino" marcado por un elemento  {{HTMLElement("input")}} con type="range" para alterar su valor numérico.

+ +
+

Si se usa  ::-moz-range-thumb en cualquier elemento  que no sea  <input type="range"> ni se seleccionará nada ni se conseguirá efecto alguno.

+
+ +

Syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido CSS

+ +
input[type=range]::-moz-range-thumb {
+  background-color: green;
+}
+
+ +

Contenido HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Salida

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progreso que utilizara este estilo se visualizarías de la siguiente manera:

+ +

The thumb of the <input type=right> styled in green

+ +

Especificaciones

+ +

No es parte de ninguna especificación. El un pseudo-elemento propietario de Gecko.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-range-track/index.html b/files/es/web/css/_doublecolon_-moz-range-track/index.html new file mode 100644 index 0000000000..f702065abc --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-range-track/index.html @@ -0,0 +1,119 @@ +--- +title: '::-moz-range-track' +slug: 'Web/CSS/::-moz-range-track' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-moz-range-track' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento  CSS ::-moz-range-track representa la trayectoría, es decir la ranura sobre la cual se desliza el indicador de un  {{HTMLElement("input")}} con type="range".

+ +
+

Si usamos  ::-moz-range-track con cualquier otra cosa que no sea un  <input type="range"> ni seleccionaremos nada ni se mostrará efecto alguno.

+
+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido CSS

+ +
input[type=range]::-moz-range-track {
+  background-color: green;
+}
+
+ +

Contenido HTML

+ +
<input type="range" min="0" max="100" step="5" value="50"/>
+
+ +

Salida

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Un barra de progreso con ese estilo tendrá una apariencia similar a la siguiente:

+ +

A range with the track green.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario específico del motor Gecko.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html new file mode 100644 index 0000000000..bbb86d7207 --- /dev/null +++ b/files/es/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html @@ -0,0 +1,79 @@ +--- +title: '::-moz-scrolled-page-sequence' +slug: 'Web/CSS/::-moz-scrolled-page-sequence' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Referencia + - Referencia CSS +translation_of: 'Web/CSS/::-moz-scrolled-page-sequence' +--- +

{{CSSRef}}{{non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-moz-scrolled-page-sequence CSS representa el fondo de la previsualización para impresión.

+ +

Especificaciones

+ +

Not part of any specification.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-browse/index.html b/files/es/web/css/_doublecolon_-ms-browse/index.html new file mode 100644 index 0000000000..7ad4e3c6ec --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-browse/index.html @@ -0,0 +1,97 @@ +--- +title: '::-ms-browse' +slug: 'Web/CSS/::-ms-browse' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-browse' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS  ::-ms-browse representa el botón para abrir el selector de archivos de un  {{HTMLElement("input")}} con type="file".

+ +
+

Nota: No se pueden usar todas las propiedades con este pseudo-elemento. Hay una  lista de propiedades permitidas en la documentación MSDN.

+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<label>Select image: <input type="file"></label>
+ +

Contenido CSS

+ +
input[type="file"]::-ms-browse
+{
+  color: red;
+  background-color: yellow;
+}
+ +

Salida

+ +

{{EmbedLiveSample('Example')}}

+ +

Resultado del ejemplo

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación pero Miscrosoft tiene una  descripción de ::-ms-browse en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_doublecolon_-ms-check/index.html b/files/es/web/css/_doublecolon_-ms-check/index.html new file mode 100644 index 0000000000..ce4c6e1c6b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-check/index.html @@ -0,0 +1,114 @@ +--- +title: '::-ms-check' +slug: 'Web/CSS/::-ms-check' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-check' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-check representa la marca de selección de un {{HTMLElement("input")}} con  type="checkbox" o type="radio".

+ +

No es un elemento estándar y es únicamente soportado por Internet Explorer y Edge, tal y como indica el prefijo  (-ms que indica Microsoft).

+ +

Síntaxis

+ +
selector::-ms-check
+
+ +

Ejemplos

+ +

Contenido HTML

+ +
<form>
+    <label for="redButton">Red</label>
+    <input type="radio" id="redButton"><br>
+    <label for="greenCheckbox">Green</label>
+    <input type="checkbox" id="greenCheckbox">
+</form>
+ +

Contenido CSS

+ +
input, label {
+    display: inline;
+}
+
+input[type=radio]::-ms-check {
+    color: red; /* Hará que la marca de selección sea roja cuando seleccionemos el botón */
+}
+
+input[type=checkbox]::-ms-check {
+    color: green; /* Hará que la marca de selección sea rverde cuando seleccionemos el botón */
+}
+
+ +

Más abajo tiene disponible un ejemplo para poder probar. El pantallazo a la izquierda muestra que es lo que sucedería al haer click en caso de que no tengas acceso a Internet Explorer o Edge.

+ +

{{ EmbedLiveSample('Examples', '', '', 'https://mdn.mozillademos.org/files/13392/ms_check', 'Web/CSS/::-ms-check') }}

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Microsoft tienes una descripcón en MSDN que enumera varias propiedades que se pueden modificar en este pseudo-elemento.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileiOS WebKit
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
 
diff --git a/files/es/web/css/_doublecolon_-ms-clear/index.html b/files/es/web/css/_doublecolon_-ms-clear/index.html new file mode 100644 index 0000000000..d5fe9d7ffa --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-clear/index.html @@ -0,0 +1,113 @@ +--- +title: '::-ms-clear' +slug: 'Web/CSS/::-ms-clear' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-clear' +--- +

{{non-standard_header}}{{CSSRef}}

+ +

Resumen

+ +

El pseudo-elemento CSS  ::-ms-clear sirve para representar un botón (el botón "borrar") en el borde de un elemento  {{HTMLElement("input")}} con type="text". Este botón elimina el valor actual del elemento {{HTMLElement("input")}}. El botón y pseudo-elemento no son parte del estándar y únicamente son soportados por los navegadores Internet Explorer 10 y 11 y Edge 12+, de ahí el prefijo del vendedor  (`-ms` por Microsoft). El botón de borrado sólo se muestra en elementos  {{HTMLElement("input")}} con type="text" que hayan recibido el foco y no estén vacíos.

+ +

Síntaxis

+ +
 selector::-ms-clear
+ +

Ejemplos

+ +

Contenido HTML

+ +
<form>
+   <label for="firstname">First name:</label>
+   <input type="text" id="firstname" name="firstname" placeholder="First name"><br>
+
+   <label for="lastname">Last name:</label>
+   <input type="text" id="lastname" name="lastname" placeholder="Second name">
+</form>
+
+ +

Contenido CSS

+ +
input,
+label {
+    display: block;
+}
+
+input[type=text]::-ms-clear {
+    color: red; /* Establece el color de la cruz a rojo */
+    /* La cruz se puede ocultar si fijamos el atributo display a "none" */
+}
+ +

{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/::-ms-clear') }}

+ +

El siguiente pantallazo muestra, para aquellos que no tengan acceso a IE 10/11 o a  Edge 12+, cómo quedaría esta característica:

+ +

 

+ +

Especificaciones

+ +

No es parte de ninguna especificación

+ +

Microsoft tiene una descripción en MSDN que enumera las distintas propiedades que podemos establecer para este tipo de pseudo-elementos.

+ +
+

Esta característica sólo está disponible para IE 10-11, ha sido eliminada en la versión más reciente de Microsoft Edge.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}10.0 [1]
+ Edge 12+		{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] En un {{HTMLElement("input")}} de texto al que se le haya dada estilo con  {{cssxref("text-align")}}: right,  si se muestra el botón de borrado,  éste cortará el borde derecho del valor contenido en el {{HTMLElement("input")}}. Una solución es esconder el botón usando  {{cssxref("display")}}: none.

diff --git a/files/es/web/css/_doublecolon_-ms-expand/index.html b/files/es/web/css/_doublecolon_-ms-expand/index.html new file mode 100644 index 0000000000..99c3a18ccd --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-expand/index.html @@ -0,0 +1,25 @@ +--- +title: '::-ms-expand' +slug: 'Web/CSS/::-ms-expand' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - No estandar + - Pesudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-expand' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-expand representa el botón dentro un {{HTMLElement("select")}} que abre y cierra el menú desplegable que contiene los disferentes elementos {{HTMLElement("option")}}. Normalemente tiene apariencia de triángulo que apunta hacia abajo..

+ +

Especificaciones

+ +

No es parte de ninguna especificación

+ +

Microsoft tiene una descripción en MSDN.

diff --git a/files/es/web/css/_doublecolon_-ms-fill-lower/index.html b/files/es/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..33ba4292b4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,88 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-fill-lower representa la porción de la "ruta" (la ranura sobre la cual el indicador desliza) de un {{HTMLElement("input")}} con type="range", lo que corresponde a los valores inferiores al actualmente seleccionador por el indicador.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Microsoft tiene  una  descriptción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-fill-upper/index.html b/files/es/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..1806c2890f --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,88 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-ms-fill-upper representa la parte de la ruta  (la ranura sobre la que el indicador desliza) de un  {{HTMLElement("input")}} con type="range", que corresponde a valores mayores que el valor actual en el que se encuentra el indicador.

+ +

Especificaciones

+ +

No es parte de ninguna especificación

+ +

Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-fill/index.html b/files/es/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..6da2a8a77b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,106 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - No estándar(2) + - Pseudo-lemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-fill CSS representa la porción rellena de un elemento {{HTMLElement("progress")}}. Es un pseudo-elemento no estándar y específico de Internet Explorer 10+, de ahí el prefijo del vendedor.

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Especificaciones

+ +

No es parte de ninguna especificación. Microsoft tiene una descripción en MSDN.

+ +

Ejemplo

+ +

Contenido CSS

+ +
progress::-ms-fill {
+  background-color: orange;
+}
+ +

Contenido HTML

+ +
<progress value="10" max="50">
+
+ +

Salida

+ +

{{EmbedLiveSample("Example", 300, 50)}}

+ +

Una barra de progreso a la que se aplique ese estilo tendrá una apariencia similar a la siguiente:

+ +

Progress Bar with Orange Fill

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-reveal/index.html b/files/es/web/css/_doublecolon_-ms-reveal/index.html new file mode 100644 index 0000000000..ed8e17278d --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-reveal/index.html @@ -0,0 +1,72 @@ +--- +title: '::-ms-reveal' +slug: 'Web/CSS/::-ms-reveal' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-reveal' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS  ::-ms-reveal se usa para mostrar y aplicar estilos al botón "mostrar contraseña" que normalmente se pone al lado de un elemento  {{HTMLElement("input")}} con type="password" en Internet Explorer 10+. Este botón revela el valor del campo contraseña en texto plano (en vez de los asteriscos que son usados por motivos de privacidad). Este botón y el pseudo-elemento no son estándar y son específicos de Internet Explorer 10+,  de ahí ese prefijo de vendedor.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Microsoft tiene una descripción en MSDN.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/es/web/css/_doublecolon_-ms-thumb/index.html b/files/es/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..3e81694509 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,44 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elementos CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS  ::-ms-thumb representa el indicador que el usuario puede mover a través de la pista o ranura de un elemento  {{HTMLElement("input")}} con type="range" para alterar su valor numérico.

+ +

Especificación

+ +

No es parte de ninguna especificación, aunque  Microsoft tiene una descripción en MSDN.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-ticks-after/index.html b/files/es/web/css/_doublecolon_-ms-ticks-after/index.html new file mode 100644 index 0000000000..5f49d4a9b0 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-ticks-after/index.html @@ -0,0 +1,84 @@ +--- +title: '::-ms-ticks-after' +slug: 'Web/CSS/::-ms-ticks-after' +tags: + - CSS + - No standard + - Pseudo-elementos + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-ticks-after' +--- +
{{CSSRef}}
+ +
{{non-standard_header}}
+ +
 
+ +

El  CSS pseudo-elemento  ::-ms-ticks-after es una extensión de extensión de Microsoft que aplica uno o más estilos, a las marcas de tick que aparecen despues del marcador de un control slider.  El control slider es una posible representación de una entrada tipo rango( <input type="range"> ).

+ +

Esas marcas no son mostradas por omisión.  Para mostrarlas, se debe de establecer la propiedad display del control a block  {{cssxref("display")}}.

+ +

Es posible usar los pseudo elementos  ::-ms-ticks-after, {{ cssxref("::-ms-ticks-before") }},  y {{ cssxref("::-ms-track") }} a la vez. Para hacerlo debe crear tres tres conjuntos de marcas, pero la mejor experiencia deusuario es con un conjunto. Par quitar todas las marcas , establezca la propiedad color {{ cssxref("color") }} a transparente.

+ +

Allowable Properties

+ +

Solo una de las siguientes propiedades CSS puede ser usada con  ::-ms-ticks-after en su selector. Otras propiedadess seran ignoradas.

+ + + +

Syntax

+ +
  {{csssyntax}}
+
diff --git a/files/es/web/css/_doublecolon_-ms-track/index.html b/files/es/web/css/_doublecolon_-ms-track/index.html new file mode 100644 index 0000000000..e4feb900b5 --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-track/index.html @@ -0,0 +1,48 @@ +--- +title: '::-ms-track' +slug: 'Web/CSS/::-ms-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estádar + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-track' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El  pseudo-elemento CSS ::-ms-track representa la trayectoria (la ranura sobre la cual se desliza el indicador) de un  {{HTMLElement("input")}} con type="range".

+ +

Specification

+ +

No es parte de ninguna especificación

+ +

Microsoft tiene una descripción en MSDN.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-ms-value/index.html b/files/es/web/css/_doublecolon_-ms-value/index.html new file mode 100644 index 0000000000..618063cb2b --- /dev/null +++ b/files/es/web/css/_doublecolon_-ms-value/index.html @@ -0,0 +1,31 @@ +--- +title: '::-ms-value' +slug: 'Web/CSS/::-ms-value' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - No estandar + - Pseudo-elemento + - Referencia +translation_of: 'Archive/Web/CSS/::-ms-value' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-ms-value aplica reglas al valor / contenido de un {{HTMLElement("input")}} o de un {{HTMLElement("select")}}. En este pseudo-elemento sólo se pueden establecer ciertas propiesdades, las demás no tendrán efecto.

+ +

Síntaxis

+ +
input::-ms-value { propiedades de estilo }
+
+select::-ms-value { propiedades de estilo }
+ +

Especificaciones

+ +

No es parte de ninguna espeficiación

+ +

Microsoft tiene una descripción en MSDN.

diff --git a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html new file mode 100644 index 0000000000..5d14e35e58 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html @@ -0,0 +1,100 @@ +--- +title: '::-webkit-file-upload-button' +slug: 'Web/CSS/::-webkit-file-upload-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::file-selector-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-webkit-file-upload-button  representa el botón de los elementos {{HTMLElement("input") }} con  type="file".

+ +

No es estándar y es sólo soportado por los navegadores compatibles con WebKit/Blink como Chrome, Opera and Safari (esto queda indicado por el prefijo -webkit ).

+ +

Síntaxis

+ +
selector::-webkit-file-upload-button
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<form>
+    <label for="fileUpload">Upload file</label><br>
+    <input type="file" id="fileUpload">
+</form>
+ +

Contenido CSS

+ +
input, label {
+    display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+    border: 1px solid grey;
+    background: #FFFAAA;
+}
+ +

Más abajo tienes un ejemplo para probar. El pantallazo a la izquierda muestra como quedaría el botón en caso de que no puedas acceder a Chrome, Opera o Safari. 

+ +

{{ EmbedLiveSample('Example', '', '', 'https://mdn.mozillademos.org/files/13400/webkit_file_upload_button_screen.png', 'Web/CSS/::-webkit-file-upload-button') }}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html b/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html new file mode 100644 index 0000000000..d6dcc041b4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-inner-spin-button/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-inner-spin-button' +slug: 'Web/CSS/::-webkit-inner-spin-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-inner-spin-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS  ::-webkit-inner-spin-button se usa para dar estilo a la parte interior del botón ruleta para seleccionar números  en los input con type="number".

+ +

Ejemplo

+ +

Contenido CSS

+ +
input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+ +

Contenido HTML

+ +
<input type="number">
+
+ +

{{EmbedLiveSample("Example", 200, 30)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatversionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html new file mode 100644 index 0000000000..b765b529a4 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html @@ -0,0 +1,85 @@ +--- +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' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

El  pseudo-elemento no estándar y propietario ::-webkit-input-placeholder representa el marcador de posición de texto (placeholder text) de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html b/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html new file mode 100644 index 0000000000..f84bebf096 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-bar/index.html @@ -0,0 +1,103 @@ +--- +title: '::-webkit-meter-bar' +slug: 'Web/CSS/::-webkit-meter-bar' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-bar' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

La pseudo-clase ::-webkit-meter-bar establece el estilo para el fondo del elemento meter que contiene el valor.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Puntuación sobre 10</meter>
+ +
meter {
+   /* Resetea a la apariencia por defecto */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-bar  {
+  background: #eee;
+  box-shadow: 0 2px 3px rgba (0, 0, 0, 0.2) inset;
+  border-radius: 3px;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Note: Sólo funciona en navegadores basados en Webkit/Blink.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

Los  pseudo-elementos usados en WebKit/Blink para dar estilos a otras partes del elemento {{htmlelement("meter")}} :

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html new file mode 100644 index 0000000000..d309e32dfc --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-even-less-good-value/index.html @@ -0,0 +1,91 @@ +--- +title: '::-webkit-meter-even-less-good-value' +slug: 'Web/CSS/::-webkit-meter-even-less-good-value' +translation_of: 'Web/CSS/::-webkit-meter-even-less-good-value' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento ::-webkit-meter-even-less-good-value da color rojo al elemento meter cuando el valor y el atributo optimum están fuera del rango establecido y en zonas opuestas. Por ejemplo valor < low < high < optimum o valor> high > low > optimum.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Score out of 10</meter>
+ +
meter::-webkit-meter-even-less-good-value {
+  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
+  height: 100%;
+  box-sizing: border-box;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Note: This will only work in Webkit/Blink-based browsers.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

The pseudo-elements used by WebKit/Blink to style other parts of a {{htmlelement("meter")}} element are as follows:

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html b/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html new file mode 100644 index 0000000000..b4a1d5e657 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-inner-element/index.html @@ -0,0 +1,106 @@ +--- +title: '::-webkit-meter-inner-element' +slug: 'Web/CSS/::-webkit-meter-inner-element' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-inner-element' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-meter-inner-element es un pseudo-elemento propietario de WebKit CSS para seleccionar y aplicar estilo al contenedor exterior de un elemento {{htmlelement("meter")}}. Es necesario una marca adicional para mostrar este elemento como si fuera de sólo lectura.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Score out of 10</meter>
+ +
meter {
+  /* Resetear la apariencia por defecto*/
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+meter::-webkit-meter-inner-element {
+  -webkit-appearance: inherit;
+  box-sizing: inherit;
+  border: 1px solid #aaa;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Nota: Sólo funcionará en navegadores basasdo en Webkit/Blink.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{htmlelement("meter")}} :

+ + + +

 
+  

diff --git a/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html new file mode 100644 index 0000000000..1ba5550c80 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-optimum-value/index.html @@ -0,0 +1,103 @@ +--- +title: '::-webkit-meter-optimum-value' +slug: 'Web/CSS/::-webkit-meter-optimum-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-optimum-value' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-meter-optimum-value da estilo al elemento  meter cuando su valor está dentro del rango min-max establecido.

+ +

El color por defecto es verde.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Puntuación sobre 10</meter>
+ +
meter::-webkit-meter-bar {
+  /* Necesario para eliminar la propiedad de fondo por defecto */
+  background : none;
+  background-color : whiteSmoke;
+  box-shadow : 0 5px 5px -5px #333 inset;
+}
+
+meter::-webkit-meter-optimum-value {
+  box-shadow: 0 5px 5px -5px #999 inset;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Nota: Sólo funciona en navegadores basado en Webkit/Blink.

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
Soporte básicoFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

Los pseudo-elementos de WebKit/Blink para dar estilos a otras partes de  {{htmlelement("meter")}}:

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html b/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html new file mode 100644 index 0000000000..6213d4afa9 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-meter-suboptimum-value/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-meter-suboptimum-value' +slug: 'Web/CSS/::-webkit-meter-suboptimum-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-meter-suboptimum-value' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-meter-suboptimum-value da color amarillo al elemento meter cuando su valor cae fuera del rango mix-max.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ejemplos

+ +
<meter min="0" max="10" value="6">Puntuación sobre 10</meter>
+ +
meter::-webkit-meter-suboptimum-value {
+  background: -webkit-gradient linear, left top, left bottom,
+  height: 100%;
+  box-sizing: border-box;
+}
+ +

{{ EmbedLiveSample('Ejemplos', '100%', 50) }}

+ +
+

Notae: Sólo funciona en navegadores basados en Webkit/Blink

+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ +

Los pseudo-elementos usados por WebKit/Blink para dar estilo a otras partes del elemento {{htmlelement("meter")}} :

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html b/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html new file mode 100644 index 0000000000..8351b2fa2e --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-outer-spin-button/index.html @@ -0,0 +1,96 @@ +--- +title: '::-webkit-outer-spin-button' +slug: 'Web/CSS/::-webkit-outer-spin-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-outer-spin-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-outer-spin-button se usa para dar estilo a la parte exterior del selector de números  en un botón input de tipo number.

+ +

Ejemplo

+ +

Contenido CSS

+ +
input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+ +

Contenido HTML

+ +
<input type="number">
+
+ +

{{EmbedLiveSample("Ejemplo", 200, 30)}}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatversionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html b/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html new file mode 100644 index 0000000000..7aff28f56d --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-bar/index.html @@ -0,0 +1,112 @@ +--- +title: '::-webkit-progress-bar' +slug: 'Web/CSS/::-webkit-progress-bar' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-bar' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-webkit-progress-bar representa la barra entera del elemento {{HTMLElement("progress")}} . Normalmente sólo está visible a partir de la porción rellena de la barra ya que, por defecto se muestra debajo del pseudo-lemento  {{ cssxref("::-webkit-progress-value") }}. Es hijo del pseudo-elemento  {{cssxref("::-webkit-progress-inner-element")}} y padre del pseudo-elemento  {{cssxref("::-webkit-progress-value")}}.

+ +
+

Nota: para que  ::-webkit-progress-value tenga efecto , en el elemento <progress> {{cssxref("-webkit-appearance")}} debe tener el valor none.

+
+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ejemplo

+ +

Contenido CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-bar {
+   background-color: orange;
+}
+
+ +

Contenido HTML

+ +
<progress value="10" max="50">
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 200, 50)}}

+ +

Una barra de progreso que use el estilo indicado anteriormente será similar a la siguiente:

+ +

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html b/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html new file mode 100644 index 0000000000..55bb247275 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-inner-element/index.html @@ -0,0 +1,112 @@ +--- +title: '::-webkit-progress-inner-element' +slug: 'Web/CSS/::-webkit-progress-inner-element' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-inner-element' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-webkit-progress-inner-element representa la parte más exterior de un elemento  {{HTMLElement("progress")}}.  Es el padre del pseudo-elemento {{cssxref("::-webkit-progress-bar")}}.

+ +
+

Nota: para que  ::-webkit-progress-inner-element tenga efecto , hay que darle valor none a {{cssxref("-webkit-appearance")}} en el elemento  <progress>.

+
+ +

Ejemplo

+ +

Contenido CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-inner-element {
+  border: 2px solid black;
+}
+
+ +

Contenido HTML

+ +
<progress value="10" max="50">
+
+ +

Salida

+ +

{{EmbedLiveSample("Ejemplo", 200, 50)}}

+ +

Una barra de progreso que use el estilo especificado anteriormente tendrá una apariencia similar a la siguiente::

+ +

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propitario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-progress-value/index.html b/files/es/web/css/_doublecolon_-webkit-progress-value/index.html new file mode 100644 index 0000000000..4e6d5bd10f --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-progress-value/index.html @@ -0,0 +1,111 @@ +--- +title: '::-webkit-progress-value' +slug: 'Web/CSS/::-webkit-progress-value' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-progress-value' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-progress-value representa la parte rellena de la barra del elemento {{HTMLElement("progress")}}. Es hija del pseudo-elemento {{cssxref("::-webkit-progress-bar")}}.

+ +
+

Nota: para que  ::-webkit-progress-value tenga efecto en el elemento <progress>  {{cssxref("-webkit-appearance")}} deberá tener none como valor.

+
+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un elemento propietario y específico de WebKit/Blink.

+ +

Ejemplo

+ +

Contenido CSS

+ +
progress {
+  -webkit-appearance: none;
+}
+
+::-webkit-progress-value {
+  background-color: orange;
+}
+ +

Contenido HTML

+ +
<progress value="10" max="50">
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 200, 50)}}

+ +

Una barra de progreso con el estilo indicado anteriormente será similar a esta:

+ +

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html b/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html new file mode 100644 index 0000000000..4e89ab3087 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-scrollbar/index.html @@ -0,0 +1,37 @@ +--- +title: '::-webkit-scrollbar' +slug: 'Web/CSS/::-webkit-scrollbar' +tags: + - CSS + - NeedsCompatTable + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::-webkit-scrollbar' +--- +

{{Draft()}}{{CSSRef}}

+ +

Resumen

+ +

El pseudo-elemento CSS  ::-webkit-scrollbar afecta el estilo de la barra de desplazamiento asociada a un elemento.

+ +
+

::-webkit-scrollbar sólo está disponible en navegadores basados en  WebKit (p.e., Google Chrome).

+
+ +

Ejemplo

+ +
.visible-scrollbar, .invisible-scrollbar {
+  display: block;
+  width: 10em;
+  overflow: auto;
+}
+.invisible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+ +
<div class="visible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
+<div class="invisible-scrollbar">Thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongword</div>
+
+ +

{{EmbedLiveSample('Ejemplo')}}

diff --git a/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html b/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html new file mode 100644 index 0000000000..753ecad019 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-slider-runnable-track/index.html @@ -0,0 +1,40 @@ +--- +title: '::-webkit-slider-runnable-track' +slug: 'Web/CSS/::-webkit-slider-runnable-track' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-webkit-slider-runnable-track' +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El pseudo-elemento CSS ::-webkit-slider-runnable-track representa el trayecto (la ranura sobre la que se desliza el indicador) de un  {{HTMLElement("input")}} con type="range".

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html new file mode 100644 index 0000000000..bd00c701d3 --- /dev/null +++ b/files/es/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -0,0 +1,38 @@ +--- +title: '::-webkit-slider-thumb' +slug: 'Web/CSS/::-webkit-slider-thumb' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo-elemento + - Pseudo-elemento CSS + - Referencia +translation_of: 'Web/CSS/::-webkit-slider-thumb' +--- +
admi{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El  pseudo-elemento  CSS ::-webkit-slider-thumb representa el selector que el usuario puede mover a lo largo de la ranura de un elemento  {{HTMLElement("input")}} con  type="range" para modificar su valor numérico.

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_after/index.html b/files/es/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..c5fe24fedb --- /dev/null +++ b/files/es/web/css/_doublecolon_after/index.html @@ -0,0 +1,182 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Presentación + - Pseudo-elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +
+ +
+

En CSS, ::after crea un pseudo-elemento que es el último hijo del elemento seleccionado. Es comunmente usado para añadir contenido cosmético a un elemento con la propiedad {{CSSxRef("content")}}.Es en linea (inline) de forma predeterminada.

+ +
/* Añdade una flecha después de los enlaces */
+a::after {
+  content: "→";
+}
+ +
+

Nota: Los pseudo-elementos generados por  ::before y ::after son contenidos por la caja de formato del elemento, y por lo tanto no aplica a elementos reemplazados como los elementos {{HTMLElement("img")}}, o {{HTMLElement("br")}}.

+
+
+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +
+

Nota: CSS3 introdujo la notación ::after (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :after, añadido en CSS2.

+
+ +

Ejemplos

+ +

Uso simple

+ +

Crearemos dos clases: una para párrafos aburridos y otra para párrafos interesantes. Después podremos resaltar cada párrafo añadiendo un pseudo-elemento al final del mismo.

+ +

HTML

+ +
<p class="boring-text">Here is some plain old boring text.</p>
+<p>Here is some normal text that is neither boring nor exciting.</p>
+<p class="exciting-text">Contributing to MDN is easy and fun.</p>
+ +

CSS

+ +
.exciting-text::after {
+  content: " <- EXCITING!";
+  color: green;
+}
+
+.boring-text::after {
+  content: " <- BORING";
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Uso_simple', 500, 150)}}

+ +

Ejemplo decorativo

+ +

Podemos estilizar el texto o imágenes de la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.

+ +

HTML

+ +
<span class="ribbon">Look at the orange box after this text. </span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "This is a fancy orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_decorativo', 450, 20)}}

+ +

Tooltips

+ +

El siguiente ejemplo muestra el uso del pseudo-elemento ::after en conjunto con la expresión CSS attr() y el atributo data personalizado data-descr para crear un tooltip de tipo glosario, completamente en CSS. Mira la vista previa más abajo, o también puedes ver el ejemplo en una página separada.

+ +

HTML

+ +
<p>Here we have some
+  <span tabindex="0" data-descr="collection of words and punctuation">text</span> with a few
+  <span tabindex="0" data-descr="small popups that appear when hovering">tooltips</span>.
+</p>
+ +

CSS

+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after,
+span[data-descr]:focus::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}Sin cambios significativos desde la especificación previa.
{{Specname("CSS3 Transitions", "#animatable-properties", "transitions on pseudo-element properties")}}{{Spec2("CSS3 Transitions")}}Permite transiciones en propiedades definidas en los pseudo-elementos.
{{Specname("CSS3 Animations", "", "animations on pseudo-element properties")}}{{Spec2("CSS3 Animations")}}Permite animaciones en propiedades definidas en los pseudo-elementos.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Introduce la sintaxis de doble símbolo :
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Definición inicial, usando sintáxis de un solo símbolo :
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("css.selectors.after")}}

+
+ +

Véase también

+ + diff --git a/files/es/web/css/_doublecolon_backdrop/index.html b/files/es/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..931a893f81 --- /dev/null +++ b/files/es/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,132 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Layout + - NeedsContent + - Pantalla completa + - Pseudo Elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

Cada uno de los elementos en la pila de la  capa superior posee un  ::backdrop {{Cssxref("pseudo-elements", "pseudo-element")}}. Este pseudo-elemento es una caja que se muestra inmediatamente debajo del elemento (y sobre el elemento inmediatamente inferior de la pila, si es que hay), dentro de dicha capa superior.

+ +

El pseudo-elemento ::backdrop se puede usar para crear un fondo que oculte el documento subyacente detrás de la pila de la capa superior, p.ej., para el elemento que es mostrado a pantalla complete tal  y como se describe en esta especificación.

+ +

No se hereda ni es heredado de ningún elemento. Tampoco se hacen restricciones sobre qué propiedades se aplican a este pseudo-elemento.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico32.0 {{property_prefix("webkit")}}
+ 37.0		{{CompatGeckoDesktop("47")}} [1]11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
en la etiqueta <dialog>32.0 {{property_prefix("webkit")}}
+ 37.0		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
a pantalla completa{{CompatNo}}{{CompatGeckoDesktop("47")}} [1]11 {{property_prefix("ms")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
característicaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("47")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
en la etiqueta <dialog>{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
a pantalla completa{{CompatNo}}{{CompatGeckoMobile("47")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Ver {{bug(1064843)}}

+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_before/index.html b/files/es/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..3f75cb9266 --- /dev/null +++ b/files/es/web/css/_doublecolon_before/index.html @@ -0,0 +1,231 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Presentación + - Pseudo-elemento CSS + - Referencia + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

En CSS, ::before crea un pseudoelemento que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad {{cssxref("content")}}. Este elemento se muestra en línea con el texto de forma predeterminada.

+ +
/* Añade un corazón antes de los enlaces */
+a::before {
+  content: "♥";
+}
+ +
+

Nota: Los pseudoelementos generados por ::before y ::after son contenidos por la caja de formato del elemento, y por lo tanto, no aplica a elementos de reemplazo como los elementos {{htmlelement("img")}}, o {{htmlelement("br")}}.

+
+ +

Sintaxis

+ +
{{csssyntax}}
+ +
+

Nota: CSS3 introdujo la notación ::before (con doble dos puntos) para diferenciar pseudo-clases con pseudo-elementos. Los navegadores aceptan :before, añadido en CSS2.

+
+ +

Ejemplos

+ +

Añadiendo comillas

+ +

Un ejemplo simple del uso del pseudoelemento ::before es el proporcionar comillas. Aquí, usamos ::before y {{Cssxref("::after")}} para insertar caracteres de comillas.

+ +

HTML

+ +
<q>Some quotes</q>, he said, <q>are better than none</q>.
+ +

CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Añadiendo_comillas', '500', '50', '')}}

+ +

Ejemplo decorativo

+ +

Podemos estilizar el texto o imágenes en la propiedad {{cssxref("content")}} de casi cualquier forma que queramos.

+ +

HTML

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo_decorativo', 450, 60)}}

+ +

Lista de tareas

+ +

En este ejemplo, creamos una lista de tareas simple usando pseudo-elementos. Este método puede ser usado comúnmente para añadir detalles a la interfaz y mejorar su experiencia de usuario.

+ +

HTML

+ +
<ul>
+  <li>Buy milk</li>
+  <li>Take the dog for a walk</li>
+  <li>Exercise</li>
+  <li>Write code</li>
+  <li>Play music</li>
+  <li>Relax</li>
+</ul>
+
+ +

CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Aquí se está ejecutando el ejemplo de arriba. Nótese que no se están usando íconos, y la marca de selección en realidad es el pseudoelemento ::before que ha sido estilizado en CSS. Puedes interactuar con el ejemplo para ver los cambios.

+ +

Resultado

+ +

{{EmbedLiveSample('Lista_de_tareas', 400, 300)}}

+ +

Caracteres especiales

+ +

Como esto es CSS y no HTML, no se pueden usar entidades de marcado en los valores del contenido. Si se necesita usar caracteres especiales, y no se puede ingresar literalmente en la cadena de contenido CSS, se utiliza una secuencia de escape unicode, consistiendo de una barra invertida seguida de un valor unicode hexadecimal.

+ +

HTML

+ +
<ol>
+  <li>Crack Eggs into bowl</li>
+  <li>Add Milk</li>
+  <li>Add Flour</li>
+  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
+  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
+  <li>Fry until the top of the pancake loses its gloss</li>
+  <li>Flip it over and fry for a couple more minutes</li>
+  <li>serve with your favorite topping</li>
+</ol>
+ +

CSS

+ +

+li {
+  padding:0.5em;
+}
+
+li[aria-current='step'] {
+  font-weight:bold;
+}
+
+li[aria-current='step']::after {
+  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
+  display: inline;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}Sin cambios significativos desde la especificación previa.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Permite transiciones en propiedades definidas a los pseudo-elementos.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Permite animaciones en propiedades definidas a los pseudo-elementos.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introduce la sintaxis de doble símbolo :
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Definición inicial, usando la sintaxis de un símbolo :
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("css.selectors.before")}}

+
+ +

Véase también

+ + diff --git a/files/es/web/css/_doublecolon_cue/index.html b/files/es/web/css/_doublecolon_cue/index.html new file mode 100644 index 0000000000..033849a603 --- /dev/null +++ b/files/es/web/css/_doublecolon_cue/index.html @@ -0,0 +1,113 @@ +--- +title: '::cue' +slug: 'Web/CSS/::cue' +tags: + - '::cue' + - Archivos multimedia + - CSS + - Formato de pistas de texto para la web + - Pseudo-elemento + - Referencia + - Selector + - WebVTT + - anotaciones + - subtítulos +translation_of: 'Web/CSS/::cue' +--- +
{{CSSRef}}
+ +

El pseudo-elemento CSS ::cue señala las pistas de texto WebVTT dentro del elemento seleccionado. Esto puede ser usado para estilizar subtítulos y otras pistas de texto multimedia con pistas de texto.

+ +
::cue {
+  color: yellow;
+  font-weight: bold;
+}
+ +

Las propiedades son aplicadas al cojunto completo de anotaciones como si fuesen una unidad. La única excepción es que background y sus versiones largas se aplican a cada pista de texto individualmente para evitar crear cajas y oscurecer inesperadamente grandes partes de los archivos multimedia.

+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +

Propiedades permitidas

+ +

Las reglas cuyos selectores incluyen este elemento solo pueden usar las siguientes propiedades CSS:

+ + + +

Ejemplos

+ +

Estilizando las anotaciones WebVTT como blanco sobre negro

+ +

El siguiente CSS ajusta el estilo de las anotaciones para que el texto sea blanco y el fondo sea una caja negro translúcido.

+ +
::cue {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName("WebVTT", "#the-cue-pseudo-element", "::cue")}}{{Spec2("WebVTT")}}Definición inicial.
+ +

Compatibilidad con los navegadores

+ + + +

{{Compat("css.selectors.cue")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/_doublecolon_first-letter/index.html b/files/es/web/css/_doublecolon_first-letter/index.html new file mode 100644 index 0000000000..3e243869b6 --- /dev/null +++ b/files/es/web/css/_doublecolon_first-letter/index.html @@ -0,0 +1,135 @@ +--- +title: '::first-letter (:first-letter)' +slug: 'Web/CSS/::first-letter' +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-letter' +--- +
{{CSSRef}}
+ +

El pseudo-elemento ::first-letter aplica estilos a la primera letra de la primera línea un elemento de bloque, sólo cuando no es precedido de otro contenido (como imágenes o tablas).

+ +
/* Selecciona la primera letra de <p> */
+p::first-letter {
+  font-size: 130%;
+}
+ +

La primera letra de un elemento no es siempre fácil de identificar:

+ + + +
+

CSS3 introdujo la notación::first-letter (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan:first-letter, introducido en CSS2.

+
+ +

Propiedades permitidas

+ +

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-letter:

+ + + +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Hace que la primera letra de cada párrafo sea roja y grande.

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
+<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
+<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+  aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+  esse molestie consequat.</p>
+<p>-El comienzo es un signo de puntuación especial.</p>
+<p>_El comienzo es un signo de puntuación especial.</p>
+<p>"El comienzo es un signo de puntuación especial.</p>
+<p>'El comienzo es un signo de puntuación especial.</p>
+<p>*El comienzo es un signo de puntuación especial.</p>
+<p>#El comienzo es un signo de puntuación especial.</p>
+<p>「特殊的汉字标点符号开头。</p>
+<p>《特殊的汉字标点符号开头。</p>
+<p>“特殊的汉字标点符号开头。</p>
+ +

CSS

+ +
p::first-letter {
+  color: red;
+  font-size: 130%;
+}
+ +

Result

+ +

{{ EmbedLiveSample('Example', '80%', 420) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}{{ Spec2('CSS4 Pseudo-Elements')}}Generaliza propiedades permitidas, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.
{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}{{ Spec2('CSS3 Text Decoration')}}Permite el uso de {{cssxref("text-shadow")}} con ::first-letter.
{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}{{ Spec2('CSS3 Selectors') }}Introducción de la sintaxis de doble dos puntos. Definición de casos particulares, como con idiomas específicos (ej., el dígrafo holandés IJ).
{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}{{ Spec2('CSS2.1') }}Sin cambios.
{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}{{ Spec2('CSS1') }}Definición inicial, uso de la sintaxis de doble dos puntos.
+ +

Compatibilidad

+ +
+ + +

{{Compat("css.selectors.first-letter")}}

+
+ +

Ver También

+ + diff --git a/files/es/web/css/_doublecolon_first-line/index.html b/files/es/web/css/_doublecolon_first-line/index.html new file mode 100644 index 0000000000..671e7716ef --- /dev/null +++ b/files/es/web/css/_doublecolon_first-line/index.html @@ -0,0 +1,122 @@ +--- +title: '::first-line (:first-line)' +slug: 'Web/CSS/::first-line' +tags: + - CSS + - Diseño + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::first-line' +--- +
{{CSSRef}}
+ +

El Pseudoelemento ::first-line aplica estilos a la primera línea de un elemento de bloque. Nótese que la longitud de la primera línea depende de muchos factores, incluyendo el ancho del elemento, el ancho del documento y el tamaño de fuente del texto.

+ +
/* Selecciona la primera línea de un <p> */
+p::first-line {
+  color: red;
+}
+ +
+

CSS3 introdujo la notación ::first-line (con doble dos puntos) para distinguir pseudo-clases de pseudo-elementos. Los navegadores también aceptan :first-line, añadido en CSS2.

+
+ +

Propiedades permitidas

+ +

Sólo unas pocas propiedades de CSS se pueden usar con el pseudoelemento ::first-line:

+ + + +

Sintaxis

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Los estilos sólo se aplicarán en la primera línea de este párrafo.
+Posteriormente, todo el texto tendrá el estilo normal.
+¿Ves?</p>
+
+<span>La primera línea de este elemento no recibe ningún estilo
+especial, porque no es un elemento de bloque.</span>
+ +

CSS

+ +
::first-line {
+  color: blue;
+  text-transform: uppercase;
+
+
+  /* ADVERTENCIA: NO USES ESTOS*/
+  /* Muchas propiedades son inválidas en pseudoelementos ::first-line */
+  margin-left: 20px;
+  text-indent: 20px;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 350, 160)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}{{Spec2('CSS4 Pseudo-Elements')}} +

Defina más estrictamente dónde ::first-letter puede ocurrir. Generaliza propiedades permitidas. Define la herencia de ::first-letter.

+
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}{{Spec2('CSS3 Text Decoration')}}Permite el uso de {{cssxref("text-shadow")}} con ::first-letter.
{{SpecName('CSS3 Selectors', '#first-line', '::first-line')}}{{Spec2('CSS3 Selectors')}}Introducción de la sintexis de doble dos puntos.
{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}{{Spec2('CSS2.1')}}Sin cambios.
{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}{{Spec2('CSS1')}}Definición inicial, uso de la sintaxis de doble dos puntos.
+ +
+ + + + +

{{Compat("css.selectors.first-line")}}

+
+ +

Ver También

+ + diff --git a/files/es/web/css/_doublecolon_marker/index.html b/files/es/web/css/_doublecolon_marker/index.html new file mode 100644 index 0000000000..68c7e12b52 --- /dev/null +++ b/files/es/web/css/_doublecolon_marker/index.html @@ -0,0 +1,91 @@ +--- +title: '::marker' +slug: 'Web/CSS/::marker' +translation_of: 'Web/CSS/::marker' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

El pseudo-elemento ::marker en CSS selecciona la caja de marcadores de un elemento de la lista, que normalmente contiene una viñeta o un número. Funciona en cualquier elemento o pseudo-elemento configurado para display: list-item, como el elemento {{HTMLElement("li")}} y {{HTMLElement("summary")}}.

+ +
::marker {
+  color: blue;
+  font-size: 1.2em;
+}
+ +

Propiedades permitidas

+ +

Sólo ciertas propiedades CSS puedes utilizarse en una regla con ::marker como selector:

+ + + +
+

En la especificación se indica que en el futuro de pueden admitir propiedades CSS adicionales.

+
+ +

Sintaxis

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul>
+  <li>Duraznos</li>
+  <li>Manzanas</li>
+  <li>Ciruelas</li>
+</ul>
+ +

CSS

+ +
ul li::marker {
+  color: red;
+  font-size: 1.5em;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Example')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}{{Spec2('CSS4 Pseudo-Elements')}}No significant change.
{{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}{{Spec2('CSS3 Lists')}}Initial definition.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.marker")}}

+
+ +

Véase también

+ + diff --git a/files/es/web/css/_doublecolon_placeholder/index.html b/files/es/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..4ed5e7ff80 --- /dev/null +++ b/files/es/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,152 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - '::placeholder' + - CSS + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}
+ +

El pseudo-elemento CSS  ::placeholder representa el texto provisional en un elemento {{HTMLElement("input")}} o un elemento {{HTMLElement("textarea")}}.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

Solo el subconjuto de las propiedades CSS que aplican al pseudo-elemento {{cssxref("::first-line")}} puede ser usado en una regla utilizando ::placeholder en su selector.

+ +
+

Nota: En la mayoría de navegadores, la apariencia del texto provisional es traslúcido o un color gris claro por defecto.

+
+ +

Sintáxis

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Texto rojo

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Red_text", 200, 60)}}

+ +

Texto verde

+ +

HTML

+ +
<input placeholder="Type something here...">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Green_text", 200, 60)}}

+ +

Preocupaciones por la accesibilidad

+ +

Contraste de color

+ +

Contraste de color

+ +

El texto temporal generalmente tiene un color más claro para indicar que es una sugerencia para el tipo de entrada que será válido, y no es una entrada real de cualquier tipo.

+ +

Es importante asegurarse que el radio de contraste entre el color del texto provisional y el fondo de la entrada es lo suficientemente alto para que las personas que experimenten condiciones de visión baja sean capaces de leer el texto mientras también asegurarse que hay diferencia suficiente entre el color del texto temporal y el color del texto de entrada para que los usuarios no confundad el texto provisional con la información de ingreso.

+ +

El radio del color de contraste es determinado al comparar la luminosidad entre dos colores. Para cumplir las actuales Pautas de Accesibilidad para el Contenido Web (WCAG), un radio de 4.5:1 es requerido para el contenido de un texto y 3:1 para textos más grandes como encabezados. Un texto grando es definido como 18.66px o mayor en negritas; o 24px o mayor.

+ + + +

Usabilidad

+ +

Un texto temporal con suficiente contraste puede ser interpretado como una entrada. El texto provisional podría desaparecer cuando una persona ingresa contenido en un elemento {{htmlelement("input")}}. Ámbas circunstancias pueden interferir con el correcto llenado de un formulario, especialmente para personas con dificultades cogniticas.

+ +

Un acercamiento alternativo para proveer información provisional es incluirla afuera del campo de entrada en proximidad visual, entonces usar aria-describedby para programáticamente asociar la entrada {{HTMLElement("input")}} con su sugerencia.

+ +

Con esta implementación, el contenido de la sugerencia, esta disponible incluso cuando información es ingresada en el campo de entrada, y la entrada aparece libre de una entrada preexistente cuando la página ha cargado. Muchas de las tecnologías de lectores de pantalla usan aria-describedby para leer la sugerencia después de que la etiqueta de la entrada de texto hay sido anunciada, y la persona utilizando el lector de pantalla puede silenciarla si encuentra la información adicional innecesaria..

+ +
<label for="user-email">Your email address</label>
+<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Modo de alto contraste de Windows

+ +

El campo temporal puede aparecer con el mismo estilo como el texto ingresado por el usuario cuando se utiliza el Modo de alto contraste de Windows. Eso hará difícil para algunas personas determinar que contenido ha sido ingresado y que contenido es un texto temporal

+ + + +

Etiquetas

+ +

El texto provisional no es un reemplazo para el elemento {{htmlelement("label")}}. Sin una etiqueta que ha sido programaticamente asociada con la entrada usando una combinación de los atributos {{htmlattrxref("for", "label")}} y {{htmlattrxref("id")}}, tecnología asistiva como los lectores de pantalla no pueden leer los elementos {{htmlelement("input")}}.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Definición inicial
+ +

Compatibilidad de los navegadores

+ +
+ + +

{{Compat("css.selectors.placeholder")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/_doublecolon_selection/index.html b/files/es/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..d02181429f --- /dev/null +++ b/files/es/web/css/_doublecolon_selection/index.html @@ -0,0 +1,94 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +translation_of: 'Web/CSS/::selection' +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Resumen

+ +

El selector ::selection CSS pseudo-elemento aplica reglas a una porción de un documento que ha sido destacado (por ejemplo: selección con el mouse o algún otro puntero en un dispositivo) del usuario.

+ +

Sólo un pequeño subconjunto de propiedades CSS pueden ser usadas en una regla  ::selection en el selector de:  {{ cssxref("color") }}, {{ cssxref("background") }}, {{ cssxref("background-color") }} y {{ cssxref("text-shadow") }}. Nótese que, en particular, {{ cssxref("background-image") }} es ignorado, como cualquier otra propiedad.

+ +
+

text-shadow en ::selection es soportado por Chrome y Safari y Firefox 17 y superior.

+
+ +
Aunque este pseudo-elemento está en borradores como nivel 3 de selectores CSS, fue quitado durante la fase  recomendaciones de candidatos, como parecía que su comportamiento estaba infra-especificado, especialmente con elementos anidados, y la interoperabilidad no fue conseguida (basado en discusión en W3C lista de correos de estilo).
+
+El ::selection pseudo elemento actualmente no está en los modulos de CSS para estandar track. No debe ser usado en entornos de produccion.
+ +

Ejemplo

+ +

Gecko es la única máquina que requiere el prefijo. Devido a el factor que las reglas de análisis de CSS requieren dejar caer la regla general cuando encuentre un pseudo elemento inválido, dos reglas deben ser escritas: ::-moz-selection, ::selection {...}. La regla debe soltada en non-Gecko como ::-moz-selection es inválido en esto.

+ +
/* dibuja en cualquier texto seleccionado el color amarillo  sobre un fondo rojo */
+::-moz-selection { color: gold;  background: red; }
+::selection      { color: gold;  background: red; }
+
+/* dibuja el texto seleccionado en un parrafo de color blanco y negro*/
+p::-moz-selection { color: white;  background: black; }
+p::selection      { color: white;  background: black; }
+ +

Especificaciones

+ +

El ::selection CSS pseudo-elemento fue redactado selector CSS nivel 3 pero quitado antes que alcanzara el estatus recomendado. Apesar de esto es simplemente en algunos Navegadores, que probablemente tendran soporte a este.

+ +

En estos momentos, el seudo elemento CSS ::selection no esta en ninguna especificación.

+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico11.0 {{ property_prefix("-moz") }}99.51.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracteristicasAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte basico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/css/_doublecolon_spelling-error/index.html b/files/es/web/css/_doublecolon_spelling-error/index.html new file mode 100644 index 0000000000..7c0ac9fb5b --- /dev/null +++ b/files/es/web/css/_doublecolon_spelling-error/index.html @@ -0,0 +1,70 @@ +--- +title: '::spelling-error' +slug: 'Web/CSS/::spelling-error' +tags: + - CSS + - Experimental + - Pseudo-elemento + - Referencia + - Web +translation_of: 'Web/CSS/::spelling-error' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

El pseudo-elemento CSS ::spelling-error representa un segmento de texto que el {{glossary("user agent")}} ha marcado como deletreado incorrectamente.

+ +
::spelling-error {
+  color: red;
+}
+ +

Propiedades permitidas

+ +

Solo se puede usar un pequeño subconjunto de propiedades de CSS en una regla con ::spelling-error en su selector:

+ + + +

Sintaxis

+ +
::spelling-error
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-spelling-error', '::spelling-error')}}{{Spec2('CSS4 Pseudo-Elements')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.spelling-error")}}

+
+ +

Ver también

+ + diff --git a/files/es/web/css/actual_value/index.html b/files/es/web/css/actual_value/index.html new file mode 100644 index 0000000000..a11954dbdb --- /dev/null +++ b/files/es/web/css/actual_value/index.html @@ -0,0 +1,36 @@ +--- +title: Valor real +slug: Web/CSS/actual_value +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

Resumen

+ +

El valor real (actual value) de una propiedad CSS es el valor usado una vez que se aplican todas las aproximaciones. Por ejemplo, tal vez un agente usuario solo puede renderizar bordes con un valor de píxel entero, y se vería forzado a calcular la aproximación de la anchura del borde.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Véase también

+ + diff --git a/files/es/web/css/align-content/index.html b/files/es/web/css/align-content/index.html new file mode 100644 index 0000000000..9e6b9b882a --- /dev/null +++ b/files/es/web/css/align-content/index.html @@ -0,0 +1,261 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - Cajas Flexibles CSS + - Propiedad CSS +translation_of: Web/CSS/align-content +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS align-content ajusta las líneas dentro de un contenedor flex cuando hay espacio extra en el eje transversal.

+ +

Esta propiedad no tiene efecto en cajas flexibles de una sola línea.

+ +
{{cssinfo}}
+ +

Vea Usando las cajas flexibles CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* Ajusta las líneas desde el inicio del eje transversal */
+align-content: flex-start;
+
+/* Ajusta las líneas desde el final del eje transversal */
+align-content: flex-end;
+
+/* Ajusta las líneas al rededor del centro del eje transversal */
+align-content: center;
+
+/* Distribuye las líneas a lo largo del eje transversal, de principio a fin */
+align-content: space-between;
+
+/* Distribuye las líneas a lo largo del eje transversal, igualmente espaciados */
+align-content: space-around;
+
+/* Estira las líneas para que ocupen el eje transversal completo */
+align-content: stretch;
+
+/* Valores globales */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+
+ +

Valores

+ +
+
flex-start
+
Las líneas son ajustadas a partir del inicio del eje transversal. El borde transversal de inicio de la primera línea y el del contenedor flexible quedan unidos. Cada línea siguiente es unida a su predecesora.
+
flex-end
+
Las líneas son ajustadas a partir del final del eje transversal. El borde transversal final de la última línea y el del contenedor flexible quedan unidos. Cada línea que precede es unida a la línea siguiente.
+
center
+
Las líneas son ajustadas hacia el centro del contenedor flexible. Las líneas son unidas entre sí, y centradas dentro del contenedor. El espacio entre el borde transversal de inicio y la primera línea, y el que hay entre el borde transversal final y la última línea es el mismo.
+
space-between
+
Las líneas son distribuidas de manera uniforme en el contenedor flexible. El espaciado se hace de modo que la separación entre cualquier par de elementos adyacentes sea el mismo. Los bordes transversales de inicio y de fin del contenedor son unidos a los bordes de la primera y última línea, respectivamente.
+
space-around
+
Las líneas son distribuidas uniformemente de modo que el espacio entre cualquier par de elementos adyacentes sea el mismo. El espacio vacío antes de la primera línea y el espacio después de la última es igual a la mitad del espacio entre cualquier par de líneas adyacentes.
+
stretch
+
Las líneas son estiradas para usar el espacio sobrante. El espacio libre en el contenedor es dividido por igual entre todas las líneas.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

HTML:

+ +
<div id="container">
+  <p>align-content: flex-start</p>
+  <div id="flex-start">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: center</p>
+  <div id="center">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: flex-end</p>
+  <div id="flex-end">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: space-between</p>
+  <div id="space-between">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: space-around</p>
+  <div id="space-around">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: stretch</p>
+  <div id="stretch">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+ +

CSS:

+ +
#container > div {
+  display: -webkit-flex;
+  display: -ms-flex;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  width: 140px;
+  height: 140px;
+  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
+}
+
+#container > div > div {
+  margin: 2px;
+  width: 30px;
+  min-height: 30px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  -webkit-align-content: flex-start;
+  align-content: flex-start;
+}
+
+#center {
+  -webkit-align-content: center;
+  align-content: center;
+}
+
+#flex-end {
+  -webkit-align-content: flex-end;
+  align-content: flex-end;
+}
+
+#space-between {
+  -webkit-align-content: space-between;
+  align-content: space-between;
+}
+
+#space-around {
+  -webkit-align-content: space-around;
+  align-content: space-around;
+}
+
+#stretch {
+  -webkit-align-content: stretch;
+  align-content: stretch;
+}
+ +

Su resultado es:

+ +

{{ EmbedLiveSample('Examples', 600, 550) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico21.0{{property_prefix("-webkit")}}28.0[1]{{CompatNo}}12.10{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}28.0[1]{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/align-items/index.html b/files/es/web/css/align-items/index.html new file mode 100644 index 0000000000..1bc917d05b --- /dev/null +++ b/files/es/web/css/align-items/index.html @@ -0,0 +1,169 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/align-items +--- +

La propiedad CSS align-items establece el valor {{cssxref("align-self")}} sobre todos los descendientes directos de un grupo. La propiedad align-self indica la alineación de un elemento dentro del bloque que lo contiene. En Flexbox controla la alineación de los elementos del {{glossary("Cross Axis")}}, en Grid Layout controla la alineación de los elementos en el eje Block dentro de su área grid.

+ +

El ejemplo interactivo a continuación demuestra algunos de los valores de align-items utilizando el sistema grid.

+ +
{{EmbedInteractiveExample("pages/css/align-items.html")}}
+ +

Sintaxis

+ +
/* Palabras Clave Basicas */
+align-items: normal;
+align-items: stretch;
+
+/* Alineamiento posicional */
+/* align-items no considera los valores de "left" o "right"  */
+align-items: center; /* Agrupa los elementos alrededor del centro */
+align-items: start; /* Agrupa los elementos desde el inicio */
+align-items: end; /* Agrupa los elementos desde el final */
+align-items: flex-start; /* Agrupa los elementos flex desde el incio */
+align-items: flex-end; /* Agrupa los elementos flex desde el final */
+align-items: self-start;
+align-items: self-end;
+
+/* Alineamiento de Linea Base */
+align-items: baseline;
+align-items: first baseline;
+align-items: last baseline; /* Alineamiento de desborde (solamente para alineamiento posicional) */
+align-items: safe center;
+align-items: unsafe center;
+
+/* Valores globales */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+
+ +

Valores

+ +
+
normal
+
El efecto de esta palabra clave depende del modo de diseño utilizado:
+
+ + + +
+
+
flex-start
+
El límite del margen transversal inicial del elemento flexible es unido al borde transversal final de la línea.
+
flex-end
+
El límite del margen transversal final del elemento flexible es unido al borde transversal final de la línea.
+
center
+
Los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual en ambas direcciones.
+
start
+
Los elementos se agrupan uno junto al otro hacia el borde inicial del contenedor de alineación en el eje apropiado.
+
end
+
Los elementos se agrupan uno junto al otro hacia el borde final del contenedor de alineación en el eje apropiado.
+
baseline
+
Todos los elementos flexibles son ajustados de modo que sus bases queden alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.
+
stretch
+
Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.
+
+

Sintaxis formal

+
+
+ +
{{csssyntax}}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}[1]{{CompatGeckoDesktop("20.0")}}[2]11.0[3]12.107.0{{property_prefix("-webkit")}} 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Soporte básico4.4{{CompatVersionUnknown}}{{CompatGeckoMobile("20.0")}}[2]{{CompatNo}}12.107.0{{property_prefix("-webkit")}}{{CompatUnknown}}
+
+ +

[1] Las versiones anteriores de la especificación tratan a los hijos con posición absoluta como si fueran elementos flexibles de 0x0. Las versiones posteriores los excluyen del flujo y establecen sus posiciones con base en las propiedades de alineación y justificación. Chrome implementa el comportamiento nuevo a partir de Chrome 52.

+ +

[2] Para activar soporte a flexbox en Firefox 18 y 19, el usuario debe acceder a about:config y cambiar el valor de la preferencia layout.css.flexbox.enabled a true. Los flexbox multiínea son soportados desde Firefox 28.

+ +

Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es true.

+ +

[3] En Internet Explorer 10-11, si los elementos flex de una columna tienen align-items: center; y su contenido es muy largo, se saldrán de los límites del contenedor. Véase Flexbug #2 para más información.

+ +

Véase también

+ + diff --git a/files/es/web/css/align-self/index.html b/files/es/web/css/align-self/index.html new file mode 100644 index 0000000000..639c48a15a --- /dev/null +++ b/files/es/web/css/align-self/index.html @@ -0,0 +1,137 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/align-self +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS align-self alinea los elementos flexibles de la línea flexible actual, reemplazando el valor de {{cssxref("align-items")}}. Si el límite transversal de alguno de los elementos está definido como auto, el valor de align-self es ignorado.

+ +

{{cssinfo}}

+ +

Véase Usando las cajas flexibles CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* Valores clave */
+align-self: auto;
+align-self: flex-start;
+align-self: flex-end;
+align-self: center;
+align-self: baseline;
+align-self: stretch;
+
+/* Valores globales */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+
+ +

Valores

+ +
+
auto
+
Se calcula acorde al valor de {{cssxref("align-items") }} del padre, o al de stretch si el elemento no tiene padre.
+
flex-start
+
El límite transversal inicial del elemento flexible es unido al borde transversal inicial de la línea.
+
flex-end
+
El límite transversal final del elemento flexible es unido al borde transversal final de la línea.
+
center
+
Los límites del elemento flexible son centrados dentro de la línea en su eje transversal. Si el tamaño transversal del elemento es superior al del contenedor, se excederá por igual hacia ambas direcciones.
+
baseline
+
Todos los elementos flexibles son ajustados de modo que sus bases estén alineadas. El elemento con la distancia mayor entre su límite transversal inicial y su base es combinado con el borde transversal de la línea.
+
stretch
+
Las elementos flexibles son estirados de modo que el tamaño transversal de sus límites sea el mismo de la línea, manteniendo sus restricciones de anchura y altura.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}{{ Spec2('CSS3 Box Alignment') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico21.0{{property_prefix("-webkit")}}
+ 36.0		{{CompatGeckoDesktop("20.0")}}[1]11.012.10{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Firefox soporta solamente flexbox de una línea hasta Firefox 27. Para activar soporte a flexbox, en Firefox 18 y 19, el usuario debe cambiar la preferencia layout.css.flexbox.enabled a true en la página about:config.

+ +

Además del soporte sin prefijo, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) el valor predeterminado de esta preferencia es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/all/index.html b/files/es/web/css/all/index.html new file mode 100644 index 0000000000..0bb60f5174 --- /dev/null +++ b/files/es/web/css/all/index.html @@ -0,0 +1,219 @@ +--- +title: all +slug: Web/CSS/all +tags: + - Cascada CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/all +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad de forma reducida all restaura todas las propiedades, excepto {{cssxref("unicode-bidi")}} y {{cssxref("direction")}}, a su valor inicial o heredado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+
+ +

Valores

+ +
+
initial
+
Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a sus valores iniciales. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.
+
inherit
+
Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a los valores de los elementos padre. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.
+
unset
+
Esta palabra clave indica que se cambien todas las propiedades aplicables al elemento, o a su elemento padre, a los valores de los elementos padres, si son heredadas, o a sus valores iniciales en caso contrario. Los valores de {{cssxref("unicode-bidi")}} y {{cssxref("direction")}} no son afectados.
+
revert
+
Si el valor en cascada de una propiedad es la palabra clave revert, el comportamiento dependerá del origen al que pertenece la declaración: +
+
user-agent origin
+
Equivalente a unset.
+
user origin
+
Revierte la cascada al nivel del agente usuario, para que el valor especificado sea calculado como si no se hubieran especificado reglas a nivel de autor o a nivel de usuario para esta propiedad.
+
author origin
+
Revierte la cascada a nivel del usuario, para que el valor especificado sea calculado como si no se hubieran especificado reglas a nivel de autor para esta propiedad. Para permitir la reversión, este origen incluye los orígenes de Override y Animation.
+
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
+ +

CSS

+ +
html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

Su resultado es:

+ +
+

Sin propiedad all

+ + + + +{{EmbedLiveSample("ex0", "200", "125")}} + +

El elemento {{HTMLElement("blockquote")}} usa los estilos predeterminados del navegador junto con colores de fondo y de texto específicos. También se comporta como elemento block: el texto que le sigue está debajo de él.

+
+ +
+

all:unset

+ + + + +{{EmbedLiveSample("ex1", "200", "125")}} + +

El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento inline (valor inicial), su propiedad {{cssxref("background-color")}} es transparent (valor inicial), pero su propiedad {{cssxref("font-size")}} sigue siendo small (valor heredado) y su propiedad {{cssxref("color")}} es blue (valor heredado).

+
+ +
+

all:initial

+ + + + +{{EmbedLiveSample("ex2", "200", "125")}} + +

El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento inline element (valor inicial), su propiedad {{cssxref("background-color")}} es transparent (valor inicial), su propiedad {{cssxref("font-size")}} es  normal (valor inicial) y su propiedad {{cssxref("color")}} es black (valor inicial).

+
+ +
+

all:inherit

+ + + + +{{EmbedLiveSample("ex3", "200", "125")}} + +

El elemento {{HTMLElement("blockquote")}} no usa los estilos predeterminados del navegador: ahora es un elemento block (valor heredado de su contenedor {{HTMLElement("div")}}), su propiedad {{cssxref("background-color")}} es transparent (valor heredado), su propiedad {{cssxref("font-size")}} es small (valor heredado) y su propiedad {{cssxref("color")}} es blue (valor heredado).

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS4 Cascade') }}Añadido el valor revert.
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}Definición inicial.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("37")}} {{ CompatGeckoDesktop("27") }}{{CompatNo}}{{CompatChrome("24")}}{{CompatNo}}
revert{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("27")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
revert{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}9.3
+
+ +

Véase también

+ +

Los valores de las propiedades CSS: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, y {{cssxref("revert")}}.

diff --git a/files/es/web/css/angle/index.html b/files/es/web/css/angle/index.html new file mode 100644 index 0000000000..8da1e5173d --- /dev/null +++ b/files/es/web/css/angle/index.html @@ -0,0 +1,139 @@ +--- +title: +slug: Web/CSS/angle +tags: + - Ángulo +translation_of: Web/CSS/angle +--- +

{{ CSSRef() }}

+ +

Summary

+ +

El tipo de dato <angle> de CSS representa valores de ángulo. Los valores positivos representan ángulos en sentido de las agujas del reloj, mientras los valores negativos representan ángulos en sentido opuesto. Su sintáxis es un valor de tipo numérico ({{cssxref("<number>")}}) seguido inmediatamente por la unidad (deg, grad, rad o turn). Al igual que cualquier otra dimensión en CSS, no debe haber espacio entre la unidad y el número.

+ +

Para propiedades estáticas y una unidad dada, un ángulo puede ser representado por muchos valores: 90deg y -270deg, o 1turn y 4turn representan la misma posición final. Sin embargo, para posiciones dinámicas, como aplicar una transición ({{ cssxref("transition") }}) en la propiedad {{ cssxref("transform") }}, el efecto será diferente.

+ +

Se deben usar las siguientes unidades:

+ + + +

Aun cuando todas las unidades representan lo mismo para el valor 0, la unidad no debe ser omitida en ese caso, puesto que no es un valor de tipo {{cssxref("<length>")}}: 0 es inválido, y no representa 0deg, 0grad, 0rad o 0turn.

+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png +

Ángulo recto: 90deg = 100grad = 0.25turn ≈ 1.5708rad

+
Angle180.pngÁngulo llano: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.pngÁngulo recto (hacia la izquierda): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png +

Ángulo nulo: 0deg = 0grad = 0turn = 0rad

+ +
Nota: 0 no es un valor de ángulo válido.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico2 (528.17)3.6 (1.9.2)9.0{{ CompatNo }}4.0 (528.17)
turn unit{{ CompatNo }}13.09.0{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown }}{{ CompatVersionUnknown }}{{ CompatUnknown }}{{ CompatNo }}{{ CompatUnknown }}
turn unit{{ CompatNo }}13.0{{ CompatUnknown }}{{ CompatNo }}{{ CompatNo }}
+
diff --git a/files/es/web/css/animation-delay/index.html b/files/es/web/css/animation-delay/index.html new file mode 100644 index 0000000000..6edea7e4f2 --- /dev/null +++ b/files/es/web/css/animation-delay/index.html @@ -0,0 +1,125 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-delay +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad CSS animation-delay especifica el tiempo de retardo que debe transcurrir antes de comenzar la animación. Esto permite que la secuencia de animación no comience nada más ser aplicada a un elemento.

+ +

El valor 0, que es el valor por defecto, indica que la animación debería comenzar inmediatamente. Usando otro valor, definimos el retardo entre el momento en que el elemento recibe la animación y el comienzo de la secuencia de la misma.

+ +

Si especificamos un valor negativo, la animación comenzará inmediatamente, pero no desde el principio de la misma, sino desde el punto que le hemos indicado. Por ejemplo, si ponemos un retardo de -1s, la animación se iniciará inmediatamente pero comenzará en el segundo 1 de la secuencia.

+ +

Si se especifica un valor negativo para el retraso de la animación, pero el valor de inicio es implícito, el valor inicial es tomado desde el momento en que la animación es aplicada al elemento.

+ +

A menudo es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar las propiedades de animación una sola vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Gramática formal: <time> [, <time>]*
+
+ +
animation-delay: 3s
+animation-delay: 2s, 4ms
+
+ +

Valores

+ +
+
<time>
+
El espacio de tiempo que debe transcurrir desde que la animación se aplica al elemento y el comienzo de la misma. Podemos especificarlo en segundos (usando s) o milisegundos (usando ms). Si no especificamos la unidad, la sentencia no será válida.
+
+ +

Ejemplos

+ +

Visitar animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-delay', 'animation-delay') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoDesktop("16.0") }}1012{{ property_prefix("-o") }}
+ 12.5 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }} {{ CompatGeckoMobile("16.0") }}{{ CompatUnknown() }}12{{ property_prefix("-o") }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+
+ +

Consulte también

+ + diff --git a/files/es/web/css/animation-direction/index.html b/files/es/web/css/animation-direction/index.html new file mode 100644 index 0000000000..cdc0973157 --- /dev/null +++ b/files/es/web/css/animation-direction/index.html @@ -0,0 +1,167 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animations + - CSS Property + - Experemiental + - Reference +translation_of: Web/CSS/animation-direction +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad CSS animation-direction indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

+ +

Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación una sola vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Gramática formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*
+
+ +
animation-direction: normal
+animation-direction: reverse
+animation-direction: alternate
+animation-direction: alternate-reverse
+animation-direction: normal, reverse
+animation-direction: alternate, reverse, normal
+
+ +

Valores

+ +
+
normal
+
Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.
+
alternate
+
La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación ease-in se convierte en una animación con ease-out cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.
+
reverse
+
Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.
+
alternate-reverse
+
Es similar a alternate pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteración es par o impar comienza en uno.
+
+ +

Ejemplos

+ +

Visitar animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-direction', 'animation-direction') }}{{ Spec2('CSS3 Animations') }}For the two new values, see the W3C discussion.
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.5 #		4.0{{ property_prefix("-webkit") }}
reverse19 {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("16.0") }}10{{ CompatNo() }}{{ CompatNo() }}
alternate-reverse19 {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("16.0") }}10{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
reverse{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("16.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
alternate-reverse{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("16.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Consulte también

+ + diff --git a/files/es/web/css/animation-duration/index.html b/files/es/web/css/animation-duration/index.html new file mode 100644 index 0000000000..40f9fa5382 --- /dev/null +++ b/files/es/web/css/animation-duration/index.html @@ -0,0 +1,127 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-duration +--- +

{{ CSSRef() }}

+ +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad CSS animation-duration indica la cantidad de tiempo que la animación tarda en completar un ciclo (duración).

+ +

El valor por defecto es 0s, que indica que la animación no debe producirse.

+ +

Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Gramatica formal: {{csssyntax("animation-duration")}}
+
+ +
animation-duration: 6s
+animation-duration: 120ms
+animation-duration: 1s, 15s
+animation-duration: 10s, 30s, 230ms
+
+ +

Valores

+ +
+
<time>
+
El tiempo que tarda la animación en terminar su secuencia. Podemos especificarlo en segundos (usando s) o milisegundos (usando ms). Si no especificamos la unidad, la sentencia no será válida.
+
+ +
Nota: No acepta valores negativos, si los ponemos la sentencia se ignorará. Algunas implementaciones antiguas (con prefijos) pueden considerar los valores negativos como si fueran 0s.
+ +

Ejemplos

+ +

Visitar CSS animations para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support3.0{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.0{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatNo() }}{{ CompatNo() }}4.2{{ property_prefix("-webkit") }}
+
+ +

Consultar también

+ + diff --git a/files/es/web/css/animation-fill-mode/index.html b/files/es/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..1c1f251d22 --- /dev/null +++ b/files/es/web/css/animation-fill-mode/index.html @@ -0,0 +1,233 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-fill-mode +--- +
{{ CSSRef() }}
+ +
{{ SeeCompatTable() }}
+ +

Definición

+ +

La propiedad CSS animation-fill-mode especifica el modo en que una animación CSS aplica sus estilos, estableciendo su persistencia y estado final tras su ejecución.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Formal syntax: {{csssyntax("animation-fill-mode")}}
+
+ +
animation-fill-mode: none
+animation-fill-mode: forwards
+animation-fill-mode: backwards
+animation-fill-mode: both
+
+El caracter # indica que pueden darse varios valores separados por comas.
+Cada uno de los valores se aplicará en el mismo orden en que se ha declarado en la propiedad 'animation'
+animation-fill-mode: none, backwards
+animation-fill-mode: both, forwards, none
+
+ +

Valores

+ +
+
none
+
La animación no aplicará los estilos antes ni después de su ejecución.
+
forwards
+
El objeto sobre el que se aplica la animación quedará con los valores y estilos que le aplique el último keyframe de la ejecución de la animación. El último valor dependerá del valor de {{ cssxref("animation-direction") }} y {{ cssxref("animation-iteration-count") }}: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countultimo keyframe encontrado
normaleven o odd100% or to
reverseeven o odd0% or from
alternateeven0% or from
alternateodd100% or to
alternate-reverseeven100% or to
alternate-reverseodd0% or from
+
+
backwards
+
La animación aplicará los valores definidos en el primer keyframe tan pronto como se aplique al objeto, y los retendrá durante el tiempo de {{ cssxref("animation-delay") }}. El primer keyframe dependerá del valor de {{ cssxref("animation-direction") }}: + + + + + + + + + + + + + + + + + +
animation-directionprimer keyframe
normal o alternate0% or from
reverse o alternate-reverse100% or to
+
+
both
+
La animación seguirá las reglas de las opciones forwards y backwards, extendiendo las propiedades de la animación en ambas direcciones.
+
+ +

Ejemplos

+ +

Puedes ver el efecto de animation-fill-mode en el siguiente ejemplo.  Para animaciones que iteran de forma infinita, puede que quieras que al final de cada iteración queden en su estado final mejor que en el estado inicial. 

+ +

HTML

+ +
<p>Mueve el raton sobre la caja gris</p>
+<div class="demo">
+  <div class="grows">Esto sólo crece</div>
+  <div class="growsandstays">Esto crece y se queda grande</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+  font-family: sans-serif;
+}
+@keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+@-webkit-keyframes grow {
+    0% { font-size: 0 }
+    100% { font-size: 40px }
+}
+.demo:hover .grows {
+    animation-name: grow;
+    animation-duration: 3s;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+}
+.demo:hover .growsandstays {
+    animation-name: grow;
+    animation-duration: 3s;
+    animation-fill-mode: forwards;
+    -webkit-animation-name: grow;
+    -webkit-animation-duration: 3s;
+    -webkit-animation-fill-mode: forwards;
+}
+ +

{{ EmbedLiveSample('Example',700,300) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/animation-iteration-count/index.html b/files/es/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..da5a5792ba --- /dev/null +++ b/files/es/web/css/animation-iteration-count/index.html @@ -0,0 +1,126 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-iteration-count +--- +
{{ CSSRef() }}
+ +
{{ SeeCompatTable() }}
+ +

Resumen

+ +

La propiedad CSS animation-iteration-count define el numero de veces que un ciclo de animación debe ser ejecutado antes de detenerse.

+ +

A menudo es conveniente utilizar la propiedad {{ cssxref("animation") }} para ajustar todas las propiedades de animación a la vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("animation-iteration-count")}}
+
+ +
animation-iteration-count: infinite;
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+animation-iteration-count: 2, 0, infinite;
+
+ +

Valores

+ +
+
infinite
+
La animación se repetirá siempre.
+
<number>
+
El número de veces que la animación debe repetir: es 1 por defecto. Los valores negativos no son validos. Puede especificar valores no enteros para ejecutar parte de un ciclo de animación (por ejemplo 0.5 se ejecutara la mitad del ciclo de la animación).
+
+ +

Ejemplos

+ +

Ver ejemplos CSS animations.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10 12 {{ property_prefix("-o") }}
+ 12.10 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/animation-name/index.html b/files/es/web/css/animation-name/index.html new file mode 100644 index 0000000000..c74f2cc301 --- /dev/null +++ b/files/es/web/css/animation-name/index.html @@ -0,0 +1,134 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +
{{SeeCompatTable}}
+ +

Resumen

+ +

La propiedad CSS animation-name especifica una lista de animaciones que se deben aplicar al elemento seleccionado. Cada nombre indica un {{cssxref("@keyframes")}} esta regla define los valores de las propiedades de la secuencia de animación.

+ +

A menudo es conveniente utilizar la propiedad abrevieda {{cssxref("animation")}} para ajustar todas las propiedades de animación a la vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("animation-name")}}
+ +
animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+animation-name: initial;
+animation-name: inherit;
+animation-name: unset;
+
+ +

Valores

+ +

<single-animation-name> es una de las siguientes palabras clave:

+ +
+
none
+
Es una palabra clave especial que denota que no hay fotogramas (keyframes) clave. Se puede utilizar para desactivar una animación sin cambiar el orden de los otros identificadores, o para desactivar animaciones procedentes de las cascada.
+
{{cssxref("custom-ident","<custom-ident>")}}
+
Cadena que identifica la animación. Este identificador está compuesto por una combinación de letras mayúsculas y minúsculas de la "A"a la "Z", números del 0 al 9, guiones bajos "_" y/o guiones "-". el primer caracter siempre debe ser una letra, ni un numero, excepto un guión (no se pueden poner dos guiones seguidos o más al principio del nombre.) No puede usarse none, unset, initial, o inherit ni ninguna combinación de estos casos.
+
+ +

Ejemplos

+ +

Ver ejemplos CSS animations.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}} 
+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10 12 {{property_prefix("-o")}}
+ 12.10 #		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/animation-play-state/index.html b/files/es/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..ea24e449de --- /dev/null +++ b/files/es/web/css/animation-play-state/index.html @@ -0,0 +1,134 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

 

+ +

Resumen

+ +

La propiedad CSS animation-play-state determina si una animación está en ejecución o en pausa. Puede ser consultada para determinar si la animación se está ejecutando. Además, su valor se puede establecer para pausar y reanudar una animación.

+ +

Reanudando una animación pausada, ésta empezará en el punto en el que fue pausada, en vez de empezar desde el principio.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Single animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Multiple animations */
+animation-play-state: paused, running, running;
+
+/* Global values */
+animation-play-state: inherited;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

Valores

+ +
+
running
+
La animación se está ejecutando.
+
paused
+
La animación está pausada.
+
+ +

Syntax formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

Visita animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}Definición incial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012 {{property_prefix("-o")}}
+ 12.10		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChromeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

+ +

Consulte también

+ + diff --git a/files/es/web/css/animation-timing-function/index.html b/files/es/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..3ab99bb113 --- /dev/null +++ b/files/es/web/css/animation-timing-function/index.html @@ -0,0 +1,141 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +translation_of: Web/CSS/animation-timing-function +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Resumen

+ +

La propiedad CSS animation-timing-function especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo. Los posibles valores son una o varias {{cssxref("<timing-function>")}}.

+ +

Para animaciones con keyframes,  la timing function se aplica entre los keyframes en lugar de sobre toda la animación. Es decir, se aplica al comienzo del keyframe y al final del mismo.

+ +

Una timing function definida dentro de un keyframe afecta a ese keyframe. Si no está definida para el keyframe, se aplica la timing function para la animación en general.

+ +

A menudo, es conveniente usar la propiedad abreviada {{cssxref("animation")}} para ajustar las propiedades de animación una sola vez.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Keyword values */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Function values */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Multiple animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Global values */
+animation-timing-function: inherited;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

Valores

+ +
+
<timingfunction>
+
Cada {{cssxref("<timing-function>")}} representa la timing function vinculada a la propiedad correspondiente a animar, como se define en {{cssxref ("animación-propiedad")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Visita animaciones CSS para ver algunos ejemplos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Definición incial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012 {{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}12{{property_prefix("-o")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}
+
+ +

 

+ +

Consulte también

+ + diff --git a/files/es/web/css/animation/index.html b/files/es/web/css/animation/index.html new file mode 100644 index 0000000000..23b241a346 --- /dev/null +++ b/files/es/web/css/animation/index.html @@ -0,0 +1,127 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animations + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/animation +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad animation de CSS es una propiedad abreviada (shorthand property) para {{ cssxref("animation-name") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-timing-function") }}, {{ cssxref("animation-delay") }}, {{ cssxref("animation-iteration-count") }} y {{ cssxref("animation-direction") }}.

+ +

La lista de propiedades CSS que pueden ser animadas está disponible; cabe señalar que estas son las mismas propiedades soportadas por CSS transitions.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Formal grammar:  [ <'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||
+                   <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'> ]
+                 [, [<'animation-name'> || <'animation-duration'> || <'animation-timing-function'> || <'animation-delay'> ||
+                     <'animation-iteration-count'> || <'animation-direction'> || <'animation-fill-mode'>] ]*
+
+ +

Ejemplos

+ +

Consulte CSS animations para ver los ejemplos.

+ +

Sobre Accesibilidad

+ +

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

+ +

Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando Reduced Motion Media Query.

+ +

Para más información (en inglés):

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Animations', '#animation', 'animation') }}{{ Spec2('CSS3 Animations') }} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		1012{{ property_prefix("-o") }}
+ 12.5 #		4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("16.0") }}		{{ CompatUnknown() }}{{ CompatUnknown() }}iOS 2.0{{ property_prefix("-webkit") }}
+
+ +

Consulte también

+ + diff --git a/files/es/web/css/appearance/index.html b/files/es/web/css/appearance/index.html new file mode 100644 index 0000000000..b9bb3a62cc --- /dev/null +++ b/files/es/web/css/appearance/index.html @@ -0,0 +1,1556 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - Apariencia CSS + - CSS Referencia(2) + - No-estándar +translation_of: Web/CSS/appearance +--- +
{{non-standard_header}}{{CSSRef}}
+ +

La propiedad CSS -moz-appearance se utiliza en Gecko (Firefox) para visualizar un elemento utilizando una plataforma nativa basada en el estilo del tema del sistema operativo.

+ +

Esta propiedad es frecuentemente utilizada en hojas de estilo XUL para diseñar widgets personalizados con un estilo apropiado a la plataforma. También se utiliza en las implementaciones XBL de los widgets que se arman en la plataforma Mozilla.

+ +
+

No utilizar esta propiedad en sitios Web: no sólo porque no es estándar, sinó porque su comportamiento cambia de un navegador a otro. Incluso la palabra clave none no tiene el mismo comportamiento en cada elemento de formulario a través de diferentes navegadores, y alguno no la soporta en absoluto.

+
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Lista parcial de valores válidos en Gecko */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* Lista parcial de valores válidos en WebKit/Blink */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+
+ +

Valores

+ +

<appearance> es una de las siguientes palabras clave:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDemoDescription
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}No special styling is applied. This is the default. Note, however, {{bug(649849)}} and {{bug(605985)}}.
button + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}The element is drawn like a button.
button-arrow-down + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} 
button-arrow-next + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} 
button-arrow-previous + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} 
button-arrow-up + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} 
button-bevel + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} 
button-focus + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} 
caret + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} 
checkbox + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}The element is drawn like a checkbox, including only the actual "checkbox" portion.
checkbox-container + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
checkbox-label + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} 
checkmenuitem + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} 
dualbutton + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} 
groupbox + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} 
listbox + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} 
listitem + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} 
menuarrow + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} 
menubar + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} 
menucheckbox + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} 
menuimage + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} 
menuitem + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}The element is styled as menu item, item is highlighted when hovered.
menuitemtext + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} 
menulist + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} 
menulist-button + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}The element is styled as a button that would indicate a menulist can be opened.
menulist-text + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} 
menulist-textfield + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
menupopup + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} 
menuradio + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} 
menuseparator + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} 
meterbar + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}New in Fx 16.
meterchunk + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}New in Fx 16
progressbar + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}The element is styled like a progress bar.
progressbar-vertical + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} 
progresschunk + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} 
progresschunk-vertical + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} 
radio + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}The element is drawn like a radio button, including only the actual "radio button" portion.
radio-container + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}The element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.
radio-label + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} 
radiomenuitem + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} 
range + + {{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}} 
range-thumb + + {{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}} 
resizer + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} 
resizerpanel + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} 
scale-horizontal + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} 
scalethumbend + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} 
scalethumb-horizontal + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} 
scalethumbstart + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} 
scalethumbtick + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} 
scalethumb-vertical + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} 
scale-vertical + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} 
scrollbarbutton-down + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} 
scrollbarbutton-left + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} 
scrollbarbutton-right + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} 
scrollbarbutton-up + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} 
scrollbarthumb-horizontal + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} 
scrollbarthumb-vertical + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} 
scrollbartrack-horizontal + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} 
scrollbartrack-vertical + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} 
searchfield + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} 
separator + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} 
sheet + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} 
spinner + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} 
spinner-downbutton + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} 
spinner-textfield + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} 
spinner-upbutton + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} 
splitter + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} 
statusbar + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} 
statusbarpanel + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} 
tab + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} 
tabpanel + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} 
tabpanels + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} 
tab-scroll-arrow-back + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} 
tab-scroll-arrow-forward + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} 
textfield + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} 
textfield-multiline + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} 
toolbar + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} 
toolbarbutton + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} 
toolbarbutton-dropdown + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} 
toolbargripper + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} 
toolbox + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} 
tooltip + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} 
treeheader + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} 
treeheadercell + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} 
treeheadersortarrow + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} 
treeitem + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} 
treeline + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} 
treetwisty + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} 
treetwistyopen + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} 
treeview + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} 
-moz-mac-unified-toolbar + + {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}Mac OS X only. This causes the toolbar and title bar to render using the unified toolbar style common to Mac OS X 10.4 and later applications.
{{gecko_minversion_inline("2.0")}} -moz-win-borderless-glass + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This style applies the Aero Glass effect -- but without a border -- to the element.
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used for the tab bar in a browser.
-moz-win-communicationstext + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} 
-moz-win-communications-toolbox + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This styles is used to exclude the Aero Glass effect on the element.
-moz-win-glass + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}Windows Vista and later only. This style applies the Aero Glass effect to the element.
-moz-win-mediatext + + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}} 
-moz-win-media-toolbox + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}Windows Vista and later only. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-moz-window-button-box + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} 
-moz-window-button-box-maximized + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} 
-moz-window-button-close + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} 
-moz-window-button-maximize + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} 
-moz-window-button-minimize + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} 
-moz-window-button-restore + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} 
-moz-window-frame-bottom + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} 
-moz-window-frame-left + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} 
-moz-window-frame-right + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} 
-moz-window-titlebar + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} 
-moz-window-titlebar-maximized + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} 
+ +

Síntaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.exampleone {
+  -moz-appearance: toolbarbutton;
+}
+
+ +

Especificaciones

+ +

La propiedad appearance no se encuentra actualmente presente en ninguna nueva especificación CSS.

+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatUnknown}}3.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}11.0{{property_prefix("-webkit")}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] No está completamente soportada.

+ +

[2] Solo los valores none, button, y textfield están soportados. Ver la documentación en MSDN.

+ +

Ver también

+ + diff --git a/files/es/web/css/at-rule/index.html b/files/es/web/css/at-rule/index.html new file mode 100644 index 0000000000..58620af629 --- /dev/null +++ b/files/es/web/css/at-rule/index.html @@ -0,0 +1,73 @@ +--- +title: Regla-At +slug: Web/CSS/At-rule +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

Una regla-at es una declaración CSS que comienza con el símbolo arroba, '@' (U+0040 COMMERCIAL AT), seguido por un identificador, e incluye todo el contenido hasta el siguiente punto y coma, ';' (U+003B SEMICOLON), o el siguiente bloque CSS, lo que sea primero.

+ +

Hay varias reglas-at, designadas por sus identificadores, cada una con sintaxis distinta:

+ + + +

Grupos de Reglas Condicionales

+ +

Así como los valores de las propiedades, cada regla-at tiene sintaxis propia. Sin embargo, muchas de esas reglas pueden ser agrupadas en categorías especiales, llamadas conditional group rules. Estas declaraciones comparten sintáxis común y cada una puede incluir nested statements—ya sean conjuntos de reglas o reglas-at anidadas. Además, pueden transmitir un significado semántico común—todas incluyen algun tipo de condición, que devuelve un resultado que puede ser verdadero o falso. Si el valor de la condición resulta verdadero, todas las declaraciones del grupo serán aplicadas.

+ +

Los grupos de reglas condicionales están definidos en CSS Conditionals Level 3 y son:

+ + + +

Como cada grupo de condición puede incluir también declaraciones anidadas, puede haber un número de anidaciones ilimitado.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificatiónEstadoComentarios
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definición inicial
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}@-webkit-keyframes estandarizado.
+ +

Véase también

+ + diff --git a/files/es/web/css/attr()/index.html b/files/es/web/css/attr()/index.html new file mode 100644 index 0000000000..7f78df0156 --- /dev/null +++ b/files/es/web/css/attr()/index.html @@ -0,0 +1,246 @@ +--- +title: attr +slug: Web/CSS/attr() +translation_of: Web/CSS/attr() +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La función attr() de CSS se usa para recuperar el valor de un atributo del elemento seleccionado y usarlo en la hoja de estilos. Se puede usar también en un pseudo-elemento y, en este caso, el valor del atributo en el elemento originado del pseudo-elemento es devuelto.

+ +

La función attr() de CSS se puede usar con cualquier propiedad de CSS. {{ experimental_inline() }}

+ +

Sintaxis

+ +
Sintaxis formal: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

Valores

+ +
+
attribute-name
+
Es el nombre de un atributo en el elemento HTML al que se hace referencia en el CSS. Soporte para otros atributos a parte de {{ cssxref("content") }} es {{ experimental_inline() }}.
+
<type-or-unit>
+
Es una palabra clave que representa o el tipo del valor del atributo, o su unidad, pues en HTML algunos atributos tienen unidades implícitas. Si el uso de <type-or-unit> como valor del atributo especificado no es válido, la expresión attr() también será no válida. Si se omite, el valor por defecto es string. La lista de valores válidos son: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordAssociated typeCommentDefault value
string{{cssxref("<string>")}}El valor del atributo es tratado como una {{cssxref("<string>")}} de CSS. No se reparsea, y en este caso particular los caracteres son usados tal y como son en vez de convertirlos en diferentes caracteres de CSS.Cadena vacía
color {{ experimental_inline() }}{{cssxref("<color>")}}El valor del atributo es tratado como hash (3- or 6-value hash) o a una palabra clave. Debe ser un valor válido de una {{cssxref("<string>")}} de CSS.
+ Los espacios iniciales y finales son eliminados.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}El valor del atributo es tratado como una cadena que se usa en una función url() de CSS.
+ URLs relativas se resuelven con respecto al documento original, no respecto a la hoja de estilos. Los espacios iniciales y finales son eliminados.		La url about:invalid que apunta a un documento inexistente con una condición de error genérico.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}El valor del atributo es tratado como un {{cssxref("<integer>")}} CSS. Si no es válido, si no es un entero o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
+ Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
number {{ experimental_inline() }}{{cssxref("<number>")}}El valor del atributo es tratado como {{cssxref("<number>")}}. Si no es válido, si no es un número o está fuera del rango aceptado por la propiedad CSS, se usa el valor por defecto.
+ Los espacios iniciales y finales son eliminados.		0, or, if 0 is not a valid value for the property, the property's minimum value.
length {{ experimental_inline() }}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{ experimental_inline() }}{{cssxref("<length>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given unit is a relative length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0, or, if 0 is not a valid value for the property, the property's minimum value.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}The attribute value is parsed as a CSS {{ cssxref("<angle>") }} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{ cssxref("<angle>") }} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
time {{ experimental_inline() }}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0s, or, if 0s is not a valid value for the property, the property's minimum value.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ Leading and trailing spaces are stripped.		0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
+ If the given value is used as a length, attr()computes it to an absolute length.
+ Leading and trailing spaces are stripped.		0%, or, if 0% is not a valid value for the property, the property's minimum value.
+
+
<fallback>
+
The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
+
+ +

Examples

+ +
p::before {
+  content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="hello">world</p>
+
+ +

Result

+ +

{{ EmbedLiveSample("Examples", '100%', '80') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Added two optional parameters; can be used on all properties; may return other values than {{cssxref("<string>")}}. These changes are {{ experimental_inline() }} and may be dropped during the CR phase if browser support is too small.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Limited to the {{ cssxref("content") }} property; always return a {{cssxref("<string>")}}
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2.0{{ CompatGeckoDesktop(1.0) }}89.03.1
Usage in other properties than {{cssxref("content")}} and with non-string values  {{ experimental_inline() }}{{CompatNo()}}{{CompatNo()}} (see {{bug("435426")}}){{CompatNo()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{ CompatGeckoMobile(1.0) }}810.03.1
Usage in other properties than {{cssxref("content")}}and with non-string values  {{ experimental_inline() }}{{CompatUnknown()}}{{CompatNo()}} (see {{bug("435426")}}){{CompatNo()}}{{CompatUnknown()}}{{CompatUnknown()}}
+
+ +

 

diff --git a/files/es/web/css/auto/index.html b/files/es/web/css/auto/index.html new file mode 100644 index 0000000000..f9f19df9f7 --- /dev/null +++ b/files/es/web/css/auto/index.html @@ -0,0 +1,49 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/width +--- +

+

<< Volver +

+

Resumen

+

Un valor computado automáticamente por el 'useragent.' +

Usando el valor auto en cualquier propiedad, dejamos al navegador que calcule el valor requerido.


+FIXME +

+

Ejemplos

+
div {
+   height: 600px;
+   border: 1px solid #000;
+}
+
+
div img {
+   height: auto;
+   border: 1px solid red;
+}
+
+

Se utiliza en

+ +


+

+
+

Categorías +Interwiki Languages +

+
+{{ languages( { "en": "en/CSS/auto" } ) }} diff --git a/files/es/web/css/azimuth/index.html b/files/es/web/css/azimuth/index.html new file mode 100644 index 0000000000..b4ccce8e37 --- /dev/null +++ b/files/es/web/css/azimuth/index.html @@ -0,0 +1,70 @@ +--- +title: azimuth +slug: Web/CSS/azimuth +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Archive/Web/CSS/azimuth +--- +

+

<< Referencia CSS +


+

+

Resumen

+

En combinación con elevación, azimuth permite posicionar en el espacio/lugar diferentes fuentes de audio para una presentación auditiva (aural). Es importante ya que es un medio natural de definir varias fuentes de audio que pueden ser colocadas en lugares diferentes en la escena auditiva. Una salida estéreo produce una escena lateral, mientras que los cascos o los sistemas de múltiples altavoces permiten obtener una audición en 3D. +

+ +

Sintaxis

+
azimuth: angle | [[ left-side | far-left | left |
+    center-left | center | center-right | right |
+    far-right | right-side ] || behind ] | leftwards |
+    rightwards | inherit
+
+

Valores

+
ángulo (angle) 
La posición de la fuente audible se describe por un ángulo comprendido en tre -360deg y 360deg. El valor 0deg se encuentra directamente en el centro del escenario auditivo (valor por defecto), 90deg es a la derecha, 180deg es detrás y 270deg o -90deg es a la izquierda. +
+

Palabras claves de posición

+ +

Ejemplos

+
h1   { azimuth: 30deg }
+td.a { azimuth: far-right }          /*  60deg */
+#12  { azimuth: behind far-right }   /* 120deg */
+p.comment { azimuth: behind }        /* 180deg */
+
+

Especificaciones

+ +

Compatibilidad con navegadores

+

Por definir. +

+

Ver también

+

{{ Cssxref("elevation") }} +

{{ languages( { "en": "en/Image/Azimuth.png", "en": "en/CSS/azimuth", "fr": "fr/CSS/azimuth", "pl": "pl/CSS/azimuth", "zh-cn": "cn/CSS/azimuth" } ) }} diff --git a/files/es/web/css/backdrop-filter/index.html b/files/es/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..ca5df66d42 --- /dev/null +++ b/files/es/web/css/backdrop-filter/index.html @@ -0,0 +1,145 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - Diseño + - Filtro SVG + - Propiedad CSS + - Referencia + - SVG + - Web + - graficos +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad CSS de backdrop-filter le permite aplicar efectos gráficos como el desenfoque o el cambio de color al área detrás de un elemento. Debido a que se aplica a todo lo que está detrás del elemento, para ver el efecto debe hacer que el elemento o su fondo sean al menos parcialmente transparentes.

+ +
/* Valor de palabra clave */
+backdrop-filter: none;
+
+/* URL al filtro SVG */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* valores <filter-function> */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Múltiples filtros */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Valores globales */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
No se aplica filtro al fondo.
+
<filter-function-list>
+
Una lista separada por espacios de {{cssxref("<filter-function>")}} o un filtro SVG que se aplicará al fondo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url('https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 600, 400)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.backdrop-filter")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/backface-visibility/index.html b/files/es/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..509c6e05fc --- /dev/null +++ b/files/es/web/css/backface-visibility/index.html @@ -0,0 +1,270 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - Experimental + - Propiedad CSS + - Referencia +translation_of: Web/CSS/backface-visibility +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Resumen

+ +

La propiedad CSS backface-visibility determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal.

+ +

Hay casos en los que no queremos que la cara frontal de un elemento sea visible a través de la cara posterior, como cuando se hace el efecto de voltear una tarjeta (estableciendo dos elementos lado a lado).

+ +

Esta propiedad no tiene efecto en transformaciones 2D, pues estos no tienen perspectiva.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
backface-visibility: visible;
+backface-visibility: hidden;
+
+ +

Valores

+ +

Esta propiedad puede tener dos valores diferentes (y exclusivos):

+ + + +

Sintaxis formal

+ +
+
+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Cubo con caras transparentes

+ +

Contenido HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <th><code>backface-visibility: visible;</code></th>
+      <th><code>backface-visibility: hidden;</code></th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube showbf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>All the faces are transparent and the three back faces are visible through the front ones.</p>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube hidebf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>No face is opaque, but the three back faces are always hidden now.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+ +

Contenido CSS

+ +
/* Shorthand classes that will show or hide the three back faces of the "cube" */
+.hidebf div {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+  -webkit-backface-visibility: visible;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+  -webkit-perspective: 300px;
+  -webkit-perspective-origin: 150% 150%;
+  -webkit-transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+  -webkit-transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+  -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+  -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+  -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Cube_with_transparent_faces', 620, 460)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}{{Spec2('CSS3 Transforms')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico12{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("10")}}{{property_prefix('-moz')}}
+ {{CompatGeckoDesktop("16")}}[1]		1015{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.0{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("10")}}{{property_prefix('-moz')}}
+ {{CompatGeckoMobile("16")}}[1]		8.1
+ 11{{property_prefix('-webkit')}}		{{CompatVersionUnknown}}{{property_prefix('-webkit')}}{{CompatVersionUnknown}}{{property_prefix('-webkit')}}
+
+ +

[1] Además del soporte sin prefijo, Gecko 45.0 {{geckoRelease("45.0")}} añadió sopore para una versión de la propiedad con prefijo -webkit por razones de compatibilidad, bajo la preferencia layout.css.prefixes.webkit, con valor predeterminado de false. A partir de Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esta preferencia es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/background-attachment/index.html b/files/es/web/css/background-attachment/index.html new file mode 100644 index 0000000000..0075a07f88 --- /dev/null +++ b/files/es/web/css/background-attachment/index.html @@ -0,0 +1,133 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS +translation_of: Web/CSS/background-attachment +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS background-attachment determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor.

+ + + +

Sintaxis

+ +
background-attachment: scroll | fixed | inherit
+
+ +

Valores

+ +
+
scroll 
+
Si scroll es especificado, la imagen de fondo se moverá dentro de la pantalla junto al bloque que la contiene.
+
fixed 
+
Si fixed es especificado, la imagen de fondo estará fija en la pantalla y no se moverá con el bloque contenedor.
+
+ +

Ejemplos

+ +

Ejemplo simple

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

Result

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Soporta múltiples imagenes de fondo

+ +

Esta propiedad soporta multiples imágenes de fondo. Puedes especificar un <attachment> diferente por cada imagen de fondo, separado por comas. Cada imagen es asociada con el correspondiente valor de <attachment>, especificado desde el primero hasta el último.

+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

Resultado

+ +

{{EmbedLiveSample("Multiple_background_image_support")}}

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-blend-mode/index.html b/files/es/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..808654f167 --- /dev/null +++ b/files/es/web/css/background-blend-mode/index.html @@ -0,0 +1,150 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - Composición CSS + - Propiedad CSS +translation_of: Web/CSS/background-blend-mode +--- +

{{CSSRef()}}

+ +

Resumen

+ +

La propiedad CSS background-blend-mode describe cómo las imágenes de fondo y el color de fondo del elemento deben mezclar entre sí. 

+ +

Los modos de fusión deben ser definidos en el mismo orden que la propiedad CSS {{cssxref("background-image")}}. Si la cantidad de modos de fusión y de imagenes de fondo no son iguales, se repetirán y/o truncarán hasta igualar las cantidades.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor */
+background-blend-mode: normal;
+
+/* Dos valores, uno por fondo */
+background-blend-mode: darken, luminosity;
+
+/* Valores globales */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+
+ +

Valores

+ +
+
<blend-mode>
+
Es un {{cssxref("<blend-mode>")}} que denota el modo de fusión que se aplicará. Puede haber varios valores, separados por coma.
+
+ +

Ejemplos

+ + + + + + + +

{{ EmbedLiveSample('Examples', "330", "330") }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('Compositing', '#background-blend-mode', 'background-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico 35{{CompatGeckoDesktop('30.0')}}{{CompatNo()}}227.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo()}}{{CompatGeckoMobile('30.0')}}{{CompatNo()}}22iOS 8
+
+ +

Véase también

+ + diff --git a/files/es/web/css/background-clip/index.html b/files/es/web/css/background-clip/index.html new file mode 100644 index 0000000000..2c8b8daf79 --- /dev/null +++ b/files/es/web/css/background-clip/index.html @@ -0,0 +1,171 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - Diseño + - Fondo CSS + - Propiedad CSS + - Referencia + - Referência(2) + - Web +translation_of: Web/CSS/background-clip +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

La propiedad CSS background-clip especifica si el fondo de un elemento, ya sea el color o imagen, se extiende por debajo su borde.

+ +

Si la imagen o color de fondo no esta definido, esta propiedad solo tendrá un efecto visual cuando el borde tenga regiones transparentes o regiones parcialmente opacas (debido a {{ Cssxref("border-style") }} o {{ Cssxref("border-image") }}); de lo contrario el borde cubre la diferencia.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis Formal: {{csssyntax("background-clip")}}
+ +
background-clip: border-box
+background-clip: padding-box
+background-clip: content-box
+
+background-clip: inherit
+
+ +

Valores

+ +
+
border-box
+
El fondo se extiende hasta el borde exterior de el contenedor (pero por debajo de la frontera, en orden z).
+
padding-box
+
El fondo no se muestra a través del borde (el fondo se extiende hasta el borde exterior del padding).
+
content-box
+
El fondo se dibuja desde donde inicia el contenido.
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p class="border-box">The yellow background extends behind the border.</p>
+<p class="padding-box">The yellow background extends to the inside edge of the border.</p>
+<p class="content-box">The yellow background extends only to the edge of the content box.</p>
+
+ +

Contenido CSS

+ +
p {
+   border: 5px navy;
+   border-style: dotted double;
+   margin: 2em;
+   padding: 2em;
+   background: #F8D575;
+}
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+ +

Salida

+ +

{{ EmbedLiveSample('Ejemplo', 540, 450) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Compatibilidad del navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte basico1.0 [3]{{ CompatGeckoDesktop("2.0") }} [1]9.0 [2]10.53.0 (522) [3]
content-box1.0 [3]{{ CompatGeckoDesktop("2.0") }} [1]9.0 [2]12.0 (maybe earlier)3.0 (522) [3]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.1{{ CompatGeckoMobile("14") }}7.112.1{{ CompatVersionUnknown() }}
content-box4.1{{ CompatGeckoMobile("14") }}7.112.1{{ CompatVersionUnknown() }}
+
+ +

[1] Gecko soportado, desde la version 1.1 a la version 1.9.2, que se corresponde con Firefox 1.0 a 3.6 incluido, con una diferente sintaxis con prefijo: -moz-background-clip: padding | border.

+ +

[2] Internet Explorer 7 soportado, pero en otras versiones de Internet Explorer se comporta como background-clip:padding si overflow es: hidden | auto | scroll.

+ +

[3]Webkit también es compatible con prefijo en esta propiedad, y en ese caso, además de las palabras clave actuales, los sinónimos alternativas son: padding, border, and content.

+ +

[4] Konqueror 3.5.4 tiene soporte con -khtml-background-clip.

+ +

Ver también

+ + diff --git a/files/es/web/css/background-color/index.html b/files/es/web/css/background-color/index.html new file mode 100644 index 0000000000..4f3a1fb78f --- /dev/null +++ b/files/es/web/css/background-color/index.html @@ -0,0 +1,141 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-color +--- +

 

+ +

Resumen

+ +

Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra "transparente".

+ + + +

Sintaxis

+ +
background-color: color | transparent | inherit
+
+ +

Valores

+ +
+
<color>
+
Se puede especificar el color de fondo como un valor RGB hexa-decimal o regular, o utilizando una de las palabras claves predefinidas de color.
+
+ +
+
transparent 
+
El valor por defecto del color de fondo (background-color) es transparente tomando así el color del elemento que está justo debajo de él en el apilamiento.
+
+ +

Ejemplos

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Ejemplos","200","150")}}

+ +

Notas

+ +

(Add links to good colour reference sites here.)

+ +

 

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ +

TBD: This may be removed in favour of a centralized compatibility chart.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Navegadorsoporta background-color
Internet Explorer 6parcialmente
Internet Explorer 7parcialmente
Firefox 1.5Sí
Firefox 2Sí
Opera 8.5parcialmente
Opera 9parcialmente
Konqueror 3.5Sí
Safari 2Sí
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-image/index.html b/files/es/web/css/background-image/index.html new file mode 100644 index 0000000000..b2ab46dd70 --- /dev/null +++ b/files/es/web/css/background-image/index.html @@ -0,0 +1,135 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-image +--- +

{{ PreviousNext("CSS:background-color", "CSS:background-position") }}

+ +

Resumen

+ +

La propiedad CSS background-image establece una o más imágenes de fondo para un elemento.

+ + + +

Sintaxis

+ +
background-image: url | none | inherit
+
+ +

Valores

+ +
+
url 
+
Localización de la imagen que se utilizará de fondo.
+
none 
+
Utilizado para especificar que un elemento no debe tener ninguna imagen de fondo.
+
+ +

Ejemplos

+ +

Note that the star image is partially transparent and is layered over the cat image.

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Ejemplos')}}

+ +

Notas

+ +

Los desarrolladores deben asegurarse que han especificado un color de fondo ({{ Cssxref("background-color") }}) en el caso de no usar una imagen. Las imágenes de fondo son mostradas encima del color de fondo.

+ +

Sobre Accesibilidad

+ +

Los lectores de pantalla no reconocen las imágenes de fondo, si la imagen tiene un significado y no es de carácter meramente decorativa deberás incluirla semánticamente en el documento utilizando la etiqueta img.

+ +

Para más información (en inglés):

+ + + +

Especificaciones

+ + + +

Compatibilidad de navegador

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-origin/index.html b/files/es/web/css/background-origin/index.html new file mode 100644 index 0000000000..e7e8a94c63 --- /dev/null +++ b/files/es/web/css/background-origin/index.html @@ -0,0 +1,88 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Referência +translation_of: Web/CSS/background-origin +--- +

Resumen

+

La propiedad background-origin especifica el área de origen de un fondo o imagen en determinada caja. para que la propiedad background-position calcule la posición de inicio de un fondo o imagen definida por la propiedad background-image.

+ +

Sintaxis

+
background-origin:[padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
+
+

Valores

+
+
+ border-box
+
+

El fondo se extiende al borde exterior (por debajo del borde en el orden z), la posición es relativa al borde de la caja.

+
+
+ padding-box
+
+

El fondo se extiende al borde exterior del padding, la posición es relativa al padding de la caja.

+
+
+ content-box
+
+

El fondo se extiende dentro del (recortado al) contenido de la caja, la posición es relativa al contenido de la caja.

+
+
+

Ejemplos

+
div{
+  border:4px dotted #FBE700;
+  background:url('imagen.jpg');
+  background-position:0 0;
+  background-origin:border-box;
+}
+
+
div{
+  background-image: url('image1.jpg'), url('image2.jpg');
+  background-position: 0 0, bottom left;
+  background-origin: padding-box, content-box;
+}
+
+

Notas

+ +

Compatibilidad de navegadores

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.04.0 (2.0)9.010.53.0 (522)
+
+

Especificaciones

+ +

Relacionado

+

background, background-attachment, background-image, background-repeat

diff --git a/files/es/web/css/background-position-x/index.html b/files/es/web/css/background-position-x/index.html new file mode 100644 index 0000000000..cb85bcd824 --- /dev/null +++ b/files/es/web/css/background-position-x/index.html @@ -0,0 +1,128 @@ +--- +title: background-position-x +slug: Web/CSS/background-position-x +translation_of: Web/CSS/background-position-x +--- +
{{CSSRef}}
+ +

El background-position-x propiedad de CSS  coloca la posicion horizontal inicial por cada imagen de fondo. La posicion es relativa a la posicion de la capa puesta por {{cssxref("background-origin")}}.

+ +
{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
+ + + +

The value of this property is overridden by any declaration of the {{cssxref("background")}} or {{cssxref("background-position")}} shorthand properties applied to the element after it.

+ +

Syntax

+ +
/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* <percentage> values */
+background-position-x: 25%;
+
+/* <length> values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+
+ +

The background-position-x property is specified as one or more values, separated by commas.

+ +

Values

+ +
+
left
+
Aligns the left edge of the background image with the left edge of the background position layer.
+
center
+
Aligns the center of the background image with the center of the background position layer.
+
right
+
Aligns the right edge of the background image with the right edge of the background position layer.
+
{{cssxref("<length>")}}
+
The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).
+
{{cssxref("<percentage>")}}
+
The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the right edge of the background image is aligned with the right edge of the container, thus a value of 50% horizontally centers the background image.
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Basic example

+ +

The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background-color: skyblue;
+  background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: bottom 10px;
+}
+ +

Result

+ +

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

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Backgrounds', '#background-position-longhands', 'background-position-x')}}{{Spec2('CSS4 Backgrounds')}}Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.background-position-x")}}

+ +

See also

+ + diff --git a/files/es/web/css/background-position/index.html b/files/es/web/css/background-position/index.html new file mode 100644 index 0000000000..66a74be4b3 --- /dev/null +++ b/files/es/web/css/background-position/index.html @@ -0,0 +1,132 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background-position +--- +

{{ PreviousNext("CSS:background-image", "CSS:background-repeat") }}

+ +

Resumen

+ +

background-position define la posición inicial de la imagen de fondo especificada.

+ + + +

Sintaxis

+ +
background-position: [ <percentage> | <length> | left | center | right  ]
+                     [ <percentage> | <length> | top  | center | bottom ] ? ;
+
+ +
background-position: [ top | center | bottom ];
+
+ +
background-position: inherit;
+
+ +

Valores

+ +
+
{{ Cssxref("porcentaje") }} <percentage>
+
Con el par de valores '0% 0%', la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor '100% 100%' pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor '14% 84%', el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado.
+
{{ Cssxref("length") }} <length>
+
con un valor '2cm 1cm', la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado.
+
top left y left top
+
Es igual a '0% 0%'.
+
top, top center y center top
+
Es igual a '50% 0%'.
+
right top y top right
+
Es igual a '100% 0%'.
+
left, left center y center left
+
Es igual a '0% 50%'.
+
center and center center
+
Es igual a '50% 50%'.
+
right, right center y center right
+
Es igual a '100% 50%'.
+
bottom left y left bottom
+
Es igual a '0% 100%'.
+
bottom, bottom center y center bottom
+
Es igual a '50% 100%'.
+
bottom right y right bottom
+
Es igual a '100% 100%'.
+
+ +

Si solo se especifica un valor, se entenderá que es la posición horizontal con la vertical al 50%. De otra manera el primer valor especifica la posición horizontal. Se admiten valores negativos y combinaciones de palabras claves, largos (lenght) o porcentajes, pero en el caso de mezclar las palabras claves con otros valores, 'left' y 'right' solo se utilizarán como primer valor y 'top' y 'bottom' como segundo.

+ +

Ejemplos

+ +
.exampleone {
+	background-image: url("logo.png");
+	background-position: top center;
+}
+
+.exampletwo {
+	background-image: url("logo.png");
+	background-position: 25% 75%;
+}
+
+.examplethree {
+	background-image: url("logo.png");
+	background-position: 2cm bottom;
+}
+
+.examplefour {
+	background-image: url("logo.png");
+	background-position: center 10%;
+}
+
+.examplefive {
+	background-image: url("logo.png");
+	background-position: 2cm 50%;
+}
+
+
+ +

Especificaciones

+ + + +

Compatibilidad

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/background-repeat/index.html b/files/es/web/css/background-repeat/index.html new file mode 100644 index 0000000000..660f22df27 --- /dev/null +++ b/files/es/web/css/background-repeat/index.html @@ -0,0 +1,250 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - 'CSS:Referencias' + - Fondos CSS + - Propiedades de CSS + - Referências + - Todas_las_Categorías +translation_of: Web/CSS/background-repeat +--- +
{{CSSRef}}
+ +

La propiedad de CSS background-repeat define como se repiten los fondos del documento. Un fondo de imagen puede ser repetido sobre el eje horizontal, el eje vertical, ambos ejes, o no estar repetido.

+ +

 

+ +
{{EmbedInteractiveExample("pages/css/background-repeat.html")}} 
+ +
 
+ + + +

 

+ +

 

+ +
/* One-value syntax */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* Two-value syntax: horizontal | vertical */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Global values */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+
+ +
 
+ + + +

 

+ +

Por defecto, las imágenes repetidas son ajustadas al tamaño del elemento, pero pueden ser reescaladas para ajustarse (usando round) o igualmente distribuido desde un extremo a otro (usando space).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<repeat-style>
+
Los atributos de valor único son una abreviación de los atributos de doble valor.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor únicoDoble valor equivalente
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ En los atributos de doble valor, el primer valor se comporta usando la repetición horizontal y el segundo valor representa el comportamiento de repetición vertical. Aquí se explica como cada opción funciona con cada dirección:
+
+ + + + + + + + + + + + + + + + + + + +
repeat La imagen se repite hasta cobrir todo el fondo existente. La última imagen debe ser recortada si no encaja.
spaceLa imagen se repite lo máximo posible sin recortarse. La primera y última imagen son fijadas a cada lado del elemento, y el espacio blanco es distribuido igualmente entre las imágenes. La propiedad {{cssxref("background-position")}} es ignorada a menos que una sola imagen pueda ser desplegada sin recortar. El único caso donde se recorta usando space es cuando no hay suficiente sitio para desplegar una imagen.
roundComo el espacio permitido aumenta, las imágenes repetidas se estrechan (sin dejar huecos) hasta que haya espacio suficiente (espacio restante >= la mitad del ancho de la imagen) para que otra sea añadida. Cuando la próxima imagen es añadida, todas las demás son comprimidas al espacio disponible. Ejemplo: Una imagen con un ancho inicial de 260px, se repite 3 veces, debería estirarse hasta que el tamaño sea de 300px, luego otra imagen debe ser añadida. Luego deberían comprimirse hasta los 225px.
no-repeatLa imagen no se repite (y por lo tanto el area coloreada de la imagen de fondo no debe ser rellenada completamente). La posición del fondo no repetido ies definida por la propiedad de CSS {{cssxref("background-position")}}.
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

HTML

+ +
<ol>
+  <li>no-repeat
+    <div class="one"></div>
+  </li>
+  <li>repeat
+    <div class="two"></div>
+  </li>
+  <li>repeat-x
+    <div class="three"></div>
+  </li>
+  <li>repeat-y
+    <div class="four"></div>
+  </li>
+  <li>space
+    <div class="five"></div>
+  </li>
+  <li>round
+    <div class="six"></div>
+  </li>
+  <li>repeat-x, repeat-y (multiple images)
+    <div class="seven"></div>
+  </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* Background repeats */
+.one {
+  background-repeat: no-repeat;
+}
+.two {
+  background-repeat: repeat;
+}
+.three {
+  background-repeat: repeat-x;
+}
+.four {
+  background-repeat: repeat-y;
+}
+.five {
+  background-repeat: space;
+}
+.six {
+  background-repeat: round;
+}
+
+/* Multiple images */
+.seven {
+  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
+}
+ +

Resultado

+ +

En este ejemplo, cada elemento de la lista coincide con un valor diferente de background-repeat.

+ +

{{EmbedLiveSample('Examples', 240, 560)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Añade soporte para diferentes imágenes de fondo, el atributo de doble valor equivalente permite un comportamiento de repetición diferente para las direcciones verticales y horizontales, las palabras clave space y round , y para fondos en elementos en la misma línea mediante la definición precisa de la zona disponible del fondo.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}Sin cambios significativos.
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.background-repeat")}}

+ +

Mira también

+ + diff --git a/files/es/web/css/background-size/index.html b/files/es/web/css/background-size/index.html new file mode 100644 index 0000000000..827eb7b8e5 --- /dev/null +++ b/files/es/web/css/background-size/index.html @@ -0,0 +1,235 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-size +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

La propiedad CSS background-size especifica el tamaño de las imágenes de fondo.

+ +
Nota: Si el valor de esta propiedad no se encuentra en una propiedad abreviada {{ cssxref("background") }} esta es aplicada para los elementos después de la propiedad CSS background-size, el valor de esta propiedad se restablece a su valor inicial de la propiedad abreviada.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
background-size:  background-size[ background-size]*
+
+ +

donde :

+ +
+
background-size
+
Es una de las palabras claves:
+
+
    +
  • contain
    + Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.
    • +
  • cover
    + Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.
    • +
+ O bien, uno o dos de los siguientes valores, que denota el tamaño horizontal y el tamaño vertical respectivamente (si sólo es especificado uno, el valor predeterminado para el segundo es auto): + +
    +
  • Un valor {{cssxref("<percentage>")}} que escala la imagen de fondo en la dimensión correspondiente al porcentaje especificado del área de posicionamiento de fondo, que viene el valor determinado {{ cssxref("background-origin") }}. El área de posicionamiento del fondo es, por defecto, el área que contiene el contenido de la caja y su relleno, el área también se puede cambiar a simplemente el contenido o el área que contiene bordes, el relleno y contenido. Si el fondo de {{cssxref ("background-attachment", "attachment")}} es fija, el área de posicionamiento del fondo es más bien toda el área de la ventana del navegador, sin incluir el área cubierta por las barras de desplazamiento si están presentes. Porcentajes negativos no son permitidos.
    • +
  • Un valor {{cssxref("<length>")}} que escala la imagen de fondo a la longitud especificada en la dimensión correspondiente. Longitudes negativas no están permitidos.
    • +
  • La palabra clave auto que escala el fondo de la imagen en la dirección correspondiente de modo que su proporción escencial se mantiene.
    • +
+
+
+ +

La interpretación de los valores posibles depende de las dimensiones propias de la imagen (ancho y alto) y proporción propia (relación entre la anchura y altura). Una imagen de mapa de bits siempre tiene dimensiones propias y una proporción propia. Una imagen del vector puede tener ambas dimensiones propias (y por lo tanto debe tener una proporción propia). También puede tener una o ningúna dimensiones propias, y en cualquier caso se podría o no tener una proporción propia. Los gradientes son tratados como imágenes sin dimensiones propias o proporción propia.

+ +
+

{{ gecko_callout_heading("8.0") }}

+ +

Este comportamiento ha cambiado en Gecko 8.0 {{geckoRelease ("8.0")}}. Antes de esto, los gradientes se tratan como imágenes sin dimensiones propias, con una proporción propia idéntica al área de posicionamiento de fondo.

+
+ +

 

+ +

Las imágenes de fondo generados a partir de elementos con {{ cssxref("-moz-element") }} (que en realidad coincide con un elemento) se tratan actualmente como las imágenes con las dimensiones del elemento, o de la zona de posicionamiento de fondo si el elemento es SVG, con la proporción propia correspondiente.

+ +
Nota: El comportamiento de los <degradados> cambió en Gecko 8.0 {{geckoRelease("8.0")}}. Anteriormente se trataban como imágenes sin dimensiones intrínsecas, pero con proporciones intrínsecas idénticas a las del área de posicionamiento del fondo.
+ +

El tamaño representado de la imagen de fondo se calcula como sigue:

+ +
+
Si ambos componentes de background-size se especifican y no son auto:
+
La imagen de fondo representa al tamaño especificado.
+
si el background-size es contain o cover:
+
La imagen es renderizada, preservando su proporción propia, en el tamaño mayor contenido dentro de, o cubriendo, el área de posicionamiento de fondo. Si la imagen no tiene una proporción propia, entonces se representa al tamaño de la zona de posicionamiento de fondo.
+
Si el background-size es auto o auto auto:
+
Si la imagen tiene dos dimensiones propias, se representa en ese tamaño. Si no tiene dimensiones propias y no proporción propia, se representa en el tamaño del área de posicionamiento de fondo. Si no tiene dimensiones, pero tiene una proporción, se representa como si se hubiera especificado contener en su lugar. Si la imagen tiene una dimensión propia y una proporción, ha rendido en el tamaño determinado por esa única dimensión y la proporción. Si la imagen tiene una dimensión propia pero proporción no, se representa utilizando la dimensión propia y la dimensión correspondiente del área de posicionamiento de fondo.
+
Si el background-size tiene un auto componente y un non-auto componente:
+
Si la imagen tiene una proporción propia, entonces hacen uso de la dimensión especificada, y calcula la otra dimensión de la dimensión especificada y la proporción propia. Si la imagen no tiene una parte propia, utilice la dimensión especificada para esa dimensión. Por la otra dimensión, utilice la imagen de dimensión propia correspondiente, si es que existe. Si no hay ninguna dimensión propia tal, el uso de la dimensión correspondiente del área de posicionamiento de fondo.
+
+ +

Tenga en cuenta que los antecedentes de tamaño de imágenes vectoriales que carecen de dimensiones propias o la proporción no se ha aplicado plenamente en todos los navegadores. Tenga cuidado con confiar en el comportamiento descrito anteriormente, y la prueba en varios navegadores (incluyendo específicamente las versiones de Firefox 7 o anterior y Firefox 8 o superior) para asegurarse de versiones diferentes son aceptables.

+ +

Ejemplos

+ +

Esta demostración de backround-size: cover y esta demostración de background-size: contain están destinados a ser abiertos en nuevas ventanas para que pueda ver cómo contain y cover comportarse cuando las dimensiones del área de posicionamiento de fondo variar. Esta serie de demostraciones de cómo funciona el background-size e interactúa con otras propiedades de background-* debe casi cubrir el suelo restante en el uso de background-size solo y en combinación con otras propiedades.

+ +

Notas

+ +

Si especifíca un degradado como fondo y tiene especificado un background-size para ir con ella, es mejor no especificar un tamaño que utilice un solo componente auto, o es especificado usando solo un valor de anchura (por ejemplo, background-size: 50%). Renderizado de gradientes en tales casos cambiaron en Firefox 8, y en la actualidad es generalmente inconsistente en todos los navegadores, que no todo implementa el renderizadando en total conformidad con la especificación CSS3 background-size y con la especificación de valores de imagen CSS3 gradiente.

+ +
.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* NO RECOMENDADO */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* OKAY */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+
+ +

Tenga en cuenta que particularmente no es recomendado usar una dimensión de píxeles y una dimensión auto con degradado, porque es imposible replicar el renderizado en las versiones de Firefox anteriores a 8, y en los navegadores que no implementaron el renderizado de Firefox 8, sin saber el tamaño exacto del elemento cuyo fondo se ha especificado.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadosComentario
{{ SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{ property_prefix("-webkit") }} [2]{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]9.09.5{{ property_prefix("-o") }}
+ with some bugs [1]		3.0 (522){{ property_prefix("-webkit") }}
+ but from an older CSS3 draft [2]		  
3.0{{ CompatGeckoDesktop("2.0") }}10.04.1 (532)
Soporte para
+ contain y cover		3.0{{ CompatGeckoDesktop("1.9.2") }}9.010.04.1 (532)
Soporte para SVG backgrounds{{ CompatUnknown() }}{{ CompatGeckoDesktop("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)Windows PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}
+ 2.3		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Soporte para SVG backgrounds{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1]  Opera 9.5 's calcula el área de posicionamiento de background es incorrecto para los background fijos. Opera 9,5 también interpreta la forma de dos valores como un factor de escala horizontal y, por las apariencias, una dimensión de recorte vertical. Esto ha sido arreglado en Opera 10.

+ +

[2] WebKit-based browsers originally implemented an older draft of CSS3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.

+ +

[2] Los navegadores basados ​​en WebKit- originalmente implementado un proyecto anterior de background-size CSS3 en que se trata de un valor omitido segundo como duplicar el primer valor; este proyecto no incluye el cover o contain palabras claves.

+ +

[3] Konqueror 3.5.4 soportan -khtml-background-size.

+ +

[4] Si bien esta propiedad es nueva en Gecko 1.9.2 (Firefox 3.6), es posible estirar una imagen completamente sobre el fondo en Firefox 3.5 usando {{ cssxref("-moz-border-image") }}.

+ +
.foo {
+  background-image: url(bg-image.png);
+
+  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
+     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
+       -o-background-size: 100% 100%;           /* Opera 9.5 */
+          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
+
+  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
+}
+ +

Ver también

+ + diff --git a/files/es/web/css/background/index.html b/files/es/web/css/background/index.html new file mode 100644 index 0000000000..d982708096 --- /dev/null +++ b/files/es/web/css/background/index.html @@ -0,0 +1,138 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/background +--- +

{{CSSRef}}

+ +

La propiedad background es un atajo para definir los valores individuales del fondo en una única regla CSS. Se puede usar background para definir los valores de una o de todas las propiedades siguientes: {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color", "color") }}, {{ Cssxref("background-image", "image") }}, {{ Cssxref("background-position", "position") }}, {{ Cssxref("background-repeat", "repeat") }}.

+ + + +

Sintaxis

+ +
/* Usando <background-color> */
+background: green;
+
+/* Usando <bg-image> y <repeat-style> */
+background: url("test.jpg") repeat-y;
+
+/* Usando <box> and <background-color> */
+background: border-box red;
+
+/* Una sola imagen, centrada y escalada */
+background: no-repeat center/80% url("../img/image.png");
+ +

La propiedad  background se especifica como una o más capas de fondo, separadas por comas.

+ +

La sintaxis de cada capa es la siguiente:

+ + + +

Valores

+ +
+
background-color
+
ver color.
+
background-image 
+
ver image.
+
background-repeat 
+
ver repeat.
+
background-attachment 
+
ver background-attachment.
+
background-position 
+
ver position.
+
+ +

Ejemplos

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Ejemplos")}}

+ +

Notas

+ +

Tomando una declaración válida, la propiedad background inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto.

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorMínima versión
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}

diff --git a/files/es/web/css/basic-shape/index.html b/files/es/web/css/basic-shape/index.html new file mode 100644 index 0000000000..7ebf5eb24b --- /dev/null +++ b/files/es/web/css/basic-shape/index.html @@ -0,0 +1,208 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/basic-shape +--- +

{{CSSRef}}

+ +

Resumen

+ +

El tipo <basic-shape> puede ser especificado usando funciones de figura (shape) básicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores <basic-shape>. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia.

+ +

Figuras posibles

+ +

Las siguientes figuras son soportadas. Todos los valores <basic-shape> usan notación funcional y son definidos aquí usando la sintaxis de definición de valor.

+ +
+
inset()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

Define un rectángulo incrustado.

+ +

Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores.

+ +

Los argumentos opcionales <border-radius> definen esquinas redondeadas para el rectángulo incrustado usando la sintaxis de abreviatura de border-radius.

+ +

Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se está definiendo una figura que no encierra ningun área. Para esta especificación, el resultado es un área flotante vacía.

+
+
polygon()
+
+ 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+ +

<fill-rule> representa la regla de llenado usada para determinar el área interior del polígono. Los valores posibles son nonzero y evenodd. El valor predeterminado es nonzero.

+ +

Cada elemento par de la lista representa xi y yi - las coordenadas del eje x y el eje y en el vértice i del polígono.

+
+
circle()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

El argumento <shape-radius> representa a r, el radio del círculo. Los valores negativos son inválidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como sqrt(width^2+height^2)/sqrt(2).

+ +

El argumento {{cssxref("<position>")}} define el centro del círculo. Su valor predeterminado es center.

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

El argumento <shape-radius> representa a rx y ry, los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son inválidos. Los valores en porcentaje son resueltos contra la anchura (para rx) y altura (para ry) presentes en la caja de referencia.

+ +

El argumento {{cssxref("<position>")}} define el centro de la elipse. Su valor predeterminado es center.

+
+
+ +

Los argumentos no definidos arriba son definidos de esta forma:

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

Define un radio para un círculo o elipse. Su valor predeterminado es closest-side.

+ +

closest-side usa la longitud desde el centro de la figura hasta el borde más cercano de la caja de referencia. Para círculos, es el lado más cercano en cualquier dimensión. Para elipses, es el lado más cercano en la dimensión del radio.

+ +

farthest-side use la longitud desde el centro de la figura hasta el lado más alejado de la caja de referencia. Para círculos, es el lado más alejado en cualquier dimensión. Para elipses, es el lado más alejado en la dimensión del radio.

+ +

Valores Calculados de Figuras Básicas

+ +

Los valores en una función <basic-shape> son calculados segun se especifica, con estas excepciones:

+ +
    +
  • Valores omitidos son incluidos y calculados acorde a su valor predeterminado.
    • +
  • Un valor {{cssxref("<position>")}} en circle() o  ellipse() es calculado como un par de separaciones (horizontal y después vertical) desde el origen superior izquierdo, cada uno dado como combinación de una longitud absoluta y un porcentaje.
    • +
  • Un valor <border-radius> en inset() es calculado como una lista expandida de ocho valores {{cssxref("length")}} o de porcentaje.
    • +
+ +

Interpolación de Figuras Básicas

+ +
Para interpolar dos figuras, se aplican las reglas a continuación. Los valores en la función de figura se interpolan como una lista simple. La lista de valores se interpola como {{cssxref("length", "length")}}, {{cssxref("percentage", "percentage")}}, o {{cssxref("calc", "calc")}} donde sea posible. Si los valores listados no son de los de esos tipos pero son idénticos (por ejemplo, tener nonzero en la misma posición en ambas listas), sí se interpolan esos valores.
+ +
 
+ +
    +
  • Ambas figuras deben usar la misma figura de referencia.
    • +
  • Si ambas figuras son del mismo tipo, ellipse() o circle(), y ninguno de los radios usa las palabras clave closest-side o farthest-side keywords, se interpola entre cada valor de las funciones de figura.
    • +
  • Si ambas figuras son de tipo inset(), se interpola entre cada valor de las funciones de figura.
    • +
  • Si ambas figuras son de tipo polygon(), ambos polígonos tienen el mismo número de vértices y usan la misma regla <fill-rule>, se interpola entre cada valor de la función de figura.
    • +
  • En cualquier otro casa no se especifica la interpolación.
    • +
+ +

Ejemplos

+ +
TODO
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificicaciónEstatusComentarios
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{compatVersionUnknown()}}{{CompatGeckoDesktop(47)}}{{CompatNo}}{{CompatNo}}{{compatVersionUnknown()}}
inset(){{compatUnknown()}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatUnknown()}}
Animaciones{{compatUnknown()}}{{CompatGeckoDesktop(49)}}{{CompatNo}}{{CompatNo}}{{compatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{compatVersionUnknown()}}{{compatVersionUnknown()}}{{CompatGeckoMobile(47)}} (behind a pref){{CompatNo}}{{CompatNo}}{{compatVersionUnknown()}}
inset(){{compatUnknown()}}{{compatVersionUnknown()}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{compatUnknown()}}
Animaciones{{compatUnknown()}}{{compatUnknown()}}{{CompatGeckoMobile(49)}}{{CompatNo}}{{CompatNo}}{{compatUnknown()}}
+
+ +

Véase también

+ +
    +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("shape-outside")}}
    • +
diff --git a/files/es/web/css/blend-mode/index.html b/files/es/web/css/blend-mode/index.html new file mode 100644 index 0000000000..e2a0e41f18 --- /dev/null +++ b/files/es/web/css/blend-mode/index.html @@ -0,0 +1,417 @@ +--- +title: +slug: Web/CSS/blend-mode +tags: + - Composición + - Composición CSS + - Modos de mezcla + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/blend-mode +--- +

{{CSSRef}}

+ +

Resumen

+ +

El tipo <blend-mode> es una coleccion de palabras clave que describen modos de mezcla.

+ +

Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.

+ +

Sintaxis

+ +
Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
+ +

Valores posibles

+ +
+
normal
+
+

El color final es el de la capa superior, sin importar el color de fondo.
+ El efecto es similar a dos trozos de papel sobrepuestos.

+ +
+ + + +
+ +

{{ EmbedLiveSample('normal', "300", "300") }}

+
+
multiply
+
+

El color final es el resultado de multiplicar el color superior y el inferior.
+ Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.
+ El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.

+ +
+ + + +
+ +

{{ EmbedLiveSample('multiply', "300", "300") }}

+
+
screen
+
+

El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.
+ Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.
+ El efecto es similar a dos imágenes mostrándose desde un proyector.

+ +
+ + + +
+ +

{{ EmbedLiveSample('screen', "300", "300") }}

+
+
overlay
+
El color final es el resultado de multiply si el color inferior es más oscuro, o screen si el color inferior es más claro.
+ Este modo de mezcla es equivalente a hard-light, pero si las capas son intercambiadas. +
+ + + +
+ +

{{ EmbedLiveSample('overlay', "300", "300") }}

+
+
darken
+
+

El resultado final es un color compuesto de los valores más oscuros por cada canal de color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('darken', "300", "300") }}

+
+
lighten
+
+

El resultado final es un color compuesto de los valores más claros por cada canal de color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('lighten', "300", "300") }}

+
+
color-dodge
+
+

El color final es el resultado de dividir el color inferior por el inverso del color superior.
+ Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.
+ Este modo de mezcla es similar a screen, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color-dodge', "300", "300") }}

+
+
color-burn
+
+

El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.
+ Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.
+ Este modo de mezcla es similar a multiply, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color-burn', "300", "300") }}

+
+
hard-light
+
+

El color final es el resultado de multiply si el color superior es más oscuro, o screen si el color superior es más oscuro.
+ Este modo de mezcla es equivalente a overlay, pero con las capas intercambiadas.
+ El efecto es similar a encender un foco con mucha intensidad en el fondo.

+ +
+ + + +
+ +

{{ EmbedLiveSample('hard-light', "300", "300") }}

+
+
soft-light
+
+

El color final es similar a hard-light, pero más suave.
+ Este modo de mezcla se comporta similar a hard-light.
+ El efecto es similar a encender un foco difuso en el fondo.

+ +
+ + + +
+ +

{{ EmbedLiveSample('soft-light', "300", "300") }}

+
+
difference
+
+

El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.
+ Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

+ +
+ + + +
+ +

{{ EmbedLiveSample('difference', "300", "300") }}

+
+
exclusion
+
+

El color final es similar a difference, pero con menor contraste.
+ Así como con difference,  una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.

+ +
+ + + +
+ +

{{ EmbedLiveSample('exclusion', "300", "300") }}

+
+
hue
+
+

El color final tiene el matiz del color superior, mientras usa la saturación y luminosidad del color inferior.

+ +
+ + + +
+ +

{{ EmbedLiveSample('hue', "300", "300") }}

+
+
saturation
+
+

El color final tiene la saturación del color superior, mientras usa el matiz y luminosidad del color inferior.
+ Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.

+ +
+ + + +
+ +

{{ EmbedLiveSample('saturation', "300", "300") }}

+
+
color
+
+

El color final tiene el matiz y saturación del color superior, mientras usa la luminosidad del color inferior.
+ El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color', "300", "300") }}

+
+
luminosity
+
+

El color final tiene la luminosidad del color superior, mientras usa el matiz y saturación del color inferior.
+ Este modo de mezcla es equivalente a color, pero con las capas intercambiadas.

+ +
+ + + +
+ +

{{ EmbedLiveSample('luminosity', "300", "300") }}

+
+
+ +

Interpolación de modos de mezcla

+ +
 
+ +

Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico35{{compatVersionUnknown()}}{{compatUnknown()}}{{compatUnknown()}}{{compatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{compatUnknown()}}{{compatUnknown()}}{{compatVersionUnknown()}}{{compatUnknown()}}{{compatUnknown()}}{{compatUnknown()}}
+
+ +

Véase también

+ +
    +
  • Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}}
    • +
  • Blend modes
    • +
  • Índice de Referencia CSS
    • +
diff --git a/files/es/web/css/block-size/index.html b/files/es/web/css/block-size/index.html new file mode 100644 index 0000000000..7b3bd80cc6 --- /dev/null +++ b/files/es/web/css/block-size/index.html @@ -0,0 +1,151 @@ +--- +title: block-size +slug: Web/CSS/block-size +tags: + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/block-size +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS block-size CSS define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad {{cssxref("width")}} o la propiedad {{cssxref("height")}}, dependiendo de los valores de {{cssxref("writing-mode")}}.

+ +

{{EmbedInteractiveExample("pages/css/block-size.html")}} 

+ +

Resumen

+ +

La propiedad de CSS block-size define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor definido en {{cssxref("writing-mode")}}.

+ +

Si el modo de escritura está orientado verticalmente, el valor de block-size se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con {{cssxref("inline-size")}}, la cual define las otras dimensiones del elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* <length> values */
+block-size: 300px;
+block-size: 25em;
+
+/* <percentage> values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+
+ +

Valores

+ +

La propiedad block-size toma los mismos valores que las propiedades {{cssxref("width")}} y {{cssxref("height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p class="texto">Texto de ejemplo</p>
+
+ +

Contenido CSS

+ +
.texto {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 200px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básicoCompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada de forma predeterminada. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde dicha versión.

+ +

Véase también

+ +
    +
  • Las propiedades físicas asignadas: {{cssxref("width")}} y {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/border-block-color/index.html b/files/es/web/css/border-block-color/index.html new file mode 100644 index 0000000000..904664a1ae --- /dev/null +++ b/files/es/web/css/border-block-color/index.html @@ -0,0 +1,86 @@ +--- +title: border-block-color +slug: Web/CSS/border-block-color +translation_of: Web/CSS/border-block-color +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS border-block-color define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-right-color")}} y {{cssxref("border-left-color")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-block-color: yellow;
+border-block-color: #F5F6F7;
+
+ +

El color de borde en la otra dimensión puede ser establecida con {{cssxref("border-inline-color")}} que establece {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'color'>
+
El color del borde. Mirar {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ error 1297097
    • +
diff --git a/files/es/web/css/border-block-end-color/index.html b/files/es/web/css/border-block-end-color/index.html new file mode 100644 index 0000000000..e6b360ad1f --- /dev/null +++ b/files/es/web/css/border-block-end-color/index.html @@ -0,0 +1,138 @@ +--- +title: border-block-end-color +slug: Web/CSS/border-block-end-color +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end-color +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad CSS border-block-end-color define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-block-end-color: yellow;
+border-block-end-color: #F5F6F7;
+
+ +

Está relacionada con {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen las otras propiedades de color de borde del elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-color'>
+
Véase {{ cssxref("border-color") }}
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-end-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión .

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
    • +
diff --git a/files/es/web/css/border-block-end-style/index.html b/files/es/web/css/border-block-end-style/index.html new file mode 100644 index 0000000000..cf626f9017 --- /dev/null +++ b/files/es/web/css/border-block-end-style/index.html @@ -0,0 +1,139 @@ +--- +title: border-block-end-style +slug: Web/CSS/border-block-end-style +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end-style +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad CSS border-block-end-style define el estilo del borde del final lógico del bloque de un elemento, que se mapea a un estilo de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;
+
+ +

Está relacionada a {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen las otras propiedades de estilos de borde del elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-style'>
+
See {{ cssxref("border-style") }}
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-end-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.

+ +

Véase también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, y {{cssxref("border-left-style")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-end-width/index.html b/files/es/web/css/border-block-end-width/index.html new file mode 100644 index 0000000000..df9125f627 --- /dev/null +++ b/files/es/web/css/border-block-end-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-block-end-width +slug: Web/CSS/border-block-end-width +translation_of: Web/CSS/border-block-end-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propieda de CSS border-block-end-width define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} property dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}
+ + + +

Sintaxis

+ +
/* <'border-width'> values */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+
+ +

Las propiedades relacionadas son {{cssxref ("border-block-start-width")}}, {{cssxref ("border-inline-width")}}, y {{cssxref ("border-inline-end-width ")}}, que define los otros anchos de borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-width'>
+
El tamaño del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-end-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad en Navegadores

+ + + +

{{Compat("css.properties.border-block-end-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-end/index.html b/files/es/web/css/border-block-end/index.html new file mode 100644 index 0000000000..a2c5d20e60 --- /dev/null +++ b/files/es/web/css/border-block-end/index.html @@ -0,0 +1,144 @@ +--- +title: border-block-end +slug: Web/CSS/border-block-end +tags: + - CSS + - Experimental + - Propiedad CSS + - Propiedad Lógica CSS + - Referencia +translation_of: Web/CSS/border-block-end +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad CSS border-block-end es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. border-block-end puede ser usada para establecer los valores de una o más de las siguientes propiedades: {{Cssxref("border-block-end-width")}}, {{Cssxref("border-block-end-style")}}, {{Cssxref("border-block-end-color")}}. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}, dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed blue;
+
+ +

Está relacionada con {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, las cuales definen el borde contrario del elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

Una o más de los siguientes, en cualquier orden:

+ +
+
<'border-width'>
+
Véase {{ cssxref("border-width") }}
+
<'border-style'>
+
Véase {{ cssxref("border-style") }}
+
<'color'>
+
Véase {{ cssxref("color") }}
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-end: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("41.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile("41.0") }}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Disponible desde Gecko 38, pero bajo la preferencia layout.css.vertical-text.enabled, deshabilitada por defecto. La preferencia fue removida en Gecko 51 y esta propiedad no puede ser deshabilitada desde esta misma versión.

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y {{cssxref("border-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-start-color/index.html b/files/es/web/css/border-block-start-color/index.html new file mode 100644 index 0000000000..393780221b --- /dev/null +++ b/files/es/web/css/border-block-start-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-block-start-color +slug: Web/CSS/border-block-start-color +translation_of: Web/CSS/border-block-start-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-block-start-color define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}
+ + + +

Sintaxis

+ +
border-block-start-color: blue;
+border-block-start-color: #4c5d21;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen los otros colores del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'color'>
+
Mira {{ cssxref("border-color") }}
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-block-start-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-start-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-start-style/index.html b/files/es/web/css/border-block-start-style/index.html new file mode 100644 index 0000000000..0fe32ca16a --- /dev/null +++ b/files/es/web/css/border-block-start-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-block-start-style +slug: Web/CSS/border-block-start-style +translation_of: Web/CSS/border-block-start-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS border-block-start-style define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}} dependiendo de los valores definidos por{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}
+ + + +

Sintaxis

+ +
/* <'border-style'> values */
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-style'>
+
El estilo de la línea del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-start-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-start-style")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-start-width/index.html b/files/es/web/css/border-block-start-width/index.html new file mode 100644 index 0000000000..cdbdcc153a --- /dev/null +++ b/files/es/web/css/border-block-start-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-block-start-width +slug: Web/CSS/border-block-start-width +translation_of: Web/CSS/border-block-start-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS border-block-start-width define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}
+ + + +

Sintaxis

+ +
/* <'border-width'> values */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+
+ +

Propiedades relacionadas son{{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-start-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-start-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-start/index.html b/files/es/web/css/border-block-start/index.html new file mode 100644 index 0000000000..89204dc8b1 --- /dev/null +++ b/files/es/web/css/border-block-start/index.html @@ -0,0 +1,98 @@ +--- +title: border-block-start +slug: Web/CSS/border-block-start +translation_of: Web/CSS/border-block-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-block-start es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos.  

+ +
{{EmbedInteractiveExample("pages/css/border-block-start.html")}}
+ + + +

Sintaxis

+ +
border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed blue;
+
+ +

border-block-start puede ser usado para establecer los valores de uno o más de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-start-color")}}. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Propiedades relacionadas son {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

El border-block-start es especificado con uno o más de los siguientes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{cssxref("border-width")}}.
+
<'border-style'>
+
El estilo de la línea del borde. Mira {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block-start: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}{{Spec2("CSS Logical Properties")}}Definición Inicial
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-start")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-style/index.html b/files/es/web/css/border-block-style/index.html new file mode 100644 index 0000000000..f3a8cbadbf --- /dev/null +++ b/files/es/web/css/border-block-style/index.html @@ -0,0 +1,90 @@ +--- +title: border-block-style +slug: Web/CSS/border-block-style +translation_of: Web/CSS/border-block-style +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS border-block-style CSS property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <'border-style'> values */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+
+ +

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-inline-style")}}, que establece {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-style'>
+
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-block-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-style")}}

+ +

 

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block-width/index.html b/files/es/web/css/border-block-width/index.html new file mode 100644 index 0000000000..10c641ba39 --- /dev/null +++ b/files/es/web/css/border-block-width/index.html @@ -0,0 +1,87 @@ +--- +title: border-block-width +slug: Web/CSS/border-block-width +translation_of: Web/CSS/border-block-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-block-width CSS property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <'border-width'> values */
+border-block-width: 5px;
+border-block-width: thick;
+
+ +

El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-inline-width")}}, que establece {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-block-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-block/index.html b/files/es/web/css/border-block/index.html new file mode 100644 index 0000000000..f3159a7174 --- /dev/null +++ b/files/es/web/css/border-block/index.html @@ -0,0 +1,96 @@ +--- +title: border-block +slug: Web/CSS/border-block +translation_of: Web/CSS/border-block +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-block es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. 

+ +
border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+
+ +

border-block puede ser usada para establecer los valores de uno o más {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, y {{cssxref("border-block-color")}} estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("border-top")}} y {{cssxref ("border-bottom")}} o {{cssxref ("border-right")}}, y {{cssxref ("border -left ")}} dependiendo de los valores definidos para {{cssxref (" modo de escritura ")}}, {{cssxref (" dirección ")}}, y {{cssxref (" orientación de texto ")}} .

+ +

Los bordes en la otra dimensión se pueden establecer con {{cssxref ("border-inline")}}, que establece {{cssxref ("border-inline-start")}}, y {{cssxref ("border-inline- fin")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

El border-block es especificado con uno o más de los siguientes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mirar {{cssxref("border-width")}}.
+
<'border-style'>
+
El estilo de la línea del borde. Mirar {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mirar {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-block: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}{{Spec2("CSS Logical Properties")}}Definition inicial
+ +

Compatibilidad en navegadores 

+ + + +

{{Compat("css.properties.border-block")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-bottom-color/index.html b/files/es/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..b171eb2aca --- /dev/null +++ b/files/es/web/css/border-bottom-color/index.html @@ -0,0 +1,117 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-color +--- +

<< Volver

+ +

Resumen

+ +

La propiedad border-bottom-color define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave transparente.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: propiedad {{ Cssxref("color") }}
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: non
    • +
  • Porcentajes: N/A
    • +
  • Medio : {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}.
    • +
+ +

Sintaxis

+ +
border-bottom-color: couleur | transparent | inherit
+
+ +

Valores

+ +
+
color 
+
puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (azul).
+
+ +
+
transparent 
+
el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado.
+
+ +

Propiedades relacionadas

+ +
    +
  • {{ Cssxref("border-color") }}
    • +
  • {{ Cssxref("border-left-color") }}
    • +
  • {{ Cssxref("border-right-color") }}
    • +
  • {{ Cssxref("border-top-color") }}
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+	width: 300px;
+        padding: 15px;
+        border-bottom-size: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: #000;
+}
+
+ +

Notas

+ + + +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape6
Opera3.5
+ +

 

+ +

Ver también

+ +

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "de": "de/CSS/border-bottom-color", "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "ja": "ja/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }}

diff --git a/files/es/web/css/border-bottom-left-radius/index.html b/files/es/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..7290aa56c1 --- /dev/null +++ b/files/es/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,264 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-bottom-left-radius +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-bottom-left-radius establece el redondeo de la esquina inferior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0, no se redondeará la esquina, dejándola cuadrada.

+ +
border-bottom-left-radius.png
+ +

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

+ +
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-bottom-left-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* la esquina es un círculo */
+/* border-bottom-left-radius: radius */
+border-bottom-left-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-bottom-left-radius: horizontal vertical */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+
+ +
+

donde:

+ +
+
radius
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+
horizontal
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+
vertical
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+
+ +

Valores

+ +
+
<length>
+
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+
<percentage>
+
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ejemplo en vivoCódigo
+
+
.
+
+ 		Un arco de círculo usado como borde + 
+div {
+  border-bottom-left-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		Un arco de elipse usado como borde + 
+div {
+  border-bottom-left-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		La caja es un cuadro: un arco de círculo es usado como borde + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		La caja no es un círculo: un arco de elipse es usado como borde + 
+div {
+  border-bottom-left-radius: 40%;
+}
+
+
+
+
.
+
+ 		El color de fondo está delimitado al borde + 
+div {
+  border-bottom-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Porcentajes4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Esquinas elípticas1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Porcentajes{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Esquinas elípticas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, -moz-border-radius-bottomleft, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.

+ +

[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que -moz-border-radius-bottomleft siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.

+ +

[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si border-style tuviera valor solid. Esto fue solucionado en Gecko 50.0.

+ +

Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}}, el valor predeterminado de la preferencia es true.

+ +

Véase también

+ +

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-top-left-radius")}}.

diff --git a/files/es/web/css/border-bottom-right-radius/index.html b/files/es/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..1e95cfd6d7 --- /dev/null +++ b/files/es/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,264 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-bottom-right-radius +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-bottom-right-radius establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0, no se redondeará la esquina, dejándola cuadrada.

+ +
border-bottom-right-radius.png
+ +

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

+ +
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-bottom-right-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* la esquina es un círculo */
+/* border-bottom-right-radius: radius */
+border-bottom-right-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-bottom-right-radius: horizontal vertical */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+
+ +
+

donde:

+ +
+
radius
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+
horizontal
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+
vertical
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+
+ +

Valores

+ +
+
<length>
+
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+
<percentage>
+
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ejemplo en vivoCódigo
+
+
.
+
+ 		Un arco de círculo usado como borde + 
+div {
+  border-bottom-right-radius: 40px 40px;
+}
+
+
+
+
.
+
+ 		Un arco de elipse usado como borde + 
+div {
+  border-bottom-right-radius: 40px 20px;
+}
+
+
+
+
.
+
+ 		La caja es un cuadro: un arco de círculo es usado como borde + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		La caja no es un círculo: un arco de elipse es usado como borde + 
+div {
+  border-bottom-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		El color de fondo está delimitado al borde + 
+div {
+  border-bottom-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Porcentajes4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Esquinas elípticas1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Porcentajes{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Esquinas elípticas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, -moz-border-radius-bottomright, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.

+ +

[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que -moz-border-radius-bottomright siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.

+ +

[3] Previo a  Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si border-style tuviera valor solid. Esto fue solucionado en Gecko 50.0.

+ +

Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es true.

+ +

Véase también

+ +

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-bottom-style/index.html b/files/es/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..28f0697b0c --- /dev/null +++ b/files/es/web/css/border-bottom-style/index.html @@ -0,0 +1,102 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-style +--- +

 

+ +

<< Volver

+ +

 

+ +

Resumen

+ +

border-bottom-style define el estilo de línea del borde inferior de una caja.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: como se especificó
    • +
+ +

Sintaxis

+ +
border-bottom-style: <border-style> | inherit
+
+ +

Valores

+ +
+
none 
+
sin borde.
+
hidden 
+
es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla.
+
dotted 
+
series de puntos (....).
+
dashed 
+
series de guiones cortos o pequeñas líneas (----).
+
solid 
+
línea única, recta y sólida.
+
double 
+
dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de bordeborder-width.
+
groove 
+
efecto de hundido.
+
ridge 
+
al revés de 'groove'. El borde aparece en 3D (saliendo).
+
inset 
+
hace que la caja aparezca hundida.
+
outset 
+
opuesto a 'inset'. La caja aparece en 3D (saliendo).
+
+ +

Propiedades relacionadas

+ +
    +
  • {{ Cssxref("border-left-style") }}
    • +
  • {{ Cssxref("border-right-style") }}
    • +
  • {{ Cssxref("border-top-style") }}
    • +
  • {{ Cssxref("border-style") }}
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+        border-bottom-size: 1px;
+        border-bottom-style: dotted;
+        border-bottom-color: #000;
+}
+
+ +

Notas

+ +

A menos que un valor {{ Cssxref("border-style") }} sea definido, el borde no aparecerá porque el valor por defecto es 'none'.

+ +

Especificaciones

+ + + +

Compatibilidades

+ +

Ver también

+ +

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

+ +

 

+ +
+

Categorías

+Interwiki Languages
+ +

{{ languages( { "de": "de/CSS/border-bottom-style", "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}

diff --git a/files/es/web/css/border-bottom-width/index.html b/files/es/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..5550344a75 --- /dev/null +++ b/files/es/web/css/border-bottom-width/index.html @@ -0,0 +1,113 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom-width +--- +

 

+ +

<< Volver

+ +

Resumen

+ +

border-bottom-width define el ancho del borde inferior de una caja.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
    • +
  • Se aplica a : todos los elementos
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es none o hidden.
    • +
+ +

Sintaxis

+ +
border-bottom-width: <border-width> | inherit
+
+ +

Valores

+ +
+
thin
+
un borde fino.
+
medium
+
un borde mediano.
+
thick
+
un borde grueso.
+
<length>
+
El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos.
+ Nota : El valor em también es soportada.
+
+ +

Propiedades relacionadas

+ +
    +
  • {{ Cssxref("border-left-style") }}
    • +
  • {{ Cssxref("border-right-style") }}
    • +
  • {{ Cssxref("border-top-style") }}
    • +
  • {{ Cssxref("border-style") }}
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+    border-bottom-width: thin;
+    border-bottom-style: solid;
+    border-bottom-color: #000;
+}
+
+ +

Especificacions

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer 
Firefox 
Netscape 
Opera 
+ +

Ver también

+ +

{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}

+ +

 

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "de": "de/CSS/border-bottom-width", "en": "en/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width" } ) }}

diff --git a/files/es/web/css/border-bottom/index.html b/files/es/web/css/border-bottom/index.html new file mode 100644 index 0000000000..3b1774513b --- /dev/null +++ b/files/es/web/css/border-bottom/index.html @@ -0,0 +1,117 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-bottom +--- +

<< Volver

+ +

Resumen

+ +

La propiedad border-bottom permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
    • +
  • Se aplica a : todos los elementos
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales
    • +
+ +

Sintaxis

+ +
border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
+
+ +

Valores

+ +
+
<border-width> 
+
ver {{ Cssxref("border-bottom-width") }}.
+
<border-style> 
+
ver {{ Cssxref("border-bottom-style") }}.
+
<border-color> 
+
ver {{ Cssxref("border-bottom-color") }}.
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+    border-bottom-width: 1px solid #000;
+}
+
+ +

Notas

+ +

Si no se especifica el color del borde, este tomará el valor definido en la propiedad del {{ Cssxref("color") }} general.

+ +

Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.

+ +

Como con todas las propiedades generales, border-bottom siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.

+ +

Lo que significa que:

+ +
  border-bottom-style: dotted;
+  border-bottom: thick green;
+ +

es idéntico a:

+ +
  border-bottom-style: dotted;
+  border-bottom: none thick green;
+ +

y el valor de {{ Cssxref("border-bottom-style") }} dado antes de border-bottom es ignorado.

+ +

Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es none, el no especificar la parte <border-style> en la propiedad general significa: sin borde.

+ +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "ja": "ja/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}

diff --git a/files/es/web/css/border-collapse/index.html b/files/es/web/css/border-collapse/index.html new file mode 100644 index 0000000000..a657568e91 --- /dev/null +++ b/files/es/web/css/border-collapse/index.html @@ -0,0 +1,98 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-collapse +--- +

<< Volver

+ +

Resumen

+ +

La propiedad border-collapse se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated). Esta propiedad especifica que modo de presentación de borde hay que usar.

+ +

En el modelo de fusión, las celdas adyacentes comparten los mismos bordes

+ +

En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del {{ Cssxref("border-spacing", "espaciado de borde") }}).

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }}
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: Yes
    • +
  • Media: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}:
    • +
+ +

Sintaxis

+ +
border-collapse: value
+
+ +

Valores

+ +
    +
  • inherit : Define explícitamente el valor como heredada del elemento padre.
    • +
  • separate : Utiliza el modo de presentación de separación de borde.
    • +
  • collapse : Utiliza el modo de presentación de fusión de borde
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
+
+ +
<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">
+
+ +

Notas

+ +

En el modelo de fusión, el valor del {{ Cssxref("border-style", "estilo de borde") }} de inset se comporta como groove, y outset como ridge.

+ +

CSS 2 especifica que el valor inicial para esta propiedad es collapse, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera separate.

+ +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer5.5
Netscape7
Opera5
+ +

 

+ +

Ver también

+ +

{{ Cssxref("border-spacing") }}

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}

diff --git a/files/es/web/css/border-color/index.html b/files/es/web/css/border-color/index.html new file mode 100644 index 0000000000..ae50c74d4d --- /dev/null +++ b/files/es/web/css/border-color/index.html @@ -0,0 +1,112 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-color +--- +

{{ PreviousNext("CSS:border", "CSS:border-style") }}

+ +

Resumen

+ +

la propiedad border-color es un atajo para definir el color de los cuatro bordes de un elemento.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: el {{ Cssxref("color") }} del elemento en sí
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Herencia") }}: no
    • +
  • Percentages: N/A
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculada") }}: el valor del color por defecto, o lo que se especificó.
    • +
+ +

Sintaxis

+ +
border-color: [ <color> || transparent ]{1,4} | inherit
+
+ +

Valores

+ +
+
<color> 
+
el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.
+
+ +
+
transparent 
+
el borde no aparece pero ocupa el sitio definido.
+
+ +

Se pueden pasar hasta cuatro valores;

+ +

Con un color, los cuatro lados tendrán el mismo.
+ Con dos colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo.
+ Con tres colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.
+ Con cuatro colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.

+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+}
+
+ +

Notas

+ +

Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", "el ancho") }} con un valor positivo y {{ Cssxref("border-style", "el estilo") }} con algo visible. (diferente de none o hidden)

+ +

Especificaciones

+ + + +

Compatibilidad

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadoresVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Extensiones Mozilla

+ +

La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.

+ +
    +
  • {{ Cssxref("-moz-border-bottom-colors") }}
    • +
  • {{ Cssxref("-moz-border-left-colors") }}
    • +
  • {{ Cssxref("-moz-border-right-colors") }}
    • +
  • {{ Cssxref("-moz-border-top-colors") }}
    • +
+ +

Ver también

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

diff --git a/files/es/web/css/border-end-end-radius/index.html b/files/es/web/css/border-end-end-radius/index.html new file mode 100644 index 0000000000..478bacb8f6 --- /dev/null +++ b/files/es/web/css/border-end-end-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-end-end-radius +slug: Web/CSS/border-end-end-radius +translation_of: Web/CSS/border-end-end-radius +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS  border-end-end-radius define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+/* With one value the corner will be a circle */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-end-end-radius: 1em 2em;
+
+/* Global values */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+
+ +

Por ejemplo, en un modo de escritura  horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-right-radius")}}.

+ +

Sintaxis

+ +

Valores

+ +
+
<length-percentage>
+
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-end-radius: 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-end-end-radius")}}

+ +

Mira también

+ +
    +
  • La propiedad física asignada: {{CSSxRef("border-bottom-right-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-end-start-radius/index.html b/files/es/web/css/border-end-start-radius/index.html new file mode 100644 index 0000000000..b58ce4add6 --- /dev/null +++ b/files/es/web/css/border-end-start-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-end-start-radius +slug: Web/CSS/border-end-start-radius +translation_of: Web/CSS/border-end-start-radius +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-end-start-radius define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+/* With one value the corner will be a circle */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-end-start-radius: 1em 2em;
+
+/* Global values */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+
+ +

Por ejemplo, en un modo de escritura  horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-right-radius")}}.

+ +

Sintaxis

+ +

Valores

+ +
+
<length-percentage>
+
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-end-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-end-start-radius: 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-end-start-radius")}}

+ +

Mira también

+ +
    +
  • La propiedad física asignada: {{CSSxRef("border-top-right-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-image-outset/index.html b/files/es/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..565a215775 --- /dev/null +++ b/files/es/web/css/border-image-outset/index.html @@ -0,0 +1,138 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad border-image-outset describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.

+ +

Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen.

+ +
{{cssinfo}}
+ +

Sintaxis

+ +
/* border-image-outset: sides */
+border-image-outset: 1.5;
+
+/* border-image-outset: vertical horizontal */
+border-image-outset: 1 1.2;
+
+/* border-image-outset: top horizontal bottom */
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset: top right bottom left */
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-outset: inherit;
+
+ +

Valores

+ +
+

Cuando un valor se especifica como valor {{cssxref("<number>")}} sin unidad, el valor es multiplicado por el {{cssxref("border-width")}} calculado correspondiente, para determinar el valor de border-image-outset. Los valores negativos no son permitidos.

+
+ +
+
sides
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones.
+
horizontal
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha).
+
vertical
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior).
+
top
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja.
+
bottom
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja.
+
right
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja.
+
left
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja.
+
inherit
+
Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico15.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}11156
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/border-image-repeat/index.html b/files/es/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..14410bd1ff --- /dev/null +++ b/files/es/web/css/border-image-repeat/index.html @@ -0,0 +1,123 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - Bordes CSS + - CSS + - Propiedades CSS + - Referencia +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-image-repeat define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.

+ +
{{cssinfo}}
+ +

Sintaxis

+ +
/* border-image-repeat: type */
+border-image-repeat: stretch;
+
+/* border-image-repeat: horizontal vertical */
+border-image-repeat: round stretch;
+
+/* Global values */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

Valores

+ +
+
type
+
Puede ser stretch, repeat, o round, que denotan cómo será tratada la imagen vertical y horizontalmente.
+
horizontal
+
Puede ser stretch, repeat, o round, denotando cómo será tratada la imagen horizontalmente.
+
vertical
+
Puede ser stretch, repeat, o round, denotando cómo será tratada la imagen verticalmente.
+
stretch
+
Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes.
+
repeat
+
Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes.
+
round
+
Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse.
+
space
+
La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido CSS

+ +
#borderImageRepetition {
+  width: 260px;
+  height: 80px;
+  margin-bottom: 10px;
+  border: 30px solid;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+  border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */
+}
+
+ + + +

{{EmbedLiveSample("Example", "330px", "180px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{Compat("css.properties.border-image-repeat")}}
+ +

Véase también

+ + diff --git a/files/es/web/css/border-image-slice/index.html b/files/es/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..4a3c074a22 --- /dev/null +++ b/files/es/web/css/border-image-slice/index.html @@ -0,0 +1,159 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-image-slice divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.

+ +

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesCuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.

+ +

La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave fill. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).

+ +

Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes.

+ +

La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* border-image-slice: slice */
+border-image-slice: 30%;
+
+/* border-image-slice: horizontal vertical */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: top horizontal bottom */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: top right bottom left */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* The fill value can be placed between any value */
+border-image-slice: 10% fill 7 12;
+
+/* Global values */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

Valores

+ +
+
slice
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a 100%.
+
horizontal
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
vertical
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
top
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte superior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
bottom
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte inferior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
right
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte derecha. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
left
+
Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte izquierda. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%.
+
fill
+
Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.
+
inherit
+
Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico15.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}[1]11156
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico4.1{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Hasta Gecko 47.0 {{geckoRelease("47.0")}} las imágenes SVGs sin viewport no eran divididas correctamente ({{bug("619500")}}). A partir de Gecko 48.0 {{geckoRelease("48.0")}} son mostradas igual que los SVGs con viewport, aunque si las partes no son exactamente el 50%, son ajustadas incorrectamente ({{bug("1264809")}}). Esto fue arreglado en Gecko 49.0 {{geckoRelease("49.0")}}, aunque aun hay un problema con los SVGs sin viewport donde e10s es deshabilitado ({{bug("1284798")}}).

+ +

También, SVGs pequeños son ajustados incorrectamente, porque los porcentajes en {{cssxref("border-image-slice")}} son calculados como enteros, en vez de reales ({{bug("1284797")}}).

+ +

Véase también

+ + diff --git a/files/es/web/css/border-image/index.html b/files/es/web/css/border-image/index.html new file mode 100644 index 0000000000..a2f2ca8c26 --- /dev/null +++ b/files/es/web/css/border-image/index.html @@ -0,0 +1,199 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image +--- +
{{CSSRef("CSS Borders")}}
+ +

Resumen

+ +

La propiedad de CSS   border-image permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.

+ +

La propiedad border-image es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad border-image-source o la abreviatura border-image, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Etiquetado formal: {{csssyntax("border-image")}}
+ +

Valores

+ +

A continuación vea las respectivas propiedades para los diferentes valores.

+ +

Ejemplos

+ +

Bitmap repeated (repeat)

+ +

La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+
+ +

Resultado:
+ border image repeat demo

+ +

Bitmap repeated (round)

+ +

La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 round;
+}
+ +

Resultado:
+ border image round demo

+ +

Bitmap stretched

+ +

La opción 'stretch' estira la imágen para rellenar todo el borde del área

+ +
.example {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 stretch;
+}
+ +

Resultado:
+ border image stretch demo

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support +

{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}} [1]

+ +

Without prefix since {{CompatGeckoDesktop("15")}}

+ 		+

7.0{{property_prefix("-webkit")}}

+ +

Without prefix since 16.0

+ 		+

11

+ 		+

10.5 / 11.0{{property_prefix("-o")}} [2]

+ +

Without prefix since 15.0

+ 		+

3.0{{property_prefix("-webkit")}}

+ +

Without prefix since 6.0

+
optional <border-image-slice>{{CompatGeckoDesktop("15")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
fill keyword{{CompatGeckoDesktop("15")}}Yes{{CompatUnknown}}{{CompatNo}}Yes (6)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic support +

3.2{{property_prefix("-webkit")}}

+ +

Without prefix since {{CompatGeckoMobile("15")}}

+ 		{{CompatNo}}11.0{{property_prefix("-o")}}2.1{{property_prefix("-webkit")}}
optional <border-image-slice>{{CompatGeckoMobile("15")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
fill keyword{{CompatGeckoMobile("15")}}{{CompatNo}}{{CompatNo}}Yes(18)
+
+ +
    +
  • [1] An earlier version of the specification was implemented, prefixed, in Gecko versions prior to 15.
    • +
  • [2] For Opera, the prefixed property was added after the non-prefixed.
    • +
diff --git a/files/es/web/css/border-inline-color/index.html b/files/es/web/css/border-inline-color/index.html new file mode 100644 index 0000000000..cf7c658d5f --- /dev/null +++ b/files/es/web/css/border-inline-color/index.html @@ -0,0 +1,86 @@ +--- +title: border-inline-color +slug: Web/CSS/border-inline-color +translation_of: Web/CSS/border-inline-color +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS  border-inline-color define el color del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+
+ +

El color del borde en otra dimensión puede establecerse con {{cssxref("border-block-color")}} que establece {{cssxref("border-block-start-color")}}, y {{cssxref("border-block-end-color")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
    • +
diff --git a/files/es/web/css/border-inline-end-color/index.html b/files/es/web/css/border-inline-end-color/index.html new file mode 100644 index 0000000000..961d2d0e1e --- /dev/null +++ b/files/es/web/css/border-inline-end-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-end-color +slug: Web/CSS/border-inline-end-color +translation_of: Web/CSS/border-inline-end-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-end-color CSS property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
+ + + +

Sintaxis

+ +
border-inline-end-color: rebeccapurple;
+border-inline-end-color: #663399;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-start-color")}}, que definen los otros colores del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-end-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-end-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-end-style/index.html b/files/es/web/css/border-inline-end-style/index.html new file mode 100644 index 0000000000..1f3a6dbfe7 --- /dev/null +++ b/files/es/web/css/border-inline-end-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-inline-end-style +slug: Web/CSS/border-inline-end-style +translation_of: Web/CSS/border-inline-end-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-end-style CSS property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
+ + + +

Sintaxis

+ +
/* <'border-style'> values */
+border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-inline-start-style")}}, que definen los otros estilos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-style'>
+
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-end-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-end-style")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-end-width/index.html b/files/es/web/css/border-inline-end-width/index.html new file mode 100644 index 0000000000..3924e681f6 --- /dev/null +++ b/files/es/web/css/border-inline-end-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-inline-end-width +slug: Web/CSS/border-inline-end-width +translation_of: Web/CSS/border-inline-end-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-end-width CSS property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
+ + + +

Sintaxis

+ +
/* <'border-width'> values */
+border-inline-end-width: 2px;
+border-inline-end-width: thick;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, que definen los otros anchos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-end-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-end-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-end/index.html b/files/es/web/css/border-inline-end/index.html new file mode 100644 index 0000000000..7303c2fafc --- /dev/null +++ b/files/es/web/css/border-inline-end/index.html @@ -0,0 +1,98 @@ +--- +title: border-inline-end +slug: Web/CSS/border-inline-end +translation_of: Web/CSS/border-inline-end +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS  border-inline-end es una propiedad abreviada para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos. 

+ +
{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
+ + + +

Sintaxis

+ +
border-inline-end: 1px;
+border-inline-end: 2px dashed;
+border-inline-end: medium dashed blue;
+
+ +

border-inline-end puede ser usado para establecer los valores de uno o más de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, y {{cssxref("border-inline-end-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-start")}}, que definen los otros bordes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

El border-inline-end es especificado con uno o más de los siguientes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{cssxref("border-width")}}.
+
<'border-style'>
+
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-end: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-end")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-start-color/index.html b/files/es/web/css/border-inline-start-color/index.html new file mode 100644 index 0000000000..b6c7da3e00 --- /dev/null +++ b/files/es/web/css/border-inline-start-color/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-start-color +slug: Web/CSS/border-inline-start-color +translation_of: Web/CSS/border-inline-start-color +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-start-color define el color del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
+ + + +

Sintaxis

+ +
border-inline-start-color: red;
+border-inline-start-color: #ee4141;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-end-color")}}, que define los otros colores del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 10px solid blue;
+  border-inline-start-color: red;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-start-color")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-start-style/index.html b/files/es/web/css/border-inline-start-style/index.html new file mode 100644 index 0000000000..e02c4e585b --- /dev/null +++ b/files/es/web/css/border-inline-start-style/index.html @@ -0,0 +1,92 @@ +--- +title: border-inline-start-style +slug: Web/CSS/border-inline-start-style +translation_of: Web/CSS/border-inline-start-style +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-start-style define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
+ + + +

Sintaxis

+ +
/* <'border-style'> values */
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-style'>
+
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-start-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-start-style")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-start-width/index.html b/files/es/web/css/border-inline-start-width/index.html new file mode 100644 index 0000000000..d507fcb933 --- /dev/null +++ b/files/es/web/css/border-inline-start-width/index.html @@ -0,0 +1,91 @@ +--- +title: border-inline-start-width +slug: Web/CSS/border-inline-start-width +translation_of: Web/CSS/border-inline-start-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-start-width define el ancho del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
+ + + +

Sintaxis

+ +
/* <'border-width'> values */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+
+ +

Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-start-width: 5px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-start-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-start/index.html b/files/es/web/css/border-inline-start/index.html new file mode 100644 index 0000000000..5a40bc8105 --- /dev/null +++ b/files/es/web/css/border-inline-start/index.html @@ -0,0 +1,98 @@ +--- +title: border-inline-start +slug: Web/CSS/border-inline-start +translation_of: Web/CSS/border-inline-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS  border-inline-start es una propiedad abreviada para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.

+ +
{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
+ + + +

Sintaxis

+ +
border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+
+ +

border-inline-start es especificado con uno o más de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, and {{cssxref("border-inline-start-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

El border-inline-start es especificado con uno o más de los sigueintes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{cssxref("border-width")}}.
+
<'border-style'>
+
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline-start: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-start")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-style/index.html b/files/es/web/css/border-inline-style/index.html new file mode 100644 index 0000000000..23eea1cf40 --- /dev/null +++ b/files/es/web/css/border-inline-style/index.html @@ -0,0 +1,90 @@ +--- +title: border-inline-style +slug: Web/CSS/border-inline-style +translation_of: Web/CSS/border-inline-style +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS border-inline-style define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <'border-style'> values */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+
+ +

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block-style")}}, que establece {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-end-style")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-style'>
+
La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 5px solid blue;
+  border-inline-style: dashed;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline-style")}}

+ +

 

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline-width/index.html b/files/es/web/css/border-inline-width/index.html new file mode 100644 index 0000000000..b3c6eeb16f --- /dev/null +++ b/files/es/web/css/border-inline-width/index.html @@ -0,0 +1,88 @@ +--- +title: border-inline-width +slug: Web/CSS/border-inline-width +translation_of: Web/CSS/border-inline-width +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  border-inline-width define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <'border-width'> values */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+
+ +

El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-block-width")}}, que establece {{cssxref("border-block-start-width")}}, y {{cssxref("border-block-end-width")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  border: 1px solid blue;
+  border-inline-width: 5px 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-block-width")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-inline/index.html b/files/es/web/css/border-inline/index.html new file mode 100644 index 0000000000..cdff68b414 --- /dev/null +++ b/files/es/web/css/border-inline/index.html @@ -0,0 +1,94 @@ +--- +title: border-inline +slug: Web/CSS/border-inline +translation_of: Web/CSS/border-inline +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS border-inline es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos. 

+ +
border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+
+ +

border-inline puede ser usada para establecer los valores de uno o más de {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, y {{cssxref("border-inline-color")}} estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades {{cssxref("border-top")}} y {{cssxref("border-bottom")}} o {{cssxref("border-right")}}, and {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block")}}, que establece {{cssxref("border-block-start")}}, y {{cssxref("border-block-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

El border-inline es especificado con uno o más de los siguientes valores, en cualquier orden:

+ +
+
<'border-width'>
+
El ancho del borde. Mira {{cssxref("border-width")}}.
+
<'border-style'>
+
La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+
<'color'>
+
El color del borde. Mira {{cssxref("color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  border-inline: 5px dashed blue;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-inline")}}

+ +

Mira también

+ +
    +
  • Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-left-color/index.html b/files/es/web/css/border-left-color/index.html new file mode 100644 index 0000000000..1d78d5e755 --- /dev/null +++ b/files/es/web/css/border-left-color/index.html @@ -0,0 +1,73 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +translation_of: Web/CSS/border-left-color +--- +

Resumen

+ +

border-left-color pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo transparente .

+ +
    +
  • {{ Xref_cssinitial() }}: {{ Cssxref("color") }} propiedad
    • +
  • Se aplica a : todos los elementos
    • +
  • {{ Xref_cssinherited() }}: no
    • +
  • Porcentajes: N/A
    • +
  • Media: {{ Xref_cssvisual() }}
    • +
  • {{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados.
    • +
+ +

Sintaxis

+ +
border-left-color:color | transparent | inherit
+
+ +

Valores

+ +
+
color 
+
El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados
+
transparent 
+
El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento.
+
+ +

Propiedades parecidas

+ +
    +
  • {{ Cssxref("border-color") }}
    • +
  • {{ Cssxref("border-bottom-color") }}
    • +
  • {{ Cssxref("border-right-color") }}
    • +
  • {{ Cssxref("border-top-color") }}
    • +
+ +

Examples

+ +

Ver El Ejemplo Vivo

+ +
element {
+	width: 300px;
+        padding: 15px;
+        border-bottom-size: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: #000;
+}
+
+
+ +

 

+ +
p {
+border-style: solid;
+border-left-color: #ff0000
+}
+
+p {
+border-style: solid;
+border-left-color: rgb(255,0,0)
+}
+
+ +

Notas

+ + diff --git a/files/es/web/css/border-left/index.html b/files/es/web/css/border-left/index.html new file mode 100644 index 0000000000..8c2b4d55ed --- /dev/null +++ b/files/es/web/css/border-left/index.html @@ -0,0 +1,120 @@ +--- +title: border-left +slug: Web/CSS/border-left +translation_of: Web/CSS/border-left +--- +

{{CSSRef}}

+ +

Resumen

+ +

El borde_izquierdo es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Valores omitidos son puestos a su valor inicial.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
border-left: [border-width || border-style || border-color | inherit] ;
+
+ +

Valores

+ +
+
border-width
+
See {{ Cssxref("border-width") }}.
+
border-style 
+
See {{ Cssxref("border-style") }}.
+
border-color 
+
See {{ Cssxref("border-color") }}.
+
+ +

Ejemplos

+ +

element {

+ +
    border-left: 1px solid #000;
+
+ +

}

+ +

Notas

+ +

Si las reglas no especifican un color de borde, el borde tendrá la propiedad {{ Cssxref("color") }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}{{ Spec2('CSS2.1') }}No significant changes
{{ SpecName('CSS1', '#border-left', 'border-left') }}{{ Spec2('CSS1') }}Initial definition
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.0") }}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/es/web/css/border-radius/index.html b/files/es/web/css/border-radius/index.html new file mode 100644 index 0000000000..39e3ab03d7 --- /dev/null +++ b/files/es/web/css/border-radius/index.html @@ -0,0 +1,320 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-radius +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad CSS border-radius permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.

+ +

Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse

+ +

El radio se aplica a todo el {{ Cssxref("background") }}, aun si el elemento no tiene bordes; la posición exacta del recorte es definida por la propiedad {{ Cssxref("background-clip") }}.

+ +

Esta propiedad es un atajo para establecer las cuatro propiedades {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} y {{ Cssxref("border-bottom-left-radius") }}.

+ +
As with any shorthand property, individual inherited values are not possible, that is border-radius:0 0 inherit inherit, which would override existing definitions partially. In that case, the individual longhand properties have to be used.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Formal grammar: [ <length> | <percentage> ]{1,4}  [ / [ <length> | <percentage> ]{1,4}] ?
+                \------------------------------/      \-------------------------------/
+                           First radii                     Second radii (optional)
+
+ +
The syntax of the first radius allows one to four values:
+border-radius: radius
+border-radius: top-left-and-bottom-right top-right-and-bottom-left
+border-radius: top-left top-right-and-bottom-left bottom-right
+border-radius: top-left top-right bottom-right bottom-left
+
+The syntax of the second radius also allows one to four values
+border-radius: (first radius values) / radius
+border-radius: (first radius values) / top-left-and-bottom-right top-right-and-bottom-left
+border-radius: (first radius values) / top-left top-right-and-bottom-left bottom-right
+border-radius: (first radius values) / top-left top-right bottom-right bottom-left
+
+border-radius: inherit
+
+ +

Valores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
radiusall-corner.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-righttop-left-bottom-right.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.
top-right-and-bottom-lefttop-right-bottom-left.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.
top-lefttop-left.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.
top-righttop-right.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.
bottom-rightbottom-rigth.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.
bottom-leftbottom-left.pngIs a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.
inherit Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+ +

Valores

+ +
+
<length>
+
Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data types. Negative values are invalid.
+
<percentage>
+
Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.
+
+ +

Por ejemplo:

+ +
border-radius: 1em/5em;
+
+/* es equivalente a: */
+
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* es equivalente a: */
+
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

Ejemplos

+ +
  border: solid 10px;
+  /* the border will curve into a 'D' */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +

Notas

+ +
    +
  • Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.
    • +
  • border-radius does not apply to table elements when {{ Cssxref("border-collapse") }} is collapse.
    • +
  • Old versions of WebKit handle multiple values differently, see below.
    • +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

Compatibilidad con los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop("2.0") }}
+ {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}		4.0
+ 0.2{{ property_prefix("-webkit") }}		9.010.55.0
+ 3.0{{ property_prefix("-webkit") }}
Elliptical borders{{ CompatGeckoDesktop("1.9.1") }}yesyesyesyes, but see below
4 values for 4 cornersyes4.0yesyes5.0
Percentagesyes
+ was {{ non-standard_inline() }} (see below)		yesyes11.55.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic support3.2{{ property_prefix("-webkit") }}{{ CompatNo() }}{{ CompatNo() }}2.1{{ property_prefix("-webkit") }}
Elliptical borders{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
4 values for 4 corners{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
Percentages{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +

<percentage> values

+ +
    +
  • are not supported in older Chrome and Safari versions (it was fixed in Sepember 2010)
    • +
  • are buggy in Opera prior to 11.50
    • +
  • are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). Both horizontal and vertical radii were relative to the width of the border box.
    • +
  • are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)
    • +
+ +

Gecko notes

+ +

In Gecko 2.0 -moz-border-radius was renamed to border-radius; -moz-border-radius was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0

+ +
    +
  • changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with border-radius: 50%;
    • +
  • makes rounded corners clip content and images (if {{ cssxref("overflow") }}: visible is not set)
    • +
+ +
Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.
+ +

WebKit notes

+ +

Older Safari and Chrome versions (prior to WebKit 532.5)

+ +
    +
  • support only one value for all 4 corners. For different radii the long form properties must be used
    • +
  • don't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners + 
    /* this is equivalent: */
+
+-webkit-border-radius: 40px 10px;
+        border-radius: 40px/10px;
+
    +
    • +
+ +

Opera notes

+ +

In Opera (prior to Opera 11.60), applying border-radius to replaced elements will not have rounded corners.

+ +

Vea también

+ +
    +
  • Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}
    • +
+ +

{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}

diff --git a/files/es/web/css/border-right/index.html b/files/es/web/css/border-right/index.html new file mode 100644 index 0000000000..ef5e1b4a3e --- /dev/null +++ b/files/es/web/css/border-right/index.html @@ -0,0 +1,109 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-right +--- +
{{CSSRef}}
+ +

La propiedad CSS border-right es un a propiedad rápida para dar valores al {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}} y {{cssxref("border-right-color")}}. Estas propiedades establecen un borde derecho del elemento.

+ +
{{EmbedInteractiveExample("pages/css/border-right.html")}}
+ + + +

Como con todas las propiedades rápidas, border-right siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...

+ +
border-right-style: dotted;
+border-right: thick green;
+
+ +

... es en realidad lo mismo que ...

+ +
border-right-style: dotted;
+border-right: none thick green;
+
+ +

... y el valor de {{cssxref("border-right-style")}} dado previamente a border-right es ignorado. Puesto que el valor por defecto de {{cssxref("border-right-style")}} es none, si no se especifica la parte border-style el resultado es no establecer un borde.

+ +

Sintaxis

+ +
border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+
+ +

Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.

+ +

Valores

+ +
+
<br-width>
+
Ver {{cssxref("border-right-width")}}.
+
<br-style>
+
Ver {{cssxref("border-right-style")}}.
+
{{cssxref("<color>")}}
+
Ver {{cssxref("border-right-color")}}.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
<div>
+  Esta caja tiene un borde en el lado derecho.
+</div>
+ +
div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{EmbedLiveSample('Example')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#border-right', 'border-right')}}{{Spec2('CSS1')}}Initial definition
+ +
{{cssinfo}}
+ +

Compatibilitidad del navegador

+ + + +

{{Compat("css.properties.border-right")}}

diff --git a/files/es/web/css/border-spacing/index.html b/files/es/web/css/border-spacing/index.html new file mode 100644 index 0000000000..3abde56c44 --- /dev/null +++ b/files/es/web/css/border-spacing/index.html @@ -0,0 +1,104 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-spacing +--- +

<< Volver

+ +

Resumen

+ +

La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de separación de borde). Es el equivalente al atributo cellspacing en HTML.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: 0
    • +
  • Se aplica a: tablas y elementos con la propiedad inline-table
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: sí
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos.
    • +
+ +

Sintaxis

+ +

border-spacing: <length> | <length> <length> | inherit

+ +

Valores

+ +
    +
  • <length> : un largo a utilizar para el espaciado horizontal y vertical.
    • +
  • <length> <length> : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna).
    • +
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
table#space {
+  border-collapse: separate;
+  border-spacing: 10px 5px;
+}
+
+ +

Notas

+ +

Ésta propiedad sólo se aplica cuando {{ Cssxref("border-collapse") }} es especificado en separate.

+ +

El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla.

+ +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Netscape6
Internet Explorer7
Firefox1
Mozilla1
Safari1
Opera6
+ +

 

+ +

Ver también

+ +

{{ Cssxref("border-collapse") }}

+ +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "en": "en/CSS/border-spacing" } ) }}

diff --git a/files/es/web/css/border-start-end-radius/index.html b/files/es/web/css/border-start-end-radius/index.html new file mode 100644 index 0000000000..97f10396ad --- /dev/null +++ b/files/es/web/css/border-start-end-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-start-end-radius +slug: Web/CSS/border-start-end-radius +translation_of: Web/CSS/border-start-end-radius +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-start-end-radius define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+/* With one value the corner will be a circle */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-start-end-radius: 1em 2em;
+
+/* Global values */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+
+ +

Por ejemplo, en un modo de escritura  horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-left-radius")}}.

+ +

Sintaxis

+ +

Valores

+ +
+
<length-percentage>
+
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-end-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-end-radius: 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-start-end-radius")}}

+ +

Mira también

+ +
    +
  • La propiedad física asignada: {{CSSxRef("border-bottom-left-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-start-start-radius/index.html b/files/es/web/css/border-start-start-radius/index.html new file mode 100644 index 0000000000..c7596f14ad --- /dev/null +++ b/files/es/web/css/border-start-start-radius/index.html @@ -0,0 +1,98 @@ +--- +title: border-start-start-radius +slug: Web/CSS/border-start-start-radius +translation_of: Web/CSS/border-start-start-radius +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS border-start-start-radius define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
/* <length> values */
+/* With one value the corner will be a circle */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-start-start-radius: 1em 2em;
+
+/* Global values */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+
+ +

Por ejemplo, en un modo de escritura  horizontal-tb, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-left-radius")}}.

+ +

Sintaxis

+ +

Valores

+ +
+
<length-percentage>
+
Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: rebeccapurple;
+  width: 120px;
+  height: 120px;
+  border-start-start-radius: 10px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding: 10px;
+  background-color: #fff;
+  border-start-start-radius: 10px;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.border-start-start-radius")}}

+ +

Mira también

+ +
    +
  • La propiedad física asignada: {{CSSxRef("border-top-left-radius")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/border-style/index.html b/files/es/web/css/border-style/index.html new file mode 100644 index 0000000000..616f336ead --- /dev/null +++ b/files/es/web/css/border-style/index.html @@ -0,0 +1,242 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - Bordes CSS + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

La propiedad border-style CSS es una shorthand property (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento.

+ +
{{EmbedInteractiveExample("pages/css/border-style.html")}}
+ + + +

Syntax

+ +
/* Keyword values */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* vertical | horizontal */
+border-style: dotted solid;
+
+/* top | horizontal | bottom */
+border-style: hidden double dashed;
+
+/* top | right | bottom | left */
+border-style: none solid dotted dashed;
+
+/* Global values */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

La propiedad border-style se puede especificar usando uno, dos, tres o cuatro valores.

+ +
    +
  • Cuando se especifica un valor, se aplica el mismo estilo a los cuatro lados.
    • +
  • Cuando se especifican dos valores, el primer estilo se aplica a la parte superior e inferior, el segundo a la izquierda y a la derecha
    • +
  • Cuando se especifican tres valores, el primer estilo se aplica a la parte superior, el segundo a la izquierda y derecha, el tercero a la parte inferior.
    • +
  • Cuando se especifican cuatro valores, los estilos se aplican a la parte superior, derecha, inferior e izquierda en ese orden (en el sentido de las agujas del reloj).
    • +
+ +

Cada valor es una palabra clave elegida de la siguiente lista.

+ +

Values

+ +
+
<br-style>
+
Describe el estilo del borde. Puede tener los siguientes valores: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		Like the hidden keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden +
+ 		Like the none keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won't be displayed.
dotted +
+ 		Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated {{ cssxref("border-top-width") }}.
dashed +
+ 		Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid +
+ 		Displays a single, straight, solid line.
double +
+ 		Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}.
groove +
+ 		Displays a border with a carved appearance. It is the opposite of ridge.
ridge +
+ 		Displays a border with an extruded appearance. It is the opposite of groove.
inset +
+ 		Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with {{ cssxref("border-collapse") }} set to collapsed, this value behaves like groove.
outset +
+ 		+

Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with {{ cssxref("border-collapse") }} set to collapsed, this value behaves like ridge.

+
+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Tabla con todos los valores de propiedad

+ +

A continuación, se muestra un ejemplo de todos los valores de propiedad.

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style example classes */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

Output

+ +

{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Especificacion EstadoComentario
{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}{{ Spec2('CSS3 Backgrounds') }}No change.
{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}{{ Spec2('CSS2.1') }}Adds hidden keyword value.
{{ SpecName('CSS1', '#border-style', 'border-style') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.border-style")}}

+ +

Ver también

+ +
    +
  • The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}
    • +
diff --git a/files/es/web/css/border-top-color/index.html b/files/es/web/css/border-top-color/index.html new file mode 100644 index 0000000000..7be5b9461e --- /dev/null +++ b/files/es/web/css/border-top-color/index.html @@ -0,0 +1,105 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +translation_of: Web/CSS/border-top-color +--- +
{{CSSRef}}
+ +

La  propiedad CSS border-top-color  establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("border-top")}} son mas convenientes y preferidas.

+ +
/*valores <color> */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* Valores globales */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

La propiedad border-top-color es especificada con un valor unico.

+ +

Valores

+ +
+
{{cssxref("<color>")}}
+
El color superior del borde
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Un div simple con un borde

+ +

HTML

+ +
<div class="mybox">
+  <p>Esta es una caja con un border alrededor.
+     Tenga en cuenta que un border de la caja es
+     <span class="redtext">Rojo</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+  width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('A_simple_div_with_a_border')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}Sin cambios significativos, aunque la palabra clave transparent , ahora incluida en {{cssxref("<color>")}} que se ha extendido, se ha eliminado formalmente.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ + + +

{{Compat("css.properties.border-top-color")}}

+ +

Ver tambien

+ +
    +
  • Las propiedades abreviadas de CSS relacionadas con los bordes : {{Cssxref("border")}}, {{Cssxref("border-top")}}, y {{Cssxref("border-color")}}.
    • +
  • Las propiedades abrevadas de CSS relacionadas con el color para los bordes: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, y {{Cssxref("border-left-color")}}.
    • +
  • Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : {{cssxref("border-top-style")}} y {{cssxref("border-top-width")}}.
    • +
diff --git a/files/es/web/css/border-top-left-radius/index.html b/files/es/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..69be619d41 --- /dev/null +++ b/files/es/web/css/border-top-left-radius/index.html @@ -0,0 +1,252 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-top-left-radius +--- +
{{CSSRef}}
+ +

La propiedad CSS border-top-left-radius establece el redondeo de la esquina superior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,no se redondeará la esquina, dejándola cuadrada.

+ +
border-radius.png
+ +

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

+ +
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-top-left-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* la esquina es un círculo */
+/* border-top-left-radius: radius */
+border-top-left-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-top-left-radius: horizontal vertical */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+
+ +
+

donde:

+ +
+
radius
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+
horizontal
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+
vertical
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+
+ +

Valores

+ +
+
<length>
+
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+
<percentage>
+
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ejemplo en vivoCódigo
+
 
+ 		Un arco de círculo usado como borde + 
+div {
+  border-top-left-radius: 40px 40px;
+}
+
+
+
 
+ 		Un arco de elipse usado como borde + 
+div {
+  border-top-left-radius: 40px 20px;
+}
+
+
+
 
+ 		La caja es un cuadro: un arco de círculo es usado como borde + 
+div
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		La caja no es un círculo: un arco de elipse es usado como borde + 
+div {
+  border-top-left-radius: 40%;
+}
+
+
+
 
+ 		El color de fondo está delimitado al borde + 
+div {
+  border-top-left-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Porcentajes4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Esquinas elípticas1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Porcentajes{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Esquinas elípticas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, -moz-border-radius-topleft, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.

+ +

[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que -moz-border-radius-topleft siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.

+ +

[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si border-style tuviera valor solid. Esto fue solucionado en Gecko 50.0.

+ +

Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es true.

+ +

Véase también

+ +

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-top-right-radius/index.html b/files/es/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..ecb6f157b2 --- /dev/null +++ b/files/es/web/css/border-top-right-radius/index.html @@ -0,0 +1,256 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - Bordes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/border-top-right-radius +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS border-top-right-radius establece el redondeo de la esquina superior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,no se redondeará la esquina, dejándola cuadrada.

+ +
border-top-right-radius.png
+ +

Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.

+ +
Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad border-top-radius-radius, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* la esquina es un círculo */
+/* border-top-right-radius: radius */
+border-top-right-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-top-right-radius: horizontal vertical */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+
+ +
+

donde:

+ +
+
radius
+
Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+
horizontal
+
Es un valor  {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+
vertical
+
Es un valor  {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+
+ +

Valores

+ +
+
<length>
+
Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+
<percentage>
+
Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ejemplo en vivoCódigo
+
 
+ 		Un arco de círculo usado como borde + 
+div {
+  border-top-right-radius: 40px 40px;
+}
+
+
+
 
+ 		Un arco de elipse usado como borde + 
+div {
+  border-top-right-radius: 40px 20px;
+}
+
+
+
 
+ 		La caja es un cuadro: un arco de círculo es usado como borde + 
+div {
+  border-top-right-radius: 40%;
+}
+
+
+
+
.
+
+ 		La caja no es un círculo: un arco de elipse es usado como borde + 
+div {
+  border-top-right-radius: 40%;
+}
+
+
+
 
+ 		El color de fondo está delimitado al borde + 
+div {
+  border-top-right-radius:40%;
+  border-style: black 3px double;
+  background-color: rgb(250,20,70);
+  background-clip: content-box;
+}
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0 {{property_prefix("-webkit")}}
+ 4.0		1.0 (1.0){{property_prefix("-moz")}}[1]
+ 4.0 (2.0)[3]		9.010.53.0 (522){{property_prefix("-webkit")}}
+ 5.0 (532.5)
Porcentajes4.01.0 (1.0)[2]
+ 4.0 (2.0)		9.010.55.0 (532.5)
Esquinas elípticas1.03.5 (1.9.1)9.010.53.0 (522)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Porcentajes{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Esquinas elípticas{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] La versión con prefijo (permitida desde Firefox 1 hasta Firefox 12) de esta propiedad usaba otro nombre, -moz-border-radius-topright, distinto al de la propiedad final, ya que Mozilla lo implementó antes de que se determinara el nombre final.

+ +

[2] Antes de Firefox 4, el valor {{cssxref("<percentage>")}} era relativo a la anchura de la caja, incluso al especificar el radio para la altura. Esto implicaba que -moz-border-radius-topright siempre dibujaba un arco de círculo, y nunca una elipse, cuando se establecía un valor único.

+ +

[3] Previo a Gecko 50.0 {{geckoRelease("50.0")}}, los estilos de bordes de esquinas redondeadas siempre se dibujaban como si border-style tuviera valor solid. tuviera valor solid. Esto fue solucionado en Gecko 50.0.

+ +

Además del soporte a la versión sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} añadió soporte a la versión con prefijo -webkit de la propiedad, por razones de compatibilidad, usando la preferencia layout.css.prefixes.webkit, con valor predeterminado false. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de la preferencia es true.

+ +

Véase también

+ +

Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.

diff --git a/files/es/web/css/border-top/index.html b/files/es/web/css/border-top/index.html new file mode 100644 index 0000000000..fbbb9a741b --- /dev/null +++ b/files/es/web/css/border-top/index.html @@ -0,0 +1,151 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - Bordes + - CSS + - Propiedades CSS + - Referencia +translation_of: Web/CSS/border-top +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad de CSS border-top es una abreviatura que establece los valores de {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, y {{Cssxref("border-top-width")}}. Estas propiedades las características del borde superior de un elemento.

+ +
+

Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.

+ +

Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:

+ +
  border-top: none thick green;
+
+ +

es lo mismo que

+ +
  border-top: thick green;
+
+ +

y el valor de {{Cssxref("border-top-style")}} establecido antes de border-top es ignorado.

+ +

El no especificar la parte de border-style que está destinada a establecer el valor de {{Cssxref("border-top-style")}} significa que se tomará el valor por defecto, lo que significa que el {{Cssxref("border-top-style")}} será none.

+ +

También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de {{Cssxref("border-top-style")}} dado que al indicar border-top se establecerá implicitamente el valor de {{Cssxref("border-top-style")}} a none

+ +
  border-top-style: dotted;
+  border-top: thick green;
+
+
+ +
{{cssinfo}}
+ +

Sintaxis

+ +
border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+
+ +

Valores

+ +
+
<br-width> 
+
See {{Cssxref("border-top-width")}}.
+
<br-style> 
+
See {{Cssxref("border-top-style")}}.
+
<color> 
+
See {{Cssxref("border-top-color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
element {
+    border-top: 1px solid #000;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentarios
{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}} +

No hay cambios directos, aunque la modificación de valores para {{cssxref("border-top-color")}} sí aplican.

+
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}No hay cambios significativos
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.0")}}43.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/border-width/index.html b/files/es/web/css/border-width/index.html new file mode 100644 index 0000000000..ba017b3823 --- /dev/null +++ b/files/es/web/css/border-width/index.html @@ -0,0 +1,101 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border-width +--- +

Resumen

+ +

La propiedad border-width define el ancho del borde.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Herencia") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo del borde es ninguno ('none') o 'hidden'.
    • +
+ +

Sintaxis

+ +
 border-width: <border-width-value> {1,4} | {{ Cssxref("inherit", "heredado") }}
+
+ +

Valores

+ +
+
<border-width-value>
+
thin | medium | thick | {{ Cssxref("length", "largo") }}
+
thin
+
Un borde fino.
+
medium
+
Un borde mediano.
+
thick
+
Un borde grueso.
+
<length>
+
El grosor de un borde es un valor explícito por lo cual el ancho no puede ser nunca negativo.
+ Nota: Un valor em también es reconocido y soportado.
+
+ +

Propiedades relacionadas

+ +
    +
  • {{ Cssxref("border-bottom-width") }}
    • +
  • {{ Cssxref("border-left-width") }}
    • +
  • {{ Cssxref("border-right-width") }}
    • +
  • {{ Cssxref("border-top-width") }}
    • +
+ +

Ejemplos

+ +

Ver el ejemplo en vivo

+ +
element {
+    border-width: thin;
+    border-style: solid;
+    border-color: #000;
+}
+
+ +

Especificaciones

+ + + +

Compatibilidad

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4.0
Firefox1.0
Netscape
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

diff --git a/files/es/web/css/border/index.html b/files/es/web/css/border/index.html new file mode 100644 index 0000000000..2650cc595d --- /dev/null +++ b/files/es/web/css/border/index.html @@ -0,0 +1,117 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/border +--- +

{{ PreviousNext("Guía de referencia de CSS", "CSS:border-color") }}

+ +

Propierdades Contitutivas

+ +

Esta es una propiedad abreviada para las siguientes propiedades CSS:

+ +
    +
  • border-color
    • +
  • border-style
    • +
  • border-width
    • +
+ + + + + +

Resumen

+ +

La propiedad border permite definir de golpe todos los bordes en una única regla de la hoja de estilos. Se puede utilizar border para definir el o los valores siguientes: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
    • +
  • Se aplica a: todos los elementos
    • +
  • {{ Cssxref("inheritance", "Herencia") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales
    • +
+ +

Sintaxis

+ +
border: [border-width || border-style || border-color | inherit] ;
+
+ +

Valores

+ +
+
{{ Cssxref("border-width") }}.
+
{{ Cssxref("border-style") }}.
+
{{ Cssxref("border-color") }}.
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
element {
+    border: 1px solid #000;
+}
+
+ +

Notas importantes

+ +

Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} y {{ Cssxref("border-color") }} admiten hasta cuatro valores diferentes, ésta (border) no acepta más de uno por cada propiedad.

+ +

Especificaciones

+ + + +

Compatibilidad

+ + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Firefox1
Netscape4
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}

+ +

Descripción

+ +

Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a border-image no puede ser realizada mediante el uso de  border, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a none. 

+ +

La propiedad abreviada border es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) border-width, border-style y border-color puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. border-top) y lógicas (p. ej. border-block-start) del borde.

+ +

Bordes vs. contornos

+ +

Los bordes y los contornos son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:

+ +
    +
  • Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento. 
    • +
  • De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares,  no necesitan serlo. 
    • +
diff --git a/files/es/web/css/bottom/index.html b/files/es/web/css/bottom/index.html new file mode 100644 index 0000000000..6d26cf7c97 --- /dev/null +++ b/files/es/web/css/bottom/index.html @@ -0,0 +1,86 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/bottom +--- +

+

<< Volver +

+

Resumen

+

La propiedad bottom especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código). +

Para los elementos con una posición absoluta (aquellos que tienen la propiedad position: absolute o position: fixed), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor. +

Para los elementos con una posición relativa (los que tienen la propiedad position: relative), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si top no es auto, el valor computado de bottom es el valor negativo del valor computado de top. +

+
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }} +
  • Se aplica a: {{ Cssxref("position", "la posición de los elementos") }} +
  • {{ Cssxref("inheritance", "Heredado") }}: no +
  • Porcentajes: se refieren a la altura del bloque contenedor. +
  • Medio: {{ Cssxref("Media:Visual", "visual") }} +
  • {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto. +
+

Sintaxis

+
   bottom: <length> | <percentage> | auto | inherit
+
+

Valores

+
<length> 
Una longitud, usada como se describe en el resumen. Puede ser un valor negativo, cero o un valor positivo. +
<percentage> 
Un porcentaje de la altura del bloque contenedor, usado como se describe en el resumen. +
auto 
Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata height: auto como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, top es también auto, no se produce desplazamiento alguno. +
inherit 
Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor <length>, <percentage> o auto. +
+

Ejemplos

+
element {
+    position: absolute;
+    bottom: 20px;
+    height: 200px;
+    border: 1px solid #000;
+}
+
+

El siguiente ejemplo permite contrastar entre position:absolute y position:fixed. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con position:absolute se desplazarán junto con la página, mientras que los bloques posicionados con position:fixed, no lo harán. +

+
  • Atención: IE6 no soporta el código position:fixed. +
+
<!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>Position at bottom, absolute or fixed</title>
+<style type="text/css">
+p {font-size:30px; line-height:3em;}
+div.pos {width:49%; text-align:center; border:2px solid #00f;}
+div#abs {position:absolute; bottom:0; left:0;}
+div#fix {position:fixed; bottom:0; right:0;}
+</style>
+</head>
+<body>
+  <p>Esto<br>es<br>un texto<br>alto,<br>alto,
+    <br>alto,<br>alto,<br>alto<br>de prueba.</p>
+  <div id="fix" class="pos"><p>Fixed</p></div>
+  <div id="abs" class="pos"><p>Absolute</p></div>
+</body>
+</html>
+

Notas

+

Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento. +

Para los elementos posicionados de forma absoluta, la propiedad bottom no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} no son auto (que es el valor por defecto para top y height). +

+

Especificaciones

+ +

Compatibilidad entre navegadores

+This is as far back as the documentaion goes. +
Navegador Versión mínima
Internet Explorer 5
Firefox 1
Netscape 6
Opera 6
+

Ver también

+

{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }} +


+

+
+

Categorías +

Interwiki Languages +

+
+{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }} diff --git a/files/es/web/css/box-shadow/index.html b/files/es/web/css/box-shadow/index.html new file mode 100644 index 0000000000..16de31787a --- /dev/null +++ b/files/es/web/css/box-shadow/index.html @@ -0,0 +1,178 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Background + - Estilos + - Reference + - Referencia + - Sombras + - box-shadow +translation_of: Web/CSS/box-shadow +--- +

{{ CSSRef() }}

+ +

La propiedad CSS box-shadow  añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.

+ + + +

La propiedad box-shadow permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples sombras de texto (la primera sombra definida se ubica hasta arriba).

+ +

Generador de Box-shadow es una herramienta interactiva que permite generar una box-shadow.

+ +

Sintaxis

+ +
/* Keyword values */
+box-shadow: none;
+
+/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Global keywords */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+ +

Especifica una sola box-shadow utilizando:

+ +
    +
  • Dos, tres, o cuatro valores <length>. + + +
    • +
  • Opcionalmente, la palabra clave inset.
    • +
  • Opcionalmente, el valor <color>.
    • +
+ +

Valores

+ +
+
inset
+
Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).
+ La presencia de la palabra clave inset  cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.
+
<offset-x> <offset-y>
+
Estos son dos valores {{cssxref("<length>")}} para definir el desplazamiento de la sombra. <offset-x> especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <offset-y> Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("<length>")}} para posibles unidades.
+ Si ambos valores son 0, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <blur-radius> y/o <spread-radius> está establecido).
+
<blur-radius>
+
Este es el tercer valor {{cssxref("<length>")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será 0 (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:
+
+ +
+

...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.

+
+ +
+
<spread-radius>
+
Este es el cuarto valor {{cssxref("<length>")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será 0 (la sombra será del mismo tamaño del elemento).
+
<color>
+
Ver los valores de {{cssxref("<color>")}} para las posibles palabras claves y anotaciones.
+ Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.
+
+ +

Ejemplos

+ +

En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra).

+ +

HTML

+ +
<blockquote><q>You may shoot me with your words,<br/>
+You may cut me with your eyes,<br/>
+You may kill me with your hatefulness,<br/>
+But still, like air, I'll rise.</q>
+<p>&mdash; Maya Angelou</p>
+</blockquote>
+
+ +

Podrías dispararme con tus palabras,
+ podrías cortarme con tus ojos,
+ podrías matarme con tu odio,
+ y aún, como el aire, levantarme.
+ -Traduccion-

+ +

CSS

+ +
blockquote {
+  padding: 20px;
+  box-shadow:
+       inset 0 -3em 3em rgba(0,0,0,0.1),
+             0 0  0 2px rgb(255,255,255),
+             0.3em 0.3em 1em rgba(0,0,0,0.3);
+}
+ +

{{EmbedLiveSample('Examples1', '300', '300')}}

+ +
+

HTML

+ +
<div><p>Hello World</p></div>
+
+ +

CSS

+ +
p {
+  box-shadow: 0 0 0 2em #F4AAB9,
+              0 0 0 4em #66CCFF;
+  margin: 4em;
+  padding:1em;
+}
+ +

{{EmbedLiveSample('Examples2', '300', '300')}}

+ +

Cuando el x-offset, y-offset, y blur son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el border-radius es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un border-radius de cualquier otro valor, las esquinas habrían sido redondeadas.

+ +

Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del modelo de caja.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}Definición inicial
+ +

cssinfo}}

+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("css.properties.box-shadow")}}

+ +

Ver también

+ +
    +
  • El tipo de dato {{cssxref("<color>")}}
    • +
  • Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • Aplicando color a los elementos HTML utilizando CSS
    • +
diff --git a/files/es/web/css/box-sizing/index.html b/files/es/web/css/box-sizing/index.html new file mode 100644 index 0000000000..5fbea86747 --- /dev/null +++ b/files/es/web/css/box-sizing/index.html @@ -0,0 +1,119 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - Layout + - Propiedades CSS + - Web +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

La propiedad CSS box-sizing como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento.

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

Por defecto en el modelo de caja de CSS, el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.

+ +

La propiedad box-sizing puede ser usada para ajustar el siguiente comportamiento:

+ +
    +
  • content-box es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.
    • +
  • border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.
    • +
+ +

Sintaxis

+ +

La propiedad box-sizing es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.

+ +

Valores

+ +
+
content-box
+
Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 370 pixeles.
+
Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)
+
border-box
+
Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, .box {width: 350px; border: 10px solid black;} despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el border-box para hacer que el elemento desaparezca.
+
Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Este ejemplo muesta cómo diferentes valores de tamaño de la caja (box-sizing) alteran el tamaño desplegado de dos elementos idénticos.

+ +

HTML

+ +
<div class="content-box">Contenido de la caja</div>
+<br>
+<div class="border-box">Borde de la caja</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Ancho  total: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Ancho de la caja de contenido: 160px
+     Altura de la caja de contenido: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Ancho total: 160px
+     Altura total: 80px
+     Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo', 'auto', 300)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.box-sizing")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/calc()/index.html b/files/es/web/css/calc()/index.html new file mode 100644 index 0000000000..def61847cd --- /dev/null +++ b/files/es/web/css/calc()/index.html @@ -0,0 +1,199 @@ +--- +title: calc +slug: Web/CSS/calc() +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Sumario

+ +

La función CSS calc() puede ser usada en cualquier sitio donde {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, o {{cssxref("<integer>")}} sea requerido. Con calc() puedes realizar cálculos para determinar valores de propiedades CSS.

+ +

Es posible anidar llamadas a calc() dentro de otras llamadas calc().

+ +

Sintaxis

+ +
calc(expresión)
+ +

Values

+ +
+
expresión
+
Una expresión matemática cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.
+
+ +

Expresiones

+ +

{{todo("mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/")}}La expresión puede ser una combinación de los siguientes operadores:

+ +
+
+
+
Suma
+
-
+
Resta
+
*
+
Multiplicación. Al menos uno de los argumentos debe ser un {{cssxref("<number>")}}.
+
/
+
División. El divisor debe ser un {{cssxref("<number>")}}.
+
+ +

Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.

+ +
Nota: La división por cero dará lugar a un error generado por el analizador de HTML del navegador.
+ +
Nota: las operaciones + y - siempre deben estar separadas de sus operandos mediante espacios en blanco. La expresión calc(50% -8px) será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador en medio), mientras que la expresión calc(50% - 8px) es un porcentaje seguido de una operación de resta.
+Los operadores * y / no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.
+ +
+
+ +

Ejemplos

+ +

Añadir un margen a un objeto en pantalla

+ +

calc() hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{ EmbedLiveSample('Positioning_an_object_on_screen_with_a_margin', '100%', '60') }}

+ +

Entradas de formulario que se ajustan automáticamente al ancho de su contenedor

+ +

Otro caso de uso para calc() es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor mientras mantienen el margen apropiado.

+ +

Echémosle un vistazo al CSS:

+ +
input {
+  padding: 2px;
+  display: block;
+  width: 98%;               /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: 130px;             /* salvaguarda para navegadores que no reconocen calc() */
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

El formulario usa 1/6 del ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos  calc() de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:

+ +
<form>
+  <div id="formbox">
+  <label>Type something:</label>
+  <input type="text">
+  </div>
+</form>
+
+ +

{{ EmbedLiveSample('Automatically_sizing_form_fields_to_fit_their_container', '100%', '80') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}} 
+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico19 (WebKit 536.3) {{property_prefix("-webkit")}}
+ 26		{{CompatGeckoDesktop("2")}} {{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16")}}		9-6 {{property_prefix("-webkit")}} (buggy)
On gradients' color stops19 (WebKit 536.3) {{property_prefix("-webkit")}}
+ 27 (maybe 26)		{{CompatGeckoDesktop("19")}}9-6 {{property_prefix("-webkit")}} (buggy)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("2")}} {{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On gradients' color stops{{CompatUnknown}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/caret-color/index.html b/files/es/web/css/caret-color/index.html new file mode 100644 index 0000000000..df16ae5923 --- /dev/null +++ b/files/es/web/css/caret-color/index.html @@ -0,0 +1,151 @@ +--- +title: caret-color +slug: Web/CSS/caret-color +tags: + - CSS + - CSS UI + - Propiedad CSS + - Referencia +translation_of: Web/CSS/caret-color +--- +
{{CSSRef}}
+ +

La propiedad CSS caret-color especifica el color del cursor de texto, el indicador visible del punto de inserción en un elemento donde el usuario puede introducir texto u otro contenido.

+ +
/* Palabras clave */
+caret-color: auto;
+color: transparent;
+color: currentColor;
+
+/* Valores <color> */
+caret-color: red;
+caret-color: #5729e9;
+caret-color: rgb(0, 200, 0);
+caret-color: hsla(228, 4%, 24%, 0.8);
+
+ +
+

Nota: Los agentes usuario podrían incluir otras cosas que consideren “cursor de texto.” Por ejemplo, puede haber una “cursor para navegación,” que actúa de forma similar al cursor de texto pero puede ser movido en textos no editables. Por otro lado, la imagen de cursor mostrada cuando se coloca el cursor del ratón sobre texto cuando la propiedad {{cssxref("cursor")}} es auto, o sobre un elemento donde la propiedad cursor es text o vertical-text, aunque a veces se parezca al cursor de texto, no lo es (es un cursor del ratón). En algunos navegadores que no soportan esta propiedad, el color del cursor de texto no está asociado al color de la fuente.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
auto
+
Los agentes usuarios deberán usar currentcolor, pero podrían ajustar automáticamente el color del cursor para asegurar la correcta visibilidad y contraste con el contenido alrededor, posiblemente con base en currentcolor, el fondo, sombras, etc. +
+

Nota: Aunque los agentes usuarios puedan usar currentcolor (que usualmente es animable) para el valor auto, auto no es interpolado en las transiciones/animaciones.

+
+
+
{{cssxref("<color>")}}
+
Color del cursor de texto.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<input />
+ +

CSS

+ +
input {
+  caret-color: red;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 300, 40)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS3 UI", "#propdef-caret-color", "caret-color")}}{{Spec2("CSS3 UI")}}Initial definition.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57")}} +

Edge 38.1

+ 		{{CompatGeckoDesktop("53.0")}} +

Internet Explorer 11 

+ 		{{CompatOpera("44")}} +

{{CompatNo}} 

+ +

system caret

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatChrome("57")}}{{CompatChrome("57")}}{{CompatGeckoMobile("53.0")}}{{CompatNo}} +

font color

+ 		{{CompatOperaMobile("44")}}{{CompatNo}} +

system caret

+
+
diff --git a/files/es/web/css/cascade/index.html b/files/es/web/css/cascade/index.html new file mode 100644 index 0000000000..6860a8ba39 --- /dev/null +++ b/files/es/web/css/cascade/index.html @@ -0,0 +1,202 @@ +--- +title: Introducción a CSS en cascada +slug: Web/CSS/Cascade +translation_of: Web/CSS/Cascade +--- +
{{CSSRef}}
+ +
La cascada es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: Hojas de Estilo en Cascada. Este articulo explica que es cascada, el orden de las {{Glossary("CSS")}} declaraciones en cascada, y como esto te afecta, el desarrollador web.
+ +

¿Cuáles entidades CSS participan en la cascada?

+ +

Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las at-rules que contienen entidades distintas de las declaraciones, como una regla @font-face que contiene descriptores, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la @font-face identificada por su descriptor de familia de tipografías. Si se definen varias reglas @font-face con el mismo descriptor, solo se considera la @font-face, como conjunto, más adecuada. 

+ +

Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en @media, @document o @support - participan en la cascada, las declaraciones contenidas en @keyframes no. Como con @font-face, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.

+ +

Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.

+ +

Origin of CSS declarations

+ +

The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the {{anch("User-agent stylesheets")}}, the {{anch("Author stylesheets")}}, and the {{anch("User stylesheets")}}.

+ +

Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.

+ +

User-agent stylesheets

+ +

The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent stylesheets. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.

+ +

Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.

+ +

Author stylesheets

+ +

Author stylesheets are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.

+ +

User stylesheets

+ +

The user (or reader) of the web site can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user's wishes.

+ +

Cascading order

+ +

The cascading algorithm determines how to find the value to apply for each property for each document element.

+ +
    +
  1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
    2. +
  2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    OriginImportance
    1user agentnormal
    2usernormal
    3authornormal
    4animations
    5author!important
    6user!important
    7user agent!important
    8transitions
    +
    3. +
  3. In case of equality, the specificity of a value is considered to choose one or the other.
    4. +
+ +

Resetting styles

+ +

After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.

+ +

all lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.

+ +

CSS animations and the cascade

+ +

CSS animations, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.

+ +

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

+ +

Example

+ +

Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:

+ +

User-agent CSS:

+ +
li { margin-left: 10px }
+ +

Author CSS 1:

+ +
li { margin-left: 0 } /* This is a reset */
+ +

Author CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

User CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

+ +

So three declarations are in competition:

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:

+ +
margin-left: 3px
+ +

Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Cascade")}}{{Spec2("CSS4 Cascade")}}Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.
{{SpecName("CSS3 Cascade")}}{{Spec2("CSS3 Cascade")}}Removed the override cascade origin, as it was never used in a W3C standard.
{{SpecName("CSS2.1", "cascade.html", "the cascade")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#the-cascade", "the cascade")}}{{Spec2("CSS1")}}Initial definition.
+ +

See also

+ + diff --git a/files/es/web/css/child_combinator/index.html b/files/es/web/css/child_combinator/index.html new file mode 100644 index 0000000000..b191b809fd --- /dev/null +++ b/files/es/web/css/child_combinator/index.html @@ -0,0 +1,119 @@ +--- +title: Selectores de hijo +slug: Web/CSS/Child_combinator +tags: + - CSS + - Principiante + - Referencia CSS + - Selectores +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

El combinador > separa a dos selectores y busca solo a los elementos que coindicen con el segundo selector y que son hijos directos del primero. EN contraste, cuando se combinan dos selectores con el selector de descendiente, la expresión busca elementos que coinciden con el segundo selector y que tienen algun ancestro que coindice con el primero, sin importar el nivel de separación que tengan dentro del DOM.

+ +

Sintaxis

+ +
selector1 > selector2 { style properties }
+
+ +

Ejemplo

+ +
span { background-color: white; }
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +
<div>
+  <span>Span #1, dentro del div.
+    <span>Span #2, dentro del span que está en el div.</span>
+  </span>
+</div>
+<span>Span #3, no está dentro del div.</span>
+
+ +

{{EmbedLiveSample("Ejemplo", 200, 100)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Sin cambios
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/class_selectors/index.html b/files/es/web/css/class_selectors/index.html new file mode 100644 index 0000000000..382be6e07e --- /dev/null +++ b/files/es/web/css/class_selectors/index.html @@ -0,0 +1,128 @@ +--- +title: Selectores de clase +slug: Web/CSS/Class_selectors +tags: + - CSS + - Principiante + - Referencia CSS + - Selectores +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef("Selectors")}}
+ +

En un documento HTML, los selectores de clase buscan un elemento basado en el contenido de su atributo class. El atributo {{htmlattrxref("class")}} está definido como una lista de elementos separados por espacio, y uno de esos elementos debe coincidir exactamente con el nombre de clase dado en el selector.

+ +

Sintaxis

+ +
.classname { style properties }
+ +

Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "selector de atributo")}}:

+ +
[class~=classname] { style properties }
+ +

Ejemplo

+ +

CSS

+ +
span.classy {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<span class="classy">Aquí hay un span con algo de texto.</span>
+<span>Aquí hay otro.</span>
+
+ +

{{EmbedLiveSample('Ejemplo', 200, 50)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Sin cambios
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/clear/index.html b/files/es/web/css/clear/index.html new file mode 100644 index 0000000000..e66c285536 --- /dev/null +++ b/files/es/web/css/clear/index.html @@ -0,0 +1,239 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - Reference +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

La propiedad CSS clear especifica si un elemento puede estar al lado de elementos flotantes que lo preceden o si debe ser movido (cleared) debajo de ellos. La propiedad clear aplica a ambos elementos flotantes y no flotantes.

+ +

Cuando es aplicado a bloques no flotantes, mueve el border edge del elemento hacia abajo hasta que este debajo del margin edge de todos los floats relevantes. Este movimiento (cuando acontece) causa que margin collapsing no ocurra.

+ +

Cuando se aplica a elementos flotantes, mueve el margin edge del elemento debajo del margin edge de todos los floats relevantes. Esto afecta la posición de floats posteriores, ya que estos no pueden ser posicionados más arriba que los primeros.

+ +

Los floats que son relevantes para ser limpiados (cleared) son los primeros floats dentro del mismo contexto de formato de bloque.

+ +
+

Nota: Si deseas que un elemento contenga todos los elementos flotantes dentro, puedes hacer dos cosas, o bien flotar el contenedor también o usar clear en un pseudo-element {{cssxref("::after")}}.

+ +
#container::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+clear: inherit;
+
+ +

Valores

+ +
+
none
+
Es un keyword que indica que el elemento no es movido hacia abajo para limpiar elementos flotantes anteriores.
+
left
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la izquierda.
+
right
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes a la derecha.
+
both
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar tanto elementos flotantes de la izquierda como de la derecha.
+
inline-start {{experimental_inline}}
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar elementos flotantes al inicio del bloque contenedor, estos son los elementos con valor float left en scripts ltr (left to right) y elementos con valor float right en scripts rtl (right to left).
+
inline-end {{experimental_inline}}
+
Es un keyword que indica que el elemento es movido hacia abajo para limpiar floats al final del bloque contenedor, estos son los elementos con valor float right en scripts ltr (left to right) y elementos con valor float left en scripts rtl (right to left).
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +
Nota: El div con clase 'wrapper' añade un borde para una mejor visibilidad de la utilidad de la propiedad clear
+ +

clear: left

+ +

Contenido HTML

+ +
<div class="wrapper">
+
+    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+
+    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+
+    <p class="left">This paragraph clears left.</p>
+
+</div>
+
+ +

Contenido CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.left {
+    border: 1px solid black;
+    clear: left;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width: 20%;
+}
+.red {
+    float: left;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+
+ +

{{ EmbedLiveSample('clear:_left','100%','250') }}

+ +

clear: right

+ +

Contenido HTML

+ +
<div class="wrapper">
+
+    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+
+    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+
+    <p class="right">This paragraph clears right.</p>
+
+</div>
+
+ +

Contenido CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.right {
+    border: 1px solid black;
+    clear: right;
+}
+.black {
+    float: right;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+ +

{{ EmbedLiveSample('clear:_right','100%','250') }}

+ +

clear: both

+ +

Contenido HTML

+ +
<div class="wrapper">
+
+    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+
+    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+
+    <p class="both">This paragraph clears both.</p>
+
+</div>
+
+ +

Contenido CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.both {
+    border: 1px solid black;
+    clear: both;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 45%;
+}
+ +

{{ EmbedLiveSample('clear:_both','100%','300') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Agrega los valores inline-start y inline-end
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}Sin cambios significativos, aunque se aclaran los detalles.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad del navegador

+ +

{{Compat("css.properties.clear")}}

+ +

También puedes ver

+ + diff --git a/files/es/web/css/clip-path/index.html b/files/es/web/css/clip-path/index.html new file mode 100644 index 0000000000..a5c78f6eb8 --- /dev/null +++ b/files/es/web/css/clip-path/index.html @@ -0,0 +1,179 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +translation_of: Web/CSS/clip-path +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad CSS clip-path proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es circle(). La propiedad clip-path reemplaza la ahora deprecada propiedad clip.

+ +
/* Valores clave */
+clip-path: none;
+
+/* Valores de imagen */
+clip-path: url(resources.svg#c1);
+
+/* Valores de caja */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Valores geometricos */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Valores Geometricos y de caja combinados */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Valores globales */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Valores

+ +
+
url()
+
Represents a URL referencing a clip path element.
+
 
+
inset(), circle(), ellipse(), polygon()
+
A {{cssxref("<basic-shape>")}} function. Such a shape will make use of the specified <geometry-box> to size and position the basic shape. If no geometry box is specified, the border-box will be used as reference box.
+
<geometry-box>
+
If specified in combination with a <basic-shape>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by {{cssxref("border-radius")}}) as clipping path. The geometry box can be one of the following values: +
+
fill-box
+
Uses the object bounding box as reference box.
+
stroke-box
+
Uses the stroke bounding box as reference box.
+
view-box
+
Uses the nearest SVG viewport as reference box. If a {{SVGAttr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
+
margin-box
+
Uses the margin box as the reference box.
+
border-box
+
Uses the border box as the reference box.
+
padding-box
+
Uses the padding box as the reference box.
+
content-box
+
Uses the content box as the reference box.
+
+
+
none
+
There is no clipping path created.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
/* inline SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* external SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* circle */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}
+ +

Live sample

+ +

HTML

+ +
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+</select>
+
+ +

CSS

+ +
#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+
+ + + +

Result

+ +

{{EmbedLiveSample("Live_sample", 230, 250)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Extends its application to HTML elements
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Initial definition (applies to SVG elements only)
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.clip-path")}}

+ +

See also

+ + diff --git a/files/es/web/css/clip/index.html b/files/es/web/css/clip/index.html new file mode 100644 index 0000000000..73098f51d9 --- /dev/null +++ b/files/es/web/css/clip/index.html @@ -0,0 +1,148 @@ +--- +title: clip +slug: Web/CSS/clip +translation_of: Web/CSS/clip +--- +
+
{{CSSRef}}{{deprecated_header}}
+
+ +

Resumen

+ +

La propiedad de CSS clip define qué porción de un elemento es visible. La propiedad clip se aplica solamente sobre elementos con {{ cssxref("position","position:absolute") }} o {{cssxref("position", "position:fixed")}}.

+ +
+

Warning: This property is deprecated. Use {{cssxref("clip-path")}} instead.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("clip")}}
+
+ +
clip: rect(1px, 10em, 3rem, 2ch)
+clip: auto
+
+clip: inherit
+ +

Valores

+ +
+
<shape>
+
Una forma rectangular del formulario + 
rect(<top>, <right>, <bottom>, <left>)   /* sintaxis estándar */
+
+ o + + 
rect(<top> <right> <bottom> <left>)      /* sintaxis compatible inversa */
+ donde<top> y <bottom> especifícan desplazamientos de la esquina del borde superior de la caja, y <right>, y <left> especifican desplazamientos de la esquina del borde izquiedo de la caja.
+
<top>, <right>, <bottom>, y <left> pueden cada uno tenerun valor {{cssxref("<length>")}} o auto.
+
auto
+
El elemento no se recorta (valor por defecto)
+
+ +

Ejemplos

+ +
p { border:dotted;  position:relative; }
+
+#img2 {
+  position:absolute;  left:263px;
+
+  clip: rect(40px, 200px, 150px, 30px);
+  /* sintáxis estándar, no soportada por Internet Explorer 4-7 */
+}
+
+#img3 {
+  position: absolute; left:526px;
+
+  clip: rect(40px  200px  150px  30px);
+  /* sintáxis no-estándar, pero soportada por todos los exploradores importantes incluyendo Firefox y IE */
+}
+ +

hut.jpg hut.jpg hut.jpg

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Transitions', '#animatable-css', 'clip') }}{{ Spec2('CSS3 Transitions') }}Define clip como animatable.
{{ SpecName('CSS2.1', 'visufx.html#clipping', 'clip') }}{{ Spec2('CSS2.1') }} 
+ +

Compatibilidad entre exploradores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.0 (1.0)4.07.01.0 (85)
8.0
+ En esta versión es soportada la sintaxis correcta con coma.
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ +
    +
  • Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("overflow") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}
    • +
diff --git a/files/es/web/css/color/index.html b/files/es/web/css/color/index.html new file mode 100644 index 0000000000..d5d408265f --- /dev/null +++ b/files/es/web/css/color/index.html @@ -0,0 +1,260 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - Colores CSS + - Colores HTML + - Diseño + - Estilo HTML + - Estilo Texto + - Estilos HTML + - Propiedad CSS + - Referencia + - Referencia_CSS + - Web + - color +translation_of: Web/CSS/color +--- +
{{CSSRef}}
+ +

La propiedad de CSS color selecciona el valor de color de primer plano del contenido de elemento de texto y decoraciones de texto. Tambien establece el valor {{cssxref("currentcolor")}}  que se puede usar como un valor indirecto en otras propiedades, y es el valor predeterminado para otras propiedades de color, como {{cssxref("border-color")}}.

+ +

Para obtener una descripción general del uso del color en HTML, consulte Aplicando color a los elementos HTML mediante CSS.

+ +
/* Valores de palabras clave */
+color: currentcolor;
+
+/* Valores <named-color> */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* Valores <hex-color> */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* Valores <rgb()> */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* Valores <hsl()> */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* Valores Globales */
+color: inherit;
+color: initial;
+color: unset;
+
+ +

Ten en cuenta que el valor debe ser un {{cssxref("color")}} uniforme . No puede ser un {{cssxref("<gradient>")}}, que es en realidad un tipo de {{cssxref("<image>")}}.

+ + + +

{{EmbedLiveSample("color", "100%", 630, "", "", "example-outcome-frame")}}

+ +
{{cssinfo}}
+ +

Sintaxis

+ +

La propiedad color esta especificada como un solo un valor de {{cssxref("<color>")}}

+ +

Valores

+ +
+
{{cssxref("<color>")}}
+
Establece el color de las partes textuales y decorativas del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Las siguientes son todas las formas de hacer que el texto de un párrafo sea rojo:

+ +
p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 50% translúcido */
+p { color: rgba(255, 0, 0, 0.5); }
+p { color: hsla(0, 100%, 50%, 0.5); }
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}} +

Agrega sintaxis sin comas para las funciones rgb(), rgba(), hsl(), y hsla().  Permite valores alfa en rgb() y hsl(), convirtiéndose rgba() y hsla() en alias (obsoletos) para ellos.
+ Agrega una palabra clave de color rebeccapurple.
+ Agrega valores de color hexadecimal de 4 y 8 dígitos, donde el último dígito representa el valor alfa.
+ Añade las funciones hwb(), device-cmyk(), y color().

+
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}{{Spec2('CSS3 Transitions')}}Define color como animable.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Desprecia los colores del sistema. Agrega colores SVG. Agrega las funciones rgba(), hsl(), y hsla().
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Añade el color orange y los colores del sistema.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Definicion inicial.
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("css.properties.color")}}

+ +

Ver también

+ +
    +
  • El tipo de datos de  {{cssxref("<color>")}}
    • +
  • Otras propiedades relacionadas con el color: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
    • +
  • Aplicar color a elementos HTML usando CSS
    • +
diff --git a/files/es/web/css/color_value/index.html b/files/es/web/css/color_value/index.html new file mode 100644 index 0000000000..5e8fde3b08 --- /dev/null +++ b/files/es/web/css/color_value/index.html @@ -0,0 +1,1416 @@ +--- +title: +slug: Web/CSS/color_value +tags: + - CSS + - Layout + - Necesita Compatibilidad con Navegadores Móviles + - Referencia + - Tipos de datos CSS + - Web +translation_of: Web/CSS/color_value +--- +

{{CSSRef}}

+ +

Resumen

+ +

El tipo de datos CSS <color> denota un color en el sRGB color space. Un color puede ser descrito de cualquiera de las siguiente maneras:

+ +
    +
  • Usando una palabra clave.
    • +
  • Usando el sistema  RGB cubic-coordinate  (usando  #-hexadecimal o las notaciones funcionales rgb() y rgba() )
    • +
  • Usando el sistema HSL cylindrical-coordinate  (usando las notaciones funcionales hsl() y hsla() )
    • +
+ +

Hay que destacar que la lista de valores de color aceptados ha ido creciendo conforme la especificación evolucionaba, para acabar con la lista de colores de CSS3.

+ +

Asociado con el color en el espacio sRGB, un valor <color> también consiste en una coordenada alpha-channel o valor de transparencia, indicando cómo se debe composite o mezclar el color con su color de fondo.

+ +

Aunque los valores de colores en CSS son definidos de manera precisa existe la posibilidad de que parezcan distintos en dispositivos diferentes. La mayoría de ellos no están calibrados y algunos navegadores no soportan los color profile de algunos dispositivos de salidas. En esta situación el color puede variar bastante.

+ +
Notas: La recomendación WCAG 2.0 de la W3C aconseja a los autores web de manera clara que no usen  color como el único medido para especificar una información, acción o resultado concreto. Algunos usuarios tienen problemas para diferenciar colores y existe la posibilidad de que la información transmitida no sea captada. Por supuesto esto no impide que se use el color, sólo su uso como único medio para describir alguna información.
+ +

Interpolación

+ +

Los valores del tipo de datos CSS <color> pueden ser interpolados para lograr animaciones o para crear valores <gradient>. En este caso son interpolados en cada uno de sus componentes rojo, verde y azul, conteniendo, cada uno de ellos, un número decimal con coma flotante.  Debe tenerse en cuenta que la interpolación del color sucede en el alpha-premultiplied sRGBA color space para evitar que aparezcan grises inesperados. En las animaciones, la velocidad de la interpolación viene determinada por la timing function asociada con la animación.

+ +

Valores

+ +

Hay varias formas de describir un valor <color>.

+ +

Palabras clave de colores

+ +

Las palabras clave de colores son identificadores en los que no hay distinción entre mayúsculas y minúsculas y que sirven para representar un color concreto, por ejemplo red, blue, brown, lightseagreen. El nombre describe el color aunque es mayormente artificial. La lista de valores válidos cambia un montón de una especificación a otra:

+ +
    +
  • CSS Nivel 1 sólo acepta 16 colores básicos, los llamados colores VGA ya que son tomados de los colores que son capaces de mostrar las trajetas gráficas VGA.
    • +
  • CSS Nivel 2 añadió la palabra clave orange.
    • +
  • Desde el principio los navegadores aceptarons otros colores, sobre todo la lista de colores X11 con unas pocas diferencias. ya que, los primeros navegadores, eran en su mayoría aplicaciones X11. SVG 1.0  fué el primer estándar  que definió formalmente estas palabras clave. Con frecuencia nos referimos a ello como la lista extendida de colores , los colores X11 o los colores SVG.
    • +
+ +

Hay algunas advertencias a tener en cuenta al usar las palabras clave relativas a colores:

+ +
    +
  • A excepción de los 16 colores básicos, que son comunes en HTML, los otros no pueden ser usados en HTML. HTML convertirá estos valores desconocidos usando un algoritmo específico y se obtendrá colores totalmente diferentes. Estas palabras clave deberían sólo usarse en SGV y CSS.
    • +
  • Colores desconocidos hacen que la propiedad CSS sea declarada inválida. Las propiedades inválidas son ignoradas y , por tanto, el color no tendrá efecto. Esto es un comportamiento diferente al del HTML
    • +
  • Ninguna palabra clave de color tiene transparencia en CSS, son colores planos y sólidos.
    • +
  • Algunas referencian el mismo color: +
      +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • Aunque las palabras clave de colores han sido tomadas de los nombres de colores usuales en X11, el color puede ser ligeramente diferente al color en X11 ya que son adaptados por el fabricante para un hardware específico.
    • +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónColorPalabra claveValor RGB hexadecimalMuestra
{{SpecName("CSS1")}} black#000000 
 silver#c0c0c0 
 gray#808080 
 white#ffffff 
 maroon#800000 
 red#ff0000 
 purple#800080 
 fuchsia#ff00ff 
 green#008000 
 lime#00ff00 
 olive#808000 
 yellow#ffff00 
 navy#000080 
 blue#0000ff 
 teal#008080 
 aqua#00ffff 
{{SpecName("CSS2.1")}} orange#ffa500 
{{SpecName("CSS3 Colors")}} aliceblue#f0f8ff 
 antiquewhite#faebd7 
 aquamarine#7fffd4 
 azure#f0ffff 
 beige#f5f5dc 
 bisque#ffe4c4 
 blanchedalmond#ffe4c4 
 blueviolet#8a2be2 
 brown#a52a2a 
 burlywood#deb887 
 cadetblue#5f9ea0 
 chartreuse#7fff00 
 chocolate#d2691e 
 coral#ff7f50 
 cornflowerblue#6495ed 
 cornsilk#fff8dc 
 crimson#dc143c 
 darkblue#00008b 
 darkcyan#008b8b 
 darkgoldenrod#b8860b 
 darkgray#a9a9a9 
 darkgreen#006400 
 darkgrey#a9a9a9 
 darkkhaki#bdb76b 
 darkmagenta#8b008b 
 darkolivegreen#556b2f 
 darkorange#ff8c00 
 darkorchid#9932cc 
 darkred#8b0000 
 darksalmon#e9967a 
 darkseagreen#8fbc8f 
 darkslateblue#483d8b 
 darkslategray#2f4f4f 
 darkslategrey#2f4f4f 
 darkturquoise#00ced1 
 darkviolet#9400d3 
 deeppink#ff1493 
 deepskyblue#00bfff 
 dimgray#696969 
 dimgrey#696969 
 dodgerblue#1e90ff 
 firebrick#b22222 
 floralwhite#fffaf0 
 forestgreen#228b22 
 gainsboro#dcdcdc 
 ghostwhite#f8f8ff 
 gold#ffd700 
 goldenrod#daa520 
 greenyellow#adff2f 
 grey#808080 
 honeydew#f0fff0 
 hotpink#ff69b4 
 indianred#cd5c5c 
 indigo#4b0082 
 ivory#fffff0 
 khaki#f0e68c 
 lavender#e6e6fa 
 lavenderblush#fff0f5 
 lawngreen#7cfc00 
 lemonchiffon#fffacd 
 lightblue#add8e6 
 lightcoral#f08080 
 lightcyan#e0ffff 
 lightgoldenrodyellow#fafad2 
 lightgray#d3d3d3 
 lightgreen#90ee90 
 lightgrey#d3d3d3 
 lightpink#ffb6c1 
 lightsalmon#ffa07a 
 lightseagreen#20b2aa 
 lightskyblue#87cefa 
 lightslategray#778899 
 lightslategrey#778899 
 lightsteelblue#b0c4de 
 lightyellow#ffffe0 
 limegreen#32cd32 
 linen#faf0e6 
 mediumaquamarine#66cdaa 
 mediumblue#0000cd 
 mediumorchid#ba55d3 
 mediumpurple#9370db 
 mediumseagreen#3cb371 
 mediumslateblue#7b68ee 
 mediumspringgreen#00fa9a 
 mediumturquoise#48d1cc 
 mediumvioletred#c71585 
 midnightblue#191970 
 mintcream#f5fffa 
 mistyrose#ffe4e1 
 moccasin#ffe4b5 
 navajowhite#ffdead 
 oldlace#fdf5e6 
 olivedrab#6b8e23 
 orangered#ff4500 
 orchid#da70d6 
 palegoldenrod#eee8aa 
 palegreen#98fb98 
 paleturquoise#afeeee 
 palevioletred#db7093 
 papayawhip#ffefd5 
 peachpuff#ffdab9 
 peru#cd853f 
 pink#ffc0cb 
 plum#dda0dd 
 powderblue#b0e0e6 
 rosybrown#bc8f8f 
 royalblue#4169e1 
 saddlebrown#8b4513 
 salmon#fa8072 
 sandybrown#f4a460 
 seagreen#2e8b57 
 seashell#fff5ee 
 sienna#a0522d 
 skyblue#87ceeb 
 slateblue#6a5acd 
 slategray#708090 
 slategrey#708090 
 snow#fffafa 
 springgreen#00ff7f 
 steelblue#4682b4 
 tan#d2b48c 
 thistle#d8bfd8 
 tomato#ff6347 
 turquoise#40e0d0 
 violet#ee82ee 
 wheat#f5deb3 
 whitesmoke#f5f5f5 
 yellowgreen#9acd32 
{{SpecName("CSS4 Colors")}} rebeccapurple#663399 
+ +

El color rebeccapurple es equivalente al color  #639, y se puede encontrar información adicional sobre por qué fue introducidoa en el blog Codepen blog en un post realizado por Trezy "Honoring a Great Man."

+ +

Palabra clave transparent

+ +

La palaba transparent representa un color totalmente transparente, es decir, el color que veremos será el colore de fondo. Técnicamente es un color negro con un valor mínimo en el canal alfa y la manera de representarlo es rgba(0,0,0,0).

+ +
Nota histórica
+La palabra clave transparent no fue  un color en CSS hasta CSS Nivel 2 (Revisión 1). Podía ser usada en lugar de un valor <color> regular en dos propiedades CSS: {{Cssxref("background")}} y {{Cssxref("border")}}. En esencia fue añadida para permitir sobreescribir valores sólidos heredados.
+
+Con el soporte de la opacidad que nos proporcionan los alpha channels, transparent fue redefinido como un color verdadero más en CSS Nivel 3 permitiendo su use en cualquier sitio donde de requiera un valor<color> , como la propiedad {{Cssxref("color")}}.
+ +

Palabra clave currentColor

+ +

La palabra clave currentColor representa el valor calculado para la la propiedad del elemento {{Cssxref("color")}} . Permite hacer que las propiedades de color sean heredadas por los elementos hijo, que no lo hacen por defecto.

+ +

También puede ser usada en propiedades que heredan el valor calculado de la propiedad del elemento {{Cssxref("color")}}, en este caso, será equivalente a la plabara clave inherit en estos elementos, si es que la hubiera.

+ +

Ejemplo

+ +

El color de la una line (un div relleno de color) se adapta al color de su propiedad  {Cssxref("color")}} , heredada de su padre.

+ +
+
Live example 1
+ +
<div style="color:darkred">
+ EL color de este texto es el mismo que el de la línea  <div style="background:currentcolor; height:1px"></div>
+ Algo más de texto
+</div>
+
+ +

{{EmbedLiveSample('Live_example_1')}}

+ +
Live example 2
+ +
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
+ El color de este texto es el mimso que el color de la línea:
+  <div style="background:currentcolor; height:1px"></div>
+ Algo más de texto.
+</div>
+ +

{{EmbedLiveSample('Live_example_2')}}

+
+ +

rgb()

+ +

Los colores puede ser definidos usando el modelo RGB (rojo-verde-azul) de dos maneras:ways:

+ +
+
Notación Hexadecimal #RRGGBB ay #RGB
+
+
    +
  • "#", seguido de seis caracteres hexadecimales (0-9, A-F).
    • +
  • "#", seguido de tres caracteres hexadecimales (0-9, A-F).
    • +
+ La notación de tres dígitos (#RGB) y la de seis (#RRGGBB) son iguales.
+ Por ejemplo,  #f03 y #ff0033 representan el mismo color.
+
Notación funcional rgb(R,G,B)
+
"rgb", seguido por tres valores  {{cssxref("<integer>")}} o tres  {{cssxref("<percentage>")}} values.
+ El número entero 255 representa el 100%, y F o FF en notación hexadecimal.
+
+ +
/* Todos estos ejemplos son el mismo color RGB: */
+
+ #f03
+ #F03
+ #ff0033
+ #FF0033
+ rgb(255,0,51)
+ rgb(255, 0, 51)
+ rgb(255, 0, 51.2) /* ¡ERROR! No uses número decimales , usa enteros*/
+ rgb(100%,0%,20%)
+ rgb(100%, 0%, 20%)
+ rgb(100%, 0, 20%) /* ¡ERROR! No mezcles notaciones de enteros y de porcentajes*/
+
+ +

hsl()

+ +

Los colores también puede ser definidos usando el modelo  tono (hue) - saturación (saturation) - brillo (lightness) (HSL) con la notación funcional hsl(). La ventaja del modelo HSL sobre el modelo RGB es que es mucho más intuitivo: puedes adivinar los colores que tú quieres y luego modificarlos. Es también más fácil crear conjuntos de colores (manteniendo el tono (hue)  igual y modificando el brillo y la saturación.

+ +

El tono (Hue)  se representa como un ángulo del círculo de color (por así decir, el arco iris representado en un círculo). El ángulo se proporciona como un  {{cssxref("<number>")}} sin unidades. Por definición rojo=0=360, y los demas colores están dispersos por el círculo, verde=120, azul=240, etc. Al ser un ánguilo implítamente -120=240 y 480=120.

+ +

La saturación y el brillo son representados por porcentajes.
+ 100%  es saturacion completa, y 0% es una sombra de gris..
+ 100% brillo es blanco, 0%  negro, y 50% es brillo "normal".

+ +
hsl(0,  100%,50%)    /* red */   
+hsl(30, 100%,50%)                
+hsl(60, 100%,50%)                
+hsl(90, 100%,50%)                
+hsl(120,100%,50%)    /* green */ 
+hsl(150,100%,50%)                
+hsl(180,100%,50%)                
+hsl(210,100%,50%)                
+hsl(240,100%,50%)    /* blue */  
+hsl(270,100%,50%)                
+hsl(300,100%,50%)                
+hsl(330,100%,50%)                
+hsl(360,100%,50%)    /* red */   
+
+hsl(120,100%,25%)    /* dark green */  
+hsl(120,100%,50%)    /* green */       
+hsl(120,100%,75%)    /* light green */ 
+
+hsl(120,100%,50%)    /* green */  
+hsl(120, 67%,50%)                 
+hsl(120, 33%,50%)                 
+hsl(120,  0%,50%)                 
+
+hsl(120, 60%,70%)    /* pastel green */ 
+
+ +

rgba()

+ +

Podemos definir los colores con el modelo Rojo (red) - Verde (green) - Azul (blue) - alpha (RGBa) usando la notación funcional rgba(). RGBa amplia el modelo RGA añadiendo un canal alfa, permitiendo de esta manera especificar la opacidad de un color.
+ a representa opacidad: 0=transparente; 1=opaco;

+ +
rgba(255,0,0,0.1)    /* 10% opaque red */  
+rgba(255,0,0,0.4)    /* 40% opaque red */  
+rgba(255,0,0,0.7)    /* 70% opaque red */  
+rgba(255,0,0,  1)    /* full opaque red */ 
+
+ +

hsla()

+ +

Podemos definir los colores usando el modelo saturación tono (hue) - (saturation) - brillo (lightness)  (HSLa) usando lla notación funcional hsla(). HSLa amplía el modelo HSL incluyendo el canal alfa, permitiendo de esta manera especificar la opacidad de un color.
+ a es la opacidad: 0=transparente; 1=opaco;

+ +
hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
+hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
+hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
+hsla(240,100%,50%,   1)   /* full opaque blue */ 
+
+ +

Colores de Sistema

+ +

No todos los colores de sistema son soportados por todos los sistemas. {{deprecated_inline}} para usar en páginas web públicas..

+ +
+
ActiveBorder
+
Borde de la ventana activa
+
ActiveCaption
+
Título de la ventana activa. Deb usarse con CaptionText como color de fondo
+
AppWorkspace
+
Color de fondo para el interfaz de múltiples documentos.
+
Background
+
Fondo de escritorio.
+
ButtonFace
+
Color de fondo frontal para elementos 3-D que parecen 3-D debido a una capa del borde próximo. Debe usar con el color de frente ButtonText .
+
ButtonHighlight
+
The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
+
ButtonShadow
+
The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
+
ButtonText
+
Text on push buttons. Should be used with the ButtonFace or ThreeDFace background color.
+
CaptionText
+
Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.
+
GrayText
+
Gris para el texto deshabilitado:
+
Highlight
+
Elemento(s) seleccionados en un control. Debe ser usado con el color de frente HighlightText.
+
HighlightText
+
Texto de los elemento(s) seleccionados en un control. Debe usar con el color de fondo Highlight.
+
InactiveBorder
+
Borde de ventana inactivo.
+
InactiveCaption
+
Inactive window caption. Should be used with the InactiveCaptionText foreground color.
+
InactiveCaptionText
+
Color of text in an inactive caption.  Should be used with the InactiveCaption background color.
+
InfoBackground
+
Color de foBackground color for tooltip controls. Should be used with the InfoText foreground color.
+
InfoText
+
Text color for tooltip controls.  Should be used with the InfoBackground background color.
+
Menu
+
Fondo del menú. Debe ser usado Menu background. Should be used with the MenuText or  -moz-MenuBarText foreground color.
+
MenuText
+
Texto en el menú. Debe ser usado Text in menus. Should be used with the Menu background color.
+
Scrollbar
+
Color de fondo para las barras de scroll.
+
ThreeDDarkShadow
+
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
+
ThreeDFace
+
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.
+
ThreeDHighlight
+
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two
+ concentric layers of surrounding border.
+
ThreeDLightShadow
+
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two
+ concentric layers of surrounding border.
+
ThreeDShadow
+
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
+
Window
+
Fondo de las ventanas. Debe usarse con el color de frente WindowText.
+
WindowFrame
+
Marco de ventana
+
WindowText
+
Texto en las ventanas.Debe usarse con el color de fono de ventana.
+
+ +

Extensiones de Mozilla al Sistema de Colores

+ +
+
-moz-ButtonDefault
+
The border color that goes around buttons that represent the default action for a dialog box.
+
-moz-ButtonHoverFace
+
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
+
-moz-ButtonHoverText
+
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it).  Should be used with the -moz-ButtonHoverFace background color.
+
-moz-CellHighlight
+
Background color for selected item in a tree widget.  Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
+
-moz-CellHighlightText
+
Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
+
-moz-Combobox
+
{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes.  Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
+
-moz-ComboboxText
+
{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the -moz-Combobox background color.  In versions prior to 1.9.2, use -moz-FieldText instead.
+
-moz-Dialog
+
Color de fondo para cuadros de diálogo. Debe usarse con el color de frente -moz-DialogText
+
-moz-DialogText
+
Text color for dialog boxes. Should be used with the -moz-Dialog background color.
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree.  Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field.  See also -moz-OddTreeRow.
+
-moz-Field
+
Text field background color.  Should be used with the -moz-FieldText foreground color.
+
-moz-FieldText
+
Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.
+
-moz-html-CellHighlight
+
{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
+
-moz-html-CellHighlightText
+
{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s.  Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.
+
-moz-mac-accentdarkestshadow
+
-moz-mac-accentdarkshadow
+
-moz-mac-accentface
+
-moz-mac-accentlightesthighlight
+
-moz-mac-accentlightshadow
+
-moz-mac-accentregularhighlight
+
-moz-mac-accentregularshadow
+
-moz-mac-chrome-active
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-chrome-inactive
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
+
-moz-MenuHoverText
+
Text color for hovered menu items. Often similar to HighlightText.  Should be used with the -moz-MenuHover background color.
+
-moz-MenuBarText
+
{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
+
-moz-MenuBarHoverText
+
Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
+
-moz-nativehyperlinktext
+
{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.
+
-moz-OddTreeRow
+
{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree.  Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
+
-moz-win-communicationstext
+
{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
+
-moz-win-mediatext
+
{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
+
+ +

Extensiones de Mozilla a las Preferencias de Color

+ +
+
-moz-activehyperlinktext
+
Preferencias de usuario para el color de texto de los enlaces activos. Debe ser usado con el color de fondo por defecto del documento.
+
-moz-default-background-color
+
{{Gecko_minversion_inline("5.0")}} Preferencias de usuario  para el color de fondo del documento.
+
-moz-default-color
+
{{Gecko_minversion_inline("5.0")}} Preferencias de usuario para el color del texto.
+
-moz-hyperlinktext
+
Preferencias de usuario para el color del texto de los enlaces sin visitar. Debe ser usado con el color de fondo por defecto del documento.
+
-moz-visitedhyperlinktext
+
Preferencias de usuario para el color del texto de los enlaces ya visitados. Debe ser usado con el color de fondo por defecto del documento.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Colors', '#colorunits', '<color>')}}{{Spec2('CSS4 Colors')}}Añadido el color rebeccapurple.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Colores de sistema depreciados; añadidos colores SVG; añadidos las notaciones funcionales rgba(), hsl(), hsla().
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Añadidos el naranja y los colores de sistema.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
palabras clave de colores1.01.0 (1.0)3.0 [1]3.51.0 (85)
#RRGGBB | #RGB1.01.0 (1.0)3.03.51.0 (85)
rgb()1.01.0 (1.0)4.03.51.0 (85)
hsl()1.01.0 (1.5)9.09.53.1 (525)
rgba()1.03.0 (1.9)9.010.03.1 (525)
hsla()1.03.0 (1.9)9.010.03.1 (525)
currentColor1.01.5 (1.8)9.09.54.0 (528)
transparent1.03.0 (1.9)9.0 [2]10.03.1 (525)
rebeccapurple38.0{{CompatGeckoDesktop("33")}}1125.07.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
rgba(){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
rebeccapurple{{CompatVersionUnknown}}{{CompatGeckoMobile("33")}}{{CompatUnknown}}{{CompatUnknown}}8
+
+ +

[1] Los colores  'e'-grey (con una e) (grey, darkgrey, darkslategrey, dimgrey, lightgrey, lightslategrey) sólo son soportados a partir de IE 8.0. De IE 3 a IE 7 sólo son soportadas las variantes con 'a': gray, darkgray, darkslategray, dimgray, lightgray, lightslategray.

+ +

[2] IE 7-8 soporta la palabra clave transparent sólo para  {{Cssxref("background")}} y {{cssxref("border")}}. color: transparent; es equivalente a negro en IE. IE6 renderiza también como negros los bordes transparentes.

+ +

Ver además

+ +
    +
  • La propiedad  {{Cssxref("opacity")}} , que permite definir la transparencia a nivel de elemento.
    • +
  • Las propiedades {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}, {{Cssxref("box-shadow")}}.
    • +
diff --git a/files/es/web/css/column-count/index.html b/files/es/web/css/column-count/index.html new file mode 100644 index 0000000000..cc894efa4e --- /dev/null +++ b/files/es/web/css/column-count/index.html @@ -0,0 +1,95 @@ +--- +title: column-count +slug: Web/CSS/column-count +tags: + - CSS + - CSS Multicolumna + - Propiedad CSS + - Referencia +translation_of: Web/CSS/column-count +--- +
{{CSSRef}}
+ +

La propiedad CSS column-count divide el contenido de un elemento en el número de columnas indicado.

+ +
{{EmbedInteractiveExample("pages/css/column-count.html")}}
+ +

Sintaxis

+ +
/* Keyword value */
+column-count: auto;
+
+/* <integer> value */
+column-count: 3;
+
+/* Global values */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+ +

Valores

+ +
+
auto
+
El número de columnas es determinado por otras propiedades CSS, como {{cssxref("column-width")}}.
+
{{cssxref("<integer>")}}
+
Es un {{cssxref("<integer>")}} estrictamente positivo que describe el número ideal de columnas en las que el contenido del elemento va a fluir. Si la propiedad {{cssxref("column-width")}} se establece a un valor que no sea auto, se limitará a indicar el número máximo permitido de columnas.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `column-count` property. The text
+  is equally distributed over the columns.
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}{{Spec2('CSS3 Multicol')}}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ +

{{Compat("css.properties.column-count")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/column-span/index.html b/files/es/web/css/column-span/index.html new file mode 100644 index 0000000000..b72bc8859a --- /dev/null +++ b/files/es/web/css/column-span/index.html @@ -0,0 +1,99 @@ +--- +title: column-span +slug: Web/CSS/column-span +tags: + - CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/column-span +--- +
{{CSSRef}}
+ +

La propiedad column-span CSS hace posible que un elemento se extienda sobre todas las columnas cuando su valor se establece a all.

+ +
{{EmbedInteractiveExample("pages/css/column-span.html")}}
+ +
/* Keyword values */
+column-span: none;
+column-span: all;
+
+/* Global values */
+column-span: inherit;
+column-span: initial;
+column-span: unset;
+
+ +

A un elemento que se extiende más de una columna se le llama elemento extendido (spanning element).

+ +

Sintaxis

+ +

La propiedad column-span se especifica como una de las palabras clave listadas a continuación.

+ +

Valores

+ +
+
none
+
El elemento no se extiende en sobre varias columnas.
+
all
+
El elemento se extiende sobre todas las columnas. El contenido en el flujo normal que aparece antes del elemento se equilibra automáticamente en todas las columnas antes de que aparezca el elemento. El elemento establece un nuevo contexto de formato de bloque..
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

En este ejemplo, la cabecera se expande sobre todas las columnas del artículo.

+ +

HTML

+ +
<article>
+  <h2>My Very Special Columns</h2>
+  <p>This is a bunch of text split into three columns
+     using the CSS `columns` property. The text
+     is equally distributed over the columns.</p>
+</article>
+
+ +

CSS

+ +
article {
+  columns: 3;
+}
+
+h2 {
+  column-span: all;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', 'auto', 120)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol', '#column-span', 'column-span')}}{{Spec2('CSS3 Multicol')}}Definición inicial.
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.column-span")}}

diff --git a/files/es/web/css/columnas_css/index.html b/files/es/web/css/columnas_css/index.html new file mode 100644 index 0000000000..949f2eca71 --- /dev/null +++ b/files/es/web/css/columnas_css/index.html @@ -0,0 +1,112 @@ +--- +title: Columnas CSS +slug: Web/CSS/Columnas_CSS +tags: + - CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef}}
+ +

Columnas CSS es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.

+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("columns")}}
    • +
+
+ +

Guías

+ +
+
Diseños multicolumna con CSS
+
Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}} {{property_prefix('-webkit')}}{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}1011.10
+ 15{{property_prefix('-webkit')}}		3.0 (522){{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{property_prefix('-webkit')}}{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}1011.5
+ 32{{property_prefix('-webkit')}}		3.2{{property_prefix('-webkit')}}
+
diff --git a/files/es/web/css/comentarios/index.html b/files/es/web/css/comentarios/index.html new file mode 100644 index 0000000000..f09cac662a --- /dev/null +++ b/files/es/web/css/comentarios/index.html @@ -0,0 +1,49 @@ +--- +title: Comentarios +slug: Web/CSS/Comentarios +tags: + - CSS + - Principiante + - Referencia CSS +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

Resumen

+ +

Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.

+ +

Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.

+ +

Sintaxis

+ +
/* Comentario */
+ +

Examples

+ +
/* Comentario de una sola línea */
+
+/*
+Un comentario
+que se extiende
+en varias
+líneas
+*/
+
+ +

Notas

+ +

La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /* */ estos no pueden ser anidados. En otras palabras, la primera instancia de */ que siga a una instancia de /* cerrará el comentario.

+ +

Especificaciones

+ + + +

Véase también

+ + diff --git a/files/es/web/css/comenzando_(tutorial_css)/index.html b/files/es/web/css/comenzando_(tutorial_css)/index.html new file mode 100644 index 0000000000..54997a5f6e --- /dev/null +++ b/files/es/web/css/comenzando_(tutorial_css)/index.html @@ -0,0 +1,40 @@ +--- +title: Comenzando (tutorial CSS) +slug: Web/CSS/Comenzando_(tutorial_CSS) +--- +

 

+

Introducción

+

Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).

+

Este tutorial te guiará a través de las características básicas de CSS con ejemplos prácticos que puedes probar tu mismo desde tu computadora. Está dividido en dos partes.

+
  • 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.
    • +
+
  • La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.
    • +
+

Este tutorial se base en la especificación CSS 2.1

+

¿Quienes deberían usar este tutorial?

+

Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.

+

Si eres un principiante en CSS, usa la Parte I de este tutorial para entender y aprender como usar CSS. Luego usa la Parte II para entender el alcance de CSS en Mozilla.

+

Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.

+

Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.

+

¿Qué necesitas antes de empezar?

+

Para obtener el mayor provecho de este tutorial, necesitas un editor para archivos de texto, especialmente para la Parte II, un navegador de Mozilla (Firefox, Camino o SeaMonkey). También debes saber como usarlos de forma básica.

+

Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.

+

Algunas partes de este tutorial requieren otros programas de Mozilla. Estas partes son opcionales. Si no quieres descargar otros programas de Mozilla, puedes saltarte estas partes.

+ +

Nota:  CSS provee formas de trabajar con color, así que partes de este tutorial dependen del color. Puedes usar estas partes del tutorial fácilmente si tienes una pantalla a color y puedes visualizar normalmente los colores.

+

Como usar este tutorial

+

Para usar este tutorial, lee las páginas cuidadosamente y en secuencia. Si te pierdes alguna página, entonces puedes tener dificultades para entender las páginas siguientes.

+

En cada página, usa la sección Información para entender como funciona CSS. Usa la sección Acción para tratar de usar CSS en tu computadora.

+

Para probar tu entendimiento, toma los retos al final de cada página. Las soluciones a los retos están enlazados bajo los mismos retos, así que no necesitas mirar las respuestas si no quieres hacerlo.

+

Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas Más detalles. Usa los enlaces allí para encontrar información de referencia acerca de CSS.

+

Tutorial Parte I

+

Una guía de CSS paso a paso.

+
  1. Que es CSS
  2. Por qué usar CSS
  3. Como funciona CSS
  4. Cascada y herencia
  5. Selectores
  6. CSS legible
  7. Estilos de texto
  8. Color
  9. Contenido 
  10. Listas
  11. Cajas
  12. Estructura
  13. Tablas
  14. Media
    15. +
+

Tutorial Parte II

+

Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.

+
  1. JavaScript
  2. Gráficos SVG
  3. Data XML
  4. XBL bindings 
  5. Interfaces de usuario XUL
    6. +
+

{{ CSSTutorialTOC() }}

+

{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/es/web/css/como_iniciar/index.html b/files/es/web/css/como_iniciar/index.html new file mode 100644 index 0000000000..facb250cb3 --- /dev/null +++ b/files/es/web/css/como_iniciar/index.html @@ -0,0 +1,5 @@ +--- +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 new file mode 100644 index 0000000000..66badd7a3a --- /dev/null +++ b/files/es/web/css/como_iniciar/por_que_usar_css/index.html @@ -0,0 +1,106 @@ +--- +title: Por que usar CSS +slug: Web/CSS/Como_iniciar/Por_que_usar_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

 

+

Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.

+

Esta es la segunda sección del tutorial.

+

Sección anterior: Que es CSS
+ Sección siguiente: How CSS works

+

Información: ¿Por qué usar CSS?

+

CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como estilos. Si mantienes los estilos separados del contenido puedes:

+
    +
  • Evitar duplicación
    • +
  • Hacer el mantenimiento más simple
    • +
  • Usar el mismo contenido con diferentes estilos para diferentes propositos.
    • +
+ + + + + + + +
+ Ejemplo
+

Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página.

+

Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer.

+
+

En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).

+ + + + + + + +
+ Más detalles
+

Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.

+

Por ejemplo en HTML puedes usar una etiqueta <b> para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <body>.

+

Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar.

+
+

Acción: Creando una hoja de estilos

+
    +
  1. Crea un archivo de texto en el mismo directorio anterior.  Este archivo será tu hoja de estilos. Nombrala como: style1.css
    2. +
  2. En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:
    3. +
  3. +
    + 
    strong {color: red;}
+
    +
    +
    4. +
+

Enlazando tu documento a tu hoja de estillos

+
    +
  1. Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:
    2. +
  2. +
    + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+  <meta http-equiv="Content-Type" content="text/html;
+charset=iso-8859-1">
+  <title>Sample document</title>
+  <link rel="stylesheet" type="text/css" href="style1.css">
+  </head>
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    +
    3. +
  3. Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: + + + + + + +
    Cascading Style Sheets
    +
    4. +
+ + + + + + + +
+ Reto
En adición al rojo, CSS permite algunos otros nombres de colores. +

Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.

+
+

See a solution for the challenge. Ver la solución al reto.

+

¿Qué sigue?

+

Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de Discusión.

+

Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: Como funciona CSS.

+

{{ CSSTutorialTOC() }}

+

{{ languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "es": "es/CSS/Como_iniciar/Por_que_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }}

diff --git a/files/es/web/css/como_iniciar/que_es_css/index.html b/files/es/web/css/como_iniciar/que_es_css/index.html new file mode 100644 index 0000000000..fb914f0758 --- /dev/null +++ b/files/es/web/css/como_iniciar/que_es_css/index.html @@ -0,0 +1,145 @@ +--- +title: Que es CSS +slug: Web/CSS/Como_iniciar/Que_es_CSS +tags: + - para_revisar +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +

En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.

+ +

Esta es la primera sección del tutorial Como iniciar.
+ Siguiente sección: Por qué usar CSS

+ +

Información: ¿Qué es CSS?

+ +

Cascading Style Sheets (CSS), traducido literalmente al español, como Hojas de estilo en cascada, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.

+ +

Un documento (document) es una colección de información que está estructurada utilizando un lenguaje de formato (markup language).

+ + + + + + + + +
Ejemplos
+
    +
  • Una página web como la que estás leyendo, es un documento.
    + La información que ves en una página web usualmente está estructurada utilizando el lenguaje de formato de documentos de HiperTexto, HTML (HyperText Markup Language).
    • +
+ +
    +
  • Un cuadro de diálogo en una aplicación Mozilla es un documento.
    + Los controles de interfaz de usuario que pude ver en los diálogos de control de aplicaciones Mozilla, están estructurados utilizando el lenguaje de formato XUL (XML User-interface Language - Lenguaje XML de interfaces de usuario).
    • +
+
+ +

En este tutorial, los cuadros con titulo Más detalles, como el que está a continuación, contienen información adicional. Si se cuenta con poco tiempo para progresar con el tutorial, entonces pude omitir estos cuadros, quizás retorne a leerlos luego. De lo contrario léalos cuando llegue a ellos y tal vez siga los enlaces que contienen para aprender más.

+ + + + + + + + +
Más detalles
+

Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.

+ +

Por ejemplo, el documento esta leyendo en este momento no está almacenado en un archivo. Cuando su navegador web solicita esta página, el servidor consulta a la base de datos y genera el documento, obteniendo las partes del mismo de diferentes archivos. Sin embargo, en este tutorial se trabajará con documentos que se almacenan en archivos.

+ +

Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:

+ + + + + + + + + + + + + + + + + + + + +
HTMLpara páginas web
XMLpara documentos estrucurados, en general
SVGpara gráficas
XULpara interfaces de usuario de Mozilla
+ +

En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.

+
+ +

Presentar un documento a un usuario significa convertirlo en una forma en que el humano pueda hacer uso de el. Mozilla está diseñado para presentar documentos de manera visual—por ejemplo, en la pantalla de una computadora, en un proyector o en una impresora.

+ + + + + + + + +
Más detalles
CSS no es sólo para los navegadores web, y no sólo para la presentación visual. En terminos formales CSS, el programa que presenta un documento a un usuario es llamado un agente de usuarios (UA - User Agent). Un navegador es sólo un tipo de UA. Sin embargo, en la parte I de este tutorial, se trabajará únicamente con CSS en un navegador. +

Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace Definiciones (en ingles) en la especificación CSS.

+
+ +

Acción: Crear un documento

+ +
    +
  1. Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. +
      +
    1. Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre doc1.html + +
      + 
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+  <meta http-equiv="Content-Type" content="text/html;
+  charset=iso-8859-1">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+      <strong>B</strong>heets
+    </p>
+  </body>
+</html>
+
      +
      +
      2. +
    +
    2. +
  2. En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. +

    Debe observar un texto con las letras iniciales en negrita, así:

    + + + + + + + +
    Cascading Style Sheets
    + +

    Lo que ve en el navegador puede no lucir exactamente como en la imagen, debido a la configuración de su navegador web y esta wiki. Si existen algunas diferencias en el tipo de fuente, espaciado y los colores que ve, no son importantes.

    +
    3. +
+ +

¿Qué sigue?

+ +

Si ha tenido dificultad para entender esta página, o si tiene comentarios acerca de ella, por favor contribuya con esta en la página de Discusiones.

+ +

El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: ¿Por qué utilizar CSS?

+ +

{{ CSSTutorialTOC() }}

+ +

{{ languages( { "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS", "es": "es/CSS/Como_iniciar/Que_es_CSS" } ) }}

diff --git a/files/es/web/css/content/index.html b/files/es/web/css/content/index.html new file mode 100644 index 0000000000..624611a97e --- /dev/null +++ b/files/es/web/css/content/index.html @@ -0,0 +1,58 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/content +--- +

<< Volver +

+

Resumen

+

La propiedad content se usa junto con los pseudo-elementos :before y :after para generar contenido que se adjunta antes o después de un selector CSS. +

+

Características

+

En CSS3 +

+
  • Value: {{ mediawiki.external(' <uri> \',\' ') }}</uri>* {{ mediawiki.external(' normal | none | inhibit | <content-list> ') }}</content-list> +
  • Valor inicial: normal +
  • Se aplica a: todos los elementos y a ::before, ::after, ::alternate, ::marker, ::line-marker, áreas de margin y @footnote. +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no +
  • Porcentajes: N/A +
  • Medio: todos +
  • Valor calculada: The specified value with each occurrence of 'normal' expanded as per the prose below. +
+

Ejemplos

+
p:before
+{
+content: url("beep.wav")
+}
+
+img:before
+{
+content: attr(alt)
+}
+
+
+

Valores

+
  • string: Define el contenido de texto. El valor por defecto es "". +
  • url: Define una dirección URL +
  • counter (name) +
  • counter (name, list-style-type) +
  • counters (name, string) +
  • counters (name, string, list-style-type)
  • attr(X): Define un atributo de un selector que será mostrado antes/después del selector. +
  • open-quote
  • close-quote
  • no-open-quote
  • no-close-quote +
+

Ver también

+

(CSS2 en) +(CSS2 1 en) +(CSS3 en) +


+

+
+

Categorías +

Interwiki Languages +

+
+{{ languages( { "en": "en/CSS/content" } ) }} diff --git "a/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" "b/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" new file mode 100644 index 0000000000..11bb0c0076 --- /dev/null +++ "b/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" @@ -0,0 +1,91 @@ +--- +title: Detectar soporte de animación CSS +slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +

{{CSSRef}}

+ +

Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en la publicación de Chris Heilmann, demuestra una técnica de como hacer esto.

+ +

Prueba de la compatibilidad de animaciones CSS

+ +

Este código comprueba si el soporte de animaciones CSS esta disponible:

+ +
var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elm = document.createElement('div');
+
+if( elm.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable animation a false. Establecemos la variable animationstring a animation la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable pfx a una cadena vacía.

+ +

Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable elm. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.

+ +

Si el navegador no soporta animaciones sin prefijos, y animation sigue siendo false, iteramos todos los posibles prefijos,  ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a AnimationName en su lugar.

+ +

Una vez que el código ha terminado de ejecutarse, el valor de animation será false si el soporte de animacion CSS no esta disponible, de otro modo será true. Si es true tanto el nombre de las propiedad de animation y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será MozAnimation y el prefijo keyframe será -moz-, mientras en Chrome será WebkitAnimation y -webkit-. Tenga en cuenta que los navegadores no facilitan el cambio entre camelCase (Capitalizacion medial) y la hyphen-ation (separación).

+ +

Animaciones utilizando la sintaxis correcta para diferentes navegadores

+ +

Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.

+ +
if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elm.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Este código examina el valor de animation; si es false, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.

+ +

Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir keyframes es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).

+ +

Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable keyframes, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.

+ +

La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.

+ +

Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.

+ +

Ver en el JSFiddle

+ +

Ver tambien

+ + diff --git a/files/es/web/css/css_animations/index.html b/files/es/web/css/css_animations/index.html new file mode 100644 index 0000000000..7c953b2359 --- /dev/null +++ b/files/es/web/css/css_animations/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Experimental + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+
+ +

CSS At-rules

+ +
+
    +
  • {{cssxref("@keyframes")}}
    • +
+
+ +

Guides

+ +
+
Detecting CSS animation support
+
Describes a technique for detecting if the browser supports CSS animations.
+
Using CSS animations
+
Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ 43.0		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		1012{{property_prefix("-o")}}
+ 12.10[2]		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1 {{property_prefix("-webkit")}} [1]
+ 4.0 {{property_prefix("-webkit")}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Partial support: {{cssxref("animation-fill-mode")}} property is not supported in Android browser below 2.3.

+ +

[2] See the release notes to Opera 12.50.

+ +

See also

+ +
    +
  • Related to CSS Animations, CSS Transitions can trigger animations on user actions.
    • +
+ +

 

diff --git a/files/es/web/css/css_animations/tips/index.html b/files/es/web/css/css_animations/tips/index.html new file mode 100644 index 0000000000..1053ef24ac --- /dev/null +++ b/files/es/web/css/css_animations/tips/index.html @@ -0,0 +1,150 @@ +--- +title: Animaciones CSS tips y trucos +slug: Web/CSS/CSS_Animations/Tips +translation_of: Web/CSS/CSS_Animations/Tips +--- +
{{cssref}}
+ +
Las Animaciones con CSS hacen posible crear cosas increíbles con los elementos que forman parte de tus documentos y apps . Sin embargo, hay cosas que deseas hacer que no son evidentes, o soluciones inteligentes que quizás no encuentres de inmediato. Este artículo es una colección de tips y trucos que hemos encontrado que podrían hacer más fácil el trabajo, incluido cómo volver a ejecutar una animación detenida.
+ +

Corriendo una animación de nuevo

+ +

La especificación de CSS Animations no ofrece una forma de ejecutar una animación nuevamente. No hay un método mágico de resetAnimation() en los elementos, y tu no puedes solo configurar el elemento {{cssxref("animation-play-state")}} para "correr" de nuevo. En su lugar debes usar trucos inteligentes para que una animación detenida se reproduzca.

+ +

Aquí te mostramos una forma de hacerlo que sentimos es lo suficientemente estable y confiable para sugerirte

+ +

Contenido HTML 

+ +

Primero, definamos el HTML para un {{HTMLElement("div")}}  que deseamos animar y un botón que ejecurara (o repetira) la animación.

+ +
<div class="box">
+</div>
+
+<div class="runButton">Click me to run the animation</div>
+ +

Contenido CSS

+ +

Ahora definiremos la animación en si usando CSS. Algún CSS que no es importante (el estilo del botón "Run" en sí)  no se muestran aquí, por brevedad.

+ + + +
@keyframes colorchange {
+  0% { background: yellow }
+  100% { background: blue }
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+}
+
+.changing {
+  animation: colorchange 2s;
+}
+ +

Aquí hay dos clases. La clase "box" es un descripción básica de la apariencia de la caja, sin ninguna información de la animación incluida. Los detalles de la animación son incluidos en la clase "changing" class, que dice que {{cssxref("@keyframes")}} llamado "colorchange" debe usarse en el transcurso de dos segundo para animar la caja.

+ +

Note que debido a esto, la caja no comienza con ningún efecto de animación en su lugar, por lo que no se animará

+ +

Contenido JavaScript

+ +

Ahora veremos el JavaScript que jace el trabajo. La escencia de la técnica esta en la función play(), que se llama cuando el usuario hace clic en  el botón "Run".

+ +
function play() {
+  document.querySelector(".box").className = "box";
+  window.requestAnimationFrame(function(time) {
+    window.requestAnimationFrame(function(time) {
+      document.querySelector(".box").className = "box changing";
+    });
+  });
+}
+ +

Esto se ve raro, ¿cierto? Esto se debe a que la única forma de volver a reproducir una animación es eleminar el efecto de animación, dejar que el documento vuelva a calcular los estilos para que sepa que lo ha hecho y luego volver a agregar el efecto de animación al elemento. Para que eso suceda, tenemos que ser creativos.

+ +

Esto es lo que sucede cuando la función play() es llamada:

+ +
    +
  1.  La lista de clases CSS de caja se restablece a "box". Esto tiene el efecto de remover   cualquier otra clase recurrente aplicada a la caja, incluida la clase "changing" que       controla la animación. En otras palabras eliminaremos el efecto de animación de la caja. Sin embargo, los cambios en la lista de clases no tienen efecto hasta que se recalcula completamente el estilo  y se ha producido una actualización para reflejar el cambio.
    2. +
  2. Para estar seguros que los estilos son recalculados, nosotros usamos {{domxref("window.requestAnimationFrame()")}}, especifinado un callback. Nuestro callback se ejecuta justo antes del 'repaint' del documento. El problema para nosotros es que debido a que es antes del repaint, ¡El recalculo del estilo aún no ha suciedo! Por lo tanto...
    3. +
  3. Nuestro callback habilmente llama a requestAnimationFrame() ¡por segunda vez!. En este momento el callback se compila antes del siguiente repaint, después de que se haya producido el recalculo del estilo. El callback añade la clase "changing"  de nuevo en la caja, para que el repaint inicie la animación una vez más.
    4. +
+ +

Por supuesto, también necesitamos agregar un controlador de eventos a nuestro botón  "Run" para que en verdad haga algo

+ +
document.querySelector(".runButton").addEventListener("click", play, false);
+ +

Resultado

+ +

{{ EmbedLiveSample('Run_an_animation_again', 320, 160) }}

+ +

Detener la animación

+ +

Simplemente removemos {{cssxref("animation-name")}} aplicado al elemento que hace que eso salte o corte a su siguiente estado.Si, en cambio, desea que la animación se complete y luego se detenga, debe probar un enfoque diferente. Los principales trucos son:

+ +
    +
  1. Haga que su animación sea lo más autónoma posible. Esto significa que no se debe confiar enanimation-direction: alternate. En su lugar, debe escribir explícitamente una animación de fotogramas clave que pase por la animación completa en una repetición hacia adelante.
    2. +
  2. Use JavaScript y borre la animación  que se esta utilizando cuando se activa el evento animationiteration.
    3. +
+ +

El siguiente demo muestra como puedes lograr las técnicas JavaScript mencionandas anteriormente:

+ +
.slidein {
+  animation-duration: 5s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+.stopped {
+  animation-name: none;
+}
+
+@keyframes slidein {
+  0% {
+    margin-left: 0%;
+  }
+  50% {
+    margin-left: 50%;
+  }
+  100% {
+    margin-left: 0%;
+  }
+}
+
+ +
<h1 id="watchme">Click me to stop</h1>
+
+ +
let watchme = document.getElementById('watchme')
+
+watchme.className = 'slidein'
+const listener = (e) => {
+  watchme.className = 'slidein stopped'
+}
+watchme.addEventListener('click', () =>
+  watchme.addEventListener('animationiteration', listener, false)
+)
+
+ +

Demo https://jsfiddle.net/morenoh149/5ty5a4oy/

+ +

Mira también

+ + diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/usando_animaciones_css/index.html new file mode 100644 index 0000000000..b9b08bbc0b --- /dev/null +++ b/files/es/web/css/css_animations/usando_animaciones_css/index.html @@ -0,0 +1,351 @@ +--- +title: Usando animaciones CSS +slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

+ +

Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:

+ +
    +
  1. Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
    2. +
  2. La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
    3. +
  3. Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
    4. +
+ +

Configurando la animación

+ +

Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas no configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .

+ +

Las subpropiedades de {{ cssxref("animation") }} son:

+ +
+
{{ cssxref("animation-delay") }}
+
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
+
{{ cssxref("animation-direction") }}
+
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
+
{{ cssxref("animation-duration") }}
+
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
+
{{ cssxref("animation-iteration-count") }}
+
El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
+
{{ cssxref("animation-name") }}
+
Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.
+
{{ cssxref("animation-play-state") }}
+
Permite pausar y reanudar la secuencia de la animación
+
{{ cssxref("animation-timing-function") }}
+
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
+
{{ cssxref("animation-fill-mode") }}
+
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
+
+ +

Definiendo la secuencia de la animación con fotogramas

+ +

Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.

+ +

Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: from y to.

+ +

Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.

+ +

Ejemplos

+ +
Nota: Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo -webkit.
+ +

Haciendo que un texto se delice por la ventana del navegador

+ +

Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.

+ +

Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}:hidden en el contenedor.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".

+ +

Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.

+ +

Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias from). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100%  (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.

+ +

El segundo (y último) fotograma sucede en el 100% (hemos usado su alias to). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+ +

(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)

+ +

{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}

+ +

Añadiendo otro fotograma

+ +

Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.

+ +

(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)

+ +

{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}

+ +

Haciendo que se repita

+ +

Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos  infinite para que la animación se repita indefinidamente:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}

+ +

Moviendolo hacia adelante y hacia atrás

+ +

Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es alternate:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}

+ +

Usando la versión abreviada animation

+ +

La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+ +

Se puede reemplazar por

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

Nota: Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} 

+
+ +

Estableciendo multiples valores de propiedades animation

+ +

Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:

+ +

En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+
+ +

En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo fadeInOut tiene una duración de 2.5s y 2 iteraciones, etc.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, fadeInOut obtiene una duración de 2.5s y moveLeft300px obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto bounce  tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Usando eventos de animación

+ +

Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.

+ +

Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.

+ +

Agregando CSS

+ +

Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama slidein, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, width y margin-left son manipulados para hacer que el elemento se deslice por la pantalla.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

Añadiendo detectores de eventos a la animación

+ +

Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+ +

Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.

+ +

La última línea pone la clase slidein al elemento para comenzar la animación. ¿Por qué?. Porque que el evento animationstart se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.

+ +

Recibiendo los eventos

+ +

Los eventos, al irse disparando, llamarán a la función listener().

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.

+ +

El resultado, si todo ha ido bien, será algo parecido a esto:

+ +
    +
  • Iniciado: tiempo transcurrido 0
    • +
  • Nueva iteración comenzó a los 3.01200008392334
    • +
  • Nueva iteración comenzó a los 6.00600004196167
    • +
  • Finalizado: tiempo transcurrido 9.234000205993652
    • +
+ +

Fijémonos en que despues de la iteración final de la animación, el evento animationiteration no se envía, en su lugar se lanza animationend.

+ +

El HTML

+ +

Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.

+ +
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+
+ +

{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}

+ +

Te puede interesar también

+ + diff --git a/files/es/web/css/css_background_and_borders/border-image_generador/index.html b/files/es/web/css/css_background_and_borders/border-image_generador/index.html new file mode 100644 index 0000000000..3f189b87ea --- /dev/null +++ b/files/es/web/css/css_background_and_borders/border-image_generador/index.html @@ -0,0 +1,2615 @@ +--- +title: Generador Border-image +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}

+
+

Border Image Generator

+

HTML Content

+ 
    

+
+        
+
+        

+            
+            
 Upload image 

+            
+            
 

+        

+
+        

+            
 Control Box 

+            

+            

+                
scale

+                

+                

+            

+            

+            

+                
draggable

+                

+            

+            

+                
section height

+                

+                

+            

+        

+
+        

+            

+                

+                

+                

+                

+            

+            
 

+        

+
+
+        

+
+
+            

+                
 border-image-slice 

+                

+                    
fill

+                    

+                

+            

+
+
+            

+                
 border-image-width 

+            

+
+
+            

+                
 border-image-outset 

+            

+
+
+            

+                
 aditional-properties 

+                

+                    
 repeat-x 

+                    

+                        
repeat

+                        
stretch

+                        
round

+                    

+                

+                

+                    
 repeat-y 

+                    

+                        
repeat

+                        
stretch

+                        
round

+                    

+                

+                

+                    

+                    

+                

+
+                

+                    

+                

+                

+                    

+                    

+                

+            

+
+
+            

+                
 CSS Code 

+                

+                     border-image-slice: 
+                     
+                

+                

+                     border-image-width: 
+                     
+                

+                

+                     border-image-outset: 
+                     
+                

+                

+                     border-image-repeat: 
+                     
+                

+                

+                     border-image-source: 
+                      
+                

+            

+
+        

+
+

CSS Content

+ 
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+

JavaScript Content

+ 
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/es/web/css/css_background_and_borders/border-radius_generator/index.html b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..5f2f982065 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1601 @@ +--- +title: Generador de border-radius +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +tags: + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

Esta herramienta puede ser usada para generar efectos de {{cssxref("border-radius")}} de CSS3.

+ +
+

border-radius

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +

{{ EmbedLiveSample('border-radius-generator', '100%', '800px', '') }}

+ +

 

diff --git a/files/es/web/css/css_background_and_borders/index.html b/files/es/web/css/css_background_and_borders/index.html new file mode 100644 index 0000000000..87b26bd607 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/index.html @@ -0,0 +1,154 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
+
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..456fdd7484 --- /dev/null +++ b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,56 @@ +--- +title: Usando múltiples fondos con CSS +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - Ejemplo + - Fondos CSS + - Guía + - Intermedio +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Con CSS3, puedes aplicar múltiple fondos a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.

+ +

Especificar fondos múltiples es fácil:

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Ejemplo

+ +

En este ejemplo, tres fondos son apilados: el logo de Firefox, un gradiente lineal, y una imagen de burbujas:

+ +

HTML

+ +
<div class="multi_bg_example"></div>
+ +

CSS

+ +
.multi_bg_example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}
+ +

Resultado

+ +

(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)

+ +

{{EmbedLiveSample('Example','100%','400')}}

+ +

Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente ({{ cssxref("background-repeat") }} y {{ cssxref("background-position") }}) aplican a los fondos correspondientes. Así, el primer valor en la lista para {{ cssxref("background-repeat") }} aplica al primer fondo (el de hasta arriba), etc.

+ +

Véase también

+ + diff --git a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html new file mode 100644 index 0000000000..7e7819542d --- /dev/null +++ b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html @@ -0,0 +1,3220 @@ +--- +title: Herramienta para seleccionar color +slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL.  También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).

+ +

Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además,  basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

 

diff --git a/files/es/web/css/css_colors/index.html b/files/es/web/css/css_colors/index.html new file mode 100644 index 0000000000..586b0e85e4 --- /dev/null +++ b/files/es/web/css/css_colors/index.html @@ -0,0 +1,119 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

Los colores CSS son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

Tipos de datos CSS

+ +

{{cssxref("<color>")}}

+ +

Guías

+ +

Ninguna.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Ver también

+ +
    +
  • En CSS, las gradientes no son colores sino imágenes.
    • +
diff --git a/files/es/web/css/css_containment/index.html b/files/es/web/css/css_containment/index.html new file mode 100644 index 0000000000..f0e1bb357d --- /dev/null +++ b/files/es/web/css/css_containment/index.html @@ -0,0 +1,124 @@ +--- +title: CSS Containment +slug: Web/CSS/CSS_Containment +translation_of: Web/CSS/CSS_Containment +--- +
{{CSSRef}}
+

+ El objetivo de la espicificación CSS Containment es mejorar el rendimiento de las páginas web permitiendo a los desarrolladores aislar un subárbol del resto de la página. Si el navegador sabe si una parte de la página es independiente, se puede optimizar la renderización y el rendimiento mejora. La especificación define una única propiedad CSS {{cssxref("contain")}}. Este documento relata los objetivos básicos de la especificación.

+ +

Ejemplo básico

+ +

Muchas páginas web contienen un número de secciones que don independientes entre sí. Por ejemplo una lista de encabezados de artículo y un contenido, como en el siguiente marcado.

+ +
<h1>Mi blog</h1>
+<article>
+  <h2>Encabezado de un bonito artículo</h2>
+  <p>Contenido del artículo.</p>
+</article>
+<article>
+  <h2>Otro encabezado de otro artículo</h2>
+  <p>Más contenido.</p>
+</article>
+ +

Cada artículo tiene la propiedad {{cssxref("contain")}} con valor content aplicado en el CSS.

+ +
article {
+  contain: content;
+}
+ +

Cada artículo es independiente de los demás artículos en la página, y en consecuencia se les ha aplicado contain: content para indicar al navegador que ese es el caso. El navegador puede entonces usar esa información para tomar decisiones sobre cómo renderizar el contenido. Por ejemplo, puede no renderizar artículos que estén fuera del área visible.

+ +

Si aplicamos a cada <article> la propiedad contain con el valor content, cuando se inserten nuevos elementos el navegador entiende que no necesita hacer relayout o repaint de ningun área que esté fuera del subárbol que contenga el elemento, aunque si aplicamos estilos al <article> (por ejemplo height: auto), el navegador puede necesitar hacerse cargo de ese cambio de tamaño.

+ +

Se nos ha dicho por medio de la propiedad contain que cada artículo es independiente de los demás.

+ +

El valor content es una clave para referirse al valor layout paint. Dice al navegador que el layout del elemento está totalmente separado del resto de la página, y que todo lo relacionado con el elemento es pintado dentro de sus límites. Nada puede desbordarse visualmente.

+ +

Esta información es algo que normalmente es obvio para el desarrollador a la hora de crear la página web. Sin embargo, los navegadores no pueden adivinar las intenciones del desarrollador y no puede asumir que un <article> tenga que ser enteramente autocontenido. Esta propiedad, por lo tanto, provee de una buena forma de explicar este hecho al navegador, permitiendo que haga optimizaciones para el rendimiento basados en ese conocimiento.

+ +

Key concepts and terminology

+ +

This specification defines only one property, the {{cssxref("contain")}} property. The values for this property indicate the type of containment that you want to apply to that element.

+ +

Layout containment

+ +
article {
+  contain: layout;
+}
+ +

Layout is normally scoped to the entire document, which means that if you move one element the entire document needs to be treated as if things could have moved anywhere. By using contain: layout you can tell the browser it only needs to check this element — everything inside the element is scoped to that element and does not affect the rest of the page, and the containing box establishes an independent formatting context.

+ +

In addition:

+ +
    +
  • float layout will be performed independently.
    • +
  • Margins won't collapse across a layout containment boundary
    • +
  • The layout container will be a containing block for absolute/fixed position descendants.
    • +
  • The containing box creates a stacking context, therefore {{cssxref("z-index")}} can be used.
    • +
+ +

Paint containment

+ +
article {
+  contain: paint;
+}
+ +

Paint containment essentially clips the box to the padding edge of the principal box. There can be no visible overflow. The same things are true for paint containment as layout containment (see above).

+ +

Another advantage is that if the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.

+ +

Size containment

+ +
article {
+  contain: size;
+}
+ +

Size containment does not offer much in the way of performance optimizations when used on its own. However, it means that the size of the element's children cannot affect the size of the element itself — its size is computed as if it had no children.

+ +

If you turn on contain: size you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.

+ +

Style containment

+ +
article {
+  contain: style;
+}
+ +

Despite the name, style containment does not provide scoped styles such as you would get with the Shadow DOM. The main use case is to prevent situations where a CSS Counter could be changed in an element, which could then affect the rest of the tree. 

+ +

Using contain: style would ensure that the {{cssxref("counter-increment")}} and {{cssxref("counter-set")}} properties created new counters scoped to that subtree only.

+ +
+

Note: style containment is "at-risk" in the spec and may not be supported everywhere (it's not currently supported in Firefox).

+
+ +

Special values

+ +

There are two special values of contain:

+ +
    +
  • content
    • +
  • strict
    • +
+ +

We encountered the first in the example above. Using contain: content turns on layout and paint containment. The specification describes this value as being "reasonably safe to apply widely". It does not apply size containment, so you would not be at risk of a box ending up zero-sized due to a reliance on the size of its children.

+ +

To gain as much containment as possible use contain: strict, which behaves the same as contain: size layout paint, or perhaps the following to also add style containment in browsers that support it:

+ +
contain: strict;
+contain: strict style;
+ +

Reference

+ +

CSS Properties

+ +
    +
  • {{cssxref("contain")}}
    • +
+ +

External resources

+ + diff --git a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..154480239b --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,231 @@ +--- +title: Aligning Items in a Flex Container +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +tags: + - Align + - CSS + - Flex + - Guía + - Tutorial + - align-content + - align-self + - alineación + - alinear + - flexbox + - justify + - justify-content + - rejillas +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

Una de las razones por las que flexbox atrajo rápidamente el interés de los desarrolladores web es que por primera vez en la web se ha conseguido unas posibilidades completas de alineamiento de elementos. Se habilita la alineación vertical, de modo que por fin existe una manera rápida y facil de centrar una caja.  A lo largo de esta guía, vamos a desarrollar un exhaustivo recorrido  sobre el funcionamiento de las propiedades de alineamiento y justificación en Flexbox.

+ +

Para centrar nuestra caja, usamos la propiedad align-items para alinear nuestro artículo en el eje transversal, que en este caso es el eje del bloque que se ejecuta verticalmente. Utilizamos justify-content para alinear el elemento en el eje principal, que en este caso el eje en línea se ejecuta horizontalmente.

+ +

A containing element with another box centered inside it.

+ + + +

Puedes echar un vistazo al código de este ejemplo a continuación. Cambia el tamaño del contenedor o elemento anidado y el elemento anidado siempre permanece centrado.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

Propiedades que controlan la alineación.

+ +

Las propiedades que veremos en esta guía son las siguientes.

+ +
    +
  • {{cssxref("justify-content")}} — controla la alineación de todos los elementos en el eje principal.
    • +
  • {{cssxref("align-items")}} — controla la alineación de todos los elementos en el eje transversal.
    • +
  • {{cssxref("align-self")}} — controla la alineación de un elemento flexible individual en el eje transversal.
    • +
  • {{cssxref("align-content")}} — descrito en la especificación como para "empaquetar líneas flexibles"; Controla el espacio entre las líneas de flexión en el eje transversal.
    • +
+ +

También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox

+ +
+

Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación — CSS Box Alignment Level 3. Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.

+
+ +

El eje transversal

+ +

Las propiedades align-items y align-self controlan la alineación de nuestros elementos flexibles en el eje transversal, en filas si flex-direction se encuentra en row ó en columnas si flex-direction se encuentra en column.
+
+ Estamos haciendo uso de la alineación del eje transversal en el ejemplo de flexión más simple. Si agregamos display: flex a un contenedor, todos los elementos secundarios se convierten en elementos flexibles organizados en una fila. Todos se estirarán para ser tan altos como el elemento más alto, ya que ese elemento define la altura de los elementos en el eje transversal. Si su contenedor flexible tiene una altura establecida, entonces los elementos se extenderán a esa altura, independientemente de la cantidad de contenido en el elemento.

+ +

Three items, one with additional text causing it to be taller than the others.

+ +

Three items stretched to 200 pixels tall

+ + + +

La razón por la que los elementos se convierten en la misma altura es que el valor inicial de align-items, la propiedad que controla la alineación en el eje transversal, se establece en stretch.

+ +

Podemos usar otros valores para controlar como se alinean los items:

+ +
    +
  • align-items: flex-start
    • +
  • align-items: flex-end
    • +
  • align-items: center
    • +
  • align-items: stretch
    • +
  • align-items: baseline
    • +
+ +

En el ejemplo en vivo a continuación, el valor de align-items is stretch. Pruebe los otros valores y vea cómo todos los elementos se alinean entre sí en el contenedor flexible.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

Alineando un item  individual con align-self

+ +

La propiedad align-items establece la propiedad align-self en todos los elementos flexibles como un grupo. Esto significa que puede declarar explícitamente la propiedad align-self para apuntar a un solo elemento. La propiedad align-self acepta todos los mismos valores que align-items, además del valor auto, que restablecerá el valor a lo que esté definido en el contenedor flex o flexible..

+ +

En este siguiente ejemplo en vivo, el contenedor flex tiene el elemento de alineación: flex-start, lo que significa que todos los elementos están alineados con el inicio del eje transversal. En este caso se dirige al primer elemento utilizando un selector first-child,  y se configuró con la propiedad: strecth; otro elemento ha sido alineado, utilizando  su clase selected  y dando valor a la propiedad  align-self: center.  Puede cambiar el valor de align-items o cambiar los valores de align-self en los elementos individuales para ver cómo funciona esto.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Cambiando el eje principal

+ +

Hasta ahora hemos examinado el comportamiento cuando nuestra flex-direction  es row, y mientras trabajamos en un lenguaje escrito de arriba a abajo. Esto significa que el eje principal corre a lo largo de la fila horizontalmente, y nuestra alineación del eje transversal mueve los elementos hacia arriba y hacia abajo.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

+ +

Si cambiamos nuestra flex-direction a columna, align-items y align-self van a alinear los items a la derecha y a la izquierda.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

+ +

Puede probarlo con el siguiente ejemplo, que tiene un contenedor flexible, con flex-direction: column , y  que de lo contrario seria exactamente igual  al ejemplo anterior. .

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} 

+ +

Alineando el contenido en el eje transversal: la propiedad align-content

+ +

Hasta ahora hemos estado alineando los elementos, o un elemento individual dentro del área definida por el contenedor flexible. Si tiene un contenedor flexible de varias líneas envuelto, también puede usar la propiedad  align-content para controlar la distribucion del espacio entre las filas. En la especificación, esto se describe como empaquetamiento de lineas flexibles.

+ +

Para que align-content funcione necesita una mayor altura en su contenedor flexible que la que requiere para mostrar los items. A partir de ahi el tratara a todos los items como un conjunto, para determinar que sucede con ese espacio libre y y la alineacion de todo el conjunto de elementos que contiene.    

+ +

La propiedad align-content acepta los siguientes valores:

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly (not defined in the Flexbox specification)
    • +
+ +

En el ejemplo en vivo siguiente, el contenedor flexible, tiene una altura de 400 pixels, lo cual es mas de lo que necesita para mostrar nuestros items. El valor de align-content  lo que significa que el espacio disponible es compartido entre las lineas flexibles que estan colocadas al ras al inicio y al final  del contenedor en el eje transversal. 

+ +

Pruebe con otros valores para ver como la propiedad align-content funciona.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Una vez mas podemos cambiar nuestra flex-direction a column para ver como esta propieda se comporta cuando trabajamos con columnas. Al igual que antes necesitamos suficiente espacio en el eje transversal para dejar algun espacio libre despues de mostrar todos los items  

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Nota: El valor space-evenly no está definido en las especificaciones de flexbox  y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.

+
+ +

Revise la documentacion para justify-content  en MDN para  encontrar más detalles de todos sus valores y el soporte de los navegadores.

+ +

Alineando contenido en el eje principal

+ +

Ahora que hemos visto como funciona la alineacion en el eje transversal, podemos echar una mirada al eje principal. Aquí solo tendremos una propiedad disponible disponible — justify-content.  Esto se debe a que  solo podemos trabajar con los items como grupos en el eje principal. Con justify-content controlamos que sucede con el espacion disponible, en caso de que haya más espacio del que se necesita para mostrar los items  

+ +

En nuestro ejemplo inicial con display: flex en el contenedor, los items se muestran como una fila y todos se alinean al inicio del contenedor. Esto se debe a que el valor inicial de justify-content es flex-start. Cualquier espacio disponible se coloca al final de los elementos.

+ +

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

+ +

La propiedad justify-content  accepta el mismo valor que  align-content.

+ +
    +
  • justify-content: flex-start
    • +
  • justify-content: flex-end
    • +
  • justify-content: center
    • +
  • justify-content: space-between
    • +
  • justify-content: space-around
    • +
  • justify-content: stretch
    • +
  • justify-content: space-evenly (not defined in the Flexbox specification)
    • +
+ +

En el ejemplo a continuacion el valor de justify-content es space-between. El espacio disponible despues de mostrar los items es distribuido  entre estos. El elemento izquierdo y derecho se alinea al ras con el inicio y el final.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+ +

Si el eje principal esta en direccion bloque porque flex-direction  tiene valor  column, entonces justify-content distribuira el espacio entre items, en la misma medida que el posee el espacio en el contenedor flex para ser distribuida, o sea siempre que haya espacio en el contenedor para distribuir. 

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} 

+ +

Modos de Alineación y escritura

+ +

Recuerda que con todos estos metodos de alineación los valores de flex-start y flex-end son escritos en modo consciente. Si el valor de  justify-content es start y el modo de escritura es izquierda a derecha, como en español o ingles,  los elementos se alinearán comenzando en el  lado izquierdo del contenedor

+ +

Three items lined up on the left

+ +

Sin embargo si el modo de escritura es de derecha a izquierda como en arabe, los elementos o items se alinearán en el extremo derecho del contenedor.

+ +

Three items lined up from the right

+ +

El ejemplo siguiente tiene la propiedad  direction  con valor rtl para forzar a los elementos a colocarse de derecha a izquierda. Puedes eliminarlo o cambiar los valores de  justify-content   para ver como flexbox  se comporta cuando el inicio de la direccion dentro de la linea, es a la derecha.  

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

Alineacíon y flex-direction

+ +

La linea de inicio también cambiará si cambias la propiedad flex-direction  — por ejemplo usando  row-reverse en vez de row.

+ +

En el ejemplo siguiente tengo items dispuestos con flex-direction: row-reverse y justify-content: flex-end. En lenguaje de izquierda a derecha, estos elementos se alinearan a  la izquierda. Prueba a cambiar flex-direction: row-reverse a flex-direction: row. Veras como los elementos ahora se mueven a la derecha.  

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

Considerando que esto puede ser algo confuso, la regla a tener en cuenta es que a no ser que hagas algo para cambiarlo, los items flexible se alinean en la misma direccion que las palabras se ordenan linealmente en el lenguaje de tu documento a lo largo de la linea.   flex-start comenzará donde el inicio de la oracion debe comenzar.  

+ +

Diagram showing start on the left and end on the right.

+ +

Puedes cambiarlo para que aparezcan en dirección de bloque, para el lenguaje de tu documento, seleccionando  flex-direction: column. Luego flex-start estará donde la parte superior del primer parrafo de texto comenzaria.  

+ +

Diagram showing start at the top and end at the bottom.

+ +

Si cambias flex-direction a uno de los valores inversos, entonces se distribuirán desde el eje final y en el orden inverso a la forma en que se escriben las palabras en el idioma de su documento. flex-start cambiará al final de ese eje — por lo tanto, a la ubicación donde se ajustarán sus líneas si trabaja en filas, o al final de su último párrafo de texto, en la dirección en bloque.

+ +

Diagram showing start on the right and end on the left.

+ +

Diagram showing end at the top and start at the bottom

+ +

Usando auto margenes para la alineación en el eje principal  

+ +

No tenemos una propiedad  justify-items o justify-self disponible en el eje principal para nuestros items, ya que estos son tratados como un grupo en este eje.  Sin embargo es posible realizar cierta alineación individual, para separar un elemento o un grupo de elementos de otros, usando automargenes, o margenes automaticos con flebox.  

+ +

Un patrón común es una barra de navegación donde algunos elementos clave se alinean a la derecha, con el grupo principal a la izquierda. Podría pensarse que este debería ser un caso de uso para una propiedad de  justify-self  , sin embargo, considere la imagen a continuación. Tengo tres artículos en un lado y dos en el otro. Si pudiera usar justify-self en el elemento d, también cambiaría la alineación del artículo e que sigue, lo cual puede o no ser mi intención.

+ +

Five items, in two groups. Three on the left and two on the right.

+ +

En cambio podemos enfocarnos en el item  4 y separarlo de los tres primeros elementos dandole a este un  valor al margin-left  de auto. El auto margen tomará  todo el espacio que puedan en su eje — así es como funciona el centrado de un bloque con los margenes automáticos a derecha e izquierda. Cada lado trata de ocupar tanto espacio como puede, y así el bloque se empuja hacia el medio.

+ +

En este ejemplo en vivo, tenemos elementos flexibles,   organizados simplemente en una fila con los valores básicos de flexión, y  la clase  push  tiene margin-left: auto. Puedes intentar eliminarlo o agregar la clase a otro elemento para ver cómo funciona.

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Futuras caracteristicas de alineación para  Flexbox

+ +

Al principio de este artículo, expliqué que las propiedades de alineación actualmente contenidas en la especificación de flexbox de Nivel 1 también se incluyen en el Nivel de Alineación de Casillas 3, que puede extender estas propiedades y valores en el futuro. Ya hemos visto un lugar donde esto ha sucedido, con la introducción del space-evenly para las propiedades de align-content y justify-content.

+ +

 El módulo de alineación de cuadro también incluye otros métodos para crear espacio entre elementos, como la función de column-gap y ow-gap, como se ve en el  Diseño de rejillas de CSS. La inclusión de estas propiedades en la Alineación de cajas significa que en el futuro también deberíamos poder utilizar column-gap y row-gap  tambien en diseños flexibles. Esto significará que no tendremos  que usar márgenes para espaciar los elementos flexibles.

+ +

 Mi sugerencia al explorar en profundidad la alineación de flexbox es hacerlo conjuntamente con  la alineación en Diseño de rejillas. Ambas especificaciones utilizan las propiedades de alineación que se detallan en la especificación de  Alineación de cajas. Puede ver cómo se comportan estas propiedades cuando se trabaja con una cuadrícula en el artículo de MDN Alineación de cajas  , y también he comparado cómo funciona la alineación en estas especificaciones en mi Hoja de trucos de alineacion de cajas.

+ + + +

Ver también

+ + diff --git a/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..ca416812f3 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,112 @@ +--- +title: Compatibilidad con versiones anteriores de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +
{{CSSRef}}
+ +

Flexbox es muy compatible con los navegadores modernos, sin embargo, hay algunos problemas con los que puede encontrarse. En esta guía, veremos qué tan bien se admite flexbox en los navegadores, y veremos algunos posibles problemas, recursos y métodos para crear soluciones y fallos.

+ +

La historia de flexbox

+ +

Al igual que con todas las especificaciones CSS, la especificación Flexbox experimentó una gran cantidad de cambios antes de convertirse en la Recomendación de Candidato que tenemos hoy. Como recomendación de un candidato, no deberíamos ver grandes cambios en este punto de la especificación, sin embargo, este no ha sido el caso con las iteraciones anteriores de flexbox.

+ +

Flexbox se implementó de forma experimental en varios navegadores web. En ese momento, el método para crear implementaciones experimentales era utilizar un prefijo de proveedor. La idea de estos prefijos era permitir que las implementaciones de la especificación fueran probadas y exploradas por ingenieros de navegadores y desarrolladores web por igual sin chocar con otras implementaciones. La idea no era utilizar las implementaciones experimentales en el código de producción. Sin embargo, los prefijos finalmente se usaron en el código de producción, y los cambios en la especificación experimental hicieron que las personas necesitaran actualizar sus sitios para mantenerse al día.

+ +

En 2009 , la especificación se veía bastante diferente. Para crear un contenedor flexible, usaría display: box y había una serie de propiedades box-* , que hicieron cosas que reconocerá hoy en flexbox.

+ +

Hubo una actualización de la especificación que actualizó la sintaxis para display: flexbox : esto fue nuevamente prefijado por el proveedor.

+ +

Finalmente, la especificación se actualizó para definir display: flex como la forma de crear un contenedor de flex. El soporte del navegador para la versión actualizada de la especificación es excelente a partir de este momento.

+ +

Existen algunos artículos antiguos que hacen referencia a las versiones anteriores de flexbox, que son bastante fáciles de identificar debido al cambio en la forma en que se crea un contenedor flexible. Si encuentra algo que se refiere a display: box o display: flexbox esta es información desactualizada.

+ +

Estado en navegadores

+ +

La compatibilidad del navegador para flexbox es excelente, y la mayoría de los navegadores no necesitan un prefijo en este momento. Safari fue el último de los principales navegadores en eliminar los prefijos, con el lanzamiento de Safari 9 en 2015. Los dos navegadores que aún debe tener en cuenta para la compatibilidad entre navegadores son:

+ +
    +
  • Internet Explorer 10, que implementó la versión display: flexbox de la especificación con el prefijo -ms- .
    • +
  • UC Browser, que aún admite la versión 2009 display: box versión de display: box solo con el prefijo -webkit- .
    • +
+ +

Tenga en cuenta también que Internet Explorer 11 es compatible con la display: flex moderna display: flex especificación display: flex sin embargo, tiene una serie de errores en la implementación.

+ +

Problemas comunes

+ +

La mayoría de los problemas con flexbox se relacionan con los cambios en la especificación, tal como se ha desarrollado, y el hecho de que muchos de nosotros intentamos usar una especificación experimental en la producción. Si está tratando de garantizar la compatibilidad con versiones anteriores de los navegadores, y en particular IE10 y 11, el sitio Flexbugs es un recurso útil. Verá que muchos de los errores enumerados se aplican a las versiones antiguas del navegador y se corrigen en los navegadores actuales. Cada uno de los errores tiene una solución alternativa que puede ahorrarle muchas horas de desconcierto.

+ +

Si desea incluir navegadores muy antiguos con soporte de flexbox, puede incluir los prefijos de proveedor en su CSS además de la versión no prefijada. Esto se está volviendo cada vez menos un requisito hoy en día, ya que el apoyo es generalizado.

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Autoprefixer Online es una forma útil de ver qué prefijos se recomiendan, dependiendo de cuántas versiones desee volver con el soporte del navegador. También puede consultar ¿Puedo usar? Para obtener información sobre cuándo se eliminaron los prefijos en los navegadores para tomar su decisión.

+ +

Técnicas de respaldo útiles

+ +

Dado que el uso de flexbox se inicia con el valor de la propiedad de display , cuando se necesita admitir navegadores muy antiguos que no admiten flexbox en absoluto, se pueden crear fallos sobrescribiendo un método de diseño con otro. La especificación define lo que sucede si usa otros métodos de diseño en un elemento que luego se convierte en un elemento flexible.

+ +

Floated items

+ +
+

"Flotar y despejar no crea flotación o espacio libre del elemento flexible, y no lo saque del flujo". 3. Contenedores flexibles

+
+ +

En el siguiente ejemplo en vivo, floté dos bloques y luego configuré display: flex en el contenedor. Los artículos ahora son artículos flexibles, lo que significa que se estiran a la misma altura. Cualquier comportamiento de flotación no se aplica.

+ +

Puede probar el comportamiento alternativo eliminando display: flex del contenedor.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+ +

display: inline-block

+ +

Una vez que un elemento de inline-block convierte en un elemento flexible, se block y, por lo tanto, el comportamiento de la display: inline-block como preservar el espacio en blanco entre elementos ya no se aplica.

+ +

Eliminar display: flex para ver el comportamiento de reserva. Verá un espacio en blanco agregado entre los elementos, que es lo que sucede cuando se usa display: inine-block ya que prefiere el espacio en blanco como otros elementos en línea.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+ +

display: table-

+ +

Las propiedades de visualización de la tabla CSS son potencialmente muy útiles como respaldo, debido al hecho de que permiten patrones de diseño como columnas de altura completa y centrado vertical y funcionan hasta Internet Explorer 8.

+ +

Si usa display: table-cell en un elemento en su HTML, toma el estilo de una celda de tabla HTML. CSS crea cuadros anónimos para representar estos elementos para que no necesite envolver cada elemento en un contenedor para representar la fila de la tabla HTML, y un segundo para representar el elemento de la tabla en sí. No puede ver ni diseñar estos cuadros anónimos; Están allí para arreglar el árbol.

+ +

Si luego declara display: flex en el elemento principal, estos cuadros anónimos no se crean y, por lo tanto, su elemento sigue siendo un elemento secundario directo y puede convertirse en un elemento flexible, perdiendo cualquiera de las funciones de visualización de la tabla.

+ +
+

“Nota: algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original. Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima. Por ejemplo, dos elementos flexibles contiguos con pantalla: table-cell se convertirán en dos pantallas separadas: elementos flexibles de bloque, en lugar de estar envueltos en una sola tabla anónima. "- 4. Elementos Flexibles

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+ +

The vertical-align property

+ +

El siguiente ejemplo en vivo demuestra el uso de la propiedad de vertical-align junto con display: inline-block . Tanto display: table-cell como display: inline-block permiten el uso de esta propiedad. El uso de vertical-align vertical permite la alineación vertical antes de flexbox. Flexbox ignora la propiedad, por lo que puede usarla junto con display: table-cell o display: inline-block como respaldo y luego usar de forma segura las propiedades de alineación de caja en flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+ +

Consultas de funciones y flexbox

+ +

Puede usar consultas de funciones para detectar la compatibilidad con flexbox:

+ +
@supports (display: flex) {
+  // code for supporting browsers
+}
+ +

Tenga en cuenta que Internet Explorer 11 no admite consultas de funciones, pero sí admite flexbox. Si decide que la implementación de IE11 es demasiado defectuosa y desea servirle el diseño alternativo, entonces podría usar consultas de características para servir las reglas de flexbox solo a aquellos navegadores con un buen soporte de flexbox. Recuerde que si desea incluir versiones de navegadores que tengan flexbox prefijado por el proveedor, deberá incluir la versión prefijada en su consulta de características. La siguiente consulta de características incluiría UC Browser, que admite consultas de características y sintaxis antigua de flexbox, con el prefijo:

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}
+ +

Para obtener más información sobre el uso de consultas de características, consulte Uso de consultas de características en CSS en el blog Mozilla Hacks.

+ +

Conclusión

+ +

Si bien pasé algún tiempo en esta guía analizando posibles problemas y retrocesos, flexbox está muy listo para que lo use en el trabajo de producción. Esta guía lo ayudará en aquellos casos en los que encuentre un problema o tenga el requisito de admitir navegadores antiguos.

diff --git a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html new file mode 100644 index 0000000000..9048cbb739 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html @@ -0,0 +1,133 @@ +--- +title: Casos de uso típicos de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.

+ +

¿Por qué elegir flexbox?

+ +

En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra.  Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en Relación de Flexbox con respecto a otros métodos de diseño, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.

+ +

En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.

+ + + +

Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.

+ +

Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.

+ +

Espacio distribuido fuera de los elementos

+ +

Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en Alinear elementos en un contenedor flexible, que trata sobre la alineación de elementos en el eje principal.

+ +

En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando justify-content: space-between crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor space-around, o, donde sea compatible, space-evenly. También puede usar flex-start para colocar el espacio al final de los elementos, flex-end para colocarlo delante de ellos, o center para centrar los elementos de navegación.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

Espacio distribuido dentro de los elementos

+ +

Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en Control la proporción de elementos flexibles a lo largo del eje principal.

+ +

Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar flex: auto, que es la abreviatura de flex: 1 1 auto, todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.

+ +

En el ejemplo en vivo a continuación, intente cambiar flex: auto a flex: 1. Esta es la abreviatura de flex: 1 1 0 y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ + + +

Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.

+ +

Aquí estamos utilizando la técnica de márgenes automáticos descrita en Uso de márgenes automáticos para la alineación del eje principal. Los elementos se alinean en el eje principal con flex-start ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.

+ +

También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades gap de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrar elemento

+ +

Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.

+ +

Puedes jugar con la alineación, alineando el elemento con el inicio con flex-start o al final con flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice align-items en el elemento principal o apunte el propio elemento de flexión con align-self.

+ + + +

Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.

+ +

Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con  {{cssxref ("flex-direction")}} :column. A continuación, configuramos el área de contenido con flex: 1, que es la abreviatura de flex: 1 1 0; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad flex del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Objetos multimedia

+ +

El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.

+ +

Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.

+ +

En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con flex-start, y luego establezco el elemento flex .content a flex: 1. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar flex: 1 significa que esta parte de la tarjeta puede crecer.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.

+ +

Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una flex-basis de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a flex: 1, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para flex: auto, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para flex: 1 y el lado del contenido para flex: 3. Esto significará que usan una flex-basis de 0, pero distribuye ese espacio a diferentes proporciones según el factor flex-grow que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía Controlando las proporciones de elementos de flexión a lo largo del eje principal.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Volteando el objeto multimedia

+ +

Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad flex-direction configurada para row-reverse. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase flipped junto con la clase existente .media. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Controles de formulario

+ +

Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.

+ +

Conclusión

+ +

Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.

+ +

Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.

diff --git a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html new file mode 100644 index 0000000000..38e89c7813 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html @@ -0,0 +1,227 @@ +--- +title: Conceptos Básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.

+ +

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

+ +

Los dos ejes de flexbox

+ +

Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.

+ +

El eje principal

+ +

El eje principal está definido por flex-direction, que posee cuatro posibles valores:

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

Si elegimos row o row-reverse, el eje principal correrá a lo largo de la fila según la dirección de la línea .

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Al elegir column o column-reverse el eje principal correrá desde el borde superior de la página hasta el final — según la dirección del bloque.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

El eje cruzado

+ +

El eje cruzado va perpendicular al eje principal, y por lo tanto si flex-direction (del eje principal) es row o row-reverse el eje cruzado irá por las columnas.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Si el eje principal es column o column-reverse entonces el eje cruzado corre a lo largo de las filas.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.

+ +

Líneas de inicio y de fin

+ +

Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.

+ +

Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.

+ +

Si flex-direction es row y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.

+ +

Working in English the start edge is on the left.

+ +

Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.

+ +

The start edge in a RTL language is on the right.

+ +

En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.

+ +

Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.

+ +

El contenedor flex

+ +

Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.

+ +
    +
  • Los ítems se despliegan sobre una fila (la propiedad flex-direction por defecto es row).
    • +
  • Los ítems empiezan desde el margen inicial sobre el eje principal.
    • +
  • Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.
    • +
  • Los ítems se ajustarán para llenar el tamaño del eje cruzado.
    • +
  • La propiedad {{cssxref("flex-basis")}} es definida como auto.
    • +
  • La propiedad {{cssxref("flex-wrap")}} es definida como nowrap.
    • +
+ +

El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.

+ +

Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Cambiar flex-direction

+ +

Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando flex-direction: row-reverse se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.

+ +

Si cambiamos flex-direction a column el eje principal se cambiará y los ítems aparecerán en una columna. Colocando column-reverse las líneas de inicio y fin serán nuevamente puestas al revés.

+ +

El ejemplo en vivo de abajo tiene flex-direction puesto como row-reverse. Pruebe los otros valores — row, column y column-reverse — para ver qué sucede con el contenido.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Contenedores flex Multi-línea con flex-wrap

+ +

Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.

+ +

Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor wrap. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando flex-wrap se coloca como wrap, los ítems se repartirán. Al colocarlo como nowrap, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar nowrap los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

La abreviatura flex-flow

+ +

Se pueden combinar las propiedades flex-direction y flex-wrap en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es flex-direction y el segundo valor es flex-wrap.

+ +

En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para flex-direction - row, row-reverse, column o column-reverse, y cambie también el segundo valor por wrap y nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Propiedades aplicadas a los ítems flex

+ +

Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.

+ +

Antes de darle sentido a estas propiedades debemos considerar el concepto de espacio disponible. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.

+ +

Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.

+ +

This flex container has available space after laying out the items.

+ +

Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades flex que aplicaremos a dichos ítems.

+ +

La propiedad flex-basis

+ +

Con flex-basis se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es auto — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como flex-basis.

+ +

Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado display: flex en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.

+ +

La propiedad flex-grow

+ +

Con la propiedad flex-grow definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de flex-basis. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.

+ +

Si le damos a todos los ítems del ejemplo anterior un valor flex-grow de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.

+ +

Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor flex-grow de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem  (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).

+ +

La propiedad flex-shrink

+ +

Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal, la propiedad flex-shrink controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y flex-shrink posee un valor entero positivo, el ítem puede contraerse a partir de flex-basis. Así como podemos asignar diferentes valores de flex-grow con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de flex-shrink se contraerá más rápido que sus hermanos que poseen valores menores.

+ +

El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.

+ +
+

Nótese que los valores de flex-grow y flex-shrink son proporciones. Típicamente si pusiéramos todos los ítems flex: 1 1 200px y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: 2 1 200px. Aunque igualmente podemos colocar flex: 10 1 200px y flex: 20 1 200px si quisiéramos.

+
+ +

Valores abreviados para las propiedades flex

+ +

Difícilmente veremos la propiedades flex-grow, flex-shrink y flex-basis usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación flex permite establecer los tres valores en este orden: flex-grow, flex-shrink, flex-basis.

+ +

El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es flex-grow. Dándole un valor positivo significa que el ítem puede crecer. El segundo es flex-shrink — con un valor positivo los ítems pueden contraerse. El valor final es flex-basis; este es el valor que los ítems usan como valor base para crecer y contraerse.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

+ +

Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <positive-number>
    • +
+ +

Fijando flex: initial el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que flex: 0 1 auto. En este caso el valor de flex-grow is 0, así que los ítems no crecerán más de su tamaño flex-basis . El valor flex-shrink es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de flex-basis es auto. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.

+ +

Usar flex: auto es lo mismo que usar flex: 1 1 auto , es como con flex:initial pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.

+ +

Al usar flex: none se crearán ítems flex totalmente inflexibles. Es como escribir flex: 0 0 auto. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con flex-basis en auto.

+ +

Una abreviación que es común en tutoriales es flex: 1 o flex: 2  y más. Es como usar flex: 1 1 0. Los ítems pueden crecer o encoger con un flex-basis de 0.

+ +

Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}

+ +

Alineación, justificación y distribución del espacio libre entre ítems

+ +

Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.

+ +

align-items

+ +

La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.

+ +

El valor inicial para esta propiedad es stretch razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.

+ +

En cambio definimos align-items como flex-start para que los ítems se alineen al comienzo del contenedor flex, flex-end para alinearlos al final, o center para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo flex-direction define la dirección del flujo. El valor inicial es flex-start que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como flex-end para alinearlos al final, o center para alinearlos al centro.

+ +

También podemos usar space-between para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor space-around para crear un espacio equitativo a la derecha e izquierda de cada ítem.

+ +

Pruebe con los siguientes valores dejustify-content en el ejemplo en vivo:

+ +
    +
  • space-evenly
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.

+ +

Próximos pasos

+ +

Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.

diff --git a/files/es/web/css/css_flexible_box_layout/index.html b/files/es/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..b39db24d68 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: Diseño de caja flexible CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +

{{CSSRef}}

+ +

El diseño CSS Flexbox es un módulo de CSS que define un modelo de caja, optimizado para el diseño de interfaces de usuario. En el diseño flex, los nodos hijo se pueden distribuir en dirección vertical u horizontal y se pueden "flexibilizar" sus tamaños, bien sea rellenando el espacio disponible o encogiéndose para evitar salirse del contorno del nodo padre. Se puede manipular fácilmente tanto la alineación horizontal como la vertical, de los nodos hijo. La anidación de estas cajas (horizontal dentro de vertical o vertical dentro de horizontal) se puede usar para construir diseños en dos dimensiones.

+ +

Ejemplo Básico

+ +

En el siguiente ejemplo, se ha definido un contenedor como display: flex, lo que significa que los tres elementos hijo se convierten en elementos flexibles. El valor de justify-content se ha establecido en space-between para espaciar los elementos de manera uniforme en el eje principal. Se ha colocado una cantidad igual de espacio entre cada elemento, con los elementos izquierdo y derecho alineados con los bordes del contenedor flexible. También puede ver que los elementos se estiran en el eje transversal, debido a que el valor predeterminado de align-items es stretch. Los elementos se extienden hasta la altura del contenedor flexible, por lo que cada uno de ellos tiene tanta altura como el elemento más alto.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

Propiedades de alineación

+ +

Las propiedades align-content, align-self, align-items y justify-content aparecieron inicialmente en la especificación de Flexbox, pero ahora están definidas en Alineación de cuadro y la especificación de Flexbox las refiere a la Especificación de alineación de cuadro para definiciones actualizadas. Las propiedades de alineación adicionales también se definen en Alineación de cuadro.

+ +
+
    +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Entradas del glosario

+ +
+ +
+ +

Guías

+ +
+
Conceptos básicos de Flexbox
+
Una visión general de las características de flexbox
+
Relación de flexbox con otros métodos de diseño.
+
Cómo flexbox se relaciona con otros métodos de diseño y otras especificaciones de CSS
+
Alinear elementos en un contenedor flexible
+
Cómo funcionan las propiedades de Alineación de cuadro con flexbox.
+
Ordenando elementos flex
+
Explicando las diferentes formas de cambiar el orden y la dirección de los elementos, y cubriendo los problemas potenciales al hacerlo.
+
Control de proporción de elementos flex a lo largo del eje principal
+
Este artículo explica las propiedades de flex-grow, flex-shrink y flex-basis.
+
Dominar el envoltorio de elementos flex
+
Cómo crear contenedores flex con múltiples líneas y controlar la visualización de los elementos en esas líneas.
+
Casos de uso típicos de flexbox
+
Patrones de diseño comunes que son los típicos casos de uso de flexbox.
+
Compatibilidad con versiones anteriores de Flexbox
+
Estado del navegador de flexbox, problemas de interoperabilidad y compatibilidad con navegadores antiguos y versiones de la especificación
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial.
+ +

Ver también

+ +
+
Flexbugs
+
una lista comisariada por la comunidad de errores y soluciones del navegador Flexbox
+
Combinaciones (Mixins) Flexbox para varios navegadores
+
Este artículo proporciona un conjunto de combinaciones(mixins)para aquellos que desean crear experiencias de flexbox en varios navegadores que incluso funcionan en navegadores antiguos que no admiten la sintaxis moderna de flexbox.
+
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 new file mode 100644 index 0000000000..95804a5da2 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html @@ -0,0 +1,190 @@ +--- +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 +--- +

{{CSSRef}}

+ +

Usar flexbox puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, el posicionamiento absoluto, y los hacks de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de CSS. Algunos ejemplos básicos de casos de uso:

+ +
    +
  • Quieres centrar un elemento en la mitad de una página
    • +
  • Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro
    • +
  • Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla
    • +
+ +

Este artículo sólo aborda el uso de flexbox con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee la guía más general para usar cajas flexibles de CSS.

+ +

Conceptos básicos

+ +

Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como flex y luego dando a la propiedad {{cssxref("flex-flow")}} el valor row, si deseas que los elementos fluyan horizontalmente, o el valor column, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor wrap.

+ +

Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:

+ +
    +
  • Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza flex: none que se expande a 0 0 auto.
    • +
  • Si deseas explícitamente dimensionar un elemento, usa flex: 0 0 tamaño. Por ejemplo: flex 0 0 60px.
    • +
  • 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 flex: auto. Se expande a 1 1 auto.
    • +
+ +

Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.

+ +

Centrando un elemento en una página

+ +

Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.

+ +

Contenido CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+
+ +

Contenido HTML

+ +
<div class="vertical-box">
+  <div class="spacer"></div>
+  <div class="centered-element horizontal-box">
+    <div class="spacer"></div>
+    <div class="centered-element">Centered content</div>
+     <div class="spacer"></div>
+  </div>
+  <div class="spacer"></div>
+</div>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}

+ +

Haciendo fluir verticalmente un conjunto de contenedores

+ +

Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como auto y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como none.

+ +

Contenido CSS

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+
+ +

Contenido HTML

+ +
<div id="document" class="vertical-box">
+  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
+  <div id="flexible-content" class="flexible-size"></div>
+  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
+</div>
+
+ +

Contenido JavaScript

+ +
var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height > 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height < 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}

+ +

Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.

+ +

Creando un contenedor que colapse horizontalmente

+ +

En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor wrap.

+ +

Contenido CSS

+ +
.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+ +

Contenido HTML

+ +
<div id="container" class="horizontal-container">
+  <div class="fixed-size">Element 1</div>
+  <div class="fixed-size">Element 2</div>
+  <div class="fixed-size">Element 3</div>
+</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
+
+ +

Contenido JavaScript

+ +
var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width > 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width < 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}

+ +

Ver también

+ + diff --git a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html new file mode 100644 index 0000000000..7046347011 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html @@ -0,0 +1,375 @@ +--- +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 +--- +
{{CSSRef}}
+ +

La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

+ +

Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.

+ +
Nota: Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo -webkit; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.
+ +

El concepto de "cajas flexibles"

+ +

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

+ +

El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.

+ +

Vocabulario de "cajas flexibles"

+ +

Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una flex-direction de tipo row, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.

+ +

flex_terms.png

+ +
+
Contenedor flexible (Flex container)
+
El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores flex o inline-flex en la propiedad display.
+
Elemento flexible (Flex item)
+
+

Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.

+
+
Ejes
+
+

Cada diseño de "caja flexible" sigue dos ejes. El eje principal es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El eje secundario es el eje perpendicular al eje principal.

+ +
    +
  • La propiedad flex-direction establece el eje principal.
    • +
  • La propiedad justify-content define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.
    • +
  • La propiedad align-items define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.
    • +
  • La propiedad align-self define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por align-items.
    • +
+
+
Direcciones
+
+

Los lados inicio principal/fin principal (main start/main end) e inicio secundario/fin secundario (cross start/cross end) del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por writing-mode (izquierda-a-derecha, derecha-a-izquierda, etc.).

+ +
    +
  • La propiedad order asigna elementos a grupos ordinales y determina qué elementos aparecen primero.
    • +
  • La propiedad flex-flow combina las propiedades flex-direction y flex-wrap para colocar los elementos flexibles.
    • +
+
+
Líneas
+
+

Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad flex-wrap, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.

+
+
Dimensiones
+
+

Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son tamaño principal (main size) and tamaño secundario (cross size), que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.

+ +
    +
  • La propiedades min-height y min-width tienen un nuevo valor, auto que establece el tamaño mínimo de un elemento flexible.
    • +
  • La propiedad flex combina las propiedades flex-basis, flex-grow, y flex-shrink para establecer el grado de flexibilidad de los elementos flexibles.
    • +
+
+
+ +

Diseñando una "caja flexible"

+ +

Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad display así:

+ +
display : flex
+ +

o

+ +
display : inline-flex
+ +

Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor flex hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor inline-flex hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.

+ +
Nota: Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, display : -webkit-flex.
+ +

Consideraciones de los elementos flexibles

+ +

El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad display:none.

+ +

Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del inicio principal (main start) de su contenedor flexible.

+ +

Actualmente, debido a un problema conocido, asignar visibility:collapse a un elemento flexible causa que sea tratado como si fuera display:none en vez de lo que se supone que debería ocurrir, es decir, como si fuera visibility:hidden. La alternativa mientras se resuelve este problema es usar visibility:hidden para elementos flexibles que deban comportarse como visibility:collapse.

+ +

Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes auto se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver Aligning with 'auto' margins en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.

+ +

Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa min-width:auto y/o min-height:auto. Para los elementos flexibles, el valor de atributo auto calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}}  y {{cssxref("min-height")}} para más detalles al respecto.

+ +

Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades align-, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades justify-, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar justify-content con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "centrado-basado-en-márgenes" en el eje principal al reemplazar la propiedad justify-content.

+ +

Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. 

+ +

Propiedades de las "cajas flexibles"

+ +

Propiedades que no afectan a las "cajas flexibles"

+ +

Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.

+ +
    +
  • Propiedades column-* del Módulo Multicol no tienen ningún efecto en un elemento flexible.
    • +
  • {{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar float causa que la propiedad display del elemento se comporte como block.
    • +
  • {{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.
    • +
+ +

Ejemplos

+ +

Ejemplo básico "flex"

+ +

Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. 

+ +
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>
+ +

Ejemplo de "Diseño del Santo Gríal"

+ +

Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.

+ +

HolyGrailLayout.png

+ +

Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.

+ +
​
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-flow: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>
+ +

Área de juego

+ +

Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:

+ + + +

Cosas a tener en mente

+ +

El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".

+ +

Las "cajas flexibles" se comportan en función del modo de escritura establecido. Esto siginifica que inicio principal (main start) y fin principal (main end) se disponen de según la posición de inicio (start) y fin (end).

+ +

inicio secundario (cross start) y fin secundario (cross end) confían en la definición de la posición inicio (start) o antes (before) que depende del valor de direction.

+ +

Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad break- lo permita. Las propiedades CSS3 break-after, break-before y break-inside así como las propiedades CSS 2.1 page-break-before, page-break-after y page-break-inside se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.

+ +

Compatibilidad de Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaraterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
+ {{ CompatGeckoDesktop("22.0") }}		21.0{{ property_prefix("-webkit") }}10{{ property_prefix("-ms") }}(partial)12.13.1{{ property_prefix("-webkit") }}(partial)
+ 6.1{{ property_prefix("-webkit") }}
+ 9
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaraterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
+ {{ CompatGeckoMobile("22.0") }}		{{ CompatUnknown() }}10{{ property_prefix("-ms") }}(partial)
+ 11		12.1 +

3.2{{ property_prefix("-webkit") }}(partial)
+ 7.1{{ property_prefix("-webkit") }}
+ 9.0

+
+
+ +

Notas

+ +

[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.

+ +

[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a true.

+ +

[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.

+ +

[4] Mientras que en la implementación inicial en Opera 12.10 flexbox no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.

+ +

[5] Hasta Firefox 29, especificar visibility: collapse en un elemento flex causaba que fuera tratado como si fuera display: none en vez del comportamiento pretendido, tratándolo como si fuera visibility: hidden. El método alternativo sugerido es usar visibility: hidden para los elementos flex que debieran comportarse como si huberan sido designados visibility: collapse. Para más información, ver {{bug(783470)}}.

+ +

Ver también

+ +
    +
  • El Proyecto Flexbugs para información de errores en implementación de flexbox en navegadores.
    • +
diff --git a/files/es/web/css/css_flow_layout/index.html b/files/es/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..45daafc7a4 --- /dev/null +++ b/files/es/web/css/css_flow_layout/index.html @@ -0,0 +1,43 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +translation_of: Web/CSS/CSS_Flow_Layout +--- +
{{CSSRef}}
+ +

El Flujo Normal, o también Flow Layout, es la forma en que los elementos de línea y de bloque son presentados en una página sin que haya cambios en su diseño. El flujo es esencialmente un grupo de elementos que se perciben entre sí e interactúan entre ellos en nuestro diseño. Cuando uno de ellos se encuentra fuera del flujo, éste se comporta de manera independiente.

+ +

In normal flow, inline elements display in the inline direction, that is in the direction  words are displayed in a sentence according to the Writing Mode of the document. Block elements display one after the other, as paragraphs do in the Writing Mode of that document. In English therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page.

+ +

Ejemplo Básico

+ +

The following example demonstrates Block and Inline Level boxes. The two paragraph elements with a green border are Block Level, displaying one under the other.

+ +

The first sentence also includes a span element with a blue background. This is inline level and therefore displays in place in the sentence.

+ +

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

+ +

Guides

+ + + +

Reference

+ +

Glossary Entries

+ +
    +
  • {{Glossary("Block/CSS", "Block (CSS)")}}
    • +
+ + diff --git a/files/es/web/css/css_fonts/index.html b/files/es/web/css/css_fonts/index.html new file mode 100644 index 0000000000..f3d6ebe59a --- /dev/null +++ b/files/es/web/css/css_fonts/index.html @@ -0,0 +1,148 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +tags: + - CCS + - CSS Fonts + - Reference +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS Fonts es el modulo CSS que define todo lo relacionado con los recursos tipográficos, sus propiedades y como son cargados. Permite definir el estilo de una fuente, su familia tipográfica, tamaño o peso, y las variantes que puede tener la fuente. También permite definir la altura de una línea.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-family")}}
    • +
  • {{cssxref("font-feature-settings")}}
    • +
  • {{cssxref("font-kerning")}}
    • +
  • {{cssxref("font-language-override")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("font-size-adjust")}}
    • +
  • {{cssxref("font-stretch")}}
    • +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-weight")}}
    • +
  • {{cssxref("line-height")}}
    • +
+
+ +

Atributos

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

Guia

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}} 
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}} +

Definición
+ inicial

+
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.0 (1.0)3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte
+ básico		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html new file mode 100644 index 0000000000..3b0aac0c26 --- /dev/null +++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -0,0 +1,613 @@ +--- +title: Colocación automática en diseño de cuadrícula CSS +slug: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout +--- +

Además de la capacidad de colocar elementos con precisión en una cuadrícula creada, la especificación de diseño de cuadrícula CSS contiene reglas que controlan lo que sucede cuando crea una cuadrícula y no coloca algunos o todos los elementos secundarios. Puede ver la colocación automática en acción de la manera más simple creando una cuadrícula en un conjunto de elementos. Si no proporciona información de ubicación a los elementos, se colocarán en la cuadrícula, uno en cada celda de la cuadrícula.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+}
+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_1', '500', '230') }}

+
+ +

Reglas predeterminadas para la colocación automática

+ +

Como puede ver con el ejemplo anterior, si crea una cuadrícula, todos los elementos secundarios se colocarán uno en cada celda de la cuadrícula. El flujo predeterminado es organizar los elementos por fila. La cuadrícula colocará un elemento en cada celda de la fila 1. Si ha creado filas adicionales utilizando la propiedad grid-template-rows , entonces grid continuará colocando elementos en estas filas. Si la cuadrícula no tiene suficientes filas en la cuadrícula explícita para colocar todos los elementos, se crearán nuevas filas implícitas .

+ +

Dimensionar filas en la cuadrícula implícita

+ +

El valor predeterminado para las filas creadas automáticamente en la cuadrícula implícita es que tengan el tamaño automático. Esto significa que contendrán el contenido agregado a ellos sin causar un desbordamiento.

+ +

Sin embargo, puede controlar el tamaño de estas filas con la propiedad grid-auto-rows . Para hacer que todas las filas creadas tengan 100 píxeles de alto, por ejemplo, usaría:

+ + + +
+ + +
<div class="wrapper">
+    <div>One</div>
+    <div>Two</div>
+    <div>Three</div>
+    <div>Four</div>
+    <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+ +

{{ EmbedLiveSample('placement_2', '500', '330') }}

+
+ +

Puede usar minmax() en su valor para grid-auto-rows permite la creación de filas de un tamaño mínimo pero luego crecer para ajustarse al contenido si es más alto.

+ +
+ + +
<div class="wrapper">
+     <div>One</div>
+     <div>Two</div>
+     <div>Three</div>
+     <div>Four
+     <br>This cell
+     <br>Has extra
+     <br>content.
+     <br>Max is auto
+     <br>so the row expands.
+     </div>
+     <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ +

{{ EmbedLiveSample('placement_3', '500', '330') }}

+
+ +

También puede pasar una lista de pistas, esto se repetirá. La siguiente lista de pistas creará una pista de fila implícita inicial como 100 píxeles y una segunda como 200px píxeles. Esto continuará mientras se agregue contenido a la cuadrícula implícita. Las listas de seguimiento no son compatibles con Firefox.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px 200px;
+}
+
+ +

{{ EmbedLiveSample('placement_4', '500', '330') }}

+
+ +

Colocación automática por columna

+ +

También puede pedirle a la cuadrícula que coloque automáticamente los elementos por columna. Usando la propiedad grid-auto-flow con un valor de column . En este caso, la cuadrícula agregará elementos en las filas que haya definido utilizando grid-template-rows . Cuando llena una columna, se moverá a la siguiente columna explícita o creará una nueva pista de columna en la cuadrícula implícita. Al igual que con las pistas de fila implícitas, estas pistas de columna tendrán el tamaño automático. Puede controlar el tamaño de las pistas de columna implícitas con grid-auto-columns , esto funciona de la misma manera que grid-auto-rows .

+ +

En el siguiente ejemplo, he creado una cuadrícula con tres pistas de fila de 200 píxeles de altura. Estoy colocando automáticamente por columna y las columnas creadas tendrán un ancho de columna de 300 píxeles, luego un ancho de columna de 100 píxeles hasta que haya suficientes pistas de columna para contener todos los elementos.

+ + + +
+
.wrapper {
+    display: grid;
+    grid-template-rows: repeat(3, 200px);
+    grid-gap: 10px;
+    grid-auto-flow: column;
+    grid-auto-columns: 300px 100px;
+}
+
+ + + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+</div>
+
+ +

{{ EmbedLiveSample('placement_5', '500', '640') }}

+
+ +

El orden de los artículos colocados automáticamente

+ +

Una cuadrícula puede contener una mezcla de elementos. Algunos de los elementos pueden tener una posición en la cuadrícula, pero otros pueden colocarse automáticamente. Esto puede ser útil, si tiene un orden de documentos que refleja el orden en que los elementos se ubican en la cuadrícula, es posible que no necesite escribir reglas CSS para colocar absolutamente todo. La especificación contiene una sección larga que detalla el algoritmo de colocación de elementos de la cuadrícula , sin embargo, para la mayoría de nosotros solo necesitamos recordar algunas reglas simples para nuestros elementos.

+ +

Pedido de documentos modificados

+ +

La cuadrícula coloca los elementos a los que no se les ha asignado una posición de cuadrícula en lo que se describe en la especificación como "orden de documento modificado de orden". Esto significa que si ha utilizado la propiedad del order , los artículos se colocarán por ese orden, no por su orden DOM. De lo contrario, permanecerán de forma predeterminada en el orden en que se ingresan en el origen del documento.

+ +

Artículos con propiedades de colocación

+ +

Lo primero que hará la cuadrícula es colocar cualquier elemento que tenga una posición. En el siguiente ejemplo, tengo 12 elementos de cuadrícula. El elemento 2 y el elemento 5 se han colocado utilizando una colocación basada en líneas en la cuadrícula. Puede ver cómo se colocan esos elementos y luego los otros elementos se colocan automáticamente en los espacios. Los artículos colocados automáticamente se colocarán antes de los artículos colocados en orden DOM, no comienzan después de la posición de un artículo colocado que viene antes que ellos.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_6', '500', '450') }}

+
+ +

Maneja artículos que abarcan pistas

+ +

Puede usar las propiedades de ubicación sin dejar de aprovechar la colocación automática. En el siguiente ejemplo, he agregado al diseño configurando elementos impares para abarcar dos pistas tanto para filas como para columnas. Hago esto con las propiedades grid-column-end y grid-row-end y establezco el valor de esto para span 2 . Lo que esto significa es que la línea de inicio del artículo se establecerá mediante la colocación automática, y la línea final abarcará dos pistas.

+ +

Puede ver cómo esto deja huecos en la cuadrícula, en cuanto a los elementos colocados automáticamente si la cuadrícula se encuentra con un elemento que no cabe en una pista, se moverá a la siguiente fila hasta que encuentre un espacio que el elemento pueda caber en.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+}
+.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+
+ +

{{ EmbedLiveSample('placement_7', '500', '770') }}

+
+ +

Llenando los huecos

+ +

Hasta ahora, aparte de los elementos que hemos colocado específicamente, la cuadrícula siempre avanza y mantiene los elementos en orden DOM. En general, esto es lo que desea, si está diseñando un formulario, por ejemplo, no desea que las etiquetas y los campos se mezclen para llenar un vacío. Sin embargo, a veces, estamos diseñando cosas que no tienen un orden lógico y nos gustaría crear un diseño que no tenga huecos.

+ +

Para hacer esto, agregue la propiedad grid-auto-flow con un valor dense al contenedor. Esta es la misma propiedad que usa para cambiar el orden de flujo a column , por lo que si estuviera trabajando en columnas agregaría ambos valores grid-auto-flow: column dense .

+ +

Una vez hecho esto, la grilla ahora rellenará los huecos, a medida que se mueva a través de la grilla, deja huecos como antes, pero luego, si encuentra un elemento que se ajuste a un hueco anterior, lo recogerá y lo sacará del orden DOM para colóquelo en la brecha. Al igual que con cualquier otro reordenamiento en la cuadrícula, esto no cambia el orden lógico. El orden de tabulación, por ejemplo, seguirá el orden del documento. Examinaremos los posibles problemas de accesibilidad de Grid Layout en una guía posterior, pero debe tener cuidado al crear esta desconexión entre el orden visual y el orden de visualización.

+ +
+ + +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+   <div>Six</div>
+   <div>Seven</div>
+   <div>Eight</div>
+   <div>Nine</div>
+   <div>Ten</div>
+   <div>Eleven</div>
+   <div>Twelve</div>
+</div>
+
+ +
.wrapper div:nth-child(4n+1) {
+  grid-column-end: span 2;
+  grid-row-end: span 2;
+  background-color: #ffa94d;
+}
+ .wrapper div:nth-child(2) {
+   grid-column: 3;
+   grid-row: 2 / 4;
+ }
+ .wrapper div:nth-child(5) {
+   grid-column: 1 / 3;
+   grid-row: 1 / 3;
+}
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 100px;
+  grid-gap: 10px;
+  grid-auto-flow: dense;
+}
+
+ +

{{ EmbedLiveSample('placement_8', '500', '730') }}

+
+ +

Elementos de cuadrícula anónimos

+ +

Hay una mención en la especificación de elementos de cuadrícula anónimos. Estos se crean si tiene una cadena de texto dentro de su contenedor de cuadrícula, que no está envuelta en ningún otro elemento. En el siguiente ejemplo, tenemos tres elementos de cuadrícula, suponiendo que haya configurado el padre con una clase de grid para display: grid . El primero es un elemento anónimo, ya que no tiene un marcado adjunto, este elemento siempre se tratará a través de las reglas de colocación automática. Los otros dos son elementos de cuadrícula encerrados en un div, pueden colocarse automáticamente o puede colocarlos con un método de posicionamiento en su cuadrícula.

+ +
<div class="grid">
+  I am a string and will become an anonymous item
+  <div>A grid item</div>
+  <div>A grid item</div>
+</div>
+
+ +

Los elementos anónimos siempre se colocan automáticamente porque no hay forma de orientarlos. Por lo tanto, si tiene algún texto sin envolver por alguna razón en su cuadrícula, tenga en cuenta que puede aparecer en algún lugar inesperado, ya que se colocará automáticamente de acuerdo con las reglas de colocación automática.

+ +

Casos de uso para la colocación automática

+ +

La colocación automática es útil siempre que tenga una colección de artículos. Pueden ser elementos que no tienen un orden lógico, como una galería de fotos o una lista de productos. En ese caso, puede optar por utilizar el modo de embalaje denso para rellenar los agujeros en su cuadrícula. En mi ejemplo de galería de imágenes tengo algunas imágenes de paisajes y algunas de retratos. He configurado imágenes de paisajes, con una clase de landscape para abarcar dos pistas de columna. Luego uso grid-auto-flow: dense para crear una grilla densamente empaquetada.

+ +
+
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    grid-gap: 10px;
+    grid-auto-flow: dense;
+    list-style: none;
+    margin: 1em auto;
+    padding: 0;
+    max-width: 800px;
+}
+.wrapper li {
+    border: 1px solid #ccc;
+}
+.wrapper li.landscape {
+    grid-column-end: span 2;
+}
+.wrapper li img {
+   display: block;
+   object-fit: cover;
+   width: 100%;
+   height: 100%;
+}
+
+ +
<ul class="wrapper">
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li class="landscape"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+</ul>
+
+ +

{{ EmbedLiveSample('placement_9', '500', '1300') }}

+
+ +

La colocación automática también puede ayudarlo a diseñar elementos de interfaz que tengan un orden lógico. Un ejemplo es la lista de definiciones en el siguiente ejemplo. Las listas de definición son un desafío interesante para el estilo, ya que son planas, no hay nada que envuelva los grupos de elementos dt y dd . En mi ejemplo, estoy permitiendo la colocación automática para colocar los elementos, sin embargo, tengo clases que comienzan un dt en la columna 1, y dd en la columna 2, esto garantiza que los términos vayan de un lado y las definiciones del otro, sin importar cuántos de cada uno que tenemos.

+ +
+ + +
<div class="wrapper">
+   <dl>
+       <dt>Mammals</dt>
+       <dd>Cat</dd>
+       <dd>Dog</dd>
+       <dd>Mouse</dd>
+       <dt>Fish</dt>
+       <dd>Guppy</dd>
+       <dt>Birds</dt>
+       <dd>Pied Wagtail</dd>
+       <dd>Owl</dd>
+   </dl>
+</div>
+
+ +
dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  max-width: 300px;
+  margin: 1em;
+  line-height: 1.4;
+}
+dt {
+  grid-column: 1;
+  font-weight: bold;
+}
+dd {
+   grid-column: 2;
+ }
+
+ +

{{ EmbedLiveSample('placement_10', '500', '230') }}

+
+ +

¿Qué no podemos hacer con la colocación automática (todavía)?

+ +

Hay un par de cosas que a menudo surgen como preguntas. Actualmente no podemos hacer cosas como apuntar a cualquier otra celda de la cuadrícula con nuestros artículos. Es posible que ya se le haya ocurrido un problema relacionado si siguió la última guía sobre líneas con nombre en la cuadrícula. Sería definir una regla que dijera "colocar elementos automáticamente en la siguiente línea llamada" n ", y la cuadrícula se saltaría otras líneas. Se plantea un problema al respecto en el repositorio CSSWG GitHub, y sería bienvenido a agregue sus propios casos de uso a esto.

+ +

Puede ser que se te ocurran tus propios casos de uso para la colocación automática o cualquier otra parte del diseño de la cuadrícula. Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso. Esto ayudará a mejorar las futuras versiones de la especificación.

+ + diff --git a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html new file mode 100644 index 0000000000..445cbac308 --- /dev/null +++ b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -0,0 +1,703 @@ +--- +title: Box alignment in CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout +--- +

Si estás familiarizado con flexbox Entonces ya habrás encontrado la forma en que los items flexibles pueden ser alineados correctamente dentro de un contendor flex. Estas propiedades de alineación que encontramos por primera vez en la especificación de flexbox se han trasladado a una nueva especificación llamada Box Alignment Level 3. Esta especificación tiene detalles de cómo debería funcionar la alineación en todos los diferentes métodos de diseño.

+ +

Cada método de diseño que implemente Box Alignment tendrá algunas diferencias debido a que cada método tiene características y restricciones diferentes (y acciones heredadas), por lo que es imposible hacer la alineación exactamente de la misma forma en todos los ámbitos.  La especificación Box Alignment tiene detalles para cada método, sin embargo, te decepcionaría si intentaras alinear en muchos métodos en este momento, pues el soporte aún no está disponible para todos los navegadores. Donde sí tenemos soporte de navegador para las propiedades de alineación y distribución de espacio de la especificación Box Alignment es en grid layout.

+ +

Esta guía muestra la forma cómo funciona la alineación de cajas (box alignment) en el diseño de cuadriculas (Grid Layout). Verás mucha similitud en cómo funcionan estás propiedades y valores en flexbox. Debido a que la cuadrícula (grid) es bidimensional y flexbox es unidimensional, existen algunas pequeñas diferencias con las que debes tener cuidado. Así que comenzaremos mirando los dos ejes con los que tratamos cuando alineamos cosas en una cuadricula.

+ +

Los 2 ejes de un diseño Grid

+ +

Al trabajar con el diseño de cuadrícula, tienes dos ejes disponibles para alinear las cosas: el eje del bloque (block axis) y el eje en línea (inline axis).  El eje de bloque es el eje sobre el cual se disponen los bloques en el diseño del bloque. Si tienes dos párrafos en tu página, se mostrara uno debajo del otro, entonces es ésta la dirección que describimos como el eje de bloque (también llamadas columnas, eje "y", eje vertical).

+ +

+ +

El eje en línea (inline axis) se ejecuta a través del eje del bloque, es la dirección en la que se ejecuta el texto en el flujo regular en línea (también llamadas filas, Eje "x", eje horizontal). 

+ +

+ +

Podemos alinear el contenido dentro de las áreas de la cuadrícula o rejilla , y los tracks en estos dos ejes.

+ +

Alineación de elementos en el Eje de Bloque 

+ +

Las propiedades {{cssxref("align-self")}} y {{cssxref("align-items")}} controlan la alineación en el eje de bloque. Cuando usamos estas propiedades, estamos cambiando la alineación del elemento dentro del área de la cuadricula (grid) que se ha colocado.

+ +

En el siguiente ejemplo, tengo 4 áreas dentro de mi cuadricula (grid). Puedo usar la propiedad {{cssxref("align-items")}} en el contenedor de la cuadricula (grid container), para alinear los elementos usando uno de los siguientes valores:

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+  align-items: start;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_1', '500', '450') }}

+
+ +

Ten en mente que una vez establezcas align-self: start, la altura de cada hijo <div> será determinada por el contenido del <div>.  Esto está en contraste de omitir align-self completamente, en el cual la altura de cada <div> se extendería hasta llenar el área de la cuadricula.

+ +

La propiedad {{cssxref("align-items")}} establece la propiedad {{cssxref("align-self")}} para todos los elementos hijos de la cuadricula. Esto significa que puedes establecer la propiedad individualmente, usando align-self en cada elemento de la cuadricula.

+ +

En el siguiente ejemplo, estoy usando la propiedad align-self para demostrar los diferentes valores de alineación. La primer área está mostrando la acción por defecto de align-self, el cual es extenderse. El segundo elemento tiene un valor en align-self de start, el tercero end y el cuarto center.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  align-self: start;
+}
+.item3 {
+  grid-area: c;
+  align-self: end;
+}
+.item4 {
+  grid-area: d;
+  align-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_2', '500', '450') }}

+
+ +

Elementos con una relación de aspecto intrínseco

+ +

La especificación determina que la acción por defecto en {{cssxref("align-self")}} es estirarse, excepto para los elementos que tienen una relación de aspecto intrínseco, en este caso ellos funcionan como start. La razón para esto, es que si elemento con una relación de aspecto intrínseco es establecido para estirarse, este por defecto pueda distorsionarlo.

+ +

Esta acción ahora ha sido clarificada en la especificación, con navegadores aún hay que implementar la acción correcta. Hasta que eso pase, te puedes asegurar de que los elementos no se extiendan, como en imagenes, las cuales son hijos directos de la cuadricula, estableciendo {{cssxref("align-self")}} y {{cssxref("justify-self")}} al empezar. Esto se asemejará a la acción correcta una vez implementado.

+ +

Justifying Items on the Inline Axis

+ +

As {{cssxref("align-items")}} and {{cssxref("align-self")}} deal with the alignment of items on the block axis, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} do the same job on the inline axis. The values you can choose from are the same as for align-self.

+ +
    +
  • auto
    • +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

You can see the same example as used for {{cssxref("align-items")}}, below. This time we are applying the {{cssxref("justify-self")}} property.

+ +

Once again the default is stretch, other than for items with an intrinsic aspect ratio. This means that by default, grid items will cover their grid area, unless you change that by setting alignment. The first item in the example demonstrates this default alignment:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+  grid-template-areas:
+    "a a a a b b b b"
+    "a a a a b b b b"
+    "c c c c d d d d"
+    "c c c c d d d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+  justify-self: start;
+}
+.item3 {
+  grid-area: c;
+  justify-self: end;
+}
+.item4 {
+  grid-area: d;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_3', '500', '450') }}

+
+ +

As with {{cssxref("align-self")}} and {{cssxref("align-items")}}, you can apply {{cssxref("justify-items")}} to the grid container, to set the {{cssxref("justify-self")}} value for all items.

+ +

The {{cssxref("justify-self")}} and {{cssxref("justify-items")}} properties are not implemented in flexbox. This is due to the one-dimensional nature of flexbox, and that there may be multiple items along the axis, making it impossible to justify a single item. To align items along the main, inline axis in flexbox you use the {{cssxref("justify-content")}} property.

+ +

Center an item in the area

+ +

By combining the align and justify properties we can easily center an item inside a grid area.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: 200px;
+  grid-template-areas:
+    ". a a ."
+    ". a a .";
+}
+.item1 {
+  grid-area: a;
+  align-self: center;
+  justify-self: center;
+}
+
+ +
<div class="wrapper">
+ <div class="item1">Item 1</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_4', '500', '480') }}

+
+ +

Aligning the grid tracks on the block axis

+ +

If you have a situation where your grid tracks use an area that is smaller than the grid container, then you can align the grid tracks themselves, inside that container. Once again, this operates on the block and inline axes, with {{cssxref("align-content")}} aligning tracks on the block axis, and {{cssxref("justify-content")}} performing alignment on the inline axis. The values for {{cssxref("align-content")}} and {{cssxref("justify-content")}} are:

+ +
    +
  • normal
    • +
  • start
    • +
  • end
    • +
  • center
    • +
  • stretch
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
  • baseline
    • +
  • first baseline
    • +
  • last baseline
    • +
+ +

In the below example I have a grid container of 500 pixels by 500 pixels. I have defined 3 row and column tracks each of 100 pixels with a 10 pixel gutter. This means that there is space inside the grid container both in the block and inline directions.

+ +

The align-content property is applied to the grid container as it works on the entire grid. The default behavior in grid layout is start, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_5', '500', '520') }}

+ +

If I add align-content to my container, with a value of end, the tracks all move to the end line of the grid container in the block dimension:

+
+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: end;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_6', '500', '520') }}

+
+ +

We can also use values for this property that you may be familiar with from flexbox; the space distribution values of space-between, space-around and space-evenly. If we update {{cssxref("align-content")}} to space-between, you can see how the elements on our grid space out:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_7', '500', '520') }}

+
+ +

It is worth noting, that using these space distribution values may cause items on your grid to become larger. If an item spans more than one grid track, as further space is added between the tracks, that item needs to become large to absorb the space. We’re always working in a strict grid. Therefore, if you decide to use these values, ensure that the content of your tracks can cope with the extra space, or that you have used alignment properties on the items, to cause them to move to the start rather than stretch.

+ +

In the below image I have placed the grid with align-content, with a value of start alongside the grid when align-content has a value of space-between. You can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks:

+ +

Demonstrating how items become larger if we use space-between.

+ +

Justifying the grid tracks on the row axis

+ +

On the inline axis, we can use {{cssxref("justify-content")}} to perform the same type of alignment that we used {{cssxref("align-content")}} for in the block axis.

+ +

Using the same example, I am setting {{cssxref("justify-content")}} to space-around. This once again causes tracks which span more than one column track to gain extra space:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+  align-content: space-between;
+  justify-content: space-around;
+}
+.item1 {
+  grid-area: a;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_8', '500', '500') }}

+
+ +

Alignment and auto margins

+ +

Another way to align items inside their area, is to use auto margins. If you have ever centered your layout in the viewport, by setting the right and left margin of the container block to auto, you know that an auto margin absorbs all of the available space. By setting the margin to auto on both sides, it pushes the block into the middle as both margins attempt to take all of the space.

+ +

In this next example, I have given item 1 a left margin of auto. You can see how the content is now pushed over to the right side of the area, as the auto margin takes up remaining space, after room for the content of that item has been assigned:

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3,100px);
+  height: 500px;
+  width: 500px;
+  grid-gap: 10px;
+  grid-template-areas:
+    "a a b"
+    "a a b"
+    "c d d";
+}
+.item1 {
+  grid-area: a;
+  margin-left: auto;
+}
+.item2 {
+  grid-area: b;
+}
+.item3 {
+  grid-area: c;
+}
+.item4 {
+  grid-area: d;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">Item 1</div>
+  <div class="item2">Item 2</div>
+  <div class="item3">Item 3</div>
+  <div class="item4">Item 4</div>
+</div>
+
+ +

{{ EmbedLiveSample('alignment_9', '500', '500') }}

+
+ +

You can see how the item is aligned by using the Firefox Grid Highlighter:

+ +

Image showing auto-margins using the Grid Highlighter.

+ +

Alignment and Writing Modes

+ +

In all of these examples I have been working in English, which is a left-to-right language. This means that our start lines are top and left of our grid when thinking in physical directions.

+ +

CSS Grid Layout, and the Box Alignment specification are designed to work with writing modes in CSS. This means that if you are working in a right to left language, such as Arabic, the start of the grid would be the top and right, so the default of justify-content: start would be for grid tracks to start on the right hand side of the grid.

+ +

Setting auto margins, using margin-right or margin-left however, or absolutely positioning items using the top, right, bottom and left offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.

+ + diff --git "a/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" "b/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" new file mode 100644 index 0000000000..afb49e2a92 --- /dev/null +++ "b/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" @@ -0,0 +1,722 @@ +--- +title: Basic concepts of grid layout +slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas +tags: + - CSS + - Guía + - Posicionamiento + - Rejillas CSS +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

CSS Grid Layout presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.

+ +

¿Qué es una cuadrícula(grid)?

+ +

Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:

+ +

Tamaños fijos y flexibles

+ +

Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida fr (fracción), diseñada para este propósito.

+ +

Posicionamiento de elementos

+ +

Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.

+ +

Creación de líneas adicionales para alojar contenido

+ +

Usted puede definir una cuadrícula explícita con grid layout. La especificación  Grid Layout  es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.

+ +

Control de alineación

+ +

Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.

+ +

Control de contenido superpuesto

+ +

Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.

+ +

Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como flexbox, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su contenedor de cuadrícula.

+ +

El contenedor de Grid

+ +

Creamos un contenedor de cuadrícula al declarar display: grid o display: inline-grid en un elemento. Tan pronto como hagamos esto todos los hijos directos de ese elemento se convertirán en elementos de la cuadrícula.

+ +

En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

Hago de .wrapper un contenedor de cuadrícula.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}

+
+ +

Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual  tiene disponible el Grid Inspector (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor grid. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.

+ +

Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.

+ +

Vias, filas y columnas del Grid

+ +

Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada -  esta es la vía de la primera fila en nuestra cuadrícula.

+ +

+ +

Puedo modificar nuestro ejemplo anterior al agregar la propiedad grid-template-columns, para así definir el tamaño (ancho) de las vías de cada columna.

+ +

Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

La Unidad fr

+ +

Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}

+
+ +

En el próximo ejemplo creamos una definición con una vía de 2fr y luego dos vías de 1fr. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía  y una parte a cada una de las dos vias restantes.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Listando vías con la notación repeat()

+ +

Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación repeat() con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

También puede ser escrita así:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de 1fr y luego una vía final de 20 píxeles.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía 1fr seguida por una vía 2fr, repetida cinco veces.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

La cuadrícula implícita y explícita

+ +

Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas  para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

+ +

Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.

+ +

También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.

+ +

En el siguiente ejemplo usamos grid-auto-rows para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.

+ +
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}

+
+ +

Tamaño de vía y minmax()

+ +

Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.

+ +

Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando minmax() en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two
+    <p>I have some more content in.</p>
+    <p>This makes me taller than 100 pixels.</p>
+  </div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}

+
+ +

Líneas de la cuadrículaEdit

+ +

Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.

+ +

Diagram showing numbered grid lines.

+ +

Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.

+ +

Posicionando elementos de acuerdo a las líneas

+ +

Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento  y tomamos como punto de referencia la línea - en lugar de la vía.

+ +

En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna,  usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.

+ +

El segundo elemento comienza en la línea de columna 1 de la  cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.

+ +
+
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}

+
+ +

No olvide que puede utilizar Grid Inspector en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.

+ +

Celdas de cuadrícula

+ +

Una celda de cuadrícula es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.

+ +

The first cell of the grid highlighted

+ +

Áreas de cuadrícula

+ +

Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un área de cuadrícula. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.

+ +

A grid area

+ +

Canaletas

+ +

Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.

+ +
+
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+
+ +
+

Nota: Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo grid- como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.

+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Canaletas') }}

+
+ +

Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías fr de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.

+ +

Anidamiento de cuadrículas

+ +

Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.

+ +
+
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+        <div class="nested">c</div>
+    </div>
+    <div class="box box2">Two</div>
+    <div class="box box3">Three</div>
+    <div class="box box4">Four</div>
+    <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

Si establezco box1 a display: grid puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('anidamiento', '600', '340') }}

+ +

En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la grid-gap del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.

+ +

Subgrid

+ +

En la especificación de grid de nivel 1 hay una característica llamada subgrid que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.

+ +
+

Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.

+
+ +

En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar display: subgrid en lugar de display: grid, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.

+ +

Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+
+ +

Estratificando elementos con z-index

+ +

Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.

+ +
+
<div class="wrapper">
+  <div class="box box1">One</div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

El elemento box2 ahora se superpone a box1, se muestra en la parte superior ya que aparece después en el orden de origen.

+ +

Controlando el orden

+ +

Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a box2 un z-index más bajo que box1, se mostrará debajo de box1 en la pila.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}

+ +

Siguientes Pasos

+ +

En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout.

+ + +
diff --git a/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html new file mode 100644 index 0000000000..7339530ff1 --- /dev/null +++ b/files/es/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -0,0 +1,169 @@ +--- +title: CSS Grid Layout y accesibilidad +slug: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility +--- +

Los que llevamos en esto del desarrollo web más años de los que queremos recordar podríamos considerar que CSS Grid es un poco como "maquetar con tablas". En los primeros tiempos del diseño web la manera de maquetar la página era usando tablas HTML y "troceando" los elementos dentro de las celdas de esas tablas para crear un diseño. This had some advantages over the “CSS Positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by table display. The biggest downside however was that it tied our design to the mark-up, often creating accessibility issues as it did so. In order to lay the design out in the table we often broke up the content in ways that made no sense at all when read out by a screen reader for example.

+ +

In moving to CSS we often spoke about CSS for layout enabling a separation of content and markup and presentation. The ultimate aim being that we could create a semantic and well structured document, then apply CSS to create the layout we desired. Sites such as the CSS Zen Garden showcased this ability. The CSS Zen Garden challenged us to take identical markup and create a unique design using CSS.

+ +

CSS Grid Layout does not have the same issues that tables did, our grid structure is defined in CSS rather than in the mark-up. If we need to add an element we can use something with no semantic meaning. On paper grid helps us properly fulfill that promise of content separated from mark-up, however is it possible to go too far with this idea? Is it possible that we could create an accessibility issue through our use of grids?

+ +

Re-ordering content in CSS Grid Layout

+ +

We’ve already seen in these guides that grid gives us power to re-order the content of our page in various ways. We can use the {{cssxref("order")}} property, which will change how items auto-place. We can use grid-auto-flow: dense which will take items visually out of DOM order. We can also position items using line-based placement of grid template areas, without considering their location in the source.

+ +

The specification includes a section that covers Reordering and Accessibility. In the introduction to that section are details of what the specification expects browsers to do when the content is visually reordered using Grid Layout.

+ +
+

Grid layout gives authors great powers of rearrangement over the document. However, these are not a substitute for correct ordering of the document source. The order property and grid placement do not affect ordering in non-visual media (such as speech). Likewise, rearranging grid items visually does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. tabindex HTML5).

+
+ +

If you reorder things visually using grid layout, this will not change how the items are ordered if the content is being read out by a screen reader, or other text to speech user agent. In addition, the reordering will not change tab order. This means that someone navigating using the keyboard could be tabbing through links on your site and suddenly find themselves jumping from the top to the bottom of the document due to a reordered item being next in line.

+ +

The specification warns authors (the CSSWG term for web developers) not to do this reordering.

+ +
+

Authors must use order and the grid-placement properties only for visual, not logical, reordering of content. Style sheets that use these features to perform logical reordering are non-conforming.

+
+ +

What does this mean for designing with grid layout in practice?

+ +

Visual not logical re-ordering

+ +

Any time you reorder things with grid layout – or with flexbox – you only perform visual reordering. The underlying source is what controls things like text to speech, and the tab order of the document. You can see how this works with a very simple example.

+ +

In this example I have used grid to lay out a set of boxes that contain links. I have used the line-based placement properties to position box 1 on the second row of the grid. Visually it now appears as the fourth item in the list. However, if I tab from link to link the tab order still begins with box 1, as it comes first in the source.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+ +
<div class="wrapper">
+  <div class="box box1"><a href="">One</a></div>
+  <div class="box box2"><a href="">Two</a></div>
+  <div class="box box3"><a href="">Three</a></div>
+  <div class="box box4"><a href="">Four</a></div>
+  <div class="box box5"><a href="">Five</a></div>
+</div>
+
+ +

{{ EmbedLiveSample('accessibility_1', '500', '330') }}

+
+ +

The specification says that in this scenario, if box 1 really makes sense logically in that position, we should go back to our source and make the change there rather than reordering using grid layout. This is what is meant by visual versus logical reordering, logical ordering is important for the meaning and structure of our document, and we should make sure that we preserve that structure.

+ +

How should we approach accessibility for grid layout?

+ +

From the specification we know that we need to ensure our document maintains the logical order of our content. How should we approach our development to make sure that we maintain accessibility for the different users and the ways that they interact with our pages?

+ +
+
Start with a structured and accessible document
+
A grid layout should mean we do not need to change our document source in order to get the layout that we want. Therefore the starting point of your page should be a well structured and accessible source document. As is noted in the CSS Grid Layout specification, this is quite often going to give you a good structure for your smallest screen devices too. If a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.
+
Create a responsive, and responsible grid
+
With a solid document you can begin to add your layout, it is likely you will be using media queries to create additional columns and make changes for different screen sizes and devices. Grid can be really very useful here, elements deprioritized in the mobile source order can be moved into a sidebar in a desktop layout, for example. The key here is to keep testing, a very simple test is to tab around the document. Does that order still make sense? Check that you do not end up leaping from the top to the bottom of the layout in a peculiar way. If so that would be a sign that you need to address something about the layout.
+
Returning to the source
+
If at any time in the design process you find yourself using grid to relocate the position of an element, consider whether you should return to your document and make a change to the logical order too. The nice thing about using CSS Grid Layout is that you should be able to move an item in the source to match the logical order, without needing to make big changes to your layout. This is a huge improvement over a {{cssxref("float")}}-based layout for example, where document source matters a lot in order to get layouts at different breakpoints. However the onus is on us as developers to remember to go back to our source and update it to maintain logical order.
+
+ +

Grid and the danger of markup flattening

+ +

Another issue to be aware of in CSS Grid Layout and to a lesser extent in CSS Flexbox, is the temptation to flatten markup. As we have discovered, for an item to become a grid item it needs to be a direct child of the grid container. Therefore, where you have a {{HTMLElement("ul")}} element inside a grid container, that ul becomes a grid item – the child {{HTMLElement("li")}} elements do not.

+ +

If the subgrid value of {{cssxref("display")}} becomes implemented, it would be possible to make these children of a grid item participate in the overall grid layout by declaring the ul element a subgrid. Currently the only way to do this is to use display: contents to cause the box generated by the ul to disappear from the DOM. For more information about this interaction see the guide on the Relationship of Grid Layout to other layout methods and the section on display: contents.

+ +

Given that interoperable support for display: contents is limited and we do not yet have subgrids, there is a definite temptation when developing a site using CSS Grid Layout to flatten out the markup, to remove semantic elements in order to make it simpler to create a layout. An example would be where some content was semantically marked up as a list but you decide to use a set of {{HTMLElement("div")}} elements instead as then you can have the element to be a direct child of a container set to display: grid. Be aware of this temptation and find ways to develop your design without stripping out the markup. Starting out with a well-structured document is a very good way to avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so!

+ +

Further reading

+ +

There is not a lot of existing material regarding accessibility and CSS Grid Layout. Many of the issues are similar to those raised regarding CSS Flexbox, which also gives methods of reordering content with {{cssxref("flex-direction")}} and the {{cssxref("order")}} property.

+ +

The concept of visual display following document source order is detailed in the WCAG Techniques for Success Criteria – Technique C27.

+ +

As a way to start thinking about these issues, as you use CSS Grid Layout I would suggest reading Flexbox & the Keyboard Navigation Disconnect from Léonie Watson. Also the video of Léonie’s presentation from ffconf is helpful to understand more about how screen readers work with the visual representation of things in CSS. Adrian Roselli has also posted regarding tab order in various browsers – although this was prior to grid support being fully implemented in Firefox.

+ + diff --git a/files/es/web/css/css_grid_layout/index.html b/files/es/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..d26c21f5fa --- /dev/null +++ b/files/es/web/css/css_grid_layout/index.html @@ -0,0 +1,251 @@ +--- +title: CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS Grid layout contiene funciones de diseño dirigidas a los desarrolladores de aplicaciones web. El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.

+ +

Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, con CSS grid son posibles muchos más diseños y de forma más sencilla que con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse para que se solapen y se superpongan, de forma similar a los elementos posicionados en CSS.

+ +

Ejemplo sencillo

+ +

El siguiente ejemplo muestra un grid de tres columnas con filas nuevas creadas con un mínimo de 100 píxeles y un máximo automático. Los elementos se han colocado en el grid utilizando posicionamiento en línea.

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-template")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-row-start")}}
    • +
  • {{cssxref("grid-column-start")}}
    • +
  • {{cssxref("grid-row-end")}}
    • +
  • {{cssxref("grid-column-end")}}
    • +
  • {{cssxref("grid-row")}}
    • +
  • {{cssxref("grid-column")}}
    • +
  • {{cssxref("grid-area")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

Funciones CSS

+ +
+
    +
  • {{cssxref("repeat", "repeat()")}}
    • +
  • {{cssxref("minmax", "minmax()")}}
    • +
  • {{cssxref("fit-content", "fit-content()")}}
    • +
+
+ +

CSS data types

+ +
+
    +
  • {{cssxref("<flex>")}}
    • +
+
+ +

Glosario

+ +
+ +
+ +

Guías

+ +
+ +
+ +

Recursos externos

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName("CSS Grid 2") }}{{ Spec2("CSS Grid 2") }}Added subgrids.
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html new file mode 100644 index 0000000000..d477402114 --- /dev/null +++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -0,0 +1,597 @@ +--- +title: Realizing common layouts using CSS Grid Layout +slug: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +tags: + - CSS + - CSS Grids + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout +--- +

Para completar este conjunto de guías de CSS Grid Layout, voy a recorrer algunos diseños diferentes, que demuestran algunas de las diferentes técnicas que puede utilizar al diseñar con grid layout. Vamos a ver un ejemplo usando grid-template-areas un típico sistema de cuadrícula flexible de 12 columnas, y también un listado de productos usando el emplazamiento automático. Como puedes ver en este conjunto de ejemplos, a menudo hay más de una manera de lograr el resultado que deseas con el diseño de cuadrícula. Escoge el método que encuentres más útil para los problemas que estás resolviendo y los diseños que necesitas implementar.

+ +

Responsive layout de 1 a 3 columnas fluidas usando grid-template-areas

+ +

Muchos sitios web son una variación de este tipo de diseño: contenido, barras laterales, un encabezado y un pie de página. En diseños responsivos, es posible que quieras mostrar el diseño en una sola columna, agregando una barra lateral en un punto de interrupción determinado y luego incorporar un diseño de tres columnas para pantallas más amplias.

+ +

Image of the three different layouts created by redefining our grid at two breakpoints.

+ +

Voy a crear este layout usando la propiedad named template areas que aprendimos en la guía Grid template areas.

+ +

Mi marcado consiste en un container con elementos en su interior para el header, footer, contenido principal, navegación, sidebar, y un bloque para poner anuncios./p>

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content">
+            <h1>Área principal del artículo</h1>
+            <p>En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.</p>
+        </article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+</div>
+
+ +

Al usar {{cssxref("grid-template-areas")}} para crear el diseño. A parte de las media queries necesito nombrar las áreas. Nombremos las áreas con la propiedad {{cssxref("grid-area")}} property.

+ +
.main-head {
+  grid-area: header;
+}
+.content {
+  grid-area: content;
+}
+.main-nav {
+  grid-area: nav;
+}
+.side {
+  grid-area: sidebar;
+}
+.ad {
+  grid-area: ad;
+}
+.main-footer {
+  grid-area: footer;
+}
+
+ +

Esto no creará ningún diseño, sin embargo, nuestros elementos ahora tienen nombres que podemos utilizar para hacerlo. Al margen de las media queries, ahora voy a configurar el diseño para el ancho móvil. Aquí estoy manteniendo todo en el orden de origen, tratando de evitar cualquier separación entre la fuente y la pantalla, tal y como se describe en la guía Grid layout y accesibilidad. No he definido ninguna vía de columna o de fila, pero este diseño dicta una sola columna, y las filas se crearán según sea necesario para cada uno de los items de la cuadrícula implícita.

+ +
.wrapper {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-areas:
+    "header"
+    "nav"
+    "content"
+    "sidebar"
+    "ad"
+    "footer";
+}
+
+ +

Después de establecer la columna simple para todas los tamaños de pantalla, ahora podemos añadir una media query y redefinir nuestro layout para los casos en los que tuviéramos suficiente pantalla real como para mostrar dos columnas.

+ +
@media (min-width: 500px) {
+  .wrapper {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      "header  header"
+      "nav     nav"
+      "sidebar content"
+      "ad      footer";
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Se puede ver la forma del layout en los valores de {{cssxref("grid-template-areas")}}. El header se expande en dos vías de columna, lo mismo que nav. En la tercera vía de fila tenemos el sidebar al costado del content. En la cuarta vía de fila he decidido poner el contenido ad – por tanto aparecerá debajo de sidebar,y a continuación, el footer , debajo del contenido. Estoy utilizando flexbox en la navegación para mostrarlo en una fila espaciada.

+ +

Ahora puedo añadir un punto de ruptura final para pasar a un diseño de tres columnas.

+ +
@media (min-width: 700px) {
+  .wrapper {
+    grid-template-columns: 1fr 4fr 1fr;
+    grid-template-areas:
+      "header header  header"
+      "nav    content sidebar"
+      "nav    content ad"
+      "footer footer  footer"
+   }
+   nav ul {
+     flex-direction: column;
+   }
+}
+
+ +

El diseño de tres columnas tiene dos columnas laterales de 1fr y una columna central que tiene 4fr como tamaño de vía. Esto significa que el espacio disponible en el contenedor se divide en 6 y se asigna en proporción a nuestras tres pistas - una parte cada una a las columnas laterales y 4 partes al centro.

+ +

En este diseño estoy mostrando nav en la columna de la izquierda, junto al content. En la columna de la derecha tenemos sidebar y debajo están los anuncios (ad). El footer se extiende a lo largo de la parte inferior del diseño. Luego uso flexbox para mostrar la navegación como una columna.

+ +

{{ EmbedLiveSample('layout_1', '800', '500') }}

+
+ +

Este es un ejemplo simple pero demuestra cómo podemos usar un diseño de cuadrícula para reorganizar nuestro diseño para diferentes puntos de ruptura. En particular, estoy cambiando la ubicación de ese bloque de anuncios ad, según corresponda en mis diferentes configuraciones de columna. Este método de nombrar las áreas me parece muy útil en una etapa de prototipado, es fácil jugar con la ubicación de los elementos. Siempre se puede empezar a utilizar la rejilla de esta manera para la creación de prototipos, incluso si no se puede confiar plenamente en ella en producción debido a los navegadores que visitan su sitio.

+ +

Diseño flexible de 12-columnas

+ +

Si has estado trabajando con uno de los muchos frameworks o sistemas de cuadrícula puedes estar acostumbrado a diseñar tu sitio en una cuadrícula flexible de 12 o 16 columnas. Podemos crear este tipo de sistema utilizando CSS Grid Layout. Como ejemplo simple, estoy creando una cuadrícula flexible de 12 columnas que tiene 12 pistas de columna de 1fr -unidad, todas tienen una línea de inicio llamada col-start. Esto significa que tendremos doce líneas de cuadrícula llamadas col-start.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Para demostrar cómo funciona este sistema de rejilla tengo 4 ítems hijos dentro de mi wrapper.

+ +
<div class="wrapper">
+  <div class="item1">Start column line 1, span 3 column tracks.</div>
+  <div class="item2">Start column line 6, span 4 column tracks. 2 row tracks.</div>
+  <div class="item3">Start row 2 column line 2, span 2 column tracks.</div>
+  <div class="item4">Start at column line 3, span to the end of the grid (-1).</div>
+</div>
+
+ +

Entonces puedo ponerlos en la rejilla usando los nombres de las líneas, y la palabra clave span.

+ +
.item1 {
+  grid-column: col-start / span 3;
+}
+.item2 {
+  grid-column: col-start 6 / span 4 ;
+  grid-row: 1 / 3;
+}
+.item3 {
+  grid-column: col-start 2 / span 2;
+  grid-row: 2;
+}
+.item4 {
+  grid-column: col-start 3 / -1;
+  grid-row: 3;
+}
+
+ +

{{ EmbedLiveSample('layout_2', '800', '400') }}

+
+ +

Como se describe en la guía de líneas con nombre, estamos utilizando la línea con nombre para colocar nuestro ítem. Como tenemos 12 líneas todas con el mismo nombre usamos el nombre, y luego el index de la línea. También puedes usar el propio index de líneas si lo prefieres y evitar el uso de líneas con nombre.

+ +

En lugar de establecer el número de la línea final, he elegido decir cuántas pistas debe expandir este elemento, utilizando la palabra clave span. Me gusta este enfoque, ya que cuando trabajamos con un sistema de diseño de múltiples columnas normalmente pensamos en bloques en términos del número de vías de la cuadrícula que atraviesan, y los ajustamos para diferentes puntos de ruptura. Para ver cómo se alinean los bloques con las vías, utiliza el Firefox Grid Inspector. Muestra claramente cómo se colocan nuestros ítems.

+ +

Showing the items placed on the grid with grid tracks highlighted.

+ +

Existen algunas diferencias clave sobre cómo funciona un diseño de cuadrícula en los sistemas de cuadrícula que se pueden haber utilizado anteriormente. Como puedes ver, no necesitamos añadir ningún marcado para crear una fila, los sistemas de cuadrícula necesitan hacer esto para evitar que los elementos salten a la fila de arriba. Con CSS Grid Layout, podemos colocar las cosas en filas, sin peligro de que suban a la fila de arriba si se dejan vacías. Debido a esta estricta colocación de columnas y filas, también podemos dejar fácilmente espacio en blanco en nuestro diseño. Tampoco necesitamos clases especiales que tiren o empujen cosas, para que se introduzcan en la rejilla. Todo lo que tenemos que hacer es especificar la línea de inicio y final del ítem.

+ +

Construcción de un diseño utilizando el sistema de 12 columnas

+ +

Para ver cómo funciona este método de diseño en la práctica, podemos crear el mismo diseño que creamos con {{cssxref("grid-template-areas")}}, esta vez utilizando el sistema de cuadrícula de 12 columnas. Comienzo con el mismo marcado que el utilizado para el ejemplo de áreas de plantillas de cuadrícula.

+ +
+ + +
<div class="wrapper">
+        <header class="main-head">The header</header>
+        <nav class="main-nav">
+            <ul>
+                <li><a href="">Nav 1</a></li>
+                <li><a href="">Nav 2</a></li>
+                <li><a href="">Nav 3</a></li>
+            </ul>
+        </nav>
+        <article class="content"><h1>Área principal del artículo</h1>
+        <p>En este diseño, las áreas se muestran en el orden en que están escritas en las pantallas de menos de 500 píxeles de ancho. Pasamos a un diseño de dos columnas, y luego a uno de tres columnas mediante la redefinición de la rejilla y la colocación de los elementos en ella.</p></article>
+        <aside class="side">Sidebar</aside>
+        <div class="ad">Advertising</div>
+        <footer class="main-footer">The footer</footer>
+    </div>
+
+ +

Entonces puedo configurar nuestra cuadrícula, como en el ejemplo del diseño de 12 columnas de arriba.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+ +

Una vez más vamos a hacer de este un diseño responsivo, pero esta vez usando líneas con nombre. Cada punto de interrupción utilizará una cuadrícula de 12 columnas, sin embargo, el número de pistas que los ítems expandirán cambiará dependiendo del tamaño de la pantalla.

+ +

Empezamos con el móvil primero, y todo lo que queremos para las pantallas más estrechas es que los elementos permanezcan en el orden de origen, y que todos se expandan a lo largo de la cuadrícula.

+ +
.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+ +

En el siguiente punto de ruptura queremos pasar a un diseño de dos columnas. Nuestro encabezado y navegación todavía se extienden por toda la cuadrícula, por lo que no necesitamos especificar ninguna posición para ellos. La barra lateral comienza en la primera línea de la columna llamada col-start, que abarca 3 líneas. Va después de la línea 3 de la fila, ya que la cabecera y la navegación se encuentran en las dos primeras pistas de la fila.

+ +

El panel de anuncios se encuentra debajo de la barra lateral, por lo que comienza en la línea 4 de la fila de la cuadrícula. Luego tenemos el contenido y el pie de página comenzando en col-start 4 y abarcando 9 pistas que los llevan al final de la cuadrícula.

+ +
@media (min-width: 500px) {
+
+  .side {
+    grid-column: col-start / span 3;
+    grid-row: 3;
+  }
+  .ad {
+    grid-column: col-start / span 3;
+    grid-row: 4;
+  }
+  .content, .main-footer {
+    grid-column: col-start 4 / span 9;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+ +

Finalmente vamos a la versión de tres columnas de este diseño. El encabezado continúa extendiéndose por toda la cuadrícula, pero ahora la navegación se mueve hacia abajo para convertirse en la primera barra lateral, con el contenido y la barra lateral al lado. El pie de página ahora también se extiende por todo el diseño.

+ +
@media (min-width: 700px) {
+  .main-nav {
+    grid-column: col-start / span 2;
+    grid-row: 2 / 4;
+  }
+  .content {
+    grid-column: col-start 3 / span 8;
+    grid-row: 2 / 4;
+  }
+  .side {
+    grid-column: col-start 11 / span 2;
+    grid-row: 2;
+  }
+  .ad {
+    grid-column: col-start 11 / span 2;
+    grid-row: 3;
+  }
+  .main-footer {
+    grid-column: col-start / span 12;
+  }
+  nav ul {
+    flex-direction: column;
+  }
+}
+
+ +

{{ EmbedLiveSample('layout_3', '800', '450') }}

+
+ +

Una vez más el Grid Inspector Grid Inspector es útil para ayudarnos a ver cómo ha tomado forma nuestro diseño.

+ +

Showing the layout with grid tracks highlighted by the grid inspector.

+ +

Algo a tener en cuenta a la hora de crear este diseño es que no hemos necesitado posicionar explícitamente cada elemento en la cuadrícula en cada punto de ruptura. Hemos sido capaces de heredar la colocación establecida para puntos de ruptura anteriores - una ventaja de trabajar " mobile first ". También podemos aprovechar la colocación automática de la rejilla. Al mantener los elementos en un orden lógico, la colocación automática realiza una gran cantidad de trabajo por nosotros al colocar los elementos en la cuadrícula. En el último ejemplo de esta guía crearemos un diseño que se basa totalmente en la colocación automática

+ +

Un listado de productos con auto-placement

+ +

Muchos diseños son esencialmente conjuntos de "tarjetas" - listados de productos, galerías de imágenes, etc. Una cuadrícula puede hacer que sea muy fácil crear estos listados de una manera responsiva sin necesidad de añadir media queries para ello. En este siguiente ejemplo estoy combinando CSS Grid y Flexbox Layouts para hacer un sencillo diseño de listado de productos.

+ +

El marcado de mi anuncio es una lista no ordenada de artículos. Cada elemento contiene un encabezado, un texto de altura variable y un enlace para llamar a la acción.

+ +
+
<ul class="listing">
+  <li>
+    <h2>Item Uno</h2>
+    <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div>
+    <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+  </li>
+   <li>
+     <h2>Item Dos</h2>
+     <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div>
+     <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+   </li>
+   <li class="wide">
+     <h2>Item Tres</h2>
+     <div class="body"><p>El contenido de este ítem-lista va aquí.</p>
+     <p>Este tiene más texto que los demás.</p>
+     <p>Un poquito más</p>
+     <p>¿Podríamos hacer algo diferente con él?</p></div>
+     <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+    </li>
+    <li>
+     <h2>Item Cuatro</h2>
+     <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div>
+     <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+    </li>
+     <li>
+     <h2>Item Cinco</h2>
+     <div class="body"><p>El contenido de este ítem-lista va aquí.</p></div>
+      <div class="cta"><a href="">¡Llamada a la acción!</a></div>
+    </li>
+</ul>
+
+ + + +

Vamos a crear una cuadrícula con un número flexible de columnas flexibles. Quiero que nunca sean más pequeñas que 200 píxeles, y que luego compartan el espacio restante disponible por igual, de modo que siempre obtengamos pistas de columna de igual ancho. Esto lo logramos con la función minmax() en nuestra notación repeat para el dimensionamiento de pistas.

+ +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+
+ +

Tan pronto como añado este CSS, los ítems empiezan a desplegarse como una cuadrícula. Si hago la ventana más pequeña o más ancha, el número de pistas de columna cambia, sin necesidad de añadir puntos de interrupción mediante media queries y redefinir la cuadrícula.

+ +

Luego puedo ordenar el interior de las cajas con un pequeño toque de flexbox. Establezco la lista de ítems como display: flex y la propiedad flex-direction como column. Entonces puedo usar un auto margin en .cta para empujar esta barra hacia abajo hasta el fondo de la caja./p>

+ +
.listing li {
+  border: 1px solid #ffe066;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+}
+.listing .cta {
+  margin-top: auto;
+  border-top: 1px solid #ffe066;
+  padding: 10px;
+  text-align: center;
+}
+.listing .body {
+  padding: 10px;
+}
+
+ +

Esta es realmente una de las razones clave por las que usaría flexbox en lugar de grid, si sólo estoy alineando o distribuyendo algo en una sola dimensión, ese es un caso de uso de flexbox.

+ +

{{ EmbedLiveSample('layout_4', '800', '900') }}

+
+ +

Todo esto se ve bastante completo ahora, sin embargo, a veces tenemos unas cartas que contienen mucho más contenido que las otras. Podría ser bueno hacer que se expandan a lo largo de dos pistas, y entonces no serán tan altas. Tengo una clase wide en mi ítem más grande, y añado una regla {{cssxref("grid-column-end")}} con el valor span 2. Ahora cuando la rejilla llegue a este ítem, le asignará dos pistas. En algunos puntos de ruptura, esto significa que obtendremos un hueco en la cuadrícula - donde no haya espacio para colocar un elemento de dos pistas.

+ +

The layout has gaps as there is not space to layout a two track item.

+ +

Puedo hacer que una rejilla rellene esos huecos ajustando {{cssxref("grid-auto-flow")}}: dense en el grid container. Sin embargo, presta atención al hacer esto, ya que saca los elementos de su orden lógico de origen. Sólo deberías hacerlo si tus ítems no tienen un orden establecido - y en ese caso tener en cuenta características de accesibilidad: el tabulador seguirá el orden de la fuente y no de la visualización reordenada.

+ +
+ + +
.listing {
+  list-style: none;
+  margin: 2em;
+  display: grid;
+  grid-gap: 20px;
+  grid-auto-flow: dense;
+  grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
+}
+.listing .wide {
+  grid-column-end: span 2;
+}
+
+ +

{{ EmbedLiveSample('layout_5', '800', '900') }}

+ +

Esta técnica de auto-placement con algunas reglas aplicadas a ciertos ítems es muy útil, y puede ayudarte a lidiar con el contenido que está siendo generado por un CMS, por ejemplo, donde has repetido ítems y quizás puedas añadir una clase a ciertos ítems a medida que son generados en el HTML. with some rules applied to certain items is very useful, and can help you to deal with content that is being output by a CMS for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the HTML.

+
+ +

Aprender más

+ +

La mejor manera de aprender a usar el diseño de la cuadrícula es continuar construyendo ejemplos como los que hemos tratado aquí. Escoge algo que normalmente construyes usando tu framework preferido, o usando floats, y ve si puedes construirlo usando grid. No olvides buscar ejemplos que sean imposibles de construir con los métodos actuales. Eso podría significar inspirarse en revistas u otras fuentes ajenas a la web. Grid Layout abre posibilidades que antes no teníamos, no necesitamos estar atados a los mismos viejos layouts para utilizarlo

+ +
    +
  • Para inspirarte mira Layout Labs de Jen Simmons, ella ha estado creando diseños basados en una variedad de fuentes.
    • +
  • ara obtener patrones de diseño comunes adicionales, consulta Grid by Example, donde hay muchos ejemplos> de diseño de cuadrícula y también algunos patrones de interfaz de usuario más grandes y diseños de página completa.
    • +
+ + diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html new file mode 100644 index 0000000000..298da1dc5f --- /dev/null +++ b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html @@ -0,0 +1,642 @@ +--- +title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS +slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout +tags: + - CSS + - CSS Cuadrícula + - CSS Grids + - CSS Grilla + - CSS Rejilla + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta Grid junto con otras técnicas que ya se estén usando.

+ +
+

Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será Grid.

+
+ +

Grid y flexbox

+ +

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

+ +

Diseños de Una dimensión vs. dos dimensiones

+ +

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

+ +

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

+ +

También he configurado la propiedad wrap{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.

+ +

La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.

+ +

El mismo diseño con CSS Grid Layout

+ +

En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de 1fr. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

+ +
    +
  • ¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox
    • +
  • ¿Necesito controlar el diseño por filas y por columnas? – usa grid
    • +
+ +

¿Contenido fuera o layout dentro?

+ +

Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible en esa línea.

+ +

Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.

+ +

Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.

+ +

Alineación de Cajas

+ +

La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.

+ +

Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada Box Alignment Level 3. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.

+ +

En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.

+ +

El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en flex-end para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en box1 para que anule el valor por defecto y se estire a la altura del contenedor, y en box2 para que se alinee con el inicio del contenedor flexible.

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}

+
+ +

Alineación en CSS Grid Layout

+ +

En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a start y a end en vez de a flex-start yflex-end. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}

+
+ +

La unidad fr y flex-basis

+ +

Ya hemos visto que la unidad fr asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad frcombinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades flex en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.

+ +

Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.

+ +

En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.

+ +

Auto-filling grid tracks

+ +

Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades auto-fill y auto-fit.

+ +

En el siguiente ejemplo he usado auto-fill en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

Una cantidad flexible de pistas

+ +

Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando auto-fill y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con minmax. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en 1fr. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de 1fr y repartirá el espacio restante entre los ítems.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}

+
+ +

Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.

+ +

El grid y los elementos absolutamente posicionados

+ +

Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.

+ +

El grid container como bloque contenedor

+ +

Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad position: absolute a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.

+ +

En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene position: relative y así se convierte en el contexto de posicionamiento de este elemento.

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">
+    Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+   </div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+
+ +

{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}

+
+ +

Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades top y left. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.

+ +

Si eliminamos position: absolute de las reglas de .box3 podemos ver cómo se mostraría sin el posicionamiento.

+ +

El grid container como parent

+ +

Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos position: relative del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.

+ +

Image of grid container as parent

+ +

Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.

+ +

Con un grid area como parent

+ +

Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de .box3 de la cuadrícula.

+ +

He dado a .box3 position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+    </div>
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}

+
+ +

Grid y display: contents

+ +

Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y display: contents. El valor de contents en la propiedad display es un nuevo valor que se describe en Display specification de la siguiente manera:

+ +
+

“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”

+
+ +

Si configuras un ítem como display: contents la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como display:block.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

Si ahora añado display: contents a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar display: contents de manera similar en flexbox para que los ítems anidados se conviertan en flex items.

+ +

Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.

+ + diff --git a/files/es/web/css/css_logical_properties/basic_concepts/index.html b/files/es/web/css/css_logical_properties/basic_concepts/index.html new file mode 100644 index 0000000000..a90c3b016f --- /dev/null +++ b/files/es/web/css/css_logical_properties/basic_concepts/index.html @@ -0,0 +1,71 @@ +--- +title: Conceptos básicos de las Propiedades y Valores Lógicos +slug: Web/CSS/CSS_Logical_Properties/Basic_concepts +translation_of: Web/CSS/CSS_Logical_Properties/Basic_concepts +--- +
{{CSSRef}}
+ +

La Especificación de Propiedades y Valores Lógicos introduce asignaciones relativas al flujo para muchas de las propiedades y valores en CSS. Este artículo introduce la especificación y explica las propiedades y valores relativos al flujo.

+ +

¿Por qué necesitamos propiedades lógicas?

+ +

Tradicionalmente CSS ha medido las cosas de acuerdo con las dimensiones físicas de la pantalla. Por lo tanto, decimos que las cajas tienen un ancho ({{CSSxRef("width")}}) y un alto ({{CSSxRef("height")}}), posicionamos elementos, los flotamos, les asignamos bordes, márgenes y rellenos arriba (top), a la derecha (right), abajo (bottom), a la izquierda ( left), etc. La especificación de Propiedades y valores Logicos define una asignación de esos valores físicos a su lógica, o flujo relativo — por ejemplo, comienzo (start) y final (end) en oposición a izquierda (left) y derecha (right) / arriba (top) y abajo (bottom) .

+ +

Un ejemplo de por qué esas asignaciones podrían ser necesarias es el siguiente: tengo el diseño de una pantalla usando CSS Grid, el contenedor de la rejilla tiene un ancho y estoy usando las propiedades {{CSSxRef("align-self")}} y {{CSSxRef("justify-self")}} para alinear los elementos dentro del contenedor. Esas propiedades son de flujo relativo — justify-self: start alinea el elemento al inicio de la dimensión en línea, align-self: start hace lo mismo en la dimensión bloque.

+ +

A grid in a horizontal writing mode

+ +

Si ahora cambio el modo de escritura para este componente a vertical-rl usando la propiedad {{CSSxRef("writing-mode")}}, la alineación sigue trabajando de la misma forma. La dimensión en línea está ahora de forma vertical y la dimensión bloque de forma horizontal. Sin embargo, la rejilla no se ve igual ya que el ancho asignado para el contenedor es una medida horizontal, vinculada a la posición física y no a la posición lógica o al flujo relativo del texto.

+ +

A grid in vertical writing mode.

+ +

Si en lugar de usar la propiedad width usamos la propiedad lógica {{CSSxRef("inline-size")}}, el componente funciona de la misma forma sin importar en qué modo de escritura se encuentre.

+ +

A grid layout in vertical writing mode

+ +

Puedes probar lo anterior en el siguiente ejemplo en vivo. Cambia la propiedad writing-mode de vertical-rl a horizontal-tb en .box para mirar cómo cambia el diseño con las diferentes propiedades.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

+ +

Cuando trabajamos en un sitio con un modo de escritura diferente al predeterminado (horizontal) o por razones creativas, ser capaces de relacionarnos con el flujo del contenido tiene mucho sentido.

+ +

Dimensiones de bloque y en línea

+ +

Dos conceptos claves para trabajar con las propiedades y valores al flujo relativo, son las dimensiones de bloque y en línea. Como vimos anteriormente, los métodos de diseño de CSS como Flexbox y Grid usan los conceptos de bloque (block) y en línea (inline) en vez de usar los conceptos de derecha (right) e izquierda (left) / arriba (top) y abajo (bottom) para alinear elementos.

+ +

La dimensión en línea (inline) es la dimensión a lo largo de la cual se ejecuta una línea de texto en el modo de escritura en uso. Por lo tanto, en un documento en español con el texto ejecutándose horizontalmente de izquierda a derecha o un documento árabe con el texto ejecutándose horizontalmente de derecha a izquierda, la dimensión en línea es horizontal. Si cambiamos a un modo de escritura vertical (por ejemplo, un documento japonés), la dimensión en línea ahora es vertical, ya que las líneas en ese modo de escritura se ejecutan verticalmente.

+ +

La dimensión en bloque es la dimensión en la que los bloques —como los párrafos— se muestran uno después del otro. Tanto en español como en árabe, los bloques se ejecutan verticalmente, mientras que en cualquier modo de escritura vertical se ejecutan horizontalmente.

+ +

El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura horizontal:

+ +

diagram showing the inline axis running horizontally, block axis vertically.

+ +

El siguiente diagrama muestra las direcciones de bloque y en línea en un modo de escritura vertical:

+ +

Diagram showing the block axis running horizontally the inline axis vertically.

+ +

Soporte en navegadores

+ +

Las Propiedades y Valores lógicos pueden ser considerados como un par de grupos en términos de la compatibilidad actual del navegador. Algunas de las propiedades son esencialmente asignadas desde la versión física, por ejemplo {{CSSxRef("inline-size")}} por {{CSSxRef("width")}} o {{CSSxRef("margin-inline-start")}} en lugar de {{CSSxRef("margin-left")}}. Esa asignación de propiedades se está comenzando a ver bien en los diferentes navegadores; sin embargo, si miras la página de cada propiedad en la referencia en MDN, verás que el único navegador moderno que no cuenta con estas propiedades es Edge.

+ +

Hay otro grupo de estas propiedades lógicas que no tienen una asignación directa con las propiedades físicas existentes. Estas son abreviaturas posibles gracias al hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería {{CSSxRef("margin-block")}}, que es una abreviación de {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. Actualmente, estas propiedades no tiene soporte en navegadores.

+ +
+

Nota: CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es #1282.

+
+ +

Pruebas para el soporte en navegadores

+ +

Puedes probar el soporte de las propiedades y valores lógicos usando feature queries. Por ejemplo, {{CSSxRef("width")}}, prueba para {{CSSxRef("inline-size")}} y, si esto es soportado, establece el ancho (width) en automático (auto) y el tamaño en línea (inline-size) al valor del ancho (width) original.

+ +

{{EmbedGHLiveSample("css-examples/logical/intro-feature-queries.html", "100%", 700)}}

+ +

Mira también

+ + diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/dimensionamiento/index.html new file mode 100644 index 0000000000..a5a9b4063c --- /dev/null +++ b/files/es/web/css/css_logical_properties/dimensionamiento/index.html @@ -0,0 +1,89 @@ +--- +title: Dimensionamiento para propiedades lógicas +slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.

+ +

Cuando especificamos el tamaño de un ítem, las Propiedades y Valores Lógicos te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.

+ +

Asignaciones para dimensiones

+ +

La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura  horizontal-tb, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.

+ +

Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades LógicasPropiedades Físicas
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
+ +

Ejemplo de ancho y alto

+ +

Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (width) con inline-size y el alto (height) con block-size dará el mismo diseño.

+ +

En el siguiente ejemplo, establecemos un modo de escritura horizontal-tb. Cambiamos esto por vertical-rl y veremos que el primer ejemplo — cuando usamos width y height — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos inline-size y block-size — seguirá la dirección del texto como si todo el bloque hubiera girado.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

Ejemplo de ancho y alto mínimo

+ +

También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de inline-size y block-size, pero establecen un tamaño mínimo en lugar de uno fijo.
+
+ Intente cambiar el siguiente ejemplo a vertical-rl, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando min-height en el primer ejemplo y min-block-size en el segundo.

+ +

 

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

Ejemplo de ancho y alto máximo

+ +

Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

Palabras claves para redimensionamiento lógico

+ +

La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de horizontal y vertical. La propiedad resize también tiene valores de palabras clave lógicas. Usar resize: inline permite cambiar el tamaño en la dimensión inline y resize: block permite cambiar el tamaño en la dimensión de bloque.

+ +

El valor de la palabra clave de bothpara la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

Nota: Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.

+ +

 

+
diff --git a/files/es/web/css/css_logical_properties/floating_and_positioning/index.html b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html new file mode 100644 index 0000000000..2f1654079f --- /dev/null +++ b/files/es/web/css/css_logical_properties/floating_and_positioning/index.html @@ -0,0 +1,206 @@ +--- +title: Propiedades lógicas para flotantes y posicionamiento +slug: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +translation_of: Web/CSS/CSS_Logical_Properties/Floating_and_positioning +--- +
{{CSSRef}}
+ +
 
+ +

La especificación de Propiedades y Valores Lógicos contiene una asignación para los valores físicos {{cssxref("float")}} y {{cssxref("clear")}}, y también para las propiedades de posicionamiento usadas con positioned layout. Esta guía nos permite saber cómo utilizar estas propiedades.

+ +

Asignando propiedades y valores

+ +

La tabla a continuación detalla las propiedades y valores discutidos en esta guía junto con sus asignaciones físicas. Estas, asumen un modo de escritura ({{cssxref("writing-mode")}}), con una dirección de izquierda a derecha (left-to-right).

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Propiedad o valor lógico

+ 		+

Propiedad o valor lógico

+
+

{{cssxref("float")}}: inline-start

+ 		+

{{cssxref("float")}}: left

+
+

{{cssxref("float")}}: inline-end

+ 		+

{{cssxref("float")}}: right

+
+

{{cssxref("clear")}}: inline-start

+ 		+

{{cssxref("clear")}}: left

+
+

{{cssxref("clear")}}: inline-end

+ 		+

{{cssxref("clear")}}: right

+
+

{{cssxref("inset-inline-start")}}

+ 		+

{{cssxref("left")}}

+
+

{{cssxref("inset-inline-end")}}

+ 		+

{{cssxref("right")}}

+
+

{{cssxref("inset-block-start")}}

+ 		+

{{cssxref("top")}}

+
+

{{cssxref("inset-block-end")}}

+ 		+

{{cssxref("bottom")}}

+
+

{{cssxref("text-align")}}: start

+ 		+

{{cssxref("text-align")}}: left

+
+

{{cssxref("text-align")}}: end

+ 		+

{{cssxref("text-align")}}: right

+
+ +

 

+ +

Además de estas propiedades asignadas, hay algunas propiedades abreviadas adicionales que son posibles al poder abordar las dimensiones de bloque y en línea. Estos no tienen mapeo a las propiedades físicas.

+ + + + + + + + + + + + + + + + + + + + + + +
+

Propiedad lógica

+ 		+

Propósito

+
+

{{cssxref("inset-inline")}}

+ 		+

Establece los dos valores de inserción anteriores para la dimensión en línea simultáneamente.

+
+

{{cssxref("inset-block")}}

+ 		+

Establece los dos valores de inserción anteriores para la dimensión de bloque simultáneamente.

+
+

{{cssxref("inset")}}

+ 		+

Establece los cuatro valores de inserción simultáneamente.

+
+ +

 

+ +

Flotante y ejemplo claro

+ +

Los valores físicos usados con las propiedades {{cssxref("float")}} y {{cssxref("clear")}} son left, right y both. La especificación de las Propiedades Lógicas definen los valores inline-start y inline-end como asignación para left y right.

+ +

En el ejemplo de abajo tenemos dos cajas — la primera tiene una caja flotante con float: left, la segunda con float: inline-start. Si tu cambias el modo de escritura (writing-mode) a vertical-rl o la dirección (direction) a rtl verás que la caja flotando a la izquierda siempre se queda en la izquierda, mientras que el ítem inline-start-floated sigue la dirección (direction) y el modo de escritura (writing-mode).

+ +

{{EmbedGHLiveSample("css-examples/logical/float.html", '100%', 700)}}

+ +

Ejemplo: Propiedades de inserción para diseño posicionado

+ +

El posicionamiento generalmente nos permite posicionar un elemento de una manera relativa al bloque de contención — esencialmente, insertamos el elemento en relación con el lugar donde caería en función del flujo normal. Para hacer esto, hemos usado popiedades físicas como {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} y {{cssxref("left")}}.

+ +

Estas propiedades toman una longitud o un porcentaje como valor y se relacionan con las dimensiones de la pantalla del usuario.

+ +

Se han creado nuevas propiedades en la especificación de Propiedades Lógicas para cuando desee que el posicionamiento se relacione con el flujo de texto en su modo de escritura. Estos son los siguientes: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} y {{cssxref("inset-inline-end")}}.

+ +

En el siguiente ejemplo hemos usado las propiedades inset-block-start y inset-inline-end para posicionar la caja azul usando un posicionamiento absoluto dentro del área con el borde punteado de color gris, que tiene position: relative. Podemos cambiar la propiedad de modo de escritura (writing-mode) a vertical-rl, o agregar direction: rtl, y ver cómo el cuadro de flujo relativo se mantiene con la dirección del texto.

+ +

{{EmbedGHLiveSample("css-examples/logical/positioning-inset.html", '100%', 700)}}

+ +

Nuevas abreviaciones de dos- y cuatro-valores

+ +

Al igual que con otras propiedades en la especificación, tenemos algunas propiedades abreviadas nuevas, que permiten configurar dos o cuatro valores a la vez. Estos no tienen una equivalencia directa a propiedades físicas.

+ +
    +
  • +

    {{cssxref("inset")}} — pone los cuatro lados juntos.

    +
    • +
  • +

    {{cssxref("inset-inline")}} — pone los dos en línea juntos.

    +
    • +
  • +

    {{cssxref("inset-block")}} — pone los dos bloques juntos.

    +
    • +
+ +
+

Nota: Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.

+
+ +

Ejemplo: Valores lógicos para text-align

+ +

La propiedad {{cssxref("text-align")}} tiene valores lógicos que se relacionan con la dirección del texto. — en lugar de usar left y right usamos start y end. En el siguiente ejemplo tenemos text-align: right en el primer bloque y text-align: end en el segundo.

+ +

Si cambias el valor de la dirección (direction) a rtl verás que la alineación permanece a la derecha para el primer bloque, pero va al extremo lógico en el segundo bloque.

+ +

{{EmbedGHLiveSample("css-examples/logical/text-align.html", '100%', 700)}}

+ +

Esto funciona de una manera más consistente cuando se usa la alineación de caja que usa inicio y final en lugar de direcciones físicas para la alineación.

diff --git a/files/es/web/css/css_logical_properties/index.html b/files/es/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..3271fee1c4 --- /dev/null +++ b/files/es/web/css/css_logical_properties/index.html @@ -0,0 +1,172 @@ +--- +title: Propiedades y Valores Lógicos de CSS +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - Propiedades lógicas + - Referencia + - Valores lógicos + - Visión general +translation_of: Web/CSS/CSS_Logical_Properties +--- +
{{CSSRef}}
+ +

CSS Logical Properties (las propiedades lógicas en CSS) son un módulo de CSS que introduce propiedades y valores lógicos, proporcionando la capacidad de controlar el diseño de forma lógica en vez de la asignación de dimensiones físicas de dirección y dimensión.

+ +

Este módulo también define propiedades y valores lógicos para propiedades previamente definidas en CSS 2.1. Las propiedades lógicas definen una equivalencia a sus propiedades físicas correspondientes.  

+ +

Dimensiones de bloque y en línea

+ +

Las propiedades y valores lógicos usan los términos abstractos de bloque (block) y en línea (inline) para describir la dirección en la que fluyen. El sentido físico de estos términos depende del modo de escritura.

+ +
+
Dimensión de bloque
+
Es la dimensión perpendicular al flujo del texto en línea, es decir, la dimensión vertical en un modo de escritura horizontal, y la dimensión horizontal en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión vertical.
+
Dimensión en línea
+
Es la dimensión paralela al flujo del texto en línea, es decir, la dimensión horizontal en un modo de escritura horizontal, y la dimensión vertical en un modo de escritura vertical. Para el texto estándar en inglés, es la dimensión horizontal.
+
+ +

Referencia

+ +

Propiedades para dimensionamiento

+ +
+
    +
  • {{CSSxRef("block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inline-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("max-block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("max-inline-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("min-block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("min-inline-size")}} {{Experimental_Inline}}
    • +
+
+ +

Propiedades para márgenes, bordes y relleno

+ +
+
    +
  • {{CSSxRef("border-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-color")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("border-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-style")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("border-width")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("margin")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("margin-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding")}} (logical {{Experimental_Inline}} palabra clave)
    • +
  • {{CSSxRef("padding-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}
    • +
+
+ +

Propiedades para flotantes y posicionamiento

+ +
+
    +
  • {{CSSxRef("clear")}} (inline-end {{Experimental_Inline}} y inline-start {{Experimental_Inline}} palabras claves)
    • +
  • {{CSSxRef("float")}} (inline-end {{Experimental_Inline}} y inline-start {{Experimental_Inline}} palabras claves)
    • +
  • {{CSSxRef("inset")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}
    • +
+
+ +

Otras propiedades

+ +
+
    +
  • {{CSSxRef("caption-side")}} (inline-end {{Experimental_Inline}} y inline-start {{Experimental_Inline}} palabras claves)
    • +
  • {{CSSxRef("resize")}} {{Experimental_Inline}} (block {{Experimental_Inline}} y inline {{Experimental_Inline}} palabras claves)
    • +
  • {{CSSxRef("text-align")}} (end {{Experimental_Inline}} y start {{Experimental_Inline}} palabras claves)
    • +
+
+ +

Propiedades obsoletas

+ +
+
    +
  • {{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (ahora {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (ahora {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (ahora {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
    • +
  • {{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (ahora {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
    • +
+
+ +

Guías

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

En general:

+ +
    +
  • Firefox tiene soporte para las propiedades asignadas — donde hay una directa asignación desde la versión física a la versión lógica.
    • +
  • Chrome, desde la versión 69, tiene soporte para las propiedades asignadas.
    • +
  • Edge actualmente no tiene soporte.
    • +
  • Firefox 66 introduce soporte para dos valores abreviados.
    • +
+ +

Mira la página de la propiedad en específico para tener una información más completa sobre su compatibilidad.

diff --git a/files/es/web/css/css_logical_properties/margins_borders_padding/index.html b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html new file mode 100644 index 0000000000..198bf38300 --- /dev/null +++ b/files/es/web/css/css_logical_properties/margins_borders_padding/index.html @@ -0,0 +1,298 @@ +--- +title: 'Propiedades lógicas para márgenes, bordes y rellenos' +slug: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +translation_of: Web/CSS/CSS_Logical_Properties/Margins_borders_padding +--- +

{{CSSRef}}

+ +

La especificación de Propiedades y Valores Lógicos define asignaciones relativas al flujo para las diversas propiedades de margen, borde, relleno y sus abreviaturas. En esta guía echamos un vistazo a estos.

+ +

Si ha visto la página principal de Propiedades y Valores Lógicos de CSS, verá que hay una gran cantidad de propiedades en la lista. Esto se debe principalmente al hecho de que hay cuatro valores a largo plazo para cada margen, borde y lado de relleno, más todos los valores abreviados.

+ +

Asignaciones para márgenes, bordes, y rellenos

+ +

La especificación detalla la asignación para cada valor lógico con una contraparte física. En la tabla de abajo he dado estos valores asignados asumiendo que el modo de escritura ({{cssxref("writing-mode")}}) en uso es horizontal-tb — con una dirección de izquierda a derecha. La dirección en línea por lo tanto va horizontalmente — izquierda a derecha — y {{cssxref("margin-inline-start")}} debería ser quivalente a {{cssxref("margin-left")}}.

+ +

Si usaste el modo de escritura horizontal-tb con una dirección del texto de derecha a izquierda, entonces {{cssxref("margin-inline-start")}} debería ser el mismo que {{cssxref("margin-right")}}, y en un modo de escritura vertical esto debería ser el mismo que usar {{cssxref("margin-top")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedad LógicaPropiedad Física
{{cssxref("border-block-end")}}{{cssxref("border-bottom")}}
{{cssxref("border-block-end-color")}}{{cssxref("border-bottom-color")}}
{{cssxref("border-block-end-style")}}{{cssxref("border-bottom-style")}}
{{cssxref("border-block-end-width")}}{{cssxref("border-bottom-width")}}
{{cssxref("border-block-start")}}{{cssxref("border-top")}}
{{cssxref("border-block-start-color")}}{{cssxref("border-top-color")}}
{{cssxref("border-block-start-style")}}{{cssxref("border-top-style")}}
{{cssxref("border-block-start-width")}}{{cssxref("border-top-width")}}
{{cssxref("border-inline-end")}}{{cssxref("border-right")}}
{{cssxref("border-inline-end-color")}}{{cssxref("border-right-color")}}
{{cssxref("border-inline-end-style")}}{{cssxref("border-right-style")}}
{{cssxref("border-inline-end-width")}}{{cssxref("border-right-width")}}
{{cssxref("border-inline-start")}}{{cssxref("border-left")}}
{{cssxref("border-inline-start-color")}}{{cssxref("border-left-color")}}
{{cssxref("border-inline-start-style")}}{{cssxref("border-left-style")}}
{{cssxref("border-inline-start-width")}}{{cssxref("border-left-width")}}
{{cssxref("border-start-start-radius")}}{{cssxref("border-top-left-radius")}}
{{cssxref("border-start-end-radius")}}{{cssxref("border-bottom-left-radius")}}
{{cssxref("border-end-start-radius")}}{{cssxref("border-top-right-radius")}}
{{cssxref("border-end-end-radius")}}{{cssxref("border-bottom-right-radius")}}
{{cssxref("margin-block-end")}}{{cssxref("margin-bottom")}}
{{cssxref("margin-block-start")}}{{cssxref("margin-top")}}
{{cssxref("margin-inline-end")}}{{cssxref("margin-right")}}
{{cssxref("margin-inline-start")}}{{cssxref("margin-left")}}
{{cssxref("padding-block-end")}}{{cssxref("padding-bottom")}}
{{cssxref("padding-block-start")}}{{cssxref("padding-top")}}
{{cssxref("padding-inline-end")}}{{cssxref("padding-right")}}
{{cssxref("padding-inline-start")}}{{cssxref("padding-left")}}
+ +

Hay también algunas abreviaciones que han sido posibles porque tenemos la capacidad de apuntar ambos bloques o ambos bordes en línea de la caja simultáneamente. Estas abreviaciones no tienen equivalente físico.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadPropósito
{{cssxref("border-block")}}Establece {{cssxref("border-color")}}, {{cssxref("border-style")}}, y {{cssxref("border-width")}} para ambos bordes de bloque.
{{cssxref("border-block-color")}}Establece  border-color para ambos bordes de bloque.
{{cssxref("border-block-style")}}Establece  border-style para ambos bordes de bloque.
{{cssxref("border-block-width")}}Establece  border-width para ambos bordes de bloque.
{{cssxref("border-inline")}}Establece  border-color, -style, y -width para ambos bordes en línea.
{{cssxref("border-inline-color")}}Establece  border-color para ambos bordes en línea.
{{cssxref("border-inline-style")}}Establece  border-style para ambos bordes en línea.
{{cssxref("border-inline-width")}}Establece border-width para ambos bordes en línea.
{{cssxref("margin-block")}}Establece todos los {{cssxref("margin")}}s en bloque.
{{cssxref("margin-inline")}}Establece todos los margins en línea.
{{cssxref("padding-block")}}Establece {{cssxref("padding")}} en bloque.
{{cssxref("padding-inline")}}Establece el padding en línea.
+ +

Ejemplo para márgenes

+ +

Las propiedades asignadas para márgenes de {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}}, y {{cssxref("margin-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.

+ +

En el siguiente ejemplo, crearemos dos cajas y agregaremos diferentes tamaños de márgenes a cada borde. Hemos agregado un contenedor con un borde para poder hacer el márgen más notorio.

+ +

Una caja usa propiedades físicas y la otra usa propiedades lógicas. Intenta cambiar la propiedad {{cssxref("direction")}} a rtl para hacer que los cuadros se muestren en dirección de derecha a izquierda, los márgenes del primer cuadro permanecerán en el mismo lugar, mientras que los márgenes en la dimensión en línea del segundo cuadro cambiarán.

+ +

También puedes intentar cambiar el modo de escritura (writing-mode) de horizontal-tb a vertical-rl. De nuevo, notarás cómo las márgenes permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.

+ +

{{EmbedGHLiveSample("css-examples/logical/margin-longhands.html", '100%', 700)}}

+ +

Abreviaciones para márgenes

+ +

Como ahora podemos apuntar a ambos lados de la caja — ya sea ambos lados en bloque o ambos lados en línea either — hay nuevas abreviaciones disponibles, {{cssxref("margin-inline")}} y {{cssxref("margin-block")}}, que aceptan dos valores. El primer valor se aplicará al comienzo de esta dimensión y la segunda al final. Si tú solo usas un valor, se aplica para ambos.

+ +

En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba de la caja y un margen de 10px abajo.

+ +
.box {
+  margin-block: 5px 10px;
+}
+ +
+

Nota: Las propiedades abreviadas margin-inline y margin-block se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.

+
+ +

Ejemplos para rellenos (Paddings)

+ +

Las propiedades asignadas para rellenos de {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}}, y {{cssxref("padding-inline-end")}} pueden ser usadas en lugar de sus contrapartes físicas.

+ +

En el siguiente ejemplo tenemos dos cajas, una de ellas está usando propiedades de relleno físico y la otra propiedades de relleno lógico. Con un modo de escritura (writing-mode) de horizontal-tb, en ambas cajas aparecerán lo mismo.

+ +

Intenta cambiar la propiedad direction a rtl para hacer que las cajas se muestren en dirección de derecha a izquierda, los rellenos del primer cuadro permanecerán en el mismo lugar, mientras que los rellenos en la dimensión en línea del segundo cuadro cambiarán.

+ +

También puedes intentar cambiar el modo de escritura (writing-mode) de horizontal-tb a vertical-rl. De nuevo, notarás cómo los rellenos permanecen en el mismo lugar de la primera caja, pero cambia para seguir la dirección del texto en el segundo.

+ +

{{EmbedGHLiveSample("css-examples/logical/padding-longhands.html", '100%', 700)}}

+ +

Abreviaciones para rellenos (paddings)

+ +

Como con las márgenes, hay dos abreviaciones para rellenos — {{cssxref("padding-inline")}} y {{cssxref("padding-block")}} — que permiten configurar el relleno a las dimenciones de bloque y en línea, respectivamente.

+ +

En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba de la caja y un relleno de 10px abajo:

+ +
.box {
+  padding-block: 5px 10px;
+}
+ +
+

Note: Las abreviaciones de las propiedades padding-inline y padding-block se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.

+
+ +

Ejemplos para bordes

+ +

Las propiedades del borde son la razón principal por la que las propiedades y valores lógicos parecen tener tantas propiedades, ya que tenemos longhands para el color, el ancho y el estilo del borde en cada lado de una caja, junto con las abreviaciones para establecer los tres a la vez por cada lado. Al igual que con el margen y el relleno, tenemos una versión asignada de cada propiedad física.

+ +

El siguiente demo usa algunas longhands y tres valores de abreviaciones. Como con los otros demos, intenta cambiar la propiedad direction a rtl para que las cajas se muestren en dirección de derecha a izquierda, o cambia el modo de escritura (writing-mode) de horizontal-tb a vertical-rl.

+ +

{{EmbedGHLiveSample("css-examples/logical/border-longhands.html", '100%', 700)}}

+ +

Nuevas abreviaciones para bordes

+ +

Hay valores abreviados de dos valores para establecer el ancho, el estilo y el color del bloque o dimensión en línea, y valores abreviados de dos valores para establecer los tres valores en la dimensión de bloque o enlínea. El siguiente código, en un modo de escritura horizontal, le dará un borde sólido verde de 2px en la parte superior e inferior del cuadro, y un borde púrpura de puntos de 4px a la izquierda y la derecha.

+ +
.box {
+  border-block: 2px solid green;
+  border-inline-width: 4px;
+  border-inline-style: dotted;
+  border-inline-color: rebeccapurple;
+}
+ +
+

Nota: Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.

+
+ +

Flujo de propiedades relativas del border-radius

+ +

 

+ +

La especificación ha agregado recientemente valores relativos al flujo para las longitudes {{cssxref ("border-radius")}}. Estos aún no han sido implementados por ningún navegador. El siguiente ejemplo, en un modo de escritura horizontal, establecería el radio del borde superior derecho en 1em, la parte inferior derecha a 0, la parte inferior izquierda a 20px y la parte superior izquierda a 40px.

+ +

 

+ +
.box {
+  border-end-start-radius: 1em;
+  border-end-end-radius: 0;
+  border-start-end-radius: 20px;
+  border-start-start-radius: 40px;
+}
+ +

Indicating logical values for the 4-value shorthand syntax

+ +

La especificación hace una sugerencia para los métodos abreviados de cuatro valores, como la propiedad de margin, sin embargo, la decisión final sobre cómo debe indicarse esto aún no se ha resuelto, y se trata en este issue.

+ +

El uso de una abreviatura de cuatro valores, como el margen, el relleno o el borde, utilizará actualmente las versiones físicas, por lo que si es importante seguir el flujo del documento, use las propiedades longhand por el momento.

+ +

 

diff --git a/files/es/web/css/css_modelo_caja/index.html b/files/es/web/css/css_modelo_caja/index.html new file mode 100644 index 0000000000..320800f82e --- /dev/null +++ b/files/es/web/css/css_modelo_caja/index.html @@ -0,0 +1,165 @@ +--- +title: Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja +tags: + - CSS + - Modelo de Caja CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

El modelo de caja CSS  es un módulo  CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.

+ +

Referencia

+ +

Propiedades

+ +

Propiedades que controlan el flujo del contenido en una caja.

+ +
+
    +
  • {{cssxref("box-decoration-break")}}
    • +
  • {{cssxref("box-sizing")}}
    • +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

Propiedades que controlan el tamaño de una caja.

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

Propiedades que controlan los márgenes de una caja.

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
+
+ +

Propiedades que controlan los rellenos de una caja

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

Otras propiedades

+ +
+
    +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("visibility")}}
    • +
+
+ +

Guías y Herramientas

+ +
+
Introduction to the CSS box model
+
Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.
+
Mastering margin collapsing
+
En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.
+
Box-shadow generator
+
Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git "a/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" "b/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" new file mode 100644 index 0000000000..45571faf77 --- /dev/null +++ "b/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" @@ -0,0 +1,66 @@ +--- +title: Introducción al Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS +tags: + - CSS + - Guía + - Modelo de Caja + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar modelo de caja de CSS. CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.

+ +

Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el límite del contenido, el límite del relleno (padding), el límite del borde y el límite del margen.

+ +

CSS Box model

+ +

El área de contenido, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video. Sus dimensiones son el ancho del contenido (o el ancho de la caja de contenido) y la altura del contenido (o la altura de la caja de contenido). A menudo tiene un color de fondo o una imagen de fondo.

+ +

Si la propiedad {{cssxref("box-sizing")}} está configurada en content-box (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height")}}, {{cssxref("min-height")}} y {{cssxref("max-height")}}.

+ +

El área de relleno (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento. Sus dimensiones son el ancho de la caja de relleno y la altura de la caja de relleno. Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.

+ +

El espesor del relleno está determinado por las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, y la propiedad abreviada {{cssxref("padding")}}.

+ +

El área del borde, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento. Sus dimensiones son el ancho de la caja del borde y la altura de la caja del borde.

+ +

El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}. Si la propiedad {{cssxref("box-sizing")}} se establece en border-box, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min- width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max-height")}}.

+ +

El área del margen, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el ancho de la caja del margen y la altura de la caja del margen.

+ +

El tamaño del área del margen está determinado por las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, { {cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}. Cuando se produce el colapso del margen, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.

+ +

Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y el relleno todavía se muestran alrededor del contenido.

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Aunque está redactado con más precisión, no hay cambio práctico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definición inicial
+ +

Vea también

+ +
    +
  • {{css_key_concepts}}
    • +
  • Propiedades CSS relacionadas: {{ cssxref("box-sizing") }}, {{ cssxref("background-clip") }}, {{ cssxref("height") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("width") }}, {{ cssxref("max-height") }}, {{ cssxref("min-height") }}, {{ cssxref("padding") }}, {{ cssxref("padding-top") }}, {{ cssxref("padding-right") }}, {{ cssxref("padding-bottom") }}, {{ cssxref("padding-left") }}, {{ cssxref("border") }}, {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{ cssxref("border-bottom") }}, {{ cssxref("border-left") }}, {{ cssxref("border-width") }}, {{ cssxref("border-top-width") }}, {{ cssxref("border-right-width") }}, {{ cssxref("border-bottom-width") }}, {{ cssxref("border-left-width") }}, {{ cssxref("margin") }}, {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }}, {{ cssxref("margin-left") }}
    • +
diff --git a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..dafdf71855 --- /dev/null +++ b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html @@ -0,0 +1,96 @@ +--- +title: Entendiendo el colapso de margen +slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Los márgenes Top y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

+ +

El colapso de margen ocurre en tres casos básicos:

+ +
+
Hermanos adjacentes
+
Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).
+
Padre y primer/último hijo
+
Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.
+
Bloques vacíos
+
Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.
+
+

Cosas a tener en cuenta:

+ + +
    +
  • Cuando estos casos están combinados ocurrirá un colapso de márgenes más complejo (de más de dos márgenes).
    • +
  • Estas reglas se aplican incluso a márgenes con valor cero, así que el margen del primer/último hijo siempre termina fuera de su padre (de acuerdo a las reglas de arriba) independientemente de que el margen del padre sea o no sea cero.
    • +
  • Cuando se trata de márgenes negativos, el tamaño del margen colapsado es la suma del margen positivo más grande y el margen negativo más pequeño (el más negativo).
    • +
  • Cuando todos los márgenes son negativos, el tamaño del margen colapsado es el margen más pequeño (el más negativo). Esto se aplica tanto a los elementos adyacentes como a los elementos anidados.
    • +
+ +

Ejemplos

+ +

HTML

+ +
<p>El margen inferior de este párrafo está colapsado ....</p>
+<p>... con el margen superior de este párrafo, lo que deja un margen de<code>1.2rem</code> entre ellos.</p>
+
+<div>Este elemento padre contiene dos párrafos!
+  <p>Este párrafo tiene un margen de <code>.4rem</code>  entre él y el texto anterior.</p>
+  <p>Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de <code>2rem</code>.</p>
+</div>
+
+<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Result

+ +

{{EmbedLiveSample('Ejemplos', 'auto', 350)}}

+ + + +

 

+ + +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
+ +

También puedes ver

+ + +
    +
  • {{css_key_concepts}}
    • +
diff --git a/files/es/web/css/css_motion_path/index.html b/files/es/web/css/css_motion_path/index.html new file mode 100644 index 0000000000..4d439b2126 --- /dev/null +++ b/files/es/web/css/css_motion_path/index.html @@ -0,0 +1,78 @@ +--- +title: CSS Motion Path +slug: Web/CSS/CSS_Motion_Path +translation_of: Web/CSS/CSS_Motion_Path +--- +
{{CSSRef}}{{seecompattable}}
+ +

Motion Path es un módulo CSS que permite animar cualquier objeto gráfico a lo largo de una ruta personalizada.

+ +

La idea es que cuando se deseaba animar un elemento que se movía a lo largo de un “path”, anteriormente solo teniamos las propiedades de animación, posición, etc. a nuestra disposición, lo que no era ideal y solo permitía movimientos simples. Con {{cssxref("offset-path")}} puedes definir un "path" específico  de cualquier forma que se quiera. Luego se animará a lo largo de ese "path" animando {{cssxref("offset-distance")}}, y variar la rotación en algún punto usando {{cssxref("offset-rotate")}}.

+ +

Ejemplo básico

+ +
<div id="motion-demo"></div>
+
+ +
#motion-demo {
+  offset-path: path('M20,20 C20,100 200,0 200,100');
+  animation: move 3000ms infinite alternate ease-in-out;
+  width: 40px;
+  height: 40px;
+  background: cyan;
+}
+
+@keyframes move {
+  0% {
+    offset-distance: 0%;
+  }
+  100% {
+    offset-distance: 100%;
+  }
+}
+ +

{{EmbedLiveSample('Basic_example', '100%', 150)}}

+ +

Referéncia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("offset")}}
    • +
  • {{cssxref("offset-anchor")}}
    • +
  • {{cssxref("offset-distance")}}
    • +
  • {{cssxref("offset-path")}}
    • +
  • {{cssxref("offset-position")}}
    • +
  • {{cssxref("offset-rotate")}}
    • +
+
+ +

Espedificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Initial definition.
+ +

Compatibilidad de Browsers

+ +

offset property

+ +
+ + +

{{Compat("css.properties.offset-path")}}

+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html new file mode 100644 index 0000000000..0278b3254f --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html @@ -0,0 +1,179 @@ +--- +title: Agregando z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Agregando {{ cssxref("z-index") }}

+ +

El primer ejemplo, Apilando sin z-index, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.

+ +

Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.

+ +
+

Precaución: z-index solo tiene efecto si un elemento es posicionado.

+
+ +
    +
  • bottom: el más lejano al observador
    • +
  • ...
    • +
  • Capa -3
    • +
  • Capa -2
    • +
  • Capa -1
    • +
  • Capa 0capa de renderizado por defecto
    • +
  • Capa 1
    • +
  • Capa 2
    • +
  • Capa 3
    • +
  • ...
    • +
  • top: el más cercano al observador
    • +
+ +
+

Notas:

+ +
    +
  • Cuando la propiedad z-index no ha sido especificada, los elementos son renderizados en la capa de renderizado por defecto 0 (cero).
    • +
  • Si varios elementos comparten el mismo valor z-index (i.e. están situados en la misma capa), las reglas de apilamiento explicadas en la sección Apilando sin z-index son aplicadas.
    • +
+
+ +

En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.

+ +

{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}

+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Adding z-index</title>
+    <style type="text/css">
+
+    div {
+        opacity: 0.7;
+        font: 12px Arial;
+    }
+
+    span.bold { font-weight: bold; }
+
+    #normdiv {
+        z-index: 8;
+        height: 70px;
+        border: 1px dashed #999966;
+        background-color: #ffffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv1 {
+        z-index: 3;
+        height: 100px;
+        position: relative;
+        top: 30px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv2 {
+        z-index: 2;
+        height: 100px;
+        position: relative;
+        top: 15px;
+        left: 20px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #absdiv1 {
+        z-index: 5;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        left: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    #absdiv2 {
+        z-index: 1;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        right: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    </style>
+</head>
+
+<body>
+
+    <br /><br />
+
+    <div id="absdiv1">
+        <br /><span class="bold">DIV #1</span>
+        <br />position: absolute;
+        <br />z-index: 5;
+    </div>
+
+    <div id="reldiv1">
+        <br /><span class="bold">DIV #2</span>
+        <br />position: relative;
+        <br />z-index: 3;
+    </div>
+
+    <div id="reldiv2">
+        <br /><span class="bold">DIV #3</span>
+        <br />position: relative;
+        <br />z-index: 2;
+    </div>
+
+    <div id="absdiv2">
+        <br /><span class="bold">DIV #4</span>
+        <br />position: absolute;
+        <br />z-index: 1;
+    </div>
+
+    <div id="normdiv">
+        <br /><span class="bold">DIV #5</span>
+        <br />no positioning
+        <br />z-index: 8;
+    </div>
+
+</body>
+</html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html new file mode 100644 index 0000000000..81b145e1a3 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html @@ -0,0 +1,144 @@ +--- +title: Apilamiento y float +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float +tags: + - Avanzado + - CSS + - Entendiendo_CSS_z-index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{cssref}}
+ +

Apilamiento y float

+ +

Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:

+ +
    +
  1. Fondo y bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Bloques flotantes
    4. +
  4. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    5. +
+ +

En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.

+ +

Este comportamiento puede ser explicado con una versión mejorada de la lista previa:

+ +
    +
  1. Fondo y bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Bloques flotantes
    4. +
  4. Descendientes en línea en el flujo normal
    5. +
  5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    6. +
+ +
Nota: En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
+ +

{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

+ +

Código fuente de ejemplo

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

 

diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..def9c5ea8e --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html @@ -0,0 +1,132 @@ +--- +title: Ejemplo 1 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Ejemplo 1 del contexto de apilamiento

+ +

Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.

+ +

El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.

+ +

Stacking context example 1

+ +

Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.

+ +

Stacking context example 1

+ +

Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.

+ +

Stacking context example 1

+ +

En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.

+ +

En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • DIV #2 (z-index 1)
      • +
    • DIV #4 (z-index 2)
      • +
    +
    • +
+ +
Nota: El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
+ +

Ejemplo

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..2955b43b7f --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html @@ -0,0 +1,137 @@ +--- +title: Ejemplo 2 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Ejemplo 2 del contexto de apilamiento

+ +

Este es un ejemplo muy simple, pero es la clave para entender el concepto de contexto de apilamiento. Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

+ +

Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.

+ +

Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.

+ +

Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • DIV #2 (z-index 2)
      • +
    • DIV #3 (z-index 1) +
        +
      • DIV #4 (z-index 10)
        • +
      +
      • +
    +
    • +
+ +
Nota:  Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..c41d8b56ad --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html @@ -0,0 +1,183 @@ +--- +title: Ejemplo 3 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +

« CSS « Understanding CSS z-index

+ +

Ejemplo 3 del contexto de apilamiento

+ +

Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.

+ +

Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.

+ +

Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

+ +

El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.

+ +

El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.

+ +

De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.

+ +

Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:

+ +
    +
  • contexto de apilamiento raíz +
      +
    • NIVEL #1 +
        +
      • NIVEL #2 (z-index: 1) +
          +
        • NIVEL #3
          • +
        • ...
          • +
        • NIVEL #3
          • +
        +
        • +
      • NIVEL #2 (z-index: 1)
        • +
      • ...
        • +
      • NIVEL #2 (z-index: 1)
        • +
      +
      • +
    • NIVEL #1
      • +
    • ...
      • +
    • NIVEL #1
      • +
    +
    • +
+ +

Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.

+ +
Nota: En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html new file mode 100644 index 0000000000..1daf172048 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html @@ -0,0 +1,231 @@ +--- +title: El contexto de apilamiento +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

+ +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

El contexto de apilamiento

+ +

 

+ +

En el ejemplo previo, Agregando z-index, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.

+ +

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que

+ +
    +
  • sea el elemento raiz (HTML),
    • +
  • tenga posición (absoluta o relativa) con un valor z-index distinto de "auto",
    • +
  • un elemento flex con un valor z-index distinto de "auto", que sea el elemento padre display: flex|inline-flex,
    • +
  • sean elementos con un valor {{cssxref("opacity")}} menor de 1. (Mira la especificación de opacity),
    • +
  • elementos con un valor  {{cssxref("transform")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("mix-blend-mode")}} distinto de "normal",
    • +
  • elementos con un valor {{cssxref("filter")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("perspective")}} distinto de "none",
    • +
  • elementos con un valor {{cssxref("isolation")}} igual a "isolate",
    • +
  • position: fixed
    • +
  • especifican cualquier atributo superior en {{cssxref("will-change")}} incluso si no especificas valores para estos atributos directamente (Mira este post)
    • +
  • elementos con un valor {{cssxref("-webkit-overflow-scrolling")}} igual a "touch"
    • +
+ +

Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.

+ +

En resumen:

+ +
    +
  • Posicionar y asignar un valor z-index a un elemento HTML crea un contexto de apilamiento, (asi como también lo hace asignar una opacidad parcial)
    • +
  • Contextos de apilamiento pueden ser contenidos en otros contextos de apilamiento, y juntos crean una jerarquía de contextos de apilamiento
    • +
  • Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.
    • +
  • Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.
    • +
+ +
Nota: La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
+ +

El ejemplo

+ +

Example of stacking rules modified using z-index

+ +

En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:

+ +
    +
  • Raíz +
      +
    • DIV #1
      • +
    • DIV #2
      • +
    • DIV #3 +
        +
      • DIV #4
        • +
      • DIV #5
        • +
      • DIV #6
        • +
      +
      • +
    +
    • +
+ +

Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.

+ +
+

Notas:

+ +
    +
  • DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.
    • +
  • Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.
    • +
  • El valor z-index de DIV #3 es 4, pero este valor es independiente del z-index de DIV #4, DIV #5 and DIV #6, porque pertenece a un contexto de apilamiento diferente.
    • +
  • Una forma fácil de descubrir el orden de renderizado de los elementos apilados en el eje Z es pensar en esto como un tipo de "número de versión", donde los elementos hijos son números de versión menores bajo los números de versión mayores de sus padres. De esta manera podemos ver fácilmente cómo un elemento con un valor z-index de 1 (DIV #5) es apilado encima de un elemento con un valor z-index de 2 (DIV #2), y cómo un elemento con un valor z-index de 6 (DIV #4) es apilado debajo de un elemento con un valor z-index de 5 (DIV #1). En nuestro ejemplo (ordenado de acuerdo al orden de renderizado final): +
      +
    • Raíz +
        +
      • El valor z-index de DIV #2 es 2
        • +
      • El valor z-index de DIV #3 es 4 +
          +
        • El valor z-index de DIV #5 es 1, apilado bajo un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.1
          • +
        • El valor z-index de DIV #6 es 3, apilado debajo de un elemento con un valor z-index de 4, que resulta en un orden de renderizado de 4.3
          • +
        • El valor z-index de DIV #4 es 6, apilado bajo un elemento con valor z-index de 4, que resulta en un orden de renderizado de 4.6
          • +
        +
        • +
      • El valor z-index de DIV #1 es 5
        • +
      +
      • +
    +
    • +
+
+ +

Ejemplo

+ +

HTML

+ +
    <div id="div1">
+      <h1>Division Element #1</h1>
+      <code>position: relative;<br/>
+      z-index: 5;</code>
+    </div>
+
+    <div id="div2">
+      <h1>Division Element #2</h1>
+      <code>position: relative;<br/>
+      z-index: 2;</code>
+    </div>
+
+    <div id="div3">
+
+      <div id="div4">
+        <h1>Division Element #4</h1>
+        <code>position: relative;<br/>
+        z-index: 6;</code>
+      </div>
+
+      <h1>Division Element #3</h1>
+      <code>position: absolute;<br/>
+      z-index: 4;</code>
+
+      <div id="div5">
+        <h1>Division Element #5</h1>
+        <code>position: relative;<br/>
+        z-index: 1;</code>
+      </div>
+
+      <div id="div6">
+        <h1>Division Element #6</h1>
+        <code>position: absolute;<br/>
+        z-index: 3;</code>
+      </div>
+    </div>
+
+ +

CSS

+ +
* {
+    margin: 0;
+}
+html {
+    padding: 20px;
+    font: 12px/20px Arial, sans-serif;
+}
+div {
+    opacity: 0.7;
+    position: relative;
+}
+h1 {
+    font: inherit;
+    font-weight: bold;
+}
+#div1,
+#div2 {
+    border: 1px dashed #696;
+    padding: 10px;
+    background-color: #cfc;
+}
+#div1 {
+    z-index: 5;
+    margin-bottom: 190px;
+}
+#div2 {
+    z-index: 2;
+}
+#div3 {
+    z-index: 4;
+    opacity: 1;
+    position: absolute;
+    top: 40px;
+    left: 180px;
+    width: 330px;
+    border: 1px dashed #900;
+    background-color: #fdd;
+    padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+    border: 1px dashed #996;
+    background-color: #ffc;
+}
+#div4 {
+    z-index: 6;
+    margin-bottom: 15px;
+    padding: 25px 10px 5px;
+}
+#div5 {
+    z-index: 1;
+    margin-top: 15px;
+    padding: 5px 10px;
+}
+#div6 {
+    z-index: 3;
+    position: absolute;
+    top: 20px;
+    left: 180px;
+    width: 150px;
+    height: 125px;
+    border: 1px dashed #009;
+    padding-top: 125px;
+    background-color: #ddf;
+    text-align: center;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '556', '396') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: July 9th, 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/index.html new file mode 100644 index 0000000000..14971890e0 --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/index.html @@ -0,0 +1,47 @@ +--- +title: Entendiendo la propiedad CSS z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index +tags: + - Avanzado + - CSS + - Entendiendo_CSS_Z_Index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

+ +
+

En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.

+
+ +

(de CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.

+ +

Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS CSS-2.1 Appendix E para explicar mejor estas reglas.

+ +

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

+ +
    +
  1. Apilando sin z-index : Reglas de apilamiento por defecto
    2. +
  2. Apilamiento y float : Cómo son manejados los elementos flotantes
    3. +
  3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
    4. +
  4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
    5. +
  5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
    6. +
  6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
    7. +
  7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
    8. +
+ +

Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.

+ +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Fecha de última actualización: 9 de Julio del 2005
    • +
+
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..97038e7bae --- /dev/null +++ b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html @@ -0,0 +1,141 @@ +--- +title: Apilando sin z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Apilando sin z-index

+ +

Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):

+ +
    +
  1. El fondo y los bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Elementos posicionados descendentemente, en orden de aparición (en HTML)
    4. +
+ +

En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.

+ +
+

Notas:

+ +
    +
  • Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.
    • +
  • +

    Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.

    +
    • +
+
+ +

understanding_zindex_01.png

+ +

 

+ +

Ejemplo

+ +

HTML

+ +
<div id="absdiv1">
+    <br /><span class="bold">DIV #1</span>
+    <br />position: absolute; </div>
+<div id="reldiv1">
+    <br /><span class="bold">DIV #2</span>
+    <br />position: relative; </div>
+<div id="reldiv2">
+    <br /><span class="bold">DIV #3</span>
+    <br />position: relative; </div>
+<div id="absdiv2">
+    <br /><span class="bold">DIV #4</span>
+    <br />position: absolute; </div>
+<div id="normdiv">
+    <br /><span class="bold">DIV #5</span>
+    <br />no positioning </div>
+
+ +

CSS

+ +
 .bold {
+     font-weight: bold;
+     font: 12px Arial;
+ }
+ #normdiv {
+     height: 70px;
+     border: 1px dashed #999966;
+     background-color: #ffffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv1 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 30px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv2 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 15px;
+     left: 20px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #absdiv1 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     left: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+ #absdiv2 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     right: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+
+ +

Resultado

+ +

(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ +
    +
  • Autor(es): Paolo Lombardi
    • +
  • Este artículo es una traducción al inglés de un artículo que escribí en italiano para YappY. He dado el derecho de compartir el contenido bajo Creative Commons: Attribution-Sharealike license
    • +
  • Last Updated Date: November 3rd, 2014
    • +
+
+ +

 

diff --git a/files/es/web/css/css_positioning/index.html b/files/es/web/css/css_positioning/index.html new file mode 100644 index 0000000000..84e1b5036f --- /dev/null +++ b/files/es/web/css/css_positioning/index.html @@ -0,0 +1,115 @@ +--- +title: Posicionamiento CSS +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Positioning +--- +

{{CSSRef}}

+ +

Posicionamiento CSS es un módulo de CSS que define cómo posicionar elementos absoluta y relativamente en la página.

+ +

Referencia

+ +

Propiedades CSS

+ +
+
    +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("display")}}
    • +
  • {{cssxref("float")}}
    • +
  • {{cssxref("left")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("top")}}
    • +
  • {{cssxref("visibility")}}
    • +
  • {{cssxref("z-index")}}
    • +
+
+ +

Guías

+ +
+
Entendiendo la propiedad CSS z-index
+
Presenta la noción de contexto de apilamiento y explica cómo funciona el ordenamiento en el eje-Z a través de varios ejemplos.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}5.06.01.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/css_properties_reference/index.html b/files/es/web/css/css_properties_reference/index.html new file mode 100644 index 0000000000..3c18918a01 --- /dev/null +++ b/files/es/web/css/css_properties_reference/index.html @@ -0,0 +1,314 @@ +--- +title: CSS Properties Reference +slug: Web/CSS/CSS_Properties_Reference +tags: + - CSS + - Estilos + - Propiedades + - Referencia +translation_of: Web/CSS/CSS_Properties_Reference +--- +

Propiedades CSS Básicas Referencia

+ +

La siguiente lista es una lista de la propiedades CSS más comunes junto con su equivalente en notación DOM que es cómo son normalmente accedidas desde JavaScript.

+ +
Note:  Es una lista incompleta. Para descubrir más propiedades CSS visita  la referencia principal CSS y  and las Extensiones CSS de Mozilla. Los artículos de referencia incluyen ejemplos sobre cómo usar todas estas propiedades.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSSJavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
floatcssFloat
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
stroke-dasharraystrokeDasharray
stroke-dashoffsetstrokeDashoffset
stroke-widthstrokeWidth
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex
diff --git a/files/es/web/css/css_reglas_condicionales/index.html b/files/es/web/css/css_reglas_condicionales/index.html new file mode 100644 index 0000000000..59c2a9b328 --- /dev/null +++ b/files/es/web/css/css_reglas_condicionales/index.html @@ -0,0 +1,99 @@ +--- +title: CSS Reglas Condicionales +slug: Web/CSS/CSS_Reglas_Condicionales +tags: + - CSS + - Referencia +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

Las Reglas Condicionales (At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.

+ +

Referencia

+ +

Reglas condicionales

+ +
+
    +
  • {{cssxref("@document")}}
    • +
  • {{cssxref("@media")}}
    • +
  • {{cssxref("@supports")}}
    • +
  • {{cssxref("@import")}}
    • +
+
+ +

Guías

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definición Inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CatacterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CatacterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/css_transforms/index.html b/files/es/web/css/css_transforms/index.html new file mode 100644 index 0000000000..0467567c73 --- /dev/null +++ b/files/es/web/css/css_transforms/index.html @@ -0,0 +1,145 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +translation_of: Web/CSS/CSS_Transforms +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("backface-visibility")}}
    • +
  • {{cssxref("perspective")}}
    • +
  • {{cssxref("perspective-origin")}}
    • +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("transform-box")}}
    • +
  • {{cssxref("transform-origin")}}
    • +
  • {{cssxref("transform-style")}}
    • +
+
+ +

Guides

+ +
+
Using CSS transforms
+
Step-by-step tutorial about how to transform elements styled with CSS.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ 36

+ 		{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16.0")}}[2]		9.0{{property_prefix("-ms")}}[3]
+ 10.0		10.5{{property_prefix("-o")}}
+ 12.10
+ 15.0{{property_prefix("-webkit")}}
+ 23		3.1{{property_prefix("-webkit")}}
3D Support12.0{{property_prefix("-webkit")}}
+ 36		10.0{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10.015.0{{property_prefix("-webkit")}}
+ 23		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ 11.0{{property_prefix("-webkit")}}[5]		11.5{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
3D Support{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}22{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

+ +

[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.

+ +

[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

+ +

Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

+ +

[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

+ +

[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} prefixed variant as an alias for the default one.

+ +

 

diff --git a/files/es/web/css/css_transforms/using_css_transforms/index.html b/files/es/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..ac73ecaafc --- /dev/null +++ b/files/es/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,225 @@ +--- +title: Uso de CSS transforms +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

Al modificar las coordenadas del espacio, las transformaciones CSS permiten cambiar la posición del contenido afectado sin interrumpir el flujo normal. Se implementan haciendo uso de un conjunto de propiedades CSS que permiten aplicar transformaciones lineales a elementos HTML. Estas transformaciones incluyen rotar, torcer, escalar y desplazar en plano o en un espacio 3D.

+ +

Propiedades de las transformaciones CSS

+ +

Se usan dos propiedades principalmente para definir las transformaciones CSS: {{ cssxref("transform") }} y {{ cssxref("transform-origin") }}

+ +
+
{{ cssxref("transform-origin") }}
+
Especifica la posición de origen que se usará para la transformación. Por defecto es el lado superior izquierdo del elemento. Esta posición es usada por varias transformaciones como rotar, escalar o torcer ya que necesitan de este punto especifico como parámetro.
+
{{ cssxref("transform") }}
+
Especifica la transformación a realizar sobre el elemento. Se define como una lista separada por espacios de transformaciones que se aplican en orden una después de la otra, tal y como es requerido por la operación de composición.
+
+ +

Ejemplos

+ +

Esta es una imagen inalterada del logo de MDN:

+ +

MDN Logo

+ +

Ejemplo: Rotando

+ +

Aquí está el logo MDN en un iframe rotado 90 grados desde su esquina inferior izquierda.

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

{{ EmbedLiveSample('Ejemplo_Rotando', 'auto', 240, '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}

+ +

Ejemplo: Torciendo y desplazando

+ +

Aquí está el logo MDN torcido 10 grados y desplazado 150 pixels en el eje X.

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+
+ +

Propiedades CSS específicas para 3D

+ +

Realizar cambios en las propiedades CSS en el espacio tridemensional es un poco más complejo. Debes empezar configurando el espacio 3D dándole una perspectiva, a continuación debes configurar cómo interactuarán los elementos 2D en dicho espacio.

+ +

Definiendo una perspectiva

+ +

El primer elemento a definir es la perspectiva. La perspectiva es lo que nos da la sensación de 3D. Cuanto más lejanos estén los elementos del espectador, más pequeños serán.

+ +

Definímos como de rápido se encogen con la propiedad {{ cssxref("perspective") }}. Cuánto más pequeño sea el valor, más profunda será la perspectiva.

+ +
+ + + + + + + + + + + + + +
perspective:0;perspective:250px;
+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+
+
+ +

El segundo elemento a configurar es la posición del espectador, con la propiedad {{ cssxref("perspective-origin") }}. Por defecto, la perspectiva está centrada en el espectad

+ +

{{ EmbedLiveSample('Definiendo_una_perspectiva', '', '', '', 'Web/CSS/CSS_Transforms/Using_CSS_transforms') }}

+ +

or, pero no siempre es lo adecuado.

+ +
+ + + + + + + + + + + + + +
perspective-origin:150px 150px;perspective-origin:50% 50%;perspective-origin:-50px -50px;
+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+
+
+ +

Una vez has hecho esto, ya puedes trabajar con los elementos en el espacio 3D.

+ +

2D elements in the 3D space

+ +

See also

+ + diff --git a/files/es/web/css/css_transitions/index.html b/files/es/web/css/css_transitions/index.html new file mode 100644 index 0000000000..1855888e7d --- /dev/null +++ b/files/es/web/css/css_transitions/index.html @@ -0,0 +1,60 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - Experimental + - Referencia + - Transiciones CSS + - Vista general +translation_of: Web/CSS/CSS_Transitions +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Transiciones CSS es un módulo de CSS que define cómo crear transiciones suaves entre diferentes valores de las propiedades CSS. Permite tanto crearlas como definir su evolución usando funciones relacionadas con el tiempo.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("transition")}}
    • +
  • {{cssxref("transition-delay")}}
    • +
  • {{cssxref("transition-duration")}}
    • +
  • {{cssxref("transition-property")}}
    • +
  • {{cssxref("transition-timing-function")}}
    • +
+
+ +

Guías

+ +
+
Using CSS transitions
+
Tutorial donde se explica paso a paso cómo crear transiciones suaves usando CSS. El artículo describe cada propiedad CSS relevante y explica como interactúan entre ellas.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Definición Inicial
+ +

Ver además

+ +
    +
  • Transiciones relacionadas, CSS Animations pueden producir animaciones independientemente de los cambios en los valores.
    • +
diff --git a/files/es/web/css/css_types/index.html b/files/es/web/css/css_types/index.html new file mode 100644 index 0000000000..bdb0c5386e --- /dev/null +++ b/files/es/web/css/css_types/index.html @@ -0,0 +1,64 @@ +--- +title: Tipos de datos básicos de CSS +slug: Web/CSS/CSS_Types +tags: + - CSS + - Referencia + - Tipo de Dato CSS + - Visión general +translation_of: Web/CSS/CSS_Types +--- +
{{CssRef}}
+ +

Los tipos de datos básicos de CSS definen los valores típicos (incluidas las palabras clave y las unidades) aceptados por las propiedades y funciones de CSS. Son un tipo especial de valor de componente.

+ +

En sintaxis formal, los tipos de datos se denotan con una palabra clave colocada entre los signos de desigualdad "<" y ">".

+ +

Referencia

+ +
+
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<single-transition-timing-function>")}}
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Definición Inicial.
diff --git a/files/es/web/css/css_writing_modes/index.html b/files/es/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..1eb0bb2d15 --- /dev/null +++ b/files/es/web/css/css_writing_modes/index.html @@ -0,0 +1,52 @@ +--- +title: CSS Writing Modes +slug: Web/CSS/CSS_Writing_Modes +translation_of: Web/CSS/CSS_Writing_Modes +--- +
{{CSSRef}}
+ +

CSS Writing Modes es un modulo CSS que define varios modos internacionales de escritura, como izquierda-derecha (e.g. usado por Latin y textos Indic), de derecha-zquierda (e.g. usado por textos Hebreos o Árabes), bidireccional (usado cuando se mezcla izquierda-derecha y  derecha-izquierda) y vertical (e.g. usado por algunos textos Asiaticos).

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("glyph-orientation-horizontal")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • {{cssxref("unicode-bidi")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
diff --git a/files/es/web/css/cursor/index.html b/files/es/web/css/cursor/index.html new file mode 100644 index 0000000000..d8a0080831 --- /dev/null +++ b/files/es/web/css/cursor/index.html @@ -0,0 +1,322 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - Referencia_CSS +translation_of: Web/CSS/cursor +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad CSS:cursor especifica el tipo de cursor que se mostrara cuando este se encuentre sobre un elemento.

+ + + +

Sintaxis

+ +
cursor: <std-cursor-name> | <url> [<x> <y>]? [, <url> [<x> <y>]?]* | CSS:inherit ;
+
+ +
cursor: [<url> [<x> <y>]?,]*  <std-cursor-name> ;
+
+ +

Values

+ +
+
<url> {{ mediawiki.external(' ') }}? 
+
URL del cursor seleccionado mas posición opcional. Mas de un URL puede provocar problemas, in caso de que algunos tipode de imágenes de cursor no puedan ser usados.vea Uso_de_URL_como_valor_de_la_propiedad_cursor para mas detalles.
+
<std-cursor-name>
+
Algunos nombres de cursores se encuentra en la siguiente tabla.
+
+ +

Supported CSS standard values

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categoríanombre de CSSDescripción
GeneralautoEl browser (user agent) determina el cursor que mostrara basado en el contenido presente.
+ E.g. equivalent to text when hovering text
defaultdefault cursor (typically an arrow)
noneno cursor is rendered {{ Fx_minversion_inline(3) }}
Links & statuscontext-menucursor indicating that a context menu is available under the cursor
helpcursor indicating help is available
pointercursor used when over links (typically a hand)
progresscursor indicating that the program is busy in the background but the user can still interact with the interface (unlike for wait)
waitcursor indicating the program is busy (sometimes an hourglass or a watch)
Selectioncellcursor indicating that cells can be selected
crosshaircross cursor, often used to indicate selection in a bitmap
textcursor indicating text can be selected (typically an I-beam)
vertical-textcursor indicating that vertical text can be selected (typically a sideways I-beam)
Drag and dropaliascursor indicating an alias or shortcut is to be created
copycursor indicating that something can be copied
movethe hovered object may be moved
no-dropcursor showing that a drop is not allowed at the current location
not-allowedcursor showing that something cannot be done
Resize & scrollingall-scrollcursor showing that something can be scrolled in any direction (panned)
col-resizecursor for resizing columns horizontally
e-resizecursor for resizing the right edge of a box
ew-resizecursor for resizing left or right
n-resizecursor for resizing the top edge of a box
ne-resizecursor for resizing the top right corner of a box
nesw-resizecursor for resizing in the top-right or bottom-left directions
ns-resizecursor for resizing up or down
nw-resizecursor for resizing the top left corner of a box
nwse-resizecursor for resizing in the top-left or bottom-right directions
row-resizecursor for resizing rows vertically
s-resizecursor for resizing the bottom edge of a box
se-resizecursor for resizing the bottom right corner of a box
sw-resizecursor for resizing the bottom left corner of a box
w-resizecursor for resizing the left edge of a box
+ +

Extended Gecko CSS values

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS nameDescriptionDeprecation
-moz-aliasreplaced by standard value alias as described in the previous tableGecko 1.8a6
-moz-cellreplaced by standard value cell as described in the previous tableGecko 1.8a6
-moz-context-menureplaced by standard value context-menu as described in the previous tableGecko 1.8a6
-moz-copyreplaced by standard value copy as described in the previous tableGecko 1.8a6
-moz-graba cursor value that should indicate that an element or an object in a webpage can be grabbed 
-moz-grabbinga cursor value that should indicate that an element or an object is currently being grabbed 
-moz-spinningreplaced by standard value progress as described in the previous tableGecko 1.7.1
-moz-zoom-inused to indicate that an element or an object in a webpage is actually being resized, enlarged or is actually being magnified 
-moz-zoom-outused to indicate that an element or an object in a webpage is actually being resized, reduced or is actually being zoomed out 
+ +

Examples

+ +

Ver El Ejemplo Vivo

+ +
Inline:
+
+<span style="cursor: crosshair">Some Text</span>
+
+External:
+
+.pointer {
+	cursor: pointer;
+}
+.move {
+	cursor: move;
+}
+
+
+ +

Notes

+ +

While this property works on older browsers, not all values are fully supported.

+ +

Specifications

+ + + +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserLowest Version (<std-cursor-name>)Lowest Version (<url>)
Internet Explorer46 (only .cur files)
Firefox1.01.5
Netscape68
Opera7-
Konqueror3.13.1
Safari1.21.2
Safari (Win)3.03.0
+ +

See also

+ +

{{ languages( { "fr": "fr/CSS/cursor", "pl": "pl/CSS/cursor", "en": "en/CSS/cursor" } ) }}

diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html new file mode 100644 index 0000000000..b59b5f677d --- /dev/null +++ b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html @@ -0,0 +1,39 @@ +--- +title: Uso de URL como valor de la propiedad cursor +slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) soporta el uso de URLs como valores para la propiedad cursor (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.

+

Sintaxis

+

La sintaxis de esta propiedad es:

+
cursor: [<url>,]* cursor-genérico;
+
+

Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que deben ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. help o pointer.

+

Los siguientes valores están permitidos:

+
cursor: url(foo.cur), url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), help;
+
+

Primero se intentará cargar foo.cur. Si este archivo no existe o no es válido por alguna otra razón, se probará con firefox.jpg, y si este tampoco puede ser cargado, se usará help.

+

El soporte a la sintaxis de CSS3 para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.

+

Un ejemplo de la sintaxis CSS3:

+
cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), auto;
+
+cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg) 90 90, auto;
+
+


+ El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).

+

Limitaciones

+

Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.

+

Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).

+

Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.

+

Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

Compatibilidad con otros navegadores

+

Microsoft Internet Explorer también soporta URI como valor para la propiedad cursor. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad cursor. Esto significa que declaraciones como:

+
cursor: url(foo.cur);
+
+

O:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre un cursor genérico al final. : ''To-do: document what MSIE does with CSS 3 hotspot locations''

diff --git a/files/es/web/css/descendant_combinator/index.html b/files/es/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..d5d20aa965 --- /dev/null +++ b/files/es/web/css/descendant_combinator/index.html @@ -0,0 +1,97 @@ +--- +title: Los selectores descendientes +slug: Web/CSS/Descendant_combinator +translation_of: Web/CSS/Descendant_combinator +--- +

{{ CSSRef() }}

+

Sumario

+

El ␣ combinador  (que se supone que representan un espacio, o mejor dicho uno o más espacios en blanco) combina dos selectores tales que el selector combinado incluye sólo los elementos que coinciden con el segundo selector para los que hay un elemento ancestro que coincide con el primer selector. Los selectores descendientes son similares a selectores hijos , pero que no requieren que la relación entre los elementos coincidentes ser estrictamente entre padres e hijos.

+

Sintaxis

+
selector1 selector2 { propiedades de estilos }
+
+

Ejemplo

+
span { background-color: white; }
+div span { background-color: DodgerBlue; }
+
+
<div>
+  <span>Span 1.
+    <span>Span 2.</span>
+  </span>
+</div>
+<span>Span 3.</span>
+
+

{{ EmbedLiveSample('Example', '', '', '') }}

+

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
Selector CSS Nivel 3{{ Spec2('CSS3 Selectors') }} 
CSS 2.1{{ Spec2('CSS2.1') }} 
CSS 1{{ Spec2('CSS1') }} 
+

Compatibilidad del navegador

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
CarracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
CarracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

Ver también

diff --git a/files/es/web/css/direction/index.html b/files/es/web/css/direction/index.html new file mode 100644 index 0000000000..7fc0e0cbb8 --- /dev/null +++ b/files/es/web/css/direction/index.html @@ -0,0 +1,54 @@ +--- +title: direction +slug: Web/CSS/direction +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/direction +--- +

+

{{ CSSRef() }} +

+

Resumen

+

La propiedad direction se utiliza para indicar en que dirección fluye el texto: {{ Cssxref("rtl") }} para hebreo o árabe y {{ Cssxref("ltr") }} para otros tipos de escritura. Esto tendría que especificarse como parte del documento (por ejemplo, usando el código dir en HTML) en lugar que directamente en la hoja de estilo CSS. +

Esta propiedad establece el sentido de base del texto para los elementos de tipo bloque y la dirección para los elementos creados por la propiedad {{ Cssxref("unicode-bidi") }}. Además, asigna el valor por defecto para la alineación de texto y de elementos tipo bloque dentro de las celdas de una tabla. +

+
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("ltr", "de izquierda a derecha") }} +
  • Se aplica a: todos los elementos. +
  • {{ Cssxref("inheritance", "Valor heredado") }}: si +
  • Porcentajes: n/a +
  • Medio: {{ Cssxref("Media:Visual", "visual") }} +
  • {{ Cssxref("computed value", "Valor calculado") }}: +
+

Sintaxis

+
direction: [ ltr | rtl | inherit ] ;
+
+

Valores

+
ltr 
Valor por defecto de direction. El contenido, texto y otros elementos fluyen de izquierda a derecha. +
rtl 
El contenido, texto y otros elementos van de derecha a izquierda.
+

Para que la propiedad direction tenga algún efecto en elementos de tipo en línea (inline), el valor de la propiedad {{ Cssxref("unicode-bidi") }} debe ser embed o override. +

+

Ejemplos

+
blockquote {
+  direction : rtl ;
+}
+
+

Notas

+

Al contrario que el atributo dir en HTML, la propiedad direction no es heredada desde las columnas de una tabla a las celdas, ya que la herencia en CSS sigue el árbol del documento, y las celdas de una tabla son parte de las filas y no de las columnas. +

+

Especificaciones

+ +

Ver también

+

{{ Cssxref("unicode-bidi") }} - {{ Cssxref("ltr") }} - {{ Cssxref("rtl") }} +


+

+
+

Categorías +

Interwiki Languages +

+
+{{ languages( { "fr": "fr/CSS/direction", "pl": "pl/CSS/direction", "en": "en/CSS/direction" } ) }} diff --git a/files/es/web/css/display/index.html b/files/es/web/css/display/index.html new file mode 100644 index 0000000000..c5c503619b --- /dev/null +++ b/files/es/web/css/display/index.html @@ -0,0 +1,647 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - Propiedades CSS +translation_of: Web/CSS/display +--- +
{{CSSRef}}
+ +

La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible). 

+ +

Formalmente la propiedad display establece los tipos de visualización interna y externa de un elemento. La tipo externa establece la participacion de un elemento en flow layout; la tipo interna establece el layout(Diseño) de los hijos. Algunos valores de display estan totalmente definidos con sus especificaciones propias; por ejemplo el detalle de que pasa cuando display: flex es declarado y definido en la especificacion de Modelo Flexible de Caja(Flexible Box Model specification) de CSS. Vea la siguientes tablas para mas especificaciones individuales.

+ +

Además de los Diferentes Tipos de caja de Visualizacion, el valor de none permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza none, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.

+ +
/ * Valores <display-outside> * /
+
+display: block:;
+display: inline;
+display: run-in;
+
+/ * Valores <display-inside> * /
+display: flow;
+display: flow-root;
+display: table;
+display: flex;
+display: grid;
+display: ruby;
+display: subgrid;
+
+/ * Valores <display-outside> más valores <display-inside> * /
+display: block flow;
+display: inline table;
+display: flex run-in;
+
+/ * Valores <display-listitem> * /
+display: list-item;
+display: list-item block;
+display: list-item inline;
+display: list-item flow;
+display: list-item flow-root;
+display: list-item block flow;
+display: list-item block flow-root;
+display: flow list-item block;
+
+/ * Valores <display-internal> * /
+display: table-row-group;
+display: table-header-group;
+display: table-footer-group;
+display: table-row;
+display: table-cell;
+display: table-column-group;
+display: table-column;
+display: table-caption;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+
+/ * Valores <display-box> * /
+display: contents;
+display: none;
+
+/ * Valores <display-legacy> * /
+display: inline-block;
+display: inline-table;
+display: inline-flex;
+display: inline-grid;
+
+/ * Valores globales * /
+display: heredar;
+display: initial;
+display: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

La propiedad display se especifica mediante valores de palabras clave. Los valores de palabras clave se agrupan en seis categorías:

+ + + +

En la actualidad, es mejor especificar display utilizando una sola palabra clave; aunque las últimas especificaciones permiten combinar algunas palabras clave, esto aún no está bien soportado por los navegadores.

+ +

Valores

+ +
+
<display-outside>
+
Estas palabras clave especifican el tipo de pantalla externa del elemento, que es esencialmente su función en el diseño de flujo: A continuación se definen: + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
blockEl elemento genera un cuadro de elemento de bloque.
inlineEl elemento genera uno o más cuadros de elemento en línea.
run-in {{experimental_inline}}El elemento genera un cuadro de ejecución. Los elementos de ejecución actúan como líneas o bloques, dependiendo de los elementos circundantes. Es decir: Si el cuadro de ejecución contiene un cuadro de bloque, igual que el bloque. Si un cuadro de bloque sigue el cuadro de ejecución, el cuadro de ejecución se convierte en el primer cuadro en línea del cuadro de bloque. Si sigue un cuadro en línea, el cuadro de ejecución se convierte en un cuadro de bloque.
+
+
<display-inside>
+
Estas palabras clave especifican el tipo de pantalla interna del elemento, que define el tipo de contexto de formato que establece su contenido (suponiendo que es un elemento no reemplazado). Se definen como sigue: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
flow {{experimental_inline}}El elemento expone su contenido utilizando el diseño de flujo (diseño en bloque y en línea). +

Si su tipo de pantalla externa es inline o run-in, y está participando en un contexto de formato de bloque o en línea, entonces genera un cuadro en línea. De lo contrario genera una caja de contenedor de bloques.

+ +

Dependiendo del valor de otras propiedades (como {{cssxref("position")}}, {{cssxref("float")}} o {{cssxref("overflow")}} en un contexto de formato en bloque o en línea, establece un nuevo contexto de formato de bloque para su contenido o integra su contenido en su contexto de formato padre.

+
flow-root {{experimental_inline}}El elemento genera un cuadro de elemento de bloque que establece un nuevo contexto de formato de bloque .
tableEstos elementos se comportan como elementos HTML {{HTMLElement ("table")}}. Define un cuadro de nivel de bloque.
flexEl elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de flexbox .
gridEl elemento se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo de cuadrícula.
subgrid {{experimental_inline}}Si el elemento padre tiene display:grid, el elemento en sí y su contenido se establecen de acuerdo con el modelo de cuadrícula.
ruby {{experimental_inline}}El elemento se comporta como un elemento en línea y establece su contenido de acuerdo con el modelo de formato ruby. Se comporta como los elementos HTML {{HTMLElement ("ruby")}} correspondientes.
+
+
<display-listitem>
+
+

El elemento genera un cuadro de bloque para el contenido y un cuadro en línea de elemento de lista independiente.

+ +

Si no se especifica ningún valor <display-inside>, el tipo de pantalla interna de la caja principal es el predeterminado flow. Si no se especifica ningún valor <display-outside>, el tipo de pantalla externa de la caja principal tiene el valor predeterminado block.

+
+
<display-internal>
+
+

Algunos modelos de disposición, como table y ruby, tienen una estructura interna completa, con varios papeles diferentes que sus hijos y descendientes pueden llenar. Esta sección define los valores de visualización "internos", que sólo tienen significado dentro de ese modo de disposición particular.

+ +

A menos que se especifique lo contrario, el tipo de visualización interno y el tipo de visualización exterior de los elementos que utilizan estos valores de visualización se establecen en la palabra clave dada.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
table-row-groupEstos elementos se comportan como {{HTMLElement ("tbody")}} Elementos HTML
table-header-groupEstos elementos se comportan como elementos HTML de {{HTMLElement ("thead")}}.
table-footer-groupEstos elementos se comportan como elementos HTML {{HTMLElement ("tfoot")}}.
table-rowEstos elementos se comportan como elementos HTML {{HTMLElement ("tr")}}.
table-cellEstos elementos se comportan como elementos HTML de {{HTMLElement ("td")}}.
table-column-groupEstos elementos se comportan como elementos HTML {{HTMLElement ("colgroup")}}.
table-columnEstos elementos se comportan como elementos HTML {{HTMLElement ("col")}}.
table-captionEstos elementos se comportan como elementos HTML de {{HTMLElement ("caption")}}.
ruby-base {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rb")}}.
ruby-text {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rt")}}.
ruby-base-container {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rbc")}} generados como cajas anónimas.
ruby-text-container {{experimental_inline}}Estos elementos se comportan como elementos {{HTMLElement ("rtc")}}.
+
+
<display-box>
+
Estos valores se definen si un elemento genera cuadros de visualización en absoluto. + + + + + + + + + + + + + + + + + +
ValorDescripción
contents {{experimental_inline}}Estos elementos no producen una caja específica por sí mismos. Son reemplazados por su pseudo-caja y sus cajas infantiles.
none +

Desaparece la visualización de un elemento para que no tenga ningún efecto en el diseño (el documento se representa como si el elemento no existiera). Todos los elementos descendentes también tienen su pantalla apagada.

+ +

Para que un elemento ocupe el espacio que normalmente tendría, pero sin producir nada, utilice la propiedad {{cssxref("visibility")}}.

+
+
+
<display-legacy>
+
CSS 2 usó una sintaxis de palabra clave única para la propiedad display, requiriendo palabras clave separadas para variantes de nivel de bloque e inline del mismo modo de disposición. Se definen como sigue: + + + + + + + + + + + + + + + + + + + + + + + + + +
ValorDescripción
inline-block +

El elemento genera una caja de elemento de bloque que fluye con el contenido circundante como si fuera una sola caja en línea (comportándose como un elemento reemplazado)

+ +

Es equivalente a inline flow-root.

+
inline-table +

El  valor inline-table no tiene una asignación directa en HTML. Se comporta como un elemento HTML {{HTMLElement ("tabla")}}, pero como un cuadro en línea, en el lugar de un cuadro a nivel de bloque. Dentro del cuadro de la tabla hay un contexto de nivel de bloque.

+ +

Es equivalente a  inline table.

+
inline-flex +

El elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo flexbox.

+ +

Es equivalente a  inline flex.

+
inline-gridEl elemento se comporta como un elemento en línea y se establece su contenido de acuerdo con el modelo de cuadrícula.
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Sobre Accesibilidad

+ +

display: none;

+ +

Al utilizar un valor de none en la propiedad display el elemento se elimina del árbol de accesibilidad. El efecto de esto será que este elemento y sus hijos no serán anunciados a los lectores de pantalla utilizados por no videntes.

+ +

Si deseas ocultar el elemento solo de forma visible, pero que los lectores de accesibilidad lo sigan anunciando, puedes utilizar un método alternativo con una combinación de propiedades de CSS.

+ +

display: contents;

+ +

Los navegadores eliminarán el atributo predeterminado de role de cualquier elemento con una propiedad display que tenga un valor de contents del árbol de accesibilidad. Esto causará que los elementos y sus descendientes no sean anunciados a los lectores de pantalla.

+ +

Esto es un bug ya reportado, para encontrar más información por favor referirse a los siguientes artículos

+ + + +

Tablas

+ +

Al trabajar con una tabla, si la propiedad display cambia al valor de block, grid o flex se altera la representación de ese elemento en el árbol de accessibilidad. Esto causará que el elemento ya no será anunciado como una tabla.

+ +

Para más información por favor referirse a los siguientes artículos:

+ + + +

Ejemplos

+ +

Ocultar Elementos

+ +

Contenido HTML

+ +
<p> Texto visible </ p>
+ +

Contenido CSS

+ +
  display: none;
+ +

Resultado

+ +

{{EmbedLiveSample ("Hide_element", 300, 60)}}

+ +

Ver El Ejemplo Vivo

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName ('CSS3 Display', '# the-display-properties', 'display')}}{{Spec2 ('Pantalla CSS3')}}Agregado run-in, flow, flow-root, contents, y los valores de varias palabras clave.
{{SpecName ('CSS3 Ruby', '# ruby-display', 'display')}}{{Spec2 ('CSS3 Ruby')}}Agregado ruby, ruby-base, ruby-text, ruby-base-container, y ruby-text-container.
{{SpecName ('CSS3 Grid', '# grid-containers', 'display')}}{{Spec2 ('Cuadrícula CSS3')}}Se agregaron los valores del modelo de cuadrícula.
{{SpecName ('CSS3 Flexbox', '# flex-containers', 'display')}}{{Spec2 ('CSS3 Flexbox')}}Se agregaron los valores del modelo de caja flexible.
{{SpecName ('CSS2.1', 'visuren.html # display-prop', 'display')}}{{Spec2 ('CSS2.1')}}Se agregaron los valores del modelo de tabla e inline-block.
{{SpecName ('CSS1', '#display', 'display')}}{{Spec2 ('CSS1')}}Definición inicial. Valores básicos: none, block, inline, y list-item.
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaCromoBordeFirefox (Gecko)explorador de InternetÓperaSafari (WebKit)
none, inlineyblock1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}4.07,01,0 (85)
inline-block1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}5,5 [4]7,01,0 (85)
list-item1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}6.07,01,0 (85)
run-in {{experimental_inline}}1,0 [5]{{CompatVersionUnknown}}{{CompatNo}}8,07,01,0 (85) [5]
4.0 Eliminado en 325.0 (532.5) Eliminado en 8.0
inline-table1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}8,07,01,0 (85)
table, table-cell, table-column, table-column-group, table-header-group, table-row-group, table-footer-group, table-row, Ytable-caption1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}8,07,01,0 (85)
flex +

21.0 {{property_prefix("- webkit")}}

+ +

29,0

+ 		{{CompatVersionUnknown}}{{CompatGeckoDesktop("18.0")}} [1]
+ {{CompatGeckoDesktop("20.0")}}		 +

10 {{property_prefix("- ms")}} [8]
+ 11

+ 		12,50 +

6.1 {{property_prefix("- webkit")}}

+ +

9,0

+
inline-flex21.0 {{property_prefix("- webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("18.0")}} [1]
+ {{CompatGeckoDesktop("20.0")}}		10 {{property_prefix("- ms")}} [8]
+ 11		12,506.1 {{property_prefix("- webkit")}}
grid {{experimental_inline}}{{CompatChrome(57)}}{{CompatVersionUnknown}} {{property_prefix("- ms")}}{{CompatGeckoDesktop("45.0")}} [6]10.0 {{property_prefix("- ms")}}{{CompatOpera(44)}}TP
inline-grid {{experimental_inline}}{{CompatChrome(57)}}{{CompatVersionUnknown}} {{property_prefix("- ms")}}{{CompatGeckoDesktop("45.0")}} [6]10.0 {{property_prefix("- ms")}}{{CompatOpera(44)}}TP
subgrid {{experimental_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
ruby, ruby-base, ruby-text, ruby-base-container, ruby-text-container {{Experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}} [3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
contents {{experimental_inline}}{{CompatChrome(58)}} [7]{{CompatNo}}{{CompatGeckoDesktop("37")}} [2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
flow-root{{CompatChrome(58)}}{{CompatUnknown}}{{CompatGeckoDesktop("53.0")}}{{CompatUnknown}}{{CompatOpera(45)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaVista web de AndroidChrome para AndroidBordeFirefox Mobile (Gecko)Teléfono IEOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}7.0 {{property_prefix("- webkit")}}
grid {{experimental_inline}}{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile (44)}}{{CompatUnknown}}
inline-grid {{experimental_inline}}{{CompatChrome(57)}}{{CompatChrome(57)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile (44)}}{{CompatUnknown}}
flow-root{{CompatChrome(58)}}{{CompatChrome(58)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile (45)}}{{CompatUnknown}}
+
+ +

[1] Para activar el soporte de flexbox, para Firefox 18 y 19, el usuario tiene que cambiar la preferencia about: config "layout.css.flexbox.enabled" con true. Flexbox multilínea son compatibles desde Firefox 28.

+ +

[2] Antes de Firefox 37, el valor contents estaba deshabilitado de forma predeterminada, y podría habilitarse configurando el layout.css.display-contents.enabled con preferencia true. En Firefox 37, se habilitó de forma predeterminada, y en Firefox 53 el pref se eliminó por completo.

+ +

[3] CSS Ruby apoyo está detrás de pref "layout.css.ruby.enabled". El usuario tiene que cambiar este pref un verdadero para activarlo.

+ +

[4] Sólo elementos naturales en línea.

+ +

[5]No hay antes de los elementos en línea.

+ +

[6]El soporte de Grid CSS no está prefijado en las compilaciones Nightly / Alpha y detrás de pref "layout.css.grid.enabled" en las compilaciones Beta / Release.

+ +

[7] En Chrome, el valor contents está actualmente desactivado de forma predeterminada, pero se puede habilitar con el indicador "Experimental Plataforma Web características".

+ +

[8] En IE 10, sólo los valores prefijados especiales, -ms-flexboxy -ms-inline-flexbox, se reconocen.

+ +

Ver también

+ +
    +
  • {{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("posición")}}
    • +
  • {{cssxref("flex")}}
    • +
diff --git a/files/es/web/css/elemento_reemplazo/index.html b/files/es/web/css/elemento_reemplazo/index.html new file mode 100644 index 0000000000..a8bedc65a2 --- /dev/null +++ b/files/es/web/css/elemento_reemplazo/index.html @@ -0,0 +1,19 @@ +--- +title: Elemento de reemplazo +slug: Web/CSS/Elemento_reemplazo +tags: + - CSS + - CSS Referência + - Intermediate +translation_of: Web/CSS/Replaced_element +--- +
+ {{CSSRef()}}
+

Summary

+

Dentro de CSS tenemos los elementos de reemplazo, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS {{cssxref("content")}} son objetos de reemplazo anonimos..

+

CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos auto valores.

+

Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.

+

Ver tambien:

+
    +
  • {{CSS_key_concepts()}}
    • +
diff --git a/files/es/web/css/env()/index.html b/files/es/web/css/env()/index.html new file mode 100644 index 0000000000..18e6a48310 --- /dev/null +++ b/files/es/web/css/env()/index.html @@ -0,0 +1,27 @@ +--- +title: env() +slug: Web/CSS/env() +tags: + - CSS + - Experimental + - Función CSS + - Variables CSS + - env + - env() +translation_of: Web/CSS/env() +--- +

La función CSS env() puede ser utilizada para insertar el valor de una variable de entorno, que sea global para un documento en particular, al contrario de una propiedad personalizada. Entonces, la funcion env() puede ser utilizada para remplazar el valor en ubicaciones arbitrarias, de la misma manera que la función var().

+ +

La función env() puede ser utilizada en el lugar de cualquier parte de un valor en cualquier propiedad de cualquier elemento, o de cualquier parte de un valor en cualquier descriptor de cualquier regla @, y en varios otros lugares donde los valores CSS están permitidos.

+ +

Las Variables de Entorno CSS están actualmente en curso de definición en un borrador de Recomendación: CSS Environment Variables Module Level 1.

+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.properties.custom-property.env")}}

+
+ +

 

diff --git a/files/es/web/css/especificidad/index.html b/files/es/web/css/especificidad/index.html new file mode 100644 index 0000000000..6a42fdb53f --- /dev/null +++ b/files/es/web/css/especificidad/index.html @@ -0,0 +1,239 @@ +--- +title: Especificidad +slug: Web/CSS/Especificidad +tags: + - CSS + - Ejemplo + - Guía + - Principiante + - Web +translation_of: Web/CSS/Specificity +--- +

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

+ +

¿Cómo se calcula?

+ +

La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una declaración directa, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.

+ +
+

Nota: La proximidad de elementos en el árbol del documento no tiene efecto en la especificidad.

+
+ +

Tipos de selectores

+ +

La siguiente lista de tipos de selectores incrementa en función de la especificidad:

+ +
    +
  1. Selectores de tipo (p.e., h1) y pseudo-elementos (p.e., ::before).
    2. +
  2. Selectores de clase (p.e., .example), selectores de atributos (p.e., [type="radio"]) y pseudo-clases (p.e., :hover).
    3. +
  3. Selectores de ID (p.e., #example).
    4. +
+ +

El selector universal ({{CSSxRef("Universal_selectors", "*")}}), los combinadores ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}) y la pseudo-clase de negación ({{CSSxRef(":not", ":not()")}}) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados dentro de :not() si lo tienen.)

+ +

Para más información, visita "Especificidad" en "Cascada y herencia", también puedes visitar: https://specifishity.com

+ +

Los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas, por lo que se puede decir que tienen la mayor especificidad.

+ +

La excepción !important

+ +

Cuando se emplea important en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente !important  no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de !important es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el !important son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad. 

+ +

Algunas reglas de oro:

+ +
    +
  • Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
    • +
  • Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
    • +
  • Nunca uses !important cuando estés intentando escribir un plugin/mashup.
    • +
  • Nunca uses !important en todo el código CSS.
    • +
+ +

En lugar de usar !important, considera:

+ +
    +
  1. Hacer un mejor uso de las propiedades en cascada de CSS.
    2. +
  2. +

    Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
+
    + + 
    div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }
    +
    3. +
  3. Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar + 
    #myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }
    +
    4. +
+ +

Cómo se debería usar !important:

+ +
A) Sobrescribiendo los estilos en linea
+ +
    +
  1. Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.
    2. +
  2. Tú (u otros) usan estilos inline en los propios elementos. Esto es considerado como una muy mala práctica. 
    3. +
+ +

En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos.

+ +

Ejemplo del mundo real: Algunos plugins jQuery muy mal escritos que usan estilos inline.

+ +

B) Otro escenario:

+ +
#someElement p {
+    color: blue;
+}
+
+p.awesome {
+    color: red;
+}
+ +

¿Cómo haces que los párrafos awesome se vuelvan siempre rojos, incluso los que se encuentren dentro de #someElement? Sin !important, la primera regla tendrá más especificidad y ganará a la segunda.

+ +

Cómo sobrescribir !important

+ +

A) Simplemente añade otra regla CSS con !important y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.

+ +

Algunos ejemplos con una gran especificidad:

+ +
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}
+ +

B) O añade el mismo selector después de uno existente:

+ +
td {height: 50px !important;}
+ +

C) O reescribe la regla original para evitar el uso de !important.

+ +

Para más información, visita (en inglés):

+ +

http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

+ +

http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

+ +

http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

+ +

http://stackoverflow.com/questions/11178673/how-to-override-important

+ +

http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

+ +

La excepción :not

+ +

La pseudo-clase negación :not no es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentre de ella, si cuentan como selectores normales a la hora de determinar el valor de los tipos de selectores. 

+ +

Aquí tienes un pedazo de CSS:

+ +
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+
+ +

cuando se usa con el siguiente HTML:

+ +
<div class="outer">
+  <p>Esto está en el outer div.</p>
+  <div class="inner">
+    <p>Este texto está en el inner div.</p>
+  </div>
+</div>
+
+ +

Debería aparecer en pantalla como:

+ +

Esto está en el outer div
+
+ Este texto está en el inner div

+ +

Especificidad basada en la forma

+ +

La especificidad está basada en la forma de un selector. En el siguiente caso, el selector *[id="foo"] cuenta como un atributo selector para la determinación de la especificidad de un selector, incluso cuando se selecciona un ID.

+ +

Las siguientes declaraciones de estilo:

+ +
*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+
+ +

cuando se usan con este marcador:

+ +
<p id="foo">Soy un texto de ejemplo.</p>
+
+ +

Se acabarán viendo así:

+ +

Soy un texto de ejemplo

+ +

Debido a que coincide con el mismo elemento, pero el selector ID tiene una mayor especificidad.

+ +

Ignorancia de proximidad en el árbol

+ +

La proximidad de un elemento con otros a los que se hace referencia en un selector determinado, no tiene impacto en la especificidad. La siguiente declaración de estilo:

+ +
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+
+ +

Con el siguiente HTML:

+ +
<html>
+<body>
+  <h1>¡Aquí va un título!</h1>
+</body>
+</html>
+
+ +

Se mostrará como:

+ +

¡Aquí va un título!

+ +

Porque las dos declaraciones tienen un resultado de tipo de selector igual, pero el selector html h1 se ha declarado después.

+ +

Declaración directa vs estilos heredados

+ +

Los estilos para elementos objetivo de una declaración directa siempre tienen preferencia sobre los estilos heredados, sin importar la especificidad de la regla heredada.

+ +
#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}
+ +

Con el siguiente HTML:

+ +
<html>
+<body id="parent">
+  <h1>¡Aquí va un título!</h1>
+</body>
+</html>
+ +

Se verá así:

+ +

¡Aquí va un título!

+ +

Porque el selector h1 selecciona el objetivo de manera específica, pero el color verde simplemente es heredad de su padre.

+ +

Consulta también (en inglés)

+ + diff --git a/files/es/web/css/filter-function/blur()/index.html b/files/es/web/css/filter-function/blur()/index.html new file mode 100644 index 0000000000..a60e4408eb --- /dev/null +++ b/files/es/web/css/filter-function/blur()/index.html @@ -0,0 +1,40 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - Efectos de Filtro + - Función CSS + - Referencia +translation_of: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

La función CSS blur() aplica un desenfoque Gaussiano a la imagen de entrada. El resultado es un {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

Sintaxis

+ +
blur(radio)
+ +

Parámetros

+ +
+
radio
+
El radio del desenfoque, especificado como {{cssxref("<length>")}}. Define el valor de la desviación estándar a la función gaussiana, es decir, cuántos píxeles en la pantalla se combinan entre sí; por lo tanto, un valor mayor creará más desenfoque. Un valor de 0 deja la entrada sin cambios. El valor de laguna para la interpolación es 0.
+
+ +

Ejemplos

+ +
blur(0)        /* Sin efecto */
+blur(8px)      /* Desenfoque con 8px de radio */
+blur(1.17rem)  /* Desenfoque con 1.17rem de radio */
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/filter-function/brightness()/index.html b/files/es/web/css/filter-function/brightness()/index.html new file mode 100644 index 0000000000..8d51f5d70c --- /dev/null +++ b/files/es/web/css/filter-function/brightness()/index.html @@ -0,0 +1,45 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +translation_of: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

La función brightness() CSS aplica un multiplicador linear a la imagen, haciendo que su apariencia sea más brallante u oscura. Su resultado es un {{cssxref("<filter-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

Sintaxis

+ +
brightness(valor)
+ +

Parametros

+ +
+
valor
+
El brillo resultante, es definido como un {{cssxref("<number>")}} o un {{cssxref("<percentage>")}}. Un valor debajo del 100% oscurecerá la imagen, como así un valor superior al 100% le dará más brillo. Un valor de 0% dará como resultado una imagen completamente negra, siendo el valor de 100% una imagen sin cambios. El valor de la Interpolación es 1.
+
+ +

Ejemplos

+ +
brightness(0%)   /* Completamente negro */
+brightness(0.4)  /* 40% de brillo */
+brightness(1)    /* Sin Efecto */
+brightness(200%) /* Doble de Brillo */
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("filter-function/blur", "blur()")}}
    • +
  • {{cssxref("filter-function/contrast", "contrast()")}}
    • +
  • {{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
    • +
  • {{cssxref("filter-function/grayscale", "grayscale()")}}
    • +
  • {{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
    • +
  • {{cssxref("filter-function/invert", "invert()")}}
    • +
  • {{cssxref("filter-function/opacity", "opacity()")}}
    • +
  • {{cssxref("filter-function/saturate", "saturate()")}}
    • +
  • {{cssxref("filter-function/sepia", "sepia()")}}
    • +
diff --git a/files/es/web/css/filter-function/index.html b/files/es/web/css/filter-function/index.html new file mode 100644 index 0000000000..b49712c5d1 --- /dev/null +++ b/files/es/web/css/filter-function/index.html @@ -0,0 +1,65 @@ +--- +title: +slug: Web/CSS/filter-function +tags: + - CSS + - Efectos de Filtro + - Referencia + - Tipos de dato CSS +translation_of: Web/CSS/filter-function +--- +
{{cssref}}
+ +

El tipo de datos CSS <filter-function> representa un efecto gráfico que puede cambiar la apariencia de una imagen de entrada. Se usa en las propiedades {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}.

+ +

Sintaxis

+ +

El tipo de datos <filter-function> se especifica utilizando una de las funciones de filtro enumeradas a continuación. Cada función requiere un argumento que, si no es válido, da como resultado que no se aplique ningún filtro.

+ +
+
blur()
+
Difumina la imagen.
+
brightness()
+
Hace que la imagen sea más brillante o más oscura.
+
contrast()
+
Aumenta o disminuye el contraste de la imagen.
+
drop-shadow()
+
Aplica una sombra paralela detrás de la imagen.
+
grayscale()
+
Convierte la imagen a escala de grises.
+
hue-rotate()
+
Cambia el tono general de la imagen.
+
invert()
+
Invierte los colores de la imagen.
+
opacity()
+
Hace que la imagen sea transparente.
+
saturate()
+
Super-saturado o desaturado la imagen de entrada.
+
sepia()
+
Convierte la imagen a sepia.
+
+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}{{ Spec2('Filters 1.0') }}Definición inicial.
+ +

Ver también

+ +
    +
  • Propiedades que usan este tipo de datos: {{cssxref("filter")}} y {{cssxref("backdrop-filter")}}
    • +
diff --git a/files/es/web/css/filter-function/url/index.html b/files/es/web/css/filter-function/url/index.html new file mode 100644 index 0000000000..e84d5c30d0 --- /dev/null +++ b/files/es/web/css/filter-function/url/index.html @@ -0,0 +1,32 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Referencia +translation_of: Web/CSS/url() +--- +
{{cssref}}
+ +

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

+ +

Sintaxis

+ +
url(location)
+ +

Parámetros

+ +
+
location
+
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
+
+ +

Ejemplo

+ +
url(resources.svg#c1)
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/filter/index.html b/files/es/web/css/filter/index.html new file mode 100644 index 0000000000..6ae8e8e2dd --- /dev/null +++ b/files/es/web/css/filter/index.html @@ -0,0 +1,1194 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - Filtro + - Filtro SVG + - Propiedad CSS + - Referencia + - SVG +translation_of: Web/CSS/filter +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS filter dota de efectos gráficos como el desenfoque o cambio de color en la representación antes de que se muestre el elemento. Los filtros se utilizan comúnmente para ajustar la representación de imágenes, fondos o bordes.

+ +

Hay varias funciones Incluidas en el estándar CSS que logran efectos predefinidos. También puede hacer referencia a un filtro especificado en SVG con una URL  a un filtro de un elemento SVG.

+ +
Nota: Versiones anteriores (4.0 hasta 9.0) del navegador Internet Explorer de Windows admiten una propiedad "filter" no incluida en el estándar que ha quedado en desuso.
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
filter: url("filters.svg#filter-id");
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* Apply multiple filters */
+filter: contrast(175%) brightness(3%);
+
+/* Global values */
+filter: inherit;
+filter: initial;
+filter: unset;
+
+ +

Con una función, use el siguiente código:

+ +
filter: <filter-function> [<filter-function>]* | none
+
+ +

Para referenciar a al valor {{SVGElement("filter")}} de un elemento SVG, use el siguiente código:

+ +
filter: url(file.svg#filter-element-id)
+
+ +

Interpolación

+ +

Si ambos filtros tienen una lista de funciones con la misma longitud y sin {{cssxref("<url>")}}, cada una de las funciones de filtro es interpolada, de acuerdo a sus reglas específicas. Si tienen longitudes diferentes, las funciones equivalentes que falten de la lista más larga se añaden al final de la lista más corta, usando sus valores lagunares, y después todas las funciones son interpoladas de acuerdo a sus reglas específicas. Si un filtro es 'none', es reemplazado por la lista de funciones de filtro del otro, usando los valores predeterminados para cada función, y después todos los filtros son interpolados de acuerdo a su regla específica. De otra forma, se usa interpolación discreta.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplos del uso de las funciones predefinidas se muestran a continuación. Ver cada función. Ver cada función para un ejemplo específico.

+ +
.mydiv { filter: grayscale(50%) }
+
+/* funcion del blanco y negro "grayscale" al 50% y un desenfoque "blur" de 10px */
+img {
+  filter: grayscale(0.5) blur(10px);
+}
+ +

Ejemplos del uso de la función  con el recurso SVG se muestran a continuación.

+ +
.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+
+ +

Funciones

+ +

Para utilizar la propiedad CSS filter, hay que especificar un valor para una de las siguientes funciones. Si el valor no es válido, la función se ejecutará de la misma manera que si se le aplicara "none". Las funciones que toman un valor en procentaje (como en el 34%) también aceptan el valor expresado como decimal (como en 0.34 ó .34).

+ +

url()

+ +

La función url() toma la dirección de un archivo XML que especifica un filtro SVG, y puede incluir un ancla para un elemento de filtro especifico.

+ +
filter: url(resources.svg#c1)
+
+ +

blur()

+ +

Aplica un desenfoque Gaussiano a la imagen. El valor de 'radio' define el valor de la desviación estándar de la función de desenfoque Gaussiano o el número de píxeles que se mezclan entre sí, por lo que un valor mayor creará un mayor desenfoque. El valor lagunar de interpolación (es decir, si no se proporciona ningún parametro) es 0. El parámetro se especifica como una longitud de CSS, pero no acepta porcentajes.

+ +
filter: blur(5px)
+
+ + + +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+ +

{{EmbedLiveSample('blur_example','100%','236px','')}}

+ +

brightness()

+ +

Se aplica una multiplicación lineal a la imagen, haciendo que parezca más o menos brillante. Un valor de 0% convertirá la imagen completamente a negro. Un valor de 100% no producirá ningún cambio en la imagen. Otros valores causarán una multiplicación lineal en el efecto. Los valores de una cantidad superior al 100% aumentarán el brillo de la imagen. El valor lagunar (si no se especifica ningún valor) es 1 (equivalente a 100%).

+ +
filter: brightness(0.5)
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="[amount]"/>
+        <feFuncG type="linear" slope="[amount]"/>
+        <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('brightness_example','100%','231px','')}}

+ +

contrast()

+ +

Ajusta el contraste del elemento. Un valor superior a 0% creará una imagen completamente gris. Un valor de 100% deja al elemento sin cambios. Valores superiores a 100% son permitidos, dando como resultado mayor contraste. El valor lagunar de interpolación (si no se especifica ningún valor) es 1 (equivalente a 100%).

+ +
filter: contrast(200%)
+
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+
+ + + +

{{EmbedLiveSample('contrast_example','100%','203px','')}}

+ +

drop-shadow()

+ +

Aplica un efecto de sombra a la imagen. Una  sombra es realmente una versión desenfocada y separada de la máscara alfa de la imagen, dibujada en un color particular, debajo de la misma. La función acepta un parámetro de tipo <shadow> (definido en CSS3 Backgrounds), con la excepción de que la palabra clave ‘inset’ no está permitida. Esta función es similar a la propiedad {{cssxref("box-shadow")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento. Los valores para el parámetro <shadow> son los siguientes:

+ +
+
<offset-x> <offset-y> (requerido)
+
Son dos valores {{cssxref("<length>")}} para establecer la posición de la sobra respecto a la imagen. <offset-x> especifica la distancia horizontal. Valores negativos establecen la sombra a la izquierda del elemento. <offset-y> especifica la distancia vertical. Valores negativos establecen la sombra arriba del elemento. Véase {{cssxref("<length>")}} para unidades posibles.
+ Si ambos valores son 0, la sombra será colocada detrás del elemento (y puede generar un efecto de desenfoque si se establecen <blur-radius> y/o <spread-radius>).
+
<blur-radius> (opcional)
+
Es un tercer valor {{cssxref("<length>")}}. Mientras mayor sea el valor, mayor será el desenfoque, por lo que la sombra se vuelve más grande y clara. No se permiten valores negativos. Si no es especificado, su valor predeterminado será 0 (el borde de la sombra es nítido).
+
<spread-radius> (opcional)
+
Es el cuarto valor {{cssxref("<length>")}}. Valores positivos harán que la sombra se expanda, y valores negativos harán que la sombra se contraiga. Si no se especifica, su valor predeterminado será 0 (la sombra tendrá el mismo tamaño del elemento). 
+ Nota: Webkit, y tal vez otros navegadores, no soportan este cuarto valor; si se incluye, no se aplicará el filtro.
+
<color> (opcional)
+
Véanse los valores {{cssxref("<color>")}} para las opciones posibles de palabras clave y notaciones. Si no se especifica, el color depende del navegador. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), se usa el valor de la propiedad {{cssxref("color")}}. Por otro lado, la sombra en WebKit es transparente, y por lo tanto, es inútil si se omite <color>.
+
+ +
filter: drop-shadow(16px 16px 10px black)
+ +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+
+ + + +

{{EmbedLiveSample('shadow_example','100%','300px','')}}

+ +

grayscale()

+ +

Convierte la imagen a escala de grises. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente a escala de grises. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales de este efecto. Si el parámetro no es incluido, se usa el valor de 0.

+ +
filter: grayscale(100%)
+ + + +

{{EmbedLiveSample('grayscale_example','100%','209px','')}}

+ +

hue-rotate()

+ +

Aplica una rotación de tono (matiz) al elemento. El valor del ángulo define el número de grados al rededor del círculo de colores al que se ajustarán los colores de la imagen. Un valor de 0deg deja la imagen sin cambios. Si el parámetro del ángulo no es especiicado, se usa valor de 0deg. Aunque no hay valor máximo, el efecto de valores encima de 360deg da la vuelta al círculo de colores.

+ +
filter: hue-rotate(90deg)
+ + + +
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgHueRotate" >
+    <feColorMatrix type="hueRotate" values="[angle]" />
+  <filter />
+</svg>
+ +

{{EmbedLiveSample('huerotate_example','100%','221px','')}}

+ +

invert()

+ +

Invierte los colores de la imagen. El parámetro define la proporción de la conversión. Un valor de 100% invierte completamente la imagen. Un valor de 0% deja a la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si el parámetro no es especificado, se usa un valor de 0.

+ +
filter: invert(100%)
+ + + +

{{EmbedLiveSample('invert_example','100%','407px','')}}

+ +

opacity()

+ +

Aplica transparencia a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente transparente. Un valor de 100% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Esto es equivalente a multiplicar las muestras de la imagen por el valor indicado. Si el parámetro no es especificado, se usa un valor de 1. Esta función es similar a la propiedad {{cssxref("opacity")}}, más establecida; la diferencia es que con filtros, algunos navegadores proveen aceleración de hardware para mayor rendimiento.

+ +
filter: opacity(50%)
+ + + +

{{EmbedLiveSample('opacity_example','100%','210px','')}}

+ +

saturate()

+ +

Aplica saturación a la imagen. El valor del parámetro define la proporción de la conversión. Un valor de 0% es completamente sin saturación. Un valor de 100% deja la imagen sin cambios. Otros valores son múltiplos lineales del efecto. Valores por encima de 100% son permitidos, dando resultados de sobresaturación. Si no se especifica el parámetro, se usa el valor de 1.

+ +
filter: saturate(200%)
+ + + +

{{EmbedLiveSample('saturate_example','100%','332px','')}}

+ +

sepia()

+ +

Convierte la imagen a sepia. El valor del parámetro define la proporción de la conversión. Un valor de 100% es completamente sepia. Un valor de 0% deja la imagen sin cambios. Valores entre 0% y 100% son múltiplos lineales del efecto. Si no se especifica el parámetro, se usa el valor de 0.

+ +
filter: sepia(100%)
+ + + +

{{EmbedLiveSample('sepia_example','100%','229px','')}}

+ +

Combinando funciones

+ +

Se puede combinar cualquier número de funciones para manipular la representación de la imagen. Los siguientes ejemplos aumentan el contraste y brillo de la imagen.

+ +
filter: contrast(175%) brightness(3%)
+ + + +

{{EmbedLiveSample('combination_example','100%','209px','')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatChrome("18.0")}}{{ property_prefix("-webkit") }} [4]{{ CompatGeckoDesktop(35) }} [1] [2]{{ CompatNo() }} [3]{{CompatOpera("15.0")}}{{ property_prefix("-webkit")}}{{ CompatSafari("6.0") }}{{ property_prefix("-webkit") }}
En elementos SVG{{CompatNo}} (See bug 109224){{ CompatGeckoDesktop(35) }}{{ CompatNo}}{{ CompatNo}}{{ CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatAndroid("4.4") }}{{ property_prefix("-webkit")}}{{ CompatGeckoDesktop(35) }} [1] [2]{{ CompatNo() }}22.0 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit")}} +

6.0 {{ CompatVersionUnknown() }}{{ property_prefix("-webkit")}}

+
En elementos SVG{{CompatNo}} (See bug 109224){{ CompatGeckoDesktop(35) }}{{ CompatNo}}{{ CompatNo}}{{ CompatNo}}
+
+ +

[1] Antes de Firefox 34, Gecko solo implementa la forma {{ anch("url()") }} de la propiedad filter; como no estaba implementado el encadenamiento, solo se permitía una url() (o cuando la preferencia layout.css.filters.enabled era establecida a false).
+
+ [2] Los valores funcionales de filter son controlados por la preferencia layout.css.filters.enabled, pero fue deshabiliada en Firefox 34.

+ +

[3] Internet Explorer 4.0 a 9.0 implementan una propiedad filter que no es estándar. La sintáxis era completamente diferente del estándar, y no está documentada aquí.

+ +

[4] En Chrome 18 a 19, la función saturate() solo toma enteros, en vez de decimales o porcentajes. Este bug fue corregido en Chrome 20 y superiores.

+ +

Véase también

+ + diff --git a/files/es/web/css/fit-content/index.html b/files/es/web/css/fit-content/index.html new file mode 100644 index 0000000000..fc3cceef6f --- /dev/null +++ b/files/es/web/css/fit-content/index.html @@ -0,0 +1,119 @@ +--- +title: fit-content() +slug: Web/CSS/fit-content +tags: + - CSS + - CSS Grid + - Experimental + - Función CSS + - Layout + - Referencia + - Web +translation_of: Web/CSS/fit-content +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La función CSS fit-content() ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula: min(maximum size, max(minimum size, argument)).

+ +
/* <length> values */
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+
+/* <percentage> value */
+fit-content(40%)
+
+ +

La función se puede usar como un tamaño de track en las propiedades de CSS Grid, donde el tamaño máximo es definido por max-content y el mínimo por auto, el cual es calculado por "auto" (ej. minmax(auto, max-content)), excepto que el tamaño del track se restringe al argumento si éste es mas grande que el "auto" mínimo .

+ +

También puede usarse como tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}, donde el tamañó máximo se refiere al tamaño máximo contenido y el mínimo al tamaño mínimo contenido.

+ +

Sintaxis

+ +

Función que acepta un  <length> o un <percentage> como un argumento.

+ +

Values

+ +
+
{{cssxref("<length>")}}
+
Una Longitud Absoluta.
+
{{cssxref("<percentage>")}}
+
Un porcentaje relativo al espacio disponible en los ejes dados.
+
In grid properties it is relative to the inline size of the grid container in column tracks and to the block size of the grid container for row tracks. Otherwise it is relative to the available inline size or block size of the laid out box depending on the writing mode.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>Item as wide as the content.</div>
+  <div>
+    Item con más texto en él. Porque el contenido que es
+    mas grande que el ancho máximo, está restringido a los
+    300 pixeles.
+  </div>
+  <div>Flexible item</div>
+</div>
+ +

Result

+ +

{{EmbedLiveSample("Ejemplo", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}}{{Spec2("CSS3 Sizing")}}Define la función como el tamaño de caja disponible para {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} y {{cssxref("max-height")}}.
{{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}}{{Spec2("CSS Grid")}}Define la función cuando es usada como un tamaño de track.
+ +

Browser compatibility

+ +

 

+ + + +

{{Compat("css.properties.grid-template-columns.fit-content")}}

+ +

 

diff --git a/files/es/web/css/flex-basis/index.html b/files/es/web/css/flex-basis/index.html new file mode 100644 index 0000000000..726241615a --- /dev/null +++ b/files/es/web/css/flex-basis/index.html @@ -0,0 +1,280 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - Cajas Flexibles de CSS + - Propiedad de CSS +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad de CSS flex-basis especifíca la base flexible, la cual es el tamaño inicial de un elemento flexible. Ésta propiedad determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma usando {{Cssxref("box-sizing")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Especificar <'width'> */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* Palabras clave de dimensionamiento intrínseco */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* Tamaño automático basado en el contenido del elemento flexible */
+flex-basis: content;
+
+/* Global values */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

Valores

+ +
+
width
+
Definido por un número seguido de una unidad absoluta tal como px, mm o pt, o un porcentaje del tamaño principal de un contenedor flexible padre. Los valores negativos no son válidos.
+
content
+
Indica el dimensionamiento automático, basado en el contenido del elemento flexible.
+
+
Nota: Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando auto junto con un tamaño principal (width o height) en auto.
+ +
+

Nota: Breve historia

+ +
    +
  • Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height".
    • +
  • Después, flex-basis:auto fue cambiado a automatic-sizing, y fue introducido "main-size" como palabra clave "observa mi propiedad width o height". Ésto fue implementado en bug 1032922.
    • +
  • Después, ese cambio fue revertido en bug 1093316, y nuevamente "auto" significa "observa mi propiedad width o height"; y se está introduciendo una nueva palabra clave 'content' para provocar un dimensionamiento automático. ({{bug("1105111")}} incluye la inclusión de dicha palabra clave).
    • +
+
+
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: -webkit-max-content;
+  flex-basis: -moz-max-content;
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: -webkit-min-content;
+  flex-basis: -moz-min-content;
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: -webkit-fit-content;
+  flex-basis: -moz-fit-content;
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: -webkit-fill-available;
+  flex-basis: -moz-available;
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill/-webkit-fill-available/-moz-available';
+}
+
+ +

Resultados

+ +

{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}Definición Inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerEdgeOperaSafari
Soporte Base{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}11[2]1212.107.0{{property_prefix("-webkit")}}[3]
auto{{CompatGeckoDesktop("18.0")}}21.0111212.107.0{{property_prefix("-webkit")}}
content{{CompatNo}}[4]{{CompatNo}}{{CompatNo}}12{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Base{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Para acivar el soporte de caja flexible en Firefox 18 y 19, el usuario debe cambiar en preferencias about:config  en "layout.css.flexbox.enabled" a true. Firefox soporta flexbox multi-línea desde Firefox 28.

+ +

[2] Cuando no se especifíca flex-basis como auto, Internet Explorer 10-11 (pero no 12+) siempre usa el box model mediante la propiedad content-box para calcular el tamaño de un elemento flexible, incluso si se aplica al elemento la propiedad box-sizing: border-box. Ver Flexbug #7 para más información.

+ +

[3] Ver Safari 7.0.

+ +

[4] Ver {{bug("1105111")}}.

+ +

Ver también

+ + diff --git a/files/es/web/css/flex-direction/index.html b/files/es/web/css/flex-direction/index.html new file mode 100644 index 0000000000..82726b33b6 --- /dev/null +++ b/files/es/web/css/flex-direction/index.html @@ -0,0 +1,158 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CCS + - Cajas Flexibles CSS + - Propiedad CSS + - Referencia + - flexbox +translation_of: Web/CSS/flex-direction +--- +

{{CSSRef}}

+ +

La propiedad CSS flex-direction especifica cómo colocar los objetos flexibles en el contenedor flexible definiendo el eje principal y la dirección (normal o al revés).

+ +

{{EmbedInteractiveExample("pages/css/flex-direction.html")}}

+ +

Tenga en cuenta que el valor de row y  row-reverse se verán afectados por la direccionalidad del contenedor flexible. Si su atributo dir es ltr, row representa el eje horizontal orientado de  izquierda a derecha, y row-reverse desde la derecha hacia la izquierda; si el atributo dir es rtl, row representa el eje orientado de derecha a izquierda, y  row-reverse de izquierda a derecha.

+ +

Sintaxis

+ +
/* La dirección del texto se presenta en una línea */
+flex-direction: row;
+
+/* Como <row>, pero al revés */
+flex-direction: row-reverse;
+
+/* La dirección en la que se apilas las líneas de texto */
+flex-direction: column;
+
+/* Como <column>, pero al revés */
+flex-direction: column-reverse;
+
+/* Valores globales */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+ +

Valores

+ +

Se aceptan los siguientes valores:

+ +
+
row
+
El eje principal del contenedor flexible está definido para ser el mismo que la dirección del texto. Los puntos principales de inicio y final son los mismos que la dirección del contenido.
+
row-reverse
+
+

Se comporta igual que row pero los puntos principales de inicio y final son intercambiados.

+
+
column
+
El eje principal del contenedor flexible es el mismo que el eje del bloque. Los puntos principales de inicio y final son los mismos que los puntos de antes y después del modo escritura.
+
column-reverse
+
Se comporta igual que column pero los puntos principales de inicio y final son intercambiados.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<h4>Esto es un Column-Reverse</h4>
+<div id="content">
+    <div class="box" style="background-color:red;">A</div>
+    <div class="box" style="background-color:lightblue;">B</div>
+    <div class="box" style="background-color:yellow;">C</div>
+</div>
+<h4>Esto es un Row-Reverse</h4>
+<div id="content1">
+    <div class="box1" style="background-color:red;">A</div>
+    <div class="box1" style="background-color:lightblue;">B</div>
+    <div class="box1" style="background-color:yellow;">C</div>
+</div>
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: column-reverse;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: row-reverse;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '300', '', 'Web/CSS/flex-direction') }}

+ +

Sobre Accesibilidad

+ +

Si utilizas flex-direction con un valor de row-reverse o column-reverse en elementos que necesitan foco (como botones) el orden de visualización será distinto al orden el DOM, por lo que los usuarios de lectores de pantalla no verán reflejado el mismo orden de los elementos que un usuario vidente. Para más información (en inglés):

+ + + +

Specificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstado +

Comentario

+
{{ SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad de Navegadores

+ +

{{Compat("css.properties.flex-direction")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/flex-flow/index.html b/files/es/web/css/flex-flow/index.html new file mode 100644 index 0000000000..8d22dbf764 --- /dev/null +++ b/files/es/web/css/flex-flow/index.html @@ -0,0 +1,135 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - CSS Flexible Boxes + - Propiedad CSS + - Referencia +translation_of: Web/CSS/flex-flow +--- +
{{ CSSRef}}
+ +

Resumen

+ +

La propiedad CSS flex-flow  es una propiedad atajo para las propiedades individuales flex-direction y flex-wrap.

+ +

{{cssinfo}}

+ +

Para más propiedades e información ve Utilizando cajas flexibles CSS.

+ +

Sintaxis

+ +
/* flex-flow: <'flex-direction'> */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: <'flex-wrap'> */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: <'flex-direction'> and <'flex-wrap'> */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* valores globales */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+
+ +

Valores

+ +

Ve flex-direction y flex-wrap para más detalles de los valores.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
element {
+  /* Main-axis es la dirección de bloque con main-start y main-end opuesto. Los artículos flex se distribuyen en múltiples líneas */
+  flex-flow: column-reverse wrap;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Flexbox','#flex-flow','flex-flow') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial
+ +

Compatibilidad de navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico28.021.0{{property_prefix("-webkit")}}
+ 29.0		1112.106.1{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico28.0{{ CompatUnknown() }}1112.107.1{{ property_prefix("-webkit") }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/flex-grow/index.html b/files/es/web/css/flex-grow/index.html new file mode 100644 index 0000000000..0e1e47f8b7 --- /dev/null +++ b/files/es/web/css/flex-grow/index.html @@ -0,0 +1,194 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - Elementos flexibles + - Propiedades CSS +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad flex-grow de CSS especifica el factor de crecimiento de un elemento flexible (que tiene asignado display:flex), en su dirección principal. El factor de crecimiento especifica qué cantidad del espacio restante dentro del contenedor flexible, debería ocupar el item en cuestión.

+ +

La dirección principal puede ser la altura o el ancho del elemento, dependiendo del valor de {{cssxref("flex-direction")}}. 

+ +

El espacio restante es el tamaño del contenedor flexible menos el tamaño de todos los elementos flexibles juntos. Si todos los ítems dentro del contenedor tienen el mismo factor de crecimiento, todos los elementos reciben la misma cantidad del espacio restante. De lo contrario, el espacio restante se distribuye en función de los diferentes factores de crecimientos de cada item.

+ +

{{cssinfo}}

+ +

Ver Usando las cajas flexibles en CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* <number> valores */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Valores globales */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

Valores

+ +
+
<number>
+
Ver {{cssxref("<number>")}}. Los valores negativos no son válidos.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+
+ +

CSS

+ +
#content {
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{CompatGeckoDesktop("18.0")}}[1]21.0{{property_prefix("-webkit")}}1112.106.1{{property_prefix("-webkit")}}
< 0 animate{{CompatGeckoDesktop("32.0")}}[2]49.0{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatGeckoMobile("18.0")}}[1]{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
< 0 animate{{CompatGeckoDesktop("32.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox soporta sólo Caja flexible de línea simple hasta Firefox 27. Para activar el soporte de caja flexible para Firefox 18 y 19, el usuario tiene que cambiar en preferencias about:config el layout.css.flexbox.enabled en true.

+ +

Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo -webkit en versión porpietaria por razones compatibilidad web bajo la preferencia layout.css.prefixes.webkit, por defecto en false. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en true.

+ +

[2] Antes de Firefox 32, Gecko no era capaz de animar los valores de inicio o parada en 0(Spec, Demo).

+ +

Ver también

+ + diff --git a/files/es/web/css/flex-shrink/index.html b/files/es/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..01d3740fd3 --- /dev/null +++ b/files/es/web/css/flex-shrink/index.html @@ -0,0 +1,185 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +

La propiedad CSS flex-shrink especifica el factor de contracción de un flex item. Los flex items se encogerán para llenar el contenedor de acuerdo a su número flex-shrink , cuando el tamaño por defecto de los flex items sea mayor al de su contenedor flex container.

+ +
flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Valores globales */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ + + +
{{EmbedLiveSample("flex-shrink", "100%", 280, "", "", "example-outcome-frame")}}
+ +

{{cssinfo}}

+ +

 

+ +

Sintaxis

+ +

La propiedad flex-shrink se especifica como un único <número>.

+ +

Valores

+ +
+
<número>
+
Véase{{cssxref("<number>")}}. Los valores negativos no son válidos
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+
+ +

Ejemplo

+ +

HTML

+ +
+
<p>El ancho del contenido es de 500px; el flex-basis de los flex items es 120px.</p>
+<p>A, B, C tiene flex-shrink:1. D y E tienen flex-shrink:2</p>
+<p>El ancho de D y E es menor al de los otros.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

Result

+ +

{{ EmbedLiveSample('Example', '500px', '300px', '', 'Web/CSS/flex-shrink') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }}Definición inicial
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

Vea también

+ + + +

diff --git a/files/es/web/css/flex-wrap/index.html b/files/es/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..66066fd25e --- /dev/null +++ b/files/es/web/css/flex-wrap/index.html @@ -0,0 +1,121 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +translation_of: Web/CSS/flex-wrap +--- +

{{ CSSRef("CSS Flexible Boxes") }}

+ +

Resumen

+ +

La propiedad flex-wrap de CSS  especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas. Si la cobertura (wrap) está permitida, esta propiedad también te permite controlar la dirección en la cual serán apilados los elementos.

+ +

{{cssinfo}}

+ +

Ver Usando cajas flexibles CSS para conocer más propiedades e información.

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("flex-wrap")}}
+
+ +
flex-wrap: nowrap
+flex-wrap: wrap
+flex-wrap: wrap-reverse
+
+flex-wrap: inherit
+
+ +

Valores

+ +

Se aceptan los siguientes valores:

+ +
+
nowrap
+
Los elementos flex son distribuidos en una sola línea, lo cual puede llevar a que se desborde el contenedor flex. El valor cross-start es equivalente a start o before según el valor de {{cssxref("flex-direction")}}.
+
wrap
+
Los elementos flex son colocados en varias líneas. El valor cross-start equivale a start o before dependiendo del valor flex-direction y cross-end implicaría lo opuesto a lo especificado por cross-start.
+
wrap-reverse
+
Actúa como wrap pero cross-start y cross-end están intercambiados.
+
+ +

Ejemplos

+ +
element {
+  flex-wrap: nowrap;
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

Compatibilidad

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico28.0 {{bug(939901)}}21.0{{ property_prefix("-webkit") }}11.012.106.1{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico28.0 {{bug(939901)}}4.411.012.107.0{{ property_prefix("-webkit") }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/flex/index.html b/files/es/web/css/flex/index.html new file mode 100644 index 0000000000..9e89e10b6b --- /dev/null +++ b/files/es/web/css/flex/index.html @@ -0,0 +1,208 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Resumen

+ +

 

+ +

La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.

+ +

{{cssinfo}}

+ +

 

+ +

Consulte Cómo usar las cajas flexibles de CSS para conocer más propiedades e información.

+ +

Sintáxis

+ +
/* 0 0 auto */
+flex: none;
+
+/* Un valor, número sin unidades: flex-grow */
+flex: 2;
+
+/* Un valor, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Dos valores: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Dos valores: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Tres valores: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valores globales */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Valores

+ +
+
<'flex-grow'>
+
+

Define el flex-grow del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.

+
+
<'flex-shrink'>
+
Define el flex-shrink del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
+
<'flex-basis'>
+
Define el flex-basis del elemento flexible. Se acepta cualquier valor válido para las propiedades  width y height . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.
+
none
+
Esta palabra clave se computa a 0 0 auto.
+
+

Sintaxis normal

+
+
+ +
{{csssyntax}}
+ +

Ejemplo

+ +
#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +
<div id="flex-container">
+    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+    <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ + + +

Resultado

+ +

{{EmbedLiveSample('Example','100%','60')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}
+ {{CompatGeckoDesktop("28.0")}}[2]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}[3]
+ 11.0[3]		12.10 +

6.1{{property_prefix("-webkit")}}
+ 9.0

+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] En Gecko 18.0 {{geckoRelease("18.0")}} y 19.0 {{geckoRelease("19.0")}} el soporte de cajas flexibles está oculto en las preferencias about:config en layout.css.flexbox.enabled, por defecto en false.

+ +

[2] Las cajas flexibles multi-línea están soportadas desde Gecko 28.0 {{geckoRelease("28.0")}}.

+ +

[3] Internet Explorer 10-11 (pero no 12+) ignora el uso de calc() en la parte flex-basis de la sintaxis de flex. Esto se puede solucionar mediante el uso de las propiedades normales en lugar de las abreviadas. Ver Flexbug #8 para más info. Además una declaración flex  con un valor sin unidad en su parte flex-basis es considerado sintácticamente no valido en esas versiones y por lo tanto será ignorado. Una solución consiste en incluir siempre una unidad en la parte flex-basis del valor abreviador flex. Ver Flexbug #4 para más info.

+ +

Ver también

+ + diff --git a/files/es/web/css/float/index.html b/files/es/web/css/float/index.html new file mode 100644 index 0000000000..26077edca5 --- /dev/null +++ b/files/es/web/css/float/index.html @@ -0,0 +1,241 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Float + - CSS Posicionamiento + - CSS Propiedad + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/float +--- +

{{CSSRef}}

+ +

La propiedad CSS float ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del  posicionamiento absoluto).

+ +

{{EmbedInteractiveExample("pages/css/float.html")}}

+ + + +

Un elemento flotante es un elemento en el que el {{ Cssxref("computed value", "valor calculado") }} de float no es igual a none.

+ +

Como float implica el uso del layout de bloques, este modifica el valor calculado de los valores {{cssxref("display")}} , en algunos casos:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor especificadoValor Computado
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
otrossin cambios
+ +

Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto element.style, hay que tener en cuenta que los navegadores modernos soportan float pero en navegadores más antiguos hay que escribir la propiedad como cssFloat, otros navegadores como Internet Explorer 8 y anteriores utilizan styleFloat. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre camel-case (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).

+ +

Sintáxis

+ +
/* Valores clave || Keyword values */
+float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* Valores globales || Global values */
+float: inherit;
+float: initial;
+float: unset;
+ +

Valores

+ +

left 

+ +

El elemento debe flotar a la izquierda de su bloque contenedor.

+ +

right 

+ +

El elemento debe flotar a la derecha de su bloque contenedor.

+ +

none 

+ +

El elemento no deberá flotar.

+ +

inline-start

+ +

El elemento debe flotar en el costado de inicio de su bloque contenedor. Esto es el lado izquierdo con scripts ltr y el lado derecho con scripts rtl.

+ +
+
inline-end
+
El elemento debe flotar en el costado de término de su bloque contenedor . Esto es el lado derecho con scripts ltr y el lado izquierdo con scripts rtl.
+
+ +

Definición Formal

+ +

{{cssinfo}}

+ +

Sintáxis Formal

+ +
+
+ 
{{csssyntax}}
+
+
+
+ +

Ejemplos

+ +

Como son ubicados los elements flotantes 

+ +

Ver El Ejemplo Vivo

+ +

Como se ha mencionado más arriba, cuando un elemento flota, es removido del flujo normal del documento (aunque sigue perteneciendo a él). Se cambia hacia la izquierda, o hacia la derecha, hasta que toca el límite de su caja contenedora, u otro elemento flotante.

+ +

En este ejemplo, hay tres cuadrados de color. Dos flotan hacia la izquierda, y uno hacia la derecha. Nota cómo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuarían apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenarían la siguiente línea.

+ +

Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre width: 100% y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.

+ +

HTML

+ +
<section>
+  <div class="left">1</div>
+  <div class="left">2</div>
+  <div class="right">3</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
+     lectus vulputate. Donec id iaculis velit. Aliquam vel
+     malesuada erat. Praesent non magna ac massa aliquet tincidunt
+     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
+</section>
+ +

CSS

+ +
section {
+  border: 1px solid blue;
+  width: 100%;
+  float: left;
+}
+
+div {
+  margin: 5px;
+  width: 50px;
+  height: 150px;
+}
+
+.left {
+  float: left;
+  background: pink;
+}
+
+.right {
+  float: right;
+  background: cyan;
+}
+ +

RESULTADO:

+ +

{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}

+ +

Limpiando (clearing) flotantes:

+ +

A veces querrás forzar un item a moverse por debajo de elementos flotantes. Por ejemplo, párrafos que han de permanecer adyacentes a elementos flotantes, pero forzar a los encabezados a estar en su propia línea. Para ello revisa el siguiente ejemplo: {{cssxref("clear")}}

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer4
Netscape4
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}

+ +
+

Categorías

+ +

Interwiki Language

+
diff --git a/files/es/web/css/font-family/index.html b/files/es/web/css/font-family/index.html new file mode 100644 index 0000000000..13a3e01b72 --- /dev/null +++ b/files/es/web/css/font-family/index.html @@ -0,0 +1,61 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-family +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad font-family define una lista de fuentes o familias de fuentes, con un orden de prioridad, para utilizar en un elemento seleccionado. A diferencia de la mayoría de las propiedades CSS, los valores se separan con comas (",") para indicar que son valores alternativos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
font-family: <familia o nombre genérico> [, <familia o nombre genérico>]* | inherit
+
+ +

Valores

+ +
+
<nombre de familia o genérico>
+
puede ser un <nombre de familia> o un <nombre genérico>
+
nombre de familia 
+
El nombre de la familia de la fuente. Por ejemplo, 'Times' y 'Helvética' son nombres de familia. Los nombres de familia que contengan espacios, deben escribirse entre comillas (por ejemplo: "Times New Roman").
+
nombre genérico 
+
Se han definido los siguientes nombres genéricos: serif, sans-serif, cursive, fantasy, monospace. Los nombres genéricos son palabras claves y no deben ponerse entre comillas.
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
+
+.receipt { font-family: Courier, "Lucida Console", monospace }
+
+ +

Notas

+ +

Un nombre genérico debería ser siempre el último de la lista en una propiedad font-family.

+ +

La propiedad font-family especifica una lista de fuentes, desde la prioridad más alta a la más baja. La selección de fuentes no se detiene en la primera de la lista que está en el equipo del usuario. Por el contrario la selección de fuentes se realizacarácter a carácter, por lo que, si una fuente seleccionada no tiene el carácter que se quiere mostrar, se recurre a la siguiente.

+ +

Cuando una fuente no está disponible en algún {{ Cssxref("font-style", "estilo de fuente") }}, {{ Cssxref("font-variant", "variantes de fuente") }}, o {{ Cssxref("font-size", "tamaño de fuente") }}, estas propiedades pueden influir en la elección de la fuente.

+ +

Especificaciones

+ + + +

Compatibilidades

+ +

TBD (La mejor manera centralizada en un único cuadro de compatibilidad.)

diff --git a/files/es/web/css/font-size-adjust/index.html b/files/es/web/css/font-size-adjust/index.html new file mode 100644 index 0000000000..99d499dd78 --- /dev/null +++ b/files/es/web/css/font-size-adjust/index.html @@ -0,0 +1,60 @@ +--- +title: font-size-adjust +slug: Web/CSS/font-size-adjust +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/font-size-adjust +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad {{ Cssxref("font-size-adjust") }} especifica que el tamaño de la fuente debería escogerse basándose en el tamaño de las minúsculas en lugar las mayúsculas.

+ +

Esto resulta útil ya que la legibilidad de las fuentes, especialmente en el tamaño pequeño, está determinada por el tamaño de las letras minúsculas más que por las mayúsculas. Esto puede causar problemas cuando la primera opción en {{ Cssxref("font-family") }} no está disponible y su reemplazo tiene significativamente un aspecto distinto (el ratio entre las letras minúsculas y mayúsculas de la fuente).

+ +

Para hacer esto de forma que sea compatible con los navegadores que no soportan {{ Cssxref("font-size-adjust") }}, se ha especificado de forma que sea el número por el que está multiplicada la propiedad {{ Cssxref("font-size") }}. Esto quiere decir que el valor especificado para la propiedad debería ser el valor deratio o relación de aspecto entre las minúsculas y las mayúsculas de la fuente escogida como primera opción. Por ejemplo, si especificamos una fuente font-size: 16px; font-size-adjust: 0.5, realmente estamos especificando que las letras minúsculas de la fuente deben tener 8px de alto (16px multiplicado por 0.5).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

font-size-adjust: <número> | none | {{ Cssxref("inherit") }}

+ +

Valores

+ +
+
none 
+
Escoge el tamaño de la fuente basándose sólo en función de la propiedad {{ Cssxref("font-size") }}.
+
<número> 
+
+

Escoge el tamaño de la fuente de manera tal que su letra minúscula (determinada por la altura-x de la fuente) sea elnúmero de veces el tamaño de {{ Cssxref("font-size") }}.

+ +

El número especificado es generalmente la relación de aspecto de la fuente de primera elección en la propiedad {{ Cssxref("font-family") }}. Esto significa que la primera fuente, si está disponible, aparecerá con el mismo tamaño en los navegadores, soporten estos o no la propiedad {{ Cssxref("font-size-adjust") }}.

+
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
p{
+  font: 12px Verdana, sans-serif;
+  font-size-adjust: 0.58;
+}
+
+
+ +

Especificaciones

+ + + +

Compatibilidades

+ +

Soportado en todas las plataformas a partir de Gecko 1.9 / Firefox 3, pero soportado sólo en Windows bastante antes.

diff --git a/files/es/web/css/font-size/index.html b/files/es/web/css/font-size/index.html new file mode 100644 index 0000000000..6b2dffe670 --- /dev/null +++ b/files/es/web/css/font-size/index.html @@ -0,0 +1,69 @@ +--- +title: font-size +slug: Web/CSS/font-size +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad font-size especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades em y ex.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

font-size: xx-small | x-small | small | medium | large | x-large | xx-large

+ +

font-size: smaller | larger

+ +

font-size: <longitud> | <porcentaje> | {{ Cssxref("inherit") }}

+ +

Valores

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large 
+
un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es medium). De forma parecida a las sentencias HTML <font size="1"> hasta <font size="7"> donde el tamaño por defecto es <font size="3">.
+
larger, smaller 
+
más grande o más pequeño que el tamaño de letra del elemento padre, con aproximadamente el mismo ratio que el mencionado anteriormente.
+
<longitud> 
+
una unidad positiva de longitud.
+
+ +
+
<Porcentaje> 
+
un porcentaje positivo del cuerpo de letra del elemento padre.
+
+ +

Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como longitud absoluta en unidades distintas a em o ex. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades px (píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.

+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
/* Ajusta el texto del párrafo a un cuerpo de letra muy grande. */
+p { font-size: xx-large }
+
+/* Ajusta la cabecera de nivel 1 (h1) a 2,5 veces del tamaño
+ * del texto. */
+h1 { font-size: 250% }
+
+/* Ajusta el texto incluido en span a 16px */
+span { font-size: 16px; }
+
+ +

Notas

+ +

Las unidades em y ex en la propiedad {{ Cssxref("font-size") }} son relativas al tamaño de letra del elemento padre (al contrario que todas las demás propiedades, en las que estas unidades son relativas al tamaño de letra del elemento). Esto quiere decir que las unidades em y los porcentajes se comportan de igual forma cuando hablamos de {{ Cssxref("font-size") }}.

+ +

Especificaciones

+ + diff --git a/files/es/web/css/font-style/index.html b/files/es/web/css/font-style/index.html new file mode 100644 index 0000000000..f467769af0 --- /dev/null +++ b/files/es/web/css/font-style/index.html @@ -0,0 +1,152 @@ +--- +title: font-style +slug: Web/CSS/font-style +tags: + - CSS + - Propiedad de CSS + - Referencia + - Tipos de letra de CSS + - Web + - tipo de letra +translation_of: Web/CSS/font-style +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad font-style permite definir el aspecto de una familia tipográfica entre los valores: normal, italic (cursiva) y oblique.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
font-style: normal;
+font-style: italic;
+font-style: oblique;
+
+/* Valores globales */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+
+ +

Valores

+ +
+
normal
+
Escoge un tipo de letra clasificado como normal dentro de una {{Cssxref("font-family", "familia de fuente")}}.
+
italic
+
Escoge un tipo de letra etiquetado como italic, o, si una versión cursiva del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como oblique en lugar de eso.
+
oblique
+
Escoge un tipo de letra etiquetado como oblique, o, si una versión oblique del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como italic en lugar de eso.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

El ejemplo muestra los valores diferentes de font-style.

+ + + +
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}
+ +

{{ EmbedLiveSample('Ejemplo') }}

+ +

Ten en cuenta que no todas las fuentes tienen tipos de letra distintos para oblique y italic, si este no es el caso, los navegadores simulan el estilo que falta utilizando el tipo de letra presente. Un ejemplo de representación de una fuente con ambos tipos de letra:

+ +

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}Sin cambio
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}Sin cambio
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Definición inicial
+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Apoyo básico1.0{{CompatGeckoDesktop("1")}} [1]4.07.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Apoyo básico1.0{{CompatGeckoMobile("1")}} [1]6.06.01.0
+
+ +

[1] Antes de Firefox 44, Gecko no hacía diferencia entre oblique y italic. Desde entonces, Gecko usa el tipo de letra correcto si está disponible.

diff --git a/files/es/web/css/font-variant-alternates/index.html b/files/es/web/css/font-variant-alternates/index.html new file mode 100644 index 0000000000..a1995762a0 --- /dev/null +++ b/files/es/web/css/font-variant-alternates/index.html @@ -0,0 +1,155 @@ +--- +title: font-variant-alternates +slug: Web/CSS/font-variant-alternates +tags: + - Fuentes CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/font-variant-alternates +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS font-variant-alternates controla el uso de glifos alternos. Estos glifos alternos pueden ser referenciados por nombres alternativos en {{cssxref("@font-feature-values")}}.

+ +

Las reglas-at definen nombres, para un tipo determinado de glifos alternativos (stylistic, styleset, character-variant, swash, ornament o annotation), asociándolos a un valor OpenType dado. Esta propiedad permite utilizar estos nombres de fácil uso (según se defina en {{cssxref("@font-feature-values")}}) dentro de la hoja de estilos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
font-variant-alternates: normal;
+font-variant-alternates: historical-forms;
+font-variant-alternates: stylistic(user-defined-ident);
+font-variant-alternates: styleset(user-defined-ident);
+font-variant-alternates: character-variant(user-defined-ident);
+font-variant-alternates: swash(user-defined-ident);
+font-variant-alternates: ornaments(user-defined-ident);
+font-variant-alternates: annotation(user-defined-ident);
+font-variant-alternates: swash(ident1) annotation(ident2);
+
+/* Global values */
+font-variant-alternates: initial;
+font-variant-alternates: inherit;
+font-variant-alternates: unset;
+
+ +

Valores

+ +
+
normal
+
Se deshabilita el uso de glifos alternos.
+
historical-forms
+
Se habilita la muestra de formas históricas , es decir, glifos que eran usados comúnmente en el pasado, pero no en la actualidad. Corresponde al valor de OpenType hist.
+
stylistic()
+
Esta función habilita la muestra de alternos estilísticos. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType salt, como salt 2.
+
styleset()
+
Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType ssXY, como ss02.
+
character-variant()
+
Esta función habilita el uso de un conjunto de alternos estilísticos para caracteres. Es muy similar a styleset(), aunque la variante aquí no crea glifos coherentes a un set de caracteres; los caracteres individuales tendrán estilos indipendientes, no necesariamente coherentes. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType cvXY, como cv02.
+
swash()
+
Esta función habilita la muestra de glifos de tipografía swash. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde a los valores de OpenType swsh y cswh, como swsh 2 y cswh 2.
+
ornaments()
+
Esta función habilita la muestra de ornamentas, que son florones y otros glifos de estilo dingbat. El parámetro es un nombre específico de fuente mapeado a un número. Corresponde al valor de OpenType ornm, como ornm 2. +
Nota: para manteneer la semántica de la fuente, se invita a los diseñadores de fuentes a incluir ornamentas qoe no coincidan con caracteres zingbat de Unicode como variantes de ornamenta al caracter de viñeta (U+2022). Las fuentes bien diseñadas lo harán, aunque muchas otras fuentes no.
+
+
annotation()
+
Esta función habilita la muestra de anotaciones, como dígitos circulares o caracteres invertidos. El parámetro es un nombre de fuente específico mapeado a un número. Corresponde al valor de OpenType nalt, como nalt 2.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Firefox rocks!</p>
+<p class="variant">Firefox rocks!</p>
+
+ +

CSS

+ +
p.variant {
+  font-family: Leitura Display Swashes;
+  font-variant-alternates: swash(2);
+}
+ +

Resultado

+ +

Nota: se necesita la fuente Open Type Leitura Display Swashes instalada para que este ejemplo funcione

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant-alternates') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Fonts', '#propdef-font-variant-alternates', 'font-variant-alternates')}}{{Spec2('CSS3 Fonts')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatGeckoDesktop("34")}} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{CompatGeckoMobile("34")}}[1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Una implementación experimental estaba disponible desde Gecko 24. Se regía por la preferencia layout.css.font-features.enabled, con valor predeterminado de true, solamente disponible en Nightly y Aurora.

diff --git a/files/es/web/css/font-variant/index.html b/files/es/web/css/font-variant/index.html new file mode 100644 index 0000000000..972022db38 --- /dev/null +++ b/files/es/web/css/font-variant/index.html @@ -0,0 +1,47 @@ +--- +title: font-variant +slug: Web/CSS/font-variant +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font-variant +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad font-variant selecciona entre los aspectos normal y small-caps para la {{ Cssxref("font-family", "familia de fuente") }} determinado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
+
font-variant: {{ mediawiki.external('normal | small-caps') }} ;
+
+ +

Valores

+ +
+
normal
+
Especifica un aspecto de letra normal.
+
+ +
+
small-caps
+
Especifica un tipo de letra que está declarado como tipo de letra small-caps. Si no hay un tipo de letra small-caps disponible, Mozilla simulará un tipo de letra small-caps, por ejemplo tomando un tipo de letra normal y reemplazando las letras en minúsculas por caracteres en mayúsculas escalados.
+
+ +

Ejemplos

+ +
h1 { font-variant: small-caps }
+p { font-variant: small-caps}
+
+ +

Especificaciones

+ + diff --git a/files/es/web/css/font-weight/index.html b/files/es/web/css/font-weight/index.html new file mode 100644 index 0000000000..747efcfd61 --- /dev/null +++ b/files/es/web/css/font-weight/index.html @@ -0,0 +1,181 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - Propiedad de CSS + - Referencia + - Tipos de letra de CSS +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad font-weight de CSS especifica el peso o grueso de la letra. Algunos tipos de letra sólo están disponibles en normal y bold.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
font-weight: normal;
+font-weight: bold;
+
+/* Relativo al padre */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Valores globales */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

Valores

+ +
+
normal 
+
Peso/grueso normal de la fuente. Igual que 400.
+
bold 
+
Grueso ancho (negrita). Igual que 700.
+
lighter 
+
Corresponde a un tipo de fuente menos grueso que el tipo del elemento padre (dentro de los valores disponibles).
+
bolder 
+
Corresponde a un tipo de fuente más grueso que el tipo del elemento padre (dentro de los valores disponibles).
+
100, 200, 300, 400, 500, 600, 700, 800, 900 
+
Pesos numéricos para los tipos de fuente que nos permiten más flexibilidad que normal - bold. Si el peso especificado no existe en el tipo de fuente escogido, un valor entre 600 y 900 se presentará con el valor más próximo disponible para dar una letra más oscura. De igual forma, un valor entre 100 y 500 se presentará con el valor más próximo disponible para dar una letra más clara. Esto significa que para los tipos de letra que sólo dispongan de normal y bold, cualquier valor entre 100 y 500 será normal y entre 600 y 900, será bold.
+
+ +

Ejemplos

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Poner texto del párrafo en negrita. */
+p {
+  font-weight: bold;
+}
+
+/* Poner texto del div a dos pasos más oscuro que lo
+   normal pero menos que una negrita estándar. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Examples","400","300")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}Sin cambio
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}Define font-weight como animable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}Sin cambio
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Apoyo básico2.0{{CompatGeckoDesktop(1.0)}}3.03.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Apoyo básico1.0{{CompatGeckoMobile(1.0)}}6.06.03.1
+
diff --git a/files/es/web/css/font/index.html b/files/es/web/css/font/index.html new file mode 100644 index 0000000000..a97451bd1d --- /dev/null +++ b/files/es/web/css/font/index.html @@ -0,0 +1,123 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/font +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad {{ Cssxref("font") }} permite establecer de una sola vez los valores para todas las propiedades: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} y {{ Cssxref("font-family") }} en una hoja de estilo.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>

+ +

font: caption | icon | menu | message-box | small-caption | status-bar | -moz-window | -moz-document | -moz-workspace | -moz-desktop | -moz-info | -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field

+ +

font: {{ Cssxref("inherit") }}

+ +

Valores

+ +

La propiedad {{ Cssxref("font") }} establece los valores individuales tal como se especifica y a las otras su valor inicial.

+ +

Ver las propiedades individuales: {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }}.

+ +

También se pueden especificar los tipos de letra del sistema usando la propiedad {{ Cssxref("font") }},en lugar de tener que especificar cada propiedad individualmente:

+ +
+
caption 
+
el tipo de letra para elementos de control (por ejemplo: botones, cajas de selección, etc.).
+
icon 
+
el tipo de letra usado para etiquetar iconos.
+
menu 
+
el tipo de letra usado en menús (por ejemplo: barra de menú o menús desplegables).
+
message-box 
+
el tipo de letra usado en cajas de diálogo.
+
small-caption 
+
el tipo de letra usado para etiquetar pequeños controles (small control).
+
status-bar 
+
el tipo de letra usado en la barra de estado de la ventana.
+
-moz-window 
+
 
+
-moz-document 
+
 
+
-moz-workspace 
+
 
+
-moz-desktop 
+
 
+
-moz-info 
+
 
+
-moz-dialog 
+
 
+
-moz-button 
+
 
+
-moz-pull-down-menu 
+
 
+
-moz-list 
+
 
+
-moz-field 
+
 
+
+ +

Ejemplos

+ +

Ver El Ejemplo Vivo

+ +
/* Ajusta el tamaño de letra a 12pt y el alto de línea a 14pt. La familia tipográfica es sans-serif */
+p { font: 12pt/14pt sans-serif }
+
+ +
/* Ajusta el tamaño de letra al 80% del elemento padre o al tamaño por defecto (si no hay elemento padre) y la familia tipográfica a sans-serif */
+p { font: 80% sans-serif }
+
+ +
/* Ajusta el peso tipográfico a '''bold''' (negrita), el estilo de letra a ''italic'' (cursiva), el tamaño de letra a large (grande) y la familia a serif. */
+p { font: bold italic large serif }
+
+ +

Notas

+ +

Las partes {{ Cssxref("font-size") }} y {{ Cssxref("font-family") }} de {{ Cssxref("font") }} son obligatorias. Omitirlas causa un error de sintaxis y la declaración CSS será completamente ignorada.

+ +

Si no se establece un valor concreto, las propiedades tomarán el valor por defecto: normal. Las propiedades que se pueden omitir son: ({{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }} y {{ Cssxref("line-height") }}).

+ +

La propiedad {{ Cssxref("font-size-adjust") }} también se establece a su valor inicial (none) cuando se usa la propiedad general {{ Cssxref("font") }}.

+ +

Especificaciones

+ +
    +
  • CSS 1
    • +
  • CSS 2 (para {{ Cssxref("font-size-adjust") }})
    • +
  • CSS 2.1
    • +
  • css3-ui (para los nuevos valores de fuentes de sistema])
    • +
+ +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer3
Netscape4
Opera3.5
diff --git a/files/es/web/css/frequency/index.html b/files/es/web/css/frequency/index.html new file mode 100644 index 0000000000..24d700b2ff --- /dev/null +++ b/files/es/web/css/frequency/index.html @@ -0,0 +1,161 @@ +--- +title: +slug: Web/CSS/frequency +tags: + - CSS + - Presentación + - Referencia + - Tipos de datos CSS + - Unidad CSS + - Web +translation_of: Web/CSS/frequency +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <frequency> denota una dimensión en frecuencia, como el tono de una voz hablando. Consisste en un valor {{cssxref("<number>")}} seguido inmediatamente por la unidad. Como en cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

+ +

Las siguientes unidades deben ser usadas:

+ +
    +
  • Hz, que representa una frecuencia en Hertz. Ejemplos: 0Hz, 1500Hz, 10000Hz.
    • +
  • kHz, que representa una frecuencia en kilohertz. Ejemplos: 0kHz, 1.5kHz, 10kHz.
    • +
+ +

Aunque todas las unidades representen la misma frecuencia para el valor 0, la unidad no debe ser omitida en ese caso, puesto que no es un valor {{cssxref("length")}}: 0, no es válido, y no representa 0Hz, 0kHz. Aunque las unidades sean insensibles a mayúsculas en CSS, es buena práctica usar una H mayúscula para Hz y kHz, como indica el SI, siendo Hertz un apellido.

+ +

Ejemplos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valores de frecuencia permitidos
CódigoSignificado
12HzEntero positivo.
-456kHzEntero negativo.
4.3HzNo entero.
14KhZLa unidad es insensible al uso de mayúsculas, aunque no se recomienda una representación que no esté acorde al SI.
+0HzCero, con un símbolo + y la unidad.
-0kHzCero, con un símbolo - y la unidad (Aunque no sea común, es un valor permitido).
+ + + + + + + + + + + + + + + + + + + + + + + +
CódigoSignificado
Valores de frecuencia no permitidos
12.0Éste es un tipo {{cssxref("<number>")}}, no un tipo <frequency>, debe tener una unidad.
7 HzNo se permite espacio entre el número {{cssxref("<number>")}} y la unidad.
0El valor cero puede ser escrito sin unidad solo para tipo {{cssxref("<length>")}}, no para <frequency>.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}{{Spec2('CSS3 Values')}}Definición inicial
+ +

Este tipo de dato fue introducido inicialmente en CSS Nivel 2 para el ya obsoleto grupo de merios aural, donde era usado para definir el tono de la voz. Dicho grupo fue descontinuado desde entonces, pero el tipo de datos <frequency> ha sido reintroducido en CSS3, aunque ninguna propiedad CSS lo usa por el momento.

+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Algunas versiones de Opera pueden tener (partialmente) soporte para el grupo de medios aural obsoleto, y con soporte al tipo de datos <frequency> a través de la propiedad de tono.

diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradiente/index.html new file mode 100644 index 0000000000..ae187f2521 --- /dev/null +++ b/files/es/web/css/gradiente/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/CSS/Gradiente +tags: + - CSS + - CSS tipo de datos + - Degradado + - Diseño + - Gradiente + - Referencia + - graficos +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de datos CSS <gradient> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).

+ +

{{EmbedInteractiveExample("pages/css/type-gradient.html")}}

+ +

Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.

+ +

Funciones de las Gradientes

+ +

Hay tres tipos de gradientes de color:

+ +
    +
  • Linear gradients(gradiente lineal), generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria. + + + + 
    body {
+background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}
    + +

    {{ EmbedLiveSample('linear-gradient', 600, 20) }}

    +
    • +
  • Radial gradient (gradientes radiales), generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será. + + + 
    body {
+background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
    + +

    {{ EmbedLiveSample('radial-gradient', 600, 20) }}

    +
    • +
  • Repeating gradient (gradientes de repetición), donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja. + + + 
    body {
+background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}
    + +

    {{ EmbedLiveSample('repeating-gradient', 600, 20) }}

    +
    • +
+ +

Interpolación

+ +

Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando.  (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}} 
+ +

Compatibilidad del navegador

+ +

Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.

+ +

Ver también

+ +
    +
  • Usando Gradientes CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • +
diff --git a/files/es/web/css/grid-auto-columns/index.html b/files/es/web/css/grid-auto-columns/index.html new file mode 100644 index 0000000000..18d241f7b6 --- /dev/null +++ b/files/es/web/css/grid-auto-columns/index.html @@ -0,0 +1,209 @@ +--- +title: grid-auto-columns +slug: Web/CSS/grid-auto-columns +tags: + - CSS + - CSS Grid + - Experimental + - Propiedades CSS + - Referencia +translation_of: Web/CSS/grid-auto-columns +--- +

La propiedad de css grid-auto-columns   especifíca el tamaño de una columna de cuadrícula creada implícitamente {{glossary("grid tracks", "track")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}}
+ + + +

Si un item grid se posiciona dentro de una columna que no tenga un tamaño explícito para  {{cssxref("grid-template-columns")}}, implícito{{glossary("grid", "grid")}}las pistan se crean para sostenerlo. Esto puede suceder posicionándose explícitamente en una columna que está fuera de rango, o mediante el algoritmo de auto colocación creando columnas adicionales.

+ +

Sintaxis

+ +
/* Keyword values */
+grid-auto-columns: min-content;
+grid-auto-columns: max-content;
+grid-auto-columns: auto;
+
+/* <length> values */
+grid-auto-columns: 100px;
+grid-auto-columns: 20cm;
+grid-auto-columns: 50vmax;
+
+/* <percentage> values */
+grid-auto-columns: 10%;
+grid-auto-columns: 33.3%;
+
+/* <flex> values */
+grid-auto-columns: 0.5fr;
+grid-auto-columns: 3fr;
+
+/* minmax() values */
+grid-auto-columns: minmax(100px, auto);
+grid-auto-columns: minmax(max-content, 2fr);
+grid-auto-columns: minmax(20%, 80vmax);
+
+/* fit-content() values */
+grid-auto-columns: fit-content(400px);
+grid-auto-columns: fit-content(5cm);
+grid-auto-columns: fit-content(20%);
+
+/* multiple track-size values */
+grid-auto-columns: min-content max-content auto;
+grid-auto-columns: 100px 150px 390px;
+grid-auto-columns: 10% 33.3%;
+grid-auto-columns: 0.5fr 3fr 1fr;
+grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-columns: inherit;
+grid-auto-columns: initial;
+grid-auto-columns: unset;
+
+ +

Values

+ +
+
<length>
+
Es una longitud no negativa.
+
<percentage>
+
Es un valor no negativo {{cssxref("percentage", "<percentage>")}} en relación con el tamaño del bloque del contenedor de la grilla. Si el tamaño de bloque del contenedor de cuadrícula es indefinido, el valor porcentual se trata como automático.
+
<flex>
+
Es una dimensión -valor- no negativa con la unidad fr especificando el 'factor flex' del espacio entre dos celdas. Si el espacio entre dos celdas está designado como <flex> tomará una porción del espacio remanente entre celdas en proporción a su 'factor flex' - o flex factor fr-.
+
Si aparece en una función minmax() implica un mínimo automático (ejemplo: minmax(auto, <flex>)).
+
max-content
+
Es una keyword o palabra clave que representa el contenido máximo de los items que ocupan el espacio de la grid o cuadrilla.
+
min-content
+
Es una keyword o palabra clave que representa el contenido mínimo de los items que ocupan el espacio de la grid o cuadrilla.
+
minmax(min, max)
+
Es una notación funcional (una función) que define un rango de tamaño mayor que o igual a min y menor que o igual a max. Si max es menor que min, entonces max será ignorado y la función será tratada como un min. Si establecemos un valor máximo como <flex>, se define el 'factor flex' del espacio entre las celdas del grid. Si establecemos el valor mínimo como <flex>, se tratará como cero, o contenido mínimo si el contenedor de la grid/cuadrilla tiene la restricción de valor mínimo (min-content).
+
fit-content(argument)
+
Representa la fórmula min(max-content, max(auto, argument)), que se calcula similar a auto (por ejemplo: minmax(auto, max-content)), excepto que el track size o espacio entre celdas es mayor que el auto mínimo.
+
auto
+
Es una palabra reservada -o keyword- que es idéntica a contenido máximo si es un máximo. Como mínimo representa el máximo valor mínimo aceptado (según lo especificado por{{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula que ocupan el espacio de la cuadrícula.
+
+

Note: Los valores de tamaño auto  (y solo los auto) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}} .

+
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

Contenido CSS 

+ +
#grid {
+  height: 100px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-columns: 200px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

Resultado:

+ +

{{EmbedLiveSample("Example", "410px", "100px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("CSS3 Grid", "#propdef-grid-auto-columns", "grid-auto-columns")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilidad con Navegadores

+ + + +

Vea también

+ + + + diff --git a/files/es/web/css/grid-auto-rows/index.html b/files/es/web/css/grid-auto-rows/index.html new file mode 100644 index 0000000000..b50943f3c2 --- /dev/null +++ b/files/es/web/css/grid-auto-rows/index.html @@ -0,0 +1,204 @@ +--- +title: grid-auto-rows +slug: Web/CSS/grid-auto-rows +tags: + - CSS + - Grilla CSS + - Propiedad CSS +translation_of: Web/CSS/grid-auto-rows +--- +

La propiedad grid-auto-rows de CSS especifíca el tamaño de una nueva fila creada de forma implícita.

+ +
/* Keyword values */
+grid-auto-rows: min-content;
+grid-auto-rows: max-content;
+grid-auto-rows: auto;
+
+/* <length> values */
+grid-auto-rows: 100px;
+grid-auto-rows: 20cm;
+grid-auto-rows: 50vmax;
+
+/* <percentage> values */
+grid-auto-rows: 10%;
+grid-auto-rows: 33.3%;
+
+/* <flex> values */
+grid-auto-rows: 0.5fr;
+grid-auto-rows: 3fr;
+
+/* minmax() values */
+grid-auto-rows: minmax(100px, auto);
+grid-auto-rows: minmax(max-content, 2fr);
+grid-auto-rows: minmax(20%, 80vmax);
+
+/* multiple track-size values */
+grid-auto-rows: min-content max-content auto;
+grid-auto-rows: 100px 150px 390px;
+grid-auto-rows: 10% 33.3%;
+grid-auto-rows: 0.5fr 3fr 1fr;
+grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
+grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
+
+/* Global values */
+grid-auto-rows: inherit;
+grid-auto-rows: initial;
+grid-auto-rows: unset;
+
+ +

Si el elemento de una grilla es ubicado en una fila que no tiene un tamaño explicitado en {{cssxref("grid-template-rows")}}, se crean filas implícitas en la {{glossary("grid", "grilla")}} para ubicarlas. Esto puede suceder al ubicar explícitamente un elemento en una fila que está fuera de rango o por el posicionamiento automático que utiliza el algoritmo para crear líneas adicionales.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
<length>
+
Es una medida no negativa.
+
<percentage>
+
Es un {{cssxref("percentage", "<percentage>")}} no negativo relativo al tamaño del bloque del contenedor de la grilla. Si el tamaño del bloque del contenedor de la grilla es indefinido, el valor del porcentaje es tratado como auto.
+
<flex>
+
Es una dimensión no negativa con la unidad fr especificando el factor flex de la pista (track). Cada pista con valor <flex> toma una parte del espacio restante en proporción con su factor flex. +

Cuando aparece fuera de una notación minmax(), implica un mínimo automático (p.e. minmax(auto, <flex>)).

+
+
max-content
+
representa el largo maximo del contenido de cada uno de los items de la pista en la cuadricula(grid)
+
min-content
+
+ +

representa el largo minimo del contenido de cada uno de los items de la pista en la cuadricula(grid)

+ +
+
minmax(minimo, maximo)
+
es una notacion funcional que define el rango del tamano, dicho tamano debe ser mayor o igual al (minimo) y menor o igual al (maximo). si el parametro (maximo) es mas pequeno que el parametro (minimo), entonces el parametro (maximo) es ignorado y la funcion se tratara con el parametro (minimo). De otra manera si, a valor <flex> pone como minimo el factor flex de la pista, sera tratado como cero( or el contenido minimo, si el contenedor grid es inicializado con el tamano minimo permitido ).
+
+ +
+
auto
+
Es una palabra clave que es identica a contenido máximo si es un máximo. Como mínimo representa el valor mínimo más grande (como esté especificado por  {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la grilla que ocupan la pista de la grilla.
+
+

Nota: los tamaños de la pista auto (y sólo los tamaños de la pista auto) pueden ser estirados por las propiedades {{cssxref("align-content")}} y {{cssxref("justify-content")}}.

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML Content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS Content

+ +
#grid {
+  width: 200px;
+  display: grid;
+  grid-template-areas: "a a";
+  grid-gap: 10px;
+  grid-auto-rows: 100px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "210px", "210px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-auto-rows", "grid-auto-rows")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-auto-rows")}}

+ +

Ver también

+ + + + diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/grid-column-gap/index.html new file mode 100644 index 0000000000..4fb514cc7f --- /dev/null +++ b/files/es/web/css/grid-column-gap/index.html @@ -0,0 +1,157 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +translation_of: Web/CSS/column-gap +--- +

La propiedad CSS grid-column-gap especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.

+ +
/* <length> values */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* <percentage> value */
+grid-column-gap: 10%;
+
+/* Global values */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+
+ +

El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Valores

+ +
+
<length-percentage>
+
Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "100px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Definición incial
+ +

Compatibilidad en navegadores

+ +

 

+ + + +

{{Compat("css.properties.grid-column-gap")}}

+ +

 

+ +

Ver también

+ + + + diff --git a/files/es/web/css/grid-gap/index.html b/files/es/web/css/grid-gap/index.html new file mode 100644 index 0000000000..4b0c156d44 --- /dev/null +++ b/files/es/web/css/grid-gap/index.html @@ -0,0 +1,251 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +--- +

Resumen

+ +

La propiedad CSS grid-gap es una propiedad  abreviada shorthand para {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} que especifica los canales entre las filas y las columnas de la cuadrícula.

+ +

Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor <longitud> */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Un valor <porcentaje> */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Dos valores <longitud> */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Uno o dos valores <porcentaje> */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Valores Globales */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

Valores

+ +
+
<longitud>
+
Es el ancho del calalón que separa las lineas de las rejillas.
+
<percentage>
+
Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Contenido CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "200px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatNo}}[6]
<porcentaje> valor{{CompatNo}}{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatNo}}[4]{{CompatNo}}[6]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaVista web de AndroidChrome para AndroidFirefox Móvil (Gecko)IE MóvilOpera MóvilSafari Móvil
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}[3]{{CompatOperaMobile(44)}}{{CompatUnknown}}
<porcentaje> value{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("52.0")}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementado bajo la plataforma web experimental de características de etiquetas en chrome://flags since Chrome 29.0.

+ +

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[3] Internet Explorer implements an older version of the specification, which didn't define this property.

+ +

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

+ +

[5] Implemented behind the preference layout.css.grid.enabled since Gecko 49.0 {{geckoRelease("49.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[6] Experimental implementation available in Safari Technological Preview.

+ +

See also

+ + + + diff --git a/files/es/web/css/grid-template-areas/index.html b/files/es/web/css/grid-template-areas/index.html new file mode 100644 index 0000000000..b97dd3ef69 --- /dev/null +++ b/files/es/web/css/grid-template-areas/index.html @@ -0,0 +1,233 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +translation_of: Web/CSS/grid-template-areas +--- +

La propiedad CSS grid-template-areas especifica nombres para cada una de las {{glossary("grid areas")}}.

+ +
/* Keyword value */
+grid-template-areas: none;
+
+/* <string> values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+
+ +

Estas áreas no están asociadas a ningún elemento particular de la cuadrícula, pero pueden referenciarse desde otras propiedades de posicionamiento en la cuadrícula: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, y sus formas abreviadas {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, and {{cssxref("grid-area")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
El contenedor de la cuadrícula no define ningún nombre para las áreas de la cuadrícula.
+
<string>+
+
Las filas se crean listando líneas de cadenas separadas, mientras que las columnas se reflejan en cada una de las celdas que aparecen en la cadena. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>
+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", "250px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatSafari(10.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatGeckoMobile("52.0")}}[2]{{CompatNo}}[3]{{CompatOperaMobile(44)}}{{CompatSafari(10.3)}}
+
+ +

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

+ +

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this property.

+ +

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

+ +

See also

+ +
    +
  • Related CSS properties: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}
    • +
  • Grid Layout Guide: Grid template areas
    • +
  • Video tutorial: Grid Template Areas
    • +
+ + diff --git a/files/es/web/css/grid-template-columns/index.html b/files/es/web/css/grid-template-columns/index.html new file mode 100644 index 0000000000..4dd982b375 --- /dev/null +++ b/files/es/web/css/grid-template-columns/index.html @@ -0,0 +1,188 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +translation_of: Web/CSS/grid-template-columns +--- +

La propiedad CSS grid-template-columns define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid column", "grid columns")}}.

+ +
/* Keyword value */
+grid-template-columns: none;
+
+/* <track-list> values */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+
+/* <auto-track-list> values */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier columna será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-columns")}}.
+
{{cssxref("<length>")}}
+
Es una longitud no negativa.
+
{{cssxref("<percentage>")}}
+
Es un valor no negativo {{cssxref("percentage", "<percentage>")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como auto.
+ Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.
+
{{cssxref("<flex>")}}
+
Es una dimensión no negativa con la unidad fr especificando el factor de flexibilidad de la vía. Cada vía de tamaño- <flex> toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación minmax(), implica un mínimo automático (es decir, minmax(auto, <flex>)).
+
max-content
+
Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.
+
min-content
+
Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.
+
{{cssxref("minmax", "minmax(min, max)")}}
+
Es una notación funcional que define un rango de tamaño, mayor o igual que min, y menor o igual que max. Si max es menor a min, entonces max es ignorado y la función es tratada como min. Como un máximo, un valor <flex> ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.
+
auto
+
Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.
+
+

Nota: Los tamaños de vía auto  (y sólo los tamaños de vía auto ) pueden ser estirados por las propiedades {{cssxref("justify-content")}}.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Representa la fórmula min(max-content, max(auto, argument)), que se calcula de forma similar a auto (es decir, minmax(auto, max-content)), excepto que el tamaño de la vía se fija a argument si es mayor que el mínimo.
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de columnas que muestran un patrón recurrente se escriban de una manera más compacta.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

CSS

+ +
#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Resultado

+ +

{{EmbedLiveSample("Examples", "100%", "20px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}{{Spec2("CSS3 Grid")}}Condición inicial
+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.grid-template-columns")}}

+ +

Ver también

+ + + + diff --git a/files/es/web/css/grid-template-rows/index.html b/files/es/web/css/grid-template-rows/index.html new file mode 100644 index 0000000000..b04eed1ea3 --- /dev/null +++ b/files/es/web/css/grid-template-rows/index.html @@ -0,0 +1,215 @@ +--- +title: grid-template-rows +slug: Web/CSS/grid-template-rows +tags: + - CSS + - Propiedad CSS + - Referencia + - grid css +translation_of: Web/CSS/grid-template-rows +--- +

La propiedad CSS grid-template-rows define el nombre de las líneas y las funciones de tamaño de línea de {{glossary("grid rows", "grid rows")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}
+ +

Sintaxis

+ +
/* Keyword value */
+grid-template-rows: none;
+
+/* <track-list> values */
+grid-template-rows: 100px 1fr;
+grid-template-rows: [linename] 100px;
+grid-template-rows: [linename1] 100px [linename2 linename3];
+grid-template-rows: minmax(100px, 1fr);
+grid-template-rows: fit-content(40%);
+grid-template-rows: repeat(3, 200px);
+grid-template-rows: subgrid;
+
+/* <auto-track-list> values */
+grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
+grid-template-rows: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-rows: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-rows: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* Global values */
+grid-template-rows: inherit;
+grid-template-rows: initial;
+grid-template-rows: unset;
+
+ +

Esta propiedad puede especificarse como:

+ +
    +
  • el valor de la palabra clave none
    • +
  • o un valor de <track-list>
    • +
  • o un valor de <auto-track-list>.
    • +
+ +

Valores

+ +
+
none
+
Es una palabra clave que significa que no hay una cuadrícula explícita. Cualquier fila será generada implicitamente y su tamaño sera determinado por la propiedad {{cssxref("grid-auto-rows")}}.
+
{{cssxref("<length>")}}
+
Es una longitud no negativa.
+
{{cssxref("<percentage>")}}
+
Es un valor no negativo {{cssxref("percentage", "<percentage>")}}, relativo al tamaño del bloque del contenedor grid. Si el tamaño del contenedor de la cuadrícula depende del tamaño de sus vías, entonces el porcentaje debe de tratarse como auto.
+ Las contribuciones de tamaño intrínseco de la vía puede ser ajustado al tamaño del contenedor de la cuadrícula, e incrementar el tamaño final de la vía por la cantidad mínima que permita mantener el porcentaje.
+
{{cssxref("<flex_value>","<flex>")}}
+
Es una dimensión no negativa con la unidad fr especificando el factor de flexibilidad de la vía. Cada vía de tamaño- <flex> toma un trozo del espacio restante en proporción a su factor de flexibilidad. Cuando aparece en una notación minmax(), implica un mínimo automático (i.e. minmax(auto, <flex>)).
+
max-content
+
Es una palabra clave representando la mayor contribución máxima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.
+
min-content
+
Es una palabra clave representando la mayor contribución mínima de contenido de los elementos de la cuadrícula ocupando las vías de ésta.
+
{{cssxref("minmax", "minmax(min, max)")}}
+
Es una notación funcional que define un rango de tamaño, mayor o igual que min, y menor o igual que max. Si max es menor a min, entonces max es ignorado y la función es tratada como min. Como un máximo, un valor <flex> ajusta el factor de flexibilad de la vía. Es inválido utilizarlo como un mínimo.
+
auto
+
Es una palabra clave que es idéntica al contenido máximo si es un máximo. Como un mínimo representa el mínimo más grande (según lo especificado por {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la vía.
+
+

Nota: Los tamaños de vía auto  (y sólo los tamaños de vía auto ) pueden ser estirados por las propiedades {{cssxref("align-content")}} and {{cssxref("justify-content")}}.

+
+
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
+
Representa la fórmula min(max-content, max(auto, argument)), que se calcula de forma similar a auto (es decir, minmax(auto, max-content)), excepto que el tamaño de la vía se fija a argument si es mayor que el mínimo auto.
+
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
+
Representa un fragmento repetido de la lista de vías, permitiendo que un gran número de filas que muestran un patrón recurrente se escriban de una manera más compacta.
+
subgrid
+
El valor subgrid indica que la cuadrícula adoptara la porción que ocupa su cuadrícula principal (padre) en ese eje. En lugar de ser indicado de forma explícita, los tamaños de la las filas y columnas de la cuadrícula se tomarán de la definición de la cuadrícula superior.
+
+ +
+

El valor subgrid es del Nivel 2 de la especificación Grid y actualmente sólo tiene implementaciones en Firefox 71 y posteriores.

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-rows: 30px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

Result

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}}{{Spec2("CSS3 Grid")}}Definición inicial
{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}{{Spec2("CSS Grid 2")}}Incorpora subgrid
+ +

Compatibilidad de los navegadores

+ + + +

{{Compat("css.properties.grid-template-rows")}}

+ +

Ver también

+ + + + diff --git a/files/es/web/css/grid/index.html b/files/es/web/css/grid/index.html new file mode 100644 index 0000000000..7a14af42b6 --- /dev/null +++ b/files/es/web/css/grid/index.html @@ -0,0 +1,237 @@ +--- +title: grid +slug: Web/CSS/grid +translation_of: Web/CSS/grid +--- +

La propiedad CSS grid es un shorthand que permite definir todas las propiedades grid explícitas ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, y {{cssxref("grid-template-areas")}}), implícitas ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, y {{cssxref("grid-auto-flow")}}), y relativas a gutter ({{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}) en una sola declaración.

+ +
/* <'grid-template'> values */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+
+ +
+

Nota: Sólo se pueden especificar las propiedades explícitas o bien las propiedades implícitas en una sola declaración grid. Las sub-propiedades que no se especifican se definen a su valor inicial, como es normal para shorthands. También, las propiedades relativas a gutter se redefinen mediante este shorthand, incluso cuando no pueden ser definidas mediante el mismo.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
<'grid-template'>
+
Define el {{cssxref("grid-template")}} incluyendo {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-areas")}}.
+
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+
Implementa un auto-flow asignando los row tracks explícitamente mediante {{cssxref("grid-template-rows")}} (definiendo {{cssxref("grid-template-columns")}} en none) y especificando como auto-repetir los column tracks mediante {{cssxref("grid-auto-columns")}} (definiendo {{cssxref("grid-auto-rows")}} en auto). {{cssxref("grid-auto-flow")}} es seteado en column en consecuencia, con dense si se especifica.
+ Todas las otras sub-propiedades de grid se redefinen a sus valores iniciales.
+
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+
Implementa un auto-flow asignando los column tracks explícitamente mediante {{cssxref("grid-template-columns")}} (definiendo {{cssxref("grid-template-rows")}} en none) y especificando como auto-repetir los row tracks mediante {{cssxref("grid-auto-rows")}} (definiendo {{cssxref("grid-auto-columns")}} en auto). {{cssxref("grid-auto-flow")}} es seteado en row en consecuencia, con dense si se especifica.
+ Todas las otras sub-propiedades de grid se redefinen a sus valores iniciales.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Example", "100%", 150)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatSafari("10.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOperaMobile}}{{CompatSafari("10.3")}}
+
+ +

[1] Implementado detrás del flag experimental Web Platform features en chrome://flags desde Chrome 29.0.

+ +

[2] Implementado detrás de la preferencia layout.css.grid.enabled desde Gecko 40.0 {{geckoRelease("40.0")}}, false por defecto. Desde Gecko 52.0 true por defecto.

+ +

[3] Internet Explorer y Edge implementan una version antigua de la especificación, que no define el shorthand grid. Ver el pedido para actualizar la implementación.

+ +

[4] Implementado detrás del flag Enable experimental Web Platform features en chrome://flags desde Opera 28.0.

+ +

Ver también

+ + + + diff --git a/files/es/web/css/height/index.html b/files/es/web/css/height/index.html new file mode 100644 index 0000000000..202c379583 --- /dev/null +++ b/files/es/web/css/height/index.html @@ -0,0 +1,231 @@ +--- +title: height +slug: Web/CSS/height +tags: + - Propiedad CSS + - Referencia +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

+ +

Las propiedades {{cssxref("min-height")}} y {{cssxref("max-height")}} sobreescriben el valor de {{Cssxref("height")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+height: auto;
+
+/* Valores <length> */
+height: 120px;
+height: 10em;
+
+/* Valores <percentage> */
+height: 75%;
+
+/* Valores globales */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

Valores

+ +
+
<length>
+
Ver {{cssxref("<length>")}} para unidades disponibles.
+
<percentage>
+
Especificado con el tipo {{cssxref("<percentage>")}} como porcentaje de la altura del bloque contenedor
+
border-box {{experimental_inline}}
+
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente es aplicado a los límites del borde del elemento.
+
content-box {{experimental_inline}}
+
Si está presente, el valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} precedente será aplicado a los límites de contenido del elemento.
+
auto
+
El navegador calculará y seleccionará la altura para el elemento especificado.
+
fill {{experimental_inline}}
+
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
+
max-content {{experimental_inline}}
+
La altura preferida intrínseca.
+
min-content {{experimental_inline}}
+
La altura mínima intrínseca.
+
available {{experimental_inline}}
+
La altura del bloque contenedor menos su margen vertical, borde y padding.
+
fit-content {{experimental_inline}}
+
El mayor entre: +
    +
  • la altura mínima intrínseca
    • +
  • la menor entre la altura prefereida intrínseca y la altura disponible
    • +
+
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="red">
+  <span>I'm 50 pixels tall.</span>
+</div>
+<div id="green">
+  <span>I'm 25 pixels tall.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>I'm half the height of my parent.</span>
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

{{EmbedLiveSample('Example')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}Añade las palabras clave max-content, min-content, available, fit-content, border-box, content-box.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Incluye height como propiedad que puede ser animada.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Añade soporte para valores {{cssxref("<length>")}} y especifica a qué elementos es aplicable.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Definición inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Añade nuevas palabras clave de tamaño para width y height
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.07.01.0
fill, fit-content, min-content, max-content{{CompatChrome(46.0)}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0{{CompatVersionUnknown}}
fill, fit-content, min-content, max-content{{CompatUnknown}}{{CompatChrome(46.0)}}    {{CompatChrome(46.0)}}
+
+ +

Véase también

+ +
    +
  • box model, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}
    • +
diff --git a/files/es/web/css/herramientas/cubic_bezier_generator/index.html b/files/es/web/css/herramientas/cubic_bezier_generator/index.html new file mode 100644 index 0000000000..b99e7afaa3 --- /dev/null +++ b/files/es/web/css/herramientas/cubic_bezier_generator/index.html @@ -0,0 +1,320 @@ +--- +title: Generador de curvas de bézier +slug: Web/CSS/Herramientas/Cubic_Bezier_Generator +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +
+
+
<html>
+    <canvas id="bezier" width="336" height="336">
+    </canvas>
+    <form>
+       <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'>
+       <label for="y1">y1 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'>
+       <label for="x2">x2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'>
+       <label for="y2">y2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'>
+       <br>
+       <output id="output">Log</output>
+    </form>
+</html>
+
+ +
.field {
+    width: 40px;
+}
+
+ +
function updateCanvas() {
+
+    var x1 = document.getElementById('x1').value;
+    var y1 = document.getElementById('y1').value;
+    var x2 = document.getElementById('x2').value;
+    var y2 = document.getElementById('y2').value;
+
+    drawBezierCurve(x1, y1, x2, y2);
+}
+
+const radius = 4;
+// Place needed to draw the rulers
+const rulers = 30.5;
+const margin = 10.5;
+const basic_scale_size = 5; // Size of 0.1 tick on the rulers
+var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
+var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
+
+function initCanvas() {
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
+
+        canvas.onmousedown = mouseDown;
+        canvas.onmouseup = mouseUp;
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function cX(x) {
+    return x * scaling + rulers;
+}
+
+function reverseX(x) {
+    return (x - rulers) / scaling;
+}
+
+function lX(x) {
+    //Used when drawing vertical lines to prevent subpixel blur
+    var result = cX(x);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function cY(y) {
+
+    return (1 - y) * scaling + margin;
+}
+
+function reverseY(y) {
+    return (margin - y) / scaling + 1;
+}
+
+function lY(y) {
+    // Used when drawing horizontal lines to prevent subpixel blur
+    var result = cY(y);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function drawBezierCurve(x1, y1, x2, y2) {
+
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the rulers
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+
+        // Draw the Y axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.textAlign = "right";
+
+        for (var i = 0.1; i <= 1; i = i + 0.1) {
+            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
+            if ((i == 0.5) || (i > 0.9)) {
+                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
+                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
+                // Limitation the constant 4 should be font size dependant
+            }
+            ctx.lineTo(cX(0), lY(i));
+        }
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+
+        // Draw the Y axis label
+        ctx.save();
+        ctx.rotate(-Math.PI / 2);
+        ctx.textAlign = "left";
+        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
+        ctx.restore();
+
+        // Draw the X axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(0), cY(1));
+        ctx.textAlign = "center";
+        for (i = 0.1; i <= 1; i = i + 0.1) {
+            ctx.moveTo(lX(i), basic_scale_size + cY(0));
+            if ((i == 0.5) || (i > 0.9)) {
+                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
+                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
+                // Limitation the constant 4 should be dependant of the font size
+            }
+            ctx.lineTo(lX(i), cY(0));
+        }
+
+        // Draw the X axis label
+        ctx.textAlign = "left";
+        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
+        // Limitation the constant 4 should be dependant of the font size
+        ctx.stroke();
+        ctx.closePath();
+
+        // Draw the Bézier Curve
+        ctx.beginPath();
+        ctx.moveTo(cX(0), cY(0));
+        ctx.strokeStyle = 'blue';
+        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+
+
+        // Draw the P2 point (with a line to P0)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.lineTo(cX(0), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fillStyle = 'white';
+        ctx.fill();
+        ctx.closePath();
+
+
+
+        // Draw the P3 point (with a line to P1)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.lineTo(cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fill();
+        ctx.closePath();
+
+        // Draw the P1(1,1) point (with dashed hints)
+        ctx.beginPath();
+        ctx.moveTo(cX(1), cY(1));
+        ctx.strokeStyle = 'lightgrey';
+        ctx.lineTo(cX(0), cY(1));
+        ctx.moveTo(cX(1), cY(1));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "black";
+        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+        // Draw the P0(0,0) point
+        ctx.beginPath();
+        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function mouseDown(e) {
+
+    var canvas = document.getElementById('bezier');
+
+    var x1 = cX(document.getElementById('x1').value);
+    var y1 = cY(document.getElementById('y1').value);
+
+    var x = e.pageX - canvas.offsetLeft;
+    var y = e.pageY - canvas.offsetTop;
+
+    var output = document.getElementById('output');
+    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
+
+
+    if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) {
+        var output = document.getElementById('output');
+        output.value = "P1!";
+        dragSM = 1;
+    }
+
+    var x2 = cX(document.getElementById('x2').value);
+    var y2 = cY(document.getElementById('y2').value);
+
+    if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) {
+        var output = document.getElementById('output');
+        output.value = "P2!";
+        dragSM = 2;
+    }
+
+    // If we are starting a drag
+    if (dragSM != 0) {
+        canvas.onmousemove = mouseMove;
+    }
+}
+
+function mouseUp(e) {
+
+    var output = document.getElementById('output');
+    output.value = "Mouse up!";
+    dragSM = 0;
+    canvas.onmousemove = null;
+}
+
+function mouseMove(e) {
+    if (dragSM != 0) {
+        var canvas = document.getElementById('bezier');
+
+        var x = e.pageX - canvas.offsetLeft;
+        var y = e.pageY - canvas.offsetTop;
+
+        var output = document.getElementById('output');
+        output.value = "Drag!";
+
+        if (dragSM == 1) {
+            var x1 = document.getElementById('x1');
+            var y1 = document.getElementById('y1');
+            x1.value = reverseX(x);
+            x1.value = Math.round(x1.value * 10000) / 10000;
+            y1.value = reverseY(y);
+            y1.value = Math.round(y1.value * 10000) / 10000;
+            if (x1.value < 0) { x1.value = 0; }
+            if (x1.value > 1) { x1.value = 1; }
+        } else if (dragSM == 2) {
+            var x2 = document.getElementById('x2');
+            var y2 = document.getElementById('y2');
+            x2.value = reverseX(x);
+            x2.value = Math.round(x2.value * 10000) / 10000;
+            y2.value = reverseY(y);
+            y2.value = Math.round(y2.value * 10000) / 10000;
+            if (x2.value < 0) { x2.value = 0; }
+            if (x2.value > 1) { x2.value = 1; }
+        }
+        updateCanvas();
+    }
+}
+
+initCanvas();
+updateCanvas();
+
+
+ +

{{draft}}

+ +

Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!

+ +

{{EmbedLiveSample("Tool", 1000, 2000)}}

+
+ +

 

diff --git a/files/es/web/css/herramientas/index.html b/files/es/web/css/herramientas/index.html new file mode 100644 index 0000000000..59cd1febfa --- /dev/null +++ b/files/es/web/css/herramientas/index.html @@ -0,0 +1,28 @@ +--- +title: Herramientas +slug: Web/CSS/Herramientas +tags: + - CSS +translation_of: Web/CSS/Tools +--- +
 
+ +

CSS ofrece una serie de características poderosas que puede ser difíciles de usar, o tener un gran número de parámetros, por lo que es muy útil visualizarlos mientras se trabaja en ellos. Esta página ofrece enlaces a una serie de herramientas que le ayudarán a construir sus estilos usando estas caracteristicas.

+ +

{{LandingPageListSubpages}}

+ +

Otras herramientas

+ +
    +
  • +

    Animación CSS - Stylie

    +
    • +
  • Para comprobar la información de la pantalla del dispositivo (helpful in {{Glossary("responsive web design")}}) - mydevice.io
    • +
  • Menus CSS- cssmenumaker.com
    • +
+ +

Temas relacionados

+ + diff --git a/files/es/web/css/hyphens/index.html b/files/es/web/css/hyphens/index.html new file mode 100644 index 0000000000..98669f5e30 --- /dev/null +++ b/files/es/web/css/hyphens/index.html @@ -0,0 +1,148 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +
La propiedad CSS hyphens especifica cómo deben dividirse las palabras cuando el texto se ajusta a través de múltiples líneas. Puede impedir la separación de sílabas por completo, usar guiones manualmente en puntos específicos del texto o dejar que el navegador inserte los guiones automáticamente donde corresponda.
+ +
+ +
{{EmbedInteractiveExample("pages/css/hyphens.html")}}
+ + + +

Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo lang y los navegadores separarán únicamente si este atributo está presente y si existe un diccionario de separación silábica adecuado. En XML debe usarse el atributo xml:lang.

+ +
+

Nota: Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidas por la especificación, por lo que esta puede variar de un navegador a otro.

+
+ +

Sintaxis

+ +
/* Keyword values */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* Global values */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

La propiedad hyphens se especifica con una única palabra de la lista a continuación.

+ +

Valores

+ +
+
none
+
Las palabras no se separan en los finales de línea, incluso si las letras dentro de las palabras sobrepasan el final de la línea. Las líneas solo se distribuyen en el espacio en blanco.
+
manual
+
Las palabras se separan para el ajuste de línea sólo cuando los caracteres dentro de la palabra sugieren oportunidades de salto de línea. Ver {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo para detalle.
+
auto
+
El navegador es libre de separar palabras en puntos de separación apropiados, siguiendo cualquiera de las reglas elegidas. Sin embargo, las oportunidades de separación de línea (ver {{anch("Sugiriendo oportunidades de separación de línea")}} más abajo) anularán la separación automática cuando exista.
+
+ +
+

Nota: El comportamiento del valor auto dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo lang de HTML de cara a garantizar que la separación silábica automática se aplique en ese idioma.

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Sugiriendo oportunidades de separación de línea

+ +

Hay dos caracteres Unicode que pueden ser usados manualmente para especificar un potencial punto de separación de línea dentro del texto:

+ +
+
U+2010 (HYPHEN)
+
El carácter "fuerte" de separación de línea indica una oportunidad de separación visible. Incluso si la línea no está realmente separada en ese momento, se muestra el guión.
+
U+00AD (SHY)
+
Un carácter invisible y "suave" de separación de línea. Este carácter no se renderiza de manera visible; en lugar de ello, indica la posición en la que el navegador debería separar la palabra en caso de requerir separación de línea. En HTML puedes usar &shy; para insertar una separación "suave".
+
+ +

Ejemplo

+ +

Este ejemplo usa tres clases, una por cada posible configuración de la propiedad hyphens.

+ +

HTML

+ +
<ul>
+  <li><code>none</code>: sin separación; se desbordará si es preciso
+    <p lang="es" class="none">Una extrema&shy;damente larga palabra</p>
+  </li>
+  <li><code>manual</code>: separación sólo en &amp;hyphen; o &amp;shy; (si fuera necesario)
+    <p lang="es" class="manual">Una extrema&shy;damente larga palabra</p>
+  </li>
+  <li><code>auto</code>: separará donde decida el algoritmo (si fuera necesario)
+    <p lang="enes class="auto">Una extrema&shy;damente larga palabra</p>
+  </li>
+</ul>
+
+ +

CSS

+ +
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +

Resultado

+ +
+

{{EmbedLiveSample("Example", "100%", 490)}}

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
+ +

{{cssinfo}}

+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("css.properties.hyphens")}}

+
+ +

Ver también

+ +
    +
  • {{Cssxref("content")}}
    • +
diff --git a/files/es/web/css/id_selectors/index.html b/files/es/web/css/id_selectors/index.html new file mode 100644 index 0000000000..0f7f177d2f --- /dev/null +++ b/files/es/web/css/id_selectors/index.html @@ -0,0 +1,85 @@ +--- +title: Selectores de ID +slug: Web/CSS/ID_selectors +tags: + - CSS + - Referencia + - Referencia CSS + - Selectores +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

En un documento HTML, los selectores de ID de CSS buscan un elemento basado en el contenido del atributo {{htmlattrxref("ID")}}. El atributo ID del elemento seleccionado debe coincidir exactamente con el valor dado en el selector.

+ +
/* El elemento con id="demo" */
+#demo {
+  border: red 2px solid;
+}
+ +

Sintaxis

+ +
#id_value { style properties }
+ +

Nótese que esto es equivalente al siguiente {{Cssxref("Attribute_selectors", "attribute selector")}}:

+ +
[id=id_value] { style properties }
+ +

Ejemplo

+ +

CSS

+ +
#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">¡Este div tiene un ID especial!</div>
+<div>Este solo es un div regular.</div>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", '100%', 50)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.id")}}

diff --git a/files/es/web/css/image-rendering/index.html b/files/es/web/css/image-rendering/index.html new file mode 100644 index 0000000000..98dae57cdc --- /dev/null +++ b/files/es/web/css/image-rendering/index.html @@ -0,0 +1,108 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +translation_of: Web/CSS/image-rendering +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad CSS image-rendering provee una sugerencia al navegador acerca del algoritmo que debe usar para escalar imágenes.

+ +
/* Keyword values */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* Global values */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+ +

Esta propiedad aplica tanto al elemento mismo, como a cualquier imagen provista en otra propiedad del elemento. No tiene efecto alguno en imágenes no-escaladas. Por ejemplo, si el tamaño natural de una imágen es 100×100px pero el autor de la página especifica sus dimenciones como  200×200px (o 50×50px), entonces la imágen se escalará (en cualquiér dirección) a sus nuevas dimensiones usando el algoritmo especificado. El escalado podría también aplicar por interacción del usuario (cambiando la escala).

+ +
+

Un Canvas puede proveer una solución de respaldo para crisp-edge/optimize-contrast a través de la manipulación manual de datos de la imagen.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
auto
+
Valor predeterminado, la imagen debe escalarse con un algoritmo que maximice la apariencia de la imagen. En particular, son aceptables los algoritmos de escala que "suavizan" colores, como la interpolación bilinear. So propósito son imágenes de fotografías. Desde la versión 1.9 (Firefox 3.0), Gecko usa remuestreo bilinear (alta calidad).
+
+ +
+
crisp-edges
+
La imagen se debe escalar con un algoritmo que preserve el contraste y los bordes de la imagen, y que no suavice los colores ni introduzca borrones en la imagen en el proceso. Los algoritmos adecuados incluyen algoritmos de escalamiento nearest-neighbor y otros algoritmos de escalabilidad tales como algoritmos 2×SaI y hqx-family. Este valor está destinado a imágenes pixel-art, como en juegos de navegador.
+
pixelated
+
Al escalar la imagen, se debe usar el algoritmo de vecino más cercano, de modo que la imagen parezca estar compuesta de píxeles grandes. Cuando se reduce la escala, esto es lo mismo que 'auto'.
+
+ +
Nota: Los valores optimizeQuality y optimizeSpeed presentes en un borrador anterior (y proviniendo de su contraparte SVG) son definidos como sinónimos del valor auto.
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
/* aplica a imágenes GIF y PNG; eviar bordes borrosos */
+img[src$=".gif"], img[src$=".png"] {
+  image-rendering: crisp-edges;
+}
+
+ +
div {
+  background: url(chessboard.gif) no-repeat 50% 50%;
+  image-rendering: crisp-edges;
+}
+ +

Ejemplos interactivos

+ +

image-rendering: auto;

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

image-rendering: crisp-edges; (-webkit-optimize-contrast)

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}{{Spec2('CSS3 Images')}}Initial definition
+ +
+

Nota: Aunque similar al atributo SVG {{svgattr("image-rendering")}}, los valores son bastante diferentes ahora.

+
+ +

Compatibilidad con navegadores

+ +

 

+ + + +

{{Compat("css.properties.image-rendering")}}

+ +

 

diff --git a/files/es/web/css/image/index.html b/files/es/web/css/image/index.html new file mode 100644 index 0000000000..de998cc146 --- /dev/null +++ b/files/es/web/css/image/index.html @@ -0,0 +1,209 @@ +--- +title: +slug: Web/CSS/image +tags: + - Gráfico + - Imagen CSS + - Tipo de Dato CSS +translation_of: Web/CSS/image +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <image> representa una imagen 2D. Hay dos tipos de imágenes en CSS: imágenes planas estáticas, generalmente referenciadas usando una URL, e imágenes dinámicamente generadas, como degradados o representaciones de partes del árbol.

+ +

CSS puede manejar diferentes tipos de imágenes:

+ +
    +
  • imágenes con dimensiones intrínsecas, es decir, su tamaño natural, como una imagen jpeg que tiene dimensiones fijas.
    • +
  • imágenes con varias dimensiones intrínsecas, que coexisten en distintas versiones dentro de un archivo, com algunos formatos .ico. En ese caso, la dimensión intrínseca será la de la imagen con área más grande, y con la proporción más próxima al tamaño del contenedor.
    • +
  • imágenes sin dimensiones intrínsecas, pero con una relación de aspecto intrínseca, entre su anchura y altura, como algunas imágenes vectorizadas, en formato SVG, por ejemplo.
    • +
  • imágenes sin dimensiones intrínsecas, ni relación de aspecto intrínseca, como un degradado CSS, por ejemplo.
    • +
+ +

CSS determina el tamaño concreto del objeto usando estas dimensiones intrínsecas, el tamaño específico en propiedades CSS como {{cssxref("width")}}, {{cssxref("height")}} o {{cssxref("background-size")}}, y el tamaño predeterminado del objeto definido por el tipo de propiedad con el que se usa la imagen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de objetoTamaño de objeto predeterminado
{{cssxref("background-image")}}El tamaño del área de posicionamiento de fondo de la imagen
{{cssxref("list-style-image")}}El tamaño de un caracter de 1em
{{cssxref("border-image")}}El tamaño del área de imagen de borde de un elemento
{{cssxref("cursor")}}Un tamaño definido por el navegador que coincida con el tamaño común de un cursor en el sistema en uso
Contenido reemplazado
+ como cuando se combina la propiedad CSS {{cssxref("content")}}
+ con los pseudo-elementos CSS {{cssxref("::after")}} y {{cssxref("::before")}}		Un rectángulo de 300px × 150px
+ +

El tamaño concreto del objeto es calculado usando los siguientes algoritmos:

+ +
    +
  • Si el tamaño específico define tanto anchura como altura, estos valores son usados como el tamaño concreto del objeto.
    • +
  • Si el tamaño específico define solo anchura o solo altura, el valor faltante es determinado usando la proporción intrínseca (si la hay), las dimensiones intrínsecas (si el valor especificado coincide), o usando el tamaño predeterminado del objeto para ese valor faltante.
    • +
  • Si el valor especificado no define anchura ni altura, el tamaño concreto del objeto será calculado de modo que coincida con la relación de aspecto intrínseca de las imágenes, pero sin exceder el tamaño predeterminado en cualquiera de sus dimensiones. Si la imagen no tiene relación de aspecto intrínseca, se usará la del objeto al que se está aplicando; si el objeto no tiene ninguna, la anchura o altura faltante se tomará del tamaño predeterminado del objeto.
    • +
+ +

Las imágenes pueden ser usadas en numerosas propiedades CSS, como {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} o {{cssxref("cursor")}}.

+ +
Nota: No todos los navegadores soportan algun tipo de imagen o alguna propiedad. Vea la sección de compatibilidad de navegadores para una lista detallada.
+ +

Sintáxis

+ +

La representación de un tipo de dato CSS <image> puede ser una de las siguientes:

+ +
    +
  • Una imagen denotada por un tipo de dato {{cssxref("<uri>")}} y la función url();
    • +
  • Un degradado CSS ({{cssxref("<gradient>")}});
    • +
  • Una parte de la página, definida por la función {{cssxref("element", "element()")}}.
    • +
+ +

Ejemplos

+ +

Estos son valores válidos para imágenes:

+ +
url(test.jpg)                          /* La función url(), mientras test.jpg sea una imagen */
+linear-gradient(to bottom, blue, red)  /* Un degradado (<gradient>) */
+element(#colonne3)                     /* Una párte de la página, usando la función element(),
+                                          mientras colonne3 sea un identificador CSS existente en la página. */
+
+ +

Estos son valores incorrectos para imágenes:

+ +
cervin.jpg                             /* Un archivo de imagen debe ser definido usando la función url(). */
+url(report.pdf)                        /* El archivo indicado en la función url() debe ser una imagen. */
+element(#fakeid)                       /* Si 'fakeid' no es un identificador CSS existente en la página. */
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('CSS3 Images', '#typedef-image', '<image>')}}{{Spec2('CSS3 Images')}} +

Antes de CSS3, no había un tipo de dato <image> definido. Las imágenes solo podían ser definidas usando notaciones funcionales url().

+
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
<uri>{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
<gradient>{{CompatVersionUnknown}}
+ limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}IE 10{{property_prefix("-ms")}}{{CompatVersionUnknown}}{{property_prefix("-o")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
element()4.0 (2.0) limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
<uri>{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
<gradient>{{CompatVersionUnknown}}
+ limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
element()4.0 (2.0) limited to {{cssxref("background-image")}} & {{cssxref("background")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Véase también

+ +
    +
  • Degradados CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}}
    • +
  • {{cssxref("element", "element()")}}
    • +
diff --git a/files/es/web/css/ime-mode/index.html b/files/es/web/css/ime-mode/index.html new file mode 100644 index 0000000000..58a8c5b0ed --- /dev/null +++ b/files/es/web/css/ime-mode/index.html @@ -0,0 +1,50 @@ +--- +title: ime-mode +slug: Web/CSS/ime-mode +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/ime-mode +--- +

 

+

{{ CSSRef() }} {{ Fx_minversion_header(3) }}

+

Resumen

+

La propiedad ime-mode controla el estado del método de entrada del editor para campos de texto.

+
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }}
  • Se aplica a: campos de texto.
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
  • Porcentajes: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Cssxref("computed value", "Valor calculado") }}:
    • +
+

Sintaxis

+
ime-mode: <mode>
+
+

Valores

+
auto 
No hay cambios en el estado actual del editor. Opción por defecto.
normal 
El estado IME debería ser normal. Este valor puede ser usado en cualquier hoja de estilo del usuario para sobrescribir los parámetros de la página. Este valor no es soportado por Internet Explorer.
active 
El editor de entradas, está inicialmente activo y usado para la entrada de datos, hasta que el usuario lo desactive específicamente. No soportado en Linux.
inactive 
el editor de entradas está inicialmente inactivo, pero el usuario puede activarlo en cualquier momento. No soportado por Linux.
disabled 
El editor de entradas está desactivado y no puede ser activado por el usuario.
+
+

Ejemplos

+
<input type="text" name="name" value="initial value" style="ime-mode: disabled">
+
+

Este ejemplo inhabilita/desactiva el editor de entradas para este campo. Esto podría ser necesario para los campos que entran datos en una base de datos que no soporta el juego de caracteres extendido, por ejemplo.

+

Notas

+

A diferencia de Internet Explorer, la implementación de Firefox de ime-mode permite aplicar esta propiedad a los campos de edición de clave de usuario (passwords). Sin embargo, no es la mejor experiencia para el usuario y los campos de clave de usuario deberían desactivar el IME. Los usuarios pueden corregir el comportamiento inapropiado de los sitios que no sigan esta recomendación poniendo la siguiente regla CSS en su archivo de reglas CSS:

+
input[type=password] {
+	ime-mode: auto !important;
+}
+
+
+
Nota: En general, no es apropiado por un sitio público la manipulación el estado del modo de IME. Esta propiedad debería usarse para aplicaciones web o similares.
+
+

La versión de Gecko 1.9 para Macintosh no es capaz de recuperar el estado previo del IME cuando el campo para el cual se ha desactivado pierde el foco, por tanto, los usuarios de Mac podrían enfadarse cuando se utiliza el valor disabled.

+
+
Nota: Desactivar el IME para prevenir la entrada de caracteres extendidos en los formularios no impide que los usuarios puedan pegar caracteres extendidos en los campos del formulario.
+
+

Especificaciones

+ +

Compatibilidad entre navegadores

+

La propiedad ime-mode es soportada en Firefox 3 y posteriores, así como en Internet Explorer.

+ +
+

Categorías

+

Interwiki Languages zh tw:CSS:ime-mode

+
+

{{ languages( { "en": "en/CSS/ime-mode", "fr": "fr/CSS/ime-mode", "ja": "ja/CSS/ime-mode", "zh-tw": "zh_tw/CSS/ime-mode" } ) }}

diff --git a/files/es/web/css/index.html b/files/es/web/css/index.html new file mode 100644 index 0000000000..25c39d556c --- /dev/null +++ b/files/es/web/css/index.html @@ -0,0 +1,113 @@ +--- +title: CSS +slug: Web/CSS +tags: + - CSS + - Diseño + - Estilo + - Hojas de Estilo en Cascada + - Hojas de estilo + - Referencia +translation_of: Web/CSS +--- +

Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML (incluyendo varios languages basados en XML como SVG, MathML o {{Glossary("XHTML")}}). CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.

+ +

CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C. Anteriormente , el desarrollo de varias partes de las especificaciones de CSS era realizado de manera sincrónica, lo que permiía el versionado de las recomendaciones. Probablemente habrás escuchado acerca de CSS1, CSS2.1, CSS3. Sin embargo, CSS4 nunca se ha lanzado como una versión oficial.

+ +

Desde CSS3, el alcance de las especificaciones se incrementó de forma significativa y el progreso de los diferentes modulos de CSS comenzó a mostrar varias diferencias, lo que hizo más efectivo desarrollar y publicar recomendaciones separadas por módulos. En vez de versionar las especificaciones de CSS, la W3C actualmente realiza una captura de las ultimas espcificaciones estables de CSS.

+ +
+
    +
  • Introducción a CSS + +

    Si eres nuevo en el desarrollo web, asegúrate de leer nuestro artículo de conceptos básicos de CSS para saber qué es CSS y cómo usarlo.

    +
    • +
  • Tutoriales CSS +

    Nuestra área de aprendizaje de CSS contiene una gran cantidad de tutoriales que te llevan desde el nivel de principiante hasta el nivel de competencia, cubriendo todos los aspectos fundamentales.

    +
    • +
  • Referencia CSS +

    Nuestra exhaustiva referencia de CSS para desarrolladores web experimentados describe cada propiedad y concepto de CSS.

    +
    • +
+ +
+
+

Tutoriales

+ +

Nuestra área de aprendizaje CSS presenta múltiples módulos que enseñan CSS desde cero — no se requieren conocimientos previos.

+ +
+
Primeros pasos en CSS
+
CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas. Este módulo proporciona un suave comienzo hacia el dominio de CSS con los conceptos básicos acerca de su funcionamiento, la sintaxis y la manera en que puedes comenzar a utilizarlo para agregar estilos al HTML.
+
+ +
+
Bloques de construcción CSS.
+
Este módulo continúa a partir de donde dejó el módulo de primeros pasos de CSS. Ahora que has adquirido familiaridad con el lenguaje y su sintaxis, y has ganado cierta experiencia básica con su uso, es hora de profundizar un poco más. Este módulo analiza la cascada y la herencia, todos los tipos de selectores que tenemos disponibles, unidades, tamaño, estilo de fondos y bordes, depuración (debugging) y mucho más.
+
El propósito de este módulo es proporcionarte un set de herramientas para escribir CSS competente y ayudarte a entender todas la teoría esencial antes de avanzar hacia cuestiones más específicas como estilo de textos y diseño CSS.
+
+ +
+
Estilo de texto
+
Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS en el que debes concentrarte es dar estilo al texto, una de las cosas más comunes que harás con CSS. Aquí veremos los fundamentos del estilo del texto, incluida la configuración de la fuente, negrita, cursiva, espaciado entre líneas y letras, sombras y otras características del texto. Terminaremos el módulo analizando la aplicación de fuentes personalizadas a tu página y en el estilo de listas y enlaces.
+
Diseño de CSS
+
En este punto ya hemos analizado los fundamentos de CSS, cómo dar estilo al texto y cómo diseñar y manipular las cajas en las que se encuentra el contenido. Ahora es el momento de ver cómo colocar sus cajas en el lugar correcto en relación con la pantalla del dispositivo y entre sí. Hemos cubierto los requisitos previos necesarios para que ahora puedas profundizar en el diseño de CSS, mirando diferentes configuraciones de pantalla, métodos de diseño tradicionales que implican flotación y posicionamiento, y nuevas herramientas de diseño como flexbox, grid y posicionamiento, asi como algunas técnicas de herencia que quizas desees conocer.
+
Uso de CSS para resolver problemas comunes
+
proporciona enlaces a secciones de contenido que explican cómo usar CSS para resolver problemas muy comunes al crear una página web.
+
+
+ +
+

Referencia

+ + + +

Cookbook

+ +

El libro de cocina de diseño CSS tiene como objetivo reunir recetas para patrones de diseño comunes, sobre cosas que puedes necesitar implementar en tus sitios. Además de proporcionar código que puedes usar como punto de partida en tus proyectos, estas recetas destacan las diferentes formas en que se pueden usar las especificaciones de diseño y las elecciones que puedes hacer como desarrollador.

+ +

Herramientas para el desarrollo de CSS

+ + + +

Meta errores

+ +
    +
  • Firefox: {{bug(1323667)}}
    • +
+
+
+
+ +

Ver también

+ + diff --git a/files/es/web/css/inherit/index.html b/files/es/web/css/inherit/index.html new file mode 100644 index 0000000000..513c3165c9 --- /dev/null +++ b/files/es/web/css/inherit/index.html @@ -0,0 +1,64 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/inherit +--- +

<< Volver

+ + + +

Resumen

+ +

inherit es un valor permitido en todas las propiedades CSS. Hace que el elemento al cual se aplica tome el valor calculado de la propiedad de su elemento padre.

+ +

Para propiedades heredadas

+ +

Para las propiedades heredadas, este valor refuerza el comportamiento del valor por defecto y es necesario sólo para anular otras reglas. Por ejemplo:

+ +
  /* hacer las cabeceras de segundo nivel, verdes */
+  h2 { color: green; }
+
+  /* ...pero deja aquellas cabeceras dentro de de la barra lateral con el valor por defecto (el valor que tenga el elemento padre */
+  #sidebar h2 { color: inherit; }
+
+ +

Ten en cuenta que en este ejemplo, el elemento h2 dentro de sidebar, puede tener un color distinto. Por ejemplo, si alguno de los elementos es un hijo de un elemento div con la siguiente regla:

+ +
 div#current { color: blue; }
+
+ +

el elemento será azul.

+ +

Para propiedades no heredadas

+ +

Para las propiedades no heredadas, este valor especifica un comportamiento que tiene relativamente poco sentido al no reforzar el valor por defecto.

+ +

Notas

+ +

Siempre se hereda desde el elemento padre dentro del árbol del documento, aún cuando el elemento padre no es el bloque contenedor.

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ +

Ver también

+ +

initial

+ + + +
+

Categorías

+ +

Interwiki Languages

+
+ +

{{ languages( { "fr": "fr/CSS/inherit", "en": "en/CSS/inherit" } ) }}

diff --git a/files/es/web/css/inheritance/index.html b/files/es/web/css/inheritance/index.html new file mode 100644 index 0000000000..780d5d49ea --- /dev/null +++ b/files/es/web/css/inheritance/index.html @@ -0,0 +1,66 @@ +--- +title: Herencia +slug: Web/CSS/inheritance +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/inheritance +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

El resumen de cada definición de propiedad CSS indica si esa propiedad es heredada por defecto ("Inherit: Yes") o no ("Inherit: no"). Esto controla lo que sucede al no especificar un valor concreto para una propiedad de un elemento.

+ +

Propiedades heredadas

+ +

Cuando no se especifica un valor para un elemento de una propiedad inherited property, el elemento toma el {{ Cssxref("computed value", "valor calculado") }} de la propiedad de su elemento padre. Sólo los elementos raíz de un documento obtienen el valor {{ Cssxref("initial", "inicial") }} dado en el resumen de la propiedad.

+ +

Un ejemplo característico de una propiedad heredada es la propiedad {{ Cssxref("color") }}. Definida con las siguientes reglas de estilo:

+ +
 p { color: green }
+
+ +

y el código HTML siguiente:

+ +
 <p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p>
+
+ +

las palabras "texto enfatizado" aparecerá en verde, ya que el elemento em ha heredado el valor de la propiedad {{ Cssxref("color") }} a partir del elemento p.No recoge el valor inicial de la propiedad (que es el color que es usado por el elemento raíz cuando la página especifica que no hay color).

+ +

Propiedades no heredadas

+ +

Si no se especifica un valor para una propiedad no heredada (non-inherited property) (a veces llamada reset property en el código Mozilla), el elemento toma el valor {{ Cssxref("initial", "inicial") }} de dicha propiedad (como se especifica en el resumen de ésa propiedad).

+ +

Un ejemplo característico de una propiedad no heredada es la del {{ Cssxref("border", "borde") }}. Definida con las siguientes reglas de estilo:

+ +
 p { border: medium solid }
+
+ +

y la etiqueta HTML:

+ +
 <p>Este párrafo tiene <em>texto enfatizado</em> en su interior.</p>
+
+ +

las palabras "texto enfatizado" no tendrán borde (ya que el valor inicial del {{ Cssxref("border-style", "estilo de borde") }} es none).

+ +

Notas

+ +

Las palabras de código {{ Cssxref("inherit") }} permiten al autor definir, explícitamente, la posibilidad de herencia. Funciona para las propiedades heredadas y las no heredadas.

+ +

Ver también

+ +

{{ Cssxref("inherit") }}, {{ Cssxref("Valor inicial") }}

+ +

 

+ +
+

Categorías

+ +


+ Interwiki Languages

+
+ +

{{ languages( { "en": "en/CSS/inheritance", "fr": "fr/CSS/H\u00e9ritage", "ja": "ja/CSS/inheritance", "pl": "pl/CSS/Dziedziczenie" } ) }}

diff --git a/files/es/web/css/initial/index.html b/files/es/web/css/initial/index.html new file mode 100644 index 0000000000..aff090e21f --- /dev/null +++ b/files/es/web/css/initial/index.html @@ -0,0 +1,46 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/initial +--- +

Guía de referencia de CSS +


+

+

Resumen

+

initial es un valor permitido en todas las propiedades CSS. Fuerza la utilización del valor inicial de la propiedad para el elemento al cual se aplica. +

+

Para propiedades no heredadas

+

Para las propiedades no heredadas, este valor refuerza el comportamiento por defecto y es necesario sólo para sobrescribir otra regla. Por ejemplo: +

+
 /* definimos un borde verde de un encabezamiento de segundo nivel */
+ h2 { border: medium solid green }
+
+ /* pero las cabeceras de la barra lateral utilizan el valor inicial de la propiedad color */
+ #sidebar h2 { border-color: initial; }
+
+ /* ...en CSS1 se obtiene usando 'border: medium solid' */
+
+

Para propiedades heredadas

+

Para las propiedades heredadas, se usa menos ya que no refuerza el comportamiento por defecto. +

+

Especificaciones

+ +

Compatibilidad

+

Sólo algunas especificaciones son soportadas en Firefox (las cuales se incrementan en cada versión superior) Únicamente soportado en Firefox algunas propiedades (se incrementa el número en cada versión). +

+

Ver también

+

inherit +


+

+
+

Categorías +

Interwiki Languages Links +

+
+{{ languages( { "fr": "fr/CSS/initial", "en": "en/CSS/initial" } ) }} diff --git a/files/es/web/css/inline-size/index.html b/files/es/web/css/inline-size/index.html new file mode 100644 index 0000000000..d39bac491c --- /dev/null +++ b/files/es/web/css/inline-size/index.html @@ -0,0 +1,97 @@ +--- +title: inline-size +slug: Web/CSS/inline-size +translation_of: Web/CSS/inline-size +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inline-size define el tamaño horizontal o vertical de un  bloque de elementos, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor de  {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/inline-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+inline-size: 300px;
+inline-size: 25em;
+
+/* <percentage> values */
+inline-size: 75%;
+
+/* Keyword values */
+inline-size: 25em border-box;
+inline-size: 75% content-box;
+inline-size: max-content;
+inline-size: min-content;
+inline-size: available;
+inline-size: fit-content;
+inline-size: auto;
+
+/* Global values */
+inline-size: inherit;
+inline-size: initial;
+inline-size: unset;
+
+ +

Si el modo de escritura es verticalmente orientado, el valor de inline-size se relaciona con la altura del elemento; de lo contrario, se relaciona con el ancho del elemento. Una propiedad relacionada es {{cssxref("block-size")}}, que define la otra dimensión del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad inline-size toma los mismos valores de las propiedades {{cssxref("width")}} y {{cssxref("height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p class="exampleText">Example text</p>
+
+ +

Contenido CSS

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  inline-size: 110px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "inline-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inline-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("width")}} y {{cssxref("height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/inset-block-end/index.html b/files/es/web/css/inset-block-end/index.html new file mode 100644 index 0000000000..b117a0595c --- /dev/null +++ b/files/es/web/css/inset-block-end/index.html @@ -0,0 +1,99 @@ +--- +title: inset-block-end +slug: Web/CSS/inset-block-end +translation_of: Web/CSS/inset-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-block-end define el desplazamiento de final de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
+

Note: Antes de Firefox 63 esta propiedad fue implementada como offset-block-end. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

+
+ +
/* <length> values */
+inset-block-end: 3px;
+inset-block-end: 2.4em;
+
+/* <percentage>s of the width or height of the containing block */
+inset-block-end: 10%;
+
+/* Keyword value */
+inset-block-end: auto;
+
+/* Global values */
+inset-block-end: inherit;
+inset-block-end: initial;
+inset-block-end: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-block-end toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-block-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-block-end")}}

+ +

Mira también

+ +
    +
  • Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-block-start/index.html b/files/es/web/css/inset-block-start/index.html new file mode 100644 index 0000000000..4cd4a2c732 --- /dev/null +++ b/files/es/web/css/inset-block-start/index.html @@ -0,0 +1,99 @@ +--- +title: inset-block-start +slug: Web/CSS/inset-block-start +translation_of: Web/CSS/inset-block-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-block-start define el desplazamiento de inicio de bloque lógico de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
+

Nota: Antes de Firefox 63 esta propiedad fue implementada como offset-block-start. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

+
+ +
/* <length> values */
+inset-block-start: 3px;
+inset-block-start: 2.4em;
+
+/* <percentage>s of the width or height of the containing block */
+inset-block-start: 10%;
+
+/* Keyword value */
+inset-block-start: auto;
+
+/* Global values */
+inset-block-start: inherit;
+inset-block-start: initial;
+inset-block-start: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-block-start toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-block-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades que definen otras inserciones:: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-block/index.html b/files/es/web/css/inset-block/index.html new file mode 100644 index 0000000000..633a84475d --- /dev/null +++ b/files/es/web/css/inset-block/index.html @@ -0,0 +1,97 @@ +--- +title: inset-block +slug: Web/CSS/inset-block +translation_of: Web/CSS/inset-block +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-block define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
/* <length> values */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* value applied to start and end */
+
+/* <percentage>s of the width or height of the containing block */
+inset-block: 10% 5%;
+
+/* Keyword value */
+inset-block: auto;
+
+/* Global values */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+
+ +

La abreviación para la otra dimensión {{cssxref("inset-inline")}}, que es una abreviación para {{cssxref("inset-inline-start")}}, y {{cssxref("inset-inline-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-block toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-block: 20px 50px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-block")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-inline-end/index.html b/files/es/web/css/inset-inline-end/index.html new file mode 100644 index 0000000000..633306a67c --- /dev/null +++ b/files/es/web/css/inset-inline-end/index.html @@ -0,0 +1,99 @@ +--- +title: inset-inline-end +slug: Web/CSS/inset-inline-end +translation_of: Web/CSS/inset-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-inline-end define la inserción final lógica en línea de un elemento, que se asigna a una inserción física en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref ("top")}}, {{cssxref ("right")}}, {{cssxref ("bottom")}}, o {{cssxref ("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
+

Nota: Antes de Firefox 63 esta propiedad fue implementada como offset-inline-end. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

+
+ +
/* <length> values */
+inset-inline-end: 3px;
+inset-inline-end: 2.4em;
+
+/* <percentage>s of the width or height of the containing block */
+inset-inline-end: 10%;
+
+/* Keyword value */
+inset-inline-end: auto;
+
+/* Global values */
+inset-inline-end: inherit;
+inset-inline-end: initial;
+inset-inline-end: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-inline-end toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  position: relative;
+  inset-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-inline-end")}}

+ +

Mira también

+ +
    +
  • Las propiedades que definen otras inserciones:: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-start")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-inline-start/index.html b/files/es/web/css/inset-inline-start/index.html new file mode 100644 index 0000000000..ef9b26bc2c --- /dev/null +++ b/files/es/web/css/inset-inline-start/index.html @@ -0,0 +1,99 @@ +--- +title: inset-inline-start +slug: Web/CSS/inset-inline-start +translation_of: Web/CSS/inset-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-inline-start define la inserción de inicio en línea lógica de un elemento, que se asigna a un desplazamiento físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la propiedad {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, o {{cssxref("left")}} dependiendo de la propiedad en los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
+

Nota: Antes de Firefox 63 esta propiedad fue implementada como offset-inline-start. Firefox 63 actualizó el nombre de esta propiedad. para que coincida con un cambio en la especificación.

+
+ +
/* <length> values */
+inset-inline-start: 3px;
+inset-inline-start: 2.4em;
+
+/* <percentage>s of the width or height of the containing block */
+inset-inline-start: 10%;
+
+/* Keyword value */
+inset-inline-start: auto;
+
+/* Global values */
+inset-inline-start: inherit;
+inset-inline-start: initial;
+inset-inline-start: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-inline-start toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-inline-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades que definen otras inserciones: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, y {{cssxref("inset-inline-end")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset-inline/index.html b/files/es/web/css/inset-inline/index.html new file mode 100644 index 0000000000..07a9d797d8 --- /dev/null +++ b/files/es/web/css/inset-inline/index.html @@ -0,0 +1,97 @@ +--- +title: inset-inline +slug: Web/CSS/inset-inline +translation_of: Web/CSS/inset-inline +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS inset-inline define los bloques lógicos de inicio y fin de las compensaciones de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
/* <length> values */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* value applied to start and end */
+
+/* <percentage>s of the width or height of the containing block */
+inset-inline: 10% 5%;
+
+/* Keyword value */
+inset-inline: auto;
+
+/* Global values */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+
+ +

La abreviación para la otra dimensión es {{cssxref("inset-block")}}, que es la abreviación para {{cssxref("inset-block-start")}}, y {{cssxref("inset-block-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset-inline toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset-inline: 20px 50px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset-inline")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/inset/index.html b/files/es/web/css/inset/index.html new file mode 100644 index 0000000000..cd3260e72c --- /dev/null +++ b/files/es/web/css/inset/index.html @@ -0,0 +1,96 @@ +--- +title: inset +slug: Web/CSS/inset +translation_of: Web/CSS/inset +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  inset define el bloque lógico y las compensaciones de inicio y finalización en línea de un elemento, que se asignan a las compensaciones físicas en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("top")}} y {{cssxref ("bottom")}}, o {{cssxref ("right")}} y {{cssxref ("left")}} dependiendo de las propiedades en los valores definidos para {{cssxref ("modo de escritura")}}, {{cssxref ("dirección")}} y {{cssxref ("orientación de texto")}}.

+ +
/* <length> values */
+inset: 3px 10px 3px 10px;
+inset: 2.4em 3em 3em 3em;
+inset: 10px; /* value applied to all edges */
+
+/* <percentage>s of the width or height of the containing block */
+inset: 10% 5% 5% 5%;
+
+/* Keyword value */
+inset: auto;
+
+/* Global values */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad inset toma los mismos valores de la propiedad {{cssxref("left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  position: relative;
+  inset: 20px 50px 30px 10px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.inset")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, y {{cssxref("left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/integer/index.html b/files/es/web/css/integer/index.html new file mode 100644 index 0000000000..2075d52e37 --- /dev/null +++ b/files/es/web/css/integer/index.html @@ -0,0 +1,16 @@ +--- +title: +slug: Web/CSS/integer +translation_of: Web/CSS/integer +--- +

{{ CSSRef() }}

+ +

Sumario

+ +

Un valor entero usado para algunas propiedades CSS que no tiene unidades.

+ +

Usado en

+ +
    +
  • {{ Cssxref("-moz-column-count") }}
    • +
diff --git "a/files/es/web/css/introducci\303\263n/boxes/index.html" "b/files/es/web/css/introducci\303\263n/boxes/index.html" new file mode 100644 index 0000000000..1feede593a --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/boxes/index.html" @@ -0,0 +1,334 @@ +--- +title: Boxes +slug: Web/CSS/Introducción/Boxes +translation_of: Learn/CSS/Building_blocks +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de  CSS Getting Started ; se describen cómo se puede usar CSS para controlar el espacio que un elemento ocupa cuando se muestra. En su documento de ejemplo, se cambia el espacio y se agregan reglas decorativos.

+ +

Información: Cajas

+ +

Cuando el navegador muestra un elemento, el elemento ocupa un espacio. Hay cuatro partes en el espacio que ocupa.

+ +

En el centro, existe el espacio que el elemento necesita para mostrar su contenido. Alrededor de eso, no hay relleno. En torno de est, hay un borde. En torno esto, hay un margen que separa este elemento de otros elementos.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

El gris pálido muestra partes del diseño.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Esto es lo que se ve en su navegador.

+
+ +

El relleno, el borde y el margen pueden tener diferentes tamaños en la parte superior, derecha, inferior e izquierda del elemento. Alguno o todos estos tamaños pueden ser cero.

+ +

Coloreando

+ +

El relleno es siempre el mismo color que el elemento del fondo. Así que cuando se establece el color de fondo, se ve el color aplicado al elemento en sí y su relleno. El margen es siempre transparente.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

El elemento tiene un fondo verde .

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

Esto es lo que se ve en su navegador.

+
+ +

Borders

+ +

Puede utilizar los bordes para decorar elementos con líneas o cuadros.
+
+ Para especificar la misma frontera todo alrededor de un elemento, utilice la propiedad {{cssxref ("border")}} . Especifique el ancho (por lo general en píxeles para la visualización en una pantalla), el estilo, y el color.
+
+ Los estilos son:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

También puede establecer el estilo a none ( ninguno) o hidden (oculto),  para eliminar explícitamente la frontera (border ), o establecer el color como transparente para hacer la frontera invisible sin cambiar el diseño.

+ +

Para especificar los bordes de uno en uno por separado, utilice las propiedades: {{cssxref ("border-top")}}, {{cssxref ("border-right")}}, {{cssxref ("border-bottom")} }, {{cssxref ("border-left")}}. Usted puede utilizar estas para especificar un borde  solo en un lado, o diferentes los bordes en diferentes lados.

+ +
+
Ejemplo
+ +


+ Esta norma establece el color de fondo y el borde superior de los elementos de la etiqueta h3:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+ +

El resultado se ve así:

+ + + + + + + +
+

Stylish heading

+
+ +

Esta regla hace que las imágenes sean fáciles de ver, dándoles un borde gris medio a todo:

+ +
img {border: 2px solid #ccc;}
+
+ +

El resultado se ve así:

+ + + + + + + + +
Image:Image:Blue-rule.png
+
+ +

Márgenes y relleno

+ +


+ Use  márgenes y el relleno para ajustar las posiciones de los elementos 'y crear el espacio que les rodea.
+
+ Utilice la propiedad {{cssxref ("margin")}} o la propiedad {{cssxref ("padding")}} para establecer los márgenes y el  relleno con sus anchuras respectivamente.
+
+ Si especifica una anchura, que se aplica en todo el elemento (arriba, derecha, abajo y de izquierda).
+
+ Si especifica dos anchos, la primera se aplica a la parte superior e inferior, la segunda a la derecha y la izquierda.
+
+ Puede especificar los cuatro anchos en el orden: arriba, derecha, abajo, de izquierda.

+ +
+
Ejemplo
+ +


+ Esta norma delimita párrafos con la  class remark, dándoles un borde rojo a su alrededor.
+
+ El padding (relleno) separa un poco todo el borde del texto .
+
+ A la izquierda una  sangría desde el margen del párrafo con respecto al resto del texto (margin-left ):

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

El resultado se ve así:

+ + + + + + + +
+

A continuación es un párrafo normal.

+ +

Aqui con la clase remark.

+
+
+ +
+
Más detalles
+ +

Cuando se utiliza márgenes y el relleno para ajustar la manera en que los elementos se disponen, sus reglas de estilo interactúan con los estilos de tu navegador por defecto y pueden ser muy complejas.
+
+ Los distintos navegadores ponen que los elementos de manera diferente. Los resultados pueden ser similar ,hasta que nuestro hoja de estilos cambia las cosas. A veces esto puede hacer que sus hojas de estilo den resultados sorprendentes.
+
+ Para obtener el resultado deseado, es posible que tenga que cambiar el marcado de su documento. La página siguiente de este tutorial tiene más información al respecto.
+
+ Para obtener información detallada acerca de relleno, márgenes y bordes, consulte la página de referencia Modelo de caja.

+
+ +

Acción: Agregar bordes

+ +

Edite su archivo CSS , style2.css. Agrega esta regla para dibujar una línea a través de la página sobre cada encabezado:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

Si usted tomó el cambio en la última página, modificara la regla que ha creado, de lo contrario agregar la nueva regla para añadir espacio debajo de cada ítem de la lista:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

Actualice el navegador para ver el resultado:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
El reto
+ +


+ Agrega una regla a la hoja de estilos, para que aparesca un amplio borde alrededor de los la lista de océanos, en un color que le recuerda al mar, algo como esto:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

(No es necesario que coincida con el ancho y el color que se ve aquí exactamente.)

+
+ +

Ver una solución a este desafío.

+ +

What next?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}Al especificar márgenes y el relleno, se modificó el diseño del documento. En la página siguiente se cambia el layout de su documento de otra manera.

diff --git "a/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" "b/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" new file mode 100644 index 0000000000..64bf0dd443 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" @@ -0,0 +1,124 @@ +--- +title: Cascada y herencia +slug: Web/CSS/Introducción/Cascading_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}Esta es la cuarta sección del tutorial CSS Primeros pasos; que describe cómo interactúan las hojas de estilo en cascada, y cómo los elementos heredan el estilo de sus padres. Usted agrega a la hoja de estilos de ejemplo, utilizando la herencia para alterar el estilo de muchas partes del documento en un solo paso.

+ +

Información: Cascada y herencia

+ +

El estilo final para un elemento se puede especificar en muchos lugares diferentes, que pueden interactuar de una manera compleja. Esta interacción compleja hace el CSS poderoso, pero puede también hacer que sea confuso y difícil de depurar.

+ +

Tres principales fuentes de información de estilo forman una cascada. Estas son:

+ +
    +
  • Estilos por defecto del navegador para del lenguaje de marcado.
    • +
  • Estilos especificados por un usuario que está leyendo el documento.
    • +
  • Los estilos relacionados en el documento por su autor. Estos pueden ser especificados en tres lugares: +
      +
    • En un archivo externo: este tutorial aborda principalmente este método para definir los estilos.
      • +
    • En una definición al principio del documento: utilice este método únicamente para los estilos que se utilizan sólo en esa página .
      • +
    • En un elemento específico en el cuerpo del documento: este es el método menos fácil de mantener, pero puede ser utilizado para la probar.
      • +
    +
    • +
+ +

El estilo del usuario modifica el estilo por defecto del navegador. El estilo del autor del documento a continuación modifica el estilo un poco más. En este tutorial, usted es el autor del documento de ejemplo, y solo trabaja con hojas de estilo del autor.

+ +
+
Ejemplo
+ +

Cuando lea este documento en un navegador, parte del estilo que ves proviene por defecto de su navegador de HTML.

+ +

Parte del estilo podría venir de los ajustes personalizados del navegador o de un archivo de definición de estilo personalizado. En Firefox, la configuración se puede personalizar en cuadro de diálogo Preferencias, o puede especificar estilos en un archivo denominado user Content.css, archivado en su perfil de navegador.

+ +

Parte del estilo proviene de las hojas de estilo vinculadas al documento por el servidor wiki.

+
+ +

Al abrir su documento de muestra en el navegador, los elementos {{ HTMLElement("strong") }} son más relevante que el resto del texto. Esto viene del estilo por defecto del navegador para HTML.

+ +

El elemento {{ HTMLElement("strong") }} son rojos. Esto viene de la propia hoja de estilos de ejemplo.

+ +

El elemento {{ HTMLElement("strong") }} también heredan gran parte del estilo del elemento {{ HTMLElement("p") }}, porque ellos son sus hijos. De la misma manera, los elementos {{ HTMLElement("p") }} heredan gran parte del estilo del elemento{{ HTMLElement("body") }}.

+ +

Para los estilos en cascada, las hojas de estilo del autor tienen prioridad, ante las hojas de estilo del lector,  por defecto de tu navegador.

+ +

Para los estilos heredados, el estilo propio de un nodo hijo tiene prioridad sobre estilo heredado de su padre.

+ +

Estas no son las únicas prioridades que se aplican. En una página posterior de este tutorial se explica mas detalladamente.

+ +
+
Más detalles
+ +

El CSS también proporciona una forma para que el lector pueda anular el estilo del autor del documento, mediante el uso de la palabra clave! !important.

+ +

Esto significa que, como autor del documento, no siempre se puede predecir con exactitud lo que sus lectores van a ver.

+ +

Si quieres conocer todos los detalles de cascada y herencia mira Asignando propiedad de valores, cascada, y herencia en las especificaciones del CSS.

+
+ +

Acción: El uso de la herencia 

+ +
    +
  1. Edite su archivo  CSS de ejemplo.
    2. +
  2. Agrega esta línea copiando y pegando. Realmente no importa si usted la agrega por encima o por debajo de la línea que está. Sin embargo, añadirla en la parte superior es más lógico, porque en el documento el elemento {{ HTMLElement("p") }} es el elemento padre del elemento  {{ HTMLElement("strong") }} : + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. Ahora actualice el navegador para ver el efecto en su documento de muestra. El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} han heredado el estilo subrayado de su elemento padre {{ HTMLElement("p") }}.
    + +

    Pero los elementos {{ HTMLElement("strong") }} siguen siendo rojo. El color rojo es su estilo propio, por lo que tiene prioridad sobre el color azul de su elemento padre {{ HTMLElement("p") }} .

    +
    4. +
+ + +
+ + + + + + + + +
Antes
Cascading Style Sheets
+ + + + + + + + +
Después
Cascading Style Sheets
+ +
+
Problema
+Cambie su hoja de estilo de manera que aparecen subrayados sólo las letras rojas: + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: red; text-decoration: underline;}
+
+ +

 

+Hide solution
+Ver una solución al desafío.
+ +

¿Y ahora qué?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}Su hoja de estilo de ejemplo especifica estilos para las etiquetas <p> y <strong>, cambiando el estilo de los elementos correspondientes en todo el documento. La siguiente sección describe cómo especificar el estilo de manera más selectiva.

diff --git "a/files/es/web/css/introducci\303\263n/color/index.html" "b/files/es/web/css/introducci\303\263n/color/index.html" new file mode 100644 index 0000000000..578f1e6898 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/color/index.html" @@ -0,0 +1,363 @@ +--- +title: Color +slug: Web/CSS/Introducción/Color +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +

{{ CSSTutorialTOC() }}

+ +

+ +

Esta es la sección octava de la CSS Introduccióntutorial; se explica cómo puede especificar el color en CSS. En su hoja de estilos de muestra, se introduce colores de fondo.

+ +

Información: Color

+ +

En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. CSS 2 soporta 17 colores con nombre absoluto. Algunos de los nombres puede que no sea el esperado:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
primariesred lime blue 
secondariesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ +
+
+
Detalles
+ +

Su navegador puede soportar muchos más colores con nombre, como:

+
+ + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

Para detalles de esta lista ampliada, consulte: SVG palabras clave de color en el módulo de colores CSS 3 . Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.

+
+ +

Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres dígitos  hexadecimales entre los rangos  0 - 9, a - f. Las letras a - f representan los valores de 10 a 15:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
+ +


+ Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
+ +

Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.

+ +
+
+
Ejemplo
+ +

Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Comience con el rojo puro: #f00
Para que sea más pálido, añadir un poco de verde y azul: #f77
Para hacerlo más naranja, añadir un poco de verde adicional: #fa7
Para oscurecer, reducir todos sus componentes: #c74
Para reducir su saturación, hacer que sus componentes más iguales: #c98
Si usted los pone exactamente iguales, se obtiene gris: #ccc
+ +

Para un tono pastel como el azul pálido:

+ + + + + + + + + + + + + + +
Comience con blanco puro: #fff
Reducir los otros componentes un poco: #eef
+
+ +
+
+
Más detalles
+ +

También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.

+ +

Por ejemplo, este es de color granate (rojo oscuro)dark red:

+
+ +
RGB (128, 0, 0)
+ +

Para más detalles sobre cómo especificar los colores, ver: Colores en la Especificación CSS.

+ +

Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: Sistema CSS2 Colores en la Especificación CSS.

+
+ +

Propiedades de Color

+ +

Ya ha utilizado la propiedad color  en el texto.

+ +

También puede utilizar la propiedad background-color para cambiar fondos elementos.

+ +

Los Fondos (Backgrounds ) se pueden establecer en transparent (transparentes) para eliminar explícitamente cualquier color, revelando fondo del elemento padre.

+ +
+
+
Ejemplo
+ +

Los ejemplos de cajas de este tutorial utilizan este fondo de color amarillo pálido:

+ +
background-color : # fffff4 ;
+ +
 
+ +

Los Más detalles cajas utilizan este gris pálido:

+ +
background-color : # F4F4F4 ;
+
+
+ +

 

+ +

Acción: El uso de códigos de color

+ +
    +
  1. Edite su archivo CSS.
    2. +
  2. Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. (La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.) + 
    /*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    + +
     
    +
    3. +
  3. Guarde el archivo y actualizar el navegador para ver el resultado.
    4. +
+ + + + + + + +
+ + + + + + + + + +
C ascading S tyle S heets
C ascading S tyle S heets
+
+ +
+
+
Desafío
+ +

En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.

+ +

(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)

+Ver una solución para el desafío.
+
+ +

¿Y ahora qué?

+ +

En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.La siguiente sección explica cómo se puede hacer excepciones a esta estricta separación.

diff --git "a/files/es/web/css/introducci\303\263n/how_css_works/index.html" "b/files/es/web/css/introducci\303\263n/how_css_works/index.html" new file mode 100644 index 0000000000..7940c9a060 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/how_css_works/index.html" @@ -0,0 +1,127 @@ +--- +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 +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}Esta tercera parte del tutorial Empezando CSS explica cómo funciona el CSS en el navegador y la finalidad del Modelo de Objeto de Documento (DOM). Usted también aprenderá cómo analizar el documento de muestra.

+ +

Información: Cómo funciona CSS

+ +

Cuando un navegador muestra un documento, debe combinar el contenido del documento con la información de su estilo. Se procesa el documento en dos etapas:

+ +
    +
  1. El navegador convierte el lenguaje de marcado (markup) y el CSS en el DOM (Document Object Model). El DOM representa el documento en la memoria del ordenador. Combina el contenido del documento con su estilo.
    2. +
  2. El navegador muestra el contenido de la DOM.
    3. +
+ +

Un lenguaje de marcado utiliza elementos para definir la estructura del documento. Usted marca un elemento utilizando etiquetas, que son cadenas que comienzan con '<' y termina con '>'. La mayoría de los elementos tienen un par de etiquetas, una etiqueta de inicio y una etiqueta de cierre. Para la etiqueta de inicio, coloque el nombre del elemento entre '<' y '>'. Para la etiqueta final, coloque un '/' después de '<' y antes del nombre del elemento.

+ +

Dependiendo del lenguaje de marcado, algunos elementos tienen sólo una etiqueta de inicio, o una sola etiqueta donde el '/' viene después del nombre del elemento. Un elemento también puede ser un contenedor e incluir otros elementos entre su etiqueta de inicio y la etiqueta de cierre. Sólo recuerda cerrar siempre las etiquetas dentro del contenedor.

+ +

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo y extensión de texto en el lenguaje de marcado se convierte en un nodo de la estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son los padres de los nodos secundarios, y los nodos secundarios tienen hermanos.

+ +

Comprender el DOM le ayuda a diseñar, depurar y mantener su CSS, porque el DOM es donde su CSS y el contenido del documento se reúnen.

+ +
+
Ejemplo
+En el documento de ejemplo, las etiqueta <p> y su etiqueta de cierre </ p> crean un contenedor: + +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

Ejemplo en vivo

+ +

http://jsfiddle.net/djaniketster/6jbpS/

+ +

En el DOM, el nodo correspondiente P es uno de los padres. Sus hijos son los nodos STRONG y los nodos de texto. Los nodos STRONG son en sí mismos padres, con los nodos de texto como sus hijos:

+ +
P
+├─STRONG
+│ └─"C"
+├─"ascading"
+├─STRONG
+│ └─"S"
+├─"tyle"
+├─STRONG
+│ └─"S"
+└─"heets"
+
+ +

Acción: Analizando un DOM

+ +

El uso del Inspector DOM

+ +

Para analizar un DOM, se necesita un software especial. Usted puede usar el complemento de  Mozilla DOM Inspector (DOMi) para analizar un DOM. Usted sólo tendrá que instalar el complemento (ver más detalles abajo).

+ +
    +
  1. Utilice el navegador Mozilla para abrir el documento en versión HTML.
    2. +
  2. Desde la barra de menú de su navegador, selecciona Herramientas> Inspector DOM, o Herramientas> Desarrollo Web> Inspector DOM. +
    +
    Más detalles
    + +

    Si el navegador Mozilla no tiene Domi, puede instalarlo del sitio de complementos y reiniciar el navegador. Luego regrese a este tutorial.

    + +

    Si no desea instalar Domi (o estás usando un navegador que no Mozilla), puede utilizar Web X-Ray Goggles, como se describe en la siguiente sección. O bien, puede omitir esta sección e ir directamente a la página siguiente. Saltarse esta sección no interfiere con el resto del tutorial.

    +
    +
    3. +
  3. En el Domi, expanda los nodos de su documento haciendo clic en las flechas. +

    Nota: El espaciado de su archivo HTML puede ocasionar que Domi muestre algunos nodos de texto vacíos, que se pueden pasar por alto.

    + +

    Parte del resultado podría tener este aspecto, según qué nodos has expandido:

    + + 
    │ ▼╴P
+│ │ │ ▼╴STRONG
+│ │ └#text
+│ ├╴#text
+│ ►╴STRONG
+│ │
    + +

    Cuando selecciona cualquiera de los nodos, puede usar panel de la derecha de  DOMi para averiguar más cosas sobre él. Por ejemplo, cuando se selecciona un nodo de texto, DOMi muestra el texto en el panel de la derecha.

    + +

    Cuando se selecciona un elemento nodo, DOMi analiza y ofrece una enorme cantidad de información en su panel de la derecha. La información de estilo es sólo una parte de la información que proporciona.

    +
    4. +
+ +
+
Problema
+ +

En el DOMi , haga clic en un nodo STRONG.

+ +

Utilice el panel de la derecha de Domi para encontrar el nodo de color rojo, y donde su apariencia es más relevante que el texto normal.

+ +
+
Possible solution
+ +

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

+Ocultar solución
+Ver la solución para el problema.
+ +

Utilizando Web X-Ray Goggles

+ +

Web X-Ray Goggles muestra menos información que DOM Inspector, pero es más fácil de instalar y utilizar.

+ +
    +
  1. Ir a la página principal de la Web X-Ray Goggles.
    2. +
  2. Arrastre el enlace bookmarklet en esa página a tu barra de herramientas del navegador.
    3. +
  3. Abra el documento en versión HTML.
    4. +
  4. Active Web X-Ray Goggles haciendo clic en el bookmarklet en la barra de herramientas.
    5. +
  5. Mueva el puntero del ratón por encima de su documento para comprobar los elementos en el documento.
    6. +
+ +

¿Y ahora qué?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}Si tomaste el reto, usted vera que la información de estilo  interactúa en más de un lugar, para crear el estilo final de un elemento. La siguiente página explica más acerca de estas interacciones.

diff --git "a/files/es/web/css/introducci\303\263n/index.html" "b/files/es/web/css/introducci\303\263n/index.html" new file mode 100644 index 0000000000..678ec25622 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/index.html" @@ -0,0 +1,93 @@ +--- +title: Introducción +slug: Web/CSS/Introducción +tags: + - CSS + - 'CSS:Introducción' + - para_revisar +translation_of: Learn/CSS/First_steps +--- +

Presentación

+ +

Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).

+ +

Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo. Está dividido en dos partes.

+ +
    +
  • La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.
    • +
+ +
    +
  • La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.
    • +
+ +

El tutorial se basa en la Especificación CSS 2.1 .

+ +

¿Quién debe usar este tutorial?

+ +

Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.

+ +

Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo. A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.

+ +

Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.

+ +

Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.

+ +

¿Qué se necesita antes de empezar?

+ +

Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite). También debes saber cómo utilizarlos de forma básica.

+ +

Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.

+ +

Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla. Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas. El otro software de Mozilla al que hace referencia este tutorial incluye:

+ + + +

Nota: CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él. Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.

+ +

Cómo utilizar este tutorial

+ +

Para utilizar este tutorial, lee las páginas con atención y en orden. Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.

+ +

En cada página, utiliza la sección de Información para entender cómo funciona CSS. Usa la sección Acción para tratar de usar CSS en tu propio equipo.

+ +

Para controlar que has comprendido los contenidos, acepta el reto al final de cada página. Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.

+ +

Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título Más detalles. Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.

+ +

Parte I del tutorial

+ +

Una guía paso a paso básica para CSS.

+ +
    +
  1. Qué es CSS
    2. +
  2. Por qué usar CSS
    3. +
  3. Cómo funciona CSS
    4. +
  4. Cascada y herencia
    5. +
  5. Selectores
    6. +
  6. CSS legibles
    7. +
  7. Estilos de texto
    8. +
  8. Color
    9. +
  9. Contenido
    10. +
  10. Listas
    11. +
  11. Cajas
    12. +
  12. Diseño
    13. +
  13. Tablas
    14. +
  14. Multimedia
    15. +
+ +

Parte II del tutorial

+ +

Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.

+ +
    +
  1. JavaScript
    2. +
  2. Enlaces XBL
    3. +
  3. Interfaces de usuario XUL
    4. +
  4. Gráficos SVG
    5. +
  5. Datos XML
    6. +
+ +

{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git "a/files/es/web/css/introducci\303\263n/layout/index.html" "b/files/es/web/css/introducci\303\263n/layout/index.html" new file mode 100644 index 0000000000..31a86194bf --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/layout/index.html" @@ -0,0 +1,383 @@ +--- +title: Layout +slug: Web/CSS/Introducción/Layout +translation_of: Learn/CSS/CSS_layout +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.

+ +

Informacion: Layout

+ +

Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.

+ +

Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.

+ +

Esta página describe algunas técnicas sencillas que puedes probar.

+ +

Estructura del documento

+ +

Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.

+ +

El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.

+ +
+
+

Ejemplo

+ +

En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.

+ +

Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.

+ +

Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:

+
+ +
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+ +

Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:

+ +
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+ +

  El resultado se ve así: 

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

Unidades de tamaño

+ +

Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.

+ +

Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.

+ +
+
+

Ejemplo

+ +

El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.

+ +

El borde de la derecha tiene su tamaño especificado en ems.

+ +

En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:

+
+ + + + + + + +
+
RESIZE ME PLEASE
+
+
+ +
+
+

Más detalles

+ +

Para otros dispositivos, otras unidades de longitud son apropiadas.

+ +

Hay más información sobre esto en una página posterior de este tutorial.

+ +

Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.

+
+
+ +

Diseño del texto

+ +

Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:

+ +

{{Cssxref ('text-align')}}

+ +


+   Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar
+ {{Cssxref ('texto-sangría')}}
+     Indente el contenido en una cantidad que especifique.

+ +

Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.

+ +
+
+

Ejemplo

+ +

Para centrar los títulos:

+
+ +
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+ +

Resultado:

+ + + + + + + +
+

(A) The oceans

+
+ +

En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.

+
+ +

Floats

+ +

La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.

+ +

El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.

+ +
+
+

Ejemplo

+ +

En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.

+ +

Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:

+
+ +
ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

El resultado sería:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)

+ +

Posicionamiento

+ +

Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.

+ +

Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.

+ +

relativo

+ +


+   La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.
+ fijo
+     La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.
+ absoluto
+     La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.
+ estático
+     El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.

+ +

Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.

+ +
+
+

Ejemplo

+ +

Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:

+
+ +
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+ +

En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:

+ +
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin:0px; /* no hay margenes alrededor del elemento */
+  top: 0px; /* distancia desde la parte superior */
+  left: 0px; /* distancia desde la izquierda */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+ +

El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+
+ +
+
+

Más detalles

+ +

La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.

+ +

Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.

+
+
+ +

Action: Specifying layout

+ +
    +
  1. Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.
    2. +
  2. En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.
    3. +
+ +
+
+

Cambios

+ +

Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.

+
+ +
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:

+ + + + + + + +
Image:Yellow-pin.png
+ +

Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.

+ +

Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.

+ +

Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:

+ +
+
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

 See a solution to this challenge.

+ +

What next?

+ +

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.

diff --git "a/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" "b/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" new file mode 100644 index 0000000000..676ea9caf9 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" @@ -0,0 +1,155 @@ +--- +title: Los estilos de texto +slug: 'Web/CSS/Introducción/Los:estilos_de_texto' +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +

{{ CSSTutorialTOC() }}

+ +

Esta es la sección séptima del tutorial CSS Introducción ; da más ejemplos de estilos de texto.Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.

+ +

Los estilos de texto: Información

+ +

CSS tiene varias propiedades de estilo de texto .

+ +

Hay una propiedad abreviada conveniente, la fuente , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:

+ +
    +
  • Negrita, cursiva, y small-caps (versalita)
    • +
  • El tamaño
    • +
  • La altura de la línea
    • +
  • El tipo de letra
    • +
+ +
+
+
Ejemplo
+ +
p { fuente : cursiva 75% / 125% "Comic Sans MS" , cursive ; }
+
+ +

Esta regla establece varias propiedades de la fuente, poniendo todos los párrafos en italic.

+ +

El tamaño de fuente se establece en tres cuartas partes del tamaño en cada párrafo del elemento padre,  y el interlíneado se establece en 125% (un poco más separados de lo normal).

+ +

El tipo de letra se establece en Comic Sans MS, pero si este tipo de letra no está disponible, el navegador utilizará por defecto tipografía cursiva (hand-written).

+ +

La regla tiene el efecto colateral de desactivar las versalitas y negritas (estableciendo su valor en normal):

+
+ +

Tipos de fuentes

+ +

No se puede predecir qué tipografías tienen los lectores de nuestro documento . Así que cuando se especifica llos tipos de fuentes de las letras, es buena idea darle una lista alternativa en orden de preferencia.

+ +

Finalice la lista con uno de los las tipografías por defecto: serif, sans-serif, cursive, fantasy or monospace.

+ +

Si el tipo de letra no es compatible con alguna de los caracteres del documento, el navegador puede sustituirlos por una tipografía diferente. Por ejemplo, el documento puede contener caracteres especiales que el tipo de letra no admite. Si el navegador puede encontrar otro tipografía que tiene esos caracteres, entonces usará otro tipo de fuente

+ +

Para especificar un tipo de letra por sí misma, utilizar el font-family propiedad.

+ +

Los tamaños de la fuente

+ +

Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.

+ +

Puede utilizar algunos valores incorporados para tamaños de fuentes,  like small, medium and large (pequeñas, medianas y grandes) . También puede utilizar valores relativos al tamaño de fuente del elemento padre, like: smaller, larger, 150% or 1.5em. ( más pequeño, más grande, 150% o 1.5em.). Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); así 1.5em es una vez y media el tamaño de la fuente del elemento padre.

+ +

Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora. Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.

+ +

Para especificar un tamaño de fuente por su cuenta, utilice el font-size propiedad.

+ +

Altura de línea

+ +

El interlíneado especifica el espacio entre líneas. Si el documento tiene párrafos largos con muchas líneas, una separación más grande de lo normal, hace que sea más fácil de leer, especialmente si el tamaño de la letra es pequeña.

+ +

Para especificar una altura de línea por su cuenta, utilice la propiedad line-height .

+ +

Decoración

+ +

La propiedad independiente text-decoration puede especificar otros estilos, como el subrayado o tachado. Usted puede establecerlo en ninguno ( none )  para eliminar expresamente cualquier decoración.

+ +

Otras propiedades

+ +

Para especificar cursiva por su cuenta, use font-style : italic;
+ Para especificar audaz por su cuenta, use font-weight : bold;
+ Para especificar los pequeños capitales en su propio, el uso font-variant : small-caps;

+ +

Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como normal o inherit.

+ +
+
Mas detalles
+ +

Puede especificar estilos de texto de diversas maneras.

+ +

Por ejemplo, algunas de las propiedades mencionadas aquí tienen otros valores que se pueden utilizar.

+ +

En una hoja de estilo compleja, evite utilizar la propiedad font shorthand, debido a sus efectos secundarios (resetean otras propiedades individuales).

+ +

Para obtener mas detalles de las propiedades que se relacionan con las fuentes, ver las especificaciónes CSS , Fonts,. Si desea más detalles sobre la decoración de texto, ver Text .

+ +

Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar @ font-face para especificar una fuente en línea. Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.

+
+ +

Acción: Especificaciónes de las fuentes

+ +

Para un simple documento, puede establecer la fuente del elemento  <body> y el resto del documento hereda la configuración.

+ +
    +
  1. Edite su archivo CSS.
    2. +
  2. Agregue la siguiente regla para cambiar el tipo de letra en todo el documento. La parte superior del archivo CSS es el lugar lógico para esto, pero no tiene los mismos efectos donde usted lo ponga: + 
    body {font: 16px "Comic Sans MS", cursive;}
    + +
     
    +
    3. +
  3. Añada un comentario que explique la regla, y agregue un espacio en blanco para que coincida con su diseño preferido.
    4. +
  4. Guarde el archivo y actualice el explorador para ver el efecto. Si su sistema tiene Comic Sans MS, u otra fuente cursiva que no soporta italic, su navegador eligira un tipo de letra diferente para la primera línea del texto en italic: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. Desde la barra de menú de su navegador, elija Ver> Tamaño del texto> Aumentar (o Ver> Zoom> Acercar ). A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.
    6. +
+ +
+
Desafío
+ +

Sin modificar nada más, hacer las seis letras iniciales dos veces el tamaño de letra serif por defecto del navegador:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Possible solution
+ +

Add the following style declaration to the strong rule:

+ +
  font: 200% serif;
+
+If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. + +

 

+Hide solution
+Ver una solución para el desafío.
+ +

¿Y ahora qué?

+ +

El documento muestra ya utiliza varios colores con nombre. La siguiente sección enumera los nombres de los colores estándar y se explica cómo se puede especificar otros .

+ +

 

diff --git "a/files/es/web/css/introducci\303\263n/media/index.html" "b/files/es/web/css/introducci\303\263n/media/index.html" new file mode 100644 index 0000000000..bb7bb0bd23 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/media/index.html" @@ -0,0 +1,394 @@ +--- +title: Media +slug: Web/CSS/Introducción/Media +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}

+ +

Esta es la ultima sección de la primera parte del tutorial de Introducción a CSS. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.

+ +

Información: Media

+ +

El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.

+ +

Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.

+ +

Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.

+ +
+
Ejemplo
+ +

Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.

+ +

En el lenguaje de marcado, el elemento padre de esta área tiene el id nav-area. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo id.)

+ +

Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:

+ +
@media print {
+  #nav-area {display: none;}
+  }
+
+
+ +

Algunos de los tipos de medios comunes son:

+ + + + + + + + + + + + + + + + + + + + +
screenPantalla de computadora
printMedio paginado
projectionPantalla proyectada
allTodos (por defecto)
+ +
+
Mas detalles
+ +

Existen otras maneras de especificar un conjunto de reglas para los distintos medios.

+ +

El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo media en la etiqueta LINK.

+ +

En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.

+ +

Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.

+ +

Para más detalles de los tipos de medio, ve Media en la especificación de CSS.

+ +

Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: XML data.

+
+ +

Imprimir

+ +

CSS tiene algún soporte especifico para impresión y para medios páginados en general.

+ +

Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para @page:left y @page:right.

+ +

Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (in) y puntos (pt = 1/72 inch), o centimetros (cm) y milimetros (mm). Es igualmente apropiado usar ems (em) para conincidir el tamaño de la fuente, y porcentajes (%).

+ +

Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.

+ +
+
Ejemplo
+ +

Esta regla determina los márgenes a una pulgada en todos los lados:

+ +
@page {margin: 1in;}
+
+ +

Esta regla asegura que cada elemento H1 empiece en una nueva página:

+ +
h1 {page-break-before: always;}
+
+
+ +
+
Más detalles
+ +

Para más detalles del soporte de CSS para medios paginados, ver Paged media en la especificación de CSS.

+ +

Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.

+
+ +

Interfaces de Usuario

+ +

CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.

+ +

No existe un tipo especial de medio para aparatos con interfaz de usuario.

+ +

Si existen cinco selectores especiales:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
E{{cssxref(":hover")}}Cualquier elemento E que tenga el puntero sobre él
E{{cssxref(":focus")}}Cualquier elemento E que tenga el foco del teclado
E{{cssxref(":active")}}Cualquier elemento E que este envuelto en la acción actual del usuario
E{{cssxref(":link")}}Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario
E{{cssxref(":visited")}}Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito
+ +
+

Nota: La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver Privacy and the :visited selector para más detalles.

+
+ +

La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.

+ +

Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SelectorSelects
pointerIndicating a link
waitIndicating that the program cannot accept input
progressIndicating that the program is working, but can still accept input
defaultThe default (usually an arrow)
+ +

Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.

+ +

Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo disabled o el atributo readonly. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

+ +
+
Ejemplo
+ +

Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:

+ +
.green-button {
+  background-color:#cec;
+  color:#black;
+  border:2px outset #cec;
+  }
+
+.green-button[disabled] {
+  background-color:#cdc;
+  color:#777;
+  }
+
+.green-button:active {
+  border-style: inset;
+  }
+
+ +

Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:

+ + + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+ +

Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.

+
+ +
+
Más detalles
+ +

Para más información sobre interfaces de usuario en CSS, ver User interface en la especificación de CSS.

+ +

Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.

+
+ +

Acción: Imprimir un documento

+ +
    +
  1. Abrir un nuevo documento HTML, doc4.html. Copiar y pegar el contenido de aqui: + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h1>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. Abrir una nueva hoja de estilo, style4.css. Copiar y pegar el contenido de aqui: + 
    /*** Print sample ***/
+
+/* defaults  for screen */
+#print-head,
+#print-foot {
+  display: none;
+  }
+
+/* print only */
+@media print {
+
+h1 {
+  page-break-before: always;
+  padding-top: 2em;
+  }
+
+h1:first-child {
+  page-break-before: avoid;
+  counter-reset: page;
+  }
+
+#print-head {
+  display: block;
+  position: fixed;
+  top: 0pt;
+  left:0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  text-align: center;
+  }
+
+#print-foot {
+  display: block;
+  position: fixed;
+  bottom: 0pt;
+  right: 0pt;
+
+  font-size: 200%;
+  }
+
+#print-foot:after {
+  content: counter(page);
+  counter-increment: page;
+  }
+
+} /* end print only */
+
    +
    3. +
  3. Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.
    4. +
  4. Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section A
    + +
    This is the first section...
    + +
    Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    Heading for paged media
    + +
    Section B
    + +
    This is the second section...
    + +
    Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + + +
Retos
Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. +

Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.

+ +

Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.

+
+ +

Ver soluciones a estos retos.

+ +

¿Qué sigue?

+ +

Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de Discussion.

+ +

Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: JavaScript

diff --git "a/files/es/web/css/introducci\303\263n/selectors/index.html" "b/files/es/web/css/introducci\303\263n/selectors/index.html" new file mode 100644 index 0000000000..5d63b82547 --- /dev/null +++ "b/files/es/web/css/introducci\303\263n/selectors/index.html" @@ -0,0 +1,415 @@ +--- +title: Selectores +slug: Web/CSS/Introducción/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta es la sección quinta del tutoriaCSS Getting Started ;En él se explica cómo se puede aplicar estilos de forma selectiva, y cómo los diferentes tipos de selectores tener diferentes prioridades. Agregar algunos atributos a las etiquetas en su documento de muestra, y utiliza estos atributos en su hoja de estilos de muestra.

+ +

Información: Selectores

+ +


+ CSS tiene su propia terminología para describir el lenguaje CSS. Anteriormente en este tutorial, que ha creado una línea en su hoja de estilos como esta:

+ +
strong {
+  color: red;
+}
+
+ +

En la terminología de CSS, toda esta línea es una rule (regla). Esta regla comienza con strong, que es un selector. Permite seleccionar qué elementos en el DOM se aplica la regla.

+ +
+
Más detalles
+ +

La parte interior de las llaves es la declaración.

+ +

 La palabra clave es color, que es una propiedad, y el rojo es el valor.

+ +

El punto y coma después de el par propiedad-valor separa los posibles otros pares de  propiedad-valor en una misma declaración.

+ +

 Este tutorial se refiere a un selector como strong como un selector de etiquetas. La especificación CSS se refiere a él como un selector de tipo ( type selector).

+
+ +

En esta página del tutorial se explica más acerca de los selectores que se pueden utilizar en las reglas CSS.

+ +

Además de añadir nombres a las etiquetas , puede usar valores en los atributos de los selectores. Esto permite que sus reglas sean más específicas.

+ +

Dos atributos tienen un estatus especial para CSS. Son class e id.

+ +

Class: Selectores de clase

+ +

Utilice el atributo class para asignarle  a un elemento un nombre de clase (class). Depende del nombre que elijas como class. Múltiples elementos en un documento pueden tener el mismo valor de la clase.

+ +

En su hoja de estilo, escriba un punto (.) antes del nombre de la clase, cuando se utiliza como un selector.

+ +

Selectores ID

+ +

Utilice el atributo id en un elemento para asignar un identificación para ese elemento. Depende de usted el nombre que elija para el ID. El nombre de ID debe ser único en el documento.
+  

+ +

En su hoja de estilo, escriba un símbolo de almohadilla (#) ante el ID cuando se utiliza esto en un selector.

+ +
+
Ejemplo
+ +

Esta etiqueta HTML tiene un atributo class y un atributo id:

+ +
<p class="key" id="principal">
+
+ +

El valor de id es, principal, debe ser único en el documento; pero otras etiquetas del documento puede tener el mismo nombre de la class, Key.

+ +

En una hoja de estilo CSS, esta regla hace que todos los elementos con la class key sean verdes . (Puede ser que no todos los sean {{HTMLElement ()} "p"} elementos.)

+ +
.key {
+  color: green;
+}
+
+ +

Esta regla hace que el único elemento de id principal este en negrita:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Si más de una regla se aplica a un elemento y especifica la misma propiedad, entonces el CSS da prioridad a la regla que tiene el selector más específico. Un selector ID es más específico que un selector de class, que a su vez es más específico que un selector (tag) de etiquetas.

+ +
+
Más detalles
+ +

También se pueden combinar selectores, haciendo un selector más específico.
+
+ Por ejemplo, el selector .key selecciona todos los elementos que tienen key como nombre de clase (class). El selector p.key selecciona sólo el elemento {{ HTMLElement("p") }} que tiene de nombre key.

+ +

Usted no esta limitado a los dos atributos especiales, class e id.  Se puede especificar otros atributos mediante corchetes. Por ejemplo, el selector [type='button'] selecciona todos los elementos que tienen un atributo de tipo con el  valor button.

+
+ +

Si la hoja de estilo tiene reglas en conflicto y son igualmente específicas, entonces el CSS da prioridad a la regla que está después en la hoja de estilos.

+ +

Cuando usted tiene un problema con las reglas en conflicto, trate de resolverlo haciendo una de las normas más específicas, para que tenga prioridad. Si usted no puede hacer esto, trate de mover una de las reglas mas cerca del final de la hoja de estilos para que tenga la prioridad.

+ +

Las pseudo-clases de los selectores

+ +

Una pseudo-clase  pseudo-class es en  CSS una palabra clave añadida a los selectores, que especifica un estado especial del elemento a seleccionar. Por ejemplo {{Css Href (": hover")}} aplicará un estilo cuando el usuario se desplaza sobre el elemento especificado mediante el selector.

+ +

Las Pseudo-classes, junto con los pseudo-elements, permiten aplicar un estilo a un elemento no sólo en relación con el contenido de la estructura del documento, sino también en relación a los factores externos, como la historia del navegador por ejemplo: ({{href css (": visited ")}}, ), el estado de su contenido (como {{ref css (": :checked")}} en algunos elementos de formulario), o la posición del ratón (como {{cssxref (":hover ")}} que le permite saber si el ratón está sobre un elemento o no). Para ver una lista completa de selectores, visite especificación CSS3 Selectores de trabajo CSS3 Selectors working spec.

+ +
+
Sintaxis
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Listado de pseudo-classes:

+ +
    +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
  • {{ Cssxref(":active") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":nth-child") }}
    • +
  • {{ Cssxref(":nth-last-child") }}
    • +
  • {{ Cssxref(":nth-of-type") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":disabled") }}
    • +
+ +

Información: Los selectores basados en relaciones (relationships)

+ +

El CSS tiene algunas formas de seleccionar elementos en función de las relaciones entre los elementos. Usted puede utilizar estas para hacer selectores que sean más específicos.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Selectores comunes basados en relaciones
SelectorSelects
A ECualquier elemento E que es un descendiente de un elemento A (que es: un hijo o un hijo de un hijo etc.)
A > ECualquier elemento E que es un hijo de un elemento A
E:first-childCualquier elemento E que es el primer hijo de su padre
B + ECualquier elemento E que es el siguiente hermano de un elemento B (es decir: el próximo hijo del mismo padre)
+ +

Usted puede combinarlas para expresar relaciones complejas.
+
+ También puede utilizar el símbolo asterisco (*) para significar "cualquier elemento".

+ +
+
Ejemplo
+ +

Una tabla HTML tiene un atributo id, pero sus filas y las celdas no tienen identificadores individuales:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

Estas reglas hacen que la primera celda de cada fila sea en negrita, y la segunda celda de cada fila en  la familia de fuente  monoespaciado. Esto sólo afecta a una tabla concreta del documento:

+ +
    #data-table-1 td:first-child {font-weight: bolder;}
+    #data-table-1 td:first-child + td {font-family: monospace;}
+
+ +

El resultado se ve así:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Más detalles
+ +

La manera mas habitual es hacer que un selector sea más específico, entonces aumentara su prioridad.

+ +

Si utiliza estas técnicas, se evita la necesidad de especificar la class o atributos ID en muchas etiquetas del documento. En su lugar, CSS hace este trabajo.

+ +

En grandes diseños donde la velocidad es importante, usted puede hacer sus hojas de estilo más eficiente evitando reglas complejas que dependen de relaciones entre los elementos.

+ +

Para más ejemplos sobre las tablas, ver Tables en la página CSS Reference.

+
+ +

Action: Using class and ID selectors

+ +
    +
  1. Edite su archivo HTML, y duplicar el párrafo copiando y pegando.
    2. +
  2. A continuación, agregue los atibutos  id y class a la primera copia, y un atributopara la segunda copia como se muestra a continuación. Alternativamente, copie y pegue el archivo entero de nuevo: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Ahora edite su archivo CSS. Reemplazar todo el contenido con: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Guarde los archivos y actualizar el navegador para ver el resultado: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    Puede intentar reordenar las líneas en el archivo CSS de mostrar de que el orden no efecta.

    + +

    Los selectores de class.carrot and .spinach tienen prioridad sobre el selector de etiquetas strong.

    + +

    El ID selector #first tiene prioridad sobre los selectores de clase y etiqueta.

    +
    5. +
+ +
+
Desafíos
+ +
    +
  1. Sin cambiar su archivo HTML, agregue una sola regla para su archivo CSS que mantenga todas las letras iniciales que mismo color que están ahora, pero hace que todo el otro texto en el segundo párrafo sea azul: + + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Ahora cambie la regla que acaba de agregar (sin cambiar nada más), para hacer que el primer párrafo sea azul también: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+See a solution for the challenge.
+ +

Action: Using pseudo-classes selectors

+ +
    +
  1. Cree un HTML como el siguiente: + + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Ahora edite su archivo CSS. Reemplace todo el contenido con: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Guarde los archivos y actualice el explorador para ver el resultado (poner el ratón sobre el siguiente enlace para ver el efecto): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

Acción: Uso de selectores basados en las relaciones y pseudo-clases

+ +

Con selectores basados en las relaciones y pseudo-clases puede crear algoritmos complejos en cascada . Esto es una técnica común que se utiliza, por ejemplo, con el fin de crear menús desplegables en puro CSS (es decir sólo CSS, sin necesidad de utilizar JavaScript). La esencia de esta técnica es la creación de una regla como la siguiente:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

Aplicararemos a una estructura de HTML como el siguiente:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Vea nuestro ejemplo completoCSS-based dropdown menu example para una posible referencia.

+ +

¿Y ahora qué?

+ +

Su hoja de estilos de muestra está empezando a parecer densa y complicada. La siguiente sección describe maneras de hacer CSS más fácil de leer. easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/es/web/css/isolation/index.html b/files/es/web/css/isolation/index.html new file mode 100644 index 0000000000..e4e6cf32d4 --- /dev/null +++ b/files/es/web/css/isolation/index.html @@ -0,0 +1,158 @@ +--- +title: Isolation +slug: Web/CSS/isolation +tags: + - CSS + - Composición CSS + - Propieiedad CSS +translation_of: Web/CSS/isolation +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS isolation define si el elemento debe crear un nuevo {{glossary("stacking context")}}.

+ +

Esto es especialmente útil en conjunto con {{cssxref("background-blend-mode")}} que solo mezclan fondos en un contexto de apilamiento determinado: permite aislar grupos de elementos de sus fondos más profundos y mezclar sus colores de fondo.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Keyword values */
+isolation: auto;
+isolation: isolate;
+
+/* Global values */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+
+ +

Valores

+ +
+
auto
+
Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado solo si una de las propiedades aplicadas al elemento lo requiere.
+
isolate
+
Es un keyword que indica que un nuevo contexto de apilamiento debe ser creado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+
+ +
.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}
+ +

{{ EmbedLiveSample('Examples', "230", "230") }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Compositing', '#isolation', 'Isolation') }}{{ Spec2('Compositing') }}Initial definition
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico +

{{CompatChrome(41.0)}}

+ 		{{CompatGeckoDesktop('36')}}{{CompatNo()}}307.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico +

{{CompatChrome(41.0)}}

+ 		{{CompatGeckoMobile('36')}}{{CompatNo()}}368.0
+
+ +

También puedes ver

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/es/web/css/justify-content/index.html b/files/es/web/css/justify-content/index.html new file mode 100644 index 0000000000..56e6af1ff7 --- /dev/null +++ b/files/es/web/css/justify-content/index.html @@ -0,0 +1,222 @@ +--- +title: justify-content +slug: Web/CSS/justify-content +translation_of: Web/CSS/justify-content +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS justify-content define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor.

+ +

El alineamiento se produce luego de que las longitudes y márgenes automáticos son aplicados, lo que significa que, si existe al menos un elemento flexible con {{cssxref("flex-grow")}} diferente a 0, no tendrá efecto ya que no habrá espacio disponible.

+ +
+

No se debe asumir que esta propiedad sólo se aplicará a contenedores flex en el futuro y por lo tanto no ocultarla simplemente estableciendo otro valor para {{cssxref("display")}}. El CSSWG está trabajano para extender su uso a cualquier elemento en bloque. La especificación preliminar se encuentra en una etapa muy temprana y aún no está implementada.

+
+ +
{{cssinfo}}
+ +

Véase Using CSS flexible boxes para más propiedades e información.

+ +

Sintaxis

+ +
/* Alinear items flex desde el comienzo */
+justify-content: flex-start;
+
+/* Alinear items desde el final */
+justify-content: flex-end;
+
+/* Alinear items en el centro */
+justify-content: center;
+
+/* Distribuir items uniformemente
+El primer item al inicio, el último al final */
+justify-content: space-between;
+
+/* Distribuir items uniformemente
+Los items tienen el mismo espacio a su alrededor */
+justify-content: space-around;
+
+/* Valores globales */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+
+ +

Valores

+ +
+
flex-start
+
Los items flex se colocan comenzando desde el comienzo principal. El margen del primer item es alineado al ras con el borde del comienzo principal de la línea y cada item siguiente es alineado al ras con el precedente.
+
flex-end
+
Los items flex se colocan comenzando desde el final principal. El margen del último item es alineado al ras con el borde del final principal de la línea y cada item precedente es alineado al ras con el siguiente.
+
center
+
Los items flex son colocados hacia el centro de la línea. Los items flex se alinean al ras entre sí y en torno al centro de la línea. El espacio entre el borde del comienzo principal de la línea y el primer item es el mismo que el espacio entre el borde del final principal y el último item de la línea.
+
space-between
+
Los items flex se distribuyen uniformemente sobre la línea. El espaciamiento se hace de tal manera que el espacio adyacente entre dos items es el mismo. El borde del comienzo principal y el borde del final principal se alinean al ras con el borde del primer y último item respectivamente.
+
space-around
+
Los items flex se alinean uniformemente de tal manera que el espacio entre dos items adyacentes es el mismo. El espacio vacío anterior al primer item y posterior al último item equivale a la mitad del espacio entre dos items adyacentes.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Contenido HTML

+ +
<div id="container">
+  <p>justify-content: flex-start</p>
+  <div id="flex-start">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: flex-end</p>
+  <div id="flex-end">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: center</p>
+  <div id="center">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: space-between</p>
+  <div id="space-between">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: space-around</p>
+  <div id="space-around">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+ +

CSS

+ +
#container > div {
+  display: flex;
+  font-family: "Courier New", "Lucida Console", monospace;
+}
+
+#container > div > div {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  justify-content: flex-start;
+}
+
+#center {
+  justify-content: center;
+}
+
+#flex-end {
+  justify-content: flex-end;
+}
+
+#space-between {
+  justify-content: space-between;
+}
+
+#space-around {
+  justify-content: space-around;
+}
+
+ +

Resultados en:

+ +

{{ EmbedLiveSample('Ejemplos', 600, 550) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soprte básico{{CompatGeckoDesktop("18.0")}} (behind a pref) [1]
+ {{CompatGeckoDesktop("20.0")}}		21.0{{property_prefix("-webkit")}}1112.10{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soprte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Firefox soporta sólo single-line flexbox hasta Firefox 28. Para activar soporte flexbox, para Firefox 18 y 19, el usuario debe cambiar la preferencia  about:config "layout.css.flexbox.enabled" a true.

+ +

Ver también

+ + diff --git a/files/es/web/css/layout_cookbook/index.html b/files/es/web/css/layout_cookbook/index.html new file mode 100644 index 0000000000..1b46384b51 --- /dev/null +++ b/files/es/web/css/layout_cookbook/index.html @@ -0,0 +1,77 @@ +--- +title: Libro de recetas de maquetación CSS +slug: Web/CSS/Layout_cookbook +translation_of: Web/CSS/Layout_cookbook +--- +
{{CSSRef}}
+ +

El libro de recetas de maquetación CSS tiene como objetivo reunir recetas para patrones de diseño comunes, cosas que podrías necesitar para implementar en tus propios sitios. Además de proporcionar código que puedes utilizar como punto de partida en tus proyectos, estas recetas resaltan las diferentes formas en que se pueden utilizar las especificaciones de diseño y las opciones que puedes tomar como desarrollador.

+ +
+

Nota: Si es nuevo en el diseño de CSS, es posible que primero quiera echar un vistazo a nuestro módulo de aprendizaje de diseño CSS, ya que esto le dará la base básica que necesita para hacer aquí uso de las recetas.

+
+ +

Las recetas

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RecetaDescripciónMetodos de maquetación
Objetos mediaUna caja con dos-columnas con una imagen en un lado y texto descriptivo en el otro, por ejemplo, una entrada de facebook o un tweet.CSS Grid, alternativa {{cssxref("float")}}, dimensionamiento {{cssxref("fit-content")}}
ColumnasCuándo elegir el diseño de varias columnas, flexbox o grid para sus columnas.CSS Grid, Multicol, Flexbox
Centrar un elementoCómo centrar un elemento horizontal y verticalmente.Flexbox, Box Alignment
Pies de página pegajososCreación de un pie de página que se coloca en la parte inferior del contenedor o en la ventana de visualización cuando el contenido es más corto.CSS Grid, Flexbox
Navegación divididaUn patrón de navegación en el que algunos enlaces se separan visualmente de los demás.Flexbox, {{cssxref("margin")}}
Navegación con migas de panCrear una lista de enlaces para permitir al visitante navegar de nuevo a través de la jerarquía de la página. +

Flexbox

+
Lista de grupos con insigniasUna lista de elementos con una insignia para mostrar un conteo.Flexbox, Box Alignment
PaginaciónEnlaces a páginas de contenido (como los resultados de búsqueda).Flexbox, Box Alignment
TarjetaUn componente de tarjeta, que se muestra en una rejilla de tarjetas.Grid Layout
+ +

Aporta con una receta

+ +

Como con todo en MDN nos encantaría que contribuyeras con una receta en el mismo formato que los que se muestran arriba. Revisa esta página para obtener una plantilla y pautas para escribir su propio ejemplo.

diff --git a/files/es/web/css/layout_mode/index.html b/files/es/web/css/layout_mode/index.html new file mode 100644 index 0000000000..5e671c9806 --- /dev/null +++ b/files/es/web/css/layout_mode/index.html @@ -0,0 +1,31 @@ +--- +title: Layout mode +slug: Web/CSS/Layout_mode +tags: + - CSS + - Layout + - Referencia +translation_of: Web/CSS/Layout_mode +--- +
{{cssref}}
+ +

Un modo de diseño CSS(CSS layout mode), a veces simplemente llamado "layout", es un algoritmo que determina la posición y tamaño de cajas basado en la forma en la que interactúan con sus (elementos) hermanos y padres. Hay varios de ellos:

+ +
    +
  • El block layout, diseñado para presentar documentos. El block layout contiene características de documento-centrado, como la capacidad de flotar(float) elementos o distribuirlos en múltiples columnas.
    • +
  • El inline layout, diseñado para presentar texto.
    • +
  • El table layout, diseñado para presentar tablas.
    • +
  • El positioned layout, diseñado para posicionar elementos sin demasiada interacción con otros elementos. 
    • +
  • El flexible box layout, diseñado para presentar páginas complejas que pueden redimensionarse de forma fluida.
    • +
  • El grid layout, diseñado para presentar elementos relativos a una cuadrícula fija (fixed grid).
    • +
+ +
+

Nota: No todas las propiedades CSS aplican a todos los modos de diseño. La mayoría de ellos aplican a uno o dos de ellos y no tienen efecto si se configuran en un elemento que es parte de otro modo de diseño.

+
+ +

Ver También

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/es/web/css/left/index.html b/files/es/web/css/left/index.html new file mode 100644 index 0000000000..8a7912b86d --- /dev/null +++ b/files/es/web/css/left/index.html @@ -0,0 +1,144 @@ +--- +title: left +slug: Web/CSS/left +translation_of: Web/CSS/left +--- +

{{CSSRef}}

+ + +

La propiedad left especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

+ +

Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}: absolute ó position: fixed), la propiedad left determina la distancia entre el margen izquierdo del elemento y el borde izquierdo de su bloque contenedor.

+ +
{{EmbedInteractiveExample("pages/css/left.html")}}
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
left: <length> | <percentage> | auto | inherit ;
+
+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una longitud, un valor negativo, cero, un valor positivo.
+
{{cssxref("<percentage>")}}
+
Un porcentaje del ancho del bloque contenedor.
+
+ +

Ejemplos

+ +

CSS

+ +
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}
+ +

HTML

+ +
<div id="wrap">
+  <div id="example_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative position in relation to its siblings.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relative to its sibling div above, but removed from flow of content.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      </pre>
+      <p>Absolute position inside of a parent with relative position</p>
+    </div>
+  </div>
+</div>
+ +

{{EmbedLiveSample('Ejemplos',1200,650)}}

+ +

Especificaciones

+ + + +

Compatibilidad entre navegadores

+ + +

{{Compat("css.properties.left")}}

+ + +

Ver también

+ +
    +
  • {{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("bottom") }}
    • +
diff --git a/files/es/web/css/length/index.html b/files/es/web/css/length/index.html new file mode 100644 index 0000000000..1b66b63ef9 --- /dev/null +++ b/files/es/web/css/length/index.html @@ -0,0 +1,332 @@ +--- +title: +slug: Web/CSS/length +tags: + - Referencia + - Tipo de Dato CSS +translation_of: Web/CSS/length +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <length> denota medidas de distancia. Es un valor {{cssxref("<number>")}} seguido por una unidad de longitud (px, em, pc, in, mm, …). Al igual que en cualquier dimensión CSS, no debe haber espacio entre la unidad y el número. La unidad de longitud es opcional después del valor {{cssxref("<number>")}} 0.

+ +

Muchas propiedades CSS (CSS properties) reciben valores <length>, como por ejemplo {{ Cssxref("width") }}, {{ Cssxref("margin-top") }}, y {{ Cssxref("font-size") }}.

+ +

Para algunas propiedades, el uso de longitudes negativas es un error de sintaxis, mientras que para algunas propiedades está permitido. Nótese que aunque los valores {{cssxref("<percentage>")}} también son dimensiones CSS y son aceptadas por algunas propiedades CSS que aceptan valores <length>, no son valores <length> en sí.

+ +

Interpolación

+ +

Los valores de tipo <length> pueden ser interpolados para permitir animaciones. En este caso son interpolados como números reales, de punto flotante. La interpolación sucede en el valor calculado. La velocidad de la interpolación es definida por la función {{cssxref("<timing-function>")}} asociada a la animación.

+ +

Unidades

+ +

Unidades de longitud relativa

+ +

Longitudes relativas a la fuente

+ +
+
em
+
Esta unidad representa el tamaño calculado de fuente ({{Cssxref("font-size")}}) del elemento. Si se usa dentro de la propiedad {{Cssxref("font-size")}}, representa el tamaño de fuente heredado por el elemento. +
Esta unidad se usa por lo general para crear interfaces escalables, que mantengan el ritmo vertical de la página, aun cuando el usuario cambie el tamaño de las fuentes. Las propiedades CSS {{cssxref("line-height")}}, {{cssxref("font-size")}}, {{cssxref("margin-bottom")}} y {{cssxref("margin-top")}} generalemente tienen valores expresados en em.
+
+
ex
+
Esta unidad representa la altura de la x de la fuente ({{Cssxref("font")}}) del elemento. En fuentes que incluyen la letra 'x', es generalmente la altura de letras minúsculas en la fuente; 1ex ≈ 0.5em en muchas fuentes.
+
ch
+
Esta unidad representa la anchura, o más precisamente, la medida de avance, del glifo '0' (cero, de caracter Unicode U+0030) en la fuente ({{Cssxref("font")}}) del elemento.
+
rem
+
Esta unidad representa el tamaño ({{Cssxref("font-size")}}) del elemento raíz (p.ej. el tamaño de fuente del elemento {{HTMLElement("html")}}). Cuando se aplica a {{Cssxref("font-size")}} del elemento raíz, representa su valor inicial. +
Esta unidad es práctica para crear interfaces perfectamente escalables. Si no es soportada por los navegadores, se puede recurrir a unidades em, aunque estas son ligeramente más complejas.
+
+
+ +

Longitudes de porcentaje del viewport

+ +

Las longitudes de porcentaje del viewport definen una longitud relativa al tamaño del viewport, que es la porción visible del documento. Solamente los navegadores basados en Gecko actualizan los valores del viewport dinámicamente, cuando el tamaño de éste es modificado (al cambiar el tamaño de la ventana en una computadora de escritorio, o al girar el dispositivo, en teléfonos y tablets).

+ +

En conjunto con overflow:auto, el espacio tomado por barras de desplazamiento no es restado al tamaño del viewport, mientras en el caso de overflow:scroll, sí lo es.

+ +

En un bloque de declaración de la regla-at {{cssxref("@page")}}, el uso de longitudes de viewport es inválido, y la declaración será desechada.

+ +
+
vh
+
1/100 de la altura del viewport.
+
vw
+
1/100 de la anchura del viewport.
+
vmin
+
1/100 del valor mínimo entre la altura y anchura del viewport.
+
vmax
+
1/100 del valor máximo entre la altura y anchura del viewport.
+
+ +

Unidades de longitud absoluta

+ +
+
+ +

Las unidades de longitud absoluta representan una medida física, y cuando las propiedades físicas del medio de salida son conocidas, como en diseño para impresión. Esto se hace anclando una de las unidades a una unidad física, y definiendo el resto con relación a ésta. La definición del ancla difiere entre dispositivos de baja resolución, como pantallas, y dispositivos de alta resolución, como impresoras.

+ +

Para dispositivos de ppp bajo, la unidad px representa el píxel de referencia físico, y el resto son definidos con relación a éste. Así, 1in es definido como 96px, que equivalen a 72pt. La consecuencia de esta definición es que en dichos dispositivos, las longitudes descritas en pulgadas (in), centrímetros (cm), milímetros (mm) no necesariamente conincidirán con la longitud de la unidad física del mismo nombre.

+ +

Para dispositivos de alto ppp, las pulgadas (in), centrímetros (cm), milímetros (mm) son definidos como su contraparte física. De esta forma, la unidad px es definida con relación a ellas (1/96 de 1 pulgada).

+ +
+

Los usuarios pueden incrementar el tamaño de fuente por razones de accesibilidad. Para permitir interfaces usables sin importar el tamao de fuente, use únicamente unidades de longitud absolutas cuando las características físicas del medio de salida son conocidas, como imágenes de mapa de bits. Al establecer longitudes relacionadas al tamaño de fuente, es preferible usar unidades relativas, como em o rem.

+
+ +
+
px
+
Relativa al dispositivo de visualización.
+ Para pantallas, generalmente es el tamaño de un píxel (punto) de la pantalla del dispositivo.
+ Para impresoras y pantallas de muy alta resolución, un píxel CSS implica múltiples píxeles del dispositivo, de modo que el número de píxeles por pulgada se mantenga al rededor de 96.
+
mm
+
Un milímetro.
+
q
+
Un cuarto de milímetro (1/40° de centímetro).
+
cm
+
Un centímetro (10 milímetros).
+
in
+
Una pulgada (2.54 centímetros).
+
pt
+
Un punto (1/72° de pulgada).
+
pc
+
Una pica (12 puntos).
+
mozmm {{non-standard_inline}}
+
Una unidad experimental que intenta generar exactamente un milímetro, sin importar el tamaño de resolución de la pantalla. Esto raramente será lo que se desea, pero podría ser útil para dispositivos móviles, en particular.
+
+ +

Unidades CSS y puntos por pulgada (dots-per-inch)

+ +

La unidad in no representa una pulgada física en pantalla, sino 96px. Esto significa que sin importar la densidad de píxeles real en pantalla, se asume que serán 96ppp. En dispositivos con mayor densidad de píxeles, 1in será menor que una pulgada física. De forma similar, mm, cm, y pt no son longitudes absolutas.

+ +

Algunos ejemplos específicos:

+ +
    +
  • 1in siempre son 96px,
    • +
  • 3pt siempre son 4px,
    • +
  • 25.4mm siempre son 96px.
    • +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Values', '#lengths', '<length>')}}{{Spec2('CSS3 Values')}}Añadidos ch, rem, vw, vh, vmin, vmax y q
{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}{{Spec2('CSS2.1')}}pt, pc, px son definidos explícitamente (fueron definidos implícitamente en CSS1)
{{SpecName('CSS1', '#length-units', '<length>')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}} 

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1{{ CompatGeckoDesktop("1.0")}}3.03.51.0
ch +

27

+ 		{{ CompatGeckoDesktop("1.0")}}[1]9.020.07.0
ex{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
rem4 (532.3){{ CompatGeckoDesktop("1.9.2")}}9.011.64.1
vh, vw20{{CompatGeckoDesktop("19")}}9.020.06.0
vmin +

20

+ 		{{CompatGeckoDesktop("19")}}9.0[2]20.06.0
vmax26{{CompatGeckoDesktop("19")}}{{CompatNo}}20.0{{CompatVersionUnknown}}
Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}{{CompatUnknown}}{{CompatGeckoDesktop("21")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
mozmm {{non-standard_inline}}{{CompatNo}}{{ CompatGeckoDesktop("2.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
1in siempre es 96ppp{{CompatVersionUnknown}}{{ CompatGeckoDesktop("2.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
q{{CompatNo}}{{CompatGeckoDesktop("49.0")}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
ch{{CompatNo}}{{CompatVersionUnknown}}7.8{{CompatUnknown}}7.1.1
ex{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
rem2.1{{CompatVersionUnknown}}{{CompatUnknown}}12.04.0
vh, vw, vmin{{CompatVersionUnknown}}{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}6.0
vmax1.5{{CompatGeckoMobile("19")}}{{CompatUnknown}}{{CompatNo}}4.0
Longitudes de porcentaje del viewport inválidas en {{cssxref("@page")}}{{CompatUnknown}}{{CompatGeckoMobile("21.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
q{{CompatUnknown}}{{CompatGeckoMobile("49.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] En Gecko 1.0-1.9.0 (Firefox 1.0-3.0) ch era la anchura de 'M', y no funcionaba para las propiedades CSS {{CSSxref("border-width")}} y {{CSSxref("outline-width")}}.

+ +

[2] Internet Explorer implementa esto con el nombre no estándar vm.

diff --git a/files/es/web/css/line-height/index.html b/files/es/web/css/line-height/index.html new file mode 100644 index 0000000000..4d5429ef2c --- /dev/null +++ b/files/es/web/css/line-height/index.html @@ -0,0 +1,125 @@ +--- +title: line-height +slug: Web/CSS/line-height +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías + - para_revisar + - páginas_a_traducir +translation_of: Web/CSS/line-height +--- +
https://developer.mozilla.org/en-US/docs/Web/CSS{{ CSSRef() }}
+/*Keyword value*/
+line-height: normal;
+
+/
+ + + +

Resumen

+ +

La propiedad  CSS line-height establece la altura de una casilla remarcada por líneas. Comúnmente se usa para establecer la distancia entre líneas de texto. A nivel de elementos de bloque, define la altura mínima de las casillas encuadradas por líneas dentro del elemento. En elementos en linea no reemplazables, especifica la altura que se usa para calcular la altura de la casila encuadrada por líneas.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("normal") }}
    • +
  • Aplicable a: todos los elementos.
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: sí
    • +
  • Porcentajes: se refieren a tamaño de la fuente del elemento mismo.
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: para los valores <length> y <percentage>, el valor absoluto, en otro caso, como se especifica.
    • +
+ +

Syntax

+ + + +
/* Keyword value */
+line-height: normal;
+
+/* Unitless values: usa esta cifra multiplicada por el tamaño de fuente
+del elemento */
+line-height: 3.5;
+
+/* <longitud> valores */
+line-height: 3em;
+
+/* <porcentaje> valores */
+line-height: 34%;
+
+/* Valores absolutos */
+line-height: inherit;
+line-height: initial;
+line-height: unset;
+ + + +

Valores

+ +
+
normal 
+
+

Depende del agente del usuario. Los navegadores de escritorio (incluido Firefox) usan un valor por defecto de apenas 1.2, dependiendo del font-family del elemento.

+
+
<número> 
+
El valor utilizado es este <número> sin unidades multiplicado por el propio tamaño de fuente del elemento. El valor calculado es el mismo que el <número> especificado. En la mayoría de los casos, esta es la forma preferida de establecer line-height y evitar resultados inesperados debido a la herencia.
+
<longitud> 
+
La <longitud> especificada se utiliza en el cálculo de la altura de la casilla encuadrada por líneas. Los valores dados en unidades em pueden producir resultados inesperados (ver ejemplo más abajo).
+
<porcentaje> 
+
En relación con el tamaño de fuente del elemento en sí. El valor calculado es este <porcentaje> multiplicado por el tamaño de letra del elemento calculado. Los valores porcentuales pueden producir resultados inesperados (ver el segundo ejemplo a continuación).
+
+ +

Ejemplos

+ +
/* Todas las reglas debajo ofrecen la misma line-height resultante */
+
+div { line-height: 1.2;   font-size: 10pt; }   /* número/unitless */
+div { line-height: 1.2em; font-size: 10pt; }   /* longitud */
+div { line-height: 120%;  font-size: 10pt; }   /* porcentaje */
+div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */
+ +

A menudo es más conveniente establecer el line-height usando {{cssxref("font")}} abreviadamente, como se muestra arriba, pero esto también requiere especificar la propiedad font-family.

+ +

Notas

+ +

Especificaciones

+ + + +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer?
Firefox1
Netscape?
Opera?
Safari?
+ +

Ver también

+ +

{{ Cssxref("font-size") }}

diff --git a/files/es/web/css/linear-gradient()/index.html b/files/es/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..4a68a3b365 --- /dev/null +++ b/files/es/web/css/linear-gradient()/index.html @@ -0,0 +1,261 @@ +--- +title: linear-gradient +slug: Web/CSS/linear-gradient() +tags: + - CSS + - Función CSS + - Imágenes CSS + - Plantilla + - Referencia + - Web + - graficos +translation_of: Web/CSS/linear-gradient() +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La función CSS linear-gradient() crea una imágen la cual representa un degradado lineal de colores. El resultado es un objeto CSS de tipo {{cssxref("<gradient>")}}, que es una forma especial de {{cssxref("<image>")}}.

+ +

{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}

+ +

Cómo cualquier otro degradado, un degradado lineal no tiene dimensiones intrínsecas; es decir,  no tiene un tamaño natural o predefinido, ni una relación de aspecto. Su tamaño concreto se ajustará al del elemento al cual se le aplica.

+ +

Los gradientes lineales están definidos por un eje, la línea gradiente, donde cada punto representa el inicio de un color diferente. Las líneas perpendiculares a la línea gradiente tienen un único color, para cada punto de la línea gradiente.

+ +

linear-gradient.png

+ +

La línea gradiente está definida por el centro de la caja que contiene la imagen gradiente y por un ángulo. El color del gradiente está definido por diferentes puntos; el punto de inicio, el punto de fin y, en el medio, puntos opcionales de cambio de color.

+ +

El punto de inicio es el punto en la línea gradiente donde empieza el color. Está definido por la intersección entre la línea gradiente y su perpendicular, pasando por la esquina del contenedor en el mismo cuadrante.

+ +

De forma similar, el punto de fin es el punto de la línea gradiente donde se alcanza el final del color. También está definido por la intersección entre la línea gradiente y la línea perpendicular generada por la esquina más cercana del contenedor, pero es más fácil encontrarla como la simetría del punto de inicio, cuando el punto de reflección coincide con el centro de la caja contenedora.

+ +

Estas definiciones algo complejas de los puntos de inicio y fin nos llevan a una propiedad interesante llamda magic corners (esquinas mágicas): La esquina más cercana de los puntos de inicio y fin, tienen el mismo color que su respectivos puntos de inicio y fin.

+ +

Se puede especificar más que solamente los colores de los puntos de inicio y fin. Definiendo colores adicionales en los puntos de cambio en la línea gradiente, el desarrollador web puede crear una transición más personalizada entre los colores de inicio y fin, o generar un gradiente de múltiples colores.

+ +

La sintaxis de la función linear-gradient no permite la repetición de gradientes, pero usando puntos de cambio de color, se puede generar un efecto similar. Para una repetición de gradientes real, puede usar la propiedad CSS {{ Cssxref("repeating-linear-gradient") }}.

+ +

When the position of a color-stop point is implicitly defined, it is placed half-way between the point that precedes it and the one that follows it.  The position can also be explicitly defined by using a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} CSS data type.

+ +
Gradients are defined as CSS <image> data types. Therefore they can be used anywhere in CSS where an image data type is required. But, Gecko currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}.
+For this reason, linear-gradient won't work on {{ Cssxref("background-color") }} and other properties requesting {{cssxref("<color>")}}.
+ +

Syntax

+ +
Formal grammar: linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+                                  \---------------------------------/ \----------------------------/
+                                    Definition of the gradient line         List of color stops
+
+                      where <side-or-corner> = [left | right] || [top | bottom]
+                        and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
+linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
+                                                  finishing red */
+
+linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
+                                                  and finishing red */
+
+ +

Values

+ +
+
<side-or-corner>
+
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.
+ The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.
+
<angle>
+
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.
+
<color-stop>
+
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).
+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
+
+ +

History of the syntax

+ +

The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

+ +
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+
+ +

In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

+ +

An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

+ +
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

+ +

But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

+ +
    +
  • The support of an {{ cssxref("<angle>") }} as an origin, allowing gradients of any direction.
    • +
  • The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.
    • +
+ +

The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

+ +
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

+ +
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+
+ +

This should be the final syntax.

+ +

A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

+ +

Examples

+ +

Gradient at a 45 degree angle

+ +

Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

+ +

lingradexample.png

+ +

Gradient with multiple color stops

+ +

If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

+ +

Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

+ +
A rainbow made from a gradient
+ +
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+
+ +

Repeating a linear gradient

+ +

The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

+ +

Using transparency

+ +
Linear with transparency
+ +
background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));
+ +

Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

+ +

Notes

+ +

If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradient-type', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}
+ +

Browser compatibility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support(on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]
+ {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On any properties that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword)1626.0 (537.27)1012.106.1
+ +

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+ +

[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

+ +

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+ +
linear-gradient(to top left, blue, red);
+ +

is almost the same as:

+ +
-moz-linear-gradient(bottom right, blue, red);
+ +

The legacy syntax, without to, is planned to go away when the prefix is removed.

+ +

Cross-browser gradients

+ +

Considering all prefixes above, here is a gradient from pink to green, top to bottom.

+ +
.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+
+ +

The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

+ +

See also

+ + diff --git a/files/es/web/css/list-style-image/index.html b/files/es/web/css/list-style-image/index.html new file mode 100644 index 0000000000..c41f13541c --- /dev/null +++ b/files/es/web/css/list-style-image/index.html @@ -0,0 +1,72 @@ +--- +title: list-style-image +slug: Web/CSS/list-style-image +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-image +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La imagen de lista (list-style-image) define la imagen que será utilizada como marcador del listado.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
    • +
  • Se aplica a: elementos con 'display: list-item'
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: Sí
    • +
  • Porcentajes: n/a
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: URI absoluta o none
    • +
+ +

Sintaxis

+ +
list-style-image: <uri> | none | inherit
+
+ +

Valores

+ +
+
uri 
+
directorio donde se encuentra la imagen que se utilizará como marcador.
+
+ +

Ejemplos

+ +

HTML

+ +
<ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+</ul>
+
+ +

CSS

+ +
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}
+ +

Result

+ +

{{EmbedLiveSample('Ejemplos')}}

+ +

Especificaciones

+ + + +

Compatibilidad con navegadores

+ +

Ver también

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}

+ +

{{ languages( { "fr": "fr/CSS/list-style-image", "pl": "pl/CSS/list-style-image", "en": "en/CSS/list-style-image" } ) }}

diff --git a/files/es/web/css/list-style-position/index.html b/files/es/web/css/list-style-position/index.html new file mode 100644 index 0000000000..823553b62d --- /dev/null +++ b/files/es/web/css/list-style-position/index.html @@ -0,0 +1,97 @@ +--- +title: list-style-position +slug: Web/CSS/list-style-position +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-position +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La posición de la lista (list-style-position) especifica donde será colocado el marcador de la lista en relación a la caja principal.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("outside", "outside (afuera)") }}
    • +
  • Se aplica a: elementos con 'display: list-item'
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: Sí
    • +
  • Porcentajes: n/a
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: como especificado
    • +
+ +

Sintaxis

+ +
list-style-position: inside | outside | inherit
+
+ +

Valores

+ +
+
outside 
+
el marcador se encuentra fuera de la caja principal.
+
inside 
+
el marcador es la primera caja en línea dentro de la caja principal, después de la cual fluye el resto de los elementos.
+
+ +

Ejemplos

+ +

HTML

+ +
<ul class="one"> List 1
+  <li>List Item 1-1</li>
+  <li>List Item 1-2</li>
+  <li>List Item 1-3</li>
+  <li>List Item 1-4</li>
+</ul>
+<ul class="two"> List 2
+  <li>List Item 2-1</li>
+  <li>List Item 2-2</li>
+  <li>List Item 2-3</li>
+  <li>List Item 2-4</li>
+</ul>
+<ul class="three"> List 3
+  <li>List Item 3-1</li>
+  <li>List Item 3-2</li>
+  <li>List Item 3-3</li>
+  <li>List Item 3-4</li>
+</ul>
+ +

CSS

+ +
.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}
+ +

Result

+ +

{{EmbedLiveSample("Ejemplos","200","420")}}

+ +

Especificaciones

+ + + +

Compatibilidad con navegadores

+ +

Ver también

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}

+ +

{{ languages( { "fr": "fr/CSS/list-style-position", "pl": "pl/CSS/list-style-position", "en": "en/CSS/list-style-position" } ) }}

diff --git a/files/es/web/css/list-style-type/index.html b/files/es/web/css/list-style-type/index.html new file mode 100644 index 0000000000..f118ce0358 --- /dev/null +++ b/files/es/web/css/list-style-type/index.html @@ -0,0 +1,117 @@ +--- +title: list-style-type +slug: Web/CSS/list-style-type +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style-type +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

El {{ Cssxref("list-style-type", "tipo de estilo de lista") }} especifica la apariencia del listado.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("disc", "disco/punto") }}
    • +
  • Se aplica a: elementos con 'display: list-item'
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: Sí
    • +
  • Porcentajes: n/a
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: según se especificó
    • +
+ +

Sintaxis

+ +
 list-style-type:  <std-list-style-name> | {{ Cssxref("none") }} | {{ Cssxref("inherit") }} ;
+
+ +

Valores

+ +
+
<std-list-style-name>
+
un nombre de estilo de lista estándar: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
+
disc
+
un disco.
+
circle
+
un círculo.
+
square
+
un cuadrado.
+
decimal
+
números decimales empezando con 1.
+
decimal-leading-zero
+
números decimales empezando eventualmente por ceros (por ejemplo: 01, 02, 03, ..., 98, 99).
+
lower-roman
+
números romanos en minúscula (i, ii, iii, iv, v, etc.).
+
upper-roman
+
números romanos en mayúscula (I, II, III, IV, V, etc.).
+
lower-greek
+
letras griegas en minúscula alfa/α, beta/β, gamma/γ, ...
+
lower-latin
+
letras ASCII en minúscula (a, b, c, ... z).
+
upper-latin
+
letras ASCII en mayúscula (A, B, C, ... Z).
+
armenian
+
numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, ...).
+
georgian
+
numeración georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...).
+
lower-alpha
+
es igual que lower-latin.
+
upper-alpha
+
es igual que upper-latin.
+
none
+
nada.
+
+ +

Ejemplos

+ +

CSS

+ +
ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* or use the shortcut "list-style": */
+ol.shortcut {
+  list-style: upper-alpha;
+}
+ +

HTML

+ +
<ol class="normal">List 1
+  <li>Hello</li>
+  <li>World</li>
+  <li>What's up?</li>
+</ol>
+
+<ol class="shortcut">List 2
+  <li>Looks</li>
+  <li>Like</li>
+  <li>The</li>
+  <li>Same</li>
+</ol>
+
+ +

Result

+ +

{{EmbedLiveSample("Ejemplos","200","300")}}

+ +

Notas

+ +

Ésta especificación no define el comportamiento en el caso de una lista con más elementos que la cantidad de letras del alfabeto utilizado. Por ejemplo, después de 26 letras, el resultado con lower-latin no es definido (y continuará como: AA, AB, AC,...). Por eso, para listas largas, es recomendable utilizar números.

+ +

Especificaciones

+ + + +

Compatibilidad con navegadores

+ +

Ver también

+ +

{{ Cssxref("list-style") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position") }}

diff --git a/files/es/web/css/list-style/index.html b/files/es/web/css/list-style/index.html new file mode 100644 index 0000000000..bf92a28951 --- /dev/null +++ b/files/es/web/css/list-style/index.html @@ -0,0 +1,82 @@ +--- +title: list-style +slug: Web/CSS/list-style +tags: + - CSS + - 'CSS:Referencias' + - Referencia_CSS + - Todas_las_Categorías +translation_of: Web/CSS/list-style +--- +

{{ CSSRef() }}

+ +

Resumen

+ +

La propiedad de estilo de lista (list-style) permite definir de golpe todos los parámetros: {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, y {{ Cssxref("list-style-position") }}.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
    • +
  • Se aplica a: elementos con 'display: list-item'
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: N/A
    • +
  • Medio: {{ Cssxref("Media:Visual", "visual") }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales
    • +
+ +

Sintaxis

+ +

list-style: {{ mediawiki.external(' list-style-type || list-style-position || list-style-image ') }} | inherit

+ +

Valores

+ +
+
ver {{ Cssxref("list-style-type", "list-style-type") }}.
+
ver {{ Cssxref("list-style-image", "list-style-image") }}.
+
ver {{ Cssxref("list-style-position", "list-style-position") }}.
+
+ +

Ejemplos

+ +

HTML

+ +
List 1
+<ul class="one">
+  <li>List Item1</li>
+  <li>List Item2</li>
+  <li>List Item3</li>
+</ul>
+List 2
+<ul class="two">
+  <li>List Item A</li>
+  <li>List Item B</li>
+  <li>List Item C</li>
+</ul>
+
+ +

CSS

+ +
.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplos')}}

+ +

Especificaciones

+ + + +

Compatibilidad con navegadores

+ +

Ver también

+ +

{{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-image") }}, {{ Cssxref("list-style-position")}}

diff --git a/files/es/web/css/margin-block-start/index.html b/files/es/web/css/margin-block-start/index.html new file mode 100644 index 0000000000..1ec94d7b76 --- /dev/null +++ b/files/es/web/css/margin-block-start/index.html @@ -0,0 +1,99 @@ +--- +title: margin-block-start +slug: Web/CSS/margin-block-start +translation_of: Web/CSS/margin-block-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS margin-block-start CSS property defines the logical block start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.

+ +
{{EmbedInteractiveExample("pages/css/margin-block-start.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+margin-block-start: 10px;  /* An absolute length */
+margin-block-start: 1em;   /* relative to the text size */
+margin-block-start: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-block-start: auto;
+
+/* Global values */
+margin-block-start: inherit;
+margin-block-start: initial;
+margin-block-start: unset;
+
+ +

Esto corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Se relaciona con {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento. 

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad margin-block-start toma los mismos valores de la propiedad {{cssxref("margin-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-block-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-block-start", "margin-block-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-block-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-block/index.html b/files/es/web/css/margin-block/index.html new file mode 100644 index 0000000000..680b41219d --- /dev/null +++ b/files/es/web/css/margin-block/index.html @@ -0,0 +1,108 @@ +--- +title: margin-block +slug: Web/CSS/margin-block +translation_of: Web/CSS/margin-block +--- +

{{CSSRef}}{{SeeCompatTable}}  

+ +

La propiedad de CSS margin-block define el bloque lógico de inicio y fin de las márgenes de un elemento, que se asigna a las márgenes físicas en función del modo de escritura del elemento, la direccionalidad y la orientación del texto.

+ +
/* <length> values */
+margin-block: 10px 20px;  /* An absolute length */
+margin-block: 1em 2em;   /* relative to the text size */
+margin-block: 5% 2%;    /* relative to the nearest block container's width */
+margin-block: 10px; /* sets both start and end values */
+
+/* Keyword values */
+margin-block: auto;
+
+/* Global values */
+margin-block: inherit;
+margin-block: initial;
+margin-block: unset;
+
+ + + +

Estos valores corresponden a {{CSSxRef("margin-top")}} y  {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} depende de los valores definidos para {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.

+ +

Propiedades que lo constituyen

+ +

Los valores se pueden establecer individualmente como {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. La propiedad de dirección en línea es {{CSSxRef("margin-inline")}} que establece {{CSSxRef("margin-inline-start")}}, y {{CSSxRef("margin-inline-end")}}.

+ +

Sintaxis

+ +

Valores

+ +

La propiedad margin-block toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.

+ +

Definición formal

+ +

{{cssinfo}}

+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Definiendo el comienzo del bloque y el fin de los margenes

+ +

HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

Resultado

+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-block", "margin-block")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-block")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-bottom/index.html b/files/es/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..7d2b61a238 --- /dev/null +++ b/files/es/web/css/margin-bottom/index.html @@ -0,0 +1,139 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef()}}
+ +

Summary

+ +

The effect of the CSS margin-bottom property on the element boxEl margin-bottom CSS  (margen-inferior) es la propiedad de un elemento que establece el espacio requerido en la parte inferior de un elemento. Tambien se permiten valores negativos.

+ +

Esta propiedad no tiene ningun efecto sobre los elementos en linea non-replaced , como {{HTMLElement("tt")}} o {{HTMLElement("span")}}.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("margin-bottom")}}
+ +
margin-bottom: 10px;        /* Una longitud absoluta (sin redimension) */
+margin-bottom: 1em;         /* Una longitud en relacion con el tamaño del texto */
+margin-bottom: 5%;          /* Un margen respecto al ancho de su objeto padre (el que lo contiene)  */
+margin-bottom: auto;
+
+margin-bottom: inherit; /*margen heredado*/
+
+ +

Values

+ +
+
<length>
+
Specifies a fixed width. See {{cssxref("<length>")}} for possible values.
+
<percentage>
+
A {{cssxref("<percentage>")}} always relative to the width of the containing block.
+
auto
+
See {{cssxref("margin")}}.
+
+ +

Examples

+ +
.content { margin-bottom:   5%; }
+.sidebox { margin-bottom: 10px; }
+.logo    { margin-bottom: -5px; }
+#header  { margin-bottom:  1em; }
+
+ + + +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-margin', 'margin-bottom')}}{{Spec2('CSS3 Box')}}No significant change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}Defines margin-bottom as animatable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}Removes its effect on inline elements.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/es/web/css/margin-inline-end/index.html b/files/es/web/css/margin-inline-end/index.html new file mode 100644 index 0000000000..2ce32be63e --- /dev/null +++ b/files/es/web/css/margin-inline-end/index.html @@ -0,0 +1,98 @@ +--- +title: margin-inline-end +slug: Web/CSS/margin-inline-end +translation_of: Web/CSS/margin-inline-end +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS margin-inline-end define el margen final lógico en línea de un elemento, que se asigna a un margen físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. En otras palabras, corresponde a las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+margin-inline-end: 10px;   /* An absolute length */
+margin-inline-end: 1em;    /* relative to the text size */
+margin-inline-end: 5%;     /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-end: auto;
+
+/* Global values */
+margin-inline-end: inherit;
+margin-inline-end: initial;
+margin-inline-end: unset;
+
+ +

Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-start")}}, que define las otras márgenes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad margin-inline-end toma los mismos valores de la propiedad {{cssxref("margin-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-end: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-inline-end", "margin-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-inline-end")}}

+ +

Mira también

+ +
    +
  • {{cssxref("margin-inline-start")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-inline-start/index.html b/files/es/web/css/margin-inline-start/index.html new file mode 100644 index 0000000000..c0f734b017 --- /dev/null +++ b/files/es/web/css/margin-inline-start/index.html @@ -0,0 +1,96 @@ +--- +title: margin-inline-start +slug: Web/CSS/margin-inline-start +translation_of: Web/CSS/margin-inline-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

The margin-inline-start define el margen de inicio en línea lógico de un elemento, que se asigna a un margen físico según el modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a la las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, o {{cssxref("margin-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +
{{EmbedInteractiveExample("pages/css/margin-inline-start.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+margin-inline-start: 10px;  /* An absolute length */
+margin-inline-start: 1em;   /* relative to the text size */
+margin-inline-start: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-inline-start: auto;
+
+/* Global values */
+margin-inline-start: inherit;
+
+ +

Se relaciona con {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, and {{cssxref("margin-inline-end")}}, que define las otras márgenes del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad margin-inline-start toma los mismos valores de la propiedad {{cssxref("margin-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  margin-inline-start: 20px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-inline-start", "margin-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-inline-start")}}

+ +

Mira también

+ +
    +
  • {{cssxref("margin-inline-end")}}
    • +
  • Las propiedades físicas mapeadas: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, y {{cssxref("margin-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-inline/index.html b/files/es/web/css/margin-inline/index.html new file mode 100644 index 0000000000..9bff11e577 --- /dev/null +++ b/files/es/web/css/margin-inline/index.html @@ -0,0 +1,96 @@ +--- +title: margin-inline +slug: Web/CSS/margin-inline +translation_of: Web/CSS/margin-inline +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS margin-inline define los márgenes lógicos de inicio y final en línea de un elemento, que se asignan a márgenes físicos según el modo de escritura, la direccionalidad y la orientación del texto del elemento.

+ +
/* Valores <largo> */
+margin-inline: 10px 20px;  /* Un largo absoluto */
+margin-inline: 1em 2em;    /* relativo al tamaño del texto */
+margin-inline: 5% 2%;      /* relativo al ancho del container del bloque más cercano */
+margin-inline: 10px;       /* settear tanto el valor inicial como el final*/
+
+/* Valores keyword */
+margin-inline: auto;
+
+/* Valores globales */
+margin-inline: inherit;
+margin-inline: initial;
+margin-inline: unset;
+
+ +

Estos valores corresponden a las propiedades {{CSSxRef("margin-top")}} y {{CSSxRef("margin-bottom")}}, o {{CSSxRef("margin-right")}}, y {{CSSxRef("margin-left")}} dependiendo de los valores definidos por {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, y {{CSSxRef("text-orientation")}}.

+ +

Los valores pueden ser establecidos indibidualmente como {{CSSxRef("margin-inline-start")}} y {{CSSxRef("margin-inline-end")}}. La propiedad de dirección de bloque es {{CSSxRef("margin-block")}} que establece {{CSSxRef("margin-block-start")}}, y {{CSSxRef("margin-block-end")}}.

+ +

Sintaxis

+ +

Valores

+ +

La propiedad margin-inline toma los mismos valores de la propiedad {{CSSxRef("margin-left")}}.

+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div>
+  <p class="exampleText">Texto de ejemplo</p>
+</div>
+
+ +

Contenido CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-margin-inline", "margin-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

{{CSSInfo}}

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.margin-inline")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{CSSxRef("margin-top")}}, {{CSSxRef("margin-right")}}, {{CSSxRef("margin-bottom")}}, y {{CSSxRef("margin-left")}}
    • +
  • {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
    • +
diff --git a/files/es/web/css/margin-right/index.html b/files/es/web/css/margin-right/index.html new file mode 100644 index 0000000000..7d7f2b6486 --- /dev/null +++ b/files/es/web/css/margin-right/index.html @@ -0,0 +1,26 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +translation_of: Web/CSS/margin-right +--- +

Definicion

+

El margen derecho de propiedad establece el margen derecho de un elemento.

+
    +
  • Nota: Los valores negativos son permitidas.
    • +
  • Heredado: No.
    • +
+

Sintaxis JavaScript

+

CSS propiedades también se puede cambiar dinámicamente con una JavaScript. Scripting Sintaxis: object.style.marginRight="10px"

+

Ejemplo

+
h1
+{
+margin-right: 10px
+}
+h2
+{
+margin-right: -20px
+}
+
+
    +
  • Fuente: []
    • +
diff --git a/files/es/web/css/margin/index.html b/files/es/web/css/margin/index.html new file mode 100644 index 0000000000..bd0acd9524 --- /dev/null +++ b/files/es/web/css/margin/index.html @@ -0,0 +1,214 @@ +--- +title: margin +slug: Web/CSS/margin +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS margin establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen:  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }} y {{ cssxref("margin-left") }}.

+ +

También se permiten valores negativos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Aplica a todos los cuatro lados */
+margin: 1em;
+
+/* Vertical | Horizontal */
+margin: 5% auto;
+
+/* Arriba | Horizontal | Abajo */
+margin: 1em auto 2em;
+
+/* Arriba | Derecha | Abajo | Izquierda */
+margin: 2px 1em 0 auto;
+
+/* Valores globales */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

Valores

+ +

Acepta uno, dos , tres  o cuatro valores de los siguientes:

+ +
+
<length>
+
Especifica un ancho fijo. Valores negativos son permitidos. Mira {{cssxref("<length>")}} para conocer las posibles unidades.
+
<percentage>
+
Un {{cssxref("<percentage>")}} relativo al ancho del bloque contenedor. Se permiten valores negativos.
+
auto
+
auto es reemplazado por algún valor apropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.
+ div { width:50%;  margin:0 auto; } centrará el div horizontalmente.
+
+ +
    +
  • Un único valor aplicará para todos los cuatro lados.
    • +
  • Dos valores aplicarán: El primer valor para arriba y abajo, el segundo valor para izquierda y derecha.
    • +
  • Tres  valores aplicarán: El primero para arriba, el segundo para izquierda y derecha, el tercero para abajo.
    • +
  • Cuatro valores aplicarán en sentido de las manecillas del reloj empezando desde arriba. (Arriba, derecha, abajo, izquierda)
    • +
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo simple

+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example') }}

+ +

Otro ejemplo

+ +
margin: 5%;                /* 5% para todos los lados */
+
+margin: 10px;              /* 10px para todos los lados */
+
+margin: 1.6em 20px;        /* 1.6em arriba y abajo, 20px izquierda y derecha */
+
+margin: 10px 3% 1em;       /* 10px arriba, 3% izquierda y derecha, 1em abajo */
+
+margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */
+
+margin: 1em auto;          /* 1em arriba y abajo, centrado horizontalmente */
+
+margin: auto;              /* 0px de margen vertical, centrado horizontalmente */
+
+ +

Centrado horizontal con  margin: 0 auto;

+ +

Para centrar algo horizontalmente en navegadores modernos, usa display: flex; justify-content: center; .

+ +

Sin embargo, en navegadores antiguos como IE8-9, flexbox no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa margin: 0 auto;

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defines margin as animatable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Initial definition
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

 

+ +

Ver también

+ + diff --git a/files/es/web/css/max-block-size/index.html b/files/es/web/css/max-block-size/index.html new file mode 100644 index 0000000000..5707a6ce0f --- /dev/null +++ b/files/es/web/css/max-block-size/index.html @@ -0,0 +1,178 @@ +--- +title: max-block-size +slug: Web/CSS/max-block-size +translation_of: Web/CSS/max-block-size +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS max-block-size especifica el tamaño máximo de un elemento en la dirección opuesta a la de la dirección de escritura según lo especificado por {{cssxref("writing-mode")}}. Esto es, si la dirección de escritura es horizontal, entonces max-block-size es equivalente a {{cssxref("max-height")}}; si la dirección de escritura es vertical, max-block-size es lo mismo que {{cssxref("max-width")}}.

+ +

La longitud máxima de la otra dimensión se especifica usando la propiedad {{cssxref("max-inline-size")}}.

+ +

Esto es útil porque max-width siempre se utiliza para tamaños horizontales y max-height siempre se usa para tamaños verticales, y si necesitas establecer longitudes en función del tamaño del contenido del texto, debes poder hacerlo con la dirección de escritura en mente.

+ +

En cualquier momento usarías normalmente max-height o max-width, en su lugar deberías usar max-block-sizepara establecer el máximo "height" del contenido (even though this may not be a vertical value) y max-inline-size para establecer el máximo "width" del contenido (aunque esto puede ser más bien vertical en lugar de horizontal). Mira el {{SectionOnPage("/en-US/docs/Web/CSS/writing-mode", "Example")}}, que muestra los diferentes modos de escritura en acción.

+ +
{{EmbedInteractiveExample("pages/css/max-block-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+max-block-size: 300px;
+max-block-size: 25em;
+
+/* <percentage> values */
+max-block-size: 75%;
+
+/* Keyword values */
+max-block-size: none;
+max-block-size: max-content;
+max-block-size: min-content;
+max-block-size: fit-content;
+max-block-size: fill-available;
+
+/* Global values */
+max-block-size: inherit;
+max-block-size: initial;
+max-block-size: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

El valor de la propiedad max-block-size puede ser cualquier valor legal de las popiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}:

+ +

{{page("/en-US/docs/Web/CSS/max-width", "Values")}}

+ +

Cómo writing-mode afecta la directionalidad

+ +

Los valores de writing-mode afecta la asignación de max-block-size a max-width o max-height como sigue:

+ + + + + + + + + + + + + + + + + + +
Valores de writing-modemax-block-size es equivalente a
horizontal-tb, lr {{deprecated_inline}}, lr-tb {{deprecated_inline}}, rl {{deprecated_inline}}, rb {{deprecated_inline}}, rb-rl {{deprecated_inline}}{{cssxref("max-height")}}
vertical-rl, vertical-lr, sideways-rl {{experimental_inline}}, sideways-lr {{experimental_inline}}, tb {{deprecated_inline}}, tb-rl {{deprecated_inline}}{{cssxref("max-width")}}
+ +
+

The writing-mode values sideways-lr and sideways-rl were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.

+
+ +
+

The writing modes lr, lr-tb, rl, rb, and rb-tl are no longer allowed in {{Glossary("HTML")}} contexts; they may only be used in {{Glossary("SVG")}} 1.x contexts.

+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

En este ejemplo, el mismo texto (las oraciones iniciales del {{interwiki("wikipedia", "Herman Melville", "Herman Melville's")}} novel {{interwiki("wikipedia", "Moby-Dick")}}) es presentado en ambos modos de escritura: horizontal-tb y vertical-rl.

+ +

Todo lo demás sobre las dos cajas es idéntico, incluidos los valores utilizados para {{cssxref("max-block-size")}}.

+ +

Contenido HTML 

+ +

El HTML simplemente establece los dos bloques {{HTMLElement("div")}} que serán presentados con su {{cssxref("writing-mode")}} estableciendo el uso de las clases horizontal o vertical. Ambas cajas comparten la clase standard-box, que simplemente establece colores, relleno, y sus respectivos valores de max-block-size.

+ +
<p>Writing mode <code>horizontal-tb</code> (the default):</p>
+<div class="standard-box horizontal">
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+</div>
+
+<p>Writing mode <code>vertical-rl</code>:</p>
+<div class="standard-box vertical">
+  Call me Ishmael. Some years ago—never mind how
+  long precisely—having little or no money in my
+  purse, and nothing particular to interest me on
+  shore, I thought I would sail about a little and see
+  the watery part of the world. It is a way I have of
+  driving off the spleen and regulating the
+  circulation.
+</div>
+ +

Contenido CSS 

+ +

El CSS está definido por tres clases. La primera, standard-box, es aplicada a ambas cajas, como se ve arriba. Proporciona un estilo estándar que incluye los tamaños de bloque mínimo y máximo, tamaño de fuente, etc.

+ +

Después que vienen las clases horizontal y vertical, que agregan las propiedades {{cssxref("writing-mode")}} para la caja, con el valor establecido para horizontal-tb o vertical-rl dependiendo en qué clase se usa.

+ +
.standard-box {
+  padding: 4px;
+  background-color: #abcdef;
+  color: #000;
+  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
+  max-block-size: 160px;
+  min-block-size: 100px;
+}
+
+.horizontal {
+  writing-mode: horizontal-tb;
+}
+
+.vertical {
+  writing-mode: vertical-rl;
+}
+
+ +

Resultado

+ +

Las dos cajas se ven así al final:

+ +

{{EmbedLiveSample("Ejemplo", 600, 850)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-max-block-size", "max-block-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.max-block-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}
    • +
  • Configuración del tamaño máximo de la otra dirección: {{cssxref("max-inline-size")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/max-height/index.html b/files/es/web/css/max-height/index.html new file mode 100644 index 0000000000..01c24aa995 --- /dev/null +++ b/files/es/web/css/max-height/index.html @@ -0,0 +1,94 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/max-height +--- +

 

+ +

<< Volver

+ +

Resumen

+ +

La propiedad max-height se utiliza para definir la altura máxima de un elemento dado. Impide que el valor de la {{ Cssxref("height", "altura") }} pueda llegar a ser más grande que la de max-height.

+ +
    +
  • {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
    • +
  • Se aplica a : elementos de bloque o remplazados
    • +
  • {{ Cssxref("inheritance", "Valor heredado") }}: no
    • +
  • Porcentajes: se refiere a la altura del bloque contenedor.
    • +
  • Medio: {{ Xref_cssvisual() }}
    • +
  • {{ Cssxref("computed value", "Valor calculado") }}:
    • +
+ +

Sintaxis

+ +
max-height: <length> | <percentage>
+
+ +

Valores

+ +
    +
  • none : la {{ Cssxref("height", "altura") }} no tiene valor máxima.
    • +
  • length : puede ser en px, cm, in (píxel, centímetro o inches)
    • +
  • percentage : % especificado como un porcentaje de la altura del bloque contenedor.
    • +
+ +

Ejemplos

+ +
table { max-width: 75%; }
+
+form { max-width: none; }
+
+ +

Notas

+ +

{{ Cssxref("max-height") }} sobrescribe {{ Cssxref("height") }}, pero no {{ Cssxref("min-height") }}.

+ +

Especificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer6
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}

+ +

 

+ +
+

Categorías

+ +

Interwiki Languages

+ +
 
+
+ +

{{ languages( { "en": "en/CSS/max-height", "fr": "fr/CSS/max-height" } ) }}

diff --git a/files/es/web/css/max-inline-size/index.html b/files/es/web/css/max-inline-size/index.html new file mode 100644 index 0000000000..b5406c7dc6 --- /dev/null +++ b/files/es/web/css/max-inline-size/index.html @@ -0,0 +1,94 @@ +--- +title: max-inline-size +slug: Web/CSS/max-inline-size +translation_of: Web/CSS/max-inline-size +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS  max-inline-size define el tamaño máximo horizontal o vertical de un elemento bloque dependiendo del modo de escritura. Esto corresponde a las propiedades {{cssxref("max-width")}} o {{cssxref("max-height")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}. Si el modo de escritura esta orientado verticalmente, el valor de max-inline-size relacionado al alto máximo del elemento, de lo contrario, se relaciona con el ancho máximo del elemento. Se relaciona con {{cssxref("max-block-size")}}, que define la otra dimensión del elemento.

+ +
{{EmbedInteractiveExample("pages/css/max-inline-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+max-inline-size: 300px;
+max-inline-size: 25em;
+
+/* <percentage> values */
+max-inline-size: 75%;
+
+/* Keyword values */
+max-inline-size: none;
+max-inline-size: max-content;
+max-inline-size: min-content;
+max-inline-size: fit-content;
+max-inline-size: fill-available;
+
+/* Global values */
+max-inline-size: inherit;
+max-inline-size: initial;
+max-inline-size: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad max-inline-size toma los mismos valores como las propiedades {{cssxref("max-width")}} y {{cssxref("max-height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<p class="exampleText">Example text</p>
+
+ +

Contenido CSS 

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 100%;
+  max-inline-size: 200px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-max-inline-size", "max-inline-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.max-inline-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("max-width")}} y {{cssxref("max-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/max-width/index.html b/files/es/web/css/max-width/index.html new file mode 100644 index 0000000000..55fa03d4ee --- /dev/null +++ b/files/es/web/css/max-width/index.html @@ -0,0 +1,158 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - Referencia_CSS +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

The max-width CSS property sets the maximum width of an element. It prevents the used value of the {{ Cssxref("width") }} property from becoming larger than the value specified by max-width.

+ +
/* <length> value */
+max-width: 3.5em;
+
+/* <percentage> value */
+max-width: 75%;
+
+/* Keyword values */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* Global values */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

{{ Cssxref("max-width") }} overrides {{cssxref("width")}}, but {{ Cssxref("min-width") }} overrides {{ Cssxref("max-width") }}.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
{{cssxref("<length>")}}
+
The maximum width, expressed as a {{cssxref("<length>")}}.
+
{{cssxref("<percentage>")}}
+
The maximum width, expressed as a {{cssxref("<percentage>")}} of the containing block's width.
+
+ +

Keyword values

+ +
+
none
+
The width has no maximum value.
+
max-content{{experimental_inline()}}
+
The intrinsic preferred width.
+
min-content{{experimental_inline()}}
+
The intrinsic minimum width.
+
fill-available{{experimental_inline()}}
+
The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, available.)
+
fit-content{{experimental_inline()}}
+
The same as max-content.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

In this example, the "child" will be either 150 pixels wide or the width of the "parent," whichever is smaller:

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

The fit-content value can be used to set the width of an element based on the intrinsic size required by its content:

+ +
+ + +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defines max-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.max-width")}}

+ +

See also

+ +
    +
  • {{ Cssxref("width") }}, {{ Cssxref("min-width") }}, {{ Cssxref("max-height") }}
    • +
  • The box model, {{ Cssxref("box-sizing") }}
    • +
diff --git a/files/es/web/css/media_queries/index.html b/files/es/web/css/media_queries/index.html new file mode 100644 index 0000000000..630dc94b9c --- /dev/null +++ b/files/es/web/css/media_queries/index.html @@ -0,0 +1,107 @@ +--- +title: Media queries +slug: Web/CSS/Media_Queries +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

Las consultas de medios le permiten adaptar su sitio o aplicación dependiendo de la presencia o el valor de varias características y parámetros del dispositivo.

+ +

Son un componente clave del responsive design. Por ejemplo, una consulta de medios puede reducir el tamaño de la fuente en dispositivos pequeños, aumentar el relleno entre párrafos cuando se ve una página en modo vertical, o aumentar el tamaño de los botones en las pantallas táctiles.

+ +

En CSS, use la {{cssxref ("@ media")}} at-rule para aplicar condicionalmente parte de una hoja de estilo en función del resultado de una consulta de medios. Use {{cssxref ("@ import")}} para aplicar condicionalmente una hoja de estilo completa.

+ +

 

+ +

Consultas de medios en HTML

+ +

En HTML, las consultas de medios se pueden aplicar a varios elementos:

+ +

     En el atributo {{HTMLElement ("link")}} {{htmlattrxref ("media", "link")}} del elemento, definen los medios a los que se debe aplicar un recurso vinculado (normalmente CSS).
+      En el atributo {{HTMLElement ("source")}} {{htmlattrxref ("media", "source")}} del elemento, definen los medios a los que se debe aplicar esa fuente. (Esto solo es válido dentro de los elementos {{HTMLElement ("picture")}}.)
+      En el atributo {{HTMLElement ("style")}} del elemento {{htmlattrxref ("media", "style")}}, definen los medios a los que se debe aplicar el estilo.

+ +

 

+ +

Consultas de medios en JavaScript

+ +

 

+ +

En JavaScript puede usar el método {{domxref ("Window.matchMedia ()")}} para probar la ventana contra una consulta de medios. También puede usar {{domxref ("MediaQueryList.addListener ()")}} para recibir notificaciones cada vez que cambie el estado de una consulta. Con esta funcionalidad, su sitio o aplicación puede responder a los cambios en la configuración, orientación o estado del dispositivo.

+ +

Puede obtener más información sobre el uso programático de consultas de medios en Pruebas de consultas de medios.

+ +

Referencias

+ +

At-rules

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

Guides

+ +
+
Usando consultas de medios
+
Presenta las consultas de los medios, su sintaxis y los operadores y las funciones de los medios que se utilizan para construir expresiones de consulta de los medios.
+
Probando las consultas de medios programáticamente
+
Describe cómo usar las consultas de medios en su código de JavaScript para determinar el estado de un dispositivo, y para configurar escuchas que notifican su código cuando cambian los resultados de las consultas de medios (como cuando el usuario gira la pantalla o cambia el tamaño del navegador).
+
Usando consultas de medios en accesibilidad
+
Conozca cómo Media Queries puede ayudar a los usuarios a comprender mejor su sitio web.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilidades con navegadores

+ +

@media rule

+ + + +

{{Compat("css.at-rules.media")}}

+ +

Ver también

+ +
    +
  • Use {{cssxref ("@ apoya")}} para aplicar estilos que dependen del soporte del navegador para varias tecnologías CSS.
    • +
diff --git a/files/es/web/css/min()/index.html b/files/es/web/css/min()/index.html new file mode 100644 index 0000000000..52f81e5765 --- /dev/null +++ b/files/es/web/css/min()/index.html @@ -0,0 +1,120 @@ +--- +title: min() +slug: Web/CSS/min() +tags: + - CSS + - CSS Function + - CSS Grid + - Calculate + - Compute + - Function + - Layout + - Reference + - min +translation_of: Web/CSS/min() +--- +
{{CSSRef}}
+ +

La función CSS min() permite establecer el valor mas pequeño (mas negativo) de una lista de expresiones separadas por coma como el valor de una propiedad CSS. La función min() puede ser usada donde quiera que  {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, o {{CSSxRef("<integer>")}} esté permitido.

+ +
{{EmbedInteractiveExample("pages/css/function-min.html")}}
+ + + +

En el primer ejemplo anterior, el ancho será al menos 200px, pero será menor si el viewport es menor de 400px de ancho (en tal caso 1vw sería 4px, así 50vw sería 200px). En otras palabras, el ancho máximo es 200px. Piensa en el valor de  min() como el máximo valor que una propiedad puede tener.

+ +

Sintaxis

+ +

La funcion min() toma uno o mas expresiones separadas por coma como sus parametros, y usa el valor mas pequeño de esas expresiones como su valor.

+ +

Las expresiones pueden ser expresiones matemáticas (usando operadores aritmeticos), valores literales, u otras expresiones, tales como {{CSSxRef("attr", "attr()")}}, que se evaluan a un tipo de argumento válido (like {{CSSxRef("<length>")}}).

+ +

Se pueden usar distintas unidades de medida para cada valor en la expresion, si se desea. Tambien puede usar parentesis para establecer orden de percedencia si lo requiere.

+ +
    +
  • Expresiones matematicas que involucran porcentajes para los anchos y altos en columnas de tabla, grupos de columnas de tabla, filas de tablas, y celdas de tablas en ambos layout fijo y tablas pueden ser tratados como si se hubiera especificado auto
    • +
  • Es permitido anidar  max() y otros funciones min() como valores de expresiones. Las expresiones son completamente matematicas asi que puede usarse adicion directa, resta, multiplicacion y division sin usar la funcion calc() en si.
    • +
  • La expresion pueden ser valores combinando los operadores de adicion ( + ), resta ( - ), multiplicacion ( * ) y division ( / ) , aplicando las reglas estandares de precedencia de operadores. Asegurese de poner un espacio en cada lado de los operandos de + y -. Los oprandos en la expresion pueden ser cualquier valor de sintaxis <length>.
    • +
  • Usted puede (y con frecuencia necesitara) combinar los valores  min() y max(), o usar min() dentro de las funciones  clamp() o calc().
    • +
  • Usted puede proveer mas de 2 argumentos, si tiene multiples restricciones para aplicar.
    • +
+ +

Sintaxis formal

+ +
{{CSSSyntax}}
+ +

Probemas de accesibilidad

+ +

Cuando use min() para establecer el maximo valor de fonr size, asegurese de que la fuente todavia podra ser escalada por lo menos al 200% para mas legibilidad (sin tecnologia asistente como la funcion de zoom).

+ + + +

Ejemplos

+ +

Setting a maximum size for a label and input

+ +

Otro caso de uso para las funciones CSS es establecer la maxima longitud en controles enformularios responsive: habilitando el ancho de los labels y los inputs para encogerse como lo hace el ancho del formulario

+ +

Veamos algo de CSS:

+ +
input, label {
+  padding: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+  width: min(40%, 400px);
+  background-color: pink;
+}
+
+form {
+  margin: 4px;
+  border: 1px solid black;
+  padding: 4px;
+}
+
+ +

Aquí, el formulario en si mismo, junto con el margen, borde y padding, será de 100% del ancho de su padre. Declaramos el input y el label para que sean menores ente el 40% del ancho del formulario hasta el padding o de 400px, el que sea menor. En otras palabras, lo mas ancho que el label y el input pueden ser es de 400px. Lo mas estrecho que serán es 40% del ancho del formulario, el cual en pantallas de relojes inteligentes es muy pequeño.

+ +
<form>
+  <label>Escribe algo:</label>
+  <input type="text">
+</form>
+
+ +

{{EmbedLiveSample("Setting_a_maximum_size_for_a_label_and_input", "100%", "110")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS4 Values", "#calc-notation", "min()")}}{{Spec2("CSS4 Values")}}Definición inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.types.min")}}

+ +

Ver también

+ +
    +
  • {{CSSxRef("calc", "calc()")}}
    • +
  • {{CSSxRef("clamp", "clamp()")}}
    • +
  • {{CSSxRef("max", "max()")}}
    • +
  • CSS Values
    • +
diff --git a/files/es/web/css/min-block-size/index.html b/files/es/web/css/min-block-size/index.html new file mode 100644 index 0000000000..91847cba2d --- /dev/null +++ b/files/es/web/css/min-block-size/index.html @@ -0,0 +1,94 @@ +--- +title: min-block-size +slug: Web/CSS/min-block-size +translation_of: Web/CSS/min-block-size +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS  min-block-size define el tamaño mínimo horizontal o vertical de un elemento de bloque, dependiendo de los modos de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o a la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/min-block-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+min-block-size: 100px;
+min-block-size: 5em;
+
+/* <percentage> values */
+min-block-size: 10%;
+
+/* Keyword values */
+min-block-size: max-content;
+min-block-size: min-content;
+min-block-size: fit-content;
+min-block-size: fill-available;
+
+/* Global values */
+min-block-size: inherit;
+min-block-size: initial;
+min-block-size: unset;
+
+ +

Si el modo de escritura es verticalmente orientado, el valor de min-block-size se relaciona con el mínimo ancho del elemento; de otra manera, se relaciona al mínimo alto del elemento. Una propiedad relacionada es {{cssxref("min-inline-size")}}, que define la otra dimensión del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad min-block-size toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<p class="exampleText">Example text</p>
+
+ +

Contenido CSS 

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  min-block-size: 200px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-min-block-size", "min-block-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.min-block-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/min-height/index.html b/files/es/web/css/min-height/index.html new file mode 100644 index 0000000000..d61f0edf4e --- /dev/null +++ b/files/es/web/css/min-height/index.html @@ -0,0 +1,72 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad min-height se utiliza para definir la altura mínima de un elemento dado. Impide que el valor de la propiedad {{ Cssxref("height") }} llegue a ser más pequeña que la especificada en la altura mínima (min-height).

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
{{csssyntax}}
+
+ +

Values

+ +
    +
  • length : puede ser en px, cm, in (píxel, centímetro o inches)
    • +
  • percentage : % especificado como un porcentaje de la altura del bloque contenedor.
    • +
+ +

Examples

+ +
table {min-height: 75%;}
+
+form {min-height: 0;}
+
+ +

Notes

+ +

{{ Cssxref("min-height") }} tiene prioridad sobre los valores {{ Cssxref("max-height") }} y {{ Cssxref("height") }}.

+ +

Esdpecificaciones

+ + + +

Compatibilidades

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer6
Netscape6
Opera3.5
+ +

Ver también

+ +

{{ Cssxref("Modelo de caja", "modelo de caja") }}, {{ Cssxref("width", "ancho") }}, {{ Cssxref("-moz-box-sizing", "tamaño de cajas -Mozilla") }}, {{ Cssxref("min-height", "altura mínima") }}, {{ Cssxref("max-height", "altura máxima") }}

diff --git a/files/es/web/css/min-inline-size/index.html b/files/es/web/css/min-inline-size/index.html new file mode 100644 index 0000000000..bf650c31a7 --- /dev/null +++ b/files/es/web/css/min-inline-size/index.html @@ -0,0 +1,95 @@ +--- +title: min-inline-size +slug: Web/CSS/min-inline-size +translation_of: Web/CSS/min-inline-size +--- +
{{CSSRef}}{{SeeCompatTable}} 
+ +

La propiedad de CSS  min-inline-size define el tamaño mínimo horizontal o vertical de los elementos en bloque, dependiendo del modo de escritura. Esto corresponde ya sea a la propiedad {{cssxref("min-width")}} o la propiedad {{cssxref("min-height")}}, dependiendo del valor de {{cssxref("writing-mode")}}.

+ +
{{EmbedInteractiveExample("pages/css/min-inline-size.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+min-inline-size: 100px;
+min-inline-size: 5em;
+
+/* <percentage> values */
+min-inline-size: 10%;
+
+/* Keyword values */
+min-inline-size: max-content;
+min-inline-size: min-content;
+min-inline-size: fit-content;
+min-inline-size: fill-available;
+
+/* Global values */
+min-inline-size: inherit;
+min-inline-size: initial;
+min-inline-size: unset;
+
+ +

Si el modo de escritura es verticalmente orientado, el valor de  min-inline-size se relaciona con el mínimo alto del elemento; de otra manera, se relaciona al mínimo ancho del elemento. Una propiedad relacionada es {{cssxref("min-block-size")}}, que define la otra dimensión del elemento.

+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad min-inline-size toma los mismos valores de las propiedades {{cssxref("min-width")}} y {{cssxref("min-height")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<p class="exampleText">Example text</p>
+
+ +

Contenido CSS 

+ +
.exampleText {
+  writing-mode: vertical-rl;
+  background-color: yellow;
+  block-size: 5%;
+  min-inline-size: 200px;
+}
+ +

{{EmbedLiveSample("Ejemplo")}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-min-inline-size", "min-inline-size")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.min-inline-size")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("min-width")}} y {{cssxref("min-height")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
diff --git a/files/es/web/css/min-width/index.html b/files/es/web/css/min-width/index.html new file mode 100644 index 0000000000..efe24d19b1 --- /dev/null +++ b/files/es/web/css/min-width/index.html @@ -0,0 +1,80 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - Referencia_CSS +translation_of: Web/CSS/min-width +--- +

{{ CSSRef() }}

+ +

Sumario

+ +

La propiedad min-width se usa para determinar la anchura mínima de un elemento. Previene que la propiedad {{ Cssxref("width") }} pueda ser inferior que min-width.

+ +
    +
  • {{ Xref_cssinitial() }}: 0
    • +
  • Aplicable a: elementos de tipo bloque.
    • +
  • {{ Xref_cssinherited() }}: no
    • +
  • Porcentajes: se refieren a la anchura del bloque contenedor.
    • +
  • Media: {{ Xref_cssvisual() }}
    • +
  • {{ Xref_csscomputed() }}:
    • +
+ +

Sintaxis

+ +

min-width: <longitud> | <porcentaje> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available

+ +

Valores

+ +
    +
  • length : puede ser expresado en px, cm, in
    • +
  • percentage : expresado con "%" es un porcentaje del ancho del elemento contenedor.
    • +
  • -moz-max-content : el ancho intrínseco preferido {{ Fx_minversion_inline(3) }}
    • +
  • -moz-min-content : el ancho intrínseco mínimo {{ Fx_minversion_inline(3) }}
    • +
  • -moz-available : el ancho del contenedor menos el margen horizontal, borde y padding {{ Fx_minversion_inline(3) }}
    • +
  • -moz-fit-content : igual que -moz-min-content {{ Fx_minversion_inline(3) }}
    • +
+ +

Ejemplos

+ +
table{min-width: 75%;}
+
+form{min-width: 0;}
+
+ +

Notas

+ +

{{ Cssxref("min-width") }} sobrescribe los valores de {{ Cssxref("max-width") }} y {{ Cssxref("width") }}.

+ +

Especificaciones

+ + + +

Compatibilidad entre navegadores

+ + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer6
Netscape6
Opera3.5
+ +

Ver también

+ +

box model, {{ Cssxref("min-height") }}, {{ Cssxref("-moz-box-sizing") }}, {{ Cssxref("width") }}, {{ Cssxref("max-width") }}

diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html new file mode 100644 index 0000000000..eefc519566 --- /dev/null +++ b/files/es/web/css/minmax()/index.html @@ -0,0 +1,214 @@ +--- +title: minmax() +slug: Web/CSS/minmax() +tags: + - CSS + - CSS Grid + - Diseño + - Función CSS + - Referencia + - Rejilla CSS + - Web +translation_of: Web/CSS/minmax() +--- +

La función minmax() en CSS define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS.

+ +
/* valores <ancho no-flexible>, <ancho de la banda> */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* valores <ancho fijo>, <ancho de la banda> */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* valores <ancho no-flexible>, <ancho fijo> */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

Sintáxis

+ +

Una función que toma dos parámetros, min y max.

+ +

Cada parámetro puede ser un valor <length>, <percentage>, <flex> o uno de los valores de las palabras clave max-content, min-content o auto.

+ +

Si max < min, entonces max es ignorado y se trata a minmax(min,max) como min. Como un máximo, un valor {{cssxref("flex_value","<flex>")}} establece el factor flex de una banda; no es válido como un mínimo.

+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una medida no negativa.
+
{{cssxref("<percentage>")}}
+
Un porcentaje no negativo, relativo al tamaño en línea del contenedor de la rejilla en bandas de columna y el tamaño de bloque del contenedor de rejilla en bandas de fila. Si el tamaño del contenedor de la rejilla depende del tamaño de sus bandas, entonces <percentage> debe ser tratado como auto. El {{glossary("user agent")}} puede ajustar las contribuciones del tamaño implícito de la banda al tamaño del contenedor de rejilla y así incrementar el tamaño final de la banda y así incrementar el tamaño final en la cantidad mínima que resultase al respetar el porcentaje.
+
{{cssxref("<flex>")}}
+
Una dimension no-negativa con la unidad fr especificando el factor flex de la banda. Cada banda de tamaño <flex> toma una parte del espacio disponible en proporción a su factor flex.
+
max-content
+
Representa la mayor contribución max-content de los elementos de rejilla que ocupan la banda.
+
min-content
+
Representa la mayor contribución min-content de los elementos de rejilla que ocupan la banda.
+
auto
+
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se especifica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de rejilla que ocupan la banda.
+
+ +

Sintáxis formal

+ +
{{csssyntax}}
+ +

Propiedades CSS

+ +

La función minmax() puede ser usada dentro de: 

+ + + +

Ejemplo

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Elemento tan ancho como el contenido,<br/>
+    pero de máximo 300 píxeles.
+  </div>
+  <div>
+    Elemento con un ancho flexible, pero con un mínimo de 200 píxeles.
+  </div>
+  <div>
+    Elemento inflexible de 150 píxeles de ancho.
+  </div>
+</div>
+ +

Resultado

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}Definición inicial
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("css.properties.grid-template-columns.minmax")}}

+ +

Mira también

+ + + + diff --git a/files/es/web/css/mozilla_extensions/index.html b/files/es/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..8a6f0cb5bc --- /dev/null +++ b/files/es/web/css/mozilla_extensions/index.html @@ -0,0 +1,616 @@ +--- +title: Extensiones CSS de Mozilla +slug: Web/CSS/Mozilla_Extensions +translation_of: Web/CSS/Mozilla_Extensions +--- +
{{CSSRef}}
+ +

Mozilla soporta ciertas extensiones de CSS con el prefijo -moz-.

+ +

Algunas de estas propiedades han sido incluidas en una especificación de CSS en borrador para incluirlas en la recomendación final, pero aún están en proceso experimental. La propiedad final estándar puede ser diferente de la implementación actual con prefijo. Algunas de estas propiedades no estándares solo son aplicables en elementos XUL.

+ +

Cuando se estandarizan y se añade el soporte para la variante sin prefijo, las propiedades prefijadas se abandonan.

+ +

Propiedades estándares prefijadas de Mozilla

+ +
A + +
    +
  • {{Cssxref("-moz-appearance")}}
    • +
+B + +
    +
  • {{Cssxref("-moz-background-inline-policy")}}
    • +
  • {{cssxref("box-sizing", "-moz-box-sizing")}}
    • +
+C D E + +
    +
  • {{Cssxref("clip-path")}} (aplicado en SVG y otros)
    • +
  • {{Cssxref("-moz-column-count")}}
    • +
  • {{Cssxref("-moz-column-fill")}}
    • +
  • {{Cssxref("-moz-column-gap")}}
    • +
  • {{Cssxref("-moz-column-width")}}
    • +
  • {{Cssxref("-moz-column-rule")}}
    • +
  • {{Cssxref("-moz-column-rule-width")}}
    • +
  • {{Cssxref("-moz-column-rule-style")}}
    • +
  • {{Cssxref("-moz-column-rule-color")}}
    • +
+F G + +
    +
  • {{Cssxref("filter")}} (aplicado en SVG y otros)
    • +
  • {{Cssxref("-moz-font-feature-settings")}}
    • +
  • {{cssxref("-moz-font-language-override")}}
    • +
+H + +
    +
  • {{Cssxref("-moz-hyphens")}}
    • +
+I—O + +
    +
  • {{Cssxref("mask")}} (aplicado en SVG y otros)
    • +
+P + +
    +
  • {{Cssxref("pointer-events")}} (aplicado en SVG y otros)
    • +
+Q—T + +
    +
  • {{cssxref("-moz-text-align-last")}}
    • +
  • {{Cssxref("text-decoration-color","-moz-text-decoration-color")}}
    • +
  • {{Cssxref("text-decoration-line","-moz-text-decoration-line")}}
    • +
  • {{Cssxref("text-decoration-style","-moz-text-decoration-style")}}
    • +
+
+ +

Propiedades no estándar prefijadas propietarias de Mozilla (no usar en sitios web)

+ +
A B + +
    +
  • {{Cssxref("-moz-binding")}}
    • +
  • {{Cssxref("-moz-border-bottom-colors")}}
    • +
  • {{Cssxref("-moz-border-end")}}
    • +
  • {{Cssxref("-moz-border-end-color")}}
    • +
  • {{Cssxref("-moz-border-end-style")}}
    • +
  • {{Cssxref("-moz-border-end-width")}}
    • +
  • {{Cssxref("-moz-border-left-colors")}}
    • +
  • {{Cssxref("-moz-border-right-colors")}}
    • +
  • {{Cssxref("-moz-border-start")}}
    • +
  • {{Cssxref("-moz-border-start-color")}}
    • +
  • {{Cssxref("-moz-border-start-style")}}
    • +
  • {{Cssxref("-moz-border-start-width")}}
    • +
  • {{Cssxref("-moz-border-top-colors")}}
    • +
  • {{Cssxref("-moz-box-align")}}
    • +
  • {{Cssxref("-moz-box-direction")}}
    • +
  • {{Cssxref("-moz-box-flex")}}
    • +
  • {{Cssxref("-moz-box-ordinal-group")}}
    • +
  • {{Cssxref("-moz-box-orient")}}
    • +
  • {{Cssxref("-moz-box-pack")}}
    • +
+ +

C—F

+ +
    +
  • {{Cssxref("-moz-float-edge")}}
    • +
  • {{Cssxref("-moz-force-broken-image-icon")}}
    • +
+ +

G H I

+ +
    +
  • {{Cssxref("-moz-image-region")}}
    • +
+ +

J—M

+ +
    +
  • {{Cssxref("-moz-margin-end")}}
    • +
  • {{Cssxref("-moz-margin-start")}}
    • +
+ +

N O

+ +
    +
  • {{cssxref("-moz-orient")}}
    • +
  • {{Cssxref("-moz-outline-radius")}}
    • +
  • {{Cssxref("-moz-outline-radius-bottomleft")}}
    • +
  • {{Cssxref("-moz-outline-radius-bottomright")}}
    • +
  • {{Cssxref("-moz-outline-radius-topleft")}}
    • +
  • {{Cssxref("-moz-outline-radius-topright")}}
    • +
+ +

P Q R

+ +
    +
  • {{Cssxref("-moz-padding-end")}}
    • +
  • {{Cssxref("-moz-padding-start")}}
    • +
+ +

S

+ +
    +
  • {{Cssxref("-moz-script-level")}}
    • +
  • {{Cssxref("-moz-script-min-size")}}
    • +
  • {{Cssxref("-moz-script-size-multiplier")}}
    • +
  • {{Cssxref("-moz-stack-sizing")}}
    • +
+ +

T U V

+ +
    +
  • {{Cssxref("-moz-user-focus")}}
    • +
  • {{Cssxref("-moz-user-input")}}
    • +
  • {{Cssxref("-moz-user-modify")}}
    • +
  • {{Cssxref("-moz-user-select")}}
    • +
+ +

W—Z

+ +
    +
  • {{Cssxref("-moz-window-shadow")}}
    • +
+
+ +

Propiedades prefijadas anteriormente, ahora estándar

+ +
    +
  • {{Cssxref("animation", "-moz-animation")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-delay", "-moz-animation-delay")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-direction", "-moz-animation-direction")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-duration", "-moz-animation-duration")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-name", "-moz-animation-name")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("background-clip", "-moz-background-clip")}}
    • +
  • {{Cssxref("background-origin", "-moz-background-origin")}}
    • +
  • {{Cssxref("background-size", "-moz-background-size")}}
    • +
  • {{Cssxref("border-image","-moz-border-image")}}
    • +
  • {{Cssxref("opacity","-moz-opacity")}}
    • +
  • {{Cssxref("outline","-moz-outline")}}
    • +
  • {{Cssxref("outline-color","-moz-outline-color")}}
    • +
  • {{Cssxref("outline-offset","-moz-outline-offset")}}
    • +
  • {{Cssxref("outline-style","-moz-outline-style")}}
    • +
  • {{Cssxref("outline-width","-moz-outline-width")}}
    • +
  • {{Cssxref("perspective", "-moz-perspective")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("perspective-origin","-moz-perspective-origin")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("transform", "-moz-transform")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("transform-origin", "-moz-transform-origin")}} [Aún se acepta la versión con prefijo]
    • +
  • {{Cssxref("transform-style", "-moz-transform-style")}} [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition", "-moz-transition")}} [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition-delay", "-moz-transition-delay")}}  [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition-duration", "-moz-transition-duration")}} [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition-property", "-moz-transition-property")}} [Aún se acepta la versión con prefijo]
    • +
  • {{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Aún se acepta la versión con prefijo]
    • +
+ +

Valores

+ +

Para todas las propiedades

+ +
    +
  • {{cssxref("initial","-moz-initial")}}
    • +
+ +

{{Cssxref("-moz-appearance")}}

+ +
    +
  • button
    • +
  • button-arrow-down
    • +
  • button-arrow-next
    • +
  • button-arrow-previous
    • +
  • button-arrow-up
    • +
  • button-bevel
    • +
  • checkbox
    • +
  • checkbox-container
    • +
  • checkbox-label
    • +
  • checkmenuitem
    • +
  • dialog
    • +
  • groupbox
    • +
  • listbox
    • +
  • menuarrow
    • +
  • menucheckbox
    • +
  • menuimage
    • +
  • menuitem
    • +
  • menuitemtext
    • +
  • menulist
    • +
  • menulist-button
    • +
  • menulist-text
    • +
  • menulist-textfield
    • +
  • menupopup
    • +
  • menuradio
    • +
  • menuseparator
    • +
  • -moz-mac-unified-toolbar {{Fx_minversion_inline(3.5)}}
    • +
  • -moz-win-borderless-glass
    • +
  • -moz-win-browsertabbar-toolbox {{Fx_minversion_inline(3)}}
    • +
  • -moz-win-communications-toolbox {{Fx_minversion_inline(3)}}
    • +
  • -moz-win-glass
    • +
  • -moz-win-media-toolbox {{Fx_minversion_inline(3)}}
    • +
  • -moz-window-button-box
    • +
  • -moz-window-button-box-maximized
    • +
  • -moz-window-button-close
    • +
  • -moz-window-button-maximize
    • +
  • -moz-window-button-minimize
    • +
  • -moz-window-button-restore
    • +
  • -moz-window-titlebar
    • +
  • -moz-window-titlebar-maximized
    • +
  • progressbar
    • +
  • progresschunk
    • +
  • radio
    • +
  • radio-container
    • +
  • radio-label
    • +
  • radiomenuitem
    • +
  • resizer
    • +
  • resizerpanel
    • +
  • scale-horizontal
    • +
  • scalethumb-horizontal
    • +
  • scalethumb-vertical
    • +
  • scale-vertical
    • +
  • scrollbarbutton-down
    • +
  • scrollbarbutton-left
    • +
  • scrollbarbutton-right
    • +
  • scrollbarbutton-up
    • +
  • scrollbar-small
    • +
  • scrollbarthumb-horizontal
    • +
  • scrollbarthumb-vertical
    • +
  • scrollbartrack-horizontal
    • +
  • scrollbartrack-vertical
    • +
  • separator
    • +
  • spinner
    • +
  • spinner-downbutton
    • +
  • spinner-textfield
    • +
  • spinner-upbutton
    • +
  • statusbar
    • +
  • statusbarpanel
    • +
  • tab
    • +
  • tabpanels
    • +
  • tab-scroll-arrow-back
    • +
  • tab-scroll-arrow-forward
    • +
  • textfield
    • +
  • textfield-multiline
    • +
  • toolbar
    • +
  • toolbarbutton-dropdown
    • +
  • toolbox
    • +
  • tooltip
    • +
  • treeheadercell
    • +
  • treeheadersortarrow
    • +
  • treeitem
    • +
  • treetwisty
    • +
  • treetwistyopen
    • +
  • treeview
    • +
  • window
    • +
+ +

{{cssxref("background-image")}}

+ +
    +
  • Gradientes {{Gecko_minversion_inline("1.9.2")}} +
      +
    • {{cssxref("-moz-linear-gradient")}}
      • +
    • {{cssxref("-moz-radial-gradient")}}
      • +
    +
    • +
  • Elementos {{gecko_minversion_inline("2.0")}} +
      +
    • {{cssxref("-moz-element")}}
      • +
    +
    • +
  • Sub-imágenes +
      +
    • {{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}}
      • +
    +
    • +
+ +

{{Cssxref("border-color")}}

+ +
    +
  • -moz-use-text-color {{Deprecated_inline}} Usar {{Cssxref("currentColor")}}
    • +
+ +

{{Cssxref("border-style")}}  y  {{Cssxref("outline-style")}}

+ +
    +
  • -moz-bg-inset | -moz-bg-outset | -moz-bg-solid {{obsolete_inline}}  abandonado en Gecko 1.9 (Firefox 3.0)
    • +
+ +

Palabras clave de {{cssxref("<color>")}}

+ +
    +
  • -moz-activehyperlinktext
    • +
  • -moz-hyperlinktext
    • +
  • -moz-visitedhyperlinktext
    • +
  • -moz-buttondefault
    • +
  • -moz-buttonhoverface
    • +
  • -moz-buttonhovertext
    • +
  • -moz-default-background-color {{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-default-color {{Gecko_minversion_inline("5.0")}}
    • +
  • -moz-cellhighlight
    • +
  • -moz-cellhighlighttext
    • +
  • -moz-field
    • +
  • -moz-fieldtext
    • +
  • -moz-dialog
    • +
  • -moz-dialogtext
    • +
  • -moz-dragtargetzone
    • +
  • -moz-mac-accentdarkestshadow
    • +
  • -moz-mac-accentdarkshadow
    • +
  • -moz-mac-accentface
    • +
  • -moz-mac-accentlightesthighlight
    • +
  • -moz-mac-accentlightshadow
    • +
  • -moz-mac-accentregularhighlight
    • +
  • -moz-mac-accentregularshadow
    • +
  • -moz-mac-chrome-active {{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-chrome-inactive {{Gecko_minversion_inline("1.9.1")}}
    • +
  • -moz-mac-focusring
    • +
  • -moz-mac-menuselect
    • +
  • -moz-mac-menushadow
    • +
  • -moz-mac-menutextselect
    • +
  • -moz-menuhover
    • +
  • -moz-menuhovertext
    • +
  • -moz-win-communicationstext {{Fx_minversion_inline(3)}}
    • +
  • -moz-win-mediatext {{gecko_minversion_inline(1.9)}}
    • +
  • -moz-nativehyperlinktext {{Gecko_minversion_inline("1.9.1")}}
    • +
+ +

{{Cssxref("display")}}

+ +
    +
  • -moz-box
    • +
  • -moz-inline-block {{obsolete_inline}}
    • +
  • -moz-inline-box
    • +
  • -moz-inline-grid
    • +
  • -moz-inline-stack
    • +
  • -moz-inline-table {{obsolete_inline}}
    • +
  • -moz-grid
    • +
  • -moz-grid-group
    • +
  • -moz-grid-line
    • +
  • -moz-groupbox
    • +
  • -moz-deck
    • +
  • -moz-popup
    • +
  • -moz-stack
    • +
  • -moz-marker
    • +
+ +

{{cssxref("empty-cells")}}

+ +
    +
  • -moz-show-background (valor por defecto en modo no estándar quirks mode)
    • +
+ +

{{Cssxref("font")}}

+ +
    +
  • -moz-button
    • +
  • -moz-info
    • +
  • -moz-desktop
    • +
  • -moz-dialog (también un color)
    • +
  • -moz-document
    • +
  • -moz-workspace
    • +
  • -moz-window
    • +
  • -moz-list
    • +
  • -moz-pull-down-menu
    • +
  • -moz-field (también un color)
    • +
+ +

{{Cssxref("font-family")}}

+ +
    +
  • -moz-fixed
    • +
+ +

{{Cssxref("image-rendering")}}

+ +
    +
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • +
+ +

{{cssxref("<length>")}}

+ +
    +
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • +
+ +

{{Cssxref("list-style-type")}}

+ +
    +
  • -moz-arabic-indic
    • +
  • -moz-bengali
    • +
  • -moz-cjk-earthly-branch
    • +
  • -moz-cjk-heavenly-stem
    • +
  • -moz-devanagari
    • +
  • -moz-ethiopic-halehame
    • +
  • -moz-ethiopic-halehame-am
    • +
  • -moz-ethiopic-halehame-ti-er
    • +
  • -moz-ethiopic-halehame-ti-et
    • +
  • -moz-ethiopic-numeric
    • +
  • -moz-gujarati
    • +
  • -moz-gurmukhi
    • +
  • -moz-hangul
    • +
  • -moz-hangul-consonant
    • +
  • -moz-japanese-formal
    • +
  • -moz-japanese-informal
    • +
  • -moz-kannada
    • +
  • -moz-khmer
    • +
  • -moz-lao
    • +
  • -moz-malayalam
    • +
  • -moz-myanmar
    • +
  • -moz-oriya
    • +
  • -moz-persian
    • +
  • -moz-simp-chinese-formal
    • +
  • -moz-simp-chinese-informal
    • +
  • -moz-tamil
    • +
  • -moz-telugu
    • +
  • -moz-thai
    • +
  • -moz-trad-chinese-formal
    • +
  • -moz-trad-chinese-informal
    • +
  • -moz-urdu
    • +
+ +

{{Cssxref("overflow")}}

+ +
    +
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • +
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • +
+ +

{{Cssxref("text-align")}}

+ +
    +
  • {{Cssxref("text-align#Mozilla_Extensions","-moz-center")}}
    • +
  • {{Cssxref("text-align#Mozilla_Extensions","-moz-left")}}
    • +
  • {{Cssxref("text-align#Mozilla_Extensions","-moz-right")}}
    • +
+ +

{{Cssxref("text-decoration")}}

+ +
    +
  • -moz-anchor-decoration
    • +
+ +

{{Cssxref("-moz-user-select")}}

+ +
    +
  • -moz-all
    • +
  • -moz-none
    • +
+ +

{{Cssxref("width")}},  {{Cssxref("min-width")}}  y  {{Cssxref("max-width")}}

+ +
    +
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • +
  • -moz-available {{Fx_minversion_inline(3)}}
    • +
+ +

Pseudoelementos y pseudoclases

+ +
    +
  • {{Cssxref("::-moz-anonymous-block")}} eg@:- bug 331432
    • +
  • {{Cssxref("::-moz-anonymous-positioned-block")}}
    • +
  • {{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref(":-moz-any-link")}} (selecciona :link y :visited)
    • +
  • {{Cssxref(":-moz-bound-element")}}
    • +
  • {{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref("::-moz-canvas")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-cell-content")}} eg@:- bug 331432
    • +
  • {{Cssxref(":-moz-drag-over")}}
    • +
  • {{Cssxref(":-moz-first-node")}}
    • +
  • {{cssxref("::-moz-focus-inner")}}
    • +
  • {{cssxref("::-moz-focus-outer")}}
    • +
  • {{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}
    • +
  • {{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}
    • +
  • {{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}
    • +
  • {{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}
    • +
  • {{Cssxref("::-moz-inline-table")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref(":-moz-last-node")}}
    • +
  • {{Cssxref(":-moz-list-bullet")}}
    • +
  • {{cssxref(":-moz-list-number")}}
    • +
  • {{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("::-moz-math-stretchy")}}
    • +
  • {{Cssxref(":-moz-only-whitespace")}}
    • +
  • {{Cssxref("::-moz-page")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-page-sequence")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-pagebreak")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-pagecontent")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}
    • +
  • {{Cssxref("::-moz-progress-bar")}}
    • +
  • {{Cssxref("::-moz-range-thumb")}}
    • +
  • {{Cssxref("::-moz-range-track")}}
    • +
  • {{Cssxref(":-moz-read-only")}}
    • +
  • {{Cssxref(":-moz-read-write")}}
    • +
  • {{cssxref("::selection","::-moz-selection")}}
    • +
  • {{Cssxref("::-moz-scrolled-canvas")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-scrolled-content")}} eg@:- bug 331432
    • +
  • {{Cssxref("::-moz-scrolled-page-sequence")}} eg@:- bug 331432
    • +
  • {{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref("::-moz-svg-foreign-content")}} example at resource://gre/res/svg.css , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}
    • +
  • {{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}
    • +
  • {{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}
    • +
  • {{Cssxref("::-moz-table")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-cell")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-column")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-column-group")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-outer")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-row")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-table-row-group")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref(":-moz-tree-checkbox")}}
    • +
  • {{Cssxref(":-moz-tree-cell")}}
    • +
  • {{Cssxref(":-moz-tree-cell-text")}}
    • +
  • {{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-tree-column")}}
    • +
  • {{Cssxref(":-moz-tree-drop-feedback")}}
    • +
  • {{Cssxref(":-moz-tree-image")}}
    • +
  • {{Cssxref(":-moz-tree-indentation")}}
    • +
  • {{Cssxref(":-moz-tree-line")}}
    • +
  • {{Cssxref(":-moz-tree-progressmeter")}}
    • +
  • {{Cssxref(":-moz-tree-row")}}
    • +
  • {{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref(":-moz-tree-separator")}}
    • +
  • {{Cssxref(":-moz-tree-twisty")}}
    • +
  • {{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • +
  • {{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}
    • +
  • {{Cssxref("::-moz-viewport")}} eg@:- resource://gre/res/ua.css
    • +
  • {{Cssxref("::-moz-viewport-scroll")}} eg@:- resource://gre/res/ua.css
    • +
  • {{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref("::-moz-xul-anonymous-block")}} eg@:- resource://gre/res/ua.css
    • +
+ +

Reglas arroba (At-rules)

+ +
    +
  • {{Cssxref("@-moz-document")}}
    • +
+ +

Media Queries

+ +
    +
  • {{Cssxref("Media_queries#-moz-images-in-menus","-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-mac-graphite-theme","-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-maemo-classic","-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-device-pixel-ratio","-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-end-backward","-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-end-forward","-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-start-backward","-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-start-forward","-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-scrollbar-thumb-proportional","-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-touch-enabled","-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-windows-classic","-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-windows-compositor","-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-windows-default-theme","-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}}
    • +
  • {{Cssxref("Media_queries#-moz-windows-theme","-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}}
    • +
+ +

Otros

+ +
    +
  • {{Cssxref("-moz-alt-content")}} ({{Bug("11011")}})
    • +
diff --git a/files/es/web/css/normal/index.html b/files/es/web/css/normal/index.html new file mode 100644 index 0000000000..fc9f25382b --- /dev/null +++ b/files/es/web/css/normal/index.html @@ -0,0 +1,10 @@ +--- +title: normal +slug: Web/CSS/normal +translation_of: Web/CSS/font-variant +--- +

Sumario

+

El valor normal en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.

+

Ejemplos

+

En la propiedad font-style: normal establece que el tipo de fuente no es italic ni oblique.

+

El la propiedad font-size: normalse establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.

diff --git a/files/es/web/css/number/index.html b/files/es/web/css/number/index.html new file mode 100644 index 0000000000..fcbaad3c7a --- /dev/null +++ b/files/es/web/css/number/index.html @@ -0,0 +1,8 @@ +--- +title: +slug: Web/CSS/number +translation_of: Web/CSS/number +--- +

{{ CSSRef() }}

+ +

Un valor para una propiedad CSS, un número incluyendo un valor entero {{ Cssxref("integer") }}.

diff --git a/files/es/web/css/object-fit/index.html b/files/es/web/css/object-fit/index.html new file mode 100644 index 0000000000..0239910a6b --- /dev/null +++ b/files/es/web/css/object-fit/index.html @@ -0,0 +1,164 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - Imágenes CSS + - Layout + - Propiedad CSS + - Referencia + - css layout + - object-fit + - 'recipe:css-property' + - size +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

La propiedad CSS object-fit indica cómo el contenido de un elemento reemplazado, por ejemplo un {{HTMLElement("img")}} o {{HTMLElement("video")}}, debería redimensionarse para ajustarse a su contenedor.

+ +

Se puede alterar la alineación del contenido del elemento reemplazado utilizando la propiedad {{cssxref("object-position")}}.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ +

Sintaxis

+ +

La propiedad object-fit se especifica con una de las palabras claves elegidas de la siguiente lista de valores.

+ +

Valores

+ +
+
contain
+
El contenido reemplazado está dimensionado para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento: su tamaño de objeto concreto se resuelve como una restricción de contenido contra el ancho y la altura utilizados del elemento.
+
cover
+
El contenido reemplazado se dimensiona para mantener su relación de aspecto mientras llena el cuadro de contenido completo del elemento. Si la relación de aspecto del objeto no coincide con la relación de aspecto de su caja, entonces el objeto se recortará para que se ajuste.
+
fill
+
Modifica el tamaño del elemento remplazado para llenar el cuadro de contenido. El objeto completo ocupará todo el espacio de la caja. Si el tamaño del elemento no concuerda con el de su caja, se estirará para llenarlo.
+
none
+
El contenido reemplazado no se redimensiona.
+
scale-down
+
El contenido se dimensiona como si none o contain estuvieran especificados, lo que resultaría en un tamaño de objeto concreto más pequeño.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<section>
+  <h2>object-fit: fill</h2>
+  <img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: contain</h2>
+  <img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: cover</h2>
+  <img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: none</h2>
+  <img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: scale-down</h2>
+  <img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+</section>
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Definicion inicial.
+ +

Compatibilidad

+ +

{{Compat("css.properties.object-fit")}}

+ +

Ver también

+ +
    +
  • Otras propiedades CSS relacionadas con imágenes: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
  • {{cssxref("background-size")}}
    • +
diff --git a/files/es/web/css/object-position/index.html b/files/es/web/css/object-position/index.html new file mode 100644 index 0000000000..0d76669bdc --- /dev/null +++ b/files/es/web/css/object-position/index.html @@ -0,0 +1,150 @@ +--- +title: object-position +slug: Web/CSS/object-position +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

Summary

+ +

La propiedad object-position determina el alineamiento del elemento dentro de la caja.

+ +

{{cssinfo}}

+ +

Sinstaxis

+ +
/* <position> valores */
+object-position: 100px 50px;
+
+/* Valores globales */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

Valores

+ +
+
<position>
+
{{ cssxref("<position>") }}, este es un valor de cuatro que representa una posición en 2D con respecto a los bordes de la caja. Posiciones Relativas o absolutas pueden presentar compensaciones. Tenga en cuenta que la posición puede ser establecida fuera de la caja.
+
+ +

Sitaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Ejemplo de HTML

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
+
+ +

Ejemplo de CSS

+ +
img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+  background-color: yellow;
+  margin-right: 1em;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 20% 10%;
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', 360, 120) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}} +

Las  palabras clave from-image y flip an sido añadidas.

+
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Definición incial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico31.0{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.60{{ property_prefix("-o") }}
+ 19.0		{{ CompatNo }}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.4.4{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.5{{ property_prefix("-o") }}
+ 24		{{ CompatNo }}
+
+[1] WebKit Nightly fixed in bug 122811.
+ +

Contenido relacionado

+ +
    +
  • Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
diff --git a/files/es/web/css/opacity/index.html b/files/es/web/css/opacity/index.html new file mode 100644 index 0000000000..154e4d7d82 --- /dev/null +++ b/files/es/web/css/opacity/index.html @@ -0,0 +1,216 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Reference + - CSS3 + - css3-color +translation_of: Web/CSS/opacity +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

La propiedad CSS opacity define la transparencia de un elemento, esto es, en qué grado se superpone el fondo al elemento.

+ +

Usar esta propiedad con un valor diferente a 1 situa al elemento en un nuevo contexto de apilamiento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
opacity:  <valor alfanumérico>
+ +

Valores

+ +
+
<alphavalue>
+
Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano. + + + + + + + + + + + + + + + + + + + +
valorSignificado
0El elemento es transparente (invisible).
Cualquier valor entre 0 y 1El elemento es translúcido.
1El elemento es opaco (sólido).
+
+
+ +

Ejemplos

+ +
hbox.example {
+  opacity: 0.5; /* see the background through the hbox */
+}
+ +

Live Example

+ +
pre {                               /* make the box translucent (20% opaque) */
+   border: solid red;
+   opacity: 0.2;
+   filter: alpha(opacity=20);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+ +
pre {                               /* make the box translucent (50% opaque) */
+   border: solid red;
+   opacity: 0.5;
+   filter: alpha(opacity=50);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+ +
pre {                               /* make the box translucent (80% opaque) */
+   border: solid red;
+   opacity: 0.8;
+   filter: alpha(opacity=80);       /* IE8 and lower */
+   zoom: 1;       /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */
+}
+ +

Variando la opacidad con :hover

+ +
<!doctype html>
+<html>
+<head>
+<style>
+img.opacity {
+   opacity: 1;
+   filter: alpha(opacity=50);
+   zoom: 1;
+ }
+
+img.opacity:hover {
+   opacity: 0.5;
+   filter: alpha(opacity=100);
+   zoom: 1;
+ }
+</style>
+</head>
+
+<body>
+<img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity">
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Transitions', '#animatable-css', 'opacity') }}{{ Spec2('CSS3 Transitions') }}Define opacity como una animación.
{{ SpecName('CSS3 Colors', '#opacity', 'opacity') }}{{ Spec2('CSS3 Colors') }}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.7") }}9.09.01.2 (125)
8.0
+ filter: alpha(opacity=xx)
+ filter: "alpha(opacity=xx)"
+ (both are synonymous)
4.0
+ filter: alpha(opacity=xx)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1.7") }}9.09.03.2
8.0
+ filter: alpha(opacity=xx)
+ filter: "alpha(opacity=xx)"
+ (both are synonymous)
4.0
+ filter: alpha(opacity=xx)
+
+ +
    +
  • History:  Prior to Mozilla 1.7 (Firefox 0.9) the -moz-opacity property was implemented in a non-standard (inherited) way. With Firefox 0.9 the behavior changed and the property was renamed to opacity.  Since then -moz-opacity was supported just as an alias for opacity.
    • +
  • Gecko 1.9.1 (Firefox 3.5) and later do not support -moz-opacity and support for MozOpacity in javascript was removed in Gecko 13.  By now, you should be using simply opacity.
    • +
  • Prior to version 9, Internet Explorer does not support opacity, rather it supports filter instead.
    • +
  • IE4 to IE9 supported the extended form progid:DXImageTransform.Microsoft.Alpha(Opacity=xx).
    • +
  • IE8 introduced -ms-filter, which is synonymous with filter. Both are gone in IE10
    • +
  • Similar to -moz-opacity, -khtml-opacity has been dead since early 2004 (release of Safari 1.2).
    + Konqueror never had support for -khtml-opacity and had been supporting opacity since version 4.0.
    • +
+ +

Más información

+ + diff --git a/files/es/web/css/order/index.html b/files/es/web/css/order/index.html new file mode 100644 index 0000000000..fa8484670f --- /dev/null +++ b/files/es/web/css/order/index.html @@ -0,0 +1,172 @@ +--- +title: order +slug: Web/CSS/order +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS order especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los elementos estarán dispuestos en orden ascendente según el valor de order. Los elementos con el mismo valor de order se dispondrán en el orden en el cual aparecen en el código fuente.

+ +
+

Nota: order sólo pretende afectar el orden visual de los elementos y no su orden lógico u orden de tabulación. order no se debe usar en un medio no visual tal como un speech (sintetizador de voz).

+
+ +

{{cssinfo}}

+ +

Ver Uso de cajas flexibles de CSS para más propiedades e información.

+ +

Sintaxis

+ +
/* Valor numérico incluyendo números negativos */
+order: 5;
+order: -5;
+
+/* Valores Globales */
+order: inherit;
+order: initial;
+order: unset;
+
+ +

Valores

+ +
+
<integer>
+
Representa el grupo ordinal al que el elemento flexible ha sido asignado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Aquí tiene un trozo de HTML básico:

+ +
<!DOCTYPE html>
+<header>...</header>
+<div id='main'>
+   <article>Article</article>
+   <nav>Nav</nav>
+   <aside>Aside</aside>
+</div>
+<footer>...</footer>
+ +

El siguiente código CSS debería crear un diseño clásico de dos barra laterales que rodea a un bloque de contenido. EL Módulo de Diseño de Caja Flexible crea automáticamente bloques de tamaño vertical igual y utiliza todo el espacio horizontal disponible.

+ +

#main { display: flex;  text-align:center; }

+ +
#main > article { flex:1;        order: 2; }
+#main > nav     { width: 200px;  order: 1; }
+#main > aside   { width: 200px;  order: 3; }
+ +

Resultado

+ +

{{ EmbedLiveSample('Examples' ,'','','','Web/CSS/order') }}

+ +

Sobre Accesibilidad

+ +

Utilizar la propiedad order rompe la conexión entre la presentación visual y el order original de los elementos en el DOM. Esto afecta de forma negativa a los usuarios que navegan a través de teclado utilizando, por ejemplo, un lector de pantalla. Si el orden visual (CSS) es importante, entonces los lectores de pantallas no podrán acceder a ese dato y recorrerán los elementos de forma desordenada.

+ +

Para más información por favor, referirse a estos artículos:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Definición Inicial
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome(21.0)}}{{property_prefix("-webkit")}}
+ 29		{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}[2]		 +

10.0{{property_prefix("-ms")}}[3]
+ 11

+ 		12.107 {{property_prefix("-webkit")}}
+ 9
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("18.0")}}[1]
+ {{CompatGeckoMobile("20.0")}}[2]		{{CompatUnknown}}12.107 {{property_prefix("-webkit")}}
+ 9
+
+ +

[1] Para activar el soporte Flexbox en  Firefox 18 and 19, el usuario debe cambiar en preferencias about:config layout.css.flexbox.enabled a true. Las cajas flexibles multi-línea son soportadas desde Firefox 28.

+ +

Actualmente Firefox cambia incorrectamente el orden de tabulación de los elementos. Ver {{bug("812687")}}.

+ +

[2] Además del soporte sin prefijo, Gecko 48.0 {{geckoRelease("48.0")}} añade soporte para un prefijo -webkit en versión porpietaria por razones compatibilidad web bajo la preferencia layout.css.prefixes.webkit, por defecto en false. Desde Gecko 49.0 {{geckoRelease("49.0")}} la preferencia por defecto está en true.

+ +

[3] En Internet Explorer 10, un contenedor flexible se declara usando display:-ms-flexbox y no display:flex. La propiedad está implementada bajo el monbre no-estándar -ms-flex-order.

+ +

Ver también

+ + diff --git a/files/es/web/css/outline-color/index.html b/files/es/web/css/outline-color/index.html new file mode 100644 index 0000000000..f2d6f9c18c --- /dev/null +++ b/files/es/web/css/outline-color/index.html @@ -0,0 +1,152 @@ +--- +title: outline-color +slug: Web/CSS/outline-color +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-color +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS outline-color establece el color del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+outline-color: invert;
+outline-color: red;
+
+/* Valores globales */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+
+ +

Valores

+ +
+
<color>
+
Ver {{cssxref("<color>")}} para las diferentes palabras clave y notaciones de colores.
+
invert
+
Para asegurarse que el contorno es visible, este valor realiza una inversión del color de fondo. Esto hace el contorno más sobresaliente, sin importar el color de fondo. Nótese que los navegadores pueden no soportar este valor. De ser así, solamente considerarán la declaración como inválida
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p class="example">My outline is blue, da ba dee.</p>
+ +

CSS

+ +
.example {
+  /* primero debe definirse la propiedad "outline" */
+  outline: 2px solid;
+  /* hacer el contorno azul */
+  outline-color: #0000FF;
+}
+ +

En vivo:

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}Sin cambios
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}{{Spec2('CSS3 Transitions')}}Define outline-color como propiedad que se puede animar.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.8")}} [1]8.07.01.2 (125)
valor invert{{CompatNo}}{{CompatNo}} [2]8.0{{CompatNo}} [3]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] En versiones previas a Gecko 1.8: -moz-outline-color.

+ +

[2] El soporte fue retirado en la versión 3.0 (1.9).

+ +

[3] Soportado en Opera 7 pero el soporte fue retirado en Opera 15 con la adopción del motor Chromium/Blink.

diff --git a/files/es/web/css/outline-offset/index.html b/files/es/web/css/outline-offset/index.html new file mode 100644 index 0000000000..85bd0c33d7 --- /dev/null +++ b/files/es/web/css/outline-offset/index.html @@ -0,0 +1,136 @@ +--- +title: outline-offset +slug: Web/CSS/outline-offset +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-offset +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS outline-offset es usada para establecer el espacio entre un contorno {{ cssxref("outline") }} y el límite o borde de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites de su borde.

+ +

{{cssinfo}}

+ +

El espacio será transparente (el elemento padre determinará el fondo).

+ +

Sintaxis

+ +
/* Valores <length> */
+outline-offset: 3px;
+outline-offset: 0.2em;
+
+/* Valores globales */
+outline-offset: inherit;
+outline-offset: initial;
+outline-offset: unset;
+
+ +

Valores

+ +
+
<length>
+
La anchura del espacio. Ver {{cssxref("<length>")}} para unidades posibles. Valores negativos colocan el borde dentro del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
p {
+  outline: dashed thin;
+  /* Mueve el contorno 10px lejos del borde */
+  outline-offset: 10px;
+  border:1px solid black;
+}
+
+ +

Html

+ +
<p>outline: offset 10px. Border is solid and outline is dashed</p>
+ +

El código anterior producirá este efecto:

+ +

{{ EmbedLiveSample('Examples', '', '', '') }}

+ +

Otro ejemplo:

+ +

outline: multiple offsets;

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Transitions', '#animatable-css', 'outline-offset') }}{{ Spec2('CSS3 Transitions') }}Define outline-offset como propiedad que se puede animar.
{{ SpecName('CSS3 Basic UI', '#outline-offset', 'outline-offset') }}{{ Spec2('CSS3 Basic UI') }}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1.8")}}{{ CompatNo() }}9.51.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/es/web/css/outline-style/index.html b/files/es/web/css/outline-style/index.html new file mode 100644 index 0000000000..68b1f9abd4 --- /dev/null +++ b/files/es/web/css/outline-style/index.html @@ -0,0 +1,263 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-style +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS outline-style es usada para establecer el estilo del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.

+ +

Por lo general, es más conveniente usar la propiedad de forma reducida {{cssxref("outline")}} en vez de outline-style, outline-width y outline-color por separado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* Valores globales */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+
+ +

Valores

+ +

<br-style> puede ser uno de los siguientes:

+ +
+
none
+
+
Sin contorno ({{Cssxref("outline-width")}} es 0).
+
dotted
+
+
Línea punteada. El contorno es una serie de puntos.
+
dashed
+
+
Línea discontinua. El contorno es una serie de segmentos de línea cortos.
+
solid
+
+
El contorno es una línea simple.
+
double
+
+
El contorno son dos líneas paralelas. El valor de {{Cssxref("outline-width")}} es la suma de los dos líneas y el espacio entre ellas.
+
groove
+
+
El contorno parece estar tallado dentro del lienzo.
+
ridge
+
+
Lo opuesto a groove: el contorno parece salir del lienzo.
+
inset
+
+
El contorno hace a la caja verse como si estuviera embedida dentro del lienzo.
+
outset
+
+
Lo opuesto a inset: el contorno hace a la caja verse como si estuviera saliendo del lienzo.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo 1 - dotted y dashed

+ +

HTML

+ +
<div>
+  <div class="dotted">
+    <p class="dashed">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.dotted {
+  outline-style: dotted; /* same result as "outline: dotted" */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_1_-_dotted_and_dashed') }}

+ +

Ejemplo 2 - solid y double

+ +

HTML

+ +
<div>
+  <div class="solid">
+    <p class="double">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_2_-_solid_and_double') }}

+ +

Ejemplo 3 - groove y ridge

+ +

HTML

+ +
<div>
+  <div class="groove">
+    <p class="ridge">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_3_-_groove_and_ridge') }}

+ +

Ejemplo 4 - inset y outset

+ +

HTML

+ +
<div>
+  <div class="inset">
+    <p class="outset">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

{{ EmbedLiveSample('Example_4_-_inset_and_outset') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}Se añade el valor auto
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.5 (1.8)[1]8.07.01.2 (125)
auto{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatGeckoMobile("46")}}10123.2
auto{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] En navegadores anteriores a Gecko 1.8 (Firefox 1.5) este efecto podía lograrse usando la CSS de Mozilla {{Cssxref("-moz-outline-style")}}.

diff --git a/files/es/web/css/outline-width/index.html b/files/es/web/css/outline-width/index.html new file mode 100644 index 0000000000..1b52fef25b --- /dev/null +++ b/files/es/web/css/outline-width/index.html @@ -0,0 +1,176 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline-width +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS outline-width es usada para establecer el grosor del contorno de un elemento. Un contorno es una línea que se dibuja al rededor de los elementos, fuera de los límites del borde, para resaltar al elemento:

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* Valores <length> */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* Valores globales */
+outline-width: inherit;
+
+ +

Valores

+ +
+
thin
+
Depende del Agente Usuario. Generalmente 1px en navegadores de escritorio como Firefox.
+
medium
+
Depende del Agente Usuario. Generalmente 3px en navegadores de escritorio como Firefox.
+
thick
+
Depende del Agente Usuario. Generalmente 5px en navegadores de escritorio como Firefox.
+
<length>
+
Ver valores {{cssxref("<length>")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Contenido HTML

+ +
<span id="thin">thin</span>
+<span id="medium">medium</span>
+<span id="thick">thick</span>
+<span id="twopixels">2px</span>
+<span id="oneex">1ex</span>
+<span id="twoem">2em</span>
+
+ +

Contenido CSS

+ +
span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#twoem {
+  outline-width: 2em;
+}
+
+
+ +

{{EmbedLiveSample('Examples', '100%', '80')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}Sin cambios
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-width')}}{{Spec2('CSS3 Transitions')}}Define outline-width como propiedad que puede ser animada.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.5 (1.8)[1]8.07.01.2 (125)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] En navegadores previos a Gecko 1.8 (Firefox 1.5) se podía lograr esencialmente el mismo efecto usando la Extensión CSS de Mozilla {{Cssxref("-moz-outline-width")}}.

diff --git a/files/es/web/css/outline/index.html b/files/es/web/css/outline/index.html new file mode 100644 index 0000000000..288c5fca34 --- /dev/null +++ b/files/es/web/css/outline/index.html @@ -0,0 +1,128 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - Contorno CSS + - Propiedad CSS +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

La propiedad CSS outline es una forma reducida para establecer una o más de las propiedades individuales de contorno {{cssxref("outline-style")}}, {{cssxref("outline-width")}} y {{cssxref("outline-color")}} en una sola declaración. En la mayoría de los casos el uso de este atajo es preferible y más conveniente.

+ +
{{EmbedInteractiveExample("pages/css/outline.html")}}
+ +

Al igual que con todas las propiedades abreviadas, cualquier subvalor omitido se establecerá en su valor inicial.

+ +

Border vs outline

+ +

Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:

+ +
    +
  • Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con {{cssxref("border")}}.
    • +
  • Los contornos pueden no ser rectangulares. Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento. A diferencia de los bordes, el contorno no está abierto en algunos lados: +

    Ejemplo: contorno aplicado a
    + varias líneas

    + +

    Ejemplo: borde aplicado a
    + varias líneas

    +
    • +
+ +
{{cssinfo}}
+ +

Sintaxis

+ +
/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* Global values */
+outline: inherit;
+outline: initial;
+outline: unset;
+ +

Valores

+ +

Uno, dos o tres valores, en orden arbitrario:

+ +
+
<outline-width>
+
Ver {{Cssxref("outline-width")}}.
+
<outline-style>
+
Ver {{Cssxref("outline-style")}}.
+
<outline-color>
+
Desde Gecko 1.9 (Firefox 3), es usado el valor de la propiedad {{Cssxref("color")}} del elemento (color de primer plano). Ver {{Cssxref("outline-color")}}.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<a href="#">Este link tiene un estilo especial para el foco</a>
+
+ +

CSS

+ +
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", 60)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}Sin cambios
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
+ + +

{{Compat("css.properties.outline")}}

+
diff --git a/files/es/web/css/overflow-y/index.html b/files/es/web/css/overflow-y/index.html new file mode 100644 index 0000000000..7650175806 --- /dev/null +++ b/files/es/web/css/overflow-y/index.html @@ -0,0 +1,138 @@ +--- +title: overflow-y +slug: Web/CSS/overflow-y +tags: + - CSS + - CSS Modelo de Caja + - Propiedad CSS +translation_of: Web/CSS/overflow-y +--- +
{{CSSRef}}
+ +

La propiedad CSS overflow-y define qué se debe mostrar cuando el contenido se desborda de los extremos superior e inferior de un elemento en bloque.

+ +
+

Si {{cssxref("overflow-x")}} es hidden, scroll o auto y esta propiedad es visible (por defecto) se calculará implícitamente como auto.

+
+ +

{{EmbedInteractiveExample("pages/css/overflow-y.html")}}

+ + + +

Sintaxis

+ +
/* Valores con una palabra clave */
+overflow-y: visible;
+overflow-y: hidden;
+overflow-y: scroll;
+overflow-y: auto;
+
+/* Valores globales */
+overflow-y: inherit;
+overflow-y: initial;
+overflow-y: unset;
+ +

La propiedad overflow-y es especificada con una sola palabra clave escogida de la lista de abajo.

+ +

Valores

+ +
+
visible
+
El contenido no es recortado y puede ser visualizado fuera de los extremos superior e inferior del área de padding.
+
hidden
+
El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. No se dispone de las barras de desplazamiento.
+
scroll
+
El contenido es recortado, si es necesario, para que se ajuste verticalmente dentro del área de padding. Los navegadores muestran las barras de desplazamiento independientemente de si el contenido se recorta o no (esto evita que las barras de desplazamiento aparezcan o desaparezcan  cuando el contenido cambia). Las impresoras pueden imprimir el contenido desbordado.
+
auto
+
Depende del cliente. Si el contenido se recorta dentro del área de padding, se vería igual que con la propiedad visible, pero aún determinado por un contexto de formato de bloque. Los navegadores de escritorio proveen barras de desplazamiento si el contenido se desborda.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul>
+  <li><code>overflow-y:hidden</code> — Esconde el texto fuera de la caja
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:scroll</code> — Agrega una barra scroll si se necesita
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:visible</code> — Muestra el texto fuera de la caja si se necesita
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-y:auto</code> — En la mayoría de los navegadores, equivalente a <code>scroll</code>
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-y: hidden; margin-bottom: 12px;}
+#div2 { overflow-y: scroll; margin-bottom: 12px;}
+#div3 { overflow-y: visible; margin-bottom: 120px;}
+#div4 { overflow-y: auto; margin-bottom: 120px;}
+
+ +

Resultado

+ +
+

{{EmbedLiveSample("Ejemplo", "100%", "780")}}

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y') }}{{Spec2('CSS3 Box')}}
+ +

Compatibilidad con navegadores

+ +
{{Compat("css.properties.overflow-y")}}
+ +

Ver también

+ +
    +
  • Propiedades CSS relacionadads: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • +
diff --git a/files/es/web/css/overflow/index.html b/files/es/web/css/overflow/index.html new file mode 100644 index 0000000000..bdc053d2d4 --- /dev/null +++ b/files/es/web/css/overflow/index.html @@ -0,0 +1,118 @@ +--- +title: overflow (excedente) +slug: Web/CSS/overflow +translation_of: Web/CSS/overflow +--- +
{{ CSSRef() }}
+ +

Sumario

+ +

La propiedad CSS overflow  especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

+ +

Usando la propiedad overflow con un valor distinto a visible, valor por defecto, creará un nuevo contexto de formatos de bloques. Esto es técnicamente necesario debido a que si un elemento flotante interceptara con otros forzaría a reajustar el contenido alrededor de los elementos que se interceden. El reajuste sucedería luego de cada desplazamiento, y llevaría a un desplazamiento demasiado lento.

+ +

Nótese que, cambiando programáticamente el valor de scrollTop al elemento HTML relevante, incluso cuando overflow tenga el valor hidden un elemento podría necesitar ser desplazado.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintáxis formal: {{csssyntax("overflow")}}
+ +
overflow: visible
+overflow: hidden
+overflow: scroll
+overflow: auto
+
+overflow: inherit
+
+ +

Valores

+ +
+
visible
+
Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora.
+
hidden
+
El contenido es recortado y no se muestran barras de posición.
+
scroll
+
El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente.
+
auto
+
Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.
+
+ +

Extensiones de Mozilla

+ +
+
-moz-scrollbars-none {{ obsolete_inline() }}
+
Usar overflow:hidden.
+
-moz-scrollbars-horizontal {{ Deprecated_inline() }}
+
Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.
+
-moz-scrollbars-vertical {{ Deprecated_inline() }}
+
Es preferible el uso de {{ Cssxref("overflow-x") }} y {{ Cssxref("overflow-y") }}.
+
-moz-hidden-unscrollable {{ non-standard_inline() }}
+
Es usada principalmente para uso interno y por temas. Deshabilita el desplazamiento en elementos XML root y <html>, <body> usando las flechas del teclado o la rueda del ratón.
+
+ +

Ejemplos

+ +
p {
+     width: 12em;
+     border: dotted;
+     overflow: visible;   /* dibuja barras si es necesario */
+}
+
+ +

visible (por defecto)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* no se dibujan barras */ }
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: scroll; /* se dibujan ambas barras */ }
+
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* se dibujan barras según se necesite */ }
+
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}{{ Spec2('CSS3 Box') }}Sin cambios.
{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}{{ Spec2('CSS2.1') }} 
+ +

Compatibilidad en navegadores

+ +

{{Compat("css.properties.overflow")}}

+ +

Véase también

+ +
    +
  • Propiedades CSS relacionadas: {{ cssxref("text-overflow") }}, {{ cssxref("white-space") }}, {{ Cssxref("overflow-x") }}, {{ Cssxref("overflow-y") }}, {{ Cssxref("clip") }}, {{ Cssxref("display") }} (
    • +
diff --git a/files/es/web/css/padding-block-end/index.html b/files/es/web/css/padding-block-end/index.html new file mode 100644 index 0000000000..f853d3bd67 --- /dev/null +++ b/files/es/web/css/padding-block-end/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block-end +slug: Web/CSS/padding-block-end +translation_of: Web/CSS/padding-block-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  padding-block-end define el relleno de final de bloque lógico de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.

+ +
{{EmbedInteractiveExample("pages/css/padding-block-end.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+padding-block-end: 10px;      /* An absolute length */
+padding-block-end: 1em;       /* A length relative to the text size */
+
+/* <percentage> value */
+padding-block-end: 5%;        /* A padding relative to the block container's width */
+
+/* Global values */
+padding-block-end: inherit;
+padding-block-end: initial;
+padding-block-end: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad padding-block-end toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-end: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-block-end", "padding-block-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-block-end")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-block-start/index.html b/files/es/web/css/padding-block-start/index.html new file mode 100644 index 0000000000..3beaf5ca81 --- /dev/null +++ b/files/es/web/css/padding-block-start/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block-start +slug: Web/CSS/padding-block-start +translation_of: Web/CSS/padding-block-start +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

La propiedad de CSS  padding-block-start define el bloque lógico de inicio de relleno de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por  {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Esto se relaciona con {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}, que define los otros rellenos del elemento.

+ +
{{EmbedInteractiveExample("pages/css/padding-block-start.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+padding-block-start: 10px;      /* An absolute length */
+padding-block-start: 1em;       /* A length relative to the text size */
+
+/* <percentage> value */
+padding-block-start: 5%;        /* A padding relative to the block container's width */
+
+/* Global values */
+padding-block-start: inherit;
+padding-block-start: initial;
+padding-block-start: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad padding-block-start toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-block-start: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-block-start", "padding-block-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-block-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-block/index.html b/files/es/web/css/padding-block/index.html new file mode 100644 index 0000000000..c237b61c4b --- /dev/null +++ b/files/es/web/css/padding-block/index.html @@ -0,0 +1,96 @@ +--- +title: padding-block +slug: Web/CSS/padding-block +translation_of: Web/CSS/padding-block +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS  padding-block define el relleno lógico de inicio y final del bloque de un elemento, que se asigna a las propiedades físicas del relleno según el modo de escritura del elemento, la direccionalidad y la orientación del texto.

+ +
/* <length> values */
+padding-block: 10px 20px;  /* An absolute length */
+padding-block: 1em 2em;   /* relative to the text size */
+padding-block: 5% 2%;    /* relative to the nearest block container's width */
+padding-block: 10px; /* sets both start and end values */
+
+/* Keyword values */
+padding-block: auto;
+
+/* Global values */
+padding-block: inherit;
+padding-block: initial;
+padding-block: unset;
+
+ +

Estos valores corresponde a las propiedades {{cssxref("padding-top")}} y  {{cssxref("padding-bottom")}}, o  {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Los valores pueden ser establecidos individualmente como {{cssxref("padding-block-start")}} y {{cssxref("padding-block-end")}}. La propiedad de dirección en línea es {{cssxref("padding-inline")}} que establece {{cssxref("padding-inline-start")}}, y {{cssxref("padding-inline-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad padding-block toma los mismos valores que la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-block: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-block", "padding-block")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-block")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-bottom/index.html b/files/es/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..8e025a0c83 --- /dev/null +++ b/files/es/web/css/padding-bottom/index.html @@ -0,0 +1,135 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +translation_of: Web/CSS/padding-bottom +--- +

{{CSSRef}}

+ +

Sumario

+ +

La propiedad padding-bottom CSS establece el espacio de relleno requerido en la parte inferior del elemento. El área de padding es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad margin-bottom, valores negativos no son válidos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* <length> values (Valores fijos)*/
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* <percentage> value (Valores porcentuales)*/
+padding-bottom: 10%;
+
+/* Global values (Valores globales)*/
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+
+ +

Valores

+ +
+
<length>
+
Especifica un valor positivo fijo. Veáse {{cssxref("<length>")}} para más detalles.
+
<percentage>
+
Especifica un porcentaje con respecto al bloque que lo contiene.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Defines padding-bottom as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}No change from {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.
{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Initial definition
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/es/web/css/padding-inline-end/index.html b/files/es/web/css/padding-inline-end/index.html new file mode 100644 index 0000000000..dd30fe2d15 --- /dev/null +++ b/files/es/web/css/padding-inline-end/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline-end +slug: Web/CSS/padding-inline-end +translation_of: Web/CSS/padding-inline-end +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  padding-inline-end define el relleno final lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, o {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, and {{cssxref("padding-inline-start")}}, que define los otros rellenos del elemento.

+ +
{{EmbedInteractiveExample("pages/css/padding-inline-end.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+padding-inline-end: 10px;   /* An absolute length */
+padding-inline-end: 1em;    /* A length relative to the text size */
+
+/* <percentage> value */
+padding-inline-end: 5%;     /* A padding relative to the block container's width */
+
+/* Global values */
+padding-inline-end: inherit;
+padding-inline-end: initial;
+padding-inline-end: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad padding-inline-end toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-end: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-end", "padding-inline-end")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-inline-end")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-inline-start/index.html b/files/es/web/css/padding-inline-start/index.html new file mode 100644 index 0000000000..696b045077 --- /dev/null +++ b/files/es/web/css/padding-inline-start/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline-start +slug: Web/CSS/padding-inline-start +translation_of: Web/CSS/padding-inline-start +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

La propiedad de CSS  padding-inline-start define el relleno de inicio lógico en línea de un elemento, que se asigna a un relleno físico en función del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, or {{cssxref("padding-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Esto se relaciona con {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, y {{cssxref("padding-inline-end")}}, que define los rellenos de los otros elementos.

+ +
{{EmbedInteractiveExample("pages/css/padding-inline-start.html")}}
+ + + +

Sintaxis

+ +
/* <length> values */
+padding-inline-start: 10px;   /* An absolute length */
+padding-inline-start: 1em;    /* A length relative to the text size */
+
+/* <percentage> value */
+padding-inline-start: 5%;     /* A padding relative to the block container's width */
+
+/* Global values */
+padding-inline-start: inherit;
+padding-inline-start: initial;
+padding-inline-start: unset;
+
+ +

{{cssinfo}}

+ +

Valores

+ +

La propiedad padding-inline-start toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  padding-inline-start: 20px;
+  background-color: #C8C800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-inline-start", "padding-inline-start")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-inline-start")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-inline/index.html b/files/es/web/css/padding-inline/index.html new file mode 100644 index 0000000000..9e471d734e --- /dev/null +++ b/files/es/web/css/padding-inline/index.html @@ -0,0 +1,96 @@ +--- +title: padding-inline +slug: Web/CSS/padding-inline +translation_of: Web/CSS/padding-inline +--- +

{{CSSRef}}{{SeeCompatTable}} 

+ +

La propiedad de CSS  padding-inline define el relleno en línea lógico de inicio y final de un elemento, que asigna las propiedades de relleno físicas dependiendo del modo de escritura del elemento, direccionalidad, y orientación del texto.

+ +
/* <length> values */
+padding-inline: 10px 20px;  /* An absolute length */
+padding-inline: 1em 2em;   /* relative to the text size */
+padding-inline: 5% 2%;    /* relative to the nearest block container's width */
+padding-inline: 10px; /* sets both start and end values */
+
+/* Keyword values */
+padding-inline: auto;
+
+/* Global values */
+padding-inline: inherit;
+padding-inline: initial;
+padding-inline: unset;
+
+ +

Estos valores corresponden a las propiedades{{cssxref("padding-top")}} y  {{cssxref("padding-bottom")}}, o  {{cssxref("padding-right")}}, y {{cssxref("padding-left")}} dependiendo de los valores definidos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.

+ +

Los valores pueden ser establecidos individualmente como {{cssxref("padding-inline-start")}} y {{cssxref("padding-inline-end")}}. La propiedad de la dirección bloque es {{cssxref("padding-block")}} que establece {{cssxref("padding-block-start")}}, y {{cssxref("padding-block-end")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +

La propiedad padding-inline toma los mismos valores de la propiedad {{cssxref("padding-left")}}.

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML 

+ +
<div>
+  <p class="exampleText">Example text</p>
+</div>
+
+ +

Contenido CSS 

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  padding-inline: 20px 40px;
+  background-color: #c8c800;
+}
+ +

{{EmbedLiveSample("Ejemplo", 140, 140)}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS Logical Properties", "#propdef-padding-inline", "padding-inline")}}{{Spec2("CSS Logical Properties")}}Definición inicial.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("css.properties.padding-inline")}}

+ +

Mira también

+ +
    +
  • Las propiedades físicas mapeadas: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, y {{cssxref("padding-left")}}
    • +
  • {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
    • +
diff --git a/files/es/web/css/padding-top/index.html b/files/es/web/css/padding-top/index.html new file mode 100644 index 0000000000..a635951fcc --- /dev/null +++ b/files/es/web/css/padding-top/index.html @@ -0,0 +1,135 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +translation_of: Web/CSS/padding-top +--- +

{{CSSRef}}

+ +

Sumario

+ +

La propiedad padding-top CSS establece el espacio de relleno requerido en la parte superior del elemento. El área de padding es el espacio entre el contenido del elemento y su borde. Contrariamente de la propiedad margin-top, valores negativos no son válidos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* <length> values (valores fijos) */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* <percentage> value (valores porcentuales) */
+padding-top: 10%;
+
+/* Global values (valores globales) */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+
+ +

Valores

+ +
+
<length>
+
Especifica un valor positivo fijo. Veáse {{cssxref("<length>")}} para más detalles.
+
<percentage>
+
Especifica un porcentaje con respecto al bloque que lo contiene.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}{{ Spec2('CSS3 Box') }}No change from {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}{{ Spec2('CSS3 Transitions') }}Defines padding-top as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}{{ Spec2('CSS2.1') }}No change from {{ Specname('CSS1', '#padding-top', 'padding-top') }}.
{{ Specname('CSS1', '#padding-top', 'padding-top') }}{{ Spec2('CSS1') }}Initial definition
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
diff --git a/files/es/web/css/padding/index.html b/files/es/web/css/padding/index.html new file mode 100644 index 0000000000..fdff58428a --- /dev/null +++ b/files/es/web/css/padding/index.html @@ -0,0 +1,178 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - Propiedades CSS +translation_of: Web/CSS/padding +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores negativos.

+ +

La propiedad padding es un atajo para evitar la asignación de cada lado por separado (padding-top, padding-right, padding-bottom, padding-left).

+ +

{{EmbedInteractiveExample("pages/css/padding.html")}}

+ +
+

Nota: Padding crea espacio extra dentro de un elemento. En contraste, margin crea espacio extra alrededor de un elemento.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("padding")}}
+ +

Valores

+ +

Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:

+ +
+
<length>
+
Especifica un ancho fijo no negativo. Ver más detalles {{ cssxref("<length>") }} .
+
<percentage>
+
Con respecto a la anchura("width") del bloque que lo contiene.
+
+ +
    +
  • Uno: un valor unico se aplica a los 4 lados.
    • +
  • Dos: el primer valor se aplica a arriba y abajo, el segundo valor se aplica a derecha e izquierda.
    • +
  • Tres: el primer valor se aplica a arriba, el segundo valor a derecha e izquierda y el tercer valor se aplica a abajo del elemento.
    • +
  • Cuatro: el primer valor se aplica a arriba, el segundo valor se aplica a la derecha, el tercer valor se aplica a abajo y el cuarto valor se aplica a la izquierda. 
    • +
+ +

Ejemplos

+ +
 padding: 5%;               /* aplica 5% de padding en todos los lados*/
+
+ +
 padding: 10px;              /* aplica 10px de padding en todos los lados */
+
+ +
 padding: 10px 20px;         /*  arriba y abajo, 10px de padding */
+                             /* izquierda y derecha, 20px de padding */
+
+ +
 padding: 10px 3% 20px;      /*  arriba, 10px de padding          */
+                             /*  izquierda y derecha, 3% de padding */
+                             /*  bottom, 20px padding       */
+
+ +
 padding: 1em 3px 30px 5px;  /*  arriba    1em  padding  */
+                             /*  derecha  3px  padding  */
+                             /*  abajo 30px padding  */
+                             /*  izquierda   5px  padding
+                 /* en dirección de las agujas del reloj */
+
+ +

border:outset; padding:5% 1em;

+ +

Ver ejemplo

+ +

HTML

+ +
<h4>¡Hola Mundo!</h4>
+<h3>El padding es diferente en esta linea.</h3>
+
+ +

CSS

+ +
h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+
+ +

{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}Sin cambio.
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}{{ Spec2('CSS2.1') }}Sin cambio.
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/perspective/index.html b/files/es/web/css/perspective/index.html new file mode 100644 index 0000000000..6ab1d25783 --- /dev/null +++ b/files/es/web/css/perspective/index.html @@ -0,0 +1,196 @@ +--- +title: perspective +slug: Web/CSS/perspective +tags: + - CSS + - Capas + - Propiedad CSS + - Referencia + - Transformaciones CSS + - Web + - graficos +translation_of: Web/CSS/perspective +--- +

{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}

+ +

Resumen

+ +

La propiedad perspective CSS determina la distancia entre el plano z=0 y el usuario para dar algo de perspectiva al elemento 3D posicionado. Cada elemento 3D con z>0 se hace más grande y con z<0 se vuelve más pequeño. La intensidad del efecto es determinado por el valor de esta propiedad.

+ +

Parte de los elementos 3D que se encuentran destrás del usuario, es decir que su coordenada del eje z es mayor que el valor de la propiedad perspective de CSS no es dibujada.

+ +

La posición de origen que se usará para la transformación es por defecto colocado en el centro del elemento, pero su posición puede ser cambiada usando la propiedad {{ cssxref("perspective-origin") }}.

+ +

Usando esta propiedad con un valor diferente a 0 y none se crea un nuevo contexto de apilamiento.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Sintaxis Formal: {{csssyntax("perspective")}}
+ +
perspective: none
+perspective: 20px     /* <longitud> valores */
+perspective: 3.5em
+
+perspective: inherited
+
+ +

Valores

+ +
+
none
+
Es una palabra clave que indica que ninguna transformación de perspectiva será aplicada.
+
<length>
+
Es una {{cssxref("<length>")}} dando la distancia desde el usuario al plano z=0. Esta es usada para aplicar una transformación de perspectiva al elemento  y su contenido. Si es 0 o un valor negativo, no se aplica una transformación de la perspectiva.
+
+ +

Ejemplos

+ +
+ + + + + + + + + + + + + +
perspective:250px;perspective:350px;perspective:500px;
+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecifiaciónEstadoComentario
{{ Specname('CSS3 Transforms', '#perspective', 'perspective') }}{{ Spec2('CSS3 Transforms') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico12{{ property_prefix('-webkit') }}{{ CompatGeckoDesktop("10") }}{{ property_prefix('-moz') }}
+ {{ CompatGeckoDesktop("16") }}		1015{{ property_prefix('-webkit') }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico3.0{{ property_prefix('-webkit') }}{{ CompatGeckoMobile("10") }}{{ property_prefix('-moz') }}
+ {{ CompatGeckoMobile("16") }}		{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ property_prefix('-webkit') }}
+
+ +

Ver también

+ + diff --git a/files/es/web/css/porcentaje/index.html b/files/es/web/css/porcentaje/index.html new file mode 100644 index 0000000000..c6629803fe --- /dev/null +++ b/files/es/web/css/porcentaje/index.html @@ -0,0 +1,126 @@ +--- +title: +slug: Web/CSS/porcentaje +translation_of: Web/CSS/percentage +--- +

{{CSSRef}}

+ +

Sumario

+ +

Los tipos de dato <porcentaje> de CSS representan un valor en forma de porcentaje. Muchas propiedades de CSS pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <numero> seguido por el signo de porcentaje %. No hay un espacio entre el '%' y el numero.

+ +

Varias propriedades de longitud usan porcentajes, tales como width, margin y padding. Los porcentajes tambien se pueden ver en font-size, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.

+ +
Nota: Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor <length>, sera accesible en la propiedad heredada, no el valor porcentual.
+ +

Interpolación

+ +

Los valores del tipo de dato <porcentaje> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la funcion de temporizacion asociada con la animacion.

+ +

Examples

+ +
<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
+</div>
+
+ +

El codigo de arriba se va a renderizar así:

+ +
+
Width: 50%, Left margin: 20%
+ +
Width: 30%, Left margin: 60%
+
+ +

 

+ +
<div style="font-size:18px;">
+  Full size text (18px)
+  <span style="font-size:50%;">50%</span>
+  <span style="font-size:200%;">200%</span>
+</div>
+
+ +

El codigo de arriba de renderizara así:

+ +
Full size text (18px) 50% 200%
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstatusComentarios
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}{{ Spec2('CSS3 Values') }}No hay cambios significantes desde CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}{{ Spec2('CSS2.1') }}No hay cambios desde CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}{{ Spec2('CSS1') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico1.01.0 (1.0)<=5.0yes1.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basicosisisisisi
+
diff --git a/files/es/web/css/position/index.html b/files/es/web/css/position/index.html new file mode 100644 index 0000000000..c9181f456f --- /dev/null +++ b/files/es/web/css/position/index.html @@ -0,0 +1,305 @@ +--- +title: position +slug: Web/CSS/position +tags: + - Referencia_CSS +translation_of: Web/CSS/position +--- +
{{CSSRef}}
+ +

La propiedad position de CSS especifica cómo un elemento es posicionado en el documento. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y {{Cssxref("left")}} determinan la ubicación final de los elementos posicionados.

+ +
{{EmbedInteractiveExample("pages/css/position.html")}}
+ + + +

Tipos de posicionamiento

+ +
    +
  • Un elemento posicionado es un elemento cuyo valor computado de position es relative, absolute, fixed, o sticky. (En otras palabras, cualquiera excepto static).
    • +
  • Un elemento posicionado relativamente es un elemento cuyo valor computado de position es relative. Las propiedades {{Cssxref("top")}} y {{Cssxref("bottom")}} especifican el desplazamiento vertical desde su posición original; las propiedades {{Cssxref("left")}} y {{Cssxref("right")}} especifican su desplazamiento horizontal.
    • +
  • Un elemento posicionado absolutamente es un elemento cuyo valor computado de  position es absolute o fixed. Las propiedades {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, y  {{Cssxref("left")}} especifican el desplazamiento desde los bordes del bloque contenedor del elemento. (El bloque contenedor es el ancestro relativo al cual el elemento está posicionado). Si el elemento tiene márgenes, se agregarán al desplazamiento. el elemento establece un nuevo contexto de formato de bloque para su contenido
    • +
  • Un elemento posicionado fijamente es un elemento cuyo valor de  position computado es sticky. Es tratado como un elemento posicionado relativamente hasta que su bloque contenedor cruza un límite establecido (como por ejemplo dando a {{Cssxref("top")}} cualquier valor distinto de auto), dentro de su flujo principal (o el contenedor dentro del cual se mueve), desde el cual es tratado como "fijo" hasta que alcance el borde opuesto de su bloque contenedor.
    • +
+ +

La mayoría de las veces, los elementos absolutamente posicionados que tienen su {{Cssxref("height")}} y {{Cssxref("width")}} establecidos en auto son ajustados hasta acomodarse a su contenido. Sin embargo, elementos non-replaced y absolutamente posicionados se pueden crear para llenar el espacio vertical disponible, especificando tanto {{Cssxref("top")}} como {{Cssxref("bottom")}}, y dejando {{Cssxref("height")}} sin especificar (es decir, auto). De igual manera se pueden utilizar para llenar el espacio horizontal disponible especificando tanto {{Cssxref("left")}} como {{Cssxref("right")}}, y dando a {{Cssxref("width")}} el valor de auto.

+ +

A excepción del caso anteriormente descrito (de elementos posicionados absolutamente rellenando el espacio disponible):

+ +
    +
  • Si ambos, top y bottom están especificados (técnicamente, no auto), top gana.
    • +
  • Si ambos, left y right, están especificados,  left gana cuando {{Cssref("direction")}} es ltr (Inglés, japonés horizontal, etc.) y right gana cuando {{Cssxref("direction")}} es rtl (Persa, árabe, hebreo, etc.).
    • +
+ +

Sintaxis

+ +

La propiedad position es especificada como una palabra única elegida de la siguiente lista de valores.

+ +

Valores

+ +
+
static
+
El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("z-index")}} no tienen efecto. Este es el valor por defecto.
+
relative
+
El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a sí mismo, con base en los valores de top, right, bottom, and left. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio que se le da al elemento en el esquema de la página es el mismo como si la posición fuera static. Este valor crea un nuevo contexto de apilamiento, donde el valor de z-index no es auto. El efecto que tiene relative sobre los elementos table-*-group, table-row, table-column, table-cell, y table-caption no está definido.
+
absolute
+
El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado relativo a su ancestro posicionado más cercano, si lo hay; de lo contrario, se ubica relativo al bloque contenedor inicial. Su posición final está determinada por los valores de top, right, bottom, y left.
+
Este valor crea un nuevo contexto de apilamiento cuando el valor de z-index no es auto. Elementos absolutamente posicionados pueden tener margen, y no colapsan con ningún otro margen.
+
fixed
+
El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al bloque contenedor inicial establecido por el {{glossary("viewport")}}, excepto cuando uno de sus ancestros tiene una propiedad transform, perspective, o filter establecida en algo que no sea none (ver CSS Transforms Spec), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador con perspective y filter contribuyendo a la formación del bloque contenedor.) Su posición final es determinada por los valores de top, right, bottom, y left.
+
Estos valores siempre crean un nuevo contexto de apilamiento. En documentos impresos, el elemento se coloca en la misma posición en cada página.
+
sticky {{experimental_inline}}
+
El elemento es posicionado de acuerdo al flujo normal del documento, y luego es desplazado con relación a su ancestro que se desplace más cercano y su bloque contenedor (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a tablas, basados en los valores de top, right, bottom, y left. El desplazamiento no afecta la posición de ningún otro elmento.
+
Estos valores siempre crean un nuevo contexto de apilamiento. Nótese que un elemento sticky se "adhiere" a su ancestro más cercano que tiene un "mecanismo de desplazamiento" (creado cuando el overflow es hidden, scroll, auto, o bien overlay), aún si ese ancestro no es el ancestro con desplazamiento más cercano. Esto inhibe efectivamente el comportamiento "sticky" (ver el Github issue en W3C CSSWG).
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Examples

+ +

Posicionamiento relativo

+ +

Elementos posicionados relativamente son desplazados una cantidad dada de su posición normal en el documento, pero sin que su desplazamiento afecte a otros elementos. En el ejemplo siguiente, nótese cómo los demás elementos se ubican como si "Two" estuviera ocupando el lugar de su ubicación normal.

+ +

HTML

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+
+ +

CSS

+ +
.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+
+ +

{{ EmbedLiveSample('Relative_positioning', '600px', '200px') }}

+ +

Posicionamiento absoluto

+ +

Los elementos posicionados relativamente se mantienen en el flujo normal del documento. Por el contrario, un elemento posicionado absolutamente es removido del flujoñ de esta manera, los demás elementos se posicionan como si el mismo no existiera. El elemento posicionado absolutamente se posiciona relativamente a suancestro posicionado más cercano (es decir, el ancestro más cercano que no es static). Si no hay ningún ancestro posicionado se ubica relativo al bloque contenedor inicial. En el ejemplo siguiente, la caja "Two" no tiene un ancestro posicionado, por lo tanto se posiciona relativo al <body> del documento.

+ +

HTML

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+ +

CSS

+ +
.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+ +

{{ EmbedLiveSample('Absolute_positioning', '800px', '200px') }}

+ +

Posicionamiento fijo

+ +

El posicionamiento fijo es similar al posicionamiento absoluto, con la excepción de que el bloque contenedor del elemento es el viewport. Esto puede usarse para crear un elemento flotante que se mantiene en la misma posición independientemente del desplazamiento. En el ejemplo siguiente, la caja "One" está fijada a 80 pixels del límite superior de la página y 10 pixels a la izquierda. Aún luego de desplazarse, se mantiene en el mismo lugar relativo al viewport.

+ +
<div class="outer">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <div class="box" id="one">One</div>
+</div>
+
+ +

CSS

+ +
.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+
+ +

{{ EmbedLiveSample('Fixed_positioning', '800px', '300px') }}

+ +

Posicionamiento sticky

+ +

El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre. Por ejemplo...

+ +
#one { position: sticky; top: 10px; }
+ +

...posicionaría el elemento con id uno relativamente hasta que el viewport sea desplazado de manera tal que el elemento esté a menos de 10 píxeles del límite superior. Más allá de ese umbral, el elemento sería fijado a 10 píxeles del límite superior.

+ +

Un uso común para el posicionamiento sticky es para los encabezados en una lista alfabética. El encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A" hasta que se hayan desplazado más allá de la pantalla. En vez de deslizarse fuera de la pantalla como el resto del contenido, el encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente.  Se debe especificar un umbral con al menos uno de top, right, bottom, or left para que el posicionamiento sticky se comporte de forma esperada. Caso contrario, será indistinguible del posicionamiento relativo.

+ +

HTML

+ +
<dl>
+  <div>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </div>
+  <div>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </div>
+  <div>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </div>
+  <div>
+    <dt>T</dt>
+    <dd>Ted Leo &amp; The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </div>
+</dl>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+dl > div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+
+ +

{{ EmbedLiveSample('Sticky_positioning', '500px', '300px') }}

+ +
    +
+ +

Consideraciones de accesibilidad

+ +

Asegurarse de que los elementos posicionados con valor absolute o fixed no oscurezcan el resto del contenido cuando la página sea ampliada para aumentar el tamaño del texto.

+ + + +

Performance y accesibilidad

+ +

Los elementos que se desplazan que contienen contenido fixed o sticky content pueden ocasionar problemas de performance y accesibilidad. Mientras un usuario desplaza la página, el navegador debe realizar repaint del contenido sticky o fijo en una nueva locación. Dependiendo del contenido que precisa ser repainted, la performance del navegador y la velocidad de procesamiento del dispositivo, el navegador podría no ser capaz de realizar el repaint a 60 fps, ocasionando problemas de accesibilidad para personas con sensibilidades y desprolijidad para todos. Una solución es agregar {{cssxref("will-change", "will-change: transform")}} a los elementos posicionados para renderizar el elemento en su propia capa, mejorando la velocidad del repaint y por lo tanto mejorando performance y accesibilidad.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónStatusComentario
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}Añade valor de la propiedad sticky.
+ +

{{cssinfo}}

+ +

Compatibilidad

+ + + +

{{Compat("css.properties.position")}}

diff --git a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html new file mode 100644 index 0000000000..36c2fa1317 --- /dev/null +++ b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html @@ -0,0 +1,118 @@ +--- +title: Preguntas frecuentes sobre CSS +slug: Web/CSS/Preguntas_frecuentes_sobre_CSS +tags: + - CSS + - Proyecto MDC +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

Mi CSS es válida, pero no se representa correctamente

+

Los navegadores utilizan la declaración DOCTYPE para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos. El uso de una declaración DOCTYPE correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.

+

Los navegadores modernos tienen fundamentalmente dos modos de renderizado:

+
  • Quirks mode (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos. Los documentos con una declaración DOCTYPE incompleta, incorrecta o faltante o con una declaración DOCTYPE conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.
  • Standards Mode (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C. Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración DOCTYPE moderna será renderizada con el Modo estándar.
    • +
+

Los navegadores basados en Gecko tienen un tercer Modo casi estándar que tiene solo una peculiaridades menores.

+

Esta es una lista de las declaraciones DOCTYPE más utilizadas que activarán el Modo estándar o el Modo casi estándar:

+
<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+

Diferencia entre id y class

+

Los elementos HTML pueden tener un atributo id y / o un atributo class. El atributo id asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre. El atributo class asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo class. CSS te permite aplicar estilos a un atributo id y / o class concreto.

+

Utiliza un estilo específico de id cuando desees restringir las reglas de estilo a un bloque o elemento concreto. Este estilo lo usará un solo elemento con ese id concreto.

+

Usa un estilo específico de class cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.

+

Consulta Selectores CSS

+

Restaurar el valor de la propiedad predeterminado

+

Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.

+

Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como p ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.

+

Debido a la naturaleza en cascada de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.

+

Estilos derivados

+

CSS no permite que se defina un estilo según los términos de otro. (Consulta la nota de Eric Meyer acerca de la postura del Grupo de trabajo). Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.

+

Asignación de múltiples clases

+

A los elementos HTML se les pueden asignar varias clases listándolas  en el atributo class, con un espacio en blanco para separarlas.

+
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... contenido de las noticias de hoy ...
+</ div>
+
+

Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo class no es relevante.

+

Normas de estilo que no funcionan

+

Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones. Puedes utilizar las Reglas de estilo de CSS del Inspector DOM para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.

+
Jerarquía de los elementos HTML
+

La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos. Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.

+
.news { color: black; }
+. corpName {font-weight: bold; color: red;}
+
+<!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita -->
+<div class="news">
+   (Reuters) <span class="corpName"> General Electric </ span> (GE.NYS) anunció el jueves ...
+</ div>
+
+

En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.

+
Regla de estilo explícitamente redefinida
+

En las hojas de estilo CSS el orden es importante. Si defines una regla y luego vuelves a definirla, se usará la última definición.

+
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  otras reglas             */
+/*  otras reglas             */
+/*  otras reglas             */
+.stockSymbol { font-weight: normal; }
+
+<!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</ div>
+
+

Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.

+
Uso de una propiedad abreviada
+

Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta. Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente. Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.

+
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</ div>
+
+

En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas es importante.

+
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana; / * font-weight es ahora normal * /
+}
+
+
Uso del selector *
+

El selector * se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.

+
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</ div>
+
+

En este ejemplo, el selector body * aplica la regla a todos los elementos dentro del cuerpo (body), en cualquier nivel de jerarquía, incluyendo redtext. Así font-weight: bold; aplicada a la clase boldtext se reemplaza por font-weight: normal; aplicada a redtext.

+
Especificidad en CSS
+

Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo. El estilo en línea (en los atributos HTML style) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.

+
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+

Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el capítulo 6.4.3 de la Especificación CSS 2.1

+

¿Qué hacen las propiedades -moz-*?

+

Por favor, consulta la página Extensiones CSS de Mozilla.

+

 

+

{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}

diff --git a/files/es/web/css/primeros_pasos/index.html b/files/es/web/css/primeros_pasos/index.html new file mode 100644 index 0000000000..c6eb218230 --- /dev/null +++ b/files/es/web/css/primeros_pasos/index.html @@ -0,0 +1,39 @@ +--- +title: Primeros pasos +slug: Web/CSS/Primeros_pasos +--- +

 

+

Introducción

+

Este tutorial es una introducción a las hojas de estilo en cascada (CSS).

+

Te guiará a través de las funcionalidades básicas de CSS con ejemplos prácticos que puedes poner a prueba en tu propio equipo. Tiene dos partes.

+
  • La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.
    • +
+
  • La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.
    • +
+

El tutorial está basado en la especificación 2.1 de CSS 2.1.

+

¿Quién debe usar este tutorial?

+

Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.

+

Si eres un principiante en CSS, usa la primera parte del tutorial para entender CSS y aprender cómo usarlo. Después usa la segunda parte para entender el alcance de CSS en Mozilla.

+

Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.

+

Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.

+

¿Qué necesitas antes de empezar?

+

Para obtener lo mejor de este tutorial, necesitas un editor de archivos de texto y un navegador basado en Mozilla (Firefox o SeaMonkey). Deberías tener conocimientos básicos de cómo usarlos.

+

Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.

+

Unas pequeñas partes del tutorial requieren otros programas de Mozilla. Esas partes son opcionales. Si no quieres descargar otras aplicaciones de Mozilla, puedes saltearte esas partes. El otro software de Mozilla que se referencia en este tutorial incluye:

+ +

Nota:  CSS brinda formas de trabajar con el color, así que partes de este tutorial dependen del color. Puedes usar estas partes fácilmente si tienes un monitor a color y una visión de colores normal.

+

Cómo usar este tutorial

+

Para usar este tutorial, lee las páginas detenidamente y en orden. Si pierdes una página, podrá resultarte difícil entender las páginas posteriores.

+

En cada página, usa la sección de Información para entender cómo funciona CSS. Usa la sección Acción para probar el uso de CSS en tu propio equipo.

+

Para probar que hayas entendido, haz el desafío al final de cada página. Las soluciones a los desafíos están enlazados debajo de ellos, así no necesitas mirarlos si no quieres hacerlo.

+

Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título Más detalles. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.

+

Primera parte del tutorial

+

Una guía básica paso a paso de CSS.

+
  1. What is CSS
  2. Why use CSS
  3. How CSS works
  4. Cascading and inheritance
  5. Selectors
  6. Readable CSS
  7. Text styles
  8. Color
  9. Content
  10. Lists
  11. Boxes
  12. Layout
  13. Tables
  14. Media
    15. +
+

Segunda parte del tutorial

+

Ejemplos que muestran el alcance del CSS en Mozilla.

+
  1. JavaScript
  2. XBL bindings
  3. XUL user interfaces
  4. SVG graphics
  5. XML data
    6. +
+

{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "es": "es/CSS/Primeros_pasos", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/es/web/css/pseudo-classes/index.html b/files/es/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..05c4789b5f --- /dev/null +++ b/files/es/web/css/pseudo-classes/index.html @@ -0,0 +1,135 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Referencia CSS + - Selectores + - pseudo-clases +translation_of: Web/CSS/Pseudo-classes +--- +

{{ CSSRef() }}

+ +

Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado. Por ejemplo,  {{ Cssxref(":hover") }} aplicará un estilo cuando el usuario haga hover sobre el elemento especificado por el selector.

+ +
div:hover {
+  background-color: #F89B4D;
+}
+ +

Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento, sino también en relación a factores externos como el historial del navegador ({{ cssxref(":visited") }}, por ejemplo), el estado de su contenido (como {{ cssxref(":checked") }} en algunos elementos de formulario), o la posición del ratón (como {{ cssxref(":hover") }} que permite saber si el ratón está encima de un elemento o no).

+ +
+

Nota: En lugar de usar pseudoclases, {{cssxref("pseudo-elements")}} puede usarse para dar estilo a una parte específica de un elemento.

+
+ +

Sintaxis

+ +
selector:pseudoclase { propiedad: valor; }
+
+ +

Al igual que las clases, se pueden concatenar la cantidad de pseudoclases que se deseen en un selector.

+ +

Indice de las pseudo-clases estándar

+ +
+
    +
  • {{ Cssxref(":active") }}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":default") }}
    • +
  • {{ Cssxref(":dir", ":dir()")}}
    • +
  • {{ Cssxref(":disabled") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":first") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":fullscreen") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":indeterminate") }}
    • +
  • {{ Cssxref(":in-range") }}
    • +
  • {{ Cssxref(":invalid") }}
    • +
  • {{ Cssxref(":lang", ":lang()") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":left") }}
    • +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":not", ":not()") }}
    • +
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • +
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • +
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • +
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • +
  • {{ Cssxref(":only-child") }}
    • +
  • {{ Cssxref(":only-of-type") }}
    • +
  • {{ Cssxref(":optional") }}
    • +
  • {{ Cssxref(":out-of-range") }}
    • +
  • {{ Cssxref(":read-only") }}
    • +
  • {{ Cssxref(":read-write") }}
    • +
  • {{ Cssxref(":required") }}
    • +
  • {{ Cssxref(":right") }}
    • +
  • {{ Cssxref(":root") }}
    • +
  • {{ Cssxref(":scope") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":valid") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Fullscreen') }}{{ Spec2('Fullscreen') }}Definido :fullscreen.
{{ SpecName('HTML WHATWG') }}{{ Spec2('HTML WHATWG') }}Ningún cambio desde {{ SpecName('HTML5 W3C') }}.
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Definido :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column(), and :matches().
+ Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS3 Selectors')}} y en {{SpecName('HTML5 W3C')}} (Aunque el significado semántico no fuera absorbido).
{{ SpecName('HTML5 W3C') }}{{ Spec2('HTML5 W3C') }}Define el significado semántico en el contexto HTML de :link, :visited, :active, :enabled, :disabled, :checked, and :indeterminate.
+ Definido :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write, y :dir().
{{ SpecName('CSS3 Basic UI') }}{{ Spec2('CSS3 Basic UI') }}Definido :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, y :read-write, pero sin el significado semántico asociado.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Definido :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty, y :not().
+ Define la sintaxis de :enabled, :disabled, :checked, y :indeterminate, pero sin el significado semántico asociado.
+ Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS2.1')}}.
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Definido :lang(), :first-child, :hover, y :focus.
+ Ningún cambio significativo para las pseudo-clases difinidas en {{SpecName('CSS1')}}.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definido :link, :visited, y :active, pero sin el significado semántico asociado.
diff --git a/files/es/web/css/pseudoelementos/index.html b/files/es/web/css/pseudoelementos/index.html new file mode 100644 index 0000000000..c65b904163 --- /dev/null +++ b/files/es/web/css/pseudoelementos/index.html @@ -0,0 +1,86 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudoelementos +tags: + - CSS + - Pseudo-element + - Pseudo-elementos + - Selectores +translation_of: Web/CSS/Pseudo-elements +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.

+ +

Sintaxis

+ +
selector::pseudo-elemento { propiedad: valor; }
+ +

Lista de pseudoelementos

+ +
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
+ +

Notas

+ +

De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.

+ +
Nota: ::selection siempre se escribe con dos puntos dobles (::).
+ +

Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión inferiorSoporta
Internet Explorer8.0:pseudoelemento
9.0:pseudoelemento y ::pseudoelemento
Firefox (Gecko)1.0 (1.0):pseudoelemento
1.0 (1.5):pseudoelemento y ::pseudoelemento
Opera4.0:pseudoelemento
7.0:pseudoelemento y ::pseudoelemento
Safari (WebKit)1.0 (85):pseudoelemento y ::pseudoelemento
+ +

 

diff --git a/files/es/web/css/quotes/index.html b/files/es/web/css/quotes/index.html new file mode 100644 index 0000000000..138b4dce41 --- /dev/null +++ b/files/es/web/css/quotes/index.html @@ -0,0 +1,86 @@ +--- +title: quotes +slug: Web/CSS/quotes +tags: + - CSS + - Layout + - Maquetación + - Referencia + - Web +translation_of: Web/CSS/quotes +--- +
{{CSSRef}}
+ +

Sumario

+ +

La propiedad CSS quotes indica cómo debe renderizar las citas el navegador.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valor con palabras clave */
+quotes: none;
+
+/* Valor <string> */
+quotes: "«" "»";           /* Especifica open-quote y close-quote a las marcas de cita francesas */
+quotes: "«" "»" "‹" "›";   /* Especifica dos niveles de marcas de cita */
+
+/* Valores globales */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+
+ +

Valores

+ +
+
none
+
Los valores open-quote y close-quote de la propiedad {{cssxref("content")}} no renderiza marcas de cita.
+
[<string> <string>]+
+
Uno o más pares de valores {{cssxref("<string>")}} para open-quote y close-quote. El primer par representa el nivel más externo de citación, el segundo par es para el primer nivel anidado, el siguiente par para el siguiente nivel, y así sucesivamente.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
q { quotes: '"' '"' "'" "'" }
+q:before { content: open-quote }
+q:after  { content: close-quote }
+
+ +

Notas

+ +

Desde Firefox 3.5, el valor inicial de la propiedad de las citas se puede leer usando -moz-initial. Esto no es posible en versiones anteriores de Firefox.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoCommentario
{{ SpecName('CSS2.1', 'generate.html#quotes', 'quotes') }}{{ Spec2('CSS2.1') }}Definición inicial
+ +

Compatibilidad con navegadores

+ +{{Compat("css.properties.quotes")}} + +

Ver también

+ +
    +
  • {{ Cssxref("content") }}
    • +
diff --git a/files/es/web/css/radial-gradient()/index.html b/files/es/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..097caadf49 --- /dev/null +++ b/files/es/web/css/radial-gradient()/index.html @@ -0,0 +1,299 @@ +--- +title: radial-gradient() +slug: Web/CSS/radial-gradient() +tags: + - Función CSS + - Gráficos(2) + - Imagen CSS +translation_of: Web/CSS/radial-gradient() +--- +

{{CSSRef}}

+ +

La función CSS radial-gradient() crea una imagen ({{cssxref("<image>")}}) que representa un gradiente (degradado) de colores, generando un radio desde un origen, el centro (center) del gradiente. El resultado de esta función es un objeto de tipo de dato CSS {{cssxref("<gradient>")}}.

+ +

Los gradientes radiales son definidos por su centro (center), el contorno y posición de la figura resultante y los puntos de definición de color (color stops). El gradiente radial consiste, desde su centro hasta su figura resultante y potencialmente más allá, en figuras concénctricas sucesivas de escala uniforme, idénticas en su figura final. Los stops de color son posicionados en un rayo de gradiente virtual que va horizontalmente desde el centro hacia la derecha. La proporción para posicionar los stops de colores es relativa a la intersección entre la figura final y su rayo de gradiente, representando el 100%. Cada figura es monocolor, y definida por el color del rayo de gradiente al que cruza.

+ +

Las figuras resultantes solo pueden ser círculos (circle) o elipses (ellipse).

+ +

Como cualquier otro gradiente, un gradiente radial CSS no es un {{cssxref("<color>")}} CSS, sino una imagen sin dimensiones intrínsecas, es decir, no tiene un tamaño natural o predefinido, ni radio. Su tamaño concreto coincidirá con el del elemento al que se aplica.

+ +

La función radial-gradient no permite gradientes repetidos. Para dicha funcionalidad, use la función CSS {{Cssxref("repeating-radial-gradient")}}.

+ +

Sintaxis

+ +
// Definición de la figura
+radial-gradient( circle, … )                /* Sinónimo de radial-gradient( circle farthest-corner, … ) */
+radial-gradient( ellipse, … )               /* Sinónimo de radial-gradient( ellipse farthest-corner, … ) */
+radial-gradient( <extent-keyword>, … )      /* Dibuja un círculo */
+radial-gradient( circle radius, … )         /* Un círculo centrado con longitud dada. Puede ser un porcentaje */
+radial-gradient( ellipse x-axis y-axis, … ) /* Los dos ejes semi-mayores son indicados, horizontal y después vertical */
+
+// Definición de la posición de la figura
+radial-gradient ( … at <position>, … )
+
+// Definición de los stops de colores
+radial-gradient ( …, <color-stop>, … )
+radial-gradient ( …, <color-stop>, <color-stop> )
+ +

Valores

+ +
+
<position>
+
Una posición ({{cssxref("<position>")}}), interpretada de la misma forma que {{Cssxref("background-position")}} o {{Cssxref("transform-origin")}}. Si es omitida, su valor predeterminado es center.
+
<shape>
+
La figura del gradiente. Puede ser un valor circle (que indica que la figura del gradiente es un círculo con radio constante) o ellipse (que indica que la figura del gradiente es una elipse alineada por ejes). El valor predeterminado es ellipse.
+
<color-stop>
+
Representa un color fijo en una posición precisa, su valor está compuesto por un valor {{cssxref("<color>")}}, seguido por una posición opcional (que puede ser de tipo {{cssxref("<percentage>")}} o {{cssxref("<length>")}} a lo largo del rayo de gradiente). Un porcentaje de 0%, o una longitud de 0, representan el centro del gradiente, mientras que el valor de 100% representa la intersección de la figura final con el rayo virtual de gradiente. Los valores porcentuales internos son posicionados linealmente en el rayo gradiente.
+
<extent-keyword>
+
Valores clave que describen la longitud de la figura resultante. Los valores posibles son:
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescripción
closest-sideLa figura resultante coincide con el lado de la caja más cercano al centro (para los círculos) o coincide con los lados vertical y horizontal más cercanos al centro (en caso de elipses).
closest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más cercana desde el centro del gradiente.
farthest-sideSimilar a closest-side, excepto que el tamaño de la figura resultante coincide con el lado de la caja más lejano al centro (o los lados vertical y horizontal).
farthest-cornerEl tamaño de la figura resultante coincide exactamente con la esquina de la caja más lejana al centro del gradiente.
+ Los borradores anteriores del estándar incluyeron otras palabras clave (cover y contain) como sinónimos de los estándares farthest-corner y closest-side respectivamente. Use solo las palabras clave estándar, pues algunas implementaciones ya no soportan las variantes anteriores.
+
+ +

Sintaxis formal

+ +
radial-gradient(
+  [ [ circle || {{cssxref("<length>")}} ]                         [ at {{cssxref("<position>")}} ]? , |
+    [ ellipse || [ <length> | {{cssxref("<percentage>")}} ]{2} ]  [ at <position> ]? , |
+    [ [ circle | ellipse ] || <extent-keyword> ]   [ at <position> ]? , |
+    at <position> ,
+  ]?
+  <color-stop> [ , <color-stop> ]+
+)
+where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
+  and <color-stop>     = <color> [ <percentage> | <length> ]?
+
+ +

Ejemplo 1

+ +

Usando el siguiente código CSS podemos obtener un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de turquesa (#00FFFF), a blanco, a azul (#0000FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+}
+ +

{{ EmbedLiveSample('Example_1') }}

+ +

Ejemplo 2

+ +

Este código generará un fondo de elipse in la esquina más lejana (farthest-corner) a 470px 45px, cambiando el color de amarillo (#FFFF80), a marrón pálido, a azul pálido (#E6E6FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
+}
+ +

{{ EmbedLiveSample('Example_2') }}

+ +

Ejemplo 3

+ +

Este código generará un fondo de elipse en la esquina más lejana (farthest-corner) a 45px 45px, cambiando el color de rojo (#FF0000) a azul (#0000FF):

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
+}
+ +

{{ EmbedLiveSample('Example_3') }}

+ +

Ejemplo 4

+ +

Este código producirá un círculo difuso con radio de 16px:

+ +
body {
+  width: 100vh;
+  height: 100vh;
+  background-image:  radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+}
+ +

{{ EmbedLiveSample('Example_4') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()')}}{{Spec2('CSS3 Images')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}		10.0 (534.16){{property_prefix("-webkit")}}[2]10.0[3]11.60{{property_prefix("-o")}}5.1{{property_prefix("-webkit")}}[2]
En {{cssxref("border-image")}}{{CompatGeckoDesktop("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatNo}}3{{property_prefix("-webkit")}}[2]{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}[2]
Sintaxis de at (sintaxis estándar final){{CompatGeckoDesktop("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16")}}[4]		2610.011.60{{property_prefix("-o")}}[2]
+ 2.12		{{CompatNo}}
Consejos de interpolación (un porcentaje sin color){{CompatGeckoDesktop("36")}}40 27 
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico (en {{cssxref("background")}} y {{cssxref("background-image")}}){{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En {{cssxref("border-image")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("29")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
En cualquier propiedad que acepte el tipo {{cssxref("<image>")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxis anterior de webkit {{non-standard_inline}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxis de at (sintaxis estándar final){{CompatUnknown}}{{CompatGeckoMobile("10")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoMobile("16")}}		10{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Implementado en Firefox 3.6 usando prefijo, y sintaxis anterior. Antes de Firefox 36, Gecko no aplicaba gradientes en espacios de color premultiplicado, provocando que apareciera una sombra gris cuando se usaba con transparencia. Desde Firefox 42, la versión con prefijo puede ser deshabilitada estableciendo la opción layout.css.prefixes.gradients en false.

+ +

[2] Implementado en WebKit usando prefijo, y sintaxis anterior. WebKit desde la versión 528 soporta la función anterior -webkit-gradient(radial,…). Véase también su soporte actual para gradientes radiales.

+ +

[3] Internet Explorer 5.5 a 9.0 soporta la propiedad exclusiva filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[4] Además del soporte sin prefijo, Gecko 44.0 {{geckoRelease("44.0")}} incluye soporte para una versión con prefijo -webkit de la función, por razones de compatibilidad, dentro de la opción layout.css.prefixes.webkit, con valor false de forma predeterminada. Desde Gecko 49.0 {{geckoRelease("49.0")}} el valor predeterminado de esa opción es true.

+ +

Véase también

+ + diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/referencia_css/index.html new file mode 100644 index 0000000000..63c52a6cdb --- /dev/null +++ b/files/es/web/css/referencia_css/index.html @@ -0,0 +1,246 @@ +--- +title: Referencia CSS +slug: Web/CSS/Referencia_CSS +tags: + - CSS + - Referencia CSS + - para_revisar +translation_of: Web/CSS/Reference +--- +
+

Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.

+ +

Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.

+ +

La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.

+Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.
+ +

Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.

+ +

Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.

+ +

Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.

+ +

Sintaxis de regla básica

+ +

Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.

+ +

Sintaxis de regla de estilo

+ +
selectorlist {
+   property: value; 
+   [more property:value; pairs] 
+}
+
+...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+Ver selector, pseudo-elemento, pseudo-clase más abajo.
+
+
+ +

Ejemplos de reglas de estilo

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.

+ +

Sintaxis de las reglas-at (@rules)

+ +

Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.

+ +

Índice de palabras clave

+ +
+

Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.

+
+ +
{{CSS_Ref}}
+ +

Selectores

+ +

Selectores básicos

+ + + +

Combinadores

+ + + +

Pseudo-clases

+ +
+
    +
  • {{ Cssxref(":active") }}
    • +
  • {{ Cssxref(':any')}}
    • +
  • {{ Cssxref(':any-link')}}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":default") }}
    • +
  • {{ Cssxref(":defined") }}
    • +
  • {{ Cssxref(":dir", ":dir()")}}
    • +
  • {{ Cssxref(":disabled") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":first") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":fullscreen") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":focus-visible") }}
    • +
  • {{ Cssxref(":host") }}
    • +
  • {{ Cssxref(":host()") }}
    • +
  • {{ Cssxref(":host-context()") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":indeterminate") }}
    • +
  • {{ Cssxref(":in-range") }}
    • +
  • {{ Cssxref(":invalid") }}
    • +
  • {{ Cssxref(":lang", ":lang()") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":left") }}
    • +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":not", ":not()") }}
    • +
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • +
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • +
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • +
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • +
  • {{ Cssxref(":only-child") }}
    • +
  • {{ Cssxref(":only-of-type") }}
    • +
  • {{ Cssxref(":optional") }}
    • +
  • {{ Cssxref(":out-of-range") }}
    • +
  • {{ Cssxref(":read-only") }}
    • +
  • {{ Cssxref(":read-write") }}
    • +
  • {{ Cssxref(":required") }}
    • +
  • {{ Cssxref(":right") }}
    • +
  • {{ Cssxref(":root") }}
    • +
  • {{ Cssxref(":scope") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":valid") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
+
+ +

Pseudo-elementos

+ +
+
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::cue") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
+
+ +
+

Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.

+
+ +

Conceptos

+ +

Sintaxis y semántica

+ + + +

Valores

+ + + +

Diseño

+ + + +

DOM-CSS / CSSOM

+ +

Tipos de objetos principales

+ + + +

Métodos importantes

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
+ +

Tutoriales CSS3

+ +

Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:

+ + + +

Ver también

+ + diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/referencia_css/mix-blend-mode/index.html new file mode 100644 index 0000000000..fc213a4ceb --- /dev/null +++ b/files/es/web/css/referencia_css/mix-blend-mode/index.html @@ -0,0 +1,611 @@ +--- +title: mix-blend-mode +slug: Web/CSS/Referencia_CSS/mix-blend-mode +tags: + - CSS +translation_of: Web/CSS/mix-blend-mode +--- +
{{CSSRef}}
+ +

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

Syntax

+ +
/* Valores clave */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valores globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

Valores

+ +
+
{{cssxref("<blend-mode>")}}
+
El modo de mezcla que debería ser aplicado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + +
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

Ejemplo vivo

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
+
+ +

{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

Véase también

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/es/web/css/repeat()/index.html b/files/es/web/css/repeat()/index.html new file mode 100644 index 0000000000..04b53caa45 --- /dev/null +++ b/files/es/web/css/repeat()/index.html @@ -0,0 +1,147 @@ +--- +title: repeat() +slug: Web/CSS/repeat() +tags: + - CSS + - CSS Grid + - Función CSS + - Layout + - Maquetado + - Referencia + - Web +translation_of: Web/CSS/repeat() +--- +
{{cssref}}
+ +

La función CSS repeat() representa un fragmento repetido de la lista de la pista, permitiendo un gran número de columnas o renglones que exhiben un patrón recurrente para ser escrito de una forma más compacta.

+ +

Esta función puede ser usada en las propiedades CSS Grid {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

+ +
/* <track-repeat> values */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* <auto-repeat> values */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+repeat(auto-fit, [col-start] 250px [col-end])
+repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
+repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+/* <fixed-repeat> values */
+repeat(4, 250px)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] minmax(100px, 1fr) [col-end])
+repeat(4, [col-start] fit-content(200px) [col-end])
+repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
+
+ +

Síntaxis

+ +

Valores

+ +
+
{{cssxref("<length>")}}
+
Una longitud no negativa.
+
{{cssxref("<percentage>")}}
+
Un porcentaje no negativo relativo con el tamaño en línea del contenedor de la cuadrícula en las pistas de la cuadrícula de columna, y el tamaño del bloque del contenedor de la cuadrícula en las pistas de la cuadrúcula de la fila. Si el tamaño de la rejilla depende del tamaño de sus pistas, entonces el <percentage> debe ser tratado como auto. El agente de usuario puede ajustar las contribuciones de tamaño intrínseco de la pista al tamaño del contenedor de la rejilla y aumentar el tamaño final de la pista en la cantidad que resultaría en respetar el porcentaje.
+
{{cssxref("<flex>")}}
+
Una dimensión no negativa con la unidad fr especificando el factor flexible de la pista. Cada pista de tamaño <flex> comparte el espacio restante en proporción a su factor flex
+
max-content
+
Representa la contribución mas grande de max-content de los elementos de la cuadrícula ocupando la pista.
+
min-content
+
Representa la contribución más pequeña min-content de los elementos de la cuadrícula ocupando la pista.
+
auto
+
Como un máximo, idéntico a max-content. Como un mínimo representa el mayor tamaño mínimo (como se específica en {{cssxref("min-width")}}/{{cssxref("min-height")}}) de los elementos de la cuadrícula ocupando la pista.
+
auto-fill
+
Si el contenedor de cuadrícula tiene un tamaño definido o máximo en el eje relevante, entonces el número de repeticiones es el mayor entero positivo posible que no hace que la cuadrícula desborde su contenedor de cuadrícula. Tratando cada pista con su función de dimensiones máximo de pista (cada valor se utiliza individualmente para definir grid-template-rows o grid-template-columns), si está definido. De lo contrario, como su función de tamaño mínimo de pista, y teniendo en cuenta la brecha de cuadrícula. Si se desbordara cualquier número de repeticiones, entonces la repetición es 1. De lo contrario, si el contenedor de la cuadrícula tiene un tamaño mínimo definido en el eje relevante, el número de repeticiones es el número entero positivo más pequeño posible que cumple ese requisito mínimo. De lo contrario, la lista de pistas especificada se repite solo una vez.
+
auto-fit
+
+

Se comporta igual que el autocompletado auto-fill, excepto que después de colocar los elementos de la cuadrícula se colapsan las pistas vacías repetidas. Una pista vacía es aquella sin elementos de cuadrícula colocados o que se extienden a través de ella. (Esto puede provocar el colapso de todas las pistas, si están todas vacías).

+ +

Una pista colapsada se trata como si tuviera una única función de tamaño de pista fija de 0px, y los canales (gutters) a cada lado de ella colapsan.

+ +

Con el fin de encontrar el número de pistas repetidas automáticamente, el agente de usuario distribuye el tamaño de la pista a un valor especificado por el agente de usuario (por ejemplo, 1px), para evitar la división por cero.

+
+
+ +

Ejemplo

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Este elemento tiene un ancho de 50 pixels.
+  </div>
+  <div>
+    Elemento con un ancho flexible.
+  </div>
+  <div>
+    Este elemento tiene un ancho de 50 pixels.
+  </div>
+  <div>
+    Elemento con un ancho flexible.
+  </div>
+  <div>
+    Este elemento tiene un ancho de 100 pixels.
+  </div>
+</div>
+ +

Resultados

+ +

{{EmbedLiveSample("Example", "100%", 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}Initial definition
+ +

Compatibilidad del navegador

+ + + +

{{Compat("css.properties.grid-template-columns.repeat")}}

diff --git a/files/es/web/css/resize/index.html b/files/es/web/css/resize/index.html new file mode 100644 index 0000000000..7f40b09236 --- /dev/null +++ b/files/es/web/css/resize/index.html @@ -0,0 +1,194 @@ +--- +title: resize +slug: Web/CSS/resize +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad resize de CSS permite controlar la capacidad de cambio de tamaño de un elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Keyword values */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+
+/* Global values */
+resize: inherit;
+resize: initial;
+resize: unset;
+
+ +

Valores

+ +
+
none
+
El elemento no efrece método para que el usuario controle el cambio de tamaño del elemento.
+
both
+
El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento el cual puede ser tanto horizontal como verticalmente.
+
horizontal
+
El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo horintalmente.
+
vertical
+
El elemento efrece un mecanismo que permite al usuario cambiar el tamaño del elemento sólo verticalmente.
+
+ +
Nota: resize no aplica abloques en los cuales la propiedad {{cssxref("overflow")}} es configurada como visible.
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Deshabilitando la capacidad de cambio de tamaño de areas de texto

+ +

CSS

+ +

Por defecto, los elementos {{HTMLElement("textarea")}} permiten cambiar el tamaño en {{gecko("2.0")}} (Firefox 4). Se puede anular este comportamiento con el CSS mostrado abajo:

+ +
textarea.example {
+  resize: none; /* disables resizability */
+}
+
+ +

HTML

+ +
<textarea class="example">Type some text here.</textarea>
+ +

Result

+ +

{{EmbedLiveSample("Deshabilitando_la_capacidad_de_cambio_de_tamaño_de_areas_de_texto","200","100")}}

+ +

Utilizando resize con elementos arbitrarios

+ +

Se puede utilizar la propiedad resize para permitir a cualquier elemento ofrecer el mecanismo para cambiar de tamaño. En el ejemplo de abajo, un bloque {{HTMLElement("div")}} contiene un parrafo (elemento {{HTMLElement("p")}}) que permite cambiar su tamaño:

+ +

CSS

+ +
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+
+ +

HTML

+ +
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable, because the CSS resize property is set to 'both' on this
+    element.
+  </p>
+</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Utilizando_resize_con_elementos_arbitrarios","450","450")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspacificaciónEstadoComentario
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}} 
+ +

Compatibilidad de Navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{HTMLElement("textarea")}})1.0{{CompatGeckoDesktop("2.0")}}{{ property_prefix("-moz") }}{{CompatNo}}{{CompatNo}}3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible)4.0{{ CompatGeckoDesktop("5.0") }}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{HTMLElement("textarea")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver también

+ +
    +
  • {{HTMLElement("textarea")}}
    • +
diff --git "a/files/es/web/css/resoluci\303\263n/index.html" "b/files/es/web/css/resoluci\303\263n/index.html" new file mode 100644 index 0000000000..b480413bb1 --- /dev/null +++ "b/files/es/web/css/resoluci\303\263n/index.html" @@ -0,0 +1,151 @@ +--- +title: +slug: Web/CSS/resolución +tags: + - CSS + - CSS tipo de datos + - Diseño + - Estilos + - Referencia +translation_of: Web/CSS/resolution +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <resolution>, usado en media queries,  define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (dpi, dpcm, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

+ +

En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.

+ +

Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: 0 es inválida y no representa 0dpi, 0dpcm, ni 0dppx.

+ +

Unidades

+ +
+
dpi
+
Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
+
dpcm
+
Esta unidad representa el número de  dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, 1dpcm ≈ 2.54dpi.
+
dppx
+
Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.
+
+ +

Ejemplos

+ +

Éstos son algunos de los usos correctos de valores <resolution>:

+ +
96dpi                                              Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit.
+@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una media query.
+
+ +

Here are some incorrect uses:

+ +
72 dpi                                             Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad.
+ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
+0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}.
+
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Factorización del tipo en una especificación más genérica. Ningún cambio
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}{{Spec2('CSS3 Images')}}Añadida la unidad dppx
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico293.5 (1.9.1)[1]99.5{{CompatNo}}[2]
dppx29{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}[2]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}[2]
dppx{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +

[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("<integer>")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("<number>")}} CSS válido seguido inmediatamente por la unidad).

+ +

[2] El Webkit engine no soporta resolución CSS  en la especificación, es necesario el uso del no estandar device-pixel-ratio query para el navegador Safari, ver bug 16832.

+ +

Ver también

+ + diff --git a/files/es/web/css/resolved_value/index.html b/files/es/web/css/resolved_value/index.html new file mode 100644 index 0000000000..f4da84636d --- /dev/null +++ b/files/es/web/css/resolved_value/index.html @@ -0,0 +1,38 @@ +--- +title: Valor resuelto +slug: Web/CSS/resolved_value +tags: + - CSS + - Referencia CSS +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

El valor resuelto (resolved value) de una propiedad CSS es el valor devuelto por {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Para la mayoría de las propiedades, esto es el {{cssxref("computed_value", "valor calculado") }}, pero para algunas propiedades antiguas (incluyendo {{cssxref("width")}} y {{cssxref("height")}}), éste es el {{cssxref("used_value", "valor usado")}}. Véase el enlace a la especificación a continuación para más detalles por propiedad.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}Definición inicial
+ +

Véase también

+ +
    +
  • Referencia CSS
    • +
  • {{CSS_key_concepts}}
    • +
  • {{domxref("window.getComputedStyle")}}
    • +
diff --git a/files/es/web/css/right/index.html b/files/es/web/css/right/index.html new file mode 100644 index 0000000000..db23189f44 --- /dev/null +++ b/files/es/web/css/right/index.html @@ -0,0 +1,93 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS Reference + - NeedsTechnicalReview + - Referencia_CSS +translation_of: Web/CSS/right +--- +

{{ CSSRef() }}

+ +

Sumario

+ +

La propiedad right especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).

+ +

Para los elementos con una posición absoluta (aquellos que tienen la propiedad {{ Cssxref("position") }}: absolute ó position: fixed), la propiedad right determina la distancia entre el margen derecho del elemento y el borde derecho de su bloque contenedor.

+ +
    +
  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
    • +
  • Se aplica a: positioned elements
    • +
  • {{ Xref_cssinherited() }}: no
    • +
  • Porcentajes: se refiere al ancho del bloque contenedor.
    • +
  • Media: {{ Xref_cssvisual() }}
    • +
  • {{ Xref_csscomputed() }}: valor absoluto, porcentaje ó auto.
    • +
+ +

Sintaxis

+ +
right: <length> | <percentage> | auto | inherit ;
+
+ +

Valores

+ +
+
{{cssxref("<length>")}} 
+
Una longitud, puede ser un valor negativo, cero, o un valor positivo.
+
{{cssxref("<percentage>")}} 
+
Un porcentaje del ancho del bloque contenedor.
+
+ +

Ejemplos

+ +
div {
+   position: absolute;
+   right: 20px;
+   height: 200px;
+   border: 1px solid #000;
+}
+
+ +

Notas

+ +

Especificaciones

+ + + +

Compatibilidad entre navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión mínima
Internet Explorer?
Firefox1
Netscape?
Opera?
Safari?
+ +

Ver también

+ +

{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("bottom") }}, {{ Cssxref("left") }}

diff --git a/files/es/web/css/rtl/index.html b/files/es/web/css/rtl/index.html new file mode 100644 index 0000000000..1fd8c9f45d --- /dev/null +++ b/files/es/web/css/rtl/index.html @@ -0,0 +1,22 @@ +--- +title: rtl +slug: Web/CSS/rtl +--- +

Sumario

+

El valor rtl es el valor que debe usarse para la propiedad CSS:direction si queremos escribir en lenguas táles como el Hebreo o el Árabe. El nombre viene de las iniciales de las palabras en inglés: Right To Left, que indican que el texto y otros elementos se han de representar de derecha a izquierda. +


+

+

Ejemplos

+
div {
+   position: absolute;
+   right: 20px;
+   height: 200px;
+   border: 1px solid #000;
+   direction: rtl;
+}
+
+


+

+

Ver también

+

{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} +

diff --git a/files/es/web/css/scroll-behavior/index.html b/files/es/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..b7b591d520 --- /dev/null +++ b/files/es/web/css/scroll-behavior/index.html @@ -0,0 +1,165 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +tags: + - CSS + - Propiedad CSS + - Referencia + - Vista CSSOM +translation_of: Web/CSS/scroll-behavior +--- +
{{ CSSRef }}
+ +

La propiedad CSS scroll-behavior especifica el comportamiento del desplazamiento para un elemento con desplazamiento, cuando éste se produce debido a la navegación o a APIs CSSOM. Otros desplazamientos, p.ej. aquellos realizados por el usuario, no se ven afectados por esta propiedad. Cuando esta propiedad está especificada en el elemento raíz, se aplica al viewport.

+ +

Esta propiedad puede ser ignorada por los agentes de usuario.

+ +
/* Keyword values */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Global values */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
auto
+
La caja de desplazamiento realiza el desplazamiento instantáneamente.
+
smooth
+
La caja se desplaza suavemente, utilizando una función de tiempo definida por el agente de usuario (user-agent) sobre un período de tiempo también definido por éste. Los agentes de usuario seguirán las convenciones de su propia plataforma, en caso de que existan.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>
+ +

CSS

+ +
a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+
+ +

Output

+ +

{{ EmbedLiveSample('Example', "100%", 250) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Initial specification
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico61[1]{{ CompatGeckoDesktop("36") }}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{ CompatGeckoDesktop("36") }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Soportado en Chrome and Opera activando las opciones"Smooth Scrolling" o "Enable experimental web platform features".

diff --git a/files/es/web/css/selectores_atributo/index.html b/files/es/web/css/selectores_atributo/index.html new file mode 100644 index 0000000000..a7b59d03c6 --- /dev/null +++ b/files/es/web/css/selectores_atributo/index.html @@ -0,0 +1,241 @@ +--- +title: Selectores de atributo +slug: Web/CSS/Selectores_atributo +tags: + - Atributos + - CSS + - Selectores + - Selectores de Atributo +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

El selector de atributos CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.

+ +
/* Elementos <a> con un atributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elementos <a> con un href que coincida con "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elementos <a> con un href que contenga "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elementos <a> con un href que comience con "#" */
+a[href^="#"] {
+  color: #001978;
+}
+
+/* Elementos <a> con un href que termine en ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+
+ +
+
[attr]
+
Selecciona los elementos que tienen el atributo attr.
+
[attr=value]
+
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.
+
[attr~=value]
+
+

Selecciona los elementos cuyo atributo attr tenga por valor una lista de palabras separadas por espacios, una de las cuales sea value.

+
+
[attr|=value]
+
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value o empiece por value seguido de un guión - (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.
+
[attr^=value]
+
Selecciona los elementos cuyo atributo attr tenga un valor prefijado  por value.
+
[attr$=value]
+
Selecciona los elementos cuyo atributo attr cuyo valor tiene el sufijo (seguido) de value.
+
[attr*=value]
+
Selecciona los elementos cuyo atributo attr tenga un valor que contenga value.
+
[attr operator value i]
+
Agregar una i (o I) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
+
[attr operator value s] {{Experimental_Inline}}
+
Agregar una s (o S) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
+
+ +

Ejemplos

+ +

Enlaces

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Enlaces internos, comenzando con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Enlaces con "example" en cualquier parte de la URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Enlaces con "insensitive" en cualquier parte de la URL,
+   independientemente de las mayúsculas */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Enlaces que terminan en ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Enlace interno</a></li>
+  <li><a href="http://example.com">Enlace de ejemplo</a></li>
+  <li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li>
+  <li><a href="http://example.org">Ejemplo de enlace .org</a></li>
+</ul>
+ +

Resultado

+ +

{{EmbedLiveSample('Enlaces')}}

+ +

Idiomas

+ +

CSS

+ +
/* Todos los divs con un atributo `lang` están en negrita. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Todos los divs en inglés de EE. UU. son azules. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Todos los divs en portugués son verdes. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Todos los divs en chino son rojos, ya sean
+   simplificados (zh-CN) o tradicionales (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Todos los divs con `data-lang` Traditional Chinese
+   son de color púrpura. */
+/* Nota: también puede usar atributos con guiones
+   sin comillas dobles */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+
+ +

Resultado

+ +

{{EmbedLiveSample('Idiomas')}}

+ +

Listas Ordenadas

+ +

{{SeeCompatTable}}

+ +

La especificación HTML requiere que el atributo {{htmlattrxref("type", "input")}} distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento {{HTMLElement("input")}}, tratando de usar selectores de atributos con el atributo {{htmlattrxref("type", "ol")}} de una {{HTMLElement("ol", "lista ordenada")}} no funciona sin el modificador de mayúsculas y minúsculas.

+ +

CSS

+ +
/*
+Los tipos de lista requieren poder distinguir entre mayúsculas
+y minúsculas debido al peculiar comportamiento que tiene HTML
+con el atributo "type"
+*/
+
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

Result

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Ver también

+ +
    +
  • Seleccionando un solo elemento:{{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, o {{domxref("Element.querySelector()")}}
    • +
  • Seleccionar todos los elementos coincidentes:{{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, o {{domxref("Element.querySelectorAll()")}}
    • +
  • Todos los métodos anteriores se implementan en base a {{domxref("ParentNode")}} mixin; vea  {{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}
    • +
diff --git a/files/es/web/css/selectores_css/index.html b/files/es/web/css/selectores_css/index.html new file mode 100644 index 0000000000..20baaf25a6 --- /dev/null +++ b/files/es/web/css/selectores_css/index.html @@ -0,0 +1,164 @@ +--- +title: Selectores CSS +slug: Web/CSS/Selectores_CSS +tags: + - CSS + - Referencia + - Selectores + - Selectores de CSS + - Visión general +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

+ +

Selectores básicos

+ +
+
Selector de tipo
+
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
+ Sintaxis: eltname
+ Ejemplo: input se aplicará a cualquier elemento {{HTMLElement('input')}}.
+
Selector de clase
+
Selecciona todos los elementos que tienen el atributo de class especificado.
+ Sintaxis: .classname
+ Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
+
Selector de ID
+
Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
+ Sintaxis: #idname
+ Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
+
Selector universal
+
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
+ Sintaxis: * ns|* *|*
+ Ejemplo: * se aplicará a todos los elementos del documento.
+
Selector de atributo
+
Selecciona elementos basándose en el valor de un determinado atributo.
+ Sintaxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
+
+ +

Combinadores

+ +
+
Combinador de hermanos adyacentes
+
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
+ Sintaxis: A + B
+ Ejemplo: La regla h2 + p se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
+
Combinador general de hermanos
+
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
+ Sintaxis: A ~ B
+ Ejemplo: La regla p ~ span se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
+
Combinador de hijo
+
El combinador > selecciona los elementos que son hijos directos del primer elemento.
+ Sintaxis: A > B
+ Ejemplo: La regla ul > li se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
+
Combinador de descendientes
+
El combinador   (espacio) selecciona los elementos que son descendientes del primer elemento.
+ Sintaxis: A B
+ Ejemplo: La regla div span se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
+
Combinador de columna {{Experimental_Inline}}
+
El combinador || selecciona los elementos especificados pertenecientes a una columna.
+ Sintaxis: A || B
+ Ejemplo: col || td seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.
+
+ +

Pseudoclases

+ +
+
Las pseudoclases permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.
+
Ejemplo: La regla a:visited se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.
+
+ +

Pseudoelementos

+ +
+
+

Los pseudoelementos son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.

+
+
Ejemplo: La regla p::first-line se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Añadidos el combinador de columna ||, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Añadidos el combinador ~ general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo :: de dos puntos dobles. Selectores de atributos adicionales.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Añadidos los combinadores > de elemento hijo y + de elementos hermanos adyacentes. Añadidos los selectores universal y de atributo.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html new file mode 100644 index 0000000000..fe51517a2b --- /dev/null +++ b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html @@ -0,0 +1,67 @@ +--- +title: 'Usando la pseudo-clase :target en selectores' +slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores' +tags: + - CSS + - CSS3 + - Selectores +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}

+ +

Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los Selectores CSS3 incluyen la pseudo-clase {{ Cssxref(":target") }}.

+ +

Seleccionando un objetivo (target)

+ +

La pseudo-clase {{ Cssxref(":target") }} es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example contiene el identificador de fragmento #Example. En HTML, los identificadores son valores de los atributos id o name, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.

+ +

Supongamos que se quiere estilizar cualquier elemento h2 que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:

+ +
h2:target {font-weight: bold;}
+ +

También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento #Example, escribiremos:

+ +
#Example:target {border: 1px solid black;}
+ +

Aplicando estilos a todos los elementos objetivo

+ +

Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:

+ +
:target {color: red;}
+
+ +

Ejemplo

+ +

En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <h1 id="one"> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Conclusión

+ +

En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.

+ + + + + +
+

Información del Documento Original

+ +
    +
  • Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications
    • +
  • Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.
    • +
  • Nota: El artículo en inglés era originalmente parte del sitio DevEdge.
    • +
+
diff --git a/files/es/web/css/selectores_hermanos_adyacentes/index.html b/files/es/web/css/selectores_hermanos_adyacentes/index.html new file mode 100644 index 0000000000..1200c4bd61 --- /dev/null +++ b/files/es/web/css/selectores_hermanos_adyacentes/index.html @@ -0,0 +1,135 @@ +--- +title: Selectores de hermanos adyacentes +slug: Web/CSS/Selectores_hermanos_adyacentes +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

+ +

Sintaxis

+ +
elemento_anterior + elemento_afectado { estilos }
+
+ +

Ejemplo

+ +
+
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>Uno</li>
+  <li>Dos</li>
+  <li>Tres</li>
+</ul>
+
+ +

{{EmbedLiveSample('Example_1', 200, 100)}}

+ +

Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

que coincidiría con los siguientes elementos {{HTMLElement("span")}} :

+ +
<img src="photo1.jpg"><span class="caption">The first photo</span>
+<img src="photo2.jpg"><span class="caption">The second photo</span>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentarios
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del first-child no se aplica hasta que el enlace pierde el foco.

+ +

Ver también

+ + diff --git a/files/es/web/css/selectores_hermanos_generales/index.html b/files/es/web/css/selectores_hermanos_generales/index.html new file mode 100644 index 0000000000..96c87148b9 --- /dev/null +++ b/files/es/web/css/selectores_hermanos_generales/index.html @@ -0,0 +1,117 @@ +--- +title: Selectores de hermanos generales +slug: Web/CSS/Selectores_hermanos_generales +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Resumen

+ +

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

+ +

Sintaxis

+ +
elemento ~ elemento { estilos }
+
+ +

Ejemplo

+ +
p ~ span {
+  color: red;
+}
+ +
<span>Este span no es rojo.</span>
+<p>Aquí hay un párrafo.</p>
+<code>Aquí hay algo de código.</code>
+<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>
+ +

{{ EmbedLiveSample('Example', 320, 150) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}} 
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}} 
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Ver también

+ +

 

+ + diff --git a/files/es/web/css/shorthand_properties/index.html b/files/es/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..7e6cb6a359 --- /dev/null +++ b/files/es/web/css/shorthand_properties/index.html @@ -0,0 +1,155 @@ +--- +title: Propiedades abreviadas +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guía + - Propiedades + - Referencia + - abreviatura + - propiedades abreviadas +translation_of: Web/CSS/Shorthand_properties +--- +

Definición

+ +

Las propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

+ +

La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad  {{cssxref("background")}} de CSS es una propiedad abreviada que puede definir el valor de {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, y {{cssxref("background-position")}}. Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación {{cssxref("font")}}, y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación {{cssxref("margin")}}.

+ +

Casos especiales delicados

+ +

Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:

+ +
    +
  1. Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán los valores previamente definidos. Por lo tanto: + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+
    +  no pondrá el color en rojo sino al valor por defecto de {{cssxref("background-color")}} , transparent, puesto que la segunda regla tiene precedencia.
    2. +
  2. Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave inherit puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave inherit.
    3. +
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: +
      +
    1. Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: + + + + + + + + + + + + + + + + + + + +
      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png +

      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)

      +
      +
      2. +
    2. Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: + + + + + + + + + + + + + + + + + + + +
      corner1.pngThe 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.pngThe 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.pngThe 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png +

      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.

      +
      +
      3. +
    +
    4. +
+ +

Propiedades Background

+ +

Un fondo con las siguientes propiedades...

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+ +

... puede acortarse con una sola declaración:

+ +
background: #000 url(images/bg.gif) no-repeat top right;
+ +

(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más background-attachment: scroll y, en CSS3, a algunas propiedades adicionales.)

+ +

Propiedades Font

+ +

Las siguientes declaraciones:

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

... pueden ser abreviadas como sigue:

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +

Esta declaración abreviada es realmente equivalente a las declaraciones a mano anteriores así como también a font-variant: normal y font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+ +

Propiedades Border

+ +

Con los bordes, el ancho, color y estílo pueden ser simplificados en una declaración. Por ejemplo,

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

... puede ser simplificada como

+ +
border: 1px solid #000;
+ +

Propiedades Margin y Padding

+ +

Versiones abreviadas de margin y padding funcionan de la misma forma. Las siguientes declaraciones CSS:

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

son la misma a la declaración siguiente (note que los valores estan en el sentido de las manecillas del reloj desde arriba: arriba, derecha, abajo e izquierda (TRBL, las consonantes en "trouble", peligro en inglés)). (Norte, Este, Sur, Oeste)

+ +
margin: 10px 5px 10px 5px;
+ +

La propiedad abreviada universal

+ +

CSS provee una propiedad abreviada universal, {{cssxref("all")}}, que aplica su valor a toda propiedad en el documento. Su propósito es cambiar el modelo de herencia de las propiedades a uno de los siguientes:

+ +

{{page("/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance", "Controlling_inheritance")}}

+ +

Ver Cascade and inheritance o Introducing the CSS Cascade para más información acerca de como trabaja la herencia en CSS.

+ +

Ver también

+ +
    +
  • CSS Reference
    • +
  • {{css_key_concepts}}
    • +
  • Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("animation")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}, {{cssxref("flex")}}.
    • +
diff --git "a/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" "b/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" new file mode 100644 index 0000000000..90d5ea8b75 --- /dev/null +++ "b/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" @@ -0,0 +1,402 @@ +--- +title: Sintaxis de definición de valor +slug: Web/CSS/Sintaxis_definición_de_valor +translation_of: Web/CSS/Value_definition_syntax +--- +

{{CSSRef()}}

+ +

La sintaxis de definición de valores CSS, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).

+ +

La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una palabra clave, algunos caracteres literales, ó un valor de tipo de dato de CSS o propiedad CSS.

+ +

Tipos de valor de los componentes

+ +

Palabras clave

+ +

Palabras clave genéricas

+ +

Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: auto, smaller or ease-in.

+ +

El caso específico de inherit e initial

+ +

Todas las propiedades CSS aceptan las palabras clave inherit e initial que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.

+ +

Literales

+ +

En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('/') o la coma (','), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.

+ +

Ambos símbolos aparecen literalmente en una definición de valor.

+ +

Tipos de dato

+ +

Tipos de dato básicos

+ +

Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman tipos de datos básicos, estan representados por su nombre rodeados del símbolo '<' y '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

+ +

Tipos de dato no terminales

+ +

Tipos de dato poco comunes, llamados tipos de datos no terminales, están también rodeados por  '<' y '>'.

+ +

Los tipos de dato no terminales son de dos tipos::

+ +
    +
  • tipos de datos que comparten el mismo nombre de propiedad, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.
    • +
  • tipos de datos que no comparten el mismo nombre de la propiedad. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.
    • +
+ +

Combinadores de los valores de componentes

+ +

Corchetes

+ +

Corchetes encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para agrupar componentes para sobreescribir las reglas de precedencia.

+ +
bold [ thin && <length> ]
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold thin 2vh
    • +
  • bold 0 thin
    • +
  • bold thin 3.5em
    • +
+ +

Pero no con:

+ +
    +
  • thin bold 3em,  porque bold esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.
    • +
+ +

Yuxtaposición

+ +

Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama yuxtaponer. Todos los componentes yuxtapuestos son obligatorios y deben aparecer en ese orden exacto.

+ +
bold <length> , thin
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold 1em, thin
    • +
  • bold 0, thin
    • +
  • bold 2.5cm, thin
    • +
  • bold 3vh, thin
    • +
+ +

Pero no con:

+ +
    +
  • thin 1em, bold porque las entidades deben aparecer en el orden expresado
    • +
  • bold 1em thin porque las entidades son obligatorias; la coma que es un literal debe estar presente
    • +
  • bold 0.5ms, thin porque los valores ms no son de tipo {{cssxref("<length>")}}
    • +
+ +

Doble ampersand

+ +

Separar dos o mas componentes por un doble ampersand, &&, significa que todas esas entidades son obligatorias pero pueden aparecer en cualquier orden.

+ +
bold && <length>
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold 1em
    • +
  • bold 0
    • +
  • 2.5cm bold
    • +
  • 3vh bold
    • +
+ +

Pero no con:

+ +
    +
  • bold porque ambos componentes deben aparecer en el valor
    • +
  • bold 1em bold porque ambos componentes deben aparecer solo una vez
    • +
+ +
Nota: yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que bold thin && <length> es equivalente a [ bold thin ] && <length>. Que describe a bold thin <length> ó <length> bold thin pero no a  bold <length> thin.
+ +

Barra doble

+ +

Separar dos o mas componentes por una barra doble, ||, significa que todas las entidades son opcionales: al menos una debe estar presente, y pueden aparecer en cualquier orden. Típicamente ésto es usado para definir los diferentes valores de una propiedad abreviada.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • 1em solid blue
    • +
  • blue 1em
    • +
  • solid 1px yellow
    • +
+ +

Pero no con:

+ +
    +
  • blue yellow porque un componente debe aparecer al menos una vez.
    • +
  • bold  porque no es una palabra clave permitida como valor de ninguna de las entidades.
    • +
+ +
Nota: el doble ampersand tiene precedencia sobre la barra doble, que significa que bold || thin && <length> es equivalente a bold || [ thin && <length> ]. Describe a bold, thin, <length>, bold thin, <length> bold, o thin <length> bold pero no bold <length> bold thin porque bold, si no es omitido debe colocarse antes o después de el componente thin && <length>
+ +

Barra simple

+ +

Separar dos o mas componentes con una barra simple, |, quiere decir que todas las entidades son opciones exclusivas: exactamente una de estas opciones debe estar presente. Esto es tipicamente usado para separar una lista de posibles palabras clave.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • 3%
    • +
  • 0
    • +
  • 3.5em
    • +
  • left
    • +
  • center
    • +
  • right
    • +
  • top
    • +
  • bottom
    • +
+ +

Pero no

+ +
    +
  • center 3% porque solo uno de los componentes debe estar presente
    • +
  • 3em 4.5em porque un componente debe estar presente máximo una vez.
    • +
+ +
+

Note: la barra doble tiene precedencia sobre la barra simple, quiere decir que bold | thin || <length> es equivalente a bold | [ thin || <length> ]. Describe bold, thin, <length>, <length> thin, o thin <length> pero no bold <length> porque solo una entidad de cada lado del combinador | puede estar presente.

+
+ +

Multiplicadores de valores de componentes

+ +

Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.

+ +

Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.

+ +

Asterisco (*)

+ +

El multiplicador asterisco indica que la entidad puede aparecer cero, una o varias veces.

+ +
bold smaller*
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller y así sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de la palabra clave smaller
    • +
+ +

Suma (+)

+ +

El multiplicador suma indica que la entidad puede aparecer una o varias veces.

+ +
bold smaller+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller y sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Pregunta (?)

+ +

El multiplicador pregunta indica que la entidad es opcional y debe aparecer cero o una vez

+ +
bold smaller?
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
+ +

Pero no:

+ +
    +
  • bold smaller smaller porque smaller debe aparecer como máximo una vez
    • +
  • smaller bold porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Llaves ({ })

+ +

El multiplicador llaves, encierra a dos enteros A y B separados  por una coma, indica que la entidad debe aparecer al menos A veces y como mas B veces

+ +
bold smaller{1,3}
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • bold smaller smaller smaller smaller porque smaller debe aparecer un máximo de tres veces.
    • +
  • smaller bold porque bold esta yuxtapuesto u debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Hash (#)

+ +

El multiplicador hash indica que la entidad puede repetirse una o mas veces (como con el multiplicador de suma) pero cada ocurrencia se separa por una coma (',').

+ +
bold smaller#
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller, smaller
    • +
  • bold smaller, smaller, smaller y así sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • bold smaller smaller smaller porque las diferentes ocurrencias de smaller deben estar separadas por comas
    • +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Sumario

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SímboloNombreDescripciónEjemplo
Combinadores
 YuxtaposiciónComponentes obligatorios que deben aparecer en el mismo ordensolid <length>
&&Doble ampersandComponentes obligatorios pero que pueden aparecer en cualquier ordenlength> && <string>
||Barra dobleAl menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden<'border-image-outset'> || <'border-image-slice'>
|Barra simpleExactamente uno de los componentes debe estar presentesmaller | small | normal | big | bigger
[ ]CorchetesAgrupa componentes para sobreescribir las reglas de precedenciabold [ thin && <length> ]
Multiplicadores
 Sin multiplicadorExactamente 1 vezsolid
*Asterisco0 or more timesbold smaller*
+Suma1 o mas vecesbold smaller+
?Pregunta0 o 1 vez (es opcional)bold smaller?
{A,B}LlavesAl menos A veces, como mas B vecesbold smaller{1,3}
#Hash1 o mas veces, pero cada ocurrencia separada por una coma (',')bold smaller#
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}Desde {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, añade el multiplicador hash
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}Desde {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, añade el combinador doble ampersand
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}Definición inicial
+ +

Vea también

+ +
    +
  • {{ CSS_key_concepts() }}
    • +
diff --git a/files/es/web/css/specified_value/index.html b/files/es/web/css/specified_value/index.html new file mode 100644 index 0000000000..a13d57f4e1 --- /dev/null +++ b/files/es/web/css/specified_value/index.html @@ -0,0 +1,43 @@ +--- +title: Valor especificado +slug: Web/CSS/specified_value +tags: + - CSS + - Referencia CSS +translation_of: Web/CSS/specified_value +--- +

{{CSSRef}}

+ +

El valor especificado (specified value) de una propiedad CSS es establecido de una de las siguientes maneras:

+ +
    +
  1. Si la hoja de estilos del documento tiene un valor especificado para la propiedad, éste será usado. Por ejemplo, si la propiedad {{cssxref("color")}} es establecida con valor green, el color del texto del elemento que corresponda será verde.
    2. +
  2. Si la hoja de estilos del documento no tiene un valor especificado para la propiedad, se heredará del elemento padre (si es posible). Por ejemplo, si tenemos un párrafo ({{HTMLElement("p")}}) dentro de un {{HTMLElement("div")}}, y el {{HTMLElement("div")}} tiene el valor de su propiedad font como "Arial", y el {{HTMLElement("p")}} no tiene definida la propiedad font, se heredará la fuente Arial.
    3. +
  3. Si ninguna de las anteriores está disponible, se aplica el valor inicial del elemento segun la especificación CSS.
    4. +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}Definición inicial
+ +

Véase también

+ + diff --git a/files/es/web/css/syntax/index.html b/files/es/web/css/syntax/index.html new file mode 100644 index 0000000000..25ff30fa71 --- /dev/null +++ b/files/es/web/css/syntax/index.html @@ -0,0 +1,81 @@ +--- +title: Sintaxis +slug: Web/CSS/Syntax +tags: + - CSS + - Guía + - Principiante + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

La meta básica del lenguaje Cascading Stylesheet (CSS) es permitir al motor del navegador pintar elementos de la página con características específicas, como colores, posición o decoración. La sintaxis CSS refleja estas metas y estos son los bloques básicos de construcción.

+ +
    +
  • La propiedad que es un identificador, un nombre leíble por humanos, que define qué característica es considerada.
    • +
  • +

    El valor que describe como las características deben ser manejadas por el motor. Cada propiedad tiene un conjunto de valores válidos, definido por una gramática formal, así como un significado semántico, implementados por el motor del navegador.

    +
    • +
+ +

Declaraciones de CSS

+ +

Configurando propiedades CSS a valores específicos es la función principal del lenguaje del CSS. Una propiedad y su valor son llamados una declaración, y cualquier motor de CSS calcula qué declaraciones aplican a cada uno de los elementos de una página para mostralos apropiadamente y estilizarlos.

+ +

Ambos propiedades y valores son sensibles a mayúculas y minúsculas en CSS. El par se separa por dos puntos, ':' (U+003A COLON), y los espacios en blanco antes, entre ellos y después, pero no necesariamente dentro de ellos, son ignorados.

+ +

css syntax - declaration.png

+ +

Hay más de 100 propiedades diferentes en CSS y cerca de un número infinito de diferentes valores. No todos los pares de propiedades y valores son permitidos cada propiedad define que valores son válidos. Cuando un valor no es válido para una propiedad específica, la declaración es considerada inválida y es completamente ingorada por el motor del CSS.

+ +

Bloques de declaraciones en CSS

+ +

Las declaraciones son agrupada en bloques, que es una estructura delimitada por una llave de apertura, '{' (U+007B LEFT CURLY BRACKET), y una de cierre, '}' (U+007D RIGHT CURLY BRACKET). Los bloques en ocasiones puedes anidarse, por lo que las llaves de apertura y cierre deben de coindidir.

+ +

css syntax - block.png

+ +

Esos bloques son naturalmente llamados bloques de declaraciones y las declaraciones dentro de ellos están separadas por un punto y coma, ';' (U+003B SEMICOLON). Un bloque de declaración puede estar vacío, que es contener una declaración nula. Los espacios en blanco alrededor de las declaraciones son ignorados. En cuanto a la última declaración de un bloque, esta no necesita terminar en un punto y coma, aunque es usualmente considerado una buena práctica porque previene el olvidar agregarlo cuando se extienda el bloque con otra declaración.

+ +

css syntax - declarations block.png

+ +
El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo  style de HTML.
+ +

Sets de reglas CSS

+ +

Si cada hoja de estilos pudiera aplicar una sól declaración a cada elemento de una página web, sería algo inútil. El verdadero objetivo es aplicar varias declaraciones a distintas partes del documento.

+ +

CSS permite esto asociando condiciones con bloques de declaraciones. Cada declaración (válida) es precedida por un selector, es decir, una condición que selecciona algunos elementos de la página. El bloque que forma el par selector-declaraciones recibe el nombre de set de reglas, o simplemente una regla.

+ +

css syntax - ruleset.png

+ +

Debido a que un elemento de la página puede ser seleccionado por varios selectores, y, por lo tanto, por varias reglas que pueden contener la misma propiedad más de una vez, con diferentes valores, el estandar CSS define cuál regla tiene precedencia por sobre las otras y debe ser aplicada: esto se conoce como el algoritmo cascada.

+ +
Es importante resaltar que si un set de reglas formado por un grupo de selectores es un atajo que reemplaza varios sets de reglas con un solo selector cada una, esto no aplica a la validez del set de reglas en sí.
+
+Esto tiene una consecuencia importante: si algún selector básico es inválido, como cuando se usa un pseudo-elemento o pseudo-clase inválida, el selector entero es inválido y, por lo tanto, el set de reglas completo es ignorado (por ser inválido también).
+ +

Declaraciones CSS

+ +

Los sets de reglas son los bloques principales de una hoja de estilos, que generalmente consiste en una larga lista de ellos. Pero existe otro tipo de innformación que el autor web puede transmitir en la hoja de estilos, como el set de caracteres, otra hoja de estilos a importar, font face o listar descripciones de contador, entre otros. Se usarán tipos de declaracionnes específicas para esto mismo.

+ +

Una declaración es un bloque que empieza con un caracter (no espacio) y termina con la primer llave de cierre o punto y coma (fuera de una cadena, sin escape y no incluñido dentro de otro par de {}. () o []).

+ +

css syntax - statements Venn diag.png

+ +

Existen dos tipos de declaraciones:

+ +
    +
  • Sets de reglas (o reglas) que, como lo visto, asocian una colección de declaraciones CSS a una condición descrita como selector.
    • +
  • Reglas At que inician con un símbolo '@' (U+0040 COMMERCIAL AT), seguido de un identificados y luego el resto de la declaración que finaliza con un punto y coma (;) por fuera de un bloque o al inicio del próximo bloque. Cada tipo de reglas at, definidas por un identificador, tienen su propia sintaxis interna, y semántica por supuesto. Se utilizan para establecer información de meta datos (como {{ cssxref("@charset") }} o {{ cssxref("@import") }}), información condicional (como {{ cssxref("@media") }} o {{ cssxref("@document") }}), o información descrciptiva (como {{ cssxref("@font-face") }}).
    • +
+ +

Toda declaración que no es un set de reglas ni una regla at es considerada inválida e ignorada.

+ +

Existe otro grupo de declaraciones: las declaraciones anidadas. Estass son declaraciones que pueden ser usadas en un subset específico de reglas at (las reglas de grupo condicionales). Estas declaraciones sólo aplican si una condición específica se cumple: el contenido de la regla at @media se aplica sóllo si el dispositivo en el que el navegaddor se encuentra corriendo cumple dadas condiciones; el contenido de la regla at @document se aplica sólo si la página actual cumple dadas condiciones, y así. En CSS1 y CSS2.1, sólo los sets de reglas pueden ser usados dentro de reglas de grupo condicionales. Esto era muy restrictivo y se dejó de aplicar en CSS Conditionals Level 3. Actualmente, aunque sigue siendo experimental y no es soportado por todos los navegadores, las reglas de grupo condicional pueden contener varios sets de reglas, e incluso, aunque no todas, reglas at.

+ +

Ver también

+ +
    +
  • {{ CSS_key_concepts()}}
    • +
diff --git a/files/es/web/css/text-decoration-color/index.html b/files/es/web/css/text-decoration-color/index.html new file mode 100644 index 0000000000..1310ee9c30 --- /dev/null +++ b/files/es/web/css/text-decoration-color/index.html @@ -0,0 +1,148 @@ +--- +title: text-decoration-color +slug: Web/CSS/text-decoration-color +tags: + - Propiedad CSS + - Referencia + - Texto CSS +translation_of: Web/CSS/text-decoration-color +--- +
{{ CSSRef }}
+ +

Resumen

+ +

La propiedad text-decoration-color establece el color usado cuando se dibujan subrayados o líneas a través del texto, especificadas por la propiedad {{ cssxref("text-decoration-line") }}. El color especificado será el mismo para los tres tipos de línea.

+ +

CSS no provee un mecanismo directo para especificar un color único para cada tipo de línea. Sin embargo, se puede obtener un efecto similar anidando elementos HTML, aplicando diferente tipo de línea para cada uno (via la propiedad text-decoration-line), y especificando un color de línea (usando text-decoration-color) propio para cada elemento.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* valores <color> */
+text-decoration-color: currentColor;
+text-decoration-color: red;
+text-decoration-color: #00ff00;
+text-decoration-color: rgba(255, 128, 128, 0.5);
+text-decoration-color: transparent;
+
+/* Valores globales */
+text-decoration-color: inherit;
+text-decoration-color: initial;
+text-decoration-color: unset;
+
+ +

Valores

+ +
+
<color>
+
La propiedad color acepta varlos nombres clave y notaciones numéricas. Vea {{cssxref("<color>")}} para más detalles.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.example {
+    text-decoration: underline;
+    text-decoration-color: red;
+}
+
+ +

El ejemplo anterior tiene el mismo efecto que el código siguiente, que además añade un estilo para cuando el elemento tiene el puntero del mouse encima.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<style>
+.example {
+  font-size: 24px;
+  text-decoration: underline;
+  color: red;
+}
+.example:hover {
+  color: blue;
+  text-decoration: line-through;
+}
+</style>
+</head>
+<body>
+<span class="example">
+  <span style="color:black;">texto negro con subrayado rojo, y azul con el cursor encima</span>
+</span>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}{{ Spec2('CSS3 Text Decoration') }}Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatNo }}{{ CompatGeckoDesktop("6.0") }} - {{ CompatGeckoDesktop("39.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("36.0") }} without prefix		{{ CompatNo }}{{ CompatNo }}7.1 {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatNo }}{{ CompatGeckoMobile("6.0") }} - {{ CompatGeckoMobile("39.0") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("36.0") }} without prefix		{{ CompatNo }}{{ CompatNo }}8 {{ property_prefix("-webkit") }}
+
diff --git a/files/es/web/css/text-decoration-line/index.html b/files/es/web/css/text-decoration-line/index.html new file mode 100644 index 0000000000..6fcbbc2d7c --- /dev/null +++ b/files/es/web/css/text-decoration-line/index.html @@ -0,0 +1,100 @@ +--- +title: text-decoration-line +slug: Web/CSS/text-decoration-line +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration-line +--- +
{{CSSRef}}
+ +

La propiedad CSS text-decoration-line establece el tipo de decoración de línea que se agregará a un elemento.

+ +
{{EmbedInteractiveExample("pages/css/text-decoration-line.html")}}
+ +

When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref("text-decoration")}} shorthand property instead.

+ +

La decoración underline posiciona el subrayado debajo del texto, la decoración overline posiciona el subrayado encima del texto, y la decoración line-through posiciona la línea en medio del texto.

+ +

Sintaxis

+ +
/* Valores de clave */
+text-decoration-line: none;
+text-decoration-line: underline;
+text-decoration-line: overline;
+text-decoration-line: line-through;
+text-decoration-line: underline overline;                /* Dos líneas de decoración */
+text-decoration-line: overline underline line-through;   /* Múltiples líneas de decoración */
+
+/* Valores globales */
+text-decoration-line: inherit;
+text-decoration-line: initial;
+text-decoration-line: unset;
+
+ +

Valores

+ +

none

+ +
+
No agrega decoración al texto.
+
underline
+
Cada línea del texto lleva subrayado inferior.
+
overline
+
Cada línea del texto lleva subrayado superior.
+
line-through
+
Cada línea del texto lleva una línea atravesando por en medio del mismo.
+
blink {{deprecated_inline}}
+
El texto parpadea (se alterna entre visible e invisible). Según los ajustes del agente usuario, el texto puede simplemente no parpadear. Este valor está en desuso, en favor de las Animaciones.
+
-moz-anchor-decoration {{non-standard_inline}}
+
El texto es decorado con el estilo de un ancla; no adecuado para contenido web.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<p>¡Aquí hay texto con subrayado inferior rojo ondulado!</p>
+ +

Contenido CSS

+ +
p {
+  text-decoration-line: underline;
+  text-decoration-style: wavy;
+  text-decoration-color: red;
+}
+ +

{{EmbedLiveSample('example', 300, 50)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Text Decoration', '#text-decoration-line', 'text-decoration-line')}}{{Spec2('CSS3 Text Decoration')}}Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.
+ +

Compatibilidad de navegadores

+ +

{{Compat("css.properties.text-decoration-line")}}

+ +

Ver también

+ +
    +
  • When setting multiple line-decoration properties at once, it may be more convenient to use the {{cssxref("text-decoration")}} shorthand property instead.
    • +
diff --git a/files/es/web/css/text-decoration-style/index.html b/files/es/web/css/text-decoration-style/index.html new file mode 100644 index 0000000000..d698913b8f --- /dev/null +++ b/files/es/web/css/text-decoration-style/index.html @@ -0,0 +1,200 @@ +--- +title: text-decoration-style +slug: Web/CSS/text-decoration-style +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration-style +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS text-decoration-style define el estilo de las líneas especificadas por {{ cssxref("text-decoration-line") }}. El estilo aplica a todas las líneas, no hay manera de establecer diferentes estilos para cada línea definida por text-decoration-line.

+ +

Si la decoración especificada tiene un significado semántico propio, como line-through, que significa que el texto ha sido removido, se recomienda a los autores denotar este significado usando una etiqueta HTML, como {{ HTMLElement("del") }} o {{ HTMLElement("s") }}. Siendo que los navegadores pueden deshabilitar estilos en algunos casos, el significado semántico no desaparecerá en dicha situación.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+text-decoration-style: solid;
+text-decoration-style: double;
+text-decoration-style: dotted;
+text-decoration-style: dashed;
+text-decoration-style: wavy;
+
+/* Valores globales */
+text-decoration-style: inherit;
+text-decoration-style: initial;
+text-decoration-style: unset;
+
+ +

Valores

+ +
+
solid double dotted dashed wavy
+
Es una de las siguientes palabras clave: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Palabra claveDescripciónComentario
solidDibuja una línea simple 
doubleDibuja una línea doble 
dottedDibuja una línea punteada 
dashedDibuja una línea discontinua 
wavyDibuja una línea ondulada 
-moz-none{{ non-standard_inline }} No dibuja una líneaNo usarse: usar {{ cssxref("text-decoration-line") }}: none en su lugar
+
+
inherit
+
Es una palabra clave que indica que se reutilice el valor calculado del elemento padre.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + +
.example {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: red;
+}
+
+ +
<p class="example">Así se ve el resultado.</p>
+
+ +

{{ EmbedLiveSample('Ejemplos', '', '', '') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS3 Text Decoration', '#text-decoration-style', 'text-decoration-style') }}{{ Spec2('CSS3 Text Decoration') }}Definición inicial. La propiedad {{cssxref("text-decoration")}} no era una forma reducida anteriormente.
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{ CompatGeckoDesktop("6.0") }} - {{CompatGeckoDesktop("39.0")}}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("36.0") }}		{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
wavy{{ CompatGeckoDesktop("6.0") }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo }}{{ CompatNo }}{{ CompatGeckoMobile("6.0") }}- {{CompatGeckoMobile("39.0")}}{{ property_prefix("-moz") }}
+ {{ CompatGeckoMobile("36.0") }}		{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
wavy{{ CompatNo }}{{ CompatNo }}{{ CompatGeckoMobile("6.0") }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
diff --git a/files/es/web/css/text-decoration/index.html b/files/es/web/css/text-decoration/index.html new file mode 100644 index 0000000000..7a3675657b --- /dev/null +++ b/files/es/web/css/text-decoration/index.html @@ -0,0 +1,202 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-decoration +--- +
{{CSSRef}}
+ +

La propiedad CSS text-decoration se usa para establecer el formato de texto a subrayado (underline) y suprarrayado (overline), tachado (line-through) o parpadeo (blink). El subrayado y el suprarrayado son posicionados bajo el texto, mientras la línea a través de éste se posiciona por encima.

+ +

Las decoraciones de texto se dibujan a través de los elementos descendientes. Esto significa que no es posible deshabilitar la decoración en un descendiente si la propiedad se especifica en un elemento ancestro. Por ejemplo, en el código <p>Este texto tiene <em>algunas palabras enfatizadas</em> en él.</p>, la regla de estilos p { text-decoration: underline; } causará que el párrafo entero tenga subrayado. La regla em { text-decoration: none; } no causará ningún cambio; el párrafo entero seguirá subrayado. Sin embargo, la regla em { text-decoration: overline; } causará una segunda decoración que aparecerá sobre "algunas palabras enfatizadas".

+ +
+

Nota: El Nivel 3 de Decoraciones de Texto transformó esta propiedad en la forma reducida de las tres propiedades nuevas {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, y {{cssxref("text-decoration-style")}}. Como en cualquier otra propiedad reducida, esto significa que restaura sus valores a los predeterminados si no son definidos explícitamente en la propiedad.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Valores clave */
+text-decoration: none;                 /* Sin decoración */
+text-decoration: underline red;        /* Subrayado rojo */
+text-decoration: underline wavy red;   /* Subrayado rojo ondulado */
+
+/* Valores globales */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+
+ +

Valores

+ +

La propiedad text-decoration es una forma reducida, y puede usar los valores de cada una de las propiedades de la forma larga: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, y {{cssxref("text-decoration-style")}}

+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
h1.under {
+    text-decoration: underline;
+}
+h1.over {
+    text-decoration: overline;
+}
+p.line {
+    text-decoration: line-through;
+}
+p.blink {
+    text-decoration: blink;
+}
+a.none {
+    text-decoration: none;
+}
+p.underover {
+    text-decoration: underline overline;
+}
+
+ + + +

{{EmbedLiveSample('Examples','100%','310')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}} +

Transformada a propiedad reducida. Soporte agregado para el valor de {{cssxref('text-decoration-style')}}.

+
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}Sin cambios significativos
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("1.0")}}1.03.03.51.0
valor blink{{CompatGeckoDesktop("1.0")}}
+ {{CompatGeckoDesktop("23.0")}}[1]		{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]4.0
+ 15.0[1]		{{CompatVersionUnknown}}[1]
Propiedad reducida{{CompatGeckoDesktop("6.0")}}[3]
+ {{CompatGeckoDesktop("36.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}7.1[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
valor blink{{CompatGeckoDesktop("1.0")}}
+ {{CompatGeckoDesktop("23.0")}}[1]		{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}[1]4.0[1]{{CompatVersionUnknown}}[1]
Propiedad reducida{{CompatGeckoMobile("6.0")}}[3]
+ {{CompatGeckoMobile("36.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}8[1]
+
+ +

[1] El valor blink no tiene ningún efecto.

+ +

[2] Safari no soporta {{cssxref("text-decoration-style")}}.

+ +

[3] Esta versión de Gecko tiene una implementación parcial.

+ +

Véase también

+ +
    +
  • El atributo {{cssxref("list-style")}} controla la apariencia de los items en listas {{HTMLElement("ol")}} y {{HTMLElement("ul")}} de HTML.
    • +
diff --git a/files/es/web/css/text-emphasis-color/index.html b/files/es/web/css/text-emphasis-color/index.html new file mode 100644 index 0000000000..10c814748e --- /dev/null +++ b/files/es/web/css/text-emphasis-color/index.html @@ -0,0 +1,103 @@ +--- +title: text-emphasis-color +slug: Web/CSS/text-emphasis-color +tags: + - CSS + - Colores HTML + - Decoración de Texto CSS + - Estilizando HTML + - Estilos CSS + - Propiedad CSS + - Referencia + - text-decoration-color + - Énfasis de Texto +translation_of: Web/CSS/text-emphasis-color +--- +
{{CSSRef}}
+ +

La propiedad CSS text-emphasis-color (que podría traducirse como color del texto con énfasis) define el color de las marcas de énfasis. Este valor también puede definirse usando el atajo {{cssxref("text-emphasis")}}

+ +
/* Valor inicial*/
+text-emphasis-color: currentColor;
+
+/* <color>  */
+text-emphasis-color: #555;
+text-emphasis-color: blue;
+text-emphasis-color: rgba(90, 200, 160, 0.8);
+text-emphasis-color: transparent;
+
+/* Valores globales */
+text-emphasis-color: inherit;
+text-emphasis-color: initial;
+text-emphasis-color: unset;
+
+ +

{{cssinfo}}

+ +

Sintáxis

+ +

Valores

+ +
+
<color>
+
Define el color de las marcas de énfasis. Si ningún color es declarado, el color por defecto es currentColor (color actual).
+
+ +

Sintáxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

CSS

+ +
h3 {
+  text-emphasis-color: #555;
+  text-emphasis-style: "*";
+}
+ +

HTML

+ +
<p>Este es un ejemplo:</p>
+
+<h3>Esto está marcado con énfasis!</h3>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples", 450, 100)}}Ejemplo incrustado en vivo

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificacionesEstadoComentario
{{SpecName('CSS3 Text Decoration', '#text-emphasis-color-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Initial definition
+ +

Compatibilidad de Navegadores

+ + + +

{{Compat("css.properties.text-emphasis-color")}}

+ +

Ver También

+ +
    +
  • El tipo de dato {{cssxref("<color>")}}.
    • +
  • Las otras propiedades de marcas de énfasis relacioanadas: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis')}}, y {{cssxref("text-emphasis-position")}}.
    • +
  • Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
    • +
  • Aplicando color a los elementos HTML utilizando CSS.
    • +
diff --git a/files/es/web/css/text-emphasis/index.html b/files/es/web/css/text-emphasis/index.html new file mode 100644 index 0000000000..94979eb8af --- /dev/null +++ b/files/es/web/css/text-emphasis/index.html @@ -0,0 +1,178 @@ +--- +title: text-emphasis +slug: Web/CSS/text-emphasis +translation_of: Web/CSS/text-emphasis +--- +
+

La propiedad CSS  de text-emphasis, es una propiedad abreviada para establecer los valores de text-empahasis-style y text-emphasis-color, en una sola declaración.

+ +

Esta propiedad aplicara el  énfasis a cada carácter especificado en el texto del elemento,  a excepción de caracteres separados como espacios y caracteres de control .

+
+ +
/* Valor Inicial */
+text-emphasis: none; /* No emphasis marks */
+
+/* <string> valor */
+text-emphasis: 'x';
+text-emphasis: '点';
+text-emphasis: '\25B2';
+text-emphasis: '*' #555;
+text-emphasis: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */
+
+/* Valor de la Palabra Clave */
+text-emphasis: filled;
+text-emphasis: open;
+text-emphasis: filled sesame;
+text-emphasis: open sesame;
+
+/* Valor de la Palabra clave combinada con un color */
+text-emphasis: filled sesame #555;
+
+/* Valores Globales */
+text-emphasis: inherit;
+text-emphasis: initial;
+text-emphasis: unset;
+
+ +

La propiedad text-emphasis es diferente a la propiedad text-decoration.

+ +

Text-decoration no hereda y la decoración se aplica atreves de todo el elemento. Sin embargo, la propiedad test-emphasis si hereda, lo que significa que es posible cambiar el énfasis para los descendientes.

+ +

The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks.

+ +
+

text-emphasis doesn't reset the value of {{cssxref("text-emphasis-position")}}. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property {{cssxref("text-emphasis-position")}}.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

Valores

+ +
+
none
+
No emphasis marks.
+
filled
+
The shape is filled with solid color. If neither filled nor open is present, this is the default.
+
open
+
The shape is hollow.
+
dot
+
Display small circles as marks. The filled dot is '•' (U+2022), and the open dot is '◦' (U+25E6).
+
circle
+
Display large circles as marks. The filled circle is '●' (U+25CF), and the open circle is '○' (U+25CB). This is the default shape in horizontal writing modes when no other shape is given.
+
double-circle
+
Display double circles as marks. The filled double-circle is '◉' (U+25C9), and the open double-circle is '◎' (U+25CE).
+
triangle
+
Display triangles as marks. The filled triangle is '▲' (U+25B2), and the open triangle is '△' (U+25B3).
+
sesame
+
Display sesames as marks. The filled sesame is '﹅' (U+FE45), and the open sesame is '﹆' (U+FE46). This is the default shape in vertical writing modes when no other shape is given.
+
<string>
+
Display the given string as marks. Authors should not specify more than one character in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.
+
<color>
+
Defines the color of the mark. If no color is present, it defaults to currentColor.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +

A heading with emphasis shape and color

+ +

This example draws a heading with triangles used to emphasize each character.

+ +

CSS

+ +
h2 {
+  text-emphasis: triangle #D55;
+}
+ +

HTML

+ +
<h2>This is important!</h2>
+ +

Resultado

+ +

{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}{{Spec2('CSS3 Text Decoration')}}Initial definition
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("46")}}[1]25.0{{property_prefix("-webkit")}}{{CompatNo()}}15.0{{property_prefix("-webkit")}}6.1{{property_prefix("-webkit")}}
+ 7.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatGeckoDesktop("46")}}[1]4.4{{property_prefix("-webkit")}}{{CompatNo()}}33{{property_prefix("-webkit")}}7.1
+
+ +

[1] In Firefox 45, it wasn't activated by default: in about:config, the user has to set the preference layout.css.text-emphasis.enabled to true. Activated by default in Firefox 46, this preference was removed in Firefox 49.

+ +

Ver también

+ +
    +
  • The longhand properties {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}.
    • +
  • The {{cssxref('text-emphasis-position')}} property allowing to define the position of the emphasis marks.
    • +
diff --git a/files/es/web/css/text-orientation/index.html b/files/es/web/css/text-orientation/index.html new file mode 100644 index 0000000000..82b6f3295b --- /dev/null +++ b/files/es/web/css/text-orientation/index.html @@ -0,0 +1,104 @@ +--- +title: text-orientation +slug: Web/CSS/text-orientation +tags: + - CSS + - Formas de Escritura CSS + - Orientacion del Texto CSS + - Propiedad CSS + - Referencia +translation_of: Web/CSS/text-orientation +--- +
{{CSSRef}}
+ +

La propiedad  CSS  text-orientation define la orientación del texto en una línea de escritura. Ésta propiedad sólo tiene efecto en modo vertical, ésto es, cuando {{cssxref("writing-mode")}} no está establecido cómo horizontal-tb. Ésta propiedad CSS es util para controlar la forma en que se muestran los lenguajes que utilizan escritura vertical, y tambien para construir encabezados verticales para tablas.

+ +
/* Palabras clave valor */
+text-orientation: mixed;
+text-orientation: upright;
+text-orientation: sideways-right;
+text-orientation: sideways;
+text-orientation: use-glyph-orientation;
+
+/* Valores globales */
+text-orientation: inherit;
+text-orientation: initial;
+text-orientation: unset;
+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +

La propiedad text-orientation puede tener cómo valor una de las palabras clave listadas a continuación.

+ +

Valores

+ +
+
mixed
+
Rota los caracteres de escritura horizontal 90° en sentido de las manecillas del reloj. Establece los caracteres de escritura vertical de forma natural. Este es el valor por defecto.
+
upright
+
Establece los caracteres de escritura horizontal de forma natural (pero se presentan de arriba hacia abajo), de igual manera establece de forma natural los glifos para escritura vertical. Note que ésta palabra clave causa que todos los caracteres sean considerados de forma izquierda-a-derecha: el valor utilizado para {{cssxref("direction")}} es forzado a ser ltr.
+
sideways
+
Causa que los caracteres sean presentados de la forma en que se presentarían de manera horizontal, pero con la línea de escritura rotada 90° en sentido de las manecillas del reloj.
+
sideways-right
+
Un alias para sideways que se mantiene para propositos de compatibilidad.
+
use-glyph-orientation
+
En elementos SVG, ésta palabra clave produce que sea utilizado el valor de las propiedades SVG desaprobadas glyph-orientation-vertical y glyph-orientation-horizontal.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

HTML

+ +
<p>Lorem ipsum dolet semper quisquam.</p>
+ +

CSS

+ +
p {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Examples')}}

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Writing Modes', '#text-orientation', 'text-orientation')}}{{Spec2('CSS3 Writing Modes')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

 

+ + + +

{{Compat("css.properties.text-orientation")}}

+ +

 

+ +

Vea tambien

+ +
    +
  • Las otras propiedades CSS relacionadas con escritura vertical: {{cssxref("writing-mode")}}, {{cssxref("text-combine-upright")}}, y {{cssxref("unicode-bidi")}}.
    • +
diff --git a/files/es/web/css/text-overflow/index.html b/files/es/web/css/text-overflow/index.html new file mode 100644 index 0000000000..3d559cae8f --- /dev/null +++ b/files/es/web/css/text-overflow/index.html @@ -0,0 +1,308 @@ +--- +title: text-overflow +slug: Web/CSS/text-overflow +translation_of: Web/CSS/text-overflow +--- +
{{CSSRef}}
+ +

La propiedad de CSS text-overflow determina como el contenido que se desborda y que no es mostrado, va a hacérsele notar a los usuarios. Puede ser cortado, mostrar una elipsis ('…', U+2026 Horizontal Ellipsis), o mostrar una cadena de texto personalizada.

+ +
{{EmbedInteractiveExample("pages/css/text-overflow.html")}}
+ +

La propiedad text-overflow no fuerza a que ocurra un desbordamiento. Para hacer que un texto desborde a su contenedor debes poner algunas otras propiedades de CSS. Por ejemplo:

+ +
overflow: hidden;
+white-space: nowrap;
+ +

La propiedad text-overflow solo afecta al contenido que está rebasando un elemento de contenedor en bloque en su dirección de progresión inline (no así, a un texto que rebase por el bottom del contenedor, por).

+ +

Sintaxis

+ +

La propiedad text-overflow ha de ser especificada usando uno o dos valores. Si se define solo un valor, este determinará el comportamiento del overflow para el final de la línea (el extremo derecho en un texto izquierda-a-derecha o el extremo izquierdo en un texto derecha-a-izquierda). Si se definen dos valores, el primero hará referencia al comportamiento overflow para para el extremo izquierdo y el segundo al extremo derecho de la línea.

+ +

Cada valor se especificará como una de las siguientes opciones:

+ +
    +
  • Una palabra clave: clip, ellipsis, fade
    • +
  • La función fade(), que recibe {{cssxref("<length>")}} o {{cssxref("<percentage>")}} para controlar la distancia de desvanecimiento
    • +
  • Un <string>.
    • +
+ +

Values

+ +
+
clip
+
The default for this property. This keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: '';.
+
ellipsis
+
This keyword value will display an ellipsis ('…', U+2026 Horizontal Ellipsis) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.
+
<string> {{experimental_inline}}
+
The {{cssxref("<string>")}} to be used to represent clipped text. The string is displayed inside the content area, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.
+
fade {{experimental_inline}}
+
This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
+
fade( <length> | <percentage> ) {{experimental_inline}}
+
This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
+
The argument determines the distance over which the fade effect is applied. The {{cssxref("<percentage>")}} is resolved against the width of the line box. Values lower than 0 are clipped to 0. Values greater than the width of the line box are clipped to the width of the line box.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Examples

+ +

CSS

+ +
p {
+  width: 200px;
+  border: 1px solid;
+  padding: 2px 5px;
+
+  /* BOTH of the following are required for text-overflow */
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflow-visible {
+  white-space: initial;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-string {
+  /* Not supported in most browsers,
+     see the 'Browser compatibility' section below */
+  text-overflow: " [..]";
+}
+
+ +

HTML

+ +
<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+
+ +

Result

+ +

{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CSS valuedirection: ltrdirection: rtl
Expected ResultLive resultExpected ResultLive result
visible overflow1234567890 +
1234567890
+ 		0987654321 +
1234567890
+
text-overflow: clipt-o_clip.png +
123456
+ 		t-o_clip_rtl.png +
1234567890
+
text-overflow: ''12345 +
123456
+ 		54321 +
1234567890
+
text-overflow: ellipsis1234… +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: '.'1234. +
1234567890
+ 		.4321 +
1234567890
+
text-overflow: clip clip123456 +
1234567890
+ 		654321 +
1234567890
+
text-overflow: clip ellipsis1234… +
1234567890
+ 		6543… +
1234567890
+
text-overflow: clip '.'1234. +
1234567890
+ 		6543. +
1234567890
+
text-overflow: ellipsis clip…3456 +
1234567890
+ 		…4321 +
1234567890
+
text-overflow: ellipsis ellipsis…34… +
1234567890
+ 		…43… +
1234567890
+
text-overflow: ellipsis '.'…34. +
1234567890
+ 		…43. +
1234567890
+
text-overflow: ',' clip,3456 +
1234567890
+ 		,4321 +
1234567890
+
text-overflow: ',' ellipsis,34… +
1234567890
+ 		,43… +
1234567890
+
text-overflow: ',' '.',34. +
1234567890
+ 		,53. +
1234567890
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS4 UI')}}Added the values <string> and fade and the fade() function
{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 UI')}}Initial definition
+ +

A previous version of this interface reached the Candidate Recommendation status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the Working Draft level, explaining why browsers implemented this property unprefixed, though not at the CR state.

+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.text-overflow")}}

+ +

See also

+ +
    +
  • Related CSS properties: {{cssxref("overflow")}}, {{cssxref("white-space")}}
    • +
  • CSS properties that control line breaks in words: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}
    • +
diff --git a/files/es/web/css/text-shadow/index.html b/files/es/web/css/text-shadow/index.html new file mode 100644 index 0000000000..1e0cd7ee53 --- /dev/null +++ b/files/es/web/css/text-shadow/index.html @@ -0,0 +1,197 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - Propiedad CSS + - Texto CSS +translation_of: Web/CSS/text-shadow +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad text-shadow agrega sombra al texto. Acepta una lista de sombras separadas por coma, para aplicarlas al texto y a la propiedad {{cssxref("text-decoration","text-decorations")}} del elemento.

+ +

Cada sombra es especificada como un ófset del texto, junto con valores de color y radio de difuminación opcionales.

+ +

Múltiples sombras son aplicadas del frente al fondo, en el mismo orden que sean definidas.

+ +

Esta propiedad aplica para los pseudo-elementos {{cssxref("::first-line")}} y {{cssxref("::first-letter")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #CCC 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558ABB;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Se usan los valores predeterminados para color y blur-radius */
+text-shadow: 5px 10px;
+
+/* Valores globales */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+
+ +

Valores

+ +
+
<color>
+
Opcional. Puede ser especificado antes o después de los valores de offset. Si el color no es especificado, se usa el predeterminado del agente usuario. {{note("Para asegurar consistencia entre navegadores, se recomienda especificar un color explícito.")}}
+
<offset-x> <offset-y>
+
Requeridos. Estos valores length especifican el ófset de la sombra del texto. <offset-x> especifica la distancia horizontal; un valor negativo pone la sombra a la izquierda del texto. <offset-y> especifica la distancia vertical; un valor negativo pone la sombra encima del texto. Si ambos valores son 0, la sombra es colocada detrás del texto (y puede generar un efecto de difuminado cuando se define el valor <blur-radius>).
+ Para más detalles de las unidades que se pueden usar, véase {{cssxref("length")}}.
+
<blur-radius>
+
Opcional. Éste es un valor {{cssxref("length")}}. Si no se especifica, su valor predeterminado es 0. Mientras más alto sea el valor, mayor será la difuminación; la sombra se vuelve más amplia y clara.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
+
.red-text-shadow {
+   text-shadow: red 0 -2px;
+}
+ +
<p class="red-text-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Example1', '689px', '90px')}}

+ +
+
.white-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
+}
+ +
<p class="white-with-blue-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Example2', '689px', '180px')}}

+ +
+
.gold-on-gold {
+   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
+   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
+   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
+   color: gold;
+   background: gold;
+}
+ +
<p class="gold-on-gold">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>
+
+ +

{{EmbedLiveSample('Example3', '689px', '90px')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Incluye text-shadow en la lista de propiedades que pueden ser animadas.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}La propiedad CSS text-shadow fue inadecuadamente definida en CSS2 y descartada en CSS2 (Nivel 1). La especificación del Módulo de Textos Nivel 3 de CSS mejoró y clarificó la sintaxis. Más adelante fue movido al nuevo borrador de trabajo del Módulo de Textos Nivel 3 de CSS.
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico2.0{{CompatGeckoDesktop("1.9.1")}}[1]10[3]9.5[2]1.1 (100)[4]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko teóricamente soporta sombras de texto infinitas (no lo intente). Gecko 2 {{geckoRelease("2.0")}} y superiores limitan el radio de difuminación a 300 por razones de rendimiento. Si el valor <color> no es especificado, Gecko usará el valor de la propiedad {{cssxref("color")}} del elemento.

+ +

[2] Opera soporta un máximo de 6-9 sombras de texto por motivos de rendimiento. El radio de difuminación está limitado a 100px. Opera 9.5 a 10.1 utiliza el antiguo orden en reversa de dibujado (CSS2, la primera sombra en aplicar es la última que se define).

+ +

[3] Internet Explorer 5.5 soporta la propiedad Shadow and DropShadow Filter de Microsoft.

+ +

[4] En Safari, cualquier sombra que no especifique explícitamente un color es transparente. Safari 1.1 a 3.2 sólo soportan una sombra de texto (muestra la primera definida en la propiedad e ignora al resto). Safari 4.0 (WebKit 528) y superiores soportan múltiples sombras de texto.
+ Konqueror soporta sombras de texto desde la versión 3.4.

+ +

Véase también

+ +
    +
  • {{cssxref("box-shadow")}}
    • +
diff --git a/files/es/web/css/text-transform/index.html b/files/es/web/css/text-transform/index.html new file mode 100644 index 0000000000..342d952edf --- /dev/null +++ b/files/es/web/css/text-transform/index.html @@ -0,0 +1,499 @@ +--- +title: text-transform +slug: Web/CSS/text-transform +tags: + - CSS + - Layout + - Propiedad CSS + - Referencia + - Texto +translation_of: Web/CSS/text-transform +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS text-transform especifica el cambio entre mayúsculas y minúsculas del texto de un elemento. Puede ser usada para que un texto aparezca completamente en mayúsculas, en minúsculas, o con la primera letra de cada palabra en mayúscula.

+ +

La propiedad text-transform toma en cuenta las reglas específicas del idioma, como:

+ +
    +
  • +

    en lenguas turcas, como turco (tr), azerí (az), tártaro de Crimea (crh), tártaro de Volga (tt), y baskir (ba), hay dos tipos de i, con y sin punto, y dos pares de mayúscula/minúscula: i/İ e ı/I.

    +
    • +
  • +

    En alemán (de), la ß se vuelve SS en mayúsculas.

    +
    • +
  • +

    En holandés (nl), el dígrafo ij se vuelve IJ, aún con text-transform: capitalize, que solamente convierte la primera letra de una palabra en mayúsculas.

    +
    • +
  • +

    En griego (el), las vocales pierden su acento cuando la palabra completa está en mayúsculas (ά/Α), excepto por la eta disyuntiva (ή/Ή). Además, los diptongos con acento en la primera vocal cambian el acento por diéresis en la segunda vocal (άι/ΑΪ).

    +
    • +
  • +

    En griego (el), el caracter sigma en minúscula tiene dos formas: σ y ς. ς es usada solamente cuando la sigma termina la palabra. Cuando se aplica text-transform: lowercase a una sigma mayúscula (Σ), el navegador necesita elegir la minúscula correcta de acuerdo con el contexto.

    +
    • +
+ +

Por otro lado, algunas reglas de mapeo específicas no son tomada en cuenta por ningun navegador, como:

+ +
    +
  • en gaélico (ga), una letra prefijo se mantiene en minúsculas cuando la inicial base es convertida a mayúscula, así, en este ejemplo, el símbolo h- no debería cambiar a mayúscula: text-transform: uppercase cambiará Meud na h-aplacaid a MEUD NA H-APLACAID, lo cual viola las reglas ortográficas, cuando debería ser MEUD NA h-APLACAID.
    • +
+ +

El idioma es definido por el atributo HTML lang o el atributo xml:lang.

+ +

El soporte para estos casos específicos varía de un navegador a otro, véase la tabla de compatibilidad de navegadores.

+ +

{{cssinfo}}

+ +

Sintáxis

+ +
/* Valores clave */
+text-transform: capitalize;
+text-transform: uppercase;
+text-transform: lowercase;
+text-transform: none;
+text-transform: full-width;
+
+/* Valores globales */
+text-transform: inherit;
+text-transform: initial;
+text-transform: unset;
+
+ +

Valores

+ +
+
capitalize
+
+

Es una palabra clave que fuerza a que la primera letra de cada palabra sea convertida a mayúscula. EL resto de caracteres no es modificado; eso significa que mantienen su tamaño original, como haya sido escrito en el texto del elemento. Una letra es cualquier caracter Unicode que sea parte de la categoría general de Letras o Números {{experimental_inline}}: esto excluye cualquier signo de puntuación o símbolos al principio de la palabra.

+ +
Los autores no deben esperar que capitalize siga las convenciones de título específicas del lenguaje (como lo es en inglés el excluir artículos).
+
+
uppercase
+
Es una palabra clave que fuerza a todos los caracteres a ser convertidos a mayúsculas.
+
lowercase
+
Es una palabra clave que fuerza a todos los caracteres a ser convertidos a minúsculas.
+
none
+
Es una palabra clave que previene que sea cambiado el tamaño de los caracteres.
+
full-width {{experimental_inline}}
+
Es una palabra clave que fuerza que la escritura de un caracter, principalmente ideogramas y del alfabeto latín, abarque el espacio dentro de un cuadro, permitiendo que queden alineados al alfabeto asiático del este (como el chino o japonés).
+ +
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

none

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: none
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+
+ +
span {
+  text-transform: none;
+}
+strong { float: right; }
+ +

Esto muestra ninguna transformación de texto.

+ +

{{ EmbedLiveSample('none', '100%', '100px') }}

+ +

capitalize (General)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Esto muestra un texto con la primera letra de cada palabra en mayúsculas.

+ +

{{ EmbedLiveSample('capitalize_(General)', '100%', '100px') }}

+ +

capitalize (Puntuación)

+ +
<p>Initial String
+  <strong>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Esto muestra cómo la puntuación inicial de una palabra es ignorada. La palabra clave busca la primera letra, que es el primer caracter Unicode que forma parte de la categoría general de Letras o Números.

+ +

{{ EmbedLiveSample('capitalize_(Punctuation)', '100%', '100px') }}

+ +

capitalize (Símbolos)

+ +
<p>Initial String
+  <strong>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span>ⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Esto muestra cómo los símbolos iniciales son ignorados. La palabra clave busca la primera letra, que es primera caracter Unicode que forma parte de la categoría general de Letras o Números.

+ +

{{ EmbedLiveSample('capitalize_(Symbols)', '100%', '100px') }}

+ +

capitalize (Dígrafo ij holandés)

+ +
<p>Initial String
+  <strong lang="nl">The Dutch word: "ijsland" starts with a digraph.</strong>
+</p>
+<p>text-transform: capitalize
+  <strong><span lang="nl">The Dutch word: "ijsland" starts with a digraph.</span></strong>
+</p>
+ +
span {
+  text-transform: capitalize;
+}
+strong { float: right; }
+ +

Esto muestra cómo el dígrafo holandés ij debe ser manejado como una sola letra.

+ +

{{ EmbedLiveSample('capitalize_(Dutch_ij_digraph)', '100%', '100px') }}

+ +

uppercase (General)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

Esto muestra la transformación de texto a mayúsculas.

+ +

{{ EmbedLiveSample('uppercase_(General)', '100%', '100px') }}

+ +

uppercase (Vocales griegas)

+ +
<p>Initial String
+  <strong>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</strong>
+</p>
+<p>text-transform: uppercase
+  <strong><span>Θα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα"</span></strong>
+</p>
+ +
span {
+  text-transform: uppercase;
+}
+strong { float: right; }
+ +

Esto muestra cómo las vocales griegas, excepto la disyuntiva eta no deben tener acento, y el acento de la primera vocal en un par de vocales se convierte a diéresis en la segunda vocal.

+ +

{{ EmbedLiveSample('uppercase_(Greek_Vowels)', '100%', '100px') }}

+ +

lowercase (General)

+ +
<p>Initial String
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

Esto muestra la transformación de texto a minúsculas.

+ +

{{ EmbedLiveSample('lowercase_(General)', '100%', '100px') }}

+ +

lowercase (Σ griega)

+ +
<p>Initial String
+  <strong>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</strong>
+</p>
+<p>text-transform: lowercase
+  <strong><span>Σ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.</span></strong>
+</p>
+ +
span {
+  text-transform: lowercase;
+}
+strong { float: right; }
+ +

Esto muestra cómo el caracter griego sigma (Σ) es trsnformado a sigma minúscula regular (σ) o a la variante de final de palabra (ς), conforme al contexto.

+ +

{{ EmbedLiveSample('lowercase_(Greek_Σ)', '100%', '100px') }}

+ +

full-width (General)

+ +
<p>Initial String
+  <strong>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</strong>
+</p>
+<p>text-transform: full-width
+  <strong><span>0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~</span></strong>
+</p>
+ +
span {
+  text-transform: full-width;
+}
+strong { width: 100%; float: right; }
+ +

Algunos caracteres existen en dos formas, de anchura normal y de anchura completa, con diferentes puntos de código en Unicode. La versión de anchura completa es usada para facilitar la mezcla con caracteres ideográficos asiáticos.

+ +

{{ EmbedLiveSample('full-width_(General)', '100%', '175px') }}

+ +

Sobre Accesibilidad

+ +

Usuarios con discapacidades cognitivas como dislexia pueden encontrar dificultad al leer textos largos cuando se aplica la propiedad text-transform con el valor de uppercase.

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS4 Text')}}De {{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}, se añade la palabra clave full-size-kana y permite que la palabra clave full-width sea usada junto con otro valor.
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}De {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}, se extienden las letras a cualquier caracter unicode en la categoría general de Números o Letras. Modifica el comportamiento de capitalize para aplicarse a la primera letra de la palabra, ignorando símbolos iniciales. Añade la palabra clave full-width para facilitar la mezcla entre caracteres ideográficos y caracteres alfabéticos.
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}De {{SpecName('CSS1', '#text-transform', 'text-transform')}}, extiende las letras a alfabetos no latinos bicamerales
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.07.01.0
capitalize (versión de CSS3){{CompatUnknown}}[1]{{CompatGeckoDesktop("14")}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoDesktop("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoDesktop("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ e ı → I{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dígrafo holandés IJ{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Letras griegas acentuadas30{{CompatGeckoDesktop("15")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ o término de palabra ς30{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}6.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
capitalize (versión de CSS3){{CompatUnknown}}[1]{{CompatGeckoMobile("14")}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]{{CompatUnknown}}[1]
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ e ı → I{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dígrafo holandés IJ{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Letras griegas acentuadas{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ o término de palabra ς{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La palabra clave capitalize fue pobremente especificada en CSS 1 y CSS 2.1. Había diferencias entre navegadores en la forma en que se calculaba la primera letra (Firefox consideraba - y _ como letras, pero los otros navegadores no. Tango Webkit como Gecko consideraban incorrectamente símbolos basados en letra, por ejemplo ⓐ, como letras reales. Internet Explorer 9 fue el que se apegó más a la definición de CSS 2, pero con algunos casos extraños). Definiendo detalladamente el comportamiento correcto, el Nivel 3 de Textos CSS clarifica estas confusiones. La línea capitalize en la tabla de compatibilidad de navegadores contiene la versión de los distintos motores en la que comenzaron a soportar este comportamiento mejor definido.

+ +

Véase también

+ +
    +
  • {{cssxref("font-variant")}}
    • +
diff --git a/files/es/web/css/texto_css/index.html b/files/es/web/css/texto_css/index.html new file mode 100644 index 0000000000..f0c3c934b6 --- /dev/null +++ b/files/es/web/css/texto_css/index.html @@ -0,0 +1,123 @@ +--- +title: Texto CSS +slug: Web/CSS/Texto_CSS +tags: + - CSS + - Texto CSS + - Vista general +translation_of: Web/CSS/CSS_Text +--- +
{{CSSRef}}
+ +

Texto CSS  es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.

+ +

Referencia

+ +

Propiedades

+ +
+
    +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("line-break")}}
    • +
  • {{cssxref("overflow-wrap")}}
    • +
  • {{cssxref("tab-size")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-align-last")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-size-adjust")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
  • {{cssxref("word-wrap")}}
    • +
+
+ +

Guías

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)
+
diff --git a/files/es/web/css/time/index.html b/files/es/web/css/time/index.html new file mode 100644 index 0000000000..9bdf3f145d --- /dev/null +++ b/files/es/web/css/time/index.html @@ -0,0 +1,84 @@ +--- +title: